@townco/ui 0.1.22 → 0.1.24

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

@@ -1,6 +1,8 @@
+import { createLogger } from "@townco/core";
 import { useCallback } from "react";
 import { useChatStore } from "../store/chat-store.js";
 import { useChatMessages } from "./use-chat-messages.js";
+const logger = createLogger("use-chat-input", "debug");
 /**
  * Hook for managing chat input
  */
@@ -33,7 +35,9 @@ export function useChatInput(client) {
         }
         catch (error) {
             // Error is handled in useChatMessages
-            console.error("Failed to send message:", error);
+            logger.error("Failed to send message", {
+                error: error instanceof Error ? error.message : String(error),
+            });
         }
         finally {
             setInputSubmitting(false);

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

@@ -1,5 +1,7 @@
+import { createLogger } from "@townco/core";
 import { useCallback } from "react";
 import { useChatStore } from "../store/chat-store.js";
+const logger = createLogger("use-chat-messages", "debug");
 /**
  * Hook for managing chat messages
  */
@@ -17,12 +19,12 @@ export function useChatMessages(client) {
      */
     const sendMessage = useCallback(async (content) => {
         if (!client) {
-            console.error("❌ No client available");
+            logger.error("No client available");
             setError("No client available");
             return;
         }
         if (!sessionId) {
-            console.error("❌ No active session");
+            logger.error("No active session");
             setError("No active session");
             return;
         }
@@ -74,7 +76,9 @@ export function useChatMessages(client) {
             let accumulatedContent = "";
             for await (const chunk of messageStream) {
                 if (chunk.tokenUsage) {
-                    console.error("DEBUG use-chat-messages: chunk.tokenUsage:", JSON.stringify(chunk.tokenUsage));
+                    logger.debug("chunk.tokenUsage", {
+                        tokenUsage: chunk.tokenUsage,
+                    });
                 }
                 if (chunk.isComplete) {
                     // Update final message

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

@@ -1,5 +1,7 @@
+import { createLogger } from "@townco/core";
 import { useCallback, useEffect } from "react";
 import { useChatStore } from "../store/chat-store.js";
+const logger = createLogger("use-chat-session", "debug");
 /**
  * Hook for managing chat session lifecycle
  */
@@ -26,7 +28,9 @@ export function useChatSession(client) {
             setConnectionStatus("connected");
         }
         catch (error) {
-            console.log(error);
+            logger.error("Failed to connect", {
+                error: error instanceof Error ? error.message : String(error),
+            });
             const message = error instanceof Error ? error.message : String(error);
             setError(message);
             setConnectionStatus("error");

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,3 +1,4 @@
+import { type LogEntry } from "@townco/core";
 import type { ConnectionStatus, DisplayMessage, InputState } from "../schemas/index.js";
 import type { ToolCall, ToolCallUpdate } from "../schemas/tool-call.js";
 /**
@@ -23,6 +24,8 @@ export interface ChatStore {
     };
     currentModel: string | null;
     tokenDisplayMode: "context" | "input" | "output";
+    logs: LogEntry[];
+    activeTab: "chat" | "logs";
     input: InputState;
     setConnectionStatus: (status: ConnectionStatus) => void;
     setSessionId: (id: string | null) => void;
@@ -49,6 +52,9 @@ export interface ChatStore {
     setCurrentModel: (model: string) => void;
     resetTokens: () => void;
     cycleTokenDisplayMode: () => void;
+    addLog: (log: LogEntry) => void;
+    clearLogs: () => void;
+    setActiveTab: (tab: "chat" | "logs") => void;
 }
 /**
  * Create chat store

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

@@ -1,5 +1,7 @@
+import { createLogger } from "@townco/core";
 import { create } from "zustand";
 import { mergeToolCallUpdate } from "../schemas/tool-call.js";
+const logger = createLogger("chat-store", "debug");
 /**
  * Create chat store
  */
@@ -24,6 +26,8 @@ export const useChatStore = create((set) => ({
     },
     currentModel: "claude-sonnet-4-5-20250929", // Default model, TODO: get from server
     tokenDisplayMode: "context", // Default to showing context (both billed and current)
+    logs: [],
+    activeTab: "chat",
     input: {
         value: "",
         isSubmitting: false,
@@ -46,7 +50,10 @@ export const useChatStore = create((set) => ({
         let finalUpdates = updates;
         if (updates.tokenUsage) {
             const existingTokenUsage = existingMessage?.tokenUsage;
-            console.error("DEBUG updateMessage: incoming tokenUsage:", JSON.stringify(updates.tokenUsage), "existing:", JSON.stringify(existingTokenUsage));
+            logger.debug("updateMessage: incoming tokenUsage", {
+                incoming: updates.tokenUsage,
+                existing: existingTokenUsage,
+            });
             // LangChain sends multiple token updates:
             // 1. Early chunk: inputTokens (context) + outputTokens (estimate) + totalTokens
             // 2. Later chunk: inputTokens=0 + outputTokens (final) + totalTokens (just output)
@@ -58,7 +65,9 @@ export const useChatStore = create((set) => ({
                 totalTokens: Math.max(updates.tokenUsage.inputTokens ?? 0, existingTokenUsage?.inputTokens ?? 0) +
                     Math.max(updates.tokenUsage.outputTokens ?? 0, existingTokenUsage?.outputTokens ?? 0),
             };
-            console.error("DEBUG updateMessage: merged tokenUsage:", JSON.stringify(messageMaxTokens));
+            logger.debug("updateMessage: merged tokenUsage", {
+                merged: messageMaxTokens,
+            });
             // Replace the tokenUsage in updates with the max values
             finalUpdates = {
                 ...updates,
@@ -87,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
@@ -112,11 +121,11 @@ export const useChatStore = create((set) => ({
             const isBilledCorrect = actualSum.inputTokens === newTotalBilled.inputTokens &&
                 actualSum.outputTokens === newTotalBilled.outputTokens &&
                 actualSum.totalTokens === newTotalBilled.totalTokens;
-            console.error("DEBUG updateMessage: tokenUsage update", JSON.stringify({
+            logger.debug("updateMessage: tokenUsage update", {
                 messageId: id,
                 updates: updates.tokenUsage,
                 existing: existingTokenUsage,
-                messageMax: messageMaxTokens,
+                messageMax: messageTokens,
                 delta: { inputDelta, outputDelta, totalDelta },
                 totalBilled: newTotalBilled,
                 currentContext: newCurrentContext,
@@ -125,7 +134,7 @@ export const useChatStore = create((set) => ({
                 messageCount: messages.length,
                 messagesWithTokens: messageTokenBreakdown.length,
                 breakdown: messageTokenBreakdown,
-            }));
+            });
         }
         return {
             messages,
@@ -146,7 +155,7 @@ export const useChatStore = create((set) => ({
         // Find the most recent assistant message (which should be streaming)
         const lastAssistantIndex = state.messages.findLastIndex((msg) => msg.role === "assistant");
         if (lastAssistantIndex === -1) {
-            console.warn("No assistant message found to add tool call to");
+            logger.warn("No assistant message found to add tool call to");
             return state;
         }
         const messages = [...state.messages];
@@ -163,7 +172,7 @@ export const useChatStore = create((set) => ({
         // Find the most recent assistant message
         const lastAssistantIndex = state.messages.findLastIndex((msg) => msg.role === "assistant");
         if (lastAssistantIndex === -1) {
-            console.warn("No assistant message found to update tool call in");
+            logger.warn("No assistant message found to update tool call in");
             return state;
         }
         const messages = [...state.messages];
@@ -173,7 +182,7 @@ export const useChatStore = create((set) => ({
         const toolCalls = lastAssistantMsg.toolCalls || [];
         const existingIndex = toolCalls.findIndex((tc) => tc.id === update.id);
         if (existingIndex === -1) {
-            console.warn(`Tool call ${update.id} not found in message`);
+            logger.warn(`Tool call ${update.id} not found in message`);
             return state;
         }
         const existing = toolCalls[existingIndex];
@@ -271,4 +280,9 @@ export const useChatStore = create((set) => ({
             return state; // Should never happen, but satisfies TypeScript
         return { tokenDisplayMode: nextMode };
     }),
+    addLog: (log) => set((state) => ({
+        logs: [...state.logs, log],
+    })),
+    clearLogs: () => set({ logs: [] }),
+    setActiveTab: (tab) => set({ activeTab: tab }),
 }));

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,6 +1,8 @@
+import { createLogger } from "@townco/core";
 import { HttpTransport } from "../transports/http.js";
 import { StdioTransport } from "../transports/stdio.js";
 import { WebSocketTransport } from "../transports/websocket.js";
+const logger = createLogger("acp-client", "debug");
 /**
  * Simplified ACP client with explicit transport selection
  */
@@ -17,7 +19,9 @@ export class AcpClient {
         this.setupTransportListeners();
         if (config.autoConnect) {
             this.connect().catch((error) => {
-                console.error("Failed to auto-connect:", error);
+                logger.error("Failed to auto-connect", {
+                    error: error instanceof Error ? error.message : String(error),
+                });
             });
         }
     }
@@ -191,7 +195,9 @@ export class AcpClient {
                 handler(update);
             }
             catch (error) {
-                console.error("Error in session update handler:", error);
+                logger.error("Error in session update handler", {
+                    error: error instanceof Error ? error.message : String(error),
+                });
             }
         }
     }
@@ -202,7 +208,9 @@ export class AcpClient {
                 handler(error);
             }
             catch (err) {
-                console.error("Error in error handler:", err);
+                logger.error("Error in error handler", {
+                    error: err instanceof Error ? err.message : String(err),
+                });
             }
         }
     }

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.d.ts

@@ -3,3 +3,6 @@ export interface ChatViewProps {
     client: AcpClient | null;
 }
 export declare function ChatView({ client }: ChatViewProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChatViewStatus({ client }: {
+    client: AcpClient | null;
+}): import("react/jsx-runtime").JSX.Element;