@townco/ui 0.1.77 → 0.1.79

package/dist/gui/components/ToolOperation.js

@@ -1,16 +1,14 @@
 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 { AlertCircle, BrainCircuit, CheckSquare, ChevronDown, ChevronRight, CircleDot, Cloud, Edit, FileText, FoldVertical, Globe, Image, Link, ListVideo, ScissorsLineDashed, 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 { getGroupDisplayState, getToolCallDisplayState, getToolCallStateVerbiage, 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";
 import { TodoSubline } from "./TodoSubline.js";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "./Tooltip.js";
 /**
  * Map of icon names to Lucide components
  */
@@ -27,6 +25,17 @@ const ICON_MAP = {
     BrainCircuit: BrainCircuit,
     CircleDot: CircleDot,
 };
+/**
+ * CompactionDetails component - shows detailed stats when tool response was compacted
+ */
+function CompactionDetails({ compactionAction, originalTokens, finalTokens, originalContentPath, }) {
+    // Calculate stats
+    const tokensSaved = originalTokens && finalTokens ? originalTokens - finalTokens : undefined;
+    const reductionPercent = originalTokens && finalTokens
+        ? Math.round((1 - finalTokens / originalTokens) * 100)
+        : undefined;
+    return (_jsxs("div", { className: "p-3 border-b border-border", children: [_jsxs("div", { className: "flex items-center gap-2 mb-2", children: [compactionAction === "compacted" ? (_jsx(FoldVertical, { className: "w-3.5 h-3.5 text-text-secondary" })) : (_jsx(ScissorsLineDashed, { className: "w-3.5 h-3.5 text-destructive" })), _jsxs("span", { className: "text-[10px] font-bold text-text-secondary uppercase tracking-wider font-sans", children: ["Response", " ", compactionAction === "compacted" ? "Compacted" : "Truncated"] })] }), _jsxs("div", { className: "grid grid-cols-4 gap-3 mb-3", children: [originalTokens !== undefined && (_jsxs("div", { children: [_jsx("div", { className: "text-[9px] text-text-secondary uppercase tracking-wide font-sans mb-0.5", children: "Original" }), _jsxs("div", { className: "text-[12px] font-medium text-foreground font-sans", children: [originalTokens.toLocaleString(), " tokens"] })] })), finalTokens !== undefined && (_jsxs("div", { children: [_jsx("div", { className: "text-[9px] text-text-secondary uppercase tracking-wide font-sans mb-0.5", children: "Compacted" }), _jsxs("div", { className: "text-[12px] font-medium text-foreground font-sans", children: [finalTokens.toLocaleString(), " tokens"] })] })), tokensSaved !== undefined && (_jsxs("div", { children: [_jsx("div", { className: "text-[9px] text-text-secondary uppercase tracking-wide font-sans mb-0.5", children: "Saved" }), _jsxs("div", { className: "text-[12px] font-medium text-foreground font-sans", children: [tokensSaved.toLocaleString(), " tokens"] })] })), reductionPercent !== undefined && (_jsxs("div", { children: [_jsx("div", { className: "text-[9px] text-text-secondary uppercase tracking-wide font-sans mb-0.5", children: "Reduction" }), _jsxs("div", { className: "text-[12px] font-medium text-foreground font-sans", children: [reductionPercent, "%"] })] }))] }), originalContentPath && (_jsxs("div", { className: "text-[10px] text-text-secondary font-sans", children: [_jsx("span", { className: "font-medium", children: "Original saved to:" }), " ", _jsx("code", { className: "bg-muted px-1 py-0.5 rounded text-[9px]", children: originalContentPath })] }))] }));
+}
 /**
  * ToolOperation component - unified display for tool calls
  * Handles both individual and grouped tool calls with smooth transitions
@@ -35,8 +44,6 @@ export function ToolOperation({ toolCalls, isGrouped = false, autoMinimize = tru
     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";
@@ -44,6 +51,31 @@ export function ToolOperation({ toolCalls, isGrouped = false, autoMinimize = tru
     const toolHookNotification = singleToolCall
         ? hookNotifications.find((n) => n.toolCallId === singleToolCall.id)
         : undefined;
+    // Detect if compaction was applied (from hook notification or persisted _meta)
+    const hasCompaction = !!((toolHookNotification?.status === "completed" &&
+        toolHookNotification.metadata?.action &&
+        toolHookNotification.metadata.action !== "no_action_needed" &&
+        toolHookNotification.metadata.action !== "none") ||
+        singleToolCall?._meta?.compactionAction);
+    // Detect if truncation was used (as opposed to intelligent compaction)
+    const isTruncation = !!(toolHookNotification?.metadata?.action === "truncated" ||
+        toolHookNotification?.metadata?.action === "compacted_then_truncated" ||
+        singleToolCall?._meta?.compactionAction === "truncated");
+    // For grouped tool calls, check if any have compaction
+    const groupHasCompaction = isGrouped
+        ? toolCalls.some((tc) => tc._meta?.compactionAction ||
+            hookNotifications.some((n) => n.toolCallId === tc.id &&
+                n.status === "completed" &&
+                n.metadata?.action &&
+                n.metadata.action !== "no_action_needed" &&
+                n.metadata.action !== "none"))
+        : false;
+    const groupHasTruncation = isGrouped
+        ? toolCalls.some((tc) => tc._meta?.compactionAction === "truncated" ||
+            hookNotifications.some((n) => n.toolCallId === tc.id &&
+                (n.metadata?.action === "truncated" ||
+                    n.metadata?.action === "compacted_then_truncated")))
+        : false;
     // Detect subagent calls
     const hasLiveSubagent = !!(singleToolCall?.subagentPort && singleToolCall?.subagentSessionId);
     const hasStoredSubagent = !!(singleToolCall?.subagentMessages &&
@@ -63,7 +95,6 @@ export function ToolOperation({ toolCalls, isGrouped = false, autoMinimize = tru
     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) {
@@ -136,64 +167,31 @@ export function ToolOperation({ toolCalls, isGrouped = false, autoMinimize = tru
     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 }) }));
+        return (_jsx("div", { className: "flex flex-col my-4 rounded-md px-1 -mx-1 w-fit", 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 })] }));
+        return (_jsxs("div", { className: "flex flex-col my-4 rounded-md px-1 -mx-1 w-fit", 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 &&
+    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 rounded-md px-1 -mx-1", onClick: handleHeaderClick, "aria-expanded": isTodoWrite ? undefined : isExpanded, 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("span", { title: isGrouped
+                                    ? `${toolCalls.filter((tc) => tc.status === "failed").length} of ${toolCalls.length} operations failed`
+                                    : singleToolCall?.error || "Operation failed", children: _jsx(AlertCircle, { className: "h-3 w-3 text-destructive" }) })), isGrouped && groupHasCompaction && (_jsx(TooltipProvider, { delayDuration: 0, children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("span", { children: groupHasTruncation ? (_jsx(ScissorsLineDashed, { className: "h-3 w-3 text-destructive" })) : (_jsx(FoldVertical, { className: "h-3 w-3 text-text-secondary/70" })) }) }), _jsx(TooltipContent, { children: groupHasTruncation
+                                                ? "Some responses were truncated"
+                                                : "Some responses were compacted" })] }) })), !isGrouped && hasCompaction && (_jsx(TooltipProvider, { delayDuration: 0, children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("span", { children: isTruncation ? (_jsx(ScissorsLineDashed, { className: "h-3 w-3 text-destructive" })) : (_jsx(FoldVertical, { className: "h-3 w-3 text-text-secondary/70" })) }) }), _jsx(TooltipContent, { children: (() => {
+                                                const meta = singleToolCall?._meta;
+                                                const percentage = meta?.originalTokens && meta?.finalTokens
+                                                    ? Math.round((1 - meta.finalTokens / meta.originalTokens) * 100)
+                                                    : null;
+                                                if (isTruncation) {
+                                                    return percentage
+                                                        ? `Response truncated (${percentage}% reduction)`
+                                                        : "Response was truncated";
+                                                }
+                                                return percentage
+                                                    ? `Response compacted (${percentage}% reduction)`
+                                                    : "Response was compacted";
+                                            })() })] }) })), isTodoWrite ? (_jsx(ChevronRight, { className: "h-3 w-3 text-text-secondary/70 group-hover:text-text-secondary transition-colors" })) : (_jsx("div", { className: `h-3 w-3 text-text-secondary/70 group-hover:text-text-secondary transition-all duration-200 ${isExpanded ? "rotate-180" : ""}`, 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 && toolHookNotification && (_jsx("span", { className: "text-paragraph-sm text-text-secondary/70 pl-4.5", children: toolHookNotification.status === "triggered"
                             ? "Compacting response..."
@@ -218,37 +216,70 @@ export function ToolOperation({ toolCalls, isGrouped = false, autoMinimize = tru
                                 return (_jsxs("span", { className: "text-paragraph-sm text-text-secondary/70 pl-4.5", children: [compactedCount, " response", compactedCount > 1 ? "s" : "", " ", "compacted"] }));
                             }
                             return null;
-                        })()] }), !isTodoWrite && isSubagentCall && singleToolCall && (_jsx("div", { className: "pl-4.5 mt-2", children: _jsx(SubAgentDetails, { port: singleToolCall.subagentPort, sessionId: singleToolCall.subagentSessionId, parentStatus: singleToolCall.status, agentName: singleToolCall.rawInput?.agentName, query: singleToolCall.rawInput?.query, isExpanded: isSubagentExpanded, onExpandChange: setIsSubagentExpanded, storedMessages: singleToolCall.subagentMessages, isReplay: isReplaySubagent }) })), _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) => {
-                            const hookNotification = hookNotifications.find((n) => n.toolCallId === toolCall.id);
-                            return (_jsx(GroupedToolCallItem, { toolCall: toolCall, ...(hookNotification ? { hookNotification } : {}) }, toolCall.id));
-                        }) })) : (
-                    // Render single tool call details
-                    singleToolCall && (_jsx(ToolOperationDetails, { toolCall: singleToolCall, ...(toolHookNotification
-                            ? { hookNotification: toolHookNotification }
-                            : {}) }))) }, "expanded-content")) })] }));
+                        })()] }), !isTodoWrite && isSubagentCall && singleToolCall && (_jsx("div", { className: "pl-4.5 mt-2", children: _jsx(SubAgentDetails, { port: singleToolCall.subagentPort, sessionId: singleToolCall.subagentSessionId, parentStatus: singleToolCall.status, agentName: singleToolCall.rawInput?.agentName, query: singleToolCall.rawInput?.query, isExpanded: isSubagentExpanded, onExpandChange: setIsSubagentExpanded, storedMessages: singleToolCall.subagentMessages, isReplay: isReplaySubagent }) })), !isTodoWrite && isExpanded && (_jsx("div", { className: "mt-1", children: isGrouped ? (
+                // Render individual tool calls in group
+                _jsx("div", { className: "flex flex-col gap-4 mt-2", children: toolCalls.map((toolCall) => {
+                        const hookNotification = hookNotifications.find((n) => n.toolCallId === toolCall.id);
+                        return (_jsx(GroupedToolCallItem, { toolCall: toolCall, ...(hookNotification ? { hookNotification } : {}) }, toolCall.id));
+                    }) })) : (
+                // Render single tool call details
+                singleToolCall && (_jsx(ToolOperationDetails, { toolCall: singleToolCall, ...(toolHookNotification
+                        ? { hookNotification: toolHookNotification }
+                        : {}) }))) }))] }));
 }
 /**
  * Component to render a single tool call within a grouped parallel operation
- * Handles subagent calls with their own expansion state
+ * Each tool call is individually expandable and collapsed by default
  */
 function GroupedToolCallItem({ toolCall, hookNotification, }) {
-    const [isSubagentExpanded, setIsSubagentExpanded] = useState(false);
+    const [isExpanded, setIsExpanded] = useState(false);
     // Detect subagent calls
     const hasLiveSubagent = !!(toolCall.subagentPort && toolCall.subagentSessionId);
     const hasStoredSubagent = !!(toolCall.subagentMessages && toolCall.subagentMessages.length > 0);
     const isSubagentCall = hasLiveSubagent || hasStoredSubagent;
     const isReplaySubagent = hasStoredSubagent;
+    // Detect compaction for this individual tool call
+    const hasCompaction = !!((hookNotification?.status === "completed" &&
+        hookNotification.metadata?.action &&
+        hookNotification.metadata.action !== "no_action_needed" &&
+        hookNotification.metadata.action !== "none") ||
+        toolCall._meta?.compactionAction);
+    const isTruncation = !!(hookNotification?.metadata?.action === "truncated" ||
+        hookNotification?.metadata?.action === "compacted_then_truncated" ||
+        toolCall._meta?.compactionAction === "truncated");
+    const isFailed = toolCall.status === "failed";
     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 }) })] }));
