@townco/cli 0.1.13 → 0.1.14

package/dist/commands/create.d.ts

@@ -1,9 +1,8 @@
 interface CreateCommandProps {
-    name?: string;
-    model?: string;
-    tools?: readonly string[];
-    systemPrompt?: string;
-    overwrite?: boolean;
+	name?: string;
+	model?: string;
+	tools?: readonly string[];
+	systemPrompt?: string;
+	overwrite?: boolean;
 }
 export declare function createCommand(props: CreateCommandProps): Promise<void>;
-export {};

package/dist/commands/create.js

@@ -131,20 +131,10 @@ function CreateApp({ name: initialName, model: initialModel, tools: initialTools
                 if (result.success) {
                     setScaffoldStatus("done");
                     setAgentPath(result.path);
-                    // Output in the same format as 'town list'
-                    const modelLabel = model.replace("claude-", "");
-                    console.log(`\n\x1b[1mAgent created successfully!\x1b[0m\n`);
-                    console.log(`  \x1b[32m●\x1b[0m \x1b[1m${name}\x1b[0m`);
-                    console.log(`    \x1b[2mModel: ${modelLabel}\x1b[0m`);
-                    if (agentDef.tools && agentDef.tools.length > 0) {
-                        console.log(`    \x1b[2mTools: ${agentDef.tools.join(", ")}\x1b[0m`);
-                    }
-                    console.log(`    \x1b[2mPath: ${result.path}\x1b[0m`);
-                    console.log();
-                    console.log(`\x1b[2mRun an agent with: town run ${agentDef.name}\x1b[0m`);
-                    console.log(`\x1b[2mTUI mode (default), --gui for web interface, --http for API server\x1b[0m`);
-                    // Exit immediately
-                    process.exit(0);
+                    // Exit after showing the done message
+                    setTimeout(() => {
+                        process.exit(0);
+                    }, 100);
                 }
                 else {
                     setScaffoldStatus("error");
@@ -297,13 +287,14 @@ function CreateApp({ name: initialName, model: initialModel, tools: initialTools
     // Done stage
     if (stage === "done") {
         if (scaffoldStatus === "scaffolding") {
-            return (_jsx(Box, { flexDirection: "column", children: _jsx(Text, { children: "\u23F3 Creating agent package..." }) }));
+            return (_jsx(Box, { flexDirection: "column", children: _jsxs(Text, { children: ["\u23F3 Creating agent ", agentDef.name, "..."] }) }));
         }
         if (scaffoldStatus === "error") {
             return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { color: "red", children: "\u2717 Error creating agent package" }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { children: scaffoldError }) })] }));
         }
         if (scaffoldStatus === "done") {
-            return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { color: "green", children: "\u2713 Agent package created successfully!" }), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { dimColor: true, children: ["Path: ", agentPath] }) }), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { dimColor: true, children: ["You can run the agent with:", " ", _jsxs(Text, { bold: true, color: "cyan", children: ["town run ", agentDef.name] })] }) })] }));
+            const modelLabel = agentDef.model?.replace("claude-", "") || "";
+            return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { bold: true, children: "Agent created successfully!" }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsxs(Text, { children: [_jsx(Text, { color: "green", children: "\u25CF" }), " ", _jsx(Text, { bold: true, children: agentDef.name })] }), _jsxs(Text, { dimColor: true, children: [" Model: ", modelLabel] }), agentDef.tools && agentDef.tools.length > 0 && (_jsxs(Text, { dimColor: true, children: [" Tools: ", agentDef.tools.join(", ")] })), _jsxs(Text, { dimColor: true, children: [" Path: ", agentPath] })] }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsxs(Text, { dimColor: true, children: ["Run an agent with: town run ", agentDef.name] }), _jsx(Text, { dimColor: true, children: "TUI mode (default), --gui for web interface, --http for API server" })] })] }));
         }
     }
     return null;

package/dist/commands/mcp-add.d.ts

@@ -1,9 +1,14 @@
 interface MCPAddProps {
-    name?: string;
-    url?: string;
-    command?: string;
-    args?: readonly string[];
+	name?: string;
+	url?: string;
+	command?: string;
+	args?: readonly string[];
 }
