@pellux/goodvibes-tui 0.27.0 → 0.28.0

package/src/panels/agent-logs-panel.ts

@@ -1,6 +1,5 @@
 import { promises as fsPromises, watch, type FSWatcher } from 'fs';
 import type { Line } from '../types/grid.ts';
-import { createEmptyLine, createStyledCell } from '../types/grid.ts';
 import { ScrollableListPanel } from './scrollable-list-panel.ts';
 import type { AgentManager, AgentRecord } from '@pellux/goodvibes-sdk/platform/tools';
 import type { AgentEvent } from '@/runtime/index.ts';
@@ -161,19 +160,28 @@ export class AgentLogsPanel extends ScrollableListPanel<LogEntry> {
 
   render(width: number, height: number): Line[] {
     this.needsRender = false;
-    const footerLines = [
-      buildPanelLine(width, [
-        [' Tab', DEFAULT_PANEL_PALETTE.info], [' next agent', DEFAULT_PANEL_PALETTE.dim],
-        ['   Space', DEFAULT_PANEL_PALETTE.info], [' pause', DEFAULT_PANEL_PALETTE.dim],
-        ['   f', DEFAULT_PANEL_PALETTE.info], [' filter', DEFAULT_PANEL_PALETTE.dim],
-        ['   g/G', DEFAULT_PANEL_PALETTE.info], [' scroll', DEFAULT_PANEL_PALETTE.dim],
-      ]),
-    ];
+    // Context-aware footer: when there are no agents only the Tab cycle is
+    // meaningless, so hide the per-stream keys; otherwise reflect live state
+    // (Space toggles pause→resume, g/G only matter once there is a tail).
+    const runningCount = this.agents.filter((a) => a.status === 'running' || a.status === 'pending').length;
+    const footerLines = this.agents.length === 0
+      ? [buildPanelLine(width, [[' Waiting for an agent session to start...', DEFAULT_PANEL_PALETTE.dim]])]
+      : [
+          buildPanelLine(width, [
+            [` ${this.selectedAgentIndex + 1}/${this.agents.length}`, DEFAULT_PANEL_PALETTE.dim],
+            ['   Tab', DEFAULT_PANEL_PALETTE.info], [' next agent', DEFAULT_PANEL_PALETTE.dim],
+            ['   Space', DEFAULT_PANEL_PALETTE.info], [this.paused ? ' resume' : ' pause', DEFAULT_PANEL_PALETTE.dim],
+            ['   f', DEFAULT_PANEL_PALETTE.info], [' filter', DEFAULT_PANEL_PALETTE.dim],
+            ['   g/G', DEFAULT_PANEL_PALETTE.info], [this.autoFollow ? ' top/follow' : ' top/bottom', DEFAULT_PANEL_PALETTE.dim],
+          ]),
+        ];
 
     const summaryLines = [
       buildPanelLine(width, [
         [' Agents ', DEFAULT_PANEL_PALETTE.label],
         [String(this.agents.length), DEFAULT_PANEL_PALETTE.value],
+        ['   Running ', DEFAULT_PANEL_PALETTE.label],
+        [String(runningCount), runningCount > 0 ? DEFAULT_PANEL_PALETTE.good : DEFAULT_PANEL_PALETTE.dim],
         ['   Filter ', DEFAULT_PANEL_PALETTE.label],
         [FILTER_LABELS[this.filter], DEFAULT_PANEL_PALETTE.info],
         ['   Mode ', DEFAULT_PANEL_PALETTE.label],
@@ -191,8 +199,11 @@ export class AgentLogsPanel extends ScrollableListPanel<LogEntry> {
             lines: buildEmptyState(
               width,
               ' No agents running',
-              'Spawn or attach to an agent session and its structured logs will appear here.',
-              [],
+              'Spawn or attach to an agent session and its structured logs stream here in real time.',
+              [
+                { command: '/spawn <task>', summary: 'launch an agent and watch its live session log here' },
+                { command: '/inspector', summary: 'open the inspector for a per-agent timeline and tool activity' },
+              ],
               DEFAULT_PANEL_PALETTE,
             ),
           },
@@ -544,22 +555,6 @@ export class AgentLogsPanel extends ScrollableListPanel<LogEntry> {
 
   // ── Private: rendering helpers ─────────────────────────────────────────────
 
-  /** Top header bar: title + filter label + mode indicators */
-  private _renderHeader(width: number): Line {
-    const title = ' Agent Logs ';
-    const filterLabel = `[${FILTER_LABELS[this.filter]}] `;
-    const pause = this.paused ? ' PAUSED ' : '';
-    const follow = this.autoFollow ? ' AUTO-FOLLOW ' : '';
-    const keyhints = '  Tab:next  Space:pause  f:filter  g/G:scroll ';
-    return buildStyledPanelLine(width, [
-      { text: title, fg: COLOR.header_accent, bold: true },
-      { text: filterLabel, fg: COLOR.filter_active },
-      { text: pause, fg: COLOR.paused },
-      { text: follow, fg: COLOR.auto_follow },
-      { text: keyhints, fg: COLOR.header_label },
-    ]);
-  }
-
   /** Agent selector bar: shows running agents with cycle indicator */
   private _renderAgentSelector(width: number): Line {
     const prefix = ' Agents: ';
@@ -583,32 +578,6 @@ export class AgentLogsPanel extends ScrollableListPanel<LogEntry> {
     return buildStyledPanelLine(width, segments);
   }
 
-  private _renderNoAgents(width: number): Line {
-    const msg = ' No agents running. ';
-    return buildStyledPanelLine(width, [{ text: msg, fg: COLOR.dim }]);
-  }
-
-  private _renderSeparator(width: number): Line {
-    return buildStyledPanelLine(width, [{ text: '─'.repeat(width), fg: COLOR.separator }]);
-  }
-
-  private _renderEmpty(width: number, bodyHeight: number): Line[] {
-    const lines: Line[] = [];
-    const msg = this.agents.length === 0
-      ? ' No agents running '
-      : ` No ${this.filter === 'all' ? '' : this.filter + ' '}log entries yet `;
-    const offset = Math.max(0, Math.floor((width - msg.length) / 2));
-    const textLine = buildStyledPanelLine(width, [
-      { text: ' '.repeat(offset), fg: COLOR.dim },
-      { text: msg, fg: COLOR.dim },
-    ]);
-    lines.push(textLine);
-    while (lines.length < bodyHeight) {
-      lines.push(createEmptyLine(width));
-    }
-    return lines;
-  }
-
   private _renderEntry(entry: LogEntry, width: number): Line {
     // Indent non-session entries
     const prefix = entry.type === 'session_start' ? '' : '  ';

package/src/panels/approval-panel.ts

@@ -1,12 +1,18 @@
 import type { Line } from '../types/grid.ts';
 import { ScrollableListPanel } from './scrollable-list-panel.ts';
 import {
+  buildBodyText,
+  buildDetailBlock,
   buildGuidanceLine,
   buildKeyValueLine,
+  buildKeyboardHints,
   buildPanelLine,
+  buildStatusBadge,
   DEFAULT_PANEL_PALETTE,
+  type StatusBadgeKind,
 } from './polish.ts';
-import type { PolicyRuntimeState } from '@/runtime/index.ts';
+import { truncateDisplay } from '../utils/terminal-width.ts';
+import type { PolicyRuntimeState, PermissionAuditEntry } from '@/runtime/index.ts';
 import { buildPermissionRuleSuggestions } from '@/runtime/index.ts';
 
 const C = {
@@ -14,21 +20,56 @@ const C = {
   headerBg: '#111827',
 } as const;
 
-const APPROVAL_ROWS = [
-  ['shell', 'why prompted: side effects, destructive ops, secret exposure, escalation', 'review via /security and /policy preflight'],
-  ['file', 'why prompted: config mutation, notebook edits, secret-bearing paths', 'review via /approval review file'],
-  ['network', 'why prompted: external hosts, fetch scope, egress policy', 'review via /approval review network'],
-  ['delegate', 'why prompted: recursive agents, spawn ceilings, write-set inheritance', 'review via /approval review delegate'],
-  ['mcp', 'why prompted: trust escalation, host scope, path scope, coherence mismatch', 'review via /mcp trust and /security'],
-  ['remote', 'why prompted: runner trust, remote write scope, artifact requirements', 'review via /remote and /sandbox'],
-  ['hook', 'why prompted: deny/mutate authority, blocking behavior, runner provenance', 'review via /hooks and /security'],
-  ['plugin', 'why prompted: install/update lifecycle, provenance, capability grants', 'review via /marketplace and /security'],
-  ['sandbox', 'why prompted: WSL/VM isolation changes alter host risk posture', 'review via /sandbox preset and /sandbox review'],
-] as const;
-
-type ApprovalRow = (typeof APPROVAL_ROWS)[number];
-
-export class ApprovalPanel extends ScrollableListPanel<ApprovalRow> {
+// Reference catalog of approval lanes and where each one is reviewed. Used to
+// resolve the next-step command for a live request and as a fallback reference
+// when no live requests are present.
+const LANE_REVIEW: Record<string, { command: string; why: string }> = {
+  shell:    { command: '/security', why: 'side effects, destructive ops, secret exposure, escalation' },
+  file:     { command: '/approval review file', why: 'config mutation, notebook edits, secret-bearing paths' },
+  network:  { command: '/approval review network', why: 'external hosts, fetch scope, egress policy' },
+  delegate: { command: '/approval review delegate', why: 'recursive agents, spawn ceilings, write-set inheritance' },
+  mcp:      { command: '/mcp trust', why: 'trust escalation, host scope, path scope, coherence mismatch' },
+  remote:   { command: '/remote', why: 'runner trust, remote write scope, artifact requirements' },
+  hook:     { command: '/hooks', why: 'deny/mutate authority, blocking behavior, runner provenance' },
+  plugin:   { command: '/marketplace', why: 'install/update lifecycle, provenance, capability grants' },
+  sandbox:  { command: '/sandbox review', why: 'WSL/VM isolation changes alter host risk posture' },
+};
+
+function laneOf(entry: PermissionAuditEntry): string {
+  const key = (entry.category || entry.tool || '').toLowerCase();
+  for (const lane of Object.keys(LANE_REVIEW)) {
+    if (key.includes(lane)) return lane;
+  }
+  return key || 'shell';
+}
+
+function reviewFor(entry: PermissionAuditEntry): { command: string; why: string } {
+  return LANE_REVIEW[laneOf(entry)] ?? { command: '/security', why: 'review approval posture' };
+}
+
+function decisionOf(entry: PermissionAuditEntry): 'pending' | 'approved' | 'denied' {
+  return entry.approved === undefined ? 'pending' : entry.approved ? 'approved' : 'denied';
+}
+
+function badgeKind(decision: 'pending' | 'approved' | 'denied'): StatusBadgeKind {
+  return decision === 'pending' ? 'pending' : decision === 'approved' ? 'completed' : 'failed';
+}
+
+function riskColor(risk: string): string {
+  const r = risk.toLowerCase();
+  if (r.includes('critical') || r.includes('high')) return C.bad;
+  if (r.includes('medium') || r.includes('moderate')) return C.warn;
+  return C.good;
+}
+
+function fmtAgo(ts: number): string {
+  const sec = Math.max(0, Math.floor((Date.now() - ts) / 1000));
+  if (sec < 60) return `${sec}s ago`;
+  if (sec < 3600) return `${Math.floor(sec / 60)}m ago`;
+  return `${Math.floor(sec / 3600)}h ago`;
+}
+
+export class ApprovalPanel extends ScrollableListPanel<PermissionAuditEntry> {
   private readonly policyRuntimeState: Pick<PolicyRuntimeState, 'getSnapshot'>;
 
   public constructor(policyRuntimeState: Pick<PolicyRuntimeState, 'getSnapshot'>) {
@@ -38,113 +79,123 @@ export class ApprovalPanel extends ScrollableListPanel<ApprovalRow> {
   }
 
   protected override getPalette() { return C; }
-  protected override getEmptyStateMessage() { return ' No approval lanes defined.'; }
+  protected override getEmptyStateMessage() { return ' No approval pressure right now.'; }
+  protected override getEmptyStateActions() {
+    return [
+      { command: '/security', summary: 'inspect trust, tokens, quarantines, and incident pressure' },
+      { command: '/policy simulate', summary: 'preview which requests a rule change would auto-approve' },
+    ];
+  }
 
-  protected getItems(): readonly ApprovalRow[] {
-    return APPROVAL_ROWS;
+  // Pending requests (those still needing a decision) are surfaced first so the
+  // operator sees actionable items at the top, then most-recent decisions.
+  protected getItems(): readonly PermissionAuditEntry[] {
+    const audit = this.policyRuntimeState.getSnapshot().recentPermissionAudit;
+    const pending = audit.filter((e) => e.approved === undefined);
+    const decided = audit.filter((e) => e.approved !== undefined);
+    return [...pending, ...decided];
   }
 
-  protected renderItem(row: ApprovalRow, index: number, selected: boolean, width: number): Line {
+  protected renderItem(entry: PermissionAuditEntry, _index: number, selected: boolean, width: number): Line {
     const bg = selected ? C.selectBg : undefined;
+    const decision = decisionOf(entry);
+    const badge = buildStatusBadge(badgeKind(decision), decision)[0]!;
+    const detailWidth = Math.max(0, width - 40);
     return buildPanelLine(width, [
-      ['  ', C.label],
-      [row[0].padEnd(10), C.info, bg],
-      [row[1].slice(0, Math.max(0, width - 18)), C.value, bg],
+      [' ', C.label, bg],
+      [`${badge.text} `.padEnd(12), badge.fg, bg],
+      [`${truncateDisplay(entry.tool, 12)} `.padEnd(13), C.value, bg],
+      [`${truncateDisplay(entry.riskLevel, 6)} `.padEnd(7), riskColor(entry.riskLevel), bg],
+      [truncateDisplay(entry.summary, detailWidth), C.dim, bg],
     ]);
   }
 
-  public handleInput(key: string): boolean {
-    if (key === 'home') {
-      this.selectedIndex = 0;
-      this.markDirty();
-      return true;
-    }
-    if (key === 'end') {
-      this.selectedIndex = APPROVAL_ROWS.length - 1;
-      this.markDirty();
-      return true;
-    }
-    if (key === 'enter' || key === 'return') {
-      return true;
-    }
-    return super.handleInput(key);
-  }
-
+  /** Next-step review command for the currently selected request (if any). */
   public getSelectedCommand(): string | null {
-    const selected = APPROVAL_ROWS[this.selectedIndex] ?? null;
-    return selected ? selected[2].replace('review via ', '').trim() : null;
+    const items = this.getVisibleItems();
+    const selected = items[this.selectedIndex];
+    return selected ? reviewFor(selected).command : null;
   }
 
   public render(width: number, height: number): Line[] {
     this.clampSelection();
-    const policySnapshot = this.policyRuntimeState.getSnapshot();
-    const approvalCount = policySnapshot.recentPermissionAudit.filter((e) => e.approved === true).length;
-    const denialCount = policySnapshot.recentPermissionAudit.filter((e) => e.approved === false).length;
-    const pendingCount = policySnapshot.recentPermissionAudit.filter((e) => e.approved === undefined).length;
+    const audit = this.policyRuntimeState.getSnapshot().recentPermissionAudit;
+    const approvalCount = audit.filter((e) => e.approved === true).length;
+    const denialCount = audit.filter((e) => e.approved === false).length;
+    const pendingCount = audit.filter((e) => e.approved === undefined).length;
+
+    const items = this.getVisibleItems();
+    const selected = items[this.selectedIndex] ?? null;
 
-    const selected = APPROVAL_ROWS[this.selectedIndex] ?? null;
+    // ---- Posture summary (severity + counts first) ----
+    const headerLines: Line[] = [
+      buildPanelLine(width, [
+        ['  ', C.label],
+        ...buildStatusBadge('pending', 'pending', { count: pendingCount }),
+        ['   ', C.dim],
+        ...buildStatusBadge('completed', 'approved', { count: approvalCount }),
+        ['   ', C.dim],
+        ...buildStatusBadge('failed', 'denied', { count: denialCount }),
+      ]),
+      pendingCount > 0
+        ? buildPanelLine(width, [[`  ${pendingCount} request${pendingCount !== 1 ? 's' : ''} awaiting a decision — select one to see its review path.`, C.warn]])
+        : buildGuidanceLine(width, '/policy simulate', 'preview which requests a scoped rule change would auto-approve', C),
+    ];
+
+    // ---- Detail block for the selected request ----
     const detailLines: Line[] = [];
     if (selected) {
-      detailLines.push(buildPanelLine(width, [['  Selected Lane', C.label]]));
-      detailLines.push(buildKeyValueLine(width, [
-        { label: 'lane', value: selected[0], valueColor: C.info },
-        { label: 'next review', value: selected[2], valueColor: C.dim },
+      const review = reviewFor(selected);
+      const decision = decisionOf(selected);
+      detailLines.push(...buildDetailBlock(width, `Request · ${selected.tool}`, [
+        buildKeyValueLine(width, [
+          { label: 'decision', value: decision, valueColor: decision === 'pending' ? C.info : decision === 'approved' ? C.good : C.bad },
+          { label: 'risk', value: selected.riskLevel, valueColor: riskColor(selected.riskLevel) },
+          { label: 'lane', value: laneOf(selected), valueColor: C.info },
+        ], C),
+        buildKeyValueLine(width, [
+          { label: 'requested', value: fmtAgo(selected.requestedAt), valueColor: C.dim },
+          ...(selected.decidedAt ? [{ label: 'decided', value: fmtAgo(selected.decidedAt), valueColor: C.dim }] : []),
+          ...(selected.target ? [{ label: 'target', value: truncateDisplay(selected.target, 24), valueColor: C.value }] : []),
+        ], C),
+        ...buildBodyText(width, selected.summary, C, C.value),
+        ...(selected.reasons[0]
+          ? buildBodyText(width, `why prompted: ${selected.reasons[0]}`, C, C.dim)
+          : buildBodyText(width, `why prompted: ${review.why}`, C, C.dim)),
+        buildGuidanceLine(width, review.command, `review and decide the ${laneOf(selected)} request`, C),
       ], C));
-      detailLines.push(buildPanelLine(width, [[` ${selected[1]}`, C.value]]));
-      detailLines.push(buildGuidanceLine(width, selected[2].replace('review via ', ''), `open the ${selected[0]} review path`, C));
-    }
-
-    const recentAuditLines: Line[] = [];
-    for (const entry of policySnapshot.recentPermissionAudit.slice(0, 5)) {
-      const decision = entry.approved === undefined ? 'pending' : entry.approved ? 'approved' : 'denied';
-      const decisionColor = entry.approved === undefined ? C.info : entry.approved ? C.good : C.bad;
-      recentAuditLines.push(buildPanelLine(width, [
-        [`  ${decision.padEnd(8)}`, decisionColor],
-        [`${entry.tool}`.padEnd(14), C.label],
-        [entry.summary.slice(0, Math.max(0, width - 28)), C.value],
-      ]));
-      if (entry.reasons[0]) {
-        recentAuditLines.push(buildPanelLine(width, [[`    ${entry.reasons[0]}`, C.dim]]));
-      }
-    }
-    if (recentAuditLines.length === 0) {
-      recentAuditLines.push(buildPanelLine(width, [[`  No recent approval pressure. Live requests and decisions will appear here.`, C.dim]]));
     }
 
+    // ---- Durable-rule suggestions from repeated denials ----
     const ruleSuggestionLines: Line[] = [];
-    for (const suggestion of buildPermissionRuleSuggestions(policySnapshot.recentPermissionAudit).slice(0, 3)) {
-      ruleSuggestionLines.push(buildPanelLine(width, [[`  ${suggestion.summary}`, C.info]]));
+    for (const suggestion of buildPermissionRuleSuggestions(audit).slice(0, 3)) {
+      ruleSuggestionLines.push(buildPanelLine(width, [[`  ${truncateDisplay(suggestion.summary, Math.max(0, width - 4))}`, C.info]]));
       ruleSuggestionLines.push(buildGuidanceLine(width, suggestion.command, suggestion.reason, C));
     }
-    if (ruleSuggestionLines.length === 0) {
-      ruleSuggestionLines.push(buildPanelLine(width, [[`  No repeated denials currently suggest a durable rule.`, C.dim]]));
+    if (ruleSuggestionLines.length > 0) {
+      ruleSuggestionLines.unshift(buildPanelLine(width, [['  Suggested durable rules', C.label]]));
     }
 
-    const headerLines: Line[] = [
-      buildPanelLine(width, [['  Approval posture', C.label]]),
-      buildKeyValueLine(width, [
-        { label: 'why prompted', value: 'risk summary', valueColor: C.value },
-        { label: 'what-if', value: '/policy simulate + preflight', valueColor: C.info },
-        { label: 'operator', value: '/security + /cockpit', valueColor: C.good },
-      ], C),
-      buildPanelLine(width, [
-        ['  \u2713 ', C.good],
-        [`approvals (${approvalCount})  `, C.good],
-        ['\u2715 ', C.bad],
-        [`denials (${denialCount})  `, C.bad],
-        ['\u25cb ', C.info],
-        [`pending (${pendingCount})`, C.info],
-      ]),
-      buildGuidanceLine(width, '/approval review shell', 'inspect the highest-risk approval lane and refine scoped review posture', C),
-      ...detailLines,
-      ...recentAuditLines,
-      ...ruleSuggestionLines,
-    ];
+    // ---- Context-aware footer: only show review key when a request is selected ----
+    const hints = selected
+      ? [
+          { keys: '↑/↓', label: 'select' },
+          { keys: 'Enter', label: `review (${reviewFor(selected).command})` },
+          { keys: 'g/G', label: 'top/bottom' },
+        ]
+      : [
+          { keys: '↑/↓', label: 'select' },
+          { keys: 'g/G', label: 'top/bottom' },
+        ];
 
     return this.renderList(width, height, {
       title: 'Approval Control Room',
       header: headerLines,
-      footer: [buildPanelLine(width, [[`  Up/Down move  Home/End jump  selected lane opens the next command path`, C.dim]])],
+      footer: [...detailLines, ...ruleSuggestionLines, buildKeyboardHints(width, hints, C)],
     });
   }
+
+  protected override onSelect(item: PermissionAuditEntry): void {
+    void item; // Enter is wired by the shell to open getSelectedCommand(); selection model lives here.
+  }
 }

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

@@ -7,8 +7,10 @@ import {
   buildEmptyState,
   buildGuidanceLine,
   buildKeyValueLine,
+  buildKeyboardHints,
   buildPanelLine,
   buildPanelWorkspace,
+  buildSectionHeader,
   DEFAULT_PANEL_PALETTE,
   type PanelPalette,
 } from './polish.ts';
@@ -46,6 +48,8 @@ export class AutomationControlPanel extends ScrollableListPanel<AutomationRun> {
   public constructor(readModel?: UiReadModel<UiAutomationSnapshot>) {
     super('automation', 'Automation', 'M', 'monitoring');
     this.showSelectionGutter = true; // I5: non-color selection affordance
+    this.filterEnabled = true;
+    this.filterLabel = 'Filter runs';
     this.readModel = readModel;
     this.unsub = readModel ? readModel.subscribe(() => this.markDirty()) : null;
   }
@@ -68,6 +72,12 @@ export class AutomationControlPanel extends ScrollableListPanel<AutomationRun> {
     return this.readModel.getSnapshot().runs;
   }
 
+  protected override filterMatches(run: AutomationRun, q: string): boolean {
+    return run.jobId.toLowerCase().includes(q)
+      || run.status.toLowerCase().includes(q)
+      || run.target.kind.toLowerCase().includes(q);
+  }
+
   protected renderItem(run: AutomationRun, _index: number, selected: boolean, width: number): Line {
     const bg = selected ? C.selectBg : undefined;
     const jobs = this.getJobs();
@@ -192,6 +202,8 @@ export class AutomationControlPanel extends ScrollableListPanel<AutomationRun> {
 
     // Jobs quick view
     if (jobs.length > 0) {
+      const enabledJobs = jobs.filter((job) => job.enabled).length;
+      footerLines.push(buildSectionHeader(width, `Jobs (${enabledJobs} enabled / ${jobs.length})`, C));
       footerLines.push(
         ...jobs.slice(0, 6).map((job) => buildPanelLine(width, [
           [' ', C.label],
@@ -201,7 +213,18 @@ export class AutomationControlPanel extends ScrollableListPanel<AutomationRun> {
         ])),
       );
     }
-    footerLines.push(buildPanelLine(width, [['  Up/Down move through runs', C.dim]]));
+    footerLines.push(
+      this.filterActive
+        ? buildKeyboardHints(width, [
+            { keys: 'type', label: 'filter runs' },
+            { keys: 'Enter', label: 'apply' },
+            { keys: 'Esc', label: 'clear' },
+          ], C)
+        : buildKeyboardHints(width, [
+            { keys: 'Up/Down', label: 'select run' },
+            { keys: '/', label: 'filter' },
+          ], C),
+    );
 
     return this.renderList(width, height, {
       title: 'Automation Control',

package/src/panels/base-panel.ts

@@ -6,6 +6,9 @@ import { UIFactory } from '../renderer/ui-factory.ts';
 import { SPINNER_FRAMES } from '../renderer/progress.ts';
 import { fitDisplay } from '../utils/terminal-width.ts';
 
+/** Canonical error-surface foreground (bad/red), kept out of the render body. */
+const ERROR_FG = '#ef4444';
+
 export abstract class BasePanel implements Panel {
   public needsRender = true;
   public isTransient = false;
@@ -79,9 +82,9 @@ export abstract class BasePanel implements Panel {
   protected renderErrorLine(width: number): Line | null {
     if (!this.lastError) return null;
     return UIFactory.stringToLine(
-      ` ✕ ${this.lastError}`.padEnd(width).slice(0, width),
+      fitDisplay(` ✕ ${this.lastError}`, width),
       width,
-      { fg: '#ef4444', bold: true },
+      { fg: ERROR_FG, bold: true },
     );
   }
 
@@ -189,6 +192,27 @@ export abstract class BasePanel implements Panel {
 
   abstract render(width: number, height: number): Line[];
 
+  /**
+   * Default mouse-wheel handling: translate a wheel delta into the panel's
+   * existing up/down keyboard navigation, so every panel scrolls with the wheel
+   * without bespoke code. Panels with richer scroll state (e.g.
+   * `ScrollableListPanel`) override this. No-op for panels that don't implement
+   * `handleInput`. Returns true if any step was consumed.
+   */
+  public handleScroll(deltaRows: number): boolean {
+    const self = this as unknown as { handleInput?: (key: string) => boolean };
+    if (typeof self.handleInput !== 'function') return false;
+    const rows = Math.trunc(deltaRows);
+    if (rows === 0) return false;
+    const key = rows > 0 ? 'down' : 'up';
+    const steps = Math.min(Math.abs(rows), 10); // clamp runaway wheel deltas
+    let consumed = false;
+    for (let i = 0; i < steps; i++) {
+      if (self.handleInput(key)) consumed = true;
+    }
+    return consumed;
+  }
+
   /** R2: Mark this panel dirty — it will be re-rendered on the next compositor frame. */
   public invalidate(): void { this.needsRender = true; }
 

package/src/panels/builtin/development.ts

@@ -18,7 +18,7 @@ export function registerDevelopmentPanels(manager: PanelManager, deps: ResolvedB
     icon: 'G',
     category: 'development',
     description: 'Git status, staged/unstaged changes, and recent commits',
-    factory: () => new GitPanel(requireUiServices(deps).environment.workingDirectory),
+    factory: () => new GitPanel(requireUiServices(deps).environment.workingDirectory, deps.requestRender),
   });
 
   manager.registerType({

package/src/panels/cockpit-panel.ts

@@ -1,5 +1,6 @@
 import type { Line } from '../types/grid.ts';
 import { createEmptyLine } from '../types/grid.ts';
+import { truncateDisplay } from '../utils/terminal-width.ts';
 import { BasePanel } from './base-panel.ts';
 import type { UiCockpitSnapshot, UiReadModel } from '../runtime/ui-read-models.ts';
 import type { CockpitRosterReadModel } from './cockpit-read-model.ts';
@@ -171,7 +172,7 @@ export class CockpitPanel extends BasePanel {
         [entry.status, statusColor],
         stalledBadge,
         ['  ', C.dim],
-        [entry.task.slice(0, Math.max(0, width - 30)), C.label],
+        [truncateDisplay(entry.task, Math.max(0, width - 30)), C.label],
       ]));
     }
     if (roster.length === 0) {
@@ -238,7 +239,7 @@ export class CockpitPanel extends BasePanel {
         [' latest incident ', C.label],
         [snapshot.latestIncident.classification, C.bad],
         ['  ', C.label],
-        [snapshot.latestIncident.summary.slice(0, Math.max(0, width - 19 - snapshot.latestIncident.classification.length)), C.dim],
+        [truncateDisplay(snapshot.latestIncident.summary, Math.max(0, width - 19 - snapshot.latestIncident.classification.length)), C.dim],
       ]));
     }
     const domainLines: Line[] = [buildPanelLine(width, [[
@@ -283,18 +284,36 @@ export class CockpitPanel extends BasePanel {
       workspaceLines.push(...this.renderAgentsWorkspace(width));
     }
 
+    // Visible workspace selector so focus and the available workspaces are
+    // obvious at a glance (not buried in a footer string). Rendered as a
+    // title-less row to keep it compact; the ▸ marker + accent show focus.
+    const selectorLine = buildPanelLine(width, [
+      [' switch ', C.label],
+      ...WORKSPACE_IDS.flatMap((id, i): Array<[string, string, string?]> => {
+        const focused = i === this.selectedWorkspaceIndex;
+        return [
+          [focused ? '▸' : ' ', focused ? C.value : C.dim],
+          [`${id} `, focused ? C.header : C.dim, focused ? C.headerBg : undefined],
+        ];
+      }),
+    ]);
+
     const sections: PanelWorkspaceSection[] = [
+      { lines: [selectorLine] },
       { title: 'Flow', lines: flowLines },
       { title: 'Governance', lines: governanceLines },
       { title: 'Health', lines: healthLines },
       { title: 'Domains', lines: domainLines },
-      { title: 'Selected Workspace', lines: workspaceLines },
+      { title: `Workspace · ${selectedWorkspace}`, lines: workspaceLines },
     ];
+    // Context-aware footer: surface the keys that actually work in this view.
+    const footerHint = selectedWorkspace === 'agents'
+      ? '  ←/→ workspace  ↑/↓ select agent  i inspect  c cancel  Home/End jump'
+      : '  ←/→ workspace  Home/End jump  → agents for per-agent inspect/cancel';
     const lines = buildPanelWorkspace(width, height, {
       title: 'Operator Cockpit',
-      intro: 'Live runtime pressure across orchestration, approvals, governance, integrations, and provider trust posture.',
       sections,
-      footerLines: [buildPanelLine(width, [[`  Left/Right move workspace focus  Home/End jump  focus=${selectedWorkspace}`, C.dim]])],
+      footerLines: [buildPanelLine(width, [[footerHint, C.dim]])],
       palette: C,
     });
     while (lines.length < height) lines.push(createEmptyLine(width));

package/src/panels/cockpit-read-model.ts

@@ -19,6 +19,7 @@
 // ---------------------------------------------------------------------------
 
 import type { AgentRecord } from '@pellux/goodvibes-sdk/platform/tools';
+import { truncateDisplay } from '../utils/terminal-width.ts';
 import { calcSessionCost } from '../export/cost-utils.ts';
 import {
   AGENT_TERMINAL_STATUSES,
@@ -137,7 +138,7 @@ export function buildCockpitRosterSnapshot(
       totalCost += agentCost;
     }
 
-    const task = rec.task.length > 50 ? rec.task.slice(0, 47) + '...' : rec.task;
+    const task = truncateDisplay(rec.task, 50);
 
     return {
       id: rec.id,