@townco/ui 0.1.37 → 0.1.38

package/dist/gui/components/ChatView.js

@@ -1,13 +1,27 @@
-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 { createLogger } from "@townco/core";
 import { ArrowUp, ChevronUp, Code, PanelRight, Settings, Sparkles, } from "lucide-react";
 import { useEffect, useState } from "react";
 import { useChatMessages, useChatSession, useToolCalls, } from "../../core/hooks/index.js";
 import { useChatStore } from "../../core/store/chat-store.js";
-import { formatTokenPercentage } from "../../core/utils/model-context.js";
+import { calculateTokenPercentage, formatTokenPercentage, } from "../../core/utils/model-context.js";
 import { cn } from "../lib/utils.js";
-import { ChatEmptyState, ChatHeader, ChatInputActions, ChatInputAttachment, ChatInputCommandMenu, ChatInputField, ChatInputRoot, ChatInputSubmit, ChatInputToolbar, ChatInputVoiceInput, ChatLayout, FilesTabContent, Message, MessageContent, PanelTabsHeader, SourcesTabContent, Tabs, TabsContent, TodoTabContent, } from "./index.js";
+import { ChatEmptyState, ChatHeader, ChatInputActions, ChatInputAttachment, ChatInputCommandMenu, ChatInputField, ChatInputRoot, ChatInputSubmit, ChatInputToolbar, ChatInputVoiceInput, ChatLayout, ContextUsageButton, FilesTabContent, Message, MessageContent, PanelTabsHeader, SourcesTabContent, Tabs, TabsContent, TodoTabContent, } from "./index.js";
 const logger = createLogger("gui");
