@townco/ui 0.1.103 → 0.1.105

package/dist/browser-logger.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Browser console capture and server sync
+ * Intercepts console methods and sends logs to the agent server
+ * Follows the pattern from packages/ui/src/sdk/transports/stdio.ts
+ */
+/**
+ * Initialize browser logger
+ * Must be called early, before other code that might log
+ */
+export declare function initBrowserLogger(agentServerUrl: string): void;

package/dist/browser-logger.js

@@ -0,0 +1,141 @@
+/**
+ * Browser console capture and server sync
+ * Intercepts console methods and sends logs to the agent server
+ * Follows the pattern from packages/ui/src/sdk/transports/stdio.ts
+ */
+import { createLogger, subscribeToLogs } from "@townco/core";
+let initialized = false;
+let serverUrl = null;
+const logQueue = [];
+let flushTimeoutId = null;
+// Store original console methods to preserve DevTools output
+const originalConsole = {
+    log: console.log.bind(console),
+    error: console.error.bind(console),
+    warn: console.warn.bind(console),
+    info: console.info.bind(console),
+    debug: console.debug.bind(console),
+};
+const logger = createLogger("gui-console");
+/**
+ * Safely stringify arguments for logging
+ */
+function stringifyArgs(args) {
+    return args
+        .map((arg) => {
+        if (typeof arg === "string")
+            return arg;
+        if (arg instanceof Error)
+            return `${arg.name}: ${arg.message}`;
+        try {
+            return JSON.stringify(arg);
+        }
+        catch {
+            return String(arg);
+        }
+    })
+        .join(" ");
+}
+/**
+ * Queue a log entry to be sent to the server
+ */
+function queueLog(entry) {
+    logQueue.push(entry);
+    // Immediate flush for errors
+    if (entry.level === "error" || entry.level === "fatal") {
+        flushLogs();
+        return;
+    }
+    // Debounced flush for other levels
+    if (!flushTimeoutId) {
+        flushTimeoutId = setTimeout(() => {
+            flushTimeoutId = null;
+            flushLogs();
+        }, 500);
+    }
+}
+/**
+ * Send queued logs to the server
+ */
+async function flushLogs() {
+    if (logQueue.length === 0 || !serverUrl)
+        return;
+    const logs = logQueue.splice(0);
+    try {
+        await fetch(`${serverUrl}/logs/browser`, {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ logs }),
+        });
+    }
+    catch {
+        // Silent fail - don't break the app if server is unavailable
+    }
+}
+/**
+ * Initialize browser logger
+ * Must be called early, before other code that might log
+ */
+export function initBrowserLogger(agentServerUrl) {
+    if (initialized)
+        return;
+    initialized = true;
+    serverUrl = agentServerUrl;
+    // Override console methods - preserve original output, then log
+    console.log = (...args) => {
+        originalConsole.log(...args);
+        logger.info(stringifyArgs(args));
+    };
+    console.info = (...args) => {
+        originalConsole.info(...args);
+        logger.info(stringifyArgs(args));
+    };
+    console.warn = (...args) => {
+        originalConsole.warn(...args);
+        logger.warn(stringifyArgs(args));
+    };
+    console.error = (...args) => {
+        originalConsole.error(...args);
+        logger.error(stringifyArgs(args));
+    };
+    console.debug = (...args) => {
+        originalConsole.debug(...args);
+        logger.debug(stringifyArgs(args));
+    };
+    // Capture uncaught exceptions
+    window.onerror = (message, source, line, col, error) => {
+        logger.error(String(message), {
+            source,
+            line,
+            col,
+            stack: error?.stack,
+        });
+        return false; // Let default handler run too
+    };
+    // Capture unhandled promise rejections
+    window.onunhandledrejection = (event) => {
+        const reason = event.reason instanceof Error
+            ? `${event.reason.name}: ${event.reason.message}`
+            : String(event.reason);
+        logger.error(`Unhandled rejection: ${reason}`, {
+            stack: event.reason?.stack,
+        });
+    };
+    // Subscribe to logs and queue for server sync
+    subscribeToLogs((entry) => {
+        // Only sync gui-console logs to avoid duplicates
+        if (entry.service === "gui-console") {
+            queueLog(entry);
+        }
+    });
+    // Flush logs before page unload
+    window.addEventListener("beforeunload", () => {
+        if (flushTimeoutId) {
+            clearTimeout(flushTimeoutId);
+        }
+        // Use sendBeacon for reliable delivery on page unload
+        if (logQueue.length > 0 && serverUrl) {
+            navigator.sendBeacon(`${serverUrl}/logs/browser`, JSON.stringify({ logs: logQueue }));
+        }
+    });
+}

package/dist/core/hooks/index.d.ts

