centaurus-cli 2.8.6 → 2.8.7

package/dist/ui/components/App.js

@@ -1,10 +1,12 @@
 import React, { useState, useCallback } from 'react';
 import { Box, Text, useApp, useInput, Static } from 'ink';
+import SelectInput from 'ink-select-input';
+import TextInput from 'ink-text-input';
 import { spawn } from 'child_process';
 import * as fs from 'fs';
 import { WelcomeBanner } from './WelcomeBanner.js';
 import { InputBox } from './InputBox.js';
-import { MessageDisplay } from './MessageDisplay.js';
+import { MessageDisplay, countImagesInMessage } from './MessageDisplay.js';
 import { StreamingMessageDisplay } from './StreamingMessageDisplay.js';
 import { LoadingIndicator } from './LoadingIndicator.js';
 import { AgentTimer } from './AgentTimer.js';
@@ -18,10 +20,14 @@ 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 { DetailedPlanReviewScreen } from './DetailedPlanReviewScreen.js';
 import { TaskCompletedMessage } from './TaskCompletedMessage.js';
 import { PlanAcceptedMessage } from './PlanAcceptedMessage.js';
 import { processTerminalOutput } from '../../utils/terminal-output.js';
+import { apiClient } from '../../services/api-client.js';
+import { conversationManager } from '../../services/conversation-manager.js';
+import { logDebug, logError } from '../../utils/logger.js';
+import { getTerminalDimensions } from '../../hooks/useTerminalDimensions.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,23 +35,54 @@ const MessageList = React.memo(({ history, current, showBanner }) => {
     const staticItems = React.useMemo(() => {
         return showBanner ? [BANNER_ITEM, ...history] : history;
     }, [history, showBanner]);
+    // Calculate cumulative image counts for each message (for global numbering)
+    const imageCountsUpTo = React.useMemo(() => {
+        const counts = [];
+        let cumulative = 0;
+        for (const msg of history) {
+            counts.push(cumulative);
+            if (msg.role === 'user') {
+                cumulative += countImagesInMessage(msg.content);
+            }
+        }
+        return counts;
+    }, [history]);
+    // Get image count for current message (all images in history)
+    const totalHistoryImages = imageCountsUpTo.length > 0
+        ? imageCountsUpTo[imageCountsUpTo.length - 1] + (history[history.length - 1]?.role === 'user' ? countImagesInMessage(history[history.length - 1].content) : 0)
+        : 0;
     return (React.createElement(Box, { flexDirection: "column", marginY: 1 },
-        React.createElement(Static, { items: staticItems }, (item) => {
+        React.createElement(Static, { items: staticItems }, (item, index) => {
             if (item.id === '__banner__') {
                 return React.createElement(WelcomeBanner, { key: "__banner__" });
             }
             // Special rendering for task completion messages
             const msg = item;
+            // Calculate history index (account for banner if present)
+            const historyIndex = showBanner ? index - 1 : index;
+            const imageCountBefore = imageCountsUpTo[historyIndex] || 0;
             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(PlanAcceptedMessage, { key: item.id, planTitle: msg.planAccepted.planTitle, totalTasks: msg.planAccepted.totalTasks, tasks: msg.planAccepted.tasks }));
             }
-            return React.createElement(MessageDisplay, { key: item.id, message: item });
+            return React.createElement(MessageDisplay, { key: item.id, message: item, imageCountBefore: imageCountBefore });
         }),
-        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 })))));
+        current && !history.some(msg => msg.id === current.id) && (() => {
+            // Get terminal dimensions to determine if streaming should be enabled
+            const dimensions = getTerminalDimensions();
+            const canStream = current.role === 'assistant' &&
+                current.shouldStream !== false &&
+                dimensions.shouldEnableStreaming;
+            if (canStream) {
+                return (React.createElement(StreamingMessageDisplay, { key: current.id, message: current, maxLines: dimensions.maxStreamingLines }));
+            }
+            else {
+                return React.createElement(MessageDisplay, { key: current.id, message: current, imageCountBefore: totalHistoryImages });
+            }
+        })()));
 }, (prevProps, nextProps) => {
     // Custom comparison to prevent unnecessary re-renders
     // Only re-render if history length changed, current message changed, or showBanner changed
@@ -75,7 +112,31 @@ 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, onPlanCreated, onTaskCompleted, onCommandModeChange, onToggleCommandMode, onCwdChange, onModelChange, onSubshellContextChange, onPasswordRequest, onShellInput, onShellSignal, onKillProcess, onInteractiveEditorMode, onConnectionStatusUpdate }) => {
+// Simple rename input screen component
+const RenameInputScreen = ({ currentTitle, onRename, onCancel }) => {
+    const [value, setValue] = React.useState(currentTitle);
+    useInput((input, key) => {
+        if (key.escape) {
+            onCancel();
+        }
+    });
+    return (React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: "#00ccff", paddingX: 1 },
+        React.createElement(Text, { color: "#00ccff", bold: true }, "\u270F\uFE0F Rename Chat"),
+        React.createElement(Box, { marginTop: 1 },
+            React.createElement(Text, null,
+                "Current name: ",
+                React.createElement(Text, { color: "#00cc66" }, currentTitle))),
+        React.createElement(Box, { marginTop: 1 },
+            React.createElement(Text, null, "New name: "),
+            React.createElement(TextInput, { value: value, onChange: setValue, onSubmit: (newTitle) => {
+                    if (newTitle.trim()) {
+                        onRename(newTitle.trim());
+                    }
+                } })),
+        React.createElement(Box, { marginTop: 1 },
+            React.createElement(Text, { dimColor: true }, "Press Enter to save, ESC to cancel"))));
+};
+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, onConnectionStatusUpdate, onChatPickerSetup, onChatPickerSelection, onChatDeletePickerSetup, onChatDeletePickerSelection, onChatListSetup, onChatRenamePickerSetup, onChatRename, onRestoreMessagesSetup, onUIMessageHistoryUpdate }) => {
     const { exit } = useApp();
     const autoAcceptRef = React.useRef(false);
     // Helper to clear screen
@@ -139,6 +200,67 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
         passwordRequest: undefined,
         connectionStatus: undefined,
     });