-declare function MCPAddApp({ name: initialName, url: initialUrl, command: initialCommand, args: initialArgs, }: MCPAddProps): import("react/jsx-runtime").JSX.Element | null;
+declare function MCPAddApp({
+	name: initialName,
+	url: initialUrl,
+	command: initialCommand,
+	args: initialArgs,
+}: MCPAddProps): import("react/jsx-runtime").JSX.Element | null;
 export default MCPAddApp;
 export declare function runMCPAdd(props?: MCPAddProps): Promise<void>;

package/dist/commands/mcp-list.js

@@ -1,61 +1,188 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, render, Text, useApp, useInput } from "ink";
 import { useEffect, useState } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { listMCPConfigs } from "../lib/mcp-storage";
+
 // ============================================================================
 // Main Component
 // ============================================================================
 function MCPListApp() {
-    const [result, setResult] = useState(null);
-    const [loading, setLoading] = useState(true);
-    const { exit } = useApp();
-    useEffect(() => {
-        function loadConfigs() {
-            try {
-                const configs = listMCPConfigs();
-                setResult({ configs });
-            }
-            catch (error) {
-                const errorMsg = error instanceof Error ? error.message : String(error);
-                setResult({ configs: [], error: errorMsg });
-            }
-            finally {
-                setLoading(false);
-            }
-        }
-        loadConfigs();
-    }, []);
-    // Exit on any key press when not loading
-    useInput((_input, key) => {
-        if (!loading) {
-            if (key.return || key.escape || _input === "q") {
-                exit();
-            }
-        }
-    });
-    if (loading) {
-        return (_jsx(Box, { children: _jsx(Text, { children: "Loading MCP servers..." }) }));
-    }
-    if (result?.error) {
-        return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { bold: true, color: "red", children: "\u274C Error loading MCP servers" }) }), _jsx(Box, { marginBottom: 1, children: _jsx(Text, { children: result.error }) }), _jsx(Box, { children: _jsx(Text, { dimColor: true, children: "Press Enter or Q to exit" }) })] }));
-    }
-    if (!result || result.configs.length === 0) {
-        return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { bold: true, children: "No MCP servers configured" }) }), _jsx(Box, { marginBottom: 1, children: _jsx(Text, { dimColor: true, children: "Add one with: town mcp add" }) }), _jsx(Box, { children: _jsx(Text, { dimColor: true, children: "Press Enter or Q to exit" }) })] }));
-    }
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Box, { marginBottom: 1, children: _jsxs(Text, { bold: true, children: ["Configured MCP Servers (", result.configs.length, ")"] }) }), result.configs.map((config, index) => (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsx(Box, { children: _jsxs(Text, { bold: true, color: "cyan", children: [index + 1, ". ", config.name] }) }), _jsx(Box, { paddingLeft: 3, children: config.transport === "http" ? (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { children: ["Transport: ", _jsx(Text, { color: "green", children: "HTTP" })] }), _jsxs(Text, { children: ["URL: ", config.url] })] })) : (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { children: ["Transport: ", _jsx(Text, { color: "blue", children: "stdio" })] }), _jsxs(Text, { children: ["Command: ", config.command] }), config.args && config.args.length > 0 && (_jsxs(Text, { children: ["Args: ", config.args.join(" ")] }))] })) })] }, config.name))), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "Use `town mcp remove` to remove a server or `town mcp add` to add one" }) }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "Press Enter or Q to exit" }) })] }));
+	const [result, setResult] = useState(null);
+	const [loading, setLoading] = useState(true);
+	const { exit } = useApp();
+	useEffect(() => {
+		function loadConfigs() {
+			try {
+				const configs = listMCPConfigs();
+				setResult({ configs });
+			} catch (error) {
+				const errorMsg = error instanceof Error ? error.message : String(error);
+				setResult({ configs: [], error: errorMsg });
+			} finally {
+				setLoading(false);
+			}
+		}
+		loadConfigs();
+	}, []);
+	// Exit on any key press when not loading
+	useInput((_input, key) => {
+		if (!loading) {
+			if (key.return || key.escape || _input === "q") {
+				exit();
+			}
+		}
+	});
+	if (loading) {
+		return _jsx(Box, {
+			children: _jsx(Text, { children: "Loading MCP servers..." }),
+		});
+	}
+	if (result?.error) {
+		return _jsxs(Box, {
+			flexDirection: "column",
+			children: [
+				_jsx(Box, {
+					marginBottom: 1,
+					children: _jsx(Text, {
+						bold: true,
+						color: "red",
+						children: "\u274C Error loading MCP servers",
+					}),
+				}),
+				_jsx(Box, {
+					marginBottom: 1,
+					children: _jsx(Text, { children: result.error }),
+				}),
+				_jsx(Box, {
+					children: _jsx(Text, {
+						dimColor: true,
+						children: "Press Enter or Q to exit",
+					}),
+				}),
+			],
+		});
+	}
+	if (!result || result.configs.length === 0) {
+		return _jsxs(Box, {
+			flexDirection: "column",
+			children: [
+				_jsx(Box, {
+					marginBottom: 1,
+					children: _jsx(Text, {
+						bold: true,
+						children: "No MCP servers configured",
+					}),
+				}),
+				_jsx(Box, {
+					marginBottom: 1,
+					children: _jsx(Text, {
+						dimColor: true,
+						children: "Add one with: town mcp add",
+					}),
+				}),
+				_jsx(Box, {
+					children: _jsx(Text, {
+						dimColor: true,
+						children: "Press Enter or Q to exit",
+					}),
+				}),
+			],
+		});
+	}
+	return _jsxs(Box, {
+		flexDirection: "column",
+		children: [
+			_jsx(Box, {
+				marginBottom: 1,
+				children: _jsxs(Text, {
+					bold: true,
+					children: ["Configured MCP Servers (", result.configs.length, ")"],
+				}),
+			}),
+			result.configs.map((config, index) =>
+				_jsxs(
+					Box,
+					{
+						flexDirection: "column",
+						marginBottom: 1,
+						children: [
+							_jsx(Box, {
+								children: _jsxs(Text, {
+									bold: true,
+									color: "cyan",
+									children: [index + 1, ". ", config.name],
+								}),
+							}),
+							_jsx(Box, {
+								paddingLeft: 3,
+								children:
+									config.transport === "http"
+										? _jsxs(Box, {
+												flexDirection: "column",
+												children: [
+													_jsxs(Text, {
+														children: [
+															"Transport: ",
+															_jsx(Text, { color: "green", children: "HTTP" }),
+														],
+													}),
+													_jsxs(Text, { children: ["URL: ", config.url] }),
+												],
+											})
+										: _jsxs(Box, {
+												flexDirection: "column",
+												children: [
+													_jsxs(Text, {
+														children: [
+															"Transport: ",
+															_jsx(Text, { color: "blue", children: "stdio" }),
+														],
+													}),
+													_jsxs(Text, {
+														children: ["Command: ", config.command],
+													}),
+													config.args &&
+														config.args.length > 0 &&
+														_jsxs(Text, {
+															children: ["Args: ", config.args.join(" ")],
+														}),
+												],
+											}),
+							}),
+						],
+					},
+					config.name,
+				),
+			),
+			_jsx(Box, {
+				marginTop: 1,
+				children: _jsx(Text, {
+					dimColor: true,
+					children:
+						"Use `town mcp remove` to remove a server or `town mcp add` to add one",
+				}),
+			}),
+			_jsx(Box, {
+				marginTop: 1,
+				children: _jsx(Text, {
+					dimColor: true,
+					children: "Press Enter or Q to exit",
+				}),
+			}),
+		],
+	});
 }
 // ============================================================================
 // Export and Runner
 // ============================================================================
 export default MCPListApp;
 export async function runMCPList() {
-    const { waitUntilExit, clear } = render(_jsx(MCPListApp, {}));
-    try {
-        await waitUntilExit();
-    }
-    finally {
-        clear();
-        // Ensure cursor is visible
-        process.stdout.write("\x1B[?25h");
-    }
+	const { waitUntilExit, clear } = render(_jsx(MCPListApp, {}));
+	try {
+		await waitUntilExit();
+	} finally {
+		clear();
+		// Ensure cursor is visible
+		process.stdout.write("\x1B[?25h");
+	}
 }

