@pellux/goodvibes-tui 0.27.0 → 0.28.0

package/src/panels/session-maintenance.ts

@@ -10,6 +10,7 @@
  *    that passes configManager has a coherent call site.
  */
 import type { ConfigManager } from '@pellux/goodvibes-sdk/platform/config';
+import { computeContextUsage } from '../core/context-usage.ts';
 
 export type PanelGuidanceMode = 'off' | 'minimal' | 'guided';
 export type PanelSessionMaintenanceLevel = 'stable' | 'watch' | 'suggest-compact' | 'compacting' | 'needs-repair' | 'unknown';
@@ -76,8 +77,7 @@ export function evaluateSessionMaintenance(input: PanelSessionMaintenanceInput):
   const thresholdPct = Math.max(0, Number.isFinite(rawThreshold) ? rawThreshold : 0);
   const autoCompactEnabled = thresholdPct > 0;
 
-  const usagePct = input.contextWindow > 0 ? Math.min(100, Math.round((Math.max(0, input.currentTokens) / input.contextWindow) * 100)) : 0;
-  const remainingTokens = Math.max(0, input.contextWindow - input.currentTokens);
+  const { pct: usagePct, remaining: remainingTokens } = computeContextUsage(input.currentTokens, input.contextWindow);
   const sessionMemoryCount = Math.max(0, input.sessionMemoryCount ?? 0);
   const compactionCount = Math.max(0, input.session?.lineage?.filter((entry) => entry.branchReason === 'compaction').length ?? 0);
   const lastCompactedAt = input.session?.lastCompactedAt;

package/src/panels/settings-sync-panel.ts

@@ -1,8 +1,10 @@
 import type { Line } from '../types/grid.ts';
