@townco/ui 0.1.66 → 0.1.68

package/dist/core/hooks/use-chat-messages.d.ts

@@ -14,7 +14,7 @@ export declare function useChatMessages(client: AcpClient | null, startSession:
         toolCalls?: {
             id: string;
             title: string;
-            kind: "read" | "edit" | "delete" | "move" | "search" | "execute" | "think" | "fetch" | "switch_mode" | "other";
+            kind: "search" | "read" | "edit" | "delete" | "move" | "execute" | "think" | "fetch" | "switch_mode" | "other";
             status: "pending" | "in_progress" | "completed" | "failed";
             batchId?: string | undefined;
             prettyName?: string | undefined;

package/dist/core/hooks/use-chat-session.d.ts

@@ -3,7 +3,7 @@ import type { AcpClient } from "../../sdk/client/index.js";
  * Hook for managing chat session lifecycle
  */
 export declare function useChatSession(client: AcpClient | null, initialSessionId?: string | null): {
-    connectionStatus: "error" | "connecting" | "connected" | "disconnected";
+    connectionStatus: "disconnected" | "connecting" | "connected" | "error";
     sessionId: string | null;
     connect: () => Promise<void>;
     loadSession: (sessionIdToLoad: string) => Promise<void>;

package/dist/core/hooks/use-tool-calls.d.ts

@@ -12,7 +12,7 @@ export declare function useToolCalls(client: AcpClient | null): {
     toolCalls: Record<string, {
         id: string;
         title: string;
-        kind: "read" | "edit" | "delete" | "move" | "search" | "execute" | "think" | "fetch" | "switch_mode" | "other";
+        kind: "search" | "read" | "edit" | "delete" | "move" | "execute" | "think" | "fetch" | "switch_mode" | "other";
         status: "pending" | "in_progress" | "completed" | "failed";
         batchId?: string | undefined;
         prettyName?: string | undefined;

package/dist/core/hooks/use-tool-calls.js

@@ -1,5 +1,7 @@
+import { createLogger } from "@townco/core";
 import { useEffect } from "react";
 import { useChatStore } from "../store/chat-store.js";
+const logger = createLogger("use-tool-calls", "debug");
 /**
  * Hook to track and manage tool calls from ACP sessions
  *
@@ -20,7 +22,6 @@ export function useToolCalls(client) {
         // Subscribe to session updates for tool calls
         const unsubscribe = client.onSessionUpdate((update) => {
             if (update.type === "tool_call") {
-                // Initial tool call notification
                 // Add to session-level tool calls (for sidebar)
                 addToolCall(update.sessionId, update.toolCall);
                 // Also add to current assistant message (for inline display)

package/dist/core/schemas/tool-call.d.ts

@@ -498,6 +498,97 @@ export declare const ToolCallUpdateSchema: z.ZodObject<{
     }, z.core.$strip>>;
     subagentPort: z.ZodOptional<z.ZodNumber>;
     subagentSessionId: z.ZodOptional<z.ZodString>;
+    subagentMessages: z.ZodOptional<z.ZodArray<z.ZodObject<{
+        id: z.ZodString;
+        content: z.ZodString;
+        toolCalls: z.ZodOptional<z.ZodArray<z.ZodObject<{
+            id: z.ZodString;
+            title: z.ZodString;
+            prettyName: z.ZodOptional<z.ZodString>;
+            icon: z.ZodOptional<z.ZodString>;
+            status: z.ZodEnum<{
+                pending: "pending";
+                in_progress: "in_progress";
+                completed: "completed";
+                failed: "failed";
+            }>;
+            content: z.ZodOptional<z.ZodArray<z.ZodDiscriminatedUnion<[z.ZodObject<{
+                type: z.ZodLiteral<"content">;
+                content: z.ZodObject<{
+                    type: z.ZodLiteral<"text">;
+                    text: z.ZodString;
+                }, z.core.$strip>;
+            }, z.core.$strip>, z.ZodObject<{
+                type: z.ZodLiteral<"text">;
+                text: z.ZodString;
+            }, z.core.$strip>, z.ZodObject<{
+                type: z.ZodLiteral<"image">;
+                data: z.ZodString;
+                mimeType: z.ZodOptional<z.ZodString>;
+                alt: z.ZodOptional<z.ZodString>;
+            }, z.core.$strip>, z.ZodObject<{
+                type: z.ZodLiteral<"image">;
+                url: z.ZodString;
+                alt: z.ZodOptional<z.ZodString>;
+            }, z.core.$strip>, z.ZodObject<{
+                type: z.ZodLiteral<"diff">;
+                path: z.ZodString;
+                oldText: z.ZodString;
+                newText: z.ZodString;
+                line: z.ZodOptional<z.ZodNullable<z.ZodNumber>>;
+            }, z.core.$strip>, z.ZodObject<{
+                type: z.ZodLiteral<"terminal">;
+                terminalId: z.ZodString;
+            }, z.core.$strip>], "type">>>;
+        }, z.core.$strip>>>;
+        contentBlocks: z.ZodOptional<z.ZodArray<z.ZodDiscriminatedUnion<[z.ZodObject<{
+            type: z.ZodLiteral<"text">;
+            text: z.ZodString;
+        }, z.core.$strip>, z.ZodObject<{
+            type: z.ZodLiteral<"tool_call">;
+            toolCall: z.ZodObject<{
+                id: z.ZodString;
+                title: z.ZodString;
+                prettyName: z.ZodOptional<z.ZodString>;
+                icon: z.ZodOptional<z.ZodString>;
+                status: z.ZodEnum<{
+                    pending: "pending";
+                    in_progress: "in_progress";
+                    completed: "completed";
+                    failed: "failed";
+                }>;
+                content: z.ZodOptional<z.ZodArray<z.ZodDiscriminatedUnion<[z.ZodObject<{
+                    type: z.ZodLiteral<"content">;
+                    content: z.ZodObject<{
+                        type: z.ZodLiteral<"text">;
+                        text: z.ZodString;
+                    }, z.core.$strip>;
+                }, z.core.$strip>, z.ZodObject<{
+                    type: z.ZodLiteral<"text">;
+                    text: z.ZodString;
+                }, z.core.$strip>, z.ZodObject<{
+                    type: z.ZodLiteral<"image">;
+                    data: z.ZodString;
+                    mimeType: z.ZodOptional<z.ZodString>;
+                    alt: z.ZodOptional<z.ZodString>;
+                }, z.core.$strip>, z.ZodObject<{
+                    type: z.ZodLiteral<"image">;
+                    url: z.ZodString;
+                    alt: z.ZodOptional<z.ZodString>;
+                }, z.core.$strip>, z.ZodObject<{
+                    type: z.ZodLiteral<"diff">;
+                    path: z.ZodString;
+                    oldText: z.ZodString;
+                    newText: z.ZodString;
+                    line: z.ZodOptional<z.ZodNullable<z.ZodNumber>>;
+                }, z.core.$strip>, z.ZodObject<{
+                    type: z.ZodLiteral<"terminal">;
+                    terminalId: z.ZodString;
+                }, z.core.$strip>], "type">>>;
+            }, z.core.$strip>;
+        }, z.core.$strip>], "type">>>;
+        isStreaming: z.ZodOptional<z.ZodBoolean>;
+    }, z.core.$strip>>>;
 }, z.core.$strip>;
 export type ToolCallUpdate = z.infer<typeof ToolCallUpdateSchema>;
 /**

package/dist/core/schemas/tool-call.js

@@ -195,6 +195,8 @@ export const ToolCallUpdateSchema = z.object({
     subagentPort: z.number().optional(),
     /** Sub-agent session ID for SSE connection */
     subagentSessionId: z.string().optional(),
+    /** Sub-agent messages for replay */
+    subagentMessages: z.array(SubagentMessageSchema).optional(),
 });
 /**
  * Helper to merge a tool call update into an existing tool call
@@ -220,6 +222,8 @@ export function mergeToolCallUpdate(existing, update) {
         // Sub-agent connection info
         subagentPort: update.subagentPort ?? existing.subagentPort,
         subagentSessionId: update.subagentSessionId ?? existing.subagentSessionId,
+        // Sub-agent messages for replay
+        subagentMessages: update.subagentMessages ?? existing.subagentMessages,
     };
     return merged;
 }

package/dist/gui/components/Button.d.ts

@@ -1,7 +1,7 @@
 import { type VariantProps } from "class-variance-authority";
 import * as React from "react";
 declare const buttonVariants: (props?: ({
-    variant?: "default" | "link" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
+    variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
     size?: "default" | "icon" | "sm" | "lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {

package/dist/gui/components/MessageContent.js

@@ -58,11 +58,13 @@ export const MessageContent = React.forwardRef(({ role: roleProp, variant, isStr
                     // Helper to check if a tool call is preliminary (invoking)
                     const isPreliminary = (tc) => tc.status === "pending" &&
                         (!tc.rawInput || Object.keys(tc.rawInput).length === 0);
-                    // Helper to group tool calls by batchId and consecutive preliminary calls
+                    // Helper to group tool calls by batchId, consecutive same-title calls, or consecutive preliminary calls
                     const groupToolCalls = (toolCalls) => {
                         const result = [];
                         const batchGroups = new Map();
                         let currentInvokingGroup = [];
+                        let currentConsecutiveGroup = [];
+                        let currentConsecutiveTitle = null;
                         const flushInvokingGroup = () => {
                             if (currentInvokingGroup.length > 1) {
                                 result.push({
@@ -75,10 +77,25 @@ export const MessageContent = React.forwardRef(({ role: roleProp, variant, isStr
                             }
                             currentInvokingGroup = [];
                         };
+                        const flushConsecutiveGroup = () => {
+                            if (currentConsecutiveGroup.length > 1) {
+                                // Multiple consecutive same-title calls - group them
+                                result.push({
+                                    type: "batch",
+                                    toolCalls: currentConsecutiveGroup,
+                                });
+                            }
+                            else if (currentConsecutiveGroup.length === 1) {
+                                result.push(currentConsecutiveGroup[0]);
+                            }
+                            currentConsecutiveGroup = [];
+                            currentConsecutiveTitle = null;
+                        };
                         for (const tc of toolCalls) {
-                            // Handle batch groups
+                            // Handle batch groups (explicit batchId)
                             if (tc.batchId) {
                                 flushInvokingGroup();
+                                flushConsecutiveGroup();
                                 const existing = batchGroups.get(tc.batchId);
                                 if (existing) {
                                     existing.push(tc);
@@ -91,16 +108,27 @@ export const MessageContent = React.forwardRef(({ role: roleProp, variant, isStr
                             }
                             // Handle consecutive preliminary (invoking) tool calls
                             else if (isPreliminary(tc)) {
+                                flushConsecutiveGroup();
                                 currentInvokingGroup.push(tc);
                             }
-                            // Regular tool call
+                            // Regular tool call - group consecutive same-title calls (e.g., subagent)
                             else {
                                 flushInvokingGroup();
-                                result.push(tc);
+                                // Check if this continues a consecutive group
+                                if (currentConsecutiveTitle === tc.title) {
+                                    currentConsecutiveGroup.push(tc);
+                                }
+                                else {
+                                    // Different title - flush previous group and start new one
+                                    flushConsecutiveGroup();
+                                    currentConsecutiveGroup = [tc];
+                                    currentConsecutiveTitle = tc.title;
+                                }
                             }
                         }
-                        // Flush any remaining invoking group
+                        // Flush any remaining groups
                         flushInvokingGroup();
+                        flushConsecutiveGroup();
                         return result;
                     };
                     // Helper to render a tool call or group
@@ -127,20 +155,23 @@ export const MessageContent = React.forwardRef(({ role: roleProp, variant, isStr
                         return (_jsxs(_Fragment, { children: [groupedToolCalls.length > 0 && (_jsx("div", { className: "flex flex-col gap-2 mb-1", children: groupedToolCalls.map((item, index) => renderToolCallOrGroup(item, index)) })), _jsx(Response, { content: message.content, isStreaming: message.isStreaming, showEmpty: false })] }));
                     }
                     // Render content interleaved with tool calls
-                    // Group consecutive tool calls with the same batchId
+                    // Group consecutive tool calls with the same batchId or same title
                     const elements = [];
                     let currentPosition = 0;
                     let currentBatch = [];
                     let currentBatchId;
+                    let currentBatchTitle;
                     const flushBatch = () => {
-                        if (currentBatch.length > 1 && currentBatchId) {
-                            elements.push(_jsx(ToolCallGroup, { toolCalls: currentBatch }, `group-${currentBatchId}`));
+                        if (currentBatch.length > 1) {
+                            // Group multiple consecutive calls (by batchId or same title)
+                            elements.push(_jsx(ToolCallGroup, { toolCalls: currentBatch }, `group-${currentBatchId || currentBatchTitle}-${currentBatch[0].id}`));
                         }
                         else if (currentBatch.length === 1) {
                             elements.push(_jsx("div", { children: _jsx(ToolCall, { toolCall: currentBatch[0] }) }, `tool-${currentBatch[0].id}`));
                         }
                         currentBatch = [];
                         currentBatchId = undefined;
+                        currentBatchTitle = undefined;
                     };
                     // Separate preliminary tool calls - they should render at the end, not break text
                     const preliminaryToolCalls = sortedToolCalls.filter(isPreliminary);
@@ -157,7 +188,7 @@ export const MessageContent = React.forwardRef(({ role: roleProp, variant, isStr
                                 elements.push(_jsx(Response, { content: textChunk, isStreaming: false, showEmpty: false }, `text-before-${toolCall.id}`));
                             }
                         }
-                        // Check if this tool call should be batched
+                        // Check if this tool call should be batched (by batchId or consecutive same title)
                         if (toolCall.batchId) {
                             if (currentBatchId === toolCall.batchId) {
                                 // Same batch, add to current batch
@@ -167,13 +198,20 @@ export const MessageContent = React.forwardRef(({ role: roleProp, variant, isStr
                                 // Different batch, flush previous and start new
                                 flushBatch();
                                 currentBatchId = toolCall.batchId;
+                                currentBatchTitle = toolCall.title;
                                 currentBatch = [toolCall];
                             }
                         }
+                        else if (currentBatchTitle === toolCall.title &&
+                            !currentBatchId) {
+                            // Same title as previous (no batchId), continue grouping
+                            currentBatch.push(toolCall);
+                        }
                         else {
-                            // No batch ID, flush previous and render individually
+                            // Different title or switching from batchId to title grouping
                             flushBatch();
-                            elements.push(_jsx("div", { children: _jsx(ToolCall, { toolCall: toolCall }) }, `tool-${toolCall.id}`));
+                            currentBatchTitle = toolCall.title;
+                            currentBatch = [toolCall];
                         }
                         currentPosition = position;
                         // Flush batch at the end

package/dist/gui/components/SubAgentDetails.d.ts

@@ -1,8 +1,9 @@
+import type { ToolCall as ToolCallType } from "../../core/schemas/tool-call.js";
 export interface SubAgentDetailsProps {
-    /** Sub-agent HTTP port */
-    port: number;
-    /** Sub-agent session ID */
-    sessionId: string;
+    /** Sub-agent HTTP port (required for live streaming, not for replay) */
+    port?: number | undefined;
+    /** Sub-agent session ID (required for live streaming, not for replay) */
+    sessionId?: string | undefined;
     /** Optional host (defaults to localhost) */
     host?: string;
     /** Parent tool call status - use this to determine if sub-agent is running */
@@ -15,13 +16,19 @@ export interface SubAgentDetailsProps {
     isExpanded?: boolean;
     /** Callback when expand state changes */
     onExpandChange?: (expanded: boolean) => void;
+    /** Stored messages for replay (if provided, SSE streaming is skipped) */
+    storedMessages?: ToolCallType["subagentMessages"];
+    /** Whether this is a replay (skips SSE connection) */
+    isReplay?: boolean | undefined;
 }
 /**
  * SubAgentDetails component - displays streaming content from a sub-agent.
  *
  * This component:
- * - Connects directly to the sub-agent's SSE endpoint
+ * - Connects directly to the sub-agent's SSE endpoint (live mode)
+ * - Or displays stored messages (replay mode)
  * - Displays streaming text and tool calls
+ * - Renders content as markdown
  * - Renders in a collapsible section (collapsed by default)
  */
-export declare function SubAgentDetails({ port, sessionId, host, parentStatus, agentName, query, isExpanded: controlledIsExpanded, onExpandChange, }: SubAgentDetailsProps): import("react/jsx-runtime").JSX.Element;
+export declare function SubAgentDetails({ port, sessionId, host, parentStatus, agentName, query, isExpanded: controlledIsExpanded, onExpandChange, storedMessages, isReplay, }: SubAgentDetailsProps): import("react/jsx-runtime").JSX.Element;

package/dist/gui/components/SubAgentDetails.js

@@ -1,17 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ChevronDown, CircleDot, Loader2 } from "lucide-react";
+import { ChevronDown, Loader2 } from "lucide-react";
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import { useSubagentStream } from "../../core/hooks/use-subagent-stream.js";
+import { MarkdownRenderer } from "./MarkdownRenderer.js";
 const SCROLL_THRESHOLD = 50; // px from bottom to consider "at bottom"
 /**
  * SubAgentDetails component - displays streaming content from a sub-agent.
  *
  * This component:
- * - Connects directly to the sub-agent's SSE endpoint
+ * - Connects directly to the sub-agent's SSE endpoint (live mode)
+ * - Or displays stored messages (replay mode)
  * - Displays streaming text and tool calls
+ * - Renders content as markdown
  * - Renders in a collapsible section (collapsed by default)
  */
-export function SubAgentDetails({ port, sessionId, host, parentStatus, agentName, query, isExpanded: controlledIsExpanded, onExpandChange, }) {
+export function SubAgentDetails({ port, sessionId, host, parentStatus, agentName, query, isExpanded: controlledIsExpanded, onExpandChange, storedMessages, isReplay = false, }) {
     const [internalIsExpanded, setInternalIsExpanded] = useState(false);
     // Use controlled state if provided, otherwise use internal state
     const isExpanded = controlledIsExpanded ?? internalIsExpanded;
@@ -19,16 +22,28 @@ export function SubAgentDetails({ port, sessionId, host, parentStatus, agentName
     const [isThinkingExpanded, setIsThinkingExpanded] = useState(false);
     const [isNearBottom, setIsNearBottom] = useState(true);
     const thinkingContainerRef = useRef(null);
-    const { messages, isStreaming: hookIsStreaming, error, } = useSubagentStream({
-        port,
-        sessionId,
-        ...(host !== undefined ? { host } : {}),
-    });
+    // Only use SSE streaming if not in replay mode and port/sessionId provided
+    const shouldStream = !isReplay && port !== undefined && sessionId !== undefined;
+    const streamOptions = shouldStream
+        ? {
+            port: port,
+            sessionId: sessionId,
+            ...(host !== undefined ? { host } : {}),
+        }
+        : null;
+    const { messages: streamedMessages, isStreaming: hookIsStreaming, error, } = useSubagentStream(streamOptions);
+    // Use stored messages if available, otherwise use streamed messages
+    const messages = storedMessages && storedMessages.length > 0
+        ? storedMessages
+        : streamedMessages;
     // Use parent status as primary indicator, fall back to hook's streaming state
     // Parent is "in_progress" means sub-agent is definitely still running
-    const isRunning = parentStatus === "in_progress" ||
-        parentStatus === "pending" ||
-        hookIsStreaming;
+    // In replay mode, we're never running
+    const isRunning = isReplay
+        ? false
+        : parentStatus === "in_progress" ||
+            parentStatus === "pending" ||
+            hookIsStreaming;
     // Get the current/latest message
     const currentMessage = messages[messages.length - 1];
     const hasContent = currentMessage &&
@@ -97,9 +112,9 @@ export function SubAgentDetails({ port, sessionId, host, parentStatus, agentName
     return (_jsxs("div", { children: [!isExpanded && (_jsx("div", { className: "w-full max-w-md", children: previewText ? (_jsx("p", { className: "text-paragraph-sm text-muted-foreground/70 truncate", children: previewText })) : queryFirstLine ? (_jsx("p", { className: "text-paragraph-sm text-muted-foreground/50 truncate", children: queryFirstLine })) : null })), isExpanded && (_jsxs("div", { className: "space-y-3", children: [(agentName || query) && (_jsxs("div", { children: [_jsx("div", { className: "text-[10px] font-bold text-muted-foreground uppercase tracking-wider mb-1.5 font-sans", children: "Input" }), _jsxs("div", { className: "text-[11px] font-mono space-y-1", children: [agentName && (_jsxs("div", { children: [_jsx("span", { className: "text-muted-foreground", children: "agentName: " }), _jsx("span", { className: "text-foreground", children: agentName })] })), query && (_jsxs("div", { children: [_jsx("span", { className: "text-muted-foreground", children: "query: " }), _jsx("span", { className: "text-foreground", children: query })] }))] })] })), _jsxs("div", { children: [_jsxs("button", { type: "button", onClick: () => setIsThinkingExpanded(!isThinkingExpanded), className: "flex items-center gap-2 cursor-pointer bg-transparent border-none p-0 text-left group", children: [_jsx("div", { className: "text-[10px] font-bold text-muted-foreground uppercase tracking-wider font-sans", children: "Thinking" }), _jsx(ChevronDown, { className: `h-3 w-3 text-muted-foreground/70 transition-transform duration-200 ${isThinkingExpanded ? "rotate-180" : ""}` })] }), isThinkingExpanded && (_jsxs("div", { ref: thinkingContainerRef, className: "mt-2 rounded-md overflow-hidden bg-muted/30 border border-border/50 max-h-[200px] overflow-y-auto", children: [error && (_jsxs("div", { className: "px-2 py-2 text-[11px] text-destructive", children: ["Error: ", error] })), !error && !hasContent && isRunning && (_jsx("div", { className: "px-2 py-2 text-[11px] text-muted-foreground", children: "Waiting for sub-agent response..." })), currentMessage && (_jsxs("div", { className: "px-2 py-2 space-y-2", children: [currentMessage.contentBlocks &&
                                                 currentMessage.contentBlocks.length > 0
                                                 ? // Render interleaved content blocks
-                                                    currentMessage.contentBlocks.map((block, idx) => block.type === "text" ? (_jsx("div", { className: "text-[11px] text-foreground whitespace-pre-wrap font-mono", children: block.text }, `text-${idx}`)) : (_jsx(SubagentToolCallItem, { toolCall: block.toolCall }, block.toolCall.id)))
-                                                : // Fallback to legacy content
-                                                    currentMessage.content && (_jsx("div", { className: "text-[11px] text-foreground whitespace-pre-wrap font-mono", children: currentMessage.content })), currentMessage.isStreaming && (_jsx("span", { className: "inline-block w-1.5 h-3 bg-primary/70 ml-0.5 animate-pulse" }))] }))] }))] }), !isRunning && currentMessage?.content && (_jsxs("div", { children: [_jsx("div", { className: "text-[10px] font-bold text-muted-foreground uppercase tracking-wider mb-1.5 font-sans", children: "Output" }), _jsx("div", { className: "text-[11px] text-foreground whitespace-pre-wrap font-mono max-h-[200px] overflow-y-auto rounded-md bg-muted/30 border border-border/50 px-2 py-2", children: currentMessage.content })] }))] }))] }));
+                                                    currentMessage.contentBlocks.map((block, idx) => block.type === "text" ? (_jsx("div", { className: "text-[11px] text-foreground prose prose-sm dark:prose-invert max-w-none prose-p:my-1 prose-pre:my-1 prose-code:text-[10px]", children: _jsx(MarkdownRenderer, { content: block.text }) }, `text-${idx}`)) : (_jsx(SubagentToolCallItem, { toolCall: block.toolCall }, block.toolCall.id)))
+                                                : // Fallback to legacy content with markdown
+                                                    currentMessage.content && (_jsx("div", { className: "text-[11px] text-foreground prose prose-sm dark:prose-invert max-w-none prose-p:my-1 prose-pre:my-1 prose-code:text-[10px]", children: _jsx(MarkdownRenderer, { content: currentMessage.content }) })), currentMessage.isStreaming && (_jsx("span", { className: "inline-block w-1.5 h-3 bg-primary/70 ml-0.5 animate-pulse" }))] }))] }))] }), !isRunning && currentMessage?.content && (_jsxs("div", { children: [_jsx("div", { className: "text-[10px] font-bold text-muted-foreground uppercase tracking-wider mb-1.5 font-sans", children: "Output" }), _jsx("div", { className: "text-[11px] text-foreground max-h-[200px] overflow-y-auto rounded-md bg-muted/30 border border-border/50 px-2 py-2 prose prose-sm dark:prose-invert max-w-none prose-p:my-1 prose-pre:my-1 prose-code:text-[10px]", children: _jsx(MarkdownRenderer, { content: currentMessage.content }) })] }))] }))] }));
 }
 /**
  * Simple tool call display for sub-agent tool calls

package/dist/gui/components/SubagentStream.d.ts

@@ -0,0 +1,23 @@
+export interface SubagentStreamProps {
+    /** Sub-agent HTTP port */
+    port: number;
+    /** Sub-agent session ID */
+    sessionId: string;
+    /** Optional host (defaults to localhost) */
+    host?: string;
+    /** Parent tool call status - use this to determine if sub-agent is running */
+    parentStatus?: "pending" | "in_progress" | "completed" | "failed";
+    /** Sub-agent name (for display) */
+    agentName?: string | undefined;
+    /** Query sent to the sub-agent */
+    query?: string | undefined;
+}
+/**
+ * SubagentStream component - displays streaming content from a sub-agent.
+ *
+ * This component:
+ * - Connects directly to the sub-agent's SSE endpoint
+ * - Displays streaming text and tool calls
+ * - Renders in a collapsible section (collapsed by default)
+ */
+export declare function SubagentStream({ port, sessionId, host, parentStatus, agentName, query, }: SubagentStreamProps): import("react/jsx-runtime").JSX.Element;

