npm - similarbuild - Versions diffs - 0.1.0 - Mend

similarbuild 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (76) hide show

package/templates/reports/report-template.html ADDED Viewed

@@ -0,0 +1,571 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<title>{{PROJECT_TITLE}} — SimilarBuild report</title>
+<style>
+  :root {
+    --bg: #0f1115;
+    --surface: #161922;
+    --surface-2: #1d212c;
+    --border: #2a3040;
+    --text: #e6e9ef;
+    --muted: #9aa3b2;
+    --accent: #6ea8ff;
+    --ok: #4ade80;
+    --warn: #fbbf24;
+    --fail: #f87171;
+    --diff: #ff5c7a;
+    --shadow: 0 6px 24px rgba(0,0,0,.35);
+    --radius: 10px;
+    --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  }
+  @media (prefers-color-scheme: light) {
+    :root {
+      --bg: #f6f7fa;
+      --surface: #fff;
+      --surface-2: #f1f3f8;
+      --border: #d8dde7;
+      --text: #1a1d24;
+      --muted: #5a6271;
+      --accent: #2563eb;
+    }
+  }
+  * { box-sizing: border-box; }
+  html, body { margin: 0; padding: 0; }
+  body {
+    background: var(--bg);
+    color: var(--text);
+    font-family: var(--sans);
+    font-size: 14px;
+    line-height: 1.5;
+    -webkit-font-smoothing: antialiased;
+  }
+  .skip-link {
+    position: absolute; left: -9999px; top: 0;
+    background: var(--accent); color: #fff; padding: 8px 12px; border-radius: 0 0 6px 0;
+  }
+  .skip-link:focus { left: 0; }
+  .wrap { max-width: 1200px; margin: 0 auto; padding: 24px 20px 80px; }
+  header.report-header { padding: 24px 0 16px; border-bottom: 1px solid var(--border); margin-bottom: 24px; }
+  header.report-header h1 { font-size: 22px; margin: 0 0 6px; font-weight: 600; }
+  header.report-header .subtitle { color: var(--muted); font-size: 13px; margin: 0; }
+  header.report-header .subtitle a { color: var(--accent); text-decoration: none; }
+  header.report-header .subtitle a:hover { text-decoration: underline; }
+  .stats { display: flex; flex-wrap: wrap; gap: 12px; margin: 18px 0 0; }
+  .stat {
+    background: var(--surface); border: 1px solid var(--border);
+    border-radius: var(--radius); padding: 10px 14px; min-width: 110px;
+  }
+  .stat .label { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
+  .stat .value { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
+  .stat.ok .value { color: var(--ok); }
+  .stat.warn .value { color: var(--warn); }
+  .stat.fail .value { color: var(--fail); }
+  h2.section-title { font-size: 15px; font-weight: 600; margin: 28px 0 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
+  table.pages {
+    width: 100%; border-collapse: separate; border-spacing: 0;
+    background: var(--surface); border: 1px solid var(--border);
+    border-radius: var(--radius); overflow: hidden;
+  }
+  table.pages thead th {
+    text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
+    color: var(--muted); padding: 10px 12px; background: var(--surface-2);
+    border-bottom: 1px solid var(--border); font-weight: 500;
+  }
+  table.pages tbody tr.row-summary { cursor: pointer; }
+  table.pages tbody tr.row-summary:hover { background: var(--surface-2); }
+  table.pages tbody tr.row-summary.expanded { background: var(--surface-2); }
+  table.pages tbody td { padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
+  table.pages tbody tr:last-child td { border-bottom: 0; }
+  td.col-status { width: 90px; }
+  td.col-type   { width: 90px; color: var(--muted); font-family: var(--mono); font-size: 12px; }
+  td.col-diff   { width: 80px; text-align: right; font-variant-numeric: tabular-nums; font-family: var(--mono); }
+  td.col-iter   { width: 60px; text-align: right; font-variant-numeric: tabular-nums; font-family: var(--mono); color: var(--muted); }
+  td.col-viol   { width: 90px; text-align: right; font-variant-numeric: tabular-nums; }
+  td.col-page a { color: var(--text); text-decoration: none; }
+  td.col-page a:hover { color: var(--accent); }
+  td.col-page .url { color: var(--muted); font-size: 12px; display: block; max-width: 480px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .badge {
+    display: inline-block; padding: 3px 8px; border-radius: 999px;
+    font-size: 11px; font-weight: 600; letter-spacing: .03em;
+  }
+  .badge.ok   { background: rgba(74,222,128,.14); color: var(--ok); }
+  .badge.warn { background: rgba(251,191,36,.14); color: var(--warn); }
+  .badge.fail { background: rgba(248,113,113,.14); color: var(--fail); }
+  .badge.sev-high { background: rgba(248,113,113,.14); color: var(--fail); }
+  .badge.sev-med, .badge.sev-medium { background: rgba(251,191,36,.14); color: var(--warn); }
+  .badge.sev-low { background: rgba(154,163,178,.14); color: var(--muted); }
+  tr.row-detail td { padding: 0 !important; background: var(--bg); border-bottom: 1px solid var(--border); }
+  .detail-panel { padding: 18px; display: grid; gap: 18px; grid-template-columns: minmax(0,1fr); }
+  @media (min-width: 920px) { .detail-panel { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }
+  .detail-block { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; }
+  .detail-block h3 { margin: 0 0 10px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; }
+  .detail-block.full-span { grid-column: 1 / -1; }
+  /* Slider */
+  .slider {
+    position: relative; width: 100%; aspect-ratio: 16 / 10; max-height: 70vh;
+    background: #000; overflow: hidden; border-radius: 6px;
+    --clip: 50%;
+  }
+  .slider img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; user-select: none; -webkit-user-drag: none; }
+  .slider .build { z-index: 1; }
+  .slider .live  { z-index: 2; clip-path: inset(0 calc(100% - var(--clip)) 0 0); }
+  .slider .handle {
+    position: absolute; top: 0; bottom: 0; width: 2px; background: var(--accent);
+    left: var(--clip); transform: translateX(-50%); z-index: 3; pointer-events: none;
+    box-shadow: 0 0 0 1px rgba(0,0,0,.4);
+  }
+  .slider .handle::after {
+    content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
+    width: 26px; height: 26px; border-radius: 50%; background: var(--accent);
+    box-shadow: 0 2px 8px rgba(0,0,0,.4);
+  }
+  .slider .label {
+    position: absolute; top: 8px; padding: 3px 8px; background: rgba(0,0,0,.55); color: #fff;
+    font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
+    border-radius: 4px; z-index: 4; pointer-events: none;
+  }
+  .slider .label.left  { left: 8px; }
+  .slider .label.right { right: 8px; }
+  .slider .input-range {
+    position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize;
+    margin: 0; appearance: none; background: transparent; z-index: 5;
+  }
+  .slider .input-range:focus-visible + .focus-ring {
+    position: absolute; inset: 0; outline: 2px solid var(--accent); outline-offset: -3px; border-radius: 6px; pointer-events: none; z-index: 4;
+  }
+  .slider-help { color: var(--muted); font-size: 11px; margin-top: 6px; }
+  .diff-image { display: block; width: 100%; max-height: 70vh; object-fit: contain; background: #000; border-radius: 6px; }
+  table.kv {
+    width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 12px;
+  }
+  table.kv td { padding: 5px 8px; border-bottom: 1px solid var(--border); }
+  table.kv td:first-child { color: var(--muted); width: 40%; word-break: break-all; }
+  table.kv td.equal { color: var(--muted); }
+  table.kv td.changed { color: var(--diff); }
+  table.kv tr:last-child td { border-bottom: 0; }
+  .violations-list, .diffs-list, .fixes-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
+  .violations-list li, .diffs-list li, .fixes-list li {
+    background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px;
+    font-size: 12px; line-height: 1.45;
+  }
+  .violations-list .vid, .diffs-list .key { font-family: var(--mono); color: var(--muted); margin-right: 8px; }
+  .violations-list .vmsg { display: block; margin-top: 4px; color: var(--text); }
+  .empty { color: var(--muted); font-size: 12px; font-style: italic; margin: 4px 0 0; }
+  .meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--muted); margin-top: 8px; }
+  .meta a { color: var(--accent); text-decoration: none; }
+  .meta a:hover { text-decoration: underline; }
+  details.previous-run {
+    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 8px;
+  }
+  details.previous-run > summary {
+    cursor: pointer; padding: 12px 14px; list-style: none; display: flex; justify-content: space-between; gap: 12px; align-items: center;
+  }
+  details.previous-run > summary::-webkit-details-marker { display: none; }
+  details.previous-run > summary::before {
+    content: "▸"; color: var(--muted); display: inline-block; transition: transform .15s; margin-right: 6px;
+  }
+  details.previous-run[open] > summary::before { transform: rotate(90deg); }
+  details.previous-run .prev-body { padding: 0 14px 14px; }
+  details.previous-run .prev-summary-line { display: flex; flex-wrap: wrap; gap: 8px 14px; font-family: var(--mono); font-size: 12px; color: var(--muted); }
+  details.previous-run .prev-summary-line strong { color: var(--text); }
+  footer.report-footer { margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--border); color: var(--muted); font-size: 12px; }
+  footer.report-footer details { margin-top: 8px; }
+  footer.report-footer pre { font-family: var(--mono); font-size: 11px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 10px; overflow: auto; max-height: 280px; }
+  .row-summary[aria-expanded="true"] td.col-page::before { content: "▾ "; color: var(--muted); }
+  .row-summary[aria-expanded="false"] td.col-page::before { content: "▸ "; color: var(--muted); }
+</style>
+</head>
+<body>
+<a href="#main" class="skip-link">Skip to report</a>
+<div class="wrap" id="main">
+  <header class="report-header">
+    <h1 id="report-title">Loading…</h1>
+    <p class="subtitle" id="report-subtitle"></p>
+    <div class="stats" id="report-stats" role="group" aria-label="Run totals"></div>
+  </header>
+  <h2 class="section-title">Pages</h2>
+  <table class="pages" id="pages-table" aria-describedby="pages-help">
+    <thead>
+      <tr>
+        <th>Status</th>
+        <th>Type</th>
+        <th>Page</th>
+        <th style="text-align:right">Diff%</th>
+        <th style="text-align:right">Iter</th>
+        <th style="text-align:right">Viol</th>
+      </tr>
+    </thead>
+    <tbody id="pages-body"></tbody>
+  </table>
+  <p id="pages-help" class="slider-help">Click a row to expand the side-by-side comparison and details.</p>
+  <section id="previous-runs-section" hidden>
+    <h2 class="section-title">Previous runs</h2>
+    <div id="previous-runs-list"></div>
+  </section>
+  <footer class="report-footer">
+    <div id="footer-meta"></div>
+    <details>
+      <summary>Config snapshot</summary>
+      <pre id="config-snapshot"></pre>
+    </details>
+  </footer>
+</div>
+<script type="application/json" id="sb-report-data">{{REPORT_DATA_JSON}}</script>
+<script>
+(function () {
+  "use strict";
+  var DATA;
+  try {
+    DATA = JSON.parse(document.getElementById("sb-report-data").textContent);
+  } catch (e) {
+    document.getElementById("report-title").textContent = "Failed to parse report data";
+    document.getElementById("report-subtitle").textContent = String(e && e.message || e);
+    return;
+  }
+  var $ = function (sel, root) { return (root || document).querySelector(sel); };
+  var el = function (tag, attrs, children) {
+    var n = document.createElement(tag);
+    if (attrs) for (var k in attrs) {
+      if (k === "class") n.className = attrs[k];
+      else if (k === "text") n.textContent = attrs[k];
+      else if (k === "html") n.innerHTML = attrs[k];
+      else if (k.indexOf("on") === 0 && typeof attrs[k] === "function") n.addEventListener(k.slice(2), attrs[k]);
+      else if (attrs[k] != null) n.setAttribute(k, attrs[k]);
+    }
+    if (children) (Array.isArray(children) ? children : [children]).forEach(function (c) {
+      if (c == null) return;
+      n.appendChild(typeof c === "string" ? document.createTextNode(c) : c);
+    });
+    return n;
+  };
+  function fmtMs(ms) {
+    if (!ms && ms !== 0) return "—";
+    if (ms < 1000) return ms + "ms";
+    var s = ms / 1000;
+    if (s < 60) return s.toFixed(1) + "s";
+    var m = Math.floor(s / 60); var r = Math.round(s - m * 60);
+    return m + "m " + r + "s";
+  }
+  function fmtPct(n) {
+    if (n == null || isNaN(n)) return "—";
+    return Number(n).toFixed(2) + "%";
+  }
+  function statusToken(s) {
+    s = String(s || "").toLowerCase();
+    if (s === "ok" || s === "pass" || s === "passed" || s === "✅") return "ok";
+    if (s === "fail" || s === "failed" || s === "❌") return "fail";
+    return "warn";
+  }
+  function statusLabel(tok) {
+    return tok === "ok" ? "✅ ok" : tok === "fail" ? "❌ fail" : "⚠️ warn";
+  }
+  // ---- Header ----
+  var run = DATA.currentRun || {};
+  var totals = run.totals || { ok: 0, warn: 0, fail: 0 };
+  $("#report-title").textContent =
+    "SimilarBuild report — " + (DATA.projectSlug || "(unnamed project)");
+  var sub = $("#report-subtitle");
+  sub.appendChild(document.createTextNode("Root: "));
+  if (DATA.rootUrl) sub.appendChild(el("a", { href: DATA.rootUrl, target: "_blank", rel: "noreferrer noopener", text: DATA.rootUrl }));
+  else sub.appendChild(document.createTextNode("(unknown)"));
+  sub.appendChild(document.createTextNode(" · target: " + (DATA.target || "—") + " · run: " + (run.timestamp || "—")));
+  var stats = $("#report-stats");
+  function statCard(cls, label, value) {
+    return el("div", { class: "stat " + cls }, [
+      el("div", { class: "label", text: label }),
+      el("div", { class: "value", text: String(value) }),
+    ]);
+  }
+  stats.appendChild(statCard("ok",   "Ok",     totals.ok || 0));
+  stats.appendChild(statCard("warn", "Warn",   totals.warn || 0));
+  stats.appendChild(statCard("fail", "Fail",   totals.fail || 0));
+  stats.appendChild(statCard("",     "Pages",  (totals.ok||0) + (totals.warn||0) + (totals.fail||0)));
+  stats.appendChild(statCard("",     "Iters",  run.totalIterations || 0));
+  stats.appendChild(statCard("",     "Time",   fmtMs(run.durationMs || 0)));
+  // ---- Pages table ----
+  var tbody = $("#pages-body");
+  (run.pageResults || []).forEach(function (page, idx) {
+    var tok = statusToken(page.status);
+    var rowId = "row-" + idx;
+    var detailId = "detail-" + idx;
+    var summary = el("tr", { class: "row-summary", "data-idx": idx, id: rowId, role: "button", tabindex: "0", "aria-expanded": "false", "aria-controls": detailId }, [
+      el("td", { class: "col-status" }, el("span", { class: "badge " + tok, text: statusLabel(tok) })),
+      el("td", { class: "col-type",  text: page.type || "—" }),
+      el("td", { class: "col-page" }, [
+        el("strong", { text: page.slug || page.url || "(unnamed)" }),
+        el("span", { class: "url", text: page.url || "" }),
+      ]),
+      el("td", { class: "col-diff", text: fmtPct(page.diffPercent) }),
+      el("td", { class: "col-iter", text: String(page.iterations || 0) }),
+      el("td", { class: "col-viol", text: String((page.violations || []).length) }),
+    ]);
+    var detail = el("tr", { class: "row-detail", id: detailId, hidden: "" }, el("td", { colspan: "6" }));
+    var panel = renderDetail(page, idx);
+    detail.firstChild.appendChild(panel);
+    function toggle() {
+      var open = detail.hasAttribute("hidden") ? false : true;
+      if (open) {
+        detail.setAttribute("hidden", "");
+        summary.setAttribute("aria-expanded", "false");
+        summary.classList.remove("expanded");
+      } else {
+        detail.removeAttribute("hidden");
+        summary.setAttribute("aria-expanded", "true");
+        summary.classList.add("expanded");
+      }
+    }
+    summary.addEventListener("click", toggle);
+    summary.addEventListener("keydown", function (e) {
+      if (e.key === "Enter" || e.key === " ") { e.preventDefault(); toggle(); }
+    });
+    tbody.appendChild(summary);
+    tbody.appendChild(detail);
+  });
+  if (!(run.pageResults || []).length) {
+    tbody.appendChild(el("tr", {}, el("td", { colspan: "6", class: "empty", style: "padding:18px;text-align:center;" }, "No pages in this run.")));
+  }
+  // ---- Detail panel for a page ----
+  function renderDetail(page, idx) {
+    var panel = el("div", { class: "detail-panel" });
+    // Slider block (full width on mobile, left column on desktop)
+    var slider = renderSlider(page, idx);
+    panel.appendChild(slider);
+    // Right column: tokens + structuredDiffs + violations + fixes + meta
+    var right = el("div", { class: "detail-block" }, [
+      el("h3", { text: "Page details" }),
+    ]);
+    // Meta line
+    var meta = el("div", { class: "meta" }, []);
+    if (page.outputPath) meta.appendChild(el("a", { href: page.outputPath, target: "_blank", rel: "noreferrer noopener", text: "→ output" }));
+    if (page.url) meta.appendChild(el("a", { href: page.url, target: "_blank", rel: "noreferrer noopener", text: "→ live" }));
+    if (page.diffMap) meta.appendChild(el("a", { href: page.diffMap, target: "_blank", rel: "noreferrer noopener", text: "→ diff map (full)" }));
+    right.appendChild(meta);
+    // Token diffs
+    right.appendChild(el("h3", { text: "Token / geometry diffs", style: "margin-top:14px;" }));
+    var diffs = page.structuredDiffs || [];
+    if (diffs.length) {
+      var ul = el("ul", { class: "diffs-list" });
+      diffs.slice(0, 30).forEach(function (d) {
+        var sev = (d.severity || "low").toLowerCase();
+        ul.appendChild(el("li", {}, [
+          el("span", { class: "badge sev-" + sev, text: sev }),
+          el("span", { class: "key", text: " " + (d.key || d.path || "(?)") }),
+          el("span", { text: " live=" + JSON.stringify(d.live) + " · build=" + JSON.stringify(d.build) }),
+        ]));
+      });
+      right.appendChild(ul);
+      if (diffs.length > 30) right.appendChild(el("p", { class: "empty", text: "…and " + (diffs.length - 30) + " more (see compare report JSON)." }));
+    } else {
+      right.appendChild(el("p", { class: "empty", text: "No structured diffs." }));
+    }
+    // Violations
+    right.appendChild(el("h3", { text: "Anti-pattern violations", style: "margin-top:14px;" }));
+    var v = page.violations || [];
+    if (v.length) {
+      var vul = el("ul", { class: "violations-list" });
+      v.forEach(function (it) {
+        var sev = (it.severity || "low").toLowerCase();
+        vul.appendChild(el("li", {}, [
+          el("span", { class: "badge sev-" + sev, text: sev }),
+          el("span", { class: "vid", text: " " + (it.id || it.code || "violation") }),
+          el("span", { class: "vmsg", text: it.message || it.summary || "" }),
+        ]));
+      });
+      right.appendChild(vul);
+    } else {
+      right.appendChild(el("p", { class: "empty", text: "No violations." }));
+    }
+    // Candidate fixes
+    var fixes = page.candidateFixes || [];
+    if (fixes.length) {
+      right.appendChild(el("h3", { text: "Candidate fixes", style: "margin-top:14px;" }));
+      var ful = el("ul", { class: "fixes-list" });
+      fixes.forEach(function (f) {
+        ful.appendChild(el("li", { text: typeof f === "string" ? f : (f.summary || JSON.stringify(f)) }));
+      });
+      right.appendChild(ful);
+    }
+    // Token table (live vs build) — collapsed if absent
+    if (page.tokens && (page.tokens.live || page.tokens.build)) {
+      right.appendChild(el("h3", { text: "Tokens (live vs build)", style: "margin-top:14px;" }));
+      right.appendChild(renderTokenTable(page.tokens));
+    }
+    panel.appendChild(right);
+    return panel;
+  }
+  function renderSlider(page, idx) {
+    var block = el("div", { class: "detail-block" }, el("h3", { text: "Side-by-side (live ⇆ build)" }));
+    if (!page.screenshotsLive || !page.screenshotsBuild) {
+      block.appendChild(el("p", { class: "empty", text: "Screenshots not available for this page." }));
+      if (page.diffMap) {
+        block.appendChild(el("h3", { text: "Diff map", style: "margin-top:12px;" }));
+        block.appendChild(el("img", { src: page.diffMap, alt: "Pixel diff map", class: "diff-image", loading: "lazy" }));
+      }
+      return block;
+    }
+    var sliderId = "slider-" + idx;
+    var inputId = "slider-range-" + idx;
+    var slider = el("div", { class: "slider", id: sliderId }, [
+      el("img", { class: "build", src: page.screenshotsBuild, alt: "Build screenshot for " + (page.slug || page.url || ""), loading: "lazy" }),
+      el("img", { class: "live",  src: page.screenshotsLive,  alt: "Live screenshot for "  + (page.slug || page.url || ""), loading: "lazy" }),
+      el("span", { class: "label left",  text: "Live" }),
+      el("span", { class: "label right", text: "Build" }),
+      el("span", { class: "handle", "aria-hidden": "true" }),
+      el("input", {
+        class: "input-range",
+        id: inputId,
+        type: "range", min: "0", max: "100", step: "1", value: "50",
+        "aria-label": "Compare live vs build, " + (page.slug || page.url || ""),
+        "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": "50",
+        role: "slider",
+      }),
+      el("span", { class: "focus-ring", "aria-hidden": "true" }),
+    ]);
+    var range = $("#" + inputId, slider);
+    function applyClip() {
+      slider.style.setProperty("--clip", range.value + "%");
+      range.setAttribute("aria-valuenow", range.value);
+    }
+    range.addEventListener("input", applyClip);
+    range.addEventListener("keydown", function (e) {
+      // Default range keys move ±1; Shift = ±5; Home/End jumps to ends. Already
+      // covered by the native control — we just stop arrow keys from scrolling.
+      if (["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End","PageUp","PageDown"].indexOf(e.key) !== -1) {
+        e.stopPropagation();
+      }
+    });
+    applyClip();
+    block.appendChild(slider);
+    block.appendChild(el("p", { class: "slider-help", text: "Drag to compare. Keyboard: ←/→ ±1, Shift+←/→ ±5, Home/End jump to edges." }));
+    if (page.diffMap) {
+      block.appendChild(el("h3", { text: "Diff map", style: "margin-top:12px;" }));
+      block.appendChild(el("img", { src: page.diffMap, alt: "Pixel diff overlay", class: "diff-image", loading: "lazy" }));
+    }
+    return block;
+  }
+  function renderTokenTable(tokens) {
+    var live = tokens.live || {};
+    var build = tokens.build || {};
+    var keys = Object.keys(Object.assign({}, live, build));
+    keys.sort();
+    var tbl = el("table", { class: "kv" });
+    keys.forEach(function (k) {
+      var lv = live[k]; var bv = build[k];
+      var equal = JSON.stringify(lv) === JSON.stringify(bv);
+      tbl.appendChild(el("tr", {}, [
+        el("td", { text: k }),
+        el("td", { class: equal ? "equal" : "changed", text: lv == null ? "—" : (typeof lv === "object" ? JSON.stringify(lv) : String(lv)) }),
+        el("td", { class: equal ? "equal" : "changed", text: bv == null ? "—" : (typeof bv === "object" ? JSON.stringify(bv) : String(bv)) }),
+      ]));
+    });
+    if (!keys.length) {
+      var n = el("p", { class: "empty", text: "No token snapshot available." });
+      var w = el("div"); w.appendChild(n); return w;
+    }
+    var head = el("tr", {}, [
+      el("td", { text: "key" }),
+      el("td", { text: "live" }),
+      el("td", { text: "build" }),
+    ]);
+    tbl.insertBefore(head, tbl.firstChild);
+    return tbl;
+  }
+  // ---- Previous runs (Pattern #38) ----
+  var prev = DATA.previousRuns || [];
+  if (prev.length) {
+    $("#previous-runs-section").hidden = false;
+    var list = $("#previous-runs-list");
+    prev.forEach(function (r) {
+      var t = r.totals || { ok: 0, warn: 0, fail: 0 };
+      var det = el("details", { class: "previous-run" }, [
+        el("summary", {}, [
+          el("strong", { text: r.timestamp || "(no timestamp)" }),
+          el("span", {}, " " + (t.ok||0) + "✅ " + (t.warn||0) + "⚠️ " + (t.fail||0) + "❌ · " + fmtMs(r.durationMs || 0) + " · iters " + (r.totalIterations || 0)),
+        ]),
+        el("div", { class: "prev-body" }, renderPreviousRunBody(r)),
+      ]);
+      list.appendChild(det);
+    });
+  }
+  function renderPreviousRunBody(r) {
+    var wrap = el("div");
+    var rows = (r.pageResults || []).map(function (p) {
+      var tok = statusToken(p.status);
+      return el("tr", {}, [
+        el("td", {}, el("span", { class: "badge " + tok, text: statusLabel(tok) })),
+        el("td", { text: p.type || "—" }),
+        el("td", { text: p.slug || p.url || "(unnamed)" }),
+        el("td", { style: "text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;", text: fmtPct(p.diffPercent) }),
+        el("td", { style: "text-align:right;font-family:var(--mono);", text: String(p.iterations || 0) }),
+      ]);
+    });
+    if (!rows.length) { wrap.appendChild(el("p", { class: "empty", text: "No pages recorded." })); return wrap; }
+    var tbl = el("table", { class: "pages" }, [
+      el("thead", {}, el("tr", {}, [
+        el("th", { text: "Status" }), el("th", { text: "Type" }), el("th", { text: "Slug" }),
+        el("th", { style: "text-align:right", text: "Diff%" }), el("th", { style: "text-align:right", text: "Iter" }),
+      ])),
+      el("tbody", {}, rows),
+    ]);
+    wrap.appendChild(tbl);
+    return wrap;
+  }
+  // ---- Footer ----
+  var fmeta = $("#footer-meta");
+  fmeta.appendChild(document.createTextNode("Generated " + (DATA.generatedAt || "—") + " · template " + (DATA.templateVersion || "1") + " · runs persisted: " + (1 + prev.length)));
+  $("#config-snapshot").textContent = JSON.stringify(run.configSnapshot || {}, null, 2);
+})();
+</script>
+</body>
+</html>