repoburg 1.3.188 → 1.3.196

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

@@ -40,11 +40,7 @@ function ToastItem({ toast }: { toast: ToastType }) {
   }
 
   return (
-    <div
-      className={`toast toast-${toast.type}`}
-      onMouseEnter={handleMouseEnter}
-      onMouseLeave={handleMouseLeave}
-    >
+    <div className={`toast toast-${toast.type}`} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
       <Icon size={16} />
       <span className="toast-message">{toast.message}</span>
       {toast.undoAction && (
@@ -77,4 +73,4 @@ export default function 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);
+  });
+});

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

@@ -18,9 +18,19 @@ function itemText(item: Item): string {
   return '';
 }
 
+/** Strip shell wrapper from command for display (e.g. /bin/zsh -lc "actual cmd"). */
+function cleanCommand(cmd: string): string {
+  const match = cmd.match(/^\/bin\/\w+\s+-\w+\s+"(.*)"$/s);
+  return match ? match[1] : cmd;
+}
+
+/** Maximum output length before truncation (10KB). */
+const MAX_OUTPUT = 10_000;
+
 /** Render a single item as a turn card. */
 function ItemCard({ item }: { item: Item }) {
   const isRunning = item.status === 'in_progress';
+  const [showFullOutput, setShowFullOutput] = useState(false);
 
   switch (item.type) {
     case 'agent_message': {
@@ -40,7 +50,9 @@ function ItemCard({ item }: { item: Item }) {
       return (
         <div className="render-content">
           <div className="turn-header">
-            <span className="turn-header-icon" style={{ background: 'var(--surface-2)', color: 'var(--text-3)' }}>💭</span>
+            <span className="turn-header-icon" style={{ background: 'var(--surface-2)', color: 'var(--text-3)' }}>
+              💭
+            </span>
             <span className="turn-header-title">Reasoning</span>
           </div>
           <div dangerouslySetInnerHTML={{ __html: renderMarkdown(itemText(item)) }} />
@@ -50,19 +62,37 @@ function ItemCard({ item }: { item: Item }) {
 
     case 'command_execution': {
       const data = item.data || {};
-      const command = (data.command as string) || '';
+      const command = cleanCommand((data.command as string) || '');
       const output = (data.aggregated_output as string) || '';
       const exitCode = data.exit_code as number | null;
-      const summary = isRunning ? 'running…' : (exitCode !== null ? `exit ${exitCode}` : '');
+      const summary = isRunning ? 'running…' : exitCode !== null ? `exit ${exitCode}` : '';
+      const isTruncated = output.length > MAX_OUTPUT;
+      const displayOutput =
+        isTruncated && !showFullOutput ? output.slice(0, MAX_OUTPUT) + '\n… (truncated, click to expand)' : output;
       return (
         <div className="render-content">
           <div className="turn-header">
-            <span className="turn-header-icon" style={{ background: 'var(--surface-2)', color: 'var(--text-3)' }}>🔧</span>
+            <span className="turn-header-icon" style={{ background: 'var(--surface-2)', color: 'var(--text-3)' }}>
+              🔧
+            </span>
             <span className="turn-header-title">Command</span>
             {summary && <span className="turn-header-meta">{summary}</span>}
           </div>
-          <pre className="cmd-block"><code>{command}</code></pre>
-          {output && <pre className="cmd-output"><code>{output}</code></pre>}
+          <pre className="cmd-block">
+            <code>{command}</code>
+          </pre>
+          {output && (
+            <>
+              <pre className="cmd-output">
+                <code>{displayOutput}</code>
+              </pre>
+              {isTruncated && (
+                <button className="cmd-output-toggle" onClick={() => setShowFullOutput((v) => !v)}>
+                  {showFullOutput ? 'Show less' : `Show full output (${(output.length / 1024).toFixed(0)}KB)`}
+                </button>
+              )}
+            </>
+          )}
         </div>
       );
     }
@@ -73,7 +103,9 @@ function ItemCard({ item }: { item: Item }) {
       return (
         <div className="render-content">
           <div className="turn-header">
-            <span className="turn-header-icon" style={{ background: 'var(--surface-2)', color: 'var(--text-3)' }}>📁</span>
+            <span className="turn-header-icon" style={{ background: 'var(--surface-2)', color: 'var(--text-3)' }}>
+              📁
+            </span>
             <span className="turn-header-title">File Changes</span>
             <span className="turn-header-meta">{summary}</span>
           </div>
@@ -97,13 +129,58 @@ function ItemCard({ item }: { item: Item }) {
       const data = item.data || {};
       const tool = (data.tool as string) || 'mcp';
       const server = (data.server as string) || '';
+      const args = data.arguments as Record<string, unknown> | null;
+      const result = data.result as {
+        content?: Array<{ type: string; text: string }>;
+        structured_content?: Record<string, unknown>;
+      } | null;
+      const error = data.error as string | null;
+      const isFailed = item.status === 'failed' || !!error;
+      const summary = isRunning ? 'running…' : isFailed ? 'failed' : 'done';
+      const resultTexts = result?.content?.filter((c) => c.type === 'text').map((c) => c.text) ?? [];
       return (
         <div className="render-content">
           <div className="turn-header">
-            <span className="turn-header-icon" style={{ background: 'var(--surface-2)', color: 'var(--text-3)' }}>🔌</span>
+            <span className="turn-header-icon" style={{ background: 'var(--surface-2)', color: 'var(--text-3)' }}>
+              🔌
+            </span>
             <span className="turn-header-title">MCP: {tool}</span>
             {server && <span className="turn-header-meta">{server}</span>}
+            {summary && (
+              <span className="turn-header-meta" style={isFailed ? { color: 'var(--red)' } : undefined}>
+                {summary}
+              </span>
+            )}
           </div>
+          {args && Object.keys(args).length > 0 && (
+            <div className="mcp-args">
+              {Object.entries(args).map(([key, value]) => (
+                <div key={key} className="mcp-arg">
+                  <span className="mcp-arg-key">{key}</span>
+                  {key === 'code' ? (
+                    <pre className="cmd-block">
+                      <code>{String(value)}</code>
+                    </pre>
+                  ) : (
+                    <span className="mcp-arg-value">
+                      {typeof value === 'string' ? value : JSON.stringify(value, null, 2)}
+                    </span>
+                  )}
+                </div>
+              ))}
+            </div>
+          )}
+          {resultTexts.length > 0 &&
+            resultTexts.map((text, i) => (
+              <pre key={i} className="cmd-output">
+                <code>{text}</code>
+              </pre>
+            ))}
+          {error && (
+            <pre className="cmd-output" style={{ color: 'var(--red)' }}>
+              <code>{error}</code>
+            </pre>
+          )}
         </div>
       );
     }
@@ -113,7 +190,9 @@ function ItemCard({ item }: { item: Item }) {
       return (
         <div className="render-content">
           <div className="turn-header">
-            <span className="turn-header-icon" style={{ background: 'var(--surface-2)', color: 'var(--text-3)' }}>🔍</span>
+            <span className="turn-header-icon" style={{ background: 'var(--surface-2)', color: 'var(--text-3)' }}>
+              🔍
+            </span>
             <span className="turn-header-title">Web Search</span>
           </div>
           <p className="user-message">{query}</p>
@@ -126,7 +205,9 @@ function ItemCard({ item }: { item: Item }) {
       return (
         <div className="render-content">
           <div className="turn-header">
-            <span className="turn-header-icon" style={{ background: 'var(--surface-2)', color: 'var(--text-3)' }}>📋</span>
+            <span className="turn-header-icon" style={{ background: 'var(--surface-2)', color: 'var(--text-3)' }}>
+              📋
+            </span>
             <span className="turn-header-title">Todo List</span>
           </div>
           <ul className="todo-list">
@@ -145,10 +226,14 @@ function ItemCard({ item }: { item: Item }) {
       return (
         <div className="render-content">
           <div className="turn-header">
-            <span className="turn-header-icon" style={{ background: 'var(--red)', color: '#fff' }}>!</span>
+            <span className="turn-header-icon" style={{ background: 'var(--red)', color: '#fff' }}>
+              !
+            </span>
             <span className="turn-header-title">Error</span>
           </div>
-          <pre className="cmd-output" style={{ color: 'var(--red)' }}><code>{msg}</code></pre>
+          <pre className="cmd-output" style={{ color: 'var(--red)' }}>
+            <code>{msg}</code>
+          </pre>
         </div>
       );
     }
@@ -188,9 +273,7 @@ function TurnContentBase({ turn }: Props) {
 
   const hasFinalResponse = lastAgentIdx >= 0;
   // Intermediate = everything before final agent_message (or ALL items if running)
-  const intermediateItems = hasFinalResponse
-    ? turn.items.slice(0, lastAgentIdx)
-    : turn.items;
+  const intermediateItems = hasFinalResponse ? turn.items.slice(0, lastAgentIdx) : turn.items;
 
   // Group intermediate items into segments by agent_message boundaries
   // Each segment: one agent_message + following tool/non-tool items until next agent_message
@@ -220,7 +303,9 @@ function TurnContentBase({ turn }: Props) {
       {/* User prompt — always visible at top */}
       <div className="render-content">
         <div className="turn-header">
-          <span className="turn-header-icon" style={{ background: 'var(--amber)', color: '#fff' }}>U</span>
+          <span className="turn-header-icon" style={{ background: 'var(--amber)', color: '#fff' }}>
+            U
+          </span>
           <span className="turn-header-title">You</span>
         </div>
         <p className="user-message">{turn.user_prompt}</p>
@@ -262,14 +347,10 @@ function TurnContentBase({ turn }: Props) {
       )}
 
       {/* Final agent message — always visible */}
-      {hasFinalResponse && (
-        <MemoItemCard key={turn.items[lastAgentIdx].id} item={turn.items[lastAgentIdx]} />
-      )}
+      {hasFinalResponse && <MemoItemCard key={turn.items[lastAgentIdx].id} item={turn.items[lastAgentIdx]} />}
 
       {/* Items after final agent message (rare — errors, etc.) */}
-      {hasFinalResponse && turn.items.slice(lastAgentIdx + 1).map((item) => (
-        <MemoItemCard key={item.id} item={item} />
-      ))}
+      {hasFinalResponse && turn.items.slice(lastAgentIdx + 1).map((item) => <MemoItemCard key={item.id} item={item} />)}
 
       {/* Pending state (no items at all) */}
       {turn.items.length === 0 && !turn.error && (turn.status === 'pending' || turn.status === 'running') && (
@@ -283,7 +364,9 @@ function TurnContentBase({ turn }: Props) {
       {/* Turn error (if any) */}
       {turn.error && (
         <div className="render-content">
-          <pre className="cmd-output" style={{ color: 'var(--red)' }}><code>{turn.error}</code></pre>
+          <pre className="cmd-output" style={{ color: 'var(--red)' }}>
+            <code>{turn.error}</code>
+          </pre>
         </div>
       )}
     </div>
@@ -291,4 +374,4 @@ function TurnContentBase({ turn }: Props) {
 }
 
 const TurnContent = memo(TurnContentBase);
-export default TurnContent;
+export default TurnContent;