@katyella/legio 0.1.0

package/src/server/public/components/terminal-panel.js

@@ -0,0 +1,140 @@
+// terminal-panel.js — Standalone TerminalPanel component
+// Extracted from coordinator-chat.js so ChatView (and others) can use it independently.
+
+import { html, useEffect, useRef, useState } from "../lib/preact-setup.js";
+
+function stripAnsi(str) {
+	// biome-ignore lint/suspicious/noControlCharactersInRegex: intentional ANSI escape strip
+	return str.replace(/\x1b\[[0-9;]*[mGKHF]/g, "");
+}
+
+function diffCapture(baselineText, currentText) {
+	const baselineLines = baselineText.trimEnd().split("\n");
+	const currentLines = currentText.trimEnd().split("\n");
+	const anchorLen = Math.min(3, baselineLines.length);
+	const anchor = baselineLines.slice(-anchorLen);
+
+	// Search for the anchor sequence in current capture (prefer latest match)
+	for (let i = currentLines.length - anchorLen; i >= 0; i--) {
+		let match = true;
+		for (let j = 0; j < anchorLen; j++) {
+			if (currentLines[i + j] !== anchor[j]) {
+				match = false;
+				break;
+			}
+		}
+		if (match) {
+			return currentLines.slice(i + anchorLen).join("\n");
+		}
+	}
+	// Baseline scrolled off — show tail
+	return currentLines.slice(-20).join("\n");
+}
+
+// TerminalPanel — collapsible terminal capture sub-component
+// Props:
+//   chatTarget {string} — agent name to capture terminal from
+//   thinking   {boolean} — when true, streams diff-based new output
+export function TerminalPanel({ chatTarget, thinking }) {
+	const [expanded, setExpanded] = useState(false);
+	const [streamText, setStreamText] = useState("");
+	const [loading, setLoading] = useState(false);
+	const baselineCaptureRef = useRef(null);
+	const terminalRef = useRef(null);
+
+	// Reset when chatTarget changes
+	useEffect(() => {
+		setStreamText("");
+		setLoading(false);
+		baselineCaptureRef.current = null;
+	}, [chatTarget]);
+
+	// Poll terminal capture when thinking OR expanded; clear when neither
+	useEffect(() => {
+		if (!thinking && !expanded) {
+			setStreamText("");
+			setLoading(false);
+			baselineCaptureRef.current = null;
+			return;
+		}
+
+		let cancelled = false;
+		setLoading(true);
+
+		async function pollCapture() {
+			try {
+				const res = await fetch(`/api/terminal/capture?agent=${chatTarget}&lines=80`);
+				if (!res.ok || cancelled) return;
+				const data = await res.json();
+				const output = stripAnsi(data.output || "");
+				if (!cancelled) setLoading(false);
+
+				if (thinking) {
+					// Streaming mode: diff against baseline to show new output
+					if (baselineCaptureRef.current === null) {
+						baselineCaptureRef.current = output;
+						return;
+					}
+					const delta = diffCapture(baselineCaptureRef.current, output);
+					if (!cancelled && delta.trim()) {
+						setStreamText(delta);
+					}
+				} else {
+					// Expanded viewer mode: show full terminal capture directly
+					if (!cancelled && output.trim()) {
+						setStreamText(output);
+					}
+				}
+			} catch (_err) {
+				// non-fatal — capture may fail if coordinator tmux not ready
+			}
+		}
+
+		pollCapture();
+		const interval = setInterval(pollCapture, 1500);
+		return () => {
+			cancelled = true;
+			clearInterval(interval);
+		};
+	}, [thinking, expanded, chatTarget]);
+
+	// Auto-scroll terminal to bottom when new output arrives
+	useEffect(() => {
+		const el = terminalRef.current;
+		if (el) el.scrollTop = el.scrollHeight;
+	}, [streamText]);
+
+	return html`
+		<div class="border-t border-[#2a2a2a] shrink-0">
+			<div
+				class="flex items-center gap-2 px-3 py-1.5 cursor-pointer hover:bg-white/5"
+				onClick=${() => setExpanded((prev) => !prev)}
+			>
+				<span
+					class=${
+						"w-2 h-2 rounded-full flex-shrink-0 " +
+						(thinking ? "bg-yellow-500 animate-pulse" : "bg-[#333]")
+					}
+				></span>
+				<span class="text-xs text-[#666]">Terminal</span>
+				${thinking ? html`<span class="text-xs text-yellow-500 animate-pulse">active</span>` : null}
+				<span class="ml-auto text-xs text-[#444]">${expanded ? "\u25b2" : "\u25bc"}</span>
+			</div>
+			${
+				expanded
+					? html`
+					<div ref=${terminalRef} class="max-h-[200px] overflow-y-auto px-3 pb-2">
+						${
+							streamText
+								? html`<pre class="text-xs text-[#ccc] font-mono whitespace-pre-wrap break-words">${streamText}</pre>`
+								: loading
+									? html`<div class="text-xs text-[#666] py-1 italic animate-pulse">Connecting...</div>`
+									: html`<div class="text-xs text-[#444] py-1 italic">No output yet</div>`
+						}
+					</div>
+				`
+					: null
+			}
+		</div>
+	`;
+}

package/src/server/public/index.html

@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="en" class="dark">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Legio</title>
+  <link rel="icon" href="/favicon.ico" sizes="any">
+  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
+  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script>
+    tailwind.config = {
+      darkMode: 'class',
+      theme: {
+        extend: {
+          colors: {
+            surface: '#1a1a1a',
+            border: '#2a2a2a',
+            accent: '#E64415',
+          },
+          fontFamily: {
+            sans: ['system-ui', '-apple-system', 'sans-serif'],
+            mono: ['ui-monospace', 'SFMono-Regular', 'monospace'],
+          }
+        }
+      }
+    }
+  </script>
+  <script type="importmap">
+  {
+    "imports": {
+      "preact": "https://esm.sh/preact@10.25.4",
+      "preact/": "https://esm.sh/preact@10.25.4/",
+      "preact/hooks": "https://esm.sh/preact@10.25.4/hooks",
+      "@preact/signals": "https://esm.sh/@preact/signals@1.3.1",
+      "htm": "https://esm.sh/htm@3.1.1",
+      "htm/preact": "https://esm.sh/htm@3.1.1/preact",
+      "marked": "https://esm.sh/marked@15.0.7"
+    }
+  }
+  </script>
+  <style>
+    body { background: #0f0f0f; color: #e5e5e5; margin: 0; }
+    .chat-markdown p { margin: 0.25em 0; }
+    .chat-markdown h1 { font-weight: 600; font-size: 1.25em; margin: 0.5em 0 0.25em; }
+    .chat-markdown h2 { font-weight: 600; font-size: 1.1em; margin: 0.5em 0 0.25em; }
+    .chat-markdown h3 { font-weight: 600; font-size: 1em; margin: 0.5em 0 0.25em; }
+    .chat-markdown ul, .chat-markdown ol { padding-left: 1.5em; margin: 0.25em 0; }
+    .chat-markdown code { background: #2a2a2a; padding: 0.1em 0.3em; border-radius: 3px; font-size: 0.9em; }
+    .chat-markdown pre { background: #1a1a1a; border: 1px solid #2a2a2a; padding: 0.75em; border-radius: 4px; overflow-x: auto; margin: 0.5em 0; }
+    .chat-markdown pre code { background: none; padding: 0; border-radius: 0; }
+    .chat-markdown a { color: #60a5fa; text-decoration: underline; }
+    .chat-markdown blockquote { border-left: 3px solid #2a2a2a; padding-left: 0.75em; color: #999; margin: 0.5em 0; }
+    .chat-markdown table { border-collapse: collapse; margin: 0.5em 0; }
+    .chat-markdown th, .chat-markdown td { border: 1px solid #2a2a2a; padding: 0.25em 0.5em; }
+    .chat-markdown th { background: #1a1a1a; }
+  </style>
+</head>
+<body class="bg-[#0f0f0f] text-[#e5e5e5] min-h-screen">
+  <div id="app"></div>
+  <script type="module" src="/app.js"></script>
+</body>
+</html>

package/src/server/public/lib/api.js

@@ -0,0 +1,35 @@
+// Legio Web UI — Fetch Helpers
+// Thin wrappers around the Fetch API. No Preact dependencies.
+
+/**
+ * Fetch a URL as JSON. Throws on non-OK HTTP status.
+ */
+export async function fetchJson(url) {
+	const res = await fetch(url);
+	if (!res.ok) {
+		throw new Error(`HTTP ${res.status} for ${url}`);
+	}
+	return res.json();
+}
+
+/**
+ * POST JSON to a URL. Throws on non-OK HTTP status, including error body.
+ */
+export async function postJson(url, body) {
+	const res = await fetch(url, {
+		method: "POST",
+		headers: { "Content-Type": "application/json" },
+		body: JSON.stringify(body),
+	});
+	if (!res.ok) {
+		let msg = `HTTP ${res.status}`;
+		try {
+			const err = await res.json();
+			if (err.error) msg = err.error;
+		} catch (_e) {
+			// ignore parse failure — use default message
+		}
+		throw new Error(msg);
+	}
+	return res.json();
+}

package/src/server/public/lib/markdown.js

@@ -0,0 +1,8 @@
+import { marked } from "marked";
+
+marked.setOptions({ breaks: true, gfm: true });
+
+export function renderMarkdown(text) {
+	if (!text) return "";
+	return marked.parse(text);
+}

package/src/server/public/lib/preact-setup.js

@@ -0,0 +1,8 @@
+// Legio Web UI — Preact setup barrel re-export.
+// Re-exports Preact primitives for view components.
+// Uses bare specifiers resolved by the importmap in index.html.
+
+export { computed, signal } from "@preact/signals";
+export { html } from "htm/preact";
+export { h, render } from "preact";
+export { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "preact/hooks";

package/src/server/public/lib/state.js

@@ -0,0 +1,99 @@
+// Legio Web UI — Reactive State (Preact Signals)
+// All UI state lives here as signals so components re-render automatically.
+
+import { computed, signal } from "@preact/signals";
+
+export const appState = {
+	agents: signal([]),
+	mail: signal([]),
+	mergeQueue: signal([]),
+	metrics: signal([]),
+	snapshots: signal([]),
+	runs: signal({ active: null, list: [] }),
+	events: signal([]),
+	errors: signal([]),
+	issues: signal([]),
+	audit: signal([]),
+	config: signal(null),
+	status: signal(null),
+	connected: signal(false),
+	lastUpdated: signal(null),
+	selectedAgent: signal(null),
+	inspectAgent: signal(null),
+	inspectData: signal(null),
+	selectedPair: signal(null),
+	collapsedThreads: signal(new Set()),
+	coordinator: signal(null),
+	pendingChatContext: signal(null),
+};
+
+export function setConnected(value) {
+	appState.connected.value = value;
+}
+
+export function setLastUpdated() {
+	appState.lastUpdated.value = new Date().toISOString();
+}
+
+// Computed: agents that are working or booting
+export const activeAgents = computed(() =>
+	appState.agents.value.filter((a) => a.state === "working" || a.state === "booting"),
+);
+
+// Computed: count of unread mail messages
+export const unreadMailCount = computed(() => appState.mail.value.filter((m) => !m.readAt).length);
+
+// Agent activity events detected from WebSocket snapshot diffs
+export const agentActivityLog = signal([]);
+
+/**
+ * Compare two agent arrays and append activity events to agentActivityLog.
+ * Detects: spawned (new agent), state_change, removed.
+ * Keeps a max of 200 entries (trims from front).
+ */
+export function recordAgentDiff(prevAgents, nextAgents) {
+	const prevMap = new Map((prevAgents ?? []).map((a) => [a.agentName ?? a.name, a]));
+	const nextMap = new Map((nextAgents ?? []).map((a) => [a.agentName ?? a.name, a]));
+	const events = [];
+	const timestamp = new Date().toISOString();
+
+	for (const [name, next] of nextMap) {
+		const prev = prevMap.get(name);
+		if (!prev) {
+			events.push({
+				type: "spawned",
+				agent: name,
+				capability: next.capability ?? null,
+				beadId: next.beadId ?? next.taskId ?? null,
+				timestamp,
+			});
+		} else if (prev.state !== next.state) {
+			events.push({
+				type: "state_change",
+				agent: name,
+				capability: next.capability ?? null,
+				from: prev.state,
+				to: next.state,
+				beadId: next.beadId ?? next.taskId ?? null,
+				timestamp,
+			});
+		}
+	}
+
+	for (const [name, prev] of prevMap) {
+		if (!nextMap.has(name)) {
+			events.push({
+				type: "removed",
+				agent: name,
+				capability: prev.capability ?? null,
+				beadId: prev.beadId ?? prev.taskId ?? null,
+				timestamp,
+			});
+		}
+	}
+
+	if (events.length === 0) return;
+
+	const combined = [...agentActivityLog.value, ...events];
+	agentActivityLog.value = combined.length > 200 ? combined.slice(combined.length - 200) : combined;
+}

package/src/server/public/lib/utils.js

@@ -0,0 +1,309 @@
+// Legio Web UI — Utility Functions
+// Pure functions with no external dependencies.
+
+/**
+ * Format a duration in milliseconds to a human-readable string.
+ * e.g. 500 -> "< 1s", 5000 -> "5s", 90000 -> "1m 30s", 3700000 -> "1h 1m"
+ */
+export function formatDuration(ms) {
+	if (ms < 1000) return "< 1s";
+	const s = Math.floor(ms / 1000);
+	const m = Math.floor(s / 60);
+	const h = Math.floor(m / 60);
+	if (h > 0) return `${h}h ${m % 60}m`;
+	if (m > 0) return `${m}m ${s % 60}s`;
+	return `${s}s`;
+}
+
+/**
+ * Return a human-readable relative time from an ISO date string.
+ * e.g. "2m ago", "1h ago", "3d ago"
+ */
+export function timeAgo(isoString) {
+	if (!isoString) return "";
+	const diff = Date.now() - new Date(isoString).getTime();
+	if (diff < 0) return "just now";
+	const s = Math.floor(diff / 1000);
+	if (s < 60) return `${s}s ago`;
+	const m = Math.floor(s / 60);
+	if (m < 60) return `${m}m ago`;
+	const h = Math.floor(m / 60);
+	if (h < 24) return `${h}h ago`;
+	const d = Math.floor(h / 24);
+	return `${d}d ago`;
+}
+
+/**
+ * Truncate a string to maxLen characters, appending "..." if needed.
+ */
+export function truncate(str, maxLen) {
+	if (!str) return "";
+	if (str.length <= maxLen) return str;
+	return `${str.slice(0, maxLen - 3)}...`;
+}
+
+/**
+ * Escape HTML special characters to prevent XSS in template literals.
+ * Always use this before inserting user-controlled content into innerHTML.
+ */
+export function escapeHtml(str) {
+	if (str == null) return "";
+	return String(str)
+		.replace(/&/g, "&amp;")
+		.replace(/</g, "&lt;")
+		.replace(/>/g, "&gt;")
+		.replace(/"/g, "&quot;")
+		.replace(/'/g, "&#39;");
+}
+
+/**
+ * Return a Unicode icon for an agent state.
+ */
+export function stateIcon(agentState) {
+	switch (agentState) {
+		case "working":
+			return "●";
+		case "booting":
+			return "◐";
+		case "stalled":
+			return "⚠";
+		case "zombie":
+			return "○";
+		case "completed":
+			return "✓";
+		default:
+			return "?";
+	}
+}
+
+/**
+ * Return a Tailwind text color class for an agent state.
+ */
+export function stateColor(agentState) {
+	switch (agentState) {
+		case "working":
+			return "text-green-500";
+		case "booting":
+			return "text-yellow-500";
+		case "stalled":
+			return "text-red-500";
+		case "zombie":
+			return "text-gray-500";
+		case "completed":
+			return "text-blue-500";
+		default:
+			return "text-gray-500";
+	}
+}
+
+/**
+ * Return a Tailwind text color class for a message priority.
+ */
+export function priorityColor(priority) {
+	switch (priority) {
+		case "urgent":
+			return "text-red-500";
+		case "high":
+			return "text-orange-400";
+		case "normal":
+			return "text-gray-300";
+		case "low":
+			return "text-gray-500";
+		default:
+			return "text-gray-300";
+	}
+}
+
+// ===== Agent Color Coding =====
+// Each agent capability gets a distinct color applied to borders, badges, and dots.
+// coordinator=blue, lead=green, builder=purple, scout=orange, reviewer=teal
+
+const AGENT_COLORS = {
+	coordinator: {
+		bg: "bg-blue-500/10",
+		border: "border-blue-500",
+		text: "text-blue-400",
+		dot: "bg-blue-500",
+		avatar: "🎯",
+	},
+	lead: {
+		bg: "bg-green-500/10",
+		border: "border-green-500",
+		text: "text-green-400",
+		dot: "bg-green-500",
+		avatar: "⚡",
+	},
+	builder: {
+		bg: "bg-purple-500/10",
+		border: "border-purple-500",
+		text: "text-purple-400",
+		dot: "bg-purple-500",
+		avatar: "🔧",
+	},
+	scout: {
+		bg: "bg-orange-500/10",
+		border: "border-orange-500",
+		text: "text-orange-400",
+		dot: "bg-orange-500",
+		avatar: "🔍",
+	},
+	reviewer: {
+		bg: "bg-teal-500/10",
+		border: "border-teal-500",
+		text: "text-teal-400",
+		dot: "bg-teal-500",
+		avatar: "📝",
+	},
+};
+
+const DEFAULT_AGENT_COLOR = {
+	bg: "bg-gray-500/10",
+	border: "border-gray-500",
+	text: "text-gray-400",
+	dot: "bg-gray-500",
+	avatar: "💬",
+};
+
+/**
+ * Return the color set for a given agent capability.
+ * Returns DEFAULT_AGENT_COLOR if capability is falsy or not recognized.
+ */
+export function agentColor(capability) {
+	if (!capability) return DEFAULT_AGENT_COLOR;
+	return AGENT_COLORS[capability.toLowerCase()] ?? DEFAULT_AGENT_COLOR;
+}
+
+/**
+ * Infer agent capability from agent name or agents array.
+ * Rules (in priority order):
+ *   1. "coordinator" or "orchestrator" → "coordinator"
+ *   2. Found in agents array → return agent.capability
+ *   3. Name pattern: -lead → "lead", -builder → "builder", -scout → "scout",
+ *      review- prefix or -reviewer → "reviewer"
+ *   4. null if no match
+ */
+export function inferCapability(agentName, agents) {
+	if (!agentName) return null;
+	const lower = agentName.toLowerCase();
+	if (lower === "coordinator" || lower === "orchestrator") return "coordinator";
+	if (agents && agents.length > 0) {
+		const found = agents.find((a) => a.agentName === agentName || a.name === agentName);
+		if (found?.capability) return found.capability;
+	}
+	if (lower.endsWith("-lead")) return "lead";
+	if (lower.endsWith("-builder")) return "builder";
+	if (lower.endsWith("-scout")) return "scout";
+	if (lower.startsWith("review-") || lower.endsWith("-reviewer")) return "reviewer";
+	return null;
+}
+
+/** Mail types that represent agent activity events (not conversational messages). */
+export const ACTIVITY_MAIL_TYPES = new Set([
+	"dispatch",
+	"worker_done",
+	"merge_ready",
+	"merged",
+	"merge_failed",
+	"health_check",
+	"assign",
+]);
+
+/**
+ * Returns true if the given message is an activity-type message.
+ */
+export function isActivityMessage(msg) {
+	return ACTIVITY_MAIL_TYPES.has(msg?.type);
+}
+
+/**
+ * Group consecutive same-type activity messages within 30s into group objects.
+ * Non-activity messages (_isAgentActivity, pending, conversational) pass through
+ * unchanged and break any active group.
+ * Single activity messages with no same-type neighbors within 30s pass through unchanged.
+ *
+ * @param {Array} messages - sorted oldest-first
+ * @returns {Array} Array of Message or GroupedActivity objects
+ */
+export function groupActivityMessages(messages) {
+	const result = [];
+	let i = 0;
+
+	while (i < messages.length) {
+		const msg = messages[i];
+
+		// Non-groupable: _isAgentActivity, pending (has status field), or not an activity type
+		const isGroupable = isActivityMessage(msg) && !msg._isAgentActivity && msg.status == null;
+
+		if (!isGroupable) {
+			result.push(msg);
+			i++;
+			continue;
+		}
+
+		// Scan forward for consecutive same-type activity messages within 30s each
+		const type = msg.type;
+		let j = i + 1;
+
+		while (j < messages.length) {
+			const next = messages[j];
+			const nextGroupable =
+				isActivityMessage(next) && !next._isAgentActivity && next.status == null;
+			if (!nextGroupable) break;
+			if (next.type !== type) break;
+			const timeDiff =
+				new Date(next.createdAt).getTime() - new Date(messages[j - 1].createdAt).getTime();
+			if (timeDiff > 30000) break;
+			j++;
+		}
+
+		const group = messages.slice(i, j);
+
+		if (group.length === 1) {
+			// Solo activity message — pass through unchanged
+			result.push(msg);
+		} else {
+			const firstTimestamp = group[0].createdAt;
+			const lastTimestamp = group[group.length - 1].createdAt;
+			result.push({
+				_isGroup: true,
+				type,
+				children: group,
+				count: group.length,
+				firstTimestamp,
+				lastTimestamp,
+				id: `group-${type}-${firstTimestamp}`,
+			});
+		}
+
+		i = j;
+	}
+
+	return result;
+}
+
+/**
+ * Generate a human-readable summary label for a grouped activity.
+ * @param {{ count: number, type: string }} group
+ * @returns {string}
+ */
+export function groupSummaryLabel(group) {
+	const { count, type } = group;
+	switch (type) {
+		case "dispatch":
+			return `${count} agents dispatched`;
+		case "worker_done":
+			return `${count} agents completed`;
+		case "merge_ready":
+			return `${count} branches ready to merge`;
+		case "merged":
+			return `${count} branches merged`;
+		case "merge_failed":
+			return `${count} merges failed`;
+		case "health_check":
+			return `${count} health checks`;
+		case "assign":
+			return `${count} tasks assigned`;
+		default:
+			return `${count} ${type} events`;
+	}
+}