@kikkimo/claude-launcher 2.4.0 → 3.0.0

package/lib/ui/menu.js

@@ -5,8 +5,9 @@
 const readline = require('readline');
 const colors = require('./colors');
 const i18n = require('../i18n');
-const { padStringToWidth } = require('../utils/string-width');
+const { padStringToWidth, getStringWidth } = require('../utils/string-width');
 const stdinManager = require('../utils/stdin-manager');
+const screen = require('./screen');
 
 /**
  * Force cleanup stdin state before displaying any menu
@@ -27,7 +28,7 @@ function forceCleanupBeforeMenu() {
     } catch (error) {
         // Ignore cleanup errors but log for debugging
         if (process.env.DEBUG_STDIN) {
-            console.error('[DEBUG] forceCleanupBeforeMenu error:', error.message);
+            screen.debug('[DEBUG] forceCleanupBeforeMenu error: ' + error.message);
         }
     }
 }
@@ -45,54 +46,73 @@ class Menu {
         // Force cleanup stdin state before any menu display
         forceCleanupBeforeMenu();
 
-        // Use console.clear and console.log for proper screen clearing
-        console.clear();
-        console.log('');
-        console.log(colors.orange + '  ┌──────────────────────────────────────────────────────┐' + colors.reset);
-        console.log(colors.orange + '  │' + colors.white + colors.bright + '                 Claude Code Launcher                 ' + colors.orange + '│' + colors.reset);
-        console.log(colors.orange + '  └──────────────────────────────────────────────────────┘' + colors.reset);
-        console.log('');
-        console.log(colors.gray + '  ' + i18n.tSync('navigation.use_arrows') + colors.reset);
-        console.log('');
+        const lines = [];
+        lines.push('');
+        lines.push(colors.orange + '  ┌──────────────────────────────────────────────────────┐' + colors.reset);
+        lines.push(colors.orange + '  │' + colors.white + colors.bright + '                 Claude Code Launcher                 ' + colors.orange + '│' + colors.reset);
+        lines.push(colors.orange + '  └──────────────────────────────────────────────────────┘' + colors.reset);
+        lines.push('');
+        lines.push(colors.gray + '  ' + i18n.tSync('navigation.use_arrows') + colors.reset);
+        lines.push('');
+        screen.render(lines);
     }
 
     /**
      * Display menu with current selection
-     * @param {boolean} clearScreen - Whether to clear screen before displaying (default: true)
      * @param {string} versionInfo - Optional version info to display between banner and navigation
+     * @param {Function|null} hintCallback - Optional sync callback(selectedIndex) returning hint string or null
      */
