@townco/ui 0.1.19 → 0.1.20

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

@@ -50,6 +50,11 @@ export declare function useChatMessages(client: AcpClient | null): {
                 totalTokens?: number | undefined;
             } | undefined;
         }[] | undefined;
+        tokenUsage?: {
+            inputTokens?: number | undefined;
+            outputTokens?: number | undefined;
+            totalTokens?: number | undefined;
+        } | undefined;
     }[];
     isStreaming: boolean;
     sendMessage: (content: string) => Promise<void>;

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

@@ -73,12 +73,16 @@ export function useChatMessages(client) {
             // Listen for streaming chunks
             let accumulatedContent = "";
             for await (const chunk of messageStream) {
+                if (chunk.tokenUsage) {
+                    console.error("DEBUG use-chat-messages: chunk.tokenUsage:", JSON.stringify(chunk.tokenUsage));
+                }
                 if (chunk.isComplete) {
                     // Update final message
                     updateMessage(assistantMessageId, {
                         content: accumulatedContent,
                         isStreaming: false,
                         streamingStartTime: undefined, // Clear streaming start time
+                        ...(chunk.tokenUsage ? { tokenUsage: chunk.tokenUsage } : {}),
                     });
                     setIsStreaming(false);
                     setStreamingStartTime(null); // Clear global streaming start time
@@ -90,6 +94,7 @@ export function useChatMessages(client) {
                         accumulatedContent += chunk.contentDelta.text;
                         updateMessage(assistantMessageId, {
                             content: accumulatedContent,
+                            ...(chunk.tokenUsage ? { tokenUsage: chunk.tokenUsage } : {}),
                         });
                         // Small delay to allow Ink to render between chunks (~60fps)
                         await new Promise((resolve) => setTimeout(resolve, 16));

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

@@ -10,6 +10,7 @@ export function useChatSession(client) {
     const setSessionId = useChatStore((state) => state.setSessionId);
     const setError = useChatStore((state) => state.setError);
     const clearMessages = useChatStore((state) => state.clearMessages);
+    const resetTokens = useChatStore((state) => state.resetTokens);
     /**
      * Connect to the agent
      */
@@ -43,12 +44,13 @@ export function useChatSession(client) {
             const id = await client.startSession();
             setSessionId(id);
             clearMessages();
+            resetTokens();
         }
         catch (error) {
             const message = error instanceof Error ? error.message : String(error);
             setError(message);
         }
-    }, [client, setSessionId, setError, clearMessages]);
+    }, [client, setSessionId, setError, clearMessages, resetTokens]);
     /**
      * Disconnect from the agent
      */

package/dist/core/schemas/chat.d.ts

@@ -72,6 +72,11 @@ export declare const DisplayMessage: z.ZodObject<{
             totalTokens: z.ZodOptional<z.ZodNumber>;
         }, z.core.$strip>>;
     }, z.core.$strip>>>;
+    tokenUsage: z.ZodOptional<z.ZodObject<{
+        inputTokens: z.ZodOptional<z.ZodNumber>;
+        outputTokens: z.ZodOptional<z.ZodNumber>;
+        totalTokens: z.ZodOptional<z.ZodNumber>;
+    }, z.core.$strip>>;
 }, z.core.$strip>;
 export type DisplayMessage = z.infer<typeof DisplayMessage>;
 /**
@@ -162,6 +167,11 @@ export declare const ChatSessionState: z.ZodObject<{
                 totalTokens: z.ZodOptional<z.ZodNumber>;
             }, z.core.$strip>>;
         }, z.core.$strip>>>;
+        tokenUsage: z.ZodOptional<z.ZodObject<{
+            inputTokens: z.ZodOptional<z.ZodNumber>;
+            outputTokens: z.ZodOptional<z.ZodNumber>;
+            totalTokens: z.ZodOptional<z.ZodNumber>;
+        }, z.core.$strip>>;
     }, z.core.$strip>>;
     input: z.ZodObject<{
         value: z.ZodString;

package/dist/core/schemas/chat.js

@@ -1,5 +1,5 @@
 import { z } from "zod";
-import { ToolCallSchema } from "./tool-call.js";
+import { TokenUsageSchema, ToolCallSchema } from "./tool-call.js";
 /**
  * Chat UI state schemas
  */
