@townco/ui 0.1.47 → 0.1.49

package/dist/gui/components/ChatView.js

@@ -1,26 +1,68 @@
 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 { ArrowUp, Bug, ChevronUp, Code, PanelRight, Settings, Sparkles, X, } 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 { selectTodosForCurrentSession, useChatStore, } from "../../core/store/chat-store.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, ContextUsageButton, FilesTabContent, IconButton, Message, MessageContent, PanelTabsHeader, SourcesTabContent, Tabs, TabsContent, ThemeToggle, TodoTabContent, } from "./index.js";
+import { ChatEmptyState, ChatHeader, ChatInputActions, ChatInputAttachment, ChatInputCommandMenu, ChatInputField, ChatInputRoot, ChatInputSubmit, ChatInputToolbar, ChatInputVoiceInput, ChatLayout, ContextUsageButton, FilesTabContent, IconButton, Message, MessageContent, PanelTabsHeader, SettingsTabContent, SourcesTabContent, Tabs, TabsContent, ThemeToggle, TodoTabContent, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "./index.js";
 const logger = createLogger("gui");
 // Helper component to provide openFiles callback
 function OpenFilesButton({ children, }) {
-    const { setPanelSize, setActiveTab } = ChatLayout.useChatLayoutContext();
+    const { setPanelSize, setActiveTab, panelSize, activeTab } = ChatLayout.useChatLayoutContext();
     const openFiles = () => {
-        setPanelSize("small");
-        setActiveTab("files");
+        if (panelSize !== "hidden" && activeTab === "files") {
+            setPanelSize("hidden");
+        }
+        else {
+            setPanelSize("small");
+            setActiveTab("files");
+        }
+    };
+    const openSettings = () => {
+        if (panelSize !== "hidden" && activeTab === "settings") {
+            setPanelSize("hidden");
+        }
+        else {
+            setPanelSize("small");
+            setActiveTab("settings");
+        }
+    };
+    return _jsx(_Fragment, { children: children({ openFiles, openSettings }) });
+}
+// Hook to handle sidebar keyboard shortcut (Cmd+B / Ctrl+B)
+function SidebarHotkey() {
+    const { panelSize, setPanelSize } = ChatLayout.useChatLayoutContext();
+    useEffect(() => {
+        const handleKeyDown = (e) => {
+            // Cmd+B (Mac) or Ctrl+B (Windows/Linux)
+            if ((e.metaKey || e.ctrlKey) && e.key === "b") {
+                e.preventDefault();
+                setPanelSize(panelSize === "hidden" ? "small" : "hidden");
+            }
+        };
+        window.addEventListener("keydown", handleKeyDown);
+        return () => window.removeEventListener("keydown", handleKeyDown);
+    }, [panelSize, setPanelSize]);
+    return null;
+}
+// Chat input with attachment handling
+function ChatInputWithAttachments({ client, startSession, placeholder, latestContextSize, currentModel, commandMenuItems, }) {
+    const attachedFiles = useChatStore((state) => state.input.attachedFiles);
+    const addFileAttachment = useChatStore((state) => state.addFileAttachment);
+    const removeFileAttachment = useChatStore((state) => state.removeFileAttachment);
+    const handleFilesSelected = (files) => {
+        for (const file of files) {
+            addFileAttachment(file);
+        }
     };
-    return _jsx(_Fragment, { children: children({ openFiles }) });
+    return (_jsxs(ChatInputRoot, { client: client, startSession: startSession, children: [_jsx(ChatInputCommandMenu, { commands: commandMenuItems }), attachedFiles.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-2 p-3 border-b border-border", children: attachedFiles.map((file, index) => (_jsxs("div", { className: "relative group rounded-md overflow-hidden border border-border", children: [_jsx("img", { src: `data:${file.mimeType};base64,${file.data}`, alt: file.name, className: "h-20 w-20 object-cover" }), _jsx("button", { type: "button", onClick: () => removeFileAttachment(index), className: "absolute top-1 right-1 p-1 rounded-full bg-background/80 hover:bg-background opacity-0 group-hover:opacity-100 transition-opacity", children: _jsx(X, { className: "size-3" }) })] }, index))) })), _jsx(ChatInputField, { placeholder: placeholder, autoFocus: true, onFilesDropped: handleFilesSelected }), _jsxs(ChatInputToolbar, { children: [_jsxs("div", { className: "flex items-baseline gap-1", children: [_jsx(ChatInputActions, {}), _jsx(ChatInputAttachment, { onFilesSelected: handleFilesSelected }), latestContextSize != null && (_jsx(ContextUsageButton, { contextSize: latestContextSize, modelContextWindow: currentModel?.includes("claude") ? 200000 : 128000 }))] }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx(ChatInputVoiceInput, {}), _jsx(ChatInputSubmit, { children: _jsx(ArrowUp, { className: "size-4" }) })] })] })] }));
 }
 // Controlled Tabs component for the aside panel
-function AsideTabs() {
+function AsideTabs({ todos, tools, mcps, subagents, }) {
     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, {}) })] }));
