@bughunters/vision 1.0.0

package/dist/reporter.js

@@ -0,0 +1,1039 @@
+"use strict";
+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.BugHuntersVisionReporter = void 0;
+const fs = __importStar(require("fs"));
+const path = __importStar(require("path"));
+const check_1 = require("./check");
+// ─── CSS ─────────────────────────────────────────────────────────────────────
+function getCss() {
+    return `
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+:root {
+  --bg:           #f4f4f5;
+  --surface:      #ffffff;
+  --surface-2:    #f8f8f9;
+  --border:       #e4e4e7;
+  --text:         #18181b;
+  --text-2:       #71717a;
+  --text-3:       #a1a1aa;
+  --pass:         #16a34a;
+  --pass-soft:    #f0fdf4;
+  --pass-border:  #bbf7d0;
+  --fail:         #dc2626;
+  --fail-soft:    #fef2f2;
+  --fail-border:  #fca5a5;
+  --base:         #2563eb;
+  --base-soft:    #eff6ff;
+  --base-border:  #bfdbfe;
+  --accent:        #6366f1;
+  --accent-soft:   #eef2ff;
+  --accent-border: rgba(99,102,241,.3);
+  --pixel:         #d97706;
+  --pixel-soft:   #fffbeb;
+  --pixel-border: #fde68a;
+  --radius:       8px;
+  --shadow:       0 1px 2px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.08);
+  --shadow-sm:    0 1px 2px rgba(0,0,0,.05);
+}
+
+[data-theme="dark"] {
+  --bg:           #09090b;
+  --surface:      #111113;
+  --surface-2:    #18181b;
+  --border:       #27272a;
+  --text:         #fafafa;
+  --text-2:       #a1a1aa;
+  --text-3:       #52525b;
+  --pass:         #4ade80;
+  --pass-soft:    rgba(74,222,128,.07);
+  --pass-border:  rgba(74,222,128,.25);
+  --fail:         #f87171;
+  --fail-soft:    rgba(248,113,113,.07);
+  --fail-border:  rgba(248,113,113,.25);
+  --base:         #60a5fa;
+  --base-soft:    rgba(96,165,250,.07);
+  --base-border:  rgba(96,165,250,.25);
+  --accent:        #818cf8;
+  --accent-soft:   rgba(129,140,248,.1);
+  --accent-border: rgba(129,140,248,.3);
+  --pixel:         #fbbf24;
+  --pixel-soft:   rgba(251,191,36,.1);
+  --pixel-border: rgba(251,191,36,.3);
+  --shadow:       0 1px 3px rgba(0,0,0,.4);
+  --shadow-sm:    0 1px 2px rgba(0,0,0,.3);
+}
+
+html { scroll-behavior: smooth; }
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', system-ui, sans-serif;
+  font-size: 13px;
+  line-height: 1.5;
+  background: var(--bg);
+  color: var(--text);
+  min-height: 100vh;
+  -webkit-font-smoothing: antialiased;
+}
+
+/* ── Layout ── */
+.wrap { max-width: 900px; margin: 0 auto; padding: 0 20px; }
+
+/* ── Header ── */
+.hdr {
+  background: var(--surface);
+  border-bottom: 1px solid var(--border);
+  padding: 11px 0;
+  position: sticky; top: 0; z-index: 50;
+  box-shadow: var(--shadow-sm);
+}
+.hdr-inner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
+.logo { display: flex; align-items: center; gap: 7px; margin-right: auto; }
+.logo-bug { font-size: 17px; line-height: 1; }
+.logo-name { font-size: 14px; font-weight: 700; color: var(--accent); letter-spacing: -.3px; }
+.run-at { font-size: 11px; color: var(--text-3); padding: 0 2px; }
+
+/* theme toggle */
+.t-toggle { display: flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; padding: 2px; gap: 1px; }
+.t-btn {
+  background: none; border: none; cursor: pointer;
+  padding: 4px 9px; border-radius: 4px;
+  font-size: 11px; font-family: inherit; color: var(--text-2);
+  transition: background .12s, color .12s;
+  white-space: nowrap;
+}
+.t-btn:hover { color: var(--text); }
+.t-btn.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
+
+/* ── Summary bar ── */
+.summary { display: flex; gap: 10px; margin: 22px 0 16px; flex-wrap: wrap; }
+.stat {
+  background: var(--surface); border: 1px solid var(--border);
+  border-radius: var(--radius); padding: 14px 18px; min-width: 88px;
+  box-shadow: var(--shadow-sm);
+}
+.stat-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .9px; color: var(--text-3); font-weight: 500; margin-bottom: 7px; }
+.stat-val { font-size: 28px; font-weight: 700; line-height: 1; color: var(--text); }
+.stat.s-pass .stat-val { color: var(--pass); }
+.stat.s-fail .stat-val { color: var(--fail); }
+.stat.s-base .stat-val { color: var(--base); }
+.stat.s-warn .stat-val { color: var(--pixel); }
+.stat.s-neutral .stat-val { color: var(--text-3); }
+
+/* ── Controls ── */
+.controls { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
+
+.f-group { display: flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; padding: 2px; gap: 1px; }
+.f-btn {
+  background: none; border: none; cursor: pointer;
+  padding: 5px 11px; border-radius: 4px;
+  font-size: 11px; font-family: inherit; color: var(--text-2);
+  transition: all .12s; white-space: nowrap;
+}
+.f-btn:hover { color: var(--text); }
+.f-btn.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
+
+/* image toggle */
+.img-btn {
+  display: flex; align-items: center; gap: 7px;
+  background: var(--surface); border: 1px solid var(--border);
+  border-radius: 6px; padding: 5px 12px; cursor: pointer;
+  font-size: 11px; font-family: inherit; color: var(--text-2);
+  transition: all .15s; white-space: nowrap;
+}
+.img-btn:hover { border-color: var(--text-3); color: var(--text); }
+.img-btn.on { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
+
+.sw-track {
+  width: 26px; height: 14px; border-radius: 7px;
+  background: var(--border); position: relative; flex-shrink: 0;
+  transition: background .2s;
+}
+.img-btn.on .sw-track { background: var(--accent); }
+.sw-thumb {
+  width: 10px; height: 10px; border-radius: 50%;
+  background: #fff; position: absolute; top: 2px; left: 2px;
+  transition: transform .2s; box-shadow: 0 1px 2px rgba(0,0,0,.2);
+}
+.img-btn.on .sw-thumb { transform: translateX(12px); }
+
+/* ── Test list ── */
+.test-list { display: flex; flex-direction: column; gap: 6px; padding-bottom: 48px; }
+.test-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
+.test-item.s-fail { border-left: 3px solid var(--fail); }
+.test-item.s-base { border-left: 3px solid var(--base); }
+.test-item.s-warn { border-left: 3px solid var(--pixel); }
+
+.test-row {
+  display: flex; align-items: center; gap: 11px;
+  padding: 12px 14px; cursor: pointer;
+  transition: background .1s; user-select: none;
+}
+.test-row:hover { background: var(--surface-2); }
+
+.s-dot {
+  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
+  margin-top: 1px;
+}
+.s-pass .s-dot { background: var(--pass); }
+.s-fail .s-dot { background: var(--fail); }
+.s-base .s-dot { background: var(--base); }
+.s-warn .s-dot { background: var(--pixel); }
+
+.test-meta { flex: 1; min-width: 0; }
+.test-name {
+  font-family: ui-monospace, 'SFMono-Regular', 'Fira Code', monospace;
+  font-size: 12.5px; font-weight: 600; color: var(--text);
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+.test-snip {
+  font-size: 11.5px; color: var(--text-3); margin-top: 2px;
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+
+.badges { display: flex; gap: 5px; align-items: center; flex-shrink: 0; }
+.badge {
+  font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 4px;
+  letter-spacing: .4px; font-family: ui-monospace, monospace; white-space: nowrap;
+}
+.badge.m-method { background: var(--surface-2); color: var(--text-3); border: 1px solid var(--border); }
+.badge.m-ai     { background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-border); }
+.badge.m-warn   { background: var(--pixel-soft); color: var(--pixel); border: 1px solid var(--pixel-border); }
+.badge.m-pixel  { background: var(--pixel-soft); color: var(--pixel); border: 1px solid var(--pixel-border); }
+.badge.m-pass   { background: var(--pass-soft); color: var(--pass); border: 1px solid var(--pass-border); }
+.badge.m-fail   { background: var(--fail-soft); color: var(--fail); border: 1px solid var(--fail-border); }
+.badge.m-base   { background: var(--base-soft); color: var(--base); border: 1px solid var(--base-border); }
+
+.chev { font-size: 16px; color: var(--text-3); flex-shrink: 0; line-height: 1; transition: transform .2s; display: inline-block; }
+.chev.open { transform: rotate(90deg); }
+
+/* ── Detail panel ── */
+.test-detail { border-top: 1px solid var(--border); padding: 18px 14px 18px 33px; display: none; }
+
+.verdict {
+  background: var(--accent-soft); border-left: 3px solid var(--accent);
+  border-radius: 0 6px 6px 0; padding: 12px 14px; margin-bottom: 18px;
+}
+.verdict-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: 1.8px; color: var(--accent); font-weight: 600; margin-bottom: 7px; }
+.verdict-txt { font-size: 12.5px; color: var(--text-2); line-height: 1.75; }
+
+/* ── Visual comparison tabs ── */
+.view-tabs {
+  display: flex; gap: 2px; margin-bottom: 12px;
+  background: var(--surface-2); border: 1px solid var(--border);
+  border-radius: 6px; padding: 2px; width: fit-content;
+}
+.view-tab {
+  background: none; border: none; cursor: pointer;
+  padding: 4px 13px; border-radius: 4px;
+  font-size: 11px; font-family: inherit; font-weight: 500;
+  color: var(--text-2); transition: all .12s; white-space: nowrap;
+}
+.view-tab:hover { color: var(--text); }
+.view-tab.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
+.view-tab.diff-tab.on { color: var(--fail); }
+
+/* ── Image views ── */
+.img-section { }
+.img-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--text-3); font-weight: 500; margin-bottom: 12px; }
+.img-view { }
+.view-img {
+  width: 100%; display: block; border-radius: 6px; border: 1px solid var(--border);
+  max-height: 360px; object-fit: contain; object-position: top center;
+  background: var(--surface-2); cursor: zoom-in;
+  transition: border-color .15s;
+}
+.view-img:hover { border-color: var(--text-3); }
+canvas.view-img { image-rendering: pixelated; }
+
+.diff-placeholder {
+  padding: 28px 20px; text-align: center;
+  color: var(--text-3); font-size: 12px;
+  background: var(--surface-2); border-radius: 6px;
+  border: 1px dashed var(--border);
+}
+.diff-generating {
+  padding: 28px 20px; text-align: center;
+  color: var(--text-3); font-size: 12px;
+  background: var(--surface-2); border-radius: 6px;
+  border: 1px solid var(--border);
+}
+.diff-unavailable {
+  padding: 18px 20px; font-size: 11.5px; line-height: 1.8;
+  color: var(--text-2); background: var(--surface-2);
+  border-radius: 6px; border: 1px solid var(--border);
+}
+.diff-unavailable code {
+  font-family: ui-monospace, monospace; font-size: 10.5px;
+  background: var(--bg); padding: 1px 5px; border-radius: 3px;
+  border: 1px solid var(--border);
+}
+
+/* pass-images: hidden by default, shown via body class */
+.pass-imgs { display: none; }
+body.show-pass .pass-imgs { display: block; }
+
+/* ── Lightbox ── */
+.lb-overlay {
+  position: fixed; inset: 0; z-index: 9000;
+  background: rgba(0,0,0,.93);
+  display: flex; align-items: center; justify-content: center;
+  opacity: 0; pointer-events: none;
+  transition: opacity .18s ease;
+}
+.lb-overlay.open { opacity: 1; pointer-events: all; }
+
+.lb-inner {
+  position: absolute; inset: 0;
+  display: flex; align-items: center; justify-content: center;
+  overflow: hidden;
+}
+.lb-img-wrap {
+  display: flex; align-items: center; justify-content: center;
+  transform-origin: center center;
+  cursor: grab; user-select: none;
+  will-change: transform;
+}
+.lb-img-wrap.dragging { cursor: grabbing; }
+.lb-img-wrap img,
+.lb-img-wrap canvas {
+  display: block;
+  max-width: none;
+  pointer-events: none;
+  border-radius: 3px;
+}
+
+.lb-close {
+  position: absolute; top: 16px; right: 20px; z-index: 10;
+  width: 38px; height: 38px; border-radius: 50%;
+  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18);
+  color: #fff; font-size: 20px; line-height: 1;
+  cursor: pointer; display: flex; align-items: center; justify-content: center;
+  transition: background .15s; backdrop-filter: blur(8px);
+}
+.lb-close:hover { background: rgba(255,255,255,.22); }
+
+.lb-zoom-label {
+  position: absolute; top: 20px; left: 20px; z-index: 10;
+  font-size: 11px; font-weight: 600; color: rgba(255,255,255,.7);
+  background: rgba(0,0,0,.45); padding: 3px 9px; border-radius: 4px;
+  backdrop-filter: blur(8px); pointer-events: none;
+  font-family: ui-monospace, monospace;
+}
+.lb-hint {
+  position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
+  font-size: 11px; color: rgba(255,255,255,.32); pointer-events: none;
+  white-space: nowrap; letter-spacing: .2px;
+}
+
+/* ── Footer ── */
+.ftr { border-top: 1px solid var(--border); padding: 18px 0; text-align: center; font-size: 11px; color: var(--text-3); }
+.ftr strong { color: var(--accent); font-weight: 600; }
+
+/* ── Responsive ── */
+@media (max-width: 560px) {
+  .stat-val { font-size: 22px; }
+  .badges { display: none; }
+  .run-at { display: none; }
+  .lb-hint { display: none; }
+}
+`.trim();
+}
+// ─── JS App ──────────────────────────────────────────────────────────────────
+// IMPORTANT: No ${...} template literals inside this string — TypeScript would interpolate them.
+// Use string concatenation and unicode escapes instead.
+function getJs() {
+    return `
+(function () {
+  'use strict';
+
+  var RESULTS = JSON.parse(document.getElementById('bv-r').textContent);
+  var META    = JSON.parse(document.getElementById('bv-m').textContent);
+
+  /* ── State ── */
+  var state = {
+    theme:       localStorage.getItem('bv-theme') || 'system',
+    showPassImg: localStorage.getItem('bv-pass-img') === 'true'
+  };
+
+  /* ── Lightbox state ── */
+  var lb = {
+    overlay: null, inner: null, wrap: null, zoomLbl: null,
+    scale: 1, tx: 0, ty: 0,
+    minScale: 0.05, maxScale: 20,
+    dragging: false, startX: 0, startY: 0, startTx: 0, startTy: 0,
+    pinchDist: 0, pinchScale: 1
+  };
+
+  /* ── Utils ── */
+  function esc(s) {
+    if (s == null) return '';
+    return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
+  }
+  function trunc(s, n) { return s.length > n ? s.slice(0, n) + '\\u2026' : s; }
+  function fmtDate(iso) {
+    return new Date(iso).toLocaleString(undefined, {
+      weekday:'short', year:'numeric', month:'short', day:'numeric',
+      hour:'2-digit', minute:'2-digit', second:'2-digit'
+    });
+  }
+
+  /* ── Theme ── */
+  function resolveTheme() {
+    return state.theme === 'system'
+      ? (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
+      : state.theme;
+  }
+  function applyTheme() {
+    document.documentElement.setAttribute('data-theme', resolveTheme());
+  }
+
+  /* ── Pixel diff engine (100% client-side, zero server calls) ── */
+
+  /* Weighted squared RGB distance — perceptually accurate, fast (no sqrt needed) */
+  function colorDist(r1, g1, b1, r2, g2, b2) {
+    var rd = r1 - r2, gd = g1 - g2, bd = b1 - b2;
+    return rd * rd * 0.299 + gd * gd * 0.587 + bd * bd * 0.114;
+  }
+
+  /* Render diff image: changed pixels = neon red, unchanged = desaturated baseline */
+  function renderDiff(d1, d2, w, h) {
+    var n   = w * h * 4;
+    var out = new Uint8ClampedArray(n);
+    var thr = 900; /* squared perceptual threshold */
+    for (var i = 0; i < n; i += 4) {
+      if (colorDist(d1[i], d1[i+1], d1[i+2], d2[i], d2[i+1], d2[i+2]) > thr) {
+        /* neon red highlight */
+        out[i] = 220; out[i+1] = 38; out[i+2] = 38; out[i+3] = 255;
+      } else {
+        /* desaturated baseline — guides the eye to red pixels */
+        var lum = (d1[i] * 77 + d1[i+1] * 150 + d1[i+2] * 29) >> 8;
+        out[i] = lum; out[i+1] = lum; out[i+2] = lum; out[i+3] = 210;
+      }
+    }
+    return new ImageData(out, w, h);
+  }
+
+  /* Load image and extract raw pixel data via canvas */
+  function loadImgPixels(url, cb) {
+    var img = new Image();
+    img.crossOrigin = 'anonymous';
+    img.onload = function () {
+      var c   = document.createElement('canvas');
+      c.width = img.naturalWidth; c.height = img.naturalHeight;
+      var ctx = c.getContext('2d', { willReadFrequently: true });
+      ctx.drawImage(img, 0, 0);
+      try {
+        cb(null, ctx.getImageData(0, 0, c.width, c.height), c.width, c.height);
+      } catch (e) {
+        cb(e, null, 0, 0);
+      }
+    };
+    img.onerror = function () { cb(new Error('img-load'), null, 0, 0); };
+    img.src = url;
+  }
+
+  var diffCache = {};
+
+  function genDiff(idx, baseUrl, curUrl, container) {
+    /* Return cached result if already computed */
+    if (diffCache[idx]) {
+      var cached = diffCache[idx];
+      var clone  = document.createElement('canvas');
+      clone.width  = cached.width;
+      clone.height = cached.height;
+      clone.getContext('2d').drawImage(cached, 0, 0);
+      clone.className = 'view-img';
+      clone.setAttribute('data-lb', 'diff');
+      clone.setAttribute('data-lb-idx', String(idx));
+      container.innerHTML = '';
+      container.appendChild(clone);
+      return;
+    }
+
+    container.innerHTML = '<div class="diff-generating">Generating diff\u2026</div>';
+
+    loadImgPixels(baseUrl, function (e1, d1, w1, h1) {
+      if (e1) {
+        container.innerHTML = '<div class="diff-unavailable">'
+          + '<strong>\uD83D\uDD12 Diff unavailable</strong> \u2014 canvas pixel access is blocked when opening as a local file.<br>'
+          + 'Serve the report via HTTP to enable it:<br>'
+          + '<code>cd bhv-report &amp;&amp; npx serve .</code>'
+          + '</div>';
+        return;
+      }
+      loadImgPixels(curUrl, function (e2, d2, w2, h2) {
+        if (e2) {
+          container.innerHTML = '<div class="diff-unavailable">Could not load current screenshot.</div>';
+          return;
+        }
+        var fw   = Math.min(w1, w2);
+        var fh   = Math.min(h1, h2);
+        var diff = renderDiff(d1.data, d2.data, fw, fh);
+        var cv   = document.createElement('canvas');
+        cv.width = fw; cv.height = fh;
+        cv.getContext('2d').putImageData(diff, 0, 0);
+        diffCache[idx] = cv;
+        cv.className = 'view-img';
+        cv.setAttribute('data-lb', 'diff');
+        cv.setAttribute('data-lb-idx', String(idx));
+        container.innerHTML = '';
+        container.appendChild(cv);
+      });
+    });
+  }
+
+  /* ── Lightbox ── */
+
+  function lbApply() {
+    lb.wrap.style.transform = 'translate(' + lb.tx + 'px,' + lb.ty + 'px) scale(' + lb.scale + ')';
+    if (lb.zoomLbl) lb.zoomLbl.textContent = Math.round(lb.scale * 100) + '%';
+  }
+
+  function lbReset() { lb.scale = 1; lb.tx = 0; lb.ty = 0; lbApply(); }
+
+  /* Zoom towards a viewport-center-relative point (mx, my) */
+  function lbZoom(factor, mx, my) {
+    var ns  = Math.max(lb.minScale, Math.min(lb.maxScale, lb.scale * factor));
+    var r   = ns / lb.scale;
+    lb.tx   = mx * (1 - r) + lb.tx * r;
+    lb.ty   = my * (1 - r) + lb.ty * r;
+    lb.scale = ns;
+    lbApply();
+  }
+
+  /* Auto-fit: scale image to fill viewport on first open */
+  function lbAutoFit(w, h) {
+    var vw = lb.inner.clientWidth  - 48;
+    var vh = lb.inner.clientHeight - 48;
+    lb.scale = Math.min(1, vw / w, vh / h);
+    lb.tx = 0; lb.ty = 0;
+    lbApply();
+  }
+
+  function lbOpen(type, payload) {
+    lb.scale = 1; lb.tx = 0; lb.ty = 0;
+    lb.wrap.innerHTML = '';
+    var el;
+    if (type === 'img') {
+      el = new Image();
+      el.draggable  = false;
+      el.style.maxWidth = 'none';
+      el.style.display  = 'block';
+      el.onload = function () { lbAutoFit(el.naturalWidth, el.naturalHeight); };
+      el.src = payload;
+    } else {
+      /* diff canvas */
+      var src = diffCache[payload];
+      if (!src) return;
+      el = document.createElement('canvas');
+      el.width  = src.width;
+      el.height = src.height;
+      el.style.maxWidth = 'none';
+      el.style.display  = 'block';
+      el.getContext('2d').drawImage(src, 0, 0);
+      lb.wrap.appendChild(el);
+      lb.overlay.classList.add('open');
+      document.body.style.overflow = 'hidden';
+      lbAutoFit(src.width, src.height);
+      return;
+    }
+    lb.wrap.appendChild(el);
+    lb.overlay.classList.add('open');
+    document.body.style.overflow = 'hidden';
+    lbApply();
+  }
+
+  function lbClose() {
+    lb.overlay.classList.remove('open');
+    document.body.style.overflow = '';
+    setTimeout(function () { if (lb.wrap) lb.wrap.innerHTML = ''; }, 220);
+  }
+
+  function lbCenterPos(e) {
+    var r = lb.inner.getBoundingClientRect();
+    return { x: e.clientX - r.left - r.width / 2, y: e.clientY - r.top - r.height / 2 };
+  }
+
+  function initLightbox() {
+    var ov = document.createElement('div');
+    ov.id        = 'lb-overlay';
+    ov.className = 'lb-overlay';
+    ov.innerHTML = '<div class="lb-inner"><div class="lb-img-wrap"></div></div>'
+      + '<button class="lb-close" title="Close (Esc)">\u00D7</button>'
+      + '<div class="lb-zoom-label">100%</div>'
+      + '<div class="lb-hint">Scroll / pinch to zoom \u00B7 Drag to pan \u00B7 Dbl-click to reset \u00B7 Esc to close</div>';
+    document.body.appendChild(ov);
+
+    lb.overlay = ov;
+    lb.inner   = ov.querySelector('.lb-inner');
+    lb.wrap    = ov.querySelector('.lb-img-wrap');
+    lb.zoomLbl = ov.querySelector('.lb-zoom-label');
+
+    /* close button */
+    ov.querySelector('.lb-close').addEventListener('click', lbClose);
+
+    /* click on backdrop (not on image) */
+    lb.inner.addEventListener('click', function (e) {
+      if (e.target === lb.inner) lbClose();
+    });
+
+    /* double-click: reset zoom */
+    lb.inner.addEventListener('dblclick', function (e) {
+      e.preventDefault();
+      lbReset();
+    });
+
+    /* scroll-to-zoom */
+    lb.inner.addEventListener('wheel', function (e) {
+      e.preventDefault();
+      var p = lbCenterPos(e);
+      lbZoom(e.deltaY < 0 ? 1.12 : 1 / 1.12, p.x, p.y);
+    }, { passive: false });
+
+    /* mouse drag: pan */
+    lb.inner.addEventListener('mousedown', function (e) {
+      if (e.button !== 0) return;
+      lb.dragging = true;
+      lb.startX = e.clientX; lb.startY = e.clientY;
+      lb.startTx = lb.tx;    lb.startTy = lb.ty;
+      lb.wrap.classList.add('dragging');
+      e.preventDefault();
+    });
+    window.addEventListener('mousemove', function (e) {
+      if (!lb.dragging) return;
+      lb.tx = lb.startTx + (e.clientX - lb.startX);
+      lb.ty = lb.startTy + (e.clientY - lb.startY);
+      lbApply();
+    });
+    window.addEventListener('mouseup', function () {
+      if (!lb.dragging) return;
+      lb.dragging = false;
+      lb.wrap.classList.remove('dragging');
+    });
+
+    /* touch: pan + pinch-to-zoom */
+    lb.inner.addEventListener('touchstart', function (e) {
+      if (e.touches.length === 2) {
+        var dx = e.touches[0].clientX - e.touches[1].clientX;
+        var dy = e.touches[0].clientY - e.touches[1].clientY;
+        lb.pinchDist  = Math.sqrt(dx * dx + dy * dy);
+        lb.pinchScale = lb.scale;
+        lb.dragging   = false;
+      } else {
+        lb.dragging = true;
+        lb.startX  = e.touches[0].clientX; lb.startY  = e.touches[0].clientY;
+        lb.startTx = lb.tx;                lb.startTy = lb.ty;
+      }
+    }, { passive: true });
+    lb.inner.addEventListener('touchmove', function (e) {
+      if (e.touches.length === 2) {
+        e.preventDefault();
+        var dx = e.touches[0].clientX - e.touches[1].clientX;
+        var dy = e.touches[0].clientY - e.touches[1].clientY;
+        var d  = Math.sqrt(dx * dx + dy * dy);
+        lb.scale = Math.max(lb.minScale, Math.min(lb.maxScale, lb.pinchScale * d / lb.pinchDist));
+        lbApply();
+      } else if (lb.dragging) {
+        lb.tx = lb.startTx + (e.touches[0].clientX - lb.startX);
+        lb.ty = lb.startTy + (e.touches[0].clientY - lb.startY);
+        lbApply();
+      }
+    }, { passive: false });
+    lb.inner.addEventListener('touchend', function () { lb.dragging = false; }, { passive: true });
+
+    /* keyboard shortcuts */
+    document.addEventListener('keydown', function (e) {
+      if (!lb.overlay.classList.contains('open')) return;
+      if (e.key === 'Escape') lbClose();
+      if (e.key === '0')      lbReset();
+    });
+  }
+
+  /* ── HTML builders ── */
+  function statusInfo(r) {
+    if (r.status === 'PASS')  return { cls:'s-pass', badge:'m-pass', label:'PASS' };
+    if (r.status === 'FAIL')  return { cls:'s-fail', badge:'m-fail', label:'FAIL' };
+    if (r.status === 'ERROR') return { cls:'s-warn', badge:'m-warn', label:'ERROR' };
+    return { cls:'s-base', badge:'m-base', label:'BASELINE' };
+  }
+  function methodLabel(r) {
+    if (r.status === 'BASELINE_CREATED') return 'NEW';
+    if (r.method === 'FAST_PIXEL_MATCH') return 'PIXEL';
+    return 'AI';
+  }
+  function methodBadgeCls(r) {
+    if (r.status === 'BASELINE_CREATED') return 'm-method';
+    if (r.status === 'ERROR')            return 'm-warn';
+    if (r.method === 'FAST_PIXEL_MATCH') return 'm-pixel';
+    return 'm-ai';
+  }
+
+  function buildImages(r) {
+    if (r.status === 'BASELINE_CREATED') {
+      var bUrl = '../bhv-snapshots/' + esc(r.baselineFile);
+      return '<div class="img-lbl">Saved baseline</div>'
+        + '<div style="max-width:540px">'
+        + '<img class="view-img" src="' + bUrl + '" alt="Baseline"'
+        + ' data-lb="img" data-lb-src="' + bUrl + '" /></div>';
+    }
+
+    var baseUrl  = '../bhv-snapshots/' + esc(r.baselineFile);
+    var curUrl   = r.currentFile ? '../bhv-snapshots/' + esc(r.currentFile) : '';
+    var hasCur   = !!r.currentFile;
+    var showDiff = hasCur && (r.status === 'FAIL' || r.status === 'ERROR');
+    var idx      = r.index;
+
+    var diffTab = showDiff
+      ? '<button class="view-tab diff-tab" data-tab="diff" data-tidx="' + idx + '">\u26A1 Diff</button>'
+      : '';
+    var tabs = hasCur
+      ? '<div class="view-tabs">'
+        + '<button class="view-tab on" data-tab="base" data-tidx="' + idx + '">Baseline</button>'
+        + '<button class="view-tab"    data-tab="cur"  data-tidx="' + idx + '">Current</button>'
+        + diffTab
+        + '</div>'
+      : '';
+
+    var basePanel = '<div class="img-view" id="vbase-' + idx + '">'
+      + '<img class="view-img" src="' + baseUrl + '" alt="Baseline"'
+      + ' data-lb="img" data-lb-src="' + baseUrl + '" /></div>';
+
+    var curPanel = hasCur
+      ? '<div class="img-view" id="vcur-' + idx + '" style="display:none">'
+        + '<img class="view-img" src="' + curUrl + '" alt="Current"'
+        + ' data-lb="img" data-lb-src="' + curUrl + '" /></div>'
+      : '';
+
+    var diffPanel = showDiff
+      ? '<div class="img-view" id="vdiff-' + idx + '" style="display:none"'
+        + ' data-base="' + baseUrl + '" data-cur="' + curUrl + '" data-ready="0">'
+        + '<div class="diff-placeholder">\u26A1 Click the Diff tab to generate a pixel-level comparison in your browser.</div>'
+        + '</div>'
+      : '';
+
+    return '<div class="img-lbl">Visual comparison</div>'
+      + tabs + basePanel + curPanel + diffPanel;
+  }
+
+  function buildDetail(r) {
+    var imgWrap    = r.status === 'PASS' ? 'img-section pass-imgs' : 'img-section';
+    var verdictLbl = r.method === 'FAST_PIXEL_MATCH'
+      ? '\u26A1 Fast Pixel Match'
+      : '\uD83E\uDD16 AI Verdict';
+    return '<div class="test-detail" id="d' + r.index + '">'
+      + '<div class="verdict">'
+        + '<div class="verdict-lbl">' + verdictLbl + '</div>'
+        + '<p class="verdict-txt">\u201C' + esc(r.reason) + '\u201D</p>'
+      + '</div>'
+      + '<div class="' + imgWrap + '">' + buildImages(r) + '</div>'
+      + '</div>';
+  }
+
+  function buildItem(r) {
+    var s         = statusInfo(r);
+    var method    = methodLabel(r);
+    var methodCls = methodBadgeCls(r);
+    var snip      = trunc(r.reason, 88);
+    return '<div class="test-item ' + s.cls + '">'
+      + '<div class="test-row" data-t="' + r.index + '">'
+        + '<div class="s-dot"></div>'
+        + '<div class="test-meta">'
+          + '<div class="test-name">' + esc(r.testName) + '</div>'
+          + '<div class="test-snip">'  + esc(snip)       + '</div>'
+        + '</div>'
+        + '<div class="badges">'
+          + '<span class="badge ' + methodCls + '">' + method   + '</span>'
+          + '<span class="badge ' + s.badge   + '">' + s.label  + '</span>'
+        + '</div>'
+        + '<span class="chev" id="c' + r.index + '">\u203A</span>'
+      + '</div>'
+      + buildDetail(r)
+      + '</div>';
+  }
+
+  function buildThemeBtns() {
+    var opts = [
+      { k:'system', lbl:'\u229E System' },
+      { k:'light',  lbl:'\u2600\uFE0E Light'  },
+      { k:'dark',   lbl:'\u263D Dark'   }
+    ];
+    return opts.map(function(o) {
+      return '<button class="t-btn' + (state.theme === o.k ? ' on' : '') + '" data-th="' + o.k + '">' + o.lbl + '</button>';
+    }).join('');
+  }
+
+  function buildApp() {
+    var ts        = fmtDate(META.generatedAt);
+    var hasFail   = META.failed > 0;
+    var hasBase   = META.baselines > 0;
+    var hasErrors = META.errored > 0;
+    var imgOn     = state.showPassImg ? ' on' : '';
+    var failCls   = hasFail ? ' s-fail' : ' s-neutral';
+    var baseStat  = hasBase
+      ? '<div class="stat s-base"><div class="stat-lbl">Baselines</div><div class="stat-val">' + META.baselines + '</div></div>'
+      : '';
+    var warnStat  = hasErrors
+      ? '<div class="stat s-warn"><div class="stat-lbl">Errors</div><div class="stat-val">' + META.errored + '</div></div>'
+      : '';
+    var warnFilter = hasErrors
+      ? '<button class="f-btn" data-f="warn">Errors (' + META.errored + ')</button>'
+      : '';
+    var items     = RESULTS.map(buildItem).join('');
+
+    return '<header class="hdr">'
+        + '<div class="wrap"><div class="hdr-inner">'
+          + '<div class="logo">'
+            + '<span class="logo-bug">\uD83D\uDC1E</span>'
+            + '<span class="logo-name">BugHunters Vision</span>'
+            + '<span class="run-at" id="run-at">' + esc(ts) + '</span>'
+          + '</div>'
+          + '<div class="t-toggle" id="t-toggle">' + buildThemeBtns() + '</div>'
+        + '</div></div>'
+      + '</header>'
+      + '<div class="wrap">'
+        + '<div class="summary">'
+          + '<div class="stat"><div class="stat-lbl">Total</div><div class="stat-val">'   + META.total   + '</div></div>'
+          + '<div class="stat s-pass"><div class="stat-lbl">Passed</div><div class="stat-val">' + META.passed + '</div></div>'
+          + '<div class="stat' + failCls + '"><div class="stat-lbl">Failed</div><div class="stat-val">' + META.failed + '</div></div>'
+          + warnStat
+          + baseStat
+        + '</div>'
+        + '<div class="controls">'
+          + '<div class="f-group">'
+            + '<button class="f-btn on" data-f="all">All (' + META.total  + ')</button>'
+            + '<button class="f-btn"    data-f="pass">Passed ('  + META.passed + ')</button>'
+            + '<button class="f-btn"    data-f="fail">Failed ('  + META.failed + ')</button>'
+            + warnFilter
+          + '</div>'
+          + '<button id="img-btn" class="img-btn' + imgOn + '">'
+            + '<div class="sw-track"><div class="sw-thumb"></div></div>'
+            + 'Screenshots on pass'
+          + '</button>'
+        + '</div>'
+        + '<div class="test-list" id="tlist">' + items + '</div>'
+      + '</div>'
+      + '<footer class="ftr">Generated by <strong>BugHunters Vision</strong> \u00B7 AI-powered visual testing \u00B7 Images from local disk</footer>';
+  }
+
+  /* ── Events ── */
+  function bind() {
+    var tlist = document.getElementById('tlist');
+
+    /* accordion expand/collapse — only fires from .test-row[data-t] */
+    tlist.addEventListener('click', function (e) {
+      var row = e.target.closest('[data-t]');
+      if (!row) return;
+      var idx     = row.getAttribute('data-t');
+      var detail  = document.getElementById('d' + idx);
+      var chevron = document.getElementById('c' + idx);
+      if (!detail) return;
+      var open = detail.style.display !== 'none';
+      detail.style.display = open ? 'none' : 'block';
+      if (chevron) chevron.classList.toggle('open', !open);
+    });
+
+    /* view-tab switching: Baseline / Current / Diff */
+    tlist.addEventListener('click', function (e) {
+      var tab = e.target.closest('[data-tab]');
+      if (!tab) return;
+      var tidx    = tab.getAttribute('data-tidx');
+      var tabName = tab.getAttribute('data-tab');
+      /* update active tab */
+      tab.closest('.view-tabs').querySelectorAll('.view-tab').forEach(function (t) {
+        t.classList.toggle('on', t === tab);
+      });
+      /* show correct panel, hide others */
+      ['base', 'cur', 'diff'].forEach(function (key) {
+        var panel = document.getElementById('v' + key + '-' + tidx);
+        if (panel) panel.style.display = key === tabName ? '' : 'none';
+      });
+      /* lazy diff generation — only on first click */
+      if (tabName === 'diff') {
+        var dp = document.getElementById('vdiff-' + tidx);
+        if (dp && dp.getAttribute('data-ready') === '0') {
+          dp.setAttribute('data-ready', '1');
+          genDiff(tidx, dp.getAttribute('data-base'), dp.getAttribute('data-cur'), dp);
+        }
+      }
+    });
+
+    /* image / diff-canvas click → open lightbox */
+    tlist.addEventListener('click', function (e) {
+      var el = e.target.closest('[data-lb]');
+      if (!el) return;
+      var type = el.getAttribute('data-lb');
+      if (type === 'img')  lbOpen('img',  el.getAttribute('data-lb-src'));
+      if (type === 'diff') lbOpen('diff', el.getAttribute('data-lb-idx'));
+    });
+
+    /* theme */
+    document.getElementById('t-toggle').addEventListener('click', function (e) {
+      var btn = e.target.closest('[data-th]');
+      if (!btn) return;
+      state.theme = btn.getAttribute('data-th');
+      localStorage.setItem('bv-theme', state.theme);
+      applyTheme();
+      document.querySelectorAll('[data-th]').forEach(function (b) {
+        b.classList.toggle('on', b.getAttribute('data-th') === state.theme);
+      });
+    });
+
+    /* screenshots on pass toggle */
+    document.getElementById('img-btn').addEventListener('click', function () {
+      state.showPassImg = !state.showPassImg;
+      localStorage.setItem('bv-pass-img', String(state.showPassImg));
+      document.body.classList.toggle('show-pass', state.showPassImg);
+      this.classList.toggle('on', state.showPassImg);
+    });
+
+    /* filter */
+    document.querySelectorAll('[data-f]').forEach(function (btn) {
+      btn.addEventListener('click', function () {
+        var f = btn.getAttribute('data-f');
+        document.querySelectorAll('[data-f]').forEach(function (b) {
+          b.classList.toggle('on', b.getAttribute('data-f') === f);
+        });
+        document.querySelectorAll('.test-item').forEach(function (el) {
+          var show = f === 'all'
+            || (f === 'pass' && el.classList.contains('s-pass'))
+            || (f === 'fail' && el.classList.contains('s-fail'))
+            || (f === 'warn' && el.classList.contains('s-warn'));
+          el.style.display = show ? '' : 'none';
+        });
+      });
+    });
+  }
+
+  /* ── Init ── */
+  applyTheme();
+  document.getElementById('root').innerHTML = buildApp();
+  if (state.showPassImg) document.body.classList.add('show-pass');
+  bind();
+  initLightbox();
+  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function () {
+    if (state.theme === 'system') applyTheme();
+  });
+
+})();
+`.trim();
+}
+// ─── HTML Assembly ───────────────────────────────────────────────────────────
+function generateHTML(results, meta) {
+    const resultsJson = JSON.stringify(results);
+    const metaJson = JSON.stringify(meta);
+    const svgPass = encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><rect width="32" height="32" rx="6" fill="#1a2e22"/><path d="M7 16.5L13 22L25 10" stroke="#73c991" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>');
+    const svgFail = encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><rect width="32" height="32" rx="6" fill="#2a1515"/><path d="M10 10L22 22M22 10L10 22" stroke="#f14c4c" stroke-width="3" stroke-linecap="round"/></svg>');
+    const faviconHref = `data:image/svg+xml,${meta.failed > 0 ? svgFail : svgPass}`;
+    return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>BugHunters Vision Report</title>
+  <link rel="icon" type="image/svg+xml" href="${faviconHref}">
+  <!-- Flash prevention: apply saved theme before CSS paint -->
+  <script>
+    (function(){
+      var t = localStorage.getItem('bv-theme') || 'system';
+      var d = t === 'system' ? (matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light') : t;
+      document.documentElement.setAttribute('data-theme', d);
+    })();
+  </script>
+  <style>${getCss()}</style>
+</head>
+<body>
+  <div id="root"></div>
+  <script type="application/json" id="bv-r">${resultsJson}</script>
+  <script type="application/json" id="bv-m">${metaJson}</script>
+  <script>${getJs()}</script>
+</body>
+</html>`;
+}
+// ─── Reporter class ───────────────────────────────────────────────────────────
+class BugHuntersVisionReporter {
+    snapshotsDir;
+    reportDir;
+    constructor(options) {
+        this.snapshotsDir = path.resolve(process.cwd(), options?.snapshotsDir ?? './bhv-snapshots');
+        this.reportDir = path.resolve(process.cwd(), options?.reportDir ?? './bhv-report');
+    }
+    onBegin() {
+        fs.mkdirSync(this.snapshotsDir, { recursive: true });
+        fs.writeFileSync(path.join(this.snapshotsDir, 'results.json'), '[]', 'utf-8');
+    }
+    onEnd() {
+        const resultsPath = path.join(this.snapshotsDir, 'results.json');
+        if (!fs.existsSync(resultsPath)) {
+            console.log('\n\u26A0\uFE0F  [BugHunters Vision] No results — skipping report generation.\n');
+            return;
+        }
+        const raw = fs.readFileSync(resultsPath, 'utf-8').trim();
+        if (!raw || raw === '[]') {
+            console.log('\n\u26A0\uFE0F  [BugHunters Vision] No results — skipping report generation.\n');
+            return;
+        }
+        const results = JSON.parse(raw);
+        const passed = results.filter(r => r.status === 'PASS').length;
+        const failed = results.filter(r => r.status === 'FAIL').length;
+        const baselines = results.filter(r => r.status === 'BASELINE_CREATED').length;
+        const errored = results.filter(r => r.status === 'ERROR').length;
+        const meta = {
+            generatedAt: new Date().toISOString(),
+            total: results.length,
+            passed,
+            failed,
+            baselines,
+            errored,
+        };
+        const reportPath = path.join(this.reportDir, 'index.html');
+        fs.mkdirSync(this.reportDir, { recursive: true });
+        fs.writeFileSync(reportPath, generateHTML(results, meta), 'utf-8');
+        console.log('\n\uD83D\uDC1E BugHunters Vision Report generated:');
+        console.log('   \uD83D\uDCC4 ' + reportPath);
+        const erroredStr = errored > 0 ? '  \u26A0\uFE0F ' + errored + ' errored' : '';
+        console.log('   \u2705 ' + passed + ' passed  \u274C ' + failed + ' failed' + erroredStr + '  (' + results.length + ' total)');
+        // Show remaining API balance if an AI call was made this run
+        const balance = (0, check_1.getLastRemainingBalance)();
+        if (balance !== null) {
+            const balanceStr = balance === 'Unlimited' ? '\x1b[32mUnlimited\x1b[0m' : '\x1b[36m' + balance + ' tokens\x1b[0m';
+            console.log('\n\uD83D\uDC1E BugHunters Vision: AI Evaluation complete. Remaining API balance: ' + balanceStr);
+        }
+        console.log('');
+    }
+}
+exports.BugHuntersVisionReporter = BugHuntersVisionReporter;
+exports.default = BugHuntersVisionReporter;