@vibecodeqa/cli 0.15.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) },
@@ -132,6 +137,12 @@ async function main() {
     }
     writeFileSync(join(outputDir, "report.json"), JSON.stringify(report, null, 2));
     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/components.d.ts

@@ -0,0 +1,10 @@
+/** Reusable HTML components and helpers for the report. */
+import type { Priority } from "../check-meta.js";
+/** HTML-escape a string. */
+export declare function e(s: string): string;
+/** Make a file path a clickable GitHub link if repoUrl is available. */
+export declare function fileLink(path: string, line: number | undefined, repoUrl: string | null, branch: string): string;
+/** Grade color. */
+export declare function gc(grade: string): string;
+/** Priority color. */
+export declare function pc(p: Priority): string;

package/dist/report/components.js

@@ -0,0 +1,21 @@
+/** Reusable HTML components and helpers for the report. */
+/** HTML-escape a string. */
+export function e(s) {
+    return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+/** Make a file path a clickable GitHub link if repoUrl is available. */
+export function fileLink(path, line, repoUrl, branch) {
+    const clean = path.split(":")[0];
+    if (!repoUrl || !/^https?:\/\//.test(repoUrl))
+        return e(path);
+    const href = `${repoUrl}/blob/${branch}/${clean}${line ? `#L${line}` : ""}`;
+    return `<a href="${e(href)}" target="_blank" rel="noopener" class="flink">${e(path)}</a>`;
+}
+/** Grade color. */
+export function gc(grade) {
+    return { A: "#22c55e", B: "#84cc16", C: "#eab308", D: "#f97316", F: "#ef4444" }[grade] || "#6b7280";
+}
+/** Priority color. */
+export function pc(p) {
+    return { critical: "#ef4444", high: "#f97316", medium: "#eab308", low: "#6b7280" }[p];
+}

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, historyDir?: string): string;