centaurus-cli 2.8.8 → 2.9.0

package/dist/ui/components/App.js

@@ -2,7 +2,7 @@ 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 * as fs from 'fs';
+import { quickLog } from '../../utils/conversation-logger.js';
 import { WelcomeBanner } from './WelcomeBanner.js';
 import { InputBox } from './InputBox.js';
 import { MessageDisplay, countImagesInMessage } from './MessageDisplay.js';
@@ -23,6 +23,8 @@ import { DetailedPlanReviewScreen } from './DetailedPlanReviewScreen.js';
 import { TaskCompletedMessage } from './TaskCompletedMessage.js';
 import { PlanAcceptedMessage } from './PlanAcceptedMessage.js';
 import { processTerminalOutput } from '../../utils/terminal-output.js';
+import { BackgroundTaskManager } from '../../services/background-task-manager.js';
+import { useConnectivity } from '../../hooks/useConnectivity.js';
 import { apiClient } from '../../services/api-client.js';
 import { conversationManager } from '../../services/conversation-manager.js';
 import { logDebug, logError } from '../../utils/logger.js';
@@ -135,29 +137,30 @@ const RenameInputScreen = ({ currentTitle, onRename, onCancel }) => {
         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 }) => {
+export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode, onResponseReceived, onDirectMessage, onResponseStream, onThoughtStream, onThoughtComplete, onPickerSetup, onPickerSelection, onToolExecutionUpdate, onToolApprovalRequest, onToolStreamingOutput, onPlanModeChange, onPlanApprovalRequest, onPlanCreated, onTaskCompleted, onCommandModeChange, onToggleCommandMode, onBackgroundModeChange, onToggleBackgroundMode, onBackgroundTaskCountChange, onSetAutoModeSetup, onCwdChange, onModelChange, onSubshellContextChange, onPasswordRequest, onShellInput, onShellSignal, onKillProcess, onInteractiveEditorMode, onConnectionStatusUpdate, onTokenCountUpdate, onChatPickerSetup, onChatPickerSelection, onChatDeletePickerSetup, onChatDeletePickerSelection, onChatListSetup, onChatRenamePickerSetup, onChatRename, onRestoreMessagesSetup, onUIMessageHistoryUpdate, onBackgroundTaskListSetup, onBackgroundTaskSelection, onBackgroundTaskCancelSetup, onBackgroundTaskCancel, onBackgroundTaskViewSetup }) => {
     const { exit } = useApp();
     const autoAcceptRef = React.useRef(false);
+    const setAutoModeCallbackRef = React.useRef(null);
+    // Connectivity State
+    const isConnected = useConnectivity();
     // Helper to clear screen
     const clearScreen = useCallback(() => {
         process.stdout.write('\x1b[2J\x1b[3J\x1b[H');
     }, []);
-    // Helper to get max tokens for a model
+    // Helper to get max tokens for a model (reads from cached backend config if available)
     const getMaxTokensForModel = useCallback((model) => {
-        // Import dynamically to avoid circular dependencies
         try {
-            const { getModelContextWindow } = require('../../config/models.js');
-            return getModelContextWindow(model);
+            // Use sync function that reads from cached backend config
+            const { getModelContextWindowSync } = require('../../config/models.js');
+            return getModelContextWindowSync(model);
         }
         catch (error) {
-            // Fallback to defaults if config loading fails
-            if (model.includes('gemini-3'))
-                return 2000000;
-            if (model.includes('gemini-2.5'))
-                return 2000000;
-            if (model.includes('kimi'))
+            // Fallback defaults if import fails
+            if (model.toLowerCase().includes('kimi'))
                 return 128000;
-            return 2000000;
+            if (model.toLowerCase().includes('gemini'))
+                return 1000000;
+            return 1000000;
         }
     }, []);
     // Helper to estimate tokens (rough approximation: 1 token ≈ 4 characters)
@@ -182,6 +185,7 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
         currentModel: initialModel || 'gemini-2.5-flash',
         planMode: initialPlanMode || false,
         commandMode: false,
+        backgroundMode: false,
         currentWorkingDirectory: process.cwd(),
         showExitWarning: false,
         commandHistory: [],
@@ -198,6 +202,7 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
         planApprovalRequest: undefined,
         passwordRequest: undefined,
         connectionStatus: undefined,
+        backgroundTaskCount: 0,
     });
     // Track last terminal width to detect actual width changes
     const lastTerminalWidthRef = React.useRef(process.stdout.columns || 80);
