repoburg 1.3.186 → 1.3.195

package/agent-pane/frontend/src/components/StatusBar.tsx

@@ -1,47 +1,47 @@
 import { useStore } from '../store/store.ts';
-import { statusToDot, statusToLabel } from '../types/index.ts';
 import StatusDot from './StatusDot.tsx';
+import ModelSelector from './ModelSelector.tsx';
+import { deriveSessionStatus } from '../hooks/useSessionStatus.ts';
+import { calcSessionDuration } from '../utils/duration.ts';
 import { Zap, Command } from 'lucide-react';
 
 export default function StatusBar() {
-  const { activeSessionId, sessions, sessionDetails, wsConnected } = 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));
+  const wsConnected = useStore((s) => s.wsConnected);
 
   if (!session) {
     return (
       <div className="ide-statusbar">
-        <div className="sb-item"><Zap size={14} /> AgentPane</div>
+        <div className="sb-item">
+          <Zap size={14} /> AgentPane
+        </div>
         <div className="sb-divider">|</div>
         <div className="sb-item" title={wsConnected ? 'WebSocket connected' : 'WebSocket disconnected'}>
           <span className={`status-dot ${wsConnected ? 'done' : 'error'}`} />
           {wsConnected ? 'Live' : 'Offline'}
         </div>
         <div className="sb-spacer" />
-        <div className="sb-item"><Command size={14} /> K</div>
+        <div className="sb-item">
+          <Command size={14} /> K
+        </div>
       </div>
     );
   }
 
-  const isRunning = session.is_running === 1;
-  const dot = statusToDot(session.status, isRunning);
-  const label = statusToLabel(session.status, isRunning);
-  const turnCount = detail?.turns.length ?? 0;
+  const status = deriveSessionStatus(session);
+  const duration = calcSessionDuration(detail, status.isRunning);
 
   return (
     <div className="ide-statusbar">
-      <div className="sb-item"><Zap size={14} /> AgentPane</div>
-      <div className="sb-divider">|</div>
       <div className="sb-item">
-        <span className={`runtime-icon ic-codex`} style={{ width: 16, height: 16, fontSize: 8 }}>CX</span>
-        {session.runtime_type}
+        <Zap size={14} /> AgentPane
       </div>
-      {session.model && (
-        <>
-          <div className="sb-divider">|</div>
-          <div className="sb-item">{session.model}</div>
-        </>
-      )}
+      <div className="sb-divider">|</div>
+      <ModelSelector />
       <div className="sb-spacer" />
       <div className="sb-item" title={wsConnected ? 'WebSocket connected' : 'WebSocket disconnected'}>
         <span className={`status-dot ${wsConnected ? 'done' : 'error'}`} />
@@ -49,12 +49,14 @@ export default function StatusBar() {
       </div>
       <div className="sb-divider">|</div>
       <div className="sb-item" style={session.status === 'failed' ? { color: 'var(--red)' } : undefined}>
-        <StatusDot status={dot} /> {label}
+        <StatusDot status={status.dot} /> {status.label}
       </div>
       <div className="sb-divider">|</div>
-      <div className="sb-item">{turnCount} turn{turnCount !== 1 ? 's' : ''}</div>
+      <div className="sb-item">{duration}</div>
       <div className="sb-divider">|</div>
-      <div className="sb-item"><Command size={14} /> K</div>
+      <div className="sb-item">
+        <Command size={14} /> K
+      </div>
     </div>
   );
-}
+}

package/agent-pane/frontend/src/components/StatusDot.test.tsx

@@ -0,0 +1,25 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/react';
+import StatusDot from './StatusDot.tsx';
+
+describe('StatusDot', () => {
+  it('renders span with status-dot and status class', () => {
+    const { container } = render(<StatusDot status="running" />);
+    const span = container.firstChild as HTMLElement;
+    expect(span.tagName).toBe('SPAN');
+    expect(span.className).toBe('status-dot running');
+  });
+
+  it('does not set inline style when size is default (6)', () => {
+    const { container } = render(<StatusDot status="error" />);
+    const span = container.firstChild as HTMLElement;
+    expect(span.style.cssText).toBe('');
+  });
+
+  it('sets width and height inline style when size is custom', () => {
+    const { container } = render(<StatusDot status="queued" size={10} />);
+    const span = container.firstChild as HTMLElement;
+    expect(span.style.width).toBe('10px');
+    expect(span.style.height).toBe('10px');
+  });
+});

