@vibecodeqa/cli 0.16.0 → 0.17.0

package/dist/check-meta.js

@@ -56,7 +56,7 @@ export const CHECK_META = {
         label: "Error Handling",
         category: "Quality",
         priority: "high",
-        weight: 2,
+        weight: 3,
         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.",
@@ -96,7 +96,7 @@ export const CHECK_META = {
         label: "Testing",
         category: "Testing",
         priority: "critical",
-        weight: 22,
+        weight: 17,
         description: "Deep assessment of test quality across 6 dimensions: pyramid presence (unit/integration/component/E2E layers), test execution (pass/fail), coverage (statement/branch/line/function), file pairing (test file per source file), test quality (assertion density, mock ratio, snapshot ratio), and E2E tool detection (Playwright/Cypress).",
         risk: "Code without tests is code you can't safely change. Missing test layers mean entire categories of bugs go undetected: unit tests catch logic bugs, integration tests catch API contract breaks, E2E tests catch user-visible regressions. Low coverage means large portions of code are never exercised.",
         recommendation: "Follow the testing pyramid: many unit tests, some integration tests, fewer E2E tests. Aim for >80% branch coverage. Every source file should have a corresponding test file. Use Playwright for E2E if you have a web frontend.",
@@ -136,7 +136,7 @@ export const CHECK_META = {
         label: "Architecture",
         category: "Architecture",
         priority: "high",
-        weight: 7,
+        weight: 6,
         description: "Analyzes the import graph to detect structural problems: circular dependencies, god modules (imported by >50% of files), orphan modules (dead code), high fan-out (importing too many modules), and connector modules (high coupling). Generates an SVG architecture diagram.",
         risk: "Circular dependencies create build order issues and make refactoring impossible without breaking changes. God modules become bottlenecks — any change ripples through the entire codebase. High coupling means you can't change one module without testing everything it touches.",
         recommendation: "Break circular deps by extracting shared types to a separate file. Split god modules by concern. Reduce fan-out by co-locating related code. Use dependency injection for loose coupling.",
@@ -146,7 +146,7 @@ export const CHECK_META = {
         label: "Confusion Index",
         category: "LLM Readiness",
         priority: "high",
-        weight: 8,
+        weight: 7,
         description: "Measures naming ambiguity that causes LLMs to misunderstand or edit the wrong code. Checks: file name confusability (Levenshtein distance + synonym detection), generic function/variable names, export name collisions across files, and ambiguous abbreviations.",
         risk: "GPT-4o drops 28.6 percentage points on code summarization when names are ambiguous (arXiv:2510.03178). LLMs editing similar-named files is the #1 reported failure mode in AI-assisted development. Generic names like process(), handle(), data cause models to misinterpret intent.",
         recommendation: "Use descriptive, unique names. Avoid synonym files (utils.ts + helpers.ts — pick one). Avoid generic exports. Disambiguate abbreviations (use 'authentication' not 'auth' if both auth meanings exist in the codebase).",
@@ -156,11 +156,31 @@ export const CHECK_META = {
         label: "Context Locality",
         category: "LLM Readiness",
         priority: "high",
-        weight: 7,
+        weight: 6,
         description: "Measures how self-contained code is for LLM consumption. Checks: token density per file, import count, circular dependencies, and context sinks (files that import many modules but export little). Based on the finding that LLMs lose 30%+ accuracy for information in the middle of long contexts.",
         risk: "Files over ~4000 tokens exceed the 'sweet spot' for LLM attention (Liu et al. 2023 'Lost in the Middle'). Circular dependencies create infinite loops in LLM code navigation. Heavy import chains force LLMs to load many files, burning context window budget (Chroma 'Context Rot' 2025).",
         recommendation: "Keep files under 400 lines / 4000 tokens. Limit imports to <15 per file. Break circular dependencies. Co-locate related code to reduce cross-file jumps.",
     },
+    react: {
+        name: "react",
+        label: "React Patterns",
+        category: "Quality",
+        priority: "high",
+        weight: 3,
+        description: "Checks React-specific patterns: conditional hook calls (violates Rules of Hooks), missing key props in .map(), index as key, prop spreading on DOM elements, and excessive inline handlers.",
+        risk: "Conditional hooks cause React to crash at runtime. Missing keys cause incorrect reconciliation — items can swap, duplicate, or lose state. Index keys break when lists are reordered or filtered.",
+        recommendation: "Never call hooks inside conditions, loops, or nested functions. Always provide a unique, stable key in .map(). Avoid spreading unknown props onto DOM elements. Extract inline handlers for readability.",
+    },
+    accessibility: {
+        name: "accessibility",
+        label: "Accessibility",
+        category: "Quality",
+        priority: "high",
+        weight: 4,
+        description: "Checks common accessibility violations: images without alt text, click handlers on non-interactive elements without keyboard support, form controls without labels, autoFocus usage, positive tabIndex, and missing html lang attribute.",
+        risk: "1 in 4 adults has a disability (CDC). Missing alt text makes images invisible to screen readers. Click-only divs exclude keyboard users. Unlabeled inputs are unusable with assistive technology. Missing lang attribute breaks screen reader pronunciation.",
+        recommendation: "Add alt text to all images (use alt=\"\" for decorative). Use <button> for clickable elements, not <div onClick>. Label all form controls with <label>, aria-label, or aria-labelledby. Set lang on <html>.",
+    },
 };
 export function getCheckMeta(name) {
     return (CHECK_META[name] || {

package/dist/cli.js

@@ -13,6 +13,8 @@ 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 { runReact } from "./runners/react.js";
+import { runAccessibility } from "./runners/accessibility.js";
 import { runSecrets } from "./runners/secrets.js";
 import { runSecurity } from "./runners/security.js";
 import { runStandards } from "./runners/standards.js";
@@ -33,6 +35,7 @@ const jsonOnly = flags.has("--json");
 const ciMode = flags.has("--ci");
 const skipTests = flags.has("--skip-tests");
 const watchMode = flags.has("--watch");
+const badgeMode = flags.has("--badge");
 function color(grade) {
     if (grade === "A")
         return "\x1b[32m";
@@ -67,6 +70,8 @@ async function main() {
         { name: "complexity", fn: () => runComplexity(cwd) },
         { name: "duplication", fn: () => runDuplication(cwd) },
         { name: "error-handling", fn: () => runErrorHandling(cwd, stack) },
+        { name: "react", fn: () => runReact(cwd, stack) },
+        { name: "accessibility", fn: () => runAccessibility(cwd) },
         { name: "docs", fn: () => runDocs(cwd) },
         // Testing
         { name: "testing", fn: () => runTesting(cwd, stack, skipTests) },
@@ -131,7 +136,13 @@ 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));
+    // Badge SVG
+    if (badgeMode) {
+        const { buildBadge } = await import("./report/svg.js");
+        const badgeSvg = buildBadge(score, grade);
+        writeFileSync(join(outputDir, "badge.svg"), badgeSvg);
+    }
     if (jsonOnly) {
         console.log(JSON.stringify(report));
     }
@@ -144,6 +155,8 @@ async function main() {
         console.log("");
         console.log(`  \x1b[2mReport: ${join(outputDir, "report.html")}\x1b[0m`);
         console.log(`  \x1b[2mJSON:   ${join(outputDir, "report.json")}\x1b[0m`);
+        if (badgeMode)
+            console.log(`  \x1b[2mBadge:  ${join(outputDir, "badge.svg")}\x1b[0m`);
         console.log("");
     }
     if (ciMode && score < 60) {

package/dist/report/html.d.ts

@@ -1,12 +1,14 @@
 /** Generate a multi-page navigable HTML report.
  *
  * Architecture:
- *   Top nav:    Overview | Foundations | Quality | Testing | Security | Issues
- *   Sub-nav:    Tabs for each check within a category
- *   Detail:     Per-check stats + full issue list grouped by file
- *   File map:   Cross-check heatmap of issues per file
+ *   Primary nav:   Overview | Foundations | Quality | Testing | Security | Architecture | AI Readiness
+ *   Secondary nav:  Issues (N) | Files  (right-aligned, visually distinct)
+ *   Sidebar:        Score + dimension tree + view links
+ *   Overview:       Dashboard with score, radar, timeline, category cards, top issues, file hotspots
+ *   Dimensions:     Sub-tabs for each check within a category
+ *   Views:          Cross-cutting data slices (issues table, file health map)
  *
- * All in one self-contained HTML file using hash routing + show/hide.
+ * All in one self-contained HTML file using show/hide navigation.
  */
 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

@@ -1,26 +1,28 @@
 /** Generate a multi-page navigable HTML report.
  *
  * Architecture:
- *   Top nav:    Overview | Foundations | Quality | Testing | Security | Issues
- *   Sub-nav:    Tabs for each check within a category
- *   Detail:     Per-check stats + full issue list grouped by file
- *   File map:   Cross-check heatmap of issues per file
+ *   Primary nav:   Overview | Foundations | Quality | Testing | Security | Architecture | AI Readiness
+ *   Secondary nav:  Issues (N) | Files  (right-aligned, visually distinct)
+ *   Sidebar:        Score + dimension tree + view links
+ *   Overview:       Dashboard with score, radar, timeline, category cards, top issues, file hotspots
+ *   Dimensions:     Sub-tabs for each check within a category
+ *   Views:          Cross-cutting data slices (issues table, file health map)
  *
- * All in one self-contained HTML file using hash routing + show/hide.
+ * All in one self-contained HTML file using show/hide navigation.
  */
 import { getCheckMeta } from "../check-meta.js";
 import { e, fileLink, gc } from "./components.js";
-import { categoryPages, filesPage, heatmapPage, issuesPage, overviewPage } from "./pages.js";
+import { categoryPages, filesPage, 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", "error-handling", "docs"] },
+    { id: "quality", label: "Quality", checks: ["complexity", "duplication", "error-handling", "react", "accessibility", "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"] },
+    { id: "llm", label: "AI 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);
@@ -29,13 +31,13 @@ export function generateHTML(report) {
     const fl = (path, line) => fileLink(path, line, ru, br);
     const totalIssues = allChecks.reduce((s, c) => s + c.issues.length, 0);
     const proj = report.meta.cwd.split("/").pop() || "project";
-    // ── File heatmap: aggregate issues per file across all checks ──
+    // ── Aggregate file issues across all checks ──
     const fileIssues = new Map();
     for (const c of allChecks) {
         for (const iss of c.issues) {
             if (!iss.file)
                 continue;
-            const f = iss.file.split(":")[0]; // strip :line from composite file fields
+            const f = iss.file.split(":")[0];
             const entry = fileIssues.get(f) || { errors: 0, warnings: 0, checks: new Set() };
             if (iss.severity === "error")
                 entry.errors++;
@@ -48,7 +50,7 @@ export function generateHTML(report) {
     const topFiles = [...fileIssues.entries()]
         .map(([file, d]) => ({ file, total: d.errors + d.warnings, errors: d.errors, warnings: d.warnings, checks: [...d.checks] }))
         .sort((a, b) => b.total - a.total)
-        .slice(0, 20);
+        .slice(0, 30);
     // ── Category averages ──
     const catScores = GROUPS.map((g) => {
         const checks = g.checks.map((n) => checkMap.get(n)).filter(Boolean);
@@ -56,17 +58,21 @@ 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 };
     });
-    // ── Top nav ──
-    const topNavItems = [
+    // ── Primary nav (dimensions) ──
+    const dimNavItems = [
         { id: "overview", label: "Overview" },
         ...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("");
+    const dimNav = dimNavItems.map((t) => `<a class="tn" data-page="${t.id}" onclick="go('${t.id}')">${t.label}</a>`).join("");
+    // ── Secondary nav (data views, right-aligned) ──
+    const viewNav = [
+        { id: "issues", label: `Issues (${totalIssues})` },
+        { id: "files", label: "Files" },
+    ]
+        .map((t) => `<a class="tn tn-view" data-page="${t.id}" onclick="go('${t.id}')">${t.label}</a>`)
+        .join("");
     // ── Sidebar ──
-    const sidebar = catScores
+    const sidebarDims = 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
@@ -78,12 +84,12 @@ export function generateHTML(report) {
             .join("")}</div>`;
     })
         .join("");
+    const sidebarViews = `<div class="side-section side-views"><div class="side-views-label">Views</div><a class="side-check" onclick="go('issues')">Issues <span style="color:var(--muted)">${totalIssues}</span></a><a class="side-check" onclick="go('files')">Files <span style="color:var(--muted)">${fileIssues.size}</span></a></div>`;
     // ── Assemble pages ──
-    const overview = overviewPage(report, active, totalIssues, catScores);
+    const overview = overviewPage(report, active, totalIssues, catScores, allChecks, topFiles, fl, historyDir);
     const catPages = categoryPages(catScores, fl);
     const issues = issuesPage(allChecks, totalIssues, fl);
-    const files = filesPage(topFiles, fl);
-    const heatmap = heatmapPage(fileIssues, fl);
+    const files = filesPage(topFiles, fileIssues, fl);
     return `<!DOCTYPE html>
 <html lang="en">
 <head>
@@ -96,19 +102,20 @@ export function generateHTML(report) {
 
 <nav class="top">
   <div class="logo"><span>VibeCode</span> QA</div>
-  ${topNav}
+  <div class="nav-dims">${dimNav}</div>
+  <div class="nav-views">${viewNav}</div>
 </nav>
 
 <aside class="side">
   <div class="side-section">Score<div class="side-score" style="color:${gc(report.grade)}">${report.grade} ${report.score}</div></div>
-  ${sidebar}
+  ${sidebarDims}
+  ${sidebarViews}
 </aside>
 <div class="content">
   ${overview}
   ${catPages}
   ${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>
 
@@ -124,7 +131,7 @@ function sub(el,cat){
   el.classList.add('active');
   document.querySelectorAll('#p-'+cat+' .sp').forEach(s=>{s.classList.toggle('active',s.dataset.sub===id)});
 }
-// Copy-prompt buttons — read from data-attribute (no inline JS with user data)
+// Copy-prompt buttons
 document.addEventListener('click',function(ev){
   var btn=ev.target.closest('.cp-btn');
   if(!btn)return;

package/dist/report/pages.d.ts

@@ -14,11 +14,10 @@ export interface FileEntry {
     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 overviewPage(report: VibeReport, active: CheckResult[], totalIssues: number, catScores: CatScore[], allChecks: CheckResult[], topFiles: FileEntry[], fl: FL, historyDir?: string): 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, {
+export declare function filesPage(topFiles: FileEntry[], fileIssues: Map<string, {
     errors: number;
     warnings: number;
     checks: Set<string>;

package/dist/report/pages.js

@@ -1,16 +1,23 @@
 /** Page renderers for the HTML report. */
 import { getCheckMeta } from "../check-meta.js";
+import { loadHistory } from "../history.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("");
+import { buildPyramid, buildRadar, buildRing, buildTimeline } from "./svg.js";
+// ── Overview ──────────────────────────────────────────────────────────
+export function overviewPage(report, active, totalIssues, catScores, allChecks, topFiles, fl, historyDir) {
+    // Hero: score ring + grade
+    const hero = `<div class="hero">
+    ${buildRing(report.score, 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>`;
+    // Radar chart
+    const radarSvg = buildRadar(catScores.map((cs) => ({ label: cs.label, score: cs.avg })));
+    // Category cards
     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");
@@ -23,24 +30,67 @@ export function overviewPage(report, active, totalIssues, catScores) {
         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 })));
+    // Score timeline (from history)
+    let timelineSection = "";
+    if (historyDir) {
+        const history = loadHistory(historyDir);
+        if (history.length >= 2) {
+            const timelineSvg = buildTimeline(history.map((h) => ({ score: h.score, timestamp: h.timestamp })));
+            timelineSection = `<div class="ov-section"><h3>Score Timeline</h3><div class="timeline">${timelineSvg}</div></div>`;
+        }
+    }
+    // All checks bar chart
+    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("");
+    // Top issues preview (10 most severe)
+    const allIssues = allChecks.flatMap((c) => c.issues.map((i) => ({ check: c.name, ...i })));
+    const sortedIssues = allIssues
+        .sort((a, b) => (a.severity === "error" ? 0 : a.severity === "warning" ? 1 : 2) - (b.severity === "error" ? 0 : b.severity === "warning" ? 1 : 2))
+        .slice(0, 10);
+    let topIssuesHtml = "";
+    if (sortedIssues.length > 0) {
+        const rows = sortedIssues
+            .map((i) => {
+            const loc = i.file ? fl(i.file.split(":")[0], i.line) : "";
+            return `<div class="ov-issue ${i.severity}"><span class="is">${i.severity[0].toUpperCase()}</span><span class="ov-check">${e(i.check)}</span>${loc ? `<span class="ov-loc">${loc}</span>` : ""}<span class="ov-msg">${e(i.message)}</span></div>`;
+        })
+            .join("");
+        const viewAll = allIssues.length > 10 ? `<a class="ov-link" onclick="go('issues')">View all ${allIssues.length} issues \u2192</a>` : "";
+        topIssuesHtml = `<div class="ov-section"><h3>Top Issues</h3>${rows}${viewAll}</div>`;
+    }
+    // File hotspots preview (top 5)
+    let fileHotspotsHtml = "";
+    if (topFiles.length > 0) {
+        const fileRows = topFiles.slice(0, 5).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></div>`;
+        }).join("");
+        const viewAll = topFiles.length > 5 ? `<a class="ov-link" onclick="go('files')">View all ${topFiles.length} files \u2192</a>` : "";
+        fileHotspotsHtml = `<div class="ov-section"><h3>File Hotspots</h3>${fileRows}${viewAll}</div>`;
+    }
+    // Stack badges
+    const stackHtml = Object.entries(report.meta.stack)
+        .filter(([, v]) => v !== "none" && v !== "unknown")
+        .map(([k, v]) => `<span>${k}: <b>${v}</b></span>`)
+        .join("");
     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>
+  ${hero}
   <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>
+${timelineSection}
+<div class="ov-section"><h3>All Checks</h3><div class="bars">${barChart}</div></div>
+${topIssuesHtml}
+${fileHotspotsHtml}
+<div class="stack">${stackHtml}</div>
 </div>`;
 }
+// ── Category dimension pages ──────────────────────────────────────────
 export function categoryPages(catScores, fl) {
     let catPagesHtml = "";
     for (const cs of catScores) {
@@ -96,6 +146,7 @@ export function categoryPages(catScores, fl) {
 ${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>` : ""}
+${c.name === "testing" && !sk && c.details.pyramid ? `<div class="arch-svg">${buildPyramid(c.details.pyramid)}</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>`;
@@ -111,9 +162,14 @@ ${subPages}
     }
     return catPagesHtml;
 }
+// ── Issues view (cross-cutting) ──────────────────────────────────────
 export function issuesPage(allChecks, totalIssues, fl) {
     const allIssues = allChecks.flatMap((c) => c.issues.map((i) => ({ check: c.name, ...i })));
+    const errorCount = allIssues.filter((i) => i.severity === "error").length;
+    const warnCount = allIssues.filter((i) => i.severity === "warning").length;
+    const infoCount = allIssues.filter((i) => i.severity === "info").length;
     const issueRows = allIssues
+        .sort((a, b) => (a.severity === "error" ? 0 : a.severity === "warning" ? 1 : 2) - (b.severity === "error" ? 0 : b.severity === "warning" ? 1 : 2))
         .slice(0, 200)
         .map((i) => {
         const loc = i.file ? fl(i.file.split(":")[0], i.line) : "";
@@ -122,45 +178,33 @@ export function issuesPage(allChecks, totalIssues, fl) {
         .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>
+<div class="isf"><span style="color:var(--fail)">${errorCount} errors</span> \u00b7 <span style="color:var(--warn)">${warnCount} warnings</span>${infoCount > 0 ? ` \u00b7 <span style="color:var(--info)">${infoCount} info</span>` : ""}</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
+// ── Files view (merged file map + heatmap) ───────────────────────────
+export function filesPage(topFiles, fileIssues, fl) {
+    if (topFiles.length === 0) {
+        return `<div id="p-files" class="page"><h2>File Health</h2><p style="color:var(--muted)">No file-level issues found.</p></div>`;
+    }
+    // Heatmap (visual density bars)
+    const maxIssues = Math.max(...topFiles.map((f) => f.total));
+    const heatmapRows = topFiles
+        .slice(0, 30)
         .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>`;
+        const intensity = maxIssues > 0 ? f.total / maxIssues : 0;
+        const r = Math.round(239 * intensity);
+        const g = Math.round(68 * (1 - intensity) + 197 * (f.errors === 0 ? 0.3 : 0));
+        const color = `rgb(${r},${g},30)`;
+        const barW = Math.max(4, Math.round(intensity * 200));
+        return `<div class="hm-row"><span class="hm-name">${fl(f.file)}</span><div class="hm-bar" style="width:${barW}px;background:${color}" title="${f.total} issues (${f.checks.join(", ")})"></div><span class="hm-count">${f.errors}E ${f.warnings}W</span><span class="hm-checks">${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>'}
+<h2>File Health</h2>
+<p style="color:var(--muted);font-size:0.78rem;margin-bottom:1rem">${fileIssues.size} files with issues across ${topFiles.reduce((s, f) => { for (const c of f.checks)
+        s.add(c); return s; }, new Set()).size} checks. Bar color: red = errors, orange = warnings only. Width = relative issue density.</p>
+${heatmapRows}
 </div>`;
 }

package/dist/report/styles.d.ts

@@ -1,2 +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";
+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 \u2014 split into dimensions (left) and views (right) */\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;flex-shrink:0}\n.logo span{color:var(--accent)}\n.nav-dims{display:flex;align-items:center;gap:0}\n.nav-views{margin-left:auto;display:flex;align-items:center;gap:0;border-left:1px solid var(--border);padding-left:0.3rem}\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.tn-view{font-size:0.72rem;opacity:0.8}\n.tn-view.active{opacity:1}\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.side-views{padding-top:0.5rem}\n.side-views-label{padding:0.2rem 0.8rem;font-size:0.6rem;text-transform:uppercase;letter-spacing:0.05em;color:#444;font-weight:600}\n.side-views .side-check{padding-left:0.8rem}\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\n/* Overview sections */\n.ov-section{margin-bottom:1.5rem}\n.ov-issue{font-size:0.68rem;font-family:\"SF Mono\",monospace;padding:0.2rem 0;display:flex;gap:0.4rem;align-items:baseline;border-bottom:1px solid var(--border)}\n.ov-issue .is{flex-shrink:0}\n.ov-issue.error .is{color:var(--fail)}\n.ov-issue.warning .is{color:var(--warn)}\n.ov-check{color:var(--muted);width:70px;flex-shrink:0;font-size:0.62rem}\n.ov-loc{color:var(--accent);flex-shrink:0;font-size:0.62rem;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n.ov-msg{flex:1;word-break:break-word}\n.ov-link{display:block;margin-top:0.5rem;font-size:0.72rem;color:var(--accent);cursor:pointer;text-decoration:none}\n.ov-link:hover{text-decoration:underline}\n\n/* Timeline */\n.timeline{margin:0.5rem 0;overflow-x:auto}\n.timeline svg{max-width:100%}\n\n/* Bar chart */\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:90px;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;margin-top:1rem}\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;flex-wrap:wrap}\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 health (merged file map + 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.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;min-width:50px}\n.hm-checks{font-size:0.58rem;color:#555;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\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.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}.nav-views{display:none}}\n";

package/dist/report/styles.js

@@ -5,13 +5,17 @@ export const CSS = `
 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 nav — split into dimensions (left) and views (right) */
 .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{font-weight:800;font-size:1rem;margin-right:1.5rem;padding:0.7rem 0;flex-shrink:0}
 .logo span{color:var(--accent)}
+.nav-dims{display:flex;align-items:center;gap:0}
+.nav-views{margin-left:auto;display:flex;align-items:center;gap:0;border-left:1px solid var(--border);padding-left:0.3rem}
 .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)}
+.tn-view{font-size:0.72rem;opacity:0.8}
+.tn-view.active{opacity:1}
 
 /* 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}
@@ -23,6 +27,9 @@ code{font-family:"SF Mono",Menlo,monospace;font-size:0.85em}
 .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}
+.side-views{padding-top:0.5rem}
+.side-views-label{padding:0.2rem 0.8rem;font-size:0.6rem;text-transform:uppercase;letter-spacing:0.05em;color:#444;font-weight:600}
+.side-views .side-check{padding-left:0.8rem}
 
 /* Content */
 .content{max-width:900px;margin-left:200px;padding:2rem}
@@ -48,20 +55,38 @@ code{font-family:"SF Mono",Menlo,monospace;font-size:0.85em}
 .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}
+
+/* Overview sections */
+.ov-section{margin-bottom:1.5rem}
+.ov-issue{font-size:0.68rem;font-family:"SF Mono",monospace;padding:0.2rem 0;display:flex;gap:0.4rem;align-items:baseline;border-bottom:1px solid var(--border)}
+.ov-issue .is{flex-shrink:0}
+.ov-issue.error .is{color:var(--fail)}
+.ov-issue.warning .is{color:var(--warn)}
+.ov-check{color:var(--muted);width:70px;flex-shrink:0;font-size:0.62rem}
+.ov-loc{color:var(--accent);flex-shrink:0;font-size:0.62rem;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.ov-msg{flex:1;word-break:break-word}
+.ov-link{display:block;margin-top:0.5rem;font-size:0.72rem;color:var(--accent);cursor:pointer;text-decoration:none}
+.ov-link:hover{text-decoration:underline}
+
+/* Timeline */
+.timeline{margin:0.5rem 0;overflow-x:auto}
+.timeline svg{max-width:100%}
+
+/* Bar chart */
 .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}
+.bl{width:90px;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{display:flex;gap:0.35rem;flex-wrap:wrap;margin-top:1rem}
 .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}
+.sub-nav{display:flex;gap:0;border-bottom:1px solid var(--border);margin-bottom:1rem;flex-wrap:wrap}
 .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)}
@@ -107,24 +132,25 @@ h3{font-size:0.85rem;color:var(--muted);text-transform:uppercase;letter-spacing:
 .il2{color:var(--muted)}
 .iru2{color:#555;font-size:0.58rem}
 
-/* File heatmap */
+/* File health (merged file map + 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}
+.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;min-width:50px}
+.hm-checks{font-size:0.58rem;color:#555;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 
 .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}}
+@media(max-width:768px){.side{display:none}.content{margin-left:0;padding:1rem}.cats{grid-template-columns:1fr 1fr}.dash{flex-direction:column}.nav-views{display:none}}
 `;

package/dist/report/svg.d.ts

@@ -4,6 +4,23 @@ export declare function buildRadar(items: {
     label: string;
     score: number;
 }[]): string;
+/** Score timeline — larger chart showing score history over last N runs. */
+export declare function buildTimeline(entries: {
+    score: number;
+    timestamp: string;
+}[], opts?: {
+    width?: number;
+    height?: number;
+}): string;
+/** Testing pyramid — proportional triangle showing test layer distribution. */
+export declare function buildPyramid(layers: {
+    unit: number;
+    integration: number;
+    component: number;
+    e2e: number;
+}): string;
+/** Badge SVG — shields.io-style badge for README embedding. */
+export declare function buildBadge(score: number, grade: string): string;
 /** Sparkline — mini line chart for trend display. */
 export declare function buildSparkline(values: number[], opts?: {
     width?: number;

package/dist/report/svg.js

@@ -42,6 +42,105 @@ export function buildRadar(items) {
     }
     return `<svg viewBox="0 0 240 240">${grid}${axes}<polygon points="${dataPts}" fill="#818cf825" stroke="#818cf8" stroke-width="1.5"/>${dots}</svg>`;
 }
+/** Score timeline — larger chart showing score history over last N runs. */
+export function buildTimeline(entries, opts) {
+    const width = opts?.width ?? 600;
+    const height = opts?.height ?? 120;
+    const pad = { top: 20, right: 20, bottom: 25, left: 35 };
+    const w = width - pad.left - pad.right;
+    const h = height - pad.top - pad.bottom;
+    if (entries.length === 0)
+        return "";
+    // Y axis: 0-100 always
+    const yScale = (v) => pad.top + h - (v / 100) * h;
+    const xScale = (i) => pad.left + (entries.length === 1 ? w / 2 : (i / (entries.length - 1)) * w);
+    // Grid lines at 25, 50, 75
+    let grid = "";
+    for (const v of [25, 50, 75]) {
+        const y = yScale(v).toFixed(1);
+        grid += `<line x1="${pad.left}" y1="${y}" x2="${pad.left + w}" y2="${y}" stroke="#1e1e24" stroke-width="0.7"/>`;
+        grid += `<text x="${pad.left - 6}" y="${y}" text-anchor="end" dominant-baseline="middle" fill="#555" font-size="8">${v}</text>`;
+    }
+    // Score line + dots
+    const points = entries.map((e, i) => `${xScale(i).toFixed(1)},${yScale(e.score).toFixed(1)}`).join(" ");
+    // Grade colors per dot
+    const dots = entries
+        .map((e, i) => {
+        const color = e.score >= 90 ? "#22c55e" : e.score >= 75 ? "#84cc16" : e.score >= 60 ? "#eab308" : e.score >= 40 ? "#f97316" : "#ef4444";
+        return `<circle cx="${xScale(i).toFixed(1)}" cy="${yScale(e.score).toFixed(1)}" r="3" fill="${color}"><title>${e.timestamp.split("T")[0]} — ${e.score}</title></circle>`;
+    })
+        .join("");
+    // X-axis labels (first, middle, last)
+    let xLabels = "";
+    const labelIndices = entries.length <= 3 ? entries.map((_, i) => i) : [0, Math.floor(entries.length / 2), entries.length - 1];
+    for (const i of labelIndices) {
+        const label = entries[i].timestamp.split("T")[0].slice(5); // MM-DD
+        xLabels += `<text x="${xScale(i).toFixed(1)}" y="${height - 4}" text-anchor="middle" fill="#555" font-size="7">${label}</text>`;
+    }
+    // Gradient fill under the line
+    const areaPoints = `${xScale(0).toFixed(1)},${yScale(0).toFixed(1)} ${points} ${xScale(entries.length - 1).toFixed(1)},${yScale(0).toFixed(1)}`;
+    return `<svg viewBox="0 0 ${width} ${height}" width="${width}" height="${height}">
+<defs><linearGradient id="tlg" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#818cf8" stop-opacity="0.3"/><stop offset="100%" stop-color="#818cf8" stop-opacity="0.02"/></linearGradient></defs>
+${grid}
+<polygon points="${areaPoints}" fill="url(#tlg)"/>
+<polyline points="${points}" fill="none" stroke="#818cf8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+${dots}${xLabels}
+</svg>`;
+}
+/** Testing pyramid — proportional triangle showing test layer distribution. */
+export function buildPyramid(layers) {
+    const total = layers.unit + layers.integration + layers.component + layers.e2e;
+    if (total === 0)
+        return "";
+    const w = 200, h = 160;
+    const cx = w / 2;
+    // Pyramid: e2e at top (smallest), unit at bottom (largest)
+    // Each layer gets proportional height
+    const items = [
+        { label: "E2E", count: layers.e2e, color: "#ef4444" },
+        { label: "Component", count: layers.component, color: "#f97316" },
+        { label: "Integration", count: layers.integration, color: "#eab308" },
+        { label: "Unit", count: layers.unit, color: "#22c55e" },
+    ];
+    const layerH = (h - 20) / 4;
+    let svg = "";
+    for (let i = 0; i < 4; i++) {
+        const item = items[i];
+        const y = 10 + i * layerH;
+        // Trapezoid: wider at bottom
+        const topW = ((i + 0.5) / 4) * (w - 40);
+        const botW = ((i + 1.5) / 4) * (w - 40);
+        const opacity = item.count > 0 ? 1 : 0.2;
+        const x1t = cx - topW / 2, x2t = cx + topW / 2;
+        const x1b = cx - botW / 2, x2b = cx + botW / 2;
+        svg += `<polygon points="${x1t},${y} ${x2t},${y} ${x2b},${y + layerH} ${x1b},${y + layerH}" fill="${item.color}" opacity="${opacity * 0.25}" stroke="${item.color}" stroke-opacity="${opacity * 0.6}" stroke-width="1"/>`;
+        svg += `<text x="${cx}" y="${y + layerH / 2 + 3}" text-anchor="middle" fill="${item.count > 0 ? "#e5e5e5" : "#555"}" font-size="9" font-weight="600">${item.label} (${item.count})</text>`;
+    }
+    return `<svg viewBox="0 0 ${w} ${h}" width="${w}" height="${h}">${svg}</svg>`;
+}
+/** Badge SVG — shields.io-style badge for README embedding. */
+export function buildBadge(score, grade) {
+    const color = score >= 90 ? "#22c55e" : score >= 75 ? "#84cc16" : score >= 60 ? "#eab308" : score >= 40 ? "#f97316" : "#ef4444";
+    const label = "vcqa";
+    const value = `${grade} ${score}`;
+    const labelW = 36, valueW = 44, totalW = labelW + valueW;
+    const h = 20, r = 3;
+    return `<svg xmlns="http://www.w3.org/2000/svg" width="${totalW}" height="${h}">
+<linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient>
+<clipPath id="r"><rect width="${totalW}" height="${h}" rx="${r}" fill="#fff"/></clipPath>
+<g clip-path="url(#r)">
+<rect width="${labelW}" height="${h}" fill="#555"/>
+<rect x="${labelW}" width="${valueW}" height="${h}" fill="${color}"/>
+<rect width="${totalW}" height="${h}" fill="url(#s)"/>
+</g>
+<g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" font-size="11">
+<text x="${labelW / 2}" y="14" fill="#010101" fill-opacity=".3">${label}</text>
+<text x="${labelW / 2}" y="13">${label}</text>
+<text x="${labelW + valueW / 2}" y="14" fill="#010101" fill-opacity=".3">${value}</text>
+<text x="${labelW + valueW / 2}" y="13">${value}</text>
+</g>
+</svg>`;
+}
 /** Sparkline — mini line chart for trend display. */
 export function buildSparkline(values, opts) {
     const width = opts?.width ?? 120;

package/dist/runners/accessibility.d.ts

@@ -0,0 +1,3 @@
+/** Accessibility check — detects common a11y violations in JSX/TSX code. */
+import type { CheckResult } from "../types.js";
+export declare function runAccessibility(cwd: string): CheckResult;

package/dist/runners/accessibility.js

@@ -0,0 +1,85 @@
+/** Accessibility check — detects common a11y violations in JSX/TSX code. */
+import { existsSync, readFileSync } from "node:fs";
+import { join } from "node:path";
+import { gradeFromScore } from "../types.js";
+import { getProductionFiles } from "../fs-utils.js";
+export function runAccessibility(cwd) {
+    const start = Date.now();
+    const files = getProductionFiles(cwd).filter((f) => f.ext === ".tsx" || f.ext === ".jsx");
+    if (files.length === 0) {
+        return { name: "accessibility", score: 100, grade: "A", details: { skipped: true, reason: "no JSX/TSX files" }, issues: [], duration: Date.now() - start };
+    }
+    const issues = [];
+    let missingAlt = 0;
+    let clickDiv = 0;
+    let missingLabel = 0;
+    let missingLang = 0;
+    let autofocus = 0;
+    let positiveTabindex = 0;
+    for (const f of files) {
+        const lines = f.content.split("\n");
+        for (let i = 0; i < lines.length; i++) {
+            const line = lines[i];
+            const trimmed = line.trim();
+            if (trimmed.startsWith("//") || trimmed.startsWith("*"))
+                continue;
+            // 1. <img> without alt
+            if (/<img\b/.test(trimmed) && !/alt=/.test(trimmed)) {
+                const block = lines.slice(i, Math.min(i + 5, lines.length)).join(" ");
+                if (/<img\b/.test(block) && !/alt=/.test(block)) {
+                    missingAlt++;
+                    issues.push({ severity: "error", message: "<img> missing alt attribute", file: f.path, line: i + 1, rule: "img-alt" });
+                }
+            }
+            // 2. Click handler on non-interactive element without role/keyboard
+            if (/onClick=/.test(trimmed) && /<(?:div|span|p|li|section|article|header|footer)\b/.test(trimmed)) {
+                const block = lines.slice(i, Math.min(i + 3, lines.length)).join(" ");
+                if (!(/role=/.test(block) && /(?:onKeyDown|onKeyUp|onKeyPress|tabIndex)/.test(block))) {
+                    clickDiv++;
+                    issues.push({ severity: "warning", message: "Click handler on non-interactive element without role + keyboard handler", file: f.path, line: i + 1, rule: "click-events" });
+                }
+            }
+            // 3. <input>/<select>/<textarea> without associated label
+            if (/<(?:input|select|textarea)\b/.test(trimmed) && !/type=["'](?:hidden|submit|button|reset)["']/.test(trimmed)) {
+                const block = lines.slice(Math.max(0, i - 3), Math.min(i + 3, lines.length)).join(" ");
+                if (!/aria-label=/.test(block) && !/aria-labelledby=/.test(block) && !/<label/.test(block) && !/id=/.test(trimmed)) {
+                    missingLabel++;
+                    issues.push({ severity: "warning", message: "Form control without label, aria-label, or aria-labelledby", file: f.path, line: i + 1, rule: "form-label" });
+                }
+            }
+            // 4. autoFocus
+            if (/\bautoFocus\b/.test(trimmed) || /\bautofocus\b/.test(trimmed)) {
+                autofocus++;
+                issues.push({ severity: "warning", message: "autoFocus can disorient screen reader users", file: f.path, line: i + 1, rule: "no-autofocus" });
+            }
+            // 5. Positive tabIndex
+            if (/tabIndex=\{[1-9]/.test(trimmed) || /tabindex=["'][1-9]/.test(trimmed)) {
+                positiveTabindex++;
+                issues.push({ severity: "warning", message: "Positive tabIndex disrupts natural tab order — use 0 or -1", file: f.path, line: i + 1, rule: "tabindex" });
+            }
+        }
+    }
+    // 6. Check for html lang attribute in index.html
+    const htmlPaths = ["index.html", "web/index.html", "public/index.html"];
+    for (const h of htmlPaths) {
+        const full = join(cwd, h);
+        if (!existsSync(full))
+            continue;
+        const content = readFileSync(full, "utf-8");
+        if (/<html\b/.test(content) && !/<html[^>]*lang=/.test(content)) {
+            missingLang++;
+            issues.push({ severity: "warning", message: "<html> missing lang attribute", file: h, rule: "html-lang" });
+        }
+    }
+    const errors = issues.filter((i) => i.severity === "error").length;
+    const warnings = issues.filter((i) => i.severity === "warning").length;
+    const score = Math.max(0, Math.min(100, 100 - errors * 10 - warnings * 4));
+    return {
+        name: "accessibility",
+        score,
+        grade: gradeFromScore(score),
+        details: { jsxFiles: files.length, missingAlt, clickDiv, missingLabel, missingLang, autofocus, positiveTabindex },
+        issues,
+        duration: Date.now() - start,
+    };
+}

package/dist/runners/react.d.ts

@@ -0,0 +1,3 @@
+/** React-specific checks — hooks rules, conditional hooks, missing keys, prop spreading. */
+import type { CheckResult, StackInfo } from "../types.js";
+export declare function runReact(cwd: string, stack: StackInfo): CheckResult;

package/dist/runners/react.js

@@ -0,0 +1,81 @@
+/** React-specific checks — hooks rules, conditional hooks, missing keys, prop spreading. */
+import { gradeFromScore } from "../types.js";
+import { getProductionFiles } from "../fs-utils.js";
+export function runReact(cwd, stack) {
+    const start = Date.now();
+    if (stack.framework !== "react") {
+        return { name: "react", score: 100, grade: "A", details: { skipped: true, reason: "not a React project" }, issues: [], duration: Date.now() - start };
+    }
+    const files = getProductionFiles(cwd).filter((f) => f.ext === ".tsx" || f.ext === ".jsx");
+    if (files.length === 0) {
+        return { name: "react", score: 100, grade: "A", details: { skipped: true, reason: "no JSX/TSX files" }, issues: [], duration: Date.now() - start };
+    }
+    const issues = [];
+    let conditionalHooks = 0;
+    let missingKeys = 0;
+    let propSpreading = 0;
+    let inlineHandlers = 0;
+    let indexKeys = 0;
+    for (const f of files) {
+        const lines = f.content.split("\n");
+        // Track if we're inside a conditional block
+        let condDepth = 0;
+        for (let i = 0; i < lines.length; i++) {
+            const line = lines[i];
+            const trimmed = line.trim();
+            // Skip comments
+            if (trimmed.startsWith("//") || trimmed.startsWith("*"))
+                continue;
+            // Track conditional blocks
+            if (/\b(if|else|switch)\s*\(/.test(trimmed))
+                condDepth++;
+            if (condDepth > 0 && trimmed.includes("{"))
+                condDepth++;
+            if (condDepth > 0 && trimmed.includes("}"))
+                condDepth--;
+            // 1. Hooks called inside conditionals
+            if (condDepth > 0 && /\buse[A-Z]\w*\s*\(/.test(trimmed) && !/\/\//.test(trimmed.split("use")[0])) {
+                conditionalHooks++;
+                issues.push({ severity: "error", message: "Hook called inside conditional — violates Rules of Hooks", file: f.path, line: i + 1, rule: "conditional-hook" });
+            }
+            // 2. Missing key in .map() returning JSX
+            if (/\.map\s*\(/.test(trimmed)) {
+                // Look ahead for JSX return without key
+                const mapBlock = lines.slice(i, Math.min(i + 10, lines.length)).join("\n");
+                if (/<\w/.test(mapBlock) && !mapBlock.includes("key=") && !mapBlock.includes("key:")) {
+                    missingKeys++;
+                    issues.push({ severity: "error", message: "JSX in .map() without key prop", file: f.path, line: i + 1, rule: "missing-key" });
+                }
+            }
+            // 3. index as key
+            if (/key=\{(?:i|idx|index)\}/.test(trimmed) || /key=\{.*(?:, *(?:i|idx|index)\))/.test(trimmed)) {
+                indexKeys++;
+                issues.push({ severity: "warning", message: "Using index as key — can cause rendering bugs with reorderable lists", file: f.path, line: i + 1, rule: "index-key" });
+            }
+            // 4. Prop spreading ({...props} on DOM elements)
+            if (/\{\.\.\.(?!children)\w+\}/.test(trimmed) && /<[a-z]/.test(trimmed)) {
+                propSpreading++;
+                issues.push({ severity: "warning", message: "Spreading props onto DOM element — can pass unexpected attributes", file: f.path, line: i + 1, rule: "prop-spreading" });
+            }
+            // 5. Inline arrow functions in JSX event handlers (performance)
+            if (/on[A-Z]\w*=\{(?:\(\) =>|function)/.test(trimmed)) {
+                inlineHandlers++;
+            }
+        }
+    }
+    // Only warn about inline handlers if there are many
+    if (inlineHandlers > 15) {
+        issues.push({ severity: "warning", message: `${inlineHandlers} inline arrow functions in JSX handlers — extract to named functions for readability`, rule: "inline-handlers" });
+    }
+    const errors = issues.filter((i) => i.severity === "error").length;
+    const warnings = issues.filter((i) => i.severity === "warning").length;
+    const score = Math.max(0, Math.min(100, 100 - errors * 8 - warnings * 3));
+    return {
+        name: "react",
+        score,
+        grade: gradeFromScore(score),
+        details: { jsxFiles: files.length, conditionalHooks, missingKeys, indexKeys, propSpreading, inlineHandlers },
+        issues,
+        duration: Date.now() - start,
+    };
+}

package/package.json

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