@westbayberry/dg 1.0.52 → 1.0.56

package/dist/packages/cli/src/ui/components/InteractiveResultsView.js

@@ -0,0 +1,557 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InteractiveResultsView = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ink_1 = require("ink");
+const chalk_1 = __importDefault(require("chalk"));
+const ScoreHeader_1 = require("./ScoreHeader");
+const useExpandAnimation_1 = require("../hooks/useExpandAnimation");
+const useTerminalSize_1 = require("../hooks/useTerminalSize");
+function groupPackages(packages) {
+    const map = new Map();
+    for (const pkg of packages) {
+        const fingerprint = pkg.findings.length === 0
+            ? `__clean_${pkg.score}`
+            : pkg.findings
+                .map((f) => `${f.category ?? ""}:${f.severity}`)
+                .sort()
+                .join("|") + `|score:${pkg.score}`;
+        const group = map.get(fingerprint) ?? [];
+        group.push(pkg);
+        map.set(fingerprint, group);
+    }
+    return [...map.entries()]
+        .map(([fingerprint, pkgs]) => ({ packages: pkgs, key: fingerprint }))
+        .sort((a, b) => b.packages[0].score - a.packages[0].score);
+}
+const SEVERITY_LABELS = {
+    5: "CRIT",
+    4: "HIGH",
+    3: "MED",
+    2: "LOW",
+    1: "INFO",
+};
+const SEVERITY_COLORS = {
+    5: (s) => chalk_1.default.red.bold(s),
+    4: (s) => chalk_1.default.red(s),
+    3: (s) => chalk_1.default.yellow(s),
+    2: (s) => chalk_1.default.cyan(s),
+    1: (s) => chalk_1.default.gray(s),
+};
+function actionBadge(score) {
+    if (score >= 70)
+        return { label: "Block", color: chalk_1.default.red };
+    if (score >= 60)
+        return { label: "Warn", color: chalk_1.default.yellow };
+    return { label: "Pass", color: chalk_1.default.green };
+}
+function truncate(s, max) {
+    return s.length <= max ? s : s.slice(0, max - 1) + "\u2026";
+}
+function pad(s, len) {
+    return s + " ".repeat(Math.max(0, len - s.length));
+}
+const EVIDENCE_LIMIT = 2;
+// Fixed lines outside the scrollable group area:
+//  5  ScoreHeader box  |  2  Flagged box top  |  2  scroll indicators
+//  1  Flagged box bottom  |  4  Clean/Duration box  |  1  help bar  |  1  margin
+const FIXED_CHROME = 21;
+function findingsSummaryHeight(group) {
+    const rep = group.packages[0];
+    const visibleFindings = rep.findings.filter((f) => f.severity > 1);
+    const isFree = visibleFindings.length > 0 && !visibleFindings[0].title;
+    let h = 0;
+    if (rep.license)
+        h += 1; // license info line
+    if (isFree) {
+        // Free tier: just the upgrade prompt line
+        h += 1;
+    }
+    else if (visibleFindings.length > 0) {
+        // Paid tier: one line per finding
+        h += visibleFindings.length;
+    }
+    else if (rep.score > 0) {
+        h += 1; // score-only fallback
+    }
+    if (group.packages.length > 3)
+        h += 1;
+    return h;
+}
+function findingsDetailHeight(group, safeVersions) {
+    const rep = group.packages[0];
+    const visibleFindings = rep.findings
+        .filter((f) => f.severity > 1)
+        .sort((a, b) => b.severity - a.severity);
+    let h = 0;
+    if (rep.license)
+        h += 1; // license info line
+    if (group.packages.length > 3)
+        h += 1;
+    // Free tier: reasons + upgrade hint
+    if (visibleFindings.length === 0 && rep.score > 0) {
+        h += (rep.reasons ?? []).length;
+        h += 1; // upgrade hint
+    }
+    const hasEvidence = visibleFindings.some((f) => f.evidence && f.evidence.length > 0);
+    for (const finding of visibleFindings) {
+        h += 1; // badge + id
+        h += 1; // title
+        const evidence = finding.evidence ?? [];
+        h += Math.min(evidence.length, EVIDENCE_LIMIT);
+        if (evidence.length > EVIDENCE_LIMIT)
+            h += 1;
+    }
+    // Upgrade hint for pro tier (findings but no evidence)
+    if (visibleFindings.length > 0 && !hasEvidence)
+        h += 1;
+    if (rep.recommendation)
+        h += 1;
+    if (safeVersions[rep.name])
+        h += 1;
+    return h;
+}
+function groupRowHeight(group, level, safeVersions) {
+    if (level === null)
+        return 1;
+    if (level === "summary")
+        return 1 + findingsSummaryHeight(group);
+    return 1 + findingsDetailHeight(group, safeVersions);
+}
+function groupNames(group) {
+    if (group.packages.length === 1)
+        return group.packages[0].name;
+    if (group.packages.length <= 3)
+        return group.packages.map((p) => p.name).join(", ");
+    return `${group.packages[0].name} + ${group.packages.length - 1} similar`;
+}
+function affectsLine(group) {
+    const names = group.packages.map((p) => p.name);
+    if (names.length <= 5)
+        return names.join(", ");
+    return names.slice(0, 5).join(", ") + ` + ${names.length - 5} more`;
+}
+// Chrome lines in detail pane mode:
+//  7  ScoreHeader  |  3  detail pane borders+header  |  2  scroll indicators
+//  4  Clean/Duration box  |  1  separator  |  1  help bar
+const DETAIL_PANE_CHROME = 20;
+function buildDetailLines(group, safeVersion, maxWidth) {
+    const rep = group.packages[0];
+    const visibleFindings = rep.findings
+        .filter((f) => f.severity > 1)
+        .sort((a, b) => b.severity - a.severity);
+    const lines = [];
+    if (group.packages.length > 3) {
+        lines.push((0, jsx_runtime_1.jsxs)(ink_1.Text, { dimColor: true, children: ["Affects: ", affectsLine(group)] }, "affects"));
+        lines.push((0, jsx_runtime_1.jsx)(ink_1.Text, { children: "" }, "affects-gap"));
+    }
+    if (rep.score > 0) {
+        lines.push((0, jsx_runtime_1.jsxs)(ink_1.Text, { dimColor: true, children: ["Score: ", rep.score, "/100"] }, "score-info"));
+        lines.push((0, jsx_runtime_1.jsx)(ink_1.Text, { children: "" }, "score-gap"));
+    }
+    // Paid tier: show findings with category + severity
+    if (visibleFindings.length > 0) {
+        for (let i = 0; i < visibleFindings.length; i++) {
+            const f = visibleFindings[i];
+            const sevLabel = SEVERITY_LABELS[f.severity] ?? "INFO";
+            const sevColor = SEVERITY_COLORS[f.severity] ?? SEVERITY_COLORS[1];
+            const connector = i === visibleFindings.length - 1 ? T.last : T.branch;
+            lines.push((0, jsx_runtime_1.jsxs)(ink_1.Text, { children: [connector, " ", sevColor(pad(sevLabel, 8)), chalk_1.default.dim(f.category ?? "")] }, `finding-${i}`));
+        }
+        lines.push((0, jsx_runtime_1.jsx)(ink_1.Text, { children: "" }, "findings-gap"));
+    }
+    else if (rep.score > 0) {
+        // Free tier: no findings returned — show upgrade prompt
+        lines.push((0, jsx_runtime_1.jsxs)(ink_1.Text, { color: "yellow", children: [chalk_1.default.yellow("\u2192"), " Upgrade to Pro to see risk categories"] }, "upgrade"));
+        lines.push((0, jsx_runtime_1.jsx)(ink_1.Text, { children: "" }, "upgrade-gap"));
+    }
+    if (rep.recommendation) {
+        lines.push((0, jsx_runtime_1.jsxs)(ink_1.Text, { children: [chalk_1.default.dim("Recommendation:"), " ", chalk_1.default.cyan(truncate(rep.recommendation, maxWidth - 18))] }, "recommendation"));
+    }
+    if (safeVersion) {
+        lines.push((0, jsx_runtime_1.jsx)(ink_1.Text, { children: chalk_1.default.green(`Safe version: ${rep.name}@${safeVersion}`) }, "safe"));
+    }
+    return lines;
+}
+function viewReducer(_state, action) {
+    switch (action.type) {
+        case "MOVE":
+            return { ..._state, cursor: action.cursor, viewport: action.viewport };
+        case "EXPAND":
+            return { ..._state, expandedIndex: action.expandedIndex, expandLevel: action.expandLevel, viewport: action.viewport };
+        case "MOVE_EXPAND":
+            return { cursor: action.cursor, expandedIndex: action.expandedIndex, expandLevel: action.expandLevel, viewport: action.viewport };
+    }
+}
+const InteractiveResultsView = ({ result, config: _config, durationMs, onExit, onBack, discoveredTotal, userStatus, scanUsage: scanUsageProp, }) => {
+    // If the scan returned trialScansRemaining (free tier), show it as the
+    // scan usage — overrides the generic "free tier" placeholder from bin.ts
+    const scanUsage = result.trialScansRemaining !== undefined
+        ? `${result.trialScansRemaining} scans left`
+        : scanUsageProp;
+    const flagged = (0, react_1.useMemo)(() => result.packages.filter((p) => p.score > 0), [result.packages]);
+    const clean = (0, react_1.useMemo)(() => result.packages.filter((p) => p.score === 0), [result.packages]);
+    const total = result.packages.length;
+    const [searchQuery, setSearchQuery] = (0, react_1.useState)("");
+    const allGroups = (0, react_1.useMemo)(() => groupPackages(flagged), [flagged]);
+    const allGroupCount = allGroups.length;
+    const groups = (0, react_1.useMemo)(() => {
+        if (!searchQuery)
+            return allGroups;
+        const q = searchQuery.toLowerCase();
+        return allGroups.filter(g => g.packages.some(p => p.name.toLowerCase().includes(q)));
+    }, [allGroups, searchQuery]);
+    const severityCounts = (0, react_1.useMemo)(() => {
+        const counts = {};
+        for (const pkg of flagged) {
+            const maxSev = pkg.findings.reduce((m, f) => Math.max(m, f.severity), 0);
+            if (maxSev >= 2)
+                counts[maxSev] = (counts[maxSev] ?? 0) + 1;
+        }
+        return counts;
+    }, [flagged]);
+    const [view, dispatchView] = (0, react_1.useReducer)(viewReducer, {
+        cursor: 0,
+        expandLevel: null,
+        expandedIndex: null,
+        viewport: 0,
+    });
+    const viewRef = (0, react_1.useRef)(view);
+    viewRef.current = view;
+    const [detailPane, setDetailPane] = (0, react_1.useState)(null);
+    const detailPaneRef = (0, react_1.useRef)(detailPane);
+    detailPaneRef.current = detailPane;
+    const [showHelp, setShowHelp] = (0, react_1.useState)(false);
+    const showHelpRef = (0, react_1.useRef)(showHelp);
+    showHelpRef.current = showHelp;
+    const [searchMode, setSearchMode] = (0, react_1.useState)(false);
+    const searchModeRef = (0, react_1.useRef)(searchMode);
+    searchModeRef.current = searchMode;
+    const { rows: termRows, cols: termCols } = (0, useTerminalSize_1.useTerminalSize)();
+    const availableRows = Math.max(5, termRows - FIXED_CHROME);
+    const innerWidth = Math.max(40, termCols - 6);
+    const detailGroupIdx = detailPane?.groupIndex ?? -1;
+    const detailLines = (0, react_1.useMemo)(() => {
+        if (detailGroupIdx < 0)
+            return [];
+        const group = groups[detailGroupIdx];
+        if (!group)
+            return [];
+        return buildDetailLines(group, result.safeVersions[group.packages[0].name], innerWidth);
+    }, [detailGroupIdx, groups, result.safeVersions, innerWidth]);
+    const detailContentRows = Math.max(3, termRows - DETAIL_PANE_CHROME);
+    const getLevel = (idx) => {
+        return view.expandedIndex === idx ? view.expandLevel : null;
+    };
+    const expandTargetHeight = (0, react_1.useMemo)(() => {
+        if (view.expandedIndex === null || view.expandLevel === null)
+            return 0;
+        const group = groups[view.expandedIndex];
+        if (!group)
+            return 0;
+        if (view.expandLevel === "summary")
+            return findingsSummaryHeight(group);
+        return findingsDetailHeight(group, result.safeVersions);
+    }, [view.expandedIndex, view.expandLevel, groups, result.safeVersions]);
+    const { visibleLines: animVisibleLines } = (0, useExpandAnimation_1.useExpandAnimation)(expandTargetHeight, view.expandedIndex !== null);
+    const animatedGroupHeight = (group, level, idx) => {
+        if (level === null)
+            return 1;
+        if (idx === view.expandedIndex)
+            return 1 + animVisibleLines;
+        return groupRowHeight(group, level, result.safeVersions);
+    };
+    const visibleEnd = (0, react_1.useMemo)(() => {
+        let consumed = 0;
+        let end = view.viewport;
+        while (end < groups.length) {
+            const level = getLevel(end);
+            const h = animatedGroupHeight(groups[end], level, end);
+            if (consumed + h > availableRows)
+                break;
+            consumed += h;
+            end++;
+        }
+        if (end === view.viewport && groups.length > 0)
+            end = view.viewport + 1;
+        return end;
+    }, [view.viewport, groups, view.expandedIndex, view.expandLevel, animVisibleLines, availableRows, result.safeVersions]);
+    const adjustViewport = (cursor, expIdx, expLvl, currentStart) => {
+        if (cursor < currentStart)
+            return cursor;
+        const getLvl = (i) => (expIdx === i ? expLvl : null);
+        let consumed = 0;
+        for (let i = currentStart; i <= cursor && i < groups.length; i++) {
+            consumed += groupRowHeight(groups[i], getLvl(i), result.safeVersions);
+        }
+        if (consumed <= availableRows)
+            return currentStart;
+        let newStart = currentStart;
+        while (newStart < cursor) {
+            newStart++;
+            consumed = 0;
+            for (let i = newStart; i <= cursor; i++) {
+                consumed += groupRowHeight(groups[i], getLvl(i), result.safeVersions);
+            }
+            if (consumed <= availableRows)
+                break;
+        }
+        return newStart;
+    };
+    // Re-clamp viewport when terminal is resized
+    (0, react_1.useEffect)(() => {
+        if (groups.length === 0)
+            return;
+        const { cursor, expandedIndex, expandLevel, viewport } = viewRef.current;
+        const clamped = Math.min(viewport, Math.max(0, groups.length - 1));
+        const newVp = adjustViewport(cursor, expandedIndex, expandLevel, clamped);
+        dispatchView({ type: "MOVE", cursor, viewport: newVp });
+    }, [availableRows]);
+    // Clamp detail pane scroll when terminal resizes
+    (0, react_1.useEffect)(() => {
+        const dp = detailPaneRef.current;
+        if (dp && detailLines.length > 0) {
+            const maxScroll = Math.max(0, detailLines.length - detailContentRows);
+            if (dp.scroll > maxScroll) {
+                setDetailPane({ groupIndex: dp.groupIndex, scroll: maxScroll });
+            }
+        }
+    }, [detailContentRows, detailLines.length]);
+    (0, ink_1.useInput)((input, key) => {
+        if (groups.length === 0) {
+            if (input === "q" || key.return)
+                onExit();
+            return;
+        }
+        // Help overlay
+        if (showHelpRef.current) {
+            if (input === "?" || key.escape)
+                setShowHelp(false);
+            else if (input === "q")
+                onExit();
+            return;
+        }
+        if (input === "?") {
+            setShowHelp(true);
+            return;
+        }
+        // Search mode — capture text input
+        if (searchModeRef.current) {
+            if (key.escape) {
+                setSearchMode(false);
+                setSearchQuery("");
+                dispatchView({ type: "MOVE", cursor: 0, viewport: 0 });
+            }
+            else if (key.return) {
+                setSearchMode(false);
+            }
+            else if (key.backspace || key.delete) {
+                setSearchQuery(prev => prev.slice(0, -1));
+                dispatchView({ type: "MOVE", cursor: 0, viewport: 0 });
+            }
+            else if (input && !key.upArrow && !key.downArrow && /^[\x20-\x7e]+$/.test(input)) {
+                setSearchQuery(prev => prev + input);
+                dispatchView({ type: "MOVE", cursor: 0, viewport: 0 });
+            }
+            return;
+        }
+        // Detail pane mode — scroll within the pane
+        const dp = detailPaneRef.current;
+        if (dp !== null) {
+            const maxScroll = Math.max(0, detailLines.length - detailContentRows);
+            if (key.upArrow || input === "k") {
+                setDetailPane({ groupIndex: dp.groupIndex, scroll: Math.max(0, dp.scroll - 1) });
+            }
+            else if (key.downArrow || input === "j") {
+                setDetailPane({ groupIndex: dp.groupIndex, scroll: Math.min(maxScroll, dp.scroll + 1) });
+            }
+            else if (input === "g") {
+                setDetailPane({ groupIndex: dp.groupIndex, scroll: 0 });
+            }
+            else if (input === "G") {
+                setDetailPane({ groupIndex: dp.groupIndex, scroll: maxScroll });
+            }
+            else if (input === "b" || key.escape) {
+                setDetailPane(null);
+            }
+            else if (input === "q") {
+                onExit();
+            }
+            return;
+        }
+        // List mode
+        if (groups.length === 0) {
+            if (input === "q")
+                onExit();
+            else if (input === "/")
+                setSearchMode(true);
+            return;
+        }
+        const { cursor, expandLevel: expLvl, expandedIndex: expIdx, viewport: vpStart } = viewRef.current;
+        if (key.upArrow || input === "k") {
+            const next = Math.max(0, cursor - 1);
+            const newVp = adjustViewport(next, expIdx, expLvl, vpStart < next ? vpStart : next);
+            dispatchView({ type: "MOVE", cursor: next, viewport: newVp });
+        }
+        else if (key.downArrow || input === "j") {
+            const next = Math.min(groups.length - 1, cursor + 1);
+            const newVp = adjustViewport(next, expIdx, expLvl, vpStart);
+            dispatchView({ type: "MOVE", cursor: next, viewport: newVp });
+        }
+        else if (input === "g") {
+            const newVp = adjustViewport(0, expIdx, expLvl, 0);
+            dispatchView({ type: "MOVE", cursor: 0, viewport: newVp });
+        }
+        else if (input === "G") {
+            const last = groups.length - 1;
+            const newVp = adjustViewport(last, expIdx, expLvl, vpStart);
+            dispatchView({ type: "MOVE", cursor: last, viewport: newVp });
+        }
+        else if (key.pageDown) {
+            const next = Math.min(groups.length - 1, cursor + availableRows);
+            const newVp = adjustViewport(next, expIdx, expLvl, vpStart);
+            dispatchView({ type: "MOVE", cursor: next, viewport: newVp });
+        }
+        else if (key.pageUp) {
+            const next = Math.max(0, cursor - availableRows);
+            const newVp = adjustViewport(next, expIdx, expLvl, next);
+            dispatchView({ type: "MOVE", cursor: next, viewport: newVp });
+        }
+        else if (key.return) {
+            // Enter: toggle inline expand (findings dropdown under the package row)
+            const newLevel = expIdx === cursor && expLvl === "summary" ? null : "summary";
+            const newExpIdx = newLevel === null ? null : cursor;
+            const newVp = adjustViewport(cursor, newExpIdx, newLevel, vpStart);
+            dispatchView({ type: "EXPAND", expandedIndex: newExpIdx, expandLevel: newLevel, viewport: newVp });
+        }
+        else if (input === "/") {
+            setSearchMode(true);
+        }
+        else if (input === "b" && onBack) {
+            onBack();
+        }
+        else if (input === "q") {
+            onExit();
+        }
+    });
+    const visibleGroups = groups.slice(view.viewport, visibleEnd);
+    const aboveCount = view.viewport;
+    const belowCount = groups.length - visibleEnd;
+    const lcCol = 16; // fixed width for license column
+    const nameCol = Math.max(20, innerWidth - 22 - lcCol);
+    // Clamp cursor to valid range (groups may shrink via search filter)
+    const clampedCursor = groups.length > 0 ? Math.min(view.cursor, groups.length - 1) : 0;
+    // ── Help overlay ──
+    if (showHelp) {
+        const isDetail = detailPane !== null;
+        return ((0, jsx_runtime_1.jsxs)(ink_1.Box, { flexDirection: "column", children: [(0, jsx_runtime_1.jsx)(ScoreHeader_1.ScoreHeader, { score: result.score, action: result.action, total: total, flagged: flagged.length, clean: clean.length, severityCounts: severityCounts, userStatus: userStatus, scanUsage: scanUsage }), (0, jsx_runtime_1.jsxs)(ink_1.Box, { flexDirection: "column", borderStyle: "round", borderColor: "cyan", paddingLeft: 2, paddingRight: 2, width: "100%", children: [(0, jsx_runtime_1.jsxs)(ink_1.Text, { bold: true, children: [chalk_1.default.cyan("\u25C6"), " Keyboard Shortcuts"] }), (0, jsx_runtime_1.jsx)(ink_1.Text, { children: "" }), (0, jsx_runtime_1.jsx)(ink_1.Text, { bold: true, children: " Navigation" }), (0, jsx_runtime_1.jsxs)(ink_1.Text, { children: ["   ", chalk_1.default.cyan("\u2191 k"), "     ", chalk_1.default.dim("Move up")] }), (0, jsx_runtime_1.jsxs)(ink_1.Text, { children: ["   ", chalk_1.default.cyan("\u2193 j"), "     ", chalk_1.default.dim("Move down")] }), (0, jsx_runtime_1.jsxs)(ink_1.Text, { children: ["   ", chalk_1.default.cyan("g"), "       ", chalk_1.default.dim("Jump to top")] }), (0, jsx_runtime_1.jsxs)(ink_1.Text, { children: ["   ", chalk_1.default.cyan("G"), "       ", chalk_1.default.dim("Jump to bottom")] }), !isDetail && (0, jsx_runtime_1.jsxs)(ink_1.Text, { children: ["   ", chalk_1.default.cyan("PgUp"), "    ", chalk_1.default.dim("Page up")] }), !isDetail && (0, jsx_runtime_1.jsxs)(ink_1.Text, { children: ["   ", chalk_1.default.cyan("PgDn"), "    ", chalk_1.default.dim("Page down")] }), (0, jsx_runtime_1.jsx)(ink_1.Text, { children: "" }), (0, jsx_runtime_1.jsx)(ink_1.Text, { bold: true, children: " Actions" }), !isDetail && (0, jsx_runtime_1.jsxs)(ink_1.Text, { children: ["   ", chalk_1.default.cyan("\u23CE"), "       ", chalk_1.default.dim("Expand findings")] }), isDetail && (0, jsx_runtime_1.jsxs)(ink_1.Text, { children: ["   ", chalk_1.default.cyan("Esc"), "     ", chalk_1.default.dim("Back to list")] }), !isDetail && (0, jsx_runtime_1.jsxs)(ink_1.Text, { children: ["   ", chalk_1.default.cyan("/"), "       ", chalk_1.default.dim("Search packages")] }), !isDetail && onBack && (0, jsx_runtime_1.jsxs)(ink_1.Text, { children: ["   ", chalk_1.default.cyan("b"), "       ", chalk_1.default.dim("Back to project selector")] }), (0, jsx_runtime_1.jsxs)(ink_1.Text, { children: ["   ", chalk_1.default.cyan("q"), "       ", chalk_1.default.dim("Quit")] }), (0, jsx_runtime_1.jsx)(ink_1.Text, { children: "" }), (0, jsx_runtime_1.jsxs)(ink_1.Text, { dimColor: true, children: [" Press ", chalk_1.default.bold.cyan("?"), " or ", chalk_1.default.bold.cyan("Esc"), " to close"] })] })] }));
+    }
+    // ── Detail pane mode ──
+    if (detailPane !== null) {
+        const dpGroup = groups[detailPane.groupIndex];
+        if (!dpGroup) {
+            setDetailPane(null);
+        }
+        else {
+            const dpRep = dpGroup.packages[0];
+            const { color: dpColor } = actionBadge(dpRep.score);
+            const dpScroll = detailPane.scroll;
+            const dpAbove = dpScroll;
+            const dpBelow = Math.max(0, detailLines.length - dpScroll - detailContentRows);
+            const dpVisible = detailLines.slice(dpScroll, dpScroll + detailContentRows);
+            return ((0, jsx_runtime_1.jsxs)(ink_1.Box, { flexDirection: "column", children: [(0, jsx_runtime_1.jsx)(ScoreHeader_1.ScoreHeader, { score: result.score, action: result.action, total: total, flagged: flagged.length, clean: clean.length, severityCounts: severityCounts, userStatus: userStatus, scanUsage: scanUsage }), (0, jsx_runtime_1.jsxs)(ink_1.Box, { flexDirection: "column", borderStyle: "round", borderColor: "gray", paddingLeft: 1, paddingRight: 1, width: "100%", children: [(0, jsx_runtime_1.jsxs)(ink_1.Box, { justifyContent: "space-between", children: [(0, jsx_runtime_1.jsxs)(ink_1.Text, { bold: true, children: [groupNames(dpGroup), dpRep.license ? chalk_1.default.dim(" \u00B7 ") + (dpRep.license.riskCategory === "permissive" ? chalk_1.default.green(dpRep.license.spdx ?? dpRep.license.raw ?? "") : dpRep.license.riskCategory === "no-license" || dpRep.license.riskCategory === "network-copyleft" ? chalk_1.default.red(dpRep.license.spdx ?? dpRep.license.raw ?? "No license") : chalk_1.default.yellow(dpRep.license.spdx ?? dpRep.license.raw ?? "")) : ""] }), (0, jsx_runtime_1.jsx)(ink_1.Text, { children: dpColor(`score ${dpRep.score}`) })] }), dpAbove > 0 && ((0, jsx_runtime_1.jsxs)(ink_1.Text, { dimColor: true, children: [chalk_1.default.cyan(" \u2191"), " ", dpAbove, " more above"] })), (0, jsx_runtime_1.jsx)(ink_1.Box, { flexDirection: "column", marginLeft: 2, children: dpVisible }), dpBelow > 0 && ((0, jsx_runtime_1.jsxs)(ink_1.Text, { dimColor: true, children: [chalk_1.default.cyan(" \u2193"), " ", dpBelow, " more below"] }))] }), (0, jsx_runtime_1.jsxs)(ink_1.Box, { flexDirection: "column", borderStyle: "round", borderColor: "gray", paddingLeft: 1, paddingRight: 1, width: "100%", children: [clean.length > 0 && ((0, jsx_runtime_1.jsxs)(ink_1.Text, { children: [chalk_1.default.green("\u2713"), " ", chalk_1.default.green.bold(String(clean.length)), " ", chalk_1.default.dim(`package${clean.length !== 1 ? "s" : ""} passed with score 0`)] })), (0, jsx_runtime_1.jsxs)(ink_1.Box, { justifyContent: "space-between", children: [(0, jsx_runtime_1.jsxs)(ink_1.Text, { dimColor: true, children: [(durationMs / 1000).toFixed(1), "s"] }), result.trialScansRemaining !== undefined && ((0, jsx_runtime_1.jsx)(ink_1.Text, { dimColor: true, children: "Free tier \u00B7 dg login for higher scan limits" }))] })] }), (0, jsx_runtime_1.jsx)(ink_1.Text, { dimColor: true, children: chalk_1.default.dim("\u2500".repeat(Math.max(20, termCols - 4))) }), (0, jsx_runtime_1.jsxs)(ink_1.Text, { children: [" ", chalk_1.default.bold.cyan("\u2191\u2193"), " ", chalk_1.default.dim("scroll"), "   ", chalk_1.default.bold.cyan("Esc"), " ", chalk_1.default.dim("back"), "   ", chalk_1.default.bold.cyan("q"), " ", chalk_1.default.dim("quit")] })] }));
+        }
+    }
+    // ── List mode ──
+    return ((0, jsx_runtime_1.jsxs)(ink_1.Box, { flexDirection: "column", children: [(0, jsx_runtime_1.jsx)(ScoreHeader_1.ScoreHeader, { score: result.score, action: result.action, total: total, flagged: flagged.length, clean: clean.length, severityCounts: severityCounts, userStatus: userStatus, scanUsage: scanUsage }), groups.length > 0 && ((0, jsx_runtime_1.jsxs)(ink_1.Box, { flexDirection: "column", borderStyle: "round", borderColor: "gray", paddingLeft: 1, paddingRight: 1, width: "100%", children: [(0, jsx_runtime_1.jsxs)(ink_1.Box, { justifyContent: "space-between", children: [(0, jsx_runtime_1.jsx)(ink_1.Text, { bold: true, children: "Flagged Packages" }), (0, jsx_runtime_1.jsx)(ink_1.Text, { dimColor: true, children: searchQuery ? `${groups.length} of ${allGroupCount}` : `${clampedCursor + 1}/${groups.length}` })] }), aboveCount > 0 && ((0, jsx_runtime_1.jsxs)(ink_1.Text, { dimColor: true, children: [chalk_1.default.cyan(" \u2191"), " ", aboveCount, " more above"] })), visibleGroups.map((group, visIdx) => {
+                        const globalIdx = view.viewport + visIdx;
+                        const isCursor = globalIdx === clampedCursor;
+                        const level = getLevel(globalIdx);
+                        const rep = group.packages[0];
+                        const { label, color } = actionBadge(rep.score);
+                        const names = groupNames(group);
+                        const scoreStr = String(rep.score);
+                        const lcInfo = rep.license;
+                        const lcStr = lcInfo ? truncate(lcInfo.spdx ?? lcInfo.raw ?? "", lcCol - 2) : "";
+                        const lcColor = !lcInfo ? chalk_1.default.dim
+                            : lcInfo.riskCategory === "permissive" ? chalk_1.default.green
+                                : (lcInfo.riskCategory === "no-license" || lcInfo.riskCategory === "unlicensed" || lcInfo.riskCategory === "network-copyleft") ? chalk_1.default.red
+                                    : chalk_1.default.yellow;
+                        const arrow = level === "summary" ? "\u25BE" : "\u25B8"; // ▾ expanded, ▸ collapsed
+                        return ((0, jsx_runtime_1.jsxs)(ink_1.Box, { flexDirection: "column", children: [isCursor ? ((0, jsx_runtime_1.jsxs)(ink_1.Text, { backgroundColor: "#1a1a2e", children: [chalk_1.default.cyan("\u258C"), " ", chalk_1.default.cyan(arrow), " ", ` `, color(pad(label, 6)), chalk_1.default.bold(pad(truncate(names, nameCol - 2), nameCol)), lcColor(pad(lcStr, lcCol)), color(scoreStr.padStart(3)), "  "] })) : ((0, jsx_runtime_1.jsxs)(ink_1.Text, { children: [`  ${chalk_1.default.dim(arrow)}  `, color(pad(label, 6)), pad(truncate(names, nameCol - 2), nameCol), lcColor(pad(lcStr, lcCol)), color(scoreStr.padStart(3))] })), level === "summary" && ((0, jsx_runtime_1.jsx)(FindingsSummary, { group: group, maxWidth: innerWidth - 8, maxLines: globalIdx === view.expandedIndex ? animVisibleLines : undefined }))] }, group.key));
+                    }), belowCount > 0 && ((0, jsx_runtime_1.jsxs)(ink_1.Text, { dimColor: true, children: [chalk_1.default.cyan(" \u2193"), " ", belowCount, " more below"] }))] })), (0, jsx_runtime_1.jsxs)(ink_1.Box, { flexDirection: "column", borderStyle: "round", borderColor: "gray", paddingLeft: 1, paddingRight: 1, width: "100%", children: [clean.length > 0 && ((0, jsx_runtime_1.jsxs)(ink_1.Text, { children: [chalk_1.default.green("\u2713"), " ", chalk_1.default.green.bold(String(clean.length)), " ", chalk_1.default.dim(`package${clean.length !== 1 ? "s" : ""} passed with score 0`)] })), discoveredTotal !== undefined && discoveredTotal > total && ((0, jsx_runtime_1.jsxs)(ink_1.Text, { dimColor: true, children: ["Scanned ", total, " of ", discoveredTotal, " packages"] })), (0, jsx_runtime_1.jsxs)(ink_1.Box, { justifyContent: "space-between", children: [(0, jsx_runtime_1.jsxs)(ink_1.Text, { dimColor: true, children: [(durationMs / 1000).toFixed(1), "s"] }), result.trialScansRemaining !== undefined && ((0, jsx_runtime_1.jsx)(ink_1.Text, { dimColor: true, children: "Free tier \u00B7 dg login for higher scan limits" }))] })] }), (0, jsx_runtime_1.jsx)(ink_1.Text, { dimColor: true, children: chalk_1.default.dim("\u2500".repeat(Math.max(20, termCols - 4))) }), searchMode ? ((0, jsx_runtime_1.jsxs)(ink_1.Text, { children: [" ", chalk_1.default.bold.cyan("/"), " ", searchQuery, chalk_1.default.cyan("\u2588"), "   ", chalk_1.default.dim("Esc clear")] })) : ((0, jsx_runtime_1.jsxs)(ink_1.Text, { children: [" ", groups.length > 0 ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [chalk_1.default.bold.cyan("\u2191\u2193"), " ", chalk_1.default.dim("navigate"), "   ", chalk_1.default.bold.cyan("\u23CE"), " ", chalk_1.default.dim("expand"), "   ", chalk_1.default.bold.cyan("/"), " ", chalk_1.default.dim("search"), "   ", onBack && (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [chalk_1.default.bold.cyan("b"), " ", chalk_1.default.dim("back"), "   "] }), chalk_1.default.bold.cyan("q"), " ", chalk_1.default.dim("quit")] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Press ", chalk_1.default.bold.cyan("q"), " or ", chalk_1.default.bold.cyan("Enter"), " ", chalk_1.default.dim("to exit")] }))] }))] }));
+};
+exports.InteractiveResultsView = InteractiveResultsView;
+const T = {
+    branch: chalk_1.default.dim("\u251C\u2500\u2500"),
+    last: chalk_1.default.dim("\u2514\u2500\u2500"),
+    pipe: chalk_1.default.dim("\u2502"),
+    blank: " ",
+};
+const LICENSE_DESCRIPTIONS = {
+    "permissive": "Permissive \u2014 free to use, modify, and distribute. Include the copyright notice.",
+    "weak-copyleft": "Weak copyleft \u2014 changes to this library must be shared, but your code stays private.",
+    "strong-copyleft": "Strong copyleft \u2014 your entire project must be open-sourced under the same license.",
+    "network-copyleft": "Network copyleft \u2014 even SaaS/server use requires releasing your source code.",
+    "no-license": "No license found \u2014 legally all rights reserved. Use may require permission from the author.",
+    "unlicensed": "Explicitly unlicensed \u2014 proprietary software. A commercial agreement is required.",
+    "unknown": "Unrecognized license \u2014 have your legal team review before using.",
+    "deferred": "License declared in a file \u2014 check the LICENSE file in the package.",
+};
+function licenseLine(rep) {
+    const lc = rep.license;
+    if (!lc)
+        return null;
+    const spdx = lc.spdx ?? lc.raw ?? "";
+    const desc = LICENSE_DESCRIPTIONS[lc.riskCategory] ?? "";
+    const lcColor = lc.riskCategory === "permissive" ? chalk_1.default.green
+        : (lc.riskCategory === "no-license" || lc.riskCategory === "unlicensed" || lc.riskCategory === "network-copyleft") ? chalk_1.default.red
+            : chalk_1.default.yellow;
+    return ((0, jsx_runtime_1.jsxs)(ink_1.Text, { children: [T.branch, " ", lcColor(spdx), " ", chalk_1.default.dim("\u2014"), " ", chalk_1.default.dim(desc)] }, "license-info"));
+}
+const FindingsSummary = ({ group, maxWidth, maxLines }) => {
+    const rep = group.packages[0];
+    const visibleFindings = rep.findings
+        .filter((f) => f.severity > 1)
+        .sort((a, b) => b.severity - a.severity);
+    const hasAffects = group.packages.length > 3;
+    const allLines = [];
+    // License info
+    const lcLine = licenseLine(rep);
+    if (lcLine)
+        allLines.push(lcLine);
+    // Render findings — API returns tier-gated data:
+    //   Free: { category, severity } — don't show raw IDs, just upgrade prompt
+    //   Pro:  { category, severity, title } — show category + title
+    //   Team: { category, severity, title, evidence } — show everything
+    const isFree = visibleFindings.length > 0 && !visibleFindings[0].title;
+    if (isFree) {
+        // Free tier: don't show raw category IDs — just the upgrade prompt
+        allLines.push((0, jsx_runtime_1.jsxs)(ink_1.Text, { dimColor: true, children: [hasAffects ? T.branch : T.last, " ", chalk_1.default.yellow("\u2192"), " ", chalk_1.default.yellow("Upgrade to Pro"), " for finding details"] }, "upgrade"));
+    }
+    else {
+        // Paid tier: show findings with category + title
+        for (let idx = 0; idx < visibleFindings.length; idx++) {
+            const f = visibleFindings[idx];
+            const isLast = !hasAffects && idx === visibleFindings.length - 1;
+            const connector = isLast ? T.last : T.branch;
+            const sevLabel = SEVERITY_LABELS[f.severity] ?? "INFO";
+            const sevColor = SEVERITY_COLORS[f.severity] ?? SEVERITY_COLORS[1];
+            const title = f.title ? `: ${f.title}` : "";
+            allLines.push((0, jsx_runtime_1.jsxs)(ink_1.Text, { children: [connector, " ", sevColor(pad(sevLabel, 5)), " ", chalk_1.default.dim(f.category ?? ""), title] }, `finding-${idx}`));
+        }
+    }
+    if (visibleFindings.length === 0 && rep.score > 0) {
+        // No findings at all (shouldn't happen after API change, but safety fallback)
+        allLines.push((0, jsx_runtime_1.jsxs)(ink_1.Text, { dimColor: true, children: [hasAffects ? T.branch : T.last, " Score: ", rep.score, "/100"] }, "score-only"));
+    }
+    if (hasAffects) {
+        allLines.push((0, jsx_runtime_1.jsxs)(ink_1.Text, { dimColor: true, children: [T.last, " ", truncate(affectsLine(group), maxWidth - 8)] }, "affects"));
+    }
+    const linesToShow = maxLines !== undefined ? allLines.slice(0, maxLines) : allLines;
+    return ((0, jsx_runtime_1.jsx)(ink_1.Box, { flexDirection: "column", marginLeft: 5, children: linesToShow }));
+};

package/dist/packages/cli/src/ui/components/Mascot.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Mascot = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ink_1 = require("ink");
+const FACES = {
+    idle: { left: "o", right: "o", mouth: "^" },
+    alert: { left: "O", right: "O", mouth: "^" },
+    scanning: { left: "-", right: "-", mouth: "^" },
+    alarmed: { left: "O", right: "O", mouth: "o" },
+    happy: { left: "^", right: "^", mouth: "v" },
+    curious: { left: "O", right: "o", mouth: "^" },
+    explaining: { left: "o", right: "o", mouth: "~" },
+    proud: { left: "^", right: "^", mouth: "^" },
+    wink: { left: "-", right: "o", mouth: "^" },
+    worried: { left: "o", right: "o", mouth: "_" },
+};
+const Mascot = ({ mood = "idle", color }) => {
+    const { left, right, mouth } = FACES[mood];
+    // Lines are kept as plain template strings so width is exact and verifiable
+    // by eye. Anything that drifts here breaks the alignment of the whole cat.
+    const lines = [
+        "    /\\_____/\\",
+        `   /  ${left}   ${right}  \\`,
+        `  ( ==  ${mouth}  == )`,
+        "   )         (",
+        "  (           )",
+        " ( (  )   (  ) )",
+        "(__(__)___(__)__)",
+    ];
+    return ((0, jsx_runtime_1.jsx)(ink_1.Box, { flexDirection: "column", children: lines.map((line, i) => ((0, jsx_runtime_1.jsx)(ink_1.Text, { color: color, children: line }, i))) }));
+};
+exports.Mascot = Mascot;

package/dist/packages/cli/src/ui/components/ProgressBar.js

@@ -0,0 +1,51 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProgressBar = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ink_1 = require("ink");
+const ink_spinner_1 = __importDefault(require("ink-spinner"));
+const chalk_1 = __importDefault(require("chalk"));
+const useTerminalSize_1 = require("../hooks/useTerminalSize");
+function estimateScanSeconds(packageCount) {
+    // Prefetch + analysis scales non-linearly with package count.
+    // Calibrated against local API: 45→6s, 100→25s, 200→60s
+    return Math.ceil(Math.max(5, packageCount * 0.35 - 10));
+}
+function formatTime(seconds) {
+    if (seconds < 60)
+        return `${seconds}s`;
+    const m = Math.floor(seconds / 60);
+    const s = seconds % 60;
+    return s > 0 ? `${m}m ${s}s` : `${m}m`;
+}
+const ProgressBar = ({ value, total, label, }) => {
+    const startRef = (0, react_1.useRef)(Date.now());
+    const [elapsed, setElapsed] = (0, react_1.useState)(0);
+    (0, react_1.useEffect)(() => {
+        const timer = setInterval(() => {
+            setElapsed(Math.floor((Date.now() - startRef.current) / 1000));
+        }, 1000);
+        return () => clearInterval(timer);
+    }, []);
+    // Subscribe to terminal resizes so the bar re-lays-out when the user
+    // resizes the window mid-scan. Reading process.stdout.columns directly
+    // only captures the width at mount time and goes stale on resize.
+    const { cols: termWidth } = (0, useTerminalSize_1.useTerminalSize)();
+    const percent = total > 0 ? Math.round((value / total) * 100) : 0;
+    const estimate = estimateScanSeconds(total);
+    const timeInfo = `${formatTime(elapsed)} / ~${formatTime(estimate)}`;
+    const counter = `${value}/${total}  ${percent}%`;
+    // Reserve: 4 indent + counter length + 2 padding
+    const barWidth = Math.max(10, termWidth - counter.length - 8);
+    const fraction = total > 0 ? Math.min(1, value / total) : 0;
+    const filled = Math.round(fraction * barWidth);
+    const empty = barWidth - filled;
+    const filledBar = "\u2501".repeat(filled);
+    const emptyBar = "\u2501".repeat(empty);
+    return ((0, jsx_runtime_1.jsxs)(ink_1.Box, { flexDirection: "column", paddingLeft: 2, children: [(0, jsx_runtime_1.jsxs)(ink_1.Text, { children: [chalk_1.default.cyan("\u25C6"), " ", chalk_1.default.bold("Dependency Guardian")] }), (0, jsx_runtime_1.jsx)(ink_1.Text, { children: "" }), (0, jsx_runtime_1.jsxs)(ink_1.Box, { children: [(0, jsx_runtime_1.jsx)(ink_1.Text, { color: "cyan", children: (0, jsx_runtime_1.jsx)(ink_spinner_1.default, { type: "dots" }) }), (0, jsx_runtime_1.jsxs)(ink_1.Text, { children: [" Scanning ", total, " packages...  "] }), (0, jsx_runtime_1.jsx)(ink_1.Text, { dimColor: true, children: timeInfo })] }), (0, jsx_runtime_1.jsxs)(ink_1.Box, { children: [(0, jsx_runtime_1.jsx)(ink_1.Text, { children: "  " }), (0, jsx_runtime_1.jsx)(ink_1.Text, { color: "green", children: filledBar }), (0, jsx_runtime_1.jsx)(ink_1.Text, { dimColor: true, children: emptyBar }), (0, jsx_runtime_1.jsxs)(ink_1.Text, { children: ["  ", counter] })] }), label && ((0, jsx_runtime_1.jsx)(ink_1.Box, { children: (0, jsx_runtime_1.jsxs)(ink_1.Text, { dimColor: true, children: ["  ", chalk_1.default.dim("\u203A"), " ", label] }) }))] }));
+};
+exports.ProgressBar = ProgressBar;