@townco/ui 0.1.75 → 0.1.76

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

@@ -15,7 +15,7 @@ export declare function useChatMessages(client: AcpClient | null, startSession:
             id: string;
             title: string;
             kind: "read" | "edit" | "delete" | "move" | "search" | "execute" | "think" | "fetch" | "switch_mode" | "other";
-            status: "pending" | "in_progress" | "completed" | "failed";
+            status: "completed" | "pending" | "in_progress" | "failed";
             batchId?: string | undefined;
             prettyName?: string | undefined;
             icon?: string | undefined;
@@ -82,7 +82,7 @@ export declare function useChatMessages(client: AcpClient | null, startSession:
                 toolCalls?: {
                     id: string;
                     title: string;
-                    status: "pending" | "in_progress" | "completed" | "failed";
+                    status: "completed" | "pending" | "in_progress" | "failed";
                     prettyName?: string | undefined;
                     icon?: string | undefined;
                     content?: ({
@@ -122,7 +122,7 @@ export declare function useChatMessages(client: AcpClient | null, startSession:
                     toolCall: {
                         id: string;
                         title: string;
-                        status: "pending" | "in_progress" | "completed" | "failed";
+                        status: "completed" | "pending" | "in_progress" | "failed";
                         prettyName?: string | undefined;
                         icon?: string | undefined;
                         content?: ({
@@ -163,7 +163,7 @@ export declare function useChatMessages(client: AcpClient | null, startSession:
             id: string;
             hookType: "context_size" | "tool_response";
             callback: string;
-            status: "error" | "completed" | "triggered";
+            status: "error" | "triggered" | "completed";
             threshold?: number | undefined;
             currentPercentage?: number | undefined;
             metadata?: {
@@ -181,6 +181,7 @@ export declare function useChatMessages(client: AcpClient | null, startSession:
             triggeredAt?: number | undefined;
             completedAt?: number | undefined;
             contentPosition?: number | undefined;
+            toolCallId?: string | undefined;
         }[] | undefined;
         tokenUsage?: {
             inputTokens?: number | 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: "error" | "disconnected" | "connecting" | "connected";
     sessionId: string | null;
     connect: () => Promise<void>;
     loadSession: (sessionIdToLoad: string) => Promise<void>;

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

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

package/dist/core/schemas/chat.d.ts

@@ -23,8 +23,8 @@ export declare const HookNotificationDisplay: z.ZodObject<{
     callback: z.ZodString;
     status: z.ZodEnum<{
         error: "error";
-        completed: "completed";
         triggered: "triggered";
+        completed: "completed";
     }>;
     threshold: z.ZodOptional<z.ZodNumber>;
     currentPercentage: z.ZodOptional<z.ZodNumber>;
@@ -42,6 +42,7 @@ export declare const HookNotificationDisplay: z.ZodObject<{
     triggeredAt: z.ZodOptional<z.ZodNumber>;
     completedAt: z.ZodOptional<z.ZodNumber>;
     contentPosition: z.ZodOptional<z.ZodNumber>;
+    toolCallId: z.ZodOptional<z.ZodString>;
 }, z.core.$strip>;
 export type HookNotificationDisplay = z.infer<typeof HookNotificationDisplay>;
 export { HookType, HookNotification };
@@ -85,9 +86,9 @@ export declare const DisplayMessage: z.ZodObject<{
             other: "other";
         }>;
         status: z.ZodEnum<{
+            completed: "completed";
             pending: "pending";
             in_progress: "in_progress";
-            completed: "completed";
             failed: "failed";
         }>;
         contentPosition: z.ZodOptional<z.ZodNumber>;
@@ -153,9 +154,9 @@ export declare const DisplayMessage: z.ZodObject<{
                 prettyName: z.ZodOptional<z.ZodString>;
                 icon: z.ZodOptional<z.ZodString>;
                 status: z.ZodEnum<{
+                    completed: "completed";
                     pending: "pending";
                     in_progress: "in_progress";
-                    completed: "completed";
                     failed: "failed";
                 }>;
                 content: z.ZodOptional<z.ZodArray<z.ZodDiscriminatedUnion<[z.ZodObject<{
@@ -198,9 +199,9 @@ export declare const DisplayMessage: z.ZodObject<{
                     prettyName: z.ZodOptional<z.ZodString>;
                     icon: z.ZodOptional<z.ZodString>;
                     status: z.ZodEnum<{
+                        completed: "completed";
                         pending: "pending";
                         in_progress: "in_progress";
-                        completed: "completed";
                         failed: "failed";
                     }>;
                     content: z.ZodOptional<z.ZodArray<z.ZodDiscriminatedUnion<[z.ZodObject<{
@@ -246,8 +247,8 @@ export declare const DisplayMessage: z.ZodObject<{
         callback: z.ZodString;
         status: z.ZodEnum<{
             error: "error";
-            completed: "completed";
             triggered: "triggered";
+            completed: "completed";
         }>;
         threshold: z.ZodOptional<z.ZodNumber>;
         currentPercentage: z.ZodOptional<z.ZodNumber>;
@@ -265,6 +266,7 @@ export declare const DisplayMessage: z.ZodObject<{
         triggeredAt: z.ZodOptional<z.ZodNumber>;
         completedAt: z.ZodOptional<z.ZodNumber>;
         contentPosition: z.ZodOptional<z.ZodNumber>;
+        toolCallId: z.ZodOptional<z.ZodString>;
     }, z.core.$strip>>>;
     tokenUsage: z.ZodOptional<z.ZodObject<{
         inputTokens: z.ZodOptional<z.ZodNumber>;
@@ -336,9 +338,9 @@ export declare const ChatSessionState: z.ZodObject<{
                 other: "other";
             }>;
             status: z.ZodEnum<{
+                completed: "completed";
                 pending: "pending";
                 in_progress: "in_progress";
-                completed: "completed";
                 failed: "failed";
             }>;
             contentPosition: z.ZodOptional<z.ZodNumber>;
@@ -404,9 +406,9 @@ export declare const ChatSessionState: z.ZodObject<{
                     prettyName: z.ZodOptional<z.ZodString>;
                     icon: z.ZodOptional<z.ZodString>;
                     status: z.ZodEnum<{
+                        completed: "completed";
                         pending: "pending";
                         in_progress: "in_progress";
-                        completed: "completed";
                         failed: "failed";
                     }>;
                     content: z.ZodOptional<z.ZodArray<z.ZodDiscriminatedUnion<[z.ZodObject<{
@@ -449,9 +451,9 @@ export declare const ChatSessionState: z.ZodObject<{
                         prettyName: z.ZodOptional<z.ZodString>;
                         icon: z.ZodOptional<z.ZodString>;
                         status: z.ZodEnum<{
+                            completed: "completed";
                             pending: "pending";
                             in_progress: "in_progress";
-                            completed: "completed";
                             failed: "failed";
                         }>;
                         content: z.ZodOptional<z.ZodArray<z.ZodDiscriminatedUnion<[z.ZodObject<{
@@ -497,8 +499,8 @@ export declare const ChatSessionState: z.ZodObject<{
             callback: z.ZodString;
             status: z.ZodEnum<{
                 error: "error";
-                completed: "completed";
                 triggered: "triggered";
+                completed: "completed";
             }>;
             threshold: z.ZodOptional<z.ZodNumber>;
             currentPercentage: z.ZodOptional<z.ZodNumber>;
@@ -516,6 +518,7 @@ export declare const ChatSessionState: z.ZodObject<{
             triggeredAt: z.ZodOptional<z.ZodNumber>;
             completedAt: z.ZodOptional<z.ZodNumber>;
             contentPosition: z.ZodOptional<z.ZodNumber>;
+            toolCallId: z.ZodOptional<z.ZodString>;
         }, z.core.$strip>>>;
         tokenUsage: z.ZodOptional<z.ZodObject<{
             inputTokens: z.ZodOptional<z.ZodNumber>;
@@ -546,8 +549,8 @@ export type ChatSessionState = z.infer<typeof ChatSessionState>;
  */
 export declare const ConnectionStatus: z.ZodEnum<{
     error: "error";
+    disconnected: "disconnected";
     connecting: "connecting";
     connected: "connected";
-    disconnected: "disconnected";
 }>;
 export type ConnectionStatus = z.infer<typeof ConnectionStatus>;

package/dist/core/schemas/chat.js

@@ -45,6 +45,8 @@ export const HookNotificationDisplay = z.object({
     completedAt: z.number().optional(),
     // Position in content where the hook was triggered (for inline rendering)
     contentPosition: z.number().optional(),
+    // For tool_response hooks - associates notification with a specific tool call
+    toolCallId: z.string().optional(),
 });
 export { HookType, HookNotification };
 /**

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

@@ -13,16 +13,16 @@ export type ToolCallStatus = z.infer<typeof ToolCallStatusSchema>;
  * Tool call categories for UI presentation
  */
 export declare const ToolCallKindSchema: z.ZodEnum<{
+    search: "search";
+    execute: "execute";
+    move: "move";
+    other: "other";
     read: "read";
     edit: "edit";
     delete: "delete";
-    move: "move";
-    search: "search";
-    execute: "execute";
     think: "think";
     fetch: "fetch";
     switch_mode: "switch_mode";
-    other: "other";
 }>;
 export type ToolCallKind = z.infer<typeof ToolCallKindSchema>;
 /**
@@ -280,16 +280,16 @@ export declare const ToolCallSchema: z.ZodObject<{
     }, z.core.$strip>>;
     subline: z.ZodOptional<z.ZodString>;
     kind: z.ZodEnum<{
+        search: "search";
+        execute: "execute";
+        move: "move";
+        other: "other";
         read: "read";
         edit: "edit";
         delete: "delete";
-        move: "move";
-        search: "search";
-        execute: "execute";
         think: "think";
         fetch: "fetch";
         switch_mode: "switch_mode";
-        other: "other";
     }>;
     status: z.ZodEnum<{
         pending: "pending";

package/dist/core/store/chat-store.js

@@ -12,6 +12,8 @@ function createHookNotificationDisplay(notification) {
         id: `hook_${Date.now()}_${notification.hookType}_${notification.callback}`,
         hookType: notification.hookType,
         callback: notification.callback,
+        // Include toolCallId if present (for tool_response hooks)
+        ...(notification.toolCallId ? { toolCallId: notification.toolCallId } : {}),
     };
     switch (notification.type) {
         case "hook_triggered":

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/HookNotification.js

@@ -4,18 +4,25 @@ import React, { useEffect, useState } from "react";
 /**
  * Get display information for a hook type
  */
-function getHookDisplayInfo(hookType, _callback, status) {
+function getHookDisplayInfo(hookType, _callback, status, action) {
     const isTriggered = status === "triggered";
+    const noActionNeeded = action === "no_action_needed";
     if (hookType === "context_size") {
+        if (isTriggered) {
+            return { icon: Archive, title: "Compacting Context..." };
+        }
         return {
             icon: Archive,
-            title: isTriggered ? "Compacting Context..." : "Context Compacted",
+            title: noActionNeeded ? "Context Check" : "Context Compacted",
         };
     }
     if (hookType === "tool_response") {
+        if (isTriggered) {
+            return { icon: Scissors, title: "Compacting Response..." };
+        }
         return {
             icon: Scissors,
-            title: isTriggered ? "Compacting Response..." : "Tool Response Compacted",
+            title: noActionNeeded ? "Response Check" : "Tool Response Compacted",
         };
     }
     // Fallback for unknown hook types
@@ -37,7 +44,7 @@ function formatNumber(num) {
 export function HookNotification({ notification }) {
     const [isExpanded, setIsExpanded] = useState(false);
     const [elapsedTime, setElapsedTime] = useState(0);
-    const { icon: IconComponent, title } = getHookDisplayInfo(notification.hookType, notification.callback, notification.status);
+    const { icon: IconComponent, title } = getHookDisplayInfo(notification.hookType, notification.callback, notification.status, notification.metadata?.action);
     const isTriggered = notification.status === "triggered";
     const isCompleted = notification.status === "completed";
     const isError = notification.status === "error";

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/MessageContent.js

@@ -169,13 +169,17 @@ export const MessageContent = React.forwardRef(({ role: roleProp, variant, isStr
                         flushConsecutiveGroup();
                         return result;
                     };
+                    // Get tool_response hook notifications to associate with tool calls
+                    const toolResponseHooks = (message.hookNotifications || []).filter((n) => n.hookType === "tool_response");
                     // Helper to render a tool call or group
                     const renderToolCallOrGroup = (item, index) => {
                         // Batch group (parallel operations)
                         if (typeof item === "object" &&
                             "type" in item &&
                             item.type === "batch") {
-                            return (_jsx(ToolOperation, { toolCalls: item.toolCalls, isGrouped: true }, `batch-${item.toolCalls[0]?.batchId || index}`));
+                            // Get hook notifications for all tool calls in this batch
+                            const batchHookNotifications = toolResponseHooks.filter((n) => item.toolCalls.some((tc) => tc.id === n.toolCallId));
+                            return (_jsx(ToolOperation, { toolCalls: item.toolCalls, isGrouped: true, hookNotifications: batchHookNotifications }, `batch-${item.toolCalls[0]?.batchId || index}`));
                         }
                         // Selecting group (consecutive preliminary tool calls)
                         if (typeof item === "object" &&
@@ -184,10 +188,14 @@ export const MessageContent = React.forwardRef(({ role: roleProp, variant, isStr
                             return (_jsx(ToolOperation, { toolCalls: item.toolCalls, isGrouped: true }, `selecting-${item.toolCalls[0]?.id || index}`));
                         }
                         // Single tool call
-                        return (_jsx(ToolOperation, { toolCalls: [item], isGrouped: false }, item.id));
+                        const singleToolCall = item;
+                        const singleHookNotifications = toolResponseHooks.filter((n) => n.toolCallId === singleToolCall.id);
+                        return (_jsx(ToolOperation, { toolCalls: [singleToolCall], isGrouped: false, hookNotifications: singleHookNotifications }, singleToolCall.id));
                     };
-                    // Get hook notifications and sort by content position
+                    // Get hook notifications, filter out tool_response hooks (they're shown as sublines on tool calls)
+                    // and sort by content position
                     const hookNotifications = (message.hookNotifications || [])
+                        .filter((n) => n.hookType !== "tool_response")
                         .slice()
                         .sort((a, b) => (a.contentPosition ?? Infinity) -
                         (b.contentPosition ?? Infinity));

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.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,234 @@
+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";
+    // 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
+    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, 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 &&
+                                            `:${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.d.ts

@@ -1,11 +1,14 @@
+import type { HookNotificationDisplay } from "../../core/schemas/chat.js";
 import type { ToolCall as ToolCallType } from "../../core/schemas/tool-call.js";
 export interface ToolOperationProps {
     toolCalls: ToolCallType[];
     isGrouped?: boolean;
     autoMinimize?: boolean;
+    /** Hook notifications associated with these tool calls (for showing compaction status) */
+    hookNotifications?: HookNotificationDisplay[];
 }
 /**
  * ToolOperation component - unified display for tool calls
  * Handles both individual and grouped tool calls with smooth transitions
  */
-export declare function ToolOperation({ toolCalls, isGrouped, autoMinimize, }: ToolOperationProps): import("react/jsx-runtime").JSX.Element;
+export declare function ToolOperation({ toolCalls, isGrouped, autoMinimize, hookNotifications, }: ToolOperationProps): import("react/jsx-runtime").JSX.Element;

package/dist/gui/components/ToolOperation.js

@@ -31,7 +31,7 @@ const ICON_MAP = {
  * ToolOperation component - unified display for tool calls
  * Handles both individual and grouped tool calls with smooth transitions
  */
-export function ToolOperation({ toolCalls, isGrouped = false, autoMinimize = true, }) {
+export function ToolOperation({ toolCalls, isGrouped = false, autoMinimize = true, hookNotifications = [], }) {
     const [isExpanded, setIsExpanded] = useState(false);
     const [isMinimized, setIsMinimized] = useState(false);
     const [userInteracted, setUserInteracted] = useState(false);
@@ -40,6 +40,10 @@ export function ToolOperation({ toolCalls, isGrouped = false, autoMinimize = tru
     // For single tool call, extract it
     const singleToolCall = toolCalls.length === 1 ? toolCalls[0] : null;
     const isTodoWrite = singleToolCall?.title === "todo_write";
+    // Find hook notification for this tool call (for compaction status)
+    const toolHookNotification = singleToolCall
+        ? hookNotifications.find((n) => n.toolCallId === singleToolCall.id)
+        : undefined;
     // Detect subagent calls
     const hasLiveSubagent = !!(singleToolCall?.subagentPort && singleToolCall?.subagentSessionId);
     const hasStoredSubagent = !!(singleToolCall?.subagentMessages &&
@@ -191,20 +195,48 @@ export function ToolOperation({ toolCalls, isGrouped = false, autoMinimize = tru
                                     ease: motionEasing.smooth,
                                 }), className: "h-3 w-3 text-text-secondary/70 group-hover:text-text-secondary transition-colors", children: _jsx(ChevronDown, { className: "h-3 w-3" }) }))] }), !isGrouped &&
                         singleToolCall &&
-                        (isTodoWrite && singleToolCall.rawInput?.todos ? (_jsx(TodoSubline, { todos: singleToolCall.rawInput.todos, className: "text-paragraph-sm text-text-secondary/70 pl-4.5" })) : singleToolCall.subline ? (_jsx("span", { className: "text-paragraph-sm text-text-secondary/70 pl-4.5", children: singleToolCall.subline })) : null), isGrouped && !isExpanded && (_jsx("span", { className: "text-paragraph-sm text-text-secondary/70 pl-4.5", children: displayText }))] }), !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 }) })), _jsx(AnimatePresence, { initial: false, children: !isTodoWrite && isExpanded && (_jsx(motion.div, { initial: "collapsed", animate: "expanded", exit: "collapsed", variants: expandCollapseVariants, transition: getTransition(shouldReduceMotion ?? false, {
+                        (isTodoWrite && singleToolCall.rawInput?.todos ? (_jsx(TodoSubline, { todos: singleToolCall.rawInput.todos, className: "text-paragraph-sm text-text-secondary/70 pl-4.5" })) : singleToolCall.subline ? (_jsx("span", { className: "text-paragraph-sm text-text-secondary/70 pl-4.5", children: singleToolCall.subline })) : null), !isGrouped && toolHookNotification && (_jsx("span", { className: "text-paragraph-sm text-text-secondary/70 pl-4.5", children: toolHookNotification.status === "triggered"
+                            ? "Compacting response..."
+                            : toolHookNotification.status === "completed"
+                                ? toolHookNotification.metadata?.action === "no_action_needed"
+                                    ? `Response checked (${toolHookNotification.currentPercentage?.toFixed(0)}% context)`
+                                    : toolHookNotification.metadata?.tokensSaved
+                                        ? `Response compacted (${((toolHookNotification.metadata.tokensSaved / (toolHookNotification.metadata.originalTokens || 1)) * 100).toFixed(0)}% reduced)`
+                                        : "Response compacted"
+                                : toolHookNotification.status === "error"
+                                    ? `Compaction error: ${toolHookNotification.error}`
+                                    : null })), isGrouped && !isExpanded && (_jsx("span", { className: "text-paragraph-sm text-text-secondary/70 pl-4.5", children: displayText })), isGrouped &&
+                        hookNotifications.length > 0 &&
+                        (() => {
+                            const compactedCount = hookNotifications.filter((n) => n.status === "completed" &&
+                                n.metadata?.action !== "no_action_needed").length;
+                            const runningCount = hookNotifications.filter((n) => n.status === "triggered").length;
+                            if (runningCount > 0) {
+                                return (_jsxs("span", { className: "text-paragraph-sm text-text-secondary/70 pl-4.5", children: ["Compacting ", runningCount, " response", runningCount > 1 ? "s" : "", "..."] }));
+                            }
+                            if (compactedCount > 0) {
+                                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 }) })), _jsx(AnimatePresence, { initial: false, children: !isTodoWrite && isExpanded && (_jsx(motion.div, { initial: "collapsed", animate: "expanded", exit: "collapsed", variants: expandCollapseVariants, transition: getTransition(shouldReduceMotion ?? false, {
                         duration: motionDuration.normal,
                         ease: motionEasing.smooth,
                     }), 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) => (_jsx(GroupedToolCallItem, { toolCall: toolCall }, toolCall.id))) })) : (
+                    _jsx("div", { className: "flex flex-col gap-4 mt-2", children: toolCalls.map((toolCall) => {
+                            const hookNotification = hookNotifications.find((n) => n.toolCallId === toolCall.id);
+                            return (_jsx(GroupedToolCallItem, { toolCall: toolCall, ...(hookNotification ? { hookNotification } : {}) }, toolCall.id));
+                        }) })) : (
                     // Render single tool call details
-                    singleToolCall && (_jsx(ToolOperationDetails, { toolCall: singleToolCall }))) }, "expanded-content")) })] }));
+                    singleToolCall && (_jsx(ToolOperationDetails, { toolCall: singleToolCall, ...(toolHookNotification
+                            ? { hookNotification: toolHookNotification }
+                            : {}) }))) }, "expanded-content")) })] }));
 }
 /**
  * Component to render a single tool call within a grouped parallel operation
  * Handles subagent calls with their own expansion state
  */
-function GroupedToolCallItem({ toolCall }) {
+function GroupedToolCallItem({ toolCall, hookNotification, }) {
     const [isSubagentExpanded, setIsSubagentExpanded] = useState(false);
     // Detect subagent calls
     const hasLiveSubagent = !!(toolCall.subagentPort && toolCall.subagentSessionId);
@@ -216,12 +248,12 @@ function GroupedToolCallItem({ toolCall }) {
         return (_jsxs("div", { className: "flex flex-col ml-5", children: [_jsxs("button", { type: "button", className: "flex items-center gap-1.5 cursor-pointer bg-transparent border-none p-0 text-left group w-fit", onClick: () => setIsSubagentExpanded(!isSubagentExpanded), "aria-expanded": isSubagentExpanded, children: [_jsx("div", { className: "text-text-secondary/70 group-hover:text-text-secondary transition-colors", children: _jsx(CircleDot, { className: "h-3 w-3" }) }), _jsx("span", { className: "text-paragraph-sm text-text-secondary/70 group-hover:text-text-secondary transition-colors", children: toolCall.rawInput?.agentName || "Subagent" }), _jsx(ChevronDown, { className: `h-3 w-3 text-text-secondary/70 group-hover:text-text-secondary transition-colors transition-transform duration-200 ${isSubagentExpanded ? "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: isSubagentExpanded, onExpandChange: setIsSubagentExpanded, storedMessages: toolCall.subagentMessages, isReplay: isReplaySubagent }) })] }));
     }
     // Regular tool call - show details
-    return (_jsx("div", { className: "flex items-start gap-1.5", children: _jsx("div", { className: "flex-1 ml-5", children: _jsx(ToolOperationDetails, { toolCall: toolCall }) }) }));
+    return (_jsx("div", { className: "flex items-start gap-1.5", children: _jsx("div", { className: "flex-1 ml-5", children: _jsx(ToolOperationDetails, { toolCall: toolCall, ...(hookNotification ? { hookNotification } : {}) }) }) }));
 }
 /**
  * Component to display detailed tool call information
  */
-function ToolOperationDetails({ toolCall }) {
+function ToolOperationDetails({ toolCall, hookNotification, }) {
     const { resolvedTheme } = useTheme();
     // Don't show details for preliminary tool calls
     if (isPreliminaryToolCall(toolCall)) {
@@ -328,5 +360,10 @@ function ToolOperationDetails({ toolCall }) {
                                                         `:${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()));
                                 }
                                 return null;
-                            }), toolCall.error && (_jsxs("div", { className: "text-destructive font-mono text-[11px] mt-2", children: ["Error: ", toolCall.error] }))] })] })), 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-b border-border last:border-0 flex flex-wrap gap-4 text-[10px] text-text-secondary 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)"] }))] }))] }))] }));
+                            }), toolCall.error && (_jsxs("div", { className: "text-destructive font-mono text-[11px] mt-2", children: ["Error: ", toolCall.error] }))] })] })), 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 })] })), hookNotification &&
+                hookNotification.status === "completed" &&
+                hookNotification.metadata?.action !== "no_action_needed" && (_jsxs("div", { className: "p-3 border-b border-border last:border-0", children: [_jsx("div", { className: "text-[10px] font-bold text-text-secondary uppercase tracking-wider mb-1.5 font-sans", children: "Response Compaction" }), _jsxs("div", { className: "space-y-1 text-[11px]", children: [hookNotification.metadata?.originalTokens !== undefined && (_jsxs("div", { className: "flex gap-2", children: [_jsx("span", { className: "text-text-secondary", children: "Original:" }), _jsxs("span", { className: "text-foreground", children: [hookNotification.metadata.originalTokens.toLocaleString(), " ", "tokens"] })] })), hookNotification.metadata?.finalTokens !== undefined && (_jsxs("div", { className: "flex gap-2", children: [_jsx("span", { className: "text-text-secondary", children: "Compacted:" }), _jsxs("span", { className: "text-foreground", children: [hookNotification.metadata.finalTokens.toLocaleString(), " ", "tokens"] })] })), hookNotification.metadata?.tokensSaved !== undefined && (_jsxs("div", { className: "flex gap-2", children: [_jsx("span", { className: "text-text-secondary", children: "Saved:" }), _jsxs("span", { className: "text-green-500 font-medium", children: [hookNotification.metadata.tokensSaved.toLocaleString(), " ", "tokens", hookNotification.metadata?.originalTokens && (_jsxs("span", { className: "text-text-secondary font-normal ml-1", children: ["(", ((hookNotification.metadata.tokensSaved /
+                                                        hookNotification.metadata
+                                                            .originalTokens) *
+                                                        100).toFixed(0), "% reduced)"] }))] })] }))] })] })), (toolCall.tokenUsage || toolCall.startedAt) && (_jsxs("div", { className: "p-2 bg-muted/50 border-b border-border last:border-0 flex flex-wrap gap-4 text-[10px] text-text-secondary 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/sdk/schemas/message.d.ts

@@ -284,6 +284,7 @@ export declare const HookTriggeredNotification: z.ZodObject<{
     currentPercentage: z.ZodNumber;
     callback: z.ZodString;
     triggeredAt: z.ZodOptional<z.ZodNumber>;
+    toolCallId: z.ZodOptional<z.ZodString>;
 }, z.core.$strip>;
 export type HookTriggeredNotification = z.infer<typeof HookTriggeredNotification>;
 /**
@@ -302,6 +303,7 @@ export declare const HookCompletedNotification: z.ZodObject<{
         tokensSaved: z.ZodOptional<z.ZodNumber>;
     }, z.core.$loose>>;
     completedAt: z.ZodOptional<z.ZodNumber>;
+    toolCallId: z.ZodOptional<z.ZodString>;
 }, z.core.$strip>;
 export type HookCompletedNotification = z.infer<typeof HookCompletedNotification>;
 /**
@@ -316,6 +318,7 @@ export declare const HookErrorNotification: z.ZodObject<{
     callback: z.ZodString;
     error: z.ZodString;
     completedAt: z.ZodOptional<z.ZodNumber>;
+    toolCallId: z.ZodOptional<z.ZodString>;
 }, z.core.$strip>;
 export type HookErrorNotification = z.infer<typeof HookErrorNotification>;
 /**
@@ -331,6 +334,7 @@ export declare const HookNotification: z.ZodDiscriminatedUnion<[z.ZodObject<{
     currentPercentage: z.ZodNumber;
     callback: z.ZodString;
     triggeredAt: z.ZodOptional<z.ZodNumber>;
+    toolCallId: z.ZodOptional<z.ZodString>;
 }, z.core.$strip>, z.ZodObject<{
     type: z.ZodLiteral<"hook_completed">;
     hookType: z.ZodEnum<{
@@ -344,6 +348,7 @@ export declare const HookNotification: z.ZodDiscriminatedUnion<[z.ZodObject<{
         tokensSaved: z.ZodOptional<z.ZodNumber>;
     }, z.core.$loose>>;
     completedAt: z.ZodOptional<z.ZodNumber>;
+    toolCallId: z.ZodOptional<z.ZodString>;
 }, z.core.$strip>, z.ZodObject<{
     type: z.ZodLiteral<"hook_error">;
     hookType: z.ZodEnum<{
@@ -353,6 +358,7 @@ export declare const HookNotification: z.ZodDiscriminatedUnion<[z.ZodObject<{
     callback: z.ZodString;
     error: z.ZodString;
     completedAt: z.ZodOptional<z.ZodNumber>;
+    toolCallId: z.ZodOptional<z.ZodString>;
 }, z.core.$strip>], "type">;
 export type HookNotification = z.infer<typeof HookNotification>;
 /**
@@ -371,6 +377,7 @@ export declare const HookNotificationChunk: z.ZodObject<{
         currentPercentage: z.ZodNumber;
         callback: z.ZodString;
         triggeredAt: z.ZodOptional<z.ZodNumber>;
+        toolCallId: z.ZodOptional<z.ZodString>;
     }, z.core.$strip>, z.ZodObject<{
         type: z.ZodLiteral<"hook_completed">;
         hookType: z.ZodEnum<{
@@ -384,6 +391,7 @@ export declare const HookNotificationChunk: z.ZodObject<{
             tokensSaved: z.ZodOptional<z.ZodNumber>;
         }, z.core.$loose>>;
         completedAt: z.ZodOptional<z.ZodNumber>;
+        toolCallId: z.ZodOptional<z.ZodString>;
     }, z.core.$strip>, z.ZodObject<{
         type: z.ZodLiteral<"hook_error">;
         hookType: z.ZodEnum<{
@@ -393,6 +401,7 @@ export declare const HookNotificationChunk: z.ZodObject<{
         callback: z.ZodString;
         error: z.ZodString;
         completedAt: z.ZodOptional<z.ZodNumber>;
+        toolCallId: z.ZodOptional<z.ZodString>;
     }, z.core.$strip>], "type">;
     messageId: z.ZodOptional<z.ZodString>;
 }, z.core.$strip>;
@@ -484,6 +493,7 @@ export declare const MessageChunk: z.ZodDiscriminatedUnion<[z.ZodObject<{
         currentPercentage: z.ZodNumber;
         callback: z.ZodString;
         triggeredAt: z.ZodOptional<z.ZodNumber>;
+        toolCallId: z.ZodOptional<z.ZodString>;
     }, z.core.$strip>, z.ZodObject<{
         type: z.ZodLiteral<"hook_completed">;
         hookType: z.ZodEnum<{
@@ -497,6 +507,7 @@ export declare const MessageChunk: z.ZodDiscriminatedUnion<[z.ZodObject<{
             tokensSaved: z.ZodOptional<z.ZodNumber>;
         }, z.core.$loose>>;
         completedAt: z.ZodOptional<z.ZodNumber>;
+        toolCallId: z.ZodOptional<z.ZodString>;
     }, z.core.$strip>, z.ZodObject<{
         type: z.ZodLiteral<"hook_error">;
         hookType: z.ZodEnum<{
@@ -506,6 +517,7 @@ export declare const MessageChunk: z.ZodDiscriminatedUnion<[z.ZodObject<{
         callback: z.ZodString;
         error: z.ZodString;
         completedAt: z.ZodOptional<z.ZodNumber>;
+        toolCallId: z.ZodOptional<z.ZodString>;
     }, z.core.$strip>], "type">;
     messageId: z.ZodOptional<z.ZodString>;
 }, z.core.$strip>], "type">;

package/dist/sdk/schemas/message.js

@@ -161,6 +161,7 @@ export const HookTriggeredNotification = z.object({
     currentPercentage: z.number(),
     callback: z.string(),
     triggeredAt: z.number().optional(), // Unix timestamp (ms) from backend
+    toolCallId: z.string().optional(), // For tool_response hooks - associates notification with tool call
 });
 /**
  * Hook completed notification
@@ -178,6 +179,7 @@ export const HookCompletedNotification = z.object({
         .passthrough()
         .optional(),
     completedAt: z.number().optional(), // Unix timestamp (ms) from backend
+    toolCallId: z.string().optional(), // For tool_response hooks - associates notification with tool call
 });
 /**
  * Hook error notification
@@ -188,6 +190,7 @@ export const HookErrorNotification = z.object({
     callback: z.string(),
     error: z.string(),
     completedAt: z.number().optional(), // Unix timestamp (ms) from backend
+    toolCallId: z.string().optional(), // For tool_response hooks - associates notification with tool call
 });
 /**
  * Union of all hook notification types

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

@@ -4,12 +4,12 @@ import { z } from "zod";
  */
 export declare const SessionStatus: z.ZodEnum<{
     error: "error";
-    idle: "idle";
+    active: "active";
+    disconnected: "disconnected";
     connecting: "connecting";
     connected: "connected";
-    active: "active";
+    idle: "idle";
     streaming: "streaming";
-    disconnected: "disconnected";
 }>;
 export type SessionStatus = z.infer<typeof SessionStatus>;
 /**
@@ -41,12 +41,12 @@ export declare const Session: z.ZodObject<{
     id: z.ZodString;
     status: z.ZodEnum<{
         error: "error";
-        idle: "idle";
+        active: "active";
+        disconnected: "disconnected";
         connecting: "connecting";
         connected: "connected";
-        active: "active";
+        idle: "idle";
         streaming: "streaming";
-        disconnected: "disconnected";
     }>;
     config: z.ZodObject<{
         agentPath: z.ZodString;
@@ -117,12 +117,12 @@ export declare const SessionUpdate: z.ZodUnion<readonly [z.ZodObject<{
     sessionId: z.ZodString;
     status: z.ZodOptional<z.ZodEnum<{
         error: "error";
-        idle: "idle";
+        active: "active";
+        disconnected: "disconnected";
         connecting: "connecting";
         connected: "connected";
-        active: "active";
+        idle: "idle";
         streaming: "streaming";
-        disconnected: "disconnected";
     }>>;
     message: z.ZodOptional<z.ZodObject<{
         id: z.ZodString;
@@ -197,9 +197,9 @@ export declare const SessionUpdate: z.ZodUnion<readonly [z.ZodObject<{
             other: "other";
         }>;
         status: z.ZodEnum<{
+            completed: "completed";
             pending: "pending";
             in_progress: "in_progress";
-            completed: "completed";
             failed: "failed";
         }>;
         contentPosition: z.ZodOptional<z.ZodNumber>;
@@ -265,9 +265,9 @@ export declare const SessionUpdate: z.ZodUnion<readonly [z.ZodObject<{
                 prettyName: z.ZodOptional<z.ZodString>;
                 icon: z.ZodOptional<z.ZodString>;
                 status: z.ZodEnum<{
+                    completed: "completed";
                     pending: "pending";
                     in_progress: "in_progress";
-                    completed: "completed";
                     failed: "failed";
                 }>;
                 content: z.ZodOptional<z.ZodArray<z.ZodDiscriminatedUnion<[z.ZodObject<{
@@ -310,9 +310,9 @@ export declare const SessionUpdate: z.ZodUnion<readonly [z.ZodObject<{
                     prettyName: z.ZodOptional<z.ZodString>;
                     icon: z.ZodOptional<z.ZodString>;
                     status: z.ZodEnum<{
+                        completed: "completed";
                         pending: "pending";
                         in_progress: "in_progress";
-                        completed: "completed";
                         failed: "failed";
                     }>;
                     content: z.ZodOptional<z.ZodArray<z.ZodDiscriminatedUnion<[z.ZodObject<{
@@ -354,12 +354,12 @@ export declare const SessionUpdate: z.ZodUnion<readonly [z.ZodObject<{
     sessionId: z.ZodString;
     status: z.ZodOptional<z.ZodEnum<{
         error: "error";
-        idle: "idle";
+        active: "active";
+        disconnected: "disconnected";
         connecting: "connecting";
         connected: "connected";
-        active: "active";
+        idle: "idle";
         streaming: "streaming";
-        disconnected: "disconnected";
     }>>;
     message: z.ZodOptional<z.ZodObject<{
         id: z.ZodString;
@@ -412,9 +412,9 @@ export declare const SessionUpdate: z.ZodUnion<readonly [z.ZodObject<{
     toolCallUpdate: z.ZodObject<{
         id: z.ZodString;
         status: z.ZodOptional<z.ZodEnum<{
+            completed: "completed";
             pending: "pending";
             in_progress: "in_progress";
-            completed: "completed";
             failed: "failed";
         }>>;
         title: z.ZodOptional<z.ZodString>;
@@ -473,9 +473,9 @@ export declare const SessionUpdate: z.ZodUnion<readonly [z.ZodObject<{
                 prettyName: z.ZodOptional<z.ZodString>;
                 icon: z.ZodOptional<z.ZodString>;
                 status: z.ZodEnum<{
+                    completed: "completed";
                     pending: "pending";
                     in_progress: "in_progress";
-                    completed: "completed";
                     failed: "failed";
                 }>;
                 content: z.ZodOptional<z.ZodArray<z.ZodDiscriminatedUnion<[z.ZodObject<{
@@ -518,9 +518,9 @@ export declare const SessionUpdate: z.ZodUnion<readonly [z.ZodObject<{
                     prettyName: z.ZodOptional<z.ZodString>;
                     icon: z.ZodOptional<z.ZodString>;
                     status: z.ZodEnum<{
+                        completed: "completed";
                         pending: "pending";
                         in_progress: "in_progress";
-                        completed: "completed";
                         failed: "failed";
                     }>;
                     content: z.ZodOptional<z.ZodArray<z.ZodDiscriminatedUnion<[z.ZodObject<{
@@ -561,12 +561,12 @@ export declare const SessionUpdate: z.ZodUnion<readonly [z.ZodObject<{
     sessionId: z.ZodString;
     status: z.ZodOptional<z.ZodEnum<{
         error: "error";
-        idle: "idle";
+        active: "active";
+        disconnected: "disconnected";
         connecting: "connecting";
         connected: "connected";
-        active: "active";
+        idle: "idle";
         streaming: "streaming";
-        disconnected: "disconnected";
     }>>;
     message: z.ZodOptional<z.ZodObject<{
         id: z.ZodString;
@@ -626,12 +626,12 @@ export declare const SessionUpdate: z.ZodUnion<readonly [z.ZodObject<{
     sessionId: z.ZodString;
     status: z.ZodOptional<z.ZodEnum<{
         error: "error";
-        idle: "idle";
+        active: "active";
+        disconnected: "disconnected";
         connecting: "connecting";
         connected: "connected";
-        active: "active";
+        idle: "idle";
         streaming: "streaming";
-        disconnected: "disconnected";
     }>>;
     message: z.ZodOptional<z.ZodObject<{
         id: z.ZodString;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@townco/ui",
-  "version": "0.1.75",
+  "version": "0.1.76",
   "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.53",
+    "@townco/core": "0.0.54",
     "@uiw/react-json-view": "^2.0.0-alpha.39",
     "bun": "^1.3.1",
     "class-variance-authority": "^0.7.1",
@@ -67,7 +67,7 @@
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4.1.17",
-    "@townco/tsconfig": "0.1.72",
+    "@townco/tsconfig": "0.1.73",
     "@types/node": "^24.10.0",
     "@types/react": "^19.2.2",
     "ink": "^6.4.0",