+import { fitDisplay, truncateDisplay } from '../utils/terminal-width.ts';
 import { ScrollableListPanel } from './scrollable-list-panel.ts';
 import {
   buildDetailBlock,
   buildGuidanceLine,
+  buildKeyboardHints,
   buildPanelListRow,
   buildPanelLine,
   buildStatusPill,
@@ -28,6 +30,14 @@ export class SettingsSyncPanel extends ScrollableListPanel<ResolvedEntry> {
   public constructor(private readonly configManager: ConfigManager) {
     super('settings-sync', 'Settings Sync', 'S', 'monitoring');
     this.showSelectionGutter = true; // I5: non-color selection affordance
+    this.filterEnabled = true;
+    this.filterLabel = 'Filter settings';
+  }
+
+  protected override filterMatches(entry: ResolvedEntry, q: string): boolean {
+    return entry.key.toLowerCase().includes(q)
+      || String(entry.effectiveSource).toLowerCase().includes(q)
+      || String(entry.effectiveValue).toLowerCase().includes(q);
   }
 
   protected override getPalette(): PanelPalette {
@@ -40,9 +50,9 @@ export class SettingsSyncPanel extends ScrollableListPanel<ResolvedEntry> {
 
   protected renderItem(entry: ResolvedEntry, _index: number, selected: boolean, width: number): Line {
     return buildPanelListRow(width, [
-      { text: entry.key.padEnd(32), fg: C.value },
+      { text: fitDisplay(entry.key, 32).padEnd(32), fg: C.value },
       { text: ` ${entry.effectiveSource}`.padEnd(11), fg: entry.effectiveSource === 'managed' ? C.warn : entry.effectiveSource === 'synced' ? C.ok : entry.effectiveSource === 'local' ? C.info : C.dim },
-      { text: `${String(entry.effectiveValue)}`.slice(0, Math.max(0, width - 47)), fg: entry.locked ? C.warn : C.dim },
+      { text: truncateDisplay(`${String(entry.effectiveValue)}`, Math.max(0, width - 47)), fg: entry.locked ? C.warn : C.dim },
     ], C, { selected });
   }
 
@@ -69,28 +79,28 @@ export class SettingsSyncPanel extends ScrollableListPanel<ResolvedEntry> {
       ...(snapshot.stagedManagedBundle
         ? [
             buildPanelLine(width, [[' profile ', C.label], [snapshot.stagedManagedBundle.profileName, C.value], ['  risk ', C.label], [snapshot.stagedManagedBundle.risk, snapshot.stagedManagedBundle.risk === 'high' ? C.error : snapshot.stagedManagedBundle.risk === 'medium' ? C.warn : C.ok], ['  changes ', C.label], [String(snapshot.stagedManagedBundle.changeCount), C.info]]),
-            buildPanelLine(width, [[' path ', C.label], [snapshot.stagedManagedBundle.path.slice(0, Math.max(0, width - 9)), C.dim]]),
+            buildPanelLine(width, [[' path ', C.label], [truncateDisplay(snapshot.stagedManagedBundle.path, Math.max(0, width - 9)), C.dim]]),
           ]
         : [buildPanelLine(width, [[' No staged managed settings bundle.', C.dim]])]),
       // Recent Events
       ...(snapshot.recentEvents.length > 0
-        ? snapshot.recentEvents.map((event) => buildPanelLine(width, [[` ${event.surface}/${event.direction}`.padEnd(18), C.info], [` ${event.detail}`.slice(0, Math.max(0, width - 20)), C.dim]]))
+        ? snapshot.recentEvents.map((event) => buildPanelLine(width, [[fitDisplay(` ${event.surface}/${event.direction}`, 18).padEnd(18), C.info], [truncateDisplay(` ${event.detail}`, Math.max(0, width - 20)), C.dim]]))
         : [buildPanelLine(width, [[' No sync or managed-setting events recorded yet.', C.dim]])]),
       // Managed Locks
       ...(snapshot.managedLocks.length > 0
-        ? snapshot.managedLocks.slice(0, 10).map((lock) => buildPanelLine(width, [[` ${lock.key}`.padEnd(30), C.value], [` source=${lock.source}`.padEnd(24), C.info], [` ${lock.reason}`.slice(0, Math.max(0, width - 56)), C.dim]]))
+        ? snapshot.managedLocks.slice(0, 10).map((lock) => buildPanelLine(width, [[fitDisplay(` ${lock.key}`, 30).padEnd(30), C.value], [fitDisplay(` source=${lock.source}`, 24).padEnd(24), C.info], [truncateDisplay(` ${lock.reason}`, Math.max(0, width - 56)), C.dim]]))
         : [buildPanelLine(width, [[' No managed locks are currently active.', C.dim]])]),
       // Failures
       ...(snapshot.recentFailures.length > 0
-        ? snapshot.recentFailures.map((failure) => buildPanelLine(width, [[` ${failure.surface}`.padEnd(10), C.error], [` ${failure.message}`.slice(0, Math.max(0, width - 12)), C.dim]]))
+        ? snapshot.recentFailures.map((failure) => buildPanelLine(width, [[` ${failure.surface}`.padEnd(10), C.error], [truncateDisplay(` ${failure.message}`, Math.max(0, width - 12)), C.dim]]))
         : [buildPanelLine(width, [[' No recent sync or managed-setting failures.', C.dim]])]),
       // Conflicts
       ...(snapshot.conflicts.length > 0
-        ? snapshot.conflicts.map((conflict) => buildPanelLine(width, [[` ${conflict.key}`.padEnd(30), C.value], [` ${conflict.source}`.padEnd(10), C.warn], [` resolve: /settings-sync resolve ${conflict.key} local|synced`.slice(0, Math.max(0, width - 42)), C.dim]]))
+        ? snapshot.conflicts.map((conflict) => buildPanelLine(width, [[fitDisplay(` ${conflict.key}`, 30).padEnd(30), C.value], [fitDisplay(` ${conflict.source}`, 10).padEnd(10), C.warn], [truncateDisplay(` resolve: /settings-sync resolve ${conflict.key} local|synced`, Math.max(0, width - 42)), C.dim]]))
         : [buildPanelLine(width, [[' No settings conflicts detected.', C.dim]])]),
       // Rollback History
       ...(snapshot.rollbackHistory.length > 0
-        ? snapshot.rollbackHistory.map((entry) => buildPanelLine(width, [[` ${entry.token}`.padEnd(18), C.info], [` ${entry.profileName}`.padEnd(18), C.value], [` restored=${String(entry.restoredKeys.length).padEnd(4)}`, C.warn], [` ${new Date(entry.appliedAt).toLocaleString()}`.slice(0, Math.max(0, width - 46)), C.dim]]))
+        ? snapshot.rollbackHistory.map((entry) => buildPanelLine(width, [[fitDisplay(` ${entry.token}`, 18).padEnd(18), C.info], [fitDisplay(` ${entry.profileName}`, 18).padEnd(18), C.value], [` restored=${String(entry.restoredKeys.length).padEnd(4)}`, C.warn], [truncateDisplay(` ${new Date(entry.appliedAt).toLocaleString()}`, Math.max(0, width - 46)), C.dim]]))
         : [buildPanelLine(width, [[' No managed rollback records yet.', C.dim]])]),
     ];
 
@@ -101,14 +111,19 @@ export class SettingsSyncPanel extends ScrollableListPanel<ResolvedEntry> {
         ? buildDetailBlock(width, 'Selected setting', [
             buildPanelLine(width, [[' key ', C.label], [selectedEntry.key, C.value], ['  category ', C.label], [selectedEntry.category, C.info]]),
             buildPanelLine(width, [[' effective ', C.label], [selectedEntry.effectiveSource, selectedEntry.effectiveSource === 'managed' ? C.warn : selectedEntry.effectiveSource === 'synced' ? C.ok : selectedEntry.effectiveSource === 'local' ? C.info : C.dim], ['  locked ', C.label], [selectedEntry.locked ? 'yes' : 'no', selectedEntry.locked ? C.warn : C.dim], ['  conflict ', C.label], [selectedEntry.conflict ? 'yes' : 'no', selectedEntry.conflict ? C.error : C.good]]),
-            buildPanelLine(width, [[' source ', C.label], [(selectedEntry.sourceLabel ?? 'local/default').slice(0, Math.max(0, width - 10)), C.dim]]),
-            buildPanelLine(width, [[' overrides ', C.label], [(selectedEntry.overriddenSources.length > 0 ? selectedEntry.overriddenSources.join(', ') : 'none').slice(0, Math.max(0, width - 13)), C.dim]]),
-            buildPanelLine(width, [[' local ', C.label], [String(selectedEntry.localValue).slice(0, Math.max(0, width - 9)), C.dim]]),
-            buildPanelLine(width, [[' synced ', C.label], [String(selectedEntry.syncedValue ?? '(unset)').slice(0, Math.max(0, width - 10)), C.ok]]),
-            buildPanelLine(width, [[' managed ', C.label], [String(selectedEntry.managedValue ?? '(unset)').slice(0, Math.max(0, width - 11)), C.warn]]),
+            buildPanelLine(width, [[' source ', C.label], [truncateDisplay(selectedEntry.sourceLabel ?? 'local/default', Math.max(0, width - 10)), C.dim]]),
+            buildPanelLine(width, [[' overrides ', C.label], [truncateDisplay(selectedEntry.overriddenSources.length > 0 ? selectedEntry.overriddenSources.join(', ') : 'none', Math.max(0, width - 13)), C.dim]]),
+            buildPanelLine(width, [[' local ', C.label], [truncateDisplay(String(selectedEntry.localValue), Math.max(0, width - 9)), C.dim]]),
+            buildPanelLine(width, [[' synced ', C.label], [truncateDisplay(String(selectedEntry.syncedValue ?? '(unset)'), Math.max(0, width - 10)), C.ok]]),
+            buildPanelLine(width, [[' managed ', C.label], [truncateDisplay(String(selectedEntry.managedValue ?? '(unset)'), Math.max(0, width - 11)), C.warn]]),
           ], C)
-        : []),
-      buildPanelLine(width, [[' ↑/↓ browse  /settings-sync show <key>  /settings-sync resolve <key> <local|synced>  /managed apply-staged [key...] ', C.dim]]),
+        : [buildPanelLine(width, [[' Select a setting above to inspect its effective value, source, and overrides.', C.dim]])]),
+      buildKeyboardHints(width, [
+        { keys: '↑/↓', label: 'browse' },
+        { keys: '/', label: 'filter' },
+        { keys: '/settings-sync show <key>', label: 'inspect' },
+        { keys: '/settings-sync resolve <key> <local|synced>', label: 'resolve conflict' },
+      ], C),
     ];
 
     return this.renderList(width, height, {

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,6 +9,7 @@ import {
   buildDetailBlock,
   buildEmptyState,
   buildGuidanceLine,
+  buildKeyboardHints,
   buildPanelListRow,
   buildPanelLine,
   buildSummaryBlock,
@@ -152,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 = [
@@ -178,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]);
@@ -188,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 });
   }
 
@@ -199,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;
@@ -210,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, {
@@ -267,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(
@@ -354,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,
           ]]));
         }
@@ -368,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],
         ]));
       }
     }