ava-engine 0.0.0-stage → 0.2.0

package/public/setup.js

@@ -0,0 +1,264 @@
+"use strict";
+// Browser setup wizard for `npx ava-engine setup --web`. Talks only to the local
+// setup server; every call carries the one-time token from the URL fragment.
+(() => {
+  const $ = (id) => document.getElementById(id);
+  const TOKEN = new URLSearchParams(location.hash.slice(1)).get("token") || "";
+  const ORDER = ["ai", "voice", "speech", "access", "review"];
+  const S = { step: "ai", state: null, keyOk: false, elevenOk: false, selectedPacks: new Set(), pollTimer: null };
+
+  async function api(path, body) {
+    const r = await fetch(`/api/setup/${path}`, {
+      method: body ? "POST" : "GET",
+      headers: { "X-Setup-Token": TOKEN, ...(body ? { "Content-Type": "application/json" } : {}) },
+      body: body ? JSON.stringify(body) : undefined,
+    });
+    const j = await r.json().catch(() => ({}));
+    if (!r.ok) throw Object.assign(new Error(j.error || `error ${r.status}`), { status: r.status });
+    return j;
+  }
+  const radio = (name) => (document.querySelector(`input[name="${name}"]:checked`) || {}).value;
+  const fatal = (msg) => { const b = $("fatal"); b.textContent = msg; b.hidden = false; };
+  const setStatus = (el, text, kind) => { el.textContent = text; el.className = "status" + (kind ? " " + kind : ""); };
+
+  // ── step navigation ──
+  function show(step) {
+    S.step = step;
+    document.querySelectorAll(".step").forEach((s) => { s.hidden = s.dataset.step !== step; });
+    const idx = ORDER.indexOf(step);
+    document.querySelectorAll("#steps li").forEach((li, i) => {
+      li.classList.toggle("current", i === idx);
+      li.classList.toggle("done", idx > i || step === "launching");
+      if (i === idx) li.setAttribute("aria-current", "step"); else li.removeAttribute("aria-current");
+    });
+    if (step === "voice") syncVoice();
+    if (step === "review") renderSummary();
+    const h = document.querySelector(`.step[data-step="${step}"] h1`);
+    if (h) { h.tabIndex = -1; h.focus({ preventScroll: true }); }
+    window.scrollTo({ top: 0 });
+  }
+  function canLeave(step) {
+    if (step === "ai" && radio("mode") === "full" && !(S.state.current.openrouterKey && $("keepKey").checked) && !S.keyOk) {
+      setStatus($("keyStatus"), "Check your key first, or choose “Just look around first”.", "err"); return false;
+    }
+    if (step === "voice" && radio("voice") === "elevenlabs" && !(S.state.current.elevenKey && $("keepEleven").checked) && !S.elevenOk) {
+      setStatus($("elevenStatus"), "Check your ElevenLabs key first, or pick another voice.", "err"); return false;
+    }
+    if (step === "access" && radio("audience") === "others" && !(S.state.current.hasPassword && $("keepPass").checked) && $("password").value.length < 10) {
+      $("password").focus(); return false;
+    }
+    if (step === "access") { const p = Number($("port").value); if (!(Number.isInteger(p) && p > 0 && p < 65536)) { $("port").focus(); return false; } }
+    return true;
+  }
+  document.addEventListener("click", (e) => {
+    if (e.target.matches("[data-next]")) { if (canLeave(S.step)) show(ORDER[ORDER.indexOf(S.step) + 1]); }
+    if (e.target.matches("[data-back]")) show(ORDER[ORDER.indexOf(S.step) - 1]);
+  });
+
+  // ── 1 · AI ──
+  function syncMode() {
+    const full = radio("mode") === "full";
+    $("keyField").hidden = !full;
+    const hasKey = !!S.state.current.openrouterKey;
+    $("keepKeyRow").hidden = !hasKey;
+    $("newKeyRow").hidden = hasKey && $("keepKey").checked;
+  }
+  async function checkKey(service, input, statusEl, okFlag) {
+    const key = input.value.trim();
+    setStatus(statusEl, "Checking…");
+    try {
+      const r = await api("check", { service, key });
+      S[okFlag] = !!r.ok || !!r.offline;
+      if (r.ok) setStatus(statusEl, `✓ Key works${r.label ? ` (${r.label})` : ""}${r.limit != null ? `, credit limit $${r.limit}` : ""}`, "ok");
+      else setStatus(statusEl, r.offline ? `${r.error}. It will be saved anyway.` : `✗ ${r.error}`, r.offline ? "" : "err");
+    } catch (e) { S[okFlag] = false; setStatus(statusEl, `✗ ${e.message}`, "err"); }
+  }
+
+  // ── 2 · voice ──
+  function renderVoices() {
+    const v = S.state.voices, cur = S.state.current.voice;
+    $("voiceCards").innerHTML = "";
+    for (const [id, info] of Object.entries(v)) {
+      const label = document.createElement("label"); label.className = "card";
+      label.innerHTML = `<input type="radio" name="voice"><span class="card-body"><b></b><span></span></span>`;
+      const input = label.querySelector("input"); input.value = id; input.checked = id === cur;
+      label.querySelector("b").textContent = info.label;
+      label.querySelector(".card-body span").textContent = id === "kokoro" && S.state.kokoro.installed ? "Free, runs on this computer. Installed." : info.hint[0].toUpperCase() + info.hint.slice(1) + ".";
+      $("voiceCards").append(label);
+    }
+  }
+  function syncVoice() {
+    const voice = radio("voice");
+    $("elevenField").hidden = voice !== "elevenlabs";
+    const hasEl = !!S.state.current.elevenKey;
+    $("keepElevenRow").hidden = !hasEl;
+    $("newElevenRow").hidden = hasEl && $("keepEleven").checked;
+    // Only download once you're actually choosing a voice, never just because Kokoro is the default.
+    if (voice === "kokoro" && !S.state.kokoro.installed && S.step === "voice") startDownload("kokoro");
+  }
+
+  // ── 3 · speech models ──
+  function renderPacks() {
+    const box = $("packCards"); box.innerHTML = "";
+    for (const [id, p] of Object.entries(S.state.packs)) {
+      const installed = S.state.installedPacks.includes(id);
+      const label = document.createElement("label"); label.className = "card";
+      label.innerHTML = `<input type="checkbox"><span class="card-body"><b></b><span></span></span>`;
+      const input = label.querySelector("input"); input.value = id;
+      input.checked = installed || S.selectedPacks.has(id); input.disabled = installed;
+      label.querySelector("b").textContent = `${p.label} · ${p.size}`;
+      label.querySelector(".card-body span").textContent = p.hint;
+      if (installed) { const badge = document.createElement("span"); badge.className = "badge"; badge.textContent = "installed"; label.append(badge); }
+      input.addEventListener("change", () => { if (input.checked) { S.selectedPacks.add(id); startDownload(id); } else S.selectedPacks.delete(id); });
+      box.append(label);
+    }
+  }
+
+  // ── downloads ──
+  async function startDownload(id) {
+    try { await api("download", { id }); pollJobs(); } catch (e) { fatal(e.message); }
+  }
+  function renderJob(container, id, job) {
+    let el = document.getElementById(`job-${id}`);
+    if (!el) {
+      el = document.createElement("div"); el.className = "job"; el.id = `job-${id}`;
+      el.innerHTML = `<div class="job-head"><span></span><span></span></div><div class="bar" role="progressbar" aria-valuemin="0" aria-valuemax="100"><i></i></div>`;
+      container.append(el);
+    }
+    el.className = "job" + (job.state === "done" ? " done" : job.state === "error" ? " error" : "");
+    el.querySelector(".job-head span").textContent = job.state === "error" ? `${job.label}: failed (${job.error})` : job.state === "done" ? `${job.label}: ready` : `Downloading ${job.label}${job.phase === "unpacking" ? " (unpacking)" : ""}`;
+    el.querySelector(".job-head span:last-child").textContent = `${job.pct || 0}%`;
+    el.querySelector(".bar").setAttribute("aria-valuenow", String(job.pct || 0));
+    el.querySelector(".bar i").style.width = `${job.pct || 0}%`;
+  }
+  async function pollJobs() {
+    clearTimeout(S.pollTimer);
+    try {
+      const { jobs, installedPacks, kokoroInstalled } = await api("jobs");
+      S.state.installedPacks = installedPacks; S.state.kokoro.installed = kokoroInstalled;
+      for (const [id, job] of Object.entries(jobs)) {
+        if (id === "kokoro") {
+          $("kokoroJob").hidden = false;
+          $("kokoroJob").className = "job" + (job.state === "done" ? " done" : job.state === "error" ? " error" : "");
+          $("kokoroLabel").textContent = job.state === "done" ? "Kokoro voice ready" : job.state === "error" ? `Kokoro voice failed: ${job.error}` : `Downloading the Kokoro voice (${S.state.kokoro.size})`;
+          $("kokoroPct").textContent = `${job.pct || 0}%`;
+          $("kokoroBar").style.width = `${job.pct || 0}%`;
+        } else renderJob($("packJobs"), id, job);
+      }
+      if (Object.values(jobs).some((j) => j.state === "running")) S.pollTimer = setTimeout(pollJobs, 700);
+      else if (S.step === "review") renderSummary();
+    } catch { S.pollTimer = setTimeout(pollJobs, 2000); }
+  }
+
+  // ── 4 · access ──
+  function syncAudience() {
+    const others = radio("audience") === "others";
+    $("passwordField").hidden = !others;
+    $("keepPassRow").hidden = !S.state.current.hasPassword;
+    $("newPassRow").hidden = S.state.current.hasPassword && $("keepPass").checked;
+  }
+
+  // ── 5 · review & launch ──
+  function answers() {
+    const mode = radio("mode"), voice = radio("voice"), audience = radio("audience");
+    return {
+      mode,
+      openrouterKey: mode === "mock" ? null : S.state.current.openrouterKey && $("keepKey").checked ? "keep" : $("orKey").value.trim(),
+      voice,
+      elevenKey: voice === "elevenlabs" ? (S.state.current.elevenKey && $("keepEleven").checked ? "keep" : $("elKey").value.trim()) : undefined,
+      elevenVoice: voice === "elevenlabs" ? $("elVoice").value.trim() || null : undefined,
+      audience,
+      password: audience === "others" ? (S.state.current.hasPassword && $("keepPass").checked ? "keep" : $("password").value) : undefined,
+      proxy: $("proxy").checked,
+      port: Number($("port").value),
+    };
+  }
+  function renderSummary() {
+    const a = answers(), packs = S.state.installedPacks.map((id) => S.state.packs[id].label);
+    // Wait only for downloads that match the current choices (a voice you switched away from doesn't count).
+    const busy = (el) => el && !el.hidden && !el.classList.contains("done") && !el.classList.contains("error");
+    const running = (a.voice === "kokoro" && busy($("kokoroJob")) ? 1 : 0)
+      + [...S.selectedPacks].filter((id) => busy(document.getElementById(`job-${id}`))).length;
+    const rows = [
+      ["AI replies", a.mode === "mock" ? "MOCK mode (canned replies)" : "OpenRouter"],
+      ["Voice", S.state.voices[a.voice].label],
+      ["Speech recognition", packs.length ? packs.join(", ") : "Chrome's built-in recognition"],
+      ["Access", a.audience === "me" ? "This computer only" : "Password protected"],
+      ["Address", `http://localhost:${a.port}/app`],
+    ];
+    if (a.audience === "others" && a.password !== "keep") rows.splice(4, 0, ["Password", a.password]);
+    const dl = $("summary"); dl.innerHTML = "";
+    for (const [k, v] of rows) { const dt = document.createElement("dt"), dd = document.createElement("dd"); dt.textContent = k; dd.textContent = v; dl.append(dt, dd); }
+    $("launch").disabled = running > 0;
+    setStatus($("launchStatus"), running ? "Waiting for downloads to finish…" : "");
+  }
+  async function launch() {
+    $("launch").disabled = true;
+    setStatus($("launchStatus"), "Saving…");
+    try {
+      const saved = await api("save", { answers: answers() });
+      await api("finish", {});
+      show("launching");
+      const url = saved.url;
+      // Wait until *Ava* answers. On the same port the setup server may still be
+      // closing, so read the reply and make sure it's Ava's health report. On a
+      // different port anything that answers is Ava (no-cors can't read it).
+      const samePort = String(saved.port) === (location.port || "80");
+      for (let i = 0; i < 120; i++) {
+        try {
+          if (samePort) {
+            const r = await fetch("/api/health", { cache: "no-store" });
+            if (r.ok && "models" in (await r.json())) { location.replace(url); return; }
+          } else {
+            await fetch(`http://localhost:${saved.port}/api/health`, { mode: "no-cors", cache: "no-store" });
+            location.replace(url); return;
+          }
+        } catch {}
+        await new Promise((r) => setTimeout(r, 500));
+      }
+      $("launchMsg").textContent = `Ava is taking a while. Open ${url} when it's ready, or check the terminal.`;
+    } catch (e) {
+      setStatus($("launchStatus"), `✗ ${e.message}`, "err");
+      $("launch").disabled = false;
+    }
+  }
+
+  // ── boot ──
+  async function boot() {
+    if (!TOKEN) return fatal("This page needs the link printed by `npx ava-engine setup --web`.");
+    try { S.state = await api("state"); } catch (e) { return fatal(e.message); }
+    history.replaceState(null, "", "/setup"); // drop the token from the address bar (it stays in memory)
+    const c = S.state.current;
+    $("configFile").textContent = S.state.configFile;
+    if (c.openrouterKey) { $("currentKey").textContent = c.openrouterKey; }
+    if (c.elevenKey) $("currentEleven").textContent = c.elevenKey;
+    $("elVoice").value = c.elevenVoice;
+    document.querySelector(`input[name="audience"][value="${c.audience}"]`).checked = true;
+    $("password").value = S.state.suggestedPassword;
+    $("proxy").checked = c.proxy;
+    $("port").value = c.port;
+    renderVoices(); renderPacks();
+    syncMode(); syncVoice(); syncAudience();
+
+    document.querySelectorAll('input[name="mode"]').forEach((i) => i.addEventListener("change", syncMode));
+    $("keepKey").addEventListener("change", syncMode);
+    $("voiceCards").addEventListener("change", syncVoice);
+    $("keepEleven").addEventListener("change", syncVoice);
+    document.querySelectorAll('input[name="audience"]').forEach((i) => i.addEventListener("change", syncAudience));
+    $("keepPass").addEventListener("change", syncAudience);
+    $("orKey").addEventListener("input", () => { S.keyOk = false; setStatus($("keyStatus"), ""); });
+    $("elKey").addEventListener("input", () => { S.elevenOk = false; setStatus($("elevenStatus"), ""); });
+    $("checkKey").addEventListener("click", () => checkKey("openrouter", $("orKey"), $("keyStatus"), "keyOk"));
+    $("checkEleven").addEventListener("click", () => checkKey("elevenlabs", $("elKey"), $("elevenStatus"), "elevenOk"));
+    $("orKey").addEventListener("keydown", (e) => { if (e.key === "Enter") $("checkKey").click(); });
+    $("regen").addEventListener("click", async () => { $("password").value = (await api("password")).password; });
+    $("copyPass").addEventListener("click", async () => { try { await navigator.clipboard.writeText($("password").value); $("copyPass").textContent = "Copied"; setTimeout(() => { $("copyPass").textContent = "Copy"; }, 1400); } catch {} });
+    $("launch").addEventListener("click", launch);
+    show("ai");
+    pollJobs();
+  }
+  // A fresh setup link opened in this same tab only changes the #token, which
+  // doesn't reload the page; reload so the new token is used.
+  window.addEventListener("hashchange", () => { if (/token=/.test(location.hash)) location.reload(); });
+  boot();
+})();

