@townco/ui 0.1.26 → 0.1.27

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

@@ -53,20 +53,11 @@ export function useChatMessages(client) {
                 streamingStartTime: startTime, // Use the same start time from when user sent message
             };
             addMessage(assistantMessage);
-            // Build full conversation history (excluding system messages)
-            const conversationHistory = messages
-                .filter((msg) => msg.role !== "system")
-                .map((msg) => `${msg.role === "user" ? "Human" : "Assistant"}: ${msg.content}`)
-                .join("\n\n");
-            // Combine history with new message
-            const fullPrompt = conversationHistory
-                ? `${conversationHistory}\n\nHuman: ${content}`
-                : content;
             // Start receiving chunks (async iterator)
             const messageStream = client.receiveMessages();
-            // Send full conversation without awaiting (fire and forget)
-            // This allows chunks to start arriving while we're listening
-            client.sendMessage(fullPrompt, sessionId).catch((error) => {
+            // Send ONLY the new message (not full history)
+            // The agent backend now manages conversation context
+            client.sendMessage(content, sessionId).catch((error) => {
                 const message = error instanceof Error ? error.message : String(error);
                 setError(message);
                 setIsStreaming(false);
@@ -115,7 +106,6 @@ export function useChatMessages(client) {
     }, [
         client,
         sessionId,
-        messages,
         addMessage,
         updateMessage,
         setIsStreaming,

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

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

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

@@ -5,7 +5,7 @@ const logger = createLogger("use-chat-session", "debug");
 /**
  * Hook for managing chat session lifecycle
  */
-export function useChatSession(client) {
+export function useChatSession(client, initialSessionId) {
     const connectionStatus = useChatStore((state) => state.connectionStatus);
     const sessionId = useChatStore((state) => state.sessionId);
     const setConnectionStatus = useChatStore((state) => state.setConnectionStatus);
@@ -13,8 +13,42 @@ export function useChatSession(client) {
     const setError = useChatStore((state) => state.setError);
     const clearMessages = useChatStore((state) => state.clearMessages);
     const resetTokens = useChatStore((state) => state.resetTokens);
+    const addMessage = useChatStore((state) => state.addMessage);
+    // Subscribe to session updates to handle replayed messages
+    useEffect(() => {
+        if (!client)
+            return;
+        const unsubscribe = client.onSessionUpdate((update) => {
+            // Handle replayed messages during session loading
+            if (update.message) {
+                logger.debug("Session update with message", {
+                    message: update.message,
+                });
+                // Convert SDK message to DisplayMessage
+                // Filter out tool messages as they're not displayed in the chat
+                if (update.message.role !== "tool") {
+                    const displayMessage = {
+                        id: update.message.id,
+                        role: update.message.role,
+                        content: update.message.content
+                            .map((c) => {
+                            if (c.type === "text") {
+                                return c.text;
+                            }
+                            return "";
+                        })
+                            .join(""),
+                        timestamp: update.message.timestamp,
+                        isStreaming: false,
+                    };
+                    addMessage(displayMessage);
+                }
+            }
+        });
+        return unsubscribe;
+    }, [client, addMessage]);
     /**
-     * Connect to the agent
+     * Connect to the agent (without creating a session)
      */
     const connect = useCallback(async () => {
         if (!client) {
@@ -36,6 +70,65 @@ export function useChatSession(client) {
             setConnectionStatus("error");
         }
     }, [client, setConnectionStatus, setError]);
+    /**
+     * Load an existing session
+     */
+    const loadSession = useCallback(async (sessionIdToLoad) => {
+        if (!client) {
+            setError("No client available");
+            return;
+        }
+        try {
+            setConnectionStatus("connecting");
+            setError(null);
+            // Try to load session (this will also connect and replay messages)
+            const id = await client.loadSession(sessionIdToLoad);
+            setSessionId(id);
+            setConnectionStatus("connected");
+            // Don't clear messages - they will be populated by session replay
+            resetTokens();
+            logger.info("Session loaded successfully", { sessionId: id });
+        }
+        catch (error) {
+            logger.warn("Failed to load session, creating new one instead", {
+                sessionId: sessionIdToLoad,
+                error: error instanceof Error ? error.message : String(error),
+            });
+            // If session not found, create a new one instead
+            try {
+                // Connect and create new session
+                await connect();
+                const newId = await client.startSession();
+                setSessionId(newId);
+                clearMessages();
+                resetTokens();
+                // Update URL with new session ID
+                if (typeof window !== "undefined") {
+                    const url = new URL(window.location.href);
+                    url.searchParams.set("session", newId);
+                    window.history.replaceState({}, "", url.toString());
+                }
+                logger.info("Created new session after failed load", {
+                    sessionId: newId,
+                });
+            }
+            catch (fallbackError) {
+                const message = fallbackError instanceof Error
+                    ? fallbackError.message
+                    : String(fallbackError);
+                setError(`Failed to load or create session: ${message}`);
+                setConnectionStatus("error");
+            }
+        }
+    }, [
+        client,
+        setConnectionStatus,
+        setSessionId,
+        setError,
+        clearMessages,
+        resetTokens,
+        connect,
+    ]);
     /**
      * Start a new session
      */
@@ -49,6 +142,12 @@ export function useChatSession(client) {
             setSessionId(id);
             clearMessages();
             resetTokens();
+            // Update URL with new session ID
+            if (typeof window !== "undefined") {
+                const url = new URL(window.location.href);
+                url.searchParams.set("session", id);
+                window.history.pushState({}, "", url.toString());
+            }
         }
         catch (error) {
             const message = error instanceof Error ? error.message : String(error);
@@ -71,22 +170,34 @@ export function useChatSession(client) {
             setError(message);
         }
     }, [client, setConnectionStatus, setSessionId, setError]);
-    // Auto-connect on mount if client is available
+    // Auto-connect on mount if client is available and handle initial session
     useEffect(() => {
-        if (client && connectionStatus === "disconnected") {
+        if (!client || connectionStatus !== "disconnected") {
+            return;
+        }
+        // If we have an initial session ID, load it
+        if (initialSessionId) {
+            logger.info("Loading initial session from URL", {
+                sessionId: initialSessionId,
+            });
+            loadSession(initialSessionId);
+        }
+        else {
+            // Otherwise, connect normally (will create new session after)
             connect();
         }
-    }, [client, connectionStatus, connect]);
-    // Auto-start session after connecting
+    }, [client, connectionStatus, initialSessionId, connect, loadSession]);
+    // Auto-start new session after connecting (only if no initial session)
     useEffect(() => {
-        if (connectionStatus === "connected" && !sessionId) {
+        if (connectionStatus === "connected" && !sessionId && !initialSessionId) {
             startSession();
         }
-    }, [connectionStatus, sessionId, startSession]);
+    }, [connectionStatus, sessionId, initialSessionId, startSession]);
     return {
         connectionStatus,
         sessionId,
         connect,
+        loadSession,
         startSession,
         disconnect,
     };

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/sdk/client/acp-client.d.ts

@@ -41,8 +41,13 @@ export declare class AcpClient {
     isConnected(): boolean;
     /**
      * Start a new chat session
+     * Note: For HTTP transport, the session is created during connect() and this just returns the existing session ID
      */
     startSession(config?: Partial<SessionConfig>): Promise<string>;
+    /**
+     * Load an existing session
+     */
+    loadSession(sessionId: string, config?: Partial<SessionConfig>): Promise<string>;
     /**
      * Send a message in the current session
      */

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

@@ -46,8 +46,31 @@ export class AcpClient {
     }
     /**
      * Start a new chat session
+     * Note: For HTTP transport, the session is created during connect() and this just returns the existing session ID
      */
     async startSession(config) {
+        // For HTTP transport, the session is already created during connect()
+        // Just get the session ID from the transport's current session
+        const transportSessionId = this.transport.currentSessionId;
+        if (transportSessionId) {
+            // Use the session ID from the transport
+            const now = new Date().toISOString();
+            const session = {
+                id: transportSessionId,
+                status: "connected",
+                config: config
+                    ? { ...config, agentPath: config.agentPath || "" }
+                    : { agentPath: "" },
+                messages: [],
+                metadata: {
+                    startedAt: now,
+                },
+            };
+            this.sessions.set(transportSessionId, session);
+            this.currentSessionId = transportSessionId;
+            return transportSessionId;
+        }
+        // Fallback: generate session ID (for transports that don't auto-create sessions)
         const sessionId = this.generateSessionId();
         const now = new Date().toISOString();
         const session = {
@@ -67,6 +90,34 @@ export class AcpClient {
         this.updateSessionStatus(sessionId, "connected");
         return sessionId;
     }
+    /**
+     * Load an existing session
+     */
+    async loadSession(sessionId, config) {
+        if (!this.transport.loadSession) {
+            throw new Error("Transport does not support loading sessions");
+        }
+        const now = new Date().toISOString();
+        // Create session object
+        const session = {
+            id: sessionId,
+            status: "connecting",
+            config: config
+                ? { ...config, agentPath: config.agentPath || "" }
+                : { agentPath: "" },
+            messages: [],
+            metadata: {
+                startedAt: now,
+            },
+        };
+        this.sessions.set(sessionId, session);
+        this.currentSessionId = sessionId;
+        // Load session from transport (will replay messages via session updates)
+        await this.transport.loadSession(sessionId);
+        // Update session status
+        this.updateSessionStatus(sessionId, "connected");
+        return sessionId;
+    }
     /**
      * Send a message in the current session
      */

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

@@ -19,8 +19,14 @@ export declare class HttpTransport implements Transport {
     private reconnecting;
     private abortController;
     private options;
+    private isReceivingMessages;
     constructor(options: HttpTransportOptions);
     connect(): Promise<void>;
+    /**
+     * Load an existing session instead of creating a new one
+     * @param sessionId - The session ID to load
+     */
+    loadSession(sessionId: string): Promise<void>;
     disconnect(): Promise<void>;
     send(message: Message): Promise<void>;
     receive(): AsyncIterableIterator<MessageChunk>;

package/dist/sdk/transports/http.js

@@ -20,6 +20,7 @@ export class HttpTransport {
     reconnecting = false;
     abortController = null;
     options;
+    isReceivingMessages = false;
     constructor(options) {
         // Ensure baseUrl doesn't end with a slash
         this.options = { ...options, baseUrl: options.baseUrl.replace(/\/$/, "") };
@@ -62,6 +63,72 @@ export class HttpTransport {
             throw err;
         }
     }
+    /**
+     * Load an existing session instead of creating a new one
+     * @param sessionId - The session ID to load
+     */
+    async loadSession(sessionId) {
+        if (this.connected) {
+            logger.warn("Transport already connected, disconnecting first", {
+                sessionId,
+            });
+            await this.disconnect();
+        }
+        try {
+            this.abortController = new AbortController();
+            // Step 1: Initialize the ACP connection
+            const initRequest = {
+                protocolVersion: acp.PROTOCOL_VERSION,
+                clientCapabilities: {
+                    fs: {
+                        readTextFile: true,
+                        writeTextFile: true,
+                    },
+                },
+            };
+            logger.info("Loading session - initializing connection", { sessionId });
+            const initResponse = await this.sendRpcRequest("initialize", initRequest);
+            // Check if loadSession is supported
+            if (!initResponse.agentCapabilities?.loadSession) {
+                logger.error("Agent does not support loading sessions", {
+                    capabilities: initResponse.agentCapabilities,
+                });
+                throw new Error("Agent does not support loading sessions");
+            }
+            logger.info("ACP connection initialized, loading session", {
+                sessionId,
+                capabilities: initResponse.agentCapabilities,
+            });
+            // Step 2: Open SSE connection FIRST so we can receive replayed messages
+            this.currentSessionId = sessionId;
+            await this.connectSSE();
+            // Step 3: Load existing session (will trigger message replay)
+            const loadRequest = {
+                sessionId,
+                cwd: "/",
+                mcpServers: [],
+            };
+            logger.info("Sending session/load request", { loadRequest });
+            const loadResponse = await this.sendRpcRequest("session/load", loadRequest);
+            logger.info("Session loaded successfully", {
+                sessionId: this.currentSessionId,
+                loadResponse,
+            });
+            this.connected = true;
+            this.reconnectAttempts = 0;
+        }
+        catch (error) {
+            this.connected = false;
+            const err = error instanceof Error ? error : new Error(String(error));
+            logger.error("Failed to load session", {
+                sessionId,
+                error: err.message,
+                stack: err.stack,
+            });
+            this.notifyError(err);
+            throw err;
+        }
+    }
     async disconnect() {
         if (!this.connected) {
             return;
@@ -147,46 +214,54 @@ export class HttpTransport {
         }
     }
     async *receive() {
-        // Keep yielding chunks until stream is complete
-        while (!this.streamComplete) {
-            // Check if there are queued messages
-            if (this.messageQueue.length > 0) {
-                const chunk = this.messageQueue.shift();
-                if (chunk) {
-                    yield chunk;
+        // Mark that we're actively receiving messages (prevents duplicate session updates)
+        this.isReceivingMessages = true;
+        try {
+            // Keep yielding chunks until stream is complete
+            while (!this.streamComplete) {
+                // Check if there are queued messages
+                if (this.messageQueue.length > 0) {
+                    const chunk = this.messageQueue.shift();
+                    if (chunk) {
+                        yield chunk;
+                        if (chunk.isComplete) {
+                            return;
+                        }
+                    }
+                }
+                else {
+                    // Wait for next chunk to arrive
+                    const chunk = await new Promise((resolve) => {
+                        this.chunkResolvers.push(resolve);
+                    });
                     if (chunk.isComplete) {
+                        yield chunk;
                         return;
                     }
+                    else {
+                        yield chunk;
+                    }
                 }
             }
-            else {
-                // Wait for next chunk to arrive
-                const chunk = await new Promise((resolve) => {
-                    this.chunkResolvers.push(resolve);
-                });
-                if (chunk.isComplete) {
-                    yield chunk;
-                    return;
-                }
-                else {
+            // Yield any remaining queued messages
+            while (this.messageQueue.length > 0) {
+                const chunk = this.messageQueue.shift();
+                if (chunk) {
                     yield chunk;
                 }
             }
+            // Mark the stream as complete
+            yield {
+                id: this.currentSessionId || "unknown",
+                role: "assistant",
+                contentDelta: { type: "text", text: "" },
+                isComplete: true,
+            };
         }
-        // Yield any remaining queued messages
-        while (this.messageQueue.length > 0) {
-            const chunk = this.messageQueue.shift();
-            if (chunk) {
-                yield chunk;
-            }
+        finally {
+            // Reset flag when receive() completes
+            this.isReceivingMessages = false;
         }
-        // Mark the stream as complete
-        yield {
-            id: this.currentSessionId || "unknown",
-            role: "assistant",
-            contentDelta: { type: "text", text: "" },
-            isComplete: true,
-        };
     }
     isConnected() {
         return this.connected;
@@ -215,6 +290,7 @@ export class HttpTransport {
             method,
             params,
         };
+        logger.debug("Sending RPC request", { method, params, request });
         const headers = {
             "Content-Type": "application/json",
             ...this.options.headers,
@@ -694,9 +770,62 @@ export class HttpTransport {
                         this.messageQueue.push(chunk);
                     }
                 }
+                // Also notify as a complete message for session replay
+                // Only send session updates when NOT actively receiving messages (prevents duplication during normal streaming)
+                if (chunk &&
+                    typeof contentObj.text === "string" &&
+                    !this.isReceivingMessages) {
+                    const messageSessionUpdate = {
+                        type: "generic",
+                        sessionId,
+                        status: "active",
+                        message: {
+                            id: `msg_${Date.now()}_assistant`,
+                            role: "assistant",
+                            content: [
+                                {
+                                    type: "text",
+                                    text: contentObj.text,
+                                },
+                            ],
+                            timestamp: new Date().toISOString(),
+                        },
+                    };
+                    // Notify as a complete message (for session replay)
+                    this.notifySessionUpdate(messageSessionUpdate);
+                }
             }
             this.notifySessionUpdate(sessionUpdate);
         }
+        else if (update?.sessionUpdate === "user_message_chunk") {
+            // Handle user message chunks (could be from replay or new messages)
+            logger.debug("Received user_message_chunk", { update });
+            const content = update.content;
+            if (content && typeof content === "object") {
+                const contentObj = content;
+                if (contentObj.type === "text" && typeof contentObj.text === "string") {
+                    // Notify session update with user message
+                    const sessionUpdate = {
+                        type: "generic",
+                        sessionId,
+                        status: "active",
+                        message: {
+                            id: `msg_${Date.now()}_user`,
+                            role: "user",
+                            content: [
+                                {
+                                    type: "text",
+                                    text: contentObj.text,
+                                },
+                            ],
+                            timestamp: new Date().toISOString(),
+                        },
+                    };
+                    logger.debug("Notifying session update for user message");
+                    this.notifySessionUpdate(sessionUpdate);
+                }
+            }
+        }
         else {
             // Handle other session updates
             const sessionUpdate = {

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

@@ -7,6 +7,10 @@ export interface Transport {
      * Initialize the transport connection
      */
     connect(): Promise<void>;
+    /**
+     * Load an existing session (optional, not all transports support this)
+     */
+    loadSession?(sessionId: string): Promise<void>;
     /**
      * Close the transport connection
      */

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.26",
+  "version": "0.1.27",
   "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.4",
+    "@townco/core": "0.0.5",
     "@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.23",
+    "@townco/tsconfig": "0.1.24",
     "@types/node": "^24.10.0",
     "@types/react": "^19.2.2",
     "ink": "^6.4.0",