@pellux/goodvibes-tui 0.27.0 → 0.28.0

package/src/panels/communication-panel.ts

@@ -4,13 +4,17 @@ import type { UiCommunicationSnapshot, UiReadModel } from '../runtime/ui-read-mo
 import { truncateDisplay } from '../utils/terminal-width.ts';
 import {
   buildBodyText,
+  buildDetailBlock,
   buildEmptyState,
   buildGuidanceLine,
   buildKeyValueLine,
+  buildKeyboardHints,
   buildPanelLine,
   buildPanelWorkspace,
+  buildStatusBadge,
   DEFAULT_PANEL_PALETTE,
   type PanelPalette,
+  type StatusBadgeKind,
 } from './polish.ts';
 import { createEmptyLine } from '../types/grid.ts';
 
@@ -26,13 +30,28 @@ const C = {
 
 type CommunicationRecord = UiCommunicationSnapshot['records'][number];
 
+function statusBadgeKind(status: CommunicationRecord['status']): StatusBadgeKind {
+  return status === 'blocked' ? 'blocked' : status === 'delivered' ? 'completed' : 'running';
+}
+
+function fmtAgo(ts: number): string {
+  const sec = Math.max(0, Math.floor((Date.now() - ts) / 1000));
+  if (sec < 60) return `${sec}s`;
+  if (sec < 3600) return `${Math.floor(sec / 60)}m`;
+  return `${Math.floor(sec / 3600)}h`;
+}
+
 export class CommunicationPanel extends ScrollableListPanel<CommunicationRecord> {
   private readonly readModel?: UiReadModel<UiCommunicationSnapshot>;
   private readonly unsub: (() => void) | null;
+  /** When true, the list is narrowed to blocked messages only (b toggles). */
+  private blockedOnly = false;
 
   public constructor(readModel?: UiReadModel<UiCommunicationSnapshot>) {
     super('communication', 'Communication', 'Y', 'monitoring');
     this.showSelectionGutter = true; // I5: non-color selection affordance
+    this.filterEnabled = true;
+    this.filterLabel = 'Filter messages';
     this.readModel = readModel;
     this.unsub = readModel ? readModel.subscribe(() => this.markDirty()) : null;
   }
@@ -47,18 +66,47 @@ export class CommunicationPanel extends ScrollableListPanel<CommunicationRecord>
 
   protected getItems(): readonly CommunicationRecord[] {
     if (!this.readModel) return [];
-    return this.readModel.getSnapshot().records;
+    const records = this.readModel.getSnapshot().records;
+    return this.blockedOnly ? records.filter((r) => r.status === 'blocked') : records;
   }
 
-  protected renderItem(record: CommunicationRecord, index: number, selected: boolean, width: number): Line {
+  protected override filterMatches(record: CommunicationRecord, q: string): boolean {
+    return (record.content ?? '').toLowerCase().includes(q)
+      || record.kind.toLowerCase().includes(q)
+      || String(record.fromId ?? '').toLowerCase().includes(q)
+      || String(record.toId ?? '').toLowerCase().includes(q);
+  }
+
+  public override handleInput(key: string): boolean {
+    // `b` toggles the blocked-lanes-only view — guarded so it only acts when not
+    // typing into the filter input.
+    if (key === 'b' && !this.filterActive) {
+      this.blockedOnly = !this.blockedOnly;
+      this.selectedIndex = 0;
+      this.markDirty();
+      return true;
+    }
+    return super.handleInput(key);
+  }
+
+  protected renderItem(record: CommunicationRecord, _index: number, selected: boolean, width: number): Line {
     const bg = selected ? C.selectBg : undefined;
-    const color = record.status === 'blocked' ? C.error : record.status === 'delivered' ? C.ok : C.info;
+    const badge = buildStatusBadge(statusBadgeKind(record.status), record.status)[0]!;
+    const route = truncateDisplay(`${record.fromId} → ${record.toId}`, 26);
+    const contentWidth = Math.max(0, width - 50);
+    // Blocked messages have no delivered content; surface the policy reason
+    // inline so the most important detail (why a lane is blocked) is visible
+    // without selecting the row.
+    const tail = record.status === 'blocked' && record.reason
+      ? { text: record.reason, fg: C.warn }
+      : { text: record.content, fg: C.dim };
     return buildPanelLine(width, [
       [' ', C.label, bg],
-      [record.status.padEnd(10), color, bg],
-      [` ${record.kind.padEnd(10)}`, C.info, bg],
-      [` ${truncateDisplay(`${record.fromId} -> ${record.toId}`, 28).padEnd(28)}`, C.value, bg],
-      [` ${truncateDisplay(record.content, Math.max(0, width - 53))}`, C.dim, bg],
+      [`${fmtAgo(record.timestamp)} `.padStart(5), C.dim, bg],
+      [` ${badge.text} `.padEnd(12), badge.fg, bg],
+      [`${record.kind} `.padEnd(9), C.info, bg],
+      [`${route} `.padEnd(27), C.value, bg],
+      [truncateDisplay(tail.text, contentWidth), tail.fg, bg],
     ]);
   }
 
@@ -68,7 +116,7 @@ export class CommunicationPanel extends ScrollableListPanel<CommunicationRecord>
 
   protected override getEmptyStateActions(): Array<{ command: string; summary: string }> {
     return [
-      { command: '/orchestration', summary: 'review graphs and recursive agent activity' },
+      { command: '/orchestration', summary: 'review graphs and recursive agent activity that emit messages' },
       { command: '/communication', summary: 'reopen this workspace once the runtime emits message traffic' },
     ];
   }
@@ -98,56 +146,73 @@ export class CommunicationPanel extends ScrollableListPanel<CommunicationRecord>
     const snapshot = this.readModel.getSnapshot();
     const records = this.getItems();
 
-    const postureLines: Line[] = [
-      buildPanelLine(width, [['  Communication posture', C.label]]),
-      buildKeyValueLine(width, [
-        { label: 'sent', value: String(snapshot.totalSent), valueColor: snapshot.totalSent > 0 ? C.info : C.dim },
-        { label: 'delivered', value: String(snapshot.totalDelivered), valueColor: snapshot.totalDelivered > 0 ? C.ok : C.dim },
-        { label: 'blocked', value: String(snapshot.totalBlocked), valueColor: snapshot.totalBlocked > 0 ? C.error : C.dim },
-      ], C),
-      buildGuidanceLine(width, '/orchestration', 'inspect recursive routing, message handoff, and blocked broadcast posture', C),
+    // Posture: blocked lanes / message flow surfaced first per the panel's purpose.
+    const postureLines = (): Line[] => [
+      buildPanelLine(width, [
+        ['  ', C.label],
+        ...buildStatusBadge('blocked', 'blocked', { count: snapshot.totalBlocked }),
+        ['    ', C.dim],
+        ...buildStatusBadge('completed', 'delivered', { count: snapshot.totalDelivered }),
+        ['    ', C.dim],
+        ...buildStatusBadge('running', 'sent', { count: snapshot.totalSent }),
+        ...(this.blockedOnly ? ([['   (blocked-only view)', C.warn]] as Array<[string, string]>) : []),
+      ]),
+      snapshot.totalBlocked > 0
+        ? buildPanelLine(width, [[`  ${snapshot.totalBlocked} message${snapshot.totalBlocked !== 1 ? 's' : ''} blocked by routing policy — press b to isolate blocked lanes.`, C.warn]])
+        : buildGuidanceLine(width, '/orchestration', 'inspect recursive routing, message handoff, and broadcast posture', C),
     ];
 
     if (records.length === 0) {
       return this.renderList(width, height, {
         title: 'Communication Control Room',
-        header: postureLines,
+        header: postureLines(),
+        footer: [buildKeyboardHints(width, this.footerHints(false), C)],
       });
     }
 
     this.clampSelection();
-    const selected = records[this.selectedIndex];
-
-    // Update posture with selected info
-    const postureWithSelected: Line[] = [
-      buildPanelLine(width, [['  Communication posture', C.label]]),
-      buildKeyValueLine(width, [
-        { label: 'sent', value: String(snapshot.totalSent), valueColor: snapshot.totalSent > 0 ? C.info : C.dim },
-        { label: 'delivered', value: String(snapshot.totalDelivered), valueColor: snapshot.totalDelivered > 0 ? C.ok : C.dim },
-        { label: 'blocked', value: String(snapshot.totalBlocked), valueColor: snapshot.totalBlocked > 0 ? C.error : C.dim },
-        { label: 'selected', value: `${selected?.fromId ?? 'n/a'} -> ${selected?.toId ?? 'n/a'}`, valueColor: C.value },
-      ], C),
-      buildGuidanceLine(width, '/orchestration', 'inspect recursive routing, message handoff, and blocked broadcast posture', C),
-    ];
+    const visible = this.getVisibleItems();
+    const selected = visible[this.selectedIndex];
 
-    const footerLines: Line[] = [];
+    const detailLines: Line[] = [];
     if (selected) {
-      footerLines.push(
-        buildPanelLine(width, [['  Route: ', C.label], [`${selected.scope} / ${selected.kind}`, C.value], ['  Status: ', C.label], [selected.status, selected.status === 'blocked' ? C.error : C.ok]]),
-        buildPanelLine(width, [['  From: ', C.label], [selected.fromId, C.value], ['  To: ', C.label], [selected.toId, C.value]]),
-        buildPanelLine(width, [['  Roles: ', C.label], [`${selected.fromRole ?? 'unknown'} -> ${selected.toRole ?? 'unknown'}`, C.dim]]),
-      );
-      if (selected.reason) {
-        footerLines.push(buildPanelLine(width, [['  Reason: ', C.label], [truncateDisplay(selected.reason, Math.max(0, width - 11)), C.warn]]));
-      }
-      footerLines.push(...buildBodyText(width, ` Content: ${selected.content}`, C));
+      detailLines.push(...buildDetailBlock(width, `Message · ${selected.kind}`, [
+        buildKeyValueLine(width, [
+          { label: 'status', value: selected.status, valueColor: selected.status === 'blocked' ? C.error : C.ok },
+          { label: 'scope', value: selected.scope, valueColor: C.value },
+          { label: 'when', value: `${fmtAgo(selected.timestamp)} ago`, valueColor: C.dim },
+        ], C),
+        buildKeyValueLine(width, [
+          { label: 'from', value: `${selected.fromId} (${selected.fromRole ?? 'unknown'})`, valueColor: C.value },
+          { label: 'to', value: `${selected.toId} (${selected.toRole ?? 'unknown'})`, valueColor: C.value },
+        ], C),
+        ...(selected.reason
+          ? buildBodyText(width, `blocked: ${selected.reason}`, C, C.warn)
+          : []),
+        ...buildBodyText(width, selected.content, C, C.value),
+      ], C));
     }
-    footerLines.push(buildPanelLine(width, [['  Up/Down move through messages', C.dim]]));
 
     return this.renderList(width, height, {
       title: 'Communication Control Room',
-      header: postureWithSelected,
-      footer: footerLines,
+      header: postureLines(),
+      footer: [...detailLines, buildKeyboardHints(width, this.footerHints(true), C)],
     });
   }
+
+  // Context-aware hints: filter keys reflect filter state, `b` reflects the
+  // blocked-only toggle, and the inspect hint only appears when rows exist.
+  private footerHints(hasRows: boolean): Array<{ keys: string; label: string }> {
+    const hints: Array<{ keys: string; label: string }> = [];
+    if (hasRows) hints.push({ keys: '↑/↓', label: 'select' });
+    hints.push({ keys: 'b', label: this.blockedOnly ? 'show all lanes' : 'blocked only' });
+    if (this.filterActive) {
+      hints.push({ keys: 'Esc', label: 'clear filter' });
+    } else if (this.filterQuery) {
+      hints.push({ keys: '/', label: 'edit filter' }, { keys: 'Esc', label: 'clear filter' });
+    } else {
+      hints.push({ keys: '/', label: 'filter' });
+    }
+    return hints;
+  }
 }

package/src/panels/context-visualizer-panel.ts

@@ -13,8 +13,10 @@ import type { SessionMemoryQuery } from '../runtime/ui-service-queries.ts';
 import {
   buildEmptyState,
   buildGuidanceLine,
+  buildKeyboardHints,
   buildMeterLine,
   buildPanelLine,
+  buildStatusPill,
   buildStyledPanelLine,
   buildPanelWorkspace,
   DEFAULT_PANEL_PALETTE,
@@ -90,7 +92,10 @@ export class ContextVisualizerPanel extends BasePanel {
               width,
               ' Context limit unavailable',
               'Select a model with a known context window and submit or complete a turn to populate live context usage.',
-              [],
+              [
+                { command: '/model', summary: 'pick an active model so its context window is known' },
+                { command: '/context', summary: 'review current context composition and pressure' },
+              ],
               DEFAULT_PANEL_PALETTE,
             ),
           },
@@ -99,6 +104,11 @@ export class ContextVisualizerPanel extends BasePanel {
       });
     }
 
