@townco/ui 0.1.79 → 0.1.82

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

@@ -1,7 +1,7 @@
 import { type VariantProps } from "class-variance-authority";
 import * as React from "react";
 declare const inputVariants: (props?: ({
-    variant?: "success" | "default" | "error" | null | undefined;
+    variant?: "default" | "error" | "success" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>, VariantProps<typeof inputVariants> {
 }

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

@@ -2,5 +2,5 @@ interface MarkdownRendererProps {
     content: string;
     className?: string;
 }
-export declare function MarkdownRenderer({ content, className, }: MarkdownRendererProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function MarkdownRenderer({ content, className }: MarkdownRendererProps): import("react/jsx-runtime").JSX.Element | null;
 export {};

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

@@ -6,8 +6,8 @@ import type { DisplayMessage } from "./MessageList.js";
  * Provides role-based layout and styling for chat messages
  */
 declare const messageVariants: (props?: ({
-    role?: "user" | "assistant" | "system" | null | undefined;
-    layout?: "default" | "compact" | "full" | null | undefined;
+    role?: "assistant" | "system" | "user" | null | undefined;
+    layout?: "compact" | "default" | "full" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface MessageProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof messageVariants> {
     /**

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

@@ -7,8 +7,8 @@ import type { DisplayMessage } from "./MessageList.js";
  * Handles automatic rendering of thinking, waiting states, and content
  */
 declare const messageContentVariants: (props?: ({
-    role?: "user" | "assistant" | "system" | null | undefined;
-    variant?: "default" | "outline" | "ghost" | null | undefined;
+    role?: "assistant" | "system" | "user" | null | undefined;
+    variant?: "default" | "ghost" | "outline" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface MessageContentProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children">, VariantProps<typeof messageContentVariants> {
     /** Message role - determines styling */

package/dist/gui/components/MessageContent.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import * as React from "react";
 import { useChatStore } from "../../core/store/chat-store.js";
@@ -168,7 +168,8 @@ export const MessageContent = React.forwardRef(({ role: roleProp, variant, isStr
                         const hasHookPositions = hookNotifications.some((n) => n.contentPosition !== undefined);
                         if (!hasHookPositions) {
                             // No positions - render hooks at top, then tool calls, then content
-                            return (_jsxs(_Fragment, { children: [hookNotifications.length > 0 && (_jsx("div", { className: "flex flex-col gap-2 mb-1", children: hookNotifications.map((notification) => (_jsx(HookNotification, { notification: notification }, notification.id))) })), groupedToolCalls.length > 0 && (_jsx("div", { className: "flex flex-col gap-2 mb-1", children: groupedToolCalls.map((item, index) => renderToolCallOrGroup(item, index)) })), _jsx("div", { children: _jsx(Response, { content: message.content, isStreaming: message.isStreaming, showEmpty: false }) })] }));
+                            return (_jsxs(_Fragment, { children: [hookNotifications.length > 0 && (_jsx("div", { className: "flex flex-col gap-2 mb-1", children: hookNotifications.map((notification) => (_jsx(HookNotification, { notification: notification }, notification.id))) })), groupedToolCalls.length > 0 && (_jsx("div", { className: "flex flex-col gap-2 mb-1", children: groupedToolCalls.map((item, index) => renderToolCallOrGroup(item, index)) })), _jsx("div", { children: _jsx(Response, { content: message.content, isStreaming: message.isStreaming, showEmpty: false }) })
+                                ] }));
                         }
                         // Hooks have positions - render them inline with content
                         const elements = [];

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

@@ -5,7 +5,7 @@ import * as React from "react";
  * Displays AI thinking/reasoning process with auto-collapse support
  */
 declare const reasoningContainerVariants: (props?: ({
-    variant?: "default" | "subtle" | "prominent" | null | undefined;
+    variant?: "default" | "prominent" | "subtle" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface ReasoningProps extends VariantProps<typeof reasoningContainerVariants> {
     /** The reasoning/thinking content */

package/dist/gui/components/Reasoning.js

@@ -59,12 +59,19 @@ 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-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: "..." }))] })] }));
+        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: () => {
+    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-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: "..." }))] }) }))] }));
+                }, 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/Select.js

