dexto 1.3.0 → 1.5.0

package/dist/cli/ink-cli/containers/OverlayContainer.js

@@ -3,38 +3,164 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  * OverlayContainer Component
  * Smart container for managing all overlays (selectors, autocomplete, approval)
  */
-import { useCallback } from 'react';
+import { useCallback, useRef, useImperativeHandle, forwardRef, useState } from 'react';
 import { Box } from 'ink';
 import { ApprovalStatus, DenialReason } from '@dexto/core';
-import { ApprovalPrompt } from '../components/ApprovalPrompt.js';
-import SlashCommandAutocomplete from '../components/SlashCommandAutocomplete.js';
+import { ApprovalPrompt, } from '../components/ApprovalPrompt.js';
+import { SlashCommandAutocomplete, } from '../components/SlashCommandAutocomplete.js';
 import ResourceAutocomplete from '../components/ResourceAutocomplete.js';
 import ModelSelectorRefactored from '../components/overlays/ModelSelectorRefactored.js';
 import SessionSelectorRefactored from '../components/overlays/SessionSelectorRefactored.js';
+import LogLevelSelector from '../components/overlays/LogLevelSelector.js';
+import StreamSelector from '../components/overlays/StreamSelector.js';
+import ToolBrowser from '../components/overlays/ToolBrowser.js';
+import McpServerList from '../components/overlays/McpServerList.js';
+import McpServerActions from '../components/overlays/McpServerActions.js';
+import McpAddChoice from '../components/overlays/McpAddChoice.js';
+import McpAddSelector from '../components/overlays/McpAddSelector.js';
+import SessionSubcommandSelector from '../components/overlays/SessionSubcommandSelector.js';
+import McpCustomTypeSelector from '../components/overlays/McpCustomTypeSelector.js';
+import McpCustomWizard from '../components/overlays/McpCustomWizard.js';
+import CustomModelWizard from '../components/overlays/CustomModelWizard.js';
+import ApiKeyInput from '../components/overlays/ApiKeyInput.js';
+import SearchOverlay from '../components/overlays/SearchOverlay.js';
+import PromptList from '../components/overlays/PromptList.js';
+import PromptAddChoice from '../components/overlays/PromptAddChoice.js';
+import PromptAddWizard from '../components/overlays/PromptAddWizard.js';
+import PromptDeleteSelector from '../components/overlays/PromptDeleteSelector.js';
+import { DextoValidationError, LLMErrorCode } from '@dexto/core';
 import { createUserMessage, convertHistoryToUIMessages } from '../utils/messageFormatting.js';
 import { generateMessageId } from '../utils/idGenerator.js';
+import { capture } from '../../../analytics/index.js';
 /**
  * Smart container for managing overlays
  * Handles all modal interactions (selectors, autocomplete, approval)
  */
-export function OverlayContainer({ state, dispatch, agent, inputService }) {
-    const { ui, input, approval } = state;
+export const OverlayContainer = forwardRef(function OverlayContainer({ ui, input, session, approval, setInput, setUi, setSession, setMessages, setApproval, setApprovalQueue, agent, inputService, buffer, refreshStatic, onSubmitPromptCommand, }, ref) {
     const eventBus = agent.agentEventBus;
+    // Refs to overlay components for input handling
+    const approvalRef = useRef(null);
+    const slashAutocompleteRef = useRef(null);
+    const resourceAutocompleteRef = useRef(null);
+    const modelSelectorRef = useRef(null);
+    const sessionSelectorRef = useRef(null);
+    const logLevelSelectorRef = useRef(null);
+    const streamSelectorRef = useRef(null);
+    const toolBrowserRef = useRef(null);
+    const mcpServerListRef = useRef(null);
+    const mcpServerActionsRef = useRef(null);
+    const mcpAddChoiceRef = useRef(null);
+    const mcpAddSelectorRef = useRef(null);
+    const mcpCustomTypeSelectorRef = useRef(null);
+    const mcpCustomWizardRef = useRef(null);
+    const customModelWizardRef = useRef(null);
+    const sessionSubcommandSelectorRef = useRef(null);
+    const apiKeyInputRef = useRef(null);
+    const searchOverlayRef = useRef(null);
+    const promptListRef = useRef(null);
+    const promptAddChoiceRef = useRef(null);
+    const promptAddWizardRef = useRef(null);
+    const promptDeleteSelectorRef = useRef(null);
+    // Expose handleInput method via ref - routes to appropriate overlay
+    useImperativeHandle(ref, () => ({
+        handleInput: (inputStr, key) => {
+            // Route to approval first (highest priority)
+            if (approval && approvalRef.current) {
+                return approvalRef.current.handleInput(inputStr, key);
+            }
+            // Route to active overlay based on type
+            switch (ui.activeOverlay) {
+                case 'slash-autocomplete':
+                    return (slashAutocompleteRef.current?.handleInput(inputStr, key) ?? false);
+                case 'resource-autocomplete':
+                    return (resourceAutocompleteRef.current?.handleInput(inputStr, key) ?? false);
+                case 'model-selector':
+                    return modelSelectorRef.current?.handleInput(inputStr, key) ?? false;
+                case 'session-selector':
+                    return sessionSelectorRef.current?.handleInput(inputStr, key) ?? false;
+                case 'log-level-selector':
+                    return logLevelSelectorRef.current?.handleInput(inputStr, key) ?? false;
+                case 'stream-selector':
+                    return streamSelectorRef.current?.handleInput(inputStr, key) ?? false;
+                case 'tool-browser':
+                    return toolBrowserRef.current?.handleInput(inputStr, key) ?? false;
+                case 'mcp-server-list':
+                    return mcpServerListRef.current?.handleInput(inputStr, key) ?? false;
+                case 'mcp-server-actions':
+                    return mcpServerActionsRef.current?.handleInput(inputStr, key) ?? false;
+                case 'mcp-add-choice':
+                    return mcpAddChoiceRef.current?.handleInput(inputStr, key) ?? false;
+                case 'mcp-add-selector':
+                    return mcpAddSelectorRef.current?.handleInput(inputStr, key) ?? false;
+                case 'mcp-custom-type-selector':
+                    return (mcpCustomTypeSelectorRef.current?.handleInput(inputStr, key) ??
+                        false);
+                case 'mcp-custom-wizard':
+                    return mcpCustomWizardRef.current?.handleInput(inputStr, key) ?? false;
+                case 'custom-model-wizard':
+                    return (customModelWizardRef.current?.handleInput(inputStr, key) ?? false);
+                case 'session-subcommand-selector':
+                    return (sessionSubcommandSelectorRef.current?.handleInput(inputStr, key) ??
+                        false);
+                case 'api-key-input':
+                    return apiKeyInputRef.current?.handleInput(inputStr, key) ?? false;
+                case 'search':
+                    return searchOverlayRef.current?.handleInput(inputStr, key) ?? false;
+                case 'prompt-list':
+                    return promptListRef.current?.handleInput(inputStr, key) ?? false;
+                case 'prompt-add-choice':
+                    return promptAddChoiceRef.current?.handleInput(inputStr, key) ?? false;
+                case 'prompt-add-wizard':
+                    return promptAddWizardRef.current?.handleInput(inputStr, key) ?? false;
+                case 'prompt-delete-selector':
+                    return (promptDeleteSelectorRef.current?.handleInput(inputStr, key) ?? false);
+                default:
+                    return false;
+            }
+        },
+    }), [approval, ui.activeOverlay]);
     // NOTE: Automatic overlay detection removed to prevent infinite loop
-    // Overlays are now shown explicitly via SHOW_OVERLAY actions from InputContainer
+    // Overlays are now shown explicitly via setUi from InputContainer
     // or from the main component's input detection logic
+    // Helper: Complete approval and process queue
+    const completeApproval = useCallback(() => {
+        setApprovalQueue((queue) => {
+            if (queue.length > 0) {
+                // Show next approval from queue
+                const [next, ...rest] = queue;
+                setApproval(next);
+                setUi((prev) => ({ ...prev, activeOverlay: 'approval' }));
+                return rest;
+            }
+            else {
+                // No more approvals
+                setApproval(null);
+                setUi((prev) => ({ ...prev, activeOverlay: 'none' }));
+                return [];
+            }
+        });
+    }, [setApproval, setApprovalQueue, setUi]);
     // Handle approval responses
-    const handleApprove = useCallback((rememberChoice) => {
+    const handleApprove = useCallback((options) => {
         if (!approval || !eventBus)
             return;
+        // Enable "accept all edits" mode if requested
+        if (options.enableAcceptEditsMode) {
+            setUi((prev) => ({ ...prev, autoApproveEdits: true }));
+        }
         eventBus.emit('approval:response', {
             approvalId: approval.approvalId,
             status: ApprovalStatus.APPROVED,
             sessionId: approval.sessionId,
-            data: { rememberChoice },
+            data: {
+                rememberChoice: options.rememberChoice,
+                rememberPattern: options.rememberPattern,
+                formData: options.formData,
+                rememberDirectory: options.rememberDirectory,
+            },
         });
-        dispatch({ type: 'APPROVAL_COMPLETE' });
-    }, [approval, eventBus, dispatch]);
+        completeApproval();
+    }, [approval, eventBus, completeApproval, setUi]);
     const handleDeny = useCallback(() => {
         if (!approval || !eventBus)
             return;
@@ -45,8 +171,8 @@ export function OverlayContainer({ state, dispatch, agent, inputService }) {
             reason: DenialReason.USER_DENIED,
             message: 'User denied the tool execution',
         });
-        dispatch({ type: 'APPROVAL_COMPLETE' });
-    }, [approval, eventBus, dispatch]);
+        completeApproval();
+    }, [approval, eventBus, completeApproval]);
     const handleCancelApproval = useCallback(() => {
         if (!approval || !eventBus)
             return;
@@ -57,193 +183,464 @@ export function OverlayContainer({ state, dispatch, agent, inputService }) {
             reason: DenialReason.USER_CANCELLED,
             message: 'User cancelled the approval request',
         });
-        dispatch({ type: 'APPROVAL_COMPLETE' });
-    }, [approval, eventBus, dispatch]);
+        completeApproval();
+    }, [approval, eventBus, completeApproval]);
+    // Helper: Check if error is due to missing API key
+    const isApiKeyMissingError = (error) => {
+        if (error instanceof DextoValidationError) {
+            const apiKeyIssue = error.issues.find((issue) => issue.code === LLMErrorCode.API_KEY_MISSING);
+            if (apiKeyIssue && apiKeyIssue.context) {
+                // Extract provider from context
+                const context = apiKeyIssue.context;
+                if (context.provider) {
+                    return context.provider;
+                }
+            }
+        }
+        return null;
+    };
     // Handle model selection