@@ -280,24 +285,45 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
             }));
         });
     }, []);
+    // Fetch models config async and update maxTokens once loaded
+    // This ensures correct context window even on initial load
+    React.useEffect(() => {
+        const loadModelsConfig = async () => {
+            try {
+                // Import quickLog for debugging
+                const { quickLog } = await import('../../utils/conversation-logger.js');
+                quickLog(`[${new Date().toISOString()}] [App] loadModelsConfig effect starting, currentModel: ${initialModel}\n`);
+                const { fetchModelsConfig, getModelContextWindowSync } = await import('../../config/models.js');
+                quickLog(`[${new Date().toISOString()}] [App] fetchModelsConfig imported, calling...\n`);
+                const config = await fetchModelsConfig(); // This populates the cache
+                quickLog(`[${new Date().toISOString()}] [App] fetchModelsConfig returned, models count: ${config?.models?.length || 0}\n`);
+                // Now get maxTokens with the cached config
+                const newMaxTokens = getModelContextWindowSync(initialModel || 'gemini-2.5-flash');
+                quickLog(`[${new Date().toISOString()}] [App] Got newMaxTokens: ${newMaxTokens} for model "${initialModel}"\n`);
+                setState(prev => ({
+                    ...prev,
+                    maxTokens: newMaxTokens
+                }));
+                quickLog(`[${new Date().toISOString()}] [App] Updated state.maxTokens to ${newMaxTokens}\n`);
+            }
+            catch (error) {
+                // Log errors to file
+                try {
+                    const { quickLog } = await import('../../utils/conversation-logger.js');
+                    quickLog(`[${new Date().toISOString()}] [App] loadModelsConfig ERROR: ${error?.message || error}\n`);
+                }
+                catch { }
+            }
+        };
+        loadModelsConfig();
+    }, [initialModel]);
     // Keep ref in sync with state
     React.useEffect(() => {
         autoAcceptRef.current = state.autoAcceptMode;
     }, [state.autoAcceptMode]);
-    // Update token count whenever messages change
-    React.useEffect(() => {
-        const allMessages = [...state.messageHistory];
-        if (state.currentMessage) {
-            allMessages.push(state.currentMessage);
-        }
-        const totalTokens = calculateTotalTokens(allMessages);
-        if (totalTokens !== state.currentTokens) {
-            setState(prev => ({
-                ...prev,
-                currentTokens: totalTokens
-            }));
-        }
-    }, [state.messageHistory, state.currentMessage, calculateTotalTokens]);
+    // NOTE: Token count is now updated via onTokenCountUpdate callback from cli-adapter
+    // which tracks the actual AI conversation history including system prompt.
+    // The old UI-based calculation has been removed to avoid overwriting correct values.
     // Track if we're currently streaming
     const isStreamingRef = React.useRef(false);
     // Buffer content when terminal is too small for streaming display
