repoburg 1.3.196 → 1.3.197

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

@@ -0,0 +1,291 @@
+import { useEffect, useRef, useState, useCallback } from 'react';
+import { marked } from 'marked';
+import DOMPurify from 'dompurify';
+import { MessageSquarePlus, X, Send, Quote } from 'lucide-react';
+import type { DiscussionThread } from '../types/index.ts';
+import { useStore } from '../store/store.ts';
+
+marked.setOptions({ breaks: true, gfm: true });
+
+function renderMarkdown(content: string): string {
+  const raw = marked.parse(content) as string;
+  return DOMPurify.sanitize(raw);
+}
+
+/** Find the text node and offset within it that corresponds to a character offset in the container's textContent. */
+function findTextNode(
+  container: HTMLElement,
+  charOffset: number,
+): { node: Text; offset: number } | null {
+  const walker = document.createTreeWalker(container, NodeFilter.SHOW_TEXT);
+  let count = 0;
+  while (walker.nextNode()) {
+    const node = walker.currentNode as Text;
+    const len = node.textContent?.length ?? 0;
+    if (count + len > charOffset) {
+      return { node, offset: charOffset - count };
+    }
+    count += len;
+  }
+  return null;
+}
+
+/** Highlight all thread anchors in the container by wrapping selected text in <mark> elements. */
+function applyHighlights(container: HTMLElement, threads: DiscussionThread[]): void {
+  // Remove existing marks (unwrap them back to plain text)
+  container.querySelectorAll('mark[data-thread-id]').forEach((mark) => {
+    const parent = mark.parentNode;
+    if (!parent) return;
+    const text = document.createTextNode(mark.textContent || '');
+    parent.replaceChild(text, mark);
+    parent.normalize();
+  });
+
+  for (const thread of threads) {
+    const start = findTextNode(container, thread.start_offset);
+    const end = findTextNode(container, thread.end_offset);
+    if (!start || !end) continue;
+
+    const range = document.createRange();
+    range.setStart(start.node, start.offset);
+    range.setEnd(end.node, end.offset);
+
+    const mark = document.createElement('mark');
+    mark.setAttribute('data-thread-id', thread.id);
+    if (thread.status === 'resolved') mark.classList.add('thread-mark-resolved');
+
+    try {
+      range.surroundContents(mark);
+    } catch {
+      // Range spans element boundaries — extract and wrap
+      const fragment = range.extractContents();
+      mark.appendChild(fragment);
+      range.insertNode(mark);
+    }
+  }
+}
+
+/** Compute character offsets of the current selection within the container's textContent. */
+function getSelectionOffsets(container: HTMLElement): { start: number; end: number; text: string } | null {
+  const sel = window.getSelection();
+  if (!sel || sel.rangeCount === 0) return null;
+  const range = sel.getRangeAt(0);
+  if (range.collapsed) return null;
+  if (!container.contains(range.commonAncestorContainer)) return null;
+
+  const preRange = document.createRange();
+  preRange.setStart(container, 0);
+  preRange.setEnd(range.startContainer, range.startOffset);
+  const start = preRange.toString().length;
+  const text = range.toString();
+  return { start, end: start + text.length, text };
+}
+
+interface Props {
+  itemId: string;
+  turnId: string;
+  sessionId: string;
+  content: string;
+  threads: DiscussionThread[];
+  runtimeType?: string;
+}
+
+export default function CommentableText({ itemId, turnId, sessionId, content, threads }: Props) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  const [showDiscussBtn, setShowDiscussBtn] = useState(false);
+  const [btnPos, setBtnPos] = useState({ x: 0, y: 0 });
+  const [showPopover, setShowPopover] = useState(false);
+  const [popoverPos, setPopoverPos] = useState({ x: 0, y: 0 });
+  const [message, setMessage] = useState('');
+  const [selectionInfo, setSelectionInfo] = useState<{ start: number; end: number; text: string } | null>(null);
+  const { createThread, switchRightTab } = useStore();
+
+  // Handle Quote button click — populate command input with selected text
+  const handleQuoteClick = useCallback(() => {
+    if (!selectionInfo) return;
+    const formatted = `\n\`\`\`QUOTE\n${selectionInfo.text}\n\`\`\`\n\n`;
+    useStore.setState({ quotedText: formatted });
+    setShowDiscussBtn(false);
+    setSelectionInfo(null);
+    window.getSelection()?.removeAllRanges();
+  }, [selectionInfo]);
+  const threadsForItem = threads.filter((t) => t.item_id === itemId);
+
+  // Render markdown + apply highlights after each render
+  useEffect(() => {
+    if (containerRef.current) {
+      applyHighlights(containerRef.current, threadsForItem);
+    }
+  });
+
+  // Dismiss button + popover when clicking outside the wrapper
+  useEffect(() => {
+    function handleGlobalMouseDown(e: MouseEvent) {
+      if (wrapperRef.current && !wrapperRef.current.contains(e.target as Node)) {
+        setShowDiscussBtn(false);
+        setShowPopover(false);
+      }
+    }
+    document.addEventListener('mousedown', handleGlobalMouseDown);
+    return () => document.removeEventListener('mousedown', handleGlobalMouseDown);
+  }, []);
+
+  // Handle mousedown in container — hide everything (new selection starting or click)
+  const handleMouseDown = useCallback(() => {
+    setShowDiscussBtn(false);
+    setShowPopover(false);
+  }, []);
+
+  // Handle mouseup — check for text selection
+  const handleMouseUp = useCallback(() => {
+    if (showPopover) return; // don't interfere while typing
+    const container = containerRef.current;
+    if (!container) return;
+
+    const result = getSelectionOffsets(container);
+    if (result && result.text.trim().length > 0) {
+      const sel = window.getSelection();
+      if (sel && sel.rangeCount > 0) {
+        // Use viewport coordinates (position:fixed) — avoids overflow clipping
+        // and stacking-context issues from nested containers.
+        const selRect = sel.getRangeAt(0).getBoundingClientRect();
+        const BUTTON_HEIGHT = 28;
+        const GAP = 6;
+        let btnY = selRect.top - BUTTON_HEIGHT - GAP;
+        if (btnY < 8) {
+          btnY = selRect.bottom + GAP;
+        }
+        setBtnPos({
+          x: selRect.right,
+          y: btnY,
+        });
+        setShowDiscussBtn(true);
+        setSelectionInfo(result);
+      }
+    } else {
+      setShowDiscussBtn(false);
+    }
+  }, [showPopover]);
+
+  // Handle Discuss button click
+  const handleDiscussClick = useCallback(() => {
+    setShowDiscussBtn(false);
+    setShowPopover(true);
+    // Position popover where the button was — button is hidden, popover takes its place
+    setPopoverPos({ x: btnPos.x, y: btnPos.y });
+  }, [btnPos]);
+
+  // Handle submit — create thread
+  const handleSubmit = useCallback(async () => {
+    if (!selectionInfo || !message.trim()) return;
+    await createThread(sessionId, {
+      itemId,
+      turnId,
+      startOffset: selectionInfo.start,
+      endOffset: selectionInfo.end,
+      selectedText: selectionInfo.text,
+      message: message.trim(),
+    });
+    setMessage('');
+    setShowPopover(false);
+    setSelectionInfo(null);
+    // Clear selection
+    window.getSelection()?.removeAllRanges();
+    // Switch to Threads tab
+    switchRightTab('threads');
+  }, [selectionInfo, message, createThread, sessionId, itemId, turnId, switchRightTab]);
+
+  // Handle mark click — navigate to Threads tab
+  const handleMarkClick = useCallback(
+    (e: React.MouseEvent) => {
+      const target = e.target as HTMLElement;
+      if (target.tagName === 'MARK' && target.hasAttribute('data-thread-id')) {
+        e.preventDefault();
+        switchRightTab('threads');
+        const threadId = target.getAttribute('data-thread-id');
+        // Scroll to thread card after a brief delay
+        setTimeout(() => {
+          const card = document.getElementById(`thread-${threadId}`);
+          if (card) {
+            card.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            card.classList.add('thread-card-highlighted');
+            setTimeout(() => card.classList.remove('thread-card-highlighted'), 1500);
+          }
+        }, 100);
+      }
+    },
+    [switchRightTab],
+  );
+
+  return (
+    <div style={{ position: 'relative' }} ref={wrapperRef}>
+      <div
+        ref={containerRef}
+        dangerouslySetInnerHTML={{ __html: renderMarkdown(content || '…') }}
+        onMouseDown={handleMouseDown}
+        onMouseUp={handleMouseUp}
+        onClick={handleMarkClick}
+      />
+
+      {/* Floating "Discuss" + "Quote" buttons */}
+      {showDiscussBtn && !showPopover && (
+        <div className="selection-actions" style={{ left: btnPos.x, top: btnPos.y }}>
+          <button
+            className="discuss-button"
+            onClick={handleDiscussClick}
+            title="Start a discussion about this text"
+          >
+            <MessageSquarePlus size={14} />
+            <span>Discuss</span>
+          </button>
+          <button
+            className="discuss-button"
+            onClick={handleQuoteClick}
+            title="Quote this text in your message"
+          >
+            <Quote size={14} />
+            <span>Quote</span>
+          </button>
+        </div>
+      )}
+
+      {/* Thread creation popover */}
+      {showPopover && (
+        <div className="thread-create-popover" style={{ left: popoverPos.x, top: popoverPos.y }}>
+          <div className="thread-create-header">
+            <span className="thread-create-quote">"{selectionInfo?.text.slice(0, 80)}{selectionInfo && selectionInfo.text.length > 80 ? '…' : ''}"</span>
+            <button className="thread-create-close" onClick={() => { setShowPopover(false); setSelectionInfo(null); }}>
+              <X size={14} />
+            </button>
+          </div>
+          <textarea
+            className="thread-create-input"
+            placeholder="Ask about this text…"
+            value={message}
+            onChange={(e) => setMessage(e.target.value)}
+            autoFocus
+            rows={2}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
+                e.preventDefault();
+                handleSubmit();
+              }
+              if (e.key === 'Escape') {
+                setShowPopover(false);
+                setSelectionInfo(null);
+              }
+            }}
+          />
+          <div className="thread-create-footer">
+            <span className="thread-create-hint">⌘↵ to send · Esc to cancel</span>
+            <button className="thread-create-send" onClick={handleSubmit} disabled={!message.trim()}>
+              <Send size={13} />
+              <span>Send</span>
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -20,6 +20,13 @@ function RenderAreaBase() {
   const turns = detail?.turns ?? [];
   const renderScrollRef = useRef<HTMLDivElement>(null);
 
+  // Auto-scroll to bottom when session changes or new turns are added
+  useEffect(() => {
+    if (renderScrollRef.current) {
+      renderScrollRef.current.scrollTop = renderScrollRef.current.scrollHeight;
+    }
+  }, [activeSessionId, turns.length]);
+
   // F4: Scroll to selected change path when it changes
   useEffect(() => {
     if (!selectedChangePath || activeRightTab !== 'changes') return;
@@ -150,9 +157,9 @@ function RenderAreaBase() {
         <div className="empty-state">No turns yet. Send a message below to start.</div>
       )}
 
-      {turns.map((turn, idx) => (
+      {turns.filter((t) => !t.thread_id).map((turn, idx) => (
         <div key={turn.id} id={`turn-${idx}`} className="turn-block">
-          <TurnContent turn={turn} />
+          <TurnContent turn={turn} runtimeType={detail.runtime_type} threads={detail.threads ?? []} />
         </div>
       ))}
     </div>

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

@@ -14,16 +14,16 @@ describe('RightPanel', () => {
   it('renders 4 tab buttons', () => {
     render(<RightPanel />);
     expect(screen.getByText('Turns')).toBeInTheDocument();
-    expect(screen.getByText('Metrics')).toBeInTheDocument();
     expect(screen.getByText('Changes')).toBeInTheDocument();
-    expect(screen.getByText('Logs')).toBeInTheDocument();
+    expect(screen.getByText('Tasks')).toBeInTheDocument();
+    expect(screen.getByText('Threads')).toBeInTheDocument();
   });
 
   it('active tab has active class', () => {
-    resetStore({ activeRightTab: 'metrics' });
+    resetStore({ activeRightTab: 'changes' });
     render(<RightPanel />);
-    const metricsTab = screen.getByText('Metrics').closest('.right-tab');
-    expect(metricsTab).toHaveClass('active');
+    const changesTab = screen.getByText('Changes').closest('.right-tab');
+    expect(changesTab).toHaveClass('active');
   });
 
   it('click on tab calls switchRightTab', () => {

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

@@ -1,40 +1,46 @@
 import { useStore } from '../store/store.ts';
 import TurnsPanel from './panels/TurnsPanel.tsx';
-import MetricsPanel from './panels/MetricsPanel.tsx';
 import ChangesPanel from './panels/ChangesPanel.tsx';
-import LogsPanel from './panels/LogsPanel.tsx';
+import TasksPanel from './panels/TasksPanel.tsx';
+import ThreadsPanel from './panels/ThreadsPanel.tsx';
 import type { RightTab } from '../types/index.ts';
 
-const TABS: { id: RightTab; label: string }[] = [
-  { id: 'turns', label: 'Turns' },
-  { id: 'metrics', label: 'Metrics' },
-  { id: 'changes', label: 'Changes' },
-  { id: 'logs', label: 'Logs' },
-];
-
 export default function RightPanel() {
-  const { activeRightTab, switchRightTab } = useStore();
+  const { activeRightTab, switchRightTab, activeSessionId, sessionDetails } = useStore();
+
+  // Badge: active background task count for the Tasks tab
+  const detail = activeSessionId ? sessionDetails[activeSessionId] : null;
+  const activeTaskCount = detail?.backgroundTasks?.length ?? 0;
+  const openThreadCount = detail?.threads?.filter((t) => t.status === 'open').length ?? 0;
+
+  const tabs: { id: RightTab; label: string; badge?: number }[] = [
+    { id: 'turns', label: 'Turns' },
+    { id: 'changes', label: 'Changes' },
+    { id: 'tasks', label: 'Tasks', badge: activeTaskCount || undefined },
+    { id: 'threads', label: 'Threads', badge: openThreadCount || undefined },
+  ];
 
   return (
     <div className="ide-right">
       <div className="right-tabs">
-        {TABS.map((tab) => (
+        {tabs.map((tab) => (
           <div
             key={tab.id}
             className={`right-tab ${activeRightTab === tab.id ? 'active' : ''}`}
             onClick={() => switchRightTab(tab.id)}
           >
             {tab.label}
+            {tab.badge ? <span className="right-tab-badge">{tab.badge}</span> : null}
           </div>
         ))}
       </div>
 
       <div className="right-content">
         {activeRightTab === 'turns' && <TurnsPanel />}
-        {activeRightTab === 'metrics' && <MetricsPanel />}
         {activeRightTab === 'changes' && <ChangesPanel />}
-        {activeRightTab === 'logs' && <LogsPanel />}
+        {activeRightTab === 'tasks' && <TasksPanel />}
+        {activeRightTab === 'threads' && <ThreadsPanel />}
       </div>
     </div>
   );
-}
+}

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

@@ -20,7 +20,11 @@ export default function SessionTabs() {
         const status = deriveSessionStatus(s);
         const isActive = activeSessionId === sid;
         return (
-          <div key={sid} className={`ide-tab ${isActive ? 'active' : ''}`} onClick={() => selectSession(sid)}>
+          <div
+            key={sid}
+            className={`ide-tab ${isActive ? 'active' : ''}`}
+            onClick={() => selectSession(sid)}
+          >
             <RuntimeIcon iconClass={status.iconClass} iconText={status.iconText} size={14} />
             {s.title || sid.slice(0, 8)}
             {status.dot && <StatusDot status={status.dot} />}
@@ -36,9 +40,10 @@ export default function SessionTabs() {
           </div>
         );
       })}
+
       <div className="ide-tab-add" title="New Session" onClick={() => setShowNewSessionDialog(true)}>
         <Plus size={14} />
       </div>
     </div>
   );
-}
+}

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

@@ -3,7 +3,15 @@ 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';
+import { Zap, Command, Terminal } from 'lucide-react';
+import type { ContextUsage } from '../types/index.ts';
+
+/** Format a token count as compact K/M (e.g. 30000 → "30K", 1500000 → "1.5M"). */
+function formatTokens(n: number): string {
+  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(n % 1_000_000 === 0 ? 0 : 1)}M`;
+  if (n >= 1_000) return `${Math.round(n / 1_000)}K`;
+  return String(n);
+}
 
 export default function StatusBar() {
   const activeSessionId = useStore((s) => s.activeSessionId);
@@ -12,6 +20,8 @@ export default function StatusBar() {
   );
   const detail = useStore((s) => (activeSessionId ? (s.sessionDetails[activeSessionId] ?? null) : null));
   const wsConnected = useStore((s) => s.wsConnected);
+  const switchRightTab = useStore((s) => s.switchRightTab);
+  const contextUsage = detail?.contextUsage ?? null;
 
   if (!session) {
     return (
@@ -35,6 +45,32 @@ export default function StatusBar() {
   const status = deriveSessionStatus(session);
   const duration = calcSessionDuration(detail, status.isRunning);
 
+  // Count active background tasks from two sources:
+  // 1. backgroundTasks (from background_tasks_changed WS event — Monitor only)
+  // 2. in_progress background_task items in turns (from item:started/updated — both Monitor & Subagent)
+  // Deduplicate by task_id.
+  const bgTasks = detail?.backgroundTasks ?? [];
+  const activeTaskIds = new Set<string>();
+  const activeTaskTypes = new Map<string, string>();
+
+  for (const t of bgTasks) {
+    activeTaskIds.add(t.task_id);
+    activeTaskTypes.set(t.task_id, t.task_type);
+  }
+
+  for (const turn of detail?.turns ?? []) {
+    for (const item of turn.items) {
+      if (item.type === 'background_task' && item.status === 'in_progress') {
+        const taskId = (item.data?.task_id as string) ?? item.external_item_id;
+        const taskType = (item.data?.task_type as string) ?? 'unknown';
+        activeTaskIds.add(taskId);
+        activeTaskTypes.set(taskId, taskType);
+      }
+    }
+  }
+
+  const monitorCount = [...activeTaskTypes.values()].filter((t) => t === 'local_bash').length;
+
   return (
     <div className="ide-statusbar">
       <div className="sb-item">
@@ -42,6 +78,19 @@ export default function StatusBar() {
       </div>
       <div className="sb-divider">|</div>
       <ModelSelector />
+      {monitorCount > 0 && (
+        <>
+          <div className="sb-divider">|</div>
+          <div
+            className="sb-item"
+            style={{ color: 'var(--amber)', cursor: 'pointer' }}
+            title={`${monitorCount} Monitor task${monitorCount > 1 ? 's' : ''} running — click to view`}
+            onClick={() => switchRightTab('tasks')}
+          >
+            <Terminal size={14} /> {monitorCount}
+          </div>
+        </>
+      )}
       <div className="sb-spacer" />
       <div className="sb-item" title={wsConnected ? 'WebSocket connected' : 'WebSocket disconnected'}>
         <span className={`status-dot ${wsConnected ? 'done' : 'error'}`} />
@@ -51,6 +100,7 @@ export default function StatusBar() {
       <div className="sb-item" style={session.status === 'failed' ? { color: 'var(--red)' } : undefined}>
         <StatusDot status={status.dot} /> {status.label}
       </div>
+      {contextUsage && <ContextBar usage={contextUsage} />}
       <div className="sb-divider">|</div>
       <div className="sb-item">{duration}</div>
       <div className="sb-divider">|</div>
@@ -60,3 +110,20 @@ export default function StatusBar() {
     </div>
   );
 }
+
+/** Compact context usage text — "%40 / 400K / 1M" format, hover tooltip. */
+function ContextBar({ usage }: { usage: ContextUsage }) {
+  const colorVar = usage.percentage >= 85 ? 'var(--red)' : usage.percentage >= 60 ? 'var(--amber)' : 'var(--green)';
+  const tooltip = `${formatTokens(usage.totalTokens)} / ${formatTokens(usage.contextWindow)} tokens`;
+
+  return (
+    <>
+      <div className="sb-divider">|</div>
+      <div className="sb-context" title={tooltip}>
+        <span className="sb-context-text" style={{ color: colorVar }}>
+          {Math.round(usage.percentage)}% / {formatTokens(usage.totalTokens)} / {formatTokens(usage.contextWindow)}
+        </span>
+      </div>
+    </>
+  );
+}

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

@@ -40,6 +40,16 @@ describe('TurnContent', () => {
     expect(screen.getByText('world').tagName).toBe('STRONG');
   });
 
+  it('renders Claude icon (CL / ic-claude) when runtimeType is "claude"', () => {
+    const item = makeItem('i1', 't1', 'agent_message');
+    item.data = { text: 'Hello' };
+    const turn = turnWithItems([item], { agent_response: 'Hello' });
+    render(<TurnContent turn={turn} runtimeType="claude" />);
+    const icon = document.querySelector('.ic-claude');
+    expect(icon).toBeTruthy();
+    expect(icon?.textContent).toBe('CL');
+  });
+
   it('renders reasoning item with "Reasoning" header', () => {
     const item = makeItem('i1', 't1', 'reasoning');
     item.data = { text: 'Thinking about it' };
@@ -107,41 +117,42 @@ describe('TurnContent', () => {
   });
 
   it('auto-expands intermediate steps when turn status is running', () => {
-    const reasoning = makeItem('i1', 't1', 'reasoning');
-    reasoning.data = { text: 'Thinking' };
+    const cmd = makeItem('i1', 't1', 'command_execution');
+    cmd.data = { command: 'ls', aggregated_output: 'output', exit_code: 0 };
     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' });
+    // Command is intermediate (before final agent_message)
+    const turn = turnWithItems([cmd, 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();
+    // Auto-expanded — Level 2 nested tool-calls header (wrench icon) visible
+    expect(document.querySelectorAll('.lucide-wrench').length).toBe(1);
   });
 
   it('auto-collapses intermediate steps when turn status is completed', () => {
-    const reasoning = makeItem('i1', 't1', 'reasoning');
-    reasoning.data = { text: 'Thinking' };
+    const cmd = makeItem('i1', 't1', 'command_execution');
+    cmd.data = { command: 'ls', aggregated_output: 'out', exit_code: 0 };
     const agentMsg = makeItem('i2', 't1', 'agent_message');
     agentMsg.data = { text: 'Done' };
-    const turn = turnWithItems([reasoning, agentMsg], { status: 'completed', agent_response: 'Done' });
+    const turn = turnWithItems([cmd, agentMsg], { status: 'completed', agent_response: 'Done' });
     render(<TurnContent turn={turn} />);
-    // Collapsed — reasoning header not visible
-    expect(screen.queryByText('Reasoning')).not.toBeInTheDocument();
+    // Collapsed — command header not visible
+    expect(screen.queryByText('Command')).not.toBeInTheDocument();
   });
 
   it('intermediate steps header click toggles expand', () => {
-    const reasoning = makeItem('i1', 't1', 'reasoning');
-    reasoning.data = { text: 'Thinking' };
+    const cmd = makeItem('i1', 't1', 'command_execution');
+    cmd.data = { command: 'ls', aggregated_output: 'output', exit_code: 0 };
     const agentMsg = makeItem('i2', 't1', 'agent_message');
     agentMsg.data = { text: 'Done' };
-    const turn = turnWithItems([reasoning, agentMsg], { status: 'completed', agent_response: 'Done' });
+    const turn = turnWithItems([cmd, agentMsg], { status: 'completed', agent_response: 'Done' });
     render(<TurnContent turn={turn} />);
-    // Initially collapsed
-    expect(screen.queryByText('Reasoning')).not.toBeInTheDocument();
-    // Click to expand
+    // Initially collapsed — Level 2 nested header (wrench icon) not visible
+    expect(document.querySelectorAll('.lucide-wrench').length).toBe(0);
+    // Click Level 1 header to expand
     const header = document.querySelector('.tool-calls-header')!;
     fireEvent.click(header);
-    expect(screen.getByText('Reasoning')).toBeInTheDocument();
+    // Level 2 header now visible
+    expect(document.querySelectorAll('.lucide-wrench').length).toBe(1);
   });
 
   it('shows "Waiting to start…" for pending turn with no items', () => {