agent-relay-server 0.21.0 → 0.23.0

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 [];
 	}
@@ -12099,9 +12146,11 @@ function isDashboardHidden() {
 function notificationPeer(notification) {
 	return notification.threadPeer || notification.agentId || "";
 }
+function isActiveVisibleChat(peer, state) {
+	return Boolean(peer && state.view === "chat" && state.selectedInboxThread === peer && !isDashboardHidden());
+}
 function notificationTargetsActiveChat(notification, state) {
-	const peer = notificationPeer(notification);
-	return Boolean(state.view === "chat" && peer && state.selectedInboxThread === peer && !isDashboardHidden());
+	return isActiveVisibleChat(notificationPeer(notification), state);
 }
 function lastInboundMessageId(messages) {
 	return messages.filter((m) => m.to === "user" && m.from !== "user").reduce((max, m) => Math.max(max, m.id), 0);
@@ -12174,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",
@@ -12218,6 +12268,8 @@ var useRelayStore = create$1()(persist((set, get) => ({
 	chatAgentHostFilter: "",
 	chatAgentSort: "status",
 	chatAgentSortDir: "asc",
+	chatAgentGroupBy: "",
+	chatAgentFiltersCollapsed: true,
 	chatStatusEvents: {},
 	chatStickToBottom: true,
 	chatHasNewItems: false,
@@ -12380,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 });
 	},
@@ -12396,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({
@@ -12835,7 +12892,15 @@ var useRelayStore = create$1()(persist((set, get) => ({
 			if (s.view === "messages" && s.selectedAgent) path += "&for=" + encodeURIComponent(s.selectedAgent);
 			if (s.view === "messages" && s.channelFilter) path += "&channel=" + encodeURIComponent(s.channelFilter);
 			const messages = await api("GET", path);
-			set({ messages: mergeFetchedMessages(get().messages, messages) });
+			const merged = mergeFetchedMessages(get().messages, messages);
+			set({ messages: merged });
+			const after = get();
+			const peer = after.selectedInboxThread;
+			if (isActiveVisibleChat(peer, after)) {
+				let lastId = 0;
+				for (const m of merged) if (m.id > lastId && inboxPeer(m) === peer && isHumanInboundMessage(m) && !isSessionActivityStep(m)) lastId = m.id;
+				if (lastId) get().markInboxThreadReadTo(peer, lastId);
+			}
 		} catch {}
 	},
 	async fetchThreadHistory(peer) {
@@ -12936,7 +13001,7 @@ var useRelayStore = create$1()(persist((set, get) => ({
 					if (msgs.length > 500) msgs.splice(0, msgs.length - 500);
 					set({ messages: msgs });
 					const peer = inboxPeer(msg);
-					if (isHumanInboundMessage(msg) && peer && s.view === "chat" && s.selectedInboxThread === peer && !isDashboardHidden()) get().markInboxThreadReadTo(peer, msg.id);
+					if (isHumanInboundMessage(msg) && isActiveVisibleChat(peer, s)) get().markInboxThreadReadTo(peer, msg.id);
 					return;
 				}
 				if (event === "message.queued" || event === "message.expired" || event === "message.delivery_updated" || event === "message.reaction_updated") {
@@ -14510,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,
@@ -14528,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,
@@ -99801,6 +99869,45 @@ function Button({ className, variant = "default", size = "default", asChild = fa
 	});
 }
 //#endregion
+//#region src/components/shared/copy-button.tsx
+/**
+* Shared copy-to-clipboard button with a transient "copied" check state.
+* Consolidates the duplicated clipboard + timeout pattern used across views.
+*/
+function CopyButton({ value, label = "Copy", copiedLabel = "Copied", showText = false, size, variant = "ghost", className, iconClassName, disabled, onCopied }) {
+	const [copied, setCopied] = (0, import_react.useState)(false);
+	const timer = (0, import_react.useRef)(null);
+	(0, import_react.useEffect)(() => () => {
+		if (timer.current) clearTimeout(timer.current);
+	}, []);
+	async function copy(e) {
+		e.preventDefault();
+		e.stopPropagation();
+		try {
+			await navigator.clipboard?.writeText(typeof value === "function" ? value() : value);
+			setCopied(true);
+			onCopied?.();
+			if (timer.current) clearTimeout(timer.current);
+			timer.current = setTimeout(() => setCopied(false), 1400);
+		} catch {
+			setCopied(false);
+		}
+	}
+	const resolvedSize = size ?? (showText ? "sm" : "icon-sm");
+	const iconCls = cn$2("h-3.5 w-3.5", iconClassName);
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Button, {
+		type: "button",
+		size: resolvedSize,
+		variant,
+		className,
+		disabled,
+		title: copied ? copiedLabel : label,
+		"aria-label": copied ? copiedLabel : label,
+		onClick: (e) => void copy(e),
+		children: [copied ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Check, { className: iconCls }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Copy, { className: iconCls }), showText && (copied ? copiedLabel : label)]
+	});
+}
+//#endregion
 //#region \0vite/preload-helper.js
 var scriptRel, assetsURL, seen, __vitePreload;
 var init_preload_helper = __esmMin((() => {
@@ -108465,25 +108572,14 @@ var CodePreview = (0, import_react.memo)(function CodePreview({ content, path, m
 	const [html, setHtml] = (0, import_react.useState)("");
 	const [loading, setLoading] = (0, import_react.useState)(false);
 	const [failed, setFailed] = (0, import_react.useState)(false);
-	const [copied, setCopied] = (0, import_react.useState)(false);
-	async function copyCode() {
-		try {
-			await navigator.clipboard?.writeText(content);
-			setCopied(true);
-			window.setTimeout(() => setCopied(false), 1400);
-		} catch {
-			setCopied(false);
-		}
-	}
 	function copyButton() {
-		return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, {
-			type: "button",
+		return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CopyButton, {
+			value: content,
+			label: "Copy code",
+			copiedLabel: "Copied code",
 			size: "icon",
 			variant: "ghost",
-			className: "absolute right-2 top-2 h-7 w-7 bg-background/80 opacity-0 shadow-sm backdrop-blur transition-opacity hover:bg-muted group-hover/code:opacity-100 focus-visible:opacity-100",
-			onClick: copyCode,
-			title: copied ? "Copied code" : "Copy code",
-			children: copied ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Check, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Copy, { className: "h-3.5 w-3.5" })
+			className: "absolute right-2 top-2 h-7 w-7 bg-background/80 opacity-0 shadow-sm backdrop-blur transition-opacity hover:bg-muted group-hover/code:opacity-100 focus-visible:opacity-100"
 		});
 	}
 	(0, import_react.useEffect)(() => {
@@ -108780,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",
@@ -108820,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);
@@ -108830,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 {
@@ -108837,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 {
@@ -108844,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;
@@ -108865,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
 		})]
 	});
@@ -124794,7 +124905,6 @@ function FileContent({ orchestratorId, selectedPath, line, onReadError }) {
 	const { file, loading, error } = useFileRead(orchestratorId, selectedPath);
 	const lineRef = (0, import_react.useRef)(null);
 	const [mode, setMode] = (0, import_react.useState)("raw");
-	const [copiedPath, setCopiedPath] = (0, import_react.useState)(false);
 	(0, import_react.useEffect)(() => {
 		onReadError(error);
 	}, [error, onReadError]);
@@ -124816,15 +124926,6 @@ function FileContent({ orchestratorId, selectedPath, line, onReadError }) {
 		file?.content,
 		line
 	]);
-	async function copyPath(path) {
-		try {
-			await navigator.clipboard?.writeText(path);
-			setCopiedPath(true);
-			window.setTimeout(() => setCopiedPath(false), 1400);
-		} catch {
-			setCopiedPath(false);
-		}
-	}
 	function selectMode(nextMode, kind) {
 		setMode(nextMode);
 		if (kind) writeModePreference(kind, nextMode);
@@ -124849,14 +124950,13 @@ function FileContent({ orchestratorId, selectedPath, line, onReadError }) {
 					className: "min-w-0 flex-1 truncate font-mono",
 					children: file.path
 				}),
-				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, {
-					type: "button",
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CopyButton, {
+					value: file.path,
+					label: "Copy path",
+					copiedLabel: "Copied path",
 					size: "icon",
 					variant: "ghost",
-					className: "h-7 w-7 shrink-0",
-					onClick: () => copyPath(file.path),
-					title: copiedPath ? "Copied path" : "Copy path",
-					children: copiedPath ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Check, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Copy, { className: "h-3.5 w-3.5" })
+					className: "h-7 w-7 shrink-0"
 				}),
 				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Badge$1, {
 					variant: "outline",
@@ -124913,14 +125013,13 @@ function FileContent({ orchestratorId, selectedPath, line, onReadError }) {
 						className: "min-w-0 flex-1 truncate font-mono",
 						children: file.path
 					}),
-					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, {
-						type: "button",
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CopyButton, {
+						value: file.path,
+						label: "Copy path",
+						copiedLabel: "Copied path",
 						size: "icon",
 						variant: "ghost",
-						className: "h-7 w-7 shrink-0",
-						onClick: () => copyPath(file.path),
-						title: copiedPath ? "Copied path" : "Copy path",
-						children: copiedPath ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Check, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Copy, { className: "h-3.5 w-3.5" })
+						className: "h-7 w-7 shrink-0"
 					}),
 					file.truncated && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Badge$1, {
 						variant: "secondary",
@@ -125617,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)(() => {
@@ -125640,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",
@@ -125802,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) {
@@ -125926,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",
@@ -127119,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");
@@ -127549,55 +127688,19 @@ function ChatPanel({ threads, onBack, showBackButton }) {
 						}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
 							className: "flex items-center gap-0.5 md:gap-1 shrink-0",
 							children: agent && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+								/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CopyButton, {
+									value: agent.id,
+									label: "Copy agent ID",
+									size: "icon-sm"
+								}),
 								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",
@@ -128193,6 +128296,13 @@ function AgentCard({ agent }) {
 					className: "flex gap-1 mt-2.5 opacity-100 sm:opacity-0 sm:group-hover:opacity-100 transition-opacity",
 					onClick: (e) => e.stopPropagation(),
 					children: [
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CopyButton, {
+							value: agent.id,
+							label: "Copy agent ID",
+							size: "icon",
+							className: "h-7 w-7",
+							iconClassName: "w-3 h-3"
+						}),
 						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, {
 							size: "icon",
 							variant: "ghost",
@@ -129392,9 +129502,6 @@ function WorkspaceActions({ workspace, expanded, onToggleDetails }) {
 	const gitState = useRelayStore((s) => s.workspaceGitState[workspace.id]);
 	const landed = !!gitState && gitState.available !== false && gitState.landed === true;
 	const mergeable = workspace.mode === "isolated" && Boolean(workspace.worktreePath) && MERGEABLE_STATUSES.has(workspace.status) && !landed;
-	async function copyPath() {
-		await navigator.clipboard?.writeText(openPath);
-	}
 	async function merge() {
 		await fetchWorkspaceMergePreview(workspace.id);
 		await workspaceAction(workspace.id, "merge");
@@ -129417,13 +129524,13 @@ function WorkspaceActions({ workspace, expanded, onToggleDetails }) {
 				onClick: () => void openFilesAt({ path: openPath }),
 				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FolderOpen, { className: "h-3.5 w-3.5" })
 			}),
-			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, {
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CopyButton, {
+				value: openPath,
+				label: "Copy path",
+				copiedLabel: "Copied path",
 				size: "icon-sm",
 				variant: "ghost",
-				title: "Copy path",
-				disabled: !openPath,
-				onClick: () => void copyPath(),
-				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Copy, { className: "h-3.5 w-3.5" })
+				disabled: !openPath
 			}),
 			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, {
 				size: "icon-sm",
@@ -130703,10 +130810,6 @@ function SecurityView() {
 		await api("POST", `/tokens/${encodeURIComponent(token.jti)}/revoke`);
 		await refresh();
 	}
-	async function copy(value) {
-		await navigator.clipboard?.writeText(value);
-		setStatus("Copied");
-	}
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
 		className: "space-y-4",
 		children: [
@@ -130936,11 +131039,12 @@ function SecurityView() {
 								children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
 									className: "text-xs text-muted-foreground",
 									children: "New token"
-								}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, {
-									variant: "ghost",
+								}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CopyButton, {
+									value: issuedToken,
+									label: "Copy token",
 									size: "sm",
-									onClick: () => void copy(issuedToken),
-									children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Copy, { className: "h-3.5 w-3.5" })
+									variant: "ghost",
+									onCopied: () => setStatus("Copied")
 								})]
 							}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("code", {
 								className: "block max-h-24 overflow-auto break-all text-xs",
@@ -153632,8 +153736,11 @@ function MaintenanceView() {
 			})]
 		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ScrollArea, {
 			className: "h-[calc(100dvh-10rem)]",
-			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-				className: "overflow-x-auto rounded-md border border-border",
+			children: jobs.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+				className: "rounded-md border border-border px-3 py-12 text-center text-sm text-muted-foreground",
+				children: "No maintenance jobs registered"
+			}) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+				className: "hidden overflow-x-auto rounded-md border border-border md:block",
 				children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("table", {
 					className: "w-full min-w-[980px] text-sm",
 					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("thead", {
@@ -153668,22 +153775,117 @@ function MaintenanceView() {
 								children: "Action"
 							})
 						] })
-					}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tbody", { children: jobs.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", {
-						colSpan: 7,
-						className: "px-3 py-12 text-center text-sm text-muted-foreground",
-						children: "No maintenance jobs registered"
-					}) }) : jobs.map((job) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MaintenanceRow, {
+					}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tbody", { children: jobs.map((job) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MaintenanceRow, {
 						job,
 						now,
 						onRun: () => void runMaintenanceJob(job.id)
 					}, job.id)) })]
 				})
