@vibecodeqa/cli 0.35.7 → 0.35.9

package/dist/monitor.js

@@ -6,7 +6,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * Press 'c' to open settings: thresholds, panel toggles, scan options.
  * Config persists to .vibe-check/monitor.json.
  */
-import { useState, useEffect, useCallback, useRef } from "react";
+import { useState, useEffect, useCallback, useRef, useMemo } 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";
@@ -129,59 +129,7 @@ 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 ConfigScreen({ monCfg, onSave, onClose, }) {
-    const [cursor, setCursor] = useState(0);
-    const [cfg, setCfg] = useState(JSON.parse(JSON.stringify(monCfg)));
-    const options = [
-        { key: "alertBelow", label: "Alert when score below", type: "number", value: cfg.alertBelow, path: ["alertBelow"] },
-        { key: "alertDrop", label: "Alert on score drop ≥", type: "number", value: cfg.alertDrop, path: ["alertDrop"] },
-        { key: "debounceMs", label: "Scan debounce (ms)", type: "number", value: cfg.debounceMs, path: ["debounceMs"] },
-        { key: "skipTests", label: "Skip test execution", type: "toggle", value: cfg.skipTests, path: ["skipTests"] },
-        { key: "p-score", label: "Panel: Score", type: "toggle", value: cfg.panels.score, path: ["panels", "score"] },
-        { key: "p-checks", label: "Panel: Checks", type: "toggle", value: cfg.panels.checks, path: ["panels", "checks"] },
-        { key: "p-activity", label: "Panel: Activity", type: "toggle", value: cfg.panels.activity, path: ["panels", "activity"] },
-        { key: "p-issues", label: "Panel: Issues", type: "toggle", value: cfg.panels.issues, path: ["panels", "issues"] },
-    ];
-    useInput((input, key) => {
-        if (key.escape || input === "c") {
-            onClose();
-            return;
-        }
-        if (key.upArrow)
-            setCursor((c) => Math.max(0, c - 1));
-        if (key.downArrow)
-            setCursor((c) => Math.min(options.length - 1, c + 1));
-        const opt = options[cursor];
-        if (!opt)
-            return;
-        if (opt.type === "toggle" && (input === " " || key.return)) {
-            const next = { ...cfg };
-            if (opt.path.length === 1) {
-                next[opt.path[0]] = !opt.value;
-            }
-            else {
-                next.panels[opt.path[1]] = !opt.value;
-            }
-            setCfg(next);
-        }
-        if (opt.type === "number") {
-            const step = key.shift ? 10 : 1;
-            let v = opt.value;
-            if (key.rightArrow)
-                v += step;
-            if (key.leftArrow)
-                v = Math.max(0, v - step);
-            if (v !== opt.value) {
-                const next = { ...cfg };
-                next[opt.path[0]] = v;
-                setCfg(next);
-            }
-        }
-        if (input === "s") {
-            onSave(cfg);
-            onClose();
-        }
-    });
+function ConfigScreen({ cursor, options }) {
     return (_jsxs(Box, { flexDirection: "column", borderStyle: "double", borderColor: "magenta", paddingX: 2, paddingY: 1, children: [_jsx(Text, { bold: true, color: "magenta", children: " \u2699 Settings" }), _jsx(Text, { dimColor: true, children: " " }), options.map((opt, i) => {
                 const selected = i === cursor;
                 const prefix = selected ? "▸ " : "  ";
@@ -208,13 +156,9 @@ function sparkFull(values, width) {
     }
     return sampled.map((v) => bars[Math.round(((v - min) / range) * 8)]).join("");
 }
-function TrendsScreen({ cwd, height, onClose }) {
+function TrendsScreen({ cwd, height }) {
     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" })] }));
     }
@@ -268,25 +212,60 @@ function loadCachedScan(cwd) {
 }
 // ── 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 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(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"] })] }))] }));
+                        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);
+    // Memoize filesystem I/O — only run once
+    const cached = useMemo(() => loadCachedScan(cwd), [cwd]);
+    const workspace = useMemo(() => detectWorkspace(cwd), [cwd]);
+    const stack = useMemo(() => detectStack(cwd, workspace), [cwd, workspace]);
     const [monCfg, setMonCfg] = useState(() => loadMonitorConfig(cwd));
     const [mode, setMode] = useState({ view: "dashboard" });
     const [panel, setPanel] = useState("checks");
     const [cursor, setCursor] = useState(0);
+    const [configCursor, setConfigCursor] = useState(0);
+    const [pendingCfg, setPendingCfg] = useState(null);
     const [state, setState] = useState(cached ?? {
         checks: [], score: 0, grade: "?", duration: 0,
         totalIssues: 0, scanning: true, scanCount: 0, scores: [],
@@ -300,17 +279,19 @@ function MonitorApp({ cwd }) {
     const addLog = useCallback((text, type = "info") => {
         setLog((prev) => [...prev.slice(-50), { time: ts(), text, type }]);
     }, []);
-    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
+    // Memoize derived lists
+    const activeChecks = useMemo(() => state.checks.filter((c) => !c.details.skipped && !c.details.comingSoon), [state.checks]);
+    const allIssues = useMemo(() => 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);
-    });
+    }), [state.checks]);
     const currentList = panel === "checks" ? activeChecks : allIssues;
+    // Clamp cursor when data changes
+    useEffect(() => {
+        setCursor((c) => Math.min(c, Math.max(0, currentList.length - 1)));
+    }, [currentList.length]);
     const doScan = useCallback(async () => {
         if (scanningRef.current)
             return;
@@ -370,7 +351,20 @@ function MonitorApp({ cwd }) {
         return () => { for (const w of watchers)
             w.close(); };
     }, [cwd, workspace, doScan, addLog, monCfg.debounceMs]);
-    // ── Keyboard — unified navigation ──
+    const configOptions = useMemo(() => {
+        const cfg = pendingCfg ?? monCfg;
+        return [
+            { key: "alertBelow", label: "Alert when score below", type: "number", value: cfg.alertBelow, path: ["alertBelow"] },
+            { key: "alertDrop", label: "Alert on score drop ≥", type: "number", value: cfg.alertDrop, path: ["alertDrop"] },
+            { key: "debounceMs", label: "Scan debounce (ms)", type: "number", value: cfg.debounceMs, path: ["debounceMs"] },
+            { key: "skipTests", label: "Skip test execution", type: "toggle", value: cfg.skipTests, path: ["skipTests"] },
+            { key: "p-score", label: "Panel: Score", type: "toggle", value: cfg.panels.score, path: ["panels", "score"] },
+            { key: "p-checks", label: "Panel: Checks", type: "toggle", value: cfg.panels.checks, path: ["panels", "checks"] },
+            { key: "p-activity", label: "Panel: Activity", type: "toggle", value: cfg.panels.activity, path: ["panels", "activity"] },
+            { key: "p-issues", label: "Panel: Issues", type: "toggle", value: cfg.panels.issues, path: ["panels", "issues"] },
+        ];
+    }, [pendingCfg, monCfg]);
+    // ── Keyboard — single handler for all views ──
     useInput((input, key) => {
         // Quit from anywhere
         if (input === "q" || (key.ctrl && input === "c")) {
@@ -379,6 +373,9 @@ function MonitorApp({ cwd }) {
         }
         // Esc: drill up or quit
         if (key.escape) {
+            if (mode.view === "config") {
+                setPendingCfg(null);
+            }
             if (mode.view !== "dashboard") {
                 setMode({ view: "dashboard" });
                 setCursor(0);
@@ -387,48 +384,91 @@ function MonitorApp({ cwd }) {
             exit();
             return;
         }
-        // Global shortcuts
-        if (input === "r" && mode.view === "dashboard") {
+        // Rescan from dashboard or check-detail
+        if (input === "r" && (mode.view === "dashboard" || mode.view === "check-detail")) {
             doScan();
             return;
         }
-        // View switching
+        // ── Config view ──
+        if (mode.view === "config") {
+            const cfg = pendingCfg ?? { ...monCfg };
+            if (key.upArrow) {
+                setConfigCursor((c) => Math.max(0, c - 1));
+                return;
+            }
+            if (key.downArrow) {
+                setConfigCursor((c) => Math.min(configOptions.length - 1, c + 1));
+                return;
+            }
+            const opt = configOptions[configCursor];
+            if (!opt)
+                return;
+            if (opt.type === "toggle" && (input === " " || key.return)) {
+                const next = { ...cfg, panels: { ...cfg.panels } };
+                if (opt.path.length === 1)
+                    next[opt.path[0]] = !opt.value;
+                else
+                    next.panels[opt.path[1]] = !opt.value;
+                setPendingCfg(next);
+            }
+            if (opt.type === "number") {
+                const step = key.shift ? 10 : 1;
+                let v = opt.value;
+                if (key.rightArrow)
+                    v += step;
+                if (key.leftArrow)
+                    v = Math.max(0, v - step);
+                if (v !== opt.value) {
+                    const next = { ...cfg, panels: { ...cfg.panels } };
+                    next[opt.path[0]] = v;
+                    setPendingCfg(next);
+                }
+            }
+            if (input === "s" && pendingCfg) {
+                setMonCfg(pendingCfg);
+                saveMonitorConfig(cwd, pendingCfg);
+                addLog("Settings saved", "info");
+                setPendingCfg(null);
+                setMode({ view: "dashboard" });
+                setCursor(0);
+            }
+            return;
+        }
+        // View switching (not from config — handled above)
         if (input === "t") {
             setMode({ view: "trends" });
             setCursor(0);
             return;
         }
-        if (input === "c" && mode.view !== "config") {
+        if (input === "c") {
             setMode({ view: "config" });
+            setConfigCursor(0);
+            setPendingCfg({ ...monCfg, panels: { ...monCfg.panels } });
             return;
         }
-        // Dashboard navigation
+        // ── 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
+        // ── Check detail: ↑↓ scroll, Enter copies fix prompt ──
         if (mode.view === "check-detail") {
             const check = state.checks.find((c) => c.name === mode.checkName);
             if (check) {
@@ -446,7 +486,7 @@ function MonitorApp({ cwd }) {
                 }
             }
         }
-        // Trends: ↑↓ scroll
+        // ── Trends: ↑↓ scroll ──
         if (mode.view === "trends") {
             if (key.upArrow)
                 setCursor((c) => Math.max(0, c - 1));
@@ -462,10 +502,10 @@ function MonitorApp({ cwd }) {
         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" }) }) }));
+        return (_jsx(Box, { flexDirection: "column", height: rows, children: _jsx(TrendsScreen, { cwd: cwd, height: rows }) }));
     }
     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" }) }) }));
+        return (_jsx(Box, { flexDirection: "column", height: rows, justifyContent: "center", alignItems: "center", children: _jsx(ConfigScreen, { cursor: configCursor, options: configOptions }) }));
     }
     // ── Dashboard ──
     const sidebarVisible = p.score || p.checks;

package/package.json

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