@pellux/goodvibes-tui 0.27.0 → 0.28.0

package/src/panels/thinking-panel.ts

@@ -16,7 +16,7 @@ import {
   DEFAULT_PANEL_PALETTE,
   type PanelWorkspaceSection,
 } from './polish.ts';
-import { truncateDisplay } from '../utils/terminal-width.ts';
+import { truncateDisplay, wrapText } from '../utils/terminal-width.ts';
 
 const C = extendPalette(DEFAULT_PANEL_PALETTE, {
   // Domain-specific reasoning tones (purples) and the active-stream cyan have no
@@ -34,23 +34,6 @@ interface ReasoningBlock {
   collapsed: boolean;
 }
 
-function wrapLines(text: string, width: number): string[] {
-  const result: string[] = [];
-  const raw = text.split('\n');
-  for (const line of raw) {
-    if (line.length <= width) {
-      result.push(line);
-    } else {
-      let start = 0;
-      while (start < line.length) {
-        result.push(line.slice(start, start + width));
-        start += width;
-      }
-    }
-  }
-  return result;
-}
-
 type FlatRow = { kind: 'header'; blockIndex: number; text: string } | { kind: 'content'; text: string };
 
 export class ThinkingPanel extends BasePanel {
@@ -121,8 +104,8 @@ export class ThinkingPanel extends BasePanel {
             lines: buildEmptyState(
               width,
               ' No reasoning content yet',
-              'When the model emits thinking or reasoning deltas, they accumulate here in expandable blocks.',
-              [],
+              'When the model emits thinking or reasoning deltas during a turn, they accumulate here in expandable per-turn blocks.',
+              [{ command: '/chat <prompt>', summary: 'start a turn with a reasoning-capable model to stream thinking here' }],
               DEFAULT_PANEL_PALETTE,
             ),
           },
@@ -152,12 +135,30 @@ export class ThinkingPanel extends BasePanel {
       ],
     };
 
-    const selectedRow = flat[this.cursorIndex];
+    // Resolve the reasoning block that owns the cursor row (walk back to its
+    // header) so the detail block describes the actual turn, not just row kind.
+    let selectedBlockIndex = -1;
+    for (let i = Math.min(this.cursorIndex, flat.length - 1); i >= 0; i--) {
+      const row = flat[i];
+      if (row?.kind === 'header') { selectedBlockIndex = row.blockIndex; break; }
+    }
+    const selectedBlock = selectedBlockIndex >= 0 ? this.blocks[selectedBlockIndex] : undefined;
     const selectedSection: PanelWorkspaceSection = {
       title: 'Selected',
-      lines: [
-        buildPanelLine(width, [[' Row Type ', DEFAULT_PANEL_PALETTE.label], [selectedRow?.kind ?? 'none', DEFAULT_PANEL_PALETTE.value]]),
-      ],
+      lines: selectedBlock
+        ? [
+            buildPanelLine(width, [
+              [' Turn ', DEFAULT_PANEL_PALETTE.label],
+              [String(selectedBlock.turnId), DEFAULT_PANEL_PALETTE.value],
+              ['   State ', DEFAULT_PANEL_PALETTE.label],
+              [selectedBlock.active ? 'streaming' : 'complete', selectedBlock.active ? DEFAULT_PANEL_PALETTE.warn : DEFAULT_PANEL_PALETTE.good],
+              ['   View ', DEFAULT_PANEL_PALETTE.label],
+              [selectedBlock.collapsed ? 'collapsed' : 'expanded', DEFAULT_PANEL_PALETTE.info],
+              ['   Chars ', DEFAULT_PANEL_PALETTE.label],
+              [String(selectedBlock.content.length), DEFAULT_PANEL_PALETTE.dim],
+            ]),
+          ]
+        : [buildPanelLine(width, [[' No block selected', DEFAULT_PANEL_PALETTE.dim]])],
     };
 
     const reasoningSection = resolveScrollablePanelSection(width, height, {
@@ -212,7 +213,7 @@ export class ThinkingPanel extends BasePanel {
       const turnLabel = `Turn ${block.turnId}${block.active ? ' (streaming)' : ''}`;
       rows.push({ kind: 'header', blockIndex: i, text: turnLabel });
       if (!block.collapsed) {
-        const wrapped = wrapLines(block.content || '(empty)', Math.max(1, width - 2));
+        const wrapped = wrapText(block.content || '(empty)', Math.max(1, width - 2));
         for (const line of wrapped) {
           rows.push({ kind: 'content', text: line });
         }

package/src/panels/token-budget-panel.ts

@@ -8,7 +8,10 @@ import type { SessionMemoryQuery } from '../runtime/ui-service-queries.ts';
 import {
   buildEmptyState,
   buildGuidanceLine,
+  buildKeyboardHints,
+  buildMeterLine,
   buildStyledPanelLine,
+  buildTable,
   buildPanelWorkspace,
   resolveScrollablePanelSection,
   DEFAULT_PANEL_PALETTE,
@@ -237,6 +240,12 @@ export class TokenBudgetPanel extends BasePanel {
       const priorSections = [...sections];
       const turnsSection = resolveScrollablePanelSection(width, height, {
         intro: 'Live context pressure, session token composition, cache usage, and recent turn deltas.',
+        footerLines: [
+          buildKeyboardHints(width, [
+            { keys: '/compact', label: 'compress context' },
+            { keys: '/clear', label: 'reset session' },
+          ], DEFAULT_PANEL_PALETTE),
+        ],
         palette: DEFAULT_PANEL_PALETTE,
         beforeSections: priorSections,
         section: {
@@ -273,6 +282,12 @@ export class TokenBudgetPanel extends BasePanel {
       title: ' Token Budget',
       intro: 'Live context pressure, session token composition, cache usage, and recent turn deltas.',
       sections,
+      footerLines: [
+        buildKeyboardHints(width, [
+          { keys: '/compact', label: 'compress context' },
+          { keys: '/clear', label: 'reset session' },
+        ], DEFAULT_PANEL_PALETTE),
+      ],
       palette: DEFAULT_PANEL_PALETTE,
     });
     });
@@ -398,12 +413,12 @@ export class TokenBudgetPanel extends BasePanel {
     const suffix = ` ${fmtTok(this.lastInputTokens)}/${fmtTok(this.contextWindow)} (${pctInt}%)${warnSuffix}`;
     const BAR_W = Math.max(8, width - label.length - suffix.length - 2);
     const filled = Math.round(pct * BAR_W);
-    lines.push(buildStyledPanelLine(width, [
-      { text: label, fg: C.label },
-      { text: '#'.repeat(filled), fg: barColor, dim: pct < WARN_YELLOW },
-      { text: '.'.repeat(Math.max(0, BAR_W - filled)), fg: C.barBg, dim: pct < WARN_YELLOW },
-      { text: suffix, fg: barColor, dim: pct < WARN_YELLOW },
-    ]));
+    // Context fill is the headline metric — render it with the shared meter
+    // primitive so the bar glyphs and width handling match every other panel.
+    lines.push(buildMeterLine(width, filled, BAR_W,
+      { filled: barColor, empty: C.barBg, label: C.label },
+      { prefix: label, suffix },
+    ));
     return lines;
   }
 
@@ -436,41 +451,37 @@ export class TokenBudgetPanel extends BasePanel {
 
   /** Last N turns table: turn#, in, out, CR, CW, total. */
   private renderTurnHistory(width: number, maxRows: number): Line[] {
-    const lines: Line[] = [];
-
-    // Column headers
-    const colLine = createEmptyLine(width);
-    const headers = ['  #', '    Input', '   Output', '  CR', '  CW', '   Total'];
-    const cols = [3, 9, 9, 6, 6, 9];
-    let hx = 0;
-    for (let i = 0; i < headers.length; i++) {
-      const h = headers[i]!;
-      for (const ch of h.slice(0, cols[i]!)) {
-        if (hx >= width) break;
-        colLine[hx++] = createStyledCell(ch, { fg: C.turnHeader, dim: true });
-      }
-    }
-    lines.push(colLine);
-
     const available = Math.max(0, maxRows - 1); // minus col header
     const toShow = this.turnHistory.slice(-Math.max(0, available));
 
-    toShow.forEach((t, i) => {
-      if (lines.length >= maxRows) return;
-      const turnNum = this.turnHistory.length - toShow.length + i + 1;
-      const total = t.input + t.output + t.cacheRead + t.cacheWrite;
-      const cells: Array<[string, string]> = [
-        [String(turnNum).padStart(3), C.dim],
-        [fmtTok(t.input).padStart(9),      C.input],
-        [fmtTok(t.output).padStart(9),     C.output],
-        [fmtTok(t.cacheRead).padStart(6),  C.cacheRead],
-        [fmtTok(t.cacheWrite).padStart(6), C.cacheWrite],
-        [fmtTok(total).padStart(9),        C.value],
-      ];
-      lines.push(buildStyledPanelLine(width, cells.map(([val, color]) => ({ text: val, fg: color }))));
-    });
-
-    return lines;
+    // Width-aware aligned table via the shared primitive (replaces manual
+    // per-cell column math, which miscounts on wide glyphs).
+    return buildTable(
+      width,
+      [
+        { label: '#', width: 4, align: 'right' },
+        { label: 'Input', width: 9, align: 'right' },
+        { label: 'Output', width: 9, align: 'right' },
+        { label: 'CR', width: 7, align: 'right' },
+        { label: 'CW', width: 7, align: 'right' },
+        { label: 'Total', align: 'right' },
+      ],
+      toShow.map((t, i) => {
+        const turnNum = this.turnHistory.length - toShow.length + i + 1;
+        const total = t.input + t.output + t.cacheRead + t.cacheWrite;
+        return {
+          cells: [
+            { text: String(turnNum), fg: C.dim },
+            { text: fmtTok(t.input), fg: C.input },
+            { text: fmtTok(t.output), fg: C.output },
+            { text: fmtTok(t.cacheRead), fg: C.cacheRead },
+            { text: fmtTok(t.cacheWrite), fg: C.cacheWrite },
+            { text: fmtTok(total), fg: C.value },
+          ],
+        };
+      }),
+      { ...DEFAULT_PANEL_PALETTE, label: C.turnHeader },
+    );
   }
 
   /** Paint a plain text string into a new Line. */

package/src/panels/tool-inspector-panel.ts

@@ -17,6 +17,7 @@ import {
   type PanelWorkspaceSection,
 } from './polish.ts';
 import { truncateDisplay } from '../utils/terminal-width.ts';
+import { formatDuration } from '../utils/format-duration.ts';
 
 // Panel-specific accents only; shared tones come from DEFAULT_PANEL_PALETTE so
 // theme changes propagate. selectedBg->selectBg, errorFg->bad are shared keys.
@@ -56,14 +57,12 @@ function shortTime(ms: number): string {
 }
 
 function formatMs(ms: number): string {
-  if (ms < 1000) return `${ms}ms`;
-  if (ms < 60000) return `${(ms / 1000).toFixed(1)}s`;
-  return `${Math.floor(ms / 60000)}m${Math.floor((ms % 60000) / 1000)}s`;
+  return formatDuration(ms);
 }
 
 function truncateJson(val: unknown, maxLen = 120): string {
   const s = JSON.stringify(val) ?? 'null';
-  return s.length > maxLen ? s.slice(0, maxLen - 1) + '\u2026' : s;
+  return truncateDisplay(s, maxLen);
 }
 
 function summarizeResult(result: unknown): string | undefined {
@@ -73,7 +72,7 @@ function summarizeResult(result: unknown): string | undefined {
   const record = result as Record<string, unknown>;
   if (typeof record.preview === 'string' && record.preview.trim()) {
     const compact = record.preview.replace(/\s+/g, ' ').trim();
-    return compact.length > 72 ? `${compact.slice(0, 69)}\u2026` : compact;
+    return truncateDisplay(compact, 72);
   }
   if (typeof record.kind === 'string' && typeof record.byteSize === 'number') {
     return `${record.kind} (${record.byteSize}B)`;
@@ -142,22 +141,23 @@ export class ToolInspectorPanel extends BasePanel {
     if (height <= 0 || width <= 0) return [];
 
     const running = this.records.filter(r => r.endMs === undefined).length;
+    const distinctTools = new Set(this.records.map((r) => r.tool)).size;
     const filterLabel = this.filterMode === 'all' ? '' : ` [${this.filterMode}]`;
     const title = ` Tools [${this.records.length} calls${running > 0 ? `, ${running} running` : ''}]${filterLabel}`;
-    const footerLines = [
-      buildPanelLine(width, [
-        [' Up/Down', DEFAULT_PANEL_PALETTE.info],
-        [' scroll', DEFAULT_PANEL_PALETTE.dim],
-        ['   Enter', DEFAULT_PANEL_PALETTE.info],
-        [' expand', DEFAULT_PANEL_PALETTE.dim],
-        ['   f', DEFAULT_PANEL_PALETTE.info],
-        [' filter', DEFAULT_PANEL_PALETTE.dim],
-        ['   c', DEFAULT_PANEL_PALETTE.info],
-        [' clear', DEFAULT_PANEL_PALETTE.dim],
-        ['   g', DEFAULT_PANEL_PALETTE.info],
-        [' end', DEFAULT_PANEL_PALETTE.dim],
-      ]),
+    // Context-aware footer: only advertise keys that do something in the current
+    // state — filter needs >1 tool, clear/end need at least one call.
+    const footerSegments: Array<[string, string, string?]> = [
+      [' Up/Down', DEFAULT_PANEL_PALETTE.info], [' scroll', DEFAULT_PANEL_PALETTE.dim],
+      ['   Enter', DEFAULT_PANEL_PALETTE.info], [' expand', DEFAULT_PANEL_PALETTE.dim],
     ];
+    if (distinctTools > 1) {
+      footerSegments.push(['   f', DEFAULT_PANEL_PALETTE.info], [' filter', DEFAULT_PANEL_PALETTE.dim]);
+    }
+    if (this.records.length > 0) {
+      footerSegments.push(['   c', DEFAULT_PANEL_PALETTE.info], [' clear', DEFAULT_PANEL_PALETTE.dim]);
+      footerSegments.push(['   g', DEFAULT_PANEL_PALETTE.info], [this.autoScroll ? ' end (live)' : ' jump to end', DEFAULT_PANEL_PALETTE.dim]);
+    }
+    const footerLines = [buildPanelLine(width, footerSegments)];
 
     const flat = this._getFlat();
 
@@ -174,9 +174,15 @@ export class ToolInspectorPanel extends BasePanel {
             title: 'Calls',
             lines: buildEmptyState(
               width,
-              ' No tool calls yet',
-              'Tool executions appear here as the agent works. Expand a call to inspect its arguments and result payload.',
-              [],
+              this.records.length > 0 && this.filterMode !== 'all'
+                ? ` No "${this.filterMode}" calls`
+                : ' No tool calls yet',
+              this.records.length > 0 && this.filterMode !== 'all'
+                ? 'The active tool filter hides every recorded call.'
+                : 'Tool executions appear here as the agent works. Expand a call to inspect its arguments and result payload.',
+              this.records.length > 0 && this.filterMode !== 'all'
+                ? [{ command: 'f', summary: 'cycle the tool filter back to all calls' }]
+                : [{ command: '/spawn <task>', summary: 'run an agent to populate the tool-call timeline' }],
               DEFAULT_PANEL_PALETTE,
             ),
           },

package/src/panels/types.ts

@@ -1,5 +1,20 @@
 import type { Line } from '../types/grid.ts';
+import type { StatusState } from '../renderer/status-glyphs.ts';
 import type { ComponentResourceContract, ComponentHealthState } from '../runtime/perf/panel-contracts.ts';
+// Routed through the `@/` alias (not `./panel-manager.ts`) so this foundational
+// types module stays a leaf in the relative-import graph the architecture
+// cycle-checker walks. Type-only, erased at runtime — no real dependency edge.
+import type { PanelManager } from '@/panels/panel-manager.ts';
+
+/**
+ * Context passed to a panel's `handlePanelIntegrationAction` hook so it can
+ * drive cross-panel behavior (e.g. file-explorer opening the preview panel)
+ * without the input layer needing `instanceof` knowledge of each panel type.
+ */
+export interface PanelIntegrationContext {
+  readonly panelManager: PanelManager;
+  readonly executeCommand?: (name: string, args: string[]) => Promise<unknown>;
+}
 
 /**
  * Named logical key identifiers emitted by the input tokenizer.
@@ -67,6 +82,16 @@ export interface Panel {
   // Scroll input (optional)
   // Positive delta scrolls down; negative delta scrolls up.
   handleScroll?(deltaRows: number): boolean;
+
+  /**
+   * Cross-panel integration hook (optional). Called before the panel's own
+   * `handleInput` when a navigation/confirm key is pressed, so a panel can
+   * drive another panel (e.g. open a file in the preview panel). Return `true`
+   * to consume the key. The legacy `handlePanelIntegrationAction` router in
+   * `src/input/panel-integration-actions.ts` consults this first, then falls
+   * back to its built-in `instanceof` routing.
+   */
+  handlePanelIntegrationAction?(key: string, ctx: PanelIntegrationContext): boolean;
 }
 
 export interface PanelRegistration extends Pick<Panel, 'id' | 'name' | 'icon' | 'category'> {

package/src/panels/watchers-panel.ts

@@ -4,9 +4,11 @@ import { ScrollableListPanel } from './scrollable-list-panel.ts';
 import type { UiReadModel, UiWatchersSnapshot } from '../runtime/ui-read-models.ts';
 import { truncateDisplay } from '../utils/terminal-width.ts';
 import {
+  buildDetailBlock,
   buildEmptyState,
   buildGuidanceLine,
   buildKeyValueLine,
+  buildKeyboardHints,
   buildPanelLine,
   buildPanelWorkspace,
   DEFAULT_PANEL_PALETTE,
@@ -59,10 +61,18 @@ export class WatchersPanel extends ScrollableListPanel<WatcherEntry> {
   public constructor(readModel?: UiReadModel<UiWatchersSnapshot>) {
     super('watchers', 'Watchers', 'W', 'monitoring');
     this.showSelectionGutter = true; // I5: non-color selection affordance
+    this.filterEnabled = true;
+    this.filterLabel = 'Filter watchers';
     this.readModel = readModel;
     this.unsub = readModel ? readModel.subscribe(() => this.markDirty()) : null;
   }
 
+  protected override filterMatches(watcher: WatcherEntry, q: string): boolean {
+    return watcher.label.toLowerCase().includes(q)
+      || watcher.state.toLowerCase().includes(q)
+      || String(watcher.sourceStatus ?? '').toLowerCase().includes(q);
+  }
+
   public override onDestroy(): void {
     this.unsub?.();
   }
@@ -144,7 +154,7 @@ export class WatchersPanel extends ScrollableListPanel<WatcherEntry> {
     this.clampSelection();
     const selected = watchers[this.selectedIndex]!;
 
-    const footerLines: Line[] = [
+    const detailRows: Line[] = [
       buildPanelLine(width, [
         ['  Watcher: ', C.label],
         [selected.label, C.value],
@@ -171,23 +181,33 @@ export class WatchersPanel extends ScrollableListPanel<WatcherEntry> {
       ]),
     ];
     if (selected.degradedReason) {
-      footerLines.push(buildPanelLine(width, [
+      detailRows.push(buildPanelLine(width, [
         ['  Reason: ', C.label],
         [truncateDisplay(selected.degradedReason, Math.max(0, width - 11)), C.warn],
       ]));
     }
     if (selected.lastError) {
-      footerLines.push(buildPanelLine(width, [
+      detailRows.push(buildPanelLine(width, [
         ['  Error: ', C.label],
         [truncateDisplay(selected.lastError, Math.max(0, width - 10)), C.error],
       ]));
     }
-    footerLines.push(buildPanelLine(width, [['  Up/Down move through watchers', C.dim]]));
+
+    const hints = this.filterActive
+      ? [{ keys: 'type', label: 'filter' }, { keys: 'Enter', label: 'apply' }, { keys: 'Esc', label: 'clear' }]
+      : [
+          { keys: 'Up/Down', label: 'move' },
+          { keys: '/schedule list', label: 'consumers' },
+          { keys: '/', label: 'filter' },
+        ];
 
     return this.renderList(width, height, {
       title: 'Watchers',
       header: headerLines,
-      footer: footerLines,
+      footer: [
+        ...buildDetailBlock(width, `Watcher · ${selected.label}`, detailRows, C),
+        buildKeyboardHints(width, hints, C),
+      ],
     });
   }
 }

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

@@ -1,9 +1,33 @@
 import type { Line } from '../types/grid.ts';
-import { UIFactory } from '../renderer/ui-factory.ts';
+import { truncateDisplay } from '../utils/terminal-width.ts';
 import { ScrollableListPanel } from './scrollable-list-panel.ts';
+import {
+  buildDetailBlock,
+  buildGuidanceLine,
+  buildKeyboardHints,
+  buildKeyValueLine,
+  buildMeterLine,
+  buildPanelLine,
+  buildPanelListRow,
+  buildSummaryBlock,
+  DEFAULT_PANEL_PALETTE,
+  extendPalette,
+  type PanelPalette,
+} from './polish.ts';
 import type { WorkPlanItem, WorkPlanItemStatus, WorkPlanStore } from '../work-plans/work-plan-store.ts';
 import { summarizeError } from '@pellux/goodvibes-sdk/platform/utils';
 
+const C = extendPalette(DEFAULT_PANEL_PALETTE, {
+  pending: '#94a3b8',
+  inProgress: '#38bdf8',
+  blocked: '#f59e0b',
+  done: '#22c55e',
+  failed: '#ef4444',
+  cancelled: '#64748b',
+  accent: '#a5b4fc',
+  selectBg: '#1e293b',
+});
+
 const STATUS_LABEL: Record<WorkPlanItemStatus, string> = {
   pending: '[ ]',
   in_progress: '[>]',
@@ -14,17 +38,15 @@ const STATUS_LABEL: Record<WorkPlanItemStatus, string> = {
 };
 
 const STATUS_COLOR: Record<WorkPlanItemStatus, string> = {
-  pending: '#94a3b8',
-  in_progress: '#38bdf8',
-  blocked: '#f59e0b',
-  done: '#22c55e',
-  failed: '#ef4444',
-  cancelled: '#64748b',
+  pending: C.pending,
+  in_progress: C.inProgress,
+  blocked: C.blocked,
+  done: C.done,
+  failed: C.failed,
+  cancelled: C.cancelled,
 };
 
-function line(text: string, width: number, style: Parameters<typeof UIFactory.stringToLine>[2] = {}): Line {
-  return UIFactory.stringToLine(text.padEnd(width).slice(0, width), width, style);
-}
+const STATUS_ORDER: WorkPlanItemStatus[] = ['pending', 'in_progress', 'blocked', 'done', 'failed', 'cancelled'];
 
 function compactDate(value: number): string {
   return new Date(value).toISOString().replace('T', ' ').slice(0, 16);
@@ -48,13 +70,16 @@ export class WorkPlanPanel extends ScrollableListPanel<WorkPlanItem> {
     this.refresh();
   }
 
+  protected override getPalette(): PanelPalette {
+    return C;
+  }
+
   render(width: number, height: number): Line[] {
     this.refresh();
     return this.renderList(width, height, {
       title: 'Work Plan',
       header: this.renderHeader(width),
       footer: this.renderFooter(width),
-      emptyMessage: 'No work plan items yet',
     });
   }
 
@@ -108,10 +133,14 @@ export class WorkPlanPanel extends ScrollableListPanel<WorkPlanItem> {
     return this.items;
   }
 
+  protected override getEmptyStateMessage(): string {
+    return ' No work plan items yet';
+  }
+
   protected getEmptyStateActions(): Array<{ command: string; summary: string }> {
     return [
-      { command: '/work-plan add <title>', summary: 'add a persistent item' },
-      { command: '/work-plan list', summary: 'print the current plan' },
+      { command: '/work-plan add <title>', summary: 'add a persistent item that survives across sessions' },
+      { command: '/work-plan list', summary: 'print the current plan to the shell' },
     ];
   }
 
@@ -119,12 +148,14 @@ export class WorkPlanPanel extends ScrollableListPanel<WorkPlanItem> {
     const status = STATUS_LABEL[item.status];
     const owner = item.owner ? ` @${item.owner}` : '';
     const source = item.source ? ` (${item.source})` : '';
-    const text = `${status} ${item.title}${owner}${source}`;
-    return line(text, width, {
-      fg: selected ? '#e2e8f0' : STATUS_COLOR[item.status],
-      bg: selected ? '#1e293b' : undefined,
-      bold: selected || item.status === 'in_progress',
-    });
+    const reserve = status.length + owner.length + source.length + 4;
+    const title = truncateDisplay(item.title, Math.max(6, width - reserve));
+    return buildPanelListRow(width, [
+      { text: `${status} `, fg: STATUS_COLOR[item.status], bold: item.status === 'in_progress' },
+      { text: title, fg: selected ? C.value : C.label, bold: selected || item.status === 'in_progress' },
+      { text: owner, fg: C.accent },
+      { text: source, fg: C.dim },
+    ], C, { selected, selectedBg: C.selectBg });
   }
 
   private setSelectedStatus(status: WorkPlanItemStatus): boolean {
@@ -147,30 +178,90 @@ export class WorkPlanPanel extends ScrollableListPanel<WorkPlanItem> {
   private renderHeader(width: number): Line[] {
     const plan = this.store.getActivePlan();
     const counts = new Map<WorkPlanItemStatus, number>();
-    for (const status of Object.keys(STATUS_LABEL) as WorkPlanItemStatus[]) counts.set(status, 0);
+    for (const status of STATUS_ORDER) counts.set(status, 0);
     for (const item of plan.items) counts.set(item.status, (counts.get(item.status) ?? 0) + 1);
-    const active = this.items[this.selectedIndex];
-    const header = [
-      line(`Persistent Work Plan`, width, { fg: '#22d3ee', bold: true }),
-      line(`Project: ${plan.projectRoot}`, width, { fg: '#cbd5e1' }),
-      line(
-        `Items: ${plan.items.length}  pending ${counts.get('pending') ?? 0}  active ${counts.get('in_progress') ?? 0}  blocked ${counts.get('blocked') ?? 0}  done ${counts.get('done') ?? 0}`,
-        width,
-        { fg: '#94a3b8' },
-      ),
-      line(`Saved: ${this.store.filePath}`, width, { fg: '#64748b' }),
+
+    const total = plan.items.length;
+    const done = (counts.get('done') ?? 0) + (counts.get('cancelled') ?? 0);
+    const pct = total > 0 ? Math.round((done / total) * 100) : 0;
+    const meterWidth = Math.max(10, Math.min(26, width - 34));
+
+    const postureLines: Line[] = [
+      buildPanelLine(width, [
+        [' Project ', C.label],
+        [truncateDisplay(plan.projectRoot, Math.max(8, width - 11)), C.value],
+      ]),
+      buildMeterLine(width, Math.round((pct / 100) * meterWidth), meterWidth, {
+        filled: pct === 100 ? C.done : C.inProgress,
+        empty: C.empty,
+        label: C.label,
+      }, { prefix: ' Progress ', suffix: ` ${done}/${total} (${pct}%) ` }),
+      buildKeyValueLine(width, [
+        { label: 'pending', value: String(counts.get('pending') ?? 0), valueColor: (counts.get('pending') ?? 0) > 0 ? C.pending : C.dim },
+        { label: 'active', value: String(counts.get('in_progress') ?? 0), valueColor: (counts.get('in_progress') ?? 0) > 0 ? C.inProgress : C.dim },
+        { label: 'blocked', value: String(counts.get('blocked') ?? 0), valueColor: (counts.get('blocked') ?? 0) > 0 ? C.blocked : C.dim },
+        { label: 'done', value: String(counts.get('done') ?? 0), valueColor: (counts.get('done') ?? 0) > 0 ? C.done : C.dim },
+      ], C),
+      buildGuidanceLine(width, '/work-plan add <title>', 'append a persistent item to the active plan', C),
     ];
+
+    const header: Line[] = buildSummaryBlock(width, 'Persistent Work Plan', postureLines, C);
+
+    const active = this.items[this.selectedIndex];
     if (active) {
-      header.push(line('', width));
-      header.push(line(`Selected: ${active.id}  ${statusName(active.status)}  updated ${compactDate(active.updatedAt)}`, width, { fg: '#a5b4fc' }));
-      if (active.notes) header.push(line(`Notes: ${active.notes}`, width, { fg: '#cbd5e1' }));
+      const detailRows: Line[] = [
+        buildPanelLine(width, [
+          [' ', C.label],
+          [STATUS_LABEL[active.status], STATUS_COLOR[active.status]],
+          [' ', C.label],
+          [truncateDisplay(active.title, Math.max(8, width - 6)), C.value],
+        ]),
+        buildKeyValueLine(width, [
+          { label: 'status', value: statusName(active.status), valueColor: STATUS_COLOR[active.status] },
+          ...(active.owner ? [{ label: 'owner', value: active.owner, valueColor: C.accent }] : []),
+          { label: 'updated', value: compactDate(active.updatedAt), valueColor: C.dim },
+        ], C),
+      ];
+      if (active.source) {
+        detailRows.push(buildPanelLine(width, [[' source ', C.label], [active.source, C.info]]));
+      }
+      if (active.notes) {
+        detailRows.push(buildPanelLine(width, [
+          [' notes ', C.label],
+          [truncateDisplay(active.notes, Math.max(8, width - 8)), C.value],
+        ]));
+      }
+      header.push(...buildDetailBlock(width, 'Selected item', detailRows, C));
     }
     return header;
   }
 
   private renderFooter(width: number): Line[] {
+    const hasItem = this.items.length > 0;
+    if (!hasItem) {
+      return [
+        buildKeyboardHints(width, [
+          { keys: '↑/↓', label: 'navigate' },
+        ], C),
+      ];
+    }
     return [
-      line('Enter/Space cycle  1 pending  2 active  3 blocked  4 done  5 failed  6 cancelled  d delete  c clear done  r refresh', width, { fg: '#94a3b8' }),
+      buildKeyboardHints(width, [
+        { keys: this.items.length > 0 ? `${this.selectedIndex + 1}/${this.items.length}` : '0/0', label: 'item' },
+        { keys: 'Enter', label: 'cycle status' },
+        { keys: '1-6', label: 'set status' },
+        { keys: 'd', label: 'delete' },
+        { keys: 'c', label: 'clear done' },
+        { keys: 'r', label: 'refresh' },
+      ], C),
+      buildPanelLine(width, [
+        [' 1', C.info], [' pending  ', C.dim],
+        ['2', C.info], [' active  ', C.dim],
+        ['3', C.info], [' blocked  ', C.dim],
+        ['4', C.info], [' done  ', C.dim],
+        ['5', C.info], [' failed  ', C.dim],
+        ['6', C.info], [' cancelled', C.dim],
+      ]),
     ];
   }
 }