+    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", "settings"], 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, {}) }), _jsx(TabsContent, { value: "settings", className: "flex-1 p-4 mt-0 overflow-y-auto", children: _jsx(SettingsTabContent, { tools: tools ?? [], mcps: mcps ?? [], subagents: subagents ?? [] }) })] }));
 }
 // Mobile header component that uses ChatHeader context
 function MobileHeader({ agentName, showHeader, }) {
@@ -28,13 +70,14 @@ function MobileHeader({ agentName, showHeader, }) {
     return (_jsxs("div", { className: "flex lg:hidden items-center flex-1", children: [showHeader && (_jsx("div", { className: "flex items-center gap-2 flex-1", children: _jsx("h1", { className: "text-heading-4 text-foreground", children: agentName }) })), !showHeader && _jsx("div", { className: "flex-1" }), _jsx(ThemeToggle, {}), _jsx(IconButton, { "aria-label": "Toggle menu", onClick: () => setIsExpanded(!isExpanded), children: _jsx(ChevronUp, { className: cn("size-4 text-muted-foreground transition-transform duration-200", isExpanded ? "" : "rotate-180") }) })] }));
 }
 // Header component that uses ChatLayout context (must be inside ChatLayout.Root)
-function AppChatHeader({ agentName, todos, sources, showHeader, }) {
+function AppChatHeader({ agentName, todos, sources, showHeader, sessionId, debuggerUrl, tools, mcps, subagents, }) {
     const { panelSize, setPanelSize } = ChatLayout.useChatLayoutContext();
-    return (_jsxs(ChatHeader.Root, { className: cn("border-b border-border bg-card relative lg:p-0", "[border-bottom-width:0.5px]"), children: [_jsxs("div", { className: "hidden lg:flex items-center w-full h-16 py-5 pl-6 pr-4", children: [showHeader && (_jsx("div", { className: "flex items-center gap-2 flex-1", children: _jsx("h1", { className: "text-heading-4 text-foreground", children: agentName }) })), !showHeader && _jsx("div", { className: "flex-1" }), _jsx(ThemeToggle, {}), _jsx(IconButton, { "aria-label": "Toggle sidebar", onClick: () => {
+    const debuggerLink = sessionId && debuggerUrl ? `${debuggerUrl}/sessions/${sessionId}` : null;
+    return (_jsxs(ChatHeader.Root, { className: cn("border-b border-border bg-card relative lg:p-0", "[border-bottom-width:0.5px]"), children: [_jsxs("div", { className: "hidden lg:flex items-center w-full h-16 py-5 pl-6 pr-4", children: [showHeader && (_jsx("div", { className: "flex items-center gap-2 flex-1", children: _jsx("h1", { className: "text-heading-4 text-foreground", children: agentName }) })), !showHeader && _jsx("div", { className: "flex-1" }), debuggerUrl && (_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(IconButton, { "aria-label": "View session in debugger", disabled: !debuggerLink, asChild: !!debuggerLink, children: debuggerLink ? (_jsx("a", { href: debuggerLink, target: "_blank", rel: "noopener noreferrer", children: _jsx(Bug, { className: "size-4 text-muted-foreground" }) })) : (_jsx(Bug, { className: "size-4 text-muted-foreground" })) }) }), _jsx(TooltipContent, { children: _jsx("p", { children: "View session in debugger" }) })] }) })), _jsx(ThemeToggle, {}), _jsx(IconButton, { "aria-label": "Toggle sidebar", onClick: () => {
                             setPanelSize(panelSize === "hidden" ? "small" : "hidden");
-                        }, children: _jsx(PanelRight, { className: "size-4 text-muted-foreground" }) })] }), _jsx(MobileHeader, { agentName: agentName, showHeader: showHeader }), _jsx(ChatHeader.ExpandablePanel, { className: cn("pt-6 pb-8 px-6", "border-b border-border bg-card", "shadow-[0_4px_16px_0_rgba(0,0,0,0.04)]", "[border-bottom-width:0.5px]"), children: _jsxs(Tabs, { defaultValue: "todo", className: "w-full", children: [_jsx(PanelTabsHeader, { showIcons: true, visibleTabs: ["todo", "files", "sources"], variant: "default" }), _jsx(TabsContent, { value: "todo", className: "mt-4", children: _jsx(TodoTabContent, { todos: todos }) }), _jsx(TabsContent, { value: "files", className: "mt-4", children: _jsx(FilesTabContent, {}) }), _jsx(TabsContent, { value: "sources", className: "mt-4", children: _jsx(SourcesTabContent, { sources: sources }) })] }) })] }));
+                        }, children: _jsx(PanelRight, { className: "size-4 text-muted-foreground" }) })] }), _jsx(MobileHeader, { agentName: agentName, showHeader: showHeader }), _jsx(ChatHeader.ExpandablePanel, { className: cn("pt-6 pb-8 px-6", "border-b border-border bg-card", "shadow-[0_4px_16px_0_rgba(0,0,0,0.04)]", "[border-bottom-width:0.5px]"), children: _jsxs(Tabs, { defaultValue: "todo", className: "w-full", children: [_jsx(PanelTabsHeader, { showIcons: true, visibleTabs: ["todo", "files", "sources", "settings"], variant: "default" }), _jsx(TabsContent, { value: "todo", className: "mt-4", children: _jsx(TodoTabContent, { todos: todos }) }), _jsx(TabsContent, { value: "files", className: "mt-4", children: _jsx(FilesTabContent, {}) }), _jsx(TabsContent, { value: "sources", className: "mt-4", children: _jsx(SourcesTabContent, { sources: sources }) }), _jsx(TabsContent, { value: "settings", className: "mt-4", children: _jsx(SettingsTabContent, { tools: tools ?? [], mcps: mcps ?? [], subagents: subagents ?? [] }) })] }) })] }));
 }
