@townco/ui 0.1.68 → 0.1.70

package/dist/gui/components/ToolOperation.js

@@ -0,0 +1,329 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import JsonView from "@uiw/react-json-view";
+import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
+import { AlertCircle, BrainCircuit, CheckSquare, ChevronDown, ChevronRight, CircleDot, Cloud, Edit, FileText, Globe, Image, Link, ListVideo, Search, Wrench, } from "lucide-react";
+import React, { useEffect, useState } from "react";
+import { areAllToolCallsCompleted, getGroupDisplayState, getToolCallDisplayState, getToolCallStateVerbiage, hasAnyToolCallFailed, isPreliminaryToolCall, } from "../../core/utils/tool-call-state.js";
+import { generateSmartSummary } from "../../core/utils/tool-summary.js";
+import { expandCollapseVariants, fadeInVariants, getDuration, getTransition, motionDuration, motionEasing, rotateVariants, shimmerTransition, standardTransition, } from "../lib/motion.js";
+import { cn } from "../lib/utils.js";
+import * as ChatLayout from "./ChatLayout.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,
+    BrainCircuit: BrainCircuit,
+    CircleDot: CircleDot,
+};
+/**
+ * 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, }) {
+    const [isExpanded, setIsExpanded] = useState(false);
+    const [isMinimized, setIsMinimized] = useState(false);
+    const [userInteracted, setUserInteracted] = useState(false);
+    const { resolvedTheme } = useTheme();
+    const shouldReduceMotion = useReducedMotion();
+    // For single tool call, extract it
+    const singleToolCall = toolCalls.length === 1 ? toolCalls[0] : null;
+    const isTodoWrite = singleToolCall?.title === "todo_write";
+    // Detect subagent calls
+    const hasLiveSubagent = !!(singleToolCall?.subagentPort && singleToolCall?.subagentSessionId);
+    const hasStoredSubagent = !!(singleToolCall?.subagentMessages &&
+        singleToolCall.subagentMessages.length > 0);
+    const isSubagentCall = hasLiveSubagent || hasStoredSubagent;
+    const isReplaySubagent = hasStoredSubagent;
+    // State for subagent expansion
+    const [isSubagentExpanded, setIsSubagentExpanded] = useState(false);
+    // Safely access ChatLayout context
+    const layoutContext = React.useContext(ChatLayout.Context);
+    // Determine display state
+    const displayState = isGrouped
+        ? getGroupDisplayState(toolCalls)
+        : singleToolCall
+            ? getToolCallDisplayState(singleToolCall)
+            : "executing";
+    const isCompleted = displayState === "completed";
+    const isFailed = displayState === "failed";
+    const isSelecting = displayState === "selecting";
+    const isActive = displayState === "executing";
+    // Auto-minimize when completed (only if user hasn't manually interacted)
+    useEffect(() => {
+        if (autoMinimize && isCompleted && !isMinimized && !userInteracted) {
+            // Small delay to show the completed state briefly
+            const timer = setTimeout(() => {
+                setIsMinimized(true);
+                setIsExpanded(false);
+            }, 500);
+            return () => clearTimeout(timer);
+        }
+        return undefined;
+    }, [autoMinimize, isCompleted, isMinimized, userInteracted]);
+    // Click handler for header
+    const handleHeaderClick = React.useCallback(() => {
+        if (isTodoWrite && layoutContext && singleToolCall) {
+            // Toggle sidepanel for TodoWrite
+            if (layoutContext.panelSize !== "hidden" &&
+                layoutContext.activeTab === "todo") {
+                layoutContext.setPanelSize("hidden");
+            }
+            else {
+                layoutContext.setPanelSize("small");
+                layoutContext.setActiveTab("todo");
+            }
+        }
+        else if (isSubagentCall) {
+            // Toggle subagent expansion
+            setUserInteracted(true);
+            setIsSubagentExpanded(!isSubagentExpanded);
+        }
+        else {
+            // Normal expand/collapse
+            setUserInteracted(true); // Mark as user-interacted to prevent auto-minimize
+            setIsExpanded(!isExpanded);
+            if (isMinimized) {
+                setIsMinimized(false);
+            }
+        }
+    }, [
+        isTodoWrite,
+        layoutContext,
+        isExpanded,
+        isMinimized,
+        singleToolCall,
+        isSubagentCall,
+        isSubagentExpanded,
+    ]);
+    // Get icon for display
+    const getIcon = () => {
+        if (isGrouped) {
+            return ListVideo;
+        }
+        if (singleToolCall?.icon && ICON_MAP[singleToolCall.icon]) {
+            return ICON_MAP[singleToolCall.icon];
+        }
+        return CircleDot;
+    };
+    const IconComponent = getIcon();
+    // Get verbiage/summary
+    const getDisplayText = () => {
+        if (isGrouped) {
+            const tense = isCompleted ? "past" : "active";
+            return generateSmartSummary(toolCalls, tense);
+        }
+        if (singleToolCall) {
+            return getToolCallStateVerbiage(singleToolCall);
+        }
+        return "Tool operation";
+    };
+    const displayText = getDisplayText();
+    // For preliminary/selecting states, show simple non-expandable text
+    if (isSelecting && !isGrouped) {
+        return (_jsx(motion.div, { className: "flex flex-col my-4 rounded-md px-1 -mx-1 w-fit", animate: {
+                backgroundPosition: ["200% 0", "-200% 0"],
+            }, transition: {
+                ...shimmerTransition,
+                duration: getDuration(shouldReduceMotion ?? false, 1.5),
+            }, style: {
+                backgroundImage: "linear-gradient(90deg, transparent 5%, rgba(255, 255, 255, 0.75) 25%, transparent 35%)",
+                backgroundSize: "200% 100%",
+            }, children: _jsx("span", { className: "text-paragraph-sm text-text-secondary/50", children: displayText }) }));
+    }
+    // If it's a grouped preliminary (selecting) state
+    if (isSelecting && isGrouped) {
+        return (_jsxs(motion.div, { className: "flex flex-col my-4 rounded-md px-1 -mx-1 w-fit", animate: {
+                backgroundPosition: ["200% 0", "-200% 0"],
+            }, transition: {
+                ...shimmerTransition,
+                duration: getDuration(shouldReduceMotion ?? false, 1.5),
+            }, style: {
+                backgroundImage: "linear-gradient(90deg, transparent 5%, rgba(255, 255, 255, 0.75) 25%, transparent 35%)",
+                backgroundSize: "200% 100%",
+            }, children: [_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("div", { className: "text-text-secondary/70", children: _jsx(ListVideo, { className: "h-3 w-3" }) }), _jsx("span", { className: "text-paragraph-sm text-text-secondary/70", children: "Selecting tools" }), _jsx("span", { className: "text-[10px] bg-muted px-1.5 py-0.5 rounded text-text-secondary/70", children: toolCalls.length })] }), _jsx("span", { className: "text-paragraph-sm text-text-secondary/70 pl-4.5", children: displayText })] }));
+    }
+    // Full display (for single tool call or expanded group, includes minimized state)
+    return (_jsxs(motion.div, { className: "flex flex-col my-4", initial: {
+            filter: "blur(12px)",
+            opacity: 0,
+            y: 12,
+        }, animate: {
+            filter: "blur(0px)",
+            opacity: 1,
+            y: 0,
+        }, exit: {
+            filter: "blur(12px)",
+            opacity: 0,
+            y: -12,
+        }, transition: getTransition(shouldReduceMotion ?? false, {
+            duration: 0.5,
+            ease: motionEasing.smooth,
+        }), children: [_jsxs(motion.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 rounded-md px-1 -mx-1", onClick: handleHeaderClick, "aria-expanded": isTodoWrite ? undefined : isExpanded, animate: isActive || isSelecting
+                    ? {
+                        backgroundPosition: ["200% 0", "-200% 0"],
+                    }
+                    : {}, transition: isActive || isSelecting
+                    ? {
+                        ...shimmerTransition,
+                        duration: getDuration(shouldReduceMotion ?? false, 1.5),
+                    }
+                    : {}, style: isActive || isSelecting
+                    ? {
+                        backgroundImage: "linear-gradient(90deg, transparent 5%, rgba(255, 255, 255, 0.75) 25%, transparent 35%)",
+                        backgroundSize: "200% 100%",
+                    }
+                    : {}, children: [_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("div", { className: "text-text-secondary/70 group-hover:text-text-secondary transition-colors", children: _jsx(IconComponent, { className: "h-3 w-3" }) }), _jsxs("span", { className: "text-paragraph-sm text-text-secondary/70 group-hover:text-text-secondary transition-colors", children: [isGrouped && _jsx("span", { className: "mr-1", children: "Parallel operation" }), !isGrouped && displayText] }), isGrouped && (_jsx("span", { className: "text-[10px] bg-muted px-1.5 py-0.5 rounded text-text-secondary/70", children: toolCalls.length })), isFailed && _jsx(AlertCircle, { className: "h-3 w-3 text-destructive" }), isTodoWrite ? (_jsx(ChevronRight, { className: "h-3 w-3 text-text-secondary/70 group-hover:text-text-secondary transition-colors" })) : (_jsx(motion.div, { animate: {
+                                    rotate: isExpanded ? 180 : 0,
+                                }, 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, {
+                        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))) })) : (
+                    // Render single tool call details
+                    singleToolCall && (_jsx(ToolOperationDetails, { toolCall: singleToolCall }))) }, "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 }) {
+    const [isSubagentExpanded, setIsSubagentExpanded] = useState(false);
+    // Detect subagent calls
+    const hasLiveSubagent = !!(toolCall.subagentPort && toolCall.subagentSessionId);
+    const hasStoredSubagent = !!(toolCall.subagentMessages && toolCall.subagentMessages.length > 0);
+    const isSubagentCall = hasLiveSubagent || hasStoredSubagent;
+    const isReplaySubagent = hasStoredSubagent;
+    if (isSubagentCall) {
+        // Render subagent with clickable header and SubAgentDetails component
+        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 }) }) }));
+}
+/**
+ * Component to display detailed tool call information
+ */
+function ToolOperationDetails({ toolCall }) {
+    const { resolvedTheme } = useTheme();
+    // Don't show details for preliminary tool calls
+    if (isPreliminaryToolCall(toolCall)) {
+        return (_jsx("div", { className: "text-paragraph-sm text-text-secondary/70 ml-2", children: getToolCallStateVerbiage(toolCall) }));
+    }
+    // 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",
+    };
+    return (_jsxs("div", { className: "text-sm border border-border rounded-lg bg-card overflow-hidden w-full", children: [toolCall.locations && toolCall.locations.length > 0 && (_jsxs("div", { className: "p-3 border-b border-border", children: [_jsx("div", { className: "text-[10px] font-bold text-text-secondary 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.rawInput && Object.keys(toolCall.rawInput).length > 0 && (_jsxs("div", { className: "p-3 border-b border-border", children: [_jsx("div", { className: "text-[10px] font-bold text-text-secondary 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.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-text-secondary 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
+                                const renderTextContent = (text, key) => {
+                                    try {
+                                        const parsed = JSON.parse(text);
+                                        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
+                                    }
+                                    return (_jsx("pre", { className: "whitespace-pre-wrap font-mono text-[11px] text-foreground overflow-x-auto", children: text }, key));
+                                };
+                                // Handle nested content blocks
+                                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) {
+                                        const mimeType = block.mimeType || "image/png";
+                                        imageSrc = `data:${mimeType};base64,${block.data}`;
+                                    }
+                                    else if ("url" in block) {
+                                        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-text-secondary 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()));
+                                }
+                                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)"] }))] }))] }))] }));
+}

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

@@ -0,0 +1,20 @@
+import type { ToolCall as ToolCallType } from "../../core/schemas/tool-call.js";
+export interface WorkProgressProps {
+    /** Optional thinking/reasoning content */
+    thinking?: string;
+    /** Whether thinking is currently streaming */
+    isThinkingStreaming?: boolean;
+    /** Tool calls to display */
+    toolCalls?: ToolCallType[];
+    /** Display style for thinking */
+    thinkingDisplayStyle?: "collapsible" | "inline";
+    /** Whether to auto-collapse thinking when done */
+    autoCollapseThinking?: boolean;
+    /** Additional CSS class */
+    className?: string;
+}
+/**
+ * WorkProgress component - coordinates display of thinking and tool execution
+ * Provides a unified view of the agent's work from thinking through execution
+ */
+export declare function WorkProgress({ thinking, isThinkingStreaming, toolCalls, thinkingDisplayStyle, autoCollapseThinking, className, }: WorkProgressProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/gui/components/WorkProgress.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { getGroupDisplayState, isPreliminaryToolCall, } from "../../core/utils/tool-call-state.js";
+import { cn } from "../lib/utils.js";
+import { Reasoning } from "./Reasoning.js";
+import { ToolOperation } from "./ToolOperation.js";
+/**
+ * WorkProgress component - coordinates display of thinking and tool execution
+ * Provides a unified view of the agent's work from thinking through execution
+ */
+export function WorkProgress({ thinking, isThinkingStreaming = false, toolCalls = [], thinkingDisplayStyle = "collapsible", autoCollapseThinking = true, className, }) {
+    // Group tool calls by batchId and type
+    const groupedToolCalls = React.useMemo(() => {
+        if (toolCalls.length === 0)
+            return [];
+        const result = [];
+        const batchMap = new Map();
+        let selectingGroup = [];
+        const flushSelectingGroup = () => {
+            if (selectingGroup.length > 0) {
+                if (selectingGroup.length > 1) {
+                    result.push({ type: "selecting", toolCalls: selectingGroup });
+                }
+                else {
+                    result.push({ type: "single", toolCall: selectingGroup[0] });
+                }
+                selectingGroup = [];
+            }
+        };
+        for (const toolCall of toolCalls) {
+            // Handle batch groups (parallel operations)
+            if (toolCall.batchId) {
+                flushSelectingGroup();
+                const existing = batchMap.get(toolCall.batchId);
+                if (existing) {
+                    existing.push(toolCall);
+                }
+                else {
+                    const group = [toolCall];
+                    batchMap.set(toolCall.batchId, group);
+                    result.push({
+                        type: "batch",
+                        batchId: toolCall.batchId,
+                        toolCalls: group,
+                    });
+                }
+            }
+            // Handle consecutive preliminary (selecting) tool calls
+            else if (isPreliminaryToolCall(toolCall)) {
+                selectingGroup.push(toolCall);
+            }
+            // Regular tool call
+            else {
+                flushSelectingGroup();
+                result.push({ type: "single", toolCall });
+            }
+        }
+        // Flush any remaining selecting group
+        flushSelectingGroup();
+        return result;
+    }, [toolCalls]);
+    const hasThinking = !!thinking;
+    const hasToolCalls = toolCalls.length > 0;
+    if (!hasThinking && !hasToolCalls) {
+        return null;
+    }
+    return (_jsxs("div", { className: cn("work-progress", className), children: [hasThinking && (_jsx(Reasoning, { content: thinking, isStreaming: isThinkingStreaming, mode: thinkingDisplayStyle, autoCollapse: autoCollapseThinking })), groupedToolCalls.map((group, index) => {
+                if (group.type === "batch") {
+                    // Parallel operations group
+                    return (_jsx(ToolOperation, { toolCalls: group.toolCalls, isGrouped: true, autoMinimize: true }, `batch-${group.batchId}`));
+                }
+                if (group.type === "selecting") {
+                    // Multiple selecting operations
+                    return (_jsx(ToolOperation, { toolCalls: group.toolCalls, isGrouped: true, autoMinimize: false }, `selecting-${index}`));
+                }
+                // Single tool call
+                return (_jsx(ToolOperation, { toolCalls: [group.toolCall], isGrouped: false, autoMinimize: true }, group.toolCall.id));
+            })] }));
+}

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

@@ -2,6 +2,7 @@ export { toast } from "sonner";
 export { MockFileSystemProvider, mockFileSystemData, } from "../data/mockFileSystemData.js";
 export { mockSourceData } from "../data/mockSourceData.js";
 export type { FileSystemData, FileSystemItem as FileSystemItemData, FileSystemItemType, FileSystemProvider, } from "../types/filesystem.js";
+export { AppSidebar, type AppSidebarProps, } from "./AppSidebar.js";
 export { Button, type ButtonProps, buttonVariants } from "./Button.js";
 export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from "./Card.js";
 export { ChatEmptyState, type ChatEmptyStateProps } from "./ChatEmptyState.js";
@@ -32,6 +33,11 @@ export { PanelTabsHeader, type PanelTabsHeaderProps, } from "./PanelTabsHeader.j
 export { Reasoning, type ReasoningProps } from "./Reasoning.js";
 export { Response, type ResponseProps } from "./Response.js";
 export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, } from "./Select.js";
+export { SessionHistory, type SessionHistoryProps, } from "./SessionHistory.js";
+export { SessionHistoryItem, type SessionHistoryItemProps, } from "./SessionHistoryItem.js";
+export { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, } from "./Sheet.js";
+export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, useSidebar, } from "./Sidebar.js";
+export { SidebarToggle } from "./SidebarToggle.js";
 export { Toaster } from "./Sonner.js";
 export { type SourceItem, SourceListItem, type SourceListItemProps, } from "./SourceListItem.js";
 export { SubAgentDetails, type SubAgentDetailsProps, } from "./SubAgentDetails.js";
@@ -43,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 { ToolCall, type ToolCallProps } from "./ToolCall.js";
 export { ToolCallList, type ToolCallListProps } from "./ToolCallList.js";
+export { ToolOperation, type ToolOperationProps } from "./ToolOperation.js";
 export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "./Tooltip.js";
+export { WorkProgress, type WorkProgressProps } from "./WorkProgress.js";

package/dist/gui/components/index.js

@@ -2,6 +2,8 @@
 export { toast } from "sonner";
 export { MockFileSystemProvider, mockFileSystemData, } from "../data/mockFileSystemData.js";
 export { mockSourceData } from "../data/mockSourceData.js";
+// Sidebar components
+export { AppSidebar, } from "./AppSidebar.js";
 export { Button, buttonVariants } from "./Button.js";
 export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from "./Card.js";
 export { ChatEmptyState } from "./ChatEmptyState.js";
@@ -37,6 +39,11 @@ export { PanelTabsHeader, } from "./PanelTabsHeader.js";
 export { Reasoning } from "./Reasoning.js";
 export { Response } from "./Response.js";
 export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, } from "./Select.js";
+export { SessionHistory, } from "./SessionHistory.js";
+export { SessionHistoryItem, } from "./SessionHistoryItem.js";
+export { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, } from "./Sheet.js";
+export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, useSidebar, } from "./Sidebar.js";
+export { SidebarToggle } from "./SidebarToggle.js";
 export { Toaster } from "./Sonner.js";
 // Toast components
 export { SourceListItem, } from "./SourceListItem.js";
@@ -50,7 +57,8 @@ export { ThemeToggle } from "./ThemeToggle.js";
 export { ThinkingBlock, } from "./ThinkingBlock.js";
 export { TodoList } from "./TodoList.js";
 export { TodoListItem, } from "./TodoListItem.js";
-export { ToolCall } from "./ToolCall.js";
 export { ToolCallList } from "./ToolCallList.js";
+export { ToolOperation } from "./ToolOperation.js";
 // Tooltip components
 export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "./Tooltip.js";
+export { WorkProgress } from "./WorkProgress.js";

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

@@ -0,0 +1 @@
+export { useIsMobile } from "./use-mobile.js";

package/dist/gui/hooks/index.js

@@ -0,0 +1 @@
+export { useIsMobile } from "./use-mobile.js";

package/dist/gui/hooks/use-mobile.d.ts

@@ -0,0 +1 @@
+export declare function useIsMobile(): boolean;

package/dist/gui/hooks/use-mobile.js

@@ -0,0 +1,15 @@
+import * as React from "react";
+const MOBILE_BREAKPOINT = 768;
+export function useIsMobile() {
+    const [isMobile, setIsMobile] = React.useState(undefined);
+    React.useEffect(() => {
+        const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+        const onChange = () => {
+            setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+        };
+        mql.addEventListener("change", onChange);
+        setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+        return () => mql.removeEventListener("change", onChange);
+    }, []);
+    return !!isMobile;
+}

package/dist/gui/index.d.ts

@@ -1,2 +1,3 @@
 export * from "./components/index.js";
+export { useIsMobile } from "./hooks/index.js";
 export { cn } from "./lib/utils.js";

package/dist/gui/index.js

@@ -1,4 +1,6 @@
 // Re-export all components
 export * from "./components/index.js";
+// Re-export hooks
+export { useIsMobile } from "./hooks/index.js";
 // Re-export utilities
 export { cn } from "./lib/utils.js";

package/dist/gui/lib/motion.d.ts

@@ -0,0 +1,55 @@
+import type { Transition, Variants } from "framer-motion";
+/**
+ * Motion utilities and reusable animation variants for the UI package
+ * Provides consistent animation behavior across components
+ */
+export declare const motionDuration: {
+    readonly fast: 0.15;
+    readonly normal: 0.25;
+    readonly slow: 0.4;
+};
+export declare const motionEasing: {
+    readonly smooth: readonly [0.25, 0.1, 0.25, 1];
+    readonly bounce: readonly [0.68, -0.55, 0.265, 1.55];
+    readonly sharp: readonly [0.4, 0, 0.2, 1];
+    readonly gentle: readonly [0.25, 0.46, 0.45, 0.94];
+};
+export declare const fadeInVariants: Variants;
+export declare const fadeInUpVariants: Variants;
+export declare const expandCollapseVariants: Variants;
+export declare const slideDownVariants: Variants;
+export declare const shimmerTransition: Transition;
+export declare const shimmerVariants: Variants;
+export declare const scaleInVariants: Variants;
+export declare const pulseVariants: Variants;
+export declare const rotateVariants: Variants;
+export declare const standardTransition: Transition;
+export declare const fastTransition: Transition;
+export declare const slowTransition: Transition;
+export declare const springTransition: Transition;
+export declare const gentleSpringTransition: Transition;
+export declare const layoutTransition: Transition;
+export declare const staggerChildren: {
+    visible: {
+        transition: {
+            staggerChildren: number;
+        };
+    };
+};
+export declare const staggerChildrenFast: {
+    visible: {
+        transition: {
+            staggerChildren: number;
+        };
+    };
+};
+export declare const slideInFromRightVariants: Variants;
+export declare const slideOutToRightVariants: Variants;
+/**
+ * Get transition with reduced motion consideration
+ */
+export declare function getTransition(shouldReduceMotion: boolean, transition?: Transition): Transition;
+/**
+ * Get duration with reduced motion consideration
+ */
+export declare function getDuration(shouldReduceMotion: boolean, duration?: number): number;