feat(tui): show step decode speed in the footer

Author: elkaix

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

@@ -12,7 +12,7 @@ import chalk from 'chalk';
 import { effectiveModelAlias } from '@pymodel/pythinker-code-sdk';
 
 import { ALL_TIPS, type ToolbarTip } from '#/tui/constant/tips';
-import { isRainbowDancing, renderDanceFooterModel } from '#/tui/easter-eggs/dance';
+import { isRainbowHatching, renderHatchFooterModel } from '#/tui/easter-eggs/hatch';
 import { currentTheme } from '#/tui/theme';
 import type { ColorPalette } from '#/tui/theme/colors';
 import type { AppState } from '#/tui/types';
@@ -195,6 +195,7 @@ export class FooterComponent implements Component {
   private gitCacheWorkDir: string;
   private transientHint: string | null = null;
   private warningHint: string | null = null;
+  private streamSpeedTps: number | null = null;
   private goalSnapshotKey: string | null = null;
   private goalObservedAtMs = Date.now();
   private goalTimer: ReturnType<typeof setInterval> | null = null;
@@ -245,6 +246,17 @@ export class FooterComponent implements Component {
     }
   }
 
+  /**
+   * Decode speed of the most recently completed step (tokens/s), shown next
+   * to the context readout on line 2. `null` hides it (turn end, or a step
+   * too short to measure — see `computeDecodeTps`).
+   */
+  setStreamSpeed(tps: number | null): void {
+    if (this.streamSpeedTps === tps) return;
+    this.streamSpeedTps = tps;
+    this.onRefresh();
+  }
+
   /**
    * Short-lived hint that replaces the rotating toolbar tips on line 1.
    * Used by the exit-confirmation double-tap flow to show "Press Ctrl+C
@@ -337,28 +349,34 @@ export class FooterComponent implements Component {
       }
     }
 
-    // ── Line 2: hint (bottom-left) + context (right) ──
+    // ── Line 2: hint (bottom-left) + context + stream speed (right) ──
     const contextText = formatContextStatus(
       state.contextUsage,
       state.contextTokens,
       state.maxContextTokens,
     );
-    const contextWidth = visibleWidth(contextText);
+    const speedSuffix =
+      this.streamSpeedTps === null ? '' : ` · ${this.streamSpeedTps.toFixed(1)} t/s`;
+    const rightWidth = visibleWidth(contextText) + visibleWidth(speedSuffix);
     let line2: string;
     const hint = this.transientHint ?? this.warningHint;
     if (hint) {
-      const maxHintWidth = Math.max(0, width - contextWidth - 1);
+      const maxHintWidth = Math.max(0, width - rightWidth - 1);
       const shownHint =
         visibleWidth(hint) <= maxHintWidth ? hint : truncateToWidth(hint, maxHintWidth, '…');
       const hintWidth = visibleWidth(shownHint);
-      const pad = Math.max(0, width - hintWidth - contextWidth);
+      const pad = Math.max(0, width - hintWidth - rightWidth);
       line2 =
         chalk.hex(colors.warning).bold(shownHint) +
         ' '.repeat(pad) +
-        chalk.hex(colors.text)(contextText);
+        chalk.hex(colors.text)(contextText) +
+        chalk.hex(colors.textDim)(speedSuffix);
     } else {
-      const leftPad = Math.max(0, width - contextWidth);
-      line2 = ' '.repeat(leftPad) + chalk.hex(colors.text)(contextText);
+      const leftPad = Math.max(0, width - rightWidth);
+      line2 =
+        ' '.repeat(leftPad) +
+        chalk.hex(colors.text)(contextText) +
+        chalk.hex(colors.textDim)(speedSuffix);
     }
 
     return [truncateToWidth(line1, width), truncateToWidth(line2, width)];
@@ -413,8 +431,8 @@ export class FooterComponent implements Component {
           : '';
       const modelLabel = `${model}${thinkingLabel}`;
       let renderedModelLabel = chalk.hex(colors.text)(modelLabel);
-      if (isRainbowDancing()) {
-        renderedModelLabel = renderDanceFooterModel(modelLabel);
+      if (isRainbowHatching()) {
+        renderedModelLabel = renderHatchFooterModel(modelLabel);
       }
       slots['model'] = [renderedModelLabel];
     }

apps/pythinker-code/src/tui/controllers/session-event-handler.ts

@@ -71,7 +71,7 @@ import { openUrl } from '#/utils/open-url';
 import { currentTheme } from '#/tui/theme';
 import type { ColorToken } from '#/tui/theme';
 import { errorReportHintLine } from '../constant/feedback';
-import { formatStepDebugTiming } from '#/utils/usage/debug-timing';
+import { computeDecodeTps, formatStepDebugTiming } from '#/utils/usage/debug-timing';
 import { nextTranscriptId } from '../utils/transcript-id';
 import type { BtwPanelController } from './btw-panel';
 import { isPluginMcpToolName, PluginUpdateNotifier } from './plugin-update-notifier';
@@ -373,6 +373,8 @@ export class SessionEventHandler {
     this.host.handleTurnEnded?.(event);
     this.host.streamingUI.flushNow();
     this.clearStepRetry();
+    // The last step's decode speed no longer applies once the turn ends.
+    this.host.state.footer.setStreamSpeed(null);
     if (event.reason === 'cancelled') {
       this.markActiveAgentDynamicWorkflowsCancelled();
     }
@@ -436,6 +438,9 @@ export class SessionEventHandler {
     this.clearStepRetry();
     this.host.noteStepUsage(event.usage);
     this.maybeShowDebugTiming(event);
+    this.host.state.footer.setStreamSpeed(
+      computeDecodeTps(event.usage?.output, event.llmStreamDurationMs),
+    );
 
     if (event.providerFinishReason === 'filtered') {
       this.host.showNotice(

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

@@ -120,7 +120,7 @@ import { SessionReplayRenderer } from './controllers/session-replay';
 import { StagingLeaseTracker, type StagingLease } from './controllers/staging-leases';
 import { StreamingUIController } from './controllers/streaming-ui';
 import { TasksBrowserController } from './controllers/tasks-browser';
-import { installRainbowDance } from './easter-eggs/dance';
+import { installRainbowHatch } from './easter-eggs/hatch';
 import { adaptPanelResponse } from './reverse-rpc/approval/adapter';
 import { ApprovalController } from './reverse-rpc/approval/controller';
 import { createApprovalRequestHandler } from './reverse-rpc/approval/handler';
@@ -321,7 +321,7 @@ export class PythinkerTUI {
   private terminalFocusTrackingDispose: (() => void) | undefined;
   private terminalThemeTrackingDispose: (() => void) | undefined;
   private clipboardImageHintController: ClipboardImageHintController | undefined;
-  private uninstallRainbowDance: () => void;
+  private uninstallRainbowHatch: () => void;
   private signalCleanupHandlers: Array<() => void> = [];
   private isShuttingDown = false;
   private backgroundRefreshPromise: Promise<void> | undefined;
@@ -417,7 +417,7 @@ export class PythinkerTUI {
     this.engineV2 = startupInput.engineV2 ?? false;
     this.startupNotice = startupInput.startupNotice;
     this.state = createTUIState(tuiOptions);
-    this.uninstallRainbowDance = installRainbowDance(() => {
+    this.uninstallRainbowHatch = installRainbowHatch(() => {
       this.state.ui.requestRender();
     });
 
@@ -907,7 +907,7 @@ export class PythinkerTUI {
     } finally {
       this.sessionEventHandler.stopAllMcpServerStatusSpinners();
       this.sessionEventHandler.clearStepRetryAttemptTimer();
-      this.uninstallRainbowDance();
+      this.uninstallRainbowHatch();
       try {
         await this.state.terminal.drainInput();
       } catch {
@@ -1061,10 +1061,6 @@ export class PythinkerTUI {
   // Input Dispatch
   // =========================================================================
 
-  handlePlanToggle(next: boolean): void {
-    void slashCommands.handlePlanCommand(this, next ? 'on' : 'off');
-  }
-
   handleInputModeChange(mode: 'prompt' | 'bash'): void {
     this.setAppState({ inputMode: mode });
     this.updateEditorBorderHighlight();

apps/pythinker-code/src/utils/usage/debug-timing.ts

@@ -35,6 +35,22 @@ export interface StepTimingInput {
 // instead of a meaningless ratio.
 const MIN_STREAM_MS_FOR_TPS = 50;
 
+/**
+ * Step decode speed in raw tokens/s, or null when the ratio would be
+ * meaningless: unknown/zero output, or a decode window below
+ * `MIN_STREAM_MS_FOR_TPS` where `Date.now()`'s ~1ms quantization dominates
+ * and short tool-call turns would report inflated rates like tens of
+ * thousands of tok/s. Callers format the ratio (one decimal is conventional).
+ */
+export function computeDecodeTps(
+  outputTokens: number | undefined,
+  streamMs: number | undefined,
+): number | null {
+  if (outputTokens === undefined || outputTokens <= 0) return null;
+  if (streamMs === undefined || streamMs < MIN_STREAM_MS_FOR_TPS) return null;
+  return outputTokens / (streamMs / 1000);
+}
+
 export function formatStepDebugTiming(input: StepTimingInput): string | undefined {
   const latency = input.llmFirstTokenLatencyMs;
   const streamMs = input.llmStreamDurationMs;
@@ -43,10 +59,10 @@ export function formatStepDebugTiming(input: StepTimingInput): string | undefine
   const parts: string[] = [`TTFT: ${formatTtft(input)}`];
   const outputTokens = input.usage?.output;
   if (outputTokens !== undefined && outputTokens > 0) {
-    if (streamMs >= MIN_STREAM_MS_FOR_TPS) {
-      const tps = (outputTokens / (streamMs / 1000)).toFixed(1);
+    const tps = computeDecodeTps(outputTokens, streamMs);
+    if (tps !== null) {
       parts.push(
-        `TPS: ${tps} tok/s (${outputTokens} tokens in ${formatDuration(streamMs)}${formatDecodeSplit(input)})`,
+        `TPS: ${tps.toFixed(1)} tok/s (${outputTokens} tokens in ${formatDuration(streamMs)}${formatDecodeSplit(input)})`,
       );
     } else {
       parts.push(

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

@@ -2,7 +2,7 @@ import chalk from 'chalk';
 import { afterEach, beforeEach, describe, expect, it } from 'vitest';
 
 import { FooterComponent } from '#/tui/components/chrome/footer';
-import { setRainbowDance, type RainbowDanceController } from '#/tui/easter-eggs/dance';
+import { setRainbowHatch, type RainbowHatchController } from '#/tui/easter-eggs/hatch';
 import { currentTheme, darkColors, lightColors } from '#/tui/theme';
 import type { ModelAlias } from '@pymodel/pythinker-code-sdk';
 import type { AppState } from '#/tui/types';
@@ -17,19 +17,19 @@ function truecolorCodes(text: string): Set<string> {
   return codes;
 }
 
-// Dark dance colors the footer never uses outside of /dance.
+// Dark hatch colors the footer never uses outside of /hatch.
 const RAINBOW_CYAN = '91,192,190';
 const RAINBOW_GREEN = '78,200,126';
 
-function setDanceView(colored: boolean, phase: number): void {
-  const dance: RainbowDanceController = {
+function setHatchView(colored: boolean, phase: number): void {
+  const hatch: RainbowHatchController = {
     colored,
     phase,
     start: () => {},
     stop: () => {},
     dispose: () => {},
   };
-  setRainbowDance(dance);
+  setRainbowHatch(hatch);
 }
 
 const appState: AppState = {
@@ -70,11 +70,11 @@ describe('FooterComponent', () => {
 
   afterEach(() => {
     chalk.level = previousChalkLevel;
-    setRainbowDance(undefined);
+    setRainbowHatch(undefined);
   });
 
   it('paints the model name in rainbow while colored', () => {
-    setDanceView(true, 0);
+    setHatchView(true, 0);
     const footer = new FooterComponent(appState);
 
     const codes = truecolorCodes(footer.render(120).join('\n'));
@@ -85,7 +85,7 @@ describe('FooterComponent', () => {
     expect(codes.has(RAINBOW_GREEN)).toBe(true);
   });
 
-  it('renders the model name in its normal color when not dancing', () => {
+  it('renders the model name in its normal color when not hatching', () => {
     const footer = new FooterComponent(appState);
 
     const codes = truecolorCodes(footer.render(120).join('\n'));
@@ -223,3 +223,34 @@ describe('FooterComponent line-2 hints', () => {
     expect(stripAnsi(footer.render(120)[1] ?? '')).not.toContain('Goal objective is too long');
   });
 });
+
+
+describe('FooterComponent stream speed', () => {
+  function stripAnsiSpeed(text: string): string {
+    return text.replaceAll(/\[[0-9;]*m/g, '');
+  }
+
+  it('hides the speed badge until a step completes', () => {
+    const footer = new FooterComponent(appState);
+
+    expect(stripAnsiSpeed(footer.render(120)[1] ?? '')).not.toContain('t/s');
+  });
+
+  it('shows the last step decode speed next to the context readout', () => {
+    const footer = new FooterComponent(appState);
+    footer.setStreamSpeed(38.44);
+
+    const line2 = stripAnsiSpeed(footer.render(120)[1] ?? '');
+
+    expect(line2).toContain('context:');
+    expect(line2).toContain('· 38.4 t/s');
+  });
+
+  it('clears the speed badge on null', () => {
+    const footer = new FooterComponent(appState);
+    footer.setStreamSpeed(12.5);
+    footer.setStreamSpeed(null);
+
+    expect(stripAnsiSpeed(footer.render(120)[1] ?? '')).not.toContain('t/s');
+  });
+});

apps/pythinker-code/test/tui/controllers/session-event-handler-background-task.test.ts

@@ -124,7 +124,7 @@ function makeSessionEventHost() {
       todoPanel: { getTodos: vi.fn(() => []) },
       transcriptContainer: { addChild: vi.fn() },
       tasksBrowser: undefined,
-      footer: { setBackgroundCounts: vi.fn() },
+      footer: { setBackgroundCounts: vi.fn(), setStreamSpeed: vi.fn() },
       ui: { requestRender: vi.fn() },
     },
     session: { id: 's1' },

apps/pythinker-code/test/tui/controllers/session-event-handler-compaction.test.ts

@@ -6,6 +6,7 @@ import { getBuiltInPalette } from '#/tui/theme';
 function makeHost() {
   const host = {
     state: {
+      footer: { setStreamSpeed: vi.fn() },
       appState: {
         sessionId: 's1',
         streamingPhase: 'waiting',

apps/pythinker-code/test/tui/controllers/session-event-handler-goal-queue.test.ts

@@ -47,6 +47,7 @@ function makeHost(options: { createGoalRejects?: boolean } = {}) {
   };
   const host = {
     state: {
+      footer: { setStreamSpeed: vi.fn() },
       appState: {
         sessionId: 's1',
         streamingPhase: 'waiting',

apps/pythinker-code/test/tui/controllers/session-event-handler-plugin-updates.test.ts

@@ -20,6 +20,7 @@ function makeHost() {
   };
   const host = {
     state: {
+      footer: { setStreamSpeed: vi.fn() },
       appState: {
         sessionId: 's1',
         streamingPhase: 'waiting',

apps/pythinker-code/test/tui/controllers/session-event-handler-step-retry.test.ts

@@ -6,6 +6,7 @@ import { getBuiltInPalette } from '#/tui/theme';
 function makeHost() {
   const host = {
     state: {
+      footer: { setStreamSpeed: vi.fn() },
       appState: {
         sessionId: 's1',
         streamingPhase: 'waiting',