@townco/ui 0.1.70 → 0.1.72

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/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?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
+    variant?: "default" | "link" | "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/TodoList.js

@@ -16,6 +16,6 @@ export const TodoList = React.forwardRef(({ client, todos, className, ...props }
     if (todosToDisplay.length === 0) {
         return (_jsx("div", { ref: ref, className: cn("h-full", className), ...props, children: _jsx(TodoListEmptyState, {}) }));
     }
-    return (_jsx("div", { ref: ref, className: cn("space-y-2 max-h-64 overflow-y-auto", className), ...props, children: todosToDisplay.map((todo) => (_jsx(TodoListItem, { todo: todo }, todo.id))) }));
+    return (_jsx("div", { ref: ref, className: cn("space-y-2 overflow-y-auto", className), ...props, children: todosToDisplay.map((todo) => (_jsx(TodoListItem, { todo: todo }, todo.id))) }));
 });
 TodoList.displayName = "TodoList";

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

@@ -0,0 +1,11 @@
+interface TodoItem {
+    content: string;
+    status: "pending" | "in_progress" | "completed";
+    activeForm?: string;
+}
+interface TodoSublineProps {
+    todos: TodoItem[];
+    className?: string;
+}
+export declare function TodoSubline({ todos, className }: TodoSublineProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/gui/components/TodoSubline.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Circle, CircleCheck } from "lucide-react";
+import * as React from "react";
+import { cn } from "../lib/utils.js";
+export function TodoSubline({ todos, className }) {
+    if (!todos || todos.length === 0)
+        return null;
+    // Find the most important item to display
+    // Priority: in_progress > completed > first item
+    const displayItem = React.useMemo(() => {
+        const inProgress = todos.find((t) => t.status === "in_progress");
+        if (inProgress)
+            return inProgress;
+        const completed = todos.find((t) => t.status === "completed");
+        if (completed)
+            return completed;
+        return todos[0];
+    }, [todos]);
+    if (!displayItem)
+        return null;
+    const displayText = displayItem.status === "in_progress"
+        ? displayItem.activeForm || displayItem.content
+        : displayItem.content;
+    return (_jsxs("span", { className: cn("flex items-center gap-1.5", className), children: [displayItem.status === "completed" ? (_jsx(CircleCheck, { className: "size-3 text-muted-foreground shrink-0" })) : displayItem.status === "in_progress" ? (_jsx("span", { className: "size-2 rounded-full bg-foreground animate-pulse-scale shrink-0" })) : (_jsx(Circle, { className: "size-3 text-foreground shrink-0" })), _jsx("span", { className: "truncate", children: displayText })] }));
+}

package/dist/gui/components/ToolOperation.js

@@ -10,6 +10,7 @@ import { cn } from "../lib/utils.js";
 import * as ChatLayout from "./ChatLayout.js";
 import { SubAgentDetails } from "./SubAgentDetails.js";
 import { useTheme } from "./ThemeProvider.js";
+import { TodoSubline } from "./TodoSubline.js";
 /**
  * Map of icon names to Lucide components
  */