-export function ChatView({ client, initialSessionId, error: initError, }) {
+export function ChatView({ client, initialSessionId, error: initError, debuggerUrl, }) {
     // Use shared hooks from @townco/ui/core - MUST be called before any early returns
     const { connectionStatus, connect, sessionId, startSession } = useChatSession(client, initialSessionId);
     const { messages, sendMessage } = useChatMessages(client, startSession);
@@ -42,11 +85,14 @@ export function ChatView({ client, initialSessionId, error: initError, }) {
     const error = useChatStore((state) => state.error);
     const currentModel = useChatStore((state) => state.currentModel);
     const [agentName, setAgentName] = useState("Agent");
-    const [agentDescription, setAgentDescription] = useState("This agent can help you with your tasks. Start a conversation by typing a message below.");
+    const [agentDescription, setAgentDescription] = useState("This research agent can help you find and summarize information, analyze sources, track tasks, and answer questions about your research. Start by typing a message below to begin your investigation.");
     const [suggestedPrompts, setSuggestedPrompts] = useState([
         "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",
         "What can you help me with?",
     ]);
+    const [agentTools, setAgentTools] = useState([]);
+    const [agentMcps, setAgentMcps] = useState([]);
+    const [agentSubagents, setAgentSubagents] = useState([]);
     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
@@ -80,6 +126,21 @@ export function ChatView({ client, initialSessionId, error: initError, }) {
             if (agentInfo.suggestedPrompts && agentInfo.suggestedPrompts.length > 0) {
                 setSuggestedPrompts(agentInfo.suggestedPrompts);
             }
+            // Get tools, MCPs, and subagents
+            if (agentInfo.tools && agentInfo.tools.length > 0) {
+                setAgentTools(agentInfo.tools);
+                logger.info("Agent tools loaded", { tools: agentInfo.tools });
+            }
+            if (agentInfo.mcps && agentInfo.mcps.length > 0) {
+                setAgentMcps(agentInfo.mcps);
+                logger.info("Agent MCPs loaded", { mcps: agentInfo.mcps });
+            }
+            if (agentInfo.subagents && agentInfo.subagents.length > 0) {
+                setAgentSubagents(agentInfo.subagents);
+                logger.info("Agent subagents loaded", {
+                    subagents: agentInfo.subagents,
+                });
+            }
         }
     }, [client, sessionId, connectionStatus]);
     // Monitor screen size changes and update isLargeScreen state
@@ -108,8 +169,7 @@ export function ChatView({ client, initialSessionId, error: initError, }) {
     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." })] }) }));
     }
-    // TODO: Replace with useChatStore((state) => state.todos) when todos are added to the store
-    const todos = [];
+    const todos = useChatStore(selectTodosForCurrentSession);
     // Dummy sources data based on Figma design
     const sources = [
         {
@@ -149,26 +209,6 @@ export function ChatView({ client, initialSessionId, error: initError, }) {
     const latestContextSize = useChatStore((state) => state.latestContextSize);
     // Command menu items for chat input
     const commandMenuItems = [
-        {
-            id: "model-sonnet",
-            label: "Use Sonnet 4.5",
-            description: "Switch to Claude Sonnet 4.5 model",
-            icon: _jsx(Sparkles, { className: "h-4 w-4" }),
-            category: "model",
-            onSelect: () => {
-                logger.info("User selected Sonnet 4.5 model");
-            },
-        },
-        {
-            id: "model-opus",
-            label: "Use Opus",
-            description: "Switch to Claude Opus model",
-            icon: _jsx(Sparkles, { className: "h-4 w-4" }),
-            category: "model",
-            onSelect: () => {
-                logger.info("User selected Opus model");
-            },
-        },
         {
             id: "settings",
             label: "Open Settings",
@@ -179,22 +219,14 @@ export function ChatView({ client, initialSessionId, error: initError, }) {
                 logger.info("User opened settings");
             },
         },
-        {
-            id: "code-mode",
-            label: "Code Mode",
-            description: "Enable code-focused responses",
-            icon: _jsx(Code, { className: "h-4 w-4" }),
-            category: "mode",
-            onSelect: () => {
-                logger.info("User enabled code mode");
-            },
-        },
     ];
-    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: agentDescription, suggestedPrompts: suggestedPrompts, onPromptClick: (prompt) => {
+    return (_jsxs(ChatLayout.Root, { defaultPanelSize: "hidden", defaultActiveTab: "todo", children: [_jsx(SidebarHotkey, {}), _jsxs(ChatLayout.Main, { children: [_jsx(AppChatHeader, { agentName: agentName, todos: todos, sources: sources, showHeader: messages.length > 0, sessionId: sessionId, tools: agentTools, mcps: agentMcps, subagents: agentSubagents, ...(debuggerUrl && { debuggerUrl }) }), 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, openSettings }) => (_jsx("div", { className: "flex flex-1 items-center px-4", children: _jsx(ChatEmptyState, { title: agentName, description: agentDescription, suggestedPrompts: suggestedPrompts, 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) => {
+                                            }, onPromptHover: handlePromptHover, onPromptLeave: handlePromptLeave, onOpenFiles: openFiles, onOpenSettings: openSettings, toolsAndMcpsCount: agentTools.length +
+                                                agentMcps.length +
+                                                agentSubagents.length }) })) })) : (_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];
@@ -213,5 +245,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: placeholder, autoFocus: true }), _jsxs(ChatInputToolbar, { children: [_jsxs("div", { className: "flex items-baseline gap-1", children: [_jsx(ChatInputActions, {}), _jsx(ChatInputAttachment, {}), latestContextSize != null && (_jsx(ContextUsageButton, { contextSize: latestContextSize, modelContextWindow: currentModel?.includes("claude") ? 200000 : 128000 }))] }), _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, {}) }))] }));
+                                    }) })) }), _jsx(ChatLayout.Footer, { children: _jsx(ChatInputWithAttachments, { client: client, startSession: startSession, placeholder: placeholder, latestContextSize: latestContextSize, currentModel: currentModel, commandMenuItems: commandMenuItems }) })] })] }), isLargeScreen && (_jsx(ChatLayout.Aside, { breakpoint: "lg", children: _jsx(AsideTabs, { todos: todos, tools: agentTools, mcps: agentMcps, subagents: agentSubagents }) }))] }));
 }

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

