@townco/ui 0.1.33 → 0.1.35

package/dist/gui/components/MessageContent.js

@@ -62,14 +62,14 @@ function WaitingElapsedTime({ startTime }) {
     }, []);
     const seconds = (elapsed / 1000).toFixed(1);
     const animatedDots = DOT_ANIMATIONS[dotIndex];
-    return (_jsxs("span", { className: "text-muted-foreground text-sm", children: [thinkingWord, animatedDots, " ", seconds, "s"] }));
+    return (_jsxs("span", { className: "text-muted-foreground text-paragraph-sm", children: [thinkingWord, animatedDots, " ", seconds, "s"] }));
 }
-const messageContentVariants = cva("w-full px-4 py-3 rounded-xl text-[var(--font-size)] font-[var(--font-family)] leading-relaxed break-words transition-colors", {
+const messageContentVariants = cva("w-full rounded-2xl text-[var(--font-size)] font-[var(--font-family)] leading-relaxed break-words transition-colors", {
     variants: {
         role: {
-            user: "bg-primary text-primary-foreground shadow-sm",
-            assistant: "text-foreground",
-            system: "bg-card border border-border text-foreground opacity-80 text-sm",
+            user: "bg-secondary text-foreground px-4 py-4 text-paragraph",
+            assistant: "text-foreground text-paragraph-sm",
+            system: "bg-card border border-border text-foreground opacity-80 text-caption px-4 py-3",
         },
         variant: {
             default: "",
@@ -109,7 +109,7 @@ export const MessageContent = React.forwardRef(({ role: roleProp, variant, isStr
                     // 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-3", children: sortedToolCalls.map((toolCall) => (_jsx(ToolCall, { toolCall: toolCall }, toolCall.id))) })), _jsx(Response, { content: message.content, isStreaming: message.isStreaming, showEmpty: false })] }));
+                        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 })] }));
                     }
                     // Render content interleaved with tool calls
                     const elements = [];
@@ -124,7 +124,7 @@ export const MessageContent = React.forwardRef(({ role: roleProp, variant, isStr
                             }
                         }
                         // Add the tool call
-                        elements.push(_jsx("div", { className: "my-2", children: _jsx(ToolCall, { toolCall: toolCall }) }, `tool-${toolCall.id}`));
+                        elements.push(_jsx("div", { children: _jsx(ToolCall, { toolCall: toolCall }) }, `tool-${toolCall.id}`));
                         currentPosition = position;
                     });
                     // Add remaining text after the last tool call
@@ -135,7 +135,7 @@ export const MessageContent = React.forwardRef(({ role: roleProp, variant, isStr
                         }
                     }
                     return _jsx(_Fragment, { children: elements });
-                })()) : (_jsx("div", { className: "whitespace-pre-wrap", children: message.content })), message.role === "assistant" && message.tokenUsage && (_jsx("div", { className: "mt-3 pt-2 border-t border-border/30 text-xs text-muted-foreground/60", children: _jsxs("span", { children: ["Context:", " ", formatTokenPercentage(message.tokenUsage.totalTokens ?? 0, currentModel ?? undefined), " ", "(", (message.tokenUsage.totalTokens ?? 0).toLocaleString(), " ", "tokens)"] }) }))] }));
+                })()) : (_jsx("div", { className: "whitespace-pre-wrap", children: message.content })), message.role === "assistant" && message.tokenUsage && (_jsx("div", { className: "mt-3 pt-2 border-t border-border/30 text-caption text-muted-foreground/60", children: _jsxs("span", { children: ["Context:", " ", formatTokenPercentage(message.tokenUsage.totalTokens ?? 0, currentModel ?? undefined), " ", "(", (message.tokenUsage.totalTokens ?? 0).toLocaleString(), " ", "tokens)"] }) }))] }));
     }
     return (_jsx("div", { ref: ref, className: cn(messageContentVariants({ role, variant }), isStreaming && "animate-pulse-subtle", className), ...props, children: content }));
 });

package/dist/gui/components/PanelTabsHeader.js

