centaurus-cli 2.8.6 → 2.8.8

package/dist/ui/components/InputBox.js

@@ -4,11 +4,14 @@ import * as fs from 'fs';
 import * as path from 'path';
 import { Breadcrumbs } from './Breadcrumbs.js';
 import { ContextWindowIndicator } from './ContextWindowIndicator.js';
+import { logDebug } from '../../utils/logger.js';
 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';
 const getVisualLines = (text, width) => {
     const logicalLines = text.split('\n');
     const visualLines = [];
@@ -46,8 +49,9 @@ 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 }) => {
-    const [value, setValue] = useState('');
+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 }) => {
+    // Use initialValue for first mount, but manage state internally after that
+    const [value, setValueInternal] = useState(initialValue);
     const [cursorOffset, setCursorOffset] = useState(0);
     const [completions, setCompletions] = useState([]);
     const [completionIndex, setCompletionIndex] = useState(0);
@@ -76,8 +80,37 @@ export const InputBox = React.memo(({ onSubmit, placeholder = 'Ask anything...',
     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);
+    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
+    const setValue = React.useCallback((newValue) => {
+        setValueInternal(prev => {
+            const resolvedValue = typeof newValue === 'function' ? newValue(prev) : newValue;
+            // Notify parent of value change for preservation across screen transitions
+            if (onValueChange) {
+                onValueChange(resolvedValue);
+            }
+            return resolvedValue;
+        });
+    }, [onValueChange]);
+    // Initialize cursor position when initialValue is provided
+    useEffect(() => {
+        if (initialValue && initialValue.length > 0) {
+            setCursorOffset(initialValue.length);
+        }
+    }, []); // Only run on mount
     // Load history on mount
     useEffect(() => {
         CommandHistoryManager.getInstance().load();
@@ -89,6 +122,16 @@ export const InputBox = React.memo(({ onSubmit, placeholder = 'Ask anything...',
             setCursorOffset(0);
         }
     }, [value, cursorOffset]);
+    // Track visual line count changes to force re-renders when text wraps
+    // This is crucial for the input box height to update correctly
+    useEffect(() => {
+        const termWidth = (process.stdout.columns || 80) - 6;
+        const visualLines = getVisualLines(value, termWidth);
+        const newLineCount = Math.max(1, visualLines.length);
+        if (newLineCount !== visualLineCount) {
+            setVisualLineCount(newLineCount);
+        }
+    }, [value, visualLineCount]);
     // Determine current working directory
     const currentDir = useMemo(() => {
         const cwd = currentWorkingDirectory || process.cwd();
@@ -204,7 +247,9 @@ export const InputBox = React.memo(({ onSubmit, placeholder = 'Ask anything...',
                 break;
             }
         }
-        if (atPosition === -1) {
+        // Only treat @ as file tag if it's at start of input OR preceded by whitespace
+        // This prevents triggering on things like "rohan@localhost" or "email@domain.com"
+        if (atPosition === -1 || (atPosition > 0 && !/[\s\n]/.test(value[atPosition - 1]))) {
             setFileTagAutocompleteVisible(false);
             setActiveFileTagStart(null);
             return;
@@ -224,6 +269,122 @@ 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
@@ -265,12 +426,27 @@ export const InputBox = React.memo(({ onSubmit, placeholder = 'Ask anything...',
                     setCursorOffset(newValue.length);
                     setSlashAutocompleteVisible(false);
                 }
+                else if (value.startsWith('/chat ')) {
+                    // We're selecting a chat subcommand, keep "/chat " and append the subcommand
+                    const newValue = `/chat ${selected.name} `;
+                    setValue(newValue);
+                    setCursorOffset(newValue.length);
+                    setSlashAutocompleteVisible(false);
+                }
+                else if (value.startsWith('/add-command ') || value.startsWith('/add-command-auto-detect ')) {
+                    // We're selecting an add-command subcommand
+                    const prefix = value.startsWith('/add-command-auto-detect ') ? '/add-command-auto-detect ' : '/add-command ';
+                    const newValue = `${prefix}${selected.name} `;
+                    setValue(newValue);
+                    setCursorOffset(newValue.length);
+                    setSlashAutocompleteVisible(false);
+                }
                 else {
                     // Regular slash command, replace everything
                     const newValue = `/${selected.name} `;
                     setValue(newValue);
                     setCursorOffset(newValue.length);
-                    // Check if this command has subcommands (e.g., /mcp)
+                    // Check if this command has subcommands (e.g., /mcp, /chat, /add-command)
                     // If so, immediately show the subcommand list
                     if (selected.name === 'mcp') {
                         const subcommandMatches = filterCommands('mcp ');
@@ -283,6 +459,28 @@ export const InputBox = React.memo(({ onSubmit, placeholder = 'Ask anything...',
                             setSlashAutocompleteVisible(false);
                         }
                     }
+                    else if (selected.name === 'chat') {
+                        const subcommandMatches = filterCommands('chat ');
+                        if (subcommandMatches.length > 0) {
+                            setSlashAutocompleteCommands(subcommandMatches);
+                            setSlashAutocompleteSelectedIndex(0);
+                            // Keep autocomplete visible for subcommands
+                        }
+                        else {
+                            setSlashAutocompleteVisible(false);
+                        }
+                    }
+                    else if (selected.name === 'add-command' || selected.name === 'add-command-auto-detect') {
+                        const subcommandMatches = filterCommands('add-command ');
+                        if (subcommandMatches.length > 0) {
+                            setSlashAutocompleteCommands(subcommandMatches);
+                            setSlashAutocompleteSelectedIndex(0);
+                            // Keep autocomplete visible for subcommands
+                        }
+                        else {
+                            setSlashAutocompleteVisible(false);
+                        }
+                    }
                     else {
                         setSlashAutocompleteVisible(false);
                     }
@@ -367,6 +565,54 @@ 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);
+                }
+                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);
+                }
+                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
@@ -418,6 +664,32 @@ export const InputBox = React.memo(({ onSubmit, placeholder = 'Ask anything...',
                         setSlashAutocompleteVisible(false);
                     }
                 }
+                else if (newValue.startsWith('/chat ')) {
+                    // Chat subcommands
+                    const fullQuery = newValue.slice(1);
+                    const matches = filterCommands(fullQuery);
+                    if (matches.length > 0) {
+                        setSlashAutocompleteCommands(matches);
+                        setSlashAutocompleteVisible(true);
+                        setSlashAutocompleteSelectedIndex(0);
+                    }
+                    else {
+                        setSlashAutocompleteVisible(false);
+                    }
+                }
+                else if (newValue.startsWith('/add-command ') || newValue.startsWith('/add-command-auto-detect ')) {
+                    // Add-command subcommands
+                    const fullQuery = newValue.slice(1);
+                    const matches = filterCommands(fullQuery);
+                    if (matches.length > 0) {
+                        setSlashAutocompleteCommands(matches);
+                        setSlashAutocompleteVisible(true);
+                        setSlashAutocompleteSelectedIndex(0);
+                    }
+                    else {
+                        setSlashAutocompleteVisible(false);
+                    }
+                }
                 else {
                     setSlashAutocompleteVisible(false);
                 }
@@ -475,6 +747,7 @@ export const InputBox = React.memo(({ onSubmit, placeholder = 'Ask anything...',
             setCursorOffset(value.length);
             return;
         }
+        // Note: Clipboard images are handled via #image command detection effect
         // DELETE CHAR - Only runs if Delete Word did NOT trigger
         // Triggers on:
         // 1. Backspace or Delete key flag is present
@@ -532,6 +805,32 @@ export const InputBox = React.memo(({ onSubmit, placeholder = 'Ask anything...',
                     setSlashAutocompleteVisible(false);
                 }
             }
+            else if (newValue.startsWith('/chat ')) {
+                // Chat subcommands
+                const fullQuery = newValue.slice(1);
+                const matches = filterCommands(fullQuery);
+                if (matches.length > 0) {
+                    setSlashAutocompleteCommands(matches);
+                    setSlashAutocompleteVisible(true);
+                    setSlashAutocompleteSelectedIndex(0);
+                }
+                else {
+                    setSlashAutocompleteVisible(false);
+                }
+            }
+            else if (newValue.startsWith('/add-command ') || newValue.startsWith('/add-command-auto-detect ')) {
+                // Add-command subcommands
+                const fullQuery = newValue.slice(1);
+                const matches = filterCommands(fullQuery);
+                if (matches.length > 0) {
+                    setSlashAutocompleteCommands(matches);
+                    setSlashAutocompleteVisible(true);
+                    setSlashAutocompleteSelectedIndex(0);
+                }
+                else {
+                    setSlashAutocompleteVisible(false);
+                }
+            }
             else {
                 setSlashAutocompleteVisible(false);
             }
@@ -805,6 +1104,32 @@ export const InputBox = React.memo(({ onSubmit, placeholder = 'Ask anything...',
                     setSlashAutocompleteVisible(false);
                 }
             }
+            else if (newValue.startsWith('/chat ')) {
+                // Chat subcommands (when user types "/chat ")
+                const fullQuery = newValue.slice(1); // Remove leading "/", pass "chat <subquery>" to filterCommands
+                const matches = filterCommands(fullQuery);
+                if (matches.length > 0) {
+                    setSlashAutocompleteCommands(matches);
+                    setSlashAutocompleteVisible(true);
+                    setSlashAutocompleteSelectedIndex(0);
+                }
+                else {
+                    setSlashAutocompleteVisible(false);
+                }
+            }
+            else if (newValue.startsWith('/add-command ') || newValue.startsWith('/add-command-auto-detect ')) {
+                // Add-command subcommands (when user types "/add-command ")
+                const fullQuery = newValue.slice(1); // Remove leading "/", pass "add-command <subquery>" to filterCommands
+                const matches = filterCommands(fullQuery);
+                if (matches.length > 0) {
+                    setSlashAutocompleteCommands(matches);
+                    setSlashAutocompleteVisible(true);
+                    setSlashAutocompleteSelectedIndex(0);
+                }
+                else {
+                    setSlashAutocompleteVisible(false);
+                }
+            }
             else {
                 setSlashAutocompleteVisible(false);
             }
@@ -907,7 +1232,7 @@ export const InputBox = React.memo(({ onSubmit, placeholder = 'Ask anything...',
                     return match;
                 });
             }
-            onSubmit(resolvedValue);
+            onSubmit(resolvedValue, confirmedClipboardImages.length > 0 ? confirmedClipboardImages : undefined);
             setValue('');
             setCursorOffset(0);
             setCompletions([]);
@@ -919,16 +1244,25 @@ export const InputBox = React.memo(({ onSubmit, placeholder = 'Ask anything...',
             setSelection(null);
             setAutocompleteSuggestion(null);
             setConfirmedFileTags([]); // Clear confirmed tags on submit
+            setConfirmedClipboardImages([]); // Clear confirmed clipboard images on submit
         }
     };
     // Rendering Logic with Scrolling
     const renderInput = () => {
-        const lines = value.split('\n');
+        // Get terminal width for visual line calculation
+        // Account for borders (2) + padding (2) + prompt "> " (2) = 6 chars
+        const termWidth = (process.stdout.columns || 80) - 6;
+        // Use getVisualLines to properly calculate wrapped lines
+        const visualLines = getVisualLines(value, termWidth);
+        const logicalLines = value.split('\n');
         // If empty, show placeholder
-        if (lines.length === 1 && lines[0] === '') {
+        if (logicalLines.length === 1 && logicalLines[0] === '') {
             return React.createElement(Text, { color: "gray" }, placeholder);
         }
-        // Calculate cursor line and column
+        // For rendering, we still use logical lines (split by \n) since we render character-by-character
+        // But for height calculation, we use visualLines.length
+        const lines = logicalLines;
+        // Calculate cursor line and column (based on logical lines)
         let currentPos = 0;
         let cursorLine = 0;
         let cursorCol = 0;
@@ -945,47 +1279,90 @@ export const InputBox = React.memo(({ onSubmit, placeholder = 'Ask anything...',
             cursorLine = lines.length - 1;
             cursorCol = lines[lines.length - 1].length;
         }
-        // Calculate visible range
+        // For scrolling, calculate which VISUAL line the cursor is on
+        let cursorVisualLine = 0;
+        for (let i = 0; i < visualLines.length; i++) {
+            if (cursorOffset >= visualLines[i].start && cursorOffset <= visualLines[i].end) {
+                cursorVisualLine = i;
+                break;
+            }
+        }
+        // Handle cursor at very end
+        if (cursorOffset === value.length && visualLines.length > 0) {
+            cursorVisualLine = visualLines.length - 1;
+        }
+        // Calculate visible range using VISUAL lines count for proper scrolling
+        const totalVisualLines = visualLines.length;
         let startLine = 0;
-        if (lines.length > MAX_VISIBLE_LINES) {
-            if (cursorLine < MAX_VISIBLE_LINES) {
+        if (totalVisualLines > MAX_VISIBLE_LINES) {
+            // Use visual line position for scrolling calculation
+            if (cursorVisualLine < MAX_VISIBLE_LINES) {
                 startLine = 0;
             }
             else {
-                startLine = cursorLine - MAX_VISIBLE_LINES + 1;
+                startLine = cursorVisualLine - MAX_VISIBLE_LINES + 1;
             }
         }
-        const endLine = Math.min(startLine + MAX_VISIBLE_LINES, lines.length);
-        const visibleLines = lines.slice(startLine, endLine);
+        const endLine = Math.min(startLine + MAX_VISIBLE_LINES, totalVisualLines);
+        // Get the text content for each visual line
+        const visibleVisualLines = visualLines.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;
+            visibleVisualLines.map((vLine, idx) => {
+                const actualVisualLineIndex = startLine + idx;
+                // Extract the text content for this visual line
+                const lineText = value.slice(vLine.start, vLine.end);
+                const lineStartPos = vLine.start;
+                // Determine if cursor is on this visual line
+                const isCursorLine = cursorOffset >= vLine.start && cursorOffset <= vLine.end;
+                const cursorCol = isCursorLine ? cursorOffset - vLine.start : -1;
+                // Is this the last visual line?
+                const isLastLine = actualVisualLineIndex === totalVisualLines - 1;
                 if (!isActive) {
-                    if (line.length === 0) {
+                    if (lineText.length === 0) {
                         return React.createElement(Text, { key: idx }, " ");
                     }
-                    return React.createElement(Text, { key: idx }, line);
+                    return React.createElement(Text, { key: idx }, lineText);
                 }
                 // Render with selection and cursor
-                const chars = line.split('');
+                const chars = lineText.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);
                     // Check if this character is part of an active file tag (being typed after @)
+                    let activeFileTagEnd = activeFileTagStart !== null ? activeFileTagStart : 0;
+                    if (activeFileTagStart !== null) {
+                        for (let j = activeFileTagStart; j < value.length && j < cursorOffset; j++) {
+                            if (/[\s\n]/.test(value[j])) {
+                                break;
+                            }
+                            activeFileTagEnd = j + 1;
+                        }
+                    }
                     const isInActiveFileTag = activeFileTagStart !== null &&
                         absPos >= activeFileTagStart &&
-                        absPos < cursorOffset;
+                        absPos < activeFileTagEnd;
                     // Check if this character is part of a confirmed file tag
-                    const isInConfirmedFileTag = confirmedFileTags.some(tag => absPos >= tag.start && absPos < tag.end);
+                    let isInConfirmedFileTag = false;
+                    if (!commandMode) {
+                        const fileTagRegex = /(?:^|[\s\n])(@[^\s@]+)/g;
+                        let match;
+                        while ((match = fileTagRegex.exec(value)) !== null) {
+                            const fullMatch = match[0];
+                            const tagContent = match[1];
+                            const tagStart = match.index + (fullMatch.length - tagContent.length);
+                            const tagEnd = tagStart + tagContent.length;
+                            if (activeFileTagStart !== null && tagStart === activeFileTagStart) {
+                                continue;
+                            }
+                            if (absPos >= tagStart && absPos < tagEnd) {
+                                isInConfirmedFileTag = true;
+                                break;
+                            }
+                        }
+                    }
                     const isCursor = isCursorLine && charIdx === cursorCol;
                     if (isCursor) {
                         return React.createElement(Text, { key: charIdx, inverse: true, color: isSelected ? "yellow" : undefined }, char);
@@ -997,10 +1374,21 @@ 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
-                if (isCursorLine && cursorCol === line.length) {
+                if (isCursorLine && cursorCol === lineText.length) {
                     renderedChars.push(React.createElement(Text, { key: "cursor", inverse: true }, " "));
                 }
                 // Render Autocomplete Ghost Text
@@ -1016,7 +1404,7 @@ export const InputBox = React.memo(({ onSubmit, placeholder = 'Ask anything...',
                 }
                 return React.createElement(Text, { key: idx }, renderedChars);
             }),
-            endLine < lines.length && React.createElement(Text, { color: "gray" }, "\u2193 ...")));
+            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%" },
         React.createElement(Box, { marginY: 1, justifyContent: "space-between", width: "100%" },
@@ -1045,6 +1433,7 @@ export const InputBox = React.memo(({ onSubmit, placeholder = 'Ask anything...',
                 !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 }))));
+        fileTagAutocompleteVisible && (React.createElement(FileTagAutocomplete, { files: fileTagSuggestions, selectedIndex: fileTagSelectedIndex })),
+        clipboardAutocompleteVisible && (React.createElement(ClipboardImageAutocomplete, { images: clipboardImages, selectedIndex: clipboardSelectedIndex, isLoading: clipboardLoading }))));
 });
 //# sourceMappingURL=InputBox.js.map