@kikkimo/claude-launcher 2.5.0 → 3.0.0

package/lib/ui/api-editor.js

@@ -0,0 +1,210 @@
+/**
+ * API Editor Module — Edit API field-by-field with validation
+ * Flow: Select API → Field Menu → Edit Single Field → Save
+ */
+
+const colors = require('./colors');
+const Menu = require('./menu');
+const screen = require('./screen');
+const { showApiSelectionTable } = require('./interactive-table');
+const { simpleInput, waitForKey, selectProvider } = require('./prompts');
+const { getProvider, detectProvider, getSuggestedModels } = require('../presets/providers');
+const { truncateStringToWidth, getStringWidth, padStringToWidth } = require('../utils/string-width');
+const i18n = require('../i18n');
+
+const FIELD_VALUE_MAX_WIDTH = 30;
+const HINT_PROVIDER_NAME_MAX_WIDTH = 20;
+
+/**
+ * Resolve provider id to display name
+ * @param {string} providerId
+ * @returns {string} Display name or raw id as fallback
+ */
+function resolveProviderName(providerId) {
+    const provider = getProvider(providerId);
+    return provider ? provider.name : providerId;
+}
+
+/**
+ * Build field menu options with current values
+ */
+function buildFieldMenuOptions(api) {
+    const fields = [
+        { key: 'name', label: i18n.tSync('api.edit.field_name'), value: api.name || '' },
+        { key: 'provider', label: i18n.tSync('api.edit.field_provider'), value: resolveProviderName(api.provider) },
+        { key: 'baseUrl', label: i18n.tSync('api.edit.field_base_url'), value: api.baseUrl || '' },
+        { key: 'model', label: i18n.tSync('api.edit.field_model'), value: api.model || '' }
+    ];
+
+    const maxLabelWidth = Math.max(...fields.map(f => getStringWidth(f.label)));
+    const options = fields.map(f => {
+        const paddedLabel = padStringToWidth(f.label, maxLabelWidth);
+        const truncatedValue = truncateStringToWidth(f.value, FIELD_VALUE_MAX_WIDTH);
+        return `${paddedLabel}  ${truncatedValue}`;
+    });
+
+    options.push(i18n.tSync('api.edit.back'));
+    return options;
+}
+
+/**
+ * Build hintCallback for field menu — shows mismatch warning or blank
+ */
+function buildFieldMenuHintCallback(api) {
+    return function (_selectedIndex) {
+        const detected = detectProvider(api.baseUrl);
+        if (detected !== api.provider) {
+            const currentName = truncateStringToWidth(resolveProviderName(api.provider), HINT_PROVIDER_NAME_MAX_WIDTH);
+            const detectedName = truncateStringToWidth(resolveProviderName(detected), HINT_PROVIDER_NAME_MAX_WIDTH);
+            const line1 = i18n.tSync('api.edit.provider_url_mismatch');
+            const line2 = i18n.tSync('api.edit.provider_url_mismatch_detail', currentName, detectedName);
+            return `${line1}\n${line2}\n\n`;
+        }
+        return null;
+    };
+}
+
+/**
+ * Edit a single text field (name, baseUrl, model)
+ */
+async function editTextField(apiManager, api, fieldKey, fieldLabel) {
+    const currentValue = api[fieldKey] || '';
+
+    const headerLines = [
+        '',
+        colors.cyan + i18n.tSync('api.edit.current_value', currentValue) + colors.reset,
+        '',
+    ];
+
+    // Show suggested models for model field
+    if (fieldKey === 'model') {
+        const suggested = getSuggestedModels(api.provider);
+        if (suggested.length > 0) {
+            headerLines.push(colors.gray + '  Suggested models: ' + suggested.join(', ') + colors.reset);
+            headerLines.push('');
+        }
+    }
+
+    screen.render(headerLines);
+
+    const input = await simpleInput(colors.green + i18n.tSync('api.edit.new_value') + colors.reset);
+
+    // Cancel check
+    if (input.toLowerCase() === 'exit' || input.toLowerCase() === 'quit') {
+        screen.write(colors.yellow + i18n.tSync('api.edit.cancelled') + colors.reset + '\n');
+        await waitForKey(i18n.tSync('ui.general.press_any_key_continue'));
+        return null;
+    }
+
+    // Attempt save
+    try {
+        const updated = apiManager.updateApiField(api.id, fieldKey, input);
+
+        // Success message
+        screen.write(colors.green + i18n.tSync('api.edit.success', fieldLabel) + colors.reset + '\n');
+
+        // baseUrl mismatch warning on same screen
+        if (fieldKey === 'baseUrl') {
+            const detected = detectProvider(input);
+            if (detected !== updated.provider) {
+                const detectedName = resolveProviderName(detected);
+                const currentName = resolveProviderName(updated.provider);
+                screen.write(colors.yellow + i18n.tSync('api.edit.url_provider_hint', detectedName, currentName) + colors.reset + '\n');
+            }
+        }
+
+        await waitForKey(i18n.tSync('ui.general.press_any_key_continue'));
+        return updated;
+    } catch (error) {
+        screen.write(colors.red + '❌ ' + error.message + colors.reset + '\n');
+        // Re-prompt — stay in field edit
+        return await editTextField(apiManager, api, fieldKey, fieldLabel);
+    }
+}
+
+/**
+ * Edit provider field via selectProvider() helper
+ */
+async function editProviderField(apiManager, api) {
+    screen.render([
+        '',
+        colors.cyan + i18n.tSync('api.edit.current_value', resolveProviderName(api.provider)) + colors.reset,
+        '',
+    ]);
+
+    const result = await selectProvider({ title: null, showNote: false });
+
+    if (!result) {
+        screen.write(colors.yellow + i18n.tSync('api.edit.cancelled') + colors.reset + '\n');
+        await waitForKey(i18n.tSync('ui.general.press_any_key_continue'));
+        return null;
+    }
+
+    try {
+        const updated = apiManager.updateApiField(api.id, 'provider', result.id);
+        screen.write(colors.green + i18n.tSync('api.edit.success', i18n.tSync('api.edit.field_provider')) + colors.reset + '\n');
+        await waitForKey(i18n.tSync('ui.general.press_any_key_continue'));
+        return updated;
+    } catch (error) {
+        screen.write(colors.red + '❌ ' + error.message + colors.reset + '\n');
+        await waitForKey(i18n.tSync('ui.general.press_any_key_continue'));
+        return null;
+    }
+}
+
+/**
+ * Main edit API flow
+ * @param {Object} apiManager - ApiManager instance
+ */
+async function editApi(apiManager) {
+    // Step 1: Select API
+    const apis = apiManager.getApis();
+    const selectedApi = await showApiSelectionTable(
+        apis,
+        i18n.tSync('api.edit.select_api'),
+        'edit'
+    );
+
+    if (!selectedApi) return;
+
+    // Step 2: Field menu loop
+    let currentApi = selectedApi;
+    const fieldMenu = new Menu();
+
+    while (true) {
+        fieldMenu.setOptions(buildFieldMenuOptions(currentApi));
+        const hintCallback = buildFieldMenuHintCallback(currentApi);
+        const choice = await fieldMenu.navigate(null, hintCallback);
+
+        // Esc or Back
+        if (choice === -1 || choice === 4) {
+            return;
+        }
+
+        // Step 3: Edit selected field
+        const fieldKeys = ['name', 'provider', 'baseUrl', 'model'];
+        const fieldLabels = [
+            i18n.tSync('api.edit.field_name'),
+            i18n.tSync('api.edit.field_provider'),
+            i18n.tSync('api.edit.field_base_url'),
+            i18n.tSync('api.edit.field_model')
+        ];
+
+        let updated = null;
+        if (choice === 1) {
+            // Provider — uses selectProvider() not simpleInput()
+            updated = await editProviderField(apiManager, currentApi);
+        } else if (choice >= 0 && choice < 4) {
+            updated = await editTextField(apiManager, currentApi, fieldKeys[choice], fieldLabels[choice]);
+        }
+
+        if (updated) {
+            currentApi = updated;
+        }
+    }
+}
+
+module.exports = {
+    editApi,
+    resolveProviderName
+};

