@townco/ui 0.1.50 → 0.1.52

package/dist/gui/components/ChatLayout.js

@@ -38,11 +38,12 @@ const ChatLayoutBody = React.forwardRef(({ showToaster = true, className, childr
     return (_jsxs("div", { ref: ref, className: cn("relative flex flex-1 flex-col overflow-hidden", className), ...props, children: [children, showToaster && _jsx(Toaster, {})] }));
 });
 ChatLayoutBody.displayName = "ChatLayout.Body";
-const ChatLayoutMessages = React.forwardRef(({ className, children, onScrollChange, showScrollToBottom = true, ...props }, ref) => {
+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);
     // Check if user is at bottom of scroll
@@ -102,6 +103,74 @@ const ChatLayoutMessages = React.forwardRef(({ className, children, onScrollChan
             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)
+    React.useEffect(() => {
+        if (!initialScrollToBottom)
+            return;
+        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;
+                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) {

package/dist/gui/components/ChatPanelTabContent.js

@@ -6,7 +6,7 @@ import { FileSystemView } from "./FileSystemView.js";
 import { SourceListItem } from "./SourceListItem.js";
 import { TodoList } from "./TodoList.js";
 export const TodoTabContent = React.forwardRef(({ todos = [], className, ...props }, ref) => {
-    return (_jsx("div", { ref: ref, className: cn("space-y-2", className), ...props, children: _jsx(TodoList, { todos: todos }) }));
+    return (_jsx("div", { ref: ref, className: cn("h-full", className), ...props, children: _jsx(TodoList, { todos: todos, className: "h-full" }) }));
 });
 TodoTabContent.displayName = "TodoTabContent";
 export const FilesTabContent = React.forwardRef(({ files = [], provider, onFileSelect, className, ...props }, ref) => {
@@ -42,6 +42,6 @@ export const DatabaseTabContent = React.forwardRef(({ data, className, ...props
 });
 DatabaseTabContent.displayName = "DatabaseTabContent";
 export const SettingsTabContent = React.forwardRef(({ tools = [], mcps = [], subagents = [], className, ...props }, ref) => {
-    return (_jsxs("div", { ref: ref, className: cn("space-y-6", className), ...props, children: [_jsxs("div", { className: "space-y-3", children: [_jsx("h3", { className: "font-semibold text-subheading", children: "Tools" }), tools.length > 0 ? (_jsx("div", { className: "space-y-2", children: tools.map((tool) => (_jsxs("div", { className: "p-3 border border-border rounded-lg bg-muted/30", children: [_jsx("div", { className: "font-medium text-paragraph-sm", children: tool.prettyName || tool.name }), tool.description && (_jsx("div", { className: "text-caption text-muted-foreground mt-1 line-clamp-1", children: tool.description }))] }, tool.name))) })) : (_jsx("p", { className: "text-paragraph-sm text-muted-foreground", children: "No tools available" }))] }), _jsxs("div", { className: "space-y-3", children: [_jsx("h3", { className: "font-semibold text-subheading", children: "MCP Servers" }), mcps.length > 0 ? (_jsx("div", { className: "space-y-2", children: mcps.map((mcp) => (_jsxs("div", { className: "p-3 border border-border rounded-lg bg-muted/30", children: [_jsx("div", { className: "font-medium text-paragraph-sm", children: mcp.name }), _jsxs("div", { className: "text-caption text-muted-foreground mt-1", children: ["Transport: ", mcp.transport] })] }, mcp.name))) })) : (_jsx("p", { className: "text-paragraph-sm text-muted-foreground", children: "No MCP servers connected" }))] }), _jsxs("div", { className: "space-y-3", children: [_jsx("h3", { className: "font-semibold text-subheading", children: "Subagents" }), subagents.length > 0 ? (_jsx("div", { className: "space-y-2", children: subagents.map((subagent) => (_jsxs("div", { className: "p-3 border border-border rounded-lg bg-muted/30", children: [_jsx("div", { className: "font-medium text-paragraph-sm", children: subagent.name }), _jsx("div", { className: "text-caption text-muted-foreground mt-1 line-clamp-2", children: subagent.description })] }, subagent.name))) })) : (_jsx("p", { className: "text-paragraph-sm text-muted-foreground", children: "No subagents available" }))] })] }));
+    return (_jsxs("div", { ref: ref, className: cn("space-y-6", className), ...props, children: [_jsxs("div", { className: "space-y-3 p-2", children: [_jsx("h3", { className: "font-semibold text-subheading", children: "Tools" }), tools.length > 0 ? (_jsx("div", { className: "space-y-2", children: tools.map((tool) => (_jsxs("div", { className: "p-3 border border-border rounded-lg bg-muted/30", children: [_jsx("div", { className: "font-medium text-paragraph-sm", children: tool.prettyName || tool.name }), tool.description && (_jsx("div", { className: "text-caption text-muted-foreground mt-1 line-clamp-1", children: tool.description }))] }, tool.name))) })) : (_jsx("p", { className: "text-paragraph-sm text-muted-foreground", children: "No tools available" }))] }), _jsxs("div", { className: "space-y-3 p-2", children: [_jsx("h3", { className: "font-semibold text-subheading", children: "MCP Servers" }), mcps.length > 0 ? (_jsx("div", { className: "space-y-2", children: mcps.map((mcp) => (_jsxs("div", { className: "p-3 border border-border rounded-lg bg-muted/30", children: [_jsx("div", { className: "font-medium text-paragraph-sm", children: mcp.name }), _jsxs("div", { className: "text-caption text-muted-foreground mt-1", children: ["Transport: ", mcp.transport] })] }, mcp.name))) })) : (_jsx("p", { className: "text-paragraph-sm text-muted-foreground", children: "No MCP servers connected" }))] }), _jsxs("div", { className: "space-y-3 p-2", children: [_jsx("h3", { className: "font-semibold text-subheading", children: "Subagents" }), subagents.length > 0 ? (_jsx("div", { className: "space-y-2", children: subagents.map((subagent) => (_jsxs("div", { className: "p-3 border border-border rounded-lg bg-muted/30", children: [_jsx("div", { className: "font-medium text-paragraph-sm", children: subagent.name }), _jsx("div", { className: "text-caption text-muted-foreground mt-1 line-clamp-2", children: subagent.description })] }, subagent.name))) })) : (_jsx("p", { className: "text-paragraph-sm text-muted-foreground", children: "No subagents available" }))] })] }));
 });
 SettingsTabContent.displayName = "SettingsTabContent";

package/dist/gui/components/ChatSecondaryPanel.js

@@ -60,7 +60,7 @@ export const ChatSecondaryPanel = React.forwardRef(({ client, todos, variant = "
                 // Pills variant - Simple background highlight (Figma design)
                 _jsx(TabsList, { className: cn("w-full justify-start bg-transparent p-0 h-auto", "gap-1"), children: tabs.map((tab) => {
                         const Icon = tab.icon;
-                        return (_jsxs(TabsTrigger, { value: tab.id, className: cn("gap-2 px-3 py-1.5 rounded-lg text-paragraph-sm font-medium", "data-[state=active]:bg-zinc-100 data-[state=active]:text-foreground", "data-[state=inactive]:text-muted-foreground"), children: [showIcons && Icon && _jsx(Icon, { className: "size-4" }), tab.label] }, tab.id));
+                        return (_jsxs(TabsTrigger, { value: tab.id, className: cn("gap-2 px-3 py-1.5 rounded-lg text-paragraph-sm font-medium", "data-[state=active]:bg-accent data-[state=active]:text-foreground", "data-[state=inactive]:text-muted-foreground"), children: [showIcons && Icon && _jsx(Icon, { className: "size-4" }), tab.label] }, tab.id));
                     }) })) : (
                 // Animated variant - Clip-path animation (original style)
                 _jsxs("div", { className: "relative mb-4 border-border", children: [_jsx(TabsList, { className: "bg-transparent p-0 h-auto rounded-none w-full border-none", children: tabs.map((tab) => (_jsx(TabsTrigger, { value: tab.id, className: "px-3 py-1 text-paragraph-sm font-medium rounded-none text-foreground opacity-60 data-[state=active]:opacity-100 data-[state=active]:bg-transparent data-[state=active]:shadow-none", children: tab.label }, tab.id))) }), _jsx("div", { ref: containerRef, className: "absolute top-0 left-0 w-full overflow-hidden z-10 pointer-events-none", style: {

package/dist/gui/components/ChatView.js

@@ -1,12 +1,12 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createLogger } from "@townco/core";
-import { ArrowUp, Bug, ChevronUp, Code, PanelRight, Settings, Sparkles, X, } from "lucide-react";
-import { useEffect, useState } from "react";
+import { ArrowUp, Bug, ChevronDown, ChevronUp, Code, PanelRight, Plus, Settings, Sparkles, X, } from "lucide-react";
+import { useCallback, useEffect, useState } from "react";
 import { useChatMessages, useChatSession, useToolCalls, } from "../../core/hooks/index.js";
 import { selectTodosForCurrentSession, useChatStore, } from "../../core/store/chat-store.js";
 import { calculateTokenPercentage, formatTokenPercentage, } from "../../core/utils/model-context.js";
 import { cn } from "../lib/utils.js";
-import { ChatEmptyState, ChatHeader, ChatInputActions, ChatInputAttachment, ChatInputCommandMenu, ChatInputField, ChatInputRoot, ChatInputSubmit, ChatInputToolbar, ChatInputVoiceInput, ChatLayout, ContextUsageButton, FilesTabContent, IconButton, Message, MessageContent, PanelTabsHeader, SettingsTabContent, SourcesTabContent, Tabs, TabsContent, ThemeToggle, TodoTabContent, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "./index.js";
+import { ChatEmptyState, ChatHeader, ChatInputActions, ChatInputAttachment, ChatInputCommandMenu, ChatInputField, ChatInputRoot, ChatInputSubmit, ChatInputToolbar, ChatInputVoiceInput, ChatLayout, ContextUsageButton, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, FilesTabContent, IconButton, Message, MessageContent, PanelTabsHeader, SettingsTabContent, SourcesTabContent, Tabs, TabsContent, ThemeToggle, TodoTabContent, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "./index.js";
 const logger = createLogger("gui");
 // Helper component to provide openFiles callback
 function OpenFilesButton({ children, }) {
@@ -47,6 +47,69 @@ function SidebarHotkey() {
     }, [panelSize, setPanelSize]);
     return null;
 }
+// Format relative time from date string
+function formatRelativeTime(dateString) {
+    const date = new Date(dateString);
+    const now = new Date();
+    const diffMs = now.getTime() - date.getTime();
+    const diffMins = Math.floor(diffMs / 60000);
+    const diffHours = Math.floor(diffMs / 3600000);
+    const diffDays = Math.floor(diffMs / 86400000);
+    if (diffMins < 1)
+        return "Just now";
+    if (diffMins < 60)
+        return `${diffMins}m ago`;
+    if (diffHours < 24)
+        return `${diffHours}h ago`;
+    if (diffDays < 7)
+        return `${diffDays}d ago`;
+    return date.toLocaleDateString();
+}
+// Session switcher dropdown component
+function SessionSwitcher({ agentName, client, currentSessionId, }) {
+    const [sessions, setSessions] = useState([]);
+    const [isLoading, setIsLoading] = useState(false);
+    const [isOpen, setIsOpen] = useState(false);
+    const fetchSessions = useCallback(async () => {
+        if (!client)
+            return;
+        setIsLoading(true);
+        try {
+            const sessionList = await client.listSessions();
+            setSessions(sessionList);
+        }
+        catch (error) {
+            logger.error("Failed to fetch sessions", { error });
+        }
+        finally {
+            setIsLoading(false);
+        }
+    }, [client]);
+    // Fetch sessions when dropdown opens
+    useEffect(() => {
+        if (isOpen) {
+            fetchSessions();
+        }
+    }, [isOpen, fetchSessions]);
+    const handleNewSession = () => {
+        // Clear session from URL and reload to start fresh
+        const url = new URL(window.location.href);
+        url.searchParams.delete("session");
+        window.location.href = url.toString();
+    };
+    const handleSessionSelect = (sessionId) => {
+        if (sessionId === currentSessionId) {
+            setIsOpen(false);
+            return;
+        }
+        // Update URL with session ID and reload
+        const url = new URL(window.location.href);
+        url.searchParams.set("session", sessionId);
+        window.location.href = url.toString();
+    };
+    return (_jsxs(DropdownMenu, { open: isOpen, onOpenChange: setIsOpen, children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs("button", { type: "button", className: "flex items-center gap-1 text-heading-4 text-foreground hover:text-foreground/80 transition-colors cursor-pointer", children: [agentName, _jsx(ChevronDown, { className: cn("size-4 text-muted-foreground transition-transform duration-200", isOpen && "rotate-180") })] }) }), _jsxs(DropdownMenuContent, { align: "start", className: "w-72", children: [_jsxs(DropdownMenuLabel, { className: "flex items-center justify-between", children: [_jsx("span", { children: "Sessions" }), isLoading && (_jsx("span", { className: "text-caption text-muted-foreground", children: "Loading..." }))] }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { onClick: handleNewSession, className: "gap-2", children: [_jsx(Plus, { className: "size-4" }), _jsx("span", { children: "New Session" })] }), sessions.length > 0 && _jsx(DropdownMenuSeparator, {}), _jsx("div", { className: "max-h-64 overflow-y-auto", children: sessions.map((session) => (_jsxs(DropdownMenuItem, { onClick: () => handleSessionSelect(session.sessionId), className: cn("flex flex-col items-start gap-0.5 py-2", session.sessionId === currentSessionId &&
+                                "bg-muted/50 font-medium"), children: [_jsxs("div", { className: "flex w-full items-center justify-between gap-2", children: [_jsx("span", { className: "truncate text-paragraph-sm", children: session.firstUserMessage || "Empty session" }), session.sessionId === currentSessionId && (_jsx("span", { className: "shrink-0 text-caption text-primary", children: "Current" }))] }), _jsxs("span", { className: "text-caption text-muted-foreground", children: [formatRelativeTime(session.updatedAt), " \u2022 ", session.messageCount, " ", "messages"] })] }, session.sessionId))) }), sessions.length === 0 && !isLoading && (_jsx("div", { className: "px-2 py-4 text-center text-paragraph-sm text-muted-foreground", children: "No previous sessions" }))] })] }));
+}
 // Chat input with attachment handling
 function ChatInputWithAttachments({ client, startSession, placeholder, latestContextSize, currentModel, commandMenuItems, }) {
     const attachedFiles = useChatStore((state) => state.input.attachedFiles);
@@ -62,20 +125,24 @@ function ChatInputWithAttachments({ client, startSession, placeholder, latestCon
 // Controlled Tabs component for the aside panel
 function AsideTabs({ todos, tools, mcps, subagents, }) {
     const { activeTab, setActiveTab } = ChatLayout.useChatLayoutContext();
-    return (_jsxs(Tabs, { value: activeTab, onValueChange: (value) => setActiveTab(value), className: "flex flex-col h-full", children: [_jsx("div", { className: cn("border-b border-border bg-card", "px-6 py-2 h-16", "flex items-center", "[border-bottom-width:0.5px]"), children: _jsx(PanelTabsHeader, { showIcons: true, visibleTabs: ["todo", "files", "sources", "settings"], variant: "compact" }) }), _jsx(TabsContent, { value: "todo", className: "flex-1 p-4 mt-0", children: _jsx(TodoTabContent, { todos: todos }) }), _jsx(TabsContent, { value: "files", className: "flex-1 p-4 mt-0", children: _jsx(FilesTabContent, {}) }), _jsx(TabsContent, { value: "sources", className: "flex-1 p-4 mt-0", children: _jsx(SourcesTabContent, {}) }), _jsx(TabsContent, { value: "settings", className: "flex-1 p-4 mt-0 overflow-y-auto", children: _jsx(SettingsTabContent, { tools: tools ?? [], mcps: mcps ?? [], subagents: subagents ?? [] }) })] }));
+    return (_jsxs(Tabs, { value: activeTab, onValueChange: (value) => setActiveTab(value), className: "flex flex-col h-full", children: [_jsx("div", { className: cn("border-b border-border bg-card", "px-4 py-2 h-16", "flex items-center", "[border-bottom-width:0.5px]"), children: _jsx(PanelTabsHeader, { showIcons: true, visibleTabs: ["todo", "files", "sources", "settings"], variant: "compact" }) }), _jsx(TabsContent, { value: "todo", className: "flex-1 p-4 mt-0", children: _jsx(TodoTabContent, { todos: todos }) }), _jsx(TabsContent, { value: "files", className: "flex-1 p-4 mt-0", children: _jsx(FilesTabContent, {}) }), _jsx(TabsContent, { value: "sources", className: "flex-1 p-4 mt-0", children: _jsx(SourcesTabContent, {}) }), _jsx(TabsContent, { value: "settings", className: "flex-1 p-4 mt-0 overflow-y-auto", children: _jsx(SettingsTabContent, { tools: tools ?? [], mcps: mcps ?? [], subagents: subagents ?? [] }) })] }));
 }
 // Mobile header component that uses ChatHeader context
-function MobileHeader({ agentName, showHeader, }) {
+function MobileHeader({ agentName, showHeader, client, currentSessionId, }) {
     const { isExpanded, setIsExpanded } = ChatHeader.useChatHeaderContext();
-    return (_jsxs("div", { className: "flex lg:hidden items-center flex-1", children: [showHeader && (_jsx("div", { className: "flex items-center gap-2 flex-1", children: _jsx("h1", { className: "text-heading-4 text-foreground", children: agentName }) })), !showHeader && _jsx("div", { className: "flex-1" }), _jsx(ThemeToggle, {}), _jsx(IconButton, { "aria-label": "Toggle menu", onClick: () => setIsExpanded(!isExpanded), children: _jsx(ChevronUp, { className: cn("size-4 text-muted-foreground transition-transform duration-200", isExpanded ? "" : "rotate-180") }) })] }));
+    return (_jsxs("div", { className: "flex lg:hidden items-center flex-1", children: [showHeader && (_jsx("div", { className: "flex items-center gap-2 flex-1", children: _jsx(SessionSwitcher, { agentName: agentName, client: client, currentSessionId: currentSessionId }) })), !showHeader && _jsx("div", { className: "flex-1" }), _jsx(ThemeToggle, {}), _jsx(IconButton, { "aria-label": "Toggle menu", onClick: () => setIsExpanded(!isExpanded), children: _jsx(ChevronUp, { className: cn("size-4 text-muted-foreground transition-transform duration-200", isExpanded ? "" : "rotate-180") }) })] }));
 }
 // Header component that uses ChatLayout context (must be inside ChatLayout.Root)
-function AppChatHeader({ agentName, todos, sources, showHeader, sessionId, debuggerUrl, tools, mcps, subagents, }) {
+function AppChatHeader({ agentName, todos, sources, showHeader, sessionId, debuggerUrl, tools, mcps, subagents, client, }) {
     const { panelSize, setPanelSize } = ChatLayout.useChatLayoutContext();
-    const debuggerLink = sessionId && debuggerUrl ? `${debuggerUrl}/sessions/${sessionId}` : null;
-    return (_jsxs(ChatHeader.Root, { className: cn("border-b border-border bg-card relative lg:p-0", "[border-bottom-width:0.5px]"), children: [_jsxs("div", { className: "hidden lg:flex items-center w-full h-16 py-5 pl-6 pr-4", children: [showHeader && (_jsx("div", { className: "flex items-center gap-2 flex-1", children: _jsx("h1", { className: "text-heading-4 text-foreground", children: agentName }) })), !showHeader && _jsx("div", { className: "flex-1" }), debuggerUrl && (_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(IconButton, { "aria-label": "View session in debugger", disabled: !debuggerLink, asChild: !!debuggerLink, children: debuggerLink ? (_jsx("a", { href: debuggerLink, target: "_blank", rel: "noopener noreferrer", children: _jsx(Bug, { className: "size-4 text-muted-foreground" }) })) : (_jsx(Bug, { className: "size-4 text-muted-foreground" })) }) }), _jsx(TooltipContent, { children: _jsx("p", { children: "View session in debugger" }) })] }) })), _jsx(ThemeToggle, {}), _jsx(IconButton, { "aria-label": "Toggle sidebar", onClick: () => {
+    const debuggerLink = debuggerUrl
+        ? sessionId
+            ? `${debuggerUrl}/sessions/${sessionId}`
+            : debuggerUrl
+        : null;
+    return (_jsxs(ChatHeader.Root, { className: cn("border-b border-border bg-card relative lg:p-0", "[border-bottom-width:0.5px]"), children: [_jsxs("div", { className: "hidden lg:flex items-center w-full h-16 py-5 pl-6 pr-4", children: [showHeader && (_jsx("div", { className: "flex items-center gap-2 flex-1", children: _jsx(SessionSwitcher, { agentName: agentName, client: client, currentSessionId: sessionId }) })), !showHeader && _jsx("div", { className: "flex-1" }), debuggerUrl && (_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(IconButton, { "aria-label": "View session in debugger", disabled: !debuggerLink, asChild: !!debuggerLink, children: debuggerLink ? (_jsx("a", { href: debuggerLink, target: "_blank", rel: "noopener noreferrer", children: _jsx(Bug, { className: "size-4 text-muted-foreground" }) })) : (_jsx(Bug, { className: "size-4 text-muted-foreground" })) }) }), _jsx(TooltipContent, { children: _jsx("p", { children: sessionId ? "View session in debugger" : "Open debugger" }) })] }) })), _jsx(ThemeToggle, {}), _jsx(IconButton, { "aria-label": "Toggle sidebar", onClick: () => {
                             setPanelSize(panelSize === "hidden" ? "small" : "hidden");
-                        }, children: _jsx(PanelRight, { className: "size-4 text-muted-foreground" }) })] }), _jsx(MobileHeader, { agentName: agentName, showHeader: showHeader }), _jsx(ChatHeader.ExpandablePanel, { className: cn("pt-6 pb-8 px-6", "border-b border-border bg-card", "shadow-[0_4px_16px_0_rgba(0,0,0,0.04)]", "[border-bottom-width:0.5px]"), children: _jsxs(Tabs, { defaultValue: "todo", className: "w-full", children: [_jsx(PanelTabsHeader, { showIcons: true, visibleTabs: ["todo", "files", "sources", "settings"], variant: "default" }), _jsx(TabsContent, { value: "todo", className: "mt-4", children: _jsx(TodoTabContent, { todos: todos }) }), _jsx(TabsContent, { value: "files", className: "mt-4", children: _jsx(FilesTabContent, {}) }), _jsx(TabsContent, { value: "sources", className: "mt-4", children: _jsx(SourcesTabContent, { sources: sources }) }), _jsx(TabsContent, { value: "settings", className: "mt-4", children: _jsx(SettingsTabContent, { tools: tools ?? [], mcps: mcps ?? [], subagents: subagents ?? [] }) })] }) })] }));
+                        }, children: _jsx(PanelRight, { className: "size-4 text-muted-foreground" }) })] }), _jsx(MobileHeader, { agentName: agentName, showHeader: showHeader, client: client, currentSessionId: sessionId }), _jsx(ChatHeader.ExpandablePanel, { className: cn("pt-6 pb-8 px-6", "border-b border-border bg-card", "shadow-[0_4px_16px_0_rgba(0,0,0,0.04)]", "[border-bottom-width:0.5px]"), children: _jsxs(Tabs, { defaultValue: "todo", className: "w-full", children: [_jsx(PanelTabsHeader, { showIcons: true, visibleTabs: ["todo", "files", "sources", "settings"], variant: "default" }), _jsx(TabsContent, { value: "todo", className: "mt-4", children: _jsx(TodoTabContent, { todos: todos }) }), _jsx(TabsContent, { value: "files", className: "mt-4", children: _jsx(FilesTabContent, {}) }), _jsx(TabsContent, { value: "sources", className: "mt-4", children: _jsx(SourcesTabContent, { sources: sources }) }), _jsx(TabsContent, { value: "settings", className: "mt-4", children: _jsx(SettingsTabContent, { tools: tools ?? [], mcps: mcps ?? [], subagents: subagents ?? [] }) })] }) })] }));
 }
 export function ChatView({ client, initialSessionId, error: initError, debuggerUrl, }) {
     // Use shared hooks from @townco/ui/core - MUST be called before any early returns
@@ -95,6 +162,7 @@ export function ChatView({ client, initialSessionId, error: initError, debuggerU
     const [agentSubagents, setAgentSubagents] = useState([]);
     const [isLargeScreen, setIsLargeScreen] = useState(typeof window !== "undefined" ? window.innerWidth >= 1024 : true);
     const [placeholder, setPlaceholder] = useState("Type a message or / for commands...");
+    const [hideTopBar, setHideTopBar] = useState(false);
     // Log connection status changes
     useEffect(() => {
         logger.debug("Connection status changed", { status: connectionStatus });
@@ -141,6 +209,9 @@ export function ChatView({ client, initialSessionId, error: initError, debuggerU
                     subagents: agentInfo.subagents,
                 });
             }
+            if (agentInfo.uiConfig?.hideTopBar) {
+                setHideTopBar(true);
+            }
         }
     }, [client, sessionId, connectionStatus]);
     // Monitor screen size changes and update isLargeScreen state
@@ -220,7 +291,7 @@ export function ChatView({ client, initialSessionId, error: initError, debuggerU
             },
         },
     ];
-    return (_jsxs(ChatLayout.Root, { defaultPanelSize: "hidden", defaultActiveTab: "todo", children: [_jsx(SidebarHotkey, {}), _jsxs(ChatLayout.Main, { children: [_jsx(AppChatHeader, { agentName: agentName, todos: todos, sources: sources, showHeader: messages.length > 0, sessionId: sessionId, tools: agentTools, mcps: agentMcps, subagents: agentSubagents, ...(debuggerUrl && { debuggerUrl }) }), connectionStatus === "error" && error && (_jsx("div", { className: "border-b border-destructive/20 bg-destructive/10 px-6 py-4", children: _jsxs("div", { className: "flex items-start justify-between gap-4", children: [_jsxs("div", { className: "flex-1", children: [_jsx("h3", { className: "mb-1 text-paragraph-sm font-semibold text-destructive", children: "Connection Error" }), _jsx("p", { className: "whitespace-pre-line text-paragraph-sm text-foreground", children: error })] }), _jsx("button", { type: "button", onClick: connect, className: "rounded-lg bg-destructive px-4 py-2 text-paragraph-sm font-medium text-destructive-foreground transition-colors hover:bg-destructive-hover", children: "Retry" })] }) })), _jsxs(ChatLayout.Body, { children: [_jsx(ChatLayout.Messages, { children: messages.length === 0 ? (_jsx(OpenFilesButton, { children: ({ openFiles, openSettings }) => (_jsx("div", { className: "flex flex-1 items-center px-4", children: _jsx(ChatEmptyState, { title: agentName, description: agentDescription, suggestedPrompts: suggestedPrompts, onPromptClick: (prompt) => {
+    return (_jsxs(ChatLayout.Root, { defaultPanelSize: "hidden", defaultActiveTab: "todo", children: [_jsx(SidebarHotkey, {}), _jsxs(ChatLayout.Main, { children: [!hideTopBar && (_jsx(AppChatHeader, { agentName: agentName, todos: todos, sources: sources, showHeader: messages.length > 0, sessionId: sessionId, tools: agentTools, mcps: agentMcps, subagents: agentSubagents, client: client, ...(debuggerUrl && { debuggerUrl }) })), connectionStatus === "error" && error && (_jsx("div", { className: "border-b border-destructive/20 bg-destructive/10 px-6 py-4", children: _jsxs("div", { className: "flex items-start justify-between gap-4", children: [_jsxs("div", { className: "flex-1", children: [_jsx("h3", { className: "mb-1 text-paragraph-sm font-semibold text-destructive", children: "Connection Error" }), _jsx("p", { className: "whitespace-pre-line text-paragraph-sm text-foreground", children: error })] }), _jsx("button", { type: "button", onClick: connect, className: "rounded-lg bg-destructive px-4 py-2 text-paragraph-sm font-medium text-destructive-foreground transition-colors hover:bg-destructive-hover", children: "Retry" })] }) })), _jsxs(ChatLayout.Body, { children: [_jsx(ChatLayout.Messages, { children: messages.length === 0 ? (_jsx(OpenFilesButton, { children: ({ openFiles, openSettings }) => (_jsx("div", { className: "flex flex-1 items-center px-4", children: _jsx(ChatEmptyState, { title: agentName, titleElement: _jsx(SessionSwitcher, { agentName: agentName, client: client, currentSessionId: sessionId }), description: agentDescription, suggestedPrompts: suggestedPrompts, onPromptClick: (prompt) => {
                                                 sendMessage(prompt);
                                                 setPlaceholder("Type a message or / for commands...");
                                                 logger.info("Prompt clicked", { prompt });
@@ -232,7 +303,9 @@ export function ChatView({ client, initialSessionId, error: initError, debuggerU
                                         const previousMessage = isFirst ? null : messages[index - 1];
                                         let spacingClass = "mt-2";
                                         if (isFirst) {
-                                            spacingClass = "mt-2";
+                                            // First message needs more top margin if it's an assistant initial message
+                                            spacingClass =
+                                                message.role === "assistant" ? "mt-8" : "mt-2";
                                         }
                                         else if (message.role === "user") {
                                             // User message usually starts a new turn

package/dist/gui/components/PanelTabsHeader.js

@@ -35,7 +35,7 @@ export const PanelTabsHeader = React.forwardRef(({ showIcons = true, visibleTabs
     const gap = variant === "compact" ? "gap-[4px]" : "gap-3";
     return (_jsx(TabsList, { ref: ref, className: cn("w-full justify-start bg-transparent p-0 h-auto", gap, className), ...props, children: tabs.map((tab) => {
             const Icon = tab.icon;
-            return (_jsxs(TabsTrigger, { value: tab.id, className: cn("gap-2 px-3 py-1.5 rounded-lg text-paragraph-sm font-medium", "data-[state=active]:bg-muted data-[state=active]:text-foreground", "data-[state=inactive]:text-muted-foreground hover:text-foreground transition-colors"), children: [showIcons && Icon && _jsx(Icon, { className: "size-4" }), tab.label] }, tab.id));
+            return (_jsxs(TabsTrigger, { value: tab.id, className: cn("gap-2 px-3 py-1.5 rounded-lg text-paragraph-sm font-medium", "data-[state=active]:bg-accent data-[state=active]:text-foreground", "data-[state=inactive]:text-muted-foreground hover:text-foreground transition-colors"), children: [showIcons && Icon && _jsx(Icon, { className: "size-4" }), tab.label] }, tab.id));
         }) }));
 });
 PanelTabsHeader.displayName = "PanelTabsHeader";

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

@@ -0,0 +1,27 @@
+export interface SubAgentDetailsProps {
+    /** Sub-agent HTTP port */
+    port: number;
+    /** Sub-agent session ID */
+    sessionId: string;
+    /** Optional host (defaults to localhost) */
+    host?: string;
+    /** Parent tool call status - use this to determine if sub-agent is running */
+    parentStatus?: "pending" | "in_progress" | "completed" | "failed";
+    /** Sub-agent name (for display) */
+    agentName?: string | undefined;
+    /** Query sent to the sub-agent */
+    query?: string | undefined;
+    /** Controlled expanded state (optional - if not provided, uses internal state) */
+    isExpanded?: boolean;
+    /** Callback when expand state changes */
+    onExpandChange?: (expanded: boolean) => void;
+}
+/**
+ * SubAgentDetails component - displays streaming content from a sub-agent.
+ *
+ * This component:
+ * - Connects directly to the sub-agent's SSE endpoint
+ * - Displays streaming text and tool calls
+ * - Renders in a collapsible section (collapsed by default)
+ */
+export declare function SubAgentDetails({ port, sessionId, host, parentStatus, agentName, query, isExpanded: controlledIsExpanded, onExpandChange, }: SubAgentDetailsProps): import("react/jsx-runtime").JSX.Element;

package/dist/gui/components/SubAgentDetails.js

@@ -0,0 +1,121 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDown, CircleDot, Loader2 } from "lucide-react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { useSubagentStream } from "../../core/hooks/use-subagent-stream.js";
+const SCROLL_THRESHOLD = 50; // px from bottom to consider "at bottom"
+/**
+ * SubAgentDetails component - displays streaming content from a sub-agent.
+ *
+ * This component:
+ * - Connects directly to the sub-agent's SSE endpoint
+ * - Displays streaming text and tool calls
+ * - Renders in a collapsible section (collapsed by default)
+ */
+export function SubAgentDetails({ port, sessionId, host, parentStatus, agentName, query, isExpanded: controlledIsExpanded, onExpandChange, }) {
+    const [internalIsExpanded, setInternalIsExpanded] = useState(false);
+    // Use controlled state if provided, otherwise use internal state
+    const isExpanded = controlledIsExpanded ?? internalIsExpanded;
+    const setIsExpanded = onExpandChange ?? setInternalIsExpanded;
+    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 } : {}),
+    });
+    // Use parent status as primary indicator, fall back to hook's streaming state
+    // Parent is "in_progress" means sub-agent is definitely still running
+    const isRunning = parentStatus === "in_progress" ||
+        parentStatus === "pending" ||
+        hookIsStreaming;
+    // Get the current/latest message
+    const currentMessage = messages[messages.length - 1];
+    const hasContent = currentMessage &&
+        (currentMessage.content ||
+            (currentMessage.toolCalls && currentMessage.toolCalls.length > 0) ||
+            (currentMessage.contentBlocks &&
+                currentMessage.contentBlocks.length > 0));
+    // Auto-collapse Thinking when completed (so Output is the primary view)
+    const prevIsRunningRef = useRef(isRunning);
+    useEffect(() => {
+        if (prevIsRunningRef.current && !isRunning) {
+            // Just completed - collapse thinking to show output
+            setIsThinkingExpanded(false);
+        }
+        prevIsRunningRef.current = isRunning;
+    }, [isRunning]);
+    // Check if user is near bottom of scroll area
+    const checkScrollPosition = useCallback(() => {
+        const container = thinkingContainerRef.current;
+        if (!container)
+            return;
+        const { scrollTop, scrollHeight, clientHeight } = container;
+        const distanceFromBottom = scrollHeight - scrollTop - clientHeight;
+        setIsNearBottom(distanceFromBottom < SCROLL_THRESHOLD);
+    }, []);
+    // Scroll to bottom
+    const scrollToBottom = useCallback(() => {
+        const container = thinkingContainerRef.current;
+        if (!container)
+            return;
+        container.scrollTop = container.scrollHeight;
+    }, []);
+    // Auto-scroll when content changes and user is near bottom
+    useEffect(() => {
+        if (isNearBottom && (isRunning || hasContent)) {
+            scrollToBottom();
+        }
+    }, [
+        currentMessage?.content,
+        currentMessage?.toolCalls,
+        isNearBottom,
+        isRunning,
+        hasContent,
+        scrollToBottom,
+    ]);
+    // Set up scroll listener
+    useEffect(() => {
+        const container = thinkingContainerRef.current;
+        if (!container)
+            return;
+        const handleScroll = () => checkScrollPosition();
+        container.addEventListener("scroll", handleScroll, { passive: true });
+        checkScrollPosition(); // Check initial position
+        return () => container.removeEventListener("scroll", handleScroll);
+    }, [checkScrollPosition, isThinkingExpanded, isExpanded]);
+    // Get last line of streaming content for preview
+    const lastLine = currentMessage?.content
+        ? currentMessage.content.split("\n").filter(Boolean).pop() || ""
+        : "";
+    const previewText = lastLine.length > 100 ? `${lastLine.slice(0, 100)}...` : lastLine;
+    // Get first line of query for fallback preview
+    const queryFirstLine = query
+        ? (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 &&
+                                                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 })] }))] }))] }));
+}
+/**
+ * Simple tool call display for sub-agent tool calls
+ */
+function SubagentToolCallItem({ toolCall }) {
+    const statusIcon = {
+        pending: "...",
+        in_progress: "",
+        completed: "",
+        failed: "",
+    }[toolCall.status];
+    const statusColor = {
+        pending: "text-muted-foreground",
+        in_progress: "text-blue-500",
+        completed: "text-green-500",
+        failed: "text-destructive",
+    }[toolCall.status];
+    return (_jsxs("div", { className: "flex items-center gap-2 text-[10px] text-muted-foreground", children: [_jsx("span", { className: statusColor, children: statusIcon }), _jsx("span", { className: "font-medium", children: toolCall.prettyName || toolCall.title }), toolCall.status === "in_progress" && (_jsx(Loader2, { className: "h-2.5 w-2.5 animate-spin" }))] }));
+}

package/dist/gui/components/TodoList.js

@@ -1,11 +1,21 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SquareCheckBig } from "lucide-react";
 import * as React from "react";
 import { cn } from "../lib/utils.js";
 import { TodoListItem } from "./TodoListItem.js";
+/**
+ * Empty state component for the todo list
+ */
+function TodoListEmptyState() {
+    return (_jsxs("div", { className: "flex flex-col items-center justify-center h-full gap-3", children: [_jsx(SquareCheckBig, { className: "size-8 text-neutral-300" }), _jsxs("p", { className: "text-base leading-6 text-neutral-400 text-center", children: ["There's nothing on the", _jsx("br", {}), "to-do list yet."] })] }));
+}
 export const TodoList = React.forwardRef(({ client, todos, className, ...props }, ref) => {
     // For now, just use prop-based todos
     // Future: Add hook to get todos from store when available
     const todosToDisplay = todos || [];
-    return (_jsx("div", { ref: ref, className: cn("space-y-2 max-h-64 overflow-y-auto", className), ...props, children: todosToDisplay.length === 0 ? (_jsx("p", { className: "text-paragraph-sm text-foreground opacity-60 italic", children: "No tasks yet." })) : (todosToDisplay.map((todo) => (_jsx(TodoListItem, { todo: todo }, todo.id)))) }));
+    if (todosToDisplay.length === 0) {
+        return (_jsx("div", { ref: ref, className: cn("h-full", className), ...props, children: _jsx(TodoListEmptyState, {}) }));
+    }
+    return (_jsx("div", { ref: ref, className: cn("space-y-2 max-h-64 overflow-y-auto", className), ...props, children: todosToDisplay.map((todo) => (_jsx(TodoListItem, { todo: todo }, todo.id))) }));
 });
 TodoList.displayName = "TodoList";

package/dist/gui/components/ToolCall.js

@@ -1,8 +1,9 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import JsonView from "@uiw/react-json-view";
-import { AlertCircle, BrainCircuit, CheckSquare, ChevronDown, ChevronRight, Cloud, Edit, FileText, Globe, Image, Link, Search, Wrench, } from "lucide-react";
+import { AlertCircle, CheckSquare, ChevronDown, ChevronRight, CircleDot, Cloud, Edit, FileText, Globe, Image, Link, Search, Wrench, } from "lucide-react";
 import React, { useState } from "react";
 import { ChatLayout } from "./index.js";
+import { SubAgentDetails } from "./SubAgentDetails.js";
 import { useTheme } from "./ThemeProvider.js";
 /**
  * Map of icon names to Lucide components
@@ -17,7 +18,7 @@ const ICON_MAP = {
     FileText: FileText,
     Edit: Edit,
     Wrench: Wrench,
-    BrainCircuit: BrainCircuit,
+    CircleDot: CircleDot,
 };
 /**
  * Tool call kind icons (using emoji for simplicity)
@@ -39,12 +40,14 @@ const _kindIcons = {
  */
 export function ToolCall({ toolCall }) {
     const [isExpanded, setIsExpanded] = useState(false);
+    const [isSubagentExpanded, setIsSubagentExpanded] = useState(false);
     const { resolvedTheme } = useTheme();
-    // Detect TodoWrite tool
+    // Detect TodoWrite tool and subagent
     const isTodoWrite = toolCall.title === "todo_write";
+    const isSubagentCall = !!(toolCall.subagentPort && toolCall.subagentSessionId);
     // Safely access ChatLayout context - will be undefined if not within ChatLayout
     const layoutContext = React.useContext(ChatLayout.Context);
-    // Click handler: toggle sidepanel for TodoWrite, expand for others
+    // Click handler: toggle sidepanel for TodoWrite, subagent details for subagents, expand for others
     const handleHeaderClick = React.useCallback(() => {
         if (isTodoWrite && layoutContext) {
             // Toggle sidepanel - close if already open on todo tab, otherwise open
@@ -57,17 +60,45 @@ export function ToolCall({ toolCall }) {
                 layoutContext.setActiveTab("todo");
             }
         }
+        else if (isSubagentCall) {
+            // Toggle subagent details
+            setIsSubagentExpanded(!isSubagentExpanded);
+        }
         else {
             // Normal expand/collapse
             setIsExpanded(!isExpanded);
         }
-    }, [isTodoWrite, layoutContext, isExpanded]);
+    }, [
+        isTodoWrite,
+        layoutContext,
+        isExpanded,
+        isSubagentCall,
+        isSubagentExpanded,
+    ]);
     // Determine which icon to show
     const IconComponent = toolCall.icon && ICON_MAP[toolCall.icon]
         ? ICON_MAP[toolCall.icon]
-        : BrainCircuit;
+        : CircleDot;
     // Determine display name
     const displayName = toolCall.prettyName || toolCall.title;
+    // Determine icon color based on status (especially for subagents)
+    const isSubagentRunning = isSubagentCall &&
+        (toolCall.status === "in_progress" || toolCall.status === "pending");
+    const isSubagentFailed = isSubagentCall && toolCall.status === "failed";
+    const iconColorClass = isSubagentCall
+        ? isSubagentFailed
+            ? "text-destructive"
+            : isSubagentRunning
+                ? "text-foreground animate-pulse"
+                : "text-green-500"
+        : "text-muted-foreground";
+    const statusTooltip = isSubagentCall
+        ? isSubagentFailed
+            ? "Sub-agent failed"
+            : isSubagentRunning
+                ? "Sub-agent running"
+                : "Sub-agent completed"
+        : undefined;
     // Check if there's an error
     const hasError = toolCall.status === "failed" || !!toolCall.error;
     // Check if this is a preliminary (pending) tool call without full details yet
@@ -108,9 +139,11 @@ export function ToolCall({ toolCall }) {
     if (isPreliminary) {
         return (_jsx("div", { className: "flex flex-col my-4", children: _jsxs("span", { className: "text-paragraph-sm text-muted-foreground/50", children: ["Invoking ", displayName] }) }));
     }
-    return (_jsxs("div", { className: "flex flex-col my-4", children: [_jsxs("button", { type: "button", className: "flex flex-col items-start gap-0.5 cursor-pointer bg-transparent border-none p-0 text-left group w-fit", onClick: handleHeaderClick, "aria-expanded": isTodoWrite ? undefined : isExpanded, children: [_jsxs("div", { className: "flex items-center gap-1.5 text-[11px] font-medium text-muted-foreground", children: [_jsx("div", { className: "text-muted-foreground", children: _jsx(IconComponent, { className: "h-3 w-3" }) }), _jsx("span", { className: "text-paragraph-sm text-muted-foreground", children: displayName }), hasError && _jsx(AlertCircle, { className: "h-3 w-3 text-destructive" }), isTodoWrite ? (_jsx(ChevronRight, { className: "h-3 w-3 text-muted-foreground/70" })) : (_jsx(ChevronDown, { className: `h-3 w-3 text-muted-foreground/70 transition-transform duration-200 ${isExpanded ? "rotate-180" : ""}` }))] }), toolCall.subline && (_jsx("span", { className: "text-paragraph-sm text-muted-foreground/70 pl-4.5", children: toolCall.subline }))] }), !isTodoWrite && isExpanded && (_jsxs("div", { className: "mt-2 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-muted-foreground uppercase tracking-wider mb-1.5 font-sans", children: "Files" }), _jsx("ul", { className: "space-y-1", children: toolCall.locations.map((loc) => (_jsxs("li", { className: "font-mono text-[11px] text-foreground bg-muted px-1.5 py-0.5 rounded w-fit", children: [loc.path, loc.line !== null &&
+    return (_jsxs("div", { className: "flex flex-col my-4", children: [_jsxs("button", { type: "button", className: "flex flex-col items-start gap-0.5 cursor-pointer bg-transparent border-none p-0 text-left group w-fit", onClick: handleHeaderClick, "aria-expanded": isTodoWrite ? undefined : isExpanded, children: [_jsxs("div", { className: "flex items-center gap-1.5 text-[11px] font-medium text-muted-foreground", children: [_jsx("div", { className: iconColorClass, title: statusTooltip, children: _jsx(IconComponent, { className: "h-3 w-3" }) }), _jsx("span", { className: "text-paragraph-sm text-muted-foreground", children: displayName }), hasError && _jsx(AlertCircle, { className: "h-3 w-3 text-destructive" }), isTodoWrite ? (_jsx(ChevronRight, { className: "h-3 w-3 text-muted-foreground/70" })) : (_jsx(ChevronDown, { className: `h-3 w-3 text-muted-foreground/70 transition-transform duration-200 ${isExpanded ? "rotate-180" : ""}` }))] }), toolCall.subline && (_jsx("span", { className: "text-paragraph-sm text-muted-foreground/70 pl-4.5", children: toolCall.subline }))] }), !isTodoWrite && isSubagentCall && (_jsx("div", { className: "pl-4.5", children: _jsx(SubAgentDetails, { port: toolCall.subagentPort, sessionId: toolCall.subagentSessionId, parentStatus: toolCall.status, agentName: toolCall.rawInput?.agentName, query: toolCall.rawInput?.query, isExpanded: isSubagentExpanded, onExpandChange: setIsSubagentExpanded }) })), !isTodoWrite && !isSubagentCall && isExpanded && (_jsxs("div", { className: "mt-2 text-sm border border-border rounded-lg bg-card overflow-hidden w-full", children: [toolCall.rawInput &&
+                        Object.keys(toolCall.rawInput).length > 0 &&
+                        !toolCall.subagentPort && (_jsxs("div", { className: "p-3 border-b border-border", children: [_jsx("div", { className: "text-[10px] font-bold text-muted-foreground uppercase tracking-wider mb-1.5 font-sans", children: "Input" }), _jsx("div", { className: "text-[11px] font-mono text-foreground", children: _jsx(JsonView, { value: toolCall.rawInput, collapsed: false, displayDataTypes: false, displayObjectSize: false, enableClipboard: true, style: jsonStyle }) })] })), toolCall.locations && toolCall.locations.length > 0 && (_jsxs("div", { className: "p-3 border-b border-border", children: [_jsx("div", { className: "text-[10px] font-bold text-muted-foreground uppercase tracking-wider mb-1.5 font-sans", children: "Files" }), _jsx("ul", { className: "space-y-1", children: toolCall.locations.map((loc) => (_jsxs("li", { className: "font-mono text-[11px] text-foreground bg-muted px-1.5 py-0.5 rounded w-fit", children: [loc.path, loc.line !== null &&
                                             loc.line !== undefined &&
-                                            `:${loc.line}`] }, `${loc.path}:${loc.line ?? ""}`))) })] })), toolCall.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-muted-foreground uppercase tracking-wider mb-1.5 font-sans", children: "Input" }), _jsx("div", { className: "text-[11px] font-mono text-foreground", children: _jsx(JsonView, { value: toolCall.rawInput, collapsed: false, displayDataTypes: false, displayObjectSize: false, enableClipboard: true, style: jsonStyle }) })] })), (toolCall.content && toolCall.content.length > 0) ||
+                                            `:${loc.line}`] }, `${loc.path}:${loc.line ?? ""}`))) })] })), (toolCall.content && toolCall.content.length > 0) ||
                         toolCall.error ? (_jsxs("div", { className: "p-3 border-b border-border last:border-0", children: [_jsx("div", { className: "text-[10px] font-bold text-muted-foreground uppercase tracking-wider mb-1.5 font-sans", children: "Output" }), _jsxs("div", { className: "space-y-2 text-[11px] text-foreground", children: [toolCall.content?.map((block, idx) => {
                                         // Generate a stable key based on content
                                         const getBlockKey = () => {

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

@@ -34,6 +34,7 @@ export { Response, type ResponseProps } from "./Response.js";
 export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, } from "./Select.js";
 export { Toaster } from "./Sonner.js";
 export { type SourceItem, SourceListItem, type SourceListItemProps, } from "./SourceListItem.js";
+export { SubAgentDetails, type SubAgentDetailsProps, } from "./SubAgentDetails.js";
 export { Tabs, TabsContent, TabsList, TabsTrigger } from "./Tabs.js";
 export { Task, type TaskItem, TaskList, type TaskListProps, type TaskProps, } from "./Task.js";
 export { Textarea, type TextareaProps, textareaVariants } from "./Textarea.js";

package/dist/gui/components/index.js

@@ -40,6 +40,7 @@ export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScro
 export { Toaster } from "./Sonner.js";
 // Toast components
 export { SourceListItem, } from "./SourceListItem.js";
+export { SubAgentDetails, } from "./SubAgentDetails.js";
 export { Tabs, TabsContent, TabsList, TabsTrigger } from "./Tabs.js";
 // Task/Todo components
 export { Task, TaskList, } from "./Task.js";