@@ -7,5 +7,4 @@ export * from "./use-chat-messages.js";
 export * from "./use-chat-session.js";
 export * from "./use-media-query.js";
 export * from "./use-message-history.js";
-export * from "./use-subagent-stream.js";
 export * from "./use-tool-calls.js";

package/dist/core/hooks/index.js

@@ -7,5 +7,4 @@ export * from "./use-chat-messages.js";
 export * from "./use-chat-session.js";
 export * from "./use-media-query.js";
 export * from "./use-message-history.js";
-export * from "./use-subagent-stream.js";
 export * from "./use-tool-calls.js";

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

@@ -29,10 +29,21 @@ export function useToolCalls(client) {
             }
             else if (update.type === "tool_call_update") {
                 // Tool call update notification
+                _logger.info("[SUBAGENT] Frontend received tool_call_update", {
+                    sessionId: update.sessionId,
+                    toolCallId: update.toolCallUpdate.id,
+                    status: update.toolCallUpdate.status,
+                    hasSubagentMessages: !!update.toolCallUpdate.subagentMessages,
+                    subagentMessageCount: update.toolCallUpdate.subagentMessages?.length || 0,
+                });
                 // Update session-level tool calls (for sidebar)
                 updateToolCall(update.sessionId, update.toolCallUpdate);
                 // Also update in current assistant message (for inline display)
                 updateToolCallInCurrentMessage(update.toolCallUpdate);
+                _logger.info("[SUBAGENT] Successfully updated tool call state", {
+                    sessionId: update.sessionId,
+                    toolCallId: update.toolCallUpdate.id,
+                });
             }
         });
         return () => {

package/dist/gui/components/ChatView.js

@@ -3,6 +3,7 @@ import { createLogger } from "@townco/core";
 import { ArrowUp, Bug, Moon, PanelRight, Settings, Sun, X } from "lucide-react";
 import * as React from "react";
 import { useEffect, useState } from "react";
+import { initBrowserLogger } from "../../browser-logger.js";
 import { useChatMessages, useChatSession, useToolCalls, } from "../../core/hooks/index.js";
 import { selectTodosForCurrentSession, useChatStore, } from "../../core/store/chat-store.js";
 import { useDocumentTitle } from "../hooks/use-favicon.js";
@@ -119,6 +120,15 @@ export function ChatView({ client, initialSessionId, error: initError, debuggerU
     }, [messages]);
     // Update document title with agent name and animated dots when streaming
     useDocumentTitle(agentName);
+    // Initialize browser logger to capture console output and send to server
+    useEffect(() => {
+        if (client) {
+            const baseUrl = client.getBaseUrl();
+            if (baseUrl) {
+                initBrowserLogger(baseUrl);
+            }
+        }
+    }, [client]);
     // Log connection status changes
     useEffect(() => {
         logger.debug("Connection status changed", { status: connectionStatus });

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

@@ -0,0 +1,9 @@
+import type { ToolCall as ToolCallType } from "../../core/schemas/tool-call.js";
+export interface InvokingGroupProps {
+    toolCalls: ToolCallType[];
+}
+/**
+ * InvokingGroup component - displays a group of preliminary (invoking) tool calls
+ * Shows as "Invoking parallel operation (N)" with a summary of unique tool names
+ */
+export declare function InvokingGroup({ toolCalls }: InvokingGroupProps): import("react/jsx-runtime").JSX.Element;

package/dist/gui/components/InvokingGroup.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ListVideo } from "lucide-react";
+import React from "react";
+/**
+ * InvokingGroup component - displays a group of preliminary (invoking) tool calls
+ * Shows as "Invoking parallel operation (N)" with a summary of unique tool names
+ */
+export function InvokingGroup({ toolCalls }) {
+    // Get unique display names for the summary
+    const displayNames = toolCalls.map((tc) => tc.prettyName || tc.title);
+    const uniqueNames = [...new Set(displayNames)];
+    const summary = uniqueNames.length <= 2
+        ? uniqueNames.join(", ")
+        : `${uniqueNames.slice(0, 2).join(", ")} +${uniqueNames.length - 2} more`;
+    return (_jsxs("div", { className: "flex flex-col my-4", children: [_jsxs("div", { className: "flex items-center gap-1.5 text-paragraph-sm text-muted-foreground/50", children: [_jsx(ListVideo, { className: "h-3 w-3" }), _jsx("span", { children: "Invoking parallel operation" }), _jsx("span", { className: "text-[10px] bg-muted px-1.5 py-0.5 rounded text-muted-foreground/50", children: toolCalls.length })] }), _jsx("span", { className: "text-paragraph-sm text-muted-foreground/50 pl-4.5", children: summary })] }));
+}

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

@@ -1,11 +1,5 @@
 import type { ToolCall as ToolCallType } from "../../core/schemas/tool-call.js";
 export interface SubAgentDetailsProps {
-    /** 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 */
     parentStatus?: "pending" | "in_progress" | "completed" | "failed";
     /** Sub-agent name (for display) */
@@ -16,19 +10,16 @@ export interface SubAgentDetailsProps {
     isExpanded?: boolean;
     /** Callback when expand state changes */
     onExpandChange?: (expanded: boolean) => void;
-    /** Stored messages for replay (if provided, SSE streaming is skipped) */
+    /** Messages from the subagent (streamed via parent tool_call_update) */
     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 (live mode)
- * - Or displays stored messages (replay mode)
+ * - Displays messages from the subagent (received via parent tool_call_update events)
  * - 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, storedMessages, isReplay }: SubAgentDetailsProps): import("react/jsx-runtime").JSX.Element;
+export declare function SubAgentDetails({ parentStatus, agentName, query, isExpanded: controlledIsExpanded, onExpandChange, storedMessages }: SubAgentDetailsProps): import("react/jsx-runtime").JSX.Element;

package/dist/gui/components/SubAgentDetails.js

@@ -1,20 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ChevronDown, Loader2 } from "lucide-react";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { useSubagentStream } from "../../core/hooks/use-subagent-stream.js";
+import { useCallback, useEffect, useRef, useState } from "react";
 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 (live mode)
- * - Or displays stored messages (replay mode)
+ * - Displays messages from the subagent (received via parent tool_call_update events)
  * - 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, storedMessages, isReplay = false, }) {
+export function SubAgentDetails({ parentStatus, agentName, query, isExpanded: controlledIsExpanded, onExpandChange, storedMessages, }) {
     const [internalIsExpanded, setInternalIsExpanded] = useState(false);
     // Use controlled state if provided, otherwise use internal state
     const isExpanded = controlledIsExpanded ?? internalIsExpanded;
@@ -23,31 +21,22 @@ export function SubAgentDetails({ port, sessionId, host, parentStatus, agentName
     const [isThinkingExpanded, setIsThinkingExpanded] = useState(true);
     const [isNearBottom, setIsNearBottom] = useState(true);
     const thinkingContainerRef = useRef(null);
-    // Only use SSE streaming if not in replay mode and port/sessionId provided
-    const shouldStream = !isReplay && port !== undefined && sessionId !== undefined;
-    // Memoize stream options to prevent unnecessary reconnections
-    const streamOptions = useMemo(() => shouldStream
-        ? {
-            // biome-ignore lint/style/noNonNullAssertion: shouldStream condition ensures port is defined
-            port: port,
-            // biome-ignore lint/style/noNonNullAssertion: shouldStream condition ensures sessionId is defined
-            sessionId: sessionId,
-            ...(host !== undefined ? { host } : {}),
-        }
-        : null, [shouldStream, port, sessionId, host]);
-    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
-    // In replay mode, we're never running
-    const isRunning = isReplay
-        ? false
-        : parentStatus === "in_progress" ||
-            parentStatus === "pending" ||
-            hookIsStreaming;
+    // Use messages from storedMessages prop (populated by parent via tool_call_update)
+    const messages = storedMessages || [];
+    // Log when messages are received/updated
+    useEffect(() => {
+        console.log("[SUBAGENT] SubAgentDetails received messages update", {
+            agentName,
+            messageCount: messages.length,
+            parentStatus,
+            hasMessages: messages.length > 0,
+            contentPreview: messages[0]?.content?.substring(0, 100),
+            toolCallCount: messages[0]?.toolCalls?.length || 0,
+            contentBlockCount: messages[0]?.contentBlocks?.length || 0,
+        });
+    }, [messages, agentName, parentStatus]);
+    // Determine if subagent is still running based on parent status
+    const isRunning = parentStatus === "in_progress" || parentStatus === "pending";
     // Get the current/latest message
     const currentMessage = messages[messages.length - 1];
     const hasContent = currentMessage &&
@@ -55,6 +44,13 @@ export function SubAgentDetails({ port, sessionId, host, parentStatus, agentName
             (currentMessage.toolCalls && currentMessage.toolCalls.length > 0) ||
             (currentMessage.contentBlocks &&
                 currentMessage.contentBlocks.length > 0));
+    console.log("[SUBAGENT] SubAgentDetails render state", {
+        agentName,
+        messageCount: messages.length,
+        hasContent,
+        isRunning,
+        parentStatus,
+    });
     // Auto-collapse Thinking when completed (so Output is the primary view)
     const prevIsRunningRef = useRef(isRunning);
     useEffect(() => {
@@ -125,7 +121,7 @@ export function SubAgentDetails({ port, sessionId, host, parentStatus, agentName
                         ] })), _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: "Stream" }), _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 &&
+                                ] }), 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: [!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, blockIdx) => 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-${block.text.slice(0, 30)}-${blockIdx}`)) : (_jsx(SubagentToolCallItem, { toolCall: block.toolCall }, block.toolCall.id)))

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

@@ -0,0 +1,8 @@
+import type { ToolCall as ToolCallType } from "../../core/schemas/tool-call.js";
+export interface ToolCallProps {
+    toolCall: ToolCallType;
+}
+/**
+ * ToolCall component - displays a single tool call with collapsible details
+ */
+export declare function ToolCall({ toolCall }: ToolCallProps): import("react/jsx-runtime").JSX.Element;

package/dist/gui/components/ToolCall.js

@@ -0,0 +1,226 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import JsonView from "@uiw/react-json-view";
+import { AlertCircle, CheckSquare, ChevronDown, ChevronRight, CircleDot, Cloud, Edit, FileText, Globe, Image, Link, Search, Wrench, } from "lucide-react";
+import React, { useState } from "react";
+import { ChatLayout } from "./index.js";
+import { SubAgentDetails } from "./SubAgentDetails.js";
+import { useTheme } from "./ThemeProvider.js";
+/**
+ * Map of icon names to Lucide components
+ */
+const ICON_MAP = {
+    Globe: Globe,
+    Image: Image,
+    Link: Link,
+    Cloud: Cloud,
+    CheckSquare: CheckSquare,
+    Search: Search,
+    FileText: FileText,
+    Edit: Edit,
+    Wrench: Wrench,
+    CircleDot: CircleDot,
+};
+/**
+ * Tool call kind icons (using emoji for simplicity)
+ */
+const _kindIcons = {
+    read: "\u{1F4C4}",
+    edit: "\u{270F}\u{FE0F}",
+    delete: "\u{1F5D1}\u{FE0F}",
+    move: "\u{1F4E6}",
+    search: "\u{1F50D}",
+    execute: "\u{2699}\u{FE0F}",
+    think: "\u{1F4AD}",
+    fetch: "\u{1F310}",
+    switch_mode: "\u{1F501}",
+    other: "\u{1F527}",
+};
+/**
+ * ToolCall component - displays a single tool call with collapsible details
+ */
+export function ToolCall({ toolCall }) {
+    const [isExpanded, setIsExpanded] = useState(false);
+    const [isSubagentExpanded, setIsSubagentExpanded] = useState(false);
+    const { resolvedTheme } = useTheme();
+    // Detect TodoWrite tool and subagent
+    const isTodoWrite = toolCall.title === "todo_write";
+    const isSubagentCall = !!(toolCall.subagentPort && toolCall.subagentSessionId);
+    // 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
+    const handleHeaderClick = React.useCallback(() => {
+        if (isTodoWrite && layoutContext) {
+            // Toggle sidepanel - close if already open on todo tab, otherwise open
+            if (layoutContext.panelSize !== "hidden" &&
+                layoutContext.activeTab === "todo") {
+                layoutContext.setPanelSize("hidden");
+            }
+            else {
+                layoutContext.setPanelSize("small");
+                layoutContext.setActiveTab("todo");
+            }
+        }
+        else if (isSubagentCall) {
+            // Toggle subagent details
+            setIsSubagentExpanded(!isSubagentExpanded);
+        }
+        else {
+            // Normal expand/collapse
+            setIsExpanded(!isExpanded);
+        }
+    }, [
+        isTodoWrite,
+        layoutContext,
+        isExpanded,
+        isSubagentCall,
+        isSubagentExpanded,
+    ]);
+    // Determine which icon to show
+    const IconComponent = toolCall.icon && ICON_MAP[toolCall.icon]
+        ? ICON_MAP[toolCall.icon]
+        : CircleDot;
+    // Determine display name
+    const displayName = toolCall.prettyName || toolCall.title;
+    // Determine icon color based on status (especially for subagents)
+    const isSubagentRunning = isSubagentCall &&
+        (toolCall.status === "in_progress" || toolCall.status === "pending");
+    const isSubagentFailed = isSubagentCall && toolCall.status === "failed";
+    const iconColorClass = isSubagentCall
+        ? isSubagentFailed
+            ? "text-destructive"
+            : isSubagentRunning
+                ? "text-foreground animate-pulse"
+                : "text-green-500"
+        : "text-muted-foreground";
+    const statusTooltip = isSubagentCall
+        ? isSubagentFailed
+            ? "Sub-agent failed"
+            : isSubagentRunning
+                ? "Sub-agent running"
+                : "Sub-agent completed"
+        : undefined;
+    // Check if there's an error
+    const hasError = toolCall.status === "failed" || !!toolCall.error;
+    // Check if this is a preliminary (pending) tool call without full details yet
+    const isPreliminary = toolCall.status === "pending" &&
+        (!toolCall.rawInput || Object.keys(toolCall.rawInput).length === 0);
+    // JSON View style based on theme
+    const jsonStyle = {
+        fontSize: "11px",
+        backgroundColor: "transparent",
+        fontFamily: "inherit",
+        "--w-rjv-color": resolvedTheme === "dark" ? "#fafafa" : "#09090b",
+        "--w-rjv-key-string": resolvedTheme === "dark" ? "#fafafa" : "#09090b",
+        "--w-rjv-background-color": "transparent",
+        "--w-rjv-line-color": resolvedTheme === "dark" ? "#27272a" : "#e4e4e7",
+        "--w-rjv-arrow-color": resolvedTheme === "dark" ? "#a1a1aa" : "#71717a",
+        "--w-rjv-edit-color": resolvedTheme === "dark" ? "#fafafa" : "#09090b",
+        "--w-rjv-info-color": resolvedTheme === "dark" ? "#a1a1aa" : "#71717a",
+        "--w-rjv-update-color": resolvedTheme === "dark" ? "#fafafa" : "#09090b",
+        "--w-rjv-copied-color": resolvedTheme === "dark" ? "#fafafa" : "#09090b",
+        "--w-rjv-copied-success-color": resolvedTheme === "dark" ? "#22c55e" : "#16a34a",
+        "--w-rjv-curlybraces-color": resolvedTheme === "dark" ? "#a1a1aa" : "#71717a",
+        "--w-rjv-colon-color": resolvedTheme === "dark" ? "#a1a1aa" : "#71717a",
+        "--w-rjv-brackets-color": resolvedTheme === "dark" ? "#a1a1aa" : "#71717a",
+        "--w-rjv-quotes-color": resolvedTheme === "dark" ? "#a1a1aa" : "#71717a",
+        "--w-rjv-quotes-string-color": resolvedTheme === "dark" ? "#a1a1aa" : "#71717a",
+        "--w-rjv-type-string-color": resolvedTheme === "dark" ? "#22c55e" : "#16a34a",
+        "--w-rjv-type-int-color": resolvedTheme === "dark" ? "#f59e0b" : "#d97706",
+        "--w-rjv-type-float-color": resolvedTheme === "dark" ? "#f59e0b" : "#d97706",
+        "--w-rjv-type-bigint-color": resolvedTheme === "dark" ? "#f59e0b" : "#d97706",
+        "--w-rjv-type-boolean-color": resolvedTheme === "dark" ? "#3b82f6" : "#2563eb",
+        "--w-rjv-type-date-color": resolvedTheme === "dark" ? "#ec4899" : "#db2777",
+        "--w-rjv-type-url-color": resolvedTheme === "dark" ? "#3b82f6" : "#2563eb",
+        "--w-rjv-type-null-color": resolvedTheme === "dark" ? "#ef4444" : "#dc2626",
+        "--w-rjv-type-nan-color": resolvedTheme === "dark" ? "#ef4444" : "#dc2626",
+        "--w-rjv-type-undefined-color": resolvedTheme === "dark" ? "#ef4444" : "#dc2626",
+    };
+    // Preliminary tool calls show as simple light gray text without expansion
+    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 &&
+                        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 &&
+                                            `:${loc.line}`] }, `${loc.path}:${loc.line ?? ""}`))) })] })), (toolCall.content && toolCall.content.length > 0) ||
+                        toolCall.error ? (_jsxs("div", { className: "p-3 border-b border-border last:border-0", children: [_jsx("div", { className: "text-[10px] font-bold text-muted-foreground uppercase tracking-wider mb-1.5 font-sans", children: "Output" }), _jsxs("div", { className: "space-y-2 text-[11px] text-foreground", children: [toolCall.content?.map((block, idx) => {
+                                        // Generate a stable key based on content
+                                        const getBlockKey = () => {
+                                            if (block.type === "diff" && "path" in block) {
+                                                return `diff-${block.path}-${idx}`;
+                                            }
+                                            if (block.type === "terminal" && "terminalId" in block) {
+                                                return `terminal-${block.terminalId}`;
+                                            }
+                                            if (block.type === "text" && "text" in block) {
+                                                return `text-${block.text.substring(0, 20)}-${idx}`;
+                                            }
+                                            if (block.type === "content" && "content" in block) {
+                                                const innerContent = block.content;
+                                                return `content-${innerContent.text?.substring(0, 20)}-${idx}`;
+                                            }
+                                            return `block-${idx}`;
+                                        };
+                                        // Helper to render text content (with JSON parsing if applicable)
+                                        const renderTextContent = (text, key) => {
+                                            // Try to parse as JSON
+                                            try {
+                                                const parsed = JSON.parse(text);
+                                                // If it's an object or array, render with JsonView
+                                                if (typeof parsed === "object" && parsed !== null) {
+                                                    return (_jsx("div", { className: "text-[11px]", children: _jsx(JsonView, { value: parsed, collapsed: false, displayDataTypes: false, displayObjectSize: false, enableClipboard: true, style: jsonStyle }) }, key));
+                                                }
+                                            }
+                                            catch {
+                                                // Not valid JSON, render as plain text
+                                            }
+                                            // Render as plain text
+                                            return (_jsx("pre", { className: "whitespace-pre-wrap font-mono text-[11px] text-foreground overflow-x-auto", children: text }, key));
+                                        };
+                                        // Handle nested content blocks (ACP format)
+                                        if (block.type === "content" && "content" in block) {
+                                            const innerContent = block.content;
+                                            if (innerContent.type === "text" && innerContent.text) {
+                                                return renderTextContent(innerContent.text, getBlockKey());
+                                            }
+                                        }
+                                        // Handle direct text blocks
+                                        if (block.type === "text" && "text" in block) {
+                                            return renderTextContent(block.text, getBlockKey());
+                                        }
+                                        // Handle image blocks
+                                        if (block.type === "image") {
+                                            const alt = block.alt || "Generated image";
+                                            let imageSrc;
+                                            if ("data" in block) {
+                                                // Base64 encoded image
+                                                const mimeType = block.mimeType || "image/png";
+                                                imageSrc = `data:${mimeType};base64,${block.data}`;
+                                            }
+                                            else if ("url" in block) {
+                                                // URL or file path
+                                                imageSrc = block.url;
+                                            }
+                                            else {
+                                                return null;
+                                            }
+                                            return (_jsx("div", { className: "my-2", children: _jsx("img", { src: imageSrc, alt: alt, className: "max-w-full h-auto rounded-md border border-border" }) }, getBlockKey()));
+                                        }
+                                        // Handle diff blocks
+                                        if (block.type === "diff" &&
+                                            "path" in block &&
+                                            "oldText" in block &&
+                                            "newText" in block) {
+                                            return (_jsxs("div", { className: "border border-border rounded bg-card", children: [_jsxs("div", { className: "bg-muted px-2 py-1 text-[10px] font-mono text-muted-foreground border-b border-border", children: [block.path, "line" in block &&
+                                                                block.line !== null &&
+                                                                block.line !== undefined &&
+                                                                `:${block.line}`] }), _jsxs("div", { className: "p-2 font-mono text-[11px]", children: [_jsxs("div", { className: "text-red-500 dark:text-red-400", children: ["- ", block.oldText] }), _jsxs("div", { className: "text-green-500 dark:text-green-400", children: ["+ ", block.newText] })] })] }, getBlockKey()));
+                                        }
+                                        // Handle terminal blocks
+                                        if (block.type === "terminal" && "terminalId" in block) {
+                                            return (_jsxs("div", { className: "bg-neutral-900 text-neutral-100 p-2 rounded text-[11px] font-mono", children: ["Terminal: ", block.terminalId] }, getBlockKey()));
+                                        }
+                                        return null;
+                                    }), toolCall.error && (_jsxs("div", { className: "text-destructive font-mono text-[11px] mt-2", children: ["Error: ", toolCall.error] }))] })] })) : null, toolCall._meta?.truncationWarning && (_jsxs("div", { className: "mx-3 mt-3 mb-0 flex items-center gap-2 rounded-md bg-yellow-50 dark:bg-yellow-950/20 px-3 py-2 text-[11px] text-yellow-800 dark:text-yellow-200 border border-yellow-200 dark:border-yellow-900", children: [_jsx("span", { className: "text-yellow-600 dark:text-yellow-500", children: "\u26A0\uFE0F" }), _jsx("span", { children: toolCall._meta.truncationWarning })] })), (toolCall.tokenUsage || toolCall.startedAt) && (_jsxs("div", { className: "p-2 bg-muted/50 border-t border-border flex flex-wrap gap-4 text-[10px] text-muted-foreground font-sans", children: [toolCall.tokenUsage && (_jsxs("div", { className: "flex gap-3", children: [toolCall.tokenUsage.inputTokens !== undefined && (_jsxs("div", { children: [_jsx("span", { className: "uppercase tracking-wide font-semibold mr-1", children: "Input:" }), toolCall.tokenUsage.inputTokens.toLocaleString()] })), toolCall.tokenUsage.outputTokens !== undefined && (_jsxs("div", { children: [_jsx("span", { className: "uppercase tracking-wide font-semibold mr-1", children: "Output:" }), toolCall.tokenUsage.outputTokens.toLocaleString()] })), toolCall.tokenUsage.totalTokens !== undefined && (_jsxs("div", { children: [_jsx("span", { className: "uppercase tracking-wide font-semibold mr-1", children: "Total:" }), toolCall.tokenUsage.totalTokens.toLocaleString()] }))] })), toolCall.startedAt && (_jsxs("div", { className: "flex gap-3 ml-auto", children: [_jsxs("span", { children: ["Started: ", new Date(toolCall.startedAt).toLocaleTimeString()] }), toolCall.completedAt && (_jsxs("span", { children: ["Completed:", " ", new Date(toolCall.completedAt).toLocaleTimeString(), " (", Math.round((toolCall.completedAt - toolCall.startedAt) / 1000), "s)"] }))] }))] }))] }))] }));
+}

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

@@ -0,0 +1,8 @@
+import type { ToolCall as ToolCallType } from "../../core/schemas/tool-call.js";
+export interface ToolCallGroupProps {
+    toolCalls: ToolCallType[];
+}
+/**
+ * ToolCallGroup component - displays a group of parallel tool calls with collapsible details
+ */
+export declare function ToolCallGroup({ toolCalls }: ToolCallGroupProps): import("react/jsx-runtime").JSX.Element;

package/dist/gui/components/ToolCallGroup.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDown, ListVideo } from "lucide-react";
+import React, { useState } from "react";
+import { ToolCall } from "./ToolCall.js";
+/**
+ * ToolCallGroup component - displays a group of parallel tool calls with collapsible details
+ */
+export function ToolCallGroup({ toolCalls }) {
+    const [isExpanded, setIsExpanded] = useState(false);
+    // Calculate group status based on individual tool call statuses
+    const getGroupStatus = () => {
+        const statuses = toolCalls.map((tc) => tc.status);
+        if (statuses.some((s) => s === "failed"))
+            return "failed";
+        if (statuses.some((s) => s === "in_progress"))
+            return "in_progress";
+        if (statuses.every((s) => s === "completed"))
+            return "completed";
+        return "pending";
+    };
+    const groupStatus = getGroupStatus();
+    // Generate summary of tool names
+    const toolNames = toolCalls.map((tc) => tc.prettyName || tc.title);
+    const uniqueNames = [...new Set(toolNames)];
+    const summary = uniqueNames.length <= 2
+        ? uniqueNames.join(", ")
+        : `${uniqueNames.slice(0, 2).join(", ")} +${uniqueNames.length - 2} more`;
+    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: () => setIsExpanded(!isExpanded), "aria-expanded": isExpanded, children: [_jsxs("div", { className: "flex items-center gap-1.5 text-[11px] font-medium text-muted-foreground", children: [_jsx("div", { className: "text-muted-foreground", children: _jsx(ListVideo, { className: "h-3 w-3" }) }), _jsx("span", { className: "text-paragraph-sm text-muted-foreground", children: "Parallel operation" }), _jsx("span", { className: "text-[10px] bg-muted px-1.5 py-0.5 rounded text-muted-foreground/70", children: toolCalls.length }), _jsx(ChevronDown, { className: `h-3 w-3 text-muted-foreground/70 transition-transform duration-200 ${isExpanded ? "rotate-180" : ""}` })] }), !isExpanded && (_jsx("span", { className: "text-paragraph-sm text-muted-foreground/70 pl-4.5", children: summary }))] }), isExpanded && (_jsx("div", { className: "mt-1", children: toolCalls.map((toolCall) => (_jsxs("div", { className: "flex items-start", children: [_jsx("div", { className: "w-2.5 h-4 border-l-2 border-b-2 border-border rounded-bl-[6px] mt-1 mr-0.5 shrink-0" }), _jsx("div", { className: "flex-1 -mt-2", children: _jsx(ToolCall, { toolCall: toolCall }) })] }, toolCall.id))) }))] }));
+}

package/dist/gui/components/ToolOperation.js

@@ -138,12 +138,9 @@ export function ToolOperation({ toolCalls, isGrouped = false, autoMinimize = tru
                 (n.metadata?.action === "truncated" ||
                     n.metadata?.action === "compacted_then_truncated")))
         : false;
-    // Detect subagent calls
-    const hasLiveSubagent = !!(singleToolCall?.subagentPort && singleToolCall?.subagentSessionId);
-    const hasStoredSubagent = !!(singleToolCall?.subagentMessages &&
+    // Detect subagent calls (subagents now run in-process, messages in subagentMessages)
+    const isSubagentCall = !!(singleToolCall?.subagentMessages &&
         singleToolCall.subagentMessages.length > 0);
-    const isSubagentCall = hasLiveSubagent || hasStoredSubagent;
-    const isReplaySubagent = hasStoredSubagent;
     // State for subagent expansion
     const [isSubagentExpanded, setIsSubagentExpanded] = useState(false);
     // Safely access ChatLayout context
@@ -312,7 +309,7 @@ export function ToolOperation({ toolCalls, isGrouped = false, autoMinimize = tru
                                 return (_jsxs("span", { className: "text-paragraph-sm text-text-secondary/70 pl-4.5", children: [compactedCount, " response", compactedCount > 1 ? "s" : "", " ", "compacted"] }));
                             }
                             return null;
-                        })()] }), !isTodoWrite && isSubagentCall && singleToolCall && (_jsx("div", { className: "pl-4.5 mt-2", children: _jsx(SubAgentDetails, { port: singleToolCall.subagentPort, sessionId: singleToolCall.subagentSessionId, parentStatus: singleToolCall.status, agentName: singleToolCall.rawInput?.agentName, query: singleToolCall.rawInput?.query, isExpanded: isSubagentExpanded, onExpandChange: setIsSubagentExpanded, storedMessages: singleToolCall.subagentMessages, isReplay: isReplaySubagent }) })), !isTodoWrite && isExpanded && (_jsx("div", { className: "mt-1", children: isGrouped ? (
+                        })()] }), !isTodoWrite && isSubagentCall && singleToolCall && (_jsx("div", { className: "pl-4.5 mt-2", children: _jsx(SubAgentDetails, { parentStatus: singleToolCall.status, agentName: singleToolCall.rawInput?.agentName, query: singleToolCall.rawInput?.query, isExpanded: isSubagentExpanded, onExpandChange: setIsSubagentExpanded, storedMessages: singleToolCall.subagentMessages }) })), !isTodoWrite && isExpanded && (_jsx("div", { className: "mt-1", children: isGrouped ? (
                 // Render individual tool calls in group
                 _jsx("div", { className: "flex flex-col gap-4 mt-2", children: toolCalls.map((toolCall) => {
                         const hookNotification = hookNotifications.find((n) => n.toolCallId === toolCall.id);
@@ -329,11 +326,8 @@ export function ToolOperation({ toolCalls, isGrouped = false, autoMinimize = tru
  */
 function GroupedToolCallItem({ toolCall, hookNotification, }) {
     const [isExpanded, setIsExpanded] = useState(false);
-    // Detect subagent calls
-    const hasLiveSubagent = !!(toolCall.subagentPort && toolCall.subagentSessionId);
-    const hasStoredSubagent = !!(toolCall.subagentMessages && toolCall.subagentMessages.length > 0);
-    const isSubagentCall = hasLiveSubagent || hasStoredSubagent;
-    const isReplaySubagent = hasStoredSubagent;
+    // Detect subagent calls (subagents now run in-process, messages in subagentMessages)
+    const isSubagentCall = !!(toolCall.subagentMessages && toolCall.subagentMessages.length > 0);
     // Detect compaction for this individual tool call
     const hasCompaction = !!((hookNotification?.status === "completed" &&
         hookNotification.metadata?.action &&
@@ -365,7 +359,7 @@ function GroupedToolCallItem({ toolCall, hookNotification, }) {
                                                 : "Response was compacted";
                                         })() })
                                 ] }) })), _jsx(ChevronDown, { className: `h-3 w-3 text-text-secondary/70 group-hover:text-text-secondary transition-colors transition-transform duration-200 ${isExpanded ? "rotate-180" : ""}` })
-                    ] }), _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: isExpanded, onExpandChange: setIsExpanded, storedMessages: toolCall.subagentMessages, isReplay: isReplaySubagent }) })
+                    ] }), _jsx("div", { className: "pl-4.5", children: _jsx(SubAgentDetails, { parentStatus: toolCall.status, agentName: toolCall.rawInput?.agentName, query: toolCall.rawInput?.query, isExpanded: isExpanded, onExpandChange: setIsExpanded, storedMessages: toolCall.subagentMessages }) })
             ] }));
     }
     // Regular tool call - collapsible with clickable header

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@townco/ui",
-  "version": "0.1.103",
+  "version": "0.1.105",
   "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.81",
+    "@townco/core": "0.0.83",
     "@types/mdast": "^4.0.4",
     "@uiw/react-json-view": "^2.0.0-alpha.39",
     "class-variance-authority": "^0.7.1",
@@ -67,7 +67,7 @@
     "zustand": "^5.0.8"
   },
   "devDependencies": {
-    "@townco/tsconfig": "0.1.100",
+    "@townco/tsconfig": "0.1.102",
     "@types/node": "^24.10.0",
     "@types/react": "^19.2.2",
     "@types/unist": "^3.0.3",