@katyella/legio 0.1.0

package/src/server/public/components/gateway-chat.js

@@ -0,0 +1,256 @@
+// components/gateway-chat.js — GatewayChat embedded component
+// Reusable gateway chat panel extracted from views/gateway.js.
+// Shows terminal output + chat input when gateway is running,
+// or a "Start Gateway" prompt when stopped.
+
+import { html, useCallback, useEffect, useRef, useState } from "../lib/preact-setup.js";
+
+const POLL_INTERVAL_MS = 2500;
+
+export function GatewayChat({ onStatusChange }) {
+	const [running, setRunning] = useState(false);
+	const [tmuxSession, setTmuxSession] = useState(null);
+	const [statusLoading, setStatusLoading] = useState(true);
+	const [actionLoading, setActionLoading] = useState(false);
+	const [actionError, setActionError] = useState("");
+	const [text, setText] = useState("");
+	const [sendError, setSendError] = useState("");
+	const [sending, setSending] = useState(false);
+	const [termOutput, setTermOutput] = useState("");
+	const pollRef = useRef(null);
+	const outputRef = useRef(null);
+
+	const setRunningWithCallback = useCallback(
+		(value) => {
+			setRunning(value);
+			if (onStatusChange) onStatusChange(value);
+		},
+		[onStatusChange],
+	);
+
+	const fetchStatus = useCallback(async () => {
+		try {
+			const res = await fetch("/api/gateway/status");
+			if (res.ok) {
+				const data = await res.json();
+				setRunningWithCallback(data.running);
+				setTmuxSession(data.tmuxSession ?? null);
+			}
+		} catch {
+			// ignore
+		} finally {
+			setStatusLoading(false);
+		}
+	}, [setRunningWithCallback]);
+
+	const fetchTermOutput = useCallback(async () => {
+		try {
+			const res = await fetch("/api/terminal/capture?agent=gateway&lines=100");
+			if (res.ok) {
+				const data = await res.json();
+				setTermOutput(typeof data.output === "string" ? data.output : "");
+				if (outputRef.current) {
+					outputRef.current.scrollTop = outputRef.current.scrollHeight;
+				}
+			}
+		} catch {
+			// ignore
+		}
+	}, []);
+
+	useEffect(() => {
+		fetchStatus();
+	}, [fetchStatus]);
+
+	useEffect(() => {
+		if (running) {
+			fetchTermOutput();
+			pollRef.current = setInterval(fetchTermOutput, POLL_INTERVAL_MS);
+		} else {
+			if (pollRef.current) {
+				clearInterval(pollRef.current);
+				pollRef.current = null;
+			}
+			setTermOutput("");
+		}
+		return () => {
+			if (pollRef.current) {
+				clearInterval(pollRef.current);
+				pollRef.current = null;
+			}
+		};
+	}, [running, fetchTermOutput]);
+
+	const handleStart = useCallback(async () => {
+		setActionLoading(true);
+		setActionError("");
+		try {
+			const res = await fetch("/api/gateway/start", {
+				method: "POST",
+				headers: { "Content-Type": "application/json" },
+				body: JSON.stringify({}),
+			});
+			if (res.ok) {
+				await fetchStatus();
+			} else {
+				const err = await res.json().catch(() => ({}));
+				setActionError(err.error || "Failed to start gateway");
+			}
+		} catch (e) {
+			setActionError(e.message || "Failed to start gateway");
+		} finally {
+			setActionLoading(false);
+		}
+	}, [fetchStatus]);
+
+	const handleStop = useCallback(async () => {
+		setActionLoading(true);
+		setActionError("");
+		try {
+			const res = await fetch("/api/gateway/stop", {
+				method: "POST",
+				headers: { "Content-Type": "application/json" },
+				body: JSON.stringify({}),
+			});
+			if (res.ok) {
+				setRunningWithCallback(false);
+				setTmuxSession(null);
+			} else {
+				const err = await res.json().catch(() => ({}));
+				setActionError(err.error || "Failed to stop gateway");
+			}
+		} catch (e) {
+			setActionError(e.message || "Failed to stop gateway");
+		} finally {
+			setActionLoading(false);
+		}
+	}, [setRunningWithCallback]);
+
+	const handleSend = useCallback(async () => {
+		const trimmed = text.trim();
+		if (!trimmed) return;
+		setSendError("");
+		setSending(true);
+		try {
+			const res = await fetch("/api/gateway/chat", {
+				method: "POST",
+				headers: { "Content-Type": "application/json" },
+				body: JSON.stringify({ text: trimmed }),
+			});
+			if (res.ok) {
+				setText("");
+				setTimeout(fetchTermOutput, 600);
+			} else {
+				const err = await res.json().catch(() => ({}));
+				setSendError(err.error || "Send failed");
+			}
+		} catch (e) {
+			setSendError(e.message || "Send failed");
+		} finally {
+			setSending(false);
+		}
+	}, [text, fetchTermOutput]);
+
+	const handleKeyDown = useCallback(
+		(e) => {
+			if ((e.ctrlKey || e.metaKey) && e.key === "Enter") {
+				e.preventDefault();
+				handleSend();
+			}
+		},
+		[handleSend],
+	);
+
+	if (statusLoading) {
+		return html`
+			<div class="flex items-center justify-center h-full bg-[#0f0f0f] text-[#555] text-sm">
+				Checking gateway status...
+			</div>
+		`;
+	}
+
+	return html`
+		<div class="flex flex-col h-full">
+
+			<!-- Header bar -->
+			<div class="flex items-center gap-3 px-4 py-3 border-b border-[#2a2a2a] bg-[#1a1a1a] shrink-0">
+				<span class="text-sm font-semibold text-[#e5e5e5]">Gateway</span>
+				<span
+					class=${`w-2 h-2 rounded-full shrink-0 ${running ? "bg-green-500" : "bg-[#444]"}`}
+					title=${running ? "Running" : "Stopped"}
+				></span>
+				<span class=${`text-xs ${running ? "text-green-400" : "text-[#555]"}`}>
+					${running ? (tmuxSession ? `Running (${tmuxSession})` : "Running") : "Stopped"}
+				</span>
+				<span class="flex-1"></span>
+				${
+					running
+						? html`<button
+							onClick=${handleStop}
+							disabled=${actionLoading}
+							class="text-xs px-3 py-1 rounded border border-[#444] text-[#e5e5e5] bg-transparent hover:bg-[#2a2a2a] disabled:opacity-50 cursor-pointer"
+						>
+							${actionLoading ? "Stopping..." : "Stop"}
+						</button>`
+						: html`<button
+							onClick=${handleStart}
+							disabled=${actionLoading}
+							class="text-xs px-3 py-1 rounded bg-[#E64415] hover:bg-[#cc3d12] text-white disabled:opacity-50 cursor-pointer border-none"
+						>
+							${actionLoading ? "Starting..." : "Start"}
+						</button>`
+				}
+			</div>
+
+			${actionError && html`<div class="px-4 py-2 text-xs text-red-400 bg-[#1a0a0a] border-b border-[#3a1a1a]">${actionError}</div>`}
+
+			${
+				!running
+					? html`
+						<div class="flex flex-col items-center justify-center flex-1 gap-3 text-[#555]">
+							<p class="text-sm">Gateway is not running.</p>
+							<button
+								onClick=${handleStart}
+								disabled=${actionLoading}
+								class="text-sm px-4 py-2 rounded bg-[#E64415] hover:bg-[#cc3d12] text-white disabled:opacity-50 cursor-pointer border-none"
+							>
+								${actionLoading ? "Starting..." : "Start Gateway"}
+							</button>
+						</div>
+					`
+					: html`
+						<!-- Terminal output area -->
+						<div
+							ref=${outputRef}
+							class="flex-1 overflow-y-auto p-4 font-mono text-xs text-[#e5e5e5] whitespace-pre-wrap min-h-0"
+							style="background:#0a0a0a"
+						>
+							${termOutput || html`<span class="text-[#555]">No output yet...</span>`}
+						</div>
+
+						<!-- Chat input -->
+						<div class="border-t border-[#2a2a2a] p-3 shrink-0">
+							<div class="flex gap-2 items-end">
+								<textarea
+									placeholder="Send text to gateway... (Ctrl+Enter to send)"
+									rows="2"
+									value=${text}
+									onInput=${(e) => setText(e.target.value)}
+									onKeyDown=${handleKeyDown}
+									class="flex-1 bg-[#1a1a1a] border border-[#2a2a2a] rounded px-2 py-1 text-sm text-[#e5e5e5] placeholder-[#666] outline-none focus:border-[#E64415] resize-none"
+								/>
+								<button
+									onClick=${handleSend}
+									disabled=${sending || !text.trim()}
+									class="bg-[#E64415] hover:bg-[#cc3d12] disabled:opacity-50 text-white text-sm px-3 py-1 rounded cursor-pointer border-none self-end"
+								>
+									${sending ? "..." : "Send"}
+								</button>
+							</div>
+							${sendError && html`<span class="text-xs text-red-400 mt-1 block">${sendError}</span>`}
+						</div>
+					`
+			}
+		</div>
+	`;
+}