@@ -1,6 +1,8 @@
 import * as React from "react";
 export interface ContextSize {
     systemPromptTokens: number;
+    toolOverheadTokens?: number;
+    mcpOverheadTokens?: number;
     userMessagesTokens: number;
     assistantMessagesTokens: number;
     toolInputTokens: number;

package/dist/gui/components/ContextUsageButton.js

@@ -32,6 +32,8 @@ export const ContextUsageButton = React.forwardRef(({ contextSize, modelContextW
     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", colorClass, 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", className: "p-3", children: _jsxs("div", { className: "space-y-2 font-mono text-xs", children: [_jsxs("div", { className: "space-y-1", children: [_jsxs("div", { className: "flex justify-between gap-6", children: [_jsx("span", { className: "text-muted-foreground", children: "System Prompt:" }), _jsxs("div", { className: "flex gap-1 items-baseline", children: [_jsx("span", { children: contextSize.systemPromptTokens.toLocaleString() }), _jsxs("span", { className: "text-muted-foreground text-[10px]", children: ["(", calculatePercentage(contextSize.systemPromptTokens), ")"] })] })] }), _jsxs("div", { className: "flex justify-between gap-6", children: [_jsx("span", { className: "text-muted-foreground", children: "User Messages:" }), _jsxs("div", { className: "flex gap-1 items-baseline", children: [_jsx("span", { children: contextSize.userMessagesTokens.toLocaleString() }), _jsxs("span", { className: "text-muted-foreground text-[10px]", children: ["(", calculatePercentage(contextSize.userMessagesTokens), ")"] })] })] }), _jsxs("div", { className: "flex justify-between gap-6", children: [_jsx("span", { className: "text-muted-foreground", children: "Assistant Messages:" }), _jsxs("div", { className: "flex gap-1 items-baseline", children: [_jsx("span", { children: contextSize.assistantMessagesTokens.toLocaleString() }), _jsxs("span", { className: "text-muted-foreground text-[10px]", children: ["(", calculatePercentage(contextSize.assistantMessagesTokens), ")"] })] })] }), _jsxs("div", { className: "flex justify-between gap-6", children: [_jsx("span", { className: "text-muted-foreground", children: "Tool Inputs:" }), _jsxs("div", { className: "flex gap-1 items-baseline", children: [_jsx("span", { children: contextSize.toolInputTokens.toLocaleString() }), _jsxs("span", { className: "text-muted-foreground text-[10px]", children: ["(", calculatePercentage(contextSize.toolInputTokens), ")"] })] })] }), _jsxs("div", { className: "flex justify-between gap-6", children: [_jsx("span", { className: "text-muted-foreground", children: "Tool Results:" }), _jsxs("div", { className: "flex gap-1 items-baseline", children: [_jsx("span", { children: contextSize.toolResultsTokens.toLocaleString() }), _jsxs("span", { className: "text-muted-foreground text-[10px]", children: ["(", calculatePercentage(contextSize.toolResultsTokens), ")"] })] })] })] }), _jsx("div", { className: "border-t border-border pt-2", children: _jsxs("div", { className: cn("flex justify-end gap-2 font-semibold", colorClass), children: [_jsx("span", { children: actualTokens.toLocaleString() }), _jsxs("span", { children: ["(", formattedPercentage, ")"] })] }) })] }) })] }) }));
