@vibecodeqa/cli 0.13.0 → 0.15.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.",
@@ -153,7 +163,7 @@ export const CHECK_META = {
     },
 };
 export function getCheckMeta(name) {
-    return CHECK_META[name] || {
+    return (CHECK_META[name] || {
         name,
         label: name,
         category: "Other",
@@ -162,5 +172,5 @@ export function getCheckMeta(name) {
         description: "",
         risk: "",
         recommendation: "",
-    };
+    });
 }

package/dist/cli.js

@@ -1,24 +1,25 @@
 #!/usr/bin/env node
 /** vibe-check — code health scanner for the AI coding era. */
-import { existsSync, mkdirSync, readFileSync, readdirSync, unlinkSync, writeFileSync } from "node:fs";
+import { existsSync, mkdirSync, readdirSync, readFileSync, unlinkSync, writeFileSync } from "node:fs";
 import { join, resolve } from "node:path";
 import { detectRepoUrl, detectStack } from "./detect.js";
 import { generateHTML } from "./report/html.js";
-import { runComplexity } from "./runners/complexity.js";
 import { runArchitecture } from "./runners/architecture.js";
+import { runComplexity } from "./runners/complexity.js";
 import { runConfusion } from "./runners/confusion.js";
 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";
 import { runStandards } from "./runners/standards.js";
 import { runStructure } from "./runners/structure.js";
 import { runTesting } from "./runners/testing.js";
-import { runTypeCheck } from "./runners/types-check.js";
 import { runTypeSafety } from "./runners/type-safety.js";
+import { runTypeCheck } from "./runners/types-check.js";
 import { computeScore } from "./score.js";
 import { computeTrend, formatTrend } from "./trend.js";
 import { gradeFromScore } from "./types.js";
@@ -43,14 +44,14 @@ async function main() {
     const start = Date.now();
     if (!jsonOnly) {
         console.log("");
-        console.log("  \x1b[1m\x1b[38;5;141mvcqa\x1b[0m v" + VERSION);
-        console.log("  \x1b[2m" + cwd + "\x1b[0m");
+        console.log(`  \x1b[1m\x1b[38;5;141mvcqa\x1b[0m v${VERSION}`);
+        console.log(`  \x1b[2m${cwd}\x1b[0m`);
         console.log("");
     }
     const stack = detectStack(cwd);
     if (!jsonOnly) {
         const parts = [stack.language, stack.framework, stack.bundler, stack.testRunner, stack.linter, stack.packageManager].filter((v) => v !== "none" && v !== "unknown");
-        console.log("  stack: " + parts.join(" + "));
+        console.log(`  stack: ${parts.join(" + ")}`);
         console.log("");
     }
     const checks = [];
@@ -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) },
@@ -80,14 +82,14 @@ async function main() {
     ];
     for (const runner of runners) {
         if (!jsonOnly)
-            process.stdout.write("  " + runner.name.padEnd(14));
+            process.stdout.write(`  ${runner.name.padEnd(14)}`);
         const result = runner.fn();
         checks.push(result);
         if (!jsonOnly) {
             const skipped = result.details.skipped;
             const c = skipped ? "\x1b[2m" : color(result.grade);
             const label = skipped ? "skip" : result.grade;
-            const scoreStr = skipped ? "—" : result.score + "/100";
+            const scoreStr = skipped ? "—" : `${result.score}/100`;
             const issueStr = result.issues.length > 0 ? `  \x1b[2m${result.issues.length} issues\x1b[0m` : "";
             console.log(`${c}${label.padEnd(5)}${scoreStr}\x1b[0m  \x1b[2m${result.duration}ms\x1b[0m${issueStr}`);
         }
@@ -115,17 +117,21 @@ async function main() {
     const historyFile = join(historyDir, `${report.timestamp.replace(/[:.]/g, "-")}.json`);
     writeFileSync(historyFile, JSON.stringify(report, null, 2));
     // Keep only last 30 history entries
-    const historyFiles = readdirSync(historyDir).filter((f) => f.endsWith(".json")).sort();
+    const historyFiles = readdirSync(historyDir)
+        .filter((f) => f.endsWith(".json"))
+        .sort();
     if (historyFiles.length > 30) {
         for (const old of historyFiles.slice(0, historyFiles.length - 30)) {
             try {
                 unlinkSync(join(historyDir, old));
             }
-            catch { /* ignore */ }
+            catch {
+                /* ignore */
+            }
         }
     }
     writeFileSync(join(outputDir, "report.json"), JSON.stringify(report, null, 2));
-    writeFileSync(join(outputDir, "report.html"), generateHTML(report));
+    writeFileSync(join(outputDir, "report.html"), generateHTML(report, historyDir));
     if (jsonOnly) {
         console.log(JSON.stringify(report));
     }
@@ -136,8 +142,8 @@ async function main() {
         if (trend)
             console.log(formatTrend(trend));
         console.log("");
-        console.log("  \x1b[2mReport: " + join(outputDir, "report.html") + "\x1b[0m");
-        console.log("  \x1b[2mJSON:   " + join(outputDir, "report.json") + "\x1b[0m");
+        console.log(`  \x1b[2mReport: ${join(outputDir, "report.html")}\x1b[0m`);
+        console.log(`  \x1b[2mJSON:   ${join(outputDir, "report.json")}\x1b[0m`);
         console.log("");
     }
     if (ciMode && score < 60) {
@@ -149,7 +155,9 @@ async function main() {
             const openCmd = process.platform === "darwin" ? "open" : "xdg-open";
             execFileSync(openCmd, [join(outputDir, "report.html")], { stdio: "ignore" });
         }
-        catch { /* failed to open browser */ }
+        catch {
+            /* failed to open browser */
+        }
     }
     // Watch mode — re-run on file changes
     if (watchMode) {

package/dist/detect.js

@@ -20,33 +20,11 @@ export function detectStack(cwd) {
         : allDeps.react || allDeps.vue
             ? "javascript"
             : "unknown";
-    const framework = allDeps.react
-        ? "react"
-        : allDeps.vue
-            ? "vue"
-            : allDeps.svelte
-                ? "svelte"
-                : "none";
-    const bundler = allDeps.vite
-        ? "vite"
-        : allDeps.webpack
-            ? "webpack"
-            : allDeps.esbuild
-                ? "esbuild"
-                : "none";
+    const framework = allDeps.react ? "react" : allDeps.vue ? "vue" : allDeps.svelte ? "svelte" : "none";
+    const bundler = allDeps.vite ? "vite" : allDeps.webpack ? "webpack" : allDeps.esbuild ? "esbuild" : "none";
     const testRunner = allDeps.vitest ? "vitest" : allDeps.jest ? "jest" : "none";
-    const linter = allDeps["@biomejs/biome"]
-        ? "biome"
-        : allDeps.eslint
-            ? "eslint"
-            : "none";
-    const packageManager = has("pnpm-lock.yaml")
-        ? "pnpm"
-        : has("bun.lockb")
-            ? "bun"
-            : has("yarn.lock")
-                ? "yarn"
-                : "npm";
+    const linter = allDeps["@biomejs/biome"] ? "biome" : allDeps.eslint ? "eslint" : "none";
+    const packageManager = has("pnpm-lock.yaml") ? "pnpm" : has("bun.lockb") ? "bun" : has("yarn.lock") ? "yarn" : "npm";
     return { language, framework, bundler, testRunner, linter, packageManager };
 }
 /** Detect GitHub/GitLab repo URL from git remote. */
@@ -55,7 +33,7 @@ export function detectRepoUrl(cwd) {
         const remote = execSync("git remote get-url origin", { cwd, encoding: "utf-8", stdio: ["pipe", "pipe", "pipe"] }).trim();
         const branch = execSync("git branch --show-current", { cwd, encoding: "utf-8", stdio: ["pipe", "pipe", "pipe"] }).trim() || "main";
         // Convert SSH to HTTPS
-        let url = remote
+        const url = remote
             .replace(/^git@github\.com:/, "https://github.com/")
             .replace(/^git@gitlab\.com:/, "https://gitlab.com/")
             .replace(/\.git$/, "");

package/dist/fs-utils.js

@@ -12,7 +12,9 @@ export function collectSourceFiles(cwd, opts) {
         try {
             walk(join(cwd, dir), cwd, files, opts?.extraExts ? ALL_EXTS : CODE_EXTS);
         }
-        catch { /* dir doesn't exist */ }
+        catch {
+            /* dir doesn't exist */
+        }
     }
     if (opts?.includeTests)
         return files;
@@ -67,7 +69,7 @@ function walk(dir, cwd, out, exts) {
             if (statSync(full).size > 1_000_000)
                 continue;
             const content = readFileSync(full, "utf-8");
-            const relPath = full.replace(cwd + "/", "");
+            const relPath = full.replace(`${cwd}/`, "");
             const isTest = entry.includes(".test.") || entry.includes(".spec.") || relPath.includes("__tests__");
             out.push({
                 path: relPath,

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/html.d.ts

@@ -9,4 +9,4 @@
  * All in one self-contained HTML file using hash routing + show/hide.
  */
 import type { VibeReport } from "../types.js";
-export declare function generateHTML(report: VibeReport): string;
+export declare function generateHTML(report: VibeReport, historyDir?: string): string;

package/dist/report/html.js

@@ -9,7 +9,9 @@
  * All in one self-contained HTML file using hash routing + show/hide.
  */
 import { getCheckMeta } from "../check-meta.js";
+import { loadHistory, scoreDeltaBadge } from "../history.js";
 import { generateArchSVG } from "../runners/architecture.js";
+import { buildSparkline } from "./svg.js";
 function e(s) {
     return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 }
@@ -18,7 +20,7 @@ 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 : ""}`;
+    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) {
@@ -29,13 +31,13 @@ function pc(p) {
 }
 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: ["error-handling", "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"] },
     { id: "llm", label: "LLM Readiness", checks: ["confusion", "context"] },
 ];
-export function generateHTML(report) {
+export function generateHTML(report, historyDir) {
     const allChecks = report.checks;
     const checkMap = new Map(allChecks.map((c) => [c.name, c]));
     const active = allChecks.filter((c) => !c.details.skipped);
@@ -83,18 +85,59 @@ export function generateHTML(report) {
     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) => {
+    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) => {
+    })
+        .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 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 ? "—" : c.grade}</span>`;
-        }).join("");
+        })
+            .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("");
+    })
+        .join("");
     const radarSvg = buildRadar(catScores.map((cs) => ({ label: cs.label, score: cs.avg })));
