@vibecodeqa/cli 0.35.6 → 0.35.8

package/dist/monitor.js

@@ -10,7 +10,7 @@ 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";
@@ -68,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) {
@@ -111,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",
@@ -125,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)));
@@ -274,13 +266,57 @@ function loadCachedScan(cwd) {
         return null;
     }
 }
+// ── Check Detail View ──
+function CheckDetail({ check, height, cursor, copied }) {
+    const bodyHeight = height - 5; // header + score + blank + footer margin
+    // Each issue takes 2-3 lines: header line + message (wraps if long)
+    // Estimate lines per issue for scroll calculation
+    const issueHeights = check.issues.map((iss) => {
+        const msgLen = iss.message.length;
+        return msgLen > 80 ? 3 : 2; // 2 lines base, 3 if message wraps
+    });
+    // Find scroll window that keeps cursor visible
+    let scrollStart = 0;
+    let linesUsed = 0;
+    // First, find how many items fit
+    const fits = [];
+    for (let i = 0; i < check.issues.length; i++) {
+        if (linesUsed + issueHeights[i] > bodyHeight)
+            break;
+        fits.push(i);
+        linesUsed += issueHeights[i];
+    }
+    const maxVisible = fits.length || 1;
+    // Adjust scroll so cursor is visible
+    if (cursor >= scrollStart + maxVisible)
+        scrollStart = cursor - maxVisible + 1;
+    if (cursor < scrollStart)
+        scrollStart = cursor;
+    scrollStart = Math.max(0, Math.min(scrollStart, check.issues.length - maxVisible));
+    // Collect visible items within height budget
+    const visible = [];
+    let usedLines = 0;
+    for (let i = scrollStart; i < check.issues.length; i++) {
+        if (usedLines + issueHeights[i] > bodyHeight)
+            break;
+        visible.push({ issue: check.issues[i], idx: i });
+        usedLines += issueHeights[i];
+    }
+    const remaining = check.issues.length - (scrollStart + visible.length);
+    return (_jsxs(Box, { flexDirection: "column", height: height, paddingX: 1, overflowY: "hidden", 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: [visible.map(({ issue: iss, idx }) => {
+                        const sel = idx === cursor;
+                        return (_jsxs(Box, { flexDirection: "column", marginBottom: 0, 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.file && _jsxs(Text, { color: "cyan", children: [String(iss.file), iss.line ? `:${iss.line}` : "", " "] }), 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 })] })] }, idx));
+                    }), remaining > 0 && _jsxs(Text, { dimColor: true, children: [" +", remaining, " more (\u2193 to scroll)"] })] }))] }));
+}
 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: [],
@@ -288,6 +324,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") => {
@@ -295,6 +332,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;
@@ -332,7 +378,6 @@ function MonitorApp({ cwd }) {
         prevScoreRef.current = result.score;
         scanningRef.current = false;
     }, [cwd, monCfg, addLog]);
-    // Initial scan
     useEffect(() => { doScan(); }, [doScan]);
     // File watcher
     useEffect(() => {
@@ -355,38 +400,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 !== "monitor") {
-                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 === "t")
-            setMode("trends");
+        }
+        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 === "trends") {
-        return (_jsx(Box, { flexDirection: "column", height: rows, children: _jsx(TrendsScreen, { cwd: cwd, height: rows, 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" }) })] }));
+    }
+    if (mode.view === "trends") {
+        return (_jsx(Box, { flexDirection: "column", height: rows, children: _jsx(TrendsScreen, { cwd: cwd, height: rows, onClose: () => setMode({ view: "dashboard" }) }) }));
     }
-    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") }) }));
+    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" }) }) }));
     }
-    // Fixed panel heights — no reflow on content changes
+    // ── Dashboard ──
     const sidebarVisible = p.score || p.checks;
     const mainVisible = p.activity || p.issues;
     const bodyRows = rows - 4;
@@ -396,8 +507,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 t trends \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.6",
+	"version": "0.35.8",
 	"description": "Code health scanner for the AI coding era. 25 checks, zero config, full report.",
 	"type": "module",
 	"bin": {