@@ -15,6 +15,7 @@ export const DisplayMessage = z.object({
     streamingStartTime: z.number().optional(), // Unix timestamp when streaming started
     metadata: z.record(z.string(), z.unknown()).optional(),
     toolCalls: z.array(ToolCallSchema).optional(),
+    tokenUsage: TokenUsageSchema.optional(), // Token usage for this message
 });
 /**
  * Input state schema

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

@@ -11,6 +11,18 @@ export interface ChatStore {
     isStreaming: boolean;
     streamingStartTime: number | null;
     toolCalls: Record<string, ToolCall[]>;
+    totalBilled: {
+        inputTokens: number;
+        outputTokens: number;
+        totalTokens: number;
+    };
+    currentContext: {
+        inputTokens: number;
+        outputTokens: number;
+        totalTokens: number;
+    };
+    currentModel: string | null;
+    tokenDisplayMode: "context" | "input" | "output";
     input: InputState;
     setConnectionStatus: (status: ConnectionStatus) => void;
     setSessionId: (id: string | null) => void;
@@ -29,6 +41,14 @@ export interface ChatStore {
     addFileAttachment: (file: InputState["attachedFiles"][number]) => void;
     removeFileAttachment: (index: number) => void;
     clearInput: () => void;
+    addTokenUsage: (tokenUsage: {
+        inputTokens?: number;
+        outputTokens?: number;
+        totalTokens?: number;
+    }) => void;
+    setCurrentModel: (model: string) => void;
+    resetTokens: () => void;
+    cycleTokenDisplayMode: () => void;
 }
 /**
  * Create chat store

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

@@ -12,6 +12,18 @@ export const useChatStore = create((set) => ({
     isStreaming: false,
     streamingStartTime: null,
     toolCalls: {},
+    totalBilled: {
+        inputTokens: 0,
+        outputTokens: 0,
+        totalTokens: 0,
+    },
+    currentContext: {
+        inputTokens: 0,
+        outputTokens: 0,
+        totalTokens: 0,
+    },
+    currentModel: "claude-sonnet-4-5-20250929", // Default model, TODO: get from server
+    tokenDisplayMode: "context", // Default to showing context (both billed and current)
     input: {
         value: "",
         isSubmitting: false,
@@ -24,9 +36,103 @@ export const useChatStore = create((set) => ({
     addMessage: (message) => set((state) => ({
         messages: [...state.messages, message],
     })),
-    updateMessage: (id, updates) => set((state) => ({
-        messages: state.messages.map((msg) => msg.id === id ? { ...msg, ...updates } : msg),
-    })),
+    updateMessage: (id, updates) => set((state) => {
+        const existingMessage = state.messages.find((msg) => msg.id === id);
+        // If token usage was updated, we need to handle it carefully:
+        // 1. LangChain sends multiple updates for the SAME message (take max for that message)
+        // 2. We track TWO metrics: totalBilled (sum all) and currentContext (latest input + sum outputs)
+        let newTotalBilled = state.totalBilled;
+        let newCurrentContext = state.currentContext;
+        let finalUpdates = updates;
+        if (updates.tokenUsage) {
+            const existingTokenUsage = existingMessage?.tokenUsage;
+            console.error("DEBUG updateMessage: incoming tokenUsage:", JSON.stringify(updates.tokenUsage), "existing:", JSON.stringify(existingTokenUsage));
+            // LangChain sends multiple token updates:
+            // 1. Early chunk: inputTokens (context) + outputTokens (estimate) + totalTokens
+            // 2. Later chunk: inputTokens=0 + outputTokens (final) + totalTokens (just output)
+            // Strategy: Take max for input (keeps context), max for output (gets final count)
+            const messageMaxTokens = {
+                inputTokens: Math.max(updates.tokenUsage.inputTokens ?? 0, existingTokenUsage?.inputTokens ?? 0),
+                outputTokens: Math.max(updates.tokenUsage.outputTokens ?? 0, existingTokenUsage?.outputTokens ?? 0),
+                // Total should be input + output (not max, since chunks are partial)
+                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));
+            // Replace the tokenUsage in updates with the max values
+            finalUpdates = {
+                ...updates,
+                tokenUsage: messageMaxTokens,
+            };
+            // Calculate the delta from what was previously counted for this message
+            const inputDelta = messageMaxTokens.inputTokens - (existingTokenUsage?.inputTokens ?? 0);
+            const outputDelta = messageMaxTokens.outputTokens -
+                (existingTokenUsage?.outputTokens ?? 0);
+            const totalDelta = messageMaxTokens.totalTokens - (existingTokenUsage?.totalTokens ?? 0);
+            // Update Total Billed (sum ALL tokens from every API call)
+            newTotalBilled = {
+                inputTokens: state.totalBilled.inputTokens + inputDelta,
+                outputTokens: state.totalBilled.outputTokens + outputDelta,
+                totalTokens: state.totalBilled.totalTokens + totalDelta,
+            };
+            // Update Current Context (latest input + sum of outputs)
+            // Note: We use the latest totalTokens from LangChain rather than calculating,
+            // because inputTokens + outputTokens doesn't always equal totalTokens
+            newCurrentContext = {
+                inputTokens: messageMaxTokens.inputTokens, // Latest context size
+                outputTokens: state.currentContext.outputTokens + outputDelta, // Sum all outputs
+                totalTokens: messageMaxTokens.totalTokens, // Use LangChain's reported total
+            };
+        }
+        // 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) {
+            const existingTokenUsage = existingMessage?.tokenUsage;
+            const messageMaxTokens = finalUpdates.tokenUsage;
+            const inputDelta = (messageMaxTokens.inputTokens ?? 0) -
+                (existingTokenUsage?.inputTokens ?? 0);
+            const outputDelta = (messageMaxTokens.outputTokens ?? 0) -
+                (existingTokenUsage?.outputTokens ?? 0);
+            const totalDelta = (messageMaxTokens.totalTokens ?? 0) -
+                (existingTokenUsage?.totalTokens ?? 0);
+            // Calculate actual sum from updated messages
+            const messageTokenBreakdown = messages
+                .filter((msg) => msg.tokenUsage)
+                .map((msg) => ({
+                id: msg.id,
+                role: msg.role,
+                tokens: msg.tokenUsage,
+            }));
+            const actualSum = messages.reduce((sum, msg) => ({
+                inputTokens: sum.inputTokens + (msg.tokenUsage?.inputTokens ?? 0),
+                outputTokens: sum.outputTokens + (msg.tokenUsage?.outputTokens ?? 0),
+                totalTokens: sum.totalTokens + (msg.tokenUsage?.totalTokens ?? 0),
+            }), { inputTokens: 0, outputTokens: 0, totalTokens: 0 });
+            const isBilledCorrect = actualSum.inputTokens === newTotalBilled.inputTokens &&
+                actualSum.outputTokens === newTotalBilled.outputTokens &&
+                actualSum.totalTokens === newTotalBilled.totalTokens;
+            console.error("DEBUG updateMessage: tokenUsage update", JSON.stringify({
+                messageId: id,
+                updates: updates.tokenUsage,
+                existing: existingTokenUsage,
+                messageMax: messageMaxTokens,
+                delta: { inputDelta, outputDelta, totalDelta },
+                totalBilled: newTotalBilled,
+                currentContext: newCurrentContext,
+                actualSum,
+                billedCorrect: isBilledCorrect ? "✅" : "❌",
+                messageCount: messages.length,
+                messagesWithTokens: messageTokenBreakdown.length,
+                breakdown: messageTokenBreakdown,
+            }));
+        }
+        return {
+            messages,
+            totalBilled: newTotalBilled,
+            currentContext: newCurrentContext,
+        };
+    }),
     clearMessages: () => set({ messages: [] }),
     setIsStreaming: (streaming) => set({ isStreaming: streaming }),
     setStreamingStartTime: (time) => set({ streamingStartTime: time }),
@@ -126,4 +232,43 @@ export const useChatStore = create((set) => ({
             attachedFiles: [],
         },
     })),
+    addTokenUsage: (tokenUsage) => set((state) => ({
+        totalBilled: {
+            inputTokens: state.totalBilled.inputTokens + (tokenUsage.inputTokens ?? 0),
+            outputTokens: state.totalBilled.outputTokens + (tokenUsage.outputTokens ?? 0),
+            totalTokens: state.totalBilled.totalTokens + (tokenUsage.totalTokens ?? 0),
+        },
+        currentContext: {
+            inputTokens: tokenUsage.inputTokens ?? state.currentContext.inputTokens,
+            outputTokens: state.currentContext.outputTokens + (tokenUsage.outputTokens ?? 0),
+            totalTokens: (tokenUsage.inputTokens ?? state.currentContext.inputTokens) +
+                (state.currentContext.outputTokens + (tokenUsage.outputTokens ?? 0)),
+        },
+    })),
+    setCurrentModel: (model) => set({ currentModel: model }),
+    resetTokens: () => set({
+        totalBilled: {
+            inputTokens: 0,
+            outputTokens: 0,
+            totalTokens: 0,
+        },
+        currentContext: {
+            inputTokens: 0,
+            outputTokens: 0,
+            totalTokens: 0,
+        },
+    }),
+    cycleTokenDisplayMode: () => set((state) => {
+        const modes = [
+            "context",
+            "input",
+            "output",
+        ];
+        const currentIndex = modes.indexOf(state.tokenDisplayMode);
+        const nextIndex = (currentIndex + 1) % modes.length;
+        const nextMode = modes[nextIndex];
+        if (!nextMode)
+            return state; // Should never happen, but satisfies TypeScript
+        return { tokenDisplayMode: nextMode };
+    }),
 }));

package/dist/core/utils/model-context.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Model context window sizes in tokens
+ */
+export declare const MODEL_CONTEXT_WINDOWS: Record<string, number>;
+/**
+ * Get the context window size for a given model
+ * @param model - The model name/ID
+ * @returns The context window size in tokens
+ */
+export declare function getModelContextWindow(model: string | undefined): number;
+/**
+ * Calculate token usage percentage
+ * @param tokens - Number of tokens used
+ * @param model - The model name/ID
+ * @returns Percentage of context window used (0-100)
+ */
+export declare function calculateTokenPercentage(tokens: number, model: string | undefined): number;
+/**
+ * Format token usage as percentage string
+ * @param tokens - Number of tokens used
+ * @param model - The model name/ID
+ * @param decimals - Number of decimal places (default: 1)
+ * @returns Formatted percentage string (e.g., "12.5%")
+ */
+export declare function formatTokenPercentage(tokens: number, model: string | undefined, decimals?: number): string;

