@appkit/llamacpp-cli 2.0.0 → 2.1.0

package/dist/tui/ConfigApp.js

@@ -47,6 +47,8 @@ const port_manager_js_1 = require("../lib/port-manager.js");
 const model_scanner_js_1 = require("../lib/model-scanner.js");
 const file_utils_js_1 = require("../utils/file-utils.js");
 const log_utils_js_1 = require("../utils/log-utils.js");
+const modal_controller_js_1 = require("./shared/modal-controller.js");
+const keyboard_manager_js_1 = require("../lib/keyboard-manager.js");
 /**
  * Config screen TUI for editing server configuration
  */
@@ -61,6 +63,28 @@ async function createConfigUI(screen, server, onBack) {
                 value: server.modelName,
                 originalValue: server.modelName,
             },
+            {
+                key: 'alias',
+                label: 'Alias',
+                type: 'text',
+                value: server.alias || '',
+                originalValue: server.alias || '',
+                validation: async (value) => {
+                    // Empty string is valid (means remove alias)
+                    if (value.trim() === '')
+                        return null;
+                    // Validate format
+                    const formatError = (0, server_config_js_1.validateAlias)(value.trim());
+                    if (formatError)
+                        return formatError;
+                    // Check uniqueness (exclude current server)
+                    const conflictingServerId = await state_manager_js_1.stateManager.isAliasAvailable(value.trim(), server.id);
+                    if (conflictingServerId) {
+                        return `Alias already used by server: ${conflictingServerId}`;
+                    }
+                    return null;
+                },
+            },
             {
                 key: 'host',
                 label: 'Host',
@@ -118,8 +142,8 @@ async function createConfigUI(screen, server, onBack) {
                 value: server.gpuLayers,
                 originalValue: server.gpuLayers,
                 validation: (value) => {
-                    if (value < 0)
-                        return 'Must be at least 0';
+                    if (value < -1)
+                        return 'Must be -1 (all) or a non-negative integer';
                     if (value > 999)
                         return 'Must be at most 999';
                     return null;
@@ -144,6 +168,9 @@ async function createConfigUI(screen, server, onBack) {
         selectedIndex: 0,
         hasChanges: false,
     };
+    // Keyboard manager and modal controller for centralized keyboard handling
+    const keyboardManager = new keyboard_manager_js_1.KeyboardManager(screen);
+    const modalController = new modal_controller_js_1.ModalController(screen, keyboardManager);
     // Create content box
     const contentBox = blessed_1.default.box({
         top: 0,
@@ -265,6 +292,7 @@ async function createConfigUI(screen, server, onBack) {
         screen.render();
     }
     // Create a centered modal box
+    // Helper to create modal element (for custom modals with special logic)
     function createModal(title, height = 'shrink') {
         return blessed_1.default.box({
             parent: screen,
@@ -281,11 +309,34 @@ async function createConfigUI(screen, server, onBack) {
             label: ` ${title} `,
         });
     }
-    // Number input modal
-    async function editNumber(field) {
+    // Helper to create semi-transparent overlay
+    function createOverlay() {
+        return blessed_1.default.box({
+            parent: screen,
+            top: 0,
+            left: 0,
+            width: '100%',
+            height: '100%',
+            style: {
+                bg: 'black',
+                transparent: true,
+            },
+        });
+    }
+    /**
+     * Number input modal with context size support
+     * Note: This function unregisters handlers before opening modal.
+     * Handlers are re-registered when modal closes via callback.
+     */
+    async function editNumber(field, onClose) {
         unregisterHandlers();
         return new Promise((resolve) => {
+            const handleClose = onClose || (() => {
+                registerHandlers();
+                render();
+            });
             const isCtxSize = field.key === 'ctxSize';
+            const overlay = createOverlay();
             const modal = createModal(`Edit ${field.label}`, isCtxSize ? 11 : 10);
             const currentDisplay = isCtxSize
                 ? formatContextSize(field.value)
@@ -332,9 +383,11 @@ async function createConfigUI(screen, server, onBack) {
                 ? formatContextSize(field.value)
                 : String(field.value);
             inputBox.setValue(initialValue);
+            screen.append(overlay);
+            screen.append(modal);
             screen.render();
             inputBox.focus();
-            inputBox.on('submit', (value) => {
+            inputBox.on('submit', async (value) => {
                 let numValue;
                 if (isCtxSize) {
                     numValue = parseContextSize(value);
@@ -346,9 +399,17 @@ async function createConfigUI(screen, server, onBack) {
                 }
                 if (numValue !== null) {
                     if (field.validation) {
-                        const error = field.validation(numValue);
-                        if (error) {
-                            infoText.setContent(`{red-fg}Error: ${error}{/red-fg}`);
+                        try {
+                            const error = await field.validation(numValue);
+                            if (error) {
+                                infoText.setContent(`{red-fg}Error: ${error}{/red-fg}`);
+                                screen.render();
+                                inputBox.focus();
+                                return;
+                            }
+                        }
+                        catch (err) {
+                            infoText.setContent(`{red-fg}Validation error: ${err.message}{/red-fg}`);
                             screen.render();
                             inputBox.focus();
                             return;
@@ -358,34 +419,37 @@ async function createConfigUI(screen, server, onBack) {
                     updateHasChanges();
                 }
                 screen.remove(modal);
-                registerHandlers();
-                render();
+                screen.remove(overlay);
+                handleClose();
                 resolve();
             });
             inputBox.on('cancel', () => {
                 screen.remove(modal);
-                registerHandlers();
-                render();
-                resolve();
-            });
-            inputBox.key(['escape'], () => {
-                screen.remove(modal);
-                registerHandlers();
-                render();
+                screen.remove(overlay);
+                handleClose();
                 resolve();
             });
         });
     }
-    // Toggle/select modal
-    async function editSelect(field) {
+    /**
+     * Toggle/select modal
+     * Note: This function unregisters handlers before opening modal.
+     * Handlers are re-registered when modal closes via callback.
+     */
+    async function editSelect(field, onClose) {
         unregisterHandlers();
         return new Promise((resolve) => {
+            const handleClose = onClose || (() => {
+                registerHandlers();
+                render();
+            });
             const options = field.options || [];
             let selectedOption = field.type === 'toggle'
                 ? (field.value ? 1 : 0)
                 : options.indexOf(String(field.value));
             if (selectedOption < 0)
                 selectedOption = 0;
+            const overlay = createOverlay();
             const modal = createModal(field.label, options.length + 6);
             function renderOptions() {
                 let content = '\n';
@@ -407,6 +471,8 @@ async function createConfigUI(screen, server, onBack) {
                 modal.setContent(content);
                 screen.render();
             }
+            screen.append(overlay);
+            screen.append(modal);
             renderOptions();
             modal.focus();
             modal.key(['up', 'k'], () => {
@@ -426,28 +492,43 @@ async function createConfigUI(screen, server, onBack) {
                 }
                 updateHasChanges();
                 screen.remove(modal);
-                registerHandlers();
-                render();
+                screen.remove(overlay);
+                handleClose();
                 resolve();
             });
             modal.key(['escape'], () => {
                 screen.remove(modal);
-                registerHandlers();
-                render();
+                screen.remove(overlay);
+                handleClose();
                 resolve();
             });
         });
     }
-    // Text input modal
-    async function editText(field) {
+    /**
+     * Text input modal
+     * Note: This function unregisters handlers before opening modal.
+     * Handlers are re-registered when modal closes via callback.
+     */
+    async function editText(field, onClose) {
         unregisterHandlers();
         return new Promise((resolve) => {
+            const handleClose = onClose || (() => {
+                registerHandlers();
+                render();
+            });
+            const overlay = createOverlay();
             const modal = createModal(`Edit ${field.label}`, 10);
+            // Customize info text based on field type
+            const infoContent = field.key === 'customFlags'
+                ? 'Enter comma-separated flags:'
+                : field.key === 'alias'
+                    ? 'Enter alias (or leave empty to remove):'
+                    : `Enter ${field.label.toLowerCase()}:`;
             const infoText = blessed_1.default.text({
                 parent: modal,
                 top: 1,
                 left: 2,
-                content: 'Enter comma-separated flags:',
+                content: infoContent,
                 tags: true,
             });
             const inputBox = blessed_1.default.textbox({
@@ -471,45 +552,72 @@ async function createConfigUI(screen, server, onBack) {
                 tags: true,
             });
             inputBox.setValue(field.value || '');
+            screen.append(overlay);
+            screen.append(modal);
             screen.render();
             inputBox.focus();
-            inputBox.on('submit', (value) => {
-                field.value = value.trim();
+            inputBox.on('submit', async (value) => {
+                const trimmedValue = value.trim();
+                // Run validation if present (handle both sync and async)
+                if (field.validation) {
+                    try {
+                        const error = await field.validation(trimmedValue);
+                        if (error) {
+                            infoText.setContent(`{red-fg}Error: ${error}{/red-fg}`);
+                            screen.render();
+                            inputBox.focus();
+                            return;
+                        }
+                    }
+                    catch (err) {
+                        infoText.setContent(`{red-fg}Validation error: ${err.message}{/red-fg}`);
+                        screen.render();
+                        inputBox.focus();
+                        return;
+                    }
+                }
+                field.value = trimmedValue;
                 updateHasChanges();
                 screen.remove(modal);
-                registerHandlers();
-                render();
+                screen.remove(overlay);
+                handleClose();
                 resolve();
             });
             inputBox.on('cancel', () => {
                 screen.remove(modal);
-                registerHandlers();
-                render();
-                resolve();
-            });
-            inputBox.key(['escape'], () => {
-                screen.remove(modal);
-                registerHandlers();
-                render();
+                screen.remove(overlay);
+                handleClose();
                 resolve();
             });
         });
     }
     // Model picker modal
-    async function editModel(field) {
+    /**
+     * Model selection modal
+     * Note: This function unregisters handlers before opening modal.
+     * Handlers are re-registered when modal closes via callback.
+     */
+    async function editModel(field, onClose) {
         unregisterHandlers();
         return new Promise(async (resolve) => {
+            const handleClose = onClose || (() => {
+                registerHandlers();
+                render();
+            });
             const models = await model_scanner_js_1.modelScanner.scanModels();
             if (models.length === 0) {
                 // Show error modal
+                const errorOverlay = createOverlay();
                 const errorModal = createModal('Error', 7);
                 errorModal.setContent('\n  {red-fg}No models found in ~/models{/red-fg}\n\n  {gray-fg}[ESC] Close{/gray-fg}');
+                screen.append(errorOverlay);
+                screen.append(errorModal);
                 screen.render();
                 errorModal.focus();
                 errorModal.key(['escape', 'enter'], () => {
                     screen.remove(errorModal);
-                    registerHandlers();
-                    render();
+                    screen.remove(errorOverlay);
+                    handleClose();
                     resolve();
                 });
                 return;
@@ -519,6 +627,7 @@ async function createConfigUI(screen, server, onBack) {
                 selectedIndex = 0;
             let scrollOffset = 0;
             const maxVisible = 8;
+            const overlay = createOverlay();
             const modal = createModal('Select Model', maxVisible + 6);
             function renderModels() {
                 // Adjust scroll offset
@@ -559,6 +668,8 @@ async function createConfigUI(screen, server, onBack) {
                 modal.setContent(content);
                 screen.render();
             }
+            screen.append(overlay);
+            screen.append(modal);
             renderModels();
             modal.focus();
             modal.key(['up', 'k'], () => {
@@ -573,153 +684,69 @@ async function createConfigUI(screen, server, onBack) {
                 field.value = models[selectedIndex].filename;
                 updateHasChanges();
                 screen.remove(modal);
-                registerHandlers();
-                render();
+                screen.remove(overlay);
+                handleClose();
                 resolve();
             });
             modal.key(['escape'], () => {
                 screen.remove(modal);
-                registerHandlers();
-                render();
+                screen.remove(overlay);
+                handleClose();
                 resolve();
             });
         });
     }
-    // Show unsaved changes dialog
-    async function showUnsavedDialog() {
-        unregisterHandlers();
-        return new Promise((resolve) => {
-            const modal = createModal('Unsaved Changes', 10);
-            let selectedOption = 0;
-            const options = [
-                { key: 'save', label: '[S]ave and exit' },
-                { key: 'discard', label: '[D]iscard changes' },
-                { key: 'continue', label: '[C]ontinue editing' },
-            ];
-            function renderDialog() {
-                let content = '\n';
-                for (let i = 0; i < options.length; i++) {
-                    const isSelected = i === selectedOption;
-                    if (isSelected) {
-                        content += `  {cyan-fg}► ${options[i].label}{/cyan-fg}\n`;
-                    }
-                    else {
-                        content += `    ${options[i].label}\n`;
-                    }
-                }
-                modal.setContent(content);
-                screen.render();
-            }
-            renderDialog();
-            modal.focus();
-            modal.key(['up', 'k'], () => {
-                selectedOption = Math.max(0, selectedOption - 1);
-                renderDialog();
-            });
-            modal.key(['down', 'j'], () => {
-                selectedOption = Math.min(options.length - 1, selectedOption + 1);
-                renderDialog();
-            });
-            modal.key(['enter'], () => {
-                screen.remove(modal);
-                registerHandlers();
-                resolve(options[selectedOption].key);
-            });
-            modal.key(['s', 'S'], () => {
-                screen.remove(modal);
-                registerHandlers();
-                resolve('save');
-            });
-            modal.key(['d', 'D'], () => {
-                screen.remove(modal);
-                registerHandlers();
-                resolve('discard');
-            });
-            modal.key(['c', 'C', 'escape'], () => {
-                screen.remove(modal);
-                registerHandlers();
-                resolve('continue');
-            });
-        });
+    /**
+     * Show unsaved changes dialog
+     * @param onClose - Optional callback when modal closes. Defaults to registering handlers + render.
+     *                  Pass empty function for complex flows where outer function manages handlers.
+     */
+    async function showUnsavedDialog(onClose) {
+        return modalController.showUnsavedDialog(onClose || (() => {
+            registerHandlers();
+            render();
+        }));
     }
-    // Show restart confirmation dialog
-    async function showRestartDialog() {
-        unregisterHandlers();
-        return new Promise((resolve) => {
-            const modal = createModal('Server is Running', 10);
-            let selectedOption = 0;
-            const options = [
-                { key: true, label: '[Y]es - Restart now' },
-                { key: false, label: '[N]o - Apply later' },
-            ];
-            function renderDialog() {
-                let content = '\n  Restart to apply changes?\n\n';
-                for (let i = 0; i < options.length; i++) {
-                    const isSelected = i === selectedOption;
-                    if (isSelected) {
-                        content += `  {cyan-fg}► ${options[i].label}{/cyan-fg}\n`;
-                    }
-                    else {
-                        content += `    ${options[i].label}\n`;
-                    }
-                }
-                modal.setContent(content);
-                screen.render();
-            }
-            renderDialog();
-            modal.focus();
-            modal.key(['up', 'k'], () => {
-                selectedOption = Math.max(0, selectedOption - 1);
-                renderDialog();
-            });
-            modal.key(['down', 'j'], () => {
-                selectedOption = Math.min(options.length - 1, selectedOption + 1);
-                renderDialog();
-            });
-            modal.key(['enter'], () => {
-                screen.remove(modal);
-                registerHandlers();
-                resolve(options[selectedOption].key);
-            });
-            modal.key(['y', 'Y'], () => {
-                screen.remove(modal);
-                registerHandlers();
-                resolve(true);
-            });
-            modal.key(['n', 'N', 'escape'], () => {
-                screen.remove(modal);
-                registerHandlers();
-                resolve(false);
-            });
-        });
+    /**
+     * Show restart confirmation dialog
+     * @param onClose - Optional callback when modal closes. Defaults to registering handlers + render.
+     *                  Pass empty function for complex flows where outer function manages handlers.
+     */
+    async function showRestartDialog(onClose) {
+        return modalController.showRestartDialog(server.modelName, onClose || (() => {
+            registerHandlers();
+            render();
+        }));
     }
-    // Show progress modal
-    function showProgress(message) {
-        const modal = createModal('Working', 6);
-        modal.setContent(`\n  {cyan-fg}${message}{/cyan-fg}`);
-        screen.render();
-        return modal;
+    /**
+     * Show error modal
+     * @param message - Error message to display
+     * @param onClose - Optional callback when modal closes. Defaults to registering handlers + render.
+     *                  Pass empty function for complex flows where outer function manages handlers.
+     */
+    async function showError(message, onClose) {
+        await modalController.showError(message, onClose || (() => {
+            registerHandlers();
+            render();
+        }));
     }
-    // Show error message
-    async function showError(message) {
-        unregisterHandlers();
-        return new Promise((resolve) => {
-            const modal = createModal('Error', 8);
-            modal.setContent(`\n  {red-fg}❌ ${message}{/red-fg}\n\n  {gray-fg}[Enter] Close{/gray-fg}`);
-            screen.render();
-            modal.focus();
-            modal.key(['enter', 'escape'], () => {
-                screen.remove(modal);
-                registerHandlers();
-                render();
-                resolve();
-            });
-        });
+    /**
+     * Show success modal
+     * @param message - Success message to display
+     * @param onClose - Optional callback when modal closes. Defaults to registering handlers + render.
+     *                  Pass empty function for complex flows where outer function manages handlers.
+     */
+    async function showSuccess(message, onClose) {
+        await modalController.showSuccess(message, onClose || (() => {
+            registerHandlers();
+            render();
+        }));
     }
     // Save changes
     async function saveChanges() {
         // Build updates object
         const modelField = state.fields.find(f => f.key === 'model');
+        const aliasField = state.fields.find(f => f.key === 'alias');
         const hostField = state.fields.find(f => f.key === 'host');
         const portField = state.fields.find(f => f.key === 'port');
         const threadsField = state.fields.find(f => f.key === 'threads');
@@ -763,10 +790,13 @@ async function createConfigUI(screen, server, onBack) {
         const wasRunning = currentStatus.status === 'running';
         let shouldRestart = false;
         if (wasRunning) {
-            shouldRestart = await showRestartDialog();
+            unregisterHandlers();
+            // Pass empty onClose - saveChanges manages handler registration
+            shouldRestart = await showRestartDialog(() => { });
+            registerHandlers();
         }
         // Show progress
-        const progressModal = showProgress('Saving configuration...');
+        const progressModal = modalController.showProgress('Saving configuration...');
         try {
             // Parse custom flags
             const customFlags = customFlagsField.value
@@ -797,6 +827,7 @@ async function createConfigUI(screen, server, onBack) {
                     id: newServerId,
                     modelPath: newModelPath,
                     modelName: newModelName,
+                    ...(aliasField.value ? { alias: aliasField.value } : { alias: undefined }),
                     host: hostField.value,
                     port: portField.value,
                     threads: threadsField.value,
@@ -804,8 +835,8 @@ async function createConfigUI(screen, server, onBack) {
                     gpuLayers: gpuLayersField.value,
                     verbose: verboseField.value,
                     customFlags: customFlags && customFlags.length > 0 ? customFlags : undefined,
-                    label: `com.llama.${newServerId}`,
-                    plistPath: path.join(plistDir, `com.llama.${newServerId}.plist`),
+                    label: `studio.appkit.llamacpp-cli.${newServerId}`,
+                    plistPath: path.join(plistDir, `studio.appkit.llamacpp-cli.${newServerId}.plist`),
                     stdoutPath: path.join(logsDir, `${newServerId}.stdout`),
                     stderrPath: path.join(logsDir, `${newServerId}.stderr`),
                     status: 'stopped',
@@ -823,10 +854,10 @@ async function createConfigUI(screen, server, onBack) {
                     await launchctl_manager_js_1.launchctlManager.startService(newConfig.label);
                     await new Promise(resolve => setTimeout(resolve, 2000));
                     const finalStatus = await status_checker_js_1.statusChecker.updateServerStatus(newConfig);
-                    screen.remove(progressModal);
+                    modalController.closeProgress(progressModal);
                     return finalStatus;
                 }
-                screen.remove(progressModal);
+                modalController.closeProgress(progressModal);
                 return newConfig;
             }
             else {
@@ -845,6 +876,7 @@ async function createConfigUI(screen, server, onBack) {
                     gpuLayers: gpuLayersField.value,
                     verbose: verboseField.value,
                     customFlags: customFlags && customFlags.length > 0 ? customFlags : undefined,
+                    ...(aliasField.value ? { alias: aliasField.value } : { alias: undefined }),
                 };
                 if (newModelPath && newModelName) {
                     updatedConfig.modelPath = newModelPath;
@@ -871,20 +903,20 @@ async function createConfigUI(screen, server, onBack) {
                         await launchctl_manager_js_1.launchctlManager.startService(fullConfig.label);
                         await new Promise(resolve => setTimeout(resolve, 2000));
                         const finalStatus = await status_checker_js_1.statusChecker.updateServerStatus(fullConfig);
-                        screen.remove(progressModal);
+                        modalController.closeProgress(progressModal);
                         return finalStatus;
                     }
-                    screen.remove(progressModal);
+                    modalController.closeProgress(progressModal);
                     return fullConfig;
                 }
             }
         }
         catch (err) {
-            screen.remove(progressModal);
+            modalController.closeProgress(progressModal);
             await showError(err instanceof Error ? err.message : 'Unknown error');
             return null;
         }
-        screen.remove(progressModal);
+        modalController.closeProgress(progressModal);
         return null;
     }
     // Handle edit action for selected field
@@ -908,8 +940,14 @@ async function createConfigUI(screen, server, onBack) {
     }
     // Handle escape/cancel
     async function handleEscape() {
+        // Don't handle if modal is open
+        if (modalController.isModalOpen())
+            return;
         if (state.hasChanges) {
-            const result = await showUnsavedDialog();
+            unregisterHandlers();
+            // Pass empty onClose - handleEscape manages handler registration
+            const result = await showUnsavedDialog(() => { });
+            registerHandlers();
             if (result === 'save') {
                 const updated = await saveChanges();
                 cleanup();