@townco/ui 0.1.99 → 0.1.101

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

@@ -1,5 +1,6 @@
 import { createLogger } from "@townco/core";
 import { useCallback, useRef } from "react";
+import { generateMessageId } from "../schemas/index.js";
 import { useChatStore } from "../store/chat-store.js";
 const logger = createLogger("use-chat-messages", "debug");
 /**
@@ -61,7 +62,7 @@ export function useChatMessages(client, startSession) {
             });
         }
         // Create assistant message ID outside try block so it's accessible in catch
-        const assistantMessageId = `msg_${Date.now()}_assistant`;
+        const assistantMessageId = generateMessageId("assistant");
         try {
             // Start streaming and track time immediately
             const startTime = Date.now();
@@ -69,7 +70,7 @@ export function useChatMessages(client, startSession) {
             setStreamingStartTime(startTime);
             // Add user message to UI with images
             const userMessage = {
-                id: `msg_${Date.now()}_user`,
+                id: generateMessageId("user"),
                 role: "user",
                 content: content,
                 timestamp: new Date().toISOString(),
@@ -333,7 +334,7 @@ export function useChatMessages(client, startSession) {
             messageRole: targetMessage?.role,
         });
         // Create assistant message ID outside try block so it's accessible in catch
-        const assistantMessageId = `msg_${Date.now()}_assistant`;
+        const assistantMessageId = generateMessageId("assistant");
         try {
             // Start streaming and track time
             const startTime = Date.now();
@@ -343,7 +344,7 @@ export function useChatMessages(client, startSession) {
             truncateMessagesFrom(targetArrayIndex);
             // Add the new user message to UI
             const userMessage = {
-                id: `msg_${Date.now()}_user`,
+                id: generateMessageId("user"),
                 role: "user",
                 content: newContent,
                 timestamp: new Date().toISOString(),

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

@@ -578,3 +578,9 @@ export declare const ConnectionStatus: z.ZodEnum<{
     error: "error";
 }>;
 export type ConnectionStatus = z.infer<typeof ConnectionStatus>;
+/**
+ * Generate a unique message ID.
+ * Uses timestamp + counter + random suffix to ensure uniqueness even when
+ * multiple messages are created in the same millisecond (e.g., user + assistant).
+ */
+export declare function generateMessageId(role: "user" | "assistant" | "system"): string;

package/dist/core/schemas/chat.js

@@ -103,3 +103,24 @@ export const ConnectionStatus = z.enum([
     "connected",
     "error",
 ]);
+/**
+ * Counter for generating unique message IDs within the same millisecond
+ */
+let messageIdCounter = 0;
+let lastMessageIdTimestamp = 0;
+/**
+ * Generate a unique message ID.
+ * Uses timestamp + counter + random suffix to ensure uniqueness even when
+ * multiple messages are created in the same millisecond (e.g., user + assistant).
+ */
+export function generateMessageId(role) {
+    const now = Date.now();
+    // Reset counter if we're in a new millisecond
+    if (now !== lastMessageIdTimestamp) {
+        messageIdCounter = 0;
+        lastMessageIdTimestamp = now;
+    }
+    const counter = messageIdCounter++;
+    const random = Math.random().toString(36).substring(2, 7);
+    return `msg_${now}_${counter}_${random}_${role}`;
+}

package/dist/core/store/chat-store.d.ts

@@ -1,7 +1,7 @@
 import { type LogEntry } from "@townco/core";
 import type { TodoItem } from "../../gui/components/TodoListItem.js";
 import type { HookNotification } from "../../sdk/schemas/message.js";
