@creative-ia/cortex 1.0.5

package/dist/tools/generate-report.js

@@ -0,0 +1,891 @@
+/**
+ * Tool: generate_report
+ * Gera relatório HTML com toggle light/dark theme, navegação estruturada,
+ * suporte a Mermaid diagrams e layout responsivo.
+ * O template e CSS são IP protegido — nunca expostos como source.
+ */
+import { writeFile, mkdir } from "node:fs/promises";
+import { join } from "node:path";
+import { homedir } from "node:os";
+import { loadTemplate } from "../knowledge/loader.js";
+import { renderWorkflowDiagram, renderArchitectureDiagram, renderDomainMap, renderRiskMatrix, renderIntegrationFlow, renderBenchmarkMercado, } from "./diagrams.js";
+import { LOGO_BASE64 } from "./logo-base64.js";
+const SECTION_ICONS = {
+    "Dominios": "domain", "Squads": "groups", "Arquitetura": "architecture",
+    "Integracoes": "cable", "Processos": "history", "Decisoes": "gavel",
+    "Qualidade": "verified", "Riscos": "warning", "Recomendacao": "rocket_launch",
+    "Ideia": "lightbulb", "Analysis": "analytics", "Passed": "check_circle",
+    "Issues": "error", "Result": "task_alt", "Layer": "layers",
+    "Folder": "folder_open", "Error": "bug_report", "API": "api",
+    "Dependency": "sync_alt", "Architecture": "architecture",
+    "L1": "code", "L2": "science", "L3": "account_tree", "L4": "shield",
+    "New Process": "add_circle", "Required": "checklist", "Workflow": "route",
+    "Golden": "star", "Benchmark": "leaderboard", "Estimativa": "calculate",
+    "Infra": "cloud", "Enviar": "send", "Receber": "call_received",
+    "Chave": "key", "QR": "qr_code_2", "Agendad": "schedule_send",
+    "Extrato": "receipt_long", "Observ": "monitoring", "Monitoramento": "monitoring",
+    "Onda": "waves", "Resumo": "table_chart", "Sequencia": "route",
+    "Diagrama": "schema", "Epico": "inventory_2",
+    "default": "article",
+};
+function getIcon(title) {
+    for (const [key, icon] of Object.entries(SECTION_ICONS)) {
+        if (title.includes(key))
+            return icon;
+    }
+    return SECTION_ICONS.default;
+}
+function parseSections(content) {
+    const sections = [];
+    let current = null;
+    for (const line of content.split("\n")) {
+        if (line.startsWith("## ")) {
+            if (current)
+                sections.push(current);
+            current = { title: line.replace("## ", "").replace(/^\d+\.\s*/, ""), lines: [] };
+        }
+        else if (!line.startsWith("# ") && current) {
+            current.lines.push(line);
+        }
+    }
+    if (current)
+        sections.push(current);
+    return sections;
+}
+function fmt(text) {
+    return text
+        .replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>")
+        .replace(/`([^`]+)`/g, "<code>$1</code>");
+}
+function renderSection(s, idx, allSections) {
+    const icon = getIcon(s.title);
+    const id = `s${idx}`;
+    const body = s.lines
+        .filter((l) => l.trim())
+        .map((l) => {
+        if (l.startsWith("- **"))
+            return `<li>${fmt(l.slice(2))}</li>`;
+        if (l.startsWith("- "))
+            return `<li>${fmt(l.slice(2))}</li>`;
+        if (l.startsWith("> "))
+            return `<p class="lead" style="font-style:italic;border-left:3px solid var(--accent);padding-left:14px;">${l.slice(2)}</p>`;
+        if (l.startsWith("```"))
+            return "";
+        if (l.startsWith("### "))
+            return `<h3>${l.replace(/^###\s*/, "")}</h3>`;
+        return `<p>${fmt(l)}</p>`;
+    })
+        .join("\n");
+    const hasList = body.includes("<li>");
+    // Auto-inject diagrams based on section title
+    let diagram = "";
+    const titleLower = s.title.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "");
+    if (titleLower.includes("dominios") || titleLower.includes("domains")) {
+        const domains = s.lines
+            .filter((l) => l.startsWith("- **"))
+            .map((l) => {
+            const match = l.match(/\*\*([^*]+)\*\*\s*\((\w+)\)\s*[—-]\s*(.+)/);
+            if (match)
+                return { name: match[1], type: match[2], squad: match[3].trim() };
+            return null;
+        })
+            .filter(Boolean);
+        if (domains.length > 0)
+            diagram = renderDomainMap(domains);
+    }
+    if (titleLower.includes("arquitetura") || titleLower.includes("architecture")) {
+        diagram = renderArchitectureDiagram();
+    }
+    if (titleLower.includes("riscos") || titleLower.includes("risks")) {
+        const risks = s.lines
+            .filter((l) => l.startsWith("- **"))
+            .map((l) => {
+            const match = l.match(/\*\*([^*]+)\*\*/);
+            const name = match ? match[1] : l.slice(4, 40);
+            const lower = l.toLowerCase();
+            const isRegulatorio = lower.includes("regulat");
+            const isSeguranca = lower.includes("seguranca") || lower.includes("lgpd");
+            return {
+                name,
+                probability: (isRegulatorio ? "alta" : "media"),
+                impact: (isSeguranca || isRegulatorio ? "alto" : "medio"),
+                category: isRegulatorio ? "Regulatorio" : isSeguranca ? "Seguranca" : "Tecnico",
+            };
+        });
+        if (risks.length > 0)
+            diagram = renderRiskMatrix(risks);
+    }
+    if (titleLower.includes("integracoes") || titleLower.includes("integrations")) {
+        const nodes = [];
+        const links = [];
+        nodes.push({ name: "BFF", type: "gateway", protocol: "GraphQL" });
+        for (const l of s.lines) {
+            if (l.startsWith("- **")) {
+                const match = l.match(/\*\*([^*]+)\*\*\s*\(([^)]+)\)/);
+                if (match) {
+                    const isExternal = match[2].includes("nova") || match[2].includes("external");
+                    nodes.push({ name: match[1], type: isExternal ? "externo" : "interno" });
+                    links.push({ from: "BFF", to: match[1], protocol: match[2] });
+                }
+            }
+        }
+        if (nodes.length > 1)
+            diagram = renderIntegrationFlow(nodes, links);
+    }
+    if (titleLower.includes("recomendacao") || titleLower.includes("workflow") || titleLower.includes("proximo")) {
+        diagram = renderWorkflowDiagram([
+            { name: "Stakeholder", status: "concluido", subtitle: "01" },
+            { name: "Intake", status: "ativo", subtitle: "02" },
+            { name: "Epicos", status: "pendente", subtitle: "03" },
+            { name: "Estrategia", status: "pendente", subtitle: "04/05" },
+            { name: "Execucao", status: "pendente", subtitle: "06+" },
+        ]);
+    }
+    if (titleLower.includes("benchmark")) {
+        const concorrentes = [];
+        const dimensoes = [];
+        const tableLines = s.lines.filter((l) => l.includes("|") && !l.match(/^\s*\|?\s*[-:]+/));
+        if (tableLines.length >= 2) {
+            const headers = tableLines[0].split("|").map((h) => h.trim()).filter(Boolean);
+            const nomes = headers.slice(1);
+            const tipoLine = s.lines.find((l) => l.toLowerCase().includes("tipo:") || l.toLowerCase().includes("| tipo"));
+            const tipos = [];
+            if (tipoLine) {
+                const parts = tipoLine.split("|").map((p) => p.trim()).filter(Boolean);
+                tipos.push(...parts.slice(1));
+            }
+            for (let ni = 0; ni < nomes.length; ni++) {
+                const tipoStr = (tipos[ni] || "banco").toLowerCase();
+                const tipo = (tipoStr.includes("nosso") ? "nosso" : tipoStr.includes("fintech") ? "fintech" : tipoStr.includes("financeira") ? "financeira" : tipoStr.includes("cooperativa") ? "cooperativa" : "banco");
+                concorrentes.push({ nome: nomes[ni], tipo, indicadores: {} });
+            }
+            for (const line of tableLines.slice(1)) {
+                if (line.toLowerCase().includes("tipo"))
+                    continue;
+                const cells = line.split("|").map((c) => c.trim()).filter(Boolean);
+                if (cells.length < 2)
+                    continue;
+                const dimNome = cells[0];
+                const chave = dimNome.toLowerCase().replace(/\s+/g, "_").normalize("NFD").replace(/[\u0300-\u036f]/g, "");
+                const maiorMelhor = !dimNome.toLowerCase().includes("taxa") && !dimNome.toLowerCase().includes("prazo") && !dimNome.toLowerCase().includes("tempo");
+                dimensoes.push({ nome: dimNome, chave, maiorMelhor });
+                for (let ci = 1; ci < cells.length && ci - 1 < concorrentes.length; ci++) {
+                    const val = cells[ci];
+                    const numVal = parseFloat(val.replace(/[^\d.,]/g, "").replace(",", "."));
+                    concorrentes[ci - 1].indicadores[chave] = isNaN(numVal) ? val : numVal;
+                }
+            }
+        }
+        if (concorrentes.length > 0 && dimensoes.length > 0) {
+            const fontes = [];
+            let inFontes = false;
+            for (const l of s.lines) {
+                if (l.includes("**Fontes:**") || l.includes("Fontes:")) {
+                    inFontes = true;
+                    continue;
+                }
+                if (inFontes && l.startsWith("- ")) {
+                    fontes.push(l.slice(2).replace(/\*\*/g, ""));
+                }
+                else if (inFontes && !l.trim()) {
+                    inFontes = false;
+                }
+            }
+            diagram = renderBenchmarkMercado(concorrentes, dimensoes, undefined, fontes.length > 0 ? fontes : undefined);
+        }
+    }
+    return `<section class="card" id="${id}">
+  <h2><span class="material-symbols-outlined">${icon}</span> ${s.title}</h2>
+  ${hasList ? `<ul>${body}</ul>` : body}
+  ${diagram}
+</section>`;
+}
+function renderToc(sections) {
+    return sections.map((s, i) => `<a href="#s${i}"><span class="material-symbols-outlined" style="font-size:.9rem;vertical-align:middle;margin-right:4px;">${getIcon(s.title)}</span>${s.title}</a>`).join("\n");
+}
+// ============================================================
+// CSS DUAL THEME — Dark (default) + Light toggle
+// ============================================================
+function getDualThemeCSS() {
+    return `
+/* === DARK THEME (default) === */
+:root {
+  --bg: #0A0F1A; --paper: #111827; --ink: #E5E7EB; --muted: #9AA3AD;
+  --brand: #2F6DB3; --brand-2: #4FB3FF; --accent: #00E0FF; --line: #1E293B;
+  --soft: #0F1C2E; --shadow: 0 14px 40px rgba(0,224,255,0.06);
+  --silver: #C9CCD1; --warn: #F59E0B; --warn-bg: #1C1708;
+  --danger: #EF4444; --danger-bg: #1C0808; --ok: #22C55E; --ok-bg: #081C10;
+  --cover-from: #0F1C2E; --cover-mid: #1B3B6F; --cover-to: #2F6DB3;
+  --toc-bg: rgba(17,24,39,.92); --mini-from: #111827; --mini-to: #0F1C2E;
+  --body-bg: radial-gradient(circle at top right,rgba(0,224,255,.06),transparent 40%),radial-gradient(circle at bottom left,rgba(47,109,179,.08),transparent 50%),var(--bg);
+}
+/* === LIGHT THEME === */
+[data-theme="light"] {
+  --bg: #F8FAFC; --paper: #FFFFFF; --ink: #1E293B; --muted: #475569;
+  --brand: #1D4ED8; --brand-2: #2563EB; --accent: #0369A1; --line: #CBD5E1;
+  --soft: #F1F5F9; --shadow: 0 4px 20px rgba(0,0,0,0.08);
+  --silver: #334155; --warn: #B45309; --warn-bg: #FFFBEB;
+  --danger: #DC2626; --danger-bg: #FEF2F2; --ok: #15803D; --ok-bg: #F0FDF4;
+  --cover-from: #1E40AF; --cover-mid: #2563EB; --cover-to: #1D4ED8;
+  --toc-bg: rgba(255,255,255,.97); --mini-from: #FFFFFF; --mini-to: #F8FAFC;
+  --body-bg: linear-gradient(180deg,#F8FAFC,#EFF6FF);
+}
+* { box-sizing: border-box; }
+html { scroll-behavior: smooth; }
+body { margin:0; font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; letter-spacing:.01em; background:var(--body-bg); color:var(--ink); line-height:1.7; transition:background .3s,color .3s; }
+.page { width:92%; max-width:1600px; margin:0 auto; padding:clamp(16px,3vw,40px) clamp(16px,4vw,48px) 80px; }
+.cover { background:linear-gradient(135deg,var(--cover-from) 0%,var(--cover-mid) 50%,var(--cover-to) 100%); color:#fff; border-radius:clamp(16px,2vw,28px); padding:clamp(24px,3vw,40px); box-shadow:0 14px 40px rgba(0,224,255,.08); position:relative; overflow:hidden; border:1px solid rgba(0,224,255,.1); }
+.cover::after { content:""; position:absolute; width:clamp(160px,22vw,300px); height:clamp(160px,22vw,300px); right:-70px; top:-80px; border-radius:50%; background:radial-gradient(circle,rgba(0,224,255,.12),transparent 70%); }
+.brand { display:flex; align-items:center; gap:clamp(12px,2vw,22px); position:relative; z-index:1; }
+.brand-logo { width:64px; height:64px; border-radius:14px; background:rgba(255,255,255,0.08); padding:4px; flex-shrink:0; }
+[data-theme="light"] .brand-logo { background:rgba(0,0,0,0.06); }
+.eyebrow { letter-spacing:.14em; text-transform:uppercase; font-size:clamp(.68rem,1vw,.82rem); opacity:.88; margin-bottom:8px; }
+h1 { margin:0 0 10px; font-size:clamp(1.4rem,3.5vw,2.4rem); line-height:1.08; color:#fff; }
+.subtitle { max-width:860px; font-size:clamp(.92rem,1.4vw,1.08rem); color:#fff; margin:0; }
+.cover-meta { margin-top:22px; display:flex; flex-wrap:wrap; gap:8px; position:relative; z-index:1; }
+.pill { border:1px solid rgba(0,224,255,.2); background:rgba(0,224,255,.08); color:var(--silver); padding:5px 12px; border-radius:999px; font-size:clamp(.78rem,1vw,.9rem); letter-spacing:.04em; text-transform:uppercase; }
+.cover .pill { color:#C9CCD1; }
+[data-theme="light"] .pill { border-color:rgba(29,78,216,.2); background:rgba(29,78,216,.08); }
+[data-theme="light"] .cover .pill { color:rgba(255,255,255,.85); border-color:rgba(255,255,255,.25); background:rgba(255,255,255,.12); }
+.layout { display:grid; grid-template-columns:clamp(220px,22%,300px) minmax(0,1fr); gap:clamp(14px,2vw,26px); margin-top:clamp(16px,2vw,28px); }
+.toc { position:sticky; top:18px; align-self:start; background:var(--toc-bg); backdrop-filter:blur(14px); border:1px solid var(--line); border-radius:22px; box-shadow:var(--shadow); padding:clamp(14px,2vw,24px); transition:background .3s; }
+.toc h2 { margin:0 0 14px; font-size:clamp(.88rem,1.1vw,1rem); color:var(--brand); }
+.toc a { display:block; color:var(--silver); text-decoration:none; padding:7px 10px; border-radius:10px; font-size:clamp(.82rem,1vw,.95rem); margin-bottom:3px; transition:background .2s,color .2s; }
+.toc a:hover { background:rgba(0,224,255,.06); color:var(--accent); }
+.toc .toc-section { font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); margin:12px 0 4px 10px; }
+.content { display:grid; gap:clamp(12px,1.5vw,20px); }
+section.card { background:var(--paper); border:1px solid var(--line); border-radius:clamp(16px,2vw,24px); box-shadow:var(--shadow); padding:clamp(18px,2.5vw,32px); transition:background .3s,border-color .3s; }
+section.card h2 { margin:0 0 14px; font-size:clamp(1.15rem,2vw,1.5rem); color:var(--brand); }
+h3 { margin:20px 0 10px; color:var(--brand-2); font-size:clamp(.95rem,1.3vw,1.08rem); }
+h4 { margin:16px 0 8px; color:var(--ink); font-size:clamp(.88rem,1.1vw,1rem); }
+p { margin:10px 0 14px; color:var(--muted); }
+strong { color:var(--ink); }
+.lead { font-size:clamp(.98rem,1.4vw,1.08rem); }
+.grid { display:grid; gap:16px; }
+.grid.two { grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
+.grid.three { grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
+.mini-card { border:1px solid var(--line); border-radius:18px; background:linear-gradient(180deg,var(--mini-from),var(--mini-to)); padding:18px; transition:background .3s; }
+.mini-card h4 { margin:0 0 8px; font-size:.98rem; color:var(--brand); }
+table { width:100%; border-collapse:collapse; margin-top:12px; border:1px solid var(--line); border-radius:16px; overflow:hidden; background:var(--paper); transition:background .3s; }
+th,td { padding:11px 14px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line); }
+th { background:var(--soft); color:var(--brand-2); font-weight:700; font-size:.93rem; }
+tr:last-child td { border-bottom:none; }
+.badge { display:inline-block; padding:3px 10px; border-radius:999px; font-size:.8rem; font-weight:600; letter-spacing:.04em; }
+.badge.accepted { background:var(--ok-bg); color:var(--ok); }
+.badge.proposed { background:rgba(47,109,179,.2); color:#4FB3FF; }
+.badge.warn { background:var(--warn-bg); color:var(--warn); }
+.badge.danger { background:var(--danger-bg); color:var(--danger); }
+.dep-tag { display:inline-block; background:rgba(0,224,255,.08); border:1px solid rgba(0,224,255,.15); padding:2px 8px; border-radius:6px; font-size:.75rem; margin-right:4px; color:var(--accent); font-weight:600; }
+[data-theme="light"] .dep-tag { background:rgba(3,105,161,.08); border-color:rgba(3,105,161,.2); color:#0369A1; }
+.squad-tag { display:inline-block; background:rgba(47,109,179,.15); border:1px solid rgba(47,109,179,.25); padding:2px 8px; border-radius:6px; font-size:.75rem; margin-right:4px; color:var(--brand-2); }
+[data-theme="light"] .squad-tag { background:rgba(29,78,216,.08); border-color:rgba(29,78,216,.2); color:#1D4ED8; }
+.size-badge { display:inline-block; padding:3px 10px; border-radius:8px; font-size:.75rem; font-weight:700; color:#fff; }
+.size-L { background:#EF4444; }
+.size-M { background:#2F6DB3; }
+.callout { border:1px solid rgba(0,224,255,.15); background:linear-gradient(180deg,var(--mini-from),var(--mini-to)); border-radius:18px; padding:16px 18px; color:var(--ink); margin:14px 0; transition:background .3s; }
+.scope-list { list-style:none; padding:0; margin:8px 0; }
+.scope-list li { padding:5px 0 5px 20px; position:relative; font-size:.9rem; color:var(--muted); }
+.scope-list li::before { content:"▸"; position:absolute; left:0; color:var(--accent); font-weight:bold; }
+.criteria-list { list-style:none; padding:0; margin:8px 0; }
+.criteria-list li { padding:5px 0 5px 24px; position:relative; font-size:.9rem; color:var(--muted); }
+.criteria-list li::before { content:"☐"; position:absolute; left:0; color:var(--brand-2); }
+.epic-card { background:linear-gradient(180deg,var(--mini-from),var(--mini-to)); border:1px solid var(--line); border-radius:18px; padding:clamp(16px,2vw,24px); margin-bottom:16px; transition:background .3s,border-color .3s; }
+.epic-card:hover { border-color:rgba(0,224,255,.2); }
+.epic-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; flex-wrap:wrap; gap:8px; }
+.epic-header h3 { margin:0; font-size:clamp(1rem,1.5vw,1.15rem); color:var(--ink); }
+.wave { border-left:4px solid var(--brand); padding:16px 20px; background:linear-gradient(180deg,var(--mini-from),var(--mini-to)); border-radius:0 18px 18px 0; margin-bottom:12px; transition:background .3s; }
+.wave h4 { color:var(--ink); margin:0 0 6px; font-size:1rem; }
+.wave p { margin:4px 0; }
+.diagram-box { background:linear-gradient(180deg,var(--mini-from),var(--mini-to)); border:1px solid var(--line); border-radius:18px; padding:clamp(16px,2vw,24px); margin-bottom:16px; text-align:center; overflow-x:auto; transition:background .3s; }
+.diagram-box h3 { text-align:center; margin:0 0 16px; color:var(--ink); font-size:1.05rem; }
+.diagram-box img { max-width:100%; height:auto; border-radius:12px; border:1px solid var(--line); }
+.diagram-box .mermaid { text-align:center; }
+ul { margin:10px 0 14px 20px; color:var(--muted); }
+li { margin:6px 0; }
+code { background:rgba(0,224,255,.06); padding:2px 6px; border-radius:6px; font-size:.88rem; color:var(--accent); }
+[data-theme="light"] code { background:rgba(3,105,161,.08); color:#0369A1; }
+a { color:var(--brand-2); text-decoration:none; }
+a:hover { text-decoration:underline; color:var(--accent); }
+.back-btn { position:absolute; top:20px; right:24px; z-index:2; display:inline-flex; align-items:center; gap:7px; padding:8px 16px; background:rgba(0,224,255,.08); border:1px solid rgba(0,224,255,.2); color:var(--accent); border-radius:999px; font-size:.85rem; text-decoration:none; font-weight:500; }
+.back-btn:hover { background:rgba(0,224,255,.18); text-decoration:none; }
+[data-theme="light"] .back-btn { background:rgba(255,255,255,.2); border-color:rgba(255,255,255,.3); color:#fff; }
+[data-theme="light"] .back-btn:hover { background:rgba(255,255,255,.3); }
+/* Theme toggle button */
+.theme-toggle { position:fixed; top:18px; right:68px; z-index:999; width:42px; height:42px; border:none; border-radius:10px; background:rgba(0,224,255,.1); color:var(--accent); cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 14px rgba(0,224,255,.12); border:1px solid rgba(0,224,255,.2); transition:background .2s; }
+.theme-toggle:hover { background:rgba(0,224,255,.2); }
+[data-theme="light"] .theme-toggle { background:rgba(29,78,216,.08); color:#1D4ED8; box-shadow:0 4px 14px rgba(0,0,0,.08); border-color:rgba(29,78,216,.2); }
+[data-theme="light"] .theme-toggle:hover { background:rgba(29,78,216,.15); }
+.theme-toggle .icon-dark, .theme-toggle .icon-light { font-size:20px; }
+[data-theme="light"] .theme-toggle .icon-dark { display:none; }
+[data-theme="dark"] .theme-toggle .icon-light, :root:not([data-theme]) .theme-toggle .icon-light { display:none; }
+.print-btn { position:fixed; top:18px; right:18px; z-index:999; width:42px; height:42px; border:none; border-radius:10px; background:rgba(0,224,255,.1); color:var(--accent); cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 14px rgba(0,224,255,.12); border:1px solid rgba(0,224,255,.2); }
+.print-btn:hover { background:rgba(0,224,255,.2); }
+[data-theme="light"] .print-btn { background:rgba(29,78,216,.08); color:#1D4ED8; box-shadow:0 4px 14px rgba(0,0,0,.08); border-color:rgba(29,78,216,.2); }
+[data-theme="light"] .print-btn:hover { background:rgba(29,78,216,.15); }
+.print-btn svg { width:20px; height:20px; fill:currentColor; }
+.footer { text-align:center; padding:24px; opacity:.5; font-size:.85rem; }
+/* bd-wrap for diagrams */
+.bd-wrap { background:linear-gradient(180deg,var(--mini-from),var(--mini-to)); border:1px solid var(--line); border-radius:18px; padding:24px; margin:14px 0; overflow-x:auto; transition:background .3s; }
+.bd-node { text-align:center; border-radius:12px; padding:14px; }
+.bd-sub { display:block; font-size:.85rem; color:var(--muted); margin-top:4px; }
+.bd-root { background:linear-gradient(135deg,#1B3B6F,#2F6DB3); color:#fff; border:1px solid var(--accent); }
+.bd-global { background:var(--ok-bg); color:var(--ok); border:1px solid rgba(34,197,94,.3); }
+.bd-local { background:var(--line); color:var(--ink); border:1px solid var(--brand); }
+.bd-active { box-shadow:0 0 12px rgba(0,224,255,.3); }
+/* Dependency flow diagram */
+.dep-flow { padding:8px 0; }
+.dep-flow-wave { margin-bottom:0; }
+.dep-flow-wave-label { font-size:.78rem; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); font-weight:600; margin-bottom:10px; padding-left:4px; }
+.dep-flow-row { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
+.dep-flow-node { background:linear-gradient(135deg,#1B3B6F,#2F6DB3); border:2px solid #4FB3FF; border-radius:14px; padding:14px 16px; text-align:center; position:relative; transition:transform .2s,box-shadow .2s; }
+.dep-flow-node:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(0,224,255,.2); }
+.dep-flow-id { display:block; font-size:.82rem; font-weight:700; color:#00E0FF; letter-spacing:.06em; }
+.dep-flow-name { display:block; font-size:.92rem; font-weight:600; color:#fff; margin-top:4px; line-height:1.3; }
+.dep-flow-dep { display:block; font-size:.72rem; color:rgba(255,255,255,.6); margin-top:6px; font-style:italic; }
+.dep-flow-L { border-color:#F87171; background:linear-gradient(135deg,#7F1D1D,#991B1B); }
+.dep-flow-L .dep-flow-id { color:#FCA5A5; }
+.dep-flow-L::after { content:"L"; position:absolute; top:8px; right:10px; font-size:.65rem; font-weight:700; background:#EF4444; color:#fff; padding:1px 6px; border-radius:4px; }
+.dep-flow-M::after { content:"M"; position:absolute; top:8px; right:10px; font-size:.65rem; font-weight:700; background:#2F6DB3; color:#fff; padding:1px 6px; border-radius:4px; }
+.dep-flow-arrows-down { text-align:center; height:40px; opacity:.7; }
+[data-theme="light"] .dep-flow-node { background:linear-gradient(135deg,#DBEAFE,#EFF6FF); border-color:#2563EB; }
+[data-theme="light"] .dep-flow-id { color:#1D4ED8; }
+[data-theme="light"] .dep-flow-name { color:#1E293B; }
+[data-theme="light"] .dep-flow-dep { color:#64748B; }
+[data-theme="light"] .dep-flow-L { background:linear-gradient(135deg,#FEE2E2,#FEF2F2); border-color:#DC2626; }
+[data-theme="light"] .dep-flow-L .dep-flow-id { color:#DC2626; }
+[data-theme="light"] .dep-flow-L::after { background:#DC2626; }
+[data-theme="light"] .dep-flow-M::after { background:#2563EB; }
+[data-theme="light"] .dep-flow-arrows-down svg line { stroke:#2563EB; }
+[data-theme="light"] .dep-flow-arrows-down svg marker path { fill:#2563EB; }
+@media (max-width:600px) { .page { width:100%; padding:12px 14px 48px; } .layout { grid-template-columns:1fr; } .toc { position:static; } .grid.two,.grid.three { grid-template-columns:1fr; } .dep-flow-row { grid-template-columns:1fr; } }
+@media (min-width:601px) and (max-width:960px) { .layout { grid-template-columns:1fr; } .toc { position:static; } .dep-flow-row { grid-template-columns:repeat(2,1fr); } }
+@media print { .print-btn,.toc,.back-btn,.theme-toggle { display:none!important; } html,body { background:#fff!important; color:#000!important; } .page { max-width:100%!important; padding:0!important; } .layout { display:block!important; } section.card,.epic-card,.diagram-box,.wave,.bd-wrap,.callout,.mini-card { box-shadow:none!important; border:1px solid #ccc!important; border-radius:0!important; background:#fff!important; } .mermaid { page-break-inside:avoid; } }
+`;
+}
+// ============================================================
+// THEME TOGGLE JS
+// ============================================================
+function getThemeToggleJS() {
+    return `
+<script>
+(function(){
+  const KEY = 'creative-ia50-theme';
+  const saved = localStorage.getItem(KEY);
+  if (saved) document.documentElement.setAttribute('data-theme', saved);
+  window.toggleTheme = function() {
+    const current = document.documentElement.getAttribute('data-theme') || 'dark';
+    const next = current === 'dark' ? 'light' : 'dark';
+    document.documentElement.setAttribute('data-theme', next);
+    localStorage.setItem(KEY, next);
+    // Re-init mermaid with correct theme + variables
+    if (typeof mermaid !== 'undefined') {
+      const isLight = next === 'light';
+      const vars = isLight ? window.__mermaidLightVars : window.__mermaidDarkVars;
+      mermaid.initialize({ startOnLoad: false, theme: isLight ? 'default' : 'dark', themeVariables: vars || {} });
+      document.querySelectorAll('.mermaid[data-processed]').forEach(function(el) {
+        el.removeAttribute('data-processed');
+        el.innerHTML = el.getAttribute('data-original') || el.textContent;
+      });
+      mermaid.run();
+    }
+  };
+  // Store original mermaid content for re-rendering
+  document.addEventListener('DOMContentLoaded', function() {
+    document.querySelectorAll('.mermaid').forEach(function(el) {
+      el.setAttribute('data-original', el.textContent);
+    });
+  });
+})();
+</script>`;
+}
+// ============================================================
+// MARKDOWN TABLE PARSER — pipe tables → <table> HTML
+// ============================================================
+function parseMarkdownTable(lines) {
+    const tableLines = lines.filter((l) => l.trim().startsWith("|"));
+    if (tableLines.length < 2)
+        return "";
+    const parseRow = (line) => line.split("|").map((c) => c.trim()).filter(Boolean);
+    const headers = parseRow(tableLines[0]);
+    // skip separator line (|---|---|...)
+    const startIdx = tableLines[1].match(/^\|?\s*[-:]+/) ? 2 : 1;
+    const rows = tableLines.slice(startIdx).map(parseRow);
+    const thHtml = headers.map((h) => `<th>${fmt(h)}</th>`).join("");
+    const trHtml = rows
+        .filter((r) => r.length > 0 && !r.every((c) => c.match(/^[-:]+$/)))
+        .map((r) => {
+        const cells = r.map((c) => {
+            // size badges
+            if (c === "L")
+                return `<td><span class="size-badge size-L">L</span></td>`;
+            if (c === "M")
+                return `<td><span class="size-badge size-M">M</span></td>`;
+            // dep-tags for EP-XX references
+            const tagged = c.replace(/(EP-\d{2})/g, '<span class="dep-tag">$1</span>');
+            return `<td>${fmt(tagged === "—" ? "—" : tagged)}</td>`;
+        });
+        return `<tr>${cells.join("")}</tr>`;
+    })
+        .join("\n");
+    return `<table><thead><tr>${thHtml}</tr></thead><tbody>${trHtml}</tbody></table>`;
+}
+function parseEpicSection(lines) {
+    let objective = "";
+    let scope = [];
+    let criteria = [];
+    let dependencies = [];
+    let squads = [];
+    let size = "M";
+    let currentBlock = "";
+    for (const line of lines) {
+        const trimmed = line.trim();
+        if (!trimmed || trimmed === "---")
+            continue;
+        if (trimmed.startsWith("**Objetivo:**")) {
+            objective = trimmed.replace("**Objetivo:**", "").trim();
+            currentBlock = "";
+            continue;
+        }
+        if (trimmed.startsWith("**Escopo:**")) {
+            currentBlock = "scope";
+            continue;
+        }
+        if (trimmed.startsWith("**Critérios de aceite:**") || trimmed.startsWith("**Criterios de aceite:**")) {
+            currentBlock = "criteria";
+            continue;
+        }
+        if (trimmed.startsWith("**Dependências:**") || trimmed.startsWith("**Dependencias:**")) {
+            const val = trimmed.replace(/\*\*Depend[eê]ncias:\*\*/, "").trim();
+            if (val && val !== "Nenhuma (épico fundacional)" && val !== "Nenhuma") {
+                dependencies = val.split(",").map((d) => d.trim()).filter(Boolean);
+            }
+            currentBlock = "";
+            continue;
+        }
+        if (trimmed.startsWith("**Squads:**")) {
+            const val = trimmed.replace("**Squads:**", "").trim();
+            squads = val.split("+").map((s) => s.trim()).filter(Boolean);
+            currentBlock = "";
+            continue;
+        }
+        if (trimmed.startsWith("**Estimativa:**")) {
+            const val = trimmed.replace("**Estimativa:**", "").trim();
+            size = val.includes("L") ? "L" : "M";
+            currentBlock = "";
+            continue;
+        }
+        if (trimmed.startsWith("- ") && currentBlock === "scope") {
+            scope.push(trimmed.slice(2));
+        }
+        else if (trimmed.startsWith("- [ ]") && currentBlock === "criteria") {
+            criteria.push(trimmed.slice(6).trim());
+        }
+        else if (trimmed.startsWith("- ") && currentBlock === "criteria") {
+            criteria.push(trimmed.slice(2));
+        }
+    }
+    return { id: "", title: "", objective, scope, criteria, dependencies, squads, size };
+}
+function renderEpicCard(epic, idx) {
+    const scopeHtml = epic.scope.length > 0
+        ? `<h4>Escopo</h4><ul class="scope-list">${epic.scope.map((s) => `<li>${fmt(s)}</li>`).join("")}</ul>`
+        : "";
+    const criteriaHtml = epic.criteria.length > 0
+        ? `<h4>Critérios de Aceite</h4><ul class="criteria-list">${epic.criteria.map((c) => `<li>${fmt(c)}</li>`).join("")}</ul>`
+        : "";
+    const depsHtml = epic.dependencies.length > 0
+        ? epic.dependencies.map((d) => `<span class="dep-tag">${d}</span>`).join("")
+        : '<span style="color:var(--muted);font-size:.85rem;">Nenhuma (épico fundacional)</span>';
+    const squadsHtml = epic.squads.map((s) => `<span class="squad-tag">${s}</span>`).join("");
+    const sizeCls = epic.size === "L" ? "size-L" : "size-M";
+    return `<div class="epic-card" id="epic-${idx}">
+  <div class="epic-header">
+    <h3>${epic.id} — ${epic.title}</h3>
+    <span class="size-badge ${sizeCls}">${epic.size === "L" ? "L (grande)" : "M (médio)"}</span>
+  </div>
+  <p class="lead"><strong>Objetivo:</strong> ${fmt(epic.objective)}</p>
+  ${scopeHtml}
+  ${criteriaHtml}
+  <div style="display:flex;flex-wrap:wrap;gap:12px;margin-top:14px;align-items:center;">
+    <div><strong style="font-size:.85rem;color:var(--muted);">Dependências:</strong> ${depsHtml}</div>
+    <div style="margin-left:auto;"><strong style="font-size:.85rem;color:var(--muted);">Squads:</strong> ${squadsHtml}</div>
+  </div>
+</div>`;
+}
+// ============================================================
+// WAVE RENDERER — Ondas de entrega
+// ============================================================
+function renderWaves(lines) {
+    const waves = [];
+    let current = null;
+    for (const line of lines) {
+        const trimmed = line.trim();
+        if (trimmed.startsWith("### ")) {
+            if (current)
+                waves.push(current);
+            current = { title: trimmed.replace("### ", ""), desc: "" };
+        }
+        else if (current && trimmed) {
+            current.desc += (current.desc ? " " : "") + trimmed;
+        }
+    }
+    if (current)
+        waves.push(current);
+    return waves.map((w) => `<div class="wave">
+  <h4><span class="material-symbols-outlined" style="font-size:1rem;vertical-align:middle;margin-right:4px;">waves</span> ${w.title}</h4>
+  <p>${fmt(w.desc)}</p>
+</div>`).join("");
+}
+// ============================================================
+// MERMAID SEQUENCE DIAGRAMS — PIX journeys
+// ============================================================
+function getMermaidSequenceDiagrams() {
+    return {
+        "Enviar PIX": `sequenceDiagram
+    participant U as 👤 Usuário
+    participant App as 📱 App
+    participant BFF as 🔀 BFF
+    participant Core as ⚙️ Core Banking
+    participant DICT as 📖 DICT/BACEN
+    participant SPI as 🏦 SPI/BACEN
+    U->>App: Informa chave/dados
+    App->>BFF: POST /pix/transfer
+    BFF->>DICT: Consulta chave
+    DICT-->>BFF: Dados do recebedor
+    BFF-->>App: Confirma dados
+    U->>App: Autoriza (senha/bio)
+    App->>BFF: Confirma transferência
+    BFF->>Core: Debita conta
+    Core->>SPI: PACS.008 (ordem)
+    SPI-->>Core: PACS.002 (confirmação)
+    Core-->>BFF: Sucesso + endToEndId
+    BFF-->>App: Recibo
+    App-->>U: ✅ PIX enviado`,
+        "Receber PIX": `sequenceDiagram
+    participant SPI as 🏦 SPI/BACEN
+    participant Core as ⚙️ Core Banking
+    participant BFF as 🔀 BFF
+    participant Push as 🔔 Push Service
+    participant App as 📱 App
+    participant U as 👤 Usuário
+    SPI->>Core: PACS.008 (crédito)
+    Core->>Core: Credita conta
+    Core-->>SPI: PACS.002 (confirmação)
+    Core->>BFF: Evento: PIX recebido
+    BFF->>Push: Notificação
+    Push-->>App: Push notification
+    App-->>U: ✅ PIX recebido (< 3s)`,
+        "Chaves PIX": `sequenceDiagram
+    participant U as 👤 Usuário
+    participant App as 📱 App
+    participant BFF as 🔀 BFF
+    participant Core as ⚙️ Core Banking
+    participant DICT as 📖 DICT/BACEN
+    U->>App: Cadastrar chave
+    App->>BFF: POST /pix/keys
+    BFF->>Core: Valida cliente
+    Core->>DICT: CreateEntry
+    DICT-->>Core: Confirmação
+    Note over DICT,Core: Se e-mail/telefone: OTP
+    Core-->>BFF: Chave criada
+    BFF-->>App: Sucesso
+    App-->>U: ✅ Chave cadastrada`,
+        "QR Code PIX": `sequenceDiagram
+    participant U as 👤 Usuário
+    participant App as 📱 App
+    participant BFF as 🔀 BFF
+    participant Core as ⚙️ Core Banking
+    U->>App: Gerar QR Code
+    App->>BFF: POST /pix/qrcode
+    BFF->>Core: Gera payload EMV
+    Core-->>BFF: BR Code + imagem
+    BFF-->>App: QR Code
+    App-->>U: 📷 QR Code gerado
+    Note over U,App: Compartilha via WhatsApp/Telegram
+    U->>App: Ler QR Code (câmera)
+    App->>App: Parse BR Code
+    App->>BFF: POST /pix/transfer
+    Note over App,BFF: Segue fluxo Enviar PIX`
+    };
+}
+// ============================================================
+// EPICS REPORT RENDERER — Full épicos HTML generation
+// ============================================================
+function renderEpicsReport(sections, diagramsDir) {
+    let html = "";
+    let epicIdx = 0;
+    for (let i = 0; i < sections.length; i++) {
+        const s = sections[i];
+        const titleLower = s.title.toLowerCase();
+        const id = `s${i}`;
+        const icon = getIcon(s.title);
+        // === VISÃO GERAL section ===
+        if (titleLower.includes("visão geral") || titleLower.includes("visao geral")) {
+            html += `<section class="card" id="${id}">
+  <h2><span class="material-symbols-outlined">${icon}</span> ${s.title}</h2>
+  <p class="lead">${s.lines.filter((l) => l.trim() && !l.startsWith("\`\`\`") && !l.includes("──") && !l.includes("├") && !l.includes("└") && !l.includes("│")).map((l) => fmt(l.trim())).join(" ")}</p>
+  <div class="diagram-box">
+    <h3>Fluxo de Dependências entre Épicos</h3>
+    <div class="dep-flow">
+      <div class="dep-flow-wave">
+        <div class="dep-flow-wave-label">Onda 1 — Fundação</div>
+        <div class="dep-flow-row">
+          <div class="dep-flow-node dep-flow-L" id="df-ep01">
+            <span class="dep-flow-id">EP-01</span>
+            <span class="dep-flow-name">Infraestrutura BACEN/SPI</span>
+          </div>
+          <div class="dep-flow-node dep-flow-M" id="df-ep08">
+            <span class="dep-flow-id">EP-08</span>
+            <span class="dep-flow-name">Observabilidade</span>
+          </div>
+        </div>
+      </div>
+      <div class="dep-flow-arrows-down">
+        <svg width="100%" height="40" aria-hidden="true"><line x1="25%" y1="0" x2="20%" y2="40" stroke="var(--accent)" stroke-width="2" marker-end="url(#arrowD)"/><line x1="25%" y1="0" x2="50%" y2="40" stroke="var(--accent)" stroke-width="2" marker-end="url(#arrowD)"/><line x1="25%" y1="0" x2="80%" y2="40" stroke="var(--accent)" stroke-width="2" marker-end="url(#arrowD)"/><defs><marker id="arrowD" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto"><path d="M0,0 L8,3 L0,6" fill="var(--accent)"/></marker></defs></svg>
+      </div>
+      <div class="dep-flow-wave">
+        <div class="dep-flow-wave-label">Onda 2 — MVP PIX</div>
+        <div class="dep-flow-row">
+          <div class="dep-flow-node dep-flow-M" id="df-ep02">
+            <span class="dep-flow-id">EP-02</span>
+            <span class="dep-flow-name">Chaves PIX</span>
+            <span class="dep-flow-dep">← EP-01</span>
+          </div>
+          <div class="dep-flow-node dep-flow-L" id="df-ep03">
+            <span class="dep-flow-id">EP-03</span>
+            <span class="dep-flow-name">Enviar PIX</span>
+            <span class="dep-flow-dep">← EP-01, EP-02</span>
+          </div>
+          <div class="dep-flow-node dep-flow-M" id="df-ep04">
+            <span class="dep-flow-id">EP-04</span>
+            <span class="dep-flow-name">Receber PIX</span>
+            <span class="dep-flow-dep">← EP-01</span>
+          </div>
+        </div>
+      </div>
+      <div class="dep-flow-arrows-down">
+        <svg width="100%" height="40" aria-hidden="true"><line x1="33%" y1="0" x2="20%" y2="40" stroke="var(--accent)" stroke-width="2" marker-end="url(#arrowD2)"/><line x1="50%" y1="0" x2="50%" y2="40" stroke="var(--accent)" stroke-width="2" marker-end="url(#arrowD2)"/><line x1="66%" y1="0" x2="80%" y2="40" stroke="var(--accent)" stroke-width="2" marker-end="url(#arrowD2)"/><defs><marker id="arrowD2" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto"><path d="M0,0 L8,3 L0,6" fill="var(--accent)"/></marker></defs></svg>
+      </div>
+      <div class="dep-flow-wave">
+        <div class="dep-flow-wave-label">Onda 3 — Experiência Completa</div>
+        <div class="dep-flow-row">
+          <div class="dep-flow-node dep-flow-M" id="df-ep05">
+            <span class="dep-flow-id">EP-05</span>
+            <span class="dep-flow-name">QR Code</span>
+            <span class="dep-flow-dep">← EP-03, EP-04</span>
+          </div>
+          <div class="dep-flow-node dep-flow-M" id="df-ep06">
+            <span class="dep-flow-id">EP-06</span>
+            <span class="dep-flow-name">Agendado + Devolução</span>
+            <span class="dep-flow-dep">← EP-03, EP-04</span>
+          </div>
+          <div class="dep-flow-node dep-flow-M" id="df-ep07">
+            <span class="dep-flow-id">EP-07</span>
+            <span class="dep-flow-name">Extrato + Limites</span>
+            <span class="dep-flow-dep">← EP-03, EP-04, EP-06</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  ${diagramsDir ? `<div class="diagram-box">
+    <h3><span class="material-symbols-outlined" style="vertical-align:middle;margin-right:6px;">cloud</span> Arquitetura AWS</h3>
+    <img src="${diagramsDir}/pix-aws-architecture.png" alt="Arquitetura AWS PIX" loading="lazy" />
+  </div>` : ""}
+</section>`;
+            continue;
+        }
+        // === EP-XX sections → epic-card ===
+        if (s.title.match(/^EP-\d{2}/)) {
+            const epMatch = s.title.match(/^(EP-\d{2})\s*[—-]\s*(.+)/);
+            const parsed = parseEpicSection(s.lines);
+            if (parsed && epMatch) {
+                parsed.id = epMatch[1];
+                parsed.title = epMatch[2];
+                epicIdx++;
+                // Check if this epic has a matching PNG diagram
+                let diagramHtml = "";
+                const epId = epMatch[1].replace("EP-", "");
+                const diagramMap = {
+                    "03": { file: "pix-flow-enviar.png", label: "Fluxo Enviar PIX" },
+                    "04": { file: "pix-flow-receber.png", label: "Fluxo Receber PIX" },
+                    "02": { file: "pix-flow-chaves.png", label: "Fluxo Chaves PIX" },
+                    "05": { file: "pix-flow-qrcode.png", label: "Fluxo QR Code PIX" },
+                };
+                if (diagramsDir && diagramMap[epId]) {
+                    diagramHtml += `<div class="diagram-box" style="margin-top:16px;">
+    <h3><span class="material-symbols-outlined" style="vertical-align:middle;margin-right:6px;">schema</span> ${diagramMap[epId].label} (AWS)</h3>
+    <img src="${diagramsDir}/${diagramMap[epId].file}" alt="${diagramMap[epId].label}" loading="lazy" />
+  </div>`;
+                }
+                // Mermaid sequence diagram for matching journeys
+                const seqDiagrams = getMermaidSequenceDiagrams();
+                const seqMap = {
+                    "03": "Enviar PIX",
+                    "04": "Receber PIX",
+                    "02": "Chaves PIX",
+                    "05": "QR Code PIX",
+                };
+                if (seqMap[epId] && seqDiagrams[seqMap[epId]]) {
+                    diagramHtml += `<div class="diagram-box" style="margin-top:16px;">
+    <h3><span class="material-symbols-outlined" style="vertical-align:middle;margin-right:6px;">route</span> Diagrama de Sequência — ${seqMap[epId]}</h3>
+    <div class="mermaid">
+${seqDiagrams[seqMap[epId]]}
+    </div>
+  </div>`;
+                }
+                html += `<section class="card" id="${id}">
+  <h2><span class="material-symbols-outlined">${icon}</span> ${s.title}</h2>
+  ${renderEpicCard(parsed, epicIdx)}
+  ${diagramHtml}
+</section>`;
+                continue;
+            }
+        }
+        // === RESUMO DE ESTIMATIVAS section → table ===
+        if (titleLower.includes("resumo")) {
+            const tableHtml = parseMarkdownTable(s.lines);
+            const extraLines = s.lines.filter((l) => !l.trim().startsWith("|") && l.trim() && !l.trim().match(/^\|?\s*[-:]+/));
+            const extraHtml = extraLines.map((l) => `<p>${fmt(l)}</p>`).join("\n");
+            html += `<section class="card" id="${id}">
+  <h2><span class="material-symbols-outlined">${icon}</span> ${s.title}</h2>
+  ${tableHtml}
+  ${extraHtml}
+</section>`;
+            continue;
+        }
+        // === ONDAS DE ENTREGA section → wave components ===
+        if (titleLower.includes("onda")) {
+            const wavesHtml = renderWaves(s.lines);
+            html += `<section class="card" id="${id}">
+  <h2><span class="material-symbols-outlined">${icon}</span> ${s.title}</h2>
+  ${wavesHtml}
+</section>`;
+            continue;
+        }
+        // === DEFAULT fallback ===
+        html += renderSection(s, i, sections);
+    }
+    return html;
+}
+// ============================================================
+// MAIN EXPORT — generateReport
+// ============================================================
+export async function generateReport(params) {
+    const { title, content, reportType, outputDir, diagramsDir } = params;
+    const now = new Date();
+    const dateStr = now.toISOString().split("T")[0];
+    const slug = title.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "")
+        .replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
+    const filename = `${dateStr}-${reportType}-${slug}.html`;
+    const dir = outputDir || join(homedir(), "creative-reports");
+    await mkdir(dir, { recursive: true });
+    const filepath = join(dir, filename);
+    // Try to load extra CSS from S3 (optional enhancement)
+    let extraCSS = "";
+    try {
+        extraCSS = await loadTemplate("_base-styles.css");
+    }
+    catch {
+        // No extra CSS — dual theme CSS is self-contained
+    }
+    const sections = parseSections(content);
+    const isEpics = reportType === "epics";
+    const sectionsHtml = isEpics
+        ? renderEpicsReport(sections, diagramsDir)
+        : sections.map((s, i) => renderSection(s, i, sections)).join("\n");
+    const tocHtml = renderToc(sections);
+    const reportTypeLabels = {
+        feasibility: "Parecer de Viabilidade",
+        architecture: "Arquitetura",
+        analysis: "Analise de Codigo",
+        process: "Processo",
+        epics: "Epicos de Entrega",
+    };
+    const hasMermaid = isEpics || content.includes("```mermaid") || content.includes("class=\"mermaid\"");
+    const mermaidScript = hasMermaid
+        ? `<script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
+<script>
+(function(){
+  var darkVars={primaryColor:'#1B3B6F',primaryTextColor:'#E5E7EB',primaryBorderColor:'#2F6DB3',lineColor:'#4FB3FF',secondaryColor:'#0F1C2E',tertiaryColor:'#111827',noteBkgColor:'#1B3B6F',noteTextColor:'#E5E7EB',noteBorderColor:'#2F6DB3',actorBkg:'#1B3B6F',actorTextColor:'#E5E7EB',actorBorder:'#2F6DB3',signalColor:'#4FB3FF',signalTextColor:'#E5E7EB',labelBoxBkgColor:'#0F1C2E',labelTextColor:'#E5E7EB'};
+  var lightVars={primaryColor:'#DBEAFE',primaryTextColor:'#1E293B',primaryBorderColor:'#2563EB',lineColor:'#1D4ED8',secondaryColor:'#EFF6FF',tertiaryColor:'#F8FAFC',noteBkgColor:'#DBEAFE',noteTextColor:'#1E293B',noteBorderColor:'#2563EB',actorBkg:'#DBEAFE',actorTextColor:'#1E293B',actorBorder:'#2563EB',signalColor:'#1D4ED8',signalTextColor:'#1E293B',labelBoxBkgColor:'#EFF6FF',labelTextColor:'#1E293B'};
+  var saved=localStorage.getItem('creative-ia50-theme')||'dark';
+  var isL=saved==='light';
+  mermaid.initialize({startOnLoad:true,theme:isL?'default':'dark',themeVariables:isL?lightVars:darkVars});
+  window.__mermaidDarkVars=darkVars;
+  window.__mermaidLightVars=lightVars;
+})();
+</script>`
+        : "";
+    const html = `<!DOCTYPE html>
+<html lang="pt-BR">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>${title} — Creative IA 50</title>
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&display=swap" />
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
+  ${mermaidScript}
+  <style>
+    ${getDualThemeCSS()}
+    ${extraCSS}
+  </style>
+</head>
+<body>
+${getThemeToggleJS()}
+<a href="#main-content" class="skip-link" style="position:absolute;left:-9999px;top:0;z-index:9999;padding:8px 16px;background:#4FB3FF;color:#000;font-weight:600;text-decoration:none;border-radius:0 0 4px 0;" onfocus="this.style.left='0'" onblur="this.style.left='-9999px'">Pular para conteudo</a>
+
+<button class="theme-toggle" onclick="toggleTheme()" title="Alternar tema" aria-label="Alternar tema claro/escuro">
+  <span class="material-symbols-outlined icon-dark">light_mode</span>
+  <span class="material-symbols-outlined icon-light">dark_mode</span>
+</button>
+<button class="print-btn" onclick="window.print()" title="Imprimir" aria-label="Imprimir">
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" aria-hidden="true"><path d="M2.5 8a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1z"/><path d="M5 1a1 1 0 0 0-1 1v1H3.5A1.5 1.5 0 0 0 2 4.5v3A1.5 1.5 0 0 0 3.5 9H4v2.5a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V9h.5A1.5 1.5 0 0 0 14 7.5v-3A1.5 1.5 0 0 0 12.5 3H12V2a1 1 0 0 0-1-1H5zm6 1v1H5V2h6zm-6 7v3h6V9H5z"/></svg>
+</button>
+
+<div class="page">
+  <header class="cover">
+    <div class="brand">
+      <img src="${LOGO_BASE64}" alt="" role="presentation" class="brand-logo" />
+      <div>
+        <div class="eyebrow">Creative IA 50 · ${reportTypeLabels[reportType] || reportType}</div>
+        <h1>${title}</h1>
+        <p class="subtitle">Documento gerado automaticamente via MCP Server</p>
+      </div>
+    </div>
+    <div class="cover-meta">
+      <span class="pill" style="background:linear-gradient(135deg,#2F6DB3,#4FB3FF);color:#fff;font-weight:600">${reportType.toUpperCase()}</span>
+      <span class="pill">${dateStr}</span>
+      <span class="pill">MCP Server v1.0.0</span>
+    </div>
+  </header>
+
+  <div class="layout">
+    <aside class="toc" role="navigation" aria-label="Sumario">
+      <h2><span class="material-symbols-outlined" style="font-size:16px;vertical-align:middle">menu_book</span> Sumario</h2>
+      ${tocHtml}
+    </aside>
+
+    <main class="content" id="main-content">
+      ${sectionsHtml}
+    </main>
+  </div>
+
+  <div class="footer">
+    Creative IA 50 &copy; ${now.getFullYear()} — Propriedade intelectual protegida. Distribuicao nao autorizada e proibida.
+  </div>
+</div>
+
+</body>
+</html>`;
+    await writeFile(filepath, html, "utf-8");
+    return [
+        `Report generated successfully.`,
+        ``,
+        `File: ${filepath}`,
+        `Type: ${reportType}`,
+        `Size: ${Buffer.byteLength(html, "utf-8")} bytes`,
+        ``,
+        `Open in browser: file://${filepath}`,
+    ].join("\n");
+}