@pellux/goodvibes-tui 0.27.0 → 0.29.0

package/src/panels/services-panel.ts

@@ -1,42 +1,40 @@
 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 { PanelIntegrationContext } from './types.ts';
 import {
   type ServiceConfig,
   type ServiceInspection,
   type ServiceConnectionTestResult,
 } from '@pellux/goodvibes-sdk/platform/config';
+import { summarizeError } from '@pellux/goodvibes-sdk/platform/utils';
 import type { ServiceInspectionQuery, SubscriptionAccessQuery } from '../runtime/ui-service-queries.ts';
 import {
-  buildEmptyState,
+  buildDetailBlock,
+  buildKeyValueLine,
+  buildKeyboardHints,
   buildPanelLine,
   buildPanelWorkspace,
   buildStatusPill,
   DEFAULT_PANEL_PALETTE,
 } from './polish.ts';
 
-const C = {
-  ...DEFAULT_PANEL_PALETTE,
-  header: '#94a3b8',
-  headerBg: '#1e293b',
-  label: '#64748b',
-  value: '#e2e8f0',
-  dim: '#475569',
-  ok: '#22c55e',
-  warn: '#eab308',
-  error: '#ef4444',
-  info: '#38bdf8',
-  selectBg: '#0f172a',
-  empty: '#334155',
-} 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;
 
 interface ServicePanelEntry {
   readonly name: string;
-  readonly inspection: ServiceInspection;
+  // null when registry.inspect(name) resolved null (e.g. a config entry that
+  // disappeared or failed to resolve between getAll() and inspect()) — the
+  // row still renders, flagged, instead of crashing the whole refresh.
+  readonly inspection: ServiceInspection | null;
   readonly lastTest?: ServiceConnectionTestResult;
 }
 
 function statusLabel(entry: ServicePanelEntry): string {
+  if (!entry.inspection) return 'INSPECT FAILED';
   if (!entry.inspection.hasPrimaryCredential) return 'UNCONFIGURED';
   if (entry.lastTest?.ok) return 'HEALTHY';
   if (entry.lastTest && !entry.lastTest.ok) return 'ERROR';
@@ -45,8 +43,8 @@ function statusLabel(entry: ServicePanelEntry): string {
 
 function statusColor(entry: ServicePanelEntry): string {
   const label = statusLabel(entry);
-  if (label === 'HEALTHY') return C.ok;
-  if (label === 'ERROR') return C.error;
+  if (label === 'HEALTHY') return C.good;
+  if (label === 'ERROR' || label === 'INSPECT FAILED') return C.bad;
   if (label === 'CONFIGURED') return C.warn;
   return C.dim;
 }
@@ -73,18 +71,29 @@ export class ServicesPanel extends ScrollableListPanel<ServicePanelEntry> {
   private readonly subscriptionManager: SubscriptionAccessQuery;
   private entries: ServicePanelEntry[] = [];
   private loading = false;
+  // s = open the Subscription panel via the handleInput -> handlePanelIntegrationAction
+  // bridge (handleInput has no ctx.panelManager — same pattern used elsewhere in
+  // this wave, e.g. session-browser-panel.ts's pendingOpenPanels).
+  private pendingOpenSubscription = false;
 
   public constructor(
     registry: ServiceInspectionQuery,
     subscriptionManager: SubscriptionAccessQuery,
   ) {
-    super('services', 'Services', 'V', 'monitoring');
+    super('services', 'Services', 'V', 'providers');
     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) {
@@ -97,7 +106,7 @@ export class ServicesPanel extends ScrollableListPanel<ServicePanelEntry> {
   protected override getEmptyStateActions() {
     return [
       { command: '/services auth-review', summary: 'inspect service auth posture and registry config' },
-      { command: '/subscription', summary: 'review provider login state and override posture' },
+      { command: 's', summary: 'open the Subscription panel — review provider login state and override posture' },
     ];
   }
 
@@ -107,60 +116,106 @@ export class ServicesPanel extends ScrollableListPanel<ServicePanelEntry> {
 
   protected renderItem(entry: ServicePanelEntry, index: number, selected: boolean, width: number): Line {
     const bg = selected ? C.selectBg : undefined;
+    const authText = entry.inspection ? authSummary(entry.inspection.config, this.subscriptionManager) : 'n/a';
+    const baseUrlText = entry.inspection ? (entry.inspection.config.baseUrl ?? '(no baseUrl)') : '(inspection failed)';
     return buildPanelLine(width, [
       [' ', C.label, bg],
       [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],
+      [` ${authText.padEnd(18)}`, C.info, bg],
+      [` ${truncateDisplay(baseUrlText, 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;
+      }
+      if (key === 'T') {
+        void this.testAll();
+        return true;
+      }
+      if (key === 's') {
+        this.pendingOpenSubscription = true;
+        return true;
+      }
     }
     return super.handleInput(key);
   }
 
+  /** Drains the 's' key's pending open request via the ctx.panelManager bridge. */
+  handlePanelIntegrationAction(_key: string, ctx: PanelIntegrationContext): boolean {
+    if (!this.pendingOpenSubscription) return false;
+    this.pendingOpenSubscription = false;
+    ctx.panelManager.open('subscription');
+    return true;
+  }
+
   private async refresh(): Promise<void> {
     this.loading = true;
     this.markDirty();
-    const configs = this.registry.getAll();
-    const names = Object.keys(configs).sort((a, b) => a.localeCompare(b));
-    const inspections = await Promise.all(
-      names.map(async (name) => ({
-        name,
-        inspection: (await this.registry.inspect(name))!,
-      })),
-    );
-    const previousTests = new Map(this.entries.map((entry) => [entry.name, entry.lastTest] as const));
-    this.entries = inspections.map((entry) => ({
-      ...entry,
-      ...(previousTests.get(entry.name) ? { lastTest: previousTests.get(entry.name) } : {}),
-    }));
-    this.selectedIndex = Math.min(this.selectedIndex, Math.max(0, this.entries.length - 1));
-    this.loading = false;
-    this.markDirty();
+    try {
+      const configs = this.registry.getAll();
+      const names = Object.keys(configs).sort((a, b) => a.localeCompare(b));
+      const inspections = await Promise.all(
+        names.map(async (name) => ({
+          name,
+          inspection: await this.registry.inspect(name),
+        })),
+      );
+      const previousTests = new Map(this.entries.map((entry) => [entry.name, entry.lastTest] as const));
+      this.entries = inspections.map((entry) => ({
+        ...entry,
+        ...(previousTests.get(entry.name) ? { lastTest: previousTests.get(entry.name) } : {}),
+      }));
+      this.selectedIndex = Math.min(this.selectedIndex, Math.max(0, this.entries.length - 1));
+    } catch (e) {
+      this.setError(`Refresh failed: ${summarizeError(e)}`);
+    } finally {
+      // Always clear the loading flag — a thrown getAll()/inspect() must
+      // never leave the panel stuck on the "Loading configured services..." screen.
+      this.loading = false;
+      this.markDirty();
+    }
   }
 
   private async testSelected(): Promise<void> {
-    const selected = this.entries[this.selectedIndex];
+    // selectedIndex tracks the filtered view, so the acted-on entry must come
+    // from getVisibleItems() — this.entries would desync under a '/' filter.
+    const selected = this.getSelectedItem();
     if (!selected) return;
-    const result = await this.registry.testConnection(selected.name);
-    this.entries = this.entries.map((entry) => (
-      entry.name === selected.name
-        ? { ...entry, lastTest: result }
-        : entry
-    ));
+    try {
+      const result = await this.registry.testConnection(selected.name);
+      this.entries = this.entries.map((entry) => (
+        entry.name === selected.name
+          ? { ...entry, lastTest: result }
+          : entry
+      ));
+    } catch (e) {
+      this.setError(`Test failed: ${summarizeError(e)}`);
+    }
     this.markDirty();
   }
 
+  /** T = test every configured service's connection, one call per row (services-runtime.ts's single-service test pattern, looped). */
+  private async testAll(): Promise<void> {
+    for (const entry of this.entries) {
+      try {
+        const result = await this.registry.testConnection(entry.name);
+        this.entries = this.entries.map((e) => (e.name === entry.name ? { ...e, lastTest: result } : e));
+      } catch (e) {
+        this.setError(`Test failed for ${entry.name}: ${summarizeError(e)}`);
+      }
+      this.markDirty();
+    }
+  }
+
   public render(width: number, height: number): Line[] {
     this.clampSelection();
     const intro = 'Credential posture, subscription overrides, and live connection checks for configured services.';
@@ -176,55 +231,98 @@ export class ServicesPanel extends ScrollableListPanel<ServicePanelEntry> {
       return lines;
     }
 
-    const selected = this.entries[this.selectedIndex];
-    const detailLines: Line[] = [];
+    // 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.good : C.dim },
+        { label: 'errors', value: String(counts.error), valueColor: counts.error > 0 ? C.bad : C.dim },
+        { label: 'unconfigured', value: String(counts.unconfigured), valueColor: counts.unconfigured > 0 ? C.warn : C.dim },
+      ], C),
+    ];
+
+    // Detail must describe the row the (possibly filtered) list highlights.
+    const selected = this.getSelectedItem();
+    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],
         [statusLabel(selected), statusColor(selected)],
         ['  Auth: ', C.label],
-        [authSummary(inspect.config, this.subscriptionManager), C.info],
-      ]));
-      detailLines.push(buildPanelLine(width, [
-        ['  Primary credential: ', C.label],
-        ...buildStatusPill(inspect.hasPrimaryCredential ? 'good' : 'bad', inspect.hasPrimaryCredential ? 'present' : 'missing'),
-        ['  Webhook URL: ', C.label],
-        ...buildStatusPill(inspect.hasWebhookUrl ? 'good' : 'info', inspect.hasWebhookUrl ? 'present' : 'missing'),
-        ['  Signing secret: ', C.label],
-        ...buildStatusPill(inspect.hasSigningSecret ? 'good' : 'info', inspect.hasSigningSecret ? 'present' : 'missing'),
-        ['  App token: ', C.label],
-        ...buildStatusPill(inspect.hasAppToken ? 'good' : 'info', inspect.hasAppToken ? 'present' : 'missing'),
+        [inspect ? authSummary(inspect.config, this.subscriptionManager) : 'n/a', C.info],
       ]));
+      if (!inspect) {
+        detailRows.push(buildPanelLine(width, [
+          ['  Inspection failed — the registry could not resolve this service\'s config. Press r to retry.', C.bad],
+        ]));
+      } else {
+        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],
+          ...buildStatusPill(inspect.hasWebhookUrl ? 'good' : 'info', inspect.hasWebhookUrl ? 'present' : 'missing'),
+          ['  Signing secret: ', C.label],
+          ...buildStatusPill(inspect.hasSigningSecret ? 'good' : 'info', inspect.hasSigningSecret ? 'present' : 'missing'),
+          ['  App token: ', C.label],
+          ...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.bad],
           ]));
         }
       } 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' }] : []),
+          ...(this.entries.length > 0 ? [{ keys: 'T', label: 'test all' }] : []),
+          { keys: 'r', label: 'refresh' },
+          { keys: '/', label: 'filter' },
+          { keys: 's', label: 'subscription panel' },
+        ];
+
+    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

@@ -4,11 +4,13 @@
 
 import type { Line } from '../types/grid.ts';
 import { BasePanel } from './base-panel.ts';
+import type { PanelIntegrationContext } from './types.ts';
 import type { SessionInfo } from '@pellux/goodvibes-sdk/platform/sessions';
 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 +20,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,
@@ -39,6 +41,15 @@ const C = extendPalette(DEFAULT_PANEL_PALETTE, {
   countFg:  '#88bbcc',
 });
 
+// Splits a computed '/command arg1 arg2' string into the { name, args } shape
+// ctx.executeCommand expects — same leading-slash-stripping approach used by
+// remote-panel.ts for its own dispatched command.
+function parseCommand(command: string): { name: string; args: string[] } | null {
+  const parts = command.replace(/^\//, '').split(/\s+/).filter(Boolean);
+  const [name, ...args] = parts;
+  return name ? { name, args } : null;
+}
+
 function shortDate(ts: number): string {
   const d = new Date(ts);
   const Y = d.getFullYear();
@@ -84,7 +95,14 @@ 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;
+  // x = dispatch the computed next-step command ('/remote recover <runner>'
+  // or '/session resume <name>') via the same handleInput -> handlePanelIntegrationAction
+  // bridge remote-panel.ts uses — handleInput has no ctx.executeCommand.
+  private pendingCommand: { name: string; args: string[] } | null = null;
+  // On resume, restore any panels the session had open when it was saved.
+  private pendingOpenPanels: string[] | null = null;
 
   constructor(
     private readonly sessionManager: SessionBrowserQuery,
@@ -99,6 +117,21 @@ export class SessionBrowserPanel extends BasePanel {
     this.refreshTimerId = this.registerTimer(setInterval(() => { this._load(); }, 5000));
   }
 
+  /**
+   * Clears any active search/filter and moves the cursor to the session
+   * matching `sessionId` (SessionInfo.name) so a sibling panel (e.g.
+   * RoutesPanel's Enter-on-binding jump) can land directly on it. No-ops
+   * (beyond clearing the filter) if the session isn't found.
+   */
+  focusSession(sessionId: string): void {
+    this.searching = false;
+    this.searchQuery = '';
+    this._filter();
+    const index = this.filtered.findIndex((session) => session.name === sessionId);
+    if (index >= 0) this.cursorIndex = index;
+    this.markDirty();
+  }
+
   override onDeactivate(): void {
     if (this.refreshTimerId !== null) { this.clearTimer(this.refreshTimerId); this.refreshTimerId = null; }
     this.searching = false;
@@ -161,16 +194,47 @@ export class SessionBrowserPanel extends BasePanel {
       case 'return':   this._resume();      return true;
       case 'd':        this._promptDelete(); return true;
       case 'r':        this._load();        return true;
+      case 'x':        this._dispatchNextStep(); return true;
       default:         return false;
     }
   }
 
+  /**
+   * Drains `pendingCommand` (set by the 'x' key) and `pendingOpenPanels`
+   * (set by `_resume()`) via the ctx.executeCommand / PanelManager bridge.
+   * Called by the input router immediately after handleInput() consumes the
+   * same key (panel-integration-actions.ts's onPanelInputConsumed).
+   */
+  handlePanelIntegrationAction(_key: string, ctx: PanelIntegrationContext): boolean {
+    let consumed = false;
+    if (this.pendingCommand) {
+      const { name, args } = this.pendingCommand;
+      this.pendingCommand = null;
+      void ctx.executeCommand?.(name, args);
+      consumed = true;
+    }
+    if (this.pendingOpenPanels) {
+      const openPanels = this.pendingOpenPanels;
+      this.pendingOpenPanels = null;
+      for (const panelId of openPanels) ctx.panelManager.open(panelId);
+      consumed = true;
+    }
+    return consumed;
+  }
+
   render(width: number, height: number): Line[] {
     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 +242,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: 'x', label: 'run next step' }, { 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 +282,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,
@@ -263,7 +340,7 @@ export class SessionBrowserPanel extends BasePanel {
             ...formatReturnContextLines(selected.returnContext).map((line) =>
               buildPanelLine(width, [[' ', DEFAULT_PANEL_PALETTE.dim], [truncateDisplay(line, Math.max(0, width - 2)), DEFAULT_PANEL_PALETTE.dim]])
             ),
-            buildPanelLine(width, [[' Next ', DEFAULT_PANEL_PALETTE.label], [selected.returnContext?.remoteRunners?.length ? `/remote recover ${selected.returnContext.remoteRunners[0]}` : '/session resume', DEFAULT_PANEL_PALETTE.dim]]),
+            buildPanelLine(width, [[' Next ', DEFAULT_PANEL_PALETTE.label], [this._computeNextStepCommand(selected), DEFAULT_PANEL_PALETTE.dim], ['   (x to run)', DEFAULT_PANEL_PALETTE.dim]]),
           ],
         }
       : { title: 'Selected', lines: [] };
@@ -303,7 +380,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 +398,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();
     }
   }
@@ -365,9 +444,25 @@ export class SessionBrowserPanel extends BasePanel {
   private _resume(): void {
     const sess = this.filtered[this.cursorIndex];
     if (!sess) return;
+    if (sess.returnContext?.openPanels?.length) {
+      this.pendingOpenPanels = [...sess.returnContext.openPanels];
+    }
     this.resumeSession?.(sess.name);
   }
 
+  /** The next-step command shown in the 'Selected' section and dispatched by 'x'. */
+  private _computeNextStepCommand(sess: SessionInfo): string {
+    const runner = sess.returnContext?.remoteRunners?.[0];
+    return runner ? `/remote recover ${runner}` : `/session resume ${sess.name}`;
+  }
+
+  private _dispatchNextStep(): void {
+    const sess = this.filtered[this.cursorIndex];
+    if (!sess) return;
+    const parsed = parseCommand(this._computeNextStepCommand(sess));
+    if (parsed) this.pendingCommand = parsed;
+  }
+
   private _promptDelete(): void {
     const sess = this.filtered[this.cursorIndex];
     if (!sess) return;