repoburg 1.3.188 → 1.3.196

package/agent-pane/frontend/src/components/input/SlashPopup.test.tsx

@@ -0,0 +1,96 @@
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import { render, screen, fireEvent, cleanup } from '@testing-library/react';
+import SlashPopup, { filterCommands, type SlashCommand } from './SlashPopup.tsx';
+
+const ALL_CAPS = {
+  dynamicModels: true,
+  skills: true,
+  plugins: true,
+  mcpServers: true,
+  imageAttachments: true,
+  sandbox: true,
+  webSearch: true,
+  networkAccess: true,
+  fileReferences: true,
+};
+
+const NO_CAPS = {
+  dynamicModels: false,
+  skills: false,
+  plugins: false,
+  mcpServers: false,
+  imageAttachments: false,
+  sandbox: false,
+  webSearch: false,
+  networkAccess: false,
+  fileReferences: false,
+};
+
+describe('filterCommands', () => {
+  it('returns all commands when all capabilities enabled and no filter', () => {
+    const cmds = filterCommands('', ALL_CAPS);
+    expect(cmds.length).toBe(7);
+  });
+
+  it('filters by text', () => {
+    const cmds = filterCommands('sand', ALL_CAPS);
+    expect(cmds).toHaveLength(1);
+    expect(cmds[0].id).toBe('sandbox');
+  });
+
+  it('hides commands when capability is false', () => {
+    const cmds = filterCommands('', NO_CAPS);
+    // All commands have a capability requirement, so none should show
+    expect(cmds).toHaveLength(0);
+  });
+
+  it('shows only commands with matching capability', () => {
+    const partial = { ...NO_CAPS, sandbox: true, webSearch: true };
+    const cmds = filterCommands('', partial);
+    expect(cmds).toHaveLength(2);
+    expect(cmds.map((c) => c.id)).toEqual(['sandbox', 'websearch']);
+  });
+});
+
+describe('SlashPopup', () => {
+  afterEach(cleanup);
+
+  const commands: SlashCommand[] = [
+    { id: 'sandbox', label: '/sandbox', hint: 'Sandbox mode', capability: 'sandbox', subPopup: 'sandbox' },
+    { id: 'websearch', label: '/websearch', hint: 'Web search', capability: 'webSearch', subPopup: 'websearch' },
+  ];
+
+  it('renders all commands', () => {
+    render(<SlashPopup commands={commands} selectedIndex={0} onSelect={() => {}} onHover={() => {}} />);
+    expect(screen.getByText('/sandbox')).toBeInTheDocument();
+    expect(screen.getByText('/websearch')).toBeInTheDocument();
+  });
+
+  it('shows empty state when no commands', () => {
+    render(<SlashPopup commands={[]} selectedIndex={0} onSelect={() => {}} onHover={() => {}} />);
+    expect(screen.getByText('No matching commands')).toBeInTheDocument();
+  });
+
+  it('calls onSelect when command is clicked', () => {
+    const onSelect = vi.fn();
+    render(<SlashPopup commands={commands} selectedIndex={0} onSelect={onSelect} onHover={() => {}} />);
+    fireEvent.click(screen.getByText('/sandbox'));
+    expect(onSelect).toHaveBeenCalledWith(commands[0]);
+  });
+
+  it('applies selected class to the selected index', () => {
+    const { container } = render(
+      <SlashPopup commands={commands} selectedIndex={1} onSelect={() => {}} onHover={() => {}} />,
+    );
+    const items = container.querySelectorAll('.slash-popup-item');
+    expect(items[1]).toHaveClass('selected');
+    expect(items[0]).not.toHaveClass('selected');
+  });
+
+  it('calls onHover on mouse enter', () => {
+    const onHover = vi.fn();
+    render(<SlashPopup commands={commands} selectedIndex={0} onSelect={() => {}} onHover={onHover} />);
+    fireEvent.mouseEnter(screen.getByText('/websearch'));
+    expect(onHover).toHaveBeenCalledWith(1);
+  });
+});

package/agent-pane/frontend/src/components/input/SlashPopup.tsx

