sela-core 1.0.8 → 1.0.9

package/dist/services/HealReportService.js

@@ -1,11 +1,24 @@
 "use strict";
 // src/services/HealReportService.ts
 //
-// Sela Insights - Transparent Healing Report.
-// Buffers a HealEvent per heal attempt (HEALED, FAILED, PROTECTED), then renders
-// a single self-contained HTML file (sela-report.html) at commitUpdates() time.
+// Sela Insights — Transparent Healing Report.
 //
-// Goal: explain Sela's "brain" to the developer. Maximum trust & observability.
+// 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);
@@ -44,13 +57,14 @@ exports.sharedHealReport = exports.HealReportService = void 0;
 exports.summariseSnapshot = summariseSnapshot;
 const fs = __importStar(require("fs"));
 const path = __importStar(require("path"));
-// Time-saved heuristics (minutes). Tuned for "fair midpoint" engineer estimate.
-const TIME_PER_HEAL = 12;
-const TIME_PER_PROTECT = 18; // catching a masked bug is worth more
-const TIME_PER_FAILED = 4; // partial value - narrows debug scope
-// ═══════════════════════════════════════════════════════════════════
-// SUMMARISERS - ElementSnapshotV2 → DnaSummary
-// ═══════════════════════════════════════════════════════════════════
+const ReportGenerator_1 = require("./ReportGenerator");
+// ─────────────────────────────────────────────────────────────────────────────
+// SIDECAR CONFIG
+// ─────────────────────────────────────────────────────────────────────────────
+const HISTORY_FILE = ".sela-history.json";
+// ─────────────────────────────────────────────────────────────────────────────
+// SNAPSHOT SUMMARISER
+// ─────────────────────────────────────────────────────────────────────────────
 function summariseSnapshot(s) {
     if (!s)
         return null;
@@ -69,9 +83,9 @@ function summariseSnapshot(s) {
         isInShadowDom: s.isInShadowDom ?? false,
     };
 }
-// ═══════════════════════════════════════════════════════════════════
+// ─────────────────────────────────────────────────────────────────────────────
 // HealReportService