package/public/specialist.html

@@ -0,0 +1,92 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<link rel="icon" href="/favicon.svg" type="image/svg+xml">
+<title>Ava · Specialist console</title>
+<link rel="preload" href="/fonts/inter-tight-var.woff2" as="font" type="font/woff2" crossorigin>
+<link rel="preload" href="/fonts/inter-var.woff2" as="font" type="font/woff2" crossorigin>
+<link rel="stylesheet" href="style.css">
+<style>
+  body.spec { display: flex; flex-direction: column; height: 100vh; height: 100dvh; background: var(--canvas); overflow: hidden; }
+  .spec-top { height: 54px; flex-shrink: 0; display: flex; align-items: center; gap: 11px; padding: 0 20px; background: var(--chrome); border-bottom: 1px solid var(--divider); }
+  .spec-title { font-family: var(--disp); font-size: 14px; font-weight: 600; }
+  .spec-sid { font-size: 11px; color: var(--meta); padding: 3px 9px; border: 1px solid var(--edge2); border-radius: 6px; }
+  .spec-conn { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--meta); }
+  .spec-conn .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--null); }
+  .spec-conn.live .dot { background: var(--green); animation: livePulse 1.6s ease-in-out infinite; }
+  .spec-main { flex-grow: 1; min-height: 0; display: flex; }
+  .spec-ctx { width: 340px; flex-shrink: 0; overflow-y: auto; padding: 18px 20px; border-right: 1px solid var(--divider); background: var(--chrome); display: flex; flex-direction: column; gap: 18px; scrollbar-width: thin; scrollbar-color: var(--edge) transparent; }
+  .spec-block { display: flex; flex-direction: column; gap: 8px; }
+  .spec-lbl { font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--meta); }
+  .spec-goal { font-size: 14px; font-weight: 500; color: var(--ink); line-height: 1.4; }
+  .spec-plat { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink2); }
+  .spec-screen { font-size: 12px; color: var(--ink2); line-height: 1.5; background: var(--canvas); border: 1px solid var(--hairline); border-radius: 9px; padding: 10px 12px; }
+  .spec-screen b { color: var(--ink); font-weight: 600; }
+  .spec-els { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
+  .spec-el { font-family: var(--mono); font-size: 10px; color: var(--ink2); background: var(--chrome); border: 1px solid var(--edge2); border-radius: 5px; padding: 2px 6px; }
+  .spec-blocker { font-size: 12.5px; line-height: 1.5; color: var(--ink); background: rgba(14,140,140,0.08); border: 1px solid rgba(14,140,140,0.25); border-radius: 9px; padding: 10px 12px; }
+  .spec-blocker.none { color: var(--meta); background: var(--canvas); border-color: var(--hairline); }
+  .spec-live { width: 100%; border-radius: 9px; background: #0b0d12; border: 1px solid var(--edge2); display: block; margin-bottom: 8px; }
+  .spec-live[hidden] { display: none; }
+  .spec-mic { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--green); }
+  .spec-mic .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); animation: livePulse 1.6s ease-in-out infinite; }
+
+  .spec-convo { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; }
+  .spec-msgs { flex-grow: 1; min-height: 0; overflow-y: auto; padding: 20px 24px; display: flex; flex-direction: column; gap: 14px; scrollbar-width: thin; scrollbar-color: var(--edge) transparent; }
+  .sm { max-width: 78%; display: flex; flex-direction: column; gap: 3px; }
+  .sm .who { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 0.06em; color: var(--meta); }
+  .sm .bub { padding: 9px 13px; border-radius: 12px; font-size: 14px; line-height: 1.5; }
+  .sm.user { align-self: flex-end; align-items: flex-end; }
+  .sm.user .bub { background: var(--active); color: var(--ink); border-bottom-right-radius: 4px; }
+  .sm.ava .who { color: var(--amber); }
+  .sm.ava .bub { background: var(--brandtint); color: var(--ink); border: 1px solid var(--brandline); border-bottom-left-radius: 4px; }
+  .sm.specialist { align-self: flex-end; align-items: flex-end; }
+  .sm.specialist .who { color: var(--green); }
+  .sm.specialist .bub { background: var(--green); color: #fff; border-bottom-right-radius: 4px; }
+  .sm.system { align-self: center; max-width: 90%; }
+  .sm.system .bub { background: transparent; color: var(--meta); font-size: 12px; font-style: italic; padding: 2px 0; }
+
+  .spec-composer { flex-shrink: 0; display: flex; align-items: center; gap: 10px; padding: 14px 24px; border-top: 1px solid var(--divider); background: var(--chrome); }
+  .spec-composer input { flex-grow: 1; height: 44px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--edge); background: var(--control); color: var(--ink); font-family: var(--sans); font-size: 14px; outline: none; }
+  .spec-composer input:focus { border-color: var(--amber); box-shadow: 0 0 0 3px var(--brandtint); }
+  .spec-composer input:disabled { background: var(--active); color: var(--meta); }
+  .spec-empty { margin: auto; text-align: center; color: var(--meta); font-size: 13px; max-width: 340px; line-height: 1.5; }
+  .grow { flex-grow: 1; }
+</style>
+</head>
+<body class="spec">
+  <header class="spec-top">
+    <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="spec-title">Specialist console</span>
+    <span class="spec-sid mono" id="sid">—</span>
+    <span class="spec-conn" id="conn"><span class="dot"></span><span id="conntext">connecting…</span></span>
+    <span class="spec-mic" id="micind" style="display:none"><span class="dot"></span>Your mic is live</span>
+    <div class="grow"></div>
+    <button id="joinbtn" class="amberbtn" style="height:38px">Join the call</button>
+    <button id="leavebtn" class="ghostbtn" style="height:38px;display:none">Leave</button>
+  </header>
+  <div class="spec-main">
+    <aside class="spec-ctx" id="ctx">
+      <div class="spec-block"><span class="spec-lbl">Session</span><div class="spec-plat" id="platline">—</div></div>
+      <div class="spec-block"><span class="spec-lbl">What they're trying to do</span><div class="spec-goal" id="goal">—</div></div>
+      <div class="spec-block"><span class="spec-lbl">Progress</span><div id="wfmount"></div></div>
+      <div class="spec-block"><span class="spec-lbl">On screen now</span>
+        <video id="liveScreen" class="spec-live" playsinline autoplay hidden></video>
+        <div class="spec-screen" id="screen">Waiting for a screen read…</div>
+      </div>
+      <div class="spec-block"><span class="spec-lbl">Where they may be stuck</span><div class="spec-blocker none" id="blocker">Nothing flagged yet.</div></div>
+    </aside>
+    <main class="spec-convo">
+      <div class="spec-msgs" id="msgs"><div class="spec-empty" id="empty">Loading the conversation…</div></div>
+      <form class="spec-composer" id="form">
+        <input id="input" placeholder="Join the call to message the user…" autocomplete="off" disabled>
+        <button type="submit" class="amberbtn" style="height:44px" id="send" disabled>Send</button>
+      </form>
+    </main>
+  </div>
+<script src="rtc.js"></script>
+<script src="specialist.js"></script>
+</body>
+</html>

