sagadeck 1.4.0 → 1.5.0

package/src/studio/code-version.js

@@ -0,0 +1,35 @@
+// Impressão do código do sagadeck (caminho, data e tamanho de cada arquivo). O Studio guarda a de quando subiu e a
+// página consulta de tempos em tempos: se o código mudou no disco (git pull, npm update, merge), o servidor que está
+// rodando ainda é o velho e a página avisa "reinicie". Antes, um Studio aberto antes de uma atualização recebia
+// arquivos novos do disco com o servidor velho e quebrava em silêncio (nenhum slide abria).
+import fs from "node:fs";
+import path from "node:path";
+import crypto from "node:crypto";
+
+const CODE = /\.(m?js|html|css|json)$/i;
+
+export function codeFingerprint(root) {
+  const h = crypto.createHash("sha1");
+  const walk = (dir) => {
+    let entries;
+    try { entries = fs.readdirSync(dir, { withFileTypes: true }); } catch { return; }
+    for (const e of entries.sort((a, b) => (a.name < b.name ? -1 : 1))) {
+      if (e.name === "node_modules" || e.name.startsWith(".")) continue;
+      const p = path.join(dir, e.name);
+      if (e.isDirectory()) walk(p);
+      else if (CODE.test(e.name)) { try { const st = fs.statSync(p); h.update(`${path.relative(root, p)}|${st.mtimeMs}|${st.size}\n`); } catch {} }
+    }
+  };
+  walk(root);
+  return h.digest("hex").slice(0, 16);
+}
+
+// a que vale para o servidor: a de quando ele subiu × a de agora (recalculada no máximo a cada poucos segundos)
+export function codeWatch(root, { every = 3000 } = {}) {
+  const started = codeFingerprint(root);
+  let now = started, at = Date.now();
+  return () => {
+    if (Date.now() - at > every) { now = codeFingerprint(root); at = Date.now(); }
+    return { started, now, changed: now !== started };
+  };
+}

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/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/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";
@@ -3343,142 +3345,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 +3626,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 +4090,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

package/src/studio/public/chat.js

