sagadeck 1.4.0 → 1.6.0

package/src/studio/generate.js

@@ -0,0 +1,53 @@
+// Gerar uma apresentação pelo caminho do Studio ("Criar com IA" e chat de deck novo): Preferências, anexos guardados
+// na pasta do deck (com o inventário visual), imagens, revisão pelos slides renderizados e pesquisa. Fica fora do
+// servidor para a avaliação ao vivo (test/bench-live.test.js) medir exatamente o que a pessoa recebe.
+import path from "node:path";
+import { generateDeck } from "../ai/deck-ai.js";
+import { prepareDocumentMaterials } from "../ai/document-materials.js";
+import { reviewExperience } from "../ai/quality.js";
+import { stageBoard } from "../ai/progress.js";
+import { loadPreferences } from "../preferences.js";
+import { slideSnapshots, diagramCheck } from "./snapshot.js";
+
+const DOCUMENT = /\.(pdf|docx?)$/i;
+
+// b: o corpo do pedido (briefing, answer, theme, style, slides, duration, direction); materials: [{ name, text, detail, bytes }]
+// O inventário do documento (a visão lendo página a página: minutos num paper) corre JUNTO com o resto: entender o
+// pedido, pesquisar e a leitura crítica usam só o texto; a escrita espera o inventário. Parou antes (a IA perguntou,
+// deu erro): o inventário é cancelado e a pasta fica livre.
+export async function generateForStudio(b, { dir, materials = [], emit, prefs = loadPreferences().ia, prepare = prepareDocumentMaterials } = {}) {
+  const board = stageBoard((ev) => emit?.(ev));
+  const stop = new AbortController();
+  const withBytes = materials.some((m) => m.bytes);
+  const pending = withBytes ? board.run("Lendo o documento", (onProgress) => prepare(materials, dir, { onProgress, signal: stop.signal })) : null;
+  pending?.catch(() => {}); // quem espera é a geração; se ela parou antes, o erro do cancelamento não importa
+  // enquanto isso, o texto do documento (o binário fica com o inventário); `document` marca que é um documento
+  const text = materials.map(({ bytes, ...m }) => (bytes && DOCUMENT.test(m.name || "") ? { ...m, document: true } : m));
+  try {
+    const gen = await generateDeck(String(b.briefing || ""), {
+      ask: prefs.perguntar !== false && !b.answer, answer: b.answer ? String(b.answer).slice(0, 500) : "",
+      author: prefs.autor || "", language: prefs.idioma || "auto",
+      theme: b.theme || undefined,
+      style: b.style || undefined,
+      slides: Number(b.slides) || undefined,
+      duration: Number(b.duration) || undefined,
+      direction: b.direction || undefined,
+      materials: text,
+      pendingMaterials: pending,
+      board,
+      images: prefs.imagens !== false, // o briefing diz se quer imagens (e onde); Preferências podem desligar
+      imageOptions: { baseDir: dir, assetsDir: path.join(dir, "imagens") },
+      onEvent: emit,
+      drawCheck: diagramCheck,
+      reviewCheck: (deck, indices, o = {}) => reviewExperience({ ...deck, _dir: dir }, indices, { snapshot: slideSnapshots, onProgress: o.onProgress || emit, briefing: b.briefing }),
+      // pesquisa na web quando a IA decidir que precisa (Preferências › IA pode desligar; SAGADECK_WEB=0 no banco);
+      // as fontes lidas ficam em contexto/pesquisa/ do deck
+      research: prefs.pesquisa === false ? false : "auto",
+      researchDir: dir,
+    });
+    return gen;
+  } finally {
+    stop.abort();
+    await pending?.catch(() => {});
+  }
+}

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, 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, providers: PROVIDERS, roles: ROLES, 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/project.js

@@ -6,6 +6,7 @@
 //                   Protegida: só some junto com o projeto inteiro. Nada disso vai no pacote .sagadeck
 //                   (src/package.js leva só o que o deck usa).
 import fs from "node:fs";
+import { renameRetry } from "../fs-retry.js";
 import path from "node:path";
 import crypto from "node:crypto";
 import JSZip from "jszip";
