@townco/ui 0.1.69 → 0.1.71

package/dist/gui/components/ChatLayout.js

@@ -62,8 +62,6 @@ ChatLayoutBody.displayName = "ChatLayout.Body";
 const ChatLayoutMessages = React.forwardRef(({ className, children, onScrollChange, showScrollToBottom = true, initialScrollToBottom = true, ...props }, ref) => {
     const [showScrollButton, setShowScrollButton] = React.useState(false);
     const scrollContainerRef = React.useRef(null);
-    const wasAtBottomRef = React.useRef(true); // Track if user was at bottom before content update
-    const isAutoScrollingRef = React.useRef(false); // Track if we're programmatically scrolling
     const hasInitialScrolledRef = React.useRef(false); // Track if initial scroll has happened
     // Merge refs
     React.useImperativeHandle(ref, () => scrollContainerRef.current);
@@ -79,170 +77,57 @@ const ChatLayoutMessages = React.forwardRef(({ className, children, onScrollChan
         onScrollChange?.(isAtBottom);
         return isAtBottom;
     }, [onScrollChange, showScrollToBottom]);
-    // Handle scroll events
+    // Handle scroll events - update button visibility
     const handleScroll = React.useCallback(() => {
-        // If this is a programmatic scroll, don't update wasAtBottomRef
-        if (isAutoScrollingRef.current) {
-            return;
-        }
-        // This is a user-initiated scroll, update the position
-        const isAtBottom = checkScrollPosition();
-        wasAtBottomRef.current = isAtBottom;
+        checkScrollPosition();
     }, [checkScrollPosition]);
-    // Scroll to bottom function
+    // Scroll to bottom function (for button click)
     const scrollToBottom = React.useCallback((smooth = true) => {
         const container = scrollContainerRef.current;
         if (!container)
             return;
-        // Mark that we're about to programmatically scroll
-        isAutoScrollingRef.current = true;
-        wasAtBottomRef.current = true; // Set immediately for instant scrolls
         container.scrollTo({
             top: container.scrollHeight,
             behavior: smooth ? "smooth" : "auto",
         });
-        // Clear the flag after scroll completes
-        // For instant scrolling, clear immediately; for smooth, wait
-        setTimeout(() => {
-            isAutoScrollingRef.current = false;
-        }, smooth ? 300 : 0);
     }, []);
-    // Auto-scroll when content changes if user was at bottom
+    // Auto-scroll when content changes ONLY if user is currently at the bottom
     React.useEffect(() => {
         const container = scrollContainerRef.current;
         if (!container)
             return;
-        // If user was at the bottom, scroll to new content
-        if (wasAtBottomRef.current && !isAutoScrollingRef.current) {
-            // Use requestAnimationFrame to ensure DOM has updated
+        // Check if user is CURRENTLY at the bottom (not just "was" at bottom)
+        const { scrollTop, scrollHeight, clientHeight } = container;
+        const distanceFromBottom = scrollHeight - scrollTop - clientHeight;
+        const isCurrentlyAtBottom = distanceFromBottom < 100;
+        // Only auto-scroll if user is at the bottom right now
+        if (isCurrentlyAtBottom) {
             requestAnimationFrame(() => {
-                scrollToBottom(false); // Use instant scroll for streaming to avoid jarring smooth animations
+                container.scrollTop = container.scrollHeight;
             });
         }
-        // Update scroll position state (but don't change wasAtBottomRef if we're auto-scrolling)
-        if (!isAutoScrollingRef.current) {
-            checkScrollPosition();
-        }
-    }, [children, scrollToBottom, checkScrollPosition]);
-    // Track last scroll height to detect when content stops loading
-    const lastScrollHeightRef = React.useRef(0);
-    const scrollStableCountRef = React.useRef(0);
-    // Scroll to bottom on initial mount and during session loading
-    // Keep scrolling until content stabilizes (no more changes)
+        // Update the scroll button visibility
+        setShowScrollButton(!isCurrentlyAtBottom && showScrollToBottom);
+    }, [children, showScrollToBottom]);
+    // Scroll to bottom on initial mount only (for session replay)
     React.useEffect(() => {
         if (!initialScrollToBottom)
-            return;
+            return undefined;
         const container = scrollContainerRef.current;
         if (!container)
-            return;
-        const scrollToBottomInstant = () => {
-            container.scrollTop = container.scrollHeight;
-            wasAtBottomRef.current = true;
-        };
-        // Check if content has stabilized (scrollHeight hasn't changed)
-        const currentHeight = container.scrollHeight;
-        if (currentHeight === lastScrollHeightRef.current) {
-            scrollStableCountRef.current++;
-        }
-        else {
-            scrollStableCountRef.current = 0;
-            lastScrollHeightRef.current = currentHeight;
-        }
-        // If content is still loading (height changing) or we haven't scrolled yet,
-        // keep auto-scrolling. Stop after content is stable for a few renders.
-        if (scrollStableCountRef.current < 3) {
-            isAutoScrollingRef.current = true;
-            scrollToBottomInstant();
-            hasInitialScrolledRef.current = true;
-        }
-        else {
-            // Content is stable, stop auto-scrolling
-            isAutoScrollingRef.current = false;
-        }
-    }, [initialScrollToBottom, children]);
-    // Also use a timer-based approach as backup for session replay
-    // which may not trigger children changes
-    React.useEffect(() => {
-        if (!initialScrollToBottom)
-            return;
-        const container = scrollContainerRef.current;
-        if (!container)
-            return;
-        // Keep scrolling to bottom for the first 2 seconds of session load
-        // to catch async message replay
-        let cancelled = false;
-        const scrollInterval = setInterval(() => {
-            if (cancelled)
-                return;
-            if (container.scrollHeight > container.clientHeight) {
-                isAutoScrollingRef.current = true;
+            return undefined;
+        // Only scroll on initial mount, not on subsequent renders
+        if (!hasInitialScrolledRef.current) {
+            // Use a small delay to let initial content render
+            const timeout = setTimeout(() => {
                 container.scrollTop = container.scrollHeight;
-                wasAtBottomRef.current = true;
                 hasInitialScrolledRef.current = true;
-            }
-        }, 100);
-        // Stop after 2 seconds
-        const timeout = setTimeout(() => {
-            clearInterval(scrollInterval);
-            isAutoScrollingRef.current = false;
-        }, 2000);
-        return () => {
-            cancelled = true;
-            clearInterval(scrollInterval);
-            clearTimeout(timeout);
-        };
-    }, [initialScrollToBottom]); // Only run once on mount
-    // Check scroll position on mount
-    React.useEffect(() => {
-        if (!isAutoScrollingRef.current) {
-            const isAtBottom = checkScrollPosition();
-            wasAtBottomRef.current = isAtBottom;
+            }, 100);
+            return () => clearTimeout(timeout);
         }
-    }, [checkScrollPosition]);
-    // Detect user interaction with scroll area (wheel, touch) - IMMEDIATELY break auto-scroll
-    const handleUserInteraction = React.useCallback(() => {
-        // Immediately mark that user is interacting
-        isAutoScrollingRef.current = false;
-        // For wheel/touch events, temporarily break auto-scroll
-        // The actual scroll event will update wasAtBottomRef properly
-        // This prevents the race condition where content updates before scroll completes
-        const container = scrollContainerRef.current;
-        if (!container)
-            return;
-        // Check current position BEFORE the scroll happens
-        const { scrollTop, scrollHeight, clientHeight } = container;
-        const distanceFromBottom = scrollHeight - scrollTop - clientHeight;
-        // If user is not currently at the bottom, definitely break auto-scroll
-        if (distanceFromBottom >= 100) {
-            wasAtBottomRef.current = false;
-        }
-        // If they are at bottom, the scroll event will determine if they stay there
-    }, []);
-    // Handle keyboard navigation
-    const handleKeyDown = React.useCallback((e) => {
-        // If user presses arrow keys, page up/down, home/end - they're scrolling
-        const scrollKeys = [
-            "ArrowUp",
-            "ArrowDown",
-            "PageUp",
-            "PageDown",
-            "Home",
-            "End",
-        ];
-        if (scrollKeys.includes(e.key)) {
-            isAutoScrollingRef.current = false;
-            // Check position on next frame after the scroll happens
-            requestAnimationFrame(() => {
-                const container = scrollContainerRef.current;
-                if (!container)
-                    return;
-                const { scrollTop, scrollHeight, clientHeight } = container;
-                const distanceFromBottom = scrollHeight - scrollTop - clientHeight;
-                wasAtBottomRef.current = distanceFromBottom < 100;
-            });
-        }
-    }, []);
-    return (_jsxs("div", { className: "relative flex-1 overflow-hidden", children: [_jsx("div", { ref: scrollContainerRef, className: cn("h-full overflow-y-auto flex flex-col", className), onScroll: handleScroll, onWheel: handleUserInteraction, onTouchStart: handleUserInteraction, onKeyDown: handleKeyDown, tabIndex: 0, ...props, children: _jsx("div", { className: "mx-auto max-w-chat flex-1 w-full flex flex-col", children: children }) }), showScrollButton && (_jsx("button", { type: "button", onClick: () => scrollToBottom(true), className: cn("absolute bottom-4 left-1/2 -translate-x-1/2 z-10", "flex items-center justify-center p-2 rounded-full", "bg-card border border-border shadow-lg", "text-foreground", "hover:bg-accent hover:text-accent-foreground", "transition-all duration-200 ease-in-out", "animate-in fade-in slide-in-from-bottom-2"), "aria-label": "Scroll to bottom", children: _jsx(ArrowDown, { className: "size-4" }) }))] }));
+        return undefined;
+    }, [initialScrollToBottom]);
+    return (_jsxs("div", { className: "relative flex-1 overflow-hidden", children: [_jsx("div", { ref: scrollContainerRef, className: cn("h-full overflow-y-auto flex flex-col", className), onScroll: handleScroll, ...props, children: _jsx("div", { className: "mx-auto max-w-chat flex-1 w-full flex flex-col", children: children }) }), showScrollButton && (_jsx("button", { type: "button", onClick: () => scrollToBottom(true), className: cn("absolute bottom-4 left-1/2 -translate-x-1/2 z-10", "flex items-center justify-center p-2 rounded-full", "bg-card border border-border shadow-lg", "text-foreground", "hover:bg-accent hover:text-accent-foreground", "transition-all duration-200 ease-in-out", "animate-in fade-in slide-in-from-bottom-2"), "aria-label": "Scroll to bottom", children: _jsx(ArrowDown, { className: "size-4" }) }))] }));
 });
 ChatLayoutMessages.displayName = "ChatLayout.Messages";
 const ChatLayoutFooter = React.forwardRef(({ className, children, ...props }, ref) => {

package/dist/gui/components/SubAgentDetails.js

@@ -19,7 +19,8 @@ export function SubAgentDetails({ port, sessionId, host, parentStatus, agentName
     // Use controlled state if provided, otherwise use internal state
     const isExpanded = controlledIsExpanded ?? internalIsExpanded;
     const setIsExpanded = onExpandChange ?? setInternalIsExpanded;
-    const [isThinkingExpanded, setIsThinkingExpanded] = useState(false);
+    // Start with Thinking expanded while running to show the live stream
+    const [isThinkingExpanded, setIsThinkingExpanded] = useState(true);
     const [isNearBottom, setIsNearBottom] = useState(true);
     const thinkingContainerRef = useRef(null);
     // Only use SSE streaming if not in replay mode and port/sessionId provided
@@ -99,6 +100,16 @@ export function SubAgentDetails({ port, sessionId, host, parentStatus, agentName
         checkScrollPosition(); // Check initial position
         return () => container.removeEventListener("scroll", handleScroll);
     }, [checkScrollPosition, isThinkingExpanded, isExpanded]);
+    // When thinking section expands, scroll to bottom and reset follow state
+    useEffect(() => {
+        if (isThinkingExpanded) {
+            setIsNearBottom(true);
+            // Use requestAnimationFrame to ensure DOM has rendered
+            requestAnimationFrame(() => {
+                scrollToBottom();
+            });
+        }
+    }, [isThinkingExpanded, scrollToBottom]);
     // Get last line of streaming content for preview
     const lastLine = currentMessage?.content
         ? currentMessage.content.split("\n").filter(Boolean).pop() || ""
@@ -109,7 +120,7 @@ export function SubAgentDetails({ port, sessionId, host, parentStatus, agentName
         ? (query.split("\n")[0] ?? "").slice(0, 100) +
             (query.length > 100 ? "..." : "")
         : "";
-    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 &&
+    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: "Stream" }), _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 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)))

package/dist/gui/components/ToolOperation.js

@@ -8,6 +8,7 @@ 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
@@ -38,6 +39,14 @@ export function ToolOperation({ toolCalls, isGrouped = false, autoMinimize = tru
     // For single tool call, extract it
     const singleToolCall = toolCalls.length === 1 ? toolCalls[0] : null;
     const isTodoWrite = singleToolCall?.title === "todo_write";
+    // 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
@@ -75,6 +84,11 @@ export function ToolOperation({ toolCalls, isGrouped = false, autoMinimize = tru
                 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
@@ -83,7 +97,15 @@ export function ToolOperation({ toolCalls, isGrouped = false, autoMinimize = tru
                 setIsMinimized(false);
             }
         }
-    }, [isTodoWrite, layoutContext, isExpanded, isMinimized, singleToolCall]);
+    }, [
+        isTodoWrite,
+        layoutContext,
+        isExpanded,
+        isMinimized,
+        singleToolCall,
+        isSubagentCall,
+        isSubagentExpanded,
+    ]);
     // Get icon for display
     const getIcon = () => {
         if (isGrouped) {
@@ -166,15 +188,33 @@ export function ToolOperation({ toolCalls, isGrouped = false, autoMinimize = tru
                                 }, transition: getTransition(shouldReduceMotion ?? false, {
                                     duration: motionDuration.normal,
                                     ease: motionEasing.smooth,
-                                }), className: "h-3 w-3 text-text-secondary/70 group-hover:text-text-secondary transition-colors", children: _jsx(ChevronDown, { className: "h-3 w-3" }) }))] }), !isGrouped && singleToolCall?.subline && (_jsx("span", { className: "text-paragraph-sm text-text-secondary/70 pl-4.5", children: singleToolCall.subline })), isGrouped && !isExpanded && (_jsx("span", { className: "text-paragraph-sm text-text-secondary/70 pl-4.5", children: displayText }))] }), _jsx(AnimatePresence, { initial: false, children: !isTodoWrite && isExpanded && (_jsx(motion.div, { initial: "collapsed", animate: "expanded", exit: "collapsed", variants: expandCollapseVariants, transition: getTransition(shouldReduceMotion ?? false, {
+                                }), className: "h-3 w-3 text-text-secondary/70 group-hover:text-text-secondary transition-colors", children: _jsx(ChevronDown, { className: "h-3 w-3" }) }))] }), !isGrouped && singleToolCall?.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("div", { className: "flex items-start gap-1.5", children: _jsx("div", { className: "flex-1 ml-5", children: _jsx(ToolOperationDetails, { toolCall: toolCall }) }) }, toolCall.id))) })) : (
+                    _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
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@townco/ui",
-  "version": "0.1.69",
+  "version": "0.1.71",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -49,7 +49,7 @@
     "@radix-ui/react-slot": "^1.2.4",
     "@radix-ui/react-tabs": "^1.1.13",
     "@radix-ui/react-tooltip": "^1.2.8",
-    "@townco/core": "0.0.47",
+    "@townco/core": "0.0.49",
     "@uiw/react-json-view": "^2.0.0-alpha.39",
     "bun": "^1.3.1",
     "class-variance-authority": "^0.7.1",
@@ -67,7 +67,7 @@
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4.1.17",
-    "@townco/tsconfig": "0.1.66",
+    "@townco/tsconfig": "0.1.68",
     "@types/node": "^24.10.0",
     "@types/react": "^19.2.2",
     "ink": "^6.4.0",