package/lib/ui/interactive-table.js

@@ -3,70 +3,156 @@
  */
 
 const colors = require('./colors');
+const screen = require('./screen');
 const { maskApiToken } = require('../validators');
 const { decrypt } = require('../crypto');
 const i18n = require('../i18n');
 const { padStringToWidth } = require('../utils/string-width');
 const stdinManager = require('../utils/stdin-manager');
 
+/**
+ * Calculate pagination parameters from terminal dimensions and API count.
+ * Pure function — no side effects, no I/O.
+ */
+function calculatePagination(apiCount, terminalRows, isSwitchWithActive, isLegacyOverflow = false) {
+    const warningLine = isLegacyOverflow ? 1 : 0;
+    const fixedOverhead = (isSwitchWithActive ? 16 : 10) + warningLine;
+    const linesPerItem = 7;
+    const itemsPerPage = Math.max(1, Math.floor((terminalRows - fixedOverhead) / linesPerItem));
+    const totalPages = Math.ceil(apiCount / itemsPerPage);
+    return { itemsPerPage, totalPages };
+}
+
+/**
+ * Initialize pagination state: current page and per-page selection memory.
+ * For switch mode, starts on the page containing activeIndex.
+ */
+function initPaginationState(itemsPerPage, totalPages, activeIndex, actionType, apiCount) {
+    const pageSelections = new Array(totalPages).fill(0);
+    let currentPage = 0;
+
+    if (actionType === 'switch' && activeIndex >= 0 && activeIndex < apiCount) {
+        currentPage = Math.floor(activeIndex / itemsPerPage);
+        pageSelections[currentPage] = activeIndex - currentPage * itemsPerPage;
+    }
+
+    return { currentPage, pageSelections };
+}
+
+/**
+ * Pure state transition for page key presses.
+ * Returns updated state for navigation keys, or action object for enter/escape.
+ */
+function handlePageKeyPress(key, state) {
+    const { currentPage, pageSelections, itemsPerPage, totalPages, apiCount } = state;
+    const pageItemCount = Math.min(itemsPerPage, apiCount - currentPage * itemsPerPage);
+    const newSelections = [...pageSelections];
+
+    switch (key) {
+        case 'right':
+            if (totalPages <= 1) return state;
+            return { ...state, currentPage: (currentPage + 1) % totalPages, pageSelections: newSelections };
+        case 'left':
+            if (totalPages <= 1) return state;
+            return { ...state, currentPage: (currentPage - 1 + totalPages) % totalPages, pageSelections: newSelections };
+        case 'up':
+            newSelections[currentPage] = (newSelections[currentPage] - 1 + pageItemCount) % pageItemCount;
+            return { ...state, pageSelections: newSelections };
+        case 'down':
+            newSelections[currentPage] = (newSelections[currentPage] + 1) % pageItemCount;
+            return { ...state, pageSelections: newSelections };
+        case 'enter':
+            return { action: 'select', globalIndex: currentPage * itemsPerPage + newSelections[currentPage] };
+        case 'escape':
+            return { action: 'cancel' };
+        default:
+            return state;
+    }
+}
+
 /**
  * Display simple interactive table for API selection
  */
 async function showApiSelectionTable(apis, title, actionType = 'select', activeIndex = -1, apiManager = null) {
     if (apis.length === 0) {
-        console.clear();
-        console.log('');
-        console.log(colors.yellow + 'ℹ️  ' + i18n.tSync('messages.info.no_apis_info_title') + colors.reset);
-        console.log(colors.gray + '  ' + i18n.tSync('messages.info.apis_removed_or_none') + colors.reset);
-        console.log('');
-        console.log(colors.gray + i18n.tSync('messages.info.press_return_menu') + colors.reset);
+        screen.render([
+            '',
+            colors.yellow + 'ℹ️  ' + i18n.tSync('messages.info.no_apis_info_title') + colors.reset,
+            colors.gray + '  ' + i18n.tSync('messages.info.apis_removed_or_none') + colors.reset,
+            '',
+            colors.gray + i18n.tSync('ui.general.press_any_key_continue') + colors.reset,
+        ]);
 
         await waitForKeyPress();
         return null;
     }
 
-    let selectedIndex = 0;
-    if (actionType === 'switch' && activeIndex >= 0 && activeIndex < apis.length) {
-        selectedIndex = activeIndex;
-    }
+    // Legacy >99 guard: truncate display set, keep original refs
+    const isLegacyOverflow = apis.length > 99;
+    const displayApis = isLegacyOverflow ? apis.slice(0, 99) : apis;
+
+    // Recalculate activeIndex against displayApis
+    let effectiveActiveIndex = activeIndex;
+    if (isLegacyOverflow && activeIndex >= 99) effectiveActiveIndex = -1;
+
+    // Snapshot terminal height once — no resize handling during interaction
+    const rows = process.stdout.rows || 30;
+    const isSwitchWithActive = actionType === 'switch' && effectiveActiveIndex >= 0 && effectiveActiveIndex < displayApis.length;
+    const { itemsPerPage, totalPages } = calculatePagination(displayApis.length, rows, isSwitchWithActive, isLegacyOverflow);
+    let paginationState = initPaginationState(itemsPerPage, totalPages, effectiveActiveIndex, actionType, displayApis.length);
+    let currentPage = paginationState.currentPage;
+    let pageSelections = paginationState.pageSelections;
 
     function displaySimpleTable() {
+        const lines = [];
+
         // Header info
-        console.log('');
-        console.log(colors.cyan + title + colors.reset);
-        console.log('');
+        lines.push('');
+        lines.push(colors.cyan + title + colors.reset);
+        lines.push('');
+
+        // Legacy overflow warning
+        if (isLegacyOverflow) {
+            lines.push(colors.yellow + `  ⚠ Showing first 99 of ${apis.length} APIs` + colors.reset);
+        }
 
         // Show current active API for switch mode
-        if (actionType === 'switch' && activeIndex >= 0 && activeIndex < apis.length) {
-            const activeApi = apis[activeIndex];
-            console.log(colors.gray + i18n.tSync('ui.general.currently_active_api') + colors.reset);
-            console.log(colors.gray + `  Name: ${activeApi.name}` + colors.reset);
-            console.log(colors.gray + `  Provider: ${activeApi.provider}` + colors.reset);
-            console.log(colors.gray + `  Usage Count: ${activeApi.usageCount || 0}` + colors.reset);
-            console.log('');
+        if (isSwitchWithActive) {
+            const activeApi = displayApis[effectiveActiveIndex];
+            lines.push(colors.gray + i18n.tSync('ui.general.currently_active_api') + colors.reset);
+            lines.push(colors.gray + `  Name: ${activeApi.name}` + colors.reset);
+            lines.push(colors.gray + `  Provider: ${activeApi.provider}` + colors.reset);
+            lines.push(colors.gray + `  Usage Count: ${activeApi.usageCount || 0}` + colors.reset);
+            lines.push('');
         }
 
+        // Current page slice
+        const startIdx = currentPage * itemsPerPage;
+        const endIdx = Math.min(startIdx + itemsPerPage, displayApis.length);
+        const pageApis = displayApis.slice(startIdx, endIdx);
+
         // Table header with 3-column layout
-        console.log(colors.bright + colors.orange +
+        lines.push(colors.bright + colors.orange +
             '┌────┬─────────────────────────┬────────────────────────────────────────────────────────────────────────┐' + colors.reset);
-        console.log(colors.bright + colors.orange +
+        lines.push(colors.bright + colors.orange +
             '│ No.│ Name                    │ Detail                                                                 │' + colors.reset);
-        console.log(colors.bright + colors.orange +
+        lines.push(colors.bright + colors.orange +
             '├────┼─────────────────────────┼────────────────────────────────────────────────────────────────────────┤' + colors.reset);
 
-        // Testing with multi-row display loop
-        apis.forEach((api, index) => {
-            const num = (index + 1).toString().padStart(2, ' ');
+        // Multi-row display loop — iterate page slice
+        pageApis.forEach((api, localIndex) => {
+            const globalIndex = startIdx + localIndex;
+            const num = (globalIndex + 1).toString().padStart(2, ' ');
 
-            // Check if this is the currently active API
-            const isActiveApi = activeIndex === index;
+            // Active marker uses global index
+            const isActiveApi = effectiveActiveIndex === globalIndex;
             const activeMarker = isActiveApi ? '●' : ' ';
 
             // Format name with active marker
             const nameWithMarker = `${activeMarker} ${api.name}`;
             const displayName = nameWithMarker.padEnd(23, ' ');
 
-            // Test decrypt and maskApiToken functions
+            // Decrypt and mask token for display
             const decryptedToken = decrypt(api.authToken);
             const displayToken = decryptedToken.success ? maskApiToken(decryptedToken.value) : '***ERROR***';
 
@@ -83,48 +169,55 @@ async function showApiSelectionTable(apis, title, actionType = 'select', activeI
             // Pad each detail line to exactly 70 characters
             const paddedDetails = details.map(detail => padStringToWidth(detail, 70));
 
-            // Color selection based on active state and selection
-            const nameColor = isActiveApi ? colors.green : (index === selectedIndex ? colors.white : colors.gray);
-            const detailColor = isActiveApi ? colors.green : (index === selectedIndex ? colors.white : colors.gray);
-            const bgColor = index === selectedIndex ? colors.bgAmber : '';
-            const textBg = index === selectedIndex ? colors.black : '';
+            // Selection highlight uses local index
+            const isSelected = localIndex === pageSelections[currentPage];
+            const nameColor = isActiveApi ? colors.green : (isSelected ? colors.white : colors.gray);
+            const detailColor = isActiveApi ? colors.green : (isSelected ? colors.white : colors.gray);
+            const bgColor = isSelected ? colors.bgAmber : '';
+            const textBg = isSelected ? colors.black : '';
 
             // Display 6 rows for each API, with No. and Name centered on row 3 (index 2)
             for (let i = 0; i < paddedDetails.length; i++) {
                 if (i === 2) {
                     // Middle row (3rd row) - show No. and Name for vertical centering
-                    console.log(colors.orange + '│' + textBg + bgColor + nameColor +
+                    lines.push(colors.orange + '│' + textBg + bgColor + nameColor +
                         ` ${num} ` + colors.reset + colors.orange + '│' + textBg + bgColor + nameColor +
                         ` ${displayName} ` + colors.reset + colors.orange + '│' + textBg + bgColor + detailColor +
                         ` ${paddedDetails[i]} ` + colors.reset + colors.orange + '│' + colors.reset);
                 } else {
                     // Other rows - empty No. and Name columns
-                    console.log(colors.orange + '│' + textBg + bgColor + colors.gray +
+                    lines.push(colors.orange + '│' + textBg + bgColor + colors.gray +
                         '    ' + colors.reset + colors.orange + '│' + textBg + bgColor + colors.gray +
                         '                         ' + colors.reset + colors.orange + '│' + textBg + bgColor + detailColor +
                         ' ' + paddedDetails[i] + ' ' + colors.reset + colors.orange + '│' + colors.reset);
                 }
             }
 
-            // Add separator line after each API except the last one
-            if (index < apis.length - 1) {
-                console.log(colors.bright + colors.orange +
+            // Add separator line after each API except the last one on this page
+            if (localIndex < pageApis.length - 1) {
+                lines.push(colors.bright + colors.orange +
                     '├────┼─────────────────────────┼────────────────────────────────────────────────────────────────────────┤' + colors.reset);
             }
         });
 
-        console.log(colors.bright + colors.orange +
+        lines.push(colors.bright + colors.orange +
             '└────┴─────────────────────────┴────────────────────────────────────────────────────────────────────────┘' + colors.reset);
-        console.log('');
+        lines.push('');
 
-        if (actionType === 'switch' && activeIndex >= 0) {
-            console.log(colors.green + '  ● = ' + i18n.tSync('ui.general.currently_active_api') + colors.reset);
+        if (isSwitchWithActive) {
+            lines.push(colors.green + '  ● = ' + i18n.tSync('ui.general.currently_active_api') + colors.reset);
         }
 
-        // Different action prompts for different functionality
-        const actionText = actionType === 'remove' ? 'remove' : (actionType === 'switch' ? 'switch' : 'select');
-        console.log(colors.amber + '  ' + i18n.tSync('navigation.use_arrows_esc', actionText) + colors.reset);
-        console.log('');
+        // Navigation hint — pagination-aware
+        const actionText = i18n.tSync(`navigation.action.${actionType}`);
+        if (totalPages > 1) {
+            lines.push(colors.amber + '  ' + i18n.tSync('navigation.use_arrows_page_esc', (currentPage + 1).toString(), totalPages.toString(), actionText) + colors.reset);
+        } else {
+            lines.push(colors.amber + '  ' + i18n.tSync('navigation.use_arrows_esc', actionText) + colors.reset);
+        }
+        lines.push('');
+
+        screen.render(lines);
     }
 
     function handleKeyPress(key) {
@@ -140,33 +233,48 @@ async function showApiSelectionTable(apis, title, actionType = 'select', activeI
             // Continue to process this key normally
         }
 
+        // Map raw key codes to logical key names
+        let keyName;
         switch (key) {
-            case '\u001b[A': // Up arrow
-                selectedIndex = (selectedIndex - 1 + apis.length) % apis.length;
-                console.clear(); // Force clear screen
-                displaySimpleTable();
-                break;
-
-            case '\u001b[B': // Down arrow
-                selectedIndex = (selectedIndex + 1) % apis.length;
-                console.clear(); // Force clear screen
-                displaySimpleTable();
-                break;
-
-            case '\r': // Enter
-                return apis[selectedIndex];
-
-            case '\u001b': // Escape
+            case '\u001b[C': keyName = 'right'; break;
+            case '\u001b[D': keyName = 'left'; break;
+            case '\u001b[A': keyName = 'up'; break;
+            case '\u001b[B': keyName = 'down'; break;
+            case '\r': keyName = 'enter'; break;
+            case '\u001b':
             case 'q':
             case 'Q':
-                return null;
+                keyName = 'escape'; break;
+            default:
+                return undefined;
         }
+
+        const state = {
+            currentPage,
+            pageSelections,
+            itemsPerPage,
+            totalPages,
+            apiCount: displayApis.length,
+        };
+
+        const result = handlePageKeyPress(keyName, state);
+
+        if (result.action === 'select') {
+            return displayApis[result.globalIndex];
+        }
+        if (result.action === 'cancel') {
+            return null;
+        }
+
+        // State update — navigation key
+        currentPage = result.currentPage;
+        pageSelections = result.pageSelections;
+        displaySimpleTable();
         return undefined;
     }
 
     return new Promise((resolve) => {
         // Initial display
-        console.clear();
         displaySimpleTable();
 
         if (process.stdin.isTTY) {
@@ -187,23 +295,23 @@ async function showApiSelectionTable(apis, title, actionType = 'select', activeI
                         const selectedIndex = apis.findIndex(api => api.id === result.id);
                         const switchedApi = apiManager.setActiveApi(selectedIndex);
 
-                        console.clear();
-                        console.log('');
-                        console.log(colors.bright + colors.green + `✓ ${i18n.tSync('messages.success.api_switched')}` + colors.reset);
-                        console.log(colors.gray + `  ${i18n.tSync('api.actions.switch_success', switchedApi.name)}` + colors.reset);
-                        console.log(colors.gray + `  ${i18n.tSync('api.details.provider')}: ${switchedApi.provider}` + colors.reset);
-                        console.log(colors.gray + `  ${i18n.tSync('api.details.url')}: ${switchedApi.baseUrl}` + colors.reset);
-                        console.log(colors.gray + `  ${i18n.tSync('api.details.model')}: ${switchedApi.model}` + colors.reset);
-                        console.log('');
-
-                        // Wait for user key press
-                        console.log(colors.gray + i18n.tSync('messages.prompts.press_any_key') + colors.reset);
+                        screen.render([
+                            '',
+                            colors.bright + colors.green + `✓ ${i18n.tSync('messages.success.api_switched')}` + colors.reset,
+                            colors.gray + `  ${i18n.tSync('api.actions.switch_success', switchedApi.name)}` + colors.reset,
+                            colors.gray + `  ${i18n.tSync('api.details.provider')}: ${switchedApi.provider}` + colors.reset,
+                            colors.gray + `  ${i18n.tSync('api.details.url')}: ${switchedApi.baseUrl}` + colors.reset,
+                            colors.gray + `  ${i18n.tSync('api.details.model')}: ${switchedApi.model}` + colors.reset,
+                            '',
+                            colors.gray + i18n.tSync('messages.prompts.press_any_key') + colors.reset,
+                        ]);
                         await waitForKeyPress();
-                    } else {
-                        console.clear();
-                        console.log('');
-                        console.log(colors.green + '✓ Selection completed: ' + (result ? result.name : 'Cancelled') + colors.reset);
-                        console.log('');
+                    } else if (actionType !== 'edit') {
+                        screen.render([
+                            '',
+                            colors.green + '✓ Selection completed: ' + (result ? result.name : 'Cancelled') + colors.reset,
+                            '',
+                        ]);
                     }
 
                     resolve(result);
@@ -250,22 +358,24 @@ function waitForKeyPress() {
 }
 
 async function confirmDeletion(api) {
-    console.clear();
-    console.log('');
-    console.log(colors.red + colors.bright + '[!] ' + i18n.tSync('messages.prompts.confirm_deletion') + colors.reset);
-    console.log('');
-    console.log(colors.yellow + i18n.tSync('ui.general.confirm_delete_api') + colors.reset);
-    console.log('');
-    console.log(colors.gray + `Name: ${api.name}` + colors.reset);
-    console.log(colors.gray + `Provider: ${api.provider}` + colors.reset);
-    console.log(colors.gray + `Base URL: ${api.baseUrl}` + colors.reset);
-    console.log(colors.gray + `Model: ${api.model}` + colors.reset);
     const decryptedToken = decrypt(api.authToken);
     const displayToken = decryptedToken.success ? maskApiToken(decryptedToken.value) : '***ERROR***';
-    console.log(colors.gray + `Token: ${displayToken}` + colors.reset);
-    console.log('');
-    console.log(colors.red + i18n.tSync('ui.general.action_cannot_undone') + colors.reset);
-    console.log('');
+
+    screen.render([
+        '',
+        colors.red + colors.bright + '[!] ' + i18n.tSync('messages.prompts.confirm_deletion') + colors.reset,
+        '',
+        colors.yellow + i18n.tSync('ui.general.confirm_delete_api') + colors.reset,
+        '',
+        colors.gray + `Name: ${api.name}` + colors.reset,
+        colors.gray + `Provider: ${api.provider}` + colors.reset,
+        colors.gray + `Base URL: ${api.baseUrl}` + colors.reset,
+        colors.gray + `Model: ${api.model}` + colors.reset,
+        colors.gray + `Token: ${displayToken}` + colors.reset,
+        '',
+        colors.red + i18n.tSync('ui.general.action_cannot_undone') + colors.reset,
+        '',
+    ]);
 
     // Use StdinManager for proper state management
     const scope = stdinManager.acquire('line', {
@@ -277,7 +387,7 @@ async function confirmDeletion(api) {
     try {
         rl = scope.createReadline();
     } catch (error) {
-        console.error('[ERROR] Failed to create readline interface:', error.message);
+        screen.debug('[ERROR] Failed to create readline interface: ' + error.message);
         scope.release();
         return false; // Default to not deleting if we can't get user confirmation
     }
@@ -314,18 +424,22 @@ async function confirmDeletion(api) {
 
         // Set a timeout to prevent infinite waiting
         timeoutId = setTimeout(() => {
-            console.log('\n' + colors.yellow + '[!] Confirmation timeout - operation cancelled' + colors.reset);
+            screen.write('\n' + colors.yellow + '[!] Confirmation timeout - operation cancelled' + colors.reset + '\n');
             cleanup(false); // Timeout means no deletion
         }, 60000); // 60 second timeout
 
+        screen.showCursor();
+        screen.setReadlineActive(true);
         rl.question(colors.red + i18n.tSync('ui.general.confirm_deletion_prompt') + colors.reset, (answer) => {
+            screen.setReadlineActive(false);
+            screen.hideCursor();
             const confirmed = answer.trim().toLowerCase() === 'y';
             cleanup(confirmed);
         });
 
         // Handle readline errors
         rl.on('error', (error) => {
-            console.error('[ERROR] Readline error:', error.message);
+            screen.debug('[ERROR] Readline error: ' + error.message);
             cleanup(false); // Error means no deletion
         });
     });
@@ -334,5 +448,8 @@ async function confirmDeletion(api) {
 module.exports = {
     showApiSelectionTable,
     waitForKeyPress,
-    confirmDeletion
+    confirmDeletion,
+    calculatePagination,
+    initPaginationState,
+    handlePageKeyPress,
 };