@@ -6,7 +6,8 @@ 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-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" }) })] })));
+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;
@@ -14,12 +15,16 @@ const SelectScrollDownButton = React.forwardRef(({ className, ...props }, ref) =
 SelectScrollDownButton.displayName =
     SelectPrimitive.ScrollDownButton.displayName;
 const SelectContent = React.forwardRef(({ className, children, position = "popper", ...props }, ref) => (_jsx(SelectPrimitive.Portal, { children: _jsxs(SelectPrimitive.Content, { ref: ref, className: cn("relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", position === "popper" &&
-            "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, {})] }) })));
+            "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-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-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 })] })));
+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/SessionHistory.d.ts

@@ -7,4 +7,4 @@ export interface SessionHistoryProps {
     onArchiveSession?: ((sessionId: string) => void) | undefined;
     onDeleteSession?: ((sessionId: string) => void) | undefined;
 }
-export declare function SessionHistory({ client, currentSessionId, onSessionSelect, onRenameSession, onArchiveSession, onDeleteSession, }: SessionHistoryProps): import("react/jsx-runtime").JSX.Element;
+export declare function SessionHistory({ client, currentSessionId, onSessionSelect, onRenameSession, onArchiveSession, onDeleteSession }: SessionHistoryProps): import("react/jsx-runtime").JSX.Element;

package/dist/gui/components/SessionHistory.js

@@ -88,13 +88,20 @@ export function SessionHistory({ client, currentSessionId, onSessionSelect, onRe
         return (_jsx(SidebarGroup, { children: _jsx(SidebarGroupContent, { children: _jsx("div", { className: "flex w-full flex-row items-center justify-center gap-2 px-2 text-sm text-muted-foreground", children: "Connect to an agent to see session history" }) }) }));
     }
     if (isLoading) {
-        return (_jsxs(SidebarGroup, { children: [_jsx(SidebarGroupLabel, { children: "Today" }), _jsx(SidebarGroupContent, { children: _jsx("div", { className: "flex flex-col", children: [44, 32, 28, 64, 52].map((item) => (_jsx("div", { className: "flex h-8 items-center gap-2 rounded-md px-2", children: _jsx("div", { className: "h-4 flex-1 rounded-md bg-sidebar-accent-foreground/10 animate-pulse", style: {
+        return (_jsxs(SidebarGroup, { children: [
+                _jsx(SidebarGroupLabel, { children: "Today" }), _jsx(SidebarGroupContent, { children: _jsx("div", { className: "flex flex-col", children: [44, 32, 28, 64, 52].map((item) => (_jsx("div", { className: "flex h-8 items-center gap-2 rounded-md px-2", children: _jsx("div", { className: "h-4 flex-1 rounded-md bg-sidebar-accent-foreground/10 animate-pulse", style: {
                                     maxWidth: `${item}%`,
-                                } }) }, item))) }) })] }));
+                                } }) }, item))) }) })
+            ] }));
     }
     if (sessions.length === 0) {
         return (_jsx(SidebarGroup, { children: _jsx(SidebarGroupContent, { children: _jsx("div", { className: "flex w-full flex-row items-center justify-center gap-2 px-2 py-4 text-sm text-muted-foreground", children: "Your sessions will appear here once you start chatting!" }) }) }));
     }
     const groupedSessions = groupSessionsByDate(sessions);
-    return (_jsx(SidebarGroup, { children: _jsx(SidebarGroupContent, { children: _jsx(SidebarMenu, { children: _jsxs("div", { className: "flex flex-col gap-6", children: [groupedSessions.today.length > 0 && (_jsxs("div", { className: "flex flex-col", children: [_jsx("div", { className: "px-2 py-1 text-muted-foreground text-sm font-medium", children: "Today" }), groupedSessions.today.map((session) => (_jsx(SessionHistoryItem, { session: session, isActive: session.sessionId === currentSessionId, onSelect: handleSessionSelect, onRename: onRenameSession, onArchive: onArchiveSession, onDelete: onDeleteSession, setOpenMobile: setOpenMobile }, session.sessionId)))] })), groupedSessions.yesterday.length > 0 && (_jsxs("div", { className: "flex flex-col", children: [_jsx("div", { className: "px-2 py-1 text-muted-foreground text-sm font-medium", children: "Yesterday" }), groupedSessions.yesterday.map((session) => (_jsx(SessionHistoryItem, { session: session, isActive: session.sessionId === currentSessionId, onSelect: handleSessionSelect, onRename: onRenameSession, onArchive: onArchiveSession, onDelete: onDeleteSession, setOpenMobile: setOpenMobile }, session.sessionId)))] })), groupedSessions.lastWeek.length > 0 && (_jsxs("div", { className: "flex flex-col", children: [_jsx("div", { className: "px-2 py-1 text-muted-foreground text-sm font-medium", children: "Last 7 days" }), groupedSessions.lastWeek.map((session) => (_jsx(SessionHistoryItem, { session: session, isActive: session.sessionId === currentSessionId, onSelect: handleSessionSelect, onRename: onRenameSession, onArchive: onArchiveSession, onDelete: onDeleteSession, setOpenMobile: setOpenMobile }, session.sessionId)))] })), groupedSessions.lastMonth.length > 0 && (_jsxs("div", { className: "flex flex-col", children: [_jsx("div", { className: "px-2 py-1 text-muted-foreground text-sm font-medium", children: "Last 30 days" }), groupedSessions.lastMonth.map((session) => (_jsx(SessionHistoryItem, { session: session, isActive: session.sessionId === currentSessionId, onSelect: handleSessionSelect, onRename: onRenameSession, onArchive: onArchiveSession, onDelete: onDeleteSession, setOpenMobile: setOpenMobile }, session.sessionId)))] })), groupedSessions.older.length > 0 && (_jsxs("div", { className: "flex flex-col", children: [_jsx("div", { className: "px-2 py-1 text-muted-foreground text-sm font-medium", children: "Older" }), groupedSessions.older.map((session) => (_jsx(SessionHistoryItem, { session: session, isActive: session.sessionId === currentSessionId, onSelect: handleSessionSelect, onRename: onRenameSession, onArchive: onArchiveSession, onDelete: onDeleteSession, setOpenMobile: setOpenMobile }, session.sessionId)))] }))] }) }) }) }));
+    return (_jsx(SidebarGroup, { children: _jsx(SidebarGroupContent, { children: _jsx(SidebarMenu, { children: _jsxs("div", { className: "flex flex-col gap-6", children: [groupedSessions.today.length > 0 && (_jsxs("div", { className: "flex flex-col", children: [
+                                _jsx("div", { className: "px-2 py-1 text-muted-foreground text-sm font-medium", children: "Today" }), groupedSessions.today.map((session) => (_jsx(SessionHistoryItem, { session: session, isActive: session.sessionId === currentSessionId, onSelect: handleSessionSelect, onRename: onRenameSession, onArchive: onArchiveSession, onDelete: onDeleteSession, setOpenMobile: setOpenMobile }, session.sessionId)))] })), groupedSessions.yesterday.length > 0 && (_jsxs("div", { className: "flex flex-col", children: [
+                                _jsx("div", { className: "px-2 py-1 text-muted-foreground text-sm font-medium", children: "Yesterday" }), groupedSessions.yesterday.map((session) => (_jsx(SessionHistoryItem, { session: session, isActive: session.sessionId === currentSessionId, onSelect: handleSessionSelect, onRename: onRenameSession, onArchive: onArchiveSession, onDelete: onDeleteSession, setOpenMobile: setOpenMobile }, session.sessionId)))] })), groupedSessions.lastWeek.length > 0 && (_jsxs("div", { className: "flex flex-col", children: [
+                                _jsx("div", { className: "px-2 py-1 text-muted-foreground text-sm font-medium", children: "Last 7 days" }), groupedSessions.lastWeek.map((session) => (_jsx(SessionHistoryItem, { session: session, isActive: session.sessionId === currentSessionId, onSelect: handleSessionSelect, onRename: onRenameSession, onArchive: onArchiveSession, onDelete: onDeleteSession, setOpenMobile: setOpenMobile }, session.sessionId)))] })), groupedSessions.lastMonth.length > 0 && (_jsxs("div", { className: "flex flex-col", children: [
+                                _jsx("div", { className: "px-2 py-1 text-muted-foreground text-sm font-medium", children: "Last 30 days" }), groupedSessions.lastMonth.map((session) => (_jsx(SessionHistoryItem, { session: session, isActive: session.sessionId === currentSessionId, onSelect: handleSessionSelect, onRename: onRenameSession, onArchive: onArchiveSession, onDelete: onDeleteSession, setOpenMobile: setOpenMobile }, session.sessionId)))] })), groupedSessions.older.length > 0 && (_jsxs("div", { className: "flex flex-col", children: [
+                                _jsx("div", { className: "px-2 py-1 text-muted-foreground text-sm font-medium", children: "Older" }), groupedSessions.older.map((session) => (_jsx(SessionHistoryItem, { session: session, isActive: session.sessionId === currentSessionId, onSelect: handleSessionSelect, onRename: onRenameSession, onArchive: onArchiveSession, onDelete: onDeleteSession, setOpenMobile: setOpenMobile }, session.sessionId)))] }))] }) }) }) }));
 }

package/dist/gui/components/SessionHistoryItem.js

@@ -5,10 +5,18 @@ import { cn } from "../lib/utils.js";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, } from "./DropdownMenu.js";
 import { SidebarMenuAction, SidebarMenuButton, SidebarMenuItem, } from "./Sidebar.js";
 const PureSessionHistoryItem = ({ session, isActive, onSelect, onRename, onArchive, onDelete, setOpenMobile, }) => {
-    return (_jsxs(SidebarMenuItem, { children: [_jsx(SidebarMenuButton, { asChild: true, isActive: isActive, onClick: () => {
+    return (_jsxs(SidebarMenuItem, { children: [
+            _jsx(SidebarMenuButton, { asChild: true, isActive: isActive, onClick: () => {
                     onSelect(session.sessionId);
                     setOpenMobile(false);
-                }, className: "h-10 px-2 py-3", children: _jsx("button", { type: "button", className: "w-full text-base", children: _jsx("span", { className: "truncate", children: session.firstUserMessage || "Empty session" }) }) }), _jsxs(DropdownMenu, { modal: true, children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(SidebarMenuAction, { className: "mr-0.5 data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground", showOnHover: !isActive, children: [_jsx(MoreHorizontal, {}), _jsx("span", { className: "sr-only", children: "More" })] }) }), _jsxs(DropdownMenuContent, { align: "end", side: "bottom", children: [_jsx(DropdownMenuItem, { className: "cursor-pointer", disabled: !onRename, onSelect: () => onRename?.(session.sessionId), children: "Rename" }), _jsx(DropdownMenuItem, { className: "cursor-pointer", disabled: !onArchive, onSelect: () => onArchive?.(session.sessionId), children: "Archive" }), _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuItem, { className: cn("cursor-pointer text-destructive focus:bg-destructive/15 focus:text-destructive"), disabled: !onDelete, onSelect: () => onDelete?.(session.sessionId), children: "Delete" })] })] })] }));
+                }, className: "h-10 px-2 py-3", children: _jsx("button", { type: "button", className: "w-full text-base", children: _jsx("span", { className: "truncate", children: session.firstUserMessage || "Empty session" }) }) }), _jsxs(DropdownMenu, { modal: true, children: [
+                    _jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(SidebarMenuAction, { className: "mr-0.5 data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground", showOnHover: !isActive, children: [
+                                _jsx(MoreHorizontal, {}), _jsx("span", { className: "sr-only", children: "More" })
+                            ] }) }), _jsxs(DropdownMenuContent, { align: "end", side: "bottom", children: [
+                            _jsx(DropdownMenuItem, { className: "cursor-pointer", disabled: !onRename, onSelect: () => onRename?.(session.sessionId), children: "Rename" }), _jsx(DropdownMenuItem, { className: "cursor-pointer", disabled: !onArchive, onSelect: () => onArchive?.(session.sessionId), children: "Archive" }), _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuItem, { className: cn("cursor-pointer text-destructive focus:bg-destructive/15 focus:text-destructive"), disabled: !onDelete, onSelect: () => onDelete?.(session.sessionId), children: "Delete" })
+                        ] })
+                ] })
+        ] }));
 };
 export const SessionHistoryItem = memo(PureSessionHistoryItem, (prevProps, nextProps) => {
     if (prevProps.isActive !== nextProps.isActive) {

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

@@ -7,19 +7,19 @@ declare const SheetClose: React.ForwardRefExoticComponent<DialogPrimitive.Dialog
 declare const SheetPortal: React.FC<DialogPrimitive.DialogPortalProps>;
 declare const SheetOverlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const sheetVariants: (props?: ({
-    side?: "top" | "right" | "bottom" | "left" | null | undefined;
+    side?: "bottom" | "left" | "right" | "top" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface SheetContentProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>, VariantProps<typeof sheetVariants> {
 }
 declare const SheetContent: React.ForwardRefExoticComponent<SheetContentProps & React.RefAttributes<HTMLDivElement>>;
-declare const SheetHeader: {
-    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
-declare const SheetFooter: {
-    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+declare function SheetHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+declare namespace SheetHeader {
+    var displayName: string;
+}
+declare function SheetFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+declare namespace SheetFooter {
+    var displayName: string;
+}
 declare const SheetTitle: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
 declare const SheetDescription: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
 export { Sheet, SheetPortal, SheetOverlay, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription, };

package/dist/gui/components/Sheet.js

@@ -23,7 +23,12 @@ const sheetVariants = cva("fixed z-50 gap-4 bg-background p-6 shadow-lg transiti
         side: "right",
     },
 });
-const SheetContent = React.forwardRef(({ side = "right", className, children, ...props }, ref) => (_jsxs(SheetPortal, { children: [_jsx(SheetOverlay, {}), _jsxs(DialogPrimitive.Content, { ref: ref, className: cn(sheetVariants({ side }), className), ...props, children: [children, _jsxs(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary", children: [_jsx(X, { className: "h-4 w-4" }), _jsx("span", { className: "sr-only", children: "Close" })] })] })] })));
+const SheetContent = React.forwardRef(({ side = "right", className, children, ...props }, ref) => (_jsxs(SheetPortal, { children: [
+        _jsx(SheetOverlay, {}), _jsxs(DialogPrimitive.Content, { ref: ref, className: cn(sheetVariants({ side }), className), ...props, children: [children, _jsxs(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary", children: [
+                        _jsx(X, { className: "h-4 w-4" }), _jsx("span", { className: "sr-only", children: "Close" })
+                    ] })
+            ] })
+    ] })));
 SheetContent.displayName = DialogPrimitive.Content.displayName;
 const SheetHeader = ({ className, ...props }) => (_jsx("div", { className: cn("flex flex-col space-y-2 text-center sm:text-left", className), ...props }));
 SheetHeader.displayName = "SheetHeader";

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

@@ -1,6 +1,5 @@
 import { type VariantProps } from "class-variance-authority";
 import * as React from "react";
-import { TooltipContent } from "./Tooltip.js";
 type SidebarContextProps = {
     state: "expanded" | "collapsed";
     open: boolean;
@@ -18,8 +17,8 @@ declare const SidebarProvider: React.ForwardRefExoticComponent<Omit<React.ClassA
 }, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const Sidebar: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
     side?: "left" | "right";
-    variant?: "sidebar" | "floating" | "inset";
-    collapsible?: "offcanvas" | "icon" | "none";
+    variant?: "floating" | "inset" | "sidebar";
+    collapsible?: "icon" | "none" | "offcanvas";
 }, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const SidebarTrigger: React.ForwardRefExoticComponent<Omit<import("./Button.js").ButtonProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 declare const SidebarRail: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
@@ -42,10 +41,10 @@ declare const SidebarMenuItem: React.ForwardRefExoticComponent<Omit<React.Detail
 declare const SidebarMenuButton: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLButtonElement> & React.ButtonHTMLAttributes<HTMLButtonElement> & {
     asChild?: boolean;
     isActive?: boolean;
-    tooltip?: string | React.ComponentProps<typeof TooltipContent>;
+    tooltip?: string | (Omit<import("@radix-ui/react-tooltip").TooltipContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>);
 } & VariantProps<(props?: ({
     variant?: "default" | "outline" | null | undefined;
-    size?: "default" | "sm" | "lg" | null | undefined;
+    size?: "default" | "lg" | "sm" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 declare const SidebarMenuAction: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLButtonElement> & React.ButtonHTMLAttributes<HTMLButtonElement> & {
     asChild?: boolean;
@@ -59,7 +58,7 @@ declare const SidebarMenuSub: React.ForwardRefExoticComponent<Omit<React.Detaile
 declare const SidebarMenuSubItem: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & React.RefAttributes<HTMLLIElement>>;
 declare const SidebarMenuSubButton: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLAnchorElement> & React.AnchorHTMLAttributes<HTMLAnchorElement> & {
     asChild?: boolean;
-    size?: "sm" | "md";
+    size?: "md" | "sm";
     isActive?: boolean;
 }, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
 export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, useSidebar, };

package/dist/gui/components/Sidebar.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Slot as SlotPrimitive } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
 import { AnimatePresence, motion } from "framer-motion";
@@ -82,7 +82,9 @@ const Sidebar = React.forwardRef(({ className, children }, ref) => {
     useLockBodyScroll(isMobile && openMobile);
     // Mobile: Sidebar with white overlay
     if (isMobile) {
-        return (_jsx(AnimatePresence, { initial: false, children: openMobile && (_jsxs(_Fragment, { children: [_jsx(motion.div, { className: "fixed inset-0 z-40 bg-background/80", variants: backdropVariants, initial: "initial", animate: "animate", exit: "exit", transition: sidebarMobileTransition, onClick: () => setOpenMobile(false), "aria-label": "Close sidebar" }), _jsx(motion.aside, { ref: ref, className: cn("fixed inset-y-0 left-0 z-50", "bg-sidebar text-sidebar-foreground", "flex flex-col", "border-r border-sidebar-border", "max-h-screen overflow-hidden", className), style: { width: SIDEBAR_WIDTH_MOBILE }, variants: sidebarMobileVariants, initial: "initial", animate: "animate", exit: "exit", transition: sidebarMobileTransition, "data-sidebar": "sidebar", "data-mobile": "true", children: _jsx(motion.div, { className: "flex flex-col h-full overflow-y-auto", variants: sidebarContentVariants, initial: "initial", animate: "animate", transition: sidebarContentTransition, children: children }) })] })) }));
+        return (_jsx(AnimatePresence, { initial: false, children: openMobile && (_jsxs(_Fragment, { children: [
+                    _jsx(motion.div, { className: "fixed inset-0 z-40 bg-background/80", variants: backdropVariants, initial: "initial", animate: "animate", exit: "exit", transition: sidebarMobileTransition, onClick: () => setOpenMobile(false), "aria-label": "Close sidebar" }), _jsx(motion.aside, { ref: ref, className: cn("fixed inset-y-0 left-0 z-50", "bg-sidebar text-sidebar-foreground", "flex flex-col", "border-r border-sidebar-border", "max-h-screen overflow-hidden", className), style: { width: SIDEBAR_WIDTH_MOBILE }, variants: sidebarMobileVariants, initial: "initial", animate: "animate", exit: "exit", transition: sidebarMobileTransition, "data-sidebar": "sidebar", "data-mobile": "true", children: _jsx(motion.div, { className: "flex flex-col h-full overflow-y-auto", variants: sidebarContentVariants, initial: "initial", animate: "animate", transition: sidebarContentTransition, children: children }) })
+                ] })) }));
     }
     // Desktop: Fixed width sidebar with slide animation
     return (_jsx("div", { className: "group peer hidden md:block", "data-state": open ? "expanded" : "collapsed", "data-side": "left", ref: ref, children: _jsx(AnimatePresence, { initial: false, mode: "wait", children: open && (_jsx(motion.aside, { className: cn("fixed inset-y-0 left-0 z-40", "bg-sidebar text-sidebar-foreground", "border-r border-sidebar-border", "flex flex-col", "max-h-screen overflow-hidden", className), style: { width: SIDEBAR_WIDTH_DESKTOP }, variants: sidebarDesktopVariants, initial: "initial", animate: "animate", exit: "exit", transition: sidebarTransition, "data-sidebar": "sidebar", children: _jsx(motion.div, { className: "flex flex-col h-full overflow-y-auto", variants: sidebarContentVariants, initial: "initial", animate: "animate", transition: sidebarContentTransition, children: children }) })) }) }));
@@ -93,7 +95,9 @@ const SidebarTrigger = React.forwardRef(({ className, onClick, ...props }, ref)
     return (_jsxs(Button, { className: cn("h-7 w-7", className), "data-sidebar": "trigger", onClick: (event) => {
             onClick?.(event);
             toggleSidebar();
-        }, ref: ref, size: "icon", variant: "ghost", ...props, children: [_jsx(PanelLeft, {}), _jsx("span", { className: "sr-only", children: "Toggle Sidebar" })] }));
+        }, ref: ref, size: "icon", variant: "ghost", ...props, children: [
+            _jsx(PanelLeft, {}), _jsx("span", { className: "sr-only", children: "Toggle Sidebar" })
+        ] }));
 });
 SidebarTrigger.displayName = "SidebarTrigger";
 const SidebarRail = React.forwardRef(({ className, ...props }, ref) => {
@@ -181,7 +185,9 @@ const SidebarMenuButton = React.forwardRef(({ asChild = false, isActive = false,
             children: tooltip,
         };
     }
-    return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: button }), _jsx(TooltipContent, { align: "center", hidden: state !== "collapsed" || isMobile, side: "right", ...tooltip })] }));
+    return (_jsxs(Tooltip, { children: [
+            _jsx(TooltipTrigger, { asChild: true, children: button }), _jsx(TooltipContent, { align: "center", hidden: state !== "collapsed" || isMobile, side: "right", ...tooltip })
+        ] }));
 });
 SidebarMenuButton.displayName = "SidebarMenuButton";
 const SidebarMenuAction = React.forwardRef(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
@@ -201,7 +207,8 @@ const SidebarMenuSkeleton = React.forwardRef(({ className, showIcon = false, ...
     }, []);
     return (_jsxs("div", { className: cn("flex h-8 items-center gap-2 rounded-md px-2", className), "data-sidebar": "menu-skeleton", ref: ref, ...props, children: [showIcon && (_jsx("div", { className: "size-4 rounded-md bg-sidebar-accent-foreground/10 animate-pulse", "data-sidebar": "menu-skeleton-icon" })), _jsx("div", { className: "h-4 flex-1 rounded-md bg-sidebar-accent-foreground/10 animate-pulse", "data-sidebar": "menu-skeleton-text", style: {
                     maxWidth: width,
-                } })] }));
+                } })
+        ] }));
 });
 SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton";
 const SidebarMenuSub = React.forwardRef(({ className, ...props }, ref) => (_jsx("ul", { className: cn("mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-sidebar-border border-l px-2.5 py-0.5", "group-data-[collapsible=icon]:hidden", className), "data-sidebar": "menu-sub", ref: ref, ...props })));

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

