centaurus-cli 2.9.1 → 2.9.3

package/dist/ui/components/App.js

@@ -1,6 +1,8 @@
-import React, { useState, useCallback } from 'react';
+import React, { useState, useCallback, useMemo } from 'react';
 import { Box, Text, useApp, useInput, Static } from 'ink';
 import SelectInput from 'ink-select-input';
+import { CircularSelectInput } from './CircularSelectInput.js';
+import stripAnsi from 'strip-ansi';
 import TextInput from 'ink-text-input';
 import { quickLog } from '../../utils/conversation-logger.js';
 import { WelcomeBanner } from './WelcomeBanner.js';
@@ -22,13 +24,21 @@ import { runInteractiveEditor, runWSLEditor, runDockerEditor, runSSHEditor } fro
 import { DetailedPlanReviewScreen } from './DetailedPlanReviewScreen.js';
 import { TaskCompletedMessage } from './TaskCompletedMessage.js';
 import { PlanAcceptedMessage } from './PlanAcceptedMessage.js';
+import { MCPAddScreen } from './MCPAddScreen.js';
+import { MCPServerListScreen } from './MCPServerListScreen.js';
+import { MCPListScreen } from './MCPListScreen.js';
 import { processTerminalOutput } from '../../utils/terminal-output.js';
 import { BackgroundTaskManager } from '../../services/background-task-manager.js';
+import { MonitorModeAIPanel } from './MonitorModeAIPanel.js';
+import { detectInputRequirement, extractPromptContext, getInputTypeDescription } from '../../services/input-requirement-detector.js';
+import { ShellInputAgent } from '../../services/shell-input-agent.js';
+import { InputDetectionAgent } from '../../services/input-detection-agent.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';
 import { getTerminalDimensions } from '../../hooks/useTerminalDimensions.js';
+import { ConfigManager } from '../../config/manager.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 }) => {
@@ -137,12 +147,18 @@ 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, onClearStreamedResponse, 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, onSessionQuotaUpdate }) => {
+export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode, onResponseReceived, onDirectMessage, onResponseStream, onClearStreamedResponse, onThoughtStream, onThoughtComplete, onPickerSetup, onPickerSelection, onToolExecutionUpdate, onToolApprovalRequest, onToolStreamingOutput, onPlanModeChange, onPlanApprovalRequest, onPlanCreated, onTaskCompleted, onCommandModeChange, onToggleCommandMode, onBackgroundModeChange, onToggleBackgroundMode, onBackgroundTaskCountChange, onSubAgentCountChange, onSetAutoModeSetup, onCwdChange, onModelChange, onSubshellContextChange, onPasswordRequest, onShellInput, onShellSignal, onKillProcess, onInteractiveEditorMode, onConnectionStatusUpdate, onTokenCountUpdate, onContextLimitReached, onChatPickerSetup, onChatPickerSelection, onChatDeletePickerSetup, onChatDeletePickerSelection, onChatListSetup, onChatRenamePickerSetup, onChatRename, onRestoreMessagesSetup, onUIMessageHistoryUpdate, onBackgroundTaskListSetup, onBackgroundTaskSelection, onBackgroundTaskCancelSetup, onBackgroundTaskCancel, onBackgroundTaskViewSetup, onSessionQuotaUpdate, onMCPAddScreenSetup, onMCPRemoveScreenSetup, onMCPEnableScreenSetup, onMCPDisableScreenSetup, onMCPListScreenSetup, onMCPAddServer, onMCPRemoveServer, onMCPEnableServer, onMCPDisableServer, onMCPValidateConfig, onPromptAnswered, getMainConversation }) => {
     const { exit } = useApp();
+    // Calculate limit for paginated lists (75% of terminal height)
+    const listLimit = Math.max(5, Math.floor((process.stdout.rows || 24) * 0.75));
     const autoAcceptRef = React.useRef(false);
     const setAutoModeCallbackRef = React.useRef(null);
     // Connectivity State
     const isConnected = useConnectivity();
+    // Agent control mode refs for input detection
+    const lastOutputTimeRef = React.useRef(Date.now());
+    const inputDetectionPendingRef = React.useRef(false);
+    const detectionDebounceRef = React.useRef(null);
     // Helper to clear screen
     const clearScreen = useCallback(() => {
         process.stdout.write('\x1b[2J\x1b[3J\x1b[H');
@@ -195,6 +211,7 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
         isAiWorking: false,
         currentTokens: 0,
         maxTokens: getMaxTokensForModel(initialModel || 'gemini-2.5-flash'),
+        contextLimitReached: false,
         shellState: undefined,
         isInteractiveEditorMode: false,
         pickerOptions: undefined,
@@ -203,8 +220,10 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
         passwordRequest: undefined,
         connectionStatus: undefined,
         backgroundTaskCount: 0,
+        subAgentCount: 0,
         sessionQuotaExhausted: false,
         sessionQuotaTimeRemaining: '',
+        aiAutoSuggest: false,
     });
     // Track last terminal width to detect actual width changes
     const lastTerminalWidthRef = React.useRef(process.stdout.columns || 80);
@@ -270,6 +289,20 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
             }
         };
     }, [clearScreen]);
