@townco/ui 0.1.23 → 0.1.25

package/dist/core/hooks/use-chat-input.js

@@ -1,5 +1,5 @@
+import { createLogger } from "@townco/core";
 import { useCallback } from "react";
-import { createLogger } from "../lib/logger.js";
 import { useChatStore } from "../store/chat-store.js";
 import { useChatMessages } from "./use-chat-messages.js";
 const logger = createLogger("use-chat-input", "debug");

package/dist/core/hooks/use-chat-messages.js

@@ -1,5 +1,5 @@
+import { createLogger } from "@townco/core";
 import { useCallback } from "react";
-import { createLogger } from "../lib/logger.js";
 import { useChatStore } from "../store/chat-store.js";
 const logger = createLogger("use-chat-messages", "debug");
 /**

package/dist/core/hooks/use-chat-session.d.ts

@@ -3,7 +3,7 @@ import type { AcpClient } from "../../sdk/client/index.js";
  * Hook for managing chat session lifecycle
  */
 export declare function useChatSession(client: AcpClient | null): {
-    connectionStatus: "disconnected" | "connecting" | "connected" | "error";
+    connectionStatus: "error" | "connecting" | "connected" | "disconnected";
     sessionId: string | null;
     connect: () => Promise<void>;
     startSession: () => Promise<void>;

package/dist/core/hooks/use-chat-session.js

@@ -1,5 +1,5 @@
+import { createLogger } from "@townco/core";
 import { useCallback, useEffect } from "react";
-import { createLogger } from "../lib/logger.js";
 import { useChatStore } from "../store/chat-store.js";
 const logger = createLogger("use-chat-session", "debug");
 /**

package/dist/core/index.d.ts

@@ -5,6 +5,5 @@
  * Contains business logic, state management, and hooks
  */
 export * from "./hooks/index.js";
-export * from "./lib/logger.js";
 export * from "./schemas/index.js";
 export * from "./store/chat-store.js";

package/dist/core/index.js

@@ -5,6 +5,5 @@
  * Contains business logic, state management, and hooks
  */
 export * from "./hooks/index.js";
-export * from "./lib/logger.js";
 export * from "./schemas/index.js";
 export * from "./store/chat-store.js";

package/dist/core/store/chat-store.d.ts

@@ -1,4 +1,4 @@
-import { type LogEntry } from "../lib/logger.js";
+import { type LogEntry } from "@townco/core";
 import type { ConnectionStatus, DisplayMessage, InputState } from "../schemas/index.js";
 import type { ToolCall, ToolCallUpdate } from "../schemas/tool-call.js";
 /**

package/dist/core/store/chat-store.js

@@ -1,5 +1,5 @@
+import { createLogger } from "@townco/core";
 import { create } from "zustand";
-import { createLogger } from "../lib/logger.js";
 import { mergeToolCallUpdate } from "../schemas/tool-call.js";
 const logger = createLogger("chat-store", "debug");
 /**
@@ -96,14 +96,14 @@ export const useChatStore = create((set) => ({
         // Apply the updates (using finalUpdates which has the max tokenUsage)
         const messages = state.messages.map((msg) => msg.id === id ? { ...msg, ...finalUpdates } : msg);
         // Verification logging (only if tokenUsage was updated)
-        if (updates.tokenUsage) {
+        if (updates.tokenUsage && finalUpdates.tokenUsage) {
             const existingTokenUsage = existingMessage?.tokenUsage;
-            const messageMaxTokens = finalUpdates.tokenUsage;
-            const inputDelta = (messageMaxTokens.inputTokens ?? 0) -
+            const messageTokens = finalUpdates.tokenUsage;
+            const inputDelta = (messageTokens.inputTokens ?? 0) -
                 (existingTokenUsage?.inputTokens ?? 0);
-            const outputDelta = (messageMaxTokens.outputTokens ?? 0) -
+            const outputDelta = (messageTokens.outputTokens ?? 0) -
                 (existingTokenUsage?.outputTokens ?? 0);
-            const totalDelta = (messageMaxTokens.totalTokens ?? 0) -
+            const totalDelta = (messageTokens.totalTokens ?? 0) -
                 (existingTokenUsage?.totalTokens ?? 0);
             // Calculate actual sum from updated messages
             const messageTokenBreakdown = messages
@@ -125,7 +125,7 @@ export const useChatStore = create((set) => ({
                 messageId: id,
                 updates: updates.tokenUsage,
                 existing: existingTokenUsage,
-                messageMax: messageMaxTokens,
+                messageMax: messageTokens,
                 delta: { inputDelta, outputDelta, totalDelta },
                 totalBilled: newTotalBilled,
                 currentContext: newCurrentContext,

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

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

package/dist/gui/components/Button.js

@@ -6,11 +6,11 @@ import { cn } from "../lib/utils.js";
 const buttonVariants = cva("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 cursor-pointer", {
     variants: {
         variant: {
-            default: "bg-primary text-primary-foreground hover:bg-primary/90",
-            destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-            outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
-            secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-            ghost: "hover:bg-accent hover:text-accent-foreground",
+            default: "bg-primary text-primary-foreground hover:bg-primary-hover",
+            destructive: "bg-destructive text-destructive-foreground hover:bg-destructive-hover",
+            outline: "border border-input bg-background hover:bg-accent-hover hover:text-accent-foreground",
+            secondary: "bg-secondary text-secondary-foreground hover:bg-secondary-hover",
+            ghost: "hover:bg-accent-hover hover:text-accent-foreground",
             link: "text-primary underline-offset-4 hover:underline",
         },
         size: {

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

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { type SourceItem } from "./SourceListItem.js";
 import type { TodoItem } from "./TodoListItem.js";
 /**
  * Shared tab content components for both mobile (ChatHeader) and desktop (Panel) views
@@ -12,6 +13,10 @@ export interface FilesTabContentProps extends React.HTMLAttributes<HTMLDivElemen
     files?: string[];
 }
 export declare const FilesTabContent: React.ForwardRefExoticComponent<FilesTabContentProps & React.RefAttributes<HTMLDivElement>>;
+export interface SourcesTabContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    sources?: SourceItem[];
+}
+export declare const SourcesTabContent: React.ForwardRefExoticComponent<SourcesTabContentProps & React.RefAttributes<HTMLDivElement>>;
 export interface DatabaseTabContentProps extends React.HTMLAttributes<HTMLDivElement> {
     data?: unknown;
 }

package/dist/gui/components/ChatPanelTabContent.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "../lib/utils.js";
+import { SourceListItem } from "./SourceListItem.js";
 export const TodoTabContent = React.forwardRef(({ todos, className, ...props }, ref) => {
     return (_jsx("div", { ref: ref, className: cn("space-y-2", className), ...props, children: todos.length === 0 ? (_jsx("div", { className: "flex items-center justify-center h-full min-h-[200px]", children: _jsx("p", { className: "text-sm text-muted-foreground", children: "No todos yet" }) })) : (todos.map((todo) => (_jsx("div", { className: "text-sm", children: todo.text }, todo.id)))) }));
 });
@@ -9,6 +10,10 @@ export const FilesTabContent = React.forwardRef(({ files = [], className, ...pro
     return (_jsx("div", { ref: ref, className: cn("space-y-2", className), ...props, children: files.length === 0 ? (_jsx("div", { className: "flex items-center justify-center h-full min-h-[200px]", children: _jsx("p", { className: "text-sm text-muted-foreground", children: "No files attached" }) })) : (files.map((file) => (_jsx("div", { className: "text-sm", children: file }, file)))) }));
 });
 FilesTabContent.displayName = "FilesTabContent";
+export const SourcesTabContent = React.forwardRef(({ sources = [], className, ...props }, ref) => {
+    return (_jsx("div", { ref: ref, className: cn("space-y-2", className), ...props, children: sources.length === 0 ? (_jsx("div", { className: "flex items-center justify-center h-full min-h-[200px]", children: _jsx("p", { className: "text-sm text-muted-foreground", children: "No sources available" }) })) : (sources.map((source) => (_jsx(SourceListItem, { source: source }, source.id)))) }));
+});
+SourcesTabContent.displayName = "SourcesTabContent";
 export const DatabaseTabContent = React.forwardRef(({ data, className, ...props }, ref) => {
     return (_jsxs("div", { ref: ref, className: cn("space-y-4", className), ...props, children: [_jsx("h3", { className: "font-semibold text-lg", children: "Database" }), _jsxs("div", { className: "text-sm text-muted-foreground", children: [_jsx("p", { children: "Database viewer - panel automatically expanded to large size" }), _jsxs("div", { className: "mt-4 p-4 border border-border rounded", children: [_jsx("p", { children: "Your large data table would go here" }), data && typeof data === "object" ? (_jsx("pre", { className: "mt-2 text-xs overflow-auto", children: JSON.stringify(data, null, 2) })) : null] })] })] }));
 });

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

@@ -29,6 +29,6 @@ export interface ChatSecondaryPanelProps extends React.HTMLAttributes<HTMLDivEle
     /**
      * Which tabs to show
      */
-    visibleTabs?: ("todo" | "files" | "database")[];
+    visibleTabs?: ("todo" | "files" | "database" | "sources")[];
 }
 export declare const ChatSecondaryPanel: React.ForwardRefExoticComponent<ChatSecondaryPanelProps & React.RefAttributes<HTMLDivElement>>;