+        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: () => setIsExpanded(!isExpanded), "aria-expanded": isExpanded, 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" }), isFailed && (_jsx("span", { title: toolCall.error || "Operation failed", children: _jsx(AlertCircle, { className: "h-3 w-3 text-destructive" }) })), hasCompaction && (_jsx(TooltipProvider, { delayDuration: 0, children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("span", { children: isTruncation ? (_jsx(ScissorsLineDashed, { className: "h-3 w-3 text-destructive" })) : (_jsx(FoldVertical, { className: "h-3 w-3 text-text-secondary/70" })) }) }), _jsx(TooltipContent, { children: (() => {
+                                            const meta = toolCall._meta;
+                                            const percentage = meta?.originalTokens && meta?.finalTokens
+                                                ? Math.round((1 - meta.finalTokens / meta.originalTokens) * 100)
+                                                : null;
+                                            if (isTruncation) {
+                                                return percentage
+                                                    ? `Response truncated (${percentage}% reduction)`
+                                                    : "Response was truncated";
+                                            }
+                                            return percentage
+                                                ? `Response compacted (${percentage}% reduction)`
+                                                : "Response was compacted";
+                                        })() })] }) })), _jsx(ChevronDown, { className: `h-3 w-3 text-text-secondary/70 group-hover:text-text-secondary transition-colors transition-transform duration-200 ${isExpanded ? "rotate-180" : ""}` })] }), _jsx("div", { className: "pl-4.5", children: _jsx(SubAgentDetails, { port: toolCall.subagentPort, sessionId: toolCall.subagentSessionId, parentStatus: toolCall.status, agentName: toolCall.rawInput?.agentName, query: toolCall.rawInput?.query, isExpanded: isExpanded, onExpandChange: setIsExpanded, storedMessages: toolCall.subagentMessages, isReplay: isReplaySubagent }) })] }));
     }
