@townco/ui 0.1.83 → 0.1.96

package/dist/gui/components/ChatLayout.js

@@ -1,12 +1,12 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { AnimatePresence, motion, useMotionValue } from "framer-motion";
-import { ArrowDown, X } from "lucide-react";
+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 * as React from "react";
 import { ASIDE_WIDTH_DEFAULT, ASIDE_WIDTH_MAX, ASIDE_WIDTH_MIN, } from "../constants.js";
 import { useLockBodyScroll } from "../hooks/use-lock-body-scroll.js";
 import { useIsMobile } from "../hooks/use-mobile.js";
 import { useScrollToBottom } from "../hooks/use-scroll-to-bottom.js";
-import { asideContentTransition, asideContentVariants, asideMobileTransition, asideMobileVariants, motionEasing, } from "../lib/motion.js";
+import { asideContentTransition, asideContentVariants, asideMobileTransition, asideMobileVariants, } from "../lib/motion.js";
 import { cn } from "../lib/utils.js";
 import { IconButton } from "./IconButton.js";
 import { Toaster } from "./Sonner.js";
@@ -28,6 +28,8 @@ const ChatLayoutRoot = React.forwardRef(({ defaultSidebarOpen = false, defaultPa
     const isTogglingRef = React.useRef(false);
     // Track if aside panel is being dragged (for Main reflow coordination)
     const [isDraggingAside, setIsDraggingAside] = React.useState(false);
+    // Track aside panel width (for main content padding)
+    const [asideWidth, setAsideWidth] = React.useState(ASIDE_WIDTH_DEFAULT);
     // Helper to toggle the right panel
     const togglePanel = React.useCallback(() => {
         // Prevent rapid toggling during animation
@@ -39,12 +41,25 @@ const ChatLayoutRoot = React.forwardRef(({ defaultSidebarOpen = false, defaultPa
         // Reset after animation duration + buffer
         setTimeout(() => {
             isTogglingRef.current = false;
-        }, 600); // 500ms animation + 100ms buffer
+        }, 350); // 250ms animation + 100ms buffer
     }, []);
     // Helper to set panel open/closed (for backwards compatibility)
     const setPanelOpen = React.useCallback((open) => {
         setPanelSize(open ? "large" : "hidden");
     }, []);
+    // Keyboard shortcut to toggle right panel (Cmd/Ctrl+B)
+    React.useEffect(() => {
+        const handleKeyDown = (event) => {
+            if (event.key.toLowerCase() === "b" &&
+                (event.metaKey || event.ctrlKey) &&
+                !event.shiftKey) {
+                event.preventDefault();
+                togglePanel();
+            }
+        };
+        window.addEventListener("keydown", handleKeyDown);
+        return () => window.removeEventListener("keydown", handleKeyDown);
+    }, [togglePanel]);
     return (_jsx(ChatLayoutContext.Provider, { value: {
             sidebarOpen,
             setSidebarOpen,
@@ -60,6 +75,8 @@ const ChatLayoutRoot = React.forwardRef(({ defaultSidebarOpen = false, defaultPa
             togglePanel,
             isDraggingAside,
             setIsDraggingAside,
+            asideWidth,
+            setAsideWidth,
         }, 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";
@@ -68,17 +85,13 @@ const ChatLayoutHeader = React.forwardRef(({ className, children, ...props }, re
 });
 ChatLayoutHeader.displayName = "ChatLayout.Header";
 const ChatLayoutMain = React.forwardRef(({ className, children }, ref) => {
-    const { isDraggingAside } = useChatLayoutContext();
-    return (_jsx(motion.div, { ref: ref, layout: true, transition: isDraggingAside
-            ? {
-                // Instant reflow during aside drag
-                duration: 0,
-            }
-            : {
-                // Smooth animation for panel open/close
-                duration: 0.5,
-                ease: motionEasing.smooth,
-            }, className: cn("flex flex-1 flex-col overflow-hidden h-full min-w-0", className), children: children }));
+    const { panelOpen, isDraggingAside, asideWidth } = useChatLayoutContext();
+    return (_jsx("div", { ref: ref, 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
+            paddingRight: panelOpen ? asideWidth : 0,
+        }, children: children }));
 });
 ChatLayoutMain.displayName = "ChatLayout.Main";
 const ChatLayoutBody = React.forwardRef(({ showToaster = true, className, children, ...props }, ref) => {
@@ -86,7 +99,86 @@ 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 } = useScrollToBottom();
+    const { containerRef, endRef, isAtBottom, scrollToBottom, isUserMessageAboveFold, hasMoreUserMessagesBelow, userMessagesAboveCount, userMessagesBelowCount, scrollToPreviousUserMessage, scrollToNextUserMessage, scrollToUserMessageByIndex, getUserMessagePreviews, } = useScrollToBottom();
+    // 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 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);
+            }
+        };
+    }, [containerRef]);
+    // Track cursor position (show pill when cursor is in top 100px of the container)
+    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 handleMouseLeave = () => {
+            setIsCursorInTopRegion(false);
+        };
+        container.addEventListener("mousemove", handleMouseMove);
+        container.addEventListener("mouseleave", handleMouseLeave);
+        return () => {
+            container.removeEventListener("mousemove", handleMouseMove);
+            container.removeEventListener("mouseleave", handleMouseLeave);
+        };
+    }, [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
+    const handleNavMouseEnter = React.useCallback(() => {
+        if (hoverTimeoutRef.current) {
+            clearTimeout(hoverTimeoutRef.current);
+        }
+        setIsHoveringNav(true);
+        const previews = getUserMessagePreviews();
+        setMessagePreviews(previews);
+        setShowMessageMenu(true);
+    }, [getUserMessagePreviews]);
+    // Handle mouse leave with delay
+    const handleNavMouseLeave = React.useCallback(() => {
+        hoverTimeoutRef.current = setTimeout(() => {
+            setShowMessageMenu(false);
+            setIsHoveringNav(false);
+        }, 150);
+    }, []);
+    // 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
     React.useImperativeHandle(ref, () => containerRef.current);
@@ -117,7 +209,17 @@ 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" })
-                ] }), 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" }) }))] }));
+                ] }), 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" }) }))] }));
 });
 ChatLayoutMessages.displayName = "ChatLayout.Messages";
 const ChatLayoutFooter = React.forwardRef(({ className, children, ...props }, ref) => {
@@ -132,11 +234,11 @@ const ChatLayoutSidebar = React.forwardRef(({ className, children, ...props }, r
 });
 ChatLayoutSidebar.displayName = "ChatLayout.Sidebar";
 const ChatLayoutAside = React.forwardRef(({ breakpoint = "md", onClose, className, children }, ref) => {
-    const { panelSize, togglePanel, setIsDraggingAside } = useChatLayoutContext();
+    const { panelSize, togglePanel, setIsDraggingAside, setAsideWidth } = useChatLayoutContext();
     // State for committed width (persisted between renders)
     const [committedWidth, setCommittedWidth] = React.useState(ASIDE_WIDTH_DEFAULT);
-    // Motion value for real-time drag updates
-    const widthMotionValue = useMotionValue(committedWidth);
+    // State for current drag width (real-time updates during drag)
+    const [dragWidth, setDragWidth] = React.useState(committedWidth);
     // Track if currently dragging for visual feedback
     const [isDragging, setIsDragging] = React.useState(false);
     // Track drag start position and width
@@ -144,14 +246,34 @@ const ChatLayoutAside = React.forwardRef(({ breakpoint = "md", onClose, classNam
     const dragStartWidth = React.useRef(committedWidth);
     // Hidden state - don't render
     const isVisible = panelSize !== "hidden";
+    // Track if panel just mounted to animate from 0 width
+    const [hasAnimatedIn, setHasAnimatedIn] = React.useState(false);
+    // Reset animation state when panel becomes hidden
+    React.useEffect(() => {
+        if (!isVisible) {
+            setHasAnimatedIn(false);
+            return;
+        }
+        // Small delay to ensure the element is in the DOM before transitioning
+        const timer = requestAnimationFrame(() => {
+            setHasAnimatedIn(true);
+        });
+        return () => cancelAnimationFrame(timer);
+    }, [isVisible]);
     // Detect mobile viewport (< 768px)
     const isMobile = useIsMobile();
     // Lock body scroll when panel is open on mobile
     useLockBodyScroll(isMobile && isVisible);
-    // Sync motion value when committed width changes
+    // Sync drag width when committed width changes
     React.useEffect(() => {
-        widthMotionValue.set(committedWidth);
-    }, [committedWidth, widthMotionValue]);
+        setDragWidth(committedWidth);
+    }, [committedWidth]);
+    // Sync aside width to context (for main content padding)
+    React.useEffect(() => {
+        if (isVisible) {
+            setAsideWidth(isDragging ? dragWidth : committedWidth);
+        }
+    }, [isVisible, isDragging, dragWidth, committedWidth, setAsideWidth]);
     // Handle pointer down to start drag
     const handlePointerDown = React.useCallback((e) => {
         e.preventDefault();
@@ -168,8 +290,8 @@ const ChatLayoutAside = React.forwardRef(({ breakpoint = "md", onClose, classNam
             return;
         const deltaX = e.clientX - dragStartX.current;
         const newWidth = Math.max(ASIDE_WIDTH_MIN, Math.min(ASIDE_WIDTH_MAX, dragStartWidth.current - deltaX));
-        widthMotionValue.set(newWidth);
-    }, [isDragging, widthMotionValue]);
+        setDragWidth(newWidth);
+    }, [isDragging]);
     // Handle pointer up to end drag
     const handlePointerUp = React.useCallback((e) => {
         if (!isDragging)
@@ -177,45 +299,45 @@ const ChatLayoutAside = React.forwardRef(({ breakpoint = "md", onClose, classNam
         const deltaX = e.clientX - dragStartX.current;
         const newWidth = Math.max(ASIDE_WIDTH_MIN, Math.min(ASIDE_WIDTH_MAX, dragStartWidth.current - deltaX));
         setCommittedWidth(newWidth);
-        widthMotionValue.set(newWidth);
+        setDragWidth(newWidth);
         setIsDragging(false);
         setIsDraggingAside(false); // Notify context drag ended
         // Release pointer capture
         e.target.releasePointerCapture(e.pointerId);
-    }, [isDragging, widthMotionValue, setIsDraggingAside]);
-    return (_jsx(AnimatePresence, { initial: false, mode: "wait", children: isVisible && (_jsxs(_Fragment, { children: [isMobile && (_jsx(motion.aside, { variants: asideMobileVariants, initial: "initial", animate: "animate", exit: "exit", transition: asideMobileTransition, className: cn("fixed inset-0 z-50 bg-card", "flex flex-col", 
-                    // Only visible on mobile (< 768px)
-                    "block md:hidden", className), "data-aside": "aside", "data-mobile": "true", children: _jsxs(motion.div, { className: "flex flex-col h-full", variants: asideContentVariants, initial: "initial", animate: "animate", transition: asideContentTransition, children: [
-                            _jsx("div", { className: "flex justify-end px-4 pt-3 shrink-0", children: _jsx(IconButton, { onClick: () => {
-                                        onClose?.();
-                                        togglePanel();
-                                    }, "aria-label": "Close panel", children: _jsx(X, { className: "size-4" }) }) }), _jsx("div", { className: "flex-1 overflow-y-auto", children: children })
-                        ] }) }, "aside-mobile")), !isMobile && (_jsx(motion.aside, { ref: ref, initial: { width: 0, opacity: 0 }, animate: {
-                        width: committedWidth,
-                        opacity: 1,
-                    }, exit: { width: 0, opacity: 0 }, style: {
-                        // Use motion value during drag for instant updates
-                        width: isDragging ? widthMotionValue : undefined,
-                    }, transition: isDragging
-                        ? {
-                            // Instant updates during drag (no animation)
-                            duration: 0,
-                        }
-                        : {
-                            // Smooth animation for open/close
-                            duration: 0.5,
-                            ease: motionEasing.smooth,
-                        }, className: cn(
-                    // Hidden by default, visible at breakpoint
-                    "hidden h-full border-l border-border bg-card overflow-hidden relative", 
-                    // Breakpoint visibility
-                    breakpoint === "sm" && "sm:block", breakpoint === "md" && "md:block", breakpoint === "lg" && "lg:block", breakpoint === "xl" && "xl:block", breakpoint === "2xl" && "2xl:block", className), "data-aside": "aside", children: _jsxs(motion.div, { className: "flex flex-col h-full", variants: asideContentVariants, initial: "initial", animate: "animate", transition: asideContentTransition, children: [
-                            _jsx("div", { onPointerDown: handlePointerDown, onPointerMove: handlePointerMove, onPointerUp: handlePointerUp, className: cn("absolute left-0 inset-y-0 w-2 -ml-1 cursor-col-resize z-10", "group flex items-center justify-center", "hover:bg-primary/5 transition-colors delay-300", isDragging && "bg-primary/10") }), _jsx("div", { className: cn("h-full overflow-y-auto", isDragging ? "w-full" : undefined), style: !isDragging
-                                    ? {
-                                        width: `${committedWidth}px`,
-                                    }
-                                    : undefined, children: children })
-                        ] }) }, "aside-desktop"))] })) }));
+    }, [isDragging, setIsDraggingAside]);
+    // Determine which component to show based on visibility and device
+    const showMobile = isVisible && isMobile;
+    const showDesktop = isVisible && !isMobile;
+    return (_jsxs(AnimatePresence, { initial: false, children: [showMobile && (_jsx(motion.aside, { variants: asideMobileVariants, initial: "initial", animate: "animate", exit: "exit", transition: asideMobileTransition, className: cn("fixed inset-0 z-50 bg-card", "flex flex-col", 
+                // Only visible on mobile (< 768px)
+                "block md:hidden", className), "data-aside": "aside", "data-mobile": "true", children: _jsxs(motion.div, { className: "flex flex-col h-full", variants: asideContentVariants, initial: "initial", animate: "animate", transition: asideContentTransition, children: [
+                        _jsx("div", { className: "flex justify-end px-4 pt-3 shrink-0", children: _jsx(IconButton, { onClick: () => {
+                                    onClose?.();
+                                    togglePanel();
+                                }, "aria-label": "Close panel", children: _jsx(X, { className: "size-4" }) }) }), _jsx("div", { className: "flex-1 overflow-y-auto", children: children })
+                    ] }) }, "aside-mobile")), showDesktop && (_jsx("aside", { ref: ref, style: {
+                    // Animate from 0 on mount, then to committedWidth
+                    width: isDragging
+                        ? dragWidth
+                        : hasAnimatedIn
+                            ? committedWidth
+                            : 0,
+                    transition: isDragging
+                        ? "none"
+                        : "width 0.25s cubic-bezier(0.25, 0.1, 0.25, 1)",
+                }, className: cn(
+                // Fixed position on the right (like left sidebar)
+                "fixed inset-y-0 right-0 z-40", 
+                // Hidden by default, visible at breakpoint
+                "hidden h-full border-l border-border bg-card overflow-hidden", 
+                // Breakpoint visibility
+                breakpoint === "sm" && "sm:block", breakpoint === "md" && "md:block", breakpoint === "lg" && "lg:block", breakpoint === "xl" && "xl:block", breakpoint === "2xl" && "2xl:block", className), "data-aside": "aside", children: _jsxs("div", { className: "flex flex-col h-full", children: [
+                        _jsx("div", { onPointerDown: handlePointerDown, onPointerMove: handlePointerMove, onPointerUp: handlePointerUp, className: cn("absolute left-0 inset-y-0 w-2 -ml-1 cursor-col-resize z-10", "group flex items-center justify-center", "hover:bg-primary/5 transition-colors delay-300", isDragging && "bg-primary/10") }), _jsx("div", { className: cn("h-full overflow-y-auto", isDragging ? "w-full" : undefined), style: !isDragging
+                                ? {
+                                    width: `${committedWidth}px`,
+                                }
+                                : undefined, children: children })
+                    ] }) }, "aside-desktop"))] }));
 });
 ChatLayoutAside.displayName = "ChatLayout.Aside";
 /* -------------------------------------------------------------------------------------------------

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

@@ -18,6 +18,8 @@ export interface FilesTabContentProps extends React.HTMLAttributes<HTMLDivElemen
 export declare const FilesTabContent: React.ForwardRefExoticComponent<FilesTabContentProps & React.RefAttributes<HTMLDivElement>>;
 export interface SourcesTabContentProps extends React.HTMLAttributes<HTMLDivElement> {
     sources?: SourceItem[];
+    /** ID of the source to highlight (for scroll-to behavior) */
+    highlightedSourceId?: string;
 }
 export declare const SourcesTabContent: React.ForwardRefExoticComponent<SourcesTabContentProps & React.RefAttributes<HTMLDivElement>>;
 export interface DatabaseTabContentProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -30,6 +32,11 @@ export interface SettingsTabContentProps extends React.HTMLAttributes<HTMLDivEle
         description?: string;
         prettyName?: string;
         icon?: string;
+        children?: Array<{
+            name: string;
+            prettyName: string;
+            icon?: string;
+        }>;
     }>;
     mcps?: Array<{
         name: string;

package/dist/gui/components/ChatPanelTabContent.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Globe } from "lucide-react";
 import * as React from "react";
-import { mockSourceData } from "../data/mockSourceData.js";
 import { cn } from "../lib/utils.js";
 import { FileSystemView } from "./FileSystemView.js";
 import { SourceListItem } from "./SourceListItem.js";
@@ -31,10 +31,14 @@ export const FilesTabContent = React.forwardRef(({ files = [], provider, onFileS
             }, onDownload: handleDownload, onRename: handleRename, onDelete: handleDelete, className: "h-full" }) }));
 });
 FilesTabContent.displayName = "FilesTabContent";