package/dist/gui/components/ChatSecondaryPanel.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { CheckSquare, Database, FileText } from "lucide-react";
+import { CheckSquare, Database, FileText, Link2 } from "lucide-react";
 import * as React from "react";
 import { useEffect, useRef, useState } from "react";
 import { cn } from "../lib/utils.js";
-import { FilesTabContent, TodoTabContent } from "./ChatPanelTabContent.js";
+import { FilesTabContent, SourcesTabContent, TodoTabContent, } from "./ChatPanelTabContent.js";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "./Tabs.js";
 import { TodoList } from "./TodoList.js";
 export const ChatSecondaryPanel = React.forwardRef(({ client, todos, variant = "animated", showIcons = false, visibleTabs = ["todo", "files", "database"], className, ...props }, ref) => {
@@ -49,6 +49,11 @@ export const ChatSecondaryPanel = React.forwardRef(({ client, todos, variant = "
             label: "Database",
             icon: Database,
         },
+        {
+            id: "sources",
+            label: "Sources",
+            icon: Link2,
+        },
     ];
     const tabs = allTabs.filter((tab) => visibleTabs.includes(tab.id));
     return (_jsx("div", { ref: ref, className: cn("select-none", className), ...props, children: _jsxs(Tabs, { value: activeTab, onValueChange: setActiveTab, className: "w-full", children: [variant === "pills" ? (
@@ -61,6 +66,6 @@ export const ChatSecondaryPanel = React.forwardRef(({ client, todos, variant = "
                 _jsxs("div", { className: "relative mb-4 border-border", children: [_jsx(TabsList, { className: "bg-transparent p-0 h-auto rounded-none w-full border-none", children: tabs.map((tab) => (_jsx(TabsTrigger, { value: tab.id, className: "px-3 py-1 text-sm font-[var(--font-family)] font-medium rounded-none text-foreground opacity-60 data-[state=active]:opacity-100 data-[state=active]:bg-transparent data-[state=active]:shadow-none", children: tab.label }, tab.id))) }), _jsx("div", { ref: containerRef, className: "absolute top-0 left-0 w-full overflow-hidden z-10 pointer-events-none", style: {
                                 clipPath: "inset(0 100% 0 0% round 999px)",
                                 transition: "clip-path 0.25s ease-out",
-                            }, children: _jsx(TabsList, { className: "bg-secondary p-0 h-auto rounded-none w-full border-none", children: tabs.map((tab) => (_jsx(TabsTrigger, { value: tab.id, ref: activeTab === tab.id ? activeTabElementRef : null, className: "px-3 py-1 text-sm font-[var(--font-family)] font-medium rounded-none text-primary bg-transparent data-[state=active]:shadow-none shadow-none", tabIndex: -1, children: tab.label }, tab.id))) }) })] })), _jsx(TabsContent, { value: "todo", className: variant === "pills" ? "mt-0" : "", children: variant === "pills" ? (_jsx(TodoTabContent, { todos: todosToDisplay })) : (_jsx(TodoList, { todos: todosToDisplay })) }), _jsx(TabsContent, { value: "files", className: variant === "pills" ? "mt-0" : "", children: _jsx(FilesTabContent, {}) }), _jsx(TabsContent, { value: "database", className: variant === "pills" ? "mt-0" : "", children: _jsx("div", { className: "text-sm text-foreground opacity-60 italic", children: "Database tab coming soon..." }) })] }) }));
+                            }, children: _jsx(TabsList, { className: "bg-secondary p-0 h-auto rounded-none w-full border-none", children: tabs.map((tab) => (_jsx(TabsTrigger, { value: tab.id, ref: activeTab === tab.id ? activeTabElementRef : null, className: "px-3 py-1 text-sm font-[var(--font-family)] font-medium rounded-none text-primary bg-transparent data-[state=active]:shadow-none shadow-none", tabIndex: -1, children: tab.label }, tab.id))) }) })] })), _jsx(TabsContent, { value: "todo", className: variant === "pills" ? "mt-0" : "", children: variant === "pills" ? (_jsx(TodoTabContent, { todos: todosToDisplay })) : (_jsx(TodoList, { todos: todosToDisplay })) }), _jsx(TabsContent, { value: "files", className: variant === "pills" ? "mt-0" : "", children: _jsx(FilesTabContent, {}) }), _jsx(TabsContent, { value: "database", className: variant === "pills" ? "mt-0" : "", children: _jsx("div", { className: "text-sm text-foreground opacity-60 italic", children: "Database tab coming soon..." }) }), _jsx(TabsContent, { value: "sources", className: variant === "pills" ? "mt-0" : "", children: _jsx(SourcesTabContent, {}) })] }) }));
 });
 ChatSecondaryPanel.displayName = "ChatSecondaryPanel";

