@katyella/legio 0.1.0

package/src/server/index.ts

@@ -0,0 +1,317 @@
+import { spawn } from "node:child_process";
+import { access, readFile } from "node:fs/promises";
+import * as http from "node:http";
+import { dirname, extname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+import { WebSocketServer } from "ws";
+import type { HeadlessCoordinator } from "./headless.ts";
+import { handleApiRequest } from "./routes.ts";
+import { createWebSocketManager, type WebSocketData } from "./websocket.ts";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+export interface ServerOptions {
+	port: number;
+	host: string;
+	root: string; // Project root directory
+	shouldOpen?: boolean; // Auto-open browser
+	autoStartCoordinator?: boolean; // Auto-start coordinator with --watchdog on server start
+}
+
+/** Dependency injection for testing. */
+export interface ServerDeps {
+	/** Inject a custom coordinator start function (for testing). */
+	_tryStartCoordinator?: (root: string) => Promise<void>;
+}
+
+export interface ServerInstance {
+	port: number;
+	stop(force?: boolean): void;
+}
+
+const MIME_TYPES: Record<string, string> = {
+	".html": "text/html",
+	".js": "application/javascript",
+	".css": "text/css",
+	".json": "application/json",
+	".png": "image/png",
+	".svg": "image/svg+xml",
+	".ico": "image/x-icon",
+	".txt": "text/plain",
+};
+
+function fileExists(filePath: string): Promise<boolean> {
+	return access(filePath).then(
+		() => true,
+		() => false,
+	);
+}
+
+function collectBody(req: http.IncomingMessage): Promise<Buffer> {
+	return new Promise((resolve, reject) => {
+		const chunks: Buffer[] = [];
+		req.on("data", (chunk: Buffer) => chunks.push(chunk));
+		req.on("end", () => resolve(Buffer.concat(chunks)));
+		req.on("error", reject);
+	});
+}
+
+async function sendWebResponse(webRes: Response, res: http.ServerResponse): Promise<void> {
+	res.statusCode = webRes.status;
+	webRes.headers.forEach((value, key) => {
+		res.setHeader(key, value);
+	});
+	const body = await webRes.arrayBuffer();
+	res.end(Buffer.from(body));
+}
+
+/**
+ * Check if coordinator is running and start it if not.
+ * Fire-and-forget: caller does not await.
+ */
+async function tryStartCoordinator(root: string): Promise<void> {
+	// Check if coordinator is already running
+	const statusProc = spawn("legio", ["coordinator", "status", "--json"], {
+		cwd: root,
+		stdio: ["ignore", "pipe", "pipe"],
+	});
+
+	const chunks: Buffer[] = [];
+	statusProc.stdout?.on("data", (chunk: Buffer) => chunks.push(chunk));
+
+	const statusCode = await new Promise<number>((resolve) => {
+		statusProc.on("close", (code) => resolve(code ?? 1));
+	});
+
+	if (statusCode === 0) {
+		const output = Buffer.concat(chunks).toString();
+		try {
+			const status = JSON.parse(output) as { running?: boolean };
+			if (status.running) {
+				process.stdout.write("[legio] Coordinator already running\n");
+				return;
+			}
+		} catch {
+			// Cannot parse status — fall through to start
+		}
+	}
+
+	// Start coordinator detached so the server doesn't wait on it
+	const startProc = spawn("legio", ["coordinator", "start", "--watchdog", "--no-attach"], {
+		cwd: root,
+		detached: true,
+		stdio: "ignore",
+	});
+	startProc.unref();
+	process.stdout.write("[legio] Coordinator started\n");
+}
+
+/**
+ * Create and return a server instance without blocking.
+ * Exported for testing; production code should use startServer().
+ */
+export async function createServer(
+	options: ServerOptions,
+	deps?: ServerDeps,
+): Promise<ServerInstance> {
+	const { port, host, root } = options;
+	const legioDir = join(root, ".legio");
+	process.stdout.write(`[legio] Server legioDir: ${legioDir}\n`);
+	const publicDir = join(__dirname, "public");
+
+	const wsManager = createWebSocketManager(legioDir);
+
+	let firstRequest = true;
+
+	// Headless coordinator state — shared across all requests
+	let headlessCoordinator: HeadlessCoordinator | null = null;
+	const headlessState = {
+		get coordinator(): HeadlessCoordinator | null {
+			return headlessCoordinator;
+		},
+		setCoordinator(c: HeadlessCoordinator | null): void {
+			headlessCoordinator = c;
+		},
+	};
+
+	const httpServer = http.createServer(async (req, res) => {
+		try {
+			const urlStr = `http://${req.headers.host ?? "localhost"}${req.url ?? "/"}`;
+			const url = new URL(urlStr);
+			const pathname = url.pathname;
+
+			// WebSocket upgrade requests are handled by the upgrade event, not here
+			if (pathname === "/ws") {
+				res.writeHead(400);
+				res.end("WebSocket upgrade required");
+				return;
+			}
+
+			// API routes
+			if (pathname.startsWith("/api/")) {
+				if (firstRequest) {
+					firstRequest = false;
+					process.stdout.write(`[legio] First API request — legioDir: ${legioDir}\n`);
+				}
+				try {
+					const body = await collectBody(req);
+					const headers = new Headers();
+					for (const [key, value] of Object.entries(req.headers)) {
+						if (value !== undefined) {
+							if (Array.isArray(value)) {
+								for (const v of value) headers.append(key, v);
+							} else {
+								headers.set(key, value);
+							}
+						}
+					}
+
+					const webReq = new Request(urlStr, {
+						method: req.method ?? "GET",
+						headers,
+						body: body.length > 0 ? body.toString("utf8") : undefined,
+					});
+
+					const webRes = await handleApiRequest(webReq, legioDir, root, wsManager, headlessState);
+					await sendWebResponse(webRes, res);
+				} catch (err) {
+					const message = err instanceof Error ? err.message : "Internal server error";
+					res.writeHead(500, { "Content-Type": "application/json" });
+					res.end(JSON.stringify({ error: message }));
+				}
+				return;
+			}
+
+			// Static files
+			const filePath =
+				pathname === "/" ? join(publicDir, "index.html") : join(publicDir, pathname.slice(1));
+
+			if (await fileExists(filePath)) {
+				const content = await readFile(filePath);
+				const ext = extname(filePath);
+				const mimeType = MIME_TYPES[ext] ?? "application/octet-stream";
+				res.writeHead(200, { "Content-Type": mimeType, "Cache-Control": "no-cache" });
+				res.end(content);
+				return;
+			}
+
+			// SPA fallback — serve index.html for non-file paths (hash routing)
+			const indexPath = join(publicDir, "index.html");
+			if (await fileExists(indexPath)) {
+				const content = await readFile(indexPath);
+				res.writeHead(200, { "Content-Type": "text/html", "Cache-Control": "no-cache" });
+				res.end(content);
+				return;
+			}
+
+			res.writeHead(404);
+			res.end("Not found");
+		} catch (err) {
+			const message = err instanceof Error ? err.message : "Server error";
+			res.writeHead(500);
+			res.end(message);
+		}
+	});
+
+	const wss = new WebSocketServer({ noServer: true });
+
+	httpServer.on("upgrade", (req, socket, head) => {
+		const urlStr = `http://${req.headers.host ?? "localhost"}${req.url ?? "/"}`;
+		const url = new URL(urlStr);
+		if (url.pathname === "/ws") {
+			wss.handleUpgrade(req, socket as import("node:net").Socket, head, (ws) => {
+				wss.emit("connection", ws, req);
+			});
+		} else {
+			socket.destroy();
+		}
+	});
+
+	wss.on("connection", (ws) => {
+		const _data: WebSocketData = { connectedAt: new Date().toISOString() };
+		wsManager.addClient(ws);
+		ws.on("message", (message) => {
+			wsManager.handleMessage(ws, message);
+		});
+		ws.on("close", () => {
+			wsManager.removeClient(ws);
+		});
+	});
+
+	// Start WebSocket polling
+	wsManager.startPolling();
+
+	// Start listening and wait for the port to be assigned
+	await new Promise<void>((resolve, reject) => {
+		httpServer.once("listening", resolve);
+		httpServer.once("error", reject);
+		httpServer.listen(port, host);
+	});
+
+	const address = httpServer.address();
+	const actualPort = typeof address === "object" && address !== null ? address.port : port;
+
+	// Fire-and-forget coordinator auto-start (after server is listening)
+	if (options.autoStartCoordinator) {
+		const coordinatorFn = deps?._tryStartCoordinator ?? tryStartCoordinator;
+		coordinatorFn(root).catch((err) => {
+			process.stderr.write(
+				`[legio] Failed to start coordinator: ${err instanceof Error ? err.message : String(err)}\n`,
+			);
+		});
+	}
+
+	return {
+		port: actualPort,
+		stop(_force?: boolean) {
+			wsManager.stopPolling();
+			wss.close();
+			httpServer.close();
+			// Stop headless coordinator if running
+			if (headlessCoordinator?.isRunning()) {
+				headlessCoordinator.stop().catch(() => {
+					// ignore stop errors during server shutdown
+				});
+			}
+		},
+	};
+}
+
+export async function startServer(options: ServerOptions): Promise<void> {
+	const { host, shouldOpen } = options;
+
+	const server = await createServer(options);
+
+	// When running as a daemon, the PID file was written by the parent with the
+	// shim wrapper's PID. The shim re-execs via spawnSync, so the actual server
+	// runs in a grandchild process with a different PID. Overwrite the PID file
+	// with our real PID so that `legio server stop` sends SIGTERM to the right
+	// process.
+	if (process.env.LEGIO_SERVER_DAEMON === "1") {
+		const { writeServerPid } = await import("../commands/server.ts");
+		await writeServerPid(options.root, process.pid);
+	}
+
+	const url = `http://${host}:${server.port}`;
+	process.stdout.write(`Legio web UI running at ${url}\n`);
+
+	if (shouldOpen) {
+		// Open browser (macOS: open, Linux: xdg-open)
+		const cmd = process.platform === "darwin" ? "open" : "xdg-open";
+		const child = spawn(cmd, [url], { detached: true, stdio: "ignore" });
+		child.unref();
+	}
+
+	// Graceful shutdown
+	const shutdown = () => {
+		process.stdout.write("\nShutting down server...\n");
+		server.stop(true);
+		process.exit(0);
+	};
+
+	process.on("SIGINT", shutdown);
+	process.on("SIGTERM", shutdown);
+
+	// http.createServer + listen keeps the process alive naturally via the event loop.
+	// No need to await an infinite promise.
+}

package/src/server/public/app.js

@@ -0,0 +1,187 @@
+// Legio Web UI — Core Application (Preact + HTM + Tailwind)
+// ES module: imports from lib/ siblings and all views from views/.
+
+import { html } from "htm/preact";
+import { render } from "preact";
+import { useEffect, useState } from "preact/hooks";
+import { fetchJson } from "./lib/api.js";
+import { appState, setLastUpdated } from "./lib/state.js";
+import { timeAgo } from "./lib/utils.js";
+import { connectWS } from "./lib/ws.js";
+import { CostsView } from "./views/costs.js";
+import { DashboardView } from "./views/dashboard.js";
+import { InspectView } from "./views/inspect.js";
+import { IssuesView } from "./views/issues.js";
+import { SetupView } from "./views/setup.js";
+import { TaskDetailView } from "./views/task-detail.js";
+
+// ===== Initial Data Fetch =====
+
+export async function initData() {
+	const since24h = new Date(Date.now() - 24 * 60 * 60 * 1000).toISOString();
+	try {
+		const [status, mail, agents, events, metrics, mergeQueue, issues] = await Promise.all([
+			fetchJson("/api/status").catch(() => null),
+			fetchJson("/api/mail").catch(() => []),
+			fetchJson("/api/agents").catch(() => []),
+			fetchJson(`/api/events?since=${encodeURIComponent(since24h)}&limit=200`).catch(() => []),
+			fetchJson("/api/metrics").catch(() => []),
+			fetchJson("/api/merge-queue").catch(() => []),
+			fetchJson("/api/issues").catch(() => []),
+		]);
+
+		if (status !== null) appState.status.value = status;
+		appState.agents.value = agents ?? [];
+		appState.mail.value = Array.isArray(mail) ? mail : (mail?.recent ?? []);
+		appState.events.value = events ?? [];
+		appState.metrics.value = metrics ?? [];
+		appState.mergeQueue.value = mergeQueue ?? [];
+		appState.issues.value = issues ?? [];
+		setLastUpdated();
+	} catch (e) {
+		console.error("[legio] initData error:", e);
+	}
+}
+
+// ===== Hash Router Helpers =====
+
+function parseHash(hash) {
+	const withoutHash = (hash || "#dashboard").replace(/^#\/?/, "");
+	const parts = withoutHash.split("/");
+	return { view: parts[0] || "dashboard", param: parts[1] ?? null };
+}
+
+// ===== Router =====
+
+function Router({ view, param }) {
+	switch (view) {
+		case "dashboard":
+			return html`<${DashboardView} />`;
+		case "costs":
+			return html`<${CostsView} metrics=${appState.metrics.value} snapshots=${appState.snapshots.value} />`;
+		case "tasks":
+			return html`<${IssuesView} />`;
+		case "task":
+			return html`<${TaskDetailView} taskId=${param} />`;
+		case "inspect":
+			return html`<${InspectView} agentName=${param} />`;
+		default:
+			return html`<${DashboardView} />`;
+	}
+}
+
+// ===== Layout =====
+
+const NAV_LINKS = [
+	{ href: "#dashboard", label: "Dashboard", view: "dashboard" },
+	{ href: "#costs", label: "Costs", view: "costs" },
+	{ href: "#tasks", label: "Tasks", view: "tasks" },
+];
+
+function Layout({ view, param }) {
+	const connected = appState.connected.value;
+	const lastUpdated = appState.lastUpdated.value;
+
+	return html`
+		<div class="flex flex-col h-screen bg-[#0f0f0f]">
+			<nav class="flex items-center justify-between px-4 border-b border-[#2a2a2a] bg-[#1a1a1a] shrink-0">
+				<div class="flex items-center">
+					${NAV_LINKS.map((link) => {
+						const isActive = link.view === view;
+						return html`
+							<a
+								key=${link.view}
+								href=${link.href}
+								class=${
+									"px-4 py-3 text-sm font-medium transition-colors border-b-2 " +
+									(isActive
+										? "text-white border-[#E64415]"
+										: "text-[#888] border-transparent hover:text-[#ccc]")
+								}
+							>
+								${link.label}
+							</a>
+						`;
+					})}
+				</div>
+				<div class="flex items-center gap-3 pr-2">
+					<span
+						class=${`w-2 h-2 rounded-full ${connected ? "bg-green-500" : "bg-[#444]"}`}
+						title=${connected ? "WebSocket connected" : "WebSocket disconnected"}
+					></span>
+					${
+						lastUpdated
+							? html`
+						<span class="text-[#555] text-xs font-mono">${timeAgo(lastUpdated)}</span>
+					`
+							: null
+					}
+				</div>
+			</nav>
+			<main class="flex-1 overflow-auto min-h-0">
+				<${Router} key=${view} view=${view} param=${param} />
+			</main>
+		</div>
+	`;
+}
+
+// ===== App =====
+
+function App() {
+	const [route, setRoute] = useState(() => parseHash(location.hash));
+	const [setupChecked, setSetupChecked] = useState(false);
+	const [isInitialized, setIsInitialized] = useState(true); // assume initialized until checked
+	const [setupStatus, setSetupStatus] = useState(null);
+
+	useEffect(() => {
+		const onHashChange = () => {
+			const hash = location.hash;
+			if (hash === "#issues" || hash === "issues") {
+				window.location.hash = "#tasks";
+				return; // will re-trigger the hash change handler
+			}
+			setRoute(parseHash(hash));
+		};
+		// Redirect legacy #issues hash on initial load
+		if (location.hash === "#issues" || location.hash === "issues") {
+			window.location.hash = "#tasks";
+		}
+		window.addEventListener("hashchange", onHashChange);
+		return () => window.removeEventListener("hashchange", onHashChange);
+	}, []);
+
+	useEffect(() => {
+		connectWS();
+		fetchJson("/api/setup/status")
+			.then((data) => {
+				if (data.projectName) document.title = `Legio \u2014 ${data.projectName}`;
+				setIsInitialized(data.initialized);
+				setSetupStatus(data);
+				setSetupChecked(true);
+				if (data.initialized) initData(); // Only load data if initialized
+			})
+			.catch(() => {
+				setSetupChecked(true);
+				initData(); // Fallback: try loading data anyway
+			});
+	}, []);
+
+	if (!setupChecked)
+		return html`<div class="flex items-center justify-center h-screen bg-[#0f0f0f] text-[#555] text-sm">Loading...</div>`;
+	if (!isInitialized)
+		return html`<${SetupView}
+		onInitialized=${() => {
+			setIsInitialized(true);
+			initData();
+		}}
+		projectRoot=${setupStatus?.projectRoot ?? null}
+	/>`;
+
+	return html`<${Layout} view=${route.view} param=${route.param} />`;
+}
+
+// ===== Mount =====
+
+document.addEventListener("DOMContentLoaded", () => {
+	render(html`<${App} />`, document.getElementById("app"));
+});

package/src/server/public/components/agent-badge.js

@@ -0,0 +1,37 @@
+// Legio Web UI — AgentBadge component
+// Inline badge: agent name + state color dot + capability label.
+// No npm dependencies — uses CDN imports. Served as a static ES module.
+
+import htm from "https://esm.sh/htm@latest";
+import { h } from "https://esm.sh/preact@latest";
+
+const html = htm.bind(h);
+
+// State dot color classes (Tailwind utility classes, Spiegel dark theme)
+const STATE_COLORS = {
+	working: "text-green-500",
+	booting: "text-yellow-500",
+	stalled: "text-red-500",
+	completed: "text-gray-500",
+	zombie: "text-orange-500",
+};
+
+/**
+ * AgentBadge — inline badge showing agent name, state, and capability.
+ *
+ * @param {object} props
+ * @param {string} props.name       - Agent name
+ * @param {string} props.state      - Agent state: working | booting | stalled | completed | zombie
+ * @param {string} props.capability - Agent capability label (e.g. "builder", "scout")
+ */
+export function AgentBadge({ name, state, capability }) {
+	const dotColor = STATE_COLORS[state] || "text-gray-500";
+
+	return html`
+		<span class="inline-flex items-center gap-1.5">
+			<span class=${`${dotColor} leading-none`}>●</span>
+			<span class="font-medium text-[#e5e5e5] text-sm">${name}</span>
+			${capability && html`<span class="text-xs text-gray-500">${capability}</span>`}
+		</span>
+	`;
+}

package/src/server/public/components/data-table.js

@@ -0,0 +1,114 @@
+// Legio Web UI — DataTable component
+// Reusable sortable table: column definitions, sort state, click-to-sort headers.
+// No npm dependencies — uses CDN imports. Served as a static ES module.
+
+import htm from "https://esm.sh/htm@latest";
+import { h } from "https://esm.sh/preact@latest";
+import { useState } from "https://esm.sh/preact@latest/hooks";
+
+const html = htm.bind(h);
+
+/**
+ * DataTable — sortable table with configurable columns and row rendering.
+ *
+ * @param {object} props
+ * @param {Array<{key: string, label: string, render?: function, sortable?: boolean}>} props.columns
+ *   Column definitions. `render(value, row)` is called if provided; otherwise raw value is shown.
+ * @param {Array<object>} props.data         - Array of row data objects
+ * @param {string} [props.defaultSort]       - Key of the column to sort by initially
+ * @param {function} [props.onRowClick]      - Called with row object when a row is clicked
+ */
+export function DataTable({ columns, data, defaultSort, onRowClick }) {
+	const [sortKey, setSortKey] = useState(defaultSort || null);
+	const [sortDir, setSortDir] = useState("asc");
+
+	function handleHeaderClick(col) {
+		if (!col.sortable) return;
+		if (sortKey === col.key) {
+			setSortDir((d) => (d === "asc" ? "desc" : "asc"));
+		} else {
+			setSortKey(col.key);
+			setSortDir("asc");
+		}
+	}
+
+	const sortedData = [...(data || [])].sort((a, b) => {
+		if (!sortKey) return 0;
+		const av = a[sortKey];
+		const bv = b[sortKey];
+		if (av == null && bv == null) return 0;
+		if (av == null) return 1;
+		if (bv == null) return -1;
+		const cmp = String(av).localeCompare(String(bv), undefined, { numeric: true });
+		return sortDir === "asc" ? cmp : -cmp;
+	});
+
+	return html`
+		<div class="w-full overflow-x-auto">
+			<table class="w-full border-collapse text-sm">
+				<thead>
+					<tr class="bg-[#1a1a1a] border-b border-[#2a2a2a]">
+						${columns.map(
+							(col) => html`
+								<th
+									key=${col.key}
+									class=${[
+										"px-3 py-2 text-left text-xs uppercase tracking-wide text-gray-500 select-none",
+										col.sortable ? "cursor-pointer hover:text-[#e5e5e5]" : "",
+									].join(" ")}
+									onClick=${() => handleHeaderClick(col)}
+								>
+									<span class="flex items-center gap-1">
+										${col.label}
+										${
+											col.sortable &&
+											sortKey === col.key &&
+											html`<span class="text-[#E64415]">
+											${sortDir === "asc" ? "↑" : "↓"}
+										</span>`
+										}
+									</span>
+								</th>
+							`,
+						)}
+					</tr>
+				</thead>
+				<tbody>
+					${sortedData.map(
+						(row, i) => html`
+							<tr
+								key=${i}
+								class=${[
+									"border-b border-[#1a1a1a] transition-colors",
+									onRowClick ? "cursor-pointer hover:bg-[#222]" : "hover:bg-[#222]",
+								].join(" ")}
+								onClick=${onRowClick ? () => onRowClick(row) : undefined}
+							>
+								${columns.map(
+									(col) => html`
+										<td key=${col.key} class="px-3 py-2 text-[#e5e5e5]">
+											${col.render ? col.render(row[col.key], row) : (row[col.key] ?? "")}
+										</td>
+									`,
+								)}
+							</tr>
+						`,
+					)}
+					${
+						sortedData.length === 0 &&
+						html`
+						<tr>
+							<td
+								colspan=${columns.length}
+								class="px-3 py-6 text-center text-gray-500 text-sm"
+							>
+								No data
+							</td>
+						</tr>
+					`
+					}
+				</tbody>
+			</table>
+		</div>
+	`;
+}