@townco/ui 0.1.7 → 0.1.8

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

@@ -4,3 +4,4 @@
 export * from "./use-chat-input.js";
 export * from "./use-chat-messages.js";
 export * from "./use-chat-session.js";
+export * from "./use-media-query.js";

package/dist/core/hooks/index.js

@@ -4,3 +4,4 @@
 export * from "./use-chat-input.js";
 export * from "./use-chat-messages.js";
 export * from "./use-chat-session.js";
+export * from "./use-media-query.js";

package/dist/core/hooks/use-media-query.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Custom hook for responsive breakpoints with SSR-safe implementation
+ *
+ * @param query - Media query string (e.g., "(min-width: 768px)")
+ * @returns boolean indicating if the media query matches
+ *
+ * @example
+ * ```tsx
+ * const isMobile = useMediaQuery("(max-width: 640px)");
+ * const isDesktop = useMediaQuery("(min-width: 1024px)");
+ *
+ * return (
+ *   <div>
+ *     {isMobile && <MobileMenu />}
+ *     {isDesktop && <DesktopSidebar />}
+ *   </div>
+ * );
+ * ```
+ */
+export declare function useMediaQuery(query: string): boolean;
+/**
+ * Common breakpoint presets for convenience
+ */
+export declare const breakpoints: {
+    readonly sm: "(min-width: 640px)";
+    readonly md: "(min-width: 768px)";
+    readonly lg: "(min-width: 1024px)";
+    readonly xl: "(min-width: 1280px)";
+    readonly "2xl": "(min-width: 1536px)";
+};
+/**
+ * Convenience hooks for common breakpoints
+ */
+export declare function useIsSmallScreen(): boolean;
+export declare function useIsMediumScreen(): boolean;
+export declare function useIsLargeScreen(): boolean;
+export declare function useIsDesktop(): boolean;
+export declare function useIsMobile(): boolean;
+export declare function useIsTablet(): boolean;

package/dist/core/hooks/use-media-query.js

@@ -0,0 +1,84 @@
+import { useEffect, useState } from "react";
+/**
+ * Custom hook for responsive breakpoints with SSR-safe implementation
+ *
+ * @param query - Media query string (e.g., "(min-width: 768px)")
+ * @returns boolean indicating if the media query matches
+ *
+ * @example
+ * ```tsx
+ * const isMobile = useMediaQuery("(max-width: 640px)");
+ * const isDesktop = useMediaQuery("(min-width: 1024px)");
+ *
+ * return (
+ *   <div>
+ *     {isMobile && <MobileMenu />}
+ *     {isDesktop && <DesktopSidebar />}
+ *   </div>
+ * );
+ * ```
+ */
+export function useMediaQuery(query) {
+    const [matches, setMatches] = useState(() => {
+        // SSR-safe: return false on server, check on client
+        if (typeof window === "undefined") {
+            return false;
+        }
+        return window.matchMedia(query).matches;
+    });
+    useEffect(() => {
+        // SSR guard
+        if (typeof window === "undefined") {
+            return;
+        }
+        const mediaQueryList = window.matchMedia(query);
+        // Update state if query evaluation changes
+        const handleChange = (event) => {
+            setMatches(event.matches);
+        };
+        // Set initial value
+        setMatches(mediaQueryList.matches);
+        // Listen for changes
+        mediaQueryList.addEventListener("change", handleChange);
+        // Cleanup
+        return () => {
+            mediaQueryList.removeEventListener("change", handleChange);
+        };
+    }, [query]);
+    return matches;
+}
+/**
+ * Common breakpoint presets for convenience
+ */
+export const breakpoints = {
+    sm: "(min-width: 640px)",
+    md: "(min-width: 768px)",
+    lg: "(min-width: 1024px)",
+    xl: "(min-width: 1280px)",
+    "2xl": "(min-width: 1536px)",
+};
+/**
+ * Convenience hooks for common breakpoints
+ */
+export function useIsSmallScreen() {
+    const isSm = useMediaQuery(breakpoints.sm);
+    return !isSm;
+}
+export function useIsMediumScreen() {
+    return useMediaQuery(breakpoints.md);
+}
+export function useIsLargeScreen() {
+    return useMediaQuery(breakpoints.lg);
+}
+export function useIsDesktop() {
+    return useMediaQuery(breakpoints.lg);
+}
+export function useIsMobile() {
+    const isMd = useMediaQuery(breakpoints.md);
+    return !isMd;
+}
+export function useIsTablet() {
+    const isMd = useMediaQuery(breakpoints.md);
+    const isLg = useMediaQuery(breakpoints.lg);
+    return isMd && !isLg;
+}

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

@@ -0,0 +1,38 @@
+import * as React from "react";
+interface ChatHeaderContextValue {
+    isExpanded: boolean;
+    setIsExpanded: (expanded: boolean) => void;
+}
+declare const useChatHeaderContext: () => ChatHeaderContextValue;
+export interface ChatHeaderRootProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Initial expanded state */
+    defaultExpanded?: boolean;
+    /** Controlled expanded state */
+    expanded?: boolean;
+    /** Callback when expanded state changes */
+    onExpandedChange?: (expanded: boolean) => void;
+}
+declare const ChatHeaderRoot: React.ForwardRefExoticComponent<ChatHeaderRootProps & React.RefAttributes<HTMLDivElement>>;
+export interface ChatHeaderTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
+}
+declare const ChatHeaderTitle: React.ForwardRefExoticComponent<ChatHeaderTitleProps & React.RefAttributes<HTMLHeadingElement>>;
+export interface ChatHeaderActionsProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+declare const ChatHeaderActions: React.ForwardRefExoticComponent<ChatHeaderActionsProps & React.RefAttributes<HTMLDivElement>>;
+export type ConnectionStatus = "connected" | "connecting" | "error" | "disconnected";
+export interface ChatHeaderStatusIndicatorProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Connection status */
+    status: ConnectionStatus;
+    /** Optional status text override */
+    statusText?: string;
+}
+declare const ChatHeaderStatusIndicator: React.ForwardRefExoticComponent<ChatHeaderStatusIndicatorProps & React.RefAttributes<HTMLDivElement>>;
+export interface ChatHeaderToggleProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Icon to display (should rotate based on expanded state) */
+    icon?: React.ReactNode;
+}
+declare const ChatHeaderToggle: React.ForwardRefExoticComponent<ChatHeaderToggleProps & React.RefAttributes<HTMLButtonElement>>;
+export interface ChatHeaderExpandablePanelProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+declare const ChatHeaderExpandablePanel: React.ForwardRefExoticComponent<ChatHeaderExpandablePanelProps & React.RefAttributes<HTMLDivElement>>;
+export { ChatHeaderRoot as Root, ChatHeaderTitle as Title, ChatHeaderActions as Actions, ChatHeaderStatusIndicator as StatusIndicator, ChatHeaderToggle as Toggle, ChatHeaderExpandablePanel as ExpandablePanel, useChatHeaderContext, };

package/dist/gui/components/ChatHeader.js