@@ -30,7 +30,7 @@ export const PanelTabsHeader = React.forwardRef(({ showIcons = true, visibleTabs
     const gap = variant === "compact" ? "gap-[4px]" : "gap-3";
     return (_jsx(TabsList, { ref: ref, className: cn("w-full justify-start bg-transparent p-0 h-auto", gap, className), ...props, children: tabs.map((tab) => {
             const Icon = tab.icon;
-            return (_jsxs(TabsTrigger, { value: tab.id, className: cn("gap-2 px-3 py-1.5 rounded-lg text-sm font-medium", "data-[state=active]:bg-zinc-100 data-[state=active]:text-foreground", "data-[state=inactive]:text-muted-foreground"), children: [showIcons && Icon && _jsx(Icon, { className: "size-4" }), tab.label] }, tab.id));
+            return (_jsxs(TabsTrigger, { value: tab.id, className: cn("gap-2 px-3 py-1.5 rounded-lg text-paragraph-sm font-medium", "data-[state=active]:bg-zinc-100 data-[state=active]:text-foreground", "data-[state=inactive]:text-muted-foreground"), children: [showIcons && Icon && _jsx(Icon, { className: "size-4" }), tab.label] }, tab.id));
         }) }));
 });
 PanelTabsHeader.displayName = "PanelTabsHeader";

package/dist/gui/components/Reasoning.js

@@ -59,12 +59,12 @@ export const Reasoning = React.forwardRef(({ content, isStreaming = false, mode
     }
     // Inline mode - always visible
     if (mode === "inline") {
-        return (_jsxs("div", { ref: ref, className: cn(reasoningContainerVariants({ variant }), "p-3", className), children: [_jsxs("div", { className: "flex items-start gap-2 mb-2", children: [_jsx("span", { className: "text-xs font-medium text-foreground opacity-60 uppercase tracking-wide", children: label }), isStreaming && (_jsx("span", { className: "inline-block w-2 h-2 bg-primary rounded-full animate-pulse" }))] }), _jsxs("div", { className: "text-sm italic text-foreground opacity-80 leading-relaxed whitespace-pre-wrap", children: [content, isStreaming && content && (_jsx("span", { className: "inline-block animate-typing text-primary", children: "..." }))] })] }));
+        return (_jsxs("div", { ref: ref, className: cn(reasoningContainerVariants({ variant }), "p-3", className), children: [_jsxs("div", { className: "flex items-start gap-2 mb-2", children: [_jsx("span", { className: "text-caption font-medium text-foreground opacity-60 uppercase tracking-wide", children: label }), isStreaming && (_jsx("span", { className: "inline-block w-2 h-2 bg-primary rounded-full animate-pulse" }))] }), _jsxs("div", { className: "text-paragraph-sm italic text-foreground opacity-80 leading-relaxed whitespace-pre-wrap", children: [content, isStreaming && content && (_jsx("span", { className: "inline-block animate-typing text-primary", children: "..." }))] })] }));
     }
     // Collapsible mode
     return (_jsxs("div", { ref: ref, className: cn("mb-3", className), children: [_jsxs("button", { type: "button", onClick: () => {
                     setIsExpanded(!isExpanded);
                     setShouldAutoCollapse(false); // Disable auto-collapse on manual interaction
-                }, className: "w-full flex items-center justify-between p-2.5 rounded-lg bg-card border border-border hover:bg-card/80 hover:shadow-sm transition-all text-left", "aria-expanded": isExpanded, "aria-label": `${isExpanded ? "Collapse" : "Expand"} reasoning`, children: [_jsxs("div", { className: "flex items-center gap-2 flex-1 min-w-0", children: [_jsx("span", { className: "text-xs font-medium text-foreground opacity-60 uppercase tracking-wide shrink-0", children: label }), isStreaming && (_jsx("span", { className: "inline-block w-2 h-2 bg-primary rounded-full animate-pulse shrink-0" })), !isExpanded && content && (_jsxs("span", { className: "text-xs text-foreground opacity-50 truncate", children: [content.substring(0, 60), content.length > 60 && "..."] }))] }), _jsx(ChevronDown, { className: reasoningIconVariants({ expanded: isExpanded }), "aria-hidden": "true" })] }), isExpanded && (_jsx("div", { className: cn(reasoningContainerVariants({ variant }), "mt-2 p-3 animate-fadeIn"), children: _jsxs("div", { className: "text-sm italic text-foreground opacity-80 leading-relaxed whitespace-pre-wrap", children: [content, isStreaming && content && (_jsx("span", { className: "inline-block animate-typing text-primary", children: "..." }))] }) }))] }));
+                }, className: "w-full flex items-center justify-between p-2.5 rounded-lg bg-card border border-border hover:bg-card/80 hover:shadow-sm transition-all text-left", "aria-expanded": isExpanded, "aria-label": `${isExpanded ? "Collapse" : "Expand"} reasoning`, children: [_jsxs("div", { className: "flex items-center gap-2 flex-1 min-w-0", children: [_jsx("span", { className: "text-caption font-medium text-foreground opacity-60 uppercase tracking-wide shrink-0", children: label }), isStreaming && (_jsx("span", { className: "inline-block w-2 h-2 bg-primary rounded-full animate-pulse shrink-0" })), !isExpanded && content && (_jsxs("span", { className: "text-caption text-foreground opacity-50 truncate", children: [content.substring(0, 60), content.length > 60 && "..."] }))] }), _jsx(ChevronDown, { className: reasoningIconVariants({ expanded: isExpanded }), "aria-hidden": "true" })] }), isExpanded && (_jsx("div", { className: cn(reasoningContainerVariants({ variant }), "mt-2 p-3 animate-fadeIn"), children: _jsxs("div", { className: "text-paragraph-sm italic text-foreground opacity-80 leading-relaxed whitespace-pre-wrap", children: [content, isStreaming && content && (_jsx("span", { className: "inline-block animate-typing text-primary", children: "..." }))] }) }))] }));
 });
 Reasoning.displayName = "Reasoning";

package/dist/gui/components/Response.js

