@pellux/goodvibes-tui 0.27.0 → 0.28.0

package/src/panels/marketplace-panel.ts

@@ -1,13 +1,14 @@
 import type { Line } from '../types/grid.ts';
+import { fitDisplay, truncateDisplay } from '../utils/terminal-width.ts';
 import { ScrollableListPanel } from './scrollable-list-panel.ts';
 import {
   buildEmptyState,
   buildGuidanceLine,
   buildKeyValueLine,
+  buildKeyboardHints,
   buildPanelLine,
   buildPanelWorkspace,
   DEFAULT_PANEL_PALETTE,
-  type PanelWorkspaceSection,
 } from './polish.ts';
 import {
   type EcosystemCatalogPathOptions,
@@ -45,9 +46,17 @@ export class MarketplacePanel extends ScrollableListPanel<MarketplaceRow> {
     private readonly ecosystemPaths?: EcosystemCatalogPathOptions,
   ) {
     super('marketplace', 'Marketplace', 'M', 'monitoring');
+    this.filterEnabled = true;
+    this.filterLabel = 'Filter marketplace';
     this.unsub = readModel ? readModel.subscribe(() => this.markDirty()) : null;
   }
 
+  protected override filterMatches(row: MarketplaceRow, q: string): boolean {
+    return row.kind.toLowerCase().includes(q)
+      || row.entry.name.toLowerCase().includes(q)
+      || (row.entry.provenance ?? 'local').toLowerCase().includes(q);
+  }
+
   public override onDestroy(): void {
     this.unsub?.();
   }
@@ -71,8 +80,8 @@ export class MarketplacePanel extends ScrollableListPanel<MarketplaceRow> {
     return buildPanelLine(width, [
       ['  ', C.label, bg],
       [row.kind.padEnd(11), C.info, bg],
-      [row.entry.name.slice(0, 20).padEnd(20), C.value, bg],
-      [` ${provenance.slice(0, 16).padEnd(16)}`, provenance === 'local' ? C.dim : C.info, bg],
+      [fitDisplay(row.entry.name, 20), C.value, bg],
+      [` ${fitDisplay(provenance, 16)}`, provenance === 'local' ? C.dim : C.info, bg],
       [` ${(row.installed ? 'INSTALLED' : 'CURATED').padEnd(9)} `, statusColor(row.installed), bg],
       [` ${row.entry.version ?? 'n/a'}`, C.dim, bg],
     ]);
@@ -167,13 +176,13 @@ export class MarketplacePanel extends ScrollableListPanel<MarketplaceRow> {
     const recommendationLines = recommendations.length > 0
       ? recommendations.slice(0, 4).map((recommendation) => buildPanelLine(width, [
           ['  ', C.label],
-          [`${recommendation.kind} ${recommendation.entry.id}`.slice(0, 28).padEnd(28), C.info],
-          [` ${recommendation.title}`.slice(0, Math.max(0, width - 31)), C.dim],
+          [fitDisplay(`${recommendation.kind} ${recommendation.entry.id}`, 28), C.info],
+          [truncateDisplay(` ${recommendation.title}`, Math.max(0, width - 31)), C.dim],
         ]))
       : [buildPanelLine(width, [['  No contextual marketplace recommendations right now.', C.dim]])];
 
     const startupIssueLines = startupIssues.length > 0
-      ? startupIssues.slice(0, 4).map((issue) => buildPanelLine(width, [['  ', C.label], [issue.slice(0, Math.max(0, width - 2)), C.warn]]))
+      ? startupIssues.slice(0, 4).map((issue) => buildPanelLine(width, [['  ', C.label], [truncateDisplay(issue, Math.max(0, width - 2)), C.warn]]))
       : [buildPanelLine(width, [['  No startup or lifecycle issues are currently pushing marketplace repair recommendations.', C.dim]])];
 
     const selectedRow = this.rows[this.selectedIndex];
@@ -182,11 +191,11 @@ export class MarketplacePanel extends ScrollableListPanel<MarketplaceRow> {
       const review = reviewEcosystemCatalogEntry(selectedRow.entry, this.ecosystemPaths!);
       selectedLines.push(buildPanelLine(width, [
         ['  Provenance: ', C.label],
-        [(selectedRow.entry.provenance ?? '(none)').slice(0, Math.max(0, width - 15)), selectedRow.entry.provenance ? C.info : C.dim],
+        [truncateDisplay(selectedRow.entry.provenance ?? '(none)', Math.max(0, width - 15)), selectedRow.entry.provenance ? C.info : C.dim],
       ]));
       selectedLines.push(buildPanelLine(width, [
         ['  Source: ', C.label],
-        [selectedRow.entry.source.slice(0, Math.max(0, width - 11)), C.value],
+        [truncateDisplay(selectedRow.entry.source, Math.max(0, width - 11)), C.value],
       ]));
       selectedLines.push(buildKeyValueLine(width, [
         { label: 'Compatibility', value: review.compatibility.status, valueColor: review.compatibility.status === 'supported' ? C.good : C.warn },
@@ -196,9 +205,19 @@ export class MarketplacePanel extends ScrollableListPanel<MarketplaceRow> {
       selectedLines.push(buildGuidanceLine(width, '/marketplace review <id>', 'inspect full compatibility and receipt detail for the selected entry', C));
     }
 
-    const postureSection: PanelWorkspaceSection = { title: 'Marketplace posture', lines: postureLines };
-    const startupIssuesSection: PanelWorkspaceSection = { title: 'Startup Issues', lines: startupIssueLines };
-    const recommendationsSection: PanelWorkspaceSection = { title: 'Recommendations', lines: recommendationLines };
+    // Context-aware hints: filter mode vs. browse mode (install only makes sense
+    // when a curated, not-yet-installed entry is selected).
+    const hints = this.filterActive
+      ? [{ keys: 'type', label: 'filter' }, { keys: 'Enter', label: 'apply' }, { keys: 'Esc', label: 'clear' }]
+      : [
+          { keys: 'Up/Down', label: 'move' },
+          ...(selectedRow && !selectedRow.installed ? [{ keys: '/marketplace install', label: 'add' }] : []),
+          { keys: '/', label: 'filter' },
+        ];
+
+    const footer: Line[] = selectedLines.length > 0 && height >= 20
+      ? [...selectedLines, buildKeyboardHints(width, hints, C)]
+      : [buildKeyboardHints(width, hints, C)];
 
     return this.renderList(width, height, {
       title: 'Marketplace Control Room',
@@ -207,7 +226,7 @@ export class MarketplacePanel extends ScrollableListPanel<MarketplaceRow> {
         ...startupIssueLines,
         ...recommendationLines,
       ],
-      footer: selectedLines.length > 0 && height >= 20 ? selectedLines : [],
+      footer,
     });
   }
 }

package/src/panels/memory-panel.ts

@@ -14,6 +14,7 @@ import type { Line } from '../types/grid.ts';
 import type { MemoryRegistry } from '@pellux/goodvibes-sdk/platform/state';
 import type { MemoryClass, MemoryRecord, MemoryReviewState } from '@pellux/goodvibes-sdk/platform/state';
 import { ScrollableListPanel, SearchableListPanel } from './scrollable-list-panel.ts';
+import { truncateDisplay } from '../utils/terminal-width.ts';
 import { type ConfirmState, handleConfirmInput, renderConfirmLines } from './confirm-state.ts';
 import {
   buildBodyText,
@@ -176,7 +177,7 @@ export class MemoryPanel extends SearchableListPanel<MemoryRecord> {
         ['  ', C.label, bg],
         [record.reviewState.padEnd(13), reviewStateColor(record.reviewState), bg],
         [` ${formatConfidence(record.confidence)} `, C.value, bg],
-        [record.summary.slice(0, Math.max(0, width - 26)), C.value, bg],
+        [truncateDisplay(record.summary, Math.max(0, width - 26)), C.value, bg],
       ]);
     }
     // All-mode row: scope/class + id + time + summary (matches former MemoryPanel row)
@@ -188,7 +189,7 @@ export class MemoryPanel extends SearchableListPanel<MemoryRecord> {
       ['  ', C.label, bg],
       [fmtTime(record.createdAt), C.dim, bg],
       ['  ', C.label, bg],
-      [record.summary.slice(0, Math.max(0, width - 33)), C.value, bg],
+      [truncateDisplay(record.summary, Math.max(0, width - 33)), C.value, bg],
     ]);
   }
 
@@ -306,13 +307,13 @@ export class MemoryPanel extends SearchableListPanel<MemoryRecord> {
       }
       if (key === 's') {
         if (!selected) return false;
-        this.confirm = { subject: { id: selected.id, action: 'stale' }, label: selected.summary.slice(0, 40) };
+        this.confirm = { subject: { id: selected.id, action: 'stale' }, label: truncateDisplay(selected.summary, 40) };
         this.markDirty();
         return true;
       }
       if (key === 'c') {
         if (!selected) return false;
-        this.confirm = { subject: { id: selected.id, action: 'contradicted' }, label: selected.summary.slice(0, 40) };
+        this.confirm = { subject: { id: selected.id, action: 'contradicted' }, label: truncateDisplay(selected.summary, 40) };
         this.markDirty();
         return true;
       }

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

@@ -8,12 +8,15 @@
  * Open via Ctrl+O keybind or `/ops view` command.
  */
 import type { Line } from '../types/grid.ts';
+import { fitDisplay, truncateDisplay } from '../utils/terminal-width.ts';
 import type { OpsEvent } from '@/runtime/index.ts';
 import type { UiEventFeed } from '../runtime/ui-events.ts';
 import type { OpsAuditEntry } from '../runtime/diagnostics/panels/ops.ts';
 import { OpsPanel } from '../runtime/diagnostics/panels/ops.ts';
 import { ScrollableListPanel } from './scrollable-list-panel.ts';
 import {
+  buildKeyValueLine,
+  buildKeyboardHints,
   buildPanelLine,
   DEFAULT_PANEL_PALETTE,
   type PanelPalette,
@@ -77,6 +80,8 @@ export class OpsControlPanel extends ScrollableListPanel<OpsAuditEntry> {
   public constructor(eventFeed: UiEventFeed<OpsEvent>) {
     super('ops-control', 'Ops Control', 'Q', 'agent');
     this.showSelectionGutter = true; // I5: non-color selection affordance
+    this.filterEnabled = true;
+    this.filterLabel = 'Filter audit';
     this._opsPanel = new OpsPanel(eventFeed);
     this._unsub = this._opsPanel.subscribe(() => this.markDirty());
   }
@@ -103,16 +108,23 @@ export class OpsControlPanel extends ScrollableListPanel<OpsAuditEntry> {
     return [...this._opsPanel.getSnapshot()].reverse();
   }
 
+  protected override filterMatches(entry: OpsAuditEntry, q: string): boolean {
+    return entry.action.toLowerCase().includes(q)
+      || entry.targetKind.toLowerCase().includes(q)
+      || entry.targetId.toLowerCase().includes(q)
+      || entry.outcome.toLowerCase().includes(q);
+  }
+
   protected renderItem(entry: OpsAuditEntry, _index: number, _selected: boolean, width: number): Line {
     const seqStr   = String(entry.seq).padStart(4, ' ');
     const timeStr  = fmtTime(entry.ts);
-    const action   = entry.action.slice(0, 15).padEnd(15, ' ');
+    const action   = fitDisplay(entry.action, 15);
     const kindTag  = entry.targetKind === 'task' ? 'T:' : 'A:';
-    // Truncation is intentional: TUI column width limits target ID display to 14 chars
+    // Last 10 chars of the id keep the unique suffix; fitDisplay caps display width.
     const shortId  = entry.targetId.slice(-10);
-    const target   = (kindTag + shortId).slice(0, 14).padEnd(14, ' ');
+    const target   = fitDisplay(kindTag + shortId, 14);
     const outLabel = outcomeLabel(entry.outcome);
-    const noteRaw  = (entry.note ?? entry.errorMessage ?? '').slice(0, Math.max(0, width - 63));
+    const noteRaw  = truncateDisplay(entry.note ?? entry.errorMessage ?? '', Math.max(0, width - 63));
 
     const segs: Array<[string, string, string?]> = [
       [` ${seqStr} `, C.seq],
@@ -134,12 +146,62 @@ export class OpsControlPanel extends ScrollableListPanel<OpsAuditEntry> {
   }
 
   public render(width: number, height: number): Line[] {
+    const entries = this.getVisibleItems();
+    this.clampSelection();
+
+    // Outcome tallies surface posture at a glance (most important runtime info first).
+    let ok = 0;
+    let rejected = 0;
+    let errored = 0;
+    for (const e of entries) {
+      if (e.outcome === 'success') ok++;
+      else if (e.outcome === 'rejected') rejected++;
+      else errored++;
+    }
+
     const headerLines: Line[] = [
+      buildKeyValueLine(width, [
+        { label: 'logged', value: String(entries.length), valueColor: entries.length > 0 ? C.value : C.dim },
+        { label: 'ok', value: String(ok), valueColor: ok > 0 ? C.success : C.dim },
+        { label: 'rejected', value: String(rejected), valueColor: rejected > 0 ? C.rejected : C.dim },
+        { label: 'errors', value: String(errored), valueColor: errored > 0 ? C.error : C.dim },
+      ], C),
       buildPanelLine(width, [['  SEQ  TIME      ACTION          TARGET             OUT    NOTE', C.label]]),
     ];
-    const footerLines: Line[] = [
-      buildPanelLine(width, [['  Up/Down scroll the intervention log', C.dim]]),
-    ];
+
+    const selected = entries[this.selectedIndex];
+    const footerLines: Line[] = [];
+    if (selected) {
+      const detail = selected.note ?? selected.errorMessage ?? '(no note)';
+      footerLines.push(
+        buildPanelLine(width, [
+          ['  #', C.label],
+          [String(selected.seq), C.value],
+          ['  ', C.dim],
+          [outcomeLabel(selected.outcome).trim(), outcomeColor(selected.outcome)],
+          ['  ', C.dim],
+          [selected.action, C.value],
+          ['  ', C.dim],
+          [`${selected.targetKind}:${selected.targetId}`, targetColor(selected.targetKind)],
+        ]),
+        buildPanelLine(width, [
+          ['  ', C.label],
+          [truncateDisplay(detail, Math.max(0, width - 4)), C.note],
+        ]),
+      );
+    }
+    footerLines.push(
+      this.filterActive
+        ? buildKeyboardHints(width, [
+            { keys: 'type', label: 'filter audit' },
+            { keys: 'Enter', label: 'apply' },
+            { keys: 'Esc', label: 'clear' },
+          ], C)
+        : buildKeyboardHints(width, [
+            { keys: 'Up/Down', label: 'browse log' },
+            { keys: '/', label: 'filter' },
+          ], C),
+    );
 
     return this.renderList(width, height, {
       title: 'Operator Control Plane',

package/src/panels/ops-strategy-panel.ts

@@ -9,25 +9,37 @@
 
 import { BasePanel } from './base-panel.ts';
 import type { Line } from '../types/grid.ts';
+import { getDisplayWidth } from '../utils/terminal-width.ts';
 import type { PlannerDecision, ExecutionStrategy } from '@pellux/goodvibes-sdk/platform/core';
 import type { PlannerEvent } from '@/runtime/index.ts';
 import type { UiEventFeed } from '../runtime/ui-events.ts';
 import type { OpsStrategyQuery } from '../runtime/ui-service-queries.ts';
 import {
+  buildAlignedRow,
   buildEmptyState,
+  buildKeyboardHints,
   buildPanelLine,
   buildStyledPanelLine,
   buildPanelWorkspace,
+  extendPalette,
   resolveScrollablePanelSection,
   DEFAULT_PANEL_PALETTE,
 } from './polish.ts';
 
-const STRATEGY_FG: Record<ExecutionStrategy, string> = {
+const C = extendPalette(DEFAULT_PANEL_PALETTE, {
   auto:       '#00cccc',
   single:     '#00cc66',
   cohort:     '#cccc00',
   background: '#cc66cc',
   remote:     '#cccccc',
+});
+
+const STRATEGY_FG: Record<ExecutionStrategy, string> = {
+  auto:       C.auto,
+  single:     C.single,
+  cohort:     C.cohort,
+  background: C.background,
+  remote:     C.remote,
 };
 
 const STRATEGY_ICON: Record<ExecutionStrategy, string> = {
@@ -104,58 +116,63 @@ export class OpsStrategyPanel extends BasePanel {
     const latest   = this.adaptivePlanner.getLatest();
     const mode     = this.adaptivePlanner.getMode();
     const override = this.adaptivePlanner.getOverride();
+    const intro = 'Review adaptive execution planner decisions, overrides, and recent strategy history.';
+    const footerLines = [
+      buildKeyboardHints(width, [
+        { keys: 'Up/Down', label: 'scroll history' },
+        { keys: 'g/G', label: 'top/bottom' },
+      ], C),
+    ];
     const statusLines: Line[] = [
       buildPanelLine(width, [
-        [' Mode ', DEFAULT_PANEL_PALETTE.label],
-        [mode.toUpperCase(), DEFAULT_PANEL_PALETTE.value],
-        ['   Override ', DEFAULT_PANEL_PALETTE.label],
-        [override ? `${override.toUpperCase()} [ACTIVE]` : 'none', override ? DEFAULT_PANEL_PALETTE.warn : DEFAULT_PANEL_PALETTE.dim],
+        [' Mode ', C.label],
+        [mode.toUpperCase(), C.value],
+        ['   Override ', C.label],
+        [override ? `${override.toUpperCase()} [ACTIVE]` : 'none', override ? C.warn : C.dim],
+        ['   Decisions ', C.label],
+        [String(this.history.length), this.history.length > 0 ? C.info : C.dim],
       ]),
     ];
 
     if (latest) {
       statusLines.push(buildPanelLine(width, [
-        [' Last ', DEFAULT_PANEL_PALETTE.label],
+        [' Last ', C.label],
         [`${STRATEGY_ICON[latest.selected]} ${latest.selected.toUpperCase()}`, STRATEGY_FG[latest.selected]],
-        ['   Reason ', DEFAULT_PANEL_PALETTE.label],
-        [latest.reasonCode, DEFAULT_PANEL_PALETTE.dim],
+        ['   Reason ', C.label],
+        [latest.reasonCode, C.dim],
       ]));
     }
 
     if (this.history.length === 0) {
       return buildPanelWorkspace(width, height, {
         title: ' Ops Strategy',
-        intro: 'Review adaptive execution planner decisions, overrides, and recent strategy history.',
+        intro,
         sections: [
           { title: 'Status', lines: statusLines },
           {
             lines: buildEmptyState(
               width,
               ' No decisions recorded yet',
-              'Adaptive planner decisions appear here once the planner begins selecting strategies.',
-              [],
-              DEFAULT_PANEL_PALETTE,
+              'Adaptive planner decisions appear here once the planner begins selecting strategies. Run agents or use /ops to drive runtime activity.',
+              [{ command: '/ops', summary: 'open the operator control room to drive planner activity' }],
+              C,
             ),
           },
         ],
-        footerLines: [
-          buildPanelLine(width, [[' Up/Down', DEFAULT_PANEL_PALETTE.info], [' scroll history', DEFAULT_PANEL_PALETTE.dim], ['   g/G', DEFAULT_PANEL_PALETTE.info], [' top/bottom', DEFAULT_PANEL_PALETTE.dim]]),
-        ],
-        palette: DEFAULT_PANEL_PALETTE,
+        footerLines,
+        palette: C,
       });
     }
 
     const historyLines = this._renderHistory(width);
     const statusSection = { title: 'Status', lines: statusLines } as const;
     const historySection = resolveScrollablePanelSection(width, height, {
-      intro: 'Review adaptive execution planner decisions, overrides, and recent strategy history.',
-      footerLines: [
-        buildPanelLine(width, [[' Up/Down', DEFAULT_PANEL_PALETTE.info], [' scroll history', DEFAULT_PANEL_PALETTE.dim], ['   g/G', DEFAULT_PANEL_PALETTE.info], [' top/bottom', DEFAULT_PANEL_PALETTE.dim]]),
-      ],
-      palette: DEFAULT_PANEL_PALETTE,
+      intro,
+      footerLines,
+      palette: C,
       beforeSections: [statusSection],
       section: {
-        title: 'Decision History',
+        title: `Decision History (${this.history.length})`,
         scrollableLines: historyLines,
         scrollOffset: Math.min(this.scrollOffset, Math.max(0, historyLines.length - 1)),
         minRows: 8,
@@ -165,15 +182,13 @@ export class OpsStrategyPanel extends BasePanel {
 
     return buildPanelWorkspace(width, height, {
       title: ' Ops Strategy',
-      intro: 'Review adaptive execution planner decisions, overrides, and recent strategy history.',
+      intro,
       sections: [
         statusSection,
         historySection.section,
       ],
-      footerLines: [
-        buildPanelLine(width, [[' Up/Down', DEFAULT_PANEL_PALETTE.info], [' scroll history', DEFAULT_PANEL_PALETTE.dim], ['   g/G', DEFAULT_PANEL_PALETTE.info], [' top/bottom', DEFAULT_PANEL_PALETTE.dim]]),
-      ],
-      palette: DEFAULT_PANEL_PALETTE,
+      footerLines,
+      palette: C,
     });
   }
 
@@ -187,11 +202,10 @@ export class OpsStrategyPanel extends BasePanel {
 
   private _renderHistory(width: number): Line[] {
     if (this.history.length === 0) {
-      return [buildStyledPanelLine(width, [{ text: '  No history yet.', fg: DEFAULT_PANEL_PALETTE.dim, dim: true }])];
+      return [buildStyledPanelLine(width, [{ text: '  No history yet.', fg: C.dim, dim: true }])];
     }
 
     const lines: Line[] = [];
-    lines.push(buildStyledPanelLine(width, [{ text: ' Decision History', fg: DEFAULT_PANEL_PALETTE.value, bold: true }]));
 
     const reversed = [...this.history].reverse();
     for (let i = 0; i < reversed.length; i++) {
@@ -202,29 +216,33 @@ export class OpsStrategyPanel extends BasePanel {
       const num  = String(i + 1).padStart(3);
       const overrideMark = d.overrideActive ? ' [O]' : '';
 
-      // Row 1: index + icon + strategy + timestamp (right-aligned)
-      const leftBase  = ` ${num}. ${icon} ${d.selected.toUpperCase()}${overrideMark}`;
-      const rightText = `  ${ts}`;
-      const pad       = Math.max(1, width - leftBase.length - rightText.length);
-      lines.push(buildStyledPanelLine(width, [
-        { text: ` ${num}. `, fg: DEFAULT_PANEL_PALETTE.dim, dim: true },
-        { text: `${icon} ${d.selected.toUpperCase()}`, fg, bold: true },
-        { text: overrideMark, fg: DEFAULT_PANEL_PALETTE.warn },
-        { text: ' '.repeat(pad), fg: DEFAULT_PANEL_PALETTE.dim },
-        { text: rightText, fg: DEFAULT_PANEL_PALETTE.dim, dim: true },
-      ]));
+      // Row 1: index + icon + strategy on the left, timestamp right-aligned.
+      // buildAlignedRow keeps the timestamp flush-right even with wide glyphs.
+      const tsCol = getDisplayWidth(`${ts}  `);
+      lines.push(buildAlignedRow(
+        width,
+        [
+          { text: ` ${num}. ${icon} ${d.selected.toUpperCase()}${overrideMark}`, fg, bold: true },
+          { text: `${ts}  `, fg: C.dim, dim: true },
+        ],
+        [
+          { width: Math.max(0, width - tsCol - 1) },
+          { width: tsCol, align: 'right' },
+        ],
+        { gap: 1 },
+      ));
 
       // Row 2: reason code
-      lines.push(buildStyledPanelLine(width, [{ text: `       ${d.reasonCode}`, fg: DEFAULT_PANEL_PALETTE.dim, dim: true }]));
+      lines.push(buildStyledPanelLine(width, [{ text: `       ${d.reasonCode}`, fg: C.dim, dim: true }]));
 
       // Row 3+: top-2 scored candidates (auto mode only)
       if (!d.overrideActive && d.candidates.length > 1) {
         const top2 = d.candidates.slice(0, 2);
         for (const c of top2) {
           lines.push(buildStyledPanelLine(width, [
-            { text: '         ', fg: DEFAULT_PANEL_PALETTE.dim, dim: true },
+            { text: '         ', fg: C.dim, dim: true },
             { text: c.strategy.padEnd(12), fg: STRATEGY_FG[c.strategy] },
-            { text: ` score ${c.score}`, fg: DEFAULT_PANEL_PALETTE.dim, dim: true },
+            { text: ` score ${c.score}`, fg: C.dim, dim: true },
           ]));
         }
       }

package/src/panels/orchestration-panel.ts

@@ -8,12 +8,15 @@
 
 import type { Line } from '../types/grid.ts';
 import { createEmptyLine } from '../types/grid.ts';
+import { truncateDisplay } from '../utils/terminal-width.ts';
 import { ScrollableListPanel } from './scrollable-list-panel.ts';
 import type { UiOrchestrationSnapshot, UiReadModel } from '../runtime/ui-read-models.ts';
 import type { OrchestrationGraphRecord } from '@/runtime/index.ts';
+import { formatElapsed } from '../utils/format-elapsed.ts';
 import {
   buildEmptyState,
   buildGuidanceLine,
+  buildKeyboardHints,
   buildKeyValueLine,
   buildPanelLine,
   buildPanelWorkspace,
@@ -76,12 +79,17 @@ export class OrchestrationPanel extends ScrollableListPanel<OrchestrationGraphRe
     width: number,
   ): Line {
     const bg = selected ? C.selectBg : undefined;
+    const marker = selected ? '▸ ' : '  ';
+    const nodeCount = `${graph.nodeOrder.length}n`;
+    // Reserve room for marker(2) + status(10) + mode(17) + id(8) + nodes(~5) + gaps.
+    const titleBudget = Math.max(0, width - 47);
     return buildPanelLine(width, [
-      [' ', C.label, bg],
+      [marker, selected ? C.value : C.dim, bg],
       [graph.status.padEnd(10), statusColor(graph.status), bg],
       [` ${graph.mode.padEnd(17)}`, C.value, bg],
       [` ${graph.id.slice(0, 8)} `, C.dim, bg],
-      [graph.title.slice(0, Math.max(0, width - 39)), C.value, bg],
+      [`${nodeCount.padStart(4)} `, C.dim, bg],
+      [truncateDisplay(graph.title, titleBudget), C.value, bg],
     ]);
   }
 
@@ -165,14 +173,22 @@ export class OrchestrationPanel extends ScrollableListPanel<OrchestrationGraphRe
 
     this.clampSelection();
     const selected = graphs[this.selectedIndex]!;
+    const isActive = snapshot.activeGraphIds.includes(selected.id);
+    const elapsed = selected.startedAt
+      ? formatElapsed(Math.max(0, (selected.endedAt ?? Date.now()) - selected.startedAt))
+      : 'n/a';
     const detailLines: Line[] = [
       buildPanelLine(width, [
         ['  Title: ', C.label],
-        [selected.title, C.value],
+        [truncateDisplay(selected.title, Math.max(0, width - 11)), C.value],
+      ]),
+      buildPanelLine(width, [
         ['  Status: ', C.label],
         [selected.status, statusColor(selected.status)],
         ['  Mode: ', C.label],
         [selected.mode, C.value],
+        ['  Live: ', C.label],
+        [isActive ? 'yes' : 'no', isActive ? C.running : C.dim],
       ]),
       buildPanelLine(width, [
         ['  Nodes: ', C.label],
@@ -181,6 +197,8 @@ export class OrchestrationPanel extends ScrollableListPanel<OrchestrationGraphRe
         [selected.startedAt ? new Date(selected.startedAt).toLocaleTimeString() : 'n/a', C.dim],
         ['  Ended: ', C.label],
         [selected.endedAt ? new Date(selected.endedAt).toLocaleTimeString() : 'n/a', C.dim],
+        ['  Duration: ', C.label],
+        [elapsed, C.dim],
       ]),
     ];
     if (selected.lastRecursionGuard) {
@@ -227,7 +245,7 @@ export class OrchestrationPanel extends ScrollableListPanel<OrchestrationGraphRe
             [node.status.padEnd(10), statusColor(node.status)],
             [` ${node.role.padEnd(10)}`, C.value],
             [` ${node.id.slice(0, 8)} `, C.dim],
-            [`${node.title}${depends}`.slice(0, Math.max(0, width - 34)), C.value],
+            [truncateDisplay(`${node.title}${depends}`, Math.max(0, width - 34)), C.value],
           ]);
         });
 
@@ -235,11 +253,22 @@ export class OrchestrationPanel extends ScrollableListPanel<OrchestrationGraphRe
       this.renderItem(graph, index, index === this.selectedIndex, width),
     );
 
+    // Context-aware footer: surface position + only the keys that work here.
+    const footerLines: Line[] = [
+      buildKeyboardHints(width, [
+        { keys: `${this.selectedIndex + 1}/${graphs.length}`, label: 'graph' },
+        { keys: '↑/↓', label: 'select' },
+        { keys: 'g/G', label: 'top/bottom' },
+        { keys: 'PgUp/PgDn', label: 'page' },
+      ], C),
+    ];
+
     const postureSection: PanelWorkspaceSection = { title: 'Orchestration posture', lines: postureLines };
     const selectedGraphSection: PanelWorkspaceSection = { title: 'Selected Graph', lines: detailLines };
     const nodesSection: PanelWorkspaceSection = { title: 'Nodes', lines: nodeLines };
     const graphsSection = resolveScrollablePanelSection(width, height, {
       intro,
+      footerLines,
       palette: C,
       beforeSections: [postureSection],
       section: {
@@ -265,6 +294,7 @@ export class OrchestrationPanel extends ScrollableListPanel<OrchestrationGraphRe
       title: 'Orchestration Control Room',
       intro,
       sections,
+      footerLines,
       palette: C,
     });
     while (lines.length < height) lines.push(createEmptyLine(width));