@vibecodeqa/cli 0.14.0 → 0.16.0

package/dist/check-meta.js

@@ -51,12 +51,22 @@ export const CHECK_META = {
         risk: "Large files are hard to review and test. console.log in production leaks internal data. var causes hoisting bugs. == causes type coercion surprises. eval/innerHTML are security vulnerabilities. Inconsistent naming makes the codebase harder to navigate.",
         recommendation: "Split files over 300 lines. Replace console.log with a proper logger or remove it. Use const/let, ===, and safe DOM APIs. Enable TypeScript strict mode.",
     },
+    "error-handling": {
+        name: "error-handling",
+        label: "Error Handling",
+        category: "Quality",
+        priority: "high",
+        weight: 2,
+        description: "Detects poor error handling: empty catch blocks, throw with string literals, catch-and-rethrow without context, Promise.then() without .catch(), missing React Error Boundaries.",
+        risk: "Empty catch blocks silently swallow errors. throw 'string' loses stack traces. Missing Error Boundaries in React cause the entire app to crash on render errors.",
+        recommendation: "Handle or log every catch. Use throw new Error() for stack traces. Add Error Boundaries in React. Chain .catch() on promises.",
+    },
     complexity: {
         name: "complexity",
         label: "Complexity",
         category: "Quality",
         priority: "high",
-        weight: 7,
+        weight: 5,
         description: "Measures cognitive complexity of each function: how many branches (if/else/switch/for/while/ternary/&&/||) and how many lines. Functions over 60 lines or with complexity over 15 are flagged.",
         risk: "Complex functions are the #1 source of bugs. Research shows defect density increases exponentially with cyclomatic complexity above 10 (McCabe, 1976). Complex code is also harder to review, test, and modify safely.",
         recommendation: "Extract complex functions into smaller ones. Use early returns to reduce nesting. Replace conditional chains with lookup tables or strategy patterns. Aim for functions under 30 lines with complexity under 10.",

package/dist/cli.js

@@ -11,6 +11,7 @@ import { runContext } from "./runners/context.js";
 import { runDependencies } from "./runners/dependencies.js";
 import { runDocs } from "./runners/docs.js";
 import { runDuplication } from "./runners/duplication.js";
+import { runErrorHandling } from "./runners/error-handling.js";
 import { runLint } from "./runners/lint.js";
 import { runSecrets } from "./runners/secrets.js";
 import { runSecurity } from "./runners/security.js";
@@ -65,6 +66,7 @@ async function main() {
         // Quality
         { name: "complexity", fn: () => runComplexity(cwd) },
         { name: "duplication", fn: () => runDuplication(cwd) },
+        { name: "error-handling", fn: () => runErrorHandling(cwd, stack) },
         { name: "docs", fn: () => runDocs(cwd) },
         // Testing
         { name: "testing", fn: () => runTesting(cwd, stack, skipTests) },

package/dist/history.d.ts

@@ -0,0 +1,14 @@
+/** Read report history from .vibe-check/history/ and return sorted snapshots. */
+export interface HistoryEntry {
+    timestamp: string;
+    score: number;
+    checkScores: Map<string, number>;
+}
+/** Load history entries from historyDir, sorted oldest-first. Returns last 30 max. */
+export declare function loadHistory(historyDir: string): HistoryEntry[];
+/** Compute a human-friendly delta badge like "up 3 from last week" or "down 5 from yesterday". */
+export declare function scoreDeltaBadge(entries: HistoryEntry[]): {
+    arrow: string;
+    delta: number;
+    label: string;
+} | null;

package/dist/history.js

@@ -0,0 +1,51 @@
+/** Read report history from .vibe-check/history/ and return sorted snapshots. */
+import { existsSync, readdirSync, readFileSync } from "node:fs";
+import { join } from "node:path";
+/** Load history entries from historyDir, sorted oldest-first. Returns last 30 max. */
+export function loadHistory(historyDir) {
+    if (!existsSync(historyDir))
+        return [];
+    const files = readdirSync(historyDir)
+        .filter((f) => f.endsWith(".json"))
+        .sort(); // filenames are timestamp-based, so lexicographic = chronological
+    const entries = [];
+    for (const file of files) {
+        try {
+            const raw = JSON.parse(readFileSync(join(historyDir, file), "utf-8"));
+            if (raw.score == null || !raw.checks)
+                continue;
+            const checkScores = new Map();
+            for (const c of raw.checks) {
+                checkScores.set(c.name, c.score);
+            }
+            entries.push({ timestamp: raw.timestamp, score: raw.score, checkScores });
+        }
+        catch {
+            // skip corrupt files
+        }
+    }
+    return entries;
+}
+/** Compute a human-friendly delta badge like "up 3 from last week" or "down 5 from yesterday". */
+export function scoreDeltaBadge(entries) {
+    if (entries.length < 2)
+        return null;
+    const current = entries[entries.length - 1];
+    const prev = entries[entries.length - 2];
+    const delta = current.score - prev.score;
+    const arrow = delta > 0 ? "\u2191" : delta < 0 ? "\u2193" : "=";
+    const now = new Date(current.timestamp);
+    const then = new Date(prev.timestamp);
+    const diffMs = now.getTime() - then.getTime();
+    const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
+    let timeLabel;
+    if (diffDays === 0)
+        timeLabel = "earlier today";
+    else if (diffDays === 1)
+        timeLabel = "yesterday";
+    else if (diffDays <= 7)
+        timeLabel = "last week";
+    else
+        timeLabel = `${diffDays}d ago`;
+    return { arrow, delta, label: `${arrow}${Math.abs(delta)} from ${timeLabel}` };
+}

package/dist/report/components.d.ts

@@ -0,0 +1,10 @@
+/** Reusable HTML components and helpers for the report. */
+import type { Priority } from "../check-meta.js";
+/** HTML-escape a string. */
+export declare function e(s: string): string;
+/** Make a file path a clickable GitHub link if repoUrl is available. */
+export declare function fileLink(path: string, line: number | undefined, repoUrl: string | null, branch: string): string;
+/** Grade color. */
+export declare function gc(grade: string): string;
+/** Priority color. */
+export declare function pc(p: Priority): string;

package/dist/report/components.js

@@ -0,0 +1,21 @@
+/** Reusable HTML components and helpers for the report. */
+/** HTML-escape a string. */
+export function e(s) {
+    return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+/** Make a file path a clickable GitHub link if repoUrl is available. */
+export function fileLink(path, line, repoUrl, branch) {
+    const clean = path.split(":")[0];
+    if (!repoUrl || !/^https?:\/\//.test(repoUrl))
+        return e(path);
+    const href = `${repoUrl}/blob/${branch}/${clean}${line ? `#L${line}` : ""}`;
+    return `<a href="${e(href)}" target="_blank" rel="noopener" class="flink">${e(path)}</a>`;
+}
+/** Grade color. */
+export function gc(grade) {
+    return { A: "#22c55e", B: "#84cc16", C: "#eab308", D: "#f97316", F: "#ef4444" }[grade] || "#6b7280";
+}
+/** Priority color. */
+export function pc(p) {
+    return { critical: "#ef4444", high: "#f97316", medium: "#eab308", low: "#6b7280" }[p];
+}

package/dist/report/html.js

@@ -9,27 +9,12 @@
  * All in one self-contained HTML file using hash routing + show/hide.
  */
 import { getCheckMeta } from "../check-meta.js";
-import { generateArchSVG } from "../runners/architecture.js";
-function e(s) {
-    return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
-}
-/** Make a file path a clickable GitHub link if repoUrl is available. */
-function fileLink(path, line, repoUrl, branch) {
-    const clean = path.split(":")[0];
-    if (!repoUrl || !/^https?:\/\//.test(repoUrl))
-        return e(path);
-    const href = `${repoUrl}/blob/${branch}/${clean}${line ? `#L${line}` : ""}`;
-    return `<a href="${e(href)}" target="_blank" rel="noopener" class="flink">${e(path)}</a>`;
-}
-function gc(grade) {
-    return { A: "#22c55e", B: "#84cc16", C: "#eab308", D: "#f97316", F: "#ef4444" }[grade] || "#6b7280";
-}
-function pc(p) {
-    return { critical: "#ef4444", high: "#f97316", medium: "#eab308", low: "#6b7280" }[p];
-}
+import { e, fileLink, gc } from "./components.js";
+import { categoryPages, filesPage, heatmapPage, issuesPage, overviewPage } from "./pages.js";
+import { CSS } from "./styles.js";
 const GROUPS = [
     { id: "foundations", label: "Foundations", checks: ["structure", "lint", "types", "type-safety", "standards"] },
-    { id: "quality", label: "Quality", checks: ["complexity", "duplication", "docs"] },
+    { id: "quality", label: "Quality", checks: ["complexity", "duplication", "error-handling", "docs"] },
     { id: "testing", label: "Testing", checks: ["testing"] },
     { id: "arch", label: "Architecture", checks: ["architecture"] },
     { id: "security", label: "Security", checks: ["secrets", "security", "dependencies"] },
@@ -71,8 +56,7 @@ export function generateHTML(report) {
         const avg = scored.length > 0 ? Math.round(scored.reduce((s, c) => s + c.score, 0) / scored.length) : 0;
         return { ...g, avg, checks };
     });
-    // ── Build pages ──
-    // Top nav
+    // ── Top nav ──
     const topNavItems = [
         { id: "overview", label: "Overview" },
         ...GROUPS.map((g) => ({ id: g.id, label: g.label })),
@@ -81,296 +65,32 @@ export function generateHTML(report) {
         { id: "heatmap", label: "Heatmap" },
     ];
     const topNav = topNavItems.map((t) => `<a class="tn" data-page="${t.id}" onclick="go('${t.id}')">${t.label}</a>`).join("");
-    // Overview page
-    const ringPct = report.score;
-    const barChart = active
-        .sort((a, b) => a.score - b.score)
-        .map((c) => {
-        return `<div class="brow"><span class="bl">${e(c.name)}</span><div class="bb"><div class="bf" style="width:${c.score}%;background:${gc(c.grade)}"></div></div><span class="bv" style="color:${gc(c.grade)}">${c.grade} ${c.score}</span></div>`;
-    })
-        .join("");
-    const catCards = catScores
+    // ── Sidebar ──
+    const sidebar = catScores
         .map((cs) => {
         const clr = gc(cs.avg >= 90 ? "A" : cs.avg >= 75 ? "B" : cs.avg >= 60 ? "C" : cs.avg >= 40 ? "D" : "F");
-        const mini = cs.checks
+        return `<div class="side-section"><a class="side-cat" onclick="go('${cs.id}')">${cs.label} <span style="color:${clr}">${cs.avg}</span></a>${cs.checks
             .map((c) => {
             const sk = c.details.skipped;
-            return `<span class="mc" style="color:${sk ? "#555" : gc(c.grade)}" title="${e(c.name)}: ${sk ? "skip" : c.score}">${sk ? "—" : c.grade}</span>`;
-        })
-            .join("");
-        return `<div class="cc" onclick="go('${cs.id}')"><div class="cc-s" style="color:${clr}">${cs.avg}</div><div class="cc-l">${cs.label}</div><div class="cc-m">${mini}</div></div>`;
-    })
-        .join("");
-    const radarSvg = buildRadar(catScores.map((cs) => ({ label: cs.label, score: cs.avg })));
-    const overviewPage = `<div id="p-overview" class="page active">
-<div class="dash">
-  <div class="hero">
-    ${buildRing(ringPct, gc(report.grade))}
-    <div class="hc"><span class="hg" style="color:${gc(report.grade)}">${report.grade}</span><span class="hs" style="color:${gc(report.grade)}">${report.score}/100</span><span class="hd">${active.length} checks · ${totalIssues} issues · ${report.meta.duration}ms</span></div>
-  </div>
-  <div class="radar">${radarSvg}</div>
-</div>
-<div class="cats">${catCards}</div>
-<h3>All Checks</h3>
-<div class="bars">${barChart}</div>
-<div class="stack">${Object.entries(report.meta.stack)
-        .filter(([, v]) => v !== "none" && v !== "unknown")
-        .map(([k, v]) => `<span>${k}: <b>${v}</b></span>`)
-        .join("")}</div>
-</div>`;
-    // Category pages (with sub-nav tabs for each check)
-    let catPages = "";
-    for (const cs of catScores) {
-        const subNav = cs.checks
-            .map((c, i) => {
-            const sk = c.details.skipped;
-            return `<a class="sn${i === 0 ? " active" : ""}" data-sub="${cs.id}-${c.name}" onclick="sub(this,'${cs.id}')">${e(c.name)} <span style="color:${sk ? "#555" : gc(c.grade)}">${sk ? "—" : c.grade}</span></a>`;
-        })
-            .join("");
-        const subPages = cs.checks
-            .map((c, i) => {
             const meta = getCheckMeta(c.name);
-            const sk = c.details.skipped;
-            const detailsFiltered = Object.entries(c.details)
-                .filter(([k]) => k !== "skipped" && k !== "reason" && k !== "graph")
-                .map(([k, v]) => {
-                const d = Array.isArray(v) ? v.join(", ") : typeof v === "object" ? JSON.stringify(v) : String(v);
-                return `<div class="kv"><span class="k">${e(k)}</span><span class="v">${e(d)}</span></div>`;
-            })
-                .join("");
-            // Group issues by file
-            const byFile = new Map();
-            const noFile = [];
-            for (const iss of c.issues) {
-                const f = iss.file?.split(":")[0];
-                if (f) {
-                    const arr = byFile.get(f) || [];
-                    arr.push(iss);
-                    byFile.set(f, arr);
-                }
-                else {
-                    noFile.push(iss);
-                }
-            }
-            let issuesHtml = "";
-            for (const [file, issues] of byFile) {
-                issuesHtml += `<div class="fg"><div class="fn">${fl(file)} <span class="fc">${issues.length}</span></div>`;
-                for (const iss of issues) {
-                    const prompt = `Fix this issue in ${file}${iss.line ? `:${iss.line}` : ""}\n${iss.severity}: ${iss.message}${iss.rule ? ` (${iss.rule})` : ""}\nCheck: ${c.name}`;
-                    issuesHtml += `<div class="ir ${iss.severity}"><span class="is">${iss.severity[0].toUpperCase()}</span>${iss.line ? `<span class="il">${iss.line}</span>` : ""}<span class="im">${e(iss.message)}</span>${iss.rule ? `<span class="iru">${e(iss.rule)}</span>` : ""}<button class="cp-btn" data-prompt="${e(prompt)}" title="Copy fix prompt">📋</button></div>`;
-                }
-                issuesHtml += `</div>`;
-            }
-            if (noFile.length > 0) {
-                issuesHtml += `<div class="fg"><div class="fn">General</div>`;
-                for (const iss of noFile) {
-                    issuesHtml += `<div class="ir ${iss.severity}"><span class="is">${iss.severity[0].toUpperCase()}</span><span class="im">${e(iss.message)}</span>${iss.rule ? `<span class="iru">${e(iss.rule)}</span>` : ""}</div>`;
-                }
-                issuesHtml += `</div>`;
-            }
-            return `<div class="sp${i === 0 ? " active" : ""}" data-sub="${cs.id}-${c.name}">
-<div class="ch-head"><span class="ch-g" style="color:${sk ? "#555" : gc(c.grade)}">${sk ? "—" : c.grade}</span><div><b>${e(meta.label)}</b><span class="ch-s">${sk ? "skipped" : `${c.score}/100`} · weight ${meta.weight}% · ${c.duration}ms · ${c.issues.length} issues</span></div><span class="pri" style="color:${pc(meta.priority)}">${meta.priority}</span></div>
-${meta.description ? `<div class="info-panel"><div class="ip-row"><span class="ip-label">What</span><span>${e(meta.description)}</span></div><div class="ip-row"><span class="ip-label">Risk</span><span>${e(meta.risk)}</span></div><div class="ip-row"><span class="ip-label">Fix</span><span>${e(meta.recommendation)}</span></div></div>` : ""}
-${sk ? `<p class="skip-r">${e(c.details.reason || "skipped")}</p>` : ""}
-${c.name === "architecture" && !sk ? `<div class="arch-svg">${generateArchSVG(c.details)}</div>` : ""}
-${detailsFiltered ? `<div class="kvs">${detailsFiltered}</div>` : ""}
-${issuesHtml ? `<div class="iss-list">${issuesHtml}</div>` : '<p style="color:var(--muted);font-size:0.8rem;margin-top:1rem">No issues found.</p>'}
-</div>`;
+            return `<a class="side-check" onclick="go('${cs.id}')" title="${e(meta.label)}"><span style="color:${sk ? "#555" : gc(c.grade)}">${sk ? "\u2014" : c.grade}</span> ${e(meta.label)}</a>`;
         })
-            .join("");
-        const clr = gc(cs.avg >= 90 ? "A" : cs.avg >= 75 ? "B" : cs.avg >= 60 ? "C" : cs.avg >= 40 ? "D" : "F");
-        catPages += `<div id="p-${cs.id}" class="page">
-<div class="cat-head"><span style="color:${clr};font-size:1.8rem;font-weight:900">${cs.avg}</span><span style="color:${clr}">/100</span><span style="color:var(--muted);margin-left:0.5rem">${cs.label}</span></div>
-<div class="bar2"><div class="bf2" style="width:${cs.avg}%;background:${clr}"></div></div>
-<div class="sub-nav">${subNav}</div>
-${subPages}
-</div>`;
-    }
-    // All Issues page
-    const allIssues = allChecks.flatMap((c) => c.issues.map((i) => ({ check: c.name, ...i })));
-    const issueRows = allIssues
-        .slice(0, 200)
-        .map((i) => {
-        const loc = i.file ? fl(i.file.split(":")[0], i.line) : "";
-        return `<tr class="${i.severity}"><td class="is2">${i.severity[0].toUpperCase()}</td><td class="ic2">${e(i.check)}</td><td class="il2">${loc}</td><td>${e(i.message)}</td><td class="iru2">${e(i.rule || "")}</td></tr>`;
-    })
-        .join("");
-    const issuesPage = `<div id="p-issues" class="page">
-<h2>All Issues <span style="color:var(--muted);font-weight:400">${totalIssues}</span></h2>
-<div class="isf">${allIssues.filter((i) => i.severity === "error").length} errors · ${allIssues.filter((i) => i.severity === "warning").length} warnings</div>
-<table class="it"><thead><tr><th></th><th>Check</th><th>Location</th><th>Message</th><th>Rule</th></tr></thead><tbody>${issueRows}</tbody></table>
-${allIssues.length > 200 ? `<p style="color:var(--muted);text-align:center;margin-top:1rem">Showing 200 of ${allIssues.length}</p>` : ""}
-</div>`;
-    // File heatmap page
-    const fileRows = topFiles
-        .map((f) => {
-        const pct = Math.min(100, f.total * 5);
-        return `<div class="fr"><span class="ff">${fl(f.file)}</span><div class="fb"><div class="fbf" style="width:${pct}%;background:${f.errors > 0 ? "var(--fail)" : "var(--warn)"}"></div></div><span class="fv">${f.errors}E ${f.warnings}W</span><span class="fcs">${f.checks.join(", ")}</span></div>`;
+            .join("")}</div>`;
     })
         .join("");
-    const filesPage = `<div id="p-files" class="page">
-<h2>File Heatmap</h2>
-<p style="color:var(--muted);font-size:0.78rem;margin-bottom:1rem">Top ${topFiles.length} files by total issues across all checks</p>
-${fileRows || '<p style="color:var(--muted)">No file-level issues found.</p>'}
-</div>`;
-    // Codebase heatmap — each file = row of pixels, color = issue density
-    const heatmapFiles = [...fileIssues.entries()].sort((a, b) => b[1].errors + b[1].warnings - a[1].errors - a[1].warnings).slice(0, 30);
-    let heatmapHtml = "";
-    if (heatmapFiles.length > 0) {
-        const maxIssues = Math.max(...heatmapFiles.map(([, d]) => d.errors + d.warnings));
-        heatmapHtml = heatmapFiles
-            .map(([file, d]) => {
-            const total = d.errors + d.warnings;
-            const intensity = maxIssues > 0 ? total / maxIssues : 0;
-            const r = Math.round(239 * intensity); // red channel
-            const g = Math.round(68 * (1 - intensity) + 197 * (d.errors === 0 ? 0.3 : 0)); // green
-            const color = `rgb(${r},${g},30)`;
-            const barW = Math.max(4, Math.round(intensity * 200));
-            const checks = [...d.checks].join(", ");
-            return `<div class="hm-row"><span class="hm-name">${fl(file)}</span><div class="hm-bar" style="width:${barW}px;background:${color}" title="${total} issues (${checks})"></div><span class="hm-count">${d.errors}E ${d.warnings}W</span></div>`;
-        })
-            .join("");
-    }
-    const heatmapPage = `<div id="p-heatmap" class="page">
-<h2>Code Heatmap</h2>
-<p style="color:var(--muted);font-size:0.78rem;margin-bottom:1rem">Visual density of issues per file. Red = errors, orange = warnings. Bar width = relative issue count.</p>
-${heatmapHtml || '<p style="color:var(--muted)">No issues to visualize.</p>'}
-</div>`;
+    // ── Assemble pages ──
+    const overview = overviewPage(report, active, totalIssues, catScores);
+    const catPages = categoryPages(catScores, fl);
+    const issues = issuesPage(allChecks, totalIssues, fl);
+    const files = filesPage(topFiles, fl);
+    const heatmap = heatmapPage(fileIssues, fl);
     return `<!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width,initial-scale=1">
-<title>VibeCode QA — ${e(proj)}</title>
-<style>
-:root{--bg:#09090b;--card:#111115;--border:#1e1e24;--text:#e5e5e5;--muted:#6b7280;--pass:#22c55e;--fail:#ef4444;--warn:#eab308;--info:#6366f1;--accent:#818cf8}
-*{margin:0;padding:0;box-sizing:border-box}
-body{font-family:"Inter",system-ui,sans-serif;background:var(--bg);color:var(--text);line-height:1.5}
-code{font-family:"SF Mono",Menlo,monospace;font-size:0.85em}
-
-/* Top nav */
-.top{position:sticky;top:0;z-index:20;background:#0c0c0fcc;backdrop-filter:blur(12px);border-bottom:1px solid var(--border);padding:0 2rem;display:flex;align-items:center;gap:0}
-.logo{font-weight:800;font-size:1rem;margin-right:1.5rem;padding:0.7rem 0}
-.logo span{color:var(--accent)}
-.tn{padding:0.7rem 0.8rem;font-size:0.78rem;color:var(--muted);text-decoration:none;cursor:pointer;border-bottom:2px solid transparent;transition:all 0.15s}
-.tn:hover{color:var(--text)}
-.tn.active{color:var(--text);border-bottom-color:var(--accent)}
-
-/* Sidebar */
-.side{position:fixed;top:42px;left:0;bottom:0;width:200px;background:#0c0c0f;border-right:1px solid var(--border);overflow-y:auto;padding:0.8rem 0;font-size:0.7rem;z-index:10}
-.side-section{padding:0.3rem 0;border-bottom:1px solid var(--border)}
-.side-section:last-child{border-bottom:none}
-.side-score{font-size:1.4rem;font-weight:900;padding:0.3rem 0.8rem}
-.side-cat{display:block;padding:0.3rem 0.8rem;color:var(--text);font-weight:700;cursor:pointer;text-decoration:none;font-size:0.72rem}
-.side-cat:hover{background:#14141a}
-.side-check{display:block;padding:0.2rem 0.8rem 0.2rem 1.2rem;color:var(--muted);cursor:pointer;text-decoration:none;font-size:0.65rem}
-.side-check:hover{color:var(--text);background:#14141a}
-.side-check span{display:inline-block;width:1rem;font-weight:800;text-align:center}
-
-/* Content */
-.content{max-width:900px;margin-left:200px;padding:2rem}
-.page{display:none;animation:fadeIn 0.15s}
-.page.active{display:block}
-@keyframes fadeIn{from{opacity:0}to{opacity:1}}
-
-/* Overview */
-.dash{display:flex;gap:2rem;margin-bottom:2rem;align-items:center;flex-wrap:wrap}
-.hero{display:flex;align-items:center;gap:1rem}
-.hero svg{width:100px;height:100px}
-.hc{display:flex;flex-direction:column}
-.hg{font-size:2.5rem;font-weight:900;line-height:1}
-.hs{font-size:1rem;font-weight:600}
-.hd{font-size:0.68rem;color:var(--muted)}
-.radar{flex:1;display:flex;justify-content:center}
-.radar svg{max-width:240px;width:100%}
-.cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:0.6rem;margin-bottom:2rem}
-.cc{background:var(--card);border:1px solid var(--border);border-radius:0.6rem;padding:0.8rem;cursor:pointer;transition:border-color 0.15s}
-.cc:hover{border-color:var(--accent)}
-.cc-s{font-size:1.8rem;font-weight:900}
-.cc-l{font-size:0.75rem;color:var(--muted)}
-.cc-m{margin-top:0.3rem;display:flex;gap:0.25rem}
-.mc{font-size:0.65rem;font-weight:800}
-h3{font-size:0.85rem;color:var(--muted);text-transform:uppercase;letter-spacing:0.04em;margin-bottom:0.5rem}
-.bars{margin-bottom:1.5rem}
-.brow{display:flex;align-items:center;gap:0.4rem;margin-bottom:0.25rem;font-size:0.72rem}
-.bl{width:80px;text-align:right;color:var(--muted);flex-shrink:0}
-.bb{flex:1;height:14px;background:var(--card);border-radius:3px;overflow:hidden;border:1px solid var(--border)}
-.bf{height:100%;border-radius:2px}
-.bv{width:36px;font-weight:700;font-size:0.68rem}
-.stack{display:flex;gap:0.35rem;flex-wrap:wrap}
-.stack span{background:var(--card);border:1px solid var(--border);padding:0.1rem 0.45rem;border-radius:9999px;font-size:0.62rem;color:var(--muted)}
-
-/* Category pages */
-.cat-head{margin-bottom:0.3rem}
-.bar2{height:4px;background:var(--card);border-radius:2px;margin-bottom:1rem;overflow:hidden}
-.bf2{height:100%;border-radius:2px}
-.sub-nav{display:flex;gap:0;border-bottom:1px solid var(--border);margin-bottom:1rem}
-.sn{padding:0.5rem 0.8rem;font-size:0.75rem;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent}
-.sn:hover{color:var(--text)}
-.sn.active{color:var(--text);border-bottom-color:var(--accent)}
-.sp{display:none}.sp.active{display:block}
-
-/* Check detail */
-.ch-head{display:flex;align-items:center;gap:0.7rem;margin-bottom:0.8rem}
-.ch-g{font-size:2rem;font-weight:900}
-.ch-s{display:block;font-size:0.7rem;color:var(--muted)}
-.pri{font-size:0.62rem;font-weight:700;text-transform:uppercase;letter-spacing:0.04em;padding:0.15rem 0.5rem;border-radius:9999px;border:1px solid currentColor;flex-shrink:0}
-.info-panel{background:#0d0d12;border:1px solid var(--border);border-radius:0.5rem;padding:0.7rem 0.9rem;margin-bottom:1rem;font-size:0.72rem;line-height:1.6}
-.ip-row{margin-bottom:0.4rem;display:flex;gap:0.5rem}
-.ip-row:last-child{margin-bottom:0}
-.ip-label{color:var(--accent);font-weight:700;min-width:2.5rem;flex-shrink:0}
-.skip-r{color:var(--muted);font-style:italic;font-size:0.78rem}
-.kvs{display:flex;gap:0.6rem;flex-wrap:wrap;margin-bottom:1rem}
-.kv{background:var(--card);border:1px solid var(--border);border-radius:0.4rem;padding:0.3rem 0.6rem;font-size:0.7rem}
-.k{color:var(--muted);margin-right:0.3rem}
-.v{font-weight:600}
-
-/* Issue list grouped by file */
-.iss-list{margin-top:1rem}
-.fg{margin-bottom:0.8rem}
-.fn{font-size:0.72rem;font-weight:600;font-family:"SF Mono",monospace;padding:0.3rem 0;border-bottom:1px solid var(--border);margin-bottom:0.2rem;display:flex;align-items:center;gap:0.5rem}
-.fc{background:var(--border);border-radius:9999px;padding:0 0.4rem;font-size:0.6rem;color:var(--muted)}
-.ir{font-size:0.65rem;font-family:"SF Mono",monospace;padding:0.12rem 0 0.12rem 0.5rem;display:flex;gap:0.4rem;align-items:baseline}
-.is{font-weight:800;font-size:0.55rem;width:0.9rem;text-align:center;border-radius:2px;flex-shrink:0}
-.ir.error .is{color:var(--fail);background:#ef444418}
-.ir.warning .is{color:var(--warn);background:#eab30818}
-.il{color:var(--accent);min-width:2rem;flex-shrink:0}
-.im{flex:1;word-break:break-word}
-.iru{color:#555;font-size:0.55rem}
-
-/* All issues table */
-.isf{color:var(--muted);font-size:0.75rem;margin-bottom:0.8rem}
-.it{width:100%;border-collapse:collapse;font-size:0.68rem}
-.it th{text-align:left;padding:0.35rem 0.4rem;color:var(--muted);font-size:0.62rem;text-transform:uppercase;border-bottom:1px solid var(--border)}
-.it td{padding:0.25rem 0.4rem;border-bottom:1px solid var(--border);font-family:"SF Mono",monospace;font-size:0.62rem}
-.it tr.error .is2{color:var(--fail)}
-.it tr.warning .is2{color:var(--warn)}
-.is2{font-weight:800;width:1rem}
-.ic2{color:var(--muted);width:70px}
-.il2{color:var(--muted)}
-.iru2{color:#555;font-size:0.58rem}
-
-/* File heatmap */
-.fr{display:flex;align-items:center;gap:0.5rem;margin-bottom:0.3rem;font-size:0.7rem}
-.ff{width:200px;font-family:"SF Mono",monospace;font-size:0.65rem;flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
-.fb{flex:1;height:12px;background:var(--card);border-radius:3px;overflow:hidden;border:1px solid var(--border)}
-.fbf{height:100%;border-radius:2px}
-.fv{width:50px;font-size:0.65rem;color:var(--muted);flex-shrink:0}
-.fcs{font-size:0.6rem;color:#555}
-
-.footer{text-align:center;color:var(--muted);font-size:0.58rem;margin-top:2rem;padding:0.8rem 0;border-top:1px solid var(--border)}
-.footer a{color:var(--muted)}
-.flink{color:var(--accent);text-decoration:none;font-family:"SF Mono",monospace}.flink:hover{text-decoration:underline}
-.arch-svg{margin:1rem 0;overflow-x:auto}
-.hm-row{display:flex;align-items:center;gap:0.5rem;margin-bottom:0.2rem;font-size:0.7rem}
-.hm-name{width:200px;flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:"SF Mono",monospace;font-size:0.65rem}
-.hm-bar{height:14px;border-radius:3px;min-width:4px}
-.hm-count{color:var(--muted);font-size:0.65rem;flex-shrink:0}
-.arch-svg svg{border-radius:8px}
-.cp-btn{background:none;border:none;cursor:pointer;font-size:0.6rem;opacity:0.3;padding:0 0.2rem;flex-shrink:0}.cp-btn:hover{opacity:1}
-.ir:hover .cp-btn{opacity:0.6}
-@media(max-width:768px){.side{display:none}.content{margin-left:0;padding:1rem}.cats{grid-template-columns:1fr 1fr}.dash{flex-direction:column}}
-</style>
+<title>VibeCode QA \u2014 ${e(proj)}</title>
+<style>${CSS}</style>
 </head>
 <body>
 
@@ -381,25 +101,14 @@ h3{font-size:0.85rem;color:var(--muted);text-transform:uppercase;letter-spacing:
 
 <aside class="side">
   <div class="side-section">Score<div class="side-score" style="color:${gc(report.grade)}">${report.grade} ${report.score}</div></div>
-  ${catScores
-        .map((cs) => {
-        const clr = gc(cs.avg >= 90 ? "A" : cs.avg >= 75 ? "B" : cs.avg >= 60 ? "C" : cs.avg >= 40 ? "D" : "F");
-        return `<div class="side-section"><a class="side-cat" onclick="go('${cs.id}')">${cs.label} <span style="color:${clr}">${cs.avg}</span></a>${cs.checks
-            .map((c) => {
-            const sk = c.details.skipped;
-            const meta = getCheckMeta(c.name);
-            return `<a class="side-check" onclick="go('${cs.id}')" title="${e(meta.label)}"><span style="color:${sk ? "#555" : gc(c.grade)}">${sk ? "—" : c.grade}</span> ${e(meta.label)}</a>`;
-        })
-            .join("")}</div>`;
-    })
-        .join("")}
+  ${sidebar}
 </aside>
 <div class="content">
-  ${overviewPage}
+  ${overview}
   ${catPages}
-  ${issuesPage}
-  ${filesPage}
-  ${heatmapPage}
+  ${issues}
+  ${files}
+  ${heatmap}
   <div class="footer">Generated by <a href="https://vibecodeqa.online">VibeCode QA</a> v${report.version} &mdash; <code>npx @vibecodeqa/cli</code></div>
 </div>
 
@@ -427,47 +136,3 @@ document.querySelector('.tn').classList.add('active');
 </script>
 </body></html>`;
 }
-// ── SVG builders ──
-function buildRing(score, color) {
-    const r = 42;
-    const c = 2 * Math.PI * r;
-    const off = c - (score / 100) * c;
-    return `<svg viewBox="0 0 100 100" style="width:100px;height:100px"><circle cx="50" cy="50" r="${r}" fill="none" stroke="#1e1e24" stroke-width="7"/><circle cx="50" cy="50" r="${r}" fill="none" stroke="${color}" stroke-width="7" stroke-dasharray="${c}" stroke-dashoffset="${off}" stroke-linecap="round" transform="rotate(-90 50 50)"/></svg>`;
-}
-function buildRadar(items) {
-    const n = items.length;
-    if (n < 3)
-        return "";
-    const cx = 120, cy = 120, r = 90;
-    const step = (2 * Math.PI) / n;
-    let grid = "";
-    for (const pct of [25, 50, 75, 100]) {
-        const rr = (pct / 100) * r;
-        const pts = items
-            .map((_, i) => `${cx + rr * Math.cos(i * step - Math.PI / 2)},${cy + rr * Math.sin(i * step - Math.PI / 2)}`)
-            .join(" ");
-        grid += `<polygon points="${pts}" fill="none" stroke="#1e1e24" stroke-width="0.7"/>`;
-    }
-    let axes = "";
-    for (let i = 0; i < n; i++) {
-        const a = i * step - Math.PI / 2;
-        axes += `<line x1="${cx}" y1="${cy}" x2="${cx + r * Math.cos(a)}" y2="${cy + r * Math.sin(a)}" stroke="#1e1e24" stroke-width="0.7"/>`;
-        const lx = cx + (r + 16) * Math.cos(a);
-        const ly = cy + (r + 16) * Math.sin(a);
-        axes += `<text x="${lx}" y="${ly}" text-anchor="middle" dominant-baseline="middle" fill="#6b7280" font-size="9" font-weight="600">${items[i].label}</text>`;
-    }
-    const dataPts = items
-        .map((c, i) => {
-        const a = i * step - Math.PI / 2;
-        const rr = (c.score / 100) * r;
-        return `${cx + rr * Math.cos(a)},${cy + rr * Math.sin(a)}`;
-    })
-        .join(" ");
-    let dots = "";
-    for (let i = 0; i < n; i++) {
-        const a = i * step - Math.PI / 2;
-        const rr = (items[i].score / 100) * r;
-        dots += `<circle cx="${cx + rr * Math.cos(a)}" cy="${cy + rr * Math.sin(a)}" r="3.5" fill="#818cf8"/>`;
-    }
-    return `<svg viewBox="0 0 240 240">${grid}${axes}<polygon points="${dataPts}" fill="#818cf825" stroke="#818cf8" stroke-width="1.5"/>${dots}</svg>`;
-}

package/dist/report/pages.d.ts

@@ -0,0 +1,26 @@
+/** Page renderers for the HTML report. */
+import type { CheckResult, VibeReport } from "../types.js";
+export interface CatScore {
+    id: string;
+    label: string;
+    checks: CheckResult[];
+    avg: number;
+}
+export interface FileEntry {
+    file: string;
+    total: number;
+    errors: number;
+    warnings: number;
+    checks: string[];
+}
+type FL = (path: string, line?: number) => string;
+export declare function overviewPage(report: VibeReport, active: CheckResult[], totalIssues: number, catScores: CatScore[]): string;
+export declare function categoryPages(catScores: CatScore[], fl: FL): string;
+export declare function issuesPage(allChecks: CheckResult[], totalIssues: number, fl: FL): string;
+export declare function filesPage(topFiles: FileEntry[], fl: FL): string;
+export declare function heatmapPage(fileIssues: Map<string, {
+    errors: number;
+    warnings: number;
+    checks: Set<string>;
+}>, fl: FL): string;
+export {};

package/dist/report/pages.js

@@ -0,0 +1,166 @@
+/** Page renderers for the HTML report. */
+import { getCheckMeta } from "../check-meta.js";
+import { generateArchSVG } from "../runners/architecture.js";
+import { e, gc, pc } from "./components.js";
+import { buildRadar, buildRing } from "./svg.js";
+export function overviewPage(report, active, totalIssues, catScores) {
+    const ringPct = report.score;
+    const barChart = active
+        .sort((a, b) => a.score - b.score)
+        .map((c) => {
+        return `<div class="brow"><span class="bl">${e(c.name)}</span><div class="bb"><div class="bf" style="width:${c.score}%;background:${gc(c.grade)}"></div></div><span class="bv" style="color:${gc(c.grade)}">${c.grade} ${c.score}</span></div>`;
+    })
+        .join("");
+    const catCards = catScores
+        .map((cs) => {
+        const clr = gc(cs.avg >= 90 ? "A" : cs.avg >= 75 ? "B" : cs.avg >= 60 ? "C" : cs.avg >= 40 ? "D" : "F");
+        const mini = cs.checks
+            .map((c) => {
+            const sk = c.details.skipped;
+            return `<span class="mc" style="color:${sk ? "#555" : gc(c.grade)}" title="${e(c.name)}: ${sk ? "skip" : c.score}">${sk ? "\u2014" : c.grade}</span>`;
+        })
+            .join("");
+        return `<div class="cc" onclick="go('${cs.id}')"><div class="cc-s" style="color:${clr}">${cs.avg}</div><div class="cc-l">${cs.label}</div><div class="cc-m">${mini}</div></div>`;
+    })
+        .join("");
+    const radarSvg = buildRadar(catScores.map((cs) => ({ label: cs.label, score: cs.avg })));
+    return `<div id="p-overview" class="page active">
+<div class="dash">
+  <div class="hero">
+    ${buildRing(ringPct, gc(report.grade))}
+    <div class="hc"><span class="hg" style="color:${gc(report.grade)}">${report.grade}</span><span class="hs" style="color:${gc(report.grade)}">${report.score}/100</span><span class="hd">${active.length} checks \u00b7 ${totalIssues} issues \u00b7 ${report.meta.duration}ms</span></div>
+  </div>
+  <div class="radar">${radarSvg}</div>
+</div>
+<div class="cats">${catCards}</div>
+<h3>All Checks</h3>
+<div class="bars">${barChart}</div>
+<div class="stack">${Object.entries(report.meta.stack)
+        .filter(([, v]) => v !== "none" && v !== "unknown")
+        .map(([k, v]) => `<span>${k}: <b>${v}</b></span>`)
+        .join("")}</div>
+</div>`;
+}
+export function categoryPages(catScores, fl) {
+    let catPagesHtml = "";
+    for (const cs of catScores) {
+        const subNav = cs.checks
+            .map((c, i) => {
+            const sk = c.details.skipped;
+            return `<a class="sn${i === 0 ? " active" : ""}" data-sub="${cs.id}-${c.name}" onclick="sub(this,'${cs.id}')">${e(c.name)} <span style="color:${sk ? "#555" : gc(c.grade)}">${sk ? "\u2014" : c.grade}</span></a>`;
+        })
+            .join("");
+        const subPages = cs.checks
+            .map((c, i) => {
+            const meta = getCheckMeta(c.name);
+            const sk = c.details.skipped;
+            const detailsFiltered = Object.entries(c.details)
+                .filter(([k]) => k !== "skipped" && k !== "reason" && k !== "graph")
+                .map(([k, v]) => {
+                const d = Array.isArray(v) ? v.join(", ") : typeof v === "object" ? JSON.stringify(v) : String(v);
+                return `<div class="kv"><span class="k">${e(k)}</span><span class="v">${e(d)}</span></div>`;
+            })
+                .join("");
+            // Group issues by file
+            const byFile = new Map();
+            const noFile = [];
+            for (const iss of c.issues) {
+                const f = iss.file?.split(":")[0];
+                if (f) {
+                    const arr = byFile.get(f) || [];
+                    arr.push(iss);
+                    byFile.set(f, arr);
+                }
+                else {
+                    noFile.push(iss);
+                }
+            }
+            let issuesHtml = "";
+            for (const [file, issues] of byFile) {
+                issuesHtml += `<div class="fg"><div class="fn">${fl(file)} <span class="fc">${issues.length}</span></div>`;
+                for (const iss of issues) {
+                    const prompt = `Fix this issue in ${file}${iss.line ? `:${iss.line}` : ""}\n${iss.severity}: ${iss.message}${iss.rule ? ` (${iss.rule})` : ""}\nCheck: ${c.name}`;
+                    issuesHtml += `<div class="ir ${iss.severity}"><span class="is">${iss.severity[0].toUpperCase()}</span>${iss.line ? `<span class="il">${iss.line}</span>` : ""}<span class="im">${e(iss.message)}</span>${iss.rule ? `<span class="iru">${e(iss.rule)}</span>` : ""}<button class="cp-btn" data-prompt="${e(prompt)}" title="Copy fix prompt">\ud83d\udccb</button></div>`;
+                }
+                issuesHtml += `</div>`;
+            }
+            if (noFile.length > 0) {
+                issuesHtml += `<div class="fg"><div class="fn">General</div>`;
+                for (const iss of noFile) {
+                    issuesHtml += `<div class="ir ${iss.severity}"><span class="is">${iss.severity[0].toUpperCase()}</span><span class="im">${e(iss.message)}</span>${iss.rule ? `<span class="iru">${e(iss.rule)}</span>` : ""}</div>`;
+                }
+                issuesHtml += `</div>`;
+            }
+            return `<div class="sp${i === 0 ? " active" : ""}" data-sub="${cs.id}-${c.name}">
+<div class="ch-head"><span class="ch-g" style="color:${sk ? "#555" : gc(c.grade)}">${sk ? "\u2014" : c.grade}</span><div><b>${e(meta.label)}</b><span class="ch-s">${sk ? "skipped" : `${c.score}/100`} \u00b7 weight ${meta.weight}% \u00b7 ${c.duration}ms \u00b7 ${c.issues.length} issues</span></div><span class="pri" style="color:${pc(meta.priority)}">${meta.priority}</span></div>
+${meta.description ? `<div class="info-panel"><div class="ip-row"><span class="ip-label">What</span><span>${e(meta.description)}</span></div><div class="ip-row"><span class="ip-label">Risk</span><span>${e(meta.risk)}</span></div><div class="ip-row"><span class="ip-label">Fix</span><span>${e(meta.recommendation)}</span></div></div>` : ""}
+${sk ? `<p class="skip-r">${e(c.details.reason || "skipped")}</p>` : ""}
+${c.name === "architecture" && !sk ? `<div class="arch-svg">${generateArchSVG(c.details)}</div>` : ""}
+${detailsFiltered ? `<div class="kvs">${detailsFiltered}</div>` : ""}
+${issuesHtml ? `<div class="iss-list">${issuesHtml}</div>` : '<p style="color:var(--muted);font-size:0.8rem;margin-top:1rem">No issues found.</p>'}
+</div>`;
+        })
+            .join("");
+        const clr = gc(cs.avg >= 90 ? "A" : cs.avg >= 75 ? "B" : cs.avg >= 60 ? "C" : cs.avg >= 40 ? "D" : "F");
+        catPagesHtml += `<div id="p-${cs.id}" class="page">
+<div class="cat-head"><span style="color:${clr};font-size:1.8rem;font-weight:900">${cs.avg}</span><span style="color:${clr}">/100</span><span style="color:var(--muted);margin-left:0.5rem">${cs.label}</span></div>
+<div class="bar2"><div class="bf2" style="width:${cs.avg}%;background:${clr}"></div></div>
+<div class="sub-nav">${subNav}</div>
+${subPages}
+</div>`;
+    }
+    return catPagesHtml;
+}
+export function issuesPage(allChecks, totalIssues, fl) {
+    const allIssues = allChecks.flatMap((c) => c.issues.map((i) => ({ check: c.name, ...i })));
+    const issueRows = allIssues
+        .slice(0, 200)
+        .map((i) => {
+        const loc = i.file ? fl(i.file.split(":")[0], i.line) : "";
+        return `<tr class="${i.severity}"><td class="is2">${i.severity[0].toUpperCase()}</td><td class="ic2">${e(i.check)}</td><td class="il2">${loc}</td><td>${e(i.message)}</td><td class="iru2">${e(i.rule || "")}</td></tr>`;
+    })
+        .join("");
+    return `<div id="p-issues" class="page">
+<h2>All Issues <span style="color:var(--muted);font-weight:400">${totalIssues}</span></h2>
+<div class="isf">${allIssues.filter((i) => i.severity === "error").length} errors \u00b7 ${allIssues.filter((i) => i.severity === "warning").length} warnings</div>
+<table class="it"><thead><tr><th></th><th>Check</th><th>Location</th><th>Message</th><th>Rule</th></tr></thead><tbody>${issueRows}</tbody></table>
+${allIssues.length > 200 ? `<p style="color:var(--muted);text-align:center;margin-top:1rem">Showing 200 of ${allIssues.length}</p>` : ""}
+</div>`;
+}
+export function filesPage(topFiles, fl) {
+    const fileRows = topFiles
+        .map((f) => {
+        const pct = Math.min(100, f.total * 5);
+        return `<div class="fr"><span class="ff">${fl(f.file)}</span><div class="fb"><div class="fbf" style="width:${pct}%;background:${f.errors > 0 ? "var(--fail)" : "var(--warn)"}"></div></div><span class="fv">${f.errors}E ${f.warnings}W</span><span class="fcs">${f.checks.join(", ")}</span></div>`;
+    })
+        .join("");
+    return `<div id="p-files" class="page">
+<h2>File Heatmap</h2>
+<p style="color:var(--muted);font-size:0.78rem;margin-bottom:1rem">Top ${topFiles.length} files by total issues across all checks</p>
+${fileRows || '<p style="color:var(--muted)">No file-level issues found.</p>'}
+</div>`;
+}
+export function heatmapPage(fileIssues, fl) {
+    const heatmapFiles = [...fileIssues.entries()].sort((a, b) => b[1].errors + b[1].warnings - a[1].errors - a[1].warnings).slice(0, 30);
+    let heatmapHtml = "";
+    if (heatmapFiles.length > 0) {
+        const maxIssues = Math.max(...heatmapFiles.map(([, d]) => d.errors + d.warnings));
+        heatmapHtml = heatmapFiles
+            .map(([file, d]) => {
+            const total = d.errors + d.warnings;
+            const intensity = maxIssues > 0 ? total / maxIssues : 0;
+            const r = Math.round(239 * intensity); // red channel
+            const g = Math.round(68 * (1 - intensity) + 197 * (d.errors === 0 ? 0.3 : 0)); // green
+            const color = `rgb(${r},${g},30)`;
+            const barW = Math.max(4, Math.round(intensity * 200));
+            const checks = [...d.checks].join(", ");
+            return `<div class="hm-row"><span class="hm-name">${fl(file)}</span><div class="hm-bar" style="width:${barW}px;background:${color}" title="${total} issues (${checks})"></div><span class="hm-count">${d.errors}E ${d.warnings}W</span></div>`;
+        })
+            .join("");
+    }
+    return `<div id="p-heatmap" class="page">
+<h2>Code Heatmap</h2>
+<p style="color:var(--muted);font-size:0.78rem;margin-bottom:1rem">Visual density of issues per file. Red = errors, orange = warnings. Bar width = relative issue count.</p>
+${heatmapHtml || '<p style="color:var(--muted)">No issues to visualize.</p>'}
+</div>`;
+}

package/dist/report/styles.d.ts

@@ -0,0 +1,2 @@
+/** All CSS for the HTML report, extracted for maintainability. */
+export declare const CSS = "\n:root{--bg:#09090b;--card:#111115;--border:#1e1e24;--text:#e5e5e5;--muted:#6b7280;--pass:#22c55e;--fail:#ef4444;--warn:#eab308;--info:#6366f1;--accent:#818cf8}\n*{margin:0;padding:0;box-sizing:border-box}\nbody{font-family:\"Inter\",system-ui,sans-serif;background:var(--bg);color:var(--text);line-height:1.5}\ncode{font-family:\"SF Mono\",Menlo,monospace;font-size:0.85em}\n\n/* Top nav */\n.top{position:sticky;top:0;z-index:20;background:#0c0c0fcc;backdrop-filter:blur(12px);border-bottom:1px solid var(--border);padding:0 2rem;display:flex;align-items:center;gap:0}\n.logo{font-weight:800;font-size:1rem;margin-right:1.5rem;padding:0.7rem 0}\n.logo span{color:var(--accent)}\n.tn{padding:0.7rem 0.8rem;font-size:0.78rem;color:var(--muted);text-decoration:none;cursor:pointer;border-bottom:2px solid transparent;transition:all 0.15s}\n.tn:hover{color:var(--text)}\n.tn.active{color:var(--text);border-bottom-color:var(--accent)}\n\n/* Sidebar */\n.side{position:fixed;top:42px;left:0;bottom:0;width:200px;background:#0c0c0f;border-right:1px solid var(--border);overflow-y:auto;padding:0.8rem 0;font-size:0.7rem;z-index:10}\n.side-section{padding:0.3rem 0;border-bottom:1px solid var(--border)}\n.side-section:last-child{border-bottom:none}\n.side-score{font-size:1.4rem;font-weight:900;padding:0.3rem 0.8rem}\n.side-cat{display:block;padding:0.3rem 0.8rem;color:var(--text);font-weight:700;cursor:pointer;text-decoration:none;font-size:0.72rem}\n.side-cat:hover{background:#14141a}\n.side-check{display:block;padding:0.2rem 0.8rem 0.2rem 1.2rem;color:var(--muted);cursor:pointer;text-decoration:none;font-size:0.65rem}\n.side-check:hover{color:var(--text);background:#14141a}\n.side-check span{display:inline-block;width:1rem;font-weight:800;text-align:center}\n\n/* Content */\n.content{max-width:900px;margin-left:200px;padding:2rem}\n.page{display:none;animation:fadeIn 0.15s}\n.page.active{display:block}\n@keyframes fadeIn{from{opacity:0}to{opacity:1}}\n\n/* Overview */\n.dash{display:flex;gap:2rem;margin-bottom:2rem;align-items:center;flex-wrap:wrap}\n.hero{display:flex;align-items:center;gap:1rem}\n.hero svg{width:100px;height:100px}\n.hc{display:flex;flex-direction:column}\n.hg{font-size:2.5rem;font-weight:900;line-height:1}\n.hs{font-size:1rem;font-weight:600}\n.hd{font-size:0.68rem;color:var(--muted)}\n.radar{flex:1;display:flex;justify-content:center}\n.radar svg{max-width:240px;width:100%}\n.cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:0.6rem;margin-bottom:2rem}\n.cc{background:var(--card);border:1px solid var(--border);border-radius:0.6rem;padding:0.8rem;cursor:pointer;transition:border-color 0.15s}\n.cc:hover{border-color:var(--accent)}\n.cc-s{font-size:1.8rem;font-weight:900}\n.cc-l{font-size:0.75rem;color:var(--muted)}\n.cc-m{margin-top:0.3rem;display:flex;gap:0.25rem}\n.mc{font-size:0.65rem;font-weight:800}\nh3{font-size:0.85rem;color:var(--muted);text-transform:uppercase;letter-spacing:0.04em;margin-bottom:0.5rem}\n.bars{margin-bottom:1.5rem}\n.brow{display:flex;align-items:center;gap:0.4rem;margin-bottom:0.25rem;font-size:0.72rem}\n.bl{width:80px;text-align:right;color:var(--muted);flex-shrink:0}\n.bb{flex:1;height:14px;background:var(--card);border-radius:3px;overflow:hidden;border:1px solid var(--border)}\n.bf{height:100%;border-radius:2px}\n.bv{width:36px;font-weight:700;font-size:0.68rem}\n.stack{display:flex;gap:0.35rem;flex-wrap:wrap}\n.stack span{background:var(--card);border:1px solid var(--border);padding:0.1rem 0.45rem;border-radius:9999px;font-size:0.62rem;color:var(--muted)}\n\n/* Category pages */\n.cat-head{margin-bottom:0.3rem}\n.bar2{height:4px;background:var(--card);border-radius:2px;margin-bottom:1rem;overflow:hidden}\n.bf2{height:100%;border-radius:2px}\n.sub-nav{display:flex;gap:0;border-bottom:1px solid var(--border);margin-bottom:1rem}\n.sn{padding:0.5rem 0.8rem;font-size:0.75rem;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent}\n.sn:hover{color:var(--text)}\n.sn.active{color:var(--text);border-bottom-color:var(--accent)}\n.sp{display:none}.sp.active{display:block}\n\n/* Check detail */\n.ch-head{display:flex;align-items:center;gap:0.7rem;margin-bottom:0.8rem}\n.ch-g{font-size:2rem;font-weight:900}\n.ch-s{display:block;font-size:0.7rem;color:var(--muted)}\n.pri{font-size:0.62rem;font-weight:700;text-transform:uppercase;letter-spacing:0.04em;padding:0.15rem 0.5rem;border-radius:9999px;border:1px solid currentColor;flex-shrink:0}\n.info-panel{background:#0d0d12;border:1px solid var(--border);border-radius:0.5rem;padding:0.7rem 0.9rem;margin-bottom:1rem;font-size:0.72rem;line-height:1.6}\n.ip-row{margin-bottom:0.4rem;display:flex;gap:0.5rem}\n.ip-row:last-child{margin-bottom:0}\n.ip-label{color:var(--accent);font-weight:700;min-width:2.5rem;flex-shrink:0}\n.skip-r{color:var(--muted);font-style:italic;font-size:0.78rem}\n.kvs{display:flex;gap:0.6rem;flex-wrap:wrap;margin-bottom:1rem}\n.kv{background:var(--card);border:1px solid var(--border);border-radius:0.4rem;padding:0.3rem 0.6rem;font-size:0.7rem}\n.k{color:var(--muted);margin-right:0.3rem}\n.v{font-weight:600}\n\n/* Issue list grouped by file */\n.iss-list{margin-top:1rem}\n.fg{margin-bottom:0.8rem}\n.fn{font-size:0.72rem;font-weight:600;font-family:\"SF Mono\",monospace;padding:0.3rem 0;border-bottom:1px solid var(--border);margin-bottom:0.2rem;display:flex;align-items:center;gap:0.5rem}\n.fc{background:var(--border);border-radius:9999px;padding:0 0.4rem;font-size:0.6rem;color:var(--muted)}\n.ir{font-size:0.65rem;font-family:\"SF Mono\",monospace;padding:0.12rem 0 0.12rem 0.5rem;display:flex;gap:0.4rem;align-items:baseline}\n.is{font-weight:800;font-size:0.55rem;width:0.9rem;text-align:center;border-radius:2px;flex-shrink:0}\n.ir.error .is{color:var(--fail);background:#ef444418}\n.ir.warning .is{color:var(--warn);background:#eab30818}\n.il{color:var(--accent);min-width:2rem;flex-shrink:0}\n.im{flex:1;word-break:break-word}\n.iru{color:#555;font-size:0.55rem}\n\n/* All issues table */\n.isf{color:var(--muted);font-size:0.75rem;margin-bottom:0.8rem}\n.it{width:100%;border-collapse:collapse;font-size:0.68rem}\n.it th{text-align:left;padding:0.35rem 0.4rem;color:var(--muted);font-size:0.62rem;text-transform:uppercase;border-bottom:1px solid var(--border)}\n.it td{padding:0.25rem 0.4rem;border-bottom:1px solid var(--border);font-family:\"SF Mono\",monospace;font-size:0.62rem}\n.it tr.error .is2{color:var(--fail)}\n.it tr.warning .is2{color:var(--warn)}\n.is2{font-weight:800;width:1rem}\n.ic2{color:var(--muted);width:70px}\n.il2{color:var(--muted)}\n.iru2{color:#555;font-size:0.58rem}\n\n/* File heatmap */\n.fr{display:flex;align-items:center;gap:0.5rem;margin-bottom:0.3rem;font-size:0.7rem}\n.ff{width:200px;font-family:\"SF Mono\",monospace;font-size:0.65rem;flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n.fb{flex:1;height:12px;background:var(--card);border-radius:3px;overflow:hidden;border:1px solid var(--border)}\n.fbf{height:100%;border-radius:2px}\n.fv{width:50px;font-size:0.65rem;color:var(--muted);flex-shrink:0}\n.fcs{font-size:0.6rem;color:#555}\n\n.footer{text-align:center;color:var(--muted);font-size:0.58rem;margin-top:2rem;padding:0.8rem 0;border-top:1px solid var(--border)}\n.footer a{color:var(--muted)}\n.flink{color:var(--accent);text-decoration:none;font-family:\"SF Mono\",monospace}.flink:hover{text-decoration:underline}\n.arch-svg{margin:1rem 0;overflow-x:auto}\n.hm-row{display:flex;align-items:center;gap:0.5rem;margin-bottom:0.2rem;font-size:0.7rem}\n.hm-name{width:200px;flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:\"SF Mono\",monospace;font-size:0.65rem}\n.hm-bar{height:14px;border-radius:3px;min-width:4px}\n.hm-count{color:var(--muted);font-size:0.65rem;flex-shrink:0}\n.arch-svg svg{border-radius:8px}\n.cp-btn{background:none;border:none;cursor:pointer;font-size:0.6rem;opacity:0.3;padding:0 0.2rem;flex-shrink:0}.cp-btn:hover{opacity:1}\n.ir:hover .cp-btn{opacity:0.6}\n@media(max-width:768px){.side{display:none}.content{margin-left:0;padding:1rem}.cats{grid-template-columns:1fr 1fr}.dash{flex-direction:column}}\n";

package/dist/report/styles.js

@@ -0,0 +1,130 @@
+/** All CSS for the HTML report, extracted for maintainability. */
+export const CSS = `
+:root{--bg:#09090b;--card:#111115;--border:#1e1e24;--text:#e5e5e5;--muted:#6b7280;--pass:#22c55e;--fail:#ef4444;--warn:#eab308;--info:#6366f1;--accent:#818cf8}
+*{margin:0;padding:0;box-sizing:border-box}
+body{font-family:"Inter",system-ui,sans-serif;background:var(--bg);color:var(--text);line-height:1.5}
+code{font-family:"SF Mono",Menlo,monospace;font-size:0.85em}
+
+/* Top nav */
+.top{position:sticky;top:0;z-index:20;background:#0c0c0fcc;backdrop-filter:blur(12px);border-bottom:1px solid var(--border);padding:0 2rem;display:flex;align-items:center;gap:0}
+.logo{font-weight:800;font-size:1rem;margin-right:1.5rem;padding:0.7rem 0}
+.logo span{color:var(--accent)}
+.tn{padding:0.7rem 0.8rem;font-size:0.78rem;color:var(--muted);text-decoration:none;cursor:pointer;border-bottom:2px solid transparent;transition:all 0.15s}
+.tn:hover{color:var(--text)}
+.tn.active{color:var(--text);border-bottom-color:var(--accent)}
+
+/* Sidebar */
+.side{position:fixed;top:42px;left:0;bottom:0;width:200px;background:#0c0c0f;border-right:1px solid var(--border);overflow-y:auto;padding:0.8rem 0;font-size:0.7rem;z-index:10}
+.side-section{padding:0.3rem 0;border-bottom:1px solid var(--border)}
+.side-section:last-child{border-bottom:none}
+.side-score{font-size:1.4rem;font-weight:900;padding:0.3rem 0.8rem}
+.side-cat{display:block;padding:0.3rem 0.8rem;color:var(--text);font-weight:700;cursor:pointer;text-decoration:none;font-size:0.72rem}
+.side-cat:hover{background:#14141a}
+.side-check{display:block;padding:0.2rem 0.8rem 0.2rem 1.2rem;color:var(--muted);cursor:pointer;text-decoration:none;font-size:0.65rem}
+.side-check:hover{color:var(--text);background:#14141a}
+.side-check span{display:inline-block;width:1rem;font-weight:800;text-align:center}
+
+/* Content */
+.content{max-width:900px;margin-left:200px;padding:2rem}
+.page{display:none;animation:fadeIn 0.15s}
+.page.active{display:block}
+@keyframes fadeIn{from{opacity:0}to{opacity:1}}
+
+/* Overview */
+.dash{display:flex;gap:2rem;margin-bottom:2rem;align-items:center;flex-wrap:wrap}
+.hero{display:flex;align-items:center;gap:1rem}
+.hero svg{width:100px;height:100px}
+.hc{display:flex;flex-direction:column}
+.hg{font-size:2.5rem;font-weight:900;line-height:1}
+.hs{font-size:1rem;font-weight:600}
+.hd{font-size:0.68rem;color:var(--muted)}
+.radar{flex:1;display:flex;justify-content:center}
+.radar svg{max-width:240px;width:100%}
+.cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:0.6rem;margin-bottom:2rem}
+.cc{background:var(--card);border:1px solid var(--border);border-radius:0.6rem;padding:0.8rem;cursor:pointer;transition:border-color 0.15s}
+.cc:hover{border-color:var(--accent)}
+.cc-s{font-size:1.8rem;font-weight:900}
+.cc-l{font-size:0.75rem;color:var(--muted)}
+.cc-m{margin-top:0.3rem;display:flex;gap:0.25rem}
+.mc{font-size:0.65rem;font-weight:800}
+h3{font-size:0.85rem;color:var(--muted);text-transform:uppercase;letter-spacing:0.04em;margin-bottom:0.5rem}
+.bars{margin-bottom:1.5rem}
+.brow{display:flex;align-items:center;gap:0.4rem;margin-bottom:0.25rem;font-size:0.72rem}
+.bl{width:80px;text-align:right;color:var(--muted);flex-shrink:0}
+.bb{flex:1;height:14px;background:var(--card);border-radius:3px;overflow:hidden;border:1px solid var(--border)}
+.bf{height:100%;border-radius:2px}
+.bv{width:36px;font-weight:700;font-size:0.68rem}
+.stack{display:flex;gap:0.35rem;flex-wrap:wrap}
+.stack span{background:var(--card);border:1px solid var(--border);padding:0.1rem 0.45rem;border-radius:9999px;font-size:0.62rem;color:var(--muted)}
+
+/* Category pages */
+.cat-head{margin-bottom:0.3rem}
+.bar2{height:4px;background:var(--card);border-radius:2px;margin-bottom:1rem;overflow:hidden}
+.bf2{height:100%;border-radius:2px}
+.sub-nav{display:flex;gap:0;border-bottom:1px solid var(--border);margin-bottom:1rem}
+.sn{padding:0.5rem 0.8rem;font-size:0.75rem;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent}
+.sn:hover{color:var(--text)}
+.sn.active{color:var(--text);border-bottom-color:var(--accent)}
+.sp{display:none}.sp.active{display:block}
+
+/* Check detail */
+.ch-head{display:flex;align-items:center;gap:0.7rem;margin-bottom:0.8rem}
+.ch-g{font-size:2rem;font-weight:900}
+.ch-s{display:block;font-size:0.7rem;color:var(--muted)}
+.pri{font-size:0.62rem;font-weight:700;text-transform:uppercase;letter-spacing:0.04em;padding:0.15rem 0.5rem;border-radius:9999px;border:1px solid currentColor;flex-shrink:0}
+.info-panel{background:#0d0d12;border:1px solid var(--border);border-radius:0.5rem;padding:0.7rem 0.9rem;margin-bottom:1rem;font-size:0.72rem;line-height:1.6}
+.ip-row{margin-bottom:0.4rem;display:flex;gap:0.5rem}
+.ip-row:last-child{margin-bottom:0}
+.ip-label{color:var(--accent);font-weight:700;min-width:2.5rem;flex-shrink:0}
+.skip-r{color:var(--muted);font-style:italic;font-size:0.78rem}
+.kvs{display:flex;gap:0.6rem;flex-wrap:wrap;margin-bottom:1rem}
+.kv{background:var(--card);border:1px solid var(--border);border-radius:0.4rem;padding:0.3rem 0.6rem;font-size:0.7rem}
+.k{color:var(--muted);margin-right:0.3rem}
+.v{font-weight:600}
+
+/* Issue list grouped by file */
+.iss-list{margin-top:1rem}
+.fg{margin-bottom:0.8rem}
+.fn{font-size:0.72rem;font-weight:600;font-family:"SF Mono",monospace;padding:0.3rem 0;border-bottom:1px solid var(--border);margin-bottom:0.2rem;display:flex;align-items:center;gap:0.5rem}
+.fc{background:var(--border);border-radius:9999px;padding:0 0.4rem;font-size:0.6rem;color:var(--muted)}
+.ir{font-size:0.65rem;font-family:"SF Mono",monospace;padding:0.12rem 0 0.12rem 0.5rem;display:flex;gap:0.4rem;align-items:baseline}
+.is{font-weight:800;font-size:0.55rem;width:0.9rem;text-align:center;border-radius:2px;flex-shrink:0}
+.ir.error .is{color:var(--fail);background:#ef444418}
+.ir.warning .is{color:var(--warn);background:#eab30818}
+.il{color:var(--accent);min-width:2rem;flex-shrink:0}
+.im{flex:1;word-break:break-word}
+.iru{color:#555;font-size:0.55rem}
+
+/* All issues table */
+.isf{color:var(--muted);font-size:0.75rem;margin-bottom:0.8rem}
+.it{width:100%;border-collapse:collapse;font-size:0.68rem}
+.it th{text-align:left;padding:0.35rem 0.4rem;color:var(--muted);font-size:0.62rem;text-transform:uppercase;border-bottom:1px solid var(--border)}
+.it td{padding:0.25rem 0.4rem;border-bottom:1px solid var(--border);font-family:"SF Mono",monospace;font-size:0.62rem}
+.it tr.error .is2{color:var(--fail)}
+.it tr.warning .is2{color:var(--warn)}
+.is2{font-weight:800;width:1rem}
+.ic2{color:var(--muted);width:70px}
+.il2{color:var(--muted)}
+.iru2{color:#555;font-size:0.58rem}
+
+/* File heatmap */
+.fr{display:flex;align-items:center;gap:0.5rem;margin-bottom:0.3rem;font-size:0.7rem}
+.ff{width:200px;font-family:"SF Mono",monospace;font-size:0.65rem;flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.fb{flex:1;height:12px;background:var(--card);border-radius:3px;overflow:hidden;border:1px solid var(--border)}
+.fbf{height:100%;border-radius:2px}
+.fv{width:50px;font-size:0.65rem;color:var(--muted);flex-shrink:0}
+.fcs{font-size:0.6rem;color:#555}
+
+.footer{text-align:center;color:var(--muted);font-size:0.58rem;margin-top:2rem;padding:0.8rem 0;border-top:1px solid var(--border)}
+.footer a{color:var(--muted)}
+.flink{color:var(--accent);text-decoration:none;font-family:"SF Mono",monospace}.flink:hover{text-decoration:underline}
+.arch-svg{margin:1rem 0;overflow-x:auto}
+.hm-row{display:flex;align-items:center;gap:0.5rem;margin-bottom:0.2rem;font-size:0.7rem}
+.hm-name{width:200px;flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:"SF Mono",monospace;font-size:0.65rem}
+.hm-bar{height:14px;border-radius:3px;min-width:4px}
+.hm-count{color:var(--muted);font-size:0.65rem;flex-shrink:0}
+.arch-svg svg{border-radius:8px}
+.cp-btn{background:none;border:none;cursor:pointer;font-size:0.6rem;opacity:0.3;padding:0 0.2rem;flex-shrink:0}.cp-btn:hover{opacity:1}
+.ir:hover .cp-btn{opacity:0.6}
+@media(max-width:768px){.side{display:none}.content{margin-left:0;padding:1rem}.cats{grid-template-columns:1fr 1fr}.dash{flex-direction:column}}
+`;

package/dist/report/svg.d.ts

@@ -0,0 +1,12 @@
+/** SVG builders for the HTML report (score ring, radar chart). */
+export declare function buildRing(score: number, color: string): string;
+export declare function buildRadar(items: {
+    label: string;
+    score: number;
+}[]): string;
+/** Sparkline — mini line chart for trend display. */
+export declare function buildSparkline(values: number[], opts?: {
+    width?: number;
+    height?: number;
+    color?: string;
+}): string;

package/dist/report/svg.js

@@ -0,0 +1,67 @@
+/** SVG builders for the HTML report (score ring, radar chart). */
+export function buildRing(score, color) {
+    const r = 42;
+    const c = 2 * Math.PI * r;
+    const off = c - (score / 100) * c;
+    return `<svg viewBox="0 0 100 100" style="width:100px;height:100px"><circle cx="50" cy="50" r="${r}" fill="none" stroke="#1e1e24" stroke-width="7"/><circle cx="50" cy="50" r="${r}" fill="none" stroke="${color}" stroke-width="7" stroke-dasharray="${c}" stroke-dashoffset="${off}" stroke-linecap="round" transform="rotate(-90 50 50)"/></svg>`;
+}
+export function buildRadar(items) {
+    const n = items.length;
+    if (n < 3)
+        return "";
+    const cx = 120, cy = 120, r = 90;
+    const step = (2 * Math.PI) / n;
+    let grid = "";
+    for (const pct of [25, 50, 75, 100]) {
+        const rr = (pct / 100) * r;
+        const pts = items
+            .map((_, i) => `${cx + rr * Math.cos(i * step - Math.PI / 2)},${cy + rr * Math.sin(i * step - Math.PI / 2)}`)
+            .join(" ");
+        grid += `<polygon points="${pts}" fill="none" stroke="#1e1e24" stroke-width="0.7"/>`;
+    }
+    let axes = "";
+    for (let i = 0; i < n; i++) {
+        const a = i * step - Math.PI / 2;
+        axes += `<line x1="${cx}" y1="${cy}" x2="${cx + r * Math.cos(a)}" y2="${cy + r * Math.sin(a)}" stroke="#1e1e24" stroke-width="0.7"/>`;
+        const lx = cx + (r + 16) * Math.cos(a);
+        const ly = cy + (r + 16) * Math.sin(a);
+        axes += `<text x="${lx}" y="${ly}" text-anchor="middle" dominant-baseline="middle" fill="#6b7280" font-size="9" font-weight="600">${items[i].label}</text>`;
+    }
+    const dataPts = items
+        .map((c, i) => {
+        const a = i * step - Math.PI / 2;
+        const rr = (c.score / 100) * r;
+        return `${cx + rr * Math.cos(a)},${cy + rr * Math.sin(a)}`;
+    })
+        .join(" ");
+    let dots = "";
+    for (let i = 0; i < n; i++) {
+        const a = i * step - Math.PI / 2;
+        const rr = (items[i].score / 100) * r;
+        dots += `<circle cx="${cx + rr * Math.cos(a)}" cy="${cy + rr * Math.sin(a)}" r="3.5" fill="#818cf8"/>`;
+    }
+    return `<svg viewBox="0 0 240 240">${grid}${axes}<polygon points="${dataPts}" fill="#818cf825" stroke="#818cf8" stroke-width="1.5"/>${dots}</svg>`;
+}
+/** Sparkline — mini line chart for trend display. */
+export function buildSparkline(values, opts) {
+    const width = opts?.width ?? 120;
+    const height = opts?.height ?? 30;
+    const color = opts?.color ?? "#818cf8";
+    if (values.length === 0)
+        return "";
+    if (values.length === 1) {
+        const y = (height / 2).toFixed(1);
+        return `<svg viewBox="0 0 ${width} ${height}" width="${width}" height="${height}"><polyline points="${(width / 2).toFixed(1)},${y}" fill="none" stroke="${color}" stroke-width="1.5"/><circle cx="${(width / 2).toFixed(1)}" cy="${y}" r="1.5" fill="${color}"/></svg>`;
+    }
+    const max = Math.max(...values, 1);
+    const min = Math.min(...values, 0);
+    const range = max - min || 1;
+    const step = width / (values.length - 1);
+    const points = values.map((v, i) => `${(i * step).toFixed(1)},${(height - ((v - min) / range) * (height - 4) - 2).toFixed(1)}`).join(" ");
+    const dots = values.map((v, i) => {
+        const x = (i * step).toFixed(1);
+        const y = (height - ((v - min) / range) * (height - 4) - 2).toFixed(1);
+        return `<circle cx="${x}" cy="${y}" r="1.5" fill="${color}"/>`;
+    }).join("");
+    return `<svg viewBox="0 0 ${width} ${height}" width="${width}" height="${height}"><polyline points="${points}" fill="none" stroke="${color}" stroke-width="1.5" stroke-linecap="round"/>${dots}</svg>`;
+}

package/dist/runners/error-handling.d.ts

@@ -0,0 +1,3 @@
+/** Error handling check — detects poor error handling patterns. */
+import type { CheckResult, StackInfo } from "../types.js";
+export declare function runErrorHandling(cwd: string, stack: StackInfo): CheckResult;

package/dist/runners/error-handling.js

@@ -0,0 +1,48 @@
+/** Error handling check — detects poor error handling patterns. */
+import { gradeFromScore } from "../types.js";
+import { getProductionFiles } from "../fs-utils.js";
+export function runErrorHandling(cwd, stack) {
+    const start = Date.now();
+    const issues = [];
+    const files = getProductionFiles(cwd);
+    if (files.length === 0) {
+        return { name: "error-handling", score: 100, grade: "A", details: { skipped: true, reason: "no source files" }, issues: [], duration: Date.now() - start };
+    }
+    let emptyCatch = 0;
+    let throwString = 0;
+    for (const f of files) {
+        const lines = f.content.split("\n");
+        for (let i = 0; i < lines.length; i++) {
+            const line = lines[i].trim();
+            if (/catch\s*\([^)]*\)\s*\{\s*\}/.test(line) || /catch\s*\{\s*\}/.test(line)) {
+                emptyCatch++;
+                issues.push({ severity: "error", message: "Empty catch block", file: f.path, line: i + 1, rule: "empty-catch" });
+            }
+            if (/\bthrow\s+["'`]/.test(line)) {
+                throwString++;
+                issues.push({ severity: "warning", message: "throw string literal — use throw new Error()", file: f.path, line: i + 1, rule: "throw-string" });
+            }
+        }
+    }
+    let hasErrorBoundary = false;
+    if (stack.framework === "react") {
+        for (const f of files) {
+            if (f.content.includes("componentDidCatch") || f.content.includes("ErrorBoundary")) {
+                hasErrorBoundary = true;
+                break;
+            }
+        }
+        if (!hasErrorBoundary && files.some((f) => f.ext === ".tsx")) {
+            issues.push({ severity: "warning", message: "React project with no Error Boundary", rule: "no-error-boundary" });
+        }
+    }
+    const score = Math.max(0, Math.min(100, 100 - emptyCatch * 5 - throwString * 2 - (stack.framework === "react" && !hasErrorBoundary ? 3 : 0)));
+    return {
+        name: "error-handling",
+        score,
+        grade: gradeFromScore(score),
+        details: { emptyCatch, throwString, hasErrorBoundary: stack.framework === "react" ? hasErrorBoundary : "n/a" },
+        issues,
+        duration: Date.now() - start,
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vibecodeqa/cli",
-  "version": "0.14.0",
+  "version": "0.16.0",
   "description": "Code health scanner for the AI coding era. 15 checks, zero config, full report.",
   "type": "module",
   "bin": {