-    // 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, ...(hookNotification ? { hookNotification } : {}) }) }) }));
+    // Regular tool call - collapsible with clickable header
+    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: () => setIsExpanded(!isExpanded), "aria-expanded": isExpanded, children: [_jsx("span", { className: "text-paragraph-sm text-text-secondary/70 group-hover:text-text-secondary transition-colors", children: toolCall.prettyName || toolCall.title }), isFailed && (_jsx("span", { title: toolCall.error || "Operation failed", children: _jsx(AlertCircle, { className: "h-3 w-3 text-destructive" }) })), hasCompaction && (_jsx(TooltipProvider, { delayDuration: 0, children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("span", { children: isTruncation ? (_jsx(ScissorsLineDashed, { className: "h-3 w-3 text-destructive" })) : (_jsx(FoldVertical, { className: "h-3 w-3 text-text-secondary/70" })) }) }), _jsx(TooltipContent, { children: (() => {
+                                        const meta = toolCall._meta;
+                                        const percentage = meta?.originalTokens && meta?.finalTokens
+                                            ? Math.round((1 - meta.finalTokens / meta.originalTokens) * 100)
+                                            : null;
+                                        if (isTruncation) {
+                                            return percentage
+                                                ? `Response truncated (${percentage}% reduction)`
+                                                : "Response was truncated";
+                                        }
+                                        return percentage
+                                            ? `Response compacted (${percentage}% reduction)`
+                                            : "Response was compacted";
+                                    })() })] }) })), _jsx(ChevronDown, { className: `h-3 w-3 text-text-secondary/70 group-hover:text-text-secondary transition-colors transition-transform duration-200 ${isExpanded ? "rotate-180" : ""}` })] }), isExpanded && (_jsx("div", { className: "mt-1", children: _jsx(ToolOperationDetails, { toolCall: toolCall, ...(hookNotification ? { hookNotification } : {}) }) }))] }));
 }
 /**
  * Component to display detailed tool call information
@@ -290,7 +321,7 @@ function ToolOperationDetails({ toolCall, hookNotification, }) {
         "--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) ||
+    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, shortenTextAfterLength: 80, style: jsonStyle }) })] })), toolCall._meta?.compactionAction && (_jsx(CompactionDetails, { compactionAction: toolCall._meta.compactionAction, originalTokens: toolCall._meta.originalTokens, finalTokens: toolCall._meta.finalTokens, originalContentPath: toolCall._meta.originalContentPath })), ((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 = () => {
@@ -314,7 +345,12 @@ function ToolOperationDetails({ toolCall, hookNotification, }) {
                                     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));
+                                            // Filter out internal metadata fields from display
+                                            const displayValue = { ...parsed };
+                                            if ("_compactionMeta" in displayValue) {
+                                                delete displayValue._compactionMeta;
+                                            }
+                                            return (_jsx("div", { className: "text-[11px]", children: _jsx(JsonView, { value: displayValue, collapsed: false, displayDataTypes: false, displayObjectSize: false, enableClipboard: true, shortenTextAfterLength: 80, style: jsonStyle }) }, key));
                                         }
                                     }
                                     catch {

package/dist/gui/components/WorkProgress.js

@@ -1,6 +1,6 @@
 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 { isPreliminaryToolCall } from "../../core/utils/tool-call-state.js";
 import { cn } from "../lib/utils.js";
 import { Reasoning } from "./Reasoning.js";
 import { ToolOperation } from "./ToolOperation.js";
@@ -22,6 +22,7 @@ export function WorkProgress({ thinking, isThinkingStreaming = false, toolCalls
                     result.push({ type: "selecting", toolCalls: selectingGroup });
                 }
                 else {
+                    // biome-ignore lint/style/noNonNullAssertion: else branch ensures array has exactly one element
                     result.push({ type: "single", toolCall: selectingGroup[0] });
                 }
                 selectingGroup = [];
@@ -64,14 +65,15 @@ export function WorkProgress({ thinking, isThinkingStreaming = false, toolCalls
     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) => {
+    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}`));
+                    const selectingKey = group.toolCalls.map((tc) => tc.id).join("-");
+                    return (_jsx(ToolOperation, { toolCalls: group.toolCalls, isGrouped: true, autoMinimize: false }, `selecting-${selectingKey}`));
                 }
                 // Single tool call
                 return (_jsx(ToolOperation, { toolCalls: [group.toolCall], isGrouped: false, autoMinimize: true }, group.toolCall.id));

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

@@ -6,7 +6,6 @@ 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";
-export type { ConnectionStatus } from "./ChatHeader.js";
 export * as ChatHeader from "./ChatHeader.js";
 export { Actions as ChatInputActions, Attachment as ChatInputAttachment, type ChatInputActionsProps, type ChatInputAttachmentProps, type ChatInputCommandMenuProps, type ChatInputFieldProps, type ChatInputRootProps, type ChatInputSubmitProps, type ChatInputToolbarProps, type ChatInputVoiceInputProps, CommandMenu as ChatInputCommandMenu, type CommandMenuItem, Field as ChatInputField, Root as ChatInputRoot, Submit as ChatInputSubmit, Toolbar as ChatInputToolbar, VoiceInput as ChatInputVoiceInput, } from "./ChatInput.js";
 export * as ChatLayout from "./ChatLayout.js";

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

@@ -1,5 +1,5 @@
 import * as ResizablePrimitive from "react-resizable-panels";
-declare const ResizablePanelGroup: ({ className, ...props }: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => import("react/jsx-runtime").JSX.Element;
+declare const ResizablePanelGroup: React.FC<React.ComponentProps<typeof ResizablePrimitive.PanelGroup>>;
 declare const ResizablePanel: ({ className, ...props }: React.ComponentProps<typeof ResizablePrimitive.Panel>) => import("react/jsx-runtime").JSX.Element;
 declare const ResizableHandle: ({ withHandle, className, ...props }: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
     withHandle?: boolean;

package/dist/gui/constants.d.ts

@@ -0,0 +1,6 @@
+export declare const SIDEBAR_WIDTH_DESKTOP = 256;
+export declare const SIDEBAR_WIDTH_MOBILE = "calc(100vw - 104px)";
+export declare const SIDEBAR_TAP_ZONE = 104;
+export declare const ASIDE_WIDTH_DEFAULT = 450;
+export declare const ASIDE_WIDTH_MIN = 250;
+export declare const ASIDE_WIDTH_MAX = 800;

package/dist/gui/constants.js

@@ -0,0 +1,8 @@
+// Sidebar constants
+export const SIDEBAR_WIDTH_DESKTOP = 256;
+export const SIDEBAR_WIDTH_MOBILE = "calc(100vw - 104px)";
+export const SIDEBAR_TAP_ZONE = 104;
+// Aside panel constants
+export const ASIDE_WIDTH_DEFAULT = 450;
+export const ASIDE_WIDTH_MIN = 250;
+export const ASIDE_WIDTH_MAX = 800;

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

@@ -1,2 +1,3 @@
+export { useLockBodyScroll } from "./use-lock-body-scroll.js";
 export { useIsMobile } from "./use-mobile.js";
 export { useScrollToBottom } from "./use-scroll-to-bottom.js";

package/dist/gui/hooks/index.js

@@ -1,2 +1,3 @@
+export { useLockBodyScroll } from "./use-lock-body-scroll.js";
 export { useIsMobile } from "./use-mobile.js";
 export { useScrollToBottom } from "./use-scroll-to-bottom.js";

package/dist/gui/hooks/use-lock-body-scroll.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Hook to lock body scroll when a modal/drawer is open
+ * Primarily used for mobile sidebar overlay to prevent background scrolling
+ *
+ * @param lock - Whether to lock the body scroll
+ */
+export declare function useLockBodyScroll(lock: boolean): void;

