centaurus-cli 2.7.3 → 2.8.1

package/dist/ui/components/App.js

@@ -17,6 +17,10 @@ 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';
+import { PlanReviewScreen } from './PlanReviewScreen.js';
+import { TaskCompletedMessage } from './TaskCompletedMessage.js';
+import { PlanAcceptedMessage } from './PlanAcceptedMessage.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 }) => {
@@ -29,6 +33,15 @@ const MessageList = React.memo(({ history, current, showBanner }) => {
             if (item.id === '__banner__') {
                 return React.createElement(WelcomeBanner, { key: "__banner__" });
             }
+            // Special rendering for task completion messages
+            const msg = item;
+            if (msg.taskCompletion) {
+                return (React.createElement(TaskCompletedMessage, { key: item.id, taskNumber: msg.taskCompletion.taskNumber, totalTasks: msg.taskCompletion.totalTasks, taskDescription: msg.taskCompletion.taskDescription, completionNote: msg.taskCompletion.completionNote }));
+            }
+            // Special rendering for plan accepted messages
+            if (msg.planAccepted) {
+                return (React.createElement(PlanAcceptedMessage, { key: item.id, planTitle: msg.planAccepted.planTitle, totalTasks: msg.planAccepted.totalTasks }));
+            }
             return React.createElement(MessageDisplay, { key: item.id, message: item });
         }),
         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 })))));
@@ -61,7 +74,7 @@ const ApprovalSection = React.memo(({ approvalRequest, onApprove }) => {
     // Only re-render if the approval request message changes
     return prevProps.approvalRequest.message === nextProps.approvalRequest.message;
 });