-import type { ConnectionStatus, DisplayMessage, InputState } from "../schemas/index.js";
+import { type ConnectionStatus, type DisplayMessage, type InputState } from "../schemas/index.js";
 import type { Source } from "../schemas/source.js";
 import type { ToolCall, ToolCallUpdate } from "../schemas/tool-call.js";
 /**

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

@@ -1,5 +1,6 @@
 import { createLogger } from "@townco/core";
 import { create } from "zustand";
+import { generateMessageId, } from "../schemas/index.js";
 import { mergeToolCallUpdate } from "../schemas/tool-call.js";
 const logger = createLogger("chat-store", "debug");
 // Constants to avoid creating new empty arrays
@@ -245,7 +246,7 @@ export const useChatStore = create((set) => ({
             // This happens during session replay when a tool call comes before any text
             logger.debug("No assistant message found, creating one for tool call at position 0");
             const newMessage = {
-                id: `msg_${Date.now()}_assistant`,
+                id: generateMessageId("assistant"),
                 role: "assistant",
                 content: "",
                 timestamp: new Date().toISOString(),
@@ -317,7 +318,7 @@ export const useChatStore = create((set) => ({
                 contentPosition: 0, // Hook at the start of the message
             };
             const newMessage = {
-                id: `msg_${Date.now()}_assistant`,
+                id: generateMessageId("assistant"),
                 role: "assistant",
                 content: "",
                 timestamp: new Date().toISOString(),
@@ -410,7 +411,7 @@ export const useChatStore = create((set) => ({
             // No assistant message exists yet - create one with the sources
             logger.debug("No assistant message found, creating one for sources");
             const newMessage = {
-                id: `msg_${Date.now()}_assistant`,
+                id: generateMessageId("assistant"),
                 role: "assistant",
                 content: "",
                 timestamp: new Date().toISOString(),

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

@@ -1,4 +1,5 @@
 import * as React from "react";
+import type { AcpClient } from "../../sdk/client/index.js";
 import type { FileSystemProvider } from "../types/filesystem.js";
 import { type SourceItem } from "./SourceListItem.js";
 import type { TodoItem } from "./TodoListItem.js";
@@ -13,6 +14,9 @@ export declare const TodoTabContent: React.ForwardRefExoticComponent<TodoTabCont
 export interface FilesTabContentProps extends React.HTMLAttributes<HTMLDivElement> {
     files?: string[];
     provider?: FileSystemProvider;
+    sessionId?: string | null | undefined;
+    agentApiUrl?: string | undefined;
+    client?: AcpClient | null | undefined;
     onFileSelect?: (filePath: string) => void;
 }
 export declare const FilesTabContent: React.ForwardRefExoticComponent<FilesTabContentProps & React.RefAttributes<HTMLDivElement>>;

package/dist/gui/components/ChatPanelTabContent.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Globe } from "lucide-react";
 import * as React from "react";
 import { cn } from "../lib/utils.js";
+import { SandboxFileSystemProvider } from "../providers/SandboxFileSystemProvider.js";
 import { FileSystemView } from "./FileSystemView.js";
 import { SourceListItem } from "./SourceListItem.js";
 import { TodoList } from "./TodoList.js";
@@ -9,26 +10,69 @@ export const TodoTabContent = React.forwardRef(({ todos = [], className, ...prop
     return (_jsx("div", { ref: ref, className: cn("h-full", className), ...props, children: _jsx(TodoList, { todos: todos, className: "h-full" }) }));
 });
 TodoTabContent.displayName = "TodoTabContent";
-export const FilesTabContent = React.forwardRef(({ files = [], provider, onFileSelect, className, ...props }, ref) => {
-    // Stub handlers for the overflow menu actions
-    // Replace these with real implementations when connecting to actual filesystem
-    const handleDownload = React.useCallback((item) => {
-        console.log("Download:", item.name);
-        // TODO: Implement download logic
+export const FilesTabContent = React.forwardRef(({ files = [], provider, sessionId, agentApiUrl, client, onFileSelect, className, ...props }, ref) => {
+    const [refreshKey, setRefreshKey] = React.useState(0);
+    const refreshDebounceRef = React.useRef(undefined);
+    // Debounced refresh to coalesce rapid file changes
+    const scheduleRefresh = React.useCallback(() => {
+        if (refreshDebounceRef.current) {
+            clearTimeout(refreshDebounceRef.current);
+        }
+        refreshDebounceRef.current = setTimeout(() => {
+            setRefreshKey((prev) => prev + 1);
+        }, 300); // 300ms debounce
     }, []);
-    const handleRename = React.useCallback((item) => {
-        console.log("Rename:", item.name);
-        // TODO: Implement rename logic
-    }, []);
-    const handleDelete = React.useCallback((item) => {
-        console.log("Delete:", item.name);
-        // TODO: Implement delete logic
-    }, []);
-    return (_jsx("div", { ref: ref, className: cn("h-full", className), ...props, children: _jsx(FileSystemView, { ...(provider && { provider }), onItemSelect: (item) => {
+    // Subscribe to file system change events from SSE
+    React.useEffect(() => {
+        if (!sessionId || !client)
+            return;
+        const unsubscribe = client.onFileSystemChange(sessionId, (event) => {
+            console.log("Files changed:", event);
+            scheduleRefresh();
+        });
+        return unsubscribe;
+    }, [sessionId, client, scheduleRefresh]);
+    // Create sandbox provider if sessionId and agentApiUrl are provided
+    const sandboxProvider = React.useMemo(() => {
+        if (provider)
+            return provider;
+        if (sessionId && agentApiUrl) {
+            return new SandboxFileSystemProvider({
+                sessionId,
+                apiUrl: agentApiUrl,
+            });
+        }
+        return undefined;
+    }, [provider, sessionId, agentApiUrl]); // Add refreshKey to trigger provider recreation
+    // Handler for downloading files from the sandbox
+    const handleDownload = React.useCallback(async (item) => {
+        if (item.type === "folder") {
+            console.warn("Cannot download folders");
+            return;
+        }
+        if (!sessionId || !agentApiUrl) {
+            console.error("Cannot download: missing sessionId or agentApiUrl");
+            return;
+        }
+        try {
+            const url = `${agentApiUrl}/sandbox/download?sessionId=${encodeURIComponent(sessionId)}&path=${encodeURIComponent(item.path || item.name)}`;
+            // Create a temporary anchor element to trigger the download
+            const a = document.createElement("a");
+            a.href = url;
+            a.download = item.name;
+            document.body.appendChild(a);
+            a.click();
+            document.body.removeChild(a);
+        }
+        catch (error) {
+            console.error("Failed to download file:", error);
+        }
+    }, [sessionId, agentApiUrl]);
+    return (_jsx("div", { ref: ref, className: cn("h-full", className), ...props, children: _jsx(FileSystemView, { ...(sandboxProvider && { provider: sandboxProvider }), onItemSelect: (item) => {
                 if (item.type === "file" && onFileSelect) {
                     onFileSelect(item.path || item.name);
                 }
-            }, onDownload: handleDownload, onRename: handleRename, onDelete: handleDelete, className: "h-full" }) }));
+            }, onDownload: handleDownload, className: "h-full" }, refreshKey) }));
 });
 FilesTabContent.displayName = "FilesTabContent";
 export const SourcesTabContent = React.forwardRef(({ sources = [], highlightedSourceId, className, ...props }, ref) => {

package/dist/gui/components/ChatView.js

@@ -56,10 +56,10 @@ function ChatInputWithAttachments({ client, startSession, placeholder, commandMe
         ] }));
 }
 // Controlled Tabs component for the aside panel
-function AsideTabs({ todos, sources, tools, mcps, subagents, }) {
+function AsideTabs({ todos, sources, tools, mcps, subagents, sessionId, agentApiUrl, client, }) {
     const { activeTab, setActiveTab } = ChatLayout.useChatLayoutContext();
     return (_jsxs(Tabs, { value: activeTab, onValueChange: (value) => setActiveTab(value), className: "flex flex-col h-full", children: [
-            _jsx("div", { className: cn("border-b border-border bg-card", "px-4 py-2 h-16", "flex items-center", "sticky top-0 z-10 shrink-0"), children: _jsx(PanelTabsHeader, { showIcons: true, visibleTabs: ["todo", "files", "sources", "settings"], variant: "compact" }) }), _jsx(TabsContent, { value: "todo", className: "flex-1 p-4 mt-0 overflow-y-auto", children: _jsx(TodoTabContent, { todos: todos }) }), _jsx(TabsContent, { value: "files", className: "flex-1 p-4 mt-0 overflow-y-auto", children: _jsx(FilesTabContent, {}) }), _jsx(TabsContent, { value: "sources", className: "flex-1 p-4 mt-0 overflow-y-auto", children: _jsx(SourcesTabContent, { sources: sources }) }), _jsx(TabsContent, { value: "settings", className: "flex-1 p-4 mt-0 overflow-y-auto", children: _jsx(SettingsTabContent, { tools: tools ?? [], mcps: mcps ?? [], subagents: subagents ?? [] }) })
+            _jsx("div", { className: cn("border-b border-border bg-card", "px-4 py-2 h-16", "flex items-center", "sticky top-0 z-10 shrink-0"), children: _jsx(PanelTabsHeader, { showIcons: true, visibleTabs: ["todo", "files", "sources", "settings"], variant: "compact" }) }), _jsx(TabsContent, { value: "todo", className: "flex-1 p-4 mt-0 overflow-y-auto", children: _jsx(TodoTabContent, { todos: todos }) }), _jsx(TabsContent, { value: "files", className: "flex-1 p-4 mt-0 overflow-y-auto", children: _jsx(FilesTabContent, { sessionId: sessionId, agentApiUrl: agentApiUrl, client: client }) }), _jsx(TabsContent, { value: "sources", className: "flex-1 p-4 mt-0 overflow-y-auto", children: _jsx(SourcesTabContent, { sources: sources }) }), _jsx(TabsContent, { value: "settings", className: "flex-1 p-4 mt-0 overflow-y-auto", children: _jsx(SettingsTabContent, { tools: tools ?? [], mcps: mcps ?? [], subagents: subagents ?? [] }) })
         ] }));
 }
 // Header component that uses ChatLayout context (must be inside ChatLayout.Root)
@@ -350,7 +350,7 @@ export function ChatView({ client, initialSessionId, error: initError, debuggerU
                                                                 ] })) }) }, message.id));
                                                 }) })) }), _jsx(ChatLayout.Footer, { children: _jsx(ChatInputWithAttachments, { client: client, startSession: startSession, placeholder: placeholder, commandMenuItems: commandMenuItems, onCancel: cancel, promptParameters: agentPromptParameters }) })
                                     ] })
-                            ] }), _jsx(ChatLayout.Aside, { breakpoint: "md", children: _jsx(AsideTabs, { todos: todos, sources: allSources, tools: agentTools, mcps: agentMcps, subagents: agentSubagents }) })
+                            ] }), _jsx(ChatLayout.Aside, { breakpoint: "md", children: _jsx(AsideTabs, { todos: todos, sources: allSources, tools: agentTools, mcps: agentMcps, subagents: agentSubagents, sessionId: sessionId, agentApiUrl: client?.getBaseUrl(), client: client }) })
                     ] }) })
         ] }));
 }

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

@@ -11,7 +11,5 @@ export interface FileSystemItemProps {
     selectedId?: string;
     isDropTarget?: boolean;
     onDownload?: (item: FileSystemItemType) => void;
-    onRename?: (item: FileSystemItemType) => void;
-    onDelete?: (item: FileSystemItemType) => void;
 }
-export declare function FileSystemItem({ item, level, onSelect, selectedId, isDropTarget, onDownload, onRename, onDelete }: FileSystemItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function FileSystemItem({ item, level, onSelect, selectedId, isDropTarget, onDownload }: FileSystemItemProps): import("react/jsx-runtime").JSX.Element;

package/dist/gui/components/FileSystemItem.js

@@ -7,8 +7,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ChevronDown, FileCode, Folder, FolderOpen, MoreVertical, } from "lucide-react";
 import * as React from "react";
 import { cn } from "../lib/utils.js";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, } from "./DropdownMenu.js";
-export function FileSystemItem({ item, level = 0, onSelect, selectedId, isDropTarget = false, onDownload, onRename, onDelete, }) {
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from "./DropdownMenu.js";
+export function FileSystemItem({ item, level = 0, onSelect, selectedId, isDropTarget = false, onDownload, }) {
     const [isExpanded, setIsExpanded] = React.useState(true);
     const isSelected = selectedId === item.id;
     const handleToggle = () => {
@@ -70,15 +70,9 @@ export function FileSystemItem({ item, level = 0, onSelect, selectedId, isDropTa
                                     // Force visible when menu is open
                                     "data-[state=open]:opacity-100"), onClick: (e) => {
                                         e.stopPropagation();
-                                    }, "aria-label": "More options", type: "button", tabIndex: -1, children: _jsx(MoreVertical, { className: "size-4" }) }) }), _jsxs(DropdownMenuContent, { align: "end", side: "bottom", sideOffset: 5, alignOffset: 0, collisionPadding: 8, className: "w-40 z-[100]", onClick: (e) => e.stopPropagation(), children: [onDownload && (_jsx(DropdownMenuItem, { onClick: (e) => {
-                                            e.stopPropagation();
-                                            onDownload(item);
-                                        }, children: "Download" })), onRename && (_jsx(DropdownMenuItem, { onClick: (e) => {
-                                            e.stopPropagation();
-                                            onRename(item);
-                                        }, children: "Rename" })), (onDownload || onRename) && onDelete && _jsx(DropdownMenuSeparator, {}), onDelete && (_jsx(DropdownMenuItem, { className: "text-destructive focus:text-destructive focus:bg-muted", onClick: (e) => {
-                                            e.stopPropagation();
-                                            onDelete(item);
-                                        }, children: _jsx("span", { className: "text-paragraph-sm", children: "Delete" }) }))] })
-                        ] }), item.type === "folder" && (_jsx("div", { className: "shrink-0 size-4 flex items-center justify-center text-muted-foreground", children: _jsx(ChevronDown, { className: cn("size-4 transition-transform", !isExpanded && "-rotate-90") }) }))] }), item.type === "folder" && isExpanded && item.children && (_jsx("div", { className: "flex flex-col", children: item.children.map((child) => (_jsx(FileSystemItem, { item: child, level: level + 1, ...(onSelect && { onSelect }), ...(selectedId && { selectedId }), ...(onDownload && { onDownload }), ...(onRename && { onRename }), ...(onDelete && { onDelete }) }, child.id))) }))] }));
+                                    }, "aria-label": "More options", type: "button", tabIndex: -1, children: _jsx(MoreVertical, { className: "size-4" }) }) }), _jsx(DropdownMenuContent, { align: "end", side: "bottom", sideOffset: 5, alignOffset: 0, collisionPadding: 8, className: "w-40 z-[100]", onClick: (e) => e.stopPropagation(), children: onDownload && (_jsx(DropdownMenuItem, { onClick: (e) => {
+                                        e.stopPropagation();
+                                        onDownload(item);
+                                    }, children: "Download" })) })
+                        ] }), item.type === "folder" && (_jsx("div", { className: "shrink-0 size-4 flex items-center justify-center text-muted-foreground", children: _jsx(ChevronDown, { className: cn("size-4 transition-transform", !isExpanded && "-rotate-90") }) }))] }), item.type === "folder" && isExpanded && item.children && (_jsx("div", { className: "flex flex-col", children: item.children.map((child) => (_jsx(FileSystemItem, { item: child, level: level + 1, ...(onSelect && { onSelect }), ...(selectedId && { selectedId }), ...(onDownload && { onDownload }) }, child.id))) }))] }));
 }

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

@@ -8,7 +8,5 @@ export interface FileSystemViewProps {
     provider?: FileSystemProvider;
     onItemSelect?: (item: FileSystemItemType) => void;
     onDownload?: (item: FileSystemItemType) => void;
-    onRename?: (item: FileSystemItemType) => void;
-    onDelete?: (item: FileSystemItemType) => void;
 }
-export declare function FileSystemView({ className, provider, onItemSelect, onDownload, onRename, onDelete }: FileSystemViewProps): import("react/jsx-runtime").JSX.Element;
+export declare function FileSystemView({ className, provider, onItemSelect, onDownload }: FileSystemViewProps): import("react/jsx-runtime").JSX.Element;

package/dist/gui/components/FileSystemView.js

@@ -3,18 +3,27 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * FileSystemView component - main file tree/manager view
  * Based on shadcn file manager design and Figma specifications
  */
