@vibecodeqa/cli 0.35.5 → 0.35.7

package/dist/monitor.js

@@ -10,9 +10,10 @@ import { useState, useEffect, useCallback, useRef } from "react";
 import { render, Box, Text, useApp, useInput, useStdout } from "ink";
 import { resolve, join, basename } from "node:path";
 import { watch, existsSync, mkdirSync, writeFileSync, readFileSync } from "node:fs";
-import { execFile } from "node:child_process";
+import { execFile, execSync } from "node:child_process";
 import { fileURLToPath } from "node:url";
 import { detectStack, detectWorkspace } from "./detect.js";
+import { loadHistory } from "./history.js";
 const VERSION = JSON.parse(readFileSync(new URL("../package.json", import.meta.url), "utf-8")).version;
 const CLI_PATH = fileURLToPath(new URL("./cli.js", import.meta.url));
 const DEFAULTS = {
@@ -67,9 +68,19 @@ function spark(values) {
 function ts() {
     return new Date().toLocaleTimeString("en-US", { hour12: false, hour: "2-digit", minute: "2-digit", second: "2-digit" });
 }
-function bar(score, width) {
-    const filled = Math.round((score / 100) * width);
-    return "█".repeat(filled) + "░".repeat(width - filled);
+function copyToClipboard(text) {
+    try {
+        const cmd = process.platform === "darwin" ? "pbcopy" : process.platform === "win32" ? "clip" : "xclip -selection clipboard";
+        execSync(cmd, { input: text, stdio: ["pipe", "pipe", "pipe"] });
+        return true;
+    }
+    catch {
+        return false;
+    }
+}
+function buildFixPrompt(checkName, issue) {
+    const loc = issue.file ? `${issue.file}${issue.line ? `:${issue.line}` : ""}` : "";
+    return `Fix this ${issue.severity} in ${loc || "the project"}:\n${issue.message}${issue.rule ? ` (${issue.rule})` : ""}\nCheck: ${checkName}\n\nAnalyze the code, explain the issue, and provide the fix.`;
 }
 // ── Scan via child process — UI never freezes ──
 function runScanProcess(cwd, skipTests) {
@@ -110,12 +121,6 @@ function ScorePanel({ state, height }) {
     const active = state.checks.filter((c) => !c.details.skipped && !c.details.comingSoon);
     return (_jsxs(Box, { flexDirection: "column", width: 24, height: height, borderStyle: "round", borderColor: "gray", paddingX: 1, children: [_jsx(Text, { bold: true, color: "magenta", children: " \u25C8 Score" }), _jsx(Box, { justifyContent: "center", marginY: 1, children: _jsx(Text, { color: gc(state.grade), bold: true, children: state.scanning ? " scanning..." : `   ${state.grade} ${state.score}/100` }) }), _jsxs(Text, { dimColor: true, children: [" ", active.length, " checks \u00B7 ", state.totalIssues, " issues"] }), _jsxs(Text, { dimColor: true, children: [" ", state.duration, "ms \u00B7 scan #", state.scanCount] }), s && _jsxs(Text, { color: "cyan", children: [" ", s] })] }));
 }
-function ChecksPanel({ checks, height }) {
-    const active = checks.filter((c) => !c.details.skipped && !c.details.comingSoon);
-    const pro = checks.filter((c) => c.details.comingSoon);
-    const visibleLines = Math.max(1, height - 3);
-    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "gray", paddingX: 1, width: 24, height: height, overflowY: "hidden", children: [_jsx(Text, { bold: true, color: "magenta", children: " \u25C8 Checks" }), active.slice(0, visibleLines).map((c) => (_jsxs(Text, { children: [_jsxs(Text, { color: gc(c.grade), children: [" ", c.grade === "A" ? "●" : c.grade === "B" ? "◐" : "○", " "] }), _jsx(Text, { children: c.name.slice(0, 13).padEnd(13) }), _jsxs(Text, { dimColor: true, children: [" ", bar(c.score, 4), " "] }), _jsx(Text, { color: gc(c.grade), children: String(c.score).padStart(3) })] }, c.name))), active.length > visibleLines && _jsxs(Text, { dimColor: true, children: [" +", active.length - visibleLines, " more"] }), pro.length > 0 && _jsxs(Text, { color: "magenta", children: [" \u25C6 ", pro.length, " Pro"] })] }));
-}
 function ActivityPanel({ log, height }) {
     const colors = {
         info: "gray", scan: "cyan", change: "yellow",
@@ -124,18 +129,6 @@ function ActivityPanel({ log, height }) {
     const visibleLines = Math.max(1, height - 3);
     return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "gray", paddingX: 1, height: height, overflowY: "hidden", children: [_jsx(Text, { bold: true, color: "magenta", children: " \u25C8 Activity" }), log.slice(-visibleLines).map((entry, i) => (_jsxs(Text, { wrap: "truncate", children: [_jsxs(Text, { dimColor: true, children: [entry.time, " "] }), _jsx(Text, { color: colors[entry.type], children: entry.text })] }, i)))] }));
 }
