mlx-bun 0.3.0 → 0.5.0

package/src/web/app.js

@@ -994,14 +994,14 @@ function highlightIn(container) {
     return;
   const blocks = container.querySelectorAll("pre code");
   for (const block of blocks) {
-    const el2 = block;
-    if (el2.dataset.highlighted)
+    const el = block;
+    if (el.dataset.highlighted)
       continue;
-    const hasLang = /\blanguage-/.test(el2.className);
-    if (!hasLang && (el2.textContent || "").length > 20000)
+    const hasLang = /\blanguage-/.test(el.className);
+    if (!hasLang && (el.textContent || "").length > 20000)
       continue;
     try {
-      hljs.highlightElement(el2);
+      hljs.highlightElement(el);
     } catch {}
   }
 }
@@ -1209,6 +1209,7 @@ function readText(file) {
 class ComposerState {
   attachments = [];
   visionCapable = false;
+  transcriptionCapable = false;
   thinkingCapable = false;
   thinkingOn = true;
   attachSeq = 0;
@@ -1321,6 +1322,9 @@ function updateAttachHint(state) {
   const btn = $("chat-attach-btn");
   if (btn)
     btn.title = state.visionCapable ? "Attach files or images" : "Attach files (this model can't see images)";
+  const mic = $("chat-mic-btn");
+  if (mic)
+    mic.style.display = state.transcriptionCapable ? "" : "none";
 }
 function escHtml2(s) {
   return String(s ?? "").replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[c]);
@@ -1983,6 +1987,160 @@ function renderQueue(q) {
   bar.style.display = parts.length ? "flex" : "none";
 }
 
+// src/web/src/voice.ts
+var SAMPLE_RATE = 16000;
+var CHUNK_SECONDS = 0.25;
+var take = null;
+var starting = false;
+async function postChunk(id, pcm) {
+  const r = await fetch(`/v1/audio/sessions/${id}/audio`, {
+    method: "POST",
+    headers: { "content-type": "audio/pcm;rate=16000" },
+    body: new Uint8Array(pcm.buffer.slice(pcm.byteOffset, pcm.byteOffset + pcm.byteLength))
+  });
+  if (!r.ok)
+    throw new Error(`audio chunk rejected (${r.status})`);
+}
+function flush(t) {
+  if (t.pendingLen === 0)
+    return;
+  const buf = new Float32Array(t.pendingLen);
+  let o = 0;
+  for (const p of t.pending) {
+    buf.set(p, o);
+    o += p.length;
+  }
+  t.pending = [];
+  t.pendingLen = 0;
+  t.sending = t.sending.then(() => postChunk(t.id, buf)).catch((e) => {
+    t.failed = e.message;
+  });
+}
+async function begin(btn) {
+  if (take || starting)
+    return;
+  starting = true;
+  btn.classList.add("busy");
+  try {
+    const r = await fetch("/v1/audio/sessions", {
+      method: "POST",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify({ vad: true, vad_min_speech_ms: 120, temperature: 0 })
+    });
+    if (!r.ok)
+      throw new Error(r.status === 503 ? "no Whisper model on this server" : `session failed (${r.status})`);
+    const { id } = await r.json();
+    const stream = await navigator.mediaDevices.getUserMedia({ audio: { channelCount: 1, echoCancellation: true, noiseSuppression: true } });
+    const ctx = new AudioContext({ sampleRate: SAMPLE_RATE });
+    const src = ctx.createMediaStreamSource(stream);
+    const node = ctx.createScriptProcessor(4096, 1, 1);
+    const t = { id, ctx, stream, node, pending: [], pendingLen: 0, sending: Promise.resolve(), failed: null };
+    node.onaudioprocess = (e) => {
+      if (take !== t)
+        return;
+      const data = e.inputBuffer.getChannelData(0);
+      t.pending.push(new Float32Array(data));
+      t.pendingLen += data.length;
+      if (t.pendingLen >= SAMPLE_RATE * CHUNK_SECONDS)
+        flush(t);
+    };
+    src.connect(node);
+    node.connect(ctx.destination);
+    take = t;
+    btn.classList.add("recording");
+  } catch (e) {
+    toast(`Voice input failed: ${e.message}`, "err");
+  } finally {
+    starting = false;
+    btn.classList.remove("busy");
+  }
+}
+async function end(btn, box) {
+  const t = take;
+  if (!t)
+    return;
+  take = null;
+  btn.classList.remove("recording");
+  btn.classList.add("busy");
+  try {
+    t.node.disconnect();
+    for (const track of t.stream.getTracks())
+      track.stop();
+    t.ctx.close();
+    flush(t);
+    await t.sending;
+    if (t.failed)
+      throw new Error(t.failed);
+    const r = await fetch(`/v1/audio/sessions/${t.id}/finish`, { method: "POST" });
+    if (!r.ok)
+      throw new Error(`transcription failed (${r.status})`);
+    const body = await r.json();
+    const text = (body.text || "").trim();
+    if (!text) {
+      toast(body.mlx_bun?.vad?.speech === false ? "No speech detected" : "Nothing transcribed", "");
+      return;
+    }
+    insertAtCaret(box, text);
+  } catch (e) {
+    toast(`Voice input failed: ${e.message}`, "err");
+  } finally {
+    btn.classList.remove("busy");
+  }
+}
+function insertAtCaret(box, text) {
+  const start = box.selectionStart ?? box.value.length;
+  const endPos = box.selectionEnd ?? start;
+  const before = box.value.slice(0, start);
+  const after = box.value.slice(endPos);
+  const lead = before.length && !/\s$/.test(before) ? " " : "";
+  const trail = after.length && !/^\s/.test(after) ? " " : "";
+  box.value = before + lead + text + trail + after;
+  const caret = (before + lead + text + trail).length;
+  box.setSelectionRange(caret, caret);
+  box.dispatchEvent(new Event("input", { bubbles: true }));
+  box.focus();
+}
+function initVoiceInput(btn, box) {
+  if (!btn)
+    return;
+  if (!navigator.mediaDevices?.getUserMedia) {
+    btn.title = "Microphone capture needs a secure context (https or localhost)";
+  }
+  btn.addEventListener("pointerdown", (e) => {
+    e.preventDefault();
+    btn.setPointerCapture(e.pointerId);
+    begin(btn);
+  });
+  const release = () => {
+    end(btn, box);
+  };
+  btn.addEventListener("pointerup", release);
+  btn.addEventListener("pointercancel", release);
+  btn.addEventListener("lostpointercapture", release);
+  let keyHeld = false;
+  btn.addEventListener("keydown", (e) => {
+    if ((e.key === " " || e.key === "Enter") && !keyHeld) {
+      e.preventDefault();
+      keyHeld = true;
+      begin(btn);
+    }
+  });
+  btn.addEventListener("keyup", (e) => {
+    if ((e.key === " " || e.key === "Enter") && keyHeld) {
+      e.preventDefault();
+      keyHeld = false;
+      release();
+    }
+  });
+  btn.addEventListener("blur", () => {
+    if (keyHeld) {
+      keyHeld = false;
+      release();
+    }
+  });
+  $.voice = { begin: () => begin(btn), end: () => end(btn, box) };
+}
+
 // src/web/src/sessions.ts
 var SESSIONS_STYLE_ID = "mlxbun-sessions-style";
 function injectSessionsStyles() {
@@ -2611,12 +2769,12 @@ async function renderListBody() {
 async function renderArticleLists(query) {
   const listEl = $("mem-list");
   if (!query) {
-    const d2 = await getJson("/api/memory/list").catch(() => ({ ok: false }));
-    if (!d2.ok) {
+    const d = await getJson("/api/memory/list").catch(() => ({ ok: false }));
+    if (!d.ok) {
       listEl.innerHTML = `<div class="mem-list-empty">Couldn't load the vault contents.</div>`;
       return;
     }
-    const articles = d2.articles || [], reference = d2.reference || [];
+    const articles = d.articles || [], reference = d.reference || [];
     listEl.innerHTML = '<div class="mem-sec"><div class="mem-sec-title">Articles</div>' + (articles.length ? articles.map((a) => articleRowHtml(a)).join("") : '<div class="mem-list-empty">No articles yet — nightly synthesis writes here after a few conversations.</div>') + "</div>" + (reference.length ? '<div class="mem-sec"><div class="mem-sec-title">Reference</div>' + reference.map((r) => articleRowHtml(r, undefined, "\uD83D\uDCD8")).join("") + "</div>" : "");
     wireArticleRows(listEl);
     return;
@@ -2953,11 +3111,11 @@ var INTERACTIVE_SELECTOR = [
   "[data-spotlight]"
 ].join(", ");
 var MAX_ELEMENTS = 120;
-function isAgentChrome(el2) {
-  return !!el2.closest("[data-ui-chrome]") || !!el2.closest("#toasts");
+function isAgentChrome(el) {
+  return !!el.closest("[data-ui-chrome]") || !!el.closest("#toasts");
 }
-function isHiddenSelf(el2) {
-  const html = el2;
+function isHiddenSelf(el) {
+  const html = el;
   if (html.hidden)
     return true;
   const inline = html.style?.display;
@@ -2968,21 +3126,21 @@ function isHiddenSelf(el2) {
     return true;
   return false;
 }
-function isVisible(el2) {
-  const html = el2;
+function isVisible(el) {
+  const html = el;
   if (html.offsetParent === null) {
     const style = globalThis.getComputedStyle?.(html);
     if (style && style.position === "fixed")
       return true;
   }
-  for (let node = el2;node; node = node.parentElement) {
+  for (let node = el;node; node = node.parentElement) {
     if (isHiddenSelf(node))
       return false;
   }
   return true;
 }
-function elementLabel(el2) {
-  const html = el2;
+function elementLabel(el) {
+  const html = el;
   const uiLabel = html.getAttribute("data-ui-label")?.trim();
   if (uiLabel)
     return uiLabel;
@@ -3017,13 +3175,13 @@ function captureUiSnapshot(route) {
   const elements = [];
   const seenRefs = new Set;
   let index = 0;
-  for (const el2 of nodes) {
-    if (isAgentChrome(el2) || !isVisible(el2))
+  for (const el of nodes) {
+    if (isAgentChrome(el) || !isVisible(el))
       continue;
-    const label = elementLabel(el2);
+    const label = elementLabel(el);
     if (!label)
       continue;
-    const html = el2;
+    const html = el;
     const spotlightId = html.getAttribute("data-spotlight")?.trim() || undefined;
     const existingRef = html.getAttribute("data-ui-ref");
     const ref = existingRef ?? `ui-${route.replace(/[^a-zA-Z0-9]/g, "_") || "root"}-${index}`;
@@ -3067,12 +3225,12 @@ function findByLabel(snapshot, label) {
     return;
   let best;
   let bestScore = 0;
-  for (const el2 of snapshot.elements) {
-    const hay = [el2.label, el2.spotlightId].filter(Boolean).join(" ");
+  for (const el of snapshot.elements) {
+    const hay = [el.label, el.spotlightId].filter(Boolean).join(" ");
     const score = matchScore(hay, label);
     if (score > bestScore) {
       bestScore = score;
-      best = el2;
+      best = el;
     }
   }
   return bestScore >= 50 ? best : undefined;
@@ -3089,9 +3247,9 @@ function safeQuery(selector) {
 }
 function resolveSpotlightTarget(request, snapshot) {
   if (request.ref) {
-    const el2 = snapshot?.elements.find((e) => e.ref === request.ref);
-    if (el2)
-      return { selector: el2.selector, title: el2.label, message: request.message };
+    const el = snapshot?.elements.find((e) => e.ref === request.ref);
+    if (el)
+      return { selector: el.selector, title: el.label, message: request.message };
     const selector = `[data-ui-ref="${attrEscape(request.ref)}"]`;
     if (safeQuery(selector)) {
       return { selector, title: request.label ?? request.ref, message: request.message };
@@ -3101,9 +3259,9 @@ function resolveSpotlightTarget(request, snapshot) {
     return { selector: request.selector, title: request.label ?? "Here", message: request.message };
   }
   if (request.label) {
-    const el2 = findByLabel(snapshot, request.label);
-    if (el2)
-      return { selector: el2.selector, title: el2.label, message: request.message };
+    const el = findByLabel(snapshot, request.label);
+    if (el)
+      return { selector: el.selector, title: el.label, message: request.message };
     let bestEl = null;
     let bestScore = 0;
     for (const node of document.querySelectorAll("[data-ui-label]")) {
@@ -3144,15 +3302,15 @@ var AUTO_DISMISS_MS = 3000;
 var dismissTimer = null;
 var dismissListeners = null;
 function ensureOverlayEl() {
-  let el2 = document.getElementById("assistant-spotlight");
-  if (!el2) {
-    el2 = document.createElement("div");
-    el2.id = "assistant-spotlight";
-    el2.setAttribute("data-ui-chrome", "assistant");
-    el2.innerHTML = '<div class="asr-ring"></div><div class="asr-pop"><div class="asr-pop-text"></div></div>';
-    document.body.appendChild(el2);
+  let el = document.getElementById("assistant-spotlight");
+  if (!el) {
+    el = document.createElement("div");
+    el.id = "assistant-spotlight";
+    el.setAttribute("data-ui-chrome", "assistant");
+    el.innerHTML = '<div class="asr-ring"></div><div class="asr-pop"><div class="asr-pop-text"></div></div>';
+    document.body.appendChild(el);
   }
-  return el2;
+  return el;
 }
 function dismissSpotlight() {
   if (dismissTimer) {
@@ -3163,9 +3321,9 @@ function dismissSpotlight() {
     dismissListeners();
     dismissListeners = null;
   }
-  const el2 = document.getElementById("assistant-spotlight");
-  if (el2)
-    el2.classList.remove("show");
+  const el = document.getElementById("assistant-spotlight");
+  if (el)
+    el.classList.remove("show");
 }
 function showSpotlight(resolved) {
   const target = safeQuery(resolved.selector);
@@ -3332,7 +3490,7 @@ function createChatController() {
     }
     return false;
   }
-  function currentView2() {
+  function currentView() {
     if ($("mem-overlay")?.classList.contains("open"))
       return "memory-panel";
     if ($("hub-overlay")?.classList.contains("open"))
@@ -3345,16 +3503,16 @@ function createChatController() {
     const route = currentRoute();
     if (!isRouteId(route))
       return;
-    const ctx = buildAppContext(route, currentView2());
+    const ctx = buildAppContext(route, currentView());
     lastSnapshot = ctx.snapshot;
     send({ type: "context", context: ctx });
   }
   function watchWizardSteps() {
     const mo = new MutationObserver(() => pushAppContext());
     for (const id of ["q-steps", "f-steps", "d-steps"]) {
-      const el2 = $(id);
-      if (el2)
-        mo.observe(el2, { childList: true, subtree: true });
+      const el = $(id);
+      if (el)
+        mo.observe(el, { childList: true, subtree: true });
     }
   }
   function setChatStatus(s) {
@@ -3548,8 +3706,8 @@ function createChatController() {
     if (t)
       return t;
     if (isMemoryToolName(tool || "")) {
-      const handle2 = memoryToolChip(a.bubble, tool, args);
-      t = { kind: "memchip", wrap: handle2.wrap, handle: handle2, chunks: "" };
+      const handle = memoryToolChip(a.bubble, tool, args);
+      t = { kind: "memchip", wrap: handle.wrap, handle, chunks: "" };
       a.tools.set(callId, t);
       stick();
       return t;
@@ -3763,9 +3921,9 @@ function createChatController() {
     }
     for (const t of item.tools || []) {
       if (isMemoryToolName(t.name || "")) {
-        const handle2 = memoryToolChip(bubble, t.name, t.args);
+        const handle = memoryToolChip(bubble, t.name, t.args);
         if (t.result)
-          handle2.setResult(t.result);
+          handle.setResult(t.result);
         continue;
       }
       const wrap = el("div", "tool ok", bubble);
@@ -3809,6 +3967,7 @@ function createChatController() {
       case "ready":
         $("nav-model").textContent = m.model || $("nav-model").textContent || "no model";
         composer.visionCapable = !!m.vision;
+        composer.transcriptionCapable = !!m.transcription;
         updateAttachHint(composer);
         composer.thinkingCapable = !!m.thinking;
         updateThinkingToggle(composer);
@@ -4026,6 +4185,7 @@ function createChatController() {
       });
       initMemoryPanel();
       $("chat-attach-btn").onclick = () => $("chat-file-input").click();
+      initVoiceInput($("chat-mic-btn"), box);
       $("chat-file-input").addEventListener("change", (e) => {
         addFiles(composer, [...e.target.files || []]);
         e.target.value = "";
@@ -4081,9 +4241,9 @@ function createChatController() {
       watchWizardSteps();
       const overlayMo = new MutationObserver(() => pushAppContext());
       for (const id of ["mem-overlay", "hub-overlay", "adapters-overlay"]) {
-        const el2 = $(id);
-        if (el2)
-          overlayMo.observe(el2, { attributes: true, attributeFilter: ["class"] });
+        const el = $(id);
+        if (el)
+          overlayMo.observe(el, { attributes: true, attributeFilter: ["class"] });
       }
     },
     enter() {
@@ -4893,7 +5053,7 @@ function createStatusController() {
   async function loadFit() {
     let f;
     try {
-      f = await fetch("/fit").then((r2) => r2.json());
+      f = await fetch("/fit").then((r) => r.json());
     } catch {
       return;
     }
@@ -5319,9 +5479,9 @@ async function openHubPanel() {
   if (inFlightDownloads.size)
     ensureDownloadPolling();
   setTimeout(() => {
-    const el22 = $("hub-search-input");
-    if (el22)
-      el22.focus();
+    const el2 = $("hub-search-input");
+    if (el2)
+      el2.focus();
   }, 30);
 }
 function setOfflineFooter(offline) {

package/src/web/src/chat.ts

@@ -30,6 +30,7 @@ import {
   renderAttachments, renderContext, renderLane, renderQueue, updateAttachHint,
   updateThinkingToggle, type ContextFrame,
 } from "./composer";
+import { initVoiceInput } from "./voice";
 import {
   addMsgActions, newSiblingInfo, newSidebarState, renderSessions, renderSiblingToggle,
   switchSiblingTarget, applySessSearch, type SidebarState, type SiblingInfo,
@@ -764,7 +765,7 @@ export function createChatController() {
     switch (m.type) {
       case "ready":
         $("nav-model").textContent = m.model || ($("nav-model").textContent as string) || "no model";
-        composer.visionCapable = !!m.vision; updateAttachHint(composer);
+        composer.visionCapable = !!m.vision; composer.transcriptionCapable = !!m.transcription; updateAttachHint(composer);
         composer.thinkingCapable = !!m.thinking; updateThinkingToggle(composer);
         // Per-model recommended sampling (generation_config.json, server-CLI
         // overrides applied) — replaces the old hardcoded SAMP_REC shape.
@@ -979,6 +980,8 @@ export function createChatController() {
       initMemoryPanel();
       // Attachments: + button, file picker, clipboard paste, drag-and-drop.
       ($("chat-attach-btn") as HTMLButtonElement).onclick = () => ($("chat-file-input") as HTMLInputElement).click();
+      // Hold-to-talk mic → /v1/audio/sessions → text into the composer (voice.ts).
+      initVoiceInput($("chat-mic-btn") as HTMLButtonElement, box as HTMLTextAreaElement);
       $("chat-file-input").addEventListener("change", (e) => { addFiles(composer, [...(e.target as HTMLInputElement).files || []]); (e.target as HTMLInputElement).value = ""; });
       box.addEventListener("paste", (e) => {
         const items = e.clipboardData && e.clipboardData.items;

package/src/web/src/composer.ts

@@ -55,6 +55,7 @@ function readText(file: File): Promise<string> {
 export class ComposerState {
   attachments: Attachment[] = [];
   visionCapable = false;  // from the `ready` frame; gates image attachments
+  transcriptionCapable = false;  // from the `ready` frame; shows the hold-to-talk mic
   thinkingCapable = false; // from `ready`; gates the reasoning toggle
   // default on: with tools (read/web_search) the reasoning step gives the
   // small model far better tool judgment (answers math/writing itself,
@@ -179,6 +180,8 @@ export function buildMessageText(state: ComposerState, userText: string): BuiltM
 export function updateAttachHint(state: ComposerState): void {
   const btn = $("chat-attach-btn");
   if (btn) btn.title = state.visionCapable ? "Attach files or images" : "Attach files (this model can't see images)";
+  const mic = $("chat-mic-btn");
+  if (mic) mic.style.display = state.transcriptionCapable ? "" : "none";
 }
 
 /* ────────────────────────────────────────────────────────────────────

package/src/web/src/voice.ts

@@ -0,0 +1,141 @@
+// Hold-to-talk voice input for the composer: microphone → 16 kHz float32
+// (an AudioContext opened at 16 kHz lets the browser resample the mic) →
+// 250 ms chunks streamed to /v1/audio/sessions/<id>/audio while the button
+// is held → finish on release → transcript inserted at the caret. Works
+// with ANY served chat model: transcription is the Whisper companion, not
+// the chat model's audio input. Shown only when `ready.transcription` is
+// true (composer.ts updateAttachHint).
+
+import { $, toast } from "./shell";
+
+const SAMPLE_RATE = 16_000;
+const CHUNK_SECONDS = 0.25;
+
+interface Take {
+  id: string;
+  ctx: AudioContext;
+  stream: MediaStream;
+  node: ScriptProcessorNode;
+  pending: Float32Array[];
+  pendingLen: number;
+  sending: Promise<void>;
+  failed: string | null;
+}
+
+let take: Take | null = null;
+let starting = false;
+
+async function postChunk(id: string, pcm: Float32Array): Promise<void> {
+  const r = await fetch(`/v1/audio/sessions/${id}/audio`, {
+    method: "POST", headers: { "content-type": "audio/pcm;rate=16000" },
+    body: new Uint8Array(pcm.buffer.slice(pcm.byteOffset, pcm.byteOffset + pcm.byteLength) as ArrayBuffer),
+  });
+  if (!r.ok) throw new Error(`audio chunk rejected (${r.status})`);
+}
+
+function flush(t: Take): void {
+  if (t.pendingLen === 0) return;
+  const buf = new Float32Array(t.pendingLen);
+  let o = 0;
+  for (const p of t.pending) { buf.set(p, o); o += p.length; }
+  t.pending = []; t.pendingLen = 0;
+  t.sending = t.sending.then(() => postChunk(t.id, buf)).catch((e) => { t.failed = (e as Error).message; });
+}
+
+async function begin(btn: HTMLButtonElement): Promise<void> {
+  if (take || starting) return;
+  starting = true;
+  btn.classList.add("busy");
+  try {
+    const r = await fetch("/v1/audio/sessions", {
+      method: "POST", headers: { "content-type": "application/json" },
+      body: JSON.stringify({ vad: true, vad_min_speech_ms: 120, temperature: 0 }),
+    });
+    if (!r.ok) throw new Error(r.status === 503 ? "no Whisper model on this server" : `session failed (${r.status})`);
+    const { id } = await r.json() as { id: string };
+    const stream = await navigator.mediaDevices.getUserMedia({ audio: { channelCount: 1, echoCancellation: true, noiseSuppression: true } });
+    const ctx = new AudioContext({ sampleRate: SAMPLE_RATE });
+    const src = ctx.createMediaStreamSource(stream);
+    // ScriptProcessorNode is deprecated but universally available and enough
+    // for 16 kHz mono capture; an AudioWorklet needs a separately served file.
+    const node = ctx.createScriptProcessor(4096, 1, 1);
+    const t: Take = { id, ctx, stream, node, pending: [], pendingLen: 0, sending: Promise.resolve(), failed: null };
+    node.onaudioprocess = (e) => {
+      if (take !== t) return;
+      const data = e.inputBuffer.getChannelData(0);
+      t.pending.push(new Float32Array(data));
+      t.pendingLen += data.length;
+      if (t.pendingLen >= SAMPLE_RATE * CHUNK_SECONDS) flush(t);
+    };
+    src.connect(node);
+    node.connect(ctx.destination); // required for onaudioprocess to fire in some browsers
+    take = t;
+    btn.classList.add("recording");
+  } catch (e) {
+    toast(`Voice input failed: ${(e as Error).message}`, "err");
+  } finally {
+    starting = false;
+    btn.classList.remove("busy");
+  }
+}
+
+async function end(btn: HTMLButtonElement, box: HTMLTextAreaElement): Promise<void> {
+  const t = take;
+  if (!t) return;
+  take = null;
+  btn.classList.remove("recording");
+  btn.classList.add("busy");
+  try {
+    t.node.disconnect();
+    for (const track of t.stream.getTracks()) track.stop();
+    void t.ctx.close();
+    flush(t);
+    await t.sending;
+    if (t.failed) throw new Error(t.failed);
+    const r = await fetch(`/v1/audio/sessions/${t.id}/finish`, { method: "POST" });
+    if (!r.ok) throw new Error(`transcription failed (${r.status})`);
+    const body = await r.json() as { text: string; mlx_bun?: { vad?: { speech: boolean } } };
+    const text = (body.text || "").trim();
+    if (!text) { toast(body.mlx_bun?.vad?.speech === false ? "No speech detected" : "Nothing transcribed", ""); return; }
+    insertAtCaret(box, text);
+  } catch (e) {
+    toast(`Voice input failed: ${(e as Error).message}`, "err");
+  } finally {
+    btn.classList.remove("busy");
+  }
+}
+
+function insertAtCaret(box: HTMLTextAreaElement, text: string): void {
+  const start = box.selectionStart ?? box.value.length;
+  const endPos = box.selectionEnd ?? start;
+  const before = box.value.slice(0, start);
+  const after = box.value.slice(endPos);
+  const lead = before.length && !/\s$/.test(before) ? " " : "";
+  const trail = after.length && !/^\s/.test(after) ? " " : "";
+  box.value = before + lead + text + trail + after;
+  const caret = (before + lead + text + trail).length;
+  box.setSelectionRange(caret, caret);
+  box.dispatchEvent(new Event("input", { bubbles: true }));
+  box.focus();
+}
+
+/** Wire hold-to-talk on `btn`: pointer hold, or Space/Enter held while focused. */
+export function initVoiceInput(btn: HTMLButtonElement, box: HTMLTextAreaElement): void {
+  if (!btn) return;
+  if (!navigator.mediaDevices?.getUserMedia) { btn.title = "Microphone capture needs a secure context (https or localhost)"; }
+  btn.addEventListener("pointerdown", (e) => { e.preventDefault(); btn.setPointerCapture(e.pointerId); void begin(btn); });
+  const release = () => { void end(btn, box); };
+  btn.addEventListener("pointerup", release);
+  btn.addEventListener("pointercancel", release);
+  btn.addEventListener("lostpointercapture", release);
+  let keyHeld = false;
+  btn.addEventListener("keydown", (e) => {
+    if ((e.key === " " || e.key === "Enter") && !keyHeld) { e.preventDefault(); keyHeld = true; void begin(btn); }
+  });
+  btn.addEventListener("keyup", (e) => {
+    if ((e.key === " " || e.key === "Enter") && keyHeld) { e.preventDefault(); keyHeld = false; release(); }
+  });
+  btn.addEventListener("blur", () => { if (keyHeld) { keyHeld = false; release(); } });
+  // expose for tests / the palette
+  ($ as unknown as { voice?: unknown }).voice = { begin: () => begin(btn), end: () => end(btn, box) };
+}

package/src/web/sw.js

@@ -18,7 +18,7 @@
 //
 // Versioned by CACHE_NAME so a deploy invalidates old shells; bump the
 // suffix here if the shell file set changes.
-const CACHE_NAME = "mlxbun-shell-v1";
+const CACHE_NAME = "mlxbun-shell-v2";
 const SHELL_FILES = [
   "/",
   "/assets/app.js",