+    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", colorClass, 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", className: "p-3", children: _jsxs("div", { className: "space-y-2 font-mono text-xs", children: [_jsxs("div", { className: "space-y-1", children: [_jsxs("div", { className: "flex justify-between gap-6", children: [_jsx("span", { className: "text-muted-foreground", children: "System Prompt:" }), _jsxs("div", { className: "flex gap-1 items-baseline", children: [_jsx("span", { children: contextSize.systemPromptTokens.toLocaleString() }), _jsxs("span", { className: "text-muted-foreground text-[10px]", children: ["(", calculatePercentage(contextSize.systemPromptTokens), ")"] })] })] }), contextSize.toolOverheadTokens !== undefined &&
+                                        contextSize.toolOverheadTokens > 0 && (_jsxs("div", { className: "flex justify-between gap-6", children: [_jsx("span", { className: "text-muted-foreground", children: "Tools Definition:" }), _jsxs("div", { className: "flex gap-1 items-baseline", children: [_jsx("span", { children: contextSize.toolOverheadTokens.toLocaleString() }), _jsxs("span", { className: "text-muted-foreground text-[10px]", children: ["(", calculatePercentage(contextSize.toolOverheadTokens), ")"] })] })] })), contextSize.mcpOverheadTokens !== undefined &&
+                                        contextSize.mcpOverheadTokens > 0 && (_jsxs("div", { className: "flex justify-between gap-6", children: [_jsx("span", { className: "text-muted-foreground", children: "MCPs Definition:" }), _jsxs("div", { className: "flex gap-1 items-baseline", children: [_jsx("span", { children: contextSize.mcpOverheadTokens.toLocaleString() }), _jsxs("span", { className: "text-muted-foreground text-[10px]", children: ["(", calculatePercentage(contextSize.mcpOverheadTokens), ")"] })] })] })), _jsxs("div", { className: "flex justify-between gap-6", children: [_jsx("span", { className: "text-muted-foreground", children: "User Messages:" }), _jsxs("div", { className: "flex gap-1 items-baseline", children: [_jsx("span", { children: contextSize.userMessagesTokens.toLocaleString() }), _jsxs("span", { className: "text-muted-foreground text-[10px]", children: ["(", calculatePercentage(contextSize.userMessagesTokens), ")"] })] })] }), _jsxs("div", { className: "flex justify-between gap-6", children: [_jsx("span", { className: "text-muted-foreground", children: "Assistant Messages:" }), _jsxs("div", { className: "flex gap-1 items-baseline", children: [_jsx("span", { children: contextSize.assistantMessagesTokens.toLocaleString() }), _jsxs("span", { className: "text-muted-foreground text-[10px]", children: ["(", calculatePercentage(contextSize.assistantMessagesTokens), ")"] })] })] }), _jsxs("div", { className: "flex justify-between gap-6", children: [_jsx("span", { className: "text-muted-foreground", children: "Tool Inputs:" }), _jsxs("div", { className: "flex gap-1 items-baseline", children: [_jsx("span", { children: contextSize.toolInputTokens.toLocaleString() }), _jsxs("span", { className: "text-muted-foreground text-[10px]", children: ["(", calculatePercentage(contextSize.toolInputTokens), ")"] })] })] }), _jsxs("div", { className: "flex justify-between gap-6", children: [_jsx("span", { className: "text-muted-foreground", children: "Tool Results:" }), _jsxs("div", { className: "flex gap-1 items-baseline", children: [_jsx("span", { children: contextSize.toolResultsTokens.toLocaleString() }), _jsxs("span", { className: "text-muted-foreground text-[10px]", children: ["(", calculatePercentage(contextSize.toolResultsTokens), ")"] })] })] })] }), _jsx("div", { className: "border-t border-border pt-2", children: _jsxs("div", { className: cn("flex justify-end gap-2 font-semibold", colorClass), children: [_jsx("span", { children: actualTokens.toLocaleString() }), _jsxs("span", { children: ["(", formattedPercentage, ")"] })] }) })] }) })] }) }));
 });
 ContextUsageButton.displayName = "ContextUsageButton";

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

@@ -0,0 +1,9 @@
+import type { ToolCall as ToolCallType } from "../../core/schemas/tool-call.js";
+export interface InvokingGroupProps {
+    toolCalls: ToolCallType[];
+}
+/**
+ * InvokingGroup component - displays a group of preliminary (invoking) tool calls
+ * Shows as "Invoking parallel operation (N)" with a summary of unique tool names
+ */
+export declare function InvokingGroup({ toolCalls }: InvokingGroupProps): import("react/jsx-runtime").JSX.Element;

