feat(tui): render the status bar below the editor as the single status line

Author: elkaix

apps/pythinker-code/src/tui/components/chrome/footer.ts

@@ -10,19 +10,16 @@ import chalk from 'chalk';
 
 import {
   createFooterState,
-  formatStatusRow,
   reduceFooterState,
   selectFooterViewModel,
   type FooterBackgroundCounts,
   type FooterGitStatus,
   type FooterGoal,
   type FooterState,
   type FooterStatus,
-  type FooterStatusRowViewModel,
   type FooterViewModel,
   type FooterViewModelRow,
 } from '#/tui/runtime/footer/footer-model';
-import { currentTheme } from '#/tui/theme';
 import type { AppState } from '#/tui/types';
 import {
   createGitStatusCache,
@@ -275,7 +272,7 @@ export class FooterComponent implements Component {
           this.state.statusLine,
         );
     return viewModel.rows.flatMap((row) => {
-      if (row.kind === 'activity' || row.kind === 'composer') return [];
+      if (row.kind === 'composer' || row.kind === 'status') return [];
       return [truncateToWidth(renderLegacyRow(row), width, '…')];
     });
   }
@@ -376,16 +373,12 @@ export class FooterComponent implements Component {
   }
 }
 
-/** Keep the persistent status quiet; danger rows remain explicitly red. */
-function paintStatusRow(
-  row: string,
-  _modelName: string | null,
-  emphasis: FooterStatusRowViewModel['emphasis'],
+function renderLegacyRow(
+  row: Exclude<
+    FooterViewModelRow,
+    { readonly kind: 'composer' } | { readonly kind: 'status' }
+  >,
 ): string {
-  return currentTheme.fg(emphasis === 'danger' ? 'error' : 'textDim', row);
-}
-
-function renderLegacyRow(row: Exclude<FooterViewModelRow, { readonly kind: 'composer' }>): string {
   switch (row.kind) {
     case 'activity':
       return row.primary.length === 0
@@ -395,8 +388,6 @@ function renderLegacyRow(row: Exclude<FooterViewModelRow, { readonly kind: 'comp
           : `${row.primary}  ${row.indicators.join('  ')}`;
     case 'validation':
       return row.level === 'info' ? row.message : `${row.level}: ${row.message}`;
-    case 'status':
-      return paintStatusRow(formatStatusRow(row.items), row.modelName, row.emphasis);
   }
 }
 

apps/pythinker-code/src/tui/components/chrome/status-bar.ts

@@ -19,7 +19,10 @@ export type StatusBarStatus = Pick<
   | 'planMode'
   | 'fastMode'
   | 'dynamicWorkflowMode'
-> & { readonly sessionKey: string };
+> & {
+  readonly extras: readonly string[];
+  readonly sessionKey: string;
+};
 
 export class StatusBarComponent implements Component {
   private status: StatusBarStatus | undefined;
@@ -39,10 +42,16 @@ export class StatusBarComponent implements Component {
       )}`,
     );
     let modesChip = renderModesChip(status);
+    const extraChips = status.extras.map((extra) =>
+      chip(currentTheme.fg('textDim', extra)),
+    );
     let cwdChip: string | undefined = chip(
       currentTheme.fg('textDim', shortenCwd(status.cwd, status.homeDir)),
     );
-    const left = (): string => `${modelChip}${modesChip === undefined ? '' : ` ${modesChip}`}`;
+    const left = (): string =>
+      [modelChip, modesChip, ...extraChips]
+        .filter((item): item is string => item !== undefined)
+        .join(' ');
     const fullGapWidth =
       width - visibleWidth(left()) - (cwdChip === undefined ? 1 : visibleWidth(cwdChip) + 2);
 
@@ -58,6 +67,10 @@ export class StatusBarComponent implements Component {
       line = cwdChip === undefined ? `${left()} ${gap}` : `${left()} ${gap} ${cwdChip}`;
     } else {
       line = `${left()}${cwdChip === undefined ? '' : ` ${cwdChip}`}`;
+      while (visibleWidth(line) > width && extraChips.length > 0) {
+        extraChips.pop();
+        line = `${left()}${cwdChip === undefined ? '' : ` ${cwdChip}`}`;
+      }
       if (visibleWidth(line) > width && modesChip !== undefined) {
         modesChip = undefined;
         line = `${left()}${cwdChip === undefined ? '' : ` ${cwdChip}`}`;

apps/pythinker-code/src/tui/components/messages/dynamic-workflow-mission-control.ts

@@ -507,9 +507,20 @@ export class DynamicWorkflowMissionControlComponent implements Component {
 
   private renderAggregate(width: number, nowMs: number): string {
     const terminal = isTerminalRequestPhase(this.model.requestPhase);
+    const frame = Math.floor(
+      Math.max(0, nowMs - this.model.startedAtMs) /
+        DYNAMIC_WORKFLOW_RENDERING.progressFrameMs,
+    );
     const loader = terminal
       ? currentTheme.fg(requestPhaseColor(this.model.requestPhase), requestPhaseSymbol(this.model.requestPhase))
-      : this.activitySpinnerText?.() ?? currentTheme.fg('primary', '●');
+      : this.activitySpinnerText === undefined
+        ? currentTheme.fg('primary', '●')
+        : currentTheme.fg(
+            'primary',
+            DYNAMIC_WORKFLOW_RENDERING.progressFrames[
+              frame % DYNAMIC_WORKFLOW_RENDERING.progressFrames.length
+            ] ?? DYNAMIC_WORKFLOW_RENDERING.progressFrames[0],
+          );
     const aggregateMembers = this.aggregateMembers();
     // All spawned agents are done but the tool result has not arrived yet:
     // the label says so instead of pretending orchestration is still active.

apps/pythinker-code/src/tui/constant/rendering.ts

@@ -32,10 +32,10 @@ export const DYNAMIC_WORKFLOW_RENDERING = {
   stateColumnWidth: 6,
   /** Cadence for the live aggregate-label shimmer. */
   aggregateShimmerFrameMs: BRAILLE_SPINNER_INTERVAL_MS,
-  /** Thin-arc frames for a running row; all rows share one clock. */
-  progressFrames: ['◜', '◝', '◞', '◟'],
-  /** Arc cadence in milliseconds. */
-  progressFrameMs: 120,
+  /** Half-circle frames for a running row; all rows share one clock. */
+  progressFrames: ['◐', '◓', '◑', '◒'],
+  /** Rotation cadence in milliseconds — deliberately slow; this is ambience, not progress. */
+  progressFrameMs: 300,
   /** Least room the task keeps before the detail may claim any of the row. */
   memberTaskMinWidth: 12,
   /** Share of the free row the task may take before the detail gets the rest. */

apps/pythinker-code/src/tui/pythinker-tui.ts

@@ -141,6 +141,7 @@ import type { TuiPresentation } from './runtime/contracts';
 import {
   foldFooterEvents,
   selectFooterViewModel,
+  selectStatusBarExtras,
   type FooterActivity,
   type FooterEvent,
   type FooterGoal,
@@ -964,8 +965,8 @@ export class PythinkerTUI {
     ui.addChild(this.state.queueContainer);
     ui.addChild(this.state.btwPanelContainer);
     ui.addChild(this.state.mcpStatusContainer);
-    ui.addChild(this.state.statusBarContainer);
     ui.addChild(this.state.editorContainer);
+    ui.addChild(this.state.statusBarContainer);
     // Footer is mounted later (mountFooter), not here.
   }
 
@@ -1396,6 +1397,11 @@ export class PythinkerTUI {
     );
     this.state.statusBar.update({
       ...this.state.footerState.status,
+      extras: selectStatusBarExtras(
+        this.state.footerState,
+        Date.now(),
+        this.state.appState.statusLine,
+      ),
       sessionKey:
         this.state.appState.sessionTitle?.trim() ||
         this.state.appState.sessionId ||

apps/pythinker-code/src/tui/runtime/footer/footer-model.ts

@@ -464,68 +464,113 @@ function selectActivityRow(state: FooterState): FooterActivityRowViewModel {
   });
 }
 
-function selectStatusItems(
+function selectStatusItemParts(
   state: FooterState,
   clockMs: number,
   statusLine: StatusLineConfig,
-): string[] {
-  const items: string[] = [];
+): {
+  readonly update: string | null;
+  readonly model: string | null;
+  readonly speed: string | null;
+  readonly spend: string | null;
+  readonly context: string | null;
+  readonly git: string | null;
+  readonly modes: string | null;
+  readonly elapsed: string | null;
+  readonly goal: string | null;
+  readonly background: readonly string[];
+} {
   const update = formatUpdate(state.update);
-  if (update !== null) items.push(update);
-  const model = normalizeSingleLine(state.status.model);
-  if (statusLine.showModel && model.length > 0) {
+  const modelName = normalizeSingleLine(state.status.model);
+  const speed = statusLine.showTokenSpeed ? formatTokenSpeed(state.status) : null;
+  let model: string | null = null;
+  if (statusLine.showModel && modelName.length > 0) {
     const effortSuffix =
       statusLine.showEffort && state.status.thinkingLevel !== 'off'
         ? ` · ${shortEffortLabel(state.status.thinkingLevel)}`
         : '';
     // Fast rides on the model item and only while mode badges are visible,
     // so it can never appear twice in the row.
     const fastSuffix = statusLine.showModes && state.status.fastMode ? ' · ↯ fast' : '';
-    const speed = statusLine.showTokenSpeed ? formatTokenSpeed(state.status) : null;
-    items.push(`${model}${effortSuffix}${fastSuffix}${speed === null ? '' : ` · ${speed}`}`);
-  }
-
-  if (statusLine.showModel) {
-    const spend = formatSessionSpend(state.status.sessionSpendUsd);
-    if (spend !== null) items.push(spend);
-  }
-
-  if (statusLine.showContextBar) items.push(formatContext(state.status));
-
-  if (statusLine.showGit) {
-    const git = formatGitStatus(state.status.git);
-    if (git !== null) items.push(git);
+    model = `${modelName}${effortSuffix}${fastSuffix}${speed === null ? '' : ` · ${speed}`}`;
   }
 
+  let modes: string | null = null;
   if (statusLine.showModes) {
-    const modes: string[] = [];
-    if (state.status.dynamicWorkflowMode) modes.push('workflow');
-    if (state.status.permissionMode === 'auto') modes.push('auto');
-    if (state.status.planMode) modes.push('plan');
-    if (modes.length > 0) items.push(modes.join(' '));
-  }
-
-  if (statusLine.showElapsed && state.status.elapsedMs !== null) {
-    items.push(`elapsed ${formatStatusElapsed(state.status.elapsedMs)}`);
-  }
-
-  if (statusLine.showGoal) {
-    const goal = formatGoal(state.goal, clockMs);
-    if (goal !== null) items.push(goal);
+    const modeItems: string[] = [];
+    if (state.status.dynamicWorkflowMode) modeItems.push('workflow');
+    if (state.status.permissionMode === 'auto') modeItems.push('auto');
+    if (state.status.planMode) modeItems.push('plan');
+    if (modeItems.length > 0) modes = modeItems.join(' ');
   }
 
+  const background: string[] = [];
   if (statusLine.showBackgroundTasks) {
     const bashTasks = nonNegativeInteger(state.background.bashTasks);
     if (bashTasks > 0) {
-      items.push(`[${String(bashTasks)} ${plural(bashTasks, 'task')} running]`);
+      background.push(`[${String(bashTasks)} ${plural(bashTasks, 'task')} running]`);
     }
     const agentTasks = nonNegativeInteger(state.background.agentTasks);
     if (agentTasks > 0) {
-      items.push(
+      background.push(
         `[${String(agentTasks)} ${plural(agentTasks, 'agent')} running]`,
       );
     }
   }
+
+  return {
+    update,
+    model,
+    speed,
+    spend: statusLine.showModel ? formatSessionSpend(state.status.sessionSpendUsd) : null,
+    context: statusLine.showContextBar ? formatContext(state.status) : null,
+    git: statusLine.showGit ? formatGitStatus(state.status.git) : null,
+    modes,
+    elapsed:
+      statusLine.showElapsed && state.status.elapsedMs !== null
+        ? `elapsed ${formatStatusElapsed(state.status.elapsedMs)}`
+        : null,
+    goal: statusLine.showGoal ? formatGoal(state.goal, clockMs) : null,
+    background,
+  };
+}
+
+function selectStatusItems(
+  state: FooterState,
+  clockMs: number,
+  statusLine: StatusLineConfig,
+): string[] {
+  const parts = selectStatusItemParts(state, clockMs, statusLine);
+  const items = [
+    parts.update,
+    parts.model,
+    parts.spend,
+    parts.context,
+    parts.git,
+    parts.modes,
+    parts.elapsed,
+    parts.goal,
+  ].filter((item): item is string => item !== null);
+  items.push(...parts.background);
+  return items;
+}
+
+export function selectStatusBarExtras(
+  state: FooterState,
+  clockMs: number,
+  statusLine: StatusLineConfig,
+): string[] {
+  const parts = selectStatusItemParts(state, clockMs, statusLine);
+  const items = [
+    parts.update,
+    parts.speed,
+    parts.spend,
+    parts.context,
+    parts.git,
+    parts.elapsed,
+    parts.goal,
+  ].filter((item): item is string => item !== null);
+  items.push(...parts.background);
   return items;
 }
 

apps/pythinker-code/src/tui/tui-state.ts

@@ -114,8 +114,8 @@ export function createTUIState(options: PythinkerTUIOptions): TUIState {
       queueContainer,
       btwPanelContainer,
       mcpStatusContainer,
-      statusBarContainer,
       editorContainer,
+      statusBarContainer,
     ],
     footerWrap,
   );