sela-core 0.1.0-alpha.1

package/dist/services/HealReportService.js

@@ -0,0 +1,1039 @@
+"use strict";
+// src/services/HealReportService.ts
+//
+// Sela Insights — Transparent Healing Report.
+//
+// Responsibilities:
+//   • Buffer HealEvents during a Playwright run (record / attachFailureScreenshot).
+//   • On flushToDisk():
+//       1. Read `.sela-history.json` sidecar from the project root.
+//       2. Call ReportGenerator.generate() to validate, compute stats/ROI,
+//          and merge the current run into the history window.
+//       3. Write the updated history back to `.sela-history.json`.
+//       4. Render and write `sela-report.html` (the full embedded dashboard).
+//       5. Write `sela-report.json` (the raw payload for CI consumers).
+//
+// Template embedding strategy:
+//   CSS and JS are stored as plain string constants using Array.join() instead
+//   of template literals so TypeScript never misinterprets backticks or ${...}
+//   expressions that belong to the browser runtime. renderHtml() assembles the
+//   final HTML via simple string concatenation — zero template literals that
+//   could interact with the embedded front-end code.
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.sharedHealReport = exports.HealReportService = void 0;
+exports.reportShardDir = reportShardDir;
+exports.clearReportShards = clearReportShards;
+exports.summariseSnapshot = summariseSnapshot;
+const fs = __importStar(require("fs"));
+const path = __importStar(require("path"));
+const atomicWrite_1 = require("../utils/atomicWrite");
+const logger_1 = require("../utils/logger");
+const ReportGenerator_1 = require("./ReportGenerator");
+// ─────────────────────────────────────────────────────────────────────────────
+// SIDECAR CONFIG
+// ─────────────────────────────────────────────────────────────────────────────
+const HISTORY_FILE = ".sela-history.json";
+// ─────────────────────────────────────────────────────────────────────────────
+// PER-WORKER REPORT SHARDS (SELA-5 concurrency safety)
+//
+// Local multi-worker runs (`playwright test --workers=N`) all share one cwd, so
+// having every worker write `sela-report.json` directly is a last-writer-wins
+// race — the final file keeps only one worker's events. Instead each worker
+// writes its events to a private shard file under this dir (mirroring the
+// pending-prompts ledger), and the single main-process reporter fans them in
+// via ReportMergeService at onEnd. CI already shards across machines + merges,
+// so it keeps the direct flushToDisk path.
+// ─────────────────────────────────────────────────────────────────────────────
+const SHARD_SUBDIR = path.join(".sela", "report-shards");
+/** Directory holding this run's per-worker report shards. */
+function reportShardDir(cwd) {
+    return path.join(cwd, SHARD_SUBDIR);
+}
+/** Remove the shard directory and every shard beneath it. Idempotent. */
+function clearReportShards(cwd) {
+    const dir = reportShardDir(cwd);
+    if (!fs.existsSync(dir))
+        return;
+    fs.rmSync(dir, { recursive: true, force: true });
+}
+function shardRandomTag() {
+    return Math.random().toString(36).slice(2, 8);
+}
+// ─────────────────────────────────────────────────────────────────────────────
+// SNAPSHOT SUMMARISER
+// ─────────────────────────────────────────────────────────────────────────────
+function summariseSnapshot(s) {
+    if (!s)
+        return null;
+    return {
+        tagName: s.tagName,
+        text: s.text,
+        role: s.role,
+        classes: s.classes ?? [],
+        attributes: s.attributes ?? {},
+        ancestry: (s.ancestry ?? []).map((a) => a.fingerprint),
+        closestLabel: s.anchors?.closestLabel ?? null,
+        rowAnchor: s.anchors?.rowAnchor ?? null,
+        isGhost: s.visibility?.isGhost ?? false,
+        ghostReason: s.visibility?.ghostReason ?? null,
+        isOccluded: s.visibility?.isOccluded ?? false,
+        isInShadowDom: s.isInShadowDom ?? false,
+    };
+}
+// ─────────────────────────────────────────────────────────────────────────────
+// HealReportService
+// ─────────────────────────────────────────────────────────────────────────────
+class HealReportService {
+    events = [];
+    startedAt = new Date().toISOString();
+    record(event) {
+        this.events.push(event);
+    }
+    size() {
+        return this.events.length;
+    }
+    clear() {
+        this.events = [];
+        this.startedAt = new Date().toISOString();
+    }
+    hasContent() {
+        return this.events.length > 0;
+    }
+    getHealedEvents() {
+        return this.events.filter((e) => e.kind === "HEALED");
+    }
+    getProtectedEvents() {
+        return this.events.filter((e) => e.kind === "PROTECTED");
+    }
+    getFailedEvents() {
+        return this.events.filter((e) => e.kind === "FAILED");
+    }
+    /**
+     * Attach a Playwright failure screenshot (Base64 PNG, no data: prefix)
+     * onto the FAILED event(s) matching the supplied identity hints.
+     * Returns the number of events updated.
+     */
+    attachFailureScreenshot(match, base64Png) {
+        if (!base64Png)
+            return 0;
+        const norm = (p) => (p ?? "").replace(/\\/g, "/").toLowerCase();
+        const targetFile = norm(match.sourceFile);
+        let touched = 0;
+        for (const ev of this.events) {
+            if (ev.kind !== "FAILED")
+                continue;
+            const evFile = norm(ev.sourceFile);
+            const fileMatch = !targetFile ||
+                !evFile ||
+                evFile === targetFile ||
+                evFile.endsWith(targetFile) ||
+                targetFile.endsWith(evFile);
+            const titleMatch = !match.testTitle || ev.testTitle === match.testTitle;
+            const idMatch = !match.stableId || ev.stableId === match.stableId;
+            if (fileMatch && titleMatch && idMatch) {
+                ev.failureScreenshotPng = base64Png;
+                touched++;
+            }
+        }
+        return touched;
+    }
+    // ── History sidecar ─────────────────────────────────────────────────────
+    readHistory(targetDir) {
+        const histPath = path.join(targetDir, HISTORY_FILE);
+        try {
+            const raw = fs.readFileSync(histPath, "utf8");
+            const parsed = JSON.parse(raw);
+            if (!Array.isArray(parsed))
+                return [];
+            return parsed;
+        }
+        catch {
+            return [];
+        }
+    }
+    writeHistory(targetDir, runs) {
+        const histPath = path.join(targetDir, HISTORY_FILE);
+        try {
+            fs.writeFileSync(histPath, JSON.stringify(runs, null, 2), "utf8");
+        }
+        catch (err) {
+            logger_1.logger.warn(`Could not write history sidecar: ${err}`);
+        }
+    }
+    // ── Main flush ──────────────────────────────────────────────────────────
+    /**
+     * Generate and write `sela-report.html` + `sela-report.json` to targetDir.
+     * Also updates `.sela-history.json` with the current run's stats.
+     * Returns the absolute path of the HTML report, or null when there is
+     * nothing to write.
+     */
+    flushToDisk(targetDir = process.cwd(), opts = {}) {
+        if (this.events.length === 0)
+            return null;
+        const priorHistory = this.readHistory(targetDir);
+        const data = ReportGenerator_1.ReportGenerator.generate(this.events, {
+            cwd: targetDir,
+            startedAt: this.startedAt,
+            historicalRuns: priorHistory,
+            runId: opts.runId ??
+                process.env["GITHUB_RUN_ID"] ??
+                process.env["CI_PIPELINE_ID"] ??
+                undefined,
+        });
+        return this.writeReportData(targetDir, data);
+    }
+    /**
+     * Render and persist a pre-computed {@link ReportData} payload to `targetDir`:
+     *   • `.sela-history.json` (the rolling window from `data.historical_runs`)
+     *   • `sela-report.html`   (the embedded dashboard)
+     *   • `sela-report.json`   (the raw payload for CI consumers)
+     *
+     * Extracted from {@link flushToDisk} so the CI merge path
+     * (`ReportMergeService`) writes a shard-aggregated report through the exact
+     * same rendering / serialisation logic — no duplication.
+     *
+     * Unlike `flushToDisk`, this writes unconditionally: an empty-event payload
+     * still produces a report and a `healed:0` history row. That is the desired
+     * CI behaviour — a clean, zero-heal pipeline is a healthy data point that
+     * must keep the trend chart's x-axis cadence intact.
+     *
+     * Returns the absolute path of the written HTML report.
+     */
+    writeReportData(targetDir, data) {
+        this.writeHistory(targetDir, data.historical_runs);
+        const html = renderHtml(data);
+        const htmlPath = path.join(targetDir, "sela-report.html");
+        fs.writeFileSync(htmlPath, html, "utf8");
+        const jsonPath = path.join(targetDir, "sela-report.json");
+        fs.writeFileSync(jsonPath, JSON.stringify({
+            generatedAt: data.generatedAt,
+            startedAt: data.startedAt,
+            cwd: data.cwd,
+            stats: data.stats,
+            roi: data.roi,
+            historical_runs: data.historical_runs,
+            events: data.events,
+        }, null, 2), "utf8");
+        return htmlPath;
+    }
+    /**
+     * Write THIS worker's buffered events to a private shard file under
+     * `<cwd>/.sela/report-shards/` — one file per worker process (pid +
+     * timestamp + random tag), so concurrent workers never contend on a shared
+     * report path. The main-process reporter fans them in via
+     * {@link ReportMergeService} at onEnd. Returns the shard path, or null when
+     * there is nothing to flush.
+     *
+     * Shard shape is `{ startedAt, events }`, which ReportMergeService.readShard
+     * Events accepts (it also tolerates a bare event array).
+     */
+    flushShard(cwd = process.cwd()) {
+        if (this.events.length === 0)
+            return null;
+        const dir = reportShardDir(cwd);
+        fs.mkdirSync(dir, { recursive: true });
+        const file = path.join(dir, `sela-shard-${process.pid}-${Date.now()}-${shardRandomTag()}.json`);
+        (0, atomicWrite_1.atomicWriteFile)(file, JSON.stringify({ startedAt: this.startedAt, events: this.events }, null, 2));
+        return file;
+    }
+}
+exports.HealReportService = HealReportService;
+// ─────────────────────────────────────────────────────────────────────────────
+// MODULE-LEVEL SINGLETON
+// ─────────────────────────────────────────────────────────────────────────────
+exports.sharedHealReport = new HealReportService();
+// ─────────────────────────────────────────────────────────────────────────────
+// HTML RENDERER
+//
+// Uses plain string concatenation throughout — no TypeScript template literals
+// that could misinterpret the embedded CSS/JS content.
+// ─────────────────────────────────────────────────────────────────────────────
+function renderHtml(data) {
+    // Embed the JSON payload. Escape </script> sequences and lone < so the
+    // string is safe inside a <script> block regardless of content.
+    const payload = JSON.stringify(data)
+        .replace(/</g, "\\u003c")
+        .replace(/\//g, "\\/");
+    return ("<!DOCTYPE html>\n" +
+        '<html lang="en">\n' +
+        "<head>\n" +
+        '<meta charset="UTF-8"/>\n' +
+        '<meta name="viewport" content="width=device-width,initial-scale=1.0"/>\n' +
+        "<title>Sela Insights \u2014 Healing Report</title>\n" +
+        '<link rel="preconnect" href="https://fonts.googleapis.com"/>\n' +
+        '<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>\n' +
+        '<link href="https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500;600&family=Geist:wght@300;400;500;600;700&display=swap" rel="stylesheet"/>\n' +
+        '<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.js"><\/script>\n' +
+        "<style>\n" +
+        REPORT_CSS +
+        "\n</style>\n" +
+        "</head>\n" +
+        "<body>\n" +
+        '<div class="bg-noise"></div>\n' +
+        '<div class="bg-grid"></div>\n' +
+        buildTopbar() +
+        buildOverviewView() +
+        buildDeepDiveView() +
+        buildFooter() +
+        '<div id="toast" class="toast hidden"></div>\n' +
+        "<script>window.__SELA_DATA__ = " +
+        payload +
+        ";<\/script>\n" +
+        "<script>\n" +
+        REPORT_JS +
+        "\n<\/script>\n" +
+        "</body>\n" +
+        "</html>");
+}
+function buildTopbar() {
+    return ('<nav class="topbar">\n' +
+        '  <div class="wrap topbar-inner">\n' +
+        '    <div class="brand">\n' +
+        '      <div class="brand-hex"></div>\n' +
+        '      <span class="brand-name">Sela</span>\n' +
+        '      <span class="brand-sep">/</span>\n' +
+        '      <span class="brand-sub">Healing Report</span>\n' +
+        "    </div>\n" +
+        '    <div style="display:flex;align-items:center;gap:12px">\n' +
+        '      <div class="view-toggle">\n' +
+        '        <button class="vt-btn active" id="btn-overview" onclick="setView(\'overview\')">Overview</button>\n' +
+        '        <button class="vt-btn" id="btn-deepdive" onclick="setView(\'deepdive\')">Deep Dive</button>\n' +
+        "      </div>\n" +
+        '      <div class="topbar-meta">\n' +
+        '        <div class="topbar-pill live"><span class="dot"></span>Run complete</div>\n' +
+        "      </div>\n" +
+        "    </div>\n" +
+        "  </div>\n" +
+        "</nav>\n");
+}
+function buildOverviewView() {
+    return ('<div id="view-overview">\n' +
+        '<div class="wrap">\n' +
+        '  <div class="hero">\n' +
+        '    <div class="exec-row">\n' +
+        "      <div>\n" +
+        '        <div class="exec-eyebrow"><span class="ei"></span>Sela Intelligence Run<span class="ei"></span></div>\n' +
+        '        <h1 class="exec-h1" id="exec-h1"></h1>\n' +
+        '        <p class="exec-sub" id="exec-sub"></p>\n' +
+        "      </div>\n" +
+        '      <div style="text-align:right;font-size:12px;color:var(--text3)">\n' +
+        '        <div id="meta-gen" style="margin-bottom:3px"></div>\n' +
+        '        <div id="meta-cwd" style="font-family:var(--mono);font-size:11px;word-break:break-all;max-width:280px"></div>\n' +
+        "      </div>\n" +
+        "    </div>\n" +
+        '    <div class="kpi-row">\n' +
+        '      <div class="kpi k-time"><div class="kpi-accent"></div><div class="kpi-l">Time saved</div><div class="kpi-v" id="kpi-time"></div><div class="kpi-f">estimated dev time</div></div>\n' +
+        '      <div class="kpi k-healed"><div class="kpi-accent"></div><div class="kpi-l">Healed</div><div class="kpi-v" id="kpi-healed"></div><div class="kpi-f">auto-fixed &amp; verified</div></div>\n' +
+        '      <div class="kpi k-prot"><div class="kpi-accent"></div><div class="kpi-l">Protected</div><div class="kpi-v" id="kpi-prot"></div><div class="kpi-f">regressions blocked</div></div>\n' +
+        '      <div class="kpi k-fail"><div class="kpi-accent"></div><div class="kpi-l">Failed</div><div class="kpi-v" id="kpi-fail"></div><div class="kpi-f">needs your eyes</div></div>\n' +
+        "    </div>\n" +
+        '    <div class="charts-row">\n' +
+        '      <div class="chart-card">\n' +
+        '        <div class="chart-label">Run Distribution</div>\n' +
+        '        <div class="donut-wrap">\n' +
+        '          <canvas id="donut-chart"></canvas>\n' +
+        '          <div class="donut-center"><div class="donut-total" id="donut-total"></div><div class="donut-total-l">Events</div></div>\n' +
+        "        </div>\n" +
+        '        <div class="donut-legend" id="donut-legend"></div>\n' +
+        "      </div>\n" +
+        '      <div class="chart-card">\n' +
+        '        <div class="trend-header">\n' +
+        '          <div class="chart-label" style="margin-bottom:0">Sela Impact \u2014 Last 14 Runs</div>\n' +
+        '          <div class="trend-badge" id="trend-badge"></div>\n' +
+        "        </div>\n" +
+        '        <div class="trend-canvas-wrap"><canvas id="trend-chart"></canvas></div>\n' +
+        '        <div style="margin-top:16px">\n' +
+        '          <div class="chart-label">Recent Runs</div>\n' +
+        '          <div id="hist-table">\n' +
+        '            <div class="hist-row hdr">\n' +
+        '              <div class="hc">Run</div><div class="hc">Healed</div><div class="hc">Protected</div><div class="hc">Failed</div><div class="hc">Confidence</div><div class="hc">Time Saved</div>\n' +
+        "            </div>\n" +
+        "          </div>\n" +
+        "        </div>\n" +
+        "      </div>\n" +
+        "    </div>\n" +
+        '    <div style="margin-bottom:32px;display:flex;gap:10px;flex-wrap:wrap">\n' +
+        '      <button class="btn btn-primary" onclick="setView(\'deepdive\')">&#x2192; Inspect all events</button>\n' +
+        '      <button class="btn" onclick="copyJson()">&#x2398; Copy JSON</button>\n' +
+        "    </div>\n" +
+        "  </div>\n" +
+        "</div>\n" +
+        "</div>\n");
+}
+function buildDeepDiveView() {
+    return ('<div id="view-deepdive">\n' +
+        '<div class="wrap" style="padding-top:24px">\n' +
+        '  <div class="section-hdr">\n' +
+        "    <h2>Engineering Deep Dive</h2>\n" +
+        '    <div class="sh-count" id="dd-count"></div>\n' +
+        '    <div class="sh-line"></div>\n' +
+        '    <button class="btn" onclick="setView(\'overview\')" style="font-size:11.5px;padding:4px 10px">&#x2190; Overview</button>\n' +
+        "  </div>\n" +
+        '  <div class="filter-bar">\n' +
+        '    <div class="fb-chips">\n' +
+        '      <div class="chip c-all on" data-filter="ALL"><span>All</span></div>\n' +
+        '      <div class="chip c-heal" data-filter="HEALED"><span class="chip-dot"></span>Healed</div>\n' +
+        '      <div class="chip c-prot" data-filter="PROTECTED"><span class="chip-dot"></span>Protected \xb7 Bug Caught</div>\n' +
+        '      <div class="chip c-fail" data-filter="FAILED"><span class="chip-dot"></span>Failed</div>\n' +
+        "    </div>\n" +
+        '    <div class="fb-search">\n' +
+        '      <svg width="13" height="13" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.8"><circle cx="7" cy="7" r="5"/><path d="M11 11l3 3"/><\/svg>\n' +
+        '      <input type="text" id="search-input" placeholder="selector, file, test name\u2026"/>\n' +
+        "    </div>\n" +
+        "  </div>\n" +
+        '  <div class="events" id="events-list"></div>\n' +
+        '  <div class="empty-state hidden" id="empty-state">\n' +
+        '    <div class="es-icon">\u2205</div>\n' +
+        '    <div class="es-title">Nothing matches</div>\n' +
+        "    <div>Try a different filter or clear the search.</div>\n" +
+        "  </div>\n" +
+        "</div>\n" +
+        "</div>\n");
+}
+function buildFooter() {
+    return ('<footer class="footer">\n' +
+        '  <div class="wrap footer-inner">\n' +
+        '    <div>Generated by <strong>sela-core</strong> \xb7 <span id="footer-cwd" style="font-family:var(--mono);font-size:11px"></span></div>\n' +
+        "    <div>Sela is a transparent pair-programmer. Every decision is yours to keep, roll back, or report.</div>\n" +
+        "  </div>\n" +
+        "</footer>\n");
+}
+// ─────────────────────────────────────────────────────────────────────────────
+// CSS — stored as a plain string constant (no backtick template literal)
+// so TypeScript has no chance to misparse it.
+// ─────────────────────────────────────────────────────────────────────────────
+/* eslint-disable prettier/prettier */
+const REPORT_CSS = [
+    "*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}",
+    ":root{",
+    "  --bg0:#060709;--bg1:#0b0d12;--bg2:#10131a;--bg3:#161923;--bg4:#1c2030;",
+    "  --line:#1e2336;--line2:#262d42;--line3:#2e3650;",
+    "  --text:#dde2f0;--text2:#8b93b0;--text3:#5a6180;",
+    "  --cyan:#00d4ff;--cyan-dim:rgba(0,212,255,.12);--cyan-glow:rgba(0,212,255,.25);",
+    "  --purple:#a259ff;--purple-dim:rgba(162,89,255,.12);--purple-glow:rgba(162,89,255,.25);",
+    "  --red:#ff4d6a;--red-dim:rgba(255,77,106,.12);--red-glow:rgba(255,77,106,.25);",
+    "  --green:#00e5a0;--green-dim:rgba(0,229,160,.1);",
+    "  --amber:#ffb84d;--amber-dim:rgba(255,184,77,.1);",
+    "  --radius:10px;--radius-lg:14px;--radius-xl:20px;",
+    "  --mono:'Geist Mono',ui-monospace,monospace;",
+    "  --sans:'Geist',system-ui,sans-serif;",
+    "}",
+    "html{background:var(--bg0);color:var(--text);font-family:var(--sans);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}",
+    "body{min-height:100vh;overflow-x:hidden}",
+    "a{color:var(--cyan);text-decoration:none}",
+    "button{font-family:var(--sans);cursor:pointer}",
+    "input{font-family:var(--sans)}",
+    "::-webkit-scrollbar{width:6px;height:6px}",
+    "::-webkit-scrollbar-track{background:var(--bg1)}",
+    "::-webkit-scrollbar-thumb{background:var(--line3);border-radius:3px}",
+    ".bg-noise{",
+    "  position:fixed;inset:0;z-index:-2;",
+    "  background:",
+    "    radial-gradient(ellipse 80% 50% at 10% 10%,rgba(0,212,255,.07) 0%,transparent 60%),",
+    "    radial-gradient(ellipse 60% 40% at 90% 20%,rgba(162,89,255,.08) 0%,transparent 60%),",
+    "    radial-gradient(ellipse 50% 60% at 50% 90%,rgba(162,89,255,.05) 0%,transparent 60%),",
+    "    var(--bg0);",
+    "}",
+    ".bg-grid{",
+    "  position:fixed;inset:0;z-index:-1;pointer-events:none;",
+    "  background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);",
+    "  background-size:40px 40px;",
+    "  mask-image:radial-gradient(ellipse at 50% 0%,black 0%,transparent 65%);",
+    "}",
+    ".wrap{max-width:1320px;margin:0 auto;padding:0 24px}",
+    ".topbar{position:sticky;top:0;z-index:100;background:rgba(6,7,9,.85);backdrop-filter:blur(16px) saturate(1.4);border-bottom:1px solid var(--line);height:52px;}",
+    ".topbar-inner{height:52px;display:flex;align-items:center;justify-content:space-between}",
+    ".brand{display:flex;align-items:center;gap:10px}",
+    ".brand-hex{width:28px;height:28px;background:linear-gradient(135deg,rgba(0,212,255,.2),rgba(162,89,255,.2));border:1px solid rgba(0,212,255,.3);clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);position:relative;}",
+    ".brand-hex::after{content:'';position:absolute;inset:4px;background:linear-gradient(135deg,var(--cyan),var(--purple));clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);opacity:.7;}",
+    ".brand-name{font-weight:600;font-size:14px;letter-spacing:-.2px}",
+    ".brand-sep{color:var(--text3);font-size:13px}",
+    ".brand-sub{font-size:12px;color:var(--text3);letter-spacing:.6px;text-transform:uppercase}",
+    ".topbar-meta{font-size:12px;color:var(--text3);display:flex;align-items:center;gap:16px}",
+    ".topbar-pill{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;font-size:11px;border:1px solid var(--line2);color:var(--text3);}",
+    ".topbar-pill .dot{width:5px;height:5px;border-radius:50%}",
+    ".topbar-pill.live .dot{background:var(--green);box-shadow:0 0 6px var(--green);animation:blink 2s ease-in-out infinite}",
+    "@keyframes blink{0%,100%{opacity:1}50%{opacity:.4}}",
+    ".view-toggle{display:flex;gap:2px;padding:3px;background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius)}",
+    ".vt-btn{padding:5px 14px;border-radius:7px;font-size:12px;font-weight:500;border:none;background:transparent;color:var(--text3);transition:all .2s ease}",
+    ".vt-btn.active{background:var(--bg4);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.4)}",
+    ".hero{padding:32px 0 0}",
+    ".exec-row{display:grid;grid-template-columns:1fr auto;gap:32px;align-items:start;padding-bottom:28px;border-bottom:1px solid var(--line);margin-bottom:28px}",
+    "@media(max-width:800px){.exec-row{grid-template-columns:1fr}}",
+    ".exec-eyebrow{display:inline-flex;align-items:center;gap:6px;font-size:11px;letter-spacing:1.8px;text-transform:uppercase;color:var(--cyan);margin-bottom:10px}",
+    ".exec-eyebrow .ei{width:14px;height:1px;background:var(--cyan);opacity:.6}",
+    ".exec-h1{font-size:32px;font-weight:700;line-height:1.1;letter-spacing:-.6px;background:linear-gradient(135deg,#fff 0%,rgba(221,226,240,.7) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:8px}",
+    ".exec-sub{font-size:14px;color:var(--text2);max-width:52ch;line-height:1.6}",
+    ".kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:28px}",
+    "@media(max-width:900px){.kpi-row{grid-template-columns:repeat(2,1fr)}}",
+    ".kpi{background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius-lg);padding:16px 18px;position:relative;overflow:hidden;transition:border-color .25s ease,transform .2s ease}",
+    ".kpi::before{content:'';position:absolute;inset:0;opacity:.5;background:linear-gradient(180deg,rgba(255,255,255,.03) 0%,transparent 100%);pointer-events:none}",
+    ".kpi:hover{transform:translateY(-2px);border-color:var(--line3)}",
+    ".kpi-l{font-size:10.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--text3);margin-bottom:6px}",
+    ".kpi-v{font-size:28px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;margin-bottom:4px}",
+    ".kpi-f{font-size:11.5px;color:var(--text3)}",
+    ".kpi-accent{position:absolute;top:0;right:0;width:3px;height:100%;border-radius:0 var(--radius-lg) var(--radius-lg) 0}",
+    ".kpi.k-time .kpi-v{background:linear-gradient(135deg,var(--cyan),var(--purple));-webkit-background-clip:text;background-clip:text;color:transparent}",
+    ".kpi.k-time .kpi-accent{background:linear-gradient(180deg,var(--cyan),var(--purple))}",
+    ".kpi.k-healed .kpi-v{color:var(--cyan)}.kpi.k-healed .kpi-accent{background:var(--cyan)}",
+    ".kpi.k-prot .kpi-v{color:var(--purple)}.kpi.k-prot .kpi-accent{background:var(--purple)}",
+    ".kpi.k-fail .kpi-v{color:var(--red)}.kpi.k-fail .kpi-accent{background:var(--red)}",
+    ".charts-row{display:grid;grid-template-columns:280px 1fr;gap:18px;margin-bottom:32px}",
+    "@media(max-width:900px){.charts-row{grid-template-columns:1fr}}",
+    ".chart-card{background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius-lg);padding:20px}",
+    ".chart-label{font-size:10.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--text3);margin-bottom:14px;display:flex;align-items:center;gap:8px}",
+    ".chart-label::after{content:'';flex:1;height:1px;background:var(--line)}",
+    ".donut-wrap{position:relative;width:160px;height:160px;margin:0 auto 16px}",
+    ".donut-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}",
+    ".donut-total{font-size:28px;font-weight:700;line-height:1}",
+    ".donut-total-l{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--text3);margin-top:2px}",
+    ".donut-legend{display:flex;flex-direction:column;gap:7px}",
+    ".dl-row{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:7px;border:1px solid transparent;cursor:pointer;transition:all .2s ease}",
+    ".dl-row:hover,.dl-row.active{border-color:var(--line3);background:var(--bg3)}",
+    ".dl-swatch{width:8px;height:8px;border-radius:2px;flex-shrink:0}",
+    ".dl-name{font-size:12.5px;color:var(--text2);flex:1}",
+    ".dl-val{font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums}",
+    ".dl-pct{font-size:11px;color:var(--text3);margin-left:4px}",
+    ".trend-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}",
+    ".trend-badge{font-size:11px;font-weight:600;padding:3px 9px;border-radius:999px;background:var(--green-dim);color:var(--green);border:1px solid rgba(0,229,160,.25)}",
+    ".trend-canvas-wrap{position:relative;width:100%;height:200px}",
+    ".section-hdr{display:flex;align-items:center;gap:10px;margin-bottom:14px}",
+    ".section-hdr h2{font-size:13px;font-weight:600;letter-spacing:.4px}",
+    ".section-hdr .sh-count{font-size:11px;padding:2px 8px;border-radius:999px;background:var(--bg3);color:var(--text3);border:1px solid var(--line);font-variant-numeric:tabular-nums}",
+    ".section-hdr .sh-line{flex:1;height:1px;background:var(--line)}",
+    ".filter-bar{display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap}",
+    ".fb-chips{display:flex;gap:6px;flex-wrap:wrap}",
+    ".chip{display:inline-flex;align-items:center;gap:5px;padding:5px 12px;border-radius:999px;font-size:12px;font-weight:500;border:1px solid var(--line2);background:var(--bg2);color:var(--text3);cursor:pointer;transition:all .2s ease}",
+    ".chip:hover{color:var(--text);border-color:var(--line3)}",
+    ".chip.c-all.on{border-color:rgba(255,255,255,.3);color:#fff;background:var(--bg3)}",
+    ".chip.c-heal.on{border-color:var(--cyan);color:var(--cyan);background:var(--cyan-dim)}",
+    ".chip.c-prot.on{border-color:var(--purple);color:var(--purple);background:var(--purple-dim)}",
+    ".chip.c-fail.on{border-color:var(--red);color:var(--red);background:var(--red-dim)}",
+    ".chip .chip-dot{width:5px;height:5px;border-radius:50%}",
+    ".c-heal .chip-dot,.chip.c-heal.on .chip-dot{background:var(--cyan)}",
+    ".c-prot .chip-dot,.chip.c-prot.on .chip-dot{background:var(--purple)}",
+    ".c-fail .chip-dot,.chip.c-fail.on .chip-dot{background:var(--red)}",
+    ".fb-search{margin-left:auto;display:flex;align-items:center;background:var(--bg2);border:1px solid var(--line2);border-radius:var(--radius);padding:0 12px;gap:7px;height:34px}",
+    ".fb-search input{background:none;border:none;outline:none;color:var(--text);font-size:12.5px;width:200px}",
+    ".fb-search input::placeholder{color:var(--text3)}",
+    ".events{display:flex;flex-direction:column;gap:8px}",
+    ".ecard{background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;transition:border-color .2s ease;animation:cardIn .4s cubic-bezier(.18,.89,.32,1.15) both}",
+    "@keyframes cardIn{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:translateY(0)}}",
+    ".ecard:hover{border-color:var(--line3)}",
+    ".ecard.ec-healed{border-left:2px solid var(--cyan)}",
+    ".ecard.ec-protected{border-left:2px solid var(--purple)}",
+    ".ecard.ec-failed{border-left:2px solid var(--red)}",
+    ".ecard.ec-protected .ecard-head{background:linear-gradient(90deg,rgba(162,89,255,.04),transparent)}",
+    ".ecard-head{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:12px;padding:13px 16px;cursor:pointer;user-select:none;transition:background .15s ease}",
+    ".ecard-head:hover{background:var(--bg3)}",
+    ".ecard.open .ecard-head{background:var(--bg3)}",
+    ".status-badge{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:999px;font-size:10.5px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;white-space:nowrap;border:1px solid currentColor}",
+    ".sb-healed{color:var(--cyan);background:var(--cyan-dim)}",
+    ".sb-protected{color:var(--purple);background:var(--purple-dim);animation:pulseborder 2.5s ease-in-out infinite}",
+    "@keyframes pulseborder{0%,100%{box-shadow:0 0 0 0 rgba(162,89,255,0)}50%{box-shadow:0 0 0 4px rgba(162,89,255,.15)}}",
+    ".sb-failed{color:var(--red);background:var(--red-dim)}",
+    ".sb-dot{width:5px;height:5px;border-radius:50%;background:currentColor;box-shadow:0 0 5px currentColor}",
+    ".ecard-title{min-width:0}",
+    ".ecard-selector{font-family:var(--mono);font-size:12.5px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px}",
+    ".ecard-meta{font-size:11.5px;color:var(--text3);display:flex;align-items:center;gap:5px;flex-wrap:wrap}",
+    ".ecard-meta a{color:var(--text2);font-family:var(--mono);font-size:11px}",
+    ".ecard-meta a:hover{color:var(--cyan)}",
+    ".ecard-tag{display:inline-block;font-size:10px;padding:1px 6px;border-radius:4px;background:var(--bg4);border:1px solid var(--line2);font-family:var(--mono);letter-spacing:.3px}",
+    ".ecard-tag.t-iframe{color:var(--cyan);border-color:rgba(0,212,255,.2)}",
+    ".ecard-tag.t-shadow{color:var(--purple);border-color:rgba(162,89,255,.2)}",
+    ".ecard-tag.t-dryrun{color:var(--amber);border-color:rgba(255,184,77,.2)}",
+    ".conf-badge{font-size:11px;font-weight:600;padding:3px 9px;border-radius:6px;font-variant-numeric:tabular-nums;white-space:nowrap}",
+    ".conf-high{background:rgba(0,229,160,.12);color:var(--green);border:1px solid rgba(0,229,160,.2)}",
+    ".conf-mid{background:rgba(255,184,77,.1);color:var(--amber);border:1px solid rgba(255,184,77,.2)}",
+    ".conf-low{background:rgba(255,77,106,.1);color:var(--red);border:1px solid rgba(255,77,106,.2)}",
+    ".chev{width:16px;height:16px;color:var(--text3);flex-shrink:0;transition:transform .25s ease}",
+    ".ecard.open .chev{transform:rotate(90deg)}",
+    ".ecard-body{display:none;padding:0 16px 18px;border-top:1px solid var(--line)}",
+    ".ecard.open .ecard-body{display:block;animation:bodyIn .3s ease both}",
+    "@keyframes bodyIn{0%{opacity:0;transform:translateY(-3px)}100%{opacity:1;transform:translateY(0)}}",
+    ".body-section{margin-top:16px}",
+    ".bs-title{font-size:10.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--text3);margin-bottom:10px;display:flex;align-items:center;gap:8px}",
+    ".bs-title .bst-dot{width:5px;height:5px;border-radius:50%;background:var(--purple);box-shadow:0 0 6px var(--purple)}",
+    ".diff-block{background:var(--bg1);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}",
+    ".diff-bar{display:flex;align-items:center;gap:8px;padding:7px 12px;background:var(--bg3);border-bottom:1px solid var(--line);font-size:11px;color:var(--text3);font-family:var(--mono)}",
+    ".diff-bar .sep{opacity:.3}",
+    ".diff-line{display:grid;grid-template-columns:22px 48px 1fr;font-family:var(--mono);font-size:12px;line-height:1.6}",
+    ".diff-line .gutter{text-align:center;color:var(--text3)}",
+    ".diff-line .ln{text-align:right;padding-right:10px;color:var(--text3)}",
+    ".diff-line .code{white-space:pre-wrap;word-break:break-word;padding-right:12px}",
+    ".diff-line.dl-add{background:rgba(0,229,160,.07)}",
+    ".diff-line.dl-add .gutter,.diff-line.dl-add .code{color:var(--green)}",
+    ".diff-line.dl-del{background:rgba(255,77,106,.07)}",
+    ".diff-line.dl-del .gutter,.diff-line.dl-del .code{color:var(--red)}",
+    ".diff-line.dl-ctx .code{color:var(--text3)}",
+    ".diff-line.dl-hunk{background:rgba(0,212,255,.04)}",
+    ".diff-line.dl-hunk .code{color:rgba(0,212,255,.6);font-size:11px}",
+    ".auditor-wrap{display:grid;grid-template-columns:160px 1fr;gap:16px;background:var(--bg1);border:1px solid var(--line);border-radius:var(--radius);padding:16px}",
+    "@media(max-width:700px){.auditor-wrap{grid-template-columns:1fr}}",
+    ".gauge-ring{position:relative;width:130px;height:130px;margin:0 auto}",
+    ".gauge-ring svg{width:100%;height:100%;transform:rotate(-90deg)}",
+    ".gauge-ring .gt{stroke:var(--line3);fill:none;stroke-width:9}",
+    ".gauge-ring .gb{fill:none;stroke-width:9;stroke-linecap:round;transition:stroke-dasharray 1.2s cubic-bezier(.4,0,.2,1)}",
+    ".gauge-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}",
+    ".gauge-pct{font-size:26px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1}",
+    ".gauge-sub{font-size:9.5px;letter-spacing:1px;text-transform:uppercase;color:var(--text3);margin-top:2px}",
+    ".gb-consistent{stroke:var(--green)}.gb-suspicious{stroke:var(--amber)}.gb-inconsistent{stroke:var(--red)}",
+    ".pct-consistent{color:var(--green)}.pct-suspicious{color:var(--amber)}.pct-inconsistent{color:var(--red)}",
+    ".audit-details{display:flex;flex-direction:column;gap:7px}",
+    ".ad-row{display:flex;gap:8px;font-size:12.5px;align-items:flex-start}",
+    ".ad-label{color:var(--text3);font-size:11px;letter-spacing:.5px;text-transform:uppercase;min-width:110px;flex-shrink:0;padding-top:1px}",
+    ".ad-val{color:var(--text)}",
+    ".ad-reason{margin-top:6px;padding:10px 12px;border-left:2px solid var(--purple);background:rgba(162,89,255,.06);font-size:12.5px;color:var(--text);line-height:1.55;border-radius:0 var(--radius) var(--radius) 0}",
+    ".verdict-pill{display:inline-block;padding:2px 8px;border-radius:5px;font-size:10.5px;font-weight:700;letter-spacing:.8px;text-transform:uppercase}",
+    ".vp-consistent{color:var(--green);background:var(--green-dim);border:1px solid rgba(0,229,160,.2)}",
+    ".vp-suspicious{color:var(--amber);background:var(--amber-dim);border:1px solid rgba(255,184,77,.2)}",
+    ".vp-inconsistent{color:var(--red);background:var(--red-dim);border:1px solid rgba(255,77,106,.2)}",
+    ".cot{display:flex;flex-direction:column;gap:7px}",
+    ".cot-step{display:flex;gap:10px;align-items:flex-start;padding:9px 12px;background:var(--bg1);border:1px solid var(--line);border-radius:var(--radius)}",
+    ".cot-n{flex-shrink:0;font-family:var(--mono);font-size:10.5px;color:var(--cyan);width:20px;height:20px;border-radius:50%;background:rgba(0,212,255,.1);border:1px solid rgba(0,212,255,.2);display:inline-flex;align-items:center;justify-content:center}",
+    ".cot-t{color:var(--text2);font-size:12.5px;line-height:1.5}",
+    ".dna-table{width:100%;border-collapse:separate;border-spacing:0;font-size:12px;background:var(--bg1);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}",
+    ".dna-table th,.dna-table td{padding:7px 11px;text-align:left;border-bottom:1px solid var(--line)}",
+    ".dna-table th{background:var(--bg3);font-weight:600;color:var(--text3);font-size:10.5px;letter-spacing:.6px;text-transform:uppercase}",
+    ".dna-table tr:last-child td{border-bottom:none}",
+    ".dna-table td.field{color:var(--text3);width:20%}",
+    ".dna-table td.val{font-family:var(--mono);font-size:11.5px}",
+    ".dna-table td.icon{width:32px;text-align:center}",
+    ".dna-table tr.matched td.icon{color:var(--green)}",
+    ".dna-table tr.changed td.val.new{color:var(--amber)}",
+    ".dna-table tr.changed td.val.old{color:var(--text3);text-decoration:line-through dotted}",
+    ".dna-table tr.changed td.icon{color:var(--amber)}",
+    ".dna-table tr.missing td.icon{color:var(--text3)}",
+    ".alts{display:flex;flex-direction:column;gap:5px}",
+    ".alt-row{font-family:var(--mono);font-size:12px;color:var(--text2);padding:7px 11px;background:var(--bg1);border:1px solid var(--line);border-radius:var(--radius);display:flex;align-items:center;justify-content:space-between;gap:8px}",
+    ".alt-copy{font-size:10px;padding:2px 8px;border-radius:5px;border:1px solid var(--line2);background:var(--bg3);color:var(--text3);cursor:pointer;transition:all .15s ease;white-space:nowrap}",
+    ".alt-copy:hover{color:var(--text);border-color:var(--line3)}",
+    ".actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px;padding-top:14px;border-top:1px dashed var(--line2)}",
+    ".btn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:var(--radius);font-size:12.5px;font-weight:500;border:1px solid var(--line2);background:var(--bg3);color:var(--text2);cursor:pointer;transition:all .2s ease}",
+    ".btn:hover{color:var(--text);border-color:var(--line3);transform:translateY(-1px)}",
+    ".btn.btn-primary{background:linear-gradient(135deg,rgba(0,212,255,.15),rgba(162,89,255,.15));border-color:rgba(0,212,255,.3);color:var(--cyan)}",
+    ".btn.btn-primary:hover{box-shadow:0 4px 20px rgba(0,212,255,.2)}",
+    ".btn.btn-danger{border-color:rgba(255,77,106,.3);color:var(--red)}",
+    ".btn.btn-danger:hover{background:var(--red-dim)}",
+    ".btn[data-done='true']{border-color:rgba(0,229,160,.3);color:var(--green);background:var(--green-dim)}",
+    ".fail-img-wrap{background:var(--bg1);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}",
+    ".fail-img-wrap img{display:block;max-width:100%;height:auto}",
+    ".fail-img-meta{padding:6px 11px;font-size:11px;color:var(--text3);font-family:var(--mono)}",
+    ".prot-notice{padding:12px 14px;background:rgba(162,89,255,.07);border:1px solid rgba(162,89,255,.2);border-radius:var(--radius);font-size:12.5px;color:var(--text2);line-height:1.55}",
+    ".prot-notice strong{color:var(--purple)}",
+    ".row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}",
+    "@media(max-width:700px){.row2{grid-template-columns:1fr}}",
+    ".muted-block{padding:12px 14px;background:var(--bg1);border:1px dashed var(--line);border-radius:var(--radius);font-size:12px;color:var(--text3)}",
+    ".hist-row{display:grid;grid-template-columns:1fr repeat(5,80px);gap:0;font-size:12px}",
+    ".hist-row .hc{padding:6px 10px;border-bottom:1px solid var(--line)}",
+    ".hist-row.hdr .hc{color:var(--text3);font-size:10.5px;letter-spacing:.6px;text-transform:uppercase;background:var(--bg3)}",
+    ".hist-row:not(.hdr):hover .hc{background:var(--bg3)}",
+    ".hist-row .hc:first-child{color:var(--text2)}",
+    ".hist-saved{color:var(--cyan);font-weight:600}",
+    ".empty-state{text-align:center;padding:60px 20px;color:var(--text3);border:1px dashed var(--line2);border-radius:var(--radius-xl);margin-top:12px}",
+    ".es-icon{font-size:36px;margin-bottom:10px}",
+    ".es-title{font-size:15px;color:var(--text2);margin-bottom:4px}",
+    ".hidden{display:none!important}",
+    ".toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--bg4);border:1px solid var(--line3);color:var(--text);padding:10px 18px;border-radius:999px;font-size:12.5px;box-shadow:0 8px 30px rgba(0,0,0,.5);z-index:200;animation:toastIn .3s ease}",
+    "@keyframes toastIn{0%{opacity:0;transform:translate(-50%,8px)}100%{opacity:1;transform:translate(-50%,0)}}",
+    ".footer{border-top:1px solid var(--line);margin-top:60px;padding:20px 0;font-size:12px;color:var(--text3)}",
+    ".footer-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px}",
+    "#view-overview{display:block}",
+    "#view-deepdive{display:none}",
+    "body.view-deepdive #view-overview{display:none}",
+    "body.view-deepdive #view-deepdive{display:block}",
+].join("\n");
+/* eslint-enable prettier/prettier */
+// ─────────────────────────────────────────────────────────────────────────────
+// FRONT-END JS
+//
+// Stored as a plain Array.join() string — no TypeScript template literal so
+// the browser-side ${...} expressions and backtick strings are never
+// interpreted by the TypeScript compiler.
+// ─────────────────────────────────────────────────────────────────────────────
+/* eslint-disable prettier/prettier */
+const REPORT_JS = [
+    "(function(){",
+    "'use strict';",
+    "var DATA=window.__SELA_DATA__;",
+    "function esc(s){return String(s==null?'':s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/\"/g,'&quot;');}",
+    "function fmt(iso){try{return new Date(iso).toLocaleString();}catch(e){return iso;}}",
+    "function fmtPct(v){return(typeof v==='number'&&isFinite(v))?v+'%':'n/a';}",
+    "function fmtMin(m){var h=Math.floor(m/60),r=m%60;return h>0?h+'h '+r+'m':m+'m';}",
+    "function $(id){return document.getElementById(id);}",
+    "function qsa(sel,root){return Array.from((root||document).querySelectorAll(sel));}",
+    // ── View toggle
+    "function setView(v){",
+    "  document.body.classList.toggle('view-deepdive',v==='deepdive');",
+    "  $('btn-overview').classList.toggle('active',v==='overview');",
+    "  $('btn-deepdive').classList.toggle('active',v==='deepdive');",
+    "}",
+    "window.setView=setView;",
+    // ── Toast
+    "var toastTimer;",
+    "function toast(msg){var t=$('toast');t.textContent=msg;t.classList.remove('hidden');clearTimeout(toastTimer);toastTimer=setTimeout(function(){t.classList.add('hidden');},2600);}",
+    "window.copyJson=function(){navigator.clipboard&&navigator.clipboard.writeText(JSON.stringify(DATA,null,2)).then(function(){toast('JSON copied to clipboard');});};",
+    // ── Meta + KPIs
+    "var s=DATA.stats;",
+    "$('meta-gen').textContent='Generated '+fmt(DATA.generatedAt);",
+    "$('meta-cwd').textContent=DATA.cwd;",
+    "$('footer-cwd').textContent=DATA.cwd;",
+    "$('kpi-time').textContent=fmtMin(s.timeSavedMin);",
+    "$('kpi-healed').textContent=s.healed;",
+    "$('kpi-prot').textContent=s.protectedCnt;",
+    "$('kpi-fail').textContent=s.failed;",
+    "$('donut-total').textContent=s.total;",
+    "$('dd-count').textContent=DATA.events.length+' events';",
+    // ── Headline
+    "var headline=(function(){",
+    "  if(s.healed===0&&s.protectedCnt===0&&s.failed===0)return['Sela was idle this run.','No broken selectors were encountered.'];",
+    "  if(s.protectedCnt>0&&s.healed===0)return['Sela caught '+s.protectedCnt+' masked regression'+(s.protectedCnt!==1?'s':'')+'.',",
+    "    'The Intent Auditor blocked auto-fixes that would have silently changed test semantics.'];",
+    "  if(s.healed>0&&s.protectedCnt>0)return['Sela healed '+s.healed+' selector'+(s.healed!==1?'s':'')+' and caught '+s.protectedCnt+' regression'+(s.protectedCnt!==1?'s':'')+'.',",
+    "    'Every fix was verified by the Intent Auditor. Two would-be fixes were masked regressions \u2014 drill in below.'];",
+    "  if(s.healed>0)return['Sela healed '+s.healed+' selector'+(s.healed!==1?'s':'')+' automatically.',",
+    "    'Every fix was double-checked by the Intent Auditor before touching source code.'];",
+    "  return['Sela couldn\u2019t heal '+s.failed+' selector'+(s.failed!==1?'s':'')+'.',",
+    "    'These need a human hand \u2014 context, candidates, and direct links are ready below.'];",
+    "})();",
+    "$('exec-h1').textContent=headline[0];",
+    "$('exec-sub').textContent=headline[1];",
+    // ── Donut chart
+    "var total=s.healed+s.protectedCnt+s.failed||1;",
+    "var donutCtx=$('donut-chart').getContext('2d');",
+    "new Chart(donutCtx,{type:'doughnut',",
+    "  data:{labels:['Healed','Protected','Failed'],",
+    "    datasets:[{data:[s.healed,s.protectedCnt,s.failed],",
+    "      backgroundColor:['rgba(0,212,255,.8)','rgba(162,89,255,.8)','rgba(255,77,106,.8)'],",
+    "      borderColor:['#00d4ff','#a259ff','#ff4d6a'],borderWidth:1.5,hoverOffset:6}]},",
+    "  options:{responsive:true,maintainAspectRatio:false,cutout:'72%',",
+    "    plugins:{legend:{display:false},tooltip:{callbacks:{label:function(c){return' '+c.label+': '+c.parsed;}}}},",
+    "    onClick:function(e,els){if(!els.length)return;applyFilter(['HEALED','PROTECTED','FAILED'][els[0].index]);setView('deepdive');}",
+    "  }",
+    "});",
+    // ── Donut legend
+    "var legendData=[",
+    "  {filter:'ALL',swatch:'rgba(255,255,255,.3)',name:'All events',val:s.total,pct:null},",
+    "  {filter:'HEALED',swatch:'var(--cyan)',name:'Healed',val:s.healed,pct:Math.round(s.healed/total*100)+'%'},",
+    "  {filter:'PROTECTED',swatch:'var(--purple)',name:'Protected',val:s.protectedCnt,pct:Math.round(s.protectedCnt/total*100)+'%'},",
+    "  {filter:'FAILED',swatch:'var(--red)',name:'Failed',val:s.failed,pct:Math.round(s.failed/total*100)+'%'},",
+    "];",
+    "var $legend=$('donut-legend');",
+    "$legend.innerHTML=legendData.map(function(d,i){",
+    "  return '<div class=\"dl-row'+(i===0?' active':'')+'\" data-filter=\"'+d.filter+'\">'",
+    "    +'<div class=\"dl-swatch\" style=\"background:'+d.swatch+'\"></div>'",
+    "    +'<div class=\"dl-name\">'+d.name+'</div>'",
+    "    +'<div class=\"dl-val\"'+(d.filter!=='ALL'?' style=\"color:'+d.swatch+'\"':'')+'>'+d.val+'</div>'",
+    "    +(d.pct?'<div class=\"dl-pct\">'+d.pct+'</div>':'')",
+    "    +'</div>';",
+    "}).join('');",
+    "$legend.addEventListener('click',function(e){",
+    "  var row=e.target.closest('.dl-row');if(!row)return;",
+    "  qsa('.dl-row',$legend).forEach(function(r){r.classList.remove('active');});",
+    "  row.classList.add('active');",
+    "  applyFilter(row.dataset.filter);",
+    "  setView('deepdive');",
+    "});",
+    // ── Trend badge
+    "var runs=DATA.historical_runs||[];",
+    "if(runs.length>1){",
+    "  var last=runs[runs.length-1],prev=runs[runs.length-2];",
+    "  if(prev&&prev.time_saved_min>0){",
+    "    var delta=Math.round((last.time_saved_min-prev.time_saved_min)/prev.time_saved_min*100);",
+    "    var badge=$('trend-badge');",
+    "    if(badge){",
+    "      badge.textContent=(delta>=0?'+':'')+delta+'% vs prev run';",
+    "      badge.style.color=delta>=0?'var(--green)':'var(--red)';",
+    "      badge.style.borderColor=delta>=0?'rgba(0,229,160,.25)':'rgba(255,77,106,.25)';",
+    "      badge.style.background=delta>=0?'var(--green-dim)':'var(--red-dim)';",
+    "    }",
+    "  }",
+    "}",
+    // ── Trend chart
+    "var trendLabels=runs.map(function(r){return r.label;});",
+    "var cumSaved=runs.map(function(_,i){return Math.round(runs.slice(0,i+1).reduce(function(a,b){return a+(b.time_saved_min/60);},0)*10)/10;});",
+    "var healedSeries=runs.map(function(r){return r.healed;});",
+    "var maxHealed=Math.max.apply(null,healedSeries.concat([1]));",
+    "var trendCtx=$('trend-chart').getContext('2d');",
+    "new Chart(trendCtx,{type:'line',",
+    "  data:{labels:trendLabels,datasets:[",
+    "    {label:'Cumulative hours saved',data:cumSaved,borderColor:'#00d4ff',backgroundColor:'rgba(0,212,255,.06)',fill:true,tension:.35,borderWidth:1.5,pointRadius:2.5,pointBackgroundColor:'#00d4ff',yAxisID:'y'},",
+    "    {label:'Healed per run',data:healedSeries,borderColor:'rgba(162,89,255,.7)',backgroundColor:'transparent',tension:.35,borderWidth:1,borderDash:[4,3],pointRadius:2,pointBackgroundColor:'#a259ff',yAxisID:'y1'}",
+    "  ]},",
+    "  options:{responsive:true,maintainAspectRatio:false,",
+    "    interaction:{mode:'index',intersect:false},",
+    "    plugins:{legend:{display:false},",
+    "      tooltip:{backgroundColor:'rgba(16,19,26,.95)',borderColor:'rgba(30,35,54,.8)',borderWidth:1,titleColor:'#dde2f0',bodyColor:'#8b93b0',padding:10,",
+    "        callbacks:{label:function(c){return c.datasetIndex===0?' '+c.parsed.y.toFixed(1)+'h saved':' '+c.parsed.y+' healed';}}}},",
+    "    scales:{",
+    "      x:{grid:{color:'rgba(30,35,54,.6)',lineWidth:.5},ticks:{color:'#5a6180',font:{size:10},maxRotation:45}},",
+    "      y:{position:'left',grid:{color:'rgba(30,35,54,.6)',lineWidth:.5},ticks:{color:'#5a6180',font:{size:10},callback:function(v){return v+'h';}}},",
+    "      y1:{position:'right',grid:{display:false},ticks:{color:'#5a6180',font:{size:10}},max:maxHealed+2}",
+    "    }",
+    "  }",
+    "});",
+    // ── Historical table (last 5)
+    "var htbl=$('hist-table');",
+    "runs.slice().reverse().slice(0,5).forEach(function(r){",
+    "  var row=document.createElement('div');row.className='hist-row';",
+    "  row.innerHTML='<div class=\"hc\">'+esc(r.label)+'</div>'",
+    "    +'<div class=\"hc\" style=\"color:var(--cyan)\">'+r.healed+'</div>'",
+    "    +'<div class=\"hc\" style=\"color:var(--purple)\">'+(r.protected||0)+'</div>'",
+    "    +'<div class=\"hc\" style=\"color:var(--red)\">'+r.failed+'</div>'",
+    "    +'<div class=\"hc\">'+(r.avg_confidence||0)+'%</div>'",
+    "    +'<div class=\"hc hist-saved\">'+fmtMin(r.time_saved_min)+'</div>';",
+    "  htbl.appendChild(row);",
+    "});",
+    // ── VS Code link
+    "function vscodeLink(file,line){",
+    "  if(!file)return'#';",
+    "  var abs=(file.startsWith('/')||/^[A-Za-z]:/.test(file))?file:DATA.cwd+'/'+file;",
+    "  return'vscode://file/'+encodeURI(abs).replace(/#/g,'%23')+(line?':'+line:'');",
+    "}",
+    // ── Confidence badge
+    "function confBadge(pct){",
+    "  if(typeof pct!=='number'||!isFinite(pct))return'';",
+    "  var cls=pct>=80?'conf-high':pct>=60?'conf-mid':'conf-low';",
+    "  return'<span class=\"conf-badge '+cls+'\">'+pct+'%</span>';",
+    "}",
+    // ── Diff renderer
+    "function renderDiff(ev){",
+    "  if(ev.kind==='PROTECTED')",
+    "    return'<div class=\"prot-notice\"><strong>Source code untouched.</strong> Sela blocked this auto-fix \u2014 the Intent Auditor detected a semantic mismatch'+(ev.auditor&&ev.auditor.inversionType?' ('+esc(ev.auditor.inversionType)+')':'')+'. This is a real regression surfacing in CI. Investigate <a href=\"'+vscodeLink(ev.sourceFile,ev.sourceLine)+'\">'+esc(ev.sourceFile)+':'+ev.sourceLine+'</a> manually.</div>';",
+    "  if(ev.kind==='FAILED')",
+    "    return'<div class=\"muted-block\">No source code was modified. The AI could not propose a confident fix \u2014 all candidates resolved to 0 elements. Open the file directly to investigate.</div>';",
+    "  var raw=ev.gitUnifiedDiff||'';",
+    "  var skipPfx=['diff ','index ','--- ','+++','new file','deleted','similarity','rename','Binary'];",
+    "  var hunkRe=/^@@ -(\\d+)(?:,\\d+)? \\+(\\d+)(?:,\\d+)? @@/;",
+    "  var body='',newLn=0,hasDiff=raw.split(/\\r?\\n/).some(function(l){return hunkRe.test(l);});",
+    "  if(hasDiff){",
+    "    raw.split(/\\r?\\n/).forEach(function(r){",
+    "      if(skipPfx.some(function(p){return r.startsWith(p);}))return;",
+    "      var hm=r.match(hunkRe);",
+    '      if(hm){newLn=parseInt(hm[2]);body+=\'<div class="diff-line dl-hunk"><span class="gutter">@</span><span class="ln"></span><span class="code">\'+esc(r)+\'</span></div>\';return;}',
+    "      if(!r.length||r.startsWith('\\\\'))return;",
+    "      var h=r[0],t=r.slice(1);",
+    "      if(h==='+'){body+='<div class=\"diff-line dl-add\"><span class=\"gutter\">+</span><span class=\"ln\">'+newLn+'</span><span class=\"code\">'+esc(t)+'</span></div>';newLn++;}",
+    '      else if(h===\'-\'){body+=\'<div class="diff-line dl-del"><span class="gutter">-</span><span class="ln"></span><span class="code">\'+esc(t)+\'</span></div>\';}',
+    "      else if(h===' '){body+='<div class=\"diff-line dl-ctx\"><span class=\"gutter\"> </span><span class=\"ln\">'+newLn+'</span><span class=\"code\">'+esc(t)+'</span></div>';newLn++;}",
+    "    });",
+    "  }else{",
+    "    body='<div class=\"diff-line dl-del\"><span class=\"gutter\">-</span><span class=\"ln\">'+(ev.newLineNumber||'')+'</span><span class=\"code\">'+esc(ev.oldCodeLine||'')+'</span></div>'",
+    "       +'<div class=\"diff-line dl-add\"><span class=\"gutter\">+</span><span class=\"ln\">'+(ev.newLineNumber||'')+'</span><span class=\"code\">'+esc(ev.newCodeLine||'')+'</span></div>';",
+    "  }",
+    "  return'<div class=\"diff-block\"><div class=\"diff-bar\"><span>'+esc(ev.sourceFile)+'</span><span class=\"sep\">\xb7</span><span>line '+ev.newLineNumber+'</span>'+(ev.diffStrategy?'<span class=\"sep\">\xb7</span><span>'+esc(ev.diffStrategy)+'</span>':'')+'<span class=\"sep\">\xb7</span><span>'+(hasDiff?'git diff':'fallback')+'</span></div><div>'+body+'</div></div>';",
+    "}",
+    // ── Auditor renderer
+    "function renderAuditor(a){",
+    "  if(!a)return'<div class=\"muted-block\">Intent Auditor was not consulted for this event.</div>';",
+    "  var vl=a.verdict.toLowerCase();",
+    "  var hasPct=typeof a.confidence==='number'&&isFinite(a.confidence);",
+    "  var pct=hasPct?Math.max(0,Math.min(100,a.confidence)):0;",
+    "  var circ=2*Math.PI*50,dash=hasPct?(pct/100)*circ:0;",
+    "  var adj=[];",
+    "  if(a.penalty)adj.push('<span style=\"color:var(--red)\">'+a.penalty+'</span>');",
+    "  if(a.bonus)adj.push('<span style=\"color:var(--green)\">+'+a.bonus+'</span>');",
+    "  return'<div class=\"auditor-wrap\">'",
+    "    +'<div class=\"gauge-ring\">'",
+    '    +\'<svg viewBox="0 0 120 120"><circle class="gt" cx="60" cy="60" r="50"/><circle class="gb gb-\'+vl+\'" cx="60" cy="60" r="50" stroke-dasharray="\'+dash.toFixed(1)+\' \'+circ.toFixed(1)+\'"/></svg>\'',
+    "    +'<div class=\"gauge-center\"><div class=\"gauge-pct pct-'+vl+'\">'+(hasPct?pct+'%':'n/a')+'</div><div class=\"gauge-sub\">consistency</div></div>'",
+    "    +'</div>'",
+    "    +'<div class=\"audit-details\">'",
+    '    +\'<div class="ad-row"><span class="ad-label">Verdict</span><span class="ad-val"><span class="verdict-pill vp-\'+vl+\'">\'+esc(a.verdict)+\'</span></span></div>\'',
+    '    +(a.inversionType?\'<div class="ad-row"><span class="ad-label">Inversion</span><span class="ad-val" style="color:var(--red)">\'+esc(a.inversionType)+\'</span></div>\':\'\')',
+    "    +(adj.length?'<div class=\"ad-row\"><span class=\"ad-label\">Score delta</span><span class=\"ad-val\">'+adj.join(' ')+' (raw: '+fmtPct(a.rawConfidence)+')</span></div>':'')",
+    "    +'<div class=\"ad-reason\">'+esc(a.reason)+'</div>'",
+    "    +'</div></div>';",
+    "}",
+    // ── CoT renderer
+    "function renderCoT(steps){",
+    "  if(!steps||!steps.length)return'<div class=\"muted-block\">No reasoning trace captured.</div>';",
+    "  return'<div class=\"cot\">'+steps.map(function(s,i){return'<div class=\"cot-step\"><span class=\"cot-n\">'+(i+1)+'</span><span class=\"cot-t\">'+esc(s)+'</span></div>';}).join('')+'</div>';",
+    "}",
+    // ── DNA table
+    "function renderDna(before,after){",
+    "  if(!before)return'<div class=\"muted-block\">No DNA baseline available.</div>';",
+    "  var rows=[];",
+    "  function row(field,ov,nv){",
+    "    var os=ov==null?'':Array.isArray(ov)?ov.join(' / '):String(ov);",
+    "    var ns=nv==null?'':Array.isArray(nv)?nv.join(' / '):String(nv);",
+    "    var same=os===ns,hasAfter=!!after;",
+    "    var cls=!hasAfter?'missing':same?'matched':'changed';",
+    "    var icon=!hasAfter?'\u2014':same?'\u2713':'\u25b3';",
+    "    var vc;",
+    "    if(!hasAfter||same)vc='<td class=\"val\">'+esc(os||'\u2014')+'</td>';",
+    "    else vc='<td class=\"val\"><span class=\"val old\">'+esc(os||'\u2014')+'</span> \u2192 <span class=\"val new\">'+esc(ns||'\u2014')+'</span></td>';",
+    "    rows.push('<tr class=\"'+cls+'\"><td class=\"field\">'+esc(field)+'</td>'+vc+'<td class=\"icon\">'+icon+'</td></tr>');",
+    "  }",
+    "  row('Tag',before.tagName,after&&after.tagName);",
+    "  row('Text',before.text,after&&after.text);",
+    "  row('Role',before.role,after&&after.role);",
+    "  row('Classes',before.classes,after&&after.classes);",
+    "  row('Ancestry',before.ancestry,after&&after.ancestry);",
+    "  row('Closest label',before.closestLabel,after&&after.closestLabel);",
+    "  var ab=Object.entries(before.attributes||{}).map(function(e){return e[0]+'='+e[1];}).join(' \xb7 ');",
+    "  var aa=after?Object.entries(after.attributes||{}).map(function(e){return e[0]+'='+e[1];}).join(' \xb7 '):null;",
+    "  row('Attributes',ab,aa);",
+    "  return'<table class=\"dna-table\"><thead><tr><th>Field</th><th>Value</th><th></th></tr></thead><tbody>'+rows.join('')+'</tbody></table>';",
+    "}",
+    // ── Screenshot
+    "function renderScreenshot(ev){",
+    "  if(ev.kind!=='FAILED'||!ev.failureScreenshotPng)return'';",
+    '  return\'<div class="body-section"><div class="bs-title"><span class="bst-dot"></span>Playwright Failure Screenshot</div>\'',
+    '    +\'<div class="fail-img-wrap"><img src="data:image/png;base64,\'+ev.failureScreenshotPng+\'" alt="Failure screenshot" loading="lazy"/>\'',
+    "    +'<div class=\"fail-img-meta\">captured at test failure \xb7 base64-embedded</div></div></div>';",
+    "}",
+    // ── Card body
+    "function renderCardBody(ev){",
+    "  var steps=ev.reasoningSteps||[];",
+    "  if(ev.kind==='PROTECTED'&&!steps.length){",
+    "    steps=['AI proposed a replacement selector for the broken locator.'];",
+    "    if(ev.aiExplanation)steps.push('Reasoning: '+ev.aiExplanation);",
+    "    if(ev.candidateNewSelector)steps.push('Candidate: '+ev.candidateNewSelector+' \u2014 but semantics changed.');",
+    "    if(ev.auditor)steps.push('Intent Auditor: '+ev.auditor.verdict+' \u2014 '+ev.auditor.reason.slice(0,160));",
+    "    steps.push('Sela blocked the auto-fix. Source code is untouched.');",
+    "  }",
+    "  if(ev.kind==='FAILED'&&!steps.length){",
+    "    steps=['Locator failed to resolve at runtime \u2014 Sela attempted to heal it.'];",
+    "    if(ev.aiExplanation)steps.push('AI: '+ev.aiExplanation);",
+    "    steps.push('Reason: '+(ev.reason||'unknown'));",
+    "    steps.push('Open the file in your editor to inspect the original locator.');",
+    "  }",
+    "  var issueUrl='https://github.com/sela-core/sela/issues/new?title='+encodeURIComponent('[Report] '+ev.kind+' '+ev.stableId)+'&body='+encodeURIComponent('Stable ID: '+ev.stableId+'\\nFile: '+ev.sourceFile+':'+ev.sourceLine);",
+    "  var link=vscodeLink(ev.sourceFile,ev.sourceLine);",
+    "  var actions='';",
+    "  if(ev.kind==='HEALED'){",
+    "    actions='<div class=\"actions\">'",
+    "      +'<button class=\"btn btn-primary\" data-action=\"keep\" data-id=\"'+ev.stableId+'\" onclick=\"handleAction(this,\\'keep\\',\\''+ev.stableId+'\\')\">\u2713 Keep changes</button>'",
+    "      +'<button class=\"btn btn-danger\" onclick=\"handleAction(this,\\'rollback\\',\\''+ev.stableId+'\\')\">&#x21B6; Rollback</button>'",
+    "      +'<a class=\"btn\" href=\"'+link+'\">&#x2317; Open in VS Code</a>'",
+    '      +\'<a class="btn" href="\'+issueUrl+\'" target="_blank" rel="noopener">&#x2691; Report issue</a>\'',
+    "      +'</div>';",
+    "  }else if(ev.kind==='PROTECTED'){",
+    "    actions='<div class=\"actions\">'",
+    "      +'<a class=\"btn\" href=\"'+link+'\">\u2192 Open in VS Code</a>'",
+    "      +'<button class=\"btn btn-primary\" onclick=\"handleAction(this,\\'ack\\',\\''+ev.stableId+'\\')\">&#x2713; Acknowledged \u2014 will investigate</button>'",
+    '      +\'<a class="btn" href="\'+issueUrl+\'" target="_blank" rel="noopener">&#x2691; File regression</a>\'',
+    "      +'</div>';",
+    "  }else{",
+    "    actions='<div class=\"actions\">'",
+    "      +'<a class=\"btn btn-primary\" href=\"'+link+'\">\u2192 Open in VS Code</a>'",
+    '      +\'<a class="btn" href="\'+issueUrl+\'" target="_blank" rel="noopener">&#x2691; Report issue</a>\'',
+    "      +'</div>';",
+    "  }",
+    "  var alts=(ev.kind==='HEALED'&&ev.aiAlternatives&&ev.aiAlternatives.length)",
+    '    ?\'<div class="body-section"><div class="bs-title"><span class="bst-dot"></span>Alternative selectors considered</div><div class="alts">\'',
+    "      +ev.aiAlternatives.map(function(a){return'<div class=\"alt-row\"><span>'+esc(a)+'</span><button class=\"alt-copy\" onclick=\"copyText(\\''+esc(a)+'\\',this)\">Copy</button></div>';}).join('')",
+    "      +'</div></div>'",
+    "    :'';",
+    '  return\'<div class="row2" style="margin-top:16px">\'',
+    "    +'<div><div class=\"bs-title\"><span class=\"bst-dot\"></span>AI Reasoning \xb7 Chain of Thought</div>'+renderCoT(steps)+'</div>'",
+    "    +'<div><div class=\"bs-title\"><span class=\"bst-dot\"></span>Intent Auditor</div>'+renderAuditor(ev.auditor||null)+'</div>'",
+    "    +'</div>'",
+    '    +\'<div class="body-section"><div class="bs-title"><span class="bst-dot"></span>Source Code Diff</div>\'+renderDiff(ev)+\'</div>\'',
+    '    +\'<div class="body-section"><div class="bs-title"><span class="bst-dot"></span>Visual DNA Evidence</div>\'+renderDna(ev.dnaBefore||null,ev.dnaAfter||null)+\'</div>\'',
+    "    +renderScreenshot(ev)",
+    "    +alts",
+    "    +actions;",
+    "}",
+    // ── Event card
+    "function renderCard(ev,idx){",
+    "  var kindCls=ev.kind==='HEALED'?'ec-healed':ev.kind==='PROTECTED'?'ec-protected':'ec-failed';",
+    "  var badgeCls=ev.kind==='HEALED'?'sb-healed':ev.kind==='PROTECTED'?'sb-protected':'sb-failed';",
+    "  var badgeTxt=ev.kind==='HEALED'?'Healed':ev.kind==='PROTECTED'?'Protected \xb7 Bug Caught':'Failed';",
+    "  var sel=ev.kind==='HEALED'?(ev.newSelector||ev.oldSelector):ev.oldSelector;",
+    "  var link=vscodeLink(ev.sourceFile,ev.sourceLine);",
+    "  var tags='';",
+    "  if(ev.inIframe)tags+='<span class=\"ecard-tag t-iframe\">iframe</span>';",
+    "  if(ev.inShadowDom)tags+='<span class=\"ecard-tag t-shadow\">shadow DOM</span>';",
+    "  if(ev.dryRun)tags+='<span class=\"ecard-tag t-dryrun\">dry run</span>';",
+    "  var haystack=(ev.oldSelector+' '+(ev.newSelector||'')+' '+ev.sourceFile+' '+(ev.testTitle||'')+' '+ev.stableId).toLowerCase();",
+    "  return'<article class=\"ecard '+kindCls+'\" data-kind=\"'+ev.kind+'\" data-haystack=\"'+esc(haystack)+'\" style=\"animation-delay:'+(idx*0.04)+'s\">'",
+    "    +'<div class=\"ecard-head\" onclick=\"this.parentElement.classList.toggle(\\'open\\')\">'",
+    "    +'<span class=\"status-badge '+badgeCls+'\"><span class=\"sb-dot\"></span>'+badgeTxt+'</span>'",
+    "    +'<div class=\"ecard-title\">'",
+    "    +'<div class=\"ecard-selector\">'+esc(sel)+'</div>'",
+    "    +'<div class=\"ecard-meta\">'+(ev.testTitle?esc(ev.testTitle)+' &nbsp;\xb7&nbsp; ':'')",
+    "    +'<a href=\"'+link+'\">'+esc(ev.sourceFile)+':'+ev.sourceLine+'</a>'+tags+' &nbsp;\xb7&nbsp; '+fmt(ev.timestamp)+'</div>'",
+    "    +'</div>'",
+    "    +confBadge(ev.aiConfidence)",
+    '    +\'<svg class="chev" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2"><polyline points="5 3 11 8 5 13"/></svg>\'',
+    "    +'</div>'",
+    "    +'<div class=\"ecard-body\">'+renderCardBody(ev)+'</div>'",
+    "    +'</article>';",
+    "}",
+    // ── Mount events
+    "var $el=$('events-list');",
+    "$el.innerHTML=DATA.events.map(renderCard).join('');",
+    "var firstProt=$el.querySelector('.ec-protected');",
+    "if(firstProt)firstProt.classList.add('open');",
+    "else{var f=$el.querySelector('.ecard');if(f)f.classList.add('open');}",
+    // ── Filter + Search
+    "var curFilter='ALL',searchTerm='';",
+    "function applyFilter(f){",
+    "  curFilter=f;",
+    "  qsa('.chip').forEach(function(c){c.classList.toggle('on',c.dataset.filter===f||(f==='ALL'&&c.dataset.filter==='ALL'));});",
+    "  filterCards();",
+    "}",
+    "window.applyFilter=applyFilter;",
+    "function filterCards(){",
+    "  var vis=0;",
+    "  qsa('.ecard',$el).forEach(function(card){",
+    "    var show=(curFilter==='ALL'||card.dataset.kind===curFilter)&&(!searchTerm||card.dataset.haystack.includes(searchTerm));",
+    "    card.style.display=show?'':'none';",
+    "    if(show)vis++;",
+    "  });",
+    "  $('empty-state').classList.toggle('hidden',vis>0||DATA.events.length===0);",
+    "}",
+    "var fbChips=document.querySelector('.fb-chips');",
+    "if(fbChips)fbChips.addEventListener('click',function(e){var chip=e.target.closest('.chip');if(chip&&chip.dataset.filter)applyFilter(chip.dataset.filter);});",
+    "$('search-input').addEventListener('input',function(e){searchTerm=e.target.value.toLowerCase().trim();filterCards();});",
+    // ── Actions
+    "window.handleAction=function(btn,action,id){",
+    "  if(action==='keep'||action==='ack'){btn.dataset.done='true';btn.textContent=action==='keep'?'\u2713 Approved':'\u2713 Acknowledged';toast('Decision saved for '+id);}",
+    "  else if(action==='rollback'){var cmd='npx sela rollback --id '+id;navigator.clipboard&&navigator.clipboard.writeText(cmd).then(function(){toast('Copied: '+cmd);});}",
+    "};",
+    "window.copyText=function(txt,btn){",
+    "  navigator.clipboard&&navigator.clipboard.writeText(txt).then(function(){btn.textContent='Copied!';setTimeout(function(){btn.textContent='Copy';},1500);});",
+    "};",
+    // ── Keyboard shortcuts
+    "document.addEventListener('keydown',function(e){",
+    "  if(e.key==='/'&&document.activeElement!==$('search-input')){e.preventDefault();$('search-input').focus();setView('deepdive');}",
+    "  if(e.key==='Escape')$('search-input').blur();",
+    "});",
+    "})();",
+].join("\n");
+/* eslint-enable prettier/prettier */