@@ -387,7 +413,7 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
         onThoughtStream((thought) => {
             // Debug logging to file
             try {
-                fs.appendFileSync('cli_frontend_logs.txt', `[${new Date().toISOString()}] [App] Received thought chunk (${thought.length} chars): ${thought.substring(0, 100)}\n`);
+                quickLog(`[${new Date().toISOString()}] [App] Received thought chunk (${thought.length} chars): ${thought.substring(0, 100)}\n`);
             }
             catch (e) {
                 // Ignore logging errors
@@ -406,7 +432,7 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
                     (prev.currentMessage.thinkingDuration !== undefined && !isThoughtOnlyMessage);
                 if (needsNewMessage) {
                     try {
-                        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`);
+                        quickLog(`[${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
@@ -445,7 +471,7 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
                 // (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`);
+                        quickLog(`[${new Date().toISOString()}] [App] Skipping thought chunk - current is thought-only message waiting for tool\n`);
                     }
                     catch (e) { }
                     return prev;
@@ -457,7 +483,7 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
                 const allLines = thoughtAccumulatorRef.current.split('\n').filter(line => line.trim());
                 const last3Lines = allLines.slice(-3);
                 try {
-                    fs.appendFileSync('cli_frontend_logs.txt', `[${new Date().toISOString()}] [App] Accumulated ${allLines.length} total lines, showing last 3: ${JSON.stringify(last3Lines)}\n`);
+                    quickLog(`[${new Date().toISOString()}] [App] Accumulated ${allLines.length} total lines, showing last 3: ${JSON.stringify(last3Lines)}\n`);
                 }
                 catch (e) {
                     // Ignore logging errors
@@ -477,7 +503,7 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
     React.useEffect(() => {
         onThoughtComplete((durationSeconds) => {
             try {
-                fs.appendFileSync('cli_frontend_logs.txt', `[${new Date().toISOString()}] [App] onThoughtComplete called with ${durationSeconds}s\n`);
+                quickLog(`[${new Date().toISOString()}] [App] onThoughtComplete called with ${durationSeconds}s\n`);
             }
             catch (e) {
                 // Ignore
@@ -488,7 +514,7 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
                 // Only update if we have a current assistant message
                 if (!prev.currentMessage || prev.currentMessage.role !== 'assistant') {
                     try {
-                        fs.appendFileSync('cli_frontend_logs.txt', `[${new Date().toISOString()}] [App] No current assistant message for thought completion\n`);
+                        quickLog(`[${new Date().toISOString()}] [App] No current assistant message for thought completion\n`);
                     }
                     catch (e) {
                         // Ignore
@@ -496,7 +522,7 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
                     return prev;
                 }
                 try {
-                    fs.appendFileSync('cli_frontend_logs.txt', `[${new Date().toISOString()}] [App] Setting thinkingDuration to ${durationSeconds}s on message ${prev.currentMessage.id}\n`);
+                    quickLog(`[${new Date().toISOString()}] [App] Setting thinkingDuration to ${durationSeconds}s on message ${prev.currentMessage.id}\n`);
                 }
                 catch (e) {
                     // Ignore
@@ -593,7 +619,7 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
                             // (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`);
+                                    quickLog(`[${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];
@@ -735,6 +761,33 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
             }));
         });
     }, []); // Empty dependency array - only register once
+    // Set up callback for background mode change
+    React.useEffect(() => {
+        onBackgroundModeChange((backgroundMode) => {
+            setState(prev => ({
+                ...prev,
+                backgroundMode
+            }));
+        });
+    }, []); // Empty dependency array - only register once
+    // Set up callback for background task count change
+    React.useEffect(() => {
+        onBackgroundTaskCountChange((count) => {
+            setState(prev => ({
+                ...prev,
+                backgroundTaskCount: count
+            }));
+        });
+    }, []); // Empty dependency array - only register once
+    // Set up callback for setting Auto mode (used after background task starts)
+    React.useEffect(() => {
+        onSetAutoModeSetup((enabled) => {
+            // Call the InputBox's setAutoMode callback if registered
+            if (setAutoModeCallbackRef.current) {
+                setAutoModeCallbackRef.current(enabled);
+            }
+        });
+    }, []); // Empty dependency array - only register once
     // Set up callback for message restoration (when resuming a chat)
     React.useEffect(() => {
         onRestoreMessagesSetup((restoredMessages) => {
@@ -748,6 +801,121 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
             }));
         });
     }, []); // Empty dependency array - only register once
+    // Set up callback for background task list picker
+    React.useEffect(() => {
+        onBackgroundTaskListSetup((tasks) => {
+            clearScreen();
+            setState(prev => ({
+                ...prev,
+                screen: 'background-task-list',
+                backgroundTasks: tasks,
+                isLoading: false
+            }));
+        });
+    }, []); // Empty dependency array - only register once
+    // Set up callback for background task cancel picker
+    React.useEffect(() => {
+        onBackgroundTaskCancelSetup((tasks) => {
+            clearScreen();
+            setState(prev => ({
+                ...prev,
+                screen: 'background-task-cancel',
+                backgroundTasks: tasks,
+                isLoading: false
+            }));
+        });
+    }, []); // Empty dependency array - only register once
+    // Set up callback for viewing a background task in focus mode (live streaming shell)
+    React.useEffect(() => {
+        onBackgroundTaskViewSetup((task) => {
+            clearScreen();
+            // Set up shell state for the background task - this displays in InteractiveShell
+            // isFocused: true to start directly in focus mode
+            // isBackgroundTask: true to prevent adding to history on exit
+            setState(prev => ({
+                ...prev,
+                screen: 'chat',
+                shellState: {
+                    command: `[Background Task] ${task.command}`,
+                    cwd: task.cwd,
+                    output: task.output,
+                    isRunning: task.isRunning,
+                    exitCode: undefined,
+                    error: undefined,
+                    isFocused: true, // Start directly in focus mode
+                    remoteContext: undefined,
+                    isBackgroundTask: true, // Flag to prevent history addition
+                    backgroundTaskId: task.id // Store task ID for input routing
+                },
+                isLoading: false,
+                isAiWorking: false // Don't show AI working for background tasks
+            }));
+            // Subscribe to output updates - append to shell output
+            task.onOutput((chunk) => {
+                setState(prev => {
+                    if (!prev.shellState || !prev.shellState.isBackgroundTask)
+                        return prev;
+                    return {
+                        ...prev,
+                        shellState: {
+                            ...prev.shellState,
+                            output: prev.shellState.output + chunk
+                        }
+                    };
+                });
+            });
+            // Subscribe to task completion
+            task.onComplete((exitCode) => {
+                // Debug logging
+                try {
+                    quickLog(`[${new Date().toISOString()}] [App.tsx] task.onComplete called: exitCode=${exitCode}\n`);
+                }
+                catch (e) { }
+                setState(prev => {
+                    // If user already exited focus mode, don't do anything
+                    if (!prev.shellState || !prev.shellState.isBackgroundTask) {
+                        try {
+                            quickLog(`[${new Date().toISOString()}] [App.tsx] task.onComplete: shellState not active, ignoring\n`);
+                        }
+                        catch (e) { }
+                        return prev;
+                    }
+                    // Task completed - mark as done and update display
+                    try {
+                        quickLog(`[${new Date().toISOString()}] [App.tsx] task.onComplete: marking task as complete\n`);
+                    }
+                    catch (e) { }
+                    return {
+                        ...prev,
+                        shellState: {
+                            ...prev.shellState,
+                            isRunning: false,
+                            exitCode
+                        }
+                    };
+                });
+                // After a brief delay, automatically return to chat
+                // This gives the user time to see the final output
+                setTimeout(() => {
+                    try {
+                        quickLog(`[${new Date().toISOString()}] [App.tsx] task.onComplete: clearing shellState to return to chat\n`);
+                    }
+                    catch (e) { }
+                    clearScreen();
+                    setState(prev => {
+                        // Only clear if still showing this background task
+                        if (prev.shellState?.isBackgroundTask) {
+                            return {
+                                ...prev,
+                                shellState: undefined
+                            };
+                        }
+                        return prev;
+                    });
+                }, 500); // 500ms delay to see final output
+            });
+        });
+    }, []); // Empty dependency array - only register once
     // Sync UI message history to CLI adapter whenever it changes
     React.useEffect(() => {
         onUIMessageHistoryUpdate(state.messageHistory);
@@ -758,7 +926,7 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
             // 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`);
+                    quickLog(`[${new Date().toISOString()}] [App] execute_command update: ${JSON.stringify(update)}\n`);
                 }
                 catch (e) { }
                 // STARTING EXECUTION
@@ -897,10 +1065,10 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
             setState(prev => {
                 // 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`);
+                    quickLog(`[${new Date().toISOString()}] [App] onToolExecutionUpdate setState - toolName: ${update.toolName}, status: ${update.status}\n`);
+                    quickLog(`[${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`);
+                        quickLog(`[${new Date().toISOString()}] [App] Current message has thinkingDuration: ${prev.currentMessage.thinkingDuration}s\n`);
                     }
                 }
                 catch (e) { }
@@ -911,7 +1079,7 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
                     // 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`);
+                            quickLog(`[${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
@@ -945,7 +1113,7 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
                     // 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`);
+                        quickLog(`[${new Date().toISOString()}] [App] Tool ${update.toolName} completed, moving current tool to history\n`);
                     }
                     catch (e) { }
                     const completedToolMessage = {
@@ -963,7 +1131,7 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
                 // 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`);
+                        quickLog(`[${new Date().toISOString()}] [App] Tool ${update.toolName} pending - skipping state modification, waiting for executing\n`);
                     }
                     catch (e) { }
                     return prev; // Return unchanged state
@@ -982,13 +1150,13 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
                             // 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`);
+                                quickLog(`[${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`);
+                                quickLog(`[${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
@@ -1010,7 +1178,7 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
                 }
                 // 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`);
+                    quickLog(`[${new Date().toISOString()}] [App] Tool ${update.toolName} completed without current executing tool, adding to history\n`);
                 }
                 catch (e) { }
                 let newHistory = prev.messageHistory;
@@ -1225,10 +1393,13 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
     }, [onCwdChange]);
     // Set up callback to receive model changes
     React.useEffect(() => {
-        onModelChange((modelName) => {
+        onModelChange((modelName, contextWindow) => {
+            // Update both currentModel AND maxTokens when model changes
+            // contextWindow is passed directly from cli-adapter, no lookup needed
             setState(prev => ({
                 ...prev,
-                currentModel: modelName
+                currentModel: modelName,
+                maxTokens: contextWindow
             }));
         });
     }, [onModelChange]);
@@ -1241,6 +1412,15 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
             }));
         });
     }, [onSubshellContextChange]);
+    // Set up callback to receive actual AI context token count from cli-adapter
+    React.useEffect(() => {
+        onTokenCountUpdate((tokens) => {
+            setState(prev => ({
+                ...prev,
+                currentTokens: tokens
+            }));
+        });
+    }, [onTokenCountUpdate]);
     // Set up callback for plan approval requests
     React.useEffect(() => {
         onPlanApprovalRequest(async (plan) => {
@@ -1265,14 +1445,14 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
             // 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`);
+                quickLog(`[${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) => {
+        onTaskCompleted((task, taskNumber, totalTasks, completionNote, taskDescription) => {
             // Add task completion message to history
             setState(prev => {
                 const taskCompletedMessage = {
@@ -1283,7 +1463,8 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
                     taskCompletion: {
                         taskNumber,
                         totalTasks,
-                        taskDescription: task.description,
+                        // Use the passed taskDescription if available (for subtasks), otherwise fall back to task.description
+                        taskDescription: taskDescription || task.description,
                         completionNote
                     }
                 };
@@ -1374,7 +1555,7 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
                         }
                         else {
                             // Fallback if no client available
-                            console.error('SSH client not available for editor mode');
+                            logError('SSH client not available for editor mode', new Error('No SSH client'));
                             setState(prev => ({ ...prev, isInteractiveEditorMode: false }));
                         }
                     }
@@ -1615,16 +1796,30 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
         }
         else if (!isSlashCommand) {
             // Only add user message to display if it's not a slash command
-            // (slash commands will show their response only)
+            // Show user message IMMEDIATELY with image breadcrumbs (uploading state)
+            // Images will be uploaded in background, then AI will be called
+            const hasImagesToUpload = clipboardImages && clipboardImages.length > 0;
+            // Build initial content with placeholder image markers for immediate display
+            let initialDisplayContent = trimmedValue;
+            if (hasImagesToUpload) {
+                // Add placeholder markers that will be shown immediately
+                for (let i = 0; i < clipboardImages.length; i++) {
+                    const image = clipboardImages[i];
+                    // Use a placeholder format that MessageDisplay can render as breadcrumb
+                    // Format: [IMAGE: filename (uploading...)] - will be updated after upload
+                    initialDisplayContent = `${initialDisplayContent} [IMAGE: ${image.displayName} (gs://uploading)]`;
+                }
+            }
+            // Generate a stable message ID that we can use to update the message later
+            const userMessageId = `user-${Date.now()}-${Math.random().toString(36).substring(2, 11)}`;
             setState(prev => {
-                // Move current message to history if exists
                 const newHistory = prev.currentMessage
                     ? [...prev.messageHistory, prev.currentMessage]
                     : prev.messageHistory;
                 const userMessage = {
-                    id: `user-${Date.now()}-${Math.random().toString(36).substring(2, 11)}`,
+                    id: userMessageId,
                     role: 'user',
-                    content: trimmedValue,
+                    content: initialDisplayContent,
                     timestamp: new Date()
                 };
                 return {
@@ -1632,8 +1827,8 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
                     messageHistory: [...newHistory, userMessage],
                     currentMessage: null,
                     isLoading: true,
-                    loadingMessage: 'Processing your request...',
-                    isAiWorking: true // AI is starting to work
+                    loadingMessage: hasImagesToUpload ? 'Uploading image(s)...' : 'Processing your request...',
+                    isAiWorking: true
                 };
             });
         }
@@ -1694,7 +1889,8 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
                 // 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
+                    // Upload each clipboard image and build the final message content
+                    const uploadedImageMarkers = [];
                     for (const image of clipboardImages) {
                         try {
                             logDebug(`[CLIPBOARD] Uploading image: ${image.displayName}, size: ${image.sizeBytes} bytes`);
@@ -1703,19 +1899,50 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
                             // 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})]`);
+                                // Build the real image marker with actual GCS URI
+                                messageWithImages = `${messageWithImages} [IMAGE: ${uploadResult.fileName} (${uploadResult.gcsUri})]`;
+                                uploadedImageMarkers.push(`[IMAGE: ${uploadResult.fileName} (${uploadResult.gcsUri})]`);
+                                logDebug(`[CLIPBOARD] Appended image marker: [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]');
+                            // Add a failed marker so user knows upload failed
+                            uploadedImageMarkers.push(`[IMAGE: ${image.displayName} (upload failed)]`);
                         }
                     }
+                    // Update the user message in history with actual GCS URIs
+                    // Replace placeholder markers (gs://uploading) with real ones
+                    setState(prev => {
+                        const updatedHistory = prev.messageHistory.map(msg => {
+                            // Find the user message we just added (it has placeholder markers)
+                            if (msg.role === 'user' && msg.content.includes('(gs://uploading)')) {
+                                // Build new content: original text + real image markers
+                                let newContent = trimmedValue;
+                                for (const marker of uploadedImageMarkers) {
+                                    newContent = `${newContent} ${marker}`;
+                                }
+                                return { ...msg, content: newContent };
+                            }
+                            return msg;
+                        });
+                        return { ...prev, messageHistory: updatedHistory };
+                    });
+                }
+                else {
+                    // No valid conversation ID - update message to show upload failed
+                    setState(prev => {
+                        const updatedHistory = prev.messageHistory.map(msg => {
+                            if (msg.role === 'user' && msg.content.includes('(gs://uploading)')) {
+                                // Replace uploading placeholders with failed markers
+                                const newContent = msg.content.replace(/\(gs:\/\/uploading\)/g, '(upload failed - no conversation)');
+                                return { ...msg, content: newContent };
+                            }
+                            return msg;
+                        });
+                        return { ...prev, messageHistory: updatedHistory };
+                    });
                 } // End: if (conversationId && !startsWith temp_)
             } // End: if (clipboardImages && clipboardImages.length > 0)
             await onMessage(messageWithImages);
@@ -1769,11 +1996,34 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
         state.screen === 'chat' && (React.createElement(React.Fragment, null,
             !state.shellState?.isFocused && (React.createElement(MessageList, { history: state.messageHistory, current: state.currentMessage, showBanner: true })),
             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) => {
+                    // Debug logging
+                    try {
+                        quickLog(`[${new Date().toISOString()}] [App.tsx onInput] input: ${JSON.stringify(input)}, isBackgroundTask: ${state.shellState?.isBackgroundTask}, backgroundTaskId: ${state.shellState?.backgroundTaskId}\n`);
+                    }
+                    catch (e) { }
+                    // Check if this is a background task
+                    if (state.shellState?.isBackgroundTask && state.shellState?.backgroundTaskId) {
+                        // Route input to background task
+                        BackgroundTaskManager.sendInput(state.shellState.backgroundTaskId, input);
+                        return;
+                    }
                     // PTY MODE: Send everything immediately
                     onShellInput(input);
                 }, onFocusChange: (focused) => {
                     // Clear screen when entering/exiting focus mode
                     clearScreen();
+                    // Special handling for background tasks
+                    if (!focused && state.shellState?.isBackgroundTask) {
+                        // Exiting focus mode for a background task:
+                        // Just clear shellState and return to chat, no history message
+                        // The task continues running in background
+                        setState(prev => ({
+                            ...prev,
+                            shellState: undefined // Clear completely, no preview
+                        }));
+                        return;
+                    }
+                    // Normal shell focus change
                     setState(prev => ({
                         ...prev,
                         shellState: prev.shellState ? {
@@ -1782,6 +2032,15 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
                         } : undefined
                     }));
                 }, onSignal: (signal) => {
+                    // Check if this is a background task
+                    if (state.shellState?.isBackgroundTask && state.shellState?.backgroundTaskId) {
+                        // Route signal to background task
+                        const nodeSignal = signal === 'SIGINT' ? 'SIGINT' :
+                            signal === 'SIGTERM' ? 'SIGTERM' :
+                                signal === 'SIGKILL' ? 'SIGKILL' : 'SIGINT';
+                        BackgroundTaskManager.sendSignal(state.shellState.backgroundTaskId, nodeSignal);
+                        return;
+                    }
                     onShellSignal(signal);
                 } })),
             state.isAiWorking && !state.shellState && !state.approvalRequest &&
@@ -1797,9 +2056,13 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
                     // Clear preserved input on submit
                     preservedInputTextRef.current = '';
                     handleSubmit(value, clipboardImages);
-                }, autoAcceptMode: state.autoAcceptMode, model: state.currentModel, planMode: state.planMode, commandMode: state.commandMode, currentWorkingDirectory: state.currentWorkingDirectory, commandHistory: state.commandHistory, onToggleAutoAccept: handleToggleAutoAccept, onToggleCommandMode: onToggleCommandMode, isActive: true, subshellContext: state.subshellContext, currentTokens: state.currentTokens, maxTokens: state.maxTokens, isShellRunning: state.shellState?.isRunning, initialValue: preservedInputTextRef.current, onValueChange: handleInputValueChange }))),
+                }, autoAcceptMode: state.autoAcceptMode, model: state.currentModel, planMode: state.planMode, commandMode: state.commandMode, backgroundMode: state.backgroundMode, currentWorkingDirectory: state.currentWorkingDirectory, commandHistory: state.commandHistory, onToggleAutoAccept: handleToggleAutoAccept, onToggleCommandMode: onToggleCommandMode, onToggleBackgroundMode: onToggleBackgroundMode, isActive: true, subshellContext: state.subshellContext, currentTokens: state.currentTokens, maxTokens: state.maxTokens, isShellRunning: state.shellState?.isRunning, backgroundTaskCount: state.backgroundTaskCount, initialValue: preservedInputTextRef.current, onValueChange: handleInputValueChange, onSetAutoModeSetup: (callback) => {
+                    setAutoModeCallbackRef.current = callback;
+                } }))),
             state.showExitWarning && (React.createElement(Box, { marginTop: 1 },
-                React.createElement(Text, { color: "#ffaa00", bold: true }, "\u26A0\uFE0F  Press Ctrl+C again to exit"))))),
+                React.createElement(Text, { color: "#ffaa00", bold: true }, "\u26A0\uFE0F  Press Ctrl+C again to exit"))),
+            !isConnected && (React.createElement(Box, { marginTop: 0, marginLeft: state.showExitWarning ? 2 : 0 },
+                React.createElement(Text, { color: "red", bold: true }, "\u26A0\uFE0F No internet connection"))))),
         state.screen === 'approval' && state.approvalRequest && (React.createElement(ApprovalSection, { key: `approval-${state.approvalRequest.message}`, approvalRequest: state.approvalRequest, onApprove: (approved) => {
                 const resolve = state.approvalRequest?.resolve;
                 if (resolve) {
@@ -2096,6 +2359,79 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
                         ...prev,
                         screen: 'chat'
                     }));
-                } })))));
+                } }))),
+        state.screen === 'background-task-list' && state.backgroundTasks && (React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: "#9966ff", paddingX: 1 },
+            React.createElement(Text, { color: "#9966ff", bold: true }, "\uD83D\uDD04 Running Background Tasks"),
+            React.createElement(Text, { dimColor: true }, "Select a task to view its output in focus mode"),
+            React.createElement(Box, { marginTop: 1 },
+                React.createElement(SelectInput, { items: state.backgroundTasks.map((task) => {
+                        const durationSec = Math.round(task.durationMs / 1000);
+                        return {
+                            label: task.command.length > 50 ? task.command.slice(0, 47) + '...' : task.command,
+                            value: task.id,
+                            cwd: task.cwd,
+                            duration: `${durationSec}s`,
+                            isRunning: task.isRunning,
+                            outputPreview: task.outputPreview.length > 60 ? task.outputPreview.slice(0, 57) + '...' : task.outputPreview
+                        };
+                    }), itemComponent: ({ isSelected, label, cwd, duration, isRunning, outputPreview }) => (React.createElement(Box, { flexDirection: "column" },
+                        React.createElement(Box, null,
+                            React.createElement(Text, { color: isSelected ? '#9966ff' : 'white', bold: isSelected },
+                                isSelected ? '> ' : '  ',
+                                label),
+                            React.createElement(Text, { color: isRunning ? '#00cc66' : '#ffaa00' },
+                                " [",
+                                isRunning ? 'running' : 'done',
+                                "]"),
+                            React.createElement(Text, { color: "gray" },
+                                " \u23F1\uFE0F ",
+                                duration)),
+                        React.createElement(Box, { paddingLeft: 4 },
+                            React.createElement(Text, { color: "gray" },
+                                "\uD83D\uDCC1 ",
+                                cwd)),
+                        outputPreview && (React.createElement(Box, { paddingLeft: 4 },
+                            React.createElement(Text, { color: "gray", dimColor: true },
+                                "\u2514\u2500 ",
+                                outputPreview))))), onSelect: (item) => {
+                        setState(prev => ({ ...prev, screen: 'chat', isLoading: false }));
+                        onBackgroundTaskSelection(item.value);
+                    } })),
+            React.createElement(Box, { marginTop: 1 },
+                React.createElement(Text, { dimColor: true }, "Press ESC to return to chat")))),
+        state.screen === 'background-task-cancel' && state.backgroundTasks && (React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: "#ff6666", paddingX: 1 },
+            React.createElement(Text, { color: "#ff6666", bold: true }, "\uD83D\uDED1 Cancel a Background Task"),
+            React.createElement(Text, { dimColor: true }, "Select a task to terminate it"),
+            React.createElement(Box, { marginTop: 1 },
+                React.createElement(SelectInput, { items: state.backgroundTasks.map((task) => {
+                        const durationSec = Math.round(task.durationMs / 1000);
+                        return {
+                            label: task.command.length > 50 ? task.command.slice(0, 47) + '...' : task.command,
+                            value: task.id,
+                            cwd: task.cwd,
+                            duration: `${durationSec}s`,
+                            isRunning: task.isRunning
+                        };
+                    }), itemComponent: ({ isSelected, label, cwd, duration, isRunning }) => (React.createElement(Box, { flexDirection: "column" },
+                        React.createElement(Box, null,
+                            React.createElement(Text, { color: isSelected ? '#ff6666' : 'white', bold: isSelected },
+                                isSelected ? '> ' : '  ',
+                                label),
+                            React.createElement(Text, { color: isRunning ? '#00cc66' : '#ffaa00' },
+                                " [",
+                                isRunning ? 'running' : 'done',
+                                "]"),
+                            React.createElement(Text, { color: "gray" },
+                                " \u23F1\uFE0F ",
+                                duration)),
+                        React.createElement(Box, { paddingLeft: 4 },
+                            React.createElement(Text, { color: "gray" },
+                                "\uD83D\uDCC1 ",
+                                cwd)))), onSelect: (item) => {
+                        setState(prev => ({ ...prev, screen: 'chat', isLoading: false }));
+                        onBackgroundTaskCancel(item.value);
+                    } })),
+            React.createElement(Box, { marginTop: 1 },
+                React.createElement(Text, { dimColor: true }, "Press ESC to return to chat"))))));
 };
 //# sourceMappingURL=App.js.map