+    // ── Trend sparklines from history ──
+    let trendSection = "";
+    if (historyDir) {
+        const history = loadHistory(historyDir);
+        if (history.length >= 2) {
+            const scores = history.map((h) => h.score);
+            const badge = scoreDeltaBadge(history);
+            const badgeHtml = badge
+                ? `<span class="trend-badge" style="color:${badge.delta > 0 ? "var(--pass)" : badge.delta < 0 ? "var(--fail)" : "var(--muted)"}">${e(badge.label)}</span>`
+                : "";
+            // Composite score sparkline
+            const mainSparkline = buildSparkline(scores, { width: 120, height: 30, color: "#818cf8" });
+            // Per-check mini sparklines
+            const checkNames = [...new Set(history.flatMap((h) => [...h.checkScores.keys()]))];
+            const checkSparklines = checkNames
+                .map((name) => {
+                const vals = history.map((h) => h.checkScores.get(name) ?? 0);
+                const current = vals[vals.length - 1];
+                const prev = vals.length >= 2 ? vals[vals.length - 2] : current;
+                const delta = current - prev;
+                const dColor = delta > 0 ? "var(--pass)" : "var(--fail)";
+                const dSign = delta > 0 ? "+" : "";
+                const deltaStr = delta !== 0 ? `<span style="color:${dColor};font-size:0.58rem">${dSign}${delta}</span>` : "";
+                const svg = buildSparkline(vals, { width: 60, height: 20, color: "#6b7280", dotRadius: 1.5 });
+                return `<div class="ts-check"><span class="ts-name">${e(name)}</span>${svg}${deltaStr}</div>`;
+            })
+                .join("");
+            trendSection = `<div class="trend-section">
+<h3>Trend <span style="font-size:0.65rem;font-weight:400;color:var(--muted)">${history.length} runs</span></h3>
+<div class="ts-main"><div class="ts-spark">${mainSparkline}</div><div class="ts-info"><span class="ts-score">${report.score}</span>${badgeHtml}</div></div>
+<div class="ts-checks">${checkSparklines}</div>
+</div>`;
+        }
+    }
     const overviewPage = `<div id="p-overview" class="page active">
 <div class="dash">
   <div class="hero">
@@ -104,24 +147,34 @@ export function generateHTML(report) {
   <div class="radar">${radarSvg}</div>
 </div>
 <div class="cats">${catCards}</div>
+${trendSection}
 <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 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 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) => {
+        })
+            .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 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("");
+            })
+                .join("");
             // Group issues by file
             const byFile = new Map();
             const noFile = [];
@@ -140,7 +193,7 @@ export function generateHTML(report) {
             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}`;
