agent-host-protocol-ui 0.1.0 → 0.1.2

package/README.md

@@ -90,14 +90,22 @@ Launch the UI directly in your browser without cloning or installing:
 npx agent-host-protocol-ui
 ```
 
-You can optionally pre-configure the host URL and specify a port:
+#### CLI Options & External Network Access
 
 ```sh
-# Pre-configure your local or remote host connection
-npx agent-host-protocol-ui --host "ws://127.0.0.1:63877?tkn=your-token"
+# Serve on all network interfaces (0.0.0.0) so it is accessible externally
+npx agent-host-protocol-ui --host 0.0.0.0
+# or:
+npx agent-host-protocol-ui --bind 0.0.0.0
+
+# Pre-configure your local or remote agent host connection
+npx agent-host-protocol-ui --agent-host "ws://127.0.0.1:63877?tkn=your-token"
 
 # Specify a custom port
 npx agent-host-protocol-ui --port 3000
+
+# Run headless without opening local browser (e.g. in remote VM or container)
+npx agent-host-protocol-ui --bind 0.0.0.0 --port 8080 --no-open
 ```
 
 ---

package/bin/cli.js

@@ -3,6 +3,7 @@
 import { exec } from "node:child_process";
 import { existsSync, readFileSync, statSync } from "node:fs";
 import http from "node:http";
+import os from "node:os";
 import path from "node:path";
 import { fileURLToPath } from "node:url";
 
@@ -24,20 +25,70 @@ const MIME_TYPES = {
 	".woff2": "font/woff2",
 };
 
+function getNetworkIps() {
+	const ips = [];
+	try {
+		const interfaces = os.networkInterfaces();
+		for (const name of Object.keys(interfaces)) {
+			const netInterface = interfaces[name];
+			if (!netInterface) continue;
+			for (const iface of netInterface) {
+				if (iface.family === "IPv4" && !iface.internal) {
+					ips.push(iface.address);
+				}
+			}
+		}
+	} catch {
+		// ignore network interface errors
+	}
+	return ips;
+}
+
 // Parse command line arguments
 const args = process.argv.slice(2);
-let port = 5173;
+let port = Number.parseInt(process.env.PORT || "", 10) || 5173;
+let listenHost = process.env.HOST || "localhost";
 let autoOpen = true;
-let hostParam = "";
+let agentHostParam = process.env.AGENT_HOST || "";
 
 for (let i = 0; i < args.length; i++) {
-	const arg = args[i];
+	let arg = args[i];
+	let value;
+	if (arg.includes("=")) {
+		const eqIdx = arg.indexOf("=");
+		value = arg.slice(eqIdx + 1);
+		arg = arg.slice(0, eqIdx);
+	}
+
 	if (arg === "--port" || arg === "-p") {
-		port = Number.parseInt(args[++i], 10) || 5173;
+		port = Number.parseInt(value ?? args[++i], 10) || 5173;
 	} else if (arg === "--no-open") {
 		autoOpen = false;
+	} else if (arg === "--bind" || arg === "-b" || arg === "--hostname" || arg === "--listen") {
+		listenHost = value ?? args[++i] ?? "0.0.0.0";
 	} else if (arg === "--host" || arg === "-h") {
-		hostParam = args[++i] || "";
+		if (value !== undefined) {
+			if (value.startsWith("ws://") || value.startsWith("wss://")) {
+				agentHostParam = value;
+			} else {
+				listenHost = value;
+			}
+		} else {
+			const next = args[i + 1];
+			if (!next || next.startsWith("-")) {
+				// Flag present without value: bind to 0.0.0.0 (like Vite --host)
+				listenHost = "0.0.0.0";
+			} else {
+				i++;
+				if (next.startsWith("ws://") || next.startsWith("wss://")) {
+					agentHostParam = next;
+				} else {
+					listenHost = next;
+				}
+			}
+		}
+	} else if (arg === "--agent-host" || arg === "--ws" || arg === "-a") {
+		agentHostParam = value ?? args[++i] ?? "";
 	} else if (arg === "--help") {
 		console.log(`
 agent-host-protocol-ui - Client-side UI for Agent Host Protocol