package/dist/core/utils/model-context.js

@@ -0,0 +1,82 @@
+/**
+ * Default context window size for unknown models
+ */
+const DEFAULT_CONTEXT_WINDOW = 128_000;
+/**
+ * Model context window sizes in tokens
+ */
+export const MODEL_CONTEXT_WINDOWS = {
+    // Claude models
+    "claude-sonnet-4-5-20250929": 200_000,
+    "claude-sonnet-4-20250514": 200_000,
+    "claude-3-5-sonnet-20241022": 200_000,
+    "claude-3-5-sonnet-20240620": 200_000,
+    "claude-3-opus-20240229": 200_000,
+    "claude-3-sonnet-20240229": 200_000,
+    "claude-3-haiku-20240307": 200_000,
+    // OpenAI GPT-4 models
+    "gpt-4-turbo": 128_000,
+    "gpt-4-turbo-preview": 128_000,
+    "gpt-4-0125-preview": 128_000,
+    "gpt-4-1106-preview": 128_000,
+    "gpt-4": 8_192,
+    "gpt-4-32k": 32_768,
+    // OpenAI GPT-3.5 models
+    "gpt-3.5-turbo": 16_385,
+    "gpt-3.5-turbo-16k": 16_385,
+    // Default fallback
+    default: DEFAULT_CONTEXT_WINDOW,
+};
+/**
+ * Get the context window size for a given model
+ * @param model - The model name/ID
+ * @returns The context window size in tokens
+ */
+export function getModelContextWindow(model) {
+    if (!model) {
+        return DEFAULT_CONTEXT_WINDOW;
+    }
+    // Direct match
+    if (model in MODEL_CONTEXT_WINDOWS) {
+        return MODEL_CONTEXT_WINDOWS[model] ?? DEFAULT_CONTEXT_WINDOW;
+    }
+    // Partial match for model families
+    const normalizedModel = model.toLowerCase();
+    if (normalizedModel.includes("claude")) {
+        return 200_000;
+    }
+    if (normalizedModel.includes("gpt-4-turbo")) {
+        return 128_000;
+    }
+    if (normalizedModel.includes("gpt-4-32k")) {
+        return 32_768;
+    }
+    if (normalizedModel.includes("gpt-4")) {
+        return 8_192;
+    }
+    if (normalizedModel.includes("gpt-3.5")) {
+        return 16_385;
+    }
+    return DEFAULT_CONTEXT_WINDOW;
+}
+/**
+ * Calculate token usage percentage
+ * @param tokens - Number of tokens used
+ * @param model - The model name/ID
+ * @returns Percentage of context window used (0-100)
+ */
+export function calculateTokenPercentage(tokens, model) {
+    const contextWindow = getModelContextWindow(model);
+    return (tokens / contextWindow) * 100;
+}
+/**
+ * Format token usage as percentage string
+ * @param tokens - Number of tokens used
+ * @param model - The model name/ID
+ * @param decimals - Number of decimal places (default: 1)
+ * @returns Formatted percentage string (e.g., "12.5%")
+ */
+export function formatTokenPercentage(tokens, model, decimals = 1) {
+    const percentage = calculateTokenPercentage(tokens, model);
+    return `${percentage.toFixed(decimals)}%`;
+}

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" | "link" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
+    variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | 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/MessageContent.js

