@townco/ui 0.1.36 → 0.1.38

package/dist/core/hooks/use-chat-input.d.ts

@@ -2,7 +2,7 @@ import type { AcpClient } from "../../sdk/client/index.js";
 /**
  * Hook for managing chat input
  */
-export declare function useChatInput(client: AcpClient | null): {
+export declare function useChatInput(client: AcpClient | null, startSession: () => Promise<string | null>): {
     value: string;
     isSubmitting: boolean;
     attachedFiles: {

package/dist/core/hooks/use-chat-input.js

@@ -6,13 +6,13 @@ const logger = createLogger("use-chat-input", "debug");
 /**
  * Hook for managing chat input
  */
-export function useChatInput(client) {
+export function useChatInput(client, startSession) {
     const input = useChatStore((state) => state.input);
     const setInputValue = useChatStore((state) => state.setInputValue);
     const setInputSubmitting = useChatStore((state) => state.setInputSubmitting);
     const addFileAttachment = useChatStore((state) => state.addFileAttachment);
     const removeFileAttachment = useChatStore((state) => state.removeFileAttachment);
-    const { sendMessage } = useChatMessages(client);
+    const { sendMessage } = useChatMessages(client, startSession);
     /**
      * Handle input value change
      */

package/dist/core/hooks/use-chat-messages.d.ts

@@ -2,7 +2,7 @@ import type { AcpClient } from "../../sdk/client/index.js";
 /**
  * Hook for managing chat messages
  */
-export declare function useChatMessages(client: AcpClient | null): {
+export declare function useChatMessages(client: AcpClient | null, startSession: () => Promise<string | null>): {
     messages: {
         id: string;
         role: "user" | "assistant" | "system";
@@ -16,6 +16,8 @@ export declare function useChatMessages(client: AcpClient | null): {
             title: string;
             kind: "read" | "edit" | "delete" | "move" | "search" | "execute" | "think" | "fetch" | "switch_mode" | "other";
             status: "pending" | "in_progress" | "completed" | "failed";
+            prettyName?: string | undefined;
+            icon?: string | undefined;
             contentPosition?: number | undefined;
             locations?: {
                 path: string;

package/dist/core/hooks/use-chat-messages.js

@@ -5,7 +5,7 @@ const logger = createLogger("use-chat-messages", "debug");
 /**
  * Hook for managing chat messages
  */
-export function useChatMessages(client) {
+export function useChatMessages(client, startSession) {
     const messages = useChatStore((state) => state.messages);
     const isStreaming = useChatStore((state) => state.isStreaming);
     const sessionId = useChatStore((state) => state.sessionId);
@@ -23,11 +23,23 @@ export function useChatMessages(client) {
             setError("No client available");
             return;
         }
-        if (!sessionId) {
-            logger.error("No active session");
-            setError("No active session");
-            return;
+        // Create session lazily if it doesn't exist
+        let activeSessionId = sessionId;
+        if (!activeSessionId) {
+            logger.info("Creating new session before sending first message");
+            const newSessionId = await startSession();
+            if (!newSessionId) {
+                logger.error("Failed to create session");
+                setError("Failed to create session");
+                return;
+            }
+            activeSessionId = newSessionId;
+            logger.info("Session created successfully", {
+                sessionId: newSessionId,
+            });
         }
+        // Create assistant message ID outside try block so it's accessible in catch
+        const assistantMessageId = `msg_${Date.now()}_assistant`;
         try {
             // Start streaming and track time immediately
             const startTime = Date.now();
@@ -43,7 +55,6 @@ export function useChatMessages(client) {
             };
             addMessage(userMessage);
             // Create placeholder for assistant message BEFORE sending
-            const assistantMessageId = `msg_${Date.now()}_assistant`;
             const assistantMessage = {
                 id: assistantMessageId,
                 role: "assistant",
@@ -57,7 +68,7 @@ export function useChatMessages(client) {
             const messageStream = client.receiveMessages();
             // Send ONLY the new message (not full history)
             // The agent backend now manages conversation context
-            client.sendMessage(content, sessionId).catch((error) => {
+            client.sendMessage(content, activeSessionId).catch((error) => {
                 const message = error instanceof Error ? error.message : String(error);
                 setError(message);
                 setIsStreaming(false);
@@ -65,6 +76,7 @@ export function useChatMessages(client) {
             });
             // Listen for streaming chunks
             let accumulatedContent = "";
+            let streamCompleted = false;
             for await (const chunk of messageStream) {
                 if (chunk.tokenUsage) {
                     logger.debug("chunk.tokenUsage", {
@@ -81,6 +93,7 @@ export function useChatMessages(client) {
                     });
                     setIsStreaming(false);
                     setStreamingStartTime(null); // Clear global streaming start time
+                    streamCompleted = true;
                     break;
                 }
                 else {
@@ -96,16 +109,32 @@ export function useChatMessages(client) {
                     }
                 }
             }
+            // Ensure streaming state is cleared even if no explicit isComplete was received
+            if (!streamCompleted) {
+                logger.warn("Stream ended without isComplete flag");
+                updateMessage(assistantMessageId, {
+                    isStreaming: false,
+                    streamingStartTime: undefined,
+                });
+                setIsStreaming(false);
+                setStreamingStartTime(null);
+            }
         }
         catch (error) {
             const message = error instanceof Error ? error.message : String(error);
             setError(message);
             setIsStreaming(false);
             setStreamingStartTime(null); // Clear streaming start time on error
+            // Ensure the assistant message isStreaming is set to false
+            updateMessage(assistantMessageId, {
+                isStreaming: false,
+                streamingStartTime: undefined,
+            });
         }
     }, [
         client,
         sessionId,
+        startSession,
         addMessage,
         updateMessage,
         setIsStreaming,

package/dist/core/hooks/use-chat-session.d.ts

@@ -7,6 +7,6 @@ export declare function useChatSession(client: AcpClient | null, initialSessionI
     sessionId: string | null;
     connect: () => Promise<void>;
     loadSession: (sessionIdToLoad: string) => Promise<void>;
-    startSession: () => Promise<void>;
+    startSession: () => Promise<string | null>;
     disconnect: () => Promise<void>;
 };

package/dist/core/hooks/use-chat-session.js

@@ -149,11 +149,12 @@ export function useChatSession(client, initialSessionId) {
     ]);
     /**
      * Start a new session
+     * @returns The new session ID, or null if creation failed
      */
     const startSession = useCallback(async () => {
         if (!client) {
             setError("No client available");
-            return;
+            return null;
         }
         try {
             const id = await client.startSession();
@@ -166,10 +167,12 @@ export function useChatSession(client, initialSessionId) {
                 url.searchParams.set("session", id);
                 window.history.pushState({}, "", url.toString());
             }
+            return id;
         }
         catch (error) {
             const message = error instanceof Error ? error.message : String(error);
             setError(message);
+            return null;
         }
     }, [client, setSessionId, setError, clearMessages, resetTokens]);
     /**
@@ -205,12 +208,6 @@ export function useChatSession(client, initialSessionId) {
             connect();
         }
     }, [client, connectionStatus, initialSessionId, connect, loadSession]);
-    // Auto-start new session after connecting (only if no initial session)
-    useEffect(() => {
-        if (connectionStatus === "connected" && !sessionId && !initialSessionId) {
-            startSession();
-        }
-    }, [connectionStatus, sessionId, initialSessionId, startSession]);
     return {
         connectionStatus,
         sessionId,

package/dist/core/hooks/use-tool-calls.d.ts

@@ -14,6 +14,8 @@ export declare function useToolCalls(client: AcpClient | null): {
         title: string;
         kind: "read" | "edit" | "delete" | "move" | "search" | "execute" | "think" | "fetch" | "switch_mode" | "other";
         status: "pending" | "in_progress" | "completed" | "failed";
+        prettyName?: string | undefined;
+        icon?: string | undefined;
         contentPosition?: number | undefined;
         locations?: {
             path: string;

package/dist/core/lib/logger.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Browser-compatible logger
+ * Outputs structured JSON logs to console with color-coding
+ */
+export type LogLevel = "trace" | "debug" | "info" | "warn" | "error" | "fatal";
+export declare class Logger {
+    private service;
+    private minLevel;
+    constructor(service: string, minLevel?: LogLevel);
+    private shouldLog;
+    private log;
+    trace(message: string, metadata?: Record<string, unknown>): void;
+    debug(message: string, metadata?: Record<string, unknown>): void;
+    info(message: string, metadata?: Record<string, unknown>): void;
+    warn(message: string, metadata?: Record<string, unknown>): void;
+    error(message: string, metadata?: Record<string, unknown>): void;
+    fatal(message: string, metadata?: Record<string, unknown>): void;
+}
+/**
+ * Create a logger instance for a service
+ * @param service - Service name (e.g., "gui", "http-agent", "tui")
+ * @param minLevel - Minimum log level to display (default: "debug")
+ */
+export declare function createLogger(service: string, minLevel?: LogLevel): Logger;

package/dist/core/lib/logger.js

@@ -0,0 +1,108 @@
+/**
+ * Browser-compatible logger
+ * Outputs structured JSON logs to console with color-coding
+ */
+const LOG_LEVELS = {
+    trace: 0,
+    debug: 1,
+    info: 2,
+    warn: 3,
+    error: 4,
+    fatal: 5,
+};
+const _LOG_COLORS = {
+    trace: "#6B7280", // gray
+    debug: "#3B82F6", // blue
+    info: "#10B981", // green
+    warn: "#F59E0B", // orange
+    error: "#EF4444", // red
+    fatal: "#DC2626", // dark red
+};
+const LOG_STYLES = {
+    trace: "color: #6B7280",
+    debug: "color: #3B82F6; font-weight: bold",
+    info: "color: #10B981; font-weight: bold",
+    warn: "color: #F59E0B; font-weight: bold",
+    error: "color: #EF4444; font-weight: bold",
+    fatal: "color: #DC2626; font-weight: bold; background: #FEE2E2",
+};
+export class Logger {
+    service;
+    minLevel;
+    constructor(service, minLevel = "debug") {
+        this.service = service;
+        this.minLevel = minLevel;
+        // In production, suppress trace and debug logs
+        if (typeof process !== "undefined" &&
+            process.env?.NODE_ENV === "production") {
+            this.minLevel = "info";
+        }
+    }
+    shouldLog(level) {
+        return LOG_LEVELS[level] >= LOG_LEVELS[this.minLevel];
+    }
+    log(level, message, metadata) {
+        if (!this.shouldLog(level)) {
+            return;
+        }
+        const entry = {
+            timestamp: new Date().toISOString(),
+            level,
+            service: this.service,
+            message,
+            ...(metadata && { metadata }),
+        };
+        // Console output with color-coding
+        const style = LOG_STYLES[level];
+        const levelUpper = level.toUpperCase().padEnd(5);
+        if (typeof console !== "undefined") {
+            // Format: [timestamp] [SERVICE] [LEVEL] message
+            const prefix = `%c[${entry.timestamp}] [${this.service}] [${levelUpper}]`;
+            const msg = metadata ? `${message} %o` : message;
+            switch (level) {
+                case "trace":
+                case "debug":
+                case "info":
+                    console.log(prefix, style, msg, ...(metadata ? [metadata] : []));
+                    break;
+                case "warn":
+                    console.warn(prefix, style, msg, ...(metadata ? [metadata] : []));
+                    break;
+                case "error":
+                case "fatal":
+                    console.error(prefix, style, msg, ...(metadata ? [metadata] : []));
+                    break;
+            }
+        }
+        // Also log the structured JSON for debugging
+        if (level === "fatal" || level === "error") {
+            console.debug("Structured log:", JSON.stringify(entry));
+        }
+    }
+    trace(message, metadata) {
+        this.log("trace", message, metadata);
+    }
+    debug(message, metadata) {
+        this.log("debug", message, metadata);
+    }
+    info(message, metadata) {
+        this.log("info", message, metadata);
+    }
+    warn(message, metadata) {
+        this.log("warn", message, metadata);
+    }
+    error(message, metadata) {
+        this.log("error", message, metadata);
+    }
+    fatal(message, metadata) {
+        this.log("fatal", message, metadata);
+    }
+}
+/**
+ * Create a logger instance for a service
+ * @param service - Service name (e.g., "gui", "http-agent", "tui")
+ * @param minLevel - Minimum log level to display (default: "debug")
+ */
+export function createLogger(service, minLevel = "debug") {
+    return new Logger(service, minLevel);
+}

package/dist/core/schemas/chat.d.ts

@@ -20,6 +20,8 @@ export declare const DisplayMessage: z.ZodObject<{
     toolCalls: z.ZodOptional<z.ZodArray<z.ZodObject<{
         id: z.ZodString;
         title: z.ZodString;
+        prettyName: z.ZodOptional<z.ZodString>;
+        icon: z.ZodOptional<z.ZodString>;
         kind: z.ZodEnum<{
             read: "read";
             edit: "edit";
@@ -116,6 +118,8 @@ export declare const ChatSessionState: z.ZodObject<{
         toolCalls: z.ZodOptional<z.ZodArray<z.ZodObject<{
             id: z.ZodString;
             title: z.ZodString;
+            prettyName: z.ZodOptional<z.ZodString>;
+            icon: z.ZodOptional<z.ZodString>;
             kind: z.ZodEnum<{
                 read: "read";
                 edit: "edit";

package/dist/core/schemas/tool-call.d.ts

@@ -71,6 +71,8 @@ export type ToolCallContentBlock = z.infer<typeof ToolCallContentBlockSchema>;
 export declare const ToolCallSchema: z.ZodObject<{
     id: z.ZodString;
     title: z.ZodString;
+    prettyName: z.ZodOptional<z.ZodString>;
+    icon: z.ZodOptional<z.ZodString>;
     kind: z.ZodEnum<{
         read: "read";
         edit: "edit";

package/dist/core/schemas/tool-call.js

@@ -75,6 +75,10 @@ export const ToolCallSchema = z.object({
     id: z.string(),
     /** Human-readable description of the operation */
     title: z.string(),
+    /** Optional pretty name for the tool (e.g. "Web Search" instead of "web_search") */
+    prettyName: z.string().optional(),
+    /** Optional icon identifier for the tool (e.g. "Globe", "Search", "Edit") */
+    icon: z.string().optional(),
     /** Category for UI presentation */
     kind: ToolCallKindSchema,
     /** Current execution status */

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

@@ -14,5 +14,11 @@ export interface ChatEmptyStateProps extends React.HTMLAttributes<HTMLDivElement
     onPromptClick?: (prompt: string) => void;
     /** Callback when guide is clicked */
     onGuideClick?: () => void;
+    /** Callback when "Open Files" is clicked */
+    onOpenFiles?: () => void;
+    /** Callback when hovering over a prompt */
+    onPromptHover?: (prompt: string) => void;
+    /** Callback when mouse leaves a prompt */
+    onPromptLeave?: () => void;
 }
 export declare const ChatEmptyState: React.ForwardRefExoticComponent<ChatEmptyStateProps & React.RefAttributes<HTMLDivElement>>;

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, className, ...props }, ref) => {
+export const ChatEmptyState = React.forwardRef(({ title, description, guideUrl, guideText = "Guide", suggestedPrompts = [], onPromptClick, onGuideClick, onOpenFiles, 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 gap-6", className), ...props, children: [_jsx("h3", { className: "text-heading-4 text-text-primary", children: title }), _jsx("p", { className: "text-subheading text-text-secondary max-w-prose", children: description }), (guideUrl || onGuideClick) && (_jsxs("button", { type: "button", onClick: handleGuideClick, className: "flex items-center gap-2 px-3 py-1.5 rounded-lg hover:bg-accent transition-colors", children: [_jsx("span", { className: "text-paragraph-sm font-medium leading-normal text-text-primary", children: guideText }), _jsx(ChevronRight, { className: "size-4 text-text-primary" })] })), 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), 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 && (_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("-")))) })] }))] }));
 });
 ChatEmptyState.displayName = "ChatEmptyState";

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

@@ -8,6 +8,10 @@ export interface ChatInputRootProps extends Omit<React.FormHTMLAttributes<HTMLFo
      * Either client or value/onChange/onSubmit must be provided
      */
     client?: AcpClient | null;
+    /**
+     * Start session function (required when using client)
+     */
+    startSession?: () => Promise<string | null>;
     /**
      * Input value (legacy prop-based pattern)
      * Either client or value/onChange/onSubmit must be provided

package/dist/gui/components/ChatInput.js

@@ -15,18 +15,23 @@ const useChatInputContext = () => {
     }
     return context;
 };
-const ChatInputRoot = React.forwardRef(({ client, value: valueProp, onChange: onChangeProp, onSubmit: onSubmitProp, disabled = false, isSubmitting: isSubmittingProp, submitOnEnter = true, className, children, ...props }, ref) => {
+const ChatInputRoot = React.forwardRef(({ client, startSession, value: valueProp, onChange: onChangeProp, onSubmit: onSubmitProp, disabled = false, isSubmitting: isSubmittingProp, submitOnEnter = true, className, children, ...props }, ref) => {
     const textareaRef = React.useRef(null);
+    // Provide a dummy startSession function if not provided (for React hooks rule)
+    const dummyStartSession = React.useCallback(async () => Promise.resolve(null), []);
     // Always call hooks unconditionally (React rules)
-    const hookData = useCoreChatInput(client ?? null);
+    const hookData = useCoreChatInput(client ?? null, startSession ?? dummyStartSession);
     const storeIsStreaming = useChatStore((state) => state.isStreaming);
     // Choose data source based on whether client is provided
-    const value = hookData ? hookData.value : valueProp || "";
-    const onChange = hookData ? hookData.onChange : onChangeProp || (() => { });
-    const onSubmit = hookData
+    const useHookData = client && startSession;
+    const value = useHookData ? hookData.value : valueProp || "";
+    const onChange = useHookData
+        ? hookData.onChange
+        : onChangeProp || (() => { });
+    const onSubmit = useHookData
         ? hookData.onSubmit
         : onSubmitProp || (async () => { });
-    const isSubmitting = hookData
+    const isSubmitting = useHookData
         ? hookData.isSubmitting || storeIsStreaming
         : isSubmittingProp || false;
     // Command menu state
@@ -201,7 +206,7 @@ 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-4 shadow-none", "outline-none ring-0 field-sizing-content max-h-[6lh]", "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", className) }));
 });
 ChatInputField.displayName = "ChatInput.Field";
 const ChatInputSubmit = React.forwardRef(({ asChild = false, className, disabled: disabledProp, children, ...props }, ref) => {

package/dist/gui/components/ChatLayout.js

@@ -41,38 +41,118 @@ 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);
+    const wasAtBottomRef = React.useRef(true); // Track if user was at bottom before content update
+    const isAutoScrollingRef = React.useRef(false); // Track if we're programmatically scrolling
     // 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;
+            return false;
         const { scrollTop, scrollHeight, clientHeight } = container;
         const distanceFromBottom = scrollHeight - scrollTop - clientHeight;
         const isAtBottom = distanceFromBottom < 100; // 100px threshold
         setShowScrollButton(!isAtBottom && showScrollToBottom);
         onScrollChange?.(isAtBottom);
+        return isAtBottom;
     }, [onScrollChange, showScrollToBottom]);
     // Handle scroll events
     const handleScroll = React.useCallback(() => {
-        checkScrollPosition();
+        // If this is a programmatic scroll, don't update wasAtBottomRef
+        if (isAutoScrollingRef.current) {
+            return;
+        }
+        // This is a user-initiated scroll, update the position
+        const isAtBottom = checkScrollPosition();
+        wasAtBottomRef.current = isAtBottom;
     }, [checkScrollPosition]);
     // Scroll to bottom function
-    const scrollToBottom = React.useCallback(() => {
+    const scrollToBottom = React.useCallback((smooth = true) => {
         const container = scrollContainerRef.current;
         if (!container)
             return;
+        // Mark that we're about to programmatically scroll
+        isAutoScrollingRef.current = true;
+        wasAtBottomRef.current = true; // Set immediately for instant scrolls
         container.scrollTo({
             top: container.scrollHeight,
-            behavior: "smooth",
+            behavior: smooth ? "smooth" : "auto",
         });
+        // Clear the flag after scroll completes
+        // For instant scrolling, clear immediately; for smooth, wait
+        setTimeout(() => {
+            isAutoScrollingRef.current = false;
+        }, smooth ? 300 : 0);
     }, []);
-    // Check scroll position on mount and when children change
+    // Auto-scroll when content changes if user was at bottom
+    React.useEffect(() => {
+        const container = scrollContainerRef.current;
+        if (!container)
+            return;
+        // If user was at the bottom, scroll to new content
+        if (wasAtBottomRef.current && !isAutoScrollingRef.current) {
+            // Use requestAnimationFrame to ensure DOM has updated
+            requestAnimationFrame(() => {
+                scrollToBottom(false); // Use instant scroll for streaming to avoid jarring smooth animations
+            });
+        }
+        // Update scroll position state (but don't change wasAtBottomRef if we're auto-scrolling)
+        if (!isAutoScrollingRef.current) {
+            checkScrollPosition();
+        }
+    }, [children, scrollToBottom, checkScrollPosition]);
+    // Check scroll position on mount
     React.useEffect(() => {
-        checkScrollPosition();
+        if (!isAutoScrollingRef.current) {
+            const isAtBottom = checkScrollPosition();
+            wasAtBottomRef.current = isAtBottom;
+        }
     }, [checkScrollPosition]);
-    return (_jsxs("div", { className: "relative flex-1 overflow-hidden", children: [_jsx("div", { ref: scrollContainerRef, className: cn("h-full overflow-y-auto flex flex-col", className), onScroll: handleScroll, ...props, children: _jsx("div", { className: "mx-auto max-w-chat flex-1 w-full flex flex-col", children: children }) }), showScrollButton && (_jsx("button", { type: "button", onClick: scrollToBottom, className: cn("absolute bottom-4 left-1/2 -translate-x-1/2 z-10", "flex items-center justify-center p-2 rounded-full", "bg-card border border-border shadow-lg", "text-foreground", "hover:bg-accent hover:text-accent-foreground", "transition-all duration-200 ease-in-out", "animate-in fade-in slide-in-from-bottom-2"), "aria-label": "Scroll to bottom", children: _jsx(ArrowDown, { className: "size-4" }) }))] }));
+    // Detect user interaction with scroll area (wheel, touch) - IMMEDIATELY break auto-scroll
+    const handleUserInteraction = React.useCallback(() => {
+        // Immediately mark that user is interacting
+        isAutoScrollingRef.current = false;
+        // For wheel/touch events, temporarily break auto-scroll
+        // The actual scroll event will update wasAtBottomRef properly
+        // This prevents the race condition where content updates before scroll completes
+        const container = scrollContainerRef.current;
+        if (!container)
+            return;
+        // Check current position BEFORE the scroll happens
+        const { scrollTop, scrollHeight, clientHeight } = container;
+        const distanceFromBottom = scrollHeight - scrollTop - clientHeight;
+        // If user is not currently at the bottom, definitely break auto-scroll
+        if (distanceFromBottom >= 100) {
+            wasAtBottomRef.current = false;
+        }
+        // If they are at bottom, the scroll event will determine if they stay there
+    }, []);
+    // Handle keyboard navigation
+    const handleKeyDown = React.useCallback((e) => {
+        // If user presses arrow keys, page up/down, home/end - they're scrolling
+        const scrollKeys = [
+            "ArrowUp",
+            "ArrowDown",
+            "PageUp",
+            "PageDown",
+            "Home",
+            "End",
+        ];
+        if (scrollKeys.includes(e.key)) {
+            isAutoScrollingRef.current = false;
+            // Check position on next frame after the scroll happens
+            requestAnimationFrame(() => {
+                const container = scrollContainerRef.current;
+                if (!container)
+                    return;
+                const { scrollTop, scrollHeight, clientHeight } = container;
+                const distanceFromBottom = scrollHeight - scrollTop - clientHeight;
+                wasAtBottomRef.current = distanceFromBottom < 100;
+            });
+        }
+    }, []);
+    return (_jsxs("div", { className: "relative flex-1 overflow-hidden", children: [_jsx("div", { ref: scrollContainerRef, className: cn("h-full overflow-y-auto flex flex-col", className), onScroll: handleScroll, onWheel: handleUserInteraction, onTouchStart: handleUserInteraction, onKeyDown: handleKeyDown, tabIndex: 0, ...props, children: _jsx("div", { className: "mx-auto max-w-chat flex-1 w-full flex flex-col", children: children }) }), showScrollButton && (_jsx("button", { type: "button", onClick: () => scrollToBottom(true), className: cn("absolute bottom-4 left-1/2 -translate-x-1/2 z-10", "flex items-center justify-center p-2 rounded-full", "bg-card border border-border shadow-lg", "text-foreground", "hover:bg-accent hover:text-accent-foreground", "transition-all duration-200 ease-in-out", "animate-in fade-in slide-in-from-bottom-2"), "aria-label": "Scroll to bottom", children: _jsx(ArrowDown, { className: "size-4" }) }))] }));
 });
 ChatLayoutMessages.displayName = "ChatLayout.Messages";
 const ChatLayoutFooter = React.forwardRef(({ className, children, ...props }, ref) => {
@@ -88,10 +168,24 @@ 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
+    React.useEffect(() => {
+        const updateMinSize = () => {
+            const minPixels = 400;
+            const minPercent = (minPixels / window.innerWidth) * 100;
+            setMinSizePercent(Math.max(minPercent, 25)); // Never less than 25% or 400px
+        };
+        updateMinSize();
+        window.addEventListener("resize", updateMinSize);
+        return () => {
+            window.removeEventListener("resize", updateMinSize);
+        };
+    }, []);
     // Hidden state - don't render
     if (panelSize === "hidden")
         return null;
-    return (_jsxs(_Fragment, { children: [_jsx(ResizableHandle, { withHandle: true }), _jsx(ResizablePanel, { defaultSize: 25, minSize: 15, maxSize: 50, 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: 25, minSize: minSizePercent, maxSize: 35, 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

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

@@ -7,7 +7,7 @@ import type { TodoItem } from "./TodoListItem.js";
  * Following component architecture best practices
  */
 export interface TodoTabContentProps extends React.HTMLAttributes<HTMLDivElement> {
-    todos: TodoItem[];
+    todos?: TodoItem[];
 }
 export declare const TodoTabContent: React.ForwardRefExoticComponent<TodoTabContentProps & React.RefAttributes<HTMLDivElement>>;
 export interface FilesTabContentProps extends React.HTMLAttributes<HTMLDivElement> {