+    // Handle global keyboard shortcuts
+    useInput((input, key) => {
+        // Escape key handling for background task screens
+        if (key.escape) {
+            if (state.screen === 'background-task-list' || state.screen === 'background-task-cancel') {
+                clearScreen();
+                setState(prev => ({
+                    ...prev,
+                    screen: 'chat',
+                    backgroundTasks: undefined // Clear the list
+                }));
+            }
+        }
+    });
     // Check for version updates on mount
     React.useEffect(() => {
         checkForUpdates().then(versionInfo => {
@@ -292,6 +325,14 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
     React.useEffect(() => {
         const loadModelsConfig = async () => {
             try {
+                // Initialize ConfigManager to load general settings
+                const configManager = new ConfigManager();
+                const generalConfig = configManager.load();
+                setState(prev => ({
+                    ...prev,
+                    aiAutoSuggest: generalConfig.aiAutoSuggest === true
+                }));
+                // Import quickLog for debugging
                 // Import quickLog for debugging
                 const { quickLog } = await import('../../utils/conversation-logger.js');
                 quickLog(`[${new Date().toISOString()}] [App] loadModelsConfig effect starting, currentModel: ${initialModel}\n`);
@@ -323,6 +364,17 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
     React.useEffect(() => {
         autoAcceptRef.current = state.autoAcceptMode;
     }, [state.autoAcceptMode]);
+    // Push shell output updates to InputDetectionAgent when agent control is active
+    // This ensures the detection agent always has the latest output for polling
+    React.useEffect(() => {
+        if (state.shellState?.isAgentControlled && state.shellState?.shellId && state.shellState?.output) {
+            InputDetectionAgent.updateOutput(state.shellState.shellId, state.shellState.output);
+        }
+    }, [state.shellState?.output, state.shellState?.isAgentControlled, state.shellState?.shellId]);
+    // Ref to track if we should strictly block incoming AI updates (Zombie Agent Protection)
+    // This is set to true when an Agent-Controlled shell exits, essentially killing the "AI Agent"
+    // associated with it from the UI perspective. It is reset when the user manually inputs a new message.
+    const ignoreIncomingAIUpdatesRef = React.useRef(false);
     // 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.
@@ -335,6 +387,9 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
     // Set up callback to receive streaming chunks - only once on mount
     React.useEffect(() => {
         onResponseStream((chunk) => {
+            // CIRCUIT BREAKER: Block incoming messages from "Zombie Agents"
+            if (ignoreIncomingAIUpdatesRef.current)
+                return;
             isStreamingRef.current = true; // Mark that we're streaming
             // Check if terminal is large enough for streaming
             const dimensions = getTerminalDimensions();
@@ -438,6 +493,9 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
     // Set up callback to receive thought chunks
     React.useEffect(() => {
         onThoughtStream((thought) => {
+            // CIRCUIT BREAKER: Block incoming thoughts from "Zombie Agents"
+            if (ignoreIncomingAIUpdatesRef.current)
+                return;
             // Debug logging to file
             try {
                 quickLog(`[${new Date().toISOString()}] [App] Received thought chunk (${thought.length} chars): ${thought.substring(0, 100)}\n`);
@@ -529,6 +587,9 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
     // Set up callback for when thinking completes
     React.useEffect(() => {
         onThoughtComplete((durationSeconds) => {
+            // CIRCUIT BREAKER: Block incoming thought completion from "Zombie Agents"
+            if (ignoreIncomingAIUpdatesRef.current)
+                return;
             try {
                 quickLog(`[${new Date().toISOString()}] [App] onThoughtComplete called with ${durationSeconds}s\n`);
             }
@@ -565,12 +626,28 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
             });
         });
     }, [onThoughtComplete]);
+    // Helper function to check if a message should be skipped (thought-only with no content or tools)
+    const shouldSkipMessage = (message) => {
+        if (!message)
+            return false;
+        // Skip if it's an assistant message with only thinking duration and no content or tool execution
+        if (message.role === 'assistant' &&
+            message.thinkingDuration !== undefined &&
+            message.content.trim() === '' &&
+            !message.toolExecution) {
+            return true;
+        }
+        return false;
+    };
     // Set up callback for direct messages (slash commands) - add directly to history
     React.useEffect(() => {
         onDirectMessage((message) => {
+            // CIRCUIT BREAKER: Block incoming direct messages from "Zombie Agents"
+            if (ignoreIncomingAIUpdatesRef.current)
+                return;
             setState(prev => {
-                // Move current message to history if exists
-                const newHistory = prev.currentMessage
+                // Move current message to history if exists (skip thought-only messages)
+                const newHistory = prev.currentMessage && !shouldSkipMessage(prev.currentMessage)
                     ? [...prev.messageHistory, prev.currentMessage]
                     : prev.messageHistory;
                 // Create system message for slash command response
@@ -594,6 +671,9 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
     // Set up callback to receive complete responses (for slash commands and non-streaming responses)
     React.useEffect(() => {
         onResponseReceived((message) => {
+            // CIRCUIT BREAKER: Block incoming responses from "Zombie Agents"
+            if (ignoreIncomingAIUpdatesRef.current)
+                return;
             // If we were streaming, move the current message to history immediately
             if (isStreamingRef.current) {
                 isStreamingRef.current = false; // Reset for next message
@@ -702,8 +782,8 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
                     timestamp: now,
                     shouldStream: false // Command responses should appear instantly
                 };
-                // If we have a current message that's an assistant message, move it to history
-                if (prev.currentMessage && prev.currentMessage.role === 'assistant') {
+                // If we have a current message that's an assistant message, move it to history (skip thought-only)
+                if (prev.currentMessage && prev.currentMessage.role === 'assistant' && !shouldSkipMessage(prev.currentMessage)) {
                     return {
                         ...prev,
                         messageHistory: [...prev.messageHistory, prev.currentMessage],
@@ -806,6 +886,15 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
             }));
         });
     }, []); // Empty dependency array - only register once
+    // Set up callback for sub-agent count change
+    React.useEffect(() => {
+        onSubAgentCountChange((count) => {
+            setState(prev => ({
+                ...prev,
+                subAgentCount: count
+            }));
+        });
+    }, []); // Empty dependency array - only register once
     // Set up callback for setting Auto mode (used after background task starts)
     React.useEffect(() => {
         onSetAutoModeSetup((enabled) => {
@@ -943,6 +1032,65 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
             });
         });
     }, []); // Empty dependency array - only register once
+    // Set up callback for MCP Add screen
+    React.useEffect(() => {
+        onMCPAddScreenSetup(() => {
+            clearScreen();
+            setState(prev => ({
+                ...prev,
+                screen: 'mcp-add',
+                isLoading: false
+            }));
+        });
+    }, []); // Empty dependency array - only register once
+    // Set up callback for MCP Remove screen
+    React.useEffect(() => {
+        onMCPRemoveScreenSetup((servers) => {
+            clearScreen();
+            setState(prev => ({
+                ...prev,
+                screen: 'mcp-remove',
+                mcpServers: servers,
+                isLoading: false
+            }));
+        });
+    }, []); // Empty dependency array - only register once
+    // Set up callback for MCP Enable screen
+    React.useEffect(() => {
+        onMCPEnableScreenSetup((servers) => {
+            clearScreen();
+            setState(prev => ({
+                ...prev,
+                screen: 'mcp-enable',
+                mcpServers: servers,
+                isLoading: false
+            }));
+        });
+    }, []); // Empty dependency array - only register once
+    // Set up callback for MCP Disable screen
+    React.useEffect(() => {
+        onMCPDisableScreenSetup((servers) => {
+            clearScreen();
+            setState(prev => ({
+                ...prev,
+                screen: 'mcp-disable',
+                mcpServers: servers,
+                isLoading: false
+            }));
+        });
+    }, []); // Empty dependency array - only register once
+    // Set up callback for MCP List screen
+    React.useEffect(() => {
+        onMCPListScreenSetup((servers) => {
+            clearScreen();
+            setState(prev => ({
+                ...prev,
+                screen: 'mcp-list',
+                mcpListData: servers,
+                isLoading: false
+            }));
+        });
+    }, []); // Empty dependency array - only register once
     // Sync UI message history to CLI adapter whenever it changes
     React.useEffect(() => {
         onUIMessageHistoryUpdate(state.messageHistory);
@@ -950,6 +1098,9 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
     // Set up callback for tool execution updates
     React.useEffect(() => {
         onToolExecutionUpdate((update) => {
+            // CIRCUIT BREAKER: Block incoming tool updates from "Zombie Agents"
+            if (ignoreIncomingAIUpdatesRef.current)
+                return;
             // Special handling for execute_command
             if (update.toolName === 'execute_command') {
                 try {
@@ -958,6 +1109,28 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
                 catch (e) { }
                 // STARTING EXECUTION
                 if (update.status === 'executing') {
+                    // Special handling for shell_input - DO NOT overwrite shell state
+                    // The agent is sending input to an EXISTING shell, so we must preserve the current shell state
+                    if (update.arguments?.shell_input) {
+                        setState(prev => ({
+                            ...prev,
+                            // Move current message to history if needed
+                            messageHistory: prev.currentMessage && !shouldSkipMessage(prev.currentMessage)
+                                ? [...prev.messageHistory, prev.currentMessage]
+                                : prev.messageHistory,
+                            // Update current message to show the tool execution
+                            currentMessage: {
+                                id: `tool-execute_command-${Date.now()}`,
+                                role: 'tool',
+                                content: '',
+                                timestamp: new Date(),
+                                toolExecution: { ...update }
+                            },
+                            isLoading: false,
+                            isAiWorking: true
+                        }));
+                        return;
+                    }
                     const command = update.arguments?.command || update.arguments?.CommandLine || update.arguments?.commandLine || '';
                     // Start a pending shell with a short delay
                     // This prevents the UI from flickering for very fast commands (like ls)
@@ -973,6 +1146,7 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
                             setState(prev => ({
                                 ...prev,
                                 shellState: {
+                                    shellId: `shell-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`,
                                     command: cmd,
                                     cwd: cwd,
                                     output: bufferedOutput,
@@ -981,10 +1155,11 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
                                     error: undefined,
                                     isFocused: false,
                                     isPty: update.arguments?.isPty || false,
-                                    remoteContext: update.arguments?.remoteContext
+                                    remoteContext: update.arguments?.remoteContext,
+                                    isAgentStarted: true // Mark as agent-started since it came from execute_command tool
                                 },
-                                // IMPORTANT: Always preserve current message by moving it to history first
-                                messageHistory: prev.currentMessage
+                                // IMPORTANT: Always preserve current message by moving it to history first (skip thought-only)
+                                messageHistory: prev.currentMessage && !shouldSkipMessage(prev.currentMessage)
                                     ? [...prev.messageHistory, prev.currentMessage]
                                     : prev.messageHistory,
                                 currentMessage: {
@@ -1040,8 +1215,8 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
                                     arguments: update.arguments
                                 }
                             };
-                            // Move current message to history if exists
-                            const newHistory = prev.currentMessage
+                            // Move current message to history if exists (skip thought-only)
+                            const newHistory = prev.currentMessage && !shouldSkipMessage(prev.currentMessage)
                                 ? [...prev.messageHistory, prev.currentMessage]
                                 : prev.messageHistory;
                             return {
@@ -1078,12 +1253,44 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
                                 arguments: update.arguments
                             }
                         };
+                        // Check if this was just an input string sent to an existing shell
+                        const isShellInput = update.arguments?.shell_input;
+                        // Reset input detection pending flag so we can detect NEXT prompt
+                        if (update.status === 'completed' || update.status === 'error') {
+                            inputDetectionPendingRef.current = false;
+                        }
+                        // Check if we hit a dead shell error during agent control
+                        const isDeadShellError = update.status === 'error' && update.error?.includes('No active interactive shell');
+                        // STRICT ISOLATION TRIGGER: If agent-controlled shell is done (completed or dead), kill the agent loop
+                        // LOGIC SPLIT:
+                        // 1. Manual Shell (User started, then Alt+I): Strict Sub-Agent behavior. Kill IMMEDIATELY on exit/completion.
+                        // 2. Agent Shell (Agent started via execute_command): Main Agent behavior. Kill only on ERROR. Allow success pass-through.
+                        const isAgentStarted = prev.shellState?.isAgentStarted;
+                        const shouldKill = isAgentStarted ? isDeadShellError : (update.status === 'completed' || isDeadShellError);
+                        if (prev.shellState?.isAgentControlled && shouldKill) {
+                            try {
+                                quickLog(`[${new Date().toISOString()}] [App] Strict Isolation: Agent Controlled shell exited/died. Engaging circuit breaker. (AgentStarted: ${isAgentStarted})\n`);
+                            }
+                            catch (e) { }
+                            ignoreIncomingAIUpdatesRef.current = true;
+                            // Terminate the shell input agent session
+                            if (prev.shellState?.shellId) {
+                                ShellInputAgent.terminateSession(prev.shellState.shellId);
+                            }
+                        }
                         return {
                             ...prev,
-                            shellState: undefined,
+                            // If it's just shell input, preserve the shell state UNLESS it's a dead shell error
+                            shellState: (isShellInput && !isDeadShellError) ? prev.shellState : undefined,
                             messageHistory: [...prev.messageHistory, shellMessage],
                             currentMessage: null,
-                            isAiWorking: prev.isAiWorking // Preserve existing state
+                            // Determine if AI should keep working:
+                            // - Normal shell input: preserve state (keep thrusting if in chain)
+                            // - Agent-started shell completed successfully: preserve state (agent loop continues)
+                            // - Dead shell error or manual shell completed: STOP thrusting (reset to false)
+                            isAiWorking: (isShellInput && !isDeadShellError) ? prev.isAiWorking
+                                : (isAgentStarted && !shouldKill) ? prev.isAiWorking
+                                    : false
                         };
                     });
                     return;
@@ -1177,7 +1384,7 @@ 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 {
-                                quickLog(`[${new Date().toISOString()}] [App] Found thought-only message, saving thinkingDuration ${pendingThinkingDuration}s for tool ${update.toolName}\n`);
+                                quickLog(`[${new Date().toISOString()}] [App] Skipping thought-only message (no content), saving thinkingDuration ${pendingThinkingDuration}s for tool ${update.toolName}\n`);
                             }
                             catch (e) { }
                         }
@@ -1209,7 +1416,7 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
                 }
                 catch (e) { }
                 let newHistory = prev.messageHistory;
-                if (prev.currentMessage) {
+                if (prev.currentMessage && !shouldSkipMessage(prev.currentMessage)) {
                     newHistory = [...prev.messageHistory, prev.currentMessage];
                 }
                 return {
@@ -1235,8 +1442,8 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
                         timestamp: new Date(),
                         connectionStatus: status
                     };
-                    // Move current message to history if exists
-                    const newHistory = prev.currentMessage
+                    // Move current message to history if exists (skip thought-only messages)
+                    const newHistory = prev.currentMessage && !shouldSkipMessage(prev.currentMessage)
                         ? [...prev.messageHistory, prev.currentMessage]
                         : prev.messageHistory;
                     return {
@@ -1265,8 +1472,8 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
                             currentMessage: null
                         };
                     }
-                    // Otherwise just add to history
-                    const newHistory = prev.currentMessage
+                    // Otherwise just add to history (skip thought-only messages)
+                    const newHistory = prev.currentMessage && !shouldSkipMessage(prev.currentMessage)
                         ? [...prev.messageHistory, prev.currentMessage, finalConnectionMessage]
                         : [...prev.messageHistory, finalConnectionMessage];
                     return {
@@ -1361,14 +1568,65 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
                 pendingShellRef.current.output += update.chunk;
                 return;
             }
+            // Update last output time for stall detection
+            lastOutputTimeRef.current = Date.now();
             setState(prev => {
                 // Update shell state if it's an execute_command
                 if (update.toolName === 'execute_command' && prev.shellState) {
+                    const newOutput = prev.shellState.output + update.chunk;
+                    // If agent control is enabled, schedule input detection
+                    if (prev.shellState.isAgentControlled && prev.shellState.isRunning && !inputDetectionPendingRef.current) {
+                        // Clear previous debounce timer
+                        if (detectionDebounceRef.current) {
+                            clearTimeout(detectionDebounceRef.current);
+                        }
+                        // Debounce: wait 500ms after last output before checking for input requirement
+                        // This ensures we don't trigger prematurely during fast output
+                        detectionDebounceRef.current = setTimeout(() => {
+                            const timeSinceLastOutput = Date.now() - lastOutputTimeRef.current;
+                            const detection = detectInputRequirement(newOutput, timeSinceLastOutput, 1000);
+                            if (detection.requiresInput && detection.confidence !== 'low') {
+                                inputDetectionPendingRef.current = true;
+                                // Add monitoring message
+                                const promptContext = extractPromptContext(newOutput);
+                                const inputType = getInputTypeDescription(detection);
+                                setState(innerPrev => {
+                                    if (!innerPrev.shellState)
+                                        return innerPrev;
+                                    const newMessage = {
+                                        id: `msg-${Date.now()}`,
+                                        type: 'thinking',
+                                        content: `Detected input prompt: "${promptContext}" (${inputType})`,
+                                        timestamp: new Date()
+                                    };
+                                    return {
+                                        ...innerPrev,
+                                        shellState: {
+                                            ...innerPrev.shellState,
+                                            monitoringMessages: [...(innerPrev.shellState.monitoringMessages || []), newMessage]
+                                        }
+                                    };
+                                });
+                                // Trigger AI re-prompting with shell context via isolated ShellInputAgent
+                                const shellId = prev.shellState?.shellId;
+                                if (shellId && ShellInputAgent.isSessionActive(shellId)) {
+                                    ShellInputAgent.handleInputPrompt(shellId, newOutput, promptContext, inputType, detection.confidence);
+                                }
+                                else {
+                                    quickLog(`[${new Date().toISOString()}] [Debounce] ShellInputAgent session not active! shellId=${shellId}\n`);
+                                }
+                                // Reset pending flag after a delay to allow for next detection
+                                setTimeout(() => {
+                                    inputDetectionPendingRef.current = false;
+                                }, 3000);
+                            }
+                        }, 500);
+                    }
                     return {
                         ...prev,
                         shellState: {
                             ...prev.shellState,
-                            output: prev.shellState.output + update.chunk
+                            output: newOutput
                         }
                     };
                 }
@@ -1390,7 +1648,7 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
                 return prev;
             });
         });
-    }, []);
+    }, [onMessage]);
     // Set up callback to receive plan mode changes
     React.useEffect(() => {
         onPlanModeChange((planMode) => {
@@ -1448,6 +1706,15 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
             }));
         });
     }, [onTokenCountUpdate]);
+    // Set up callback to receive context limit state from cli-adapter
+    React.useEffect(() => {
+        onContextLimitReached((reached) => {
+            setState(prev => ({
+                ...prev,
+                contextLimitReached: reached
+            }));
+        });
+    }, [onContextLimitReached]);
     // Set up callback to receive session quota updates from cli-adapter
     React.useEffect(() => {
         onSessionQuotaUpdate((remaining, canSend, timeRemaining) => {
@@ -1458,6 +1725,36 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
             }));
         });
     }, [onSessionQuotaUpdate]);
+    // Set up callback for when AI answers a shell prompt (updates thinking message to show tick)
+    React.useEffect(() => {
+        onPromptAnswered((shellId) => {
+            setState(prev => {
+                if (!prev.shellState || prev.shellState.shellId !== shellId) {
+                    return prev;
+                }
+                // Find the last 'thinking' message that isn't already answered and mark it
+                const messages = prev.shellState.monitoringMessages || [];
+                let updated = false;
+                const updatedMessages = [...messages].reverse().map((msg, idx) => {
+                    if (!updated && msg.type === 'thinking' && !msg.isAnswered) {
+                        updated = true;
+                        return { ...msg, isAnswered: true };
+                    }
+                    return msg;
+                }).reverse();
+                if (!updated) {
+                    return prev;
+                }
+                return {
+                    ...prev,
+                    shellState: {
+                        ...prev.shellState,
+                        monitoringMessages: updatedMessages
+                    }
+                };
+            });
+        });
+    }, [onPromptAnswered]);
     // Set up callback for plan approval requests
     React.useEffect(() => {
         onPlanApprovalRequest(async (plan) => {
@@ -1505,8 +1802,8 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
                         completionNote
                     }
                 };
-                // Move current message to history if exists
-                const newHistory = prev.currentMessage
+                // Move current message to history if exists (skip thought-only)
+                const newHistory = prev.currentMessage && !shouldSkipMessage(prev.currentMessage)
                     ? [...prev.messageHistory, prev.currentMessage, taskCompletedMessage]
                     : [...prev.messageHistory, taskCompletedMessage];
                 return {
@@ -1667,6 +1964,15 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
                 }));
                 return;
             }
+            // If in an MCP screen, return to chat
+            if (state.screen === 'mcp-add' || state.screen === 'mcp-remove' || state.screen === 'mcp-enable' || state.screen === 'mcp-disable' || state.screen === 'mcp-list') {
+                setState(prev => ({
+                    ...prev,
+                    screen: 'chat',
+                    mcpServers: undefined
+                }));
+                return;
+            }
             // If AI is working, cancel the operation
             if (state.isLoading || state.isAiWorking) {
                 // Cancel the current AI request
@@ -1811,8 +2117,8 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
         // In command mode, add command to history immediately
         if (state.commandMode) {
             setState(prev => {
-                // Move current message to history if exists
-                const newHistory = prev.currentMessage
+                // Move current message to history if exists (skip thought-only)
+                const newHistory = prev.currentMessage && !shouldSkipMessage(prev.currentMessage)
                     ? [...prev.messageHistory, prev.currentMessage]
                     : prev.messageHistory;
                 const commandMessage = {
@@ -1833,6 +2139,33 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
         }
         else if (!isSlashCommand) {
             // Only add user message to display if it's not a slash command
+            // INTERRUPT HANDLING: If AI is currently working, cancel and clean up first
+            // This allows the new message to replace the interrupted turn
+            if (state.isAiWorking || state.isLoading) {
+                // Cancel current request (cli-adapter will clean up its history)
+                onCancelRequest();
+                // Small delay to allow abort to propagate before new request starts
+                await new Promise(resolve => setTimeout(resolve, 50));
+                // Clean up UI state: remove any partial/interrupted messages
+                setState(prev => {
+                    // Filter out the last user message (the one we're replacing)
+                    let cleanedHistory = [...prev.messageHistory];
+                    for (let i = cleanedHistory.length - 1; i >= 0; i--) {
+                        if (cleanedHistory[i].role === 'user') {
+                            cleanedHistory.splice(i, 1);
+                            break; // Only remove the most recent user message
+                        }
+                    }
+                    return {
+                        ...prev,
+                        messageHistory: cleanedHistory,
+                        currentMessage: null,
+                        isLoading: false,
+                        isAiWorking: false,
+                        approvalRequest: undefined, // Clear any pending approval
+                    };
+                });
+            }
             // 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;
@@ -1850,7 +2183,7 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
             // 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 => {
-                const newHistory = prev.currentMessage
+                const newHistory = prev.currentMessage && !shouldSkipMessage(prev.currentMessage)
                     ? [...prev.messageHistory, prev.currentMessage]
                     : prev.messageHistory;
                 const userMessage = {
@@ -1993,8 +2326,8 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
                     content: `❌ Error: ${error.message || 'Unknown error occurred'}`,
                     timestamp: new Date()
                 };
-                // Move current to history if exists and add error
-                const newHistory = prev.currentMessage
+                // Move current to history if exists and add error (skip thought-only)
+                const newHistory = prev.currentMessage && !shouldSkipMessage(prev.currentMessage)
                     ? [...prev.messageHistory, prev.currentMessage, errorMessage]
                     : [...prev.messageHistory, errorMessage];
                 return {
@@ -2024,6 +2357,12 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
     const handleInputValueChange = useCallback((value) => {
         preservedInputTextRef.current = value;
     }, []);
+    // Memoize session commands to prevent unnecessary re-renders in InputBox
+    const sessionCommands = useMemo(() => {
+        return state.messageHistory
+            .filter(m => m.role === 'user')
+            .map(m => m.content);
+    }, [state.messageHistory]);
     // If in interactive editor mode, render minimal UI to keep Ink mounted
     // but don't render any visible content - the editor has the screen
     if (state.isInteractiveEditorMode) {
@@ -2079,7 +2418,55 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
                         return;
                     }
                     onShellSignal(signal);
+                }, shellId: state.shellState.shellId, isAgentControlled: state.shellState.isAgentControlled, onToggleAgentControl: () => {
+                    // Toggle agent control mode
+                    const wasAgentControlled = state.shellState?.isAgentControlled;
+                    const willBeAgentControlled = !wasAgentControlled;
+                    const currentOutput = state.shellState?.output || '';
+                    const isShellRunning = state.shellState?.isRunning;
+                    // Log the toggle using the imported quickLog
+                    quickLog(`[${new Date().toISOString()}] [AgentControl] Toggle: ${wasAgentControlled} -> ${willBeAgentControlled}, output length: ${currentOutput.length}, isRunning: ${isShellRunning}\n`);
+                    setState(prev => ({
+                        ...prev,
+                        shellState: prev.shellState ? {
+                            ...prev.shellState,
+                            isAgentControlled: willBeAgentControlled,
+                            monitoringMessages: willBeAgentControlled ? [] : prev.shellState.monitoringMessages
+                        } : undefined
+                    }));
+                    // Start or terminate ShellInputAgent session
+                    const shellId = state.shellState?.shellId;
+                    const shellCommand = state.shellState?.command || '';
+                    const shellCwd = state.shellState?.cwd || process.cwd();
+                    if (willBeAgentControlled && shellId) {
+                        // Start isolated shell input agent session with main conversation context
+                        const mainConversation = getMainConversation();
+                        ShellInputAgent.startSession(shellId, shellCommand, shellCwd, mainConversation);
+                        quickLog(`[${new Date().toISOString()}] [AgentControl] Started ShellInputAgent session for ${shellId}\n`);
+                        // Start AI-based input detection polling
+                        InputDetectionAgent.startPolling(shellId, currentOutput, // Pass current output directly
+                        shellCommand, shellCwd);
+                        quickLog(`[${new Date().toISOString()}] [AgentControl] Started AI-based input detection polling for ${shellId}\n`);
+                    }
+                    else if (!willBeAgentControlled && shellId) {
+                        // Stop AI-based input detection polling
+                        InputDetectionAgent.stopPolling(shellId);
+                        quickLog(`[${new Date().toISOString()}] [AgentControl] Stopped AI-based input detection polling for ${shellId}\n`);
+                        // Terminate shell input agent session
+                        ShellInputAgent.terminateSession(shellId);
+                        quickLog(`[${new Date().toISOString()}] [AgentControl] Terminated ShellInputAgent session for ${shellId}\n`);
+                    }
                 } })),
+            state.shellState?.isAgentControlled && state.shellState?.isFocused && state.shellState?.isRunning && (React.createElement(MonitorModeAIPanel, { messages: [
+                    ...(state.shellState.monitoringMessages || []),
+                    // Inject current assistant message if present (so AI thoughts/responses appear in panel)
+                    ...(state.currentMessage?.role === 'assistant' && state.currentMessage.content ? [{
+                            id: state.currentMessage.id,
+                            type: 'text', // Cast to literal type to match MonitorMessage interface
+                            content: state.currentMessage.content,
+                            timestamp: state.currentMessage.timestamp
+                        }] : [])
+                ], maxHeight: Math.floor((process.stdout.rows || 24) / 2) - 5, isActive: true })),
             state.isAiWorking && !state.shellState && !state.approvalRequest &&
                 !(state.currentMessage?.toolExecution?.status === 'executing') && (React.createElement(Box, { marginBottom: 1, paddingLeft: 1 },
                 React.createElement(LoadingIndicator, { key: "loading-indicator" }),
@@ -2090,12 +2477,14 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
                         resolve(approved);
                     }
                 } })) : (React.createElement(InputBox, { key: "input-box", onSubmit: (value, clipboardImages) => {
+                    // Reset "Zombie Agent" protection on new manual input
+                    ignoreIncomingAIUpdatesRef.current = false;
                     // Clear preserved input on submit
                     preservedInputTextRef.current = '';
                     handleSubmit(value, clipboardImages);
-                }, 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) => {
+                }, 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, contextLimitReached: state.contextLimitReached, isShellRunning: state.shellState?.isRunning, backgroundTaskCount: state.backgroundTaskCount, subAgentCount: state.subAgentCount, initialValue: preservedInputTextRef.current, onValueChange: handleInputValueChange, onSetAutoModeSetup: (callback) => {
                     setAutoModeCallbackRef.current = callback;
-                }, sessionQuotaExhausted: state.sessionQuotaExhausted, sessionQuotaTimeRemaining: state.sessionQuotaTimeRemaining }))),
+                }, sessionQuotaExhausted: state.sessionQuotaExhausted, sessionQuotaTimeRemaining: state.sessionQuotaTimeRemaining, aiAutoSuggestEnabled: state.aiAutoSuggest, sessionCommands: sessionCommands }))),
             state.showExitWarning && (React.createElement(Box, { marginTop: 1 },
                 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 },
@@ -2140,7 +2529,7 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
         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) => {
+                React.createElement(CircularSelectInput, { limit: listLimit, 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;
@@ -2199,7 +2588,7 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
         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) => {
+                React.createElement(CircularSelectInput, { limit: listLimit, 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;
@@ -2254,35 +2643,42 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
                 "\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(CircularSelectInput, { limit: listLimit, 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: () => {
+                        // Just close the view
+                        setState(prev => ({ ...prev, screen: 'chat' }));
+                    } })),
             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) => {
+                React.createElement(CircularSelectInput, { limit: listLimit, 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;
@@ -2398,7 +2794,7 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
                     }));
                 } }))),
         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, { color: "#9966ff", bold: true }, "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) => {