package/dist/gui/components/InvokingGroup.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ListVideo } from "lucide-react";
+import React from "react";
+/**
+ * InvokingGroup component - displays a group of preliminary (invoking) tool calls
+ * Shows as "Invoking parallel operation (N)" with a summary of unique tool names
+ */
+export function InvokingGroup({ toolCalls }) {
+    // Get unique display names for the summary
+    const displayNames = toolCalls.map((tc) => tc.prettyName || tc.title);
+    const uniqueNames = [...new Set(displayNames)];
+    const summary = uniqueNames.length <= 2
+        ? uniqueNames.join(", ")
+        : `${uniqueNames.slice(0, 2).join(", ")} +${uniqueNames.length - 2} more`;
+    return (_jsxs("div", { className: "flex flex-col my-4", children: [_jsxs("div", { className: "flex items-center gap-1.5 text-paragraph-sm text-muted-foreground/50", children: [_jsx(ListVideo, { className: "h-3 w-3" }), _jsx("span", { children: "Invoking parallel operation" }), _jsx("span", { className: "text-[10px] bg-muted px-1.5 py-0.5 rounded text-muted-foreground/50", children: toolCalls.length })] }), _jsx("span", { className: "text-paragraph-sm text-muted-foreground/50 pl-4.5", children: summary })] }));
+}

package/dist/gui/components/MessageContent.js

@@ -3,9 +3,11 @@ import { cva } from "class-variance-authority";
 import * as React from "react";
 import { useChatStore } from "../../core/store/chat-store.js";
 import { cn } from "../lib/utils.js";
+import { InvokingGroup } from "./InvokingGroup.js";
 import { Reasoning } from "./Reasoning.js";
 import { Response } from "./Response.js";
 import { ToolCall } from "./ToolCall.js";