@@ -0,0 +1,63 @@
+import type { ProviderCapabilities } from '../../types/index.ts';
+
+/** A slash command definition. */
+export interface SlashCommand {
+  id: string;
+  label: string;
+  hint: string;
+  /** Capability required to show this command. If null, always visible. */
+  capability: keyof ProviderCapabilities | null;
+  /** Sub-popup type to open when selected. */
+  subPopup?: 'sandbox' | 'websearch' | 'network';
+}
+
+/** All available slash commands. */
+const ALL_COMMANDS: SlashCommand[] = [
+  { id: 'model', label: '/model', hint: 'Change model', capability: 'dynamicModels' },
+  { id: 'sandbox', label: '/sandbox', hint: 'Sandbox mode', capability: 'sandbox', subPopup: 'sandbox' },
+  { id: 'websearch', label: '/websearch', hint: 'Web search mode', capability: 'webSearch', subPopup: 'websearch' },
+  { id: 'network', label: '/network', hint: 'Network access', capability: 'networkAccess', subPopup: 'network' },
+  { id: 'skills', label: '/skills', hint: 'Browse skills', capability: 'skills' },
+  { id: 'plugins', label: '/plugins', hint: 'Browse plugins', capability: 'plugins' },
+  { id: 'mcp', label: '/mcp', hint: 'Browse MCP servers', capability: 'mcpServers' },
+];
+
+/** Filter commands by capability and text filter. */
+export function filterCommands(
+  filter: string,
+  capabilities: ProviderCapabilities,
+): SlashCommand[] {
+  return ALL_COMMANDS.filter((cmd) => {
+    if (cmd.capability && !capabilities[cmd.capability]) return false;
+    if (filter && !cmd.label.toLowerCase().includes(filter.toLowerCase())) return false;
+    return true;
+  });
+}
+
+interface SlashPopupProps {
+  commands: SlashCommand[];
+  selectedIndex: number;
+  onSelect: (cmd: SlashCommand) => void;
+  onHover: (index: number) => void;
+}
+
+/** Presentational slash command popup. Keyboard navigation is handled by the parent. */
+export default function SlashPopup({ commands, selectedIndex, onSelect, onHover }: SlashPopupProps) {
+  return (
+    <div className="slash-popup">
+      <div className="slash-popup-header">Commands</div>
+      {commands.length === 0 && <div className="slash-popup-empty">No matching commands</div>}
+      {commands.map((cmd, i) => (
+        <div
+          key={cmd.id}
+          className={`slash-popup-item ${i === selectedIndex ? 'selected' : ''}`}
+          onMouseEnter={() => onHover(i)}
+          onClick={() => onSelect(cmd)}
+        >
+          <span className="slash-popup-label">{cmd.label}</span>
+          <span className="slash-popup-hint">{cmd.hint}</span>
+        </div>
+      ))}
+    </div>
+  );
+}

package/agent-pane/frontend/src/components/panels/ChangesPanel.test.tsx

@@ -0,0 +1,61 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { render, screen, fireEvent, cleanup } from '@testing-library/react';
+import ChangesPanel from './ChangesPanel.tsx';
+import { resetStore } from '../../test/component-helpers.ts';
+import { makeDetail, makeTurn, makeItem } from '../../test/fixtures.ts';
+
+describe('ChangesPanel', () => {
+  beforeEach(() => {
+    resetStore();
+  });
+  afterEach(() => {
+    cleanup();
+  });
+
+  it('shows empty state when no file changes', () => {
+    const detail = makeDetail('s1', []);
+    resetStore({ activeSessionId: 's1', sessionDetails: { s1: detail } });
+    render(<ChangesPanel />);
+    expect(screen.getByText('No file changes in this scope')).toBeInTheDocument();
+  });
+
+  it('session scope button is active by default', () => {
+    const detail = makeDetail('s1', []);
+    resetStore({ activeSessionId: 's1', sessionDetails: { s1: detail } });
+    render(<ChangesPanel />);
+    const sessionBtn = screen.getByText('Session');
+    expect(sessionBtn.closest('.scope-btn')).toHaveClass('active');
+  });
+
+  it('click "Current Turn" switches scope to turngroup', () => {
+    const setChangesScope = vi.fn();
+    const detail = makeDetail('s1', []);
+    resetStore({ activeSessionId: 's1', sessionDetails: { s1: detail }, setChangesScope });
+    render(<ChangesPanel />);
+    fireEvent.click(screen.getByText('Current Turn'));
+    expect(setChangesScope).toHaveBeenCalledWith('turngroup');
+  });
+
+  it('renders file change entries with A/D/M status', () => {
+    const item = makeItem('i1', 't1', 'file_change');
+    item.data = { changes: [{ path: 'src/main.ts', kind: 'add' }, { path: 'src/old.ts', kind: 'delete' }] };
+    const turn = makeTurn('t1', 's1', { items: [item] });
+    const detail = makeDetail('s1', [turn]);
+    resetStore({ activeSessionId: 's1', sessionDetails: { s1: detail } });
+    render(<ChangesPanel />);
+    expect(screen.getByText(/main\.ts/)).toBeInTheDocument();
+    expect(screen.getByText(/old\.ts/)).toBeInTheDocument();
+  });
+
+  it('click on file change calls setSelectedChangePath', () => {
+    const setSelectedChangePath = vi.fn();
+    const item = makeItem('i1', 't1', 'file_change');
+    item.data = { changes: [{ path: 'src/app.ts', kind: 'modify' }] };
+    const turn = makeTurn('t1', 's1', { items: [item] });
+    const detail = makeDetail('s1', [turn]);
+    resetStore({ activeSessionId: 's1', sessionDetails: { s1: detail }, setSelectedChangePath });
+    render(<ChangesPanel />);
+    fireEvent.click(screen.getByText(/app\.ts/).closest('.file-change')!);
+    expect(setSelectedChangePath).toHaveBeenCalledWith('src/app.ts');
+  });
+});

