snow-ai 0.1.12 → 0.2.1

package/dist/ui/components/ChatInput.js

@@ -1,15 +1,20 @@
 import React, { useState, useEffect, useRef, useCallback } from 'react';
 import { Box, Text, useStdout, useInput } from 'ink';
 import { TextBuffer } from '../../utils/textBuffer.js';
-import { cpSlice } from '../../utils/textUtils.js';
+import { cpSlice, cpLen } from '../../utils/textUtils.js';
 import CommandPanel from './CommandPanel.js';
 import { executeCommand } from '../../utils/commandExecutor.js';
+import FileList from './FileList.js';
+import { execSync } from 'child_process';
 // Command Definition
 const commands = [
     { name: 'clear', description: 'Clear chat context and conversation history' },
-    { name: 'agents', description: 'Manage agent configurations' }
+    { name: 'resume', description: 'Resume a conversation' },
+    { name: 'mcp', description: 'Show Model Context Protocol services and tools' },
+    { name: 'yolo', description: 'Toggle unattended mode (auto-approve all tools)' },
+    { name: 'init', description: 'Analyze project and generate/update SNOW.md documentation' }
 ];
-export default function ChatInput({ onSubmit, onCommand, placeholder = 'Type your message...', disabled = false }) {
+export default function ChatInput({ onSubmit, onCommand, placeholder = 'Type your message...', disabled = false, chatHistory = [], onHistorySelect, yoloMode = false, contextUsage }) {
     const { stdout } = useStdout();
     const terminalWidth = stdout?.columns || 80;
     const uiOverhead = 8;
@@ -23,6 +28,32 @@ export default function ChatInput({ onSubmit, onCommand, placeholder = 'Type you
     // Command panel state
     const [showCommands, setShowCommands] = useState(false);
     const [commandSelectedIndex, setCommandSelectedIndex] = useState(0);
+    // File picker state
+    const [showFilePicker, setShowFilePicker] = useState(false);
+    const [fileSelectedIndex, setFileSelectedIndex] = useState(0);
+    const [fileQuery, setFileQuery] = useState('');
+    const [atSymbolPosition, setAtSymbolPosition] = useState(-1);
+    const [filteredFileCount, setFilteredFileCount] = useState(0);
+    // Refs
+    const fileListRef = useRef(null);
+    // History navigation state
+    const [showHistoryMenu, setShowHistoryMenu] = useState(false);
+    const [historySelectedIndex, setHistorySelectedIndex] = useState(0);
+    const [escapeKeyCount, setEscapeKeyCount] = useState(0);
+    const escapeKeyTimer = useRef(null);
+    // Get user messages from chat history for navigation
+    const getUserMessages = useCallback(() => {
+        const userMessages = chatHistory
+            .map((msg, index) => ({ ...msg, originalIndex: index }))
+            .filter(msg => msg.role === 'user' && msg.content.trim());
+        // Keep original order (oldest first, newest last) and map with display numbers
+        return userMessages
+            .map((msg, index) => ({
+            label: `${index + 1}. ${msg.content.slice(0, 50)}${msg.content.length > 50 ? '...' : ''}`,
+            value: msg.originalIndex.toString(),
+            infoText: msg.content
+        }));
+    }, [chatHistory]);
     // Get filtered commands based on current input
     const getFilteredCommands = useCallback(() => {
         const text = buffer.getFullText();
@@ -43,15 +74,92 @@ export default function ChatInput({ onSubmit, onCommand, placeholder = 'Type you
             setCommandSelectedIndex(0);
         }
     }, []);
+    // Update file picker state
+    const updateFilePickerState = useCallback((text, cursorPos) => {
+        if (!text.includes('@')) {
+            if (showFilePicker) {
+                setShowFilePicker(false);
+                setFileSelectedIndex(0);
+                setFileQuery('');
+                setAtSymbolPosition(-1);
+            }
+            return;
+        }
+        // Find the last '@' symbol before the cursor
+        const beforeCursor = text.slice(0, cursorPos);
+        const lastAtIndex = beforeCursor.lastIndexOf('@');
+        if (lastAtIndex !== -1) {
+            // Check if there's no space between '@' and cursor
+            const afterAt = beforeCursor.slice(lastAtIndex + 1);
+            if (!afterAt.includes(' ') && !afterAt.includes('\n')) {
+                if (!showFilePicker || fileQuery !== afterAt || atSymbolPosition !== lastAtIndex) {
+                    setShowFilePicker(true);
+                    setFileSelectedIndex(0);
+                    setFileQuery(afterAt);
+                    setAtSymbolPosition(lastAtIndex);
+                }
+                return;
+            }
+        }
+        // Hide file picker if no valid @ context found
+        if (showFilePicker) {
+            setShowFilePicker(false);
+            setFileSelectedIndex(0);
+            setFileQuery('');
+            setAtSymbolPosition(-1);
+        }
+    }, [showFilePicker, fileQuery, atSymbolPosition]);
+    // Force immediate state update for critical operations like backspace
+    const forceStateUpdate = useCallback(() => {
+        const text = buffer.getFullText();
+        const cursorPos = buffer.getCursorPosition();
+        updateFilePickerState(text, cursorPos);
+        updateCommandPanelState(text);
+        forceUpdate({});
+    }, [buffer, updateFilePickerState, updateCommandPanelState]);
     // Force re-render when buffer changes
     const triggerUpdate = useCallback(() => {
         const now = Date.now();
-        // Avoid too frequent updates
-        if (now - lastUpdateTime.current > 16) { // ~60fps limit
-            lastUpdateTime.current = now;
-            forceUpdate({});
+        lastUpdateTime.current = now;
+        forceUpdate({});
+    }, []);
+    // Handle file selection
+    const handleFileSelect = useCallback(async (filePath) => {
+        if (atSymbolPosition !== -1) {
+            const text = buffer.getFullText();
+            const cursorPos = buffer.getCursorPosition();
+            // Replace @query with @filePath + space
+            const beforeAt = text.slice(0, atSymbolPosition);
+            const afterCursor = text.slice(cursorPos);
+            const newText = beforeAt + '@' + filePath + ' ' + afterCursor;
+            // Set the new text and position cursor after the inserted file path + space
+            buffer.setText(newText);
+            // Calculate cursor position after the inserted file path + space
+            // Reset cursor to beginning, then move to correct position
+            for (let i = 0; i < atSymbolPosition + filePath.length + 2; i++) { // +2 for @ and space
+                if (i < buffer.getFullText().length) {
+                    buffer.moveRight();
+                }
+            }
+            setShowFilePicker(false);
+            setFileSelectedIndex(0);
+            setFileQuery('');
+            setAtSymbolPosition(-1);
+            triggerUpdate();
         }
+    }, [atSymbolPosition, buffer, triggerUpdate]);
+    // Handle filtered file count change
+    const handleFilteredCountChange = useCallback((count) => {
+        setFilteredFileCount(count);
     }, []);
+    // Force full re-render when file picker visibility changes to prevent artifacts
+    useEffect(() => {
+        // Use a small delay to ensure the component tree has updated
+        const timer = setTimeout(() => {
+            forceUpdate({});
+        }, 10);
+        return () => clearTimeout(timer);
+    }, [showFilePicker]);
     // Update buffer viewport when terminal width changes
     useEffect(() => {
         const newViewport = {
@@ -61,18 +169,183 @@ export default function ChatInput({ onSubmit, onCommand, placeholder = 'Type you
         buffer.updateViewport(newViewport);
         triggerUpdate();
     }, [terminalWidth, buffer, triggerUpdate]);
+    // Track paste detection
+    const inputBuffer = useRef('');
+    const inputTimer = useRef(null);
     // Handle input using useInput hook instead of raw stdin
     useInput((input, key) => {
         if (disabled)
             return;
+        // Debug: Log key presses
+        // console.error('Input:', JSON.stringify(input), 'Key:', JSON.stringify(key));
+        // Handle escape key for double-ESC history navigation
+        if (key.escape) {
+            // Close file picker if open
+            if (showFilePicker) {
+                setShowFilePicker(false);
+                setFileSelectedIndex(0);
+                setFileQuery('');
+                setAtSymbolPosition(-1);
+                return;
+            }
+            // Don't interfere with existing ESC behavior if in command panel
+            if (showCommands) {
+                setShowCommands(false);
+                setCommandSelectedIndex(0);
+                return;
+            }
+            // Handle history navigation
+            if (showHistoryMenu) {
+                setShowHistoryMenu(false);
+                return;
+            }
+            // Count escape key presses for double-ESC detection
+            setEscapeKeyCount(prev => prev + 1);
+            // Clear any existing timer
+            if (escapeKeyTimer.current) {
+                clearTimeout(escapeKeyTimer.current);
+            }
+            // Set timer to reset count after 500ms
+            escapeKeyTimer.current = setTimeout(() => {
+                setEscapeKeyCount(0);
+            }, 500);
+            // Check for double escape
+            if (escapeKeyCount >= 1) { // This will be 2 after increment
+                const userMessages = getUserMessages();
+                if (userMessages.length > 0) {
+                    setShowHistoryMenu(true);
+                    setHistorySelectedIndex(0); // Reset selection to first item
+                    setEscapeKeyCount(0);
+                    if (escapeKeyTimer.current) {
+                        clearTimeout(escapeKeyTimer.current);
+                        escapeKeyTimer.current = null;
+                    }
+                }
+            }
+            return;
+        }
+        // Handle history menu navigation
+        if (showHistoryMenu) {
+            const userMessages = getUserMessages();
+            // Up arrow in history menu
+            if (key.upArrow) {
+                setHistorySelectedIndex(prev => Math.max(0, prev - 1));
+                return;
+            }
+            // Down arrow in history menu
+            if (key.downArrow) {
+                const maxIndex = Math.max(0, userMessages.length - 1);
+                setHistorySelectedIndex(prev => Math.min(maxIndex, prev + 1));
+                return;
+            }
+            // Enter - select history item
+            if (key.return) {
+                if (userMessages.length > 0 && historySelectedIndex < userMessages.length) {
+                    const selectedMessage = userMessages[historySelectedIndex];
+                    if (selectedMessage) {
+                        handleHistorySelect(selectedMessage.value);
+                    }
+                }
+                return;
+            }
+            // For any other key in history menu, just return to prevent interference
+            return;
+        }
+        // Alt+V / Option+V - Paste from clipboard (including images)
+        if (key.meta && input === 'v') {
+            try {
+                // Try to read image from clipboard using PowerShell (Windows)
+                if (process.platform === 'win32') {
+                    try {
+                        const psScript = `Add-Type -AssemblyName System.Windows.Forms; Add-Type -AssemblyName System.Drawing; $clipboard = [System.Windows.Forms.Clipboard]::GetImage(); if ($clipboard -ne $null) { $ms = New-Object System.IO.MemoryStream; $clipboard.Save($ms, [System.Drawing.Imaging.ImageFormat]::Png); $bytes = $ms.ToArray(); $ms.Close(); [Convert]::ToBase64String($bytes) }`;
+                        const base64 = execSync(`powershell -Command "${psScript}"`, {
+                            encoding: 'utf-8',
+                            timeout: 5000
+                        }).trim();
+                        if (base64 && base64.length > 100) {
+                            const dataUrl = `data:image/png;base64,${base64}`;
+                            buffer.insertImage(dataUrl, 'image/png');
+                            const text = buffer.getFullText();
+                            const cursorPos = buffer.getCursorPosition();
+                            updateCommandPanelState(text);
+                            updateFilePickerState(text, cursorPos);
+                            triggerUpdate();
+                            return;
+                        }
+                    }
+                    catch (imgError) {
+                        // No image in clipboard or error, fall through to text
+                    }
+                }
+                // If no image, try to read text from clipboard
+                try {
+                    let clipboardText = '';
+                    if (process.platform === 'win32') {
+                        clipboardText = execSync('powershell -Command "Get-Clipboard"', {
+                            encoding: 'utf-8',
+                            timeout: 2000
+                        }).trim();
+                    }
+                    else if (process.platform === 'darwin') {
+                        clipboardText = execSync('pbpaste', {
+                            encoding: 'utf-8',
+                            timeout: 2000
+                        }).trim();
+                    }
+                    else {
+                        clipboardText = execSync('xclip -selection clipboard -o', {
+                            encoding: 'utf-8',
+                            timeout: 2000
+                        }).trim();
+                    }
+                    if (clipboardText) {
+                        buffer.insert(clipboardText);
+                        const fullText = buffer.getFullText();
+                        const cursorPos = buffer.getCursorPosition();
+                        updateCommandPanelState(fullText);
+                        updateFilePickerState(fullText, cursorPos);
+                        triggerUpdate();
+                    }
+                }
+                catch (textError) {
+                    console.error('Failed to read text from clipboard:', textError);
+                }
+            }
+            catch (error) {
+                console.error('Failed to read from clipboard:', error);
+            }
+            return;
+        }
         // Backspace
         if (key.backspace || key.delete) {
             buffer.backspace();
-            const text = buffer.getFullText();
-            updateCommandPanelState(text);
-            triggerUpdate();
+            forceStateUpdate();
             return;
         }
+        // Handle file picker navigation
+        if (showFilePicker) {
+            // Up arrow in file picker
+            if (key.upArrow) {
+                setFileSelectedIndex(prev => Math.max(0, prev - 1));
+                return;
+            }
+            // Down arrow in file picker
+            if (key.downArrow) {
+                const maxIndex = Math.max(0, filteredFileCount - 1);
+                setFileSelectedIndex(prev => Math.min(maxIndex, prev + 1));
+                return;
+            }
+            // Tab or Enter - select file
+            if (key.tab || key.return) {
+                if (filteredFileCount > 0 && fileSelectedIndex < filteredFileCount) {
+                    const selectedFile = fileListRef.current?.getSelectedFile();
+                    if (selectedFile) {
+                        handleFileSelect(selectedFile);
+                    }
+                }
+                return;
+            }
+        }
         // Handle command panel navigation
         if (showCommands) {
             const filteredCommands = getFilteredCommands();
@@ -112,95 +385,208 @@ export default function ChatInput({ onSubmit, onCommand, placeholder = 'Type you
         if (key.return) {
             const message = buffer.getFullText().trim();
             if (message) {
+                // 获取图片数据
+                const images = buffer.getImages().map(img => ({
+                    data: img.data,
+                    mimeType: img.mimeType
+                }));
                 buffer.setText('');
                 forceUpdate({});
-                onSubmit(message);
+                onSubmit(message, images.length > 0 ? images : undefined);
             }
             return;
         }
         // Arrow keys for cursor movement
         if (key.leftArrow) {
             buffer.moveLeft();
+            const text = buffer.getFullText();
+            const cursorPos = buffer.getCursorPosition();
+            updateFilePickerState(text, cursorPos);
             triggerUpdate();
             return;
         }
         if (key.rightArrow) {
             buffer.moveRight();
+            const text = buffer.getFullText();
+            const cursorPos = buffer.getCursorPosition();
+            updateFilePickerState(text, cursorPos);
             triggerUpdate();
             return;
         }
-        if (key.upArrow && !showCommands) {
+        if (key.upArrow && !showCommands && !showFilePicker) {
             buffer.moveUp();
+            const text = buffer.getFullText();
+            const cursorPos = buffer.getCursorPosition();
+            updateFilePickerState(text, cursorPos);
             triggerUpdate();
             return;
         }
-        if (key.downArrow && !showCommands) {
+        if (key.downArrow && !showCommands && !showFilePicker) {
             buffer.moveDown();
+            const text = buffer.getFullText();
+            const cursorPos = buffer.getCursorPosition();
+            updateFilePickerState(text, cursorPos);
             triggerUpdate();
             return;
         }
         // Regular character input
         if (input && !key.ctrl && !key.meta && !key.escape) {
-            buffer.insert(input);
-            const text = buffer.getFullText();
-            updateCommandPanelState(text);
-            triggerUpdate();
-        }
-    });
-    // Handle paste events - useInput should handle paste automatically
-    // but we may need to handle large pastes specially
-    useEffect(() => {
-        const handlePaste = (event) => {
-            if (event.clipboardData) {
-                const pastedText = event.clipboardData.getData('text');
-                if (pastedText && pastedText.length > 0) {
-                    // Let TextBuffer handle the paste processing
-                    buffer.insert(pastedText);
+            // Accumulate input for paste detection
+            inputBuffer.current += input;
+            // Clear existing timer
+            if (inputTimer.current) {
+                clearTimeout(inputTimer.current);
+            }
+            // Set timer to process accumulated input
+            inputTimer.current = setTimeout(() => {
+                const accumulated = inputBuffer.current;
+                inputBuffer.current = '';
+                // If we accumulated input, it's likely a paste
+                if (accumulated) {
+                    buffer.insert(accumulated);
                     const text = buffer.getFullText();
+                    const cursorPos = buffer.getCursorPosition();
                     updateCommandPanelState(text);
+                    updateFilePickerState(text, cursorPos);
                     triggerUpdate();
                 }
-            }
-        };
-        // Note: This might not work in all terminal environments
-        // but the useInput hook should handle most paste scenarios
-        if (typeof window !== 'undefined') {
-            window.addEventListener('paste', handlePaste);
-            return () => window.removeEventListener('paste', handlePaste);
-        }
-        return undefined;
-    }, [buffer, updateCommandPanelState, triggerUpdate]);
-    const visualLines = buffer.viewportVisualLines;
-    const [cursorRow, cursorCol] = buffer.visualCursor;
+            }, 10); // Short delay to accumulate rapid input
+        }
+    });
+    // Handle history selection
+    const handleHistorySelect = useCallback((value) => {
+        const selectedIndex = parseInt(value, 10);
+        const selectedMessage = chatHistory[selectedIndex];
+        if (selectedMessage && onHistorySelect) {
+            // Put the message content in the input buffer
+            buffer.setText(selectedMessage.content);
+            setShowHistoryMenu(false);
+            triggerUpdate();
+            onHistorySelect(selectedIndex, selectedMessage.content);
+        }
+    }, [chatHistory, onHistorySelect, buffer, triggerUpdate]);
     // Render content with cursor and paste placeholders
     const renderContent = useCallback(() => {
         if (buffer.text.length > 0) {
-            return visualLines.map((line, index) => (React.createElement(Box, { key: `line-${index}` },
-                React.createElement(Text, null, index === cursorRow ? (React.createElement(React.Fragment, null,
-                    cpSlice(line, 0, cursorCol),
+            // 使用buffer的内部文本而不是getFullText()，这样可以显示占位符
+            const displayText = buffer.text;
+            const cursorPos = buffer.getCursorPosition();
+            // 检查是否包含粘贴占位符或图片占位符并高亮显示
+            const hasPastePlaceholder = displayText.includes('[Paste ') && displayText.includes(' characters #');
+            const hasImagePlaceholder = displayText.includes('[image #');
+            if (hasPastePlaceholder || hasImagePlaceholder) {
+                const atCursor = (() => {
+                    const charInfo = buffer.getCharAtCursor();
+                    return charInfo.char === '\n' ? ' ' : charInfo.char;
+                })();
+                // 分割文本并高亮占位符（粘贴和图片）
+                const parts = displayText.split(/(\[Paste \d+ characters #\d+\]|\[image #\d+\])/);
+                let processedLength = 0;
+                let cursorRendered = false;
+                const elements = parts.map((part, partIndex) => {
+                    const isPastePlaceholder = part.match(/^\[Paste \d+ characters #\d+\]$/);
+                    const isImagePlaceholder = part.match(/^\[image #\d+\]$/);
+                    const isPlaceholder = isPastePlaceholder || isImagePlaceholder;
+                    const partStart = processedLength;
+                    const partEnd = processedLength + cpLen(part);
+                    processedLength = partEnd;
+                    // 检查光标是否在这个部分
+                    if (cursorPos >= partStart && cursorPos < partEnd) {
+                        cursorRendered = true;
+                        const beforeCursorInPart = cpSlice(part, 0, cursorPos - partStart);
+                        const afterCursorInPart = cpSlice(part, cursorPos - partStart + 1);
+                        return (React.createElement(React.Fragment, { key: partIndex }, isPlaceholder ? (React.createElement(Text, { color: isImagePlaceholder ? "magenta" : "cyan", dimColor: true },
+                            beforeCursorInPart,
+                            React.createElement(Text, { backgroundColor: "white", color: "black" }, atCursor),
+                            afterCursorInPart)) : (React.createElement(React.Fragment, null,
+                            beforeCursorInPart,
+                            React.createElement(Text, { backgroundColor: "white", color: "black" }, atCursor),
+                            afterCursorInPart))));
+                    }
+                    else {
+                        return isPlaceholder ? (React.createElement(Text, { key: partIndex, color: isImagePlaceholder ? "magenta" : "cyan", dimColor: true }, part)) : (React.createElement(Text, { key: partIndex }, part));
+                    }
+                });
+                return (React.createElement(Text, null,
+                    elements,
+                    !cursorRendered && (React.createElement(Text, { backgroundColor: "white", color: "black" }, ' '))));
+            }
+            else {
+                // 普通文本渲染
+                return (React.createElement(Text, null,
+                    cpSlice(displayText, 0, cursorPos),
                     React.createElement(Text, { backgroundColor: "white", color: "black" }, (() => {
                         const charInfo = buffer.getCharAtCursor();
                         return charInfo.char === '\n' ? ' ' : charInfo.char;
                     })()),
-                    cpSlice(line, cursorCol + 1))) : (
-                // Check for paste placeholders and highlight them
-                line.includes('[Paste ') && line.includes(' line #') ? (React.createElement(Text, null, line.split(/(\[Paste \d+ line #\d+\])/).map((part, partIndex) => part.match(/^\[Paste \d+ line #\d+\]$/) ? (React.createElement(Text, { key: partIndex, color: "cyan", dimColor: true }, part)) : (React.createElement(Text, { key: partIndex }, part))))) : (line || ' '))))));
+                    cpSlice(displayText, cursorPos + 1)));
+            }
         }
         else {
-            return (React.createElement(Box, null,
+            return (React.createElement(React.Fragment, null,
                 React.createElement(Text, { backgroundColor: disabled ? "gray" : "white", color: disabled ? "darkGray" : "black" }, ' '),
                 React.createElement(Text, { color: disabled ? "darkGray" : "gray", dimColor: true }, disabled ? 'Waiting for response...' : placeholder)));
         }
-    }, [visualLines, cursorRow, cursorCol, buffer, placeholder]);
-    return (React.createElement(Box, { flexDirection: "column", width: "100%" },
-        React.createElement(Box, { flexDirection: "row", borderStyle: "round", borderColor: "gray", paddingX: 1, paddingY: 0, width: "100%" },
-            React.createElement(Text, { color: "cyan", bold: true },
-                "\u27A3",
-                ' '),
-            React.createElement(Box, { flexDirection: "column", flexGrow: 1 }, renderContent())),
-        React.createElement(CommandPanel, { commands: getFilteredCommands(), selectedIndex: commandSelectedIndex, query: buffer.getFullText().slice(1), visible: showCommands }),
-        React.createElement(Box, { marginTop: 1 },
-            React.createElement(Text, { color: "gray", dimColor: true }, showCommands && getFilteredCommands().length > 0
-                ? "Type to filter commands"
-                : "Press Ctrl+C twice to exit"))));
+    }, [buffer, disabled, placeholder]);
+    return (React.createElement(Box, { flexDirection: "column", marginX: 1, key: `input-${showFilePicker ? 'picker' : 'normal'}` },
+        showHistoryMenu && (React.createElement(Box, { flexDirection: "column", marginBottom: 1, borderStyle: "round", borderColor: "#A9C13E", padding: 1 },
+            React.createElement(Box, { marginBottom: 1 },
+                React.createElement(Text, { color: "cyan" }, "Use \u2191\u2193 keys to navigate, press Enter to select:")),
+            React.createElement(Box, { flexDirection: "column" },
+                (() => {
+                    const userMessages = getUserMessages();
+                    const maxHeight = 8;
+                    const visibleMessages = userMessages.slice(0, maxHeight);
+                    return visibleMessages.map((message, index) => (React.createElement(Box, { key: message.value },
+                        React.createElement(Text, { color: index === historySelectedIndex ? 'green' : 'white', bold: true },
+                            index === historySelectedIndex ? '➣  ' : '  ',
+                            message.label))));
+                })(),
+                getUserMessages().length > 8 && (React.createElement(Box, null,
+                    React.createElement(Text, { color: "gray", dimColor: true },
+                        "... and ",
+                        getUserMessages().length - 8,
+                        " more items")))))),
+        !showHistoryMenu && (React.createElement(React.Fragment, null,
+            React.createElement(Box, { flexDirection: "row", borderStyle: "round", borderColor: "gray", paddingX: 1, paddingY: 0, flexGrow: 1 },
+                React.createElement(Text, { color: "cyan", bold: true },
+                    "\u27A3",
+                    ' '),
+                React.createElement(Box, { flexGrow: 1 }, renderContent())),
+            React.createElement(CommandPanel, { commands: getFilteredCommands(), selectedIndex: commandSelectedIndex, query: buffer.getFullText().slice(1), visible: showCommands }),
+            React.createElement(Box, null,
+                React.createElement(FileList, { ref: fileListRef, query: fileQuery, selectedIndex: fileSelectedIndex, visible: showFilePicker, maxItems: 10, rootPath: process.cwd(), onFilteredCountChange: handleFilteredCountChange })),
+            yoloMode && (React.createElement(Box, { marginTop: 1, paddingX: 1 },
+                React.createElement(Text, { color: "yellow", dimColor: true }, "\u2741  YOLO MODE ACTIVE - All tools will be auto-approved without confirmation"))),
+            contextUsage && (React.createElement(Box, { marginTop: 1, paddingX: 1 },
+                React.createElement(Text, { color: "gray", dimColor: true }, (() => {
+                    const percentage = Math.min(100, (contextUsage.inputTokens / contextUsage.maxContextTokens) * 100);
+                    let color;
+                    if (percentage < 50)
+                        color = 'green';
+                    else if (percentage < 75)
+                        color = 'yellow';
+                    else if (percentage < 90)
+                        color = 'orange';
+                    else
+                        color = 'red';
+                    const formatNumber = (num) => {
+                        if (num >= 1000)
+                            return `${(num / 1000).toFixed(1)}k`;
+                        return num.toString();
+                    };
+                    return (React.createElement(React.Fragment, null,
+                        React.createElement(Text, { color: color },
+                            percentage.toFixed(1),
+                            "%"),
+                        React.createElement(Text, null, " \u00B7 "),
+                        React.createElement(Text, { color: color }, formatNumber(contextUsage.inputTokens)),
+                        React.createElement(Text, null, " tokens")));
+                })()))),
+            React.createElement(Box, { marginTop: 1 },
+                React.createElement(Text, { color: "gray", dimColor: true }, showCommands && getFilteredCommands().length > 0
+                    ? "Type to filter commands"
+                    : showFilePicker
+                        ? "Type to filter files • Tab/Enter to select • ESC to cancel"
+                        : "Press Ctrl+C twice to exit • Alt+V to paste images • Type '@' for files • Type '/' for commands"))))));
 }

package/dist/ui/components/CommandPanel.d.ts

@@ -9,5 +9,5 @@ interface Props {
     query: string;
     visible: boolean;
 }
-export default function CommandPanel({ commands, selectedIndex, query, visible }: Props): React.JSX.Element | null;
-export {};
+declare const CommandPanel: React.MemoExoticComponent<({ commands, selectedIndex, query, visible }: Props) => React.JSX.Element | null>;
+export default CommandPanel;

package/dist/ui/components/CommandPanel.js

@@ -1,6 +1,6 @@
-import React from 'react';
+import React, { memo } from 'react';
 import { Box, Text } from 'ink';
-export default function CommandPanel({ commands, selectedIndex, query, visible }) {
+const CommandPanel = memo(({ commands, selectedIndex, query, visible }) => {
     // Don't show panel if not visible or no commands found
     if (!visible || commands.length === 0) {
         return null;
@@ -12,11 +12,15 @@ export default function CommandPanel({ commands, selectedIndex, query, visible }
                     React.createElement(Text, { color: "yellow", bold: true },
                         "Available Commands ",
                         query && `(${commands.length} matches)`)),
-                commands.map((command, index) => (React.createElement(Box, { key: command.name, flexDirection: "row", width: "100%" },
-                    React.createElement(Text, { color: index === selectedIndex ? "green" : "gray" },
+                commands.map((command, index) => (React.createElement(Box, { key: command.name, flexDirection: "column", width: "100%" },
+                    React.createElement(Text, { color: index === selectedIndex ? "green" : "gray", bold: true },
                         index === selectedIndex ? "➣ " : "  ",
                         "/",
                         command.name),
-                    React.createElement(Box, { marginLeft: 2 },
-                        React.createElement(Text, { color: index === selectedIndex ? "green" : "gray", dimColor: true }, command.description)))))))));
-}
+                    React.createElement(Box, { marginLeft: 3 },
+                        React.createElement(Text, { color: index === selectedIndex ? "green" : "gray", dimColor: true },
+                            "\u2514\u2500 ",
+                            command.description)))))))));
+});
+CommandPanel.displayName = 'CommandPanel';
+export default CommandPanel;

package/dist/ui/components/DiffViewer.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface Props {
+    oldContent?: string;
+    newContent: string;
+    filename?: string;
+    maxLines?: number;
+}
+export default function DiffViewer({ oldContent, newContent, filename, maxLines }: Props): React.JSX.Element;
+export {};