package/dist/gui/components/Input.js

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

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

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

package/dist/gui/components/PanelTabsHeader.js

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

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

@@ -0,0 +1,15 @@
+import * as React from "react";
+export interface SourceItem {
+    id: string;
+    title: string;
+    url: string;
+    snippet: string;
+    sourceName: string;
+    favicon?: string;
+    timestamp?: string;
+}
+export interface SourceListItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    source: SourceItem;
+    isSelected?: boolean;
+}
+export declare const SourceListItem: React.ForwardRefExoticComponent<SourceListItemProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/gui/components/SourceListItem.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/utils.js";
+export const SourceListItem = React.forwardRef(({ source, isSelected, className, ...props }, ref) => {
+    return (_jsxs("button", { ref: ref, type: "button", className: cn("flex w-full text-left gap-2 items-start p-3 rounded-lg transition-colors cursor-pointer border border-transparent", "hover:bg-accent-hover hover:border-border/50", isSelected && "bg-accent-hover border-border/50", className), onClick: () => window.open(source.url, "_blank"), ...props, children: [_jsx("div", { className: "flex gap-2 items-center py-[2px] shrink-0", children: _jsx("div", { className: "relative rounded-[3px] shrink-0 size-4 overflow-hidden bg-muted", children: source.favicon ? (_jsx("img", { alt: source.sourceName, className: "size-full object-cover", src: source.favicon })) : (_jsx("div", { className: "size-full bg-muted" })) }) }), _jsxs("div", { className: "flex flex-1 flex-col gap-1 min-w-0", children: [_jsxs("div", { className: "text-xs leading-normal text-foreground", children: [_jsx("span", { className: "font-medium", children: source.sourceName }), _jsxs("span", { className: "text-muted-foreground", children: [" \u00B7 ", source.title] })] }), _jsx("p", { className: "text-xs leading-relaxed text-muted-foreground line-clamp-3", children: source.snippet })] })] }));
+});
+SourceListItem.displayName = "SourceListItem";

package/dist/gui/components/ToolCall.js

