sagadeck 1.5.0 → 1.7.0

package/src/studio/ia-routes.js

@@ -0,0 +1,53 @@
+// Tela "Configurar IA" do Studio: ler (a chave nunca sai inteira), salvar e testar a configuração da IA desta máquina
+// (src/ai/ia-config.js). No multiusuário quem configura é quem administra o servidor (arquivo ou variáveis), não a tela.
+import { PROVIDERS, ROLES, RECOMMENDED, iaFile, loadIA, saveIA, maskedIA, keyOf } from "../ai/ia-config.js";
+import { chat, llmConfig, llmAvailable } from "../ai/llm.js";
+
+const json = (res, status, data) => { res.writeHead(status, { "Content-Type": "application/json", "Cache-Control": "no-store" }); res.end(JSON.stringify(data)); };
+
+// o que veio da tela; a chave em branco mantém a que já está gravada
+function draft(body, current) {
+  const provider = String(body.provider || "");
+  const preset = PROVIDERS[provider];
+  return {
+    provider: preset ? provider : "outro",
+    url: String(body.url || preset?.url || "").trim(),
+    key: String(body.key || "").trim() || current?.key || "",
+    keyEnv: body.key ? "" : String(body.keyEnv ?? current?.keyEnv ?? preset?.keyEnv ?? ""),
+    models: Object.fromEntries(ROLES.map((r) => [r, String(body.models?.[r] || "").trim()])),
+    ...(current?.headers ? { headers: current.headers } : {}),
+    ...(current?.adaptador ? { adaptador: current.adaptador } : {}),
+  };
+}
+
+export async function iaRoutes({ req, res, pathname, opts, readJSON }) {
+  if (pathname === "/api/ia" && req.method === "GET") {
+    const cfg = llmConfig();
+    json(res, 200, { config: maskedIA(loadIA()), file: iaFile(), source: cfg.source, configured: !!(cfg.url || cfg.adaptador), providers: PROVIDERS, roles: ROLES, recommended: RECOMMENDED, editable: !opts.multiuser });
+    return true;
+  }
+  if ((pathname === "/api/ia" || pathname === "/api/ia/test") && req.method === "POST") {
+    if (opts.multiuser) { json(res, 403, { error: "No servidor multiusuário, a IA é configurada por quem administra." }); return true; }
+    const body = await readJSON(req);
+    const next = draft(body, loadIA());
+    if (!next.url) { json(res, 400, { error: "Falta o endereço do provedor." }); return true; }
+    if (!next.models.text) { json(res, 400, { error: "Falta o modelo de texto." }); return true; }
+    if (pathname === "/api/ia") {
+      try { const saved = saveIA(next); await llmAvailable({ force: true }); json(res, 200, { ok: true, config: maskedIA(saved) }); }
+      catch (e) { json(res, 400, { error: e.message }); }
+      return true;
+    }
+    // testar: uma pergunta curta com o que está na tela (antes de salvar)
+    const base = llmConfig();
+    const cfg = { ...base, url: next.url.replace(/\/+$/, ""), key: keyOf(next), headers: next.headers || {}, adaptador: next.adaptador || "",
+      textModel: next.models.text, visionModel: next.models.vision || next.models.text, imageModel: next.models.image || "image", searchModel: next.models.search || "",
+      timeoutMs: 60_000, firstTimeoutMs: 60_000 };
+    const t0 = Date.now();
+    try {
+      const r = await chat([{ role: "user", content: "Responda só com a palavra: ok" }], { cfg, maxTokens: 200, think: false, allowTruncated: true, retries: 0 });
+      json(res, 200, { ok: true, text: String(r.text || "").trim().slice(0, 80), model: r.model || cfg.textModel, ms: Date.now() - t0 });
+    } catch (e) { json(res, 200, { ok: false, error: e.message, ms: Date.now() - t0 }); }
+    return true;
+  }
+  return false;
+}

package/src/studio/open-browser.js

@@ -0,0 +1,17 @@
+// `sagadeck studio` abre o navegador na página certa: quem acabou de instalar não precisa achar o endereço no meio do
+// que o terminal escreveu. Só quando faz sentido: alguém no terminal (não um serviço, não um teste, não a CI), sem
+// servidor multiusuário e sem --sem-navegador / SAGADECK_NO_BROWSER=1.
+import { spawn } from "node:child_process";
+
+export function shouldOpenBrowser({ flags = {}, env = process.env, isTTY = process.stdout.isTTY, multiuser = false, platform = process.platform } = {}) {
+  if (flags["sem-navegador"] || flags["no-browser"] || env.SAGADECK_NO_BROWSER === "1") return false;
+  if (multiuser || env.CI || !isTTY) return false;
+  if (platform === "linux" && !env.DISPLAY && !env.WAYLAND_DISPLAY) return false; // servidor sem tela
+  return true;
+}
+
+export function openBrowser(url, { platform = process.platform, spawnFn = spawn } = {}) {
+  const [cmd, args] = platform === "win32" ? ["cmd", ["/c", "start", "", url]] : platform === "darwin" ? ["open", [url]] : ["xdg-open", [url]];
+  try { const child = spawnFn(cmd, args, { stdio: "ignore", detached: true, windowsHide: true }); child.on?.("error", () => {}); child.unref?.(); return true; }
+  catch { return false; }
+}

package/src/studio/public/ai-settings.js