@@ -46,10 +97,17 @@ Usage:
   npx agent-host-protocol-ui [options]
 
 Options:
-  -p, --port <number>     Port to listen on (default: 5173)
-  -h, --host <ws-url>     Pre-configure host WebSocket URL
-  --no-open               Do not automatically open the browser
-  --help                  Show help
+  -b, --bind <address>       Hostname/IP to listen on (e.g. 0.0.0.0 or localhost, default: localhost)
+  --host [address]           Bind to address (default: 0.0.0.0 if flag present without value)
+  -p, --port <number>        Port to listen on (default: 5173 or process.env.PORT)
+  -a, --agent-host <ws-url>  Pre-configure agent host WebSocket URL
+  --no-open                  Do not automatically open the browser
+  --help                     Show help
+
+Environment variables:
+  HOST=<address>             Default hostname/IP to listen on (e.g. 0.0.0.0)
+  PORT=<number>              Default port to listen on
+  AGENT_HOST=<ws-url>        Default agent host WebSocket URL
 `);
 		process.exit(0);
 	}
@@ -107,29 +165,47 @@ server.on("error", (err) => {
 	if (err && typeof err === "object" && "code" in err && err.code === "EADDRINUSE") {
 		console.log(`Port ${port} in use, trying ${port + 1}...`);
 		port++;
-		server.listen(port);
+		server.listen(port, listenHost);
 	} else {
 		console.error("Server error:", err);
 		process.exit(1);
 	}
 });
 
-server.listen(port, () => {
-	let targetUrl = `http://localhost:${port}`;
-	if (hostParam) {
-		targetUrl += `?host=${encodeURIComponent(hostParam)}`;
-	}
+server.listen(port, listenHost, () => {
+	const isWildcard = listenHost === "0.0.0.0" || listenHost === "::";
+	const isLocal = listenHost === "localhost" || listenHost === "127.0.0.1" || listenHost === "::1";
+	const querySuffix = agentHostParam ? `?host=${encodeURIComponent(agentHostParam)}` : "";
+
+	const displayLocalUrl = `http://localhost:${port}${querySuffix}`;
+	const openUrl = isLocal || isWildcard ? displayLocalUrl : `http://${listenHost}:${port}${querySuffix}`;
+	const networkIps = isWildcard ? getNetworkIps() : [];
+
 	console.log(`
 ┌────────────────────────────────────────────────────────┐
 │                                                        │
 │   Agent Host Protocol UI                               │
-│   Running at: ${targetUrl.padEnd(41)}│
-│                                                        │
+│                                                        │`);
+
+	if (isWildcard) {
+		console.log(`│   > Local:   ${displayLocalUrl.padEnd(42)}│`);
+		for (const ip of networkIps) {
+			const netUrl = `http://${ip}:${port}${querySuffix}`;
+			console.log(`│   > Network: ${netUrl.padEnd(42)}│`);
+		}
+	} else if (isLocal) {
+		console.log(`│   > Local:   ${displayLocalUrl.padEnd(42)}│`);
+	} else {
+		const customUrl = `http://${listenHost}:${port}${querySuffix}`;
+		console.log(`│   > Host:    ${customUrl.padEnd(42)}│`);
+	}
+
+	console.log(`│                                                        │
 │   Press Ctrl+C to stop                                 │
 └────────────────────────────────────────────────────────┘
 `);
 	if (autoOpen) {
-		openBrowser(targetUrl);
+		openBrowser(openUrl);
 	}
 });
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "agent-host-protocol-ui",
-	"version": "0.1.0",
+	"version": "0.1.2",
 	"description": "Client-side web UI for the Agent Host Protocol (AHP) inspired by VS Code Agents view",
 	"author": "Yusuke Tsutsumi <yusuke@tsutsumi.io>",
 	"license": "Apache-2.0",