@townco/ui 0.1.36 → 0.1.37

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

@@ -2,7 +2,7 @@ import type { AcpClient } from "../../sdk/client/index.js";
 /**
  * Hook for managing chat input
  */
-export declare function useChatInput(client: AcpClient | null): {
+export declare function useChatInput(client: AcpClient | null, startSession: () => Promise<string | null>): {
     value: string;
     isSubmitting: boolean;
     attachedFiles: {

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

@@ -6,13 +6,13 @@ const logger = createLogger("use-chat-input", "debug");
 /**
  * Hook for managing chat input
  */
-export function useChatInput(client) {
+export function useChatInput(client, startSession) {
     const input = useChatStore((state) => state.input);
     const setInputValue = useChatStore((state) => state.setInputValue);
     const setInputSubmitting = useChatStore((state) => state.setInputSubmitting);
     const addFileAttachment = useChatStore((state) => state.addFileAttachment);
     const removeFileAttachment = useChatStore((state) => state.removeFileAttachment);
-    const { sendMessage } = useChatMessages(client);
+    const { sendMessage } = useChatMessages(client, startSession);
     /**
      * Handle input value change
      */

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

@@ -2,7 +2,7 @@ import type { AcpClient } from "../../sdk/client/index.js";
 /**
  * Hook for managing chat messages
  */
-export declare function useChatMessages(client: AcpClient | null): {
+export declare function useChatMessages(client: AcpClient | null, startSession: () => Promise<string | null>): {
     messages: {
         id: string;
         role: "user" | "assistant" | "system";

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

@@ -5,7 +5,7 @@ const logger = createLogger("use-chat-messages", "debug");
 /**
  * Hook for managing chat messages
  */
-export function useChatMessages(client) {
+export function useChatMessages(client, startSession) {
     const messages = useChatStore((state) => state.messages);
     const isStreaming = useChatStore((state) => state.isStreaming);
     const sessionId = useChatStore((state) => state.sessionId);
@@ -23,10 +23,20 @@ export function useChatMessages(client) {
             setError("No client available");
             return;
         }
-        if (!sessionId) {
-            logger.error("No active session");
-            setError("No active session");
-            return;
+        // Create session lazily if it doesn't exist
+        let activeSessionId = sessionId;
+        if (!activeSessionId) {
+            logger.info("Creating new session before sending first message");
+            const newSessionId = await startSession();
+            if (!newSessionId) {
+                logger.error("Failed to create session");
+                setError("Failed to create session");
+                return;
+            }
+            activeSessionId = newSessionId;
+            logger.info("Session created successfully", {
+                sessionId: newSessionId,
+            });
         }
         try {
             // Start streaming and track time immediately
@@ -57,7 +67,7 @@ export function useChatMessages(client) {
             const messageStream = client.receiveMessages();
             // Send ONLY the new message (not full history)
             // The agent backend now manages conversation context
-            client.sendMessage(content, sessionId).catch((error) => {
+            client.sendMessage(content, activeSessionId).catch((error) => {
                 const message = error instanceof Error ? error.message : String(error);
                 setError(message);
                 setIsStreaming(false);
@@ -106,6 +116,7 @@ export function useChatMessages(client) {
     }, [
         client,
         sessionId,
+        startSession,
         addMessage,
         updateMessage,
         setIsStreaming,

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

@@ -7,6 +7,6 @@ export declare function useChatSession(client: AcpClient | null, initialSessionI
     sessionId: string | null;
     connect: () => Promise<void>;
     loadSession: (sessionIdToLoad: string) => Promise<void>;
-    startSession: () => Promise<void>;
+    startSession: () => Promise<string | null>;
     disconnect: () => Promise<void>;
 };

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

@@ -149,11 +149,12 @@ export function useChatSession(client, initialSessionId) {
     ]);
     /**
      * Start a new session
+     * @returns The new session ID, or null if creation failed
      */
     const startSession = useCallback(async () => {
         if (!client) {
             setError("No client available");
-            return;
+            return null;
         }
         try {
             const id = await client.startSession();
@@ -166,10 +167,12 @@ export function useChatSession(client, initialSessionId) {
                 url.searchParams.set("session", id);
                 window.history.pushState({}, "", url.toString());
             }
+            return id;
         }
         catch (error) {
             const message = error instanceof Error ? error.message : String(error);
             setError(message);
+            return null;
         }
     }, [client, setSessionId, setError, clearMessages, resetTokens]);
     /**
@@ -205,12 +208,6 @@ export function useChatSession(client, initialSessionId) {
             connect();
         }
     }, [client, connectionStatus, initialSessionId, connect, loadSession]);
-    // Auto-start new session after connecting (only if no initial session)
-    useEffect(() => {
-        if (connectionStatus === "connected" && !sessionId && !initialSessionId) {
-            startSession();
-        }
-    }, [connectionStatus, sessionId, initialSessionId, startSession]);
     return {
         connectionStatus,
         sessionId,

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

@@ -0,0 +1,59 @@
+/**
+ * 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

@@ -0,0 +1,191 @@
+/**
+ * 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/gui/components/ChatInput.d.ts

@@ -8,6 +8,10 @@ export interface ChatInputRootProps extends Omit<React.FormHTMLAttributes<HTMLFo
      * Either client or value/onChange/onSubmit must be provided
      */
     client?: AcpClient | null;
+    /**
+     * Start session function (required when using client)
+     */
+    startSession?: () => Promise<string | null>;
     /**
      * Input value (legacy prop-based pattern)
      * Either client or value/onChange/onSubmit must be provided

package/dist/gui/components/ChatInput.js

@@ -15,18 +15,23 @@ const useChatInputContext = () => {
     }
     return context;
 };
-const ChatInputRoot = React.forwardRef(({ client, value: valueProp, onChange: onChangeProp, onSubmit: onSubmitProp, disabled = false, isSubmitting: isSubmittingProp, submitOnEnter = true, className, children, ...props }, ref) => {
+const ChatInputRoot = React.forwardRef(({ client, startSession, value: valueProp, onChange: onChangeProp, onSubmit: onSubmitProp, disabled = false, isSubmitting: isSubmittingProp, submitOnEnter = true, className, children, ...props }, ref) => {
     const textareaRef = React.useRef(null);
+    // Provide a dummy startSession function if not provided (for React hooks rule)
+    const dummyStartSession = React.useCallback(async () => Promise.resolve(null), []);
     // Always call hooks unconditionally (React rules)
-    const hookData = useCoreChatInput(client ?? null);
+    const hookData = useCoreChatInput(client ?? null, startSession ?? dummyStartSession);
     const storeIsStreaming = useChatStore((state) => state.isStreaming);
     // Choose data source based on whether client is provided
-    const value = hookData ? hookData.value : valueProp || "";
-    const onChange = hookData ? hookData.onChange : onChangeProp || (() => { });
-    const onSubmit = hookData
+    const useHookData = client && startSession;
+    const value = useHookData ? hookData.value : valueProp || "";
+    const onChange = useHookData
+        ? hookData.onChange
+        : onChangeProp || (() => { });
+    const onSubmit = useHookData
         ? hookData.onSubmit
         : onSubmitProp || (async () => { });
-    const isSubmitting = hookData
+    const isSubmitting = useHookData
         ? hookData.isSubmitting || storeIsStreaming
         : isSubmittingProp || false;
     // Command menu state

package/dist/gui/components/ChatView.js

@@ -4,6 +4,7 @@ import { ArrowUp, ChevronUp, Code, PanelRight, Settings, Sparkles, } from "lucid
 import { useEffect, useState } from "react";
 import { useChatMessages, useChatSession, useToolCalls, } from "../../core/hooks/index.js";
 import { useChatStore } from "../../core/store/chat-store.js";
+import { formatTokenPercentage } from "../../core/utils/model-context.js";
 import { cn } from "../lib/utils.js";
 import { ChatEmptyState, ChatHeader, ChatInputActions, ChatInputAttachment, ChatInputCommandMenu, ChatInputField, ChatInputRoot, ChatInputSubmit, ChatInputToolbar, ChatInputVoiceInput, ChatLayout, FilesTabContent, Message, MessageContent, PanelTabsHeader, SourcesTabContent, Tabs, TabsContent, TodoTabContent, } from "./index.js";
 const logger = createLogger("gui");
@@ -21,10 +22,11 @@ function AppChatHeader({ agentName, todos, sources, showHeader, }) {
 }
 export function ChatView({ client, initialSessionId, error: initError, }) {
     // Use shared hooks from @townco/ui/core - MUST be called before any early returns
-    const { connectionStatus, connect, sessionId } = useChatSession(client, initialSessionId);
-    const { messages, sendMessage } = useChatMessages(client);
+    const { connectionStatus, connect, sessionId, startSession } = useChatSession(client, initialSessionId);
+    const { messages, sendMessage } = useChatMessages(client, startSession);
     useToolCalls(client); // Still need to subscribe to tool call events
     const error = useChatStore((state) => state.error);
+    const currentModel = useChatStore((state) => state.currentModel);
     const [agentName, setAgentName] = useState("Agent");
     const [isLargeScreen, setIsLargeScreen] = useState(typeof window !== "undefined" ? window.innerWidth >= 1024 : true);
     // Log connection status changes
@@ -98,6 +100,11 @@ 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;
     // Command menu items for chat input
     const commandMenuItems = [
         {
@@ -168,5 +175,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, children: [_jsx(ChatInputCommandMenu, { commands: commandMenuItems }), _jsx(ChatInputField, { placeholder: "Type a message or / for commands...", autoFocus: true }), _jsxs(ChatInputToolbar, { children: [_jsxs("div", { className: "flex items-center gap-1", children: [_jsx(ChatInputActions, {}), _jsx(ChatInputAttachment, {})] }), _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: _jsxs(Tabs, { defaultValue: "todo", className: "flex flex-col h-full", children: [_jsx("div", { className: cn("border-b border-border bg-card", "px-6 py-2 h-16", "flex items-center", "[border-bottom-width:0.5px]"), children: _jsx(PanelTabsHeader, { showIcons: true, visibleTabs: ["todo", "files", "sources"], variant: "compact" }) }), _jsx(TabsContent, { value: "todo", className: "flex-1 p-4 mt-0", children: _jsx(TodoTabContent, { todos: todos }) }), _jsx(TabsContent, { value: "files", className: "flex-1 p-4 mt-0", children: _jsx(FilesTabContent, {}) }), _jsx(TabsContent, { value: "sources", className: "flex-1 p-4 mt-0", children: _jsx(SourcesTabContent, { sources: sources }) })] }) }))] }));
+                                    }) })) }), _jsx(ChatLayout.Footer, { children: _jsxs(ChatInputRoot, { client: client, startSession: startSession, children: [_jsx(ChatInputCommandMenu, { commands: commandMenuItems }), _jsx(ChatInputField, { placeholder: "Type a message or / for commands...", autoFocus: true }), _jsxs(ChatInputToolbar, { children: [_jsxs("div", { className: "flex items-baseline gap-1", children: [_jsx(ChatInputActions, {}), _jsx(ChatInputAttachment, {}), latestTokenUsage && (_jsxs("span", { className: "text-xs text-muted-foreground/50 ml-2", children: ["Context:", " ", formatTokenPercentage(latestTokenUsage.totalTokens ?? 0, currentModel ?? undefined), " ", "(", (latestTokenUsage.totalTokens ?? 0).toLocaleString(), " ", "tokens)"] }))] }), _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: _jsxs(Tabs, { defaultValue: "todo", className: "flex flex-col h-full", children: [_jsx("div", { className: cn("border-b border-border bg-card", "px-6 py-2 h-16", "flex items-center", "[border-bottom-width:0.5px]"), children: _jsx(PanelTabsHeader, { showIcons: true, visibleTabs: ["todo", "files", "sources"], variant: "compact" }) }), _jsx(TabsContent, { value: "todo", className: "flex-1 p-4 mt-0", children: _jsx(TodoTabContent, { todos: todos }) }), _jsx(TabsContent, { value: "files", className: "flex-1 p-4 mt-0", children: _jsx(FilesTabContent, {}) }), _jsx(TabsContent, { value: "sources", className: "flex-1 p-4 mt-0", children: _jsx(SourcesTabContent, { sources: sources }) })] }) }))] }));
 }

package/dist/gui/components/MessageContent.js

@@ -135,7 +135,7 @@ export const MessageContent = React.forwardRef(({ role: roleProp, variant, isStr
                         }
                     }
                     return _jsx(_Fragment, { children: elements });
-                })()) : (_jsx("div", { className: "whitespace-pre-wrap", children: message.content })), message.role === "assistant" && message.tokenUsage && (_jsx("div", { className: "mt-3 pt-2 border-t border-border/30 text-caption text-muted-foreground/60", children: _jsxs("span", { children: ["Context:", " ", formatTokenPercentage(message.tokenUsage.totalTokens ?? 0, currentModel ?? undefined), " ", "(", (message.tokenUsage.totalTokens ?? 0).toLocaleString(), " ", "tokens)"] }) }))] }));
+                })()) : (_jsx("div", { className: "whitespace-pre-wrap", children: message.content }))] }));
     }
     return (_jsx("div", { ref: ref, className: cn(messageContentVariants({ role, variant }), isStreaming && "animate-pulse-subtle", className), ...props, children: content }));
 });

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

@@ -20,6 +20,7 @@ export declare class HttpTransport implements Transport {
     private abortController;
     private options;
     private isReceivingMessages;
+    private isInReplayMode;
     constructor(options: HttpTransportOptions);
     connect(): Promise<void>;
     /**

package/dist/sdk/transports/http.js

@@ -21,6 +21,7 @@ export class HttpTransport {
     abortController = null;
     options;
     isReceivingMessages = false;
+    isInReplayMode = false; // True during session replay, ignores non-replay streaming
     constructor(options) {
         // Ensure baseUrl doesn't end with a slash
         this.options = { ...options, baseUrl: options.baseUrl.replace(/\/$/, "") };
@@ -100,6 +101,8 @@ export class HttpTransport {
                 capabilities: initResponse.agentCapabilities,
             });
             // Step 2: Open SSE connection FIRST so we can receive replayed messages
+            // Enter replay mode - ignore non-replay streaming until user sends a message
+            this.isInReplayMode = true;
             this.currentSessionId = sessionId;
             await this.connectSSE();
             // Step 3: Load existing session (will trigger message replay)
@@ -116,6 +119,7 @@ export class HttpTransport {
             });
             this.connected = true;
             this.reconnectAttempts = 0;
+            // Note: isInReplayMode will be set to false when user sends their first message
         }
         catch (error) {
             this.connected = false;
@@ -163,6 +167,11 @@ export class HttpTransport {
         if (!this.connected || !this.currentSessionId) {
             throw new Error("Transport not connected");
         }
+        // Exit replay mode when user sends their first message
+        if (this.isInReplayMode) {
+            logger.info("Exiting replay mode - user sent a message");
+            this.isInReplayMode = false;
+        }
         try {
             // Reset stream state for new message
             this.streamComplete = false;
@@ -729,6 +738,15 @@ export class HttpTransport {
             this.notifySessionUpdate(sessionUpdate);
         }
         else if (update?.sessionUpdate === "agent_message_chunk") {
+            // Check if this is a replay (not live streaming)
+            const isReplay = update._meta &&
+                typeof update._meta === "object" &&
+                "isReplay" in update._meta &&
+                update._meta.isReplay === true;
+            // If in replay mode, ignore any chunks that aren't marked as replay
+            if (this.isInReplayMode && !isReplay) {
+                return;
+            }
             // Handle agent message chunks
             const sessionUpdate = {
                 type: "generic",
@@ -741,10 +759,7 @@ export class HttpTransport {
                 "tokenUsage" in update._meta
                 ? update._meta.tokenUsage
                 : undefined;
-            logger.debug("Agent message chunk", {
-                tokenUsage,
-            });
-            // Queue message chunks if present
+            // Queue message chunks if present (but skip during replay)
             // For agent_message_chunk, content is an object, not an array
             const content = update.content;
             if (content && typeof content === "object") {
@@ -759,7 +774,8 @@ export class HttpTransport {
                         isComplete: false,
                     };
                 }
-                if (chunk) {
+                // Only queue chunks for live streaming, not replay
+                if (chunk && !isReplay) {
                     // Resolve any waiting receive() calls immediately
                     const resolver = this.chunkResolvers.shift();
                     if (resolver) {
@@ -771,10 +787,11 @@ export class HttpTransport {
                     }
                 }
                 // Also notify as a complete message for session replay
-                // Only send session updates when NOT actively receiving messages (prevents duplication during normal streaming)
+                // During replay: always send session updates with complete messages
+                // During live streaming: only send when NOT actively receiving (prevents duplication)
                 if (chunk &&
                     typeof contentObj.text === "string" &&
-                    !this.isReceivingMessages) {
+                    (isReplay || !this.isReceivingMessages)) {
                     const messageSessionUpdate = {
                         type: "generic",
                         sessionId,
@@ -795,7 +812,10 @@ export class HttpTransport {
                     this.notifySessionUpdate(messageSessionUpdate);
                 }
             }
-            this.notifySessionUpdate(sessionUpdate);
+            // Only send generic session update during live streaming (not replay)
+            if (!isReplay) {
+                this.notifySessionUpdate(sessionUpdate);
+            }
         }
         else if (update?.sessionUpdate === "user_message_chunk") {
             // Handle user message chunks (could be from replay or new messages)

package/dist/tui/components/ChatView.js

@@ -12,10 +12,10 @@ export function ChatView({ client }) {
     const _currentModel = useChatStore((state) => state.currentModel);
     const _tokenDisplayMode = useChatStore((state) => state.tokenDisplayMode);
     // Use headless hooks for business logic
-    useChatSession(client); // Subscribe to session changes
-    const { messages, isStreaming } = useChatMessages(client);
+    const { startSession } = useChatSession(client); // Subscribe to session changes
+    const { messages, isStreaming } = useChatMessages(client, startSession);
     useToolCalls(client); // Still need to subscribe to tool call events
-    const { value, isSubmitting, attachedFiles, onChange, onSubmit } = useChatInput(client);
+    const { value, isSubmitting, attachedFiles, onChange, onSubmit } = useChatInput(client, startSession);
     // Check if we're actively receiving content (hide waiting indicator)
     const _hasStreamingContent = messages.some((msg) => msg.isStreaming && msg.content.length > 0);
     // Callbacks for keyboard shortcuts
@@ -34,8 +34,8 @@ export function ChatViewStatus({ client }) {
     const currentContext = useChatStore((state) => state.currentContext);
     const currentModel = useChatStore((state) => state.currentModel);
     const tokenDisplayMode = useChatStore((state) => state.tokenDisplayMode);
-    const { connectionStatus, sessionId } = useChatSession(client);
-    const { messages, isStreaming } = useChatMessages(client);
+    const { connectionStatus, sessionId, startSession } = useChatSession(client);
+    const { messages, isStreaming } = useChatMessages(client, startSession);
     const hasStreamingContent = messages.some((msg) => msg.isStreaming && msg.content.length > 0);
     return (_jsx(StatusBar, { connectionStatus: connectionStatus, sessionId: sessionId, isStreaming: isStreaming, streamingStartTime: streamingStartTime, hasStreamingContent: hasStreamingContent, totalBilled: totalBilled, currentContext: currentContext, currentModel: currentModel, tokenDisplayMode: tokenDisplayMode }));
 }

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

@@ -0,0 +1,5 @@
+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

@@ -0,0 +1,29 @@
+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))) }));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@townco/ui",
-  "version": "0.1.36",
+  "version": "0.1.37",
   "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.14",
+    "@townco/core": "0.0.15",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-label": "^2.1.8",
@@ -62,7 +62,7 @@
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4.1.17",
-    "@townco/tsconfig": "0.1.33",
+    "@townco/tsconfig": "0.1.34",
     "@types/node": "^24.10.0",
     "@types/react": "^19.2.2",
     "ink": "^6.4.0",