@umsai/ums-code 0.0.14-v1 → 0.1.4-v2

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

@@ -1,27 +1,52 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-/**
- * @license
- * Copyright 2025 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-import { useCallback, useEffect, useState } from 'react';
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useState, useRef } from 'react';
 import { Box, Text } from 'ink';
-import { Colors } from '../colors.js';
-import { SuggestionsDisplay } from './SuggestionsDisplay.js';
+import { SuggestionsDisplay, MAX_WIDTH } from './SuggestionsDisplay.js';
+import { theme } from '../semantic-colors.js';
 import { useInputHistory } from '../hooks/useInputHistory.js';
 import { logicalPosToOffset } from './shared/text-buffer.js';
-import { cpSlice, cpLen } from '../utils/textUtils.js';
+import { cpSlice, cpLen, toCodePoints } from '../utils/textUtils.js';
 import chalk from 'chalk';
 import stringWidth from 'string-width';
 import { useShellHistory } from '../hooks/useShellHistory.js';
 import { useReverseSearchCompletion } from '../hooks/useReverseSearchCompletion.js';
 import { useCommandCompletion } from '../hooks/useCommandCompletion.js';
 import { useKeypress } from '../hooks/useKeypress.js';
+import { keyMatchers, Command } from '../keyMatchers.js';
+import { ApprovalMode } from '@umsai/ums-code-core';
+import { parseInputForHighlighting, buildSegmentsForVisualSlice, } from '../utils/highlight.js';
 import { clipboardHasImage, saveClipboardImage, cleanupOldClipboardImages, } from '../utils/clipboardUtils.js';
-import * as path from 'path';
-// 输入组件
-export const InputPrompt = ({ buffer, onSubmit, userMessages, onClearScreen, config, slashCommands, commandContext, placeholder = '  Type your message or @path/to/file', focus = true, inputWidth, suggestionsWidth, shellModeActive, setShellModeActive, vimHandleInput, }) => {
+import * as path from 'node:path';
+import { SCREEN_READER_USER_PREFIX } from '../textConstants.js';
+import { useShellFocusState } from '../contexts/ShellFocusContext.js';
+// The input content, input container, and input suggestions list may have different widths
+export const calculatePromptWidths = (terminalWidth) => {
+    const widthFraction = 0.9;
+    const FRAME_PADDING_AND_BORDER = 4; // Border (2) + padding (2)
+    const PROMPT_PREFIX_WIDTH = 2; // '> ' or '! '
+    const MIN_CONTENT_WIDTH = 2;
+    const innerContentWidth = Math.floor(terminalWidth * widthFraction) -
+        FRAME_PADDING_AND_BORDER -
+        PROMPT_PREFIX_WIDTH;
+    const inputWidth = Math.max(MIN_CONTENT_WIDTH, innerContentWidth);
+    const FRAME_OVERHEAD = FRAME_PADDING_AND_BORDER + PROMPT_PREFIX_WIDTH;
+    const containerWidth = inputWidth + FRAME_OVERHEAD;
+    const suggestionsWidth = Math.max(20, Math.floor(terminalWidth * 1.0));
+    return {
+        inputWidth,
+        containerWidth,
+        suggestionsWidth,
+        frameOverhead: FRAME_OVERHEAD,
+    };
+};
+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, vimHandleInput, isEmbeddedShellFocused, }) => {
+    const isShellFocused = useShellFocusState();
     const [justNavigatedHistory, setJustNavigatedHistory] = useState(false);
+    const [escPressCount, setEscPressCount] = useState(0);
+    const [showEscapePrompt, setShowEscapePrompt] = useState(false);
+    const escapeTimerRef = useRef(null);
+    const [recentPasteTime, setRecentPasteTime] = useState(null);
+    const pasteTimeoutRef = useRef(null);
     const [dirs, setDirs] = useState(config.getWorkspaceContext().getDirectories());
     const dirsChanged = config.getWorkspaceContext().getDirectories();
     useEffect(() => {
@@ -30,16 +55,44 @@ export const InputPrompt = ({ buffer, onSubmit, userMessages, onClearScreen, con
         }
     }, [dirs.length, dirsChanged]);
     const [reverseSearchActive, setReverseSearchActive] = useState(false);
+    const [commandSearchActive, setCommandSearchActive] = useState(false);
     const [textBeforeReverseSearch, setTextBeforeReverseSearch] = useState('');
     const [cursorPosition, setCursorPosition] = useState([
         0, 0,
     ]);
+    const [expandedSuggestionIndex, setExpandedSuggestionIndex] = useState(-1);
     const shellHistory = useShellHistory(config.getProjectRoot());
-    const historyData = shellHistory.history;
+    const shellHistoryData = shellHistory.history;
     const completion = useCommandCompletion(buffer, dirs, config.getTargetDir(), slashCommands, commandContext, reverseSearchActive, config);
-    const reverseSearchCompletion = useReverseSearchCompletion(buffer, historyData, reverseSearchActive);
+    const reverseSearchCompletion = useReverseSearchCompletion(buffer, shellHistoryData, reverseSearchActive);
+    const commandSearchCompletion = useReverseSearchCompletion(buffer, userMessages, commandSearchActive);
     const resetCompletionState = completion.resetCompletionState;
     const resetReverseSearchCompletionState = reverseSearchCompletion.resetCompletionState;
+    const resetCommandSearchCompletionState = commandSearchCompletion.resetCompletionState;
+    const showCursor = focus && isShellFocused && !isEmbeddedShellFocused;
+    const resetEscapeState = useCallback(() => {
+        if (escapeTimerRef.current) {
+            clearTimeout(escapeTimerRef.current);
+            escapeTimerRef.current = null;
+        }
+        setEscPressCount(0);
+        setShowEscapePrompt(false);
+    }, []);
+    // Notify parent component about escape prompt state changes
+    useEffect(() => {
+        if (onEscapePromptChange) {
+            onEscapePromptChange(showEscapePrompt);
+        }
+    }, [showEscapePrompt, onEscapePromptChange]);
+    // Clear escape prompt timer on unmount
+    useEffect(() => () => {
+        if (escapeTimerRef.current) {
+            clearTimeout(escapeTimerRef.current);
+        }
+        if (pasteTimeoutRef.current) {
+            clearTimeout(pasteTimeoutRef.current);
+        }
+    }, []);
     const handleSubmitAndClear = useCallback((submittedValue) => {
         if (shellModeActive) {
             shellHistory.addCommandToHistory(submittedValue);
@@ -75,6 +128,8 @@ export const InputPrompt = ({ buffer, onSubmit, userMessages, onClearScreen, con
         if (justNavigatedHistory) {
             resetCompletionState();
             resetReverseSearchCompletionState();
+            resetCommandSearchCompletionState();
+            setExpandedSuggestionIndex(-1);
             setJustNavigatedHistory(false);
         }
     }, [
@@ -83,6 +138,7 @@ export const InputPrompt = ({ buffer, onSubmit, userMessages, onClearScreen, con
         resetCompletionState,
         setJustNavigatedHistory,
         resetReverseSearchCompletionState,
+        resetCommandSearchCompletionState,
     ]);
     // Handle clipboard image pasting with Ctrl+V
     const handleClipboardImage = useCallback(async () => {
@@ -126,13 +182,38 @@ export const InputPrompt = ({ buffer, onSubmit, userMessages, onClearScreen, con
         }
     }, [buffer, config]);
     const handleInput = useCallback((key) => {
+        // TODO(jacobr): this special case is likely not needed anymore.
+        // We should probably stop supporting paste if the InputPrompt is not
+        // focused.
         /// We want to handle paste even when not focused to support drag and drop.
         if (!focus && !key.paste) {
             return;
         }
+        if (key.paste) {
+            // Record paste time to prevent accidental auto-submission
+            setRecentPasteTime(Date.now());
+            // Clear any existing paste timeout
+            if (pasteTimeoutRef.current) {
+                clearTimeout(pasteTimeoutRef.current);
+            }
+            // Clear the paste protection after a safe delay
+            pasteTimeoutRef.current = setTimeout(() => {
+                setRecentPasteTime(null);
+                pasteTimeoutRef.current = null;
+            }, 500);
+            // Ensure we never accidentally interpret paste as regular input.
+            buffer.handleInput(key);
+            return;
+        }
         if (vimHandleInput && vimHandleInput(key)) {
             return;
         }
+        // Reset ESC count and hide prompt on any non-ESC key
+        if (key.name !== 'escape') {
+            if (escPressCount > 0 || showEscapePrompt) {
+                resetEscapeState();
+            }
+        }
         if (key.sequence === '!' &&
             buffer.text === '' &&
             !completion.showSuggestions) {
@@ -140,111 +221,180 @@ export const InputPrompt = ({ buffer, onSubmit, userMessages, onClearScreen, con
             buffer.setText(''); // Clear the '!' from input
             return;
         }
-        if (key.name === 'escape') {
-            if (reverseSearchActive) {
-                setReverseSearchActive(false);
-                reverseSearchCompletion.resetCompletionState();
+        if (keyMatchers[Command.ESCAPE](key)) {
+            const cancelSearch = (setActive, resetCompletion) => {
+                setActive(false);
+                resetCompletion();
                 buffer.setText(textBeforeReverseSearch);
                 const offset = logicalPosToOffset(buffer.lines, cursorPosition[0], cursorPosition[1]);
                 buffer.moveToOffset(offset);
+                setExpandedSuggestionIndex(-1);
+            };
+            if (reverseSearchActive) {
+                cancelSearch(setReverseSearchActive, reverseSearchCompletion.resetCompletionState);
+                return;
+            }
+            if (commandSearchActive) {
+                cancelSearch(setCommandSearchActive, commandSearchCompletion.resetCompletionState);
                 return;
             }
             if (shellModeActive) {
                 setShellModeActive(false);
+                resetEscapeState();
                 return;
             }
             if (completion.showSuggestions) {
                 completion.resetCompletionState();
+                setExpandedSuggestionIndex(-1);
+                resetEscapeState();
                 return;
             }
+            // Handle double ESC for clearing input
+            if (escPressCount === 0) {
+                if (buffer.text === '') {
+                    return;
+                }
+                setEscPressCount(1);
+                setShowEscapePrompt(true);
+                if (escapeTimerRef.current) {
+                    clearTimeout(escapeTimerRef.current);
+                }
+                escapeTimerRef.current = setTimeout(() => {
+                    resetEscapeState();
+                }, 500);
+            }
+            else {
+                // clear input and immediately reset state
+                buffer.setText('');
+                resetCompletionState();
+                resetEscapeState();
+            }
+            return;
         }
-        if (shellModeActive && key.ctrl && key.name === 'r') {
+        if (shellModeActive && keyMatchers[Command.REVERSE_SEARCH](key)) {
             setReverseSearchActive(true);
             setTextBeforeReverseSearch(buffer.text);
             setCursorPosition(buffer.cursor);
             return;
         }
-        if (key.ctrl && key.name === 'l') {
+        if (keyMatchers[Command.CLEAR_SCREEN](key)) {
             onClearScreen();
             return;
         }
-        if (reverseSearchActive) {
-            const { activeSuggestionIndex, navigateUp, navigateDown, showSuggestions, suggestions, } = reverseSearchCompletion;
+        if (reverseSearchActive || commandSearchActive) {
+            const isCommandSearch = commandSearchActive;
+            const sc = isCommandSearch
+                ? commandSearchCompletion
+                : reverseSearchCompletion;
+            const { activeSuggestionIndex, navigateUp, navigateDown, showSuggestions, suggestions, } = sc;
+            const setActive = isCommandSearch
+                ? setCommandSearchActive
+                : setReverseSearchActive;
+            const resetState = sc.resetCompletionState;
             if (showSuggestions) {
-                if (key.name === 'up') {
+                if (keyMatchers[Command.NAVIGATION_UP](key)) {
                     navigateUp();
                     return;
                 }
-                if (key.name === 'down') {
+                if (keyMatchers[Command.NAVIGATION_DOWN](key)) {
                     navigateDown();
                     return;
                 }
-                if (key.name === 'tab') {
-                    reverseSearchCompletion.handleAutocomplete(activeSuggestionIndex);
-                    reverseSearchCompletion.resetCompletionState();
-                    setReverseSearchActive(false);
+                if (keyMatchers[Command.COLLAPSE_SUGGESTION](key)) {
+                    if (suggestions[activeSuggestionIndex].value.length >= MAX_WIDTH) {
+                        setExpandedSuggestionIndex(-1);
+                        return;
+                    }
+                }
+                if (keyMatchers[Command.EXPAND_SUGGESTION](key)) {
+                    if (suggestions[activeSuggestionIndex].value.length >= MAX_WIDTH) {
+                        setExpandedSuggestionIndex(activeSuggestionIndex);
+                        return;
+                    }
+                }
+                if (keyMatchers[Command.ACCEPT_SUGGESTION_REVERSE_SEARCH](key)) {
+                    sc.handleAutocomplete(activeSuggestionIndex);
+                    resetState();
+                    setActive(false);
                     return;
                 }
             }
-            if (key.name === 'return' && !key.ctrl) {
+            if (keyMatchers[Command.SUBMIT_REVERSE_SEARCH](key)) {
                 const textToSubmit = showSuggestions && activeSuggestionIndex > -1
                     ? suggestions[activeSuggestionIndex].value
                     : buffer.text;
                 handleSubmitAndClear(textToSubmit);
-                reverseSearchCompletion.resetCompletionState();
-                setReverseSearchActive(false);
+                resetState();
+                setActive(false);
                 return;
             }
             // Prevent up/down from falling through to regular history navigation
-            if (key.name === 'up' || key.name === 'down') {
+            if (keyMatchers[Command.NAVIGATION_UP](key) ||
+                keyMatchers[Command.NAVIGATION_DOWN](key)) {
                 return;
             }
         }
         // If the command is a perfect match, pressing enter should execute it.
-        if (completion.isPerfectMatch && key.name === 'return') {
+        if (completion.isPerfectMatch && keyMatchers[Command.RETURN](key)) {
             handleSubmitAndClear(buffer.text);
             return;
         }
         if (completion.showSuggestions) {
             if (completion.suggestions.length > 1) {
-                if (key.name === 'up' || (key.ctrl && key.name === 'p')) {
+                if (keyMatchers[Command.COMPLETION_UP](key)) {
                     completion.navigateUp();
+                    setExpandedSuggestionIndex(-1); // Reset expansion when navigating
                     return;
                 }
-                if (key.name === 'down' || (key.ctrl && key.name === 'n')) {
+                if (keyMatchers[Command.COMPLETION_DOWN](key)) {
                     completion.navigateDown();
+                    setExpandedSuggestionIndex(-1); // Reset expansion when navigating
                     return;
                 }
             }
-            if (key.name === 'tab' || (key.name === 'return' && !key.ctrl)) {
+            if (keyMatchers[Command.ACCEPT_SUGGESTION](key)) {
                 if (completion.suggestions.length > 0) {
                     const targetIndex = completion.activeSuggestionIndex === -1
                         ? 0 // Default to the first if none is active
                         : completion.activeSuggestionIndex;
                     if (targetIndex < completion.suggestions.length) {
                         completion.handleAutocomplete(targetIndex);
+                        setExpandedSuggestionIndex(-1); // Reset expansion after selection
                     }
                 }
                 return;
             }
         }
+        // Handle Tab key for ghost text acceptance
+        if (key.name === 'tab' &&
+            !completion.showSuggestions &&
+            completion.promptCompletion.text) {
+            completion.promptCompletion.accept();
+            return;
+        }
         if (!shellModeActive) {
-            if (key.ctrl && key.name === 'p') {
+            if (keyMatchers[Command.REVERSE_SEARCH](key)) {
+                setCommandSearchActive(true);
+                setTextBeforeReverseSearch(buffer.text);
+                setCursorPosition(buffer.cursor);
+                return;
+            }
+            if (keyMatchers[Command.HISTORY_UP](key)) {
                 inputHistory.navigateUp();
                 return;
             }
-            if (key.ctrl && key.name === 'n') {
+            if (keyMatchers[Command.HISTORY_DOWN](key)) {
                 inputHistory.navigateDown();
                 return;
             }
             // Handle arrow-up/down for history on single-line or at edges
-            if (key.name === 'up' &&
+            if (keyMatchers[Command.NAVIGATION_UP](key) &&
                 (buffer.allVisualLines.length === 1 ||
                     (buffer.visualCursor[0] === 0 && buffer.visualScrollRow === 0))) {
                 inputHistory.navigateUp();
                 return;
             }
-            if (key.name === 'down' &&
+            if (keyMatchers[Command.NAVIGATION_DOWN](key) &&
                 (buffer.allVisualLines.length === 1 ||
                     buffer.visualCursor[0] === buffer.allVisualLines.length - 1)) {
                 inputHistory.navigateDown();
@@ -252,21 +402,27 @@ export const InputPrompt = ({ buffer, onSubmit, userMessages, onClearScreen, con
             }
         }
         else {
-            if (key.name === 'up') {
+            // Shell History Navigation
+            if (keyMatchers[Command.NAVIGATION_UP](key)) {
                 const prevCommand = shellHistory.getPreviousCommand();
                 if (prevCommand !== null)
                     buffer.setText(prevCommand);
                 return;
             }
-            if (key.name === 'down') {
+            if (keyMatchers[Command.NAVIGATION_DOWN](key)) {
                 const nextCommand = shellHistory.getNextCommand();
                 if (nextCommand !== null)
                     buffer.setText(nextCommand);
                 return;
             }
         }
-        if (key.name === 'return' && !key.ctrl && !key.meta && !key.paste) {
+        if (keyMatchers[Command.SUBMIT](key)) {
             if (buffer.text.trim()) {
+                // Check if a paste operation occurred recently to prevent accidental auto-submission
+                if (recentPasteTime !== null) {
+                    // Paste occurred recently, ignore this submit to prevent auto-execution
+                    return;
+                }
                 const [row, col] = buffer.cursor;
                 const line = buffer.lines[row];
                 const charBefore = col > 0 ? cpSlice(line, col - 1, col) : '';
@@ -281,51 +437,61 @@ export const InputPrompt = ({ buffer, onSubmit, userMessages, onClearScreen, con
             return;
         }
         // Newline insertion
-        if (key.name === 'return' && (key.ctrl || key.meta || key.paste)) {
+        if (keyMatchers[Command.NEWLINE](key)) {
             buffer.newline();
             return;
         }
         // Ctrl+A (Home) / Ctrl+E (End)
-        if (key.ctrl && key.name === 'a') {
+        if (keyMatchers[Command.HOME](key)) {
             buffer.move('home');
             return;
         }
-        if (key.ctrl && key.name === 'e') {
+        if (keyMatchers[Command.END](key)) {
             buffer.move('end');
-            buffer.moveToOffset(cpLen(buffer.text));
             return;
         }
         // Ctrl+C (Clear input)
-        if (key.ctrl && key.name === 'c') {
+        if (keyMatchers[Command.CLEAR_INPUT](key)) {
             if (buffer.text.length > 0) {
                 buffer.setText('');
                 resetCompletionState();
-                return;
             }
             return;
         }
         // Kill line commands
-        if (key.ctrl && key.name === 'k') {
+        if (keyMatchers[Command.KILL_LINE_RIGHT](key)) {
             buffer.killLineRight();
             return;
         }
-        if (key.ctrl && key.name === 'u') {
+        if (keyMatchers[Command.KILL_LINE_LEFT](key)) {
             buffer.killLineLeft();
             return;
         }
+        if (keyMatchers[Command.DELETE_WORD_BACKWARD](key)) {
+            buffer.deleteWordLeft();
+            return;
+        }
         // External editor
-        const isCtrlX = key.ctrl && (key.name === 'x' || key.sequence === '\x18');
-        if (isCtrlX) {
+        if (keyMatchers[Command.OPEN_EXTERNAL_EDITOR](key)) {
             buffer.openInExternalEditor();
             return;
         }
         // Ctrl+V for clipboard image paste
-        if (key.ctrl && key.name === 'v') {
+        if (keyMatchers[Command.PASTE_CLIPBOARD_IMAGE](key)) {
             handleClipboardImage();
             return;
         }
         // Fall back to the text buffer's default input handling for all other keys
         buffer.handleInput(key);
+        // Clear ghost text when user types regular characters (not navigation/control keys)
+        if (completion.promptCompletion.text &&
+            key.sequence &&
+            key.sequence.length === 1 &&
+            !key.ctrl &&
+            !key.meta) {
+            completion.promptCompletion.clear();
+            setExpandedSuggestionIndex(-1);
+        }
     }, [
         focus,
         buffer,
@@ -339,40 +505,205 @@ export const InputPrompt = ({ buffer, onSubmit, userMessages, onClearScreen, con
         reverseSearchCompletion,
         handleClipboardImage,
         resetCompletionState,
+        escPressCount,
+        showEscapePrompt,
+        resetEscapeState,
         vimHandleInput,
         reverseSearchActive,
         textBeforeReverseSearch,
         cursorPosition,
+        recentPasteTime,
+        commandSearchActive,
+        commandSearchCompletion,
     ]);
-    useKeypress(handleInput, { isActive: true });
+    useKeypress(handleInput, { isActive: !isEmbeddedShellFocused });
     const linesToRender = buffer.viewportVisualLines;
     const [cursorVisualRowAbsolute, cursorVisualColAbsolute] = buffer.visualCursor;
     const scrollVisualRow = buffer.visualScrollRow;
-    return (_jsxs(_Fragment, { children: [_jsxs(Box, { borderStyle: "round", borderColor: shellModeActive ? Colors.AccentYellow : Colors.AccentBlue, paddingX: 1, children: [_jsx(Text, { color: shellModeActive ? Colors.AccentYellow : Colors.AccentPurple, children: shellModeActive ? (reverseSearchActive ? (_jsx(Text, { color: Colors.AccentCyan, children: "(r:) " })) : ('! ')) : ('> ') }), _jsx(Box, { flexGrow: 1, flexDirection: "column", children: buffer.text.length === 0 && placeholder ? (focus ? (_jsxs(Text, { children: [chalk.inverse(placeholder.slice(0, 1)), _jsx(Text, { color: Colors.Gray, children: placeholder.slice(1) })] })) : (_jsx(Text, { color: Colors.Gray, children: placeholder }))) : (linesToRender.map((lineText, visualIdxInRenderedSet) => {
-                            const cursorVisualRow = cursorVisualRowAbsolute - scrollVisualRow;
-                            let display = cpSlice(lineText, 0, inputWidth);
-                            const currentVisualWidth = stringWidth(display);
-                            if (currentVisualWidth < inputWidth) {
-                                display = display + ' '.repeat(inputWidth - currentVisualWidth);
+    const getGhostTextLines = useCallback(() => {
+        if (!completion.promptCompletion.text ||
+            !buffer.text ||
+            !completion.promptCompletion.text.startsWith(buffer.text)) {
+            return { inlineGhost: '', additionalLines: [] };
+        }
+        const ghostSuffix = completion.promptCompletion.text.slice(buffer.text.length);
+        if (!ghostSuffix) {
+            return { inlineGhost: '', additionalLines: [] };
+        }
+        const currentLogicalLine = buffer.lines[buffer.cursor[0]] || '';
+        const cursorCol = buffer.cursor[1];
+        const textBeforeCursor = cpSlice(currentLogicalLine, 0, cursorCol);
+        const usedWidth = stringWidth(textBeforeCursor);
+        const remainingWidth = Math.max(0, inputWidth - usedWidth);
+        const ghostTextLinesRaw = ghostSuffix.split('\n');
+        const firstLineRaw = ghostTextLinesRaw.shift() || '';
+        let inlineGhost = '';
+        let remainingFirstLine = '';
+        if (stringWidth(firstLineRaw) <= remainingWidth) {
+            inlineGhost = firstLineRaw;
+        }
+        else {
+            const words = firstLineRaw.split(' ');
+            let currentLine = '';
+            let wordIdx = 0;
+            for (const word of words) {
+                const prospectiveLine = currentLine ? `${currentLine} ${word}` : word;
+                if (stringWidth(prospectiveLine) > remainingWidth) {
+                    break;
+                }
+                currentLine = prospectiveLine;
+                wordIdx++;
+            }
+            inlineGhost = currentLine;
+            if (words.length > wordIdx) {
+                remainingFirstLine = words.slice(wordIdx).join(' ');
+            }
+        }
+        const linesToWrap = [];
+        if (remainingFirstLine) {
+            linesToWrap.push(remainingFirstLine);
+        }
+        linesToWrap.push(...ghostTextLinesRaw);
+        const remainingGhostText = linesToWrap.join('\n');
+        const additionalLines = [];
+        if (remainingGhostText) {
+            const textLines = remainingGhostText.split('\n');
+            for (const textLine of textLines) {
+                const words = textLine.split(' ');
+                let currentLine = '';
+                for (const word of words) {
+                    const prospectiveLine = currentLine ? `${currentLine} ${word}` : word;
+                    const prospectiveWidth = stringWidth(prospectiveLine);
+                    if (prospectiveWidth > inputWidth) {
+                        if (currentLine) {
+                            additionalLines.push(currentLine);
+                        }
+                        let wordToProcess = word;
+                        while (stringWidth(wordToProcess) > inputWidth) {
+                            let part = '';
+                            const wordCP = toCodePoints(wordToProcess);
+                            let partWidth = 0;
+                            let splitIndex = 0;
+                            for (let i = 0; i < wordCP.length; i++) {
+                                const char = wordCP[i];
+                                const charWidth = stringWidth(char);
+                                if (partWidth + charWidth > inputWidth) {
+                                    break;
+                                }
+                                part += char;
+                                partWidth += charWidth;
+                                splitIndex = i + 1;
                             }
-                            if (focus && visualIdxInRenderedSet === cursorVisualRow) {
-                                const relativeVisualColForHighlight = cursorVisualColAbsolute;
-                                if (relativeVisualColForHighlight >= 0) {
-                                    if (relativeVisualColForHighlight < cpLen(display)) {
-                                        const charToHighlight = cpSlice(display, relativeVisualColForHighlight, relativeVisualColForHighlight + 1) || ' ';
-                                        const highlighted = chalk.inverse(charToHighlight);
+                            additionalLines.push(part);
+                            wordToProcess = cpSlice(wordToProcess, splitIndex);
+                        }
+                        currentLine = wordToProcess;
+                    }
+                    else {
+                        currentLine = prospectiveLine;
+                    }
+                }
+                if (currentLine) {
+                    additionalLines.push(currentLine);
+                }
+            }
+        }
+        return { inlineGhost, additionalLines };
+    }, [
+        completion.promptCompletion.text,
+        buffer.text,
+        buffer.lines,
+        buffer.cursor,
+        inputWidth,
+    ]);
+    const { inlineGhost, additionalLines } = getGhostTextLines();
+    const getActiveCompletion = () => {
+        if (commandSearchActive)
+            return commandSearchCompletion;
+        if (reverseSearchActive)
+            return reverseSearchCompletion;
+        return completion;
+    };
+    const activeCompletion = getActiveCompletion();
+    const shouldShowSuggestions = activeCompletion.showSuggestions;
+    const showAutoAcceptStyling = !shellModeActive && approvalMode === ApprovalMode.AUTO_EDIT;
+    const showYoloStyling = !shellModeActive && approvalMode === ApprovalMode.YOLO;
+    let statusColor;
+    let statusText = '';
+    if (shellModeActive) {
+        statusColor = theme.ui.symbol;
+        statusText = 'Shell mode';
+    }
+    else if (showYoloStyling) {
+        statusColor = theme.status.error;
+        statusText = 'YOLO mode';
+    }
+    else if (showAutoAcceptStyling) {
+        statusColor = theme.status.warning;
+        statusText = 'Accepting edits';
+    }
+    return (_jsxs(_Fragment, { children: [_jsxs(Box, { borderStyle: "round", borderColor: isShellFocused && !isEmbeddedShellFocused
+                    ? (statusColor ?? theme.border.focused)
+                    : theme.border.default, paddingX: 1, 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", children: buffer.text.length === 0 && placeholder ? (showCursor ? (_jsxs(Text, { 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];
+                            const cursorVisualRow = cursorVisualRowAbsolute - scrollVisualRow;
+                            const isOnCursorLine = focus && visualIdxInRenderedSet === cursorVisualRow;
+                            const renderedLine = [];
+                            const [logicalLineIdx, logicalStartCol] = mapEntry;
+                            const logicalLine = buffer.lines[logicalLineIdx] || '';
+                            const tokens = parseInputForHighlighting(logicalLine, logicalLineIdx);
+                            const visualStart = logicalStartCol;
+                            const visualEnd = logicalStartCol + cpLen(lineText);
+                            const segments = buildSegmentsForVisualSlice(tokens, visualStart, visualEnd);
+                            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(seg.text, relativeVisualColForHighlight - segStart, relativeVisualColForHighlight - segStart + 1);
+                                        const highlighted = showCursor
+                                            ? chalk.inverse(charToHighlight)
+                                            : charToHighlight;
                                         display =
-                                            cpSlice(display, 0, relativeVisualColForHighlight) +
+                                            cpSlice(seg.text, 0, relativeVisualColForHighlight - segStart) +
                                                 highlighted +
-                                                cpSlice(display, relativeVisualColForHighlight + 1);
-                                    }
-                                    else if (relativeVisualColForHighlight === cpLen(display) &&
-                                        cpLen(display) === inputWidth) {
-                                        display = display + chalk.inverse(' ');
+                                                cpSlice(seg.text, relativeVisualColForHighlight - segStart + 1);
                                     }
+                                    charCount = segEnd;
+                                }
+                                const color = seg.type === 'command' || seg.type === 'file'
+                                    ? 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}`));
                                 }
                             }
-                            return (_jsx(Text, { children: display }, `line-${visualIdxInRenderedSet}`));
-                        })) })] }), completion.showSuggestions && (_jsx(Box, { children: _jsx(SuggestionsDisplay, { suggestions: completion.suggestions, activeIndex: completion.activeSuggestionIndex, isLoading: completion.isLoadingSuggestions, width: suggestionsWidth, scrollOffset: completion.visibleStartIndex, userInput: buffer.text }) })), reverseSearchActive && (_jsx(Box, { children: _jsx(SuggestionsDisplay, { suggestions: reverseSearchCompletion.suggestions, activeIndex: reverseSearchCompletion.activeSuggestionIndex, isLoading: reverseSearchCompletion.isLoadingSuggestions, width: suggestionsWidth, scrollOffset: reverseSearchCompletion.visibleStartIndex, userInput: buffer.text }) }))] }));
+                            const showCursorBeforeGhost = focus &&
+                                isOnCursorLine &&
+                                cursorVisualColAbsolute === cpLen(lineText) &&
+                                currentLineGhost;
+                            return (_jsx(Box, { height: 1, children: _jsxs(Text, { 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}`));
+                        }))) })] }), shouldShowSuggestions && (_jsx(Box, { paddingRight: 2, children: _jsx(SuggestionsDisplay, { suggestions: activeCompletion.suggestions, activeIndex: activeCompletion.activeSuggestionIndex, isLoading: activeCompletion.isLoadingSuggestions, width: suggestionsWidth, scrollOffset: activeCompletion.visibleStartIndex, userInput: buffer.text, mode: buffer.text.startsWith('/') &&
+                        !reverseSearchActive &&
+                        !commandSearchActive
+                        ? 'slash'
+                        : 'reverse', expandedIndex: expandedSuggestionIndex }) }))] }));
 };
 //# sourceMappingURL=InputPrompt.js.map