-			})
+			}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+				className: "space-y-3 md:hidden",
+				children: jobs.map((job) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MaintenanceCard, {
+					job,
+					now,
+					onRun: () => void runMaintenanceJob(job.id)
+				}, job.id))
+			})] })
 		})]
 	});
 }
+function jobStatus(job) {
+	return job.running ? "running" : job.enabled ? job.lastStatus : "disabled";
+}
+function StatusBadge({ status }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Badge$1, {
+		variant: "outline",
+		className: cn$2("border", STATUS_CLASS[status] || STATUS_CLASS.idle),
+		children: [statusIcon(status), status]
+	});
+}
+function MaintenanceCard({ job, now, onRun }) {
+	const status = jobStatus(job);
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: "rounded-md border border-border p-3",
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				className: "flex items-start justify-between gap-2",
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+					className: "min-w-0",
+					children: [
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+							className: "font-medium",
+							children: job.title
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+							className: "mt-0.5 text-xs text-muted-foreground",
+							children: job.description
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+							className: "mt-1 font-mono text-[11px] text-muted-foreground/80",
+							children: job.id
+						})
+					]
+				}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StatusBadge, { status })]
+			}),
+			job.consecutiveFailures > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				className: "mt-2 text-xs text-red-400",
+				children: [
+					job.consecutiveFailures,
+					" failure",
+					job.consecutiveFailures === 1 ? "" : "s"
+				]
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("dl", {
+				className: "mt-3 grid grid-cols-3 gap-2 text-xs",
+				children: [
+					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("dt", {
+						className: "text-muted-foreground",
+						children: "Last run"
+					}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("dd", { children: job.lastRunAt ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+						title: fmtTime$1(job.lastRunAt),
+						children: timeAgo(now, job.lastRunAt)
+					}) : "never" })] }),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("dt", {
+						className: "text-muted-foreground",
+						children: "Next run"
+					}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("dd", { children: job.nextRunAt ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+						title: fmtTime$1(job.nextRunAt),
+						children: nextRunText(now, job.nextRunAt)
+					}) : "-" })] }),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("dt", {
+						className: "text-muted-foreground",
+						children: "Duration"
+					}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("dd", { children: job.lastDurationMs !== void 0 ? `${job.lastDurationMs}ms` : "-" })] })
+				]
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				className: "mt-3",
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+					className: "text-xs text-muted-foreground",
+					children: "Result"
+				}), job.lastError ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+					className: "mt-0.5 text-xs text-red-400 line-clamp-3",
+					children: job.lastError
+				}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+					className: "mt-0.5 font-mono text-[11px] text-muted-foreground line-clamp-3",
+					children: resultSummary(job)
+				})]
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+				className: "mt-3 flex justify-end",
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Button, {
+					size: "sm",
+					variant: "outline",
+					disabled: !job.enabled || job.running,
+					onClick: onRun,
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Play, { className: "h-3.5 w-3.5" }), " Run"]
+				})
+			})
+		]
+	});
+}
 function MaintenanceRow({ job, now, onRun }) {
-	const status = job.running ? "running" : job.enabled ? job.lastStatus : "disabled";
+	const status = jobStatus(job);
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("tr", {
 		className: "border-t border-border align-top",
 		children: [
@@ -153706,11 +153908,7 @@ function MaintenanceRow({ job, now, onRun }) {
 			}),
 			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("td", {
 				className: "px-3 py-3",
-				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Badge$1, {
-					variant: "outline",
-					className: cn$2("border", STATUS_CLASS[status] || STATUS_CLASS.idle),
-					children: [statusIcon(status), status]
-				}), job.consecutiveFailures > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(StatusBadge, { status }), job.consecutiveFailures > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
 					className: "mt-1 text-xs text-red-400",
 					children: [
 						job.consecutiveFailures,
@@ -154096,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 = [
@@ -154392,7 +154661,6 @@ function AgentDiagnostics({ agent, orchestrators }) {
 	const now = useNow();
 	const [policyHealth, setPolicyHealth] = (0, import_react.useState)(null);
 	const [agentEvents, setAgentEvents] = (0, import_react.useState)([]);
-	const [copied, setCopied] = (0, import_react.useState)(false);
 	const [expandedSections, setExpandedSections] = (0, import_react.useState)({
 		spawn: true,
 		workspace: true,
@@ -154436,7 +154704,7 @@ function AgentDiagnostics({ agent, orchestrators }) {
 			[key]: !s[key]
 		}));
 	}
-	async function copyDiagnosticBundle() {
+	function buildDiagnosticBundle() {
 		const policy = policyHealth?.policy;
 		const state = policyHealth?.state;
 		const lines = [
@@ -154513,11 +154781,7 @@ function AgentDiagnostics({ agent, orchestrators }) {
 		}
 		const contracts = agent.meta?.contracts;
 		if (contracts) for (const [k, v] of Object.entries(contracts)) lines.push(`Contract ${k}: ${v}`);
-		try {
-			await navigator.clipboard.writeText(lines.join("\n"));
-			setCopied(true);
-			setTimeout(() => setCopied(false), 2e3);
-		} catch {}
+		return lines.join("\n");
 	}
 	const policy = policyHealth?.policy;
 	const state = policyHealth?.state;
@@ -154529,12 +154793,14 @@ function AgentDiagnostics({ agent, orchestrators }) {
 				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("h3", {
 					className: "text-sm font-medium flex items-center gap-1.5",
 					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Stethoscope, { className: "w-3.5 h-3.5 text-muted-foreground" }), "Diagnostics"]
-				}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Button, {
+				}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CopyButton, {
+					value: buildDiagnosticBundle,
+					label: "Copy Bundle",
+					showText: true,
 					size: "sm",
 					variant: "outline",
 					className: "h-7 text-xs gap-1",
-					onClick: copyDiagnosticBundle,
-					children: [copied ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Check, { className: "w-3 h-3" }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Copy, { className: "w-3 h-3" }), copied ? "Copied" : "Copy Bundle"]
+					iconClassName: "w-3 h-3"
 				})]
 			}),
 			policy && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CollapsibleSection, {
@@ -155727,13 +155993,21 @@ function AgentDetailDrawer() {
 										className: "space-y-1 text-sm",
 										children: [
 											/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-												className: "flex justify-between gap-2 min-w-0",
+												className: "flex items-center justify-between gap-2 min-w-0",
 												children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
 													className: "text-muted-foreground shrink-0",
 													children: "ID"
-												}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
-													className: "font-mono text-xs truncate",
-													children: agent.id
+												}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+													className: "flex min-w-0 items-center gap-1",
+													children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+														className: "font-mono text-xs truncate",
+														children: agent.id
+													}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CopyButton, {
+														value: agent.id,
+														label: "Copy agent ID",
+														size: "icon-xs",
+														className: "shrink-0 text-muted-foreground"
+													})]
 												})]
 											}),
 											runtimePackage && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
