@townco/ui 0.1.37 → 0.1.38

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

@@ -16,6 +16,8 @@ export declare function useChatMessages(client: AcpClient | null, startSession:
             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

@@ -38,6 +38,8 @@ export function useChatMessages(client, startSession) {
                 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();
@@ -53,7 +55,6 @@ export function useChatMessages(client, startSession) {
             };
             addMessage(userMessage);
             // Create placeholder for assistant message BEFORE sending
-            const assistantMessageId = `msg_${Date.now()}_assistant`;
             const assistantMessage = {
                 id: assistantMessageId,
                 role: "assistant",
@@ -75,6 +76,7 @@ export function useChatMessages(client, startSession) {
             });
             // Listen for streaming chunks
             let accumulatedContent = "";
+            let streamCompleted = false;
             for await (const chunk of messageStream) {
                 if (chunk.tokenUsage) {
                     logger.debug("chunk.tokenUsage", {
@@ -91,6 +93,7 @@ export function useChatMessages(client, startSession) {
                     });
                     setIsStreaming(false);
                     setStreamingStartTime(null); // Clear global streaming start time
+                    streamCompleted = true;
                     break;
                 }
                 else {
@@ -106,12 +109,27 @@ export function useChatMessages(client, startSession) {
                     }
                 }
             }
+            // 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,

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

@@ -1,46 +1,12 @@
 /**
  * Browser-compatible logger
  * Outputs structured JSON logs to console with color-coding
- * Also captures logs to a global store for in-app viewing
- * In Node.js environment with logsDir option, also writes to .logs/ directory
  */
 export type LogLevel = "trace" | "debug" | "info" | "warn" | "error" | "fatal";
-export interface LogEntry {
-    id: string;
-    timestamp: string;
-    level: LogLevel;
-    service: string;
-    message: string;
-    metadata?: Record<string, unknown>;
-}
-/**
- * Get all captured logs
- */
-export declare function getCapturedLogs(): LogEntry[];
-/**
- * Clear all captured logs
- */
-export declare function clearCapturedLogs(): void;
-/**
- * Subscribe to log updates
- */
-type LogSubscriber = (entry: LogEntry) => void;
-export declare function subscribeToLogs(callback: LogSubscriber): () => void;
-/**
- * Configure global logs directory for file writing
- * Must be called before creating any loggers (typically at TUI startup)
- */
-export declare function configureLogsDir(logsDir: string): void;
 export declare class Logger {
     private service;
     private minLevel;
-    private logFilePath?;
-    private logsDir?;
-    private writeQueue;
-    private isWriting;
     constructor(service: string, minLevel?: LogLevel);
-    private setupFileLogging;
-    private writeToFile;
     private shouldLog;
     private log;
     trace(message: string, metadata?: Record<string, unknown>): void;
@@ -56,4 +22,3 @@ export declare class Logger {
  * @param minLevel - Minimum log level to display (default: "debug")
  */
 export declare function createLogger(service: string, minLevel?: LogLevel): Logger;
-export {};

package/dist/core/lib/logger.js

@@ -1,45 +1,7 @@
 /**
  * Browser-compatible logger
  * Outputs structured JSON logs to console with color-coding
- * Also captures logs to a global store for in-app viewing
- * In Node.js environment with logsDir option, also writes to .logs/ directory
  */
-// Check if running in Node.js
-const isNode = typeof process !== "undefined" && process.versions?.node;
-// Global logs directory configuration (set once at app startup for TUI)
-let globalLogsDir;
-// Global log store
-const globalLogStore = [];
-let logIdCounter = 0;
-/**
- * Get all captured logs
- */
-export function getCapturedLogs() {
-    return [...globalLogStore];
-}
-/**
- * Clear all captured logs
- */
-export function clearCapturedLogs() {
-    globalLogStore.length = 0;
-}
-const logSubscribers = new Set();
-export function subscribeToLogs(callback) {
-    logSubscribers.add(callback);
-    return () => logSubscribers.delete(callback);
-}
-function notifyLogSubscribers(entry) {
-    for (const callback of logSubscribers) {
-        callback(entry);
-    }
-}
-/**
- * Configure global logs directory for file writing
- * Must be called before creating any loggers (typically at TUI startup)
- */
-export function configureLogsDir(logsDir) {
-    globalLogsDir = logsDir;
-}
 const LOG_LEVELS = {
     trace: 0,
     debug: 1,
@@ -56,7 +18,7 @@ const _LOG_COLORS = {
     error: "#EF4444", // red
     fatal: "#DC2626", // dark red
 };
-const _LOG_STYLES = {
+const LOG_STYLES = {
     trace: "color: #6B7280",
     debug: "color: #3B82F6; font-weight: bold",
     info: "color: #10B981; font-weight: bold",
@@ -67,10 +29,6 @@ const _LOG_STYLES = {
 export class Logger {
     service;
     minLevel;
-    logFilePath;
-    logsDir;
-    writeQueue = [];
-    isWriting = false;
     constructor(service, minLevel = "debug") {
         this.service = service;
         this.minLevel = minLevel;
@@ -79,48 +37,6 @@ export class Logger {
             process.env?.NODE_ENV === "production") {
             this.minLevel = "info";
         }
-        // Note: File logging setup is done lazily in log() method
-        // This allows loggers created before configureLogsDir() to still write to files
-    }
-    setupFileLogging() {
-        if (!isNode || !globalLogsDir)
-            return;
-        try {
-            // Dynamic import for Node.js modules
-            const path = require("node:path");
-            const fs = require("node:fs");
-            this.logsDir = globalLogsDir;
-            this.logFilePath = path.join(this.logsDir, `${this.service}.log`);
-            // Create logs directory if it doesn't exist
-            if (!fs.existsSync(this.logsDir)) {
-                fs.mkdirSync(this.logsDir, { recursive: true });
-            }
-        }
-        catch (_error) {
-            // Silently fail if we can't set up file logging
-        }
-    }
-    async writeToFile(content) {
-        if (!this.logFilePath || !isNode)
-            return;
-        this.writeQueue.push(content);
-        if (this.isWriting) {
-            return;
-        }
-        this.isWriting = true;
-        while (this.writeQueue.length > 0) {
-            const batch = this.writeQueue.splice(0, this.writeQueue.length);
-            const data = `${batch.join("\n")}\n`;
-            try {
-                // Dynamic import for Node.js modules
-                const fs = require("node:fs");
-                await fs.promises.appendFile(this.logFilePath, data, "utf-8");
-            }
-            catch (_error) {
-                // Silently fail
-            }
-        }
-        this.isWriting = false;
     }
     shouldLog(level) {
         return LOG_LEVELS[level] >= LOG_LEVELS[this.minLevel];
@@ -130,37 +46,38 @@ export class Logger {
             return;
         }
         const entry = {
-            id: `log_${++logIdCounter}`,
             timestamp: new Date().toISOString(),
             level,
             service: this.service,
             message,
             ...(metadata && { metadata }),
         };
-        // Store in global log store
-        globalLogStore.push(entry);
-        // Notify subscribers
-        notifyLogSubscribers(entry);
-        // Write to file in Node.js (for logs tab to read)
-        // Lazily set up file logging if globalLogsDir was configured after this logger was created
-        if (isNode && !this.logFilePath && globalLogsDir) {
-            this.setupFileLogging();
+        // 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;
+            }
         }
-        if (isNode && this.logFilePath) {
-            // Write as JSON without the id field (to match expected format)
-            const fileEntry = {
-                timestamp: entry.timestamp,
-                level: entry.level,
-                service: entry.service,
-                message: entry.message,
-                ...(entry.metadata && { metadata: entry.metadata }),
-            };
-            this.writeToFile(JSON.stringify(fileEntry)).catch(() => {
-                // Silently fail
-            });
+        // Also log the structured JSON for debugging
+        if (level === "fatal" || level === "error") {
+            console.debug("Structured log:", JSON.stringify(entry));
         }
-        // No console output - logs are only captured and displayed in UI
-        // This prevents logs from polluting stdout/stderr in TUI mode
     }
     trace(message, metadata) {
         this.log("trace", message, metadata);

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.js

@@ -206,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> {

package/dist/gui/components/ChatPanelTabContent.js

@@ -1,10 +1,15 @@
 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) => {
-    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-paragraph-sm text-muted-foreground", children: "No todos yet" }) })) : (todos.map((todo) => (_jsx("div", { className: "text-paragraph-sm", children: todo.text }, todo.id)))) }));
+    // 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 }) }));
 });
 TodoTabContent.displayName = "TodoTabContent";
 export const FilesTabContent = React.forwardRef(({ files = [], provider, onFileSelect, className, ...props }, ref) => {
@@ -29,8 +34,10 @@ export const FilesTabContent = React.forwardRef(({ files = [], provider, onFileS
             }, onDownload: handleDownload, onRename: handleRename, onDelete: handleDelete, className: "h-full" }) }));
 });
 FilesTabContent.displayName = "FilesTabContent";
-export const SourcesTabContent = React.forwardRef(({ sources = [], className, ...props }, ref) => {
-    return (_jsx("div", { ref: ref, className: cn("space-y-2", className), ...props, children: sources.length === 0 ? (_jsx("div", { className: "flex items-center justify-center h-full min-h-[200px]", children: _jsx("p", { className: "text-paragraph-sm text-muted-foreground", children: "No sources available" }) })) : (sources.map((source) => (_jsx(SourceListItem, { source: source }, source.id)))) }));
+export const SourcesTabContent = React.forwardRef(({ sources, className, ...props }, ref) => {
+    // Use mock data if no sources provided or if empty array
+    const displaySources = sources && sources.length > 0 ? sources : mockSourceData;
+    return (_jsx("div", { ref: ref, className: cn("space-y-2", className), ...props, children: displaySources.map((source) => (_jsx(SourceListItem, { source: source }, source.id))) }));
 });
 SourcesTabContent.displayName = "SourcesTabContent";
 export const DatabaseTabContent = React.forwardRef(({ data, className, ...props }, ref) => {