feat: adds a Space-to-preview affordance to the /resume session picker

packages/cli/src/ui/components/DialogManager.tsx

@@ -381,6 +381,7 @@ export const DialogManager = ({
         onSelect={uiActions.handleResume}
         onCancel={uiActions.closeResumeDialog}
         initialSessions={uiState.resumeMatchedSessions}
+        enablePreview
       />
     );
   }

packages/cli/src/ui/components/SessionPicker.tsx

@@ -18,6 +18,7 @@ import {
 } from '../utils/sessionPickerUtils.js';
 import { useTerminalSize } from '../hooks/useTerminalSize.js';
 import { t } from '../../i18n/index.js';
+import { SessionPreview } from './SessionPreview.js';
 
 export interface SessionPickerProps {
   sessionService: SessionService | null;
@@ -41,6 +42,14 @@ export interface SessionPickerProps {
    * When provided, skips initial load and disables pagination.
    */
   initialSessions?: SessionData[];
+
+  /**
+   * Enable Space-to-preview. Off by default — preview's Enter shortcut
+   * forwards to `onSelect`, which for resume flows is "resume", but for
+   * destructive flows (e.g. delete) would commit the action. Only opt in
+   * for non-destructive selection flows.
+   */
+  enablePreview?: boolean;
 }
 
 const PREFIX_CHARS = {
@@ -136,6 +145,7 @@ export function SessionPicker(props: SessionPickerProps) {
     title,
     centerSelection = true,
     initialSessions,
+    enablePreview = false,
   } = props;
 
   const { columns: width, rows: height } = useTerminalSize();
@@ -161,8 +171,32 @@ export function SessionPicker(props: SessionPickerProps) {
     centerSelection,
     initialSessions,
     isActive: true,
+    enablePreview,
   });
 
+  if (
+    enablePreview &&
+    picker.viewMode === 'preview' &&
+    picker.previewSessionId &&
+    sessionService
+  ) {
+    const previewed = picker.filteredSessions.find(
+      (s) => s.sessionId === picker.previewSessionId,
+    );
+    return (
+      <SessionPreview
+        sessionService={sessionService}
+        sessionId={picker.previewSessionId}
+        sessionTitle={previewed?.customTitle ?? previewed?.prompt ?? undefined}
+        messageCount={previewed?.messageCount}
+        mtime={previewed?.mtime}
+        gitBranch={previewed?.gitBranch}
+        onExit={picker.exitPreview}
+        onResume={onSelect}
+      />
+    );
+  }
+
   return (
     <Box
       flexDirection="column"
@@ -251,7 +285,12 @@ export function SessionPicker(props: SessionPickerProps) {
                 >
                   B
                 </Text>
-                {t(' to toggle branch')} ·
+                {t(' to toggle branch · ')}
+              </Text>
+            )}
+            {enablePreview && (
+              <Text color={theme.text.secondary}>
+                {t('Space to preview · ')}
               </Text>
             )}
             <Text color={theme.text.secondary}>

packages/cli/src/ui/components/SessionPreview.test.tsx

@@ -0,0 +1,176 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Code
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { render } from 'ink-testing-library';
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { KeypressProvider } from '../contexts/KeypressContext.js';
+import { SessionPreview } from './SessionPreview.js';
+
+beforeEach(() => {
+  Object.defineProperty(process.stdout, 'columns', {
+    value: 80,
+    configurable: true,
+  });
+  Object.defineProperty(process.stdout, 'rows', {
+    value: 24,
+    configurable: true,
+  });
+});
+
+afterEach(() => vi.clearAllMocks());
+
+const wait = (ms = 50) => new Promise((r) => setTimeout(r, ms));
+
+function mockService(resolved: unknown) {
+  return {
+    loadSession: vi
+      .fn()
+      .mockReturnValue(
+        resolved instanceof Promise ? resolved : Promise.resolve(resolved),
+      ),
+    listSessions: vi.fn(),
+    loadLastSession: vi.fn(),
+  } as never;
+}
+
+function fakeResumedData() {
+  return {
+    conversation: {
+      sessionId: 's1',
+      projectHash: 'h',
+      startTime: '2026-01-01T00:00:00.000Z',
+      lastUpdated: '2026-01-01T00:00:00.000Z',
+      messages: [
+        {
+          uuid: 'u1',
+          parentUuid: null,
+          sessionId: 's1',
+          timestamp: '2026-01-01T00:00:00.000Z',
+          type: 'user',
+          cwd: '/tmp',
+          version: 'test',
+          message: {
+            role: 'user',
+            parts: [{ text: 'Hello world PREVIEW-MARKER' }],
+          },
+        },
+        {
+          uuid: 'u2',
+          parentUuid: 'u1',
+          sessionId: 's1',
+          timestamp: '2026-01-01T00:00:01.000Z',
+          type: 'assistant',
+          cwd: '/tmp',
+          version: 'test',
+          message: {
+            role: 'model',
+            parts: [{ text: 'Hi from assistant REPLY-MARKER' }],
+          },
+        },
+      ],
+    },
+    filePath: '/tmp/s1.jsonl',
+    lastCompletedUuid: 'u2',
+  };
+}
+
+describe('SessionPreview', () => {
+  it('shows loading state before data arrives', () => {
+    const svc = mockService(new Promise(() => {})); // never resolves
+    const { lastFrame } = render(
+      <KeypressProvider kittyProtocolEnabled={false}>
+        <SessionPreview
+          sessionService={svc}
+          sessionId="s1"
+          sessionTitle="My session"
+          onExit={vi.fn()}
+          onResume={vi.fn()}
+        />
+      </KeypressProvider>,
+    );
+    expect(lastFrame()).toContain('Loading session preview');
+  });
+
+  it('renders all messages after load', async () => {
+    const svc = mockService(fakeResumedData());
+    const { lastFrame } = render(
+      <KeypressProvider kittyProtocolEnabled={false}>
+        <SessionPreview
+          sessionService={svc}
+          sessionId="s1"
+          sessionTitle="My session"
+          onExit={vi.fn()}
+          onResume={vi.fn()}
+        />
+      </KeypressProvider>,
+    );
+    await wait(100);
+    const frame = lastFrame() ?? '';
+    expect(frame).toContain('PREVIEW-MARKER');
+    expect(frame).toContain('REPLY-MARKER');
+  });
+
+  it('renders footer metadata (messageCount · time · branch)', async () => {
+    const svc = mockService(fakeResumedData());
+    const { lastFrame } = render(
+      <KeypressProvider kittyProtocolEnabled={false}>
+        <SessionPreview
+          sessionService={svc}
+          sessionId="s1"
+          sessionTitle="My session"
+          messageCount={42}
+          mtime={Date.now() - 60_000}
+          gitBranch="feat/preview"
+          onExit={vi.fn()}
+          onResume={vi.fn()}
+        />
+      </KeypressProvider>,
+    );
+    await wait(100);
+    const frame = lastFrame() ?? '';
+    expect(frame).toMatch(/42\s*messages/);
+    expect(frame).toContain('feat/preview');
+  });
+
+  it('calls onExit when Escape is pressed', async () => {
+    const onExit = vi.fn();
+    const svc = mockService(fakeResumedData());
+    const { stdin } = render(
+      <KeypressProvider kittyProtocolEnabled={false}>
+        <SessionPreview
+          sessionService={svc}
+          sessionId="s1"
+          sessionTitle="My session"
+          onExit={onExit}
+          onResume={vi.fn()}
+        />
+      </KeypressProvider>,
+    );
+    await wait(100);
+    stdin.write('\u001B'); // ESC
+    await wait(50);
+    expect(onExit).toHaveBeenCalledTimes(1);
+  });
+
+  it('calls onResume(sessionId) when Enter is pressed', async () => {
+    const onResume = vi.fn();
+    const svc = mockService(fakeResumedData());
+    const { stdin } = render(
+      <KeypressProvider kittyProtocolEnabled={false}>
+        <SessionPreview
+          sessionService={svc}
+          sessionId="s1"
+          sessionTitle="My session"
+          onExit={vi.fn()}
+          onResume={onResume}
+        />
+      </KeypressProvider>,
+    );
+    await wait(100);
+    stdin.write('\r'); // Enter
+    await wait(50);
+    expect(onResume).toHaveBeenCalledWith('s1');
+  });
+});