@vibecodeqa/cli 0.14.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.",

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) },
@@ -129,7 +131,7 @@ async function main() {
         }
     }
     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));
     }

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;");
 }
@@ -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);
@@ -102,6 +104,40 @@ export function generateHTML(report) {
     })
         .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">
@@ -111,6 +147,7 @@ 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)
@@ -300,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}

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>`;
+}

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.15.0",
   "description": "Code health scanner for the AI coding era. 15 checks, zero config, full report.",
   "type": "module",
   "bin": {