package/agent-pane/frontend/src/components/StatusDot.tsx

@@ -4,10 +4,5 @@ interface Props {
 }
 
 export default function StatusDot({ status, size = 6 }: Props) {
-  return (
-    <span
-      className={`status-dot ${status}`}
-      style={size !== 6 ? { width: size, height: size } : undefined}
-    />
-  );
-}
+  return <span className={`status-dot ${status}`} style={size !== 6 ? { width: size, height: size } : undefined} />;
+}

package/agent-pane/frontend/src/components/Toast.test.tsx

@@ -0,0 +1,79 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { render, screen, fireEvent, cleanup } from '@testing-library/react';
+import Toast from './Toast.tsx';
+import { useStore } from '../store/store.ts';
+import { resetStore } from '../test/component-helpers.ts';
+
+describe('Toast', () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+    resetStore();
+  });
+  afterEach(() => {
+    cleanup();
+    vi.useRealTimers();
+  });
+
+  it('returns null when no toasts', () => {
+    const { container } = render(<Toast />);
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('renders toast container with toast items', () => {
+    useStore.setState({ toasts: [{ id: 't1', type: 'info', message: 'Hello' }] });
+    render(<Toast />);
+    expect(screen.getByText('Hello')).toBeInTheDocument();
+    expect(screen.getByText('Hello').closest('.toast')).toHaveClass('toast-info');
+  });
+
+  it('auto-dismisses after 4000ms', () => {
+    useStore.setState({ toasts: [{ id: 't1', type: 'success', message: 'Auto dismiss' }] });
+    render(<Toast />);
+    expect(useStore.getState().toasts).toHaveLength(1);
+    vi.advanceTimersByTime(4000);
+    expect(useStore.getState().toasts).toHaveLength(0);
+  });
+
+  it('hover pauses auto-dismiss timer', () => {
+    useStore.setState({ toasts: [{ id: 't1', type: 'info', message: 'Hover test' }] });
+    render(<Toast />);
+    const toastEl = screen.getByText('Hover test').closest('.toast')!;
+    fireEvent.mouseEnter(toastEl);
+    vi.advanceTimersByTime(4000);
+    // Still present — timer was cleared
+    expect(useStore.getState().toasts).toHaveLength(1);
+  });
+
+  it('mouse leave restarts timer with 2000ms delay', () => {
+    useStore.setState({ toasts: [{ id: 't1', type: 'info', message: 'Mouse leave' }] });
+    render(<Toast />);
+    const toastEl = screen.getByText('Mouse leave').closest('.toast')!;
+    fireEvent.mouseEnter(toastEl);
+    fireEvent.mouseLeave(toastEl);
+    vi.advanceTimersByTime(1999);
+    expect(useStore.getState().toasts).toHaveLength(1);
+    vi.advanceTimersByTime(1);
+    expect(useStore.getState().toasts).toHaveLength(0);
+  });
+
+  it('undo button calls undoAction then removes toast', () => {
+    const undoFn = vi.fn();
+    useStore.setState({
+      toasts: [{ id: 't1', type: 'error', message: 'Deleted', undoAction: undoFn, undoLabel: 'Undo' }],
+    });
+    render(<Toast />);
+    const undoBtn = document.querySelector('.toast-undo') as HTMLElement;
+    fireEvent.click(undoBtn);
+    expect(undoFn).toHaveBeenCalled();
+    expect(useStore.getState().toasts).toHaveLength(0);
+  });
+
+  it('close button removes toast', () => {
+    useStore.setState({ toasts: [{ id: 't1', type: 'warn', message: 'Warning' }] });
+    render(<Toast />);
+    // The close button contains an X icon — find by the .toast-close class
+    const closeBtn = document.querySelector('.toast-close') as HTMLElement;
+    fireEvent.click(closeBtn);
+    expect(useStore.getState().toasts).toHaveLength(0);
+  });
+});

package/agent-pane/frontend/src/components/Toast.tsx

@@ -1,5 +1,6 @@
+import { useEffect, useRef } from 'react';
 import { useStore } from '../store/store.ts';