package/agent-pane/frontend/src/components/panels/ChangesPanel.tsx

@@ -1,40 +1,13 @@
 import { useStore } from '../../store/store.ts';
+import { collectFileChanges } from '../../utils/changes.ts';
 
 export default function ChangesPanel() {
-  const { activeSessionId, sessionDetails, changesScope, setChangesScope, activeTurnIndex, setSelectedChangePath } = useStore();
+  const { activeSessionId, sessionDetails, changesScope, setChangesScope, activeTurnIndex, setSelectedChangePath } =
+    useStore();
   const detail = activeSessionId ? sessionDetails[activeSessionId] : null;
   const turns = detail?.turns ?? [];
 
-  // Collect file_change items
-  type ChangeEntry = { path: string; kind: string };
-  const entries: ChangeEntry[] = [];
-
-  if (changesScope === 'session') {
-    turns.forEach((turn) => {
-      turn.items.forEach((item) => {
-        if (item.type === 'file_change' && item.data?.changes) {
-          const changes = item.data.changes as Array<{ path: string; kind: string }>;
-          changes.forEach((c) => entries.push({ path: c.path, kind: c.kind }));
-        }
-      });
-    });
-  } else {
-    // Current turn only
-    const turn = turns[activeTurnIndex];
-    if (turn) {
-      turn.items.forEach((item) => {
-        if (item.type === 'file_change' && item.data?.changes) {
-          const changes = item.data.changes as Array<{ path: string; kind: string }>;
-          changes.forEach((c) => entries.push({ path: c.path, kind: c.kind }));
-        }
-      });
-    }
-  }
-
-  // Deduplicate by path (keep last occurrence)
-  const seen = new Map<string, ChangeEntry>();
-  for (const e of entries) seen.set(e.path, e);
-  const deduped = Array.from(seen.values());
+  const deduped = collectFileChanges(turns, changesScope, activeTurnIndex);
 
   return (
     <>
@@ -42,11 +15,15 @@ export default function ChangesPanel() {
         <button
           className={`scope-btn ${changesScope === 'session' ? 'active' : ''}`}
           onClick={() => setChangesScope('session')}
-        >Session</button>
+        >
+          Session
+        </button>
         <button
           className={`scope-btn ${changesScope === 'turngroup' ? 'active' : ''}`}
           onClick={() => setChangesScope('turngroup')}
-        >Current Turn</button>
+        >
+          Current Turn
+        </button>
       </div>
 
       {deduped.length === 0 ? (
@@ -61,11 +38,7 @@ export default function ChangesPanel() {
             const dir = entry.path.replace('/' + fileName, '');
 
             return (
-              <div
-                key={entry.path}
-                className="file-change clickable"
-                onClick={() => setSelectedChangePath(entry.path)}
-              >
+              <div key={entry.path} className="file-change clickable" onClick={() => setSelectedChangePath(entry.path)}>
                 <span className={`fc-status ${statusClass}`}>{statusChar}</span>
                 <span className="fc-name">
                   {dir && <span style={{ color: 'var(--text-muted)' }}>{dir}/</span>}
@@ -78,4 +51,4 @@ export default function ChangesPanel() {
       )}
     </>
   );
-}
+}

package/agent-pane/frontend/src/components/panels/LogsPanel.test.tsx

@@ -0,0 +1,58 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { render, screen, cleanup } from '@testing-library/react';
+import LogsPanel from './LogsPanel.tsx';
+import { useStore } from '../../store/store.ts';
+import { resetStore } from '../../test/component-helpers.ts';
+
+describe('LogsPanel', () => {
+  beforeEach(() => {
+    resetStore();
+  });
+  afterEach(() => {
+    cleanup();
+  });
+
+  it('shows empty state when no events', () => {
+    render(<LogsPanel />);
+    expect(screen.getByText('No events logged yet')).toBeInTheDocument();
+  });
+
+  it('renders log entries', () => {
+    useStore.setState({
+      eventLog: [
+        { time: '10:00:00', level: 'INFO', message: 'First event' },
+        { time: '10:01:00', level: 'ERROR', message: 'Second event' },
+      ],
+    });
+    render(<LogsPanel />);
+    expect(screen.getByText('First event')).toBeInTheDocument();
+    expect(screen.getByText('Second event')).toBeInTheDocument();
+  });
+
+  it('shows entries in reverse chronological order', () => {
+    useStore.setState({
+      eventLog: [
+        { time: '10:00:00', level: 'INFO', message: 'First' },
+        { time: '10:01:00', level: 'INFO', message: 'Second' },
+      ],
+    });
+    render(<LogsPanel />);
+    const entries = document.querySelectorAll('.log-entry');
+    expect(entries[0].textContent).toContain('Second');
+    expect(entries[1].textContent).toContain('First');
+  });
+
+  it('renders log level with correct CSS class', () => {
+    useStore.setState({
+      eventLog: [
+        { time: '10:00:00', level: 'INFO', message: 'OK' },
+        { time: '10:01:00', level: 'ERROR', message: 'Failed' },
+      ],
+    });
+    render(<LogsPanel />);
+    // Entries are reversed (newest first): ERROR then INFO
+    const levels = document.querySelectorAll('.log-level');
+    expect(levels[0]).toHaveClass('log-error');
+    expect(levels[1]).toHaveClass('log-info');
+  });
+});

package/agent-pane/frontend/src/components/panels/LogsPanel.tsx

@@ -22,4 +22,4 @@ export default function LogsPanel() {
       ))}
     </div>
   );