@@ -3,6 +3,7 @@ import { cva } from "class-variance-authority";
 import { Loader2Icon } from "lucide-react";
 import * as React from "react";
 import { useChatStore } from "../../core/store/chat-store.js";
+import { formatTokenPercentage } from "../../core/utils/model-context.js";
 import { cn } from "../lib/utils.js";
 import { Reasoning } from "./Reasoning.js";
 import { Response } from "./Response.js";
@@ -82,8 +83,9 @@ const messageContentVariants = cva("w-full px-4 py-3 rounded-xl text-[var(--font
     },
 });
 export const MessageContent = React.forwardRef(({ role: roleProp, variant, isStreaming: isStreamingProp, message, thinkingDisplayStyle = "collapsible", className, children, ...props }, ref) => {
-    // Get streaming start time from store (when using smart rendering)
+    // Get streaming start time and current model from store
     const streamingStartTime = useChatStore((state) => state.streamingStartTime);
+    const currentModel = useChatStore((state) => state.currentModel);
     // Use smart rendering if message is provided and no custom children
     const useSmartRendering = message && !children;
     // Derive props from message if using smart rendering
@@ -100,7 +102,7 @@ export const MessageContent = React.forwardRef(({ role: roleProp, variant, isStr
         const isWaiting = message.isStreaming && !message.content && message.role === "assistant";
         content = (_jsxs(_Fragment, { children: [message.role === "assistant" && hasThinking && (_jsx(Reasoning, { content: thinking, isStreaming: message.isStreaming, mode: thinkingDisplayStyle, autoCollapse: true })), isWaiting && streamingStartTime && (_jsxs("div", { className: "flex items-center gap-2 opacity-50", children: [_jsx(Loader2Icon, { className: "size-4 animate-spin text-muted-foreground" }), _jsx(WaitingElapsedTime, { startTime: streamingStartTime })] })), message.role === "assistant" &&
                     message.toolCalls &&
-                    message.toolCalls.length > 0 && (_jsx("div", { className: "flex flex-col gap-2 mb-3", children: message.toolCalls.map((toolCall) => (_jsx(ToolCall, { toolCall: toolCall }, toolCall.id))) })), message.role === "user" ? (_jsx("div", { className: "whitespace-pre-wrap", children: message.content })) : (_jsx(Response, { content: message.content, isStreaming: message.isStreaming, showEmpty: false }))] }));
+                    message.toolCalls.length > 0 && (_jsx("div", { className: "flex flex-col gap-2 mb-3", children: message.toolCalls.map((toolCall) => (_jsx(ToolCall, { toolCall: toolCall }, toolCall.id))) })), message.role === "user" ? (_jsx("div", { className: "whitespace-pre-wrap", children: message.content })) : (_jsx(Response, { content: message.content, isStreaming: message.isStreaming, showEmpty: false })), message.role === "assistant" && message.tokenUsage && (_jsx("div", { className: "mt-3 pt-2 border-t border-border/30 text-xs text-muted-foreground/60", children: _jsxs("span", { children: ["Context:", " ", formatTokenPercentage(message.tokenUsage.totalTokens ?? 0, currentModel ?? undefined), " ", "(", (message.tokenUsage.totalTokens ?? 0).toLocaleString(), " ", "tokens)"] }) }))] }));
     }
     return (_jsx("div", { ref: ref, className: cn(messageContentVariants({ role, variant }), isStreaming && "animate-pulse-subtle", className), ...props, children: content }));
 });

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

@@ -191,5 +191,10 @@ export declare const MessageChunk: z.ZodObject<{
         error: z.ZodOptional<z.ZodString>;
     }, z.core.$strip>], "type">;
     isComplete: z.ZodBoolean;
