agent-relay-server 0.22.0 → 0.23.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agent-relay-server",
-  "version": "0.22.0",
+  "version": "0.23.0",
   "description": "Lightweight HTTP message relay for inter-agent communication across machines",
   "module": "src/index.ts",
   "type": "module",

package/public/index.html

@@ -10510,6 +10510,40 @@ function prepareForSpeech(markdown) {
 }
 //#endregion
 //#region src/lib/voice.ts
+var KOKORO_VOICES = [
+	{
+		id: "am_michael",
+		label: "Michael (US ♂)"
+	},
+	{
+		id: "am_adam",
+		label: "Adam (US ♂)"
+	},
+	{
+		id: "af_heart",
+		label: "Heart (US ♀)"
+	},
+	{
+		id: "af_bella",
+		label: "Bella (US ♀)"
+	},
+	{
+		id: "af_nicole",
+		label: "Nicole (US ♀)"
+	},
+	{
+		id: "af_sarah",
+		label: "Sarah (US ♀)"
+	},
+	{
+		id: "bm_george",
+		label: "George (UK ♂)"
+	},
+	{
+		id: "bf_emma",
+		label: "Emma (UK ♀)"
+	}
+];
 var MAX_CHUNK = 220;
 /** Split into utterance-sized chunks (sentence boundaries; hard-split very long runs). */
 function chunkForSpeech(text) {
@@ -10537,6 +10571,7 @@ var VoiceTts = class {
 	lang = "en-US";
 	mode = "kokoro";
 	kokoroVoice = "am_michael";
+	browserVoice = "";
 	active = null;
 	queue = [];
 	currentChat = null;
@@ -10586,6 +10621,10 @@ var VoiceTts = class {
 	setKokoroVoice(voice) {
 		this.kokoroVoice = voice;
 	}
+	/** Set the browser engine's voice by voiceURI. Empty = default for the language. */
+	setBrowserVoice(uri) {
+		this.browserVoice = uri;
+	}
 	setActiveChat(chatId) {
 		if (chatId === this.active) return;
 		this.active = chatId;
@@ -10683,7 +10722,11 @@ var VoiceTts = class {
 		if (gen !== this.gen) return;
 		if (!synthAvailable || i >= chunks.length) return done();
 		const u = new SpeechSynthesisUtterance(chunks[i]);
-		u.lang = this.lang || navigator.language || "en-US";
+		const picked = this.browserVoice ? window.speechSynthesis.getVoices().find((v) => v.voiceURI === this.browserVoice) : void 0;
+		if (picked) {
+			u.voice = picked;
+			u.lang = picked.lang;
+		} else u.lang = this.lang || navigator.language || "en-US";
 		u.onend = () => this.speakBrowser(chunks, i + 1, gen, done);
 		u.onerror = () => this.speakBrowser(chunks, i + 1, gen, done);
 		window.speechSynthesis.speak(u);
@@ -10732,12 +10775,16 @@ var VoiceTts = class {
 	}
 };
 var voiceTts = new VoiceTts();
-/** Sorted unique BCP-47 languages the browser's speech engine can speak. May be empty
-*  until the engine finishes loading voices (listen for `voiceschanged` and re-read). */
-function availableSpeechLangs() {
+/** The browser's individual speech voices ({uri, label, lang}), sorted by language
+*  then name. May be empty until the engine loads (listen for `voiceschanged`). */
+function availableSpeechVoices() {
 	if (!synthAvailable) return [];
 	try {
-		return [...new Set(window.speechSynthesis.getVoices().map((v) => v.lang).filter(Boolean))].sort();
+		return window.speechSynthesis.getVoices().map((v) => ({
+			uri: v.voiceURI,
+			label: `${v.name} (${v.lang})`,
+			lang: v.lang
+		})).sort((a, b) => a.lang.localeCompare(b.lang) || a.label.localeCompare(b.label));
 	} catch {
 		return [];
 	}
@@ -12176,6 +12223,7 @@ var useRelayStore = create$1()(persist((set, get) => ({
 	voiceTtsLang: "en-US",
 	voiceTtsMode: "kokoro",
 	voiceTtsKokoroVoice: "am_michael",
+	voiceTtsBrowserVoice: "",
 	voiceInputMode: "compose",
 	agentSort: "status",
 	agentSortDir: "asc",
@@ -12220,6 +12268,8 @@ var useRelayStore = create$1()(persist((set, get) => ({
 	chatAgentHostFilter: "",
 	chatAgentSort: "status",
 	chatAgentSortDir: "asc",
+	chatAgentGroupBy: "",
+	chatAgentFiltersCollapsed: true,
 	chatStatusEvents: {},
 	chatStickToBottom: true,
 	chatHasNewItems: false,
@@ -12382,6 +12432,10 @@ var useRelayStore = create$1()(persist((set, get) => ({
 		voiceTts.setKokoroVoice(voice);
 		set({ voiceTtsKokoroVoice: voice });
 	},
+	setVoiceTtsBrowserVoice(uri) {
+		voiceTts.setBrowserVoice(uri);
+		set({ voiceTtsBrowserVoice: uri });
+	},
 	setVoiceInputMode(mode) {
 		set({ voiceInputMode: mode });
 	},
@@ -12398,6 +12452,7 @@ var useRelayStore = create$1()(persist((set, get) => ({
 		voiceTts.setLang(get().voiceTtsLang);
 		voiceTts.setMode(get().voiceTtsMode);
 		voiceTts.setKokoroVoice(get().voiceTtsKokoroVoice);
+		voiceTts.setBrowserVoice(get().voiceTtsBrowserVoice);
 		syncVoiceActiveChat(get());
 		setUnauthorizedHandler(() => {
 			if (!get().authNeeded) set({
@@ -14520,6 +14575,7 @@ var useRelayStore = create$1()(persist((set, get) => ({
 		voiceTtsLang: state.voiceTtsLang,
 		voiceTtsMode: state.voiceTtsMode,
 		voiceTtsKokoroVoice: state.voiceTtsKokoroVoice,
+		voiceTtsBrowserVoice: state.voiceTtsBrowserVoice,
 		voiceInputMode: state.voiceInputMode,
 		agentSort: state.agentSort,
 		agentSortDir: state.agentSortDir,
@@ -14538,6 +14594,8 @@ var useRelayStore = create$1()(persist((set, get) => ({
 		chatAgentHostFilter: state.chatAgentHostFilter,
 		chatAgentSort: state.chatAgentSort,
 		chatAgentSortDir: state.chatAgentSortDir,
+		chatAgentGroupBy: state.chatAgentGroupBy,
+		chatAgentFiltersCollapsed: state.chatAgentFiltersCollapsed,
 		activityFilter: state.activityFilter,
 		analyticsPeriod: state.analyticsPeriod,
 		memoryFilters: state.memoryFilters,
@@ -108818,7 +108876,7 @@ function ContextMeter({ agent }) {
 function runtimeChips(agent) {
 	const spawned = isRelaySpawned(agent);
 	const approval = approvalMode(agent);
-	const workspace = workspaceMode(agent);
+	const workspace = agentWorkspaceMeta(agent);
 	return [
 		{
 			key: "origin",
@@ -108858,7 +108916,7 @@ function approvalMode(agent) {
 		className: "border-amber-500/30 bg-amber-500/10 text-amber-300"
 	};
 }
-function workspaceMode(agent) {
+function agentWorkspaceMeta(agent) {
 	const workspace = recordValue(agent.meta?.workspace);
 	const requested = stringValue(workspace.requestedMode) || stringValue(agent.meta?.workspaceMode);
 	const effective = stringValue(workspace.mode);
@@ -108868,6 +108926,7 @@ function workspaceMode(agent) {
 		label: "Isolated",
 		title: "Workspace: isolated worktree",
 		Icon: GitBranch,
+		iconColor: "text-violet-300",
 		className: "border-violet-500/30 bg-violet-500/10 text-violet-300"
 	};
 	if (mode === "shared") return {
@@ -108875,6 +108934,7 @@ function workspaceMode(agent) {
 		label: "Shared",
 		title: "Workspace: shared repo checkout",
 		Icon: Share2,
+		iconColor: "text-cyan-300",
 		className: "border-cyan-500/30 bg-cyan-500/10 text-cyan-300"
 	};
 	return {
@@ -108882,12 +108942,18 @@ function workspaceMode(agent) {
 		label: "Default",
 		title: effective ? `Workspace: default/inherit, resolved to ${effective}` : "Workspace: default/inherit",
 		Icon: Layers,
+		iconColor: "text-zinc-400",
 		className: "border-zinc-500/30 bg-zinc-500/10 text-zinc-300"
 	};
 }
 function recordValue(value) {
 	return value && typeof value === "object" && !Array.isArray(value) ? value : {};
 }
+function agentProjectName(agent) {
+	const workspace = recordValue(agent.meta?.workspace);
+	const root = stringValue(workspace.repoRoot) || stringValue(workspace.sourceCwd) || stringValue(agent.meta?.cwd);
+	return root ? shortPath$1(root, 2) : "";
+}
 function runtimeBadges(agent) {
 	const caps = agent.providerCapabilities;
 	const context = agent.context;
@@ -108903,40 +108969,47 @@ function runtimeBadges(agent) {
 	if (context) badges.push(`${Math.round(context.utilization * 100)}% ctx`);
 	return badges;
 }
-function ContextRing({ utilization, className }) {
+function ContextRing({ utilization, size = 26, className }) {
 	const pct = Math.round(Math.min(1, Math.max(0, utilization)) * 100);
-	const r = 10;
+	const stroke = size >= 24 ? 3 : 2.5;
+	const c = size / 2;
+	const r = c - stroke;
 	const circumference = 2 * Math.PI * r;
 	const offset = circumference * (1 - Math.min(1, Math.max(0, utilization)));
 	const color = utilization > .8 ? "text-red-400" : utilization > .5 ? "text-yellow-400" : "text-emerald-400";
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
 		className: `relative shrink-0 ${className ?? ""}`,
+		style: {
+			width: size,
+			height: size
+		},
 		title: `Context: ${pct}%`,
 		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", {
-			width: "26",
-			height: "26",
-			viewBox: "0 0 26 26",
+			width: size,
+			height: size,
+			viewBox: `0 0 ${size} ${size}`,
 			className: "rotate-[-90deg]",
 			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", {
-				cx: "13",
-				cy: "13",
+				cx: c,
+				cy: c,
 				r,
 				fill: "none",
-				strokeWidth: "3",
+				strokeWidth: stroke,
 				className: "stroke-muted-foreground/20"
 			}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", {
-				cx: "13",
-				cy: "13",
+				cx: c,
+				cy: c,
 				r,
 				fill: "none",
-				strokeWidth: "3",
+				strokeWidth: stroke,
 				strokeDasharray: circumference,
 				strokeDashoffset: offset,
 				strokeLinecap: "round",
 				className: `${color} stroke-current transition-all duration-500`
 			})]
 		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
-			className: `absolute inset-0 flex items-center justify-center text-[8px] font-semibold leading-none ${color}`,
+			className: `absolute inset-0 flex items-center justify-center font-semibold leading-none ${color}`,
+			style: { fontSize: size >= 24 ? 8 : 7 },
 			children: pct
 		})]
 	});
@@ -125643,6 +125716,8 @@ function AgentListPanel({ threads, onSelectAgent }) {
 	const chatAgentTagFilter = useRelayStore((s) => s.chatAgentTagFilter);
 	const chatAgentCapFilter = useRelayStore((s) => s.chatAgentCapFilter);
 	const chatAgentHostFilter = useRelayStore((s) => s.chatAgentHostFilter);
+	const chatAgentGroupBy = useRelayStore((s) => s.chatAgentGroupBy);
+	const chatAgentFiltersCollapsed = useRelayStore((s) => s.chatAgentFiltersCollapsed);
 	const now = useNow();
 	const chatAgents = useChatAgents();
 	const threadByPeer = (0, import_react.useMemo)(() => {
@@ -125666,161 +125741,287 @@ function AgentListPanel({ threads, onSelectAgent }) {
 	const uniqueTags = (0, import_react.useMemo)(() => [...new Set(chatAgents.flatMap((a) => a.tags || []))], [chatAgents]);
 	const uniqueCaps = (0, import_react.useMemo)(() => [...new Set(chatAgents.flatMap((a) => userFacingCapabilities(a.capabilities || [])))], [chatAgents]);
 	const uniqueHosts = useUniqueHosts();
+	const groupedAgents = (0, import_react.useMemo)(() => {
+		if (chatAgentGroupBy !== "project") return null;
+		const groups = /* @__PURE__ */ new Map();
+		for (const a of sortedAgents) {
+			const key = agentProjectName(a) || "No project";
+			const bucket = groups.get(key);
+			if (bucket) bucket.push(a);
+			else groups.set(key, [a]);
+		}
+		return [...groups.entries()].sort((a, b) => a[0].localeCompare(b[0]));
+	}, [sortedAgents, chatAgentGroupBy]);
+	const activeFilterCount = [
+		chatAgentProviderFilter,
+		chatAgentStatusFilter,
+		chatAgentTagFilter,
+		chatAgentCapFilter,
+		chatAgentHostFilter
+	].filter(Boolean).length;
 	function handleSelect(id) {
 		openInboxThread(id, threadByPeer.get(id)?.messages);
 		onSelectAgent?.(id);
 	}
-	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-		className: "flex flex-col h-full border-r border-border min-w-0",
-		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-			className: "p-3 border-b border-border space-y-2",
-			children: [
-				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-					className: "relative",
-					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Search, { className: "absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-muted-foreground pointer-events-none" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Input, {
-						placeholder: "Search agents...",
-						value: chatAgentSearch,
-						onChange: (e) => set({ chatAgentSearch: e.target.value }),
-						className: "pl-8 h-7 text-xs"
-					})]
-				}),
-				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-					className: "flex items-center gap-1.5",
-					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("select", {
-						value: chatAgentSort,
-						onChange: (e) => set({ chatAgentSort: e.target.value }),
-						className: "flex-1 h-6 text-xs rounded-md border border-border bg-background px-1.5 text-foreground",
+	function renderAgentRow(agent) {
+		const thread = threadByPeer.get(agent.id);
+		const unread = thread?.attention.unread || 0;
+		const lastMsg = thread?.previewMessage;
+		const lastActivityAt = threadActivityTimestamp(thread);
+		const isSelected = selectedInboxThread === agent.id;
+		const ws = agentWorkspaceMeta(agent);
+		const project = agentProjectName(agent);
+		const WsIcon = ws.Icon;
+		return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", {
+			className: cn$2("w-full text-left px-3 py-2.5 flex items-start gap-2.5 hover:bg-muted/50 transition-colors border-b border-border/50", isSelected && "bg-muted/60"),
+			onClick: () => handleSelect(agent.id),
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				className: "relative shrink-0 mt-0.5",
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(AgentTypeIcon, { agent }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StatusDot, {
+					agent,
+					now,
+					className: "absolute -bottom-0.5 -right-0.5 w-2 h-2"
+				})]
+			}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				className: "flex-1 min-w-0",
+				children: [
+					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+						className: "flex items-center justify-between gap-1 mb-0.5",
+						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+							className: "text-xs font-medium truncate",
+							children: displayName(agent)
+						}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+							className: "flex items-center gap-1 shrink-0",
+							children: [lastActivityAt > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+								className: "text-[10px] text-muted-foreground",
+								title: fmtTime$1(lastActivityAt),
+								children: timeAgo(now, lastActivityAt)
+							}), unread > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Badge$1, {
+								className: "bg-red-500 text-white text-xs min-w-[18px] h-[18px] flex items-center justify-center shrink-0 px-1",
+								children: unread
+							})]
+						})]
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+						className: "flex items-center gap-1.5 mb-0.5 text-[10px] text-muted-foreground",
 						children: [
-							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", {
-								value: "status",
-								children: "By status"
-							}),
-							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", {
-								value: "name",
-								children: "By name"
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+								title: ws.title,
+								className: "inline-flex shrink-0",
+								children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(WsIcon, { className: cn$2("h-3 w-3", ws.iconColor) })
 							}),
-							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", {
-								value: "lastSeen",
-								children: "By last seen"
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+								className: "truncate",
+								children: project || ws.label
 							}),
-							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", {
-								value: "lastMessage",
-								children: "By last activity"
+							agent.context && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+								className: "ml-auto shrink-0",
+								children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ContextRing, {
+									utilization: agent.context.utilization,
+									size: 18
+								})
 							})
 						]
-					}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, {
-						variant: "ghost",
-						size: "icon-xs",
-						onClick: () => set({ chatAgentSortDir: chatAgentSortDir === "asc" ? "desc" : "asc" }),
-						children: chatAgentSortDir === "asc" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ArrowUpNarrowWide, { className: "w-3.5 h-3.5" }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ArrowDownWideNarrow, { className: "w-3.5 h-3.5" })
-					})]
-				}),
-				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-					className: "flex gap-1",
-					children: [
-						/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("select", {
-							value: chatAgentProviderFilter,
-							onChange: (e) => set({ chatAgentProviderFilter: e.target.value }),
-							className: "flex-1 h-6 text-xs rounded-md border border-border bg-background px-1.5 text-foreground",
+					}),
+					lastMsg && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", {
+						className: "text-xs text-muted-foreground truncate leading-tight",
+						children: [lastMsg.from === "user" ? "You: " : "", messagePreview(lastMsg)]
+					}),
+					agent.status !== "offline" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+						className: "mt-1",
+						children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+							className: cn$2("text-xs", agent.status === "busy" ? "text-yellow-400" : "text-emerald-400"),
+							children: agent.status
+						})
+					})
+				]
+			})]
+		}) }, agent.id);
+	}
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: "flex flex-col h-full border-r border-border min-w-0",
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				className: "p-3 border-b border-border space-y-2",
+				children: [
+					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+						className: "relative",
+						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Search, { className: "absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-muted-foreground pointer-events-none" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Input, {
+							placeholder: "Search agents...",
+							value: chatAgentSearch,
+							onChange: (e) => set({ chatAgentSearch: e.target.value }),
+							className: "pl-8 h-7 text-xs"
+						})]
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", {
+						type: "button",
+						onClick: () => set({ chatAgentFiltersCollapsed: !chatAgentFiltersCollapsed }),
+						className: "sm:hidden flex w-full items-center justify-between h-6 px-1.5 text-xs rounded-md border border-border bg-background text-muted-foreground",
+						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+							className: "inline-flex items-center gap-1.5",
 							children: [
-								/* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", {
-									value: "",
-									children: "All types"
-								}),
-								/* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", {
-									value: "claude",
-									children: "Claude"
-								}),
-								/* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", {
-									value: "codex",
-									children: "Codex"
-								}),
-								/* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", {
-									value: "agent",
-									children: "Agent"
-								}),
-								/* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", {
-									value: "user",
-									children: "User"
+								/* @__PURE__ */ (0, import_jsx_runtime.jsx)(SlidersHorizontal, { className: "w-3.5 h-3.5" }),
+								"Filters & sort",
+								activeFilterCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Badge$1, {
+									className: "bg-primary/20 text-primary text-[10px] h-4 min-w-4 px-1 flex items-center justify-center",
+									children: activeFilterCount
 								})
 							]