@@ -0,0 +1,86 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/utils.js";
+const ChatHeaderContext = React.createContext(undefined);
+const useChatHeaderContext = () => {
+    const context = React.useContext(ChatHeaderContext);
+    if (!context) {
+        throw new Error("ChatHeader components must be used within ChatHeader.Root");
+    }
+    return context;
+};
+const ChatHeaderRoot = React.forwardRef(({ defaultExpanded = false, expanded: expandedProp, onExpandedChange, className, children, ...props }, ref) => {
+    const [isExpandedInternal, setIsExpandedInternal] = React.useState(defaultExpanded);
+    const isExpanded = expandedProp ?? isExpandedInternal;
+    const setIsExpanded = React.useCallback((expanded) => {
+        setIsExpandedInternal(expanded);
+        onExpandedChange?.(expanded);
+    }, [onExpandedChange]);
+    // Separate children into main content and expandable panel
+    const childrenArray = React.Children.toArray(children);
+    const expandablePanel = childrenArray.find((child) => React.isValidElement(child) &&
+        typeof child.type === "function" &&
+        child.type.displayName ===
+            "ChatHeader.ExpandablePanel");
+    const mainContent = childrenArray.filter((child) => child !== expandablePanel);
+    return (_jsxs(ChatHeaderContext.Provider, { value: { isExpanded, setIsExpanded }, children: [_jsx("div", { ref: ref, className: cn("flex items-center justify-between px-6 py-4", className), ...props, children: mainContent }), expandablePanel] }));
+});
+ChatHeaderRoot.displayName = "ChatHeader.Root";
+const ChatHeaderTitle = React.forwardRef(({ className, children, ...props }, ref) => {
+    return (_jsx("h1", { ref: ref, className: cn("m-0 text-xl font-semibold", className), ...props, children: children }));
+});
+ChatHeaderTitle.displayName = "ChatHeader.Title";
+const ChatHeaderActions = React.forwardRef(({ className, children, ...props }, ref) => {
+    return (_jsx("div", { ref: ref, className: cn("flex items-center gap-3", className), ...props, children: children }));
+});
+ChatHeaderActions.displayName = "ChatHeader.Actions";
+const getStatusColor = (status) => {
+    switch (status) {
+        case "connected":
+            return "bg-green-500";
+        case "connecting":
+            return "bg-yellow-500";
+        case "error":
+            return "bg-red-500";
+        default:
+            return "bg-gray-500";
+    }
+};
+const getDefaultStatusText = (status) => {
+    switch (status) {
+        case "connected":
+            return "Connected";
+        case "connecting":
+            return "Connecting...";
+        case "error":
+            return "Connection Error";
+        default:
+            return "No Server";
+    }
+};
+const ChatHeaderStatusIndicator = React.forwardRef(({ status, statusText, className, ...props }, ref) => {
+    const text = statusText ?? getDefaultStatusText(status);
+    const colorClass = getStatusColor(status);
+    return (_jsxs("div", { ref: ref, className: cn("flex items-center gap-2", className), ...props, children: [_jsx("div", { className: cn("h-2 w-2 rounded-full", colorClass) }), _jsx("span", { className: "text-sm text-muted-foreground", children: text })] }));
+});
+ChatHeaderStatusIndicator.displayName = "ChatHeader.StatusIndicator";
+const ChatHeaderToggle = React.forwardRef(({ icon, className, children, onClick, ...props }, ref) => {
+    const { isExpanded, setIsExpanded } = useChatHeaderContext();
+    const handleClick = (e) => {
+        setIsExpanded(!isExpanded);
+        onClick?.(e);
+    };
+    return (_jsxs("button", { ref: ref, type: "button", onClick: handleClick, className: cn("rounded p-1 transition-colors hover:bg-background lg:hidden", className), "aria-label": isExpanded ? "Collapse header" : "Expand header", ...props, children: [icon && (_jsx("div", { className: cn("transition-transform duration-200", isExpanded && "rotate-180"), children: icon })), children] }));
+});
+ChatHeaderToggle.displayName = "ChatHeader.Toggle";
+const ChatHeaderExpandablePanel = React.forwardRef(({ className, children, ...props }, ref) => {
+    const { isExpanded } = useChatHeaderContext();
+    if (!isExpanded)
+        return null;
+    return (_jsx("div", { ref: ref, className: cn("absolute top-full left-0 right-0 z-50 border-b border-border bg-card px-6 py-4 shadow-lg lg:hidden", className), ...props, children: children }));
+});
+ChatHeaderExpandablePanel.displayName = "ChatHeader.ExpandablePanel";
+/* -------------------------------------------------------------------------------------------------
+ * Exports
+ * -----------------------------------------------------------------------------------------------*/
+export { ChatHeaderRoot as Root, ChatHeaderTitle as Title, ChatHeaderActions as Actions, ChatHeaderStatusIndicator as StatusIndicator, ChatHeaderToggle as Toggle, ChatHeaderExpandablePanel as ExpandablePanel, useChatHeaderContext, };

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

@@ -1,5 +1,6 @@
 import * as React from "react";
 import type { AcpClient } from "../../sdk/client/index.js";