+                    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>`;
@@ -153,14 +206,15 @@ export function generateHTML(report) {
                 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>
+<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>`;
-        }).join("");
+        })
+            .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>
@@ -171,10 +225,13 @@ ${subPages}
     }
     // 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 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("");
+    })
+        .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>
@@ -182,23 +239,24 @@ ${subPages}
 ${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 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("");
+    })
+        .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);
+    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]) => {
+        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
@@ -207,7 +265,8 @@ ${fileRows || '<p style="color:var(--muted)">No file-level issues found.</p>'}
             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("");
+        })
+            .join("");
     }
     const heatmapPage = `<div id="p-heatmap" class="page">
 <h2>Code Heatmap</h2>
@@ -278,6 +337,18 @@ h3{font-size:0.85rem;color:var(--muted);text-transform:uppercase;letter-spacing:
 .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)}
 
+/* Trend sparklines */
+.trend-section{background:var(--card);border:1px solid var(--border);border-radius:0.6rem;padding:1rem;margin-bottom:1.5rem}
+.trend-section h3{margin-bottom:0.6rem}
+.ts-main{display:flex;align-items:center;gap:1rem;margin-bottom:0.8rem}
+.ts-spark{flex-shrink:0}
+.ts-info{display:flex;align-items:baseline;gap:0.5rem}
+.ts-score{font-size:1.4rem;font-weight:900;color:var(--text)}
+.trend-badge{font-size:0.72rem;font-weight:600}
+.ts-checks{display:flex;flex-wrap:wrap;gap:0.5rem 1rem}
+.ts-check{display:flex;align-items:center;gap:0.3rem;font-size:0.65rem}
+.ts-name{color:var(--muted);width:70px;text-align:right;flex-shrink:0}
+
 /* Category pages */
 .cat-head{margin-bottom:0.3rem}
 .bar2{height:4px;background:var(--card);border-radius:2px;margin-bottom:1rem;overflow:hidden}
@@ -359,14 +430,18 @@ 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) => {
+  ${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) => {
+        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("")}
+        })
+            .join("")}</div>`;
+    })
+        .join("")}
 </aside>
 <div class="content">
   ${overviewPage}
