@townco/cli 0.1.13 → 0.1.15

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-add.js

@@ -102,6 +102,34 @@ function HttpUrlStage({ serverName, value, onChange, onNext, onBack, onError, })
     };
     return (_jsx(TextInputStage, { title: `Enter HTTP URL for MCP server: ${serverName}`, value: value, onChange: onChange, onSubmit: handleSubmit, onCancel: onBack, placeholder: "http://localhost:3000/mcp" }));
 }
+function HttpHeadersStage({ serverName, headers, onAddHeader, onNext, onBack, }) {
+    const [headerKeyInput, setHeaderKeyInput] = useState("");
+    const [headerValueInput, setHeaderValueInput] = useState("");
+    const [inputStage, setInputStage] = useState("key");
+    const headerEntries = Object.entries(headers);
+    useInput((_input, key) => {
+        if (key.escape && inputStage === "key") {
+            onBack();
+        }
+    });
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Box, { marginBottom: 1, children: _jsxs(Text, { bold: true, children: ["Add HTTP headers for: ", serverName, " (", headerEntries.length, " added)"] }) }), headerEntries.length > 0 && (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsx(Text, { dimColor: true, children: "Current headers:" }), headerEntries.map(([key, value], index) => (_jsx(Box, { paddingLeft: 2, children: _jsxs(Text, { children: [index + 1, ". ", key, ": ", value] }) }, key)))] })), inputStage === "key" && (_jsxs(_Fragment, { children: [_jsxs(Box, { marginBottom: 1, children: [_jsxs(Text, { children: [">", " Header name: "] }), _jsx(TextInput, { value: headerKeyInput, onChange: setHeaderKeyInput, onSubmit: () => {
+                                    const trimmed = headerKeyInput.trim();
+                                    if (trimmed) {
+                                        setInputStage("value");
+                                    }
+                                    else {
+                                        onNext();
+                                    }
+                                }, placeholder: "Enter header name (or leave empty to continue)" })] }), _jsx(Box, { marginBottom: 1, children: _jsx(Text, { dimColor: true, children: "Enter: Submit header name or continue \u2022 Esc: Back" }) })] })), inputStage === "value" && (_jsxs(_Fragment, { children: [_jsxs(Box, { marginBottom: 1, children: [_jsxs(Text, { children: [">", " Value for ", headerKeyInput, ":", " "] }), _jsx(TextInput, { value: headerValueInput, onChange: setHeaderValueInput, onSubmit: () => {
+                                    const trimmedValue = headerValueInput.trim();
+                                    if (trimmedValue) {
+                                        onAddHeader(headerKeyInput, trimmedValue);
+                                        setHeaderKeyInput("");
+                                        setHeaderValueInput("");
+                                        setInputStage("key");
+                                    }
+                                }, placeholder: "Header value" })] }), _jsx(Box, { marginBottom: 1, children: _jsx(Text, { dimColor: true, children: "Enter: Add header" }) })] }))] }));
+}
 function ReviewStage({ config, onEdit, onSave, onBack }) {
     const [reviewSelection, setReviewSelection] = useState(null);
     const reviewOptions = [
@@ -137,9 +165,13 @@ function ReviewStage({ config, onEdit, onSave, onBack }) {
             label: "Edit URL",
             value: "httpUrl",
             description: "Change the HTTP URL",
+        }, {
+            label: "Edit headers",
+            value: "httpHeaders",
+            description: "Change the HTTP headers",
         });
     }
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { bold: true, children: "Review MCP Server Configuration:" }) }), _jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsxs(Text, { children: [_jsx(Text, { bold: true, children: "Name: " }), config.name] }), _jsxs(Text, { children: [_jsx(Text, { bold: true, children: "Transport: " }), config.transport] }), config.transport === "stdio" && (_jsxs(_Fragment, { children: [_jsxs(Text, { children: [_jsx(Text, { bold: true, children: "Command: " }), config.command] }), config.args && config.args.length > 0 && (_jsxs(_Fragment, { children: [_jsx(Text, { bold: true, children: "Arguments:" }), config.args.map((arg, index) => (_jsx(Box, { paddingLeft: 2, children: _jsxs(Text, { dimColor: true, children: [index + 1, ". ", arg] }) }, arg)))] }))] })), config.transport === "http" && (_jsxs(Text, { children: [_jsx(Text, { bold: true, children: "URL: " }), config.url] }))] }), _jsx(SingleSelect, { options: reviewOptions, selected: reviewSelection, onChange: setReviewSelection, onSubmit: (value) => {
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { bold: true, children: "Review MCP Server Configuration:" }) }), _jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsxs(Text, { children: [_jsx(Text, { bold: true, children: "Name: " }), config.name] }), _jsxs(Text, { children: [_jsx(Text, { bold: true, children: "Transport: " }), config.transport] }), config.transport === "stdio" && (_jsxs(_Fragment, { children: [_jsxs(Text, { children: [_jsx(Text, { bold: true, children: "Command: " }), config.command] }), config.args && config.args.length > 0 && (_jsxs(_Fragment, { children: [_jsx(Text, { bold: true, children: "Arguments:" }), config.args.map((arg, index) => (_jsx(Box, { paddingLeft: 2, children: _jsxs(Text, { dimColor: true, children: [index + 1, ". ", arg] }) }, arg)))] }))] })), config.transport === "http" && (_jsxs(_Fragment, { children: [_jsxs(Text, { children: [_jsx(Text, { bold: true, children: "URL: " }), config.url] }), config.headers && Object.keys(config.headers).length > 0 && (_jsxs(_Fragment, { children: [_jsx(Text, { bold: true, children: "Headers:" }), Object.entries(config.headers).map(([key, value], index) => (_jsx(Box, { paddingLeft: 2, children: _jsxs(Text, { dimColor: true, children: [index + 1, ". ", key, ": ", value] }) }, key)))] }))] }))] }), _jsx(SingleSelect, { options: reviewOptions, selected: reviewSelection, onChange: setReviewSelection, onSubmit: (value) => {
                     setReviewSelection(value);
                     if (value === "continue") {
                         onSave();
@@ -148,7 +180,8 @@ function ReviewStage({ config, onEdit, onSave, onBack }) {
                         value === "transport" ||
                         value === "stdioCommand" ||
                         value === "stdioArgs" ||
-                        value === "httpUrl") {
+                        value === "httpUrl" ||
+                        value === "httpHeaders") {
                         onEdit(value);
                     }
                 }, onCancel: onBack })] }));