-function IssuesPanel({ checks, height }) {
-    const issues = checks
-        .flatMap((c) => c.issues.map((i) => ({ check: c.name, ...i })))
-        .sort((a, b) => {
-        const o = { error: 0, warning: 1, info: 2 };
-        return (o[a.severity] ?? 2) - (o[b.severity] ?? 2);
-    });
-    const errors = issues.filter((i) => i.severity === "error").length;
-    const warnings = issues.filter((i) => i.severity === "warning").length;
-    const visibleLines = Math.max(1, height - 3);
-    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "gray", paddingX: 1, height: height, overflowY: "hidden", children: [_jsxs(Text, { bold: true, color: "magenta", children: [" ", "\u25C8 Issues (", issues.length, ")", errors > 0 && _jsxs(Text, { color: "red", children: [" ", errors, "E"] }), warnings > 0 && _jsxs(Text, { color: "yellow", children: [" ", warnings, "W"] })] }), issues.slice(0, visibleLines).map((iss, i) => (_jsxs(Text, { wrap: "truncate", children: [_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, 45) })] }, i))), issues.length > visibleLines && _jsxs(Text, { dimColor: true, children: [" +", issues.length - visibleLines, " more"] })] }));
-}
 function ConfigScreen({ monCfg, onSave, onClose, }) {
     const [cursor, setCursor] = useState(0);
     const [cfg, setCfg] = useState(JSON.parse(JSON.stringify(monCfg)));
@@ -199,6 +192,55 @@ function ConfigScreen({ monCfg, onSave, onClose, }) {
                 return (_jsxs(Text, { children: [_jsxs(Text, { color: selected ? "white" : "gray", children: [prefix, opt.label.padEnd(28)] }), _jsxs(Text, { color: "cyan", bold: true, children: ["\u25C0 ", String(opt.value).padStart(5), " \u25B6"] })] }, opt.key));
             }), _jsx(Text, { dimColor: true, children: " " }), _jsx(Text, { dimColor: true, children: " \u2191\u2193 navigate \u00B7 Space toggle \u00B7 \u2190\u2192 adjust \u00B7 Shift+\u2190\u2192 \u00D710" }), _jsx(Text, { dimColor: true, children: " s save & close \u00B7 Esc cancel" })] }));
 }
