sagadeck 1.2.0

package/src/runtime/api-ui.js

@@ -0,0 +1,966 @@
+// Slide "api" na apresentação: Executar (síncrono, polling, streaming), ambiente, código que acende
+// junto com a fase que está rodando, variáveis entre slides (save:) e a última resposta gravada.
+// Os pedidos saem do Studio (api/http/*), nunca direto do navegador. Sem o Studio (HTML exportado,
+// servidor multiusuário), o slide reproduz a gravação.
+(function () {
+  "use strict";
+  const C = window.SagadeckApiCore;
+  const roots = Array.from(document.querySelectorAll(".L-api[data-api]"));
+  if (!C || !roots.length) return;
+
+  const $ = (s, r) => (r || document).querySelector(s);
+  const $$ = (s, r) => Array.from((r || document).querySelectorAll(s));
+  const esc = (s) => String(s == null ? "" : s).replace(/[&<>"']/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" }[c]));
+  const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
+  const fmtMs = (ms) => (ms >= 1000 ? (ms / 1000).toFixed(1).replace(".", ",") + " s" : Math.round(ms) + " ms");
+  const fmtSize = (n) => (n >= 1024 ? (n / 1024).toFixed(1).replace(".", ",") + " KB" : n + " B");
+  const when = (iso) => { try { return new Date(iso).toLocaleString("pt-BR", { day: "2-digit", month: "2-digit", hour: "2-digit", minute: "2-digit" }); } catch { return ""; } };
+
+  const EMBED = (() => { try { return JSON.parse(($("#sagadeck-api-rec") || {}).textContent || "{}"); } catch { return {}; } })();
+  let STATE = { live: false, envs: [], current: null, recordings: EMBED, reason: "Sem o Studio: mostrando a última resposta gravada." };
+
+  // variáveis guardadas por slides anteriores (save:), só nesta sessão do navegador
+  const deckId = (window.sagadeck && window.sagadeck.data && window.sagadeck.data.id) || location.pathname;
+  const VKEY = "sagadeck-api-vars:" + deckId;
+  const saved = (() => { try { return JSON.parse(sessionStorage.getItem(VKEY) || "{}"); } catch { return {}; } })();
+  // de qual slide veio cada valor guardado, e o último token JWT visto (só os 4 últimos caracteres e a validade)
+  const meta = (() => { try { return JSON.parse(sessionStorage.getItem(VKEY + ":meta") || "{}"); } catch { return {}; } })();
+  meta.from = meta.from || {};
+  const persist = () => { try { sessionStorage.setItem(VKEY, JSON.stringify(saved)); sessionStorage.setItem(VKEY + ":meta", JSON.stringify(meta)); } catch {} };
+  const slideNo = (root) => { const s = root.closest(".slide"); return s ? Number(s.dataset.idx) + 1 : null; };
+  const envVars = () => ((STATE.envs || []).find((e) => e.name === STATE.current) || {}).vars || {};
+  const vars = () => Object.assign({}, envVars(), saved);
+
+  async function call(path, body) {
+    const r = await fetch(path, body ? { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(body) } : { cache: "no-store" });
+    const j = await r.json().catch(() => ({}));
+    if (!r.ok) { const e = new Error(j.error || "HTTP " + r.status); e.kind = j.kind; throw e; }
+    return j;
+  }
+
+  // ---------- JSON colorido ----------
+  function jsonHTML(v) {
+    const txt = typeof v === "string" ? v : JSON.stringify(v, null, 2);
+    if (typeof v === "string") return esc(txt);
+    const re = /("(?:\\.|[^"\\])*")(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?/g;
+    let out = "", last = 0, m;
+    while ((m = re.exec(txt))) {
+      out += esc(txt.slice(last, m.index));
+      if (m[1]) out += `<span class="${m[2] ? "jk" : "js"}">${esc(m[1])}</span>${m[2] || ""}`;
+      else out += `<span class="${m[3] ? "jb" : "jn"}">${esc(m[0])}</span>`;
+      last = re.lastIndex;
+    }
+    return out + esc(txt.slice(last));
+  }
+
+  // ---------- montagem ----------
+  function readReq(root) {
+    const cfg = root._cfg;
+    const url = $("[data-api-url]", root).value.trim();
+    const bodyEl = $("[data-api-body]", root);
+    const bodyTxt = bodyEl ? bodyEl.value : "";
+    let body;
+    if (bodyTxt.trim() !== "" && !cfg.request.form) { // upload: a aba Corpo só mostra os campos do formulário
+      try { body = JSON.parse(bodyTxt); }
+      catch (e) {
+        if (typeof cfg.request.body === "string") body = bodyTxt;
+        else throw new Error("O corpo não é um JSON válido: " + e.message);
+      }
+    }
+    const headers = {};
+    (($("[data-api-headers]", root) || {}).value || "").split("\n").forEach((l) => { const i = l.indexOf(":"); if (i > 0) headers[l.slice(0, i).trim()] = l.slice(i + 1).trim(); });
+    return Object.assign({}, cfg.request, { url, body: cfg.request.form ? undefined : body, headers });
+  }
+
+  function paintCode(root) {
+    const cfg = root._cfg;
+    let req;
+    try { req = readReq(root); } catch { req = cfg.request; }
+    const a = Object.assign({}, cfg, { request: req });
+    if (cfg.similarity) {
+      const ref = $("[data-api-ref]", root), txt = $("[data-api-texts]", root);
+      a.similarity = Object.assign({}, cfg.similarity, { reference: ref ? ref.value : cfg.similarity.reference, texts: txt ? txt.value.split("\n").map((t) => t.trim()).filter(Boolean) : cfg.similarity.texts });
+    }
+    $$(".api-code", root).forEach((pane) => {
+      const out = C.code(a, pane.dataset.pane, Object.assign(vars(), root._file ? { "file.name": root._file.name } : {}));
+      const cm = new Set(out.comments);
+      pane._marks = out.marks;
+      pane.innerHTML = out.code.split("\n").map((l, i) => `<div class="cl${cm.has(i + 1) ? " cm" : ""}" data-ln="${i + 1}"><span class="cn">${i + 1}</span><span class="cc">${esc(l) || " "}</span></div>`).join("");
+    });
+    $$("[data-field]", root).forEach((tr) => { const v = req.body === undefined ? undefined : C.get(req.body, tr.dataset.field); const td = $(".api-fv", tr); if (td) td.textContent = v === undefined ? "—" : JSON.stringify(v); });
+    // o endereço de verdade, embaixo do que tem {{variáveis}}
+    const res = $("[data-api-resolved]", root);
+    if (res) {
+      const r = C.render(req.url, vars());
+      res.textContent = r !== req.url && !C.missing(r, {}).length ? r : "";
+    }
+    if (root._phase) light(root, root._phase);
+  }
+
+  // acende as linhas do código que correspondem à fase que está rodando (start / poll / done)
+  function light(root, phase) {
+    root._phase = phase;
+    $$(".api-code", root).forEach((pane) => {
+      const lines = new Set(((pane._marks || {})[phase]) || []);
+      let first = null;
+      $$(".cl", pane).forEach((l) => { const on = lines.has(+l.dataset.ln); l.classList.toggle("run", on); if (on && !first) first = l; });
+      if (first && !pane.hidden) pane.scrollTop = Math.max(0, first.offsetTop - pane.clientHeight / 4);
+    });
+  }
+  function pulse(root) {
+    $$(".api-code .cl.run", root).forEach((l) => { l.classList.remove("pulse"); void l.offsetWidth; l.classList.add("pulse"); });
+  }
+
+  function showTab(root, tab) {
+    $$("[data-tab]", root).forEach((b) => b.setAttribute("aria-selected", String(b.dataset.tab === tab)));
+    $$("[data-pane]", root).forEach((p) => { p.hidden = p.dataset.pane !== tab; });
+    if (root._phase) light(root, root._phase);
+  }
+
+  function paintEnv(root) {
+    const btn = $("[data-api-env]", root);
+    const rec = STATE.recordings[root._cfg.key];
+    let name, kind, title;
+    if (!STATE.live) { name = rec ? "gravado" : "sem Studio"; kind = "off"; title = STATE.reason || ""; }
+    else if (!(STATE.envs || []).length) { name = "sem ambiente"; kind = "off"; title = STATE.error || `Crie ${STATE.file || "~/.sagadeck/ambientes.yaml"} com os ambientes (dev, hom…)`; }
+    else { name = STATE.current; kind = C.envKind(name); title = "Ambiente: clique para trocar"; }
+    btn.dataset.kind = kind;
+    btn.title = title;
+    $(".api-env-name", btn).textContent = String(name).toUpperCase();
+    label(root, !STATE.live && rec ? "Reproduzir gravação" : root._cfg.realtime ? (root._rt ? "Desconectar" : "Conectar") : "Executar");
+  }
+
+  function label(root, t) { const sp = $("[data-api-run] span", root); if (sp) sp.textContent = t; }
+
+  function envMenu(root, btn) {
+    const old = $(".api-menu", root);
+    if (old) { old.remove(); return; }
+    if (!STATE.live || (STATE.envs || []).length < 1) { showError(root, btn.title || STATE.reason || "Sem ambientes."); return; }
+    const m = document.createElement("div");
+    m.className = "api-menu";
+    m.innerHTML = STATE.envs.map((e) => `<button type="button" data-env="${esc(e.name)}" data-kind="${C.envKind(e.name)}" aria-current="${e.name === STATE.current}"><span class="api-env-dot"></span>${esc(e.name.toUpperCase())}<small>${esc(Object.values(e.vars || {})[0] || "")}</small></button>`).join("");
+    $(".api-bar", root).appendChild(m);
+    m.onclick = async (ev) => {
+      const b = ev.target.closest("[data-env]");
+      if (!b) return;
+      m.remove();
+      try { const st = await call("api/http/env", { name: b.dataset.env }); STATE = Object.assign({}, STATE, st); } catch (e) { showError(root, e.message); }
+      roots.forEach((r) => { paintEnv(r); paintCode(r); });
+    };
+  }
+
+  // ---------- resposta ----------
+  function out(root) { return $(".api-out", root); }
+  function status(root, html) { $(".api-status", root).innerHTML = html; }
+  function clearOut(root) { out(root).innerHTML = ""; status(root, ""); }
+
+  function statusBar(r, extra) {
+    const ok = r.status < 400;
+    return `<span class="api-pill ${ok ? "ok" : "err"}">${esc(r.status)} ${esc(r.statusText || "")}</span>` +
+      (r.ms != null ? `<span class="api-meta">${fmtMs(r.ms)}</span>` : "") +
+      (r.size != null ? `<span class="api-meta">${fmtSize(r.size)}</span>` : "") + (extra || "");
+  }
+
+  function stepCards(cfg, body) {
+    const list = cfg.steps ? C.get(body, cfg.steps) : null;
+    if (!Array.isArray(list) || !list.length) return "";
+    return `<div class="api-steps">${list.map((st, i) => {
+      const title = cfg.stepTitle ? C.get(st, cfg.stepTitle) : (st && (st.name || st.step || st.service || st.type)) || `Etapa ${i + 1}`;
+      const val = cfg.stepText ? C.get(st, cfg.stepText) : st;
+      const txt = typeof val === "string" ? esc(val) : `<pre>${jsonHTML(val)}</pre>`;
+      return `<div class="api-step" style="--i:${i}"><div class="api-step-n f-label">${String(i + 1).padStart(2, "0")}</div><div class="api-step-t">${esc(title)}</div><div class="api-step-x">${txt}</div></div>`;
+    }).join('<div class="api-step-arrow" aria-hidden="true"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M12 5l7 7-7 7"/></svg></div>')}</div>`;
+  }
+
+  // ---------- áudio: tocar a resposta (TTS) com a onda desenhada ----------
+  function playAudio(root, box, audio) {
+    const cv = $("canvas", box), ctx = cv.getContext("2d");
+    const el = $("audio", box);
+    const draw = (data) => {
+      const w = (cv.width = cv.clientWidth * 2), h = (cv.height = cv.clientHeight * 2);
+      ctx.clearRect(0, 0, w, h);
+      const n = 64, bw = w / n;
+      for (let i = 0; i < n; i++) {
+        const v = data ? data[Math.floor((i / n) * data.length)] / 255 : 0.08;
+        const bh = Math.max(4, v * h * 0.9);
+        ctx.fillStyle = "#9fc3ff";
+        ctx.fillRect(i * bw + 2, (h - bh) / 2, bw - 4, bh);
+      }
+    };
+    draw(null);
+    try {
+      const AC = window.AudioContext || window.webkitAudioContext;
+      const ac = root._ac || (root._ac = new AC());
+      const src = ac.createMediaElementSource(el), an = ac.createAnalyser();
+      an.fftSize = 256;
+      src.connect(an); an.connect(ac.destination);
+      const data = new Uint8Array(an.frequencyBinCount);
+      const tick = () => { an.getByteFrequencyData(data); draw(data); if (!el.paused) requestAnimationFrame(tick); else draw(null); };
+      el.addEventListener("play", () => { ac.resume(); requestAnimationFrame(tick); });
+    } catch {}
+    el.play().catch(() => {});
+  }
+
+  function showResult(root, r, badge) {
+    const cfg = root._cfg;
+    status(root, statusBar(r, badge));
+    if (r.body && r.body._audio) {
+      let box = $(".api-result", root);
+      if (!box) { box = document.createElement("div"); box.className = "api-result"; out(root).appendChild(box); }
+      box.innerHTML = `<div class="api-audio"><canvas></canvas><audio controls src="data:${esc(r.body.type)};base64,${r.body.base64}"></audio></div>`;
+      playAudio(root, $(".api-audio", box));
+      return;
+    }
+    const ans = cfg.answer && r.body && typeof r.body === "object" ? C.get(r.body, cfg.answer) : undefined;
+    const jsonText = typeof r.body === 'string' ? r.body : JSON.stringify(r.body, null, 2);
+    const large = jsonText && jsonText.length > 12000;
+    const html = (ans != null ? `<div class="api-answer"><div class="f-label">${esc(cfg.answer.replace(/^\$\.?/, ""))}</div><div class="api-answer-t">${esc(typeof ans === "string" ? ans : JSON.stringify(ans))}</div></div>` : "") +
+      stepCards(cfg, r.body) +
+      (large ? '<p class="api-hint">Prévia do payload. Abra o explorador para acessar a resposta completa.</p>' : '') +
+      `<pre class="api-json f-mono">${large ? esc(jsonText.slice(0,12000)) : jsonHTML(r.body)}</pre>`;
+    let box = $(".api-result", root);
+    if (!box) { box = document.createElement("div"); box.className = "api-result"; out(root).appendChild(box); }
+    box.innerHTML = (r.jwt ? jwtHTML(r.jwt) : "") + '<button type="button" class="api-explore-json">Explorar resposta completa</button>' + html;
+    $(".api-explore-json", box).onclick = () => exploreJSON(r.body);
+    if (r.jwt && r.jwt.exp) countdown(root, r.jwt.exp);
+    if (r.jwt && r.jwt.last4) { meta.token = { last4: r.jwt.last4, exp: r.jwt.exp || null, slide: slideNo(root) }; persist(); }
+    LAST = { body: r.body, slide: slideNo(root) };
+  }
+
+  // ---------- painel Variáveis: tudo o que está valendo agora, num lugar só (como o inspect/watch de um depurador) ----------
+  // Ambiente: variáveis (editáveis) e protegidas (só o nome e ••••; o olhinho mostra por alguns segundos). Token: nunca o
+  // valor (•••• + 4 finais + validade). Guardadas pelos slides (save:), dizendo de qual slide veio; clique para inspecionar.
+  // Observar: expressões que ficam à vista ({{nome}} ou $.caminho na última resposta). Rodapé: onde o arquivo está salvo.
+  const WKEY = "sagadeck-api-watch:" + deckId;
+  const watches = (() => { try { return JSON.parse(localStorage.getItem(WKEY) || "[]"); } catch { return []; } })();
+  const saveWatches = () => { try { localStorage.setItem(WKEY, JSON.stringify(watches)); } catch {} };
+  const EYE = '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12Z" fill="none" stroke="currentColor" stroke-width="2"/><circle cx="12" cy="12" r="3" fill="none" stroke="currentColor" stroke-width="2"/></svg>';
+  const DEL = '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3 6h18M8 6V4h8v2M6 6l1 14h10l1-14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>';
+  let LAST = null; // última resposta (para $.caminho em Observar)
+  function watchValue(expr) {
+    const m = /^\{\{\s*([\w.]+)\s*\}\}$/.exec(expr);
+    if (m) { const v = vars()[m[1]]; return v == null ? "(não existe)" : v; }
+    if (/^\$/.test(expr)) { if (!LAST) return "(nenhuma resposta ainda)"; const v = C.get(LAST.body, expr); return v == null ? `(não existe na resposta do slide ${LAST.slide})` : v; }
+    return "(use {{nome}} ou $.caminho)";
+  }
+  function varsPanel(root) {
+    const old = $(".api-vars-panel", root);
+    if (old) { clearInterval(old._tick); old.remove(); return; }
+    const p = document.createElement("div");
+    p.className = "api-vars-panel";
+    const shown = {}; // protegidas reveladas agora: nome -> valor (some sozinho)
+    const fmt = (v) => esc(String(v != null && typeof v === "object" ? JSON.stringify(v) : v).slice(0, 90));
+    const row = (k, v, extra = "") => `<div class="av-row"><code>{{${esc(k)}}}</code><span class="av-v">${fmt(v)}</span>${extra}</div>`;
+    const msg = (t) => { const e = $(".av-msg", p); if (e) e.textContent = t || ""; };
+    const act = async (path, body) => {
+      try { msg(path.endsWith("set") && body.protected ? "Cifrando e salvando…" : ""); const st = await call(path, body); STATE = Object.assign({}, STATE, st); roots.forEach(paintCode); paint(); }
+      catch (e) { msg(e.message); }
+    };
+    const paint = () => {
+      const env = (STATE.envs || []).find((e) => e.name === STATE.current) || {};
+      const own = !env.builtin;
+      const del = (k) => own ? `<button type="button" class="av-ic" data-var-del="${esc(k)}" title="Apagar">${DEL}</button>` : "";
+      const envRows = Object.entries(env.vars || {}).map(([k, v]) => row(k, v, del(k))).join("")
+        + (env.secrets || []).map((k) => row(`secret.${k}`, k in shown ? shown[k] : "•••• protegida",
+          `<button type="button" class="av-ic" data-var-eye="${esc(k)}" title="Mostrar por 15 segundos">${EYE}</button>${del(k)}`)).join("");
+      const t = meta.token, left = t && t.exp ? Math.max(0, Math.round(t.exp - Date.now() / 1000)) : null;
+      const tok = t ? `<div class="av-row"><code>token</code><span class="av-v">••••${esc(t.last4)} ${left == null ? "" : left ? `expira em ${String(Math.floor(left / 60)).padStart(2, "0")}:${String(left % 60).padStart(2, "0")}` : "expirou"}</span>${t.slide ? `<small>slide ${esc(t.slide)}</small>` : ""}</div>`
+        : `<div class="av-row av-empty">${env.token ? "pedido sozinho ao executar (token do ambiente)" : "nenhum token ainda"}</div>`;
+      const mine = Object.keys(saved);
+      const form = own ? `<div class="av-form"><input data-var-name placeholder="nome (ex.: modelo)" aria-label="Nome da variável"><input data-var-value placeholder="valor" aria-label="Valor"><label title="Protegida: não aparece na tela (só pelo olhinho) e é gravada cifrada"><input type="checkbox" data-var-protected> protegida</label><button type="button" data-var-add>Adicionar</button></div>`
+        : `<div class="av-row av-empty">${esc(String(STATE.current || "").toUpperCase())} é um ambiente de exemplo: para guardar variáveis, crie um ambiente seu em Ambientes.</div>`;
+      p.innerHTML = `<div class="av-sec"><b>Ambiente ${esc(String(STATE.current || "").toUpperCase())}</b>${envRows || '<div class="av-row av-empty">sem variáveis</div>'}${form}</div>`
+        + `<div class="av-sec av-tok"><b>Token</b>${tok}</div>`
+        + `<div class="av-sec"><b>Guardadas pelos slides</b>${mine.length ? mine.map((k) => row(k, saved[k], `${meta.from[k] ? `<small>slide ${esc(meta.from[k])}</small>` : ""}<button type="button" class="av-ic" data-var-inspect="${esc(k)}" title="Inspecionar">{ }</button>`)).join("") : '<div class="av-row av-empty">nenhuma ainda (use save: num slide)</div>'}`
+        + (mine.length ? `<button type="button" class="av-clear" data-vars-clear>Limpar o que os slides guardaram</button>` : "") + `</div>`
+        + `<div class="av-sec av-watch"><b>Observar</b>${watches.map((w, i) => `<div class="av-row"><code>${esc(w)}</code><span class="av-v">${fmt(watchValue(w))}</span><button type="button" class="av-ic" data-watch-del="${i}" title="Parar de observar">${DEL}</button></div>`).join("")}`
+        + `<div class="av-form"><input data-watch-expr placeholder="{{nome}} ou $.caminho da última resposta" aria-label="Expressão para observar"><button type="button" data-watch-add>Observar</button></div></div>`
+        + `<div class="av-foot"><span>Salvo em <code>${esc(STATE.file || "~/.sagadeck/ambientes.yaml")}</code>${STATE.protection === "dpapi" ? " (protegidas cifradas: só o seu usuário do Windows lê)" : ""}</span><button type="button" data-vars-folder>Abrir a pasta</button></div>`
+        + `<div class="av-msg" role="status"></div>`;
+      const on = (sel, fn) => $$(sel, p).forEach((b) => { b.onclick = () => fn(b); });
+      on("[data-var-add]", () => { const name = $("[data-var-name]", p).value.trim(), value = $("[data-var-value]", p).value; if (!name) return msg("Dê um nome para a variável."); act("api/http/vars/set", { name, value, protected: $("[data-var-protected]", p).checked }); });
+      on("[data-var-del]", (b) => act("api/http/vars/delete", { name: b.dataset.varDel }));
+      on("[data-var-eye]", async (b) => {
+        const k = b.dataset.varEye;
+        if (k in shown) { delete shown[k]; return paint(); }
+        try { shown[k] = (await call("api/http/vars/reveal", { name: k })).value; paint(); setTimeout(() => { delete shown[k]; if (p.isConnected) paint(); }, 15000); } catch (e) { msg(e.message); }
+      });
+      on("[data-var-inspect]", (b) => exploreJSON(saved[b.dataset.varInspect]));
+      on("[data-vars-clear]", () => { Object.keys(saved).forEach((k) => delete saved[k]); meta.from = {}; delete meta.token; persist(); roots.forEach(paintCode); paint(); });
+      on("[data-watch-add]", () => { const e = $("[data-watch-expr]", p).value.trim(); if (e && !watches.includes(e)) { watches.push(e); saveWatches(); } paint(); });
+      on("[data-watch-del]", (b) => { watches.splice(Number(b.dataset.watchDel), 1); saveWatches(); paint(); });
+      on("[data-vars-folder]", async () => { try { const r = await call("api/http/vars/folder", {}); msg(`Pasta: ${r.dir}`); } catch (e) { msg(e.message); } });
+      // digitar nos campos não avança a apresentação
+      $$("input", p).forEach((i) => i.addEventListener("keydown", (e) => { e.stopPropagation(); if (e.key === "Enter") ($("[data-var-add]", i.closest(".av-form")) || $("[data-watch-add]", i.closest(".av-form")))?.click(); }));
+    };
+    const paintTokenOnly = (box) => {
+      const env = (STATE.envs || []).find((e) => e.name === STATE.current) || {};
+      const t = meta.token, left = t && t.exp ? Math.max(0, Math.round(t.exp - Date.now() / 1000)) : null;
+      const tok = t ? `<div class="av-row"><code>token</code><span class="av-v">••••${esc(t.last4)} ${left == null ? "" : left ? `expira em ${String(Math.floor(left / 60)).padStart(2, "0")}:${String(left % 60).padStart(2, "0")}` : "expirou"}</span>${t.slide ? `<small>slide ${esc(t.slide)}</small>` : ""}</div>`
+        : `<div class="av-row av-empty">${env.token ? "pedido sozinho ao executar (token do ambiente)" : "nenhum token ainda"}</div>`;
+      box.innerHTML = `<b>Token</b>${tok}`;
+    };
+    paint();
+    // a contagem do token anda sozinha: só a linha do token muda (redesenhar o painel inteiro a cada segundo trocava
+    // os botões debaixo do mouse e o clique se perdia)
+    p._tick = setInterval(() => {
+      if (!p.isConnected) return clearInterval(p._tick);
+      if (!(meta.token && meta.token.exp)) return;
+      const box = $(".av-tok", p), fresh = document.createElement("div");
+      const keep = box && box.innerHTML;
+      paintTokenOnly(fresh);
+      if (box && fresh.innerHTML !== keep) box.innerHTML = fresh.innerHTML;
+    }, 1000);
+    $(".api-bar", root).appendChild(p);
+  }
+
+  // Árvore preguiçosa: payloads grandes não precisam de milhares de nós DOM logo na abertura.
+  function exploreJSON(value) {
+    const dialog = document.createElement('dialog'); dialog.className = 'api-json-dialog';
+    dialog.innerHTML = '<header><b>Resposta completa</b><button type="button" data-download>Baixar JSON</button><button type="button" data-close>Fechar</button></header><label>Campo da resposta <input placeholder="$.responses.0.output" aria-label="Caminho no JSON"></label><div class="api-json-tree"></div>';
+    const tree = dialog.querySelector('.api-json-tree');
+    function node(key,v) {
+      if (v === null || typeof v !== 'object') { const p=document.createElement('pre');p.textContent=key+': '+JSON.stringify(v);return p; }
+      const d=document.createElement('details'), summary=document.createElement('summary');summary.textContent=key+' · '+Object.keys(v).length+(Array.isArray(v)?' itens':' campos');d.append(summary);
+      d.ontoggle=()=>{if(!d.open || d.dataset.loaded)return;d.dataset.loaded='true';const keys=Object.keys(v);let offset=0;const more=document.createElement('button');more.textContent='Carregar mais 100 itens';more.type='button';const next=()=>{keys.slice(offset,offset+100).forEach(k=>d.insertBefore(node(k,v[k]),more));offset+=100;more.hidden=offset>=keys.length;};more.onclick=next;d.append(more);next();};return d;
+    }
+    function show(v) {tree.replaceChildren(node('$',v));const details=tree.querySelector('details');if(details)details.open=true;}
+    dialog.querySelector('input').oninput=e=>{const path=e.target.value.trim();const found=path?C.get(value,path):value;if(found===undefined)tree.textContent='Campo não encontrado.';else show(found);};
+    dialog.querySelector('[data-close]').onclick=()=>dialog.close();
+    dialog.querySelector('[data-download]').onclick=()=>{const url=URL.createObjectURL(new Blob([JSON.stringify(value,null,2)],{type:'application/json'}));const a=document.createElement('a');a.href=url;a.download='resposta.json';a.click();setTimeout(()=>URL.revokeObjectURL(url),1000);};
+    dialog.addEventListener('keydown',e=>e.stopPropagation());dialog.addEventListener('close',()=>dialog.remove());document.body.append(dialog);show(value);dialog.showModal();
+  }
+
+  function jwtHTML(j) {
+    if (!j.isJwt) return `<div class="api-answer"><div class="f-label">token gerado</div><div class="api-answer-t">••••${esc(j.last4)} · os próximos slides usam este token</div></div>`;
+    return `<div class="api-answer"><div class="f-label">token JWT gerado · os próximos slides usam este</div><div class="api-answer-t">••••${esc(j.last4)} <span class="api-countdown" data-exp="${j.exp || ""}"></span></div></div>
+      <div class="api-jwt"><div><div class="f-label">cabeçalho</div><pre>${jsonHTML(j.header)}</pre></div><div><div class="f-label">conteúdo (payload)</div><pre>${jsonHTML(j.payload)}</pre></div></div>`;
+  }
+  function countdown(root, exp) {
+    clearInterval(root._cd);
+    const tick = () => {
+      const el = $(".api-countdown", root);
+      if (!el) return clearInterval(root._cd);
+      const left = Math.max(0, Math.round(exp - Date.now() / 1000));
+      el.textContent = left ? `expira em ${String(Math.floor(left / 60)).padStart(2, "0")}:${String(left % 60).padStart(2, "0")}` : "expirou";
+    };
+    tick();
+    root._cd = setInterval(tick, 1000);
+  }
+
+  // arquivo arrastado ou escolhido na hora (vai em base64 para o Studio)
+  function pickFile(root, f) {
+    if (!f) return;
+    const rd = new FileReader();
+    rd.onload = () => {
+      root._file = { name: f.name, type: f.type || "", base64: String(rd.result).split(",")[1] || "" };
+      const n = $(".api-file-name", root); if (n) n.textContent = f.name;
+      paintCode(root);
+    };
+    rd.readAsDataURL(f);
+  }
+
+  // ---------- microfone (STT): grava, mostra o nível e envia ao parar ----------
+  async function toggleMic(root) {
+    const btn = $("[data-api-mic]", root), cv = $(".api-level", root);
+    if (root._rec) { root._rec.stop(); return; }
+    let stream;
+    try { stream = await navigator.mediaDevices.getUserMedia({ audio: true }); }
+    catch (e) { clearOut(root); showError(root, "Não consegui usar o microfone: " + (e.message || e.name) + ". (Só funciona pelo Studio, em 127.0.0.1, com permissão do navegador.)"); return; }
+    const chunks = [];
+    const rec = new MediaRecorder(stream);
+    root._rec = rec;
+    btn.classList.add("rec"); $("span", btn).textContent = "Parar";
+    cv.hidden = false;
+    let raf;
+    try {
+      const ac = new (window.AudioContext || window.webkitAudioContext)();
+      const an = ac.createAnalyser(); an.fftSize = 256;
+      ac.createMediaStreamSource(stream).connect(an);
+      const data = new Uint8Array(an.frequencyBinCount), g = cv.getContext("2d");
+      const tick = () => {
+        an.getByteTimeDomainData(data);
+        let peak = 0; for (const v of data) peak = Math.max(peak, Math.abs(v - 128) / 128);
+        g.clearRect(0, 0, cv.width, cv.height);
+        const bars = 16;
+        for (let i = 0; i < bars; i++) { g.fillStyle = i / bars < peak * 1.6 ? "#ff9aa2" : "#2a3446"; g.fillRect(i * 10, 6, 7, 24); }
+        raf = requestAnimationFrame(tick);
+      };
+      tick();
+      rec.addEventListener("stop", () => { cancelAnimationFrame(raf); ac.close(); });
+    } catch {}
+    rec.ondataavailable = (e) => chunks.push(e.data);
+    rec.onstop = () => {
+      stream.getTracks().forEach((t) => t.stop());
+      root._rec = null;
+      btn.classList.remove("rec"); $("span", btn).textContent = "Gravar"; cv.hidden = true;
+      const blob = new Blob(chunks, { type: rec.mimeType || "audio/webm" });
+      const rd = new FileReader();
+      rd.onload = () => {
+        const ext = /ogg/.test(blob.type) ? "ogg" : /mp4/.test(blob.type) ? "m4a" : "webm";
+        root._file = { name: "gravacao." + ext, type: blob.type.split(";")[0], base64: String(rd.result).split(",")[1] || "" };
+        const n = $(".api-file-name", root); if (n) n.textContent = root._file.name;
+        paintCode(root);
+        run(root); // parou de falar: já envia
+      };
+      rd.readAsDataURL(blob);
+    };
+    rec.start();
+  }
+
+  function showError(root, msg, kind) {
+    const rec = STATE.recordings[root._cfg.key];
+    const canReplay = rec && (kind === "offline" || kind === "tls" || kind === "network" || !STATE.live);
+    const box = document.createElement("div");
+    box.className = "api-error";
+    box.innerHTML = `<b>${kind === "offline" ? "Sem conexão" : "Não deu"}</b> ${esc(msg)}${canReplay ? ` <button type="button" class="api-replay">Mostrar a última gravação (${esc(when(rec.at))})</button>` : ""}`;
+    out(root).appendChild(box);
+    const b = $(".api-replay", box);
+    if (b) b.onclick = () => replay(root, rec);
+  }
+
+  function timeline(root) {
+    let t = $(".api-timeline", root);
+    if (!t) { t = document.createElement("div"); t.className = "api-timeline"; out(root).prepend(t); }
+    return t;
+  }
+  function row(root, label, info, cls) {
+    const t = timeline(root);
+    const r = document.createElement("div");
+    r.className = "api-tl " + (cls || "");
+    r.innerHTML = `<span class="api-tl-s">${esc(label)}</span><span class="api-tl-i">${esc(info || "")}</span>`;
+    t.appendChild(r);
+    t.scrollTop = t.scrollHeight;
+  }
+
+  // ---------- execução ----------
+  function payload(root, req) {
+    const cfg = root._cfg;
+    return { request: Object.assign({}, req, cfg.token ? { captureToken: cfg.token } : {}), file: root._file || undefined, fileRef: root._file ? undefined : cfg.file || undefined };
+  }
+  async function runSync(root, req) {
+    light(root, "start");
+    const r = await call("api/http/send", payload(root, req));
+    light(root, "done");
+    showResult(root, r);
+    return r.ok ? { mode: "sync", env: STATE.current, result: r } : null;
+  }
+
+  async function runPolling(root, req) {
+    const cfg = root._cfg, P = cfg.polling, t0 = performance.now();
+    const since = () => fmtMs(performance.now() - t0);
+    light(root, "start");
+    const start = await call("api/http/send", payload(root, req));
+    if (!start.ok) { showResult(root, start); return null; }
+    const id = C.get(start.body, P.id);
+    if (id == null) throw new Error(`A resposta do início não tem ${P.id} (o código da execução).`);
+    row(root, "início", `${start.status} · execução ${id} · ${since()}`, "start");
+    status(root, statusBar(start, `<span class="api-meta">execução ${esc(id)}</span>`));
+    const check = C.render(P.check, Object.assign(vars(), { id }));
+    const polls = [];
+    for (;;) {
+      if ((performance.now() - t0) / 1000 > P.timeout) throw new Error(`Passou de ${P.timeout} s sem terminar. Aumente polling.timeout se for normal.`);
+      light(root, "poll"); pulse(root);
+      const r = await call("api/http/send", { request: check });
+      if (!r.ok) { showResult(root, r); return null; }
+      const st = String(C.get(r.body, P.status));
+      const t = Math.round(performance.now() - t0);
+      polls.push({ status: st, t });
+      const done = P.done.includes(st), failed = P.failed.includes(st);
+      row(root, st, since(), done ? "done" : failed ? "failed" : "");
+      if (done) {
+        light(root, "done");
+        showResult(root, r, `<span class="api-meta">${polls.length} consulta${polls.length > 1 ? "s" : ""} · ${since()}</span>`);
+        return { mode: "polling", env: STATE.current, start, polls, final: r };
+      }
+      if (failed) { showResult(root, r); throw new Error(`A execução terminou com ${st}.`); }
+      await sleep(P.interval * 1000);
+    }
+  }
+
+  async function runStream(root, req) {
+    const cfg = root._cfg, t0 = performance.now();
+    light(root, "start");
+    const r = await fetch("api/http/stream", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(payload(root, req)) });
+    if (!r.ok) { const j = await r.json().catch(() => ({})); const e = new Error(j.error || "HTTP " + r.status); e.kind = j.kind; throw e; }
+    const up = +r.headers.get("X-Api-Status") || 200;
+    const box = document.createElement("div");
+    box.className = "api-stream";
+    out(root).appendChild(box);
+    light(root, "poll");
+    const reader = r.body.getReader(), dec = new TextDecoder();
+    let buf = "", text = "", raw = "", n = 0;
+    for (;;) {
+      const { value, done } = await reader.read();
+      if (done) break;
+      const s = dec.decode(value, { stream: true });
+      raw += s; buf += s;
+      let i;
+      while ((i = buf.indexOf("\n")) >= 0) {
+        const line = buf.slice(0, i).trim();
+        buf = buf.slice(i + 1);
+        if (!line.startsWith("data:")) continue;
+        const d = line.slice(5).trim();
+        if (!d || d === "[DONE]") continue;
+        let piece;
+        try { piece = C.get(JSON.parse(d), cfg.stream.text); } catch { piece = d; }
+        if (piece != null) { text += piece; n++; box.textContent = text; pulse(root); }
+      }
+      status(root, statusBar({ status: up, ms: performance.now() - t0 }, `<span class="api-meta">${n} pedaços</span>`));
+    }
+    light(root, "done");
+    if (up >= 400) { box.remove(); showResult(root, { status: up, body: raw, ms: performance.now() - t0 }); return null; }
+    if (!text && raw) box.textContent = raw;
+    const ms = Math.round(performance.now() - t0);
+    status(root, statusBar({ status: up, ms }, `<span class="api-meta">${n} pedaços</span>`));
+    return { mode: "stream", env: STATE.current, stream: { status: up, text: text || raw, ms, pieces: n } };
+  }
+
+  // ---------- embeddings: vetor e similaridade por cosseno ----------
+  const pct = (x) => Math.max(0, Math.min(100, x * 100)).toFixed(1) + "%";
+  const num = (x) => x.toFixed(2).replace(".", ",");
+  function vecHTML(preview, dims) {
+    const max = Math.max(1e-9, ...preview.map((v) => Math.abs(v)));
+    return `<div class="api-vec">${preview.map((v, k) => `<i style="--k:${k};background:hsl(${v < 0 ? 212 : 24} 85% ${Math.round(92 - (Math.abs(v) / max) * 46)}%)" title="${v}"></i>`).join("")}</div><div class="api-sim-l">vetor com ${Number(dims).toLocaleString("pt-BR")} números · os ${preview.length} primeiros (azul negativo, laranja positivo)</div>`;
+  }
+  function simBox(root, sim) {
+    let box = $(".api-sim", root);
+    if (!box) { box = document.createElement("div"); box.className = "api-sim"; out(root).appendChild(box); }
+    box.innerHTML = `<div class="api-sim-ref"><div class="f-label">referência</div><div class="api-sim-t">${esc(sim.reference)}</div>${sim.preview ? vecHTML(sim.preview, sim.dims) : ""}</div>` +
+      sim.items.map((it) => `<div class="api-sim-row" data-score="${it.score}"><div class="api-sim-t">${esc(it.text)}</div><div class="api-sim-bar"><i style="--w:0%"></i></div><b>${it.score == null ? "…" : num(it.score)}</b></div>`).join("");
+    const best = Math.max(...sim.items.map((it) => (it.score == null ? -Infinity : it.score)));
+    requestAnimationFrame(() => $$(".api-sim-row", box).forEach((row, i) => {
+      const sc = sim.items[i].score;
+      if (sc != null) { $("i", row).style.setProperty("--w", pct(sc)); row.classList.toggle("win", sim.items.length > 1 && sc === best && sim.done); }
+    }));
+  }
+  async function runSimilarity(root, req) {
+    const cfg = root._cfg;
+    const ref = ($("[data-api-ref]", root) || {}).value || cfg.similarity.reference;
+    const texts = (($("[data-api-texts]", root) || {}).value || cfg.similarity.texts.join("\n")).split("\n").map((t) => t.trim()).filter(Boolean);
+    if (!ref.trim() || !texts.length) throw new Error("Escreva a frase de referência e pelo menos uma para comparar (aba Frases).");
+    const embed = async (t) => {
+      const r = await call("api/http/send", payload(root, C.render(req, { text: t })));
+      if (!r.ok) { showResult(root, r); throw new Error(`O serviço respondeu ${r.status}.`); }
+      const v = C.get(r.body, cfg.similarity.vector);
+      if (!Array.isArray(v) || !v.length) throw new Error(`A resposta não tem o vetor em ${cfg.similarity.vector}.`);
+      return { v, r };
+    };
+    const t0 = performance.now();
+    light(root, "start");
+    const first = await embed(ref);
+    const sim = { reference: ref, dims: first.v.length, preview: first.v.slice(0, 48).map((x) => +Number(x).toFixed(4)), items: texts.map((t) => ({ text: t, score: null })) };
+    simBox(root, sim);
+    light(root, "poll");
+    for (const it of sim.items) { pulse(root); it.score = C.cosine(first.v, (await embed(it.text)).v); simBox(root, sim); }
+    sim.done = true;
+    sim.items.sort((a, b) => b.score - a.score);
+    simBox(root, sim);
+    light(root, "done");
+    status(root, statusBar(first.r, `<span class="api-meta">${texts.length + 1} embeddings · ${fmtMs(performance.now() - t0)}</span>`));
+    return { mode: "similarity", env: STATE.current, sim };
+  }
+
+  function keep(root, rec) {
+    const cfg = root._cfg;
+    const body = rec.final ? rec.final.body : rec.result ? rec.result.body : null;
+    const got = [];
+    Object.entries(cfg.save || {}).forEach(([name, path]) => { const v = C.get(body, path); if (v != null) { saved[name] = v; meta.from[name] = slideNo(root); got.push(name); } });
+    if (got.length) {
+      persist();
+      const box = document.createElement("div");
+      box.className = "api-saved";
+      box.innerHTML = got.map((n) => `<span>guardado <b>{{${esc(n)}}}</b> = ${esc(String(saved[n]).slice(0, 60))}</span>`).join("");
+      out(root).appendChild(box);
+      roots.forEach(paintCode);
+    }
+  }
+
+  // ---------- conversa em tempo real (WebSocket, pela ponte do Studio) ----------
+  const b64ToBytes = (b64) => { const s = atob(b64 || ""); const u = new Uint8Array(s.length); for (let i = 0; i < s.length; i++) u[i] = s.charCodeAt(i); return u; };
+  const bytesToB64 = (u) => { let s = ""; for (let i = 0; i < u.length; i += 0x8000) s += String.fromCharCode.apply(null, u.subarray(i, i + 0x8000)); return btoa(s); };
+  // no registro, o áudio vira "(N KB de áudio)" — o que importa é ver o tipo e a estrutura
+  const shortAudio = (o) => JSON.stringify(o, (k, v) => (typeof v === "string" && v.length > 200 && /^[A-Za-z0-9+/=]+$/.test(v) ? `…(${(v.length * 0.75 / 1024).toFixed(1).replace(".", ",")} KB de áudio)` : v));
+  function logRt(root, dir, msg) {
+    const box = $(".api-log", root);
+    if (!box) return;
+    const obj = typeof msg === "string" ? (() => { try { return JSON.parse(msg); } catch { return msg; } })() : msg;
+    const type = obj && typeof obj === "object" ? C.get(obj, root._cfg.realtime.receive.type) : null;
+    const row = document.createElement("div");
+    row.className = dir === "up" ? "up" : "dn";
+    row.innerHTML = `<b>${dir === "up" ? '<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 19V5M5 12l7-7 7 7"/></svg>' : '<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M19 12l-7 7-7-7"/></svg>'}</b><em>${esc(type || "")}</em><span>${esc(typeof obj === "string" ? obj : shortAudio(obj))}</span>`;
+    // pedaços de áudio seguidos viram uma linha só, com contador
+    const last = box.lastElementChild;
+    if (last && last.dataset.type === String(type) && /audio/.test(String(type)) && last.className === row.className) { last.dataset.n = +(last.dataset.n || 1) + 1; last.querySelector("em").textContent = `${type} ×${last.dataset.n}`; return; }
+    row.dataset.type = String(type);
+    box.appendChild(row);
+    while (box.children.length > 300) box.firstChild.remove();
+    box.scrollTop = box.scrollHeight;
+  }
+  function bubble(root, who, text) {
+    let box = $(".api-rt", root);
+    if (!box) { box = document.createElement("div"); box.className = "api-rt"; out(root).appendChild(box); }
+    const b = document.createElement("div");
+    b.className = "api-bub " + who;
+    b.textContent = text || "";
+    box.appendChild(b);
+    out(root).scrollTop = out(root).scrollHeight;
+    (root._rt ? root._rt.log : []).push({ who, text: text || "" });
+    return b;
+  }
+  function playPcm(root, b64) {
+    const st = root._rt, rate = root._cfg.realtime.audio.rate;
+    const bytes = b64ToBytes(b64);
+    const n = bytes.length >> 1;
+    if (!n) return;
+    const view = new DataView(bytes.buffer), f = new Float32Array(n);
+    for (let i = 0; i < n; i++) f[i] = view.getInt16(i * 2, true) / 32768;
+    st.ac = st.ac || new (window.AudioContext || window.webkitAudioContext)();
+    const buf = st.ac.createBuffer(1, n, rate);
+    buf.copyToChannel(f, 0);
+    const src = st.ac.createBufferSource();
+    src.buffer = buf;
+    src.connect(st.ac.destination);
+    const at = Math.max(st.ac.currentTime + 0.05, st.next || 0);
+    src.start(at);
+    st.next = at + buf.duration;
+    st.played = (st.played || 0) + 1;
+  }
+  function onRt(root, ev) {
+    const st = root._rt;
+    if (!st) return;
+    if (ev.type === "close") { logRt(root, "dn", `(conexão fechada: ${ev.code}${ev.why ? " " + ev.why : ""})`); rtClosed(root); return; }
+    if (ev.bin) { logRt(root, "dn", `(binário, ${Math.round(ev.bin.length * 0.75)} bytes)`); return; }
+    logRt(root, "dn", ev.text);
+    let m;
+    try { m = JSON.parse(ev.text); } catch { return; }
+    const R = root._cfg.realtime, T = R.receive.type;
+    if (C.isType(m, R.receive.audio, T)) playPcm(root, C.get(m, R.receive.audio.data));
+    else if (C.isType(m, R.receive.text, T)) {
+      if (!st.bot) { st.bot = bubble(root, "bot", ""); st.bot.classList.add("live"); st.botText = ""; st.botEntry = st.log[st.log.length - 1]; }
+      st.botText += String(C.get(m, R.receive.text.data) ?? "");
+      st.bot.textContent = st.botText;
+      st.botEntry.text = st.botText;
+      out(root).scrollTop = out(root).scrollHeight;
+    } else if (C.isType(m, R.receive.user, T)) bubble(root, "user", String(C.get(m, R.receive.user.data) ?? ""));
+    else if (R.receive.done.includes(String(C.get(m, T)))) { if (st.bot) st.bot.classList.remove("live"); st.bot = null; }
+    else if (C.isType(m, R.receive.error, T)) showError(root, String(C.get(m, R.receive.error.data) || "erro do serviço"));
+  }
+  async function rtSend(root, msgs) {
+    const st = root._rt;
+    if (!st) return;
+    [].concat(msgs).forEach((m) => { if (!/input_audio_buffer\.append/.test(JSON.stringify(m).slice(0, 80))) logRt(root, "up", m); else logRt(root, "up", { type: C.get(m, root._cfg.realtime.receive.type) || "áudio" }); });
+    await call("api/http/rt/send", { sid: st.sid, messages: [].concat(msgs) });
+  }
+  function rtControls(root, on) {
+    $$("[data-rt-mic],[data-rt-text],[data-rt-send]", root).forEach((e) => { e.disabled = !on; });
+  }
+  async function rtOpen(root) {
+    const cfg = root._cfg, R = cfg.realtime;
+    let open;
+    try { open = JSON.parse(($("[data-api-body]", root) || {}).value || "[]"); } catch (e) { return showError(root, "As mensagens de 'Ao conectar' não são um JSON válido: " + e.message); }
+    const url = C.render($("[data-api-url]", root).value.trim(), vars());
+    const miss = C.missing(url, {}).filter((m) => !/^secret\./.test(m));
+    if (miss.length) return showError(root, `Falta ${miss.map((m) => "{{" + m + "}}").join(", ")} (vars do ambiente).`);
+    clearOut(root);
+    label(root, "Conectando…");
+    const r = await call("api/http/rt/open", { realtime: { url, auth: R.auth }, open: C.render([].concat(open), vars()) });
+    root._rt = { sid: r.sid, log: [], t0: Date.now() };
+    [].concat(open).forEach((m) => logRt(root, "up", m));
+    const es = new EventSource("api/http/rt/events?sid=" + encodeURIComponent(r.sid));
+    root._rt.es = es;
+    es.onmessage = (e) => { try { onRt(root, JSON.parse(e.data)); } catch {} };
+    es.onerror = () => { if (root._rt && root._rt.es === es && es.readyState === 2) rtClosed(root); };
+    label(root, "Desconectar");
+    root.classList.add("rt-on");
+    status(root, `<span class="api-pill ok">conectado</span><span class="api-meta">${esc(String(r.env || "").toUpperCase())} · ${esc(r.url.replace(/[?].*/, ""))}</span>`);
+    rtControls(root, true);
+  }
+  function rtClosed(root) {
+    const st = root._rt;
+    if (!st) return;
+    if (st.mic) stopMic(root, false);
+    if (st.es) st.es.close();
+    root._rt = null;
+    root.classList.remove("rt-on");
+    rtControls(root, false);
+    label(root, "Conectar");
+    status(root, `<span class="api-meta">desconectado · ${fmtMs(Date.now() - st.t0)} de conversa</span>`);
+    const talk = st.log.filter((b) => b.text);
+    if (talk.length) {
+      const rec = { mode: "realtime", env: STATE.current, talk };
+      STATE.recordings[root._cfg.key] = Object.assign({ at: new Date().toISOString() }, rec);
+      call("api/http/record", { key: root._cfg.key, record: rec }).catch(() => {});
+    }
+    window.sagadeckApi.rtLast = { played: st.played || 0, talk };
+  }
+  async function rtToggle(root) {
+    if (root._rt) {
+      const st = root._rt;
+      call("api/http/rt/close", { sid: st.sid }).catch(() => {});
+      rtClosed(root);
+      return;
+    }
+    if (!STATE.live) { const rec = STATE.recordings[root._cfg.key]; if (rec) return replay(root, rec, true); return showError(root, STATE.reason || "Sem o Studio para conectar."); }
+    try { await rtOpen(root); } catch (e) { label(root, "Conectar"); showError(root, e.message, e.kind); }
+  }
+  // microfone → PCM16 mono na taxa do serviço, em pedaços de ~200 ms
+  async function startMic(root) {
+    const st = root._rt, R = root._cfg.realtime;
+    const btn = $("[data-rt-mic]", root), cv = $(".api-level", root);
+    let stream;
+    try { stream = await navigator.mediaDevices.getUserMedia({ audio: true }); }
+    catch (e) { return showError(root, "Não consegui usar o microfone: " + (e.message || e.name)); }
+    const ac = new (window.AudioContext || window.webkitAudioContext)();
+    const src = ac.createMediaStreamSource(stream);
+    const proc = ac.createScriptProcessor(4096, 1, 1);
+    const ratio = ac.sampleRate / R.audio.rate;
+    let pend = [], pendN = 0;
+    const g = cv.getContext("2d");
+    proc.onaudioprocess = (e) => {
+      const x = e.inputBuffer.getChannelData(0);
+      let peak = 0;
+      const n = Math.floor(x.length / ratio), out16 = new Int16Array(n);
+      for (let i = 0; i < n; i++) {
+        let s = 0, c = 0;
+        for (let j = Math.floor(i * ratio); j < Math.floor((i + 1) * ratio) && j < x.length; j++) { s += x[j]; c++; }
+        const v = Math.max(-1, Math.min(1, c ? s / c : 0));
+        peak = Math.max(peak, Math.abs(v));
+        out16[i] = v < 0 ? v * 32768 : v * 32767;
+      }
+      g.clearRect(0, 0, cv.width, cv.height);
+      for (let i = 0; i < 16; i++) { g.fillStyle = i / 16 < peak * 1.6 ? "#ff9aa2" : "#2a3446"; g.fillRect(i * 10, 6, 7, 24); }
+      pend.push(out16); pendN += n;
+      if (pendN >= R.audio.rate * 0.2) {
+        const all = new Int16Array(pendN); let o = 0;
+        for (const p of pend) { all.set(p, o); o += p.length; }
+        pend = []; pendN = 0;
+        st.sentAudio = (st.sentAudio || 0) + all.length;
+        rtSend(root, [C.render(R.audio.send, Object.assign(vars(), { audio: bytesToB64(new Uint8Array(all.buffer)) }))]).catch(() => {});
+      }
+    };
+    src.connect(proc); proc.connect(ac.destination);
+    st.mic = { stream, ac, proc, flush: () => { if (pendN) { const all = new Int16Array(pendN); let o = 0; for (const p of pend) { all.set(p, o); o += p.length; } pend = []; pendN = 0; return all; } return null; } };
+    btn.classList.add("rec"); $("span", btn).textContent = "Parar"; cv.hidden = false;
+  }
+  function stopMic(root, commit = true) {
+    const st = root._rt, R = root._cfg.realtime;
+    if (!st || !st.mic) return;
+    const { stream, ac, proc, flush } = st.mic;
+    st.mic = null;
+    const rest = flush();
+    proc.disconnect(); stream.getTracks().forEach((t) => t.stop()); ac.close();
+    const btn = $("[data-rt-mic]", root); btn.classList.remove("rec"); $("span", btn).textContent = "Falar"; $(".api-level", root).hidden = true;
+    if (!commit) return;
+    const msgs = [];
+    if (rest && rest.length) msgs.push(C.render(R.audio.send, Object.assign(vars(), { audio: bytesToB64(new Uint8Array(rest.buffer)) })));
+    msgs.push(...C.render(R.audio.commit, vars()));
+    rtSend(root, msgs).catch((e) => showError(root, e.message));
+  }
+  function sendText(root) {
+    const inp = $("[data-rt-text]", root);
+    const text = inp.value.trim();
+    if (!text || !root._rt) return;
+    inp.value = "";
+    bubble(root, "user", text);
+    rtSend(root, C.render(root._cfg.realtime.text, Object.assign(vars(), { text }))).catch((e) => showError(root, e.message));
+  }
+
+  async function run(root) {
+    const btn = $("[data-api-run]", root);
+    btn.blur();
+    if (root._cfg.realtime) return rtToggle(root);
+    if (root._running) return;
+    const cfg = root._cfg;
+    const menu = $(".api-menu", root); if (menu) menu.remove();
+    if (!STATE.live) {
+      const rec = STATE.recordings[cfg.key];
+      clearOut(root);
+      if (rec) return replay(root, rec, true);
+      return showError(root, STATE.reason || "Sem o Studio para executar.");
+    }
+    let req;
+    try { req = C.render(readReq(root), vars()); } catch (e) { clearOut(root); return showError(root, e.message); }
+    const miss = C.missing(req, {}).filter((m) => !/^(file|secret)\./.test(m) && !(cfg.similarity && m === "text"));
+    if (miss.length) { clearOut(root); return showError(root, `Falta ${miss.map((m) => "{{" + m + "}}").join(", ")}: defina em vars do ambiente, ou execute antes o slide que guarda esse valor (save:).`); }
+    root._running = true;
+    btn.disabled = true; label(root, "Executando…");
+    root.classList.add("running");
+    clearOut(root);
+    try {
+      const rec = cfg.similarity ? await runSimilarity(root, req) : cfg.mode === "polling" ? await runPolling(root, req) : cfg.mode === "stream" ? await runStream(root, req) : await runSync(root, req);
+      if (rec) {
+        keep(root, rec);
+        const big = rec.result && rec.result.body && rec.result.body._audio && rec.result.body.base64.length > 1500000;
+        const saved = big ? Object.assign({}, rec, { result: Object.assign({}, rec.result, { body: { nota: "áudio grande demais para gravar" } }) }) : rec;
+        STATE.recordings[cfg.key] = Object.assign({ at: new Date().toISOString() }, saved);
+        call("api/http/record", { key: cfg.key, record: saved }).catch(() => {});
+      }
+    } catch (e) {
+      showError(root, e.message, e.kind);
+    } finally {
+      root._running = false;
+      btn.disabled = false;
+      root.classList.remove("running");
+      paintEnv(root);
+    }
+  }
+
+  // a última resposta boa, no mesmo ritmo em que aconteceu (encurtado); instant = sem animação
+  async function replay(root, rec, animate) {
+    const badge = `<span class="api-rec">gravado ${esc(when(rec.at))}${rec.env ? " · " + esc(String(rec.env).toUpperCase()) : ""}</span>`;
+    clearOut(root);
+    const wait = (ms) => (animate ? sleep(Math.min(ms, 900)) : Promise.resolve());
+    if (rec.mode === "realtime" && rec.talk) {
+      clearOut(root);
+      for (const b of rec.talk) { if (animate) await sleep(350); const el = document.createElement("div"); el.className = "api-bub " + b.who; el.textContent = b.text; let box = $(".api-rt", root); if (!box) { box = document.createElement("div"); box.className = "api-rt"; out(root).appendChild(box); } box.appendChild(el); }
+      status(root, `<span class="api-meta">conversa gravada</span>${badge}`);
+      return;
+    }
+    if (rec.mode === "similarity" && rec.sim) {
+      light(root, "done");
+      simBox(root, Object.assign({}, rec.sim, { done: true }));
+      status(root, `<span class="api-meta">${rec.sim.items.length + 1} embeddings</span>${badge}`);
+      return;
+    }
+    if (rec.mode === "polling" && rec.final) {
+      light(root, "start");
+      row(root, "início", `${rec.start ? rec.start.status : ""} · execução ${C.get(rec.start && rec.start.body, root._cfg.polling.id) ?? ""}`, "start");
+      let prev = 0;
+      for (const p of rec.polls || []) {
+        await wait(p.t - prev); prev = p.t;
+        light(root, "poll"); if (animate) pulse(root);
+        row(root, p.status, fmtMs(p.t), root._cfg.polling.done.includes(p.status) ? "done" : "");
+      }
+      light(root, "done");
+      showResult(root, rec.final, badge);
+    } else if (rec.mode === "stream" && rec.stream) {
+      light(root, "poll");
+      const box = document.createElement("div");
+      box.className = "api-stream";
+      out(root).appendChild(box);
+      if (animate) { for (let i = 0; i <= rec.stream.text.length; i += 3) { box.textContent = rec.stream.text.slice(0, i); await sleep(12); } }
+      box.textContent = rec.stream.text;
+      light(root, "done");
+      status(root, statusBar({ status: rec.stream.status, ms: rec.stream.ms }, badge));
+    } else if (rec.result) {
+      light(root, "done");
+      showResult(root, rec.result, badge);
+    }
+  }
+
+  // ---------- controle flutuante (Document Picture-in-Picture) ----------
+  // Uma janelinha sempre por cima (o portal pode ficar em tela cheia): ambiente, Executar, status e o
+  // resumo da resposta do slide atual, espelhados daqui; ← → passam os slides.
+  const PIP_CSS = `body{margin:0;background:#0d1320;color:#e8edf5;font:15px system-ui,sans-serif}
+    .pip{display:flex;flex-direction:column;height:100vh;box-sizing:border-box;padding:12px;gap:10px}
+    .pip-top{display:flex;align-items:center;gap:8px;min-height:28px}
+    .pip-top b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px}
+    .pip-env{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:12px;border:1px solid #ffffff2a;font:700 12px system-ui;letter-spacing:.08em}
+    .pip-env i{width:9px;height:9px;border-radius:50%;background:#8a8f98}
+    .pip-env[data-kind=dev] i{background:#2fb96b}.pip-env[data-kind=hom] i{background:#f0a020}.pip-env[data-kind=prod] i{background:#e5484d}
+    .pip-run{height:44px;border:0;border-radius:10px;background:#ffd21f;color:#1a1a1a;font:800 17px system-ui;cursor:pointer}
+    .pip-run:disabled{opacity:.6}
+    .pip-status{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-height:22px;font-size:13px}
+    .pip-status .api-pill{font-size:13px;padding:3px 9px}.pip-status .api-meta{color:#8d9ab1}.pip-status .api-rec{margin-left:0;font-size:11px}
+    .pip-body{flex:1;min-height:0;overflow:auto;border-radius:10px;background:#101725}
+    .pip-out{zoom:.5;padding:16px}
+    .pip-nav{display:flex;align-items:center;gap:8px}
+    .pip-nav button{width:40px;height:32px;border:1px solid #ffffff2a;border-radius:8px;background:none;color:#e8edf5;font:700 16px system-ui;cursor:pointer}
+    .pip-nav span{flex:1;text-align:center;color:#8d9ab1;font-size:13px}
+    .pip-empty{padding:16px;color:#8d9ab1}`;
+  let pipWin = null;
+  const currentRoot = () => { const i = window.sagadeck ? window.sagadeck.cur : 0; const sl = document.querySelectorAll(".slide")[i]; return sl ? [...sl.querySelectorAll(".L-api[data-api]")].find(r=>!r.closest(".api-collection-panel[hidden]")) || null : null; };
+  function renderPip() {
+    if (!pipWin || pipWin.closed) return;
+    const d = pipWin.document, root = currentRoot();
+    const i = window.sagadeck ? window.sagadeck.cur : 0, n = window.sagadeck ? window.sagadeck.n : 1;
+    const env = root ? $("[data-api-env]", root) : null;
+    const html = root
+      ? `<div class="pip-top"><span class="pip-env" data-kind="${esc(env.dataset.kind || "")}"><i></i>${esc($(".api-env-name", env).textContent)}</span><b>${esc(root._cfg.title || "Requisição")}</b></div>
+        <button class="pip-run" ${root._running ? "disabled" : ""}>${root._running ? "Executando…" : esc($("[data-api-run] span", root).textContent)}</button>
+        <div class="pip-status">${$(".api-status", root).innerHTML}</div>
+        <div class="pip-body"><div class="pip-out">${$(".api-out", root).innerHTML}</div></div>`
+      : `<div class="pip-top"><b>Slide ${i + 1}</b></div><div class="pip-body"><div class="pip-empty">Este slide não tem requisição.</div></div>`;
+    const key = html + i;
+    if (d.body._key !== key) {
+      d.body._key = key;
+      d.body.innerHTML = `<div class="pip">${html}<div class="pip-nav"><button data-go="-1" title="Slide anterior"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M19 12H5M12 19l-7-7 7-7"/></svg></button><span>${i + 1} / ${n}</span><button data-go="1" title="Próximo slide"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M12 5l7 7-7 7"/></svg></button></div></div>`;
+    }
+  }
+  async function openPip(root) {
+    if (!("documentPictureInPicture" in window)) { clearOut(root); showError(root, "Este navegador não tem o controle flutuante (use o Chrome ou o Edge atualizados)."); return; }
+    if (window.top !== window) { // dentro do Studio (quadro): o Chrome só abre a janelinha em janela própria
+      window.open(location.href.split("#")[0] + "#" + ((window.sagadeck ? window.sagadeck.cur : 0) + 1), "_blank");
+      return;
+    }
+    if (pipWin && !pipWin.closed) { pipWin.focus(); return; }
+    pipWin = await window.documentPictureInPicture.requestWindow({ width: 420, height: 560 });
+    const css = pipWin.document.createElement("style");
+    css.textContent = Array.from(document.querySelectorAll("style")).map((s) => s.textContent).join("\n") + PIP_CSS;
+    pipWin.document.head.appendChild(css);
+    pipWin.document.title = "Controle · " + (document.title || "SagaDeck");
+    pipWin.document.addEventListener("click", (e) => {
+      const b = e.target.closest("[data-go]");
+      if (b && window.sagadeck) window.sagadeck.goto(Math.max(0, Math.min(window.sagadeck.n - 1, window.sagadeck.cur + Number(b.dataset.go))), 0);
+      if (e.target.closest(".pip-run")) { const r = currentRoot(); if (r) run(r); }
+    });
+    pipWin.document.addEventListener("keydown", (e) => {
+      if (!window.sagadeck) return;
+      if (e.key === "ArrowRight" || e.key === "PageDown") window.sagadeck.goto(Math.min(window.sagadeck.n - 1, window.sagadeck.cur + 1), 0);
+      if (e.key === "ArrowLeft" || e.key === "PageUp") window.sagadeck.goto(Math.max(0, window.sagadeck.cur - 1), 0);
+    });
+    const iv = setInterval(() => { if (!pipWin || pipWin.closed) { clearInterval(iv); pipWin = null; return; } renderPip(); }, 300);
+    renderPip();
+    window.sagadeckApi.pip = pipWin;
+  }
+
+  function mount(root) {
+    try { root._cfg = JSON.parse(root.dataset.api); } catch { return; }
+    $$("[data-tab]", root).forEach((b) => { b.onclick = () => showTab(root, b.dataset.tab); });
+    $("[data-api-run]", root).onclick = () => run(root);
+    $("[data-api-env]", root).onclick = (e) => envMenu(root, e.currentTarget);
+    const varsBtn = $("[data-api-vars]", root);
+    if (varsBtn) varsBtn.onclick = () => varsPanel(root);
+    if (root._cfg.realtime) {
+      $("[data-rt-mic]", root).onclick = () => (root._rt && root._rt.mic ? stopMic(root) : startMic(root));
+      $("[data-rt-send]", root).onclick = () => sendText(root);
+      $("[data-rt-text]", root).addEventListener("keydown", (e) => { if (e.key === "Enter") { e.preventDefault(); sendText(root); } });
+    }
+    const pipBtn = $("[data-api-pip]", root);
+    if (pipBtn) pipBtn.onclick = () => openPip(root).catch((e) => { clearOut(root); showError(root, "Não abriu o controle flutuante: " + e.message); });
+    ["[data-api-url]", "[data-api-body]", "[data-api-headers]", "[data-api-ref]", "[data-api-texts]"].forEach((sel) => { const el = $(sel, root); if (el) el.addEventListener("input", () => paintCode(root)); });
+    // Enter/espaço num botão do slide não avançam a apresentação
+    const zone = $("[data-api-file]", root);
+    if (zone) {
+      const inp = $("[data-api-input]", zone);
+      $("[data-api-pick]", zone).onclick = () => inp.click();
+      const mic = $("[data-api-mic]", zone);
+      if (mic) mic.onclick = () => toggleMic(root);
+      inp.onchange = () => pickFile(root, inp.files[0]);
+      const req = $(".api-req", root);
+      req.addEventListener("dragover", (e) => { e.preventDefault(); zone.classList.add("drag"); });
+      req.addEventListener("dragleave", () => zone.classList.remove("drag"));
+      req.addEventListener("drop", (e) => { e.preventDefault(); zone.classList.remove("drag"); pickFile(root, e.dataTransfer.files[0]); });
+    }
+    root.addEventListener("keydown", (e) => { if ((e.key === "Enter" || e.key === " ") && e.target.closest("button,a,select")) e.stopPropagation(); });
+  }
+
+  async function start() {
+    roots.forEach(mount);
+    if (location.protocol !== "file:") {
+      try {
+        const st = await call("api/http/state");
+        STATE = Object.assign({}, st, { recordings: Object.assign({}, EMBED, st.recordings || {}) });
+      } catch {}
+    }
+    roots.forEach((root) => {
+      paintEnv(root);
+      paintCode(root);
+      const rec = STATE.recordings[root._cfg.key];
+      if (!STATE.live && rec) replay(root, rec, false); // HTML exportado / PDF / servidor: mostra o resultado gravado
+    });
+    window.sagadeckApi = { get state() { return STATE; }, vars, run: (i) => run(roots[i || 0]) };
+  }
+  start();
+})();