@@ -157317,11 +157591,6 @@ function OrchestratorInstallModal() {
 			setLoading(false);
 		}
 	}
-	async function copy() {
-		if (!command) return;
-		await navigator.clipboard.writeText(command);
-		showNotification("Install command copied");
-	}
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Dialog, {
 		open,
 		onOpenChange: (o) => !o && set({ orchestratorInstallOpen: false }),
@@ -157390,11 +157659,14 @@ function OrchestratorInstallModal() {
 						onClick: () => set({ orchestratorInstallOpen: false }),
 						children: "Close"
 					}),
-					command && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Button, {
+					command && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CopyButton, {
+						value: command,
+						label: "Copy",
+						showText: true,
+						size: "default",
 						variant: "outline",
 						className: "gap-1",
-						onClick: copy,
-						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Copy, { className: "w-3.5 h-3.5" }), "Copy"]
+						onCopied: () => showNotification("Install command copied")
 					}),
 					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Button, {
 						className: "gap-1",
@@ -159322,6 +159594,10 @@ if ("serviceWorker" in navigator) {
     display: inline-flex;
   }
 
+  .table {
+    display: table;
+  }
+
   .field-sizing-content {
     field-sizing: content;
   }
@@ -159794,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);
   }
@@ -160848,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;
   }
@@ -161718,10 +162008,6 @@ if ("serviceWorker" in navigator) {
     font-size: .8rem;
   }
 
-  .text-\[8px\] {
-    font-size: 8px;
-  }
-
   .text-\[9px\] {
     font-size: 9px;
   }
@@ -163336,6 +163622,10 @@ if ("serviceWorker" in navigator) {
   }
 
   @media (min-width: 40rem) {
+    .sm\:block {
+      display: block;
+    }
+
     .sm\:flex {
       display: flex;
     }