package/dist/commands/run.js

@@ -1,10 +1,42 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { spawn } from "node:child_process";
 import { existsSync } from "node:fs";
 import { readFile } from "node:fs/promises";
 import { homedir } from "node:os";
 import { join } from "node:path";
 import { agentExists, getAgentPath } from "@townco/agent/storage";
+import { render } from "ink";
 import open from "open";
+import { useCallback, useMemo, useRef, useState } from "react";
+import { TabbedOutput } from "../components/TabbedOutput.js";
+import { findAvailablePort } from "../lib/port-utils.js";
+function GuiRunner({ agentProcess, guiProcess, agentPort, onExit, }) {
+    const [guiPort, setGuiPort] = useState(5173);
+    const browserOpenedRef = useRef(false);
+    const handlePortDetected = useCallback((processIndex, port) => {
+        // Process index 1 is the GUI process
+        if (processIndex === 1) {
+            setGuiPort(port);
+            // Open browser once we know the actual port
+            if (!browserOpenedRef.current) {
+                browserOpenedRef.current = true;
+                const guiUrl = `http://localhost:${port}`;
+                open(guiUrl).catch((error) => {
+                    // Silently fail - user can open manually
+                    console.warn(`Could not automatically open browser: ${error.message}`);
+                });
+            }
+        }
+    }, []);
+    // Memoize processes array based only on actual process objects and initial ports
+    // Don't include guiPort as dependency to prevent re-creating array when port is detected
+    // TabbedOutput will update the displayed port internally via onPortDetected callback
+    const processes = useMemo(() => [
+        { name: "Agent", process: agentProcess, port: agentPort },
+        { name: "GUI", process: guiProcess, port: guiPort },
+    ], [agentProcess, guiProcess, agentPort, guiPort]);
+    return (_jsx(TabbedOutput, { processes: processes, onExit: onExit, onPortDetected: handlePortDetected }));
+}
 async function loadEnvVars() {
     const envPath = join(homedir(), ".config", "town", ".env");
     const envVars = {};
@@ -42,7 +74,7 @@ export async function runCommand(options) {
     }
     const agentPath = getAgentPath(name);
     const binPath = join(agentPath, "bin.ts");
-    // If GUI or HTTP-only mode, run differently
+    // If GUI mode, run with tabbed interface
     if (gui) {
         const guiPath = join(agentPath, "gui");
         // Check if GUI exists
@@ -56,72 +88,58 @@ export async function runCommand(options) {
             console.log(`Recreate the agent with "town create" to include the GUI.`);
             process.exit(1);
         }
+        // Find an available port for the agent
+        const availablePort = await findAvailablePort(port);
+        if (availablePort !== port) {
+            console.log(`Port ${port} is in use, using port ${availablePort} instead`);
+        }
         console.log(`Starting agent "${name}" with GUI...`);
-        console.log(`Starting agent HTTP server on port ${port}...`);
-        console.log(`Starting GUI development server...\n`);
-        // Start the agent in HTTP mode first
+        console.log(`Agent HTTP server will run on port ${availablePort}`);
+        console.log(`GUI dev server will run on port 5173\n`);
+        // Set stdin to raw mode for Ink
+        if (process.stdin.isTTY) {
+            process.stdin.setRawMode(true);
+        }
+        // Start the agent in HTTP mode
         const agentProcess = spawn("bun", [binPath, "http"], {
             cwd: agentPath,
-            stdio: "pipe",
+            stdio: ["ignore", "pipe", "pipe"], // Pipe stdout/stderr for capture
             env: {
                 ...process.env,
                 ...configEnvVars,
                 NODE_ENV: process.env.NODE_ENV || "production",
-                PORT: port.toString(),
+                PORT: availablePort.toString(),
             },
         });
-        agentProcess.on("error", (error) => {
-            console.error(`Failed to start agent: ${error.message}`);
-            process.exit(1);
+        // Start the GUI dev server
+        const guiProcess = spawn("bun", ["run", "dev"], {
+            cwd: guiPath,
+            stdio: ["ignore", "pipe", "pipe"], // Pipe stdout/stderr for capture
+            env: {
+                ...process.env,
+                ...configEnvVars,
+                VITE_AGENT_URL: `http://localhost:${availablePort}`,
+            },
         });
-        // Wait a bit for agent to start, then start the GUI
-        setTimeout(() => {
-            // Start the GUI dev server
-            const guiProcess = spawn("bun", ["run", "dev"], {
-                cwd: guiPath,
-                stdio: "inherit",
-                env: {
-                    ...process.env,
-                    ...configEnvVars,
-                    VITE_AGENT_URL: `http://localhost:${port}`,
-                },
-            });
-            guiProcess.on("error", (error) => {
-                console.error(`Failed to start GUI: ${error.message}`);
-                agentProcess.kill();
-                process.exit(1);
-            });
-            guiProcess.on("close", (code) => {
+        // Render the tabbed UI with dynamic port detection
+        const { waitUntilExit } = render(_jsx(GuiRunner, { agentProcess: agentProcess, guiProcess: guiProcess, agentPort: availablePort, onExit: () => {
                 agentProcess.kill();
-                if (code !== 0 && code !== null) {
-                    console.error(`GUI exited with code ${code}`);
-                    process.exit(code);
-                }
-            });
-            // Open browser after GUI server has time to start (default Vite port is 5173)
-            setTimeout(() => {
-                const guiUrl = "http://localhost:5173";
-                console.log(`Opening browser at ${guiUrl}...`);
-                open(guiUrl).catch((error) => {
-                    console.warn(`Could not automatically open browser: ${error.message}`);
-                    console.log(`Please manually open: ${guiUrl}`);
-                });
-            }, 2000);
-        }, 1000);
-        agentProcess.on("close", (code) => {
-            if (code !== 0 && code !== null) {
-                console.error(`Agent exited with code ${code}`);
-                process.exit(code);
-            }
-        });
-        return;
+                guiProcess.kill();
+            } }));
+        await waitUntilExit();
+        process.exit(0);
     }
     else if (http) {
-        console.log(`Starting agent "${name}" in HTTP mode on port ${port}...`);
+        // Find an available port for the agent
+        const availablePort = await findAvailablePort(port);
+        if (availablePort !== port) {
+            console.log(`Port ${port} is in use, using port ${availablePort} instead\n`);
+        }
+        console.log(`Starting agent "${name}" in HTTP mode on port ${availablePort}...`);
         console.log(`\nEndpoints:`);
-        console.log(`  http://localhost:${port}/health - Health check`);
-        console.log(`  http://localhost:${port}/rpc - RPC endpoint`);
-        console.log(`  http://localhost:${port}/events - SSE event stream\n`);
+        console.log(`  http://localhost:${availablePort}/health - Health check`);
+        console.log(`  http://localhost:${availablePort}/rpc - RPC endpoint`);
+        console.log(`  http://localhost:${availablePort}/events - SSE event stream\n`);
         // Run the agent in HTTP mode
         const agentProcess = spawn("bun", [binPath, "http"], {
             cwd: agentPath,
@@ -130,7 +148,7 @@ export async function runCommand(options) {
                 ...process.env,
                 ...configEnvVars,
                 NODE_ENV: process.env.NODE_ENV || "production",
-                PORT: port.toString(),
+                PORT: availablePort.toString(),
             },
         });
         agentProcess.on("error", (error) => {

package/dist/components/ProcessPane.d.ts

@@ -0,0 +1,7 @@
+export interface ProcessPaneProps {
+    title: string;
+    output: string[];
+    port: number | undefined;
+    status: "starting" | "running" | "stopped" | "error";
+}
+export declare function ProcessPane({ title, output, port, status }: ProcessPaneProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/ProcessPane.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from "ink";
+import { useMemo } from "react";
+export function ProcessPane({ title, output, port, status }) {
+    // Keep only last 50 lines to prevent memory issues
+    const displayOutput = useMemo(() => {
+        return output.slice(-50);
+    }, [output]);
+    const statusColor = status === "running"
+        ? "green"
+        : status === "error"
+            ? "red"
+            : status === "starting"
+                ? "yellow"
+                : "gray";
+    return (_jsxs(Box, { flexDirection: "column", height: "100%", children: [_jsxs(Box, { borderStyle: "single", paddingX: 1, marginBottom: 1, flexShrink: 0, children: [_jsx(Text, { color: "cyan", bold: true, children: title }), port && _jsxs(Text, { color: "gray", children: [" - http://localhost:", port] }), _jsx(Text, { children: " " }), _jsx(Text, { color: statusColor, children: "\u25CF" }), _jsxs(Text, { children: [" ", status] })] }), _jsx(Box, { flexDirection: "column", flexGrow: 1, minHeight: 0, paddingX: 1, children: displayOutput.length === 0 ? (_jsx(Text, { color: "gray", children: "Waiting for output..." })) : (displayOutput.map((line, idx) => (_jsx(Text, { children: line }, `${idx}-${line.slice(0, 20)}`)))) }), _jsx(Box, { borderStyle: "single", borderColor: "gray", paddingX: 1, flexShrink: 0, children: _jsxs(Text, { color: "gray", children: ["Lines: ", output.length, " | Displaying last ", displayOutput.length] }) })] }));
+}

package/dist/components/StatusLine.d.ts

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

package/dist/components/StatusLine.js

@@ -0,0 +1,5 @@
+import { jsxs as _jsxs, jsx as _jsx } 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: [_jsxs(Text, { color: activeTab === idx ? "green" : "gray", children: [idx + 1, ". ", 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: ", " }), _jsx(Text, { color: "yellow", children: "\u2190\u2192" }), _jsx(Text, { color: "gray", children: " or " }), _jsxs(Text, { color: "yellow", children: ["1-", tabs.length] }), _jsx(Text, { color: "gray", children: " to switch" })] }));
+}

package/dist/components/TabbedOutput.d.ts

@@ -0,0 +1,12 @@
+import type { ChildProcess } from "node:child_process";
+export interface ProcessInfo {
+    name: string;
+    process: ChildProcess;
+    port?: number;
+}
+export interface TabbedOutputProps {
+    processes: ProcessInfo[];
+    onExit: () => void;
+    onPortDetected?: (processIndex: number, port: number) => void;
+}
+export declare function TabbedOutput({ processes, onExit, onPortDetected, }: TabbedOutputProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/TabbedOutput.js

@@ -0,0 +1,136 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, useApp, useInput } from "ink";
+import { useEffect, useRef, useState } from "react";
+import { ProcessPane } from "./ProcessPane.js";
+import { StatusLine } from "./StatusLine.js";
+export function TabbedOutput({ processes, onExit, onPortDetected, }) {
+    const { exit } = useApp();
+    const [activeTab, setActiveTab] = useState(0);
+    const [outputs, setOutputs] = useState(processes.map(() => []));
+    const [statuses, setStatuses] = useState(processes.map(() => "starting"));
+    const [ports, setPorts] = useState(processes.map((p) => p.port));
+    const portDetectedRef = useRef(new Set());
+    // Handle keyboard input
+    useInput((input, key) => {
+        if (key.ctrl && input === "c") {
+            // Cleanup and exit
+            onExit();
+            exit();
+            return;
+        }
+        // Tab key to toggle between tabs
+        if (key.tab) {
+            setActiveTab((activeTab + 1) % processes.length);
+            return;
+        }
+        if (key.leftArrow && activeTab > 0) {
+            setActiveTab(activeTab - 1);
+        }
+        else if (key.rightArrow && activeTab < processes.length - 1) {
+            setActiveTab(activeTab + 1);
+        }
+        // Number keys to jump to tabs
+        const num = Number.parseInt(input, 10);
+        if (!Number.isNaN(num) && num >= 1 && num <= processes.length) {
+            setActiveTab(num - 1);
+        }
+    });
+    // Set up process output listeners
+    useEffect(() => {
+        processes.forEach((processInfo, idx) => {
+            const { process } = processInfo;
+            // Mark as running when we see first output
+            const markAsRunning = () => {
+                setStatuses((prev) => {
+                    const newStatuses = [...prev];
+                    if (newStatuses[idx] === "starting") {
+                        newStatuses[idx] = "running";
+                    }
+                    return newStatuses;
+                });
+            };
+            // Capture stdout
+            process.stdout?.on("data", (data) => {
+                const output = data.toString();
+                const lines = output.split("\n").filter(Boolean);
+                setOutputs((prev) => {
+                    const newOutputs = [...prev];
+                    newOutputs[idx] = [...(newOutputs[idx] || []), ...lines];
+                    return newOutputs;
+                });
+                markAsRunning();
+                // Check for Vite port in output and notify if callback provided
+                if (onPortDetected && !portDetectedRef.current.has(idx)) {
+                    const portMatch = output.match(/Local:\s+http:\/\/localhost:(\d+)/);
+                    if (portMatch?.[1]) {
+                        const detectedPort = Number.parseInt(portMatch[1], 10);
+                        portDetectedRef.current.add(idx);
+                        // Update our internal ports state
+                        setPorts((prev) => {
+                            const newPorts = [...prev];
+                            newPorts[idx] = detectedPort;
+                            return newPorts;
+                        });
+                        onPortDetected(idx, detectedPort);
+                    }
+                }
+            });
+            // Capture stderr
+            process.stderr?.on("data", (data) => {
+                const text = data.toString();
+                const lines = text.split("\n").filter(Boolean);
+                const errorLines = lines.map((line) => `[ERROR] ${line}`);
+                setOutputs((prev) => {
+                    const newOutputs = [...prev];
+                    newOutputs[idx] = [...(newOutputs[idx] || []), ...errorLines];
+                    return newOutputs;
+                });
+                markAsRunning();
+            });
+            // Handle process exit
+            process.on("close", (code) => {
+                setStatuses((prev) => {
+                    const newStatuses = [...prev];
+                    newStatuses[idx] = code === 0 ? "stopped" : "error";
+                    return newStatuses;
+                });
+                if (code !== 0 && code !== null) {
+                    setOutputs((prev) => {
+                        const newOutputs = [...prev];
+                        newOutputs[idx] = [
+                            ...(newOutputs[idx] || []),
+                            `\n[Process exited with code ${code}]`,
+                        ];
+                        return newOutputs;
+                    });
+                }
+            });
+            process.on("error", (error) => {
+                setStatuses((prev) => {
+                    const newStatuses = [...prev];
+                    newStatuses[idx] = "error";
+                    return newStatuses;
+                });
+                setOutputs((prev) => {
+                    const newOutputs = [...prev];
+                    newOutputs[idx] = [
+                        ...(newOutputs[idx] || []),
+                        `\n[Process error: ${error.message}]`,
+                    ];
+                    return newOutputs;
+                });
+            });
+        });
+        // Cleanup function
+        return () => {
+            processes.forEach(({ process }) => {
+                process.kill();
+            });
+        };
+    }, [processes, onPortDetected]);
+    const currentProcess = processes[activeTab];
+    if (!currentProcess) {
+        return null;
+    }
+    return (_jsxs(Box, { flexDirection: "column", height: "100%", children: [_jsx(StatusLine, { activeTab: activeTab, tabs: processes.map((p) => p.name) }), _jsx(ProcessPane, { title: currentProcess.name, output: outputs[activeTab] || [], port: ports[activeTab], status: statuses[activeTab] || "starting" })] }));
+}

package/dist/lib/mcp-storage.d.ts

@@ -1,9 +1,9 @@
 export type MCPConfig = {
-    name: string;
-    transport: "stdio" | "http";
-    command?: string;
-    args?: string[];
-    url?: string;
+	name: string;
+	transport: "stdio" | "http";
+	command?: string;
+	args?: string[];
+	url?: string;
 };
 /**
  * Save an MCP config to the store

package/dist/lib/mcp-storage.js

@@ -1,6 +1,7 @@
 import { existsSync, mkdirSync, readFileSync, writeFileSync } from "node:fs";
 import { homedir } from "node:os";
 import { join } from "node:path";
+
 // ============================================================================
 // Constants
 // ============================================================================
@@ -13,38 +14,40 @@ const MCPS_FILE = join(TOWN_CONFIG_DIR, "mcps.json");
  * Ensure the config directory exists
  */
 function ensureConfigDir() {
-    if (!existsSync(TOWN_CONFIG_DIR)) {
-        mkdirSync(TOWN_CONFIG_DIR, { recursive: true });
-    }
+	if (!existsSync(TOWN_CONFIG_DIR)) {
+		mkdirSync(TOWN_CONFIG_DIR, { recursive: true });
+	}
 }
 /**
  * Load all MCP configs from the JSON file
  */
 function loadStore() {
-    ensureConfigDir();
-    if (!existsSync(MCPS_FILE)) {
-        return {};
-    }
-    try {
-        const content = readFileSync(MCPS_FILE, "utf-8");
-        return JSON.parse(content);
-    }
-    catch (error) {
-        throw new Error(`Failed to load MCP configs: ${error instanceof Error ? error.message : String(error)}`);
-    }
+	ensureConfigDir();
+	if (!existsSync(MCPS_FILE)) {
+		return {};
+	}
+	try {
+		const content = readFileSync(MCPS_FILE, "utf-8");
+		return JSON.parse(content);
+	} catch (error) {
+		throw new Error(
+			`Failed to load MCP configs: ${error instanceof Error ? error.message : String(error)}`,
+		);
+	}
 }
 /**
  * Save all MCP configs to the JSON file
  */
 function saveStore(store) {
-    ensureConfigDir();
-    try {
-        const content = JSON.stringify(store, null, 2);
-        writeFileSync(MCPS_FILE, content, "utf-8");
-    }
-    catch (error) {
-        throw new Error(`Failed to save MCP configs: ${error instanceof Error ? error.message : String(error)}`);
-    }
+	ensureConfigDir();
+	try {
+		const content = JSON.stringify(store, null, 2);
+		writeFileSync(MCPS_FILE, content, "utf-8");
+	} catch (error) {
+		throw new Error(
+			`Failed to save MCP configs: ${error instanceof Error ? error.message : String(error)}`,
+		);
+	}
 }
 // ============================================================================
 // Public API
@@ -53,55 +56,54 @@ function saveStore(store) {
  * Save an MCP config to the store
  */
 export function saveMCPConfig(config) {
-    const store = loadStore();
-    store[config.name] = config;
-    saveStore(store);
+	const store = loadStore();
+	store[config.name] = config;
+	saveStore(store);
 }
 /**
  * Load an MCP config by name
  */
 export function loadMCPConfig(name) {
-    const store = loadStore();
-    return store[name] || null;
+	const store = loadStore();
+	return store[name] || null;
 }
 /**
  * Delete an MCP config by name
  */
 export function deleteMCPConfig(name) {
-    const store = loadStore();
-    if (store[name]) {
-        delete store[name];
-        saveStore(store);
-        return true;
-    }
-    return false;
+	const store = loadStore();
+	if (store[name]) {
+		delete store[name];
+		saveStore(store);
+		return true;
+	}
+	return false;
 }
 /**
  * List all MCP configs
  */
 export function listMCPConfigs() {
-    const store = loadStore();
-    return Object.values(store).sort((a, b) => a.name.localeCompare(b.name));
+	const store = loadStore();
+	return Object.values(store).sort((a, b) => a.name.localeCompare(b.name));
 }
 /**
  * Check if an MCP config exists
  */
 export function mcpConfigExists(name) {
-    const store = loadStore();
-    return name in store;
+	const store = loadStore();
+	return name in store;
 }
 /**
  * Get a summary of an MCP config for display
  */
 export function getMCPSummary(config) {
-    if (config.transport === "http") {
-        return `HTTP: ${config.url}`;
-    }
-    else {
-        const parts = [`Stdio: ${config.command}`];
-        if (config.args && config.args.length > 0) {
-            parts.push(`[${config.args.join(" ")}]`);
-        }
-        return parts.join(" ");
-    }
+	if (config.transport === "http") {
+		return `HTTP: ${config.url}`;
+	} else {
+		const parts = [`Stdio: ${config.command}`];
+		if (config.args && config.args.length > 0) {
+			parts.push(`[${config.args.join(" ")}]`);
+		}
+		return parts.join(" ");
+	}
 }

package/dist/lib/port-utils.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Check if a port is available
+ */
+export declare function isPortAvailable(port: number): Promise<boolean>;
+/**
+ * Find the next available port starting from the given port
+ */
+export declare function findAvailablePort(startPort: number, maxAttempts?: number): Promise<number>;

package/dist/lib/port-utils.js

@@ -0,0 +1,35 @@
+import { createServer } from "node:net";
+/**
+ * Check if a port is available
+ */
+export async function isPortAvailable(port) {
+    return new Promise((resolve) => {
+        const server = createServer();
+        server.once("error", (err) => {
+            if (err.code === "EADDRINUSE") {
+                resolve(false);
+            }
+            else {
+                resolve(false);
+            }
+        });
+        server.once("listening", () => {
+            server.close();
+            resolve(true);
+        });
+        server.listen(port);
+    });
+}
+/**
+ * Find the next available port starting from the given port
+ */
+export async function findAvailablePort(startPort, maxAttempts = 10) {
+    for (let i = 0; i < maxAttempts; i++) {
+        const port = startPort + i;
+        const available = await isPortAvailable(port);
+        if (available) {
+            return port;
+        }
+    }
+    throw new Error(`Could not find an available port between ${startPort} and ${startPort + maxAttempts - 1}`);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@townco/cli",
-  "version": "0.1.13",
+  "version": "0.1.14",
   "type": "module",
   "bin": {
     "town": "./dist/index.js"
@@ -19,16 +19,16 @@
     "build": "tsc"
   },
   "devDependencies": {
-    "@townco/tsconfig": "0.1.5",
+    "@townco/tsconfig": "0.1.6",
     "@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.13",
-    "@townco/secret": "0.1.8",
-    "@townco/ui": "0.1.8",
+    "@townco/agent": "0.1.14",
+    "@townco/secret": "0.1.9",
+    "@townco/ui": "0.1.9",
     "@types/inquirer": "^9.0.9",
     "ink": "^6.4.0",
     "ink-text-input": "^6.0.0",