@pellux/goodvibes-tui 0.27.0 → 0.29.0

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

@@ -8,35 +8,31 @@
  * Open via Ctrl+O keybind or `/ops view` command.
  */
 import type { Line } from '../types/grid.ts';
-import type { OpsEvent } from '@/runtime/index.ts';
+import { fitDisplay, truncateDisplay } from '../utils/terminal-width.ts';
+import type { OpsApi, 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 { type ConfirmState, handleConfirmInput, renderConfirmLines } from './confirm-state.ts';
+import { summarizeError } from '@pellux/goodvibes-sdk/platform/utils';
 import {
+  buildKeyValueLine,
+  buildKeyboardHints,
   buildPanelLine,
   DEFAULT_PANEL_PALETTE,
+  extendPalette,
   type PanelPalette,
 } from './polish.ts';
 
 // ── Colour palette ──────────────────────────────────────────────────────────
-const C = {
-  ...DEFAULT_PANEL_PALETTE,
-  header:     '#94a3b8',
-  headerBg:   '#1e293b',
-  success:    '#22c55e',
-  rejected:   '#f97316',
-  error:      '#ef4444',
-  dim:        '#4b5563',
-  label:      '#64748b',
-  value:      '#cbd5e1',
-  note:       '#eab308',
-  seq:        '#475569',
-  taskColor:  '#22d3ee',
-  agentColor: '#a78bfa',
-  empty:      '#334155',
-  selectBg:   '#0f172a',
-} as const;
+// Domain accents only; base chrome (header/headerBg/dim/label/value/good/bad/
+// warn/empty/selectBg) comes from DEFAULT_PANEL_PALETTE.
+const C = extendPalette(DEFAULT_PANEL_PALETTE, {
+  rejected:   '#f97316',   // rejected-outcome badge — distinct from success/error
+  taskColor:  '#22d3ee',   // task-target tag
+  agentColor: '#a78bfa',   // agent-target tag
+} as const);
 
 // ── Helpers ──────────────────────────────────────────────────────────────────
 
@@ -50,9 +46,9 @@ function fmtTime(ts: number): string {
 
 function outcomeColor(outcome: OpsAuditEntry['outcome']): string {
   switch (outcome) {
-    case 'success':  return C.success;
+    case 'success':  return C.good;
     case 'rejected': return C.rejected;
-    case 'error':    return C.error;
+    case 'error':    return C.bad;
   }
 }
 
@@ -68,16 +64,41 @@ function targetColor(kind: OpsAuditEntry['targetKind']): string {
   return kind === 'task' ? C.taskColor : C.agentColor;
 }
 
+// ── Operator intervention actions ───────────────────────────────────────────
+// Target-entry mode: c/p/u/y act on the currently *selected* audit row's
+// target (task or agent) rather than requiring a typed id, mirroring the
+// `/ops task <action> <id>` / `/ops agent cancel <id>` slash commands.
+
+type OpsAction = 'cancel' | 'pause' | 'resume' | 'retry';
+
+interface OpsActionSubject {
+  readonly action: OpsAction;
+  readonly targetKind: OpsAuditEntry['targetKind'];
+  readonly targetId: string;
+}
+
+const ACTION_VERB: Record<OpsAction, string> = {
+  cancel: 'Cancel',
+  pause: 'Pause',
+  resume: 'Resume',
+  retry: 'Retry',
+};
+
 // ── OpsControlPanel ──────────────────────────────────────────────────────────
 
 export class OpsControlPanel extends ScrollableListPanel<OpsAuditEntry> {
   private readonly _opsPanel: OpsPanel;
+  private readonly _opsApi: OpsApi | undefined;
   private _unsub: (() => void) | null = null;
+  private _confirm: ConfirmState<OpsActionSubject> | null = null;
 
-  public constructor(eventFeed: UiEventFeed<OpsEvent>) {
-    super('ops-control', 'Ops Control', 'Q', 'agent');
+  public constructor(eventFeed: UiEventFeed<OpsEvent>, opsApi?: OpsApi) {
+    super('ops-control', 'Ops Control', '◓', 'runtime-ops');
     this.showSelectionGutter = true; // I5: non-color selection affordance
+    this.filterEnabled = true;
+    this.filterLabel = 'Filter audit';
     this._opsPanel = new OpsPanel(eventFeed);
+    this._opsApi = opsApi;
     this._unsub = this._opsPanel.subscribe(() => this.markDirty());
   }
 
@@ -103,25 +124,120 @@ 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);
+  }
+
+  // -------------------------------------------------------------------------
+  // Input — target-entry mode dispatch (acts on the selected audit row)
+  // -------------------------------------------------------------------------
+
+  public override handleInput(key: string): boolean {
+    if (this.lastError !== null) this.clearError();
+
+    if (this._confirm) {
+      const result = handleConfirmInput(this._confirm, key);
+      if (result === 'confirmed') {
+        this._executeConfirmed(this._confirm.subject);
+        this._confirm = null;
+        this.markDirty();
+        return true;
+      }
+      if (result === 'cancelled') {
+        this._confirm = null;
+        this.markDirty();
+      }
+      return true;
+    }
+
+    if (!this.filterActive) {
+      switch (key) {
+        case 'c': this._requestAction('cancel'); return true;
+        case 'p': this._requestAction('pause'); return true;
+        case 'u': this._requestAction('resume'); return true;
+        case 'y': this._requestAction('retry'); return true;
+        default: break;
+      }
+    }
+
+    return super.handleInput(key);
+  }
+
+  private _requestAction(action: OpsAction): void {
+    const selected = this.getSelectedItem();
+    if (!selected) return;
+    if (action !== 'cancel' && selected.targetKind === 'agent') {
+      this.setError(`Only cancel is supported for agent targets ("${action}" is task-only).`);
+      return;
+    }
+    this._confirm = {
+      subject: { action, targetKind: selected.targetKind, targetId: selected.targetId },
+      label: `${selected.targetKind} ${selected.targetId}`,
+      verb: ACTION_VERB[action],
+    };
+    this.markDirty();
+  }
+
+  private _executeConfirmed(subject: OpsActionSubject): void {
+    if (!this._opsApi) {
+      this.setError('Ops API is not wired for this runtime.');
+      return;
+    }
+    try {
+      if (subject.targetKind === 'agent') {
+        this._opsApi.agents.cancel(subject.targetId);
+      } else {
+        switch (subject.action) {
+          case 'cancel': this._opsApi.tasks.cancel(subject.targetId); break;
+          case 'pause':  this._opsApi.tasks.pause(subject.targetId); break;
+          case 'resume': this._opsApi.tasks.resume(subject.targetId); break;
+          case 'retry':  this._opsApi.tasks.retry(subject.targetId); break;
+        }
+      }
+    } catch (err) {
+      // Dispatched actions re-appear as OPS_AUDIT rows regardless of legality
+      // (OpsControlPlane audits rejections too); this surfaces the rare case
+      // where the target vanished before the audit event was emitted.
+      this.setError(summarizeError(err));
+    }
+  }
+
+  /** Live posture: tasks currently eligible for intervention, independent of the audit log. */
+  private _postureCounts(): { running: number; blocked: number; retryable: number } {
+    const tasks = this._opsApi?.tasks.snapshot().tasks ?? [];
+    let running = 0;
+    let blocked = 0;
+    let retryable = 0;
+    for (const task of tasks) {
+      if (task.status === 'running') running++;
+      else if (task.status === 'blocked') blocked++;
+      else if (task.status === 'failed' || task.status === 'cancelled') retryable++;
+    }
+    return { running, blocked, retryable };
+  }
+
   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],
+      [` ${seqStr} `, C.dim],
       [`${timeStr} `, C.dim],
       [`${action} `, C.value],
       [`${target}  `, targetColor(entry.targetKind)],
       [outLabel, outcomeColor(entry.outcome)],
     ];