+import { type CommandMenuItem } from "./ChatInputCommandMenu.js";
 import type { Textarea } from "./Textarea.js";
 export interface ChatInputRootProps extends Omit<React.FormHTMLAttributes<HTMLFormElement>, "onChange" | "onSubmit"> {
     /**
@@ -39,4 +40,21 @@ declare const ChatInputSubmit: React.ForwardRefExoticComponent<ChatInputSubmitPr
 export interface ChatInputToolbarProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 declare const ChatInputToolbar: React.ForwardRefExoticComponent<ChatInputToolbarProps & React.RefAttributes<HTMLDivElement>>;
-export { ChatInputRoot as Root, ChatInputField as Field, ChatInputSubmit as Submit, ChatInputToolbar as Toolbar, };
+export interface ChatInputActionsProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    asChild?: boolean;
+}
+declare const ChatInputActions: React.ForwardRefExoticComponent<ChatInputActionsProps & React.RefAttributes<HTMLButtonElement>>;
+export interface ChatInputAttachmentProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    asChild?: boolean;
+}
+declare const ChatInputAttachment: React.ForwardRefExoticComponent<ChatInputAttachmentProps & React.RefAttributes<HTMLButtonElement>>;
+export interface ChatInputVoiceInputProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    asChild?: boolean;
+}
+declare const ChatInputVoiceInput: React.ForwardRefExoticComponent<ChatInputVoiceInputProps & React.RefAttributes<HTMLButtonElement>>;
+export interface ChatInputCommandMenuProps extends React.HTMLAttributes<HTMLDivElement> {
+    commands?: CommandMenuItem[];
+}
+declare const ChatInputCommandMenu: React.ForwardRefExoticComponent<ChatInputCommandMenuProps & React.RefAttributes<HTMLDivElement>>;
+export type { CommandMenuItem };
+export { ChatInputRoot as Root, ChatInputField as Field, ChatInputSubmit as Submit, ChatInputToolbar as Toolbar, ChatInputActions as Actions, ChatInputAttachment as Attachment, ChatInputVoiceInput as VoiceInput, ChatInputCommandMenu as CommandMenu, };

package/dist/gui/components/ChatInput.js

@@ -1,10 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Slot } from "@radix-ui/react-slot";
+import { Mic, Paperclip, SquareSlash } from "lucide-react";
 import * as React from "react";
 import { useChatInput as useCoreChatInput } from "../../core/hooks/use-chat-input.js";
 import { useChatStore } from "../../core/store/chat-store.js";
 import { cn } from "../lib/utils.js";
 import { Button } from "./Button.js";
+import { ChatInputCommandMenu as ChatInputCommandMenuComponent, } from "./ChatInputCommandMenu.js";
 const ChatInputContext = React.createContext(undefined);
 const useChatInputContext = () => {
     const context = React.useContext(ChatInputContext);
@@ -27,6 +29,15 @@ const ChatInputRoot = React.forwardRef(({ client, value: valueProp, onChange: on
     const isSubmitting = hookData
         ? hookData.isSubmitting || storeIsStreaming
         : isSubmittingProp || false;
+    // Command menu state
+    const [showCommandMenu, setShowCommandMenu] = React.useState(false);
+    const [commandMenuQuery, setCommandMenuQuery] = React.useState("");
+    const [selectedMenuIndex, setSelectedMenuIndex] = React.useState(0);
+    const [menuItemCount, setMenuItemCount] = React.useState(0);
+    const [triggerCounter, setTriggerCounter] = React.useState(0);
+    const triggerMenuSelect = React.useCallback(() => {
+        setTriggerCounter((prev) => prev + 1);
+    }, []);
     const handleSubmit = async (e) => {
         e.preventDefault();
         if (value.trim() && !isSubmitting && !disabled) {
@@ -58,11 +69,21 @@ const ChatInputRoot = React.forwardRef(({ client, value: valueProp, onChange: on
             disabled,
             isSubmitting,
             submitOnEnter,
-        }, children: _jsx("form", { ref: ref, onSubmit: handleSubmit, className: cn("w-full divide-y overflow-hidden rounded-xl border bg-background shadow-sm", className), ...props, children: children }) }));
+            showCommandMenu,
+            setShowCommandMenu,
+            commandMenuQuery,
+            setCommandMenuQuery,
+            selectedMenuIndex,
+            setSelectedMenuIndex,
+            menuItemCount,
+            setMenuItemCount,
+            triggerMenuSelect,
+            triggerCounter,
+        }, children: _jsx("form", { ref: ref, onSubmit: handleSubmit, className: cn("relative w-full divide-y rounded-xl border bg-background shadow-md", className), ...props, children: children }) }));
 });
 ChatInputRoot.displayName = "ChatInput.Root";
 const ChatInputField = React.forwardRef(({ asChild = false, className, onKeyDown, children, ...props }, ref) => {
-    const { value, onChange, onSubmit, disabled, isSubmitting, submitOnEnter } = useChatInputContext();
+    const { value, onChange, onSubmit, disabled, isSubmitting, submitOnEnter, showCommandMenu, setShowCommandMenu, setCommandMenuQuery, setSelectedMenuIndex, menuItemCount, triggerMenuSelect, } = useChatInputContext();
     const textareaRef = React.useRef(null);
     const handleRef = React.useCallback((node) => {
         textareaRef.current = node;
@@ -74,6 +95,30 @@ const ChatInputField = React.forwardRef(({ asChild = false, className, onKeyDown
         }
     }, [ref]);
     const handleKeyDown = (e) => {
+        // Handle arrow keys and Enter when command menu is open
+        if (showCommandMenu && menuItemCount > 0) {
+            if (e.key === "ArrowDown") {
+                e.preventDefault();
+                setSelectedMenuIndex((prev) => (prev + 1) % menuItemCount);
+                return;
+            }
+            else if (e.key === "ArrowUp") {
+                e.preventDefault();
+                setSelectedMenuIndex((prev) => (prev - 1 + menuItemCount) % menuItemCount);
+                return;
+            }
+            else if (e.key === "Enter" && !e.shiftKey) {
+                e.preventDefault();
+                triggerMenuSelect();
+                return;
+            }
+            else if (e.key === "Escape") {
+                e.preventDefault();
+                setShowCommandMenu(false);
+                setCommandMenuQuery("");
+                return;
+            }
+        }
         // Handle Enter without Shift - only submit if not already submitting
         if (submitOnEnter && e.key === "Enter" && !e.shiftKey) {
             // Only prevent default and submit if conditions are met
@@ -89,7 +134,19 @@ const ChatInputField = React.forwardRef(({ asChild = false, className, onKeyDown
         onKeyDown?.(e);
     };
     const handleChange = (e) => {
-        onChange(e.target.value);
+        const newValue = e.target.value;
+        onChange(newValue);
+        // Check if user typed "/" at the start to trigger command menu
+        if (newValue.startsWith("/") && !newValue.includes("\n")) {
+            setShowCommandMenu(true);
+            // Extract search query (everything after "/")
+            const query = newValue.slice(1);
+            setCommandMenuQuery(query);
+        }
+        else {
+            setShowCommandMenu(false);
+            setCommandMenuQuery("");
+        }
         // Auto-resize
         const textarea = textareaRef.current;
         if (!textarea)
@@ -116,22 +173,48 @@ const ChatInputField = React.forwardRef(({ asChild = false, className, onKeyDown
     if (asChild && React.isValidElement(children)) {
         return React.cloneElement(children, fieldProps);
     }
-    return (_jsx("textarea", { ...fieldProps, className: cn("w-full resize-none rounded-none border-none p-3 shadow-none", "outline-none ring-0 field-sizing-content max-h-[6lh]", "bg-transparent dark:bg-transparent focus-visible:ring-0", "text-sm placeholder:text-muted-foreground", "disabled:cursor-not-allowed disabled:opacity-50", className) }));
+    return (_jsx("textarea", { ...fieldProps, className: cn("w-full resize-none rounded-none border-none p-4 shadow-none", "outline-none ring-0 field-sizing-content max-h-[6lh]", "bg-transparent dark:bg-transparent focus-visible:ring-0", "text-sm placeholder:text-muted-foreground", "disabled:cursor-not-allowed disabled:opacity-50", className) }));
 });
 ChatInputField.displayName = "ChatInput.Field";
 const ChatInputSubmit = React.forwardRef(({ asChild = false, className, disabled: disabledProp, children, ...props }, ref) => {
     const { value, disabled, isSubmitting } = useChatInputContext();
     const isDisabled = disabledProp || disabled || isSubmitting || !value.trim();
     const Comp = asChild ? Slot : Button;
-    return (_jsx(Comp, { ref: ref, type: "submit", disabled: isDisabled, size: "icon", className: cn(!asChild &&
-            "gap-1.5 rounded-lg bg-transparent text-foreground hover:bg-transparent", className), ...props, children: children }));
+    return (_jsx(Comp, { ref: ref, type: "submit", disabled: isDisabled, variant: !asChild ? "default" : undefined, size: "icon", className: cn(!asChild && "gap-1.5 rounded-full", className), ...props, children: children }));
 });
 ChatInputSubmit.displayName = "ChatInput.Submit";
 const ChatInputToolbar = React.forwardRef(({ className, children, ...props }, ref) => {
-    return (_jsx("div", { ref: ref, className: cn("flex items-center justify-between p-1", className), ...props, children: children }));
+    return (_jsx("div", { ref: ref, className: cn("flex items-center justify-between p-2", className), ...props, children: children }));
 });
 ChatInputToolbar.displayName = "ChatInput.Toolbar";
-/* -------------------------------------------------------------------------------------------------
- * Exports
- * -----------------------------------------------------------------------------------------------*/
-export { ChatInputRoot as Root, ChatInputField as Field, ChatInputSubmit as Submit, ChatInputToolbar as Toolbar, };
+const ChatInputActions = React.forwardRef(({ asChild = false, className, children, onClick, ...props }, ref) => {
+    const { value, onChange, setShowCommandMenu, setCommandMenuQuery } = useChatInputContext();
+    const handleClick = (e) => {
+        // Trigger command menu by setting "/" in the input
+        if (!value.startsWith("/")) {
+            onChange("/");
+            setShowCommandMenu(true);
+            setCommandMenuQuery("");
+        }
+        onClick?.(e);
+    };
+    const Comp = asChild ? Slot : Button;
+    return (_jsx(Comp, { ref: ref, type: "button", variant: "ghost", size: "icon", className: cn("rounded-full", className), onClick: handleClick, ...props, children: children || _jsx(SquareSlash, { className: "size-4" }) }));
+});
+ChatInputActions.displayName = "ChatInput.Actions";
+const ChatInputAttachment = React.forwardRef(({ asChild = false, className, children, ...props }, ref) => {
+    const Comp = asChild ? Slot : Button;
+    return (_jsx(Comp, { ref: ref, type: "button", variant: "ghost", size: "icon", className: cn("rounded-full", className), ...props, children: children || _jsx(Paperclip, { className: "size-4" }) }));
+});
+ChatInputAttachment.displayName = "ChatInput.Attachment";
+const ChatInputVoiceInput = React.forwardRef(({ asChild = false, className, children, ...props }, ref) => {
+    const Comp = asChild ? Slot : Button;
+    return (_jsx(Comp, { ref: ref, type: "button", variant: "ghost", size: "icon", className: cn("rounded-full", className), ...props, children: children || _jsx(Mic, { className: "size-4" }) }));
+});
+ChatInputVoiceInput.displayName = "ChatInput.VoiceInput";
+const ChatInputCommandMenu = React.forwardRef(({ commands = [], className, onChange: _, ...props }, ref) => {
+    const { showCommandMenu, commandMenuQuery, selectedMenuIndex, setSelectedMenuIndex, setMenuItemCount, triggerCounter, onChange, } = useChatInputContext();
+    return (_jsx(ChatInputCommandMenuComponent, { ref: ref, commands: commands, showCommandMenu: showCommandMenu, commandMenuQuery: commandMenuQuery, selectedMenuIndex: selectedMenuIndex, setSelectedMenuIndex: setSelectedMenuIndex, setMenuItemCount: setMenuItemCount, triggerCounter: triggerCounter, onChange: onChange, className: className, ...props }));
+});
+ChatInputCommandMenu.displayName = "ChatInput.CommandMenu";
+export { ChatInputRoot as Root, ChatInputField as Field, ChatInputSubmit as Submit, ChatInputToolbar as Toolbar, ChatInputActions as Actions, ChatInputAttachment as Attachment, ChatInputVoiceInput as VoiceInput, ChatInputCommandMenu as CommandMenu, };

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

@@ -0,0 +1,20 @@
+import * as React from "react";
+export interface CommandMenuItem {
+    id: string;
+    label: string;
+    description?: string;
+    icon?: React.ReactNode;
+    category?: string;
+    onSelect: () => void;
+}
+export interface ChatInputCommandMenuProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
+    commands?: CommandMenuItem[];
+    showCommandMenu: boolean;
+    commandMenuQuery: string;
+    selectedMenuIndex: number;
+    setSelectedMenuIndex: (index: number) => void;
+    setMenuItemCount: (count: number) => void;
+    triggerCounter: number;
+    onChange: (value: string) => void;
+}
+export declare const ChatInputCommandMenu: React.ForwardRefExoticComponent<ChatInputCommandMenuProps & React.RefAttributes<HTMLDivElement>>;

