@townco/ui 0.1.40 → 0.1.42

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

@@ -2,7 +2,7 @@ import { type VariantProps } from "class-variance-authority";
 import * as React from "react";
 declare const buttonVariants: (props?: ({
     variant?: "default" | "link" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
-    size?: "default" | "sm" | "lg" | "icon" | null | undefined;
+    size?: "default" | "icon" | "sm" | "lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
     asChild?: boolean;

package/dist/gui/components/ChatView.js

@@ -6,7 +6,7 @@ import { useChatMessages, useChatSession, useToolCalls, } from "../../core/hooks
 import { useChatStore } from "../../core/store/chat-store.js";
 import { calculateTokenPercentage, formatTokenPercentage, } from "../../core/utils/model-context.js";
 import { cn } from "../lib/utils.js";
-import { ChatEmptyState, ChatHeader, ChatInputActions, ChatInputAttachment, ChatInputCommandMenu, ChatInputField, ChatInputRoot, ChatInputSubmit, ChatInputToolbar, ChatInputVoiceInput, ChatLayout, ContextUsageButton, FilesTabContent, Message, MessageContent, PanelTabsHeader, SourcesTabContent, Tabs, TabsContent, TodoTabContent, } from "./index.js";
+import { ChatEmptyState, ChatHeader, ChatInputActions, ChatInputAttachment, ChatInputCommandMenu, ChatInputField, ChatInputRoot, ChatInputSubmit, ChatInputToolbar, ChatInputVoiceInput, ChatLayout, ContextUsageButton, FilesTabContent, IconButton, Message, MessageContent, PanelTabsHeader, SourcesTabContent, Tabs, TabsContent, ThemeToggle, TodoTabContent, } from "./index.js";
 const logger = createLogger("gui");
 // Helper component to provide openFiles callback
 function OpenFilesButton({ children, }) {
@@ -25,12 +25,12 @@ function AsideTabs() {
 // Mobile header component that uses ChatHeader context
 function MobileHeader({ agentName, showHeader, }) {
     const { isExpanded, setIsExpanded } = ChatHeader.useChatHeaderContext();
-    return (_jsxs("div", { className: "flex lg:hidden items-center gap-2 flex-1", children: [showHeader && (_jsx("div", { className: "flex items-center gap-2 flex-1", children: _jsx("h1", { className: "text-heading-4 text-foreground", children: agentName }) })), !showHeader && _jsx("div", { className: "flex-1" }), _jsx("button", { type: "button", className: "flex items-center justify-center shrink-0 cursor-pointer", "aria-label": "Toggle menu", onClick: () => setIsExpanded(!isExpanded), children: _jsx(ChevronUp, { className: cn("size-4 text-muted-foreground transition-transform duration-200", isExpanded ? "" : "rotate-180") }) })] }));
+    return (_jsxs("div", { className: "flex lg:hidden items-center flex-1", children: [showHeader && (_jsx("div", { className: "flex items-center gap-2 flex-1", children: _jsx("h1", { className: "text-heading-4 text-foreground", children: agentName }) })), !showHeader && _jsx("div", { className: "flex-1" }), _jsx(ThemeToggle, {}), _jsx(IconButton, { "aria-label": "Toggle menu", onClick: () => setIsExpanded(!isExpanded), children: _jsx(ChevronUp, { className: cn("size-4 text-muted-foreground transition-transform duration-200", isExpanded ? "" : "rotate-180") }) })] }));
 }
 // Header component that uses ChatLayout context (must be inside ChatLayout.Root)
 function AppChatHeader({ agentName, todos, sources, showHeader, }) {
     const { panelSize, setPanelSize } = ChatLayout.useChatLayoutContext();
-    return (_jsxs(ChatHeader.Root, { className: cn("border-b border-border bg-card relative lg:p-0", "[border-bottom-width:0.5px]"), children: [_jsxs("div", { className: "hidden lg:flex items-center gap-2 w-full h-16 py-5 pl-6 pr-4", children: [showHeader && (_jsx("div", { className: "flex items-center gap-2 flex-1", children: _jsx("h1", { className: "text-heading-4 text-foreground", children: agentName }) })), !showHeader && _jsx("div", { className: "flex-1" }), _jsx("button", { type: "button", className: "flex items-center justify-center shrink-0 cursor-pointer", "aria-label": "Toggle sidebar", onClick: () => {
+    return (_jsxs(ChatHeader.Root, { className: cn("border-b border-border bg-card relative lg:p-0", "[border-bottom-width:0.5px]"), children: [_jsxs("div", { className: "hidden lg:flex items-center w-full h-16 py-5 pl-6 pr-4", children: [showHeader && (_jsx("div", { className: "flex items-center gap-2 flex-1", children: _jsx("h1", { className: "text-heading-4 text-foreground", children: agentName }) })), !showHeader && _jsx("div", { className: "flex-1" }), _jsx(ThemeToggle, {}), _jsx(IconButton, { "aria-label": "Toggle sidebar", onClick: () => {
                             setPanelSize(panelSize === "hidden" ? "small" : "hidden");
                         }, children: _jsx(PanelRight, { className: "size-4 text-muted-foreground" }) })] }), _jsx(MobileHeader, { agentName: agentName, showHeader: showHeader }), _jsx(ChatHeader.ExpandablePanel, { className: cn("pt-6 pb-8 px-6", "border-b border-border bg-card", "shadow-[0_4px_16px_0_rgba(0,0,0,0.04)]", "[border-bottom-width:0.5px]"), children: _jsxs(Tabs, { defaultValue: "todo", className: "w-full", children: [_jsx(PanelTabsHeader, { showIcons: true, visibleTabs: ["todo", "files", "sources"], variant: "default" }), _jsx(TabsContent, { value: "todo", className: "mt-4", children: _jsx(TodoTabContent, { todos: todos }) }), _jsx(TabsContent, { value: "files", className: "mt-4", children: _jsx(FilesTabContent, {}) }), _jsx(TabsContent, { value: "sources", className: "mt-4", children: _jsx(SourcesTabContent, { sources: sources }) })] }) })] }));
 }

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

@@ -0,0 +1,5 @@
+import * as React from "react";
+import { type ButtonProps } from "./Button.js";
+export interface IconButtonProps extends ButtonProps {
+}
+export declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/gui/components/IconButton.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/utils.js";
+import { Button } from "./Button.js";
+export const IconButton = React.forwardRef(({ className, ...props }, ref) => {
+    return (_jsx(Button, { ref: ref, variant: "ghost", size: "icon", className: cn("rounded-full", className), ...props }));
+});
+IconButton.displayName = "IconButton";

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-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));
+            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-muted data-[state=active]:text-foreground", "data-[state=inactive]:text-muted-foreground hover:text-foreground transition-colors"), children: [showIcons && Icon && _jsx(Icon, { className: "size-4" }), tab.label] }, tab.id));
         }) }));
 });
 PanelTabsHeader.displayName = "PanelTabsHeader";

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

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

package/dist/gui/components/ThemeProvider.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useState } from "react";
+const initialState = {
+    theme: "system",
+    setTheme: () => null,
+    resolvedTheme: "light",
+};
+const ThemeProviderContext = createContext(initialState);
+export function ThemeProvider({ children, defaultTheme = "system", storageKey = "vite-ui-theme", }) {
+    const [theme, setTheme] = useState(() => localStorage.getItem(storageKey) || defaultTheme);
+    const [resolvedTheme, setResolvedTheme] = useState("light");
+    useEffect(() => {
+        const root = window.document.documentElement;
+        root.classList.remove("light", "dark");
+        if (theme === "system") {
+            const systemTheme = window.matchMedia("(prefers-color-scheme: dark)")
+                .matches
+                ? "dark"
+                : "light";
+            root.classList.add(systemTheme);
+            setResolvedTheme(systemTheme);
+            return;
+        }
+        root.classList.add(theme);
+        setResolvedTheme(theme);
+    }, [theme]);
+    const value = {
+        theme,
+        setTheme: (theme) => {
+            localStorage.setItem(storageKey, theme);
+            setTheme(theme);
+        },
+        resolvedTheme,
+    };
+    return (_jsx(ThemeProviderContext.Provider, { value: value, children: children }));
+}
+export const useTheme = () => {
+    const context = useContext(ThemeProviderContext);
+    if (context === undefined)
+        throw new Error("useTheme must be used within a ThemeProvider");
+    return context;
+};

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

@@ -0,0 +1 @@
+export declare function ThemeToggle(): import("react/jsx-runtime").JSX.Element;

package/dist/gui/components/ThemeToggle.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Moon, Sun } from "lucide-react";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from "./DropdownMenu.js";
+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" })] })] }));
+}

package/dist/gui/components/ToolCall.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import JsonView from "@uiw/react-json-view";
 import { CheckSquare, ChevronDown, Cloud, Edit, FileText, Globe, Link, Search, Wrench, } from "lucide-react";
 import { useState } from "react";
+import { useTheme } from "./ThemeProvider.js";
 /**
  * Map of icon names to Lucide components
  */
@@ -35,20 +36,48 @@ const _kindIcons = {
  */
 export function ToolCall({ toolCall }) {
     const [isExpanded, setIsExpanded] = useState(false);
+    const { resolvedTheme } = useTheme();
     // Determine which icon to show
     const IconComponent = toolCall.icon && ICON_MAP[toolCall.icon]
         ? ICON_MAP[toolCall.icon]
         : Wrench;
     // Determine display name
     const displayName = toolCall.prettyName || toolCall.title;
-    return (_jsxs("div", { className: "flex flex-col my-4", children: [_jsx("button", { type: "button", className: "flex items-center gap-2 cursor-pointer bg-transparent border-none p-0 text-left group w-fit", onClick: () => setIsExpanded(!isExpanded), "aria-expanded": isExpanded, children: _jsxs("div", { className: "flex items-center gap-1.5 text-[11px] font-medium text-zinc-500", children: [_jsx("div", { className: "text-zinc-500", children: _jsx(IconComponent, { className: "h-3 w-3" }) }), _jsx("span", { className: "text-paragraph-sm text-zinc-500", children: displayName }), _jsx(ChevronDown, { className: `h-3 w-3 text-zinc-400 transition-transform duration-200 ${isExpanded ? "rotate-180" : ""}` })] }) }), isExpanded && (_jsxs("div", { className: "mt-2 text-sm border border-zinc-200 rounded-lg bg-zinc-50 overflow-hidden w-full", children: [toolCall.locations && toolCall.locations.length > 0 && (_jsxs("div", { className: "p-3 border-b border-zinc-200", children: [_jsx("div", { className: "text-[10px] font-bold text-zinc-400 uppercase tracking-wider mb-1.5 font-sans", children: "Files" }), _jsx("ul", { className: "space-y-1", children: toolCall.locations.map((loc) => (_jsxs("li", { className: "font-mono text-[11px] text-zinc-700 bg-zinc-200/50 px-1.5 py-0.5 rounded w-fit", children: [loc.path, loc.line !== null &&
+    // JSON View style based on theme
+    const jsonStyle = {
+        fontSize: "11px",
+        backgroundColor: "transparent",
+        fontFamily: "inherit",
+        "--w-rjv-color": resolvedTheme === "dark" ? "#fafafa" : "#09090b",
+        "--w-rjv-key-string": resolvedTheme === "dark" ? "#fafafa" : "#09090b",
+        "--w-rjv-background-color": "transparent",
+        "--w-rjv-line-color": resolvedTheme === "dark" ? "#27272a" : "#e4e4e7",
+        "--w-rjv-arrow-color": resolvedTheme === "dark" ? "#a1a1aa" : "#71717a",
+        "--w-rjv-edit-color": resolvedTheme === "dark" ? "#fafafa" : "#09090b",
+        "--w-rjv-info-color": resolvedTheme === "dark" ? "#a1a1aa" : "#71717a",
+        "--w-rjv-update-color": resolvedTheme === "dark" ? "#fafafa" : "#09090b",
+        "--w-rjv-copied-color": resolvedTheme === "dark" ? "#fafafa" : "#09090b",
+        "--w-rjv-copied-success-color": resolvedTheme === "dark" ? "#22c55e" : "#16a34a",
+        "--w-rjv-curlybraces-color": resolvedTheme === "dark" ? "#a1a1aa" : "#71717a",
+        "--w-rjv-colon-color": resolvedTheme === "dark" ? "#a1a1aa" : "#71717a",
+        "--w-rjv-brackets-color": resolvedTheme === "dark" ? "#a1a1aa" : "#71717a",
+        "--w-rjv-quotes-color": resolvedTheme === "dark" ? "#a1a1aa" : "#71717a",
+        "--w-rjv-quotes-string-color": resolvedTheme === "dark" ? "#a1a1aa" : "#71717a",
+        "--w-rjv-type-string-color": resolvedTheme === "dark" ? "#22c55e" : "#16a34a",
+        "--w-rjv-type-int-color": resolvedTheme === "dark" ? "#f59e0b" : "#d97706",
+        "--w-rjv-type-float-color": resolvedTheme === "dark" ? "#f59e0b" : "#d97706",
+        "--w-rjv-type-bigint-color": resolvedTheme === "dark" ? "#f59e0b" : "#d97706",
+        "--w-rjv-type-boolean-color": resolvedTheme === "dark" ? "#3b82f6" : "#2563eb",
+        "--w-rjv-type-date-color": resolvedTheme === "dark" ? "#ec4899" : "#db2777",
+        "--w-rjv-type-url-color": resolvedTheme === "dark" ? "#3b82f6" : "#2563eb",
+        "--w-rjv-type-null-color": resolvedTheme === "dark" ? "#ef4444" : "#dc2626",
+        "--w-rjv-type-nan-color": resolvedTheme === "dark" ? "#ef4444" : "#dc2626",
+        "--w-rjv-type-undefined-color": resolvedTheme === "dark" ? "#ef4444" : "#dc2626",
+    };
+    return (_jsxs("div", { className: "flex flex-col my-4", children: [_jsx("button", { type: "button", className: "flex items-center gap-2 cursor-pointer bg-transparent border-none p-0 text-left group w-fit", onClick: () => setIsExpanded(!isExpanded), "aria-expanded": isExpanded, children: _jsxs("div", { className: "flex items-center gap-1.5 text-[11px] font-medium text-muted-foreground", children: [_jsx("div", { className: "text-muted-foreground", children: _jsx(IconComponent, { className: "h-3 w-3" }) }), _jsx("span", { className: "text-paragraph-sm text-muted-foreground", children: displayName }), _jsx(ChevronDown, { className: `h-3 w-3 text-muted-foreground/70 transition-transform duration-200 ${isExpanded ? "rotate-180" : ""}` })] }) }), isExpanded && (_jsxs("div", { className: "mt-2 text-sm border border-border rounded-lg bg-card overflow-hidden w-full", children: [toolCall.locations && toolCall.locations.length > 0 && (_jsxs("div", { className: "p-3 border-b border-border", children: [_jsx("div", { className: "text-[10px] font-bold text-muted-foreground uppercase tracking-wider mb-1.5 font-sans", children: "Files" }), _jsx("ul", { className: "space-y-1", children: toolCall.locations.map((loc) => (_jsxs("li", { className: "font-mono text-[11px] text-foreground bg-muted px-1.5 py-0.5 rounded w-fit", children: [loc.path, loc.line !== null &&
                                             loc.line !== undefined &&
-                                            `:${loc.line}`] }, `${loc.path}:${loc.line ?? ""}`))) })] })), toolCall.rawInput && Object.keys(toolCall.rawInput).length > 0 && (_jsxs("div", { className: "p-3 border-b border-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) => {
+                                            `:${loc.line}`] }, `${loc.path}:${loc.line ?? ""}`))) })] })), toolCall.rawInput && Object.keys(toolCall.rawInput).length > 0 && (_jsxs("div", { className: "p-3 border-b border-border", children: [_jsx("div", { className: "text-[10px] font-bold text-muted-foreground uppercase tracking-wider mb-1.5 font-sans", children: "Input" }), _jsx("div", { className: "text-[11px] font-mono text-foreground", children: _jsx(JsonView, { value: toolCall.rawInput, collapsed: false, displayDataTypes: false, displayObjectSize: false, enableClipboard: true, style: jsonStyle }) })] })), (toolCall.content && toolCall.content.length > 0) ||
+                        toolCall.error ? (_jsxs("div", { className: "p-3 border-b border-border last:border-0", children: [_jsx("div", { className: "text-[10px] font-bold text-muted-foreground uppercase tracking-wider mb-1.5 font-sans", children: "Output" }), _jsxs("div", { className: "space-y-2 text-[11px] text-foreground", children: [toolCall.content?.map((block, idx) => {
                                         // Generate a stable key based on content
                                         const getBlockKey = () => {
                                             if (block.type === "diff" && "path" in block) {
@@ -73,18 +102,14 @@ export function ToolCall({ toolCall }) {
                                                 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));
+                                                    return (_jsx("div", { className: "text-[11px]", children: _jsx(JsonView, { value: parsed, collapsed: false, displayDataTypes: false, displayObjectSize: false, enableClipboard: true, style: jsonStyle }) }, 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));
+                                            return (_jsx("pre", { className: "whitespace-pre-wrap font-mono text-[11px] text-foreground overflow-x-auto", children: text }, key));
                                         };
                                         // Handle nested content blocks (ACP format)
                                         if (block.type === "content" && "content" in block) {
@@ -102,15 +127,15 @@ export function ToolCall({ toolCall }) {
                                             "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 &&
+                                            return (_jsxs("div", { className: "border border-border rounded bg-card", children: [_jsxs("div", { className: "bg-muted px-2 py-1 text-[10px] font-mono text-muted-foreground border-b border-border", 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()));
+                                                                `:${block.line}`] }), _jsxs("div", { className: "p-2 font-mono text-[11px]", children: [_jsxs("div", { className: "text-red-500 dark:text-red-400", children: ["- ", block.oldText] }), _jsxs("div", { className: "text-green-500 dark:text-green-400", children: ["+ ", block.newText] })] })] }, 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()));
+                                            return (_jsxs("div", { className: "bg-neutral-900 text-neutral-100 p-2 rounded text-[11px] font-mono", children: ["Terminal: ", block.terminalId] }, getBlockKey()));
                                         }
                                         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)"] }))] }))] }))] }))] }));
+                                    }), toolCall.error && (_jsxs("div", { className: "text-destructive font-mono text-[11px] mt-2", children: ["Error: ", toolCall.error] }))] })] })) : null, (toolCall.tokenUsage || toolCall.startedAt) && (_jsxs("div", { className: "p-2 bg-muted/50 border-t border-border flex flex-wrap gap-4 text-[10px] text-muted-foreground 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-[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)))] }))] }));
+        return (_jsxs("div", { className: "space-y-4", children: [grouped.in_progress.length > 0 && (_jsxs("div", { children: [_jsx("h4", { className: "text-[10px] font-bold text-muted-foreground 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-muted-foreground 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-muted-foreground 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

@@ -22,6 +22,7 @@ export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMe
 export { FileSystemItem, type FileSystemItemProps, } from "./FileSystemItem.js";
 export { FileSystemView, type FileSystemViewProps, } from "./FileSystemView.js";
 export { HeightTransition } from "./HeightTransition.js";
+export { IconButton, type IconButtonProps } from "./IconButton.js";
 export { Input, type InputProps, inputVariants } from "./Input.js";
 export { Label } from "./Label.js";
 export { MarkdownRenderer } from "./MarkdownRenderer.js";
@@ -37,6 +38,8 @@ export { type SourceItem, SourceListItem, type SourceListItemProps, } from "./So
 export { Tabs, TabsContent, TabsList, TabsTrigger } from "./Tabs.js";
 export { Task, type TaskItem, TaskList, type TaskListProps, type TaskProps, } from "./Task.js";
 export { Textarea, type TextareaProps, textareaVariants } from "./Textarea.js";
+export { ThemeProvider, useTheme } from "./ThemeProvider.js";
+export { ThemeToggle } from "./ThemeToggle.js";
 export { ThinkingBlock, type ThinkingBlockProps, } from "./ThinkingBlock.js";
 export { TodoList, type TodoListProps } from "./TodoList.js";
 export { type TodoItem, TodoListItem, type TodoListItemProps, } from "./TodoListItem.js";

package/dist/gui/components/index.js

@@ -28,6 +28,7 @@ export { FileSystemItem, } from "./FileSystemItem.js";
 export { FileSystemView, } from "./FileSystemView.js";
 // Utility components
 export { HeightTransition } from "./HeightTransition.js";
+export { IconButton } from "./IconButton.js";
 export { Input, inputVariants } from "./Input.js";
 export { Label } from "./Label.js";
 export { MarkdownRenderer } from "./MarkdownRenderer.js";
@@ -44,6 +45,8 @@ export { Tabs, TabsContent, TabsList, TabsTrigger } from "./Tabs.js";
 // Task/Todo components
 export { Task, TaskList, } from "./Task.js";
 export { Textarea, textareaVariants } from "./Textarea.js";
+export { ThemeProvider, useTheme } from "./ThemeProvider.js";
+export { ThemeToggle } from "./ThemeToggle.js";
 export { ThinkingBlock, } from "./ThinkingBlock.js";
 export { TodoList } from "./TodoList.js";
 export { TodoListItem, } from "./TodoListItem.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@townco/ui",
-  "version": "0.1.40",
+  "version": "0.1.42",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -40,7 +40,7 @@
   },
   "dependencies": {
     "@agentclientprotocol/sdk": "^0.5.1",
-    "@townco/core": "0.0.18",
+    "@townco/core": "0.0.20",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-label": "^2.1.8",
@@ -63,7 +63,7 @@
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4.1.17",
-    "@townco/tsconfig": "0.1.37",
+    "@townco/tsconfig": "0.1.39",
     "@types/node": "^24.10.0",
     "@types/react": "^19.2.2",
     "ink": "^6.4.0",

package/dist/core/lib/logger.d.ts

@@ -1,59 +0,0 @@
-/**
- * Browser-compatible logger
- * Outputs structured JSON logs to console with color-coding
- * Also captures logs to a global store for in-app viewing
- * In Node.js environment with logsDir option, also writes to .logs/ directory
- */
-export type LogLevel = "trace" | "debug" | "info" | "warn" | "error" | "fatal";
-export interface LogEntry {
-    id: string;
-    timestamp: string;
-    level: LogLevel;
-    service: string;
-    message: string;
-    metadata?: Record<string, unknown>;
-}
-/**
- * Get all captured logs
- */
-export declare function getCapturedLogs(): LogEntry[];
-/**
- * Clear all captured logs
- */
-export declare function clearCapturedLogs(): void;
-/**
- * Subscribe to log updates
- */
-type LogSubscriber = (entry: LogEntry) => void;
-export declare function subscribeToLogs(callback: LogSubscriber): () => void;
-/**
- * Configure global logs directory for file writing
- * Must be called before creating any loggers (typically at TUI startup)
- */
-export declare function configureLogsDir(logsDir: string): void;
-export declare class Logger {
-    private service;
-    private minLevel;
-    private logFilePath?;
-    private logsDir?;
-    private writeQueue;
-    private isWriting;
-    constructor(service: string, minLevel?: LogLevel);
-    private setupFileLogging;
-    private writeToFile;
-    private shouldLog;
-    private log;
-    trace(message: string, metadata?: Record<string, unknown>): void;
-    debug(message: string, metadata?: Record<string, unknown>): void;
-    info(message: string, metadata?: Record<string, unknown>): void;
-    warn(message: string, metadata?: Record<string, unknown>): void;
-    error(message: string, metadata?: Record<string, unknown>): void;
-    fatal(message: string, metadata?: Record<string, unknown>): void;
-}
-/**
- * Create a logger instance for a service
- * @param service - Service name (e.g., "gui", "http-agent", "tui")
- * @param minLevel - Minimum log level to display (default: "debug")
- */
-export declare function createLogger(service: string, minLevel?: LogLevel): Logger;
-export {};

package/dist/core/lib/logger.js

@@ -1,191 +0,0 @@
-/**
- * Browser-compatible logger
- * Outputs structured JSON logs to console with color-coding
- * Also captures logs to a global store for in-app viewing
- * In Node.js environment with logsDir option, also writes to .logs/ directory
- */
-// Check if running in Node.js
-const isNode = typeof process !== "undefined" && process.versions?.node;
-// Global logs directory configuration (set once at app startup for TUI)
-let globalLogsDir;
-// Global log store
-const globalLogStore = [];
-let logIdCounter = 0;
-/**
- * Get all captured logs
- */
-export function getCapturedLogs() {
-    return [...globalLogStore];
-}
-/**
- * Clear all captured logs
- */
-export function clearCapturedLogs() {
-    globalLogStore.length = 0;
-}
-const logSubscribers = new Set();
-export function subscribeToLogs(callback) {
-    logSubscribers.add(callback);
-    return () => logSubscribers.delete(callback);
-}
-function notifyLogSubscribers(entry) {
-    for (const callback of logSubscribers) {
-        callback(entry);
-    }
-}
-/**
- * Configure global logs directory for file writing
- * Must be called before creating any loggers (typically at TUI startup)
- */
-export function configureLogsDir(logsDir) {
-    globalLogsDir = logsDir;
-}
-const LOG_LEVELS = {
-    trace: 0,
-    debug: 1,
-    info: 2,
-    warn: 3,
-    error: 4,
-    fatal: 5,
-};
-const _LOG_COLORS = {
-    trace: "#6B7280", // gray
-    debug: "#3B82F6", // blue
-    info: "#10B981", // green
-    warn: "#F59E0B", // orange
-    error: "#EF4444", // red
-    fatal: "#DC2626", // dark red
-};
-const _LOG_STYLES = {
-    trace: "color: #6B7280",
-    debug: "color: #3B82F6; font-weight: bold",
-    info: "color: #10B981; font-weight: bold",
-    warn: "color: #F59E0B; font-weight: bold",
-    error: "color: #EF4444; font-weight: bold",
-    fatal: "color: #DC2626; font-weight: bold; background: #FEE2E2",
-};
-export class Logger {
-    service;
-    minLevel;
-    logFilePath;
-    logsDir;
-    writeQueue = [];
-    isWriting = false;
-    constructor(service, minLevel = "debug") {
-        this.service = service;
-        this.minLevel = minLevel;
-        // In production, suppress trace and debug logs
-        if (typeof process !== "undefined" &&
-            process.env?.NODE_ENV === "production") {
-            this.minLevel = "info";
-        }
-        // Note: File logging setup is done lazily in log() method
-        // This allows loggers created before configureLogsDir() to still write to files
-    }
-    setupFileLogging() {
-        if (!isNode || !globalLogsDir)
-            return;
-        try {
-            // Dynamic import for Node.js modules
-            const path = require("node:path");
-            const fs = require("node:fs");
-            this.logsDir = globalLogsDir;
-            this.logFilePath = path.join(this.logsDir, `${this.service}.log`);
-            // Create logs directory if it doesn't exist
-            if (!fs.existsSync(this.logsDir)) {
-                fs.mkdirSync(this.logsDir, { recursive: true });
-            }
-        }
-        catch (_error) {
-            // Silently fail if we can't set up file logging
-        }
-    }
-    async writeToFile(content) {
-        if (!this.logFilePath || !isNode)
-            return;
-        this.writeQueue.push(content);
-        if (this.isWriting) {
-            return;
-        }
-        this.isWriting = true;
-        while (this.writeQueue.length > 0) {
-            const batch = this.writeQueue.splice(0, this.writeQueue.length);
-            const data = `${batch.join("\n")}\n`;
-            try {
-                // Dynamic import for Node.js modules
-                const fs = require("node:fs");
-                await fs.promises.appendFile(this.logFilePath, data, "utf-8");
-            }
-            catch (_error) {
-                // Silently fail
-            }
-        }
-        this.isWriting = false;
-    }
-    shouldLog(level) {
-        return LOG_LEVELS[level] >= LOG_LEVELS[this.minLevel];
-    }
-    log(level, message, metadata) {
-        if (!this.shouldLog(level)) {
-            return;
-        }
-        const entry = {
-            id: `log_${++logIdCounter}`,
-            timestamp: new Date().toISOString(),
-            level,
-            service: this.service,
-            message,
-            ...(metadata && { metadata }),
-        };
-        // Store in global log store
-        globalLogStore.push(entry);
-        // Notify subscribers
-        notifyLogSubscribers(entry);
-        // Write to file in Node.js (for logs tab to read)
-        // Lazily set up file logging if globalLogsDir was configured after this logger was created
-        if (isNode && !this.logFilePath && globalLogsDir) {
-            this.setupFileLogging();
-        }
-        if (isNode && this.logFilePath) {
-            // Write as JSON without the id field (to match expected format)
-            const fileEntry = {
-                timestamp: entry.timestamp,
-                level: entry.level,
-                service: entry.service,
-                message: entry.message,
-                ...(entry.metadata && { metadata: entry.metadata }),
-            };
-            this.writeToFile(JSON.stringify(fileEntry)).catch(() => {
-                // Silently fail
-            });
-        }
-        // No console output - logs are only captured and displayed in UI
-        // This prevents logs from polluting stdout/stderr in TUI mode
-    }
-    trace(message, metadata) {
-        this.log("trace", message, metadata);
-    }
-    debug(message, metadata) {
-        this.log("debug", message, metadata);
-    }
-    info(message, metadata) {
-        this.log("info", message, metadata);
-    }
-    warn(message, metadata) {
-        this.log("warn", message, metadata);
-    }
-    error(message, metadata) {
-        this.log("error", message, metadata);
-    }
-    fatal(message, metadata) {
-        this.log("fatal", message, metadata);
-    }
-}
-/**
- * Create a logger instance for a service
- * @param service - Service name (e.g., "gui", "http-agent", "tui")
- * @param minLevel - Minimum log level to display (default: "debug")
- */
-export function createLogger(service, minLevel = "debug") {
-    return new Logger(service, minLevel);
-}

package/dist/tui/components/LogsPanel.d.ts

@@ -1,5 +0,0 @@
-import type { LogEntry } from "../../core/lib/logger.js";
-export interface LogsPanelProps {
-    logs: LogEntry[];
-}
-export declare function LogsPanel({ logs: initialLogs }: LogsPanelProps): import("react/jsx-runtime").JSX.Element;

package/dist/tui/components/LogsPanel.js

@@ -1,29 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Text } from "ink";
-import { useEffect, useState } from "react";
-import { subscribeToLogs } from "../../core/lib/logger.js";
-// Color mapping for log levels
-const LOG_LEVEL_COLORS = {
-    trace: "gray",
-    debug: "blue",
-    info: "green",
-    warn: "yellow",
-    error: "red",
-    fatal: "red",
-};
-export function LogsPanel({ logs: initialLogs }) {
-    const [logs, setLogs] = useState(initialLogs);
-    // Subscribe to new logs
-    useEffect(() => {
-        const unsubscribe = subscribeToLogs((entry) => {
-            setLogs((prev) => [...prev, entry]);
-        });
-        return unsubscribe;
-    }, []);
-    if (logs.length === 0) {
-        return (_jsx(Box, { flexDirection: "column", paddingX: 2, paddingY: 1, children: _jsx(Text, { dimColor: true, children: "No logs yet..." }) }));
-    }
-    // Show last 100 logs
-    const displayLogs = logs.slice(-100);
-    return (_jsx(Box, { flexDirection: "column", paddingX: 1, children: displayLogs.map((log) => (_jsxs(Box, { flexDirection: "row", gap: 1, children: [_jsx(Text, { dimColor: true, children: new Date(log.timestamp).toLocaleTimeString() }), _jsxs(Text, { color: LOG_LEVEL_COLORS[log.level], bold: true, children: ["[", log.level.toUpperCase(), "]"] }), _jsxs(Text, { dimColor: true, children: ["[", log.service, "]"] }), _jsx(Text, { children: log.message }), log.metadata && (_jsx(Text, { dimColor: true, children: JSON.stringify(log.metadata) }))] }, log.id))) }));
-}