@@ -2409,35 +2805,49 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
                             cwd: task.cwd,
                             duration: `${durationSec}s`,
                             isRunning: task.isRunning,
-                            outputPreview: task.outputPreview.length > 60 ? task.outputPreview.slice(0, 57) + '...' : task.outputPreview
+                            outputPreview: task.outputPreview // Pass raw preview, sanitize in component
                         };
-                    }), 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) => {
+                    }), itemComponent: ({ isSelected, label, cwd, duration, isRunning, outputPreview }) => {
+                        // Calculate max width for wrapping (terminal width - border padding - left padding)
+                        const terminalWidth = process.stdout.columns || 80;
+                        const maxTextWidth = Math.max(terminalWidth - 10, 40);
+                        // Truncate cwd if too long
+                        const truncatedCwd = cwd && cwd.length > maxTextWidth
+                            ? cwd.slice(0, maxTextWidth - 3) + '...'
+                            : cwd;
+                        // Truncate output preview if too long (accounting for └─ prefix)
+                        const maxPreviewWidth = maxTextWidth - 3;
+                        // Sanitize: Strip ANSI codes and replace newlines with spaces
+                        const cleanPreview = outputPreview ? stripAnsi(outputPreview).replace(/[\r\n]+/g, ' ').trim() : '';
+                        const truncatedPreview = cleanPreview.length > maxPreviewWidth
+                            ? cleanPreview.slice(0, maxPreviewWidth - 3) + '...'
+                            : cleanPreview;
+                        return (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" },
+                                    " ",
+                                    duration)),
+                            React.createElement(Box, { paddingLeft: 4 },
+                                React.createElement(Text, { color: "gray", wrap: "truncate" }, truncatedCwd)),
+                            truncatedPreview && (React.createElement(Box, { paddingLeft: 4 },
+                                React.createElement(Text, { color: "gray", dimColor: true, wrap: "truncate" },
+                                    "\u2514\u2500 ",
+                                    truncatedPreview)))));
+                    }, 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, { color: "#ff6666", bold: true }, "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) => {
@@ -2449,26 +2859,125 @@ export const App = ({ onMessage, onCancelRequest, initialModel, initialPlanMode,
                             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) => {
+                    }), itemComponent: ({ isSelected, label, cwd, duration, isRunning }) => {
+                        // Calculate max width for wrapping (terminal width - border padding - left padding)
+                        const terminalWidth = process.stdout.columns || 80;
+                        const maxTextWidth = Math.max(terminalWidth - 10, 40);
+                        // Truncate cwd if too long
+                        const truncatedCwd = cwd && cwd.length > maxTextWidth
+                            ? cwd.slice(0, maxTextWidth - 3) + '...'
+                            : cwd;
+                        return (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" },
+                                    " ",
+                                    duration)),
+                            React.createElement(Box, { paddingLeft: 4 },
+                                React.createElement(Text, { color: "gray", wrap: "truncate" }, truncatedCwd))));
+                    }, 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"))))));
+                React.createElement(Text, { dimColor: true }, "Press ESC to return to chat")))),
+        state.screen === 'mcp-add' && (React.createElement(MCPAddScreen, { onAdd: (config) => {
+                const result = onMCPAddServer(config);
+                if (result.success) {
+                    // Return to chat with success message
+                    const successMessage = {
+                        id: `mcp-add-${Date.now()}`,
+                        role: 'system',
+                        content: `✅ MCP server "${config.name}" added successfully!\n\nRun \`/mcp refresh\` to connect to the new server.`,
+                        timestamp: new Date()
+                    };
+                    setState(prev => ({
+                        ...prev,
+                        screen: 'chat',
+                        messageHistory: [...prev.messageHistory, successMessage]
+                    }));
+                }
+            }, onCancel: () => {
+                setState(prev => ({
+                    ...prev,
+                    screen: 'chat'
+                }));
+            }, validateConfig: onMCPValidateConfig })),
+        state.screen === 'mcp-remove' && state.mcpServers && (React.createElement(MCPServerListScreen, { mode: "remove", servers: state.mcpServers, onSelect: (serverName) => {
+                onMCPRemoveServer(serverName);
+                const successMessage = {
+                    id: `mcp-remove-${Date.now()}`,
+                    role: 'system',
+                    content: `✅ MCP server "${serverName}" removed from configuration.`,
+                    timestamp: new Date()
+                };
+                setState(prev => ({
+                    ...prev,
+                    screen: 'chat',
+                    mcpServers: undefined,
+                    messageHistory: [...prev.messageHistory, successMessage]
+                }));
+            }, onCancel: () => {
+                setState(prev => ({
+                    ...prev,
+                    screen: 'chat',
+                    mcpServers: undefined
+                }));
+            } })),
+        state.screen === 'mcp-enable' && state.mcpServers && (React.createElement(MCPServerListScreen, { mode: "enable", servers: state.mcpServers, onSelect: (serverName) => {
+                onMCPEnableServer(serverName);
+                const successMessage = {
+                    id: `mcp-enable-${Date.now()}`,
+                    role: 'system',
+                    content: `✅ MCP server "${serverName}" enabled!\n\nRun \`/mcp refresh\` to connect.`,
+                    timestamp: new Date()
+                };
+                setState(prev => ({
+                    ...prev,
+                    screen: 'chat',
+                    mcpServers: undefined,
+                    messageHistory: [...prev.messageHistory, successMessage]
+                }));
+            }, onCancel: () => {
+                setState(prev => ({
+                    ...prev,
+                    screen: 'chat',
+                    mcpServers: undefined
+                }));
+            } })),
+        state.screen === 'mcp-disable' && state.mcpServers && (React.createElement(MCPServerListScreen, { mode: "disable", servers: state.mcpServers, onSelect: (serverName) => {
+                onMCPDisableServer(serverName);
+                const successMessage = {
+                    id: `mcp-disable-${Date.now()}`,
+                    role: 'system',
+                    content: `⏸️ MCP server "${serverName}" disabled. AI will no longer use its tools.`,
+                    timestamp: new Date()
+                };
+                setState(prev => ({
+                    ...prev,
+                    screen: 'chat',
+                    mcpServers: undefined,
+                    messageHistory: [...prev.messageHistory, successMessage]
+                }));
+            }, onCancel: () => {
+                setState(prev => ({
+                    ...prev,
+                    screen: 'chat',
+                    mcpServers: undefined
+                }));
+            } })),
+        state.screen === 'mcp-list' && state.mcpListData && (React.createElement(MCPListScreen, { servers: state.mcpListData, onClose: () => {
+                setState(prev => ({
+                    ...prev,
+                    screen: 'chat',
+                    mcpListData: undefined
+                }));
+            } }))));
 };
 //# sourceMappingURL=App.js.map