inup 1.4.10 → 1.5.0

package/dist/interactive-ui.js

@@ -37,91 +37,154 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.InteractiveUI = void 0;
-const inquirer_1 = __importDefault(require("inquirer"));
 const chalk_1 = __importDefault(require("chalk"));
 const semver = __importStar(require("semver"));
-const keypress = require('keypress');
 const ui_1 = require("./ui");
-const services_1 = require("./services");
+const controllers_1 = require("./ui/controllers");
 const themes_1 = require("./ui/themes");
 const themes_colors_1 = require("./ui/themes-colors");
+const DEFAULT_VULNERABILITY_DISPLAY_OPTIONS = {
+    showPeerDependencyVulnerabilities: false,
+    showOptionalDependencyVulnerabilities: false,
+};
+function normalizeVulnerabilityDisplayOptions(options) {
+    return {
+        showPeerDependencyVulnerabilities: options?.showPeerDependencyVulnerabilities ??
+            DEFAULT_VULNERABILITY_DISPLAY_OPTIONS.showPeerDependencyVulnerabilities,
+        showOptionalDependencyVulnerabilities: options?.showOptionalDependencyVulnerabilities ??
+            DEFAULT_VULNERABILITY_DISPLAY_OPTIONS.showOptionalDependencyVulnerabilities,
+    };
+}
 class InteractiveUI {
-    constructor(packageManager) {
+    constructor(packageManager, options) {
+        this.vulnerabilityAuditController = new controllers_1.VulnerabilityAuditController();
+        this.packageInfoModalController = new controllers_1.PackageInfoModalController();
         this.renderer = new ui_1.UIRenderer();
         this.packageManager = packageManager;
+        this.options = normalizeVulnerabilityDisplayOptions(options);
     }
     async displayPackagesTable(packages) {
         console.log(this.renderer.renderPackagesTable(packages));
     }
     async selectPackagesToUpgrade(packages, previousSelections) {
-        const outdatedPackages = packages.filter((p) => p.isOutdated);
-        if (outdatedPackages.length === 0) {
+        const selectionStates = this.createSelectionStates(packages, previousSelections, false);
+        if (selectionStates.length === 0) {
             return [];
         }
-        // Deduplicate packages by name and version specifier, but track all package.json paths
-        const uniquePackages = new Map();
-        for (const pkg of outdatedPackages) {
-            const key = `${pkg.name}@${pkg.currentVersion}@${pkg.type}`;
-            if (!uniquePackages.has(key)) {
-                uniquePackages.set(key, {
-                    pkg,
-                    packageJsonPaths: new Set([pkg.packageJsonPath]),
-                    type: pkg.type,
-                });
-            }
-            else {
-                uniquePackages.get(key).packageJsonPaths.add(pkg.packageJsonPath);
-            }
-        }
-        // Convert to array and sort alphabetically by name (@scoped packages first, then unscoped)
-        const deduplicatedPackages = Array.from(uniquePackages.values()).map(({ pkg, packageJsonPaths, type }) => ({
-            ...pkg,
-            packageJsonPaths: Array.from(packageJsonPaths),
-            type,
-        }));
-        deduplicatedPackages.sort((a, b) => {
-            const aIsScoped = a.name.startsWith('@');
-            const bIsScoped = b.name.startsWith('@');
-            // If one is scoped and the other isn't, scoped comes first
-            if (aIsScoped && !bIsScoped)
-                return -1;
-            if (!aIsScoped && bIsScoped)
-                return 1;
-            // Both scoped or both unscoped - sort alphabetically
-            return a.name.localeCompare(b.name);
-        });
-        // Create selection states for each unique package
-        const selectionStates = deduplicatedPackages.map((pkg) => {
+        const selectedStates = await this.interactiveTableSelector(selectionStates);
+        return this.createUpgradeChoices(selectedStates);
+    }
+    createSelectionStates(packages, previousSelections, includeUpToDate = true) {
+        const relevantPackages = includeUpToDate ? packages : packages.filter((p) => p.isOutdated);
+        const uniquePackages = this.deduplicatePackages(relevantPackages);
+        return Array.from(uniquePackages.values()).map(({ pkg, packageJsonPaths }) => {
             const currentClean = semver.coerce(pkg.currentVersion)?.version || pkg.currentVersion;
             const rangeClean = semver.coerce(pkg.rangeVersion)?.version || pkg.rangeVersion;
             const latestClean = semver.coerce(pkg.latestVersion)?.version || pkg.latestVersion;
-            // Use previous selection if available, otherwise default to 'none'
             const key = `${pkg.name}@${pkg.currentVersion}@${pkg.type}`;
             const previousSelection = previousSelections?.get(key) || 'none';
             return {
                 name: pkg.name,
-                packageJsonPath: pkg.packageJsonPaths[0], // Use first path for display
-                packageJsonPaths: pkg.packageJsonPaths, // Store all paths for upgrading
-                currentVersionSpecifier: pkg.currentVersion, // Keep original with prefix
+                packageJsonPath: pkg.packageJsonPath,
+                packageJsonPaths: Array.from(packageJsonPaths),
+                currentVersionSpecifier: pkg.currentVersion,
                 currentVersion: currentClean,
                 rangeVersion: rangeClean,
                 latestVersion: latestClean,
                 selectedOption: previousSelection,
+                loadState: 'ready',
                 hasRangeUpdate: pkg.hasRangeUpdate,
                 hasMajorUpdate: pkg.hasMajorUpdate,
                 type: pkg.type,
+                vulnerability: this.vulnerabilityAuditController.getCachedSummary(pkg.name, pkg.currentVersion, pkg.type),
+                allVersions: pkg.allVersions,
             };
         });
-        // Use custom interactive table selector (simplified - no grouping)
-        const selectedStates = await this.interactiveTableSelector(selectionStates);
-        // Convert to PackageUpgradeChoice[] - create one choice per package.json path
+    }
+    createPendingSelectionStates(packages, previousSelections) {
+        const uniquePackages = this.deduplicatePackages(packages.map((pkg) => ({
+            ...pkg,
+            rangeVersion: pkg.currentVersion,
+            latestVersion: pkg.currentVersion,
+            isOutdated: false,
+            hasRangeUpdate: false,
+            hasMajorUpdate: false,
+        })));
+        return Array.from(uniquePackages.values()).map(({ pkg, packageJsonPaths }) => {
+            const currentClean = semver.coerce(pkg.currentVersion)?.version || pkg.currentVersion;
+            const key = `${pkg.name}@${pkg.currentVersion}@${pkg.type}`;
+            const previousSelection = previousSelections?.get(key) || 'none';
+            return {
+                name: pkg.name,
+                packageJsonPath: pkg.packageJsonPath,
+                packageJsonPaths: Array.from(packageJsonPaths),
+                currentVersionSpecifier: pkg.currentVersion,
+                currentVersion: currentClean,
+                rangeVersion: 'loading',
+                latestVersion: 'loading',
+                selectedOption: previousSelection,
+                loadState: 'pending',
+                hasRangeUpdate: false,
+                hasMajorUpdate: false,
+                type: pkg.type,
+                vulnerability: this.vulnerabilityAuditController.getCachedSummary(pkg.name, pkg.currentVersion, pkg.type),
+            };
+        });
+    }
+    appendOutdatedBatchToSelectionStates(selectionStates, batch, previousSelections) {
+        const outdatedStates = this.createSelectionStates(batch.flatMap((batchItem) => batchItem.packageInfo).filter((pkg) => pkg.isOutdated), previousSelections, false);
+        if (outdatedStates.length === 0) {
+            return;
+        }
+        const seen = new Set(selectionStates.map((state) => `${state.name}@${state.currentVersionSpecifier}@${state.type}`));
+        outdatedStates.forEach((state) => {
+            const key = `${state.name}@${state.currentVersionSpecifier}@${state.type}`;
+            if (!seen.has(key)) {
+                selectionStates.push(state);
+                seen.add(key);
+            }
+        });
+        this.enqueueSecurityAudit(selectionStates);
+    }
+    async selectPackagesToUpgradeProgressive(selectionStates, progress, attachRefresh) {
+        this.enqueueSecurityAudit(selectionStates);
+        const selectedStates = await this.interactiveTableSelector(selectionStates, progress, attachRefresh);
+        return this.createUpgradeChoices(selectedStates);
+    }
+    enqueueSecurityAudit(selectionStates) {
+        this.vulnerabilityAuditController.enqueueStates(selectionStates, () => this.refreshView?.());
+    }
+    deduplicatePackages(packages) {
+        const uniquePackages = new Map();
+        for (const pkg of packages) {
+            const key = `${pkg.name}@${pkg.currentVersion}@${pkg.type}`;
+            if (!uniquePackages.has(key)) {
+                uniquePackages.set(key, {
+                    pkg,
+                    packageJsonPaths: new Set([pkg.packageJsonPath]),
+                });
+            }
+            else {
+                uniquePackages.get(key).packageJsonPaths.add(pkg.packageJsonPath);
+            }
+        }
+        return new Map(Array.from(uniquePackages.entries()).sort(([, a], [, b]) => {
+            const aIsScoped = a.pkg.name.startsWith('@');
+            const bIsScoped = b.pkg.name.startsWith('@');
+            if (aIsScoped && !bIsScoped)
+                return -1;
+            if (!aIsScoped && bIsScoped)
+                return 1;
+            return a.pkg.name.localeCompare(b.pkg.name);
+        }));
+    }
+    createUpgradeChoices(selectedStates) {
         const choices = [];
         selectedStates
-            .filter((state) => state.selectedOption !== 'none')
+            .filter((state) => state.loadState === 'ready' && state.selectedOption !== 'none')
             .forEach((state) => {
             const targetVersion = state.selectedOption === 'range' ? state.rangeVersion : state.latestVersion;
             const targetVersionWithPrefix = ui_1.VersionUtils.applyVersionPrefix(state.currentVersionSpecifier, targetVersion);
-            // Create a choice for each package.json path where this package appears
             const pathsToUpdate = state.packageJsonPaths || [state.packageJsonPath];
             pathsToUpdate.forEach((packageJsonPath) => {
                 choices.push({
@@ -138,89 +201,162 @@ class InteractiveUI {
     }
     getTerminalHeight() {
         // Check if stdout is a TTY and has rows property
-        if (process.stdout.isTTY && typeof process.stdout.rows === 'number' && process.stdout.rows > 0) {
+        if (process.stdout.isTTY &&
+            typeof process.stdout.rows === 'number' &&
+            process.stdout.rows > 0) {
             return process.stdout.rows;
         }
         return 24; // Fallback default
     }
-    async interactiveTableSelector(selectionStates) {
+    async interactiveTableSelector(selectionStates, loadingProgress, attachRefresh) {
         return new Promise((resolve) => {
-            const states = [...selectionStates];
+            const states = selectionStates;
             const stateManager = new ui_1.StateManager(0, this.getTerminalHeight());
+            let isResolved = false;
+            let ownsAlternateScreen = false;
+            const vulnerabilityDisplayOptions = this.options;
+            const claimInteractiveScreen = () => {
+                if (ownsAlternateScreen) {
+                    return;
+                }
+                ui_1.ConsoleUtils.clearProgress();
+                ui_1.CursorUtils.enterAlternateScreen();
+                ui_1.CursorUtils.clearScreen();
+                ownsAlternateScreen = true;
+            };
+            const releaseInteractiveScreen = () => {
+                if (!ownsAlternateScreen) {
+                    return;
+                }
+                ui_1.CursorUtils.exitAlternateScreen();
+                ownsAlternateScreen = false;
+            };
             // No grouping needed - packages are already filtered by type
             // This simplifies scrolling and avoids rendering issues
             stateManager.setRenderableItems([]);
+            // Track the current max scroll offset for the info modal
+            let infoModalMaxScrollOffset = 0;
+            let previousViewportMode = null;
+            let previousModalViewportLineCount = null;
             const handleAction = (action) => {
                 const uiState = stateManager.getUIState();
-                const filteredStates = stateManager.getFilteredStates(states);
+                const filteredStates = stateManager.getFilteredStates(states, vulnerabilityDisplayOptions);
                 switch (action.type) {
                     case 'navigate_up':
-                        if (!uiState.showInfoModal && !uiState.showThemeModal) {
+                        if (!uiState.showThemeModal) {
                             stateManager.navigateUp(filteredStates.length);
                         }
                         break;
                     case 'navigate_down':
-                        if (!uiState.showInfoModal && !uiState.showThemeModal) {
+                        if (!uiState.showThemeModal) {
                             stateManager.navigateDown(filteredStates.length);
                         }
                         break;
                     case 'select_left':
-                        if (!uiState.showInfoModal && !uiState.showThemeModal) {
+                        if (!uiState.showThemeModal) {
                             stateManager.updateSelection(filteredStates, 'left');
                         }
                         break;
                     case 'select_right':
-                        if (!uiState.showInfoModal && !uiState.showThemeModal) {
+                        if (!uiState.showThemeModal) {
                             stateManager.updateSelection(filteredStates, 'right');
                         }
                         break;
                     case 'bulk_select_minor':
-                        if (!uiState.showInfoModal && !uiState.showThemeModal) {
+                        if (!uiState.showThemeModal) {
                             stateManager.bulkSelectMinor(filteredStates);
                         }
                         break;
                     case 'bulk_select_latest':
-                        if (!uiState.showInfoModal && !uiState.showThemeModal) {
+                        if (!uiState.showThemeModal) {
                             stateManager.bulkSelectLatest(filteredStates);
                         }
                         break;
                     case 'bulk_unselect_all':
-                        if (!uiState.showInfoModal && !uiState.showThemeModal) {
+                        if (!uiState.showThemeModal) {
                             stateManager.bulkUnselectAll(filteredStates);
                         }
                         break;
                     case 'toggle_dep_type_filter':
-                        if (!uiState.showInfoModal && !uiState.showThemeModal) {
+                        if (!uiState.showThemeModal) {
                             stateManager.toggleDependencyTypeFilter(action.depType);
                         }
                         break;
                     case 'toggle_info_modal':
                         if (!uiState.showInfoModal) {
                             // Opening modal - load package info asynchronously
-                            stateManager.toggleInfoModal();
+                            const modalSessionId = stateManager.toggleInfoModal();
                             const currentState = filteredStates[uiState.currentRow];
-                            stateManager.setModalLoading(true);
+                            const canFetchMetadata = currentState?.loadState === 'ready';
+                            stateManager.setModalLoading(canFetchMetadata, modalSessionId);
                             renderInterface();
-                            // Fetch metadata asynchronously
-                            services_1.changelogFetcher.fetchPackageMetadata(currentState.name).then((metadata) => {
-                                if (metadata) {
-                                    currentState.description = metadata.description;
-                                    currentState.homepage = metadata.homepage;
-                                    currentState.repository = metadata.releaseNotes;
-                                    currentState.weeklyDownloads = metadata.weeklyDownloads;
-                                    currentState.author = metadata.author;
-                                    currentState.license = metadata.license;
-                                }
-                                stateManager.setModalLoading(false);
-                                renderInterface();
-                            });
+                            if (currentState && canFetchMetadata) {
+                                this.packageInfoModalController
+                                    .hydrate(currentState)
+                                    .then(() => {
+                                    if (isResolved || stateManager.getInfoModalSessionId() !== modalSessionId)
+                                        return;
+                                    stateManager.setModalLoading(false, modalSessionId);
+                                    renderInterface();
+                                    // Auto-load the first version's release notes
+                                    if (stateManager.getInfoModalSessionId() === modalSessionId &&
+                                        this.packageInfoModalController.getVersionCount(currentState) > 0) {
+                                        this.packageInfoModalController.loadVersionAtIndex(currentState, 0, () => {
+                                            if (!isResolved)
+                                                renderInterface();
+                                        });
+                                    }
+                                })
+                                    .catch(() => {
+                                    if (isResolved || stateManager.getInfoModalSessionId() !== modalSessionId)
+                                        return;
+                                    stateManager.setModalLoading(false, modalSessionId);
+                                    renderInterface();
+                                });
+                            }
                         }
                         else {
-                            // Closing modal
+                            // Closing modal - cancel in-flight fetches
+                            this.packageInfoModalController.cancel();
                             stateManager.toggleInfoModal();
                             renderInterface();
                         }
                         break;
+                    case 'scroll_info_modal_up':
+                        if (!stateManager.scrollInfoModalUp()) {
+                            return;
+                        }
+                        break;
+                    case 'scroll_info_modal_down':
+                        if (!stateManager.scrollInfoModalDown(infoModalMaxScrollOffset)) {
+                            return;
+                        }
+                        break;
+                    case 'navigate_info_modal_version':
+                        {
+                            if (uiState.infoModalRow >= 0 && uiState.infoModalRow < filteredStates.length) {
+                                const currentState = filteredStates[uiState.infoModalRow];
+                                const newIndex = this.packageInfoModalController.navigateVersion(currentState, action.direction);
+                                if (newIndex >= 0) {
+                                    // Reset scroll to top when switching versions
+                                    stateManager.resetInfoModalScroll();
+                                    // Load the version if not already loaded
+                                    if (!this.packageInfoModalController.isVersionLoaded(currentState, newIndex)) {
+                                        this.packageInfoModalController.loadVersionAtIndex(currentState, newIndex, () => {
+                                            if (!isResolved)
+                                                renderInterface();
+                                        });
+                                    }
+                                }
+                                else {
+                                    return;
+                                }
+                            }
+                            else {
+                                return;
+                            }
+                        }
+                        break;
                     case 'enter_filter_mode':
                         stateManager.enterFilterMode(action.preserveQuery);
                         break;
@@ -268,7 +404,19 @@ class InteractiveUI {
                     case 'theme_confirm':
                         stateManager.confirmTheme();
                         break;
+                    case 'trigger_audit_scan':
+                        if (!uiState.showThemeModal) {
+                            const auditProgress = this.vulnerabilityAuditController.getProgress();
+                            if (auditProgress.hasData) {
+                                stateManager.toggleVulnerableFilter();
+                            }
+                            else if (!auditProgress.isRunning) {
+                                this.enqueueSecurityAudit(states);
+                            }
+                        }
+                        break;
                     case 'cancel':
+                        this.packageInfoModalController.cancel();
                         handleCancel();
                         return;
                 }
@@ -277,40 +425,79 @@ class InteractiveUI {
                 }
             };
             const handleConfirm = (selectedStates) => {
-                // Reset terminal colors
-                process.stdout.write((0, themes_colors_1.getTerminalResetCode)());
-                ui_1.CursorUtils.show();
-                // Clean up listeners
-                if (process.stdin.setRawMode) {
-                    process.stdin.setRawMode(false);
-                }
-                process.stdin.removeAllListeners('keypress');
-                process.stdin.pause();
-                process.removeAllListeners('SIGWINCH');
-                resolve(selectedStates);
+                finalizeSelection(selectedStates);
             };
             const handleCancel = () => {
-                // Reset terminal colors
+                finalizeSelection(states.map((s) => ({ ...s, selectedOption: 'none' })));
+            };
+            const inputHandler = new ui_1.InputHandler(stateManager, handleAction, handleConfirm, handleCancel);
+            const resetAnsiPattern = /\x1b\[(?:0|49)m/g;
+            const packageListRenderOptions = {
+                showPeerDependencyVulnerabilities: this.options.showPeerDependencyVulnerabilities,
+                showOptionalDependencyVulnerabilities: this.options.showOptionalDependencyVulnerabilities,
+            };
+            const keypressHandler = (str, key) => inputHandler.handleKeypress(str, key, states);
+            const buildRemainingViewport = (terminalWidth, terminalHeight, usedLines) => {
+                const remainingLines = Math.max(0, terminalHeight - usedLines);
+                const blankLine = ' '.repeat(terminalWidth);
+                return Array.from({ length: remainingLines }, () => blankLine);
+            };
+            const applyBackgroundToLine = (line, bgCode) => `${bgCode}${line.replace(resetAnsiPattern, (match) => `${match}${bgCode}`)}${(0, themes_colors_1.getTerminalResetCode)()}`;
+            const writeFrame = (lines, bgCode) => {
+                if (lines.length === 0) {
+                    return;
+                }
+                process.stdout.write(lines.map((line) => applyBackgroundToLine(line, bgCode)).join('\n'));
+            };
+            const buildModalHeaderLines = (shortcutLabel) => [
+                '  ' + chalk_1.default.bold.magenta('🚀 inup'),
+                '',
+                '  ' + shortcutLabel,
+                '',
+            ];
+            const renderViewport = (lines, terminalWidth, terminalHeight, bgCode) => {
+                const viewportLines = [
+                    ...lines,
+                    ...buildRemainingViewport(terminalWidth, terminalHeight, lines.length),
+                ];
+                writeFrame(viewportLines, bgCode);
+            };
+            const renderModalViewport = (mode, shortcutLabel, modalLines, terminalWidth, terminalHeight, bgCode) => {
+                const viewportLineCount = buildModalHeaderLines(shortcutLabel).length + modalLines.length;
+                const shouldClearBeforeRender = previousViewportMode !== mode || previousModalViewportLineCount !== viewportLineCount;
+                if (shouldClearBeforeRender) {
+                    ui_1.CursorUtils.clearScreen();
+                    ui_1.CursorUtils.hide();
+                }
+                renderViewport([...buildModalHeaderLines(shortcutLabel), ...modalLines], terminalWidth, terminalHeight, bgCode);
+                previousViewportMode = mode;
+                previousModalViewportLineCount = viewportLineCount;
+                stateManager.markRendered([]);
+            };
+            let cleanupInteractiveSession = () => {
                 process.stdout.write((0, themes_colors_1.getTerminalResetCode)());
                 ui_1.CursorUtils.show();
-                // Clean up listeners
-                if (process.stdin.setRawMode) {
-                    process.stdin.setRawMode(false);
-                }
-                process.stdin.removeAllListeners('keypress');
+                process.stdin.off('keypress', keypressHandler);
                 process.stdin.pause();
-                process.removeAllListeners('SIGWINCH');
-                resolve(states.map((s) => ({ ...s, selectedOption: 'none' })));
+                process.off('SIGWINCH', handleResize);
+                this.refreshView = undefined;
+            };
+            const finalizeSelection = (selectedStates) => {
+                isResolved = true;
+                this.packageInfoModalController.cancel();
+                releaseInteractiveScreen();
+                cleanupInteractiveSession();
+                resolve(selectedStates);
             };
-            const inputHandler = new ui_1.InputHandler(stateManager, handleAction, handleConfirm, handleCancel);
             const renderInterface = () => {
                 const uiState = stateManager.getUIState();
-                const filteredStates = stateManager.getFilteredStates(states);
+                const filteredStates = stateManager.getFilteredStates(states, vulnerabilityDisplayOptions);
+                const auditProgress = this.vulnerabilityAuditController.getProgress();
                 // Apply terminal background color
                 const bgCode = (0, themes_colors_1.getTerminalBgColorCode)();
                 process.stdout.write(bgCode);
                 if (uiState.forceFullRender) {
-                    console.clear();
+                    ui_1.CursorUtils.clearScreen();
                     ui_1.CursorUtils.hide();
                 }
                 else {
@@ -321,62 +508,48 @@ class InteractiveUI {
                     const terminalWidth = process.stdout.columns || 80;
                     const terminalHeight = this.getTerminalHeight();
                     const themeManager = stateManager.getThemeManager();
-                    // Render header
-                    const headerLines = [];
-                    headerLines.push('  ' + chalk_1.default.bold.magenta('🚀 inup'));
-                    headerLines.push('');
-                    headerLines.push('  ' +
-                        chalk_1.default.bold.white('T ') +
-                        chalk_1.default.gray('/ Esc Exit theme selector'));
-                    headerLines.push('');
-                    headerLines.forEach((line) => console.log(line));
                     const modalLines = this.renderer.renderThemeSelectorModal(themeManager.getCurrentTheme(), themeManager.getPreviewTheme(), terminalWidth, terminalHeight);
-                    modalLines.forEach((line) => console.log(line));
-                    // Clear any remaining lines from previous render
-                    ui_1.CursorUtils.clearToEndOfScreen();
-                    stateManager.markRendered([]);
+                    renderModalViewport('theme-modal', chalk_1.default.bold.white('T ') + chalk_1.default.gray('/ Esc Exit theme selector'), modalLines, terminalWidth, terminalHeight, bgCode);
                 }
-                else if (uiState.showInfoModal && uiState.infoModalRow >= 0 && uiState.infoModalRow < filteredStates.length) {
+                else if (uiState.showInfoModal &&
+                    uiState.infoModalRow >= 0 &&
+                    uiState.infoModalRow < filteredStates.length) {
                     const selectedState = filteredStates[uiState.infoModalRow];
                     const terminalWidth = process.stdout.columns || 80;
                     const terminalHeight = this.getTerminalHeight();
-                    // Render header
-                    const headerLines = [];
-                    headerLines.push('  ' + chalk_1.default.bold.magenta('🚀 inup'));
-                    headerLines.push('');
-                    headerLines.push('  ' +
-                        chalk_1.default.bold.white('I / Esc ') +
-                        chalk_1.default.gray('Exit this view'));
-                    headerLines.push('');
-                    headerLines.forEach((line) => console.log(line));
                     if (uiState.isLoadingModalInfo) {
                         // Show loading state
-                        const modalLines = this.renderer.renderPackageInfoLoading(selectedState, terminalWidth, terminalHeight);
-                        modalLines.forEach((line) => console.log(line));
+                        const result = this.renderer.renderPackageInfoLoading(selectedState, terminalWidth, Math.max(8, terminalHeight - 4));
+                        infoModalMaxScrollOffset = result.maxScrollOffset;
+                        renderModalViewport('info-modal', chalk_1.default.bold.white('I / Esc ') + chalk_1.default.gray('Exit this view'), result.lines, terminalWidth, terminalHeight, bgCode);
                     }
                     else {
-                        // Show full info
-                        const modalLines = this.renderer.renderPackageInfoModal(selectedState, terminalWidth, terminalHeight);
-                        modalLines.forEach((line) => console.log(line));
+                        // Show full info with scroll support
+                        const result = this.renderer.renderPackageInfoModal(selectedState, terminalWidth, Math.max(8, terminalHeight - 4), uiState.infoModalScrollOffset);
+                        infoModalMaxScrollOffset = result.maxScrollOffset;
+                        stateManager.clampInfoModalScrollOffset(infoModalMaxScrollOffset);
+                        const scrollHint = result.usesInternalScroll && result.maxScrollOffset > 0
+                            ? chalk_1.default.bold.white('↑/↓ ') + chalk_1.default.gray('Scroll  ·  ')
+                            : '';
+                        renderModalViewport('info-modal', scrollHint +
+                            chalk_1.default.bold.white('←/→ ') +
+                            chalk_1.default.gray('Version  ·  ') +
+                            chalk_1.default.bold.white('I / Esc ') +
+                            chalk_1.default.gray('Exit this view'), result.lines, terminalWidth, terminalHeight, bgCode);
                     }
-                    // Clear any remaining lines from previous render
-                    ui_1.CursorUtils.clearToEndOfScreen();
-                    stateManager.markRendered([]);
                 }
                 else {
                     // Normal list view (flat rendering - no grouping)
                     const terminalWidth = process.stdout.columns || 80;
+                    const terminalHeight = this.getTerminalHeight();
                     const activeFilterLabel = stateManager.getActiveFilterLabel();
                     const lines = this.renderer.renderInterface(filteredStates, uiState.currentRow, uiState.scrollOffset, uiState.maxVisibleItems, uiState.forceFullRender, [], // No renderable items - use flat rendering
                     activeFilterLabel, // Show current dependency type filter state
                     this.packageManager, // Pass package manager info for header
-                    uiState.filterMode, uiState.filterQuery, states.length, terminalWidth);
-                    // Print all lines
-                    lines.forEach((line) => console.log(line));
-                    // Clear any remaining lines from previous render
-                    if (!uiState.forceFullRender) {
-                        ui_1.CursorUtils.clearToEndOfScreen();
-                    }
+                    uiState.filterMode, uiState.filterQuery, states.length, terminalWidth, loadingProgress, auditProgress, packageListRenderOptions);
+                    renderViewport(lines, terminalWidth, terminalHeight, bgCode);
+                    previousViewportMode = 'list';
+                    previousModalViewportLineCount = null;
                     stateManager.markRendered(lines);
                 }
                 stateManager.setInitialRender(false);
@@ -389,27 +562,41 @@ class InteractiveUI {
             };
             // Setup keypress handling
             try {
-                keypress(process.stdin);
-                if (process.stdin.setRawMode) {
-                    process.stdin.setRawMode(true);
-                }
-                process.stdin.resume();
-                process.stdin.on('keypress', (str, key) => inputHandler.handleKeypress(str, key, states));
+                claimInteractiveScreen();
+                this.refreshView = () => {
+                    if (!isResolved) {
+                        renderInterface();
+                    }
+                };
+                attachRefresh?.(() => {
+                    if (!isResolved) {
+                        renderInterface();
+                    }
+                });
+                const keypressSession = ui_1.TerminalInput.startKeypressSession(keypressHandler);
+                const previousCleanup = cleanupInteractiveSession;
+                cleanupInteractiveSession = () => {
+                    keypressSession.close();
+                    previousCleanup();
+                };
                 // Setup resize handler
                 process.on('SIGWINCH', handleResize);
                 // Update terminal height directly before initial render to ensure correct dimensions
                 // This handles cases where process.stdout.rows might not be accurate at startup
                 const currentHeight = this.getTerminalHeight();
                 if (stateManager.updateTerminalHeight(currentHeight)) {
-                    const initialFiltered = stateManager.getFilteredStates(states);
+                    const initialFiltered = stateManager.getFilteredStates(states, vulnerabilityDisplayOptions);
                     stateManager.resetForResize(initialFiltered.length);
                 }
                 // Initial render
                 renderInterface();
+                this.enqueueSecurityAudit(states);
             }
             catch (error) {
+                releaseInteractiveScreen();
                 // Reset terminal colors
                 process.stdout.write((0, themes_colors_1.getTerminalResetCode)());
+                this.refreshView = undefined;
                 // Fallback to simple interface if raw mode fails
                 console.log(chalk_1.default.yellow('Raw mode not available, using fallback interface...'));
                 resolve(states);
@@ -419,32 +606,27 @@ class InteractiveUI {
     async confirmUpgrade(choices) {
         console.log(this.renderer.renderConfirmation(choices));
         return new Promise((resolve) => {
+            let cleanupConfirmationSession = () => {
+                ui_1.CursorUtils.show();
+            };
             const handleConfirm = (confirmed) => {
+                cleanupConfirmationSession();
                 resolve(confirmed);
             };
             const inputHandler = new ui_1.ConfirmationInputHandler(handleConfirm);
+            const keypressHandler = (str, key) => inputHandler.handleKeypress(str, key);
             // Setup keypress handling
             try {
-                keypress(process.stdin);
-                if (process.stdin.setRawMode) {
-                    process.stdin.setRawMode(true);
-                }
+                const keypressSession = ui_1.TerminalInput.startKeypressSession(keypressHandler);
+                cleanupConfirmationSession = () => {
+                    keypressSession.close();
+                    ui_1.CursorUtils.show();
+                };
                 ui_1.CursorUtils.hide();
-                process.stdin.resume();
-                process.stdin.on('keypress', (str, key) => inputHandler.handleKeypress(str, key));
             }
             catch (error) {
-                // Fallback to inquirer
-                inquirer_1.default
-                    .prompt([
-                    {
-                        type: 'confirm',
-                        name: 'proceed',
-                        message: 'Proceed with upgrade?',
-                        default: true,
-                    },
-                ])
-                    .then((answer) => resolve(answer.proceed))
+                ui_1.TerminalInput.promptForConfirmation('Proceed with upgrade? [Y/n] ')
+                    .then(resolve)
                     .catch(() => resolve(false));
             }
         });