package/dist/gui/components/SubagentStream.js

@@ -0,0 +1,98 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDown, CircleDot, Loader2 } from "lucide-react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { useSubagentStream } from "../../core/hooks/use-subagent-stream.js";
+const SCROLL_THRESHOLD = 50; // px from bottom to consider "at bottom"
+/**
+ * SubagentStream component - displays streaming content from a sub-agent.
+ *
+ * This component:
+ * - Connects directly to the sub-agent's SSE endpoint
+ * - Displays streaming text and tool calls
+ * - Renders in a collapsible section (collapsed by default)
+ */
+export function SubagentStream({ port, sessionId, host, parentStatus, agentName, query, }) {
+    const [isExpanded, setIsExpanded] = useState(false); // Start collapsed for parallel ops
+    const [isThinkingExpanded, setIsThinkingExpanded] = useState(true);
+    const [isNearBottom, setIsNearBottom] = useState(true);
+    const thinkingContainerRef = useRef(null);
+    const { messages, isStreaming: hookIsStreaming, error } = useSubagentStream({
+        port,
+        sessionId,
+        ...(host !== undefined ? { host } : {}),
+    });
+    // Use parent status as primary indicator, fall back to hook's streaming state
+    // Parent is "in_progress" means sub-agent is definitely still running
+    const isRunning = parentStatus === "in_progress" || parentStatus === "pending" || hookIsStreaming;
+    // Get the current/latest message
+    const currentMessage = messages[messages.length - 1];
+    const hasContent = currentMessage &&
+        (currentMessage.content ||
+            (currentMessage.toolCalls && currentMessage.toolCalls.length > 0));
+    // Auto-collapse Thinking when completed (so Output is the primary view)
+    const prevIsRunningRef = useRef(isRunning);
+    useEffect(() => {
+        if (prevIsRunningRef.current && !isRunning) {
+            // Just completed - collapse thinking to show output
+            setIsThinkingExpanded(false);
+        }
+        prevIsRunningRef.current = isRunning;
+    }, [isRunning]);
+    // Check if user is near bottom of scroll area
+    const checkScrollPosition = useCallback(() => {
+        const container = thinkingContainerRef.current;
+        if (!container)
+            return;
+        const { scrollTop, scrollHeight, clientHeight } = container;
+        const distanceFromBottom = scrollHeight - scrollTop - clientHeight;
+        setIsNearBottom(distanceFromBottom < SCROLL_THRESHOLD);
+    }, []);
+    // Scroll to bottom
+    const scrollToBottom = useCallback(() => {
+        const container = thinkingContainerRef.current;
+        if (!container)
+            return;
+        container.scrollTop = container.scrollHeight;
+    }, []);
+    // Auto-scroll when content changes and user is near bottom
+    useEffect(() => {
+        if (isNearBottom && (isRunning || hasContent)) {
+            scrollToBottom();
+        }
+    }, [currentMessage?.content, currentMessage?.toolCalls, isNearBottom, isRunning, hasContent, scrollToBottom]);
+    // Set up scroll listener
+    useEffect(() => {
+        const container = thinkingContainerRef.current;
+        if (!container)
+            return;
+        const handleScroll = () => checkScrollPosition();
+        container.addEventListener("scroll", handleScroll, { passive: true });
+        checkScrollPosition(); // Check initial position
+        return () => container.removeEventListener("scroll", handleScroll);
+    }, [checkScrollPosition, isThinkingExpanded, isExpanded]);
+    // Get last line of streaming content for preview
+    const lastLine = currentMessage?.content
+        ? currentMessage.content.split("\n").filter(Boolean).pop() || ""
+        : "";
+    const previewText = lastLine.length > 100 ? `${lastLine.slice(0, 100)}...` : lastLine;
+    return (_jsxs("div", { children: [!isExpanded && (_jsx("button", { type: "button", onClick: () => setIsExpanded(true), className: "w-full max-w-md text-left cursor-pointer bg-transparent border-none p-0", children: previewText ? (_jsx("p", { className: `text-paragraph-sm text-muted-foreground truncate ${isRunning ? "animate-pulse" : ""}`, children: previewText })) : isRunning ? (_jsx("p", { className: "text-paragraph-sm text-muted-foreground/50 italic animate-pulse", children: "Waiting for response..." })) : null })), isExpanded && (_jsxs("div", { className: "space-y-3", children: [(agentName || query) && (_jsxs("div", { children: [_jsx("div", { className: "text-[10px] font-bold text-muted-foreground uppercase tracking-wider mb-1.5 font-sans", children: "Input" }), _jsxs("div", { className: "text-[11px] font-mono space-y-1", children: [agentName && (_jsxs("div", { children: [_jsx("span", { className: "text-muted-foreground", children: "agentName: " }), _jsx("span", { className: "text-foreground", children: agentName })] })), query && (_jsxs("div", { children: [_jsx("span", { className: "text-muted-foreground", children: "query: " }), _jsx("span", { className: "text-foreground", children: query })] }))] })] })), _jsxs("div", { children: [_jsxs("button", { type: "button", onClick: () => setIsThinkingExpanded(!isThinkingExpanded), className: "flex items-center gap-2 cursor-pointer bg-transparent border-none p-0 text-left group", children: [_jsx("div", { className: "text-[10px] font-bold text-muted-foreground uppercase tracking-wider font-sans", children: "Thinking" }), _jsx(ChevronDown, { className: `h-3 w-3 text-muted-foreground/70 transition-transform duration-200 ${isThinkingExpanded ? "rotate-180" : ""}` })] }), isThinkingExpanded && (_jsxs("div", { ref: thinkingContainerRef, className: "mt-2 rounded-md overflow-hidden bg-muted/30 border border-border/50 max-h-[200px] overflow-y-auto", children: [error && (_jsxs("div", { className: "px-2 py-2 text-[11px] text-destructive", children: ["Error: ", error] })), !error && !hasContent && isRunning && (_jsx("div", { className: "px-2 py-2 text-[11px] text-muted-foreground", children: "Waiting for sub-agent response..." })), currentMessage && (_jsxs("div", { className: "px-2 py-2 space-y-2", children: [currentMessage.toolCalls &&
+                                                currentMessage.toolCalls.length > 0 && (_jsx("div", { className: "space-y-1", children: currentMessage.toolCalls.map((tc) => (_jsx(SubagentToolCallItem, { toolCall: tc }, tc.id))) })), currentMessage.content && (_jsxs("div", { className: "text-[11px] text-foreground whitespace-pre-wrap font-mono", children: [currentMessage.content, currentMessage.isStreaming && (_jsx("span", { className: "inline-block w-1.5 h-3 bg-primary/70 ml-0.5 animate-pulse" }))] }))] }))] }))] }), !isRunning && currentMessage?.content && (_jsxs("div", { children: [_jsx("div", { className: "text-[10px] font-bold text-muted-foreground uppercase tracking-wider mb-1.5 font-sans", children: "Output" }), _jsx("div", { className: "text-[11px] text-foreground whitespace-pre-wrap font-mono max-h-[200px] overflow-y-auto rounded-md bg-muted/30 border border-border/50 px-2 py-2", children: currentMessage.content })] }))] }))] }));
+}
+/**
+ * Simple tool call display for sub-agent tool calls
+ */
+function SubagentToolCallItem({ toolCall }) {
+    const statusIcon = {
+        pending: "...",
+        in_progress: "",
+        completed: "",
+        failed: "",
+    }[toolCall.status];
+    const statusColor = {
+        pending: "text-muted-foreground",
+        in_progress: "text-blue-500",
+        completed: "text-green-500",
+        failed: "text-destructive",
+    }[toolCall.status];
+    return (_jsxs("div", { className: "flex items-center gap-2 text-[10px] text-muted-foreground", children: [_jsx("span", { className: statusColor, children: statusIcon }), _jsx("span", { className: "font-medium", children: toolCall.prettyName || toolCall.title }), toolCall.status === "in_progress" && (_jsx(Loader2, { className: "h-2.5 w-2.5 animate-spin" }))] }));
+}