+import { ToolCallGroup } from "./ToolCallGroup.js";
 /**
  * MessageContent component inspired by shadcn.io/ai
  * Provides the content container with role-based styling
@@ -53,36 +55,150 @@ export const MessageContent = React.forwardRef(({ role: roleProp, variant, isStr
                         .slice()
                         .sort((a, b) => (a.contentPosition ?? Infinity) -
                         (b.contentPosition ?? Infinity));
+                    // Helper to check if a tool call is preliminary (invoking)
+                    const isPreliminary = (tc) => tc.status === "pending" &&
+                        (!tc.rawInput || Object.keys(tc.rawInput).length === 0);
+                    // Helper to group tool calls by batchId and consecutive preliminary calls
+                    const groupToolCalls = (toolCalls) => {
+                        const result = [];
+                        const batchGroups = new Map();
+                        let currentInvokingGroup = [];
+                        const flushInvokingGroup = () => {
+                            if (currentInvokingGroup.length > 1) {
+                                result.push({
+                                    type: "invoking",
+                                    toolCalls: currentInvokingGroup,
+                                });
+                            }
+                            else if (currentInvokingGroup.length === 1) {
+                                result.push(currentInvokingGroup[0]);
+                            }
+                            currentInvokingGroup = [];
+                        };
+                        for (const tc of toolCalls) {
+                            // Handle batch groups
+                            if (tc.batchId) {
+                                flushInvokingGroup();
+                                const existing = batchGroups.get(tc.batchId);
+                                if (existing) {
+                                    existing.push(tc);
+                                }
+                                else {
+                                    const group = [tc];
+                                    batchGroups.set(tc.batchId, group);
+                                    result.push({ type: "batch", toolCalls: group });
+                                }
+                            }
+                            // Handle consecutive preliminary (invoking) tool calls
+                            else if (isPreliminary(tc)) {
+                                currentInvokingGroup.push(tc);
+                            }
+                            // Regular tool call
+                            else {
+                                flushInvokingGroup();
+                                result.push(tc);
+                            }
+                        }
+                        // Flush any remaining invoking group
+                        flushInvokingGroup();
+                        return result;
+                    };
+                    // Helper to render a tool call or group
+                    const renderToolCallOrGroup = (item, index) => {
+                        // Batch group (parallel operations)
+                        if (typeof item === "object" &&
+                            "type" in item &&
+                            item.type === "batch") {
+                            return (_jsx(ToolCallGroup, { toolCalls: item.toolCalls }, `batch-${item.toolCalls[0]?.batchId || index}`));
+                        }
+                        // Invoking group (consecutive preliminary tool calls)
+                        if (typeof item === "object" &&
+                            "type" in item &&
+                            item.type === "invoking") {
+                            return (_jsx(InvokingGroup, { toolCalls: item.toolCalls }, `invoking-${item.toolCalls[0]?.id || index}`));
+                        }
+                        // Single tool call
+                        return (_jsx(ToolCall, { toolCall: item }, item.id));
+                    };
                     // If no tool calls or they don't have positions, render old way
                     if (sortedToolCalls.length === 0 ||
                         !sortedToolCalls.some((tc) => tc.contentPosition !== undefined)) {
-                        return (_jsxs(_Fragment, { children: [sortedToolCalls.length > 0 && (_jsx("div", { className: "flex flex-col gap-2 mb-1", children: sortedToolCalls.map((toolCall) => (_jsx(ToolCall, { toolCall: toolCall }, toolCall.id))) })), _jsx(Response, { content: message.content, isStreaming: message.isStreaming, showEmpty: false })] }));
+                        const groupedToolCalls = groupToolCalls(sortedToolCalls);
+                        return (_jsxs(_Fragment, { children: [groupedToolCalls.length > 0 && (_jsx("div", { className: "flex flex-col gap-2 mb-1", children: groupedToolCalls.map((item, index) => renderToolCallOrGroup(item, index)) })), _jsx(Response, { content: message.content, isStreaming: message.isStreaming, showEmpty: false })] }));
                     }
                     // Render content interleaved with tool calls
+                    // Group consecutive tool calls with the same batchId
                     const elements = [];
                     let currentPosition = 0;
-                    sortedToolCalls.forEach((toolCall) => {
+                    let currentBatch = [];
+                    let currentBatchId;
+                    const flushBatch = () => {
+                        if (currentBatch.length > 1 && currentBatchId) {
+                            elements.push(_jsx(ToolCallGroup, { toolCalls: currentBatch }, `group-${currentBatchId}`));
+                        }
+                        else if (currentBatch.length === 1) {
+                            elements.push(_jsx("div", { children: _jsx(ToolCall, { toolCall: currentBatch[0] }) }, `tool-${currentBatch[0].id}`));
+                        }
+                        currentBatch = [];
+                        currentBatchId = undefined;
+                    };
+                    // Separate preliminary tool calls - they should render at the end, not break text
+                    const preliminaryToolCalls = sortedToolCalls.filter(isPreliminary);
+                    const nonPreliminaryToolCalls = sortedToolCalls.filter((tc) => !isPreliminary(tc));
+                    // Process non-preliminary tool calls inline with text
+                    nonPreliminaryToolCalls.forEach((toolCall, index) => {
                         const position = toolCall.contentPosition ?? message.content.length;
                         // Add text before this tool call
                         if (position > currentPosition) {
+                            // Flush any pending batch before adding text
+                            flushBatch();
                             const textChunk = message.content.slice(currentPosition, position);
                             if (textChunk) {
                                 elements.push(_jsx(Response, { content: textChunk, isStreaming: false, showEmpty: false }, `text-before-${toolCall.id}`));
                             }
                         }
-                        // Add the tool call
-                        elements.push(_jsx("div", { children: _jsx(ToolCall, { toolCall: toolCall }) }, `tool-${toolCall.id}`));
+                        // Check if this tool call should be batched
+                        if (toolCall.batchId) {
+                            if (currentBatchId === toolCall.batchId) {
+                                // Same batch, add to current batch
+                                currentBatch.push(toolCall);
+                            }
+                            else {
+                                // Different batch, flush previous and start new
+                                flushBatch();
+                                currentBatchId = toolCall.batchId;
+                                currentBatch = [toolCall];
+                            }
+                        }
+                        else {
+                            // No batch ID, flush previous and render individually
+                            flushBatch();
+                            elements.push(_jsx("div", { children: _jsx(ToolCall, { toolCall: toolCall }) }, `tool-${toolCall.id}`));
+                        }
                         currentPosition = position;
+                        // Flush batch at the end
+                        if (index === nonPreliminaryToolCalls.length - 1) {
+                            flushBatch();
+                        }
                     });
-                    // Add remaining text after the last tool call
+                    // Add remaining text after the last non-preliminary tool call
                     if (currentPosition < message.content.length) {
                         const remainingText = message.content.slice(currentPosition);
                         if (remainingText) {
                             elements.push(_jsx(Response, { content: remainingText, isStreaming: message.isStreaming, showEmpty: false }, "text-end"));
                         }
                     }
+                    // Render preliminary (invoking) tool calls at the end, grouped
+                    if (preliminaryToolCalls.length > 0) {
+                        if (preliminaryToolCalls.length > 1) {
+                            elements.push(_jsx(InvokingGroup, { toolCalls: preliminaryToolCalls }, `invoking-group-${preliminaryToolCalls[0].id}`));
+                        }
+                        else {
+                            elements.push(_jsx("div", { children: _jsx(ToolCall, { toolCall: preliminaryToolCalls[0] }) }, `tool-${preliminaryToolCalls[0].id}`));
+                        }
+                    }
                     return _jsx(_Fragment, { children: elements });
-                })()) : (_jsx("div", { className: "whitespace-pre-wrap", children: message.content }))] }));
+                })()) : (_jsxs("div", { className: "flex flex-col gap-2", children: [message.images && message.images.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-2", children: message.images.map((image, index) => (_jsx("img", { src: `data:${image.mimeType};base64,${image.data}`, alt: `Attachment ${index + 1}`, className: "max-w-[200px] max-h-[200px] rounded-lg object-cover" }, index))) })), message.content && (_jsx("div", { className: "whitespace-pre-wrap", children: message.content }))] }))] }));
     }
     return (_jsx("div", { ref: ref, className: cn(messageContentVariants({ role, variant }), isStreaming && "animate-pulse-subtle", className), ...props, children: content }));
 });

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

@@ -8,7 +8,7 @@ export interface PanelTabsHeaderProps extends Omit<React.ComponentPropsWithoutRe
     /**
      * Which tabs to show
      */
