@pellux/goodvibes-tui 0.26.0 → 0.28.0

package/src/panels/subscription-panel.ts

@@ -1,5 +1,6 @@
 import type { Line } from '../types/grid.ts';
 import { createEmptyLine } from '../types/grid.ts';
+import { fitDisplay } from '../utils/terminal-width.ts';
 import { ScrollableListPanel } from './scrollable-list-panel.ts';
 import type { KeyName } from './types.ts';
 import type { ProviderSubscription, PendingSubscriptionLogin } from '@pellux/goodvibes-sdk/platform/config';
@@ -9,6 +10,7 @@ import type { ServiceInspectionQuery, SubscriptionAccessQuery } from '../runtime
 import {
   buildEmptyState,
   buildGuidanceLine,
+  buildKeyboardHints,
   buildKeyValueLine,
   buildPanelListRow,
   buildPanelLine,
@@ -94,7 +96,7 @@ export class SubscriptionPanel extends ScrollableListPanel<SubscriptionRow> {
   protected renderItem(row: SubscriptionRow, index: number, selected: boolean, width: number): Line {
     const status = statusOf(row);
     return buildPanelListRow(width, [
-      { text: row.provider.padEnd(16).slice(0, 16), fg: C.value },
+      { text: fitDisplay(row.provider, 16), fg: C.value },
       { text: ` ${status.toUpperCase().padEnd(12)}`, fg: statusColor(status) },
       { text: ` oauth=${row.hasOAuthConfig ? 'yes' : 'no'} `, fg: row.hasOAuthConfig ? C.info : C.dim },
       { text: ` override=${row.subscription ? 'active' : 'off'}`, fg: row.subscription ? C.good : C.dim },
@@ -177,6 +179,22 @@ export class SubscriptionPanel extends ScrollableListPanel<SubscriptionRow> {
     this.selectedIndex = Math.min(this.selectedIndex, Math.max(0, this.rows.length - 1));
   }
 
+  /** Footer hints that reflect the current view: confirm-pending vs browsing. */
+  private buildFooterHint(width: number): Line {
+    if (this.confirm) {
+      return buildKeyboardHints(width, [
+        { keys: 'y/Enter', label: 'confirm sign out' },
+        { keys: 'n/Esc', label: 'cancel' },
+      ], C);
+    }
+    const selected = this.rows[this.selectedIndex];
+    const hints: Array<{ keys: string; label: string }> = [{ keys: 'Up/Down', label: 'select' }];
+    if (selected?.subscription) hints.push({ keys: 'Enter', label: 'sign out' });
+    else if (selected?.hasOAuthConfig) hints.push({ keys: '/subscription login <p> start', label: 'sign in' });
+    hints.push({ keys: 'r', label: 'refresh' });
+    return buildKeyboardHints(width, hints, C);
+  }
+
   public render(width: number, height: number): Line[] {
     this.refresh();
     this.clampSelection();
@@ -214,7 +232,7 @@ export class SubscriptionPanel extends ScrollableListPanel<SubscriptionRow> {
         sections: [{ lines: [...summaryLines, ...emptyLines] }],
         footerLines: [
           buildGuidanceLine(width, '/subscription login <provider> start', 'start browser-based provider login from the packaged subscription surface', C),
-          buildPanelLine(width, [['  Up/Down move  Enter sign out selected provider  y/Esc confirm/cancel  r refresh', C.dim]]),
+          this.buildFooterHint(width),
         ],
         palette: C,
       });
@@ -264,7 +282,7 @@ export class SubscriptionPanel extends ScrollableListPanel<SubscriptionRow> {
       footer: [
         ...detailRows,
         buildGuidanceLine(width, '/subscription login <provider> start', 'start browser-based provider login from the packaged subscription surface', C),
-        buildPanelLine(width, [['  Up/Down move  Enter sign out selected provider  y/Esc confirm/cancel  r refresh', C.dim]]),
+        this.buildFooterHint(width),
       ],
     });
   }

package/src/panels/symbol-outline-panel.ts

@@ -3,13 +3,14 @@ import { createEmptyLine } from '../types/grid.ts';
 import type { Line } from '../types/grid.ts';
 import {
   buildEmptyState,
+  buildKeyboardHints,
   buildPanelLine,
-  buildSelectablePanelLine,
+  buildTreeRow,
   buildPanelWorkspace,
   resolveScrollablePanelSection,
   DEFAULT_PANEL_PALETTE,
+  extendPalette,
 } from './polish.ts';
-import { getDisplayWidth } from '../utils/terminal-width.ts';
 
 // ── Symbol types ────────────────────────────────────────────────────────────
 
@@ -25,6 +26,10 @@ export interface SymbolEntry {
 
 // ── Rendering constants ──────────────────────────────────────────────────────
 
+const C = extendPalette(DEFAULT_PANEL_PALETTE, {
+  selectedBg: '236',
+});
+
 /** ANSI 256-color fg codes per symbol kind. */
 const KIND_COLORS: Record<SymbolKind, string> = {
   function:  '87',   // cyan
@@ -36,15 +41,15 @@ const KIND_COLORS: Record<SymbolKind, string> = {
   const:     '245',  // grey
 };
 
-/** Short type indicator labels. */
-const KIND_LABELS: Record<SymbolKind, string> = {
-  function:  'fn ',
-  method:    'fn ',
-  class:     'cls',
-  namespace: 'ns ',
-  interface: 'int',
-  type:      'typ',
-  const:     'cst',
+/** Single-char type icon for the tree row (kept ASCII for column safety). */
+const KIND_ICONS: Record<SymbolKind, string> = {
+  function:  'ƒ',
+  method:    'ƒ',
+  class:     'C',
+  namespace: 'N',
+  interface: 'I',
+  type:      'T',
+  const:     'k',
 };
 
 /** Regex patterns to extract symbols. Each produces named groups: kind, name, line. */
@@ -188,8 +193,10 @@ export class SymbolOutlinePanel extends BasePanel {
               this.currentPath
                 ? 'The current file did not produce outline entries with the lightweight parser heuristics.'
                 : 'Load a file in the preview panel to populate its outline here.',
-              [],
-              DEFAULT_PANEL_PALETTE,
+              this.currentPath
+                ? []
+                : [{ command: '/explorer', summary: 'pick a file in the explorer, then Enter to preview and outline it' }],
+              C,
             ),
           },
         ],
@@ -201,7 +208,7 @@ export class SymbolOutlinePanel extends BasePanel {
     const outlineSection = resolveScrollablePanelSection(width, height, {
       intro: this.currentPath ? this.currentPath : 'Outline the current file into navigable symbols and lightweight parent/child structure.',
       footerLines: [
-        buildPanelLine(width, [[' Up/Down', DEFAULT_PANEL_PALETTE.info], [' navigate', DEFAULT_PANEL_PALETTE.dim], ['   Space', DEFAULT_PANEL_PALETTE.info], [' collapse', DEFAULT_PANEL_PALETTE.dim], ['   Enter', DEFAULT_PANEL_PALETTE.info], [' jump target', DEFAULT_PANEL_PALETTE.dim]]),
+        buildKeyboardHints(width, [{ keys: '↑/↓', label: 'navigate' }, { keys: 'Space/←/→', label: 'collapse' }, { keys: 'Enter', label: 'jump to source →' }], DEFAULT_PANEL_PALETTE),
       ],
       palette: DEFAULT_PANEL_PALETTE,
       beforeSections: [
@@ -291,7 +298,7 @@ export class SymbolOutlinePanel extends BasePanel {
         },
       ],
       footerLines: [
-        buildPanelLine(width, [[' Up/Down', DEFAULT_PANEL_PALETTE.info], [' navigate', DEFAULT_PANEL_PALETTE.dim], ['   Space', DEFAULT_PANEL_PALETTE.info], [' collapse', DEFAULT_PANEL_PALETTE.dim], ['   Enter', DEFAULT_PANEL_PALETTE.info], [' jump target', DEFAULT_PANEL_PALETTE.dim]]),
+        buildKeyboardHints(width, [{ keys: '↑/↓', label: 'navigate' }, { keys: 'Space/←/→', label: 'collapse' }, { keys: 'Enter', label: 'jump to source →' }], DEFAULT_PANEL_PALETTE),
       ],
       palette: DEFAULT_PANEL_PALETTE,
     });
@@ -434,10 +441,7 @@ function buildVisibleRows(symbols: SymbolEntry[], collapsed: Set<string>): Visib
   return rows;
 }
 
-/**
- * Write a string into a Line starting at column x, applying fg/bg/style.
- */
-/** Render a container header row (class / namespace). */
+/** Render a container header row (class / namespace) via the shared tree row. */
 function _renderHeader(
   width: number,
   row: Extract<VisibleRow, { kind: 'header' }>,
@@ -445,24 +449,19 @@ function _renderHeader(
   bgColor: string,
   collapsed: Set<string>,
 ): Line {
-  // Collapse indicator
   const isCollapsed = collapsed.has(row.name);
-  const chevron = row.hasChildren ? (isCollapsed ? '▸ ' : '▾ ') : '  ';
-  const lineNumStr = `:${row.line}`;
-  const kindLabel = KIND_LABELS[row.symbolKind];
-  const leadingWidth = 1 + getDisplayWidth(chevron) + getDisplayWidth(kindLabel) + 1 + getDisplayWidth(row.name);
-  const gap = Math.max(1, width - leadingWidth - getDisplayWidth(lineNumStr) - 1);
-  return buildSelectablePanelLine(width, [
-    { text: ` ${chevron}`, fg: '245' },
-    { text: kindLabel, fg: KIND_COLORS[row.symbolKind], bold: true },
-    { text: ' ', fg: isSelected ? '255' : '252' },
-    { text: row.name, fg: isSelected ? '255' : '252', bold: isSelected },
-    { text: ' '.repeat(gap), fg: DEFAULT_PANEL_PALETTE.dim },
-    { text: lineNumStr, fg: DEFAULT_PANEL_PALETTE.dim },
-  ], { selected: isSelected, selectedBg: bgColor, fillFg: isSelected ? '255' : '' });
+  return buildTreeRow(width, {
+    depth: 0,
+    label: row.name,
+    icon: KIND_ICONS[row.symbolKind],
+    expandable: row.hasChildren,
+    expanded: !isCollapsed,
+    labelColor: KIND_COLORS[row.symbolKind],
+    metadata: [{ text: `:${row.line}`, fg: DEFAULT_PANEL_PALETTE.dim }],
+  }, C, { selected: isSelected, selectedBg: bgColor || C.selectedBg });
 }
 
-/** Render a regular symbol row. */
+/** Render a regular symbol row via the shared tree row. */
 function _renderSymbol(
   width: number,
   row: Extract<VisibleRow, { kind: 'symbol' }>,
@@ -470,17 +469,11 @@ function _renderSymbol(
   bgColor: string,
 ): Line {
   const { symbol, depth } = row;
-  const indent = depth === 0 ? 1 : 3; // children indented by 3 (chevron + space)
-  const kindLabel = KIND_LABELS[symbol.kind];
-  const lineNumStr = `:${symbol.line}`;
-  const leadingWidth = indent + getDisplayWidth(kindLabel) + 1 + getDisplayWidth(symbol.name);
-  const gap = Math.max(1, width - leadingWidth - getDisplayWidth(lineNumStr) - 1);
-  return buildSelectablePanelLine(width, [
-    { text: ' '.repeat(indent), fg: DEFAULT_PANEL_PALETTE.dim },
-    { text: kindLabel, fg: KIND_COLORS[symbol.kind] },
-    { text: ' ', fg: isSelected ? '255' : '251' },
-    { text: symbol.name, fg: isSelected ? '255' : '251', bold: isSelected },
-    { text: ' '.repeat(gap), fg: DEFAULT_PANEL_PALETTE.dim },
-    { text: lineNumStr, fg: DEFAULT_PANEL_PALETTE.dim },
-  ], { selected: isSelected, selectedBg: bgColor, fillFg: isSelected ? '255' : '' });
+  return buildTreeRow(width, {
+    depth,
+    label: symbol.name,
+    icon: KIND_ICONS[symbol.kind],
+    labelColor: KIND_COLORS[symbol.kind],
+    metadata: [{ text: `:${symbol.line}`, fg: DEFAULT_PANEL_PALETTE.dim }],
+  }, C, { selected: isSelected, selectedBg: bgColor || C.selectedBg });
 }

package/src/panels/system-messages-panel.ts

@@ -14,8 +14,10 @@ import {
   buildEmptyState,
   buildGuidanceLine,
   buildKeyValueLine,
+  buildKeyboardHints,
   buildPanelListRow,
   buildPanelLine,
+  buildStatusBadge,
   buildSummaryBlock,
   buildPanelWorkspace,
   resolvePrimaryScrollableSection,
@@ -59,6 +61,12 @@ export class SystemMessagesPanel extends ScrollableListPanel<SystemMessageEntry>
   constructor(configManager: ConfigManager, componentHealthMonitor?: ComponentHealthMonitor) {
     super('system-messages', 'System Messages', 'J', 'monitoring', componentHealthMonitor);
     this.configManager = configManager;
+    this.filterEnabled = true;
+    this.filterLabel = 'Filter messages';
+  }
+
+  protected override filterMatches(entry: SystemMessageEntry, q: string): boolean {
+    return entry.text.toLowerCase().includes(q) || entry.priority.toLowerCase().includes(q);
   }
 
   // ---------------------------------------------------------------------------
@@ -79,7 +87,7 @@ export class SystemMessagesPanel extends ScrollableListPanel<SystemMessageEntry>
     return buildPanelListRow(width, [
       { text: `${fmtTime(entry.ts)}  `, fg: C.ts },
       {
-        text: `${entry.priority === 'high' ? 'HIGH' : 'LOW '.padEnd(4)}  `,
+        text: `${(entry.priority === 'high' ? 'HIGH' : 'LOW').padEnd(4)}  `,
         fg: entry.priority === 'high' ? C.high : C.low,
         bold: entry.priority === 'high',
       },
@@ -129,6 +137,23 @@ export class SystemMessagesPanel extends ScrollableListPanel<SystemMessageEntry>
   // Render — multi-section layout (posture + list + detail)
   // ---------------------------------------------------------------------------
 
+  // Context-aware footer: navigation keys plus filter keys that reflect the
+  // current filter state (active typing / applied query / inactive).
+  private footerHints(): Array<{ keys: string; label: string }> {
+    const hints: Array<{ keys: string; label: string }> = [
+      { keys: 'j/k', label: 'scroll' },
+      { keys: 'g/G', label: 'jump' },
+    ];
+    if (this.filterActive) {
+      hints.push({ keys: 'Esc', label: 'clear filter' });
+    } else if (this.filterQuery) {
+      hints.push({ keys: '/', label: 'edit filter' }, { keys: 'Esc', label: 'clear filter' });
+    } else {
+      hints.push({ keys: '/', label: 'filter' });
+    }
+    return hints;
+  }
+
   override render(width: number, height: number): Line[] {
     return this.trackedRender(() => {
       const intro = 'Operational system traffic routed out of the main conversation to reduce noise and keep runtime status reviewable.';
@@ -151,7 +176,7 @@ export class SystemMessagesPanel extends ScrollableListPanel<SystemMessageEntry>
             ),
           }],
           footerLines: [
-            buildPanelLine(width, [['  j/k or Up/Down scroll  g/G jump  low-priority system traffic lands here by default', C.dim]]),
+            buildPanelLine(width, [['  Low-priority system traffic lands here by default. Routing is configurable via /settings.', C.dim]]),
           ],
           palette: C,
         });
@@ -162,12 +187,16 @@ export class SystemMessagesPanel extends ScrollableListPanel<SystemMessageEntry>
       const lowCount = this._messages.length - highCount;
       this.selectedIndex = Math.min(this.selectedIndex, this._messages.length - 1);
       const ui = this.configManager.getRaw().ui;
+      const latest = this._messages[this._messages.length - 1];
       const postureLines = [
-        buildKeyValueLine(width, [
-          { label: 'messages', value: String(this._messages.length), valueColor: C.value },
-          { label: 'high', value: String(highCount), valueColor: highCount > 0 ? C.high : C.dim },
-          { label: 'low', value: String(lowCount), valueColor: lowCount > 0 ? C.low : C.dim },
-        ], C),
+        // Severity + recency first: high-priority count leads, newest message age follows.
+        buildPanelLine(width, [
+          ['  ', C.label],
+          ...buildStatusBadge(highCount > 0 ? 'failed' : 'completed', 'high', { count: highCount }),
+          ['    ', C.dim],
+          ...buildStatusBadge('review', 'low', { count: lowCount }),
+          ...(latest ? ([['    newest ', C.label], [`${fmtTime(latest.ts)}`, C.value]] as Array<[string, string]>) : []),
+        ]),
         buildKeyValueLine(width, [
           { label: 'system route', value: ui.systemMessages, valueColor: C.info },
           { label: 'ops route', value: ui.operationalMessages, valueColor: C.info },
@@ -176,28 +205,33 @@ export class SystemMessagesPanel extends ScrollableListPanel<SystemMessageEntry>
         buildGuidanceLine(width, '/settings', 'adjust where operational and WRFC messages render across panels and conversation', C),
       ];
 
-      const selected = this._messages[this.selectedIndex]!;
-      const messageRows: Line[] = this._messages.map((entry, index) =>
-        this.renderItem(entry, index, index === this.selectedIndex, width),
-      );
+      const visible = this.getVisibleItems();
+      this.selectedIndex = Math.max(0, Math.min(this.selectedIndex, visible.length - 1));
+      const selected = visible[this.selectedIndex];
+      const messageRows: Line[] = visible.length > 0
+        ? visible.map((entry, index) => this.renderItem(entry, index, index === this.selectedIndex, width))
+        : [buildPanelLine(width, [[`  No messages match "${this.filterQuery.trim()}"  (Esc to clear)`, C.dim]])];
 
+      const filterSection: PanelWorkspaceSection = { lines: [this.buildFilterLine(width)] };
       const postureSection: PanelWorkspaceSection = { lines: buildSummaryBlock(width, 'System posture', postureLines, C) };
-      const detailSection: PanelWorkspaceSection = {
-        title: 'Selected Message',
-        lines: [
-          buildPanelLine(width, [
-            [' Time ', C.label],
-            [fmtTime(selected.ts), C.value],
-            ['   Priority ', C.label],
-            [selected.priority, selected.priority === 'high' ? C.high : C.low],
-          ]),
-          ...buildBodyText(width, selected.text, C, C.value),
-        ],
-      };
+      const detailSection: PanelWorkspaceSection = selected
+        ? {
+            title: 'Selected Message',
+            lines: [
+              buildPanelLine(width, [
+                [' Time ', C.label],
+                [fmtTime(selected.ts), C.value],
+                ['   Priority ', C.label],
+                [selected.priority, selected.priority === 'high' ? C.high : C.low],
+              ]),
+              ...buildBodyText(width, selected.text, C, C.value),
+            ],
+          }
+        : { title: 'Selected Message', lines: [] };
       const messagesSection = resolvePrimaryScrollableSection(width, height, {
         intro,
         palette: C,
-        beforeSections: [postureSection],
+        beforeSections: [filterSection, postureSection],
         section: {
           title: 'Timeline',
           scrollableLines: messageRows,
@@ -210,6 +244,7 @@ export class SystemMessagesPanel extends ScrollableListPanel<SystemMessageEntry>
       });
       this.scrollStart = messagesSection.scrollOffset;
       const sections: PanelWorkspaceSection[] = [
+        filterSection,
         postureSection,
         messagesSection.section,
         detailSection,
@@ -219,9 +254,7 @@ export class SystemMessagesPanel extends ScrollableListPanel<SystemMessageEntry>
         title: 'System Messages',
         intro,
         sections,
-        footerLines: [
-          buildPanelLine(width, [['  j/k or Up/Down scroll  PgUp/PgDn page  g/G jump', C.dim]]),
-        ],
+        footerLines: [buildKeyboardHints(width, this.footerHints(), C)],
         palette: C,
       });
       return lines;

package/src/panels/tasks-panel.ts

@@ -1,5 +1,6 @@
 import type { Line } from '../types/grid.ts';
 import { createEmptyLine } from '../types/grid.ts';
+import { truncateDisplay } from '../utils/terminal-width.ts';
 import { ScrollableListPanel } from './scrollable-list-panel.ts';
 import type { RuntimeTask, TaskLifecycleState } from '@/runtime/index.ts';
 import type { ManagedWorktreeMeta } from '@/runtime/index.ts';
@@ -8,12 +9,14 @@ import {
   buildDetailBlock,
   buildEmptyState,
   buildGuidanceLine,
+  buildKeyboardHints,
   buildPanelListRow,
   buildPanelLine,
   buildSummaryBlock,
   buildPanelWorkspace,
   DEFAULT_PANEL_PALETTE,
 } from './polish.ts';
+import { formatElapsed } from '../utils/format-elapsed.ts';
 
 const C = {
   ...DEFAULT_PANEL_PALETTE,
@@ -35,13 +38,7 @@ function formatWhen(value?: number): string {
 
 function formatDuration(startedAt?: number, endedAt?: number): string {
   if (!startedAt) return 'n/a';
-  const end = endedAt ?? Date.now();
-  const ms = Math.max(0, end - startedAt);
-  if (ms < 1_000) return `${ms}ms`;
-  if (ms < 60_000) return `${(ms / 1_000).toFixed(ms < 10_000 ? 1 : 0)}s`;
-  const mins = Math.floor(ms / 60_000);
-  const secs = Math.floor((ms % 60_000) / 1_000);
-  return `${mins}m ${secs}s`;
+  return formatElapsed(Math.max(0, (endedAt ?? Date.now()) - startedAt));
 }
 
 function kindLabel(kind: RuntimeTask['kind']): string {
@@ -157,6 +154,8 @@ export class TasksPanel extends ScrollableListPanel<RuntimeTask> {
   ) {
     super('tasks', 'Tasks', 'J', 'monitoring');
     this.showSelectionGutter = true; // I5: non-color selection affordance
+    this.filterEnabled = true;
+    this.filterLabel = 'Filter tasks';
     this.readModel = readModel;
     this.worktrees = worktrees;
     this.unsubscribers = [
@@ -183,6 +182,13 @@ export class TasksPanel extends ScrollableListPanel<RuntimeTask> {
     ];
   }
 
+  protected override filterMatches(task: RuntimeTask, q: string): boolean {
+    return task.title.toLowerCase().includes(q)
+      || task.status.toLowerCase().includes(q)
+      || task.id.toLowerCase().includes(q)
+      || String(task.kind).toLowerCase().includes(q);
+  }
+
   protected getItems(): readonly RuntimeTask[] {
     if (!this.readModel) return [];
     return sortTasks([...this.readModel.getSnapshot().tasks]);
@@ -193,7 +199,7 @@ export class TasksPanel extends ScrollableListPanel<RuntimeTask> {
       { text: task.status.padEnd(10), fg: statusColor(task.status) },
       { text: ` ${kindLabel(task.kind).padEnd(12)}`, fg: C.value },
       { text: ` ${task.id.slice(0, 8)} `, fg: C.dim },
-      { text: task.title.slice(0, Math.max(0, width - 37)), fg: C.value },
+      { text: truncateDisplay(task.title, Math.max(0, width - 37)), fg: C.value },
     ], C, { selected });
   }
 
@@ -204,7 +210,7 @@ export class TasksPanel extends ScrollableListPanel<RuntimeTask> {
       return true;
     }
     if (key === 'end') {
-      const tasks = this.getItems();
+      const tasks = this.getVisibleItems();
       this.selectedIndex = Math.max(0, tasks.length - 1);
       this.markDirty();
       return true;
@@ -215,7 +221,23 @@ export class TasksPanel extends ScrollableListPanel<RuntimeTask> {
   public render(width: number, height: number): Line[] {
     this.clampSelection();
     const intro = 'Live task lifecycle, ownership, retries, and result/error details across runtime execution domains.';
-    const footerLines = [buildPanelLine(width, [['  Up/Down move  Home/End jump', C.dim]])];
+    const visibleCount = this.getVisibleItems().length;
+    // Context-aware footer: position + only the keys that apply in the current
+    // (filtering vs browsing) state.
+    const footerLines = [
+      this.filterActive
+        ? buildKeyboardHints(width, [
+            { keys: 'type', label: 'filter tasks' },
+            { keys: 'Enter', label: 'apply' },
+            { keys: 'Esc', label: 'clear' },
+          ], C)
+        : buildKeyboardHints(width, [
+            { keys: visibleCount > 0 ? `${this.selectedIndex + 1}/${visibleCount}` : '0/0', label: 'task' },
+            { keys: '↑/↓', label: 'move' },
+            { keys: 'Home/End', label: 'jump' },
+            { keys: '/', label: 'filter' },
+          ], C),
+    ];
 
     if (!this.readModel) {
       const workspace = buildPanelWorkspace(width, height, {
@@ -272,7 +294,7 @@ export class TasksPanel extends ScrollableListPanel<RuntimeTask> {
         ['  kind ', C.label],
         [selected.kind, C.value],
         ['  owner ', C.label],
-        [selected.owner.slice(0, Math.max(0, width - 46)), C.dim],
+        [truncateDisplay(selected.owner, Math.max(0, width - 46)), C.dim],
       ]));
     }
     postureLines.push(
@@ -359,7 +381,7 @@ export class TasksPanel extends ScrollableListPanel<RuntimeTask> {
         ]]));
         for (const record of attachedWorktrees.records.slice(0, 2)) {
           detailRows.push(buildPanelLine(width, [[
-            `  ${record.state.padEnd(15)} ${record.path}`.slice(0, Math.max(0, width - 2)),
+            truncateDisplay(`  ${record.state.padEnd(15)} ${record.path}`, Math.max(0, width - 2)),
             record.state === 'active' ? C.running : record.state === 'paused' ? C.blocked : C.dim,
           ]]));
         }
@@ -373,14 +395,14 @@ export class TasksPanel extends ScrollableListPanel<RuntimeTask> {
       if (selected.error) {
         detailRows.push(buildPanelLine(width, [
           ['  Error: ', C.label],
-          [selected.error.slice(0, Math.max(0, width - 10)), C.failed],
+          [truncateDisplay(selected.error, Math.max(0, width - 10)), C.failed],
         ]));
       }
       if (selected.result !== undefined) {
         const resultText = safeJson(selected.result);
         detailRows.push(buildPanelLine(width, [
           ['  Result: ', C.label],
-          [resultText.slice(0, Math.max(0, width - 11)), C.dim],
+          [truncateDisplay(resultText, Math.max(0, width - 11)), C.dim],
         ]));
       }
     }

package/src/panels/thinking-panel.ts

@@ -12,25 +12,20 @@ import {
   buildStyledPanelLine,
   buildPanelWorkspace,
   resolveScrollablePanelSection,
+  extendPalette,
   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 = {
-  headerBg:    '#1a1a2e',
-  headerFg:    '#ffffff',
-  statusBar:   '#222233',
-  statusFg:    '#aaaaaa',
+const C = extendPalette(DEFAULT_PANEL_PALETTE, {
+  // Domain-specific reasoning tones (purples) and the active-stream cyan have no
+  // clean shared equivalent; selection background maps to the shared selectBg.
   reasoningFg: '#aa88ff',
   activeFg:    '#cc99ff',
-  dimFg:       '#555566',
   turnLabel:   '#7766bb',
   activeLabel: '#00ffff',
-  collapsedFg: '#888899',
-  selected:    '#00ffff',
-  selectedBg:  '#1a2a3a',
-} as const;
+});
 
 interface ReasoningBlock {
   turnId: number;
@@ -39,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 {
@@ -126,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,
             ),
           },
@@ -157,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, {
@@ -195,7 +191,7 @@ export class ThinkingPanel extends BasePanel {
   }
 
   private _renderRow(width: number, row: FlatRow, isCursor: boolean): Line {
-    const bg = isCursor ? C.selectedBg : '';
+    const bg = isCursor ? C.selectBg : '';
     if (row.kind === 'header') {
       const indicator = this.blocks[row.blockIndex]?.collapsed ? '▸' : '▾';
       const active = this.blocks[row.blockIndex]?.active;
@@ -217,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 });
         }