centaurus-cli 2.8.8 → 2.9.0

package/dist/ui/components/InputBox.js

@@ -2,6 +2,7 @@ import React, { useState, useEffect, useRef, useMemo } from 'react';
 import { Box, Text, useInput } from 'ink';
 import * as fs from 'fs';
 import * as path from 'path';
+import { useConnectivity } from '../../hooks/useConnectivity.js';
 import { Breadcrumbs } from './Breadcrumbs.js';
 import { ContextWindowIndicator } from './ContextWindowIndicator.js';
 import { logDebug } from '../../utils/logger.js';
@@ -9,9 +10,9 @@ import { detectIntent } from '../../utils/input-classifier.js';
 import { CommandHistoryManager } from '../../utils/command-history.js';
 import { SlashCommandAutocomplete } from './SlashCommandAutocomplete.js';
 import { FileTagAutocomplete } from './FileTagAutocomplete.js';
-import { ClipboardImageAutocomplete } from './ClipboardImageAutocomplete.js';
 import { filterCommands } from '../../config/slash-commands.js';
 import { getClipboardImages } from '../../services/clipboard-service.js';
+import { useTerminalDimensions, TERMINAL_HEIGHT_CONSTANTS } from '../../hooks/useTerminalDimensions.js';
 const getVisualLines = (text, width) => {
     const logicalLines = text.split('\n');
     const visualLines = [];
@@ -49,7 +50,7 @@ const getVisualLines = (text, width) => {
     });
     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, isShellRunning = false, initialValue = '', onValueChange }) => {
+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, isShellRunning = false, backgroundTaskCount = 0, initialValue = '', onValueChange, onSetAutoModeSetup }) => {
     // Use initialValue for first mount, but manage state internally after that
     const [value, setValueInternal] = useState(initialValue);
     const [cursorOffset, setCursorOffset] = useState(0);
@@ -58,6 +59,10 @@ export const InputBox = React.memo(({ onSubmit, placeholder = 'Ask anything...',
     const [historyIndex, setHistoryIndex] = useState(-1);
     const [tempValue, setTempValue] = useState('');
     const ignoreNextChangeRef = useRef(false);
+    // Refs to track current value and cursor for paste handling
+    // This prevents stale closure issues when Ink calls useInput multiple times during paste
+    const valueRef = useRef(initialValue);
+    const cursorOffsetRef = useRef(0);
     // Auto Mode State
     const [isAutoMode, setIsAutoMode] = useState(true);
     const [detectedIntent, setDetectedIntent] = useState('ai');
@@ -74,30 +79,34 @@ export const InputBox = React.memo(({ onSubmit, placeholder = 'Ask anything...',
     const [slashAutocompleteVisible, setSlashAutocompleteVisible] = useState(false);
     const [slashAutocompleteCommands, setSlashAutocompleteCommands] = useState([]);
     const [slashAutocompleteSelectedIndex, setSlashAutocompleteSelectedIndex] = useState(0);
+    const [slashAutocompleteScrollOffset, setSlashAutocompleteScrollOffset] = useState(0);
+    // Connectivity State
+    const isConnected = useConnectivity();
+    // Terminal dimensions for height-aware autocomplete
+    const dimensions = useTerminalDimensions();
+    // Max 5 items, min 0 for very small terminals (use MIN_ROWS_FOR_STREAMING as threshold)
+    const slashMaxVisibleItems = dimensions.rows < TERMINAL_HEIGHT_CONSTANTS.MIN_ROWS_FOR_STREAMING
+        ? 0
+        : Math.min(5, Math.max(1, Math.floor((dimensions.rows - 20) / 3)));
     // File Tag Autocomplete State (@ symbol)
     const [fileTagAutocompleteVisible, setFileTagAutocompleteVisible] = useState(false);
     const [fileTagSuggestions, setFileTagSuggestions] = useState([]);
     const [fileTagSelectedIndex, setFileTagSelectedIndex] = useState(0);
     const [activeFileTagStart, setActiveFileTagStart] = useState(null);
     const [confirmedFileTags, setConfirmedFileTags] = useState([]);
-    // Clipboard Image State (#image command)
-    const [clipboardAutocompleteVisible, setClipboardAutocompleteVisible] = useState(false);
-    const [clipboardImages, setClipboardImages] = useState([]);
-    const [clipboardSelectedIndex, setClipboardSelectedIndex] = useState(0);
-    const [clipboardLoading, setClipboardLoading] = useState(false);
-    const [activeClipboardStart, setActiveClipboardStart] = useState(null);
+    // Clipboard Image State (Alt+V paste)
     const [confirmedClipboardImages, setConfirmedClipboardImages] = useState([]);
-    // Track positions of validated #image commands (for pink highlighting)
-    const [validatedImagePositions, setValidatedImagePositions] = useState([]);
     // Track visual line count to force re-renders when text wraps
     // This is necessary because Ink doesn't automatically update layout when text wraps
     const [visualLineCount, setVisualLineCount] = useState(1);
     // Configuration for scrolling
     const MAX_VISIBLE_LINES = 9;
-    // Wrapper for setValue that also notifies parent of changes
+    // Wrapper for setValue that also notifies parent of changes and updates ref
     const setValue = React.useCallback((newValue) => {
         setValueInternal(prev => {
             const resolvedValue = typeof newValue === 'function' ? newValue(prev) : newValue;
+            // Update ref synchronously for paste handling
+            valueRef.current = resolvedValue;
             // Notify parent of value change for preservation across screen transitions
             if (onValueChange) {
                 onValueChange(resolvedValue);
@@ -105,16 +114,53 @@ export const InputBox = React.memo(({ onSubmit, placeholder = 'Ask anything...',
             return resolvedValue;
         });
     }, [onValueChange]);
+    // Wrapper for setCursorOffset that also updates ref
+    const setCursorOffsetWithRef = React.useCallback((newOffset) => {
+        setCursorOffset(prev => {
+            const resolvedOffset = typeof newOffset === 'function' ? newOffset(prev) : newOffset;
+            // Update ref synchronously for paste handling
+            cursorOffsetRef.current = resolvedOffset;
+            return resolvedOffset;
+        });
+    }, []);
     // Initialize cursor position when initialValue is provided
     useEffect(() => {
         if (initialValue && initialValue.length > 0) {
             setCursorOffset(initialValue.length);
+            cursorOffsetRef.current = initialValue.length;
         }
     }, []); // Only run on mount
+    // Keep refs in sync with state (for cases where state is updated directly)
+    useEffect(() => {
+        valueRef.current = value;
+    }, [value]);
+    useEffect(() => {
+        cursorOffsetRef.current = cursorOffset;
+    }, [cursorOffset]);
     // Load history on mount
     useEffect(() => {
         CommandHistoryManager.getInstance().load();
     }, []);
+    // Register setIsAutoMode callback for external control (e.g., after background task starts)
+    useEffect(() => {
+        if (onSetAutoModeSetup) {
+            onSetAutoModeSetup((enabled) => {
+                setIsAutoMode(enabled);
+                if (enabled) {
+                    // When enabling Auto mode, also update detected intent based on current value
+                    const intent = detectIntent(value);
+                    setDetectedIntent(intent);
+                    // Set command mode based on intent
+                    if (intent === 'command' && !commandMode && onToggleCommandMode) {
+                        onToggleCommandMode();
+                    }
+                    else if (intent === 'ai' && commandMode && onToggleCommandMode) {
+                        onToggleCommandMode();
+                    }
+                }
+            });
+        }
+    }, [onSetAutoModeSetup, value, commandMode, onToggleCommandMode]);
     // Force clear value if it becomes empty or whitespace-only after external changes
     useEffect(() => {
         if (value && value.trim() === '' && cursorOffset > 0) {
@@ -269,122 +315,6 @@ export const InputBox = React.memo(({ onSubmit, placeholder = 'Ask anything...',
             setActiveFileTagStart(null);
         }
     }, [value, cursorOffset, commandMode, currentWorkingDirectory]);
-    // Hash (#) symbol detection effect for clipboard image autocomplete
-    // When user types # in Agent mode, check clipboard for images and show dropdown
-    useEffect(() => {
-        // Don't show in command mode
-        if (commandMode) {
-            setClipboardAutocompleteVisible(false);
-            setActiveClipboardStart(null);
-            return;
-        }
-        // Find if cursor is right after a # character (or typing after #)
-        let hashPosition = -1;
-        for (let i = cursorOffset - 1; i >= 0; i--) {
-            const char = value[i];
-            // Stop if we hit whitespace
-            if (/[\s\n]/.test(char))
-                break;
-            if (char === '#') {
-                hashPosition = i;
-                break;
-            }
-        }
-        // Only treat # as image trigger if it's at start of input OR preceded by whitespace
-        if (hashPosition === -1 || (hashPosition > 0 && !/[\s\n]/.test(value[hashPosition - 1]))) {
-            setClipboardAutocompleteVisible(false);
-            setActiveClipboardStart(null);
-            return;
-        }
-        // Extract what's typed after #
-        const query = value.slice(hashPosition + 1, cursorOffset).toLowerCase();
-        // If #image is fully typed (with space or at end), hide dropdown (validation will handle it)
-        if (query === 'image' || query.startsWith('image ')) {
-            setClipboardAutocompleteVisible(false);
-            setActiveClipboardStart(null);
-            return;
-        }
-        // If user has typed something that doesn't match "image" prefix, hide dropdown
-        if (query.length > 0 && !'image'.startsWith(query)) {
-            setClipboardAutocompleteVisible(false);
-            setActiveClipboardStart(null);
-            return;
-        }
-        // Show dropdown and check clipboard
-        setActiveClipboardStart(hashPosition);
-        setClipboardLoading(true);
-        setClipboardAutocompleteVisible(true);
-        // Check clipboard asynchronously
-        const checkClipboard = async () => {
-            try {
-                const images = await getClipboardImages();
-                setClipboardImages(images);
-                setClipboardLoading(false);
-                setClipboardSelectedIndex(0);
-            }
-            catch (error) {
-                logDebug(`Failed to check clipboard: ${error instanceof Error ? error.message : 'Unknown error'}`);
-                setClipboardImages([]);
-                setClipboardLoading(false);
-            }
-        };
-        checkClipboard();
-    }, [value, cursorOffset, commandMode]);
-    // #image command detection effect
-    // When user types #image, check clipboard for images and validate
-    useEffect(() => {
-        // Don't check in command mode
-        if (commandMode)
-            return;
-        // Find all #image occurrences in the text
-        const regex = /#image\b/gi;
-        const matches = [];
-        let match;
-        while ((match = regex.exec(value)) !== null) {
-            matches.push({ start: match.index, end: match.index + match[0].length });
-        }
-        // If no #image in text, clear validated positions
-        if (matches.length === 0) {
-            if (validatedImagePositions.length > 0) {
-                setValidatedImagePositions([]);
-                setConfirmedClipboardImages([]);
-            }
-            return;
-        }
-        // Check for new #image occurrences that haven't been validated yet
-        const unvalidatedMatches = matches.filter(m => !validatedImagePositions.some(v => v.start === m.start && v.end === m.end));
-        if (unvalidatedMatches.length === 0)
-            return;
-        // Check clipboard and validate new #image occurrences
-        const validateImages = async () => {
-            logDebug(`Found ${unvalidatedMatches.length} new #image occurrences to validate`);
-            try {
-                const images = await getClipboardImages();
-                logDebug(`Clipboard check returned ${images.length} images`);
-                if (images.length > 0) {
-                    const image = images[0];
-                    logDebug(`Image found in clipboard: ${image.displayName}, ${image.sizeBytes} bytes`);
-                    // Add to confirmed clipboard images (avoid duplicates)
-                    setConfirmedClipboardImages(prev => {
-                        const exists = prev.some(img => img.id === image.id);
-                        if (exists)
-                            return prev;
-                        return [...prev, image];
-                    });
-                    // Mark all unvalidated positions as validated
-                    setValidatedImagePositions(prev => [...prev, ...unvalidatedMatches]);
-                    logDebug(`Validated ${unvalidatedMatches.length} #image occurrences`);
-                }
-                else {
-                    logDebug('No image in clipboard - #image command not validated');
-                }
-            }
-            catch (error) {
-                logDebug(`Failed to check clipboard: ${error instanceof Error ? error.message : 'Unknown error'}`);
-            }
-        };
-        validateImages();
-    }, [value, commandMode]);
     const pushToUndoStack = () => {
         setUndoStack(prev => [...prev, { value, cursorOffset }]);
         setRedoStack([]); // Clear redo stack on new action
@@ -408,11 +338,21 @@ export const InputBox = React.memo(({ onSubmit, placeholder = 'Ask anything...',
         // Handle slash command autocomplete navigation
         if (slashAutocompleteVisible) {
             if (key.downArrow) {
-                setSlashAutocompleteSelectedIndex(prev => Math.min(prev + 1, slashAutocompleteCommands.length - 1));
+                const newIndex = Math.min(slashAutocompleteSelectedIndex + 1, slashAutocompleteCommands.length - 1);
+                setSlashAutocompleteSelectedIndex(newIndex);
+                // Scroll down if selected is below visible window
+                if (newIndex >= slashAutocompleteScrollOffset + slashMaxVisibleItems) {
+                    setSlashAutocompleteScrollOffset(newIndex - slashMaxVisibleItems + 1);
+                }
                 return;
             }
             if (key.upArrow) {
-                setSlashAutocompleteSelectedIndex(prev => Math.max(prev - 1, 0));
+                const newIndex = Math.max(slashAutocompleteSelectedIndex - 1, 0);
+                setSlashAutocompleteSelectedIndex(newIndex);
+                // Scroll up if selected is above visible window
+                if (newIndex < slashAutocompleteScrollOffset) {
+                    setSlashAutocompleteScrollOffset(newIndex);
+                }
                 return;
             }
             if (key.return && input.length <= 1 && !key.shift && !key.ctrl) {
@@ -441,6 +381,21 @@ export const InputBox = React.memo(({ onSubmit, placeholder = 'Ask anything...',
                     setCursorOffset(newValue.length);
                     setSlashAutocompleteVisible(false);
                 }
+                else if (value.startsWith('/background-task ') || value.startsWith('/bkg ') || value.startsWith('/bg-task ')) {
+                    // We're selecting a background-task subcommand
+                    const prefix = value.startsWith('/bkg ') ? '/bkg ' : (value.startsWith('/bg-task ') ? '/bg-task ' : '/background-task ');
+                    const newValue = `${prefix}${selected.name} `;
+                    setValue(newValue);
+                    setCursorOffset(newValue.length);
+                    setSlashAutocompleteVisible(false);
+                }
+                else if (value.startsWith('/sync ')) {
+                    // We're selecting a sync subcommand
+                    const newValue = `/sync ${selected.name} `;
+                    setValue(newValue);
+                    setCursorOffset(newValue.length);
+                    setSlashAutocompleteVisible(false);
+                }
                 else {
                     // Regular slash command, replace everything
                     const newValue = `/${selected.name} `;
@@ -453,6 +408,7 @@ export const InputBox = React.memo(({ onSubmit, placeholder = 'Ask anything...',
                         if (subcommandMatches.length > 0) {
                             setSlashAutocompleteCommands(subcommandMatches);
                             setSlashAutocompleteSelectedIndex(0);
+                            setSlashAutocompleteScrollOffset(0);
                             // Keep autocomplete visible for subcommands
                         }
                         else {
@@ -464,6 +420,7 @@ export const InputBox = React.memo(({ onSubmit, placeholder = 'Ask anything...',
                         if (subcommandMatches.length > 0) {
                             setSlashAutocompleteCommands(subcommandMatches);
                             setSlashAutocompleteSelectedIndex(0);
+                            setSlashAutocompleteScrollOffset(0);
                             // Keep autocomplete visible for subcommands
                         }
                         else {
@@ -475,6 +432,31 @@ export const InputBox = React.memo(({ onSubmit, placeholder = 'Ask anything...',
                         if (subcommandMatches.length > 0) {
                             setSlashAutocompleteCommands(subcommandMatches);
                             setSlashAutocompleteSelectedIndex(0);
+                            setSlashAutocompleteScrollOffset(0);
+                            // Keep autocomplete visible for subcommands
+                        }
+                        else {
+                            setSlashAutocompleteVisible(false);
+                        }
+                    }
+                    else if (selected.name === 'background-task' || selected.name === 'bkg' || selected.name === 'bg-task') {
+                        const subcommandMatches = filterCommands('background-task ');
+                        if (subcommandMatches.length > 0) {
+                            setSlashAutocompleteCommands(subcommandMatches);
+                            setSlashAutocompleteSelectedIndex(0);
+                            setSlashAutocompleteScrollOffset(0);
+                            // Keep autocomplete visible for subcommands
+                        }
+                        else {
+                            setSlashAutocompleteVisible(false);
+                        }
+                    }
+                    else if (selected.name === 'sync') {
+                        const subcommandMatches = filterCommands('sync ');
+                        if (subcommandMatches.length > 0) {
+                            setSlashAutocompleteCommands(subcommandMatches);
+                            setSlashAutocompleteSelectedIndex(0);
+                            setSlashAutocompleteScrollOffset(0);
                             // Keep autocomplete visible for subcommands
                         }
                         else {
@@ -565,54 +547,36 @@ export const InputBox = React.memo(({ onSubmit, placeholder = 'Ask anything...',
                 return;
             }
         }
-        // Handle clipboard image (#) autocomplete navigation
-        if (clipboardAutocompleteVisible) {
-            if (key.downArrow) {
-                setClipboardSelectedIndex(prev => Math.min(prev + 1, Math.max(clipboardImages.length - 1, 0)));
-                return;
-            }
-            if (key.upArrow) {
-                setClipboardSelectedIndex(prev => Math.max(prev - 1, 0));
-                return;
-            }
-            if (key.return && input.length <= 1 && !key.shift && !key.ctrl) {
-                // Select the image option and autocomplete #image
-                if (clipboardImages.length > 0 && activeClipboardStart !== null) {
-                    pushToUndoStack();
-                    // Replace # with #image (and add space after)
-                    const beforeHash = value.slice(0, activeClipboardStart);
-                    const afterCursor = value.slice(cursorOffset);
-                    const newValue = beforeHash + '#image ' + afterCursor;
-                    const newCursorPos = activeClipboardStart + 7; // length of "#image "
-                    setValue(newValue);
-                    setCursorOffset(newCursorPos);
-                    setClipboardAutocompleteVisible(false);
-                    setActiveClipboardStart(null);
+        // Alt+V: Paste image from clipboard
+        // Detect Alt+V on Windows/Linux (key.meta is often Alt on Windows in Ink)
+        const isAltV = (key.meta && input === 'v') || (input === '√'); // '√' is Alt+V on some systems
+        if (isAltV && !commandMode) {
+            // Check clipboard for images asynchronously
+            (async () => {
+                try {
+                    const images = await getClipboardImages();
+                    if (images.length > 0) {
+                        const image = images[0];
+                        logDebug(`Alt+V: Image found in clipboard: ${image.displayName}, ${image.sizeBytes} bytes`);
+                        // Add image to confirmed list with unique ID
+                        setConfirmedClipboardImages(prev => [
+                            ...prev,
+                            {
+                                ...image,
+                                id: `${image.id}_${Date.now()}`
+                            }
+                        ]);
+                    }
+                    else {
+                        logDebug('Alt+V: No image in clipboard');
+                    }
                 }
-                return;
-            }
-            if (key.escape) {
-                setClipboardAutocompleteVisible(false);
-                setActiveClipboardStart(null);
-                return;
-            }
-            // Tab also selects
-            if (key.tab && !key.shift) {
-                if (clipboardImages.length > 0 && activeClipboardStart !== null) {
-                    pushToUndoStack();
-                    const beforeHash = value.slice(0, activeClipboardStart);
-                    const afterCursor = value.slice(cursorOffset);
-                    const newValue = beforeHash + '#image ' + afterCursor;
-                    const newCursorPos = activeClipboardStart + 7;
-                    setValue(newValue);
-                    setCursorOffset(newCursorPos);
-                    setClipboardAutocompleteVisible(false);
-                    setActiveClipboardStart(null);
+                catch (error) {
+                    logDebug(`Alt+V: Failed to check clipboard: ${error instanceof Error ? error.message : 'Unknown error'}`);
                 }
-                return;
-            }
+            })();
+            return;
         }
-        // Clipboard image paste is handled via Ctrl+V below
         // 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
@@ -646,6 +610,7 @@ export const InputBox = React.memo(({ onSubmit, placeholder = 'Ask anything...',
                         setSlashAutocompleteCommands(matches);
                         setSlashAutocompleteVisible(true);
                         setSlashAutocompleteSelectedIndex(0);
+                        setSlashAutocompleteScrollOffset(0);
                     }
                     else {
                         setSlashAutocompleteVisible(false);
@@ -659,6 +624,7 @@ export const InputBox = React.memo(({ onSubmit, placeholder = 'Ask anything...',
                         setSlashAutocompleteCommands(matches);
                         setSlashAutocompleteVisible(true);
                         setSlashAutocompleteSelectedIndex(0);
+                        setSlashAutocompleteScrollOffset(0);
                     }
                     else {
                         setSlashAutocompleteVisible(false);
@@ -672,6 +638,7 @@ export const InputBox = React.memo(({ onSubmit, placeholder = 'Ask anything...',
                         setSlashAutocompleteCommands(matches);
                         setSlashAutocompleteVisible(true);
                         setSlashAutocompleteSelectedIndex(0);
+                        setSlashAutocompleteScrollOffset(0);
                     }
                     else {
                         setSlashAutocompleteVisible(false);
@@ -685,6 +652,35 @@ export const InputBox = React.memo(({ onSubmit, placeholder = 'Ask anything...',
                         setSlashAutocompleteCommands(matches);
                         setSlashAutocompleteVisible(true);
                         setSlashAutocompleteSelectedIndex(0);
+                        setSlashAutocompleteScrollOffset(0);
+                    }
+                    else {
+                        setSlashAutocompleteVisible(false);
+                    }
+                }
+                else if (newValue.startsWith('/background-task ') || newValue.startsWith('/bkg ') || newValue.startsWith('/bg-task ')) {
+                    // Background-task 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.startsWith('/sync ')) {
+                    // Sync 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);
@@ -705,32 +701,41 @@ export const InputBox = React.memo(({ onSubmit, placeholder = 'Ask anything...',
             setTimeout(() => { ignoreNextChangeRef.current = false; }, 100);
             return;
         }
-        // Ctrl+D: Cycle modes (Agent -> Terminal -> Auto -> Agent)
+        // Ctrl+D: Cycle modes (Agent -> Terminal -> Background -> Auto -> Agent)
         if (key.ctrl && input.toLowerCase() === 'd') {
             if (onToggleCommandMode) {
                 ignoreNextChangeRef.current = true;
-                // Cycle Logic
-                if (!isAutoMode && !commandMode) {
+                // Cycle Logic: Agent -> Terminal -> Background -> Auto -> Agent
+                if (!isAutoMode && !commandMode && !backgroundMode) {
                     // Agent -> Terminal
                     onToggleCommandMode();
                 }
-                else if (!isAutoMode && commandMode) {
-                    // Terminal -> Auto
+                else if (!isAutoMode && commandMode && !backgroundMode) {
+                    // Terminal -> Background
+                    onToggleCommandMode(); // Exit terminal mode
+                    if (onToggleBackgroundMode)
+                        onToggleBackgroundMode(); // Enter background mode
+                }
+                else if (!isAutoMode && !commandMode && backgroundMode) {
+                    // Background -> Auto
+                    if (onToggleBackgroundMode)
+                        onToggleBackgroundMode(); // Exit background mode
                     setIsAutoMode(true);
                     // Trigger initial detection for Auto mode
                     const intent = detectIntent(value);
                     setDetectedIntent(intent);
                     // Set command mode based on intent
-                    if (intent === 'ai' && commandMode)
+                    if (intent === 'command')
                         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)
+                    // Ensure we go back to Agent mode (commandMode = false, backgroundMode = false)
                     if (commandMode)
                         onToggleCommandMode();
+                    if (backgroundMode && onToggleBackgroundMode)
+                        onToggleBackgroundMode();
                 }
                 setTimeout(() => { ignoreNextChangeRef.current = false; }, 100);
             }
@@ -747,7 +752,7 @@ export const InputBox = React.memo(({ onSubmit, placeholder = 'Ask anything...',
             setCursorOffset(value.length);
             return;
         }
-        // Note: Clipboard images are handled via #image command detection effect
+        // Note: Clipboard images are handled via Alt+V keyboard shortcut
         // DELETE CHAR - Only runs if Delete Word did NOT trigger
         // Triggers on:
         // 1. Backspace or Delete key flag is present
@@ -787,6 +792,7 @@ export const InputBox = React.memo(({ onSubmit, placeholder = 'Ask anything...',
                     setSlashAutocompleteCommands(matches);
                     setSlashAutocompleteVisible(true);
                     setSlashAutocompleteSelectedIndex(0);
+                    setSlashAutocompleteScrollOffset(0);
                 }
                 else {
                     setSlashAutocompleteVisible(false);
@@ -800,6 +806,7 @@ export const InputBox = React.memo(({ onSubmit, placeholder = 'Ask anything...',
                     setSlashAutocompleteCommands(matches);
                     setSlashAutocompleteVisible(true);
                     setSlashAutocompleteSelectedIndex(0);
+                    setSlashAutocompleteScrollOffset(0);
                 }
                 else {
                     setSlashAutocompleteVisible(false);
@@ -813,6 +820,7 @@ export const InputBox = React.memo(({ onSubmit, placeholder = 'Ask anything...',
                     setSlashAutocompleteCommands(matches);
                     setSlashAutocompleteVisible(true);
                     setSlashAutocompleteSelectedIndex(0);
+                    setSlashAutocompleteScrollOffset(0);
                 }
                 else {
                     setSlashAutocompleteVisible(false);
@@ -826,6 +834,35 @@ export const InputBox = React.memo(({ onSubmit, placeholder = 'Ask anything...',
                     setSlashAutocompleteCommands(matches);
                     setSlashAutocompleteVisible(true);
                     setSlashAutocompleteSelectedIndex(0);
+                    setSlashAutocompleteScrollOffset(0);
+                }
+                else {
+                    setSlashAutocompleteVisible(false);
+                }
+            }
+            else if (newValue.startsWith('/background-task ') || newValue.startsWith('/bkg ') || newValue.startsWith('/bg-task ')) {
+                // Background-task 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.startsWith('/sync ')) {
+                // Sync 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);
@@ -864,6 +901,16 @@ export const InputBox = React.memo(({ onSubmit, placeholder = 'Ask anything...',
             }
             else {
                 // Enter: Submit
+                // Check if submission is allowed when disconnected
+                // Allowed: /exit command, OR Command Mode is active, OR detected intent is 'command'
+                const isExitCommand = value.trim() === '/exit';
+                const isCommandIntent = detectedIntent === 'command';
+                const isAllowedOffline = isConnected || isExitCommand || commandMode || isCommandIntent;
+                if (!isAllowedOffline) {
+                    setRejectFlash(true);
+                    setTimeout(() => setRejectFlash(false), 1000);
+                    return;
+                }
                 handleSubmit();
             }
             return;
@@ -1059,21 +1106,28 @@ export const InputBox = React.memo(({ onSubmit, placeholder = 'Ask anything...',
             pushToUndoStack();
             // Handle paste with newlines
             const cleanedInput = input.replace(/\r\n/g, '\n').replace(/\r/g, '\n');
-            let newValue = value;
-            let newOffset = cursorOffset;
+            // Use refs to get the latest value and cursor position
+            // This prevents stale closure issues when Ink calls useInput multiple times during paste
+            const currentValue = valueRef.current;
+            const currentCursorOffset = cursorOffsetRef.current;
+            let newValue = currentValue;
+            let newOffset = currentCursorOffset;
             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);
+                newValue = currentValue.slice(0, start) + cleanedInput + currentValue.slice(end);
                 newOffset = start + cleanedInput.length;
                 setSelection(null);
             }
             else {
-                newValue = value.slice(0, cursorOffset) + cleanedInput + value.slice(cursorOffset);
-                newOffset = cursorOffset + cleanedInput.length;
+                newValue = currentValue.slice(0, currentCursorOffset) + cleanedInput + currentValue.slice(currentCursorOffset);
+                newOffset = currentCursorOffset + cleanedInput.length;
             }
+            // Update refs immediately for subsequent paste chunks
+            valueRef.current = newValue;
+            cursorOffsetRef.current = newOffset;
             setValue(newValue);
-            setCursorOffset(newOffset);
+            setCursorOffsetWithRef(newOffset);
             // Reset history/completions
             setHistoryIndex(-1);
             setCompletions([]);
@@ -1086,6 +1140,7 @@ export const InputBox = React.memo(({ onSubmit, placeholder = 'Ask anything...',
                     setSlashAutocompleteCommands(matches);
                     setSlashAutocompleteVisible(true);
                     setSlashAutocompleteSelectedIndex(0);
+                    setSlashAutocompleteScrollOffset(0);
                 }
                 else {
                     setSlashAutocompleteVisible(false);
@@ -1099,6 +1154,7 @@ export const InputBox = React.memo(({ onSubmit, placeholder = 'Ask anything...',
                     setSlashAutocompleteCommands(matches);
                     setSlashAutocompleteVisible(true);
                     setSlashAutocompleteSelectedIndex(0);
+                    setSlashAutocompleteScrollOffset(0);
                 }
                 else {
                     setSlashAutocompleteVisible(false);
@@ -1112,6 +1168,7 @@ export const InputBox = React.memo(({ onSubmit, placeholder = 'Ask anything...',
                     setSlashAutocompleteCommands(matches);
                     setSlashAutocompleteVisible(true);
                     setSlashAutocompleteSelectedIndex(0);
+                    setSlashAutocompleteScrollOffset(0);
                 }
                 else {
                     setSlashAutocompleteVisible(false);
@@ -1125,6 +1182,35 @@ export const InputBox = React.memo(({ onSubmit, placeholder = 'Ask anything...',
                     setSlashAutocompleteCommands(matches);
                     setSlashAutocompleteVisible(true);
                     setSlashAutocompleteSelectedIndex(0);
+                    setSlashAutocompleteScrollOffset(0);
+                }
+                else {
+                    setSlashAutocompleteVisible(false);
+                }
+            }
+            else if (newValue.startsWith('/background-task ') || newValue.startsWith('/bkg ') || newValue.startsWith('/bg-task ')) {
+                // Background-task subcommands (when user types "/background-task ", "/bkg ", or "/bg-task ")
+                const fullQuery = newValue.slice(1); // Remove leading "/", pass "background-task <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.startsWith('/sync ')) {
+                // Sync subcommands (when user types "/sync ")
+                const fullQuery = newValue.slice(1); // Remove leading "/", pass "sync <subquery>" to filterCommands
+                const matches = filterCommands(fullQuery);
+                if (matches.length > 0) {
+                    setSlashAutocompleteCommands(matches);
+                    setSlashAutocompleteVisible(true);
+                    setSlashAutocompleteSelectedIndex(0);
+                    setSlashAutocompleteScrollOffset(0);
                 }
                 else {
                     setSlashAutocompleteVisible(false);
@@ -1374,17 +1460,6 @@ export const InputBox = React.memo(({ onSubmit, placeholder = 'Ask anything...',
                     if (isInConfirmedFileTag || isInActiveFileTag) {
                         return React.createElement(Text, { key: charIdx, color: "#00ccff", bold: true }, char);
                     }
-                    // Check if this character is part of a validated #image command
-                    let isInValidatedImage = false;
-                    for (const pos of validatedImagePositions) {
-                        if (absPos >= pos.start && absPos < pos.end) {
-                            isInValidatedImage = true;
-                            break;
-                        }
-                    }
-                    if (isInValidatedImage) {
-                        return React.createElement(Text, { key: charIdx, color: "#ff69b4", bold: true }, char);
-                    }
                     return React.createElement(Text, { key: charIdx }, char);
                 });
                 // Handle cursor at end of line
@@ -1406,7 +1481,7 @@ export const InputBox = React.memo(({ onSubmit, placeholder = 'Ask anything...',
             }),
             endLine < totalVisualLines && React.createElement(Text, { color: "gray" }, "\u2193 ...")));
     };
-    return (React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: rejectFlash ? "#ff3366" : (commandMode ? "#00cc66" : "#257aa5ff"), paddingX: 1, paddingY: 0, width: "100%" },
+    return (React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: rejectFlash ? "#ff3366" : (backgroundMode ? "#9966ff" : (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 })),
@@ -1421,19 +1496,26 @@ export const InputBox = React.memo(({ onSubmit, placeholder = 'Ask anything...',
                     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(Text, { color: "#00ccff", bold: true }, "]"))) : backgroundMode ? (React.createElement(Text, { color: "#9966ff", bold: true }, "Background")) : commandMode ? (React.createElement(Text, { color: "#00cc66", bold: true }, "Terminal")) : planMode ? (React.createElement(Text, { color: "#ffaa00", bold: true }, "Plan")) : (React.createElement(Text, { color: "#00ccff" }, "Agent"))))),
+        confirmedClipboardImages.length > 0 && (React.createElement(Box, { marginBottom: 1, flexDirection: "row", flexWrap: "wrap", gap: 1 }, confirmedClipboardImages.map((img, index) => (React.createElement(Box, { key: img.id, borderStyle: "round", borderColor: "#ff69b4", paddingX: 1 },
+            React.createElement(Text, { color: "#ff69b4", bold: true },
+                "image_",
+                index + 1)))))),
         React.createElement(Box, { flexDirection: "row", width: "100%" },
             React.createElement(Text, { color: "#666666" }, "> "),
             renderInput()),
         React.createElement(Box, { marginY: 1, justifyContent: "space-between", width: "100%" },
-            React.createElement(Text, { color: "#666666", dimColor: true }, isAutoMode ? ('Ctrl+D to switch modes • Ctrl+T to auto-approve') : commandMode ? ('Ctrl+D to switch modes • Tab for autocomplete') : ('Ctrl+D to switch modes • Ctrl+T to auto-approve • Shift+Enter for new line')),
+            React.createElement(Text, { color: "#666666", dimColor: true }, isAutoMode ? ('Ctrl+D to switch modes • Ctrl+T to auto-approve') : backgroundMode ? ('Ctrl+D to switch modes • Commands run in background') : commandMode ? ('Ctrl+D to switch modes • Tab for autocomplete') : ('Ctrl+D to switch modes • Ctrl+T to auto-approve • Shift+Enter for new line')),
             React.createElement(Box, { gap: 1 },
-                !commandMode && planMode && (React.createElement(Text, { color: "#ffaa00", bold: true }, "[PLANNING]")),
+                backgroundTaskCount > 0 && (React.createElement(Text, { color: "#9966ff", bold: true },
+                    "[bkg tasks: ",
+                    backgroundTaskCount,
+                    "]")),
+                !commandMode && !backgroundMode && planMode && (React.createElement(Text, { color: "#ffaa00", bold: true }, "[PLANNING]")),
                 !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 },
                     React.createElement(ContextWindowIndicator, { currentTokens: currentTokens, maxTokens: maxTokens }))))),
-        slashAutocompleteVisible && (React.createElement(SlashCommandAutocomplete, { commands: slashAutocompleteCommands, selectedIndex: slashAutocompleteSelectedIndex })),
-        fileTagAutocompleteVisible && (React.createElement(FileTagAutocomplete, { files: fileTagSuggestions, selectedIndex: fileTagSelectedIndex })),
-        clipboardAutocompleteVisible && (React.createElement(ClipboardImageAutocomplete, { images: clipboardImages, selectedIndex: clipboardSelectedIndex, isLoading: clipboardLoading }))));
+        slashAutocompleteVisible && slashMaxVisibleItems > 0 && (React.createElement(SlashCommandAutocomplete, { commands: slashAutocompleteCommands, selectedIndex: slashAutocompleteSelectedIndex, maxVisibleItems: slashMaxVisibleItems, scrollOffset: slashAutocompleteScrollOffset })),
+        fileTagAutocompleteVisible && (React.createElement(FileTagAutocomplete, { files: fileTagSuggestions, selectedIndex: fileTagSelectedIndex }))));
 });
 //# sourceMappingURL=InputBox.js.map