dexto 1.6.0 → 1.6.1

package/dist/cli/ink-cli/components/modes/AlternateBufferCLI.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * AlternateBufferCLI - VirtualizedList rendering mode
  *
@@ -30,6 +30,7 @@ import { VirtualizedList, SCROLL_TO_ITEM_END, } from '../shared/VirtualizedList.
 // Containers
 import { InputContainer } from '../../containers/InputContainer.js';
 import { OverlayContainer } from '../../containers/OverlayContainer.js';
+import { shouldHideStatusChrome } from '../../utils/overlayPresentation.js';
 export function AlternateBufferCLI({ agent, initialSessionId, initialPrompt, startupInfo, configFilePath, onSelectionAttempt, useStreaming = true, }) {
     // Refs for VirtualizedList
     const listRef = useRef(null);
@@ -176,5 +177,6 @@ export function AlternateBufferCLI({ agent, initialSessionId, initialPrompt, sta
             return 'header';
         return item.message.id;
     }, []);
-    return (_jsxs(Box, { flexDirection: "column", height: terminalHeight, children: [_jsx(Box, { ref: listContainerRef, flexGrow: 1, flexShrink: 1, minHeight: 0, children: _jsx(VirtualizedList, { ref: listRef, data: listData, renderItem: renderListItem, estimatedItemHeight: estimateItemHeight, keyExtractor: getItemKey, initialScrollIndex: SCROLL_TO_ITEM_END, initialScrollOffsetInIndex: SCROLL_TO_ITEM_END }) }), _jsxs(Box, { flexDirection: "column", flexShrink: 0, children: [_jsx(StatusBar, { agent: agent, isProcessing: ui.isProcessing, isThinking: ui.isThinking, isCompacting: ui.isCompacting, approvalQueueCount: approvalQueue.length, copyModeEnabled: ui.copyModeEnabled, isAwaitingApproval: approval !== null, todoExpanded: ui.todoExpanded, hasTodos: todos.some((t) => t.status !== 'completed'), planModeActive: ui.planModeActive, autoApproveEdits: ui.autoApproveEdits, backgroundTasksRunning: ui.backgroundTasksRunning }), _jsx(BackgroundTasksPanel, { tasks: ui.backgroundTasks, isExpanded: ui.backgroundTasksExpanded, isProcessing: ui.isProcessing }), _jsx(TodoPanel, { todos: todos, isExpanded: ui.todoExpanded, isProcessing: ui.isProcessing }), selectionHintVisible && (_jsx(Box, { paddingX: 1, children: _jsx(Text, { color: "yellowBright", children: "\uD83D\uDCA1 Tip: Hold Option (\u2325) and click to select text, or press Ctrl+S to toggle copy mode" }) })), _jsx(QueuedMessagesDisplay, { messages: queuedMessages }), _jsx(InputContainer, { ref: inputContainerRef, buffer: buffer, input: input, ui: ui, session: session, initialPrompt: initialPrompt, approval: approval, queuedMessages: queuedMessages, setInput: setInput, setUi: setUi, setSession: setSession, setMessages: setMessages, setPendingMessages: setPendingMessages, setDequeuedBuffer: setDequeuedBuffer, setQueuedMessages: setQueuedMessages, setApproval: setApproval, setApprovalQueue: setApprovalQueue, setTodos: setTodos, agent: agent, inputService: inputService, onKeyboardScroll: handleKeyboardScroll, useStreaming: useStreaming, configFilePath: configFilePath }), _jsx(OverlayContainer, { ref: overlayContainerRef, ui: ui, input: input, session: session, approval: approval, setInput: setInput, setUi: setUi, setSession: setSession, setMessages: setMessages, setApproval: setApproval, setApprovalQueue: setApprovalQueue, agent: agent, inputService: inputService, buffer: buffer, onSubmitPromptCommand: handleSubmitPromptCommand, configFilePath: configFilePath }), ui.exitWarningShown && (_jsxs(Box, { paddingX: 1, children: [_jsx(Text, { color: "yellowBright", bold: true, children: "\u26A0 Press Ctrl+C again to exit" }), _jsx(Text, { color: "gray", children: " (or press any key to cancel)" })] })), _jsx(Footer, { agent: agent, sessionId: session.id, modelName: session.modelName, cwd: process.cwd(), ...(branchName ? { branchName } : {}), autoApproveEdits: ui.autoApproveEdits, planModeActive: ui.planModeActive, isShellMode: buffer.text.startsWith('!') }), ui.historySearch.isActive && (_jsx(HistorySearchBar, { query: ui.historySearch.query, hasMatch: historySearchHasMatch }))] })] }));
+    const hideChrome = shouldHideStatusChrome(ui.activeOverlay, approval);
+    return (_jsxs(Box, { flexDirection: "column", height: terminalHeight, children: [_jsx(Box, { ref: listContainerRef, flexGrow: 1, flexShrink: 1, minHeight: 0, children: _jsx(VirtualizedList, { ref: listRef, data: listData, renderItem: renderListItem, estimatedItemHeight: estimateItemHeight, keyExtractor: getItemKey, initialScrollIndex: SCROLL_TO_ITEM_END, initialScrollOffsetInIndex: SCROLL_TO_ITEM_END }) }), _jsxs(Box, { flexDirection: "column", flexShrink: 0, children: [!hideChrome && (_jsxs(_Fragment, { children: [_jsx(StatusBar, { agent: agent, isProcessing: ui.isProcessing, isThinking: ui.isThinking, isCompacting: ui.isCompacting, approvalQueueCount: approvalQueue.length, copyModeEnabled: ui.copyModeEnabled, isAwaitingApproval: approval !== null, todoExpanded: ui.todoExpanded, hasTodos: todos.some((t) => t.status !== 'completed'), planModeActive: ui.planModeActive, autoApproveEdits: ui.autoApproveEdits, backgroundTasksRunning: ui.backgroundTasksRunning }), _jsx(BackgroundTasksPanel, { tasks: ui.backgroundTasks, isExpanded: ui.backgroundTasksExpanded, isProcessing: ui.isProcessing }), _jsx(TodoPanel, { todos: todos, isExpanded: ui.todoExpanded, isProcessing: ui.isProcessing }), selectionHintVisible && (_jsx(Box, { paddingX: 1, children: _jsx(Text, { color: "yellowBright", children: "\uD83D\uDCA1 Tip: Hold Option (\u2325) and click to select text, or press Ctrl+S to toggle copy mode" }) })), _jsx(QueuedMessagesDisplay, { messages: queuedMessages })] })), _jsx(InputContainer, { ref: inputContainerRef, buffer: buffer, input: input, ui: ui, session: session, initialPrompt: initialPrompt, approval: approval, queuedMessages: queuedMessages, setInput: setInput, setUi: setUi, setSession: setSession, setMessages: setMessages, setPendingMessages: setPendingMessages, setDequeuedBuffer: setDequeuedBuffer, setQueuedMessages: setQueuedMessages, setApproval: setApproval, setApprovalQueue: setApprovalQueue, setTodos: setTodos, agent: agent, inputService: inputService, onKeyboardScroll: handleKeyboardScroll, useStreaming: useStreaming, configFilePath: configFilePath }), _jsx(OverlayContainer, { ref: overlayContainerRef, ui: ui, input: input, session: session, approval: approval, setInput: setInput, setUi: setUi, setSession: setSession, setMessages: setMessages, setApproval: setApproval, setApprovalQueue: setApprovalQueue, agent: agent, inputService: inputService, buffer: buffer, onSubmitPromptCommand: handleSubmitPromptCommand, configFilePath: configFilePath }), !hideChrome && ui.exitWarningShown && (_jsxs(Box, { paddingX: 1, children: [_jsx(Text, { color: "yellowBright", bold: true, children: "\u26A0 Press Ctrl+C again to exit" }), _jsx(Text, { color: "gray", children: " (or press any key to cancel)" })] })), !hideChrome && (_jsx(Footer, { agent: agent, sessionId: session.id, modelName: session.modelName, cwd: process.cwd(), ...(branchName ? { branchName } : {}), autoApproveEdits: ui.autoApproveEdits, planModeActive: ui.planModeActive, isShellMode: buffer.text.startsWith('!') })), !hideChrome && ui.historySearch.isActive && (_jsx(HistorySearchBar, { query: ui.historySearch.query, hasMatch: historySearchHasMatch }))] })] }));
 }