-    if (noteRaw) segs.push([` ${noteRaw}`, C.note]);
+    if (noteRaw) segs.push([` ${noteRaw}`, C.warn]);
     return buildPanelLine(width, segs);
   }
 
@@ -130,16 +246,79 @@ export class OpsControlPanel extends ScrollableListPanel<OpsAuditEntry> {
   }
 
   protected override getEmptyStateActions(): Array<{ command: string; summary: string }> {
-    return [{ command: '/cockpit', summary: 'open the cockpit and drive runtime interventions from the control rooms' }];
+    // No signpost — the live posture row in the header (running/blocked/retryable
+    // task counts) already tells the operator whether there is anything to act on.
+    return [];
   }
 
   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 posture = this._postureCounts();
+
     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.good : C.dim },
+        { label: 'rejected', value: String(rejected), valueColor: rejected > 0 ? C.rejected : C.dim },
+        { label: 'errors', value: String(errored), valueColor: errored > 0 ? C.bad : C.dim },
+      ], C),
+      buildKeyValueLine(width, [
+        { label: 'running', value: String(posture.running), valueColor: posture.running > 0 ? C.warn : C.dim },
+        { label: 'blocked', value: String(posture.blocked), valueColor: posture.blocked > 0 ? C.warn : C.dim },
+        { label: 'retryable', value: String(posture.retryable), valueColor: posture.retryable > 0 ? C.info : 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 = this.getSelectedItem();
+    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.warn],
+        ]),
+      );
+    }
+    if (this._confirm) {
+      footerLines.push(...renderConfirmLines(width, this._confirm));
+    }
+    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: 'c/p/u/y', label: 'cancel/pause/resume/retry selected' },
+            { 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 { PlannerEvent, PlanRuntimeService } 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> = {
@@ -38,6 +50,15 @@ const STRATEGY_ICON: Record<ExecutionStrategy, string> = {
   remote:     '▸',
 };
 
+// Cycle order for the o (override) and m (mode) keys — mirrors /plan's
+// documented strategy list (planner-command-handler.ts VALID_STRATEGIES).
+const STRATEGY_CYCLE: readonly ExecutionStrategy[] = ['auto', 'single', 'cohort', 'background', 'remote'];
+
+function nextStrategy(current: ExecutionStrategy): ExecutionStrategy {
+  const idx = STRATEGY_CYCLE.indexOf(current);
+  return STRATEGY_CYCLE[(idx + 1) % STRATEGY_CYCLE.length]!;
+}
+
 // ---------------------------------------------------------------------------
 // OpsStrategyPanel
 // ---------------------------------------------------------------------------
@@ -47,13 +68,16 @@ export class OpsStrategyPanel extends BasePanel {
   private scrollOffset = 0;
   private history: PlannerDecision[] = [];
   private readonly adaptivePlanner: OpsStrategyQuery;
+  private readonly planRuntime: PlanRuntimeService | undefined;
 
   constructor(
     private readonly plannerEvents: UiEventFeed<PlannerEvent>,
     adaptivePlanner: OpsStrategyQuery,
+    planRuntime?: PlanRuntimeService,
   ) {
-    super('ops', 'Ops', 'O', 'agent');
+    super('ops', 'Ops', '◫', 'runtime-ops');
     this.adaptivePlanner = adaptivePlanner;
+    this.planRuntime = planRuntime;
   }
 
   override onActivate(): void {
@@ -77,6 +101,8 @@ export class OpsStrategyPanel extends BasePanel {
   }
 
   handleInput(key: string): boolean {
+    if (this.lastError !== null) this.clearError();
+
     if (key === 'up' || key === 'k') {
       this.scrollOffset = Math.max(0, this.scrollOffset - 1);
       this.markDirty();
@@ -97,65 +123,124 @@ export class OpsStrategyPanel extends BasePanel {
       this.markDirty();
       return true;
     }
+    if (key === 'o') {
+      this._cycleOverride();
+      return true;
+    }
+    if (key === 'c') {
+      this._clearOverride();
+      return true;
+    }
+    if (key === 'm') {
+      this._cycleMode();
+      return true;
+    }
     return false;
   }
 
+  // -------------------------------------------------------------------------
+  // Override verbs — o=cycle override, c=clear, m=cycle mode, all dispatched
+  // through the same /plan subcommand bridge the slash command uses
+  // (planning-runtime.ts), so panel and slash-command behavior stay identical.
+  // -------------------------------------------------------------------------
+
+  private _cycleOverride(): void {
+    if (!this.planRuntime) {
+      this.setError('Plan runtime is not wired for this runtime.');
+      return;
+    }
+    const current = this.adaptivePlanner.getOverride() ?? this.adaptivePlanner.getMode();
+    const result = this.planRuntime('override', [nextStrategy(current)]);
+    if (!result.ok) this.setError(result.output);
+    this.markDirty();
+  }
+
+  private _clearOverride(): void {
+    if (!this.planRuntime) {
+      this.setError('Plan runtime is not wired for this runtime.');
+      return;
+    }
+    const result = this.planRuntime('clear', []);
+    if (!result.ok) this.setError(result.output);
+    this.markDirty();
+  }
+
+  private _cycleMode(): void {
+    if (!this.planRuntime) {
+      this.setError('Plan runtime is not wired for this runtime.');
+      return;
+    }
+    const result = this.planRuntime('mode', [nextStrategy(this.adaptivePlanner.getMode())]);
+    if (!result.ok) this.setError(result.output);
+    this.markDirty();
+  }
+
   render(width: number, height: number): Line[] {
     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 errorLine = this.renderErrorLine(width);
+    const footerLines = [
+      ...(errorLine ? [errorLine] : []),
+      buildKeyboardHints(width, [
+        { keys: 'Up/Down', label: 'scroll history' },
+        { keys: 'g/G', label: 'top/bottom' },
+        { keys: 'o', label: 'cycle override' },
+        { keys: 'c', label: 'clear override' },
+        { keys: 'm', label: 'cycle mode' },
+      ], 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. Seed or inspect an execution plan to drive runtime activity.',
+              [{ command: '/plan', summary: 'seed or inspect an execution plan; strategy decisions start appearing here once it runs' }],
+              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 +250,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 +270,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 +284,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 },
           ]));
         }
       }