package/src/server/public/components/issue-card.js

@@ -0,0 +1,96 @@
+// IssueCard — reusable kanban card component
+// Used by views/issues.js
+
+import { html } from "../lib/preact-setup.js";
+
+// Maps priority number → left border color (hex, for inline style)
+const priorityBorderColors = {
+	0: "#ef4444",
+	1: "#f97316",
+	2: "#eab308",
+	3: "#3b82f6",
+	4: "#6b7280",
+};
+
+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 hh = Math.floor(m / 60);
+	if (hh < 24) return `${hh}h ago`;
+	return `${Math.floor(hh / 24)}d ago`;
+}
+
+function truncate(str, maxLen) {
+	if (!str) return "";
+	return str.length <= maxLen ? str : `${str.slice(0, maxLen - 3)}...`;
+}
+
+export function IssueCard({ issue, children }) {
+	const borderColor = priorityBorderColors[issue.priority] ?? "#6b7280";
+	const hasBlockedBy = Array.isArray(issue.blockedBy) && issue.blockedBy.length > 0;
+	const isClosed = issue.status === "closed";
+
+	function handleClick() {
+		location.hash = `task/${issue.id}`;
+	}
+
+	return html`
+		<div
+			class=${`bg-[#1a1a1a] border border-[#2a2a2a] border-l-4 rounded-sm p-3 cursor-pointer hover:border-[#3a3a3a] hover:bg-[#222]${isClosed ? " opacity-50" : ""}`}
+			style=${{ borderLeftColor: borderColor }}
+			onClick=${handleClick}
+		>
+			<div class="flex items-start justify-between gap-2 mb-1">
+				<span class="flex items-center gap-1">
+					${hasBlockedBy ? html`<span class="text-xs">⚠️</span>` : null}
+					<span class=${`text-xs font-mono${hasBlockedBy ? " text-red-400" : " text-[#999]"}`}>${issue.id || ""}</span>
+					${isClosed ? html`<span class="text-xs bg-green-900/40 text-green-400 rounded px-1">Closed</span>` : null}
+				</span>
+				${issue.priority != null ? html`<span class="text-[#999] text-xs">P${issue.priority}</span>` : null}
+			</div>
+			<div class=${`text-[#e5e5e5] font-medium text-sm mb-1${isClosed ? " line-through" : ""}`}>
+				${truncate(issue.title || "", 60)}
+			</div>
+			${
+				isClosed && issue.closeReason
+					? html`
+				<div class="text-[#666] text-xs mb-1 italic">
+					${truncate(issue.closeReason, 80)}
+				</div>
+			`
+					: null
+			}
+			${
+				issue.description
+					? html`
+				<div class="text-[#999] text-xs mb-2 leading-relaxed">
+					${truncate(issue.description, 120)}
+				</div>
+			`
+					: null
+			}
+			<div class="flex items-center gap-2 flex-wrap">
+				${issue.type ? html`<span class="text-xs bg-[#2a2a2a] rounded px-1 text-[#999]">${issue.type}</span>` : null}
+				${issue.assignee ? html`<span class="text-[#999] text-xs">${issue.assignee}</span>` : null}
+				${issue.createdAt ? html`<span class="text-[#999] text-xs">${timeAgo(issue.createdAt)}</span>` : null}
+			</div>
+			${
+				hasBlockedBy
+					? html`
+				<div class="mt-1 text-xs text-red-500">
+					blocked by: ${issue.blockedBy.join(", ")}
+				</div>
+			`
+					: null
+			}
+		${children}
+		</div>
+	`;
+}
+
+export default IssueCard;

package/src/server/public/components/layout.js

@@ -0,0 +1,88 @@
+// Legio Web UI — Layout components
+// App shell: NavBar, WsIndicator, Layout wrapper.
+// 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);
+
+const NAV_LINKS = [
+	{ label: "Chat", hash: "/" },
+	{ label: "Dashboard", hash: "dashboard" },
+	{ label: "Events", hash: "events" },
+	{ label: "Costs", hash: "costs" },
+	{ label: "Issues", hash: "issues" },
+];
+
+/**
+ * WsIndicator — shows WebSocket connection state.
+ *
+ * @param {object} props
+ * @param {boolean} props.connected - Whether the WebSocket is connected
+ */
+export function WsIndicator({ connected }) {
+	return html`
+		<div class="flex items-center gap-1.5 text-xs">
+			<span
+				class=${`w-2 h-2 rounded-full ${connected ? "bg-green-500" : "bg-red-500"}`}
+			></span>
+			<span class=${connected ? "text-green-400" : "text-red-400"}>
+				${connected ? "connected" : "disconnected"}
+			</span>
+		</div>
+	`;
+}
+
+/**
+ * NavBar — horizontal top navigation bar.
+ *
+ * @param {object} props
+ * @param {string} props.currentView - Active view name (matches NAV_LINKS hash)
+ * @param {boolean} props.wsConnected - WebSocket connection state
+ */
+export function NavBar({ currentView, wsConnected }) {
+	return html`
+		<nav class="bg-[#0f0f0f] border-b border-[#2a2a2a] px-4 h-12 flex items-center justify-between">
+			<div class="flex items-center gap-6">
+				<span class="font-bold text-[#e5e5e5] text-sm tracking-wide">legio</span>
+				<div class="flex items-center gap-0">
+					${NAV_LINKS.map(
+						(link) => html`
+							<a
+								key=${link.hash}
+								href=${`#${link.hash}`}
+								class=${[
+									"px-3 h-12 flex items-center text-sm transition-colors",
+									currentView === link.hash
+										? "text-[#E64415] border-b-2 border-[#E64415]"
+										: "text-[#999] hover:text-[#e5e5e5]",
+								].join(" ")}
+							>
+								${link.label}
+							</a>
+						`,
+					)}
+				</div>
+			</div>
+			<${WsIndicator} connected=${wsConnected} />
+		</nav>
+	`;
+}
+
+/**
+ * Layout — app shell wrapping children with NavBar on top.
+ *
+ * @param {object} props
+ * @param {string} props.currentView - Active view name passed to NavBar
+ * @param {boolean} props.wsConnected - WebSocket connection state
+ * @param {*} props.children - Page content
+ */
+export function Layout({ currentView, wsConnected, children }) {
+	return html`
+		<div class="min-h-screen bg-[#0f0f0f] text-[#e5e5e5]">
+			<${NavBar} currentView=${currentView} wsConnected=${wsConnected} />
+			<main class="max-w-7xl mx-auto px-4 py-6">${children}</main>
+		</div>
+	`;
+}

package/src/server/public/components/message-bubble.js

@@ -0,0 +1,120 @@
+// Legio Web UI — MessageBubble + ActivityCard components
+// Conversational-style message rendering with agent capability color coding.
+// No npm dependencies — uses shared preact-setup.js for version consistency.
+
+import { renderMarkdown } from "../lib/markdown.js";
+import { html } from "../lib/preact-setup.js";
+import { agentColor, timeAgo } from "../lib/utils.js";
+
+/**
+ * MessageBubble — renders a single mail message as a conversational bubble.
+ *
+ * @param {object} props
+ * @param {object} props.msg          - Message object { from, to, body, subject, createdAt, type, priority, read }
+ * @param {string} [props.capability] - Agent capability for color coding ("coordinator", "builder", etc.)
+ * @param {boolean} [props.isUser]    - True for user-sent messages (right-aligned, accent color)
+ * @param {boolean} [props.showName]  - Show sender name + avatar + timestamp header (default true)
+ * @param {boolean} [props.compact]   - Tighter padding for grouped messages (default false)
+ */
+export function MessageBubble({
+	msg,
+	capability,
+	isUser = false,
+	showName = true,
+	compact = false,
+}) {
+	const colors = isUser
+		? {
+				bg: "bg-[#E64415]/10",
+				border: "border-[#E64415]",
+				text: "text-[#E64415]",
+				dot: "bg-[#E64415]",
+				avatar: "💬",
+			}
+		: agentColor(capability);
+
+	// Priority overrides border color
+	const borderColor =
+		msg.priority === "urgent"
+			? "border-red-500"
+			: msg.priority === "high"
+				? "border-orange-500"
+				: colors.border;
+
+	const bubbleClasses = [
+		"max-w-[80%]",
+		"border border-[#2a2a2a] border-l-2",
+		borderColor,
+		colors.bg,
+		"rounded-sm",
+		compact ? "py-1 px-3 mb-0.5" : "p-3 mb-2",
+		isUser ? "ml-auto" : "",
+	]
+		.filter(Boolean)
+		.join(" ");
+
+	return html`
+		<div class=${bubbleClasses}>
+			${
+				showName &&
+				html`<div class="flex items-center gap-1.5 mb-1">
+				<span class="text-base leading-none flex-shrink-0">${colors.avatar}</span>
+				<span class=${`text-xs font-semibold ${colors.text}`}>${msg.from || ""}</span>
+				<span class="text-xs text-[#555]">${timeAgo(msg.createdAt)}</span>
+			</div>`
+			}
+			<div class="text-sm text-[#e5e5e5] break-words chat-markdown"
+			dangerouslySetInnerHTML=${{ __html: renderMarkdown(msg.body) }}></div>
+		</div>
+	`;
+}
+
+/**
+ * Generate a human-readable summary for a mail-type activity message.
+ */
+function activitySummary(event) {
+	if (event.summary) return event.summary;
+	switch (event.type) {
+		case "dispatch":
+			return `Dispatched ${event.to || ""} for ${event.subject || ""}`;
+		case "worker_done":
+			return `${event.from || event.agent || ""} completed work`;
+		case "merge_ready":
+			return `${event.from || event.agent || ""} ready to merge`;
+		case "merged":
+			return `Branch merged: ${event.subject || ""}`;
+		case "merge_failed":
+			return `Merge failed: ${event.subject || ""}`;
+		case "spawned":
+			return `Agent spawned: ${event.agent || ""}`;
+		case "state_change":
+			return `${event.agent || ""}: ${event.from || ""} → ${event.to || ""}`;
+		case "removed":
+			return `Agent removed: ${event.agent || ""}`;
+		default:
+			return event.subject || event.type || "";
+	}
+}
+
+/**
+ * ActivityCard — compact centered card for agent activity events.
+ *
+ * @param {object} props
+ * @param {object} props.event      - Activity event or mail message with activity type
+ * @param {string} [props.capability] - Agent capability for color coding
+ */
+export function ActivityCard({ event, capability }) {
+	const colors = agentColor(capability ?? event.capability);
+	const summary = activitySummary(event);
+	const ts = event.timestamp || event.createdAt;
+
+	return html`
+		<div
+			class="mx-auto max-w-[70%] flex items-center gap-1.5 px-3 py-1 mb-1 rounded bg-[#1a1a1a] border border-[#2a2a2a]"
+		>
+			<span class="text-xs leading-none flex-shrink-0">${colors.avatar}</span>
+			<span class="text-xs text-[#666] truncate">${summary}</span>
+			<span class="text-xs text-[#444] flex-shrink-0 ml-auto">${timeAgo(ts)}</span>
+		</div>
+	`;
+}

package/src/server/public/components/stat-card.js

@@ -0,0 +1,26 @@
+// Legio Web UI — StatCard component
+// Metric display card: label + large value + optional subtitle.
+// Used on the dashboard view. No npm dependencies — uses CDN imports.
+
+import htm from "https://esm.sh/htm@latest";
+import { h } from "https://esm.sh/preact@latest";
+
+const html = htm.bind(h);
+
+/**
+ * StatCard — displays a single metric with label, value, and optional subtitle.
+ *
+ * @param {object} props
+ * @param {string} props.label    - Short label shown above the value (uppercase)
+ * @param {string|number} props.value - The main metric value to display
+ * @param {string} [props.subtitle]  - Optional supplementary text below the value
+ */
+export function StatCard({ label, value, subtitle }) {
+	return html`
+		<div class="bg-[#1a1a1a] border border-[#2a2a2a] rounded-sm p-4">
+			<div class="text-xs uppercase text-gray-500 tracking-wide mb-1">${label}</div>
+			<div class="text-2xl font-bold text-[#e5e5e5]">${value}</div>
+			${subtitle && html`<div class="text-sm text-gray-400 mt-1">${subtitle}</div>`}
+		</div>
+	`;
+}