@townco/ui 0.1.47 → 0.1.49

package/dist/core/store/chat-store.js

@@ -2,6 +2,52 @@ import { createLogger } from "@townco/core";
 import { create } from "zustand";
 import { mergeToolCallUpdate } from "../schemas/tool-call.js";
 const logger = createLogger("chat-store", "debug");
+// Constants to avoid creating new empty arrays
+const EMPTY_TODOS = [];
+// Cache for memoized todos to prevent infinite re-render loops
+let cachedTodos = {
+    sessionId: null,
+    toolCallId: null,
+    todos: EMPTY_TODOS,
+};
+/**
+ * Selector to get todos for the current session (memoized to prevent infinite loops)
+ */
+export const selectTodosForCurrentSession = (state) => {
+    const sessionId = state.sessionId;
+    if (!sessionId)
+        return EMPTY_TODOS;
+    const sessionToolCalls = state.toolCalls[sessionId] || [];
+    // Find most recent TodoWrite tool call
+    const todoToolCalls = sessionToolCalls
+        .filter((tc) => tc.title === "todo_write")
+        .sort((a, b) => (b.startedAt || 0) - (a.startedAt || 0));
+    if (todoToolCalls.length === 0)
+        return EMPTY_TODOS;
+    const latestTodoCall = todoToolCalls[0];
+    if (!latestTodoCall?.rawInput?.todos ||
+        !Array.isArray(latestTodoCall.rawInput.todos)) {
+        return EMPTY_TODOS;
+    }
+    // Return cached result if the tool call hasn't changed
+    if (cachedTodos.sessionId === sessionId &&
+        cachedTodos.toolCallId === latestTodoCall.id) {
+        return cachedTodos.todos;
+    }
+    // Map tool schema to UI schema
+    const newTodos = latestTodoCall.rawInput.todos.map((todo, index) => ({
+        id: `${latestTodoCall.id}-${index}`,
+        text: todo.status === "in_progress" ? todo.activeForm : todo.content,
+        status: todo.status,
+    }));
+    // Update cache
+    cachedTodos = {
+        sessionId,
+        toolCallId: latestTodoCall.id,
+        todos: newTodos,
+    };
+    return newTodos;
+};
 /**
  * Create chat store
  */

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

@@ -16,6 +16,10 @@ export interface ChatEmptyStateProps extends React.HTMLAttributes<HTMLDivElement
     onGuideClick?: () => void;
     /** Callback when "Open Files" is clicked */
     onOpenFiles?: () => void;
+    /** Callback when "View Tools & MCPs" is clicked */
+    onOpenSettings?: () => void;
+    /** Count of tools and MCPs to display */
+    toolsAndMcpsCount?: number;
     /** Callback when hovering over a prompt */
     onPromptHover?: (prompt: string) => void;
     /** Callback when mouse leaves a prompt */

package/dist/gui/components/ChatEmptyState.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ChevronRight } from "lucide-react";
 import * as React from "react";
 import { cn } from "../lib/utils.js";
