centaurus-cli 2.7.2 → 2.8.0

package/dist/ui/components/App.js

@@ -11,12 +11,13 @@ import { AgentTimer } from './AgentTimer.js';
 import { SelectPrompt } from './SelectPrompt.js';
 import { ConfirmPrompt } from './ConfirmPrompt.js';
 import { KeyboardHelp } from './KeyboardHelp.js';
-import { CodeBlock } from './CodeBlock.js';
+import { FileCreationPreview } from './FileCreationPreview.js';
 import { DiffViewer } from './DiffViewer.js';
 import { PasswordPrompt } from './PasswordPrompt.js';
 import { VersionUpdatePrompt } from './VersionUpdatePrompt.js';
 import { InteractiveShell } from './InteractiveShell.js';
 import { checkForUpdates } from '../../utils/version-checker.js';
+import { runInteractiveEditor, runWSLEditor, runDockerEditor, runSSHEditor } from '../../utils/editor-utils.js';
 // Banner item with stable timestamp - created once outside component
 const BANNER_ITEM = { id: '__banner__', role: '__banner__', content: '', timestamp: new Date(0) };
 const MessageList = React.memo(({ history, current, showBanner }) => {
@@ -31,13 +32,22 @@ const MessageList = React.memo(({ history, current, showBanner }) => {
             }
             return React.createElement(MessageDisplay, { key: item.id, message: item });
         }),
-        current && (current.role === 'assistant' && current.shouldStream !== false ? (React.createElement(StreamingMessageDisplay, { key: current.id, message: current })) : (React.createElement(MessageDisplay, { key: current.id, message: current })))));
+        current && !history.some(msg => msg.id === current.id) && (current.role === 'assistant' && current.shouldStream !== false ? (React.createElement(StreamingMessageDisplay, { key: current.id, message: current })) : (React.createElement(MessageDisplay, { key: current.id, message: current })))));
 }, (prevProps, nextProps) => {
     // Custom comparison to prevent unnecessary re-renders
     // Only re-render if history length changed, current message changed, or showBanner changed
+    // IMPORTANT: Also check thoughts for thinking updates
+    const prevThoughts = prevProps.current?.thoughts;
+    const nextThoughts = nextProps.current?.thoughts;
+    const thoughtsEqual = prevThoughts === nextThoughts ||
+        (prevThoughts && nextThoughts &&
+            prevThoughts.length === nextThoughts.length &&
+            prevThoughts.every((t, i) => t === nextThoughts[i]));
     return (prevProps.history.length === nextProps.history.length &&
         prevProps.current?.id === nextProps.current?.id &&
         prevProps.current?.content === nextProps.current?.content &&
+        prevProps.current?.thinkingDuration === nextProps.current?.thinkingDuration &&
+        thoughtsEqual &&
         prevProps.showBanner === nextProps.showBanner);
 });
 const ApprovalSection = React.memo(({ approvalRequest, onApprove }) => {
@@ -45,14 +55,14 @@ const ApprovalSection = React.memo(({ approvalRequest, onApprove }) => {
     const handleYes = React.useCallback(() => onApprove(true), [onApprove]);
     const handleNo = React.useCallback(() => onApprove(false), [onApprove]);
     return (React.createElement(Box, { flexDirection: "column", marginY: 1 },
-        approvalRequest.preview && approvalRequest.preview.type === 'code' && (React.createElement(CodeBlock, { code: approvalRequest.preview.content, language: approvalRequest.preview.language, title: "File Preview" })),
+        approvalRequest.preview && approvalRequest.preview.type === 'code' && (React.createElement(FileCreationPreview, { content: approvalRequest.preview.content, filePath: approvalRequest.operationDetails?.file_path || 'New File' })),
         approvalRequest.preview && approvalRequest.preview.type === 'diff' && (React.createElement(DiffViewer, { diff: approvalRequest.preview.content, filePath: 'Preview', fullDiff: approvalRequest.preview.fullDiff })),
         React.createElement(ConfirmPrompt, { message: approvalRequest.message, onYes: handleYes, onNo: handleNo })));
 }, (prevProps, nextProps) => {
     // Only re-render if the approval request message changes
     return prevProps.approvalRequest.message === nextProps.approvalRequest.message;
 });
-export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode, onResponseReceived, onResponseStream, onThoughtStream, onThoughtComplete, onPickerSetup, onPickerSelection, onToolExecutionUpdate, onToolApprovalRequest, onToolStreamingOutput, onPlanModeChange, onPlanApprovalRequest, onCommandModeChange, onToggleCommandMode, onCwdChange, onModelChange, onSubshellContextChange, onPasswordRequest, onShellInput }) => {
+export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode, onResponseReceived, onDirectMessage, onResponseStream, onThoughtStream, onThoughtComplete, onPickerSetup, onPickerSelection, onToolExecutionUpdate, onToolApprovalRequest, onToolStreamingOutput, onPlanModeChange, onPlanApprovalRequest, onCommandModeChange, onToggleCommandMode, onCwdChange, onModelChange, onSubshellContextChange, onPasswordRequest, onShellInput, onShellSignal, onKillProcess, onInteractiveEditorMode }) => {
     const { exit } = useApp();
     const autoAcceptRef = React.useRef(false);
     // Helper to clear screen
@@ -109,6 +119,7 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
         currentTokens: 0,
         maxTokens: getMaxTokensForModel(initialModel || 'gemini-2.5-flash'),
         shellState: undefined,
+        isInteractiveEditorMode: false,
         pickerOptions: undefined,
         approvalRequest: undefined,
         planApprovalRequest: undefined,
@@ -289,6 +300,32 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
             });
         });
     }, [onThoughtComplete]);