@@ -1,3 +1,3 @@
 import type { ComponentProps } from "react";
 import { type SidebarTrigger } from "./Sidebar.js";
-export declare function SidebarToggle({ className, }: ComponentProps<typeof SidebarTrigger>): import("react/jsx-runtime").JSX.Element;
+export declare function SidebarToggle({ className }: ComponentProps<typeof SidebarTrigger>): import("react/jsx-runtime").JSX.Element;

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

@@ -1,5 +1,3 @@
 import type * as React from "react";
-import { Toaster as Sonner } from "sonner";
-type ToasterProps = React.ComponentProps<typeof Sonner>;
-declare const Toaster: ({ ...props }: ToasterProps) => import("react/jsx-runtime").JSX.Element;
+declare const Toaster: ({ ...props }: import("sonner").ToasterProps & React.RefAttributes<HTMLElement>) => import("react/jsx-runtime").JSX.Element;
 export { Toaster };

package/dist/gui/components/SourceListItem.js

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

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

@@ -31,4 +31,4 @@ export interface SubAgentDetailsProps {
  * - Renders content as markdown
  * - Renders in a collapsible section (collapsed by default)
  */
-export declare function SubAgentDetails({ port, sessionId, host, parentStatus, agentName, query, isExpanded: controlledIsExpanded, onExpandChange, storedMessages, isReplay, }: SubAgentDetailsProps): import("react/jsx-runtime").JSX.Element;
+export declare function SubAgentDetails({ port, sessionId, host, parentStatus, agentName, query, isExpanded: controlledIsExpanded, onExpandChange, storedMessages, isReplay }: SubAgentDetailsProps): import("react/jsx-runtime").JSX.Element;

package/dist/gui/components/SubAgentDetails.js

@@ -116,12 +116,23 @@ export function SubAgentDetails({ port, sessionId, host, parentStatus, agentName
         ? (query.split("\n")[0] ?? "").slice(0, 100) +
             (query.length > 100 ? "..." : "")
         : "";
-    return (_jsxs("div", { children: [!isExpanded && (_jsx("div", { className: "w-full max-w-md", children: previewText ? (_jsx("p", { className: "text-paragraph-sm text-muted-foreground/70 truncate", children: previewText })) : queryFirstLine ? (_jsx("p", { className: "text-paragraph-sm text-muted-foreground/50 truncate", children: queryFirstLine })) : null })), isExpanded && (_jsxs("div", { className: "space-y-3", children: [(agentName || query) && (_jsxs("div", { children: [_jsx("div", { className: "text-[10px] font-bold text-muted-foreground uppercase tracking-wider mb-1.5 font-sans", children: "Input" }), _jsxs("div", { className: "text-[11px] font-mono space-y-1", children: [agentName && (_jsxs("div", { children: [_jsx("span", { className: "text-muted-foreground", children: "agentName: " }), _jsx("span", { className: "text-foreground", children: agentName })] })), query && (_jsxs("div", { children: [_jsx("span", { className: "text-muted-foreground", children: "query: " }), _jsx("span", { className: "text-foreground", children: query })] }))] })] })), _jsxs("div", { children: [_jsxs("button", { type: "button", onClick: () => setIsThinkingExpanded(!isThinkingExpanded), className: "flex items-center gap-2 cursor-pointer bg-transparent border-none p-0 text-left group", children: [_jsx("div", { className: "text-[10px] font-bold text-muted-foreground uppercase tracking-wider font-sans", children: "Stream" }), _jsx(ChevronDown, { className: `h-3 w-3 text-muted-foreground/70 transition-transform duration-200 ${isThinkingExpanded ? "rotate-180" : ""}` })] }), isThinkingExpanded && (_jsxs("div", { ref: thinkingContainerRef, className: "mt-2 rounded-md overflow-hidden bg-muted/30 border border-border/50 max-h-[200px] overflow-y-auto", children: [error && (_jsxs("div", { className: "px-2 py-2 text-[11px] text-destructive", children: ["Error: ", error] })), !error && !hasContent && isRunning && (_jsx("div", { className: "px-2 py-2 text-[11px] text-muted-foreground", children: "Waiting for sub-agent response..." })), currentMessage && (_jsxs("div", { className: "px-2 py-2 space-y-2", children: [currentMessage.contentBlocks &&
+    return (_jsxs("div", { children: [!isExpanded && (_jsx("div", { className: "w-full max-w-md", children: previewText ? (_jsx("p", { className: "text-paragraph-sm text-muted-foreground/70 truncate", children: previewText })) : queryFirstLine ? (_jsx("p", { className: "text-paragraph-sm text-muted-foreground/50 truncate", children: queryFirstLine })) : null })), isExpanded && (_jsxs("div", { className: "space-y-3", children: [(agentName || query) && (_jsxs("div", { children: [
+                            _jsx("div", { className: "text-[10px] font-bold text-muted-foreground uppercase tracking-wider mb-1.5 font-sans", children: "Input" }), _jsxs("div", { className: "text-[11px] font-mono space-y-1", children: [agentName && (_jsxs("div", { children: [
+                                            _jsx("span", { className: "text-muted-foreground", children: "agentName: " }), _jsx("span", { className: "text-foreground", children: agentName })
+                                        ] })), query && (_jsxs("div", { children: [
+                                            _jsx("span", { className: "text-muted-foreground", children: "query: " }), _jsx("span", { className: "text-foreground", children: query })
+                                        ] }))] })
+                        ] })), _jsxs("div", { children: [
+                            _jsxs("button", { type: "button", onClick: () => setIsThinkingExpanded(!isThinkingExpanded), className: "flex items-center gap-2 cursor-pointer bg-transparent border-none p-0 text-left group", children: [
+                                    _jsx("div", { className: "text-[10px] font-bold text-muted-foreground uppercase tracking-wider font-sans", children: "Stream" }), _jsx(ChevronDown, { className: `h-3 w-3 text-muted-foreground/70 transition-transform duration-200 ${isThinkingExpanded ? "rotate-180" : ""}` })
+                                ] }), isThinkingExpanded && (_jsxs("div", { ref: thinkingContainerRef, className: "mt-2 rounded-md overflow-hidden bg-muted/30 border border-border/50 max-h-[200px] overflow-y-auto", children: [error && (_jsxs("div", { className: "px-2 py-2 text-[11px] text-destructive", children: ["Error: ", error] })), !error && !hasContent && isRunning && (_jsx("div", { className: "px-2 py-2 text-[11px] text-muted-foreground", children: "Waiting for sub-agent response..." })), currentMessage && (_jsxs("div", { className: "px-2 py-2 space-y-2", children: [currentMessage.contentBlocks &&
                                                 currentMessage.contentBlocks.length > 0
                                                 ? // Render interleaved content blocks
                                                     currentMessage.contentBlocks.map((block, blockIdx) => block.type === "text" ? (_jsx("div", { className: "text-[11px] text-foreground prose prose-sm dark:prose-invert max-w-none prose-p:my-1 prose-pre:my-1 prose-code:text-[10px]", children: _jsx(MarkdownRenderer, { content: block.text }) }, `text-${block.text.slice(0, 30)}-${blockIdx}`)) : (_jsx(SubagentToolCallItem, { toolCall: block.toolCall }, block.toolCall.id)))
                                                 : // Fallback to legacy content with markdown
-                                                    currentMessage.content && (_jsx("div", { className: "text-[11px] text-foreground prose prose-sm dark:prose-invert max-w-none prose-p:my-1 prose-pre:my-1 prose-code:text-[10px]", children: _jsx(MarkdownRenderer, { content: currentMessage.content }) })), currentMessage.isStreaming && (_jsx("span", { className: "inline-block w-1.5 h-3 bg-primary/70 ml-0.5 animate-pulse" }))] }))] }))] }), !isRunning && currentMessage?.content && (_jsxs("div", { children: [_jsx("div", { className: "text-[10px] font-bold text-muted-foreground uppercase tracking-wider mb-1.5 font-sans", children: "Output" }), _jsx("div", { className: "text-[11px] text-foreground max-h-[200px] overflow-y-auto rounded-md bg-muted/30 border border-border/50 px-2 py-2 prose prose-sm dark:prose-invert max-w-none prose-p:my-1 prose-pre:my-1 prose-code:text-[10px]", children: _jsx(MarkdownRenderer, { content: currentMessage.content }) })] }))] }))] }));
+                                                    currentMessage.content && (_jsx("div", { className: "text-[11px] text-foreground prose prose-sm dark:prose-invert max-w-none prose-p:my-1 prose-pre:my-1 prose-code:text-[10px]", children: _jsx(MarkdownRenderer, { content: currentMessage.content }) })), currentMessage.isStreaming && (_jsx("span", { className: "inline-block w-1.5 h-3 bg-primary/70 ml-0.5 animate-pulse" }))] }))] }))] }), !isRunning && currentMessage?.content && (_jsxs("div", { children: [
+                            _jsx("div", { className: "text-[10px] font-bold text-muted-foreground uppercase tracking-wider mb-1.5 font-sans", children: "Output" }), _jsx("div", { className: "text-[11px] text-foreground max-h-[200px] overflow-y-auto rounded-md bg-muted/30 border border-border/50 px-2 py-2 prose prose-sm dark:prose-invert max-w-none prose-p:my-1 prose-pre:my-1 prose-code:text-[10px]", children: _jsx(MarkdownRenderer, { content: currentMessage.content }) })
+                        ] }))] }))] }));
 }
 /**
  * Simple tool call display for sub-agent tool calls
@@ -139,5 +150,6 @@ function SubagentToolCallItem({ toolCall }) {
         completed: "text-green-500",
         failed: "text-destructive",
     }[toolCall.status];
-    return (_jsxs("div", { className: "flex items-center gap-2 text-[10px] text-muted-foreground", children: [_jsx("span", { className: statusColor, children: statusIcon }), _jsx("span", { className: "font-medium", children: toolCall.prettyName || toolCall.title }), toolCall.status === "in_progress" && (_jsx(Loader2, { className: "h-2.5 w-2.5 animate-spin" }))] }));
+    return (_jsxs("div", { className: "flex items-center gap-2 text-[10px] text-muted-foreground", children: [
+            _jsx("span", { className: statusColor, children: statusIcon }), _jsx("span", { className: "font-medium", children: toolCall.prettyName || toolCall.title }), toolCall.status === "in_progress" && (_jsx(Loader2, { className: "h-2.5 w-2.5 animate-spin" }))] }));
 }

package/dist/gui/components/Task.js

@@ -28,7 +28,11 @@ 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-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))) })] }))] }))] }));
+    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 = "Subagent";
 export const TaskList = React.forwardRef(({ tasks, collapsible = true, onTaskClick, emptyMessage = "No subagents yet.", className, ...props }, ref) => {

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

@@ -1,7 +1,7 @@
 import { type VariantProps } from "class-variance-authority";
 import * as React from "react";
 declare const textareaVariants: (props?: ({
-    variant?: "success" | "default" | "error" | null | undefined;
+    variant?: "default" | "error" | "success" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement>, VariantProps<typeof textareaVariants> {
     autoResize?: boolean;

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

@@ -9,6 +9,6 @@ type ThemeProviderState = {
     setTheme: (theme: Theme) => void;
     resolvedTheme: "dark" | "light";
 };
-export declare function ThemeProvider({ children, defaultTheme, storageKey, }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function ThemeProvider({ children, defaultTheme, storageKey }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
 export declare const useTheme: () => ThemeProviderState;
 export {};

package/dist/gui/components/ThemeToggle.js

@@ -5,5 +5,11 @@ import { IconButton } from "./IconButton.js";
 import { useTheme } from "./ThemeProvider.js";
 export function ThemeToggle() {
     const { setTheme } = useTheme();
-    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(IconButton, { children: [_jsx(Sun, { className: "size-4 text-muted-foreground rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" }), _jsx(Moon, { className: "absolute size-4 text-muted-foreground rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" }), _jsx("span", { className: "sr-only", children: "Toggle theme" })] }) }), _jsxs(DropdownMenuContent, { align: "end", children: [_jsx(DropdownMenuItem, { onClick: () => setTheme("light"), children: "Light" }), _jsx(DropdownMenuItem, { onClick: () => setTheme("dark"), children: "Dark" }), _jsx(DropdownMenuItem, { onClick: () => setTheme("system"), children: "System" })] })] }));
+    return (_jsxs(DropdownMenu, { children: [
+            _jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(IconButton, { children: [
+                        _jsx(Sun, { className: "size-4 text-muted-foreground rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" }), _jsx(Moon, { className: "absolute size-4 text-muted-foreground rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" }), _jsx("span", { className: "sr-only", children: "Toggle theme" })
+                    ] }) }), _jsxs(DropdownMenuContent, { align: "end", children: [
+                    _jsx(DropdownMenuItem, { onClick: () => setTheme("light"), children: "Light" }), _jsx(DropdownMenuItem, { onClick: () => setTheme("dark"), children: "Dark" }), _jsx(DropdownMenuItem, { onClick: () => setTheme("system"), children: "System" })
+                ] })
+        ] }));
 }

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

@@ -1,6 +1,6 @@
 import { type VariantProps } from "class-variance-authority";
 declare const thinkingBlockVariants: (props?: ({
-    variant?: "default" | "subtle" | "prominent" | null | undefined;
+    variant?: "default" | "prominent" | "subtle" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface ThinkingBlockProps extends VariantProps<typeof thinkingBlockVariants> {
     thinking?: string;
@@ -8,5 +8,5 @@ export interface ThinkingBlockProps extends VariantProps<typeof thinkingBlockVar
     displayMode?: "collapsible" | "inline";
     className?: string;
 }
-export declare function ThinkingBlock({ thinking, isStreaming, displayMode, variant, className, }: ThinkingBlockProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function ThinkingBlock({ thinking, isStreaming, displayMode, variant, className }: ThinkingBlockProps): import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/gui/components/ThinkingBlock.js

@@ -33,8 +33,15 @@ 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-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: "..." }))] })] }));
+        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-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: "..." }))] }) }))] }));
+    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

@@ -7,7 +7,11 @@ import { TodoListItem } from "./TodoListItem.js";
  * Empty state component for the todo list
  */
 function TodoListEmptyState() {
-    return (_jsxs("div", { className: "flex flex-col items-center justify-center h-full gap-3", children: [_jsx(SquareCheckBig, { className: "size-8 text-neutral-300" }), _jsxs("p", { className: "text-base leading-6 text-neutral-400 text-center", children: ["There's nothing on the", _jsx("br", {}), "to-do list yet."] })] }));
+    return (_jsxs("div", { className: "flex flex-col items-center justify-center h-full gap-3", children: [
+            _jsx(SquareCheckBig, { className: "size-8 text-neutral-300" }), _jsxs("p", { className: "text-base leading-6 text-neutral-400 text-center", children: ["There's nothing on the",
+                    _jsx("br", {}),
+                    "to-do list yet."] })
+        ] }));
 }
 export const TodoList = React.forwardRef(({ client, todos, className, ...props }, ref) => {
     // For now, just use prop-based todos

package/dist/gui/components/TodoListItem.js

@@ -15,10 +15,12 @@ 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: 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", 
+        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
-                todo.status === "in_progress" && "font-medium"), children: todo.text })] }));
+                todo.status === "in_progress" && "font-medium"), children: todo.text })
+        ] }));
 });
 TodoListItem.displayName = "TodoListItem";