@pellux/goodvibes-tui 0.27.0 → 0.29.0

package/src/panels/thinking-panel.ts

@@ -16,7 +16,7 @@ import {
   DEFAULT_PANEL_PALETTE,
   type PanelWorkspaceSection,
 } from './polish.ts';
-import { truncateDisplay } from '../utils/terminal-width.ts';
+import { truncateDisplay, wrapText } from '../utils/terminal-width.ts';
 
 const C = extendPalette(DEFAULT_PANEL_PALETTE, {
   // Domain-specific reasoning tones (purples) and the active-stream cyan have no
@@ -28,34 +28,33 @@ const C = extendPalette(DEFAULT_PANEL_PALETTE, {
 });
 
 interface ReasoningBlock {
-  turnId: number;
+  // Real turn id from the TURN_*/STREAM_* event envelope — joins this block
+  // to the same turn's rows in TasksPanel and the tool inspector, which key
+  // off the identical turnId string.
+  turnId: string;
+  // Distributed-tracing correlation id (EventEnvelope.traceId), when the
+  // originating event carried one — same field RuntimeTask.correlationId
+  // joins against.
+  correlationId?: string;
   content: string;
   active: boolean;  // true = currently streaming
   collapsed: boolean;
+  startedAt: number;
+  updatedAt: number;
 }
 
-function wrapLines(text: string, width: number): string[] {
-  const result: string[] = [];
-  const raw = text.split('\n');
-  for (const line of raw) {
-    if (line.length <= width) {
-      result.push(line);
-    } else {
-      let start = 0;
-      while (start < line.length) {
-        result.push(line.slice(start, start + width));
-        start += width;
-      }
-    }
-  }
-  return result;
+function fmtClock(ts: number): string {
+  const d = new Date(ts);
+  const h = String(d.getHours()).padStart(2, '0');
+  const m = String(d.getMinutes()).padStart(2, '0');
+  const s = String(d.getSeconds()).padStart(2, '0');
+  return `${h}:${m}:${s}`;
 }
 
 type FlatRow = { kind: 'header'; blockIndex: number; text: string } | { kind: 'content'; text: string };
 
 export class ThinkingPanel extends BasePanel {
   private blocks: ReasoningBlock[] = [];
-  private nextTurnId = 1;
   private unsubs: Array<() => void> = [];
   private cursorIndex = 0;
   private scrollOffset = 0;
@@ -121,8 +120,8 @@ export class ThinkingPanel extends BasePanel {
             lines: buildEmptyState(
               width,
               ' No reasoning content yet',
-              'When the model emits thinking or reasoning deltas, they accumulate here in expandable blocks.',
-              [],
+              'When the model emits thinking or reasoning deltas during a turn, they accumulate here in expandable per-turn blocks.',
+              [{ command: '/chat <prompt>', summary: 'start a turn with a reasoning-capable model to stream thinking here' }],
               DEFAULT_PANEL_PALETTE,
             ),
           },
@@ -152,12 +151,38 @@ export class ThinkingPanel extends BasePanel {
       ],
     };
 
-    const selectedRow = flat[this.cursorIndex];
+    // Resolve the reasoning block that owns the cursor row (walk back to its
+    // header) so the detail block describes the actual turn, not just row kind.
+    let selectedBlockIndex = -1;
+    for (let i = Math.min(this.cursorIndex, flat.length - 1); i >= 0; i--) {
+      const row = flat[i];
+      if (row?.kind === 'header') { selectedBlockIndex = row.blockIndex; break; }
+    }
+    const selectedBlock = selectedBlockIndex >= 0 ? this.blocks[selectedBlockIndex] : undefined;
     const selectedSection: PanelWorkspaceSection = {
       title: 'Selected',
-      lines: [
-        buildPanelLine(width, [[' Row Type ', DEFAULT_PANEL_PALETTE.label], [selectedRow?.kind ?? 'none', DEFAULT_PANEL_PALETTE.value]]),
-      ],
+      lines: selectedBlock
+        ? [
+            buildPanelLine(width, [
+              [' Turn ', DEFAULT_PANEL_PALETTE.label],
+              [selectedBlock.turnId, DEFAULT_PANEL_PALETTE.value],
+              ['   State ', DEFAULT_PANEL_PALETTE.label],
+              [selectedBlock.active ? 'streaming' : 'complete', selectedBlock.active ? DEFAULT_PANEL_PALETTE.warn : DEFAULT_PANEL_PALETTE.good],
+              ['   View ', DEFAULT_PANEL_PALETTE.label],
+              [selectedBlock.collapsed ? 'collapsed' : 'expanded', DEFAULT_PANEL_PALETTE.info],
+              ['   Chars ', DEFAULT_PANEL_PALETTE.label],
+              [String(selectedBlock.content.length), DEFAULT_PANEL_PALETTE.dim],
+            ]),
+            buildPanelLine(width, [
+              [' Correlation ', DEFAULT_PANEL_PALETTE.label],
+              [selectedBlock.correlationId ?? 'n/a', DEFAULT_PANEL_PALETTE.dim],
+              ['   Started ', DEFAULT_PANEL_PALETTE.label],
+              [fmtClock(selectedBlock.startedAt), DEFAULT_PANEL_PALETTE.dim],
+              ['   Updated ', DEFAULT_PANEL_PALETTE.label],
+              [fmtClock(selectedBlock.updatedAt), DEFAULT_PANEL_PALETTE.dim],
+            ]),
+          ]
+        : [buildPanelLine(width, [[' No block selected', DEFAULT_PANEL_PALETTE.dim]])],
     };
 
     const reasoningSection = resolveScrollablePanelSection(width, height, {
@@ -209,10 +234,10 @@ export class ThinkingPanel extends BasePanel {
     const rows: FlatRow[] = [];
     for (let i = 0; i < this.blocks.length; i++) {
       const block = this.blocks[i]!;
-      const turnLabel = `Turn ${block.turnId}${block.active ? ' (streaming)' : ''}`;
+      const turnLabel = `Turn ${block.turnId} ${fmtClock(block.startedAt)}${block.active ? ' (streaming)' : ''}`;
       rows.push({ kind: 'header', blockIndex: i, text: turnLabel });
       if (!block.collapsed) {
-        const wrapped = wrapLines(block.content || '(empty)', Math.max(1, width - 2));
+        const wrapped = wrapText(block.content || '(empty)', Math.max(1, width - 2));
         for (const line of wrapped) {
           rows.push({ kind: 'content', text: line });
         }
@@ -249,12 +274,18 @@ export class ThinkingPanel extends BasePanel {
 
     let currentBlock: ReasoningBlock | null = null;
 
-    this.unsubs.push(this.turnEvents.on('STREAM_START', () => {
+    // onEnvelope (not on) so real turnId/traceId/timestamp — the same fields
+    // TasksPanel and the tool inspector join their own rows on — stamp each
+    // block instead of a locally-incrementing counter.
+    this.unsubs.push(this.turnEvents.onEnvelope('STREAM_START', (envelope) => {
       const block: ReasoningBlock = {
-        turnId: this.nextTurnId++,
+        turnId: envelope.turnId ?? envelope.payload.turnId,
+        correlationId: envelope.traceId,
         content: '',
         active: true,
         collapsed: false,
+        startedAt: envelope.ts,
+        updatedAt: envelope.ts,
       };
       // Cap block count to prevent unbounded growth
       if (this.blocks.length >= ThinkingPanel.MAX_BLOCKS) {
@@ -266,26 +297,29 @@ export class ThinkingPanel extends BasePanel {
       this.markDirty();
     }));
 
-    this.unsubs.push(this.turnEvents.on('STREAM_DELTA', (env) => {
-      const reasoning = env.reasoning;
+    this.unsubs.push(this.turnEvents.onEnvelope('STREAM_DELTA', (envelope) => {
+      const reasoning = envelope.payload.reasoning;
       if (reasoning && currentBlock) {
         currentBlock.content += reasoning;
+        currentBlock.updatedAt = envelope.ts;
         this.autoScroll = true;
         this.markDirty();
       }
     }));
 
-    this.unsubs.push(this.turnEvents.on('STREAM_END', () => {
+    this.unsubs.push(this.turnEvents.onEnvelope('STREAM_END', (envelope) => {
       if (currentBlock) {
         currentBlock.active = false;
+        currentBlock.updatedAt = envelope.ts;
         currentBlock = null;
         this.markDirty();
       }
     }));
 
-    this.unsubs.push(this.turnEvents.on('TURN_COMPLETED', () => {
+    this.unsubs.push(this.turnEvents.onEnvelope('TURN_COMPLETED', (envelope) => {
       if (currentBlock) {
         currentBlock.active = false;
+        currentBlock.updatedAt = envelope.ts;
         currentBlock = null;
         this.markDirty();
       }

package/src/panels/token-budget-panel.ts

@@ -3,12 +3,21 @@ import { BasePanel } from './base-panel.ts';
 import { createEmptyLine, createStyledCell, type Line } from '../types/grid.ts';
 import type { Orchestrator } from '../core/orchestrator';
 import { evaluateSessionMaintenance } from '@/runtime/index.ts';
+import type { TurnEvent } from '@/runtime/index.ts';
+import type { UiEventFeed } from '../runtime/ui-events.ts';
 import type { UiReadModel, UiSessionSnapshot } from '../runtime/ui-read-models.ts';
 import type { SessionMemoryQuery } from '../runtime/ui-service-queries.ts';
+import { calcSessionCost } from '../export/cost-utils.ts';
+import { type ConfirmState, handleConfirmInput, renderConfirmLines } from './confirm-state.ts';
+import type { PanelIntegrationContext } from './types.ts';
 import {
   buildEmptyState,
   buildGuidanceLine,
+  buildKeyboardHints,
+  buildMeterLine,
+  buildStatusPill,
   buildStyledPanelLine,
+  buildTable,
   buildPanelWorkspace,
   resolveScrollablePanelSection,
   DEFAULT_PANEL_PALETTE,
@@ -51,6 +60,9 @@ const WARN_RED = 0.90;
 // Maximum turns to keep in per-turn history
 const MAX_TURN_HISTORY = 10;
 
+// Rows scrolled per pageup/pagedown key press through the Recent Turns history.
+const PAGE_SCROLL_ROWS = 5;
+
 // ---------------------------------------------------------------------------
 // Helpers
 // ---------------------------------------------------------------------------
@@ -71,10 +83,15 @@ function fmtTok(n: number): string {
  *
  * Displays:
  *  - Stacked bar: input / output / cache-read / cache-write
- *  - Context window fill percentage with progress bar
- *  - Per-turn token usage (last 10 turns)
- *  - Cumulative session totals
+ *  - Context window fill percentage with progress bar + pressure pill
+ *  - Per-turn token usage (last 10 turns), scrollable
+ *  - Cumulative session totals + inline cost estimate
  *  - Warning threshold indicators (yellow at 70%, red at 90%)
+ *
+ * Absorbs the former ContextVisualizerPanel ('context'): the pressure pill,
+ * TURN_SUBMITTED/TURN_COMPLETED-driven refresh, and the compact-now action
+ * all live here now. `PanelManager` aliases the retired `context` id to
+ * `tokens` so old `/panel open context` calls keep working.
  */
 export class TokenBudgetPanel extends BasePanel {
   /** Snapshot of cumulative usage from the Orchestrator after each turn. */
@@ -92,19 +109,38 @@ export class TokenBudgetPanel extends BasePanel {
   private orchestrator: Orchestrator | null = null;
   private getContextWindow: (() => number) | null = null;
   private sessionReadModel: UiReadModel<UiSessionSnapshot> | null = null;
+  /** Resolver for the active model id, for inline cost display. */
+  private getCurrentModelId: (() => string) | null = null;
   private readonly sessionMemoryStore: SessionMemoryQuery;
   private readonly configManager: Pick<ConfigManager, 'get'>;
   private readonly requestRender: () => void;
 
+  /** Turn-event bus subscriptions — absorbed from ContextVisualizerPanel. */
+  private unsubs: Array<() => void> = [];
+
+  /** Manual scroll cursor into turnHistory; -1 = auto-follow the latest turn. */
+  private turnScrollIndex = -1;
+
+  /** Pending confirm dialog (currently only used for the compact-now action). */
+  private confirm: ConfirmState<'compact'> | null = null;
+  /**
+   * Set when a confirm resolves to 'confirmed'; consumed by
+   * handlePanelIntegrationAction on the very next dispatch of that same key
+   * so it can reach the ctx.executeCommand bridge (handleInput has no ctx).
+   */
+  private compactConfirmedPending = false;
+
   constructor(
     sessionMemoryStore: SessionMemoryQuery,
     configManager: Pick<ConfigManager, 'get'>,
     requestRender: () => void = () => {},
+    turnEvents?: UiEventFeed<TurnEvent>,
   ) {
-    super('tokens', 'Tokens', 'T', 'monitoring');
+    super('tokens', 'Tokens', '▢', 'providers');
     this.sessionMemoryStore = sessionMemoryStore;
     this.configManager = configManager;
     this.requestRender = requestRender;
+    if (turnEvents) this._attachBus(turnEvents);
   }
 
   // ---------------------------------------------------------------------------
@@ -114,17 +150,21 @@ export class TokenBudgetPanel extends BasePanel {
   /**
    * Wire the panel to live data sources. Call once after construction.
    *
-   * @param orchestrator  The main Orchestrator instance (for usage + lastInputTokens).
-   * @param getCtxWindow  Callback returning the current model's contextWindow value.
+   * @param orchestrator      The main Orchestrator instance (for usage + lastInputTokens).
+   * @param getCtxWindow      Callback returning the current model's contextWindow value.
+   * @param sessionReadModel  Session read model (for the Maintenance status line).
+   * @param getCurrentModelId Callback returning the active model id, for the inline cost line.
    */
   wire(
     orchestrator: Orchestrator,
     getCtxWindow: () => number,
     sessionReadModel?: UiReadModel<UiSessionSnapshot>,
+    getCurrentModelId?: () => string,
   ): void {
     this.orchestrator = orchestrator;
     this.getContextWindow = getCtxWindow;
     this.sessionReadModel = sessionReadModel ?? null;
+    this.getCurrentModelId = getCurrentModelId ?? null;
   }
 
   /**
@@ -149,10 +189,27 @@ export class TokenBudgetPanel extends BasePanel {
     if (this.turnHistory.length > MAX_TURN_HISTORY) {
       this.turnHistory.shift();
     }
+    // A freshly completed turn always pulls the view back to the latest entry.
+    this.turnScrollIndex = -1;
 
     this._refreshAndRender();
   }
 
+  // ---------------------------------------------------------------------------
+  // Turn-event bus (absorbed from ContextVisualizerPanel)
+  // ---------------------------------------------------------------------------
+
+  private _attachBus(turnEvents: UiEventFeed<TurnEvent>): void {
+    if (this.unsubs.length > 0) return;
+    this.unsubs.push(turnEvents.on('TURN_COMPLETED', () => this.recordTurn()));
+    this.unsubs.push(turnEvents.on('TURN_SUBMITTED', () => this._refreshAndRender()));
+  }
+
+  private _detachBus(): void {
+    for (const unsub of this.unsubs) unsub();
+    this.unsubs = [];
+  }
+
   // ---------------------------------------------------------------------------
   // Lifecycle
   // ---------------------------------------------------------------------------
@@ -167,6 +224,7 @@ export class TokenBudgetPanel extends BasePanel {
 
   override onDeactivate(): void {
     super.onDeactivate();
+    this.confirm = null;
     // Stop the off-screen poll so a backgrounded Tokens tab does not keep
     // refreshing (and, once requestRender is wired, force a repaint) every 2 s.
     if (this.refreshTimer !== null) {
@@ -180,6 +238,78 @@ export class TokenBudgetPanel extends BasePanel {
       clearInterval(this.refreshTimer);
       this.refreshTimer = null;
     }
+    this._detachBus();
+  }
+
+  // ---------------------------------------------------------------------------
+  // Input
+  // ---------------------------------------------------------------------------
+
+  private _pressureRatio(): number {
+    return this.contextWindow > 0 ? this.lastInputTokens / this.contextWindow : 0;
+  }
+
+  private _pressureElevated(): boolean {
+    return this.contextWindow > 0 && this._pressureRatio() >= WARN_YELLOW;
+  }
+
+  private _scrollTurns(delta: number): void {
+    const current = this.turnScrollIndex === -1 ? this.turnHistory.length : this.turnScrollIndex;
+    const next = current + delta;
+    this.turnScrollIndex = Math.max(0, Math.min(this.turnHistory.length, next));
+    this.markDirty();
+  }
+
+  handleInput(key: string): boolean {
+    // Confirmation dialog — use the shared handleConfirmInput for y/n/Esc UX
+    const confirmResult = handleConfirmInput(this.confirm, key);
+    if (confirmResult === 'confirmed') {
+      this.confirm = null;
+      this.compactConfirmedPending = true;
+      this.markDirty();
+      return true;
+    }
+    if (confirmResult === 'cancelled') {
+      this.confirm = null;
+      this.markDirty();
+      return true;
+    }
+    if (confirmResult === 'absorbed') return true;
+
+    if (key === 'C' && this._pressureElevated()) {
+      this.confirm = { subject: 'compact', label: 'Compact context now', verb: 'Compact' };
+      this.markDirty();
+      return true;
+    }
+
+    if (this.turnHistory.length > 0) {
+      switch (key) {
+        case 'up':       this._scrollTurns(-1); return true;
+        case 'down':     this._scrollTurns(1); return true;
+        case 'pageup':   this._scrollTurns(-PAGE_SCROLL_ROWS); return true;
+        case 'pagedown': this._scrollTurns(PAGE_SCROLL_ROWS); return true;
+      }
+    }
+
+    if (key === 'r') {
+      this._refreshAndRender();
+      return true;
+    }
+
+    return false;
+  }
+
+  /**
+   * Executes the compact-now action once the confirm dialog resolves. This
+   * lives in the integration hook (rather than inline in handleInput)
+   * because only this hook carries the `ctx.executeCommand` bridge into the
+   * real `/compact` command.
+   */
+  handlePanelIntegrationAction(_key: string, ctx: PanelIntegrationContext): boolean {
+    if (!this.compactConfirmedPending) return false;
+    this.compactConfirmedPending = false;
+    void ctx.executeCommand?.('compact', []);
+    return true;
   }
 
   // ---------------------------------------------------------------------------
@@ -216,6 +346,17 @@ export class TokenBudgetPanel extends BasePanel {
 
   override render(width: number, height: number): Line[] {
     return this.trackedRender(() => {
+    if (this.confirm) {
+      return buildPanelWorkspace(width, height, {
+        title: ' Token Budget',
+        sections: [{
+          title: 'Confirmation',
+          lines: renderConfirmLines(width, this.confirm),
+        }],
+        palette: DEFAULT_PANEL_PALETTE,
+      });
+    }
+
     const sections: PanelWorkspaceSection[] = [];
 
     if (this.contextWindow > 0) {
@@ -233,16 +374,33 @@ export class TokenBudgetPanel extends BasePanel {
       ],
     });
 
+    const elevated = this._pressureElevated();
+    const footerHints = elevated
+      ? [
+          { keys: 'C', label: 'compact now' },
+          { keys: 'up/down', label: 'scroll turns' },
+          { keys: 'r', label: 'refresh' },
+        ]
+      : [
+          { keys: 'up/down', label: 'scroll turns' },
+          { keys: 'r', label: 'refresh' },
+          { keys: '/compact', label: 'compress context' },
+        ];
+
     if (this.turnHistory.length > 0) {
       const priorSections = [...sections];
+      const scrollIndex = this.turnScrollIndex === -1 ? this.turnHistory.length : this.turnScrollIndex;
       const turnsSection = resolveScrollablePanelSection(width, height, {
         intro: 'Live context pressure, session token composition, cache usage, and recent turn deltas.',
+        footerLines: [
+          buildKeyboardHints(width, footerHints, DEFAULT_PANEL_PALETTE),
+        ],
         palette: DEFAULT_PANEL_PALETTE,
         beforeSections: priorSections,
         section: {
           title: 'Recent Turns',
           scrollableLines: this.renderTurnHistory(width, this.turnHistory.length + 1),
-          scrollOffset: Math.max(0, this.turnHistory.length),
+          scrollOffset: scrollIndex,
           minRows: 6,
         },
         afterSections: [{
@@ -273,6 +431,9 @@ export class TokenBudgetPanel extends BasePanel {
       title: ' Token Budget',
       intro: 'Live context pressure, session token composition, cache usage, and recent turn deltas.',
       sections,
+      footerLines: [
+        buildKeyboardHints(width, footerHints, DEFAULT_PANEL_PALETTE),
+      ],
       palette: DEFAULT_PANEL_PALETTE,
     });
     });
@@ -298,7 +459,17 @@ export class TokenBudgetPanel extends BasePanel {
     }
 
     if (status.guidanceMode !== 'off' && status.nextSteps.length > 0) {
-      lines.push(buildGuidanceLine(width, status.nextSteps[0]!, 'open the next maintenance action directly', DEFAULT_PANEL_PALETTE));
+      const nextStep = status.nextSteps[0]!;
+      // WO-160: when the recommended next step is /compact and C is armed
+      // (see handleInput's elevated-only C branch and the footer hint),
+      // advertise the key instead of the command — pressing C already
+      // dispatches it for real, so printing '/compact' here was a redundant
+      // action substitute.
+      if (nextStep === '/compact' && this._pressureElevated()) {
+        lines.push(buildGuidanceLine(width, 'C', 'compact context now — the recommended next maintenance action', DEFAULT_PANEL_PALETTE));
+      } else {
+        lines.push(buildGuidanceLine(width, nextStep, 'open the next maintenance action directly', DEFAULT_PANEL_PALETTE));
+      }
     }
 
     return lines;
@@ -373,7 +544,7 @@ export class TokenBudgetPanel extends BasePanel {
     return lines;
   }
 
-  /** Renders a full-width progress bar for context window fill. */
+  /** Renders a full-width progress bar for context window fill, plus a pressure pill (absorbed from ContextVisualizerPanel). */
   private renderContextBar(width: number): Line[] {
     const lines: Line[] = [];
     const pct = this.contextWindow > 0
@@ -398,16 +569,26 @@ export class TokenBudgetPanel extends BasePanel {
     const suffix = ` ${fmtTok(this.lastInputTokens)}/${fmtTok(this.contextWindow)} (${pctInt}%)${warnSuffix}`;
     const BAR_W = Math.max(8, width - label.length - suffix.length - 2);
     const filled = Math.round(pct * BAR_W);
+    // Context fill is the headline metric — render it with the shared meter
+    // primitive so the bar glyphs and width handling match every other panel.
+    lines.push(buildMeterLine(width, filled, BAR_W,
+      { filled: barColor, empty: C.barBg, label: C.label },
+      { prefix: label, suffix },
+    ));
+
+    // Pressure pill — absorbed from ContextVisualizerPanel's headline indicator.
+    const overLimit = this.contextWindow > 0 && this.lastInputTokens > this.contextWindow;
+    const pressureState = overLimit || pct >= WARN_RED ? 'bad' : pct >= WARN_YELLOW ? 'warn' : 'good';
+    const pressureLabel = overLimit ? 'over limit' : pct >= WARN_RED ? 'critical' : pct >= WARN_YELLOW ? 'elevated' : 'healthy';
     lines.push(buildStyledPanelLine(width, [
-      { text: label, fg: C.label },
-      { text: '#'.repeat(filled), fg: barColor, dim: pct < WARN_YELLOW },
-      { text: '.'.repeat(Math.max(0, BAR_W - filled)), fg: C.barBg, dim: pct < WARN_YELLOW },
-      { text: suffix, fg: barColor, dim: pct < WARN_YELLOW },
+      { text: ' ', fg: C.dim },
+      ...buildStatusPill(pressureState, pressureLabel),
     ]));
+
     return lines;
   }
 
-  /** Session cumulative totals with color-coded labels. */
+  /** Session cumulative totals with color-coded labels, plus an inline cost estimate. */
   private renderTotals(width: number): Line[] {
     const lines: Line[] = [];
     lines.push(this.paintTextLine(' Session Totals:', width, C.label));
@@ -431,46 +612,52 @@ export class TokenBudgetPanel extends BasePanel {
       ]));
     }
 
+    // Inline cost estimate — absorbed pricing wiring (cost-utils.ts), shown
+    // whenever the active model id is known.
+    if (this.getCurrentModelId) {
+      const cost = calcSessionCost(u.input, u.output, u.cacheRead, u.cacheWrite, this.getCurrentModelId());
+      lines.push(buildStyledPanelLine(width, [
+        { text: '  Cost:       ', fg: C.label },
+        { text: `$${cost.toFixed(4)}`, fg: C.value, bold: true },
+      ]));
+    }
+
     return lines;
   }
 
   /** Last N turns table: turn#, in, out, CR, CW, total. */
   private renderTurnHistory(width: number, maxRows: number): Line[] {
-    const lines: Line[] = [];
-
-    // Column headers
-    const colLine = createEmptyLine(width);
-    const headers = ['  #', '    Input', '   Output', '  CR', '  CW', '   Total'];
-    const cols = [3, 9, 9, 6, 6, 9];
-    let hx = 0;
-    for (let i = 0; i < headers.length; i++) {
-      const h = headers[i]!;
-      for (const ch of h.slice(0, cols[i]!)) {
-        if (hx >= width) break;
-        colLine[hx++] = createStyledCell(ch, { fg: C.turnHeader, dim: true });
-      }
-    }
-    lines.push(colLine);
-
     const available = Math.max(0, maxRows - 1); // minus col header
     const toShow = this.turnHistory.slice(-Math.max(0, available));
 
-    toShow.forEach((t, i) => {
-      if (lines.length >= maxRows) return;
-      const turnNum = this.turnHistory.length - toShow.length + i + 1;
-      const total = t.input + t.output + t.cacheRead + t.cacheWrite;
-      const cells: Array<[string, string]> = [
-        [String(turnNum).padStart(3), C.dim],
-        [fmtTok(t.input).padStart(9),      C.input],
-        [fmtTok(t.output).padStart(9),     C.output],
-        [fmtTok(t.cacheRead).padStart(6),  C.cacheRead],
-        [fmtTok(t.cacheWrite).padStart(6), C.cacheWrite],
-        [fmtTok(total).padStart(9),        C.value],
-      ];
-      lines.push(buildStyledPanelLine(width, cells.map(([val, color]) => ({ text: val, fg: color }))));
-    });
-
-    return lines;
+    // Width-aware aligned table via the shared primitive (replaces manual
+    // per-cell column math, which miscounts on wide glyphs).
+    return buildTable(
+      width,
+      [
+        { label: '#', width: 4, align: 'right' },
+        { label: 'Input', width: 9, align: 'right' },
+        { label: 'Output', width: 9, align: 'right' },
+        { label: 'CR', width: 7, align: 'right' },
+        { label: 'CW', width: 7, align: 'right' },
+        { label: 'Total', align: 'right' },
+      ],
+      toShow.map((t, i) => {
+        const turnNum = this.turnHistory.length - toShow.length + i + 1;
+        const total = t.input + t.output + t.cacheRead + t.cacheWrite;
+        return {
+          cells: [
+            { text: String(turnNum), fg: C.dim },
+            { text: fmtTok(t.input), fg: C.input },
+            { text: fmtTok(t.output), fg: C.output },
+            { text: fmtTok(t.cacheRead), fg: C.cacheRead },
+            { text: fmtTok(t.cacheWrite), fg: C.cacheWrite },
+            { text: fmtTok(total), fg: C.value },
+          ],
+        };
+      }),
+      { ...DEFAULT_PANEL_PALETTE, label: C.turnHeader },
+    );
   }
 
   /** Paint a plain text string into a new Line. */