+    tokenUsage: z.ZodOptional<z.ZodObject<{
+        inputTokens: z.ZodOptional<z.ZodNumber>;
+        outputTokens: z.ZodOptional<z.ZodNumber>;
+        totalTokens: z.ZodOptional<z.ZodNumber>;
+    }, z.core.$strip>>;
 }, z.core.$strip>;
 export type MessageChunk = z.infer<typeof MessageChunk>;

package/dist/sdk/schemas/message.js

@@ -92,4 +92,11 @@ export const MessageChunk = z.object({
     role: MessageRole,
     contentDelta: Content,
     isComplete: z.boolean(),
+    tokenUsage: z
+        .object({
+        inputTokens: z.number().optional(),
+        outputTokens: z.number().optional(),
+        totalTokens: z.number().optional(),
+    })
+        .optional(),
 });

package/dist/sdk/transports/http.js

@@ -1,4 +1,6 @@
 import * as acp from "@agentclientprotocol/sdk";
+import { createLogger } from "../../core/lib/logger.js";
+const logger = createLogger("http-transport");
 /**
  * HTTP transport implementation using ACP over HTTP + SSE
  * Uses POST /rpc for client->agent messages and GET /events (SSE) for agent->client
@@ -39,7 +41,7 @@ export class HttpTransport {
                 },
             };
             const initResponse = await this.sendRpcRequest("initialize", initRequest);
-            console.log("ACP connection initialized:", initResponse);
+            logger.info("ACP connection initialized", { initResponse });
             // Step 2: Create a new session
             const sessionRequest = {
                 cwd: "/",
@@ -47,7 +49,7 @@ export class HttpTransport {
             };
             const sessionResponse = await this.sendRpcRequest("session/new", sessionRequest);
             this.currentSessionId = sessionResponse.sessionId;
-            console.log("Session created:", this.currentSessionId);
+            logger.info("Session created", { sessionId: this.currentSessionId });
             // Step 3: Open SSE connection for receiving messages
             await this.connectSSE();
             this.connected = true;
@@ -115,7 +117,7 @@ export class HttpTransport {
             };
             // Send the prompt - this will trigger streaming responses via SSE
             const promptResponse = await this.sendRpcRequest("session/prompt", promptRequest);
-            console.log("Prompt sent:", promptResponse);
+            logger.debug("Prompt sent", { promptResponse });
             // Mark stream as complete after prompt finishes
             this.streamComplete = true;
             // Send completion chunk
@@ -274,7 +276,7 @@ export class HttpTransport {
             if (!response.body) {
                 throw new Error("Response body is null");
             }
-            console.log("SSE connection opened");
+            logger.debug("SSE connection opened");
             this.reconnectAttempts = 0;
             this.reconnectDelay = 1000;
             // Read the SSE stream
@@ -287,7 +289,7 @@ export class HttpTransport {
                     while (true) {
                         const { done, value } = await reader.read();
                         if (done) {
-                            console.log("SSE stream closed by server");
+                            logger.debug("SSE stream closed by server");
                             if (this.connected) {
                                 await this.handleSSEDisconnect();
                             }
@@ -319,10 +321,10 @@ export class HttpTransport {
                 }
                 catch (error) {
                     if (error instanceof Error && error.name === "AbortError") {
-                        console.log("SSE stream aborted");
+                        logger.debug("SSE stream aborted");
                         return;
                     }
-                    console.error("Error reading SSE stream:", error);
+                    logger.error("Error reading SSE stream", { error });
                     if (this.connected && !this.reconnecting) {
                         await this.handleSSEDisconnect();
                     }
@@ -330,7 +332,7 @@ export class HttpTransport {
             })();
         }
         catch (error) {
-            console.error("SSE connection error:", error);
+            logger.error("SSE connection error", { error });
             throw error;
         }
     }
@@ -356,15 +358,19 @@ export class HttpTransport {
         }
         this.reconnectAttempts++;
         const delay = Math.min(this.reconnectDelay * 2 ** (this.reconnectAttempts - 1), 32000);
-        console.log(`SSE reconnecting in ${delay}ms (attempt ${this.reconnectAttempts}/${this.maxReconnectAttempts})`);
+        logger.debug("SSE reconnecting", {
+            delay,
+            attempt: this.reconnectAttempts,
+            maxAttempts: this.maxReconnectAttempts,
+        });
         await new Promise((resolve) => setTimeout(resolve, delay));
         try {
             await this.connectSSE();
-            console.log("SSE reconnected successfully");
+            logger.info("SSE reconnected successfully");
             this.reconnecting = false;
         }
         catch (error) {
-            console.error("SSE reconnection failed:", error);
+            logger.error("SSE reconnection failed", { error });
             this.reconnecting = false;
             // Will try again on next error event
         }
@@ -375,27 +381,33 @@ export class HttpTransport {
     handleSSEMessage(data) {
         try {
             const message = JSON.parse(data);
-            console.log("[HTTP Transport] Received SSE message:", message);
+            logger.debug("Received SSE message", { message });
             // Validate the message is an ACP agent outgoing message
             const parseResult = acp.agentOutgoingMessageSchema.safeParse(message);
             if (!parseResult.success) {
-                console.error("Invalid ACP message from SSE:", parseResult.error.issues);
+                logger.error("Invalid ACP message from SSE", {
+                    issues: parseResult.error.issues,
+                });
                 return;
             }
             const acpMessage = parseResult.data;
-            console.log("[HTTP Transport] Parsed ACP message, method:", "method" in acpMessage ? acpMessage.method : "(no method)");
+            logger.debug("Parsed ACP message", {
+                method: "method" in acpMessage ? acpMessage.method : "(no method)",
+            });
             // Check if this is a notification (has method but not a response)
             if ("method" in acpMessage && acpMessage.method === "session/update") {
-                console.log("[HTTP Transport] This is a session/update notification");
+                logger.debug("Received session/update notification");
                 // Type narrowing: we know it has method and params
                 if ("params" in acpMessage && acpMessage.params) {
-                    console.log("[HTTP Transport] Calling handleSessionNotification with params:", acpMessage.params);
+                    logger.debug("Calling handleSessionNotification", {
+                        params: acpMessage.params,
+                    });
                     this.handleSessionNotification(acpMessage.params);
                 }
             }
         }
         catch (error) {
-            console.error("Error parsing SSE message:", error);
+            logger.error("Error parsing SSE message", { error });
             this.notifyError(error instanceof Error ? error : new Error(String(error)));
         }
     }
@@ -403,15 +415,19 @@ export class HttpTransport {
      * Handle a session notification from the agent
      */
     handleSessionNotification(params) {
-        console.log("[HTTP Transport] handleSessionNotification called with:", params);
+        logger.debug("handleSessionNotification called", { params });
         // Extract content from the update
         const paramsExtended = params;
         const update = paramsExtended.update;
         const sessionId = this.currentSessionId || params.sessionId;
-        console.log("[HTTP Transport] update.sessionUpdate type:", update?.sessionUpdate);
+        logger.debug("Update session type", {
+            sessionUpdate: update?.sessionUpdate,
+        });
         // Handle ACP tool call notifications
         if (update?.sessionUpdate === "tool_call") {
-            console.log("[HTTP Transport] tool_call - tokenUsage:", update.tokenUsage);
+            logger.debug("Tool call notification", {
+                tokenUsage: update.tokenUsage,
+            });
             // Extract messageId from _meta
             const messageId = update._meta &&
                 typeof update._meta === "object" &&
@@ -556,7 +572,9 @@ export class HttpTransport {
                 toolCallUpdate: toolCallUpdate,
                 messageId,
             };
-            console.log("[HTTP Transport] Notifying tool_call_update session update:", sessionUpdate);
+            logger.debug("Notifying tool_call_update session update", {
+                sessionUpdate,
+            });
             this.notifySessionUpdate(sessionUpdate);
         }
         else if (update &&
@@ -629,7 +647,9 @@ export class HttpTransport {
                 toolCallUpdate: toolOutput,
                 messageId,
             };
-            console.log("[HTTP Transport] Notifying tool_output as tool_call_update:", sessionUpdate);
+            logger.debug("Notifying tool_output as tool_call_update", {
+                sessionUpdate,
+            });
             this.notifySessionUpdate(sessionUpdate);
         }
         else if (update?.sessionUpdate === "agent_message_chunk") {
@@ -639,6 +659,15 @@ export class HttpTransport {
                 sessionId,
                 status: "active",
             };
+            // Extract token usage from _meta if present
+            const tokenUsage = update._meta &&
+                typeof update._meta === "object" &&
+                "tokenUsage" in update._meta
+                ? update._meta.tokenUsage
+                : undefined;
+            logger.debug("Agent message chunk", {
+                tokenUsage,
+            });
             // Queue message chunks if present
             // For agent_message_chunk, content is an object, not an array
             const content = update.content;
@@ -650,6 +679,7 @@ export class HttpTransport {
                         id: params.sessionId,
                         role: "assistant",
                         contentDelta: { type: "text", text: contentObj.text },
+                        tokenUsage,
                         isComplete: false,
                     };
                 }
@@ -692,7 +722,7 @@ export class HttpTransport {
                 callback(update);
             }
             catch (error) {
-                console.error("Error in session update callback:", error);
+                logger.error("Error in session update callback", { error });
             }
         }
     }
