@townco/ui 0.1.76 → 0.1.78

package/dist/gui/components/ChatLayout.js

@@ -1,10 +1,14 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { AnimatePresence, motion, useMotionValue } from "framer-motion";
-import { ArrowDown } from "lucide-react";
+import { ArrowDown, X } from "lucide-react";
 import * as React from "react";
+import { ASIDE_WIDTH_DEFAULT, ASIDE_WIDTH_MAX, ASIDE_WIDTH_MIN, } from "../constants.js";
+import { useLockBodyScroll } from "../hooks/use-lock-body-scroll.js";
+import { useIsMobile } from "../hooks/use-mobile.js";
 import { useScrollToBottom } from "../hooks/use-scroll-to-bottom.js";
-import { motionEasing } from "../lib/motion.js";
+import { asideContentTransition, asideContentVariants, asideMobileTransition, asideMobileVariants, motionEasing, } from "../lib/motion.js";
 import { cn } from "../lib/utils.js";
+import { IconButton } from "./IconButton.js";
 import { Toaster } from "./Sonner.js";
 const ChatLayoutContext = React.createContext(undefined);
 const useChatLayoutContext = () => {
@@ -18,17 +22,29 @@ const ChatLayoutRoot = React.forwardRef(({ defaultSidebarOpen = false, defaultPa
     const [sidebarOpen, setSidebarOpen] = React.useState(defaultSidebarOpen);
     const [panelSize, setPanelSize] = React.useState(defaultPanelSize);
     const [activeTab, setActiveTab] = React.useState(defaultActiveTab);
-    // Right panel state (derived from panelSize for backwards compatibility)
-    const [panelOpen, setPanelOpen] = React.useState(defaultPanelSize !== "hidden");
+    // Derive panelOpen from panelSize (single source of truth)
+    const panelOpen = React.useMemo(() => panelSize !== "hidden", [panelSize]);
+    // Track if toggle is in progress to prevent rapid toggling
+    const isTogglingRef = React.useRef(false);
+    // Track if aside panel is being dragged (for Main reflow coordination)
+    const [isDraggingAside, setIsDraggingAside] = React.useState(false);
     // Helper to toggle the right panel
     const togglePanel = React.useCallback(() => {
+        // Prevent rapid toggling during animation
+        if (isTogglingRef.current) {
+            return;
+        }
+        isTogglingRef.current = true;
         setPanelSize((size) => (size === "hidden" ? "large" : "hidden"));
-        setPanelOpen((open) => !open);
+        // Reset after animation duration + buffer
+        setTimeout(() => {
+            isTogglingRef.current = false;
+        }, 600); // 500ms animation + 100ms buffer
+    }, []);
+    // Helper to set panel open/closed (for backwards compatibility)
+    const setPanelOpen = React.useCallback((open) => {
+        setPanelSize(open ? "large" : "hidden");
     }, []);
-    // Sync panelOpen with panelSize
-    React.useEffect(() => {
-        setPanelOpen(panelSize !== "hidden");
-    }, [panelSize]);
     return (_jsx(ChatLayoutContext.Provider, { value: {
             sidebarOpen,
             setSidebarOpen,
@@ -42,6 +58,8 @@ const ChatLayoutRoot = React.forwardRef(({ defaultSidebarOpen = false, defaultPa
             panelOpen,
             setPanelOpen,
             togglePanel,
+            isDraggingAside,
+            setIsDraggingAside,
         }, children: _jsx("div", { ref: ref, "data-panel-state": panelOpen ? "expanded" : "collapsed", className: cn("flex h-screen flex-row bg-background text-foreground overflow-hidden", className), ...props, children: children }) }));
 });
 ChatLayoutRoot.displayName = "ChatLayout.Root";
@@ -50,10 +68,17 @@ const ChatLayoutHeader = React.forwardRef(({ className, children, ...props }, re
 });
 ChatLayoutHeader.displayName = "ChatLayout.Header";
 const ChatLayoutMain = React.forwardRef(({ className, children }, ref) => {
-    return (_jsx(motion.div, { ref: ref, layout: true, transition: {
-            duration: 0.5,
-            ease: motionEasing.smooth,
-        }, className: cn("flex flex-1 flex-col overflow-hidden h-full min-w-0", className), children: children }));
+    const { isDraggingAside } = useChatLayoutContext();
+    return (_jsx(motion.div, { ref: ref, layout: true, transition: isDraggingAside
+            ? {
+                // Instant reflow during aside drag
+                duration: 0,
+            }
+            : {
+                // Smooth animation for panel open/close
+                duration: 0.5,
+                ease: motionEasing.smooth,
+            }, className: cn("flex flex-1 flex-col overflow-hidden h-full min-w-0", className), children: children }));
 });
 ChatLayoutMain.displayName = "ChatLayout.Main";
 const ChatLayoutBody = React.forwardRef(({ showToaster = true, className, children, ...props }, ref) => {
@@ -89,7 +114,7 @@ const ChatLayoutMessages = React.forwardRef(({ className, children, onScrollChan
     }, [initialScrollToBottom, containerRef]);
     // Show scroll button when not at bottom
     const showScrollButton = !isAtBottom && showScrollToBottom;
-    return (_jsxs("div", { className: "relative flex-1 overflow-hidden", children: [_jsxs("div", { ref: containerRef, className: cn("h-full overflow-y-auto flex flex-col", className), ...props, children: [_jsx("div", { className: "mx-auto max-w-chat flex-1 w-full flex flex-col", children: children }), _jsx("div", { ref: endRef, className: "min-h-[24px] min-w-[24px] shrink-0" })] }), showScrollButton && (_jsx("button", { type: "button", onClick: () => scrollToBottom("smooth"), 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 (_jsxs("div", { className: "relative flex-1 overflow-hidden", children: [_jsxs("div", { ref: containerRef, className: cn("h-full overflow-y-auto flex flex-col", className), ...props, children: [_jsx("div", { className: "mx-auto max-w-chat flex-1 w-full flex flex-col", children: children }), _jsx("div", { ref: endRef, className: "shrink-0" })] }), showScrollButton && (_jsx("button", { type: "button", onClick: () => scrollToBottom("smooth"), 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) => {
@@ -103,10 +128,10 @@ const ChatLayoutSidebar = React.forwardRef(({ className, children, ...props }, r
     return (_jsx("div", { ref: ref, className: cn("border-r border-border bg-card w-64 overflow-y-auto", className), ...props, children: children }));
 });
 ChatLayoutSidebar.displayName = "ChatLayout.Sidebar";
-const ChatLayoutAside = React.forwardRef(({ breakpoint = "lg", className, children }, ref) => {
-    const { panelSize } = useChatLayoutContext();
+const ChatLayoutAside = React.forwardRef(({ breakpoint = "md", onClose, className, children }, ref) => {
+    const { panelSize, togglePanel, setIsDraggingAside } = useChatLayoutContext();
     // State for committed width (persisted between renders)
-    const [committedWidth, setCommittedWidth] = React.useState(450);
+    const [committedWidth, setCommittedWidth] = React.useState(ASIDE_WIDTH_DEFAULT);
     // Motion value for real-time drag updates
     const widthMotionValue = useMotionValue(committedWidth);
     // Track if currently dragging for visual feedback
@@ -116,6 +141,10 @@ const ChatLayoutAside = React.forwardRef(({ breakpoint = "lg", className, childr
     const dragStartWidth = React.useRef(committedWidth);
     // Hidden state - don't render
     const isVisible = panelSize !== "hidden";
+    // Detect mobile viewport (< 768px)
+    const isMobile = useIsMobile();
+    // Lock body scroll when panel is open on mobile
+    useLockBodyScroll(isMobile && isVisible);
     // Sync motion value when committed width changes
     React.useEffect(() => {
         widthMotionValue.set(committedWidth);
@@ -124,17 +153,18 @@ const ChatLayoutAside = React.forwardRef(({ breakpoint = "lg", className, childr
     const handlePointerDown = React.useCallback((e) => {
         e.preventDefault();
         setIsDragging(true);
+        setIsDraggingAside(true); // Notify context for Main reflow
         dragStartX.current = e.clientX;
         dragStartWidth.current = committedWidth;
         // Capture pointer for smooth dragging
         e.target.setPointerCapture(e.pointerId);
-    }, [committedWidth]);
+    }, [committedWidth, setIsDraggingAside]);
     // Handle pointer move during drag
     const handlePointerMove = React.useCallback((e) => {
         if (!isDragging)
             return;
         const deltaX = e.clientX - dragStartX.current;
-        const newWidth = Math.max(250, Math.min(800, dragStartWidth.current - deltaX));
+        const newWidth = Math.max(ASIDE_WIDTH_MIN, Math.min(ASIDE_WIDTH_MAX, dragStartWidth.current - deltaX));
         widthMotionValue.set(newWidth);
     }, [isDragging, widthMotionValue]);
     // Handle pointer up to end drag
@@ -142,24 +172,43 @@ const ChatLayoutAside = React.forwardRef(({ breakpoint = "lg", className, childr
         if (!isDragging)
             return;
         const deltaX = e.clientX - dragStartX.current;
-        const newWidth = Math.max(250, Math.min(800, dragStartWidth.current - deltaX));
+        const newWidth = Math.max(ASIDE_WIDTH_MIN, Math.min(ASIDE_WIDTH_MAX, dragStartWidth.current - deltaX));
         setCommittedWidth(newWidth);
         widthMotionValue.set(newWidth);
         setIsDragging(false);
+        setIsDraggingAside(false); // Notify context drag ended
         // Release pointer capture
         e.target.releasePointerCapture(e.pointerId);
-    }, [isDragging, widthMotionValue]);
-    return (_jsx(AnimatePresence, { initial: false, mode: "wait", children: isVisible && (_jsxs(motion.div, { ref: ref, layout: true, initial: { width: 0, opacity: 0 }, animate: { width: committedWidth, opacity: 1 }, exit: { width: 0, opacity: 0 }, transition: {
-                duration: 0.5,
-                ease: motionEasing.smooth,
-            }, style: {
-                // Use motion value during drag for instant updates
-                width: isDragging ? widthMotionValue : undefined,
-            }, className: cn(
-            // Hidden by default, visible at breakpoint
-            "hidden h-full border-l border-border bg-card overflow-hidden relative", 
-            // Breakpoint visibility
-            breakpoint === "md" && "md:block", breakpoint === "lg" && "lg:block", breakpoint === "xl" && "xl:block", breakpoint === "2xl" && "2xl:block", className), children: [_jsx("div", { onPointerDown: handlePointerDown, onPointerMove: handlePointerMove, onPointerUp: handlePointerUp, className: cn("absolute left-0 inset-y-0 w-2 -ml-1 cursor-col-resize z-10", "group flex items-center justify-center", "hover:bg-primary/5 transition-colors delay-300", isDragging && "bg-primary/10") }), _jsx("div", { className: "h-full overflow-y-auto", style: { width: committedWidth }, children: children })] }, "aside-panel")) }));
+    }, [isDragging, widthMotionValue, setIsDraggingAside]);
+    return (_jsx(AnimatePresence, { initial: false, mode: "wait", children: isVisible && (_jsxs(_Fragment, { children: [isMobile && (_jsx(motion.aside, { variants: asideMobileVariants, initial: "initial", animate: "animate", exit: "exit", transition: asideMobileTransition, className: cn("fixed inset-0 z-50 bg-card", "flex flex-col", 
+                    // Only visible on mobile (< 768px)
+                    "block md:hidden", className), "data-aside": "aside", "data-mobile": "true", children: _jsxs(motion.div, { className: "flex flex-col h-full", variants: asideContentVariants, initial: "initial", animate: "animate", transition: asideContentTransition, children: [_jsx("div", { className: "flex justify-end px-4 pt-3 shrink-0", children: _jsx(IconButton, { onClick: () => {
+                                        onClose?.();
+                                        togglePanel();
+                                    }, "aria-label": "Close panel", children: _jsx(X, { className: "size-4" }) }) }), _jsx("div", { className: "flex-1 overflow-y-auto", children: children })] }) }, "aside-mobile")), !isMobile && (_jsx(motion.aside, { ref: ref, initial: { width: 0, opacity: 0 }, animate: {
+                        width: committedWidth,
+                        opacity: 1,
+                    }, exit: { width: 0, opacity: 0 }, style: {
+                        // Use motion value during drag for instant updates
+                        width: isDragging ? widthMotionValue : undefined,
+                    }, transition: isDragging
+                        ? {
+                            // Instant updates during drag (no animation)
+                            duration: 0,
+                        }
+                        : {
+                            // Smooth animation for open/close
+                            duration: 0.5,
+                            ease: motionEasing.smooth,
+                        }, className: cn(
+                    // Hidden by default, visible at breakpoint
+                    "hidden h-full border-l border-border bg-card overflow-hidden relative", 
+                    // Breakpoint visibility
+                    breakpoint === "sm" && "sm:block", breakpoint === "md" && "md:block", breakpoint === "lg" && "lg:block", breakpoint === "xl" && "xl:block", breakpoint === "2xl" && "2xl:block", className), "data-aside": "aside", children: _jsxs(motion.div, { className: "flex flex-col h-full", variants: asideContentVariants, initial: "initial", animate: "animate", transition: asideContentTransition, children: [_jsx("div", { onPointerDown: handlePointerDown, onPointerMove: handlePointerMove, onPointerUp: handlePointerUp, className: cn("absolute left-0 inset-y-0 w-2 -ml-1 cursor-col-resize z-10", "group flex items-center justify-center", "hover:bg-primary/5 transition-colors delay-300", isDragging && "bg-primary/10") }), _jsx("div", { className: cn("h-full overflow-y-auto", isDragging ? "w-full" : undefined), style: !isDragging
+                                    ? {
+                                        width: `${committedWidth}px`,
+                                    }
+                                    : undefined, children: children })] }) }, "aside-desktop"))] })) }));
 });
 ChatLayoutAside.displayName = "ChatLayout.Aside";
 /* -------------------------------------------------------------------------------------------------

package/dist/gui/components/ChatView.js

@@ -1,11 +1,11 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createLogger } from "@townco/core";
-import { ArrowUp, Bug, ChevronUp, PanelRight, Settings, X } from "lucide-react";
+import { ArrowUp, Bug, PanelRight, Settings, X } from "lucide-react";
 import { useEffect, useState } from "react";
 import { useChatMessages, useChatSession, useToolCalls, } from "../../core/hooks/index.js";
 import { selectTodosForCurrentSession, useChatStore, } from "../../core/store/chat-store.js";
 import { cn } from "../lib/utils.js";
-import { AppSidebar, ChatEmptyState, ChatHeader, ChatInputActions, ChatInputAttachment, ChatInputCommandMenu, ChatInputField, ChatInputRoot, ChatInputSubmit, ChatInputToolbar, ChatInputVoiceInput, ChatLayout, ContextUsageButton, FilesTabContent, IconButton, Message, MessageContent, PanelTabsHeader, SettingsTabContent, SidebarInset, SidebarProvider, SidebarToggle, SourcesTabContent, Tabs, TabsContent, ThemeToggle, TodoTabContent, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "./index.js";
+import { AppSidebar, ChatEmptyState, ChatHeader, ChatInputActions, ChatInputAttachment, ChatInputCommandMenu, ChatInputField, ChatInputRoot, ChatInputSubmit, ChatInputToolbar, ChatInputVoiceInput, ChatLayout, ContextUsageButton, FilesTabContent, IconButton, Message, MessageContent, PanelTabsHeader, SettingsTabContent, SidebarInset, SidebarProvider, SidebarToggle, SourcesTabContent, Tabs, TabsContent, TodoTabContent, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "./index.js";
 const logger = createLogger("gui");
 // Helper component to provide openFiles callback
 function OpenFilesButton({ children, }) {
@@ -33,7 +33,7 @@ function OpenFilesButton({ children, }) {
 // Note: Keyboard shortcut (Cmd+B / Ctrl+B) for toggling the right panel
 // is now handled internally by ChatLayout.Root
 // Chat input with attachment handling
-function ChatInputWithAttachments({ client, startSession, placeholder, latestContextSize, commandMenuItems, }) {
+function ChatInputWithAttachments({ client, startSession, placeholder, commandMenuItems, }) {
     const attachedFiles = useChatStore((state) => state.input.attachedFiles);
     const addFileAttachment = useChatStore((state) => state.addFileAttachment);
     const removeFileAttachment = useChatStore((state) => state.removeFileAttachment);
@@ -42,27 +42,22 @@ function ChatInputWithAttachments({ client, startSession, placeholder, latestCon
             addFileAttachment(file);
         }
     };
-    return (_jsxs(ChatInputRoot, { client: client, startSession: startSession, children: [_jsx(ChatInputCommandMenu, { commands: commandMenuItems }), attachedFiles.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-2 p-3 border-b border-border", children: attachedFiles.map((file, index) => (_jsxs("div", { className: "relative group rounded-md overflow-hidden border border-border", children: [_jsx("img", { src: `data:${file.mimeType};base64,${file.data}`, alt: file.name, className: "h-20 w-20 object-cover" }), _jsx("button", { type: "button", onClick: () => removeFileAttachment(index), className: "absolute top-1 right-1 p-1 rounded-full bg-background/80 hover:bg-background opacity-0 group-hover:opacity-100 transition-opacity", children: _jsx(X, { className: "size-3" }) })] }, index))) })), _jsx(ChatInputField, { placeholder: placeholder, autoFocus: true, onFilesDropped: handleFilesSelected }), _jsxs(ChatInputToolbar, { children: [_jsxs("div", { className: "flex items-baseline gap-1", children: [_jsx(ChatInputActions, {}), _jsx(ChatInputAttachment, { onFilesSelected: handleFilesSelected }), latestContextSize != null && (_jsx(ContextUsageButton, { contextSize: latestContextSize }))] }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx(ChatInputVoiceInput, {}), _jsx(ChatInputSubmit, { children: _jsx(ArrowUp, { className: "size-4" }) })] })] })] }));
+    return (_jsxs(ChatInputRoot, { client: client, startSession: startSession, children: [_jsx(ChatInputCommandMenu, { commands: commandMenuItems }), attachedFiles.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-2 p-3 border-b border-border", children: attachedFiles.map((file, index) => (_jsxs("div", { className: "relative group rounded-md overflow-hidden border border-border", children: [_jsx("img", { src: `data:${file.mimeType};base64,${file.data}`, alt: file.name, className: "h-20 w-20 object-cover" }), _jsx("button", { type: "button", onClick: () => removeFileAttachment(index), className: "absolute top-1 right-1 p-1 rounded-full bg-background/80 hover:bg-background opacity-0 group-hover:opacity-100 transition-opacity", children: _jsx(X, { className: "size-3" }) })] }, `attached-${file.name}-${file.data.slice(0, 20)}`))) })), _jsx(ChatInputField, { placeholder: placeholder, autoFocus: true, onFilesDropped: handleFilesSelected }), _jsxs(ChatInputToolbar, { children: [_jsxs("div", { className: "flex items-baseline gap-1", children: [_jsx(ChatInputActions, {}), _jsx(ChatInputAttachment, { onFilesSelected: handleFilesSelected })] }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx(ChatInputVoiceInput, {}), _jsx(ChatInputSubmit, { children: _jsx(ArrowUp, { className: "size-4" }) })] })] })] }));
 }
 // 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-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, }) {
-    const { isExpanded, setIsExpanded } = ChatHeader.useChatHeaderContext();
-    return (_jsxs("div", { className: "flex lg:hidden items-center flex-1", children: [_jsxs("div", { className: "flex items-center gap-2 flex-1", children: [_jsx(SidebarToggle, {}), showHeader && (_jsx("span", { className: "text-heading-4 text-foreground", children: agentName }))] }), _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(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"), 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 ?? [] }) })] }));
 }
 // 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, showHeader, sessionId, debuggerUrl, }) {
     const { togglePanel, panelOpen } = ChatLayout.useChatLayoutContext();
     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: [_jsxs("div", { className: "flex items-center gap-2 flex-1", children: [_jsx(SidebarToggle, {}), showHeader && (_jsx("span", { className: "text-heading-4 text-foreground", children: agentName }))] }), 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 panel", onClick: togglePanel, "data-state": panelOpen ? "open" : "closed", 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 ?? [] }) })] }) })] }));
+    return (_jsx(ChatHeader.Root, { className: cn("border-b border-border bg-card h-16"), children: _jsxs("div", { className: "flex items-center w-full py-5 px-4 lg:px-4", children: [_jsxs("div", { className: "flex items-center gap-2 flex-1", children: [_jsx(SidebarToggle, {}), showHeader && agentName && (_jsx("span", { className: "text-heading-4 text-foreground", children: agentName }))] }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx(ContextUsageButton, {}), 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(IconButton, { "aria-label": "Toggle panel", onClick: togglePanel, "data-state": panelOpen ? "open" : "closed", children: _jsx(PanelRight, { className: "size-4 text-muted-foreground" }) })] })] }) }));
 }
 export function ChatView({ client, initialSessionId, error: initError, debuggerUrl, }) {
     // Use shared hooks from @townco/ui/core - MUST be called before any early returns
@@ -70,18 +65,16 @@ export function ChatView({ client, initialSessionId, error: initError, debuggerU
     const { messages, sendMessage } = useChatMessages(client, startSession);
     useToolCalls(client); // Still need to subscribe to tool call events
     const error = useChatStore((state) => state.error);
-    const [agentName, setAgentName] = useState("Agent");
-    const [agentDescription, setAgentDescription] = useState("This research agent can help you find and summarize information, analyze sources, track tasks, and answer questions about your research. Start by typing a message below to begin your investigation.");
-    const [suggestedPrompts, setSuggestedPrompts] = useState([
-        "Search the web for the latest news on top tech company earnings, produce a summary for each company, and then a macro trend analysis of the tech industry. Use your todo list",
-        "What can you help me with?",
-    ]);
+    const [agentName, setAgentName] = useState(undefined);
+    const [agentDescription, setAgentDescription] = useState(undefined);
+    const [suggestedPrompts, setSuggestedPrompts] = useState(undefined);
     const [agentTools, setAgentTools] = useState([]);
     const [agentMcps, setAgentMcps] = useState([]);
     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);
+    const todos = useChatStore(selectTodosForCurrentSession);
+    const _latestContextSize = useChatStore((state) => state.latestContextSize);
     // Log connection status changes
     useEffect(() => {
         logger.debug("Connection status changed", { status: connectionStatus });
@@ -90,8 +83,9 @@ export function ChatView({ client, initialSessionId, error: initError, debuggerU
         }
     }, [connectionStatus, error]);
     // Get agent name from session metadata or client info
+    // Re-run when connectionStatus changes to pick up agentInfo after connect()
     useEffect(() => {
-        if (client) {
+        if (client && connectionStatus === "connected") {
             // Try to get from current session first
             const session = client.getCurrentSession();
             if (session?.metadata?.agentName) {
@@ -107,12 +101,16 @@ export function ChatView({ client, initialSessionId, error: initError, debuggerU
             else if (agentInfo.name) {
                 setAgentName(agentInfo.name);
             }
-            if (agentInfo.description) {
-                setAgentDescription(agentInfo.description);
-            }
+            // Set description - use agent's description or a default
+            setAgentDescription(agentInfo.description ||
+                "Start a conversation below to begin working with this agent.");
             if (agentInfo.suggestedPrompts && agentInfo.suggestedPrompts.length > 0) {
                 setSuggestedPrompts(agentInfo.suggestedPrompts);
             }
+            else {
+                // Set default prompts if none provided
+                setSuggestedPrompts([]);
+            }
             // Get tools, MCPs, and subagents
             if (agentInfo.tools && agentInfo.tools.length > 0) {
                 setAgentTools(agentInfo.tools);
@@ -132,21 +130,7 @@ export function ChatView({ client, initialSessionId, error: initError, debuggerU
                 setHideTopBar(true);
             }
         }
-    }, [client, sessionId, connectionStatus]);
-    // Monitor screen size changes and update isLargeScreen state
-    useEffect(() => {
-        const mediaQuery = window.matchMedia("(min-width: 1024px)");
-        const handleChange = (e) => {
-            setIsLargeScreen(e.matches);
-        };
-        // Set initial value
-        setIsLargeScreen(mediaQuery.matches);
-        // Listen for changes
-        mediaQuery.addEventListener("change", handleChange);
-        return () => {
-            mediaQuery.removeEventListener("change", handleChange);
-        };
-    }, []);
+    }, [client, connectionStatus]);
     // Handle prompt hover - temporarily show the full prompt as placeholder
     const handlePromptHover = (prompt) => {
         setPlaceholder(prompt);
@@ -159,9 +143,8 @@ export function ChatView({ client, initialSessionId, error: initError, debuggerU
     if (initError) {
         return (_jsx("div", { className: "flex items-center justify-center h-screen bg-background", children: _jsxs("div", { className: "text-center p-8 max-w-md", children: [_jsx("h1", { className: "text-2xl font-bold text-destructive mb-4", children: "Initialization Error" }), _jsx("p", { className: "text-foreground mb-4", children: initError }), _jsx("p", { className: "text-sm text-muted-foreground", children: "Failed to initialize the ACP client. Check the console for details." })] }) }));
     }
-    const todos = useChatStore(selectTodosForCurrentSession);
     // Dummy sources data based on Figma design
-    const sources = [
+    const _sources = [
         {
             id: "1",
             title: "Boeing Scores Early Wins at Dubai Airshow",
@@ -195,8 +178,6 @@ export function ChatView({ client, initialSessionId, error: initError, debuggerU
             favicon: "https://www.google.com/s2/favicons?domain=theverge.com&sz=32",
         },
     ];
-    // Get the latest context size from the session context
-    const latestContextSize = useChatStore((state) => state.latestContextSize);
     // Command menu items for chat input
     const commandMenuItems = [
         {
@@ -210,13 +191,15 @@ export function ChatView({ client, initialSessionId, error: initError, debuggerU
             },
         },
     ];
-    return (_jsxs(SidebarProvider, { defaultOpen: false, children: [_jsx(AppSidebar, { client: client, currentSessionId: sessionId }), _jsx(SidebarInset, { children: _jsxs(ChatLayout.Root, { defaultPanelSize: "hidden", defaultActiveTab: "todo", children: [_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, ...(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(SidebarProvider, { defaultOpen: false, children: [_jsx(AppSidebar, { client: client, currentSessionId: sessionId }), _jsx(SidebarInset, { children: _jsxs(ChatLayout.Root, { defaultPanelSize: "hidden", defaultActiveTab: "todo", children: [_jsxs(ChatLayout.Main, { children: [!hideTopBar && (_jsx(AppChatHeader, { agentName: agentName, showHeader: messages.length > 0, sessionId: sessionId, ...(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 ? (
+                                            // Only render empty state once agent info is loaded
+                                            agentName !== undefined ? (_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) => {
                                                             sendMessage(prompt);
                                                             setPlaceholder("Type a message or / for commands...");
                                                             logger.info("Prompt clicked", { prompt });
                                                         }, onPromptHover: handlePromptHover, onPromptLeave: handlePromptLeave, onOpenFiles: openFiles, onOpenSettings: openSettings, toolsAndMcpsCount: agentTools.length +
                                                             agentMcps.length +
-                                                            agentSubagents.length }) })) })) : (_jsx("div", { className: "flex flex-col px-4", children: messages.map((message, index) => {
+                                                            agentSubagents.length }) })) })) : null) : (_jsx("div", { className: "flex flex-col px-4", children: messages.map((message, index) => {
                                                     // Calculate dynamic spacing based on message sequence
                                                     const isFirst = index === 0;
                                                     const previousMessage = isFirst
@@ -241,5 +224,5 @@ export function ChatView({ client, initialSessionId, error: initError, debuggerU
                                                                 : "mt-6";
                                                     }
                                                     return (_jsx(Message, { message: message, className: spacingClass, isLastMessage: index === messages.length - 1, children: _jsx(MessageContent, { message: message, thinkingDisplayStyle: "collapsible" }) }, message.id));
-                                                }) })) }), _jsx(ChatLayout.Footer, { children: _jsx(ChatInputWithAttachments, { client: client, startSession: startSession, placeholder: placeholder, latestContextSize: latestContextSize, commandMenuItems: commandMenuItems }) })] })] }), isLargeScreen && (_jsx(ChatLayout.Aside, { breakpoint: "lg", children: _jsx(AsideTabs, { todos: todos, tools: agentTools, mcps: agentMcps, subagents: agentSubagents }) }))] }) })] }));
+                                                }) })) }), _jsx(ChatLayout.Footer, { children: _jsx(ChatInputWithAttachments, { client: client, startSession: startSession, placeholder: placeholder, commandMenuItems: commandMenuItems }) })] })] }), _jsx(ChatLayout.Aside, { breakpoint: "md", children: _jsx(AsideTabs, { todos: todos, tools: agentTools, mcps: agentMcps, subagents: agentSubagents }) })] }) })] }));
 }

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

@@ -12,6 +12,5 @@ export interface ContextSize {
     modelContextWindow?: number;
 }
 export interface ContextUsageButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-    contextSize: ContextSize;
 }
 export declare const ContextUsageButton: React.ForwardRefExoticComponent<ContextUsageButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/gui/components/ContextUsageButton.js

@@ -1,12 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
+import { useChatStore } from "../../core/store/chat-store.js";
 import { cn } from "../lib/utils.js";
 import { Button } from "./Button.js";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "./Tooltip.js";
 // Default context window for backward compatibility (should not be used in practice)
 const DEFAULT_MODEL_CONTEXT_WINDOW = 200000;
-export const ContextUsageButton = React.forwardRef(({ contextSize, className, ...props }, ref) => {
-    // Use max of estimated and LLM-reported tokens (same logic as backend hook executor)
+export const ContextUsageButton = React.forwardRef(({ className, ...props }, ref) => {
+    const latestContextSize = useChatStore((state) => state.latestContextSize);
+    // Don't render if no context size available
+    if (latestContextSize == null) {
+        return null;
+    }
+    const contextSize = latestContextSize;
+    // Use max of estimated and LLM-reported tokens (LLM reported as fallback if higher)
     const actualTokens = Math.max(contextSize.totalEstimated, contextSize.llmReportedInputTokens ?? 0);
     // Use model context window from backend, or default for backward compatibility
     const modelContextWindow = contextSize.modelContextWindow ?? DEFAULT_MODEL_CONTEXT_WINDOW;
@@ -36,7 +43,7 @@ export const ContextUsageButton = React.forwardRef(({ contextSize, className, ..
     const center = size / 2;
     const circumference = 2 * Math.PI * radius;
     const offset = circumference - (clampedPercentage / 100) * circumference;
-    return (_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { ref: ref, type: "button", variant: "ghost", size: "icon", className: cn("rounded-full cursor-default", colorClass, className), ...props, children: _jsxs("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, className: "transform -rotate-90", children: [_jsx("circle", { cx: center, cy: center, r: radius, stroke: "currentColor", strokeWidth: strokeWidth, fill: "transparent", className: "opacity-20" }), _jsx("circle", { cx: center, cy: center, r: radius, stroke: "currentColor", strokeWidth: strokeWidth, fill: "transparent", strokeDasharray: circumference, strokeDashoffset: offset, strokeLinecap: "round", className: "transition-all duration-300 ease-in-out" })] }) }) }), _jsx(TooltipContent, { side: "top", align: "center", className: "p-3", children: _jsxs("div", { className: "space-y-2 font-mono text-xs", children: [_jsxs("div", { className: "space-y-1", children: [_jsxs("div", { className: "flex justify-between gap-6", children: [_jsx("span", { className: "text-muted-foreground", children: "System Prompt:" }), _jsxs("div", { className: "flex gap-1 items-baseline", children: [_jsx("span", { children: contextSize.systemPromptTokens.toLocaleString() }), _jsxs("span", { className: "text-muted-foreground text-[10px]", children: ["(", calculatePercentage(contextSize.systemPromptTokens), ")"] })] })] }), contextSize.toolOverheadTokens !== undefined &&
+    return (_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { ref: ref, type: "button", variant: "ghost", size: "icon", className: cn("rounded-full cursor-default", colorClass, className), ...props, children: _jsxs("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, className: "transform -rotate-90", children: [_jsx("title", { children: "Context usage indicator" }), _jsx("circle", { cx: center, cy: center, r: radius, stroke: "currentColor", strokeWidth: strokeWidth, fill: "transparent", className: "opacity-20" }), _jsx("circle", { cx: center, cy: center, r: radius, stroke: "currentColor", strokeWidth: strokeWidth, fill: "transparent", strokeDasharray: circumference, strokeDashoffset: offset, strokeLinecap: "round", className: "transition-all duration-300 ease-in-out" })] }) }) }), _jsx(TooltipContent, { side: "top", align: "center", className: "p-3", children: _jsxs("div", { className: "space-y-2 font-mono text-xs", children: [_jsxs("div", { className: "space-y-1", children: [_jsxs("div", { className: "flex justify-between gap-6", children: [_jsx("span", { className: "text-muted-foreground", children: "System Prompt:" }), _jsxs("div", { className: "flex gap-1 items-baseline", children: [_jsx("span", { children: contextSize.systemPromptTokens.toLocaleString() }), _jsxs("span", { className: "text-muted-foreground text-[10px]", children: ["(", calculatePercentage(contextSize.systemPromptTokens), ")"] })] })] }), contextSize.toolOverheadTokens !== undefined &&
                                         contextSize.toolOverheadTokens > 0 && (_jsxs("div", { className: "flex justify-between gap-6", children: [_jsx("span", { className: "text-muted-foreground", children: "Tools Definition:" }), _jsxs("div", { className: "flex gap-1 items-baseline", children: [_jsx("span", { children: contextSize.toolOverheadTokens.toLocaleString() }), _jsxs("span", { className: "text-muted-foreground text-[10px]", children: ["(", calculatePercentage(contextSize.toolOverheadTokens), ")"] })] })] })), contextSize.mcpOverheadTokens !== undefined &&
                                         contextSize.mcpOverheadTokens > 0 && (_jsxs("div", { className: "flex justify-between gap-6", children: [_jsx("span", { className: "text-muted-foreground", children: "MCPs Definition:" }), _jsxs("div", { className: "flex gap-1 items-baseline", children: [_jsx("span", { children: contextSize.mcpOverheadTokens.toLocaleString() }), _jsxs("span", { className: "text-muted-foreground text-[10px]", children: ["(", calculatePercentage(contextSize.mcpOverheadTokens), ")"] })] })] })), _jsxs("div", { className: "flex justify-between gap-6", children: [_jsx("span", { className: "text-muted-foreground", children: "User Messages:" }), _jsxs("div", { className: "flex gap-1 items-baseline", children: [_jsx("span", { children: contextSize.userMessagesTokens.toLocaleString() }), _jsxs("span", { className: "text-muted-foreground text-[10px]", children: ["(", calculatePercentage(contextSize.userMessagesTokens), ")"] })] })] }), _jsxs("div", { className: "flex justify-between gap-6", children: [_jsx("span", { className: "text-muted-foreground", children: "Assistant Messages:" }), _jsxs("div", { className: "flex gap-1 items-baseline", children: [_jsx("span", { children: contextSize.assistantMessagesTokens.toLocaleString() }), _jsxs("span", { className: "text-muted-foreground text-[10px]", children: ["(", calculatePercentage(contextSize.assistantMessagesTokens), ")"] })] })] }), _jsxs("div", { className: "flex justify-between gap-6", children: [_jsx("span", { className: "text-muted-foreground", children: "Tool Inputs:" }), _jsxs("div", { className: "flex gap-1 items-baseline", children: [_jsx("span", { children: contextSize.toolInputTokens.toLocaleString() }), _jsxs("span", { className: "text-muted-foreground text-[10px]", children: ["(", calculatePercentage(contextSize.toolInputTokens), ")"] })] })] }), _jsxs("div", { className: "flex justify-between gap-6", children: [_jsx("span", { className: "text-muted-foreground", children: "Tool Results:" }), _jsxs("div", { className: "flex gap-1 items-baseline", children: [_jsx("span", { children: contextSize.toolResultsTokens.toLocaleString() }), _jsxs("span", { className: "text-muted-foreground text-[10px]", children: ["(", calculatePercentage(contextSize.toolResultsTokens), ")"] })] })] })] }), _jsx("div", { className: "border-t border-border pt-2", children: _jsxs("div", { className: cn("flex justify-end gap-2 font-semibold", colorClass), children: [_jsx("span", { children: actualTokens.toLocaleString() }), _jsxs("span", { children: ["(", formattedPercentage, ")"] })] }) })] }) })] }) }));
 });

package/dist/gui/components/HookNotification.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { AlertCircle, AlertTriangle, Archive, CheckCircle2, ChevronDown, Loader2, Scissors, } from "lucide-react";
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 /**
  * Get display information for a hook type
  */
@@ -55,6 +55,7 @@ export function HookNotification({ notification }) {
         }
         // Calculate initial elapsed time
         const updateElapsed = () => {
+            // biome-ignore lint/style/noNonNullAssertion: triggeredAt is guaranteed to exist for hook_triggered notifications
             const elapsed = (Date.now() - notification.triggeredAt) / 1000;
             setElapsedTime(elapsed);
         };