package/dist/gui/hooks/use-lock-body-scroll.js

@@ -0,0 +1,29 @@
+import { useEffect } from "react";
+/**
+ * Hook to lock body scroll when a modal/drawer is open
+ * Primarily used for mobile sidebar overlay to prevent background scrolling
+ *
+ * @param lock - Whether to lock the body scroll
+ */
+export function useLockBodyScroll(lock) {
+    useEffect(() => {
+        if (!lock)
+            return;
+        // Store current scroll position
+        const scrollY = window.scrollY;
+        // Lock body scroll
+        document.body.style.position = "fixed";
+        document.body.style.top = `-${scrollY}px`;
+        document.body.style.width = "100%";
+        document.body.style.overflow = "hidden";
+        return () => {
+            // Unlock body scroll
+            document.body.style.position = "";
+            document.body.style.top = "";
+            document.body.style.width = "";
+            document.body.style.overflow = "";
+            // Restore scroll position
+            window.scrollTo(0, scrollY);
+        };
+    }, [lock]);
+}

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

@@ -53,3 +53,15 @@ export declare function getTransition(shouldReduceMotion: boolean, transition?:
  * Get duration with reduced motion consideration
  */
 export declare function getDuration(shouldReduceMotion: boolean, duration?: number): number;
+export declare const sidebarTransition: Transition;
+export declare const sidebarMobileTransition: Transition;
+export declare const sidebarDesktopVariants: Variants;
+export declare const sidebarMobileVariants: Variants;
+export declare const sidebarContentVariants: Variants;
+export declare const sidebarContentTransition: Transition;
+export declare const backdropVariants: Variants;
+export declare const asideDesktopVariants: Variants;
+export declare const asideMobileVariants: Variants;
+export declare const asideContentVariants: Variants;
+export declare const asideContentTransition: Transition;
+export declare const asideMobileTransition: Transition;

package/dist/gui/lib/motion.js

@@ -215,3 +215,72 @@ export function getTransition(shouldReduceMotion, transition = standardTransitio
 export function getDuration(shouldReduceMotion, duration = motionDuration.normal) {
     return shouldReduceMotion ? 0.01 : duration;
 }
+// ============================================================================
+// Sidebar Animations (AppSidebar)
+// ============================================================================
+export const sidebarTransition = {
+    duration: 0.5,
+    ease: motionEasing.smooth,
+};
+export const sidebarMobileTransition = {
+    duration: 0.3,
+    ease: motionEasing.smooth,
+};
+// Desktop: Slide animation (fixed width, no reflow)
+export const sidebarDesktopVariants = {
+    initial: { x: "-100%" },
+    animate: { x: 0 },
+    exit: { x: "-100%" },
+};
+// Mobile: Slide animation (overlay from left)
+export const sidebarMobileVariants = {
+    initial: { x: "-100%" },
+    animate: { x: 0 },
+    exit: { x: "-100%" },
+};
+// Sidebar content fade-in (snappy, only on open)
+export const sidebarContentVariants = {
+    initial: { opacity: 0, x: -20 },
+    animate: { opacity: 1, x: 0 },
+};
+export const sidebarContentTransition = {
+    duration: 0.5,
+    ease: motionEasing.smooth,
+    delay: 0.25,
+};
+// Backdrop animation for mobile overlay
+export const backdropVariants = {
+    initial: { opacity: 0 },
+    animate: { opacity: 1 },
+    exit: { opacity: 0 },
+};
+// ============================================================================
+// Aside Panel Animations (ChatLayout.Aside)
+// ============================================================================
+// Desktop: Width-based slide animation (inline panel, main content reflows)
+export const asideDesktopVariants = {
+    initial: { width: 0 },
+    animate: { width: "auto" },
+    exit: { width: 0 },
+};
+// Mobile: Slide animation from right (full-screen overlay)
+export const asideMobileVariants = {
+    initial: { x: "100%" },
+    animate: { x: 0 },
+    exit: { x: "100%" },
+};
+// Aside content fade-in (delayed, snappy)
+export const asideContentVariants = {
+    initial: { opacity: 0, x: 20 },
+    animate: { opacity: 1, x: 0 },
+};
+export const asideContentTransition = {
+    duration: 0.35,
+    ease: motionEasing.smooth,
+    delay: 0.1,
+};
+// Mobile transition (faster, matches sidebar)
+export const asideMobileTransition = {
+    duration: 0.3,
+    ease: motionEasing.smooth,
+};