@@ -417,7 +492,9 @@ function buildRadar(items) {
     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(" ");
+        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 = "";
@@ -428,11 +505,13 @@ function buildRadar(items) {
         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 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(" ");
+    })
+        .join(" ");
     let dots = "";
     for (let i = 0; i < n; i++) {
         const a = i * step - Math.PI / 2;

package/dist/report/svg.d.ts

@@ -0,0 +1,9 @@
+/** SVG sparkline builder — simple polyline with dots. */
+export interface SparklineOptions {
+    width?: number;
+    height?: number;
+    color?: string;
+    dotRadius?: number;
+}
+/** Build an inline SVG sparkline from an array of values (0-100). */
+export declare function buildSparkline(values: number[], opts?: SparklineOptions): string;

package/dist/report/svg.js

@@ -0,0 +1,23 @@
+/** SVG sparkline builder — simple polyline with dots. */
+/** Build an inline SVG sparkline from an array of values (0-100). */
+export function buildSparkline(values, opts = {}) {
+    if (values.length === 0)
+        return "";
+    const w = opts.width ?? 120;
+    const h = opts.height ?? 30;
+    const color = opts.color ?? "#818cf8";
+    const dotR = opts.dotRadius ?? 2;
+    const padX = dotR + 1;
+    const padY = dotR + 1;
+    const plotW = w - padX * 2;
+    const plotH = h - padY * 2;
+    // Map values to SVG coordinates
+    const points = values.map((v, i) => {
+        const x = values.length === 1 ? w / 2 : padX + (i / (values.length - 1)) * plotW;
+        const y = padY + plotH - (Math.min(100, Math.max(0, v)) / 100) * plotH;
+        return { x: Math.round(x * 10) / 10, y: Math.round(y * 10) / 10 };
+    });
+    const polyline = points.map((p) => `${p.x},${p.y}`).join(" ");
+    const dots = points.map((p) => `<circle cx="${p.x}" cy="${p.y}" r="${dotR}" fill="${color}"/>`).join("");
+    return `<svg viewBox="0 0 ${w} ${h}" width="${w}" height="${h}" style="display:block"><polyline points="${polyline}" fill="none" stroke="${color}" stroke-width="1.5" stroke-linejoin="round" stroke-linecap="round"/>${dots}</svg>`;
+}