@@ -0,0 +1,86 @@
+// Tela "Configurar IA" (editor e biblioteca): provedor, chave e modelos desta máquina, com Testar antes de salvar.
+// A chave fica só nesta máquina (~/.sagadeck/ia.json) e nunca volta inteira para a página.
+window.SagaAISettings = (() => {
+  const css = `.ai-cfg{max-width:min(560px,calc(100vw - 32px));width:100%;border:1px solid var(--border,#c9ced6);border-radius:12px;padding:18px 20px;background:var(--panel,var(--bg,#fff));color:var(--text,#1d2433);font:14px/1.45 system-ui,sans-serif}
+.ai-cfg::backdrop{background:rgba(0,0,0,.35)}.ai-cfg h2{margin:0 0 6px;font-size:18px}.ai-cfg p{margin:4px 0 10px;color:var(--text-2,#555)}
+.ai-cfg label{display:block;margin:10px 0 3px;font-weight:600;font-size:12px}.ai-cfg input,.ai-cfg select{width:100%;box-sizing:border-box;padding:7px 9px;border:1px solid var(--border,#c9ced6);border-radius:8px;background:var(--bg,#fff);color:inherit;font:inherit}
+.ai-cfg .grid{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}.ai-cfg small{color:var(--text-3,#777);font-size:12px}.ai-cfg .warn{background:#fef3c7;color:#78350f;border-radius:8px;padding:8px 10px}
+.ai-cfg .row{display:flex;gap:8px;justify-content:flex-end;margin-top:16px;flex-wrap:wrap}.ai-cfg button{padding:7px 14px;border-radius:8px;border:1px solid var(--border,#c9ced6);background:transparent;color:inherit;cursor:pointer;font:inherit}
+.ai-cfg .rec{background:var(--selected,#eef);border-radius:8px;padding:8px 10px;margin:6px 0 4px}.ai-cfg .rec button{margin-top:6px;display:block}
+.ai-cfg button.primary{background:var(--brand,#5b4bdb);border-color:var(--brand,#5b4bdb);color:#fff}.ai-cfg [data-status]{margin-top:10px;min-height:1.4em}.ai-cfg [data-status].ok{color:#15803d}.ai-cfg [data-status].err{color:#b91c1c}`;
+  const LABEL = { text: "Modelo de texto", vision: "Modelo que vê imagens", image: "Modelo de imagem", search: "Modelo de busca na web" };
+  const HINT = { text: "obrigatório", vision: "opcional; vazio = o de texto", image: "opcional; para gerar ilustrações", search: "opcional; no OpenRouter, um modelo :online" };
+  const esc = (s) => String(s ?? "").replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[c]);
+  let dialog, info, onSaved = () => {};
+
+  function build() {
+    if (!document.getElementById("ai-cfg-style")) { const st = document.createElement("style"); st.id = "ai-cfg-style"; st.textContent = css; document.head.append(st); }
+    dialog = document.createElement("dialog");
+    dialog.className = "ai-cfg";
+    dialog.id = "ai-settings-dialog";
+    document.body.append(dialog);
+  }
+
+  function form() {
+    const c = info.config || {}, providers = info.providers || {};
+    const provider = c.provider && (providers[c.provider] || c.provider === "outro") ? c.provider : (c.url ? "outro" : "openrouter");
+    dialog.innerHTML = `<h2>Configurar IA</h2>
+      <p>O sagadeck fala direto com o provedor que você escolher. A chave fica só nesta máquina, em <code>${esc(info.file)}</code>.</p>
+      ${info.source === "variável" ? '<p class="warn">As variáveis SAGADECK_LLM_URL / SAGADECK_LLM_KEY estão definidas e valem por cima desta tela.</p>' : ""}
+      ${info.editable ? "" : '<p class="warn">Neste servidor, quem configura a IA é quem administra.</p>'}
+      ${info.recommended ? `<div class="rec"><b>Recomendado para começar:</b> ${esc(providers[info.recommended.provider]?.label || info.recommended.provider)}, com ${esc(info.recommended.models.text)} (texto e visão), ${esc(info.recommended.models.image)} (imagem) e ${esc(info.recommended.models.search)} (busca). Se a IA não responder nem com isso, o problema é a rede ou a chave, não o modelo. Depois, troque pelo modelo que quiser. <button type="button" data-rec>Usar a recomendação</button></div>` : ""}
+      <label for="ai-cfg-provider">Provedor</label>
+      <select id="ai-cfg-provider" data-f="provider">${Object.entries(providers).map(([k, p]) => `<option value="${k}">${esc(p.label)}</option>`).join("")}<option value="outro">Outro compatível com a API da OpenAI</option></select>
+      <label for="ai-cfg-url">Endereço da API</label>
+      <input id="ai-cfg-url" data-f="url" placeholder="https://…/v1" spellcheck="false">
+      <label for="ai-cfg-key">Chave</label>
+      <input id="ai-cfg-key" data-f="key" type="password" autocomplete="off" spellcheck="false" placeholder="${c.keySet ? `configurada (${esc(c.keyHint)}${c.keyFrom === "variável" ? `, da variável ${esc(c.keyEnv)}` : ""}); em branco mantém` : "cole a chave do provedor"}">
+      <div class="grid">${(info.roles || []).map((r) => `<div><label for="ai-cfg-${r}">${LABEL[r] || r}</label><input id="ai-cfg-${r}" data-model="${r}" value="${esc(c.models?.[r])}" placeholder="${info.recommended?.models?.[r] ? `ex.: ${esc(info.recommended.models[r])}` : ""}" spellcheck="false"><small>${HINT[r] || ""}</small></div>`).join("")}</div>
+      <p><small>Texto e visão funcionam em qualquer provedor compatível com a API da OpenAI. Gerar imagem e buscar na web dependem do provedor: funcionam no OpenRouter com modelos de imagem e modelos <code>:online</code>; em outros, a pesquisa usa buscadores diretos e a imagem pode não sair.</small></p>
+      <div data-status role="status"></div>
+      <div class="row"><button type="button" data-close>Fechar</button><button type="button" data-test>Testar</button><button type="button" class="primary" data-save>Salvar</button></div>`;
+    const sel = dialog.querySelector('[data-f="provider"]'), url = dialog.querySelector('[data-f="url"]');
+    sel.value = provider;
+    url.value = c.url || providers[provider]?.url || "";
+    const sync = () => { const p = providers[sel.value]; if (p) url.value = p.url; url.readOnly = !!p; };
+    sync();
+    sel.onchange = sync;
+    if (!info.editable) dialog.querySelectorAll("input,select,[data-save],[data-test]").forEach((el) => (el.disabled = true));
+    dialog.querySelector("[data-close]").onclick = () => dialog.close();
+    const rec = dialog.querySelector("[data-rec]");
+    if (rec) rec.onclick = () => {
+      sel.value = info.recommended.provider; sync();
+      for (const [r, m] of Object.entries(info.recommended.models)) { const el = dialog.querySelector(`[data-model="${r}"]`); if (el) el.value = m; }
+      const st = dialog.querySelector("[data-status]"); st.className = ""; st.textContent = info.config?.keySet ? "Preenchido. Clique em Testar." : "Preenchido. Cole a chave do OpenRouter e clique em Testar.";
+      dialog.querySelector('[data-f="key"]').focus();
+    };
+    dialog.querySelector("[data-test]").onclick = () => submit("api/ia/test");
+    dialog.querySelector("[data-save]").onclick = () => submit("api/ia");
+  }
+
+  async function submit(endpoint) {
+    const status = dialog.querySelector("[data-status]");
+    const body = { provider: dialog.querySelector('[data-f="provider"]').value, url: dialog.querySelector('[data-f="url"]').value, key: dialog.querySelector('[data-f="key"]').value,
+      models: Object.fromEntries([...dialog.querySelectorAll("[data-model]")].map((el) => [el.dataset.model, el.value])) };
+    status.className = ""; status.textContent = endpoint.endsWith("test") ? "Testando…" : "Salvando…";
+    try {
+      const r = await fetch(endpoint, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(body) });
+      const j = await r.json();
+      if (!r.ok || j.ok === false) throw new Error(j.error || `HTTP ${r.status}`);
+      if (endpoint.endsWith("test")) { status.className = "ok"; status.textContent = `Funcionou: o modelo ${j.model} respondeu "${j.text}" em ${(j.ms / 1000).toFixed(1)} s.`; return; }
+      info.config = j.config;
+      status.className = "ok"; status.textContent = "Salvo.";
+      onSaved(j.config);
+    } catch (e) { status.className = "err"; status.textContent = (endpoint.endsWith("test") ? "Não funcionou: " : "Não salvou: ") + e.message; }
+  }
+
+  return {
+    async open(saved) {
+      onSaved = typeof saved === "function" ? saved : () => {};
+      if (!dialog) build();
+      info = await (await fetch("api/ia")).json();
+      form();
+      if (!dialog.open) dialog.showModal();
+    },
+  };
+})();

