@vibecodeqa/cli 0.36.2 → 0.37.1

package/dist/monitor.js

@@ -104,6 +104,21 @@ function buildFixPrompt(checkName, issue, cwd) {
     prompt += "\n\nAnalyze the code, explain the issue, and provide the fix.";
     return prompt;
 }
+function getGitChanges(cwd) {
+    try {
+        const out = execSync("git status --porcelain", { cwd, encoding: "utf-8", stdio: ["pipe", "pipe", "pipe"] }).trim();
+        if (!out)
+            return [];
+        return out.split("\n").map((line) => {
+            const status = (line[0] === "?" ? "?" : line.trim()[0]);
+            const file = line.slice(3).trim();
+            return { status, file };
+        });
+    }
+    catch {
+        return [];
+    }
+}
 // ── Scan via child process — UI never freezes ──
 function runScanProcess(cwd, skipTests) {
     return new Promise((resolve) => {
@@ -333,6 +348,29 @@ function IssueDetail({ issue, checkName, cwd, height, copied }) {
     const promptLines = prompt.split("\n");
     return (_jsxs(Box, { flexDirection: "column", height: height, paddingX: 1, overflowY: "hidden", children: [_jsx(Text, { bold: true, color: "magenta", children: " \u25C8 Issue Detail" }), _jsxs(Text, { children: [_jsxs(Text, { color: sc(issue.severity), bold: true, children: [" ", issue.severity.toUpperCase(), " "] }), _jsx(Text, { dimColor: true, children: checkName }), issue.rule && _jsxs(Text, { dimColor: true, children: [" \u00B7 ", issue.rule] }), copied && _jsx(Text, { color: "green", bold: true, children: " \u2713 Copied!" })] }), _jsxs(Text, { wrap: "wrap", children: [" ", issue.message] }), issue.file && (_jsxs(Text, { color: "cyan", children: [" ", issue.file, issue.line ? `:${issue.line}` : ""] })), ctx && (_jsxs(Box, { flexDirection: "column", height: srcHeight, overflowY: "hidden", children: [_jsxs(Text, { dimColor: true, children: [" \u2500\u2500\u2500 ", ctx.filePath, " \u2500\u2500\u2500"] }), ctx.lines.slice(0, srcHeight - 2).map((l) => (_jsxs(Text, { wrap: "truncate", children: [_jsx(Text, { color: l.highlight ? "yellow" : "gray", children: l.highlight ? "▸" : " " }), _jsxs(Text, { dimColor: true, children: [String(l.num).padStart(4), "\u2502"] }), _jsx(Text, { color: l.highlight ? "white" : undefined, children: l.text })] }, l.num))), _jsx(Text, { dimColor: true, children: " \u2500\u2500\u2500" })] })), _jsxs(Box, { flexDirection: "column", height: Math.max(3, promptHeight), overflowY: "hidden", marginTop: ctx ? 0 : 1, children: [_jsxs(Text, { bold: true, color: "green", children: [" Fix prompt ", _jsx(Text, { dimColor: true, children: "(y to copy)" })] }), promptLines.slice(0, Math.max(1, promptHeight - 1)).map((line, i) => (_jsxs(Text, { dimColor: true, wrap: "truncate", children: [" ", line] }, i)))] })] }));
 }
+// ── Git Changes View ──
+function GitChangesView({ cwd, checks, height, cursor }) {
+    const changes = useMemo(() => getGitChanges(cwd), [cwd]);
+    // Cross-reference with issues
+    const issuesByFile = useMemo(() => {
+        const map = new Map();
+        for (const c of checks) {
+            for (const iss of c.issues) {
+                if (iss.file && typeof iss.file === "string") {
+                    map.set(iss.file, (map.get(iss.file) || 0) + 1);
+                }
+            }
+        }
+        return map;
+    }, [checks]);
+    const statusColor = { M: "yellow", A: "green", D: "red", "?": "gray", R: "cyan" };
+    const visibleLines = Math.max(1, height - 5);
+    return (_jsxs(Box, { flexDirection: "column", height: height, paddingX: 1, overflowY: "hidden", children: [_jsxs(Text, { bold: true, color: "magenta", children: [" \u25C8 Git Changes (", changes.length, ")"] }), changes.length === 0 ? (_jsx(Text, { dimColor: true, children: " Working tree clean \u2014 no uncommitted changes." })) : (_jsxs(_Fragment, { children: [changes.slice(0, visibleLines).map((ch, i) => {
+                        const sel = i === cursor;
+                        const count = issuesByFile.get(ch.file) || 0;
+                        return (_jsxs(Text, { wrap: "truncate", children: [_jsx(Text, { color: sel ? "white" : "gray", children: sel ? "▸" : " " }), _jsxs(Text, { color: statusColor[ch.status] || "gray", bold: true, children: [" ", ch.status, " "] }), _jsxs(Text, { color: sel ? "white" : undefined, children: [ch.file, " "] }), count > 0 ? (_jsxs(Text, { color: "yellow", children: [count, " issue", count !== 1 ? "s" : ""] })) : (_jsx(Text, { color: "green", children: "clean" }))] }, ch.file));
+                    }), changes.length > visibleLines && _jsxs(Text, { dimColor: true, children: [" +", changes.length - visibleLines, " more"] })] }))] }));
+}
 function MonitorApp({ cwd }) {
     const { exit } = useApp();
     const { stdout } = useStdout();
@@ -465,6 +503,11 @@ function MonitorApp({ cwd }) {
                 setCursor(mode.issueIdx);
                 return;
             }
+            if (mode.view === "file-issues") {
+                setMode({ view: "git-changes" });
+                setCursor(0);
+                return;
+            }
             if (mode.view !== "dashboard") {
                 setMode({ view: "dashboard" });
                 setCursor(0);
@@ -529,6 +572,11 @@ function MonitorApp({ cwd }) {
             setCursor(0);
             return;
         }
+        if (input === "g") {
+            setMode({ view: "git-changes" });
+            setCursor(0);
+            return;
+        }
         if (input === "c") {
             setMode({ view: "config" });
             setConfigCursor(0);
@@ -591,6 +639,37 @@ function MonitorApp({ cwd }) {
                 }
             }
         }
+        // ── Git changes: ↑↓ navigate, Enter drill into file issues ──
+        if (mode.view === "git-changes") {
+            const changes = getGitChanges(cwd);
+            if (key.upArrow)
+                setCursor((c) => Math.max(0, c - 1));
+            if (key.downArrow)
+                setCursor((c) => Math.min(changes.length - 1, c + 1));
+            if (key.return && changes[cursor]) {
+                setMode({ view: "file-issues", file: changes[cursor].file });
+                setCursor(0);
+            }
+        }
+        // ── File issues: ↑↓ navigate, Enter drill into issue detail, y copy ──
+        if (mode.view === "file-issues") {
+            const fileIssues = state.checks.flatMap((c) => c.issues.filter((i) => i.file === mode.file).map((i) => ({ check: c.name, ...i })));
+            if (key.upArrow)
+                setCursor((c) => Math.max(0, c - 1));
+            if (key.downArrow)
+                setCursor((c) => Math.min(fileIssues.length - 1, c + 1));
+            if (key.return && fileIssues[cursor]) {
+                setMode({ view: "issue-detail", checkName: fileIssues[cursor].check, issueIdx: 0 });
+            }
+            if (input === "y" && fileIssues[cursor]) {
+                const prompt = buildFixPrompt(fileIssues[cursor].check, fileIssues[cursor], cwd);
+                if (copyToClipboard(prompt)) {
+                    setCopied(true);
+                    addLog(`Copied fix prompt`, "info");
+                    setTimeout(() => setCopied(false), 2000);
+                }
+            }
+        }
         // ── Trends: ↑↓ scroll ──
         if (mode.view === "trends") {
             if (key.upArrow)
@@ -602,6 +681,16 @@ function MonitorApp({ cwd }) {
     const proj = basename(cwd);
     const p = monCfg.panels;
     // ── Render views ──
+    if (mode.view === "git-changes") {
+        return (_jsxs(Box, { flexDirection: "column", height: rows, children: [_jsx(Header, { proj: proj, stack: stack, workspace: workspace, state: state }), _jsx(GitChangesView, { cwd: cwd, checks: state.checks, height: rows - 3, cursor: cursor }), _jsx(Box, { paddingX: 1, children: _jsx(Text, { dimColor: true, children: "Esc back \u00B7 \u2191\u2193 select \u00B7 Enter view file issues \u00B7 q quit" }) })] }));
+    }
+    if (mode.view === "file-issues") {
+        const fileIssues = state.checks.flatMap((c) => c.issues.filter((i) => i.file === mode.file).map((i) => ({ check: c.name, ...i })));
+        return (_jsxs(Box, { flexDirection: "column", height: rows, children: [_jsx(Header, { proj: proj, stack: stack, workspace: workspace, state: state }), _jsxs(Box, { flexDirection: "column", height: rows - 3, paddingX: 1, overflowY: "hidden", children: [_jsxs(Text, { bold: true, color: "magenta", children: [" \u25C8 ", mode.file] }), _jsxs(Text, { dimColor: true, children: [" ", fileIssues.length, " issue", fileIssues.length !== 1 ? "s" : "", copied && _jsx(Text, { color: "green", bold: true, children: " \u2713 Copied!" })] }), _jsx(Text, { children: " " }), fileIssues.length === 0 ? (_jsx(Text, { color: "green", children: " No issues in this file." })) : (fileIssues.slice(0, rows - 8).map((iss, i) => {
+                            const sel = i === cursor;
+                            return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { children: [_jsx(Text, { color: sel ? "white" : "gray", children: sel ? "▸" : " " }), _jsxs(Text, { color: sc(iss.severity), bold: true, children: [iss.severity[0].toUpperCase(), " "] }), iss.line && _jsx(Text, { color: "cyan", children: String(iss.line).padEnd(5) }), _jsx(Text, { dimColor: true, children: iss.check.padEnd(14) }), iss.rule && _jsxs(Text, { dimColor: true, children: ["(", iss.rule, ") "] })] }), _jsxs(Text, { wrap: "wrap", children: [_jsx(Text, { color: sel ? "white" : "gray", children: "  " }), _jsx(Text, { color: sel ? "white" : undefined, children: iss.message })] })] }, i));
+                        }))] }), _jsx(Box, { paddingX: 1, children: _jsx(Text, { dimColor: true, children: "Esc back \u00B7 \u2191\u2193 select \u00B7 Enter source \u00B7 y copy prompt \u00B7 q quit" }) })] }));
+    }
     if (mode.view === "issue-detail") {
         const check = state.checks.find((c) => c.name === mode.checkName);
         const issue = check?.issues[mode.issueIdx];
@@ -633,7 +722,7 @@ function MonitorApp({ cwd }) {
                                     })] }))] })), mainVisible && (_jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [p.activity && _jsx(ActivityPanel, { log: log, height: activityH }), p.issues && (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: panel === "issues" ? "magenta" : "gray", paddingX: 1, height: issuesH, overflowY: "hidden", children: [_jsxs(Text, { bold: true, color: "magenta", children: [" ", "\u25C8 Issues (", allIssues.length, ") ", panel === "issues" && _jsx(Text, { dimColor: true, children: "\u25C4" })] }), allIssues.slice(0, issuesH - 3).map((iss, i) => {
                                         const sel = panel === "issues" && i === cursor;
                                         return (_jsxs(Text, { wrap: "truncate", children: [_jsx(Text, { color: sel ? "white" : "gray", children: sel ? "▸" : " " }), _jsxs(Text, { color: sc(iss.severity), bold: true, children: [iss.severity[0].toUpperCase(), " "] }), _jsxs(Text, { dimColor: true, children: [(iss.check || "").slice(0, 11).padEnd(11), " "] }), iss.file && _jsxs(Text, { color: "cyan", children: [basename(String(iss.file)).slice(0, 18).padEnd(18), " "] }), _jsx(Text, { children: iss.message.slice(0, 40) })] }, i));
-                                    }), allIssues.length > issuesH - 3 && _jsxs(Text, { dimColor: true, children: [" +", allIssues.length - (issuesH - 3), " more"] })] }))] })), !sidebarVisible && !mainVisible && (_jsx(Box, { height: bodyRows, justifyContent: "center", alignItems: "center", children: _jsx(Text, { dimColor: true, children: "All panels hidden. Press c to configure." }) }))] }), _jsx(Box, { paddingX: 1, justifyContent: "space-between", children: _jsx(Text, { dimColor: true, children: "Tab panel \u00B7 \u2191\u2193 select \u00B7 Enter drill \u00B7 Esc back \u00B7 r scan \u00B7 t trends \u00B7 c config \u00B7 q quit" }) })] }));
+                                    }), allIssues.length > issuesH - 3 && _jsxs(Text, { dimColor: true, children: [" +", allIssues.length - (issuesH - 3), " more"] })] }))] })), !sidebarVisible && !mainVisible && (_jsx(Box, { height: bodyRows, justifyContent: "center", alignItems: "center", children: _jsx(Text, { dimColor: true, children: "All panels hidden. Press c to configure." }) }))] }), _jsx(Box, { paddingX: 1, justifyContent: "space-between", children: _jsx(Text, { dimColor: true, children: "Tab panel \u00B7 \u2191\u2193 Enter Esc \u00B7 r scan \u00B7 g git \u00B7 t trends \u00B7 c config \u00B7 q quit" }) })] }));
 }
 function Header({ proj, stack, workspace, state }) {
     return (_jsxs(Box, { paddingX: 1, justifyContent: "space-between", children: [_jsxs(Text, { children: [_jsx(Text, { color: "magenta", bold: true, children: "vcqa monitor" }), _jsxs(Text, { dimColor: true, children: [" v", VERSION] })] }), _jsxs(Text, { children: [_jsx(Text, { bold: true, children: proj }), _jsxs(Text, { dimColor: true, children: [" ", stack.language, "/", stack.framework, workspace.isMonorepo ? ` · ${workspace.tool}` : ""] })] }), _jsxs(Text, { children: [state.score > 0 && _jsxs(Text, { color: gc(state.grade), bold: true, children: [state.grade, " ", state.score, " "] }), _jsx(Text, { dimColor: true, children: state.scanning ? "⟳ scanning" : "● watching" })] })] }));

package/dist/runners/accessibility.js

@@ -125,8 +125,8 @@ export function runAccessibility(cwd) {
             }
         }
     }