+    // Pressure state drives the headline pill and the footer hint so the most
+    // important signal — am I about to overflow context — is obvious at a glance.
+    const pressureState = overLimit ? 'bad' : pct >= 90 ? 'bad' : pct >= 75 ? 'warn' : 'good';
+    const pressureLabel = overLimit ? 'over limit' : pct >= 90 ? 'critical' : pct >= 75 ? 'elevated' : 'healthy';
+
     return buildPanelWorkspace(width, height, {
       title: ' Context Usage',
       intro: 'Visualize current input-token pressure against the active model context window.',
@@ -113,6 +123,8 @@ export class ContextVisualizerPanel extends BasePanel {
               [formatK(limit), DEFAULT_PANEL_PALETTE.info],
               ['   Fill ', DEFAULT_PANEL_PALETTE.label],
               [`${pct}%`, overLimit ? DEFAULT_PANEL_PALETTE.bad : DEFAULT_PANEL_PALETTE.good],
+              ['   ', DEFAULT_PANEL_PALETTE.dim],
+              ...buildStatusPill(pressureState, pressureLabel),
             ]),
           ],
         },
@@ -129,6 +141,18 @@ export class ContextVisualizerPanel extends BasePanel {
           lines: this._renderMaintenance(width),
         },
       ],
+      footerLines: [
+        buildKeyboardHints(width, pressureState === 'good'
+          ? [
+              { keys: '/context', label: 'composition' },
+              { keys: '/model', label: 'switch model' },
+            ]
+          : [
+              { keys: '/compact', label: 'reduce context now' },
+              { keys: '/context', label: 'composition' },
+              { keys: '/model', label: 'larger window' },
+            ], DEFAULT_PANEL_PALETTE),
+      ],
       palette: DEFAULT_PANEL_PALETTE,
     });
     });

