@pellux/goodvibes-tui 0.27.0 → 0.29.0

package/src/panels/plan-dashboard-panel.ts

@@ -1,16 +1,40 @@
 import type { Line } from '../types/grid.ts';
-import type { ExecutionPlan, PlanItem, PlanItemStatus } from '@pellux/goodvibes-sdk/platform/core';
+import type { ExecutionPlan, ExecutionPlanManager, PlanItem, PlanItemStatus } from '@pellux/goodvibes-sdk/platform/core';
+import { truncateDisplay } from '../utils/terminal-width.ts';
 import { BasePanel } from './base-panel.ts';
-import type { PlanDashboardQuery } from '../runtime/ui-service-queries.ts';
+import { AgentInspectorPanel } from './agent-inspector-panel.ts';
+import type { PanelIntegrationContext } from './types.ts';
+import type { WorkflowEvent } from '@/runtime/index.ts';
+import type { UiEventFeed } from '../runtime/ui-events.ts';
 import {
   buildEmptyState,
+  buildKeyboardHints,
+  buildKeyValueLine,
+  buildMeterLine,
   buildPanelLine,
   buildPanelWorkspace,
+  buildSelectablePanelLine,
   resolveScrollablePanelSection,
   DEFAULT_PANEL_PALETTE,
+  extendPalette,
   type PanelWorkspaceSection,
 } from './polish.ts';
 
+// ---------------------------------------------------------------------------
+// Palette (no inline hex in render bodies)
+// ---------------------------------------------------------------------------
+
+const C = extendPalette(DEFAULT_PANEL_PALETTE, {
+  complete: '#22c55e',
+  active: '#00ffff',
+  pending: '#94a3b8',
+  failed: '#ef4444',
+  skipped: '#64748b',
+  blocked: '#f97316',
+  selectBg: '#1e293b',
+  phase: '#cbd5e1',
+});
+
 // ---------------------------------------------------------------------------
 // Status display maps
 // ---------------------------------------------------------------------------
@@ -24,13 +48,28 @@ const STATUS_ICON: Record<PlanItemStatus, string> = {
 };
 
 const STATUS_FG: Record<PlanItemStatus, string> = {
-  complete: '#22c55e',
-  in_progress: '#00ffff',
-  pending: '244',
-  failed: '#ef4444',
-  skipped: '238',
+  complete: C.complete,
+  in_progress: C.active,
+  pending: C.pending,
+  failed: C.failed,
+  skipped: C.skipped,
 };
 
+// ---------------------------------------------------------------------------
+// Deps
+// ---------------------------------------------------------------------------
+
+/**
+ * The subset of ExecutionPlanManager the dashboard needs: the live active
+ * plan (getActive) plus history/switching support (list/getSummary/
+ * toMarkdown — the same trio /plan list|show consume, planning-runtime.ts:
+ * 140-165) so the panel can browse and view any plan on disk, not just the
+ * currently active one.
+ */
+export interface PlanDashboardPanelDeps {
+  readonly planManager: Pick<ExecutionPlanManager, 'getActive' | 'list' | 'getSummary' | 'toMarkdown'>;
+}
+
 // ---------------------------------------------------------------------------
 // PlanDashboardPanel
 // ---------------------------------------------------------------------------