+    // Track last terminal width to detect actual width changes
+    const lastTerminalWidthRef = React.useRef(process.stdout.columns || 80);
+    // Track if we're currently in the middle of a clean-ui cycle to prevent re-entrancy
+    const isCleaningRef = React.useRef(false);
+    // Ref to store history during clean cycle (avoids closure issues)
+    const savedHistoryRef = React.useRef([]);
+    const savedCurrentRef = React.useRef(null);
+    // Debounce timer ref
+    const resizeDebounceRef = React.useRef(null);
+    // Handle terminal resize events using the same logic as /clean-ui command
+    // Uses debounce to wait until width is stable before triggering clean-ui
+    React.useEffect(() => {
+        const DEBOUNCE_MS = 300; // Wait 300ms after last resize before acting
+        const handleResize = () => {
+            const newWidth = process.stdout.columns || 80;
+            // Clear any existing debounce timer
+            if (resizeDebounceRef.current) {
+                clearTimeout(resizeDebounceRef.current);
+            }
+            // Set new debounce timer - only act when resizing stops
+            resizeDebounceRef.current = setTimeout(() => {
+                const oldWidth = lastTerminalWidthRef.current;
+                // Only act if width actually changed and we're not already cleaning
+                if (newWidth !== oldWidth && !isCleaningRef.current) {
+                    lastTerminalWidthRef.current = newWidth;
+                    isCleaningRef.current = true;
+                    // Step 1: Clear screen and save current state to refs
+                    clearScreen();
+                    // Save state before clearing
+                    setState(prev => {
+                        savedHistoryRef.current = [...prev.messageHistory];
+                        savedCurrentRef.current = prev.currentMessage;
+                        // Return cleared state to force unmount of all message components
+                        return {
+                            ...prev,
+                            messageHistory: [],
+                            currentMessage: null
+                        };
+                    });
+                    // Step 2: After delay, clear again and restore from refs
+                    setTimeout(() => {
+                        clearScreen();
+                        setState(prev => ({
+                            ...prev,
+                            messageHistory: savedHistoryRef.current,
+                            currentMessage: savedCurrentRef.current
+                        }));
+                        isCleaningRef.current = false;
+                    }, 100);
+                }
+            }, DEBOUNCE_MS);
+        };
+        process.stdout.on('resize', handleResize);
+        return () => {
+            process.stdout.off('resize', handleResize);
+            // Clear debounce timer on cleanup
+            if (resizeDebounceRef.current) {
+                clearTimeout(resizeDebounceRef.current);
+            }
+        };
+    }, [clearScreen]);
     // Check for version updates on mount
     React.useEffect(() => {
         checkForUpdates().then(versionInfo => {
@@ -176,10 +298,52 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
     }, [state.messageHistory, state.currentMessage, calculateTotalTokens]);
     // Track if we're currently streaming
     const isStreamingRef = React.useRef(false);
+    // Buffer content when terminal is too small for streaming display
+    // Content will only be shown once complete to prevent flickering
+    const bufferedContentRef = React.useRef('');
+    const bufferedMessageIdRef = React.useRef(null);
     // Set up callback to receive streaming chunks - only once on mount
     React.useEffect(() => {
         onResponseStream((chunk) => {
             isStreamingRef.current = true; // Mark that we're streaming
+            // Check if terminal is large enough for streaming
+            const dimensions = getTerminalDimensions();
+            const enableStreaming = dimensions.shouldEnableStreaming;
+            // If streaming is disabled, buffer content silently
+            // Content will only appear once complete (in onResponseReceived)
+            if (!enableStreaming) {
+                // Accumulate content in buffer
+                bufferedContentRef.current += chunk;
+                // Create or update a minimal placeholder message (shows loading state)
+                setState(prev => {
+                    // If we already have a message with buffered content, just maintain working state
+                    if (prev.currentMessage && prev.currentMessage.role === 'assistant' && prev.currentMessage.shouldStream === false) {
+                        return {
+                            ...prev,
+                            isAiWorking: true
+                        };
+                    }
+                    // Create minimal placeholder message (content hidden while streaming)
+                    const now = new Date();
+                    const messageId = `assistant-${Date.now()}-${Math.random().toString(36).substring(2, 11)}`;
+                    bufferedMessageIdRef.current = messageId;
+                    const newMessage = {
+                        id: messageId,
+                        role: 'assistant',
+                        content: '', // Empty - content will be set when complete
+                        timestamp: now,
+                        shouldStream: false // Never show streaming display
+                    };
+                    return {
+                        ...prev,
+                        currentMessage: newMessage,
+                        isLoading: false,
+                        isAiWorking: true
+                    };
+                });
+                return;
+            }
+            // Normal streaming mode - update content in real-time
             setState(prev => {
                 // If we have a current assistant message (possibly created by thoughts), append to it
                 if (prev.currentMessage && prev.currentMessage.role === 'assistant') {
@@ -187,7 +351,9 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
                         ...prev,
                         currentMessage: {
                             ...prev.currentMessage,
-                            content: prev.currentMessage.content + chunk
+                            content: prev.currentMessage.content + chunk,
+                            // Update shouldStream based on current terminal size
+                            shouldStream: enableStreaming
                         },
                         isAiWorking: true // Keep AI working state active
                     };
@@ -199,7 +365,9 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
                     role: 'assistant',
                     content: chunk,
                     timestamp: now,
-                    shouldStream: true // AI responses should stream
+                    // Set shouldStream based on terminal size
+                    // If terminal is too small, disable streaming to prevent flickering
+                    shouldStream: enableStreaming
                 };
                 return {
                     ...prev,
@@ -374,6 +542,12 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
             // If we were streaming, move the current message to history immediately
             if (isStreamingRef.current) {
                 isStreamingRef.current = false; // Reset for next message
+                // Check if we have buffered content (from disabled streaming mode)
+                const hasBufferedContent = bufferedContentRef.current.length > 0;
+                const bufferedContent = bufferedContentRef.current;
+                // Clear buffer for next use
+                bufferedContentRef.current = '';
+                bufferedMessageIdRef.current = null;
                 setState(prev => {
                     // Move the completed streaming message to history
                     if (prev.currentMessage && prev.currentMessage.role === 'assistant') {
@@ -389,8 +563,10 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
                             };
                         }
                         // Create complete message with full content
+                        // If we had buffered content, use that instead of the (empty) currentMessage content
                         const completeMessage = {
                             ...prev.currentMessage,
+                            content: hasBufferedContent ? bufferedContent : prev.currentMessage.content,
                             shouldStream: false
                         };
                         // Add the complete message to history
@@ -402,6 +578,38 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
                             isAiWorking: false // AI finished working
                         };
                     }
+                    // CRITICAL: If currentMessage is NOT an assistant (e.g., it's a tool message),
+                    // but we have a message to finalize (from task_complete), we need to find and update
+                    // the most recent assistant message in history with the full content.
+                    if (message && message.length > 0) {
+                        // Find the most recent assistant message in history to update
+                        const lastAssistantIndex = prev.messageHistory.findIndex((msg, i) => msg.role === 'assistant' &&
+                            i === prev.messageHistory.map((m, idx) => m.role === 'assistant' ? idx : -1).filter(idx => idx >= 0).pop());
+                        if (lastAssistantIndex >= 0) {
+                            const lastAssistant = prev.messageHistory[lastAssistantIndex];
+                            // Only update if the current content is shorter than what we're providing
+                            // (meaning the message was moved to history mid-stream)
+                            if (lastAssistant.content.length < message.length) {
+                                try {
+                                    fs.appendFileSync('cli_frontend_logs.txt', `[${new Date().toISOString()}] [App] onResponseReceived: Updating history assistant message from ${lastAssistant.content.length} chars to ${message.length} chars\n`);
+                                }
+                                catch (e) { }
+                                const updatedHistory = [...prev.messageHistory];
+                                updatedHistory[lastAssistantIndex] = {
+                                    ...lastAssistant,
+                                    content: message,
+                                    shouldStream: false
+                                };
+                                return {
+                                    ...prev,
+                                    messageHistory: updatedHistory,
+                                    currentMessage: null,
+                                    isLoading: false,
+                                    isAiWorking: false
+                                };
+                            }
+                        }
+                    }
                     return {
                         ...prev,
                         isLoading: false,
@@ -473,6 +681,75 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
             }));
         });
     }, []); // Empty dependency array - only register once
+    // Set up callback for chat picker
+    React.useEffect(() => {
+        onChatPickerSetup((chats, currentChatId) => {
+            clearScreen();
+            setState(prev => ({
+                ...prev,
+                screen: 'chat-picker',
+                chatPickerChats: chats,
+                currentChatId: currentChatId,
+                isLoading: false
+            }));
+        });
+    }, []); // Empty dependency array - only register once
+    // Set up callback for chat delete picker
+    React.useEffect(() => {
+        onChatDeletePickerSetup((chats, currentChatId) => {
+            clearScreen();
+            setState(prev => ({
+                ...prev,
+                screen: 'chat-delete-picker',
+                chatPickerChats: chats,
+                currentChatId: currentChatId,
+                isLoading: false
+            }));
+        });
+    }, []); // Empty dependency array - only register once
+    // Set up callback for read-only chat list view
+    React.useEffect(() => {
+        onChatListSetup((chats, currentChatId) => {
+            clearScreen();
+            setState(prev => ({
+                ...prev,
+                screen: 'chat-list-view',
+                chatPickerChats: chats,
+                currentChatId: currentChatId,
+                isLoading: false
+            }));
+        });
+    }, []); // Empty dependency array - only register once
+    // Set up callback for chat rename picker
+    React.useEffect(() => {
+        onChatRenamePickerSetup((chats, currentChatId) => {
+            clearScreen();
+            setState(prev => ({
+                ...prev,
+                screen: 'chat-rename-picker',
+                chatPickerChats: chats,
+                currentChatId: currentChatId,
+                isLoading: false
+            }));
+        });
+    }, []); // Empty dependency array - only register once
+    // Set up callback for message restoration (when resuming a chat)
+    React.useEffect(() => {
+        onRestoreMessagesSetup((restoredMessages) => {
+            // Clear the screen and restore messages
+            clearScreen();
+            setState(prev => ({
+                ...prev,
+                messageHistory: restoredMessages,
+                screen: 'chat',
+                isLoading: false
+            }));
+        });
+    }, []); // Empty dependency array - only register once
+    // Sync UI message history to CLI adapter whenever it changes
+    React.useEffect(() => {
+        onUIMessageHistoryUpdate(state.messageHistory);
+    }, [state.messageHistory]);
     // Set up callback for tool execution updates
     React.useEffect(() => {
         onToolExecutionUpdate((update) => {
@@ -772,8 +1049,8 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
                         currentMessage: connectionMessage
                     };
                 }
-                // If connected or error, update the current message and move to history
-                if (status.status === 'connected' || status.status === 'error') {
+                // If connected, error, or disconnected, update the current message and move to history
+                if (status.status === 'connected' || status.status === 'error' || status.status === 'disconnected') {
                     // Create the final connection status message
                     const finalConnectionMessage = {
                         id: `connection-${Date.now()}`,
@@ -1150,6 +1427,26 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
         }
         // ESC key handling - cancel AI execution
         if (key.escape) {
+            // If in a picker screen, return to chat
+            // If in chat-rename-input, go back to rename picker
+            if (state.screen === 'chat-rename-input') {
+                setState(prev => ({
+                    ...prev,
+                    screen: 'chat-rename-picker',
+                    renameChatId: undefined,
+                    renameChatTitle: undefined
+                }));
+                return;
+            }
+            // If in a picker screen, return to chat
+            if (state.screen === 'chat-picker' || state.screen === 'chat-delete-picker' || state.screen === 'chat-list-view' || state.screen === 'chat-rename-picker') {
+                setState(prev => ({
+                    ...prev,
+                    screen: 'chat',
+                    chatPickerChats: undefined
+                }));
+                return;
+            }
             // If AI is working, cancel the operation
             if (state.isLoading || state.isAiWorking) {
                 // Cancel the current AI request
@@ -1237,7 +1534,7 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
             return;
         }
     }, { isActive: !state.isInteractiveEditorMode });
-    const handleSubmit = useCallback(async (value) => {
+    const handleSubmit = useCallback(async (value, clipboardImages) => {
         // Trim the value to remove any leading/trailing whitespace or newlines
         const trimmedValue = value.trim();
         if (!trimmedValue)
@@ -1264,6 +1561,33 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
             }
             return;
         }
+        // Check if this is the /clean-ui command (refresh UI without clearing history)
+        if (trimmedValue === '/clean-ui' || trimmedValue === '/refresh-ui' || trimmedValue === '/redraw') {
+            // Clear the terminal screen first
+            clearScreen();
+            // Use functional setState to capture current history, clear it, then restore
+            // This forces a complete re-render of all messages with proper numbering
+            setState(prev => {
+                const savedHistory = [...prev.messageHistory];
+                const savedCurrent = prev.currentMessage;
+                // Schedule restoration after the clear takes effect
+                setTimeout(() => {
+                    clearScreen(); // Clear again to ensure clean slate
+                    setState(innerPrev => ({
+                        ...innerPrev,
+                        messageHistory: savedHistory,
+                        currentMessage: savedCurrent
+                    }));
+                }, 100);
+                // Return cleared state to force unmount of all message components
+                return {
+                    ...prev,
+                    messageHistory: [],
+                    currentMessage: null
+                };
+            });
+            return;
+        }
         // In command mode, add command to history immediately
         if (state.commandMode) {
             setState(prev => {
@@ -1328,7 +1652,71 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
                 : [...prev.commandHistory, trimmedValue]
         }));
         try {
-            await onMessage(trimmedValue);
+            // Upload clipboard images if present
+            let messageWithImages = trimmedValue;
+            // Debug logging for clipboard images
+            logDebug(`[CLIPBOARD] clipboardImages count: ${clipboardImages?.length || 0}`);
+            logDebug(`[CLIPBOARD] currentChatId: ${state.currentChatId || 'null'}`);
+            if (clipboardImages && clipboardImages.length > 0) {
+                // Check for existing conversation ID - conversationManager is the single source of truth
+                // This ensures we use the same conversation that cli-adapter uses
+                let conversationId = conversationManager.getCurrentConversationId() || state.currentChatId;
+                logDebug(`[CLIPBOARD] conversationManager ID: ${conversationManager.getCurrentConversationId() || 'null'}`);
+                logDebug(`[CLIPBOARD] state.currentChatId: ${state.currentChatId || 'null'}`);
+                if (!conversationId) {
+                    // No conversation exists anywhere - create one via conversationManager
+                    // This will set the internal state that cli-adapter's ensureConversationStarted checks
+                    logDebug(`[CLIPBOARD] No existing conversation - creating new one for image upload`);
+                    try {
+                        const newConversation = await conversationManager.startNewConversation('New Chat', state.currentModel || 'gemini-2-flash-preview', 'google', undefined // workingDirectory - will use process.cwd()
+                        );
+                        conversationId = newConversation.id;
+                        // Update UI state with the new chat ID
+                        setState(prev => ({ ...prev, currentChatId: conversationId }));
+                        logDebug(`[CLIPBOARD] Created new conversation: ${conversationId}`);
+                        // Delay to ensure DB transaction is fully committed before file upload
+                        // Note: Backend now handles FK constraint violations gracefully, but extra delay helps ensure consistency
+                        logDebug(`[CLIPBOARD] Waiting for DB commit...`);
+                        await new Promise(resolve => setTimeout(resolve, 1500));
+                        logDebug(`[CLIPBOARD] Proceeding with upload`);
+                    }
+                    catch (createError) {
+                        logError('Failed to create conversation for image upload', createError instanceof Error ? createError : undefined);
+                        // Mark the upload as failed - don't use temp IDs that will fail FK constraint
+                        for (let i = 0; i < clipboardImages.length; i++) {
+                            messageWithImages = messageWithImages.replace(/#image\b/i, '[IMAGE UPLOAD FAILED - No conversation]');
+                        }
+                        logDebug(`[CLIPBOARD] Skipping upload due to conversation creation failure`);
+                    }
+                }
+                // Only attempt upload if we have a valid conversation ID
+                if (conversationId && !conversationId.startsWith('temp_')) {
+                    logDebug(`[CLIPBOARD] Starting upload for ${clipboardImages.length} images with conversationId: ${conversationId}`);
+                    // Upload each clipboard image
+                    for (const image of clipboardImages) {
+                        try {
+                            logDebug(`[CLIPBOARD] Uploading image: ${image.displayName}, size: ${image.sizeBytes} bytes`);
+                            const uploadResult = await apiClient.uploadFile(conversationId, image.displayName, image.mimeType, image.base64Data);
+                            logDebug(`[CLIPBOARD] Upload success! gcsUri: ${uploadResult.gcsUri || 'none'}`);
+                            // Append image reference info to message (for AI to know an image was attached)
+                            // The backend will use gcsUri for Vertex AI multimodal input
+                            if (uploadResult.gcsUri) {
+                                // Replace #image with the actual gcsUri marker
+                                // Case insensitive, first occurrence only
+                                messageWithImages = messageWithImages.replace(/#image\b/i, `[IMAGE: ${uploadResult.fileName} (${uploadResult.gcsUri})]`);
+                                logDebug(`[CLIPBOARD] Replaced #image with: [IMAGE: ${uploadResult.fileName} (${uploadResult.gcsUri})]`);
+                            }
+                        }
+                        catch (uploadError) {
+                            // Log error but continue - image upload is optional
+                            logError('Failed to upload clipboard image', uploadError instanceof Error ? uploadError : undefined);
+                            // Remove the #image placeholder if upload failed
+                            messageWithImages = messageWithImages.replace(/#image\b/i, '[IMAGE UPLOAD FAILED]');
+                        }
+                    }
+                } // End: if (conversationId && !startsWith temp_)
+            } // End: if (clipboardImages && clipboardImages.length > 0)
+            await onMessage(messageWithImages);
         }
         catch (error) {
             // Add error message
@@ -1374,7 +1762,7 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
     return (React.createElement(Box, { flexDirection: "column" },
         state.screen === 'chat' && (React.createElement(React.Fragment, null,
             !state.shellState?.isFocused && (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, onResize: state.shellState.onResize, remoteContext: state.shellState.remoteContext, onInput: (input) => {
+            state.shellState && (getTerminalDimensions().shouldEnableStreaming || !state.shellState.isRunning) && (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, remoteContext: state.shellState.remoteContext, onInput: (input) => {
                     // PTY MODE: Send everything immediately
                     onShellInput(input);
                 }, onFocusChange: (focused) => {
@@ -1439,7 +1827,207 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
                     });
                 }
             } })),
-        state.screen === 'plan-approval' && state.planApprovalRequest && (React.createElement(PlanReviewScreen, { plan: state.planApprovalRequest.plan, onApprove: () => {
+        state.screen === 'chat-picker' && state.chatPickerChats && (React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: "#00ccff", paddingX: 1 },
+            React.createElement(Text, { color: "#00ccff", bold: true }, "\uD83D\uDCDA Resume a Previous Chat"),
+            React.createElement(Box, { marginTop: 1 },
+                React.createElement(SelectInput, { items: state.chatPickerChats.map((chat) => {
+                        const date = new Date(chat.updatedAt).toLocaleDateString();
+                        const time = new Date(chat.updatedAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+                        const isCurrent = chat.id === state.currentChatId;
+                        const env = chat.environment || 'local';
+                        // Format: Title [environment] date time - N msgs
+                        return {
+                            label: `${isCurrent ? '● ' : '  '}${chat.title}`,
+                            envLabel: `[${env}]`,
+                            dateLabel: `${date} ${time}`,
+                            msgLabel: `${chat.messageCount} msgs`,
+                            value: chat.id,
+                            isCurrent,
+                            environment: env
+                        };
+                    }), itemComponent: ({ isSelected, label, isCurrent, envLabel, dateLabel, msgLabel, environment }) => (React.createElement(Box, null,
+                        React.createElement(Text, { color: isSelected ? '#00ccff' : (isCurrent ? '#00cc66' : 'white'), bold: isSelected || isCurrent },
+                            isSelected ? '> ' : '  ',
+                            label),
+                        React.createElement(Text, { color: environment === 'local' ? 'gray' : (environment?.startsWith('ssh') ? '#ff9966' : environment?.startsWith('wsl') ? '#66ff99' : '#66ccff') },
+                            " ",
+                            envLabel),
+                        React.createElement(Text, { color: "gray" },
+                            " ",
+                            dateLabel),
+                        React.createElement(Text, { color: "gray" }, " - "),
+                        React.createElement(Text, { color: "gray" }, msgLabel))), onSelect: async (item) => {
+                        setState(prev => ({ ...prev, screen: 'chat', isLoading: true }));
+                        try {
+                            await onChatPickerSelection(item.value);
+                            setState(prev => ({
+                                ...prev,
+                                isLoading: false,
+                                isAiWorking: false
+                            }));
+                        }
+                        catch (error) {
+                            setState(prev => {
+                                const errorMessage = {
+                                    id: `system-error-${Date.now()}`,
+                                    role: 'system',
+                                    content: `❌ Error: ${error.message || 'Failed to load chat'}`,
+                                    timestamp: new Date()
+                                };
+                                return {
+                                    ...prev,
+                                    messageHistory: [...prev.messageHistory, errorMessage],
+                                    currentMessage: null,
+                                    isLoading: false,
+                                    isAiWorking: false
+                                };
+                            });
+                        }
+                    } })),
+            React.createElement(Box, { marginTop: 1 },
+                React.createElement(Text, { dimColor: true }, "Press ESC to return to chat")))),
+        state.screen === 'chat-delete-picker' && state.chatPickerChats && (React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: "#00ccff", paddingX: 1 },
+            React.createElement(Text, { color: "#00ccff", bold: true }, "\uD83D\uDDD1\uFE0F Select a Chat to Delete"),
+            React.createElement(Box, { marginTop: 1 },
+                React.createElement(SelectInput, { items: state.chatPickerChats.map((chat) => {
+                        const date = new Date(chat.updatedAt).toLocaleDateString();
+                        const time = new Date(chat.updatedAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+                        const isCurrent = chat.id === state.currentChatId;
+                        const env = chat.environment || 'local';
+                        return {
+                            label: `${isCurrent ? '● ' : '  '}${chat.title}`,
+                            envLabel: `[${env}]`,
+                            dateLabel: `${date} ${time}`,
+                            msgLabel: `${chat.messageCount} msgs`,
+                            value: chat.id,
+                            isCurrent,
+                            environment: env
+                        };
+                    }), itemComponent: ({ isSelected, label, isCurrent, envLabel, dateLabel, msgLabel, environment }) => (React.createElement(Box, null,
+                        React.createElement(Text, { color: isSelected ? '#00ccff' : (isCurrent ? '#00cc66' : 'white'), bold: isSelected || isCurrent },
+                            isSelected ? '> ' : '  ',
+                            label),
+                        React.createElement(Text, { color: environment === 'local' ? 'gray' : (environment?.startsWith('ssh') ? '#ff9966' : environment?.startsWith('wsl') ? '#66ff99' : '#66ccff') },
+                            " ",
+                            envLabel),
+                        React.createElement(Text, { color: "gray" },
+                            " ",
+                            dateLabel),
+                        React.createElement(Text, { color: "gray" }, " - "),
+                        React.createElement(Text, { color: "gray" }, msgLabel))), onSelect: async (item) => {
+                        setState(prev => ({ ...prev, screen: 'chat', isLoading: false }));
+                        try {
+                            await onChatDeletePickerSelection(item.value);
+                        }
+                        catch (error) {
+                            setState(prev => {
+                                const errorMessage = {
+                                    id: `system-error-${Date.now()}`,
+                                    role: 'system',
+                                    content: `❌ Error: ${error.message || 'Failed to delete chat'}`,
+                                    timestamp: new Date()
+                                };
+                                return {
+                                    ...prev,
+                                    messageHistory: [...prev.messageHistory, errorMessage],
+                                    currentMessage: null,
+                                    isLoading: false,
+                                    isAiWorking: false
+                                };
+                            });
+                        }
+                    } })),
+            React.createElement(Box, { marginTop: 1 },
+                React.createElement(Text, { dimColor: true }, "Press ESC to return to chat")))),
+        state.screen === 'chat-list-view' && state.chatPickerChats && (React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: "#00ccff", paddingX: 1 },
+            React.createElement(Text, { color: "#00ccff", bold: true },
+                "\uD83D\uDCDA Saved Chats (",
+                state.chatPickerChats.length,
+                ")"),
+            React.createElement(Box, { marginTop: 1, flexDirection: "column" }, state.chatPickerChats.map((chat) => {
+                const date = new Date(chat.updatedAt).toLocaleDateString();
+                const time = new Date(chat.updatedAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+                const isCurrent = chat.id === state.currentChatId;
+                const env = chat.environment || 'local';
+                return (React.createElement(Box, { key: chat.id },
+                    React.createElement(Text, { color: isCurrent ? '#00cc66' : 'white', bold: isCurrent },
+                        isCurrent ? '● ' : '  ',
+                        chat.title),
+                    React.createElement(Text, { color: env === 'local' ? 'gray' : (env.startsWith('ssh') ? '#ff9966' : env.startsWith('wsl') ? '#66ff99' : '#66ccff') },
+                        " [",
+                        env,
+                        "]"),
+                    React.createElement(Text, { color: "gray" },
+                        " ",
+                        date,
+                        " ",
+                        time),
+                    React.createElement(Text, { color: "gray" }, " - "),
+                    React.createElement(Text, { color: "gray" },
+                        chat.messageCount,
+                        " msgs")));
+            })),
+            React.createElement(Box, { marginTop: 1 },
+                React.createElement(Text, { dimColor: true }, "Press ESC to return to chat")))),
+        state.screen === 'chat-rename-picker' && state.chatPickerChats && (React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: "#00ccff", paddingX: 1 },
+            React.createElement(Text, { color: "#00ccff", bold: true }, "\u270F\uFE0F Select a Chat to Rename"),
+            React.createElement(Box, { marginTop: 1 },
+                React.createElement(SelectInput, { items: state.chatPickerChats.map((chat) => {
+                        const date = new Date(chat.updatedAt).toLocaleDateString();
+                        const time = new Date(chat.updatedAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+                        const isCurrent = chat.id === state.currentChatId;
+                        const env = chat.environment || 'local';
+                        return {
+                            label: `${isCurrent ? '● ' : '  '}${chat.title}`,
+                            envLabel: `[${env}]`,
+                            dateLabel: `${date} ${time}`,
+                            msgLabel: `${chat.messageCount} msgs`,
+                            value: chat.id,
+                            title: chat.title,
+                            isCurrent,
+                            environment: env
+                        };
+                    }), itemComponent: ({ isSelected, label, isCurrent, envLabel, dateLabel, msgLabel, environment }) => (React.createElement(Box, null,
+                        React.createElement(Text, { color: isSelected ? '#00ccff' : (isCurrent ? '#00cc66' : 'white'), bold: isSelected || isCurrent },
+                            isSelected ? '> ' : '  ',
+                            label),
+                        React.createElement(Text, { color: environment === 'local' ? 'gray' : (environment?.startsWith('ssh') ? '#ff9966' : environment?.startsWith('wsl') ? '#66ff99' : '#66ccff') },
+                            " ",
+                            envLabel),
+                        React.createElement(Text, { color: "gray" },
+                            " ",
+                            dateLabel),
+                        React.createElement(Text, { color: "gray" }, " - "),
+                        React.createElement(Text, { color: "gray" }, msgLabel))), onSelect: (item) => {
+                        setState(prev => ({
+                            ...prev,
+                            screen: 'chat-rename-input',
+                            renameChatId: item.value,
+                            renameChatTitle: item.title
+                        }));
+                    } })),
+            React.createElement(Box, { marginTop: 1 },
+                React.createElement(Text, { dimColor: true }, "Press ESC to return to chat")))),
+        state.screen === 'chat-rename-input' && state.renameChatId && (React.createElement(RenameInputScreen, { currentTitle: state.renameChatTitle || '', onRename: (newTitle) => {
+                if (newTitle.trim()) {
+                    onChatRename(state.renameChatId, newTitle.trim());
+                }
+                setState(prev => ({
+                    ...prev,
+                    screen: 'chat',
+                    chatPickerChats: undefined,
+                    renameChatId: undefined,
+                    renameChatTitle: undefined
+                }));
+            }, onCancel: () => {
+                setState(prev => ({
+                    ...prev,
+                    screen: 'chat-rename-picker',
+                    renameChatId: undefined,
+                    renameChatTitle: undefined
+                }));
+            } })),
+        state.screen === 'plan-approval' && state.planApprovalRequest && (React.createElement(DetailedPlanReviewScreen, { plan: state.planApprovalRequest.plan, onApprove: () => {
                 const resolve = state.planApprovalRequest?.resolve;
                 const plan = state.planApprovalRequest?.plan;
                 if (resolve) {
@@ -1453,7 +2041,11 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
                     timestamp: new Date(),
                     planAccepted: {
                         planTitle: plan?.title,
-                        totalTasks: plan?.steps?.length
+                        totalTasks: plan?.steps?.length,
+                        tasks: plan?.steps?.map(step => ({
+                            description: step.description,
+                            subtasks: step.subtasks?.map(st => ({ description: st.description }))
+                        }))
                     }
                 };
                 setState(prev => ({