package/src/studio/public/api-envs-form.js

@@ -0,0 +1,148 @@
+// Ambientes dos slides de API por campos: quem instala do zero preenche endereço, variáveis, segredos e autenticação
+// sem escrever YAML (o arquivo é o mesmo, ~/.sagadeck/ambientes.yaml; a aba "Como texto" continua para quem prefere).
+// Segredo digitado vai cifrado para o arquivo e nunca volta para a página. No servidor multiusuário (ou Studio aberto
+// para a rede) os slides de API não executam: o botão Ambientes nem aparece.
+window.SagaApiEnvsForm = (() => {
+  const $ = (id) => document.getElementById(id);
+  const esc = (s) => String(s ?? "").replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[c]);
+  const svg = (n) => `<i class="ic" data-ic="${n}"><svg viewBox="0 0 24 24" aria-hidden="true">${(window.UI_ICONS || {})[n] || ""}</svg></i>`;
+  let st = null, tab = "form";
+  const status = (text, kind = "") => { const el = $("api-envs-status"); if (el) { el.textContent = text; el.className = `sf-hint api-envs-status ${kind}`; } };
+
+  // sem execução neste Studio (multiusuário, aberto para a rede): o botão some
+  fetch("api/http/state").then((r) => r.json()).then((s) => { if (s && s.live === false) $("btn-api-envs")?.setAttribute("hidden", ""); }).catch(() => {});
+
+  const row = (kind, item = {}) => kind === "var"
+    ? `<div class="aef-row" data-row="var"><input data-k="name" placeholder="nome (ex.: modelo)" value="${esc(item.name)}" spellcheck="false" aria-label="Nome da variável"><input data-k="value" placeholder="valor" value="${esc(item.value)}" spellcheck="false" aria-label="Valor da variável"><button type="button" class="icon-btn" data-del title="Tirar">${svg("x")}</button></div>`
+    : `<div class="aef-row" data-row="secret"><input data-k="name" placeholder="nome (ex.: senha)" value="${esc(item.name)}" spellcheck="false" aria-label="Nome do segredo"><input data-k="value" type="password" autocomplete="off" placeholder="${item.set ? "guardado; em branco mantém" : "valor (guardado cifrado)"}" aria-label="Valor do segredo"><input data-k="env" placeholder="ou variável de ambiente" value="${esc(item.env)}" spellcheck="false" aria-label="Variável de ambiente do segredo"><button type="button" class="icon-btn" data-del title="Tirar">${svg("x")}</button></div>`;
+
+  function card(e, current) {
+    const a = e.auth || { type: "nenhuma" };
+    return `<section class="aef-env" data-env>
+      <div class="aef-head"><input data-k="envname" value="${esc(e.name)}" placeholder="nome (dev, hom, prod)" spellcheck="false" aria-label="Nome do ambiente">
+        <label class="aef-cur"><input type="radio" name="aef-current" ${e.name === current ? "checked" : ""}> em uso</label>
+        <button type="button" class="btn btn-secondary btn-sm" data-test>Testar</button>
+        <button type="button" class="icon-btn" data-remove title="Tirar este ambiente">${svg("trash-2")}</button></div>
+      <label>Endereço base <small>vira <code>{{base}}</code> nos slides</small></label>
+      <input data-k="base" value="${esc(e.base)}" placeholder="https://api.exemplo.com/v1" spellcheck="false">
+      <label>Variáveis <small><code>{{nome}}</code> nos slides</small></label>
+      <div data-list="var">${(e.vars || []).map((v) => row("var", v)).join("")}</div>
+      <button type="button" class="btn-link" data-add="var">+ variável</button>
+      <label>Segredos <small><code>{{secret.nome}}</code> nos slides; nunca vão para o deck</small></label>
+      <div data-list="secret">${(e.secrets || []).map((v) => row("secret", v)).join("")}</div>
+      <button type="button" class="btn-link" data-add="secret">+ segredo</button>
+      <label>Autenticação</label>
+      <select data-k="auth"><option value="nenhuma">Nenhuma</option><option value="bearer">Token fixo (Authorization: Bearer)</option><option value="token">Token que expira (client credentials)</option></select>
+      <div class="aef-auth" data-auth="bearer"><input data-k="bearer" type="password" autocomplete="off" placeholder="${a.type === "bearer" && a.secretSet ? "token guardado; em branco mantém" : "o token"}" aria-label="Token fixo"><input data-k="bearerEnv" placeholder="ou variável de ambiente" value="${esc(a.type === "bearer" ? a.secretEnv : "")}" spellcheck="false" aria-label="Variável do token"></div>
+      <div class="aef-auth" data-auth="token"><input data-k="tokenUrl" placeholder="endereço do token (https://…/token)" value="${esc(a.url)}" spellcheck="false" aria-label="Endereço do token"><input data-k="clientId" placeholder="client id" value="${esc(a.client_id)}" spellcheck="false" aria-label="Client id"><input data-k="clientSecret" type="password" autocomplete="off" placeholder="${a.type === "token" && a.secretSet ? "client secret guardado; em branco mantém" : "client secret"}" aria-label="Client secret"><input data-k="clientSecretEnv" placeholder="ou variável de ambiente do secret" value="${esc(a.type === "token" ? a.secretEnv : "")}" spellcheck="false" aria-label="Variável do client secret"><input data-k="field" placeholder="campo do token na resposta (access_token)" value="${esc(a.field)}" spellcheck="false" aria-label="Campo do token"></div>
+      ${e.advanced ? '<p class="muted aef-note">Este ambiente tem configurações avançadas (certificado, outros cabeçalhos); elas ficam como estão. Veja na aba Como texto.</p>' : ""}
+      <div class="aef-result" data-result></div>
+    </section>`;
+  }
+
+  function wire(root) {
+    root.querySelectorAll("[data-env]").forEach((sec) => {
+      const sel = sec.querySelector('[data-k="auth"]');
+      const show = () => sec.querySelectorAll("[data-auth]").forEach((d) => { d.hidden = d.dataset.auth !== sel.value; });
+      sel.onchange = show;
+      sec.querySelector("[data-remove]").onclick = () => { sec.remove(); empty(); };
+      sec.querySelector("[data-test]").onclick = () => test(sec);
+      sec.querySelectorAll("[data-add]").forEach((b) => (b.onclick = () => { sec.querySelector(`[data-list="${b.dataset.add}"]`).insertAdjacentHTML("beforeend", row(b.dataset.add)); wireRows(sec); }));
+      wireRows(sec);
+      show();
+    });
+  }
+  const wireRows = (sec) => sec.querySelectorAll("[data-del]").forEach((b) => (b.onclick = () => b.closest(".aef-row").remove()));
+  function empty() {
+    const intro = $("api-envs-form").querySelector("[data-intro]");
+    if (intro) intro.hidden = !!$("api-envs-form").querySelector("[data-env]");
+  }
+
+  function render() {
+    const box = $("api-envs-form");
+    box.innerHTML = `<div class="aef-intro" data-intro><p><b>Você ainda não tem ambientes seus.</b> O <b>ENSAIO</b> (uma API de mentira que vem com o sagadeck) já funciona nos slides de API, sem configurar nada.</p><p>Para ligar a sua API, adicione um ambiente: o endereço base, as variáveis, os segredos e como ela autentica. Fica gravado nesta máquina, em <code>${esc(st.file)}</code>.</p></div>
+      <div data-envs>${st.envs.map((e) => card(e, st.current)).join("")}</div>
+      <button type="button" class="btn btn-secondary" data-new>${svg("plus")} Adicionar ambiente</button>`;
+    box.querySelectorAll("[data-env]").forEach((sec, i) => { sec.querySelector('[data-k="auth"]').value = st.envs[i].auth?.type || "nenhuma"; });
+    box.querySelector("[data-new]").onclick = () => {
+      const names = new Set([...box.querySelectorAll('[data-k="envname"]')].map((i) => i.value));
+      const name = ["dev", "hom", "prod"].find((n) => !names.has(n)) || `ambiente${names.size + 1}`;
+      box.querySelector("[data-envs]").insertAdjacentHTML("beforeend", card({ name, base: "", vars: [], secrets: [], auth: { type: "nenhuma" } }, names.size ? st.current : name));
+      wire(box.querySelector("[data-envs]").lastElementChild.parentElement);
+      empty();
+      box.querySelector("[data-envs]").lastElementChild.querySelector('[data-k="base"]').focus();
+    };
+    wire(box);
+    empty();
+  }
+
+  function collect() {
+    const envs = [], box = $("api-envs-form");
+    let current = null;
+    for (const sec of box.querySelectorAll("[data-env]")) {
+      const v = (k) => sec.querySelector(`[data-k="${k}"]`)?.value.trim() || "";
+      const name = v("envname");
+      if (sec.querySelector('input[name="aef-current"]').checked) current = name;
+      const rows = (kind) => [...sec.querySelectorAll(`[data-row="${kind}"]`)].map((r) => Object.fromEntries([...r.querySelectorAll("[data-k]")].map((i) => [i.dataset.k, i.value.trim()]))).filter((r) => r.name);
+      const type = v("auth");
+      const auth = type === "bearer" ? { type, value: v("bearer"), secretEnv: v("bearerEnv") }
+        : type === "token" ? { type, url: v("tokenUrl"), client_id: v("clientId"), value: v("clientSecret"), secretEnv: v("clientSecretEnv"), field: v("field") }
+        : { type: "nenhuma" };
+      envs.push({ name, base: v("base"), vars: rows("var"), secrets: rows("secret"), auth });
+    }
+    return { envs, current };
+  }
+
+  async function save() {
+    status("Salvando…");
+    const r = await fetch("api/http/ambientes/form", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(collect()) });
+    const j = await r.json().catch(() => ({}));
+    if (!r.ok) { status(`Não salvou: ${j.error || r.status}`, "err"); return false; }
+    st = j;
+    render();
+    status(`Salvo em ${st.file}. Os slides de API já usam os ambientes novos.`, "ok");
+    return true;
+  }
+
+  async function test(sec) {
+    const out = sec.querySelector("[data-result]");
+    out.className = "aef-result"; out.textContent = "Salvando e testando…";
+    if (!(await save())) { out.textContent = ""; return; }
+    const name = sec.querySelector('[data-k="envname"]')?.value.trim();
+    const again = [...$("api-envs-form").querySelectorAll("[data-env]")].find((s) => s.querySelector('[data-k="envname"]').value === name);
+    const res = again?.querySelector("[data-result]") || out;
+    try {
+      const j = await (await fetch("api/http/ambientes/testar", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ name }) })).json();
+      if (j.error) throw new Error(j.error);
+      const parts = [j.base ? (j.base.ok ? `endereço respondeu (HTTP ${j.base.status})` : `endereço não respondeu: ${j.base.error}`) : "sem endereço base",
+        ...(j.token ? [j.token.ok ? `token obtido (…${j.token.last4})` : `token falhou: ${j.token.error}`] : [])];
+      const ok = (!j.base || j.base.ok) && (!j.token || j.token.ok);
+      res.className = `aef-result ${ok ? "ok" : "err"}`;
+      res.textContent = (ok ? "Funcionou: " : "Problema: ") + parts.join("; ") + ".";
+    } catch (e) { res.className = "aef-result err"; res.textContent = `Não testou: ${e.message}`; }
+  }
+
+  function setTab(t) {
+    tab = t;
+    document.querySelectorAll("[data-envs-tab]").forEach((b) => b.classList.toggle("active", b.dataset.envsTab === t));
+    $("api-envs-form").hidden = t !== "form";
+    $("api-envs-textmode").hidden = t !== "text";
+    $("btn-api-envs-save").disabled = false;
+    status("");
+    if (t === "text") $("api-envs-text").dispatchEvent(new Event("input")); // a aba de texto valida antes de liberar o Salvar
+  }
+
+  async function open() {
+    document.querySelectorAll("[data-envs-tab]").forEach((b) => (b.onclick = async () => { if (b.dataset.envsTab === "text") { const j = await (await fetch("api/http/ambientes")).json().catch(() => ({})); if (j.text != null) $("api-envs-text").value = j.text; } else await load(); setTab(b.dataset.envsTab); }));
+    await load();
+    setTab("form");
+  }
+  async function load() {
+    const r = await fetch("api/http/ambientes/form");
+    st = await r.json().catch(() => ({ envs: [] }));
+    if (!r.ok) { status(st.error || `HTTP ${r.status}`, "err"); st = { envs: [], file: "" }; }
+    render();
+  }
+
+  return { open, save, active: () => tab === "form" };
+})();