package/dist/gui/components/ToolCall.js

@@ -44,7 +44,15 @@ export function ToolCall({ toolCall }) {
     const { resolvedTheme } = useTheme();
     // Detect TodoWrite tool and subagent
     const isTodoWrite = toolCall.title === "todo_write";
-    const isSubagentCall = !!(toolCall.subagentPort && toolCall.subagentSessionId);
+    // A subagent call can be detected by:
+    // - Live: has port and sessionId (but no stored messages yet)
+    // - Replay: has stored subagentMessages
+    const hasLiveSubagent = !!(toolCall.subagentPort && toolCall.subagentSessionId);
+    const hasStoredSubagent = !!(toolCall.subagentMessages && toolCall.subagentMessages.length > 0);
+    const isSubagentCall = hasLiveSubagent || hasStoredSubagent;
+    // Use replay mode if we have stored messages - they should take precedence
+    // over trying to connect to SSE (which won't work for replayed sessions)
+    const isReplaySubagent = hasStoredSubagent;
     // Safely access ChatLayout context - will be undefined if not within ChatLayout
     const layoutContext = React.useContext(ChatLayout.Context);
     // Click handler: toggle sidepanel for TodoWrite, subagent details for subagents, expand for others
@@ -139,7 +147,7 @@ export function ToolCall({ toolCall }) {
     if (isPreliminary) {
         return (_jsx("div", { className: "flex flex-col my-4", children: _jsxs("span", { className: "text-paragraph-sm text-muted-foreground/50", children: ["Invoking ", displayName] }) }));
     }
-    return (_jsxs("div", { className: "flex flex-col my-4", children: [_jsxs("button", { type: "button", className: "flex flex-col items-start gap-0.5 cursor-pointer bg-transparent border-none p-0 text-left group w-fit", onClick: handleHeaderClick, "aria-expanded": isTodoWrite ? undefined : isExpanded, children: [_jsxs("div", { className: "flex items-center gap-1.5 text-[11px] font-medium text-muted-foreground", children: [_jsx("div", { className: iconColorClass, title: statusTooltip, children: _jsx(IconComponent, { className: "h-3 w-3" }) }), _jsx("span", { className: "text-paragraph-sm text-muted-foreground", children: displayName }), hasError && _jsx(AlertCircle, { className: "h-3 w-3 text-destructive" }), isTodoWrite ? (_jsx(ChevronRight, { className: "h-3 w-3 text-muted-foreground/70" })) : (_jsx(ChevronDown, { className: `h-3 w-3 text-muted-foreground/70 transition-transform duration-200 ${isExpanded ? "rotate-180" : ""}` }))] }), toolCall.subline && (_jsx("span", { className: "text-paragraph-sm text-muted-foreground/70 pl-4.5", children: toolCall.subline }))] }), !isTodoWrite && isSubagentCall && (_jsx("div", { className: "pl-4.5", children: _jsx(SubAgentDetails, { port: toolCall.subagentPort, sessionId: toolCall.subagentSessionId, parentStatus: toolCall.status, agentName: toolCall.rawInput?.agentName, query: toolCall.rawInput?.query, isExpanded: isSubagentExpanded, onExpandChange: setIsSubagentExpanded }) })), !isTodoWrite && !isSubagentCall && isExpanded && (_jsxs("div", { className: "mt-2 text-sm border border-border rounded-lg bg-card overflow-hidden w-full", children: [toolCall.rawInput &&
+    return (_jsxs("div", { className: "flex flex-col my-4", children: [_jsxs("button", { type: "button", className: "flex flex-col items-start gap-0.5 cursor-pointer bg-transparent border-none p-0 text-left group w-fit", onClick: handleHeaderClick, "aria-expanded": isTodoWrite ? undefined : isExpanded, children: [_jsxs("div", { className: "flex items-center gap-1.5 text-[11px] font-medium text-muted-foreground", children: [_jsx("div", { className: iconColorClass, title: statusTooltip, children: _jsx(IconComponent, { className: "h-3 w-3" }) }), _jsx("span", { className: "text-paragraph-sm text-muted-foreground", children: displayName }), hasError && _jsx(AlertCircle, { className: "h-3 w-3 text-destructive" }), isTodoWrite ? (_jsx(ChevronRight, { className: "h-3 w-3 text-muted-foreground/70" })) : (_jsx(ChevronDown, { className: `h-3 w-3 text-muted-foreground/70 transition-transform duration-200 ${isExpanded ? "rotate-180" : ""}` }))] }), toolCall.subline && (_jsx("span", { className: "text-paragraph-sm text-muted-foreground/70 pl-4.5", children: toolCall.subline }))] }), !isTodoWrite && isSubagentCall && (_jsx("div", { className: "pl-4.5", children: _jsx(SubAgentDetails, { port: toolCall.subagentPort, sessionId: toolCall.subagentSessionId, parentStatus: toolCall.status, agentName: toolCall.rawInput?.agentName, query: toolCall.rawInput?.query, isExpanded: isSubagentExpanded, onExpandChange: setIsSubagentExpanded, storedMessages: toolCall.subagentMessages, isReplay: isReplaySubagent }) })), !isTodoWrite && !isSubagentCall && isExpanded && (_jsxs("div", { className: "mt-2 text-sm border border-border rounded-lg bg-card overflow-hidden w-full", children: [toolCall.rawInput &&
                         Object.keys(toolCall.rawInput).length > 0 &&
                         !toolCall.subagentPort && (_jsxs("div", { className: "p-3 border-b border-border", children: [_jsx("div", { className: "text-[10px] font-bold text-muted-foreground uppercase tracking-wider mb-1.5 font-sans", children: "Input" }), _jsx("div", { className: "text-[11px] font-mono text-foreground", children: _jsx(JsonView, { value: toolCall.rawInput, collapsed: false, displayDataTypes: false, displayObjectSize: false, enableClipboard: true, style: jsonStyle }) })] })), toolCall.locations && toolCall.locations.length > 0 && (_jsxs("div", { className: "p-3 border-b border-border", children: [_jsx("div", { className: "text-[10px] font-bold text-muted-foreground uppercase tracking-wider mb-1.5 font-sans", children: "Files" }), _jsx("ul", { className: "space-y-1", children: toolCall.locations.map((loc) => (_jsxs("li", { className: "font-mono text-[11px] text-foreground bg-muted px-1.5 py-0.5 rounded w-fit", children: [loc.path, loc.line !== null &&
                                             loc.line !== undefined &&

package/dist/sdk/schemas/session.d.ts

@@ -459,6 +459,97 @@ export declare const SessionUpdate: z.ZodUnion<readonly [z.ZodObject<{
         }, z.core.$strip>>;
         subagentPort: z.ZodOptional<z.ZodNumber>;
         subagentSessionId: z.ZodOptional<z.ZodString>;
+        subagentMessages: z.ZodOptional<z.ZodArray<z.ZodObject<{
+            id: z.ZodString;
+            content: z.ZodString;
+            toolCalls: z.ZodOptional<z.ZodArray<z.ZodObject<{
+                id: z.ZodString;
+                title: z.ZodString;
+                prettyName: z.ZodOptional<z.ZodString>;
+                icon: z.ZodOptional<z.ZodString>;
+                status: z.ZodEnum<{
+                    pending: "pending";
+                    in_progress: "in_progress";
+                    completed: "completed";
+                    failed: "failed";
+                }>;
+                content: z.ZodOptional<z.ZodArray<z.ZodDiscriminatedUnion<[z.ZodObject<{
+                    type: z.ZodLiteral<"content">;
+                    content: z.ZodObject<{
+                        type: z.ZodLiteral<"text">;
+                        text: z.ZodString;
+                    }, z.core.$strip>;
+                }, z.core.$strip>, z.ZodObject<{
+                    type: z.ZodLiteral<"text">;
+                    text: z.ZodString;
+                }, z.core.$strip>, z.ZodObject<{
+                    type: z.ZodLiteral<"image">;
+                    data: z.ZodString;
+                    mimeType: z.ZodOptional<z.ZodString>;
+                    alt: z.ZodOptional<z.ZodString>;
+                }, z.core.$strip>, z.ZodObject<{
+                    type: z.ZodLiteral<"image">;
+                    url: z.ZodString;
+                    alt: z.ZodOptional<z.ZodString>;
+                }, z.core.$strip>, z.ZodObject<{
+                    type: z.ZodLiteral<"diff">;
+                    path: z.ZodString;
+                    oldText: z.ZodString;
+                    newText: z.ZodString;
+                    line: z.ZodOptional<z.ZodNullable<z.ZodNumber>>;
+                }, z.core.$strip>, z.ZodObject<{
+                    type: z.ZodLiteral<"terminal">;
+                    terminalId: z.ZodString;
+                }, z.core.$strip>], "type">>>;
+            }, z.core.$strip>>>;
+            contentBlocks: z.ZodOptional<z.ZodArray<z.ZodDiscriminatedUnion<[z.ZodObject<{
+                type: z.ZodLiteral<"text">;
+                text: z.ZodString;
+            }, z.core.$strip>, z.ZodObject<{
+                type: z.ZodLiteral<"tool_call">;
+                toolCall: z.ZodObject<{
+                    id: z.ZodString;
+                    title: z.ZodString;
+                    prettyName: z.ZodOptional<z.ZodString>;
+                    icon: z.ZodOptional<z.ZodString>;
+                    status: z.ZodEnum<{
+                        pending: "pending";
+                        in_progress: "in_progress";
+                        completed: "completed";
+                        failed: "failed";
+                    }>;
+                    content: z.ZodOptional<z.ZodArray<z.ZodDiscriminatedUnion<[z.ZodObject<{
+                        type: z.ZodLiteral<"content">;
+                        content: z.ZodObject<{
+                            type: z.ZodLiteral<"text">;
+                            text: z.ZodString;
+                        }, z.core.$strip>;
+                    }, z.core.$strip>, z.ZodObject<{
+                        type: z.ZodLiteral<"text">;
+                        text: z.ZodString;
+                    }, z.core.$strip>, z.ZodObject<{
+                        type: z.ZodLiteral<"image">;
+                        data: z.ZodString;
+                        mimeType: z.ZodOptional<z.ZodString>;
+                        alt: z.ZodOptional<z.ZodString>;
+                    }, z.core.$strip>, z.ZodObject<{
+                        type: z.ZodLiteral<"image">;
+                        url: z.ZodString;
+                        alt: z.ZodOptional<z.ZodString>;
+                    }, z.core.$strip>, z.ZodObject<{
+                        type: z.ZodLiteral<"diff">;
+                        path: z.ZodString;
+                        oldText: z.ZodString;
+                        newText: z.ZodString;
+                        line: z.ZodOptional<z.ZodNullable<z.ZodNumber>>;
+                    }, z.core.$strip>, z.ZodObject<{
+                        type: z.ZodLiteral<"terminal">;
+                        terminalId: z.ZodString;
+                    }, z.core.$strip>], "type">>>;
+                }, z.core.$strip>;
+            }, z.core.$strip>], "type">>>;
+            isStreaming: z.ZodOptional<z.ZodBoolean>;
+        }, z.core.$strip>>>;
     }, z.core.$strip>;
     messageId: z.ZodOptional<z.ZodString>;
 }, z.core.$strip>, z.ZodObject<{

package/dist/sdk/transports/http.js

@@ -695,6 +695,25 @@ export class HttpTransport {
                 typeof update._meta.batchId === "string"
                 ? update._meta.batchId
                 : undefined;
+            // Extract subagent connection info for replay
+            const subagentPort = update._meta &&
+                typeof update._meta === "object" &&
+                "subagentPort" in update._meta &&
+                typeof update._meta.subagentPort === "number"
+                ? update._meta.subagentPort
+                : undefined;
+            const subagentSessionId = update._meta &&
+                typeof update._meta === "object" &&
+                "subagentSessionId" in update._meta &&
+                typeof update._meta.subagentSessionId === "string"
+                ? update._meta.subagentSessionId
+                : undefined;
+            const subagentMessages = update._meta &&
+                typeof update._meta === "object" &&
+                "subagentMessages" in update._meta &&
+                Array.isArray(update._meta.subagentMessages)
+                ? update._meta.subagentMessages
+                : undefined;
             // Initial tool call notification
             const toolCall = {
                 id: update.toolCallId ?? "",
@@ -755,6 +774,10 @@ export class HttpTransport {
                     return { type: "text", text: "" };
                 }),
                 startedAt: Date.now(),
+                // Sub-agent connection info and messages for replay
+                subagentPort,
+                subagentSessionId,
+                subagentMessages,
             };
             const sessionUpdate = {
                 type: "tool_call",
@@ -763,19 +786,41 @@ export class HttpTransport {
                 toolCall: toolCall,
                 messageId,
             };
-            // Queue tool call as a chunk for ordered processing
-            const toolCallChunk = {
-                type: "tool_call",
-                id: sessionId,
-                toolCall: toolCall,
-                messageId,
-            };
-            const resolver = this.chunkResolvers.shift();
-            if (resolver) {
-                resolver(toolCallChunk);
+            // Check if this is replay
+            const isReplay = update._meta &&
+                typeof update._meta === "object" &&
+                "isReplay" in update._meta &&
+                update._meta.isReplay === true;
+            // Debug: log tool call creation
+            logger.info("Creating tool_call session update", {
+                toolCallId: toolCall.id,
+                title: toolCall.title,
+                hasSubagentPort: !!subagentPort,
+                hasSubagentSessionId: !!subagentSessionId,
+                hasSubagentMessages: !!subagentMessages,
+                subagentMessagesCount: subagentMessages?.length,
+                isReplay,
+                isInReplayMode: this.isInReplayMode,
+            });
+            // During replay, notify directly since there's no active receive() consumer
+            if (isReplay || this.isInReplayMode) {
+                this.notifySessionUpdate(sessionUpdate);
             }
             else {
-                this.messageQueue.push(toolCallChunk);
+                // Queue tool call as a chunk for ordered processing during live streaming
+                const toolCallChunk = {
+                    type: "tool_call",
+                    id: sessionId,
+                    toolCall: toolCall,
+                    messageId,
+                };
+                const resolver = this.chunkResolvers.shift();
+                if (resolver) {
+                    resolver(toolCallChunk);
+                }
+                else {
+                    this.messageQueue.push(toolCallChunk);
+                }
             }
         }
         else if (update?.sessionUpdate === "tool_call_update") {
@@ -816,13 +861,19 @@ export class HttpTransport {
                 typeof update._meta.subagentSessionId === "string"
                 ? update._meta.subagentSessionId
                 : undefined;
+            const subagentMessages = update._meta &&
+                typeof update._meta === "object" &&
+                "subagentMessages" in update._meta &&
+                Array.isArray(update._meta.subagentMessages)
+                ? update._meta.subagentMessages
+                : undefined;
             // Debug logging for subagent connection info
-            if (subagentPort || subagentSessionId) {
-                logger.info("Extracted subagent connection info from tool_call_update", {
+            if (subagentPort || subagentSessionId || subagentMessages) {
+                logger.info("Extracted subagent info from tool_call_update", {
                     toolCallId: update.toolCallId,
                     subagentPort,
                     subagentSessionId,
-                    _meta: update._meta,
+                    subagentMessagesCount: subagentMessages?.length,
                 });
             }
             // Tool call update notification
@@ -890,6 +941,8 @@ export class HttpTransport {
                 // Sub-agent connection info for direct SSE streaming
                 subagentPort,
                 subagentSessionId,
+                // Sub-agent messages for replay
+                subagentMessages,
             };
             const sessionUpdate = {
                 type: "tool_call_update",
@@ -898,22 +951,31 @@ export class HttpTransport {
                 toolCallUpdate: toolCallUpdate,
                 messageId,
             };
-            // Queue tool call update as a chunk for ordered processing
-            const toolCallUpdateChunk = {
-                type: "tool_call_update",
-                id: sessionId,
-                toolCallUpdate: toolCallUpdate,
-                messageId,
-            };
-            const resolver = this.chunkResolvers.shift();
-            if (resolver) {
-                resolver(toolCallUpdateChunk);
+            // Check if this is replay (tool_call_update doesn't have isReplay in _meta,
+            // but we can check if we're in replay mode)
+            if (this.isInReplayMode) {
+                // During replay, notify directly since there's no active receive() consumer
+                this.notifySessionUpdate(sessionUpdate);
             }
             else {
-                this.messageQueue.push(toolCallUpdateChunk);
+                // Queue tool call update as a chunk for ordered processing
+                const toolCallUpdateChunk = {
+                    type: "tool_call_update",
+                    id: sessionId,
+                    toolCallUpdate: toolCallUpdate,
+                    messageId,
+                };
+                const resolver = this.chunkResolvers.shift();
+                if (resolver) {
+                    resolver(toolCallUpdateChunk);
+                }
+                else {
+                    this.messageQueue.push(toolCallUpdateChunk);
+                }
             }
-            logger.debug("Queued tool_call_update chunk", {
+            logger.debug("Processed tool_call_update", {
                 sessionUpdate,
+                isReplay: this.isInReplayMode,
             });
         }
         else if (update &&
@@ -995,19 +1057,25 @@ export class HttpTransport {
                 toolCallUpdate: toolOutput,
                 messageId,
             };
-            // Queue tool output as a chunk for ordered processing
-            const toolCallUpdateChunk = {
-                type: "tool_call_update",
-                id: sessionId,
-                toolCallUpdate: toolOutput,
-                messageId,
-            };
-            const resolver = this.chunkResolvers.shift();
-            if (resolver) {
-                resolver(toolCallUpdateChunk);
+            // During replay, notify directly; otherwise queue for ordered processing
+            if (this.isInReplayMode) {
+                this.notifySessionUpdate(sessionUpdate);
             }
             else {
-                this.messageQueue.push(toolCallUpdateChunk);
+                // Queue tool output as a chunk for ordered processing
+                const toolCallUpdateChunk = {
+                    type: "tool_call_update",
+                    id: sessionId,
+                    toolCallUpdate: toolOutput,
+                    messageId,
+                };
+                const resolver = this.chunkResolvers.shift();
+                if (resolver) {
+                    resolver(toolCallUpdateChunk);
+                }
+                else {
+                    this.messageQueue.push(toolCallUpdateChunk);
+                }
             }
             logger.debug("Queued tool_output as tool_call_update chunk", {
                 sessionUpdate,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@townco/ui",
-  "version": "0.1.66",
+  "version": "0.1.68",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -49,7 +49,7 @@
     "@radix-ui/react-slot": "^1.2.4",
     "@radix-ui/react-tabs": "^1.1.13",
     "@radix-ui/react-tooltip": "^1.2.8",
-    "@townco/core": "0.0.44",
+    "@townco/core": "0.0.46",
     "@uiw/react-json-view": "^2.0.0-alpha.39",
     "bun": "^1.3.1",
     "class-variance-authority": "^0.7.1",
@@ -66,7 +66,7 @@
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4.1.17",
-    "@townco/tsconfig": "0.1.63",
+    "@townco/tsconfig": "0.1.65",
     "@types/node": "^24.10.0",
     "@types/react": "^19.2.2",
     "ink": "^6.4.0",