+import { FileText } from "lucide-react";
 import * as React from "react";
 import { MockFileSystemProvider } from "../data/mockFileSystemData.js";
 import { cn } from "../lib/utils.js";
 import { FileSystemItem } from "./FileSystemItem.js";
 // Create a default provider instance outside the component to avoid infinite loops
 const defaultProvider = new MockFileSystemProvider();
-export function FileSystemView({ className, provider = defaultProvider, onItemSelect, onDownload, onRename, onDelete, }) {
+export function FileSystemView({ className, provider = defaultProvider, onItemSelect, onDownload, }) {
     const [items, setItems] = React.useState([]);
     const [selectedId, setSelectedId] = React.useState();
     const [isLoading, setIsLoading] = React.useState(true);
     const [error, setError] = React.useState();
-    // Load root items on mount
+    const [_refreshTrigger, setRefreshTrigger] = React.useState(0);
+    // 60-second polling to refresh file list
+    React.useEffect(() => {
+        const intervalId = setInterval(() => {
+            setRefreshTrigger((prev) => prev + 1);
+        }, 60000); // 60 seconds
+        return () => clearInterval(intervalId);
+    }, []); // Run once on mount
+    // Load root items on mount and when refresh is triggered
     React.useEffect(() => {
         const loadItems = async () => {
             try {
@@ -42,5 +51,10 @@ export function FileSystemView({ className, provider = defaultProvider, onItemSe
     if (error) {
         return (_jsx("div", { className: cn("", className), children: _jsxs("p", { className: "text-sm text-destructive", children: ["Error: ", error] }) }));
     }
-    return (_jsx("div", { className: cn("flex flex-col", className), children: items.length === 0 ? (_jsx("p", { className: "text-sm text-muted-foreground", children: "No items found" })) : (items.map((item) => (_jsx(FileSystemItem, { item: item, onSelect: handleItemSelect, ...(selectedId && { selectedId }), ...(onDownload && { onDownload }), ...(onRename && { onRename }), ...(onDelete && { onDelete }) }, item.id)))) }));
+    if (items.length === 0) {
+        return (_jsxs("div", { className: cn("flex flex-col items-center justify-center h-full text-center py-8 max-w-sm mx-auto", className), children: [
+                _jsx(FileText, { className: "size-8 text-muted-foreground opacity-50 mb-3" }), _jsx("p", { className: "text-paragraph text-muted-foreground", children: "No files yet" }), _jsx("p", { className: "text-paragraph-sm text-muted-foreground/70 mt-1", children: "Files will appear when your agent writes to the sandbox." })
+            ] }));
+    }
+    return (_jsx("div", { className: cn("flex flex-col", className), children: items.map((item) => (_jsx(FileSystemItem, { item: item, onSelect: handleItemSelect, ...(selectedId && { selectedId }), ...(onDownload && { onDownload }) }, item.id))) }));
 }

package/dist/gui/components/HookNotification.js

@@ -21,13 +21,11 @@ function getHookDisplayInfo(hookType, callback, status, action, midTurn) {
         const isMidTurnCompaction = callback === "mid_turn_compaction" || midTurn === true;
         if (isMidTurnCompaction) {
             if (isTriggered) {
-                return { icon: FoldVertical, title: "Compacting Context Mid-Turn..." };
+                return { icon: FoldVertical, title: "Compacting Context..." };
             }
             return {
                 icon: FoldVertical,
-                title: noActionNeeded
-                    ? "Context Check"
-                    : "Context Compacted (Mid-Turn)",
+                title: noActionNeeded ? "Context Check" : "Context Compacted",
             };
         }
         // Regular tool response compaction
@@ -51,6 +49,22 @@ function getHookDisplayInfo(hookType, callback, status, action, midTurn) {
 function formatNumber(num) {
     return num.toLocaleString();
 }
+/**
+ * Format duration for display
+ * Shows seconds with 1 decimal place, then minutes and seconds, then hours
+ */
+function formatDuration(seconds) {
+    if (seconds < 60) {
+        return `${seconds.toFixed(1)}s`;
+    }
+    const hours = Math.floor(seconds / 3600);
+    const mins = Math.floor((seconds % 3600) / 60);
+    const secs = Math.floor(seconds % 60);
+    if (hours > 0) {
+        return `${hours}h ${mins}m ${secs}s`;
+    }
+    return `${mins}m ${secs}s`;
+}
 /**
  * HookNotification component - displays a hook notification inline with messages
  * Shows triggered (loading), completed, or error states
@@ -159,7 +173,10 @@ export function HookNotification({ notification }) {
                                     "Warning"] }), _jsx("div", { className: "text-[11px] text-yellow-700 dark:text-yellow-400", children: truncationWarning })
                         ] })), notification.error && (_jsxs("div", { className: "p-3 border-b border-border last:border-0", children: [
                             _jsx("div", { className: "text-[10px] font-bold text-destructive uppercase tracking-wider mb-1.5 font-sans", children: "Error" }), _jsx("div", { className: "text-[11px] text-destructive font-mono", children: notification.error })
-                        ] })), _jsxs("div", { className: "p-2 bg-muted/50 border-t border-border text-[10px] text-muted-foreground font-sans space-y-0.5", children: [notification.triggeredAt && (_jsxs("div", { children: ["Started:", " ", new Date(notification.triggeredAt).toLocaleTimeString()] })), notification.completedAt && (_jsxs("div", { children: ["Completed:", " ", new Date(notification.completedAt).toLocaleTimeString()] })), notification.triggeredAt && notification.completedAt && (_jsxs("div", { children: ["Duration:", " ", ((notification.completedAt - notification.triggeredAt) /
-                                        1000).toFixed(1), "s"] }))] })
+                        ] })), _jsx("div", { className: "p-2 bg-muted/50 border-t border-border text-[10px] text-muted-foreground font-sans", children: notification.triggeredAt && (_jsxs("div", { className: "flex gap-3 justify-end", children: [
+                                _jsxs("span", { children: ["Started:", " ", new Date(notification.triggeredAt).toLocaleTimeString()] }), notification.completedAt && (_jsxs(_Fragment, { children: [
+                                        _jsx("span", { children: "-" }), _jsxs("span", { children: ["Completed:", " ", new Date(notification.completedAt).toLocaleTimeString()] }), _jsx("span", { children: "-" }), _jsxs("span", { children: ["Duration:", " ", formatDuration((notification.completedAt - notification.triggeredAt) /
+                                                    1000)] })
+                                    ] }))] })) })
                 ] }))] }));
 }

package/dist/gui/components/SourceListItem.js

@@ -12,9 +12,9 @@ export const SourceListItem = React.forwardRef(({ source, isSelected, className,
         // Selected state - matching FileSystemItem
         isSelected && "bg-accent", className), onClick: () => window.open(source.url, "_blank"), ...props, children: [
             _jsx("div", { className: "shrink-0 flex items-center h-5", children: _jsx("div", { className: "relative rounded-[3px] size-4 overflow-hidden bg-muted", children: source.favicon ? (_jsx("img", { alt: source.sourceName, className: "size-full object-cover", src: source.favicon })) : (_jsx("div", { className: "size-full bg-muted" })) }) }), _jsxs("div", { className: "flex flex-1 flex-col gap-1 min-w-0", children: [
-                    _jsxs("div", { className: "text-paragraph-sm text-foreground", children: [
+                    _jsxs("div", { className: "text-paragraph-sm text-foreground truncate", children: [
                             _jsx("span", { className: "font-medium", children: source.sourceName }), _jsxs("span", { className: "text-muted-foreground", children: [" \u00B7 ", source.title] })
-                        ] }), _jsx("p", { className: "text-paragraph-sm text-muted-foreground line-clamp-3", children: source.snippet })
+                        ] }), _jsx("p", { className: "text-paragraph-sm text-muted-foreground line-clamp-3 break-all", children: source.snippet })
                 ] })
         ] }));
 });

package/dist/gui/components/TodoListItem.js

@@ -9,14 +9,14 @@ export const TodoListItem = React.forwardRef(({ todo, className, ...props }, ref
     /* biome-ignore lint/a11y/useSemanticElements: Keeping div for consistency with FileSystemItem pattern */
     _jsxs("div", { ref: ref, className: cn(
         // Base styles matching FileSystemItem
-        "group flex items-center gap-2 p-2 rounded-md cursor-pointer transition-colors text-paragraph-sm", 
+        "group flex items-start gap-2 p-2 rounded-md cursor-pointer transition-colors text-paragraph-sm", 
         // Hover state - matching FileSystemItem
         "hover:bg-accent-hover", 
         // Focus state - matching FileSystemItem
         "focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-border-dark", 
         // Selected state (if needed later)
         isSelected && "bg-accent", className), role: "button", tabIndex: 0, ...props, children: [
-            _jsx("div", { className: "shrink-0 size-4 flex items-center justify-center text-foreground", children: todo.status === "completed" ? (_jsx(CircleCheck, { className: "size-4 text-muted-foreground" })) : todo.status === "in_progress" ? (_jsx("div", { className: "size-2.5 rounded-full bg-foreground animate-pulse-scale" })) : (_jsx(Circle, { className: "size-4 text-foreground" })) }), _jsx("p", { className: cn("flex-1 text-foreground", 
+            _jsx("div", { className: "shrink-0 flex items-center justify-center w-4 h-5 mt-0.5", children: todo.status === "completed" ? (_jsx(CircleCheck, { className: "size-4 text-muted-foreground" })) : todo.status === "in_progress" ? (_jsx("div", { className: "size-2.5 rounded-full bg-foreground animate-pulse-scale" })) : (_jsx(Circle, { className: "size-4 text-foreground" })) }), _jsx("p", { className: cn("flex-1 text-foreground", 
                 // Completed state: strikethrough + muted color
                 isCompleted && "line-through text-muted-foreground", 
                 // In-progress state: medium weight for emphasis

package/dist/gui/components/ToolOperation.js

@@ -1,7 +1,7 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import JsonView from "@uiw/react-json-view";
-import { AlertCircle, BrainCircuit, CheckSquare, ChevronDown, ChevronRight, CircleDot, Cloud, Edit, FileText, FoldVertical, Globe, Image, Link, ListVideo, ScissorsLineDashed, Search, Wrench, } from "lucide-react";
-import React, { useEffect, useState } from "react";
+import { AlertCircle, BrainCircuit, CheckSquare, ChevronDown, ChevronRight, CircleDot, Cloud, Edit, FileText, FoldVertical, Globe, Image, Link, ListVideo, ScissorsLineDashed, Search, Terminal, Wrench, } from "lucide-react";
+import React, { useEffect, useRef, useState } from "react";
 import { getGroupDisplayState, getToolCallDisplayState, getToolCallStateVerbiage, isPreliminaryToolCall, } from "../../core/utils/tool-call-state.js";
 import { generateSmartSummary } from "../../core/utils/tool-summary.js";
 import * as ChatLayout from "./ChatLayout.js";
@@ -25,6 +25,56 @@ const ICON_MAP = {
     BrainCircuit: BrainCircuit,
     CircleDot: CircleDot,
 };
+/**
+ * Hook to track elapsed time since a given start timestamp
+ * Returns elapsed time in seconds, updating every 100ms
+ */
+function useElapsedTime(startTime, isRunning) {
+    const [elapsed, setElapsed] = useState(0);
+    const intervalRef = useRef(null);
+    useEffect(() => {
+        if (!isRunning || !startTime) {
+            setElapsed(0);
+            return;
+        }
+        const updateElapsed = () => {
+            setElapsed((Date.now() - startTime) / 1000);
+        };
+        // Update immediately
+        updateElapsed();
+        // Update every 100ms for smooth display
+        intervalRef.current = setInterval(updateElapsed, 100);
+        return () => {
+            if (intervalRef.current) {
+                clearInterval(intervalRef.current);
+            }
+        };
+    }, [startTime, isRunning]);
+    return elapsed;
+}
+/**
+ * Format elapsed time for display
+ * Shows seconds with 1 decimal place, then minutes and seconds, then hours
+ */
+function formatElapsedTime(seconds) {
+    if (seconds < 60) {
+        return `${seconds.toFixed(1)}s`;
+    }
+    const hours = Math.floor(seconds / 3600);
+    const mins = Math.floor((seconds % 3600) / 60);
+    const secs = Math.floor(seconds % 60);
+    if (hours > 0) {
+        return `${hours}h ${mins}m ${secs}s`;
+    }
+    return `${mins}m ${secs}s`;
+}
+/**
+ * Component to display running duration for a tool call
+ */
+function RunningDuration({ startTime }) {
+    const elapsed = useElapsedTime(startTime, true);
+    return (_jsx("span", { className: "text-xs text-text-secondary/70 tabular-nums ml-1", children: formatElapsedTime(elapsed) }));
+}
 /**
  * CompactionDetails component - shows detailed stats when tool response was compacted
  */
@@ -179,13 +229,24 @@ export function ToolOperation({ toolCalls, isGrouped = false, autoMinimize = tru
     const displayText = getDisplayText();
     // For preliminary/selecting states, show simple non-expandable text
     if (isSelecting && !isGrouped) {
-        return (_jsx("div", { className: "flex flex-col my-4 rounded-md px-1 -mx-1 w-fit", children: _jsx("span", { className: "text-paragraph-sm text-text-secondary/50", children: displayText }) }));
+        return (_jsx("div", { className: "flex flex-col my-4 rounded-md px-1 -mx-1 w-fit", children: _jsxs("div", { className: "flex items-center gap-1.5", children: [
+                    _jsx("div", { className: "text-text-secondary/70", children: _jsx(IconComponent, { className: "h-3 w-3" }) }), _jsxs("span", { className: "text-paragraph-xs text-text-muted", children: [displayText, singleToolCall?.startedAt && (_jsx(RunningDuration, { startTime: singleToolCall.startedAt }))] })
+                ] }) }));
     }
     // If it's a grouped preliminary (selecting) state
     if (isSelecting && isGrouped) {
+        // Find earliest start time among selecting tools
+        const selectingStartTime = (() => {
+            const startTimes = toolCalls
+                .map((tc) => tc.startedAt)
+                .filter((t) => t != null);
+            if (startTimes.length === 0)
+                return null;
+            return Math.min(...startTimes);
+        })();
         return (_jsxs("div", { className: "flex flex-col my-4 rounded-md px-1 -mx-1 w-fit", children: [
                 _jsxs("div", { className: "flex items-center gap-1.5", children: [
-                        _jsx("div", { className: "text-text-secondary/70", children: _jsx(ListVideo, { className: "h-3 w-3" }) }), _jsx("span", { className: "text-paragraph-sm text-text-secondary/70", children: "Selecting tools" }), _jsx("span", { className: "text-[10px] bg-muted px-1.5 py-0.5 rounded text-text-secondary/70", children: toolCalls.length })
+                        _jsx("div", { className: "text-text-secondary/70", children: _jsx(ListVideo, { className: "h-3 w-3" }) }), _jsx("span", { className: "text-paragraph-sm text-text-secondary/70", children: "Selecting tools" }), selectingStartTime && (_jsx(RunningDuration, { startTime: selectingStartTime })), _jsx("span", { className: "text-[10px] bg-muted px-1.5 py-0.5 rounded text-text-secondary/70", children: toolCalls.length })
                     ] }), _jsx("span", { className: "text-paragraph-sm text-text-secondary/70 pl-4.5", children: displayText })
             ] }));
     }
@@ -193,7 +254,19 @@ export function ToolOperation({ toolCalls, isGrouped = false, autoMinimize = tru
     return (_jsxs("div", { className: "flex flex-col my-4", children: [
             _jsxs("button", { type: "button", className: "flex flex-col items-start gap-0.5 cursor-pointer bg-transparent border-none p-0 text-left group w-fit rounded-md px-1 -mx-1", onClick: handleHeaderClick, "aria-expanded": isTodoWrite ? undefined : isExpanded, children: [
                     _jsxs("div", { className: "flex items-center gap-1.5", children: [
-                            _jsx("div", { className: "text-text-secondary/70 group-hover:text-text-secondary transition-colors", children: _jsx(IconComponent, { className: "h-3 w-3" }) }), _jsxs("span", { className: "text-paragraph-sm text-text-secondary/70 group-hover:text-text-secondary transition-colors", children: [isGrouped && _jsx("span", { className: "mr-1", children: "Parallel operation" }), !isGrouped && displayText] }), isGrouped && (_jsx("span", { className: "text-[10px] bg-muted px-1.5 py-0.5 rounded text-text-secondary/70", children: toolCalls.length })), isFailed && (_jsx("span", { title: isGrouped
+                            _jsx("div", { className: "text-text-secondary/70 group-hover:text-text-secondary transition-colors", children: _jsx(IconComponent, { className: "h-3 w-3" }) }), _jsxs("span", { className: "text-paragraph-sm text-text-secondary/70 group-hover:text-text-secondary transition-colors", children: [isGrouped && _jsx("span", { className: "mr-1", children: "Parallel operation" }), !isGrouped && displayText] }), !isGrouped &&
+                                singleToolCall?.startedAt &&
+                                displayState === "executing" && (_jsx(RunningDuration, { startTime: singleToolCall.startedAt })), isGrouped &&
+                                displayState === "executing" &&
+                                (() => {
+                                    const startTimes = toolCalls
+                                        .map((tc) => tc.startedAt)
+                                        .filter((t) => t != null);
+                                    if (startTimes.length === 0)
+                                        return null;
+                                    const earliestStart = Math.min(...startTimes);
+                                    return _jsx(RunningDuration, { startTime: earliestStart });
+                                })(), isGrouped && (_jsx("span", { className: "text-[10px] bg-muted px-1.5 py-0.5 rounded text-text-secondary/70", children: toolCalls.length })), isFailed && (_jsx("span", { title: isGrouped
                                     ? `${toolCalls.filter((tc) => tc.status === "failed").length} of ${toolCalls.length} operations failed`
                                     : singleToolCall?.error || "Operation failed", children: _jsx(AlertCircle, { className: "h-3 w-3 text-destructive" }) })), isGrouped && groupHasCompaction && (_jsx(TooltipProvider, { delayDuration: 0, children: _jsxs(Tooltip, { children: [
                                         _jsx(TooltipTrigger, { asChild: true, children: _jsx("span", { children: groupHasTruncation ? (_jsx(ScissorsLineDashed, { className: "h-3 w-3 text-destructive" })) : (_jsx(FoldVertical, { className: "h-3 w-3 text-text-secondary/70" })) }) }), _jsx(TooltipContent, { children: groupHasTruncation
@@ -271,11 +344,12 @@ function GroupedToolCallItem({ toolCall, hookNotification, }) {
         hookNotification?.metadata?.action === "compacted_then_truncated" ||
         toolCall._meta?.compactionAction === "truncated");
     const isFailed = toolCall.status === "failed";
+    const isRunning = toolCall.status === "pending" || toolCall.status === "in_progress";
     if (isSubagentCall) {
         // Render subagent with clickable header and SubAgentDetails component
         return (_jsxs("div", { className: "flex flex-col ml-5", children: [
                 _jsxs("button", { type: "button", className: "flex items-center gap-1.5 cursor-pointer bg-transparent border-none p-0 text-left group w-fit", onClick: () => setIsExpanded(!isExpanded), "aria-expanded": isExpanded, children: [
-                        _jsx("div", { className: "text-text-secondary/70 group-hover:text-text-secondary transition-colors", children: _jsx(CircleDot, { className: "h-3 w-3" }) }), _jsx("span", { className: "text-paragraph-sm text-text-secondary/70 group-hover:text-text-secondary transition-colors", children: toolCall.rawInput?.agentName || "Subagent" }), isFailed && (_jsx("span", { title: toolCall.error || "Operation failed", children: _jsx(AlertCircle, { className: "h-3 w-3 text-destructive" }) })), hasCompaction && (_jsx(TooltipProvider, { delayDuration: 0, children: _jsxs(Tooltip, { children: [
+                        _jsx("div", { className: "text-text-secondary/70 group-hover:text-text-secondary transition-colors", children: _jsx(CircleDot, { className: "h-3 w-3" }) }), _jsx("span", { className: "text-paragraph-sm text-text-secondary/70 group-hover:text-text-secondary transition-colors", children: toolCall.rawInput?.agentName || "Subagent" }), isRunning && toolCall.startedAt && (_jsx(RunningDuration, { startTime: toolCall.startedAt })), isFailed && (_jsx("span", { title: toolCall.error || "Operation failed", children: _jsx(AlertCircle, { className: "h-3 w-3 text-destructive" }) })), hasCompaction && (_jsx(TooltipProvider, { delayDuration: 0, children: _jsxs(Tooltip, { children: [
                                     _jsx(TooltipTrigger, { asChild: true, children: _jsx("span", { children: isTruncation ? (_jsx(ScissorsLineDashed, { className: "h-3 w-3 text-destructive" })) : (_jsx(FoldVertical, { className: "h-3 w-3 text-text-secondary/70" })) }) }), _jsx(TooltipContent, { children: (() => {
                                             const meta = toolCall._meta;
                                             const percentage = meta?.originalTokens && meta?.finalTokens
@@ -297,7 +371,7 @@ function GroupedToolCallItem({ toolCall, hookNotification, }) {
     // Regular tool call - collapsible with clickable header
     return (_jsxs("div", { className: "flex flex-col ml-5", children: [
             _jsxs("button", { type: "button", className: "flex items-center gap-1.5 cursor-pointer bg-transparent border-none p-0 text-left group w-fit", onClick: () => setIsExpanded(!isExpanded), "aria-expanded": isExpanded, children: [
-                    _jsx("span", { className: "text-paragraph-sm text-text-secondary/70 group-hover:text-text-secondary transition-colors", children: toolCall.prettyName || toolCall.title }), isFailed && (_jsx("span", { title: toolCall.error || "Operation failed", children: _jsx(AlertCircle, { className: "h-3 w-3 text-destructive" }) })), hasCompaction && (_jsx(TooltipProvider, { delayDuration: 0, children: _jsxs(Tooltip, { children: [
+                    _jsx("span", { className: "text-paragraph-sm text-text-secondary/70 group-hover:text-text-secondary transition-colors", children: toolCall.prettyName || toolCall.title }), isRunning && toolCall.startedAt && (_jsx(RunningDuration, { startTime: toolCall.startedAt })), isFailed && (_jsx("span", { title: toolCall.error || "Operation failed", children: _jsx(AlertCircle, { className: "h-3 w-3 text-destructive" }) })), hasCompaction && (_jsx(TooltipProvider, { delayDuration: 0, children: _jsxs(Tooltip, { children: [
                                 _jsx(TooltipTrigger, { asChild: true, children: _jsx("span", { children: isTruncation ? (_jsx(ScissorsLineDashed, { className: "h-3 w-3 text-destructive" })) : (_jsx(FoldVertical, { className: "h-3 w-3 text-text-secondary/70" })) }) }), _jsx(TooltipContent, { children: (() => {
                                         const meta = toolCall._meta;
                                         const percentage = meta?.originalTokens && meta?.finalTokens
@@ -315,11 +389,54 @@ function GroupedToolCallItem({ toolCall, hookNotification, }) {
                             ] }) })), _jsx(ChevronDown, { className: `h-3 w-3 text-text-secondary/70 group-hover:text-text-secondary transition-colors transition-transform duration-200 ${isExpanded ? "rotate-180" : ""}` })
                 ] }), isExpanded && (_jsx("div", { className: "mt-1", children: _jsx(ToolOperationDetails, { toolCall: toolCall, ...(hookNotification ? { hookNotification } : {}) }) }))] }));
 }
+/**
+ * Helper to parse E2B sandbox output into structured parts
+ */
+function parseSandboxOutput(text) {
+    let stdout = "";
+    let stderr = "";
+    let error = "";
+    // Split by [stderr] and [error] markers
+    const stderrMatch = text.match(/\[stderr\]\n?([\s\S]*?)(?=\[error\]|$)/);
+    const errorMatch = text.match(/\[error\]\s*([\s\S]*?)$/);
+    if (stderrMatch?.[1]) {
+        stderr = stderrMatch[1].trim();
+    }
+    if (errorMatch?.[1]) {
+        error = errorMatch[1].trim();
+    }
+    // stdout is everything before [stderr] or [error]
+    const firstMarkerIndex = Math.min(text.includes("[stderr]") ? text.indexOf("[stderr]") : text.length, text.includes("[error]") ? text.indexOf("[error]") : text.length);
+    stdout = text.substring(0, firstMarkerIndex).trim();
+    return { stdout, stderr, error };
+}
+/**
+ * Check if tool is an E2B sandbox code execution tool
+ */
+function isSandboxCodeTool(toolTitle) {
+    return toolTitle === "Sandbox_RunCode" || toolTitle === "Sandbox_RunBash";
+}
+/**
+ * Console tabs component for sandbox output - mimics browser console
+ */
+function SandboxConsoleTabs({ stdout, stderr, }) {
+    const [activeTab, setActiveTab] = useState(stderr ? "stderr" : "stdout");
+    return (_jsxs("div", { className: "mx-3 mb-3 border border-border rounded-md overflow-hidden bg-zinc-950 dark:bg-zinc-950", children: [
+            _jsxs("div", { className: "flex border-b border-zinc-800 bg-zinc-900", children: [
+                    _jsx("button", { type: "button", onClick: () => setActiveTab("stdout"), className: `px-3 py-1.5 text-[11px] font-mono transition-colors border-b-2 ${activeTab === "stdout"
+                            ? "text-zinc-100 border-zinc-100 bg-zinc-800"
+                            : "text-zinc-500 border-transparent hover:text-zinc-300"}`, children: "stdout" }), _jsxs("button", { type: "button", onClick: () => setActiveTab("stderr"), className: `px-3 py-1.5 text-[11px] font-mono transition-colors border-b-2 flex items-center gap-1.5 ${activeTab === "stderr"
+                            ? "text-zinc-100 border-zinc-100 bg-zinc-800"
+                            : "text-zinc-500 border-transparent hover:text-zinc-300"}`, children: ["stderr", stderr && _jsx("span", { className: "w-1.5 h-1.5 rounded-full bg-red-500" })] })
+                ] }), _jsxs("div", { className: "p-3 max-h-[300px] overflow-auto", children: [activeTab === "stdout" && (_jsx("pre", { className: "whitespace-pre-wrap font-mono text-[11px] text-zinc-300", children: stdout || (_jsx("span", { className: "text-zinc-600 italic", children: "(no output)" })) })), activeTab === "stderr" && (_jsx("pre", { className: "whitespace-pre-wrap font-mono text-[11px] text-red-400", children: stderr || (_jsx("span", { className: "text-zinc-600 italic", children: "(no errors)" })) }))] })
+        ] }));
+}
 /**
  * Component to display detailed tool call information
  */
 function ToolOperationDetails({ toolCall, hookNotification, }) {
     const { resolvedTheme } = useTheme();
+    const [showLogs, setShowLogs] = useState(false);
     // Don't show details for preliminary tool calls
     if (isPreliminaryToolCall(toolCall)) {
         return (_jsx("div", { className: "text-paragraph-sm text-text-secondary/70 ml-2", children: getToolCallStateVerbiage(toolCall) }));
@@ -359,8 +476,8 @@ function ToolOperationDetails({ toolCall, hookNotification, }) {
                     _jsx("div", { className: "text-[10px] font-bold text-text-secondary uppercase tracking-wider mb-1.5 font-sans", children: "Files" }), _jsx("ul", { className: "space-y-1", children: toolCall.locations.map((loc) => (_jsxs("li", { className: "font-mono text-[11px] text-foreground bg-muted px-1.5 py-0.5 rounded w-fit", children: [loc.path, loc.line !== null && loc.line !== undefined && `:${loc.line}`] }, `${loc.path}:${loc.line ?? ""}`))) })
                 ] })), toolCall.rawInput && Object.keys(toolCall.rawInput).length > 0 && (_jsxs("div", { className: "p-3 border-b border-border", children: [
                     _jsx("div", { className: "text-[10px] font-bold text-text-secondary uppercase tracking-wider mb-1.5 font-sans", children: "Input" }), _jsx("div", { className: "text-[11px] font-mono text-foreground", children: _jsx(JsonView, { value: toolCall.rawInput, collapsed: false, displayDataTypes: false, displayObjectSize: false, enableClipboard: true, shortenTextAfterLength: 80, style: jsonStyle }) })
-                ] })), toolCall._meta?.compactionAction && (_jsx(CompactionDetails, { compactionAction: toolCall._meta.compactionAction, originalTokens: toolCall._meta.originalTokens, finalTokens: toolCall._meta.finalTokens, originalContentPath: toolCall._meta.originalContentPath })), ((toolCall.content && toolCall.content.length > 0) ||
-                toolCall.error) && (_jsxs("div", { className: "p-3 border-b border-border last:border-0", children: [
+                ] })), toolCall._meta?.compactionAction && (_jsx(CompactionDetails, { compactionAction: toolCall._meta.compactionAction, originalTokens: toolCall._meta.originalTokens, finalTokens: toolCall._meta.finalTokens, originalContentPath: toolCall._meta.originalContentPath })), ((toolCall.content && toolCall.content.length > 0) || toolCall.error) &&
+                !isSandboxCodeTool(toolCall.title) && (_jsxs("div", { className: "p-3 border-b border-border last:border-0", children: [
                     _jsx("div", { className: "text-[10px] font-bold text-text-secondary uppercase tracking-wider mb-1.5 font-sans", children: "Output" }), _jsxs("div", { className: "space-y-2 text-[11px] text-foreground", children: [toolCall.content?.map((block, idx) => {
                                 // Generate a stable key based on content
                                 const getBlockKey = () => {
@@ -379,7 +496,7 @@ function ToolOperationDetails({ toolCall, hookNotification, }) {
                                     }
                                     return `block-${idx}`;
                                 };
-                                // Helper to render text content
+                                // Helper to render text content (for non-sandbox tools or non-log content)
                                 const renderTextContent = (text, key) => {
                                     try {
                                         const parsed = JSON.parse(text);
@@ -397,14 +514,20 @@ function ToolOperationDetails({ toolCall, hookNotification, }) {
                                     }
                                     return (_jsx("pre", { className: "whitespace-pre-wrap font-mono text-[11px] text-foreground overflow-x-auto", children: text }, key));
                                 };
-                                // Handle nested content blocks
+                                // Skip text content for sandbox tools - it's shown in Console tabs
+                                const isSandbox = isSandboxCodeTool(toolCall.title);
+                                if (isSandbox &&
+                                    (block.type === "text" || block.type === "content")) {
+                                    return null;
+                                }
+                                // Handle nested content blocks (non-sandbox tools)
                                 if (block.type === "content" && "content" in block) {
                                     const innerContent = block.content;
                                     if (innerContent.type === "text" && innerContent.text) {
                                         return renderTextContent(innerContent.text, getBlockKey());
                                     }
                                 }
-                                // Handle direct text blocks
+                                // Handle direct text blocks (non-sandbox tools)
                                 if (block.type === "text" && "text" in block) {
                                     return renderTextContent(block.text, getBlockKey());
                                 }
@@ -440,7 +563,40 @@ function ToolOperationDetails({ toolCall, hookNotification, }) {
                                 }
                                 return null;
                             }), toolCall.error && (_jsxs("div", { className: "text-destructive font-mono text-[11px] mt-2", children: ["Error: ", toolCall.error] }))] })
-                ] })), toolCall._meta?.truncationWarning && (_jsxs("div", { className: "mx-3 mt-3 mb-0 flex items-center gap-2 rounded-md bg-yellow-50 dark:bg-yellow-950/20 px-3 py-2 text-[11px] text-yellow-800 dark:text-yellow-200 border border-yellow-200 dark:border-yellow-900", children: [
+                ] })), isSandboxCodeTool(toolCall.title) &&
+                (() => {
+                    // Find text content from blocks (handles both direct text and nested content)
+                    const findBlockText = () => {
+                        for (const block of toolCall.content || []) {
+                            if (block.type === "text" && "text" in block) {
+                                return block.text;
+                            }
+                            if (block.type === "content" && "content" in block) {
+                                const innerContent = block.content;
+                                if (innerContent.type === "text" && innerContent.text) {
+                                    return innerContent.text;
+                                }
+                            }
+                        }
+                        return null;
+                    };
+                    const blockText = findBlockText();
+                    if (!blockText)
+                        return null;
+                    const parsed = parseSandboxOutput(blockText);
+                    // Combine stderr and error into one stderr output (errors go to stderr)
+                    const stderrContent = [parsed.stderr, parsed.error]
+                        .filter(Boolean)
+                        .join("\n");
+                    const hasOutput = parsed.stdout || stderrContent;
+                    if (!hasOutput)
+                        return null;
+                    return (_jsxs("div", { className: "border-b border-border last:border-0", children: [
+                            _jsxs("button", { type: "button", onClick: () => setShowLogs(!showLogs), className: "w-full p-3 flex items-center justify-between cursor-pointer bg-transparent border-none text-left hover:bg-muted/50 transition-colors", children: [
+                                    _jsxs("div", { className: "flex items-center gap-2", children: [
+                                            _jsx(Terminal, { className: "h-3.5 w-3.5 text-text-secondary" }), _jsx("span", { className: "text-[10px] font-bold text-text-secondary uppercase tracking-wider font-sans", children: "Console" }), parsed.error && (_jsx("span", { className: "px-1.5 py-0.5 bg-destructive/10 text-destructive rounded text-[9px] font-medium", children: "Error" }))] }), _jsx(ChevronDown, { className: `h-3.5 w-3.5 text-text-secondary transition-transform duration-200 ${showLogs ? "rotate-180" : ""}` })
+                                ] }), showLogs && (_jsx(SandboxConsoleTabs, { stdout: parsed.stdout, stderr: stderrContent }))] }));
+                })(), toolCall._meta?.truncationWarning && (_jsxs("div", { className: "mx-3 mt-3 mb-0 flex items-center gap-2 rounded-md bg-yellow-50 dark:bg-yellow-950/20 px-3 py-2 text-[11px] text-yellow-800 dark:text-yellow-200 border border-yellow-200 dark:border-yellow-900", children: [
                     _jsx("span", { className: "text-yellow-600 dark:text-yellow-500", children: "\u26A0\uFE0F" }), _jsx("span", { children: toolCall._meta.truncationWarning })
                 ] })), hookNotification &&
                 hookNotification.status === "completed" &&
@@ -459,5 +615,7 @@ function ToolOperationDetails({ toolCall, hookNotification, }) {
                                     _jsx("span", { className: "uppercase tracking-wide font-semibold mr-1", children: "Input:" }), toolCall.tokenUsage.inputTokens.toLocaleString()] })), toolCall.tokenUsage.outputTokens !== undefined && (_jsxs("div", { children: [
                                     _jsx("span", { className: "uppercase tracking-wide font-semibold mr-1", children: "Output:" }), toolCall.tokenUsage.outputTokens.toLocaleString()] })), toolCall.tokenUsage.totalTokens !== undefined && (_jsxs("div", { children: [
                                     _jsx("span", { className: "uppercase tracking-wide font-semibold mr-1", children: "Total:" }), toolCall.tokenUsage.totalTokens.toLocaleString()] }))] })), toolCall.startedAt && (_jsxs("div", { className: "flex gap-3 ml-auto", children: [
-                            _jsxs("span", { children: ["Started: ", new Date(toolCall.startedAt).toLocaleTimeString()] }), toolCall.completedAt && (_jsxs("span", { children: ["Completed:", " ", new Date(toolCall.completedAt).toLocaleTimeString(), " (", Math.round((toolCall.completedAt - toolCall.startedAt) / 1000), "s)"] }))] }))] }))] }));
+                            _jsxs("span", { children: ["Started: ", new Date(toolCall.startedAt).toLocaleTimeString()] }), toolCall.completedAt && (_jsxs(_Fragment, { children: [
+                                    _jsx("span", { children: "-" }), _jsxs("span", { children: ["Completed:", " ", new Date(toolCall.completedAt).toLocaleTimeString()] }), _jsx("span", { children: "-" }), _jsxs("span", { children: ["Duration:", " ", formatElapsedTime((toolCall.completedAt - toolCall.startedAt) / 1000)] })
+                                ] }))] }))] }))] }));
 }

package/dist/gui/providers/SandboxFileSystemProvider.d.ts

@@ -0,0 +1,18 @@
+import type { FileSystemItem, FileSystemProvider } from "../types/filesystem.js";
+interface SandboxConnection {
+    sessionId: string;
+    apiUrl: string;
+}
+/**
+ * FileSystemProvider implementation that connects to E2B sandbox filesystem
+ * via the agent's HTTP API endpoints.
+ */
+export declare class SandboxFileSystemProvider implements FileSystemProvider {
+    private connection;
+    constructor(connection: SandboxConnection);
+    getRootItems(): Promise<FileSystemItem[]>;
+    getItemChildren(itemId: string): Promise<FileSystemItem[]>;
+    getItemDetails(itemId: string): Promise<FileSystemItem>;
+    private toFileSystemItem;
+}
+export {};

package/dist/gui/providers/SandboxFileSystemProvider.js

@@ -0,0 +1,76 @@
+/**
+ * FileSystemProvider implementation that connects to E2B sandbox filesystem
+ * via the agent's HTTP API endpoints.
+ */
+export class SandboxFileSystemProvider {
+    connection;
+    constructor(connection) {
+        this.connection = connection;
+    }
+    async getRootItems() {
+        try {
+            const response = await fetch(`${this.connection.apiUrl}/sandbox/files?sessionId=${this.connection.sessionId}&path=/home/user`);
+            if (!response.ok) {
+                console.error("Failed to fetch sandbox files:", await response.text());
+                return [];
+            }
+            const { files } = (await response.json());
+            return files.map(this.toFileSystemItem);
+        }
+        catch (error) {
+            console.error("Error fetching sandbox root items:", error);
+            return [];
+        }
+    }
+    async getItemChildren(itemId) {
+        try {
+            // itemId is the full path in the sandbox
+            const response = await fetch(`${this.connection.apiUrl}/sandbox/files?sessionId=${this.connection.sessionId}&path=${encodeURIComponent(itemId)}`);
+            if (!response.ok) {
+                console.error("Failed to fetch sandbox directory:", await response.text());
+                return [];
+            }
+            const { files } = (await response.json());
+            return files.map(this.toFileSystemItem);
+        }
+        catch (error) {
+            console.error("Error fetching sandbox item children:", error);
+            return [];
+        }
+    }
+    async getItemDetails(itemId) {
+        try {
+            // For now, we'll fetch the parent directory and find the item
+            // In a more sophisticated implementation, this could call a dedicated endpoint
+            const parentPath = itemId.substring(0, itemId.lastIndexOf("/"));
+            const response = await fetch(`${this.connection.apiUrl}/sandbox/files?sessionId=${this.connection.sessionId}&path=${encodeURIComponent(parentPath || "/")}`);
+            if (!response.ok) {
+                throw new Error(`Failed to fetch file details: ${await response.text()}`);
+            }
+            const { files } = (await response.json());
+            const file = files.find((f) => f.path === itemId);
+            if (!file) {
+                throw new Error(`File not found: ${itemId}`);
+            }
+            return this.toFileSystemItem(file);
+        }
+        catch (error) {
+            console.error("Error fetching sandbox item details:", error);
+            throw error;
+        }
+    }
+    toFileSystemItem = (file) => {
+        const extension = file.type === "file" && file.name.includes(".")
+            ? file.name.split(".").pop()
+            : undefined;
+        return {
+            id: file.path,
+            name: file.name,
+            type: file.type === "dir" ? "folder" : "file",
+            path: file.path,
+            size: file.size,
+            lastModified: new Date(file.lastModified),
+            ...(extension !== undefined && { extension }),
+        };
+    };
+}

package/dist/sdk/client/acp-client.d.ts

@@ -112,6 +112,19 @@ export declare class AcpClient {
      * Subscribe to errors
      */
     onError(handler: (error: Error) => void): () => void;
+    /**
+     * Subscribe to file system change events for a specific session
+     * Returns unsubscribe function
+     */
+    onFileSystemChange(sessionId: string, callback: (event: {
+        sessionId: string;
+        paths?: string[];
+        _meta?: {
+            source?: "tool" | "poll";
+            toolName?: string;
+            isReplay?: boolean;
+        };
+    }) => void): () => void;
     /**
      * Get agent information
      * - displayName: Human-readable name for UI (preferred)
@@ -156,6 +169,11 @@ export declare class AcpClient {
             defaultOptionId?: string;
         }>;
     };
+    /**
+     * Get the base URL for HTTP transport
+     * Returns undefined for non-HTTP transports
+     */
+    getBaseUrl(): string | undefined;
     /**
      * Create transport based on explicit configuration
      */
@@ -165,5 +183,4 @@ export declare class AcpClient {
     private handleError;
     private updateSessionStatus;
     private generateSessionId;
-    private generateMessageId;
 }

package/dist/sdk/client/acp-client.js

@@ -1,4 +1,5 @@
 import { createLogger } from "@townco/core";
+import { generateMessageId } from "../../core/schemas/chat.js";
 import { HttpTransport } from "../transports/http.js";
 import { StdioTransport } from "../transports/stdio.js";
 import { WebSocketTransport } from "../transports/websocket.js";
@@ -184,7 +185,7 @@ export class AcpClient {
         });
         // Create message
         const message = {
-            id: this.generateMessageId(),
+            id: generateMessageId("user"),
             role: "user",
             content: contentBlocks,
             timestamp: new Date().toISOString(),
@@ -301,6 +302,17 @@ export class AcpClient {
             this.errorHandlers.delete(handler);
         };
     }
+    /**
+     * Subscribe to file system change events for a specific session
+     * Returns unsubscribe function
+     */
+    onFileSystemChange(sessionId, callback) {
+        if (this.transport && "onFileSystemChange" in this.transport) {
+            return this.transport.onFileSystemChange(sessionId, callback);
+        }
+        // Return no-op unsubscribe for transports that don't support file system changes
+        return () => { };
+    }
     /**
      * Get agent information
      * - displayName: Human-readable name for UI (preferred)
@@ -314,6 +326,16 @@ export class AcpClient {
     getAgentInfo() {
         return this.transport.getAgentInfo?.() || {};
     }
+    /**
+     * Get the base URL for HTTP transport
+     * Returns undefined for non-HTTP transports
+     */
+    getBaseUrl() {
+        if (this.config.type === "http") {
+            return this.config.options.baseUrl;
+        }
+        return undefined;
+    }
     /**
      * Create transport based on explicit configuration
      */
@@ -394,7 +416,4 @@ export class AcpClient {
     generateSessionId() {
         return `session_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
     }
-    generateMessageId() {
-        return `msg_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
-    }
 }

package/dist/sdk/transports/http.d.ts

@@ -8,6 +8,7 @@ export declare class HttpTransport implements Transport {
     private connected;
     private sessionUpdateCallbacks;
     private errorCallbacks;
+    private fileSystemChangeCallbacks;
     private messageQueue;
     private currentSessionId;
     private chunkResolvers;
@@ -51,6 +52,12 @@ export declare class HttpTransport implements Transport {
     isConnected(): boolean;
     onSessionUpdate(callback: (update: SessionUpdate) => void): () => void;
     onError(callback: (error: Error) => void): () => void;
+    onFileSystemChange(sessionId: string, callback: (event: {
+        sessionId: string;
+        paths?: string[];
+        source?: string;
+    }) => void): () => void;
+    private notifyFileSystemChange;
     getAgentInfo(): {
         name?: string;
         displayName?: string;

package/dist/sdk/transports/http.js

@@ -1,5 +1,6 @@
 import * as acp from "@agentclientprotocol/sdk";
 import { createLogger } from "@townco/core";
+import { generateMessageId } from "../../core/schemas/chat.js";
 import { httpTransportOptionsSchema, } from "./types.js";
 const logger = createLogger("http-transport");
 /**
@@ -10,6 +11,7 @@ export class HttpTransport {
     connected = false;
     sessionUpdateCallbacks = new Set();
     errorCallbacks = new Set();
+    fileSystemChangeCallbacks = new Map();
     messageQueue = [];
     currentSessionId = null;
     chunkResolvers = [];
@@ -573,6 +575,25 @@ export class HttpTransport {
             this.errorCallbacks.delete(callback);
         };
     }
+    onFileSystemChange(sessionId, callback) {
+        logger.debug("Registering file system change callback", { sessionId });
+        this.fileSystemChangeCallbacks.set(sessionId, callback);
+        return () => {
+            logger.debug("Unregistering file system change callback", { sessionId });
+            this.fileSystemChangeCallbacks.delete(sessionId);
+        };
+    }
+    notifyFileSystemChange(event) {
+        const callback = this.fileSystemChangeCallbacks.get(event.sessionId);
+        logger.debug("notifyFileSystemChange", {
+            sessionId: event.sessionId,
+            hasCallback: !!callback,
+            callbackCount: this.fileSystemChangeCallbacks.size,
+        });
+        if (callback) {
+            callback(event);
+        }
+    }
     getAgentInfo() {
         return this.agentInfo || {};
     }
@@ -835,6 +856,28 @@ export class HttpTransport {
         logger.debug("Update session type", {
             sessionUpdate: update?.sessionUpdate,
         });
+        // Handle sandbox file changes
+        // Type assertion needed because TypeScript doesn't recognize this as a valid session update type
+        const sessionUpdateValue = update?.sessionUpdate;
+        if (sessionUpdateValue === "sandbox_files_changed") {
+            const sandboxUpdate = update;
+            const isReplay = sandboxUpdate._meta?.isReplay === true;
+            if (!isReplay) {
+                logger.debug("Sandbox files changed", {
+                    paths: sandboxUpdate.paths,
+                    source: sandboxUpdate._meta?.source,
+                });
+                // Notify callbacks
+                this.notifyFileSystemChange({
+                    sessionId,
+                    ...(sandboxUpdate.paths && { paths: sandboxUpdate.paths }),
+                    ...(sandboxUpdate._meta?.source && {
+                        source: sandboxUpdate._meta.source,
+                    }),
+                });
+            }
+            return;
+        }
         // Handle ACP tool call notifications
         if (update?.sessionUpdate === "tool_call") {
             logger.debug("Tool call notification", {
@@ -1472,7 +1515,7 @@ export class HttpTransport {
                         sessionId,
                         status: "active",
                         message: {
-                            id: `msg_${Date.now()}_assistant`,
+                            id: generateMessageId("assistant"),
                             role: "assistant",
                             content: [
                                 {
@@ -1508,7 +1551,7 @@ export class HttpTransport {
                         sessionId,
                         status: "active",
                         message: {
-                            id: `msg_${Date.now()}_user`,
+                            id: generateMessageId("user"),
                             role: "user",
                             content: [
                                 {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@townco/ui",
-  "version": "0.1.99",
+  "version": "0.1.101",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -49,7 +49,7 @@
     "@radix-ui/react-slot": "^1.2.4",
     "@radix-ui/react-tabs": "^1.1.13",
     "@radix-ui/react-tooltip": "^1.2.8",
-    "@townco/core": "0.0.77",
+    "@townco/core": "0.0.79",
     "@types/mdast": "^4.0.4",
     "@uiw/react-json-view": "^2.0.0-alpha.39",
     "class-variance-authority": "^0.7.1",
@@ -67,7 +67,7 @@
     "zustand": "^5.0.8"
   },
   "devDependencies": {
-    "@townco/tsconfig": "0.1.96",
+    "@townco/tsconfig": "0.1.98",
     "@types/node": "^24.10.0",
     "@types/react": "^19.2.2",
     "@types/unist": "^3.0.3",

package/src/styles/global.css

@@ -231,6 +231,31 @@
   button {
     cursor: pointer;
   }
+
+  /* Custom scrollbar styling - overlay style without gutter */
+  ::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+
+  ::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: var(--muted-foreground);
+    border-radius: 4px;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background: var(--foreground);
+  }
+
+  /* Firefox scrollbar styling */
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: var(--muted-foreground) transparent;
+  }
 }
 
 /* Streamdown list styling */