-import { X, CheckCircle, AlertCircle, Info, AlertTriangle } from 'lucide-react';
+import { X, CheckCircle, AlertCircle, Info, AlertTriangle, Undo2 } from 'lucide-react';
 import type { Toast as ToastType } from '../store/store.ts';
 
 const ICONS: Record<ToastType['type'], typeof CheckCircle> = {
@@ -9,26 +10,67 @@ const ICONS: Record<ToastType['type'], typeof CheckCircle> = {
   warn: AlertTriangle,
 };
 
+const AUTO_DISMISS_MS = 4000;
+
+function ToastItem({ toast }: { toast: ToastType }) {
+  const removeToast = useStore((s) => s.removeToast);
+  const Icon = ICONS[toast.type];
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  // Manage auto-dismiss with hover-to-pause
+  useEffect(() => {
+    function startTimer() {
+      timerRef.current = setTimeout(() => removeToast(toast.id), AUTO_DISMISS_MS);
+    }
+    startTimer();
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+    };
+  }, [toast.id, removeToast]);
+
+  function handleMouseEnter() {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+      timerRef.current = null;
+    }
+  }
+
+  function handleMouseLeave() {
+    timerRef.current = setTimeout(() => removeToast(toast.id), 2000);
+  }
+
+  return (
+    <div className={`toast toast-${toast.type}`} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
+      <Icon size={16} />
+      <span className="toast-message">{toast.message}</span>
+      {toast.undoAction && (
+        <button
+          className="toast-undo"
+          onClick={() => {
+            toast.undoAction?.();
+            removeToast(toast.id);
+          }}
+        >
+          <Undo2 size={12} /> {toast.undoLabel || 'Undo'}
+        </button>
+      )}
+      <button className="toast-close" onClick={() => removeToast(toast.id)}>
+        <X size={14} />
+      </button>
+    </div>
+  );
+}
+
 export default function Toast() {
   const toasts = useStore((s) => s.toasts);
-  const removeToast = useStore((s) => s.removeToast);
 
   if (toasts.length === 0) return null;
 
   return (
     <div className="toast-container">
-      {toasts.map((toast) => {
-        const Icon = ICONS[toast.type];
-        return (
-          <div key={toast.id} className={`toast toast-${toast.type}`}>
-            <Icon size={16} />
-            <span className="toast-message">{toast.message}</span>
-            <button className="toast-close" onClick={() => removeToast(toast.id)}>
-              <X size={14} />
-            </button>
-          </div>
-        );
-      })}
+      {toasts.map((toast) => (
+        <ToastItem key={toast.id} toast={toast} />
+      ))}
     </div>
   );
-}
+}

package/agent-pane/frontend/src/components/TurnContent.test.tsx