+// Helper component to provide openFiles callback
+function OpenFilesButton({ children, }) {
+    const { setPanelSize, setActiveTab } = ChatLayout.useChatLayoutContext();
+    const openFiles = () => {
+        setPanelSize("small");
+        setActiveTab("files");
+    };
+    return _jsx(_Fragment, { children: children({ openFiles }) });
+}
+// Controlled Tabs component for the aside panel
+function AsideTabs() {
+    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-6 py-2 h-16", "flex items-center", "[border-bottom-width:0.5px]"), children: _jsx(PanelTabsHeader, { showIcons: true, visibleTabs: ["todo", "files", "sources"], variant: "compact" }) }), _jsx(TabsContent, { value: "todo", className: "flex-1 p-4 mt-0", children: _jsx(TodoTabContent, {}) }), _jsx(TabsContent, { value: "files", className: "flex-1 p-4 mt-0", children: _jsx(FilesTabContent, {}) }), _jsx(TabsContent, { value: "sources", className: "flex-1 p-4 mt-0", children: _jsx(SourcesTabContent, {}) })] }));
+}
 // Mobile header component that uses ChatHeader context
 function MobileHeader({ agentName, showHeader, }) {
     const { isExpanded, setIsExpanded } = ChatHeader.useChatHeaderContext();
@@ -29,6 +43,7 @@ export function ChatView({ client, initialSessionId, error: initError, }) {
     const currentModel = useChatStore((state) => state.currentModel);
     const [agentName, setAgentName] = useState("Agent");
     const [isLargeScreen, setIsLargeScreen] = useState(typeof window !== "undefined" ? window.innerWidth >= 1024 : true);
+    const [placeholder, setPlaceholder] = useState("Type a message or / for commands...");
     // Log connection status changes
     useEffect(() => {
         logger.debug("Connection status changed", { status: connectionStatus });
@@ -59,6 +74,14 @@ export function ChatView({ client, initialSessionId, error: initError, }) {
             mediaQuery.removeEventListener("change", handleChange);
         };
     }, []);
+    // Handle prompt hover - temporarily show the full prompt as placeholder
+    const handlePromptHover = (prompt) => {
+        setPlaceholder(prompt);
+    };
+    // Handle prompt leave - restore the default placeholder
+    const handlePromptLeave = () => {
+        setPlaceholder("Type a message or / for commands...");
+    };
     // If there's an initialization error, show error UI (after all hooks have been called)
     if (initError) {
         return (_jsx("div", { className: "flex items-center justify-center h-screen bg-background", children: _jsxs("div", { className: "text-center p-8 max-w-md", children: [_jsx("h1", { className: "text-2xl font-bold text-destructive mb-4", children: "Initialization Error" }), _jsx("p", { className: "text-foreground mb-4", children: initError }), _jsx("p", { className: "text-sm text-muted-foreground", children: "Failed to initialize the ACP client. Check the console for details." })] }) }));
@@ -148,15 +171,16 @@ export function ChatView({ client, initialSessionId, error: initError, }) {
             },
         },
     ];
-    return (_jsxs(ChatLayout.Root, { defaultPanelSize: "hidden", defaultActiveTab: "todo", children: [_jsxs(ChatLayout.Main, { children: [_jsx(AppChatHeader, { agentName: agentName, todos: todos, sources: sources, showHeader: messages.length > 0 }), connectionStatus === "error" && error && (_jsx("div", { className: "border-b border-destructive/20 bg-destructive/10 px-6 py-4", children: _jsxs("div", { className: "flex items-start justify-between gap-4", children: [_jsxs("div", { className: "flex-1", children: [_jsx("h3", { className: "mb-1 text-paragraph-sm font-semibold text-destructive", children: "Connection Error" }), _jsx("p", { className: "whitespace-pre-line text-paragraph-sm text-foreground", children: error })] }), _jsx("button", { type: "button", onClick: connect, className: "rounded-lg bg-destructive px-4 py-2 text-paragraph-sm font-medium text-destructive-foreground transition-colors hover:bg-destructive-hover", children: "Retry" })] }) })), _jsxs(ChatLayout.Body, { children: [_jsx(ChatLayout.Messages, { children: messages.length === 0 ? (_jsx("div", { className: "flex flex-1 items-center px-4", children: _jsx(ChatEmptyState, { title: agentName, description: "This agent can help you with your tasks. Start a conversation by typing a message below.", suggestedPrompts: [
-                                            "Search the web for the latest news on top tech company earnings, produce a summary for each company, and then a macro trend analysis of the tech industry. Use your todo list",
-                                            "Explain how this works",
-                                            "Create a new feature",
-                                            "Review my changes",
-                                        ], onPromptClick: (prompt) => {
-                                            sendMessage(prompt);
-                                            logger.info("Prompt clicked", { prompt });
-                                        } }) })) : (_jsx("div", { className: "flex flex-col px-4", children: messages.map((message, index) => {
+    return (_jsxs(ChatLayout.Root, { defaultPanelSize: "hidden", defaultActiveTab: "todo", children: [_jsxs(ChatLayout.Main, { children: [_jsx(AppChatHeader, { agentName: agentName, todos: todos, sources: sources, showHeader: messages.length > 0 }), connectionStatus === "error" && error && (_jsx("div", { className: "border-b border-destructive/20 bg-destructive/10 px-6 py-4", children: _jsxs("div", { className: "flex items-start justify-between gap-4", children: [_jsxs("div", { className: "flex-1", children: [_jsx("h3", { className: "mb-1 text-paragraph-sm font-semibold text-destructive", children: "Connection Error" }), _jsx("p", { className: "whitespace-pre-line text-paragraph-sm text-foreground", children: error })] }), _jsx("button", { type: "button", onClick: connect, className: "rounded-lg bg-destructive px-4 py-2 text-paragraph-sm font-medium text-destructive-foreground transition-colors hover:bg-destructive-hover", children: "Retry" })] }) })), _jsxs(ChatLayout.Body, { children: [_jsx(ChatLayout.Messages, { children: messages.length === 0 ? (_jsx(OpenFilesButton, { children: ({ openFiles }) => (_jsx("div", { className: "flex flex-1 items-center px-4", children: _jsx(ChatEmptyState, { title: agentName, description: "This agent can help you with your tasks. Start a conversation by typing a message below.", suggestedPrompts: [
+                                                "Search the web for the latest news on top tech company earnings, produce a summary for each company, and then a macro trend analysis of the tech industry. Use your todo list",
+                                                "Explain how this works",
+                                                "Create a new feature",
+                                                "Review my changes",
+                                            ], onPromptClick: (prompt) => {
+                                                sendMessage(prompt);
+                                                setPlaceholder("Type a message or / for commands...");
+                                                logger.info("Prompt clicked", { prompt });
+                                            }, onPromptHover: handlePromptHover, onPromptLeave: handlePromptLeave, onOpenFiles: openFiles }) })) })) : (_jsx("div", { className: "flex flex-col px-4", children: messages.map((message, index) => {
                                         // Calculate dynamic spacing based on message sequence
                                         const isFirst = index === 0;
                                         const previousMessage = isFirst ? null : messages[index - 1];
@@ -175,5 +199,5 @@ export function ChatView({ client, initialSessionId, error: initError, }) {
                                                 previousMessage?.role === "assistant" ? "mt-2" : "mt-6";
                                         }
                                         return (_jsx(Message, { message: message, className: spacingClass, isLastMessage: index === messages.length - 1, children: _jsx(MessageContent, { message: message, thinkingDisplayStyle: "collapsible" }) }, message.id));
-                                    }) })) }), _jsx(ChatLayout.Footer, { children: _jsxs(ChatInputRoot, { client: client, startSession: startSession, children: [_jsx(ChatInputCommandMenu, { commands: commandMenuItems }), _jsx(ChatInputField, { placeholder: "Type a message or / for commands...", autoFocus: true }), _jsxs(ChatInputToolbar, { children: [_jsxs("div", { className: "flex items-baseline gap-1", children: [_jsx(ChatInputActions, {}), _jsx(ChatInputAttachment, {}), latestTokenUsage && (_jsxs("span", { className: "text-xs text-muted-foreground/50 ml-2", children: ["Context:", " ", formatTokenPercentage(latestTokenUsage.totalTokens ?? 0, currentModel ?? undefined), " ", "(", (latestTokenUsage.totalTokens ?? 0).toLocaleString(), " ", "tokens)"] }))] }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx(ChatInputVoiceInput, {}), _jsx(ChatInputSubmit, { children: _jsx(ArrowUp, { className: "size-4" }) })] })] })] }) })] })] }), isLargeScreen && (_jsx(ChatLayout.Aside, { breakpoint: "lg", children: _jsxs(Tabs, { defaultValue: "todo", className: "flex flex-col h-full", children: [_jsx("div", { className: cn("border-b border-border bg-card", "px-6 py-2 h-16", "flex items-center", "[border-bottom-width:0.5px]"), children: _jsx(PanelTabsHeader, { showIcons: true, visibleTabs: ["todo", "files", "sources"], variant: "compact" }) }), _jsx(TabsContent, { value: "todo", className: "flex-1 p-4 mt-0", children: _jsx(TodoTabContent, { todos: todos }) }), _jsx(TabsContent, { value: "files", className: "flex-1 p-4 mt-0", children: _jsx(FilesTabContent, {}) }), _jsx(TabsContent, { value: "sources", className: "flex-1 p-4 mt-0", children: _jsx(SourcesTabContent, { sources: sources }) })] }) }))] }));
+                                    }) })) }), _jsx(ChatLayout.Footer, { children: _jsxs(ChatInputRoot, { client: client, startSession: startSession, children: [_jsx(ChatInputCommandMenu, { commands: commandMenuItems }), _jsx(ChatInputField, { placeholder: placeholder, autoFocus: true }), _jsxs(ChatInputToolbar, { children: [_jsxs("div", { className: "flex items-baseline gap-1", children: [_jsx(ChatInputActions, {}), _jsx(ChatInputAttachment, {}), latestTokenUsage && (_jsx(ContextUsageButton, { percentage: calculateTokenPercentage(latestTokenUsage.totalTokens ?? 0, currentModel ?? undefined), tokens: latestTokenUsage.totalTokens ?? 0, formattedPercentage: formatTokenPercentage(latestTokenUsage.totalTokens ?? 0, currentModel ?? undefined) }))] }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx(ChatInputVoiceInput, {}), _jsx(ChatInputSubmit, { children: _jsx(ArrowUp, { className: "size-4" }) })] })] })] }) })] })] }), isLargeScreen && (_jsx(ChatLayout.Aside, { breakpoint: "lg", children: _jsx(AsideTabs, {}) }))] }));
 }

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

