@pellux/goodvibes-tui 0.26.0 → 0.28.0

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));

package/src/panels/panel-list-panel.ts

@@ -30,7 +30,7 @@ import {
   resolvePrimaryScrollableSection,
   type PanelWorkspaceSection,
 } from './polish.ts';
-import { truncateDisplay } from '../utils/terminal-width.ts';
+import { fitDisplay, truncateDisplay } from '../utils/terminal-width.ts';
 import { wrapWithHangingIndent } from '../renderer/text-layout.ts';
 import {
   getPanelSearchFocusTransition,
@@ -78,11 +78,14 @@ const CATEGORY_LABELS: Record<PanelCategory, string> = {
 const NAME_COL_WIDTH = 22;
 const PREFIX_WIDTH = 4; // arrow + dot + space + space
 
-/** A flat entry in the navigable list — either a category header or a panel row. */
+/** A flat entry in the navigable list — either a section header or a panel row. */
 type ListEntry =
-  | { kind: 'header'; category: PanelCategory }
+  | { kind: 'header'; label: string }
   | { kind: 'panel'; reg: PanelRegistration };
 
+/** Number of most-recently-opened panels to surface in the Recent group. */
+const RECENT_LIMIT = 5;
+
 function panelPlacementMarker(options: {
   isTopOpen: boolean;
   isBottomOpen: boolean;
@@ -323,7 +326,7 @@ export class PanelListPanel extends BasePanel {
     const topIds = new Set(pm.getTopPane().panels.map(p => p.id));
     const bottomIds = new Set(pm.getBottomPane().panels.map(p => p.id));
     const focusedPane = pm.getFocusedPane();
-    const footerLines = [buildPanelLine(width, [[` [${this._selectedIndex + 1}/${panelEntries.length}] ↑/↓ nav  Enter open  T/B place  M move  S split  Tab focus`.slice(0, width), C.hint]])];
+    const footerLines = [buildPanelLine(width, [[truncateDisplay(` [${this._selectedIndex + 1}/${panelEntries.length}] ↑/↓ nav  Enter open  T/B place  M move  S split  Tab focus`, width), C.hint]])];
     const postureLines: Line[] = [
       buildKeyValueLine(width, [
         { label: 'visible panels', value: String(pm.getAllOpen().length), valueColor: pm.getAllOpen().length > 0 ? C.name : C.dim },
@@ -345,10 +348,10 @@ export class PanelListPanel extends BasePanel {
     let flatPanelIndex = 0;
     for (const entry of entries) {
       if (entry.kind === 'header') {
-        const label = ` ── ${CATEGORY_LABELS[entry.category]} ${'─'.repeat(Math.max(0, width - 6 - CATEGORY_LABELS[entry.category].length))}`;
+        const label = ` ── ${entry.label} ${'─'.repeat(Math.max(0, width - 6 - entry.label.length))}`;
         renderedBlocks.push({
           entry,
-          lines: [buildPanelLine(width, [[label.slice(0, width), C.category, C.categoryBg]])],
+          lines: [buildPanelLine(width, [[truncateDisplay(label, width), C.category, C.categoryBg]])],
         });
       } else {
         const flatIdx = flatPanelIndex++;
@@ -358,17 +361,23 @@ export class PanelListPanel extends BasePanel {
         const dot = isTopOpen || isBottomOpen ? '●' : '○';
         const dotColor = isTopOpen || isBottomOpen ? C.openDot : C.closedDot;
         const nameColor = isSelected ? C.selected : C.name;
-        const nameStr = entry.reg.name.padEnd(NAME_COL_WIDTH, ' ').slice(0, NAME_COL_WIDTH);
+        const nameStr = fitDisplay(entry.reg.name, NAME_COL_WIDTH);
         const descStartCol = PREFIX_WIDTH + NAME_COL_WIDTH + 1;
         const descWidth = Math.max(1, width - descStartCol);
         const descLines = wrapPanelDescription(entry.reg.description, descWidth, 2);
         const placement = panelPlacementMarker({ isTopOpen, isBottomOpen, focusedPane });
+        // When searching, the flat result list loses its category grouping — so
+        // tag each result with a dim [Category] so the origin stays discoverable.
+        const categoryTag = this._query
+          ? `[${CATEGORY_LABELS[entry.reg.category]}] `
+          : '';
         const blockLines: Line[] = [
           buildPanelListRow(width, [
             { text: dot, fg: dotColor },
             { text: placement.text, fg: placement.color },
             { text: ' ', fg: C.dim },
             { text: `${nameStr} `, fg: nameColor },
+            { text: categoryTag, fg: C.category },
             { text: descLines[0] ?? '', fg: C.desc },
           ], C, { selected: isSelected, selectedBg: C.selectedBg, markerColor: C.selIcon }),
         ];
@@ -443,6 +452,22 @@ export class PanelListPanel extends BasePanel {
     const q = this._query.toLowerCase();
     const entries: ListEntry[] = [];
 
+    // Recent group (browse mode only): the most-recently-opened panels, newest
+    // first, so frequently used panels are one keystroke away.
+    if (!q) {
+      const byId = new Map(manager.getRegisteredTypes().map((r) => [r.id, r]));
+      const recent: PanelRegistration[] = [];
+      for (const id of manager.getRecentlyOpened()) {
+        const reg = byId.get(id);
+        if (reg) recent.push(reg);
+        if (recent.length >= RECENT_LIMIT) break;
+      }
+      if (recent.length > 0) {
+        entries.push({ kind: 'header', label: 'Recent' });
+        for (const reg of recent) entries.push({ kind: 'panel', reg });
+      }
+    }
+
     for (const cat of CATEGORY_ORDER) {
       const regs = byCategory.get(cat) ?? [];
       const filtered = q
@@ -456,7 +481,7 @@ export class PanelListPanel extends BasePanel {
 
       if (filtered.length === 0) continue;
 
-      entries.push({ kind: 'header', category: cat });
+      entries.push({ kind: 'header', label: CATEGORY_LABELS[cat] });
       for (const reg of filtered) {
         entries.push({ kind: 'panel', reg });
       }

package/src/panels/panel-manager.ts

@@ -42,6 +42,22 @@ export class PanelManager {
   // Cache for getWorkspaceTabs() — invalidated on every panel lifecycle event
   private _cachedWorkspaceTabs: readonly WorkspaceTab[] | null = null;
 
+  // Most-recently-opened panel ids (front = newest), for the picker's "Recent"
+  // group. Session-scoped; capped to keep it a short list.
+  private _recentlyOpened: string[] = [];
+  private static readonly RECENT_CAP = 8;
+
+  /** Record a panel id as most-recently-opened (front of the ring, deduped). */
+  private _recordRecent(panelId: string): void {
+    this._recentlyOpened = [panelId, ...this._recentlyOpened.filter((id) => id !== panelId)]
+      .slice(0, PanelManager.RECENT_CAP);
+  }
+
+  /** Most-recently-opened panel ids, newest first. */
+  getRecentlyOpened(): readonly string[] {
+    return this._recentlyOpened;
+  }
+
   // -------------------------------------------------------------------------
   // Registration
   // -------------------------------------------------------------------------
@@ -88,6 +104,7 @@ export class PanelManager {
   }
 
   open(panelId: string, pane?: 'top' | 'bottom'): Panel {
+    this._recordRecent(panelId);
     const existingPane = this._findPaneOf(panelId);
     if (existingPane) {
       this._activateByIdInPane(panelId, existingPane);
@@ -285,10 +302,11 @@ export class PanelManager {
           this.bottomPane.panels.push(panel);
           this.bottomPane.activeIndex = 0;
         } else {
-          // Open a default panel in bottom pane
-          const firstType = this.registry[0];
-          if (firstType) {
-            this.open(firstType.id, 'bottom');
+          // Open a predictable default panel in the bottom pane (the panel list),
+          // rather than an arbitrary registration-order-dependent panel.
+          const defaultPanel = this._getRegistration('panel-list') ?? this.registry[0];
+          if (defaultPanel) {
+            this.open(defaultPanel.id, 'bottom');
           }
         }
       }
@@ -460,6 +478,7 @@ export class PanelManager {
     this.bottomPane = { panels: [], activeIndex: 0 };
     this.retainedPanels.clear();
     this.registry = [];
+    this._recentlyOpened = [];
     this._focusedPane = 'top';
     this._bottomPaneVisible = false;
     this._visible = false;

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

@@ -1,16 +1,37 @@
 import type { Line } from '../types/grid.ts';
 import type { ExecutionPlan, 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 {
   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,11 +45,11 @@ 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,
 };
 
 // ---------------------------------------------------------------------------
@@ -41,6 +62,9 @@ export class PlanDashboardPanel extends BasePanel {
 
   // Flat list of navigable row indices (set during render)
   private totalRows = 0;
+  // Item flat-list parallel to navigable rows (set during render) for detail.
+  private navItems: PlanItem[] = [];
+  private blockedItemIds = new Set<string>();
   private readonly planManager: PlanDashboardQuery;
 
   constructor(planManager: PlanDashboardQuery) {
@@ -71,6 +95,19 @@ 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;
     }
     return false;
   }
@@ -91,13 +128,15 @@ 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,
+              'No plan is being executed yet. Create one and its phases, progress, blocked steps, and next action surface here.',
+              [
+                { command: '/plan', summary: 'create an execution plan to populate this dashboard' },
+              ],
+              C,
             ),
           },
         ],
-        palette: DEFAULT_PANEL_PALETTE,
+        palette: C,
       });
     }
     return this.renderPlan(plan, width, height);
@@ -105,7 +144,7 @@ export class PlanDashboardPanel extends BasePanel {
   }
 
   // --------------------------------------------------------------------------
-  // Empty state
+  // Plan render
   // --------------------------------------------------------------------------
 
   private renderPlan(plan: ExecutionPlan, width: number, height: number): Line[] {
@@ -126,9 +165,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 +183,86 @@ 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 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,
+      footerLines,
+      palette: C,
       beforeSections: [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;
@@ -192,16 +273,51 @@ export class PlanDashboardPanel extends BasePanel {
       sections: [
         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.navItems[this.selectedIndex];
+    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[] {
+    return [
+      buildKeyboardHints(width, [
+        { keys: this.totalRows > 0 ? `${this.selectedIndex + 1}/${this.totalRows}` : '0/0', label: 'step' },
+        { keys: '↑/↓', label: 'navigate' },
+        { keys: 'Home/End', label: 'jump' },
+      ], C),
+    ];
+  }
+
   // --------------------------------------------------------------------------
-  // Header — title + overall completion percentage
+  // Phase header — title + progress meter
   // --------------------------------------------------------------------------
 
   private renderPhaseHeaderLine(phase: string, items: PlanItem[], width: number): Line {
@@ -212,21 +328,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 +355,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;
   }
 }