@@ -82,7 +83,7 @@ export function ensureMeta(P) {
   fs.mkdirSync(path.join(P.dir, CONTEXT), { recursive: true }); // à vista: é aqui que moram anexos, prints e planilhas
   const conv = path.join(P.dir, META, "conversa.json"), legacy = P.file.replace(/\.ya?ml$/i, ".conversa.json");
   // conversa antiga (ao lado do deck) passa para dentro do projeto
-  if (fs.existsSync(legacy) && !fs.existsSync(conv)) { try { fs.renameSync(legacy, conv); } catch {} }
+  if (fs.existsSync(legacy) && !fs.existsSync(conv)) { try { renameRetry(legacy, conv); } catch {} }
   return conv;
 }
 export const conversationFile = (P) => ensureMeta(P);
@@ -101,7 +102,7 @@ export function writeText(P, rel, text) {
   fs.mkdirSync(path.dirname(abs), { recursive: true });
   const tmp = `${abs}.tmp-${process.pid}`;
   fs.writeFileSync(tmp, String(text ?? ""), "utf8");
-  fs.renameSync(tmp, abs);
+  renameRetry(tmp, abs);
   return { path: r };
 }
 export function createFile(P, dirRel, name, text = "") {
@@ -136,7 +137,7 @@ export function rename(P, fromRel, toName) {
   const to = resolveIn(P, path.posix.join(path.posix.dirname(r), n));
   if (fs.existsSync(to)) throw new Error(`Já existe "${n}" nessa pasta.`);
   if (isMeta(relOf(P, to))) throw new Error(`A pasta ${META} é do Studio.`);
-  fs.renameSync(abs, to);
+  renameRetry(abs, to);
   return { path: relOf(P, to) };
 }
 export function move(P, fromRel, toDirRel) {
@@ -146,7 +147,7 @@ export function move(P, fromRel, toDirRel) {
   if (isMeta(d)) throw new Error(`A pasta ${META} é do Studio.`);
   if (dest === abs || dest.startsWith(abs + path.sep)) throw new Error("Não dá para mover uma pasta para dentro dela mesma.");
   const to = unique(path.join(dest, path.basename(abs)));
-  fs.renameSync(abs, to);
+  renameRetry(abs, to);
   return { path: relOf(P, to) };
 }
 // apagar = mandar para a lixeira do projeto (.sagadeck/lixeira), de onde dá para restaurar
@@ -158,7 +159,7 @@ export function remove(P, rel) {
   fs.mkdirSync(bin, { recursive: true });
   const stamp = new Date().toISOString().replace(/[:.]/g, "-");
   const to = path.join(bin, `${stamp}__${r.replace(/\//g, "__")}`);
-  fs.renameSync(abs, to);
+  renameRetry(abs, to);
   return { trashed: relOf(P, to) };
 }
 export function restore(P, trashedRel) {
@@ -167,7 +168,7 @@ export function restore(P, trashedRel) {
   const orig = path.basename(abs).split("__").slice(1).join("/");
   const to = unique(resolveIn(P, orig));
   fs.mkdirSync(path.dirname(to), { recursive: true });
-  fs.renameSync(abs, to);
+  renameRetry(abs, to);
   return { path: relOf(P, to) };
 }
 
@@ -228,7 +229,7 @@ export function writeSheet(P, rel, rows) {
   const clean = rows.map((r) => r.map((c) => String(c ?? "")));
   while (clean.length > 1 && clean.at(-1).every((c) => c === "")) clean.pop(); // linha vazia no fim (o cursor passou dela) não vai para o arquivo
   fs.writeFileSync(tmp, toCSV(clean, old));
-  fs.renameSync(tmp, abs);
+  renameRetry(tmp, abs);
   return { path: relOf(P, abs), delimiter: old.delimiter };
 }
 

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

@@ -0,0 +1,76 @@
+// 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 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>'}
+      <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])}" spellcheck="false"><small>${HINT[r] || ""}</small></div>`).join("")}</div>
+      <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();
+    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/app.js

@@ -1907,6 +1907,8 @@
         rv.title = slide.review.note || "";
         card.appendChild(rv);
       }
+      const pv = window.SagaProvenance?.(slide, hydrateIcons); // origem do conteúdo (provenance.js)
+      if (pv) card.appendChild(pv);
       if (Array.isArray(slide.auto) && slide.auto.length) {
         const badge = document.createElement("span");
         badge.className = "thumb-auto";
@@ -3030,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 {
@@ -3063,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);
   }