-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 }) => {
+export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode, onResponseReceived, onDirectMessage, onResponseStream, onThoughtStream, onThoughtComplete, onPickerSetup, onPickerSelection, onToolExecutionUpdate, onToolApprovalRequest, onToolStreamingOutput, onPlanModeChange, onPlanApprovalRequest, onPlanCreated, onTaskCompleted, onCommandModeChange, onToggleCommandMode, onCwdChange, onModelChange, onSubshellContextChange, onPasswordRequest, onShellInput, onShellSignal, onKillProcess, onInteractiveEditorMode }) => {
     const { exit } = useApp();
     const autoAcceptRef = React.useRef(false);
     // Helper to clear screen
@@ -118,6 +131,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,
@@ -207,10 +221,20 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
                 // Ignore logging errors
             }
             setState(prev => {
-                // If we don't have a current assistant message, create one for the thoughts
-                if (!prev.currentMessage || prev.currentMessage.role !== 'assistant') {
+                // Check if current message is a thought-only message (empty content with thinkingDuration)
+                // These should NOT trigger new message creation - they're waiting for tool execution
+                const isThoughtOnlyMessage = prev.currentMessage?.role === 'assistant' &&
+                    prev.currentMessage.content.trim() === '' &&
+                    prev.currentMessage.thinkingDuration !== undefined;
+                // If we don't have a current assistant message, OR the current one already has thinkingDuration
+                // (meaning it's from a completed turn), create a new one for the thoughts
+                // BUT: Don't create new if current is a thought-only message waiting for tool
+                const needsNewMessage = !prev.currentMessage ||
+                    prev.currentMessage.role !== 'assistant' ||
+                    (prev.currentMessage.thinkingDuration !== undefined && !isThoughtOnlyMessage);
+                if (needsNewMessage) {
                     try {
-                        fs.appendFileSync('cli_frontend_logs.txt', `[${new Date().toISOString()}] [App] Creating new assistant message for thoughts\n`);
+                        fs.appendFileSync('cli_frontend_logs.txt', `[${new Date().toISOString()}] [App] Creating new assistant message for thoughts (reason: ${!prev.currentMessage ? 'no current' : prev.currentMessage.role !== 'assistant' ? 'not assistant' : 'has thinkingDuration'})\n`);
                     }
                     catch (e) {
                         // Ignore logging errors
@@ -229,13 +253,31 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
                         shouldStream: true,
                         thoughts: last3Lines
                     };
+                    // If we have a completed assistant message (with thinkingDuration), move it to history
+                    // BUT: Don't move thought-only messages - they're waiting for tool execution
+                    let newHistory = prev.messageHistory;
+                    if (prev.currentMessage && prev.currentMessage.role === 'assistant' &&
+                        prev.currentMessage.thinkingDuration !== undefined &&
+                        prev.currentMessage.content.trim() !== '') { // Only move if has actual content
+                        newHistory = [...prev.messageHistory, prev.currentMessage];
+                    }
                     return {
                         ...prev,
+                        messageHistory: newHistory,
                         currentMessage: newMessage,
                         isLoading: false,
                         isAiWorking: true
                     };
                 }
+                // If current is thought-only message, just skip this new thought chunk
+                // (don't accumulate - the tool will handle displaying)
+                if (isThoughtOnlyMessage) {
+                    try {
+                        fs.appendFileSync('cli_frontend_logs.txt', `[${new Date().toISOString()}] [App] Skipping thought chunk - current is thought-only message waiting for tool\n`);
+                    }
+                    catch (e) { }
+                    return prev;
+                }
                 // Accumulate the new thought chunk with existing thought text
                 // Add a newline between chunks to separate them
                 thoughtAccumulatorRef.current += '\n' + thought;
@@ -461,7 +503,8 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
                                     isRunning: true,
                                     exitCode: undefined,
                                     error: undefined,
-                                    isFocused: false
+                                    isFocused: false,
+                                    isPty: update.arguments?.isPty || false
                                 },
                                 // IMPORTANT: Always preserve current message by moving it to history first
                                 messageHistory: prev.currentMessage
@@ -482,7 +525,9 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
                     pendingShellRef.current = {
                         timeoutId,
                         command,
-                        cwd: state.currentWorkingDirectory,
+                        // Use the cwd from update.arguments (already computed correctly in cli-adapter.ts)
+                        // This has the correct remote CWD for WSL/Docker/SSH contexts
+                        cwd: update.arguments?.cwd || state.currentWorkingDirectory,
                         output: ''
                     };
                     return;
@@ -560,8 +605,40 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
                 }
             }
             setState(prev => {
-                // Don't add tool messages if we're not on chat screen
+                // Debug logging to trace tool display issues
+                try {
+                    fs.appendFileSync('cli_frontend_logs.txt', `[${new Date().toISOString()}] [App] onToolExecutionUpdate setState - toolName: ${update.toolName}, status: ${update.status}\n`);
+                    fs.appendFileSync('cli_frontend_logs.txt', `[${new Date().toISOString()}] [App] Current state: screen=${prev.screen}, currentMessage.role=${prev.currentMessage?.role}, currentMessage.id=${prev.currentMessage?.id}, historyLen=${prev.messageHistory.length}\n`);
+                    if (prev.currentMessage?.thinkingDuration !== undefined) {
+                        fs.appendFileSync('cli_frontend_logs.txt', `[${new Date().toISOString()}] [App] Current message has thinkingDuration: ${prev.currentMessage.thinkingDuration}s\n`);
+                    }
+                }
+                catch (e) { }
+                // IMPORTANT: When on approval screen, we still need to track completed tools 
+                // but we should NOT try to update the display (will be handled when returning to chat)
+                // For 'executing' status on approval screen, the tool is waiting for approval, so skip
                 if (prev.screen !== 'chat') {
+                    // Only track completed tools, skip executing tools (they need approval flow)
+                    if (update.status === 'completed' || update.status === 'error') {
+                        try {
+                            fs.appendFileSync('cli_frontend_logs.txt', `[${new Date().toISOString()}] [App] Tool ${update.toolName} completed while on ${prev.screen} screen, adding to history\n`);
+                        }
+                        catch (e) { }
+                        // Add completed tool directly to history
+                        const completedToolMessage = {
+                            id: `tool-${update.toolName}-${Date.now()}-${Math.random().toString(36).substring(2, 11)}`,
+                            role: 'tool',
+                            content: '',
+                            timestamp: new Date(),
+                            toolExecution: { ...update }
+                        };
+                        return {
+                            ...prev,
+                            messageHistory: [...prev.messageHistory, completedToolMessage],
+                            isAiWorking: true
+                        };
+                    }
+                    // Skip 'executing' status when not on chat screen
                     return prev;
                 }
                 const toolMessage = {
@@ -571,12 +648,16 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
                     timestamp: new Date(),
                     toolExecution: { ...update }
                 };
-                // If current message is a tool with same name and executing, update it and move to history
+                // If current message is a tool with matching execution, update it and move to history
                 if (prev.currentMessage?.role === 'tool' &&
-                    prev.currentMessage.toolExecution?.toolName === update.toolName &&
                     prev.currentMessage.toolExecution?.status === 'executing' &&
                     update.status !== 'executing') {
                     // Tool completed - move to history with updated status
+                    // Note: We now match ANY executing tool, not just same toolName (handles overlapping tools)
+                    try {
+                        fs.appendFileSync('cli_frontend_logs.txt', `[${new Date().toISOString()}] [App] Tool ${update.toolName} completed, moving current tool to history\n`);
+                    }
+                    catch (e) { }
                     const completedToolMessage = {
                         ...prev.currentMessage,
                         toolExecution: { ...update }
@@ -585,38 +666,72 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
                         ...prev,
                         messageHistory: [...prev.messageHistory, completedToolMessage],
                         currentMessage: null,
-                        isAiWorking: true // Keep AI working state active (more tool calls or response may follow)
+                        isAiWorking: true
                     };
                 }
+                // For pending status, don't modify state yet - wait for executing
+                // This ensures thought-only messages stay as currentMessage until executing arrives
+                if (update.status === 'pending') {
+                    try {
+                        fs.appendFileSync('cli_frontend_logs.txt', `[${new Date().toISOString()}] [App] Tool ${update.toolName} pending - skipping state modification, waiting for executing\n`);
+                    }
+                    catch (e) { }
+                    return prev; // Return unchanged state
+                }
                 // If starting new tool execution
                 if (update.status === 'executing') {
                     // IMPORTANT: Always preserve current message by moving it to history first
                     let newHistory = prev.messageHistory;
+                    let pendingThinkingDuration = undefined;
                     if (prev.currentMessage) {
-                        // Move ANY current message to history before showing tool
-                        newHistory = [...prev.messageHistory, prev.currentMessage];
+                        // Check if this is a thought-only message (empty content but has thinkingDuration)
+                        const isThoughtOnlyMessage = prev.currentMessage.role === 'assistant' &&
+                            prev.currentMessage.content.trim() === '' &&
+                            prev.currentMessage.thinkingDuration !== undefined;
+                        if (isThoughtOnlyMessage) {
+                            // Carry the thinkingDuration to the tool message, don't add empty message to history
+                            pendingThinkingDuration = prev.currentMessage.thinkingDuration;
+                            try {
+                                fs.appendFileSync('cli_frontend_logs.txt', `[${new Date().toISOString()}] [App] Found thought-only message, saving thinkingDuration ${pendingThinkingDuration}s for tool ${update.toolName}\n`);
+                            }
+                            catch (e) { }
+                        }
+                        else {
+                            try {
+                                fs.appendFileSync('cli_frontend_logs.txt', `[${new Date().toISOString()}] [App] Moving current message (${prev.currentMessage.role}) to history for new tool ${update.toolName}\n`);
+                            }
+                            catch (e) { }
+                            // Move ANY current message to history before showing tool
+                            newHistory = [...prev.messageHistory, prev.currentMessage];
+                        }
                     }
+                    // Create tool message with thinkingDuration if applicable
+                    const toolMessageWithDuration = {
+                        ...toolMessage,
+                        thinkingDuration: pendingThinkingDuration
+                    };
                     return {
                         ...prev,
                         messageHistory: newHistory,
-                        currentMessage: toolMessage,
+                        currentMessage: toolMessageWithDuration,
                         isLoading: false,
                         isAiWorking: true
                     };
                 }
-                // For completed tools without a current executing one
-                // IMPORTANT: Preserve current message before adding tool to history
+                // For completed tools without a current executing one (edge case)
+                try {
+                    fs.appendFileSync('cli_frontend_logs.txt', `[${new Date().toISOString()}] [App] Tool ${update.toolName} completed without current executing tool, adding to history\n`);
+                }
+                catch (e) { }
                 let newHistory = prev.messageHistory;
-                // If there's a current message, move it to history first
                 if (prev.currentMessage) {
                     newHistory = [...prev.messageHistory, prev.currentMessage];
                 }
-                // Add tool message to history
                 return {
                     ...prev,
                     messageHistory: [...newHistory, toolMessage],
                     currentMessage: null,
-                    isAiWorking: true // Keep AI working state active
+                    isAiWorking: true
                 };
             });
         });
