sela-core 1.0.3 → 1.0.4

package/dist/services/HealReportService.js

@@ -0,0 +1,1195 @@
+"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.
+//
+// Goal: explain Sela's "brain" to the developer. Maximum trust & observability.
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.sharedHealReport = exports.HealReportService = void 0;
+exports.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
+// ═══════════════════════════════════════════════════════════════════
+function summariseSnapshot(s) {
+    if (!s)
+        return null;
+    return {
+        tagName: s.tagName,
+        text: s.text,
+        role: s.role,
+        classes: s.classes ?? [],
+        attributes: s.attributes ?? {},
+        ancestry: (s.ancestry ?? []).map((a) => a.fingerprint),
+        closestLabel: s.anchors?.closestLabel ?? null,
+        rowAnchor: s.anchors?.rowAnchor ?? null,
+        isGhost: s.visibility?.isGhost ?? false,
+        ghostReason: s.visibility?.ghostReason ?? null,
+        isOccluded: s.visibility?.isOccluded ?? false,
+        isInShadowDom: s.isInShadowDom ?? false,
+    };
+}
+// ═══════════════════════════════════════════════════════════════════
+// HealReportService
+// ═══════════════════════════════════════════════════════════════════
+class HealReportService {
+    events = [];
+    startedAt = new Date().toISOString();
+    record(event) {
+        this.events.push(event);
+    }
+    size() {
+        return this.events.length;
+    }
+    clear() {
+        this.events = [];
+        this.startedAt = new Date().toISOString();
+    }
+    hasContent() {
+        return this.events.length > 0;
+    }
+    /** 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");
+    }
+    /**
+     * 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.
+     */
+    flushToDisk(targetDir = process.cwd()) {
+        if (this.events.length === 0)
+            return null;
+        const html = this.renderHtml();
+        const htmlPath = path.join(targetDir, "sela-report.html");
+        const jsonPath = path.join(targetDir, "sela-report.json");
+        fs.writeFileSync(htmlPath, html, "utf8");
+        fs.writeFileSync(jsonPath, JSON.stringify({ generatedAt: new Date().toISOString(), startedAt: this.startedAt, events: this.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, "&amp;")
+        .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); }
+
+/* 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"); }
+
+  // ── 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 pct = Math.max(0, Math.min(100, a.confidence));
+    const radius = 56;
+    const circ = 2 * Math.PI * radius;
+    const dash = (pct / 100) * circ;
+    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 ' + a.rawConfidence + '% → ' + pct + '% (' + 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">' + pct + '%</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>'
+    );
+  }
+
+  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 oldLine = ev.oldCodeLine || "";
+    const newLine = ev.newCodeLine || "";
+    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>' : "") +
+        '</div>' +
+        '<div class="diff-body">' +
+          '<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>' +
+        '</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. 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();
+    }
+  });
+})();
+`;