@townco/ui 0.1.68 → 0.1.70

package/dist/gui/components/AppSidebar.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Plus } from "lucide-react";
+import { cn } from "../lib/utils.js";
+import { IconButton } from "./IconButton.js";
+import { SessionHistory } from "./SessionHistory.js";
+import { Sidebar, SidebarContent, SidebarFooter, SidebarHeader, useSidebar, } from "./Sidebar.js";
+export function AppSidebar({ client, currentSessionId, onSessionSelect, onNewSession, onRenameSession, onArchiveSession, onDeleteSession, footer, className, }) {
+    const { setOpenMobile } = useSidebar();
+    const handleNewSession = () => {
+        if (onNewSession) {
+            onNewSession();
+        }
+        else {
+            // Default behavior: clear session from URL and reload
+            const url = new URL(window.location.href);
+            url.searchParams.delete("session");
+            window.location.href = url.toString();
+        }
+        setOpenMobile(false);
+    };
+    return (_jsxs(Sidebar, { className: cn("group-data-[side=left]:border-r-0", className), children: [_jsx(SidebarHeader, { className: "h-16 py-5 pl-6 pr-4", children: _jsxs("div", { className: "flex flex-row items-center justify-between w-full", children: [_jsx("span", { className: "font-semibold text-lg", children: "Sessions" }), _jsx(IconButton, { onClick: handleNewSession, "aria-label": "New Chat", children: _jsx(Plus, { className: "size-4 text-muted-foreground" }) })] }) }), _jsx(SidebarContent, { children: _jsx(SessionHistory, { client: client, currentSessionId: currentSessionId, onSessionSelect: onSessionSelect, onRenameSession: onRenameSession, onArchiveSession: onArchiveSession, onDeleteSession: onDeleteSession }) }), footer && _jsx(SidebarFooter, { children: footer })] }));
+}

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

@@ -8,6 +8,9 @@ interface ChatLayoutContextValue {
     setPanelSize: (size: PanelSize) => void;
     activeTab: PanelTabType;
     setActiveTab: (tab: PanelTabType) => void;
+    panelOpen: boolean;
+    setPanelOpen: (open: boolean) => void;
+    togglePanel: () => void;
 }
 declare const ChatLayoutContext: React.Context<ChatLayoutContextValue | undefined>;
 declare const useChatLayoutContext: () => ChatLayoutContextValue;
@@ -36,6 +39,8 @@ export interface ChatLayoutMessagesProps extends React.HTMLAttributes<HTMLDivEle
     onScrollChange?: (isAtBottom: boolean) => void;
     /** Whether to show scroll to bottom button */
     showScrollToBottom?: boolean;
+    /** Whether to scroll to bottom on initial mount (default: true) */
+    initialScrollToBottom?: boolean;
 }
 declare const ChatLayoutMessages: React.ForwardRefExoticComponent<ChatLayoutMessagesProps & React.RefAttributes<HTMLDivElement>>;
 export interface ChatLayoutFooterProps extends React.HTMLAttributes<HTMLDivElement> {

package/dist/gui/components/ChatLayout.js

@@ -1,8 +1,9 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AnimatePresence, motion, useMotionValue } from "framer-motion";
 import { ArrowDown } from "lucide-react";
 import * as React from "react";
+import { motionEasing } from "../lib/motion.js";
 import { cn } from "../lib/utils.js";
