ava-engine 0.2.0 → 0.4.0

package/public/dashboard.js

@@ -0,0 +1,1096 @@
+"use strict";
+// Ava dashboard: overview, calls, share links, playbooks, settings.
+// Talks to /api/admin/*. Everything shown is escaped; pages are re-rendered from data.
+(() => {
+  const page = () => document.getElementById("page");
+  const $ = (sel, el = document) => el.querySelector(sel);
+  const $$ = (sel, el = document) => [...el.querySelectorAll(sel)];
+  const esc = (v) => String(v ?? "").replace(/[&<>"']/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" }[c]));
+
+  async function api(path, { method = "GET", body } = {}) {
+    const r = await fetch(`/api/admin/${path}`, { method, headers: 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 || (j.errors || []).join(" ") || `error ${r.status}`), { status: r.status, errors: j.errors });
+    return j;
+  }
+
+  const I = {
+    plus: '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg>',
+    copy: '<svg viewBox="0 0 24 24" aria-hidden="true"><rect x="8" y="8" width="12" height="12" rx="2.5"/><path d="M16 8V6.5A2.5 2.5 0 0 0 13.5 4h-7A2.5 2.5 0 0 0 4 6.5v7A2.5 2.5 0 0 0 6.5 16H8"/></svg>',
+    open: '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M14 4h6v6M20 4l-9 9M18 14v4.5a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 4 18.5v-11A1.5 1.5 0 0 1 5.5 6H10"/></svg>',
+    edit: '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 20h4L19 9l-4-4L4 16v4Z"/><path d="m13.5 6.5 4 4"/></svg>',
+    trash: '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 7h16M9.5 7V4.5h5V7M6.5 7l.8 12a1.5 1.5 0 0 0 1.5 1.4h6.4a1.5 1.5 0 0 0 1.5-1.4l.8-12"/></svg>',
+    pause: '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9 5v14M15 5v14"/></svg>',
+    play: '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 5v14l11-7Z"/></svg>',
+    check: '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>',
+    mic: '<svg viewBox="0 0 24 24" aria-hidden="true"><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>',
+    link: '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1"/><path d="M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1"/></svg>',
+    book: '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 5.5A2.5 2.5 0 0 1 6.5 3H20v15H6.5A2.5 2.5 0 0 0 4 20.5z"/><path d="M4 20.5A2.5 2.5 0 0 1 6.5 18H20v3H6.5A2.5 2.5 0 0 1 4 20.5Z"/></svg>',
+    headset: '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 14v-2a8 8 0 0 1 16 0v2"/><rect x="2.5" y="14" width="4.5" height="6.5" rx="1.6"/><rect x="17" y="14" width="4.5" height="6.5" rx="1.6"/></svg>',
+    info: '<svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 11v5M12 8h.01"/></svg>',
+    warn: '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 4 2.5 20h19L12 4Z"/><path d="M12 10v4M12 17h.01"/></svg>',
+    user: '<svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="8" r="4"/><path d="M4 20.5a8 8 0 0 1 16 0"/></svg>',
+    back: '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M15 18 9 12l6-6"/></svg>',
+    send: '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 12 20 4l-6 16-3-7-7-1Z"/></svg>',
+  };
+
+  // ── formatting ──
+  const money = (n) => (n == null ? "—" : n === 0 ? "$0.00" : n < 0.01 ? "<$0.01" : `$${n.toFixed(2)}`);
+  const dur = (sec) => { sec = Math.max(0, Math.round(sec || 0)); const m = Math.floor(sec / 60), s = sec % 60; return m >= 60 ? `${Math.floor(m / 60)}h ${m % 60}m` : `${m}:${String(s).padStart(2, "0")}`; };
+  const since = (iso) => (Date.now() - Date.parse(iso)) / 1000;
+  function ago(iso) {
+    if (!iso) return "never";
+    const s = since(iso);
+    if (s < 45) return "just now";
+    if (s < 3600) return `${Math.round(s / 60)} min ago`;
+    if (s < 86400) return `${Math.round(s / 3600)} h ago`;
+    return new Date(iso).toLocaleDateString(undefined, { month: "short", day: "numeric" });
+  }
+  const clock = (iso) => new Date(iso).toLocaleTimeString(undefined, { hour: "numeric", minute: "2-digit" });
+  const plural = (n, one, many = one + "s") => `${n} ${n === 1 ? one : many}`;
+  function stepsBar(w) {
+    if (!w) return '<span class="meta">—</span>';
+    const bars = Array.from({ length: Math.min(w.total, 10) }, (_, i) => `<i class="${i < w.done ? "on" : ""}"></i>`).join("");
+    return `<span class="steps-bar" aria-hidden="true">${bars}</span> <span class="mono" style="font-size:12.5px;color:var(--meta)">${w.done}/${w.total}</span><span class="sr">${w.done} of ${w.total} steps</span>`;
+  }
+
+  // ── chrome: toast, confirm, status ──
+  let toastTimer;
+  function toast(text, kind = "") {
+    const t = document.getElementById("toast");
+    t.textContent = text; t.className = "toast " + kind; t.hidden = false;
+    clearTimeout(toastTimer); toastTimer = setTimeout(() => { t.hidden = true; }, 2600);
+  }
+  function confirmBox(title, text, ok = "Delete") {
+    const d = document.getElementById("confirm");
+    $("#confirmTitle").textContent = title; $("#confirmText").textContent = text; $("#confirmOk").textContent = ok;
+    d.showModal();
+    return new Promise((r) => d.addEventListener("close", () => r(d.returnValue === "ok"), { once: true }));
+  }
+  async function copy(text, what = "Link") {
+    try { await navigator.clipboard.writeText(text); toast(`${what} copied`); return; } catch {}
+    // No clipboard permission (or not a secure context): the old select-and-copy route.
+    const ta = Object.assign(document.createElement("textarea"), { value: text, readOnly: true });
+    ta.style.cssText = "position:fixed;opacity:0;pointer-events:none";
+    document.body.append(ta); ta.select();
+    let ok = false; try { ok = document.execCommand("copy"); } catch {}
+    ta.remove();
+    toast(ok ? `${what} copied` : "Couldn't copy. Select the link and copy it yourself.", ok ? "" : "err");
+  }
+  function setStatus(st) {
+    $("#ver").textContent = `v${st.version}`;
+    $("#statusDot").className = "status-dot" + (st.mock ? " demo" : "");
+    $("#statusTitle").textContent = st.mock ? "Demo mode" : st.spend.capReached ? "Daily cap reached" : "Ava is live";
+    $("#statusSub").textContent = `${money(st.spend.today)} today${st.spend.dailyCap ? ` of $${st.spend.dailyCap}` : ""}`;
+  }
+  const head = (eyebrow, title, sub, actions = "") => `
+    <header class="ph"><div><p class="eyebrow">${esc(eyebrow)}</p><h1>${esc(title)}</h1>${sub ? `<p class="sub">${sub}</p>` : ""}</div><div class="row">${actions}</div></header>`;
+  const empty = (icon, title, text, action = "") => `<div class="empty"><span class="glyph">${icon}</span><h3>${esc(title)}</h3><p>${text}</p>${action}</div>`;
+  const banner = (kind, html) => `<div class="banner ${kind}">${kind === "info" ? I.info : I.warn}<div>${html}</div></div>`;
+
+  // ── calls (shared by overview and the calls page) ──
+  const source = (c) => c.link ? `<div class="who">${I.link}<div><b>${esc(c.link.name)}</b></div></div>` : '<span class="meta">Test call</span>';
+  const product = (c) => c.platform ? esc(c.platform.name) : '<span class="meta">Anything</span>';
+  function callsTable(rows, { live = false, clickable = false } = {}) {
+    if (!rows.length) return "";
+    return `<div class="table-wrap"><table>
+      <thead><tr><th>${live ? "Started" : "When"}</th><th>From</th><th>Product</th><th>Progress</th><th>Person</th><th class="num">${live ? "Running" : "Length"}</th><th class="num">Turns</th><th class="num">Cost</th>${live ? "<th></th>" : ""}</tr></thead>
+      <tbody>${rows.map((c) => `<tr${clickable ? ` class="clickable" data-href="#calls/${esc(c.id)}" tabindex="0" aria-label="Open call from ${esc(ago(c.endedAt || c.startedAt))}"` : ""}>
+        <td>${live ? `<span class="badge live">live</span> ${esc(clock(c.startedAt))}` : `${esc(ago(c.endedAt || c.startedAt))}`}</td>
+        <td>${source(c)}</td>
+        <td>${product(c)}${c.currentStep ? `<div class="meta" style="font-size:12.5px">on “${esc(c.currentStep)}”</div>` : ""}</td>
+        <td>${c.workflow?.completed ? '<span class="badge ok">done</span>' : stepsBar(c.workflow)}</td>
+        <td>${c.handoff ? `<span class="badge ${c.handoff.state === "joined" ? "ok" : "warn"}">${c.handoff.state === "joined" ? "with specialist" : "waiting"}</span>` : c.handoffRequested ? '<span class="badge mute">asked</span>' : '<span class="meta">—</span>'}</td>
+        <td class="num">${dur(live ? since(c.startedAt) : c.durationSec)}</td>
+        <td class="num">${c.turns}</td>
+        <td class="num">${money(c.costUsd)}</td>
+        ${live ? `<td>${c.handoff?.joinPath ? `<a class="btn accent sm" href="${esc(c.handoff.joinPath)}" target="_blank" rel="noopener">${I.headset}Join</a>` : ""}</td>` : ""}
+      </tr>`).join("")}</tbody></table></div>`;
+  }
+
+  // ═══════════ Overview ═══════════
+  async function overview() {
+    const d = await api("overview");
+    setStatus(d.status);
+    const st = d.status, t = d.today;
+    const hour = new Date().getHours();
+    const hello = hour < 12 ? "Good morning" : hour < 18 ? "Good afternoon" : "Good evening";
+    const done = d.checklist.filter((c) => c.done).length;
+    const cap = st.spend.dailyCap, pct = cap ? Math.min(100, (st.spend.today / cap) * 100) : 0;
+    return `
+      ${head("Overview", hello, "Here's what Ava is doing for your customers today.", `<a class="btn accent" href="#links/new">${I.plus}New share link</a>`)}
+      <section class="hero ${st.mock ? "demo" : ""}" aria-label="Agent status">
+        <div class="orb" aria-hidden="true"></div>
+        <div>
+          <p class="eyebrow">${st.mock ? "Demo mode" : st.spend.capReached ? "Paused for today" : "Ava is live"}</p>
+          <h2>${st.mock ? "Replies are canned for now" : st.spend.capReached ? "Today's spending cap is reached" : "Answering with real AI"}</h2>
+          <p>${st.mock ? "Voice, screen sharing and the step tracker all work, but Ava can't read screens or answer for real until you connect OpenRouter: <code>npx ava-engine setup</code>."
+            : st.spend.capReached ? `New calls are refused until midnight UTC. Raise <code>DAILY_BUDGET_USD</code> to allow more.`
+            : "Customers get real answers from your OpenRouter models. Share a link to put Ava in front of them."}</p>
+        </div>
+        <div class="row"><a class="btn light" href="/app" target="_blank" rel="noopener">${I.mic}Test a call</a></div>
+      </section>
+      <div class="grid g4" style="margin-top:16px">
+        <div class="card stat"><div class="label">Calls today</div><div class="value">${t.calls}</div><div class="foot">${t.completed ? `${plural(t.completed, "task")} finished` : `${plural(t.minutes, "minute")} on calls`}</div></div>
+        <div class="card stat"><div class="label">Live now</div><div class="value">${t.live}</div><div class="foot">${t.live ? `<a href="#calls">See live calls</a>` : "Updates every few seconds"}</div></div>
+        <div class="card stat"><div class="label">Waiting for a person</div><div class="value">${t.waiting}</div><div class="foot">${plural(t.handoffs, "request")} today</div></div>
+        <div class="card stat"><div class="label">Spend today</div><div class="value">${money(st.spend.today)}</div>${cap ? `<div class="meter ${pct > 85 ? "hot" : ""}"><i style="width:${pct.toFixed(1)}%"></i></div><div class="foot">of $${cap} daily cap</div>` : `<div class="foot">No daily cap · <code>DAILY_BUDGET_USD</code></div>`}</div>
+      </div>
+      <div class="grid g2" style="margin-top:16px">
+        <section class="card" aria-labelledby="h-live">
+          <div class="card-head"><h2 id="h-live">Live calls</h2><a class="meta" href="#calls">All calls</a></div>
+          ${d.live.length ? callsTable(d.live, { live: true }) : empty(I.headset, "No one's on a call", "When a customer opens one of your share links, their call shows up here. If they ask for a person, you can join from here.")}
+        </section>
+        <section class="card" aria-labelledby="h-start">
+          <div class="card-head"><h2 id="h-start">Get started</h2><span class="progress-ring">${done}/${d.checklist.length}</span></div>
+          <ul class="check">${d.checklist.map((c) => `
+            <li class="${c.done ? "done" : ""}"><span class="tick">${c.done ? I.check : ""}</span>
+              <span class="ctext"><b>${esc(c.label)}</b>${!c.done ? checklistHint(c) : ""}</span></li>`).join("")}</ul>
+        </section>
+      </div>
+      <section class="card" style="margin-top:16px" aria-labelledby="h-recent">
+        <div class="card-head"><h2 id="h-recent">Recent calls</h2><a class="meta" href="#calls/history">History</a></div>
+        ${d.recent.length ? callsTable(d.recent, { clickable: true }) : empty(I.headset, "No calls yet", "Start a test call to see how a session feels, then share a link with a customer.", `<a class="btn ghost sm" href="/app" target="_blank" rel="noopener">${I.mic}Test a call</a>`)}
+      </section>`;
+  }
+  function checklistHint(c) {
+    if (c.id === "playbook") return '<span><a href="#playbooks/new">Create a playbook</a></span>';
+    if (c.id === "link") return '<span><a href="#links/new">Create a share link</a></span>';
+    return c.hint ? `<span><code>${esc(c.hint)}</code></span>` : "";
+  }
+
+  // ═══════════ Calls ═══════════
+  // History is filtered here in the page (the server keeps the latest 500 calls).
+  const callFilter = { q: "", outcome: "all", product: "", link: "" };
+  const outcomeOf = (c) => c.workflow?.completed ? "done" : c.handoffRequested ? "person" : c.workflow ? "unfinished" : "other";
+  function filtered(rows) {
+    const q = callFilter.q.toLowerCase();
+    return rows.filter((c) => (callFilter.outcome === "all" || outcomeOf(c) === callFilter.outcome)
+      && (!callFilter.product || c.platform?.id === callFilter.product)
+      && (!callFilter.link || (callFilter.link === "test" ? !c.link : c.link?.id === callFilter.link))
+      && (!q || [c.platform?.name, c.link?.name, c.workflow?.title, c.id].some((v) => String(v || "").toLowerCase().includes(q))));
+  }
+  let callsData = null;
+  async function calls(sub) {
+    if (sub && /^[0-9a-f-]{36}$/.test(sub)) return callDetail(sub);
+    const d = callsData = await api("calls");
+    const tab = sub === "history" ? "history" : "live";
+    const products = [...new Map(d.recent.filter((c) => c.platform).map((c) => [c.platform.id, c.platform.name])).entries()];
+    const links = [...new Map(d.recent.filter((c) => c.link).map((c) => [c.link.id, c.link.name])).entries()];
+    const rows = filtered(d.recent);
+    const sel = (id, label, value, opts) => `<label class="sr" for="${id}">${label}</label><select id="${id}" data-filter="${id}">${opts.map(([v, t]) => `<option value="${esc(v)}" ${v === value ? "selected" : ""}>${esc(t)}</option>`).join("")}</select>`;
+    return `
+      ${head("Calls", "Calls", d.transcripts ? "Who's talking to Ava right now, and how past calls went. Transcripts are on: open a call to read it." : "Who's talking to Ava right now, and how past calls went. Ava keeps numbers and steps, not what was said, unless you turn transcripts on in Settings.")}
+      <div class="tabs" role="tablist" aria-label="Calls">
+        <button role="tab" aria-selected="${tab === "live"}" data-href="#calls">Live · ${d.live.length}</button>
+        <button role="tab" aria-selected="${tab === "history"}" data-href="#calls/history">History · ${d.recent.length}</button>
+      </div>
+      ${tab === "live" ? `<section class="card">${d.live.length ? callsTable(d.live, { live: true }) : empty(I.headset, "No live calls", "Calls from your share links and test calls appear here while they're running.")}</section>` : `
+      <div class="filters">
+        <label class="sr" for="fq">Search calls</label><input id="fq" type="search" placeholder="Search product, link or call ID" value="${esc(callFilter.q)}" data-filter="fq">
+        ${sel("fo", "Outcome", callFilter.outcome, [["all", "All outcomes"], ["done", "Finished the journey"], ["person", "Asked for a person"], ["unfinished", "Didn't finish"], ["other", "Help with anything"]])}
+        ${sel("fp", "Product", callFilter.product, [["", "All products"], ...products])}
+        ${sel("fl", "Link", callFilter.link, [["", "All links"], ["test", "Test calls"], ...links])}
+        <button class="btn ghost sm" data-action="export-calls" ${rows.length ? "" : "disabled"}>Export CSV</button>
+      </div>
+      <section class="card">${rows.length ? callsTable(rows, { clickable: true }) : d.recent.length ? empty(I.headset, "No calls match", "Try another search or filter.") : empty(I.headset, "No finished calls yet", "Once a call ends, its length, progress and cost are kept here.")}</section>
+      <p class="hint" style="margin-top:10px">${plural(rows.length, "call")}${rows.length !== d.recent.length ? ` of ${d.recent.length}` : ""}.</p>`}`;
+  }
+  function exportCalls() {
+    const rows = filtered(callsData.recent);
+    const cols = [["started", (c) => c.startedAt], ["ended", (c) => c.endedAt], ["link", (c) => c.link?.name || "test call"], ["product", (c) => c.platform?.name || ""], ["mode", (c) => c.mode],
+      ["outcome", outcomeOf], ["steps_done", (c) => c.workflow?.done ?? ""], ["steps_total", (c) => c.workflow?.total ?? ""], ["asked_for_person", (c) => c.handoffRequested ? "yes" : "no"],
+      ["duration_sec", (c) => c.durationSec], ["turns", (c) => c.turns], ["cost_usd", (c) => c.costUsd], ["id", (c) => c.id]];
+    const cell = (v) => { const t = String(v ?? ""); return /[",\n]/.test(t) || /^[=+\-@]/.test(t) ? `"${t.replace(/^([=+\-@])/, "'$1").replace(/"/g, '""')}"` : t; }; // no spreadsheet formulas
+    const csv = [cols.map((c) => c[0]).join(","), ...rows.map((r) => cols.map(([, f]) => cell(f(r))).join(","))].join("\n");
+    const a = Object.assign(document.createElement("a"), { href: URL.createObjectURL(new Blob([csv], { type: "text/csv" })), download: `ava-calls-${new Date().toISOString().slice(0, 10)}.csv` });
+    document.body.append(a); a.click(); a.remove(); setTimeout(() => URL.revokeObjectURL(a.href), 1000);
+  }
+
+  // ── one call ──
+  const OUTCOME = { done: ["ok", "Finished the journey"], person: ["warn", "Asked for a person"], unfinished: ["mute", "Didn't finish"], other: ["mute", "Help with anything"] };
+  const WHO = { user: "Customer", ava: "Ava", specialist: "Specialist", system: "" };
+  async function callDetail(id) {
+    let d;
+    try { d = await api(`calls/${id}`); } catch (e) { return `<a class="btn ghost sm" href="#calls/history" style="margin-bottom:18px">${I.back}Calls</a>${banner("err", esc(e.message))}`; }
+    const c = d.call, t = d.transcript, [kind, label] = OUTCOME[outcomeOf(c)];
+    const when = new Date(c.startedAt).toLocaleString(undefined, { dateStyle: "medium", timeStyle: "short" });
+    return `
+      <a class="btn ghost sm" href="#calls/history" style="margin-bottom:18px">${I.back}Calls</a>
+      ${head("Call", c.platform ? c.platform.name : "Help with anything", `${esc(when)} · ${c.link ? `from “${esc(c.link.name)}”` : "a test call"}`, `<button class="btn ghost sm" data-action="delete-call" data-id="${esc(c.id)}">${I.trash}Delete call</button>`)}
+      <div class="grid g4">
+        <div class="card stat"><div class="label">Outcome</div><div style="margin-top:12px"><span class="badge ${kind}">${label}</span></div></div>
+        <div class="card stat"><div class="label">Length</div><div class="value">${dur(c.durationSec)}</div></div>
+        <div class="card stat"><div class="label">Turns</div><div class="value">${c.turns}</div></div>
+        <div class="card stat"><div class="label">Cost</div><div class="value">${money(c.costUsd)}</div></div>
+      </div>
+      <div class="grid g2" style="margin-top:16px;align-items:start">
+        <section class="card" aria-labelledby="h-conv"><div class="card-head"><h2 id="h-conv">Conversation</h2>${t ? `<span class="meta">${plural(t.lines.length, "line")}</span>` : ""}</div>
+          ${t ? (t.lines.length ? `<ol class="convo">${t.lines.map((l) => `<li class="${esc(l.role)}">${WHO[l.role] ? `<span class="who-l">${WHO[l.role]}<span class="mono">${esc(clock(l.at))}</span></span>` : ""}<p>${esc(l.text)}</p></li>`).join("")}</ol>` : empty(I.headset, "Nothing was said", ""))
+            : empty(I.info, "No transcript", c.transcript === false && d.transcripts ? "This call ended before transcripts were turned on, or its transcript was deleted." : "Transcripts are off, so Ava kept only numbers and steps. Turn them on in <a href=\"#settings\">Settings → Data and privacy</a>.")}
+        </section>
+        <div class="stack">
+          ${t?.recap ? `<section class="card card-pad"><p class="eyebrow">Recap</p><h2>${esc(t.recap.headline)}</h2><p style="color:var(--ink2);margin:8px 0 0">${esc(t.recap.summary)}</p>${t.recap.highlights?.length ? `<ul class="hl">${t.recap.highlights.map((h) => `<li>${esc(h)}</li>`).join("")}</ul>` : ""}</section>` : ""}
+          <section class="card" aria-labelledby="h-steps"><div class="card-head"><h2 id="h-steps">Journey</h2>${c.workflow ? `<span class="meta">${c.workflow.done}/${c.workflow.total}</span>` : ""}</div>
+            ${c.steps ? `<ol class="jsteps">${c.steps.map((s) => `<li class="${s.done ? "done" : ""}"><span class="tick">${s.done ? I.check : ""}</span>${esc(s.title)}</li>`).join("")}</ol>` : `<p class="hint" style="padding:16px 22px">No step tracker on this call.</p>`}
+          </section>
+          <section class="card"><dl class="dl">
+            <dt>Mode</dt><dd>${c.mode === "onboarding" ? "Onboarding" : "Help with anything"}</dd>
+            <dt>Ended</dt><dd>${c.reason === "hangup" ? "Customer left" : "Timed out"}</dd>
+            <dt>Asked for a person</dt><dd>${c.handoffRequested ? "Yes" : "No"}</dd>
+            <dt>Call ID</dt><dd class="mono" style="font-size:12.5px">${esc(c.id)}</dd></dl></section>
+        </div>
+      </div>`;
+  }
+
+  // ═══════════ Share links ═══════════
+  let linksCache = null, productsCache = null;
+  const linkUrl = (l) => `${(linksCache?.publicUrl || location.origin)}${l.path}`;
+  async function links(sub) {
+    const [d, pb] = await Promise.all([api("links"), api("playbooks")]);
+    linksCache = d; productsCache = pb.playbooks.filter((p) => p.shown || p.source === "yours");
+    const L = d.links;
+    let notes = "";
+    if (d.localOnly) notes += banner("warn", "<b>Links only open on this computer right now</b>, because Ava is set up for “Just me”. To share them, run <code>npx ava-engine setup</code>, choose “My team or customers”, and put Ava on a public address.");
+    else if (!d.publicUrl) notes += banner("info", `Links use this page's address (<code>${esc(location.origin)}</code>). If customers reach Ava somewhere else, set <code>PUBLIC_URL</code>.`);
+    if (!d.password && !d.localOnly) notes += banner("warn", "<b>No password is set</b>, so anyone who can reach this server can also use the test page and the dashboard API. Run <code>npx ava-engine setup</code> and choose a password.");
+    setTimeout(() => { if (sub === "new") openLinkDrawer(); else if (sub && sub.startsWith("edit/")) openLinkDrawer(L.find((l) => l.id === sub.slice(5))); }, 0);
+    return `
+      ${head("Share links", "Put Ava in front of customers", "Each link opens a call already set up for one product and case. Customers don't pick anything or see the console: they just press start.", `<button class="btn accent" data-action="new-link">${I.plus}New share link</button>`)}
+      ${notes}
+      ${L.length ? `<div class="grid gcards">${L.map(linkCard).join("")}</div>`
+        : `<section class="card">${empty(I.link, "No share links yet", "Make one for each place you'd put Ava: a trial welcome email, the help menu in your app, a sales demo.", `<button class="btn accent sm" data-action="new-link">${I.plus}New share link</button>`)}</section>`}`;
+  }
+  function linkState(l) {
+    if (!l.enabled) return '<span class="badge mute">paused</span>';
+    if (l.expiresAt && Date.parse(l.expiresAt) <= Date.now()) return '<span class="badge err">expired</span>';
+    if (l.productMissing) return '<span class="badge err">product missing</span>';
+    if (l.dailyLimit && l.usage.today >= l.dailyLimit) return '<span class="badge warn">limit reached</span>';
+    return '<span class="badge ok">active</span>';
+  }
+  function linkCard(l) {
+    const url = linkUrl(l);
+    return `<article class="card lcard ${l.enabled ? "" : "off"}">
+      <div class="lcard-top">
+        <span class="dot" style="margin-top:7px;background:${esc(l.productAccent || "#4F46E5")}"></span>
+        <div class="lcard-title"><b>${esc(l.name)}</b><span class="meta" style="font-size:13px">${l.mode === "onboarding" ? `Onboarding · ${esc(l.productName || l.product)}` : `Help with anything${l.productName ? ` · knows ${esc(l.productName)}` : ""}`}</span></div>
+        ${linkState(l)}
+      </div>
+      <div class="lcard-meta">
+        ${l.handoff ? '<span class="chip">Talk to a person</span>' : ""}${l.steps ? '<span class="chip">Step tracker</span>' : ""}${l.recap ? '<span class="chip">Recap</span>' : ""}
+        ${l.dailyLimit ? `<span class="chip">${l.usage.today}/${l.dailyLimit} today</span>` : ""}${l.expiresAt ? `<span class="chip">until ${esc(new Date(l.expiresAt).toLocaleDateString())}</span>` : ""}
+      </div>
+      <div class="urlbox"><span title="${esc(url)}">${esc(url)}</span><button class="icon-btn" data-action="copy" data-url="${esc(url)}" aria-label="Copy link for ${esc(l.name)}">${I.copy}</button><a class="icon-btn" href="${esc(url)}" target="_blank" rel="noopener" aria-label="Open ${esc(l.name)}">${I.open}</a></div>
+      <div class="lcard-foot"><span class="grow">${plural(l.usage.total, "call")} · used ${esc(ago(l.usage.lastUsedAt))}</span>
+        <button class="icon-btn" data-action="toggle-link" data-id="${esc(l.id)}" aria-label="${l.enabled ? "Pause" : "Resume"} ${esc(l.name)}" title="${l.enabled ? "Pause" : "Resume"}">${l.enabled ? I.pause : I.play}</button>
+        <button class="icon-btn" data-action="embed-link" data-id="${esc(l.id)}" aria-label="Embed ${esc(l.name)} on your site" title="Embed on your site"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="m8 8-4 4 4 4M16 8l4 4-4 4M13.5 5l-3 14"/></svg></button>
+        <a class="icon-btn" href="#links/edit/${esc(l.id)}" aria-label="Edit ${esc(l.name)}" title="Edit">${I.edit}</a>
+        <button class="icon-btn danger" data-action="delete-link" data-id="${esc(l.id)}" aria-label="Delete ${esc(l.name)}" title="Delete">${I.trash}</button>
+      </div>
+    </article>`;
+  }
+  function embedDrawer(l) {
+    const base = linksCache?.publicUrl || location.origin;
+    const snippet = (o) => `<script src="${base}/embed.js" data-link="${l.id}"${o.label && o.label !== "Talk to Ava" ? ` data-label="${o.label.replace(/"/g, "&quot;")}"` : ""}${o.color ? ` data-color="${o.color}"` : ""}${o.left ? ' data-position="left"' : ""}${o.tab ? ' data-open="tab"' : ""} async></script>`;
+    openDrawer("Embed on your site", `
+      <p class="hint">Paste this before <code>&lt;/body&gt;</code> on your site or in your product. Customers get a <b>${esc(l.name)}</b> button that opens Ava in a window next to your page, so they can share it and keep working.</p>
+      <div class="field"><label for="emLabel">Button text</label><input id="emLabel" type="text" maxlength="40" value="Talk to Ava"></div>
+      <div class="fgrid">
+        <div class="field"><label for="emPos">Corner</label><select id="emPos"><option value="right">Bottom right</option><option value="left">Bottom left</option></select></div>
+        <div class="field"><label for="emOpen">Opens in</label><select id="emOpen"><option value="window">A window beside the page</option><option value="tab">A new tab</option></select></div>
+      </div>
+      <div class="field"><span class="label">Preview</span><div class="embed-preview"><span class="embed-btn" id="emPreview" style="${l.productAccent ? `--c:${esc(l.productAccent)}` : ""}"><i></i><span>Talk to Ava</span></span></div></div>
+      <div class="field"><label for="emCode">Code</label><textarea id="emCode" class="mono-in" rows="4" readonly></textarea></div>
+      <p class="hint">Your site's Content-Security-Policy must allow scripts from <code>${esc(base)}</code>. Open it from your own menu with <code>Ava.open()</code>.</p>
+      <div class="drawer-foot"><button type="button" class="btn ghost" data-action="close-drawer">Close</button><button type="button" class="btn accent" id="emCopy">${I.copy}Copy code</button></div>`, closeDrawer);
+    $("#drawer .eyebrow").textContent = "Share link";
+    const sync = () => {
+      const o = { label: $("#emLabel").value.trim() || "Talk to Ava", left: $("#emPos").value === "left", tab: $("#emOpen").value === "tab", color: l.productAccent || "" };
+      $("#emCode").value = snippet(o); $("#emPreview span").textContent = o.label;
+    };
+    ["#emLabel", "#emPos", "#emOpen"].forEach((s) => $(s).addEventListener("input", sync));
+    $("#emCopy").addEventListener("click", () => copy($("#emCode").value, "Embed code"));
+    sync();
+  }
+  function linkBody(l) {
+    return { name: l.name, mode: l.mode, product: l.product, title: l.title, intro: l.intro, handoff: l.handoff, steps: l.steps, recap: l.recap, expiresAt: l.expiresAt, dailyLimit: l.dailyLimit, enabled: l.enabled };
+  }
+
+  let lastFocus = null;
+  function openLinkDrawer(link = null) {
+    const l = link || { name: "", mode: "onboarding", product: productsCache.find((p) => p.source === "yours")?.id || productsCache.find((p) => !p.demoOnly)?.id || null, handoff: true, steps: true, recap: true, enabled: true };
+    const products = productsCache.filter((p) => !p.demoOnly);
+    lastFocus = document.activeElement;
+    $("#drawerTitle").textContent = link ? "Edit share link" : "New share link";
+    $("#drawer .eyebrow").textContent = "Share link";
+    $("#linkForm").innerHTML = `
+      <div class="field"><label for="lfName">Name <span class="opt">(only you see this)</span></label><input id="lfName" type="text" maxlength="80" required value="${esc(l.name)}" placeholder="e.g. Trial welcome email"></div>
+      <div class="field"><span class="label" id="lfModeL">What should Ava do?</span>
+        <div class="choice" role="radiogroup" aria-labelledby="lfModeL">
+          <label><input type="radio" name="lfMode" value="onboarding" ${l.mode !== "flexible" ? "checked" : ""}><span><b>Onboard onto a product</b><span>Walk them through its steps to their first win</span></span></label>
+          <label><input type="radio" name="lfMode" value="flexible" ${l.mode === "flexible" ? "checked" : ""}><span><b>Help with anything</b><span>Answer whatever they're doing on screen</span></span></label>
+        </div></div>
+      <div class="field"><label for="lfProduct">Product</label>
+        <select id="lfProduct">${l.mode === "flexible" ? '<option value="">None (general help)</option>' : ""}${products.map((p) => `<option value="${esc(p.id)}" ${p.id === l.product ? "selected" : ""}>${esc(p.name)}${p.source === "yours" ? "" : " (sample)"}</option>`).join("")}</select>
+        <p class="hint">From your <a href="#playbooks">playbooks</a>. ${products.some((p) => p.source === "yours") ? "" : '<a href="#playbooks/new">Add your own product</a> first.'}</p></div>
+      <div class="field"><label for="lfTitle">Heading customers see <span class="opt">(optional)</span></label><input id="lfTitle" type="text" maxlength="80" value="${esc(l.title || "")}" placeholder="Get set up on your product"></div>
+      <div class="field"><label for="lfIntro">Intro <span class="opt">(optional)</span></label><textarea id="lfIntro" maxlength="240" placeholder="One or two sentences under the heading.">${esc(l.intro || "")}</textarea></div>
+      <div class="field"><span class="label">On the call</span><div>
+        <label class="toggle"><input type="checkbox" id="lfHandoff" ${l.handoff ? "checked" : ""}><span><b>“Talk to a person” button</b><span>Your team gets a join link (in Slack, if set up)</span></span></label>
+        <label class="toggle"><input type="checkbox" id="lfSteps" ${l.steps ? "checked" : ""}><span><b>Step tracker</b><span>Show the journey and tick steps off as they're done</span></span></label>
+        <label class="toggle"><input type="checkbox" id="lfRecap" ${l.recap ? "checked" : ""}><span><b>Recap at the end</b><span>A short summary of what they got done</span></span></label>
+        <label class="toggle"><input type="checkbox" id="lfEnabled" ${l.enabled ? "checked" : ""}><span><b>Link is active</b><span>Turn off to pause it without deleting</span></span></label>
+      </div></div>
+      <div class="fgrid">
+        <div class="field"><label for="lfExpires">Expires <span class="opt">(optional)</span></label><input id="lfExpires" type="date" value="${l.expiresAt ? esc(l.expiresAt.slice(0, 10)) : ""}"></div>
+        <div class="field"><label for="lfLimit">Calls per day <span class="opt">(optional)</span></label><input id="lfLimit" type="number" min="1" step="1" inputmode="numeric" value="${esc(l.dailyLimit ?? "")}" placeholder="No limit"></div>
+      </div>
+      <ul class="errors" id="lfErrors" role="alert"></ul>
+      <div class="drawer-foot"><button type="button" class="btn ghost" data-action="close-drawer">Cancel</button><button type="submit" class="btn accent">${link ? "Save changes" : `${I.link}Create link`}</button></div>`;
+    $$('input[name="lfMode"]').forEach((r) => r.addEventListener("change", () => {
+      const sel = $("#lfProduct"), flex = $('input[name="lfMode"]:checked').value === "flexible";
+      const none = sel.querySelector('option[value=""]');
+      if (flex && !none) sel.insertAdjacentHTML("afterbegin", '<option value="">None (general help)</option>');
+      if (!flex && none) none.remove();
+    }));
+    $("#linkForm").onsubmit = async (e) => {
+      e.preventDefault();
+      const exp = $("#lfExpires").value;
+      const body = {
+        name: $("#lfName").value, mode: $('input[name="lfMode"]:checked').value, product: $("#lfProduct").value || null,
+        title: $("#lfTitle").value, intro: $("#lfIntro").value,
+        handoff: $("#lfHandoff").checked, steps: $("#lfSteps").checked, recap: $("#lfRecap").checked, enabled: $("#lfEnabled").checked,
+        expiresAt: exp ? new Date(`${exp}T23:59:59`).toISOString() : null, dailyLimit: $("#lfLimit").value || null,
+      };
+      try {
+        const r = link ? await api(`links/${link.id}`, { method: "PUT", body }) : await api("links", { method: "POST", body });
+        closeDrawer();
+        go("#links");
+        if (!link) copy(linkUrl(r.link), "Link created and");
+        else toast("Link saved");
+      } catch (err) { $("#lfErrors").innerHTML = (err.errors || [err.message]).map((x) => `<li>${esc(x)}</li>`).join(""); }
+    };
+    $("#scrim").hidden = false; $("#drawer").hidden = false;
+    $("#lfName").focus();
+  }
+  function closeDrawer() {
+    if ($("#drawer").hidden) return;
+    $("#scrim").hidden = true; $("#drawer").hidden = true;
+    if (/^#links\/(new|edit)/.test(location.hash)) history.replaceState(null, "", "#links");
+    lastFocus?.focus?.();
+  }
+
+  // ═══════════ Playbooks ═══════════
+  let libCache = null;
+  async function playbooks() {
+    const [d, lib] = await Promise.all([api("playbooks"), api("library").catch((e) => ({ error: e.message }))]);
+    libCache = lib;
+    const mine = d.playbooks.filter((p) => p.source === "yours"), built = d.playbooks.filter((p) => p.source === "built-in" && !p.demoOnly);
+    const problems = d.problems.filter((p) => p.errors.length);
+    return `
+      ${head("Playbooks", "What Ava knows about your products", "A playbook is Ava's script for one product: the steps to a customer's first win, how to do each one, and facts to answer questions with.", `<a class="btn accent" href="#playbooks/new">${I.plus}New playbook</a>`)}
+      ${problems.map((p) => banner("err", `<b>${esc(p.file)} isn't loaded:</b> ${p.errors.map(esc).join(" ")}`)).join("")}
+      <div class="section-title"><h3>Yours</h3><span class="mono">${esc(d.dir)}</span></div>
+      ${mine.length ? `<div class="grid gcards" style="margin-bottom:28px">${mine.map((p) => pbCard(p)).join("")}</div>`
+        : `<section class="card" style="margin-bottom:28px">${empty(I.book, "Describe your product", "Write the steps to your customers' first win and the facts they ask about. Ava follows it on every call. You can also start from a sample below.", `<a class="btn accent sm" href="#playbooks/new">${I.plus}New playbook</a>`)}</section>`}
+      <div class="section-title"><h3>Library</h3><span>${lib.error ? "" : `Shared playbooks you can install and adapt · <a href="https://github.com/Mr-vero/ava-playbooks" target="_blank" rel="noopener">contribute one</a>`}</span></div>
+      ${lib.error ? banner("warn", esc(lib.error)) : `<div class="grid gcards" style="margin-bottom:28px">${lib.playbooks.map(libCard).join("") || `<section class="card">${empty(I.book, "The library is empty", "")}</section>`}</div>`}
+      <div class="section-title"><h3>Samples</h3><span>${d.hideBuiltins ? "Hidden from the test page (<code>BUILTIN_PLAYBOOKS=off</code>)" : "Duplicate one to make it yours"}</span></div>
+      <div class="grid gcards">${built.map((p) => pbCard(p)).join("")}</div>`;
+  }
+  function libCard(p) {
+    const action = { available: `<button class="btn accent sm" data-action="lib-install" data-id="${esc(p.id)}">Install</button>`,
+      installed: '<span class="badge ok">installed</span>',
+      update: `<button class="btn accent sm" data-action="lib-install" data-id="${esc(p.id)}">Update</button>`,
+      taken: `<button class="btn ghost sm" data-action="lib-install" data-id="${esc(p.id)}" data-overwrite="1" title="You have your own playbook with this id">Replace yours</button>` }[p.state];
+    return `<article class="card pcard" style="--pc:${esc(p.accent || "#4F46E5")}">
+      <div class="pcard-body"><span class="cat">${esc(p.category || "Product")}</span><b>${esc(p.name)}</b>${p.tagline ? `<p>${esc(p.tagline)}</p>` : ""}
+        <div class="journey">${p.journey.map((s) => `<span>${esc(s)}</span>`).join("")}</div></div>
+      <div class="pcard-foot"><span class="grow">${plural(p.journey.length, "step")} · ${plural(p.facts, "fact")}${p.author ? ` · by ${esc(p.author)}` : ""}</span>
+        <button class="btn ghost sm" data-action="lib-preview" data-id="${esc(p.id)}">Preview</button>${can("editor") ? action : ""}</div></article>`;
+  }
+  function libPreview(id) {
+    const p = libCache.playbooks.find((x) => x.id === id);
+    openDrawer(p.name, `
+      <p class="hint">${esc(p.tagline || "")}</p>
+      <div class="card preview-card" style="--pc:${esc(p.accent || "#4F46E5")}"><div class="pv-top"><span>What customers see</span><b>Get set up on ${esc(p.name)}</b></div>
+        <ol class="pv-steps">${p.journey.map((s) => `<li>${esc(s)}</li>`).join("")}</ol></div>
+      <dl class="card dl"><dt>Facts</dt><dd>${p.facts}</dd>${p.author ? `<dt>By</dt><dd>${esc(p.author)}</dd>` : ""}<dt>File</dt><dd><a href="https://github.com/Mr-vero/ava-playbooks/blob/main/${esc(p.file)}" target="_blank" rel="noopener" class="mono" style="font-size:12.5px">${esc(p.file)}</a></dd></dl>
+      <p class="hint">Installing copies it into your playbooks: adapt it to your product and it's yours. Check every step and fact against the product before customers use it.</p>
+      <div class="drawer-foot"><button type="button" class="btn ghost" data-action="close-drawer">Close</button>${can("editor") && p.state !== "installed" ? `<button type="button" class="btn accent" data-action="lib-install" data-id="${esc(p.id)}" ${p.state === "taken" ? 'data-overwrite="1"' : ""}>${p.state === "update" ? "Update" : p.state === "taken" ? "Replace yours" : "Install"}</button>` : ""}</div>`, closeDrawer);
+    $("#drawer .eyebrow").textContent = "Library";
+  }
+  function pbCard(p) {
+    const yours = p.source === "yours";
+    return `<article class="card pcard" style="--pc:${esc(p.accent || "#4F46E5")}">
+      <div class="pcard-body"><span class="cat">${esc(p.category || "Product")}${p.overridden ? " · replaced by yours" : ""}</span><b>${esc(p.name)}</b>${p.tagline ? `<p>${esc(p.tagline)}</p>` : ""}
+        <div class="journey">${(p.journey || []).map((s) => `<span>${esc(s)}</span>`).join("")}</div></div>
+      <div class="pcard-foot"><span class="grow">${plural(p.journey.length, "step")} · ${plural((p.knowledge || []).length, "fact")}</span>
+        <a class="icon-btn" href="/app?mode=onboarding&amp;product=${encodeURIComponent(p.id)}" target="_blank" rel="noopener" aria-label="Test a call on ${esc(p.name)}" title="Test a call">${I.mic}</a>
+        ${yours ? `<a class="icon-btn" href="#playbooks/edit/${encodeURIComponent(p.id)}" aria-label="Edit ${esc(p.name)}" title="Edit">${I.edit}</a>
+                   <button class="icon-btn danger" data-action="delete-pb" data-id="${esc(p.id)}" data-name="${esc(p.name)}" aria-label="Delete ${esc(p.name)}" title="Delete">${I.trash}</button>`
+                : `<a class="btn ghost sm" href="#playbooks/copy/${encodeURIComponent(p.id)}">${I.copy}Duplicate</a>`}
+      </div></article>`;
+  }
+
+  // ── playbook editor ──
+  const slug = (s) => String(s || "").toLowerCase().normalize("NFKD").replace(/[^\w\s-]/g, "").trim().replace(/[\s_]+/g, "-").replace(/-+/g, "-").slice(0, 40).replace(/^-|-$/g, "");
+  let ed = null, pendingDraft = null;
+  function draftDrawer() {
+    openDrawer("Draft with AI", `
+      <p class="hint">Point Ava at your getting-started docs and it drafts the journey, how to do each step and the facts customers ask about. You review everything before it's saved.</p>
+      <div class="field"><label for="dfName">Product name</label><input id="dfName" type="text" maxlength="60" value="${esc($("#pbName")?.value || "")}" required></div>
+      <div class="field"><label for="dfUrl">Docs page <span class="opt">(a public address)</span></label><input id="dfUrl" type="url" class="mono-in" placeholder="https://docs.yourproduct.com/getting-started"></div>
+      <div class="field"><label for="dfText">Or paste your guide <span class="opt">(either or both)</span></label><textarea id="dfText" rows="8" maxlength="60000" placeholder="Paste the steps a new customer follows, help-center articles, FAQs…"></textarea></div>
+      <ul class="errors" id="dfErrors" role="alert"></ul>
+      <p class="hint" id="dfStatus" role="status" aria-live="polite"></p>
+      <div class="drawer-foot"><button type="button" class="btn ghost" data-action="close-drawer">Cancel</button><button type="submit" class="btn accent" id="dfGo">${I.book}Draft playbook</button></div>`, async () => {
+      $("#dfGo").disabled = true; $("#dfErrors").innerHTML = ""; $("#dfStatus").textContent = "Reading your docs and drafting… this takes about 20 seconds.";
+      try {
+        const r = await api("playbooks/draft", { method: "POST", body: { name: $("#dfName").value, url: $("#dfUrl").value || undefined, text: $("#dfText").value || undefined } });
+        pendingDraft = r.playbook; closeDrawer();
+        toast(r.problems.length ? "Draft ready, with a few things to fix" : "Draft ready: review it, then save");
+        render(true);
+      } catch (err) { $("#dfErrors").innerHTML = (err.errors || [err.message]).map((x) => `<li>${esc(x)}</li>`).join(""); $("#dfStatus").textContent = ""; }
+      finally { const b = $("#dfGo"); if (b) b.disabled = false; }
+    });
+  }
+  async function editor(sub) {
+    const d = await api("playbooks");
+    const [kind, id] = [sub.split("/")[0], decodeURIComponent(sub.split("/").slice(1).join("/"))];
+    const src = kind === "new" ? null : d.playbooks.find((p) => p.id === id);
+    if (kind !== "new" && !src) return `${head("Playbook", "Not found", "")}${banner("err", "That playbook doesn't exist.")}`;
+    let pb;
+    if (kind === "new") pb = d.template;
+    else pb = { ...src, knowledge: (src.knowledge || []).map((k) => ({ keywords: k.k, text: k.text })) };
+    if (kind === "copy") pb = { ...pb, id: `${src.id}-copy`, name: `${src.name} (copy)` };
+    if (kind === "new") pb = pendingDraft || { id: "", name: "", accent: "#4F46E5", journey: ["", "", ""], path: [], knowledge: [{ keywords: "", text: "" }] };
+    const fromDraft = kind === "new" && !!pendingDraft; pendingDraft = null;
+    ed = { previousId: kind === "edit" ? src.id : undefined, idTouched: kind === "edit", existing: kind === "edit", touched: kind !== "new" || fromDraft };
+    const n = Math.max(pb.journey?.length || 0, pb.path?.length || 0, 1);
+    const steps = Array.from({ length: n }, (_, i) => ({ title: pb.journey?.[i] || "", how: pb.path?.[i] || "" }));
+    const title = kind === "edit" ? pb.name : kind === "copy" ? "Duplicate playbook" : "New playbook";
+    return `
+      <a class="btn ghost sm" href="#playbooks" style="margin-bottom:18px">${I.back}Playbooks</a>
+      ${head("Playbook", title, "Ava follows this on every call for this product. Changes apply to new calls as soon as you save.", kind === "new" ? `<button class="btn ghost" data-action="draft-ai">${I.book}Draft with AI</button>` : "")}
+      ${fromDraft ? banner("info", "<b>This is an AI draft.</b> Check every step and fact against your product before saving: Ava will say these things to customers.") : ""}
+      <div class="editor">
+        <form class="stack" id="pbForm" novalidate>
+          <section class="card card-pad stack">
+            <h2>Basics</h2>
+            <div class="fgrid">
+              <div class="field"><label for="pbName">Product name</label><input id="pbName" type="text" maxlength="60" value="${esc(pb.name)}" placeholder="Acme" required></div>
+              <div class="field"><label for="pbId">ID <span class="opt">(in links and events)</span></label><input id="pbId" class="mono-in" type="text" maxlength="40" value="${esc(pb.id)}" placeholder="acme" pattern="[a-z0-9][a-z0-9-]*"></div>
+              <div class="field"><label for="pbCat">Category <span class="opt">(optional)</span></label><input id="pbCat" type="text" maxlength="300" value="${esc(pb.category || "")}" placeholder="Analytics"></div>
+              <div class="field"><label for="pbUrl">Product URL <span class="opt">(optional)</span></label><input id="pbUrl" type="url" maxlength="300" value="${esc(pb.url || "")}" placeholder="https://app.acme.com"></div>
+              <div class="field"><label for="pbAccentHex">Brand colour</label><div class="color-in"><input type="color" id="pbAccent" value="${esc(/^#[0-9a-f]{6}$/i.test(pb.accent || "") ? pb.accent : "#4F46E5")}" aria-label="Pick brand colour"><input id="pbAccentHex" class="mono-in" type="text" maxlength="7" value="${esc(pb.accent || "#4F46E5")}"></div><p class="hint">The call takes on this colour.</p></div>
+              <div class="field"><label for="pbEta">Minutes to finish <span class="opt">(rough)</span></label><input id="pbEta" type="number" min="1" max="120" value="${esc(pb.etaMin ?? "")}"></div>
+              <div class="field wide"><label for="pbTagline">One-line description <span class="opt">(optional)</span></label><input id="pbTagline" type="text" maxlength="300" value="${esc(pb.tagline || "")}" placeholder="What it does, and why setup takes a hand"></div>
+              <div class="field wide"><label for="pbWin">First win</label><input id="pbWin" type="text" maxlength="300" value="${esc(pb.firstWin || "")}" placeholder="their first report open on the dashboard"><p class="hint">What success looks like on screen. Ava stops guiding once it sees this.</p></div>
+              <div class="field wide"><label for="pbOptional">What can wait <span class="opt">(optional)</span></label><input id="pbOptional" type="text" maxlength="300" value="${esc(pb.optional || "")}" placeholder="Inviting teammates and billing can wait until after the first win."></div>
+            </div>
+          </section>
+          <section class="card card-pad stack">
+            <div class="section-title"><h2>Journey</h2><span>Up to 10 steps, each visible on screen when done</span></div>
+            <div class="rows" id="pbSteps">${steps.map(stepRow).join("")}</div>
+            <button type="button" class="btn ghost sm add-row" data-action="add-step">${I.plus}Add step</button>
+          </section>
+          <section class="card card-pad stack">
+            <div class="section-title"><h2>Knowledge</h2><span>Facts Ava quotes when a question matches the keywords</span></div>
+            <div class="rows" id="pbKb">${(pb.knowledge || []).map(kbRow).join("")}</div>
+            <button type="button" class="btn ghost sm add-row" data-action="add-kb">${I.plus}Add fact</button>
+          </section>
+        </form>
+        <aside class="side-panel" aria-label="Check and save">
+          <div class="card"><div class="validity" id="pbValid" role="status" aria-live="polite">Checking…</div><ul class="errors" id="pbErrors" style="margin:0 16px 16px"></ul>
+            <div class="row" style="padding:0 16px 16px">
+              <button class="btn accent grow" data-action="save-pb">${I.check}Save playbook</button>
+              ${ed.existing ? `<a class="btn ghost" href="/app?mode=onboarding&amp;product=${encodeURIComponent(pb.id)}" target="_blank" rel="noopener">${I.mic}Test</a>` : ""}
+            </div></div>
+          <div class="card preview-card" id="pbPreview"></div>
+          <details class="card json"><summary>JSON file</summary><pre id="pbJson"></pre></details>
+        </aside>
+      </div>`;
+  }
+  const stepRow = (s, i = 0) => `<div class="erow"><span class="n">${i + 1}</span>
+      <input type="text" maxlength="60" aria-label="Step name" placeholder="Step name, e.g. Connect a source" value="${esc(s.title)}" data-k="title">
+      <textarea maxlength="400" rows="1" aria-label="How to do it" placeholder="How to do it, in plain words" data-k="how">${esc(s.how)}</textarea>
+      <button type="button" class="icon-btn danger" data-action="del-row" aria-label="Remove step">${I.trash}</button></div>`;
+  const kbRow = (k) => `<div class="erow kb">
+      <input type="text" maxlength="300" aria-label="Keywords" placeholder="Keywords: invoice export csv" value="${esc(k.keywords)}" data-k="keywords">
+      <textarea maxlength="1000" rows="2" aria-label="Answer" placeholder="The answer, checked against your current UI" data-k="text">${esc(k.text)}</textarea>
+      <button type="button" class="icon-btn danger" data-action="del-row" aria-label="Remove fact">${I.trash}</button></div>`;
+  function readEditor() {
+    const v = (id) => $(id).value.trim();
+    const steps = $$("#pbSteps .erow").map((r) => ({ title: $('[data-k="title"]', r).value.trim(), how: $('[data-k="how"]', r).value.trim() })).filter((s) => s.title || s.how);
+    const kb = $$("#pbKb .erow").map((r) => ({ keywords: $('[data-k="keywords"]', r).value.trim(), text: $('[data-k="text"]', r).value.trim() })).filter((k) => k.keywords || k.text);
+    const pb = { id: v("#pbId"), name: v("#pbName"), url: v("#pbUrl") || undefined, category: v("#pbCat") || undefined, accent: v("#pbAccentHex") || undefined,
+      tagline: v("#pbTagline") || undefined, firstWin: v("#pbWin") || undefined, optional: v("#pbOptional") || undefined,
+      // path[i] is how to do journey[i], so keep them aligned (a blank how-to falls back to the step name)
+      journey: steps.map((s) => s.title), path: steps.some((s) => s.how) ? steps.map((s) => s.how || s.title) : [], etaMin: v("#pbEta") ? Number(v("#pbEta")) : undefined, knowledge: kb };
+    if (!pb.path.length) delete pb.path;
+    return JSON.parse(JSON.stringify(pb));
+  }
+  let checkTimer;
+  function editorChanged() {
+    const pb = readEditor();
+    $("#pbJson").textContent = JSON.stringify(pb, null, 2);
+    const acc = /^#[0-9a-f]{3,6}$/i.test(pb.accent || "") ? pb.accent : "#4F46E5";
+    $("#pbPreview").style.setProperty("--pc", acc);
+    $("#pbPreview").innerHTML = `<div class="pv-top"><span>What customers see</span><b>${esc(pb.name ? `Get set up on ${pb.name}` : "Your product")}</b></div>
+      <ol class="pv-steps">${(pb.journey.length ? pb.journey : ["Your first step"]).map((s) => `<li>${esc(s || "…")}</li>`).join("")}</ol>`;
+    clearTimeout(checkTimer);
+    checkTimer = setTimeout(async () => {
+      try {
+        const r = await api("playbooks/check", { method: "POST", body: { playbook: pb } });
+        if (!ed.touched && !r.ok) { // a blank new playbook: guide, don't scold
+          $("#pbValid").className = "validity"; $("#pbValid").innerHTML = `${I.info}Add a product name and its steps to save`;
+          $("#pbErrors").innerHTML = ""; return;
+        }
+        $("#pbValid").className = "validity " + (r.ok ? "ok" : "bad");
+        $("#pbValid").innerHTML = r.ok ? `${I.check}Ready to save` : `${I.warn}${plural(r.errors.length, "thing")} to fix`;
+        $("#pbErrors").innerHTML = [...r.errors, ...r.warnings].map((x) => `<li>${esc(x)}</li>`).join("");
+      } catch {}
+    }, 250);
+  }
+  function wireEditor() {
+    const form = $("#pbForm"); if (!form) return;
+    form.addEventListener("input", (e) => {
+      if (e.target.id === "pbName" && !ed.idTouched) $("#pbId").value = slug(e.target.value);
+      if (e.target.id === "pbId") ed.idTouched = true;
+      ed.touched = true;
+      if (e.target.id === "pbAccent") $("#pbAccentHex").value = e.target.value.toUpperCase();
+      if (e.target.id === "pbAccentHex" && /^#[0-9a-f]{6}$/i.test(e.target.value)) $("#pbAccent").value = e.target.value;
+      editorChanged();
+    });
+    form.addEventListener("submit", (e) => e.preventDefault());
+    editorChanged();
+  }
+  function renumber() { $$("#pbSteps .erow .n").forEach((n, i) => { n.textContent = i + 1; }); }
+  async function savePlaybook(btn) {
+    ed.touched = true;
+    const pb = readEditor();
+    btn.disabled = true;
+    try {
+      await api(`playbooks/${encodeURIComponent(pb.id || "_")}`, { method: "PUT", body: { playbook: pb, previousId: ed.previousId } });
+      toast(`${pb.name} saved`);
+      go("#playbooks");
+    } catch (err) {
+      $("#pbValid").className = "validity bad"; $("#pbValid").innerHTML = `${I.warn}Not saved`;
+      $("#pbErrors").innerHTML = (err.errors || [err.message]).map((x) => `<li>${esc(x)}</li>`).join("");
+    } finally { btn.disabled = false; }
+  }
+
+  // ═══════════ Settings ═══════════
+  // Edit in place; nothing is saved until "Save changes". Secrets are never sent to
+  // the page: they show as set or not, with Replace and Remove.
+  const SECTIONS = [
+    ["ai", "AI", "Which models Ava uses, through OpenRouter."],
+    ["voice", "Voice and speech", "How Ava sounds, and cloud speech-to-text."],
+    ["access", "Access", "Who can reach Ava, and where customers find it."],
+    ["limits", "Limits", "Spending caps and rate limits. Applied to new calls straight away."],
+    ["events", "Events", "Where Ava sends call events and handoff alerts."],
+    ["data", "Data and privacy", "What Ava keeps after a call."],
+    ["playbooks", "Playbooks", ""],
+  ];
+  let draft = {}, settingsData = null;
+  function settingRow(x) {
+    const id = `set-${x.key}`, pending = Object.prototype.hasOwnProperty.call(draft, x.key);
+    const badges = `${x.locked ? '<span class="badge mute">set by your host</span>' : ""}${x.pending ? '<span class="badge warn">restart to apply</span>' : x.restart ? '<span class="badge mute">needs a restart</span>' : ""}`;
+    let control;
+    if (x.secret) {
+      const state = pending ? (draft[x.key] === "" ? '<span class="badge err">will be removed</span>' : '<span class="badge live">new value</span>') : x.set ? `<span class="badge ok">set</span> <span class="mono meta" style="font-size:12.5px">${esc(x.value)}</span>` : '<span class="badge mute">not set</span>';
+      control = `<div class="secret-row"><span class="secret-state">${state}</span>
+        ${x.locked ? "" : `<span class="row" style="gap:6px">
+          <button type="button" class="btn ghost sm" data-action="secret-edit" data-key="${esc(x.key)}">${x.set ? "Replace" : "Add"}</button>
+          ${x.set && !pending ? `<button type="button" class="btn ghost sm" data-action="secret-clear" data-key="${esc(x.key)}">Remove</button>` : ""}
+          ${pending ? `<button type="button" class="btn ghost sm" data-action="secret-undo" data-key="${esc(x.key)}">Undo</button>` : ""}</span>`}</div>
+        <input id="${id}" class="mono-in" type="password" autocomplete="off" spellcheck="false" data-key="${esc(x.key)}" ${pending && draft[x.key] !== "" ? "" : "hidden"} value="${esc(pending ? draft[x.key] : "")}" placeholder="Paste the new value">`;
+    } else if (x.type === "enum") {
+      const v = pending ? draft[x.key] : x.value || x.default;
+      control = `<select id="${id}" data-key="${esc(x.key)}" ${x.locked ? "disabled" : ""}>${x.options.map((o) => `<option value="${esc(o)}" ${o === v ? "selected" : ""}>${esc(OPTION_LABEL[o] || o)}</option>`).join("")}</select>`;
+    } else {
+      const v = pending ? draft[x.key] : x.value;
+      control = `<input id="${id}" class="${x.type === "slug" || x.type === "url" || x.type === "urls" ? "mono-in" : ""}" type="${x.type === "number" ? "number" : "text"}" ${x.type === "number" ? `step="any"` : ""} data-key="${esc(x.key)}" value="${esc(v)}" placeholder="${esc(x.default || "")}" ${x.locked ? "disabled" : ""}>`;
+    }
+    return `<div class="srow ${pending ? "dirty" : ""}"><div class="slabel"><label for="${id}">${esc(x.label)}</label>${x.hint ? `<p class="hint">${esc(x.hint)}</p>` : ""}<div class="row" style="gap:6px;margin-top:4px">${badges}<span class="env">${esc(x.key)}</span></div></div><div class="sctl">${control}</div></div>`;
+  }
+  const OPTION_LABEL = { on: "On", off: "Off", kokoro: "Kokoro (offline, free)", elevenlabs: "ElevenLabs", hume: "Hume", browser: "The browser's voice", "127.0.0.1": "This computer only", "0.0.0.0": "Any network address", 1: "Yes", 0: "No" };
+  async function settings() {
+    const s = settingsData = await api("settings");
+    setStatus(s);
+    const by = (sec) => s.settings.filter((x) => x.section === sec);
+    const n = Object.keys(draft).length;
+    return `
+      ${head("Settings", "Settings", `Changes apply as soon as you save, except where marked. They're saved to <code>${esc(s.file)}</code>.`)}
+      <div class="stack">
+        ${SECTIONS.map(([sec, title, sub]) => `<section class="card" aria-labelledby="h-${sec}">
+          <div class="card-head"><div><h2 id="h-${sec}">${esc(title)}</h2>${sub ? `<p class="hint" style="margin-top:2px">${esc(sub)}</p>` : ""}</div>
+            ${sec === "ai" ? `<button type="button" class="btn accent sm" data-action="connect-or">${I.link}${s.mock ? "Connect OpenRouter" : "Reconnect OpenRouter"}</button>` : ""}
+            ${sec === "data" ? `<button type="button" class="btn ghost sm" data-action="delete-transcripts">${I.trash}Delete all transcripts</button>` : ""}
+            ${sec === "events" ? `<button type="button" class="btn ghost sm" data-action="test-hooks" ${s.events.endpoints || s.events.slack ? "" : "disabled"}>${I.send}Send test event</button>` : ""}</div>
+          ${by(sec).map(settingRow).join("")}</section>`).join("")}
+        <section class="card"><div class="card-head"><h2>Files</h2></div><dl class="dl">
+          <dt>Settings</dt><dd><span class="mono">${esc(s.file)}</span></dd>
+          <dt>Playbooks</dt><dd><span class="mono">${esc(s.files.playbooks)}</span></dd>
+          <dt>Share links</dt><dd><span class="mono">${esc(s.files.links)}</span></dd></dl></section>
+      </div>
+      <div class="savebar" id="saveBar" ${n ? "" : "hidden"} role="region" aria-label="Unsaved changes">
+        <span><b id="saveCount">${plural(n, "unsaved change")}</b></span><ul class="errors" id="saveErrors"></ul>
+        <button type="button" class="btn ghost sm" data-action="settings-discard">Discard</button>
+        <button type="button" class="btn accent sm" data-action="settings-save">${I.check}Save changes</button>
+      </div>`;
+  }
+  function markDraft(key, value) {
+    const x = settingsData.settings.find((s) => s.key === key);
+    const current = x.secret ? null : (x.value || (x.type === "enum" ? x.default : ""));
+    if (!x.secret && value === current) delete draft[key]; else draft[key] = value;
+    const n = Object.keys(draft).length;
+    $("#saveBar").hidden = !n; $("#saveCount").textContent = plural(n, "unsaved change");
+    $(`[data-key="${key}"]`)?.closest(".srow")?.classList.toggle("dirty", Object.prototype.hasOwnProperty.call(draft, key));
+  }
+  async function saveSettings(btn) {
+    if ("ACCESS_PASSWORD" in draft && !(await confirmBox("Change the access password?", draft.ACCESS_PASSWORD ? "Everyone, including you, signs in again with the new password. Share links keep working." : "Without a password, the dashboard and test page only work on this computer.", "Change it"))) return;
+    btn.disabled = true;
+    try {
+      const r = await api("settings", { method: "PUT", body: { values: draft } });
+      draft = {};
+      toast(r.restart.length ? `Saved. Restart Ava to apply: ${r.restart.join(", ")}` : r.changed.length ? "Saved and applied" : "Nothing changed");
+      render(false);
+    } catch (err) { $("#saveErrors").innerHTML = (err.errors || [err.message]).map((x) => `<li>${esc(x)}</li>`).join(""); }
+    finally { btn.disabled = false; }
+  }
+  // calls filters (re-render the list, keep focus in the search box)
+  document.addEventListener("input", (e) => {
+    const f = e.target.dataset?.filter; if (!f) return;
+    if (f === "fq") callFilter.q = e.target.value; if (f === "fo") callFilter.outcome = e.target.value; if (f === "fp") callFilter.product = e.target.value; if (f === "fl") callFilter.link = e.target.value;
+    const pos = f === "fq" ? e.target.selectionStart : null;
+    render(false).then(() => { const el = document.getElementById(f); if (el) { el.focus(); if (pos != null) el.setSelectionRange(pos, pos); } });
+  });
+  document.addEventListener("keydown", (e) => { if (e.key === "Enter" && e.target.matches("tr.clickable")) go(e.target.dataset.href); });
+  document.addEventListener("change", (e) => { const k = e.target.dataset?.af; if (!k) return; if (k === "afp") af.product = e.target.value; if (k === "afl") af.link = e.target.value; render(false); });
+  // column tooltips (hover and keyboard focus)
+  const showTip = (col) => {
+    const tip = $("#ccTip"); if (!tip || !col) return;
+    const [day, calls, done, hand] = col.dataset.tip.split("|");
+    tip.innerHTML = `<b>${esc(day)}</b><span>${plural(Number(calls), "call")}</span><span>${done} finished · ${hand} asked for a person</span>`;
+    const box = col.closest(".colchart").getBoundingClientRect(), r = col.getBoundingClientRect();
+    tip.hidden = false;
+    tip.style.left = `${Math.min(box.width - tip.offsetWidth - 4, Math.max(4, r.left - box.left + r.width / 2 - tip.offsetWidth / 2))}px`;
+  };
+  document.addEventListener("mouseover", (e) => { const c = e.target.closest?.(".cc-col"); if (c) showTip(c); });
+  document.addEventListener("mouseout", (e) => { if (e.target.closest?.(".cc-col") && !e.relatedTarget?.closest?.(".cc-col")) { const t = $("#ccTip"); if (t) t.hidden = true; } });
+  document.addEventListener("focusin", (e) => { if (e.target.matches?.(".cc-col")) showTip(e.target); });
+  document.addEventListener("change", async (e) => {
+    const id = e.target.dataset?.roleOf; if (!id) return;
+    try { await api(`team/${id}`, { method: "PUT", body: { role: e.target.value } }); toast("Role changed. They'll sign in again."); }
+    catch (err) { toast(err.message, "err"); }
+    render(false);
+  });
+  document.addEventListener("submit", async (e) => {
+    if (e.target.id !== "firstOwner") return;
+    e.preventDefault();
+    try {
+      await api("team", { method: "POST", body: { name: $("#foName").value, email: $("#foEmail").value, password: $("#foPass").value } });
+      toast("Owner account created. You're signed in."); await loadMe(); render(true);
+    } catch (err) { $("#foErrors").innerHTML = (err.errors || [err.message]).map((x) => `<li>${esc(x)}</li>`).join(""); }
+  });
+  document.addEventListener("input", (e) => { const k = e.target.dataset?.key; if (k && settingsData && e.target.closest("#page")) markDraft(k, e.target.value.trim()); });
+  document.addEventListener("change", (e) => { const k = e.target.dataset?.key; if (k && settingsData && e.target.tagName === "SELECT") markDraft(k, e.target.value); });
+  window.addEventListener("beforeunload", (e) => { if (Object.keys(draft).length) e.preventDefault(); });
+
+  // ═══════════ Analytics ═══════════
+  const af = { days: 30, product: "", link: "", table: false };
+  const pct = (x) => (x == null ? "—" : `${Math.round(x * 100)}%`);
+  const niceMax = (v) => { if (v <= 4) return 4; const p = 10 ** Math.floor(Math.log10(v)); return Math.ceil(v / p / (v / p > 5 ? 2 : 1)) * p * (v / p > 5 ? 2 : 1); };
+  async function analyticsPage() {
+    const q = new URLSearchParams({ days: af.days, ...(af.product && { product: af.product }), ...(af.link && { link: af.link }) });
+    const d = await api(`analytics?${q}`), t = d.totals;
+    const seg = [[7, "7 days"], [30, "30 days"], [90, "90 days"], [0, "All time"]].map(([v, l]) => `<button role="tab" aria-selected="${af.days === v}" data-af-days="${v}">${l}</button>`).join("");
+    const sel = (id, label, value, opts) => `<label class="sr" for="${id}">${label}</label><select id="${id}" data-af="${id}">${opts.map(([v, x]) => `<option value="${esc(v)}" ${v === value ? "selected" : ""}>${esc(x)}</option>`).join("")}</select>`;
+    const tile = (label, value, foot) => `<div class="card stat"><div class="label">${label}</div><div class="value">${value}</div><div class="foot">${foot}</div></div>`;
+    return `
+      ${head("Analytics", "How onboarding is going", "From finished calls: who gets to their first win, where people get stuck, and what each finished onboarding costs.")}
+      <div class="filters">
+        <div class="tabs" role="tablist" aria-label="Period" style="margin:0">${seg}</div>
+        ${sel("afp", "Product", af.product, [["", "All products"], ...d.options.products.map((p) => [p.id, p.name])])}
+        ${sel("afl", "Link", af.link, [["", "All links"], ["test", "Test calls"], ...d.options.links.map((l) => [l.id, l.name])])}
+      </div>
+      ${t.calls ? `
+      <div class="grid g5">
+        ${tile("Calls", t.calls.toLocaleString(), `${plural(t.onboarding, "onboarding")}`)}
+        ${tile("Finished onboarding", pct(t.completionRate), t.onboarding ? `${t.completed} of ${t.onboarding}` : "No onboarding calls")}
+        ${tile("Asked for a person", pct(t.handoffRate), "of all calls")}
+        ${tile("Typical call", `${t.medianMinutes}<small> min</small>`, "median length")}
+        ${tile("Cost per finished onboarding", t.costPerCompletion == null ? "—" : money(t.costPerCompletion), `${money(t.spend)} spent in total`)}
+      </div>
+      <section class="card" style="margin-top:16px" aria-labelledby="h-daily">
+        <div class="card-head"><div><h2 id="h-daily">Calls per day</h2></div><button class="btn ghost sm" data-action="af-table" aria-pressed="${af.table}">${af.table ? "Show chart" : "Show table"}</button></div>
+        ${af.table ? dailyTable(d.daily) : dailyChart(d.daily)}
+      </section>
+      ${d.funnels.map(funnelCard).join("")}
+      <section class="card" style="margin-top:16px" aria-labelledby="h-bylink"><div class="card-head"><h2 id="h-bylink">By link</h2></div>
+        <div class="table-wrap"><table><thead><tr><th>Link</th><th class="num">Calls</th><th class="num">Finished</th><th class="num">Asked for a person</th><th class="num">Spend</th><th class="num">Per finish</th></tr></thead>
+        <tbody>${d.links.map((l) => `<tr><td><b>${esc(l.name)}</b></td><td class="num">${l.calls}</td><td class="num">${pct(l.completionRate)}</td><td class="num">${pct(l.handoffRate)}</td><td class="num">${money(l.spend)}</td><td class="num">${l.costPerCompletion == null ? "—" : money(l.costPerCompletion)}</td></tr>`).join("")}</tbody></table></div>
+      </section>` : `<section class="card">${empty(I.headset, "No finished calls in this period", "Analytics fill in as calls end. Try a longer period, or another product or link.")}</section>`}`;
+  }
+  function dailyChart(daily) {
+    const max = niceMax(Math.max(1, ...daily.map((x) => x.calls)));
+    const ticks = [max, max / 2, 0];
+    const fmtDay = (d) => new Date(`${d}T12:00:00Z`).toLocaleDateString(undefined, { month: "short", day: "numeric" });
+    const every = Math.ceil(daily.length / 8);
+    return `<div class="colchart" role="img" aria-label="Calls per day, ${esc(fmtDay(daily[0].date))} to ${esc(fmtDay(daily.at(-1).date))}. Use Show table for the numbers.">
+      <div class="cc-plot">
+        ${ticks.map((v) => `<div class="cc-grid" style="bottom:${(v / max) * 100}%"><span>${v}</span></div>`).join("")}
+        <div class="cc-cols">${daily.map((x, i) => `<div class="cc-col" tabindex="0" data-tip="${esc(fmtDay(x.date))}|${x.calls}|${x.completed}|${x.handoffs}"><i style="height:${(x.calls / max) * 100}%"></i>${i % every === 0 ? `<span class="cc-x">${esc(fmtDay(x.date))}</span>` : ""}</div>`).join("")}</div>
+      </div><div class="cc-tip" id="ccTip" hidden></div></div>`;
+  }
+  function dailyTable(daily) {
+    return `<div class="table-wrap" style="max-height:320px"><table><thead><tr><th>Day</th><th class="num">Calls</th><th class="num">Finished onboarding</th><th class="num">Asked for a person</th></tr></thead>
+      <tbody>${daily.slice().reverse().map((x) => `<tr><td>${esc(x.date)}</td><td class="num">${x.calls}</td><td class="num">${x.completed}</td><td class="num">${x.handoffs}</td></tr>`).join("")}</tbody></table></div>`;
+  }
+  function funnelCard(f) {
+    return `<section class="card" style="margin-top:16px" aria-labelledby="h-f-${esc(f.product.id)}">
+      <div class="card-head"><div><h2 id="h-f-${esc(f.product.id)}">${esc(f.product.name)}: where people get to</h2><p class="hint" style="margin-top:2px">Share of ${plural(f.calls, "onboarding call")} that got each step done</p></div></div>
+      <ol class="funnel">${f.steps.map((s, i) => `<li class="${f.stuck?.index === i ? "stuck" : ""}">
+        <span class="fn-step"><span class="mono">${i + 1}</span>${esc(s.title)}</span>
+        <span class="fn-bar" aria-hidden="true"><i style="width:${Math.max(0.5, (s.pct || 0) * 100)}%"></i></span>
+        <span class="fn-val mono">${pct(s.pct)}</span>
+        ${f.stuck?.index === i ? `<span class="fn-note">${I.warn}Biggest drop: ${pct(f.stuck.drop)} of calls stop at this step. Add a fact or a clearer how-to for it.</span>` : ""}
+      </li>`).join("")}</ol></section>`;
+  }
+
+  // ═══════════ who's signed in ═══════════
+  const RANK = { specialist: 1, editor: 2, owner: 3 };
+  let ME = { role: "owner", name: "You", id: "local" };
+  const can = (role) => RANK[ME.role] >= RANK[role];
+  const ROLE_TEXT = { owner: "Owner", editor: "Editor", specialist: "Specialist" };
+  const ROLE_HELP = { owner: "Everything, including settings and the team", editor: "Share links, playbooks and calls", specialist: "The inbox and calls: picks up customers who ask for a person" };
+  async function loadMe() {
+    try { ME = (await api("me")).user; } catch {}
+    $$("#nav a[data-role]").forEach((a) => { a.hidden = !can(a.dataset.role); });
+    const show = !ME.local;
+    $("#me").hidden = !show;
+    if (show) {
+      $("#meName").textContent = ME.name; $("#meRole").textContent = ME.shared ? "shared password" : ROLE_TEXT[ME.role];
+      $("#meAvatar").textContent = ME.name.split(/\s+/).map((w) => w[0]).slice(0, 2).join("").toUpperCase();
+    }
+  }
+  const noAccess = (what) => `${head("No access", "Not for your role", "")}${banner("info", `Only ${what} can open this page. Ask an owner if you need it.`)}`;
+
+  // ═══════════ Inbox: customers waiting for a person ═══════════
+  async function inbox() {
+    const d = await api("calls");
+    const rows = d.live.filter((c) => c.handoff).sort((a, b) => (a.handoff.pickedUpBy ? 1 : 0) - (b.handoff.pickedUpBy ? 1 : 0) || String(a.handoff.since).localeCompare(String(b.handoff.since)));
+    const alertsOn = alerts.enabled();
+    return `
+      ${head("Inbox", "Customers waiting for a person", "When a customer taps “Talk to a person”, they show up here. Pick one up to join their call: you see their screen, goal and progress, and Ava steps back.",
+        `<button class="btn ${alertsOn ? "ghost" : "accent"}" data-action="alerts">${alertsOn ? `${I.check}Alerts on` : "Turn on alerts"}</button>`)}
+      <section class="card">${rows.length ? rows.map((c) => {
+        const mine = c.handoff.pickedUpBy && c.handoff.pickedUpBy === ME.name, taken = !!c.handoff.pickedUpBy;
+        return `<div class="waiting ${taken ? "taken" : ""}"><span class="pulse" aria-hidden="true"></span>
+          <div class="waiting-main"><b>${esc(c.platform?.name || "Help with anything")}${c.link ? ` <span class="chip">${esc(c.link.name)}</span>` : ""}</b>
+            <span>${taken ? `Picked up by ${esc(c.handoff.pickedUpBy)}` : `Waiting ${esc(dur(since(c.handoff.since || c.startedAt)))}`}${c.currentStep ? ` · on “${esc(c.currentStep)}”` : ""}${c.workflow ? ` · ${c.workflow.done}/${c.workflow.total} steps` : ""}</span></div>
+          ${taken && !mine ? '<span class="badge ok">with a specialist</span>' : `<button class="btn ${mine ? "ghost" : "accent"} sm" data-action="pickup" data-id="${esc(c.id)}">${I.headset}${mine ? "Rejoin" : "Pick up"}</button>`}
+        </div>`;
+      }).join("") : empty(I.headset, "Nobody's waiting", "You'll see customers here the moment they ask for a person. Turn on alerts to get a sound and a notification, even when this tab is in the background.")}</section>`;
+  }
+  // A sound, a notification and a title badge when someone new starts waiting.
+  const alerts = {
+    enabled: () => { try { return localStorage.getItem("ava.alerts") === "on"; } catch { return false; } },
+    async enable() {
+      try { localStorage.setItem("ava.alerts", "on"); } catch {}
+      if ("Notification" in window && Notification.permission === "default") await Notification.requestPermission().catch(() => {});
+      this.beep();
+    },
+    disable() { try { localStorage.removeItem("ava.alerts"); } catch {} },
+    beep() {
+      try {
+        const ctx = new (window.AudioContext || window.webkitAudioContext)();
+        for (const [f, t] of [[880, 0], [1320, 0.16]]) {
+          const o = ctx.createOscillator(), g = ctx.createGain();
+          o.frequency.value = f; o.connect(g); g.connect(ctx.destination);
+          g.gain.setValueAtTime(0.0001, ctx.currentTime + t); g.gain.exponentialRampToValueAtTime(0.18, ctx.currentTime + t + 0.02); g.gain.exponentialRampToValueAtTime(0.0001, ctx.currentTime + t + 0.3);
+          o.start(ctx.currentTime + t); o.stop(ctx.currentTime + t + 0.32);
+        }
+      } catch {}
+    },
+    seen: null,
+    check(waiting) {
+      const ids = new Set(waiting.map((c) => c.id));
+      const fresh = this.seen ? waiting.filter((c) => !this.seen.has(c.id)) : [];
+      this.seen = ids;
+      document.title = waiting.length ? `(${waiting.length}) ${document.title.replace(/^\(\d+\) /, "")}` : document.title.replace(/^\(\d+\) /, "");
+      if (!fresh.length || !this.enabled()) return;
+      this.beep();
+      if ("Notification" in window && Notification.permission === "granted") {
+        const c = fresh[0];
+        const n = new Notification("A customer is waiting for a person", { body: `${c.platform?.name || "Ava"}${c.currentStep ? `: on “${c.currentStep}”` : ""}`, tag: c.id });
+        n.onclick = () => { window.focus(); go("#inbox"); };
+      }
+    },
+  };
+
+  // ═══════════ Team ═══════════
+  async function team() {
+    if (!can("owner")) return noAccess("owners");
+    const d = await api("team");
+    if (d.first) return `
+      ${head("Team", "Invite your team", "Give everyone their own sign-in, with what they're allowed to do. Start with your own owner account.")}
+      <section class="card card-pad" style="max-width:620px">
+        <h2>Create your owner account</h2>
+        <p class="hint" style="margin:6px 0 18px">After this, everyone signs in at <code>/login</code>, including on this computer.${ME.shared ? " The shared password you used keeps working as an owner login, for scripts." : ""}</p>
+        <form class="stack" id="firstOwner" novalidate>
+          <div class="fgrid">
+            <div class="field"><label for="foName">Your name</label><input id="foName" type="text" maxlength="60" autocomplete="name" required></div>
+            <div class="field"><label for="foEmail">Email</label><input id="foEmail" type="text" inputmode="email" autocomplete="email" required></div>
+            <div class="field wide"><label for="foPass">Password <span class="opt">(at least 10 characters)</span></label><input id="foPass" type="text" class="mono-in" autocomplete="new-password" required></div>
+          </div>
+          <ul class="errors" id="foErrors" role="alert"></ul>
+          <div class="row"><button class="btn accent" type="submit">${I.check}Create owner account</button></div>
+        </form>
+      </section>`;
+    return `
+      ${head("Team", "Team", "Everyone who can sign in, and what they may do.", `<button class="btn accent" data-action="new-member">${I.plus}Add someone</button>`)}
+      ${ME.shared ? banner("info", "You're signed in with the shared password, which counts as an owner. Sign in with your own account to show up by name in the inbox.") : ""}
+      <section class="card"><div class="table-wrap"><table>
+        <thead><tr><th>Person</th><th>Role</th><th>Last signed in</th><th></th></tr></thead>
+        <tbody>${d.users.map((u) => `<tr>
+          <td><div class="who"><span class="avatar" aria-hidden="true">${esc(u.name.split(/\s+/).map((w) => w[0]).slice(0, 2).join("").toUpperCase())}</span><div><b>${esc(u.name)}${u.id === d.me ? ' <span class="chip">you</span>' : ""}</b><div class="meta" style="font-size:13px">${esc(u.email)}</div></div></div></td>
+          <td><label class="sr" for="role-${esc(u.id)}">Role for ${esc(u.name)}</label><select id="role-${esc(u.id)}" data-role-of="${esc(u.id)}" style="width:auto;min-height:36px">${d.roles.map((r) => `<option value="${r}" ${r === u.role ? "selected" : ""}>${ROLE_TEXT[r]}</option>`).join("")}</select></td>
+          <td>${u.lastLoginAt ? esc(ago(u.lastLoginAt)) : '<span class="meta">never</span>'}</td>
+          <td style="text-align:right"><button class="btn ghost sm" data-action="reset-pw" data-id="${esc(u.id)}" data-name="${esc(u.name)}">Reset password</button>
+            <button class="icon-btn danger" data-action="remove-member" data-id="${esc(u.id)}" data-name="${esc(u.name)}" aria-label="Remove ${esc(u.name)}" title="Remove">${I.trash}</button></td>
+        </tr>`).join("")}</tbody></table></div></section>
+      <dl class="card dl" style="margin-top:16px">${Object.entries(ROLE_HELP).map(([r, t]) => `<dt>${ROLE_TEXT[r]}</dt><dd>${esc(t)}</dd>`).join("")}</dl>
+      ${await apiKeysCard()}`;
+  }
+  async function apiKeysCard() {
+    const k = await api("keys");
+    return `<section class="card" style="margin-top:16px" aria-labelledby="h-keys">
+      <div class="card-head"><div><h2 id="h-keys">API keys</h2><p class="hint" style="margin-top:2px">For scripts and tools such as n8n, Zapier or your own backend: everything the dashboard does, with the key's role. <a href="https://github.com/Mr-vero/ava-engine/blob/main/docs/API.md" target="_blank" rel="noopener">API guide</a></p></div>
+        <button class="btn ghost sm" data-action="new-key">${I.plus}New key</button></div>
+      ${k.keys.length ? `<div class="table-wrap"><table><thead><tr><th>Name</th><th>Role</th><th>Key</th><th>Last used</th><th></th></tr></thead><tbody>
+        ${k.keys.map((x) => `<tr><td><b>${esc(x.name)}</b>${x.createdBy ? `<div class="meta" style="font-size:12.5px">by ${esc(x.createdBy)}</div>` : ""}</td><td>${ROLE_TEXT[x.role]}</td><td class="mono" style="font-size:12.5px">${esc(x.prefix)}…</td><td>${x.lastUsedAt ? esc(ago(x.lastUsedAt)) : '<span class="meta">never</span>'}</td>
+          <td style="text-align:right"><button class="btn ghost sm" data-action="revoke-key" data-id="${esc(x.id)}" data-name="${esc(x.name)}">Revoke</button></td></tr>`).join("")}</tbody></table></div>`
+        : `<p class="hint" style="padding:16px 22px">No keys yet.</p>`}</section>`;
+  }
+  function newKeyDrawer() {
+    openDrawer("New API key", `
+      <div class="field"><label for="nkName">What will use it?</label><input id="nkName" type="text" maxlength="60" placeholder="e.g. n8n, our CRM sync"></div>
+      <div class="field"><label for="nkRole">Role</label><select id="nkRole">${["editor", "specialist", "owner"].map((r) => `<option value="${r}">${ROLE_TEXT[r]}: ${ROLE_HELP[r]}</option>`).join("")}</select><p class="hint">Give it the least it needs. Editor fits most automations (links, playbooks, calls).</p></div>
+      <ul class="errors" id="nkErrors" role="alert"></ul>
+      <div class="drawer-foot"><button type="button" class="btn ghost" data-action="close-drawer">Cancel</button><button type="submit" class="btn accent">${I.plus}Create key</button></div>`, async () => {
+      try {
+        const r = await api("keys", { method: "POST", body: { name: $("#nkName").value, role: $("#nkRole").value } });
+        $("#linkForm").innerHTML = `<p>Copy this key now: it won't be shown again. Send it as <code>Authorization: Bearer …</code>.</p>
+          <div class="secret-once"><code style="word-break:break-all">${esc(r.key)}</code><button type="button" class="btn ghost sm" data-action="copy" data-url="${esc(r.key)}">${I.copy}Copy</button></div>
+          <pre class="code">curl ${esc(location.origin)}/api/admin/overview \\\n  -H "Authorization: Bearer ${esc(r.key.slice(0, 11))}…"</pre>
+          <div class="drawer-foot"><button type="button" class="btn accent" data-action="close-drawer">Done</button></div>`;
+        render(false);
+      } catch (err) { $("#nkErrors").innerHTML = (err.errors || [err.message]).map((x) => `<li>${esc(x)}</li>`).join(""); }
+    });
+  }
+  function openDrawer(title, html, onSubmit) {
+    lastFocus = document.activeElement;
+    $("#drawerTitle").textContent = title;
+    $("#drawer .eyebrow").textContent = title.includes("account") ? "You" : "Team";
+    $("#linkForm").innerHTML = html;
+    $("#linkForm").onsubmit = async (e) => { e.preventDefault(); await onSubmit(); };
+    $("#scrim").hidden = false; $("#drawer").hidden = false;
+    $("#linkForm input, #linkForm button")?.focus();
+  }
+  function newMemberDrawer() {
+    openDrawer("Add someone", `
+      <div class="field"><label for="nmName">Name</label><input id="nmName" type="text" maxlength="60" required></div>
+      <div class="field"><label for="nmEmail">Email</label><input id="nmEmail" type="text" inputmode="email" autocomplete="off" required></div>
+      <div class="field"><span class="label" id="nmRoleL">Role</span><div class="choice" style="grid-template-columns:1fr" role="radiogroup" aria-labelledby="nmRoleL">
+        ${["specialist", "editor", "owner"].map((r, i) => `<label><input type="radio" name="nmRole" value="${r}" ${i === 0 ? "checked" : ""}><span><b>${ROLE_TEXT[r]}</b><span>${ROLE_HELP[r]}</span></span></label>`).join("")}</div></div>
+      <ul class="errors" id="nmErrors" role="alert"></ul><div id="nmDone"></div>
+      <div class="drawer-foot"><button type="button" class="btn ghost" data-action="close-drawer">Cancel</button><button type="submit" class="btn accent">${I.plus}Add to team</button></div>`, async () => {
+      try {
+        const r = await api("team", { method: "POST", body: { name: $("#nmName").value, email: $("#nmEmail").value, role: $('input[name="nmRole"]:checked').value } });
+        $("#linkForm").innerHTML = `<p>${esc(r.user.name)} can now sign in at <code>${esc(location.origin)}/login</code> with this one-time password. Share it privately: it won't be shown again, and they can change it under their account.</p>
+          <div class="secret-once"><code id="oncePw">${esc(r.password)}</code><button type="button" class="btn ghost sm" data-action="copy" data-url="${esc(r.password)}">${I.copy}Copy</button></div>
+          <div class="drawer-foot"><button type="button" class="btn accent" data-action="close-drawer">Done</button></div>`;
+        render(false);
+      } catch (err) { $("#nmErrors").innerHTML = (err.errors || [err.message]).map((x) => `<li>${esc(x)}</li>`).join(""); }
+    });
+  }
+  function accountDrawer() {
+    const acct = !ME.local && !ME.shared;
+    openDrawer("Your account", `
+      <dl class="card dl"><dt>Name</dt><dd>${esc(ME.name)}</dd>${ME.email ? `<dt>Email</dt><dd>${esc(ME.email)}</dd>` : ""}<dt>Role</dt><dd>${ME.shared ? "Owner (shared password)" : ROLE_TEXT[ME.role]}</dd></dl>
+      ${acct ? `<h3 style="margin-top:6px">Change your password</h3>
+        <div class="field"><label for="acCur">Current password</label><input id="acCur" type="password" autocomplete="current-password"></div>
+        <div class="field"><label for="acNew">New password <span class="opt">(at least 10 characters)</span></label><input id="acNew" type="password" autocomplete="new-password"></div>
+        <ul class="errors" id="acErrors" role="alert"></ul>
+        <p class="hint">You'll stay signed in here and be signed out everywhere else.</p>
+        <div class="drawer-foot"><button type="button" class="btn ghost" data-action="close-drawer">Close</button><button type="submit" class="btn accent">Change password</button></div>`
+      : `<p class="hint">${ME.shared ? "The shared password is changed by an owner in Settings → Access." : "Nobody signs in on this Ava yet. Add accounts under Team."}</p><div class="drawer-foot"><button type="button" class="btn accent" data-action="close-drawer">Close</button></div>`}`, async () => {
+      if (!acct) return closeDrawer();
+      try { await api("me/password", { method: "POST", body: { current: $("#acCur").value, password: $("#acNew").value } }); closeDrawer(); toast("Password changed"); }
+      catch (err) { $("#acErrors").innerHTML = (err.errors || [err.message]).map((x) => `<li>${esc(x)}</li>`).join(""); }
+    });
+  }
+
+  // ═══════════ router ═══════════
+  const ROUTES = { overview, inbox, calls, analytics: analyticsPage, links, playbooks, team, settings };
+  let pollTimer = null, renderSeq = 0;
+  function go(hash) { if (location.hash === hash) render(true); else location.hash = hash; }
+  async function render(fresh = true) {
+    const [name, ...rest] = (location.hash.slice(1) || "overview").split("/");
+    const sub = rest.join("/");
+    const pageName = ROUTES[name] ? name : "overview";
+    const isEditor = pageName === "playbooks" && /^(new|edit|copy)/.test(sub);
+    $$("#nav a").forEach((a) => (a.dataset.page === pageName ? a.setAttribute("aria-current", "page") : a.removeAttribute("aria-current")));
+    document.title = `Ava · ${pageName[0].toUpperCase() + pageName.slice(1)}`;
+    const seq = ++renderSeq;
+    if (fresh) {
+      const old = page(), el = document.createElement("div");
+      el.id = "page"; el.innerHTML = '<div class="skeleton"></div>';
+      old.replaceWith(el);
+    }
+    try {
+      const gate = { links: "editor", playbooks: "editor", settings: "owner" }[pageName];
+      const html = gate && !can(gate) ? noAccess(gate === "owner" ? "owners" : "owners and editors") : isEditor ? await editor(sub) : await ROUTES[pageName](sub);
+      if (seq !== renderSeq) return; // a newer navigation won
+      const y = window.scrollY;
+      page().innerHTML = html;
+      if (!fresh) window.scrollTo(0, y);
+      if (isEditor) wireEditor();
+      if (fresh) document.getElementById("main").focus({ preventScroll: true });
+    } catch (e) {
+      if (seq !== renderSeq) return;
+      page().innerHTML = banner("err", `<b>Couldn't load this page.</b> ${esc(e.message)}`);
+    }
+    clearTimeout(pollTimer);
+    if (livePage()) pollTimer = setTimeout(function tick() { if (!livePage()) return; if (document.hidden) pollTimer = setTimeout(tick, 4000); else render(false); }, 4000);
+    refreshBadge();
+  }
+  async function refreshBadge() {
+    try {
+      const d = await api("overview");
+      setStatus(d.status);
+      const b = $("#navLive"); b.hidden = !d.today.live; b.textContent = d.today.live; b.setAttribute("aria-label", `${d.today.live} live`);
+      const waiting = d.live.filter((c) => c.handoff && !c.handoff.pickedUpBy);
+      const w = $("#navWaiting"); w.hidden = !waiting.length; w.textContent = waiting.length; w.setAttribute("aria-label", `${waiting.length} waiting`);
+      alerts.check(waiting);
+    } catch {}
+  }
+
+  // ── actions (event delegation; no inline handlers under the CSP) ──
+  document.addEventListener("click", async (e) => {
+    const t = e.target.closest("[data-action], [data-href], [data-af-days]");
+    if (!t) return;
+    if (t.dataset.href) { go(t.dataset.href); return; }
+    if (t.dataset.afDays != null) { af.days = Number(t.dataset.afDays); render(false); return; }
+    const a = t.dataset.action;
+    if (a === "new-link") openLinkDrawer();
+    if (a === "close-drawer") closeDrawer();
+    if (a === "copy") copy(t.dataset.url);
+    if (a === "toggle-link") {
+      const l = linksCache.links.find((x) => x.id === t.dataset.id);
+      try { await api(`links/${l.id}`, { method: "PUT", body: { ...linkBody(l), enabled: !l.enabled } }); toast(l.enabled ? "Link paused" : "Link resumed"); render(false); }
+      catch (err) { toast(err.message, "err"); }
+    }
+    if (a === "delete-link") {
+      const l = linksCache.links.find((x) => x.id === t.dataset.id);
+      if (await confirmBox(`Delete “${l.name}”?`, "The link stops working right away, including for anyone on a call from it. This can't be undone.")) {
+        try { await api(`links/${l.id}`, { method: "DELETE" }); toast("Link deleted"); render(false); } catch (err) { toast(err.message, "err"); }
+      }
+    }
+    if (a === "delete-pb") {
+      if (await confirmBox(`Delete ${t.dataset.name}?`, "Its file is removed and new calls can't use it. Calls already running aren't affected.")) {
+        try { await api(`playbooks/${encodeURIComponent(t.dataset.id)}`, { method: "DELETE" }); toast("Playbook deleted"); render(false); } catch (err) { toast(err.message, "err"); }
+      }
+    }
+    if (a === "add-step") { if ($$("#pbSteps .erow").length >= 10) return toast("Up to 10 steps", "err"); $("#pbSteps").insertAdjacentHTML("beforeend", stepRow({ title: "", how: "" }, $$("#pbSteps .erow").length)); $("#pbSteps .erow:last-child input").focus(); editorChanged(); }
+    if (a === "add-kb") { $("#pbKb").insertAdjacentHTML("beforeend", kbRow({ keywords: "", text: "" })); $("#pbKb .erow:last-child input").focus(); editorChanged(); }
+    if (a === "del-row") { t.closest(".erow").remove(); renumber(); editorChanged(); }
+    if (a === "save-pb") savePlaybook(t);
+    if (a === "export-calls") exportCalls();
+    if (a === "embed-link") embedDrawer(linksCache.links.find((x) => x.id === t.dataset.id));
+    if (a === "af-table") { af.table = !af.table; render(false); }
+    if (a === "draft-ai") draftDrawer();
+    if (a === "lib-preview") libPreview(t.dataset.id);
+    if (a === "lib-install") {
+      if (t.dataset.overwrite && !(await confirmBox("Replace your playbook?", "Your own playbook with this id is replaced by the library's version.", "Replace"))) return;
+      t.disabled = true;
+      try { const r = await api(`library/${t.dataset.id}/install`, { method: "POST", body: { overwrite: !!t.dataset.overwrite } }); closeDrawer(); toast(`${r.playbook.name} installed. Make it yours, then share a link`); render(false); }
+      catch (err) { toast(err.message, "err"); t.disabled = false; }
+    }
+    if (a === "alerts") { if (alerts.enabled()) alerts.disable(); else await alerts.enable(); render(false); }
+    if (a === "pickup") {
+      const tab = window.open("about:blank", "_blank");
+      try { const r = await api(`calls/${t.dataset.id}/pickup`, { method: "POST", body: {} }); if (tab) { tab.opener = null; tab.location = r.joinPath; } else location.assign(r.joinPath); render(false); }
+      catch (err) { tab?.close(); toast(err.message, "err"); render(false); }
+    }
+    if (a === "new-member") newMemberDrawer();
+    if (a === "new-key") newKeyDrawer();
+    if (a === "revoke-key") {
+      if (await confirmBox(`Revoke “${t.dataset.name}”?`, "Anything using this key stops working right away.", "Revoke")) {
+        try { await api(`keys/${t.dataset.id}`, { method: "DELETE" }); toast("Key revoked"); render(false); } catch (err) { toast(err.message, "err"); }
+      }
+    }
+    if (a === "account") accountDrawer();
+    if (a === "signout") { await fetch("/api/auth/logout", { method: "POST", headers: { "Content-Type": "application/json" }, body: "{}" }); location.replace("/login"); }
+    if (a === "reset-pw") {
+      if (await confirmBox(`Reset ${t.dataset.name}'s password?`, "They're signed out everywhere and get a new one-time password from you.", "Reset")) {
+        try { const r = await api(`team/${t.dataset.id}/password`, { method: "POST", body: {} }); openDrawer("New password", `<p>Give ${esc(t.dataset.name)} this one-time password privately. It won't be shown again.</p><div class="secret-once"><code>${esc(r.password)}</code><button type="button" class="btn ghost sm" data-action="copy" data-url="${esc(r.password)}">${I.copy}Copy</button></div><div class="drawer-foot"><button type="button" class="btn accent" data-action="close-drawer">Done</button></div>`, closeDrawer); }
+        catch (err) { toast(err.message, "err"); }
+      }
+    }
+    if (a === "remove-member") {
+      if (await confirmBox(`Remove ${t.dataset.name}?`, "They can't sign in any more. Their past pickups stay in the call history.", "Remove")) {
+        try { await api(`team/${t.dataset.id}`, { method: "DELETE" }); toast(`${t.dataset.name} removed`); render(false); } catch (err) { toast(err.message, "err"); }
+      }
+    }
+    if (a === "delete-call") {
+      if (await confirmBox("Delete this call?", "Its numbers and transcript are removed for good. Use this for a customer's deletion request.")) {
+        try { await api(`calls/${t.dataset.id}`, { method: "DELETE" }); toast("Call deleted"); go("#calls/history"); } catch (err) { toast(err.message, "err"); }
+      }
+    }
+    if (a === "delete-transcripts") {
+      if (await confirmBox("Delete every transcript?", "All saved conversations and recaps are removed for good. Call numbers stay.", "Delete all")) {
+        try { await api("transcripts", { method: "DELETE" }); toast("Transcripts deleted"); } catch (err) { toast(err.message, "err"); }
+      }
+    }
+    if (a === "secret-edit") { const i = $(`#set-${t.dataset.key}`); i.hidden = false; i.focus(); }
+    if (a === "secret-clear") { draft[t.dataset.key] = ""; render(false); }
+    if (a === "secret-undo") { delete draft[t.dataset.key]; render(false); }
+    if (a === "settings-discard") { draft = {}; render(false); }
+    if (a === "settings-save") saveSettings(t);
+    if (a === "connect-or") {
+      const tab = window.open("about:blank", "_blank");
+      try { const { url } = await api("openrouter/start", { method: "POST", body: {} }); if (tab) { tab.opener = null; tab.location = url; } else location.assign(url); toast("Approve in the OpenRouter tab, then come back"); }
+      catch (err) { tab?.close(); toast(err.message, "err"); }
+    }
+    if (a === "test-hooks") {
+      t.disabled = true;
+      try { const r = await api("webhooks/test", { method: "POST", body: {} }); toast(`Delivered to ${r.delivered} of ${r.sent}`, r.delivered === r.sent ? "" : "err"); }
+      catch (err) { toast(err.message, "err"); } finally { t.disabled = false; }
+    }
+  });
+  $("#scrim").addEventListener("click", closeDrawer);
+  $("#drawerClose").addEventListener("click", closeDrawer);
+  document.addEventListener("keydown", (e) => {
+    if (e.key === "Escape" && !$("#drawer").hidden) closeDrawer();
+    if (e.key === "Tab" && !$("#drawer").hidden) { // keep focus inside the drawer
+      const f = $$("#drawer button, #drawer input, #drawer select, #drawer textarea, #drawer a[href]").filter((x) => !x.disabled && x.offsetParent);
+      if (!f.length) return;
+      if (e.shiftKey && document.activeElement === f[0]) { e.preventDefault(); f.at(-1).focus(); }
+      else if (!e.shiftKey && document.activeElement === f.at(-1)) { e.preventDefault(); f[0].focus(); }
+    }
+  });
+  window.addEventListener("hashchange", () => { if (!/^#links\/(new|edit)/.test(location.hash) || !$("#page .lcard, #page .empty")) render(true); else render(false); });
+  // Only the live pages refresh themselves; never re-render a form someone is filling in.
+  const livePage = () => ["overview", "calls", "inbox"].includes((location.hash.slice(1) || "overview").split("/")[0]) && !/^#calls\/[0-9a-f-]{36}/.test(location.hash);
+  document.addEventListener("visibilitychange", () => {
+    if (document.hidden) return;
+    if (livePage()) render(false);
+    else if (location.hash.startsWith("#settings") && !Object.keys(draft).length) render(false); // e.g. back from Connect OpenRouter
+  });
+  loadMe().then(() => render(true));
+  setInterval(() => { if (!livePage()) refreshBadge(); }, 5000); // the inbox badge and alerts, on every page
+})();