-						}),
-						/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("select", {
-							value: chatAgentStatusFilter,
-							onChange: (e) => set({ chatAgentStatusFilter: e.target.value }),
-							className: "flex-1 h-6 text-xs rounded-md border border-border bg-background px-1.5 text-foreground",
-							children: [
-								/* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", {
+						}), chatAgentFiltersCollapsed ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChevronDown, { className: "w-3.5 h-3.5" }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChevronUp, { className: "w-3.5 h-3.5" })]
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+						className: cn$2("space-y-2", chatAgentFiltersCollapsed ? "hidden" : "block", "sm:block"),
+						children: [
+							/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+								className: "flex items-center gap-1.5",
+								children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("select", {
+									value: chatAgentSort,
+									onChange: (e) => set({ chatAgentSort: e.target.value }),
+									className: "flex-1 h-6 text-xs rounded-md border border-border bg-background px-1.5 text-foreground",
+									children: [
+										/* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", {
+											value: "status",
+											children: "By status"
+										}),
+										/* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", {
+											value: "name",
+											children: "By name"
+										}),
+										/* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", {
+											value: "lastSeen",
+											children: "By last seen"
+										}),
+										/* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", {
+											value: "lastMessage",
+											children: "By last activity"
+										})
+									]
+								}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, {
+									variant: "ghost",
+									size: "icon-xs",
+									onClick: () => set({ chatAgentSortDir: chatAgentSortDir === "asc" ? "desc" : "asc" }),
+									children: chatAgentSortDir === "asc" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ArrowUpNarrowWide, { className: "w-3.5 h-3.5" }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ArrowDownWideNarrow, { className: "w-3.5 h-3.5" })
+								})]
+							}),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("select", {
+								value: chatAgentGroupBy,
+								onChange: (e) => set({ chatAgentGroupBy: e.target.value }),
+								className: "w-full h-6 text-xs rounded-md border border-border bg-background px-1.5 text-foreground",
+								children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", {
 									value: "",
-									children: "All status"
-								}),
-								/* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", {
-									value: "online",
-									children: "Online"
-								}),
-								/* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", {
-									value: "idle",
-									children: "Idle"
-								}),
-								/* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", {
-									value: "busy",
-									children: "Busy"
-								}),
-								/* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", {
-									value: "offline",
-									children: "Offline"
-								})
-							]
-						}),
-						uniqueHosts.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("select", {
-							value: chatAgentHostFilter,
-							onChange: (e) => set({ chatAgentHostFilter: e.target.value }),
-							className: "flex-1 h-6 text-xs rounded-md border border-border bg-background px-1.5 text-foreground",
-							children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", {
-								value: "",
-								children: "All hosts"
-							}), uniqueHosts.map((h) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", {
-								value: h,
-								children: h
-							}, h))]
-						})
-					]
-				}),
-				(uniqueTags.length > 0 || uniqueCaps.length > 0) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-					className: "flex gap-1",
-					children: [uniqueTags.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("select", {
-						value: chatAgentTagFilter,
-						onChange: (e) => set({ chatAgentTagFilter: e.target.value }),
-						className: "flex-1 h-6 text-xs rounded-md border border-border bg-background px-1.5 text-foreground",
-						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", {
-							value: "",
-							children: "All tags"
-						}), uniqueTags.map((t) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("option", {
-							value: t,
-							children: ["#", t]
-						}, t))]
-					}), uniqueCaps.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("select", {
-						value: chatAgentCapFilter,
-						onChange: (e) => set({ chatAgentCapFilter: e.target.value }),
-						className: "flex-1 h-6 text-xs rounded-md border border-border bg-background px-1.5 text-foreground",
-						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", {
-							value: "",
-							children: "All caps"
-						}), uniqueCaps.map((c) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", {
-							value: c,
-							children: c
-						}, c))]
-					})]
-				})
-			]
-		}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-			className: "flex-1 overflow-y-auto",
-			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", {
+									children: "No grouping"
+								}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", {
+									value: "project",
+									children: "Group by project"
+								})]
+							}),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+								className: "flex gap-1",
+								children: [
+									/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("select", {
+										value: chatAgentProviderFilter,
+										onChange: (e) => set({ chatAgentProviderFilter: e.target.value }),
+										className: "flex-1 h-6 text-xs rounded-md border border-border bg-background px-1.5 text-foreground",
+										children: [
+											/* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", {
+												value: "",
+												children: "All types"
+											}),
+											/* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", {
+												value: "claude",
+												children: "Claude"
+											}),
+											/* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", {
+												value: "codex",
+												children: "Codex"
+											}),
+											/* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", {
+												value: "agent",
+												children: "Agent"
+											}),
+											/* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", {
+												value: "user",
+												children: "User"
+											})
+										]
+									}),
+									/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("select", {
+										value: chatAgentStatusFilter,
+										onChange: (e) => set({ chatAgentStatusFilter: e.target.value }),
+										className: "flex-1 h-6 text-xs rounded-md border border-border bg-background px-1.5 text-foreground",
+										children: [
+											/* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", {
+												value: "",
+												children: "All status"
+											}),
+											/* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", {
+												value: "online",
+												children: "Online"
+											}),
+											/* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", {
+												value: "idle",
+												children: "Idle"
+											}),
+											/* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", {
+												value: "busy",
+												children: "Busy"
+											}),
+											/* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", {
+												value: "offline",
+												children: "Offline"
+											})
+										]
+									}),
+									uniqueHosts.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("select", {
+										value: chatAgentHostFilter,
+										onChange: (e) => set({ chatAgentHostFilter: e.target.value }),
+										className: "flex-1 h-6 text-xs rounded-md border border-border bg-background px-1.5 text-foreground",
+										children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", {
+											value: "",
+											children: "All hosts"
+										}), uniqueHosts.map((h) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", {
+											value: h,
+											children: h
+										}, h))]
+									})
+								]
+							}),
+							(uniqueTags.length > 0 || uniqueCaps.length > 0) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+								className: "flex gap-1",
+								children: [uniqueTags.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("select", {
+									value: chatAgentTagFilter,
+									onChange: (e) => set({ chatAgentTagFilter: e.target.value }),
+									className: "flex-1 h-6 text-xs rounded-md border border-border bg-background px-1.5 text-foreground",
+									children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", {
+										value: "",
+										children: "All tags"
+									}), uniqueTags.map((t) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("option", {
+										value: t,
+										children: ["#", t]
+									}, t))]
+								}), uniqueCaps.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("select", {
+									value: chatAgentCapFilter,
+									onChange: (e) => set({ chatAgentCapFilter: e.target.value }),
+									className: "flex-1 h-6 text-xs rounded-md border border-border bg-background px-1.5 text-foreground",
+									children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", {
+										value: "",
+										children: "All caps"
+									}), uniqueCaps.map((c) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", {
+										value: c,
+										children: c
+									}, c))]
+								})]
+							})
+						]
+					})
+				]
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", {
 				type: "button",
-				className: "flex w-full items-start gap-2.5 border-b border-border/50 px-3 py-2.5 text-left transition-colors hover:bg-muted/50",
+				className: "flex w-full shrink-0 items-center gap-2.5 border-b border-border px-3 py-2 text-left transition-colors hover:bg-muted/50",
 				onClick: openAgentSpawn,
 				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-					className: "mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-full border border-dashed border-primary/50 bg-primary/10 text-primary",
+					className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-full border border-dashed border-primary/50 bg-primary/10 text-primary",
 					children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Plus, { className: "h-3.5 w-3.5" })
 				}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
 					className: "min-w-0 flex-1",
@@ -125828,71 +126029,31 @@ function AgentListPanel({ threads, onSelectAgent }) {
 						className: "text-xs font-medium",
 						children: "New Agent"
 					}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-						className: "mt-0.5 truncate text-xs text-muted-foreground",
+						className: "truncate text-[10px] text-muted-foreground",
 						children: "Spawn a fresh chat agent"
 					})]
 				})]
-			}), sortedAgents.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-				className: "flex flex-col items-center justify-center py-10 text-center px-4",
-				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Bot, { className: "w-8 h-8 text-zinc-600 mb-2" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
-					className: "text-xs text-muted-foreground",
-					children: "No agents match filters"
-				})]
-			}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { children: sortedAgents.map((agent) => {
-				const thread = threadByPeer.get(agent.id);
-				const unread = thread?.attention.unread || 0;
-				const lastMsg = thread?.previewMessage;
-				const lastActivityAt = threadActivityTimestamp(thread);
-				return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", {
-					className: cn$2("w-full text-left px-3 py-2.5 flex items-start gap-2.5 hover:bg-muted/50 transition-colors border-b border-border/50", selectedInboxThread === agent.id && "bg-muted/60"),
-					onClick: () => handleSelect(agent.id),
-					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-						className: "relative shrink-0 mt-0.5",
-						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(AgentTypeIcon, { agent }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StatusDot, {
-							agent,
-							now,
-							className: "absolute -bottom-0.5 -right-0.5 w-2 h-2"
-						})]
-					}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-						className: "flex-1 min-w-0",
-						children: [
-							/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-								className: "flex items-center justify-between gap-1 mb-0.5",
-								children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
-									className: "text-xs font-medium truncate",
-									children: displayName(agent)
-								}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-									className: "flex items-center gap-1 shrink-0",
-									children: [lastActivityAt > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
-										className: "text-[10px] text-muted-foreground",
-										title: fmtTime$1(lastActivityAt),
-										children: timeAgo(now, lastActivityAt)
-									}), unread > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Badge$1, {
-										className: "bg-red-500 text-white text-xs min-w-[18px] h-[18px] flex items-center justify-center shrink-0 px-1",
-										children: unread
-									})]
-								})]
-							}),
-							typeof agent.meta?.cwd === "string" && agent.meta.cwd && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-								className: "font-mono text-[10px] text-muted-foreground/60 truncate",
-								children: shortPath$1(agent.meta.cwd)
-							}),
-							lastMsg && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", {
-								className: "text-xs text-muted-foreground truncate leading-tight",
-								children: [lastMsg.from === "user" ? "You: " : "", messagePreview(lastMsg)]
-							}),
-							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-								className: "flex flex-wrap gap-1 mt-1",
-								children: agent.status !== "offline" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
-									className: cn$2("text-xs", agent.status === "busy" ? "text-yellow-400" : agent.status === "idle" ? "text-emerald-400" : "text-emerald-400"),
-									children: agent.status
-								})
-							})
-						]
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+				className: "flex-1 overflow-y-auto",
+				children: sortedAgents.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+					className: "flex flex-col items-center justify-center py-10 text-center px-4",
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Bot, { className: "w-8 h-8 text-zinc-600 mb-2" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+						className: "text-xs text-muted-foreground",
+						children: "No agents match filters"
 					})]
-				}) }, agent.id);
-			}) })]
-		})]
+				}) : groupedAgents ? groupedAgents.map(([project, agents]) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+					className: "sticky top-0 z-10 flex items-center gap-1.5 border-b border-border/50 bg-background/95 px-3 py-1 text-[10px] font-medium uppercase tracking-wide text-muted-foreground backdrop-blur",
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+						className: "truncate",
+						children: project
+					}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+						className: "text-muted-foreground/50",
+						children: agents.length
+					})]
+				}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { children: agents.map(renderAgentRow) })] }, project)) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { children: sortedAgents.map(renderAgentRow) })
+			})
+		]
 	});
 }
 function chatTimestamp(iso) {
@@ -125952,40 +126113,6 @@ var TIMELINE_STATUS_LABELS = {
 var TIMELINE_STATUSES = new Set(Object.keys(TIMELINE_STATUS_LABELS));
 var STATUS_DEDUPE_WINDOW_MS = 3e3;
 var CHAT_BOTTOM_THRESHOLD_PX = 96;
-var KOKORO_VOICES = [
-	{
-		id: "am_michael",
-		label: "Michael (US ♂)"
-	},
-	{
-		id: "am_adam",
-		label: "Adam (US ♂)"
-	},
-	{
-		id: "af_heart",
-		label: "Heart (US ♀)"
-	},
-	{
-		id: "af_bella",
-		label: "Bella (US ♀)"
-	},
-	{
-		id: "af_nicole",
-		label: "Nicole (US ♀)"
-	},
-	{
-		id: "af_sarah",
-		label: "Sarah (US ♀)"
-	},
-	{
-		id: "bm_george",
-		label: "George (UK ♂)"
-	},
-	{
-		id: "bf_emma",
-		label: "Emma (UK ♀)"
-	}
-];
 function StatusMarker({ event }) {
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
 		className: "flex items-center justify-center gap-2 py-2 my-1",
@@ -127145,21 +127272,7 @@ function ChatPanel({ threads, onBack, showBackButton }) {
 	const fetchOrchestrators = useRelayStore((s) => s.fetchOrchestrators);
 	const voiceTtsEnabled = useRelayStore((s) => s.voiceTtsEnabled);
 	const setVoiceTtsEnabled = useRelayStore((s) => s.setVoiceTtsEnabled);
-	const voiceTtsLang = useRelayStore((s) => s.voiceTtsLang);
-	const setVoiceTtsLang = useRelayStore((s) => s.setVoiceTtsLang);
-	const voiceTtsMode = useRelayStore((s) => s.voiceTtsMode);
-	const setVoiceTtsMode = useRelayStore((s) => s.setVoiceTtsMode);
-	const voiceTtsKokoroVoice = useRelayStore((s) => s.voiceTtsKokoroVoice);
-	const setVoiceTtsKokoroVoice = useRelayStore((s) => s.setVoiceTtsKokoroVoice);
 	const voiceInputMode = useRelayStore((s) => s.voiceInputMode);
-	const [speechLangs, setSpeechLangs] = (0, import_react.useState)(() => availableSpeechLangs());
-	(0, import_react.useEffect)(() => {
-		if (!voiceTts.available) return;
-		const refresh = () => setSpeechLangs(availableSpeechLangs());
-		refresh();
-		window.speechSynthesis.addEventListener?.("voiceschanged", refresh);
-		return () => window.speechSynthesis.removeEventListener?.("voiceschanged", refresh);
-	}, []);
 	const fileInputRef = (0, import_react.useRef)(null);
 	const pttRecorderRef = (0, import_react.useRef)(null);
 	const [micState, setMicState] = (0, import_react.useState)("idle");
@@ -127583,52 +127696,11 @@ function ChatPanel({ threads, onBack, showBackButton }) {
 								voiceTts.available && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, {
 									variant: "ghost",
 									size: "icon-sm",
-									title: voiceTtsEnabled ? "Speaking agent responses aloud — click to mute" : "Speak agent responses aloud (active chat)",
+									title: voiceTtsEnabled ? "Speaking agent responses aloud — click to mute (engine & voice in Settings)" : "Speak agent responses aloud (active chat) — engine & voice in Settings",
 									className: voiceTtsEnabled ? "text-primary" : "",
 									onClick: () => setVoiceTtsEnabled(!voiceTtsEnabled),
 									children: voiceTtsEnabled ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Volume2, { className: "w-3.5 h-3.5" }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(VolumeX, { className: "w-3.5 h-3.5" })
 								}),
-								voiceTts.available && voiceTtsEnabled && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("select", {
-									value: voiceTtsMode,
-									onChange: (e) => setVoiceTtsMode(e.target.value),
-									title: "Voice engine — Kokoro (server, natural) falls back to browser automatically",
-									className: "h-7 rounded border border-border bg-background px-1 text-xs",
-									children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", {
-										value: "kokoro",
-										children: "Kokoro"
-									}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", {
-										value: "browser",
-										children: "Browser"
-									})]
-								}), voiceTtsMode === "kokoro" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("select", {
-									value: voiceTtsKokoroVoice,
-									onChange: (e) => setVoiceTtsKokoroVoice(e.target.value),
-									title: "Kokoro voice",
-									className: "h-7 rounded border border-border bg-background px-1 text-xs",
-									children: [...KOKORO_VOICES, ...KOKORO_VOICES.some((v) => v.id === voiceTtsKokoroVoice) ? [] : [{
-										id: voiceTtsKokoroVoice,
-										label: voiceTtsKokoroVoice
-									}]].map((v) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", {
-										value: v.id,
-										children: v.label
-									}, v.id))
-								}) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("select", {
-									value: voiceTtsLang,
-									onChange: (e) => setVoiceTtsLang(e.target.value),
-									title: "Voice language",
-									className: "h-7 rounded border border-border bg-background px-1 text-xs",
-									children: [[...new Set([
-										"en-US",
-										...speechLangs,
-										...voiceTtsLang ? [voiceTtsLang] : []
-									])].sort().map((l) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", {
-										value: l,
-										children: l
-									}, l)), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", {
-										value: "",
-										children: "Browser default"
-									})]
-								})] }),
 								canOpenTerminal && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, {
 									variant: "ghost",
 									size: "icon-sm",
@@ -154222,30 +154294,101 @@ function WorkspaceSettings() {
 	});
 }
 function VoiceSettings() {
+	const voiceTtsEnabled = useRelayStore((s) => s.voiceTtsEnabled);
+	const setVoiceTtsEnabled = useRelayStore((s) => s.setVoiceTtsEnabled);
+	const voiceTtsMode = useRelayStore((s) => s.voiceTtsMode);
+	const setVoiceTtsMode = useRelayStore((s) => s.setVoiceTtsMode);
+	const voiceTtsKokoroVoice = useRelayStore((s) => s.voiceTtsKokoroVoice);
+	const setVoiceTtsKokoroVoice = useRelayStore((s) => s.setVoiceTtsKokoroVoice);
+	const voiceTtsBrowserVoice = useRelayStore((s) => s.voiceTtsBrowserVoice);
+	const setVoiceTtsBrowserVoice = useRelayStore((s) => s.setVoiceTtsBrowserVoice);
 	const voiceInputMode = useRelayStore((s) => s.voiceInputMode);
 	const setVoiceInputMode = useRelayStore((s) => s.setVoiceInputMode);
+	const [browserVoices, setBrowserVoices] = (0, import_react.useState)(() => availableSpeechVoices());
+	(0, import_react.useEffect)(() => {
+		if (typeof window === "undefined" || !("speechSynthesis" in window)) return;
+		const refresh = () => setBrowserVoices(availableSpeechVoices());
+		refresh();
+		window.speechSynthesis.addEventListener?.("voiceschanged", refresh);
+		return () => window.speechSynthesis.removeEventListener?.("voiceschanged", refresh);
+	}, []);
+	const kokoroOptions = KOKORO_VOICES.some((v) => v.id === voiceTtsKokoroVoice) ? KOKORO_VOICES : [...KOKORO_VOICES, {
+		id: voiceTtsKokoroVoice,
+		label: voiceTtsKokoroVoice
+	}];
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", {
 		className: "space-y-3 rounded-lg border p-4",
-		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", {
-			className: "text-sm font-semibold",
-			children: "Voice"
-		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
-			className: "text-xs text-muted-foreground",
-			children: "How push-to-talk behaves in chat."
-		})] }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Field, {
-			label: "Push-to-talk input",
-			children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Select$1, {
-				value: voiceInputMode,
-				onValueChange: (v) => setVoiceInputMode(v),
-				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectTrigger, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectValue, {}) }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(SelectContent, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectItem, {
-					value: "compose",
-					children: "Fill the message box (review, then Enter)"
-				}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectItem, {
-					value: "autosend",
-					children: "Send immediately (speak-and-send)"
-				})] })]
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				className: "flex items-center justify-between gap-2",
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Volume2, { className: "w-4 h-4" }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", {
+						className: "text-sm font-semibold",
+						children: "Voice"
+					}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+						className: "text-xs text-muted-foreground",
+						children: "Speak agent responses aloud in the active chat, and how push-to-talk behaves."
+					})] })]
+				}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Switch, {
+					checked: voiceTtsEnabled,
+					onCheckedChange: setVoiceTtsEnabled
+				})]
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Field, {
+				label: "Speech engine",
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Select$1, {
+					value: voiceTtsMode,
+					onValueChange: (v) => setVoiceTtsMode(v),
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectTrigger, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectValue, {}) }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(SelectContent, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectItem, {
+						value: "kokoro",
+						children: "Kokoro (server, natural — falls back to browser)"
+					}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectItem, {
+						value: "browser",
+						children: "Browser (Web Speech API)"
+					})] })]
+				})
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Field, {
+				label: "Kokoro voice",
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Select$1, {
+					value: voiceTtsKokoroVoice,
+					onValueChange: setVoiceTtsKokoroVoice,
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectTrigger, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectValue, {}) }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectContent, { children: kokoroOptions.map((v) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectItem, {
+						value: v.id,
+						children: v.label
+					}, v.id)) })]
+				})
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Field, {
+				label: "Browser voice",
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Select$1, {
+					value: voiceTtsBrowserVoice || "__default__",
+					onValueChange: (v) => setVoiceTtsBrowserVoice(v === "__default__" ? "" : v),
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectTrigger, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectValue, {}) }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(SelectContent, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectItem, {
+						value: "__default__",
+						children: "System default"
+					}), browserVoices.map((v) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectItem, {
+						value: v.uri,
+						children: v.label
+					}, v.uri))] })]
+				})
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Field, {
+				label: "Push-to-talk input",
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Select$1, {
+					value: voiceInputMode,
+					onValueChange: (v) => setVoiceInputMode(v),
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectTrigger, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectValue, {}) }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(SelectContent, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectItem, {
+						value: "compose",
+						children: "Fill the message box (review, then Enter)"
+					}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectItem, {
+						value: "autosend",
+						children: "Send immediately (speak-and-send)"
+					})] })]
+				})
 			})
-		})]
+		]
 	});
 }
 var EFFORTS = [
@@ -159927,6 +160070,10 @@ if ("serviceWorker" in navigator) {
     min-width: calc(var(--spacing) * 0);
   }
 
+  .min-w-4 {
+    min-width: calc(var(--spacing) * 4);
+  }
+
   .min-w-5 {
     min-width: calc(var(--spacing) * 5);
   }
@@ -160981,6 +161128,16 @@ if ("serviceWorker" in navigator) {
     }
   }
 
+  .bg-background\/95 {
+    background-color: var(--background);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-background\/95 {
+      background-color: color-mix(in oklab, var(--background) 95%, transparent);
+    }
+  }
+
   .bg-black\/0 {
     background-color: #0000;
   }
@@ -161851,10 +162008,6 @@ if ("serviceWorker" in navigator) {
     font-size: .8rem;
   }
 
-  .text-\[8px\] {
-    font-size: 8px;
-  }
-
   .text-\[9px\] {
     font-size: 9px;
   }
@@ -163469,6 +163622,10 @@ if ("serviceWorker" in navigator) {
   }
 
   @media (min-width: 40rem) {
+    .sm\:block {
+      display: block;
+    }
+
     .sm\:flex {
       display: flex;
     }

package/runner/src/adapter.ts

@@ -84,6 +84,9 @@ export interface RunnerSpawnConfig {
   providerConfig: ProviderConfig;
   env: Record<string, string>;
   controlPort: number;
+  // Stage 2 (#215): the MCP endpoint the agent connects to — the runner-local proxy URL when the
+  // proxy is active. Undefined → the adapter targets the relay's MCP endpoint directly (Stage 1).
+  relayMcpEndpoint?: string;
   monitor?: {
     deliver(messages: Message[]): Promise<number[]>;
   };