@townco/ui 0.1.97 → 0.1.98

package/dist/gui/components/Actions.js

@@ -11,7 +11,7 @@ export const Actions = ({ className, children, ...props }) => (_jsx("div", { cla
  * Single action button with optional tooltip
  */
 export const Action = ({ tooltip, children, label, className, variant = "ghost", size = "sm", ...props }) => {
-    const button = (_jsxs(Button, { className: cn("relative size-8 p-1.5 text-muted-foreground hover:text-foreground", className), size: size, type: "button", variant: variant, ...props, children: [children, _jsx("span", { className: "sr-only", children: label || tooltip })
+    const button = (_jsxs(Button, { className: cn("relative size-7 p-1.5 text-muted-foreground hover:text-foreground", className), size: size, type: "button", variant: variant, ...props, children: [children, _jsx("span", { className: "sr-only", children: label || tooltip })
         ] }));
     if (tooltip) {
         return (_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [

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

@@ -15,6 +15,8 @@ interface ChatLayoutContextValue {
     setIsDraggingAside: (dragging: boolean) => void;
     asideWidth: number;
     setAsideWidth: (width: number) => void;
+    mainWidth: number;
+    setMainWidth: (width: number) => void;
 }
 declare const ChatLayoutContext: React.Context<ChatLayoutContextValue | undefined>;
 declare const useChatLayoutContext: () => ChatLayoutContextValue;

package/dist/gui/components/ChatLayout.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { AnimatePresence, motion } from "framer-motion";
-import { ArrowDown, ArrowUp, X } 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 { ASIDE_WIDTH_DEFAULT, ASIDE_WIDTH_MAX, ASIDE_WIDTH_MIN, CHAT_MAX_WIDTH, TOC_MIN_SPACING, } from "../constants.js";
+import { useElementSize } from "../hooks/use-element-size.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";
@@ -30,6 +31,8 @@ const ChatLayoutRoot = React.forwardRef(({ defaultSidebarOpen = false, defaultPa
     const [isDraggingAside, setIsDraggingAside] = React.useState(false);
     // Track aside panel width (for main content padding)
     const [asideWidth, setAsideWidth] = React.useState(ASIDE_WIDTH_DEFAULT);
+    // Track main content width (for ToC visibility logic)
+    const [mainWidth, setMainWidth] = React.useState(0);
     // Helper to toggle the right panel
     const togglePanel = React.useCallback(() => {
         // Prevent rapid toggling during animation
@@ -77,6 +80,8 @@ const ChatLayoutRoot = React.forwardRef(({ defaultSidebarOpen = false, defaultPa
             setIsDraggingAside,
             asideWidth,
             setAsideWidth,
+            mainWidth,
+            setMainWidth,
         }, 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";
@@ -85,8 +90,18 @@ const ChatLayoutHeader = React.forwardRef(({ className, children, ...props }, re
 });
 ChatLayoutHeader.displayName = "ChatLayout.Header";
 const ChatLayoutMain = React.forwardRef(({ className, children }, ref) => {
-    const { panelOpen, isDraggingAside, asideWidth } = useChatLayoutContext();
-    return (_jsx("div", { ref: ref, className: cn("flex flex-1 flex-col overflow-hidden h-full min-w-0", 
+    const { panelOpen, isDraggingAside, asideWidth, setMainWidth } = useChatLayoutContext();
+    // Internal ref for measuring width
+    const internalRef = React.useRef(null);
+    // Measure the main content width
+    const { width } = useElementSize(internalRef);
+    // Update context with the width
+    React.useEffect(() => {
+        setMainWidth(width);
+    }, [width, setMainWidth]);
+    // Merge external and internal refs
+    React.useImperativeHandle(ref, () => internalRef.current);
+    return (_jsx("div", { ref: internalRef, className: cn("flex flex-1 flex-col overflow-hidden h-full min-w-0", 
         // Use CSS transition for smooth reflow (like left sidebar does)
         !isDraggingAside && "transition-[padding] duration-250", className), style: {
             // Add padding when panel is open to make room for the fixed aside
@@ -99,85 +114,160 @@ const ChatLayoutBody = React.forwardRef(({ showToaster = true, className, childr
 });
 ChatLayoutBody.displayName = "ChatLayout.Body";
 const ChatLayoutMessages = React.forwardRef(({ className, children, onScrollChange, showScrollToBottom = true, initialScrollToBottom = true, ...props }, ref) => {
-    const { containerRef, endRef, isAtBottom, scrollToBottom, isUserMessageAboveFold, hasMoreUserMessagesBelow, userMessagesAboveCount, userMessagesBelowCount, scrollToPreviousUserMessage, scrollToNextUserMessage, scrollToUserMessageByIndex, getUserMessagePreviews, } = useScrollToBottom();
+    const { mainWidth } = useChatLayoutContext();
+    const { containerRef, endRef, isAtBottom, scrollToBottom, userMessagesAboveCount, scrollToUserMessageByIndex, } = useScrollToBottom();
+    // Animation variants for framer-motion
+    const tocContainerVariants = React.useMemo(() => ({
+        hidden: { opacity: 0, x: -8 },
+        visible: {
+            opacity: 1,
+            x: 0,
+            transition: {
+                duration: 0.2,
+                ease: [0.4, 0, 0.2, 1], // easeOut cubic-bezier
+            },
+        },
+        exit: {
+            opacity: 0,
+            x: -8,
+            transition: { duration: 0.15 },
+        },
+    }), []);
+    const hoverMenuVariants = React.useMemo(() => ({
+        hidden: {
+            opacity: 0,
+            x: -12,
+            scale: 0.95,
+            transition: { duration: 0.15 },
+        },
+        visible: {
+            opacity: 1,
+            x: 0,
+            scale: 1,
+            transition: {
+                duration: 0.15,
+                ease: [0.4, 0, 0.2, 1], // easeOut cubic-bezier
+            },
+        },
+        exit: {
+            opacity: 0,
+            x: -8,
+            scale: 0.98,
+            transition: { duration: 0.15 },
+        },
+    }), []);
     // State for hover menu
     const [showMessageMenu, setShowMessageMenu] = React.useState(false);
     const [messagePreviews, setMessagePreviews] = React.useState([]);
-    const hoverTimeoutRef = React.useRef(null);
-    // State for navigator pill visibility (only show when scrolling or cursor in top region)
-    const [isScrolling, setIsScrolling] = React.useState(false);
-    const [isCursorInTopRegion, setIsCursorInTopRegion] = React.useState(false);
-    const [isHoveringNav, setIsHoveringNav] = React.useState(false);
-    const scrollTimeoutRef = React.useRef(null);
-    // Track scrolling activity
-    React.useEffect(() => {
+    const [hoveredBarIndex, setHoveredBarIndex] = React.useState(null);
+    const [menuYPosition, setMenuYPosition] = React.useState(0);
+    const hoverEnterTimeoutRef = React.useRef(null);
+    const hoverLeaveTimeoutRef = React.useRef(null);
+    const rafRef = React.useRef(null);
+    const pendingYPositionRef = React.useRef(0);
+    // Function to get ALL user messages (not just those above fold)
+    const getAllUserMessagePreviews = React.useCallback(() => {
         const container = containerRef.current;
-        if (!container)
-            return;
-        const handleScroll = () => {
-            setIsScrolling(true);
-            // Clear existing timeout
-            if (scrollTimeoutRef.current) {
-                clearTimeout(scrollTimeoutRef.current);
-            }
-            // Hide after 1.5 seconds of no scrolling
-            scrollTimeoutRef.current = setTimeout(() => {
-                setIsScrolling(false);
-            }, 1500);
-        };
-        container.addEventListener("scroll", handleScroll, { passive: true });
-        return () => {
-            container.removeEventListener("scroll", handleScroll);
-            if (scrollTimeoutRef.current) {
-                clearTimeout(scrollTimeoutRef.current);
-            }
-        };
+        if (!container) {
+            return [];
+        }
+        // Find all user messages in the DOM
+        const userMessages = container.querySelectorAll('[aria-label="user message"]');
+        return Array.from(userMessages).map((element, index) => {
+            const textContent = element.textContent || "";
+            const preview = textContent.slice(0, 100) + (textContent.length > 100 ? "..." : "");
+            return { index, preview };
+        });
     }, [containerRef]);
-    // Track cursor position (show pill when cursor is in top 100px of the container)
+    // Load ALL message previews and update when messages change
     React.useEffect(() => {
         const container = containerRef.current;
         if (!container)
             return;
-        const handleMouseMove = (e) => {
-            const containerRect = container.getBoundingClientRect();
-            const relativeY = e.clientY - containerRect.top;
-            const isInTopRegion = relativeY >= 0 && relativeY <= 100;
-            setIsCursorInTopRegion(isInTopRegion);
+        const updatePreviews = () => {
+            const previews = getAllUserMessagePreviews();
+            setMessagePreviews(previews);
         };
-        const handleMouseLeave = () => {
-            setIsCursorInTopRegion(false);
+        // Initial load
+        updatePreviews();
+        // Watch for DOM changes (new messages being added)
+        const mutationObserver = new MutationObserver(updatePreviews);
+        mutationObserver.observe(container, {
+            childList: true,
+            subtree: true,
+        });
+        return () => {
+            mutationObserver.disconnect();
         };
-        container.addEventListener("mousemove", handleMouseMove);
-        container.addEventListener("mouseleave", handleMouseLeave);
+    }, [containerRef, getAllUserMessagePreviews]);
+    // Cleanup timeouts and RAF on unmount
+    React.useEffect(() => {
         return () => {
-            container.removeEventListener("mousemove", handleMouseMove);
-            container.removeEventListener("mouseleave", handleMouseLeave);
+            if (hoverEnterTimeoutRef.current) {
+                clearTimeout(hoverEnterTimeoutRef.current);
+            }
+            if (hoverLeaveTimeoutRef.current) {
+                clearTimeout(hoverLeaveTimeoutRef.current);
+            }
+            if (rafRef.current !== null) {
+                cancelAnimationFrame(rafRef.current);
+            }
         };
-    }, [containerRef]);
-    // Show navigator pill only when scrolling, cursor in top region, or hovering over the nav
-    const showNavigatorPill = isUserMessageAboveFold &&
-        (isScrolling || isCursorInTopRegion || isHoveringNav);
-    // Handle mouse enter on navigation component
+    }, []);
+    // Show ToC when there are more than 1 user message AND there's enough space
+    // (main width must be greater than chat max width + space for ToC on both sides)
+    const hasEnoughSpace = mainWidth > CHAT_MAX_WIDTH + TOC_MIN_SPACING;
+    const showToC = messagePreviews.length > 1 && hasEnoughSpace;
+    // Handle mouse move on navigation component - track cursor position with RAF throttling
+    const handleNavMouseMove = React.useCallback((e) => {
+        // Get the nav element's bounding rect to calculate relative position
+        const navElement = e.currentTarget;
+        const navRect = navElement.getBoundingClientRect();
+        const relativeY = e.clientY - navRect.top;
+        // Store the pending position
+        pendingYPositionRef.current = relativeY;
+        // Use requestAnimationFrame to throttle updates to 60fps
+        if (rafRef.current === null) {
+            rafRef.current = requestAnimationFrame(() => {
+                setMenuYPosition(pendingYPositionRef.current);
+                rafRef.current = null;
+            });
+        }
+    }, []);
+    // Handle mouse enter on navigation component with 1.5s delay
     const handleNavMouseEnter = React.useCallback(() => {
-        if (hoverTimeoutRef.current) {
-            clearTimeout(hoverTimeoutRef.current);
+        // Clear any pending leave timeout
+        if (hoverLeaveTimeoutRef.current) {
+            clearTimeout(hoverLeaveTimeoutRef.current);
+            hoverLeaveTimeoutRef.current = null;
         }
-        setIsHoveringNav(true);
-        const previews = getUserMessagePreviews();
-        setMessagePreviews(previews);
-        setShowMessageMenu(true);
-    }, [getUserMessagePreviews]);
+        // Set a 1.5s delay before showing the menu
+        hoverEnterTimeoutRef.current = setTimeout(() => {
+            setShowMessageMenu(true);
+        }, 1500);
+    }, []);
     // Handle mouse leave with delay
     const handleNavMouseLeave = React.useCallback(() => {
-        hoverTimeoutRef.current = setTimeout(() => {
+        // Clear any pending enter timeout
+        if (hoverEnterTimeoutRef.current) {
+            clearTimeout(hoverEnterTimeoutRef.current);
+            hoverEnterTimeoutRef.current = null;
+        }
+        hoverLeaveTimeoutRef.current = setTimeout(() => {
             setShowMessageMenu(false);
-            setIsHoveringNav(false);
-        }, 150);
+            setHoveredBarIndex(null);
+        }, 500);
+    }, []);
+    // Handle hovering over individual bars
+    const handleBarMouseEnter = React.useCallback((index) => {
+        setHoveredBarIndex(index);
+    }, []);
+    const handleBarMouseLeave = React.useCallback(() => {
+        setHoveredBarIndex(null);
     }, []);
     // Handle click on a message in the menu
     const handleMessageClick = React.useCallback((index) => {
         scrollToUserMessageByIndex(index, "smooth");
-        setShowMessageMenu(false);
     }, [scrollToUserMessageByIndex]);
     const hasInitialScrolledRef = React.useRef(false);
     // Merge refs
@@ -209,17 +299,51 @@ const ChatLayoutMessages = React.forwardRef(({ className, children, onScrollChan
     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" })
-                ] }), showNavigatorPill && (_jsxs("nav", { className: "absolute top-4 left-1/2 -translate-x-1/2 z-10", onMouseEnter: handleNavMouseEnter, onMouseLeave: handleNavMouseLeave, "aria-label": "User message navigation", children: [
-                    _jsxs("div", { className: cn("flex items-center gap-0.5 rounded-full", "bg-card border border-border shadow-lg", "animate-in fade-in slide-in-from-top-2"), children: [userMessagesAboveCount > 0 && (_jsxs("button", { type: "button", onClick: () => scrollToPreviousUserMessage("smooth"), className: cn("flex items-center gap-1 py-2 pl-2.5 pr-2", hasMoreUserMessagesBelow
-                                    ? "rounded-l-full"
-                                    : "rounded-full pr-2.5", "text-foreground", "hover:bg-accent hover:text-accent-foreground", "transition-colors duration-150"), "aria-label": `${userMessagesAboveCount} previous user message${userMessagesAboveCount !== 1 ? "s" : ""}`, children: [
-                                    _jsx(ArrowUp, { className: "size-4" }), _jsx("span", { className: "text-xs font-medium min-w-[1ch]", children: userMessagesAboveCount })
-                                ] })), userMessagesAboveCount > 0 && hasMoreUserMessagesBelow && (_jsx("div", { className: "w-px h-4 bg-border" })), hasMoreUserMessagesBelow && (_jsxs("button", { type: "button", onClick: () => scrollToNextUserMessage("smooth"), className: cn("flex items-center gap-1 py-2 pl-2 pr-2.5", userMessagesAboveCount > 0
-                                    ? "rounded-r-full"
-                                    : "rounded-full pl-2.5", "text-foreground", "hover:bg-accent hover:text-accent-foreground", "transition-colors duration-150"), "aria-label": `${userMessagesBelowCount} next user message${userMessagesBelowCount !== 1 ? "s" : ""}`, children: [
-                                    _jsx("span", { className: "text-xs font-medium min-w-[1ch]", children: userMessagesBelowCount }), _jsx(ArrowDown, { className: "size-4" })
-                                ] }))] }), showMessageMenu && messagePreviews.length > 0 && (_jsx("div", { className: cn("absolute top-full left-1/2 -translate-x-1/2 mt-2", "w-72 max-h-64 overflow-y-auto", "bg-card border border-border rounded-lg shadow-xl", "animate-in fade-in slide-in-from-top-1 duration-150"), children: _jsx("div", { className: "p-1", children: messagePreviews.map(({ index, preview }) => (_jsxs("button", { type: "button", onClick: () => handleMessageClick(index), className: cn("w-full text-left px-3 py-2 rounded-md", "text-sm text-foreground", "hover:bg-accent hover:text-accent-foreground", "transition-colors duration-100", "truncate"), children: [
-                                    _jsxs("span", { className: "text-muted-foreground mr-2 text-xs", children: [index + 1, "."] }), preview] }, index))) }) }))] })), 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" }) }))] }));
+                ] }), _jsx(AnimatePresence, { mode: "wait", children: showToC && (_jsxs(motion.nav, { variants: tocContainerVariants, initial: "hidden", animate: "visible", exit: "exit", className: "absolute p-4 left-0 top-1/2 -translate-y-1/2 z-10", onMouseEnter: handleNavMouseEnter, onMouseMove: handleNavMouseMove, onMouseLeave: handleNavMouseLeave, "aria-label": "User message navigation", children: [
+                        _jsx("div", { className: "flex flex-col", children: messagePreviews.map(({ index }) => {
+                                // Determine if this is the "current" message in view
+                                // The current message is the first one visible in the viewport
+                                // userMessagesAboveCount tells us how many are above (not visible)
+                                // So the current visible message is at index userMessagesAboveCount
+                                const isCurrentMessage = index === userMessagesAboveCount;
+                                const isHovered = hoveredBarIndex === index;
+                                return (_jsx("button", { type: "button", onClick: () => handleMessageClick(index), onMouseEnter: () => handleBarMouseEnter(index), onMouseLeave: handleBarMouseLeave, className: "py-2 px-1 group", "aria-label": `Go to user message ${index + 1}`, children: _jsx("div", { className: cn("w-4 h-[2px] rounded-full bg-primary transition-opacity duration-200", isCurrentMessage ? "opacity-80" : "opacity-10", isHovered && "opacity-60", !isHovered && "group-hover:opacity-60") }) }, index));
+                            }) }), _jsx(AnimatePresence, { children: showMessageMenu &&
+                                messagePreviews.length > 0 &&
+                                hoveredBarIndex !== null &&
+                                (() => {
+                                    // Menu item height (py-2 = 0.5rem top + 0.5rem bottom = 1rem = 16px, plus content)
+                                    // Approximate height per item: 40px (padding + text line height)
+                                    const itemHeight = 40;
+                                    // Show up to 3 items at a time, or fewer if there aren't enough messages
+                                    const maxVisibleItems = Math.min(3, messagePreviews.length);
+                                    const menuVisibleHeight = itemHeight * maxVisibleItems + 10;
+                                    // Calculate the translateY to center the hovered item in the menu
+                                    // We want to move the content up so the hovered item is in the middle (at itemHeight * 1)
+                                    const targetCenterPosition = itemHeight * 1; // Middle position
+                                    const hoveredItemPosition = itemHeight * hoveredBarIndex;
+                                    const translateY = targetCenterPosition - hoveredItemPosition;
+                                    // Clamp the translation so we don't over-scroll at the edges
+                                    const maxTranslateY = 0; // Don't scroll past the first item
+                                    const minTranslateY = menuVisibleHeight -
+                                        itemHeight * messagePreviews.length -
+                                        10;
+                                    const clampedTranslateY = Math.max(minTranslateY, Math.min(maxTranslateY, translateY));
+                                    return (_jsx(motion.div, { variants: hoverMenuVariants, initial: "hidden", animate: "visible", exit: "exit", className: cn("absolute left-12 pointer-events-none", "w-72 overflow-hidden", "bg-card border border-border rounded-lg shadow-xl"), style: {
+                                            top: `${menuYPosition}px`,
+                                            y: "-50%",
+                                            height: `${menuVisibleHeight}px`,
+                                            willChange: "transform",
+                                        }, children: _jsx("div", { className: "p-1", style: {
+                                                transform: `translateY(${clampedTranslateY}px)`,
+                                                transition: "transform 0.15s cubic-bezier(0.4, 0, 0.2, 1)",
+                                                willChange: "transform",
+                                            }, children: messagePreviews.map(({ index, preview }) => {
+                                                const isHovered = index === hoveredBarIndex;
+                                                return (_jsx("div", { className: cn("w-full text-left px-3 py-2 rounded-md", "text-sm text-muted-foreground", "transition-colors duration-100", "truncate", isHovered && "bg-accent text-foreground"), style: { height: `${itemHeight}px` }, children: preview }, index));
+                                            }) }) }, "hover-menu"));
+                                })() })
+                    ] }, "toc")) }), 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) => {

package/dist/gui/components/ChatPanelTabContent.js

@@ -34,8 +34,8 @@ FilesTabContent.displayName = "FilesTabContent";
 export const SourcesTabContent = React.forwardRef(({ sources = [], highlightedSourceId, className, ...props }, ref) => {
     // Show empty state if no sources
     if (sources.length === 0) {
-        return (_jsxs("div", { ref: ref, className: cn("flex flex-col items-center justify-center h-full text-center py-8", className), ...props, children: [
-                _jsx(Globe, { className: "size-8 text-muted-foreground/50 mb-3" }), _jsx("p", { className: "text-paragraph-sm text-muted-foreground", children: "No sources yet" }), _jsx("p", { className: "text-caption text-muted-foreground/70 mt-1", children: "Sources from web searches and fetches will appear here" })
+        return (_jsxs("div", { ref: ref, className: cn("flex flex-col items-center justify-center h-full text-center py-8 max-w-sm mx-auto", className), ...props, children: [
+                _jsx(Globe, { className: "size-8 text-muted-foreground opacity-50 mb-3" }), _jsx("p", { className: "text-paragraph text-muted-foreground", children: "No sources yet" }), _jsx("p", { className: "text-paragraph-sm text-muted-foreground/70 mt-1", children: "Sources will appear when your agent searches the web or fetches data." })
             ] }));
     }
     return (_jsx("div", { ref: ref, className: cn("space-y-2", className), ...props, children: sources.map((source) => (_jsx(SourceListItem, { source: source, isSelected: source.id === highlightedSourceId }, source.id))) }));

package/dist/gui/components/ChatView.js

@@ -94,6 +94,7 @@ export function ChatView({ client, initialSessionId, error: initError, debuggerU
     const [agentPromptParameters, setAgentPromptParameters] = useState([]);
     const [placeholder, setPlaceholder] = useState("Type a message or / for commands...");
     const [hideTopBar, setHideTopBar] = useState(false);
+    const [editingMessageIndex, setEditingMessageIndex] = useState(null);
     const todos = useChatStore(selectTodosForCurrentSession);
     const _latestContextSize = useChatStore((state) => state.latestContextSize);
     const { resolvedTheme, setTheme } = useTheme();
@@ -309,7 +310,12 @@ export function ChatView({ client, initialSessionId, error: initError, debuggerU
                                                             .slice(0, index + 1)
                                                             .filter((m) => m.role === "user").length - 1
                                                         : -1;
-                                                    return (_jsx(Message, { message: message, className: cn(spacingClass, "group"), isLastMessage: index === messages.length - 1, children: _jsx("div", { className: "flex flex-col w-full", children: message.role === "user" ? (_jsx(EditableUserMessage, { message: message, messageIndex: userMessageIndex, isStreaming: anyMessageStreaming, onEditAndResend: editAndResend })) : (_jsxs(_Fragment, { children: [
+                                                    // Check if this message should be dimmed (comes after editing message)
+                                                    const shouldDim = editingMessageIndex !== null &&
+                                                        index > editingMessageIndex;
+                                                    return (_jsx(Message, { message: message, className: cn(spacingClass, "group", shouldDim && "opacity-50"), isLastMessage: index === messages.length - 1, children: _jsx("div", { className: "flex flex-col w-full", children: message.role === "user" ? (_jsx(EditableUserMessage, { message: message, messageIndex: userMessageIndex, isStreaming: anyMessageStreaming, onEditAndResend: editAndResend, sticky: true, onEditingChange: (isEditing) => {
+                                                                    setEditingMessageIndex(isEditing ? index : null);
+                                                                } })) : (_jsxs(_Fragment, { children: [
                                                                     _jsx(MessageContent, { message: message, thinkingDisplayStyle: "collapsible" }), _jsx(MessageActions, { message: message, isStreaming: message.isStreaming, onSendMessage: sendMessage, isLastAssistantMessage: index ===
                                                                             messages.findLastIndex((m) => m.role === "assistant"), onRedo: () => {
                                                                             // Find the user message that preceded this assistant message

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

@@ -10,7 +10,11 @@ export interface EditableUserMessageProps {
         mimeType: string;
         data: string;
     }>) => void;
+    /** Whether to make the message content sticky */
+    sticky?: boolean;
+    /** Callback when editing state changes */
+    onEditingChange?: (isEditing: boolean) => void;
 }
-declare function PureEditableUserMessage({ message, messageIndex, isStreaming, onEditAndResend }: EditableUserMessageProps): import("react/jsx-runtime").JSX.Element;
+declare function PureEditableUserMessage({ message, messageIndex, isStreaming, onEditAndResend, sticky, onEditingChange }: EditableUserMessageProps): import("react/jsx-runtime").JSX.Element;
 export declare const EditableUserMessage: import("react").MemoExoticComponent<typeof PureEditableUserMessage>;
 export {};

package/dist/gui/components/EditableUserMessage.js

@@ -1,16 +1,42 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Check, Copy, Pencil } from "lucide-react";
-import { memo, useCallback, useState } from "react";
+import { memo, useCallback, useEffect, useRef, useState } from "react";
 import { toast } from "sonner";
+import { cn } from "../lib/utils.js";
 import { Action, Actions } from "./Actions.js";
 import { Button } from "./Button.js";
-import { MessageContent } from "./MessageContent.js";
-import { Textarea } from "./Textarea.js";
-function PureEditableUserMessage({ message, messageIndex, isStreaming, onEditAndResend, }) {
+function PureEditableUserMessage({ message, messageIndex, isStreaming, onEditAndResend, sticky = false, onEditingChange, }) {
     const [isEditing, setIsEditing] = useState(false);
-    const [editedContent, setEditedContent] = useState(message.content || "");
     const [isCopied, setIsCopied] = useState(false);
+    const containerRef = useRef(null);
+    const contentEditableRef = useRef(null);
+    // Notify parent when editing state changes
+    useEffect(() => {
+        onEditingChange?.(isEditing);
+    }, [isEditing, onEditingChange]);
+    // Handle clicking the sticky message to scroll back to its position
+    const handleStickyClick = useCallback(() => {
+        if (!sticky || !containerRef.current)
+            return;
+        // Find the scroll container (parent with overflow-y-auto)
+        let scrollContainer = containerRef.current.parentElement;
+        while (scrollContainer &&
+            !scrollContainer.classList.contains("overflow-y-auto")) {
+            scrollContainer = scrollContainer.parentElement;
+        }
+        if (scrollContainer) {
+            // Get the element's position relative to the scroll container
+            const _elementRect = containerRef.current.getBoundingClientRect();
+            const _containerRect = scrollContainer.getBoundingClientRect();
+            const elementTop = containerRef.current.offsetTop;
+            // Scroll so the element is at the top of the container
+            scrollContainer.scrollTo({
+                top: elementTop - 16, // Small offset for padding
+                behavior: "smooth",
+            });
+        }
+    }, [sticky]);
     const handleCopy = useCallback(async () => {
         if (!message.content) {
             toast.error("There's no text to copy!");
@@ -29,14 +55,30 @@ function PureEditableUserMessage({ message, messageIndex, isStreaming, onEditAnd
         }
     }, [message.content]);
     const handleStartEdit = useCallback(() => {
-        setEditedContent(message.content || "");
         setIsEditing(true);
-    }, [message.content]);
+    }, []);
+    // Focus the contenteditable element when entering edit mode
+    useEffect(() => {
+        if (isEditing && contentEditableRef.current) {
+            contentEditableRef.current.focus();
+            // Move cursor to end
+            const range = document.createRange();
+            const selection = window.getSelection();
+            range.selectNodeContents(contentEditableRef.current);
+            range.collapse(false);
+            selection?.removeAllRanges();
+            selection?.addRange(range);
+        }
+    }, [isEditing]);
     const handleCancelEdit = useCallback(() => {
         setIsEditing(false);
-        setEditedContent(message.content || "");
+        // Reset content to original
+        if (contentEditableRef.current) {
+            contentEditableRef.current.textContent = message.content || "";
+        }
     }, [message.content]);
     const handleSaveAndResend = useCallback(() => {
+        const editedContent = contentEditableRef.current?.textContent || "";
         if (!editedContent.trim())
             return;
         // Convert images back to attachments format if the message had images
@@ -49,31 +91,42 @@ function PureEditableUserMessage({ message, messageIndex, isStreaming, onEditAnd
         }));
         onEditAndResend(messageIndex, editedContent.trim(), attachments);
         setIsEditing(false);
-    }, [messageIndex, editedContent, message.images, onEditAndResend]);
+    }, [messageIndex, message.images, onEditAndResend]);
     const handleKeyDown = useCallback((e) => {
-        if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+        // Enter without Shift submits, Shift+Enter inserts line break
+        if (e.key === "Enter" && !e.shiftKey) {
             e.preventDefault();
             handleSaveAndResend();
         }
+        // Escape cancels editing
         if (e.key === "Escape") {
             e.preventDefault();
             handleCancelEdit();
         }
     }, [handleSaveAndResend, handleCancelEdit]);
-    if (isEditing) {
-        return (_jsxs("div", { className: "w-full bg-secondary rounded-2xl px-4 py-4", children: [message.images && message.images.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-2 mb-2", children: message.images.map((image, imageIndex) => (_jsx("img", { src: `data:${image.mimeType};base64,${image.data}`, alt: `Attachment ${imageIndex + 1}`, className: "max-w-[200px] max-h-[200px] rounded-lg object-cover opacity-50" }, `image-${image.mimeType}-${image.data.slice(0, 20)}`))) })), _jsx(Textarea, { value: editedContent, onChange: (e) => setEditedContent(e.target.value), onKeyDown: handleKeyDown, className: "min-h-[60px] w-full resize-none bg-transparent border-none shadow-none focus-visible:ring-0 focus-visible:ring-offset-0 p-0 text-base leading-relaxed text-foreground", autoFocus: true, placeholder: "Edit your message..." }), _jsxs("div", { className: "flex items-center justify-end gap-2 mt-2", children: [
-                        _jsx(Button, { variant: "ghost", size: "sm", onClick: handleCancelEdit, className: "h-7 px-2 text-xs", children: "Cancel" }), _jsx(Button, { size: "sm", onClick: handleSaveAndResend, disabled: !editedContent.trim(), className: "h-7 px-3 text-xs", children: "Send" })
-                    ] })
-            ] }));
-    }
-    return (_jsxs("div", { className: "w-full group/user-message", children: [
-            _jsx(MessageContent, { message: message }), !isStreaming && message.content && (_jsxs(Actions, { className: "mt-2 opacity-0 group-hover/user-message:opacity-100 transition-opacity", children: [
-                    _jsx(Action, { onClick: handleCopy, tooltip: isCopied ? "Copied!" : "Copy", children: isCopied ? (_jsx(Check, { className: "size-4" })) : (_jsx(Copy, { className: "size-4" })) }), _jsx(Action, { onClick: handleStartEdit, tooltip: "Edit", children: _jsx(Pencil, { className: "size-4" }) })
-                ] }))] }));
+    return (_jsxs("div", { ref: containerRef, className: "w-full group/user-message", children: [
+            _jsx("div", { className: cn("w-full rounded-2xl bg-secondary px-4 py-4 transition-colors", sticky && "sticky top-0 z-10 bg-secondary cursor-pointer", isEditing &&
+                    "ring-2 ring-primary/20 focus-within:ring-primary/40 transition-all bg-transparent"), onClick: sticky && !isEditing ? handleStickyClick : undefined, onKeyDown: sticky && !isEditing
+                    ? (e) => {
+                        if (e.key === "Enter" || e.key === " ") {
+                            handleStickyClick();
+                        }
+                    }
+                    : undefined, role: sticky && !isEditing ? "button" : undefined, tabIndex: sticky && !isEditing ? 0 : undefined, children: _jsxs("div", { className: "flex flex-col gap-2", children: [message.images && message.images.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-2", children: message.images.map((image, imageIndex) => (_jsx("img", { src: `data:${image.mimeType};base64,${image.data}`, alt: `Attachment ${imageIndex + 1}`, className: cn("max-w-[200px] max-h-[200px] rounded-lg object-cover", isEditing && "opacity-50") }, `image-${image.mimeType}-${image.data.slice(0, 20)}`))) })), message.content && (
+                        // biome-ignore lint/a11y/useSemanticElements: contentEditable div preserves whitespace formatting better than textarea
+                        _jsx("div", { ref: contentEditableRef, role: "textbox", tabIndex: isEditing ? 0 : -1, contentEditable: isEditing, onKeyDown: isEditing ? handleKeyDown : undefined, suppressContentEditableWarning: true, className: cn("whitespace-pre-wrap text-foreground leading-relaxed outline-none", isEditing && "cursor-text", !isEditing && "cursor-default"), children: message.content }))] }) }), !isStreaming && message.content && (_jsx(Actions, { className: cn("mt-2 transition-opacity justify-end", isEditing
+                    ? "opacity-100"
+                    : "opacity-0 group-hover/user-message:opacity-100"), children: isEditing ? (_jsxs(_Fragment, { children: [
+                        _jsx(Button, { variant: "ghost", size: "sm", onClick: handleCancelEdit, className: "h-7 px-2 text-xs text-muted-foreground hover:text-foreground", children: "Cancel" }), _jsx(Button, { size: "sm", onClick: handleSaveAndResend, className: "h-7 px-3 text-xs", children: "Send" })
+                    ] })) : (_jsxs(_Fragment, { children: [
+                        _jsx(Action, { onClick: handleCopy, tooltip: isCopied ? "Copied!" : "Copy", children: isCopied ? (_jsx(Check, { className: "size-4" })) : (_jsx(Copy, { className: "size-4" })) }), _jsx(Action, { onClick: handleStartEdit, tooltip: "Edit", children: _jsx(Pencil, { className: "size-4" }) })
+                    ] })) }))] }));
 }
 export const EditableUserMessage = memo(PureEditableUserMessage, (prevProps, nextProps) => {
     return (prevProps.isStreaming === nextProps.isStreaming &&
         prevProps.message.id === nextProps.message.id &&
         prevProps.message.content === nextProps.message.content &&
-        prevProps.messageIndex === nextProps.messageIndex);
+        prevProps.messageIndex === nextProps.messageIndex &&
+        prevProps.sticky === nextProps.sticky &&
+        prevProps.onEditingChange === nextProps.onEditingChange);
 });

package/dist/gui/components/HookNotification.js

@@ -1,33 +1,47 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { AlertCircle, AlertTriangle, Archive, CheckCircle2, ChevronDown, Loader2, Scissors, } from "lucide-react";
+import { AlertCircle, AlertTriangle, CheckCircle2, ChevronDown, FoldVertical, Loader2, } from "lucide-react";
 import { useEffect, useState } from "react";
 /**
  * Get display information for a hook type
  */
-function getHookDisplayInfo(hookType, _callback, status, action) {
+function getHookDisplayInfo(hookType, callback, status, action, midTurn) {
     const isTriggered = status === "triggered";
     const noActionNeeded = action === "no_action_needed";
     if (hookType === "context_size") {
         if (isTriggered) {
-            return { icon: Archive, title: "Compacting Context..." };
+            return { icon: FoldVertical, title: "Compacting Context..." };
         }
         return {
-            icon: Archive,
+            icon: FoldVertical,
             title: noActionNeeded ? "Context Check" : "Context Compacted",
         };
     }
     if (hookType === "tool_response") {
+        // Check for mid-turn compaction (either by callback name or metadata flag)
+        const isMidTurnCompaction = callback === "mid_turn_compaction" || midTurn === true;
+        if (isMidTurnCompaction) {
+            if (isTriggered) {
+                return { icon: FoldVertical, title: "Compacting Context Mid-Turn..." };
+            }
+            return {
+                icon: FoldVertical,
+                title: noActionNeeded
+                    ? "Context Check"
+                    : "Context Compacted (Mid-Turn)",
+            };
+        }
+        // Regular tool response compaction
         if (isTriggered) {
-            return { icon: Scissors, title: "Compacting Response..." };
+            return { icon: FoldVertical, title: "Compacting Response..." };
         }
         return {
-            icon: Scissors,
+            icon: FoldVertical,
             title: noActionNeeded ? "Response Check" : "Tool Response Compacted",
         };
     }
     // Fallback for unknown hook types
     return {
-        icon: Archive,
+        icon: FoldVertical,
         title: isTriggered ? "Running Hook..." : "Hook Executed",
     };
 }
@@ -44,7 +58,7 @@ function formatNumber(num) {
 export function HookNotification({ notification }) {
     const [isExpanded, setIsExpanded] = useState(false);
     const [elapsedTime, setElapsedTime] = useState(0);
-    const { icon: IconComponent, title } = getHookDisplayInfo(notification.hookType, notification.callback, notification.status, notification.metadata?.action);
+    const { icon: IconComponent, title } = getHookDisplayInfo(notification.hookType, notification.callback, notification.status, notification.metadata?.action, notification.metadata?.midTurn);
     const isTriggered = notification.status === "triggered";
     const isCompleted = notification.status === "completed";
     const isError = notification.status === "error";
@@ -65,15 +79,25 @@ export function HookNotification({ notification }) {
         const interval = setInterval(updateElapsed, 100);
         return () => clearInterval(interval);
     }, [isTriggered, notification.triggeredAt]);
+    // Check if this is mid-turn compaction
+    const isMidTurnCompaction = notification.callback === "mid_turn_compaction" ||
+        notification.metadata?.midTurn === true;
     // Build subtitle showing key info
     let subtitle = "";
     if (isTriggered && notification.currentPercentage !== undefined) {
         subtitle = `Context at ${notification.currentPercentage.toFixed(1)}% (threshold: ${notification.threshold}%)`;
     }
     else if (isCompleted && notification.metadata?.tokensSaved !== undefined) {
-        const { tokensSaved, originalTokens } = notification.metadata;
+        const { tokensSaved, originalTokens, messagesRemoved } = notification.metadata;
+        // For mid-turn compaction - show context reduction info
+        if (isMidTurnCompaction) {
+            const messagesInfo = messagesRemoved !== undefined
+                ? `${formatNumber(messagesRemoved)} messages summarized, `
+                : "";
+            subtitle = `${messagesInfo}${formatNumber(tokensSaved ?? 0)} tokens saved`;
+        }
         // For tool_response hooks - show percentage reduced of the tool response
-        if (originalTokens !== undefined && originalTokens > 0) {
+        else if (originalTokens !== undefined && originalTokens > 0) {
             const percentageSaved = ((tokensSaved ?? 0) / originalTokens) * 100;
             subtitle = `${percentageSaved.toFixed(0)}% reduced`;
         }

package/dist/gui/components/MessageActions.js

@@ -66,7 +66,7 @@ function PureMessageActions({ message, isStreaming, onRedo, onSendMessage, isLas
     return (_jsxs(Actions, { className: cn("mt-2 mb-10", visibilityClass), children: [
             _jsx(Action, { onClick: handleCopy, tooltip: isCopied ? "Copied!" : "Copy", children: isCopied ? _jsx(Check, { className: "size-4" }) : _jsx(Copy, { className: "size-4" }) }), _jsx(Action, { onClick: handleRedo, tooltip: "Redo", children: _jsx(RotateCcw, { className: "size-4" }) }), _jsxs(DropdownMenu, { children: [
                     _jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [
-                                _jsx(TooltipTrigger, { asChild: true, children: _jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { className: cn("relative size-8 p-1.5 text-muted-foreground hover:text-foreground"), size: "sm", type: "button", variant: "ghost", children: [
+                                _jsx(TooltipTrigger, { asChild: true, children: _jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { className: cn("relative size-7 p-1.5 text-muted-foreground hover:text-foreground"), size: "sm", type: "button", variant: "ghost", children: [
                                                 _jsx(Download, { className: "size-4" }), _jsx("span", { className: "sr-only", children: "Export" })
                                             ] }) }) }), _jsx(TooltipContent, { children: _jsx("p", { children: "Export" }) })
                             ] }) }), _jsx(DropdownMenuContent, { align: "start", children: EXPORT_FORMATS.map((format) => (_jsxs(DropdownMenuItem, { onClick: () => handleExport(format.label), children: [

package/dist/gui/components/TodoList.js

@@ -7,10 +7,8 @@ import { TodoListItem } from "./TodoListItem.js";
  * Empty state component for the todo list
  */
 function TodoListEmptyState() {
-    return (_jsxs("div", { className: "flex flex-col items-center justify-center h-full gap-3", children: [
-            _jsx(SquareCheckBig, { className: "size-8 text-neutral-300" }), _jsxs("p", { className: "text-base leading-6 text-neutral-400 text-center", children: ["There's nothing on the",
-                    _jsx("br", {}),
-                    "to-do list yet."] })
+    return (_jsxs("div", { className: "flex flex-col items-center justify-center h-full text-center py-8 max-w-sm mx-auto", children: [
+            _jsx(SquareCheckBig, { className: "size-8 text-muted-foreground opacity-50 mb-3" }), _jsx("p", { className: "text-paragraph text-muted-foreground", children: "To-do list is empty" }), _jsx("p", { className: "text-paragraph-sm text-muted-foreground/70 mt-1", children: "Your agent will create tasks as it works through requests." })
         ] }));
 }
 export const TodoList = React.forwardRef(({ client, todos, className, ...props }, ref) => {

package/dist/gui/constants.d.ts

@@ -4,3 +4,6 @@ export declare const SIDEBAR_TAP_ZONE = 104;
 export declare const ASIDE_WIDTH_DEFAULT = 450;
 export declare const ASIDE_WIDTH_MIN = 250;
 export declare const ASIDE_WIDTH_MAX = 800;
+export declare const CHAT_MAX_WIDTH = 720;
+export declare const TOC_WIDTH = 56;
+export declare const TOC_MIN_SPACING: number;

package/dist/gui/constants.js

@@ -6,3 +6,7 @@ export const SIDEBAR_TAP_ZONE = 104;
 export const ASIDE_WIDTH_DEFAULT = 450;
 export const ASIDE_WIDTH_MIN = 250;
 export const ASIDE_WIDTH_MAX = 800;
+// Chat layout constants
+export const CHAT_MAX_WIDTH = 720; // matches CSS variable --max-width-chat
+export const TOC_WIDTH = 56; // Table of Contents navigation width
+export const TOC_MIN_SPACING = TOC_WIDTH * 2; // Minimum spacing needed on sides (2 * TOC width)

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

@@ -1,3 +1,4 @@
+export { useElementSize } from "./use-element-size.js";
 export { useDocumentTitle, useFavicon } from "./use-favicon.js";
 export { useLockBodyScroll } from "./use-lock-body-scroll.js";
 export { useIsMobile } from "./use-mobile.js";

package/dist/gui/hooks/index.js

@@ -1,3 +1,4 @@
+export { useElementSize } from "./use-element-size.js";
 export { useDocumentTitle, useFavicon } from "./use-favicon.js";
 export { useLockBodyScroll } from "./use-lock-body-scroll.js";
 export { useIsMobile } from "./use-mobile.js";

package/dist/gui/hooks/use-element-size.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+interface ElementSize {
+    width: number;
+    height: number;
+}
+/**
+ * Hook to observe and track an element's size using ResizeObserver
+ * @param ref - React ref to the element to observe
+ * @returns Object containing current width and height
+ */
+export declare function useElementSize<T extends HTMLElement = HTMLDivElement>(ref: React.RefObject<T | null>): ElementSize;
+export {};

package/dist/gui/hooks/use-element-size.js

@@ -0,0 +1,38 @@
+import * as React from "react";
+/**
+ * Hook to observe and track an element's size using ResizeObserver
+ * @param ref - React ref to the element to observe
+ * @returns Object containing current width and height
+ */
+export function useElementSize(ref) {
+    const [size, setSize] = React.useState({
+        width: 0,
+        height: 0,
+    });
+    React.useEffect(() => {
+        const element = ref.current;
+        if (!element)
+            return undefined;
+        // Create ResizeObserver to track size changes
+        const resizeObserver = new ResizeObserver((entries) => {
+            if (!Array.isArray(entries) || !entries.length) {
+                return;
+            }
+            const entry = entries[0];
+            if (!entry)
+                return;
+            const { width, height } = entry.contentRect;
+            setSize({ width, height });
+        });
+        // Start observing
+        resizeObserver.observe(element);
+        // Set initial size
+        const rect = element.getBoundingClientRect();
+        setSize({ width: rect.width, height: rect.height });
+        // Cleanup
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, [ref]);
+    return size;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@townco/ui",
-  "version": "0.1.97",
+  "version": "0.1.98",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -15,18 +15,22 @@
   },
   "exports": {
     ".": {
+      "development": "./src/index.ts",
       "import": "./dist/index.js",
       "types": "./dist/index.d.ts"
     },
     "./core": {
+      "development": "./src/core/index.ts",
       "import": "./dist/core/index.js",
       "types": "./dist/core/index.d.ts"
     },
     "./tui": {
+      "development": "./src/tui/index.ts",
       "import": "./dist/tui/index.js",
       "types": "./dist/tui/index.d.ts"
     },
     "./gui": {
+      "development": "./src/gui/index.ts",
       "import": "./dist/gui/index.js",
       "types": "./dist/gui/index.d.ts"
     },
@@ -70,10 +74,11 @@
     "@townco/tsconfig": "0.1.94",
     "@types/node": "^24.10.0",
     "@types/react": "^19.2.2",
+    "@types/unist": "^3.0.3",
+    "@typescript/native-preview": "^7.0.0-dev.20251207.1",
     "ink": "^6.4.0",
     "react": "19.2.1",
-    "tailwindcss": "^4.1.17",
-    "@typescript/native-preview": "^7.0.0-dev.20251207.1"
+    "tailwindcss": "^4.1.17"
   },
   "peerDependencies": {
     "ink": "^6.4.0",