-}
+}

package/agent-pane/frontend/src/components/panels/MetricsPanel.test.tsx

@@ -0,0 +1,71 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { render, screen, cleanup } from '@testing-library/react';
+import MetricsPanel from './MetricsPanel.tsx';
+import { resetStore } from '../../test/component-helpers.ts';
+import { makeSession, makeDetail, makeTurn, makeUsage } from '../../test/fixtures.ts';
+
+describe('MetricsPanel', () => {
+  beforeEach(() => {
+    resetStore();
+  });
+  afterEach(() => {
+    cleanup();
+  });
+
+  it('shows empty state when no session', () => {
+    render(<MetricsPanel />);
+    expect(screen.getByText('No session selected')).toBeInTheDocument();
+  });
+
+  it('shows session model or "default" when null', () => {
+    const session = makeSession('s1', { model: null });
+    resetStore({ activeSessionId: 's1', sessions: [session] });
+    render(<MetricsPanel />);
+    expect(screen.getByText('default')).toBeInTheDocument();
+  });
+
+  it('shows repo name from cwd', () => {
+    const session = makeSession('s1', { cwd: '/home/user/my-project' });
+    resetStore({ activeSessionId: 's1', sessions: [session] });
+    render(<MetricsPanel />);
+    expect(screen.getByText('my-project')).toBeInTheDocument();
+  });
+
+  it('shows "—" when cwd is null', () => {
+    const session = makeSession('s1', { cwd: null });
+    resetStore({ activeSessionId: 's1', sessions: [session] });
+    render(<MetricsPanel />);
+    // "—" appears in both Repo and Cost rows — check the Repo label row
+    const repoLabel = screen.getByText('Repo');
+    const repoVal = repoLabel.closest('.metric-row')!.querySelector('.metric-val')!;
+    expect(repoVal.textContent).toBe('—');
+  });
+
+  it('shows turn count', () => {
+    const session = makeSession('s1');
+    const detail = makeDetail('s1', [makeTurn('t1', 's1'), makeTurn('t2', 's1')]);
+    resetStore({ activeSessionId: 's1', sessions: [session], sessionDetails: { s1: detail } });
+    render(<MetricsPanel />);
+    expect(screen.getByText('2')).toBeInTheDocument();
+  });
+
+  it('shows token totals from all turns', () => {
+    const session = makeSession('s1');
+    const t1 = makeTurn('t1', 's1', { token_usage: makeUsage({ input_tokens: 100, output_tokens: 200 }) });
+    const t2 = makeTurn('t2', 's1', { token_usage: makeUsage({ input_tokens: 300, output_tokens: 400 }) });
+    const detail = makeDetail('s1', [t1, t2]);
+    resetStore({ activeSessionId: 's1', sessions: [session], sessionDetails: { s1: detail } });
+    render(<MetricsPanel />);
+    expect(screen.getByText('400')).toBeInTheDocument(); // total input
+    expect(screen.getByText('600')).toBeInTheDocument(); // total output
+  });
+
+  it('shows reasoning tokens only when > 0', () => {
+    const session = makeSession('s1');
+    const t1 = makeTurn('t1', 's1', { token_usage: makeUsage({ reasoning_output_tokens: 500 }) });
+    const detail = makeDetail('s1', [t1]);
+    resetStore({ activeSessionId: 's1', sessions: [session], sessionDetails: { s1: detail } });
+    render(<MetricsPanel />);
+    expect(screen.getByText('500')).toBeInTheDocument();
+  });
+});