-export const ChatEmptyState = React.forwardRef(({ title, description, guideUrl, guideText = "Guide", suggestedPrompts = [], onPromptClick, onGuideClick, onOpenFiles, onPromptHover, onPromptLeave, className, ...props }, ref) => {
+export const ChatEmptyState = React.forwardRef(({ title, description, guideUrl, guideText = "Guide", suggestedPrompts = [], onPromptClick, onGuideClick, onOpenFiles, onOpenSettings, toolsAndMcpsCount, onPromptHover, onPromptLeave, className, ...props }, ref) => {
     const handlePromptClick = (prompt) => {
         onPromptClick?.(prompt);
     };
@@ -17,6 +17,6 @@ export const ChatEmptyState = React.forwardRef(({ title, description, guideUrl,
     for (let i = 0; i < suggestedPrompts.length; i += 2) {
         promptRows.push(suggestedPrompts.slice(i, i + 2));
     }
-    return (_jsxs("div", { ref: ref, className: cn("flex flex-col items-start", className), ...props, children: [_jsx("h3", { className: "text-heading-4 text-text-primary mb-6", children: title }), _jsx("p", { className: "text-subheading text-text-secondary max-w-prose mb-6", children: description }), onOpenFiles && (_jsxs("button", { type: "button", onClick: onOpenFiles, className: "inline-flex items-center gap-1 py-1.5 pr-3 -ml-3 pl-3 rounded-lg hover:bg-accent transition-colors mb-6", children: [_jsx("span", { className: "text-paragraph-sm-medium text-foreground tracking-wide leading-none", children: "View Files" }), _jsx(ChevronRight, { className: "size-4 text-foreground shrink-0" })] })), (guideUrl || onGuideClick) && (_jsxs("button", { type: "button", onClick: handleGuideClick, className: "inline-flex items-center gap-1 py-1.5 pr-3 -ml-3 pl-3 rounded-lg hover:bg-accent transition-colors", children: [_jsx("span", { className: "text-paragraph-sm-medium text-foreground tracking-wide leading-none", children: guideText }), _jsx(ChevronRight, { className: "size-4 text-foreground shrink-0" })] })), suggestedPrompts.length > 0 && (_jsxs("div", { className: "flex flex-col gap-3 w-full max-w-prompt-container", children: [_jsx("p", { className: "text-label text-text-tertiary", children: "Suggested Prompts" }), _jsx("div", { className: "flex flex-col gap-2.5", children: promptRows.map((row) => (_jsx("div", { className: "flex gap-2.5 items-center", children: row.map((prompt) => (_jsx("button", { type: "button", onClick: () => handlePromptClick(prompt), onMouseEnter: () => onPromptHover?.(prompt), onMouseLeave: () => onPromptLeave?.(), className: "flex-1 flex items-start gap-2 p-3 bg-secondary hover:bg-secondary/80 rounded-2xl transition-colors min-w-0", children: _jsx("span", { className: "text-paragraph font-normal leading-normal text-text-tertiary truncate", children: prompt }) }, prompt))) }, row.join("-")))) })] }))] }));
+    return (_jsxs("div", { ref: ref, className: cn("flex flex-col items-start", className), ...props, children: [_jsx("h3", { className: "text-heading-4 text-text-primary mb-6", children: title }), _jsx("p", { className: "text-subheading text-text-secondary max-w-prose mb-6", children: description }), (onOpenFiles || onOpenSettings) && (_jsxs("div", { className: "flex items-center gap-1 -ml-3 mb-6", children: [onOpenFiles && (_jsxs("button", { type: "button", onClick: onOpenFiles, className: "inline-flex items-center gap-1 py-1.5 pr-3 pl-3 rounded-lg hover:bg-accent transition-colors", children: [_jsx("span", { className: "text-paragraph-sm-medium text-foreground tracking-wide leading-none", children: "View Files" }), _jsx(ChevronRight, { className: "size-4 text-foreground shrink-0" })] })), onOpenSettings && (_jsxs("button", { type: "button", onClick: onOpenSettings, className: "inline-flex items-center gap-1 py-1.5 pr-3 pl-3 rounded-lg hover:bg-accent transition-colors", children: [_jsxs("span", { className: "text-paragraph-sm-medium text-foreground tracking-wide leading-none", children: ["View Tools & MCPs", toolsAndMcpsCount !== undefined && toolsAndMcpsCount > 0 && (_jsxs("span", { className: "ml-1", children: ["(", toolsAndMcpsCount, ")"] }))] }), _jsx(ChevronRight, { className: "size-4 text-foreground shrink-0" })] }))] })), (guideUrl || onGuideClick) && (_jsxs("button", { type: "button", onClick: handleGuideClick, className: "inline-flex items-center gap-1 py-1.5 pr-3 -ml-3 pl-3 rounded-lg hover:bg-accent transition-colors", children: [_jsx("span", { className: "text-paragraph-sm-medium text-foreground tracking-wide leading-none", children: guideText }), _jsx(ChevronRight, { className: "size-4 text-foreground shrink-0" })] })), suggestedPrompts.length > 0 && (_jsxs("div", { className: "flex flex-col gap-3 w-full max-w-prompt-container", children: [_jsx("p", { className: "text-label text-text-tertiary", children: "Suggested Prompts" }), _jsx("div", { className: "flex flex-col gap-2.5", children: promptRows.map((row) => (_jsx("div", { className: "flex gap-2.5 items-center", children: row.map((prompt) => (_jsx("button", { type: "button", onClick: () => handlePromptClick(prompt), onMouseEnter: () => onPromptHover?.(prompt), onMouseLeave: () => onPromptLeave?.(), className: "flex-1 flex items-start gap-2 p-3 bg-secondary hover:bg-secondary/80 rounded-2xl transition-colors min-w-0", children: _jsx("span", { className: "text-paragraph font-normal leading-normal text-text-tertiary truncate", children: prompt }) }, prompt))) }, row.join("-")))) })] }))] }));
 });
 ChatEmptyState.displayName = "ChatEmptyState";

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

@@ -35,6 +35,16 @@ export interface ChatInputRootProps extends Omit<React.FormHTMLAttributes<HTMLFo
 declare const ChatInputRoot: React.ForwardRefExoticComponent<ChatInputRootProps & React.RefAttributes<HTMLFormElement>>;
 export interface ChatInputFieldProps extends Omit<React.ComponentPropsWithoutRef<typeof Textarea>, "value" | "onChange"> {
     asChild?: boolean;
+    /**
+     * Callback when files are dropped
+     */
+    onFilesDropped?: (files: Array<{
+        name: string;
+        path: string;
+        size: number;
+        mimeType: string;
+        data: string;
+    }>) => void;
 }
 declare const ChatInputField: React.ForwardRefExoticComponent<ChatInputFieldProps & React.RefAttributes<HTMLTextAreaElement>>;
 export interface ChatInputSubmitProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -48,8 +58,18 @@ export interface ChatInputActionsProps extends React.ButtonHTMLAttributes<HTMLBu
     asChild?: boolean;
 }
 declare const ChatInputActions: React.ForwardRefExoticComponent<ChatInputActionsProps & React.RefAttributes<HTMLButtonElement>>;
-export interface ChatInputAttachmentProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+export interface ChatInputAttachmentProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onChange"> {
     asChild?: boolean;
+    /**
+     * Callback when files are selected
+     */
+    onFilesSelected?: (files: Array<{
+        name: string;
+        path: string;
+        size: number;
+        mimeType: string;
+        data: string;
+    }>) => void;
 }
 declare const ChatInputAttachment: React.ForwardRefExoticComponent<ChatInputAttachmentProps & React.RefAttributes<HTMLButtonElement>>;
 export interface ChatInputVoiceInputProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {

package/dist/gui/components/ChatInput.js

@@ -1,8 +1,9 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } 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 { useMessageHistory } from "../../core/hooks/use-message-history.js";
 import { useChatStore } from "../../core/store/chat-store.js";
 import { cn } from "../lib/utils.js";
 import { Button } from "./Button.js";
@@ -22,18 +23,28 @@ const ChatInputRoot = React.forwardRef(({ client, startSession, value: valueProp
     // Always call hooks unconditionally (React rules)
     const hookData = useCoreChatInput(client ?? null, startSession ?? dummyStartSession);
     const storeIsStreaming = useChatStore((state) => state.isStreaming);
+    // Message history hook
+    const { addToHistory, navigatePrevious, navigateNext, resetNavigation } = useMessageHistory();
     // Choose data source based on whether client is provided
     const useHookData = client && startSession;
     const value = useHookData ? hookData.value : valueProp || "";
     const onChange = useHookData
         ? hookData.onChange
         : onChangeProp || (() => { });
-    const onSubmit = useHookData
+    const baseOnSubmit = useHookData
         ? hookData.onSubmit
         : onSubmitProp || (async () => { });
     const isSubmitting = useHookData
         ? hookData.isSubmitting || storeIsStreaming
         : isSubmittingProp || false;
+    // Wrap onSubmit to add messages to history
+    const onSubmit = React.useCallback(async () => {
+        const messageToSave = value.trim();
+        if (messageToSave) {
+            addToHistory(messageToSave);
+        }
+        await baseOnSubmit();
+    }, [value, addToHistory, baseOnSubmit]);
     // Command menu state
     const [showCommandMenu, setShowCommandMenu] = React.useState(false);
     const [commandMenuQuery, setCommandMenuQuery] = React.useState("");
@@ -112,12 +123,16 @@ const ChatInputRoot = React.forwardRef(({ client, startSession, value: valueProp
             setMenuItemCount,
             triggerMenuSelect,
             triggerCounter,
+            navigateHistoryPrevious: navigatePrevious,
+            navigateHistoryNext: navigateNext,
+            resetHistoryNavigation: resetNavigation,
         }, children: _jsx("form", { ref: ref, onSubmit: handleSubmit, onClick: handleFormClick, onKeyDown: handleFormKeyDown, 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, showCommandMenu, setShowCommandMenu, setCommandMenuQuery, setSelectedMenuIndex, menuItemCount, triggerMenuSelect, } = useChatInputContext();
+const ChatInputField = React.forwardRef(({ asChild = false, className, onKeyDown, onFilesDropped, children, ...props }, ref) => {
+    const { value, onChange, onSubmit, disabled, isSubmitting, submitOnEnter, showCommandMenu, setShowCommandMenu, setCommandMenuQuery, setSelectedMenuIndex, menuItemCount, triggerMenuSelect, navigateHistoryPrevious, navigateHistoryNext, resetHistoryNavigation, } = useChatInputContext();
     const textareaRef = React.useRef(null);
+    const [isDragging, setIsDragging] = React.useState(false);
     const handleRef = React.useCallback((node) => {
         textareaRef.current = node;
         if (typeof ref === "function") {
@@ -127,6 +142,65 @@ const ChatInputField = React.forwardRef(({ asChild = false, className, onKeyDown
             ref.current = node;
         }
     }, [ref]);
+    /**
+     * Convert file to base64
+     */
+    const fileToBase64 = (file) => {
+        return new Promise((resolve, reject) => {
+            const reader = new FileReader();
+            reader.readAsDataURL(file);
+            reader.onload = () => {
+                const base64 = reader.result.split(",")[1];
+                resolve(base64 || "");
+            };
+            reader.onerror = (error) => reject(error);
+        });
+    };
+    /**
+     * Handle file drop
+     */
+    const handleDrop = async (e) => {
+        e.preventDefault();
+        setIsDragging(false);
+        const files = e.dataTransfer.files;
+        if (!files || files.length === 0 || !onFilesDropped)
+            return;
+        const processedFiles = [];
+        for (const file of Array.from(files)) {
+            if (!file.type.startsWith("image/"))
+                continue;
+            try {
+                const base64Data = await fileToBase64(file);
+                processedFiles.push({
+                    name: file.name,
+                    path: file.name,
+                    size: file.size,
+                    mimeType: file.type,
+                    data: base64Data,
+                });
+            }
+            catch (error) {
+                console.error("Failed to process dropped file:", file.name, error);
+            }
+        }
+        if (processedFiles.length > 0) {
+            onFilesDropped(processedFiles);
+        }
+    };
+    /**
+     * Handle drag over (required to enable drop)
+     */
+    const handleDragOver = (e) => {
+        e.preventDefault();
+        setIsDragging(true);
+    };
+    /**
+     * Handle drag leave
+     */
+    const handleDragLeave = (e) => {
+        e.preventDefault();
+        setIsDragging(false);
+    };
     const handleKeyDown = (e) => {
         // Handle arrow keys and Enter when command menu is open
         if (showCommandMenu && menuItemCount > 0) {
@@ -152,6 +226,46 @@ const ChatInputField = React.forwardRef(({ asChild = false, className, onKeyDown
                 return;
             }
         }
+        // Handle history navigation with up/down arrows when command menu is not open
+        // Only navigate history when cursor is at start/end of input or input is empty
+        if (!showCommandMenu) {
+            const textarea = textareaRef.current;
+            const cursorAtStart = textarea?.selectionStart === 0 && textarea?.selectionEnd === 0;
+            const cursorAtEnd = textarea?.selectionStart === value.length &&
+                textarea?.selectionEnd === value.length;
+            const isMultiline = value.includes("\n");
+            if (e.key === "ArrowUp" && (cursorAtStart || !value || !isMultiline)) {
+                const previousMessage = navigateHistoryPrevious(value);
+                if (previousMessage !== null) {
+                    e.preventDefault();
+                    onChange(previousMessage);
+                    // Move cursor to end after a tick
+                    setTimeout(() => {
+                        if (textareaRef.current) {
+                            textareaRef.current.selectionStart = previousMessage.length;
+                            textareaRef.current.selectionEnd = previousMessage.length;
+                        }
+                    }, 0);
+                    return;
+                }
+            }
+            else if (e.key === "ArrowDown" &&
+                (cursorAtEnd || !value || !isMultiline)) {
+                const nextMessage = navigateHistoryNext();
+                if (nextMessage !== null) {
+                    e.preventDefault();
+                    onChange(nextMessage);
+                    // Move cursor to end after a tick
+                    setTimeout(() => {
+                        if (textareaRef.current) {
+                            textareaRef.current.selectionStart = nextMessage.length;
+                            textareaRef.current.selectionEnd = nextMessage.length;
+                        }
+                    }, 0);
+                    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
@@ -169,6 +283,8 @@ const ChatInputField = React.forwardRef(({ asChild = false, className, onKeyDown
     const handleChange = (e) => {
         const newValue = e.target.value;
         onChange(newValue);
+        // Reset history navigation when user types
+        resetHistoryNavigation();
         // Check if user typed "/" at the start to trigger command menu
         if (newValue.startsWith("/") && !newValue.includes("\n")) {
             setShowCommandMenu(true);
@@ -200,13 +316,16 @@ const ChatInputField = React.forwardRef(({ asChild = false, className, onKeyDown
         value,
         onChange: handleChange,
         onKeyDown: handleKeyDown,
+        onDrop: handleDrop,
+        onDragOver: handleDragOver,
+        onDragLeave: handleDragLeave,
         disabled: disabled,
         ...props,
     };
     if (asChild && React.isValidElement(children)) {
         return React.cloneElement(children, fieldProps);
     }
-    return (_jsx("textarea", { ...fieldProps, rows: 1, className: cn("w-full resize-none rounded-none border-none p-4 shadow-none", "outline-none ring-0 max-h-[6lh] min-h-[44px]", "bg-transparent dark:bg-transparent focus-visible:ring-0", "text-paragraph-sm placeholder:text-muted-foreground", "disabled:cursor-not-allowed disabled:opacity-50", className) }));
+    return (_jsx("textarea", { ...fieldProps, rows: 1, className: cn("w-full resize-none rounded-none border-none p-4 shadow-none", "outline-none ring-0 max-h-[6lh] min-h-[44px]", "bg-transparent dark:bg-transparent focus-visible:ring-0", "text-paragraph-sm placeholder:text-muted-foreground", "disabled:cursor-not-allowed disabled:opacity-50", isDragging && "ring-2 ring-primary ring-offset-2", className) }));
 });
 ChatInputField.displayName = "ChatInput.Field";
 const ChatInputSubmit = React.forwardRef(({ asChild = false, className, disabled: disabledProp, children, ...props }, ref) => {
@@ -235,9 +354,67 @@ const ChatInputActions = React.forwardRef(({ asChild = false, className, childre
     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 ChatInputAttachment = React.forwardRef(({ asChild = false, className, children, onFilesSelected, ...props }, ref) => {
+    const fileInputRef = React.useRef(null);
+    /**
+     * Convert file to base64
+     */
+    const fileToBase64 = (file) => {
+        return new Promise((resolve, reject) => {
+            const reader = new FileReader();
+            reader.readAsDataURL(file);
+            reader.onload = () => {
+                // Remove the data URL prefix (e.g., "data:image/png;base64,")
+                const base64 = reader.result.split(",")[1];
+                resolve(base64 || "");
+            };
+            reader.onerror = (error) => reject(error);
+        });
+    };
+    /**
+     * Handle file selection
+     */
+    const handleFileChange = async (e) => {
+        const files = e.target.files;
+        if (!files || files.length === 0)
+            return;
+        const processedFiles = [];
+        for (const file of Array.from(files)) {
+            // Only process image files
+            if (!file.type.startsWith("image/")) {
+                continue;
+            }
+            try {
+                const base64Data = await fileToBase64(file);
+                processedFiles.push({
+                    name: file.name,
+                    path: file.name, // For web, we don't have a real path
+                    size: file.size,
+                    mimeType: file.type,
+                    data: base64Data,
+                });
+            }
+            catch (error) {
+                console.error("Failed to process file:", file.name, error);
+            }
+        }
+        if (processedFiles.length > 0 && onFilesSelected) {
+            onFilesSelected(processedFiles);
+        }
+        // Reset input so the same file can be selected again
+        if (fileInputRef.current) {
+            fileInputRef.current.value = "";
+        }
+    };
+    /**
+     * Handle button click to trigger file input
+     */
+    const handleClick = (e) => {
+        e.preventDefault();
+        fileInputRef.current?.click();
+    };
     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" }) }));
+    return (_jsxs(_Fragment, { children: [_jsx("input", { ref: fileInputRef, type: "file", accept: "image/*", multiple: true, style: { display: "none" }, onChange: handleFileChange }), _jsx(Comp, { ref: ref, type: "button", variant: "ghost", size: "icon", className: cn("rounded-full", className), onClick: handleClick, ...props, children: children || _jsx(Paperclip, { className: "size-4" }) })] }));
 });
 ChatInputAttachment.displayName = "ChatInput.Attachment";
 const ChatInputVoiceInput = React.forwardRef(({ asChild = false, className, children, ...props }, ref) => {

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

@@ -1,6 +1,6 @@
 import * as React from "react";
 type PanelSize = "hidden" | "small" | "large";
-type PanelTabType = "todo" | "files" | "database";
+type PanelTabType = "todo" | "files" | "database" | "sources" | "settings";
 interface ChatLayoutContextValue {
     sidebarOpen: boolean;
     setSidebarOpen: (open: boolean) => void;
@@ -9,6 +9,7 @@ interface ChatLayoutContextValue {
     activeTab: PanelTabType;
     setActiveTab: (tab: PanelTabType) => void;
 }
+declare const ChatLayoutContext: React.Context<ChatLayoutContextValue | undefined>;
 declare const useChatLayoutContext: () => ChatLayoutContextValue;
 export interface ChatLayoutRootProps extends React.HTMLAttributes<HTMLDivElement> {
     /** Initial sidebar open state */
@@ -48,5 +49,5 @@ export interface ChatLayoutAsideProps extends React.HTMLAttributes<HTMLDivElemen
     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 { ChatLayoutRoot as Root, ChatLayoutHeader as Header, ChatLayoutMain as Main, ChatLayoutBody as Body, ChatLayoutMessages as Messages, ChatLayoutFooter as Footer, ChatLayoutSidebar as Sidebar, ChatLayoutAside as Aside, ChatLayoutContext as Context, useChatLayoutContext, };
 export type { PanelSize, PanelTabType };

package/dist/gui/components/ChatLayout.js

@@ -31,7 +31,7 @@ const ChatLayoutHeader = React.forwardRef(({ className, children, ...props }, re
 });
 ChatLayoutHeader.displayName = "ChatLayout.Header";
 const ChatLayoutMain = React.forwardRef(({ className, children, ...props }, ref) => {
-    return (_jsx(ResizablePanel, { defaultSize: 75, minSize: 50, children: _jsx("div", { ref: ref, className: cn("flex flex-1 flex-col overflow-hidden h-full", className), ...props, children: children }) }));
+    return (_jsx(ResizablePanel, { defaultSize: 70, minSize: 50, children: _jsx("div", { ref: ref, className: cn("flex flex-1 flex-col overflow-hidden h-full", className), ...props, children: children }) }));
 });
 ChatLayoutMain.displayName = "ChatLayout.Main";
 const ChatLayoutBody = React.forwardRef(({ showToaster = true, className, children, ...props }, ref) => {
@@ -168,13 +168,13 @@ const ChatLayoutSidebar = React.forwardRef(({ className, children, ...props }, r
 ChatLayoutSidebar.displayName = "ChatLayout.Sidebar";
 const ChatLayoutAside = React.forwardRef(({ breakpoint = "lg", className, children, ...props }, ref) => {
     const { panelSize } = useChatLayoutContext();
-    const [minSizePercent, setMinSizePercent] = React.useState(25);
-    // Convert 400px minimum to percentage based on window width
+    const [minSizePercent, setMinSizePercent] = React.useState(28);
+    // Convert 450px minimum to percentage based on window width
     React.useEffect(() => {
         const updateMinSize = () => {
-            const minPixels = 400;
+            const minPixels = 450;
             const minPercent = (minPixels / window.innerWidth) * 100;
-            setMinSizePercent(Math.max(minPercent, 25)); // Never less than 25% or 400px
+            setMinSizePercent(Math.max(minPercent, 28)); // Never less than 28% or 450px
         };
         updateMinSize();
         window.addEventListener("resize", updateMinSize);
@@ -185,7 +185,7 @@ const ChatLayoutAside = React.forwardRef(({ breakpoint = "lg", className, childr
     // Hidden state - don't render
     if (panelSize === "hidden")
         return null;
-    return (_jsxs(_Fragment, { children: [_jsx(ResizableHandle, { withHandle: true, className: "group-hover:opacity-100 opacity-0 transition-opacity" }), _jsx(ResizablePanel, { defaultSize: 25, minSize: minSizePercent, maxSize: 35, className: "group", children: _jsx("div", { ref: ref, className: cn(
+    return (_jsxs(_Fragment, { children: [_jsx(ResizableHandle, { withHandle: true, className: "group-hover:opacity-100 opacity-0 transition-opacity" }), _jsx(ResizablePanel, { defaultSize: 30, minSize: minSizePercent, maxSize: 40, className: "group", children: _jsx("div", { ref: ref, className: cn(
                     // Hidden by default, visible at breakpoint
                     "hidden h-full border-l border-border bg-card overflow-y-auto transition-all duration-300", 
                     // Breakpoint visibility
@@ -197,4 +197,4 @@ 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, };
+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, ChatLayoutContext as Context, useChatLayoutContext, };

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

@@ -24,3 +24,20 @@ export interface DatabaseTabContentProps extends React.HTMLAttributes<HTMLDivEle
     data?: unknown;
 }
 export declare const DatabaseTabContent: React.ForwardRefExoticComponent<DatabaseTabContentProps & React.RefAttributes<HTMLDivElement>>;
+export interface SettingsTabContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    tools?: Array<{
+        name: string;
+        description?: string;
+        prettyName?: string;
+        icon?: string;
+    }>;
+    mcps?: Array<{
+        name: string;
+        transport: string;
+    }>;
+    subagents?: Array<{
+        name: string;
+        description: string;
+    }>;
+}
+export declare const SettingsTabContent: React.ForwardRefExoticComponent<SettingsTabContentProps & React.RefAttributes<HTMLDivElement>>;

package/dist/gui/components/ChatPanelTabContent.js

@@ -1,15 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { mockSourceData } from "../data/mockSourceData.js";
-import { mockTodoData } from "../data/mockTodoData.js";
 import { cn } from "../lib/utils.js";
 import { FileSystemView } from "./FileSystemView.js";
 import { SourceListItem } from "./SourceListItem.js";
 import { TodoList } from "./TodoList.js";
-export const TodoTabContent = React.forwardRef(({ todos, className, ...props }, ref) => {
-    // Use mock data if no todos provided or if empty array
-    const displayTodos = todos && todos.length > 0 ? todos : mockTodoData;
-    return (_jsx("div", { ref: ref, className: cn("space-y-2", className), ...props, children: _jsx(TodoList, { todos: displayTodos }) }));
+export const TodoTabContent = React.forwardRef(({ todos = [], className, ...props }, ref) => {
+    return (_jsx("div", { ref: ref, className: cn("space-y-2", className), ...props, children: _jsx(TodoList, { todos: todos }) }));
 });
 TodoTabContent.displayName = "TodoTabContent";
 export const FilesTabContent = React.forwardRef(({ files = [], provider, onFileSelect, className, ...props }, ref) => {
@@ -44,3 +41,7 @@ export const DatabaseTabContent = React.forwardRef(({ data, className, ...props
     return (_jsxs("div", { ref: ref, className: cn("space-y-4", className), ...props, children: [_jsx("h3", { className: "font-semibold text-subheading", children: "Database" }), _jsxs("div", { className: "text-paragraph-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-caption overflow-auto", children: JSON.stringify(data, null, 2) })) : null] })] })] }));
 });
 DatabaseTabContent.displayName = "DatabaseTabContent";
+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", 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", 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", children: [_jsx("h3", { className: "font-semibold text-subheading", children: "Subagents" }), subagents.length > 0 ? (_jsx("div", { className: "space-y-2", children: subagents.map((subagent) => (_jsxs("div", { className: "p-3 border border-border rounded-lg bg-muted/30", children: [_jsx("div", { className: "font-medium text-paragraph-sm", children: subagent.name }), _jsx("div", { className: "text-caption text-muted-foreground mt-1 line-clamp-2", children: subagent.description })] }, subagent.name))) })) : (_jsx("p", { className: "text-paragraph-sm text-muted-foreground", children: "No subagents available" }))] })] }));
+});
+SettingsTabContent.displayName = "SettingsTabContent";

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

@@ -3,5 +3,7 @@ export interface ChatViewProps {
     client: AcpClient | null;
     initialSessionId?: string | null;
     error?: string | null;
+    /** Optional debugger URL for viewing sessions */
+    debuggerUrl?: string;
 }
-export declare function ChatView({ client, initialSessionId, error: initError, }: ChatViewProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChatView({ client, initialSessionId, error: initError, debuggerUrl, }: ChatViewProps): import("react/jsx-runtime").JSX.Element;