@extenshi/cli 0.0.9 → 0.3.0

package/dist/html-report.js

@@ -0,0 +1,726 @@
+/**
+ * Branded, self-contained HTML report renderer for `extenshi scan --format html`.
+ *
+ * Pure (no I/O) so it is snapshot-testable — returns a complete single-file
+ * HTML document with inline CSS, inline JS, and the inline Extenshi logo. No
+ * network access, no external assets: the file opens straight from disk
+ * (file://) and works fully offline.
+ *
+ * Why this exists
+ * ---------------
+ * The terminal report repeats the same rule across dozens of files, producing a
+ * wall of near-identical lines. The HTML report DEDUPLICATES: security findings
+ * are grouped by (severity, scanner, rule) into one collapsible row carrying a
+ * count and the list of locations. On top of that it adds client-side filtering
+ * (by severity, by scanner, free-text), a sticky table of contents, and a
+ * light/dark theme toggle in the real extenshi.io palette.
+ *
+ * Schema tolerance is inherited wholesale from `summarizeReport` /
+ * `summarizeCompliance` in render.ts — this module never reads the raw scan
+ * shape directly, so it stays correct across scanner-output drift.
+ */
+import { STORE_IMPACT_SHORT, severityRank, summarizeCompliance, summarizeReport, } from './render.js';
+import { computeVerdict } from './report.js';
+import { scannerDisplayName } from './scanner-names.js';
+// ── HTML escaping ───────────────────────────────────────────────────────────
+const ESCAPE_MAP = {
+    '&': '&',
+    '<': '&lt;',
+    '>': '&gt;',
+    '"': '&quot;',
+    "'": '&#39;',
+};
+/** Escape a string for safe interpolation into text or double-quoted attributes. */
+function esc(s) {
+    return s.replace(/[&<>"']/g, (c) => ESCAPE_MAP[c] ?? c);
+}
+/**
+ * Sanitise an untrusted value used as a CSS class-name fragment (e.g.
+ * `sev-${...}`). `esc()` neutralises HTML but not whitespace, which would split
+ * one class into several tokens; this keeps only class-safe characters so a
+ * future severity/storeImpact value from the API can never inject extra classes.
+ */
+function cssToken(s) {
+    return s.replace(/[^a-zA-Z0-9_-]/g, '_');
+}
+/**
+ * JSON-encode a value for safe inlining inside a `<script>` tag. Escapes `<` (so
+ * a `</script>` in the data can't break out) and the U+2028/U+2029 line
+ * separators that are valid in JSON strings but illegal in JS string literals.
+ */
+function jsonForScript(value) {
+    return JSON.stringify(value)
+        .replace(/</g, '\\u003c')
+        .replace(/\u2028/g, '\\u2028')
+        .replace(/\u2029/g, '\\u2029');
+}
+/** Hard cap on locations rendered per group — a noisy rule can fire thousands of times. */
+const MAX_LOCATIONS_PER_GROUP = 200;
+/**
+ * Collapse identical findings (same severity + scanner + rule headline) into one
+ * group with a count and the de-duplicated list of locations. Sorted by
+ * severity (critical first), then by count (loudest first), then headline.
+ *
+ * Dedup uses a `Set` (insertion-ordered) rather than `Array.includes` so a rule
+ * that fires thousands of times stays O(n) instead of O(n²).
+ */
+export function groupFindings(findings) {
+    const map = new Map();
+    for (const f of findings) {
+        const key = `${f.severity}\n${f.scanner}\n${f.headline}`;
+        let g = map.get(key);
+        if (!g) {
+            g = {
+                severity: f.severity,
+                scanner: f.scanner,
+                headline: f.headline,
+                message: f.message,
+                count: 0,
+                locations: new Set(),
+                extras: new Set(),
+            };
+            map.set(key, g);
+        }
+        g.count++;
+        if (!g.message && f.message)
+            g.message = f.message;
+        if (f.location)
+            g.locations.add(f.location);
+        if (f.extras)
+            g.extras.add(f.extras);
+    }
+    // Materialise the Sets to arrays (Set preserves first-seen order).
+    return [...map.values()]
+        .map((g) => ({
+        severity: g.severity,
+        scanner: g.scanner,
+        headline: g.headline,
+        message: g.message,
+        count: g.count,
+        locations: [...g.locations],
+        extras: [...g.extras],
+    }))
+        .sort((a, b) => severityRank(a.severity) - severityRank(b.severity) ||
+        b.count - a.count ||
+        a.headline.localeCompare(b.headline));
+}
+// ── Static brand assets ──────────────────────────────────────────────────────
+/**
+ * The Extenshi mark, lifted verbatim from catalog-frontend/src/components/logo.tsx.
+ * `fill="currentColor"` lets it pick up the brand colour from CSS in either theme.
+ */
+const LOGO_SVG = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" width="28" height="28" aria-hidden="true">' +
+    '<g transform="translate(200, 200) scale(1.1) translate(-219, -169)">' +
+    '<path fill="currentColor" fill-rule="evenodd" d="M 43 29.961 C 43 32.246, 47.125 48.247, 49.888 56.680 C 55.762 74.610, 62.198 83.944, 72.096 88.890 C 78.191 91.936, 78.614 92, 92.660 92 L 107 92 106.994 96.250 C 106.991 98.588, 106.697 104.233, 106.342 108.795 L 105.697 117.091 92.098 116.996 C 84.619 116.943, 77.938 116.923, 77.250 116.950 C 76.300 116.988, 76 121.193, 76 134.500 L 76 152 90.487 152 L 104.974 152 104.449 159.250 C 104.161 163.237, 103.503 174.150, 102.987 183.500 C 102.472 192.850, 101.387 211.300, 100.578 224.500 C 98.475 258.794, 96.671 304.700, 97.356 306.487 C 97.875 307.839, 111.424 307.980, 219.220 307.754 L 340.500 307.500 340.255 287.609 C 340.096 274.661, 339.617 267.243, 338.883 266.359 C 338.004 265.299, 333.491 265, 318.397 265 L 299.038 265 298.411 267.500 C 298.066 268.875, 298.066 271.125, 298.411 272.500 L 299.038 275 222.519 275 L 146 275 146 213.500 L 146 152 218.300 152 C 273.200 152, 290.889 152.289, 291.800 153.200 C 293.565 154.965, 293.269 163.776, 291.257 169.391 C 289.026 175.614, 283.255 182.192, 277.770 184.762 C 265.607 190.461, 266.274 190.383, 224.500 190.961 L 185.500 191.500 185.229 211.226 L 184.958 230.951 187.533 231.598 C 191.687 232.640, 262.673 231.320, 272.308 230.021 C 306.918 225.355, 331.983 202.503, 332.006 175.593 C 332.009 171.692, 332.300 164.799, 332.652 160.277 L 333.292 152.053 347.396 151.777 L 361.500 151.500 361.500 134.500 L 361.500 117.500 347.219 117.222 L 332.939 116.945 333.219 104.722 L 333.500 92.500 347.500 91.947 C 357.308 91.560, 362.626 90.900, 365.261 89.744 C 371.234 87.122, 379.834 78.279, 383.489 71 C 388.795 60.434, 397.405 31.072, 395.699 29.365 C 395.464 29.130, 391.723 30.083, 387.386 31.483 C 379.737 33.952, 356.811 38.101, 340.500 39.969 C 320.691 42.238, 283.099 43.185, 214.975 43.131 C 145.730 43.077, 109.789 42.106, 94.500 39.878 C 90.650 39.316, 84.575 38.430, 81 37.907 C 65.459 35.634, 56.790 33.817, 50.373 31.490 C 42.436 28.611, 43 28.728, 43 29.961 M 146.673 92.660 C 146.303 93.030, 146 98.658, 146 105.167 L 146 117 219.531 117 L 293.062 117 292.781 104.750 L 292.500 92.500 219.923 92.244 C 180.006 92.102, 147.043 92.290, 146.673 92.660"/>' +
+    '</g></svg>';
+/**
+ * Brand palette mirrors catalog-frontend globals.css (the real site tokens):
+ * a warm terracotta accent on a paper background in light mode, a green accent
+ * on near-black in dark mode. Fonts reference the site faces by name with a
+ * graceful system fallback (no webfont is bundled — keeps the file offline).
+ */
+const STYLE = `
+:root {
+	--bg: oklch(0.9711 0.0074 80.7211);
+	--surface: oklch(0.99 0.005 80);
+	--surface-2: oklch(0.937 0.0142 74.4218);
+	--fg: oklch(0.3 0.0358 30.2042);
+	--muted-fg: oklch(0.4495 0.0486 39.211);
+	--border: oklch(0.8805 0.0208 74.6428);
+	--primary: oklch(0.7234 0.1783 41.1468);
+	--primary-fg: oklch(1 0 0);
+	--shadow: 0 1px 3px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
+	--font-sans: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+	--font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
+	--sev-critical: #b42318;
+	--sev-high: #d92d20;
+	--sev-medium: #dc6803;
+	--sev-low: #1570ef;
+	--sev-info: #667085;
+	--sev-unknown: #98a2b3;
+	--pass: #157f3d;
+	--review: #dc6803;
+	--fail: #b42318;
+}
+html.dark {
+	--bg: oklch(0.1377 0.0167 150.7681);
+	--surface: oklch(0.1961 0.0163 146.9867);
+	--surface-2: oklch(0.2335 0.0184 146.9867);
+	--fg: oklch(0.9423 0.0097 72.6595);
+	--muted-fg: oklch(0.79 0.0174 76.0955);
+	--border: oklch(0.2644 0.0159 142.9926);
+	--primary: oklch(0.6731 0.1624 144.2083);
+	--primary-fg: oklch(0.2157 0.0453 145.7256);
+	--shadow: 0 1px 3px hsl(0 0% 0% / 0.4), 0 1px 2px -1px hsl(0 0% 0% / 0.4);
+	--sev-critical: #f97066;
+	--sev-high: #fda29b;
+	--sev-medium: #fdb022;
+	--sev-low: #53b1fd;
+	--sev-info: #98a2b3;
+	--sev-unknown: #667085;
+	--pass: #47cd89;
+	--review: #fdb022;
+	--fail: #f97066;
+}
+* { box-sizing: border-box; }
+html, body { margin: 0; padding: 0; }
+body {
+	background: var(--bg);
+	color: var(--fg);
+	font-family: var(--font-sans);
+	font-feature-settings: "ss01", "ss02", "cv11";
+	line-height: 1.5;
+	-webkit-font-smoothing: antialiased;
+}
+a { color: var(--primary); }
+code, .mono { font-family: var(--font-mono); font-size: 0.86em; }
+
+.topbar {
+	position: sticky; top: 0; z-index: 20;
+	display: flex; align-items: center; gap: 12px;
+	padding: 14px 24px;
+	background: color-mix(in oklab, var(--bg) 85%, transparent);
+	backdrop-filter: blur(8px);
+	border-bottom: 1px solid var(--border);
+}
+.topbar .logo { color: var(--primary); display: inline-flex; }
+.topbar .brand { font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em; }
+.topbar .sep { color: var(--muted-fg); }
+.topbar .subtitle { color: var(--muted-fg); font-size: 0.9rem; }
+.topbar .spacer { flex: 1; }
+.toggle {
+	display: inline-flex; align-items: center; gap: 6px;
+	border: 1px solid var(--border); background: var(--surface);
+	color: var(--fg); border-radius: 999px; padding: 6px 12px;
+	font: inherit; font-size: 0.85rem; cursor: pointer;
+}
+.toggle:hover { border-color: var(--primary); }
+
+.layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 32px; max-width: 1180px; margin: 0 auto; padding: 28px 24px 80px; }
+@media (max-width: 860px) { .layout { grid-template-columns: 1fr; } .nav { display: none; } }
+
+.nav { position: sticky; top: 76px; align-self: start; font-size: 0.9rem; }
+.nav a { display: flex; justify-content: space-between; gap: 8px; padding: 7px 10px; border-radius: 8px; color: var(--fg); text-decoration: none; }
+.nav a:hover { background: var(--surface-2); }
+.nav a .n { color: var(--muted-fg); font-variant-numeric: tabular-nums; }
+
+.meta { color: var(--muted-fg); font-size: 0.85rem; margin-bottom: 18px; }
+.meta .mono { color: var(--fg); }
+
+section.card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 20px 22px; margin-bottom: 22px; box-shadow: var(--shadow); }
+h2 { font-size: 1.15rem; margin: 0 0 14px; letter-spacing: -0.01em; }
+h2 .count { color: var(--muted-fg); font-weight: 500; font-size: 0.9rem; }
+
+.verdict { border-left: 5px solid var(--review); }
+.verdict.fail { border-left-color: var(--fail); }
+.verdict.review { border-left-color: var(--review); }
+.verdict.pass { border-left-color: var(--pass); }
+.verdict .headline { font-size: 1.3rem; font-weight: 700; margin: 0 0 6px; }
+.verdict.fail .headline { color: var(--fail); }
+.verdict.review .headline { color: var(--review); }
+.verdict.pass .headline { color: var(--pass); }
+.verdict .detail { color: var(--muted-fg); margin: 0; max-width: 70ch; }
+
+.stats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
+.stat { background: var(--surface-2); border-radius: 10px; padding: 10px 14px; min-width: 92px; }
+.stat .v { font-size: 1.4rem; font-weight: 700; font-variant-numeric: tabular-nums; }
+.stat .l { color: var(--muted-fg); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; }
+
+.gauge { margin-top: 16px; }
+.gauge .track { height: 10px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
+.gauge .fill { height: 100%; border-radius: 999px; }
+.gauge .label { display: flex; justify-content: space-between; font-size: 0.82rem; color: var(--muted-fg); margin-bottom: 6px; }
+
+.badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em; color: #fff; white-space: nowrap; }
+.badge.sev-CRITICAL { background: var(--sev-critical); }
+.badge.sev-HIGH { background: var(--sev-high); }
+.badge.sev-MEDIUM { background: var(--sev-medium); }
+.badge.sev-LOW { background: var(--sev-low); }
+.badge.sev-INFO { background: var(--sev-info); }
+.badge.sev-UNKNOWN { background: var(--sev-unknown); }
+html.dark .badge { color: #0b0f0c; }
+.badge.impact { background: var(--surface-2); color: var(--fg); border: 1px solid var(--border); }
+.badge.impact.REJECTION_LIKELY { background: var(--fail); color: #fff; border: none; }
+.badge.impact.REVIEW_FLAG { background: var(--review); color: #fff; border: none; }
+html.dark .badge.impact.REJECTION_LIKELY, html.dark .badge.impact.REVIEW_FLAG { color: #0b0f0c; }
+
+.compliance-item { border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; margin-bottom: 12px; }
+.compliance-item .head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
+.compliance-item .title { font-weight: 700; }
+.compliance-item .stores { color: var(--muted-fg); font-size: 0.8rem; }
+.compliance-item .why { color: var(--muted-fg); margin: 8px 0 0; }
+.compliance-item .fix { margin: 8px 0 0; }
+.compliance-item .evidence { margin: 10px 0 0; background: var(--surface-2); border-radius: 8px; padding: 8px 10px; overflow-x: auto; }
+.compliance-item .evidence pre { margin: 0; white-space: pre-wrap; word-break: break-word; }
+
+.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 16px; }
+.sev-chip { cursor: pointer; border: 1px solid transparent; opacity: 1; user-select: none; }
+.sev-chip.off { opacity: 0.32; filter: grayscale(0.6); }
+.filters input[type=search], .filters select {
+	font: inherit; font-size: 0.88rem; padding: 7px 11px; border-radius: 8px;
+	border: 1px solid var(--border); background: var(--surface); color: var(--fg);
+}
+.filters input[type=search] { flex: 1; min-width: 160px; }
+.filters .spacer { flex: 1; }
+.filters .lnk { background: none; border: none; color: var(--primary); cursor: pointer; font: inherit; font-size: 0.85rem; padding: 4px; }
+
+.group { border: 1px solid var(--border); border-radius: 12px; margin-bottom: 10px; overflow: hidden; }
+.group[hidden] { display: none; }
+.group > summary { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 14px; cursor: pointer; list-style: none; }
+.group > summary::-webkit-details-marker { display: none; }
+.group > summary::before { content: "▸"; color: var(--muted-fg); transition: transform 0.15s; }
+.group[open] > summary::before { transform: rotate(90deg); }
+.group .rule { font-family: var(--font-mono); font-size: 0.9rem; font-weight: 600; }
+.group .scanner { color: var(--muted-fg); font-size: 0.8rem; }
+.group .times { margin-left: auto; background: var(--surface-2); border-radius: 999px; padding: 2px 10px; font-size: 0.78rem; font-variant-numeric: tabular-nums; color: var(--muted-fg); }
+.group .body { padding: 0 14px 14px 36px; }
+.group .msg { color: var(--muted-fg); margin: 0 0 10px; max-width: 80ch; }
+.group .locs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
+.group .locs li { font-family: var(--font-mono); font-size: 0.82rem; color: var(--fg); word-break: break-all; }
+.group .more { color: var(--muted-fg); font-size: 0.8rem; margin-top: 6px; }
+
+.no-matches { color: var(--muted-fg); text-align: center; padding: 24px; }
+
+table.scanners { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
+table.scanners th, table.scanners td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); }
+table.scanners th { color: var(--muted-fg); font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; }
+table.scanners .ok { color: var(--pass); font-weight: 600; }
+table.scanners .bad { color: var(--fail); font-weight: 600; }
+table.scanners .warn { color: var(--review); font-weight: 600; }
+
+.disclaimer { color: var(--muted-fg); font-size: 0.82rem; max-width: 80ch; }
+.disclaimer a { color: var(--primary); }
+.empty-good { color: var(--pass); font-weight: 600; }
+
+/* Feedback — per-finding bug button + modal */
+.bug { margin-left: 4px; border: 1px solid transparent; background: transparent; cursor: pointer; font-size: 0.95rem; line-height: 1; padding: 2px 5px; border-radius: 7px; opacity: 0.55; }
+.bug:hover { opacity: 1; background: var(--surface-2); border-color: var(--border); }
+.fb-open { gap: 6px; }
+.fb-overlay { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; background: hsl(0 0% 0% / 0.5); padding: 20px; }
+.fb-overlay[hidden] { display: none; }
+.fb-modal { background: var(--surface); color: var(--fg); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); width: 100%; max-width: 480px; padding: 22px; }
+.fb-modal h3 { margin: 0 0 6px; font-size: 1.1rem; }
+.fb-context { color: var(--muted-fg); font-size: 0.85rem; margin: 0 0 14px; }
+.fb-context code { font-family: var(--font-mono); }
+.fb-label { display: block; font-size: 0.82rem; font-weight: 600; margin: 10px 0 4px; }
+.fb-req { color: var(--fail); }
+.fb-modal textarea, .fb-modal input { width: 100%; font: inherit; font-size: 0.9rem; padding: 9px 11px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--fg); box-sizing: border-box; resize: vertical; }
+.fb-modal textarea:focus, .fb-modal input:focus { outline: 2px solid var(--primary); outline-offset: 0; border-color: var(--primary); }
+.fb-status { font-size: 0.85rem; margin: 12px 0 0; }
+.fb-status.err { color: var(--fail); }
+.fb-status.ok { color: var(--pass); }
+.fb-status a { color: var(--primary); }
+.fb-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
+.fb-actions button { font: inherit; font-size: 0.88rem; padding: 8px 14px; border-radius: 8px; cursor: pointer; border: 1px solid var(--border); }
+.fb-cancel { background: var(--surface); color: var(--fg); }
+.fb-submit { background: var(--primary); color: var(--primary-fg); border-color: var(--primary); font-weight: 600; }
+.fb-submit[disabled] { opacity: 0.6; cursor: progress; }
+`;
+/** Client-side behaviour: theme persistence, filtering, expand/collapse. No template literals / no `${` so it survives interpolation verbatim. */
+const SCRIPT = `
+(function () {
+	var root = document.documentElement;
+	var btn = document.getElementById('theme-toggle');
+	function syncLabel() {
+		if (!btn) return;
+		btn.textContent = root.classList.contains('dark') ? '☀ Light' : '☾ Dark';
+	}
+	syncLabel();
+	if (btn) btn.addEventListener('click', function () {
+		var dark = root.classList.toggle('dark');
+		try { localStorage.setItem('extenshi-report-theme', dark ? 'dark' : 'light'); } catch (e) {}
+		syncLabel();
+	});
+
+	var groups = Array.prototype.slice.call(document.querySelectorAll('.group'));
+	var chips = Array.prototype.slice.call(document.querySelectorAll('.sev-chip'));
+	var scannerSel = document.getElementById('scanner-filter');
+	var search = document.getElementById('search');
+	var empty = document.getElementById('no-matches');
+	var counter = document.getElementById('visible-count');
+	var active = {};
+	chips.forEach(function (c) { active[c.getAttribute('data-sev')] = true; });
+
+	function refresh() {
+		var scanner = scannerSel ? scannerSel.value : 'all';
+		var q = (search ? search.value : '').trim().toLowerCase();
+		var shown = 0;
+		groups.forEach(function (g) {
+			var sev = g.getAttribute('data-severity');
+			var sc = g.getAttribute('data-scanner');
+			var text = g.getAttribute('data-text') || '';
+			var ok = active[sev] && (scanner === 'all' || scanner === sc) && (q === '' || text.indexOf(q) > -1);
+			if (ok) { g.removeAttribute('hidden'); shown++; } else { g.setAttribute('hidden', ''); }
+		});
+		if (counter) counter.textContent = String(shown);
+		if (empty) { if (shown === 0) empty.removeAttribute('hidden'); else empty.setAttribute('hidden', ''); }
+	}
+
+	chips.forEach(function (c) {
+		c.addEventListener('click', function () {
+			var s = c.getAttribute('data-sev');
+			active[s] = !active[s];
+			c.classList.toggle('off', !active[s]);
+			refresh();
+		});
+	});
+	if (scannerSel) scannerSel.addEventListener('change', refresh);
+	if (search) search.addEventListener('input', refresh);
+
+	var expandBtn = document.getElementById('expand-all');
+	var collapseBtn = document.getElementById('collapse-all');
+	if (expandBtn) expandBtn.addEventListener('click', function () {
+		groups.forEach(function (g) { if (!g.hasAttribute('hidden')) g.setAttribute('open', ''); });
+	});
+	if (collapseBtn) collapseBtn.addEventListener('click', function () {
+		groups.forEach(function (g) { g.removeAttribute('open'); });
+	});
+
+	refresh();
+})();
+
+// Feedback — open a modal from the per-finding bug button or the header button,
+// then POST the report to the scan API. text/plain dodges the CORS preflight a
+// file:// page would otherwise trigger; failures fall back to a mailto link.
+(function () {
+	var cfg = window.__EXTENSHI_FB__;
+	var overlay = document.getElementById('fb-overlay');
+	if (!cfg || !cfg.endpoint || !overlay) return;
+
+	var ctx = document.getElementById('fb-context');
+	var msg = document.getElementById('fb-message');
+	var contact = document.getElementById('fb-contact');
+	var statusEl = document.getElementById('fb-status');
+	var submitBtn = document.getElementById('fb-submit');
+	var cancelBtn = document.getElementById('fb-cancel');
+	var current = { kind: 'general' };
+
+	function escHtml(s) {
+		return String(s).replace(/[&<>"']/g, function (c) {
+			return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c];
+		});
+	}
+	// innerHTML here is safe by contract: callers pass only static strings or
+	// values already neutralised — escHtml() for the finding context, and
+	// encodeURIComponent() for the mailto href (which cannot carry raw <,>,").
+	function setStatus(html, cls) {
+		if (!statusEl) return;
+		statusEl.className = 'fb-status ' + (cls || '');
+		statusEl.innerHTML = html;
+		statusEl.hidden = !html;
+	}
+	function openModal(prefill) {
+		current = prefill || { kind: 'general' };
+		if (ctx) {
+			if (current.kind === 'finding') {
+				ctx.innerHTML = 'Reporting <code>' + escHtml(current.rule || '') + '</code> from <strong>' + escHtml(current.label || current.scanner || '') + '</strong> — tell us what looks wrong (e.g. false positive).';
+			} else {
+				ctx.textContent = 'Tell us about a wrong result, a bug, or anything else about this scan.';
+			}
+		}
+		setStatus('', '');
+		if (submitBtn) { submitBtn.disabled = false; submitBtn.textContent = 'Send feedback'; }
+		overlay.hidden = false;
+		if (msg) msg.focus();
+	}
+	function closeModal() { overlay.hidden = true; }
+
+	Array.prototype.slice.call(document.querySelectorAll('.bug')).forEach(function (b) {
+		b.addEventListener('click', function (e) {
+			e.preventDefault(); e.stopPropagation();
+			openModal({ kind: 'finding', scanner: b.getAttribute('data-fb-scanner') || '', label: b.getAttribute('data-fb-label') || '', rule: b.getAttribute('data-fb-rule') || '', severity: b.getAttribute('data-fb-severity') || '' });
+		});
+	});
+	var generalBtn = document.getElementById('fb-open-general');
+	if (generalBtn) generalBtn.addEventListener('click', function () { openModal({ kind: 'general' }); });
+	if (cancelBtn) cancelBtn.addEventListener('click', closeModal);
+	overlay.addEventListener('click', function (e) { if (e.target === overlay) closeModal(); });
+	document.addEventListener('keydown', function (e) { if (e.key === 'Escape' && !overlay.hidden) closeModal(); });
+
+	function mailtoFallback(p) {
+		var subject = 'Extenshi scan feedback' + (p.jobId ? ' (' + p.jobId + ')' : '');
+		var lines = ['Kind: ' + p.kind];
+		if (p.rule) lines.push('Rule: ' + p.rule);
+		if (p.scannerLabel) lines.push('Scanner: ' + p.scannerLabel);
+		if (p.severity) lines.push('Severity: ' + p.severity);
+		if (p.jobId) lines.push('Job: ' + p.jobId);
+		lines.push('', p.message || '');
+		return 'mailto:feedback@extenshi.io?subject=' + encodeURIComponent(subject) + '&body=' + encodeURIComponent(lines.join('\\n'));
+	}
+
+	if (submitBtn) submitBtn.addEventListener('click', function () {
+		var text = ((msg && msg.value) || '').trim();
+		if (!text) { setStatus('Please describe the problem first.', 'err'); if (msg) msg.focus(); return; }
+		var payload = {
+			kind: current.kind,
+			jobId: cfg.jobId || null,
+			cliVersion: cfg.cliVersion || null,
+			message: text,
+			contact: ((contact && contact.value) || '').trim() || null,
+			scanner: current.scanner || null,
+			scannerLabel: current.label || null,
+			rule: current.rule || null,
+			severity: current.severity || null,
+			userAgent: navigator.userAgent
+		};
+		submitBtn.disabled = true; submitBtn.textContent = 'Sending…';
+		setStatus('', '');
+		fetch(cfg.endpoint, { method: 'POST', headers: { 'content-type': 'text/plain;charset=UTF-8' }, body: JSON.stringify(payload) })
+			.then(function (r) {
+				if (!r.ok) throw new Error('HTTP ' + r.status);
+				setStatus('✓ Thanks — your feedback was sent. We review every report.', 'ok');
+				submitBtn.textContent = 'Sent';
+				setTimeout(closeModal, 1800);
+			})
+			.catch(function () {
+				submitBtn.disabled = false; submitBtn.textContent = 'Send feedback';
+				setStatus('Could not reach the server. <a href="' + mailtoFallback(payload) + '">Email it to us instead</a>.', 'err');
+			});
+	});
+})();
+`;
+// ── Section renderers ────────────────────────────────────────────────────────
+const SEVERITIES = ['CRITICAL', 'HIGH', 'MEDIUM', 'LOW', 'INFO', 'UNKNOWN'];
+function renderStats(summary, groupCount) {
+    const stat = (v, l) => `<div class="stat"><div class="v">${esc(String(v))}</div><div class="l">${esc(l)}</div></div>`;
+    return ('<div class="stats">' +
+        stat(summary.total, 'Findings') +
+        stat(summary.critHigh, 'Critical / high') +
+        stat(groupCount, 'Distinct rules') +
+        stat(`${summary.scannersOk}/${summary.scannersRun}`, 'Scanners OK') +
+        '</div>');
+}
+function renderGauge(score) {
+    const clamped = Math.max(0, Math.min(100, Math.round(score)));
+    const color = clamped >= 70 ? 'var(--fail)' : clamped >= 35 ? 'var(--review)' : 'var(--pass)';
+    return ('<div class="gauge">' +
+        `<div class="label"><span>Manifest risk score</span><span>${clamped}/100</span></div>` +
+        `<div class="track"><div class="fill" style="width:${clamped}%;background:${color}"></div></div>` +
+        '</div>');
+}
+function renderComplianceSection(compliance) {
+    const parts = [`<section class="card" id="compliance"><h2>Store compliance</h2>`];
+    if (!compliance.present) {
+        parts.push(`<p class="disclaimer">Store-compliance analysis is unavailable — the scan server has not been updated yet. Re-run after the next server rollout (no CLI action needed).</p>`);
+        return `${parts.join('')}</section>`;
+    }
+    if (compliance.findings.length === 0) {
+        parts.push(`<p class="empty-good">✓ No store-compliance signals detected in the manifest.</p>`);
+        parts.push(renderGauge(compliance.manifestRiskScore));
+        return `${parts.join('')}</section>`;
+    }
+    for (const f of compliance.findings) {
+        const impactShort = STORE_IMPACT_SHORT[f.storeImpact] ?? f.storeImpact;
+        const stores = f.stores.length ? `<span class="stores">${esc(f.stores.join(', '))}</span>` : '';
+        const evidence = f.evidence.length
+            ? `<div class="evidence"><pre>${esc(f.evidence.slice(0, 10).join('\n'))}</pre></div>`
+            : '';
+        parts.push('<div class="compliance-item">' +
+            '<div class="head">' +
+            `<span class="badge impact ${cssToken(f.storeImpact)}">${esc(impactShort)}</span>` +
+            `<span class="badge sev-${cssToken(f.severity)}">${esc(f.severity)}</span>` +
+            `<span class="title">${esc(f.label)}</span>` +
+            stores +
+            '</div>' +
+            (f.summary ? `<p class="why"><strong>Why stores care:</strong> ${esc(f.summary)}</p>` : '') +
+            evidence +
+            (f.remediation ? `<p class="fix"><strong>How to fix:</strong> ${esc(f.remediation)}</p>` : '') +
+            '</div>');
+    }
+    parts.push(renderGauge(compliance.manifestRiskScore));
+    if (compliance.flags.length > 0) {
+        parts.push(`<p class="meta">Flags set: ${compliance.flags.map((fl) => `<code>${esc(fl)}</code>`).join(', ')}</p>`);
+    }
+    return `${parts.join('')}</section>`;
+}
+function renderSecuritySection(groups, feedbackEnabled) {
+    const parts = [
+        `<section class="card" id="security"><h2>Security findings <span class="count">(<span id="visible-count">${groups.length}</span> shown)</span></h2>`,
+    ];
+    if (groups.length === 0) {
+        parts.push(`<p class="empty-good">✓ No code-analysis findings raised by the automated scanners.</p>`);
+        return `${parts.join('')}</section>`;
+    }
+    // Severity filter chips (only the severities actually present).
+    const presentSevs = SEVERITIES.filter((s) => groups.some((g) => g.severity === s));
+    const chips = presentSevs
+        .map((s) => {
+        const n = groups.filter((g) => g.severity === s).reduce((acc, g) => acc + g.count, 0);
+        return `<span class="badge sev-${s} sev-chip" data-sev="${s}" role="button" tabindex="0">${s} ${n}</span>`;
+    })
+        .join('');
+    // Scanner dropdown (unique scanners across groups). The option VALUE stays the
+    // raw codename (so it matches each group's data-scanner), but the LABEL shows
+    // the human capability phrase.
+    const scanners = [...new Set(groups.map((g) => g.scanner))].sort((a, b) => scannerDisplayName(a).localeCompare(scannerDisplayName(b)));
+    const scannerOpts = ['<option value="all">All scanners</option>']
+        .concat(scanners.map((s) => `<option value="${esc(s)}">${esc(scannerDisplayName(s))}</option>`))
+        .join('');
+    parts.push('<div class="filters">' +
+        chips +
+        '<span class="spacer"></span>' +
+        `<select id="scanner-filter" aria-label="Filter by scanner">${scannerOpts}</select>` +
+        '<input id="search" type="search" placeholder="Filter findings…" aria-label="Filter findings by text">' +
+        '<button class="lnk" id="expand-all" type="button">Expand all</button>' +
+        '<button class="lnk" id="collapse-all" type="button">Collapse all</button>' +
+        '</div>');
+    for (const g of groups) {
+        const searchText = esc(`${g.headline} ${g.scanner} ${scannerDisplayName(g.scanner)} ${g.message} ${g.locations.join(' ')} ${g.extras.join(' ')}`.toLowerCase());
+        const shownLocs = g.locations.slice(0, MAX_LOCATIONS_PER_GROUP);
+        const locsHtml = shownLocs.length
+            ? `<ul class="locs">${shownLocs.map((l) => `<li>${esc(l)}</li>`).join('')}</ul>`
+            : '';
+        const moreLocs = g.locations.length > MAX_LOCATIONS_PER_GROUP
+            ? `<p class="more">…and ${g.locations.length - MAX_LOCATIONS_PER_GROUP} more location(s)</p>`
+            : '';
+        const extrasHtml = g.extras.length ? `<p class="more">${esc(g.extras.slice(0, 5).join('  •  '))}</p>` : '';
+        const times = g.count > 1 ? `<span class="times">×${g.count}</span>` : '';
+        // 🐞 reports a wrong scanner result for this exact finding (scanner + rule
+        // + severity travel with it). Inside <summary>, so the JS stops the click
+        // from toggling the <details>.
+        const bug = feedbackEnabled
+            ? `<button type="button" class="bug" title="Report wrong scanner result" data-fb-scanner="${esc(g.scanner)}" data-fb-label="${esc(scannerDisplayName(g.scanner))}" data-fb-rule="${esc(g.headline)}" data-fb-severity="${esc(g.severity)}">🐞</button>`
+            : '';
+        parts.push(`<details class="group" data-severity="${esc(g.severity)}" data-scanner="${esc(g.scanner)}" data-text="${searchText}">` +
+            '<summary>' +
+            `<span class="badge sev-${cssToken(g.severity)}">${esc(g.severity)}</span>` +
+            `<span class="rule">${esc(g.headline)}</span>` +
+            `<span class="scanner">${esc(scannerDisplayName(g.scanner))}</span>` +
+            times +
+            bug +
+            '</summary>' +
+            '<div class="body">' +
+            (g.message ? `<p class="msg">${esc(g.message)}</p>` : '') +
+            locsHtml +
+            moreLocs +
+            extrasHtml +
+            '</div>' +
+            '</details>');
+    }
+    parts.push(`<p class="no-matches" id="no-matches" hidden>No findings match the current filters.</p>`);
+    return `${parts.join('')}</section>`;
+}
+/**
+ * Coverage roster — EVERY scanner that ran, not just the failures. This is what
+ * makes a clean check visible: e.g. "Known-vulnerable dependency detection →
+ * ✓ clean", so the user can see their libraries were inspected even when nothing
+ * was flagged. Scanner names are the public capability phrases (see scanner-names).
+ */
+function renderCoverageSection(summary) {
+    const parts = [
+        `<section class="card" id="scanners"><h2>Coverage — what we checked <span class="count">(${summary.scannersOk}/${summary.scannersRun} scanners OK)</span></h2>`,
+    ];
+    if (summary.roster.length === 0) {
+        parts.push(`<p class="disclaimer">No scanner results were returned.</p>`);
+        return `${parts.join('')}</section>`;
+    }
+    const errorByScanner = new Map(summary.issues.map((i) => [i.scanner, i.error ?? '']));
+    // Order: failures first (surface problems), then noisiest, then by name.
+    const rows = [...summary.roster].sort((a, b) => Number(a.ok) - Number(b.ok) ||
+        b.findingCount - a.findingCount ||
+        scannerDisplayName(a.scanner).localeCompare(scannerDisplayName(b.scanner)));
+    parts.push('<table class="scanners"><thead><tr><th>Check</th><th>Result</th><th>Detail</th></tr></thead><tbody>');
+    for (const r of rows) {
+        let result;
+        let detail;
+        if (!r.ok) {
+            result = `<span class="bad">✕ ${esc(r.status)}</span>`;
+            detail = esc(errorByScanner.get(r.scanner) ?? '');
+        }
+        else if (r.findingCount === 0) {
+            result = '<span class="ok">✓ clean</span>';
+            detail = 'no findings';
+        }
+        else {
+            result = `<span class="warn">${r.findingCount} finding${r.findingCount !== 1 ? 's' : ''}</span>`;
+            detail = '';
+        }
+        parts.push(`<tr><td>${esc(scannerDisplayName(r.scanner))}</td><td>${result}</td><td>${detail}</td></tr>`);
+    }
+    parts.push('</tbody></table>');
+    return `${parts.join('')}</section>`;
+}
+// ── Document assembly ─────────────────────────────────────────────────────────
+export function renderHtmlReport(body, meta) {
+    const summary = summarizeReport(body);
+    const compliance = summarizeCompliance(body);
+    const verdict = computeVerdict(compliance, summary);
+    const groups = groupFindings(summary.findings);
+    const title = `Extenshi scan report — ${meta.artifactName}`;
+    const job = summary.jobId ? ` · Job <span class="mono">${esc(summary.jobId)}</span>` : '';
+    // Feedback UI is rendered only when the CLI provided an endpoint to POST to.
+    const feedbackEnabled = typeof meta.feedbackEndpoint === 'string' && meta.feedbackEndpoint.length > 0;
+    const fbModal = feedbackEnabled
+        ? '<div class="fb-overlay" id="fb-overlay" hidden>' +
+            '<div class="fb-modal" role="dialog" aria-modal="true" aria-labelledby="fb-title">' +
+            '<h3 id="fb-title">Report an issue</h3>' +
+            '<p class="fb-context" id="fb-context"></p>' +
+            '<label class="fb-label" for="fb-message">What looks wrong? <span class="fb-req">*</span></label>' +
+            '<textarea id="fb-message" rows="5" placeholder="e.g. this finding is a false positive because…"></textarea>' +
+            '<label class="fb-label" for="fb-contact">Email (optional — so we can follow up)</label>' +
+            '<input id="fb-contact" type="email" placeholder="you@example.com" autocomplete="email">' +
+            '<p class="fb-status" id="fb-status" hidden></p>' +
+            '<div class="fb-actions">' +
+            '<button class="fb-cancel" id="fb-cancel" type="button">Cancel</button>' +
+            '<button class="fb-submit" id="fb-submit" type="button">Send feedback</button>' +
+            '</div></div></div>'
+        : '';
+    // Inject the endpoint + scan context for the feedback script (safely encoded).
+    const fbBootstrap = feedbackEnabled
+        ? `<script>window.__EXTENSHI_FB__=${jsonForScript({
+            endpoint: meta.feedbackEndpoint,
+            jobId: summary.jobId ?? null,
+            cliVersion: meta.cliVersion,
+        })};</script>`
+        : '';
+    const nav = '<nav class="nav">' +
+        '<a href="#verdict"><span>Verdict</span></a>' +
+        `<a href="#compliance"><span>Store compliance</span><span class="n">${compliance.present ? compliance.findings.length : '–'}</span></a>` +
+        `<a href="#security"><span>Security findings</span><span class="n">${summary.total}</span></a>` +
+        `<a href="#scanners"><span>Coverage</span><span class="n">${summary.scannersOk}/${summary.scannersRun}</span></a>` +
+        '</nav>';
+    const verdictSection = `<section class="card verdict ${verdict.level}" id="verdict">` +
+        `<p class="headline">${esc(verdict.headline)}</p>` +
+        `<p class="detail">${esc(verdict.detail)}</p>` +
+        renderStats(summary, groups.length) +
+        '</section>';
+    const metaLine = '<p class="meta">' +
+        `<span class="mono">${esc(meta.artifactName)}</span> · ` +
+        `@extenshi/cli v${esc(meta.cliVersion)} · ${esc(meta.generatedAt.toISOString())}${job}` +
+        '</p>';
+    const footer = '<section class="card"><p class="disclaimer">' +
+        'This scan is automated. The scanners are heuristics that may miss real issues or over-flag benign ' +
+        'code — a clean result is not a guarantee of safety or store approval. ' +
+        'See the <a href="https://catalog.extenshi.io/disclaimers/security-risk" target="_blank" rel="noreferrer">security-risk disclaimer</a>. ' +
+        'Manage claims and respond to findings at <a href="https://dojo.extenshi.io" target="_blank" rel="noreferrer">dojo.extenshi.io</a>.' +
+        '</p></section>';
+    const head = '<!doctype html><html lang="en"><head><meta charset="utf-8">' +
+        '<meta name="viewport" content="width=device-width, initial-scale=1">' +
+        `<title>${esc(title)}</title>` +
+        // Set the theme before paint to avoid a flash of the wrong palette.
+        "<script>(function(){try{var t=localStorage.getItem('extenshi-report-theme');if(!t)t=(window.matchMedia&&window.matchMedia('(prefers-color-scheme: dark)').matches)?'dark':'light';if(t==='dark')document.documentElement.classList.add('dark');}catch(e){}})();</script>" +
+        `<style>${STYLE}</style></head>`;
+    const topbar = '<header class="topbar">' +
+        `<span class="logo">${LOGO_SVG}</span>` +
+        '<span class="brand">extenshi</span>' +
+        '<span class="sep">·</span>' +
+        '<span class="subtitle">Security scan report</span>' +
+        '<span class="spacer"></span>' +
+        (feedbackEnabled
+            ? '<button class="toggle fb-open" id="fb-open-general" type="button">🐞 Leave feedback</button>'
+            : '') +
+        '<button class="toggle" id="theme-toggle" type="button" aria-label="Toggle colour theme"></button>' +
+        '</header>';
+    const main = '<div class="layout">' +
+        nav +
+        '<div class="content">' +
+        metaLine +
+        verdictSection +
+        renderComplianceSection(compliance) +
+        renderSecuritySection(groups, feedbackEnabled) +
+        renderCoverageSection(summary) +
+        footer +
+        '</div></div>';
+    return `${head}<body>${topbar}${main}${fbModal}${fbBootstrap}<script>${SCRIPT}</script></body></html>\n`;
+}
+//# sourceMappingURL=html-report.js.map