@@ -0,0 +1,287 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import { render, screen, fireEvent, cleanup } from '@testing-library/react';
+import TurnContent from './TurnContent.tsx';
+import { makeTurn, makeItem } from '../test/fixtures.ts';
+import type { Turn, Item } from '@agentpane/shared';
+
+/** Helper: build a turn with items. */
+function turnWithItems(items: Item[], overrides: Partial<Turn> = {}): Turn {
+  return makeTurn('t1', 's1', { items, ...overrides });
+}
+
+/** Non-tool items (reasoning, todo_list, error) are in otherItems — visible when intermediate expanded. */
+function turnWithNonToolItem(item: Item): Turn {
+  return turnWithItems([item], { status: 'running' });
+}
+
+/** Tool items (command_execution, file_change, mcp_tool_call, web_search) go after agent_message — always visible. */
+function turnWithToolItem(item: Item): Turn {
+  const agentMsg = makeItem('i-agent', 't1', 'agent_message');
+  agentMsg.data = { text: 'Done' };
+  return turnWithItems([agentMsg, item], { status: 'completed', agent_response: 'Done' });
+}
+
+describe('TurnContent', () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  it('renders user_prompt at top', () => {
+    const turn = turnWithItems([], { user_prompt: 'Fix the bug' });
+    render(<TurnContent turn={turn} />);
+    expect(screen.getByText('Fix the bug')).toBeInTheDocument();
+  });
+
+  it('renders agent_message item with markdown', () => {
+    const item = makeItem('i1', 't1', 'agent_message');
+    item.data = { text: 'Hello **world**' };
+    const turn = turnWithItems([item], { agent_response: 'Hello **world**' });
+    render(<TurnContent turn={turn} />);
+    expect(screen.getByText('world').tagName).toBe('STRONG');
+  });
+
+  it('renders reasoning item with "Reasoning" header', () => {
+    const item = makeItem('i1', 't1', 'reasoning');
+    item.data = { text: 'Thinking about it' };
+    render(<TurnContent turn={turnWithNonToolItem(item)} />);
+    expect(screen.getByText('Reasoning')).toBeInTheDocument();
+  });
+
+  it('renders command_execution item with command in pre', () => {
+    const item = makeItem('i1', 't1', 'command_execution');
+    item.data = { command: '/bin/zsh -lc "echo hello"', aggregated_output: 'hello', exit_code: 0 };
+    render(<TurnContent turn={turnWithToolItem(item)} />);
+    expect(screen.getByText('Command')).toBeInTheDocument();
+    expect(screen.getByText('echo hello')).toBeInTheDocument();
+    expect(screen.getByText('exit 0')).toBeInTheDocument();
+  });
+
+  it('shows truncation toggle when output exceeds 10KB', () => {
+    const item = makeItem('i1', 't1', 'command_execution');
+    const longOutput = 'x'.repeat(11_000);
+    item.data = { command: 'ls', aggregated_output: longOutput, exit_code: 0 };
+    render(<TurnContent turn={turnWithToolItem(item)} />);
+    expect(screen.getByText(/Show full output/)).toBeInTheDocument();
+  });
+
+  it('renders file_change item with file list and A/D/M status', () => {
+    const item = makeItem('i1', 't1', 'file_change');
+    item.data = { changes: [{ path: 'src/new.ts', kind: 'add' }, { path: 'src/old.ts', kind: 'delete' }] };
+    render(<TurnContent turn={turnWithToolItem(item)} />);
+    expect(screen.getByText('src/new.ts')).toBeInTheDocument();
+    expect(screen.getByText('src/old.ts')).toBeInTheDocument();
+    expect(screen.getByText('A')).toBeInTheDocument();
+    expect(screen.getByText('D')).toBeInTheDocument();
+  });
+
+  it('renders mcp_tool_call item with tool name and server', () => {
+    const item = makeItem('i1', 't1', 'mcp_tool_call');
+    item.data = { tool: 'search', server: 'my-server', arguments: { query: 'test' } };
+    render(<TurnContent turn={turnWithToolItem(item)} />);
+    expect(screen.getByText(/search/)).toBeInTheDocument();
+    expect(screen.getByText('my-server')).toBeInTheDocument();
+  });
+
+  it('renders web_search item with query', () => {
+    const item = makeItem('i1', 't1', 'web_search');
+    item.data = { query: 'how to test react' };
+    render(<TurnContent turn={turnWithToolItem(item)} />);
+    expect(screen.getByText('Web Search')).toBeInTheDocument();
+    expect(screen.getByText('how to test react')).toBeInTheDocument();
+  });
+
+  it('renders todo_list item with completed and pending items', () => {
+    const item = makeItem('i1', 't1', 'todo_list');
+    item.data = { items: [{ text: 'Task 1', completed: true }, { text: 'Task 2', completed: false }] };
+    render(<TurnContent turn={turnWithNonToolItem(item)} />);
+    expect(screen.getByText(/Task 1/)).toBeInTheDocument();
+    expect(screen.getByText(/Task 2/)).toBeInTheDocument();
+  });
+
+  it('renders error item with error message', () => {
+    const item = makeItem('i1', 't1', 'error');
+    item.data = { message: 'Something broke' };
+    render(<TurnContent turn={turnWithNonToolItem(item)} />);
+    expect(screen.getByText('Error')).toBeInTheDocument();
+    expect(screen.getByText('Something broke')).toBeInTheDocument();
+  });
+
+  it('auto-expands intermediate steps when turn status is running', () => {
+    const reasoning = makeItem('i1', 't1', 'reasoning');
+    reasoning.data = { text: 'Thinking' };
+    const agentMsg = makeItem('i2', 't1', 'agent_message');
+    agentMsg.data = { text: 'Done' };
+    // Reasoning is intermediate (before final agent_message)
+    const turn = turnWithItems([reasoning, agentMsg], { status: 'running', agent_response: 'Done' });
+    render(<TurnContent turn={turn} />);
+    // Reasoning is a non-tool item — visible when intermediate expanded
+    expect(screen.getByText('Reasoning')).toBeInTheDocument();
+  });
+
+  it('auto-collapses intermediate steps when turn status is completed', () => {
+    const reasoning = makeItem('i1', 't1', 'reasoning');
+    reasoning.data = { text: 'Thinking' };
+    const agentMsg = makeItem('i2', 't1', 'agent_message');
+    agentMsg.data = { text: 'Done' };
+    const turn = turnWithItems([reasoning, agentMsg], { status: 'completed', agent_response: 'Done' });
+    render(<TurnContent turn={turn} />);
+    // Collapsed — reasoning header not visible
+    expect(screen.queryByText('Reasoning')).not.toBeInTheDocument();
+  });
+
+  it('intermediate steps header click toggles expand', () => {
+    const reasoning = makeItem('i1', 't1', 'reasoning');
+    reasoning.data = { text: 'Thinking' };
+    const agentMsg = makeItem('i2', 't1', 'agent_message');
+    agentMsg.data = { text: 'Done' };
+    const turn = turnWithItems([reasoning, agentMsg], { status: 'completed', agent_response: 'Done' });
+    render(<TurnContent turn={turn} />);
+    // Initially collapsed
+    expect(screen.queryByText('Reasoning')).not.toBeInTheDocument();
+    // Click to expand
+    const header = document.querySelector('.tool-calls-header')!;
+    fireEvent.click(header);
+    expect(screen.getByText('Reasoning')).toBeInTheDocument();
+  });
+
+  it('shows "Waiting to start…" for pending turn with no items', () => {
+    const turn = turnWithItems([], { status: 'pending' });
+    render(<TurnContent turn={turn} />);
+    expect(screen.getByText('Waiting to start…')).toBeInTheDocument();
+  });
+
+  it('shows "Agent is thinking…" for running turn with no items', () => {
+    const turn = turnWithItems([], { status: 'running' });
+    render(<TurnContent turn={turn} />);
+    expect(screen.getByText('Agent is thinking…')).toBeInTheDocument();
+  });
+
+  // --- command_execution edge cases ---
+
+  it('command_execution in_progress shows "running…" summary', () => {
+    const item = makeItem('i1', 't1', 'command_execution');
+    item.status = 'in_progress';
+    item.data = { command: 'ls', aggregated_output: 'partial', exit_code: null };
+    render(<TurnContent turn={turnWithToolItem(item)} />);
+    expect(screen.getByText('running…')).toBeInTheDocument();
+  });
+
+  it('command_execution with no output renders no output pre', () => {
+    const item = makeItem('i1', 't1', 'command_execution');
+    item.data = { command: 'ls', exit_code: 0 };
+    render(<TurnContent turn={turnWithToolItem(item)} />);
+    expect(screen.getByText('ls')).toBeInTheDocument();
+    expect(document.querySelector('.cmd-output')).not.toBeInTheDocument();
+  });
+
+  it('command_execution truncate toggle click expands and collapses', () => {
+    const item = makeItem('i1', 't1', 'command_execution');
+    item.data = { command: 'ls', aggregated_output: 'x'.repeat(11_000), exit_code: 0 };
+    render(<TurnContent turn={turnWithToolItem(item)} />);
+    const toggle = screen.getByText(/Show full output/);
+    fireEvent.click(toggle);
+    expect(screen.getByText('Show less')).toBeInTheDocument();
+    fireEvent.click(screen.getByText('Show less'));
+    expect(screen.getByText(/Show full output/)).toBeInTheDocument();
+  });
+
+  // --- file_change edge cases ---
+
+  it('file_change with single file shows singular "file"', () => {
+    const item = makeItem('i1', 't1', 'file_change');
+    item.data = { changes: [{ path: 'src/one.ts', kind: 'modify' }] };
+    render(<TurnContent turn={turnWithToolItem(item)} />);
+    expect(screen.getByText('1 file')).toBeInTheDocument();
+    expect(screen.getByText('M')).toBeInTheDocument();
+  });
+
+  it('file_change with modify kind shows M and fc-mod class', () => {
+    const item = makeItem('i1', 't1', 'file_change');
+    item.data = { changes: [{ path: 'src/mod.ts', kind: 'modify' }] };
+    render(<TurnContent turn={turnWithToolItem(item)} />);
+    const statusSpan = document.querySelector('.fc-status')!;
+    expect(statusSpan).toHaveClass('fc-mod');
+    expect(statusSpan.textContent).toBe('M');
+  });
+
+  // --- mcp_tool_call edge cases ---
+
+  it('mcp_tool_call failed status shows "failed" summary', () => {
+    const item = makeItem('i1', 't1', 'mcp_tool_call');
+    item.status = 'failed';
+    item.data = { tool: 'broken', server: 'srv' };
+    render(<TurnContent turn={turnWithToolItem(item)} />);
+    expect(screen.getByText('failed')).toBeInTheDocument();
+  });
+
+  it('mcp_tool_call with code arg renders in pre block', () => {
+    const item = makeItem('i1', 't1', 'mcp_tool_call');
+    item.data = { tool: 'exec', arguments: { code: 'console.log(1)' } };
+    render(<TurnContent turn={turnWithToolItem(item)} />);
+    expect(screen.getByText('console.log(1)')).toBeInTheDocument();
+  });
+
+  it('mcp_tool_call with non-string arg renders JSON', () => {
+    const item = makeItem('i1', 't1', 'mcp_tool_call');
+    item.data = { tool: 'exec', arguments: { count: 42 } };
+    render(<TurnContent turn={turnWithToolItem(item)} />);
+    expect(screen.getByText('42')).toBeInTheDocument();
+  });
+
+  it('mcp_tool_call with result text renders pre', () => {
+    const item = makeItem('i1', 't1', 'mcp_tool_call');
+    item.data = {
+      tool: 'query',
+      result: { content: [{ type: 'text', text: 'result here' }] },
+    };
+    render(<TurnContent turn={turnWithToolItem(item)} />);
+    expect(screen.getByText('result here')).toBeInTheDocument();
+  });
+
+  it('mcp_tool_call with error renders error in red pre', () => {
+    const item = makeItem('i1', 't1', 'mcp_tool_call');
+    item.data = { tool: 'fail', error: 'MCP failed' };
+    render(<TurnContent turn={turnWithToolItem(item)} />);
+    expect(screen.getByText('MCP failed')).toBeInTheDocument();
+  });
+
+  it('mcp_tool_call with no args and no server renders minimal', () => {
+    const item = makeItem('i1', 't1', 'mcp_tool_call');
+    item.data = { tool: 'noop' };
+    render(<TurnContent turn={turnWithToolItem(item)} />);
+    expect(screen.getByText(/noop/)).toBeInTheDocument();
+    expect(document.querySelector('.mcp-args')).not.toBeInTheDocument();
+  });
+
+  // --- turn-level edge cases ---
+
+  it('renders turn.error in error block', () => {
+    const turn = turnWithItems([], { status: 'failed', error: 'Turn failed' });
+    render(<TurnContent turn={turn} />);
+    expect(screen.getByText('Turn failed')).toBeInTheDocument();
+  });
+
+  it('renders items after final agent_message', () => {
+    const agentMsg = makeItem('i1', 't1', 'agent_message');
+    agentMsg.data = { text: 'Final answer' };
+    const errorItem = makeItem('i2', 't1', 'error');
+    errorItem.data = { message: 'Post-error' };
+    const turn = turnWithItems([agentMsg, errorItem], { status: 'completed', agent_response: 'Final answer' });
+    render(<TurnContent turn={turn} />);
+    expect(screen.getByText('Final answer')).toBeInTheDocument();
+    expect(screen.getByText('Post-error')).toBeInTheDocument();
+  });
+
+  it('unknown item type renders null (default case)', () => {
+    const item = makeItem('i1', 't1', 'unknown_type' as never);
+    item.data = {};
+    const agentMsg = makeItem('i2', 't1', 'agent_message');
+    agentMsg.data = { text: 'Done' };
+    const turn = turnWithItems([item, agentMsg], { status: 'completed', agent_response: 'Done' });
+    render(<TurnContent turn={turn} />);
+    // Agent message renders, unknown item produces no content card
+    expect(screen.getByText('Done')).toBeInTheDocument();
+    // The unknown item is intermediate — no card for it
+    expect(document.querySelectorAll('.render-content').length).toBeLessThan(3);
+  });
+});