@@ -696,23 +811,11 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
             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
                         }
                     };
                 }
@@ -790,7 +893,7 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
                     ...prev,
                     screen: 'plan-approval',
                     planApprovalRequest: {
-                        ...plan,
+                        plan,
                         resolve
                     },
                     isLoading: false
@@ -798,6 +901,46 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
             });
         });
     }, [clearScreen]);
+    // Set up callback for plan created notification (optional - for future use)
+    React.useEffect(() => {
+        onPlanCreated((plan) => {
+            // The plan will be displayed via the plan-approval screen
+            // This callback can be used for additional notifications if needed
+            try {
+                fs.appendFileSync('cli_frontend_logs.txt', `[${new Date().toISOString()}] [App] Plan created: ${plan.title} with ${plan.steps.length} tasks\n`);
+            }
+            catch (e) { }
+        });
+    }, [onPlanCreated]);
+    // Set up callback for task completion
+    React.useEffect(() => {
+        onTaskCompleted((task, taskNumber, totalTasks, completionNote) => {
+            // Add task completion message to history
+            setState(prev => {
+                const taskCompletedMessage = {
+                    id: `task-complete-${Date.now()}-${Math.random().toString(36).substring(2, 11)}`,
+                    role: 'system',
+                    content: '', // We'll render this specially
+                    timestamp: new Date(),
+                    taskCompletion: {
+                        taskNumber,
+                        totalTasks,
+                        taskDescription: task.description,
+                        completionNote
+                    }
+                };
+                // Move current message to history if exists
+                const newHistory = prev.currentMessage
+                    ? [...prev.messageHistory, prev.currentMessage, taskCompletedMessage]
+                    : [...prev.messageHistory, taskCompletedMessage];
+                return {
+                    ...prev,
+                    messageHistory: newHistory,
+                    currentMessage: null
+                };
+            });
+        });
+    }, [onTaskCompleted]);
     // Set up callback for password requests
     React.useEffect(() => {
         onPasswordRequest(async (message) => {
@@ -832,6 +975,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);
@@ -954,7 +1155,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();
@@ -1084,67 +1285,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,
@@ -1204,41 +1355,42 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
                     });
                 }
             } })),
