dexto 1.5.8 → 1.6.1

package/dist/cli/ink-cli/components/overlays/ModelSelectorRefactored.js

@@ -7,13 +7,38 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  */
 import { useState, useEffect, forwardRef, useRef, useImperativeHandle, useMemo, useCallback, } from 'react';
 import { Box, Text } from 'ink';
+import { useTerminalSize } from '../../hooks/useTerminalSize.js';
 import { listOllamaModels, DEFAULT_OLLAMA_URL, getLocalModelById, isReasoningCapableModel, } from '@dexto/core';
 import { loadCustomModels, deleteCustomModel, getAllInstalledModels, loadGlobalPreferences, isDextoAuthEnabled, } from '@dexto/agent-management';
 import { getLLMProviderDisplayName } from '../../utils/llm-provider-display.js';
+import { getMaxVisibleItemsForTerminalRows } from '../../utils/overlaySizing.js';
+import { HintBar } from '../shared/HintBar.js';
 function isAddCustomOption(item) {
     return 'type' in item && item.type === 'add-custom';
 }
-const MAX_VISIBLE_ITEMS = 10;
+function asModelOption(item) {
+    return item;
+}
+function getRowPrefix({ isSelected, isDefault, isCurrent, isCustom, }) {
+    return `${isSelected ? '›' : ' '} ${isDefault ? '✓' : ' '} ${isCurrent ? '●' : ' '} ${isCustom ? '★' : ' '}`;
+}
+function computeNextSelection(currentIndex, itemsLength, viewportItems) {
+    const nextIndex = currentIndex;
+    let nextOffset = 0;
+    const modelsLength = Math.max(0, itemsLength - 1);
+    if (nextIndex > 0) {
+        const modelIndex = nextIndex - 1;
+        if (modelIndex < nextOffset) {
+            nextOffset = modelIndex;
+        }
+        else if (modelIndex >= nextOffset + viewportItems) {
+            nextOffset = Math.max(0, modelIndex - viewportItems + 1);
+        }
+    }
+    const maxOffset = Math.max(0, modelsLength - viewportItems);
+    nextOffset = Math.min(maxOffset, Math.max(0, nextOffset));
+    return { index: nextIndex, offset: nextOffset };
+}
 // Reasoning effort options - defined at module scope to avoid recreation on each render
 const REASONING_EFFORT_OPTIONS = [
     {
@@ -36,23 +61,33 @@ const REASONING_EFFORT_OPTIONS = [
  * Model selector with search and custom model support
  */
 const ModelSelector = forwardRef(function ModelSelector({ isVisible, onSelectModel, onSetDefaultModel, onClose, onAddCustomModel, onEditCustomModel, agent, }, ref) {
+    const { rows: terminalRows } = useTerminalSize();
+    const maxVisibleItems = useMemo(() => {
+        return getMaxVisibleItemsForTerminalRows({
+            rows: terminalRows,
+            hardCap: 8,
+            reservedRows: 14,
+        });
+    }, [terminalRows]);
     const [models, setModels] = useState([]);
     const [customModels, setCustomModels] = useState([]);
     const [isLoading, setIsLoading] = useState(false);
-    const [selectedIndex, setSelectedIndex] = useState(0);
+    const [selection, setSelection] = useState({ index: 0, offset: 0 });
     const [searchQuery, setSearchQuery] = useState('');
-    const [scrollOffset, setScrollOffset] = useState(0);
     const [customModelAction, setCustomModelAction] = useState(null);
     const [pendingDeleteConfirm, setPendingDeleteConfirm] = useState(false);
-    const selectedIndexRef = useRef(selectedIndex);
+    const selectedIndexRef = useRef(0);
     const deleteTimeoutRef = useRef(null);
+    const maxVisibleItemsRef = useRef(maxVisibleItems);
     // Reasoning effort sub-step state
     const [pendingReasoningModel, setPendingReasoningModel] = useState(null);
     const [reasoningEffortIndex, setReasoningEffortIndex] = useState(0); // Default to 'Auto' (index 0)
     const [isSettingDefault, setIsSettingDefault] = useState(false); // Track if setting as default vs normal selection
     const [refreshVersion, setRefreshVersion] = useState(0);
     // Keep ref in sync
-    selectedIndexRef.current = selectedIndex;
+    selectedIndexRef.current = selection.index;
+    maxVisibleItemsRef.current = maxVisibleItems;
+    const modelsViewportItems = Math.max(1, maxVisibleItems - 1);
     // Clear delete confirmation timeout on unmount
     useEffect(() => {
         return () => {
@@ -67,9 +102,10 @@ const ModelSelector = forwardRef(function ModelSelector({ isVisible, onSelectMod
             return;
         let cancelled = false;
         setIsLoading(true);
+        setModels([]);
+        setCustomModels([]);
         setSearchQuery('');
-        setSelectedIndex(0);
-        setScrollOffset(0);
+        setSelection({ index: 0, offset: 0 });
         setCustomModelAction(null);
         setPendingDeleteConfirm(false);
         setPendingReasoningModel(null);
@@ -237,7 +273,13 @@ const ModelSelector = forwardRef(function ModelSelector({ isVisible, onSelectMod
                     // Set initial selection to current model (offset by 1 for "Add custom" option)
                     const currentIndex = modelList.findIndex((m) => m.isCurrent);
                     if (currentIndex >= 0) {
-                        setSelectedIndex(currentIndex + 1); // +1 for "Add custom" at top
+                        const nextIndex = currentIndex + 1; // +1 for "Add custom" at top
+                        const nextMaxVisibleItems = maxVisibleItemsRef.current;
+                        const nextModelsViewportItems = Math.max(1, nextMaxVisibleItems - 1);
+                        const maxOffset = Math.max(0, modelList.length - nextModelsViewportItems);
+                        const nextOffset = Math.min(maxOffset, Math.max(0, currentIndex - nextModelsViewportItems + 1));
+                        selectedIndexRef.current = nextIndex;
+                        setSelection({ index: nextIndex, offset: nextOffset });
                     }
                 }
             }
@@ -260,31 +302,41 @@ const ModelSelector = forwardRef(function ModelSelector({ isVisible, onSelectMod
         if (!searchQuery.trim()) {
             return [addCustomOption, ...models];
         }
-        const query = searchQuery.toLowerCase();
+        const query = searchQuery.toLowerCase().replace(/[\s-]+/g, '');
         const filtered = models.filter((model) => {
-            const name = model.name.toLowerCase();
-            const displayName = (model.displayName || '').toLowerCase();
-            const provider = model.provider.toLowerCase();
+            const name = model.name.toLowerCase().replace(/[\s-]+/g, '');
+            const displayName = (model.displayName || '').toLowerCase().replace(/[\s-]+/g, '');
+            const provider = model.provider.toLowerCase().replace(/[\s-]+/g, '');
             return name.includes(query) || displayName.includes(query) || provider.includes(query);
         });
         // Always show "Add custom" when searching (user might want to add what they're searching for)
         return [addCustomOption, ...filtered];
     }, [models, searchQuery]);
-    // Adjust selected index when filter changes
-    useEffect(() => {
-        if (selectedIndex >= filteredItems.length) {
-            setSelectedIndex(Math.max(0, filteredItems.length - 1));
-        }
-    }, [filteredItems.length, selectedIndex]);
-    // Calculate scroll offset
+    // Keep selection valid and visible when filtering or terminal height changes.
     useEffect(() => {
-        if (selectedIndex < scrollOffset) {
-            setScrollOffset(selectedIndex);
-        }
-        else if (selectedIndex >= scrollOffset + MAX_VISIBLE_ITEMS) {
-            setScrollOffset(selectedIndex - MAX_VISIBLE_ITEMS + 1);
-        }
-    }, [selectedIndex, scrollOffset]);
+        setSelection((prev) => {
+            const maxIndex = Math.max(0, filteredItems.length - 1);
+            const nextIndex = Math.min(prev.index, maxIndex);
+            let nextOffset = prev.offset;
+            const nextModelsLength = Math.max(0, filteredItems.length - 1);
+            if (nextIndex > 0) {
+                const modelIndex = nextIndex - 1;
+                if (modelIndex < nextOffset) {
+                    nextOffset = modelIndex;
+                }
+                else if (modelIndex >= nextOffset + modelsViewportItems) {
+                    nextOffset = Math.max(0, modelIndex - modelsViewportItems + 1);
+                }
+            }
+            const maxOffset = Math.max(0, nextModelsLength - modelsViewportItems);
+            nextOffset = Math.min(maxOffset, Math.max(0, nextOffset));
+            if (nextIndex === prev.index && nextOffset === prev.offset) {
+                return prev;
+            }
+            selectedIndexRef.current = nextIndex;
+            return { index: nextIndex, offset: nextOffset };
+        });
+    }, [filteredItems.length, modelsViewportItems]);
     // Handle delete custom model
     const handleDeleteCustomModel = useCallback(async (model) => {
         if (!model.isCustom)
@@ -315,6 +367,13 @@ const ModelSelector = forwardRef(function ModelSelector({ isVisible, onSelectMod
         handleInput: (input, key) => {
             if (!isVisible)
                 return false;
+            // While loading, allow closing but ignore all other input.
+            if (isLoading) {
+                if (key.escape) {
+                    onClose();
+                }
+                return true;
+            }
             // Handle reasoning effort sub-step
             if (pendingReasoningModel) {
                 if (key.escape) {
@@ -391,41 +450,10 @@ const ModelSelector = forwardRef(function ModelSelector({ isVisible, onSelectMod
                         setPendingDeleteConfirm(false);
                         return true;
                     }
-                    const actionItem = currentItem;
-                    // Check if reasoning-capable, show reasoning effort selection
-                    if (isReasoningCapableModel(actionItem.name)) {
-                        setPendingReasoningModel(actionItem);
-                        setIsSettingDefault(true);
-                        setReasoningEffortIndex(0); // Default to 'Auto'
-                        return true;
-                    }
-                    clearActionState();
-                    void (async () => {
-                        await onSetDefaultModel(actionItem.provider, actionItem.name, actionItem.displayName, actionItem.baseURL, actionItem.reasoningEffort);
-                        setRefreshVersion((prev) => prev + 1);
-                        onClose(); // Close overlay after setting default
-                    })();
                     return true;
                 }
                 if (customModelAction === 'delete') {
-                    if (pendingDeleteConfirm) {
-                        if (deleteTimeoutRef.current) {
-                            clearTimeout(deleteTimeoutRef.current);
-                            deleteTimeoutRef.current = null;
-                        }
-                        clearActionState();
-                        void handleDeleteCustomModel(currentItem);
-                    }
-                    else {
-                        setPendingDeleteConfirm(true);
-                        if (deleteTimeoutRef.current) {
-                            clearTimeout(deleteTimeoutRef.current);
-                        }
-                        deleteTimeoutRef.current = setTimeout(() => {
-                            setPendingDeleteConfirm(false);
-                            deleteTimeoutRef.current = null;
-                        }, 3000);
-                    }
+                    // Use Enter for delete confirmation/execution to avoid accidental deletes.
                     return true;
                 }
             }
@@ -469,8 +497,8 @@ const ModelSelector = forwardRef(function ModelSelector({ isVisible, onSelectMod
                 // Regular character - add to search
                 if (input.length === 1 && input.charCodeAt(0) >= 32) {
                     setSearchQuery((prev) => prev + input);
-                    setSelectedIndex(0);
-                    setScrollOffset(0);
+                    selectedIndexRef.current = 0;
+                    setSelection({ index: 0, offset: 0 });
                     return true;
                 }
             }
@@ -487,8 +515,23 @@ const ModelSelector = forwardRef(function ModelSelector({ isVisible, onSelectMod
                     clearActionState();
                 }
                 const nextIndex = (selectedIndexRef.current - 1 + itemsLength) % itemsLength;
-                setSelectedIndex(nextIndex);
                 selectedIndexRef.current = nextIndex;
+                setSelection((prev) => {
+                    let nextOffset = prev.offset;
+                    const nextModelsLength = Math.max(0, itemsLength - 1);
+                    if (nextIndex > 0) {
+                        const modelIndex = nextIndex - 1;
+                        if (modelIndex < prev.offset) {
+                            nextOffset = modelIndex;
+                        }
+                        else if (modelIndex >= prev.offset + modelsViewportItems) {
+                            nextOffset = Math.max(0, modelIndex - modelsViewportItems + 1);
+                        }
+                    }
+                    const maxOffset = Math.max(0, nextModelsLength - modelsViewportItems);
+                    nextOffset = Math.min(maxOffset, Math.max(0, nextOffset));
+                    return { index: nextIndex, offset: nextOffset };
+                });
                 return true;
             }
             if (key.downArrow) {
@@ -497,8 +540,23 @@ const ModelSelector = forwardRef(function ModelSelector({ isVisible, onSelectMod
                     clearActionState();
                 }
                 const nextIndex = (selectedIndexRef.current + 1) % itemsLength;
-                setSelectedIndex(nextIndex);
                 selectedIndexRef.current = nextIndex;
+                setSelection((prev) => {
+                    let nextOffset = prev.offset;
+                    const nextModelsLength = Math.max(0, itemsLength - 1);
+                    if (nextIndex > 0) {
+                        const modelIndex = nextIndex - 1;
+                        if (modelIndex < prev.offset) {
+                            nextOffset = modelIndex;
+                        }
+                        else if (modelIndex >= prev.offset + modelsViewportItems) {
+                            nextOffset = Math.max(0, modelIndex - modelsViewportItems + 1);
+                        }
+                    }
+                    const maxOffset = Math.max(0, nextModelsLength - modelsViewportItems);
+                    nextOffset = Math.min(maxOffset, Math.max(0, nextOffset));
+                    return { index: nextIndex, offset: nextOffset };
+                });
                 return true;
             }
             if (key.return && itemsLength > 0) {
@@ -568,7 +626,10 @@ const ModelSelector = forwardRef(function ModelSelector({ isVisible, onSelectMod
         },
     }), [
         isVisible,
+        isLoading,
         filteredItems,
+        maxVisibleItems,
+        modelsViewportItems,
         onClose,
         onSelectModel,
         onSetDefaultModel,
@@ -584,47 +645,99 @@ const ModelSelector = forwardRef(function ModelSelector({ isVisible, onSelectMod
     ]);
     if (!isVisible)
         return null;
-    if (isLoading) {
-        return (_jsx(Box, { paddingX: 0, paddingY: 0, children: _jsx(Text, { color: "gray", children: "Loading models..." }) }));
-    }
     // Reasoning effort sub-step UI
     if (pendingReasoningModel) {
-        return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Box, { paddingX: 0, paddingY: 0, children: _jsxs(Text, { color: "cyan", bold: true, children: ["Configure Reasoning Effort", isSettingDefault && _jsx(Text, { color: "gray", children: " (Setting as Default)" })] }) }), _jsx(Box, { paddingX: 0, paddingY: 0, children: _jsxs(Text, { color: "gray", children: ["for ", pendingReasoningModel.displayName || pendingReasoningModel.name] }) }), _jsx(Box, { paddingX: 0, paddingY: 0, children: _jsx(Text, { color: "gray", children: "\u2191\u2193 navigate, Enter select, Esc back" }) }), _jsx(Box, { paddingX: 0, paddingY: 0, children: _jsx(Text, { color: "gray", children: '─'.repeat(50) }) }), REASONING_EFFORT_OPTIONS.map((option, index) => {
-                    const isSelected = index === reasoningEffortIndex;
-                    return (_jsxs(Box, { paddingX: 0, paddingY: 0, children: [_jsxs(Text, { color: isSelected ? 'cyan' : 'gray', bold: isSelected, children: [isSelected ? '› ' : '  ', option.label] }), _jsxs(Text, { color: isSelected ? 'white' : 'gray', children: [' ', "- ", option.description] })] }, option.value));
-                })] }));
+        const reasoningVisibleItems = Math.min(maxVisibleItems, REASONING_EFFORT_OPTIONS.length);
+        const reasoningOffset = Math.min(Math.max(0, reasoningEffortIndex - reasoningVisibleItems + 1), Math.max(0, REASONING_EFFORT_OPTIONS.length - reasoningVisibleItems));
+        const visibleReasoningOptions = REASONING_EFFORT_OPTIONS.slice(reasoningOffset, reasoningOffset + reasoningVisibleItems);
+        const selectedReasoningOption = REASONING_EFFORT_OPTIONS[reasoningEffortIndex];
+        return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Box, { paddingX: 0, paddingY: 0, children: _jsxs(Text, { color: "cyan", bold: true, children: ["Reasoning Effort", isSettingDefault ? _jsx(Text, { color: "gray", children: " (default)" }) : null] }) }), _jsx(Box, { paddingX: 0, paddingY: 0, children: _jsx(Text, { color: "gray", wrap: "truncate-end", children: pendingReasoningModel.displayName || pendingReasoningModel.name }) }), _jsx(Box, { flexDirection: "column", height: maxVisibleItems, marginTop: 1, children: Array.from({ length: maxVisibleItems }, (_, rowIndex) => {
+                        const option = visibleReasoningOptions[rowIndex];
+                        if (!option) {
+                            return (_jsx(Box, { paddingX: 0, paddingY: 0, children: _jsx(Text, { children: " " }) }, `reasoning-empty-${rowIndex}`));
+                        }
+                        const actualIndex = reasoningOffset + rowIndex;
+                        const isSelected = actualIndex === reasoningEffortIndex;
+                        return (_jsx(Box, { paddingX: 0, paddingY: 0, children: _jsxs(Text, { color: isSelected ? 'cyan' : 'gray', bold: isSelected, wrap: "truncate-end", children: [isSelected ? '›' : ' ', " ", option.label] }) }, option.value));
+                    }) }), _jsx(Box, { paddingX: 0, paddingY: 0, marginTop: 1, children: _jsx(Text, { color: "gray", wrap: "truncate-end", children: selectedReasoningOption?.description ?? '' }) }), _jsx(Box, { paddingX: 0, paddingY: 0, children: _jsx(HintBar, { hints: ['↑↓ navigate', 'Enter select', 'Esc back'] }) })] }));
     }
-    const visibleItems = filteredItems.slice(scrollOffset, scrollOffset + MAX_VISIBLE_ITEMS);
-    const hasCustomModels = customModels.length > 0;
-    const hasActionableItems = filteredItems.some((item) => !isAddCustomOption(item));
+    const selectedIndex = selection.index;
+    const scrollOffset = selection.offset;
+    const modelsOnly = filteredItems.slice(1);
+    const visibleModels = modelsOnly.slice(scrollOffset, scrollOffset + modelsViewportItems);
     const selectedItem = filteredItems[selectedIndex];
-    const isSelectedCustom = selectedItem && !isAddCustomOption(selectedItem) && selectedItem.isCustom;
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Box, { paddingX: 0, paddingY: 0, children: _jsxs(Text, { color: "cyan", bold: true, children: ["Select Model (", selectedIndex + 1, "/", filteredItems.length, ")"] }) }), _jsxs(Box, { paddingX: 0, paddingY: 0, children: [_jsx(Text, { color: "gray", children: "\u2191\u2193 navigate, Enter select, Esc close" }), hasActionableItems && _jsx(Text, { color: "gray", children: ", \u2192\u2190 for actions" })] }), _jsxs(Box, { paddingX: 0, paddingY: 0, children: [_jsx(Text, { color: "gray", children: "\uD83D\uDD0D " }), _jsx(Text, { color: searchQuery ? 'white' : 'gray', children: searchQuery || 'Type to search...' }), _jsx(Text, { color: "cyan", children: "\u258C" })] }), _jsx(Box, { paddingX: 0, paddingY: 0, children: _jsx(Text, { color: "gray", children: '─'.repeat(50) }) }), visibleItems.map((item, visibleIndex) => {
-                const actualIndex = scrollOffset + visibleIndex;
-                const isSelected = actualIndex === selectedIndex;
-                if (isAddCustomOption(item)) {
-                    return (_jsx(Box, { paddingX: 0, paddingY: 0, children: _jsx(Text, { color: isSelected ? 'green' : 'gray', bold: isSelected, children: "\u2795 Add custom model..." }) }, "add-custom"));
-                }
-                // Show action buttons for selected custom models
-                const showActions = isSelected && !isAddCustomOption(item);
-                // Keep the UI label simple: show the actual provider being selected.
-                // Gateway routing details are intentionally hidden from the main picker.
-                const providerDisplay = getLLMProviderDisplayName(item.provider);
-                return (_jsxs(Box, { paddingX: 0, paddingY: 0, children: [item.isCustom && _jsx(Text, { color: isSelected ? 'orange' : 'gray', children: "\u2605 " }), _jsx(Text, { color: isSelected ? 'cyan' : 'gray', bold: isSelected, children: item.displayName || item.name }), _jsxs(Text, { color: isSelected ? 'white' : 'gray', children: [" (", providerDisplay, ")"] }), _jsxs(Text, { color: isSelected ? 'white' : 'gray', children: [' ', "\u2022 ", item.maxInputTokens.toLocaleString(), " tokens"] }), item.isDefault && (_jsx(Text, { color: isSelected ? 'white' : 'gray', children: " [DEFAULT]" })), item.isCurrent && !showActions && (_jsxs(Text, { color: isSelected ? 'cyan' : 'gray', bold: isSelected, children: [' ', "\u2190 Current"] })), showActions && (_jsxs(_Fragment, { children: [item.isCustom && (_jsxs(_Fragment, { children: [_jsx(Text, { children: " " }), _jsxs(Text, { color: customModelAction === 'edit' ? 'green' : 'gray', bold: customModelAction === 'edit', inverse: customModelAction === 'edit', children: [' ', "Edit", ' '] })] })), _jsx(Text, { children: " " }), _jsxs(Text, { color: customModelAction === 'default' ? 'cyan' : 'gray', bold: customModelAction === 'default', inverse: customModelAction === 'default', children: [' ', "Set as Default", ' '] }), item.isCustom && (_jsxs(_Fragment, { children: [_jsx(Text, { children: " " }), _jsxs(Text, { color: customModelAction === 'delete' ? 'red' : 'gray', bold: customModelAction === 'delete', inverse: customModelAction === 'delete', children: [' ', "Delete", ' '] })] }))] }))] }, `${item.provider}-${item.name}-${item.isCustom ? 'custom' : 'registry'}`));
-            }), filteredItems.length > MAX_VISIBLE_ITEMS && (_jsx(Box, { paddingX: 0, paddingY: 0, children: _jsxs(Text, { color: "gray", wrap: "truncate", children: [scrollOffset > 0 ? '↑ more above' : '', scrollOffset > 0 && scrollOffset + MAX_VISIBLE_ITEMS < filteredItems.length
-                            ? ' • '
-                            : '', scrollOffset + MAX_VISIBLE_ITEMS < filteredItems.length
-                            ? '↓ more below'
-                            : ''] }) })), customModelAction === 'delete' && pendingDeleteConfirm && (_jsx(Box, { paddingX: 0, paddingY: 0, marginTop: 1, children: _jsx(Text, { color: "yellowBright", children: "\u26A0\uFE0F Press \u2192 or Enter again to confirm delete" }) })), customModelAction && !pendingDeleteConfirm && (_jsx(Box, { paddingX: 0, paddingY: 0, marginTop: 1, children: _jsxs(Text, { color: "gray", children: ["\u2190", ' ', customModelAction === 'edit'
-                            ? 'deselect'
-                            : isSelectedCustom
-                                ? 'edit'
-                                : 'deselect', ' ', "| \u2192", ' ', customModelAction === 'edit'
-                            ? 'default'
-                            : customModelAction === 'default'
-                                ? isSelectedCustom
-                                    ? 'delete'
-                                    : 'confirm'
-                                : 'confirm', ' ', "| Enter ", customModelAction] }) }))] }));
+    const hasActionableItems = selectedItem && !isAddCustomOption(selectedItem);
+    let detailLine = '';
+    if (isLoading) {
+        detailLine = 'Loading models…';
+    }
+    else if (customModelAction === 'delete' && pendingDeleteConfirm) {
+        detailLine = 'Confirm delete: press Enter again';
+    }
+    else if (customModelAction) {
+        const label = customModelAction === 'edit'
+            ? 'Edit'
+            : customModelAction === 'default'
+                ? 'Set as default'
+                : 'Delete';
+        detailLine = `Action: ${label}`;
+    }
+    else if (searchQuery.trim() && filteredItems.length <= 1) {
+        detailLine = 'No models match your search';
+    }
+    else if (!selectedItem) {
+        detailLine = '';
+    }
+    else if (isAddCustomOption(selectedItem)) {
+        detailLine = 'Enter to add a custom model';
+    }
+    else {
+        const provider = getLLMProviderDisplayName(selectedItem.provider);
+        const name = selectedItem.displayName || selectedItem.name;
+        const flags = [];
+        if (selectedItem.isDefault)
+            flags.push('default');
+        if (selectedItem.isCurrent)
+            flags.push('current');
+        detailLine =
+            flags.length > 0
+                ? `${name} (${provider}) • ${flags.join(', ')}`
+                : `${name} (${provider})`;
+    }
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Box, { paddingX: 0, paddingY: 0, children: _jsx(Text, { color: "cyan", bold: true, children: "Models" }) }), _jsxs(Box, { paddingX: 0, paddingY: 0, marginTop: 1, children: [_jsx(Text, { color: "gray", children: "Search: " }), _jsx(Text, { color: searchQuery ? 'white' : 'gray', wrap: "truncate-end", children: searchQuery || 'Type to filter models…' })] }), _jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Box, { paddingX: 0, paddingY: 0, children: _jsxs(Text, { color: selectedIndex === 0 ? 'green' : 'gray', bold: selectedIndex === 0, wrap: "truncate-end", children: [getRowPrefix({
+                                    isSelected: selectedIndex === 0,
+                                    isDefault: false,
+                                    isCurrent: false,
+                                    isCustom: false,
+                                }), ' ', "Add custom model\u2026"] }) }), _jsx(Box, { flexDirection: "column", height: modelsViewportItems, children: isLoading || modelsOnly.length === 0
+                            ? Array.from({ length: modelsViewportItems }, (_, index) => (_jsx(Box, { paddingX: 0, paddingY: 0, children: _jsx(Text, { children: " " }) }, `model-empty-${index}`)))
+                            : Array.from({ length: modelsViewportItems }, (_, rowIndex) => {
+                                const item = visibleModels[rowIndex];
+                                if (!item) {
+                                    return (_jsx(Box, { paddingX: 0, paddingY: 0, children: _jsx(Text, { children: " " }) }, `model-empty-${rowIndex}`));
+                                }
+                                const actualIndex = 1 + scrollOffset + rowIndex;
+                                const isSelected = actualIndex === selectedIndex;
+                                const providerDisplay = getLLMProviderDisplayName(item.provider);
+                                const name = item.displayName || item.name;
+                                const prefix = getRowPrefix({
+                                    isSelected,
+                                    isDefault: item.isDefault,
+                                    isCurrent: item.isCurrent,
+                                    isCustom: item.isCustom,
+                                });
+                                return (_jsxs(Box, { flexDirection: "row", paddingX: 0, paddingY: 0, children: [_jsx(Box, { flexGrow: 1, children: _jsxs(Text, { color: isSelected ? 'cyan' : 'gray', bold: isSelected, wrap: "truncate-end", children: [prefix, " ", name, " (", providerDisplay, ")"] }) }), isSelected && (_jsxs(Box, { flexDirection: "row", marginLeft: 1, children: [item.isCustom && (_jsxs(_Fragment, { children: [_jsxs(Text, { color: customModelAction === 'edit'
+                                                                ? 'green'
+                                                                : 'gray', bold: customModelAction === 'edit', inverse: customModelAction === 'edit', children: [' ', "Edit", ' '] }), _jsx(Text, { children: " " })] })), _jsxs(Text, { color: customModelAction === 'default'
+                                                        ? 'cyan'
+                                                        : 'gray', bold: customModelAction === 'default', inverse: customModelAction === 'default', children: [' ', "Set as Default", ' '] }), item.isCustom && (_jsxs(_Fragment, { children: [_jsx(Text, { children: " " }), _jsxs(Text, { color: customModelAction === 'delete'
+                                                                ? 'red'
+                                                                : 'gray', bold: customModelAction === 'delete', inverse: customModelAction === 'delete', children: [' ', "Delete", ' '] })] }))] }))] }, `${item.provider}-${item.name}-${item.isCustom ? 'custom' : 'registry'}`));
+                            }) })] }), _jsx(Box, { paddingX: 0, paddingY: 0, marginTop: 1, children: _jsx(Text, { color: "gray", wrap: "truncate-end", children: detailLine }) }), _jsx(Box, { paddingX: 0, paddingY: 0, children: _jsx(HintBar, { hints: [
+                        '↑↓ navigate',
+                        'Enter select',
+                        'Esc close',
+                        hasActionableItems ? '←→ actions' : '',
+                    ] }) })] }));
 });
 export default ModelSelector;

package/dist/cli/ink-cli/components/overlays/PromptList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PromptList.d.ts","sourceRoot":"","sources":["../../../../../src/cli/ink-cli/components/overlays/PromptList.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAQN,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,qCAAqC,CAAC;AAC/D,OAAO,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAG1D,MAAM,MAAM,gBAAgB,GACtB;IAAE,IAAI,EAAE,eAAe,CAAC;IAAC,MAAM,EAAE,UAAU,CAAA;CAAE,GAC7C;IAAE,IAAI,EAAE,YAAY,CAAA;CAAE,GACtB;IAAE,IAAI,EAAE,eAAe,CAAA;CAAE,CAAC;AAEhC,UAAU,eAAe;IACrB,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,CAAC,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAC7C,eAAe,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,EAAE,UAAU,CAAC;CACrB;AAED,MAAM,WAAW,gBAAgB;IAC7B,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,OAAO,CAAC;IAClD,OAAO,EAAE,MAAM,IAAI,CAAC;CACvB;AAuCD;;GAEG;AACH,QAAA,MAAM,UAAU,0FAqKd,CAAC;AAEH,eAAe,UAAU,CAAC"}
+{"version":3,"file":"PromptList.d.ts","sourceRoot":"","sources":["../../../../../src/cli/ink-cli/components/overlays/PromptList.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAQN,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,qCAAqC,CAAC;AAC/D,OAAO,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAG1D,MAAM,MAAM,gBAAgB,GACtB;IAAE,IAAI,EAAE,eAAe,CAAC;IAAC,MAAM,EAAE,UAAU,CAAA;CAAE,GAC7C;IAAE,IAAI,EAAE,YAAY,CAAA;CAAE,GACtB;IAAE,IAAI,EAAE,eAAe,CAAA;CAAE,CAAC;AAEhC,UAAU,eAAe;IACrB,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,CAAC,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAC7C,eAAe,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,EAAE,UAAU,CAAC;CACrB;AAED,MAAM,WAAW,gBAAgB;IAC7B,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,OAAO,CAAC;IAClD,OAAO,EAAE,MAAM,IAAI,CAAC;CACvB;AAuCD;;GAEG;AACH,QAAA,MAAM,UAAU,0FAgKd,CAAC;AAEH,eAAe,UAAU,CAAC"}

package/dist/cli/ink-cli/components/overlays/PromptList.js

@@ -66,7 +66,7 @@ const PromptList = forwardRef(function PromptList({ isVisible, onAction, onLoadI
             setIsLoading(false);
         })
             .catch((err) => {
-            console.error(`PromptList: Failed to load prompts: ${err}`);
+            agent.logger.error(`PromptList: Failed to load prompts: ${err instanceof Error ? err.message : String(err)}`);
             setPrompts([]);
             setIsLoading(false);
         });
@@ -88,21 +88,17 @@ const PromptList = forwardRef(function PromptList({ isVisible, onAction, onLoadI
     }, [isVisible, refreshKey, loadPrompts]);
     // Build list items: prompts + Add/Delete actions
     const items = useMemo(() => {
-        const list = prompts.map((prompt) => ({
-            id: prompt.name,
-            type: 'prompt',
-            prompt,
-        }));
-        // Add action items at the end
-        list.push({
-            id: '__add__',
-            type: 'add',
-        });
-        list.push({
-            id: '__delete__',
-            type: 'delete',
-        });
-        return list;
+        return [
+            // Action items at the top
+            { id: '__add__', type: 'add' },
+            { id: '__delete__', type: 'delete' },
+            // Prompts list
+            ...prompts.map((prompt) => ({
+                id: prompt.name,
+                type: 'prompt',
+                prompt,
+            })),
+        ];
     }, [prompts]);
     // Format item for display
     const formatItem = (item, isSelected) => {

package/dist/cli/ink-cli/components/overlays/SoundsSelector.d.ts

@@ -0,0 +1,21 @@
+/**
+ * SoundsSelector Component
+ * Interactive overlay for configuring sound notifications and selecting built-in sounds.
+ *
+ * Built-in sounds are copied into the Dexto sounds directory (typically ~/.dexto/sounds/builtins/)
+ * and selected via preferences.yml using paths relative to that directory (e.g., builtins/coin.wav).
+ *
+ * This reuses the existing sound resolution logic in soundNotification.ts.
+ */
+import React from 'react';
+import type { Key } from '../../hooks/useInputOrchestrator.js';
+interface SoundsSelectorProps {
+    isVisible: boolean;
+    onClose: () => void;
+}
+export interface SoundsSelectorHandle {
+    handleInput: (input: string, key: Key) => boolean;
+}
+declare const SoundsSelector: React.ForwardRefExoticComponent<SoundsSelectorProps & React.RefAttributes<SoundsSelectorHandle>>;
+export default SoundsSelector;
+//# sourceMappingURL=SoundsSelector.d.ts.map

package/dist/cli/ink-cli/components/overlays/SoundsSelector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SoundsSelector.d.ts","sourceRoot":"","sources":["../../../../../src/cli/ink-cli/components/overlays/SoundsSelector.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAQN,MAAM,OAAO,CAAC;AAKf,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,qCAAqC,CAAC;AAkB/D,UAAU,mBAAmB;IACzB,SAAS,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,MAAM,WAAW,oBAAoB;IACjC,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,OAAO,CAAC;CACrD;AAuMD,QAAA,MAAM,cAAc,kGAsiBnB,CAAC;AAEF,eAAe,cAAc,CAAC"}