@@ -188,7 +189,9 @@ export function ToolOperation({ toolCalls, isGrouped = false, autoMinimize = tru
                                 }, transition: getTransition(shouldReduceMotion ?? false, {
                                     duration: motionDuration.normal,
                                     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?.subline && (_jsx("span", { className: "text-paragraph-sm text-text-secondary/70 pl-4.5", children: singleToolCall.subline })), 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, {
+                                }), 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, {
                         duration: motionDuration.normal,
                         ease: motionEasing.smooth,
                     }), className: "mt-1", children: isGrouped ? (

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

@@ -49,6 +49,7 @@ export { ThemeToggle } from "./ThemeToggle.js";
 export { ThinkingBlock, type ThinkingBlockProps, } from "./ThinkingBlock.js";
 export { TodoList, type TodoListProps } from "./TodoList.js";
 export { type TodoItem, TodoListItem, type TodoListItemProps, } from "./TodoListItem.js";
+export { TodoSubline } from "./TodoSubline.js";
 export { ToolCallList, type ToolCallListProps } from "./ToolCallList.js";
 export { ToolOperation, type ToolOperationProps } from "./ToolOperation.js";
 export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "./Tooltip.js";

package/dist/gui/components/index.js

@@ -57,6 +57,7 @@ export { ThemeToggle } from "./ThemeToggle.js";
 export { ThinkingBlock, } from "./ThinkingBlock.js";
 export { TodoList } from "./TodoList.js";
 export { TodoListItem, } from "./TodoListItem.js";
+export { TodoSubline } from "./TodoSubline.js";
 export { ToolCallList } from "./ToolCallList.js";
 export { ToolOperation } from "./ToolOperation.js";
 // Tooltip components

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

@@ -13,9 +13,9 @@ export type MessageRole = z.infer<typeof MessageRole>;
  * Content type for messages
  */
 export declare const ContentType: z.ZodEnum<{
+    file: "file";
     text: "text";
     image: "image";
-    file: "file";
     tool_call: "tool_call";
     tool_result: "tool_result";
 }>;
@@ -25,9 +25,9 @@ export type ContentType = z.infer<typeof ContentType>;
  */
 export declare const BaseContent: z.ZodObject<{
     type: z.ZodEnum<{
+        file: "file";
         text: "text";
         image: "image";
-        file: "file";
         tool_call: "tool_call";
         tool_result: "tool_result";
     }>;

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

@@ -4,10 +4,10 @@ import { z } from "zod";
  */
 export declare const SessionStatus: z.ZodEnum<{
     error: "error";
+    active: "active";
     idle: "idle";
     connecting: "connecting";
     connected: "connected";
-    active: "active";
     streaming: "streaming";
     disconnected: "disconnected";
 }>;
@@ -41,10 +41,10 @@ export declare const Session: z.ZodObject<{
     id: z.ZodString;
     status: z.ZodEnum<{
         error: "error";
+        active: "active";
         idle: "idle";
         connecting: "connecting";
         connected: "connected";
-        active: "active";
         streaming: "streaming";
         disconnected: "disconnected";
     }>;
@@ -117,10 +117,10 @@ export declare const SessionUpdate: z.ZodUnion<readonly [z.ZodObject<{
     sessionId: z.ZodString;
     status: z.ZodOptional<z.ZodEnum<{
         error: "error";
+        active: "active";
         idle: "idle";
         connecting: "connecting";
         connected: "connected";
-        active: "active";
         streaming: "streaming";
         disconnected: "disconnected";
     }>>;
@@ -354,10 +354,10 @@ export declare const SessionUpdate: z.ZodUnion<readonly [z.ZodObject<{
     sessionId: z.ZodString;
     status: z.ZodOptional<z.ZodEnum<{
         error: "error";
+        active: "active";
         idle: "idle";
         connecting: "connecting";
         connected: "connected";
-        active: "active";
         streaming: "streaming";
         disconnected: "disconnected";
     }>>;
@@ -561,10 +561,10 @@ export declare const SessionUpdate: z.ZodUnion<readonly [z.ZodObject<{
     sessionId: z.ZodString;
     status: z.ZodOptional<z.ZodEnum<{
         error: "error";
+        active: "active";
         idle: "idle";
         connecting: "connecting";
         connected: "connected";
-        active: "active";
         streaming: "streaming";
         disconnected: "disconnected";
     }>>;
@@ -626,10 +626,10 @@ export declare const SessionUpdate: z.ZodUnion<readonly [z.ZodObject<{
     sessionId: z.ZodString;
     status: z.ZodOptional<z.ZodEnum<{
         error: "error";
+        active: "active";
         idle: "idle";
         connecting: "connecting";
         connected: "connected";
-        active: "active";
         streaming: "streaming";
         disconnected: "disconnected";
     }>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@townco/ui",
-  "version": "0.1.70",
+  "version": "0.1.72",
   "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.48",
+    "@townco/core": "0.0.50",
     "@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.67",
+    "@townco/tsconfig": "0.1.69",
     "@types/node": "^24.10.0",
     "@types/react": "^19.2.2",
     "ink": "^6.4.0",

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

@@ -1,9 +0,0 @@
-import type { HookNotificationDisplay } from "../../core/schemas/chat.js";
-export interface HookNotificationProps {
-    notification: HookNotificationDisplay;
-}
-/**
- * HookNotification component - displays a hook notification inline with messages
- * Only shows completed or error states (not intermediate "triggered" state)
- */
-export declare function HookNotification({ notification }: HookNotificationProps): import("react/jsx-runtime").JSX.Element;

package/dist/gui/components/HookNotification.js

@@ -1,50 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { AlertCircle, Archive, CheckCircle2, ChevronDown, Scissors, } from "lucide-react";
-import React, { useState } from "react";
-/**
- * Get display information for a hook type
- */
-function getHookDisplayInfo(hookType, _callback) {
-    if (hookType === "context_size") {
-        return {
-            icon: Archive,
-            title: "Context Compacted",
-        };
-    }
-    if (hookType === "tool_response") {
-        return {
-            icon: Scissors,
-            title: "Tool Response Compacted",
-        };
-    }
-    // Fallback for unknown hook types
-    return {
-        icon: Archive,
-        title: `Hook Executed`,
-    };
-}
-/**
- * Format a number with thousand separators
- */
-function formatNumber(num) {
-    return num.toLocaleString();
-}
-/**
- * HookNotification component - displays a hook notification inline with messages
- * Only shows completed or error states (not intermediate "triggered" state)
- */
-export function HookNotification({ notification }) {
-    const [isExpanded, setIsExpanded] = useState(false);
-    const { icon: IconComponent, title } = getHookDisplayInfo(notification.hookType, notification.callback);
-    const isCompleted = notification.status === "completed";
-    const isError = notification.status === "error";
-    // Build subtitle showing key info
-    let subtitle = "";
-    if (isCompleted && notification.metadata?.tokensSaved !== undefined) {
-        subtitle = `${formatNumber(notification.metadata.tokensSaved)} tokens saved`;
-    }
-    else if (isError && notification.error) {
-        subtitle = notification.error;
-    }
-    return (_jsxs("div", { className: "flex flex-col my-3", 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: isError ? "text-destructive" : "text-muted-foreground", children: _jsx(IconComponent, { className: "h-3 w-3" }) }), _jsx("span", { className: "text-paragraph-sm text-muted-foreground", children: title }), isCompleted && _jsx(CheckCircle2, { className: "h-3 w-3 text-green-500" }), isError && _jsx(AlertCircle, { className: "h-3 w-3 text-destructive" }), _jsx(ChevronDown, { className: `h-3 w-3 text-muted-foreground/70 transition-transform duration-200 ${isExpanded ? "rotate-180" : ""}` })] }), subtitle && (_jsx("span", { className: `text-paragraph-sm pl-4.5 ${isError ? "text-destructive/70" : "text-muted-foreground/70"}`, children: subtitle }))] }), isExpanded && (_jsxs("div", { className: "mt-2 text-sm border border-border rounded-lg bg-card overflow-hidden w-full", children: [_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: "Hook Details" }), _jsxs("div", { className: "space-y-1 text-[11px]", children: [_jsxs("div", { className: "flex gap-2", children: [_jsx("span", { className: "text-muted-foreground", children: "Type:" }), _jsx("span", { className: "text-foreground font-mono", children: notification.hookType })] }), _jsxs("div", { className: "flex gap-2", children: [_jsx("span", { className: "text-muted-foreground", children: "Callback:" }), _jsx("span", { className: "text-foreground font-mono", children: notification.callback })] })] })] }), notification.metadata && (_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: "Result" }), _jsxs("div", { className: "space-y-1 text-[11px]", children: [notification.metadata.action && (_jsxs("div", { className: "flex gap-2", children: [_jsx("span", { className: "text-muted-foreground", children: "Action:" }), _jsx("span", { className: "text-foreground", children: notification.metadata.action })] })), notification.metadata.messagesRemoved !== undefined && (_jsxs("div", { className: "flex gap-2", children: [_jsx("span", { className: "text-muted-foreground", children: "Messages Removed:" }), _jsx("span", { className: "text-foreground", children: formatNumber(notification.metadata.messagesRemoved) })] })), notification.metadata.tokensSaved !== undefined && (_jsxs("div", { className: "flex gap-2", children: [_jsx("span", { className: "text-muted-foreground", children: "Tokens Saved:" }), _jsx("span", { className: "text-green-500 font-medium", children: formatNumber(notification.metadata.tokensSaved) })] }))] })] })), notification.error && (_jsxs("div", { className: "p-3 border-b border-border last:border-0", children: [_jsx("div", { className: "text-[10px] font-bold text-destructive uppercase tracking-wider mb-1.5 font-sans", children: "Error" }), _jsx("div", { className: "text-[11px] text-destructive font-mono", children: notification.error })] })), notification.completedAt && (_jsxs("div", { className: "p-2 bg-muted/50 border-t border-border text-[10px] text-muted-foreground font-sans", children: ["Executed:", " ", new Date(notification.completedAt).toLocaleTimeString()] }))] }))] }));
-}

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

@@ -1,9 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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/SubagentStream.d.ts

@@ -1,23 +0,0 @@
-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

@@ -1,98 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

@@ -1,234 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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))) }))] }));
-}