@@ -705,7 +735,7 @@ export class HttpTransport {
                 callback(error);
             }
             catch (err) {
-                console.error("Error in error callback:", err);
+                logger.error("Error in error callback", { error: err });
             }
         }
     }

package/dist/sdk/transports/stdio.js

@@ -1,6 +1,8 @@
 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";
+const logger = createLogger("stdio-transport");
 /**
  * Stdio transport implementation using Agent Client Protocol SDK
  * Uses JSON-RPC 2.0 over stdio to communicate with agents
@@ -47,7 +49,7 @@ export class StdioTransport {
                     async requestPermission(params) {
                         // For now, auto-approve all permissions
                         // In a real implementation, this should prompt the user
-                        console.log(`Permission requested:`, params);
+                        logger.debug("Permission requested", { params });
                         // @ts-expect-error - Type mismatch with ACP SDK v0.5.1
                         return { outcome: "approved" };
                     },
@@ -209,6 +211,20 @@ export class StdioTransport {
                                 sessionId,
                                 status: "active",
                             };
+                            logger.debug("Processing agent_message_chunk", { update });
+                            // Extract token usage from _meta if available
+                            const tokenUsage = "_meta" in update &&
+                                update._meta &&
+                                typeof update._meta === "object" &&
+                                "tokenUsage" in update._meta
+                                ? update._meta.tokenUsage
+                                : undefined;
+                            if (tokenUsage) {
+                                logger.debug("Extracted tokenUsage from _meta", { tokenUsage });
+                            }
+                            else {
+                                logger.debug("No tokenUsage in _meta");
+                            }
                             // Queue message chunks if present
                             // For agent_message_chunk, content is an object, not an array
                             const content = update.content;
@@ -222,6 +238,7 @@ export class StdioTransport {
                                         role: "assistant",
                                         contentDelta: { type: "text", text: contentObj.text },
                                         isComplete: false,
+                                        ...(tokenUsage ? { tokenUsage } : {}),
                                     };
                                 }
                                 if (chunk) {
@@ -264,7 +281,7 @@ export class StdioTransport {
             this.connection = new ClientSideConnection(clientFactory, stream);
             // Handle stderr for debugging
             this.agentProcess.stderr.on("data", (data) => {
-                console.error(`Agent stderr: ${data}`);
+                logger.debug("Agent stderr output", { output: data.toString() });
             });
             // Handle process exit
             this.agentProcess.on("exit", (code, signal) => {
@@ -286,7 +303,7 @@ export class StdioTransport {
                     },
                 },
             });
-            console.log("ACP connection initialized:", initResponse);
+            logger.info("ACP connection initialized", { initResponse });
             this.connected = true;
         }
         catch (error) {
@@ -351,7 +368,7 @@ export class StdioTransport {
                     },
                 ],
             });
-            console.log("Prompt response:", promptResponse);
+            logger.debug("Prompt response received", { promptResponse });
             // Mark stream as complete after prompt finishes
             this.streamComplete = true;
             // Resolve any waiting receive() calls with completion
@@ -432,7 +449,7 @@ export class StdioTransport {
                 callback(update);
             }
             catch (error) {
-                console.error("Error in session update callback:", error);
+                logger.error("Error in session update callback", { error });
             }
         }
     }
@@ -442,7 +459,7 @@ export class StdioTransport {
                 callback(error);
             }
             catch (err) {
-                console.error("Error in error callback:", err);
+                logger.error("Error in error callback", { error: err });
             }
         }
     }

package/dist/tui/components/ChatView.js

@@ -7,6 +7,10 @@ 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);
     // Use headless hooks for business logic
     const { connectionStatus, sessionId } = useChatSession(client);
     const { messages, isStreaming } = useChatMessages(client);
@@ -21,5 +25,5 @@ export function ChatView({ client }) {
             setIsStreaming(false);
         }
     };
-    return (_jsxs(Box, { flexDirection: "column", height: "100%", children: [_jsx(Box, { flexGrow: 1, flexDirection: "column", children: _jsx(MessageList, { messages: messages }) }), _jsx(InputBox, { value: value, isSubmitting: isSubmitting, attachedFiles: attachedFiles, onChange: onChange, onSubmit: onSubmit, onEscape: handleEscape }), _jsx(StatusBar, { connectionStatus: connectionStatus, sessionId: sessionId, isStreaming: isStreaming, streamingStartTime: streamingStartTime, hasStreamingContent: hasStreamingContent })] }));
+    return (_jsxs(Box, { flexDirection: "column", height: "100%", children: [_jsx(Box, { flexGrow: 1, flexDirection: "column", children: _jsx(MessageList, { messages: messages }) }), _jsx(InputBox, { value: value, isSubmitting: isSubmitting, attachedFiles: attachedFiles, onChange: onChange, onSubmit: onSubmit, onEscape: handleEscape }), _jsx(StatusBar, { connectionStatus: connectionStatus, sessionId: sessionId, isStreaming: isStreaming, streamingStartTime: streamingStartTime, hasStreamingContent: hasStreamingContent, totalBilled: totalBilled, currentContext: currentContext, currentModel: currentModel, tokenDisplayMode: tokenDisplayMode })] }));
 }

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

@@ -3,6 +3,7 @@ export interface ReadlineInputProps {
     onChange: (value: string) => void;
     onSubmit: () => void;
     onEscape?: () => void;
+    onCtrlT?: () => void;
     placeholder?: string;
 }
-export declare function ReadlineInput({ value, onChange, onSubmit, onEscape, placeholder, }: ReadlineInputProps): import("react/jsx-runtime").JSX.Element;
+export declare function ReadlineInput({ value, onChange, onSubmit, onEscape, onCtrlT, placeholder, }: ReadlineInputProps): import("react/jsx-runtime").JSX.Element;

package/dist/tui/components/ReadlineInput.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Text, useInput } from "ink";
 import React, { useState } from "react";
-export function ReadlineInput({ value, onChange, onSubmit, onEscape, placeholder = "", }) {
+export function ReadlineInput({ value, onChange, onSubmit, onEscape, onCtrlT, placeholder = "", }) {
     const [cursorOffset, setCursorOffset] = useState(0);
     useInput((input, key) => {
         // Handle Esc: Call escape handler
@@ -107,6 +107,13 @@ export function ReadlineInput({ value, onChange, onSubmit, onEscape, placeholder
                 }
                 return;
             }
+            // Ctrl+T: Cycle token display mode
+            if (input === "t") {
+                if (onCtrlT) {
+                    onCtrlT();
+                }
+                return;
+            }
         }
         // Handle backspace
         if (key.backspace || key.delete) {

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

@@ -5,5 +5,17 @@ export interface StatusBarProps {
     isStreaming: boolean;
     streamingStartTime: number | null;
     hasStreamingContent: boolean;
+    totalBilled?: {
+        inputTokens: number;
+        outputTokens: number;
+        totalTokens: number;
+    };
+    currentContext?: {
+        inputTokens: number;
+        outputTokens: number;
+        totalTokens: number;
+    };
+    currentModel?: string | null;
+    tokenDisplayMode: "context" | "input" | "output";
 }
-export declare function StatusBar({ connectionStatus, isStreaming, streamingStartTime, hasStreamingContent, }: StatusBarProps): import("react/jsx-runtime").JSX.Element;
+export declare function StatusBar({ connectionStatus, isStreaming, streamingStartTime, hasStreamingContent, totalBilled: _totalBilled, currentContext, currentModel, tokenDisplayMode: _tokenDisplayMode, }: StatusBarProps): import("react/jsx-runtime").JSX.Element;

package/dist/tui/components/StatusBar.js

@@ -1,6 +1,7 @@
 import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { Box, Text } from "ink";
 import { useEffect, useState } from "react";
+import { calculateTokenPercentage, formatTokenPercentage, } from "../../core/utils/model-context.js";
 // Synonyms of "thinking" in multiple languages
 const THINKING_WORDS = [
     "Thinking", // English
@@ -32,6 +33,32 @@ const DOT_ANIMATIONS = [
     ".·.", // Middle dot up
     "·..", // First dot up
 ];
+/**
+ * Get color based on token usage percentage
+ * Green: 0-50%, Yellow: 50-75%, Red: 75%+
+ */
+function getTokenColor(percentage) {
+    if (percentage < 50) {
+        return "green";
+    }
+    if (percentage < 75) {
+        return "yellow";
+    }
+    return "red";
+}
+/**
+ * Format token count with K/M suffixes
+ * Examples: 1200 -> 1.2K, 1000000 -> 1M, 500 -> 500
+ */
+function formatTokenCount(count) {
+    if (count >= 1_000_000) {
+        return `${(count / 1_000_000).toFixed(1)}M`;
+    }
+    if (count >= 1_000) {
+        return `${(count / 1_000).toFixed(1)}K`;
+    }
+    return count.toString();
+}
 /**
  * Component that displays elapsed time for waiting/streaming
  */