package/dist/gui/components/ChatInputCommandMenu.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/utils.js";
+/* -------------------------------------------------------------------------------------------------
+ * ChatInputCommandMenu
+ * -----------------------------------------------------------------------------------------------*/
+export const ChatInputCommandMenu = React.forwardRef(({ commands = [], showCommandMenu, commandMenuQuery, selectedMenuIndex, setSelectedMenuIndex, setMenuItemCount, triggerCounter, onChange, className, ...props }, ref) => {
+    // Fuzzy search implementation
+    const fuzzyMatch = React.useCallback((text, query) => {
+        const lowerText = text.toLowerCase();
+        const lowerQuery = query.toLowerCase();
+        if (!query)
+            return 1; // Show all when no query
+        if (lowerText.includes(lowerQuery)) {
+            // Exact substring match gets high score
+            return 1 - lowerQuery.length / lowerText.length;
+        }
+        // Fuzzy matching - check if all query chars appear in order
+        let queryIndex = 0;
+        for (let i = 0; i < lowerText.length && queryIndex < lowerQuery.length; i++) {
+            if (lowerText[i] === lowerQuery[queryIndex]) {
+                queryIndex++;
+            }
+        }
+        if (queryIndex === lowerQuery.length) {
+            // All chars found, score based on how spread out they are
+            return 0.5 - queryIndex / lowerText.length;
+        }
+        return 0; // No match
+    }, []);
+    // Filter and sort commands by relevance
+    const filteredCommands = React.useMemo(() => {
+        return commands
+            .map((cmd) => ({
+            ...cmd,
+            score: Math.max(fuzzyMatch(cmd.label, commandMenuQuery), cmd.description ? fuzzyMatch(cmd.description, commandMenuQuery) : 0),
+        }))
+            .filter((cmd) => cmd.score > 0)
+            .sort((a, b) => b.score - a.score);
+    }, [commands, commandMenuQuery, fuzzyMatch]);
+    // Update menu item count
+    React.useEffect(() => {
+        setMenuItemCount(filteredCommands.length);
+    }, [filteredCommands.length, setMenuItemCount]);
+    // Reset selected index when filtered results change
+    React.useEffect(() => {
+        setSelectedMenuIndex(0);
+    }, [setSelectedMenuIndex]);
+    // Handle selection when triggered
+    React.useEffect(() => {
+        if (triggerCounter > 0 && filteredCommands[selectedMenuIndex]) {
+            filteredCommands[selectedMenuIndex].onSelect();
+            // Clear the input after selection
+            onChange("");
+        }
+    }, [triggerCounter, filteredCommands, selectedMenuIndex, onChange]);
+    if (!showCommandMenu || filteredCommands.length === 0) {
+        return null;
+    }
+    return (_jsxs("div", { ref: ref, className: cn("absolute bottom-full left-0 z-50 mb-2 w-full max-w-md", "rounded-md border border-border bg-card p-2 shadow-lg", className), ...props, children: [_jsx("div", { className: "text-xs font-semibold text-muted-foreground px-2 py-1", children: "Commands" }), _jsx("div", { className: "max-h-64 overflow-y-auto", children: filteredCommands.map((command, index) => (_jsxs("button", { type: "button", onClick: () => command.onSelect(), className: cn("w-full rounded-sm px-2 py-2 text-left text-sm transition-colors", "flex items-start gap-2", "hover:bg-muted", index === selectedMenuIndex && "bg-muted"), children: [command.icon && (_jsx("span", { className: "shrink-0 mt-0.5", children: command.icon })), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("div", { className: "font-medium", children: command.label }), command.description && (_jsx("div", { className: "text-xs text-muted-foreground truncate", children: command.description }))] })] }, command.id))) })] }));
+});
+ChatInputCommandMenu.displayName = "ChatInputCommandMenu";

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