@@ -6,7 +6,7 @@ import { cn } from "../lib/utils.js";
 export const Response = React.forwardRef(({ content, isStreaming = false, showEmpty = true, emptyMessage = "", className, ...props }, ref) => {
     // Show empty state during streaming if no content yet
     if (!content && isStreaming && showEmpty) {
-        return (_jsx("div", { ref: ref, className: cn("opacity-70 italic text-sm", className), ...props, children: emptyMessage }));
+        return (_jsx("div", { ref: ref, className: cn("opacity-70 italic text-paragraph-sm", className), ...props, children: emptyMessage }));
     }
     if (!content) {
         return null;
@@ -30,16 +30,16 @@ export const Response = React.forwardRef(({ content, isStreaming = false, showEm
         code: ({ node, ...props }) => {
             const inline = !props.className?.includes("language-");
             if (inline) {
-                return (_jsx("code", { className: "px-1.5 py-0.5 bg-card border border-border rounded text-sm font-mono text-foreground", ...props }));
+                return (_jsx("code", { className: "px-1.5 py-0.5 bg-card border border-border rounded text-code text-foreground", ...props }));
             }
-            return (_jsx("code", { className: "block p-4 bg-card border border-border rounded-md overflow-x-auto text-sm font-mono text-foreground shadow-sm", ...props }));
+            return (_jsx("code", { className: "block p-4 bg-card border border-border rounded-md overflow-x-auto text-code text-foreground shadow-sm", ...props }));
         },
         pre: ({ node, ...props }) => (_jsx("pre", { className: "my-4 rounded-lg", ...props })),
         // Heading styling with improved hierarchy
-        h1: ({ node, ...props }) => (_jsx("h1", { className: "text-2xl font-bold mt-6 mb-4 text-foreground border-b border-border pb-2", ...props })),
-        h2: ({ node, ...props }) => (_jsx("h2", { className: "text-xl font-semibold mt-5 mb-3 text-foreground border-b border-border/50 pb-1.5", ...props })),
-        h3: ({ node, ...props }) => (_jsx("h3", { className: "text-lg font-semibold mt-4 mb-2 text-foreground", ...props })),
-        h4: ({ node, ...props }) => (_jsx("h4", { className: "text-base font-semibold mt-3 mb-2 text-foreground", ...props })),
+        h1: ({ node, ...props }) => (_jsx("h1", { className: "text-heading-3 mt-6 mb-4 text-foreground border-b border-border pb-2", ...props })),
+        h2: ({ node, ...props }) => (_jsx("h2", { className: "text-subheading mt-5 mb-3 text-foreground border-b border-border/50 pb-1.5", ...props })),
+        h3: ({ node, ...props }) => (_jsx("h3", { className: "text-subheading mt-4 mb-2 text-foreground", ...props })),
+        h4: ({ node, ...props }) => (_jsx("h4", { className: "text-paragraph-sm font-semibold mt-3 mb-2 text-foreground", ...props })),
         // List styling
         ul: ({ node, ...props }) => {
             // Check if this is a task list by looking for checkbox inputs in children
@@ -62,9 +62,11 @@ export const Response = React.forwardRef(({ content, isStreaming = false, showEm
                     grandChild.properties !== null &&
                     "type" in grandChild.properties &&
                     grandChild.properties.type === "checkbox"));
-            return (_jsx("ul", { className: cn("my-2 space-y-1 text-foreground", isTaskList ? "list-none space-y-2" : "list-disc list-inside"), ...props }));
+            return (_jsx("ul", { className: cn("my-2 space-y-1 text-foreground", isTaskList
+                    ? "list-none space-y-2"
+                    : "list-disc list-outside pl-4"), ...props }));
         },
-        ol: ({ node, ...props }) => (_jsx("ol", { className: "list-decimal list-inside my-2 space-y-1 text-foreground", ...props })),
+        ol: ({ node, ...props }) => (_jsx("ol", { className: "list-decimal list-outside pl-4 my-2 space-y-1 text-foreground", ...props })),
         // List item styling
         li: ({ node, ...props }) => {
             // Check if this li contains a checkbox (task list item)
@@ -79,12 +81,12 @@ export const Response = React.forwardRef(({ content, isStreaming = false, showEm
                 child.properties !== null &&
                 "type" in child.properties &&
                 child.properties.type === "checkbox");
-            return (_jsx("li", { className: cn("flex items-start", isTaskListItem ? "gap-2" : "ml-2"), ...props }));
+            return (_jsx("li", { className: cn(isTaskListItem ? "flex items-start gap-2" : ""), ...props }));
         },
         // Link styling with hover effect
         a: ({ node, ...props }) => (_jsx("a", { className: "text-primary hover:underline decoration-2 underline-offset-2 transition-all", target: "_blank", rel: "noopener noreferrer", ...props })),
         // Paragraph styling
-        p: ({ node, ...props }) => (_jsx("p", { className: "my-2 text-foreground leading-relaxed", ...props })),
+        p: ({ node, ...props }) => (_jsx("p", { className: "mb-2 text-foreground leading-relaxed", ...props })),
         // Blockquote styling with enhanced visual
         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

package/dist/gui/components/Select.js

@@ -6,7 +6,7 @@ import { cn } from "../lib/utils.js";
 const Select = SelectPrimitive.Root;
 const SelectGroup = SelectPrimitive.Group;
 const SelectValue = SelectPrimitive.Value;
-const SelectTrigger = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(SelectPrimitive.Trigger, { ref: ref, className: cn("flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1", className), ...props, children: [children, _jsx(SelectPrimitive.Icon, { asChild: true, children: _jsx(ChevronsUpDown, { className: "h-4 w-4 opacity-50" }) })] })));
+const SelectTrigger = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(SelectPrimitive.Trigger, { ref: ref, className: cn("flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-paragraph-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1", className), ...props, children: [children, _jsx(SelectPrimitive.Icon, { asChild: true, children: _jsx(ChevronsUpDown, { className: "h-4 w-4 opacity-50" }) })] })));
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
 const SelectScrollUpButton = React.forwardRef(({ className, ...props }, ref) => (_jsx(SelectPrimitive.ScrollUpButton, { ref: ref, className: cn("flex cursor-default items-center justify-center py-1", className), ...props, children: _jsx(ChevronUp, { className: "h-4 w-4" }) })));
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
@@ -17,9 +17,9 @@ const SelectContent = React.forwardRef(({ className, children, position = "poppe
             "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className), position: position, ...props, children: [_jsx(SelectScrollUpButton, {}), _jsx(SelectPrimitive.Viewport, { className: cn("p-1", position === "popper" &&
                     "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"), children: children }), _jsx(SelectScrollDownButton, {})] }) })));
 SelectContent.displayName = SelectPrimitive.Content.displayName;