-import { ResizableHandle, ResizablePanel, ResizablePanelGroup, } from "./resizable.js";
 import { Toaster } from "./Sonner.js";
 const ChatLayoutContext = React.createContext(undefined);
 const useChatLayoutContext = () => {
@@ -16,157 +17,117 @@ 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");
+    // Helper to toggle the right panel
+    const togglePanel = React.useCallback(() => {
+        setPanelSize((size) => (size === "hidden" ? "large" : "hidden"));
+        setPanelOpen((open) => !open);
+    }, []);
+    // Sync panelOpen with panelSize
+    React.useEffect(() => {
+        setPanelOpen(panelSize !== "hidden");
+    }, [panelSize]);
     return (_jsx(ChatLayoutContext.Provider, { value: {
             sidebarOpen,
             setSidebarOpen,
             panelSize,
-            setPanelSize,
+            setPanelSize: (size) => {
+                setPanelSize(size);
+                setPanelOpen(size !== "hidden");
+            },
             activeTab,
             setActiveTab,
-        }, children: _jsx("div", { ref: ref, className: cn("flex h-screen flex-row bg-background text-foreground", className), ...props, children: _jsx(ResizablePanelGroup, { direction: "horizontal", className: "flex-1", children: children }) }) }));
+            panelOpen,
+            setPanelOpen,
+            togglePanel,
+        }, 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";
 const ChatLayoutHeader = React.forwardRef(({ className, children, ...props }, ref) => {
     return (_jsx("div", { ref: ref, className: cn("relative z-10 border-b border-border bg-card shrink-0", className), ...props, children: children }));
 });
 ChatLayoutHeader.displayName = "ChatLayout.Header";