package/src/panels/control-plane-panel.ts

@@ -7,8 +7,10 @@ import {
   buildEmptyState,
   buildGuidanceLine,
   buildKeyValueLine,
+  buildKeyboardHints,
   buildPanelLine,
   buildPanelWorkspace,
+  buildSectionHeader,
   DEFAULT_PANEL_PALETTE,
   type PanelPalette,
 } from './polish.ts';
@@ -44,6 +46,8 @@ export class ControlPlanePanel extends ScrollableListPanel<ControlPlaneClient> {
   public constructor(private readonly readModel?: UiReadModel<UiControlPlaneSnapshot>) {
     super('control-plane', 'Control Plane', 'C', 'monitoring');
     this.showSelectionGutter = true; // I5: non-color selection affordance
+    this.filterEnabled = true;
+    this.filterLabel = 'Filter clients';
     this.unsub = readModel ? readModel.subscribe(() => this.markDirty()) : null;
   }
 
@@ -55,6 +59,12 @@ export class ControlPlanePanel extends ScrollableListPanel<ControlPlaneClient> {
     return C;
   }
 
+  protected override filterMatches(client: ControlPlaneClient, q: string): boolean {
+    return client.kind.toLowerCase().includes(q)
+      || client.label.toLowerCase().includes(q)
+      || client.transport.toLowerCase().includes(q);
+  }
+
   protected getItems(): readonly ControlPlaneClient[] {
     if (!this.readModel) return [];
     return this.readModel.getSnapshot().clients;
@@ -170,6 +180,8 @@ export class ControlPlanePanel extends ScrollableListPanel<ControlPlaneClient> {
     }
 
     if (approvals.length > 0) {
+      const pending = approvals.filter((entry) => entry.status === 'pending').length;
+      footerLines.push(buildSectionHeader(width, `Approvals (${pending} pending / ${approvals.length})`, C));
       footerLines.push(
         ...approvals.slice(0, 6).map((approval) => buildPanelLine(width, [
           [' ', C.label],
@@ -181,6 +193,8 @@ export class ControlPlanePanel extends ScrollableListPanel<ControlPlaneClient> {
     }
 
     if (sessions.length > 0) {
+      const activeSessions = sessions.filter((session) => session.status === 'active').length;
+      footerLines.push(buildSectionHeader(width, `Sessions (${activeSessions} active / ${sessions.length})`, C));
       footerLines.push(
         ...sessions.slice(0, 6).map((session) => buildPanelLine(width, [
           [' ', C.label],
@@ -192,6 +206,7 @@ export class ControlPlanePanel extends ScrollableListPanel<ControlPlaneClient> {
     }
 
     if (recentEvents.length > 0) {
+      footerLines.push(buildSectionHeader(width, `Recent Events (${recentEvents.length})`, C));
       footerLines.push(
         ...recentEvents.slice(0, 6).map((event) => buildPanelLine(width, [
           [' ', C.label],
@@ -200,7 +215,18 @@ export class ControlPlanePanel extends ScrollableListPanel<ControlPlaneClient> {
         ])),
       );
     }
-    footerLines.push(buildPanelLine(width, [['  Up/Down move through connected clients', C.dim]]));
+    footerLines.push(
+      this.filterActive
+        ? buildKeyboardHints(width, [
+            { keys: 'type', label: 'filter clients' },
+            { keys: 'Enter', label: 'apply' },
+            { keys: 'Esc', label: 'clear' },
+          ], C)
+        : buildKeyboardHints(width, [
+            { keys: 'Up/Down', label: 'select client' },
+            { keys: '/', label: 'filter' },
+          ], C),
+    );
 
     return this.renderList(width, height, {
       title: 'Control Plane',

package/src/panels/cost-tracker-panel.ts

@@ -4,21 +4,26 @@
 
 import type { Line } from '../types/grid.ts';
 import { createStyledCell, createEmptyLine } from '../types/grid.ts';
+import { fitDisplay, truncateDisplay } from '../utils/terminal-width.ts';
 import { BasePanel } from './base-panel.ts';
 import type { AgentEvent, TurnEvent } from '@/runtime/index.ts';
 import type { UiEventFeed } from '../runtime/ui-events.ts';
 import type { AgentRecord } from '@pellux/goodvibes-sdk/platform/tools';
 import {
   buildEmptyState,
+  buildKeyboardHints,
+  buildMeterLine,
   buildPanelLine,
   buildStyledPanelLine,
+  buildTable,
   buildPanelWorkspace,
   resolveScrollablePanelSection,
   extendPalette,
   DEFAULT_PANEL_PALETTE,
   type PanelWorkspaceSection,
 } from './polish.ts';
-import { getPricing } from '../export/cost-utils.ts';
+import { calcSessionCost } from '../export/cost-utils.ts';
+import { abbreviateCount } from '../utils/format-number.ts';
 
 // Pricing lookups are provided by ../export/cost-utils.ts (single source of truth).
 
@@ -30,9 +35,7 @@ function formatCost(usd: number): string {
 }
 
 function formatTokens(n: number): string {
-  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;
-  if (n >= 1_000) return `${(n / 1_000).toFixed(1)}k`;
-  return String(n);
+  return abbreviateCount(n);
 }
 
 // ---------------------------------------------------------------------------
@@ -144,7 +147,7 @@ export class CostTrackerPanel extends BasePanel {
       agentEvents.on('AGENT_SPAWNING', (payload) => {
         this.agents.set(payload.agentId, {
           id: payload.agentId.slice(0, 8),
-          task: payload.task.length > 40 ? payload.task.slice(0, 37) + '...' : payload.task,
+          task: truncateDisplay(payload.task, 40),
           model: 'unknown',
           inputTokens: 0,
           outputTokens: 0,
@@ -166,8 +169,7 @@ export class CostTrackerPanel extends BasePanel {
             if (rec?.usage) {
               entry.inputTokens = rec.usage.inputTokens + (rec.usage.cacheReadTokens ?? 0) + (rec.usage.cacheWriteTokens ?? 0);
               entry.outputTokens = rec.usage.outputTokens;
-              const pricing = getPricing(rec.model ?? 'unknown');
-              entry.cost = (entry.inputTokens * pricing.input + entry.outputTokens * pricing.output) / 1_000_000;
+              entry.cost = calcSessionCost(rec.usage.inputTokens, rec.usage.outputTokens, rec.usage.cacheReadTokens ?? 0, rec.usage.cacheWriteTokens ?? 0, rec.model ?? 'unknown');
               if (rec.model && rec.model !== 'unknown') entry.model = rec.model;
             }
           }
@@ -199,9 +201,7 @@ export class CostTrackerPanel extends BasePanel {
     if (usage.model) this.sessionModel = usage.model;
 
     // Record cost delta for sparkline
-    const pricing = getPricing(this.sessionModel);
-    const billableInput = usage.input + usage.cacheRead + usage.cacheWrite;
-    const totalCost = (billableInput * pricing.input + usage.output * pricing.output) / 1_000_000;
+    const totalCost = calcSessionCost(usage.input, usage.output, usage.cacheRead, usage.cacheWrite, this.sessionModel);
     const delta = Math.max(0, totalCost - this.lastSessionCost);
     this.lastSessionCost = totalCost;
     this.costHistory.push(delta);
@@ -261,9 +261,8 @@ export class CostTrackerPanel extends BasePanel {
   render(width: number, height: number): Line[] {
     if (height <= 0 || width <= 0) return [];
 
-    const pricing = getPricing(this.sessionModel);
     const totalInputTokens = this.sessionUsage.input + this.sessionUsage.cacheRead + this.sessionUsage.cacheWrite;
-    const sessionCost = (totalInputTokens * pricing.input + this.sessionUsage.output * pricing.output) / 1_000_000;
+    const sessionCost = calcSessionCost(this.sessionUsage.input, this.sessionUsage.output, this.sessionUsage.cacheRead, this.sessionUsage.cacheWrite, this.sessionModel);
     const overBudget = this.budgetThreshold > 0 && sessionCost > this.budgetThreshold;
     const sparkline = buildSparkline(this.costHistory);
     const costStr = formatCost(sessionCost);
@@ -275,6 +274,20 @@ export class CostTrackerPanel extends BasePanel {
     const sessionLines: Line[] = [
       this.renderKeyValue(width, ' Total', `${costStr}${budgetStr}${alertStr}`, costFg),
     ];
+    // Budget meter — the single most important glance for this panel: how much
+    // of the configured budget the session has consumed. Only shown when a
+    // budget is set (otherwise the bar would be meaningless).
+    if (this.budgetThreshold > 0) {
+      const ratio = sessionCost / this.budgetThreshold;
+      const BAR_W = 24;
+      const filled = Math.max(0, Math.min(BAR_W, Math.round(ratio * BAR_W)));
+      const meterFg = overBudget ? C.bad : ratio >= 0.8 ? C.warn : C.good;
+      const pctStr = `${Math.round(ratio * 100)}%`;
+      sessionLines.push(buildMeterLine(width, filled, BAR_W,
+        { filled: meterFg, empty: C.separator, label: C.label },
+        { prefix: ' Budget [', suffix: `] ${pctStr}` },
+      ));
+    }
     if (sparkline.length > 0) sessionLines.push(this.renderLabeledLine(width, ' Trend', sparkline, C.good));
     sessionLines.push(this.renderKeyValue(width, ' Input',  formatTokens(this.sessionUsage.input),  C.label));
     sessionLines.push(this.renderKeyValue(width, ' Output', formatTokens(this.sessionUsage.output), C.label));
@@ -293,35 +306,63 @@ export class CostTrackerPanel extends BasePanel {
     ];
 
     const agentList = Array.from(this.agents.values());
+    const scrollableAgents = agentList.length > 5;
+    // Footer hints adapt to whether the agent list is long enough to scroll.
+    const hintRow = scrollableAgents
+      ? buildKeyboardHints(width, [
+          { keys: 'Up/Down', label: 'scroll agents' },
+          { keys: 'PgUp/PgDn', label: 'page' },
+        ], DEFAULT_PANEL_PALETTE)
+      : buildKeyboardHints(width, [
+          { keys: '/cost budget <usd>', label: 'set budget alert' },
+        ], DEFAULT_PANEL_PALETTE);
     if (agentList.length > 0) {
       const planCost = agentList.reduce((sum, a) => sum + a.cost, 0);
+      const running = agentList.filter((a) => a.status === 'running').length;
+      const failed = agentList.filter((a) => a.status === 'failed').length;
       const agentRows: Line[] = [
-        this.renderKeyValue(width, ' Plan total', formatCost(planCost + sessionCost), C.cost),
-        this.renderDivider(width),
+        buildStyledPanelLine(width, [
+          { text: ' Plan total ', fg: C.label },
+          { text: formatCost(planCost + sessionCost), fg: C.cost, bold: true },
+          { text: `  ${agentList.length} agent${agentList.length === 1 ? '' : 's'}`, fg: C.dim },
+          ...(running > 0 ? [{ text: `  ${running} running`, fg: C.running }] : []),
+          ...(failed > 0 ? [{ text: `  ${failed} failed`, fg: C.bad }] : []),
+        ]),
+        // Per-agent cost ledger as an aligned table — agent, model, tokens, cost
+        // line up in columns instead of wrapping across two ragged rows.
+        ...buildTable(
+          width,
+          [
+            { label: 'Agent', width: 14 },
+            { label: 'Model', width: 18 },
+            { label: 'In', width: 7, align: 'right' },
+            { label: 'Out', width: 7, align: 'right' },
+            { label: 'Cost', align: 'right' },
+          ],
+          agentList.map((agent) => {
+            const statusFg = agent.status === 'running' ? C.running
+              : agent.status === 'failed' ? C.bad
+              : C.good;
+            const statusIcon = agent.status === 'running' ? '…'
+              : agent.status === 'failed' ? '✕'
+              : '✓';
+            return {
+              cells: [
+                { text: `${statusIcon} ${agent.id}`, fg: statusFg },
+                { text: agent.model, fg: C.model },
+                { text: agent.inputTokens > 0 ? formatTokens(agent.inputTokens) : '-', fg: C.dim },
+                { text: agent.outputTokens > 0 ? formatTokens(agent.outputTokens) : '-', fg: C.dim },
+                { text: agent.cost > 0 ? formatCost(agent.cost) : '-', fg: agent.cost > 0 ? C.cost : C.dim },
+              ],
+            };
+          }),
+          DEFAULT_PANEL_PALETTE,
+        ),
       ];
-      for (const agent of agentList) {
-        const statusFg = agent.status === 'running' ? C.running
-          : agent.status === 'failed' ? C.bad
-          : C.good;
-        const statusIcon = agent.status === 'running' ? '…'
-          : agent.status === 'failed' ? '✕'
-          : '✓';
-
-        const agentLabel = `${statusIcon} ${agent.id}`;
-        const taskText = agent.task;
-        agentRows.push(this.renderAgent(width, agentLabel, taskText, statusFg));
-
-        if (agent.inputTokens > 0 || agent.outputTokens > 0) {
-          const tokenInfo = `  in:${formatTokens(agent.inputTokens)} out:${formatTokens(agent.outputTokens)} ${formatCost(agent.cost)}`;
-          agentRows.push(this.renderLabeledLine(width, '', tokenInfo, C.dim));
-        }
-      }
       const sessionSection: PanelWorkspaceSection = sections[0]!;
       const agentsSection = resolveScrollablePanelSection(width, height, {
         intro: 'Track per-session and per-agent token spend using model pricing and live usage snapshots.',
-        footerLines: [
-          buildPanelLine(width, [[' Up/Down', DEFAULT_PANEL_PALETTE.info], [' scroll agents', DEFAULT_PANEL_PALETTE.dim]]),
-        ],
+        footerLines: [hintRow],
         palette: DEFAULT_PANEL_PALETTE,
         beforeSections: [sessionSection],
         section: {
@@ -329,6 +370,7 @@ export class CostTrackerPanel extends BasePanel {
           scrollableLines: agentRows,
           scrollOffset: this.scrollOffset,
           minRows: 4,
+          appendWindowSummary: scrollableAgents ? { dimColor: DEFAULT_PANEL_PALETTE.dim } : undefined,
         },
       });
       this.scrollOffset = agentsSection.scrollOffset;
@@ -340,7 +382,9 @@ export class CostTrackerPanel extends BasePanel {
           width,
           ' No agents spawned this session',
           'Agent-level cost estimates appear here once delegated or background agents start running.',
-          [],
+          [
+            { command: '/cost budget <usd>', summary: 'set a session budget alert to track spend against a cap' },
+          ],
           DEFAULT_PANEL_PALETTE,
         ),
       });
@@ -350,9 +394,7 @@ export class CostTrackerPanel extends BasePanel {
       title: ' Cost Tracker',
       intro: 'Track per-session and per-agent token spend using model pricing and live usage snapshots.',
       sections,
-      footerLines: [
-        buildPanelLine(width, [[' Up/Down', DEFAULT_PANEL_PALETTE.info], [' scroll agents', DEFAULT_PANEL_PALETTE.dim]]),
-      ],
+      footerLines: [hintRow],
       palette: DEFAULT_PANEL_PALETTE,
     });
   }
@@ -364,7 +406,7 @@ export class CostTrackerPanel extends BasePanel {
   private renderKeyValue(width: number, label: string, value: string, valueFg: string): Line {
     const LABEL_W = 10;
     return buildStyledPanelLine(width, [
-      { text: label.padEnd(LABEL_W).slice(0, LABEL_W), fg: C.label, bg: C.bg },
+      { text: fitDisplay(label, LABEL_W), fg: C.label, bg: C.bg },
       { text: ': ', fg: C.dim, bg: C.bg },
       { text: value, fg: valueFg, bg: C.bg, bold: true },
     ]);
@@ -372,23 +414,9 @@ export class CostTrackerPanel extends BasePanel {
 
   private renderLabeledLine(width: number, label: string, value: string, valueFg: string): Line {
     return buildStyledPanelLine(width, [
-      ...(label.length > 0 ? [{ text: `${label.slice(0, 10).padEnd(10)} `, fg: C.label }] : []),
+      ...(label.length > 0 ? [{ text: `${fitDisplay(label, 10)} `, fg: C.label }] : []),
       { text: value, fg: valueFg },
     ]);
   }
 
-  private renderAgent(width: number, label: string, task: string, fg: string): Line {
-    const LABEL_W = 12;
-    const remaining = width - LABEL_W - 1;
-    const trimmed = task.length > remaining ? task.slice(0, remaining - 3) + '...' : task;
-    return buildStyledPanelLine(width, [
-      { text: `${label.padEnd(LABEL_W).slice(0, LABEL_W)} `, fg, bold: true },
-      { text: trimmed, fg: C.label },
-    ]);
-  }
-
-  private renderDivider(width: number): Line {
-    return buildStyledPanelLine(width, [{ text: '─'.repeat(width), fg: C.separator }]);
-  }
-
 }