-const SelectLabel = React.forwardRef(({ className, ...props }, ref) => (_jsx(SelectPrimitive.Label, { ref: ref, className: cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className), ...props })));
+const SelectLabel = React.forwardRef(({ className, ...props }, ref) => (_jsx(SelectPrimitive.Label, { ref: ref, className: cn("py-1.5 pl-8 pr-2 text-paragraph-sm font-semibold", className), ...props })));
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
-const SelectItem = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(SelectPrimitive.Item, { ref: ref, className: cn("relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className), ...props, children: [_jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: _jsx(SelectPrimitive.ItemIndicator, { children: _jsx(Check, { className: "h-4 w-4" }) }) }), _jsx(SelectPrimitive.ItemText, { children: children })] })));
+const SelectItem = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(SelectPrimitive.Item, { ref: ref, className: cn("relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-paragraph-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className), ...props, children: [_jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: _jsx(SelectPrimitive.ItemIndicator, { children: _jsx(Check, { className: "h-4 w-4" }) }) }), _jsx(SelectPrimitive.ItemText, { children: children })] })));
 SelectItem.displayName = SelectPrimitive.Item.displayName;
 const SelectSeparator = React.forwardRef(({ className, ...props }, ref) => (_jsx(SelectPrimitive.Separator, { ref: ref, className: cn("-mx-1 my-1 h-px bg-muted", className), ...props })));
 SelectSeparator.displayName = SelectPrimitive.Separator.displayName;

package/dist/gui/components/SourceListItem.js

@@ -2,6 +2,6 @@ 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-xs 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-xs leading-relaxed text-muted-foreground line-clamp-3", children: source.snippet })] })] }));
+    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 })] })] }));
 });
 SourceListItem.displayName = "SourceListItem";

package/dist/gui/components/Tabs.js

@@ -5,7 +5,7 @@ import { cn } from "../lib/utils.js";
 const Tabs = TabsPrimitive.Root;
 const TabsList = React.forwardRef(({ className, ...props }, ref) => (_jsx(TabsPrimitive.List, { ref: ref, className: cn("inline-flex h-10 items-center rounded-md bg-muted p-1 text-muted-foreground gap-1", className), ...props })));
 TabsList.displayName = TabsPrimitive.List.displayName;
-const TabsTrigger = React.forwardRef(({ className, ...props }, ref) => (_jsx(TabsPrimitive.Trigger, { ref: ref, className: cn("inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm", className), ...props })));
+const TabsTrigger = React.forwardRef(({ className, ...props }, ref) => (_jsx(TabsPrimitive.Trigger, { ref: ref, className: cn("inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-paragraph-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm", className), ...props })));
 TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
 const TabsContent = React.forwardRef(({ className, ...props }, ref) => (_jsx(TabsPrimitive.Content, { ref: ref, className: cn("mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", className), ...props })));
 TabsContent.displayName = TabsPrimitive.Content.displayName;

package/dist/gui/components/Task.js

@@ -28,10 +28,10 @@ export const Task = React.forwardRef(({ task, collapsible = true, defaultExpande
         }
         onTaskClick?.(task);
     };
-    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-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-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-xs 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-xs font-mono text-foreground opacity-70 bg-background px-2 py-1 rounded border border-border/50", children: file }, file))) })] }))] }))] }));
+    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) => {
-    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-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)))) }));
+    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";

package/dist/gui/components/Textarea.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import * as React from "react";
 import { cn } from "../lib/utils.js";