-const ChatLayoutMain = React.forwardRef(({ className, children, ...props }, ref) => {
-    return (_jsx(ResizablePanel, { defaultSize: 70, minSize: 50, children: _jsx("div", { ref: ref, className: cn("flex flex-1 flex-col overflow-hidden h-full", className), ...props, children: children }) }));
+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 }));
 });
 ChatLayoutMain.displayName = "ChatLayout.Main";
 const ChatLayoutBody = React.forwardRef(({ showToaster = true, className, children, ...props }, ref) => {
     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 [isAtBottom, setIsAtBottom] = React.useState(true);
-    const isAtBottomRef = React.useRef(true);
-    const isUserScrollingRef = React.useRef(false);
-    const lastScrollHeightRef = React.useRef(0);
-    const lastMutationTimeRef = React.useRef(0);
-    const isSmoothScrollingRef = React.useRef(false); // Protect smooth scrolls from interruption
-    // Keep ref in sync with state
-    React.useEffect(() => {
-        isAtBottomRef.current = isAtBottom;
-    }, [isAtBottom]);
+    const hasInitialScrolledRef = React.useRef(false); // Track if initial scroll has happened
     // Merge refs
     React.useImperativeHandle(ref, () => scrollContainerRef.current);
-    // Check if at bottom
-    const checkIfAtBottom = React.useCallback(() => {
+    // Check if user is at bottom of scroll
+    const checkScrollPosition = React.useCallback(() => {
         const container = scrollContainerRef.current;
         if (!container)
-            return true;
+            return false;
         const { scrollTop, scrollHeight, clientHeight } = container;
-        return scrollTop + clientHeight >= scrollHeight - 100;
-    }, []);
-    // Scroll to bottom with protection for smooth scrolls
-    const scrollToBottom = React.useCallback((behavior = "smooth") => {
+        const distanceFromBottom = scrollHeight - scrollTop - clientHeight;
+        const isAtBottom = distanceFromBottom < 100; // 100px threshold
+        setShowScrollButton(!isAtBottom && showScrollToBottom);
+        onScrollChange?.(isAtBottom);
+        return isAtBottom;
+    }, [onScrollChange, showScrollToBottom]);
+    // Handle scroll events - update button visibility
+    const handleScroll = React.useCallback(() => {
+        checkScrollPosition();
+    }, [checkScrollPosition]);
+    // Scroll to bottom function (for button click)
+    const scrollToBottom = React.useCallback((smooth = true) => {
         const container = scrollContainerRef.current;
         if (!container)
             return;
-        // If we're doing a smooth scroll, don't interrupt with instant
-        if (isSmoothScrollingRef.current && behavior === "instant") {
-            return;
-        }
-        if (behavior === "smooth") {
-            isSmoothScrollingRef.current = true;
-            // Clear the smooth scroll protection after animation completes
-            setTimeout(() => {
-                isSmoothScrollingRef.current = false;
-            }, 500);
-        }
         container.scrollTo({
             top: container.scrollHeight,
-            behavior,
+            behavior: smooth ? "smooth" : "auto",
         });
     }, []);
-    // Handle user scroll events
+    // Auto-scroll when content changes ONLY if user is currently at the bottom
     React.useEffect(() => {
         const container = scrollContainerRef.current;
         if (!container)
             return;
-        let scrollTimeout;
-        const handleScroll = () => {
-            // Mark as user scrolling
-            isUserScrollingRef.current = true;
-            clearTimeout(scrollTimeout);
-            // Update isAtBottom state
-            const atBottom = checkIfAtBottom();
-            setIsAtBottom(atBottom);
-            isAtBottomRef.current = atBottom;
-            onScrollChange?.(atBottom);
-            // Reset user scrolling flag after scroll ends
-            scrollTimeout = setTimeout(() => {
-                isUserScrollingRef.current = false;
-            }, 150);
-        };
-        container.addEventListener("scroll", handleScroll, { passive: true });
-        return () => {
-            container.removeEventListener("scroll", handleScroll);
-            clearTimeout(scrollTimeout);
-        };
-    }, [checkIfAtBottom, onScrollChange]);
-    // Auto-scroll when content changes using MutationObserver + ResizeObserver
+        // Check if user is CURRENTLY at the bottom (not just "was" at bottom)
+        const { scrollTop, scrollHeight, clientHeight } = container;
+        const distanceFromBottom = scrollHeight - scrollTop - clientHeight;
+        const isCurrentlyAtBottom = distanceFromBottom < 100;
+        // Only auto-scroll if user is at the bottom right now
+        if (isCurrentlyAtBottom) {
+            requestAnimationFrame(() => {
+                container.scrollTop = container.scrollHeight;
+            });
+        }
+        // Update the scroll button visibility
+        setShowScrollButton(!isCurrentlyAtBottom && showScrollToBottom);
+    }, [children, showScrollToBottom]);
+    // Scroll to bottom on initial mount only (for session replay)
     React.useEffect(() => {
+        if (!initialScrollToBottom)
+            return undefined;
         const container = scrollContainerRef.current;
         if (!container)
-            return;
-        const scrollIfNeeded = () => {
-            // Only auto-scroll if user was at bottom and isn't actively scrolling
-            if (!isAtBottomRef.current || isUserScrollingRef.current) {
-                return;
-            }
-            const now = Date.now();
-            const timeSinceLastMutation = now - lastMutationTimeRef.current;
-            const currentScrollHeight = container.scrollHeight;
-            const heightDelta = currentScrollHeight - lastScrollHeightRef.current;
-            lastMutationTimeRef.current = now;
-            lastScrollHeightRef.current = currentScrollHeight;
-            // Detect if this is likely a new message (large height increase + time gap)
-            // vs streaming (small incremental changes)
-            const isLikelyNewMessage = heightDelta > 80 && timeSinceLastMutation > 150;
-            requestAnimationFrame(() => {
-                if (isLikelyNewMessage) {
-                    scrollToBottom("smooth");
-                }
-                else {
-                    scrollToBottom("instant");
-                }
-                setIsAtBottom(true);
-                isAtBottomRef.current = true;
-            });
-        };
-        // Watch for DOM changes (new messages, content updates)
-        const mutationObserver = new MutationObserver(scrollIfNeeded);
-        mutationObserver.observe(container, {
-            childList: true,
-            subtree: true,
-            characterData: true,
-        });
-        // Watch for size changes (images loading, content expanding)
-        const resizeObserver = new ResizeObserver(scrollIfNeeded);
-        resizeObserver.observe(container);
-        // Also observe direct children for size changes
-        for (const child of Array.from(container.children)) {
-            resizeObserver.observe(child);
+            return undefined;
+        // Only scroll on initial mount, not on subsequent renders
+        if (!hasInitialScrolledRef.current) {
+            // Use a small delay to let initial content render
+            const timeout = setTimeout(() => {
+                container.scrollTop = container.scrollHeight;
+                hasInitialScrolledRef.current = true;
+            }, 100);
+            return () => clearTimeout(timeout);
         }
-        // Initialize scroll height
-        lastScrollHeightRef.current = container.scrollHeight;
-        return () => {
-            mutationObserver.disconnect();
-            resizeObserver.disconnect();
-        };
-    }, [scrollToBottom]);
-    // Button click handler - smooth scroll and re-engage auto-scroll
-    const handleScrollToBottomClick = React.useCallback(() => {
-        setIsAtBottom(true);
-        isAtBottomRef.current = true;
-        scrollToBottom("smooth");
-    }, [scrollToBottom]);
-    return (_jsxs("div", { className: "relative flex-1 overflow-hidden", children: [_jsx("div", { ref: scrollContainerRef, className: cn("h-full overflow-y-auto flex flex-col", className), tabIndex: 0, ...props, children: _jsx("div", { className: "mx-auto max-w-chat flex-1 w-full flex flex-col", children: children }) }), showScrollToBottom && (_jsx("button", { type: "button", onClick: handleScrollToBottomClick, 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", isAtBottom
-                    ? "pointer-events-none scale-0 opacity-0"
-                    : "pointer-events-auto scale-100 opacity-100"), "aria-label": "Scroll to bottom", children: _jsx(ArrowDown, { className: "size-4" }) }))] }));
+        return undefined;
+    }, [initialScrollToBottom]);
+    return (_jsxs("div", { className: "relative flex-1 overflow-hidden", children: [_jsx("div", { ref: scrollContainerRef, className: cn("h-full overflow-y-auto flex flex-col", className), onScroll: handleScroll, ...props, children: _jsx("div", { className: "mx-auto max-w-chat flex-1 w-full flex flex-col", children: children }) }), showScrollButton && (_jsx("button", { type: "button", onClick: () => scrollToBottom(true), className: cn("absolute bottom-4 left-1/2 -translate-x-1/2 z-10", "flex items-center justify-center p-2 rounded-full", "bg-card border border-border shadow-lg", "text-foreground", "hover:bg-accent hover:text-accent-foreground", "transition-all duration-200 ease-in-out", "animate-in fade-in slide-in-from-bottom-2"), "aria-label": "Scroll to bottom", children: _jsx(ArrowDown, { className: "size-4" }) }))] }));
 });
 ChatLayoutMessages.displayName = "ChatLayout.Messages";
 const ChatLayoutFooter = React.forwardRef(({ className, children, ...props }, ref) => {
@@ -180,32 +141,63 @@ 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, ...props }, ref) => {
+const ChatLayoutAside = React.forwardRef(({ breakpoint = "lg", className, children }, ref) => {
     const { panelSize } = useChatLayoutContext();
-    const [minSizePercent, setMinSizePercent] = React.useState(28);
-    // Convert 450px minimum to percentage based on window width
-    React.useEffect(() => {
-        const updateMinSize = () => {
-            const minPixels = 450;
-            const minPercent = (minPixels / window.innerWidth) * 100;
-            setMinSizePercent(Math.max(minPercent, 28)); // Never less than 28% or 450px
-        };
-        updateMinSize();
-        window.addEventListener("resize", updateMinSize);
-        return () => {
-            window.removeEventListener("resize", updateMinSize);
-        };
-    }, []);
+    // State for committed width (persisted between renders)
+    const [committedWidth, setCommittedWidth] = React.useState(450);
+    // Motion value for real-time drag updates
+    const widthMotionValue = useMotionValue(committedWidth);
+    // Track if currently dragging for visual feedback
+    const [isDragging, setIsDragging] = React.useState(false);
+    // Track drag start position and width
+    const dragStartX = React.useRef(0);
+    const dragStartWidth = React.useRef(committedWidth);
     // Hidden state - don't render
-    if (panelSize === "hidden")
-        return null;
-    return (_jsxs(_Fragment, { children: [_jsx(ResizableHandle, { withHandle: true, className: "group-hover:opacity-100 opacity-0 transition-opacity" }), _jsx(ResizablePanel, { defaultSize: 30, minSize: minSizePercent, maxSize: 40, className: "group", children: _jsx("div", { ref: ref, className: cn(
-                    // Hidden by default, visible at breakpoint
-                    "hidden h-full border-l border-border bg-card overflow-y-auto transition-all duration-300", 
-                    // Breakpoint visibility
-                    breakpoint === "md" && "md:block", breakpoint === "lg" && "lg:block", breakpoint === "xl" && "xl:block", breakpoint === "2xl" && "2xl:block", 
-                    // Size variants - width is now controlled by ResizablePanel
-                    className), ...props, children: children }) })] }));
+    const isVisible = panelSize !== "hidden";
+    // Sync motion value when committed width changes
+    React.useEffect(() => {
+        widthMotionValue.set(committedWidth);
+    }, [committedWidth, widthMotionValue]);
+    // Handle pointer down to start drag
+    const handlePointerDown = React.useCallback((e) => {
+        e.preventDefault();
+        setIsDragging(true);
+        dragStartX.current = e.clientX;
+        dragStartWidth.current = committedWidth;
+        // Capture pointer for smooth dragging
+        e.target.setPointerCapture(e.pointerId);
+    }, [committedWidth]);
+    // 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));
+        widthMotionValue.set(newWidth);
+    }, [isDragging, widthMotionValue]);
+    // Handle pointer up to end drag
+    const handlePointerUp = React.useCallback((e) => {
+        if (!isDragging)
+            return;
+        const deltaX = e.clientX - dragStartX.current;
+        const newWidth = Math.max(250, Math.min(800, dragStartWidth.current - deltaX));
+        setCommittedWidth(newWidth);
+        widthMotionValue.set(newWidth);
+        setIsDragging(false);
+        // 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")) }));
 });
 ChatLayoutAside.displayName = "ChatLayout.Aside";
 /* -------------------------------------------------------------------------------------------------

package/dist/gui/components/ChatView.js

@@ -1,12 +1,11 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createLogger } from "@townco/core";
-import { ArrowUp, Bug, ChevronDown, ChevronUp, Code, PanelRight, Plus, Settings, Sparkles, X, } from "lucide-react";
-import { useCallback, useEffect, useState } from "react";
+import { ArrowUp, Bug, ChevronUp, 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 { 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, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, FilesTabContent, IconButton, Message, MessageContent, PanelTabsHeader, SettingsTabContent, 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, ThemeToggle, TodoTabContent, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "./index.js";
 const logger = createLogger("gui");
 // Helper component to provide openFiles callback
 function OpenFilesButton({ children, }) {
@@ -31,85 +30,8 @@ function OpenFilesButton({ children, }) {
     };
     return _jsx(_Fragment, { children: children({ openFiles, openSettings }) });
 }
-// Hook to handle sidebar keyboard shortcut (Cmd+B / Ctrl+B)
-function SidebarHotkey() {
-    const { panelSize, setPanelSize } = ChatLayout.useChatLayoutContext();
-    useEffect(() => {
-        const handleKeyDown = (e) => {
-            // Cmd+B (Mac) or Ctrl+B (Windows/Linux)
-            if ((e.metaKey || e.ctrlKey) && e.key === "b") {
-                e.preventDefault();
-                setPanelSize(panelSize === "hidden" ? "small" : "hidden");
-            }
-        };
-        window.addEventListener("keydown", handleKeyDown);
-        return () => window.removeEventListener("keydown", handleKeyDown);
-    }, [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" }))] })] }));
-}
+// 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, currentModel, commandMenuItems, }) {
     const attachedFiles = useChatStore((state) => state.input.attachedFiles);
@@ -128,21 +50,19 @@ function AsideTabs({ todos, tools, mcps, 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, client, currentSessionId, }) {
+function MobileHeader({ agentName, showHeader, }) {
     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(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") }) })] }));
+    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") }) })] }));
 }
 // Header component that uses ChatLayout context (must be inside ChatLayout.Root)
-function AppChatHeader({ agentName, todos, sources, showHeader, sessionId, debuggerUrl, tools, mcps, subagents, client, }) {
-    const { panelSize, setPanelSize } = ChatLayout.useChatLayoutContext();
+function AppChatHeader({ agentName, todos, sources, showHeader, sessionId, debuggerUrl, tools, mcps, subagents, }) {
+    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: [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, 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 ?? [] }) })] }) })] }));
+    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 ?? [] }) })] }) })] }));
 }
 export function ChatView({ client, initialSessionId, error: initError, debuggerUrl, }) {
     // Use shared hooks from @townco/ui/core - MUST be called before any early returns
@@ -291,32 +211,36 @@ export function ChatView({ client, initialSessionId, error: initError, debuggerU
             },
         },
     ];
-    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 });
-                                            }, 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) => {
-                                        // Calculate dynamic spacing based on message sequence
-                                        const isFirst = index === 0;
-                                        const previousMessage = isFirst ? null : messages[index - 1];
-                                        let spacingClass = "mt-2";
-                                        if (isFirst) {
-                                            // 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
-                                            spacingClass =
-                                                previousMessage?.role === "user" ? "mt-4" : "mt-4";
-                                        }
-                                        else if (message.role === "assistant") {
-                                            // Assistant message is usually a response
-                                            spacingClass =
-                                                previousMessage?.role === "assistant" ? "mt-2" : "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, currentModel: currentModel, commandMenuItems: commandMenuItems }) })] })] }), isLargeScreen && (_jsx(ChatLayout.Aside, { breakpoint: "lg", children: _jsx(AsideTabs, { todos: todos, tools: agentTools, mcps: agentMcps, subagents: agentSubagents }) }))] }));
+    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) => {
+                                                            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) => {
+                                                    // Calculate dynamic spacing based on message sequence
+                                                    const isFirst = index === 0;
+                                                    const previousMessage = isFirst
+                                                        ? null
+                                                        : messages[index - 1];
+                                                    let spacingClass = "mt-2";
+                                                    if (isFirst) {
+                                                        // 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
+                                                        spacingClass =
+                                                            previousMessage?.role === "user" ? "mt-4" : "mt-4";
+                                                    }
+                                                    else if (message.role === "assistant") {
+                                                        // Assistant message is usually a response
+                                                        spacingClass =
+                                                            previousMessage?.role === "assistant"
+                                                                ? "mt-2"
+                                                                : "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, currentModel: currentModel, commandMenuItems: commandMenuItems }) })] })] }), isLargeScreen && (_jsx(ChatLayout.Aside, { breakpoint: "lg", children: _jsx(AsideTabs, { todos: todos, tools: agentTools, mcps: agentMcps, subagents: agentSubagents }) }))] }) })] }));
 }

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

@@ -0,0 +1,9 @@
+import type { HookNotificationDisplay } from "../../core/schemas/chat.js";
+export interface HookNotificationProps {
+    notification: HookNotificationDisplay;
+}
+/**
+ * HookNotification component - displays a hook notification inline with messages
+ * Only shows completed or error states (not intermediate "triggered" state)
+ */
+export declare function HookNotification({ notification }: HookNotificationProps): import("react/jsx-runtime").JSX.Element;