package/dist/cli/ink-cli/components/modes/StaticCLI.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StaticCLI.d.ts","sourceRoot":"","sources":["../../../../../src/cli/ink-cli/components/modes/StaticCLI.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAIH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAM9C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAqBxD,UAAU,cAAc;IACpB,KAAK,EAAE,UAAU,CAAC;IAClB,gBAAgB,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,aAAa,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACnC,WAAW,EAAE,WAAW,CAAC;IACzB,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,6DAA6D;IAC7D,YAAY,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,wBAAgB,SAAS,CAAC,EACtB,KAAK,EACL,gBAAgB,EAChB,aAAa,EACb,WAAW,EACX,cAAc,EACd,YAAmB,GACtB,EAAE,cAAc,2CAsPhB"}
+{"version":3,"file":"StaticCLI.d.ts","sourceRoot":"","sources":["../../../../../src/cli/ink-cli/components/modes/StaticCLI.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAIH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAM9C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAsBxD,UAAU,cAAc;IACpB,KAAK,EAAE,UAAU,CAAC;IAClB,gBAAgB,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,aAAa,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACnC,WAAW,EAAE,WAAW,CAAC;IACzB,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,6DAA6D;IAC7D,YAAY,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,wBAAgB,SAAS,CAAC,EACtB,KAAK,EACL,gBAAgB,EAChB,aAAa,EACb,WAAW,EACX,cAAc,EACd,YAAmB,GACtB,EAAE,cAAc,2CA+PhB"}

package/dist/cli/ink-cli/components/modes/StaticCLI.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * StaticCLI - Static pattern rendering mode
  *
@@ -34,6 +34,7 @@ import { BackgroundTasksPanel } from '../BackgroundTasksPanel.js';
 // Containers
 import { InputContainer } from '../../containers/InputContainer.js';
 import { OverlayContainer } from '../../containers/OverlayContainer.js';
+import { shouldHideStatusChrome } from '../../utils/overlayPresentation.js';
 export function StaticCLI({ agent, initialSessionId, initialPrompt, startupInfo, configFilePath, useStreaming = true, }) {
     // Use shared CLI state (no keyboard scroll in Static mode)
     const { messages, setMessages, pendingMessages, setPendingMessages, dequeuedBuffer, setDequeuedBuffer, queuedMessages, setQueuedMessages, todos, setTodos, ui, setUi, input, setInput, session, setSession, approval, setApproval, approvalQueue, setApprovalQueue, inputService, buffer, overlayContainerRef, visibleMessages, } = useCLIState({
@@ -103,5 +104,11 @@ export function StaticCLI({ agent, initialSessionId, initialPrompt, startupInfo,
         startupInfo,
         terminalWidth,
     ]);
-    return (_jsxs(Box, { flexDirection: "column", width: terminalWidth, children: [_jsx(Static, { items: staticItems, children: (item) => item }, staticRemountKey), pendingMessages.map((message) => (_jsx(MessageItem, { message: message, terminalWidth: terminalWidth }, message.id))), dequeuedBuffer.map((message) => (_jsx(MessageItem, { message: message, terminalWidth: terminalWidth }, message.id))), _jsxs(Box, { flexDirection: "column", flexShrink: 0, children: [_jsx(StatusBar, { agent: agent, isProcessing: ui.isProcessing, isThinking: ui.isThinking, isCompacting: ui.isCompacting, approvalQueueCount: approvalQueue.length, copyModeEnabled: ui.copyModeEnabled, isAwaitingApproval: approval !== null, todoExpanded: ui.todoExpanded, hasTodos: todos.some((t) => t.status !== 'completed'), planModeActive: ui.planModeActive, autoApproveEdits: ui.autoApproveEdits, backgroundTasksRunning: ui.backgroundTasksRunning }), _jsx(BackgroundTasksPanel, { tasks: ui.backgroundTasks, isExpanded: ui.backgroundTasksExpanded, isProcessing: ui.isProcessing }), _jsx(TodoPanel, { todos: todos, isExpanded: ui.todoExpanded, isProcessing: ui.isProcessing }), _jsx(QueuedMessagesDisplay, { messages: queuedMessages }), _jsx(InputContainer, { ref: inputContainerRef, buffer: buffer, input: input, ui: ui, session: session, initialPrompt: initialPrompt, approval: approval, queuedMessages: queuedMessages, setInput: setInput, setUi: setUi, setSession: setSession, setMessages: setMessages, setPendingMessages: setPendingMessages, setDequeuedBuffer: setDequeuedBuffer, setQueuedMessages: setQueuedMessages, setApproval: setApproval, setApprovalQueue: setApprovalQueue, setTodos: setTodos, agent: agent, inputService: inputService, useStreaming: useStreaming, configFilePath: configFilePath }), _jsx(OverlayContainer, { ref: overlayContainerRef, ui: ui, input: input, session: session, approval: approval, setInput: setInput, setUi: setUi, setSession: setSession, setMessages: setMessages, setApproval: setApproval, setApprovalQueue: setApprovalQueue, agent: agent, inputService: inputService, buffer: buffer, refreshStatic: refreshStatic, onSubmitPromptCommand: handleSubmitPromptCommand, configFilePath: configFilePath }), ui.exitWarningShown && (_jsxs(Box, { paddingX: 1, children: [_jsx(Text, { color: "yellowBright", bold: true, children: "\u26A0 Press Ctrl+C again to exit" }), _jsx(Text, { color: "gray", children: " (or press any key to cancel)" })] })), _jsx(Footer, { agent: agent, sessionId: session.id, modelName: session.modelName, cwd: process.cwd(), ...(branchName ? { branchName } : {}), autoApproveEdits: ui.autoApproveEdits, planModeActive: ui.planModeActive, isShellMode: buffer.text.startsWith('!') }), ui.historySearch.isActive && (_jsx(HistorySearchBar, { query: ui.historySearch.query, hasMatch: historySearchHasMatch }))] })] }));
+    return (_jsxs(Box, { flexDirection: "column", width: terminalWidth, children: [_jsx(Static, { items: staticItems, children: (item) => item }, staticRemountKey), pendingMessages.map((message) => (_jsx(MessageItem, { message: message, terminalWidth: terminalWidth }, message.id))), dequeuedBuffer.map((message) => (_jsx(MessageItem, { message: message, terminalWidth: terminalWidth }, message.id))), _jsxs(Box, { flexDirection: "column", flexShrink: 0, children: [(() => {
+                        const hideChrome = shouldHideStatusChrome(ui.activeOverlay, approval);
+                        if (hideChrome)
+                            return null;
+                        return (_jsxs(_Fragment, { children: [_jsx(StatusBar, { agent: agent, isProcessing: ui.isProcessing, isThinking: ui.isThinking, isCompacting: ui.isCompacting, approvalQueueCount: approvalQueue.length, copyModeEnabled: ui.copyModeEnabled, isAwaitingApproval: approval !== null, todoExpanded: ui.todoExpanded, hasTodos: todos.some((t) => t.status !== 'completed'), planModeActive: ui.planModeActive, autoApproveEdits: ui.autoApproveEdits, backgroundTasksRunning: ui.backgroundTasksRunning }), _jsx(BackgroundTasksPanel, { tasks: ui.backgroundTasks, isExpanded: ui.backgroundTasksExpanded, isProcessing: ui.isProcessing }), _jsx(TodoPanel, { todos: todos, isExpanded: ui.todoExpanded, isProcessing: ui.isProcessing }), _jsx(QueuedMessagesDisplay, { messages: queuedMessages })] }));
+                    })(), _jsx(InputContainer, { ref: inputContainerRef, buffer: buffer, input: input, ui: ui, session: session, initialPrompt: initialPrompt, approval: approval, queuedMessages: queuedMessages, setInput: setInput, setUi: setUi, setSession: setSession, setMessages: setMessages, setPendingMessages: setPendingMessages, setDequeuedBuffer: setDequeuedBuffer, setQueuedMessages: setQueuedMessages, setApproval: setApproval, setApprovalQueue: setApprovalQueue, setTodos: setTodos, agent: agent, inputService: inputService, useStreaming: useStreaming, configFilePath: configFilePath }), _jsx(OverlayContainer, { ref: overlayContainerRef, ui: ui, input: input, session: session, approval: approval, setInput: setInput, setUi: setUi, setSession: setSession, setMessages: setMessages, setApproval: setApproval, setApprovalQueue: setApprovalQueue, agent: agent, inputService: inputService, buffer: buffer, refreshStatic: refreshStatic, onSubmitPromptCommand: handleSubmitPromptCommand, configFilePath: configFilePath }), !shouldHideStatusChrome(ui.activeOverlay, approval) && ui.exitWarningShown && (_jsxs(Box, { paddingX: 1, children: [_jsx(Text, { color: "yellowBright", bold: true, children: "\u26A0 Press Ctrl+C again to exit" }), _jsx(Text, { color: "gray", children: " (or press any key to cancel)" })] })), !shouldHideStatusChrome(ui.activeOverlay, approval) && (_jsx(Footer, { agent: agent, sessionId: session.id, modelName: session.modelName, cwd: process.cwd(), ...(branchName ? { branchName } : {}), autoApproveEdits: ui.autoApproveEdits, planModeActive: ui.planModeActive, isShellMode: buffer.text.startsWith('!') })), !shouldHideStatusChrome(ui.activeOverlay, approval) &&
+                        ui.historySearch.isActive && (_jsx(HistorySearchBar, { query: ui.historySearch.query, hasMatch: historySearchHasMatch }))] })] }));
 }

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { Key } from '../../hooks/useInputOrchestrator.js';
+export interface CommandOutputOverlayProps {
+    isVisible: boolean;
+    title: string;
+    content: string;
+    onClose: () => void;
+}
+export interface CommandOutputOverlayHandle {
+    handleInput: (input: string, key: Key) => boolean;
+}
+export declare const CommandOutputOverlay: React.ForwardRefExoticComponent<CommandOutputOverlayProps & React.RefAttributes<CommandOutputOverlayHandle>>;
+//# sourceMappingURL=CommandOutputOverlay.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CommandOutputOverlay.d.ts","sourceRoot":"","sources":["../../../../../src/cli/ink-cli/components/overlays/CommandOutputOverlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwE,MAAM,OAAO,CAAC;AAG7F,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,qCAAqC,CAAC;AAK/D,MAAM,WAAW,yBAAyB;IACtC,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,MAAM,WAAW,0BAA0B;IACvC,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,OAAO,CAAC;CACrD;AAED,eAAO,MAAM,oBAAoB,8GAuF/B,CAAC"}

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

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useImperativeHandle, useMemo, useState } from 'react';
+import { Box, Text } from 'ink';
+import wrapAnsi from 'wrap-ansi';
+import { useTerminalSize } from '../../hooks/useTerminalSize.js';
+import { getMaxVisibleItemsForTerminalRows } from '../../utils/overlaySizing.js';
+import { HintBar } from '../shared/HintBar.js';
+export const CommandOutputOverlay = forwardRef(function CommandOutputOverlay({ isVisible, title, content, onClose }, ref) {
+    const { columns, rows } = useTerminalSize();
+    const viewportLines = useMemo(() => {
+        return getMaxVisibleItemsForTerminalRows({
+            rows,
+            hardCap: 20,
+            reservedRows: 10,
+        });
+    }, [rows]);
+    const [scrollOffset, setScrollOffset] = useState(0);
+    const wrappedLines = useMemo(() => {
+        const width = Math.max(20, columns - 2);
+        const wrapped = wrapAnsi(content || '', width, {
+            hard: true,
+            wordWrap: true,
+            trim: false,
+        });
+        return wrapped.length > 0 ? wrapped.split('\n') : [];
+    }, [content, columns]);
+    const maxScrollOffset = useMemo(() => {
+        return Math.max(0, wrappedLines.length - viewportLines);
+    }, [wrappedLines.length, viewportLines]);
+    useEffect(() => {
+        setScrollOffset((prev) => Math.min(maxScrollOffset, Math.max(0, prev)));
+    }, [maxScrollOffset]);
+    useImperativeHandle(ref, () => ({
+        handleInput: (_input, key) => {
+            if (!isVisible)
+                return false;
+            if (key.escape) {
+                onClose();
+                return true;
+            }
+            if (key.upArrow) {
+                setScrollOffset((prev) => Math.max(0, prev - 1));
+                return true;
+            }
+            if (key.downArrow) {
+                setScrollOffset((prev) => Math.min(maxScrollOffset, prev + 1));
+                return true;
+            }
+            return true;
+        },
+    }), [isVisible, maxScrollOffset, onClose]);
+    if (!isVisible)
+        return null;
+    const visible = wrappedLines.slice(scrollOffset, scrollOffset + viewportLines);
+    const hint = wrappedLines.length > viewportLines ? ['↑↓ scroll', 'Esc close'] : ['Esc close'];
+    return (_jsxs(Box, { flexDirection: "column", width: columns, children: [_jsx(Box, { paddingX: 0, paddingY: 0, children: _jsx(Text, { color: "cyan", bold: true, wrap: "truncate-end", children: title }) }), _jsx(Box, { flexDirection: "column", height: viewportLines, marginTop: 1, children: Array.from({ length: viewportLines }, (_, rowIndex) => {
+                    const line = visible[rowIndex];
+                    return (_jsx(Box, { paddingX: 0, paddingY: 0, children: _jsx(Text, { wrap: "truncate-end", children: line ?? ' ' }) }, `line-${rowIndex}`));
+                }) }), _jsx(Box, { paddingX: 0, paddingY: 0, marginTop: 1, children: _jsx(HintBar, { hints: hint }) })] }));
+});

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

@@ -65,6 +65,6 @@ const LogLevelSelector = forwardRef(function LogLevelSelector({ isVisible, onSel
     const handleSelect = (option) => {
         onSelect(option.level);
     };
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(BaseSelector, { ref: baseSelectorRef, items: levels, isVisible: isVisible, isLoading: false, selectedIndex: selectedIndex, onSelectIndex: setSelectedIndex, onSelect: handleSelect, onClose: onClose, formatItem: formatItem, title: "Select Log Level", borderColor: "yellowBright", emptyMessage: "No log levels available" }), logFilePath && process.env.DEXTO_DEV_MODE === 'true' && (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: "gray", children: ["\uD83D\uDCC1 Log file: ", logFilePath] }) }))] }));
+    return (_jsxs(Box, { flexDirection: "column", children: [logFilePath && (_jsx(Box, { marginBottom: 1, children: _jsxs(Text, { color: "gray", children: ["\uD83D\uDCC1 Log file: ", logFilePath] }) })), _jsx(BaseSelector, { ref: baseSelectorRef, items: levels, isVisible: isVisible, isLoading: false, selectedIndex: selectedIndex, onSelectIndex: setSelectedIndex, onSelect: handleSelect, onClose: onClose, formatItem: formatItem, title: "Select Log Level", borderColor: "yellowBright", emptyMessage: "No log levels available" })] }));
 });
 export default LogLevelSelector;

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

