centaurus-cli 2.9.2 → 2.9.4

package/dist/ui/components/InputBox.js

@@ -13,6 +13,8 @@ import { FileTagAutocomplete } from './FileTagAutocomplete.js';
 import { filterCommands } from '../../config/slash-commands.js';
 import { getClipboardImages } from '../../services/clipboard-service.js';
 import { useTerminalDimensions, TERMINAL_HEIGHT_CONSTANTS } from '../../hooks/useTerminalDimensions.js';
+import { AIAutocompleteAgent, AI_AUTOCOMPLETE_DEBOUNCE_MS } from '../../services/ai-autocomplete-agent.js';
+import { workflowStorage } from '../../services/workflow-storage.js';
 const getVisualLines = (text, width) => {
     const logicalLines = text.split('\n');
     const visualLines = [];
@@ -50,7 +52,7 @@ const getVisualLines = (text, width) => {
     });
     return visualLines;
 };
-export const InputBox = React.memo(({ onSubmit, placeholder = 'Ask anything...', autoAcceptMode, model, planMode = false, commandMode = false, backgroundMode = false, currentWorkingDirectory, commandHistory = [], onToggleAutoAccept, onToggleCommandMode, onToggleBackgroundMode, isActive = true, subshellContext, currentTokens = 0, maxTokens = 1000000, contextLimitReached = false, isShellRunning = false, backgroundTaskCount = 0, initialValue = '', onValueChange, onSetAutoModeSetup, sessionQuotaExhausted = false, sessionQuotaTimeRemaining = '', subAgentCount = 0 }) => {
+export const InputBox = React.memo(({ onSubmit, placeholder = 'Ask anything...', autoAcceptMode, model, planMode = false, commandMode = false, backgroundMode = false, currentWorkingDirectory, commandHistory = [], onToggleAutoAccept, onToggleCommandMode, onToggleBackgroundMode, isActive = true, subshellContext, subshellContextStack, currentTokens = 0, maxTokens = 1000000, contextLimitReached = false, isShellRunning = false, backgroundTaskCount = 0, initialValue = '', onValueChange, onSetAutoModeSetup, sessionQuotaExhausted = false, sessionQuotaTimeRemaining = '', subAgentCount = 0, aiAutoSuggestEnabled = false, sessionCommands = [] }) => {
     // Use initialValue for first mount, but manage state internally after that
     const [value, setValueInternal] = useState(initialValue);
     const [cursorOffset, setCursorOffset] = useState(0);
@@ -68,11 +70,18 @@ export const InputBox = React.memo(({ onSubmit, placeholder = 'Ask anything...',
     const [detectedIntent, setDetectedIntent] = useState('ai');
     // Autocomplete State
     const [autocompleteSuggestion, setAutocompleteSuggestion] = useState(null);
+    // AI Autocomplete State
+    const [aiAutocompleteSuggestion, setAiAutocompleteSuggestion] = useState(null);
+    const [isAiAutocompleteLoading, setIsAiAutocompleteLoading] = useState(false);
+    const aiAutocompleteDebounceRef = useRef(null);
+    const aiAutocompleteAbortRef = useRef(null);
     // Undo/Redo State
     const [undoStack, setUndoStack] = useState([]);
     const [redoStack, setRedoStack] = useState([]);
     // Selection State
     const [selection, setSelection] = useState(null);
+    // Platform Detection
+    const isMac = process.platform === 'darwin';
     // Reject Flash State (turns border red when submission is blocked)
     const [rejectFlash, setRejectFlash] = useState(false);
     // Session Quota Message State (shows quota exhausted message)
@@ -188,6 +197,26 @@ export const InputBox = React.memo(({ onSubmit, placeholder = 'Ask anything...',
         }
         return cwd;
     }, [currentWorkingDirectory]);
+    // Determine current environment for command history isolation
+    // Format: 'local', 'ssh:user@host', or 'wsl:distroName'
+    const currentEnvironment = useMemo(() => {
+        if (!subshellContext)
+            return 'local';
+        if (subshellContext.type === 'ssh') {
+            const user = subshellContext.metadata?.username || 'user';
+            const host = subshellContext.metadata?.hostname || 'host';
+            return `ssh:${user}@${host}`;
+        }
+        if (subshellContext.type === 'wsl') {
+            const distro = subshellContext.metadata?.distroName || 'Ubuntu';
+            return `wsl:${distro}`;
+        }
+        if (subshellContext.type === 'docker') {
+            const container = subshellContext.metadata?.containerId || 'container';
+            return `docker:${container}`;
+        }
+        return 'local';
+    }, [subshellContext]);
     // Autocomplete Logic
     useEffect(() => {
         if (!value || value.trim() === '') {
@@ -198,7 +227,7 @@ export const InputBox = React.memo(({ onSubmit, placeholder = 'Ask anything...',
         // 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);
+            const matches = CommandHistoryManager.getInstance().getMatches(value, currentDir, currentEnvironment);
             if (matches.length > 0) {
                 setAutocompleteSuggestion(matches[0]);
             }
@@ -209,7 +238,137 @@ export const InputBox = React.memo(({ onSubmit, placeholder = 'Ask anything...',
         else {
             setAutocompleteSuggestion(null);
         }
-    }, [value, commandMode, isAutoMode, detectedIntent, currentDir]);
+    }, [value, commandMode, isAutoMode, detectedIntent, currentDir, currentEnvironment]);
+    // AI Autocomplete Logic (5-second debounce)
+    useEffect(() => {
+        // Clear AI suggestion when value changes
+        setAiAutocompleteSuggestion(null);
+        // Clear any existing debounce timer
+        if (aiAutocompleteDebounceRef.current) {
+            clearTimeout(aiAutocompleteDebounceRef.current);
+            aiAutocompleteDebounceRef.current = null;
+        }
+        // Abort any pending AI request
+        if (aiAutocompleteAbortRef.current) {
+            aiAutocompleteAbortRef.current.abort();
+            aiAutocompleteAbortRef.current = null;
+        }
+        // Debug logging for trigger ref
+        /*
+        try {
+          if (detectedIntent !== 'ai' || value.length > 5) {
+             quickLog(`[InputBox] AI Effect: val="${value}", enabled=${aiAutoSuggestEnabled}, mode=${commandMode}, auto=${isAutoMode}, intent=${detectedIntent}`);
+          }
+        } catch (e) {}
+        */
+        // Don't trigger AI autocomplete if disabled or not in command mode
+        if (!aiAutoSuggestEnabled) {
+            // quickLog('[InputBox] AI skipped: disabled');
+            return;
+        }
+        const shouldSuggest = commandMode || (isAutoMode && detectedIntent === 'command');
+        if (!shouldSuggest) {
+            // if (value.length > 3) quickLog(`[InputBox] AI skipped: !shouldSuggest (cmd=${commandMode}, auto=${isAutoMode}, intent=${detectedIntent})`);
+            return;
+        }
+        // Don't suggest for empty, very short, or slash commands
+        if (!value || value.trim().length < 2 || value.startsWith('/')) {
+            // quickLog('[InputBox] AI skipped: too short or slash');
+            return;
+        }
+        // quickLog('[InputBox] AI Triggering debounce...');
+        // Set up 5-second debounce timer
+        aiAutocompleteDebounceRef.current = setTimeout(async () => {
+            setIsAiAutocompleteLoading(true);
+            // Create abort controller for this request
+            const abortController = new AbortController();
+            aiAutocompleteAbortRef.current = abortController;
+            try {
+                if (!aiAutoSuggestEnabled)
+                    return; // double check inside timeout
+                // Get directory history using the correct method
+                const directoryHistory = CommandHistoryManager.getInstance().getDirectoryHistory(currentDir, currentEnvironment);
+                // Get files in current directory (local or remote)
+                let files = [];
+                try {
+                    if (subshellContext && subshellContext.type !== 'local' && subshellContext.handler) {
+                        // Remote/Subshell environment
+                        // Check if we can list files
+                        try {
+                            const dirEntries = await subshellContext.handler.listDirectory(currentDir);
+                            files = dirEntries
+                                .slice(0, 50)
+                                .map((e) => e.name + (e.type === 'directory' ? '/' : ''));
+                        }
+                        catch (remoteErr) {
+                            // quickLog('Remote list error: ' + remoteErr);
+                        }
+                    }
+                    else {
+                        // Local environment
+                        const dir = currentDir || process.cwd();
+                        if (fs.existsSync(dir)) {
+                            const entries = fs.readdirSync(dir, { withFileTypes: true });
+                            files = entries
+                                .slice(0, 50)
+                                .map(e => e.name + (e.isDirectory() ? '/' : ''));
+                        }
+                    }
+                }
+                catch (e) {
+                    // Ignore file access errors
+                }
+                // Determine OS and Platform from subshell context if available
+                let osContext = process.platform;
+                let platformContext = process.platform;
+                if (subshellContext && subshellContext.type !== 'local' && subshellContext.metadata) {
+                    const metaOs = subshellContext.metadata.os;
+                    if (metaOs === 'windows') {
+                        osContext = 'win32';
+                        platformContext = 'win32';
+                    }
+                    else if (metaOs === 'macos') {
+                        osContext = 'darwin';
+                        platformContext = 'darwin';
+                    }
+                    else if (metaOs === 'linux') {
+                        osContext = 'linux';
+                        platformContext = 'linux';
+                    }
+                }
+                const context = {
+                    os: osContext,
+                    platform: platformContext,
+                    cwd: currentDir || process.cwd(),
+                    directoryHistory: directoryHistory.slice(0, 10),
+                    sessionCommands: sessionCommands.slice(-10),
+                    files: files,
+                    currentInput: value
+                };
+                const prediction = await AIAutocompleteAgent.predictCommand(context, abortController.signal);
+                if (prediction && !abortController.signal.aborted) {
+                    setAiAutocompleteSuggestion(prediction);
+                }
+            }
+            catch (error) {
+                // Ignore errors (likely aborted)
+            }
+            finally {
+                setIsAiAutocompleteLoading(false);
+                if (aiAutocompleteAbortRef.current === abortController) {
+                    aiAutocompleteAbortRef.current = null;
+                }
+            }
+        }, AI_AUTOCOMPLETE_DEBOUNCE_MS);
+        return () => {
+            if (aiAutocompleteDebounceRef.current) {
+                clearTimeout(aiAutocompleteDebounceRef.current);
+            }
+            if (aiAutocompleteAbortRef.current) {
+                aiAutocompleteAbortRef.current.abort();
+            }
+        };
+    }, [value, commandMode, isAutoMode, detectedIntent, aiAutoSuggestEnabled, currentDir, currentEnvironment, sessionCommands]);
     // Auto-classification effect (Synchronous Heuristics Only)
     useEffect(() => {
         // Only run classification if in Auto Mode
@@ -398,6 +557,104 @@ export const InputBox = React.memo(({ onSubmit, placeholder = 'Ask anything...',
                     setCursorOffset(newValue.length);
                     setSlashAutocompleteVisible(false);
                 }
+                else if (value.startsWith('/models ') || value.startsWith('/model ')) {
+                    // We're selecting a models subcommand
+                    const prefix = value.startsWith('/models ') ? '/models ' : '/model ';
+                    const newValue = `${prefix}${selected.name}`;
+                    setValue(newValue);
+                    setCursorOffset(newValue.length);
+                    setSlashAutocompleteVisible(false);
+                }
+                else if (value.startsWith('/workflow new ') || value.startsWith('/wf new ')) {
+                    // We're in workflow new subcommand mode (manual or learn-workflow)
+                    const prefix = value.startsWith('/workflow new ') ? '/workflow new ' : '/wf new ';
+                    const newValue = `${prefix}${selected.name}`;
+                    setValue(newValue);
+                    setCursorOffset(newValue.length);
+                    setSlashAutocompleteVisible(false);
+                }
+                else if (value.startsWith('/workflow ') || value.startsWith('/wf ')) {
+                    // Check if we're in workflow name selection mode (after run/view/delete)
+                    const workflowNameMatch = value.match(/^\/(?:workflow|wf)\s+(run|view|delete)\s+/);
+                    if (workflowNameMatch) {
+                        // We're selecting a workflow name
+                        const prefix = value.match(/^\/(?:workflow|wf)\s+(?:run|view|delete)\s+/)?.[0] || '';
+                        const newValue = `${prefix}${selected.name}`;
+                        setValue(newValue);
+                        setCursorOffset(newValue.length);
+                        setSlashAutocompleteVisible(false);
+                    }
+                    else {
+                        // We're selecting a workflow subcommand
+                        const prefix = value.startsWith('/workflow ') ? '/workflow ' : '/wf ';
+                        const newValue = `${prefix}${selected.name} `;
+                        setValue(newValue);
+                        setCursorOffset(newValue.length);
+                        // For run/view/delete, show workflow names immediately
+                        if (selected.name === 'run' || selected.name === 'view' || selected.name === 'delete') {
+                            const workflows = workflowStorage.list();
+                            const matchingWorkflows = workflows
+                                .slice(0, 10)
+                                .map(wf => ({
+                                name: wf.name,
+                                description: wf.description || `${wf.stepCount} step${wf.stepCount !== 1 ? 's' : ''}`
+                            }));
+                            if (matchingWorkflows.length > 0) {
+                                setSlashAutocompleteCommands(matchingWorkflows);
+                                setSlashAutocompleteSelectedIndex(0);
+                                setSlashAutocompleteScrollOffset(0);
+                                // Keep autocomplete visible
+                            }
+                            else {
+                                setSlashAutocompleteVisible(false);
+                            }
+                        }
+                        else if (selected.name === 'new') {
+                            // For 'new' subcommand, show manual/learn-workflow options
+                            const subcommandMatches = filterCommands('workflow new ');
+                            if (subcommandMatches.length > 0) {
+                                setSlashAutocompleteCommands(subcommandMatches);
+                                setSlashAutocompleteSelectedIndex(0);
+                                setSlashAutocompleteScrollOffset(0);
+                                // Keep autocomplete visible for next level
+                            }
+                            else {
+                                setSlashAutocompleteVisible(false);
+                            }
+                        }
+                        else {
+                            setSlashAutocompleteVisible(false);
+                        }
+                    }
+                }
+                else if (value.startsWith('/settings auto-suggest ')) {
+                    // We're selecting an auto-suggest option (on/off)
+                    const newValue = `/settings auto-suggest ${selected.name}`;
+                    setValue(newValue);
+                    setCursorOffset(newValue.length);
+                    setSlashAutocompleteVisible(false);
+                }
+                else if (value.startsWith('/settings ')) {
+                    // We're selecting a settings subcommand (e.g., auto-suggest)
+                    const newValue = `/settings ${selected.name} `;
+                    setValue(newValue);
+                    setCursorOffset(newValue.length);
+                    // Show the next level options (on/off for auto-suggest)
+                    if (selected.name === 'auto-suggest') {
+                        const optionMatches = filterCommands('settings auto-suggest ');
+                        if (optionMatches.length > 0) {
+                            setSlashAutocompleteCommands(optionMatches);
+                            setSlashAutocompleteSelectedIndex(0);
+                            setSlashAutocompleteScrollOffset(0);
+                        }
+                        else {
+                            setSlashAutocompleteVisible(false);
+                        }
+                    }
+                    else {
+                        setSlashAutocompleteVisible(false);
+                    }
+                }
                 else {
                     // Regular slash command, replace everything
                     const newValue = `/${selected.name} `;
@@ -465,6 +722,42 @@ export const InputBox = React.memo(({ onSubmit, placeholder = 'Ask anything...',
                             setSlashAutocompleteVisible(false);
                         }
                     }
+                    else if (selected.name === 'models' || selected.name === 'model') {
+                        const subcommandMatches = filterCommands('models ');
+                        if (subcommandMatches.length > 0) {
+                            setSlashAutocompleteCommands(subcommandMatches);
+                            setSlashAutocompleteSelectedIndex(0);
+                            setSlashAutocompleteScrollOffset(0);
+                            // Keep autocomplete visible for subcommands
+                        }
+                        else {
+                            setSlashAutocompleteVisible(false);
+                        }
+                    }
+                    else if (selected.name === 'settings') {
+                        const subcommandMatches = filterCommands('settings ');
+                        if (subcommandMatches.length > 0) {
+                            setSlashAutocompleteCommands(subcommandMatches);
+                            setSlashAutocompleteSelectedIndex(0);
+                            setSlashAutocompleteScrollOffset(0);
+                            // Keep autocomplete visible for subcommands
+                        }
+                        else {
+                            setSlashAutocompleteVisible(false);
+                        }
+                    }
+                    else if (selected.name === 'workflow' || selected.name === 'wf') {
+                        const subcommandMatches = filterCommands('workflow ');
+                        if (subcommandMatches.length > 0) {
+                            setSlashAutocompleteCommands(subcommandMatches);
+                            setSlashAutocompleteSelectedIndex(0);
+                            setSlashAutocompleteScrollOffset(0);
+                            // Keep autocomplete visible for subcommands
+                        }
+                        else {
+                            setSlashAutocompleteVisible(false);
+                        }
+                    }
                     else {
                         setSlashAutocompleteVisible(false);
                     }
@@ -688,6 +981,73 @@ export const InputBox = React.memo(({ onSubmit, placeholder = 'Ask anything...',
                         setSlashAutocompleteVisible(false);
                     }
                 }
+                else if (newValue.startsWith('/models ') || newValue.startsWith('/model ')) {
+                    // Models subcommands
+                    const fullQuery = newValue.slice(1);
+                    const matches = filterCommands(fullQuery);
+                    if (matches.length > 0) {
+                        setSlashAutocompleteCommands(matches);
+                        setSlashAutocompleteVisible(true);
+                        setSlashAutocompleteSelectedIndex(0);
+                        setSlashAutocompleteScrollOffset(0);
+                    }
+                    else {
+                        setSlashAutocompleteVisible(false);
+                    }
+                }
+                else if (newValue.match(/^\/workflow\s+(run|view|delete)\s+/) ||
+                    newValue.match(/^\/wf\s+(run|view|delete)\s+/)) {
+                    // Workflow name autocomplete (when user types "/workflow run " or similar)
+                    // This MUST come before the /workflow subcommand check since it's more specific
+                    const match = newValue.match(/^\/(?:workflow|wf)\s+(?:run|view|delete)\s+(.*)$/);
+                    const partialName = match ? match[1].toLowerCase() : '';
+                    const workflows = workflowStorage.list();
+                    const matchingWorkflows = workflows
+                        .filter(wf => wf.name.toLowerCase().includes(partialName))
+                        .slice(0, 10)
+                        .map(wf => ({
+                        name: wf.name,
+                        description: wf.description || `${wf.stepCount} step${wf.stepCount !== 1 ? 's' : ''}`
+                    }));
+                    if (matchingWorkflows.length > 0) {
+                        setSlashAutocompleteCommands(matchingWorkflows);
+                        setSlashAutocompleteVisible(true);
+                        setSlashAutocompleteSelectedIndex(0);
+                        setSlashAutocompleteScrollOffset(0);
+                    }
+                    else {
+                        setSlashAutocompleteVisible(false);
+                    }
+                }
+                else if (newValue.match(/^\/workflow\s+new\s+/) ||
+                    newValue.match(/^\/wf\s+new\s+/)) {
+                    // Workflow new subcommand autocomplete (manual, learn-workflow)
+                    const fullQuery = newValue.slice(1);
+                    const matches = filterCommands(fullQuery);
+                    if (matches.length > 0) {
+                        setSlashAutocompleteCommands(matches);
+                        setSlashAutocompleteVisible(true);
+                        setSlashAutocompleteSelectedIndex(0);
+                        setSlashAutocompleteScrollOffset(0);
+                    }
+                    else {
+                        setSlashAutocompleteVisible(false);
+                    }
+                }
+                else if (newValue.startsWith('/workflow ') || newValue.startsWith('/wf ')) {
+                    // Workflow subcommands (when user types "/workflow " or "/wf ")
+                    const fullQuery = newValue.slice(1);
+                    const matches = filterCommands(fullQuery);
+                    if (matches.length > 0) {
+                        setSlashAutocompleteCommands(matches);
+                        setSlashAutocompleteVisible(true);
+                        setSlashAutocompleteSelectedIndex(0);
+                        setSlashAutocompleteScrollOffset(0);
+                    }
+                    else {
+                        setSlashAutocompleteVisible(false);
+                    }
+                }
                 else {
                     setSlashAutocompleteVisible(false);
                 }
@@ -743,17 +1103,52 @@ export const InputBox = React.memo(({ onSubmit, placeholder = 'Ask anything...',
             }
             return;
         }
-        // Ctrl+Z: Undo
-        if (key.ctrl && input.toLowerCase() === 'z') {
+        // Ctrl+Z / Cmd+Z: Undo
+        if ((key.ctrl && input.toLowerCase() === 'z') || (key.meta && input.toLowerCase() === 'z')) {
             handleUndo();
             return;
         }
-        // Ctrl+A: Select All
-        if (key.ctrl && input.toLowerCase() === 'a') {
+        // Ctrl+A / Cmd+A: Select All
+        if ((key.ctrl && input.toLowerCase() === 'a') || (key.meta && input.toLowerCase() === 'a')) {
             setSelection({ start: 0, end: value.length });
             setCursorOffset(value.length);
             return;
         }
+        // Home: Start of Line
+        // Note: In single-line inputs, this goes to start of text. 
+        // In multi-line wrapped view, we ideally want start of logical line or start of text? 
+        // Standard terminal Home = Start of command. Editor Home = Start of line.
+        // Let's stick to Start of Text for now as it's a single "input box".
+        // Home: Start of Line
+        // @ts-ignore
+        if (key.home) {
+            const width = (process.stdout.columns || 80) - 6;
+            const visualLines = getVisualLines(value, width);
+            const currentLine = visualLines.find(line => (cursorOffset >= line.start && cursorOffset < line.end) ||
+                (cursorOffset === line.end && line.isHardEnd));
+            if (currentLine) {
+                setCursorOffset(currentLine.start);
+            }
+            else {
+                setCursorOffset(0);
+            }
+            return;
+        }
+        // End: End of Line
+        // @ts-ignore
+        if (key.end) {
+            const width = (process.stdout.columns || 80) - 6;
+            const visualLines = getVisualLines(value, width);
+            const currentLine = visualLines.find(line => (cursorOffset >= line.start && cursorOffset < line.end) ||
+                (cursorOffset === line.end && line.isHardEnd));
+            if (currentLine) {
+                setCursorOffset(currentLine.end);
+            }
+            else {
+                setCursorOffset(value.length);
+            }
+            return;
+        }
         // Note: Clipboard images are handled via Alt+V keyboard shortcut
         // DELETE CHAR - Only runs if Delete Word did NOT trigger
         // Triggers on:
@@ -870,6 +1265,20 @@ export const InputBox = React.memo(({ onSubmit, placeholder = 'Ask anything...',
                     setSlashAutocompleteVisible(false);
                 }
             }
+            else if (newValue.startsWith('/models ') || newValue.startsWith('/model ')) {
+                // Models subcommands
+                const fullQuery = newValue.slice(1);
+                const matches = filterCommands(fullQuery);
+                if (matches.length > 0) {
+                    setSlashAutocompleteCommands(matches);
+                    setSlashAutocompleteVisible(true);
+                    setSlashAutocompleteSelectedIndex(0);
+                    setSlashAutocompleteScrollOffset(0);
+                }
+                else {
+                    setSlashAutocompleteVisible(false);
+                }
+            }
             else {
                 setSlashAutocompleteVisible(false);
             }
@@ -1043,8 +1452,8 @@ export const InputBox = React.memo(({ onSubmit, placeholder = 'Ask anything...',
             return;
         }
         if (key.leftArrow) {
-            if (key.ctrl) {
-                // Ctrl+Left: Move word backwards
+            if (key.ctrl || key.meta) {
+                // Ctrl+Left / Meta+Left (Option+Left): Move word backwards
                 let newOffset = cursorOffset;
                 if (newOffset > 0) {
                     // Skip whitespace backwards
@@ -1065,17 +1474,20 @@ export const InputBox = React.memo(({ onSubmit, placeholder = 'Ask anything...',
         }
         if (key.rightArrow) {
             // Autocomplete Logic (Only at end of line)
-            if (autocompleteSuggestion && cursorOffset === value.length) {
+            // AI suggestion takes priority over passive suggestion
+            const effectiveSuggestion = aiAutocompleteSuggestion || autocompleteSuggestion;
+            if (effectiveSuggestion && cursorOffset === value.length) {
                 if (key.ctrl) {
                     // Ctrl+Right: Accept FULL suggestion
-                    setValue(autocompleteSuggestion);
-                    setCursorOffset(autocompleteSuggestion.length);
+                    setValue(effectiveSuggestion);
+                    setCursorOffset(effectiveSuggestion.length);
                     setAutocompleteSuggestion(null);
+                    setAiAutocompleteSuggestion(null);
                     return;
                 }
                 else {
                     // Right: Accept NEXT WORD
-                    const remaining = autocompleteSuggestion.slice(value.length);
+                    const remaining = effectiveSuggestion.slice(value.length);
                     // Match next chunk of non-whitespace (including preceding whitespace)
                     const match = remaining.match(/^(\s*\S+)/);
                     if (match) {
@@ -1095,8 +1507,8 @@ export const InputBox = React.memo(({ onSubmit, placeholder = 'Ask anything...',
                 }
             }
             // Navigation Logic (if not completing)
-            if (key.ctrl) {
-                // Ctrl+Right: Move word forwards
+            if (key.ctrl || key.meta) {
+                // Ctrl+Right / Meta+Right (Option+Right): Move word forwards
                 let newOffset = cursorOffset;
                 if (newOffset < value.length) {
                     // Skip non-whitespace forwards
@@ -1239,6 +1651,58 @@ export const InputBox = React.memo(({ onSubmit, placeholder = 'Ask anything...',
                     setSlashAutocompleteVisible(false);
                 }
             }
+            else if (newValue.startsWith('/models ') || newValue.startsWith('/model ')) {
+                // Models subcommands (when user types "/models " or "/model ")
+                const fullQuery = newValue.slice(1); // Remove leading "/", pass "models <subquery>" to filterCommands
+                const matches = filterCommands(fullQuery);
+                if (matches.length > 0) {
+                    setSlashAutocompleteCommands(matches);
+                    setSlashAutocompleteVisible(true);
+                    setSlashAutocompleteSelectedIndex(0);
+                    setSlashAutocompleteScrollOffset(0);
+                }
+                else {
+                    setSlashAutocompleteVisible(false);
+                }
+            }
+            else if (newValue.match(/^\/workflow\s+(run|view|delete)\s+/) ||
+                newValue.match(/^\/wf\s+(run|view|delete)\s+/)) {
+                // Workflow name autocomplete (when user types "/workflow run " or similar)
+                // This MUST come before the /workflow subcommand check since it's more specific
+                const match = newValue.match(/^\/(?:workflow|wf)\s+(?:run|view|delete)\s+(.*)$/);
+                const partialName = match ? match[1].toLowerCase() : '';
+                const workflows = workflowStorage.list();
+                const matchingWorkflows = workflows
+                    .filter(wf => wf.name.toLowerCase().includes(partialName))
+                    .slice(0, 10)
+                    .map(wf => ({
+                    name: wf.name,
+                    description: wf.description || `${wf.stepCount} step${wf.stepCount !== 1 ? 's' : ''}`
+                }));
+                if (matchingWorkflows.length > 0) {
+                    setSlashAutocompleteCommands(matchingWorkflows);
+                    setSlashAutocompleteVisible(true);
+                    setSlashAutocompleteSelectedIndex(0);
+                    setSlashAutocompleteScrollOffset(0);
+                }
+                else {
+                    setSlashAutocompleteVisible(false);
+                }
+            }
+            else if (newValue.startsWith('/workflow ') || newValue.startsWith('/wf ')) {
+                // Workflow subcommands (when user types "/workflow " or "/wf ")
+                const fullQuery = newValue.slice(1); // Remove leading "/", pass "workflow <subquery>" to filterCommands
+                const matches = filterCommands(fullQuery);
+                if (matches.length > 0) {
+                    setSlashAutocompleteCommands(matches);
+                    setSlashAutocompleteVisible(true);
+                    setSlashAutocompleteSelectedIndex(0);
+                    setSlashAutocompleteScrollOffset(0);
+                }
+                else {
+                    setSlashAutocompleteVisible(false);
+                }
+            }
             else {
                 setSlashAutocompleteVisible(false);
             }
@@ -1324,7 +1788,7 @@ export const InputBox = React.memo(({ onSubmit, placeholder = 'Ask anything...',
         if (trimmedValue) {
             // Save to history if it was a command
             if (commandMode) {
-                CommandHistoryManager.getInstance().addCommand(trimmedValue, currentDir);
+                CommandHistoryManager.getInstance().addCommand(trimmedValue, currentDir, currentEnvironment);
             }
             // Resolve file tags (@filename -> absolute path)
             let resolvedValue = trimmedValue;
@@ -1491,10 +1955,14 @@ export const InputBox = React.memo(({ onSubmit, placeholder = 'Ask anything...',
                 }
                 // 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);
+                // AI suggestion takes priority over passive suggestion
+                const effectiveSuggestion = aiAutocompleteSuggestion || autocompleteSuggestion;
+                if (isLastLine && effectiveSuggestion && effectiveSuggestion.startsWith(value)) {
+                    const suffix = effectiveSuggestion.slice(value.length);
                     if (suffix) {
-                        renderedChars.push(React.createElement(Text, { key: "ghost", color: "gray" }, suffix));
+                        // Use slightly different color for AI suggestion to differentiate
+                        const ghostColor = aiAutocompleteSuggestion ? '#888888' : 'gray';
+                        renderedChars.push(React.createElement(Text, { key: "ghost", color: ghostColor }, suffix));
                     }
                 }
                 if (renderedChars.length === 0) {
@@ -1512,7 +1980,7 @@ export const InputBox = React.memo(({ onSubmit, placeholder = 'Ask anything...',
                             "#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 })),
+                subshellContext && subshellContext.type !== 'local' && (React.createElement(Breadcrumbs, { context: subshellContext, stack: subshellContextStack })),
                 React.createElement(Text, { color: "#666666" }, "CWD: "),
                 React.createElement(Text, { color: "#00ccff", bold: true }, currentDir)),
             React.createElement(Box, null,