@@ -3071,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";
@@ -3343,142 +3326,8 @@
     }
   }
 
-  // --------------------------------------------------------------------------
-  // CABEÇALHO E RODAPÉ: modelos prontos + campos com variáveis + prévia do slide atual
-  // --------------------------------------------------------------------------
-  const HF_PRESETS = [
-    { id: "padrao", name: "Padrão", desc: "Título e número", footer: null, header: null },
-    { id: "autor", name: "Autor e evento", desc: "Autor · evento e 3 / 20", footer: { left: "{autor} · {evento}", right: "{n} / {total}" }, header: null },
-    { id: "evento", name: "Evento e data", desc: "Evento, data e número", footer: { left: "{evento}", center: "{data:DD MMM AAAA}", right: "{pagina}" }, header: null },
-    { id: "corp", name: "Corporativo", desc: "Área e Confidencial em cima; título, data e página embaixo",
-      header: { left: "{depto}", right: "Confidencial" }, footer: { left: "{titulo}", center: "{data:MM/AAAA}", right: "{n} / {total}" } },
-    { id: "numero", name: "Só o número", desc: "Número discreto no canto", footer: { right: "{n}" }, header: null },
-    { id: "nenhum", name: "Nenhum", desc: "Slides limpos", footer: false, header: null },
-  ];
-  const HF_TOKENS = [["{titulo}", "Título"], ["{autor}", "Autor"], ["{evento}", "Evento"], ["{depto}", "Departamento"], ["{data:DD/MM/AAAA}", "Data"],
-    ["{data:DD MMM AAAA}", "Data por extenso"], ["{pagina}", "Página (01)"], ["{n}", "Página (1)"], ["{total}", "Total"]];
-  const HF_SLOTS = ["header.left", "header.center", "header.right", "footer.left", "footer.center", "footer.right"];
-  const hfModal = () => document.getElementById("modal-hf");
-  let hfLastInput = null;
-  let hfTimer = null;
-
-  // footer/header do deck -> valores dos 6 campos (o padrão sem footer = título + número)
-  function hfSlotsFrom(v, kind, deck) {
-    if (v === false) return { left: "", center: "", right: "" };
-    if (v == null) return kind === "footer" ? { left: "{titulo}", center: "", right: "{pagina}" } : { left: "", center: "", right: "" };
-    if (typeof v === "string") return { left: v, center: "", right: "{pagina}" };
-    return { left: v.left || "", center: v.center || "", right: v.right || "" };
-  }
-
-  function hfFill(deckLike) {
-    const m = hfModal();
-    for (const k of ["author", "event", "department", "date"]) m.querySelector(`[data-deck="${k}"]`).value = deckLike[k] || "";
-    for (const kind of ["header", "footer"]) {
-      const v = hfSlotsFrom(deckLike[kind], kind, deckLike);
-      for (const pos of ["left", "center", "right"]) m.querySelector(`[data-slot="${kind}.${pos}"]`).value = v[pos];
-    }
-  }
-
-  // o que os campos do modal significam como deck (footer/header "limpos": null = padrão, false = nenhum)
-  function hfRead() {
-    const m = hfModal();
-    const out = {};
-    for (const k of ["author", "event", "department", "date"]) out[k] = m.querySelector(`[data-deck="${k}"]`).value.trim();
-    for (const kind of ["header", "footer"]) {
-      const v = Object.fromEntries(["left", "center", "right"].map((p) => [p, m.querySelector(`[data-slot="${kind}.${p}"]`).value.trim()]));
-      const empty = !v.left && !v.center && !v.right;
-      if (kind === "footer" && v.left === "{titulo}" && !v.center && v.right === "{pagina}") out.footer = null;
-      else if (empty) out[kind] = kind === "footer" ? false : null;
-      else out[kind] = Object.fromEntries(Object.entries(v).filter(([, x]) => x));
-    }
-    return out;
-  }
-
-  function hfApplyTo(deck, vals) {
-    for (const [k, v] of Object.entries(vals)) {
-      if (v == null || v === "") delete deck[k];
-      else deck[k] = v;
-    }
-    return deck;
-  }
-
-  function openHeaderFooter() {
-    const m = hfModal();
-    const presets = m.querySelector(".hf-presets");
-    if (!presets.childElementCount) {
-      for (const p of HF_PRESETS) {
-        const b = document.createElement("button");
-        b.type = "button";
-        b.className = "hf-preset";
-        b.dataset.preset = p.id;
-        b.innerHTML = `<b></b><span></span>`;
-        b.querySelector("b").textContent = p.name;
-        b.querySelector("span").textContent = p.desc;
-        b.onclick = () => {
-          const cur = hfRead();
-          hfFill({ ...cur, footer: p.footer, header: p.header });
-          presets.querySelectorAll(".hf-preset").forEach((x) => x.classList.toggle("active", x === b));
-          hfPreview();
-        };
-        presets.append(b);
-      }
-      const chips = m.querySelector(".hf-tokens");
-      for (const [tok, label] of HF_TOKENS) {
-        const c = document.createElement("button");
-        c.type = "button";
-        c.className = "hf-token";
-        c.dataset.token = tok;
-        c.textContent = label;
-        c.title = tok;
-        c.onmousedown = (e) => e.preventDefault(); // não rouba o foco do campo
-        c.onclick = () => {
-          const inp = hfLastInput || m.querySelector('[data-slot="footer.left"]');
-          const a = inp.selectionStart ?? inp.value.length, z = inp.selectionEnd ?? a;
-          inp.value = inp.value.slice(0, a) + tok + inp.value.slice(z);
-          inp.focus();
-          inp.setSelectionRange(a + tok.length, a + tok.length);
-          hfPreview();
-        };
-        chips.append(c);
-      }
-      m.querySelectorAll("input").forEach((inp) => {
-        inp.addEventListener("focus", () => { if (inp.dataset.slot) hfLastInput = inp; });
-        inp.addEventListener("input", () => { clearTimeout(hfTimer); hfTimer = setTimeout(hfPreview, 250); });
-      });
-    }
-    hfFill(state.deck);
-    m.classList.remove("hidden");
-    hfPreview();
-  }
-
-  function closeHeaderFooter() {
-    hfModal().classList.add("hidden");
-  }
-
-  async function hfPreview() {
-    const stage = hfModal().querySelector(".hf-stage");
-    const spec = hfApplyTo(JSON.parse(JSON.stringify(state.deck)), hfRead());
-    // na prévia, um slide que mostra rodapé (a capa não mostra)
-    let i = state.currentSlideIndex;
-    const NO_BARS = ["cover", "section", "end", "image", "canvas", "full", "headline"];
-    if (NO_BARS.includes(spec.slides[i]?.layout)) i = Math.max(0, spec.slides.findIndex((s) => !NO_BARS.includes(s.layout)));
-    try {
-      const r = await (await fetch("api/render-slide", { method: "POST", headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ slide: spec.slides[i], index: i, spec }) })).json();
-      stage.innerHTML = `<div class="thumb-render">${r.html}</div>`;
-      requestAnimationFrame(() => fitRendered(stage));
-      stage.style.setProperty("--thumb-scale", String(stage.clientWidth / 1920));
-    } catch {}
-  }
-
-  function applyHeaderFooter() {
-    hfApplyTo(state.deck, hfRead());
-    closeHeaderFooter();
-    syncDeckToServer();
-    renderCurrentSlide();
-    renderThumbnails();
-    showToast("Cabeçalho e rodapé aplicados em todos os slides", 2200);
-  }
+  // Cabeçalho e rodapé: modelos prontos, campos com variáveis e prévia (header-footer.js)
+  const { openHeaderFooter, closeHeaderFooter, applyHeaderFooter } = window.SagaHeaderFooter({ state, fitRendered, syncDeckToServer, renderCurrentSlide, renderThumbnails, showToast });
 
   // ---------------------------------------------------------------- slides de API
   // Ambientes: o ~/.sagadeck/ambientes.yaml como texto, validado pelo Studio antes de gravar
