@pellux/goodvibes-tui 0.26.0 → 0.28.0

package/src/panels/security-panel.ts

@@ -1,8 +1,10 @@
 import type { Line } from '../types/grid.ts';
+import { truncateDisplay } from '../utils/terminal-width.ts';
 import { ScrollableListPanel } from './scrollable-list-panel.ts';
 import type { TokenAuditResult } from '@pellux/goodvibes-sdk/platform/security';
 import type { UiReadModel, UiSecuritySnapshot } from '../runtime/ui-read-models.ts';
 import {
+  buildAlignedRow,
   buildEmptyState,
   buildGuidanceLine,
   buildPanelLine,
@@ -63,6 +65,8 @@ export class SecurityPanel extends ScrollableListPanel<TokenAuditResult> {
   public constructor(private readonly readModel: UiReadModel<UiSecuritySnapshot>) {
     super('security', 'Security', 'U', 'monitoring');
     this.showSelectionGutter = true; // I5: non-color selection affordance
+    this.filterEnabled = true;
+    this.filterLabel = 'Filter tokens';
     this.unsub = this.readModel.subscribe(() => this.markDirty());
   }
 
@@ -85,24 +89,38 @@ export class SecurityPanel extends ScrollableListPanel<TokenAuditResult> {
   }
 
   protected renderItem(result: TokenAuditResult, index: number, selected: boolean, width: number): Line {
-    const bg = selected ? C.selectBg : undefined;
-    return buildPanelLine(width, [
-      [' ', C.label, bg],
-      [result.label.padEnd(22), C.value, bg],
-      [` ${result.tokenId.padEnd(12)}`, C.info, bg],
-      [` ${result.scope.policyId.padEnd(10)}`, C.label, bg],
-      [` ${resultSummary(result).slice(0, Math.max(0, width - 49))}`, resultColor(result), bg],
-    ]);
+    return buildAlignedRow(
+      width,
+      [
+        { text: result.label, fg: C.value },
+        { text: result.tokenId, fg: C.info },
+        { text: result.scope.policyId, fg: C.label },
+        { text: resultSummary(result), fg: resultColor(result) },
+      ],
+      [
+        { width: 22 },
+        { width: 12 },
+        { width: 10 },
+        { width: Math.max(8, width - 50) },
+      ],
+      { selected, selectedBg: C.selectBg },
+    );
   }
 
   public handleInput(key: string): boolean {
-    if (key === 'r') {
+    if (!this.filterActive && key === 'r') {
       this.markDirty();
       return true;
     }
     return super.handleInput(key);
   }
 
+  protected override filterMatches(result: TokenAuditResult, q: string): boolean {
+    return result.label.toLowerCase().includes(q)
+      || result.scope.policyId.toLowerCase().includes(q)
+      || result.tokenId.toLowerCase().includes(q);
+  }
+
   public render(width: number, height: number): Line[] {
     this.clampSelection();
     const snapshot = this.readModel.getSnapshot();
@@ -168,7 +186,7 @@ export class SecurityPanel extends ScrollableListPanel<TokenAuditResult> {
         [' critical ', C.label],
         ...buildStatusPill(attackPathReview.incoherentFindings > 0 ? 'warn' : 'good', String(attackPathReview.incoherentFindings)),
         [' review ', C.label],
-        [attackPathReview.summary.slice(0, Math.max(0, width - 36)), C.dim],
+        [truncateDisplay(attackPathReview.summary, Math.max(0, width - 36)), C.dim],
       ]),
     ];
 
@@ -205,20 +223,41 @@ export class SecurityPanel extends ScrollableListPanel<TokenAuditResult> {
       attackPathLines.push(buildPanelLine(width, [[' MCP attack-path review', C.label]]));
       for (const finding of attackPathReview.findings.slice(0, 3)) {
         attackPathLines.push(buildPanelLine(width, [[
-          `  ${finding.severity.toUpperCase()} ${finding.serverName}: ${finding.route}`.slice(0, width),
+          truncateDisplay(`  ${finding.severity.toUpperCase()} ${finding.serverName}: ${finding.route}`, width),
           severityColor(finding.severity),
         ]]));
         attackPathLines.push(buildPanelLine(width, [[
-          `    ${finding.reason}`.slice(0, width),
+          truncateDisplay(`    ${finding.reason}`, width),
           C.dim,
         ]]));
         attackPathLines.push(buildPanelLine(width, [[
-          `    evidence: ${finding.evidence.join(' | ')}`.slice(0, width),
+          truncateDisplay(`    evidence: ${finding.evidence.join(' | ')}`, width),
           C.dim,
         ]]));
       }
     }
 
+    // Column header for the token audit list so the aligned columns are legible.
+    const listHeader: Line[] = [
+      ...governanceLines,
+      buildAlignedRow(
+        width,
+        [
+          { text: 'TOKEN LABEL', fg: C.label, bold: true },
+          { text: 'TOKEN ID', fg: C.label, bold: true },
+          { text: 'POLICY', fg: C.label, bold: true },
+          { text: `STATUS (${view.results.length} audited)`, fg: C.label, bold: true },
+        ],
+        [
+          { width: 22 },
+          { width: 12 },
+          { width: 10 },
+          { width: Math.max(8, width - 50) },
+        ],
+        {},
+      ),
+    ];
+
     const selected = view.results[this.selectedIndex];
     const detailLines: Line[] = [];
     if (selected) {
@@ -234,7 +273,7 @@ export class SecurityPanel extends ScrollableListPanel<TokenAuditResult> {
         ['  Scope: ', C.label],
         [selected.scope.outcome, selected.scope.outcome === 'violation' ? C.error : C.ok],
         ['  Excess: ', C.label],
-        [(selected.scope.excessScopes.length > 0 ? selected.scope.excessScopes.join(', ') : 'none').slice(0, Math.max(0, width - 27)), selected.scope.excessScopes.length > 0 ? C.error : C.dim],
+        [truncateDisplay(selected.scope.excessScopes.length > 0 ? selected.scope.excessScopes.join(', ') : 'none', Math.max(0, width - 27)), selected.scope.excessScopes.length > 0 ? C.error : C.dim],
       ]));
       detailLines.push(buildPanelLine(width, [
         ['  Rotation: ', C.label],
@@ -250,46 +289,59 @@ export class SecurityPanel extends ScrollableListPanel<TokenAuditResult> {
       ]]));
       if (preflightStatus !== 'n/a') {
         detailLines.push(buildPanelLine(width, [[
-          `Policy preflight: ${preflightStatus} (${preflightIssueCount} issue${preflightIssueCount === 1 ? '' : 's'})`.slice(0, width),
+          truncateDisplay(`Policy preflight: ${preflightStatus} (${preflightIssueCount} issue${preflightIssueCount === 1 ? '' : 's'})`, width),
           preflightStatus === 'block' ? C.error : preflightStatus === 'warn' ? C.warn : C.dim,
         ]]));
       }
       if (quarantinedMcp.length > 0) {
         const server = quarantinedMcp[0]!;
         detailLines.push(buildPanelLine(width, [[
-          `MCP quarantine: ${server.name} ${server.quarantineReason ?? 'unknown'}${server.quarantineDetail ? ` - ${server.quarantineDetail}` : ''}`.slice(0, width),
+          truncateDisplay(`MCP quarantine: ${server.name} ${server.quarantineReason ?? 'unknown'}${server.quarantineDetail ? ` - ${server.quarantineDetail}` : ''}`, width),
           C.error,
         ]]));
       }
       if (quarantinedPlugins.length > 0) {
         const plugin = quarantinedPlugins[0]!;
         detailLines.push(buildPanelLine(width, [[
-          `Plugin quarantine: ${plugin.name} (${plugin.trustTier})`.slice(0, width),
+          truncateDisplay(`Plugin quarantine: ${plugin.name} (${plugin.trustTier})`, width),
           C.error,
         ]]));
       } else if (untrustedPlugins.length > 0) {
         const plugin = untrustedPlugins[0]!;
         detailLines.push(buildPanelLine(width, [[
-          `Plugin trust warning: ${plugin.name} remains untrusted.`.slice(0, width),
+          truncateDisplay(`Plugin trust warning: ${plugin.name} remains untrusted.`, width),
           C.warn,
         ]]));
       }
       if (latestIncident) {
         detailLines.push(buildPanelLine(width, [[
-          `Latest incident: ${latestIncident.classification} - ${latestIncident.summary}`.slice(0, width),
+          truncateDisplay(`Latest incident: ${latestIncident.classification} - ${latestIncident.summary}`, width),
           C.warn,
         ]]));
       }
     }
 