package/src/studio/public/app.js

@@ -3032,27 +3032,8 @@
   // ==========================================================================
   // LLM: STATUS E GERAÇÃO DE DECK
   // ==========================================================================
-  async function openAISettings() {
-    // O console protege-se com frame-ancestors self: abrir numa aba, nunca dentro de iframe.
-    const setupWindow = window.open("about:blank", "sagadeck-ai-setup");
-    let dialog = document.getElementById("ai-settings-dialog");
-    if (!dialog) {
-      dialog = document.createElement("dialog"); dialog.id = "ai-settings-dialog"; dialog.className = "ai-settings-dialog";
-      dialog.innerHTML = '<div class="ai-settings-head"><h2>Configurar IA</h2><button type="button" data-close>Fechar</button></div><p data-ai-info>Verificando a conexão...</p><a data-ai-link target="_blank" rel="noopener" hidden>Abrir configuração do modelrelay</a><button type="button" data-ai-refresh>Verificar conexão</button>';
-      document.body.append(dialog);dialog.querySelector('[data-close]').onclick=()=>dialog.close();
-      dialog.addEventListener('close',()=>refreshAIStatus(true));
-      dialog.querySelector('[data-ai-refresh]').onclick=()=>openAISettings();
-    }
-    if (!dialog.open) dialog.showModal();
-    await refreshAIStatus(true);
-    const info=dialog.querySelector('[data-ai-info]'), link=dialog.querySelector('[data-ai-link]');
-    try {
-      const setup=await (await fetch('api/ai/setup')).json();
-      info.textContent=state.ai.available ? `Conectada · modelo de texto: ${state.ai.textModel}. A configuração abre em uma aba própria.` : 'O serviço de IA não está respondendo. Inicie modelrelay serve neste computador e clique em Verificar conexão.';
-      if(setup.url){link.href=setup.url;link.hidden=false;if(setupWindow){setupWindow.opener=null;setupWindow.location.href=setup.url;dialog.close();}}
-      else {setupWindow?.close();link.hidden=true;}
-    } catch { setupWindow?.close();info.textContent='Não foi possível consultar a configuração. Verifique a conexão e tente novamente.'; }
-  }
+  // Configurar IA: provedor, chave e modelos desta máquina (ai-settings.js)
+  function openAISettings() { window.SagaAISettings.open(() => refreshAIStatus(true)); }
 
   async function refreshAIStatus(force = false) {
     try {
@@ -3065,7 +3046,7 @@
     dom.aiStatus.textContent = on ? "IA ligada" : "IA desligada";
     dom.aiStatus.title = on
       ? `LLM em ${state.ai.url} · texto: ${state.ai.textModel} · imagem: ${state.ai.imageModel}`
-      : `Nenhum LLM em ${state.ai.url || "?"}. Rode "modelrelay serve" ou defina SAGADECK_LLM_URL. Clique para configurar a IA.`;
+      : state.ai.configured ? `Nenhum LLM respondendo em ${state.ai.url}. Clique para conferir o provedor e a chave.` : "A IA não está configurada. Clique para informar provedor e chave.";
     dom.aiStatus.classList.toggle("on", on);
     dom.aiStatus.classList.toggle("off", !on);
   }
@@ -3073,7 +3054,7 @@
   function openAiDeckModal() {
     dom.aiDeckTheme.innerHTML = '<option value="">A IA escolhe</option>' +
       (state.themes || []).map((t) => `<option value="${t}">${t}</option>`).join("");
-    dom.aiDeckStatus.textContent = state.ai.available ? "" : 'Nenhum LLM disponível — rode "modelrelay serve" antes de gerar.';
+    dom.aiDeckStatus.textContent = state.ai.available ? "" : "IA desligada: clique em IA desligada, no alto, para configurar antes de gerar.";
     // cada abertura recomeça do sensato: 15 min viram 10 slides
     dom.aiDeckMinutes.value = "15";
     dom.aiDeckSlides.value = "10";
@@ -3449,6 +3430,7 @@ ${ta.value}`;
     renderApiEnvChips(st);
     if (!j.exists) apiEnvsStatus("Este arquivo ainda não existe. Validando o modelo antes de habilitar Salvar…");
     void validateApiEnvs();
+    await window.SagaApiEnvsForm.open(); // por campos é o padrão (api-envs-form.js); o texto fica na outra aba
   }
   function closeApiEnvs() { apiEnvsModal().classList.add("hidden"); }
   async function saveApiEnvs() {
@@ -3934,7 +3916,7 @@ ${ta.value}`;
     document.getElementById("btn-api-envs").addEventListener("click", openApiEnvs);
     document.getElementById("btn-close-api-envs").addEventListener("click", closeApiEnvs);
     document.getElementById("btn-api-envs-cancel").addEventListener("click", closeApiEnvs);
-    document.getElementById("btn-api-envs-save").addEventListener("click", saveApiEnvs);
+    document.getElementById("btn-api-envs-save").addEventListener("click", async () => { if (!window.SagaApiEnvsForm.active()) return saveApiEnvs(); if (await window.SagaApiEnvsForm.save()) await refreshStudioVars(); });
     document.getElementById("btn-api-vars-studio").addEventListener("click", () => openPane("vars"));
     document.getElementById("api-envs-text").addEventListener("input", scheduleApiEnvValidation);
     // grade de variáveis: grava ao sair da célula (change) ou no Enter; Esc desfaz; a linha em branco do fim cria

package/src/studio/public/index.html

@@ -748,11 +748,15 @@
       <div class="modal-dialog-body api-envs-body">
         <p class="muted api-envs-intro">Endereços, tokens e segredos ficam na sua máquina, nunca no deck (o deck pode ir para o GitHub).
           Nos slides, <code>{{base}}</code> vira o <code>vars.base</code> do ambiente em uso; segredos entram como <code>{{secret.nome}}</code>.</p>
+        <div class="api-envs-tabs" role="tablist"><button type="button" role="tab" data-envs-tab="form" class="active">Por campos</button><button type="button" role="tab" data-envs-tab="text">Como texto (avançado)</button></div>
+        <div id="api-envs-form" class="api-envs-form"></div>
+        <div id="api-envs-textmode" hidden>
         <p class="muted api-envs-safety">O YAML é validado antes de salvar. Uma cópia da versão anterior fica ao lado do arquivo como <code>.bak</code>.</p>
         <div class="napkin-label">Ambiente em uso <span class="muted">— o selo no slide também troca</span></div>
         <div id="api-envs-list" class="api-envs-list"></div>
         <div class="napkin-label">Arquivo <code id="api-envs-file" class="muted"></code></div>
         <textarea id="api-envs-text" class="form-control mono" rows="20" spellcheck="false" aria-label="Conteúdo do ambientes.yaml"></textarea>
+        </div>
         <div id="api-envs-status" class="sf-hint api-envs-status"></div>
       </div>
       <div class="modal-dialog-footer">
@@ -842,6 +846,8 @@
   <script src="fit.js"></script>
   <script src="ui-icons.js"></script>
   <script src="update-notice.js"></script>
+  <script src="ai-settings.js"></script>
+  <script src="api-envs-form.js"></script>
   <script src="calc-fields.js"></script>
   <script src="art-preview.js"></script>
   <script src="api-collections.js"></script>

package/src/studio/public/library.css

@@ -28,6 +28,10 @@ body.lib { display: grid; grid-template-columns: 218px minmax(0, 1fr); grid-temp
 .lib-search { display: flex; align-items: center; gap: 9px; width: 228px; height: 37px; color: var(--text-3); padding: 0 11px; background: transparent; border: 1px solid var(--ui-line); border-radius: 8px; }
 .lib-search input { background: none; color: var(--text); border: 0; outline: 0; width: 100%; min-width: 0; font-size: 11px; }
 .lib-search kbd { border: 1px solid var(--ui-line); border-radius: 3px; font-size: 10px; padding: 0 4px; }
+.ai-banner { display: flex; align-items: center; gap: 12px; margin: 10px 24px 0; padding: 10px 14px; border-radius: 10px; background: #fef3c7; color: #78350f; border: 1px solid #f59e0b; font-size: 13px; }
+.ai-banner[hidden] { display: none; }
+.ai-banner span { flex: 1; }
+.ai-banner .ic { width: 18px; height: 18px; flex: none; }
 .lib-btn { display: inline-flex; justify-content: center; align-items: center; gap: 8px; min-height: 38px; padding: 0 15px; border-radius: 8px; border: 1px solid transparent; font-size: 12px; font-weight: 600; text-decoration: none; transition: background .15s, transform .15s; }
 .lib-btn.primary { background: var(--brand-fill); color: var(--on-brand); box-shadow: 0 3px 8px #634ce916; }
 .lib-btn.primary:hover { background: var(--brand-fill-hover); transform: translateY(-1px); }

package/src/studio/public/library.html

@@ -28,10 +28,11 @@
     <button class="lib-icon-btn" id="btn-theme" title="Alternar tema claro e escuro" aria-label="Alternar tema claro e escuro"><i class="ic" data-ic="sun-moon"></i></button>
     <div class="lib-user" id="user" hidden><div class="lib-avatar" id="avatar"></div><span class="uname" id="uname"></span></div>
   </header>
+  <div class="ai-banner" id="ai-banner" role="status" hidden><i class="ic" data-ic="sparkles"></i><span>A IA ainda não está configurada. Configure para gerar apresentações e conversar no chat (o resto já funciona).</span><button type="button" class="lib-btn primary" id="ai-banner-btn">Configurar IA</button></div>
   <div class="lib-body">
     <aside class="lib-side">
       <nav id="side" aria-label="Biblioteca"></nav>
-      <a class="lib-btn ghost ai-settings" id="btn-ai" hidden target="_blank" rel="noopener" title="Provedores, chaves e modelos de IA"><i class="ic" data-ic="sliders-horizontal"></i><span class="lbl">modelrelay</span></a>
+      <button type="button" class="lib-btn ghost ai-settings" id="btn-ai" hidden title="Provedores, chaves e modelos de IA"><i class="ic" data-ic="sliders-horizontal"></i><span class="lbl">Configurar IA</span></button>
     </aside>
     <main class="lib-main" id="main" tabindex="-1" aria-live="polite"><div class="initial-loading"><span class="loading-orbit"></span>Preparando seu estúdio…</div></main>
   </div>
@@ -51,6 +52,7 @@
   <div class="ltoast" id="toast" role="status"></div>
   <script src="ui-icons.js"></script>
   <script src="update-notice.js"></script>
+  <script src="ai-settings.js"></script>
   <script src="library.js"></script>
 </body>
 </html>

package/src/studio/public/library.js

@@ -58,8 +58,12 @@
     if (view !== "recentes" && view !== "todas" && view !== "lixeira" && !topicOf(view)) view = "recentes";
     render();
   }
-  // botão IA: a tela de configuração do modelrelay local, quando existe
-  api("api/ai/setup").then(({ url }) => { if (url) { $("#btn-ai").href = url; $("#btn-ai").hidden = false; } }).catch(() => {});
+  // botão IA: provedor, chave e modelos desta máquina (ai-settings.js); no multiusuário quem configura é quem administra
+  // e, enquanto a IA não estiver configurada, a faixa "Configure a IA" (some ao salvar)
+  const aiSaved = () => { $("#ai-banner").hidden = true; };
+  api("api/ia").then(({ editable, configured }) => { $("#btn-ai").hidden = !editable; $("#ai-banner").hidden = !editable || configured; hydrate($("#ai-banner")); }).catch(() => {});
+  $("#btn-ai").onclick = () => window.SagaAISettings.open(aiSaved);
+  $("#ai-banner-btn").onclick = () => window.SagaAISettings.open(aiSaved);
   const openEditor = (id, present) => { location.href = `editor?deck=${encodeURIComponent(id)}${present ? "&present=1" : ""}`; };
 
   // ---------------------------------------------------------------- barra lateral
@@ -111,7 +115,7 @@
     const match = (d) => !q || d.title.toLowerCase().includes(q);
     const main = $("#main");
     if (view === "lixeira") {
-      main.innerHTML = `<div class="head"><div><h1>Lixeira</h1><div class="sub">Fica aqui por um dia; depois é apagado de vez.</div></div>${data.trash.length ? `<button class="lib-btn ghost danger" data-empty-trash>${ic("trash-2")}Esvaziar lixeira</button>` : ""}</div>` +
+      main.innerHTML = `<div class="head"><div><h1>Lixeira</h1><div class="sub">Fica aqui por ${data.trashDays === 1 ? "um dia" : `${data.trashDays || 30} dias`}; depois é apagado de vez (o prazo se muda em Preferências).</div></div>${data.trash.length ? `<button class="lib-btn ghost danger" data-empty-trash>${ic("trash-2")}Esvaziar lixeira</button>` : ""}</div>` +
         (data.trash.length ? data.trash.map((t) => `<div class="trash-row"><div class="t"><b>${esc(t.title)}</b><div class="sub">Era de ${esc(t.topic || NO_TOPIC.name)} · ${t.slides || 0} slides · excluída ${ago(t.deleted)}</div></div>
           <button class="lib-btn ghost" data-restore="${esc(t.id)}">${ic("rotate-ccw")}Restaurar</button><button class="lib-btn ghost danger" data-purge="${esc(t.id)}">Excluir de vez</button></div>`).join("")
           : `<div class="empty"><div class="big">${ic("trash-2")}</div><h2>Lixeira vazia</h2></div>`);
@@ -211,7 +215,7 @@
       if (a === "open" || a === "present") return openEditor(id, a === "present");
       if (a === "rename") return nameDialog("Renomear apresentação", d.title, (title) => act(() => api("api/library/decks/rename", { id, title }), "Renomeada"));
       if (a === "dup") return act(() => api("api/library/decks/duplicate", { id }), "Cópia criada");
-      if (a === "trash") return act(() => api("api/library/decks/trash", { id }), "Na lixeira — dá para restaurar por um dia");
+      if (a === "trash") return act(() => api("api/library/decks/trash", { id }), `Na lixeira — dá para restaurar por ${data.trashDays === 1 ? "um dia" : `${data.trashDays || 30} dias`}`);
     });
     m.querySelectorAll("[data-move]").forEach((b) => b.onclick = () => { closeMenus(); act(() => api("api/library/decks/move", { id, topic: b.dataset.move }), `Movida para ${topicOf(b.dataset.move).name}`); });
     m.querySelectorAll("[data-dl]").forEach((b) => b.onclick = () => {

package/src/studio/public/preferences-ui.js

@@ -15,6 +15,9 @@ window.SagaPrefs = function ({ dom, store, escHtml, escAttr, fold, setAppTheme,
       { k: "ia.autor", type: "text", label: "Seu nome", hint: "Vai na capa e no rodapé das apresentações novas (no lugar de \"Seu Nome\")." },
       { k: "ia.idioma", type: "select", options: [["auto", "O do pedido"], ["português do Brasil", "Português (Brasil)"], ["inglês", "Inglês"], ["espanhol", "Espanhol"]], label: "Idioma do conteúdo gerado" },
     ] },
+    { id: "biblioteca", title: "Biblioteca", items: [
+      { k: "biblioteca.lixeiraDias", type: "select", options: [["1", "1 dia"], ["7", "7 dias"], ["30", "30 dias"], ["90", "90 dias"]], label: "Quanto tempo a lixeira guarda", hint: "Apresentação excluída fica restaurável por esse tempo; depois é apagada de vez." },
+    ] },
     { id: "exportacao", title: "Exportação", items: [
       { k: "exportacao.pdfClaro", type: "bool", label: "PDF na versão clara do tema", hint: "Tema escuro com par claro (ex.: Manual noite) sai claro no PDF, melhor para imprimir." },
     ] },

package/src/studio/public/style.css

@@ -812,6 +812,29 @@ textarea.form-control.napkin-input { min-height: 220px; resize: vertical; font-f
 .bs-option:disabled { opacity: .5; }
 .ai-msg.bs .ai-avatar { background: #8b5cf6; }
 .bs-tag { font-size: 11px; color: var(--text-3); margin-bottom: 4px; }
+/* Ambientes por campos (api-envs-form.js) */
+.api-envs-tabs { display: flex; gap: 6px; margin: 4px 0 10px; }
+.api-envs-tabs button { border: 1px solid var(--border, rgba(127,127,127,.3)); background: transparent; color: inherit; border-radius: 999px; padding: 4px 12px; cursor: pointer; font-size: 12px; }
+.api-envs-tabs button.active { background: var(--selected); border-color: var(--brand); color: var(--brand); }
+.api-envs-form { display: flex; flex-direction: column; gap: 10px; }
+.aef-intro p { margin: 0 0 6px; }
+.aef-env { border: 1px solid var(--border, rgba(127,127,127,.3)); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
+.aef-env label { font-size: 12px; font-weight: 600; margin-top: 6px; }
+.aef-env label small { font-weight: 400; color: var(--text-3); }
+.aef-env input, .aef-env select { width: 100%; box-sizing: border-box; padding: 5px 8px; border: 1px solid var(--border, rgba(127,127,127,.3)); border-radius: 6px; background: var(--bg, transparent); color: inherit; font: inherit; font-size: 13px; }
+.aef-head { display: flex; gap: 8px; align-items: center; }
+.aef-head input[data-k="envname"] { font-weight: 600; max-width: 180px; }
+.aef-head .aef-cur { display: flex; align-items: center; gap: 4px; margin: 0; font-weight: 400; white-space: nowrap; }
+.aef-head .aef-cur input { width: auto; }
+.aef-head [data-test] { margin-left: auto; }
+.aef-row, .aef-auth { display: flex; gap: 6px; align-items: center; }
+.aef-auth { flex-wrap: wrap; margin-top: 4px; }
+.aef-auth input { flex: 1 1 180px; }
+.aef-env .btn-link { align-self: flex-start; background: none; border: 0; color: var(--brand); cursor: pointer; padding: 2px 0; font-size: 12px; }
+.aef-note { font-size: 12px; margin: 6px 0 0; }
+.aef-result { font-size: 12px; min-height: 1em; }
+.aef-result.ok { color: #15803d; } .aef-result.err { color: var(--danger, #b91c1c); }
+
 /* leitura crítica: um cartão por ponto, ligado ao slide, com Aplicar e Ignorar */
 .crit-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
 .crit-item { border: 1px solid var(--border, rgba(127,127,127,.3)); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; }

package/src/studio/server.js

@@ -5,6 +5,7 @@ import {chatErrorResult,installErrorResponses} from './errors.js';
 // sagadeck Studio · Servidor HTTP local para o editor visual PowerPoint + Chat Lateral IA
 import { slideCopyRoutes } from "./slide-copy-routes.js";
 import { publicScript } from "./public-files.js";
+import { iaRoutes } from "./ia-routes.js";
 import { codeWatch } from "./code-version.js";
 import {meetingRoutes,meetingPreview} from '../meeting.js';
 import { codeRoutes } from "./code-routes.js";
@@ -40,7 +41,7 @@ import { generateForStudio } from "./generate.js";
 import { runCommand, logCommand } from "../ai/commands.js";
 import { needsApproval, approvalLabel, awaitApproval, commandEnv, estimateSubmitCost } from "./command-approval.js";
 import { demoDeck, demoAssets, demoProjectFiles } from "./demo-decks.js";
-import { llmAvailable, llmConfig } from "../ai/llm.js";
+import { llmAvailable, llmConfig, llmConfigured } from "../ai/llm.js";
 import { editDeck, textToSlide, toYaml, materializeImages } from "../ai/deck-ai.js";
 import { transformDeck, jobStatus, sourceHash } from "../ai/transform.js";
 import { sendExport, sendHtml, lightVariant } from "./exporting.js";
@@ -892,27 +893,14 @@ export function createStudioServer(deckPath = null, opts = {}) {
         return;
       }
 
-      // Tela de configuração da IA: é do modelrelay (vale para todos os apps). Só aparece quando ele
-      // roda nesta máquina e tem a tela; no multiusuário quem configura é o admin, pelo portal.
-      if (pathname === "/api/ai/setup" && req.method === "GET") {
-        let setup = null;
-        const base = llmConfig().url.replace(/\/v1$/, "");
-        if (!opts.multiuser && /^http:\/\/(127\.0\.0\.1|localhost)(:\d+)?$/.test(base)) {
-          try {
-            const r = await fetch(base + "/api/console/config", { signal: AbortSignal.timeout(1500) });
-            if (r.ok) setup = base + "/";
-          } catch {}
-        }
-        res.writeHead(200, { "Content-Type": "application/json" });
-        res.end(JSON.stringify({ url: setup }));
-        return;
-      }
+      // Configurar IA (provedor, chave, modelos desta máquina): src/studio/ia-routes.js
+      if (pathname.startsWith("/api/ia") && await iaRoutes({ req, res, pathname, opts, readJSON })) return;
 
       if (pathname === "/api/ai/status" && req.method === "GET") {
         const cfg = llmConfig();
         const available = await llmAvailable({ force: url.searchParams.has("refresh") });
         res.writeHead(200, { "Content-Type": "application/json" });
-        res.end(JSON.stringify({ available, url: cfg.url, textModel: cfg.textModel, imageModel: cfg.imageModel }));
+        res.end(JSON.stringify({ available, configured: llmConfigured(cfg), source: cfg.source, url: cfg.url, textModel: cfg.textModel, imageModel: cfg.imageModel }));
         return;
       }
 
@@ -954,7 +942,7 @@ export function createStudioServer(deckPath = null, opts = {}) {
         }
         if (!(await llmAvailable({ force: true }))) {
           res.writeHead(503, { "Content-Type": "application/json" });
-          res.end(JSON.stringify({ error: `Nenhum LLM respondendo em ${llmConfig().url}. Rode "modelrelay serve" ou ajuste SAGADECK_LLM_URL.` }));
+          res.end(JSON.stringify({ error: `${llmConfigured() ? `Nenhum LLM respondendo em ${llmConfig().url}. Confira o provedor e a chave em Configurar IA.` : "A IA não está configurada: clique em Configurar IA e informe provedor e chave."}` }));
           return;
         }
         // O deck novo vai para uma pasta própria na biblioteca (regra do CLAUDE.md), no tópico do deck aberto

package/src/studio/slide-copy.js

@@ -11,7 +11,9 @@ export async function copySlideAssets(slide, sourceFile, targetFile) {
  async function file(ref,from=source){
   const abs=path.resolve(from,ref.split(/[?#]/)[0]);const rel=path.relative(source,abs);
   if(rel.startsWith('..')||path.isAbsolute(rel))throw Error('A mídia deve estar dentro da pasta da apresentação de origem.');
-  const real=await fs.realpath(abs);const rr=path.relative(source,real);if(rr.startsWith('..')||path.isAbsolute(rr))throw Error('Referência de mídia fora da apresentação.');
+  // os dois lados pelo caminho real: a pasta aberta por junção (ou nome curto do Windows, RUNNER~1) não bate com o
+  // caminho resolvido do arquivo e toda mídia parecia "fora da apresentação"
+  const real=await fs.realpath(abs);const rr=path.relative(await fs.realpath(source),real);if(rr.startsWith('..')||path.isAbsolute(rr))throw Error('Referência de mídia fora da apresentação.');
   const out=path.join(target,prefix,rel);
   if(!copied.has(abs)){copied.add(abs);await fs.mkdir(path.dirname(out),{recursive:true});await fs.copyFile(abs,out);
    if(/\.(html?|css)$/i.test(abs)){const text=await fs.readFile(abs,'utf8');for(const m of text.matchAll(/(?:src|href)\s*=\s*["']([^"']+)["']|url\(\s*["']?([^)'"\s]+)["']?\s*\)/g)){const dep=m[1]||m[2];if(local(dep))await file(dep,path.dirname(abs));}}