@townco/ui 0.1.22 → 0.1.23

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

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

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

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

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

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

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

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

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

@@ -1,12 +1,46 @@
 /**
  * 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;
@@ -22,3 +56,4 @@ export declare class Logger {
  * @param minLevel - Minimum log level to display (default: "debug")
  */
 export declare function createLogger(service: string, minLevel?: LogLevel): Logger;
+export {};

package/dist/core/lib/logger.js

@@ -1,7 +1,45 @@
 /**
  * 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,
@@ -18,7 +56,7 @@ const _LOG_COLORS = {
     error: "#EF4444", // red
     fatal: "#DC2626", // dark red
 };
-const LOG_STYLES = {
+const _LOG_STYLES = {
     trace: "color: #6B7280",
     debug: "color: #3B82F6; font-weight: bold",
     info: "color: #10B981; font-weight: bold",
@@ -29,6 +67,10 @@ const LOG_STYLES = {
 export class Logger {
     service;
     minLevel;
+    logFilePath;
+    logsDir;
+    writeQueue = [];
+    isWriting = false;
     constructor(service, minLevel = "debug") {
         this.service = service;
         this.minLevel = minLevel;
@@ -37,6 +79,48 @@ export class Logger {
             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];
@@ -46,38 +130,37 @@ export class Logger {
             return;
         }
         const entry = {
+            id: `log_${++logIdCounter}`,
             timestamp: new Date().toISOString(),
             level,
             service: this.service,
             message,
             ...(metadata && { metadata }),
         };
-        // Console output with color-coding
-        const style = LOG_STYLES[level];
-        const levelUpper = level.toUpperCase().padEnd(5);
-        if (typeof console !== "undefined") {
-            // Format: [timestamp] [SERVICE] [LEVEL] message
-            const prefix = `%c[${entry.timestamp}] [${this.service}] [${levelUpper}]`;
-            const msg = metadata ? `${message} %o` : message;
-            switch (level) {
-                case "trace":
-                case "debug":
-                case "info":
-                    console.log(prefix, style, msg, ...(metadata ? [metadata] : []));
-                    break;
-                case "warn":
-                    console.warn(prefix, style, msg, ...(metadata ? [metadata] : []));
-                    break;
-                case "error":
-                case "fatal":
-                    console.error(prefix, style, msg, ...(metadata ? [metadata] : []));
-                    break;
-            }
+        // 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();
         }
-        // Also log the structured JSON for debugging
-        if (level === "fatal" || level === "error") {
-            console.debug("Structured log:", JSON.stringify(entry));
+        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);

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

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

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

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

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

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

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

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

package/dist/tui/components/ChatView.js

@@ -25,5 +25,17 @@ 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, totalBilled: totalBilled, currentContext: currentContext, currentModel: currentModel, tokenDisplayMode: tokenDisplayMode })] }));
+    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 })] }));
+}
+// Export helper to render status content separately
+export function ChatViewStatus({ client }) {
+    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);
+    const { connectionStatus, sessionId } = useChatSession(client);
+    const { messages, isStreaming } = useChatMessages(client);
+    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/InputBox.js

@@ -1,10 +1,30 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Text, useStdout } from "ink";
-import { ReadlineInput } from "./ReadlineInput.js";
+import { Box, Text, useInput, useStdout } from "ink";
+import { useState } from "react";
+import { SimpleTextInput } from "./SimpleTextInput.js";
 export function InputBox({ value, isSubmitting, attachedFiles, onChange, onSubmit, onEscape, }) {
     const { stdout } = useStdout();
     const terminalWidth = stdout?.columns || 80;
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { color: "blue", children: "─".repeat(terminalWidth) }), attachedFiles.length > 0 && (_jsxs(Box, { flexDirection: "column", paddingTop: 1, children: [_jsx(Text, { dimColor: true, children: "Attached files:" }), attachedFiles.map((file) => (_jsxs(Box, { children: [_jsxs(Text, { color: "cyan", children: [" ", file.name] }), _jsxs(Text, { dimColor: true, children: [" (", formatFileSize(file.size), ")"] })] }, file.path)))] })), _jsxs(Box, { paddingY: 1, children: [_jsx(Text, { bold: true, color: "blue", children: "> " }), isSubmitting ? (_jsx(Text, { color: "gray", italic: true, children: "Sending..." })) : onEscape ? (_jsx(ReadlineInput, { value: value, onChange: onChange, onSubmit: onSubmit, onEscape: onEscape, placeholder: "Type your message..." })) : (_jsx(ReadlineInput, { value: value, onChange: onChange, onSubmit: onSubmit, placeholder: "Type your message..." }))] }), _jsx(Text, { color: "blue", children: "─".repeat(terminalWidth) })] }));
+    // Handle special keys for multi-line and escape
+    useInput((_input, key) => {
+        // Escape key
+        if (key.escape && onEscape) {
+            onEscape();
+            return;
+        }
+        // Don't interfere if submitting
+        if (isSubmitting)
+            return;
+        // Shift+Enter or Alt+Enter: insert newline
+        if (key.return && (key.shift || key.meta)) {
+            onChange(value + "\n");
+            return;
+        }
+    });
+    // Split value into lines for display
+    const lines = value.split("\n");
+    const hasMultipleLines = lines.length > 1;
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { color: "blue", children: "─".repeat(terminalWidth) }), attachedFiles.length > 0 && (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { dimColor: true, children: "Attached files:" }), attachedFiles.map((file) => (_jsxs(Box, { children: [_jsxs(Text, { color: "cyan", children: [" ", file.name] }), _jsxs(Text, { dimColor: true, children: [" (", formatFileSize(file.size), ")"] })] }, file.path)))] })), _jsx(Box, { paddingY: 1, flexDirection: "column", children: _jsxs(Box, { flexDirection: "row", children: [_jsx(Text, { bold: true, color: "blue", children: "> " }), _jsx(Box, { flexGrow: 1, children: isSubmitting ? (_jsx(Text, { color: "gray", italic: true, children: "Sending..." })) : (_jsx(SimpleTextInput, { value: value, onChange: onChange, onSubmit: onSubmit, placeholder: "Type your message... (\\ or Shift+Enter for newline)" })) })] }) })] }));
 }
 function formatFileSize(bytes) {
     if (bytes < 1024)

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/dist/tui/components/MessageList.js

@@ -3,7 +3,7 @@ import { Box, Text } from "ink";
 import { GameOfLife } from "./GameOfLife.js";
 import { ToolCall } from "./ToolCall.js";
 export function MessageList({ messages }) {
-    return (_jsx(Box, { flexDirection: "column", paddingX: 1, paddingY: 1, children: messages.length === 0 ? (_jsx(GameOfLife, {})) : (messages.map((message) => (_jsx(Message, { message: message }, message.id)))) }));
+    return (_jsx(Box, { flexDirection: "column", paddingX: 1, paddingY: 1, height: "100%", children: messages.length === 0 ? (_jsx(GameOfLife, {})) : (messages.map((message) => (_jsx(Message, { message: message }, message.id)))) }));
 }
 function Message({ message }) {
     const roleColor = message.role === "user"

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

@@ -0,0 +1,7 @@
+export interface SimpleTextInputProps {
+    value: string;
+    onChange: (value: string) => void;
+    onSubmit: () => void;
+    placeholder?: string;
+}
+export declare function SimpleTextInput({ value, onChange, onSubmit, placeholder, }: SimpleTextInputProps): import("react/jsx-runtime").JSX.Element;

package/dist/tui/components/SimpleTextInput.js

@@ -0,0 +1,208 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text, useInput } from "ink";
+import { useEffect, useState } from "react";
+export function SimpleTextInput({ value, onChange, onSubmit, placeholder = "", }) {
+    const [cursorOffset, setCursorOffset] = useState(0);
+    useInput((input, key) => {
+        // Handle return/enter
+        if (key.return) {
+            onSubmit();
+            return;
+        }
+        // Handle backspace/delete
+        if (key.backspace || key.delete) {
+            const cursorPos = value.length + cursorOffset;
+            if (cursorPos > 0) {
+                const newValue = value.slice(0, cursorPos - 1) + value.slice(cursorPos);
+                onChange(newValue);
+                if (cursorOffset < 0) {
+                    setCursorOffset(cursorOffset + 1);
+                }
+            }
+            return;
+        }
+        // Handle left arrow
+        if (key.leftArrow) {
+            const cursorPos = value.length + cursorOffset;
+            if (cursorPos > 0) {
+                setCursorOffset(cursorOffset - 1);
+            }
+            return;
+        }
+        // Handle right arrow
+        if (key.rightArrow) {
+            const cursorPos = value.length + cursorOffset;
+            if (cursorPos < value.length) {
+                setCursorOffset(cursorOffset + 1);
+            }
+            return;
+        }
+        // Handle up arrow - navigate to previous line
+        if (key.upArrow) {
+            const cursorPos = value.length + cursorOffset;
+            const lines = value.split("\n");
+            // Find current line and position within it
+            let currentLineIndex = 0;
+            let charCount = 0;
+            let posInLine = cursorPos;
+            for (let i = 0; i < lines.length; i++) {
+                const lineLength = (lines[i]?.length || 0) + (i < lines.length - 1 ? 1 : 0);
+                if (charCount + lineLength > cursorPos || i === lines.length - 1) {
+                    currentLineIndex = i;
+                    posInLine = cursorPos - charCount;
+                    break;
+                }
+                charCount += lineLength;
+            }
+            // Move to previous line if possible
+            if (currentLineIndex > 0) {
+                const prevLine = lines[currentLineIndex - 1] || "";
+                const currentLine = lines[currentLineIndex] || "";
+                const prevLineStart = charCount - (currentLine.length + 1);
+                const targetPos = Math.min(posInLine, prevLine.length);
+                const newCursorPos = prevLineStart + targetPos;
+                setCursorOffset(newCursorPos - value.length);
+            }
+            return;
+        }
+        // Handle down arrow - navigate to next line
+        if (key.downArrow) {
+            const cursorPos = value.length + cursorOffset;
+            const lines = value.split("\n");
+            // Find current line and position within it
+            let currentLineIndex = 0;
+            let charCount = 0;
+            let posInLine = cursorPos;
+            for (let i = 0; i < lines.length; i++) {
+                const lineLength = (lines[i]?.length || 0) + (i < lines.length - 1 ? 1 : 0);
+                if (charCount + lineLength > cursorPos || i === lines.length - 1) {
+                    currentLineIndex = i;
+                    posInLine = cursorPos - charCount;
+                    break;
+                }
+                charCount += lineLength;
+            }
+            // Move to next line if possible
+            if (currentLineIndex < lines.length - 1) {
+                const nextLine = lines[currentLineIndex + 1] || "";
+                const currentLine = lines[currentLineIndex] || "";
+                const nextLineStart = charCount + currentLine.length + 1;
+                const targetPos = Math.min(posInLine, nextLine.length);
+                const newCursorPos = nextLineStart + targetPos;
+                setCursorOffset(newCursorPos - value.length);
+            }
+            return;
+        }
+        // Handle Ctrl+A (move to beginning)
+        if (key.ctrl && input === "a") {
+            setCursorOffset(-value.length);
+            return;
+        }
+        // Handle Ctrl+E (move to end)
+        if (key.ctrl && input === "e") {
+            setCursorOffset(0);
+            return;
+        }
+        // Handle Ctrl+W (delete word backward)
+        if (key.ctrl && input === "w") {
+            const cursorPos = value.length + cursorOffset;
+            const before = value.slice(0, cursorPos);
+            const after = value.slice(cursorPos);
+            const match = before.match(/\s*\S*$/);
+            if (match) {
+                const newBefore = before.slice(0, -match[0].length);
+                onChange(newBefore + after);
+                setCursorOffset(-after.length);
+            }
+            return;
+        }
+        // Handle Ctrl+U (delete to beginning)
+        if (key.ctrl && input === "u") {
+            const cursorPos = value.length + cursorOffset;
+            onChange(value.slice(cursorPos));
+            setCursorOffset(-value.slice(cursorPos).length);
+            return;
+        }
+        // Handle Ctrl+K (delete to end)
+        if (key.ctrl && input === "k") {
+            const cursorPos = value.length + cursorOffset;
+            onChange(value.slice(0, cursorPos));
+            setCursorOffset(0);
+            return;
+        }
+        // Regular character input
+        if (!key.ctrl && !key.meta && input.length > 0) {
+            const cursorPos = value.length + cursorOffset;
+            const newValue = value.slice(0, cursorPos) + input + value.slice(cursorPos);
+            // If user types backslash at the end, automatically add newline
+            if (input === "\\" && cursorPos === value.length) {
+                onChange(newValue.slice(0, -1) + "\n");
+                // Reset cursor to end (no offset)
+                setCursorOffset(0);
+            }
+            else {
+                onChange(newValue);
+                // Keep cursor at same relative position
+                if (cursorOffset < 0) {
+                    setCursorOffset(cursorOffset - input.length);
+                }
+            }
+        }
+    });
+    // Reset cursor when value changes externally (e.g., after submit)
+    useEffect(() => {
+        if (value.length === 0) {
+            setCursorOffset(0);
+        }
+    }, [value]);
+    // Display the input with cursor
+    const cursorPos = value.length + cursorOffset;
+    // Show placeholder if empty
+    if (value.length === 0) {
+        return (_jsxs(_Fragment, { children: [_jsx(Text, { inverse: true, children: " " }), _jsx(Text, { dimColor: true, children: placeholder })] }));
+    }
+    // Split by newlines for multi-line rendering
+    const allLines = value.split("\n");
+    // Find which line the cursor is on and position within that line
+    let charCount = 0;
+    let cursorLineIndex = 0;
+    let cursorPosInLine = 0;
+    for (let i = 0; i < allLines.length; i++) {
+        const line = allLines[i] || "";
+        const lineEndPos = charCount + line.length;
+        // Check if cursor is within this line (including at the end before newline)
+        if (cursorPos <= lineEndPos) {
+            cursorLineIndex = i;
+            cursorPosInLine = cursorPos - charCount;
+            break;
+        }
+        // Move past the newline character for next iteration
+        charCount = lineEndPos + 1;
+    }
+    // Build the full display text with cursor
+    let displayText = "";
+    for (let i = 0; i < allLines.length; i++) {
+        const line = allLines[i] || "";
+        if (i === cursorLineIndex) {
+            // Add text before cursor
+            displayText += line.slice(0, cursorPosInLine);
+            // Mark cursor position - we'll add it separately
+            displayText += "\0"; // placeholder for cursor
+            // Add text after cursor
+            displayText += line.slice(cursorPosInLine + 1);
+        }
+        else {
+            displayText += line;
+        }
+        // Add newline if not last line
+        // if (i < allLines.length - 1) {
+        displayText += "\n";
+        // }
+    }
+    // Split by cursor placeholder
+    const parts = displayText.split("\0");
+    const beforeCursor = parts[0] || "";
+    const afterCursor = parts[1] || "";
+    const cursorChar = allLines[cursorLineIndex]?.[cursorPosInLine] || " ";
+    return (_jsxs(Text, { children: [beforeCursor, _jsx(Text, { inverse: true, children: cursorChar }), afterCursor] }));
+}

package/dist/tui/components/StatusBar.js

@@ -113,7 +113,7 @@ export function StatusBar({ connectionStatus, isStreaming, streamingStartTime, h
         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(_Fragment, { children: [_jsx(Text, { dimColor: true, children: "Ctx: " }), _jsx(Text, { color: contextColor, children: contextPercentageStr }), _jsx(Text, { dimColor: true, children: " | In: " }), _jsx(Text, { children: formatTokenCount(inputTokens) }), _jsx(Text, { dimColor: true, children: " | Out: " }), _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()] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Text, { color: statusColor, children: "\u25CF" }), _jsxs(Text, { children: [" ", connectionStatus] }), showWaiting && (_jsxs(_Fragment, { children: [_jsx(Text, { children: " " }), _jsx(WaitingElapsedTime, { startTime: streamingStartTime })] })), _jsx(Text, { dimColor: true, children: " | " }), renderTokenDisplay()] }));
 }

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

@@ -7,6 +7,7 @@ export * from "./InputBox.js";
 export * from "./MessageList.js";
 export * from "./MultiSelect.js";
 export * from "./ReadlineInput.js";
+export * from "./SimpleTextInput.js";
 export * from "./SingleSelect.js";
 export * from "./StatusBar.js";
 export * from "./ToolCall.js";

package/dist/tui/components/index.js

@@ -7,6 +7,7 @@ export * from "./InputBox.js";
 export * from "./MessageList.js";
 export * from "./MultiSelect.js";
 export * from "./ReadlineInput.js";
+export * from "./SimpleTextInput.js";
 export * from "./SingleSelect.js";
 export * from "./StatusBar.js";
 export * from "./ToolCall.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@townco/ui",
-  "version": "0.1.22",
+  "version": "0.1.23",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -61,11 +61,10 @@
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4.1.17",
-    "@townco/tsconfig": "0.1.19",
+    "@townco/tsconfig": "0.1.20",
     "@types/node": "^24.10.0",
     "@types/react": "^19.2.2",
     "ink": "^6.4.0",
-    "ink-text-input": "^6.0.0",
     "react": "^19.2.0",
     "tailwindcss": "^4.1.17",
     "typescript": "^5.9.3"