Merge branch 'cw/improved-agent-outputs' into cw-merge-1772810637670

apps/web/src/components/AgentOutputViewer.test.tsx

@@ -0,0 +1,407 @@
+// @vitest-environment happy-dom
+import '@testing-library/jest-dom/vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { vi, describe, it, expect, beforeEach } from 'vitest'
+import * as parseModule from '@/lib/parse-agent-output'
+import { AgentOutputViewer } from './AgentOutputViewer'
+
+vi.mock('@/lib/trpc', () => ({
+  trpc: {
+    getAgentOutput: {
+      useQuery: vi.fn(() => ({ data: [], isLoading: false })),
+    },
+    onAgentOutput: {
+      useSubscription: vi.fn(),
+    },
+  },
+}))
+
+vi.mock('@/hooks', () => ({
+  useSubscriptionWithErrorHandling: vi.fn(() => ({
+    error: null,
+    isConnecting: false,
+  })),
+}))
+
+function makeToolResultMessage(content: string) {
+  return {
+    type: 'tool_result' as const,
+    content,
+    timestamp: new Date('2024-01-01T00:00:00Z'),
+  }
+}
+
+function makeSystemMessage(content: string) {
+  return {
+    type: 'system' as const,
+    content,
+    timestamp: new Date('2024-01-01T00:00:00Z'),
+  }
+}
+
+function makeTextMessage(content: string) {
+  return {
+    type: 'text' as const,
+    content,
+    timestamp: new Date('2024-01-01T00:00:00Z'),
+  }
+}
+
+function makeToolCallMessage(content: string, toolName: string) {
+  return {
+    type: 'tool_call' as const,
+    content,
+    timestamp: new Date('2024-01-01T00:00:00Z'),
+    meta: { toolName },
+  }
+}
+
+function makeTodoWriteMessage(todos: Array<{ content: string; status: string; activeForm: string }>) {
+  return {
+    type: 'tool_call' as const,
+    content: 'TodoWrite(...)',
+    timestamp: new Date('2024-01-01T00:00:00Z'),
+    meta: {
+      toolName: 'TodoWrite',
+      toolInput: { todos },
+    },
+  }
+}
+
+function makeToolResultMessageWithMeta(
+  content: string,
+  meta: { toolName?: string; toolInput?: unknown }
+) {
+  return {
+    type: 'tool_result' as const,
+    content,
+    timestamp: new Date('2024-01-01T00:00:00Z'),
+    meta,
+  }
+}
+
+function makeErrorMessage(content: string) {
+  return {
+    type: 'error' as const,
+    content,
+    timestamp: new Date('2024-01-01T00:00:00Z'),
+  }
+}
+
+function makeSessionEndMessage(content: string) {
+  return {
+    type: 'session_end' as const,
+    content,
+    timestamp: new Date('2024-01-01T00:00:00Z'),
+  }
+}
+
+describe('AgentOutputViewer', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    // Default: no messages
+    vi.spyOn(parseModule, 'parseAgentOutput').mockReturnValue([])
+  })
+
+  // Test 1: tool_result renders collapsed by default
+  it('renders tool_result collapsed by default', () => {
+    const content = 'file content here and more stuff'
+    vi.spyOn(parseModule, 'parseAgentOutput').mockReturnValue([makeToolResultMessage(content)])
+
+    render(<AgentOutputViewer agentId="agent-1" />)
+
+    // ChevronRight should be present (collapsed state)
+    // We check that the SVG for ChevronRight is in the document
+    // lucide-react renders SVGs — we look for the collapsed container containing the preview text
+    expect(screen.getByText(content.substring(0, 80))).toBeInTheDocument()
+
+    // "Result" badge should NOT be visible (collapsed)
+    expect(screen.queryByText('Result')).not.toBeInTheDocument()
+
+    // The container should NOT show a "Result" badge
+    // ChevronRight is rendered — verify no ChevronDown
+    const svgs = document.querySelectorAll('svg')
+    // We look for the collapsed state by absence of "Result" text
+    expect(screen.queryByText('Result')).toBeNull()
+  })
+
+  // Test 2: Clicking collapsed result expands it
+  it('expands tool_result on click', () => {
+    const longContent = 'a'.repeat(100)
+    vi.spyOn(parseModule, 'parseAgentOutput').mockReturnValue([makeToolResultMessage(longContent)])
+
+    render(<AgentOutputViewer agentId="agent-1" />)
+
+    // Initially collapsed — click it
+    const collapsedContainer = screen.getByText(longContent.substring(0, 80)).closest('div')!
+    fireEvent.click(collapsedContainer)
+
+    // After click: "Result" badge should be visible
+    expect(screen.getByText('Result')).toBeInTheDocument()
+
+    // Full content should be visible in whitespace-pre-wrap element
+    const preWrap = document.querySelector('.whitespace-pre-wrap')
+    expect(preWrap).toBeInTheDocument()
+    expect(preWrap).toHaveTextContent(longContent)
+
+    // ChevronRight should no longer be visible; ChevronDown should be present
+    expect(screen.queryByText('Result')).toBeInTheDocument()
+  })
+
+  // Test 3: Clicking expanded result collapses it again
+  it('collapses tool_result on second click', () => {
+    const longContent = 'b'.repeat(100)
+    vi.spyOn(parseModule, 'parseAgentOutput').mockReturnValue([makeToolResultMessage(longContent)])
+
+    render(<AgentOutputViewer agentId="agent-1" />)
+
+    // Click once to expand
+    const container = screen.getByText(longContent.substring(0, 80)).closest('div')!
+    fireEvent.click(container)
+    expect(screen.getByText('Result')).toBeInTheDocument()
+
+    // Click again to collapse
+    // After expansion, the container still exists — click the expanded container
+    // The clickable container is the border-l-2 div
+    const expandedContainer = screen.getByText('Result').closest('.border-l-2')!
+    fireEvent.click(expandedContainer)
+
+    // Should be collapsed again
+    expect(screen.queryByText('Result')).not.toBeInTheDocument()
+    expect(screen.getByText(longContent.substring(0, 80))).toBeInTheDocument()
+  })
+
+  // Test 4: system message renders as single dim line, no badge, no border-l
+  it('renders system message as a single dim line without badge or border', () => {
+    const content = 'Session started: abc-123'
+    vi.spyOn(parseModule, 'parseAgentOutput').mockReturnValue([makeSystemMessage(content)])
+
+    render(<AgentOutputViewer agentId="agent-1" />)
+
+    // Content is visible
+    expect(screen.getByText(content)).toBeInTheDocument()
+
+    // No "System" badge text
+    expect(screen.queryByText('System')).not.toBeInTheDocument()
+
+    // The rendered element should NOT have border-l class
+    const el = screen.getByText(content)
+    expect(el.className).not.toContain('border-l')
+    expect(el.closest('[class*="border-l"]')).toBeNull()
+  })
+
+  // Test 5: agentId prop change resets expanded results
+  it('resets expanded results when agentId changes', () => {
+    const content = 'c'.repeat(100)
+    vi.spyOn(parseModule, 'parseAgentOutput').mockReturnValue([makeToolResultMessage(content)])
+
+    const { rerender } = render(<AgentOutputViewer agentId="agent-1" />)
+
+    // Expand the result
+    const collapsedContainer = screen.getByText(content.substring(0, 80)).closest('div')!
+    fireEvent.click(collapsedContainer)
+    expect(screen.getByText('Result')).toBeInTheDocument()
+
+    // Change agentId — should reset expandedResults
+    rerender(<AgentOutputViewer agentId="agent-2" />)
+
+    // After agentId change, result should be collapsed again
+    expect(screen.queryByText('Result')).not.toBeInTheDocument()
+    // Preview text should be visible (collapsed state)
+    expect(screen.getByText(content.substring(0, 80))).toBeInTheDocument()
+  })
+
+  // Test 6: Other message types remain always-expanded (unaffected)
+  it('always renders text messages fully', () => {
+    const content = 'This is a text message'
+    vi.spyOn(parseModule, 'parseAgentOutput').mockReturnValue([makeTextMessage(content)])
+
+    render(<AgentOutputViewer agentId="agent-1" />)
+
+    expect(screen.getByText(content)).toBeInTheDocument()
+
+    // No chevron icons for text messages
+    const svgCount = document.querySelectorAll('svg').length
+    // Only the header bar icons (Pause) should be present, no expand/collapse chevrons
+    expect(screen.queryByText('Result')).not.toBeInTheDocument()
+    expect(screen.queryByText('System')).not.toBeInTheDocument()
+  })
+
+  it('always renders tool_call messages fully', () => {
+    const content = 'Read(file.txt)'
+    vi.spyOn(parseModule, 'parseAgentOutput').mockReturnValue([makeToolCallMessage(content, 'Read')])
+
+    render(<AgentOutputViewer agentId="agent-1" />)
+
+    expect(screen.getByText(content)).toBeInTheDocument()
+    // The tool name badge should be visible
+    expect(screen.getByText('Read')).toBeInTheDocument()
+  })
+
+  it('always renders error messages with Error badge', () => {
+    const content = 'Something went wrong'
+    vi.spyOn(parseModule, 'parseAgentOutput').mockReturnValue([makeErrorMessage(content)])
+
+    render(<AgentOutputViewer agentId="agent-1" />)
+
+    expect(screen.getByText('Error')).toBeInTheDocument()
+    expect(screen.getByText(content)).toBeInTheDocument()
+  })
+
+  it('always renders session_end messages with session completed text', () => {
+    vi.spyOn(parseModule, 'parseAgentOutput').mockReturnValue([makeSessionEndMessage('Session completed')])
+
+    render(<AgentOutputViewer agentId="agent-1" />)
+
+    expect(screen.getByText('Session completed')).toBeInTheDocument()
+  })
+
+  describe('Todo strip', () => {
+    it('is absent when no TodoWrite tool_call exists', () => {
+      vi.spyOn(parseModule, 'parseAgentOutput').mockReturnValue([
+        makeTextMessage('some output'),
+        makeToolCallMessage('Read(file.txt)', 'Read'),
+      ])
+
+      render(<AgentOutputViewer agentId="agent-1" />)
+
+      expect(screen.queryByText('TASKS')).not.toBeInTheDocument()
+    })
+
+    it('is present with TASKS label and all todos when a TodoWrite tool_call exists', () => {
+      vi.spyOn(parseModule, 'parseAgentOutput').mockReturnValue([
+        makeTodoWriteMessage([
+          { content: 'Fix bug', status: 'completed', activeForm: 'Fixing bug' },
+          { content: 'Add tests', status: 'in_progress', activeForm: 'Adding tests' },
+          { content: 'Update docs', status: 'pending', activeForm: 'Updating docs' },
+        ]),
+      ])
+
+      render(<AgentOutputViewer agentId="agent-1" />)
+
+      expect(screen.getByText('TASKS')).toBeInTheDocument()
+      expect(screen.getByText('Fix bug')).toBeInTheDocument()
+      expect(screen.getByText('Add tests')).toBeInTheDocument()
+      expect(screen.getByText('Update docs')).toBeInTheDocument()
+    })
+
+    it('shows only the most recent TodoWrite todos', () => {
+      vi.spyOn(parseModule, 'parseAgentOutput').mockReturnValue([
+        makeTodoWriteMessage([
+          { content: 'Old task', status: 'pending', activeForm: 'Old task' },
+        ]),
+        makeTodoWriteMessage([
+          { content: 'New task', status: 'in_progress', activeForm: 'New task' },
+        ]),
+      ])
+
+      render(<AgentOutputViewer agentId="agent-1" />)
+
+      expect(screen.getByText('New task')).toBeInTheDocument()
+      expect(screen.queryByText('Old task')).not.toBeInTheDocument()
+    })
+
+    it('renders Loader2 with animate-spin for in_progress todo', () => {
+      vi.spyOn(parseModule, 'parseAgentOutput').mockReturnValue([
+        makeTodoWriteMessage([
+          { content: 'Work', status: 'in_progress', activeForm: 'Working' },
+        ]),
+      ])
+
+      render(<AgentOutputViewer agentId="agent-1" />)
+
+      // Find SVG with animate-spin class (Loader2)
+      const spinningIcon = document.querySelector('svg.animate-spin')
+      expect(spinningIcon).toBeInTheDocument()
+    })
+
+    it('renders CheckCircle2 and strikethrough text for completed todo', () => {
+      vi.spyOn(parseModule, 'parseAgentOutput').mockReturnValue([
+        makeTodoWriteMessage([
+          { content: 'Done', status: 'completed', activeForm: 'Done' },
+        ]),
+      ])
+
+      render(<AgentOutputViewer agentId="agent-1" />)
+
+      const doneText = screen.getByText('Done')
+      expect(doneText.className).toContain('line-through')
+    })
+
+    it('renders Circle and muted text without strikethrough for pending todo', () => {
+      vi.spyOn(parseModule, 'parseAgentOutput').mockReturnValue([
+        makeTodoWriteMessage([
+          { content: 'Later', status: 'pending', activeForm: 'Later' },
+        ]),
+      ])
+
+      render(<AgentOutputViewer agentId="agent-1" />)
+
+      const laterText = screen.getByText('Later')
+      expect(laterText.className).not.toContain('line-through')
+    })
+
+    it('renders at most 5 todo rows and shows overflow count when there are 7 todos', () => {
+      const todos = Array.from({ length: 7 }, (_, i) => ({
+        content: `Task ${i + 1}`,
+        status: 'pending',
+        activeForm: `Task ${i + 1}`,
+      }))
+      vi.spyOn(parseModule, 'parseAgentOutput').mockReturnValue([
+        makeTodoWriteMessage(todos),
+      ])
+
+      render(<AgentOutputViewer agentId="agent-1" />)
+
+      // Only first 5 are rendered
+      expect(screen.getByText('Task 1')).toBeInTheDocument()
+      expect(screen.getByText('Task 5')).toBeInTheDocument()
+      expect(screen.queryByText('Task 6')).not.toBeInTheDocument()
+      expect(screen.queryByText('Task 7')).not.toBeInTheDocument()
+
+      // Overflow indicator
+      expect(screen.getByText('+ 2 more')).toBeInTheDocument()
+    })
+  })
+
+  describe('Task result collapsed preview', () => {
+    it('shows subagent_type result label when meta.toolName is Task with subagent_type', () => {
+      vi.spyOn(parseModule, 'parseAgentOutput').mockReturnValue([
+        makeToolResultMessageWithMeta('raw subagent output content '.repeat(5), {
+          toolName: 'Task',
+          toolInput: { subagent_type: 'Explore', description: 'desc', prompt: 'prompt' },
+        }),
+      ])
+
+      render(<AgentOutputViewer agentId="agent-1" />)
+
+      expect(screen.getByText('Explore result')).toBeInTheDocument()
+    })
+
+    it('shows Subagent result when meta.toolName is Task but no subagent_type', () => {
+      vi.spyOn(parseModule, 'parseAgentOutput').mockReturnValue([
+        makeToolResultMessageWithMeta('raw subagent output content '.repeat(5), {
+          toolName: 'Task',
+          toolInput: { description: 'desc', prompt: 'prompt' },
+        }),
+      ])
+
+      render(<AgentOutputViewer agentId="agent-1" />)
+
+      expect(screen.getByText('Subagent result')).toBeInTheDocument()
+    })
+
+    it('shows first 80 chars of content for non-Task tool results', () => {
+      const content = 'some file content that is longer than 80 characters '.repeat(3)
+      vi.spyOn(parseModule, 'parseAgentOutput').mockReturnValue([
+        makeToolResultMessageWithMeta(content, {
+          toolName: 'Read',
+        }),
+      ])
+
+      render(<AgentOutputViewer agentId="agent-1" />)
+
+      expect(screen.getByText(content.substring(0, 80))).toBeInTheDocument()
+    })
+  })
+})

