inup 1.4.10 → 1.5.0

package/dist/ui/renderer/package-list.js

@@ -11,6 +11,11 @@ exports.renderPackagesTable = renderPackagesTable;
 const chalk_1 = __importDefault(require("chalk"));
 const utils_1 = require("../utils");
 const themes_colors_1 = require("../themes-colors");
+const vulnerability_1 = require("../presenters/vulnerability");
+function padLineToWidth(line, terminalWidth) {
+    const padding = Math.max(0, terminalWidth - utils_1.VersionUtils.getVisualLength(line));
+    return line + ' '.repeat(padding);
+}
 /**
  * Get type badge for dependency type (theme-aware)
  */
@@ -34,7 +39,7 @@ function getTypeBadge(type) {
  * @param isCurrentRow Whether this is the current/highlighted row
  * @param terminalWidth Terminal width for dynamic truncation (default 80)
  */
-function renderPackageLine(state, index, isCurrentRow, terminalWidth = 80) {
+function renderPackageLine(state, index, isCurrentRow, terminalWidth = 80, options = {}) {
     const prefix = isCurrentRow ? (0, themes_colors_1.getThemeColor)('success')('❯ ') : '  ';
     // Package name with special formatting for scoped packages (@author/package)
     let packageName;
@@ -44,14 +49,18 @@ function renderPackageLine(state, index, isCurrentRow, terminalWidth = 80) {
             const author = parts[0]; // @author
             const packagePart = parts.slice(1).join('/'); // package name
             if (isCurrentRow) {
-                packageName = chalk_1.default.bold((0, themes_colors_1.getThemeColor)('packageAuthor')(author)) + (0, themes_colors_1.getThemeColor)('packageName')('/' + packagePart);
+                packageName =
+                    chalk_1.default.bold((0, themes_colors_1.getThemeColor)('packageAuthor')(author)) +
+                        (0, themes_colors_1.getThemeColor)('packageName')('/' + packagePart);
             }
             else {
                 packageName = chalk_1.default.bold.white(author) + chalk_1.default.white('/' + packagePart);
             }
         }
         else {
-            packageName = isCurrentRow ? (0, themes_colors_1.getThemeColor)('packageName')(state.name) : chalk_1.default.white(state.name);
+            packageName = isCurrentRow
+                ? (0, themes_colors_1.getThemeColor)('packageName')(state.name)
+                : chalk_1.default.white(state.name);
         }
     }
     else {
@@ -61,13 +70,23 @@ function renderPackageLine(state, index, isCurrentRow, terminalWidth = 80) {
     const isCurrentSelected = state.selectedOption === 'none';
     const isRangeSelected = state.selectedOption === 'range';
     const isLatestSelected = state.selectedOption === 'latest';
+    const isPending = state.loadState === 'pending';
+    const isFailed = state.loadState === 'failed';
     // Current version dot and version (show original specifier with prefix)
     const currentDot = isCurrentSelected ? (0, themes_colors_1.getThemeColor)('dot')('●') : (0, themes_colors_1.getThemeColor)('dotEmpty')('○');
     const currentVersion = chalk_1.default.white(state.currentVersionSpecifier);
     // Range version dot and version
     let rangeDot = '';
     let rangeVersionText = '';
-    if (state.hasRangeUpdate) {
+    if (isPending) {
+        rangeDot = (0, themes_colors_1.getThemeColor)('dotEmpty')('◌');
+        rangeVersionText = chalk_1.default.gray('loading');
+    }
+    else if (isFailed) {
+        rangeDot = (0, themes_colors_1.getThemeColor)('dotEmpty')('◌');
+        rangeVersionText = chalk_1.default.gray('unavailable');
+    }
+    else if (state.hasRangeUpdate) {
         rangeDot = isRangeSelected ? (0, themes_colors_1.getThemeColor)('dot')('●') : (0, themes_colors_1.getThemeColor)('dotEmpty')('○');
         const rangeVersionWithPrefix = utils_1.VersionUtils.applyVersionPrefix(state.currentVersionSpecifier, state.rangeVersion);
         rangeVersionText = (0, themes_colors_1.getThemeColor)('versionRange')(rangeVersionWithPrefix);
@@ -79,7 +98,15 @@ function renderPackageLine(state, index, isCurrentRow, terminalWidth = 80) {
     // Latest version dot and version
     let latestDot = '';
     let latestVersionText = '';
-    if (state.hasMajorUpdate) {
+    if (isPending) {
+        latestDot = (0, themes_colors_1.getThemeColor)('dotEmpty')('◌');
+        latestVersionText = chalk_1.default.gray('loading');
+    }
+    else if (isFailed) {
+        latestDot = (0, themes_colors_1.getThemeColor)('dotEmpty')('◌');
+        latestVersionText = chalk_1.default.gray('unavailable');
+    }
+    else if (state.hasMajorUpdate) {
         latestDot = isLatestSelected ? (0, themes_colors_1.getThemeColor)('dot')('●') : (0, themes_colors_1.getThemeColor)('dotEmpty')('○');
         const latestVersionWithPrefix = utils_1.VersionUtils.applyVersionPrefix(state.currentVersionSpecifier, state.latestVersion);
         latestVersionText = (0, themes_colors_1.getThemeColor)('versionLatest')(latestVersionWithPrefix);
@@ -112,26 +139,36 @@ function renderPackageLine(state, index, isCurrentRow, terminalWidth = 80) {
     const displayName = truncatedName !== state.name ? truncatedName : packageName;
     // Package name with dashes and badge at the end
     const typeBadge = getTypeBadge(state.type);
+    const shouldShowVulnerability = (0, vulnerability_1.shouldDisplayVulnerabilityForDependency)(state.type, options);
+    const vulnBadge = shouldShowVulnerability ? (0, vulnerability_1.getVulnerabilityBadge)(state.vulnerability) : '';
+    const vulnBadgeWidth = vulnBadge ? utils_1.VersionUtils.getVisualLength(vulnBadge) + 1 : 0; // +1 for space
     const nameLength = utils_1.VersionUtils.getVisualLength(truncatedName);
-    const namePadding = Math.max(0, packageNameWidth - nameLength - 1 - badgeWidth); // -1 for space after package name, -badgeWidth for badge at end
-    const nameDashes = shouldShowDashes(namePadding) ? dashColor('-').repeat(namePadding) : ' '.repeat(namePadding);
-    // Place badge at the end of dashes: name ------[D]
+    const namePadding = Math.max(0, packageNameWidth - nameLength - 1 - badgeWidth - vulnBadgeWidth); // -1 for space after package name
+    const nameDashes = shouldShowDashes(namePadding)
+        ? dashColor('-').repeat(namePadding)
+        : ' '.repeat(namePadding);
+    // Place badges at the end of dashes: name ------⚠[D]
+    const vulnSuffix = vulnBadge ? ` ${vulnBadge}` : '';
     const packageNameSection = typeBadge
-        ? `${displayName} ${nameDashes}${typeBadge}`
-        : `${displayName} ${nameDashes}`;
+        ? `${displayName} ${nameDashes}${vulnSuffix}${typeBadge}`
+        : `${displayName} ${nameDashes}${vulnSuffix}`;
     // Current version section with dashes only if needed
     const currentSection = `${currentDot} ${currentVersion}`;
     const currentSectionLength = utils_1.VersionUtils.getVisualLength(currentSection) + 1; // +1 for space before padding
     const currentPadding = Math.max(0, currentColumnWidth - currentSectionLength);
-    const currentPaddingText = shouldShowDashes(currentPadding) ? dashColor('-').repeat(currentPadding) : ' '.repeat(currentPadding);
+    const currentPaddingText = shouldShowDashes(currentPadding)
+        ? dashColor('-').repeat(currentPadding)
+        : ' '.repeat(currentPadding);
     const currentWithPadding = currentSection + ' ' + currentPaddingText;
     // Range version section with dashes only if needed
     let rangeSection = '';
-    if (state.hasRangeUpdate) {
+    if (isPending || isFailed || state.hasRangeUpdate) {
         rangeSection = `${rangeDot} ${rangeVersionText}`;
         const rangeSectionLength = utils_1.VersionUtils.getVisualLength(rangeSection) + 1; // +1 for space before padding
         const rangePadding = Math.max(0, rangeColumnWidth - rangeSectionLength);
-        const rangePaddingText = shouldShowDashes(rangePadding) ? dashColor('-').repeat(rangePadding) : ' '.repeat(rangePadding);
+        const rangePaddingText = shouldShowDashes(rangePadding)
+            ? dashColor('-').repeat(rangePadding)
+            : ' '.repeat(rangePadding);
         rangeSection += ' ' + rangePaddingText;
     }
     else {
@@ -140,11 +177,13 @@ function renderPackageLine(state, index, isCurrentRow, terminalWidth = 80) {
     }
     // Latest version section with dashes only if needed
     let latestSection = '';
-    if (state.hasMajorUpdate) {
+    if (isPending || isFailed || state.hasMajorUpdate) {
         latestSection = `${latestDot} ${latestVersionText}`;
         const latestSectionLength = utils_1.VersionUtils.getVisualLength(latestSection) + 1; // +1 for space before padding
         const latestPadding = Math.max(0, latestColumnWidth - latestSectionLength);
-        const latestPaddingText = shouldShowDashes(latestPadding) ? dashColor('-').repeat(latestPadding) : ' '.repeat(latestPadding);
+        const latestPaddingText = shouldShowDashes(latestPadding)
+            ? dashColor('-').repeat(latestPadding)
+            : ' '.repeat(latestPadding);
         latestSection += ' ' + latestPaddingText;
     }
     else {
@@ -171,7 +210,7 @@ function renderSpacer() {
 /**
  * Render the main interface
  */
-function renderInterface(states, currentRow, scrollOffset, maxVisibleItems, forceFullRender, renderableItems, activeFilterLabel, packageManager, filterMode, filterQuery, totalPackagesBeforeFilter, terminalWidth = 80) {
+function renderInterface(states, currentRow, scrollOffset, maxVisibleItems, forceFullRender, renderableItems, activeFilterLabel, packageManager, filterMode, filterQuery, totalPackagesBeforeFilter, terminalWidth = 80, loadingProgress, auditProgress, options = {}) {
     const output = [];
     // Header section (same for initial and incremental render)
     if (packageManager) {
@@ -186,20 +225,33 @@ function renderInterface(states, currentRow, scrollOffset, maxVisibleItems, forc
         // Each character in "inup" gets a different color
         const inupColors = [chalk_1.default.red, chalk_1.default.yellow, chalk_1.default.blue, chalk_1.default.magenta];
         const coloredInup = inupColors.map((color, i) => color.bold('inup'[i])).join('');
-        const headerLine = '  ' + chalk_1.default.bold(pmColor('🚀')) + ' ' + coloredInup + (0, themes_colors_1.getThemeColor)('textSecondary')(` (${packageManager.displayName})`);
+        const headerLine = '  ' +
+            chalk_1.default.bold(pmColor('🚀')) +
+            ' ' +
+            coloredInup +
+            (0, themes_colors_1.getThemeColor)('textSecondary')(` (${packageManager.displayName})`);
         // Show filter state (always show, including "All")
         const fullHeaderLine = activeFilterLabel
-            ? headerLine + (0, themes_colors_1.getThemeColor)('textSecondary')(' - ') + (0, themes_colors_1.getThemeColor)('primary')(activeFilterLabel)
+            ? headerLine +
+                (0, themes_colors_1.getThemeColor)('textSecondary')(' - ') +
+                (0, themes_colors_1.getThemeColor)('primary')(activeFilterLabel)
             : headerLine;
         // Pad to terminal width to clear any leftover characters
         const headerPadding = Math.max(0, terminalWidth - utils_1.VersionUtils.getVisualLength(fullHeaderLine));
         output.push(fullHeaderLine + ' '.repeat(headerPadding));
     }
     else {
-        const headerLine = '  ' + chalk_1.default.bold.blue('🚀 ') + chalk_1.default.bold.red('i') + chalk_1.default.bold.yellow('n') + chalk_1.default.bold.blue('u') + chalk_1.default.bold.magenta('p');
+        const headerLine = '  ' +
+            chalk_1.default.bold.blue('🚀 ') +
+            chalk_1.default.bold.red('i') +
+            chalk_1.default.bold.yellow('n') +
+            chalk_1.default.bold.blue('u') +
+            chalk_1.default.bold.magenta('p');
         // Show filter state (always show, including "All")
         const fullHeaderLine = activeFilterLabel
-            ? headerLine + (0, themes_colors_1.getThemeColor)('textSecondary')(' - ') + (0, themes_colors_1.getThemeColor)('primary')(activeFilterLabel)
+            ? headerLine +
+                (0, themes_colors_1.getThemeColor)('textSecondary')(' - ') +
+                (0, themes_colors_1.getThemeColor)('primary')(activeFilterLabel)
             : headerLine;
         // Pad to terminal width to clear any leftover characters
         const headerPadding = Math.max(0, terminalWidth - utils_1.VersionUtils.getVisualLength(fullHeaderLine));
@@ -208,14 +260,20 @@ function renderInterface(states, currentRow, scrollOffset, maxVisibleItems, forc
     output.push('');
     if (filterMode) {
         // Show filter input with cursor when actively filtering
-        const filterDisplay = '  ' + chalk_1.default.bold.white('Search: ') + (0, themes_colors_1.getThemeColor)('primary')(filterQuery || '') + (0, themes_colors_1.getThemeColor)('border')('█');
+        const filterDisplay = '  ' +
+            chalk_1.default.bold.white('Search: ') +
+            (0, themes_colors_1.getThemeColor)('primary')(filterQuery || '') +
+            (0, themes_colors_1.getThemeColor)('border')('█');
         // Pad to terminal width to clear any leftover characters from backspace
         const padding = Math.max(0, terminalWidth - utils_1.VersionUtils.getVisualLength(filterDisplay));
         output.push(filterDisplay + ' '.repeat(padding));
     }
     else if (filterQuery) {
         // Show applied filter when not in filter mode but filter is active
-        const filterDisplay = '  ' + chalk_1.default.bold.white('Search: ') + (0, themes_colors_1.getThemeColor)('primary')(filterQuery) + (0, themes_colors_1.getThemeColor)('textSecondary')(' (press / to edit)');
+        const filterDisplay = '  ' +
+            chalk_1.default.bold.white('Search: ') +
+            (0, themes_colors_1.getThemeColor)('primary')(filterQuery) +
+            (0, themes_colors_1.getThemeColor)('textSecondary')(' (press / to edit)');
         const padding = Math.max(0, terminalWidth - utils_1.VersionUtils.getVisualLength(filterDisplay));
         output.push(filterDisplay + ' '.repeat(padding));
     }
@@ -237,6 +295,9 @@ function renderInterface(states, currentRow, scrollOffset, maxVisibleItems, forc
             chalk_1.default.bold.white('I ') +
             (0, themes_colors_1.getThemeColor)('textSecondary')('Info') +
             '  ' +
+            chalk_1.default.bold.white('S ') +
+            (0, themes_colors_1.getThemeColor)('textSecondary')('Vulnerable') +
+            '  ' +
             chalk_1.default.bold.white('M ') +
             (0, themes_colors_1.getThemeColor)('textSecondary')('Minor') +
             '  ' +
@@ -257,67 +318,97 @@ function renderInterface(states, currentRow, scrollOffset, maxVisibleItems, forc
     if (filterMode) {
         // In filter mode, show Enter to apply and ESC to clear
         if (totalPackages === 0) {
-            statusLine = (0, themes_colors_1.getThemeColor)('warning')(`No matches found`) +
-                '  ' +
-                chalk_1.default.bold.white('Esc ') + chalk_1.default.gray('Clear');
+            statusLine =
+                (0, themes_colors_1.getThemeColor)('warning')(`No matches found`) +
+                    '  ' +
+                    chalk_1.default.bold.white('Esc ') +
+                    chalk_1.default.gray('Clear');
         }
         else if (totalVisualItems > maxVisibleItems) {
-            statusLine = (0, themes_colors_1.getThemeColor)('textSecondary')(`Showing ${chalk_1.default.white(startItem)}-${chalk_1.default.white(endItem)} of ${chalk_1.default.white(totalPackages)} matches`) +
-                '  ' +
-                chalk_1.default.bold.white('Enter ') + chalk_1.default.gray('Apply') +
-                '  ' +
-                chalk_1.default.bold.white('Esc ') + chalk_1.default.gray('Clear');
+            statusLine =
+                (0, themes_colors_1.getThemeColor)('textSecondary')(`Showing ${chalk_1.default.white(startItem)}-${chalk_1.default.white(endItem)} of ${chalk_1.default.white(totalPackages)} matches`) +
+                    '  ' +
+                    chalk_1.default.bold.white('Enter ') +
+                    chalk_1.default.gray('Apply') +
+                    '  ' +
+                    chalk_1.default.bold.white('Esc ') +
+                    chalk_1.default.gray('Clear');
         }
         else {
-            statusLine = (0, themes_colors_1.getThemeColor)('textSecondary')(`Showing all ${chalk_1.default.white(totalPackages)} matches`) +
-                '  ' +
-                chalk_1.default.bold.white('Enter ') + chalk_1.default.gray('Apply') +
-                '  ' +
-                chalk_1.default.bold.white('Esc ') + chalk_1.default.gray('Clear');
+            statusLine =
+                (0, themes_colors_1.getThemeColor)('textSecondary')(`Showing all ${chalk_1.default.white(totalPackages)} matches`) +
+                    '  ' +
+                    chalk_1.default.bold.white('Enter ') +
+                    chalk_1.default.gray('Apply') +
+                    '  ' +
+                    chalk_1.default.bold.white('Esc ') +
+                    chalk_1.default.gray('Clear');
         }
     }
     else if (totalPackages < totalBeforeFilter) {
         // Filter is applied but not in filter mode
         if (totalVisualItems > maxVisibleItems) {
-            statusLine = (0, themes_colors_1.getThemeColor)('textSecondary')(`Showing ${chalk_1.default.white(startItem)}-${chalk_1.default.white(endItem)} of ${chalk_1.default.white(totalPackages)} matches`) +
-                '  ' +
-                chalk_1.default.bold.white('D/P/O ') + chalk_1.default.gray('Filter') +
-                '  ' +
-                chalk_1.default.bold.white('M ') + chalk_1.default.gray('Minor') +
-                '  ' +
-                chalk_1.default.bold.white('L ') + chalk_1.default.gray('All') +
-                '  ' +
-                chalk_1.default.bold.white('U ') + chalk_1.default.gray('None') +
-                '  ' +
-                chalk_1.default.bold.white('Esc ') + chalk_1.default.gray('Clear');
+            statusLine =
+                (0, themes_colors_1.getThemeColor)('textSecondary')(`Showing ${chalk_1.default.white(startItem)}-${chalk_1.default.white(endItem)} of ${chalk_1.default.white(totalPackages)} matches`) +
+                    '  ' +
+                    chalk_1.default.bold.white('D/P/O ') +
+                    chalk_1.default.gray('Filter') +
+                    '  ' +
+                    chalk_1.default.bold.white('M ') +
+                    chalk_1.default.gray('Minor') +
+                    '  ' +
+                    chalk_1.default.bold.white('L ') +
+                    chalk_1.default.gray('All') +
+                    '  ' +
+                    chalk_1.default.bold.white('U ') +
+                    chalk_1.default.gray('None') +
+                    '  ' +
+                    chalk_1.default.bold.white('Esc ') +
+                    chalk_1.default.gray('Clear');
         }
         else {
-            statusLine = (0, themes_colors_1.getThemeColor)('textSecondary')(`Showing all ${chalk_1.default.white(totalPackages)} matches`) +
-                '  ' +
-                chalk_1.default.bold.white('D/P/O ') + chalk_1.default.gray('Filter') +
-                '  ' +
-                chalk_1.default.bold.white('M ') + chalk_1.default.gray('Minor') +
-                '  ' +
-                chalk_1.default.bold.white('L ') + chalk_1.default.gray('All') +
-                '  ' +
-                chalk_1.default.bold.white('U ') + chalk_1.default.gray('None') +
-                '  ' +
-                chalk_1.default.bold.white('Esc ') + chalk_1.default.gray('Clear');
+            statusLine =
+                (0, themes_colors_1.getThemeColor)('textSecondary')(`Showing all ${chalk_1.default.white(totalPackages)} matches`) +
+                    '  ' +
+                    chalk_1.default.bold.white('D/P/O ') +
+                    chalk_1.default.gray('Filter') +
+                    '  ' +
+                    chalk_1.default.bold.white('M ') +
+                    chalk_1.default.gray('Minor') +
+                    '  ' +
+                    chalk_1.default.bold.white('L ') +
+                    chalk_1.default.gray('All') +
+                    '  ' +
+                    chalk_1.default.bold.white('U ') +
+                    chalk_1.default.gray('None') +
+                    '  ' +
+                    chalk_1.default.bold.white('Esc ') +
+                    chalk_1.default.gray('Clear');
         }
     }
     else {
         // No filter applied
         if (totalVisualItems > maxVisibleItems) {
-            statusLine = chalk_1.default.gray(`Showing ${chalk_1.default.white(startItem)}-${chalk_1.default.white(endItem)} of ${chalk_1.default.white(totalPackages)} packages`) +
-                '  ' +
-                chalk_1.default.bold.white('Enter ') + chalk_1.default.gray('Confirm');
+            statusLine =
+                chalk_1.default.gray(`Showing ${chalk_1.default.white(startItem)}-${chalk_1.default.white(endItem)} of ${chalk_1.default.white(totalPackages)} packages`) +
+                    '  ' +
+                    chalk_1.default.bold.white('Enter ') +
+                    chalk_1.default.gray('Confirm');
         }
         else {
-            statusLine = chalk_1.default.gray(`Showing all ${chalk_1.default.white(totalPackages)} packages`) +
-                '  ' +
-                chalk_1.default.bold.white('Enter ') + chalk_1.default.gray('Confirm');
+            statusLine =
+                chalk_1.default.gray(`Showing all ${chalk_1.default.white(totalPackages)} packages`) +
+                    '  ' +
+                    chalk_1.default.bold.white('Enter ') +
+                    chalk_1.default.gray('Confirm');
         }
     }
+    if (auditProgress && auditProgress.total > 0) {
+        const auditLabel = auditProgress.isRunning
+            ? `Audit ${auditProgress.completed}/${auditProgress.total}`
+            : `Audit ${auditProgress.total}/${auditProgress.total}`;
+        statusLine += '  ' + (0, themes_colors_1.getThemeColor)('textSecondary')(auditLabel);
+    }
     // Pad status line to terminal width to clear any leftover characters
     const statusLineFull = '  ' + statusLine;
     const statusPadding = Math.max(0, terminalWidth - utils_1.VersionUtils.getVisualLength(statusLineFull));
@@ -335,7 +426,7 @@ function renderInterface(states, currentRow, scrollOffset, maxVisibleItems, forc
                 output.push(renderSpacer());
             }
             else if (item.type === 'package') {
-                const line = renderPackageLine(item.state, item.originalIndex, item.originalIndex === currentRow, terminalWidth);
+                const line = renderPackageLine(item.state, item.originalIndex, item.originalIndex === currentRow, terminalWidth, options);
                 output.push(line);
             }
         }
@@ -343,11 +434,20 @@ function renderInterface(states, currentRow, scrollOffset, maxVisibleItems, forc
     else {
         // Fallback to flat rendering (legacy mode)
         for (let i = scrollOffset; i < Math.min(scrollOffset + maxVisibleItems, states.length); i++) {
-            const line = renderPackageLine(states[i], i, i === currentRow, terminalWidth);
+            const line = renderPackageLine(states[i], i, i === currentRow, terminalWidth, options);
             output.push(line);
         }
     }
-    return output;
+    if (loadingProgress?.isLoading) {
+        const loadingLabel = `Loading packages... (${loadingProgress.resolved}/${loadingProgress.total} checked)`;
+        const failedLabel = loadingProgress.failed > 0 ? ` ${loadingProgress.failed} unavailable` : '';
+        const loadingLine = '  ' +
+            (0, themes_colors_1.getThemeColor)('textSecondary')(loadingLabel) +
+            (failedLabel ? chalk_1.default.yellow(failedLabel) : '');
+        const loadingPadding = Math.max(0, terminalWidth - utils_1.VersionUtils.getVisualLength(loadingLine));
+        output.push(loadingLine + ' '.repeat(loadingPadding));
+    }
+    return output.map((line) => padLineToWidth(line, terminalWidth));
 }
 /**
  * Render packages table

package/dist/ui/state/filter-manager.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FilterManager = void 0;
+const vulnerability_1 = require("../presenters/vulnerability");
 class FilterManager {
     constructor() {
         this.state = {
@@ -10,6 +11,7 @@ class FilterManager {
             showDevDependencies: true,
             showPeerDependencies: true,
             showOptionalDependencies: true,
+            showOnlyVulnerable: false,
         };
     }
     getState() {
@@ -60,6 +62,12 @@ class FilterManager {
                 break;
         }
     }
+    toggleVulnerableFilter() {
+        this.state.showOnlyVulnerable = !this.state.showOnlyVulnerable;
+    }
+    isVulnerableFilterActive() {
+        return this.state.showOnlyVulnerable;
+    }
     getActiveFilterLabel() {
         const activeTypes = [];
         if (this.state.showDependencies)
@@ -72,9 +80,10 @@ class FilterManager {
             activeTypes.push('Optional');
         if (activeTypes.length === 0)
             return 'None';
-        return activeTypes.join(', ');
+        const label = activeTypes.join(', ');
+        return this.state.showOnlyVulnerable ? label + ' (vulnerable only)' : label;
     }
-    getFilteredStates(allStates) {
+    getFilteredStates(allStates, options = {}) {
         let filtered = allStates;
         // Apply text filter
         if (this.state.filterQuery) {
@@ -96,6 +105,12 @@ class FilterManager {
                     return true;
             }
         });
+        // Apply vulnerability filter
+        if (this.state.showOnlyVulnerable) {
+            filtered = filtered.filter((state) => (0, vulnerability_1.shouldDisplayVulnerabilityForDependency)(state.type, options) &&
+                !!state.vulnerability &&
+                state.vulnerability.count > 0);
+        }
         return filtered;
     }
 }

package/dist/ui/state/modal-manager.js

@@ -7,6 +7,8 @@ class ModalManager {
             showInfoModal: false,
             infoModalRow: -1,
             isLoadingModalInfo: false,
+            infoModalScrollOffset: 0,
+            infoModalSessionId: 0,
         };
     }
     getState() {
@@ -21,24 +23,64 @@ class ModalManager {
     isLoading() {
         return this.state.isLoadingModalInfo;
     }
+    getScrollOffset() {
+        return this.state.infoModalScrollOffset;
+    }
+    getSessionId() {
+        return this.state.infoModalSessionId;
+    }
+    clampScrollOffset(maxOffset) {
+        const nextOffset = Math.max(0, Math.min(this.state.infoModalScrollOffset, maxOffset));
+        if (nextOffset === this.state.infoModalScrollOffset) {
+            return false;
+        }
+        this.state.infoModalScrollOffset = nextOffset;
+        return true;
+    }
+    resetScroll() {
+        this.state.infoModalScrollOffset = 0;
+    }
+    scrollModalUp() {
+        if (this.state.infoModalScrollOffset > 0) {
+            this.state.infoModalScrollOffset--;
+            return true;
+        }
+        return false;
+    }
+    scrollModalDown(maxOffset) {
+        if (this.state.infoModalScrollOffset < maxOffset) {
+            this.state.infoModalScrollOffset++;
+            return true;
+        }
+        return false;
+    }
     toggleInfoModal(currentRow) {
         if (this.state.showInfoModal) {
             // Close the modal
             this.closeInfoModal();
+            return this.state.infoModalSessionId;
         }
-        else {
-            // Open the modal for the current package
-            this.state.showInfoModal = true;
-            this.state.infoModalRow = currentRow;
-        }
+        // Open the modal for the current package
+        this.state.showInfoModal = true;
+        this.state.infoModalRow = currentRow;
+        this.state.infoModalScrollOffset = 0;
+        this.state.isLoadingModalInfo = false;
+        this.state.infoModalSessionId += 1;
+        return this.state.infoModalSessionId;
     }
     closeInfoModal() {
         this.state.showInfoModal = false;
         this.state.infoModalRow = -1;
         this.state.isLoadingModalInfo = false;
+        this.state.infoModalScrollOffset = 0;
+        this.state.infoModalSessionId += 1;
     }
-    setModalLoading(isLoading) {
+    setModalLoading(isLoading, sessionId) {
+        if (sessionId !== undefined && sessionId !== this.state.infoModalSessionId) {
+            return false;
+        }
         this.state.isLoadingModalInfo = isLoading;
+        return true;
     }
 }
 exports.ModalManager = ModalManager;

package/dist/ui/state/state-manager.js

@@ -42,6 +42,7 @@ class StateManager {
             showInfoModal: modalState.showInfoModal,
             infoModalRow: modalState.infoModalRow,
             isLoadingModalInfo: modalState.isLoadingModalInfo,
+            infoModalScrollOffset: modalState.infoModalScrollOffset,
             filterMode: filterState.filterMode,
             filterQuery: filterState.filterQuery,
             showThemeModal: themeState.showThemeModal,
@@ -68,7 +69,7 @@ class StateManager {
             return;
         const currentRow = this.navigationManager.getCurrentRow();
         const currentState = states[currentRow];
-        if (!currentState)
+        if (!currentState || currentState.loadState !== 'ready')
             return;
         if (direction === 'left') {
             // Move selection left with wraparound: latest -> range -> none -> latest
@@ -122,7 +123,7 @@ class StateManager {
         if (states.length === 0)
             return;
         states.forEach((state) => {
-            if (state.hasRangeUpdate) {
+            if (state.loadState === 'ready' && state.hasRangeUpdate) {
                 state.selectedOption = 'range';
             }
         });
@@ -131,10 +132,10 @@ class StateManager {
         if (states.length === 0)
             return;
         states.forEach((state) => {
-            if (state.hasMajorUpdate) {
+            if (state.loadState === 'ready' && state.hasMajorUpdate) {
                 state.selectedOption = 'latest';
             }
-            else if (state.hasRangeUpdate) {
+            else if (state.loadState === 'ready' && state.hasRangeUpdate) {
                 state.selectedOption = 'range';
             }
         });
@@ -143,22 +144,48 @@ class StateManager {
         if (states.length === 0)
             return;
         states.forEach((state) => {
-            state.selectedOption = 'none';
+            if (state.loadState === 'ready') {
+                state.selectedOption = 'none';
+            }
         });
     }
     // Modal delegation
     toggleInfoModal() {
         const currentRow = this.navigationManager.getCurrentRow();
-        this.modalManager.toggleInfoModal(currentRow);
+        const sessionId = this.modalManager.toggleInfoModal(currentRow);
         this.renderState.forceFullRender = true;
+        return sessionId;
     }
     closeInfoModal() {
         this.modalManager.closeInfoModal();
         this.renderState.forceFullRender = true;
     }
-    setModalLoading(isLoading) {
-        this.modalManager.setModalLoading(isLoading);
-        this.renderState.forceFullRender = true;
+    setModalLoading(isLoading, sessionId) {
+        const updated = this.modalManager.setModalLoading(isLoading, sessionId);
+        if (updated) {
+            this.renderState.forceFullRender = true;
+        }
+        return updated;
+    }
+    getInfoModalSessionId() {
+        return this.modalManager.getSessionId();
+    }
+    resetInfoModalScroll() {
+        this.modalManager.resetScroll();
+    }
+    scrollInfoModalUp() {
+        return this.modalManager.scrollModalUp();
+        // Don't force full render — modal viewport handles its own overwrite
+    }
+    scrollInfoModalDown(maxOffset) {
+        return this.modalManager.scrollModalDown(maxOffset);
+        // Don't force full render — modal viewport handles its own overwrite
+    }
+    getInfoModalScrollOffset() {
+        return this.modalManager.getScrollOffset();
+    }
+    clampInfoModalScrollOffset(maxOffset) {
+        return this.modalManager.clampScrollOffset(maxOffset);
     }
     // Filter delegation
     enterFilterMode(preserveQuery = false) {
@@ -188,8 +215,8 @@ class StateManager {
         this.navigationManager.setCurrentRow(0);
         this.navigationManager.setScrollOffset(0);
     }
-    getFilteredStates(allStates) {
-        return this.filterManager.getFilteredStates(allStates);
+    getFilteredStates(allStates, options) {
+        return this.filterManager.getFilteredStates(allStates, options);
     }
     toggleDependencyTypeFilter(type) {
         this.filterManager.toggleDependencyType(type);
@@ -198,6 +225,14 @@ class StateManager {
         this.navigationManager.setScrollOffset(0);
         // Use incremental render (no blink)
     }
+    toggleVulnerableFilter() {
+        this.filterManager.toggleVulnerableFilter();
+        this.navigationManager.setCurrentRow(0);
+        this.navigationManager.setScrollOffset(0);
+    }
+    isVulnerableFilterActive() {
+        return this.filterManager.isVulnerableFilterActive();
+    }
     getActiveFilterLabel() {
         return this.filterManager.getActiveFilterLabel();
     }
@@ -221,7 +256,9 @@ class StateManager {
         this.renderState.forceFullRender = isInitial;
     }
     resetForResize(totalFilteredItems) {
-        const totalItems = totalFilteredItems || this.renderState.renderableItems.length || this.displayState.maxVisibleItems;
+        const totalItems = totalFilteredItems ||
+            this.renderState.renderableItems.length ||
+            this.displayState.maxVisibleItems;
         this.navigationManager.resetForResize(totalItems);
         this.renderState.forceFullRender = true;
     }