package/agent-pane/frontend/src/components/panels/MetricsPanel.tsx

@@ -1,19 +1,21 @@
 import { useStore } from '../../store/store.ts';
-import { statusToDot, statusToLabel, formatDuration } from '../../types/index.ts';
 import StatusDot from '../StatusDot.tsx';
+import { deriveSessionStatus } from '../../hooks/useSessionStatus.ts';
+import { calcSessionDuration } from '../../utils/duration.ts';
 
 export default function MetricsPanel() {
-  const { activeSessionId, sessions, sessionDetails } = useStore();
-  const session = sessions.find((s) => s.id === activeSessionId);
-  const detail = activeSessionId ? sessionDetails[activeSessionId] : null;
+  const activeSessionId = useStore((s) => s.activeSessionId);
+  const session = useStore((s) =>
+    activeSessionId ? (s.sessions.find((x) => x.id === activeSessionId) ?? null) : null,
+  );
+  const detail = useStore((s) => (activeSessionId ? (s.sessionDetails[activeSessionId] ?? null) : null));
 
   if (!session) {
     return <div className="empty-state">No session selected</div>;
   }
 
-  const isRunning = session.is_running === 1;
-  const dot = statusToDot(session.status, isRunning);
-  const label = statusToLabel(session.status, isRunning);
+  const status = deriveSessionStatus(session);
+  const duration = calcSessionDuration(detail, status.isRunning);
 
   // Aggregate token usage from all completed turns
   let totalIn = 0;
@@ -30,33 +32,39 @@ export default function MetricsPanel() {
   }
 
   const turnCount = detail?.turns.length ?? 0;
-
-  // Calculate duration from first turn created_at to last turn updated_at (or now if running)
-  let duration = '—';
-  if (detail && detail.turns.length > 0) {
-    const firstTurn = detail.turns[0];
-    const lastTurn = detail.turns[detail.turns.length - 1];
-    const endISO = isRunning ? null : lastTurn.updated_at;
-    duration = formatDuration(firstTurn.created_at, endISO);
-  }
-
-  // Repo name = basename of cwd
   const repoName = session.cwd ? session.cwd.split('/').pop() || session.cwd : '—';
 
   return (
     <>
       <div className="right-section">
         <div className="right-section-title">Session</div>
-        <div className="metric-row"><span className="metric-label">Runtime</span><span className="metric-val">Codex</span></div>
-        <div className="metric-row"><span className="metric-label">Model</span><span className="metric-val">{session.model || 'default'}</span></div>
-        <div className="metric-row"><span className="metric-label">Repo</span><span className="metric-val" title={session.cwd || undefined}>{repoName}</span></div>
-        <div className="metric-row"><span className="metric-label">Turns</span><span className="metric-val">{turnCount}</span></div>
-        <div className="metric-row"><span className="metric-label">Duration</span><span className="metric-val">{duration}</span></div>
+        <div className="metric-row">
+          <span className="metric-label">Runtime</span>
+          <span className="metric-val">Codex</span>
+        </div>
+        <div className="metric-row">
+          <span className="metric-label">Model</span>
+          <span className="metric-val">{session.model || 'default'}</span>
+        </div>
+        <div className="metric-row">
+          <span className="metric-label">Repo</span>
+          <span className="metric-val" title={session.cwd || undefined}>
+            {repoName}
+          </span>
+        </div>
+        <div className="metric-row">
+          <span className="metric-label">Turns</span>
+          <span className="metric-val">{turnCount}</span>
+        </div>
+        <div className="metric-row">
+          <span className="metric-label">Duration</span>
+          <span className="metric-val">{duration}</span>
+        </div>
         <div className="metric-row">
           <span className="metric-label">Status</span>
           <span className="metric-val">
             <span className="badge badge-running">
-              <StatusDot status={dot} size={5} /> {label}
+              <StatusDot status={status.dot} size={5} /> {status.label}
             </span>
           </span>
         </div>
@@ -64,19 +72,43 @@ export default function MetricsPanel() {
 
       <div className="right-section">
         <div className="right-section-title">Resources</div>
-        <div className="metric-row"><span className="metric-label">Tokens In</span><span className="metric-val">{totalIn.toLocaleString()}</span></div>
-        <div className="metric-row"><span className="metric-label">Tokens Out</span><span className="metric-val">{totalOut.toLocaleString()}</span></div>
+        <div className="metric-row">
+          <span className="metric-label">Tokens In</span>
+          <span className="metric-val">{totalIn.toLocaleString()}</span>
+        </div>
+        <div className="metric-row">
+          <span className="metric-label">Tokens Out</span>
+          <span className="metric-val">{totalOut.toLocaleString()}</span>
+        </div>
         {totalReasoning > 0 && (
-          <div className="metric-row"><span className="metric-label">Reasoning</span><span className="metric-val">{totalReasoning.toLocaleString()}</span></div>
+          <div className="metric-row">
+            <span className="metric-label">Reasoning</span>
+            <span className="metric-val">{totalReasoning.toLocaleString()}</span>
+          </div>
         )}
-        <div className="metric-row"><span className="metric-label">Cost</span><span className="metric-val" style={{ color: 'var(--amber)' }}>—</span></div>
+        <div className="metric-row">
+          <span className="metric-label">Cost</span>
+          <span className="metric-val" style={{ color: 'var(--amber)' }}>
+            —
+          </span>
+        </div>
       </div>
 
       <div className="right-section">
         <div className="right-section-title">Metadata</div>
-        <div className="metric-row"><span className="metric-label">Created</span><span className="metric-val" style={{ fontSize: '11px' }}>{new Date(session.created_at).toLocaleString()}</span></div>
-        <div className="metric-row"><span className="metric-label">Thread ID</span><span className="metric-val" style={{ fontSize: '10px', color: 'var(--text-muted)' }}>{session.external_thread_id ? session.external_thread_id.slice(0, 16) + '…' : '—'}</span></div>
+        <div className="metric-row">
+          <span className="metric-label">Created</span>
+          <span className="metric-val" style={{ fontSize: '11px' }}>
+            {new Date(session.created_at).toLocaleString()}
+          </span>
+        </div>
+        <div className="metric-row">
+          <span className="metric-label">Thread ID</span>
+          <span className="metric-val" style={{ fontSize: '10px', color: 'var(--text-muted)' }}>
+            {session.external_thread_id ? session.external_thread_id.slice(0, 16) + '…' : '—'}
+          </span>
+        </div>
       </div>
     </>
   );
-}
+}

