@townco/cli 0.1.27 → 0.1.28

package/dist/commands/run.js

@@ -5,8 +5,8 @@ import { readFile } from "node:fs/promises";
 import { join } from "node:path";
 import { isInsideTownProject } from "@townco/agent/storage";
 import { createLogger } from "@townco/agent/utils";
-import { AcpClient } from "@townco/ui";
-import { ChatView } from "@townco/ui/tui";
+import { AcpClient, configureLogsDir } from "@townco/ui";
+import { ChatView, ChatViewStatus } from "@townco/ui/tui";
 import { Box, render, Text } from "ink";
 import open from "open";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
@@ -16,10 +16,16 @@ import { findAvailablePort } from "../lib/port-utils.js";
 function TuiRunner({ agentPath, workingDir, onExit }) {
     const [client, setClient] = useState(null);
     const [error, setError] = useState(null);
+    // Configure logs directory for UI package loggers BEFORE any loggers are created
+    // This must run synchronously before any component initialization
+    useMemo(() => {
+        configureLogsDir(join(workingDir, ".logs"));
+    }, [workingDir]);
     // Session start time for log filtering - set once when component mounts
+    // Set to 5 seconds in the past to capture logs generated during initialization
     const sessionStartTime = useMemo(() => {
         const now = new Date();
-        now.setSeconds(now.getSeconds() - 1);
+        now.setSeconds(now.getSeconds() - 5);
         return now.toISOString();
     }, []);
     // Create logger with agent directory as logs location
@@ -62,6 +68,11 @@ function TuiRunner({ agentPath, workingDir, onExit }) {
                 }
                 return _jsx(ChatView, { client: client });
             },
