@vibecodeqa/cli 0.9.1 → 0.11.0

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, writeFileSync } from "node:fs";
+import { existsSync, mkdirSync, 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,7 @@ 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.9.1";
+const VERSION = "0.11.0";
 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 +30,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";
@@ -106,6 +107,22 @@ async function main() {
     const trend = computeTrend(report, outputDir);
     if (!existsSync(outputDir))
         mkdirSync(outputDir, { recursive: true });
+    // Save to history before overwriting current report
+    const historyDir = join(outputDir, "history");
+    if (!existsSync(historyDir))
+        mkdirSync(historyDir, { recursive: true });
+    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();
+    if (historyFiles.length > 30) {
+        for (const old of historyFiles.slice(0, historyFiles.length - 30)) {
+            try {
+                unlinkSync(join(historyDir, old));
+            }
+            catch { /* ignore */ }
+        }
+    }
     writeFileSync(join(outputDir, "report.json"), JSON.stringify(report, null, 2));
     writeFileSync(join(outputDir, "report.html"), generateHTML(report));
     if (jsonOnly) {
@@ -125,7 +142,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";
@@ -133,6 +150,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

@@ -9,6 +9,7 @@
  * 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;");
 }
@@ -77,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
@@ -116,7 +118,7 @@ export function generateHTML(report) {
         const subPages = cs.checks.map((c, i) => {
             const meta = getCheckMeta(c.name);
             const sk = c.details.skipped;
-            const details = Object.entries(c.details).filter(([k]) => k !== "skipped" && k !== "reason").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("");
@@ -138,7 +140,8 @@ 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) {
-                    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>` : ""}</div>`;
+                    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" onclick="navigator.clipboard.writeText('${prompt.replace(/'/g, "\\'")}');this.textContent='✓';setTimeout(()=>this.textContent='📋',1000)" title="Copy fix prompt">📋</button></div>`;
                 }
                 issuesHtml += `</div>`;
             }
@@ -153,7 +156,8 @@ export function generateHTML(report) {
 <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>` : ""}
-${details ? `<div class="kvs">${details}</div>` : ""}
+${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("");
@@ -186,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">
@@ -312,6 +339,14 @@ h3{font-size:0.85rem;color:var(--muted);text-transform:uppercase;letter-spacing:
 .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>
 </head>
@@ -338,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.9.1",
+  "version": "0.11.0",
   "description": "Code health scanner for the AI coding era. 15 checks, zero config, full report.",
   "type": "module",
   "bin": {