apps/web/src/components/AgentOutputViewer.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState } from "react";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
-import { ArrowDown, Pause, Play, AlertCircle, Square } from "lucide-react";
+import { ArrowDown, Pause, Play, AlertCircle, Square, ChevronRight, ChevronDown, CheckCircle2, Loader2, Circle } from "lucide-react";
 import { trpc } from "@/lib/trpc";
 import { useSubscriptionWithErrorHandling } from "@/hooks";
 import {
@@ -21,6 +21,7 @@ interface AgentOutputViewerProps {
 export function AgentOutputViewer({ agentId, agentName, status, onStop }: AgentOutputViewerProps) {
   const [messages, setMessages] = useState<ParsedMessage[]>([]);
   const [follow, setFollow] = useState(true);
+  const [expandedResults, setExpandedResults] = useState<Set<number>>(new Set());
   const containerRef = useRef<HTMLDivElement>(null);
   // Accumulate timestamped chunks: initial query data + live subscription chunks
   const chunksRef = useRef<TimestampedChunk[]>([]);
@@ -65,6 +66,7 @@ export function AgentOutputViewer({ agentId, agentName, status, onStop }: AgentO
     chunksRef.current = [];
     setMessages([]);
     setFollow(true);
+    setExpandedResults(new Set());
   }, [agentId]);
 
   // Auto-scroll to bottom when following
@@ -95,6 +97,14 @@ export function AgentOutputViewer({ agentId, agentName, status, onStop }: AgentO
   const isLoading = outputQuery.isLoading;
   const hasOutput = messages.length > 0;
 
+  const lastTodoWrite = [...messages]
+    .reverse()
+    .find(m => m.type === "tool_call" && m.meta?.toolName === "TodoWrite");
+
+  const currentTodos = lastTodoWrite
+    ? (lastTodoWrite.meta?.toolInput as { todos: Array<{ content: string; status: string; activeForm: string }> } | undefined)?.todos ?? []
+    : [];
+
   return (
     <div className="flex flex-col h-full rounded-lg border border-terminal-border overflow-hidden">
       {/* Header */}
@@ -157,6 +167,30 @@ export function AgentOutputViewer({ agentId, agentName, status, onStop }: AgentO
         </div>
       </div>
 
+      {/* Todo strip */}
+      {currentTodos.length > 0 && (
+        <div className="bg-terminal border-b border-terminal-border px-4 py-2">
+          <div className="text-[10px] text-terminal-muted/60 font-mono uppercase tracking-widest mb-1">TASKS</div>
+          {currentTodos.slice(0, 5).map((todo, i) => (
+            <div key={i} className="flex items-center gap-2 font-mono text-xs">
+              {todo.status === "completed" && <CheckCircle2 className="h-3 w-3 text-terminal-muted/60" />}
+              {todo.status === "in_progress" && <Loader2 className="h-3 w-3 text-terminal-fg animate-spin" />}
+              {todo.status === "pending" && <Circle className="h-3 w-3 text-terminal-muted/40" />}
+              <span className={
+                todo.status === "completed"
+                  ? "text-terminal-muted/60 line-through"
+                  : todo.status === "in_progress"
+                  ? "text-terminal-fg"
+                  : "text-terminal-muted"
+              }>{todo.content}</span>
+            </div>
+          ))}
+          {currentTodos.length > 5 && (
+            <div className="font-mono text-xs text-terminal-muted/60">+ {currentTodos.length - 5} more</div>
+          )}
+        </div>
+      )}
+
       {/* Output content */}
       <div
         ref={containerRef}
@@ -172,10 +206,8 @@ export function AgentOutputViewer({ agentId, agentName, status, onStop }: AgentO
             {messages.map((message, index) => (
               <div key={index} className={getMessageStyling(message.type)}>
                 {message.type === 'system' && (
-                  <div className="flex items-center gap-2">
+                  <div className="text-terminal-muted/60 text-xs font-mono">
-                    <Badge variant="secondary" className="text-xs bg-terminal-border text-terminal-system">System</Badge>
+                    {message.content}
-                    <span className="text-xs text-terminal-muted">{message.content}</span>
-                    <Timestamp date={message.timestamp} />
                   </div>
                 )}
 
@@ -203,13 +235,34 @@ export function AgentOutputViewer({ agentId, agentName, status, onStop }: AgentO
                 )}
 
                 {message.type === 'tool_result' && (
-                  <div className="border-l-2 border-terminal-result pl-3 py-1 bg-white/[0.02] min-w-0">
+                  <div
-                    <Badge variant="outline" className="mb-1 text-xs text-terminal-result border-terminal-result">
+                    className="border-l-2 border-terminal-result pl-3 py-1 bg-white/[0.02] min-w-0 cursor-pointer"
-                      Result
+                    onClick={() => setExpandedResults(prev => {
-                    </Badge>
+                      const next = new Set(prev);
-                    <div className="font-mono text-xs text-terminal-muted whitespace-pre-wrap break-words">
+                      if (next.has(index)) next.delete(index); else next.add(index);
-                      {message.content}
+                      return next;
-                    </div>
+                    })}
+                  >
+                    {expandedResults.has(index) ? (
+                      <>
+                        <ChevronDown className="h-4 w-4 text-terminal-muted inline-block shrink-0 mr-1" />
+                        <Badge variant="outline" className="mb-1 text-xs text-terminal-result border-terminal-result">
+                          Result
+                        </Badge>
+                        <div className="font-mono text-xs text-terminal-muted whitespace-pre-wrap break-words">
+                          {message.content}
+                        </div>
+                      </>
+                    ) : (
+                      <>
+                        <ChevronRight className="h-4 w-4 text-terminal-muted inline-block shrink-0 mr-1" />
+                        <span className="text-terminal-muted/60 text-xs font-mono truncate">
+                          {message.meta?.toolName === "Task"
+                            ? `${(message.meta.toolInput as any)?.subagent_type ?? "Subagent"} result`
+                            : message.content.substring(0, 80)}
+                        </span>
+                      </>
+                    )}
                   </div>
                 )}
 

apps/web/src/lib/parse-agent-output.test.ts

@@ -0,0 +1,264 @@
+import { parseAgentOutput } from "./parse-agent-output";
+
+function chunk(events: object[]): string {
+  return events.map((e) => JSON.stringify(e)).join("\n");
+}
+
+describe("parseAgentOutput", () => {
+  // 1. toolInput is set on tool_call messages
+  it("sets meta.toolInput on tool_call messages", () => {
+    const input = chunk([
+      {
+        type: "assistant",
+        message: {
+          content: [
+            {
+              type: "tool_use",
+              id: "tu1",
+              name: "Read",
+              input: { file_path: "/foo.ts" },
+            },
+          ],
+        },
+      },
+    ]);
+    const messages = parseAgentOutput(input);
+    const toolCall = messages.find((m) => m.type === "tool_call");
+    expect(toolCall).toBeDefined();
+    expect(toolCall!.meta?.toolInput).toEqual({ file_path: "/foo.ts" });
+  });
+
+  // 2. tool_result with tool_use_id gets meta.toolName and meta.toolInput from registry
+  it("correlates tool_result to its tool_use via registry", () => {
+    const input = chunk([
+      {
+        type: "assistant",
+        message: {
+          content: [
+            {
+              type: "tool_use",
+              id: "tu1",
+              name: "Read",
+              input: { file_path: "/foo.ts" },
+            },
+          ],
+        },
+      },
+      {
+        type: "user",
+        message: {
+          content: [
+            {
+              type: "tool_result",
+              tool_use_id: "tu1",
+              content: "file contents",
+            },
+          ],
+        },
+      },
+    ]);
+    const messages = parseAgentOutput(input);
+    const toolResult = messages.find((m) => m.type === "tool_result");
+    expect(toolResult).toBeDefined();
+    expect(toolResult!.meta?.toolName).toBe("Read");
+    expect(toolResult!.meta?.toolInput).toEqual({ file_path: "/foo.ts" });
+  });
+
+  // 3. tool_result with no matching registry entry has no meta.toolName
+  it("tool_result with unknown tool_use_id has no meta.toolName", () => {
+    const input = chunk([
+      {
+        type: "user",
+        message: {
+          content: [
+            {
+              type: "tool_result",
+              tool_use_id: "unknown-id",
+              content: "output",
+            },
+          ],
+        },
+      },
+    ]);
+    const messages = parseAgentOutput(input);
+    const toolResult = messages.find((m) => m.type === "tool_result");
+    expect(toolResult).toBeDefined();
+    expect(toolResult!.meta?.toolName).toBeUndefined();
+  });
+
+  // 4. tool_result with is_error: true produces type: "error" and meta.isError: true
+  it("tool_result with is_error: true produces error message", () => {
+    const input = chunk([
+      {
+        type: "user",
+        message: {
+          content: [
+            {
+              type: "tool_result",
+              tool_use_id: "tu1",
+              is_error: true,
+              content: "something went wrong",
+            },
+          ],
+        },
+      },
+    ]);
+    const messages = parseAgentOutput(input);
+    const errorMsg = messages.find((m) => m.content === "something went wrong");
+    expect(errorMsg).toBeDefined();
+    expect(errorMsg!.type).toBe("error");
+    expect(errorMsg!.meta?.isError).toBe(true);
+  });
+
+  // 5. tool_result from a Task tool_use gets correct meta.toolName and meta.toolInput
+  it("tool_result from Task tool_use has correct meta", () => {
+    const taskInput = {
+      subagent_type: "Explore",
+      description: "find files",
+      prompt: "search for *.ts",
+    };
+    const input = chunk([
+      {
+        type: "assistant",
+        message: {
+          content: [
+            {
+              type: "tool_use",
+              id: "tu2",
+              name: "Task",
+              input: taskInput,
+            },
+          ],
+        },
+      },
+      {
+        type: "user",
+        message: {
+          content: [
+            {
+              type: "tool_result",
+              tool_use_id: "tu2",
+              content: "found 10 files",
+            },
+          ],
+        },
+      },
+    ]);
+    const messages = parseAgentOutput(input);
+    const toolResult = messages.find((m) => m.type === "tool_result");
+    expect(toolResult).toBeDefined();
+    expect(toolResult!.meta?.toolName).toBe("Task");
+    expect(toolResult!.meta?.toolInput).toEqual(taskInput);
+  });
+
+  // 6. Unknown top-level event type produces a system message
+  it("unknown top-level event type produces system message", () => {
+    const input = chunk([{ type: "future_event_type", data: {} }]);
+    const messages = parseAgentOutput(input);
+    expect(messages).toHaveLength(1);
+    expect(messages[0].type).toBe("system");
+    expect(messages[0].content).toBe("[unknown event: future_event_type]");
+  });
+
+  // 7. Unknown assistant content block type produces a system message
+  it("unknown assistant content block type produces system message", () => {
+    const input = chunk([
+      {
+        type: "assistant",
+        message: {
+          content: [{ type: "image", data: "base64..." }],
+        },
+      },
+    ]);
+    const messages = parseAgentOutput(input);
+    expect(messages).toHaveLength(1);
+    expect(messages[0].type).toBe("system");
+    expect(messages[0].content).toBe("[unsupported content block: image]");
+  });
+
+  // 8. Previously passing behavior unchanged
+  describe("previously passing behavior", () => {
+    it("system event with session_id produces system message", () => {
+      const input = chunk([{ type: "system", session_id: "sess-123" }]);
+      const messages = parseAgentOutput(input);
+      expect(messages).toHaveLength(1);
+      expect(messages[0].type).toBe("system");
+      expect(messages[0].content).toBe("Session started: sess-123");
+    });
+
+    it("assistant text block produces text message", () => {
+      const input = chunk([
+        {
+          type: "assistant",
+          message: {
+            content: [{ type: "text", text: "Hello, world!" }],
+          },
+        },
+      ]);
+      const messages = parseAgentOutput(input);
+      expect(messages).toHaveLength(1);
+      expect(messages[0].type).toBe("text");
+      expect(messages[0].content).toBe("Hello, world!");
+    });
+
+    it("assistant tool_use block produces tool_call message with meta.toolName", () => {
+      const input = chunk([
+        {
+          type: "assistant",
+          message: {
+            content: [
+              {
+                type: "tool_use",
+                id: "tu1",
+                name: "Bash",
+                input: { command: "ls -la", description: "list files" },
+              },
+            ],
+          },
+        },
+      ]);
+      const messages = parseAgentOutput(input);
+      const toolCall = messages.find((m) => m.type === "tool_call");
+      expect(toolCall).toBeDefined();
+      expect(toolCall!.meta?.toolName).toBe("Bash");
+    });
+
+    it("result event with is_error: false produces session_end", () => {
+      const input = chunk([
+        {
+          type: "result",
+          is_error: false,
+          total_cost_usd: 0.01,
+          duration_ms: 5000,
+        },
+      ]);
+      const messages = parseAgentOutput(input);
+      expect(messages).toHaveLength(1);
+      expect(messages[0].type).toBe("session_end");
+      expect(messages[0].content).toBe("Session completed");
+    });
+
+    it("result event with is_error: true produces session_end with meta.isError", () => {
+      const input = chunk([
+        {
+          type: "result",
+          is_error: true,
+          total_cost_usd: 0.01,
+          duration_ms: 5000,
+        },
+      ]);
+      const messages = parseAgentOutput(input);
+      expect(messages).toHaveLength(1);
+      expect(messages[0].type).toBe("session_end");
+      expect(messages[0].meta?.isError).toBe(true);
+    });
+
+    it("non-JSON line produces error message with raw line as content", () => {
+      const rawLine = "This is not JSON at all";
+      const messages = parseAgentOutput(rawLine);
+      expect(messages).toHaveLength(1);
+      expect(messages[0].type).toBe("error");
+      expect(messages[0].content).toBe(rawLine);
+    });
+  });
+});

apps/web/src/lib/parse-agent-output.ts

@@ -10,6 +10,7 @@ export interface ParsedMessage {
   timestamp?: Date;
   meta?: {
     toolName?: string;
+    toolInput?: unknown;
     isError?: boolean;
     cost?: number;
     duration?: number;
@@ -80,6 +81,7 @@ export function parseAgentOutput(raw: string | TimestampedChunk[]): ParsedMessag
       : raw.map((c) => ({ content: c.content, timestamp: new Date(c.createdAt) }));
 
   const parsedMessages: ParsedMessage[] = [];
+  const toolUseRegistry = new Map<string, { name: string; input: unknown }>();
 
   for (const chunk of chunks) {
     const lines = chunk.content.split("\n").filter(Boolean);
@@ -113,7 +115,14 @@ export function parseAgentOutput(raw: string | TimestampedChunk[]): ParsedMessag
                 type: "tool_call",
                 content: formatToolCall(block),
                 timestamp: chunk.timestamp,
-                meta: { toolName: block.name },
+                meta: { toolName: block.name, toolInput: block.input },
+              });
+              toolUseRegistry.set(block.id, { name: block.name, input: block.input });
+            } else {
+              parsedMessages.push({
+                type: "system",
+                content: `[unsupported content block: ${block.type}]`,
+                timestamp: chunk.timestamp,
               });
             }
           }
@@ -149,10 +158,20 @@ export function parseAgentOutput(raw: string | TimestampedChunk[]): ParsedMessag
                   output.length > 1000
                     ? output.substring(0, 1000) + "\n... (truncated)"
                     : output;
+                const isError = block.is_error === true;
+                const originatingCall = block.tool_use_id
+                  ? toolUseRegistry.get(block.tool_use_id)
+                  : undefined;
                 parsedMessages.push({
-                  type: "tool_result",
+                  type: isError ? "error" : "tool_result",
                   content: displayOutput,
                   timestamp: chunk.timestamp,
+                  meta: {
+                    ...(isError ? { isError: true } : {}),
+                    ...(originatingCall
+                      ? { toolName: originatingCall.name, toolInput: originatingCall.input }
+                      : {}),
+                  },
                 });
               }
             }
@@ -180,6 +199,12 @@ export function parseAgentOutput(raw: string | TimestampedChunk[]): ParsedMessag
               duration: event.duration_ms,
             },
           });
+        } else {
+          parsedMessages.push({
+            type: "system",
+            content: `[unknown event: ${event.type ?? "(no type)"}]`,
+            timestamp: chunk.timestamp,
+          });
         }
       } catch {
         // Not JSON, display as-is