@townco/ui 0.1.43 → 0.1.45

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

@@ -14,6 +14,7 @@ export function useChatMessages(client, startSession) {
     const addMessage = useChatStore((state) => state.addMessage);
     const updateMessage = useChatStore((state) => state.updateMessage);
     const setError = useChatStore((state) => state.setError);
+    const setLatestContextInputTokens = useChatStore((state) => state.setLatestContextInputTokens);
     /**
      * Send a message to the agent
      */
@@ -78,8 +79,17 @@ export function useChatMessages(client, startSession) {
             let accumulatedContent = "";
             let streamCompleted = false;
             for await (const chunk of messageStream) {
+                // Update context input tokens if provided
+                if ("contextInputTokens" in chunk &&
+                    chunk.contextInputTokens != null) {
+                    const tokens = chunk.contextInputTokens;
+                    logger.debug("Received contextInputTokens from backend", {
+                        contextInputTokens: tokens,
+                    });
+                    setLatestContextInputTokens(tokens);
+                }
                 if (chunk.tokenUsage) {
-                    logger.debug("chunk.tokenUsage", {
+                    logger.debug("Received tokenUsage from backend", {
                         tokenUsage: chunk.tokenUsage,
                     });
                 }

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

@@ -22,6 +22,7 @@ export interface ChatStore {
         outputTokens: number;
         totalTokens: number;
     };
+    latestContextInputTokens: number | null;
     currentModel: string | null;
     tokenDisplayMode: "context" | "input" | "output";
     logs: LogEntry[];
@@ -49,6 +50,7 @@ export interface ChatStore {
         outputTokens?: number;
         totalTokens?: number;
     }) => void;
+    setLatestContextInputTokens: (tokens: number | null) => void;
     setCurrentModel: (model: string) => void;
     resetTokens: () => void;
     cycleTokenDisplayMode: () => void;

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

@@ -24,6 +24,7 @@ export const useChatStore = create((set) => ({
         outputTokens: 0,
         totalTokens: 0,
     },
+    latestContextInputTokens: null,
     currentModel: "claude-sonnet-4-5-20250929", // Default model, TODO: get from server
     tokenDisplayMode: "context", // Default to showing context (both billed and current)
     logs: [],
@@ -278,6 +279,7 @@ export const useChatStore = create((set) => ({
                 (state.currentContext.outputTokens + (tokenUsage.outputTokens ?? 0)),
         },
     })),
+    setLatestContextInputTokens: (tokens) => set({ latestContextInputTokens: tokens }),
     setCurrentModel: (model) => set({ currentModel: model }),
     resetTokens: () => set({
         totalBilled: {
@@ -290,6 +292,7 @@ export const useChatStore = create((set) => ({
             outputTokens: 0,
             totalTokens: 0,
         },
+        latestContextInputTokens: null,
     }),
     cycleTokenDisplayMode: () => set((state) => {
         const modes = [

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

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

package/dist/gui/components/ChatView.js

@@ -123,11 +123,8 @@ export function ChatView({ client, initialSessionId, error: initError, }) {
             favicon: "https://www.google.com/s2/favicons?domain=theverge.com&sz=32",
         },
     ];
-    // Get the latest token usage from the most recent assistant message
-    const latestTokenUsage = messages
-        .slice()
-        .reverse()
-        .find((msg) => msg.role === "assistant" && msg.tokenUsage)?.tokenUsage;
+    // Get the latest context input tokens from the session context
+    const latestContextInputTokens = useChatStore((state) => state.latestContextInputTokens);
     // Command menu items for chat input
     const commandMenuItems = [
         {
@@ -199,5 +196,5 @@ export function ChatView({ client, initialSessionId, error: initError, }) {
                                                 previousMessage?.role === "assistant" ? "mt-2" : "mt-6";
                                         }
                                         return (_jsx(Message, { message: message, className: spacingClass, isLastMessage: index === messages.length - 1, children: _jsx(MessageContent, { message: message, thinkingDisplayStyle: "collapsible" }) }, message.id));
-                                    }) })) }), _jsx(ChatLayout.Footer, { children: _jsxs(ChatInputRoot, { client: client, startSession: startSession, children: [_jsx(ChatInputCommandMenu, { commands: commandMenuItems }), _jsx(ChatInputField, { placeholder: placeholder, autoFocus: true }), _jsxs(ChatInputToolbar, { children: [_jsxs("div", { className: "flex items-baseline gap-1", children: [_jsx(ChatInputActions, {}), _jsx(ChatInputAttachment, {}), latestTokenUsage && (_jsx(ContextUsageButton, { percentage: calculateTokenPercentage(latestTokenUsage.totalTokens ?? 0, currentModel ?? undefined), tokens: latestTokenUsage.totalTokens ?? 0, formattedPercentage: formatTokenPercentage(latestTokenUsage.totalTokens ?? 0, currentModel ?? undefined) }))] }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx(ChatInputVoiceInput, {}), _jsx(ChatInputSubmit, { children: _jsx(ArrowUp, { className: "size-4" }) })] })] })] }) })] })] }), isLargeScreen && (_jsx(ChatLayout.Aside, { breakpoint: "lg", children: _jsx(AsideTabs, {}) }))] }));
+                                    }) })) }), _jsx(ChatLayout.Footer, { children: _jsxs(ChatInputRoot, { client: client, startSession: startSession, children: [_jsx(ChatInputCommandMenu, { commands: commandMenuItems }), _jsx(ChatInputField, { placeholder: placeholder, autoFocus: true }), _jsxs(ChatInputToolbar, { children: [_jsxs("div", { className: "flex items-baseline gap-1", children: [_jsx(ChatInputActions, {}), _jsx(ChatInputAttachment, {}), latestContextInputTokens != null && (_jsx(ContextUsageButton, { percentage: calculateTokenPercentage(latestContextInputTokens, currentModel ?? undefined), tokens: latestContextInputTokens, formattedPercentage: formatTokenPercentage(latestContextInputTokens, currentModel ?? undefined) }))] }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx(ChatInputVoiceInput, {}), _jsx(ChatInputSubmit, { children: _jsx(ArrowUp, { className: "size-4" }) })] })] })] }) })] })] }), isLargeScreen && (_jsx(ChatLayout.Aside, { breakpoint: "lg", children: _jsx(AsideTabs, {}) }))] }));
 }