-const textareaVariants = cva("flex min-h-[80px] w-full rounded-md border bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 resize-none", {
+const textareaVariants = cva("flex min-h-[80px] w-full rounded-md border bg-background px-3 py-2 text-paragraph-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 resize-none", {
     variants: {
         variant: {
             default: "border-input focus-visible:ring-ring",

package/dist/gui/components/ThinkingBlock.js

@@ -33,8 +33,8 @@ export function ThinkingBlock({ thinking, isStreaming, displayMode = "collapsibl
     }
     // Inline mode - always visible
     if (displayMode === "inline") {
-        return (_jsxs("div", { className: cn(thinkingBlockVariants({ variant }), className), children: [_jsxs("div", { className: "flex items-start gap-2", children: [_jsx("span", { className: "text-xs font-medium text-foreground opacity-60 uppercase tracking-wide", children: "Thinking" }), isStreaming && (_jsx("span", { className: "inline-block w-2 h-2 bg-primary rounded-full animate-pulse" }))] }), _jsxs("div", { className: "mt-2 text-sm italic text-foreground opacity-80 leading-relaxed whitespace-pre-wrap", children: [thinking, isStreaming && thinking && (_jsx("span", { className: "inline-block animate-typing", children: "..." }))] })] }));
+        return (_jsxs("div", { className: cn(thinkingBlockVariants({ variant }), className), children: [_jsxs("div", { className: "flex items-start gap-2", children: [_jsx("span", { className: "text-caption font-medium text-foreground opacity-60 uppercase tracking-wide", children: "Thinking" }), isStreaming && (_jsx("span", { className: "inline-block w-2 h-2 bg-primary rounded-full animate-pulse" }))] }), _jsxs("div", { className: "mt-2 text-paragraph-sm italic text-foreground opacity-80 leading-relaxed whitespace-pre-wrap", children: [thinking, isStreaming && thinking && (_jsx("span", { className: "inline-block animate-typing", children: "..." }))] })] }));
     }
     // Collapsible mode
-    return (_jsxs("div", { className: cn("mb-3", className), children: [_jsxs("button", { type: "button", onClick: () => setIsExpanded(!isExpanded), className: "w-full flex items-center justify-between p-2 rounded-lg bg-card border border-border hover:bg-card transition-colors text-left", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-xs font-medium text-foreground opacity-60 uppercase tracking-wide", children: "Thinking" }), isStreaming && (_jsx("span", { className: "inline-block w-2 h-2 bg-primary rounded-full animate-pulse" })), !isExpanded && thinking && (_jsxs("span", { className: "text-xs text-foreground opacity-50 truncate max-w-[200px]", children: [thinking.substring(0, 50), "..."] }))] }), _jsx(ChevronDown, { className: thinkingIconVariants({ expanded: isExpanded }) })] }), isExpanded && (_jsx("div", { className: cn(thinkingBlockVariants({ variant }), "mt-2"), children: _jsxs("div", { className: "text-sm italic text-foreground opacity-80 leading-relaxed whitespace-pre-wrap", children: [thinking, isStreaming && thinking && (_jsx("span", { className: "inline-block animate-typing", children: "..." }))] }) }))] }));
+    return (_jsxs("div", { className: cn("mb-3", className), children: [_jsxs("button", { type: "button", onClick: () => setIsExpanded(!isExpanded), className: "w-full flex items-center justify-between p-2 rounded-lg bg-card border border-border hover:bg-card transition-colors text-left", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-caption font-medium text-foreground opacity-60 uppercase tracking-wide", children: "Thinking" }), isStreaming && (_jsx("span", { className: "inline-block w-2 h-2 bg-primary rounded-full animate-pulse" })), !isExpanded && thinking && (_jsxs("span", { className: "text-caption text-foreground opacity-50 truncate max-w-[200px]", children: [thinking.substring(0, 50), "..."] }))] }), _jsx(ChevronDown, { className: thinkingIconVariants({ expanded: isExpanded }) })] }), isExpanded && (_jsx("div", { className: cn(thinkingBlockVariants({ variant }), "mt-2"), children: _jsxs("div", { className: "text-paragraph-sm italic text-foreground opacity-80 leading-relaxed whitespace-pre-wrap", children: [thinking, isStreaming && thinking && (_jsx("span", { className: "inline-block animate-typing", children: "..." }))] }) }))] }));
 }

package/dist/gui/components/TodoList.js

@@ -6,6 +6,6 @@ export const TodoList = React.forwardRef(({ client, todos, className, ...props }
     // For now, just use prop-based todos
     // Future: Add hook to get todos from store when available
     const todosToDisplay = todos || [];
-    return (_jsx("div", { ref: ref, className: cn("space-y-2 max-h-64 overflow-y-auto", className), ...props, children: todosToDisplay.length === 0 ? (_jsx("p", { className: "text-sm text-foreground opacity-60 italic", children: "No tasks yet." })) : (todosToDisplay.map((todo) => (_jsx(TodoListItem, { todo: todo }, todo.id)))) }));
+    return (_jsx("div", { ref: ref, className: cn("space-y-2 max-h-64 overflow-y-auto", className), ...props, children: todosToDisplay.length === 0 ? (_jsx("p", { className: "text-paragraph-sm text-foreground opacity-60 italic", children: "No tasks yet." })) : (todosToDisplay.map((todo) => (_jsx(TodoListItem, { todo: todo }, todo.id)))) }));
 });
 TodoList.displayName = "TodoList";

package/dist/gui/components/ToolCall.js

@@ -1,16 +1,7 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import JsonView from "@uiw/react-json-view";
-import { Wrench } from "lucide-react";
+import { ChevronDown, Wrench } from "lucide-react";
 import { useState } from "react";
-/**
- * Tool call status badge styles
- */
-const statusStyles = {
-    pending: "bg-transparent text-muted-foreground",
-    in_progress: "bg-transparent text-muted-foreground",
-    completed: "bg-transparent text-muted-foreground",
-    failed: "bg-transparent text-muted-foreground",
-};
 /**
  * Tool call kind icons (using emoji for simplicity)
  */
@@ -31,70 +22,76 @@ const _kindIcons = {
  */
 export function ToolCall({ toolCall }) {
     const [isExpanded, setIsExpanded] = useState(false);
-    return (_jsxs("div", { className: "flex flex-col", children: [_jsxs("button", { type: "button", className: "flex items-center gap-1.5 cursor-pointer bg-transparent border-none p-0 text-left group w-fit", onClick: () => setIsExpanded(!isExpanded), "aria-expanded": isExpanded, children: [_jsxs("span", { className: `inline-flex items-center gap-1.5 px-2 py-1 text-xs font-medium rounded ${statusStyles[toolCall.status]}`, children: [_jsx(Wrench, { className: "h-3 w-3" }), _jsx("span", { children: toolCall.title }), toolCall.status === "completed" && _jsx("span", { children: "\u2713" })] }), _jsx("span", { className: "text-muted-foreground text-xs opacity-0 group-hover:opacity-100 transition-opacity", children: isExpanded ? "▲" : "▼" })] }), isExpanded && (_jsxs("div", { className: "mt-2 space-y-3 text-sm border border-border rounded-md p-3 bg-card shadow-sm max-w-full", children: [toolCall.locations && toolCall.locations.length > 0 && (_jsxs("div", { children: [_jsx("div", { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wide mb-1.5", children: "Files" }), _jsx("ul", { className: "space-y-1", children: toolCall.locations.map((loc) => (_jsxs("li", { className: "font-mono text-xs text-foreground bg-muted px-2 py-1 rounded", children: [loc.path, loc.line !== null &&
+    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 &&
                                             loc.line !== undefined &&
-                                            `:${loc.line}`] }, `${loc.path}:${loc.line ?? ""}`))) })] })), toolCall.rawInput && Object.keys(toolCall.rawInput).length > 0 && (_jsxs("div", { children: [_jsx("div", { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wide mb-1.5", children: "Input" }), _jsx("div", { className: "bg-muted p-2 rounded border border-border", children: _jsx(JsonView, { value: toolCall.rawInput, collapsed: false, displayDataTypes: false, displayObjectSize: false, enableClipboard: true, style: { fontSize: "11px", backgroundColor: "transparent" } }) })] })), toolCall.content && toolCall.content.length > 0 && (_jsxs("div", { children: [_jsx("div", { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wide mb-1.5", children: "Output" }), _jsx("div", { className: "space-y-2", children: toolCall.content.map((block, idx) => {
-                                    // Generate a stable key based on content
-                                    const getBlockKey = () => {
-                                        if (block.type === "diff" && "path" in block) {
-                                            return `diff-${block.path}-${idx}`;
-                                        }
-                                        if (block.type === "terminal" && "terminalId" in block) {
-                                            return `terminal-${block.terminalId}`;
-                                        }
-                                        if (block.type === "text" && "text" in block) {
-                                            return `text-${block.text.substring(0, 20)}-${idx}`;
-                                        }
+                                            `:${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",
+                                        backgroundColor: "transparent",
+                                        fontFamily: "inherit",
+                                    } }) })] })), (toolCall.content && toolCall.content.length > 0) ||
+                        toolCall.error ? (_jsxs("div", { className: "p-3 border-b border-zinc-200 last:border-0", children: [_jsx("div", { className: "text-[10px] font-bold text-zinc-400 uppercase tracking-wider mb-1.5 font-sans", children: "Output" }), _jsxs("div", { className: "space-y-2 text-[11px] text-zinc-700", children: [toolCall.content?.map((block, idx) => {
+                                        // Generate a stable key based on content
+                                        const getBlockKey = () => {
+                                            if (block.type === "diff" && "path" in block) {
+                                                return `diff-${block.path}-${idx}`;
+                                            }
+                                            if (block.type === "terminal" && "terminalId" in block) {
+                                                return `terminal-${block.terminalId}`;
+                                            }
+                                            if (block.type === "text" && "text" in block) {
+                                                return `text-${block.text.substring(0, 20)}-${idx}`;
+                                            }
+                                            if (block.type === "content" && "content" in block) {
+                                                const innerContent = block.content;
+                                                return `content-${innerContent.text?.substring(0, 20)}-${idx}`;
+                                            }
+                                            return `block-${idx}`;
+                                        };
+                                        // Helper to render text content (with JSON parsing if applicable)
+                                        const renderTextContent = (text, key) => {
+                                            // Try to parse as JSON
+                                            try {
+                                                const parsed = JSON.parse(text);
+                                                // If it's an object or array, render with JsonView
+                                                if (typeof parsed === "object" && parsed !== null) {
+                                                    return (_jsx("div", { className: "text-[11px]", children: _jsx(JsonView, { value: parsed, collapsed: false, displayDataTypes: false, displayObjectSize: false, enableClipboard: true, style: {
+                                                                fontSize: "11px",
+                                                                backgroundColor: "transparent",
+                                                                fontFamily: "inherit",
+                                                            } }) }, key));
+                                                }
+                                            }
+                                            catch {
+                                                // Not valid JSON, render as plain text
+                                            }
+                                            // Render as plain text
+                                            return (_jsx("pre", { className: "whitespace-pre-wrap font-mono text-[11px] text-zinc-700 overflow-x-auto", children: text }, key));
+                                        };
+                                        // Handle nested content blocks (ACP format)
                                         if (block.type === "content" && "content" in block) {
                                             const innerContent = block.content;
-                                            return `content-${innerContent.text?.substring(0, 20)}-${idx}`;
-                                        }
-                                        return `block-${idx}`;
-                                    };
-                                    // Helper to render text content (with JSON parsing if applicable)
-                                    const renderTextContent = (text, key) => {
-                                        // Try to parse as JSON
-                                        try {
-                                            const parsed = JSON.parse(text);
-                                            // If it's an object or array, render with JsonView
-                                            if (typeof parsed === "object" && parsed !== null) {
-                                                return (_jsx("div", { className: "bg-muted p-2 rounded border border-border", children: _jsx(JsonView, { value: parsed, collapsed: false, displayDataTypes: false, displayObjectSize: false, enableClipboard: true, style: {
-                                                            fontSize: "11px",
-                                                            backgroundColor: "transparent",
-                                                        } }) }, key));
+                                            if (innerContent.type === "text" && innerContent.text) {
+                                                return renderTextContent(innerContent.text, getBlockKey());
                                             }
                                         }
-                                        catch {
-                                            // Not valid JSON, render as plain text
+                                        // Handle direct text blocks
+                                        if (block.type === "text" && "text" in block) {
+                                            return renderTextContent(block.text, getBlockKey());
+                                        }
+                                        // Handle diff blocks
+                                        if (block.type === "diff" &&
+                                            "path" in block &&
+                                            "oldText" in block &&
+                                            "newText" in block) {
+                                            return (_jsxs("div", { className: "border border-zinc-200 rounded bg-white", children: [_jsxs("div", { className: "bg-zinc-50 px-2 py-1 text-[10px] font-mono text-zinc-500 border-b border-zinc-200", children: [block.path, "line" in block &&
+                                                                block.line !== null &&
+                                                                block.line !== undefined &&
+                                                                `:${block.line}`] }), _jsxs("div", { className: "p-2 font-mono text-[11px]", children: [_jsxs("div", { className: "text-red-600", children: ["- ", block.oldText] }), _jsxs("div", { className: "text-green-600", children: ["+ ", block.newText] })] })] }, getBlockKey()));
                                         }
-                                        // Render as plain text
-                                        return (_jsx("pre", { className: "bg-muted p-2.5 rounded border border-border text-xs overflow-x-auto font-mono text-foreground", children: text }, key));
-                                    };
-                                    // Handle nested content blocks (ACP format)
-                                    if (block.type === "content" && "content" in block) {
-                                        const innerContent = block.content;
-                                        if (innerContent.type === "text" && innerContent.text) {
-                                            return renderTextContent(innerContent.text, getBlockKey());
+                                        // Handle terminal blocks
+                                        if (block.type === "terminal" && "terminalId" in block) {
+                                            return (_jsxs("div", { className: "bg-zinc-900 text-zinc-100 p-2 rounded text-[11px] font-mono", children: ["Terminal: ", block.terminalId] }, getBlockKey()));
                                         }
-                                    }
-                                    // Handle direct text blocks
-                                    if (block.type === "text" && "text" in block) {
-                                        return renderTextContent(block.text, getBlockKey());
-                                    }
-                                    // Handle diff blocks
-                                    if (block.type === "diff" &&
-                                        "path" in block &&
-                                        "oldText" in block &&
-                                        "newText" in block) {
-                                        return (_jsxs("div", { className: "border rounded", children: [_jsxs("div", { className: "bg-muted px-2 py-1 text-xs font-mono", children: [block.path, "line" in block &&
-                                                            block.line !== null &&
-                                                            block.line !== undefined &&
-                                                            `:${block.line}`] }), _jsxs("div", { className: "p-2 font-mono text-xs", children: [_jsxs("div", { className: "text-red-600", children: ["- ", block.oldText] }), _jsxs("div", { className: "text-green-600", children: ["+ ", block.newText] })] })] }, getBlockKey()));
-                                    }
-                                    // Handle terminal blocks
-                                    if (block.type === "terminal" && "terminalId" in block) {
-                                        return (_jsxs("div", { className: "bg-black text-green-400 p-2 rounded text-xs font-mono", children: ["Terminal: ", block.terminalId] }, getBlockKey()));
-                                    }
-                                    return null;
-                                }) })] })), toolCall.error && (_jsxs("div", { className: "bg-destructive/10 border border-destructive/20 rounded p-2.5 text-destructive", children: [_jsx("div", { className: "text-xs font-semibold text-destructive uppercase tracking-wide mb-1.5", children: "Error" }), _jsx("div", { className: "text-xs", children: toolCall.error })] })), toolCall.tokenUsage && (_jsxs("div", { className: "bg-muted border border-border rounded p-2.5", children: [_jsx("div", { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wide mb-2", children: "Token Usage" }), _jsxs("div", { className: "grid grid-cols-3 gap-3 text-xs text-foreground", children: [toolCall.tokenUsage.inputTokens !== undefined && (_jsxs("div", { children: [_jsx("div", { className: "text-muted-foreground text-[10px] uppercase tracking-wide mb-0.5", children: "Input" }), _jsx("div", { className: "font-medium", children: toolCall.tokenUsage.inputTokens.toLocaleString() })] })), toolCall.tokenUsage.outputTokens !== undefined && (_jsxs("div", { children: [_jsx("div", { className: "text-muted-foreground text-[10px] uppercase tracking-wide mb-0.5", children: "Output" }), _jsx("div", { className: "font-medium", children: toolCall.tokenUsage.outputTokens.toLocaleString() })] })), toolCall.tokenUsage.totalTokens !== undefined && (_jsxs("div", { children: [_jsx("div", { className: "text-muted-foreground text-[10px] uppercase tracking-wide mb-0.5", children: "Total" }), _jsx("div", { className: "font-medium", children: toolCall.tokenUsage.totalTokens.toLocaleString() })] }))] })] })), toolCall.startedAt && (_jsxs("div", { className: "text-xs text-muted-foreground", children: ["Started: ", new Date(toolCall.startedAt).toLocaleTimeString(), toolCall.completedAt && (_jsxs(_Fragment, { children: [" ", "| Completed:", " ", new Date(toolCall.completedAt).toLocaleTimeString(), " (", Math.round((toolCall.completedAt - toolCall.startedAt) / 1000), "s)"] }))] }))] }))] }));
+                                        return null;
+                                    }), toolCall.error && (_jsxs("div", { className: "text-red-600 font-mono text-[11px] mt-2", children: ["Error: ", toolCall.error] }))] })] })) : null, (toolCall.tokenUsage || toolCall.startedAt) && (_jsxs("div", { className: "p-2 bg-zinc-100/50 border-t border-zinc-200 flex flex-wrap gap-4 text-[10px] text-zinc-500 font-sans", children: [toolCall.tokenUsage && (_jsxs("div", { className: "flex gap-3", children: [toolCall.tokenUsage.inputTokens !== undefined && (_jsxs("div", { children: [_jsx("span", { className: "uppercase tracking-wide font-semibold mr-1", children: "Input:" }), toolCall.tokenUsage.inputTokens.toLocaleString()] })), toolCall.tokenUsage.outputTokens !== undefined && (_jsxs("div", { children: [_jsx("span", { className: "uppercase tracking-wide font-semibold mr-1", children: "Output:" }), toolCall.tokenUsage.outputTokens.toLocaleString()] })), toolCall.tokenUsage.totalTokens !== undefined && (_jsxs("div", { children: [_jsx("span", { className: "uppercase tracking-wide font-semibold mr-1", children: "Total:" }), toolCall.tokenUsage.totalTokens.toLocaleString()] }))] })), toolCall.startedAt && (_jsxs("div", { className: "flex gap-3 ml-auto", children: [_jsxs("span", { children: ["Started: ", new Date(toolCall.startedAt).toLocaleTimeString()] }), toolCall.completedAt && (_jsxs("span", { children: ["Completed:", " ", new Date(toolCall.completedAt).toLocaleTimeString(), " (", Math.round((toolCall.completedAt - toolCall.startedAt) / 1000), "s)"] }))] }))] }))] }))] }));
 }

package/dist/gui/components/ToolCallList.js

@@ -15,7 +15,7 @@ export function ToolCallList({ toolCalls, groupBy = "chronological", }) {
             completed: toolCalls.filter((tc) => tc.status === "completed"),
             failed: toolCalls.filter((tc) => tc.status === "failed"),
         };
-        return (_jsxs("div", { className: "space-y-4", children: [grouped.in_progress.length > 0 && (_jsxs("div", { children: [_jsx("h4", { className: "text-sm font-semibold text-gray-700 mb-2", children: "In Progress" }), grouped.in_progress.map((tc) => (_jsx(ToolCall, { toolCall: tc }, tc.id)))] })), grouped.pending.length > 0 && (_jsxs("div", { children: [_jsx("h4", { className: "text-sm font-semibold text-gray-700 mb-2", children: "Pending" }), grouped.pending.map((tc) => (_jsx(ToolCall, { toolCall: tc }, tc.id)))] })), grouped.completed.length > 0 && (_jsxs("div", { children: [_jsx("h4", { className: "text-sm font-semibold text-gray-700 mb-2", children: "Completed" }), grouped.completed.map((tc) => (_jsx(ToolCall, { toolCall: tc }, tc.id)))] })), grouped.failed.length > 0 && (_jsxs("div", { children: [_jsx("h4", { className: "text-sm font-semibold text-gray-700 mb-2", children: "Failed" }), grouped.failed.map((tc) => (_jsx(ToolCall, { toolCall: tc }, tc.id)))] }))] }));
+        return (_jsxs("div", { className: "space-y-4", children: [grouped.in_progress.length > 0 && (_jsxs("div", { children: [_jsx("h4", { className: "text-[10px] font-bold text-zinc-400 uppercase tracking-wider mb-2 pl-1", children: "In Progress" }), grouped.in_progress.map((tc) => (_jsx(ToolCall, { toolCall: tc }, tc.id)))] })), grouped.pending.length > 0 && (_jsxs("div", { children: [_jsx("h4", { className: "text-[10px] font-bold text-zinc-400 uppercase tracking-wider mb-2 pl-1", children: "Pending" }), grouped.pending.map((tc) => (_jsx(ToolCall, { toolCall: tc }, tc.id)))] })), grouped.completed.length > 0 && (_jsxs("div", { children: [_jsx("h4", { className: "text-[10px] font-bold text-zinc-400 uppercase tracking-wider mb-2 pl-1", children: "Completed" }), grouped.completed.map((tc) => (_jsx(ToolCall, { toolCall: tc }, tc.id)))] })), grouped.failed.length > 0 && (_jsxs("div", { children: [_jsx("h4", { className: "text-[10px] font-bold text-zinc-400 uppercase tracking-wider mb-2 pl-1", children: "Failed" }), grouped.failed.map((tc) => (_jsx(ToolCall, { toolCall: tc }, tc.id)))] }))] }));
     }
     // Default: chronological order
     return (_jsx("div", { className: "space-y-2", children: toolCalls.map((tc) => (_jsx(ToolCall, { toolCall: tc }, tc.id))) }));

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

@@ -1,4 +1,6 @@
 export { toast } from "sonner";
+export { MockFileSystemProvider, mockFileSystemData, } from "../data/mockFileSystemData.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";
 export { ChatEmptyState, type ChatEmptyStateProps } from "./ChatEmptyState.js";
@@ -14,6 +16,8 @@ export { ChatView, type ChatViewProps } from "./ChatView.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";
+export { FileSystemItem, type FileSystemItemProps, } from "./FileSystemItem.js";
+export { FileSystemView, type FileSystemViewProps, } from "./FileSystemView.js";
 export { HeightTransition } from "./HeightTransition.js";
 export { Input, type InputProps, inputVariants } from "./Input.js";
 export { Label } from "./Label.js";

package/dist/gui/components/index.js

@@ -1,5 +1,6 @@
 // Base UI components
 export { toast } from "sonner";
+export { MockFileSystemProvider, mockFileSystemData, } from "../data/mockFileSystemData.js";
 export { Button, buttonVariants } from "./Button.js";
 export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from "./Card.js";
 export { ChatEmptyState } from "./ChatEmptyState.js";
@@ -19,6 +20,9 @@ export { Conversation } from "./Conversation.js";
 export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, } from "./Dialog.js";
 // DropdownMenu components
 export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, } from "./DropdownMenu.js";
+export { FileSystemItem, } from "./FileSystemItem.js";
+// FileSystem components
+export { FileSystemView, } from "./FileSystemView.js";
 // Utility components
 export { HeightTransition } from "./HeightTransition.js";
 export { Input, inputVariants } from "./Input.js";

package/dist/gui/data/mockFileSystemData.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Mock filesystem data - stub implementation
+ * Replace this with a real FileSystemProvider implementation later
+ */
+import type { FileSystemItem, FileSystemProvider } from "../types/filesystem.js";
+/**
+ * Stub filesystem data matching the Figma design
+ * This data can be easily replaced with real filesystem queries
+ */
+export declare const mockFileSystemData: FileSystemItem[];
+/**
+ * Mock FileSystemProvider implementation
+ * Replace this class with a real implementation that fetches from an actual filesystem
+ */
+export declare class MockFileSystemProvider implements FileSystemProvider {
+    private data;
+    constructor(data?: FileSystemItem[]);
+    getRootItems(): Promise<FileSystemItem[]>;
+    getItemChildren(itemId: string): Promise<FileSystemItem[]>;
+    getItemDetails(itemId: string): Promise<FileSystemItem>;
+}