-    // 7. Check for html lang attribute in index.html
-    const htmlPaths = ["index.html", "web/index.html", "public/index.html"];
+    // 7. Check for html lang attribute + viewport + mobile meta in index.html
+    const htmlPaths = ["index.html", "web/index.html", "public/index.html", "src/index.html"];
     for (const h of htmlPaths) {
         const full = join(cwd, h);
         if (!existsSync(full))
@@ -136,6 +136,42 @@ export function runAccessibility(cwd) {
             missingLang++;
             issues.push({ severity: "warning", message: "<html> missing lang attribute", file: h, rule: "html-lang" });
         }
+        // Mobile viewport
+        if (!/<meta[^>]*name=["']viewport["']/.test(content)) {
+            issues.push({ severity: "error", message: "Missing <meta name=\"viewport\"> — page won't scale on mobile", file: h, rule: "missing-viewport" });
+        }
+        // charset
+        if (!/<meta[^>]*charset=/i.test(content)) {
+            issues.push({ severity: "warning", message: "Missing <meta charset> — may cause encoding issues", file: h, rule: "missing-charset" });
+        }
+        // Touch icon for mobile bookmarks
+        if (!/<link[^>]*apple-touch-icon/.test(content) && !/<link[^>]*icon/.test(content)) {
+            issues.push({ severity: "info", message: "No favicon or apple-touch-icon — poor mobile bookmark experience", file: h, rule: "missing-icon" });
+        }
+    }
+    // 8. Mobile-unfriendly patterns in components
+    for (const f of files) {
+        const source = f.rawContent || f.content;
+        const lines = source.split("\n");
+        for (let i = 0; i < lines.length; i++) {
+            const line = lines[i];
+            // Fixed pixel widths that break on mobile
+            if (/style=.*width:\s*\d{4,}px/.test(line)) {
+                issues.push({ severity: "info", message: "Fixed width ≥1000px — likely breaks on mobile", file: f.path, line: i + 1, rule: "fixed-width" });
+            }
+            // Horizontal scroll containers without overflow handling
+            if (/overflow-x:\s*(?:scroll|auto)/.test(line) && !/\btouch\b/.test(line) && !/-webkit-overflow-scrolling/.test(line)) {
+                issues.push({ severity: "info", message: "Horizontal scroll without touch-action — poor mobile scroll UX", file: f.path, line: i + 1, rule: "touch-scroll" });
+            }
+            // Hover-only interactions (no touch fallback)
+            if (/onMouseEnter=|@mouseenter|on:mouseenter/.test(line) && !/onClick=|@click|on:click|onTouchStart|@touchstart/.test(line)) {
+                issues.push({ severity: "info", message: "Hover-only interaction — unreachable on touch devices", file: f.path, line: i + 1, rule: "hover-only" });
+            }
+            // Tiny touch targets
+            if (/(?:width|height):\s*(?:1[0-9]|[1-9])px/.test(line) && /(?:onClick|@click|on:click|button|<a )/.test(line)) {
+                issues.push({ severity: "info", message: "Touch target likely <44px — hard to tap on mobile (WCAG 2.5.8)", file: f.path, line: i + 1, rule: "small-touch-target" });
+            }
+        }
     }
     const errors = issues.filter((i) => i.severity === "error").length;
     const warnings = issues.filter((i) => i.severity === "warning").length;

package/dist/runners/dead-patterns.js

@@ -82,8 +82,10 @@ export async function runDeadPatterns(cwd) {
                 let started = false;
                 for (let j = i; j < Math.min(i + 20, lines.length); j++) {
                     const l = lines[j];
-                    braceDepth += (l.match(/\{/g) || []).length;
-                    braceDepth -= (l.match(/\}/g) || []).length;
+                    // For "} catch (e) {" on one line, only count braces after "catch"
+                    const braceText = j === i && l.includes("catch") ? l.slice(l.indexOf("catch")) : l;
+                    braceDepth += (braceText.match(/\{/g) || []).length;
+                    braceDepth -= (braceText.match(/\}/g) || []).length;
                     if (braceDepth > 0)
                         started = true;
                     if (started && j > i) {

package/dist/runners/performance.js

@@ -178,6 +178,36 @@ export function runPerformance(cwd) {
             });
         }
     }
+    // ── 7. PWA readiness (web projects only) ──
+    const isWebProject = !!(deps.react || deps.vue || deps.svelte || deps["@sveltejs/kit"] || deps.next || deps.nuxt);
+    if (isWebProject) {
+        const manifestPaths = ["public/manifest.json", "public/manifest.webmanifest", "manifest.json", "web/manifest.json"];
+        const hasManifest = manifestPaths.some((p) => existsSync(join(cwd, p)));
+        if (!hasManifest) {
+            issues.push({ severity: "info", message: "No web app manifest — can't install as PWA or add to home screen", rule: "no-manifest" });
+        }
+        const swPaths = ["public/sw.js", "public/service-worker.js", "src/service-worker.ts", "src/sw.ts"];
+        const hasSW = swPaths.some((p) => existsSync(join(cwd, p))) || !!(deps["workbox-webpack-plugin"] || deps["vite-plugin-pwa"] || deps["next-pwa"]);
+        if (!hasSW) {
+            issues.push({ severity: "info", message: "No service worker — app won't work offline", rule: "no-service-worker" });
+        }
+    }
+    // ── 8. CSS best practices ──
+    const cssFiles = getProductionFiles(cwd).filter((f) => f.ext === ".css");
+    for (const f of cssFiles) {
+        const lines = f.content.split("\n");
+        for (let i = 0; i < lines.length; i++) {
+            const line = lines[i];
+            // !important overuse
+            if (/!important/.test(line)) {
+                issues.push({ severity: "info", message: "!important — specificity escape hatch, usually a sign of CSS architecture issues", file: f.path, line: i + 1, rule: "css-important" });
+            }
+        }
+        // No media queries in CSS with fixed layouts
+        if (f.content.length > 500 && !/@media/.test(f.content) && /width:\s*\d{3,}px/.test(f.content)) {
+            issues.push({ severity: "info", message: "CSS with fixed widths but no @media queries — likely not responsive", file: f.path, rule: "no-media-queries" });
+        }
+    }
     // Score — proportional to codebase, capped per category
     const totalFiles = sourceFiles.length || 1;
     const barrelPenalty = Math.min(15, (barrelImports / totalFiles) * 200);

package/package.json

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