+    // Set up callback for direct messages (slash commands) - add directly to history
+    React.useEffect(() => {
+        onDirectMessage((message) => {
+            setState(prev => {
+                // Move current message to history if exists
+                const newHistory = prev.currentMessage
+                    ? [...prev.messageHistory, prev.currentMessage]
+                    : prev.messageHistory;
+                // Create system message for slash command response
+                const systemMessage = {
+                    id: `system-${Date.now()}-${Math.random().toString(36).substring(2, 11)}`,
+                    role: 'assistant', // Display as assistant message
+                    content: message,
+                    timestamp: new Date(),
+                    shouldStream: false // Don't stream system messages
+                };
+                return {
+                    ...prev,
+                    messageHistory: [...newHistory, systemMessage],
+                    currentMessage: null,
+                    isLoading: false,
+                    isAiWorking: false
+                };
+            });
+        });
+    }, [onDirectMessage]);
     // Set up callback to receive complete responses (for slash commands and non-streaming responses)
     React.useEffect(() => {
         onResponseReceived((message) => {
@@ -380,6 +417,8 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
             });
         });
     }, [onResponseReceived]);
+    // Ref to track pending shell start (to avoid flickering for fast commands)
+    const pendingShellRef = React.useRef(null);
     // Set up callback to show pickers - only once on mount
     React.useEffect(() => {
         onPickerSetup((options) => {
@@ -395,38 +434,110 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
     // Set up callback for tool execution updates
     React.useEffect(() => {
         onToolExecutionUpdate((update) => {
-            setState(prev => {
-                // Don't add tool messages if we're not on chat screen
-                if (prev.screen !== 'chat') {
-                    return prev;
+            // Special handling for execute_command
+            if (update.toolName === 'execute_command') {
+                try {
+                    fs.appendFileSync('cli_frontend_logs.txt', `[${new Date().toISOString()}] [App] execute_command update: ${JSON.stringify(update)}\n`);
                 }
-                // Special handling for execute_command - use interactive shell
-                if (update.toolName === 'execute_command') {
-                    try {
-                        fs.appendFileSync('cli_frontend_logs.txt', `[${new Date().toISOString()}] [App] execute_command update: ${JSON.stringify(update)}\n`);
-                    }
-                    catch (e) { }
-                    if (update.status === 'executing') {
-                        const command = update.arguments?.command || update.arguments?.CommandLine || update.arguments?.commandLine || '';
-                        return {
-                            ...prev,
-                            shellState: {
-                                command,
-                                cwd: prev.currentWorkingDirectory,
-                                output: '',
-                                isRunning: true,
-                                exitCode: undefined,
-                                error: undefined,
-                                isFocused: false
-                            },
-                            isLoading: false,
-                            isAiWorking: true
-                        };
+                catch (e) { }
+                // STARTING EXECUTION
+                if (update.status === 'executing') {
+                    const command = update.arguments?.command || update.arguments?.CommandLine || update.arguments?.commandLine || '';
+                    // Start a pending shell with a short delay
+                    // This prevents the UI from flickering for very fast commands (like ls)
+                    // and prevents duplication by allowing us to skip the interactive shell entirely
+                    const timeoutId = setTimeout(() => {
+                        // If this timeout fires, it means the command is taking longer than 50ms
+                        // So we should show the interactive shell
+                        if (pendingShellRef.current) {
+                            const bufferedOutput = pendingShellRef.current.output;
+                            const cmd = pendingShellRef.current.command;
+                            const cwd = pendingShellRef.current.cwd;
+                            pendingShellRef.current = null; // Clear pending state
+                            setState(prev => ({
+                                ...prev,
+                                shellState: {
+                                    command: cmd,
+                                    cwd: cwd,
+                                    output: bufferedOutput,
+                                    isRunning: true,
+                                    exitCode: undefined,
+                                    error: undefined,
+                                    isFocused: false,
+                                    isPty: update.arguments?.isPty || false
+                                },
+                                // IMPORTANT: Always preserve current message by moving it to history first
+                                messageHistory: prev.currentMessage
+                                    ? [...prev.messageHistory, prev.currentMessage]
+                                    : prev.messageHistory,
+                                currentMessage: {
+                                    id: `tool-execute_command-${Date.now()}`,
+                                    role: 'tool',
+                                    content: '',
+                                    timestamp: new Date(),
+                                    toolExecution: { ...update }
+                                },
+                                isLoading: false,
+                                isAiWorking: true
+                            }));
+                        }
+                    }, 50);
+                    pendingShellRef.current = {
+                        timeoutId,
+                        command,
+                        cwd: state.currentWorkingDirectory,
+                        output: ''
+                    };
+                    return;
+                }
+                // COMPLETION / ERROR
+                if (update.status === 'completed' || update.status === 'error') {
+                    // Check if we have a pending shell (fast command)
+                    if (pendingShellRef.current) {
+                        // Command finished VERY fast (within 50ms)
+                        // Clear the timeout so we don't show the interactive shell
+                        clearTimeout(pendingShellRef.current.timeoutId);
+                        const bufferedOutput = pendingShellRef.current.output;
+                        pendingShellRef.current = null;
+                        // Add directly to history
+                        setState(prev => {
+                            const finalOutput = bufferedOutput + (update.result || '');
+                            const errorMsg = update.error;
+                            const shellMessage = {
+                                id: `shell-${Date.now()}`,
+                                role: 'tool',
+                                content: '',
+                                timestamp: new Date(),
+                                toolExecution: {
+                                    toolName: 'execute_command',
+                                    status: update.status,
+                                    result: finalOutput,
+                                    error: errorMsg,
+                                    arguments: update.arguments
+                                }
+                            };
+                            // Move current message to history if exists
+                            const newHistory = prev.currentMessage
+                                ? [...prev.messageHistory, prev.currentMessage]
+                                : prev.messageHistory;
+                            return {
+                                ...prev,
+                                shellState: undefined,
+                                messageHistory: [...newHistory, shellMessage],
+                                currentMessage: null,
+                                isAiWorking: prev.isAiWorking // Preserve existing state
+                            };
+                        });
+                        return;
                     }
-                    else if (update.status === 'completed') {
-                        // Shell completed successfully - add to history as static message
+                    // Normal case: Interactive shell was already shown, now finishing
+                    setState(prev => {
+                        // Don't add tool messages if we're not on chat screen
+                        if (prev.screen !== 'chat') {
+                            return prev;
+                        }
                         const finalOutput = prev.shellState?.output || update.result || '';
-                        // Create a message with the shell execution details
+                        const errorMsg = update.error;
                         const shellMessage = {
                             id: `shell-${Date.now()}`,
                             role: 'tool',
@@ -434,31 +545,7 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
                             timestamp: new Date(),
                             toolExecution: {
                                 toolName: 'execute_command',
-                                status: 'completed',
-                                result: finalOutput,
-                                arguments: update.arguments
-                            }
-                        };
-                        return {
-                            ...prev,
-                            shellState: undefined,
-                            messageHistory: [...prev.messageHistory, shellMessage],
-                            currentMessage: null,
-                            isAiWorking: true
-                        };
-                    }
-                    else if (update.status === 'error') {
-                        // Shell failed - add to history as static error message
-                        const finalOutput = prev.shellState?.output || '';
-                        const errorMsg = update.error || 'Command failed';
-                        const shellMessage = {
-                            id: `shell-${Date.now()}`,
-                            role: 'tool',
-                            content: '',
-                            timestamp: new Date(),
-                            toolExecution: {
-                                toolName: 'execute_command',
-                                status: 'error',
+                                status: update.status,
                                 result: finalOutput,
                                 error: errorMsg,
                                 arguments: update.arguments
@@ -469,10 +556,15 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
                             shellState: undefined,
                             messageHistory: [...prev.messageHistory, shellMessage],
                             currentMessage: null,
-                            isAiWorking: true
+                            isAiWorking: prev.isAiWorking // Preserve existing state
                         };
-                    }
-                    // Early return to prevent fall-through to generic tool handling
+                    });
+                    return;
+                }
+            }
+            setState(prev => {
+                // Don't add tool messages if we're not on chat screen
+                if (prev.screen !== 'chat') {
                     return prev;
                 }
                 const toolMessage = {
@@ -539,8 +631,8 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
             if (autoAcceptRef.current) {
                 return true;
             }
-            // Check if this is a file operation with preview (write_file or edit_file)
-            const isFileOperation = (request.operationType === 'write_file' || request.operationType === 'edit_file') && request.preview;
+            // Check if this is a file operation with preview (write_file, write_to_file, or edit_file)
+            const isFileOperation = (request.operationType === 'write_file' || request.operationType === 'write_to_file' || request.operationType === 'edit_file') && request.preview;
             if (isFileOperation) {
                 // File operations: Clear screen and switch to approval screen (focused view)
                 clearScreen();
@@ -599,26 +691,19 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
     // Set up callback for tool streaming output
     React.useEffect(() => {
         onToolStreamingOutput((update) => {
+            // Handle pending shell buffer
+            if (update.toolName === 'execute_command' && pendingShellRef.current) {
+                pendingShellRef.current.output += update.chunk;
+                return;
+            }
             setState(prev => {
                 // Update shell state if it's an execute_command
                 if (update.toolName === 'execute_command' && prev.shellState) {
-                    const newOutput = prev.shellState.output + update.chunk;
-                    // Clear user input buffer when new output arrives
-                    // This handles cases where:
-                    // 1. Program echoes the input (input appears in output)
-                    // 2. Program outputs a newline (moving to next line)
-                    // 3. Program outputs a new prompt
-                    const shouldClearInput = prev.shellState.userInput && (
-                    // If output contains a newline, clear input (program moved to next line)
-                    update.chunk.includes('\n') ||
-                        // If output contains the user input (program echoed it), clear input
-                        (prev.shellState.userInput && newOutput.includes(prev.shellState.userInput)));
                     return {
                         ...prev,
                         shellState: {
                             ...prev.shellState,
-                            output: newOutput,
-                            userInput: shouldClearInput ? '' : prev.shellState.userInput
+                            output: prev.shellState.output + update.chunk
                         }
                     };
                 }
@@ -738,6 +823,64 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
             });
         });
     }, [clearScreen]);
+    // Set up callback for interactive editor mode (vim, nano, etc.)
+    // Ref to hold the current editor process for cleanup
+    const editorProcessRef = React.useRef(null);
+    React.useEffect(() => {
+        onInteractiveEditorMode((active, command, cwd, remoteContext) => {
+            if (active && command && cwd) {
+                // Enter interactive editor mode
+                setState(prev => ({ ...prev, isInteractiveEditorMode: true }));
+                // Common exit handler for all editor types
+                const handleEditorExit = (exitCode) => {
+                    editorProcessRef.current = null;
+                    // Clear screen before restoring Ink UI
+                    clearScreen();
+                    // Editor exited, restore Ink UI
+                    setState(prev => ({ ...prev, isInteractiveEditorMode: false }));
+                };
+                // Wait a frame for React to process the state change
+                setTimeout(() => {
+                    // Choose appropriate editor runner based on context
+                    if (!remoteContext || remoteContext.type === 'local') {
+                        // Local context: use standard interactive editor
+                        editorProcessRef.current = runInteractiveEditor(command, cwd, handleEditorExit);
+                    }
+                    else if (remoteContext.type === 'wsl') {
+                        // WSL context: use WSL editor with distribution name
+                        const distribution = remoteContext.metadata?.distroName || 'Ubuntu';
+                        editorProcessRef.current = runWSLEditor(distribution, command, cwd, handleEditorExit);
+                    }
+                    else if (remoteContext.type === 'docker') {
+                        // Docker context: use Docker editor with container ID
+                        const containerId = remoteContext.metadata?.containerId || '';
+                        editorProcessRef.current = runDockerEditor(containerId, command, cwd, handleEditorExit);
+                    }
+                    else if (remoteContext.type === 'ssh') {
+                        // SSH context: use SSH editor with client
+                        const sshClient = remoteContext.handler?.client;
+                        if (sshClient) {
+                            editorProcessRef.current = runSSHEditor(sshClient, command, cwd, handleEditorExit);
+                        }
+                        else {
+                            // Fallback if no client available
+                            console.error('SSH client not available for editor mode');
+                            setState(prev => ({ ...prev, isInteractiveEditorMode: false }));
+                        }
+                    }
+                }, 50);
+            }
+            else {
+                // Exit interactive editor mode (cleanup)
+                if (editorProcessRef.current) {
+                    editorProcessRef.current.kill();
+                    editorProcessRef.current = null;
+                }
+                clearScreen();
+                setState(prev => ({ ...prev, isInteractiveEditorMode: false }));
+            }
+        });
+    }, [onInteractiveEditorMode, clearScreen]);
     // Track Ctrl+C presses for double-press exit
     const ctrlCPressedRef = React.useRef(false);
     const ctrlCTimeoutRef = React.useRef(null);
@@ -800,6 +943,11 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
         }
         // Ctrl+C handling - double press to exit
         if (key.ctrl && input === 'c') {
+            // If shell is running, kill it
+            if (state.shellState && state.shellState.isRunning) {
+                onKillProcess();
+                return;
+            }
             // If AI is loading/executing, first Ctrl+C cancels the operation
             if (state.isLoading || state.isAiWorking) {
                 // Cancel the current AI request
@@ -855,7 +1003,7 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
             }, 5000);
             return;
         }
-    });
+    }, { isActive: !state.isInteractiveEditorMode });
     const handleSubmit = useCallback(async (value) => {
         // Trim the value to remove any leading/trailing whitespace or newlines
         const trimmedValue = value.trim();
@@ -985,67 +1133,17 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
             autoAcceptMode: !prev.autoAcceptMode
         }));
     }, []);
+    // If in interactive editor mode, render minimal UI to keep Ink mounted
+    // but don't render any visible content - the editor has the screen
+    if (state.isInteractiveEditorMode) {
+        return React.createElement(Box, null);
+    }
     return (React.createElement(Box, { flexDirection: "column" },
         state.screen === 'chat' && (React.createElement(React.Fragment, null,
             React.createElement(MessageList, { history: state.messageHistory, current: state.currentMessage, showBanner: true }),
-            state.shellState && (React.createElement(InteractiveShell, { command: state.shellState.command, cwd: state.shellState.cwd, isRunning: state.shellState.isRunning, output: state.shellState.output, exitCode: state.shellState.exitCode, error: state.shellState.error, isFocused: state.shellState.isFocused, userInput: state.shellState.userInput, onInput: (input) => {
-                    // ============================================
-                    // LINE-BUFFERED INPUT HANDLING
-                    // ============================================
-                    // Regular characters are buffered locally.
-                    // Complete line is sent when Enter is pressed.
-                    // Special keys (arrows, Ctrl+C, etc.) are sent immediately.
-                    setState(prev => {
-                        if (!prev.shellState)
-                            return prev;
-                        // ============================================
-                        // ENTER - Send complete line to process
-                        // ============================================
-                        if (input.includes('\r\n') || input.includes('\n')) {
-                            // Send to process
-                            onShellInput(input);
-                            // Keep input visible until program responds
-                            return prev;
-                        }
-                        // ============================================
-                        // BACKSPACE - Remove from buffer
-                        // ============================================
-                        if (input === '\x08') {
-                            const currentInput = prev.shellState.userInput || '';
-                            return {
-                                ...prev,
-                                shellState: {
-                                    ...prev.shellState,
-                                    userInput: currentInput.slice(0, -1)
-                                }
-                            };
-                        }
-                        // ============================================
-                        // CONTROL KEYS - Send immediately, don't buffer
-                        // ============================================
-                        if (input.length === 1 && input.charCodeAt(0) < 32 && input !== '\t') {
-                            onShellInput(input);
-                            return prev;
-                        }
-                        // ============================================
-                        // ANSI SEQUENCES - Send immediately, don't buffer
-                        // ============================================
-                        if (input.startsWith('\x1b')) {
-                            onShellInput(input);
-                            return prev;
-                        }
-                        // ============================================
-                        // REGULAR CHARACTERS - Add to buffer only
-                        // ============================================
-                        // Do NOT send to process yet - wait for Enter
-                        return {
-                            ...prev,
-                            shellState: {
-                                ...prev.shellState,
-                                userInput: (prev.shellState.userInput || '') + input
-                            }
-                        };
-                    });
+            state.shellState && (React.createElement(InteractiveShell, { command: state.shellState.command, cwd: state.shellState.cwd, isRunning: state.shellState.isRunning, output: state.shellState.output, exitCode: state.shellState.exitCode, error: state.shellState.error, isFocused: state.shellState.isFocused, onResize: state.shellState.onResize, onInput: (input) => {
+                    // PTY MODE: Send everything immediately
+                    onShellInput(input);
                 }, onFocusChange: (focused) => {
                     setState(prev => ({
                         ...prev,
@@ -1054,6 +1152,8 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
                             isFocused: focused
                         } : undefined
                     }));
+                }, onSignal: (signal) => {
+                    onShellSignal(signal);
                 } })),
             state.isAiWorking && !state.shellState && (React.createElement(Box, { marginBottom: 1, paddingLeft: 1 },
                 React.createElement(LoadingIndicator, { key: "loading-indicator" }),
@@ -1156,14 +1256,12 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
                     exit();
                     // Clear screen before showing install message
                     process.stdout.write('\x1b[2J\x1b[3J\x1b[H');
-                    console.log('\n🔄 Installing latest version...\n');
                     const installProcess = spawn('npm', ['install', '-g', 'centaurus-cli@latest'], {
                         stdio: 'inherit',
                         shell: true
                     });
                     installProcess.on('close', (code) => {
                         if (code === 0) {
-                            console.log('\n✅ Update complete! Restarting Centaurus CLI...\n');
                             // Restart the CLI
                             const restartProcess = spawn('centaurus', [], {
                                 stdio: 'inherit',
@@ -1174,7 +1272,6 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
                             process.exit(0);
                         }
                         else {
-                            console.log('\n❌ Update failed. Please try manually: npm install -g centaurus-cli@latest\n');
                             process.exit(1);
                         }
                     });