@@ -1 +1 @@
-{"version":3,"file":"ModelSelectorRefactored.d.ts","sourceRoot":"","sources":["../../../../../src/cli/ink-cli/components/overlays/ModelSelectorRefactored.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAYH,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,qCAAqC,CAAC;AAC/D,OAAO,KAAK,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAO3D,OAAO,EAMH,KAAK,WAAW,EACnB,MAAM,yBAAyB,CAAC;AAGjC,KAAK,eAAe,GAAG,MAAM,GAAG,SAAS,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AAEhF,UAAU,kBAAkB;IACxB,SAAS,EAAE,OAAO,CAAC;IACnB,aAAa,EAAE,CACX,QAAQ,EAAE,WAAW,EACrB,KAAK,EAAE,MAAM,EACb,WAAW,CAAC,EAAE,MAAM,EACpB,OAAO,CAAC,EAAE,MAAM,EAChB,eAAe,CAAC,EAAE,eAAe,KAChC,IAAI,CAAC;IACV,iBAAiB,EAAE,CACf,QAAQ,EAAE,WAAW,EACrB,KAAK,EAAE,MAAM,EACb,WAAW,CAAC,EAAE,MAAM,EACpB,OAAO,CAAC,EAAE,MAAM,EAChB,eAAe,CAAC,EAAE,eAAe,KAChC,OAAO,CAAC,IAAI,CAAC,CAAC;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,iBAAiB,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;IAChD,KAAK,EAAE,UAAU,CAAC;CACrB;AAED,MAAM,WAAW,mBAAmB;IAChC,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,OAAO,CAAC;CACrD;AAoDD;;GAEG;AACH,QAAA,MAAM,aAAa,oHAq3BjB,CAAC;AAEH,eAAe,aAAa,CAAC"}
+{"version":3,"file":"ModelSelectorRefactored.d.ts","sourceRoot":"","sources":["../../../../../src/cli/ink-cli/components/overlays/ModelSelectorRefactored.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAYH,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,qCAAqC,CAAC;AAE/D,OAAO,KAAK,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAO3D,OAAO,EAMH,KAAK,WAAW,EACnB,MAAM,yBAAyB,CAAC;AAKjC,KAAK,eAAe,GAAG,MAAM,GAAG,SAAS,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AAEhF,UAAU,kBAAkB;IACxB,SAAS,EAAE,OAAO,CAAC;IACnB,aAAa,EAAE,CACX,QAAQ,EAAE,WAAW,EACrB,KAAK,EAAE,MAAM,EACb,WAAW,CAAC,EAAE,MAAM,EACpB,OAAO,CAAC,EAAE,MAAM,EAChB,eAAe,CAAC,EAAE,eAAe,KAChC,IAAI,CAAC;IACV,iBAAiB,EAAE,CACf,QAAQ,EAAE,WAAW,EACrB,KAAK,EAAE,MAAM,EACb,WAAW,CAAC,EAAE,MAAM,EACpB,OAAO,CAAC,EAAE,MAAM,EAChB,eAAe,CAAC,EAAE,eAAe,KAChC,OAAO,CAAC,IAAI,CAAC,CAAC;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,iBAAiB,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;IAChD,KAAK,EAAE,UAAU,CAAC;CACrB;AAED,MAAM,WAAW,mBAAmB;IAChC,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,OAAO,CAAC;CACrD;AA8FD;;GAEG;AACH,QAAA,MAAM,aAAa,oHAo8BjB,CAAC;AAEH,eAAe,aAAa,CAAC"}

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;