@@ -451,9 +451,79 @@ window.SagaChat = function ({ state, dom, escHtml, hydrateIcons, showToast, open
     dom.chatMessages.scrollTop = dom.chatMessages.scrollHeight;
     return msgDiv;
   }
+  // Leitura crítica do material anexado (botão do chat): o servidor lê o documento como um revisor da área e devolve
+  // inconsistências, achados escondidos, perguntas prováveis e slides que representam mal o material, cada item com
+  // trecho conferido. Nada muda nos slides; vira uma mensagem da conversa com opções para aplicar.
+  async function runCritique() {
+    if (chatJob) return;
+    appendChatMessage("user", "Leitura crítica do material");
+    const job = chatJob = { file: state.file, id: crypto.randomUUID(), controller: new AbortController() };
+    job.stop = () => job.controller.abort();
+    const work = createProgressBubble("Lendo o material com olho crítico…");
+    try {
+      const data = await streamAI("api/ai/critique", { spec: state.deck, requestId: job.id }, (ev) => work.update(ev), job.controller.signal);
+      state.chatHistory.push({ role: "user", text: "Leitura crítica do material" });
+      state.chatHistory.push({ role: "assistant", text: data.reply + (data.options?.length ? `\n(opções: ${data.options.join(" | ")})` : ""), talk: true });
+      await saveChatHistory();
+      work.done();
+      // com os pontos estruturados, a bolha traz o resumo e cada ponto vira um cartão (o texto inteiro fica no histórico)
+      const msg = appendChatMessage("ai", data.critique?.itens?.length ? data.critique.summary : data.reply, data.actions || []);
+      msg.classList.add("bs");
+      if (data.critique?.itens?.length) renderCritiqueItems(msg, data.critique);
+      const tag = document.createElement("div");
+      tag.className = "bs-tag";
+      tag.innerHTML = '<i class="ic" data-ic="scan-search"></i> Leitura crítica — nada mudou nos slides'; hydrateIcons(tag);
+      msg.querySelector(".ai-content").prepend(tag);
+      renderChatOptions(msg, data.options);
+      updateBrainstormApply();
+    } catch (e) {
+      work.done();
+      appendChatMessage("ai", `A leitura crítica não saiu: ${e.message}`);
+    } finally { chatJob = null; }
+  }
+  // Cada ponto da leitura crítica como cartão: o slide a que ele se liga (clique leva até lá), Aplicar (pede à IA só
+  // aquele ponto, mirando aquele slide; a autoria decide se vai ao slide ou às notes) e Ignorar (gravado: o ponto deixa
+  // de acompanhar os pedidos).
+  const CRIT_LABEL = { destaque: "Achado", inconsistencia: "Inconsistência", slide: "Slide a rever", pergunta: "Pergunta provável", limitacao: "Limitação", forte: "Ponto forte" };
+  function goToSlide(n) {
+    if (!(n >= 1 && n <= state.deck.slides.length)) return;
+    state.currentSlideIndex = n - 1;
+    renderThumbnails(); renderCurrentSlide();
+  }
+  async function markCritique(id, status) {
+    try { await fetch("api/ai/critique/item", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ id, status }) }); } catch { /* fica só na tela */ }
+  }
+  function renderCritiqueItems(msg, critique) {
+    const list = document.createElement("div");
+    list.className = "crit-list";
+    for (const it of critique.itens) {
+      const card = document.createElement("div");
+      card.className = `crit-item crit-${it.tipo}`;
+      card.dataset.id = it.id;
+      card.innerHTML = `<div class="crit-head"><span class="crit-kind"></span>${it.slide ? `<button type="button" class="crit-slide" title="Ir ao slide ${it.slide}">Slide ${it.slide}</button>` : ""}</div><b class="crit-title"></b><div class="crit-text"></div>${it.trecho ? '<blockquote class="crit-quote"></blockquote>' : ""}<div class="crit-actions"><button type="button" class="bs-option crit-apply"><i class="ic" data-ic="check"></i> Aplicar${it.slide ? ` no slide ${it.slide}` : ""}</button><button type="button" class="bs-option crit-ignore"><i class="ic" data-ic="x"></i> Ignorar</button></div>`;
+      card.querySelector(".crit-kind").textContent = CRIT_LABEL[it.tipo] || it.tipo;
+      card.querySelector(".crit-title").textContent = it.titulo;
+      card.querySelector(".crit-text").textContent = `${it.texto}${it.onde ? ` (${it.onde})` : ""}`;
+      if (it.trecho) card.querySelector(".crit-quote").textContent = `"${it.trecho}"`;
+      const done = (label) => { card.classList.add("crit-done"); card.querySelector(".crit-actions").innerHTML = `<span class="crit-status">${label}</span>`; };
+      card.querySelector(".crit-slide")?.addEventListener("click", () => goToSlide(it.slide));
+      card.querySelector(".crit-apply").onclick = () => {
+        if (chatJob) { showToast("Espere a IA terminar o pedido atual.", 3000); return; }
+        goToSlide(it.slide);
+        done(it.slide ? `Aplicado no slide ${it.slide}` : "Aplicado");
+        markCritique(it.id, "aplicado");
+        dom.chatInput.value = `Aplique este ponto da leitura crítica${it.slide ? ` no slide ${it.slide}` : ", no slide em que ele se encaixa"}: ${it.titulo}. ${it.texto}${it.trecho ? ` (trecho do material: "${it.trecho}")` : ""}. Siga a autoria da apresentação: achado do material pode ir para o slide; crítica, inconsistência e pergunta vão para as notes ("Prepare-se: …"), salvo se a apresentação for livre.`;
+        handleChatSubmit();
+      };
+      card.querySelector(".crit-ignore").onclick = () => { done("Ignorado"); markCritique(it.id, "ignorado"); };
+      list.append(card);
+    }
+    hydrateIcons(list);
+    msg.querySelector(".ai-content").append(list);
+  }
   // Bolha de progresso do chat e de outros fluxos (transformação usa a mesma).
   const createProgressBubble = window.SagaChatProgress({ dom, appendChatMessage, hydrateIcons, getChatJob });
-  const api = { getChatJob, handleChatSubmit, loadChatHistory, saveChatHistory, appendChatMessage,
+  const api = { getChatJob, handleChatSubmit, runCritique, loadChatHistory, saveChatHistory, appendChatMessage,
     createProgressBubble, commandEvent, updateBrainstormApply, renderVariants, applyBrainstorm,
     renderChatOptions, clearChatAttachments, renderChatAttachments, addChatImage, addChatDoc,
     addChatFile, autoGrowChat, commandCard };

package/src/studio/public/header-footer.js

@@ -0,0 +1,140 @@
+// Cabeçalho e rodapé do deck: modelos prontos, campos com variáveis ({autor}, {data:…}, {n}) e prévia do slide atual.
+// Saiu do app.js pela trava de tamanho dos monolitos; o comportamento é o mesmo.
+// Fábrica no molde de slide-select.js: recebe o estado e os ajudantes, devolve a API.
+window.SagaHeaderFooter = function ({ state, fitRendered, syncDeckToServer, renderCurrentSlide, renderThumbnails, showToast }) {
+  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);
+  }
+
+  return { openHeaderFooter, closeHeaderFooter, applyHeaderFooter };
+};