@pellux/goodvibes-tui 0.27.0 → 0.28.0

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

@@ -5,6 +5,7 @@ import type { PanelCategory } from './types.ts';
 import type { ComponentHealthMonitor } from '../runtime/perf/panel-health-monitor.ts';
 import {
   buildEmptyState,
+  buildKeyboardHints,
   buildPanelWorkspace,
   buildSearchInputLine,
   DEFAULT_PANEL_PALETTE,
@@ -56,6 +57,96 @@ export abstract class ScrollableListPanel<T> extends BasePanel {
    */
   protected showSelectionGutter = false;
 
+  // -------------------------------------------------------------------------
+  // Opt-in inline filter ( / to filter, Esc to clear )
+  // -------------------------------------------------------------------------
+  // Set `filterEnabled = true` and override `filterMatches()` to give a list
+  // panel a `/`-to-filter affordance that coexists with single-letter action
+  // keys (filtering is modal: action keys work until you press `/`). A filter
+  // input line is auto-rendered at the top of the list.
+  protected filterEnabled = false;
+  protected filterQuery = '';
+  protected filterActive = false;
+  /** Short noun shown in the filter hint, e.g. "Filter sessions". */
+  protected filterLabel = 'Filter';
+
+  /** Override to define what the lower-cased filter query matches for an item. */
+  protected filterMatches(_item: T, _query: string): boolean {
+    return false;
+  }
+
+  /**
+   * The list after applying the active filter — used for both display and
+   * navigation. Identical to `getItems()` unless a filter is enabled and a
+   * non-empty query is set, so existing panels are unaffected.
+   */
+  protected getVisibleItems(): readonly T[] {
+    const all = this.getItems();
+    const q = this.filterQuery.trim().toLowerCase();
+    if (!this.filterEnabled || !q) return all;
+    return all.filter((item) => this.filterMatches(item, q));
+  }
+
+  /**
+   * Filter-mode key handling. Returns `true`/`false` when consumed/ignored in
+   * filter context, or `null` to fall through to normal navigation.
+   */
+  private _handleFilterKey(key: string): boolean | null {
+    if (!this.filterEnabled) return null;
+    if (this.filterActive) {
+      if (key === 'escape') {
+        this.filterActive = false;
+        this.filterQuery = '';
+        this.selectedIndex = 0;
+        this.needsRender = true;
+        return true;
+      }
+      if (key === 'return' || key === 'enter') {
+        this.filterActive = false; // commit; keep the query applied
+        this.needsRender = true;
+        return true;
+      }
+      if (key === 'backspace' || key === 'delete') {
+        this.filterQuery = this.filterQuery.slice(0, -1);
+        this.selectedIndex = 0;
+        this.needsRender = true;
+        return true;
+      }
+      // Arrow/paging keys navigate the filtered list — fall through.
+      if (key === 'up' || key === 'down' || key === 'pageup' || key === 'pagedown' || key === 'home' || key === 'end') {
+        return null;
+      }
+      // Any printable character (including j/k/g/G) extends the query.
+      if (key.length === 1 && key >= ' ') {
+        this.filterQuery += key;
+        this.selectedIndex = 0;
+        this.needsRender = true;
+        return true;
+      }
+      return false;
+    }
+    if (key === '/') {
+      this.filterActive = true;
+      this.needsRender = true;
+      return true;
+    }
+    return null;
+  }
+
+  /** The filter input line shown at the top of the list when filtering is enabled. */
+  protected buildFilterLine(width: number): Line {
+    const palette = this.getPalette();
+    const label = this.filterActive ? `[${this.filterLabel}] ` : `${this.filterLabel}: `;
+    const value = this.filterActive
+      ? `${this.filterQuery}_`
+      : this.filterQuery || '(/ to filter)';
+    return buildSearchInputLine(width, label, value, palette, {
+      active: false,
+      bg: this.filterActive ? palette.inputBg : palette.sectionBg,
+      valueColor: this.filterActive ? palette.info : (this.filterQuery ? palette.value : palette.dim),
+    });
+  }
+
   constructor(
     id: string,
     name: string,
@@ -143,7 +234,11 @@ export abstract class ScrollableListPanel<T> extends BasePanel {
     // call this.clearError() at the start of their handler.
     if (this.lastError !== null) this.clearError();
 
-    const items = this.getItems();
+    // Opt-in inline filter consumes input before navigation when active.
+    const filterResult = this._handleFilterKey(key);
+    if (filterResult !== null) return filterResult;
+
+    const items = this.getVisibleItems();
     const total = items.length;
 
     switch (key) {
@@ -202,7 +297,7 @@ export abstract class ScrollableListPanel<T> extends BasePanel {
 
   handleScroll(deltaRows: number): boolean {
     if (this.lastError !== null) this.clearError();
-    const total = this.getItems().length;
+    const total = this.getVisibleItems().length;
     const rows = Math.trunc(deltaRows);
     if (total === 0 || rows === 0) return false;
     const next = Math.max(0, Math.min(total - 1, this.selectedIndex + rows));
@@ -221,7 +316,7 @@ export abstract class ScrollableListPanel<T> extends BasePanel {
    * Must be called after any data refresh that may shrink the list.
    */
   protected clampSelection(): void {
-    const total = this.getItems().length;
+    const total = this.getVisibleItems().length;
     if (total === 0) {
       this.selectedIndex = 0;
     } else {
@@ -253,6 +348,7 @@ export abstract class ScrollableListPanel<T> extends BasePanel {
     options: {
       readonly header?: readonly Line[];
       readonly footer?: readonly Line[];
+      readonly hints?: ReadonlyArray<{ keys: string; label: string }>;
       readonly emptyMessage?: string;
       readonly title?: string;
       readonly spinnerFrame?: number;
@@ -260,19 +356,32 @@ export abstract class ScrollableListPanel<T> extends BasePanel {
   ): Line[] {
     this.needsRender = false;
     const palette = this.getPalette();
-    const items = this.getItems();
+    const items = this.getVisibleItems();
     const title = options.title ?? this.name;
 
+    // Auto-inject the filter input line at the top of the header when filtering
+    // is enabled, so every filterable panel gets the same affordance for free.
+    const baseHeader = options.header ? [...options.header as Line[]] : [];
+    const header: Line[] | undefined = this.filterEnabled
+      ? [this.buildFilterLine(width), ...baseHeader]
+      : (options.header ? baseHeader : undefined);
+
+    // Standardized keyboard-hints footer row (rendered below any explicit footer).
+    const hintsLine = options.hints && options.hints.length > 0
+      ? buildKeyboardHints(width, options.hints, palette)
+      : null;
+
     // I2: inject error line into footer when present
     const errorLine = this.renderErrorLine(width);
     const baseFooter = options.footer ? [...options.footer as Line[]] : [];
+    if (hintsLine) baseFooter.push(hintsLine);
     const effectiveFooter: Line[] = errorLine ? [errorLine, ...baseFooter] : baseFooter;
 
     // I3: if loading, show spinner in place of normal content
     const spinnerLine = this.renderLoadingLine(width, options.spinnerFrame ?? 0);
     if (spinnerLine) {
       const loadingSection = { lines: [spinnerLine] };
-      const headerSection = options.header ? [{ lines: options.header as Line[] }] : [];
+      const headerSection = header ? [{ lines: header }] : [];
       const lines = buildPanelWorkspace(width, height, {
         title,
         sections: [...headerSection, loadingSection],
@@ -306,17 +415,22 @@ export abstract class ScrollableListPanel<T> extends BasePanel {
 
     // Empty state
     if (scrollableLines.length === 0) {
+      // Distinguish "filter hides everything" from "genuinely empty".
+      const filteredToEmpty = this.filterEnabled && this.filterQuery.trim() !== '' && this.getItems().length > 0;
+      const emptyMessage = filteredToEmpty
+        ? ` No matches for "${this.filterQuery.trim()}"`
+        : (options.emptyMessage ?? this.getEmptyStateMessage());
       const emptyLines = buildEmptyState(
         width,
-        options.emptyMessage ?? this.getEmptyStateMessage(),
-        '',
-        this.getEmptyStateActions(),
+        emptyMessage,
+        filteredToEmpty ? 'Press Esc to clear the filter.' : '',
+        filteredToEmpty ? [] : this.getEmptyStateActions(),
         palette,
       );
       const lines = buildPanelWorkspace(width, height, {
         title,
         sections: [
-          ...(options.header ? [{ lines: options.header as Line[] }] : []),
+          ...(header ? [{ lines: header }] : []),
           { lines: emptyLines },
           ...(effectiveFooter.length > 0 ? [{ lines: effectiveFooter }] : []),
         ],
@@ -327,7 +441,7 @@ export abstract class ScrollableListPanel<T> extends BasePanel {
     }
 
     // Resolve scrollable section (updates scrollStart)
-    const beforeSections = options.header ? [{ lines: options.header as Line[] }] : [];
+    const beforeSections = header ? [{ lines: header }] : [];
     const afterSections = effectiveFooter.length > 0 ? [{ lines: effectiveFooter }] : [];
 
     const resolved = resolveScrollablePanelSection(width, height, {

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,6 +9,7 @@ import { logger } from '@pellux/goodvibes-sdk/platform/utils';
 import type { SessionBrowserQuery } from '../runtime/ui-service-queries.ts';
 import {
   buildEmptyState,
+  buildKeyboardHints,
   buildPanelLine,
   buildSearchInputLine,
   buildStyledPanelLine,
@@ -18,7 +19,7 @@ import {
   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,
@@ -84,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(
@@ -169,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
@@ -178,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) {
@@ -208,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,
@@ -303,7 +325,7 @@ export class SessionBrowserPanel extends BasePanel {
     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, [
@@ -321,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();
     }
   }