package/public/specialist.js

@@ -0,0 +1,132 @@
+"use strict";
+/* global makeRTC -- from rtc.js */
+const $ = (id) => document.getElementById(id);
+const esc = (s) => String(s == null ? "" : s).replace(/[&<>"']/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" }[c]));
+// The link carries a specialist key minted for this handoff (not the user's
+// session id); it stops working when the handoff ends.
+const key = new URLSearchParams(location.search).get("key") || "";
+$("sid").textContent = key ? "handoff " + key.slice(0, 8) : "no session";
+
+const S = { since: 0, joined: false, timer: null, seenSeq: 0, dead: false, rtc: null, mic: null, rtcStarting: false };
+const LABEL = { user: "USER", ava: "AVA", specialist: "YOU (SPECIALIST)", system: "" };
+
+function addMsg(e) {
+  if (e.seq <= S.seenSeq) return;
+  S.seenSeq = e.seq;
+  $("empty") && $("empty").remove();
+  const el = document.createElement("div");
+  el.className = "sm " + e.role;
+  if (e.role === "system") el.innerHTML = `<span class="bub">${esc(e.text)}</span>`;
+  else el.innerHTML = `<span class="who">${LABEL[e.role] || e.role}</span><span class="bub">${esc(e.text)}</span>`;
+  $("msgs").appendChild(el); $("msgs").scrollTop = $("msgs").scrollHeight;
+}
+
+function renderContext(c) {
+  if (!c) return;
+  $("platline").textContent = c.platform ? `${c.platform.name} onboarding` : (c.mode === "onboarding" ? "Onboarding" : "Flexible session");
+  $("goal").textContent = c.goal && c.goal !== "—" ? c.goal : "Still figuring out what they need.";
+  // screen
+  if (c.screen) {
+    const els = (c.screen.elements || []).slice(0, 10).map((x) => `<span class="spec-el">${esc(x)}</span>`).join("");
+    $("screen").innerHTML = `<b>${esc(c.screen.app || "?")}</b> · ${esc(c.screen.page || "")}${c.screen.state ? `<br>${esc(c.screen.state)}` : ""}${els ? `<div class="spec-els">${els}</div>` : ""}`;
+  } else $("screen").textContent = "They haven't shared a screen yet.";
+  // reasoning / blocker
+  const b = $("blocker"), r = c.reasoning;
+  if (r && (r.stuck || r.blocker)) { b.className = "spec-blocker"; b.textContent = r.blocker || r.thought || "They seem stuck."; }
+  else if (r && r.thought) { b.className = "spec-blocker none"; b.textContent = r.thought; }
+  else { b.className = "spec-blocker none"; b.textContent = "Nothing flagged yet."; }
+  // workflow
+  renderWf(c.workflow);
+  // connection + join state
+  if (c.specialist && !S.joined) markJoined();
+}
+
+function renderWf(wf) {
+  const m = $("wfmount");
+  if (!wf) { m.innerHTML = '<span style="font-size:12px;color:var(--meta)">No tracked workflow.</span>'; return; }
+  const pct = wf.total ? Math.round((wf.done / wf.total) * 100) : 0;
+  const steps = 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("");
+  m.innerHTML = `<div class="wf-titlerow" style="margin-bottom:8px"><span class="mono wf-count">${wf.done} / ${wf.total}</span><span class="mono wf-count">${pct}%</span></div><div class="wf-bar" style="margin-bottom:12px"><div class="wf-fill" style="width:${pct}%"></div></div><div class="wf-steps" style="padding:0;overflow:visible">${steps}</div>`;
+}
+
+async function poll() {
+  if (S.dead) return;
+  try {
+    const r = await fetch(`/api/bridge?key=${encodeURIComponent(key)}&since=${S.since}`);
+    if (r.status === 404) { fail("This handoff link has expired or the call ended. Ask the user for a fresh link."); return; }
+    const d = await r.json();
+    S.since = d.seq;
+    (d.events || []).forEach(addMsg);
+    renderContext(d.context);
+    setConn(true);
+  } catch { setConn(false); }
+  S.timer = setTimeout(poll, 1200);
+}
+function setConn(live) { const c = $("conn"); c.classList.toggle("live", live); $("conntext").textContent = live ? (S.joined ? "on the call" : "watching") : "reconnecting…"; }
+// The link is dead (handoff ended, call over): drop the call, the mic and the
+// customer's context — a revoked specialist keeps nothing on screen.
+function fail(msg) {
+  S.dead = true; S.joined = false; clearTimeout(S.timer);
+  stopRTC();
+  $("msgs").innerHTML = `<div class="spec-empty">${esc(msg)}</div>`;
+  for (const id of ["goal", "screen", "blocker"]) { const el = $(id); if (el) el.textContent = "—"; }
+  const wf = $("wfmount"); if (wf) wf.textContent = "";
+  $("joinbtn").style.display = "none"; $("leavebtn").style.display = "none";
+  $("conntext").textContent = "disconnected"; $("input").disabled = true; $("send").disabled = true;
+}
+function markJoined() {
+  S.joined = true;
+  $("joinbtn").style.display = "none"; $("leavebtn").style.display = "";
+  $("input").disabled = false; $("send").disabled = false; $("input").placeholder = "Message the user…"; $("input").focus();
+  setConn(true);
+  startRTC();
+}
+
+// Live A/V: send the specialist's mic, receive the user's screen + voice.
+async function startRTC() {
+  if (S.rtc || S.rtcStarting || !window.makeRTC) return; // set before the await so a second call can't race in
+  S.rtcStarting = true;
+  try { S.mic = await navigator.mediaDevices.getUserMedia({ audio: { echoCancellation: true, noiseSuppression: true } }); $("micind").style.display = ""; } catch { S.mic = null; }
+  S.rtcStarting = false;
+  if (!S.joined) { stopRTC(); return; } // left while the mic prompt was up
+  S.rtc = makeRTC({ key, role: "specialist", localStreams: S.mic ? [S.mic] : [],
+    onRemote: (stream) => {
+      const v = $("liveScreen");
+      v.srcObject = stream; v.play().catch(() => {});
+      const hasVideo = stream.getVideoTracks().length > 0;
+      v.hidden = !hasVideo;
+      $("screen").style.display = hasVideo ? "none" : "";
+    },
+    onStatus: (s) => { if (s === "connected") setConn(true); } });
+}
+function stopRTC() {
+  if (S.rtc) { try { S.rtc.close(); } catch {} S.rtc = null; }
+  if (S.mic) { try { S.mic.getTracks().forEach((t) => t.stop()); } catch {} S.mic = null; }
+  $("micind").style.display = "none"; const v = $("liveScreen"); if (v) { try { v.srcObject = null; } catch {} v.hidden = true; } $("screen").style.display = "";
+}
+$("joinbtn").onclick = async () => {
+  if (!key) return;
+  try {
+    const r = await fetch("/api/bridge", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ key, action: "join" }) });
+    const d = await r.json();
+    if (r.status === 404) return fail("This handoff link has expired or the call ended. Ask the user for a fresh link.");
+    if (d.context) { markJoined(); (d.events || []).forEach(addMsg); S.since = d.seq; } // markJoined starts the A/V link
+  } catch {}
+};
+$("leavebtn").onclick = async () => {
+  try { await fetch("/api/bridge", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ key, action: "leave" }) }); } catch {}
+  stopRTC();
+  S.joined = false; $("joinbtn").style.display = ""; $("leavebtn").style.display = "none"; $("input").disabled = true; $("send").disabled = true; $("input").placeholder = "Join the call to message the user…"; setConn(true);
+};
+$("form").addEventListener("submit", async (e) => {
+  e.preventDefault();
+  const v = $("input").value.trim(); if (!v || !S.joined) return;
+  $("input").value = "";
+  try { await fetch("/api/bridge", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ key, action: "say", text: v }) }); } catch {}
+});
+
+if (!key) fail("No handoff key in the link. The user's call generates a link like /specialist?key=…");
+else poll();