@@ -0,0 +1,52 @@
+import * as React from "react";
+type PanelSize = "hidden" | "small" | "large";
+type PanelTabType = "todo" | "files" | "database";
+interface ChatLayoutContextValue {
+    sidebarOpen: boolean;
+    setSidebarOpen: (open: boolean) => void;
+    panelSize: PanelSize;
+    setPanelSize: (size: PanelSize) => void;
+    activeTab: PanelTabType;
+    setActiveTab: (tab: PanelTabType) => void;
+}
+declare const useChatLayoutContext: () => ChatLayoutContextValue;
+export interface ChatLayoutRootProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Initial sidebar open state */
+    defaultSidebarOpen?: boolean;
+    /** Initial panel size state */
+    defaultPanelSize?: PanelSize;
+    /** Initial active tab */
+    defaultActiveTab?: PanelTabType;
+}
+declare const ChatLayoutRoot: React.ForwardRefExoticComponent<ChatLayoutRootProps & React.RefAttributes<HTMLDivElement>>;
+export interface ChatLayoutHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+declare const ChatLayoutHeader: React.ForwardRefExoticComponent<ChatLayoutHeaderProps & React.RefAttributes<HTMLDivElement>>;
+export interface ChatLayoutMainProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+declare const ChatLayoutMain: React.ForwardRefExoticComponent<ChatLayoutMainProps & React.RefAttributes<HTMLDivElement>>;
+export interface ChatLayoutBodyProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Whether to show toaster */
+    showToaster?: boolean;
+}
+declare const ChatLayoutBody: React.ForwardRefExoticComponent<ChatLayoutBodyProps & React.RefAttributes<HTMLDivElement>>;
+export interface ChatLayoutMessagesProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Callback when scroll position changes */
+    onScrollChange?: (isAtBottom: boolean) => void;
+    /** Whether to show scroll to bottom button */
+    showScrollToBottom?: boolean;
+}
+declare const ChatLayoutMessages: React.ForwardRefExoticComponent<ChatLayoutMessagesProps & React.RefAttributes<HTMLDivElement>>;
+export interface ChatLayoutFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+declare const ChatLayoutFooter: React.ForwardRefExoticComponent<ChatLayoutFooterProps & React.RefAttributes<HTMLDivElement>>;
+export interface ChatLayoutSidebarProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+declare const ChatLayoutSidebar: React.ForwardRefExoticComponent<ChatLayoutSidebarProps & React.RefAttributes<HTMLDivElement>>;
+export interface ChatLayoutAsideProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Show panel on these breakpoints (default: lg and above) */
+    breakpoint?: "md" | "lg" | "xl" | "2xl";
+}
+declare const ChatLayoutAside: React.ForwardRefExoticComponent<ChatLayoutAsideProps & React.RefAttributes<HTMLDivElement>>;
+export { ChatLayoutRoot as Root, ChatLayoutHeader as Header, ChatLayoutMain as Main, ChatLayoutBody as Body, ChatLayoutMessages as Messages, ChatLayoutFooter as Footer, ChatLayoutSidebar as Sidebar, ChatLayoutAside as Aside, useChatLayoutContext, };
+export type { PanelSize, PanelTabType };

package/dist/gui/components/ChatLayout.js

