@pellux/goodvibes-tui 0.27.0 → 0.29.0

package/src/panels/routes-panel.ts

@@ -1,12 +1,15 @@
 import type { Line } from '../types/grid.ts';
 import { createEmptyLine } from '../types/grid.ts';
 import { ScrollableListPanel } from './scrollable-list-panel.ts';
+import type { PanelIntegrationContext } from './types.ts';
+import { SessionBrowserPanel } from './session-browser-panel.ts';
 import type { UiReadModel, UiRoutesSnapshot } from '../runtime/ui-read-models.ts';
 import { truncateDisplay } from '../utils/terminal-width.ts';
 import {
+  buildDetailBlock,
   buildEmptyState,
-  buildGuidanceLine,
   buildKeyValueLine,
+  buildKeyboardHints,
   buildPanelLine,
   buildPanelWorkspace,
   buildStatusPill,
@@ -14,16 +17,9 @@ import {
   type PanelPalette,
 } from './polish.ts';
 
-const C = {
-  ...DEFAULT_PANEL_PALETTE,
-  header: '#94a3b8',
-  headerBg: '#1e293b',
-  ok: '#22c55e',
-  warn: '#eab308',
-  error: '#ef4444',
-  info: '#38bdf8',
-  selectBg: '#0f172a',
-} as const;
+// Base chrome only — title band, state colors, and text tokens all come
+// straight from DEFAULT_PANEL_PALETTE (WO-002).
+const C = DEFAULT_PANEL_PALETTE;
 
 function formatTime(value?: number): string {
   if (!value) return 'n/a';
@@ -32,17 +28,71 @@ function formatTime(value?: number): string {
 
 type RouteBinding = UiRoutesSnapshot['bindings'][number];
 
+// Set by handleInput (enter/c) and consumed on the very next
+// handlePanelIntegrationAction dispatch of that same key — handleInput has
+// no access to the panelManager.
+type PendingRouteAction =
+  | { readonly kind: 'open-session'; readonly sessionId: string }
+  | { readonly kind: 'open-communication' };
+
 export class RoutesPanel extends ScrollableListPanel<RouteBinding> {
   private readonly readModel?: UiReadModel<UiRoutesSnapshot>;
   private readonly unsub: (() => void) | null;
+  private pendingAction: PendingRouteAction | null = null;
 
   public constructor(readModel?: UiReadModel<UiRoutesSnapshot>) {
-    super('routes', 'Routes', 'R', 'monitoring');
+    super('routes', 'Routes', 'R', 'runtime-ops');
     this.showSelectionGutter = true; // I5: non-color selection affordance
+    this.filterEnabled = true;
+    this.filterLabel = 'Filter routes';
     this.readModel = readModel;
     this.unsub = readModel ? readModel.subscribe(() => this.markDirty()) : null;
   }
 
+  public override handleInput(key: string): boolean {
+    if (!this.filterActive) {
+      // Enter jumps to the session browser focused on this binding's session
+      // — a direct panel jump instead of a printed slash-command signpost.
+      if (key === 'enter' || key === 'return') {
+        const selected = this.getSelectedItem();
+        if (selected?.sessionId) {
+          this.pendingAction = { kind: 'open-session', sessionId: selected.sessionId };
+          return true;
+        }
+        return false;
+      }
+      // c opens the communication panel to inspect routed message flow.
+      if (key === 'c') {
+        this.pendingAction = { kind: 'open-communication' };
+        return true;
+      }
+    }
+    return super.handleInput(key);
+  }
+
+  public handlePanelIntegrationAction(_key: string, ctx: PanelIntegrationContext): boolean {
+    if (!this.pendingAction) return false;
+    const action = this.pendingAction;
+    this.pendingAction = null;
+    if (action.kind === 'open-communication') {
+      ctx.panelManager.open('communication');
+      return true;
+    }
+    const panel = ctx.panelManager.open('sessions');
+    if (panel instanceof SessionBrowserPanel) {
+      panel.focusSession(action.sessionId);
+    }
+    return true;
+  }
+
+  protected override filterMatches(binding: RouteBinding, q: string): boolean {
+    return binding.surfaceKind.toLowerCase().includes(q)
+      || (binding.title ?? '').toLowerCase().includes(q)
+      || binding.externalId.toLowerCase().includes(q)
+      || (binding.sessionId ?? '').toLowerCase().includes(q)
+      || (binding.runId ?? '').toLowerCase().includes(q);
+  }
+
   public override onDestroy(): void {
     this.unsub?.();
   }
@@ -109,11 +159,10 @@ export class RoutesPanel extends ScrollableListPanel<RouteBinding> {
     const headerLines: Line[] = [
       buildKeyValueLine(width, [
         { label: 'bindings', value: String(snapshot.totalBindings), valueColor: snapshot.totalBindings > 0 ? C.info : C.dim },
-        { label: 'active', value: String(snapshot.activeBindingIds.length), valueColor: snapshot.activeBindingIds.length > 0 ? C.ok : C.dim },
-        { label: 'resolved', value: String(snapshot.totalResolved), valueColor: snapshot.totalResolved > 0 ? C.ok : C.dim },
-        { label: 'failures', value: String(snapshot.totalFailures), valueColor: snapshot.totalFailures > 0 ? C.error : C.dim },
+        { label: 'active', value: String(snapshot.activeBindingIds.length), valueColor: snapshot.activeBindingIds.length > 0 ? C.good : C.dim },
+        { label: 'resolved', value: String(snapshot.totalResolved), valueColor: snapshot.totalResolved > 0 ? C.good : C.dim },
+        { label: 'failures', value: String(snapshot.totalFailures), valueColor: snapshot.totalFailures > 0 ? C.bad : C.dim },
       ], C),
-      buildGuidanceLine(width, '/communication', 'inspect routed message flow and delivery behavior across bound surfaces', C),
     ];
 
     if (bindings.length === 0) {
@@ -125,9 +174,12 @@ export class RoutesPanel extends ScrollableListPanel<RouteBinding> {
     }
 
     this.clampSelection();
-    const selected = bindings[this.selectedIndex]!;
+    // Detail must describe the row the (possibly filtered) list highlights —
+    // getItems() would desync under an applied filter, and a filter that
+    // matches nothing leaves no selection at all.
+    const selected = this.getSelectedItem();
 
-    const footerLines: Line[] = [
+    const detailRows: Line[] = selected ? [
       buildPanelLine(width, [
         ['  Binding: ', C.label],
         [selected.id, C.value],
@@ -156,23 +208,34 @@ export class RoutesPanel extends ScrollableListPanel<RouteBinding> {
         ['  Last seen: ', C.label],
         [formatTime(selected.lastSeenAt), C.dim],
       ]),
-    ];
+    ] : [];
 
-    if (surfaceEntries.length > 0) {
-      footerLines.push(
-        ...surfaceEntries.slice(0, 6).map(([surface, ids]) => buildPanelLine(width, [
+    if (selected && surfaceEntries.length > 0) {
+      detailRows.push(
+        ...surfaceEntries.slice(0, 4).map(([surface, ids]) => buildPanelLine(width, [
           [' ', C.label],
           [surface.padEnd(10), C.info],
           [` ${String(ids.length)} binding(s)`, C.value],
         ])),
       );
     }
-    footerLines.push(buildPanelLine(width, [['  Up/Down move through route bindings', C.dim]]));
+
+    const hints = this.filterActive
+      ? [{ keys: 'type', label: 'filter' }, { keys: 'Enter', label: 'apply' }, { keys: 'Esc', label: 'clear' }]
+      : [
+          { keys: 'Up/Down', label: 'move' },
+          ...(selected?.sessionId ? [{ keys: 'Enter', label: 'open session' }] : []),
+          { keys: 'c', label: 'communication' },
+          { keys: '/', label: 'filter' },
+        ];
 
     return this.renderList(width, height, {
       title: 'Route Bindings',
       header: headerLines,
-      footer: footerLines,
+      footer: [
+        ...(selected ? buildDetailBlock(width, `Binding · ${selected.surfaceKind}`, detailRows, C) : []),
+        buildKeyboardHints(width, hints, C),
+      ],
     });
   }
 }

package/src/panels/sandbox-panel.ts

@@ -3,44 +3,151 @@ import { createEmptyLine } from '../types/grid.ts';
 import { BasePanel } from './base-panel.ts';
 import { ConfigManager } from '@pellux/goodvibes-sdk/platform/config';
 import { buildSandboxReview, listSandboxPresets, listSandboxProfiles } from '@/runtime/index.ts';
-import type { SandboxSessionRegistry } from '@/runtime/index.ts';
+import type { SandboxProfile, SandboxReview, SandboxSession, SandboxSessionRegistry } from '@/runtime/index.ts';
+import { type ConfirmState, handleConfirmInput, renderConfirmLines } from './confirm-state.ts';
+import { summarizeError } from '@pellux/goodvibes-sdk/platform/utils';
 import {
+  buildAlignedRow,
   buildBodyText,
   buildEmptyState,
   buildGuidanceLine,
+  buildKeyboardHints,
   buildKeyValueLine,
   buildPanelLine,
   buildPanelWorkspace,
   resolveStackedScrollableSections,
   DEFAULT_PANEL_PALETTE,
+  type PanelPalette,
   type PanelWorkspaceSection,
 } from './polish.ts';
 
-const C = {
-  ...DEFAULT_PANEL_PALETTE,
-  header: '#e2e8f0',
-  headerBg: '#0f172a',
-} as const;
+// Base chrome only — title band comes straight from DEFAULT_PANEL_PALETTE
+// (WO-002).
+const C = DEFAULT_PANEL_PALETTE;
+
+/** Poll cadence for live session-state refresh; SandboxSessionRegistry has no event subscription. */
+const POLL_INTERVAL_MS = 3_000;
+
+type Selectable =
+  | { readonly kind: 'profile'; readonly id: SandboxProfile['id'] }
+  | { readonly kind: 'session'; readonly id: string };
+
+/**
+ * One contextual next-step line, derived from the current review/session
+ * state instead of the previous nine-line guidance wall. Picks the single
+ * most relevant action given host warnings, QEMU config gaps, and whether
+ * any session is running yet.
+ */
+function buildContextualGuidance(width: number, review: SandboxReview, sessionCount: number, palette: PanelPalette): Line {
+  if (review.host.warnings.length > 0) {
+    return buildGuidanceLine(width, '/sandbox review', `resolve ${review.host.warnings.length} host warning(s) before enabling QEMU-backed execution`, palette);
+  }
+  if (review.config.vmBackend === 'qemu' && !review.config.qemuImagePath) {
+    return buildGuidanceLine(width, '/sandbox set-qemu-image <path>', 'set the guest image path before enabling QEMU-backed session execution', palette);
+  }
+  if (review.config.vmBackend === 'qemu' && !review.config.qemuExecWrapper) {
+    return buildGuidanceLine(width, '/sandbox set-qemu-wrapper <path>', 'configure the host bridge that actually executes commands inside the QEMU guest', palette);
+  }
+  if (sessionCount === 0) {
+    return buildGuidanceLine(width, 's', 'select a profile below and press s to start a sandbox session', palette);
+  }
+  return buildGuidanceLine(width, '/sandbox session run <id> <command> [args...]', 'run a custom command against a running session from the command line', palette);
+}
+
+const SANDBOX_HINTS = [
+  { keys: '↑/↓', label: 'select' },
+  { keys: 'Home/End', label: 'first profile/session' },
+  { keys: 's', label: 'start' },
+  { keys: 'x', label: 'stop' },
+  { keys: 'e', label: 'execute probe' },
+] as const;
 
 export class SandboxPanel extends BasePanel {
   private selectedIndex = 0;
-  private scrollOffset = 0;
+
+  /**
+   * The profile/session row under the cursor. This panel owns its own
+   * selection state (`selectedIndex` navigates the combined `_selectable()`
+   * list directly), so every selected-row read routes through this one
+   * accessor — indexing the `_selectable()` list by the cursor directly is
+   * banned by the no-raw-selectedindex-read architecture rule.
+   */
+  private selectedSelectable(): Selectable | undefined {
+    return this._selectable().at(this.selectedIndex);
+  }
+
+  private sessionsScrollOffset = 0;
+  private profilesScrollOffset = 0;
+  private confirm: ConfirmState<string> | null = null;
   private readonly config: ConfigManager;
   private readonly sessions: SandboxSessionRegistry;
+  private readonly requestRender: () => void;
 
   public constructor(
     config: ConfigManager,
     sessions: SandboxSessionRegistry,
+    requestRender: () => void = () => {},
   ) {
-    super('sandbox', 'Sandbox', 'X', 'monitoring');
+    super('sandbox', 'Sandbox', '▪', 'security-policy');
     this.config = config;
     this.sessions = sessions;
+    this.requestRender = requestRender;
+    // Live state: SandboxSessionRegistry has no event subscription, so poll
+    // for session state changes (start/stop/execute results) while the
+    // panel is registered.
+    this.registerTimer(setInterval(() => {
+      this.markDirty();
+      this.requestRender();
+    }, POLL_INTERVAL_MS));
+  }
+
+  private _selectable(): Selectable[] {
+    const profiles = listSandboxProfiles(this.config);
+    const sessions = this.sessions.list();
+    return [
+      ...profiles.map((profile): Selectable => ({ kind: 'profile', id: profile.id })),
+      ...sessions.map((session): Selectable => ({ kind: 'session', id: session.id })),
+    ];
   }
 
   public handleInput(key: string): boolean {
-    const profileCount = listSandboxProfiles(this.config).length;
-    const sessionCount = this.sessions.list().length;
-    const itemCount = profileCount + sessionCount;
+    if (this.lastError !== null) this.clearError();
+
+    const confirmResult = handleConfirmInput(this.confirm, key);
+    if (confirmResult === 'confirmed') {
+      const sessionId = this.confirm!.subject;
+      this.confirm = null;
+      this.sessions.stop(sessionId);
+      this.markDirty();
+      return true;
+    }
+    if (confirmResult === 'cancelled') {
+      this.confirm = null;
+      this.markDirty();
+      return true;
+    }
+    if (confirmResult === 'absorbed') return true;
+
+    const selectable = this._selectable();
+    const profileCount = selectable.filter((entry) => entry.kind === 'profile').length;
+    const sessionCount = selectable.length - profileCount;
+    const selected = this.selectedSelectable();
+
+    if (key === 's' && selected?.kind === 'profile') {
+      void this._startSession(selected.id);
+      return true;
+    }
+    if (key === 'x' && selected?.kind === 'session') {
+      this.confirm = { subject: selected.id, label: `sandbox session ${selected.id}`, verb: 'Stop' };
+      this.markDirty();
+      return true;
+    }
+    if (key === 'e' && selected?.kind === 'session') {
+      void this._executeProbe(selected.id);
+      return true;
+    }
+
+    const itemCount = selectable.length;
     if (itemCount === 0) return false;
     if (key === 'up' || key === 'k') {
       this.selectedIndex = Math.max(0, this.selectedIndex - 1);
@@ -65,18 +172,57 @@ export class SandboxPanel extends BasePanel {
     return false;
   }
 
+  /** Start a sandbox session for `profileId` via the shared registry, then repaint. */
+  private async _startSession(profileId: SandboxProfile['id']): Promise<void> {
+    try {
+      await this.sessions.start(profileId, undefined, this.config);
+    } catch (err) {
+      this.setError(summarizeError(err));
+    } finally {
+      this.markDirty();
+      this.requestRender();
+    }
+  }
+
+  /**
+   * Execute a lightweight liveness probe against the selected session so its
+   * live state (last run, exit status, stdout/stderr preview) is genuinely
+   * populated from `SandboxSessionRegistry.execute()`. Panels have no
+   * free-text input widget today, so this proves the execute verb is wired
+   * without inventing one; `/sandbox session run <id> <command> [args...]`
+   * remains available for arbitrary commands.
+   */
+  private async _executeProbe(sessionId: string): Promise<void> {
+    try {
+      this.sessions.execute(sessionId, process.execPath, ['-e', "console.log('sandbox panel probe ok')"], this.config, { timeoutMs: 5_000 });
+    } catch (err) {
+      this.setError(summarizeError(err));
+    } finally {
+      this.markDirty();
+      this.requestRender();
+    }
+  }
+
   public render(width: number, height: number): Line[] {
     this.needsRender = false;
+
+    if (this.confirm) {
+      const lines = buildPanelWorkspace(width, height, {
+        title: 'Sandbox Control Room',
+        sections: [{ title: 'Confirmation', lines: renderConfirmLines(width, this.confirm) }],
+        palette: C,
+      });
+      while (lines.length < height) lines.push(createEmptyLine(width));
+      return lines.slice(0, height);
+    }
+
     const review = buildSandboxReview(this.config);
     const profiles = listSandboxProfiles(this.config);
     const presets = listSandboxPresets();
     const sessions = this.sessions.list();
-    const selectable = [
-      ...profiles.map((profile) => ({ kind: 'profile' as const, id: profile.id })),
-      ...sessions.map((session) => ({ kind: 'session' as const, id: session.id })),
-    ];
+    const selectable = this._selectable();
     this.selectedIndex = Math.min(this.selectedIndex, Math.max(0, selectable.length - 1));
-    const selected = selectable[this.selectedIndex] ?? null;
+    const selected = this.selectedSelectable() ?? null;
     const selectedProfile = selected?.kind === 'profile'
       ? profiles.find((profile) => profile.id === selected.id) ?? null
       : null;
@@ -116,16 +262,9 @@ export class SandboxPanel extends BasePanel {
       buildKeyValueLine(width, [
         { label: 'guest workspace', value: review.config.qemuWorkspacePath || '(not configured)', valueColor: review.config.qemuWorkspacePath ? C.value : C.warn },
       ], C),
-      buildGuidanceLine(width, '/sandbox review', 'inspect local vs QEMU posture, host readiness, and isolation defaults', C),
-      buildGuidanceLine(width, '/sandbox set-qemu-image <path>', 'set the guest image path before enabling QEMU-backed session execution', C),
-      buildGuidanceLine(width, '/sandbox scaffold-qemu-wrapper <path>', 'generate a host-side wrapper scaffold with a bring-up bridge mode and a real guest handoff contract', C),
-      buildGuidanceLine(width, '/sandbox set-qemu-wrapper <path>', 'configure the host bridge that actually executes commands inside the QEMU guest', C),
-      buildGuidanceLine(width, '/sandbox set-qemu-guest-host <host>', 'switch wrapper-backed execution from host bridge mode to real guest SSH transport', C),
-      buildGuidanceLine(width, '/sandbox guest-test <profile>', 'verify SSH guest transport plus workspace projection against the configured QEMU guest host', C),
-      buildGuidanceLine(width, '/sandbox wrapper-test <profile>', 'validate the wrapper bridge contract before wiring a real guest transport', C),
-      buildGuidanceLine(width, '/sandbox session run <id> <command> [args...]', 'execute through a tracked sandbox session and capture runtime metadata on the session record', C),
-      buildGuidanceLine(width, 'GV_SANDBOX_WRAPPER_MODE=host-exec', 'validate the wrapper contract on the host before wiring a real guest transport', C),
-      buildPanelLine(width, [[`  Up/Down move  Home/End jump  focus=profiles+sessions`, C.dim]]),
+      // Single contextual next-step line (replaces the former nine-line
+      // guidance wall) — the only buildGuidanceLine call in this panel.
+      buildContextualGuidance(width, review, sessions.length, C),
     ];
 
     const selectionLines: Line[] = [];
@@ -179,57 +318,84 @@ export class SandboxPanel extends BasePanel {
       sessionLines.push(...buildEmptyState(
         width,
         ' No active sandbox sessions.',
-        'Start a sandbox session from a profile to make the running VM/session posture visible here.',
-        [{ command: '/sandbox session start <profile>', summary: 'start a sandbox session and capture its VM/session record' }],
+        'Select a profile above and press s to start a sandbox session.',
+        [],
         C,
       ));
     } else {
       for (const session of sessions) {
-        const bg = selectedSession?.id === session.id ? C.headerBg : undefined;
-        sessionLines.push(buildPanelLine(width, [
-          ['  ', C.label],
-          [session.profileId.padEnd(15), C.info, bg],
-          [session.state.padEnd(10), session.state === 'running' ? C.good : session.state === 'failed' ? C.bad : C.warn, bg],
-          [(session.shared ? 'shared' : 'dedicated').padEnd(12), C.value, bg],
-          [String(session.resolvedBackend ?? session.backend).padEnd(8), C.dim, bg],
-          [` ${(session.startupStatus ?? 'n/a').slice(0, 8).padEnd(8)}`, session.startupStatus === 'verified' ? C.good : session.startupStatus === 'failed' ? C.bad : C.warn, bg],
-          [` ${String(session.executionCount ?? 0).padStart(3)}x`, C.info, bg],
-          [` ${session.id.slice(0, Math.max(8, Math.min(14, width - 64)))}`, C.dim, bg],
-        ]));
+        const selectedRow = selectedSession?.id === session.id;
+        sessionLines.push(buildAlignedRow(
+          width,
+          [
+            { text: session.profileId, fg: C.info },
+            { text: session.state, fg: session.state === 'running' ? C.good : session.state === 'failed' ? C.bad : C.warn },
+            { text: session.shared ? 'shared' : 'dedicated', fg: C.value },
+            { text: String(session.resolvedBackend ?? session.backend), fg: C.dim },
+            { text: session.startupStatus ?? 'n/a', fg: session.startupStatus === 'verified' ? C.good : session.startupStatus === 'failed' ? C.bad : C.warn },
+            { text: `${session.executionCount ?? 0}x`, fg: C.info },
+            { text: session.id, fg: C.dim },
+          ],
+          [
+            { width: 15 },
+            { width: 10 },
+            { width: 12 },
+            { width: 8 },
+            { width: 9 },
+            { width: 5, align: 'right' },
+            { width: Math.max(8, width - 72) },
+          ],
+          { selected: selectedRow, selectedBg: C.headerBg },
+        ));
       }
     }
 
     const presetLines: Line[] = [];
     for (const preset of presets.slice(0, 2)) {
-      presetLines.push(buildPanelLine(width, [
-        ['  ', C.label],
-        [preset.id.padEnd(18), C.info],
-        [preset.config.replIsolation.padEnd(16), C.value],
-        [preset.config.mcpIsolation.padEnd(16), C.dim],
-        [preset.config.windowsMode, C.warn],
-      ]));
+      presetLines.push(buildAlignedRow(
+        width,
+        [
+          { text: preset.id, fg: C.info },
+          { text: preset.config.replIsolation, fg: C.value },
+          { text: preset.config.mcpIsolation, fg: C.dim },
+          { text: preset.config.windowsMode, fg: C.warn },
+        ],
+        [
+          { width: 18 },
+          { width: 16 },
+          { width: 16 },
+          { width: Math.max(8, width - 62) },
+        ],
+        {},
+      ));
     }
 
     const profileLines: Line[] = [];
     for (const profile of profiles) {
-      const bg = selectedProfile?.id === profile.id ? C.headerBg : undefined;
-      profileLines.push(buildPanelLine(width, [
-        ['  ', C.label],
-        [profile.id.padEnd(15), C.info, bg],
-        [profile.isolation.padEnd(14), C.value, bg],
-        [profile.kind.padEnd(12), C.dim, bg],
-        [` vm=${profile.requiresVm ? 'yes' : 'no'}`, profile.requiresVm ? C.good : C.warn, bg],
-      ]));
+      const selectedRow = selectedProfile?.id === profile.id;
+      profileLines.push(buildAlignedRow(
+        width,
+        [
+          { text: profile.id, fg: C.info },
+          { text: profile.isolation, fg: C.value },
+          { text: profile.kind, fg: C.dim },
+          { text: `vm=${profile.requiresVm ? 'yes' : 'no'}`, fg: profile.requiresVm ? C.good : C.warn },
+        ],
+        [
+          { width: 15 },
+          { width: 14 },
+          { width: 12 },
+          { width: Math.max(6, width - 53) },
+        ],
+        { selected: selectedRow, selectedBg: C.headerBg },
+      ));
     }
     const postureSection: PanelWorkspaceSection = { title: 'Sandbox posture', lines: overviewLines };
     const selectedSection: PanelWorkspaceSection = { title: selectedProfile ? 'Selected Profile' : 'Selected Session', lines: selectionLines };
     const presetsSection: PanelWorkspaceSection = { title: 'Presets', lines: presetLines };
     const [sessionsSection, profilesSection] = resolveStackedScrollableSections(width, height, {
       intro,
-      footerLines: [
-        buildGuidanceLine(width, '/sandbox presets', 'compare secure, balanced, and shared sandbox operating modes', C),
-        buildGuidanceLine(width, '/sandbox apply-preset <id>', 'change local vs QEMU isolation policy without editing config by hand', C),
-      ],
+      footerLines: [buildKeyboardHints(width, SANDBOX_HINTS, C)],
       palette: C,
       beforeSections: [
         postureSection,
@@ -240,7 +406,7 @@ export class SandboxPanel extends BasePanel {
           title: 'Sessions',
           scrollableLines: sessionLines,
           selectedIndex: selectedSession ? Math.max(0, sessions.findIndex((session) => session.id === selectedSession.id)) : undefined,
-          scrollOffset: this.scrollOffset,
+          scrollOffset: this.sessionsScrollOffset,
           minRows: 2,
           weight: 1,
           appendWindowSummary: sessions.length > 0 ? {
@@ -252,7 +418,7 @@ export class SandboxPanel extends BasePanel {
           title: 'Profiles',
           scrollableLines: profileLines,
           selectedIndex: selectedProfile ? Math.max(0, profiles.findIndex((profile) => profile.id === selectedProfile.id)) : undefined,
-          scrollOffset: this.scrollOffset,
+          scrollOffset: this.profilesScrollOffset,
           minRows: 2,
           weight: 1,
           appendWindowSummary: profiles.length > 0 ? {
@@ -263,7 +429,8 @@ export class SandboxPanel extends BasePanel {
       ],
       afterSections: [presetsSection],
     });
-    this.scrollOffset = sessionsSection?.scrollOffset ?? this.scrollOffset;
+    this.sessionsScrollOffset = sessionsSection?.scrollOffset ?? this.sessionsScrollOffset;
+    this.profilesScrollOffset = profilesSection?.scrollOffset ?? this.profilesScrollOffset;
 
     const sections: PanelWorkspaceSection[] = [
       postureSection,
@@ -273,14 +440,14 @@ export class SandboxPanel extends BasePanel {
       profilesSection?.section ?? { title: 'Profiles', lines: profileLines },
     ];
 
+    const errorLine = this.renderErrorLine(width);
+    if (errorLine) sections.push({ title: 'Error', lines: [errorLine] });
+
     const lines = buildPanelWorkspace(width, height, {
       title: 'Sandbox Control Room',
       intro,
       sections,
-      footerLines: [
-        buildGuidanceLine(width, '/sandbox presets', 'compare secure, balanced, and shared sandbox operating modes', C),
-        buildGuidanceLine(width, '/sandbox apply-preset <id>', 'change local vs QEMU isolation policy without editing config by hand', C),
-      ],
+      footerLines: [buildKeyboardHints(width, SANDBOX_HINTS, C)],
       palette: C,
     });
     while (lines.length < height) lines.push(createEmptyLine(width));