@@ -14,7 +14,7 @@ const statusStyles = {
 /**
  * Tool call kind icons (using emoji for simplicity)
  */
-const kindIcons = {
+const _kindIcons = {
     read: "\u{1F4C4}",
     edit: "\u{270F}\u{FE0F}",
     delete: "\u{1F5D1}\u{FE0F}",
@@ -31,9 +31,9 @@ const kindIcons = {
  */
 export function ToolCall({ toolCall }) {
     const [isExpanded, setIsExpanded] = useState(false);
-    return (_jsxs("div", { className: "flex flex-col", children: [_jsxs("button", { type: "button", className: "flex items-center gap-1.5 cursor-pointer bg-transparent border-none p-0 text-left group w-fit", onClick: () => setIsExpanded(!isExpanded), "aria-expanded": isExpanded, children: [_jsxs("span", { className: `inline-flex items-center gap-1.5 px-2 py-1 text-xs font-medium rounded ${statusStyles[toolCall.status]}`, children: [_jsx(Wrench, { className: "h-3 w-3" }), _jsx("span", { children: toolCall.title }), toolCall.status === "completed" && _jsx("span", { children: "\u2713" })] }), _jsx("span", { className: "text-gray-400 text-xs opacity-0 group-hover:opacity-100 transition-opacity", children: isExpanded ? "▲" : "▼" })] }), isExpanded && (_jsxs("div", { className: "mt-2 space-y-3 text-sm border border-gray-200 rounded-md p-3 bg-white shadow-sm max-w-full", children: [toolCall.locations && toolCall.locations.length > 0 && (_jsxs("div", { children: [_jsx("div", { className: "text-xs font-semibold text-gray-500 uppercase tracking-wide mb-1.5", children: "Files" }), _jsx("ul", { className: "space-y-1", children: toolCall.locations.map((loc) => (_jsxs("li", { className: "font-mono text-xs text-gray-700 bg-gray-50 px-2 py-1 rounded", children: [loc.path, loc.line !== null &&
+    return (_jsxs("div", { className: "flex flex-col", children: [_jsxs("button", { type: "button", className: "flex items-center gap-1.5 cursor-pointer bg-transparent border-none p-0 text-left group w-fit", onClick: () => setIsExpanded(!isExpanded), "aria-expanded": isExpanded, children: [_jsxs("span", { className: `inline-flex items-center gap-1.5 px-2 py-1 text-xs font-medium rounded ${statusStyles[toolCall.status]}`, children: [_jsx(Wrench, { className: "h-3 w-3" }), _jsx("span", { children: toolCall.title }), toolCall.status === "completed" && _jsx("span", { children: "\u2713" })] }), _jsx("span", { className: "text-muted-foreground text-xs opacity-0 group-hover:opacity-100 transition-opacity", children: isExpanded ? "▲" : "▼" })] }), isExpanded && (_jsxs("div", { className: "mt-2 space-y-3 text-sm border border-border rounded-md p-3 bg-card shadow-sm max-w-full", children: [toolCall.locations && toolCall.locations.length > 0 && (_jsxs("div", { children: [_jsx("div", { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wide mb-1.5", children: "Files" }), _jsx("ul", { className: "space-y-1", children: toolCall.locations.map((loc) => (_jsxs("li", { className: "font-mono text-xs text-foreground bg-muted px-2 py-1 rounded", children: [loc.path, loc.line !== null &&
                                             loc.line !== undefined &&
-                                            `:${loc.line}`] }, `${loc.path}:${loc.line ?? ""}`))) })] })), toolCall.rawInput && Object.keys(toolCall.rawInput).length > 0 && (_jsxs("div", { children: [_jsx("div", { className: "text-xs font-semibold text-gray-500 uppercase tracking-wide mb-1.5", children: "Input" }), _jsx("div", { className: "bg-gray-50 p-2 rounded border border-gray-200", children: _jsx(JsonView, { value: toolCall.rawInput, collapsed: false, displayDataTypes: false, displayObjectSize: false, enableClipboard: true, style: { fontSize: "11px", backgroundColor: "transparent" } }) })] })), toolCall.content && toolCall.content.length > 0 && (_jsxs("div", { children: [_jsx("div", { className: "text-xs font-semibold text-gray-500 uppercase tracking-wide mb-1.5", children: "Output" }), _jsx("div", { className: "space-y-2", children: toolCall.content.map((block, idx) => {
+                                            `:${loc.line}`] }, `${loc.path}:${loc.line ?? ""}`))) })] })), toolCall.rawInput && Object.keys(toolCall.rawInput).length > 0 && (_jsxs("div", { children: [_jsx("div", { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wide mb-1.5", children: "Input" }), _jsx("div", { className: "bg-muted p-2 rounded border border-border", children: _jsx(JsonView, { value: toolCall.rawInput, collapsed: false, displayDataTypes: false, displayObjectSize: false, enableClipboard: true, style: { fontSize: "11px", backgroundColor: "transparent" } }) })] })), toolCall.content && toolCall.content.length > 0 && (_jsxs("div", { children: [_jsx("div", { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wide mb-1.5", children: "Output" }), _jsx("div", { className: "space-y-2", children: toolCall.content.map((block, idx) => {
                                     // Generate a stable key based on content
                                     const getBlockKey = () => {
                                         if (block.type === "diff" && "path" in block) {
@@ -58,7 +58,7 @@ 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: "bg-gray-50 p-2 rounded border border-gray-200", children: _jsx(JsonView, { value: parsed, collapsed: false, displayDataTypes: false, displayObjectSize: false, enableClipboard: true, style: {
+                                                return (_jsx("div", { className: "bg-muted p-2 rounded border border-border", children: _jsx(JsonView, { value: parsed, collapsed: false, displayDataTypes: false, displayObjectSize: false, enableClipboard: true, style: {
                                                             fontSize: "11px",
                                                             backgroundColor: "transparent",
                                                         } }) }, key));
@@ -68,7 +68,7 @@ export function ToolCall({ toolCall }) {
                                             // Not valid JSON, render as plain text
                                         }
                                         // Render as plain text
-                                        return (_jsx("pre", { className: "bg-gray-50 p-2.5 rounded border border-gray-200 text-xs overflow-x-auto font-mono text-gray-800", children: text }, key));
+                                        return (_jsx("pre", { className: "bg-muted p-2.5 rounded border border-border text-xs overflow-x-auto font-mono text-foreground", children: text }, key));
                                     };
                                     // Handle nested content blocks (ACP format)
                                     if (block.type === "content" && "content" in block) {
@@ -86,7 +86,7 @@ export function ToolCall({ toolCall }) {
                                         "path" in block &&
                                         "oldText" in block &&
                                         "newText" in block) {
-                                        return (_jsxs("div", { className: "border rounded", children: [_jsxs("div", { className: "bg-gray-100 px-2 py-1 text-xs font-mono", children: [block.path, "line" in block &&
+                                        return (_jsxs("div", { className: "border rounded", children: [_jsxs("div", { className: "bg-muted px-2 py-1 text-xs font-mono", children: [block.path, "line" in block &&
                                                             block.line !== null &&
                                                             block.line !== undefined &&
                                                             `:${block.line}`] }), _jsxs("div", { className: "p-2 font-mono text-xs", children: [_jsxs("div", { className: "text-red-600", children: ["- ", block.oldText] }), _jsxs("div", { className: "text-green-600", children: ["+ ", block.newText] })] })] }, getBlockKey()));
@@ -96,5 +96,5 @@ export function ToolCall({ toolCall }) {
                                         return (_jsxs("div", { className: "bg-black text-green-400 p-2 rounded text-xs font-mono", children: ["Terminal: ", block.terminalId] }, getBlockKey()));
                                     }
                                     return null;
-                                }) })] })), toolCall.error && (_jsxs("div", { className: "bg-red-50 border border-red-200 rounded p-2.5 text-red-700", children: [_jsx("div", { className: "text-xs font-semibold text-red-600 uppercase tracking-wide mb-1.5", children: "Error" }), _jsx("div", { className: "text-xs", children: toolCall.error })] })), toolCall.tokenUsage && (_jsxs("div", { className: "bg-gray-50 border border-gray-200 rounded p-2.5", children: [_jsx("div", { className: "text-xs font-semibold text-gray-500 uppercase tracking-wide mb-2", children: "Token Usage" }), _jsxs("div", { className: "grid grid-cols-3 gap-3 text-xs text-gray-700", children: [toolCall.tokenUsage.inputTokens !== undefined && (_jsxs("div", { children: [_jsx("div", { className: "text-gray-500 text-[10px] uppercase tracking-wide mb-0.5", children: "Input" }), _jsx("div", { className: "font-medium", children: toolCall.tokenUsage.inputTokens.toLocaleString() })] })), toolCall.tokenUsage.outputTokens !== undefined && (_jsxs("div", { children: [_jsx("div", { className: "text-gray-500 text-[10px] uppercase tracking-wide mb-0.5", children: "Output" }), _jsx("div", { className: "font-medium", children: toolCall.tokenUsage.outputTokens.toLocaleString() })] })), toolCall.tokenUsage.totalTokens !== undefined && (_jsxs("div", { children: [_jsx("div", { className: "text-gray-500 text-[10px] uppercase tracking-wide mb-0.5", children: "Total" }), _jsx("div", { className: "font-medium", children: toolCall.tokenUsage.totalTokens.toLocaleString() })] }))] })] })), toolCall.startedAt && (_jsxs("div", { className: "text-xs text-gray-500", children: ["Started: ", new Date(toolCall.startedAt).toLocaleTimeString(), toolCall.completedAt && (_jsxs(_Fragment, { children: [" ", "| Completed:", " ", new Date(toolCall.completedAt).toLocaleTimeString(), " (", Math.round((toolCall.completedAt - toolCall.startedAt) / 1000), "s)"] }))] }))] }))] }));
+                                }) })] })), toolCall.error && (_jsxs("div", { className: "bg-destructive/10 border border-destructive/20 rounded p-2.5 text-destructive", children: [_jsx("div", { className: "text-xs font-semibold text-destructive uppercase tracking-wide mb-1.5", children: "Error" }), _jsx("div", { className: "text-xs", children: toolCall.error })] })), toolCall.tokenUsage && (_jsxs("div", { className: "bg-muted border border-border rounded p-2.5", children: [_jsx("div", { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wide mb-2", children: "Token Usage" }), _jsxs("div", { className: "grid grid-cols-3 gap-3 text-xs text-foreground", children: [toolCall.tokenUsage.inputTokens !== undefined && (_jsxs("div", { children: [_jsx("div", { className: "text-muted-foreground text-[10px] uppercase tracking-wide mb-0.5", children: "Input" }), _jsx("div", { className: "font-medium", children: toolCall.tokenUsage.inputTokens.toLocaleString() })] })), toolCall.tokenUsage.outputTokens !== undefined && (_jsxs("div", { children: [_jsx("div", { className: "text-muted-foreground text-[10px] uppercase tracking-wide mb-0.5", children: "Output" }), _jsx("div", { className: "font-medium", children: toolCall.tokenUsage.outputTokens.toLocaleString() })] })), toolCall.tokenUsage.totalTokens !== undefined && (_jsxs("div", { children: [_jsx("div", { className: "text-muted-foreground text-[10px] uppercase tracking-wide mb-0.5", children: "Total" }), _jsx("div", { className: "font-medium", children: toolCall.tokenUsage.totalTokens.toLocaleString() })] }))] })] })), toolCall.startedAt && (_jsxs("div", { className: "text-xs text-muted-foreground", children: ["Started: ", new Date(toolCall.startedAt).toLocaleTimeString(), toolCall.completedAt && (_jsxs(_Fragment, { children: [" ", "| Completed:", " ", new Date(toolCall.completedAt).toLocaleTimeString(), " (", Math.round((toolCall.completedAt - toolCall.startedAt) / 1000), "s)"] }))] }))] }))] }));
 }

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

@@ -6,7 +6,7 @@ export type { ConnectionStatus } from "./ChatHeader.js";
 export * as ChatHeader from "./ChatHeader.js";
 export { Actions as ChatInputActions, Attachment as ChatInputAttachment, type ChatInputActionsProps, type ChatInputAttachmentProps, type ChatInputCommandMenuProps, type ChatInputFieldProps, type ChatInputRootProps, type ChatInputSubmitProps, type ChatInputToolbarProps, type ChatInputVoiceInputProps, CommandMenu as ChatInputCommandMenu, type CommandMenuItem, Field as ChatInputField, Root as ChatInputRoot, Submit as ChatInputSubmit, Toolbar as ChatInputToolbar, VoiceInput as ChatInputVoiceInput, } from "./ChatInput.js";
 export * as ChatLayout from "./ChatLayout.js";
-export { DatabaseTabContent, type DatabaseTabContentProps, FilesTabContent, type FilesTabContentProps, TodoTabContent, type TodoTabContentProps, } from "./ChatPanelTabContent.js";
+export { DatabaseTabContent, type DatabaseTabContentProps, FilesTabContent, type FilesTabContentProps, SourcesTabContent, type SourcesTabContentProps, TodoTabContent, type TodoTabContentProps, } from "./ChatPanelTabContent.js";
 export { ChatSecondaryPanel, type ChatSecondaryPanelProps, } from "./ChatSecondaryPanel.js";
 export * as ChatSidebar from "./ChatSidebar.js";
 export { ChatStatus, type ChatStatusProps } from "./ChatStatus.js";
@@ -25,6 +25,7 @@ export { Reasoning, type ReasoningProps } from "./Reasoning.js";
 export { Response, type ResponseProps } from "./Response.js";
 export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, } from "./Select.js";
 export { Toaster } from "./Sonner.js";
+export { type SourceItem, SourceListItem, type SourceListItemProps, } from "./SourceListItem.js";
 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";

package/dist/gui/components/index.js

@@ -8,7 +8,7 @@ export * as ChatHeader from "./ChatHeader.js";
 export { Actions as ChatInputActions, Attachment as ChatInputAttachment, CommandMenu as ChatInputCommandMenu, Field as ChatInputField, Root as ChatInputRoot, Submit as ChatInputSubmit, Toolbar as ChatInputToolbar, VoiceInput as ChatInputVoiceInput, } from "./ChatInput.js";
 // Chat layout components
 export * as ChatLayout from "./ChatLayout.js";
-export { DatabaseTabContent, FilesTabContent, TodoTabContent, } from "./ChatPanelTabContent.js";
+export { DatabaseTabContent, FilesTabContent, SourcesTabContent, TodoTabContent, } from "./ChatPanelTabContent.js";
 export { ChatSecondaryPanel, } from "./ChatSecondaryPanel.js";
 export * as ChatSidebar from "./ChatSidebar.js";
 export { ChatStatus } from "./ChatStatus.js";
@@ -29,8 +29,9 @@ export { PanelTabsHeader, } from "./PanelTabsHeader.js";
 export { Reasoning } from "./Reasoning.js";
 export { Response } from "./Response.js";
 export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, } from "./Select.js";
-// Toast components
 export { Toaster } from "./Sonner.js";
+// Toast components
+export { SourceListItem, } from "./SourceListItem.js";
 export { Tabs, TabsContent, TabsList, TabsTrigger } from "./Tabs.js";
 // Task/Todo components
 export { Task, TaskList, } from "./Task.js";

package/dist/sdk/client/acp-client.js

@@ -1,4 +1,4 @@
-import { createLogger } from "../../core/lib/logger.js";
+import { createLogger } from "@townco/core";
 import { HttpTransport } from "../transports/http.js";
 import { StdioTransport } from "../transports/stdio.js";
 import { WebSocketTransport } from "../transports/websocket.js";

package/dist/sdk/transports/http.js

@@ -1,5 +1,5 @@
 import * as acp from "@agentclientprotocol/sdk";
-import { createLogger } from "../../core/lib/logger.js";
+import { createLogger } from "@townco/core";
 const logger = createLogger("http-transport");
 /**
  * HTTP transport implementation using ACP over HTTP + SSE

package/dist/sdk/transports/stdio.js

@@ -1,7 +1,7 @@
 import { spawn } from "node:child_process";
 import { Readable, Writable } from "node:stream";
 import { ClientSideConnection, ndJsonStream, PROTOCOL_VERSION, } from "@agentclientprotocol/sdk";
-import { createLogger } from "../../core/lib/logger.js";
+import { createLogger } from "@townco/core";
 const logger = createLogger("stdio-transport");
 /**
  * Stdio transport implementation using Agent Client Protocol SDK

package/dist/tui/components/ChatView.js

@@ -6,18 +6,18 @@ import { MessageList } from "./MessageList.js";
 import { StatusBar } from "./StatusBar.js";
 export function ChatView({ client }) {
     const setIsStreaming = useChatStore((state) => state.setIsStreaming);
-    const streamingStartTime = useChatStore((state) => state.streamingStartTime);
-    const totalBilled = useChatStore((state) => state.totalBilled);
-    const currentContext = useChatStore((state) => state.currentContext);
-    const currentModel = useChatStore((state) => state.currentModel);
-    const tokenDisplayMode = useChatStore((state) => state.tokenDisplayMode);
+    const _streamingStartTime = useChatStore((state) => state.streamingStartTime);
+    const _totalBilled = useChatStore((state) => state.totalBilled);
+    const _currentContext = useChatStore((state) => state.currentContext);
+    const _currentModel = useChatStore((state) => state.currentModel);
+    const _tokenDisplayMode = useChatStore((state) => state.tokenDisplayMode);
     // Use headless hooks for business logic
-    const { connectionStatus, sessionId } = useChatSession(client);
+    useChatSession(client); // Subscribe to session changes
     const { messages, isStreaming } = useChatMessages(client);
     useToolCalls(client); // Still need to subscribe to tool call events
     const { value, isSubmitting, attachedFiles, onChange, onSubmit } = useChatInput(client);
     // Check if we're actively receiving content (hide waiting indicator)
-    const hasStreamingContent = messages.some((msg) => msg.isStreaming && msg.content.length > 0);
+    const _hasStreamingContent = messages.some((msg) => msg.isStreaming && msg.content.length > 0);
     // Callbacks for keyboard shortcuts
     const handleEscape = () => {
         if (isStreaming) {

package/dist/tui/components/InputBox.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Text, useInput, useStdout } from "ink";
-import { useState } from "react";
 import { SimpleTextInput } from "./SimpleTextInput.js";
 export function InputBox({ value, isSubmitting, attachedFiles, onChange, onSubmit, onEscape, }) {
     const { stdout } = useStdout();
@@ -17,13 +16,13 @@ export function InputBox({ value, isSubmitting, attachedFiles, onChange, onSubmi
             return;
         // Shift+Enter or Alt+Enter: insert newline
         if (key.return && (key.shift || key.meta)) {
-            onChange(value + "\n");
+            onChange(`${value}\n`);
             return;
         }
     });
     // Split value into lines for display
     const lines = value.split("\n");
-    const hasMultipleLines = lines.length > 1;
+    const _hasMultipleLines = lines.length > 1;
     return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { color: "blue", children: "─".repeat(terminalWidth) }), attachedFiles.length > 0 && (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { dimColor: true, children: "Attached files:" }), attachedFiles.map((file) => (_jsxs(Box, { children: [_jsxs(Text, { color: "cyan", children: [" ", file.name] }), _jsxs(Text, { dimColor: true, children: [" (", formatFileSize(file.size), ")"] })] }, file.path)))] })), _jsx(Box, { paddingY: 1, flexDirection: "column", children: _jsxs(Box, { flexDirection: "row", children: [_jsx(Text, { bold: true, color: "blue", children: "> " }), _jsx(Box, { flexGrow: 1, children: isSubmitting ? (_jsx(Text, { color: "gray", italic: true, children: "Sending..." })) : (_jsx(SimpleTextInput, { value: value, onChange: onChange, onSubmit: onSubmit, placeholder: "Type your message... (\\ or Shift+Enter for newline)" })) })] }) })] }));
 }
 function formatFileSize(bytes) {

package/dist/tui/components/SimpleTextInput.js

@@ -136,7 +136,7 @@ export function SimpleTextInput({ value, onChange, onSubmit, placeholder = "", }
             const newValue = value.slice(0, cursorPos) + input + value.slice(cursorPos);
             // If user types backslash at the end, automatically add newline
             if (input === "\\" && cursorPos === value.length) {
-                onChange(newValue.slice(0, -1) + "\n");
+                onChange(`${newValue.slice(0, -1)}\n`);
                 // Reset cursor to end (no offset)
                 setCursorOffset(0);
             }

package/dist/tui/components/StatusBar.js

@@ -1,5 +1,5 @@
 import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { Box, Text } from "ink";
+import { Text } from "ink";
 import { useEffect, useState } from "react";
 import { calculateTokenPercentage, formatTokenPercentage, } from "../../core/utils/model-context.js";
 // Synonyms of "thinking" in multiple languages

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@townco/ui",
-  "version": "0.1.23",
+  "version": "0.1.25",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -40,6 +40,7 @@
   },
   "dependencies": {
     "@agentclientprotocol/sdk": "^0.5.1",
+    "@townco/core": "0.0.3",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-label": "^2.1.8",
@@ -61,7 +62,7 @@
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4.1.17",
-    "@townco/tsconfig": "0.1.20",
+    "@townco/tsconfig": "0.1.22",
     "@types/node": "^24.10.0",
     "@types/react": "^19.2.2",
     "ink": "^6.4.0",

package/src/styles/global.css

@@ -2,92 +2,49 @@
 
 @source "../**/*.{ts,tsx}";
 
-:root {
-  --background: 0 0% 100%;
-  --foreground: 222.2 84% 4.9%;
-  --card: 0 0% 100%;
-  --card-foreground: 222.2 84% 4.9%;
-  --popover: 0 0% 100%;
-  --popover-foreground: 222.2 84% 4.9%;
-  --primary: 222.2 47.4% 11.2%;
-  --primary-foreground: 210 40% 98%;
-  --secondary: 210 40% 96.1%;
-  --secondary-foreground: 222.2 47.4% 11.2%;
-  --muted: 210 40% 96.1%;
-  --muted-foreground: 215.4 16.3% 46.9%;
-  --accent: 210 40% 96.1%;
-  --accent-foreground: 222.2 47.4% 11.2%;
-  --destructive: 0 84.2% 60.2%;
-  --destructive-foreground: 210 40% 98%;
-  --border: 214.3 31.8% 91.4%;
-  --input: 214.3 31.8% 91.4%;
-  --ring: 222.2 84% 4.9%;
-  --radius: 0.5rem;
+@theme {
+  /* Semantic Color Tokens */
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
   
-  /* Text colors from design system */
-  --text-primary: 0 0% 9.02%;      /* #171717 */
-  --text-secondary: 0 0% 32.16%;   /* #525252 */
-  --text-tertiary: 0 0% 45.1%;     /* #737373 */
-}
-
-.dark {
-  --background: 222.2 84% 4.9%;
-  --foreground: 210 40% 98%;
-  --card: 222.2 84% 4.9%;
-  --card-foreground: 210 40% 98%;
-  --popover: 222.2 84% 4.9%;
-  --popover-foreground: 210 40% 98%;
-  --primary: 210 40% 98%;
-  --primary-foreground: 222.2 47.4% 11.2%;
-  --secondary: 217.2 32.6% 17.5%;
-  --secondary-foreground: 210 40% 98%;
-  --muted: 217.2 32.6% 17.5%;
-  --muted-foreground: 215 20.2% 65.1%;
-  --accent: 217.2 32.6% 17.5%;
-  --accent-foreground: 210 40% 98%;
-  --destructive: 0 62.8% 30.6%;
-  --destructive-foreground: 210 40% 98%;
-  --border: 217.2 32.6% 17.5%;
-  --input: 217.2 32.6% 17.5%;
-  --ring: 212.7 26.8% 83.9%;
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
   
-  /* Text colors from design system (dark mode) */
-  --text-primary: 0 0% 98%;        /* Light text for dark mode */
-  --text-secondary: 0 0% 70%;      /* Muted light text */
-  --text-tertiary: 0 0% 55%;       /* More muted text */
-}
-
-@theme {
-  /* Colors */
-  --color-background: hsl(var(--background));
-  --color-foreground: hsl(var(--foreground));
-  --color-card: hsl(var(--card));
-  --color-card-foreground: hsl(var(--card-foreground));
-  --color-popover: hsl(var(--popover));
-  --color-popover-foreground: hsl(var(--popover-foreground));
-  --color-primary: hsl(var(--primary));
-  --color-primary-foreground: hsl(var(--primary-foreground));
-  --color-secondary: hsl(var(--secondary));
-  --color-secondary-foreground: hsl(var(--secondary-foreground));
-  --color-muted: hsl(var(--muted));
-  --color-muted-foreground: hsl(var(--muted-foreground));
-  --color-accent: hsl(var(--accent));
-  --color-accent-foreground: hsl(var(--accent-foreground));
-  --color-destructive: hsl(var(--destructive));
-  --color-destructive-foreground: hsl(var(--destructive-foreground));
-  --color-border: hsl(var(--border));
-  --color-input: hsl(var(--input));
-  --color-ring: hsl(var(--ring));
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
   
-  /* Text colors from design system */
-  --color-text-primary: hsl(var(--text-primary));
-  --color-text-secondary: hsl(var(--text-secondary));
-  --color-text-tertiary: hsl(var(--text-tertiary));
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary-hover: var(--primary-hover);
   
-  /* Shadows */
-  --shadow-sm: 0 8px 24px -16px rgba(0, 0, 0, 0.04), 0 4px 16px 0 rgba(0, 0, 0, 0.04);
-  --shadow-md: 0 8px 24px -16px rgba(0, 0, 0, 0.04), 0 4px 16px 0 rgba(0, 0, 0, 0.04);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary-hover: var(--secondary-hover);
+  
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent-hover: var(--accent-hover);
+  
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-destructive-hover: var(--destructive-hover);
   
+  --color-border: var(--border);
+  --color-border-dark: var(--border-dark);
+  --color-border-focus: var(--border-focus);
+  --color-border-error: var(--border-error);
+  --color-input: var(--input);
+  --color-input-background: var(--input-background);
+  --color-ring: var(--ring);
+  
+  /* Text colors from design system */
+  --color-text-primary: var(--text-primary);
+  --color-text-secondary: var(--text-secondary);
+  --color-text-tertiary: var(--text-tertiary);
+
   /* Layout widths - max-width utilities */
   --max-width-chat: 720px;
   --max-width-prose: 477px;
@@ -106,15 +63,112 @@
   
   --font-size-label: 0.875rem;         /* 14px */
   --line-height-label: 1.5;            /* 150% */
+
+  /* Shadows */
+  --shadow-sm: 0 8px 24px -16px rgba(0, 0, 0, 0.04), 0 4px 16px 0 rgba(0, 0, 0, 0.04);
+  --shadow-md: 0 8px 24px -16px rgba(0, 0, 0, 0.04), 0 4px 16px 0 rgba(0, 0, 0, 0.04);
+
+  /* Radius */
+  --radius: 0.5rem;
+}
+
+/* 
+  Define the CSS variables that reference Tailwind palette colors.
+  This allows us to swap them in dark mode while keeping the semantic names.
+*/
+:root {
+  --background: var(--color-white);
+  --foreground: var(--color-neutral-950);
+  
+  --card: var(--color-white);
+  --card-foreground: var(--color-neutral-950);
+  
+  --popover: var(--color-white);
+  --popover-foreground: var(--color-neutral-950);
+  
+  --primary: var(--color-neutral-900);
+  --primary-foreground: var(--color-neutral-50);
+  --primary-hover: var(--color-neutral-700);
+  
+  --secondary: var(--color-neutral-100);
+  --secondary-foreground: var(--color-neutral-900);
+  --secondary-hover: var(--color-neutral-50);
+  
+  --muted: var(--color-neutral-50);
+  --muted-foreground: var(--color-neutral-500);
+  
+  --accent: var(--color-neutral-100);
+  --accent-foreground: var(--color-neutral-900);
+  --accent-hover: var(--color-neutral-50);
+  
+  --destructive: var(--color-red-500);
+  --destructive-foreground: var(--color-neutral-50);
+  --destructive-hover: var(--color-red-600);
+  
+  --border: var(--color-neutral-200);
+  --border-dark: var(--color-neutral-300);
+  --border-focus: var(--color-neutral-400);
+  --border-error: var(--color-red-500);
+  --input: var(--color-neutral-200);
+  --input-background: var(--color-white);
+  --ring: var(--color-neutral-900);
+  
+  /* Text colors from design system */
+  --text-primary: var(--color-neutral-900);
+  --text-secondary: var(--color-neutral-600);
+  --text-tertiary: var(--color-neutral-500);
+}
+
+.dark {
+  --background: var(--color-neutral-950);
+  --foreground: var(--color-neutral-50);
+  
+  --card: var(--color-neutral-950);
+  --card-foreground: var(--color-neutral-50);
+  
+  --popover: var(--color-neutral-950);
+  --popover-foreground: var(--color-neutral-50);
+  
+  --primary: var(--color-neutral-50);
+  --primary-foreground: var(--color-neutral-900);
+  --primary-hover: var(--color-neutral-200);
+  
+  --secondary: var(--color-neutral-800);
+  --secondary-foreground: var(--color-neutral-50);
+  --secondary-hover: var(--color-neutral-700);
+  
+  --muted: var(--color-neutral-800);
+  --muted-foreground: var(--color-neutral-400);
+  
+  --accent: var(--color-neutral-800);
+  --accent-foreground: var(--color-neutral-50);
+  --accent-hover: var(--color-neutral-700);
+  
+  --destructive: var(--color-red-900);
+  --destructive-foreground: var(--color-neutral-50);
+  --destructive-hover: var(--color-red-800);
+  
+  --border: var(--color-neutral-800);
+  --border-dark: var(--color-neutral-700);
+  --border-focus: var(--color-neutral-600);
+  --border-error: var(--color-red-500);
+  --input: var(--color-neutral-800);
+  --input-background: var(--color-neutral-950);
+  --ring: var(--color-neutral-300);
+  
+  /* Text colors from design system (dark mode) */
+  --text-primary: var(--color-neutral-50);
+  --text-secondary: var(--color-neutral-400);
+  --text-tertiary: var(--color-neutral-500);
 }
 
 @layer base {
   * {
-    border-color: hsl(var(--border));
+    border-color: var(--border);
   }
   body {
-    background-color: hsl(var(--background));
-    color: hsl(var(--foreground));
+    background-color: var(--background);
+    color: var(--foreground);
   }
   button {
     cursor: pointer;

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))) }));
-}