@@ -41,11 +80,40 @@ export class PlanDashboardPanel extends BasePanel {
 
   // Flat list of navigable row indices (set during render)
   private totalRows = 0;
-  private readonly planManager: PlanDashboardQuery;
+  // Item flat-list parallel to navigable rows (set during render) for detail.
+  private navItems: PlanItem[] = [];
+  private blockedItemIds = new Set<string>();
+
+  /**
+   * The plan item under the cursor. This panel owns its own selection state
+   * (`selectedIndex` navigates the `this.navItems` flat list directly), so
+   * every selected-row read routes through this one accessor — indexing
+   * `this.navItems` by the cursor directly is banned by the
+   * no-raw-selectedindex-read architecture rule.
+   */
+  private selectedNavItem(): PlanItem | undefined {
+    return this.navItems.at(this.selectedIndex);
+  }
 
-  constructor(planManager: PlanDashboardQuery) {
-    super('plan', 'Plan', 'P', 'agent');
-    this.planManager = planManager;
+  // Plan history / switching (planManager.list()/getSummary()/toMarkdown()).
+  // `viewingPlanId` is null while following the live active plan; once set,
+  // the dashboard renders that specific plan from disk instead.
+  private viewingPlanId: string | null = null;
+  private historyMode = false;
+  private historyPlans: ExecutionPlan[] = [];
+  private historySelectedIndex = 0;
+  private historyScrollOffset = 0;
+
+  // Live-refresh subscriptions (WrfcPanel pattern: subscribe ui.events.workflows
+  // so the dashboard updates during a run without requiring a keypress).
+  private unsubscribers: Array<() => void> = [];
+
+  constructor(
+    private readonly workflowEvents: UiEventFeed<WorkflowEvent>,
+    private readonly deps: PlanDashboardPanelDeps,
+  ) {
+    super('plan', 'Plan', '▤', 'agent');
+    this.subscribeToEvents();
   }
 
   override onActivate(): void {
@@ -54,11 +122,52 @@ export class PlanDashboardPanel extends BasePanel {
     this.markDirty();
   }
 
+  override onDestroy(): void {
+    for (const unsub of this.unsubscribers) unsub();
+    this.unsubscribers = [];
+    super.onDestroy();
+  }
+
+  // --------------------------------------------------------------------------
+  // Live refresh — mirrors WrfcPanel: any workflow event may have changed the
+  // active plan's item statuses (WRFC updates plan items via
+  // wrfcController.setPlanManager, main.ts:120), so re-render without
+  // requiring a keypress.
+  // --------------------------------------------------------------------------
+
+  private subscribeToEvents(): void {
+    const refresh = () => this.markDirty();
+    this.unsubscribers.push(
+      this.workflowEvents.on('WORKFLOW_CHAIN_CREATED', refresh),
+      this.workflowEvents.on('WORKFLOW_STATE_CHANGED', refresh),
+      this.workflowEvents.on('WORKFLOW_REVIEW_COMPLETED', refresh),
+      this.workflowEvents.on('WORKFLOW_FIX_ATTEMPTED', refresh),
+      this.workflowEvents.on('WORKFLOW_GATE_RESULT', refresh),
+      this.workflowEvents.on('WORKFLOW_CHAIN_PASSED', refresh),
+      this.workflowEvents.on('WORKFLOW_CHAIN_FAILED', refresh),
+      this.workflowEvents.on('WORKFLOW_AUTO_COMMITTED', refresh),
+      this.workflowEvents.on('WORKFLOW_CASCADE_ABORTED', refresh),
+    );
+  }
+
   // --------------------------------------------------------------------------
   // Input
   // --------------------------------------------------------------------------
 
   handleInput(key: string): boolean {
+    if (this.historyMode) {
+      return this.handleHistoryInput(key);
+    }
+    if (key === 'h') {
+      this.enterHistoryMode();
+      return true;
+    }
+    if (key === 'a' && this.viewingPlanId !== null) {
+      this.viewingPlanId = null;
+      this.selectedIndex = 0;
+      this.markDirty();
+      return true;
+    }
     if (key === 'up' || key === 'k') {
       if (this.selectedIndex > 0) {
         this.selectedIndex--;
@@ -71,17 +180,107 @@ export class PlanDashboardPanel extends BasePanel {
         this.markDirty();
         return true;
       }
+    } else if (key === 'home' || key === 'g') {
+      if (this.selectedIndex !== 0) {
+        this.selectedIndex = 0;
+        this.markDirty();
+      }
+      return true;
+    } else if (key === 'end' || key === 'G') {
+      const last = Math.max(0, this.totalRows - 1);
+      if (this.selectedIndex !== last) {
+        this.selectedIndex = last;
+        this.markDirty();
+      }
+      return true;
+    } else if (key === 'enter' || key === 'return') {
+      // Consumed here (so the integration router fires next) only when the
+      // selected item actually has an agent to jump to; see
+      // handlePanelIntegrationAction below.
+      const item = this.selectedNavItem();
+      if (item?.agentId) return true;
     }
     return false;
   }
 
+  /**
+   * Cross-panel jump: Enter on a plan item with an assigned agent opens the
+   * Inspector focused on that agent (inspectAgent, WO-110). The inspector
+   * already renders a WRFC badge for the inspected agent, so this also
+   * cross-links the owning WRFC chain without the dashboard needing to know
+   * about WrfcController directly.
+   */
+  handlePanelIntegrationAction(key: string, ctx: PanelIntegrationContext): boolean {
+    if (this.historyMode) return false;
+    if (key !== 'enter' && key !== 'return') return false;
+    const item = this.selectedNavItem();
+    if (!item?.agentId) return false;
+    const inspector = ctx.panelManager.open('inspector');
+    if (inspector instanceof AgentInspectorPanel) {
+      inspector.inspectAgent(item.agentId);
+    }
+    return true;
+  }
+
+  // --------------------------------------------------------------------------
+  // Plan history / switching
+  // --------------------------------------------------------------------------
+
+  private enterHistoryMode(): void {
+    this.historyPlans = [...this.deps.planManager.list()].sort(
+      (a, b) => new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime(),
+    );
+    this.historySelectedIndex = 0;
+    this.historyScrollOffset = 0;
+    this.historyMode = true;
+    this.markDirty();
+  }
+
+  private handleHistoryInput(key: string): boolean {
+    if (key === 'up' || key === 'k') {
+      if (this.historySelectedIndex > 0) {
+        this.historySelectedIndex--;
+        this.markDirty();
+      }
+      return true;
+    }
+    if (key === 'down' || key === 'j') {
+      if (this.historySelectedIndex < this.historyPlans.length - 1) {
+        this.historySelectedIndex++;
+        this.markDirty();
+      }
+      return true;
+    }
+    if (key === 'enter' || key === 'return') {
+      const plan = this.historyPlans[this.historySelectedIndex];
+      if (plan) {
+        this.viewingPlanId = plan.id;
+        this.selectedIndex = 0;
+      }
+      this.historyMode = false;
+      this.markDirty();
+      return true;
+    }
+    if (key === 'escape' || key === 'h') {
+      this.historyMode = false;
+      this.markDirty();
+      return true;
+    }
+    // Modal browsing: absorb everything else (mirrors ConfirmState's "others
+    // absorbed" contract) so stray keys cannot leak into item navigation.
+    return true;
+  }
+
   // --------------------------------------------------------------------------
   // Render
   // --------------------------------------------------------------------------
 
   render(width: number, height: number): Line[] {
     return this.trackedRender(() => {
-    const plan = this.planManager.getActive();
+    if (this.historyMode) {
+      return this.renderHistory(width, height);
+    }
+    const plan = this.resolveViewedPlan();
     if (!plan) {
       return buildPanelWorkspace(width, height, {
         title: ' Plan Dashboard',
@@ -91,24 +290,166 @@ export class PlanDashboardPanel extends BasePanel {
             lines: buildEmptyState(
               width,
               ' No active execution plan',
-              'Use /plan to create a plan and the execution dashboard will populate here.',
-              [],
-              DEFAULT_PANEL_PALETTE,
+              'Execution plans are produced by WRFC-reviewed tasks (gather-plan-apply execution). Start one from Teamwork and its phases, progress, blocked steps, and next action will surface here.',
+              [
+                { command: '/teamwork create-mode local-engineer <title>', summary: 'start a WRFC-reviewed engineer task — the only producer of a real execution plan' },
+                { command: '/teamwork modes', summary: 'see every reviewMode: wrfc mode that can seed a plan' },
+              ],
+              C,
             ),
           },
         ],
-        palette: DEFAULT_PANEL_PALETTE,
+        footerLines: this.historyFooterHintLines(width),
+        palette: C,
       });
     }
     return this.renderPlan(plan, width, height);
     });
   }
 
+  /** Resolve which plan to render: the pinned history selection, or the live active plan. */
+  private resolveViewedPlan(): ExecutionPlan | null {
+    if (this.viewingPlanId !== null) {
+      const found = this.deps.planManager.list().find((p) => p.id === this.viewingPlanId);
+      if (found) return found;
+      // The pinned plan is gone (e.g. deleted from disk) — fall back to live.
+      this.viewingPlanId = null;
+    }
+    return this.deps.planManager.getActive();
+  }
+
+  /** Keyboard hint shown even on the empty state so 'h' (history) stays discoverable. */
+  private historyFooterHintLines(width: number): Line[] {
+    return [
+      buildKeyboardHints(width, [
+        { keys: 'h', label: 'plan history' },
+      ], C),
+    ];
+  }
+
+  // --------------------------------------------------------------------------
+  // Plan history browser
+  // --------------------------------------------------------------------------
+
+  private renderHistory(width: number, height: number): Line[] {
+    if (this.historyPlans.length === 0) {
+      return buildPanelWorkspace(width, height, {
+        title: ' Plan History',
+        intro: 'Every execution plan ever created for this project.',
+        sections: [
+          {
+            lines: buildEmptyState(
+              width,
+              ' No plans on disk',
+              'Plans appear here once a WRFC-reviewed task (gather-plan-apply execution) creates one.',
+              [],
+              C,
+            ),
+          },
+        ],
+        footerLines: [buildKeyboardHints(width, [{ keys: 'Esc / h', label: 'back' }], C)],
+        palette: C,
+      });
+    }
+
+    const activePlan = this.deps.planManager.getActive();
+    const rows: Line[] = [];
+    let selectedLineIndex = 0;
+    for (let i = 0; i < this.historyPlans.length; i++) {
+      const plan = this.historyPlans[i]!;
+      const isSelected = i === this.historySelectedIndex;
+      if (isSelected) selectedLineIndex = rows.length;
+      rows.push(this.renderHistoryRow(plan, activePlan?.id === plan.id, isSelected, width));
+    }
+
+    const highlighted = this.historyPlans[this.historySelectedIndex];
+    const detailSection: PanelWorkspaceSection | null = highlighted ? {
+      title: 'Plan Detail',
+      lines: this.buildHistoryDetailLines(highlighted, width),
+    } : null;
+
+    const footerLines: Line[] = [
+      buildKeyboardHints(width, [
+        { keys: '↑/↓', label: 'browse' },
+        { keys: 'Enter', label: 'view plan' },
+        { keys: 'Esc / h', label: 'back' },
+      ], C),
+    ];
+
+    const intro = `${this.historyPlans.length} plan${this.historyPlans.length === 1 ? '' : 's'} on disk`;
+    const historySection = resolveScrollablePanelSection(width, height, {
+      intro,
+      footerLines,
+      palette: C,
+      afterSections: detailSection ? [detailSection] : [],
+      section: {
+        title: 'Plan History',
+        scrollableLines: rows,
+        selectedIndex: selectedLineIndex,
+        scrollOffset: this.historyScrollOffset,
+        minRows: 6,
+      },
+    });
+    this.historyScrollOffset = historySection.scrollOffset;
+
+    return buildPanelWorkspace(width, height, {
+      title: ' Plan History',
+      intro,
+      sections: [
+        historySection.section,
+        ...(detailSection ? [detailSection] : []),
+      ],
+      footerLines,
+      palette: C,
+    });
+  }
+
+  private renderHistoryRow(plan: ExecutionPlan, isActive: boolean, isSelected: boolean, width: number): Line {
+    const marker = isActive ? '▶' : ' ';
+    const idShort = plan.id.slice(0, 8);
+    const statusTag = `[${plan.status.padEnd(8)}]`;
+    const prefix = ` ${marker} ${idShort}  ${statusTag} `;
+    const label = truncateDisplay(plan.title, Math.max(6, width - prefix.length - 2));
+    return buildSelectablePanelLine(width, [
+      { text: ` ${marker} `, fg: isActive ? C.good : C.dim, bold: isActive },
+      { text: `${idShort}  `, fg: C.dim },
+      { text: `${statusTag} `, fg: this.statusColor(plan.status) },
+      { text: label, fg: C.value },
+    ], {
+      selected: isSelected,
+      selectedBg: C.selectBg,
+      leadingMarker: '▸',
+    });
+  }
+
+  private buildHistoryDetailLines(plan: ExecutionPlan, width: number): Line[] {
+    const lines: Line[] = [
+      buildPanelLine(width, [
+        [' Summary ', C.label],
+        [truncateDisplay(this.deps.planManager.getSummary(plan), Math.max(8, width - 12)), C.value],
+      ]),
+    ];
+    const markdown = this.deps.planManager.toMarkdown(plan)
+      .split('\n')
+      .filter((line) => line.trim().length > 0)
+      .slice(0, 4);
+    for (const line of markdown) {
+      lines.push(buildPanelLine(width, [
+        [' ', C.label],
+        [truncateDisplay(line, Math.max(8, width - 3)), C.dim],
+      ]));
+    }
+    return lines;
+  }
+
   // --------------------------------------------------------------------------
-  // Empty state
+  // Plan render
   // --------------------------------------------------------------------------
 
   private renderPlan(plan: ExecutionPlan, width: number, height: number): Line[] {
+    const activePlan = this.deps.planManager.getActive();
+    const isHistorical = activePlan?.id !== plan.id;
+
     const phaseOrder: string[] = [];
     const byPhase = new Map<string, PlanItem[]>();
     for (const item of plan.items) {
@@ -126,9 +467,17 @@ export class PlanDashboardPanel extends BasePanel {
         .map((i) => i.id),
     );
 
+    const isBlocked = (item: PlanItem): boolean =>
+      item.status === 'pending' &&
+      item.dependencies !== undefined &&
+      item.dependencies.length > 0 &&
+      !item.dependencies.every((depId) => completeIds.has(depId));
+
     let rowCount = 0;
     let selectedLineIndex = 0;
     const planLines: Line[] = [];
+    const navItems: PlanItem[] = [];
+    const blockedItemIds = new Set<string>();
 
     for (const phase of phaseOrder) {
       const items = byPhase.get(phase)!;
@@ -136,52 +485,96 @@ export class PlanDashboardPanel extends BasePanel {
       for (const item of items) {
         const isSelected = rowCount === this.selectedIndex;
         if (isSelected) selectedLineIndex = planLines.length;
-        const isBlocked =
-          item.status === 'pending' &&
-          item.dependencies !== undefined &&
-          item.dependencies.length > 0 &&
-          !item.dependencies.every((depId) => completeIds.has(depId));
-
-        planLines.push(this.renderItem(item, isSelected, isBlocked, width));
+        const blocked = isBlocked(item);
+        if (blocked) blockedItemIds.add(item.id);
+        navItems.push(item);
+        planLines.push(this.renderItem(item, isSelected, blocked, width));
         rowCount++;
       }
     }
 
     this.totalRows = rowCount;
+    this.navItems = navItems;
+    this.blockedItemIds = blockedItemIds;
     if (this.selectedIndex >= this.totalRows) {
       this.selectedIndex = Math.max(0, this.totalRows - 1);
     }
 
     const total = plan.items.length;
     const done = plan.items.filter((i) => i.status === 'complete' || i.status === 'skipped').length;
+    const inProgress = plan.items.filter((i) => i.status === 'in_progress').length;
+    const failed = plan.items.filter((i) => i.status === 'failed').length;
+    const blockedCount = blockedItemIds.size;
     const pct = total > 0 ? Math.round((done / total) * 100) : 0;
+
+    // The single most useful pointer: what should happen next. Prefer the first
+    // in-progress item, else the first actionable (unblocked) pending item.
+    const nextItem = plan.items.find((i) => i.status === 'in_progress')
+      ?? plan.items.find((i) => i.status === 'pending' && !isBlocked(i));
+
+    const meterWidth = Math.max(10, Math.min(28, width - 30));
     const summary: PanelWorkspaceSection = {
       title: 'Summary',
       lines: [
         buildPanelLine(width, [
-          [' Status ', DEFAULT_PANEL_PALETTE.label],
+          [' Status ', C.label],
           [plan.status, this.statusColor(plan.status)],
-          ['   Progress ', DEFAULT_PANEL_PALETTE.label],
-          [`${pct}%`, pct === 100 ? DEFAULT_PANEL_PALETTE.good : DEFAULT_PANEL_PALETTE.info],
-          ['   Items ', DEFAULT_PANEL_PALETTE.label],
-          [`${done}/${total}`, DEFAULT_PANEL_PALETTE.value],
+          ['   ', C.label],
+          [`${done}/${total} items`, C.value],
+          ['  ', C.label],
+          [`${pct}%`, pct === 100 ? C.good : C.info],
         ]),
+        buildMeterLine(width, Math.round((pct / 100) * meterWidth), meterWidth, {
+          filled: pct === 100 ? C.good : C.info,
+          empty: C.empty,
+          label: C.label,
+        }, { prefix: ' Progress ', suffix: ` ${pct}% ` }),
+        buildKeyValueLine(width, [
+          { label: 'in progress', value: String(inProgress), valueColor: inProgress > 0 ? C.active : C.dim },
+          { label: 'blocked', value: String(blockedCount), valueColor: blockedCount > 0 ? C.blocked : C.dim },
+          { label: 'failed', value: String(failed), valueColor: failed > 0 ? C.bad : C.dim },
+        ], C),
+        nextItem
+          ? buildPanelLine(width, [
+              [' Next ', C.label],
+              [STATUS_ICON[nextItem.status], STATUS_FG[nextItem.status]],
+              [' ', C.label],
+              [truncateDisplay(nextItem.description, Math.max(8, width - 9)), C.value],
+            ])
+          : buildPanelLine(width, [
+              [' Next ', C.label],
+              [failed > 0 ? 'review failed steps' : blockedCount > 0 ? 'unblock dependencies' : 'plan complete',
+                failed > 0 ? C.bad : blockedCount > 0 ? C.blocked : C.good],
+            ]),
       ],
     };
 
+    const historyBanner: PanelWorkspaceSection | null = isHistorical ? {
+      lines: [
+        buildPanelLine(width, [
+          [' Viewing history ', C.warn],
+          [plan.status.toUpperCase(), this.statusColor(plan.status)],
+          ['  —  press a to return to the live plan', C.dim],
+        ]),
+      ],
+    } : null;
+
+    const detailSection = this.buildDetailSection(width);
+    const footerLines = this.footerLines(width);
+
     const planSection = resolveScrollablePanelSection(width, height, {
       intro: plan.title,
-      footerLines: [
-        buildPanelLine(width, [[' Up/Down', DEFAULT_PANEL_PALETTE.info], [' navigate', DEFAULT_PANEL_PALETTE.dim]]),
-      ],
-      palette: DEFAULT_PANEL_PALETTE,
-      beforeSections: [summary],
+      footerLines,
+      palette: C,
+      beforeSections: historyBanner ? [historyBanner, summary] : [summary],
+      afterSections: detailSection ? [detailSection] : [],
       section: {
         title: 'Execution Plan',
         scrollableLines: planLines,
         selectedIndex: selectedLineIndex,
         scrollOffset: this.scrollOffset,
-        minRows: 8,
+        minRows: 6,
+        appendWindowSummary: { dimColor: C.dim },
       },
     });
     this.scrollOffset = planSection.scrollOffset;
@@ -190,18 +583,57 @@ export class PlanDashboardPanel extends BasePanel {
       title: ` Plan Dashboard`,
       intro: plan.title,
       sections: [
+        ...(historyBanner ? [historyBanner] : []),
         summary,
         planSection.section,
+        ...(detailSection ? [detailSection] : []),
       ],
-      footerLines: [
-        buildPanelLine(width, [[' Up/Down', DEFAULT_PANEL_PALETTE.info], [' navigate', DEFAULT_PANEL_PALETTE.dim]]),
-      ],
-      palette: DEFAULT_PANEL_PALETTE,
+      footerLines,
+      palette: C,
     });
   }
 
+  private buildDetailSection(width: number): PanelWorkspaceSection | null {
+    const item = this.selectedNavItem();
+    if (!item) return null;
+    const blocked = this.blockedItemIds.has(item.id);
+    const lines: Line[] = [
+      buildPanelLine(width, [
+        [' ', C.label],
+        [STATUS_ICON[item.status], STATUS_FG[item.status]],
+        [' ', C.label],
+        [truncateDisplay(item.description, Math.max(8, width - 4)), C.value],
+      ]),
+      buildKeyValueLine(width, [
+        { label: 'phase', value: item.phase, valueColor: C.phase },
+        { label: 'status', value: blocked ? 'blocked' : item.status.replace(/_/g, ' '), valueColor: blocked ? C.blocked : STATUS_FG[item.status] },
+        ...(item.agentId ? [{ label: 'agent', value: item.agentId, valueColor: C.info }] : []),
+      ], C),
+    ];
+    if (item.dependencies && item.dependencies.length > 0) {
+      lines.push(buildPanelLine(width, [
+        [' depends on ', C.label],
+        [truncateDisplay(item.dependencies.join(', '), Math.max(8, width - 13)), blocked ? C.blocked : C.dim],
+      ]));
+    }
+    return { title: 'Selected Step', lines };
+  }
+
+  private footerLines(width: number): Line[] {
+    const hints: Array<{ keys: string; label: string }> = [
+      { keys: this.totalRows > 0 ? `${this.selectedIndex + 1}/${this.totalRows}` : '0/0', label: 'step' },
+      { keys: '↑/↓', label: 'navigate' },
+      { keys: 'Home/End', label: 'jump' },
+      { keys: 'h', label: 'history' },
+    ];
+    const item = this.selectedNavItem();
+    if (item?.agentId) hints.push({ keys: 'Enter', label: 'inspect agent' });
+    if (this.viewingPlanId !== null) hints.push({ keys: 'a', label: 'back to active' });
+    return [buildKeyboardHints(width, hints, C)];
+  }
+
   // --------------------------------------------------------------------------
-  // Header — title + overall completion percentage
+  // Phase header — title + progress meter
   // --------------------------------------------------------------------------
 
   private renderPhaseHeaderLine(phase: string, items: PlanItem[], width: number): Line {
@@ -212,21 +644,20 @@ export class PlanDashboardPanel extends BasePanel {
     const active = items.some((i) => i.status === 'in_progress');
     const failed = items.some((i) => i.status === 'failed');
 
-    const phaseFg = failed ? '#ef4444' : active ? '#00ffff' : done === total ? '#22c55e' : '250';
+    const phaseFg = failed ? C.failed : active ? C.active : done === total ? C.complete : C.phase;
 
     const barW = 8;
     const filledB = total > 0 ? Math.round((done / total) * barW) : 0;
-    const bar = '#'.repeat(filledB) + '-'.repeat(barW - filledB);
-
-    const progressText = `[${bar}] ${done}/${total}`;
-    const phaseText = ` > ${phase}`;
-    const spacer = Math.max(1, width - phaseText.length - progressText.length - 1);
-    return buildPanelLine(width, [
-      [phaseText, phaseFg],
-      [' '.repeat(spacer), phaseFg],
-      [progressText, phaseFg],
-      [' ', phaseFg],
-    ]);
+    const progressText = ` ${done}/${total}`;
+    const label = truncateDisplay(phase, Math.max(4, width - barW - progressText.length - 6));
+
+    return buildSelectablePanelLine(width, [
+      { text: ` ${active ? '▸' : '▪'} `, fg: phaseFg, bold: true },
+      { text: label, fg: phaseFg, bold: true },
+      { text: '  ', fg: C.dim },
+      { text: '▰'.repeat(filledB) + '▱'.repeat(barW - filledB), fg: phaseFg },
+      { text: progressText, fg: C.dim },
+    ], { fillBg: C.sectionBg });
   }
 
   // --------------------------------------------------------------------------
@@ -240,35 +671,37 @@ export class PlanDashboardPanel extends BasePanel {
     width: number,
   ): Line {
     const icon = STATUS_ICON[item.status];
-    const fg = isBlocked ? '238' : STATUS_FG[item.status];
-    const dim = item.status === 'skipped' || isBlocked;
+    const fg = isBlocked ? C.blocked : STATUS_FG[item.status];
+    const dim = item.status === 'skipped';
 
     // Indent blocked items to visually signal they depend on others
-    const indent = isBlocked ? '      ' : '   ';
-    const selectedMark = isSelected ? '▸' : ' ';
-
-    let text = `${selectedMark}${indent}${icon} ${item.description}`;
-
-    // Append agent ID for in-progress and complete items
-    if (item.agentId && (item.status === 'in_progress' || item.status === 'complete')) {
-      text += ` [${item.agentId}]`;
-    }
-
-    // Append dependency note for blocked items (first unmet dep description)
-    if (isBlocked && item.dependencies && item.dependencies.length > 0) {
-      text += ' (blocked)';
-    }
-
-    return buildPanelLine(width, [[text, fg, isSelected ? '#1e293b' : undefined]]);
+    const indent = isBlocked ? '     ' : '  ';
+    const agentTag = item.agentId && (item.status === 'in_progress' || item.status === 'complete')
+      ? ` [${item.agentId}]`
+      : '';
+    const blockedTag = isBlocked ? '  ⊘ blocked' : '';
+    const reserve = indent.length + 2 + agentTag.length + blockedTag.length;
+    const desc = truncateDisplay(item.description, Math.max(6, width - reserve - 2));
+
+    return buildSelectablePanelLine(width, [
+      { text: `${indent}${icon} `, fg, dim, bold: item.status === 'in_progress' },
+      { text: desc, fg, dim },
+      { text: agentTag, fg: C.info },
+      { text: blockedTag, fg: C.blocked },
+    ], {
+      selected: isSelected,
+      selectedBg: C.selectBg,
+      leadingMarker: '▸',
+    });
   }
 
   private statusColor(status: ExecutionPlan['status']): string {
     return status === 'complete'
-      ? DEFAULT_PANEL_PALETTE.good
+      ? C.good
       : status === 'failed'
-      ? DEFAULT_PANEL_PALETTE.bad
+      ? C.bad
       : status === 'active'
-      ? DEFAULT_PANEL_PALETTE.info
-      : DEFAULT_PANEL_PALETTE.dim;
+      ? C.info
+      : C.dim;
   }
 }