@katyella/legio 0.1.3 → 0.2.0

package/src/server/index.ts

@@ -15,7 +15,7 @@ export interface ServerOptions {
 	host: string;
 	root: string; // Project root directory
 	shouldOpen?: boolean; // Auto-open browser
-	autoStartCoordinator?: boolean; // Auto-start coordinator with --watchdog on server start
+	autoStartCoordinator?: boolean; // Auto-start coordinator with --watchman on server start
 }
 
 /** Dependency injection for testing. */
@@ -97,13 +97,44 @@ async function tryStartCoordinator(root: string): Promise<void> {
 	}
 
 	// Start coordinator detached so the server doesn't wait on it
-	const startProc = spawn("legio", ["coordinator", "start", "--watchdog", "--no-attach"], {
+	const startProc = spawn("legio", ["coordinator", "start", "--watchman", "--no-attach"], {
 		cwd: root,
 		detached: true,
 		stdio: "ignore",
 	});
 	startProc.unref();
 	process.stdout.write("[legio] Coordinator started\n");
+
+	// Verify coordinator comes up: poll status up to 5 times at 3s intervals
+	const MAX_POLLS = 5;
+	const POLL_INTERVAL_MS = 3_000;
+	for (let i = 0; i < MAX_POLLS; i++) {
+		await new Promise<void>((resolve) => setTimeout(resolve, POLL_INTERVAL_MS));
+		const pollProc = spawn("legio", ["coordinator", "status", "--json"], {
+			cwd: root,
+			stdio: ["ignore", "pipe", "pipe"],
+		});
+		const pollChunks: Buffer[] = [];
+		pollProc.stdout?.on("data", (chunk: Buffer) => pollChunks.push(chunk));
+		const pollCode = await new Promise<number>((resolve) => {
+			pollProc.on("close", (code) => resolve(code ?? 1));
+		});
+		if (pollCode === 0) {
+			try {
+				const pollStatus = JSON.parse(Buffer.concat(pollChunks).toString()) as {
+					running?: boolean;
+					state?: string;
+				};
+				if (pollStatus.running && pollStatus.state !== "booting") {
+					process.stdout.write("[legio] Coordinator verified running\n");
+					return;
+				}
+			} catch {
+				// Cannot parse — keep polling
+			}
+		}
+	}
+	process.stderr.write("[legio] Warning: coordinator still booting after verification checks\n");
 }
 
 /**

package/src/server/public/app.js

@@ -84,7 +84,7 @@ function Layout({ view, param }) {
 
 	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">
+			<nav class="flex items-center justify-between px-2 sm:px-4 border-b border-[#2a2a2a] bg-[#1a1a1a] shrink-0">
 				<div class="flex items-center">
 					${NAV_LINKS.map((link) => {
 						const isActive = link.view === view;
@@ -93,7 +93,7 @@ function Layout({ view, param }) {
 								key=${link.view}
 								href=${link.href}
 								class=${
-									"px-4 py-3 text-sm font-medium transition-colors border-b-2 " +
+									"px-3 sm: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]")
@@ -104,7 +104,7 @@ function Layout({ view, param }) {
 						`;
 					})}
 				</div>
-				<div class="flex items-center gap-3 pr-2">
+				<div class="flex items-center gap-2 pr-1 shrink-0">
 					<span
 						class=${`w-2 h-2 rounded-full ${connected ? "bg-green-500" : "bg-[#444]"}`}
 						title=${connected ? "WebSocket connected" : "WebSocket disconnected"}

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

@@ -6,6 +6,16 @@ import { renderMarkdown } from "../lib/markdown.js";
 import { html } from "../lib/preact-setup.js";
 import { agentColor, timeAgo } from "../lib/utils.js";
 
+function addStatusPrefixes(htmlStr) {
+	return htmlStr
+		.replace(/\[DONE\]/g, '<span class="text-green-400 font-semibold">[DONE]</span>')
+		.replace(/\[ERROR\]/g, '<span class="text-red-400 font-semibold">[ERROR]</span>')
+		.replace(/\[INFO\]/g, '<span class="text-blue-400 font-semibold">[INFO]</span>')
+		.replace(/\[WARN\]/g, '<span class="text-yellow-400 font-semibold">[WARN]</span>')
+		.replace(/\[PENDING\]/g, '<span class="text-[#999] font-semibold">[PENDING]</span>')
+		.replace(/\[MERGED\]/g, '<span class="text-purple-400 font-semibold">[MERGED]</span>');
+}
+
 /**
  * MessageBubble — renders a single mail message as a conversational bubble.
  *
@@ -64,7 +74,7 @@ export function MessageBubble({
 			</div>`
 			}
 			<div class="text-sm text-[#e5e5e5] break-words chat-markdown"
-			dangerouslySetInnerHTML=${{ __html: renderMarkdown(msg.body) }}></div>
+			dangerouslySetInnerHTML=${{ __html: addStatusPrefixes(renderMarkdown(msg.body)) }}></div>
 		</div>
 	`;
 }

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

@@ -5,61 +5,45 @@ 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, "");
+	return str.replace(/\x1b\[[?0-9;]*[a-zA-Z]/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");
+const ACTIVITY_LEVEL = { idle: 0, ready: 1, active: 2 };
+
+function higherActivity(a, b) {
+	return (ACTIVITY_LEVEL[a] ?? 0) >= (ACTIVITY_LEVEL[b] ?? 0) ? a : b;
 }
 
 // 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);
+//   chatTarget {string}      — agent name to capture terminal from
+//   activity   {string}      — 'idle'|'active'|'ready' hint from parent (e.g. gateway just sent a message)
+//   agentState {string|null} — agent session state ('working'|'booting'|'completed'|'zombie'|null)
+export function TerminalPanel({ chatTarget, activity = "idle", agentState = null }) {
+	const [userExpanded, setUserExpanded] = useState(false);
+	const [captureText, setCaptureText] = useState("");
+	const [captureActivity, setCaptureActivity] = useState("idle");
+	const lastChangeTimeRef = useRef(Date.now());
+	const lastHashRef = useRef("");
+	const agentStateRef = useRef(agentState);
 	const terminalRef = useRef(null);
 
+	// Keep agentStateRef in sync with the agentState prop
+	useEffect(() => {
+		agentStateRef.current = agentState;
+	}, [agentState]);
+
 	// Reset when chatTarget changes
 	useEffect(() => {
-		setStreamText("");
-		setLoading(false);
-		baselineCaptureRef.current = null;
+		setCaptureText("");
+		setCaptureActivity("idle");
+		lastChangeTimeRef.current = Date.now();
+		lastHashRef.current = "";
 	}, [chatTarget]);
 
-	// Poll terminal capture when thinking OR expanded; clear when neither
+	// Always poll to drive the activity state machine via hash-based change detection
 	useEffect(() => {
-		if (!thinking && !expanded) {
-			setStreamText("");
-			setLoading(false);
-			baselineCaptureRef.current = null;
-			return;
-		}
-
 		let cancelled = false;
-		setLoading(true);
 
 		async function pollCapture() {
 			try {
@@ -67,69 +51,77 @@ export function TerminalPanel({ chatTarget, thinking }) {
 				if (!res.ok || cancelled) return;
 				const data = await res.json();
 				const output = stripAnsi(data.output || "");
-				if (!cancelled) setLoading(false);
+				if (cancelled) return;
 
-				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);
-					}
+				const now = Date.now();
+				if (output !== lastHashRef.current) {
+					// Capture changed — transition to active
+					lastHashRef.current = output;
+					lastChangeTimeRef.current = now;
+					setCaptureActivity("active");
 				} else {
-					// Expanded viewer mode: show full terminal capture directly
-					if (!cancelled && output.trim()) {
-						setStreamText(output);
+					// No change — use agent session state to determine activity level
+					const state = agentStateRef.current;
+					if (state === "working" || state === "booting") {
+						setCaptureActivity("ready");
+					} else {
+						setCaptureActivity("idle");
 					}
 				}
+
+				if (output.trim()) {
+					setCaptureText(output);
+				}
 			} catch (_err) {
-				// non-fatal — capture may fail if coordinator tmux not ready
+				// non-fatal — capture may fail if agent tmux session not ready
 			}
 		}
 
 		pollCapture();
-		const interval = setInterval(pollCapture, 1500);
+		const interval = setInterval(pollCapture, 2000);
 		return () => {
 			cancelled = true;
 			clearInterval(interval);
 		};
-	}, [thinking, expanded, chatTarget]);
+	}, [chatTarget]);
 
 	// Auto-scroll terminal to bottom when new output arrives
 	useEffect(() => {
 		const el = terminalRef.current;
 		if (el) el.scrollTop = el.scrollHeight;
-	}, [streamText]);
+	}, [captureText]);
+
+	// Effective activity: max of parent hint and internal capture-driven state
+	const effectiveActivity = higherActivity(activity, captureActivity);
+
+	const dotClass =
+		"w-2 h-2 rounded-full flex-shrink-0 " +
+		(effectiveActivity === "active"
+			? "bg-yellow-500 animate-pulse"
+			: effectiveActivity === "ready"
+				? "bg-green-500"
+				: "bg-[#333]");
 
 	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)}
+				onClick=${() => setUserExpanded((prev) => !prev)}
 			>
-				<span
-					class=${
-						"w-2 h-2 rounded-full flex-shrink-0 " +
-						(thinking ? "bg-yellow-500 animate-pulse" : "bg-[#333]")
-					}
-				></span>
+				<span class=${dotClass}></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>
+				${effectiveActivity === "active" ? html`<span class="text-xs text-yellow-500 animate-pulse">active</span>` : null}
+				${effectiveActivity === "ready" ? html`<span class="text-xs text-green-500">ready</span>` : null}
+				<span class="ml-auto text-xs text-[#444]">${userExpanded ? "\u25b2" : "\u25bc"}</span>
 			</div>
 			${
-				expanded
+				userExpanded
 					? 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>`
+							captureText
+								? html`<pre class="text-xs text-[#ccc] font-mono whitespace-pre-wrap break-words">${captureText}</pre>`
+								: html`<div class="text-xs text-[#444] py-1 italic">No output yet</div>`
 						}
 					</div>
 				`

package/src/server/public/views/chat.js

@@ -138,6 +138,7 @@ export function ChatView({ state: propState, onSendMessage: propOnSendMessage })
 	const issues = appState.issues || [];
 
 	// UI state — local to this component, persisted across re-renders
+	const [sidebarOpen, setSidebarOpen] = useState(false);
 	const [selectedTask, setSelectedTask] = useState(null);
 	const [selectedAgent, setSelectedAgent] = useState(null);
 	const [expandedTasks, setExpandedTasks] = useState(() => new Set());
@@ -344,6 +345,7 @@ export function ChatView({ state: propState, onSendMessage: propOnSendMessage })
 		setSelectedTask(taskId);
 		setSelectedAgent(null);
 		setSelectedConversation(null);
+		setSidebarOpen(false);
 		// Auto-expand task on click (not for general section)
 		if (taskId && taskId !== "__general__") {
 			setExpandedTasks((prev) => {
@@ -371,12 +373,14 @@ export function ChatView({ state: propState, onSendMessage: propOnSendMessage })
 		e.stopPropagation();
 		setSelectedAgent(agentName);
 		setSelectedConversation(null);
+		setSidebarOpen(false);
 	}, []);
 
 	const handleAllMessagesClick = useCallback(() => {
 		setSelectedTask(null);
 		setSelectedAgent(null);
 		setSelectedConversation(null);
+		setSidebarOpen(false);
 	}, []);
 
 	const handleThreadToggle = useCallback((threadId) => {
@@ -395,6 +399,7 @@ export function ChatView({ state: propState, onSendMessage: propOnSendMessage })
 		setSelectedConversation(conv);
 		setSelectedTask(null);
 		setSelectedAgent(null);
+		setSidebarOpen(false);
 	}, []);
 
 	const handleSend = useCallback(async () => {
@@ -602,11 +607,11 @@ export function ChatView({ state: propState, onSendMessage: propOnSendMessage })
 	}
 
 	return html`
-		<div class="flex h-full">
+		<div class="flex flex-col md:flex-row h-full">
 
 			<!-- Sidebar -->
 			<div
-				class="w-64 bg-[#0f0f0f] border-r border-[#2a2a2a] overflow-y-auto flex-shrink-0"
+				class={`w-full md:w-64 bg-[#0f0f0f] border-r border-[#2a2a2a] border-b md:border-b-0 overflow-y-auto flex-shrink-0${sidebarOpen ? '' : ' hidden md:block'}`}
 			>
 				<!-- All Messages item -->
 				<div
@@ -793,6 +798,17 @@ export function ChatView({ state: propState, onSendMessage: propOnSendMessage })
 
 				<!-- Header -->
 				<div class="px-4 py-3 border-b border-[#2a2a2a] flex items-center gap-2 flex-wrap">
+					<button
+						class="md:hidden flex-shrink-0 text-[#999] hover:text-[#e5e5e5] p-1"
+						onClick=${() => setSidebarOpen((o) => !o)}
+						aria-label="Toggle sidebar"
+					>
+						<svg width="18" height="18" viewBox="0 0 18 18" fill="currentColor">
+							<rect x="1" y="3" width="16" height="2"/>
+							<rect x="1" y="8" width="16" height="2"/>
+							<rect x="1" y="13" width="16" height="2"/>
+						</svg>
+					</button>
 					${
 						selectedConversation
 							? html`

package/src/server/public/views/costs.js

@@ -66,7 +66,7 @@ function modelColor(model) {
 
 function StatCard({ label, value }) {
 	return html`
-		<div class="bg-surface border border-border rounded-sm p-4 flex-1 min-w-0">
+		<div class="bg-surface border border-border rounded-sm p-4 flex-1 min-w-[140px]">
 			<div class="text-xs text-gray-500 uppercase tracking-wider mb-1">${label}</div>
 			<div class="text-2xl font-mono text-white">${value}</div>
 		</div>
@@ -95,7 +95,7 @@ function ModelBreakdown({ modelData }) {
 				const color = modelColor(row.model);
 				return html`
 					<div key=${row.model || "unknown"} class="flex items-center gap-3">
-						<div class="flex items-center gap-2 w-[140px] shrink-0">
+						<div class="flex items-center gap-2 w-[100px] md:w-[140px] shrink-0">
 							<div class=${`${color} w-2 h-2 rounded-full shrink-0`}></div>
 							<span class="text-sm text-gray-300 truncate">${row.model || "unknown"}</span>
 						</div>
@@ -198,7 +198,7 @@ function AgentBarChart({ metrics }) {
 					<div key=${name} class="flex items-center gap-3">
 						<a
 							href=${`#inspect/${encodeURIComponent(name)}`}
-							class="text-blue-400 hover:text-blue-300 text-sm w-[140px] shrink-0 truncate"
+							class="text-blue-400 hover:text-blue-300 text-sm w-[100px] md:w-[140px] shrink-0 truncate"
 						>
 							${name}
 						</a>
@@ -298,7 +298,7 @@ function CapabilityChart({ metrics }) {
 				const pct = maxCost > 0 ? (cost / maxCost) * 100 : 0;
 				return html`
 					<div key=${cap} class="flex items-center gap-3">
-						<span class="text-sm text-gray-400 w-[140px] shrink-0 truncate">${cap}</span>
+						<span class="text-sm text-gray-400 w-[100px] md:w-[140px] shrink-0 truncate">${cap}</span>
 						<div class="flex-1 bg-white/5 rounded-sm h-5 overflow-hidden">
 							<div
 								class="bg-blue-400 h-full rounded-sm"
@@ -510,7 +510,7 @@ export function CostsView({ metrics: initialMetrics, snapshots }) {
 			</div>
 
 			<!-- Summary Stat Cards -->
-			<div class="flex gap-4">
+			<div class="flex flex-wrap gap-4">
 				<${StatCard}
 					label="Total Cost"
 					value=${totals.cost != null ? formatCostShort(totals.cost) : "—"}

package/src/server/public/views/dashboard.js

@@ -93,7 +93,7 @@ function MetricsStrip({ agents, status }) {
 			<div class="border-b border-[#2a2a2a] px-3 py-1.5 text-xs font-bold uppercase tracking-wider text-gray-400">
 				Metrics
 			</div>
-			<div class="flex flex-wrap gap-4 px-3 py-2">
+			<div class="flex flex-wrap gap-x-3 gap-y-1 px-3 py-2">
 				${stats.map(
 					({ label, value }) => html`
 						<span key=${label} class="text-xs text-gray-400">
@@ -352,7 +352,7 @@ function AgentRoster({ agents, mail, events }) {
 								<div
 									key=${agent.agentName}
 									class="mb-1 rounded border border-[#2a2a2a] bg-[#1a1a1a] overflow-hidden"
-									style=${{ marginLeft: `${depth * 16}px` }}
+									style=${{ marginLeft: `${Math.min(depth * 12, 36)}px` }}
 								>
 									<!-- Row -->
 									<div
@@ -609,54 +609,50 @@ function CoordinatorBar() {
 	const gwStatusText = gwIsRunning ? "Running" : gwIsStopped ? "Stopped" : "Unknown";
 
 	return html`
-		<div class="flex items-center gap-3 px-3 py-2 bg-[#1a1a1a] border-b border-[#2a2a2a] shrink-0">
-			<div class="flex items-center gap-2">
-				<span class="text-xs text-[#666] uppercase tracking-wide">Coordinator</span>
-				<div class="flex items-center gap-1">
-					<div class="w-2 h-2 rounded-full ${dotColor}"></div>
+		<div class="bg-[#1a1a1a] border-b border-[#2a2a2a] shrink-0 px-3 py-2">
+			<div class="flex flex-wrap gap-x-4 gap-y-1.5 items-center">
+				<!-- Coordinator group -->
+				<div class="flex items-center gap-2">
+					<span class="text-xs text-[#666] uppercase tracking-wide whitespace-nowrap">Coordinator</span>
+					<div class="w-2 h-2 rounded-full shrink-0 ${dotColor}"></div>
 					<span class="text-sm text-[#e5e5e5]">${statusText}</span>
+					<button
+						onClick=${handleStart}
+						disabled=${loading || isRunning}
+						class="bg-[#E64415] hover:bg-[#cc3d12] disabled:opacity-50 text-white text-xs px-2 py-0.5 rounded cursor-pointer border-none"
+					>
+						${loading && !isRunning ? "\u2026" : "Start"}
+					</button>
+					<button
+						onClick=${handleStop}
+						disabled=${loading || isStopped || isUnknown}
+						class="bg-[#E64415] hover:bg-[#cc3d12] disabled:opacity-50 text-white text-xs px-2 py-0.5 rounded cursor-pointer border-none"
+					>
+						${loading && isRunning ? "\u2026" : "Stop"}
+					</button>
 				</div>
-			</div>
-			<div class="flex items-center gap-2">
-				<button
-					onClick=${handleStart}
-					disabled=${loading || isRunning}
-					class="bg-[#E64415] hover:bg-[#cc3d12] disabled:opacity-50 text-white text-sm px-3 py-1 rounded cursor-pointer border-none"
-				>
-					${loading && !isRunning ? "\u2026" : "Start"}
-				</button>
-				<button
-					onClick=${handleStop}
-					disabled=${loading || isStopped || isUnknown}
-					class="bg-[#E64415] hover:bg-[#cc3d12] disabled:opacity-50 text-white text-sm px-3 py-1 rounded cursor-pointer border-none"
-				>
-					${loading && isRunning ? "\u2026" : "Stop"}
-				</button>
-			</div>
-			<div class="border-l border-[#2a2a2a] pl-3 ml-1 flex items-center gap-2">
-				<span class="text-xs text-[#666] uppercase tracking-wide">Gateway</span>
-				<div class="flex items-center gap-1">
-					<div class="w-2 h-2 rounded-full ${gwDotColor}"></div>
+				<!-- Gateway group -->
+				<div class="flex items-center gap-2">
+					<span class="text-xs text-[#666] uppercase tracking-wide whitespace-nowrap">Gateway</span>
+					<div class="w-2 h-2 rounded-full shrink-0 ${gwDotColor}"></div>
 					<span class="text-sm text-[#e5e5e5]">${gwStatusText}</span>
+					<button
+						onClick=${handleGwStart}
+						disabled=${gwLoading || gwIsRunning}
+						class="bg-[#E64415] hover:bg-[#cc3d12] disabled:opacity-50 text-white text-xs px-2 py-0.5 rounded cursor-pointer border-none"
+					>
+						${gwLoading && !gwIsRunning ? "\u2026" : "Start"}
+					</button>
+					<button
+						onClick=${handleGwStop}
+						disabled=${gwLoading || gwIsStopped || gwIsUnknown}
+						class="bg-[#E64415] hover:bg-[#cc3d12] disabled:opacity-50 text-white text-xs px-2 py-0.5 rounded cursor-pointer border-none"
+					>
+						${gwLoading && gwIsRunning ? "\u2026" : "Stop"}
+					</button>
 				</div>
 			</div>
-			<div class="flex items-center gap-2">
-				<button
-					onClick=${handleGwStart}
-					disabled=${gwLoading || gwIsRunning}
-					class="bg-[#E64415] hover:bg-[#cc3d12] disabled:opacity-50 text-white text-sm px-3 py-1 rounded cursor-pointer border-none"
-				>
-					${gwLoading && !gwIsRunning ? "\u2026" : "Start"}
-				</button>
-				<button
-					onClick=${handleGwStop}
-					disabled=${gwLoading || gwIsStopped || gwIsUnknown}
-					class="bg-[#E64415] hover:bg-[#cc3d12] disabled:opacity-50 text-white text-sm px-3 py-1 rounded cursor-pointer border-none"
-				>
-					${gwLoading && gwIsRunning ? "\u2026" : "Stop"}
-				</button>
-			</div>
-			${error ? html`<span class="text-xs text-red-400">${error}</span>` : null}
+			${error ? html`<div class="text-xs text-red-400 mt-1">${error}</div>` : null}
 		</div>
 	`;
 }
@@ -754,23 +750,56 @@ export function DashboardView() {
 		};
 	}, []);
 
+	const [mobileTab, setMobileTab] = useState("chat");
 	const agents = appState.agents.value;
 	const status = appState.status.value;
 
 	return html`
 		<div class="flex flex-col h-full bg-[#0f0f0f] min-h-0">
 			<${CoordinatorBar} />
-			<div class="flex flex-1 min-h-0">
-				<!-- Coordinator Chat (left, ~58%) -->
+			<!-- Mobile tab bar (hidden on md+) -->
+			<div class="flex border-b border-[#2a2a2a] bg-[#1a1a1a] shrink-0 md:hidden">
+				<button
+					onClick=${() => setMobileTab("chat")}
+					class=${
+						"flex-1 py-2 text-sm font-medium border-b-2 " +
+						(mobileTab === "chat"
+							? "text-white border-[#E64415]"
+							: "text-[#888] border-transparent")
+					}
+				>
+					Chat
+				</button>
+				<button
+					onClick=${() => setMobileTab("status")}
+					class=${
+						"flex-1 py-2 text-sm font-medium border-b-2 " +
+						(mobileTab === "status"
+							? "text-white border-[#E64415]"
+							: "text-[#888] border-transparent")
+					}
+				>
+					Status
+				</button>
+			</div>
+			<div class="flex flex-col md:flex-row flex-1 min-h-0">
+				<!-- Chat panel: full height on mobile (when chat tab active), left ~58% on md+ -->
 				<div
-					class="flex flex-col min-h-0 overflow-hidden border-r border-[#2a2a2a]"
-					style="flex: 58 1 0%"
+					class=${
+						"flex-col min-h-0 overflow-hidden md:border-r border-[#2a2a2a] md:flex-[58_1_0%] flex-1 " +
+						(mobileTab === "chat" ? "flex" : "hidden md:flex")
+					}
 				>
 					<${GatewayChat} gwRunning=${gwRunning} />
 				</div>
 
-				<!-- Sidebar (right, ~42%): MetricsStrip + AgentRoster + MailFeed -->
-				<div class="flex flex-col min-h-0 overflow-hidden" style="flex: 42 1 0%">
+				<!-- Sidebar: MetricsStrip + AgentRoster + MailFeed — right ~42% on md+ -->
+				<div
+					class=${
+						"flex-col min-h-0 overflow-hidden md:flex-[42_1_0%] flex-1 " +
+						(mobileTab === "status" ? "flex" : "hidden md:flex")
+					}
+				>
 					<${MetricsStrip} agents=${agents} status=${status} />
 					<${AgentRoster} agents=${agents} mail=${mail} events=${activityEvents} />
 					<${MailFeed} mail=${mail} />