@vibecodeqa/cli 0.10.0 → 0.12.0

package/README.md

@@ -25,6 +25,9 @@ npx @vibecodeqa/cli
 # Fast mode (skip test execution)
 npx @vibecodeqa/cli --skip-tests
 
+# Watch mode (re-scan on file changes)
+npx @vibecodeqa/cli --watch
+
 # CI mode (exit code 1 if score < 60)
 npx @vibecodeqa/cli --ci
 
@@ -36,8 +39,9 @@ npx @vibecodeqa/cli /path/to/project
 ```
 
 Output goes to `.vibe-check/`:
-- `report.html` — navigable dashboard (open in browser)
+- `report.html` — navigable multi-page dashboard (open in browser)
 - `report.json` — machine-readable results
+- `history/` — last 30 reports for trend tracking
 
 ## Checks
 
@@ -113,12 +117,18 @@ Each check produces a score from 0-100. The composite score is a weighted averag
 
 ## Report features
 
+The report is a multi-page navigable dashboard:
+
+- **10 pages**: Overview, Foundations, Quality, Testing, Architecture, Security, LLM Readiness, Issues, File Map, Heatmap
+- **Top nav + sidebar** — navigate by category and check
 - **Radar chart** — 6-axis view of category scores
-- **Architecture diagram** — SVG showing module relationships and import edges
-- **Trend comparison** — score delta vs. previous run
-- **File heatmap** — top files by issue count across all checks
-- **GitHub links** — click any file:line to open in GitHub
-- **Info panels** — each check explains what it measures, why it matters, and how to fix issues
+- **Architecture SVG diagram** — modules grouped by directory, import edges, node size by fan-in
+- **Code heatmap** — colored bars showing issue density per file
+- **Trend comparison** — score delta vs. previous run (reads previous report.json)
+- **File map** — top files by issue count across all checks
+- **GitHub links** — click any file:line to open in GitHub (auto-detected from git remote)
+- **Actionable prompts** — 📋 button on every issue copies a fix prompt for Claude/Codex
+- **Info panels** — each check has What/Risk/Fix explanations with research citations
 - **Priority badges** — critical/high/medium/low on each check
 
 ## Trend tracking
@@ -133,6 +143,7 @@ vcqa reads the previous `.vibe-check/report.json` on each run and shows:
 | Flag | Description |
 |------|-------------|
 | `--skip-tests` | Skip test execution and coverage (fast mode) |
+| `--watch` | Re-scan automatically on file changes |
 | `--ci` | Exit code 1 if composite score < 60 |
 | `--json` | Output JSON to stdout (no HTML, no browser) |
 

package/dist/cli.js

@@ -1,6 +1,6 @@
 #!/usr/bin/env node
 /** vibe-check — code health scanner for the AI coding era. */
-import { existsSync, mkdirSync, readdirSync, unlinkSync, writeFileSync } from "node:fs";
+import { existsSync, mkdirSync, readFileSync, readdirSync, unlinkSync, writeFileSync } from "node:fs";
 import { join, resolve } from "node:path";
 import { detectRepoUrl, detectStack } from "./detect.js";
 import { generateHTML } from "./report/html.js";
@@ -22,7 +22,8 @@ import { runTypeSafety } from "./runners/type-safety.js";
 import { computeScore } from "./score.js";
 import { computeTrend, formatTrend } from "./trend.js";
 import { gradeFromScore } from "./types.js";
-const VERSION = "0.10.0";
+const pkg = JSON.parse(readFileSync(new URL("../package.json", import.meta.url), "utf-8"));
+const VERSION = pkg.version;
 const args = process.argv.slice(2);
 const flags = new Set(args.filter((a) => a.startsWith("--")));
 const cwd = resolve(args.find((a) => !a.startsWith("--")) || ".");
@@ -30,6 +31,7 @@ const outputDir = join(cwd, ".vibe-check");
 const jsonOnly = flags.has("--json");
 const ciMode = flags.has("--ci");
 const skipTests = flags.has("--skip-tests");
+const watchMode = flags.has("--watch");
 function color(grade) {
     if (grade === "A")
         return "\x1b[32m";
@@ -141,7 +143,7 @@ async function main() {
     if (ciMode && score < 60) {
         process.exit(1);
     }
-    if (!jsonOnly && !ciMode) {
+    if (!jsonOnly && !ciMode && !watchMode) {
         try {
             const { execSync } = await import("node:child_process");
             const openCmd = process.platform === "darwin" ? "open" : "xdg-open";
@@ -149,6 +151,32 @@ async function main() {
         }
         catch { /* failed to open browser */ }
     }
+    // Watch mode — re-run on file changes
+    if (watchMode) {
+        const { watch } = await import("node:fs");
+        const srcDirs = ["src", "web/src"].map((d) => join(cwd, d)).filter((d) => existsSync(d));
+        if (srcDirs.length === 0) {
+            console.log("  \x1b[31mNo src/ directory to watch\x1b[0m");
+            process.exit(1);
+        }
+        console.log("  \x1b[2mWatching for changes... (Ctrl+C to stop)\x1b[0m");
+        console.log("");
+        let debounce = null;
+        for (const dir of srcDirs) {
+            watch(dir, { recursive: true }, (_event, filename) => {
+                if (!filename || filename.includes("node_modules") || filename.includes(".vibe-check"))
+                    return;
+                if (debounce)
+                    clearTimeout(debounce);
+                debounce = setTimeout(() => {
+                    console.log(`  \x1b[2mChanged: ${filename} — re-scanning...\x1b[0m`);
+                    main().catch(() => { });
+                }, 500);
+            });
+        }
+        // Keep process alive
+        await new Promise(() => { });
+    }
 }
 main().catch((err) => {
     console.error("vibe-check error:", err);

package/dist/report/html.js

@@ -78,6 +78,7 @@ export function generateHTML(report) {
         ...GROUPS.map((g) => ({ id: g.id, label: g.label })),
         { id: "issues", label: `Issues (${totalIssues})` },
         { id: "files", label: "File Map" },
+        { 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
@@ -189,6 +190,29 @@ ${allIssues.length > 200 ? `<p style="color:var(--muted);text-align:center;margi
 <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>`;
     return `<!DOCTYPE html>
 <html lang="en">
@@ -316,6 +340,10 @@ h3{font-size:0.85rem;color:var(--muted);text-transform:uppercase;letter-spacing:
 .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}
@@ -345,6 +373,7 @@ h3{font-size:0.85rem;color:var(--muted);text-transform:uppercase;letter-spacing:
   ${catPages}
   ${issuesPage}
   ${filesPage}
+  ${heatmapPage}
   <div class="footer">Generated by <a href="https://vibecodeqa.online">VibeCode QA</a> v${report.version} &mdash; <code>npx @vibecodeqa/cli</code></div>
 </div>
 

package/package.json

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

package/dist/runners/coverage.d.ts

@@ -1,3 +0,0 @@
-/** Coverage runner — runs tests with coverage and parses the summary. */
-import type { CheckResult, StackInfo } from "../types.js";
-export declare function runCoverage(cwd: string, stack: StackInfo): CheckResult;

package/dist/runners/coverage.js

@@ -1,65 +0,0 @@
-/** Coverage runner — runs tests with coverage and parses the summary. */
-import { existsSync, readFileSync } from "node:fs";
-import { join } from "node:path";
-import { gradeFromScore } from "../types.js";
-import { run } from "./exec.js";
-export function runCoverage(cwd, stack) {
-    const start = Date.now();
-    if (stack.testRunner === "none") {
-        return {
-            name: "coverage",
-            score: 0,
-            grade: "F",
-            details: { skipped: true, reason: "no test runner" },
-            issues: [],
-            duration: Date.now() - start,
-        };
-    }
-    // Run tests with coverage
-    const cmd = stack.testRunner === "vitest"
-        ? "npx vitest run --coverage 2>/dev/null || true"
-        : "npx jest --coverage --coverageReporters=json-summary 2>/dev/null || true";
-    run(cmd, cwd, 120_000);
-    // Look for coverage summary
-    const searchPaths = [
-        "coverage/coverage-summary.json",
-        "test-results/coverage/coverage-summary.json",
-    ];
-    let summary = null;
-    for (const p of searchPaths) {
-        const full = join(cwd, p);
-        if (existsSync(full)) {
-            try {
-                summary = JSON.parse(readFileSync(full, "utf-8"));
-                break;
-            }
-            catch {
-                /* parse failed */
-            }
-        }
-    }
-    if (!summary?.total) {
-        return {
-            name: "coverage",
-            score: 0,
-            grade: "F",
-            details: { skipped: true, reason: "no coverage data generated" },
-            issues: [],
-            duration: Date.now() - start,
-        };
-    }
-    const stmts = summary.total.statements?.pct || 0;
-    const lines = summary.total.lines?.pct || 0;
-    const branches = summary.total.branches?.pct || 0;
-    const functions = summary.total.functions?.pct || 0;
-    // Score is the average of all four metrics
-    const score = Math.round((stmts + lines + branches + functions) / 4);
-    return {
-        name: "coverage",
-        score,
-        grade: gradeFromScore(score),
-        details: { statements: stmts, lines, branches, functions },
-        issues: [],
-        duration: Date.now() - start,
-    };
-}

package/dist/runners/tests.d.ts

@@ -1,3 +0,0 @@
-/** Test runner — auto-detects vitest or jest. */
-import type { CheckResult, StackInfo } from "../types.js";
-export declare function runTests(cwd: string, stack: StackInfo): CheckResult;

package/dist/runners/tests.js

@@ -1,54 +0,0 @@
-/** Test runner — auto-detects vitest or jest. */
-import { gradeFromScore } from "../types.js";
-import { run } from "./exec.js";
-export function runTests(cwd, stack) {
-    const start = Date.now();
-    if (stack.testRunner === "none") {
-        return {
-            name: "tests",
-            score: 0,
-            grade: "F",
-            details: { skipped: true, reason: "no test runner" },
-            issues: [],
-            duration: Date.now() - start,
-        };
-    }
-    const cmd = stack.testRunner === "vitest"
-        ? "npx vitest run --reporter=json 2>/dev/null || true"
-        : "npx jest --json 2>/dev/null || true";
-    const { stdout } = run(cmd, cwd, 120_000);
-    // Extract JSON from output (vitest may print other stuff before the JSON)
-    let data = null;
-    try {
-        // Find the JSON object in stdout
-        const jsonStart = stdout.indexOf("{");
-        if (jsonStart >= 0) {
-            data = JSON.parse(stdout.slice(jsonStart));
-        }
-    }
-    catch {
-        /* parse failed */
-    }
-    if (!data) {
-        return {
-            name: "tests",
-            score: 0,
-            grade: "F",
-            details: { error: "could not parse test output" },
-            issues: [],
-            duration: Date.now() - start,
-        };
-    }
-    const passed = data.numPassedTests || 0;
-    const failed = data.numFailedTests || 0;
-    const total = data.numTotalTests || 0;
-    const score = total === 0 ? 0 : Math.round((passed / total) * 100);
-    return {
-        name: "tests",
-        score,
-        grade: gradeFromScore(score),
-        details: { passed, failed, total, runner: stack.testRunner },
-        issues: [],
-        duration: Date.now() - start,
-    };
-}