centaurus-cli 2.6.2 → 2.7.0

package/dist/ui/components/InputBox.js

@@ -1,169 +1,547 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect, useRef, useMemo } from 'react';
 import { Box, Text, useInput } from 'ink';
-import TextInput from 'ink-text-input';
 import * as fs from 'fs';
 import * as path from 'path';
 import { Breadcrumbs } from './Breadcrumbs.js';
 import { ContextWindowIndicator } from './ContextWindowIndicator.js';
+import { detectIntent } from '../../utils/input-classifier.js';
+import { CommandHistoryManager } from '../../utils/command-history.js';
+const getVisualLines = (text, width) => {
+    const logicalLines = text.split('\n');
+    const visualLines = [];
+    let currentOffset = 0;
+    logicalLines.forEach((line, i) => {
+        if (line.length === 0) {
+            visualLines.push({ start: currentOffset, end: currentOffset, isHardEnd: true });
+            currentOffset += 1;
+            return;
+        }
+        let remaining = line;
+        let lineStartOffset = currentOffset;
+        while (remaining.length > 0) {
+            let splitIndex = remaining.length;
+            let isHardEnd = false;
+            if (remaining.length > width) {
+                splitIndex = width;
+                const lastSpace = remaining.lastIndexOf(' ', width);
+                if (lastSpace > 0) {
+                    splitIndex = lastSpace + 1;
+                }
+            }
+            else {
+                isHardEnd = true;
+            }
+            visualLines.push({
+                start: lineStartOffset,
+                end: lineStartOffset + splitIndex,
+                isHardEnd: isHardEnd
+            });
+            lineStartOffset += splitIndex;
+            remaining = remaining.slice(splitIndex);
+        }
+        currentOffset += line.length + (i < logicalLines.length - 1 ? 1 : 0);
+    });
+    return visualLines;
+};
 export const InputBox = React.memo(({ onSubmit, placeholder = 'Ask anything...', autoAcceptMode, model, planMode = false, commandMode = false, currentWorkingDirectory, commandHistory = [], onToggleAutoAccept, onToggleCommandMode, isActive = true, subshellContext, currentTokens = 0, maxTokens = 1000000 }) => {
     const [value, setValue] = useState('');
+    const [cursorOffset, setCursorOffset] = useState(0);
     const [completions, setCompletions] = useState([]);
     const [completionIndex, setCompletionIndex] = useState(0);
-    const [inputKey, setInputKey] = useState(0);
     const [historyIndex, setHistoryIndex] = useState(-1);
     const [tempValue, setTempValue] = useState('');
-    const ignoreNextChangeRef = React.useRef(false);
+    const ignoreNextChangeRef = useRef(false);
+    // Auto Mode State
+    const [isAutoMode, setIsAutoMode] = useState(true);
+    const [detectedIntent, setDetectedIntent] = useState('ai');
+    // Autocomplete State
+    const [autocompleteSuggestion, setAutocompleteSuggestion] = useState(null);
+    // Undo/Redo State
+    const [undoStack, setUndoStack] = useState([]);
+    const [redoStack, setRedoStack] = useState([]);
+    // Selection State
+    const [selection, setSelection] = useState(null);
+    // Configuration for scrolling
+    const MAX_VISIBLE_LINES = 9;
+    // Load history on mount
+    useEffect(() => {
+        CommandHistoryManager.getInstance().load();
+    }, []);
     // Force clear value if it becomes empty or whitespace-only after external changes
-    React.useEffect(() => {
-        if (value && value.trim() === '') {
+    useEffect(() => {
+        if (value && value.trim() === '' && cursorOffset > 0) {
             setValue('');
-            setInputKey(prev => prev + 1);
+            setCursorOffset(0);
         }
-    }, [value]);
-    // Determine current working directory - use prop if provided, otherwise process.cwd()
-    const currentDir = React.useMemo(() => {
+    }, [value, cursorOffset]);
+    // Determine current working directory
+    const currentDir = useMemo(() => {
         const cwd = currentWorkingDirectory || process.cwd();
-        // Truncate long paths to prevent layout shifts
         if (cwd.length > 60) {
             return '...' + cwd.slice(-57);
         }
         return cwd;
     }, [currentWorkingDirectory]);
+    // Autocomplete Logic
+    useEffect(() => {
+        if (!value || value.trim() === '') {
+            setAutocompleteSuggestion(null);
+            return;
+        }
+        // Only show suggestions if we are in command mode (manual or auto-detected)
+        // OR if we are in Auto mode and it looks like a command
+        const shouldSuggest = commandMode || (isAutoMode && detectedIntent === 'command');
+        if (shouldSuggest) {
+            const matches = CommandHistoryManager.getInstance().getMatches(value, currentDir);
+            if (matches.length > 0) {
+                setAutocompleteSuggestion(matches[0]);
+            }
+            else {
+                setAutocompleteSuggestion(null);
+            }
+        }
+        else {
+            setAutocompleteSuggestion(null);
+        }
+    }, [value, commandMode, isAutoMode, detectedIntent, currentDir]);
+    // Auto-classification effect (Synchronous Heuristics Only)
+    useEffect(() => {
+        // Only run classification if in Auto Mode
+        if (!isAutoMode) {
+            return;
+        }
+        // Only classify if value is non-empty and not just whitespace
+        const trimmedValue = value.trim();
+        if (!trimmedValue || !onToggleCommandMode) {
+            // Default to AI if empty
+            setDetectedIntent('ai');
+            if (commandMode)
+                onToggleCommandMode();
+            return;
+        }
+        // Run local heuristic detection immediately
+        const intent = detectIntent(trimmedValue);
+        setDetectedIntent(intent);
+        // Switch mode based on intent
+        if (intent === 'command') {
+            if (!commandMode)
+                onToggleCommandMode();
+        }
+        else {
+            // intent === 'ai'
+            if (commandMode)
+                onToggleCommandMode();
+        }
+    }, [value, commandMode, onToggleCommandMode, isAutoMode]);
+    const pushToUndoStack = () => {
+        setUndoStack(prev => [...prev, { value, cursorOffset }]);
+        setRedoStack([]); // Clear redo stack on new action
+    };
+    const handleUndo = () => {
+        if (undoStack.length === 0)
+            return;
+        const previousState = undoStack[undoStack.length - 1];
+        setRedoStack(prev => [...prev, { value, cursorOffset }]);
+        setUndoStack(prev => prev.slice(0, -1));
+        setValue(previousState.value);
+        setCursorOffset(previousState.cursorOffset);
+        setSelection(null);
+    };
     useInput((input, key) => {
-        // Ctrl+T to toggle auto-accept - handle FIRST to prevent character from appearing
+        if (!isActive)
+            return;
+        // Detect OS for platform-specific key handling
+        const isWindows = process.platform === 'win32';
+        const inputCharCode = input ? input.charCodeAt(0) : null;
+        // DELETE WORD BACKWARDS - Check this FIRST before standard backspace/delete
+        // Triggers on any of these conditions:
+        // 1. Ctrl+W (char code 23) - Standard Unix terminal shortcut
+        // 2. Meta/Alt + Backspace/Delete - Mac alternative
+        // 3. Ctrl + Delete - Works on all platforms (Ctrl+Backspace doesn't work on Windows/Ink)
+        // 4. Windows Ctrl+Del sends char code 127
+        const isDeleteWord = inputCharCode === 23 || // Ctrl+W
+            (key.meta && (key.backspace || key.delete)) || // Meta/Alt + Backspace/Delete
+            (key.ctrl && key.delete) || // Ctrl+Delete (NOTE: Ctrl+Backspace not detectable on Windows/Ink)
+            (isWindows && inputCharCode === 127); // Windows: Ctrl+Del sends char 127
+        if (isDeleteWord) {
+            pushToUndoStack();
+            if (cursorOffset > 0) {
+                let newOffset = cursorOffset;
+                // Skip whitespace backwards
+                while (newOffset > 0 && /\s/.test(value[newOffset - 1])) {
+                    newOffset--;
+                }
+                // Skip non-whitespace backwards
+                while (newOffset > 0 && !/\s/.test(value[newOffset - 1])) {
+                    newOffset--;
+                }
+                const newValue = value.slice(0, newOffset) + value.slice(cursorOffset);
+                setValue(newValue);
+                setCursorOffset(newOffset);
+            }
+            setHistoryIndex(-1);
+            setCompletions([]);
+            return;
+        }
+        // Ctrl+T: Toggle auto-accept
         if (key.ctrl && input.toLowerCase() === 't') {
             ignoreNextChangeRef.current = true;
             onToggleAutoAccept();
-            // Clear the flag after a short delay in case the change doesn't come
-            setTimeout(() => {
-                ignoreNextChangeRef.current = false;
-            }, 100);
-            return; // Return immediately to prevent any further processing
+            setTimeout(() => { ignoreNextChangeRef.current = false; }, 100);
+            return;
         }
-        // Ctrl+D to toggle command mode - handle SECOND
+        // Ctrl+D: Cycle modes (Agent -> Terminal -> Auto -> Agent)
         if (key.ctrl && input.toLowerCase() === 'd') {
             if (onToggleCommandMode) {
                 ignoreNextChangeRef.current = true;
-                onToggleCommandMode();
-                // Clear the flag after a short delay
-                setTimeout(() => {
-                    ignoreNextChangeRef.current = false;
-                }, 100);
-                // Only remount if input is empty to prevent losing typed content
-                if (!value || value.trim() === '') {
-                    setTimeout(() => {
-                        setValue('');
-                        setInputKey(prev => prev + 1);
-                    }, 10);
+                // Cycle Logic
+                if (!isAutoMode && !commandMode) {
+                    // Agent -> Terminal
+                    onToggleCommandMode();
                 }
+                else if (!isAutoMode && commandMode) {
+                    // Terminal -> Auto
+                    setIsAutoMode(true);
+                    // Trigger initial detection for Auto mode
+                    const intent = detectIntent(value);
+                    setDetectedIntent(intent);
+                    // Set command mode based on intent
+                    if (intent === 'ai' && commandMode)
+                        onToggleCommandMode();
+                    // if intent is command, we are already in command mode
+                }
+                else if (isAutoMode) {
+                    // Auto -> Agent
+                    setIsAutoMode(false);
+                    // Ensure we go back to Agent mode (commandMode = false)
+                    if (commandMode)
+                        onToggleCommandMode();
+                }
+                setTimeout(() => { ignoreNextChangeRef.current = false; }, 100);
             }
-            return; // Return immediately to prevent any further processing
+            return;
+        }
+        // Ctrl+Z: Undo
+        if (key.ctrl && input.toLowerCase() === 'z') {
+            handleUndo();
+            return;
+        }
+        // Ctrl+A: Select All
+        if (key.ctrl && input.toLowerCase() === 'a') {
+            setSelection({ start: 0, end: value.length });
+            setCursorOffset(value.length);
+            return;
         }
-        // Up arrow - navigate to previous command in history
-        if (key.upArrow && commandHistory.length > 0) {
-            if (historyIndex === -1) {
-                // Save current input before navigating history
-                setTempValue(value);
-                // Go to most recent command
-                setHistoryIndex(commandHistory.length - 1);
-                setValue(commandHistory[commandHistory.length - 1]);
-                setInputKey(prev => prev + 1);
+        // DELETE CHAR - Only runs if Delete Word did NOT trigger
+        // Triggers on:
+        // 1. Backspace or Delete key flag is present
+        // 2. OR char code 8 (standard backspace)
+        // 3. OR char code 127 (DEL) on non-Windows (Mac/Linux treat 127 as normal backspace)
+        const isDeleteChar = key.backspace ||
+            key.delete ||
+            inputCharCode === 8 ||
+            (!isWindows && inputCharCode === 127);
+        if (isDeleteChar) {
+            pushToUndoStack();
+            if (selection) {
+                // Delete selection
+                const start = Math.min(selection.start, selection.end);
+                const end = Math.max(selection.start, selection.end);
+                const newValue = value.slice(0, start) + value.slice(end);
+                setValue(newValue);
+                setCursorOffset(start);
+                setSelection(null);
+            }
+            else if (key.delete && cursorOffset < value.length) {
+                // Delete key: Delete character at cursor (forward delete)
+                const newValue = value.slice(0, cursorOffset) + value.slice(cursorOffset + 1);
+                setValue(newValue);
             }
-            else if (historyIndex > 0) {
-                // Go to older command
-                setHistoryIndex(historyIndex - 1);
-                setValue(commandHistory[historyIndex - 1]);
-                setInputKey(prev => prev + 1);
+            else if (cursorOffset > 0) {
+                // Backspace: Delete character before cursor
+                const newValue = value.slice(0, cursorOffset - 1) + value.slice(cursorOffset);
+                setValue(newValue);
+                setCursorOffset(cursorOffset - 1);
             }
+            // Reset history/completions on edit
+            setHistoryIndex(-1);
+            setCompletions([]);
             return;
         }
-        // Down arrow - navigate to next command in history
-        if (key.downArrow && historyIndex !== -1) {
-            if (historyIndex < commandHistory.length - 1) {
-                // Go to newer command
-                setHistoryIndex(historyIndex + 1);
-                setValue(commandHistory[historyIndex + 1]);
-                setInputKey(prev => prev + 1);
+        // Handle Enter
+        // Check input length to distinguish single key press from paste
+        if (key.return && input.length <= 1) {
+            // Check for Shift+Enter, Ctrl+Enter, OR explicit newline char
+            // Note: Shift+Enter doesn't work on Windows/Ink, so Ctrl+Enter is the alternative
+            // Alt+Enter can't be used as it fullscreens the terminal on Windows
+            if (key.shift || key.ctrl || input === '\n') {
+                pushToUndoStack();
+                // Shift+Enter or Ctrl+Enter: Insert newline
+                // If selection exists, replace it
+                let newValue = value;
+                let newOffset = cursorOffset;
+                if (selection) {
+                    const start = Math.min(selection.start, selection.end);
+                    const end = Math.max(selection.start, selection.end);
+                    newValue = value.slice(0, start) + '\n' + value.slice(end);
+                    newOffset = start + 1;
+                    setSelection(null);
+                }
+                else {
+                    newValue = value.slice(0, cursorOffset) + '\n' + value.slice(cursorOffset);
+                    newOffset = cursorOffset + 1;
+                }
+                setValue(newValue);
+                setCursorOffset(newOffset);
             }
             else {
-                // Return to the input that was being typed
-                setHistoryIndex(-1);
-                setValue(tempValue);
-                setInputKey(prev => prev + 1);
+                // Enter: Submit
+                handleSubmit();
             }
             return;
         }
-        // Tab for autocomplete in command mode
-        if (key.tab && !key.shift && commandMode) {
-            handleTabCompletion();
+        // Handle Arrows
+        if (key.upArrow || key.downArrow || key.leftArrow || key.rightArrow) {
+            // Clear selection on arrow keys
+            if (selection) {
+                setSelection(null);
+                // If left/right, maybe move cursor to start/end of selection?
+                // For now, just clear selection and let default logic run (or reset cursor to one end)
+                if (key.leftArrow)
+                    setCursorOffset(Math.min(selection.start, selection.end));
+                if (key.rightArrow)
+                    setCursorOffset(Math.max(selection.start, selection.end));
+                if (key.upArrow || key.downArrow) {
+                    // Keep cursor where it is (at the end usually) or move it?
+                    // Let's just fall through to normal arrow logic from current cursorOffset
+                }
+                if (key.leftArrow || key.rightArrow)
+                    return; // We handled the move
+            }
+        }
+        if (key.upArrow) {
+            const width = (process.stdout.columns || 80) - 6;
+            const visualLines = getVisualLines(value, width);
+            let currentVisualLineIndex = visualLines.findIndex(line => {
+                if (cursorOffset >= line.start && cursorOffset < line.end)
+                    return true;
+                if (cursorOffset === line.end && line.isHardEnd)
+                    return true;
+                return false;
+            });
+            // If cursor is at the very end of the last line
+            if (currentVisualLineIndex === -1 && cursorOffset === value.length) {
+                currentVisualLineIndex = visualLines.length - 1;
+            }
+            if (currentVisualLineIndex <= 0) {
+                // Top line: History navigation
+                if (commandHistory.length > 0) {
+                    if (historyIndex === -1) {
+                        setTempValue(value);
+                        const newIndex = commandHistory.length - 1;
+                        setHistoryIndex(newIndex);
+                        const newValue = commandHistory[newIndex];
+                        setValue(newValue);
+                        setCursorOffset(newValue.length);
+                    }
+                    else if (historyIndex > 0) {
+                        const newIndex = historyIndex - 1;
+                        setHistoryIndex(newIndex);
+                        const newValue = commandHistory[newIndex];
+                        setValue(newValue);
+                        setCursorOffset(newValue.length);
+                    }
+                }
+            }
+            else {
+                // Move cursor up one visual line
+                const currentLine = visualLines[currentVisualLineIndex];
+                const targetLine = visualLines[currentVisualLineIndex - 1];
+                const offsetInLine = cursorOffset - currentLine.start;
+                const newOffset = targetLine.start + Math.min(offsetInLine, targetLine.end - targetLine.start);
+                setCursorOffset(newOffset);
+            }
             return;
         }
-        // Detect paste events - when input contains newlines or is very long
-        if (input && (input.includes('\n') || input.includes('\r') || input.length > 10)) {
-            // This is likely a paste event with multi-line content
-            // Preserve the newlines by appending to current value
-            const cleanedInput = input.replace(/\r\n/g, '\n').replace(/\r/g, '\n');
-            setValue(prev => prev + cleanedInput);
+        if (key.downArrow) {
+            const width = (process.stdout.columns || 80) - 6;
+            const visualLines = getVisualLines(value, width);
+            let currentVisualLineIndex = visualLines.findIndex(line => {
+                if (cursorOffset >= line.start && cursorOffset < line.end)
+                    return true;
+                if (cursorOffset === line.end && line.isHardEnd)
+                    return true;
+                return false;
+            });
+            // If cursor is at the very end of the last line
+            if (currentVisualLineIndex === -1 && cursorOffset === value.length) {
+                currentVisualLineIndex = visualLines.length - 1;
+            }
+            if (currentVisualLineIndex === visualLines.length - 1) {
+                // Bottom line: History navigation
+                if (historyIndex !== -1) {
+                    if (historyIndex < commandHistory.length - 1) {
+                        const newIndex = historyIndex + 1;
+                        setHistoryIndex(newIndex);
+                        const newValue = commandHistory[newIndex];
+                        setValue(newValue);
+                        setCursorOffset(newValue.length);
+                    }
+                    else {
+                        setHistoryIndex(-1);
+                        setValue(tempValue);
+                        setCursorOffset(tempValue.length);
+                    }
+                }
+            }
+            else {
+                // Move cursor down one visual line
+                const currentLine = visualLines[currentVisualLineIndex];
+                const targetLine = visualLines[currentVisualLineIndex + 1];
+                const offsetInLine = cursorOffset - currentLine.start;
+                const newOffset = targetLine.start + Math.min(offsetInLine, targetLine.end - targetLine.start);
+                setCursorOffset(newOffset);
+            }
             return;
         }
-    }, { isActive });
-    const handleChange = (newValue) => {
-        // Don't accept changes when input is inactive (during approvals)
-        if (!isActive) {
+        if (key.leftArrow) {
+            if (key.ctrl) {
+                // Ctrl+Left: Move word backwards
+                let newOffset = cursorOffset;
+                if (newOffset > 0) {
+                    // Skip whitespace backwards
+                    while (newOffset > 0 && /\s/.test(value[newOffset - 1])) {
+                        newOffset--;
+                    }
+                    // Skip non-whitespace backwards
+                    while (newOffset > 0 && !/\s/.test(value[newOffset - 1])) {
+                        newOffset--;
+                    }
+                    setCursorOffset(newOffset);
+                }
+            }
+            else if (cursorOffset > 0) {
+                setCursorOffset(cursorOffset - 1);
+            }
             return;
         }
-        // Ignore changes that come from Ctrl+T or Ctrl+D shortcuts
-        // These add unwanted 't' or 'd' characters
-        if (ignoreNextChangeRef.current) {
-            ignoreNextChangeRef.current = false;
+        if (key.rightArrow) {
+            // Autocomplete Logic (Only at end of line)
+            if (autocompleteSuggestion && cursorOffset === value.length) {
+                if (key.ctrl) {
+                    // Ctrl+Right: Accept FULL suggestion
+                    setValue(autocompleteSuggestion);
+                    setCursorOffset(autocompleteSuggestion.length);
+                    setAutocompleteSuggestion(null);
+                    return;
+                }
+                else {
+                    // Right: Accept NEXT WORD
+                    const remaining = autocompleteSuggestion.slice(value.length);
+                    // Match next chunk of non-whitespace (including preceding whitespace)
+                    const match = remaining.match(/^(\s*\S+)/);
+                    if (match) {
+                        const toAdd = match[0];
+                        const newValue = value + toAdd;
+                        setValue(newValue);
+                        setCursorOffset(newValue.length);
+                        return;
+                    }
+                    else if (remaining.length > 0) {
+                        // Fallback: if only whitespace remains or regex fails, take it all
+                        const newValue = value + remaining;
+                        setValue(newValue);
+                        setCursorOffset(newValue.length);
+                        return;
+                    }
+                }
+            }
+            // Navigation Logic (if not completing)
+            if (key.ctrl) {
+                // Ctrl+Right: Move word forwards
+                let newOffset = cursorOffset;
+                if (newOffset < value.length) {
+                    // Skip non-whitespace forwards
+                    while (newOffset < value.length && !/\s/.test(value[newOffset])) {
+                        newOffset++;
+                    }
+                    // Skip whitespace forwards
+                    while (newOffset < value.length && /\s/.test(value[newOffset])) {
+                        newOffset++;
+                    }
+                    setCursorOffset(newOffset);
+                }
+            }
+            else if (cursorOffset < value.length) {
+                setCursorOffset(cursorOffset + 1);
+            }
             return;
         }
-        // Reset completions when user types
-        if (newValue !== value) {
-            setCompletions([]);
-            setCompletionIndex(0);
+        // Tab Completion
+        if (key.tab && !key.shift) {
+            // Priority 1: Accept autocomplete suggestion
+            if (autocompleteSuggestion) {
+                setValue(autocompleteSuggestion);
+                setCursorOffset(autocompleteSuggestion.length);
+                setAutocompleteSuggestion(null);
+                return;
+            }
+            // Priority 2: File completion (only in command mode)
+            if (commandMode) {
+                handleTabCompletion();
+                return;
+            }
         }
-        // Reset history navigation when user types
-        if (historyIndex !== -1) {
+        // Regular Input
+        // Ignore control keys to prevent printing garbage (like 'v' for Ctrl+V)
+        if (input && !key.ctrl && !key.meta) {
+            pushToUndoStack();
+            // Handle paste with newlines
+            const cleanedInput = input.replace(/\r\n/g, '\n').replace(/\r/g, '\n');
+            let newValue = value;
+            let newOffset = cursorOffset;
+            if (selection) {
+                const start = Math.min(selection.start, selection.end);
+                const end = Math.max(selection.start, selection.end);
+                newValue = value.slice(0, start) + cleanedInput + value.slice(end);
+                newOffset = start + cleanedInput.length;
+                setSelection(null);
+            }
+            else {
+                newValue = value.slice(0, cursorOffset) + cleanedInput + value.slice(cursorOffset);
+                newOffset = cursorOffset + cleanedInput.length;
+            }
+            setValue(newValue);
+            setCursorOffset(newOffset);
+            // Reset history/completions
             setHistoryIndex(-1);
-            setTempValue('');
+            setCompletions([]);
         }
-        // Handle multi-line paste - preserve newlines
-        // ink-text-input doesn't handle newlines well, so we keep them in the value
-        setValue(newValue);
-    };
+    }, { isActive });
     const handleTabCompletion = async () => {
         if (!value)
             return;
-        // Get the last word (path) from the command
         const words = value.split(' ');
         const lastWord = words[words.length - 1];
-        // If we have existing completions, cycle through them
         if (completions.length > 0) {
             const nextIndex = (completionIndex + 1) % completions.length;
             setCompletionIndex(nextIndex);
-            // Replace the last word with the next completion
             words[words.length - 1] = completions[nextIndex];
             const newValue = words.join(' ');
-            // Force remount to reset cursor position
             setValue(newValue);
-            setInputKey(prev => prev + 1);
+            setCursorOffset(newValue.length);
             return;
         }
-        // Get completions for the current path
         try {
             const cwd = currentWorkingDirectory || process.cwd();
             let searchDir = cwd;
             let searchPattern = lastWord;
             let dirPart = '';
-            // If the path contains a directory separator, split it
             if (lastWord.includes('/') || lastWord.includes('\\')) {
                 const lastSep = Math.max(lastWord.lastIndexOf('/'), lastWord.lastIndexOf('\\'));
                 dirPart = lastWord.substring(0, lastSep + 1);
                 searchPattern = lastWord.substring(lastSep + 1);
-                // For subshells, use their path format
                 if (subshellContext && subshellContext.type !== 'local') {
-                    // Use forward slashes for Unix-like paths
                     searchDir = dirPart.startsWith('/') ? dirPart.slice(0, -1) : cwd + '/' + dirPart.slice(0, -1);
                 }
                 else {
@@ -171,27 +549,19 @@ export const InputBox = React.memo(({ onSubmit, placeholder = 'Ask anything...',
                 }
             }
             let entries;
-            // Check if we're in a subshell context
             if (subshellContext && subshellContext.type !== 'local' && subshellContext.handler) {
-                // Use the subshell handler to list directory
                 const dirEntries = await subshellContext.handler.listDirectory(searchDir);
-                entries = dirEntries.map(entry => ({
-                    name: entry.name,
-                    type: entry.type
-                }));
+                entries = dirEntries.map(entry => ({ name: entry.name, type: entry.type }));
             }
             else {
-                // Local filesystem - use fs
-                if (!fs.existsSync(searchDir)) {
+                if (!fs.existsSync(searchDir))
                     return;
-                }
                 const fsEntries = fs.readdirSync(searchDir, { withFileTypes: true });
                 entries = fsEntries.map(entry => ({
                     name: entry.name,
                     type: entry.isDirectory() ? 'directory' : 'file'
                 }));
             }
-            // Filter matches
             const matches = entries
                 .filter(entry => entry.name.toLowerCase().startsWith(searchPattern.toLowerCase()))
                 .map(entry => {
@@ -200,48 +570,132 @@ export const InputBox = React.memo(({ onSubmit, placeholder = 'Ask anything...',
                 return entry.type === 'directory' ? fullPath + separator : fullPath;
             })
                 .sort();
-            if (matches.length === 1) {
-                // Single match - complete it
-                words[words.length - 1] = matches[0];
-                const newValue = words.join(' ');
-                // Force remount to reset cursor position
-                setValue(newValue);
-                setInputKey(prev => prev + 1);
-                setCompletions([]);
-            }
-            else if (matches.length > 1) {
-                // Multiple matches - set up for cycling
-                setCompletions(matches);
-                setCompletionIndex(0);
+            if (matches.length > 0) {
+                if (matches.length > 1) {
+                    setCompletions(matches);
+                    setCompletionIndex(0);
+                }
                 words[words.length - 1] = matches[0];
                 const newValue = words.join(' ');
-                // Force remount to reset cursor position
                 setValue(newValue);
-                setInputKey(prev => prev + 1);
+                setCursorOffset(newValue.length);
             }
         }
         catch (error) {
-            // Ignore errors in tab completion
+            // Ignore errors
         }
     };
     const handleSubmit = () => {
-        // Don't submit when input is inactive (during approvals)
-        if (!isActive) {
+        if (!isActive)
             return;
-        }
         const trimmedValue = value.trim();
         if (trimmedValue) {
+            // Save to history if it was a command
+            if (commandMode) {
+                CommandHistoryManager.getInstance().addCommand(trimmedValue, currentDir);
+            }
             onSubmit(trimmedValue);
             setValue('');
+            setCursorOffset(0);
             setCompletions([]);
             setCompletionIndex(0);
             setHistoryIndex(-1);
             setTempValue('');
-            setInputKey(prev => prev + 1); // Force remount to clear any residual state
+            setUndoStack([]);
+            setRedoStack([]);
+            setSelection(null);
+            setAutocompleteSuggestion(null);
+        }
+    };
+    // Rendering Logic with Scrolling
+    const renderInput = () => {
+        const lines = value.split('\n');
+        // If empty, show placeholder
+        if (lines.length === 1 && lines[0] === '') {
+            return React.createElement(Text, { color: "gray" }, placeholder);
+        }
+        // Calculate cursor line and column
+        let currentPos = 0;
+        let cursorLine = 0;
+        let cursorCol = 0;
+        for (let i = 0; i < lines.length; i++) {
+            if (currentPos + lines[i].length >= cursorOffset) {
+                cursorLine = i;
+                cursorCol = cursorOffset - currentPos;
+                break;
+            }
+            currentPos += lines[i].length + 1; // +1 for newline
+        }
+        // Edge case: cursor at very end of content
+        if (cursorOffset === value.length && lines.length > 0) {
+            cursorLine = lines.length - 1;
+            cursorCol = lines[lines.length - 1].length;
+        }
+        // Calculate visible range
+        let startLine = 0;
+        if (lines.length > MAX_VISIBLE_LINES) {
+            if (cursorLine < MAX_VISIBLE_LINES) {
+                startLine = 0;
+            }
+            else {
+                startLine = cursorLine - MAX_VISIBLE_LINES + 1;
+            }
         }
+        const endLine = Math.min(startLine + MAX_VISIBLE_LINES, lines.length);
+        const visibleLines = lines.slice(startLine, endLine);
+        return (React.createElement(Box, { flexDirection: "column", flexGrow: 1 },
+            startLine > 0 && React.createElement(Text, { color: "gray" }, "\u2191 ..."),
+            visibleLines.map((line, idx) => {
+                const actualLineIndex = startLine + idx;
+                const isCursorLine = actualLineIndex === cursorLine;
+                const isLastLine = actualLineIndex === lines.length - 1;
+                // Calculate absolute position of this line start
+                let lineStartPos = 0;
+                for (let k = 0; k < actualLineIndex; k++)
+                    lineStartPos += lines[k].length + 1;
+                if (!isActive) {
+                    if (line.length === 0) {
+                        return React.createElement(Text, { key: idx }, " ");
+                    }
+                    return React.createElement(Text, { key: idx }, line);
+                }
+                // Render with selection and cursor
+                const chars = line.split('');
+                const renderedChars = chars.map((char, charIdx) => {
+                    const absPos = lineStartPos + charIdx;
+                    const isSelected = selection &&
+                        absPos >= Math.min(selection.start, selection.end) &&
+                        absPos < Math.max(selection.start, selection.end);
+                    const isCursor = isCursorLine && charIdx === cursorCol;
+                    if (isCursor) {
+                        return React.createElement(Text, { key: charIdx, inverse: true, color: isSelected ? "yellow" : undefined }, char);
+                    }
+                    if (isSelected) {
+                        return React.createElement(Text, { key: charIdx, backgroundColor: "white", color: "black" }, char);
+                    }
+                    return React.createElement(Text, { key: charIdx }, char);
+                });
+                // Handle cursor at end of line
+                if (isCursorLine && cursorCol === line.length) {
+                    renderedChars.push(React.createElement(Text, { key: "cursor", inverse: true }, " "));
+                }
+                // Render Autocomplete Ghost Text
+                // Only on the last line, if suggestion exists and matches start
+                if (isLastLine && autocompleteSuggestion && autocompleteSuggestion.startsWith(value)) {
+                    const suffix = autocompleteSuggestion.slice(value.length);
+                    if (suffix) {
+                        renderedChars.push(React.createElement(Text, { key: "ghost", color: "gray" }, suffix));
+                    }
+                }
+                if (renderedChars.length === 0) {
+                    return React.createElement(Text, { key: idx }, " ");
+                }
+                return React.createElement(Text, { key: idx }, renderedChars);
+            }),
+            endLine < lines.length && React.createElement(Text, { color: "gray" }, "\u2193 ...")));
     };
-    return (React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: "#003b59", paddingX: 1, paddingY: 0 },
-        React.createElement(Box, { marginY: 1, justifyContent: "space-between" },
+    return (React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: commandMode ? "#00cc66" : "#257aa5ff", paddingX: 1, paddingY: 0, width: "100%" },
+        React.createElement(Box, { marginY: 1, justifyContent: "space-between", width: "100%" },
             React.createElement(Box, null,
                 subshellContext && subshellContext.type !== 'local' && (React.createElement(Breadcrumbs, { context: subshellContext })),
                 React.createElement(Text, { color: "#666666" }, "CWD: "),
@@ -252,13 +706,15 @@ export const InputBox = React.memo(({ onSubmit, placeholder = 'Ask anything...',
                     React.createElement(Text, { color: "#00ccff" }, model))),
                 React.createElement(Box, null,
                     React.createElement(Text, { color: "#666666" }, "Mode: "),
-                    commandMode ? (React.createElement(Text, { color: "#00cc66", bold: true }, "Command")) : planMode ? (React.createElement(Text, { color: "#ffaa00", bold: true }, "Plan")) : (React.createElement(Text, { color: "#00ccff" }, "Execution"))))),
-        React.createElement(Box, null,
+                    isAutoMode ? (React.createElement(Text, null,
+                        React.createElement(Text, { color: "#00ccff", bold: true }, "Auto ["),
+                        detectedIntent === 'command' ? (React.createElement(Text, { color: "#00cc66", bold: true }, "Terminal")) : (React.createElement(Text, { color: "#00ccff" }, "Agent")),
+                        React.createElement(Text, { color: "#00ccff", bold: true }, "]"))) : commandMode ? (React.createElement(Text, { color: "#00cc66", bold: true }, "Terminal")) : planMode ? (React.createElement(Text, { color: "#ffaa00", bold: true }, "Plan")) : (React.createElement(Text, { color: "#00ccff" }, "Agent"))))),
+        React.createElement(Box, { flexDirection: "row", width: "100%" },
             React.createElement(Text, { color: "#666666" }, "> "),
-            React.createElement(Text, { color: "white", bold: false },
-                React.createElement(TextInput, { key: inputKey, value: value, onChange: handleChange, onSubmit: handleSubmit, placeholder: placeholder, showCursor: isActive }))),
-        React.createElement(Box, { marginY: 1, justifyContent: "space-between" },
-            React.createElement(Text, { color: "#666666", dimColor: true }, commandMode ? ('Ctrl+D to exit command mode • Tab for autocomplete') : ('Ctrl+D for command mode • Ctrl+T to toggle auto-accept')),
+            renderInput()),
+        React.createElement(Box, { marginY: 1, justifyContent: "space-between", width: "100%" },
+            React.createElement(Text, { color: "#666666", dimColor: true }, isAutoMode ? ('Ctrl+D to cycle modes • Auto-detecting intent') : commandMode ? ('Ctrl+D to cycle modes • Tab for autocomplete') : ('Ctrl+D to cycle modes • Shift+Enter for new line')),
             React.createElement(Box, { gap: 1 },
                 !commandMode && autoAcceptMode ? (React.createElement(Text, { color: "#00cc66", bold: true }, "[AUTO-ACCEPT: ON]")) : !commandMode ? (React.createElement(Text, { color: "#666666", dimColor: true }, "[AUTO-ACCEPT: OFF]")) : null,
                 !commandMode && (React.createElement(Box, { marginLeft: 1 },