package/agent-pane/frontend/src/components/panels/TurnsPanel.test.tsx

@@ -0,0 +1,83 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { render, screen, fireEvent, cleanup } from '@testing-library/react';
+import TurnsPanel from './TurnsPanel.tsx';
+import { resetStore } from '../../test/component-helpers.ts';
+import { makeDetail, makeTurn } from '../../test/fixtures.ts';
+
+describe('TurnsPanel', () => {
+  beforeEach(() => {
+    resetStore();
+  });
+  afterEach(() => {
+    cleanup();
+  });
+
+  it('shows empty state when no turns', () => {
+    render(<TurnsPanel />);
+    expect(screen.getByText('No turns yet')).toBeInTheDocument();
+  });
+
+  it('renders turn items with preview text', () => {
+    const detail = makeDetail('s1', [makeTurn('t1', 's1', { user_prompt: 'Fix the bug' })]);
+    resetStore({ activeSessionId: 's1', sessionDetails: { s1: detail } });
+    render(<TurnsPanel />);
+    expect(screen.getByText('Fix the bug')).toBeInTheDocument();
+  });
+
+  it('truncates preview text longer than 50 chars', () => {
+    const longPrompt = 'A'.repeat(60);
+    const detail = makeDetail('s1', [makeTurn('t1', 's1', { user_prompt: longPrompt })]);
+    resetStore({ activeSessionId: 's1', sessionDetails: { s1: detail } });
+    render(<TurnsPanel />);
+    expect(screen.getByText('A'.repeat(50) + '…')).toBeInTheDocument();
+  });
+
+  it('active turn has active class', () => {
+    const detail = makeDetail('s1', [makeTurn('t1', 's1')]);
+    resetStore({ activeSessionId: 's1', sessionDetails: { s1: detail }, activeTurnIndex: 0 });
+    render(<TurnsPanel />);
+    const turnItem = screen.getByText('test prompt').closest('.turn-item');
+    expect(turnItem).toHaveClass('active');
+  });
+
+  it('click calls setActiveTurnIndex', () => {
+    const setActiveTurnIndex = vi.fn();
+    const detail = makeDetail('s1', [makeTurn('t1', 's1'), makeTurn('t2', 's1')]);
+    resetStore({ activeSessionId: 's1', sessionDetails: { s1: detail }, activeTurnIndex: 0, setActiveTurnIndex });
+    render(<TurnsPanel />);
+    const items = document.querySelectorAll('.turn-item');
+    fireEvent.click(items[1]);
+    expect(setActiveTurnIndex).toHaveBeenCalledWith(1);
+  });
+
+  it('context menu shows rewind and branch options', () => {
+    const detail = makeDetail('s1', [makeTurn('t1', 's1'), makeTurn('t2', 's1')]);
+    resetStore({ activeSessionId: 's1', sessionDetails: { s1: detail } });
+    render(<TurnsPanel />);
+    const turnItem = document.querySelectorAll('.turn-item')[0];
+    fireEvent.contextMenu(turnItem);
+    expect(screen.getByText('Rewind to Here')).toBeInTheDocument();
+    expect(screen.getByText('Branch from Here')).toBeInTheDocument();
+  });
+
+  it('rewind is disabled on last turn', () => {
+    const detail = makeDetail('s1', [makeTurn('t1', 's1')]);
+    resetStore({ activeSessionId: 's1', sessionDetails: { s1: detail } });
+    render(<TurnsPanel />);
+    const turnItem = document.querySelector('.turn-item')!;
+    fireEvent.contextMenu(turnItem);
+    const rewindItem = screen.getByText('Rewind to Here').closest('.ctx-menu-item');
+    expect(rewindItem).toHaveClass('ctx-disabled');
+  });
+
+  it('branch click calls branchFromTurn', () => {
+    const branchFromTurn = vi.fn().mockResolvedValue(undefined);
+    const detail = makeDetail('s1', [makeTurn('t1', 's1'), makeTurn('t2', 's1')]);
+    resetStore({ activeSessionId: 's1', sessionDetails: { s1: detail }, branchFromTurn });
+    render(<TurnsPanel />);
+    const turnItem = document.querySelectorAll('.turn-item')[0];
+    fireEvent.contextMenu(turnItem);
+    fireEvent.click(screen.getByText('Branch from Here'));
+    expect(branchFromTurn).toHaveBeenCalledWith('s1', 't1');
+  });
+});