@@ -68,7 +95,7 @@ function WaitingElapsedTime({ startTime }) {
     const animatedDots = DOT_ANIMATIONS[dotIndex];
     return (_jsxs(Text, { color: "red", children: [thinkingWord, animatedDots, " ", seconds, "s"] }));
 }
-export function StatusBar({ connectionStatus, isStreaming, streamingStartTime, hasStreamingContent, }) {
+export function StatusBar({ connectionStatus, isStreaming, streamingStartTime, hasStreamingContent, totalBilled: _totalBilled, currentContext, currentModel, tokenDisplayMode: _tokenDisplayMode, }) {
     const statusColor = connectionStatus === "connected"
         ? "green"
         : connectionStatus === "connecting"
@@ -78,5 +105,15 @@ export function StatusBar({ connectionStatus, isStreaming, streamingStartTime, h
                 : "gray";
     // Only show waiting indicator when streaming but haven't received content yet
     const showWaiting = isStreaming && streamingStartTime && !hasStreamingContent;
-    return (_jsxs(Box, { flexDirection: "row", gap: 2, paddingY: 1, children: [_jsxs(Text, { children: ["Status: ", _jsx(Text, { color: statusColor, children: connectionStatus })] }), showWaiting && (_jsxs(_Fragment, { children: [_jsx(Text, { children: " " }), _jsx(WaitingElapsedTime, { startTime: streamingStartTime })] }))] }));
+    // Render token display: Context percentage, input count, output count
+    const renderTokenDisplay = () => {
+        const inputTokens = currentContext?.inputTokens ?? 0;
+        const outputTokens = currentContext?.outputTokens ?? 0;
+        const contextTokens = currentContext?.totalTokens ?? 0;
+        const contextPercentage = calculateTokenPercentage(contextTokens, currentModel ?? undefined);
+        const contextPercentageStr = formatTokenPercentage(contextTokens, currentModel ?? undefined);
+        const contextColor = getTokenColor(contextPercentage);
+        return (_jsxs(Box, { flexDirection: "row", children: [_jsx(Text, { dimColor: true, children: "Context: " }), _jsx(Text, { color: contextColor, children: contextPercentageStr }), _jsx(Text, { dimColor: true, children: " | Input: " }), _jsx(Text, { children: formatTokenCount(inputTokens) }), _jsx(Text, { dimColor: true, children: " | Output: " }), _jsx(Text, { children: formatTokenCount(outputTokens) })] }));
+    };
+    return (_jsxs(Box, { flexDirection: "row", justifyContent: "space-between", paddingY: 1, children: [_jsxs(Box, { flexDirection: "row", gap: 2, children: [_jsx(Text, { dimColor: true, children: "Status: " }), _jsx(Text, { color: statusColor, children: connectionStatus }), showWaiting && (_jsxs(_Fragment, { children: [_jsx(Text, { children: " " }), _jsx(WaitingElapsedTime, { startTime: streamingStartTime })] }))] }), renderTokenDisplay()] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@townco/ui",
-  "version": "0.1.19",
+  "version": "0.1.20",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -61,7 +61,7 @@
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4.1.17",
-    "@townco/tsconfig": "0.1.16",
+    "@townco/tsconfig": "0.1.17",
     "@types/node": "^24.10.0",
     "@types/react": "^19.2.2",
     "ink": "^6.4.0",