-// ═══════════════════════════════════════════════════════════════════
+// ─────────────────────────────────────────────────────────────────────────────
 class HealReportService {
     events = [];
     startedAt = new Date().toISOString();
@@ -88,35 +102,19 @@ class HealReportService {
     hasContent() {
         return this.events.length > 0;
     }
-    /** All HEALED events accumulated in this session. */
     getHealedEvents() {
         return this.events.filter((e) => e.kind === "HEALED");
     }
-    /** All PROTECTED events (SafetyGuard blocks) accumulated in this session. */
     getProtectedEvents() {
         return this.events.filter((e) => e.kind === "PROTECTED");
     }
-    /** All FAILED events accumulated in this session. */
     getFailedEvents() {
         return this.events.filter((e) => e.kind === "FAILED");
     }
     /**
-     * Inject a Playwright failure screenshot (Base64 PNG, no data: prefix)
-     * onto the FAILED event(s) matching the supplied identity hints. Used
-     * by `SelaReporter` to enrich engine-emitted FAILED events with the
-     * Playwright-captured screenshot from `TestResult.attachments`.
-     *
-     * Match policy (all supplied hints must agree):
-     *   • `sourceFile` - suffix-matched both directions to absorb
-     *     project-relative vs absolute path mismatches between the engine
-     *     (relative) and Playwright TestInfo.location.file (absolute).
-     *   • `testTitle` - exact match.
-     *   • `stableId`  - exact match.
-     *
-     * Returns the number of events updated. Zero means the caller should
-     * keep the screenshot pending until the matching FailedEvent is
-     * recorded (worker-crash edge case where the heal pipeline did not
-     * run before the Reporter received the failure).
+     * 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)
@@ -142,1228 +140,850 @@ class HealReportService {
         }
         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) {
+            console.warn("[sela] Could not write history sidecar:", err);
+        }
+    }
+    // ── Main flush ──────────────────────────────────────────────────────────
     /**
-     * Write `sela-report.html` (+ `sela-report.json` debug dump) to cwd.
-     * Returns the absolute path of the HTML report, or null if nothing to write.
+     * 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()) {
+    flushToDisk(targetDir = process.cwd(), opts = {}) {
         if (this.events.length === 0)
             return null;
-        const html = this.renderHtml();
+        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");
-        const jsonPath = path.join(targetDir, "sela-report.json");
         fs.writeFileSync(htmlPath, html, "utf8");
+        const jsonPath = path.join(targetDir, "sela-report.json");
         fs.writeFileSync(jsonPath, JSON.stringify({
-            generatedAt: new Date().toISOString(),
-            startedAt: this.startedAt,
-            events: this.events,
+            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;
     }
-    // ─────────────────────────────────────────────────────────────
-    // RENDERING
-    // ─────────────────────────────────────────────────────────────
-    renderHtml() {
-        const data = {
-            generatedAt: new Date().toISOString(),
-            startedAt: this.startedAt,
-            cwd: process.cwd(),
-            events: this.events,
-            stats: this.computeStats(),
-        };
-        return renderHtmlTemplate(data);
-    }
-    computeStats() {
-        let healed = 0, failed = 0, protectedCnt = 0;
-        let iframeCnt = 0, shadowCnt = 0;
-        for (const e of this.events) {
-            if (e.kind === "HEALED")
-                healed++;
-            else if (e.kind === "FAILED")
-                failed++;
-            else
-                protectedCnt++;
-            if (e.inIframe)
-                iframeCnt++;
-            if (e.inShadowDom)
-                shadowCnt++;
-        }
-        const timeSavedMin = healed * TIME_PER_HEAL +
-            protectedCnt * TIME_PER_PROTECT +
-            failed * TIME_PER_FAILED;
-        return {
-            total: this.events.length,
-            healed,
-            failed,
-            protectedCnt,
-            iframeCnt,
-            shadowCnt,
-            timeSavedMin,
-        };
-    }
 }
 exports.HealReportService = HealReportService;
-// ═══════════════════════════════════════════════════════════════════
+// ─────────────────────────────────────────────────────────────────────────────
 // MODULE-LEVEL SINGLETON
-// ═══════════════════════════════════════════════════════════════════
+// ─────────────────────────────────────────────────────────────────────────────
 exports.sharedHealReport = new HealReportService();
-// ═══════════════════════════════════════════════════════════════════
-// HTML TEMPLATE  (single-file, dark mode, animated)
-// ═══════════════════════════════════════════════════════════════════
-function htmlEscape(s) {
-    return s
-        .replace(/&/g, "&")
-        .replace(/</g, "&lt;")
-        .replace(/>/g, "&gt;")
-        .replace(/"/g, "&quot;")
-        .replace(/'/g, "&#39;");
-}
-function renderHtmlTemplate(input) {
-    // Embed structured data into the page so the front-end script renders it
-    // - keeps the template compact and avoids server-side template branching.
-    const payload = JSON.stringify(input).replace(/</g, "\\u003c");
-    return `<!DOCTYPE html>
-<html lang="en" data-theme="dark">
-<head>
-<meta charset="UTF-8" />
-<meta name="viewport" content="width=device-width,initial-scale=1.0" />
-<title>Sela Insights - Healing Report</title>
-<style>
-${REPORT_CSS}
-</style>
-</head>
-<body>
-<div class="bg-aurora"></div>
-<div class="bg-grid"></div>
-
-<header class="hero">
-  <div class="hero-inner">
-    <div class="brand">
-      <div class="brand-mark">
-        <svg viewBox="0 0 32 32" width="36" height="36" aria-hidden="true">
-          <defs>
-            <linearGradient id="g1" x1="0" y1="0" x2="1" y2="1">
-              <stop offset="0" stop-color="#7c5cff"/>
-              <stop offset="1" stop-color="#22d3ee"/>
-            </linearGradient>
-          </defs>
-          <path d="M16 2 L29 9 V23 L16 30 L3 23 V9 Z" fill="url(#g1)" opacity="0.18"/>
-          <path d="M16 2 L29 9 V23 L16 30 L3 23 V9 Z" fill="none" stroke="url(#g1)" stroke-width="1.2"/>
-          <circle cx="16" cy="16" r="4" fill="url(#g1)"/>
-        </svg>
-      </div>
-      <div>
-        <div class="brand-title">Sela Insights</div>
-        <div class="brand-sub">Transparent Healing Report</div>
-      </div>
-    </div>
-    <div class="hero-meta">
-      <span id="meta-generated"></span>
-    </div>
-  </div>
-
-  <section class="executive">
-    <div class="exec-headline">
-      <span id="exec-eyebrow" class="eyebrow">Run complete</span>
-      <h1 id="exec-title">Sela kept your suite alive.</h1>
-      <p id="exec-sub" class="exec-sub"></p>
-    </div>
-    <div class="kpi-row" id="kpi-row"></div>
-  </section>
-</header>
-
-<main class="container">
-  <div class="filter-bar">
-    <div class="filter-group" id="filter-group">
-      <button class="chip active" data-filter="ALL">All</button>
-      <button class="chip" data-filter="HEALED">Healed</button>
-      <button class="chip protect-chip" data-filter="PROTECTED">Protected · Bug Caught</button>
-      <button class="chip" data-filter="FAILED">Failed</button>
-    </div>
-    <div class="search-wrap">
-      <input id="search" type="search" placeholder="Filter by selector, file, or test…" />
-    </div>
-  </div>
-
-  <section id="events" class="events"></section>
-
-  <section id="empty-state" class="empty hidden">
-    <div class="empty-icon">∅</div>
-    <div class="empty-title">Nothing matches that filter</div>
-    <div class="empty-sub">Try a different filter or clear the search box.</div>
-  </section>
-</main>
-
-<footer class="footer">
-  <div class="footer-inner">
-    <div>
-      Generated by <strong>sela-core</strong> ·
-      <span class="muted" id="footer-cwd"></span>
-    </div>
-    <div class="muted">
-      Sela is a transparent pair-programmer. Every decision below is yours to keep, roll back, or report.
-    </div>
-  </div>
-</footer>
-
-<div id="toast" class="toast hidden"></div>
-
-<script id="sela-data" type="application/json">${payload}</script>
-<script>
-${REPORT_JS}
-</script>
-</body>
-</html>`;
-}
-// ═══════════════════════════════════════════════════════════════════
-// CSS - dark, immersive, animated
-// ═══════════════════════════════════════════════════════════════════
-const REPORT_CSS = `
-:root {
-  color-scheme: dark;
-  --bg-0: #08090f;
-  --bg-1: #0d0f18;
-  --bg-2: #131623;
-  --bg-3: #1a1e2e;
-  --line: #1f2436;
-  --line-strong: #2a3148;
-  --text: #e6e8f2;
-  --text-dim: #9aa1bd;
-  --text-muted: #6b7393;
-  --brand: #7c5cff;
-  --brand-2: #22d3ee;
-  --good: #34d399;
-  --good-dim: rgba(52, 211, 153, 0.15);
-  --warn: #fbbf24;
-  --warn-dim: rgba(251, 191, 36, 0.15);
-  --bad: #f87171;
-  --bad-dim: rgba(248, 113, 113, 0.15);
-  --protect: #c084fc;
-  --protect-dim: rgba(192, 132, 252, 0.18);
-  --radius: 14px;
-  --radius-sm: 8px;
-  --shadow-card: 0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 30px rgba(0,0,0,0.35);
-  --mono: ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, Consolas, monospace;
-  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;
-}
-
-* { box-sizing: border-box; }
-html, body { margin: 0; padding: 0; }
-body {
-  font-family: var(--sans);
-  color: var(--text);
-  background: var(--bg-0);
-  min-height: 100vh;
-  -webkit-font-smoothing: antialiased;
-  overflow-x: hidden;
-}
-
-a { color: var(--brand-2); text-decoration: none; }
-a:hover { text-decoration: underline; }
-
-/* ── Background flourishes ─────────────────────────────────────── */
-.bg-aurora {
-  position: fixed; inset: -20% -10% auto -10%; height: 70vh; z-index: -2;
-  background:
-    radial-gradient(60% 60% at 20% 30%, rgba(124,92,255,0.25), transparent 70%),
-    radial-gradient(50% 50% at 80% 20%, rgba(34,211,238,0.18), transparent 70%),
-    radial-gradient(60% 50% at 50% 80%, rgba(192,132,252,0.12), transparent 70%);
-  filter: blur(40px);
-  animation: aurora 20s ease-in-out infinite alternate;
-}
-@keyframes aurora {
-  0%   { transform: translate3d(0, 0, 0) scale(1); }
-  100% { transform: translate3d(-3%, 2%, 0) scale(1.08); }
-}
-.bg-grid {
-  position: fixed; inset: 0; z-index: -1; pointer-events: none;
-  background-image:
-    linear-gradient(rgba(124,92,255,0.05) 1px, transparent 1px),
-    linear-gradient(90deg, rgba(124,92,255,0.05) 1px, transparent 1px);
-  background-size: 48px 48px;
-  mask-image: radial-gradient(circle at 50% 0%, black 0%, transparent 70%);
-}
-
-/* ── Hero ──────────────────────────────────────────────────────── */
-.hero {
-  padding: 28px 32px 12px;
-  max-width: 1280px; margin: 0 auto;
-}
-.hero-inner {
-  display: flex; align-items: center; justify-content: space-between;
-  margin-bottom: 36px;
-}
-.brand { display: flex; align-items: center; gap: 12px; }
-.brand-mark {
-  display: flex; align-items: center; justify-content: center;
-  width: 44px; height: 44px; border-radius: 12px;
-  background: linear-gradient(145deg, rgba(124,92,255,0.18), rgba(34,211,238,0.10));
-  border: 1px solid var(--line-strong);
-}
-.brand-title { font-weight: 700; font-size: 16px; letter-spacing: 0.2px; }
-.brand-sub { font-size: 12px; color: var(--text-muted); letter-spacing: 0.4px; text-transform: uppercase; }
-.hero-meta { color: var(--text-muted); font-size: 13px; }
-
-.executive {
-  margin-top: 24px;
-  display: grid; grid-template-columns: 1.4fr 1fr; gap: 36px;
-  align-items: end;
-  padding-bottom: 28px;
-  border-bottom: 1px solid var(--line);
-}
-@media (max-width: 900px) { .executive { grid-template-columns: 1fr; } }
-.eyebrow {
-  display: inline-block; font-size: 11px; letter-spacing: 1.5px;
-  text-transform: uppercase; color: var(--brand-2);
-  padding: 4px 10px; border: 1px solid rgba(34,211,238,0.3); border-radius: 999px;
-  margin-bottom: 14px;
-}
-.exec-headline h1 {
-  margin: 0 0 10px; font-size: 38px; line-height: 1.1;
-  background: linear-gradient(135deg, #fff 0%, #cdd3f0 50%, #8c96c0 100%);
-  -webkit-background-clip: text; background-clip: text; color: transparent;
-}
-.exec-sub { color: var(--text-dim); font-size: 15px; max-width: 56ch; line-height: 1.55; }
-
-.kpi-row {
-  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
-  gap: 14px;
-}
-.kpi {
-  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
-  border: 1px solid var(--line);
-  border-radius: var(--radius);
-  padding: 16px 16px 14px;
-  position: relative;
-  overflow: hidden;
-  transition: transform .3s ease, border-color .3s ease;
-}
-.kpi:hover { transform: translateY(-2px); border-color: var(--line-strong); }
-.kpi-label { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); }
-.kpi-value { font-size: 30px; font-weight: 700; margin-top: 6px; font-variant-numeric: tabular-nums; }
-.kpi-foot  { font-size: 12px; color: var(--text-dim); margin-top: 4px; }
-.kpi.good .kpi-value { color: var(--good); }
-.kpi.protect .kpi-value { color: var(--protect); }
-.kpi.bad  .kpi-value { color: var(--bad); }
-.kpi.brand-accent .kpi-value { background: linear-gradient(135deg, var(--brand), var(--brand-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
-
-/* ── Container & filter bar ────────────────────────────────────── */
-.container { max-width: 1280px; margin: 0 auto; padding: 28px 32px 64px; }
-.filter-bar {
-  display: flex; gap: 16px; align-items: center; justify-content: space-between;
-  margin-bottom: 18px; flex-wrap: wrap;
-}
-.filter-group { display: flex; gap: 8px; flex-wrap: wrap; }
-.chip {
-  border: 1px solid var(--line-strong);
-  background: var(--bg-2); color: var(--text-dim);
-  padding: 7px 14px; border-radius: 999px;
-  font-size: 13px; cursor: pointer; transition: all .2s ease;
-  font-family: var(--sans);
-}
-.chip:hover { color: var(--text); border-color: var(--brand); }
-.chip.active {
-  color: #fff; border-color: var(--brand);
-  background: linear-gradient(135deg, rgba(124,92,255,0.28), rgba(34,211,238,0.18));
-  box-shadow: 0 0 0 1px rgba(124,92,255,0.4), 0 4px 16px rgba(124,92,255,0.20);
-}
-.chip.protect-chip { border-color: rgba(192,132,252,0.5); color: var(--protect); }
-.chip.protect-chip.active { background: linear-gradient(135deg, rgba(192,132,252,0.3), rgba(124,92,255,0.15)); color: #fff; }
-
-.search-wrap input {
-  font-family: var(--sans); font-size: 13px;
-  padding: 9px 14px; min-width: 280px;
-  background: var(--bg-2); color: var(--text);
-  border: 1px solid var(--line-strong); border-radius: 999px;
-  outline: none; transition: border-color .2s ease, box-shadow .2s ease;
-}
-.search-wrap input:focus {
-  border-color: var(--brand);
-  box-shadow: 0 0 0 3px rgba(124,92,255,0.15);
-}
-
-/* ── Event cards ───────────────────────────────────────────────── */
-.events { display: flex; flex-direction: column; gap: 18px; }
-.card {
-  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
-  border: 1px solid var(--line);
-  border-radius: var(--radius);
-  overflow: hidden;
-  box-shadow: var(--shadow-card);
-  animation: cardIn .5s cubic-bezier(.18,.89,.32,1.28) both;
-  position: relative;
-}
-.card::before {
-  content: ""; position: absolute; inset: 0 auto 0 0; width: 3px;
-  background: var(--line-strong);
-}
-.card.healed::before    { background: linear-gradient(180deg, var(--good), #14b8a6); }
-.card.protected::before { background: linear-gradient(180deg, var(--protect), var(--brand)); }
-.card.failed::before    { background: linear-gradient(180deg, var(--bad), #ef4444); }
-
-@keyframes cardIn {
-  0%   { opacity: 0; transform: translateY(8px) scale(.99); }
-  100% { opacity: 1; transform: translateY(0)  scale(1);   }
-}
-
-.card-head {
-  display: flex; align-items: center; gap: 12px;
-  padding: 16px 18px;
-  border-bottom: 1px solid var(--line);
-  cursor: pointer;
-  user-select: none;
-  transition: background .2s ease;
-}
-.card-head:hover { background: var(--bg-3); }
-
-.badge {
-  display: inline-flex; align-items: center; gap: 6px;
-  font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
-  font-weight: 700;
-  padding: 5px 10px; border-radius: 999px;
-  border: 1px solid currentColor;
-  white-space: nowrap;
-}
-.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
-.badge.healed    { color: var(--good); background: var(--good-dim); }
-.badge.protected { color: var(--protect); background: var(--protect-dim); animation: pulse 2.6s ease-in-out infinite; }
-.badge.failed    { color: var(--bad); background: var(--bad-dim); }
-
-@keyframes pulse {
-  0%,100% { box-shadow: 0 0 0 0 rgba(192,132,252,0); }
-  50%     { box-shadow: 0 0 0 6px rgba(192,132,252,0.18); }
-}
-
-.card-title {
-  flex: 1; min-width: 0;
-  display: flex; flex-direction: column; gap: 4px;
-}
-.card-title .selector {
-  font-family: var(--mono); font-size: 13px;
-  color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
-}
-.card-title .meta-line {
-  font-size: 12px; color: var(--text-muted);
-}
-.card-title .meta-line a { color: var(--text-dim); font-family: var(--mono); }
-.card-title .meta-line a:hover { color: var(--brand-2); }
-
-.card-head .chev { width: 16px; height: 16px; transition: transform .25s ease; color: var(--text-muted); }
-.card.open .card-head .chev { transform: rotate(90deg); }
-
-.card-body { padding: 0 18px 20px; display: none; }
-.card.open .card-body { display: block; animation: bodyIn .35s ease both; }
-@keyframes bodyIn {
-  0%   { opacity: 0; transform: translateY(-4px); }
-  100% { opacity: 1; transform: translateY(0);    }
-}
-
-/* ── Section blocks inside cards ───────────────────────────────── */
-.section {
-  margin-top: 18px;
-  padding-top: 16px;
-  border-top: 1px dashed var(--line);
-}
-.section-title {
-  font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase;
-  color: var(--text-muted); margin-bottom: 10px;
-  display: flex; align-items: center; gap: 8px;
-}
-.section-title .marker {
-  width: 6px; height: 6px; border-radius: 50%;
-  background: var(--brand); box-shadow: 0 0 8px var(--brand);
-}
-
-/* DNA evidence table */
-.dna-table {
-  width: 100%; border-collapse: separate; border-spacing: 0;
-  font-size: 13px;
-  background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--radius-sm);
-  overflow: hidden;
-}
-.dna-table th, .dna-table td {
-  padding: 9px 12px; text-align: left;
-  border-bottom: 1px solid var(--line);
-  vertical-align: top;
-}
-.dna-table th {
-  background: var(--bg-2); font-weight: 600; color: var(--text-dim);
-  font-size: 11px; letter-spacing: 0.8px; text-transform: uppercase;
-}
-.dna-table tr:last-child td { border-bottom: none; }
-.dna-table td.field { color: var(--text-muted); width: 22%; }
-.dna-table td.val   { font-family: var(--mono); font-size: 12.5px; color: var(--text); }
-.dna-table td.icon  { width: 36px; text-align: center; font-size: 16px; }
-.dna-table tr.changed td.val.new   { color: var(--warn); }
-.dna-table tr.changed td.val.old   { color: var(--text-muted); text-decoration: line-through dotted; }
-.dna-table tr.matched td.icon { color: var(--good); }
-.dna-table tr.changed td.icon { color: var(--warn); }
-.dna-table tr.missing td.icon { color: var(--text-muted); }
-
-/* CoT bullets */
-.cot { display: flex; flex-direction: column; gap: 8px; }
-.cot .step {
-  display: flex; gap: 12px; align-items: flex-start;
-  padding: 10px 12px;
-  background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--radius-sm);
-}
-.cot .step .step-no {
-  flex-shrink: 0;
-  font-family: var(--mono); font-size: 11px; color: var(--brand-2);
-  width: 22px; height: 22px; border-radius: 50%;
-  background: rgba(34,211,238,0.10);
-  display: inline-flex; align-items: center; justify-content: center;
-  border: 1px solid rgba(34,211,238,0.25);
-}
-.cot .step .step-text { color: var(--text-dim); font-size: 13px; line-height: 1.5; }
-
-/* Auditor deep dive */
-.auditor-grid {
-  display: grid; grid-template-columns: 200px 1fr; gap: 14px;
-  background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--radius-sm);
-  padding: 16px;
-}
-@media (max-width: 700px) { .auditor-grid { grid-template-columns: 1fr; } }
-.gauge {
-  position: relative; aspect-ratio: 1/1; width: 100%; max-width: 200px; margin: auto;
-}
-.gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); }
-.gauge .track { stroke: var(--line); fill: none; stroke-width: 10; }
-.gauge .bar   { stroke: var(--brand-2); fill: none; stroke-width: 10; stroke-linecap: round;
-                transition: stroke-dasharray 1s ease; }
-.gauge.consistent .bar    { stroke: var(--good); }
-.gauge.suspicious .bar    { stroke: var(--warn); }
-.gauge.inconsistent .bar  { stroke: var(--bad); }
-.gauge .center {
-  position: absolute; inset: 0; display: flex; flex-direction: column;
-  align-items: center; justify-content: center;
-}
-.gauge .pct { font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; }
-.gauge .pct-label { font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-muted); }
-
-.audit-detail { display: flex; flex-direction: column; gap: 8px; }
-.audit-row { display: flex; gap: 10px; font-size: 13px; }
-.audit-row .label { color: var(--text-muted); min-width: 130px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.8px; }
-.audit-row .value { color: var(--text); }
-.audit-reason {
-  margin-top: 6px;
-  padding: 10px 12px; border-left: 3px solid var(--brand);
-  background: rgba(124,92,255,0.08);
-  font-size: 13px; color: var(--text); line-height: 1.55;
-  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
-}
-
-.verdict-chip {
-  display: inline-block; padding: 3px 9px; border-radius: 999px;
-  font-size: 11px; letter-spacing: 0.8px; font-weight: 700;
-  text-transform: uppercase;
-}
-.verdict-chip.consistent   { color: var(--good); background: var(--good-dim); border: 1px solid var(--good); }
-.verdict-chip.suspicious   { color: var(--warn); background: var(--warn-dim); border: 1px solid var(--warn); }
-.verdict-chip.inconsistent { color: var(--bad);  background: var(--bad-dim);  border: 1px solid var(--bad);  }
-
-/* Diff */
-.diff {
-  background: var(--bg-1); border: 1px solid var(--line);
-  border-radius: var(--radius-sm); overflow: hidden;
-}
-.diff-head {
-  background: var(--bg-2); padding: 8px 12px;
-  font-family: var(--mono); font-size: 12px; color: var(--text-dim);
-  border-bottom: 1px solid var(--line);
-  display: flex; align-items: center; gap: 10px;
-}
-.diff-body { padding: 0; }
-.diff-line {
-  display: grid; grid-template-columns: 28px 56px 1fr;
-  font-family: var(--mono); font-size: 12.5px; line-height: 1.55;
-}
-.diff-line .gutter { color: var(--text-muted); text-align: center; }
-.diff-line .ln     { color: var(--text-muted); text-align: right; padding-right: 12px; }
-.diff-line .code   { white-space: pre-wrap; word-break: break-word; padding-right: 12px; }
-.diff-line.add { background: rgba(52,211,153,0.08); }
-.diff-line.add .gutter, .diff-line.add .code { color: var(--good); }
-.diff-line.del { background: rgba(248,113,113,0.08); }
-.diff-line.del .gutter, .diff-line.del .code { color: var(--bad); }
-.diff-line.ctx .code { color: var(--text-dim); }
-
-/* Alternatives list */
-.alts { display: flex; flex-direction: column; gap: 6px; }
-.alts .alt {
-  font-family: var(--mono); font-size: 12.5px; color: var(--text-dim);
-  padding: 8px 12px; background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--radius-sm);
-}
-
-/* Action bar */
-.actions {
-  display: flex; gap: 10px; flex-wrap: wrap;
-  margin-top: 22px; padding-top: 16px; border-top: 1px dashed var(--line);
-}
-.btn {
-  font-family: var(--sans); font-size: 13px;
-  padding: 9px 16px; border-radius: var(--radius-sm);
-  border: 1px solid var(--line-strong); background: var(--bg-2);
-  color: var(--text); cursor: pointer;
-  transition: all .2s ease;
-  display: inline-flex; align-items: center; gap: 8px;
-}
-.btn:hover { border-color: var(--brand); transform: translateY(-1px); }
-.btn.primary {
-  border-color: transparent;
-  background: linear-gradient(135deg, var(--brand), var(--brand-2));
-  color: #fff;
-}
-.btn.primary:hover { box-shadow: 0 6px 24px rgba(124,92,255,0.35); }
-.btn.danger { border-color: rgba(248,113,113,0.4); color: var(--bad); }
-.btn.danger:hover { background: var(--bad-dim); }
-.btn.ghost { background: transparent; }
-.btn[data-state="approved"] {
-  border-color: var(--good); color: var(--good); background: var(--good-dim);
-}
-
-/* Tag chips inside meta */
-.tag {
-  display: inline-block; font-size: 10.5px; letter-spacing: 0.6px;
-  padding: 2px 8px; border-radius: 4px;
-  background: var(--bg-3); color: var(--text-dim);
-  margin-left: 6px; border: 1px solid var(--line);
-  font-family: var(--mono);
-}
-.tag.iframe  { color: var(--brand-2); border-color: rgba(34,211,238,0.3); }
-.tag.shadow  { color: var(--protect); border-color: rgba(192,132,252,0.3); }
-.tag.ghost   { color: var(--warn);    border-color: rgba(251,191,36,0.3); }
-.tag.occlude { color: var(--bad);     border-color: rgba(248,113,113,0.3); }
-
-/* Failure context - Playwright screenshot rendered inline on FAILED cards */
-.failure-img {
-  background: var(--bg-1); border: 1px solid var(--line);
-  border-radius: var(--radius-sm); padding: 8px;
-  overflow: hidden;
-}
-.failure-img img {
-  display: block; max-width: 100%; height: auto;
-  border-radius: 4px;
-  background: #000;
-  outline: 1px solid var(--line);
-}
-.failure-img .img-meta {
-  font-family: var(--mono); font-size: 11px; color: var(--text-muted);
-  padding: 6px 4px 0;
-}
-
-/* Empty state */
-.empty {
-  margin-top: 32px; padding: 60px 20px; text-align: center;
-  border: 1px dashed var(--line-strong); border-radius: var(--radius);
-  color: var(--text-muted);
-}
-.empty-icon { font-size: 40px; color: var(--brand); margin-bottom: 12px; }
-.empty-title { font-size: 16px; color: var(--text); margin-bottom: 4px; }
-.empty-sub   { font-size: 13px; }
-.hidden { display: none !important; }
-
-/* Toast */
-.toast {
-  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
-  background: var(--bg-3); border: 1px solid var(--line-strong);
-  color: var(--text); padding: 12px 18px; border-radius: 999px;
-  font-size: 13px; box-shadow: 0 8px 30px rgba(0,0,0,0.4);
-  animation: toastIn .35s ease;
-  z-index: 100;
-}
-@keyframes toastIn {
-  0%   { opacity: 0; transform: translate(-50%, 10px); }
-  100% { opacity: 1; transform: translate(-50%, 0);    }
-}
-
-/* Footer */
-.footer { border-top: 1px solid var(--line); margin-top: 40px; }
-.footer-inner {
-  max-width: 1280px; margin: 0 auto;
-  padding: 22px 32px; display: flex; justify-content: space-between;
-  flex-wrap: wrap; gap: 12px;
-  color: var(--text-dim); font-size: 12.5px;
-}
-.muted { color: var(--text-muted); }
-
-/* Small helpers */
-.row { display: flex; gap: 18px; flex-wrap: wrap; }
-.col { flex: 1 1 320px; min-width: 0; }
-.kbd {
-  font-family: var(--mono); font-size: 11px;
-  padding: 1px 5px; border: 1px solid var(--line-strong); border-radius: 4px;
-  background: var(--bg-2); color: var(--text-dim);
-}
-.muted-block {
-  font-size: 13px; color: var(--text-muted);
-  padding: 14px 16px; background: var(--bg-1);
-  border: 1px dashed var(--line); border-radius: var(--radius-sm);
-}
-`;
-// ═══════════════════════════════════════════════════════════════════
-// FRONT-END JS - renders the embedded payload
-// ═══════════════════════════════════════════════════════════════════
-const REPORT_JS = String.raw `
-(function() {
-  const dataEl = document.getElementById("sela-data");
-  const DATA = JSON.parse(dataEl.textContent);
-  const $ = (sel, root = document) => root.querySelector(sel);
-  const $$ = (sel, root = document) => Array.from(root.querySelectorAll(sel));
-
-  function esc(s) {
-    return String(s == null ? "" : s)
-      .replace(/&/g, "&amp;").replace(/</g, "&lt;")
-      .replace(/>/g, "&gt;").replace(/"/g, "&quot;");
-  }
-  function fmtTime(iso) {
-    try { return new Date(iso).toLocaleString(); } catch { return iso; }
-  }
-  function pluralize(n, one, many) { return n === 1 ? one : (many || one + "s"); }
-  // Graceful percentage formatter - mirrors the server-side helper in
-  // PRAutomationService. Anything that is not a finite number renders "n/a"
-  // instead of being coerced to 0%. Used in every spot that previously
-  // hard-coded a plain "x + %" concatenation.
-  function fmtPct(v) {
-    return (typeof v === "number" && isFinite(v)) ? (v + "%") : "n/a";
-  }
-
-  // ── Hero meta + KPIs ──────────────────────────────────────────
-  $("#meta-generated").textContent = "Generated " + fmtTime(DATA.generatedAt);
-  $("#footer-cwd").textContent = DATA.cwd;
-
-  const s = DATA.stats;
-  const minutes = s.timeSavedMin;
-  const hours = Math.floor(minutes / 60);
-  const remMin = minutes % 60;
-  const timeSavedText = hours > 0 ? hours + "h " + remMin + "m" : minutes + "m";
-
-  const headline = (() => {
-    if (s.healed === 0 && s.protectedCnt === 0 && s.failed === 0) {
-      return ["No healing events", "Sela was idle this run.", "Idle run"];
-    }
-    if (s.protectedCnt > 0 && s.healed === 0) {
-      return [
-        "Sela protected your suite from " + s.protectedCnt + " masked " + pluralize(s.protectedCnt, "regression") + ".",
-        "These changes looked safe - but the Intent Auditor caught semantic mismatch and blocked the auto-fix.",
-        "Bugs caught"
-      ];
-    }
-    if (s.healed > 0 && s.protectedCnt > 0) {
-      return [
-        "Sela healed " + s.healed + " " + pluralize(s.healed, "selector") + " and protected " + s.protectedCnt + " " + pluralize(s.protectedCnt, "regression") + ".",
-        "Your suite stayed green, but two of the would-be fixes were actually masked regressions. Drill in below.",
-        "Healed + Protected"
-      ];
-    }
-    if (s.healed > 0) {
-      return [
-        "Sela healed " + s.healed + " " + pluralize(s.healed, "selector") + " automatically.",
-        "Every fix below was double-checked by the Intent Auditor before it touched your source code.",
-        "Clean run"
-      ];
-    }
-    return [
-      "Sela couldn't heal " + s.failed + " " + pluralize(s.failed, "selector") + ".",
-      "These need a human hand - but you've got context, candidates, and direct links ready below.",
-      "Needs attention"
-    ];
-  })();
-  $("#exec-title").textContent = headline[0];
-  $("#exec-sub").textContent = headline[1];
-  $("#exec-eyebrow").textContent = headline[2];
-
-  const kpis = [
-    { label: "Time saved", value: timeSavedText, foot: "estimated developer time", cls: "brand-accent" },
-    { label: "Healed",     value: String(s.healed),        foot: "auto-fixed + verified", cls: "good"    },
-    { label: "Protected",  value: String(s.protectedCnt),  foot: "bugs caught early",     cls: "protect" },
-    { label: "Failed",     value: String(s.failed),        foot: "needs your eyes",       cls: "bad"     },
-  ];
-  if (s.iframeCnt > 0 || s.shadowCnt > 0) {
-    kpis.push({
-      label: "Complex contexts",
-      value: String(s.iframeCnt + s.shadowCnt),
-      foot: (s.iframeCnt ? s.iframeCnt + " iframe " : "") + (s.shadowCnt ? s.shadowCnt + " shadow DOM" : ""),
-      cls: ""
-    });
-  }
-  $("#kpi-row").innerHTML = kpis.map(k => (
-    '<div class="kpi ' + k.cls + '">' +
-      '<div class="kpi-label">' + esc(k.label) + '</div>' +
-      '<div class="kpi-value">' + esc(k.value) + '</div>' +
-      '<div class="kpi-foot">'  + esc(k.foot)  + '</div>' +
-    '</div>'
-  )).join("");
-
-  // ── Event cards ───────────────────────────────────────────────
-  function vscodeLink(file, line) {
-    if (!file) return "";
-    const abs = file.startsWith("/") || /^[A-Za-z]:/.test(file) ? file : (DATA.cwd + "/" + file);
-    return "vscode://file/" + encodeURI(abs).replace(/#/g, "%23") + (line ? ":" + line : "");
-  }
-
-  function badge(kind) {
-    const map = {
-      HEALED:    { cls: "healed",    label: "Healed" },
-      PROTECTED: { cls: "protected", label: "Protected · Bug Caught" },
-      FAILED:    { cls: "failed",    label: "Failed" },
-    };
-    const m = map[kind];
-    return '<span class="badge ' + m.cls + '"><span class="dot"></span>' + m.label + '</span>';
-  }
-
-  function contextTags(ev) {
-    const parts = [];
-    if (ev.inIframe)    parts.push('<span class="tag iframe">iframe</span>');
-    if (ev.inShadowDom) parts.push('<span class="tag shadow">shadow DOM</span>');
-    const dna = ev.dnaBefore;
-    if (dna && dna.isGhost)    parts.push('<span class="tag ghost">ghost · ' + esc(dna.ghostReason || "") + '</span>');
-    if (dna && dna.isOccluded) parts.push('<span class="tag occlude">occluded</span>');
-    return parts.join("");
-  }
-
-  function renderDnaTable(before, after) {
-    if (!before) return '<div class="muted-block">No DNA baseline available for this event.</div>';
-    const rows = [];
-    function row(field, oldV, newV) {
-      const oldStr = oldV == null ? "" : (Array.isArray(oldV) ? oldV.join(" / ") : String(oldV));
-      const newStr = newV == null ? "" : (Array.isArray(newV) ? newV.join(" / ") : String(newV));
-      const same = oldStr === newStr;
-      const hasAfter = !!after;
-      let cls, icon;
-      if (!hasAfter) { cls = "missing"; icon = "-"; }
-      else if (same) { cls = "matched"; icon = "✅"; }
-      else           { cls = "changed"; icon = "⚠️"; }
-      const valCell = !hasAfter
-        ? '<td class="val">' + esc(oldStr || "-") + '</td>'
-        : same
-          ? '<td class="val" colspan="1">' + esc(oldStr || "-") + '</td>'
-          : '<td class="val"><span class="val old">' + esc(oldStr || "-") + '</span>' +
-            '<br><span class="val new">' + esc(newStr || "-") + '</span></td>';
-      rows.push(
-        '<tr class="' + cls + '">' +
-          '<td class="field">' + esc(field) + '</td>' +
-          valCell +
-          '<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);
-    row("Row Anchor",     before.rowAnchor,                          after && after.rowAnchor);
-    const attrsBefore = Object.entries(before.attributes || {}).map(([k,v]) => k + "=" + v).join(" · ");
-    const attrsAfter  = after ? Object.entries(after.attributes || {}).map(([k,v]) => k + "=" + v).join(" · ") : null;
-    row("Attributes", attrsBefore, attrsAfter);
-
-    return (
-      '<table class="dna-table">' +
-        '<thead><tr><th>Field</th><th>Value</th><th>Match</th></tr></thead>' +
-        '<tbody>' + rows.join("") + '</tbody>' +
-      '</table>'
-    );
-  }
-
-  function renderCoT(steps) {
-    if (!steps || !steps.length) return '<div class="muted-block">No reasoning trace captured for this event.</div>';
-    return '<div class="cot">' + steps.map((s, i) =>
-      '<div class="step">' +
-        '<span class="step-no">' + (i + 1) + '</span>' +
-        '<span class="step-text">' + esc(s) + '</span>' +
-      '</div>'
-    ).join("") + '</div>';
-  }
-
-  function renderAuditor(a) {
-    if (!a) return '<div class="muted-block">The Intent Auditor was not consulted for this event (no AI fix attempted, or auditor unavailable).</div>';
-    const verdictCls = a.verdict.toLowerCase();
-    const hasPct = typeof a.confidence === "number" && isFinite(a.confidence);
-    const pct = hasPct ? Math.max(0, Math.min(100, a.confidence)) : 0;
-    const radius = 56;
-    const circ = 2 * Math.PI * radius;
-    const dash = hasPct ? (pct / 100) * circ : 0;
-    const adjustments = [];
-    if (a.penalty != null && a.penalty !== 0)  adjustments.push("ancestry drift " + a.penalty);
-    if (a.bonus   != null && a.bonus   !== 0)  adjustments.push("anchor +" + a.bonus);
-    const adjLine = adjustments.length
-      ? '<div class="audit-row"><span class="label">Score adjustments</span><span class="value">raw ' + fmtPct(a.rawConfidence) + ' → ' + fmtPct(hasPct ? pct : undefined) + ' (' + adjustments.join(", ") + ')</span></div>'
-      : "";
-    return (
-      '<div class="auditor-grid">' +
-        '<div class="gauge ' + verdictCls + '">' +
-          '<svg viewBox="0 0 140 140">' +
-            '<circle class="track" cx="70" cy="70" r="' + radius + '"/>' +
-            '<circle class="bar"   cx="70" cy="70" r="' + radius + '" ' +
-              'stroke-dasharray="' + dash.toFixed(2) + ' ' + circ.toFixed(2) + '"/>' +
-          '</svg>' +
-          '<div class="center">' +
-            '<div class="pct">' + (hasPct ? pct + "%" : "n/a") + '</div>' +
-            '<div class="pct-label">Consistency</div>' +
-          '</div>' +
-        '</div>' +
-        '<div class="audit-detail">' +
-          '<div class="audit-row"><span class="label">Verdict</span><span class="value"><span class="verdict-chip ' + verdictCls + '">' + a.verdict + '</span></span></div>' +
-          (a.inversionType ? '<div class="audit-row"><span class="label">Inversion type</span><span class="value">' + esc(a.inversionType) + '</span></div>' : "") +
-          adjLine +
-          '<div class="audit-reason">' + esc(a.reason) + '</div>' +
-        '</div>' +
-      '</div>'
-    );
-  }
-
-  // Parse "git diff --unified=N" output into structured hunks. Skips file
-  // headers ("diff ", "index ", "--- ", "+++ ", rename/similarity lines) and
-  // walks each "@@ -a,b +c,d @@" block, tracking real old/new line numbers
-  // so the rendered diff shows correct line refs even when the AST mutation
-  // landed several lines above the failure site (JumpToDef scenario).
-  function parseUnifiedDiff(raw) {
-    const out = [];
-    if (!raw) return out;
-    const rows = raw.split(/\r?\n/);
-    let cur = null;
-    let oldLn = 0, newLn = 0;
-    for (const r of rows) {
-      if (
-        r.startsWith("diff ") ||
-        r.startsWith("index ") ||
-        r.startsWith("--- ") ||
-        r.startsWith("+++ ") ||
-        r.startsWith("new file mode") ||
-        r.startsWith("deleted file mode") ||
-        r.startsWith("similarity ") ||
-        r.startsWith("rename ") ||
-        r.startsWith("Binary files")
-      ) continue;
-      const hunk = r.match(/^@@ -(\d+)(?:,(\d+))? \+(\d+)(?:,(\d+))? @@/);
-      if (hunk) {
-        if (cur) out.push(cur);
-        cur = { header: r, lines: [] };
-        oldLn = parseInt(hunk[1], 10);
-        newLn = parseInt(hunk[3], 10);
-        continue;
-      }
-      if (!cur) continue;
-      // "" + truly empty trailing lines: ignore
-      if (r.startsWith("\\")) continue;
-      if (r.length === 0) continue;
-      const head = r.charAt(0);
-      const text = r.slice(1);
-      if (head === "+") {
-        cur.lines.push({ type: "add", text, ln: newLn });
-        newLn++;
-      } else if (head === "-") {
-        cur.lines.push({ type: "del", text, ln: oldLn });
-        oldLn++;
-      } else if (head === " ") {
-        cur.lines.push({ type: "ctx", text, ln: newLn });
-        oldLn++; newLn++;
-      }
-    }
-    if (cur) out.push(cur);
-    return out;
-  }
-
-  function renderDiff(ev) {
-    if (ev.kind !== "HEALED") {
-      if (ev.kind === "PROTECTED") {
-        return (
-          '<div class="muted-block">No source code was modified. Sela blocked the AI-proposed change because the Intent Auditor flagged a semantic mismatch - your test file is untouched and the underlying behaviour change is still surfacing in CI.</div>'
-        );
-      }
-      return '<div class="muted-block">No source code was modified - the AI could not propose a confident fix for this selector.</div>';
-    }
-
-    const raw = ev.gitUnifiedDiff || "";
-    const hunks = parseUnifiedDiff(raw);
-
-    let bodyHtml;
-    let sourceTag;
-    if (hunks.length > 0) {
-      sourceTag = "native git diff";
-      bodyHtml = hunks.map(h => {
-        const hdr =
-          '<div class="diff-line ctx">' +
-            '<span class="gutter">@</span><span class="ln"></span><span class="code">' + esc(h.header) + '</span>' +
-          '</div>';
-        const body = h.lines.map(L => {
-          const gutter = L.type === "add" ? "+" : L.type === "del" ? "-" : " ";
-          return '<div class="diff-line ' + L.type + '">' +
-                   '<span class="gutter">' + gutter + '</span>' +
-                   '<span class="ln">' + L.ln + '</span>' +
-                   '<span class="code">' + esc(L.text) + '</span>' +
-                 '</div>';
-        }).join("");
-        return hdr + body;
-      }).join("");
-    } else {
-      // Fallback when git diff capture was unavailable (no git, untracked
-      // file, etc.). Render the single before/after pair the engine carried
-      // over from the legacy code path.
-      sourceTag = "fallback (no git diff captured)";
-      const oldLine = ev.oldCodeLine || "";
-      const newLine = ev.newCodeLine || "";
-      bodyHtml =
-        '<div class="diff-line del">' +
-          '<span class="gutter">-</span><span class="ln">' + (ev.newLineNumber || "") + '</span><span class="code">' + esc(oldLine) + '</span>' +
-        '</div>' +
-        '<div class="diff-line add">' +
-          '<span class="gutter">+</span><span class="ln">' + (ev.newLineNumber || "") + '</span><span class="code">' + esc(newLine) + '</span>' +
-        '</div>';
-    }
-
-    return (
-      '<div class="diff">' +
-        '<div class="diff-head">' +
-          '<span>' + esc(ev.sourceFile) + '</span>' +
-          '<span class="muted">·</span>' +
-          '<span>line ' + ev.newLineNumber + '</span>' +
-          (ev.diffStrategy ? '<span class="muted">·</span><span>strategy: ' + esc(ev.diffStrategy) + '</span>' : "") +
-          (ev.blastRadius != null ? '<span class="muted">·</span><span>blast radius: ' + ev.blastRadius + '</span>' : "") +
-          '<span class="muted">·</span><span>' + sourceTag + '</span>' +
-        '</div>' +
-        '<div class="diff-body">' + bodyHtml + '</div>' +
-      '</div>'
-    );
-  }
-
-  function renderFailureContext(ev) {
-    if (ev.kind !== "FAILED" || !ev.failureScreenshotPng) return "";
-    return (
-      '<div class="section">' +
-        '<div class="section-title"><span class="marker"></span>Failure Context · Playwright Screenshot</div>' +
-        '<div class="failure-img">' +
-          '<img src="data:image/png;base64,' + ev.failureScreenshotPng + '" alt="Playwright failure screenshot" loading="lazy" />' +
-          '<div class="img-meta">captured by SelaReporter at test failure · base64-embedded · survives Playwright temp cleanup</div>' +
-        '</div>' +
-      '</div>'
-    );
-  }
-
-  function renderAlts(ev) {
-    if (ev.kind !== "HEALED" || !ev.aiAlternatives || !ev.aiAlternatives.length) return "";
-    return (
-      '<div class="section">' +
-        '<div class="section-title"><span class="marker"></span>Alternative selectors the AI considered</div>' +
-        '<div class="alts">' +
-          ev.aiAlternatives.map(a => '<div class="alt">' + esc(a) + '</div>').join("") +
-        '</div>' +
-      '</div>'
-    );
-  }
-
-  function renderActions(ev) {
-    const issueUrl = "https://github.com/anthropics/sela-core/issues/new?title=" +
-      encodeURIComponent("[Sela Report] " + ev.kind + " - " + ev.stableId) +
-      "&body=" + encodeURIComponent(
-        "Stable ID: " + ev.stableId + "\n" +
-        "File: " + ev.sourceFile + ":" + ev.sourceLine + "\n" +
-        "Kind: " + ev.kind + "\n" +
-        "Generated: " + DATA.generatedAt
-      );
-
-    if (ev.kind === "HEALED") {
-      return (
-        '<div class="actions">' +
-          '<button class="btn primary" data-action="keep" data-id="' + ev.stableId + '">✓ Keep changes</button>' +
-          '<button class="btn danger"  data-action="rollback" data-id="' + ev.stableId + '">↶ Rollback</button>' +
-          '<a class="btn ghost" target="_blank" rel="noopener" href="' + issueUrl + '">⚑ Report issue</a>' +
-        '</div>'
-      );
-    }
-    if (ev.kind === "PROTECTED") {
-      return (
-        '<div class="actions">' +
-          '<button class="btn primary" data-action="acknowledge" data-id="' + ev.stableId + '">✓ Acknowledge - I will investigate</button>' +
-          '<a class="btn ghost" target="_blank" rel="noopener" href="' + issueUrl + '">⚑ File regression</a>' +
-        '</div>'
-      );
-    }
-    return (
-      '<div class="actions">' +
-        '<a class="btn primary" href="' + vscodeLink(ev.sourceFile, ev.sourceLine) + '">→ Open in editor</a>' +
-        '<a class="btn ghost" target="_blank" rel="noopener" href="' + issueUrl + '">⚑ Report issue</a>' +
-      '</div>'
-    );
-  }
-
-  function renderCardBody(ev) {
-    const blocks = [];
-
-    // 1. AI Reasoning (CoT)
-    if (ev.kind !== "FAILED" || ev.aiExplanation) {
-      const steps = ev.kind === "HEALED" ? ev.reasoningSteps :
-                    ev.kind === "PROTECTED" ? buildProtectedSteps(ev) :
-                    buildFailedSteps(ev);
-      blocks.push(
-        '<div class="section">' +
-          '<div class="section-title"><span class="marker"></span>AI Reasoning · Chain of Thought</div>' +
-          renderCoT(steps) +
-        '</div>'
-      );
-    }
-
-    // 2. Intent Auditor deep dive
-    if (ev.auditor !== undefined) {
-      blocks.push(
-        '<div class="section">' +
-          '<div class="section-title"><span class="marker"></span>Intent Auditor · Deep Dive</div>' +
-          renderAuditor(ev.auditor) +
-        '</div>'
-      );
-    }
-
-    // 3. Visual DNA Evidence
-    blocks.push(
-      '<div class="section">' +
-        '<div class="section-title"><span class="marker"></span>Visual DNA Evidence · Old vs New</div>' +
-        renderDnaTable(ev.dnaBefore || null, ev.dnaAfter || null) +
-      '</div>'
-    );
-
-    // 4. Diff
-    blocks.push(
-      '<div class="section">' +
-        '<div class="section-title"><span class="marker"></span>Source Code Diff</div>' +
-        renderDiff(ev) +
-      '</div>'
-    );
-
-    // 5. Failure Context - Playwright screenshot (FAILED only)
-    blocks.push(renderFailureContext(ev));
-
-    // 6. Alternatives
-    blocks.push(renderAlts(ev));
-
-    // 6. Actions
-    blocks.push(renderActions(ev));
-
-    return blocks.join("");
-  }
-
-  function buildProtectedSteps(ev) {
-    const steps = [];
-    steps.push("AI proposed a replacement selector for the broken locator.");
-    if (ev.aiExplanation) steps.push("Reasoning given: " + ev.aiExplanation);
-    if (ev.candidateNewSelector) steps.push("Candidate selector resolved live - but its semantics changed.");
-    if (ev.auditor)        steps.push("Intent Auditor verdict: " + ev.auditor.verdict + " · " + ev.auditor.reason);
-    steps.push("Sela blocked the auto-fix. Source code untouched. Investigate this as a real regression.");
-    return steps;
-  }
-  function buildFailedSteps(ev) {
-    const steps = [];
-    steps.push("Locator failed to resolve at runtime - Sela attempted to heal it.");
-    if (ev.aiExplanation) steps.push("AI response: " + ev.aiExplanation);
-    steps.push("No confident replacement was produced. Reason: " + (ev.reason || "unknown"));
-    steps.push("Open the file directly in your editor to inspect the original locator.");
-    return steps;
-  }
-
-  function eventCard(ev) {
-    const link = vscodeLink(ev.sourceFile, ev.sourceLine);
-    const cardCls = ev.kind === "HEALED" ? "healed" : ev.kind === "PROTECTED" ? "protected" : "failed";
-    return (
-      '<article class="card ' + cardCls + '" data-kind="' + ev.kind + '" data-haystack="' + esc((ev.oldSelector + " " + (ev.newSelector || "") + " " + ev.sourceFile + " " + (ev.testTitle || "")).toLowerCase()) + '">' +
-        '<div class="card-head">' +
-          badge(ev.kind) +
-          '<div class="card-title">' +
-            '<div class="selector">' + esc(ev.kind === "HEALED" ? (ev.newSelector || ev.oldSelector) : ev.oldSelector) + '</div>' +
-            '<div class="meta-line">' +
-              (ev.testTitle ? esc(ev.testTitle) + ' · ' : "") +
-              '<a href="' + link + '">' + esc(ev.sourceFile) + ':' + ev.sourceLine + '</a>' +
-              contextTags(ev) +
-              ' · ' + fmtTime(ev.timestamp) +
-            '</div>' +
-          '</div>' +
-          '<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="card-body">' + renderCardBody(ev) + '</div>' +
-      '</article>'
-    );
-  }
-
-  // ── Mount ─────────────────────────────────────────────────────
-  const $events = $("#events");
-  if (DATA.events.length === 0) {
-    $events.innerHTML = '<div class="muted-block">Sela was idle on this run - no broken selectors encountered.</div>';
-  } else {
-    $events.innerHTML = DATA.events.map(eventCard).join("");
-
-    // Auto-open the first PROTECTED card to surface bugs immediately.
-    const firstProtected = $events.querySelector('.card.protected');
-    if (firstProtected) firstProtected.classList.add("open");
-    else {
-      const firstCard = $events.querySelector('.card');
-      if (firstCard) firstCard.classList.add("open");
-    }
-  }
-
-  // ── Interactions ──────────────────────────────────────────────
-  function showToast(text) {
-    const t = $("#toast");
-    t.textContent = text;
-    t.classList.remove("hidden");
-    clearTimeout(showToast._t);
-    showToast._t = setTimeout(() => t.classList.add("hidden"), 2400);
-  }
-
-  $events.addEventListener("click", (e) => {
-    const head = e.target.closest(".card-head");
-    if (head) {
-      const card = head.parentElement;
-      card.classList.toggle("open");
-      return;
-    }
-    const btn = e.target.closest("button[data-action]");
-    if (!btn) return;
-    const action = btn.dataset.action;
-    const id = btn.dataset.id;
-    if (action === "keep" || action === "acknowledge") {
-      btn.dataset.state = "approved";
-      btn.textContent = action === "keep" ? "✓ Approved" : "✓ Acknowledged";
-      showToast("Saved locally - Sela noted your decision for " + id);
-    } else if (action === "rollback") {
-      const cmd = "npx sela dna refactor --rollback " + id;
-      navigator.clipboard?.writeText(cmd).catch(() => {});
-      showToast("Rollback command copied: " + cmd);
-    }
-  });
-
-  // ── Filters + Search ──────────────────────────────────────────
-  let activeFilter = "ALL";
-  let searchTerm = "";
-  function applyFilters() {
-    let visible = 0;
-    $$(".card", $events).forEach(card => {
-      const matchKind   = activeFilter === "ALL" || card.dataset.kind === activeFilter;
-      const matchSearch = !searchTerm || card.dataset.haystack.includes(searchTerm);
-      const show = matchKind && matchSearch;
-      card.style.display = show ? "" : "none";
-      if (show) visible++;
-    });
-    $("#empty-state").classList.toggle("hidden", visible !== 0 || DATA.events.length === 0);
-  }
-
-  $("#filter-group").addEventListener("click", e => {
-    const chip = e.target.closest(".chip");
-    if (!chip) return;
-    $$(".chip", $("#filter-group")).forEach(c => c.classList.remove("active"));
-    chip.classList.add("active");
-    activeFilter = chip.dataset.filter;
-    applyFilters();
-  });
-  $("#search").addEventListener("input", e => {
-    searchTerm = e.target.value.toLowerCase();
-    applyFilters();
-  });
-
-  // ── Keyboard niceties ─────────────────────────────────────────
-  document.addEventListener("keydown", (e) => {
-    if (e.key === "/" && document.activeElement !== $("#search")) {
-      e.preventDefault();
-      $("#search").focus();
-    }
-  });
-})();
-`;
+// ─────────────────────────────────────────────────────────────────────────────
+// 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 */