package/dist/sdk/schemas/message.d.ts

@@ -196,5 +196,6 @@ export declare const MessageChunk: z.ZodObject<{
         outputTokens: z.ZodOptional<z.ZodNumber>;
         totalTokens: z.ZodOptional<z.ZodNumber>;
     }, z.core.$strip>>;
+    contextInputTokens: z.ZodOptional<z.ZodNumber>;
 }, z.core.$strip>;
 export type MessageChunk = z.infer<typeof MessageChunk>;

package/dist/sdk/schemas/message.js

@@ -99,4 +99,5 @@ export const MessageChunk = z.object({
         totalTokens: z.number().optional(),
     })
         .optional(),
+    contextInputTokens: z.number().optional(),
 });

package/dist/sdk/transports/http.js

@@ -771,6 +771,13 @@ export class HttpTransport {
                 "tokenUsage" in update._meta
                 ? update._meta.tokenUsage
                 : undefined;
+            // Extract context input tokens from _meta if present
+            const contextInputTokens = update._meta &&
+                typeof update._meta === "object" &&
+                "contextInputTokens" in update._meta &&
+                typeof update._meta.contextInputTokens === "number"
+                ? update._meta.contextInputTokens
+                : undefined;
             // Queue message chunks if present (but skip during replay)
             // For agent_message_chunk, content is an object, not an array
             const content = update.content;
@@ -783,6 +790,7 @@ export class HttpTransport {
                         role: "assistant",
                         contentDelta: { type: "text", text: contentObj.text },
                         tokenUsage,
+                        contextInputTokens,
                         isComplete: false,
                     };
                 }

package/dist/sdk/transports/stdio.d.ts

@@ -15,6 +15,7 @@ export declare class StdioTransport implements Transport {
     private currentSessionId;
     private chunkResolvers;
     private streamComplete;
+    private originalConsole;
     constructor(options: StdioTransportOptions);
     connect(): Promise<void>;
     disconnect(): Promise<void>;

package/dist/sdk/transports/stdio.js

@@ -18,6 +18,7 @@ export class StdioTransport {
     currentSessionId = null;
     chunkResolvers = [];
     streamComplete = false;
+    originalConsole = null;
     constructor(options) {
         this.options = options;
     }
@@ -41,7 +42,43 @@ export class StdioTransport {
             const outputStream = Writable.toWeb(this.agentProcess.stdin);
             const inputStream = Readable.toWeb(this.agentProcess.stdout);
             // Create the bidirectional stream using ndJsonStream
+            // Intercept all console methods to redirect agent output to logger
+            // Store original console methods for later restoration
+            this.originalConsole = {
+                log: console.log,
+                error: console.error,
+                warn: console.warn,
+                info: console.info,
+                debug: console.debug,
+            };
+            console.log = (...args) => {
+                logger.info("Agent console.log", {
+                    message: args.map(String).join(" "),
+                });
+            };
+            console.error = (...args) => {
+                logger.error("Agent console.error", {
+                    message: args.map(String).join(" "),
+                });
+            };
+            console.warn = (...args) => {
+                logger.warn("Agent console.warn", {
+                    message: args.map(String).join(" "),
+                });
+            };
+            console.info = (...args) => {
+                logger.info("Agent console.info", {
+                    message: args.map(String).join(" "),
+                });
+            };
+            console.debug = (...args) => {
+                logger.debug("Agent console.debug", {
+                    message: args.map(String).join(" "),
+                });
+            };
             const stream = ndJsonStream(outputStream, inputStream);
+            // Keep console methods intercepted throughout the connection lifecycle
+            // They will be restored in disconnect()
             // Create ACP client implementation factory
             const self = this;
             const clientFactory = (_agent) => {
@@ -321,6 +358,15 @@ export class StdioTransport {
         }
         catch (error) {
             this.connected = false;
+            // Restore original console methods on error
+            if (this.originalConsole) {
+                console.log = this.originalConsole.log;
+                console.error = this.originalConsole.error;
+                console.warn = this.originalConsole.warn;
+                console.info = this.originalConsole.info;
+                console.debug = this.originalConsole.debug;
+                this.originalConsole = null;
+            }
             const err = error instanceof Error ? error : new Error(String(error));
             this.notifyError(err);
             throw err;
@@ -343,6 +389,15 @@ export class StdioTransport {
             this.connection = null;
             this.connected = false;
             this.currentSessionId = null;
+            // Restore original console methods
+            if (this.originalConsole) {
+                console.log = this.originalConsole.log;
+                console.error = this.originalConsole.error;
+                console.warn = this.originalConsole.warn;
+                console.info = this.originalConsole.info;
+                console.debug = this.originalConsole.debug;
+                this.originalConsole = null;
+            }
         }
         catch (error) {
             const err = error instanceof Error ? error : new Error(String(error));

package/package.json

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

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

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

package/dist/core/lib/logger.js

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

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

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

package/dist/tui/components/LogsPanel.js

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