@townco/ui 0.1.67 → 0.1.69

package/dist/gui/components/SubAgentDetails.js

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

package/dist/gui/components/ToolCallList.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ToolCall } from "./ToolCall.js";
+import { ToolOperation } from "./ToolOperation.js";
 /**
  * ToolCallList component - renders a list of tool calls, optionally grouped
  */
@@ -15,8 +15,8 @@ export function ToolCallList({ toolCalls, groupBy = "chronological", }) {
             completed: toolCalls.filter((tc) => tc.status === "completed"),
             failed: toolCalls.filter((tc) => tc.status === "failed"),
         };
-        return (_jsxs("div", { className: "space-y-4", children: [grouped.in_progress.length > 0 && (_jsxs("div", { children: [_jsx("h4", { className: "text-[10px] font-bold text-muted-foreground uppercase tracking-wider mb-2 pl-1", children: "In Progress" }), grouped.in_progress.map((tc) => (_jsx(ToolCall, { toolCall: tc }, tc.id)))] })), grouped.pending.length > 0 && (_jsxs("div", { children: [_jsx("h4", { className: "text-[10px] font-bold text-muted-foreground uppercase tracking-wider mb-2 pl-1", children: "Pending" }), grouped.pending.map((tc) => (_jsx(ToolCall, { toolCall: tc }, tc.id)))] })), grouped.completed.length > 0 && (_jsxs("div", { children: [_jsx("h4", { className: "text-[10px] font-bold text-muted-foreground uppercase tracking-wider mb-2 pl-1", children: "Completed" }), grouped.completed.map((tc) => (_jsx(ToolCall, { toolCall: tc }, tc.id)))] })), grouped.failed.length > 0 && (_jsxs("div", { children: [_jsx("h4", { className: "text-[10px] font-bold text-zinc-400 uppercase tracking-wider mb-2 pl-1", children: "Failed" }), grouped.failed.map((tc) => (_jsx(ToolCall, { toolCall: tc }, tc.id)))] }))] }));
+        return (_jsxs("div", { className: "space-y-4", children: [grouped.in_progress.length > 0 && (_jsxs("div", { children: [_jsx("h4", { className: "text-[10px] font-bold text-muted-foreground uppercase tracking-wider mb-2 pl-1", children: "In Progress" }), grouped.in_progress.map((tc) => (_jsx(ToolOperation, { toolCalls: [tc], isGrouped: false }, tc.id)))] })), grouped.pending.length > 0 && (_jsxs("div", { children: [_jsx("h4", { className: "text-[10px] font-bold text-muted-foreground uppercase tracking-wider mb-2 pl-1", children: "Pending" }), grouped.pending.map((tc) => (_jsx(ToolOperation, { toolCalls: [tc], isGrouped: false }, tc.id)))] })), grouped.completed.length > 0 && (_jsxs("div", { children: [_jsx("h4", { className: "text-[10px] font-bold text-muted-foreground uppercase tracking-wider mb-2 pl-1", children: "Completed" }), grouped.completed.map((tc) => (_jsx(ToolOperation, { toolCalls: [tc], isGrouped: false }, tc.id)))] })), grouped.failed.length > 0 && (_jsxs("div", { children: [_jsx("h4", { className: "text-[10px] font-bold text-zinc-400 uppercase tracking-wider mb-2 pl-1", children: "Failed" }), grouped.failed.map((tc) => (_jsx(ToolOperation, { toolCalls: [tc], isGrouped: false }, tc.id)))] }))] }));
     }
     // Default: chronological order
-    return (_jsx("div", { className: "space-y-2", children: toolCalls.map((tc) => (_jsx(ToolCall, { toolCall: tc }, tc.id))) }));
+    return (_jsx("div", { className: "space-y-2", children: toolCalls.map((tc) => (_jsx(ToolOperation, { toolCalls: [tc], isGrouped: false }, tc.id))) }));
 }

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

@@ -0,0 +1,11 @@
+import type { ToolCall as ToolCallType } from "../../core/schemas/tool-call.js";
+export interface ToolOperationProps {
+    toolCalls: ToolCallType[];
+    isGrouped?: boolean;
+    autoMinimize?: boolean;
+}
+/**
+ * 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;

package/dist/gui/components/ToolOperation.js

@@ -0,0 +1,289 @@
+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 { 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";
+    // 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 {
+            // Normal expand/collapse
+            setUserInteracted(true); // Mark as user-interacted to prevent auto-minimize
+            setIsExpanded(!isExpanded);
+            if (isMinimized) {
+                setIsMinimized(false);
+            }
+        }
+    }, [isTodoWrite, layoutContext, isExpanded, isMinimized, singleToolCall]);
+    // 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 }))] }), _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("div", { className: "flex items-start gap-1.5", children: _jsx("div", { className: "flex-1 ml-5", children: _jsx(ToolOperationDetails, { toolCall: toolCall }) }) }, toolCall.id))) })) : (
+                    // Render single tool call details
+                    singleToolCall && (_jsx(ToolOperationDetails, { toolCall: singleToolCall }))) }, "expanded-content")) })] }));
+}
+/**
+ * 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";