@pablopunk/webr 0.1.6 → 0.2.0

package/dist/server/chunks/{App_CmESMUHE.mjs → App_C2vmjHiY.mjs}

@@ -1,7 +1,7 @@
 import { S as createAstro, f as renderHead, i as renderComponent, m as createRenderInstruction, p as addAttribute, s as renderSlot, u as renderTemplate } from "./server_CnGYDmxV.mjs";
 import { t as createComponent } from "./compiler_BiU10Vds.mjs";
 import { createContext, memo, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
-import { Archive, ArchiveRestore, ArrowDown, ArrowLeft, ArrowRight, ArrowUp, Check, ChevronDown, ChevronRight, Circle, CircleAlert, CircleCheck, CircleHelp, Copy, Cpu, Folder, FolderTree, GitBranch, ImagePlus, LayoutList, LoaderCircle, MessageCircleQuestion, Monitor, Moon, PanelBottom, PanelLeft, PanelLeftClose, PanelLeftOpen, PanelRight, Plus, Search, Server, Settings2, SquarePen, SquareTerminal, Sun, TerminalSquare, Trash2, TriangleAlert, X } from "lucide-react";
+import { Archive, ArchiveRestore, ArrowDown, ArrowLeft, ArrowRight, ArrowUp, Check, ChevronDown, ChevronRight, Circle, CircleAlert, CircleCheck, CircleHelp, Command, Copy, Cpu, Folder, FolderTree, GitBranch, ImagePlus, LayoutList, LoaderCircle, MessageCircleQuestion, Mic, Monitor, Moon, PanelBottom, PanelLeft, PanelLeftClose, PanelLeftOpen, PanelRight, Pencil, Plus, Search, Server, Settings2, Square, SquarePen, SquareTerminal, Sun, TerminalSquare, Trash2, TriangleAlert, X } from "lucide-react";
 import { createRoot } from "react-dom/client";
 import { AlertDialog } from "@base-ui/react/alert-dialog";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -191,7 +191,7 @@ var defaultShortcuts = {
 	previousThread: "ctrl+k",
 	nextPane: "ctrl+l",
 	previousPane: "ctrl+h",
-	toggleSidebar: "ctrl+b",
+	toggleSidebar: "meta+b",
 	newThread: "ctrl+x",
 	toggleTerminal: "ctrl+q"
 };
@@ -330,6 +330,11 @@ var renameThread = (thread, title) => post$1(`/api/threads/${encodeURIComponent(
 	machineId: thread.machineId,
 	title
 });
+var renameProject = (project, name) => post$1("/api/projects/rename", {
+	machineId: project.machineId ?? "local",
+	logicalId: project.logicalId ?? project.id,
+	name
+});
 var toggleThreadTerminal = (thread, direction) => post$1(`/api/threads/${encodeURIComponent(thread.id)}/terminal`, {
 	machineId: thread.machineId,
 	direction
@@ -675,6 +680,10 @@ async function listAuditEvents() {
 	if (!response.ok) throw new Error("Webr could not load recent activity.");
 	return response.json();
 }
+async function tailscaleStatus() {
+	const response = await fetch("/api/remote/tailscale");
+	return response.ok ? (await response.json()).status : "unavailable";
+}
 var revokeDevice = (id) => post(`/api/devices/${encodeURIComponent(id)}/revoke`);
 var decidePairRequest = (id, decision) => post(`/api/pair/${encodeURIComponent(id)}/${decision}`);
 async function fetchPending() {
@@ -1398,6 +1407,7 @@ function NewThreadView({ projects, machines, selectedProjectId, onOpenSidebar })
 	const [busy, setBusy] = useState(false);
 	const [error, setError] = useState("");
 	const [creatingWorkspace, setCreatingWorkspace] = useState(false);
+	const projectIdsBeforeCreate = useRef(null);
 	const operation = useRef(null);
 	const images = usePromptImages({ machineId });
 	const baseMachine = machines.find((machine) => machine.id === machineId) ?? {
@@ -1447,6 +1457,14 @@ function NewThreadView({ projects, machines, selectedProjectId, onOpenSidebar })
 		projectId,
 		catalog.data
 	]);
+	useEffect(() => {
+		const known = projectIdsBeforeCreate.current;
+		const added = known && machineProjects.find((project) => !known.has(project.id));
+		if (added) {
+			projectIdsBeforeCreate.current = null;
+			changeProject(added.id);
+		}
+	}, [machineProjects]);
 	useEffect(() => {
 		if (!machineId && machines.length) setMachineId(machines.find((machine) => machine.id === "local")?.id ?? machines[0].id);
 		if (!projectId && machineProjects.length) setProjectId(machineProjects[0].id);
@@ -1526,7 +1544,10 @@ function NewThreadView({ projects, machines, selectedProjectId, onOpenSidebar })
 				/* @__PURE__ */ jsx("p", { children: !machineProjects.length ? "This Herdr session has no projects yet." : "Add a project to this Herdr session." }),
 				/* @__PURE__ */ jsx(CreateWorkspace, {
 					machineId: machine.id,
-					onCreated: () => setCreatingWorkspace(false)
+					onCreated: () => {
+						projectIdsBeforeCreate.current = new Set(machineProjects.map((project) => project.id));
+						setCreatingWorkspace(false);
+					}
 				}),
 				!!machineProjects.length && /* @__PURE__ */ jsx("button", {
 					className: "workspace-cancel",
@@ -1778,11 +1799,16 @@ function InviteDialog({ invite, onClose }) {
 	const [urlIndex, setUrlIndex] = useState(0);
 	const [copied, setCopied] = useState(false);
 	const url = invite.urls[urlIndex];
-	const copy = () => writeClipboardText(invite.token).then((ok) => {
+	const copyText = (text) => writeClipboardText(text).then((ok) => {
 		if (!ok) return;
 		setCopied(true);
 		setTimeout(() => setCopied(false), 1500);
 	});
+	const copy = () => copyText(invite.token);
+	const selectAndCopyAddress = (index) => {
+		setUrlIndex(index);
+		copyText(invite.urls[index]);
+	};
 	return /* @__PURE__ */ jsx(Dialog.Root, {
 		open: true,
 		onOpenChange: (open) => {
@@ -1812,7 +1838,7 @@ function InviteDialog({ invite, onClose }) {
 							type: "button",
 							"aria-pressed": index === urlIndex,
 							className: index === urlIndex ? "theme-option is-selected" : "theme-option",
-							onClick: () => setUrlIndex(index),
+							onClick: () => selectAndCopyAddress(index),
 							children: new URL(address).host
 						}, address))
 					})
@@ -1849,6 +1875,21 @@ function InviteDialog({ invite, onClose }) {
 		})] })
 	});
 }
+var TAILSCALE_CALLOUTS = {
+	unavailable: "Install Tailscale on this computer and your other devices to get a private, secure HTTPS address for Webr. HTTPS unlocks features browsers only allow on secure pages, such as the microphone.",
+	"https-disabled": "Tailscale is installed, but HTTPS certificates are off. Turn them on in the Tailscale admin console under DNS, then restart Webr to unlock features that need a secure address, such as the microphone."
+};
+function TailscaleCallout() {
+	const [status, setStatus] = useState("ready");
+	useEffect(() => {
+		tailscaleStatus().then(setStatus, () => void 0);
+	}, []);
+	return status === "ready" ? null : /* @__PURE__ */ jsx("p", {
+		className: "tailscale-callout",
+		role: "note",
+		children: TAILSCALE_CALLOUTS[status]
+	});
+}
 function RemoteAccess() {
 	const [devices, setDevices] = useState([]);
 	const [invite, setInvite] = useState();
@@ -1881,6 +1922,7 @@ function RemoteAccess() {
 				className: "settings-note",
 				children: "Other devices ask to connect and you approve them here. This computer never needs a code."
 			}),
+			/* @__PURE__ */ jsx(TailscaleCallout, {}),
 			/* @__PURE__ */ jsxs("div", {
 				className: "settings-row",
 				children: [/* @__PURE__ */ jsx("span", { children: "Connect a device" }), /* @__PURE__ */ jsx("button", {
@@ -2259,6 +2301,39 @@ function ThreadTitleEditor({ thread, onDone, onError }) {
 	});
 }
 //#endregion
+//#region src/components/ProjectNameEditor.tsx
+function ProjectNameEditor({ project, onDone, onError }) {
+	const [name, setName] = useState(project.name);
+	const input = useRef(null);
+	const finished = useRef(false);
+	useEffect(() => {
+		input.current?.focus();
+		input.current?.select();
+	}, []);
+	const finish = (save) => {
+		if (finished.current) return;
+		finished.current = true;
+		onDone();
+		const next = name.trim();
+		if (save && next && next !== project.name) renameProject(project, next).catch(onError);
+	};
+	return /* @__PURE__ */ jsx("input", {
+		ref: input,
+		className: "thread-name-input group-name-input",
+		"aria-label": `Rename ${project.name}`,
+		value: name,
+		maxLength: 90,
+		onChange: (event) => setName(event.target.value),
+		onBlur: () => finish(true),
+		onClick: (event) => event.stopPropagation(),
+		onKeyDown: (event) => {
+			event.stopPropagation();
+			if (event.key === "Enter") finish(true);
+			if (event.key === "Escape") finish(false);
+		}
+	});
+}
+//#endregion
 //#region src/components/useFlipList.ts
 var durationMs = 220;
 var itemSelector = "[data-flip-id]";
@@ -2304,6 +2379,10 @@ function groupProjectLocations(projects, currentId) {
 	return [...groups.values()];
 }
 //#endregion
+//#region src/client/home-path.ts
+var homePrefix = /^\/(?:Users|home)\/[^/]+/;
+var withTildeHome = (path) => path.replace(homePrefix, "~");
+//#endregion
 //#region src/components/Sidebar.tsx
 var statusLabel = {
 	working: "Working",
@@ -2433,6 +2512,63 @@ function ThreadLink({ thread, project, machineName, current, showProject, editor
 		})
 	});
 }
+function ProjectGroupHeader({ project, closed, onToggle }) {
+	const [renaming, setRenaming] = useState(false);
+	const Title = renaming ? "div" : "button";
+	const label = renaming ? /* @__PURE__ */ jsx(ProjectNameEditor, {
+		project,
+		onDone: () => setRenaming(false),
+		onError: reportFailure
+	}) : /* @__PURE__ */ jsx("span", {
+		className: "group-name",
+		children: project.name
+	});
+	return /* @__PURE__ */ jsxs(ContextMenu.Root, { children: [/* @__PURE__ */ jsx(ContextMenu.Trigger, {
+		className: "group-header",
+		children: /* @__PURE__ */ jsxs(Title, {
+			className: "group-title",
+			onClick: renaming ? void 0 : onToggle,
+			"aria-expanded": renaming ? void 0 : !closed,
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					className: "group-chevron",
+					"aria-hidden": "true",
+					children: closed ? /* @__PURE__ */ jsx(ChevronRight, { size: 14 }) : /* @__PURE__ */ jsx(ChevronDown, { size: 14 })
+				}),
+				/* @__PURE__ */ jsx(ProjectIcon, { project }),
+				label
+			]
+		})
+	}), /* @__PURE__ */ jsx(ContextMenu.Portal, { children: /* @__PURE__ */ jsx(ContextMenu.Positioner, {
+		className: "thread-menu-positioner",
+		children: /* @__PURE__ */ jsxs(ContextMenu.Popup, {
+			className: "thread-menu",
+			children: [
+				/* @__PURE__ */ jsxs(ContextMenu.Item, {
+					className: "thread-menu-item",
+					onClick: () => void navigate(`/new?project=${encodeURIComponent(project.id)}`),
+					children: [/* @__PURE__ */ jsx(Plus, {
+						size: 14,
+						"aria-hidden": "true"
+					}), "New thread"]
+				}),
+				/* @__PURE__ */ jsxs(ContextMenu.Item, {
+					className: "thread-menu-item",
+					onClick: () => setRenaming(true),
+					children: [/* @__PURE__ */ jsx(Pencil, {
+						size: 14,
+						"aria-hidden": "true"
+					}), "Rename project"]
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "thread-menu-path",
+					title: project.path,
+					children: withTildeHome(project.path)
+				})
+			]
+		})
+	}) })] });
+}
 function ArchivedThreads({ threads, renderThread }) {
 	const [open, setOpen] = useState(false);
 	const [deleting, setDeleting] = useState(false);
@@ -2597,36 +2733,10 @@ function Sidebar({ projects, threads, archived = [], machines, currentId, mode,
 					"aria-label": "Agent threads",
 					children: [mode === "projects" ? projectGroups.filter((group) => threads.some((thread) => group.locations.includes(thread.projectId))).sort((a, b) => (threads.find((thread) => b.locations.includes(thread.projectId))?.updatedAt ?? "").localeCompare(threads.find((thread) => a.locations.includes(thread.projectId))?.updatedAt ?? "")).map(({ id, project, locations }) => /* @__PURE__ */ jsxs("section", {
 						className: "thread-group",
-						children: [/* @__PURE__ */ jsxs("div", {
-							className: "group-header",
-							children: [/* @__PURE__ */ jsxs("button", {
-								className: "group-title",
-								onClick: () => setClosedProjects((value) => value.includes(id) ? value.filter((item) => item !== id) : [...value, id]),
-								"aria-expanded": !closedProjects.includes(id),
-								children: [
-									/* @__PURE__ */ jsx("span", {
-										className: "group-chevron",
-										"aria-hidden": "true",
-										children: closedProjects.includes(id) ? /* @__PURE__ */ jsx(ChevronRight, { size: 14 }) : /* @__PURE__ */ jsx(ChevronDown, { size: 14 })
-									}),
-									/* @__PURE__ */ jsx(ProjectIcon, { project }),
-									/* @__PURE__ */ jsx("span", {
-										className: "group-name",
-										children: project.name
-									})
-								]
-							}), /* @__PURE__ */ jsx(Tooltip$1, {
-								label: `New thread in ${project.name}`,
-								children: /* @__PURE__ */ jsx("a", {
-									className: "group-new-thread",
-									href: `/new?project=${encodeURIComponent(project.id)}`,
-									"aria-label": `New thread in ${project.name}`,
-									children: /* @__PURE__ */ jsx(SquarePen, {
-										size: 15,
-										"aria-hidden": "true"
-									})
-								})
-							})]
+						children: [/* @__PURE__ */ jsx(ProjectGroupHeader, {
+							project,
+							closed: closedProjects.includes(id),
+							onToggle: () => setClosedProjects((value) => value.includes(id) ? value.filter((item) => item !== id) : [...value, id])
 						}), !closedProjects.includes(id) && threads.filter((thread) => locations.includes(thread.projectId)).map((thread) => threadLink(thread, false))]
 					}, id)) : threads.map((thread) => threadLink(thread, true)), !threads.length && !archived.length && /* @__PURE__ */ jsx("p", {
 						className: "sidebar-empty",
@@ -3306,55 +3416,122 @@ var keys = [
 	}
 ];
 var keepKeyboardOpen = (event) => event.preventDefault();
-function TerminalKeyBar({ ctrl, onToggleCtrl, onBytes }) {
+var pressOnTouchDown = (action) => ({
+	onPointerDown: (event) => {
+		keepKeyboardOpen(event);
+		action();
+	},
+	onMouseDown: keepKeyboardOpen,
+	onTouchStart: keepKeyboardOpen,
+	onClick: (event) => {
+		if (event.detail === 0) action();
+	}
+});
+var voiceLabels = {
+	idle: "Dictate",
+	preparing: "Preparing voice input",
+	recording: "Stop dictation",
+	transcribing: "Transcribing"
+};
+var voiceIcon = (phase) => phase === "recording" ? /* @__PURE__ */ jsx(Square, {
+	size: 14,
+	fill: "currentColor"
+}) : phase === "idle" ? /* @__PURE__ */ jsx(Mic, { size: 16 }) : /* @__PURE__ */ jsx(LoaderCircle, {
+	size: 16,
+	className: "is-spinning"
+});
+function VoiceButton({ voice }) {
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		tabIndex: -1,
+		"aria-label": voiceLabels[voice.phase],
+		"aria-pressed": voice.phase === "recording",
+		className: `terminal-voice is-${voice.phase}`,
+		...pressOnTouchDown(voice.toggle),
+		children: voiceIcon(voice.phase)
+	});
+}
+function TerminalKeyBar({ ctrl, onToggleCtrl, onBytes, voice }) {
 	return /* @__PURE__ */ jsxs("div", {
 		className: "terminal-key-bar",
 		role: "toolbar",
 		"aria-label": "Terminal keys",
-		children: [/* @__PURE__ */ jsx("button", {
-			type: "button",
-			tabIndex: -1,
-			"aria-pressed": ctrl,
-			className: ctrl ? "is-armed" : "",
-			onPointerDown: keepKeyboardOpen,
-			onClick: onToggleCtrl,
-			children: "Ctrl"
-		}), keys.map(({ label, key, name }) => /* @__PURE__ */ jsx("button", {
-			type: "button",
-			tabIndex: -1,
-			"aria-label": name ?? key,
-			onPointerDown: keepKeyboardOpen,
-			onClick: () => {
-				const bytes = terminalKeyBytes({
-					key,
-					ctrlKey: false,
-					altKey: false
-				});
-				if (bytes) onBytes(bytes);
-			},
-			children: label
-		}, key))]
+		children: [
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				tabIndex: -1,
+				"aria-pressed": ctrl,
+				className: ctrl ? "is-armed" : "",
+				...pressOnTouchDown(onToggleCtrl),
+				children: "Ctrl"
+			}),
+			keys.map(({ label, key, name }) => /* @__PURE__ */ jsx("button", {
+				type: "button",
+				tabIndex: -1,
+				"aria-label": name ?? key,
+				...pressOnTouchDown(() => {
+					const bytes = terminalKeyBytes({
+						key,
+						ctrlKey: false,
+						altKey: false
+					});
+					if (bytes) onBytes(bytes);
+				}),
+				children: label
+			}, key)),
+			voice?.available && /* @__PURE__ */ jsx(VoiceButton, { voice })
+		]
 	});
 }
 //#endregion
 //#region src/client/visual-viewport.ts
 var COARSE_POINTER = "(pointer: coarse)";
+var KEYBOARD_MIN_HEIGHT = 120;
+var KEYBOARD_ANIMATION_MS = 350;
 function trackVisualViewport() {
 	const viewport = window.visualViewport;
 	if (!viewport || !matchMedia(COARSE_POINTER).matches) return () => {};
 	const root = document.documentElement;
-	const sync = () => {
+	let tallestViewport = viewport.height;
+	const fitToKeyboard = () => {
 		root.style.setProperty("--app-height", `${viewport.height}px`);
 		root.style.setProperty("--app-top", `${viewport.offsetTop}px`);
 	};
+	const fillScreen = () => {
+		root.style.removeProperty("--app-height");
+		root.style.removeProperty("--app-top");
+	};
+	const sync = () => {
+		tallestViewport = Math.max(tallestViewport, viewport.height, window.innerHeight);
+		const keyboardOpen = tallestViewport - viewport.height > KEYBOARD_MIN_HEIGHT;
+		if (keyboardOpen) fitToKeyboard();
+		else fillScreen();
+		root.toggleAttribute("data-keyboard-open", keyboardOpen);
+	};
 	sync();
+	let settle;
+	const syncAfterKeyboardAnimation = () => {
+		clearTimeout(settle);
+		settle = setTimeout(sync, KEYBOARD_ANIMATION_MS);
+	};
+	const forgetTallestViewport = () => {
+		tallestViewport = 0;
+		sync();
+	};
 	viewport.addEventListener("resize", sync);
 	viewport.addEventListener("scroll", sync);
+	window.addEventListener("orientationchange", forgetTallestViewport);
+	window.addEventListener("focusout", syncAfterKeyboardAnimation);
+	window.addEventListener("focusin", syncAfterKeyboardAnimation);
 	return () => {
+		clearTimeout(settle);
+		window.removeEventListener("focusout", syncAfterKeyboardAnimation);
+		window.removeEventListener("focusin", syncAfterKeyboardAnimation);
+		window.removeEventListener("orientationchange", forgetTallestViewport);
 		viewport.removeEventListener("resize", sync);
 		viewport.removeEventListener("scroll", sync);
-		root.style.removeProperty("--app-height");
-		root.style.removeProperty("--app-top");
+		fillScreen();
+		root.removeAttribute("data-keyboard-open");
 	};
 }
 function matchesCoarsePointer() {
@@ -3528,6 +3705,188 @@ function useTerminalNotice() {
 	};
 }
 //#endregion
+//#region src/client/voice-recorder.ts
+var TARGET_SAMPLE_RATE = 16e3;
+var CAPTURE_PROCESSOR = `registerProcessor('webr-capture', class extends AudioWorkletProcessor {
+  process([input]) { if (input?.[0]) this.port.postMessage(input[0].slice()); return true; }
+});`;
+var canRecordAudio = () => typeof window !== "undefined" && window.isSecureContext && !!navigator.mediaDevices?.getUserMedia && typeof AudioWorkletNode !== "undefined";
+var createAudioContext = () => {
+	try {
+		return new AudioContext({ sampleRate: TARGET_SAMPLE_RATE });
+	} catch {
+		return new AudioContext();
+	}
+};
+function toInt16Pcm(chunks) {
+	const pcm = new Int16Array(chunks.reduce((total, chunk) => total + chunk.length, 0));
+	let offset = 0;
+	for (const chunk of chunks) for (const sample of chunk) pcm[offset++] = Math.max(-1, Math.min(1, sample)) * 32767;
+	return pcm.buffer;
+}
+async function loadCaptureProcessor(context) {
+	const url = URL.createObjectURL(new Blob([CAPTURE_PROCESSOR], { type: "text/javascript" }));
+	try {
+		await context.audioWorklet.addModule(url);
+	} finally {
+		URL.revokeObjectURL(url);
+	}
+}
+async function startRecording() {
+	const context = createAudioContext();
+	context.resume();
+	const release = (stream) => {
+		stream?.getTracks().forEach((track) => track.stop());
+		context.close();
+	};
+	let stream;
+	try {
+		stream = await navigator.mediaDevices.getUserMedia({ audio: {
+			channelCount: 1,
+			echoCancellation: true,
+			noiseSuppression: true,
+			autoGainControl: true
+		} });
+		await loadCaptureProcessor(context);
+		await context.resume();
+	} catch (error) {
+		release(stream);
+		throw error;
+	}
+	const chunks = [];
+	const source = context.createMediaStreamSource(stream);
+	const capture = new AudioWorkletNode(context, "webr-capture");
+	capture.port.onmessage = (event) => chunks.push(event.data);
+	source.connect(capture);
+	const finish = () => {
+		source.disconnect();
+		capture.disconnect();
+		release(stream);
+	};
+	return {
+		stop: async () => {
+			const sampleRate = context.sampleRate;
+			finish();
+			return {
+				pcm: toInt16Pcm(chunks),
+				sampleRate
+			};
+		},
+		cancel: finish
+	};
+}
+//#endregion
+//#region src/client/voice.ts
+var voiceErrors = {
+	voice_unavailable: "Voice input is not available on this Webr server.",
+	image_too_large: "The recording is too long."
+};
+async function voiceState() {
+	const response = await fetch("/api/voice").catch(() => void 0);
+	return response?.ok ? (await response.json()).state : "unavailable";
+}
+async function warmVoice() {
+	const response = await fetch("/api/voice/warm", {
+		method: "POST",
+		headers: { "Content-Type": "application/json" },
+		body: "{}"
+	}).catch(() => void 0);
+	return response?.ok ? (await response.json()).state : "unavailable";
+}
+async function transcribe(pcm, sampleRate) {
+	const response = await fetch(`/api/voice/transcribe?sampleRate=${sampleRate}`, {
+		method: "POST",
+		headers: { "Content-Type": "audio/l16" },
+		body: pcm
+	});
+	const result = await response.json().catch(() => ({}));
+	if (!response.ok || result.text === void 0) throw new Error(voiceErrors[result.error ?? ""] ?? "The recording could not be transcribed.");
+	return result.text;
+}
+//#endregion
+//#region src/components/useVoiceInput.ts
+var DOWNLOAD_POLL_MS = 2e3;
+var DOWNLOADING = "Downloading the voice model (670 MB, one time). The mic works when it finishes.";
+var isDownloadPending = (state) => state === "needs-download" || state === "downloading";
+var microphoneError = (error) => error instanceof DOMException && error.name === "NotAllowedError" ? "Allow microphone access for Webr in your browser settings." : "The microphone could not start.";
+function useVoiceInput({ send, show }) {
+	const [state, setState] = useState("unavailable");
+	const [phase, setPhase] = useState("idle");
+	const recorder = useRef(void 0);
+	const sendRef = useRef(send);
+	sendRef.current = send;
+	useEffect(() => {
+		if (!canRecordAudio()) return;
+		let cancelled = false;
+		voiceState().then((current) => {
+			if (!cancelled) setState(current);
+		});
+		return () => {
+			cancelled = true;
+			recorder.current?.cancel();
+		};
+	}, []);
+	useEffect(() => {
+		if (phase !== "preparing") return;
+		const poll = setInterval(() => void voiceState().then((current) => {
+			if (isDownloadPending(current)) return;
+			setState(current);
+			setPhase("idle");
+			show(current === "ready" ? "Voice input is ready. Tap the mic to talk." : "The voice model could not be downloaded.", current === "ready" ? "info" : "error", 4e3);
+		}), DOWNLOAD_POLL_MS);
+		return () => clearInterval(poll);
+	}, [phase, show]);
+	const prepare = useCallback(() => {
+		warmVoice();
+		setPhase("preparing");
+		show(DOWNLOADING, "info");
+	}, [show]);
+	const record = useCallback(async () => {
+		setPhase("recording");
+		const starting = startRecording();
+		warmVoice();
+		try {
+			recorder.current = await starting;
+		} catch (error) {
+			setPhase("idle");
+			show(microphoneError(error), "error", 5e3);
+		}
+	}, [show]);
+	const finish = useCallback(async () => {
+		const active = recorder.current;
+		recorder.current = void 0;
+		if (!active) return;
+		setPhase("transcribing");
+		try {
+			const { pcm, sampleRate } = await active.stop();
+			const text = await transcribe(pcm, sampleRate);
+			if (text) sendRef.current(text);
+			else show("No speech was heard.", "info", 2500);
+		} catch (error) {
+			show(error instanceof Error ? error.message : "The recording could not be transcribed.", "error", 5e3);
+		} finally {
+			setPhase("idle");
+		}
+	}, [show]);
+	const toggle = useCallback(() => {
+		if (phase === "idle") {
+			if (isDownloadPending(state)) prepare();
+			else record();
+		} else if (phase === "recording") finish();
+	}, [
+		phase,
+		state,
+		prepare,
+		record,
+		finish
+	]);
+	return {
+		available: state !== "unavailable",
+		phase,
+		toggle
+	};
+}
+//#endregion
 //#region src/components/TerminalPane.tsx
 function themeColors() {
 	const styles = getComputedStyle(document.documentElement);
@@ -3586,6 +3945,12 @@ function TerminalPane({ pane, machineId, threadId, active, canControl, onFocus }
 			control.current?.input(text, true);
 		}
 	});
+	const voice = useVoiceInput({
+		show,
+		send: (text) => {
+			control.current?.input(text, true);
+		}
+	});
 	const showCopyResult = useRef((copied) => {});
 	showCopyResult.current = (copied) => copied ? show("Copied to clipboard", "info", 1200) : show("The browser blocked clipboard access.", "error", 4e3);
 	useEffect(() => {
@@ -3844,7 +4209,8 @@ function TerminalPane({ pane, machineId, threadId, active, canControl, onFocus }
 			canControl && active && touch && inputFocused && /* @__PURE__ */ jsx(TerminalKeyBar, {
 				ctrl,
 				onToggleCtrl: () => setCtrl((armed) => !armed),
-				onBytes: (bytes) => control.current?.input(bytes)
+				onBytes: (bytes) => control.current?.input(bytes),
+				voice
 			})
 		]
 	});
@@ -4080,6 +4446,7 @@ function useClearDoneOnVisit(thread, paneId, enabled) {
 }
 //#endregion
 //#region src/components/App.tsx
+var keepTerminalFocus = (event) => event.preventDefault();
 function App(props) {
 	return /* @__PURE__ */ jsx(CrashReport, { children: /* @__PURE__ */ jsx(RuntimeProvider, {
 		bootstrap: props.bootstrap,
@@ -4280,12 +4647,14 @@ function RuntimeApp({ page, bootstrap, threadId, projectId }) {
 				className: "mobile-controls",
 				children: [/* @__PURE__ */ jsx("button", {
 					"aria-label": "Open sidebar",
+					onPointerDown: keepTerminalFocus,
 					onClick: toggleSidebar,
-					children: /* @__PURE__ */ jsx(PanelLeft, { size: 16 })
+					children: /* @__PURE__ */ jsx(PanelLeft, { size: 22 })
 				}), /* @__PURE__ */ jsx("button", {
 					"aria-label": "Open command palette",
+					onPointerDown: keepTerminalFocus,
 					onClick: () => setPaletteOpen(true),
-					children: /* @__PURE__ */ jsx(Search, { size: 16 })
+					children: /* @__PURE__ */ jsx(Command, { size: 22 })
 				})]
 			}),
 			false,

package/dist/server/chunks/{_id__CQzMt2xL.mjs → _id__BimjoFCd.mjs}

@@ -1,7 +1,7 @@
 import { r as __exportAll } from "./rolldown-runtime_BMI-E3GI.mjs";
 import { S as createAstro, i as renderComponent, u as renderTemplate } from "./server_CnGYDmxV.mjs";
 import { t as createComponent } from "./compiler_BiU10Vds.mjs";
-import { n as $$Base, t as App } from "./App_CmESMUHE.mjs";
+import { n as $$Base, t as App } from "./App_C2vmjHiY.mjs";
 //#region src/pages/threads/[id].astro
 var _id__exports = /* @__PURE__ */ __exportAll({
 	default: () => $$Id,

package/dist/server/chunks/{_tab__D-smYrCo.mjs → _tab__WmsbMlfC.mjs}

@@ -1,7 +1,7 @@
 import { r as __exportAll } from "./rolldown-runtime_BMI-E3GI.mjs";
 import { S as createAstro, i as renderComponent, u as renderTemplate } from "./server_CnGYDmxV.mjs";
 import { t as createComponent } from "./compiler_BiU10Vds.mjs";
-import { n as $$Base, t as App } from "./App_CmESMUHE.mjs";
+import { n as $$Base, t as App } from "./App_C2vmjHiY.mjs";
 //#region src/pages/sessions/[session]/tabs/[tab].astro
 var _tab__exports = /* @__PURE__ */ __exportAll({
 	default: () => $$Tab,