-        state.screen === 'plan-approval' && state.planApprovalRequest && (React.createElement(Box, { flexDirection: "column" },
-            React.createElement(Box, { marginBottom: 1 },
-                React.createElement(Text, { bold: true, color: "#00ccff" }, "\uD83D\uDCCB Implementation Plan")),
-            React.createElement(Box, { flexDirection: "column", marginBottom: 1, paddingX: 2 },
-                React.createElement(Text, { bold: true, color: "#ffaa00" }, "Tasks:"),
-                state.planApprovalRequest.tasks.map((task, index) => (React.createElement(Box, { key: index, marginTop: 1 },
-                    React.createElement(Text, { color: "#666666" },
-                        index + 1,
-                        ". "),
-                    React.createElement(Text, null, task))))),
-            React.createElement(Box, { marginTop: 1 },
-                React.createElement(Text, { color: "#00ccff" }, state.planApprovalRequest.question)),
-            React.createElement(ConfirmPrompt, { message: "Implement this plan?", onYes: () => {
-                    const resolve = state.planApprovalRequest?.resolve;
-                    if (resolve) {
-                        resolve(true);
-                    }
-                    setState(prev => ({
-                        ...prev,
-                        screen: 'chat',
-                        planApprovalRequest: undefined,
-                        isLoading: true,
-                        isAiWorking: true
-                    }));
-                }, onNo: () => {
-                    const resolve = state.planApprovalRequest?.resolve;
-                    if (resolve) {
-                        resolve(false);
+        state.screen === 'plan-approval' && state.planApprovalRequest && (React.createElement(PlanReviewScreen, { plan: state.planApprovalRequest.plan, onApprove: () => {
+                const resolve = state.planApprovalRequest?.resolve;
+                const plan = state.planApprovalRequest?.plan;
+                if (resolve) {
+                    resolve(true);
+                }
+                // Add "Plan Accepted" message to history
+                const planAcceptedMessage = {
+                    id: `plan-accepted-${Date.now()}-${Math.random().toString(36).substring(2, 11)}`,
+                    role: 'system',
+                    content: '',
+                    timestamp: new Date(),
+                    planAccepted: {
+                        planTitle: plan?.title,
+                        totalTasks: plan?.steps?.length
                     }
-                    setState(prev => ({
-                        ...prev,
-                        screen: 'chat',
-                        planApprovalRequest: undefined
-                    }));
-                } }))),
+                };
+                setState(prev => ({
+                    ...prev,
+                    screen: 'chat',
+                    planApprovalRequest: undefined,
+                    messageHistory: [...prev.messageHistory, planAcceptedMessage],
+                    isLoading: true,
+                    isAiWorking: true
+                }));
+            }, onEdit: () => {
+                const resolve = state.planApprovalRequest?.resolve;
+                if (resolve) {
+                    resolve(false);
+                }
+                setState(prev => ({
+                    ...prev,
+                    screen: 'chat',
+                    planApprovalRequest: undefined
+                }));
+            } })),
         state.screen === 'password-prompt' && state.passwordRequest && (React.createElement(PasswordPrompt, { message: state.passwordRequest.message, onSubmit: (password) => {
                 const resolve = state.passwordRequest?.resolve;
                 if (resolve) {