@@ -228,7 +261,7 @@ function MCPAddApp({ name: initialName, url: initialUrl, command: initialCommand
         }
         // If URL provided, transport is http
         if (initialUrl) {
-            return initialName ? "review" : "name";
+            return initialName ? "httpHeaders" : "name";
         }
         return "transport";
     };
@@ -278,6 +311,7 @@ function MCPAddApp({ name: initialName, url: initialUrl, command: initialCommand
                 }),
                 ...(config.transport === "http" && {
                     url: config.url,
+                    ...(config.headers && { headers: config.headers }),
                 }),
             };
             // Save to global MCP storage
@@ -390,8 +424,11 @@ function MCPAddApp({ name: initialName, url: initialUrl, command: initialCommand
                 setConfig({ ...config, url });
                 if (isEditingFromReview) {
                     setIsEditingFromReview(false);
+                    setStage("review");
+                }
+                else {
+                    setStage("httpHeaders");
                 }
-                setStage("review");
             }, onBack: () => {
                 if (initialUrl) {
                     exit();
@@ -401,6 +438,18 @@ function MCPAddApp({ name: initialName, url: initialUrl, command: initialCommand
                 }
             }, onError: setSaveError }));
     }
+    // HTTP Headers input stage
+    if (stage === "httpHeaders") {
+        return (_jsx(HttpHeadersStage, { serverName: config.name || "", headers: config.headers || {}, onAddHeader: (key, value) => setConfig({
+                ...config,
+                headers: { ...(config.headers || {}), [key]: value },
+            }), onNext: () => {
+                if (isEditingFromReview) {
+                    setIsEditingFromReview(false);
+                }
+                setStage("review");
+            }, onBack: () => setStage("httpUrl") }));
+    }
     // Review stage
     if (stage === "review") {
         return (_jsx(ReviewStage, { config: config, onEdit: (editStage) => {
@@ -413,7 +462,7 @@ function MCPAddApp({ name: initialName, url: initialUrl, command: initialCommand
                     setStage("stdioArgs");
                 }
                 else {
-                    setStage("httpUrl");
+                    setStage("httpHeaders");
                 }
             } }));
     }

package/dist/commands/mcp-list.js

@@ -42,7 +42,9 @@ function MCPListApp() {
     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" }) })] }));
+    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] }), config.headers && Object.keys(config.headers).length > 0 && (_jsxs(Text, { children: ["Headers:", " ", Object.entries(config.headers)
+                                            .map(([key, value]) => `${key}: ${value}`)
+                                            .join(", ")] }))] })) : (_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

package/dist/commands/run.js

@@ -1,10 +1,40 @@
+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 } from "react";
+import { TabbedOutput } from "../components/TabbedOutput.js";
+import { findAvailablePort } from "../lib/port-utils.js";
+function GuiRunner({ agentProcess, guiProcess, agentPort, onExit, }) {
+    const browserOpenedRef = useRef(false);
+    const handlePortDetected = useCallback((processIndex, port) => {
+        // Process index 1 is the GUI process
+        if (processIndex === 1) {
+            // 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 will be detected dynamically
+    ], [agentProcess, guiProcess, agentPort]);
+    return (_jsx(TabbedOutput, { processes: processes, onExit: onExit, onPortDetected: handlePortDetected }));
+}
 async function loadEnvVars() {
     const envPath = join(homedir(), ".config", "town", ".env");
     const envVars = {};
@@ -42,7 +72,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 +86,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 +146,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

@@ -4,6 +4,7 @@ export type MCPConfig = {
     command?: string;
     args?: string[];
     url?: string;
+    headers?: Record<string, string>;
 };
 /**
  * Save an MCP config to the store

package/dist/lib/mcp-storage.js

@@ -95,7 +95,11 @@ export function mcpConfigExists(name) {
  */
 export function getMCPSummary(config) {
     if (config.transport === "http") {
-        return `HTTP: ${config.url}`;
+        const parts = [`HTTP: ${config.url}`];
+        if (config.headers && Object.keys(config.headers).length > 0) {
+            parts.push(`(${Object.keys(config.headers).length} header${Object.keys(config.headers).length === 1 ? "" : "s"})`);
+        }
+        return parts.join(" ");
     }
     else {
         const parts = [`Stdio: ${config.command}`];

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.15",
   "type": "module",
   "bin": {
     "town": "./dist/index.js"
@@ -19,16 +19,16 @@
     "build": "tsc"
   },
   "devDependencies": {
-    "@townco/tsconfig": "0.1.5",
+    "@townco/tsconfig": "0.1.7",
     "@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.15",
+    "@townco/secret": "0.1.10",
+    "@townco/ui": "0.1.10",
     "@types/inquirer": "^9.0.9",
     "ink": "^6.4.0",
     "ink-text-input": "^6.0.0",