+    const hints = this.filterActive
+      ? [
+          { keys: 'type', label: 'filter tokens' },
+          { keys: 'Enter', label: 'apply' },
+          { keys: 'Esc', label: 'clear' },
+        ]
+      : [
+          { keys: '↑/↓', label: 'select token' },
+          { keys: '/', label: 'filter' },
+          { keys: 'r', label: 'refresh audit' },
+        ];
+
     return this.renderList(width, height, {
       title: 'Security Control Room',
-      header: governanceLines,
+      header: listHeader,
       footer: [
         ...detailLines,
         ...attackPathLines,
         footerLine,
       ],
+      hints,
     });
   }
 }

package/src/panels/services-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 ServiceConfig,
@@ -8,7 +9,9 @@ import {
 } from '@pellux/goodvibes-sdk/platform/config';
 import type { ServiceInspectionQuery, SubscriptionAccessQuery } from '../runtime/ui-service-queries.ts';
 import {
-  buildEmptyState,
+  buildDetailBlock,
+  buildKeyValueLine,
+  buildKeyboardHints,
   buildPanelLine,
   buildPanelWorkspace,
   buildStatusPill,
@@ -80,11 +83,18 @@ export class ServicesPanel extends ScrollableListPanel<ServicePanelEntry> {
   ) {
     super('services', 'Services', 'V', 'monitoring');
     this.showSelectionGutter = true; // I5: non-color selection affordance
+    this.filterEnabled = true;
+    this.filterLabel = 'Filter services';
     this.registry = registry;
     this.subscriptionManager = subscriptionManager;
     void this.refresh();
   }
 
+  protected override filterMatches(entry: ServicePanelEntry, q: string): boolean {
+    return entry.name.toLowerCase().includes(q)
+      || (entry.inspection.config.baseUrl ?? '').toLowerCase().includes(q);
+  }
+
   public override onActivate(): void {
     super.onActivate();
     if (this.entries.length === 0 && !this.loading) {
@@ -112,18 +122,20 @@ export class ServicesPanel extends ScrollableListPanel<ServicePanelEntry> {
       [entry.name.padEnd(16), C.value, bg],
       [` ${statusLabel(entry).padEnd(12)}`, statusColor(entry), bg],
       [` ${authSummary(entry.inspection.config, this.subscriptionManager).padEnd(18)}`, C.info, bg],
-      [` ${entry.inspection.config.baseUrl ?? '(no baseUrl)'}`, C.dim, bg],
+      [` ${truncateDisplay(entry.inspection.config.baseUrl ?? '(no baseUrl)', Math.max(0, width - 48))}`, C.dim, bg],
     ]);
   }
 
   public handleInput(key: string): boolean {
-    if (key === 'r') {
-      void this.refresh();
-      return true;
-    }
-    if (key === 't') {
-      void this.testSelected();
-      return true;
+    if (!this.filterActive) {
+      if (key === 'r') {
+        void this.refresh();
+        return true;
+      }
+      if (key === 't') {
+        void this.testSelected();
+        return true;
+      }
     }
     return super.handleInput(key);
   }
@@ -176,11 +188,29 @@ export class ServicesPanel extends ScrollableListPanel<ServicePanelEntry> {
       return lines;
     }
 
+    // Health-summary header — surface the most important counts first.
+    const counts = { healthy: 0, error: 0, configured: 0, unconfigured: 0 };
+    for (const entry of this.entries) {
+      const label = statusLabel(entry);
+      if (label === 'HEALTHY') counts.healthy++;
+      else if (label === 'ERROR') counts.error++;
+      else if (label === 'CONFIGURED') counts.configured++;
+      else counts.unconfigured++;
+    }
+    const headerLines: Line[] = [
+      buildKeyValueLine(width, [
+        { label: 'services', value: String(this.entries.length), valueColor: this.entries.length > 0 ? C.info : C.dim },
+        { label: 'healthy', value: String(counts.healthy), valueColor: counts.healthy > 0 ? C.ok : C.dim },
+        { label: 'errors', value: String(counts.error), valueColor: counts.error > 0 ? C.error : C.dim },
+        { label: 'unconfigured', value: String(counts.unconfigured), valueColor: counts.unconfigured > 0 ? C.warn : C.dim },
+      ], C),
+    ];
+
     const selected = this.entries[this.selectedIndex];
-    const detailLines: Line[] = [];
+    const detailRows: Line[] = [];
     if (selected) {
       const inspect = selected.inspection;
-      detailLines.push(buildPanelLine(width, [
+      detailRows.push(buildPanelLine(width, [
         ['  Service: ', C.label],
         [selected.name, C.value],
         ['  State: ', C.label],
@@ -188,7 +218,11 @@ export class ServicesPanel extends ScrollableListPanel<ServicePanelEntry> {
         ['  Auth: ', C.label],
         [authSummary(inspect.config, this.subscriptionManager), C.info],
       ]));
-      detailLines.push(buildPanelLine(width, [
+      detailRows.push(buildPanelLine(width, [
+        ['  Base URL: ', C.label],
+        [truncateDisplay(inspect.config.baseUrl ?? '(no baseUrl)', Math.max(0, width - 13)), C.dim],
+      ]));
+      detailRows.push(buildPanelLine(width, [
         ['  Primary credential: ', C.label],
         ...buildStatusPill(inspect.hasPrimaryCredential ? 'good' : 'bad', inspect.hasPrimaryCredential ? 'present' : 'missing'),
         ['  Webhook URL: ', C.label],
@@ -199,32 +233,44 @@ export class ServicesPanel extends ScrollableListPanel<ServicePanelEntry> {
         ...buildStatusPill(inspect.hasAppToken ? 'good' : 'info', inspect.hasAppToken ? 'present' : 'missing'),
       ]));
       if (selected.lastTest) {
-        detailLines.push(buildPanelLine(width, [
+        detailRows.push(buildPanelLine(width, [
           ['  Last test: ', C.label],
           ...buildStatusPill(selected.lastTest.ok ? 'good' : 'bad', selected.lastTest.ok ? 'ok' : 'failed'),
           ['  Status: ', C.label],
           [selected.lastTest.status != null ? String(selected.lastTest.status) : 'n/a', C.value],
           ['  URL: ', C.label],
-          [(selected.lastTest.testedUrl ?? 'n/a').slice(0, Math.max(0, width - 34)), C.dim],
+          [truncateDisplay(selected.lastTest.testedUrl ?? 'n/a', Math.max(0, width - 34)), C.dim],
         ]));
         if (selected.lastTest.error) {
-          detailLines.push(buildPanelLine(width, [
+          detailRows.push(buildPanelLine(width, [
             ['  Error: ', C.label],
-            [selected.lastTest.error.slice(0, Math.max(0, width - 10)), C.error],
+            [truncateDisplay(selected.lastTest.error, Math.max(0, width - 10)), C.error],
           ]));
         }
       } else {
-        detailLines.push(buildPanelLine(width, [['  Press t to test the selected service or r to refresh credential status.', C.dim]]));
+        detailRows.push(buildPanelLine(width, [['  Not tested yet — press t to run a live connection check.', C.dim]]));
       }
-      detailLines.push(buildPanelLine(width, [['  Services resolve credentials through hierarchy-aware secure storage, plaintext fallback policy, and project-local config.', C.dim]]));
     }
 
+    // Context-aware hints: filter mode swaps to filter-specific keys; the test
+    // key only makes sense when there is a service to test.
+    const hints = this.filterActive
+      ? [{ keys: 'type', label: 'filter' }, { keys: 'Enter', label: 'apply' }, { keys: 'Esc', label: 'clear' }]
+      : [
+          { keys: 'Up/Down', label: 'move' },
+          ...(selected ? [{ keys: 't', label: 'test selected' }] : []),
+          { keys: 'r', label: 'refresh' },
+          { keys: '/', label: 'filter' },
+        ];
+
+    const footer: Line[] = selected
+      ? [...buildDetailBlock(width, `Service · ${selected.name}`, detailRows, C), buildKeyboardHints(width, hints, C)]
+      : [buildKeyboardHints(width, hints, C)];
+
     return this.renderList(width, height, {
       title: 'Service Control Room',
-      footer: [
-        ...detailLines,
-        buildPanelLine(width, [['  Up/Down move  t test selected service  r refresh inspections', C.dim]]),
-      ],
+      header: headerLines,
+      footer,
       emptyMessage: intro,
     });
   }

package/src/panels/session-browser-panel.ts

@@ -9,15 +9,17 @@ import { logger } from '@pellux/goodvibes-sdk/platform/utils';
 import type { SessionBrowserQuery } from '../runtime/ui-service-queries.ts';
 import {
   buildEmptyState,
+  buildKeyboardHints,
   buildPanelLine,
   buildSearchInputLine,
   buildStyledPanelLine,
   buildPanelWorkspace,
   resolveScrollablePanelSection,
   DEFAULT_PANEL_PALETTE,
+  extendPalette,
   type PanelWorkspaceSection,
 } from './polish.ts';
-import { truncateDisplay } from '../utils/terminal-width.ts';
+import { fitDisplay, truncateDisplay } from '../utils/terminal-width.ts';
 import { summarizeError } from '@pellux/goodvibes-sdk/platform/utils';
 import {
   getPanelSearchFocusTransition,
@@ -28,24 +30,15 @@ import {
 } from './search-focus.ts';
 import { type ConfirmState, handleConfirmInput } from './confirm-state.ts';
 
-const C = {
-  headerBg:   '#1a1a2e',
-  headerFg:   '#ffffff',
-  statusBar:  '#222233',
-  statusFg:   '#aaaaaa',
-  selected:   '#00ffff',
-  selectedBg: '#1a2a3a',
-  normal:     '#ccccdd',
-  dim:        '#555566',
-  label:      '#8888bb',
-  value:      '#ccccdd',
-  dateFg:     '#6699aa',
-  modelFg:    '#99aacc',
-  countFg:    '#88bbcc',
-  warnFg:     '#ffcc44',
-  errorFg:    '#ff6666',
-  separator:  '#333355',
-} as const;
+// Panel-specific extras only; shared tones come from DEFAULT_PANEL_PALETTE so
+// theme changes propagate. `selected` is a deliberate bright-cyan cursor accent
+// and the date/model/count column tints have no clean shared equivalent.
+const C = extendPalette(DEFAULT_PANEL_PALETTE, {
+  selected: '#00ffff',
+  dateFg:   '#6699aa',
+  modelFg:  '#99aacc',
+  countFg:  '#88bbcc',
+});
 
 function shortDate(ts: number): string {
   const d = new Date(ts);
@@ -92,6 +85,7 @@ export class SessionBrowserPanel extends BasePanel {
   private confirm: ConfirmState<string> | null = null;
   private deleteError = '';
   private loadError = '';
+  private hasLoaded = false;
   private refreshTimerId: ReturnType<typeof setInterval> | null = null;
 
   constructor(
@@ -177,8 +171,15 @@ export class SessionBrowserPanel extends BasePanel {
     if (height <= 0 || width <= 0) return [];
     const intro = 'Browse, search, resume, and prune saved conversations.';
 
+    // Lazily load on first render so the panel works even when rendered without
+    // onActivate(). The session list is a synchronous source, so this resolves
+    // immediately rather than flashing a loading screen.
+    if (!this.hasLoaded) this._load();
+
     const count = this.filtered.length;
     const total = this.sessions.length;
+    const hasSelection = this.filtered.length > 0;
+    // Search/status line — surfaces the active query or any error.
     const searchLine = this.searching
       ? ` Search: ${this.searchQuery}_`
       : this.loadError
@@ -186,11 +187,21 @@ export class SessionBrowserPanel extends BasePanel {
       : this.deleteError
       ? ` Error: ${this.deleteError}`
       : this.searchQuery
-      ? ` Filter: ${this.searchQuery}  (/ or up at top to edit)`
-      : ` / or up at top to search  Enter: resume  d: delete  r: refresh`;
+      ? ` Filter: ${this.searchQuery}`
+      : ` (no filter)`;
     const statusFg = this.loadError || this.deleteError ? DEFAULT_PANEL_PALETTE.bad : this.searching ? DEFAULT_PANEL_PALETTE.info : DEFAULT_PANEL_PALETTE.dim;
+    // Context-aware hints: only advertise keys that work in the current state.
+    const hints: Array<{ keys: string; label: string }> = [];
+    if (this.searching) {
+      hints.push({ keys: 'type', label: 'filter' }, { keys: 'Esc/Enter', label: 'apply' });
+    } else {
+      hints.push({ keys: '/', label: this.searchQuery ? 'edit search' : 'search' });
+      if (hasSelection) hints.push({ keys: 'Enter', label: 'resume' }, { keys: 'd', label: 'delete' });
+      hints.push({ keys: 'r', label: 'refresh' });
+    }
     const footerLines = [
       buildSearchInputLine(width, '', searchLine.trimStart(), DEFAULT_PANEL_PALETTE, { active: this.searching, valueColor: statusFg }),
+      buildKeyboardHints(width, hints, DEFAULT_PANEL_PALETTE),
     ];
 
     if (this.confirm) {
@@ -216,12 +227,15 @@ export class SessionBrowserPanel extends BasePanel {
       const emptyBody = this.searchQuery
         ? 'Clear or change the current filter to surface saved conversations again.'
         : 'Conversations are saved automatically. Once you have saved sessions, they appear here for review and resume.';
+      const emptyActions = this.searchQuery
+        ? [{ command: 'Esc', summary: 'clear the filter and show all sessions' }]
+        : [{ command: '/session save', summary: 'name and persist the current conversation' }];
       return buildPanelWorkspace(width, height, {
         title: ` Sessions [${count}/${total}]`,
         intro,
         sections: [
           {
-            lines: buildEmptyState(width, emptyTitle, emptyBody, [], DEFAULT_PANEL_PALETTE),
+            lines: buildEmptyState(width, emptyTitle, emptyBody, emptyActions, DEFAULT_PANEL_PALETTE),
           },
         ],
         footerLines,
@@ -308,19 +322,19 @@ export class SessionBrowserPanel extends BasePanel {
   }
 
   private _renderSession(width: number, sess: SessionInfo, isCursor: boolean): Line {
-    const bg = isCursor ? C.selectedBg : '';
+    const bg = isCursor ? C.selectBg : '';
     const date = shortDate(sess.timestamp);
     const cnt = String(sess.messageCount).padStart(3) + 'm ';
-    const model = (sess.model || 'unknown').slice(0, 18).padEnd(18) + ' ';
+    const model = fitDisplay(sess.model || 'unknown', 18) + ' ';
     const prefixLength = 1 + 16 + 1 + 4 + 19;
     const title = truncateDisplay(sess.title || sess.name || '(untitled)', Math.max(0, width - prefixLength));
     return buildStyledPanelLine(width, [
       { text: isCursor ? '▸' : ' ', fg: C.selected, bg, bold: isCursor },
       { text: date, fg: C.dateFg, bg },
-      { text: ' ', fg: C.normal, bg },
+      { text: ' ', fg: C.value, bg },
       { text: cnt, fg: C.countFg, bg },
       { text: model, fg: C.modelFg, bg },
-      { text: title, fg: isCursor ? C.selected : C.normal, bg, bold: isCursor },
+      { text: title, fg: isCursor ? C.selected : C.value, bg, bold: isCursor },
     ]);
   }
 
@@ -329,10 +343,12 @@ export class SessionBrowserPanel extends BasePanel {
       this.sessions = this.sessionManager.list();
       this._filter();
       this.loadError = '';
+      this.hasLoaded = true;
       this.markDirty();
     } catch (e) {
       logger.debug('SessionBrowserPanel._load failed', { error: summarizeError(e) });
       this.loadError = 'Failed to load sessions';
+      this.hasLoaded = true;
       this.markDirty();
     }
   }

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/skills-panel.ts

@@ -16,6 +16,7 @@ import {
   getPanelSearchFocusTransition,
   isPanelSearchCancel,
 } from './search-focus.ts';
+import { summarizeError } from '@pellux/goodvibes-sdk/platform/utils';
 
 const C = {
   ...DEFAULT_PANEL_PALETTE,
@@ -259,7 +260,7 @@ export class SkillsPanel extends SearchableListPanel<SkillRecord> {
           this.invalidateFilter();
         });
       } catch (err) {
-        this.setError(err instanceof Error ? err.message : String(err));
+        this.setError(summarizeError(err));
       }
       this.markDirty();
     })();