@machina.ai/cell-cli 1.36.0-rc1 → 1.38.1-rc2

package/dist/src/ui/components/InputPrompt.js

@@ -1,11 +1,12 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useCallback, useEffect, useState, useRef, useMemo } from 'react';
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useState, useRef, useMemo, Fragment, } from 'react';
 import clipboardy from 'clipboardy';
 import { Box, Text, useStdout } from 'ink';
 import { SuggestionsDisplay, MAX_WIDTH } from './SuggestionsDisplay.js';
 import { theme } from '../semantic-colors.js';
 import { useInputHistory } from '../hooks/useInputHistory.js';
 import { escapeAtSymbols } from '../hooks/atCommandProcessor.js';
+import { ScrollableList, } from './shared/ScrollableList.js';
 import { HalfLinePaddedBox } from './shared/HalfLinePaddedBox.js';
 import { logicalPosToOffset, expandPastePlaceholders, getTransformUnderCursor, LARGE_PASTE_LINE_THRESHOLD, LARGE_PASTE_CHAR_THRESHOLD, } from './shared/text-buffer.js';
 import { cpSlice, cpLen, toCodePoints, cpIndexToOffset, } from '../utils/textUtils.js';
@@ -29,6 +30,7 @@ import { getSafeLowColorBackground } from '../themes/color-utils.js';
 import { isLowColorDepth } from '../utils/terminalUtils.js';
 import { useShellFocusState } from '../contexts/ShellFocusContext.js';
 import { useUIState } from '../contexts/UIStateContext.js';
+import { useInputState } from '../contexts/InputContext.js';
 import { appEvents, AppEvent, TransientMessageType, } from '../../utils/events.js';
 import { useSettings } from '../contexts/SettingsContext.js';
 import { StreamingState } from '../types.js';
@@ -100,7 +102,9 @@ export function tryTogglePasteExpansion(buffer) {
     });
     return true;
 }