-    visibleTabs?: ("todo" | "files" | "database" | "sources")[];
+    visibleTabs?: ("todo" | "files" | "database" | "sources" | "settings")[];
     /**
      * Styling variant
      */

package/dist/gui/components/PanelTabsHeader.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { CheckSquare, Database, FileText, Link2 } from "lucide-react";
+import { CheckSquare, Database, FileText, Link2, Settings } from "lucide-react";
 import * as React from "react";
 import { cn } from "../lib/utils.js";
 import { TabsList, TabsTrigger } from "./Tabs.js";
@@ -25,6 +25,11 @@ export const PanelTabsHeader = React.forwardRef(({ showIcons = true, visibleTabs
             label: "Sources",
             icon: Link2,
         },
+        {
+            id: "settings",
+            label: "Settings",
+            icon: Settings,
+        },
     ];
     const tabs = allTabs.filter((tab) => visibleTabs.includes(tab.id));
     const gap = variant === "compact" ? "gap-[4px]" : "gap-3";

package/dist/gui/components/Response.js

@@ -91,6 +91,8 @@ export const Response = React.forwardRef(({ content, isStreaming = false, showEm
         blockquote: ({ node, ...props }) => (_jsx("blockquote", { className: "border-l-4 border-[primary] pl-4 italic my-4 text-foreground bg-card py-2 rounded-r-md shadow-sm", ...props })),
         // Horizontal rule
         hr: ({ node, ...props }) => (_jsx("hr", { className: "my-6 border-t border-border opacity-50", ...props })),
+        // Image styling
+        img: ({ node, ...props }) => (_jsx("img", { className: "max-w-full h-auto rounded-md border border-border my-4", loading: "lazy", ...props })),
     };
     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 }) }));
 });

package/dist/gui/components/Task.js

@@ -30,8 +30,8 @@ export const Task = React.forwardRef(({ task, collapsible = true, defaultExpande
     };
     return (_jsxs("div", { ref: ref, className: cn("rounded-lg border border-border bg-card transition-all", "hover:shadow-sm hover:border-border/80", className), ...props, children: [_jsxs("button", { type: "button", onClick: handleClick, className: cn("w-full flex items-center gap-3 px-3 py-2.5 text-left", hasDetails && collapsible && "cursor-pointer"), disabled: !hasDetails && !collapsible, children: [_jsx(StatusIcon, { className: cn("w-4 h-4 shrink-0", getStatusColor(), task.status === "in_progress" && "animate-spin") }), _jsx("span", { className: cn("flex-1 text-paragraph-sm font-[var(--font-family)]", task.status === "completed" && "line-through opacity-60", task.status === "in_progress" && "font-medium"), children: task.text }), hasDetails && collapsible && (_jsx(ChevronDown, { className: cn("w-4 h-4 text-foreground opacity-50 transition-transform duration-200 shrink-0", isExpanded && "rotate-180"), "aria-hidden": "true" }))] }), hasDetails && isExpanded && (_jsxs("div", { className: "px-3 pb-3 pt-1 border-t border-border/50 animate-fadeIn", children: [task.details && (_jsx("p", { className: "text-paragraph-sm text-foreground opacity-80 leading-relaxed mb-2", children: task.details })), task.files && task.files.length > 0 && (_jsxs("div", { className: "space-y-1", children: [_jsx("span", { className: "text-caption font-medium text-foreground opacity-60 uppercase tracking-wide", children: "Files:" }), _jsx("div", { className: "space-y-1", children: task.files.map((file) => (_jsx("div", { className: "text-caption font-mono text-foreground opacity-70 bg-background px-2 py-1 rounded border border-border/50", children: file }, file))) })] }))] }))] }));
 });
-Task.displayName = "Task";
-export const TaskList = React.forwardRef(({ tasks, collapsible = true, onTaskClick, emptyMessage = "No tasks yet.", className, ...props }, ref) => {
+Task.displayName = "Subagent";
+export const TaskList = React.forwardRef(({ tasks, collapsible = true, onTaskClick, emptyMessage = "No subagents yet.", className, ...props }, ref) => {
     return (_jsx("div", { ref: ref, className: cn("space-y-2 max-h-96 overflow-y-auto", className), ...props, children: tasks.length === 0 ? (_jsx("p", { className: "text-paragraph-sm text-foreground opacity-60 italic py-4 text-center", children: emptyMessage })) : (tasks.map((task) => (_jsx(Task, { task: task, collapsible: collapsible, ...(onTaskClick ? { onTaskClick } : {}) }, task.id)))) }));
 });
-TaskList.displayName = "TaskList";
+TaskList.displayName = "SubagentList";

package/dist/gui/components/TodoListItem.js

@@ -15,7 +15,7 @@ export const TodoListItem = React.forwardRef(({ todo, className, ...props }, ref
         // 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", 
+        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", 
                 // Completed state: strikethrough + muted color
                 isCompleted && "line-through text-muted-foreground", 
                 // In-progress state: medium weight for emphasis