@@ -0,0 +1,7 @@
+import * as React from "react";
+export interface ContextUsageButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    percentage: number;
+    tokens: number;
+    formattedPercentage: string;
+}
+export declare const ContextUsageButton: React.ForwardRefExoticComponent<ContextUsageButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/gui/components/ContextUsageButton.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/utils.js";
+import { Button } from "./Button.js";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "./Tooltip.js";
+export const ContextUsageButton = React.forwardRef(({ percentage, tokens, formattedPercentage, className, ...props }, ref) => {
+    // Clamp percentage between 0 and 100
+    const clampedPercentage = Math.min(100, Math.max(0, percentage));
+    // SVG parameters
+    const size = 16;
+    const strokeWidth = 2;
+    const radius = (size - strokeWidth) / 2;
+    const center = size / 2;
+    const circumference = 2 * Math.PI * radius;
+    const offset = circumference - (clampedPercentage / 100) * circumference;
+    return (_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { ref: ref, type: "button", variant: "ghost", size: "icon", className: cn("rounded-full cursor-default", className), ...props, children: _jsxs("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, className: "transform -rotate-90", children: [_jsx("circle", { cx: center, cy: center, r: radius, stroke: "currentColor", strokeWidth: strokeWidth, fill: "transparent", className: "opacity-20" }), _jsx("circle", { cx: center, cy: center, r: radius, stroke: "currentColor", strokeWidth: strokeWidth, fill: "transparent", strokeDasharray: circumference, strokeDashoffset: offset, strokeLinecap: "round", className: "transition-all duration-300 ease-in-out" })] }) }) }), _jsx(TooltipContent, { side: "top", align: "center", children: _jsxs("p", { children: ["Context: ", formattedPercentage, " (", tokens.toLocaleString(), " tokens)"] }) })] }) }));
+});
+ContextUsageButton.displayName = "ContextUsageButton";

package/dist/gui/components/FileSystemItem.js

@@ -10,7 +10,6 @@ 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, }) {
     const [isExpanded, setIsExpanded] = React.useState(true);
-    const [isFocused, setIsFocused] = React.useState(false);
     const isSelected = selectedId === item.id;
     const handleToggle = () => {
         if (item.type === "folder") {
@@ -49,7 +48,7 @@ export function FileSystemItem({ item, level = 0, onSelect, selectedId, isDropTa
     };
     return (_jsxs("div", { className: "flex flex-col w-full", children: [_jsxs("div", { role: "button", tabIndex: 0, "aria-expanded": item.type === "folder" ? isExpanded : undefined, className: cn(
                 // Base styles with semantic typography
-                "group flex items-center gap-2 rounded-md cursor-pointer transition-colors text-paragraph-sm", getPaddingClass(), 
+                "group/item flex items-center gap-2 rounded-md cursor-pointer transition-colors text-paragraph-sm", getPaddingClass(), 
                 // State styles using semantic colors
                 // Default: transparent background
                 // Hover: accent-hover background
@@ -62,11 +61,11 @@ export function FileSystemItem({ item, level = 0, onSelect, selectedId, isDropTa
                 isDropTarget && [
                     "bg-accent",
                     "border border-dashed border-border-dark",
-                ]), onClick: handleClick, onKeyDown: handleKeyDown, onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), children: [_jsx("div", { className: "shrink-0 size-4 flex items-center justify-center text-foreground", children: item.type === "folder" ? (isExpanded ? (_jsx(FolderOpen, { className: "size-4" })) : (_jsx(Folder, { className: "size-4" }))) : (_jsx(FileCode, { className: "size-4" })) }), _jsx("p", { className: "flex-1 text-foreground whitespace-nowrap overflow-hidden text-ellipsis", children: item.name }), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx("button", { className: cn("shrink-0 size-4 transition-opacity text-muted-foreground hover:text-foreground", 
-                                    // Hidden by default, shown on group hover
-                                    "opacity-0 group-hover:opacity-100", 
-                                    // Always hidden when focused (to show clean state)
-                                    isFocused && "opacity-0"), onClick: (e) => {
+                ]), onClick: handleClick, onKeyDown: handleKeyDown, children: [_jsx("div", { className: "shrink-0 size-4 flex items-center justify-center text-foreground", children: item.type === "folder" ? (isExpanded ? (_jsx(FolderOpen, { className: "size-4" })) : (_jsx(Folder, { className: "size-4" }))) : (_jsx(FileCode, { className: "size-4" })) }), _jsx("p", { className: "flex-1 text-foreground whitespace-nowrap overflow-hidden text-ellipsis", children: item.name }), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx("button", { className: cn("shrink-0 size-4 transition-opacity text-muted-foreground hover:text-foreground", 
+                                    // Hidden by default, shown on group hover only
+                                    "opacity-0 group-hover/item:opacity-100", 
+                                    // 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();

package/dist/gui/components/FileSystemView.js

@@ -37,10 +37,10 @@ export function FileSystemView({ className, provider = defaultProvider, onItemSe
         onItemSelect?.(item);
     };
     if (isLoading) {
-        return (_jsx("div", { className: cn("p-4", className), children: _jsx("p", { className: "text-sm text-muted-foreground", children: "Loading..." }) }));
+        return (_jsx("div", { className: cn("", className), children: _jsx("p", { className: "text-sm text-muted-foreground", children: "Loading..." }) }));
     }
     if (error) {
-        return (_jsx("div", { className: cn("p-4", className), children: _jsxs("p", { className: "text-sm text-destructive", children: ["Error: ", 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 px-4 py-3", 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)))) }));
+    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)))) }));
 }

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

@@ -0,0 +1,14 @@
+import type { AcpClient } from "../../sdk/client/acp-client.js";
+import type { ToolCall } from "../../core/schemas/tool-call.js";
+export interface InlineToolCallSummaryProps {
+    /** The tool call to summarize */
+    toolCall: ToolCall;
+    /** ACP client for making requests */
+    client: AcpClient | null;
+}
+/**
+ * Inline tool call summary that appears beneath completed tool calls
+ * Shows a brief AI-generated summary of what the tool accomplished
+ * Uses the ACP client to make the request
+ */
+export declare function InlineToolCallSummary({ toolCall, client, }: InlineToolCallSummaryProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/gui/components/InlineToolCallSummary.js

@@ -0,0 +1,110 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CheckCircle, Sparkles } from "lucide-react";
+import { useEffect, useState } from "react";
+/**
+ * Inline tool call summary that appears beneath completed tool calls
+ * Shows a brief AI-generated summary of what the tool accomplished
+ * Uses the ACP client to make the request
+ */
+export function InlineToolCallSummary({ toolCall, client, }) {
+    const [summary, setSummary] = useState(null);
+    const [loading, setLoading] = useState(false);
+    useEffect(() => {
+        // Only generate summary for completed tool calls
+        if (toolCall.status !== "completed" || !client) {
+            return;
+        }
+        // Don't fetch if we already have a summary
+        if (summary) {
+            return;
+        }
+        const fetchSummary = async () => {
+            setLoading(true);
+            try {
+                // Create a minimal Anthropic-format request with just this tool call
+                const request = {
+                    messages: [
+                        {
+                            role: "assistant",
+                            content: [
+                                {
+                                    type: "tool_use",
+                                    id: toolCall.id,
+                                    name: toolCall.title.toLowerCase().replace(/\s+/g, "_"),
+                                    input: toolCall.rawInput || {},
+                                },
+                            ],
+                        },
+                        {
+                            role: "user",
+                            content: [
+                                {
+                                    type: "tool_result",
+                                    tool_use_id: toolCall.id,
+                                    content: extractToolOutput(toolCall),
+                                },
+                            ],
+                        },
+                    ],
+                };
+                // Make ACP RPC request to agent/summarize method
+                const response = await client.request("agent/summarize", request);
+                // Extract the description from the first tool call
+                if (response.toolCalls && response.toolCalls.length > 0) {
+                    const firstToolCall = response.toolCalls[0];
+                    if (firstToolCall) {
+                        setSummary(firstToolCall.description);
+                    }
+                }
+            }
+            catch (error) {
+                // Silently fail - summaries are optional enhancements
+                console.debug("Failed to fetch tool call summary via ACP:", error);
+            }
+            finally {
+                setLoading(false);
+            }
+        };
+        fetchSummary();
+    }, [toolCall, client, summary]);
+    // Don't show anything if not completed or still loading
+    if (toolCall.status !== "completed" || loading) {
+        return null;
+    }
+    // Don't show if no summary
+    if (!summary) {
+        return null;
+    }
+    return (_jsxs("div", { className: "flex items-start gap-2 mt-2 px-3 py-2 rounded-lg bg-emerald-50/50 border border-emerald-100", children: [_jsx(CheckCircle, { className: "h-3.5 w-3.5 text-emerald-600 shrink-0 mt-0.5" }), _jsx("div", { className: "flex-1 min-w-0", children: _jsx("p", { className: "text-[11px] text-emerald-900 font-medium", children: summary }) }), _jsx(Sparkles, { className: "h-3 w-3 text-emerald-600/50 shrink-0 mt-0.5" })] }));
+}
+/**
+ * Extract output text from a tool call for summarization
+ */
+function extractToolOutput(toolCall) {
+    // Try to extract text from content blocks
+    if (toolCall.content && toolCall.content.length > 0) {
+        const textBlocks = [];
+        for (const block of toolCall.content) {
+            if (block.type === "text" && "text" in block) {
+                textBlocks.push(block.text);
+            }
+            else if (block.type === "content" && "content" in block) {
+                const innerContent = block.content;
+                if (innerContent.type === "text" && innerContent.text) {
+                    textBlocks.push(innerContent.text);
+                }
+            }
+        }
+        if (textBlocks.length > 0) {
+            // Truncate very long outputs for summary purposes
+            const output = textBlocks.join("\n");
+            return output.length > 500 ? `${output.slice(0, 500)}...` : output;
+        }
+    }
+    // Fallback to raw output
+    if (toolCall.rawOutput) {
+        const output = JSON.stringify(toolCall.rawOutput);
+        return output.length > 500 ? `${output.slice(0, 500)}...` : output;
+    }
+    return "No output";
+}

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

@@ -0,0 +1,15 @@
+import type { AcpClient } from "../../sdk/client/acp-client.js";
+import type { ToolCall } from "../../core/schemas/tool-call.js";
+export interface InlineToolCallSummaryACPProps {
+    /** The tool call to summarize */
+    toolCall: ToolCall;
+    /** ACP client for making requests */
+    client: AcpClient | null;
+}
+/**
+ * Inline tool call summary using ACP protocol
+ *
+ * This version uses the ACP client to make a custom method call
+ * instead of direct HTTP fetch
+ */
+export declare function InlineToolCallSummaryACP({ toolCall, client, }: InlineToolCallSummaryACPProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/gui/components/InlineToolCallSummaryACP.js

@@ -0,0 +1,90 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CheckCircle, Sparkles } from "lucide-react";
+import { useEffect, useState } from "react";
+/**
+ * Inline tool call summary using ACP protocol
+ *
+ * This version uses the ACP client to make a custom method call
+ * instead of direct HTTP fetch
+ */
+export function InlineToolCallSummaryACP({ toolCall, client, }) {
+    const [summary, setSummary] = useState(null);
+    const [loading, setLoading] = useState(false);
+    useEffect(() => {
+        if (toolCall.status !== "completed" || !client || summary) {
+            return;
+        }
+        const fetchSummary = async () => {
+            setLoading(true);
+            try {
+                // This would require adding a custom ACP method to the server
+                // For now, this shows the concept - you'd need to implement
+                // the corresponding handler in the ACP adapter
+                // Example of what it might look like:
+                // const response = await client.request({
+                //   method: "agent/summarize",
+                //   params: {
+                //     messages: [
+                //       {
+                //         role: "assistant",
+                //         content: [{
+                //           type: "tool_use",
+                //           id: toolCall.id,
+                //           name: toolCall.title,
+                //           input: toolCall.rawInput || {}
+                //         }]
+                //       },
+                //       {
+                //         role: "user",
+                //         content: [{
+                //           type: "tool_result",
+                //           tool_use_id: toolCall.id,
+                //           content: extractToolOutput(toolCall)
+                //         }]
+                //       }
+                //     ]
+                //   }
+                // });
+                // For now, fall back to direct fetch since the ACP method
+                // isn't implemented
+                console.log("ACP-based summary not yet implemented");
+            }
+            catch (error) {
+                console.debug("Failed to fetch tool call summary via ACP:", error);
+            }
+            finally {
+                setLoading(false);
+            }
+        };
+        fetchSummary();
+    }, [toolCall, client, summary]);
+    if (toolCall.status !== "completed" || loading || !summary) {
+        return null;
+    }
+    return (_jsxs("div", { className: "flex items-start gap-2 mt-2 px-3 py-2 rounded-lg bg-emerald-50/50 border border-emerald-100", children: [_jsx(CheckCircle, { className: "h-3.5 w-3.5 text-emerald-600 shrink-0 mt-0.5" }), _jsx("div", { className: "flex-1 min-w-0", children: _jsx("p", { className: "text-[11px] text-emerald-900 font-medium", children: summary }) }), _jsx(Sparkles, { className: "h-3 w-3 text-emerald-600/50 shrink-0 mt-0.5" })] }));
+}
+function extractToolOutput(toolCall) {
+    if (toolCall.content && toolCall.content.length > 0) {
+        const textBlocks = [];
+        for (const block of toolCall.content) {
+            if (block.type === "text" && "text" in block) {
+                textBlocks.push(block.text);
+            }
+            else if (block.type === "content" && "content" in block) {
+                const innerContent = block.content;
+                if (innerContent.type === "text" && innerContent.text) {
+                    textBlocks.push(innerContent.text);
+                }
+            }
+        }
+        if (textBlocks.length > 0) {
+            const output = textBlocks.join("\n");
+            return output.length > 500 ? `${output.slice(0, 500)}...` : output;
+        }
+    }
+    if (toolCall.rawOutput) {
+        const output = JSON.stringify(toolCall.rawOutput);
+        return output.length > 500 ? `${output.slice(0, 500)}...` : output;
+    }
+    return "No output";
+}

package/dist/gui/components/Response.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
@@ -92,6 +92,6 @@ export const Response = React.forwardRef(({ content, isStreaming = false, showEm
         // Horizontal rule
         hr: ({ node, ...props }) => (_jsx("hr", { className: "my-6 border-t border-border opacity-50", ...props })),
     };
-    return (_jsxs("div", { ref: ref, className: cn("markdown-content prose prose-sm max-w-none dark:prose-invert", className), ...props, children: [_jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], components: components, children: content }), isStreaming && content && (_jsx("span", { className: "inline-block ml-1 animate-typing text-primary", children: "..." }))] }));
+    return (_jsx("div", { ref: ref, className: cn("markdown-content prose prose-sm max-w-none dark:prose-invert", className), ...props, children: _jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], components: components, children: content }) }));
 });
 Response.displayName = "Response";

package/dist/gui/components/SourceListItem.js

@@ -2,6 +2,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "../lib/utils.js";
 export const SourceListItem = React.forwardRef(({ source, isSelected, className, ...props }, ref) => {
-    return (_jsxs("button", { ref: ref, type: "button", className: cn("flex w-full text-left gap-2 items-start p-3 rounded-lg transition-colors cursor-pointer border border-transparent", "hover:bg-accent-hover hover:border-border/50", isSelected && "bg-accent-hover border-border/50", className), onClick: () => window.open(source.url, "_blank"), ...props, children: [_jsx("div", { className: "flex gap-2 items-center py-[2px] shrink-0", children: _jsx("div", { className: "relative rounded-[3px] shrink-0 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-caption leading-normal text-foreground", children: [_jsx("span", { className: "font-medium", children: source.sourceName }), _jsxs("span", { className: "text-muted-foreground", children: [" \u00B7 ", source.title] })] }), _jsx("p", { className: "text-caption leading-relaxed text-muted-foreground line-clamp-3", children: source.snippet })] })] }));
+    return (_jsxs("button", { ref: ref, type: "button", className: cn(
+        // Base styles matching FileSystemItem
+        "group flex w-full text-left gap-2 items-start 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 - 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: [_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 })] })] }));
 });
 SourceListItem.displayName = "SourceListItem";

package/dist/gui/components/TodoListItem.js

@@ -1,7 +1,24 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Circle, CircleCheck } from "lucide-react";
 import * as React from "react";
 import { cn } from "../lib/utils.js";
 export const TodoListItem = React.forwardRef(({ todo, className, ...props }, ref) => {
-    return (_jsx("div", { ref: ref, className: cn("flex items-center gap-3 px-3 py-2 rounded-lg", className), ...props, children: _jsx("span", { className: cn("flex-1 text-[var(--font-size)] font-[var(--font-family)]", todo.status === "completed" && "line-through opacity-60", todo.status === "in_progress" && "shimmer-animation"), children: todo.text }) }));
+    const isCompleted = todo.status === "completed";
+    const isSelected = false; // TODO: Add selection support later if needed
+    return (
+    /* 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", 
+        // 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: isCompleted ? (_jsx(CircleCheck, { className: "size-4 text-muted-foreground" })) : (_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
+                todo.status === "in_progress" && "font-medium"), children: todo.text })] }));
 });
 TodoListItem.displayName = "TodoListItem";

package/dist/gui/components/ToolCall.js

@@ -1,7 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import JsonView from "@uiw/react-json-view";
-import { ChevronDown, Wrench } from "lucide-react";
+import { CheckSquare, ChevronDown, Cloud, Edit, FileText, Globe, Link, Search, Wrench, } from "lucide-react";
 import { useState } from "react";
+/**
+ * Map of icon names to Lucide components
+ */
+const ICON_MAP = {
+    Globe: Globe,
+    Link: Link,
+    Cloud: Cloud,
+    CheckSquare: CheckSquare,
+    Search: Search,
+    FileText: FileText,
+    Edit: Edit,
+    Wrench: Wrench,
+};
 /**
  * Tool call kind icons (using emoji for simplicity)
  */
@@ -22,7 +35,13 @@ const _kindIcons = {
  */
 export function ToolCall({ toolCall }) {
     const [isExpanded, setIsExpanded] = useState(false);
-    return (_jsxs("div", { className: "flex flex-col my-2", children: [_jsx("button", { type: "button", className: "flex items-center gap-2 cursor-pointer bg-transparent border-none p-0 text-left group w-fit", onClick: () => setIsExpanded(!isExpanded), "aria-expanded": isExpanded, children: _jsxs("div", { className: "flex items-center gap-1.5 text-[11px] font-medium text-zinc-500", children: [_jsx("div", { className: "text-zinc-500", children: _jsx(Wrench, { className: "h-3 w-3" }) }), _jsx("span", { className: "text-paragraph-sm text-zinc-500", children: toolCall.title }), _jsx(ChevronDown, { className: `h-3 w-3 text-zinc-400 transition-transform duration-200 ${isExpanded ? "rotate-180" : ""}` })] }) }), isExpanded && (_jsxs("div", { className: "mt-2 text-sm border border-zinc-200 rounded-lg bg-zinc-50 overflow-hidden w-full", children: [toolCall.locations && toolCall.locations.length > 0 && (_jsxs("div", { className: "p-3 border-b border-zinc-200", children: [_jsx("div", { className: "text-[10px] font-bold text-zinc-400 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-zinc-700 bg-zinc-200/50 px-1.5 py-0.5 rounded w-fit", children: [loc.path, loc.line !== null &&
+    // Determine which icon to show
+    const IconComponent = toolCall.icon && ICON_MAP[toolCall.icon]
+        ? ICON_MAP[toolCall.icon]
+        : Wrench;
+    // Determine display name
+    const displayName = toolCall.prettyName || toolCall.title;
+    return (_jsxs("div", { className: "flex flex-col my-4", children: [_jsx("button", { type: "button", className: "flex items-center gap-2 cursor-pointer bg-transparent border-none p-0 text-left group w-fit", onClick: () => setIsExpanded(!isExpanded), "aria-expanded": isExpanded, children: _jsxs("div", { className: "flex items-center gap-1.5 text-[11px] font-medium text-zinc-500", children: [_jsx("div", { className: "text-zinc-500", children: _jsx(IconComponent, { className: "h-3 w-3" }) }), _jsx("span", { className: "text-paragraph-sm text-zinc-500", children: displayName }), _jsx(ChevronDown, { className: `h-3 w-3 text-zinc-400 transition-transform duration-200 ${isExpanded ? "rotate-180" : ""}` })] }) }), isExpanded && (_jsxs("div", { className: "mt-2 text-sm border border-zinc-200 rounded-lg bg-zinc-50 overflow-hidden w-full", children: [toolCall.locations && toolCall.locations.length > 0 && (_jsxs("div", { className: "p-3 border-b border-zinc-200", children: [_jsx("div", { className: "text-[10px] font-bold text-zinc-400 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-zinc-700 bg-zinc-200/50 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-zinc-200", children: [_jsx("div", { className: "text-[10px] font-bold text-zinc-400 uppercase tracking-wider mb-1.5 font-sans", children: "Input" }), _jsx("div", { className: "text-[11px] font-mono text-zinc-700", children: _jsx(JsonView, { value: toolCall.rawInput, collapsed: false, displayDataTypes: false, displayObjectSize: false, enableClipboard: true, style: {
                                         fontSize: "11px",

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

@@ -0,0 +1,7 @@
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import * as React from "react";
+declare const TooltipProvider: React.FC<TooltipPrimitive.TooltipProviderProps>;
+declare const Tooltip: React.FC<TooltipPrimitive.TooltipProps>;
+declare const TooltipTrigger: React.ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const TooltipContent: React.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/dist/gui/components/Tooltip.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import * as React from "react";
+import { cn } from "../lib/utils.js";
+const TooltipProvider = TooltipPrimitive.Provider;
+const Tooltip = TooltipPrimitive.Root;
+const TooltipTrigger = TooltipPrimitive.Trigger;
+const TooltipContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => (_jsx(TooltipPrimitive.Content, { ref: ref, sideOffset: sideOffset, className: cn("z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className), ...props })));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

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

@@ -1,5 +1,7 @@
 export { toast } from "sonner";
 export { MockFileSystemProvider, mockFileSystemData, } from "../data/mockFileSystemData.js";
+export { mockSourceData } from "../data/mockSourceData.js";
+export { mockTodoData } from "../data/mockTodoData.js";
 export type { FileSystemData, FileSystemItem as FileSystemItemData, FileSystemItemType, FileSystemProvider, } from "../types/filesystem.js";
 export { Button, type ButtonProps, buttonVariants } from "./Button.js";
 export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from "./Card.js";
@@ -13,6 +15,7 @@ export { ChatSecondaryPanel, type ChatSecondaryPanelProps, } from "./ChatSeconda
 export * as ChatSidebar from "./ChatSidebar.js";
 export { ChatStatus, type ChatStatusProps } from "./ChatStatus.js";
 export { ChatView, type ChatViewProps } from "./ChatView.js";
+export { ContextUsageButton, type ContextUsageButtonProps, } from "./ContextUsageButton.js";
 export { Conversation, type ConversationProps } from "./Conversation.js";
 export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, } from "./Dialog.js";
 export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, } from "./DropdownMenu.js";
@@ -39,3 +42,4 @@ export { TodoList, type TodoListProps } from "./TodoList.js";
 export { type TodoItem, TodoListItem, type TodoListItemProps, } from "./TodoListItem.js";
 export { ToolCall, type ToolCallProps } from "./ToolCall.js";
 export { ToolCallList, type ToolCallListProps } from "./ToolCallList.js";
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "./Tooltip.js";

package/dist/gui/components/index.js

@@ -1,6 +1,8 @@
 // Base UI components
 export { toast } from "sonner";
 export { MockFileSystemProvider, mockFileSystemData, } from "../data/mockFileSystemData.js";
+export { mockSourceData } from "../data/mockSourceData.js";
+export { mockTodoData } from "../data/mockTodoData.js";
 export { Button, buttonVariants } from "./Button.js";
 export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from "./Card.js";
 export { ChatEmptyState } from "./ChatEmptyState.js";
@@ -14,6 +16,7 @@ export { ChatSecondaryPanel, } from "./ChatSecondaryPanel.js";
 export * as ChatSidebar from "./ChatSidebar.js";
 export { ChatStatus } from "./ChatStatus.js";
 export { ChatView } from "./ChatView.js";
+export { ContextUsageButton, } from "./ContextUsageButton.js";
 // Chat components - shadcn.io/ai inspired primitives
 export { Conversation } from "./Conversation.js";
 // Dialog components
@@ -46,3 +49,5 @@ export { TodoList } from "./TodoList.js";
 export { TodoListItem, } from "./TodoListItem.js";
 export { ToolCall } from "./ToolCall.js";
 export { ToolCallList } from "./ToolCallList.js";
+// Tooltip components
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "./Tooltip.js";