+            renderStatus: () => {
+                if (!client || error)
+                    return null;
+                return _jsx(ChatViewStatus, { client: client });
+            },
         },
         {
             name: "Logs",
@@ -274,6 +285,10 @@ export async function runCommand(options) {
     }
     // Default: Start TUI interface with the agent
     logger.info("Starting TUI mode", { name, agentPath });
+    // Clear terminal and move cursor to top
+    if (process.stdout.isTTY) {
+        process.stdout.write("\x1b[2J\x1b[H");
+    }
     // Set stdin to raw mode for Ink
     if (process.stdin.isTTY) {
         process.stdin.setRawMode(true);

package/dist/components/LogsPane.js

@@ -1,4 +1,4 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { spawn } from "node:child_process";
 import { existsSync, readdirSync } from "node:fs";
 import { join } from "node:path";
@@ -36,6 +36,18 @@ export function LogsPane({ logsDir: customLogsDir, sessionStartTime: providedSes
     const [scrollOffset, setScrollOffset] = useState(0); // 0 = at bottom, positive = scrolled up
     const [searchMode, setSearchMode] = useState(false);
     const [searchQuery, setSearchQuery] = useState("");
+    const [expandedLogs, setExpandedLogs] = useState(false); // Start collapsed
+    const [terminalHeight, setTerminalHeight] = useState(process.stdout.rows ?? 30);
+    // Track terminal resize
+    useEffect(() => {
+        const handleResize = () => {
+            setTerminalHeight(process.stdout.rows ?? 30);
+        };
+        process.stdout.on("resize", handleResize);
+        return () => {
+            process.stdout.off("resize", handleResize);
+        };
+    }, []);
     // Use provided session start time or default to 1 second before component mount
     const sessionStartTime = useMemo(() => {
         if (providedSessionStartTime)
@@ -167,16 +179,6 @@ export function LogsPane({ logsDir: customLogsDir, sessionStartTime: providedSes
         if (searchMode) {
             return;
         }
-        // Up arrow to scroll up
-        if (key.upArrow) {
-            setScrollOffset((prev) => Math.min(prev + 1, Math.max(0, filteredLogs.length - 25)));
-            return;
-        }
-        // Down arrow to scroll down
-        if (key.downArrow) {
-            setScrollOffset((prev) => Math.max(prev - 1, 0));
-            return;
-        }
         // 's' to cycle through service filters
         if (input === "s") {
             if (serviceFilter === null) {
@@ -213,26 +215,39 @@ export function LogsPane({ logsDir: customLogsDir, sessionStartTime: providedSes
             setScrollOffset(0); // Also jump to bottom when clearing
             return;
         }
+        // 'e' to toggle expanded/collapsed metadata view
+        if (input === "e") {
+            setExpandedLogs((prev) => !prev);
+            return;
+        }
     });
     // Apply fuzzy search if active
     const searchedLogs = searchQuery
         ? filteredLogs.filter((log) => fuzzyMatch(searchQuery, log.message))
         : filteredLogs;
-    // Calculate display window (25 lines) based on scroll position
+    // Calculate display window based on terminal height
+    // Reserve space for: status line (3), header (3), search box if active (3), footer (3), padding (1)
+    const reservedLines = 10 + (searchMode ? 3 : 0);
+    const availableLines = Math.max(10, terminalHeight - reservedLines);
+    // When expanded, each log entry with metadata takes ~5 lines on average
+    // When collapsed, each log entry takes 1 line
+    const avgLinesPerEntry = expandedLogs ? 5 : 1;
+    const maxLines = Math.floor(availableLines / avgLinesPerEntry);
     const totalLogs = searchedLogs.length;
-    const maxLines = 25;
     const isAtBottom = scrollOffset === 0;
     // Calculate which slice of logs to show
     const displayLogs = isAtBottom
-        ? searchedLogs.slice(-maxLines) // Show last 25 when at bottom
+        ? searchedLogs.slice(-maxLines) // Show last N lines when at bottom
         : searchedLogs.slice(Math.max(0, totalLogs - maxLines - scrollOffset), totalLogs - scrollOffset);
     const canScrollUp = totalLogs > maxLines && scrollOffset < totalLogs - maxLines;
     const canScrollDown = scrollOffset > 0;
-    return (_jsxs(Box, { flexDirection: "column", height: "100%", borderStyle: "round", borderColor: "gray", children: [_jsxs(Box, { borderStyle: "single", borderBottom: true, borderColor: "gray", paddingX: 1, justifyContent: "space-between", children: [_jsxs(Text, { bold: true, children: ["Logs ", serviceFilter && `[${serviceFilter}]`, " ", levelFilter && `[>=${levelFilter}]`, searchQuery && _jsxs(Text, { color: "cyan", children: [" [SEARCH: ", searchQuery, "]"] }), !isAtBottom && _jsx(Text, { color: "yellow", children: " [SCROLLED]" })] }), _jsx(Text, { dimColor: true, children: "(/)search | (s)ervice | (l)evel | (c)lear | \u2191\u2193 | ESC" })] }), searchMode && (_jsxs(Box, { borderStyle: "single", borderBottom: true, borderColor: "cyan", paddingX: 1, children: [_jsx(Text, { color: "cyan", children: "Search: " }), _jsx(TextInput, { value: searchQuery, onChange: setSearchQuery, placeholder: "Type to search..." }), _jsx(Text, { dimColor: true, children: " (ESC to exit)" })] })), _jsx(Box, { flexDirection: "column", paddingX: 1, paddingY: 1, flexGrow: 1, children: displayLogs.length === 0 ? (_jsx(Text, { dimColor: true, children: "No logs match the current filters. Press 'c' to clear filters." })) : (displayLogs.map((log, idx) => {
+    return (_jsxs(Box, { flexDirection: "column", height: "100%", children: [searchMode && (_jsxs(Box, { borderStyle: "single", borderBottom: true, borderColor: "cyan", paddingX: 1, children: [_jsx(Text, { color: "cyan", children: "Search: " }), _jsx(TextInput, { value: searchQuery, onChange: setSearchQuery, placeholder: "Type to search..." }), _jsx(Text, { dimColor: true, children: " (ESC to exit)" })] })), _jsx(Box, { flexDirection: "column", paddingX: 1, flexGrow: 1, children: displayLogs.length === 0 ? (_jsx(Text, { dimColor: true, children: "No logs match the current filters. Press 'c' to clear filters." })) : (displayLogs.map((log, idx) => {
                     const serviceColor = SERVICE_COLORS[availableServices.indexOf(log.service) % SERVICE_COLORS.length] || "white";
                     const levelColor = LOG_COLORS[log.level] || "white";
                     const time = new Date(log.timestamp).toLocaleTimeString();
                     const keyStr = `${log.timestamp}-${idx}`;
-                    return (_jsxs(Box, { children: [_jsxs(Text, { dimColor: true, children: ["[", time, "]"] }), _jsxs(Text, { color: serviceColor, children: [" [", log.service, "]"] }), _jsxs(Text, { color: levelColor, children: [" [", log.level.toUpperCase(), "]"] }), _jsxs(Text, { children: [" ", log.message] })] }, keyStr));
-                })) }), totalLogs > 0 && (_jsxs(Box, { borderStyle: "single", borderTop: true, borderColor: "gray", paddingX: 1, justifyContent: "space-between", children: [_jsxs(Text, { dimColor: true, children: ["Showing ", displayLogs.length, " of ", totalLogs, " logs", searchQuery && ` (${totalLogs} matches)`, scrollOffset > 0 && ` (${scrollOffset} from bottom)`] }), totalLogs > maxLines && (_jsxs(Text, { dimColor: true, children: [canScrollUp && "↑ ", canScrollDown && "↓"] }))] }))] }));
+                    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { children: [_jsxs(Text, { dimColor: true, children: ["[", time, "]"] }), _jsxs(Text, { color: serviceColor, children: [" [", log.service, "]"] }), _jsxs(Text, { color: levelColor, children: [" [", log.level.toUpperCase(), "]"] }), _jsxs(Text, { children: [" ", log.message] })] }), expandedLogs &&
+                                log.metadata &&
+                                Object.keys(log.metadata).length > 0 && (_jsx(Box, { paddingLeft: 2, children: _jsx(Text, { dimColor: true, children: JSON.stringify(log.metadata, null, 2) }) }))] }, keyStr));
+                })) }), _jsxs(Box, { borderStyle: "single", borderTop: true, borderColor: "gray", paddingX: 1, justifyContent: "space-between", children: [_jsxs(Box, { children: [serviceFilter && _jsxs(Text, { children: ["[", serviceFilter, "] "] }), levelFilter && (_jsxs(Text, { children: ["[", ">=", levelFilter, "]", " "] })), searchQuery && _jsxs(Text, { color: "cyan", children: ["[SEARCH: ", searchQuery, "] "] }), !isAtBottom && _jsx(Text, { color: "yellow", children: "[SCROLLED] " }), expandedLogs && _jsx(Text, { color: "green", children: "[EXPANDED] " }), _jsxs(Text, { dimColor: true, children: [displayLogs.length, "/", totalLogs, " logs", scrollOffset > 0 && ` (${scrollOffset} from bottom)`] })] }), _jsx(Box, { children: _jsx(Text, { dimColor: true, children: "(/)search | (s)ervice | (l)evel | (e)xpand | (c)lear | ESC" }) })] })] }));
 }

package/dist/components/MergedLogsPane.js

@@ -1,4 +1,4 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Text, useInput } from "ink";
 import TextInput from "ink-text-input";
 import { useEffect, useMemo, useState } from "react";
@@ -86,16 +86,6 @@ export function MergedLogsPane({ services, onClear }) {
         if (searchMode) {
             return;
         }
-        // Up arrow to scroll up
-        if (key.upArrow) {
-            setScrollOffset((prev) => Math.min(prev + 1, Math.max(0, mergedLines.length - maxLines)));
-            return;
-        }
-        // Down arrow to scroll down
-        if (key.downArrow) {
-            setScrollOffset((prev) => Math.max(prev - 1, 0));
-            return;
-        }
         // 's' to cycle through service filters
         if (input === "s") {
             if (serviceFilter === null) {
@@ -190,12 +180,12 @@ export function MergedLogsPane({ services, onClear }) {
             : overallStatus === "starting"
                 ? "yellow"
                 : "gray";
-    return (_jsxs(Box, { flexDirection: "column", height: "100%", children: [_jsxs(Box, { borderStyle: "single", paddingX: 1, marginBottom: 1, flexShrink: 0, justifyContent: "space-between", children: [_jsxs(Box, { children: [_jsxs(Text, { bold: true, children: ["Logs ", serviceFilter && `[${serviceFilter}]`, levelFilter && ` [>=${levelFilter}]`, searchQuery && _jsxs(Text, { color: "cyan", children: [" [SEARCH: ", searchQuery, "]"] }), !isAtBottom && _jsx(Text, { color: "yellow", children: " [SCROLLED]" })] }), _jsx(Text, { children: " " }), _jsx(Text, { color: statusColor, children: "\u25CF" }), _jsxs(Text, { children: [" ", overallStatus] })] }), _jsx(Text, { dimColor: true, children: "(/)search | (s)ervice | (l)evel | \u2191\u2193 | (c)lear | ESC" })] }), searchMode && (_jsxs(Box, { borderStyle: "single", borderBottom: true, borderColor: "cyan", paddingX: 1, marginBottom: 1, flexShrink: 0, children: [_jsx(Text, { color: "cyan", children: "Search: " }), _jsx(TextInput, { value: searchQuery, onChange: setSearchQuery, placeholder: "Type to search..." }), _jsx(Text, { dimColor: true, children: " (ESC to exit)" })] })), _jsx(Box, { flexDirection: "column", flexGrow: 1, minHeight: 0, paddingX: 1, children: displayLines.length === 0 ? (_jsx(Text, { dimColor: true, children: searchQuery || serviceFilter || levelFilter
+    return (_jsxs(Box, { flexDirection: "column", height: "100%", children: [searchMode && (_jsxs(Box, { borderStyle: "single", borderBottom: true, borderColor: "cyan", paddingX: 1, marginBottom: 1, flexShrink: 0, children: [_jsx(Text, { color: "cyan", children: "Search: " }), _jsx(TextInput, { value: searchQuery, onChange: setSearchQuery, placeholder: "Type to search..." }), _jsx(Text, { dimColor: true, children: " (ESC to exit)" })] })), _jsx(Box, { flexDirection: "column", flexGrow: 1, minHeight: 0, paddingX: 1, children: displayLines.length === 0 ? (_jsx(Text, { dimColor: true, children: searchQuery || serviceFilter || levelFilter
                         ? "No logs match the current filters. Press 'c' to clear, 's' for service, or 'l' for level."
                         : "Waiting for output..." })) : (displayLines.map((logLine, idx) => {
                     const serviceColor = SERVICE_COLORS[availableServices.indexOf(logLine.service) %
                         SERVICE_COLORS.length] || "white";
                     const keyStr = `${logLine.service}-${logLine.serviceIndex}-${logLine.index}-${idx}`;
                     return (_jsxs(Box, { children: [_jsxs(Text, { color: serviceColor, children: ["[", logLine.service, "]"] }), _jsxs(Text, { children: [" ", logLine.line] })] }, keyStr));
-                })) }), _jsxs(Box, { borderStyle: "single", borderColor: "gray", paddingX: 1, flexShrink: 0, justifyContent: "space-between", children: [_jsxs(Text, { dimColor: true, children: ["Showing ", displayLines.length, " of ", searchedLines.length, " lines", searchQuery && ` (${searchedLines.length} matches)`, scrollOffset > 0 && ` (${scrollOffset} from bottom)`] }), searchedLines.length > maxLines && (_jsxs(Text, { dimColor: true, children: [canScrollUp && "↑ ", canScrollDown && "↓"] }))] })] }));
+                })) }), _jsxs(Box, { borderStyle: "single", borderColor: "gray", paddingX: 1, flexShrink: 0, justifyContent: "space-between", children: [_jsxs(Box, { children: [_jsx(Text, { color: statusColor, children: "\u25CF" }), _jsxs(Text, { children: [" ", overallStatus] }), serviceFilter && _jsxs(Text, { children: [" | [", serviceFilter, "]"] }), levelFilter && (_jsxs(Text, { children: [" ", "| [", ">=", levelFilter, "]"] })), searchQuery && _jsxs(Text, { color: "cyan", children: [" | [SEARCH: ", searchQuery, "]"] }), !isAtBottom && _jsx(Text, { color: "yellow", children: " | [SCROLLED]" }), _jsxs(Text, { dimColor: true, children: [" ", "| ", displayLines.length, "/", searchedLines.length, " lines"] }), scrollOffset > 0 && (_jsxs(Text, { dimColor: true, children: [" (", scrollOffset, " from bottom)"] }))] }), _jsx(Box, { children: _jsx(Text, { dimColor: true, children: "(/)search | (s)ervice | (l)evel | (c)lear | ESC" }) })] })] }));
 }

package/dist/components/StatusLine.d.ts

@@ -1,5 +1,7 @@
+import type React from "react";
 export interface StatusLineProps {
     activeTab: number;
     tabs: string[];
+    rightContent?: React.ReactNode;
 }
-export declare function StatusLine({ activeTab, tabs }: StatusLineProps): import("react/jsx-runtime").JSX.Element;
+export declare function StatusLine({ activeTab, tabs, rightContent }: StatusLineProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/StatusLine.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Text } from "ink";
-export function StatusLine({ activeTab, tabs }) {
-    return (_jsxs(Box, { borderStyle: "single", borderColor: "blue", paddingX: 1, children: [tabs.map((tab, idx) => (_jsxs(Text, { children: [_jsx(Text, { color: activeTab === idx ? "green" : "gray", children: tab }), idx < tabs.length - 1 && _jsx(Text, { color: "gray", children: " | " })] }, tab))), _jsx(Text, { color: "gray", children: " | " }), _jsx(Text, { color: "yellow", children: "tab" }), _jsx(Text, { color: "gray", children: " or " }), _jsx(Text, { color: "yellow", children: "\u2190\u2192" }), _jsx(Text, { color: "gray", children: " to switch" })] }));
+export function StatusLine({ activeTab, tabs, rightContent }) {
+    return (_jsxs(Box, { borderStyle: "single", borderColor: "blue", paddingX: 1, justifyContent: "space-between", children: [_jsxs(Box, { children: [tabs.map((tab, idx) => (_jsxs(Text, { children: [_jsx(Text, { color: activeTab === idx ? "green" : "gray", children: tab }), idx < tabs.length - 1 && _jsx(Text, { color: "gray", children: " | " })] }, tab))), _jsx(Text, { color: "gray", children: " | " }), _jsx(Text, { color: "yellow", children: "tab" }), _jsx(Text, { color: "gray", children: " to switch" })] }), rightContent && _jsx(Box, { children: rightContent })] }));
 }

package/dist/components/TabbedOutput.d.ts

@@ -9,6 +9,7 @@ export interface CustomTabInfo {
     name: string;
     type: "custom";
     render: () => React.ReactNode;
+    renderStatus?: () => React.ReactNode;
 }
 export type TabInfo = ProcessInfo | CustomTabInfo;
 export interface TabbedOutputProps {

package/dist/components/TabbedOutput.js

@@ -44,12 +44,6 @@ export function TabbedOutput({ processes, customTabs = [], logsDir, onExit, onPo
             setActiveTab((activeTab + 1) % allTabs.length);
             return;
         }
-        if (key.leftArrow && activeTab > 0) {
-            setActiveTab(activeTab - 1);
-        }
-        else if (key.rightArrow && activeTab < allTabs.length - 1) {
-            setActiveTab(activeTab + 1);
-        }
     });
     // Set up process output listeners
     useEffect(() => {
@@ -208,5 +202,9 @@ export function TabbedOutput({ processes, customTabs = [], logsDir, onExit, onPo
         return (_jsx(Box, { flexDirection: "column", height: "100%", children: _jsx(MergedLogsPane, { services: serviceOutputs, onClear: handleClearMergedOutput }) }));
     }
     // TUI mode: has custom tabs - use tabbed interface
-    return (_jsxs(Box, { flexDirection: "column", height: "100%", children: [_jsx(StatusLine, { activeTab: activeTab, tabs: allTabs.map((t) => t.name) }), isProcessTab(currentTab) ? (_jsx(ProcessPane, { title: currentTab.name, output: outputs[activeTab] || [], port: ports[activeTab], status: statuses[activeTab] || "starting", onClear: handleClearOutput })) : isCustomTab(currentTab) ? (currentTab.render()) : null] }));
+    // Get status content from current tab if available
+    const statusContent = isCustomTab(currentTab) && currentTab.renderStatus
+        ? currentTab.renderStatus()
+        : null;
+    return (_jsxs(Box, { flexDirection: "column", height: "100%", children: [isProcessTab(currentTab) ? (_jsx(ProcessPane, { title: currentTab.name, output: outputs[activeTab] || [], port: ports[activeTab], status: statuses[activeTab] || "starting", onClear: handleClearOutput })) : isCustomTab(currentTab) ? (currentTab.render()) : null, _jsx(StatusLine, { activeTab: activeTab, tabs: allTabs.map((t) => t.name), rightContent: statusContent })] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@townco/cli",
-  "version": "0.1.27",
+  "version": "0.1.28",
   "type": "module",
   "bin": {
     "town": "./dist/index.js"
@@ -18,16 +18,16 @@
     "build": "tsc"
   },
   "devDependencies": {
-    "@townco/tsconfig": "0.1.19",
+    "@townco/tsconfig": "0.1.20",
     "@types/bun": "^1.3.1",
     "@types/react": "^19.2.2"
   },
   "dependencies": {
     "@optique/core": "^0.6.2",
     "@optique/run": "^0.6.2",
-    "@townco/agent": "0.1.27",
-    "@townco/secret": "0.1.22",
-    "@townco/ui": "0.1.22",
+    "@townco/agent": "0.1.28",
+    "@townco/secret": "0.1.23",
+    "@townco/ui": "0.1.23",
     "@types/inquirer": "^9.0.9",
     "ink": "^6.4.0",
     "ink-text-input": "^6.0.0",