@@ -3758,86 +3607,8 @@ ${ta.value}`;
     document.querySelectorAll(".split-button.show, .file-menu-wrap.show").forEach((m) => { if (!m.contains(except)) m.classList.remove("show"); });
   }
 
-  // ==========================================================================
-  // PREFERÊNCIAS (tela única, com busca): as desta máquina ficam em ~/.sagadeck/preferencias.json (servidor);
-  // as do editor, neste navegador. Cada linha diz o que faz; gravar é automático.
-  // ==========================================================================
-  const PREFS_UI = [
-    { id: "texto", title: "Texto e código", items: [
-      { k: "texto.minCodePt", type: "num", unit: "pt", min: 6, max: 24, label: "Tamanho mínimo do código ao encolher", hint: "Código que não cabe encolhe até aqui (10 pt ≈ 20 px no slide). Se nem assim couber, ele rola na apresentação e o fiscal avisa." },
-      { k: "texto.minTextPt", type: "num", unit: "pt", min: 6, max: 30, label: "Tamanho mínimo do texto ao encolher", hint: "Títulos e textos que se ajustam para caber não ficam menores que isto." },
-      { k: "texto.wrapCode", type: "bool", label: "Quebrar linhas longas de código", hint: "Em vez de encolher o bloco todo por causa de uma linha comprida." },
-    ] },
-    { id: "ia", title: "Inteligência artificial", items: [
-      { k: "ia.pesquisa", type: "bool", label: "Pesquisar na web quando precisar", hint: "Ranking, lançamentos, preços, um artigo científico: a IA pesquisa, lê as fontes confiáveis e cita cada uma. Desligado (ou sem internet), ela usa só o que sabe e avisa." },
-      { k: "ia.perguntar", type: "bool", label: "Perguntar quando o pedido não disser para que serve o material", hint: "Ex.: um workshop sem dizer se o pessoal vai guardar o material. Desligado, a IA decide sozinha." },
-      { k: "ia.imagens", type: "bool", label: "Gerar imagens quando o pedido pedir", hint: "Desligado: só ícones, gráficos e diagramas do sagadeck (sem custo de imagem)." },
-      { 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: "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." },
-    ] },
-    { id: "editor", title: "Editor (este navegador)", local: true, items: [
-      { k: "editor.theme", type: "select", options: [["system", "Automática (do sistema)"], ["light", "Clara"], ["dark", "Escura"]], label: "Tema da interface", hint: "Só a interface do Studio; o slide mantém o tema dele.",
-        get: () => store.get("appTheme", "system"), set: (v) => setAppTheme(v) },
-      { k: "editor.guides", type: "bool", label: "Mostrar as guias da área segura", hint: "O retângulo pontilhado onde o conteúdo cabe sem cortar.",
-        get: () => dom.chkGuides.checked, set: (v) => { dom.chkGuides.checked = v; dom.chkGuides.dispatchEvent(new Event("change", { bubbles: true })); } },
-      { k: "editor.inspect", type: "bool", label: "Marcar no slide os avisos do fiscal", hint: "Caixas em volta do texto fora da margem, código que não coube, sobreposição.",
-        get: () => dom.chkInspectOverlay.checked, set: (v) => { dom.chkInspectOverlay.checked = v; dom.chkInspectOverlay.dispatchEvent(new Event("change", { bubbles: true })); } },
-    ] },
-  ];
-  let prefsData = null, prefsTimer = null;
-  const prefGet = (key) => { const [sec, k] = key.split("."); return prefsData?.[sec]?.[k]; };
-  async function openPrefs() {
-    const modal = document.getElementById("modal-prefs");
-    modal.classList.remove("hidden");
-    try {
-      const r = await fetch("api/preferences"); const j = await r.json();
-      prefsData = j.prefs; document.getElementById("prefs-file").textContent = j.file || "";
-    } catch { prefsData = {}; }
-    renderPrefs();
-    const q = document.getElementById("prefs-search"); q.value = ""; q.focus();
-  }
-  function renderPrefs() {
-    const nav = document.getElementById("prefs-nav"), list = document.getElementById("prefs-list");
-    nav.innerHTML = PREFS_UI.map((sec) => `<button type="button" data-prefs-sec="${sec.id}">${escHtml(sec.title)}</button>`).join("");
-    list.innerHTML = PREFS_UI.map((sec) => `<section class="prefs-sec" data-prefs-sec="${sec.id}"><h4>${escHtml(sec.title)}</h4>${sec.items.map((it) => {
-      const v = it.get ? it.get() : prefGet(it.k);
-      const ctl = it.type === "bool" ? `<input type="checkbox" data-pref="${it.k}"${v ? " checked" : ""} aria-label="${escAttr(it.label)}">`
-        : it.type === "select" ? `<select class="form-control" data-pref="${it.k}" aria-label="${escAttr(it.label)}">${it.options.map(([ov, ol]) => `<option value="${ov}"${String(v) === ov ? " selected" : ""}>${escHtml(ol)}</option>`).join("")}</select>`
-        : it.type === "num" ? `<span class="pref-num"><input type="number" class="form-control" data-pref="${it.k}" value="${escAttr(v ?? "")}" min="${it.min}" max="${it.max}" step="1" aria-label="${escAttr(it.label)}"><span>${it.unit || ""}</span></span>`
-        : `<input type="text" class="form-control" data-pref="${it.k}" value="${escAttr(v ?? "")}" aria-label="${escAttr(it.label)}">`;
-      return `<div class="pref-row" data-search="${escAttr(fold(`${sec.title} ${it.label} ${it.hint || ""}`))}"><div class="pref-label"><b>${escHtml(it.label)}</b>${it.hint ? `<small>${escHtml(it.hint)}</small>` : ""}</div><div class="pref-ctl">${ctl}</div></div>`;
-    }).join("")}</section>`).join("");
-    nav.querySelectorAll("[data-prefs-sec]").forEach((b) => b.onclick = () => list.querySelector(`section[data-prefs-sec="${b.dataset.prefsSec}"]`)?.scrollIntoView({ block: "start" }));
-    list.querySelectorAll("[data-pref]").forEach((el) => el.addEventListener("change", () => changePref(el)));
-  }
-  function changePref(el) {
-    const key = el.dataset.pref, it = PREFS_UI.flatMap((s) => s.items).find((x) => x.k === key);
-    const value = el.type === "checkbox" ? el.checked : it.type === "num" ? Number(el.value) : el.value;
-    const status = document.getElementById("prefs-status");
-    if (it.set) { it.set(value); status.textContent = "Salvo neste navegador"; return; }
-    const [sec, k] = key.split(".");
-    (prefsData[sec] ||= {})[k] = value;
-    clearTimeout(prefsTimer);
-    status.textContent = "Salvando…";
-    prefsTimer = setTimeout(async () => {
-      try {
-        const r = await fetch("api/preferences", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ prefs: { [sec]: prefsData[sec] } }) });
-        const j = await r.json(); if (!r.ok) throw new Error(j.error || r.status);
-        prefsData = j.prefs;
-        const shown = document.querySelector(`#prefs-list [data-pref="${key}"]`); if (shown && shown.type === "number") shown.value = prefGet(key); // voltou para a faixa aceita
-        status.textContent = "Salvo";
-        renderCurrentSlide(); renderThumbnails(); // os mínimos do ajuste para caber mudam o desenho
-      } catch (e) { status.textContent = "Não salvou: " + e.message; }
-    }, 250);
-  }
-  function filterPrefs() {
-    const q = fold(document.getElementById("prefs-search").value.trim());
-    document.querySelectorAll("#prefs-list .pref-row").forEach((r) => { r.hidden = !!q && !r.dataset.search.includes(q); });
-    document.querySelectorAll("#prefs-list .prefs-sec").forEach((sec) => { sec.hidden = !sec.querySelector(".pref-row:not([hidden])"); });
-  }
+  // Preferências: tela única com busca (preferences-ui.js)
+  const { openPrefs, filterPrefs } = window.SagaPrefs({ dom, store, escHtml, escAttr, fold, setAppTheme, renderCurrentSlide, renderThumbnails });
 
   function syncMotionMenu() {
     const cur = state.deck?.motion || "subtle";
@@ -4300,6 +4071,7 @@ ${ta.value}`;
       if (files.length) { e.preventDefault(); files.forEach(addChatImage); }
     });
     dom.chatAttach.onclick = () => dom.chatAttachInput.click();
+    document.getElementById("chat-critique").onclick = () => chatApi.runCritique();
     dom.chatAttachInput.onchange = () => { [...dom.chatAttachInput.files].forEach(addChatFile); dom.chatAttachInput.value = ""; };
 
     // Chips de Sugestões de Prompt do Chat