-    const handleModelSelect = useCallback(async (provider, model) => {
-        dispatch({ type: 'CLOSE_OVERLAY' });
-        dispatch({ type: 'INPUT_CLEAR' });
+    const handleModelSelect = useCallback(async (provider, model, displayName, baseURL) => {
+        setUi((prev) => ({ ...prev, activeOverlay: 'none', mcpWizardServerType: null }));
+        buffer.setText('');
+        setInput((prev) => ({ ...prev, historyIndex: -1 }));
         try {
-            dispatch({
-                type: 'MESSAGE_ADD',
-                message: {
+            setMessages((prev) => [
+                ...prev,
+                {
                     id: generateMessageId('system'),
                     role: 'system',
-                    content: `🔄 Switching to ${model} (${provider})...`,
+                    content: `🔄 Switching to ${displayName || model} (${provider})...`,
                     timestamp: new Date(),
                 },
-            });
-            // Pass sessionId from state to switchLLM (WebUI pattern)
-            const currentSessionId = state.session.id;
-            await agent.switchLLM({ provider: provider, model }, currentSessionId || undefined);
-            dispatch({
-                type: 'MESSAGE_ADD',
-                message: {
+            ]);
+            await agent.switchLLM({ provider: provider, model, baseURL }, session.id || undefined);
+            // Update session state with display name (fallback to model ID)
+            setSession((prev) => ({ ...prev, modelName: displayName || model }));
+            setMessages((prev) => [
+                ...prev,
+                {
                     id: generateMessageId('system'),
                     role: 'system',
-                    content: `✅ Successfully switched to ${model} (${provider})`,
+                    content: `✅ Successfully switched to ${displayName || model} (${provider})`,
                     timestamp: new Date(),
                 },
-            });
+            ]);
         }
         catch (error) {
-            dispatch({
-                type: 'ERROR',
-                errorMessage: `Failed to switch model: ${error instanceof Error ? error.message : String(error)}`,
-            });
+            // Check if error is due to missing API key
+            const missingProvider = isApiKeyMissingError(error);
+            if (missingProvider) {
+                // Store pending model switch and show API key input
+                // Use missingProvider (from error) as the authoritative source
+                setUi((prev) => ({
+                    ...prev,
+                    activeOverlay: 'api-key-input',
+                    pendingModelSwitch: {
+                        provider: missingProvider,
+                        model,
+                        ...(displayName && { displayName }),
+                    },
+                }));
+                setMessages((prev) => [
+                    ...prev,
+                    {
+                        id: generateMessageId('system'),
+                        role: 'system',
+                        content: `🔑 API key required for ${provider}`,
+                        timestamp: new Date(),
+                    },
+                ]);
+                return;
+            }
+            setMessages((prev) => [
+                ...prev,
+                {
+                    id: generateMessageId('error'),
+                    role: 'system',
+                    content: `❌ Failed to switch model: ${error instanceof Error ? error.message : String(error)}`,
+                    timestamp: new Date(),
+                },
+            ]);
         }
-    }, [dispatch, agent, state.session.id]);
+    }, [setUi, setInput, setMessages, setSession, agent, session.id, buffer]);
+    // State for editing custom model
+    const [editingModel, setEditingModel] = useState(null);
+    // Handle "Add custom model" from model selector
+    const handleAddCustomModel = useCallback(() => {
+        setEditingModel(null);
+        setUi((prev) => ({ ...prev, activeOverlay: 'custom-model-wizard' }));
+    }, [setUi]);
+    // Handle "Edit custom model" from model selector
+    const handleEditCustomModel = useCallback((model) => {
+        setEditingModel(model);
+        setUi((prev) => ({ ...prev, activeOverlay: 'custom-model-wizard' }));
+    }, [setUi]);
+    // Handle custom model wizard completion
+    const handleCustomModelComplete = useCallback(async (model) => {
+        const wasEditing = editingModel !== null;
+        setEditingModel(null);
+        setUi((prev) => ({ ...prev, activeOverlay: 'none' }));
+        buffer.setText('');
+        setInput((prev) => ({ ...prev, historyIndex: -1 }));
+        if (wasEditing) {
+            // For edits, just show confirmation message
+            setMessages((prev) => [
+                ...prev,
+                {
+                    id: generateMessageId('system'),
+                    role: 'system',
+                    content: `✅ Custom model "${model.displayName || model.name}" updated`,
+                    timestamp: new Date(),
+                },
+            ]);
+        }
+        else {
+            // For new models, auto-switch to the newly created model
+            setMessages((prev) => [
+                ...prev,
+                {
+                    id: generateMessageId('system'),
+                    role: 'system',
+                    content: `✅ Custom model "${model.displayName || model.name}" saved`,
+                    timestamp: new Date(),
+                },
+            ]);
+            // Switch to the new model
+            await handleModelSelect(model.provider, model.name, model.displayName, model.baseURL);
+        }
+    }, [setUi, setInput, setMessages, buffer, editingModel, handleModelSelect]);
+    // Handle API key saved - retry the model switch
+    const handleApiKeySaved = useCallback(async (meta) => {
+        const pending = ui.pendingModelSwitch;
+        if (!pending) {
+            // No pending switch, just close
+            setUi((prev) => ({
+                ...prev,
+                activeOverlay: 'none',
+                pendingModelSwitch: null,
+            }));
+            return;
+        }
+        setUi((prev) => ({
+            ...prev,
+            activeOverlay: 'none',
+            pendingModelSwitch: null,
+        }));
+        setMessages((prev) => [
+            ...prev,
+            {
+                id: generateMessageId('system'),
+                role: 'system',
+                content: `✅ API key saved for ${meta.provider}`,
+                timestamp: new Date(),
+            },
+        ]);
+        // Retry the model switch
+        try {
+            const pendingDisplayName = pending.displayName || pending.model;
+            setMessages((prev) => [
+                ...prev,
+                {
+                    id: generateMessageId('system'),
+                    role: 'system',
+                    content: `🔄 Retrying switch to ${pendingDisplayName} (${pending.provider})...`,
+                    timestamp: new Date(),
+                },
+            ]);
+            await agent.switchLLM({ provider: pending.provider, model: pending.model }, session.id || undefined);
+            // Update session state with display name (fallback to model ID)
+            setSession((prev) => ({ ...prev, modelName: pendingDisplayName }));
+            setMessages((prev) => [
+                ...prev,
+                {
+                    id: generateMessageId('system'),
+                    role: 'system',
+                    content: `✅ Successfully switched to ${pendingDisplayName} (${pending.provider})`,
+                    timestamp: new Date(),
+                },
+            ]);
+        }
+        catch (error) {
+            setMessages((prev) => [
+                ...prev,
+                {
+                    id: generateMessageId('error'),
+                    role: 'system',
+                    content: `❌ Failed to switch model: ${error instanceof Error ? error.message : String(error)}`,
+                    timestamp: new Date(),
+                },
+            ]);
+        }
+    }, [ui.pendingModelSwitch, setUi, setMessages, setSession, agent, session.id]);
+    // Handle API key input close (without saving)
+    const handleApiKeyClose = useCallback(() => {
+        setUi((prev) => ({
+            ...prev,
+            activeOverlay: 'none',
+            pendingModelSwitch: null,
+        }));
+    }, [setUi]);
+    // Handle search result selection - display the result context
+    const handleSearchResultSelect = useCallback((result) => {
+        setUi((prev) => ({ ...prev, activeOverlay: 'none' }));
+        buffer.setText('');
+        setInput((prev) => ({ ...prev, historyIndex: -1 }));
+        // Display the selected search result as a system message
+        const roleLabel = result.message.role === 'user'
+            ? '👤 User'
+            : result.message.role === 'assistant'
+                ? '🤖 Assistant'
+                : `📋 ${result.message.role}`;
+        setMessages((prev) => [
+            ...prev,
+            {
+                id: generateMessageId('system'),
+                role: 'system',
+                content: `🔍 Search Result from session ${result.sessionId.slice(0, 8)}:\n\n${roleLabel}:\n${result.context}`,
+                timestamp: new Date(),
+            },
+        ]);
+    }, [setUi, setInput, setMessages, buffer]);
     // Handle session selection
     const handleSessionSelect = useCallback(async (newSessionId) => {
-        dispatch({ type: 'CLOSE_OVERLAY' });
-        dispatch({ type: 'INPUT_CLEAR' });
+        setUi((prev) => ({ ...prev, activeOverlay: 'none', mcpWizardServerType: null }));
+        buffer.setText('');
+        setInput((prev) => ({ ...prev, historyIndex: -1 }));
         try {
-            // Check if already on this session (use state, not getCurrentSessionId)
-            const currentId = state.session.id;
-            if (newSessionId === currentId) {
-                dispatch({
-                    type: 'MESSAGE_ADD',
-                    message: {
+            // Check if already on this session
+            if (newSessionId === session.id) {
+                setMessages((prev) => [
+                    ...prev,
+                    {
                         id: generateMessageId('system'),
                         role: 'system',
                         content: `ℹ️  Already using session ${newSessionId.slice(0, 8)}`,
                         timestamp: new Date(),
                     },
-                });
+                ]);
                 return;
             }
-            dispatch({
-                type: 'MESSAGE_ADD',
-                message: {
-                    id: generateMessageId('system'),
-                    role: 'system',
-                    content: `🔄 Switching to session ${newSessionId.slice(0, 8)}...`,
-                    timestamp: new Date(),
-                },
+            // Track session switch analytics
+            capture('dexto_session_switched', {
+                source: 'cli',
+                fromSessionId: session.id || null,
+                toSessionId: newSessionId,
+            });
+            // Clear messages and session state before switching
+            setMessages([]);
+            setApproval(null);
+            setApprovalQueue([]);
+            setSession({
+                id: newSessionId,
+                hasActiveSession: true,
+                modelName: session.modelName,
             });
             // Verify session exists
-            const session = await agent.getSession(newSessionId);
-            if (!session) {
+            const sessionData = await agent.getSession(newSessionId);
+            if (!sessionData) {
                 throw new Error(`Session ${newSessionId} not found`);
             }
-            // Clear messages and update sessionId (WebUI pattern - no loadSessionAsDefault)
-            dispatch({ type: 'SESSION_CLEAR' }); // Clears messages
-            dispatch({
-                type: 'SESSION_SET',
-                sessionId: newSessionId,
-                hasActiveSession: true,
-            });
             // Load session history
             const history = await agent.getSessionHistory(newSessionId);
             if (history && history.length > 0) {
                 const historyMessages = convertHistoryToUIMessages(history, newSessionId);
-                dispatch({ type: 'MESSAGE_ADD_MULTIPLE', messages: historyMessages });
+                setMessages(historyMessages);
             }
-            dispatch({
-                type: 'MESSAGE_ADD',
-                message: {
+            setMessages((prev) => [
+                ...prev,
+                {
                     id: generateMessageId('system'),
                     role: 'system',
                     content: `✅ Switched to session ${newSessionId.slice(0, 8)}`,
                     timestamp: new Date(),
                 },
-            });
+            ]);
+            // Force Static component to re-render with the new history
+            refreshStatic?.();
         }
         catch (error) {
-            dispatch({
-                type: 'ERROR',
-                errorMessage: `Failed to switch session: ${error instanceof Error ? error.message : String(error)}`,
-            });
+            setMessages((prev) => [
+                ...prev,
+                {
+                    id: generateMessageId('error'),
+                    role: 'system',
+                    content: `❌ Failed to switch session: ${error instanceof Error ? error.message : String(error)}`,
+                    timestamp: new Date(),
+                },
+            ]);
         }
-    }, [dispatch, agent, state.session.id]);
+    }, [
+        setUi,
+        setInput,
+        setMessages,
+        setApproval,
+        setApprovalQueue,
+        setSession,
+        agent,
+        session.id,
+        session.modelName,
+        buffer,
+        refreshStatic,
+    ]);
     // Handle slash command/prompt selection
     const handlePromptSelect = useCallback(async (prompt) => {
-        const commandText = `/${prompt.name}`;
-        dispatch({ type: 'CLOSE_OVERLAY' });
-        dispatch({ type: 'INPUT_CLEAR' });
+        // Use displayName for command text (user-friendly name without prefix)
+        const commandName = prompt.displayName || prompt.name;
+        const commandText = `/${commandName}`;
+        setUi((prev) => ({ ...prev, activeOverlay: 'none', mcpWizardServerType: null }));
+        buffer.setText('');
+        setInput((prev) => ({ ...prev, historyIndex: -1 }));
+        // Route prompts through InputContainer for streaming pipeline
+        if (onSubmitPromptCommand) {
+            await onSubmitPromptCommand(commandText);
+            return;
+        }
+        // Fallback when callback not provided (shouldn't happen in normal usage)
         // Show user message for the executed command
         const userMessage = createUserMessage(commandText);
-        dispatch({
-            type: 'MESSAGE_ADD',
-            message: userMessage,
-        });
-        dispatch({ type: 'PROCESSING_START' });
+        setMessages((prev) => [...prev, userMessage]);
+        setUi((prev) => ({ ...prev, isProcessing: true, isCancelling: false }));
         const { CommandService } = await import('../services/CommandService.js');
         const commandService = new CommandService();
         try {
-            // Pass sessionId from state to command execution
-            const currentSessionId = state.session.id;
-            const result = await commandService.executeCommand(prompt.name, [], agent, currentSessionId || undefined);
-            if (result.type === 'prompt') {
-                // Prompt execution continues via event bus
-                return;
-            }
+            // Use displayName to match the registered command name
+            const result = await commandService.executeCommand(commandName, [], agent, session.id || undefined);
             if (result.type === 'output' && result.output) {
-                dispatch({
-                    type: 'MESSAGE_ADD',
-                    message: {
+                const output = result.output;
+                setMessages((prev) => [
+                    ...prev,
+                    {
                         id: generateMessageId('command'),
                         role: 'system',
-                        content: result.output,
+                        content: output,
                         timestamp: new Date(),
                     },
-                });
+                ]);
             }
-            dispatch({ type: 'PROCESSING_END' });
+            if (result.type === 'styled' && result.styled) {
+                const { fallbackText, styledType, styledData } = result.styled;
+                setMessages((prev) => [
+                    ...prev,
+                    {
+                        id: generateMessageId('command'),
+                        role: 'system',
+                        content: fallbackText,
+                        timestamp: new Date(),
+                        styledType,
+                        styledData,
+                    },
+                ]);
+            }
+            setUi((prev) => ({
+                ...prev,
+                isProcessing: false,
+                isCancelling: false,
+                isThinking: false,
+            }));
         }
         catch (error) {
-            dispatch({
-                type: 'ERROR',
-                errorMessage: error instanceof Error ? error.message : String(error),
-            });
+            setMessages((prev) => [
+                ...prev,
+                {
+                    id: generateMessageId('error'),
+                    role: 'system',
+                    content: `❌ ${error instanceof Error ? error.message : String(error)}`,
+                    timestamp: new Date(),
+                },
+            ]);
+            setUi((prev) => ({
+                ...prev,
+                isProcessing: false,
+                isCancelling: false,
+                isThinking: false,
+            }));
         }
-    }, [dispatch, agent, state.session.id]);
+    }, [setUi, setInput, setMessages, agent, session.id, buffer, onSubmitPromptCommand]);
     // Handle loading command/prompt into input for editing (Tab key)
     const handleSystemCommandSelect = useCallback(async (command) => {
+        // Check if this command has an interactive overlay
+        const { getCommandOverlayForSelect } = await import('../utils/commandOverlays.js');
+        const overlay = getCommandOverlayForSelect(command);
+        if (overlay) {
+            buffer.setText('');
+            setInput((prev) => ({ ...prev, historyIndex: -1 }));
+            setUi((prev) => ({
+                ...prev,
+                activeOverlay: overlay,
+                mcpWizardServerType: null,
+            }));
+            return;
+        }
         const commandText = `/${command}`;
-        dispatch({ type: 'CLOSE_OVERLAY' });
-        dispatch({ type: 'INPUT_CLEAR' });
+        setUi((prev) => ({ ...prev, activeOverlay: 'none', mcpWizardServerType: null }));
+        buffer.setText('');
+        setInput((prev) => ({ ...prev, historyIndex: -1 }));
         // Show user message for the executed command
         const userMessage = createUserMessage(commandText);
-        dispatch({
-            type: 'MESSAGE_ADD',
-            message: userMessage,
-        });
-        dispatch({ type: 'PROCESSING_START' });
+        setMessages((prev) => [...prev, userMessage]);
+        setUi((prev) => ({ ...prev, isProcessing: true, isCancelling: false }));
         const { CommandService } = await import('../services/CommandService.js');
         const commandService = new CommandService();
         try {
-            // Pass sessionId from state to command execution
-            const currentSessionId = state.session.id;
-            const result = await commandService.executeCommand(command, [], agent, currentSessionId || undefined);
-            if (result.type === 'prompt') {
-                // Prompt execution continues via event bus
-                return;
-            }
+            const result = await commandService.executeCommand(command, [], agent, session.id || undefined);
             if (result.type === 'output' && result.output) {
-                dispatch({
-                    type: 'MESSAGE_ADD',
-                    message: {
+                const output = result.output;
+                setMessages((prev) => [
+                    ...prev,
+                    {
                         id: generateMessageId('command'),
                         role: 'system',
-                        content: result.output,
+                        content: output,
                         timestamp: new Date(),
                     },
-                });
+                ]);
             }
-            dispatch({ type: 'PROCESSING_END' });
+            if (result.type === 'styled' && result.styled) {
+                const { fallbackText, styledType, styledData } = result.styled;
+                setMessages((prev) => [
+                    ...prev,
+                    {
+                        id: generateMessageId('command'),
+                        role: 'system',
+                        content: fallbackText,
+                        timestamp: new Date(),
+                        styledType,
+                        styledData,
+                    },
+                ]);
+            }
+            setUi((prev) => ({
+                ...prev,
+                isProcessing: false,
+                isCancelling: false,
+                isThinking: false,
+            }));
         }
         catch (error) {
-            dispatch({
-                type: 'ERROR',
-                errorMessage: error instanceof Error ? error.message : String(error),
-            });
+            setMessages((prev) => [
+                ...prev,
+                {
+                    id: generateMessageId('error'),
+                    role: 'system',
+                    content: `❌ ${error instanceof Error ? error.message : String(error)}`,
+                    timestamp: new Date(),
+                },
+            ]);
+            setUi((prev) => ({
+                ...prev,
+                isProcessing: false,
+                isCancelling: false,
+                isThinking: false,
+            }));
         }
-    }, [dispatch, agent, state.session.id]);
+    }, [setInput, setUi, setMessages, agent, session.id, buffer]);
     const handleLoadIntoInput = useCallback((text) => {
-        dispatch({ type: 'INPUT_CHANGE', value: text });
-        dispatch({ type: 'CLOSE_OVERLAY' });
-    }, [dispatch]);
+        // Update both buffer (source of truth) and state
+        buffer.setText(text);
+        setInput((prev) => ({ ...prev, value: text }));
+        setUi((prev) => ({ ...prev, activeOverlay: 'none', mcpWizardServerType: null }));
+    }, [buffer, setInput, setUi]);
     // Handle resource selection
     const handleResourceSelect = useCallback((resource) => {
         // Insert resource reference into input
@@ -252,12 +649,697 @@ export function OverlayContainer({ state, dispatch, agent, inputService }) {
             const before = input.value.slice(0, atIndex + 1);
             const uriParts = resource.uri.split('/');
             const reference = resource.name || uriParts[uriParts.length - 1] || resource.uri;
-            dispatch({ type: 'INPUT_CHANGE', value: `${before}${reference} ` });
+            const newValue = `${before}${reference} `;
+            buffer.setText(newValue);
+            setInput((prev) => ({ ...prev, value: newValue }));
         }
-        dispatch({ type: 'CLOSE_OVERLAY' });
-    }, [dispatch, input.value]);
+        setUi((prev) => ({ ...prev, activeOverlay: 'none', mcpWizardServerType: null }));
+    }, [input.value, buffer, setInput, setUi]);
     const handleClose = useCallback(() => {
-        dispatch({ type: 'CLOSE_OVERLAY' });
-    }, [dispatch]);
-    return (_jsxs(_Fragment, { children: [approval && (_jsx(ApprovalPrompt, { approval: approval, onApprove: handleApprove, onDeny: handleDeny, onCancel: handleCancelApproval })), ui.activeOverlay === 'slash-autocomplete' && (_jsx(Box, { marginTop: 1, children: _jsx(SlashCommandAutocomplete, { isVisible: true, searchQuery: input.value, onSelectPrompt: handlePromptSelect, onSelectSystemCommand: handleSystemCommandSelect, onLoadIntoInput: handleLoadIntoInput, onClose: handleClose, agent: agent }) })), ui.activeOverlay === 'resource-autocomplete' && (_jsx(Box, { marginTop: 1, children: _jsx(ResourceAutocomplete, { isVisible: true, searchQuery: input.value, onSelectResource: handleResourceSelect, onLoadIntoInput: handleLoadIntoInput, onClose: handleClose, agent: agent }) })), ui.activeOverlay === 'model-selector' && (_jsx(Box, { marginTop: 1, children: _jsx(ModelSelectorRefactored, { isVisible: true, onSelectModel: handleModelSelect, onClose: handleClose, agent: agent }) })), ui.activeOverlay === 'session-selector' && (_jsx(Box, { marginTop: 1, children: _jsx(SessionSelectorRefactored, { isVisible: true, onSelectSession: handleSessionSelect, onClose: handleClose, agent: agent, currentSessionId: state.session.id || undefined }) }))] }));
-}
+        setUi((prev) => ({ ...prev, activeOverlay: 'none', mcpWizardServerType: null }));
+    }, [setUi]);
+    // Handle log level selection
+    const handleLogLevelSelect = useCallback((level) => {
+        setUi((prev) => ({ ...prev, activeOverlay: 'none', mcpWizardServerType: null }));
+        buffer.setText('');
+        setInput((prev) => ({ ...prev, historyIndex: -1 }));
+        // Set level on agent's logger (propagates to all child loggers via shared ref)
+        agent.logger.setLevel(level);
+        setMessages((prev) => [
+            ...prev,
+            {
+                id: generateMessageId('system'),
+                role: 'system',
+                content: `📊 Log level set to: ${level}`,
+                timestamp: new Date(),
+            },
+        ]);
+    }, [setUi, setInput, setMessages, agent, buffer]);
+    // Handle stream mode selection
+    const handleStreamSelect = useCallback((enabled) => {
+        setUi((prev) => ({ ...prev, activeOverlay: 'none', mcpWizardServerType: null }));
+        buffer.setText('');
+        setInput((prev) => ({ ...prev, historyIndex: -1 }));
+        setMessages((prev) => [
+            ...prev,
+            {
+                id: generateMessageId('system'),
+                role: 'system',
+                content: enabled
+                    ? '▶️ Streaming enabled - responses will appear as they are generated'
+                    : '⏸️ Streaming disabled - responses will appear when complete',
+                timestamp: new Date(),
+            },
+        ]);
+    }, [setUi, setInput, setMessages, buffer]);
+    // Handle MCP server list actions (select server or add new)
+    const handleMcpServerListAction = useCallback((action) => {
+        if (action.type === 'select-server') {
+            // Show server actions overlay
+            setUi((prev) => ({
+                ...prev,
+                activeOverlay: 'mcp-server-actions',
+                selectedMcpServer: action.server,
+            }));
+        }
+        else if (action.type === 'add-new') {
+            // Show add choice overlay
+            setUi((prev) => ({
+                ...prev,
+                activeOverlay: 'mcp-add-choice',
+            }));
+        }
+    }, [setUi]);
+    // Handle MCP server actions (enable/disable/delete/back)
+    const handleMcpServerAction = useCallback(async (action) => {
+        const { server } = action;
+        if (action.type === 'back') {
+            // Go back to server list
+            setUi((prev) => ({
+                ...prev,
+                activeOverlay: 'mcp-server-list',
+                selectedMcpServer: null,
+            }));
+            return;
+        }
+        // Close overlay and reset input for actual actions
+        setUi((prev) => ({
+            ...prev,
+            activeOverlay: 'none',
+            selectedMcpServer: null,
+            mcpWizardServerType: null,
+        }));
+        buffer.setText('');
+        setInput((prev) => ({ ...prev, historyIndex: -1 }));
+        if (action.type === 'enable' || action.type === 'disable') {
+            const newEnabled = action.type === 'enable';
+            setMessages((prev) => [
+                ...prev,
+                {
+                    id: generateMessageId('system'),
+                    role: 'system',
+                    content: `${newEnabled ? '▶️' : '⏸️'} ${newEnabled ? 'Enabling' : 'Disabling'} ${server.name}...`,
+                    timestamp: new Date(),
+                },
+            ]);
+            try {
+                // Enable or disable the server FIRST (before persisting)
+                // This ensures config only reflects successful state changes
+                if (newEnabled) {
+                    try {
+                        await agent.enableMcpServer(server.name);
+                    }
+                    catch (connectError) {
+                        // Connection failed - don't persist to config
+                        setMessages((prev) => [
+                            ...prev,
+                            {
+                                id: generateMessageId('system'),
+                                role: 'system',
+                                content: `⚠️ Failed to enable server: ${connectError instanceof Error ? connectError.message : String(connectError)}`,
+                                timestamp: new Date(),
+                            },
+                        ]);
+                        return;
+                    }
+                }
+                else {
+                    await agent.disableMcpServer(server.name);
+                }
+                // Import persistence utilities
+                const { updateMcpServerField } = await import('@dexto/agent-management');
+                // Persist to config file AFTER successful enable/disable
+                await updateMcpServerField(agent.getAgentFilePath(), server.name, 'enabled', newEnabled);
+                setMessages((prev) => [
+                    ...prev,
+                    {
+                        id: generateMessageId('system'),
+                        role: 'system',
+                        content: `✅ ${server.name} ${newEnabled ? 'enabled' : 'disabled'}`,
+                        timestamp: new Date(),
+                    },
+                ]);
+            }
+            catch (error) {
+                // Format error message with details if available
+                let errorMessage = error instanceof Error ? error.message : String(error);
+                if (error instanceof DextoValidationError && error.issues.length > 0) {
+                    const issueDetails = error.issues
+                        .map((i) => {
+                        const path = i.path?.length ? `[${i.path.join('.')}] ` : '';
+                        return `  - ${path}${i.message}`;
+                    })
+                        .join('\n');
+                    errorMessage = `Validation failed:\n${issueDetails}`;
+                }
+                setMessages((prev) => [
+                    ...prev,
+                    {
+                        id: generateMessageId('error'),
+                        role: 'system',
+                        content: `❌ Failed to ${action.type} server: ${errorMessage}`,
+                        timestamp: new Date(),
+                    },
+                ]);
+            }
+        }
+        else if (action.type === 'delete') {
+            setMessages((prev) => [
+                ...prev,
+                {
+                    id: generateMessageId('system'),
+                    role: 'system',
+                    content: `🗑️ Deleting ${server.name}...`,
+                    timestamp: new Date(),
+                },
+            ]);
+            try {
+                // Import persistence utilities
+                const { removeMcpServerFromConfig } = await import('@dexto/agent-management');
+                // Persist to config file using surgical removal
+                await removeMcpServerFromConfig(agent.getAgentFilePath(), server.name);
+                // Also disconnect if connected
+                try {
+                    await agent.removeMcpServer(server.name);
+                }
+                catch {
+                    // Ignore - server might not be connected
+                }
+                setMessages((prev) => [
+                    ...prev,
+                    {
+                        id: generateMessageId('system'),
+                        role: 'system',
+                        content: `✅ Deleted ${server.name}`,
+                        timestamp: new Date(),
+                    },
+                ]);
+            }
+            catch (error) {
+                setMessages((prev) => [
+                    ...prev,
+                    {
+                        id: generateMessageId('error'),
+                        role: 'system',
+                        content: `❌ Failed to delete server: ${error instanceof Error ? error.message : String(error)}`,
+                        timestamp: new Date(),
+                    },
+                ]);
+            }
+        }
+    }, [setUi, setInput, setMessages, agent, buffer]);
+    // Handle MCP add choice (registry/custom/back)
+    const handleMcpAddChoice = useCallback((choice) => {
+        if (choice === 'back') {
+            // Go back to server list
+            setUi((prev) => ({
+                ...prev,
+                activeOverlay: 'mcp-server-list',
+            }));
+        }
+        else if (choice === 'registry') {
+            // Show registry selector (McpAddSelector)
+            setUi((prev) => ({
+                ...prev,
+                activeOverlay: 'mcp-add-selector',
+            }));
+        }
+        else if (choice === 'custom') {
+            // Show custom type selector
+            setUi((prev) => ({
+                ...prev,
+                activeOverlay: 'mcp-custom-type-selector',
+            }));
+        }
+    }, [setUi]);
+    // Handle MCP add selection (presets only)
+    const handleMcpAddSelect = useCallback(async (result) => {
+        setUi((prev) => ({ ...prev, activeOverlay: 'none', mcpWizardServerType: null }));
+        buffer.setText('');
+        setInput((prev) => ({ ...prev, historyIndex: -1 }));
+        setUi((prev) => ({ ...prev, isProcessing: true, isCancelling: false }));
+        setMessages((prev) => [
+            ...prev,
+            {
+                id: generateMessageId('system'),
+                role: 'system',
+                content: `🔌 Connecting to ${result.entry.name}...`,
+                timestamp: new Date(),
+            },
+        ]);
+        try {
+            const mcpConfig = result.entry.config;
+            await agent.addMcpServer(result.entry.id, mcpConfig);
+            // Track MCP server connected analytics
+            capture('dexto_mcp_server_connected', {
+                source: 'cli',
+                serverName: result.entry.name,
+                transportType: mcpConfig.type,
+            });
+            setMessages((prev) => [
+                ...prev,
+                {
+                    id: generateMessageId('system'),
+                    role: 'system',
+                    content: `✅ Connected to ${result.entry.name}`,
+                    timestamp: new Date(),
+                },
+            ]);
+        }
+        catch (error) {
+            setMessages((prev) => [
+                ...prev,
+                {
+                    id: generateMessageId('system'),
+                    role: 'system',
+                    content: `❌ Failed to connect: ${error instanceof Error ? error.message : String(error)}`,
+                    timestamp: new Date(),
+                },
+            ]);
+        }
+        setUi((prev) => ({
+            ...prev,
+            isProcessing: false,
+            isCancelling: false,
+            isThinking: false,
+        }));
+    }, [setUi, setInput, setMessages, agent, buffer]);
+    // Handle MCP custom type selection
+    const handleMcpCustomTypeSelect = useCallback((serverType) => {
+        setUi((prev) => ({
+            ...prev,
+            mcpWizardServerType: serverType,
+            activeOverlay: 'mcp-custom-wizard',
+        }));
+    }, [setUi]);
+    // Handle MCP custom wizard completion
+    const handleMcpCustomWizardComplete = useCallback(async (config) => {
+        setUi((prev) => ({ ...prev, activeOverlay: 'none', mcpWizardServerType: null }));
+        buffer.setText('');
+        setInput((prev) => ({ ...prev, historyIndex: -1 }));
+        setUi((prev) => ({ ...prev, isProcessing: true, isCancelling: false }));
+        setMessages((prev) => [
+            ...prev,
+            {
+                id: generateMessageId('system'),
+                role: 'system',
+                content: `🔌 Connecting to ${config.name}...`,
+                timestamp: new Date(),
+            },
+        ]);
+        try {
+            // Build the appropriate config based on server type
+            let serverConfig;
+            if (config.serverType === 'stdio') {
+                serverConfig = {
+                    type: 'stdio',
+                    command: config.command,
+                    args: config.args || [],
+                };
+            }
+            else if (config.serverType === 'http') {
+                serverConfig = {
+                    type: 'http',
+                    url: config.url,
+                };
+            }
+            else {
+                // sse
+                serverConfig = {
+                    type: 'sse',
+                    url: config.url,
+                };
+            }
+            await agent.addMcpServer(config.name, serverConfig);
+            // Track MCP server connected analytics
+            capture('dexto_mcp_server_connected', {
+                source: 'cli',
+                serverName: config.name,
+                transportType: serverConfig.type,
+            });
+            setMessages((prev) => [
+                ...prev,
+                {
+                    id: generateMessageId('system'),
+                    role: 'system',
+                    content: `✅ Connected to ${config.name}`,
+                    timestamp: new Date(),
+                },
+            ]);
+        }
+        catch (error) {
+            setMessages((prev) => [
+                ...prev,
+                {
+                    id: generateMessageId('system'),
+                    role: 'system',
+                    content: `❌ Failed to connect: ${error instanceof Error ? error.message : String(error)}`,
+                    timestamp: new Date(),
+                },
+            ]);
+        }
+        setUi((prev) => ({
+            ...prev,
+            isProcessing: false,
+            isCancelling: false,
+            isThinking: false,
+        }));
+    }, [setUi, setInput, setMessages, agent, buffer]);
+    // Handle session subcommand selection
+    const handleSessionSubcommandSelect = useCallback(async (action) => {
+        if (action === 'switch') {
+            setInput((prev) => ({ ...prev, value: '/session switch' }));
+            setUi((prev) => ({ ...prev, activeOverlay: 'session-selector' }));
+            return;
+        }
+        setUi((prev) => ({ ...prev, activeOverlay: 'none', mcpWizardServerType: null }));
+        buffer.setText('');
+        setInput((prev) => ({ ...prev, historyIndex: -1 }));
+        setUi((prev) => ({ ...prev, isProcessing: true, isCancelling: false }));
+        try {
+            const { CommandService } = await import('../services/CommandService.js');
+            const commandService = new CommandService();
+            const result = await commandService.executeCommand('session', [action], agent, session.id || undefined);
+            if (result.type === 'output' && result.output) {
+                const output = result.output;
+                setMessages((prev) => [
+                    ...prev,
+                    {
+                        id: generateMessageId('command'),
+                        role: 'system',
+                        content: output,
+                        timestamp: new Date(),
+                    },
+                ]);
+            }
+            if (result.type === 'styled' && result.styled) {
+                const { fallbackText, styledType, styledData } = result.styled;
+                setMessages((prev) => [
+                    ...prev,
+                    {
+                        id: generateMessageId('command'),
+                        role: 'system',
+                        content: fallbackText,
+                        timestamp: new Date(),
+                        styledType,
+                        styledData,
+                    },
+                ]);
+            }
+            setUi((prev) => ({
+                ...prev,
+                isProcessing: false,
+                isCancelling: false,
+                isThinking: false,
+            }));
+        }
+        catch (error) {
+            setMessages((prev) => [
+                ...prev,
+                {
+                    id: generateMessageId('error'),
+                    role: 'system',
+                    content: `❌ ${error instanceof Error ? error.message : String(error)}`,
+                    timestamp: new Date(),
+                },
+            ]);
+            setUi((prev) => ({
+                ...prev,
+                isProcessing: false,
+                isCancelling: false,
+                isThinking: false,
+            }));
+        }
+    }, [setInput, setUi, setMessages, agent, session.id, buffer]);
+    // Handle prompt list actions (select/add/delete)
+    const handlePromptListAction = useCallback(async (action) => {
+        if (action.type === 'add-prompt') {
+            setUi((prev) => ({
+                ...prev,
+                activeOverlay: 'prompt-add-choice',
+            }));
+        }
+        else if (action.type === 'delete-prompt') {
+            setUi((prev) => ({
+                ...prev,
+                activeOverlay: 'prompt-delete-selector',
+            }));
+        }
+        else if (action.type === 'select-prompt') {
+            // Execute the prompt
+            const displayName = action.prompt.displayName || action.prompt.name;
+            const commandText = `/${displayName}`;
+            setUi((prev) => ({
+                ...prev,
+                activeOverlay: 'none',
+                promptAddWizard: null,
+            }));
+            buffer.setText('');
+            setInput((prev) => ({ ...prev, historyIndex: -1 }));
+            // Route through streaming pipeline
+            if (onSubmitPromptCommand) {
+                await onSubmitPromptCommand(commandText);
+            }
+        }
+    }, [setUi, setInput, buffer, onSubmitPromptCommand]);
+    // Handle prompt list load into input
+    const handlePromptLoadIntoInput = useCallback((text) => {
+        buffer.setText(text);
+        setInput((prev) => ({ ...prev, value: text }));
+        setUi((prev) => ({
+            ...prev,
+            activeOverlay: 'none',
+            promptAddWizard: null,
+        }));
+    }, [buffer, setInput, setUi]);
+    // Handle prompt add choice (agent vs shared)
+    const handlePromptAddChoice = useCallback((choice) => {
+        if (choice === 'back') {
+            setUi((prev) => ({
+                ...prev,
+                activeOverlay: 'prompt-list',
+            }));
+        }
+        else {
+            setUi((prev) => ({
+                ...prev,
+                activeOverlay: 'prompt-add-wizard',
+                promptAddWizard: {
+                    scope: choice,
+                    step: 'name',
+                    name: '',
+                    title: '',
+                    description: '',
+                    content: '',
+                },
+            }));
+        }
+    }, [setUi]);
+    // Handle prompt add wizard completion
+    const handlePromptAddComplete = useCallback(async (data) => {
+        const scope = ui.promptAddWizard?.scope || 'agent';
+        setUi((prev) => ({
+            ...prev,
+            activeOverlay: 'none',
+            promptAddWizard: null,
+        }));
+        buffer.setText('');
+        setInput((prev) => ({ ...prev, historyIndex: -1 }));
+        setMessages((prev) => [
+            ...prev,
+            {
+                id: generateMessageId('system'),
+                role: 'system',
+                content: `📝 Creating ${scope === 'shared' ? 'shared' : 'agent'} prompt "${data.name}"...`,
+                timestamp: new Date(),
+            },
+        ]);
+        try {
+            const { mkdir, writeFile } = await import('fs/promises');
+            const { dirname, join } = await import('path');
+            // Validate prompt name to prevent path traversal
+            const SAFE_NAME_PATTERN = /^[a-z0-9][a-z0-9-_]*$/i;
+            if (!SAFE_NAME_PATTERN.test(data.name)) {
+                throw new Error(`Invalid prompt name "${data.name}". Names must start with a letter or number and contain only letters, numbers, hyphens, and underscores.`);
+            }
+            // Build frontmatter
+            const frontmatterLines = [
+                '---',
+                `id: ${data.name}`,
+                data.title ? `title: "${data.title}"` : null,
+                data.description ? `description: "${data.description}"` : null,
+                data.argumentHint ? `argument-hint: ${data.argumentHint}` : null,
+                '---',
+            ].filter(Boolean);
+            const fileContent = `${frontmatterLines.join('\n')}\n\n${data.content}\n`;
+            let filePath;
+            if (scope === 'shared') {
+                // Create in commands directory based on execution context
+                // Matches discovery logic in discoverCommandPrompts()
+                const { getExecutionContext, findDextoSourceRoot, findDextoProjectRoot, getDextoGlobalPath, } = await import('@dexto/agent-management');
+                const context = getExecutionContext();
+                let commandsDir;
+                if (context === 'dexto-source') {
+                    const isDevMode = process.env.DEXTO_DEV_MODE === 'true';
+                    if (isDevMode) {
+                        const sourceRoot = findDextoSourceRoot();
+                        commandsDir = sourceRoot
+                            ? join(sourceRoot, 'commands')
+                            : getDextoGlobalPath('commands');
+                    }
+                    else {
+                        commandsDir = getDextoGlobalPath('commands');
+                    }
+                }
+                else if (context === 'dexto-project') {
+                    const projectRoot = findDextoProjectRoot();
+                    commandsDir = projectRoot
+                        ? join(projectRoot, 'commands')
+                        : getDextoGlobalPath('commands');
+                }
+                else {
+                    // global-cli
+                    commandsDir = getDextoGlobalPath('commands');
+                }
+                filePath = join(commandsDir, `${data.name}.md`);
+                await mkdir(commandsDir, { recursive: true });
+                await writeFile(filePath, fileContent, 'utf-8');
+                // Re-discover commands and refresh with enriched prompts
+                const { reloadAgentConfigFromFile, enrichAgentConfig } = await import('@dexto/agent-management');
+                const newConfig = await reloadAgentConfigFromFile(agent.getAgentFilePath());
+                const enrichedConfig = enrichAgentConfig(newConfig, agent.getAgentFilePath());
+                await agent.refreshPrompts(enrichedConfig.prompts);
+            }
+            else {
+                // Create in agent's prompts directory
+                const agentDir = dirname(agent.getAgentFilePath());
+                const promptsDir = join(agentDir, 'prompts');
+                filePath = join(promptsDir, `${data.name}.md`);
+                await mkdir(promptsDir, { recursive: true });
+                await writeFile(filePath, fileContent, 'utf-8');
+                // Add file reference to agent config using surgical helper
+                const { addPromptToAgentConfig, reloadAgentConfigFromFile, enrichAgentConfig, } = await import('@dexto/agent-management');
+                await addPromptToAgentConfig(agent.getAgentFilePath(), {
+                    type: 'file',
+                    file: `\${{dexto.agent_dir}}/prompts/${data.name}.md`,
+                });
+                // Reload config from disk, enrich to include discovered commands, then refresh
+                const newConfig = await reloadAgentConfigFromFile(agent.getAgentFilePath());
+                const enrichedConfig = enrichAgentConfig(newConfig, agent.getAgentFilePath());
+                await agent.refreshPrompts(enrichedConfig.prompts);
+            }
+            setMessages((prev) => [
+                ...prev,
+                {
+                    id: generateMessageId('system'),
+                    role: 'system',
+                    content: `✅ Created prompt "${data.name}"\n📄 File: ${filePath}\n\nUse /${data.name} to run it.`,
+                    timestamp: new Date(),
+                },
+            ]);
+        }
+        catch (error) {
+            setMessages((prev) => [
+                ...prev,
+                {
+                    id: generateMessageId('error'),
+                    role: 'system',
+                    content: `❌ Failed to create prompt: ${error instanceof Error ? error.message : String(error)}`,
+                    timestamp: new Date(),
+                },
+            ]);
+        }
+    }, [ui.promptAddWizard?.scope, setUi, setInput, setMessages, buffer, agent]);
+    // Handle prompt delete
+    const handlePromptDelete = useCallback(async (deletable) => {
+        const displayName = deletable.prompt.displayName || deletable.prompt.name;
+        setMessages((prev) => [
+            ...prev,
+            {
+                id: generateMessageId('system'),
+                role: 'system',
+                content: `🗑️ Deleting prompt "${displayName}"...`,
+                timestamp: new Date(),
+            },
+        ]);
+        try {
+            const { deletePromptByMetadata, reloadAgentConfigFromFile, enrichAgentConfig } = await import('@dexto/agent-management');
+            // Use the higher-level delete function that handles file + config
+            // Pass full metadata including originalId for inline prompt deletion
+            const promptMetadata = deletable.prompt.metadata;
+            const result = await deletePromptByMetadata(agent.getAgentFilePath(), {
+                name: deletable.prompt.name,
+                metadata: {
+                    filePath: deletable.filePath,
+                    originalId: promptMetadata?.originalId,
+                },
+            }, { deleteFile: true });
+            if (!result.success) {
+                throw new Error(result.error || 'Failed to delete prompt');
+            }
+            // Reload config from disk, enrich to include discovered commands, then refresh
+            const newConfig = await reloadAgentConfigFromFile(agent.getAgentFilePath());
+            const enrichedConfig = enrichAgentConfig(newConfig, agent.getAgentFilePath());
+            await agent.refreshPrompts(enrichedConfig.prompts);
+            setMessages((prev) => [
+                ...prev,
+                {
+                    id: generateMessageId('system'),
+                    role: 'system',
+                    content: `✅ Deleted prompt "${displayName}"`,
+                    timestamp: new Date(),
+                },
+            ]);
+            // Return to prompt list and refresh
+            setUi((prev) => ({
+                ...prev,
+                activeOverlay: 'prompt-list',
+            }));
+            promptListRef.current?.refresh();
+        }
+        catch (error) {
+            setMessages((prev) => [
+                ...prev,
+                {
+                    id: generateMessageId('error'),
+                    role: 'system',
+                    content: `❌ Failed to delete prompt: ${error instanceof Error ? error.message : String(error)}`,
+                    timestamp: new Date(),
+                },
+            ]);
+            // Return to prompt list even on error
+            setUi((prev) => ({
+                ...prev,
+                activeOverlay: 'prompt-list',
+            }));
+        }
+    }, [setUi, setMessages, agent]);
+    // Handle prompt add wizard close
+    const handlePromptAddWizardClose = useCallback(() => {
+        setUi((prev) => ({
+            ...prev,
+            activeOverlay: 'prompt-add-choice',
+            promptAddWizard: null,
+        }));
+    }, [setUi]);
+    // Handle prompt delete selector close
+    const handlePromptDeleteClose = useCallback(() => {
+        setUi((prev) => ({
+            ...prev,
+            activeOverlay: 'prompt-list',
+        }));
+        // Refresh prompt list to show updated list
+        promptListRef.current?.refresh();
+    }, [setUi]);
+    // Handle prompt add choice close
+    const handlePromptAddChoiceClose = useCallback(() => {
+        setUi((prev) => ({
+            ...prev,
+            activeOverlay: 'prompt-list',
+        }));
+    }, [setUi]);
+    return (_jsxs(_Fragment, { children: [approval && (_jsx(ApprovalPrompt, { ref: approvalRef, approval: approval, onApprove: handleApprove, onDeny: handleDeny, onCancel: handleCancelApproval })), ui.activeOverlay === 'slash-autocomplete' && (_jsx(Box, { marginTop: 1, children: _jsx(SlashCommandAutocomplete, { ref: slashAutocompleteRef, isVisible: true, searchQuery: input.value, onSelectPrompt: handlePromptSelect, onSelectSystemCommand: handleSystemCommandSelect, onLoadIntoInput: handleLoadIntoInput, onSubmitRaw: onSubmitPromptCommand, onClose: handleClose, agent: agent }) })), ui.activeOverlay === 'resource-autocomplete' && (_jsx(Box, { marginTop: 1, children: _jsx(ResourceAutocomplete, { ref: resourceAutocompleteRef, isVisible: true, searchQuery: input.value, onSelectResource: handleResourceSelect, onLoadIntoInput: handleLoadIntoInput, onClose: handleClose, agent: agent }) })), ui.activeOverlay === 'model-selector' && (_jsx(Box, { marginTop: 1, children: _jsx(ModelSelectorRefactored, { ref: modelSelectorRef, isVisible: true, onSelectModel: handleModelSelect, onClose: handleClose, onAddCustomModel: handleAddCustomModel, onEditCustomModel: handleEditCustomModel, agent: agent }) })), ui.activeOverlay === 'session-selector' && (_jsx(Box, { marginTop: 1, children: _jsx(SessionSelectorRefactored, { ref: sessionSelectorRef, isVisible: true, onSelectSession: handleSessionSelect, onClose: handleClose, agent: agent, currentSessionId: session.id || undefined }) })), ui.activeOverlay === 'log-level-selector' && (_jsx(Box, { marginTop: 1, children: _jsx(LogLevelSelector, { ref: logLevelSelectorRef, isVisible: true, onSelect: handleLogLevelSelect, onClose: handleClose, agent: agent }) })), ui.activeOverlay === 'stream-selector' && (_jsx(Box, { marginTop: 1, children: _jsx(StreamSelector, { ref: streamSelectorRef, isVisible: true, onSelect: handleStreamSelect, onClose: handleClose }) })), ui.activeOverlay === 'tool-browser' && (_jsx(Box, { marginTop: 1, children: _jsx(ToolBrowser, { ref: toolBrowserRef, isVisible: true, onClose: handleClose, agent: agent }) })), ui.activeOverlay === 'mcp-server-list' && (_jsx(Box, { marginTop: 1, children: _jsx(McpServerList, { ref: mcpServerListRef, isVisible: true, onAction: handleMcpServerListAction, onClose: handleClose, agent: agent }) })), ui.activeOverlay === 'mcp-server-actions' && ui.selectedMcpServer && (_jsx(Box, { marginTop: 1, children: _jsx(McpServerActions, { ref: mcpServerActionsRef, isVisible: true, server: ui.selectedMcpServer, onAction: handleMcpServerAction, onClose: handleClose }) })), ui.activeOverlay === 'mcp-add-choice' && (_jsx(Box, { marginTop: 1, children: _jsx(McpAddChoice, { ref: mcpAddChoiceRef, isVisible: true, onSelect: handleMcpAddChoice, onClose: handleClose }) })), ui.activeOverlay === 'mcp-add-selector' && (_jsx(Box, { marginTop: 1, children: _jsx(McpAddSelector, { ref: mcpAddSelectorRef, isVisible: true, onSelect: handleMcpAddSelect, onClose: handleClose }) })), ui.activeOverlay === 'mcp-custom-type-selector' && (_jsx(Box, { marginTop: 1, children: _jsx(McpCustomTypeSelector, { ref: mcpCustomTypeSelectorRef, isVisible: true, onSelect: handleMcpCustomTypeSelect, onClose: handleClose }) })), ui.activeOverlay === 'mcp-custom-wizard' && ui.mcpWizardServerType && (_jsx(McpCustomWizard, { ref: mcpCustomWizardRef, isVisible: true, serverType: ui.mcpWizardServerType, onComplete: handleMcpCustomWizardComplete, onClose: handleClose })), ui.activeOverlay === 'custom-model-wizard' && (_jsx(CustomModelWizard, { ref: customModelWizardRef, isVisible: true, onComplete: handleCustomModelComplete, onClose: () => {
+                    setEditingModel(null);
+                    handleClose();
+                }, initialModel: editingModel })), ui.activeOverlay === 'session-subcommand-selector' && (_jsx(Box, { marginTop: 1, children: _jsx(SessionSubcommandSelector, { ref: sessionSubcommandSelectorRef, isVisible: true, onSelect: handleSessionSubcommandSelect, onClose: handleClose }) })), ui.activeOverlay === 'api-key-input' && ui.pendingModelSwitch && (_jsx(ApiKeyInput, { ref: apiKeyInputRef, isVisible: true, provider: ui.pendingModelSwitch.provider, onSaved: handleApiKeySaved, onClose: handleApiKeyClose })), ui.activeOverlay === 'search' && (_jsx(SearchOverlay, { ref: searchOverlayRef, isVisible: true, agent: agent, onClose: handleClose, onSelectResult: handleSearchResultSelect })), ui.activeOverlay === 'prompt-list' && (_jsx(Box, { marginTop: 1, children: _jsx(PromptList, { ref: promptListRef, isVisible: true, onAction: handlePromptListAction, onLoadIntoInput: handlePromptLoadIntoInput, onClose: handleClose, agent: agent }) })), ui.activeOverlay === 'prompt-add-choice' && (_jsx(Box, { marginTop: 1, children: _jsx(PromptAddChoice, { ref: promptAddChoiceRef, isVisible: true, onSelect: handlePromptAddChoice, onClose: handlePromptAddChoiceClose }) })), ui.activeOverlay === 'prompt-add-wizard' && ui.promptAddWizard && (_jsx(PromptAddWizard, { ref: promptAddWizardRef, isVisible: true, scope: ui.promptAddWizard.scope, onComplete: handlePromptAddComplete, onClose: handlePromptAddWizardClose })), ui.activeOverlay === 'prompt-delete-selector' && (_jsx(Box, { marginTop: 1, children: _jsx(PromptDeleteSelector, { ref: promptDeleteSelectorRef, isVisible: true, onDelete: handlePromptDelete, onClose: handlePromptDeleteClose, agent: agent }) }))] }));
+});