-export const InputPrompt = ({ buffer, onSubmit, userMessages, onClearScreen, config, slashCommands, commandContext, placeholder = '  Type your message or @path/to/file', focus = true, inputWidth, suggestionsWidth, shellModeActive, setShellModeActive, approvalMode, onEscapePromptChange, onSuggestionsVisibilityChange, vimHandleInput, isEmbeddedShellFocused, setQueueErrorMessage, streamingState, popAllMessages, suggestionsPosition = 'below', setBannerVisible, }) => {
+export const InputPrompt = ({ onSubmit, onClearScreen, config, slashCommands, commandContext, placeholder = '  Type your message or @path/to/file', focus = true, setShellModeActive, approvalMode, onEscapePromptChange, onSuggestionsVisibilityChange, vimHandleInput, isEmbeddedShellFocused, setQueueErrorMessage, streamingState, popAllMessages, onQueueMessage, suggestionsPosition = 'below', setBannerVisible, }) => {
+    const inputState = useInputState();
+    const { buffer, userMessages, shellModeActive, copyModeEnabled, inputWidth, suggestionsWidth, } = inputState;
     const isHelpDismissKey = useIsHelpDismissKey();
     const keyMatchers = useKeyMatchers();
     const { stdout } = useStdout();
@@ -108,7 +112,7 @@ export const InputPrompt = ({ buffer, onSubmit, userMessages, onClearScreen, con
     const kittyProtocol = useKittyKeyboardProtocol();
     const isShellFocused = useShellFocusState();
     const { setEmbeddedShellFocused, setShortcutsHelpVisible, toggleCleanUiDetailsVisible, } = useUIActions();
-    const { terminalWidth, activePtyId, history, backgroundShells, backgroundShellHeight, shortcutsHelpVisible, } = useUIState();
+    const { terminalWidth, activePtyId, history, backgroundTasks, backgroundTaskHeight, shortcutsHelpVisible, } = useUIState();
     const [suppressCompletion, setSuppressCompletion] = useState(false);
     const { handlePress: registerPlainTabPress, resetCount: resetPlainTabPress } = useRepeatedKeyPress({
         windowMs: DOUBLE_TAB_CLEAN_UI_TOGGLE_WINDOW_MS,
@@ -140,6 +144,7 @@ export const InputPrompt = ({ buffer, onSubmit, userMessages, onClearScreen, con
     const pasteTimeoutRef = useRef(null);
     const innerBoxRef = useRef(null);
     const hasUserNavigatedSuggestions = useRef(false);
+    const listRef = useRef(null);
     const [reverseSearchActive, setReverseSearchActive] = useState(false);
     const [commandSearchActive, setCommandSearchActive] = useState(false);
     const [textBeforeReverseSearch, setTextBeforeReverseSearch] = useState('');
@@ -181,7 +186,10 @@ export const InputPrompt = ({ buffer, onSubmit, userMessages, onClearScreen, con
     const activeCompletion = getActiveCompletion();
     const shouldShowSuggestions = activeCompletion.showSuggestions;
     const { forceShowShellSuggestions, setForceShowShellSuggestions, isShellSuggestionsVisible, } = completion;
-    const showCursor = focus && isShellFocused && !isEmbeddedShellFocused;
+    const showCursor = focus && isShellFocused && !isEmbeddedShellFocused && !copyModeEnabled;
+    useEffect(() => {
+        appEvents.emit(AppEvent.ScrollToBottom);
+    }, [buffer.text, buffer.cursor]);
     // Notify parent component about escape prompt state changes
     useEffect(() => {
         if (onEscapePromptChange) {
@@ -239,7 +247,7 @@ export const InputPrompt = ({ buffer, onSubmit, userMessages, onClearScreen, con
             if (isSlash) {
                 const { commandToExecute } = parseSlashCommand(trimmedMessage, slashCommands);
                 if (commandToExecute?.isSafeConcurrent) {
-                    inputHistory.handleSubmit(trimmedMessage);
+                    handleSubmitAndClear(trimmedMessage);
                     return;
                 }
             }
@@ -253,6 +261,7 @@ export const InputPrompt = ({ buffer, onSubmit, userMessages, onClearScreen, con
         streamingState,
         setQueueErrorMessage,
         slashCommands,
+        handleSubmitAndClear,
     ]);
     // Effect to reset completion if history navigation just occurred and set the text
     useEffect(() => {
@@ -354,7 +363,8 @@ export const InputPrompt = ({ buffer, onSubmit, userMessages, onClearScreen, con
         if (isEmbeddedShellFocused) {
             setEmbeddedShellFocused(false);
         }
-        const visualRow = buffer.visualScrollRow + relY;
+        const currentScrollTop = Math.round(listRef.current?.getScrollState().scrollTop ?? buffer.visualScrollRow);
+        const visualRow = currentScrollTop + relY;
         buffer.moveToVisualPosition(visualRow, relX);
     }, { isActive: focus });
     const isAlternateBuffer = useAlternateBuffer();
@@ -362,14 +372,15 @@ export const InputPrompt = ({ buffer, onSubmit, userMessages, onClearScreen, con
     useMouseClick(innerBoxRef, (_event, relX, relY) => {
         if (!isAlternateBuffer)
             return;
-        const visualLine = buffer.viewportVisualLines[relY];
+        const currentScrollTop = Math.round(listRef.current?.getScrollState().scrollTop ?? buffer.visualScrollRow);
+        const visualLine = buffer.allVisualLines[currentScrollTop + relY];
         if (!visualLine)
             return;
         // Even if we click past the end of the line, we might want to collapse an expanded paste
         const isPastEndOfLine = relX >= stringWidth(visualLine);
         const logicalPos = isPastEndOfLine
             ? null
-            : buffer.getLogicalPositionFromVisual(buffer.visualScrollRow + relY, relX);
+            : buffer.getLogicalPositionFromVisual(currentScrollTop + relY, relX);
         // Check for paste placeholder (collapsed state)
         if (logicalPos) {
             const transform = getTransformUnderCursor(logicalPos.row, logicalPos.col, buffer.transformationsByLine, { includeEdge: true });
@@ -380,7 +391,9 @@ export const InputPrompt = ({ buffer, onSubmit, userMessages, onClearScreen, con
         }
         // If we didn't click a placeholder to expand, check if we are inside or after
         // an expanded paste region and collapse it.
-        const row = buffer.visualScrollRow + relY;
+        const visualRow = currentScrollTop + relY;
+        const mapEntry = buffer.visualToLogicalMap[visualRow];
+        const row = mapEntry ? mapEntry[0] : visualRow;
         const expandedId = buffer.getExpandedPasteAtLine(row);
         if (expandedId) {
             buffer.togglePasteExpansion(expandedId, row, logicalPos?.col ?? relX);
@@ -444,16 +457,32 @@ export const InputPrompt = ({ buffer, onSubmit, userMessages, onClearScreen, con
             setShortcutsHelpVisible(false);
             return true;
         }
-        if (key.name === 'escape' &&
-            (streamingState === StreamingState.Responding ||
-                streamingState === StreamingState.WaitingForConfirmation)) {
-            return false;
-        }
+        const isGenerating = streamingState === StreamingState.Responding ||
+            streamingState === StreamingState.WaitingForConfirmation;
+        const isQueueMessageKey = keyMatchers[Command.QUEUE_MESSAGE](key);
         const isPlainTab = key.name === 'tab' && !key.shift && !key.alt && !key.ctrl && !key.cmd;
         const hasTabCompletionInteraction = (completion.showSuggestions && isShellSuggestionsVisible) ||
             Boolean(completion.promptCompletion.text) ||
             reverseSearchActive ||
             commandSearchActive;
+        if (isGenerating &&
+            isQueueMessageKey &&
+            !hasTabCompletionInteraction &&
+            buffer.text.trim().length > 0) {
+            const trimmedMessage = buffer.text.trim();
+            const isSlash = isSlashCommand(trimmedMessage);
+            if (isSlash || shellModeActive) {
+                setQueueErrorMessage(`${shellModeActive ? 'Shell' : 'Slash'} commands cannot be queued`);
+            }
+            else if (onQueueMessage) {
+                onQueueMessage(buffer.text);
+                buffer.setText('');
+                resetCompletionState();
+                resetReverseSearchCompletionState();
+            }
+            resetPlainTabPress();
+            return true;
+        }
         if (isPlainTab && shellModeActive) {
             resetPlainTabPress();
             if (!shouldShowSuggestions) {
@@ -600,6 +629,11 @@ export const InputPrompt = ({ buffer, onSubmit, userMessages, onClearScreen, con
                 resetEscapeState();
                 return true;
             }
+            // If we're generating and no local overlay consumed Escape, let it
+            // propagate to the global cancellation handler.
+            if (isGenerating) {
+                return false;
+            }
             handleEscPress();
             return true;
         }
@@ -886,6 +920,14 @@ export const InputPrompt = ({ buffer, onSubmit, userMessages, onClearScreen, con
             buffer.openInExternalEditor();
             return true;
         }
+        if (keyMatchers[Command.DEPRECATED_OPEN_EXTERNAL_EDITOR](key)) {
+            const cmdKey = formatCommand(Command.OPEN_EXTERNAL_EDITOR);
+            appEvents.emit(AppEvent.TransientMessage, {
+                message: `Use ${cmdKey} to open the external editor.`,
+                type: TransientMessageType.Hint,
+            });
+            return true;
+        }
         // Ctrl+V for clipboard paste
         if (keyMatchers[Command.PASTE_CLIPBOARD](key)) {
             // eslint-disable-next-line @typescript-eslint/no-floating-promises
@@ -897,7 +939,7 @@ export const InputPrompt = ({ buffer, onSubmit, userMessages, onClearScreen, con
         }
         if (keyMatchers[Command.FOCUS_SHELL_INPUT](key)) {
             if (activePtyId ||
-                (backgroundShells.size > 0 && backgroundShellHeight > 0)) {
+                (backgroundTasks.size > 0 && backgroundTaskHeight > 0)) {
                 setEmbeddedShellFocused(true);
                 return true;
             }
@@ -947,11 +989,14 @@ export const InputPrompt = ({ buffer, onSubmit, userMessages, onClearScreen, con
         shortcutsHelpVisible,
         setShortcutsHelpVisible,
         tryLoadQueuedMessages,
+        onQueueMessage,
+        setQueueErrorMessage,
+        resetReverseSearchCompletionState,
         setBannerVisible,
         activePtyId,
         setEmbeddedShellFocused,
-        backgroundShells.size,
-        backgroundShellHeight,
+        backgroundTasks.size,
+        backgroundTaskHeight,
         streamingState,
         handleEscPress,
         registerPlainTabPress,
@@ -965,12 +1010,10 @@ export const InputPrompt = ({ buffer, onSubmit, userMessages, onClearScreen, con
         settings,
     ]);
     useKeypress(handleInput, {
-        isActive: !isEmbeddedShellFocused,
+        isActive: !isEmbeddedShellFocused && !copyModeEnabled,
         priority: true,
     });
-    const linesToRender = buffer.viewportVisualLines;
     const [cursorVisualRowAbsolute, cursorVisualColAbsolute] = buffer.visualCursor;
-    const scrollVisualRow = buffer.visualScrollRow;
     const getGhostTextLines = useCallback(() => {
         if (!completion.promptCompletion.text ||
             !buffer.text ||
@@ -1068,6 +1111,94 @@ export const InputPrompt = ({ buffer, onSubmit, userMessages, onClearScreen, con
         inputWidth,
     ]);
     const { inlineGhost, additionalLines } = getGhostTextLines();
+    const scrollableData = useMemo(() => {
+        const items = buffer.allVisualLines.map((lineText, index) => ({
+            type: 'visualLine',
+            lineText,
+            absoluteVisualIdx: index,
+        }));
+        additionalLines.forEach((ghostLine, index) => {
+            items.push({
+                type: 'ghostLine',
+                ghostLine,
+                index,
+            });
+        });
+        return items;
+    }, [buffer.allVisualLines, additionalLines]);
+    const renderItem = useCallback(({ item }) => {
+        if (item.type === 'ghostLine') {
+            const padding = Math.max(0, inputWidth - stringWidth(item.ghostLine));
+            return (_jsx(Box, { height: 1, children: _jsxs(Text, { color: theme.text.secondary, children: [item.ghostLine, ' '.repeat(padding)] }) }));
+        }
+        const { lineText, absoluteVisualIdx } = item;
+        // console.log('renderItem called with:', lineText);
+        const mapEntry = buffer.visualToLogicalMap[absoluteVisualIdx];
+        if (!mapEntry)
+            return _jsx(Text, { children: " " });
+        const isOnCursorLine = focus && absoluteVisualIdx === cursorVisualRowAbsolute;
+        const renderedLine = [];
+        const [logicalLineIdx] = mapEntry;
+        const logicalLine = buffer.lines[logicalLineIdx] || '';
+        const transformations = buffer.transformationsByLine[logicalLineIdx] ?? [];
+        const tokens = parseInputForHighlighting(logicalLine, logicalLineIdx, transformations, ...(focus && buffer.cursor[0] === logicalLineIdx
+            ? [buffer.cursor[1]]
+            : []));
+        const visualStartCol = buffer.visualToTransformedMap[absoluteVisualIdx] ?? 0;
+        const visualEndCol = visualStartCol + cpLen(lineText);
+        const segments = parseSegmentsFromTokens(tokens, visualStartCol, visualEndCol);
+        let charCount = 0;
+        segments.forEach((seg, segIdx) => {
+            const segLen = cpLen(seg.text);
+            let display = seg.text;
+            if (isOnCursorLine) {
+                const relCol = cursorVisualColAbsolute;
+                const segStart = charCount;
+                const segEnd = segStart + segLen;
+                if (relCol >= segStart && relCol < segEnd) {
+                    const charToHighlight = cpSlice(display, relCol - segStart, relCol - segStart + 1);
+                    const highlighted = showCursor
+                        ? chalk.inverse(charToHighlight)
+                        : charToHighlight;
+                    display =
+                        cpSlice(display, 0, relCol - segStart) +
+                            highlighted +
+                            cpSlice(display, relCol - segStart + 1);
+                }
+                charCount = segEnd;
+            }
+            else {
+                charCount += segLen;
+            }
+            const color = seg.type === 'command' || seg.type === 'file' || seg.type === 'paste'
+                ? theme.text.accent
+                : theme.text.primary;
+            renderedLine.push(_jsx(Text, { color: color, children: display }, `token-${segIdx}`));
+        });
+        const currentLineGhost = isOnCursorLine ? inlineGhost : '';
+        if (isOnCursorLine &&
+            cursorVisualColAbsolute === cpLen(lineText) &&
+            !currentLineGhost) {
+            renderedLine.push(_jsx(Text, { children: showCursor ? chalk.inverse(' ') : ' ' }, `cursor-end-${cursorVisualColAbsolute}`));
+        }
+        const showCursorBeforeGhost = focus &&
+            isOnCursorLine &&
+            cursorVisualColAbsolute === cpLen(lineText) &&
+            currentLineGhost;
+        return (_jsx(Box, { height: 1, children: _jsxs(Text, { terminalCursorFocus: showCursor && isOnCursorLine, terminalCursorPosition: cpIndexToOffset(lineText, cursorVisualColAbsolute), children: [renderedLine, showCursorBeforeGhost && (showCursor ? chalk.inverse(' ') : ' '), currentLineGhost && (_jsx(Text, { color: theme.text.secondary, children: currentLineGhost }))] }) }));
+    }, [
+        buffer.visualToLogicalMap,
+        buffer.lines,
+        buffer.transformationsByLine,
+        buffer.cursor,
+        buffer.visualToTransformedMap,
+        focus,
+        cursorVisualRowAbsolute,
+        cursorVisualColAbsolute,
+        showCursor,
+        inlineGhost,
+        inputWidth,
+    ]);
     const useBackgroundColor = config.getUseBackgroundColor();
     const isLowColor = isLowColorDepth();
     const terminalBg = theme.background.primary || 'black';
@@ -1083,6 +1214,38 @@ export const InputPrompt = ({ buffer, onSubmit, userMessages, onClearScreen, con
         }
         return false;
     }, [useBackgroundColor, isLowColor, terminalBg]);
+    const prevCursorRef = useRef(buffer.visualCursor);
+    const prevTextRef = useRef(buffer.text);
+    // Effect to ensure cursor remains visible after interactions
+    useEffect(() => {
+        const cursorChanged = prevCursorRef.current !== buffer.visualCursor;
+        const textChanged = prevTextRef.current !== buffer.text;
+        prevCursorRef.current = buffer.visualCursor;
+        prevTextRef.current = buffer.text;
+        if (!cursorChanged && !textChanged)
+            return;
+        if (!listRef.current || !focus)
+            return;
+        const { scrollTop, innerHeight } = listRef.current.getScrollState();
+        if (innerHeight === 0)
+            return;
+        const cursorVisualRow = buffer.visualCursor[0];
+        const actualScrollTop = Math.round(scrollTop);
+        // If cursor is out of the currently visible viewport...
+        if (cursorVisualRow < actualScrollTop ||
+            cursorVisualRow >= actualScrollTop + innerHeight) {
+            // Calculate minimal scroll to make it visible
+            let newScrollTop = actualScrollTop;
+            if (cursorVisualRow < actualScrollTop) {
+                newScrollTop = cursorVisualRow;
+            }
+            else if (cursorVisualRow >= actualScrollTop + innerHeight) {
+                newScrollTop = cursorVisualRow - innerHeight + 1;
+            }
+            listRef.current.scrollToIndex({ index: newScrollTop });
+        }
+    }, [buffer.visualCursor, buffer.text, focus]);
+    const listBackgroundColor = useLineFallback || !useBackgroundColor ? undefined : theme.background.input;
     useEffect(() => {
         if (onSuggestionsVisibilityChange) {
             onSuggestionsVisibilityChange(shouldShowSuggestions);
@@ -1120,74 +1283,16 @@ export const InputPrompt = ({ buffer, onSubmit, userMessages, onClearScreen, con
     const borderColor = isShellFocused && !isEmbeddedShellFocused
         ? (statusColor ?? theme.ui.focus)
         : theme.border.default;
-    return (_jsxs(_Fragment, { children: [suggestionsPosition === 'above' && suggestionsNode, useLineFallback ? (_jsx(Box, { borderStyle: "round", borderTop: true, borderBottom: false, borderLeft: false, borderRight: false, borderColor: borderColor, width: terminalWidth, flexDirection: "row", alignItems: "flex-start", height: 0 })) : null, _jsx(HalfLinePaddedBox, { backgroundBaseColor: theme.background.input, backgroundOpacity: 1, useBackgroundColor: useBackgroundColor, children: _jsxs(Box, { flexGrow: 1, flexDirection: "row", paddingX: 1, borderColor: borderColor, borderStyle: useLineFallback ? 'round' : undefined, borderTop: false, borderBottom: false, borderLeft: !useBackgroundColor, borderRight: !useBackgroundColor, children: [_jsxs(Text, { color: statusColor ?? theme.text.accent, "aria-label": statusText || undefined, children: [shellModeActive ? (reverseSearchActive ? (_jsxs(Text, { color: theme.text.link, "aria-label": SCREEN_READER_USER_PREFIX, children: ["(r:)", ' '] })) : ('!')) : commandSearchActive ? (_jsx(Text, { color: theme.text.accent, children: "(r:) " })) : showYoloStyling ? ('*') : ('>'), ' '] }), _jsx(Box, { flexGrow: 1, flexDirection: "column", ref: innerBoxRef, children: buffer.text.length === 0 && placeholder ? (showCursor ? (_jsxs(Text, { terminalCursorFocus: showCursor, terminalCursorPosition: 0, children: [chalk.inverse(placeholder.slice(0, 1)), _jsx(Text, { color: theme.text.secondary, children: placeholder.slice(1) })] })) : (_jsx(Text, { color: theme.text.secondary, children: placeholder }))) : (linesToRender
-                                .map((lineText, visualIdxInRenderedSet) => {
-                                const absoluteVisualIdx = scrollVisualRow + visualIdxInRenderedSet;
-                                const mapEntry = buffer.visualToLogicalMap[absoluteVisualIdx];
-                                if (!mapEntry)
-                                    return null;
-                                const cursorVisualRow = cursorVisualRowAbsolute - scrollVisualRow;
-                                const isOnCursorLine = focus && visualIdxInRenderedSet === cursorVisualRow;
-                                const renderedLine = [];
-                                const [logicalLineIdx] = mapEntry;
-                                const logicalLine = buffer.lines[logicalLineIdx] || '';
-                                const transformations = buffer.transformationsByLine[logicalLineIdx] ?? [];
-                                const tokens = parseInputForHighlighting(logicalLine, logicalLineIdx, transformations, ...(focus && buffer.cursor[0] === logicalLineIdx
-                                    ? [buffer.cursor[1]]
-                                    : []));
-                                const startColInTransformed = buffer.visualToTransformedMap[absoluteVisualIdx] ?? 0;
-                                const visualStartCol = startColInTransformed;
-                                const visualEndCol = visualStartCol + cpLen(lineText);
-                                const segments = parseSegmentsFromTokens(tokens, visualStartCol, visualEndCol);
-                                let charCount = 0;
-                                segments.forEach((seg, segIdx) => {
-                                    const segLen = cpLen(seg.text);
-                                    let display = seg.text;
-                                    if (isOnCursorLine) {
-                                        const relativeVisualColForHighlight = cursorVisualColAbsolute;
-                                        const segStart = charCount;
-                                        const segEnd = segStart + segLen;
-                                        if (relativeVisualColForHighlight >= segStart &&
-                                            relativeVisualColForHighlight < segEnd) {
-                                            const charToHighlight = cpSlice(display, relativeVisualColForHighlight - segStart, relativeVisualColForHighlight - segStart + 1);
-                                            const highlighted = showCursor
-                                                ? chalk.inverse(charToHighlight)
-                                                : charToHighlight;
-                                            display =
-                                                cpSlice(display, 0, relativeVisualColForHighlight - segStart) +
-                                                    highlighted +
-                                                    cpSlice(display, relativeVisualColForHighlight - segStart + 1);
-                                        }
-                                        charCount = segEnd;
-                                    }
-                                    else {
-                                        // Advance the running counter even when not on cursor line
-                                        charCount += segLen;
-                                    }
-                                    const color = seg.type === 'command' ||
-                                        seg.type === 'file' ||
-                                        seg.type === 'paste'
-                                        ? theme.text.accent
-                                        : theme.text.primary;
-                                    renderedLine.push(_jsx(Text, { color: color, children: display }, `token-${segIdx}`));
-                                });
-                                const currentLineGhost = isOnCursorLine ? inlineGhost : '';
-                                if (isOnCursorLine &&
-                                    cursorVisualColAbsolute === cpLen(lineText)) {
-                                    if (!currentLineGhost) {
-                                        renderedLine.push(_jsx(Text, { children: showCursor ? chalk.inverse(' ') : ' ' }, `cursor-end-${cursorVisualColAbsolute}`));
-                                    }
-                                }
-                                const showCursorBeforeGhost = focus &&
-                                    isOnCursorLine &&
-                                    cursorVisualColAbsolute === cpLen(lineText) &&
-                                    currentLineGhost;
-                                return (_jsx(Box, { height: 1, children: _jsxs(Text, { terminalCursorFocus: showCursor && isOnCursorLine, terminalCursorPosition: cpIndexToOffset(lineText, cursorVisualColAbsolute), children: [renderedLine, showCursorBeforeGhost &&
-                                                (showCursor ? chalk.inverse(' ') : ' '), currentLineGhost && (_jsx(Text, { color: theme.text.secondary, children: currentLineGhost }))] }) }, `line-${visualIdxInRenderedSet}`));
-                            })
-                                .concat(additionalLines.map((ghostLine, index) => {
-                                const padding = Math.max(0, inputWidth - stringWidth(ghostLine));
-                                return (_jsxs(Text, { color: theme.text.secondary, children: [ghostLine, ' '.repeat(padding)] }, `ghost-line-${index}`));
-                            }))) })] }) }), useLineFallback ? (_jsx(Box, { borderStyle: "round", borderTop: false, borderBottom: true, borderLeft: false, borderRight: false, borderColor: borderColor, width: terminalWidth, flexDirection: "row", alignItems: "flex-start", height: 0 })) : null, suggestionsPosition === 'below' && suggestionsNode] }));
+    return (_jsxs(_Fragment, { children: [suggestionsPosition === 'above' && suggestionsNode, useLineFallback ? (_jsx(Box, { borderStyle: "round", borderTop: true, borderBottom: false, borderLeft: false, borderRight: false, borderColor: borderColor, width: terminalWidth, flexDirection: "row", alignItems: "flex-start", height: 0 })) : null, _jsx(HalfLinePaddedBox, { backgroundBaseColor: theme.background.input, backgroundOpacity: 1, useBackgroundColor: useBackgroundColor, children: _jsxs(Box, { flexGrow: 1, flexDirection: "row", paddingX: 1, borderColor: borderColor, borderStyle: useLineFallback ? 'round' : undefined, borderTop: false, borderBottom: false, borderLeft: !useBackgroundColor, borderRight: !useBackgroundColor, children: [_jsxs(Text, { color: statusColor ?? theme.text.accent, "aria-label": statusText || undefined, children: [shellModeActive ? (reverseSearchActive ? (_jsxs(Text, { color: theme.text.link, "aria-label": SCREEN_READER_USER_PREFIX, children: ["(r:)", ' '] })) : ('!')) : commandSearchActive ? (_jsx(Text, { color: theme.text.accent, children: "(r:) " })) : showYoloStyling ? ('*') : ('>'), ' '] }), _jsx(Box, { flexGrow: 1, flexDirection: "column", ref: innerBoxRef, children: buffer.text.length === 0 && placeholder ? (showCursor ? (_jsxs(Text, { terminalCursorFocus: showCursor, terminalCursorPosition: 0, children: [chalk.inverse(placeholder.slice(0, 1)), _jsx(Text, { color: theme.text.secondary, children: placeholder.slice(1) })] })) : (_jsx(Text, { color: theme.text.secondary, children: placeholder }))) : (_jsx(Box, { flexDirection: "column", height: Math.min(buffer.viewportHeight, scrollableData.length), width: "100%", children: isAlternateBuffer ? (_jsx(ScrollableList, { ref: listRef, hasFocus: focus, data: scrollableData, renderItem: renderItem, estimatedItemHeight: () => 1, fixedItemHeight: true, keyExtractor: (item) => item.type === 'visualLine'
+                                        ? `line-${item.absoluteVisualIdx}`
+                                        : `ghost-${item.index}`, width: inputWidth, backgroundColor: listBackgroundColor, containerHeight: Math.min(buffer.viewportHeight, scrollableData.length) })) : (scrollableData
+                                    .slice(buffer.visualScrollRow, buffer.visualScrollRow + buffer.viewportHeight)
+                                    .map((item, index) => {
+                                    const actualIndex = buffer.visualScrollRow + index;
+                                    const key = item.type === 'visualLine'
+                                        ? `line-${item.absoluteVisualIdx}`
+                                        : `ghost-${item.index}`;
+                                    return (_jsx(Fragment, { children: renderItem({ item, index: actualIndex }) }, key));
+                                })) })) })] }) }), useLineFallback ? (_jsx(Box, { borderStyle: "round", borderTop: false, borderBottom: true, borderLeft: false, borderRight: false, borderColor: borderColor, width: terminalWidth, flexDirection: "row", alignItems: "flex-start", height: 0 })) : null, suggestionsPosition === 'below' && suggestionsNode] }));
 };
 //# sourceMappingURL=InputPrompt.js.map