ava-engine 0.0.0-stage → 0.2.0

package/public/app.js

@@ -0,0 +1,1708 @@
+"use strict";
+/* global makeRTC -- from rtc.js */
+const $ = (id) => document.getElementById(id);
+// Public-facing label for the talker in the UI — we don't surface the underlying
+// model slug. Change this text if you want a different name shown.
+const TALKER_LABEL = "Realtime";
+const S = {
+  sessionId: null, sharing: false, stream: null, joined: false,
+  tts: { enabled: false }, voice: "browser", cc: true,
+  t0: 0, timer: null, proactive: true,
+  turnInFlight: false, obsTimer: null, lastObs: null, observing: false,
+  pendingChange: null, lastFrame: null, speaking: false,
+  latHistory: [], calls: { vision: 0, intent: 0, router: 0, planner: 0, voice: 0 },
+  models: {}, degraded: false,
+  mode: "voice", micDevice: "", ringing: false,
+  agentMode: "flexible", platform: null, platforms: [], screen: "onboard",
+  workflow: null, handoffTimer: null, knowTimer: null,
+  specialistPresent: false, bridgeSince: 0, bridgeTimer: null, rtc: null, rtcMic: null,
+};
+const video = $("video"), capcanvas = $("capcanvas"), hashcanvas = $("hashcanvas");
+let pip = null;
+
+/* ═══════════ boot ═══════════ */
+(async function boot() {
+  try {
+    const h = await (await fetch("/api/health")).json();
+    S.tts = h.tts || { enabled: false };
+    S.stt = !!(h.stt && h.stt.enabled);
+    S.sttStream = !!(h.stt && h.stt.streaming); // offline sherpa streaming ASR on the server
+    // speech-recognition engine picker (green room)
+    const engines = (h.stt && h.stt.engines) || [];
+    // Default to multilingual SenseVoice when it's available (the user's pick).
+    S.sttEngine = (engines.find((e) => e.id === "sensevoice") ? "sensevoice" : (h.stt && h.stt.defaultEngine)) || (engines[0] && engines[0].id) || "zipformer";
+    const ss = $("sttsel");
+    if (ss) {
+      if (engines.length) {
+        ss.innerHTML = engines.map((e) => `<option value="${esc(e.id)}">${esc(e.label)}</option>`).join("");
+        ss.value = S.sttEngine;
+        const note = () => { $("sttnote").textContent = S.sttEngine === "sensevoice" ? "Multilingual — more accurate on accents + other languages; captions appear when you finish speaking" : "English — fast, with live word-by-word captions as you talk"; };
+        ss.onchange = () => { S.sttEngine = ss.value; note(); };
+        note();
+      } else { ss.innerHTML = "<option>browser</option>"; ss.disabled = true; $("sttnote").textContent = "using the browser's built-in recognizer"; }
+    }
+    S.models = h.models || {};
+    if (S.models.talker) { $("modelchip").textContent = TALKER_LABEL; renderConTurn(0); }
+    const provs = (S.tts.providers || [{ id: "browser", label: "System", enabled: true }]).filter((p) => p.enabled);
+    const opts = provs.map((p) => `<option value="${p.id}">${esc(p.label)}</option>`).join("");
+    S.voice = S.tts.default || "browser";
+    for (const id of ["voicesel", "voicesel2"]) {
+      const sel = $(id);
+      sel.innerHTML = opts; sel.value = S.voice;
+      sel.onchange = () => { S.voice = sel.value; $("voicesel").value = S.voice; $("voicesel2").value = S.voice; };
+    }
+    initOnboard(h);
+  } catch {}
+  populateMics();
+})();
+
+/* ═══════════ onboard: agent mode + platform pickers ═══════════ */
+function initOnboard(h) {
+  const modes = (h.modes && h.modes.length) ? h.modes : [
+    { id: "flexible", name: "Flexible agent", tagline: "Sees your screen and helps with anything you're doing." },
+    { id: "onboarding", name: "Onboarding agent", tagline: "Focused on getting a new user into their dashboard on a chosen platform." },
+  ];
+  S.platforms = h.platforms || [];
+  $("obModes").innerHTML = modes.map((m) => `
+    <button type="button" class="ob-mode${m.id === S.agentMode ? " selected" : ""}" data-mode="${esc(m.id)}">
+      <span class="ob-radio"></span>
+      <span class="ob-modebody"><span class="ob-modename">${esc(m.name)}</span><span class="ob-modedesc">${esc(m.tagline)}</span></span>
+    </button>`).join("");
+  document.querySelectorAll(".ob-mode").forEach((el) => { el.onclick = () => selectMode(el.dataset.mode); });
+
+  $("obPlats").innerHTML = S.platforms.filter((p) => !p.demoOnly).map((p) => `
+    <button type="button" class="ob-plat" data-id="${esc(p.id)}">
+      <i class="ob-platdot" style="background:${esc(p.accent || "#4F46E5")}"></i>
+      <span class="ob-platmeta"><span class="ob-platname">${esc(p.name)}</span><span class="ob-platcat">${esc(p.category || "")}</span></span>
+    </button>`).join("");
+  document.querySelectorAll(".ob-plat").forEach((el) => { el.onclick = () => selectPlatform(el.dataset.id); });
+
+  selectMode(S.agentMode);
+}
+function selectMode(id) {
+  S.agentMode = id === "onboarding" ? "onboarding" : "flexible";
+  document.querySelectorAll(".ob-mode").forEach((el) => el.classList.toggle("selected", el.dataset.mode === S.agentMode));
+  const onb = S.agentMode === "onboarding";
+  $("obPlatformBlock").hidden = !onb;
+  const pickable = S.platforms.filter((p) => !p.demoOnly);
+  if (onb && !S.platform && pickable.length) selectPlatform(pickable[0].id);
+}
+function selectPlatform(id) {
+  const p = S.platforms.find((x) => x.id === id);
+  if (!p) return;
+  S.platform = p;
+  document.querySelectorAll(".ob-plat").forEach((el) => el.classList.toggle("selected", el.dataset.id === id));
+  $("obPlatNote").textContent = `${p.name} — ${p.tagline || ""}`;
+}
+
+/* ═══════════ screen state machine ═══════════ */
+function setScreen(name) {
+  S.screen = name;
+  document.body.className = "screen-" + name;
+  if (name === "connecting") runCnWave();
+}
+// phones and some browsers can't capture a screen — hide the share controls there (class on <html>: setScreen owns body's)
+if (!navigator.mediaDevices || !navigator.mediaDevices.getDisplayMedia) document.documentElement.classList.add("noshare");
+
+/* connecting pre-roll: a voice ribbon that wakes up as each step completes */
+function runCnWave() {
+  const cv = $("cnWave");
+  if (!cv || cv.dataset.running) return;
+  cv.dataset.running = "1";
+  const g = cv.getContext("2d");
+  const accent = getComputedStyle(document.documentElement).getPropertyValue("--brand-a").trim() || "#6366F1";
+  let amp = 2;
+  const frame = (t) => {
+    if (S.screen !== "connecting") { delete cv.dataset.running; return; }
+    const r = cv.getBoundingClientRect(), d = Math.min(2, devicePixelRatio || 1);
+    if (cv.width !== Math.round(r.width * d)) { cv.width = Math.round(r.width * d); cv.height = Math.round(r.height * d); }
+    g.setTransform(d, 0, 0, d, 0, 0);
+    const w = r.width, h = r.height, done = document.querySelectorAll("#cnSteps li.done").length;
+    amp += (3 + done * 6 + 3 * Math.abs(Math.sin(t * 0.004)) - amp) * 0.05;
+    g.clearRect(0, 0, w, h);
+    for (let i = 0; i < 3; i++) {
+      g.beginPath(); g.globalAlpha = 0.9 - i * 0.28; g.lineWidth = 1.8 - i * 0.4; g.strokeStyle = i ? "#A5B4FC" : accent;
+      for (let x = 0; x <= w; x += 3) {
+        const n = x / w, env = Math.pow(Math.sin(Math.PI * n), 2);
+        const y = h / 2 + env * amp * (1 - i * 0.2) * (Math.sin(n * (8 + i * 2) + t * (0.0022 + i * 0.0006) + i) * 0.7 + Math.sin(n * 17 - t * 0.003 + i) * 0.3);
+        x ? g.lineTo(x, y) : g.moveTo(x, y);
+      }
+      g.stroke();
+    }
+    requestAnimationFrame(frame);
+  };
+  requestAnimationFrame(frame);
+}
+function cnStep(step, state) {
+  const li = document.querySelector(`#cnSteps li[data-step="${step}"]`);
+  if (li) { li.classList.remove("active", "done"); if (state) li.classList.add(state); }
+}
+function resetConnecting(title) {
+  $("cnTitle").textContent = title || "Connecting you to Ava…";
+  ["session", "voice", "greet"].forEach((s) => cnStep(s, null));
+}
+const wait = (ms) => new Promise((r) => setTimeout(r, ms));
+
+/* central stage layout: Meet grid (pre-share) ↔ shared screen ↔ compact tiles */
+function updateStageLayout() {
+  // the console takes the transcript's slot; the stage and tracker stay put (they just get narrower)
+  $("people").hidden = !$("console").hidden;
+  $("meetgrid").hidden = !(S.joined && !S.sharing);
+  $("minitiles").hidden = !(S.joined && S.sharing);
+  $("workflow").hidden = !(S.joined && S.workflow);
+}
+
+/* ═══════════ call sounds (WebAudio — no assets) ═══════════ */
+function unlockAudio() {
+  if (!audioCtx) { try { audioCtx = new (window.AudioContext || window.webkitAudioContext)(); } catch { return null; } }
+  if (audioCtx.state === "suspended") audioCtx.resume().catch(() => {});
+  return audioCtx;
+}
+function blip(freq, at, dur = 0.1, vol = 0.05) {
+  const ctx = unlockAudio(); if (!ctx) return;
+  const osc = ctx.createOscillator(), g = ctx.createGain();
+  osc.type = "sine"; osc.frequency.value = freq;
+  const t = ctx.currentTime + at;
+  g.gain.setValueAtTime(0, t);
+  g.gain.linearRampToValueAtTime(vol, t + 0.02);
+  g.gain.exponentialRampToValueAtTime(0.001, t + dur);
+  osc.connect(g); g.connect(ctx.destination);
+  osc.start(t); osc.stop(t + dur + 0.05);
+}
+let ringTimer = null;
+function startRing() {
+  stopRing();
+  const ring = () => { blip(600, 0, 0.12, 0.045); blip(760, 0.18, 0.14, 0.045); };
+  ring(); ringTimer = setInterval(ring, 1700);
+  S.ringing = true;
+}
+function stopRing() { if (ringTimer) clearInterval(ringTimer); ringTimer = null; S.ringing = false; }
+function joinChime() { blip(660, 0, 0.12, 0.06); blip(880, 0.13, 0.18, 0.06); }
+function leaveChime() { blip(660, 0, 0.12, 0.05); blip(440, 0.13, 0.2, 0.05); }
+function ackBlip() { blip(920, 0, 0.05, 0.028); }            // "heard you" — after your utterance lands
+function yieldTick() { blip(520, 0, 0.06, 0.03); }           // "go ahead" — she steps back when you cut in
+
+// Soft room tone while a voice call is live — real calls are never dead silent,
+// and the faint bed makes her pauses feel like presence instead of a crash.
+let roomTone = null;
+function startRoomTone() {
+  const ctx = unlockAudio(); if (!ctx || roomTone) return;
+  const len = 2 * ctx.sampleRate, buf = ctx.createBuffer(1, len, ctx.sampleRate);
+  const d = buf.getChannelData(0);
+  let last = 0;
+  for (let i = 0; i < len; i++) { const w = Math.random() * 2 - 1; last = (last + 0.02 * w) / 1.02; d[i] = last * 3.5; } // brown-ish noise
+  const src = ctx.createBufferSource(); src.buffer = buf; src.loop = true;
+  const g = ctx.createGain(); g.gain.value = 0.006;
+  src.connect(g); g.connect(ctx.destination); src.start();
+  roomTone = { src, g };
+}
+function stopRoomTone() { if (!roomTone) return; try { roomTone.src.stop(); } catch {} roomTone = null; }
+
+/* ═══════════ join / leave ═══════════ */
+// Mode defaults: a voice call keeps captions off (you're listening, and the
+// transcript rail has the text); text-only keeps Ava's voice off.
+function applyModeDefaults(mode) {
+  const voiceOn = mode === "voice";
+  $("speak").checked = voiceOn;
+  $("speakbtn").classList.toggle("on", voiceOn); $("speakbtn").setAttribute("aria-pressed", voiceOn);
+  S.cc = !voiceOn;
+  $("ccbtn").classList.toggle("on", S.cc); $("ccbtn").setAttribute("aria-pressed", S.cc);
+  $("capwrap").hidden = !S.cc;
+}
+
+async function joinCall(mode) {
+  if (S.joined) return true;
+  S.mode = mode || S.mode || "voice";
+  const onb = S.agentMode === "onboarding" && S.platform;
+  if (onb && S.platform.accent) applyBrand(S.platform.accent); else resetBrand();
+  stopMicTest();
+  // the connect ring covers the whole warm-up: session, voice model, greeting
+  unlockAudio(); startRing();
+  setScreen("connecting");
+  resetConnecting(onb ? `Connecting you to your ${S.platform.name} guide…` : "Connecting you to Ava…");
+  cnStep("session", "active");
+  // prewarm the voice while the ring plays (the first synth after boot is the
+  // slow one — spend it on a throwaway "Hi." instead of the greeting)
+  if (S.mode === "voice" && (S.voice === "kokoro" || S.voice === "elevenlabs")) {
+    fetch("/api/tts", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ text: "Hi.", provider: S.voice }) }).then((r) => r.arrayBuffer()).catch(() => {});
+  }
+  try {
+    const res = await fetch("/api/session", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ mode: S.agentMode, platformId: S.platform ? S.platform.id : null }) });
+    const r = await res.json().catch(() => ({}));
+    if (!res.ok || !r.sessionId) throw new Error(r.error || `server error ${res.status}`);
+    S.sessionId = r.sessionId; S.joined = true;
+  } catch (e) {
+    stopRing();
+    setScreen("onboard");
+    $("joinstate").textContent = e instanceof TypeError ? "couldn't connect — is the server running?" : e.message;
+    return false;
+  }
+  cnStep("session", "done"); cnStep("voice", "active");
+  await wait(650); // let the voice-warm step read on the connecting animation
+  cnStep("voice", "done"); cnStep("greet", "active");
+  await wait(350);
+
+  // land in the room (Google-Meet style tiles until they share)
+  $("joinstate").textContent = "";
+  setTopbarForMode();
+  setScreen("call");
+  applyModeDefaults(S.mode);
+  updateStageLayout();
+  $("avastatusBig").textContent = "joining…";
+  $("endcall").disabled = false;
+  setPillLive(true);
+  setHealth("healthy", "HEALTHY");
+  S.t0 = Date.now(); startTimer();
+  S.record = []; // fresh session tape for the end-of-call replay
+  setStuck(false); // clear any leftover rethinking indicator
+  S.workflow = null; renderWorkflow(null); clearTimeout(S.handoffTimer); $("wfKnow").hidden = true;
+  S.specialistPresent = false; S.specialistKey = null; S.handoff = null; S.bridgeSince = 0; stopBridge(); stopUserRTC();
+  if (S.mode === "voice") { startLiveMic(); startRoomTone(); } // always-on detection + a faint call-presence bed
+  greet(); // the ring stops (with a join chime) when the greeting starts
+  setTimeout(() => { if (S.ringing) stopRing(); }, 12000); // safety: never ring forever
+  return true;
+}
+function setTopbarForMode() {
+  const onb = S.agentMode === "onboarding" && S.platform;
+  $("apptitle").textContent = onb ? `${S.platform.name} Onboarding` : "Flexible Agent";
+  $("topsub").textContent = onb ? `onboarding guide · ${S.platform.category || "platform"}` : "screen-aware assistant";
+  $("footmode").textContent = onb ? `onboarding ${S.platform.name} · transcript on` : "recording off · transcript on";
+}
+
+/* ═══════════ per-platform brand theming ═══════════ */
+function hexToRgb(h) { h = String(h || "").replace("#", ""); if (h.length === 3) h = h.split("").map((c) => c + c).join(""); const n = parseInt(h || "4F46E5", 16); return [(n >> 16) & 255, (n >> 8) & 255, n & 255]; }
+function shade(hex, f) { const [r, g, b] = hexToRgb(hex); const m = (x) => Math.max(0, Math.min(255, Math.round(f < 0 ? x * (1 + f) : x + (255 - x) * f))); return `rgb(${m(r)},${m(g)},${m(b)})`; }
+function applyBrand(hex) {
+  const r = document.documentElement, [R, G, B] = hexToRgb(hex);
+  const lum = (0.299 * R + 0.587 * G + 0.114 * B) / 255;
+  r.style.setProperty("--amber", hex);
+  r.style.setProperty("--amber-ink", lum > 0.6 ? "#12141A" : "#FFFFFF");
+  r.style.setProperty("--brandtint", `rgba(${R},${G},${B},0.10)`);
+  r.style.setProperty("--brandline", `rgba(${R},${G},${B},0.32)`);
+  r.style.setProperty("--brand-a", shade(hex, 0.16));
+  r.style.setProperty("--brand-b", hex);
+  r.style.setProperty("--brand-c", shade(hex, -0.34));
+}
+function resetBrand() { const r = document.documentElement; ["--amber", "--amber-ink", "--brandtint", "--brandline", "--brand-a", "--brand-b", "--brand-c"].forEach((p) => r.style.removeProperty(p)); }
+// Closing the tab mid-call ends the session too (revokes any handoff link).
+window.addEventListener("pagehide", () => {
+  if (S.joined && S.sessionId) fetch("/api/end", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ sessionId: S.sessionId }), keepalive: true }).catch(() => {});
+});
+$("endcall").onclick = () => {
+  if (!S.joined) return;
+  // grab what the report needs BEFORE teardown wipes the session id / clock
+  const sid = S.sessionId, durMs = Date.now() - S.t0, tape = S.record || [];
+  if (S.specialistKey || handoffActive()) fetch("/api/handoff", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ sessionId: sid, action: "cancel" }) }).catch(() => {});
+  if (S.turnAbort) { S.turnAbort.abort(); S.turnAbort = null; }
+  S.turnInFlight = false;
+  stopShare(); S.joined = false; S.sessionId = null; stopTimer(); stopRing();
+  stopLiveMic(); stopRoomTone(); S.pendingUtterance = null;
+  $("endcall").disabled = true;
+  $("capwrap").hidden = true;
+  updateStageLayout(); // S.joined is false now → hides meet grid + tiles
+  $("joinstate").textContent = "";
+  setPillLive(false); setHealth("ready", "READY");
+  stopStreamPlayback();
+  if ("speechSynthesis" in window) speechSynthesis.cancel();
+  if (ttsAudio) { try { ttsAudio.pause(); } catch {} ttsAudio = null; }
+  leaveChime();
+  if (pip) { try { pip.win.close(); } catch {} } // its pagehide handler clears the timer + observer
+  resetBrand();
+  setStuck(false);
+  S.workflow = null; renderWorkflow(null); clearTimeout(S.handoffTimer); $("wfKnow").hidden = true;
+  S.specialistPresent = false; S.specialistKey = null; S.handoff = null; S.bridgeSince = 0; stopBridge(); stopUserRTC();
+  setAvaState("standby");
+  laneIdle("vision", "waiting for a window"); laneIdle("intent", "waiting for input");
+  laneIdle("router", "idle"); laneIdle("planner", "no threads"); laneIdle("voice", "muted");
+  showReport(sid, durMs, tape);
+};
+function setPillLive(on) {
+  const p = $("livepill");
+  p.className = "pill " + (on ? "live" : "standby");
+  $("livepilltext").textContent = on ? "LIVE" : "STANDBY";
+}
+function setHealth(cls, text) { const h = $("health"); h.className = "health " + cls; $("healthtext").textContent = text; }
+function startTimer() {
+  stopTimer();
+  S.timer = setInterval(() => {
+    const s = Math.floor((Date.now() - S.t0) / 1000);
+    $("timer").textContent = [Math.floor(s / 3600), Math.floor((s % 3600) / 60), s % 60].map((x) => String(x).padStart(2, "0")).join(":");
+  }, 1000);
+}
+function stopTimer() { if (S.timer) clearInterval(S.timer); S.timer = null; }
+
+/* ═══════════ green room (pre-join gear check) ═══════════ */
+$("joinvoice").onclick = () => joinCall("voice");
+$("jointext").onclick = () => joinCall("text");
+$("meetShare").onclick = () => shareToggle();
+$("sharemain").onclick = async () => { if (await joinCall(S.joined ? S.mode : "voice")) { if (!S.sharing) shareToggle(); } };
+
+async function populateMics() {
+  try {
+    const devs = await navigator.mediaDevices.enumerateDevices();
+    const ins = devs.filter((d) => d.kind === "audioinput" && d.deviceId && d.deviceId !== "default");
+    $("micsel").innerHTML = '<option value="">System default</option>' +
+      ins.map((d, i) => `<option value="${esc(d.deviceId)}">${esc(d.label || "Microphone " + (i + 1))}</option>`).join("");
+    if (S.micDevice) $("micsel").value = S.micDevice;
+  } catch {}
+}
+$("micsel").onchange = () => { S.micDevice = $("micsel").value; };
+
+let micTest = null;
+async function toggleMicTest() {
+  if (micTest) { stopMicTest(); return; }
+  let stream;
+  try { stream = await navigator.mediaDevices.getUserMedia({ audio: S.micDevice ? { deviceId: { exact: S.micDevice } } : true }); }
+  catch { $("joinstate").textContent = "mic blocked — check browser permissions"; return; }
+  populateMics(); // labels become available once permission is granted
+  const ctx = unlockAudio(); if (!ctx) { stream.getTracks().forEach((t) => t.stop()); return; }
+  const an = ctx.createAnalyser(); an.fftSize = 512;
+  ctx.createMediaStreamSource(stream).connect(an);
+  const data = new Uint8Array(an.fftSize);
+  const bars = [...document.querySelectorAll("#miclevel i")];
+  micTest = { stream, raf: 0 };
+  const tick = () => {
+    if (!micTest) return;
+    an.getByteTimeDomainData(data);
+    let peak = 0;
+    for (let i = 0; i < data.length; i++) { const v = Math.abs(data[i] - 128) / 128; if (v > peak) peak = v; }
+    const lit = Math.min(bars.length, Math.round(peak * bars.length * 2.2));
+    bars.forEach((b, i) => b.classList.toggle("lit", i < lit));
+    micTest.raf = requestAnimationFrame(tick);
+  };
+  tick();
+  $("mictest").classList.add("on"); $("mictest").textContent = "Stop";
+}
+function stopMicTest() {
+  if (!micTest) return;
+  cancelAnimationFrame(micTest.raf);
+  micTest.stream.getTracks().forEach((t) => t.stop());
+  micTest = null;
+  document.querySelectorAll("#miclevel i").forEach((b) => b.classList.remove("lit"));
+  $("mictest").classList.remove("on"); $("mictest").textContent = "Test";
+}
+$("mictest").onclick = toggleMicTest;
+// Preview doubles as the warm-up: it runs the full TTS path end to end.
+$("voicetest").onclick = () => { unlockAudio(); speak("Hi, I'm Ava. This is how I'll sound on the call.", true, true); };
+
+/* ═══════════ screen share ═══════════ */
+function shareToggle() {
+  if (S.sharing) { stopShare(); return; }
+  navigator.mediaDevices.getDisplayMedia({ video: { frameRate: 5 }, audio: false }).then((st) => {
+    S.stream = st; video.srcObject = st; video.classList.add("on");
+    if (pip && pip.video) { pip.video.srcObject = st; pip.video.play().catch(() => {}); }
+    S.sharing = true; updateStageLayout();
+    const track = st.getVideoTracks()[0];
+    const win = (track.label || "your window").replace(/^(window|screen|web-contents-media-stream.*?):\s*/i, "").slice(0, 42) || "your window";
+    $("privacy").hidden = false; $("privwin").textContent = win;
+    $("share").classList.add("armed"); $("sharelabel").textContent = "Sharing " + win.slice(0, 24);
+    const ps = pipEl("pipShare"); if (ps) ps.classList.add("armed");
+    $("stagelabel").textContent = "stage · " + win;
+    $("youshare").hidden = false; $("miniShareDot").classList.add("on");
+    laneRun("vision", "watching " + win.slice(0, 26), true);
+    track.addEventListener("ended", stopShare);
+    // Prefer the off-main-thread worker (never throttled). Fall back to the rVFC loop.
+    if (!startWorkerDetection(track)) startObserve();
+    if (!pip) openPiP(); // pop out WHEN sharing starts (this click is the gesture)
+    refreshUserRTC();
+  }).catch(() => {});
+}
+function stopShare() {
+  const was = S.sharing;
+  if (S.stream) S.stream.getTracks().forEach((t) => t.stop());
+  S.stream = null; S.sharing = false; video.classList.remove("on");
+  updateStageLayout();
+  $("privacy").hidden = true;
+  $("share").classList.remove("armed"); $("sharelabel").textContent = "Share a window";
+  const ps = pipEl("pipShare"); if (ps) ps.classList.remove("armed");
+  $("stagelabel").textContent = "stage · nothing shared";
+  $("youshare").hidden = true; $("miniShareDot").classList.remove("on");
+  $("callout").hidden = true;
+  S.pendingChange = null; S.lastFrame = null;
+  stopWorkerDetection(); stopObserve();
+  if (was) refreshUserRTC();
+  if (was && S.sessionId) {
+    fetch("/api/observe", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ sessionId: S.sessionId, stopped: true }) }).catch(() => {});
+    laneIdle("vision", "sharing stopped");
+  }
+}
+$("share").onclick = async () => { if (await joinCall(S.joined ? S.mode : "voice")) shareToggle(); };
+
+/* ═══════════ off-main-thread detection (Worker + MediaStreamTrackProcessor) ═══════════ */
+let perceptWorker = null;
+function startWorkerDetection(track) {
+  if (!("MediaStreamTrackProcessor" in window) || typeof Worker === "undefined") return false;
+  try {
+    perceptWorker = new Worker("perceptionWorker.js");
+    perceptWorker.onmessage = (e) => { if (e.data && e.data.type === "change") onWorkerChange(e.data); };
+    const proc = new MediaStreamTrackProcessor({ track });
+    perceptWorker.postMessage({ type: "start", readable: proc.readable }, [proc.readable]);
+    return true;
+  } catch { perceptWorker = null; return false; }
+}
+function stopWorkerDetection() { if (perceptWorker) { try { perceptWorker.postMessage({ type: "stop" }); perceptWorker.terminate(); } catch {} perceptWorker = null; } }
+function blobToDataURL(b) { return new Promise((res) => { const fr = new FileReader(); fr.onload = () => res(fr.result); fr.readAsDataURL(b); }); }
+// Coalesce a burst of change-frames into ONE read of the SETTLED screen. A single
+// action (click → navigate → content loads) trips the detector several times; if
+// we read each one, the same action shows up as two+ vision reads and Ava reacts
+// twice. So on a change we (re)start a short settle timer and only read once the
+// screen has stopped changing. The screen-share START reads promptly (no settle).
+let obsSettleTimer = null, obsSettleFrame = null;
+function onWorkerChange(m) {
+  if (m.announce) { doObserve(m); return; }
+  obsSettleFrame = m;
+  clearTimeout(obsSettleTimer);
+  obsSettleTimer = setTimeout(() => { const mm = obsSettleFrame; obsSettleFrame = null; if (mm) doObserve(mm); }, 550);
+}
+async function doObserve(m) {
+  // Busy → queue the change instead of dropping it (the worker's own hash has
+  // already advanced, so a dropped change would never re-fire).
+  if (S.turnInFlight || S.observing) { S.pendingChange = m; return; }
+  S.observing = true;
+  laneRun("vision", m.announce ? "you shared — taking a look" : "screen changed — reading", true);
+  try {
+    const frame = await blobToDataURL(m.blob);
+    S.lastFrame = { frame, hash: m.hash };
+    // changed:true → the worker's two-signal detector already decided this IS a
+    // change; the server must re-read even if the coarse hash gate disagrees
+    const r = await fetch("/api/observe", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ sessionId: S.sessionId, frame, frameHash: m.hash, changed: true }) }).then((x) => x.json());
+    handleObserve(r, m.announce);
+  } catch {}
+  S.observing = false;
+  processPendingChange();
+}
+function processPendingChange() {
+  if (!S.pendingChange || S.turnInFlight || S.observing || !S.sharing) return;
+  const m = S.pendingChange; S.pendingChange = null;
+  doObserve(m); // already a settled/queued change — read it directly, no re-debounce
+}
+function meaningfulActivity(a) { return a && !/^\s*no( real)? change/i.test(a); }
+function handleObserve(r, announce) {
+  if (!r || r.error) { laneIdle("vision", "read failed — will retry"); return; }
+  const worthIt = announce || r.navChanged || r.stepChanged || meaningfulActivity(r.activity);
+  if (r.ran && r.screenState) {
+    S.calls.vision += 1;
+    laneDone("vision", null, `v${r.screenState.v} · ${r.screenState.app || "?"}`);
+    if (worthIt) addSysLine("vision", `${r.screenState.app} · ${r.screenState.page}${r.activity ? " — " + r.activity : ""}`);
+    if (meaningfulActivity(r.activity)) showCallout(r.activity);
+  } else if (r.discarded) {
+    laneIdle("vision", "no real change — skipped");
+  }
+  if (r.session) renderSession(r.session);
+  if (r.workflow) renderWorkflow(r.workflow); // real-time tracker update as the user navigates
+  // a real change reaches Ava — SHE decides whether it's a moment to speak
+  if (S.proactive && worthIt) scheduleNudge(600);
+}
+let calloutTimer = null;
+function showCallout(text) {
+  $("callouttext").textContent = text;
+  $("callout").hidden = false;
+  clearTimeout(calloutTimer);
+  calloutTimer = setTimeout(() => { $("callout").hidden = true; }, 7000);
+}
+
+/* proactive nudges — debounced, only when Ava is idle */
+function scheduleNudge(delay) { clearTimeout(S.nudgeTimer); S.nudgeTimer = setTimeout(fireNudge, delay); }
+async function fireNudge() {
+  if (!S.sharing || S.turnInFlight || S.specialistPresent) return; // a specialist owns the call → Ava stays quiet
+  // Don't drop a moment just because she's mid-sentence — wait, then react to
+  // the LATEST screen state (observes keep it current while she talks). This is
+  // what let a $10k typo and a modal-close slip by silently before.
+  if (S.speaking || S.nudgeBusy) { scheduleNudge(700); return; }
+  S.nudgeBusy = true;
+  try {
+    const r = await fetch("/api/nudge", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ sessionId: S.sessionId }) }).then((x) => x.json());
+    if (r && r.goalGuessedNow) { addSysLine("planner", "inferred intention: " + r.goal); renderGoal(r.goal); }
+    if (r && r.workflow) renderWorkflow(r.workflow);
+    if (r && r.text && !S.speaking && !S.turnInFlight) { addAgentProactive(r.text); if (r.session) renderSession(r.session); }
+  } catch {}
+  S.nudgeBusy = false;
+}
+
+/* ═══════════ fallback observe loop (no worker) ═══════════ */
+let lastObsTime = 0;
+const HAS_RVFC = "requestVideoFrameCallback" in HTMLVideoElement.prototype;
+function startObserve() {
+  stopObserve(); S.lastObs = null;
+  const kick = () => { if (S.sharing && activeVid().videoWidth) observeNow(true); else if (S.sharing) setTimeout(kick, 200); };
+  setTimeout(kick, 250);
+  scheduleFrame();
+  S.obsTimer = setInterval(onFrame, 700);
+}
+function scheduleFrame() { const v = activeVid(); if (S.sharing && HAS_RVFC && v.requestVideoFrameCallback) v.requestVideoFrameCallback(onFrame); }
+function stopObserve() { if (S.obsTimer) clearInterval(S.obsTimer); S.obsTimer = null; }
+function onFrame() {
+  if (!S.sharing || perceptWorker) return;
+  const now = performance.now(), hash = frameHash();
+  if (hash && hash !== S.lastObs && !S.observing && !S.turnInFlight && now - lastObsTime > 600) {
+    laneRun("vision", "screen changed — reading", true);
+    S.lastObs = hash; lastObsTime = now; observeNow(false);
+  }
+  scheduleFrame();
+}
+async function observeNow(announce) {
+  if (S.observing || S.turnInFlight) return; S.observing = true;
+  try {
+    const r = await fetch("/api/observe", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ sessionId: S.sessionId, frame: captureFrame(), frameHash: frameHash() }) }).then((x) => x.json());
+    handleObserve(r, announce);
+  } catch {}
+  S.observing = false;
+}
+
+/* capture helpers */
+function activeVid() {
+  if (pip && pip.video && pip.video.videoWidth && pip.video.readyState >= 2) return pip.video;
+  return video;
+}
+function captureFrame() {
+  const v = activeVid(); if (!S.sharing || !v.videoWidth) return null;
+  // 1600px / q0.8: small, low-contrast text (per-plan credits, tiny labels) is
+  // legible to the vision model at this fidelity; latency is unaffected by size.
+  const t = Math.min(1, 1600 / Math.max(v.videoWidth, v.videoHeight));
+  capcanvas.width = Math.round(v.videoWidth * t); capcanvas.height = Math.round(v.videoHeight * t);
+  capcanvas.getContext("2d").drawImage(v, 0, 0, capcanvas.width, capcanvas.height);
+  return capcanvas.toDataURL("image/jpeg", 0.8);
+}
+function frameHash() {
+  const v = activeVid(); if (!S.sharing || !v.videoWidth) return null;
+  const N = 33; hashcanvas.width = N; hashcanvas.height = N; // 32×32 dHash — same shape as the worker's
+  const c = hashcanvas.getContext("2d"); c.drawImage(v, 0, 0, N, N);
+  const d = c.getImageData(0, 0, N, N).data;
+  const gray = (x, y) => { const i = (y * N + x) * 4; return d[i] * 0.299 + d[i + 1] * 0.587 + d[i + 2] * 0.114; };
+  let bits = "";
+  for (let y = 0; y < 32; y++) for (let x = 0; x < 32; x++) bits += gray(x, y) > gray(x + 1, y) ? "1" : "0";
+  for (let y = 0; y < 32; y++) for (let x = 0; x < 32; x++) bits += gray(x, y) > gray(x, y + 1) ? "1" : "0";
+  let hex = ""; for (let i = 0; i < bits.length; i += 4) hex += parseInt(bits.slice(i, i + 4), 2).toString(16);
+  return hex;
+}
+
+/* ═══════════ console drawer ═══════════ */
+function consoleToggle(force) {
+  const open = force != null ? force : $("console").hidden;
+  $("console").hidden = !open;
+  $("consolebtn").classList.toggle("on", open);
+  updateStageLayout();
+}
+$("consolebtn").onclick = () => consoleToggle();
+$("conclose").onclick = () => consoleToggle(false);
+document.addEventListener("keydown", (e) => {
+  if ((e.metaKey || e.ctrlKey) && e.key === "\\") { e.preventDefault(); consoleToggle(); }
+  if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") { e.preventDefault(); joinCall(S.joined ? S.mode : "text").then(() => $("input").focus()); }
+});
+
+/* crew lanes */
+function laneRun(lane, state, on) {
+  const row = $("row-" + lane); if (!row) return;
+  row.classList.toggle("run", !!on);
+  if (state != null) $("st-" + lane).textContent = state;
+}
+function laneDone(lane, ms, state) {
+  const row = $("row-" + lane);
+  row.classList.remove("run");
+  if (state != null) $("st-" + lane).textContent = state;
+  if (ms != null) $("ms-" + lane).textContent = ms + "ms";
+  if (S.calls[lane]) $("ca-" + lane).textContent = S.calls[lane] + (S.calls[lane] === 1 ? " call" : " calls");
+  renderCrewCount();
+}
+function laneIdle(lane, state) { const row = $("row-" + lane); row.classList.remove("run"); if (state != null) $("st-" + lane).textContent = state; renderCrewCount(); }
+function renderCrewCount() {
+  const n = document.querySelectorAll(".crewrow.run").length;
+  $("crewcount").textContent = n + " / 5 RUNNING";
+}
+function renderConTurn(turns) {
+  $("conturn").textContent = "turn " + (turns || 0) + " · " + (S.models.talker ? TALKER_LABEL : "—");
+}
+
+/* trace */
+const LANE_OF_ROLE = { perception: "vision", intent: "intent", planner: "planner", talker: "voice" };
+function renderTrace(perModel, hotMs, avgMs) {
+  // big number: the hot-path (reply) latency; delta vs session average
+  $("bigLat").textContent = (hotMs / 1000).toFixed(2);
+  $("bigLat").classList.remove("null");
+  $("tracelabel").textContent = "END-TO-END";
+  const d = $("latDelta");
+  if (avgMs > 0 && Math.abs(hotMs - avgMs) > 40) {
+    const diff = (hotMs - avgMs) / 1000;
+    d.textContent = (diff > 0 ? "+" : "−") + Math.abs(diff).toFixed(2) + "s vs avg";
+    d.className = "mono delta " + (diff > 0 ? "bad" : "good");
+  } else d.textContent = "";
+
+  // sparkline of reply latencies
+  S.latHistory.push(hotMs); if (S.latHistory.length > 24) S.latHistory.shift();
+  const max = Math.max(...S.latHistory, 1);
+  $("spark").innerHTML = S.latHistory.map((v, i) => {
+    const h = Math.max(3, Math.round((v / max) * 30));
+    const cls = i === S.latHistory.length - 1 ? "now" : v > max * 0.75 ? "hi" : "";
+    return `<span class="${cls}" style="height:${h}px"></span>`;
+  }).join("");
+
+  // lane-striped bar of the REPLY path (the planner runs async, off the hot
+  // path — its latency lives in its crew row, not in this bar)
+  const lanes = (perModel || []).filter((u) => u.latencyMs > 0 && u.role !== "planner").map((u) => ({ lane: LANE_OF_ROLE[u.role] || "voice", ms: u.latencyMs }));
+  const total = lanes.reduce((s, l) => s + l.ms, 0);
+  if (total > 0) {
+    $("lanebar").innerHTML = lanes.map((l) => {
+      const w = (l.ms / total) * 100;
+      const label = w > 17 ? `<span class="mono">${l.lane.toUpperCase()} ${l.ms}ms</span>` : "";
+      return `<div class="seg ${l.lane}" style="width:${w}%">${label}</div>`;
+    }).join("");
+    const t = total / 1000;
+    $("ax1").textContent = (t / 3).toFixed(1) + "s"; $("ax2").textContent = (2 * t / 3).toFixed(1) + "s"; $("ax3").textContent = t.toFixed(1) + "s";
+  }
+}
+
+/* compiled context */
+function renderContext(compiled, tokens) {
+  $("ctxtok").innerHTML = `<b>${(tokens / 1000).toFixed(1)}k</b> <span class="meta">/ 32k</span>`;
+  const total = compiled.length || 1;
+  const screenM = compiled.match(/SCREEN:[\s\S]*?(?=\nRECENT ACTIVITY|\nPLAN:|$)/);
+  const talkM = compiled.match(/RECENT:[\s\S]*$/);
+  const screenLen = screenM ? screenM[0].length : 0;
+  const talkLen = talkM ? talkM[0].length : 0;
+  const sysLen = Math.max(0, total - screenLen - talkLen);
+  const scale = (tokens / 32000) * 100;
+  const meter = $("ctxmeter");
+  meter.querySelector(".sys").style.width = ((sysLen / total) * scale) + "%";
+  meter.querySelector(".screen").style.width = ((screenLen / total) * scale) + "%";
+  meter.querySelector(".talk").style.width = ((talkLen / total) * scale) + "%";
+  $("ctxtext").textContent = compiled;
+}
+
+/* session metrics */
+function renderSession(m) {
+  if (!m) return;
+  $("sTurns").textContent = m.turns;
+  $("sTok").textContent = fmt(m.totalTokens);
+  $("sAvg").textContent = m.avgLatencyMs ? (m.avgLatencyMs / 1000).toFixed(2) + "s" : "—";
+  $("sVision").textContent = `${m.perception.analysed}/${m.perception.captured}`;
+  const sp = $("spend");
+  sp.textContent = "$" + m.cost.toFixed(4);
+  sp.classList.toggle("null", m.cost === 0);
+  const hrs = Math.max((Date.now() - S.t0) / 3600e3, 1 / 120);
+  $("spendrate").textContent = "$" + (m.cost / hrs).toFixed(3) + " / hr";
+  renderConTurn(m.turns);
+}
+function renderGoal(goal) { if (goal && goal !== "—") $("goal").textContent = goal; }
+
+/* ═══════════ turn loop (SSE) ═══════════ */
+async function submitComposer() {
+  const v = $("input").value.trim();
+  if (!v) return;
+  $("input").value = "";
+  // typing before the call starts joins text-only (voice stays off, CC on)
+  if (await joinCall(S.joined ? S.mode : "text")) sendTurn(v);
+}
+$("composer").addEventListener("submit", (e) => { e.preventDefault(); submitComposer(); });
+$("input").addEventListener("keydown", (e) => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); submitComposer(); } });
+
+function parseSSE(chunk) {
+  let ev = "message", data = "";
+  for (const line of chunk.split("\n")) { if (line.startsWith("event:")) ev = line.slice(6).trim(); else if (line.startsWith("data:")) data += line.slice(5).trim(); }
+  let d = {}; try { d = JSON.parse(data); } catch {}
+  return { ev, d };
+}
+async function streamTurn(body) {
+  setAvaState("thinking"); S.turnInFlight = true; clearTimeout(S.nudgeTimer);
+  $("cap").textContent = ""; $("cap").classList.remove("err");
+  const ctx = { streamMsg: null, full: "" };
+  const ac = new AbortController(); S.turnAbort = ac; // hanging up cancels the turn in flight
+  try {
+    const res = await fetch("/api/turn", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(body), signal: ac.signal });
+    if (!res.ok) { const j = await res.json().catch(() => ({})); throw new Error(j.error || `server error ${res.status}`); }
+    const reader = res.body.getReader(); const dec = new TextDecoder(); let buf = "";
+    for (;;) { const { value, done } = await reader.read(); if (done) break; buf += dec.decode(value, { stream: true }); let i; while ((i = buf.indexOf("\n\n")) >= 0) { handleEvent(parseSSE(buf.slice(0, i)), ctx); buf = buf.slice(i + 2); } }
+  } catch (e) { if (!ac.signal.aborted) agentError(e.message); }
+  const latest = S.turnAbort === ac;
+  if (latest) S.turnAbort = null;
+  if (ac.signal.aborted || !latest) return; // hung up, or a newer turn owns the flags now
+  S.turnInFlight = false;
+  S.lastObs = frameHash();
+  processPendingChange();
+  if (S.pendingUtterance) { const u = S.pendingUtterance; S.pendingUtterance = null; sendTurn(u); } // speech that arrived mid-turn
+}
+// Ask the worker for the CURRENT frame straight off the track.
+function grabFrame(timeout = 800) {
+  return new Promise((resolve) => {
+    if (!perceptWorker) return resolve(null);
+    let done = false;
+    const h = async (e) => { if (done || !e.data || e.data.type !== "grabbed") return; done = true; perceptWorker.removeEventListener("message", h); resolve(e.data.blob ? { frame: await blobToDataURL(e.data.blob), hash: e.data.hash } : null); };
+    perceptWorker.addEventListener("message", h);
+    perceptWorker.postMessage({ type: "grab" });
+    setTimeout(() => { if (!done) { done = true; if (perceptWorker) perceptWorker.removeEventListener("message", h); resolve(null); } }, timeout);
+  });
+}
+function voiceModeOn() { return S.mode === "voice" && $("speak").checked; }
+async function sendTurn(text) {
+  addLine("you", text);
+  logAgent("user", text);
+  // A specialist is on the call → the user is talking to the human, not Ava.
+  if (S.specialistPresent) {
+    try { await fetch("/api/bridge", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ sessionId: S.sessionId, action: "usersay", text }) }); } catch {}
+    return;
+  }
+  // If the worker flagged a change that hasn't been read yet (it fired while a
+  // turn was in flight), this turn MUST re-read the screen even when the
+  // coarse hash gate would say "no change" — the fresh grab below supersedes
+  // the queued change.
+  const changed = !!S.pendingChange;
+  let frame = null, hash = null;
+  if (S.sharing && perceptWorker) { const g = await grabFrame(); if (g) { frame = g.frame; hash = g.hash; } else if (S.lastFrame) { frame = S.lastFrame.frame; hash = S.lastFrame.hash; } }
+  if (!frame && S.sharing) { frame = captureFrame(); hash = frameHash(); }
+  if (changed && frame) S.pendingChange = null;
+  await streamTurn({ sessionId: S.sessionId, userText: text, frame, screenActive: S.sharing, frameHash: hash, voice: voiceModeOn(), changed: changed && !!frame });
+}
+async function greet() { await streamTurn({ sessionId: S.sessionId, greet: true, voice: voiceModeOn() }); }
+
+function handleEvent({ ev, d }, ctx) {
+  if (ev === "perceive") {
+    if (d.ran && d.screenState) {
+      S.calls.vision += 1;
+      laneDone("vision", d.latencyMs || null, `v${d.screenState.v} · ${d.screenState.app || "?"}`);
+      if (meaningfulActivity(d.screenState.activity)) addSysLine("vision", `${d.screenState.app} · ${d.screenState.page} — ${d.screenState.activity}`, { ms: d.latencyMs, tok: d.tokens, model: d.model });
+    }
+    else if (d.discarded) laneIdle("vision", "no change — reused last read");
+    else if (d.reason) laneIdle("vision", d.reason.slice(0, 42));
+  } else if (ev === "intent") {
+    S.calls.intent += 1;
+    laneDone("intent", d.latencyMs || null, d.intent === "unavailable" ? "unavailable — regex route" : `parsed · ${d.intent}${d.frustrated ? " · frustrated" : ""}`);
+    if (d.intent && d.intent !== "unavailable") addSysLine("intent", `${d.intent}${d.frustrated ? " · frustrated" : ""}${d.request ? " — wants: " + d.request : ""}`, { ms: d.latencyMs, tok: d.tokens, model: d.model });
+  } else if (ev === "gate") {
+    S.calls.router += 1;
+    laneRun("router", null, false);
+    $("st-router").textContent = `→ ${d.mode}${d.app ? " · " + d.app : ""}`;
+    $("ms-router").textContent = "0ms";
+    $("ca-router").textContent = "deterministic";
+    addSysLine("router", `→ ${d.mode}${d.app ? " · " + d.app : ""}${d.willPlan ? " · will re-plan" : ""}`, { ms: 0 });
+  } else if (ev === "thinking") {
+    if (d.thought) {
+      const tags = (d.stuck ? " · stuck" : "") + (d.resolved ? " · resolved" : "");
+      const extra = (d.blocker ? " — blocker: " + d.blocker : "") + (d.nextTactic ? " → try: " + d.nextTactic : "");
+      addSysLine("thinking", d.thought + tags + extra, { ms: d.latencyMs, tok: d.tokens, model: d.model });
+    }
+    setStuck(d.stuck); // light up (or clear) the "rethinking" indicator on Ava's tile
+  } else if (ev === "workflow") {
+    renderWorkflow(d);
+  } else if (ev === "knowledge") {
+    if (d.count) { addSysLine("knowledge", `retrieved ${d.count} ${d.source || "product"} doc${d.count > 1 ? "s" : ""} to answer`); showKnow(d); }
+  } else if (ev === "context") {
+    renderContext(d.compiled, d.tokens);
+  } else if (ev === "talkerStart") {
+    if (S.ringing) { stopRing(); joinChime(); } // the call has connected
+    laneRun("voice", "composing…", true);
+    setAvaState("speaking");
+    $("cap").textContent = ""; ctx.streamMsg = addLine("ava", ""); ctx.full = "";
+  } else if (ev === "delta") {
+    ctx.full += d.text;
+    if (S.cc) $("cap").textContent = clean(ctx.full);
+    if (ctx.streamMsg) { ctx.streamMsg.querySelector("p").textContent = clean(ctx.full); $("transcript").scrollTop = $("transcript").scrollHeight; }
+  } else if (ev === "talkerDone") {
+    S.calls.voice += 1;
+    laneDone("voice", d.latencyMs, "answered · " + (S.voice === "browser" ? "system voice" : S.voice));
+    ctx.full = humanize(clean(d.text));
+    if (S.cc) $("cap").textContent = ctx.full;
+    if (ctx.streamMsg) ctx.streamMsg.querySelector("p").textContent = ctx.full;
+    logAgent("voice", ctx.full, { ms: d.latencyMs, tok: d.tokens, model: d.model });
+    speak(ctx.full, true).then((spoke) => {
+      // no audio for this reply (voice off, or superseded) — don't stay "speaking"
+      if (!spoke && !streamState && !ttsFetch && !(ttsAudio && !ttsAudio.paused)) setAvaState("listening");
+    });
+    if (S.degraded) { S.degraded = false; setHealth("healthy", "HEALTHY"); setPillLive(true); }
+    // reply done — unblock observation now, don't wait for the planner tail
+    S.turnInFlight = false; processPendingChange();
+  } else if (ev === "planner") {
+    if (d.goal) renderGoal(d.goal);
+    if (d.ran) {
+      S.calls.planner += 1;
+      laneDone("planner", d.latencyMs, d.understanding ? "re-planned · " + d.understanding : "re-planned");
+      addSysLine("planner", `goal: ${d.goal}${d.plan && d.plan.length ? " · plan: " + d.plan.join(" → ") : ""}`, { ms: d.latencyMs, tok: d.tokens, model: d.model });
+    }
+    else if (d.error) laneIdle("planner", "failed — keeping last plan");
+    else laneIdle("planner", d.understanding && d.understanding !== "—" ? "watching · " + d.understanding : "watching");
+  } else if (ev === "metrics") {
+    if (d.goal) renderGoal(d.goal);
+    renderSession(d.session);
+    if (d.perModel && d.hotLatencyMs) renderTrace(d.perModel, d.hotLatencyMs, d.session ? d.session.avgLatencyMs : 0);
+  } else if (ev === "error") {
+    agentError(d.error);
+  } else if (ev === "done") {
+    if (!(ttsAudio && !ttsAudio.paused && !ttsAudio.ended) && !S.speaking) setAvaState("listening");
+  }
+}
+
+/* ═══════════ Ava state / transcript / caption ═══════════ */
+function setAvaState(state) {
+  // state: standby | listening | thinking | speaking
+  const sp = state === "speaking";
+  ["avatile", "minitileAva", "avaBig"].forEach((id) => { const el = $(id); if (el) el.classList.toggle("speaking", sp); });
+  const t = $("avatile"); if (t) t.classList.toggle("thinking", state === "thinking");
+  const label = sp ? "speaking · " + (S.voice === "browser" ? "system" : S.voice)
+    : state === "thinking" ? "thinking…"
+    : state === "listening" ? "listening" : "standby";
+  ["avastatus", "avastatusBig", "wfAgentState"].forEach((id) => { const el = $(id); if (el) el.textContent = label; });
+  ["eqCap", "eqTile", "eqMini", "eqBig", "wfEq"].forEach((id) => { const el = $(id); if (el) el.classList.toggle("live", sp); });
+  if (sp) laneRun("voice", null, true); else laneRun("voice", null, false);
+  if (pip && pip.status) pip.status.textContent = $("avastatus").textContent;
+  if (pip && pip.orb) pip.orb.classList.toggle("speaking", state === "speaking");
+  S.speaking = state === "speaking";
+}
+function setYouStatus(t) { for (const id of ["youmic", "youstatusBig"]) { const el = $(id); if (el) el.textContent = t; } }
+// Visible "rethinking" indicator — driven by the reasoning agent's stuck verdict.
+function setStuck(stuck) {
+  S.stuck = !!stuck;
+  ["avaBig", "minitileAva", "avatile"].forEach((id) => { const el = $(id); if (el) el.classList.toggle("stuck", S.stuck); });
+  const r = $("avaRethink"); if (r) r.hidden = !S.stuck;
+  const pr = pipEl("pipRethink"); if (pr) pr.hidden = !S.stuck;
+  if (S.stuck) { // immediate cue the moment we notice, before the reply's "speaking" overwrites it
+    ["avastatusBig", "avastatus", "wfAgentState"].forEach((id) => { const el = $(id); if (el) el.textContent = "rethinking…"; });
+    if (pip && pip.status) pip.status.textContent = "rethinking…";
+  }
+}
+
+/* ═══════════ workflow tracker + human handoff + RAG indicator ═══════════ */
+function renderWorkflow(wf) {
+  S.workflow = wf || null;
+  if (wf && wf.handoff) S.handoff = wf.handoff;
+  if (!wf) {
+    // A re-plan can clear the tracker mid-handoff; keep the panel (and its
+    // "End handoff" control) up until the handoff is over.
+    if (!(handoffActive() || S.specialistPresent)) { $("workflow").hidden = true; return; }
+    $("wfTitle").textContent = "With a specialist"; $("wfCount").textContent = ""; $("wfFill").style.width = "0%"; $("wfEta").textContent = ""; $("wfSteps").innerHTML = "";
+    renderHandoff(S.handoff); updateStageLayout(); return;
+  }
+  $("wfTitle").textContent = wf.title || "Getting you set up";
+  $("wfCount").textContent = `${wf.done} / ${wf.total}`;
+  $("wfFill").style.width = (wf.total ? Math.round((wf.done / wf.total) * 100) : 0) + "%";
+  $("wfEta").textContent = wf.done >= wf.total ? "All done — nicely handled." : (wf.etaMin != null ? `About ${wf.etaMin} min${wf.etaMin === 1 ? "" : "s"} left` : "");
+  $("wfSteps").innerHTML = wf.steps.map((s) => {
+    const sub = s.status === "done" ? "Done" : s.status === "active" ? ("Happening now" + (wf.note ? " · " + esc(wf.note) : "")) : "";
+    return `<div class="wf-step ${s.status}"><span class="wf-mark"></span><div class="wf-stepbody"><span class="wf-steptitle">${esc(s.title)}</span>${sub ? `<span class="wf-substatus">${sub}</span>` : ""}</div></div>`;
+  }).join("");
+  renderHandoff(S.handoff);
+  updateStageLayout();
+}
+function handoffActive() { return !!(S.handoff && S.handoff.state && S.handoff.state !== "none"); }
+// The specialist gets their own revocable key, never the user's session id.
+function specialistURL() { return S.specialistKey ? `${location.origin}/specialist?key=${encodeURIComponent(S.specialistKey)}` : ""; }
+function renderHandoff(h) {
+  const banner = $("wfHandoffBanner"), btn = $("wfHandoff"), txt = $("wfHandoffText"), link = $("wfHandoffLink"), spin = $("wfSpin");
+  const on = (h && h.state && h.state !== "none") || S.specialistPresent;
+  banner.hidden = !on;
+  btn.textContent = on ? "End handoff" : "Talk to a person";
+  btn.classList.toggle("active", !!on);
+  if (!on) { link.hidden = true; return; }
+  if (S.specialistPresent || (h && h.state === "joined")) {
+    spin.style.display = "none";
+    txt.innerHTML = "<b>A specialist is on the call.</b> They can see your screen and progress, and Ava has stepped back.";
+    link.hidden = true;
+  } else {
+    spin.style.display = "";
+    txt.textContent = "Share this link with a specialist so they can join:";
+    link.hidden = !S.specialistKey; link.textContent = specialistURL();
+  }
+}
+$("wfHandoffLink").onclick = () => { try { navigator.clipboard.writeText(specialistURL()); const l = $("wfHandoffLink"); const t = l.textContent; l.textContent = "Copied to clipboard ✓"; setTimeout(() => { l.textContent = t; }, 1400); } catch {} };
+$("wfHandoff").onclick = async () => {
+  if (!S.joined) return;
+  const on = handoffActive() || S.specialistPresent;
+  const action = on ? "cancel" : "request";
+  try {
+    const r = await fetch("/api/handoff", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ sessionId: S.sessionId, action }) }).then((x) => x.json());
+    if (r.handoff) S.handoff = r.handoff;
+    S.specialistKey = action === "request" ? (r.specialistKey || null) : null;
+    if (action === "request") { addSysLine("router", "requested a human specialist"); startBridge(); renderHandoff(r.handoff || { state: "waiting" }); }
+    else { stopBridge(); stopUserRTC(); S.specialistPresent = false; renderHandoff({ state: "none" }); addSysLine("router", "handoff ended — Ava continues"); }
+  } catch {}
+};
+// Poll the shared bridge while a handoff is active: pick up the specialist
+// joining, their messages, and system lines; the user's own + Ava's lines are
+// already on screen so we skip them.
+function startBridge() { stopBridge(); bridgeTick(); }
+function stopBridge() { clearTimeout(S.bridgeTimer); S.bridgeTimer = null; }
+async function bridgeTick() {
+  if (!S.joined || !S.sessionId) return;
+  try {
+    const d = await fetch(`/api/bridge?sessionId=${encodeURIComponent(S.sessionId)}&since=${S.bridgeSince || 0}`).then((x) => x.json());
+    if (d && d.seq != null) {
+      S.bridgeSince = d.seq;
+      (d.events || []).forEach((e) => {
+        if (e.role === "specialist") { addLine("specialist", e.text); if (voiceModeOn() && !S.rtc) speak(e.text, true, true); } // if live voice is up, they hear it for real
+        else if (e.role === "system") addSysLine("router", e.text);
+      });
+      if (d.context) {
+        if (d.context.handoff) S.handoff = d.context.handoff;
+        const was = S.specialistPresent;
+        S.specialistPresent = !!d.context.specialist;
+        if (S.specialistPresent && !was) { setAvaState("listening"); startUserRTC(); } // Ava steps back, open the live A/V link
+        if (!S.specialistPresent && was) { stopUserRTC(); S.specialistKey = null; }
+        renderHandoff(d.context.handoff || (S.specialistPresent ? { state: "joined" } : { state: "waiting" }));
+      }
+    }
+  } catch {}
+  if (handoffActive() || S.specialistPresent) S.bridgeTimer = setTimeout(bridgeTick, 1400);
+}
+// Live A/V link to the specialist: send the shared screen + the user's mic,
+// receive (and play) the specialist's voice.
+async function startUserRTC() {
+  if (S.rtc || !window.makeRTC || !S.sessionId) return;
+  const streams = [];
+  if (S.sharing && S.stream) streams.push(S.stream); // the real screen the user is sharing
+  // mic: reuse the live-call mic if we have it, else grab one for the handoff
+  let micStream = liveMic && liveMic.stream;
+  if (!micStream) { try { micStream = await navigator.mediaDevices.getUserMedia({ audio: { echoCancellation: true, noiseSuppression: true } }); S.rtcMic = micStream; } catch {} }
+  if (micStream) streams.push(micStream);
+  try {
+    S.rtc = makeRTC({ sessionId: S.sessionId, role: "user", localStreams: streams,
+      onRemote: (stream) => { const a = $("rtcAudio"); if (a) { a.srcObject = stream; a.play().catch(() => {}); } },
+      onStatus: (s) => { if (s === "connected") addSysLine("router", "live voice + screen connected with the specialist"); } });
+  } catch {}
+}
+// The peer link carries the tracks it started with; when the shared window
+// changes mid-handoff, reconnect so the specialist sees the current screen.
+function refreshUserRTC() { if (S.rtc && S.specialistPresent && S.joined) { stopUserRTC(); startUserRTC(); } }
+function stopUserRTC() {
+  if (S.rtc) { try { S.rtc.close(); } catch {} S.rtc = null; }
+  if (S.rtcMic) { try { S.rtcMic.getTracks().forEach((t) => t.stop()); } catch {} S.rtcMic = null; }
+  const a = $("rtcAudio"); if (a) { try { a.srcObject = null; } catch {} }
+}
+function showKnow(d) {
+  const el = $("wfKnow"); if (!el) return;
+  el.textContent = `Referenced ${d.count} ${d.source || "product"} doc${d.count > 1 ? "s" : ""}`;
+  el.hidden = false;
+  clearTimeout(S.knowTimer); S.knowTimer = setTimeout(() => { el.hidden = true; }, 9000);
+}
+function nowTime() { const d = new Date(); return String(d.getHours()).padStart(2, "0") + ":" + String(d.getMinutes()).padStart(2, "0"); }
+function addLine(who, text) {
+  const el = document.createElement("div");
+  const cls = who === "ava" ? "ava" : who === "specialist" ? "specialist" : "you";
+  const label = who === "ava" ? "AVA" : who === "specialist" ? "SPECIALIST" : "YOU";
+  el.className = "tline " + cls;
+  el.innerHTML = `<span class="twho">${label}<span class="ttime mono">${nowTime()}</span></span><p></p>`;
+  el.querySelector("p").textContent = text;
+  $("transcript").appendChild(el); $("transcript").scrollTop = $("transcript").scrollHeight;
+  return el;
+}
+// agent-lane log entries (VISION / INTENT / ROUTER / PLANNER) — evaluation trail
+function addSysLine(lane, text, meta) {
+  const el = document.createElement("div");
+  el.className = "tline sys " + lane;
+  el.innerHTML = `<span class="twho">${lane.toUpperCase()}<span class="ttime mono">${nowTime()}</span></span><p></p>`;
+  el.querySelector("p").textContent = text;
+  $("transcript").appendChild(el); $("transcript").scrollTop = $("transcript").scrollHeight;
+  logAgent(lane, text, meta);
+}
+$("agentlog").onclick = () => {
+  const off = $("transcript").classList.toggle("noagents");
+  $("agentlog").textContent = off ? "agents off" : "agents on";
+  $("agentlog").classList.toggle("on", !off);
+};
+function addAgentProactive(text) {
+  const t = humanize(clean(text));
+  setAvaState("speaking");
+  clearTimeout(S.speakSafety); S.speakSafety = setTimeout(() => { if (S.speaking) setAvaState("listening"); }, Math.min(9000, 1800 + t.length * 45));
+  addLine("ava", t);
+  logAgent("voice", t);
+  if (S.cc) $("cap").textContent = t;
+  speak(t);
+}
+/* ═══════════ session report — recap + animated agent replay ═══════════ */
+// One append-only tape of every agent action, timestamped from call start.
+// The end-of-call report plays it back node-by-node so a reviewer can watch
+// perception → intent → router → planner → talker collaborate in real order.
+function logAgent(lane, text, meta) {
+  if (!S.joined || !Array.isArray(S.record)) return;
+  if (!REPORT_LANES[lane]) return;
+  S.record.push({ t: Date.now() - S.t0, lane, text: String(text || "").slice(0, 180), ms: Math.round((meta && meta.ms) || 0), tok: Math.round((meta && meta.tok) || 0), model: (meta && meta.model) || "" });
+}
+const REPORT_LANES = { vision: 1, intent: 1, thinking: 1, router: 1, planner: 1, voice: 1, user: 1 };
+const LANE_FN = { vision: "fn-vision", intent: "fn-intent", router: "fn-router", planner: "fn-planner", voice: "fn-voice", user: "fn-user" };
+const LANE_NAME = { vision: "Perception", intent: "Intent", thinking: "Thinking", router: "Router", planner: "Planner", voice: "Talker", user: "You" };
+const PLAY_SVG = '<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>';
+const PAUSE_SVG = '<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M7 5h4v14H7zM13 5h4v14h-4z"/></svg>';
+
+function fmtClock(ms) {
+  const s = Math.max(0, Math.floor(ms / 1000));
+  const h = Math.floor(s / 3600), m = Math.floor((s % 3600) / 60), sec = s % 60;
+  const pad = (x) => String(x).padStart(2, "0");
+  return (h ? pad(h) + ":" : "") + pad(m) + ":" + pad(sec);
+}
+function laneCounts(tape) {
+  const c = { vision: 0, intent: 0, router: 0, planner: 0, voice: 0, user: 0 };
+  for (const e of tape) if (c[e.lane] != null) c[e.lane]++;
+  return c;
+}
+function setCounts(c) { for (const k of ["vision", "intent", "router", "planner", "voice"]) { const el = $("fc-" + k); if (el) el.textContent = c[k] || 0; } }
+
+async function showReport(sid, durMs, rawTape) {
+  stopReplay();
+  const tape = rawTape.slice().sort((a, b) => a.t - b.t);
+  S.reportTape = tape;
+  S.reportDur = durMs;
+  $("repDur").textContent = fmtClock(durMs);
+  $("repHeadline").textContent = "Session complete";
+  $("repSummary").textContent = "Preparing your recap…";
+  $("repHighlights").innerHTML = "";
+  const c = laneCounts(tape);
+  setCounts(c);
+  renderStats(durMs, tape, c);
+  renderGantt(tape, durMs);
+  $("repProgress").style.width = "0%"; $("repPlayhead").style.left = "0%";
+  $("repNow").textContent = tape.length ? "Press play to watch the session unfold, agent by agent." : "No agent activity was recorded this session.";
+  $("repPlay").disabled = !tape.length;
+  $("report").hidden = false;
+
+  if (!sid) { $("repSummary").textContent = "Recap unavailable — no active session."; return; }
+  try {
+    const s = await fetch("/api/summary", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ sessionId: sid }) }).then((r) => r.json())
+      .finally(() => { // the recap was the last use — free the session slot now
+        fetch("/api/end", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ sessionId: sid }), keepalive: true }).catch(() => {});
+      });
+    if (s && !s.error) {
+      $("repHeadline").textContent = s.headline || "Session complete";
+      $("repSummary").textContent = s.summary || "—";
+      $("repHighlights").innerHTML = (s.highlights || []).map((h) => `<li>${esc(h)}</li>`).join("");
+    } else {
+      $("repSummary").textContent = "Recap unavailable for this session.";
+    }
+  } catch {
+    $("repSummary").textContent = "Recap unavailable — the session may have ended.";
+  }
+}
+function renderStats(durMs, tape, c) {
+  const stats = [
+    { n: fmtClock(durMs), l: "Duration" },
+    { n: c.vision, l: "Screen reads" },
+    { n: c.voice, l: "Ava replies" },
+    { n: tape.length, l: "Agent events" },
+  ];
+  $("repStats").innerHTML = stats.map((s) => `<div class="rep-stat"><b>${s.n}</b><span>${s.l}</span></div>`).join("");
+}
+// detailed, timestamped Gantt — one row per agent, bars placed by real time,
+// width by how long that call took. Shows where the wall-clock actually went.
+function renderGantt(tape, durMs) {
+  const rows = $("ganttRows"); if (!rows) return;
+  rows.innerHTML = ""; S.ganttBars = [];
+  const span = Math.max(1000, durMs || 0, ...tape.map((e) => e.t + (e.ms || 0)), 1);
+  const dotColor = (l) => l === "user" ? "var(--green)" : `var(--${l})`;
+  ["vision", "intent", "thinking", "router", "planner", "voice", "user"].forEach((lane) => {
+    const evs = tape.map((e, i) => ({ e, i })).filter((x) => x.e.lane === lane);
+    if (!evs.length) return;
+    const row = document.createElement("div"); row.className = "g-row";
+    const label = document.createElement("span"); label.className = "g-label";
+    label.innerHTML = `<i class="gdotc" style="background:${dotColor(lane)}"></i>${LANE_NAME[lane]}`;
+    const track = document.createElement("div"); track.className = "g-track";
+    evs.forEach(({ e, i }) => {
+      const bar = document.createElement("div"); bar.className = "g-bar " + lane;
+      const left = (e.t / span) * 100;
+      bar.style.left = left + "%";
+      bar.style.width = Math.min(100 - left, Math.max((e.ms || 0) / span * 100, 1.4)) + "%";
+      bar.title = `${fmtClock(e.t)} · ${e.ms ? e.ms + "ms" : "instant"}${e.tok ? " · " + e.tok + " tok" : ""}`;
+      track.appendChild(bar); S.ganttBars[i] = bar;
+    });
+    row.appendChild(label); row.appendChild(track); rows.appendChild(row);
+  });
+  const ax = $("ganttAxis"); if (ax) { ax.innerHTML = ""; for (let k = 0; k <= 4; k++) { const s = document.createElement("span"); s.textContent = fmtClock(span * k / 4); ax.appendChild(s); } }
+}
+function ganttOnUpto(n) { (S.ganttBars || []).forEach((b, i) => { if (b) b.classList.toggle("on", i < n); }); }
+function stepLabel(e) {
+  const t = e.ms ? ` · ${e.ms}ms${e.tok ? ` · ${e.tok} tok` : ""}` : "";
+  return `${fmtClock(e.t)}  ·  ${LANE_NAME[e.lane] || e.lane}${t} — ${e.text || "…"}`;
+}
+
+function fireNode(lane) {
+  const el = $(LANE_FN[lane]); if (el) { el.classList.add("fire"); setTimeout(() => el.classList.remove("fire"), 520); }
+  const bb = $("fn-bb"); if (bb) { bb.classList.add("fire"); setTimeout(() => bb.classList.remove("fire"), 520); } // every action reads/writes the blackboard
+}
+let replay = null;
+function stopReplay() {
+  if (replay && replay.timer) clearTimeout(replay.timer);
+  replay = null;
+  $("repPlay").innerHTML = PLAY_SVG + " Play replay";
+}
+function playReplay() {
+  const tape = (S.reportTape || []).slice().sort((a, b) => a.t - b.t);
+  if (!tape.length) return;
+  if (replay && replay.playing) { // pause
+    clearTimeout(replay.timer); replay.playing = false;
+    $("repPlay").innerHTML = PLAY_SVG + " Resume";
+    return;
+  }
+  if (replay && !replay.playing) { $("repPlay").innerHTML = PAUSE_SVG + " Pause"; replay.playing = true; stepReplay(); return; } // resume
+  // fresh play
+  const span = Math.max(1, tape[tape.length - 1].t);
+  replay = { tape, i: 0, span, counts: { vision: 0, intent: 0, router: 0, planner: 0, voice: 0, user: 0 }, timer: null, playing: true };
+  setCounts(replay.counts); ganttOnUpto(0);
+  $("repPlay").innerHTML = PAUSE_SVG + " Pause";
+  stepReplay();
+}
+function stepReplay() {
+  if (!replay || !replay.playing) return;
+  const { tape } = replay;
+  if (replay.i >= tape.length) { finishReplay(); return; }
+  const e = tape[replay.i];
+  fireNode(e.lane);
+  const gb = (S.ganttBars || [])[replay.i]; if (gb) gb.classList.add("on");
+  if (replay.counts[e.lane] != null) { replay.counts[e.lane]++; const fc = $("fc-" + e.lane); if (fc) fc.textContent = replay.counts[e.lane]; }
+  const pct = ((replay.i + 1) / tape.length) * 100;
+  $("repProgress").style.width = pct + "%"; $("repPlayhead").style.left = pct + "%";
+  $("repNow").textContent = stepLabel(e);
+  replay.i++;
+  // compress the real gaps into a watchable ~14s replay, but keep the rhythm
+  let gap = 650;
+  if (replay.i < tape.length) {
+    const raw = tape[replay.i].t - e.t;
+    gap = Math.min(1500, Math.max(280, raw * (14000 / replay.span)));
+  }
+  replay.timer = setTimeout(stepReplay, gap);
+}
+function finishReplay() {
+  const tape = S.reportTape || [];
+  $("repProgress").style.width = "100%"; $("repPlayhead").style.left = "100%";
+  setCounts(laneCounts(tape)); ganttOnUpto(tape.length);
+  $("repNow").textContent = `Replay complete — ${tape.length} agent actions over ${fmtClock(S.reportDur || 0)}.`;
+  replay = null;
+  $("repPlay").innerHTML = PLAY_SVG + " Replay again";
+}
+function closeReport() { stopReplay(); $("report").hidden = true; setScreen("onboard"); }
+$("repPlay").onclick = playReplay;
+$("repClose").onclick = closeReport;
+$("repNew").onclick = closeReport;
+$("repTimeline").onclick = (ev) => {
+  const tape = (S.reportTape || []).slice().sort((a, b) => a.t - b.t);
+  if (!tape.length) return;
+  const rc = $("repTimeline").getBoundingClientRect();
+  const pct = Math.min(1, Math.max(0, (ev.clientX - rc.left) / rc.width));
+  const idx = Math.max(0, Math.min(tape.length, Math.round(pct * tape.length)));
+  if (replay && replay.timer) clearTimeout(replay.timer);
+  const counts = laneCounts(tape.slice(0, idx));
+  setCounts(counts); ganttOnUpto(idx);
+  const e = tape[Math.max(0, idx - 1)];
+  $("repProgress").style.width = pct * 100 + "%"; $("repPlayhead").style.left = pct * 100 + "%";
+  if (e) { fireNode(e.lane); $("repNow").textContent = stepLabel(e); }
+  replay = { tape, i: idx, span: Math.max(1, tape[tape.length - 1].t), counts, timer: null, playing: false };
+  $("repPlay").innerHTML = PLAY_SVG + (idx >= tape.length ? " Replay again" : " Resume");
+};
+
+function agentError(msg) {
+  $("cap").textContent = "⚠ " + msg; $("cap").classList.add("err");
+  S.degraded = true;
+  setHealth("degraded", "DEGRADED");
+  const p = $("livepill"); p.className = "pill degraded"; $("livepilltext").textContent = "DEGRADED";
+  setAvaState("listening");
+}
+const fmt = (n) => (n || 0).toLocaleString("en-US");
+// Safe for element text AND quoted attribute values.
+function esc(s) { return String(s == null ? "" : s).replace(/[&<>"']/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" }[c])); }
+
+/* text cleanup — strip markdown & robotic openers so replies read like speech */
+function humanize(t) {
+  let s = String(t || "")
+    .replace(/^\s*(it looks like|i see that|i see|looks like|i can see|i notice)\s+(?:that\s+)?you(?:'re| are)?\s*(?:currently\s+)?(?:on|in|at|viewing|looking at|working in|working on)\b[^.!?]*[.!?]\s*/i, "")
+    .replace(/^\s*(it looks like|it seems(?: like)?|it appears(?: that)?|i can see that|i notice(?: that)?)\s+/i, "");
+  s = s.trim();
+  return s.length >= 8 ? s.charAt(0).toUpperCase() + s.slice(1) : t;
+}
+// Cut a reply at the first sign the model echoed its own compiled-context prompt.
+const LEAK_RE = /(SCREEN CHANGED|\bGOAL\s*[:(]|\bSCREEN:\s|\bvisible:\s|\bstate:\s|USER (INTENT|JUST SAID)|RECENT ACTIVITY|\bMODE:\s+[A-Z]|COMPILED CONTEXT|ONBOARDING MODE)/;
+function clean(t) {
+  let s = String(t || "");
+  const m = s.search(LEAK_RE); if (m >= 0) s = s.slice(0, m);
+  return s
+    .replace(/^\s*(ava|assistant|ai|agent)\s*[:>\-–]\s*/i, "") // strip leaked speaker label
+    .replace(/\*\*(.*?)\*\*/g, "$1").replace(/(^|[^*])\*(?!\*)([^*]+)\*/g, "$1$2")
+    .replace(/`{1,3}([^`]*)`{1,3}/g, "$1").replace(/^#{1,6}\s+/gm, "").replace(/^\s*[-•]\s+/gm, "")
+    .replace(/\[([^\]]+)\]\([^)]+\)/g, "$1").replace(/[_~]/g, "")
+    .replace(/[\u{1F000}-\u{1FAFF}\u{2600}-\u{27BF}\u{2190}-\u{21FF}\u{2B00}-\u{2BFF}]/gu, "")
+    .replace(/[ \t]{2,}/g, " ").trim();
+}
+function simText(a, b) {
+  const w = (s) => new Set(String(s || "").toLowerCase().replace(/[^a-z0-9 ]/g, " ").split(/\s+/).filter((x) => x.length > 2));
+  const A = w(a), B = w(b); if (!A.size || !B.size) return 0;
+  let i = 0; for (const x of A) if (B.has(x)) i++;
+  return i / (A.size + B.size - i);
+}
+
+/* ═══════════ toggles ═══════════ */
+$("ccbtn").onclick = () => {
+  S.cc = !S.cc;
+  $("ccbtn").classList.toggle("on", S.cc); $("ccbtn").setAttribute("aria-pressed", S.cc);
+  $("capwrap").hidden = !S.cc || !S.joined;
+};
+$("speakbtn").onclick = () => {
+  const c = $("speak"); c.checked = !c.checked;
+  $("speakbtn").classList.toggle("on", c.checked); $("speakbtn").setAttribute("aria-pressed", c.checked);
+  if (!c.checked) {
+    if ("speechSynthesis" in window) speechSynthesis.cancel();
+    stopStreamPlayback();
+    stopRoomTone();
+    if (ttsAudio) { try { ttsAudio.pause(); } catch {} ttsAudio = null; }
+    setAvaState("listening");
+  } else if (S.joined && S.mode === "voice") startRoomTone();
+};
+
+/* ═══════════ voice in (mic) ═══════════ */
+let rec = null, mediaRec = null, micChunks = [];
+const INPUT_PLACEHOLDER = "Tell Ava what you're working on…";
+function pipEl(id) { try { return pip && pip.win ? pip.win.document.getElementById(id) : null; } catch { return null; } }
+function micButtons(on) {
+  ["mic", "mic2"].forEach((id) => $(id).classList.toggle("miclive", on));
+  const pm = pipEl("pipMic"); if (pm) pm.classList.toggle("miclive", on);
+  setYouStatus(on ? "mic open" : "mic off");
+}
+function micToggle() {
+  if (S.mode === "voice") { liveMic ? stopLiveMic() : startLiveMic(); return; } // voice call → toggle always-on detection
+  if (BROWSER_STT) browserMic();
+  else if (S.stt) (mediaRec ? stopMic() : startMic());
+  else laneIdle("intent", "no mic STT available");
+}
+
+/* ── live mic: always-on voice detection + barge-in (voice mode) ──
+   An echo-cancelled stream feeds a small RMS VAD. Speech onset while Ava is
+   talking BARGES IN — her audio stops instantly. Continuous browser speech
+   recognition turns each utterance into a turn (VAD-gated Deepgram segments
+   without it). Two guards keep her from hearing herself through speakers:
+   finals that look like her own last line are dropped, and finals with no
+   recent VAD activity are dropped. */
+let liveMic = null, liveMicPending = false;
+async function startLiveMic() {
+  if (liveMic || liveMicPending) return true; // a double click mustn't open two mics
+  let stream;
+  liveMicPending = true;
+  try {
+    stream = await navigator.mediaDevices.getUserMedia({ audio: { echoCancellation: true, noiseSuppression: true, autoGainControl: true, ...(S.micDevice ? { deviceId: { exact: S.micDevice } } : {}) } });
+  } catch {
+    $("joinstate").textContent = "mic blocked — voice detection off";
+    laneIdle("intent", "mic blocked — type instead");
+    return false;
+  } finally { liveMicPending = false; }
+  // the call may have ended while the permission prompt was up
+  if (!S.joined || liveMic) { stream.getTracks().forEach((t) => t.stop()); return !!liveMic; }
+  const ctx = unlockAudio(); if (!ctx) { stream.getTracks().forEach((t) => t.stop()); return false; }
+  const an = ctx.createAnalyser(); an.fftSize = 1024;
+  const src = ctx.createMediaStreamSource(stream);
+  src.connect(an);
+  liveMic = { stream, src, an, data: new Uint8Array(an.fftSize), raf: 0, speech: false, above: 0, below: 0, noise: 0.008, lastVoiceAt: 0, sttMode: "none", rec: null, recorder: null, chunks: [], ws: null, tap: null };
+  stream.getAudioTracks()[0].addEventListener("ended", () => { // device unplugged → recover
+    stopLiveMic();
+    setTimeout(() => { if (S.joined && S.mode === "voice") startLiveMic(); }, 1000);
+  });
+  vadTick();
+  // Transcription: prefer the offline sherpa stream on the server — it hears
+  // the SAME echo-cancelled audio as the VAD, so it can't transcribe Ava's
+  // own voice the way the browser's separate SpeechRecognition capture did.
+  if (S.sttStream && await startSherpaStream()) liveMic.sttMode = "sherpa";
+  else if (BROWSER_STT) { liveMic.sttMode = "webspeech"; startLiveRec(); }
+  else if (S.stt) liveMic.sttMode = "segments";
+  micButtons(true);
+  setYouStatus("mic live · voice detection on");
+  return true;
+}
+
+/* stream 16kHz Int16 PCM to the server's offline recognizer over /asr */
+async function startSherpaStream() {
+  if (!liveMic) return false;
+  try {
+    if (!audioCtx.pcmTapLoaded) { await audioCtx.audioWorklet.addModule("pcm-worklet.js"); audioCtx.pcmTapLoaded = true; }
+  } catch { return false; }
+  if (!liveMic) return false;
+  return new Promise((resolve) => {
+    const ws = new WebSocket((location.protocol === "https:" ? "wss://" : "ws://") + location.host + "/asr?engine=" + encodeURIComponent(S.sttEngine || "zipformer"));
+    ws.binaryType = "arraybuffer";
+    let settled = false;
+    const settle = (ok) => { if (!settled) { settled = true; resolve(ok); } };
+    ws.onopen = () => {
+      if (!liveMic) { ws.close(); return settle(false); }
+      liveMic.asrRetries = 0;
+      if (liveMic.tap) { try { liveMic.tap.port.onmessage = null; liveMic.tap.disconnect(); liveMic.src.disconnect(liveMic.tap); } catch {} } // from a dropped socket
+      const tap = new AudioWorkletNode(audioCtx, "pcm-tap");
+      liveMic.src.connect(tap); tap.connect(audioCtx.destination); // silent output — keeps the node pulled
+      const ratio = 16000 / audioCtx.sampleRate;
+      let acc = new Int16Array(0), frac = 0;
+      tap.port.onmessage = (e) => {
+        if (!liveMic || ws.readyState !== 1) return;
+        const f = e.data; // Float32 @ ctx rate → linear-resample to 16k Int16
+        const outLen = Math.floor(f.length * ratio + frac);
+        frac = f.length * ratio + frac - outLen;
+        const out = new Int16Array(outLen);
+        for (let i = 0; i < outLen; i++) {
+          const pos = i / ratio, i0 = Math.floor(pos), i1 = Math.min(f.length - 1, i0 + 1), t = pos - i0;
+          const v = f[i0] * (1 - t) + f[i1] * t;
+          out[i] = Math.max(-32768, Math.min(32767, Math.round(v * 32767)));
+        }
+        const merged = new Int16Array(acc.length + out.length); merged.set(acc); merged.set(out, acc.length); acc = merged;
+        if (acc.length >= 1600) { ws.send(acc.buffer.slice(0, acc.length * 2)); acc = new Int16Array(0); } // ~100ms chunks
+      };
+      liveMic.ws = ws; liveMic.tap = tap;
+      settle(true);
+    };
+    ws.onmessage = (e) => {
+      let m; try { m = JSON.parse(e.data); } catch { return; }
+      if (m.type === "partial" && m.text) {
+        if (document.activeElement !== $("input")) $("input").placeholder = "“" + prettyUtterance(m.text).slice(0, 56) + "…”";
+      } else if (m.type === "final" && m.text) {
+        $("input").placeholder = INPUT_PLACEHOLDER;
+        acceptUtterance(prettyUtterance(m.text));
+      } else if (m.type === "error") {
+        settle(false);
+      }
+    };
+    ws.onerror = () => settle(false);
+    ws.onclose = () => {
+      settle(false);
+      if (liveMic && liveMic.ws === ws) { // dropped mid-call → reconnect, backing off up to 15s
+        liveMic.ws = null;
+        const n = liveMic.asrRetries = (liveMic.asrRetries || 0) + 1;
+        setTimeout(() => { if (liveMic && liveMic.sttMode === "sherpa" && !liveMic.ws) startSherpaStream(); }, Math.min(15000, 1000 * 2 ** (n - 1)));
+      }
+    };
+  });
+}
+// zipformer emits UPPERCASE with no punctuation — normalize to sentence case.
+// SenseVoice already returns cased + punctuated text, so leave it as-is.
+function prettyUtterance(t) {
+  const raw = String(t || "").trim();
+  if (S.sttEngine === "sensevoice") return raw;
+  const s = raw.toLowerCase().replace(/\bi\b/g, "I");
+  return s.charAt(0).toUpperCase() + s.slice(1);
+}
+function stopLiveMic() {
+  if (!liveMic) return;
+  cancelAnimationFrame(liveMic.raf);
+  if (liveMic.rec) { const r = liveMic.rec; liveMic.rec = null; try { r.onend = null; r.stop(); } catch {} }
+  if (liveMic.recorder && liveMic.recorder.state !== "inactive") { try { liveMic.recorder.onstop = null; liveMic.recorder.stop(); } catch {} }
+  if (liveMic.ws) { const w = liveMic.ws; liveMic.ws = null; try { w.onclose = null; w.close(); } catch {} }
+  if (liveMic.tap) { try { liveMic.tap.port.onmessage = null; liveMic.tap.disconnect(); } catch {} }
+  liveMic.stream.getTracks().forEach((t) => t.stop());
+  liveMic = null;
+  $("input").placeholder = INPUT_PLACEHOLDER;
+  micButtons(false);
+}
+function vadTick() {
+  if (!liveMic) return;
+  liveMic.an.getByteTimeDomainData(liveMic.data);
+  let sum = 0;
+  for (let i = 0; i < liveMic.data.length; i++) { const v = (liveMic.data[i] - 128) / 128; sum += v * v; }
+  const rms = Math.sqrt(sum / liveMic.data.length);
+  // live mic-level ring on the You tile — makes the call feel alive
+  const yl = $("youLevel");
+  if (yl) { const lvl = Math.min(1, rms * 8); yl.style.opacity = lvl > 0.06 ? String(0.25 + lvl * 0.75) : "0"; yl.style.transform = `scale(${1 + lvl * 0.22})`; }
+  // adaptive threshold over the noise floor; harder to trip while Ava talks
+  // (imperfect echo cancellation with open speakers)
+  const thresh = Math.max(0.015, liveMic.noise * 3) * (S.speaking ? 1.8 : 1);
+  const now = performance.now();
+  if (rms > thresh) {
+    if (!liveMic.above) liveMic.above = now;
+    liveMic.below = 0;
+    if (!liveMic.speech && now - liveMic.above > 140) onSpeechStart();
+    if (liveMic.speech) liveMic.lastVoiceAt = Date.now();
+  } else {
+    liveMic.above = 0;
+    liveMic.noise = liveMic.noise * 0.995 + rms * 0.005;
+    if (liveMic.speech) {
+      if (!liveMic.below) liveMic.below = now;
+      if (now - liveMic.below > 800) onSpeechEnd();
+    } else liveMic.below = 0;
+  }
+  liveMic.raf = requestAnimationFrame(vadTick);
+}
+function onSpeechStart() {
+  liveMic.speech = true; liveMic.lastVoiceAt = Date.now();
+  setYouStatus("speaking…");
+  if (S.speaking) bargeIn();
+  if (liveMic.sttMode === "segments") startSegmentRecorder();
+}
+function onSpeechEnd() {
+  liveMic.speech = false; liveMic.below = 0;
+  setYouStatus("mic live · voice detection on");
+  if (liveMic.recorder && liveMic.recorder.state === "recording") liveMic.recorder.stop();
+}
+function bargeIn() {
+  // What did they actually HEAR before cutting in? (compute before stopping)
+  let heard = null;
+  if (streamState && audioCtx && streamState.sentences.length) {
+    const now = audioCtx.currentTime;
+    // a sentence counts as heard once ~60% of it has played — starting a
+    // sentence's first word doesn't mean they got it
+    const all = streamState.sentences;
+    const heardSent = all.filter((s) => now >= s.start + 0.6 * (s.end - s.start));
+    heard = heardSent.map((s) => s.text).join(" ");
+    if (heardSent.length === all.length && streamState.endTimer) heard = null; // everything landed — nothing to cut
+  } else if (ttsAudio && ttsAudio.duration > 0 && S.curSpokenText) {
+    const words = S.curSpokenText.split(/\s+/);
+    heard = words.slice(0, Math.floor(words.length * Math.min(1, ttsAudio.currentTime / ttsAudio.duration))).join(" ");
+  }
+  stopStreamPlayback(true); // fade her out over ~120ms instead of chopping
+  yieldTick();              // soft "go ahead" cue
+  if ("speechSynthesis" in window) speechSynthesis.cancel();
+  if (ttsAudio) { try { ttsAudio.pause(); } catch {} ttsAudio = null; }
+  laneIdle("voice", "interrupted — listening");
+  setAvaState("listening");
+  if (heard === null) return;
+  // Keep her memory honest: history holds only what was heard, and the echo
+  // guard compares against the heard part, not sentences that never played.
+  lastSpoken = heard;
+  fetch("/api/truncate", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ sessionId: S.sessionId, heard }) }).catch(() => {});
+  const line = [...document.querySelectorAll(".tline.ava p")].pop();
+  const cut = heard ? heard + " —" : "—";
+  if (line) line.textContent = cut;
+  if (S.cc) $("cap").textContent = cut;
+}
+function startLiveRec() {
+  if (!liveMic || liveMic.rec) return;
+  const R = window.SpeechRecognition || window.webkitSpeechRecognition;
+  const r = new R(); r.lang = "en-US"; r.interimResults = true; r.continuous = true; r.maxAlternatives = 1;
+  liveMic.rec = r;
+  r.onresult = (e) => {
+    let interim = "";
+    for (let i = e.resultIndex; i < e.results.length; i++) {
+      const res = e.results[i];
+      if (res.isFinal) acceptUtterance(res[0].transcript.trim());
+      else interim += res[0].transcript;
+    }
+    if (interim && document.activeElement !== $("input")) $("input").placeholder = "“" + interim.trim().slice(0, 56) + "…”";
+  };
+  r.onerror = (e) => { if (e.error === "not-allowed" || e.error === "service-not-allowed") stopLiveMic(); };
+  r.onend = () => { // Chrome ends recognition on silence — always-on means always restart
+    if (liveMic && liveMic.rec === r) { liveMic.rec = null; setTimeout(() => { if (liveMic) startLiveRec(); }, 250); }
+  };
+  try { r.start(); } catch {}
+}
+function acceptUtterance(t) {
+  $("input").placeholder = INPUT_PLACEHOLDER;
+  if (!liveMic) return;
+  if (!t || t.replace(/[^a-z0-9]/gi, "").length < 2) return;
+  // Echo guards apply only while Ava is (or just was) audible — when she's
+  // silent there is nothing to echo, so every transcript is the user's.
+  const avaAudible = S.speaking || (streamState && streamState.sentences.length) || (ttsAudio && !ttsAudio.paused);
+  if (avaAudible) {
+    if (simText(t, lastSpoken) > 0.55) return;             // she heard herself
+    if (Date.now() - liveMic.lastVoiceAt > 4000) return;   // no human speech confirmed by the VAD
+  }
+  ackBlip(); // soft "heard you" — the gap before her reply no longer feels dead
+  if (S.turnInFlight) { S.pendingUtterance = ((S.pendingUtterance || "") + " " + t).trim(); return; }
+  sendTurn(t);
+}
+function startSegmentRecorder() {
+  if (!liveMic || (liveMic.recorder && liveMic.recorder.state === "recording")) return;
+  const mime = pickMime();
+  const seg = new MediaRecorder(liveMic.stream, mime ? { mimeType: mime } : undefined);
+  liveMic.chunks = [];
+  seg.ondataavailable = (e) => { if (e.data && e.data.size) liveMic.chunks.push(e.data); };
+  seg.onstop = async () => {
+    const blob = new Blob(liveMic ? liveMic.chunks : [], { type: seg.mimeType || "audio/webm" });
+    if (blob.size < 4000) return; // too short to be a word
+    try {
+      const r = await fetch("/api/stt", { method: "POST", headers: { "Content-Type": blob.type }, body: blob }).then((x) => x.json());
+      if (r.text) acceptUtterance(r.text.trim());
+    } catch {}
+  };
+  liveMic.recorder = seg; seg.start();
+}
+$("mic").onclick = async () => { if (await joinCall(S.joined ? S.mode : "voice")) micToggle(); };
+$("mic2").onclick = async () => { if (await joinCall(S.joined ? S.mode : "voice")) micToggle(); };
+function pickMime() { for (const m of ["audio/webm;codecs=opus", "audio/webm", "audio/mp4", "audio/ogg"]) if (window.MediaRecorder && MediaRecorder.isTypeSupported(m)) return m; return ""; }
+async function startMic() {
+  let stream; try { stream = await navigator.mediaDevices.getUserMedia({ audio: S.micDevice ? { deviceId: { exact: S.micDevice } } : true }); } catch { return; }
+  const mime = pickMime();
+  mediaRec = new MediaRecorder(stream, mime ? { mimeType: mime } : undefined); micChunks = [];
+  mediaRec.ondataavailable = (e) => { if (e.data && e.data.size) micChunks.push(e.data); };
+  mediaRec.onstop = async () => {
+    stream.getTracks().forEach((t) => t.stop());
+    const blob = new Blob(micChunks, { type: mediaRec.mimeType || "audio/webm" });
+    try {
+      const r = await fetch("/api/stt", { method: "POST", headers: { "Content-Type": blob.type }, body: blob }).then((x) => x.json());
+      if (r.text && r.text.trim()) sendTurn(r.text.trim());
+      else if (r.error) agentError("STT: " + r.error);
+    } catch { agentError("STT failed"); }
+    mediaRec = null;
+  };
+  mediaRec.start(); micButtons(true);
+}
+function stopMic() { if (mediaRec && mediaRec.state !== "inactive") mediaRec.stop(); micButtons(false); }
+const BROWSER_STT = "SpeechRecognition" in window || "webkitSpeechRecognition" in window;
+function browserMic() {
+  const R = window.SpeechRecognition || window.webkitSpeechRecognition;
+  if (rec) { rec.stop(); return; }
+  rec = new R(); rec.lang = "en-US"; rec.interimResults = true; rec.continuous = false; rec.maxAlternatives = 1;
+  let finalT = "";
+  rec.onresult = (e) => {
+    let interim = "";
+    for (let i = e.resultIndex; i < e.results.length; i++) { const r = e.results[i]; if (r.isFinal) finalT += r[0].transcript + " "; else interim += r[0].transcript; }
+    $("input").value = (finalT + interim).trim();
+  };
+  rec.onerror = () => {};
+  rec.onend = () => { micButtons(false); const t = (finalT || $("input").value || "").trim(); rec = null; if (t) { $("input").value = ""; sendTurn(t); } };
+  rec.start(); micButtons(true);
+}
+
+/* ═══════════ voice out (TTS) ═══════════ */
+let VOICE = null;
+function pickVoice() {
+  if (!("speechSynthesis" in window)) return; const vs = speechSynthesis.getVoices(); if (!vs.length) return;
+  const en = vs.filter((v) => /^en[-_]/i.test(v.lang));
+  const rank = (v) => (/(premium|enhanced|natural|neural)/i.test(v.name) ? 3 : 0) + (/(Samantha|Ava|Zoe|Aria|Jenny|Google US English)/i.test(v.name) ? 2 : 0) + (/en[-_]US/i.test(v.lang) ? 1 : 0);
+  VOICE = (en.length ? en : vs).slice().sort((a, b) => rank(b) - rank(a))[0];
+}
+if ("speechSynthesis" in window) { pickVoice(); speechSynthesis.onvoiceschanged = pickVoice; }
+let ttsAudio = null, lastSpoken = "";
+
+/* Streaming playback (Kokoro): frames of 4-byte length + WAV arrive per
+   sentence; each is decoded and scheduled back-to-back on an AudioContext, so
+   speech starts after the FIRST sentence is synthesized instead of the last. */
+let audioCtx = null, streamGen = 0, streamState = null, ttsBus = null;
+let ttsFetch = null; // AbortController of the /api/tts request still loading (before any audio exists)
+function ttsOut() { // all TTS audio flows through one gain bus so barge-ins can FADE, not chop
+  if (!ttsBus) { ttsBus = audioCtx.createGain(); ttsBus.connect(audioCtx.destination); }
+  return ttsBus;
+}
+function stopStreamPlayback(fade) {
+  streamGen += 1;
+  if (ttsFetch) { try { ttsFetch.abort(); } catch {} ttsFetch = null; } // a barge-in during the fetch must cancel it too
+  const st = streamState; streamState = null;
+  if (!st) return;
+  try { st.abort.abort(); } catch {}
+  clearTimeout(st.endTimer);
+  const kill = () => { for (const s of st.sources) { try { s.stop(); } catch {} } };
+  if (fade && ttsBus && audioCtx) {
+    const g = ttsBus.gain, now = audioCtx.currentTime;
+    g.cancelScheduledValues(now); g.setValueAtTime(g.value, now); g.linearRampToValueAtTime(0.0001, now + 0.12);
+    setTimeout(() => { kill(); const t = audioCtx.currentTime; g.cancelScheduledValues(t); g.setValueAtTime(1, t); }, 160);
+  } else kill();
+}
+async function playWavStream(res, abort) {
+  if (!audioCtx) audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+  const gen = ++streamGen;
+  const st = streamState = { abort, sources: [], sentences: [], nextTime: 0, started: false, endTimer: null };
+  if (audioCtx.state === "suspended") { try { await audioCtx.resume(); } catch {} }
+  if (gen !== streamGen) return true; // barged in while resuming
+  const reader = res.body.getReader();
+  let buf = new Uint8Array(0);
+  const schedule = (audioBuf, sentence) => {
+    if (gen !== streamGen) return;
+    const src = audioCtx.createBufferSource();
+    src.buffer = audioBuf; src.connect(ttsOut());
+    const t = Math.max(audioCtx.currentTime + 0.06, st.nextTime);
+    src.start(t); st.nextTime = t + audioBuf.duration; st.sources.push(src);
+    st.sentences.push({ text: sentence, start: t, end: t + audioBuf.duration });
+    if (!st.started) { st.started = true; setAvaState("speaking"); }
+  };
+  const dec = new TextDecoder();
+  for (;;) {
+    let value, done;
+    // an abort here is deliberate (barge-in, or a newer reply took over) —
+    // report success so the caller never "falls back" to the browser voice
+    try { ({ value, done } = await reader.read()); } catch { return true; }
+    if (gen !== streamGen) return true;
+    if (done) break;
+    const merged = new Uint8Array(buf.length + value.length); merged.set(buf); merged.set(value, buf.length); buf = merged;
+    // frame: [4-byte meta length][meta JSON {t: sentence, n: wav bytes}][wav]
+    for (;;) {
+      if (buf.length < 4) break;
+      const metaLen = new DataView(buf.buffer, buf.byteOffset).getUint32(0);
+      if (buf.length < 4 + metaLen) break;
+      let meta; try { meta = JSON.parse(dec.decode(buf.slice(4, 4 + metaLen))); } catch { meta = { t: "", n: 0 }; }
+      if (buf.length < 4 + metaLen + meta.n) break;
+      const wav = buf.slice(4 + metaLen, 4 + metaLen + meta.n);
+      buf = buf.slice(4 + metaLen + meta.n);
+      try { schedule(await audioCtx.decodeAudioData(wav.buffer), meta.t || ""); } catch {}
+    }
+  }
+  if (gen !== streamGen) return true;
+  if (!st.started) return false; // nothing decoded — let the caller fall back
+  const remaining = Math.max(0, (st.nextTime - audioCtx.currentTime) * 1000) + 120;
+  st.endTimer = setTimeout(() => { if (gen === streamGen) { streamState = null; setAvaState("listening"); } }, remaining);
+  return true;
+}
+
+async function speak(text, force, ignoreMute) {
+  if (!ignoreMute && !$("speak").checked) return false;
+  if (!force && lastSpoken && simText(text, lastSpoken) > 0.7) { lastSpoken = text; return false; }
+  lastSpoken = text; S.curSpokenText = text;
+  const prov = S.voice || "browser";
+  if (prov !== "browser") {
+    stopStreamPlayback(); // also cancels an older reply's request still in flight
+    if (ttsAudio) { try { ttsAudio.pause(); } catch {} ttsAudio = null; }
+    const abort = ttsFetch = new AbortController();
+    try {
+      const res = await fetch("/api/tts", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ text, provider: prov }), signal: abort.signal });
+      if (!res.ok) throw new Error("tts " + res.status);
+      if ((res.headers.get("Content-Type") || "").includes("x-wav-stream")) {
+        if (ttsFetch === abort) ttsFetch = null; // playWavStream owns the abort from here
+        if (await playWavStream(res, abort)) return true;
+        throw new Error("stream produced no audio");
+      }
+      const blob = await res.blob();
+      if (ttsFetch === abort) ttsFetch = null;
+      if (abort.signal.aborted) return false;
+      const url = URL.createObjectURL(blob);
+      ttsAudio = new Audio(url);
+      ttsAudio.onplay = () => setAvaState("speaking");
+      ttsAudio.onended = ttsAudio.onerror = () => { URL.revokeObjectURL(url); setAvaState("listening"); };
+      await ttsAudio.play(); return true;
+    } catch (e) {
+      // an aborted request means a newer speak/barge-in superseded this one —
+      // stay silent instead of re-speaking the text in the browser voice
+      if (abort.signal.aborted || (e && e.name === "AbortError")) return false;
+    }
+  }
+  if ("speechSynthesis" in window) {
+    const u = new SpeechSynthesisUtterance(text); if (VOICE) u.voice = VOICE; u.rate = 1.03;
+    u.onstart = () => setAvaState("speaking"); u.onend = () => setAvaState("listening");
+    speechSynthesis.cancel(); speechSynthesis.speak(u); return true;
+  }
+  return false;
+}
+
+/* ═══════════ pop-out (Document Picture-in-Picture) ═══════════ */
+async function openPiP() {
+  if (pip) { try { pip.win.close(); } catch {} return; }
+  if (!("documentPictureInPicture" in window)) return;
+  let pw; try { pw = await documentPictureInPicture.requestWindow({ width: 360, height: 540 }); } catch { return; }
+  document.querySelectorAll('link[rel="stylesheet"],link[rel="preconnect"],style').forEach((n) => pw.document.head.appendChild(n.cloneNode(true)));
+  // carry the current (possibly platform-themed) brand palette into the pop-out
+  const rootStyle = getComputedStyle(document.documentElement);
+  ["--amber", "--amber-ink", "--brand-a", "--brand-b", "--brand-c", "--brandtint", "--brandline"].forEach((v) => { const val = rootStyle.getPropertyValue(v).trim(); if (val) pw.document.documentElement.style.setProperty(v, val); });
+  const MIC_SVG = '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"><rect x="9" y="3" width="6" height="11" rx="3"/><path d="M5.5 11.5a6.5 6.5 0 0 0 13 0M12 18v3"/></svg>';
+  const SHARE_SVG = '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="2.5" y="4" width="19" height="13" rx="2"/><path d="M8 21h8M12 17v4M12 12.5V7.5M9.5 10 12 7.5l2.5 2.5"/></svg>';
+  pw.document.body.innerHTML = `<div class="pipwrap">
+    <video id="pipVideo" autoplay muted playsinline style="position:absolute;width:2px;height:2px;opacity:0;pointer-events:none;top:0;left:0"></video>
+    <header class="pip-head">
+      <svg class="wm" viewBox="0 0 66 27.8" role="img" aria-label="Ava"><path transform="translate(1.9 1.9)" d="M0 24L9.5 0L19 24M21.6 0L31.1 24L40.6 0M43.2 24L52.7 0L62.2 24" fill="none" stroke="currentColor" stroke-width="3.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
+      <span class="grow"></span>
+      <button id="pipEnd" class="iconbtn xs" title="Close pop-out" aria-label="Close pop-out"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round"><path d="m7 7 10 10M17 7 7 17"/></svg></button>
+    </header>
+    <div class="pip-stage">
+      <div class="pip-tile" id="pipOrb">
+        <span class="pip-rethink" id="pipRethink" hidden><i></i>rethinking</span>
+        <span class="pip-orb" aria-hidden="true"><i></i><i></i><span class="pip-orbcore"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2.5" stroke-linecap="round"><path transform="translate(2.67 8.4) scale(.3)" d="M0 24L9.5 0L19 24M21.6 0L31.1 24L40.6 0M43.2 24L52.7 0L62.2 24" stroke="#FFFFFF" fill="none" stroke-width="3.8" stroke-linecap="round" stroke-linejoin="round"/></svg></span></span>
+        <div class="pip-foot">
+          <span class="pip-name">Ava</span>
+          <span class="mono pip-status" id="pipStatus">listening</span>
+          <span class="eq big" id="pipEq"><i></i><i></i><i></i><i></i><i></i></span>
+        </div>
+      </div>
+      <div class="pip-capwrap"><p class="pip-cap" id="pipCap"></p></div>
+    </div>
+    <form class="pip-composer" id="pipForm">
+      <input id="pipInput" placeholder="Message Ava…" autocomplete="off">
+      <button type="submit" aria-label="Send"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20V5M5.5 11.5 12 5l6.5 6.5"/></svg></button>
+    </form>
+    <div class="pip-dock">
+      <button id="pipMic" class="ctlbtn" title="Talk" aria-label="Talk to Ava">${MIC_SVG}</button>
+      <button id="pipShare" class="ctlbtn" title="Share screen" aria-label="Share screen">${SHARE_SVG}</button>
+    </div></div>`;
+  pip = { win: pw, cap: pw.document.getElementById("pipCap"), status: pw.document.getElementById("pipStatus"), orb: pw.document.getElementById("pipOrb"), video: pw.document.getElementById("pipVideo") };
+  pip.cap.textContent = $("cap").textContent;
+  if (liveMic) pw.document.getElementById("pipMic").classList.add("miclive");
+  if (S.sharing) pw.document.getElementById("pipShare").classList.add("armed");
+  if (S.stream) { pip.video.srcObject = S.stream; pip.video.play().catch(() => {}); }
+  pip.timer = pw.setInterval(onFrame, 450); // foreground window → frames not throttled
+  pw.document.getElementById("pipMic").onclick = () => micToggle();
+  pw.document.getElementById("pipShare").onclick = () => shareToggle();
+  pw.document.getElementById("pipEnd").onclick = () => { try { pw.close(); } catch {} };
+  pw.document.getElementById("pipForm").addEventListener("submit", (e) => { e.preventDefault(); const i = pw.document.getElementById("pipInput"); const v = i.value.trim(); if (v) { i.value = ""; sendTurn(v); } });
+  pip.obs = new MutationObserver(() => { if (pip && pip.cap) pip.cap.textContent = $("cap").textContent; });
+  pip.obs.observe($("cap"), { childList: true, characterData: true, subtree: true });
+  pw.addEventListener("pagehide", () => { if (pip) { if (pip.obs) pip.obs.disconnect(); if (pip.timer) pip.win.clearInterval(pip.timer); } pip = null; $("pipbtn").classList.remove("on"); });
+  $("pipbtn").classList.add("on");
+}
+$("pipbtn").onclick = openPiP;