+// ── Trends Screen ──
+function sparkFull(values, width) {
+    if (values.length < 2)
+        return "";
+    const bars = " ▁▂▃▄▅▆▇█";
+    const min = Math.min(...values);
+    const max = Math.max(...values);
+    const range = max - min || 1;
+    // Resample to fit width
+    const sampled = [];
+    for (let i = 0; i < width; i++) {
+        const idx = Math.round((i / (width - 1)) * (values.length - 1));
+        sampled.push(values[idx]);
+    }
+    return sampled.map((v) => bars[Math.round(((v - min) / range) * 8)]).join("");
+}
+function TrendsScreen({ cwd, height, onClose }) {
+    const historyDir = join(cwd, ".vibe-check", "history");
+    const history = loadHistory(historyDir);
+    useInput((input, key) => {
+        if (key.escape || input === "t")
+            onClose();
+    });
+    if (history.length < 2) {
+        return (_jsxs(Box, { flexDirection: "column", height: height, paddingX: 1, children: [_jsx(Text, { bold: true, color: "magenta", children: " \u25C8 Trends" }), _jsx(Text, { dimColor: true, children: " Need at least 2 scans. Run the scanner a few more times." }), _jsx(Text, { dimColor: true, children: " Esc to go back" })] }));
+    }
+    const latest = history[history.length - 1];
+    const first = history[0];
+    const overallDelta = latest.score - first.score;
+    const scores = history.map((h) => h.score);
+    const chartWidth = 40;
+    // Get all check names from latest
+    const checkNames = [...latest.checkScores.keys()];
+    // Build per-check trends
+    const checkTrends = checkNames
+        .map((name) => {
+        const values = history.map((h) => h.checkScores.get(name) ?? 0).filter((v) => v > 0);
+        if (values.length < 2)
+            return null;
+        const current = values[values.length - 1];
+        const prev = values[0];
+        const delta = current - prev;
+        return { name, current, delta, spark: sparkFull(values, 20) };
+    })
+        .filter(Boolean)
+        .sort((a, b) => a.delta - b.delta);
+    const visibleChecks = Math.max(1, height - 10);
+    return (_jsxs(Box, { flexDirection: "column", height: height, paddingX: 1, children: [_jsxs(Text, { bold: true, color: "magenta", children: [" \u25C8 Trends \u2014 ", history.length, " scans"] }), _jsxs(Text, { dimColor: true, children: [" ", first.timestamp.split("T")[0], " \u2192 ", latest.timestamp.split("T")[0]] }), _jsx(Text, { children: " " }), _jsx(Text, { bold: true, children: " Overall Score" }), _jsxs(Text, { children: [_jsxs(Text, { color: "cyan", children: [" ", sparkFull(scores, chartWidth), " "] }), _jsxs(Text, { color: gc(latest.score >= 90 ? "A" : latest.score >= 75 ? "B" : "C"), bold: true, children: [" ", latest.score] }), _jsxs(Text, { color: overallDelta >= 0 ? "green" : "red", children: [" ", overallDelta >= 0 ? "+" : "", overallDelta] })] }), _jsx(Text, { children: " " }), _jsx(Text, { bold: true, children: " Per-Check (first \u2192 latest)" }), checkTrends.slice(0, visibleChecks).map((t) => (_jsxs(Text, { children: [_jsxs(Text, { children: [" ", t.name.slice(0, 14).padEnd(14), " "] }), _jsxs(Text, { color: "cyan", children: [t.spark, " "] }), _jsxs(Text, { color: gc(t.current >= 90 ? "A" : t.current >= 75 ? "B" : "C"), children: [String(t.current).padStart(3), " "] }), _jsxs(Text, { color: t.delta >= 0 ? "green" : "red", children: [t.delta >= 0 ? "+" : "", t.delta] })] }, t.name))), checkTrends.length > visibleChecks && _jsxs(Text, { dimColor: true, children: [" +", checkTrends.length - visibleChecks, " more"] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: " Esc back to dashboard" }) })] }));
+}
 // ── Main App ──
 /** Load last scan from .vibe-check/report.json for instant display on startup. */
 function loadCachedScan(cwd) {
@@ -224,13 +266,27 @@ function loadCachedScan(cwd) {
         return null;
     }
 }