@@ -0,0 +1,105 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowDown } from "lucide-react";
+import * as React from "react";
+import { cn } from "../lib/utils.js";
+import { Toaster } from "./Sonner.js";
+const ChatLayoutContext = React.createContext(undefined);
+const useChatLayoutContext = () => {
+    const context = React.useContext(ChatLayoutContext);
+    if (!context) {
+        throw new Error("ChatLayout components must be used within ChatLayout.Root");
+    }
+    return context;
+};
+const ChatLayoutRoot = React.forwardRef(({ defaultSidebarOpen = false, defaultPanelSize = "hidden", defaultActiveTab = "todo", className, children, ...props }, ref) => {
+    const [sidebarOpen, setSidebarOpen] = React.useState(defaultSidebarOpen);
+    const [panelSize, setPanelSize] = React.useState(defaultPanelSize);
+    const [activeTab, setActiveTab] = React.useState(defaultActiveTab);
+    return (_jsx(ChatLayoutContext.Provider, { value: {
+            sidebarOpen,
+            setSidebarOpen,
+            panelSize,
+            setPanelSize,
+            activeTab,
+            setActiveTab,
+        }, children: _jsx("div", { ref: ref, className: cn("flex h-screen flex-row bg-background text-foreground", 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("div", { ref: ref, className: cn("flex flex-1 flex-col overflow-hidden", className), ...props, 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 [showScrollButton, setShowScrollButton] = React.useState(false);
+    const scrollContainerRef = React.useRef(null);
+    // Merge refs
+    React.useImperativeHandle(ref, () => scrollContainerRef.current);
+    // Check if user is at bottom of scroll
+    const checkScrollPosition = React.useCallback(() => {
+        const container = scrollContainerRef.current;
+        if (!container)
+            return;
+        const { scrollTop, scrollHeight, clientHeight } = container;
+        const distanceFromBottom = scrollHeight - scrollTop - clientHeight;
+        const isAtBottom = distanceFromBottom < 100; // 100px threshold
+        setShowScrollButton(!isAtBottom && showScrollToBottom);
+        onScrollChange?.(isAtBottom);
+    }, [onScrollChange, showScrollToBottom]);
+    // Handle scroll events
+    const handleScroll = React.useCallback(() => {
+        checkScrollPosition();
+    }, [checkScrollPosition]);
+    // Scroll to bottom function
+    const scrollToBottom = React.useCallback(() => {
+        const container = scrollContainerRef.current;
+        if (!container)
+            return;
+        container.scrollTo({
+            top: container.scrollHeight,
+            behavior: "smooth",
+        });
+    }, []);
+    // Check scroll position on mount and when children change
+    React.useEffect(() => {
+        checkScrollPosition();
+    }, [checkScrollPosition]);
+    return (_jsxs("div", { className: "relative flex-1 overflow-hidden", children: [_jsx("div", { ref: scrollContainerRef, className: cn("h-full overflow-y-auto", className), onScroll: handleScroll, ...props, children: children }), showScrollButton && (_jsx("button", { type: "button", onClick: scrollToBottom, 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: "h-4 w-4" }) }))] }));
+});
+ChatLayoutMessages.displayName = "ChatLayout.Messages";
+const ChatLayoutFooter = React.forwardRef(({ className, children, ...props }, ref) => {
+    return (_jsx("div", { ref: ref, className: cn("bg-linear-to-t from-background to-transparent px-4 pb-4", className), ...props, children: children }));
+});
+ChatLayoutFooter.displayName = "ChatLayout.Footer";
+const ChatLayoutSidebar = React.forwardRef(({ className, children, ...props }, ref) => {
+    const { sidebarOpen } = useChatLayoutContext();
+    if (!sidebarOpen)
+        return null;
+    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 { panelSize } = useChatLayoutContext();
+    // Hidden state - don't render
+    if (panelSize === "hidden")
+        return null;
+    return (_jsx("div", { ref: ref, className: cn(
+        // Hidden by default, visible at breakpoint
+        "hidden 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
+        panelSize === "small" && "w-80", panelSize === "large" && "w-lg", className), ...props, children: children }));
+});
+ChatLayoutAside.displayName = "ChatLayout.Aside";
+/* -------------------------------------------------------------------------------------------------
+ * Exports
+ * -----------------------------------------------------------------------------------------------*/
+export { ChatLayoutRoot as Root, ChatLayoutHeader as Header, ChatLayoutMain as Main, ChatLayoutBody as Body, ChatLayoutMessages as Messages, ChatLayoutFooter as Footer, ChatLayoutSidebar as Sidebar, ChatLayoutAside as Aside, useChatLayoutContext, };

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

@@ -0,0 +1,18 @@
+import * as React from "react";
+import type { TodoItem } from "./TodoListItem.js";
+/**
+ * Shared tab content components for both mobile (ChatHeader) and desktop (Panel) views
+ * Following component architecture best practices
+ */
+export interface TodoTabContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    todos: TodoItem[];
+}
+export declare const TodoTabContent: React.ForwardRefExoticComponent<TodoTabContentProps & React.RefAttributes<HTMLDivElement>>;
+export interface FilesTabContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    files?: string[];
+}
+export declare const FilesTabContent: React.ForwardRefExoticComponent<FilesTabContentProps & React.RefAttributes<HTMLDivElement>>;
+export interface DatabaseTabContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    data?: unknown;
+}
+export declare const DatabaseTabContent: React.ForwardRefExoticComponent<DatabaseTabContentProps & React.RefAttributes<HTMLDivElement>>;

package/dist/gui/components/ChatPanelTabContent.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/utils.js";
+export const TodoTabContent = React.forwardRef(({ todos, className, ...props }, ref) => {
+    return (_jsx("div", { ref: ref, className: cn("space-y-2", className), ...props, children: todos.length === 0 ? (_jsx("div", { className: "flex items-center justify-center h-full min-h-[200px]", children: _jsx("p", { className: "text-sm text-muted-foreground", children: "No todos yet" }) })) : (todos.map((todo) => (_jsx("div", { className: "text-sm", children: todo.text }, todo.id)))) }));
+});
+TodoTabContent.displayName = "TodoTabContent";
+export const FilesTabContent = React.forwardRef(({ files = [], className, ...props }, ref) => {
+    return (_jsx("div", { ref: ref, className: cn("space-y-2", className), ...props, children: files.length === 0 ? (_jsx("div", { className: "flex items-center justify-center h-full min-h-[200px]", children: _jsx("p", { className: "text-sm text-muted-foreground", children: "No files attached" }) })) : (files.map((file) => (_jsx("div", { className: "text-sm", children: file }, file)))) }));
+});
+FilesTabContent.displayName = "FilesTabContent";
+export const DatabaseTabContent = React.forwardRef(({ data, className, ...props }, ref) => {
+    return (_jsxs("div", { ref: ref, className: cn("space-y-4", className), ...props, children: [_jsx("h3", { className: "font-semibold text-lg", children: "Database" }), _jsxs("div", { className: "text-sm text-muted-foreground", children: [_jsx("p", { children: "Database viewer - panel automatically expanded to large size" }), _jsxs("div", { className: "mt-4 p-4 border border-border rounded", children: [_jsx("p", { children: "Your large data table would go here" }), data && typeof data === "object" ? (_jsx("pre", { className: "mt-2 text-xs overflow-auto", children: JSON.stringify(data, null, 2) })) : null] })] })] }));
+});
+DatabaseTabContent.displayName = "DatabaseTabContent";

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

@@ -0,0 +1,14 @@
+import * as React from "react";
+export interface ChatSidebarRootProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+declare const ChatSidebarRoot: React.ForwardRefExoticComponent<ChatSidebarRootProps & React.RefAttributes<HTMLDivElement>>;
+export interface ChatSidebarHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+declare const ChatSidebarHeader: React.ForwardRefExoticComponent<ChatSidebarHeaderProps & React.RefAttributes<HTMLDivElement>>;
+export interface ChatSidebarContentProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+declare const ChatSidebarContent: React.ForwardRefExoticComponent<ChatSidebarContentProps & React.RefAttributes<HTMLDivElement>>;
+export interface ChatSidebarFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+declare const ChatSidebarFooter: React.ForwardRefExoticComponent<ChatSidebarFooterProps & React.RefAttributes<HTMLDivElement>>;
+export { ChatSidebarRoot as Root, ChatSidebarHeader as Header, ChatSidebarContent as Content, ChatSidebarFooter as Footer, };

package/dist/gui/components/ChatSidebar.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/utils.js";
+const ChatSidebarRoot = React.forwardRef(({ className, children, ...props }, ref) => {
+    return (_jsx("div", { ref: ref, className: cn("flex h-full flex-col", className), ...props, children: children }));
+});
+ChatSidebarRoot.displayName = "ChatSidebar.Root";
+const ChatSidebarHeader = React.forwardRef(({ className, children, ...props }, ref) => {
+    return (_jsx("div", { ref: ref, className: cn("border-b border-border px-4 py-3", className), ...props, children: children }));
+});
+ChatSidebarHeader.displayName = "ChatSidebar.Header";
+const ChatSidebarContent = React.forwardRef(({ className, children, ...props }, ref) => {
+    return (_jsx("div", { ref: ref, className: cn("flex-1 overflow-y-auto p-4", className), ...props, children: children }));
+});
+ChatSidebarContent.displayName = "ChatSidebar.Content";
+const ChatSidebarFooter = React.forwardRef(({ className, children, ...props }, ref) => {
+    return (_jsx("div", { ref: ref, className: cn("border-t border-border px-4 py-3", className), ...props, children: children }));
+});
+ChatSidebarFooter.displayName = "ChatSidebar.Footer";
+/* -------------------------------------------------------------------------------------------------
+ * Exports
+ * -----------------------------------------------------------------------------------------------*/
+export { ChatSidebarRoot as Root, ChatSidebarHeader as Header, ChatSidebarContent as Content, ChatSidebarFooter as Footer, };

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

@@ -0,0 +1,27 @@
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import * as React from "react";
+declare const DropdownMenu: React.FC<DropdownMenuPrimitive.DropdownMenuProps>;
+declare const DropdownMenuTrigger: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DropdownMenuGroup: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuGroupProps & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuPortal: React.FC<DropdownMenuPrimitive.DropdownMenuPortalProps>;
+declare const DropdownMenuSub: React.FC<DropdownMenuPrimitive.DropdownMenuSubProps>;
+declare const DropdownMenuRadioGroup: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuRadioGroupProps & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuSubTrigger: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubTriggerProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuSubContent: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuContent: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuCheckboxItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuCheckboxItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuRadioItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuRadioItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuLabel: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuSeparator: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuShortcut: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuGroup, DropdownMenuPortal, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuRadioGroup, };

package/dist/gui/components/DropdownMenu.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { Check, ChevronRight, Circle } from "lucide-react";
+import * as React from "react";
+import { cn } from "../lib/utils.js";
+/* -------------------------------------------------------------------------------------------------
+ * DropdownMenu Root
+ * -----------------------------------------------------------------------------------------------*/
+const DropdownMenu = DropdownMenuPrimitive.Root;
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+/* -------------------------------------------------------------------------------------------------
+ * DropdownMenuSubTrigger
+ * -----------------------------------------------------------------------------------------------*/
+const DropdownMenuSubTrigger = React.forwardRef(({ className, inset, children, ...props }, ref) => (_jsxs(DropdownMenuPrimitive.SubTrigger, { ref: ref, className: cn("flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none", "focus:bg-muted data-[state=open]:bg-muted", inset && "pl-8", className), ...props, children: [children, _jsx(ChevronRight, { className: "ml-auto h-4 w-4" })] })));
+DropdownMenuSubTrigger.displayName =
+    DropdownMenuPrimitive.SubTrigger.displayName;
+/* -------------------------------------------------------------------------------------------------
+ * DropdownMenuSubContent
+ * -----------------------------------------------------------------------------------------------*/
+const DropdownMenuSubContent = React.forwardRef(({ className, ...props }, ref) => (_jsx(DropdownMenuPrimitive.SubContent, { ref: ref, className: cn("z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-card p-1 shadow-lg", "data-[state=open]:animate-in data-[state=closed]:animate-out", "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95", "data-[side=bottom]:slide-in-from-top-2", "data-[side=left]:slide-in-from-right-2", "data-[side=right]:slide-in-from-left-2", "data-[side=top]:slide-in-from-bottom-2", className), ...props })));
+DropdownMenuSubContent.displayName =
+    DropdownMenuPrimitive.SubContent.displayName;
+/* -------------------------------------------------------------------------------------------------
+ * DropdownMenuContent
+ * -----------------------------------------------------------------------------------------------*/
+const DropdownMenuContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => (_jsx(DropdownMenuPrimitive.Portal, { children: _jsx(DropdownMenuPrimitive.Content, { ref: ref, sideOffset: sideOffset, className: cn("z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-card p-1 shadow-md", "data-[state=open]:animate-in data-[state=closed]:animate-out", "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95", "data-[side=bottom]:slide-in-from-top-2", "data-[side=left]:slide-in-from-right-2", "data-[side=right]:slide-in-from-left-2", "data-[side=top]:slide-in-from-bottom-2", className), ...props }) })));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+/* -------------------------------------------------------------------------------------------------
+ * DropdownMenuItem
+ * -----------------------------------------------------------------------------------------------*/
+const DropdownMenuItem = React.forwardRef(({ className, inset, ...props }, ref) => (_jsx(DropdownMenuPrimitive.Item, { ref: ref, className: cn("relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors", "focus:bg-muted focus:text-foreground", "data-[disabled]:pointer-events-none data-[disabled]:opacity-50", inset && "pl-8", className), ...props })));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+/* -------------------------------------------------------------------------------------------------
+ * DropdownMenuCheckboxItem
+ * -----------------------------------------------------------------------------------------------*/
+const DropdownMenuCheckboxItem = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(DropdownMenuPrimitive.CheckboxItem, { ref: ref, className: cn("relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors", "focus:bg-muted focus:text-foreground", "data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className), ...props, children: [_jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: _jsx(DropdownMenuPrimitive.ItemIndicator, { children: _jsx(Check, { className: "h-4 w-4" }) }) }), children] })));
+DropdownMenuCheckboxItem.displayName =
+    DropdownMenuPrimitive.CheckboxItem.displayName;
+/* -------------------------------------------------------------------------------------------------
+ * DropdownMenuRadioItem
+ * -----------------------------------------------------------------------------------------------*/
+const DropdownMenuRadioItem = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(DropdownMenuPrimitive.RadioItem, { ref: ref, className: cn("relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors", "focus:bg-muted focus:text-foreground", "data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className), ...props, children: [_jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: _jsx(DropdownMenuPrimitive.ItemIndicator, { children: _jsx(Circle, { className: "h-2 w-2 fill-current" }) }) }), children] })));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+/* -------------------------------------------------------------------------------------------------
+ * DropdownMenuLabel
+ * -----------------------------------------------------------------------------------------------*/
+const DropdownMenuLabel = React.forwardRef(({ className, inset, ...props }, ref) => (_jsx(DropdownMenuPrimitive.Label, { ref: ref, className: cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className), ...props })));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+/* -------------------------------------------------------------------------------------------------
+ * DropdownMenuSeparator
+ * -----------------------------------------------------------------------------------------------*/
+const DropdownMenuSeparator = React.forwardRef(({ className, ...props }, ref) => (_jsx(DropdownMenuPrimitive.Separator, { ref: ref, className: cn("-mx-1 my-1 h-px bg-border", className), ...props })));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+/* -------------------------------------------------------------------------------------------------
+ * DropdownMenuShortcut
+ * -----------------------------------------------------------------------------------------------*/
+const DropdownMenuShortcut = ({ className, ...props }) => {
+    return (_jsx("span", { className: cn("ml-auto text-xs tracking-widest opacity-60", className), ...props }));
+};
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
+/* -------------------------------------------------------------------------------------------------
+ * Exports
+ * -----------------------------------------------------------------------------------------------*/
+export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuGroup, DropdownMenuPortal, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuRadioGroup, };

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

@@ -21,6 +21,10 @@ export interface MessageProps extends React.HTMLAttributes<HTMLDivElement>, Vari
     layout?: "default" | "full" | "compact";
     /** Optional message ID for accessibility (fallback if message not provided) */
     messageId?: string;
+    /** Whether to auto-scroll this message into view when mounted (default: true for user messages) */
+    autoScroll?: boolean;
+    /** Whether this is the last message in the conversation (for dynamic min-height) */
+    isLastMessage?: boolean;
 }
 export declare const Message: React.ForwardRefExoticComponent<MessageProps & React.RefAttributes<HTMLDivElement>>;
 export {};

package/dist/gui/components/Message.js

@@ -9,7 +9,7 @@ import { cn } from "../lib/utils.js";
 const messageVariants = cva("flex animate-fadeIn", {
     variants: {
         role: {
-            user: "max-w-[80%] self-end ml-auto",
+            user: "max-w-[80%] self-end ml-auto mr-2",
             assistant: "self-start mr-auto",
             system: "self-start mr-auto max-w-full",
         },
@@ -24,10 +24,84 @@ const messageVariants = cva("flex animate-fadeIn", {
         layout: "default",
     },
 });
-export const Message = React.forwardRef(({ message, role: roleProp, layout, className, children, messageId: messageIdProp, ...props }, ref) => {
+export const Message = React.forwardRef(({ message, role: roleProp, layout, className, children, messageId: messageIdProp, autoScroll, isLastMessage = false, ...props }, ref) => {
     // Extract role and messageId from message if provided
     const role = message ? message.role : roleProp || "assistant";
     const messageId = message ? message.id : messageIdProp;
-    return (_jsx("article", { ref: ref, "aria-label": `${role} message`, "data-message-id": messageId, className: cn(messageVariants({ role, layout }), className), ...props, children: children }));
+    const messageRef = React.useRef(null);
+    const [minHeight, setMinHeight] = React.useState(undefined);
+    // Merge refs
+    React.useImperativeHandle(ref, () => messageRef.current);
+    // Calculate dynamic min-height for last assistant message following a user message
+    React.useEffect(() => {
+        if (!isLastMessage || role !== "assistant") {
+            setMinHeight(undefined);
+            return;
+        }
+        const calculateMinHeight = () => {
+            const messageElement = messageRef.current;
+            if (!messageElement)
+                return;
+            // Find the ChatLayout.Messages container (scrollable parent)
+            let scrollContainer = messageElement.parentElement;
+            while (scrollContainer &&
+                !scrollContainer.classList.contains("overflow-y-auto")) {
+                scrollContainer = scrollContainer.parentElement;
+            }
+            if (!scrollContainer)
+                return;
+            // Find the previous user message
+            const previousSibling = messageElement.previousElementSibling;
+            if (!previousSibling ||
+                previousSibling.getAttribute("aria-label") !== "user message") {
+                setMinHeight(undefined);
+                return;
+            }
+            // Calculate: containerHeight - previousUserMessageHeight - spacing
+            const containerHeight = scrollContainer.clientHeight;
+            const previousMessageHeight = previousSibling.offsetHeight;
+            const spacing = 32; // gap-4 = 16px
+            // Min height = container height - user message height - spacing
+            // This ensures the user message can scroll to the top
+            const calculatedMinHeight = Math.max(0, containerHeight - previousMessageHeight - spacing);
+            setMinHeight(calculatedMinHeight);
+        };
+        // Calculate on mount and recalculate on resize
+        calculateMinHeight();
+        const resizeObserver = new ResizeObserver(calculateMinHeight);
+        // Observe the message element and its parent container
+        if (messageRef.current) {
+            resizeObserver.observe(messageRef.current);
+            let scrollContainer = messageRef.current.parentElement;
+            while (scrollContainer &&
+                !scrollContainer.classList.contains("overflow-y-auto")) {
+                scrollContainer = scrollContainer.parentElement;
+            }
+            if (scrollContainer) {
+                resizeObserver.observe(scrollContainer);
+            }
+        }
+        return () => resizeObserver.disconnect();
+    }, [isLastMessage, role]);
+    // Auto-scroll for user messages when they first appear
+    React.useEffect(() => {
+        // Default to auto-scroll for user messages unless explicitly disabled
+        const shouldAutoScroll = autoScroll !== undefined ? autoScroll : role === "user";
+        if (shouldAutoScroll && messageRef.current) {
+            // Small delay to ensure the message is fully rendered
+            const timeoutId = setTimeout(() => {
+                messageRef.current?.scrollIntoView({
+                    behavior: "smooth",
+                    block: "start",
+                    inline: "nearest",
+                });
+            }, 50);
+            return () => clearTimeout(timeoutId);
+        }
+        return undefined;
+    }, [role, autoScroll]);
+    return (_jsx("article", { ref: messageRef, "aria-label": `${role} message`, "data-message-id": messageId, className: cn(messageVariants({ role, layout }), className), style: {
+            minHeight: minHeight !== undefined ? `${minHeight}px` : undefined,
+        }, ...props, children: children }));
 });
 Message.displayName = "Message";

package/dist/gui/components/MessageContent.js

@@ -66,7 +66,7 @@ const messageContentVariants = cva("w-full px-4 py-3 rounded-xl text-[var(--font
     variants: {
         role: {
             user: "bg-primary text-primary-foreground shadow-sm",
-            assistant: "bg-muted text-foreground",
+            assistant: "text-foreground",
             system: "bg-card border border-border text-foreground opacity-80 text-sm",
         },
         variant: {

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

@@ -0,0 +1,5 @@
+import type * as React from "react";
+import { Toaster as Sonner } from "sonner";
+type ToasterProps = React.ComponentProps<typeof Sonner>;
+declare const Toaster: ({ ...props }: ToasterProps) => import("react/jsx-runtime").JSX.Element;
+export { Toaster };

package/dist/gui/components/Sonner.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Toaster as Sonner } from "sonner";
+const Toaster = ({ ...props }) => {
+    return (_jsx(Sonner, { position: "top-center", className: "toaster group", style: {
+            "--top-offset": "16px",
+            "--width:": "calc(100% - 2 * var(--top-offset))",
+            position: "absolute",
+            zIndex: 5,
+            top: "var(--top-offset)",
+            left: "50%",
+            transform: "translateX(-50%)",
+            width: "calc(100% - 2 * var(--top-offset))",
+            maxWidth: "480px",
+        }, offset: 0, toastOptions: {
+            classNames: {
+                toast: "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
+                description: "group-[.toast]:text-muted-foreground",
+                actionButton: "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+                cancelButton: "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+            },
+        }, ...props }));
+};
+export { Toaster };

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

@@ -1,10 +1,17 @@
+export { toast } from "sonner";
 export { Button, type ButtonProps, buttonVariants } from "./Button.js";
 export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from "./Card.js";
-export { type ChatInputFieldProps, type ChatInputRootProps, type ChatInputSubmitProps, type ChatInputToolbarProps, Field as ChatInputField, Root as ChatInputRoot, Submit as ChatInputSubmit, Toolbar as ChatInputToolbar, } from "./ChatInput.js";
+export type { ConnectionStatus } from "./ChatHeader.js";
+export * as ChatHeader from "./ChatHeader.js";
+export { Actions as ChatInputActions, Attachment as ChatInputAttachment, type ChatInputActionsProps, type ChatInputAttachmentProps, type ChatInputCommandMenuProps, type ChatInputFieldProps, type ChatInputRootProps, type ChatInputSubmitProps, type ChatInputToolbarProps, type ChatInputVoiceInputProps, CommandMenu as ChatInputCommandMenu, type CommandMenuItem, Field as ChatInputField, Root as ChatInputRoot, Submit as ChatInputSubmit, Toolbar as ChatInputToolbar, VoiceInput as ChatInputVoiceInput, } from "./ChatInput.js";
+export * as ChatLayout from "./ChatLayout.js";
+export { DatabaseTabContent, type DatabaseTabContentProps, FilesTabContent, type FilesTabContentProps, TodoTabContent, type TodoTabContentProps, } from "./ChatPanelTabContent.js";
 export { ChatSecondaryPanel, type ChatSecondaryPanelProps, } from "./ChatSecondaryPanel.js";
+export * as ChatSidebar from "./ChatSidebar.js";
 export { ChatStatus, type ChatStatusProps } from "./ChatStatus.js";
 export { Conversation, type ConversationProps } from "./Conversation.js";
 export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, } from "./Dialog.js";
+export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, } from "./DropdownMenu.js";
 export { HeightTransition } from "./HeightTransition.js";
 export { Input, type InputProps, inputVariants } from "./Input.js";
 export { Label } from "./Label.js";
@@ -15,6 +22,7 @@ export type { DisplayMessage } from "./MessageList.js";
 export { Reasoning, type ReasoningProps } from "./Reasoning.js";
 export { Response, type ResponseProps } from "./Response.js";
 export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, } from "./Select.js";
+export { Toaster } from "./Sonner.js";
 export { Tabs, TabsContent, TabsList, TabsTrigger } from "./Tabs.js";
 export { Task, type TaskItem, TaskList, type TaskListProps, type TaskProps, } from "./Task.js";
 export { Textarea, type TextareaProps, textareaVariants } from "./Textarea.js";

package/dist/gui/components/index.js

@@ -1,14 +1,22 @@
 // Base UI components
+export { toast } from "sonner";
 export { Button, buttonVariants } from "./Button.js";
 export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from "./Card.js";
+export * as ChatHeader from "./ChatHeader.js";
 // Chat components - composable primitives
-export { Field as ChatInputField, Root as ChatInputRoot, Submit as ChatInputSubmit, Toolbar as ChatInputToolbar, } from "./ChatInput.js";
+export { Actions as ChatInputActions, Attachment as ChatInputAttachment, CommandMenu as ChatInputCommandMenu, Field as ChatInputField, Root as ChatInputRoot, Submit as ChatInputSubmit, Toolbar as ChatInputToolbar, VoiceInput as ChatInputVoiceInput, } from "./ChatInput.js";
+// Chat layout components
+export * as ChatLayout from "./ChatLayout.js";
+export { DatabaseTabContent, FilesTabContent, TodoTabContent, } from "./ChatPanelTabContent.js";
 export { ChatSecondaryPanel, } from "./ChatSecondaryPanel.js";
+export * as ChatSidebar from "./ChatSidebar.js";
 export { ChatStatus } from "./ChatStatus.js";
 // Chat components - shadcn.io/ai inspired primitives
 export { Conversation } from "./Conversation.js";
 // Dialog components
 export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, } from "./Dialog.js";
+// DropdownMenu components
+export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, } from "./DropdownMenu.js";
 // Utility components
 export { HeightTransition } from "./HeightTransition.js";
 export { Input, inputVariants } from "./Input.js";
@@ -19,6 +27,8 @@ export { MessageContent } from "./MessageContent.js";
 export { Reasoning } from "./Reasoning.js";
 export { Response } from "./Response.js";
 export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, } from "./Select.js";
+// Toast components
+export { Toaster } from "./Sonner.js";
 export { Tabs, TabsContent, TabsList, TabsTrigger } from "./Tabs.js";
 // Task/Todo components
 export { Task, TaskList, } from "./Task.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@townco/ui",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -41,6 +41,7 @@
   "dependencies": {
     "@agentclientprotocol/sdk": "^0.5.1",
     "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-label": "^2.1.8",
     "@radix-ui/react-select": "^2.2.6",
     "@radix-ui/react-slot": "^1.2.4",
@@ -51,13 +52,14 @@
     "lucide-react": "^0.552.0",
     "react-markdown": "^10.1.0",
     "remark-gfm": "^4.0.1",
+    "sonner": "^2.0.7",
     "tailwind-merge": "^3.3.1",
     "zod": "^4.1.12",
     "zustand": "^5.0.8"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4.1.17",
-    "@townco/tsconfig": "0.1.4",
+    "@townco/tsconfig": "0.1.5",
     "@types/node": "^24.10.0",
     "@types/react": "^19.2.2",
     "ink": "^6.4.0",
@@ -68,8 +70,8 @@
   },
   "peerDependencies": {
     "ink": "^5.1.0",
-    "react": "^18.3.1 || ^19.0.0",
-    "react-dom": "^18.3.1 || ^19.0.0"
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
   },
   "peerDependenciesMeta": {
     "react": {

package/src/styles/global.css

@@ -67,6 +67,8 @@
   --color-border: hsl(var(--border));
   --color-input: hsl(var(--input));
   --color-ring: hsl(var(--ring));
+  --shadow-sm: 0 8px 24px -16px rgba(0, 0, 0, 0.04), 0 4px 16px 0 rgba(0, 0, 0, 0.04);
+  --shadow-md: 0 8px 24px -16px rgba(0, 0, 0, 0.04), 0 4px 16px 0 rgba(0, 0, 0, 0.04);
 }
 
 @layer base {