-export const SourcesTabContent = React.forwardRef(({ sources, className, ...props }, ref) => {
-    // Use mock data if no sources provided or if empty array
-    const displaySources = sources && sources.length > 0 ? sources : mockSourceData;
-    return (_jsx("div", { ref: ref, className: cn("space-y-2", className), ...props, children: displaySources.map((source) => (_jsx(SourceListItem, { source: source }, source.id))) }));
+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 (_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))) }));
 });
 SourcesTabContent.displayName = "SourcesTabContent";
 export const DatabaseTabContent = React.forwardRef(({ data, className, ...props }, ref) => {
@@ -46,11 +50,17 @@ export const DatabaseTabContent = React.forwardRef(({ data, className, ...props
         ] }));
 });
 DatabaseTabContent.displayName = "DatabaseTabContent";
+const ToolItem = ({ tool }) => {
+    const hasChildren = tool.children && tool.children.length > 0;
+    return (_jsxs("div", { className: "p-3 border border-border rounded-lg bg-muted/30", children: [
+            _jsx("div", { className: "font-medium text-paragraph-sm", children: tool.prettyName || tool.name }), tool.description && !hasChildren && (_jsx("div", { className: "text-caption text-muted-foreground mt-1 line-clamp-1", children: tool.description })), hasChildren && (_jsxs("div", { className: "text-caption text-muted-foreground mt-1", children: ["Built-in tools:", " ", tool.children
+                        ?.map((child) => child.prettyName || child.name)
+                        .join(", ")] }))] }));
+};
 export const SettingsTabContent = React.forwardRef(({ tools = [], mcps = [], subagents = [], className, ...props }, ref) => {
     return (_jsxs("div", { ref: ref, className: cn("space-y-6", className), ...props, children: [
             _jsxs("div", { className: "space-y-3 p-2", children: [
-                    _jsx("h3", { className: "font-semibold text-subheading", children: "Tools" }), tools.length > 0 ? (_jsx("div", { className: "space-y-2", children: tools.map((tool) => (_jsxs("div", { className: "p-3 border border-border rounded-lg bg-muted/30", children: [
-                                _jsx("div", { className: "font-medium text-paragraph-sm", children: tool.prettyName || tool.name }), tool.description && (_jsx("div", { className: "text-caption text-muted-foreground mt-1 line-clamp-1", children: tool.description }))] }, tool.name))) })) : (_jsx("p", { className: "text-paragraph-sm text-muted-foreground", children: "No tools available" }))] }), _jsxs("div", { className: "space-y-3 p-2", children: [
+                    _jsx("h3", { className: "font-semibold text-subheading", children: "Tools" }), tools.length > 0 ? (_jsx("div", { className: "space-y-2", children: tools.map((tool) => (_jsx(ToolItem, { tool: tool }, tool.name))) })) : (_jsx("p", { className: "text-paragraph-sm text-muted-foreground", children: "No tools available" }))] }), _jsxs("div", { className: "space-y-3 p-2", children: [
                     _jsx("h3", { className: "font-semibold text-subheading", children: "MCP Servers" }), mcps.length > 0 ? (_jsx("div", { className: "space-y-2", children: mcps.map((mcp) => (_jsxs("div", { className: "p-3 border border-border rounded-lg bg-muted/30", children: [
                                 _jsx("div", { className: "font-medium text-paragraph-sm", children: mcp.name }), _jsxs("div", { className: "text-caption text-muted-foreground mt-1", children: ["Transport: ", mcp.transport] })
                             ] }, mcp.name))) })) : (_jsx("p", { className: "text-paragraph-sm text-muted-foreground", children: "No MCP servers connected" }))] }), _jsxs("div", { className: "space-y-3 p-2", children: [