+// ── Check Detail View ──
+function CheckDetail({ check, height, cursor, copied }) {
+    const visibleIssues = Math.max(1, height - 6);
+    // Scroll window: keep cursor visible
+    const scrollStart = Math.max(0, Math.min(cursor - Math.floor(visibleIssues / 2), check.issues.length - visibleIssues));
+    const visibleSlice = check.issues.slice(scrollStart, scrollStart + visibleIssues);
+    return (_jsxs(Box, { flexDirection: "column", height: height, paddingX: 1, children: [_jsxs(Text, { bold: true, color: "magenta", children: [" \u25C8 ", check.name] }), _jsxs(Text, { children: [_jsxs(Text, { color: gc(check.grade), bold: true, children: [" ", check.grade, " ", check.score, "/100"] }), _jsxs(Text, { dimColor: true, children: [" \u00B7 ", check.issues.length, " issues \u00B7 ", check.duration, "ms"] }), copied && _jsx(Text, { color: "green", bold: true, children: " \u2713 Copied!" })] }), _jsx(Text, { children: " " }), check.issues.length === 0 ? (_jsx(Text, { color: "green", children: " No issues found." })) : (_jsxs(_Fragment, { children: [visibleSlice.map((iss, i) => {
+                        const idx = scrollStart + i;
+                        const sel = idx === 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(), " "] }), iss.file && _jsxs(Text, { color: "cyan", children: [String(iss.file).slice(0, 28).padEnd(28), " "] }), iss.line && _jsx(Text, { dimColor: true, children: String(iss.line).padEnd(5) }), _jsx(Text, { children: iss.message.slice(0, 55) }), iss.rule && _jsxs(Text, { dimColor: true, children: [" (", iss.rule, ")"] })] }, idx));
+                    }), check.issues.length > scrollStart + visibleIssues && _jsxs(Text, { dimColor: true, children: [" +", check.issues.length - scrollStart - visibleIssues, " more"] })] }))] }));
+}
 function MonitorApp({ cwd }) {
     const { exit } = useApp();
     const { stdout } = useStdout();
     const rows = stdout?.rows ?? 30;
     const cached = loadCachedScan(cwd);
     const [monCfg, setMonCfg] = useState(() => loadMonitorConfig(cwd));
-    const [mode, setMode] = useState("monitor");
+    const [mode, setMode] = useState({ view: "dashboard" });
+    const [panel, setPanel] = useState("checks");
+    const [cursor, setCursor] = useState(0);
     const [state, setState] = useState(cached ?? {
         checks: [], score: 0, grade: "?", duration: 0,
         totalIssues: 0, scanning: true, scanCount: 0, scores: [],
@@ -238,6 +294,7 @@ function MonitorApp({ cwd }) {
     const [log, setLog] = useState([
         { time: ts(), text: cached ? `Loaded cached scan: ${cached.grade} ${cached.score}/100` : `Monitoring ${basename(cwd)}...`, type: cached ? "scan" : "info" },
     ]);
+    const [copied, setCopied] = useState(false);
     const scanningRef = useRef(false);
     const prevScoreRef = useRef(cached ? cached.score : null);
     const addLog = useCallback((text, type = "info") => {
@@ -245,6 +302,15 @@ function MonitorApp({ cwd }) {
     }, []);
     const workspace = detectWorkspace(cwd);
     const stack = detectStack(cwd, workspace);
+    // Derived lists for navigation
+    const activeChecks = state.checks.filter((c) => !c.details.skipped && !c.details.comingSoon);
+    const allIssues = state.checks
+        .flatMap((c) => c.issues.map((i) => ({ check: c.name, ...i })))
+        .sort((a, b) => {
+        const o = { error: 0, warning: 1, info: 2 };
+        return (o[a.severity] ?? 2) - (o[b.severity] ?? 2);
+    });
+    const currentList = panel === "checks" ? activeChecks : allIssues;
     const doScan = useCallback(async () => {
         if (scanningRef.current)
             return;
@@ -282,7 +348,6 @@ function MonitorApp({ cwd }) {
         prevScoreRef.current = result.score;
         scanningRef.current = false;
     }, [cwd, monCfg, addLog]);
-    // Initial scan
     useEffect(() => { doScan(); }, [doScan]);
     // File watcher
     useEffect(() => {
@@ -305,33 +370,104 @@ function MonitorApp({ cwd }) {
         return () => { for (const w of watchers)
             w.close(); };
     }, [cwd, workspace, doScan, addLog, monCfg.debounceMs]);
-    // Keyboard — all input handled, nothing echoed
+    // ── Keyboard — unified navigation ──
     useInput((input, key) => {
+        // Quit from anywhere
+        if (input === "q" || (key.ctrl && input === "c")) {
+            exit();
+            return;
+        }
+        // Esc: drill up or quit
         if (key.escape) {
-            if (mode === "config") {
-                setMode("monitor");
+            if (mode.view !== "dashboard") {
+                setMode({ view: "dashboard" });
+                setCursor(0);
                 return;
             }
             exit();
             return;
         }
-        if (input === "q" || (key.ctrl && input === "c")) {
-            exit();
+        // Global shortcuts
+        if (input === "r" && mode.view === "dashboard") {
+            doScan();
             return;
         }
-        if (mode !== "monitor")
+        // View switching
+        if (input === "t") {
+            setMode({ view: "trends" });
+            setCursor(0);
             return;
-        if (input === "r")
-            doScan();
-        if (input === "c")
-            setMode("config");
+        }
+        if (input === "c" && mode.view !== "config") {
+            setMode({ view: "config" });
+            return;
+        }
+        // Dashboard navigation
+        if (mode.view === "dashboard") {
+            // Tab switches focused panel
+            if (key.tab) {
+                setPanel((p) => p === "checks" ? "issues" : "checks");
+                setCursor(0);
+                return;
+            }
+            // ↑↓ navigate within panel
+            if (key.upArrow)
+                setCursor((c) => Math.max(0, c - 1));
+            if (key.downArrow)
+                setCursor((c) => Math.min(currentList.length - 1, c + 1));
+            // Enter: drill into selected check
+            if (key.return && panel === "checks" && activeChecks[cursor]) {
+                setMode({ view: "check-detail", checkName: activeChecks[cursor].name });
+                setCursor(0);
+                return;
+            }
+            // Enter on issue: drill into that check
+            if (key.return && panel === "issues" && allIssues[cursor]) {
+                setMode({ view: "check-detail", checkName: allIssues[cursor].check });
+                setCursor(0);
+                return;
+            }
+        }
+        // Check detail: ↑↓ scroll, Enter copies fix prompt
+        if (mode.view === "check-detail") {
+            const check = state.checks.find((c) => c.name === mode.checkName);
+            if (check) {
+                if (key.upArrow)
+                    setCursor((c) => Math.max(0, c - 1));
+                if (key.downArrow)
+                    setCursor((c) => Math.min(check.issues.length - 1, c + 1));
+                if (key.return && check.issues[cursor]) {
+                    const prompt = buildFixPrompt(check.name, check.issues[cursor]);
+                    if (copyToClipboard(prompt)) {
+                        setCopied(true);
+                        addLog(`Copied fix prompt for ${check.name}:${check.issues[cursor].file || ""}`, "info");
+                        setTimeout(() => setCopied(false), 2000);
+                    }
+                }
+            }
+        }
+        // Trends: ↑↓ scroll
+        if (mode.view === "trends") {
+            if (key.upArrow)
+                setCursor((c) => Math.max(0, c - 1));
+            if (key.downArrow)
+                setCursor((c) => c + 1);
+        }
     });
     const proj = basename(cwd);
     const p = monCfg.panels;
-    if (mode === "config") {
-        return (_jsx(Box, { flexDirection: "column", height: rows, justifyContent: "center", alignItems: "center", children: _jsx(ConfigScreen, { monCfg: monCfg, onSave: (cfg) => { setMonCfg(cfg); saveMonitorConfig(cwd, cfg); addLog("Settings saved", "info"); }, onClose: () => setMode("monitor") }) }));
+    // ── Render views ──
+    if (mode.view === "check-detail") {
+        const check = state.checks.find((c) => c.name === mode.checkName);
+        return (_jsxs(Box, { flexDirection: "column", height: rows, children: [_jsx(Header, { proj: proj, stack: stack, workspace: workspace, state: state }), check ? _jsx(CheckDetail, { check: check, height: rows - 3, cursor: cursor, copied: copied }) : _jsx(Text, { dimColor: true, children: " Check not found" }), _jsx(Box, { paddingX: 1, children: _jsx(Text, { dimColor: true, children: "Esc back \u00B7 \u2191\u2193 select \u00B7 Enter copy fix prompt \u00B7 q quit" }) })] }));
     }
-    // Fixed panel heights — no reflow on content changes
+    if (mode.view === "trends") {
+        return (_jsx(Box, { flexDirection: "column", height: rows, children: _jsx(TrendsScreen, { cwd: cwd, height: rows, onClose: () => setMode({ view: "dashboard" }) }) }));
+    }
+    if (mode.view === "config") {
+        return (_jsx(Box, { flexDirection: "column", height: rows, justifyContent: "center", alignItems: "center", children: _jsx(ConfigScreen, { monCfg: monCfg, onSave: (cfg) => { setMonCfg(cfg); saveMonitorConfig(cwd, cfg); addLog("Settings saved", "info"); }, onClose: () => setMode({ view: "dashboard" }) }) }));
+    }
+    // ── Dashboard ──
     const sidebarVisible = p.score || p.checks;
     const mainVisible = p.activity || p.issues;
     const bodyRows = rows - 4;
@@ -341,8 +477,16 @@ function MonitorApp({ cwd }) {
     const issuesH = p.issues ? bodyRows - activityH : 0;
     const errorCount = state.checks.reduce((s, c) => s + c.issues.filter((i) => i.severity === "error").length, 0);
     const warnCount = state.checks.reduce((s, c) => s + c.issues.filter((i) => i.severity === "warning").length, 0);
-    const activeCount = state.checks.filter((c) => !c.details.skipped && !c.details.comingSoon).length;
-    return (_jsxs(Box, { flexDirection: "column", height: rows, children: [_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" })] })] }), _jsx(Box, { paddingX: 1, gap: 2, height: 1, children: state.scanCount > 0 && (_jsxs(_Fragment, { children: [_jsxs(Text, { children: [_jsx(Text, { dimColor: true, children: "E " }), _jsx(Text, { color: "red", bold: true, children: errorCount })] }), _jsxs(Text, { children: [_jsx(Text, { dimColor: true, children: "W " }), _jsx(Text, { color: "yellow", bold: true, children: warnCount })] }), _jsxs(Text, { children: [_jsx(Text, { dimColor: true, children: "checks " }), _jsx(Text, { bold: true, children: activeCount })] }), _jsxs(Text, { children: [_jsx(Text, { dimColor: true, children: "scan " }), _jsxs(Text, { children: [state.duration, "ms"] })] }), state.scores.length >= 2 && _jsx(Text, { color: "cyan", children: spark(state.scores) })] })) }), _jsxs(Box, { height: bodyRows, children: [sidebarVisible && (_jsxs(Box, { flexDirection: "column", width: 26, children: [p.score && _jsx(ScorePanel, { state: state, height: scoreH }), p.checks && _jsx(ChecksPanel, { checks: state.checks, height: checksH })] })), mainVisible && (_jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [p.activity && _jsx(ActivityPanel, { log: log, height: activityH }), p.issues && _jsx(IssuesPanel, { checks: state.checks, height: issuesH })] })), !sidebarVisible && !mainVisible && (_jsx(Box, { height: bodyRows, justifyContent: "center", alignItems: "center", children: _jsx(Text, { dimColor: true, children: "All panels hidden. Press c to configure." }) }))] }), _jsxs(Box, { paddingX: 1, justifyContent: "space-between", children: [_jsx(Text, { dimColor: true, children: "q/Esc quit \u00B7 r rescan \u00B7 c settings" }), monCfg.alertBelow > 0 && (_jsxs(Text, { dimColor: true, children: ["alert <", monCfg.alertBelow, " \u00B7 drop \u2265", monCfg.alertDrop] }))] })] }));
+    return (_jsxs(Box, { flexDirection: "column", height: rows, children: [_jsx(Header, { proj: proj, stack: stack, workspace: workspace, state: state }), _jsx(Box, { paddingX: 1, gap: 2, height: 1, children: state.scanCount > 0 && (_jsxs(_Fragment, { children: [_jsxs(Text, { children: [_jsx(Text, { dimColor: true, children: "E " }), _jsx(Text, { color: "red", bold: true, children: errorCount })] }), _jsxs(Text, { children: [_jsx(Text, { dimColor: true, children: "W " }), _jsx(Text, { color: "yellow", bold: true, children: warnCount })] }), _jsxs(Text, { children: [_jsx(Text, { dimColor: true, children: "checks " }), _jsx(Text, { bold: true, children: activeChecks.length })] }), _jsxs(Text, { children: [_jsx(Text, { dimColor: true, children: "scan " }), _jsxs(Text, { children: [state.duration, "ms"] })] }), state.scores.length >= 2 && _jsx(Text, { color: "cyan", children: spark(state.scores) })] })) }), _jsxs(Box, { height: bodyRows, children: [sidebarVisible && (_jsxs(Box, { flexDirection: "column", width: 26, children: [p.score && _jsx(ScorePanel, { state: state, height: scoreH }), p.checks && (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: panel === "checks" ? "magenta" : "gray", paddingX: 1, width: 24, height: checksH, overflowY: "hidden", children: [_jsxs(Text, { bold: true, color: "magenta", children: [" \u25C8 Checks ", panel === "checks" && _jsx(Text, { dimColor: true, children: "\u25C4" })] }), activeChecks.slice(0, checksH - 3).map((c, i) => {
+                                        const sel = panel === "checks" && i === cursor;
+                                        return (_jsxs(Text, { children: [_jsxs(Text, { color: sel ? "white" : gc(c.grade), children: [sel ? "▸" : " ", c.grade === "A" ? "●" : c.grade === "B" ? "◐" : "○", " "] }), _jsx(Text, { bold: sel, children: c.name.slice(0, 13).padEnd(13) }), _jsx(Text, { color: gc(c.grade), children: String(c.score).padStart(3) })] }, c.name));
+                                    })] }))] })), 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" }) })] }));
+}
+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" })] })] }));
 }
 // ── Entry ──
 export async function startMonitor(cwd) {

package/package.json

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