-    displayMenu(clearScreen = true, versionInfo = null) {
-        // Clear screen and display header + menu together (like old version)
-        if (clearScreen) {
-            console.clear();
-        }
-        console.log('');
-        console.log(colors.orange + '  ┌──────────────────────────────────────────────────────┐' + colors.reset);
-        console.log(colors.orange + '  │' + colors.white + colors.bright + '                 Claude Code Launcher                 ' + colors.orange + '│' + colors.reset);
-        console.log(colors.orange + '  └──────────────────────────────────────────────────────┘' + colors.reset);
-        console.log('');
+    displayMenu(versionInfo = null, hintCallback = null) {
+        const lines = [];
+        lines.push('');
+        lines.push(colors.orange + '  ┌──────────────────────────────────────────────────────┐' + colors.reset);
+        lines.push(colors.orange + '  │' + colors.white + colors.bright + '                 Claude Code Launcher                 ' + colors.orange + '│' + colors.reset);
+        lines.push(colors.orange + '  └──────────────────────────────────────────────────────┘' + colors.reset);
+        lines.push('');
 
-        // Display version info if provided (between banner and navigation tips, like Claude Code)
         if (versionInfo) {
-            console.log(versionInfo);
-            console.log('');
+            lines.push(versionInfo);
+            lines.push('');
         }
 
-        console.log(colors.gray + '  ' + i18n.tSync('navigation.use_arrows') + colors.reset);
-        console.log('');
+        lines.push(colors.gray + '  ' + i18n.tSync('navigation.use_arrows') + colors.reset);
+        lines.push('');
 
-        // Display menu options
         this.menuOptions.forEach((option, index) => {
             if (index === this.selectedIndex) {
-                // Pad the selected option to ensure complete background coverage
-                const paddedOption = padStringToWidth(option, Math.max(40, option.length + 2));
-                console.log(colors.orange + '  → ' + colors.black + colors.bgAmber + paddedOption + colors.reset);
+                const displayWidth = getStringWidth(option);
+                const paddedOption = padStringToWidth(option, Math.max(40, displayWidth + 2));
+                lines.push(colors.orange + '  → ' + colors.black + colors.bgAmber + paddedOption + colors.reset);
             } else {
-                console.log(colors.gray + '    ' + option + colors.reset);
+                lines.push(colors.gray + '    ' + option + colors.reset);
             }
         });
 
-        console.log('');
+        // Fixed 4-line hint area for stable menu height
+        const hintText = hintCallback ? hintCallback(this.selectedIndex) : null;
+        if (hintText) {
+            const hintLines = hintText.split('\n').slice(0, 4);
+            while (hintLines.length < 4) hintLines.push('');
+            lines.push('');
+            hintLines.forEach((line, i) => {
+                if (line === '') {
+                    lines.push('');
+                } else if (i === 0) {
+                    lines.push(colors.green + '  \u2139  ' + line + colors.reset);
+                } else {
+                    lines.push(colors.gray + '     ' + line + colors.reset);
+                }
+            });
+        } else {
+            lines.push('');
+            lines.push('');
+            lines.push('');
+            lines.push('');
+            lines.push('');
+        }
+
+        lines.push('');
+        screen.render(lines);
     }
 
     /**
@@ -105,20 +125,21 @@ class Menu {
 
     /**
      * Handle keyboard navigation
-     * @param {boolean} clearScreen - Whether to clear screen on initial display (default: true)
      * @param {string} versionInfo - Optional version info to display
+     * @param {Function|null} hintCallback - Optional sync callback(selectedIndex) returning hint string or null
      */
-    async navigate(clearScreen = true, versionInfo = null) {
+    async navigate(versionInfo = null, hintCallback = null) {
         // Guard against empty menu to prevent NaN from modulo operations
         if (!this.menuOptions || this.menuOptions.length === 0) {
-            console.log(colors.yellow + '  Warning: No menu options available' + colors.reset);
+            screen.write(colors.yellow + '  Warning: No menu options available' + colors.reset + '\n');
             return -1; // Return cancel/exit code
         }
 
         this.versionInfo = versionInfo; // Store for redrawing
+        this.hintCallback = hintCallback; // Store for redrawing
 
         return new Promise((resolve, reject) => {
-            this.displayMenu(clearScreen, versionInfo);
+            this.displayMenu(versionInfo, hintCallback);
 
             if (process.stdin.isTTY) {
                 const scope = stdinManager.acquire('raw', {
@@ -171,15 +192,16 @@ class Menu {
                         switch (key) {
                             case '\u001b[A': // Up arrow
                                 this.selectedIndex = (this.selectedIndex - 1 + this.menuOptions.length) % this.menuOptions.length;
-                                this.displayMenu(true, this.versionInfo);
+                                this.displayMenu(this.versionInfo, this.hintCallback);
                                 break;
 
                             case '\u001b[B': // Down arrow
                                 this.selectedIndex = (this.selectedIndex + 1) % this.menuOptions.length;
-                                this.displayMenu(true, this.versionInfo);
+                                this.displayMenu(this.versionInfo, this.hintCallback);
                                 break;
 
                             case '\r': // Enter
+                            case ' ':  // Space
                                 safeResolve(this.selectedIndex);
                                 break;
 
@@ -207,7 +229,7 @@ class Menu {
 
                 const rl = lineScope.createReadline();
 
-                console.log(colors.yellow + '  ' + i18n.tSync('navigation.arrow_keys_not_available', this.menuOptions.length) + colors.reset);
+                screen.write(colors.yellow + '  ' + i18n.tSync('navigation.arrow_keys_not_available', this.menuOptions.length) + colors.reset + '\n');
 
                 rl.on('line', (input) => {
                     const choice = parseInt(input.trim());
@@ -220,7 +242,7 @@ class Menu {
                         lineScope.release();
                         resolve(-1);
                     } else {
-                        console.log(colors.red + '  Invalid selection. Please enter 1-' + this.menuOptions.length + '.' + colors.reset);
+                        screen.write(colors.red + '  Invalid selection. Please enter 1-' + this.menuOptions.length + '.' + colors.reset + '\n');
                     }
                 });
             }
@@ -230,7 +252,7 @@ class Menu {
     async selectFromList(title, items, activeIndex = -1) {
         // Guard against empty items list to prevent NaN from modulo operations
         if (!items || items.length === 0) {
-            console.log(colors.yellow + '  Warning: No items available to select' + colors.reset);
+            screen.write(colors.yellow + '  Warning: No items available to select' + colors.reset + '\n');
             return null; // Return null to indicate no selection
         }
 
@@ -239,12 +261,12 @@ class Menu {
         let selectedIndex = activeIndex >= 0 ? activeIndex : 0;
 
         const displayList = () => {
-            console.clear();
-            console.log('');
-            console.log(colors.bright + colors.orange + `[*] ${title}` + colors.reset);
-            console.log('');
-            console.log(colors.gray + '  Use ↑↓ arrow keys to navigate, Enter to select, Esc to cancel' + colors.reset);
-            console.log('');
+            const lines = [];
+            lines.push('');
+            lines.push(colors.bright + colors.orange + `[*] ${title}` + colors.reset);
+            lines.push('');
+            lines.push(colors.gray + '  Use ↑↓ arrow keys to navigate, Enter to select, Esc to cancel' + colors.reset);
+            lines.push('');
 
             items.forEach((item, index) => {
                 const isActive = index === activeIndex;
@@ -253,19 +275,20 @@ class Menu {
 
                 if (index === selectedIndex) {
                     const itemText = `${item.name}${activeIndicator}`;
-                    const paddedItem = padStringToWidth(itemText, Math.max(40, itemText.length + 2));
-                    console.log(colors.orange + prefix + colors.black + colors.bgAmber + paddedItem + colors.reset);
+                    const paddedItem = padStringToWidth(itemText, Math.max(40, getStringWidth(itemText) + 2));
+                    lines.push(colors.orange + prefix + colors.black + colors.bgAmber + paddedItem + colors.reset);
                     if (item.details) {
                         item.details.forEach(detail => {
-                            console.log(colors.gray + '      ' + detail + colors.reset);
+                            lines.push(colors.gray + '      ' + detail + colors.reset);
                         });
                     }
                 } else {
-                    console.log(colors.gray + prefix + `${item.name}${activeIndicator}` + colors.reset);
+                    lines.push(colors.gray + prefix + `${item.name}${activeIndicator}` + colors.reset);
                 }
             });
 
-            console.log('');
+            lines.push('');
+            screen.render(lines);
         };
 
         return new Promise((resolve, reject) => {
@@ -358,7 +381,7 @@ class Menu {
 
                 const rl = lineScope.createReadline();
 
-                console.log(colors.yellow + '  Arrow keys not available. Enter item number (1-' + items.length + ') or q to cancel:' + colors.reset);
+                screen.write(colors.yellow + '  Arrow keys not available. Enter item number (1-' + items.length + ') or q to cancel:' + colors.reset + '\n');
 
                 rl.on('line', (input) => {
                     const choice = parseInt(input.trim());
@@ -371,7 +394,7 @@ class Menu {
                         lineScope.release();
                         resolve(null);
                     } else {
-                        console.log(colors.red + '  Invalid selection. Please enter 1-' + items.length + '.' + colors.reset);
+                        screen.write(colors.red + '  Invalid selection. Please enter 1-' + items.length + '.' + colors.reset + '\n');
                     }
                 });
             }