@nexus-cortex/tui 4.47.0

package/dist/commands/agent/InteractiveAgentMenu.js

@@ -0,0 +1,909 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * Interactive Agent Menu
+ *
+ * Ink-based terminal UI for managing Task Agent profiles.
+ * Provides list view, navigation, CRUD operations, and AI-powered agent creation.
+ */
+import { useState, useEffect, useMemo } from 'react';
+import { Box, Text, useInput, useApp } from 'ink';
+import TextInput from 'ink-text-input';
+import Spinner from 'ink-spinner';
+import { InlineEditor } from '../system-message/InlineEditor.js';
+/**
+ * Interactive Agent Menu Component
+ */
+export const InteractiveAgentMenu = ({ store, initialAgentName, currentModel = 'sonnet', generateAgentProfile, conversationalCreator, listModels, editAssistant, onExit, }) => {
+    const { exit: inkExit } = useApp();
+    // Use onExit callback if provided (for graceful return to CLI), otherwise fall back to Ink's exit
+    const handleExit = () => {
+        if (onExit) {
+            onExit();
+        }
+        else {
+            inkExit();
+        }
+    };
+    const [agents, setAgents] = useState([]);
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const [menuState, setMenuState] = useState('list');
+    const [confirmAction, setConfirmAction] = useState(null);
+    const [statusMessage, setStatusMessage] = useState('');
+    const [errorMessage, setErrorMessage] = useState('');
+    // Editing state
+    const [editingAgent, setEditingAgent] = useState(null);
+    const [editingContent, setEditingContent] = useState('');
+    const [editingFilePath, setEditingFilePath] = useState('');
+    // Edit choice state (direct vs AI-assisted)
+    const [editChoiceIndex, setEditChoiceIndex] = useState(0);
+    const [selectedAgentForEdit, setSelectedAgentForEdit] = useState(null);
+    // AI edit state
+    const [aiEditRequest, setAiEditRequest] = useState('');
+    const [aiEditResult, setAiEditResult] = useState(null);
+    const [aiEditOriginalContent, setAiEditOriginalContent] = useState('');
+    // Viewing state
+    const [viewingAgent, setViewingAgent] = useState(null);
+    // Model registry state
+    const [availableModels, setAvailableModels] = useState([]);
+    const [modelsLoading, setModelsLoading] = useState(false);
+    const [modelFilter, setModelFilter] = useState('');
+    const [modelSelectIndex, setModelSelectIndex] = useState(0);
+    // Creation wizard state
+    const [createSelectedModel, setCreateSelectedModel] = useState('');
+    const [createDescription, setCreateDescription] = useState('');
+    const [generatingMessage, setGeneratingMessage] = useState('');
+    // Conversation state for multi-turn agent creation
+    const [conversationMessages, setConversationMessages] = useState([]);
+    const [conversationInput, setConversationInput] = useState('');
+    const [conversationThinking, setConversationThinking] = useState(false);
+    // For editing agent model
+    const [editingAgentForModel, setEditingAgentForModel] = useState(null);
+    // Load agents on mount
+    useEffect(() => {
+        loadAgents();
+        // Subscribe to store changes for hot-reload
+        const listener = () => {
+            loadAgents();
+        };
+        store.onChange(listener);
+        return () => {
+            store.removeChangeListener(listener);
+        };
+    }, []);
+    // Set initial selection
+    useEffect(() => {
+        if (initialAgentName && agents.length > 0) {
+            const index = agents.findIndex((a) => a.name === initialAgentName);
+            if (index !== -1) {
+                setSelectedIndex(index);
+            }
+        }
+    }, [agents, initialAgentName]);
+    // Load models when entering model selection mode
+    useEffect(() => {
+        if ((menuState === 'create-model' || menuState === 'edit-model') && listModels && availableModels.length === 0) {
+            setModelsLoading(true);
+            listModels()
+                .then((models) => {
+                setAvailableModels(models);
+                setModelsLoading(false);
+            })
+                .catch((err) => {
+                setErrorMessage(`Failed to load models: ${err.message}`);
+                setModelsLoading(false);
+            });
+        }
+    }, [menuState, listModels]);
+    // Reset model selection index when filter changes
+    useEffect(() => {
+        setModelSelectIndex(0);
+    }, [modelFilter]);
+    // Compute filtered models based on filter text
+    const filteredModels = useMemo(() => {
+        // Add "inherit" option at the top
+        const inheritOption = {
+            id: 'inherit',
+            displayName: `Inherit (${currentModel})`,
+            owned_by: 'session',
+        };
+        const allModels = [inheritOption, ...availableModels];
+        if (!modelFilter.trim()) {
+            return allModels;
+        }
+        const lowerFilter = modelFilter.toLowerCase();
+        return allModels.filter((m) => {
+            const idMatch = m.id.toLowerCase().includes(lowerFilter);
+            const nameMatch = m.displayName?.toLowerCase().includes(lowerFilter);
+            const providerMatch = m.owned_by?.toLowerCase().includes(lowerFilter);
+            return idMatch || nameMatch || providerMatch;
+        });
+    }, [availableModels, modelFilter, currentModel]);
+    // Max visible models in the list (for scrolling)
+    const MAX_VISIBLE_MODELS = 15;
+    /**
+     * Load agents from store
+     */
+    const loadAgents = () => {
+        const allAgents = store.getAll();
+        // Sort by location (project first), then by name
+        allAgents.sort((a, b) => {
+            if (a.location !== b.location) {
+                return a.location === 'project' ? -1 : 1;
+            }
+            return a.name.localeCompare(b.name);
+        });
+        setAgents(allAgents);
+    };
+    /**
+     * Get currently selected agent
+     */
+    const selectedAgent = agents[selectedIndex];
+    /**
+     * Handle keyboard input
+     */
+    useInput((input, key) => {
+        // Loading/generating state - block all input
+        if (menuState === 'loading' || menuState === 'create-generating') {
+            return;
+        }
+        // Viewing mode - any key returns to list
+        if (menuState === 'viewing') {
+            setMenuState('list');
+            setViewingAgent(null);
+            return;
+        }
+        // Model selection step (for creation or editing)
+        if (menuState === 'create-model' || menuState === 'edit-model') {
+            // Model selection uses TextInput for filtering, so only handle navigation keys here
+            // TextInput handles text entry
+            return;
+        }
+        // Confirmation prompt state
+        if (menuState === 'confirm' && confirmAction) {
+            if (input.toLowerCase() === 'y') {
+                executeConfirmedAction(confirmAction);
+                setMenuState('list');
+                setConfirmAction(null);
+            }
+            else if (input.toLowerCase() === 'n' || key.escape) {
+                setMenuState('list');
+                setConfirmAction(null);
+                setStatusMessage('Action cancelled');
+            }
+            return;
+        }
+        // List navigation state
+        if (menuState === 'list') {
+            // Navigation
+            if (key.upArrow) {
+                setSelectedIndex((prev) => Math.max(0, prev - 1));
+                setStatusMessage('');
+                setErrorMessage('');
+            }
+            else if (key.downArrow) {
+                setSelectedIndex((prev) => Math.min(agents.length - 1, prev + 1));
+                setStatusMessage('');
+                setErrorMessage('');
+            }
+            // Actions
+            else if (key.return && selectedAgent) {
+                // Start edit flow - first confirm/change model
+                setEditingAgentForModel(selectedAgent);
+                setSelectedAgentForEdit(selectedAgent);
+                setModelFilter('');
+                setModelSelectIndex(0);
+                setMenuState('edit-model');
+            }
+            else if (input === ' ' && selectedAgent) {
+                // View details
+                handleView(selectedAgent.name);
+            }
+            else if (input === '+' || input.toLowerCase() === 'n') {
+                // Start creation wizard
+                setModelFilter('');
+                setModelSelectIndex(0);
+                setCreateSelectedModel('');
+                setCreateDescription('');
+                setMenuState('create-model');
+            }
+            else if (input.toLowerCase() === 'm' && selectedAgent) {
+                // Edit agent's model
+                setEditingAgentForModel(selectedAgent);
+                setModelFilter('');
+                setModelSelectIndex(0);
+                setMenuState('edit-model');
+            }
+            else if (input.toLowerCase() === 'd' && selectedAgent) {
+                // Delete agent
+                setConfirmAction({ type: 'delete', agentName: selectedAgent.name });
+                setMenuState('confirm');
+            }
+            else if (input.toLowerCase() === 'q' || key.escape) {
+                // Quit - use handleExit for graceful return to CLI
+                handleExit();
+            }
+        }
+    }, { isActive: menuState !== 'editing' && menuState !== 'create-description' && menuState !== 'create-model' && menuState !== 'edit-model' && menuState !== 'create-conversation' && menuState !== 'edit-choice' && menuState !== 'ai-edit-request' && menuState !== 'ai-edit-processing' && menuState !== 'ai-edit-confirm' });
+    /**
+     * Handle keyboard input for model selection (arrow keys and escape)
+     */
+    useInput((_input, key) => {
+        if (key.upArrow) {
+            setModelSelectIndex((prev) => Math.max(0, prev - 1));
+        }
+        else if (key.downArrow) {
+            setModelSelectIndex((prev) => Math.min(filteredModels.length - 1, prev + 1));
+        }
+        else if (key.escape) {
+            handleModelSelectionCancel();
+        }
+    }, { isActive: menuState === 'create-model' || menuState === 'edit-model' });
+    /**
+     * Handle keyboard input for conversation mode (escape to cancel)
+     */
+    useInput((_input, key) => {
+        if (key.escape && !conversationThinking) {
+            handleConversationCancel();
+        }
+    }, { isActive: menuState === 'create-conversation' });
+    /**
+     * Handle keyboard input for edit choice state
+     */
+    useInput((_input, key) => {
+        if (key.upArrow || key.downArrow) {
+            setEditChoiceIndex((prev) => (prev === 0 ? 1 : 0));
+        }
+        else if (key.return) {
+            if (editChoiceIndex === 0 && selectedAgentForEdit) {
+                // Direct edit
+                handleDirectEdit(selectedAgentForEdit.name);
+            }
+            else if (editChoiceIndex === 1 && selectedAgentForEdit) {
+                // AI-assisted edit
+                handleAiEditStart(selectedAgentForEdit.name);
+            }
+        }
+        else if (key.escape) {
+            setSelectedAgentForEdit(null);
+            setMenuState('list');
+        }
+    }, { isActive: menuState === 'edit-choice' });
+    /**
+     * Handle keyboard input for AI edit request state (escape to cancel)
+     */
+    useInput((_input, key) => {
+        if (key.escape) {
+            handleAiEditCancel();
+        }
+    }, { isActive: menuState === 'ai-edit-request' });
+    /**
+     * Handle keyboard input for AI edit confirm state
+     */
+    useInput((input, key) => {
+        if (input.toLowerCase() === 'y' || key.return) {
+            handleAiEditConfirm();
+        }
+        else if (input.toLowerCase() === 'n' || key.escape) {
+            handleAiEditReject();
+        }
+    }, { isActive: menuState === 'ai-edit-confirm' });
+    /**
+     * Handle description submission - starts conversation or generates directly
+     */
+    const handleDescriptionSubmit = async () => {
+        if (!createDescription.trim()) {
+            setErrorMessage('Please enter a description for your agent');
+            return;
+        }
+        setErrorMessage('');
+        // If conversational creator is available, start the conversation flow
+        if (conversationalCreator) {
+            const initialMessage = {
+                role: 'user',
+                content: createDescription,
+            };
+            setConversationMessages([initialMessage]);
+            setConversationThinking(true);
+            setMenuState('create-conversation');
+            // Get first AI response (likely a clarifying question)
+            try {
+                const response = await conversationalCreator([initialMessage], createSelectedModel);
+                setConversationThinking(false);
+                if (response.type === 'profile' && response.profile) {
+                    // AI generated profile directly without questions
+                    await createAgentFromProfile(response.profile);
+                }
+                else if (response.type === 'question' && response.question) {
+                    // AI is asking a clarifying question
+                    const questionText = response.question; // Capture as string
+                    setConversationMessages((prev) => [
+                        ...prev,
+                        { role: 'assistant', content: questionText },
+                    ]);
+                }
+            }
+            catch (error) {
+                setConversationThinking(false);
+                setErrorMessage(`AI error: ${error.message}`);
+                setMenuState('list');
+            }
+            return;
+        }
+        // Fallback to legacy one-shot generation
+        setMenuState('create-generating');
+        setGeneratingMessage('Generating agent profile...');
+        try {
+            let profile;
+            if (generateAgentProfile) {
+                // Use AI to generate the profile
+                profile = await generateAgentProfile(createDescription, createSelectedModel);
+            }
+            else {
+                // Fallback: Create a basic profile
+                const safeName = createDescription
+                    .toLowerCase()
+                    .replace(/[^a-z0-9]+/g, '-')
+                    .replace(/^-|-$/g, '')
+                    .slice(0, 32) || `agent-${Date.now()}`;
+                profile = {
+                    name: safeName,
+                    description: createDescription.slice(0, 200),
+                    tools: ['Read', 'Glob', 'Grep', 'Write', 'Edit', 'Bash'],
+                    systemPrompt: `# ${safeName}\n\n${createDescription}\n\n## Your Role\n\nYou are a specialized agent. Follow the user's instructions carefully.\n\n## Guidelines\n\n- Be thorough and methodical\n- Explain your reasoning\n- Ask for clarification if needed`,
+                };
+            }
+            await createAgentFromProfile(profile);
+        }
+        catch (error) {
+            setErrorMessage(`Failed to create agent: ${error.message}`);
+            setMenuState('list');
+        }
+    };
+    /**
+     * Handle user response in conversation flow
+     */
+    const handleConversationSubmit = async () => {
+        if (!conversationInput.trim() || !conversationalCreator) {
+            return;
+        }
+        // Add user message to conversation
+        const userMessage = {
+            role: 'user',
+            content: conversationInput,
+        };
+        const updatedMessages = [...conversationMessages, userMessage];
+        setConversationMessages(updatedMessages);
+        setConversationInput('');
+        setConversationThinking(true);
+        setErrorMessage('');
+        try {
+            const response = await conversationalCreator(updatedMessages, createSelectedModel);
+            setConversationThinking(false);
+            if (response.type === 'profile' && response.profile) {
+                // AI generated the final profile
+                await createAgentFromProfile(response.profile);
+            }
+            else if (response.type === 'question' && response.question) {
+                // AI is asking another clarifying question
+                const questionText = response.question; // Capture as string
+                setConversationMessages((prev) => [
+                    ...prev,
+                    { role: 'assistant', content: questionText },
+                ]);
+            }
+        }
+        catch (error) {
+            setConversationThinking(false);
+            setErrorMessage(`AI error: ${error.message}`);
+        }
+    };
+    /**
+     * Create agent from generated profile
+     */
+    const createAgentFromProfile = async (profile) => {
+        setMenuState('create-generating');
+        setGeneratingMessage('Saving agent...');
+        try {
+            await store.createAgent({
+                name: profile.name,
+                description: profile.description,
+                tools: profile.tools,
+                model: createSelectedModel,
+                systemPrompt: profile.systemPrompt,
+                location: 'project',
+            });
+            setStatusMessage(`Created agent '${profile.name}' successfully!`);
+            loadAgents();
+            // Select the new agent
+            setTimeout(() => {
+                const newIndex = store.getAll().findIndex((a) => a.name === profile.name);
+                if (newIndex !== -1) {
+                    setSelectedIndex(newIndex);
+                }
+            }, 100);
+            // Reset all creation state
+            resetCreationState();
+            setMenuState('list');
+        }
+        catch (error) {
+            setErrorMessage(`Failed to create agent: ${error.message}`);
+            setMenuState('list');
+        }
+    };
+    /**
+     * Reset all creation-related state
+     */
+    const resetCreationState = () => {
+        setModelFilter('');
+        setModelSelectIndex(0);
+        setCreateSelectedModel('');
+        setCreateDescription('');
+        setConversationMessages([]);
+        setConversationInput('');
+        setConversationThinking(false);
+        setGeneratingMessage('');
+    };
+    /**
+     * Cancel conversation and return to list
+     */
+    const handleConversationCancel = () => {
+        resetCreationState();
+        setMenuState('list');
+    };
+    /**
+     * Handle model selection for creation
+     */
+    const handleModelSelect = (modelId) => {
+        const resolvedModel = modelId === 'inherit' ? currentModel : modelId;
+        setCreateSelectedModel(resolvedModel);
+        setModelFilter('');
+        setModelSelectIndex(0);
+        setMenuState('create-description');
+    };
+    /**
+     * Handle model change for existing agent
+     */
+    const handleAgentModelChange = async (modelId) => {
+        if (!editingAgentForModel)
+            return;
+        const resolvedModel = modelId === 'inherit' ? currentModel : modelId;
+        const isEditFlow = selectedAgentForEdit !== null;
+        try {
+            // Read current content and update model in frontmatter
+            const content = await store.getAgentContent(editingAgentForModel.name);
+            // Replace model in YAML frontmatter
+            const updatedContent = content.replace(/^(model:\s*).+$/m, `$1${resolvedModel}`);
+            await store.updateAgent(editingAgentForModel.name, updatedContent);
+            setStatusMessage(`Model ${isEditFlow ? 'confirmed' : 'changed'}: '${resolvedModel}'`);
+            loadAgents();
+        }
+        catch (error) {
+            setErrorMessage(`Failed to update model: ${error.message}`);
+        }
+        // Reset model selection state
+        setEditingAgentForModel(null);
+        setModelFilter('');
+        setModelSelectIndex(0);
+        // If in edit flow, proceed to edit choice; otherwise return to list
+        if (isEditFlow) {
+            setEditChoiceIndex(0);
+            setMenuState('edit-choice');
+        }
+        else {
+            setMenuState('list');
+        }
+    };
+    /**
+     * Handle model filter input change
+     */
+    const handleModelFilterChange = (value) => {
+        setModelFilter(value);
+    };
+    /**
+     * Handle model filter submit (Enter key)
+     */
+    const handleModelFilterSubmit = () => {
+        // If filter matches exactly one model or user typed full ID, select it
+        const exactMatch = filteredModels.find((m) => m.id.toLowerCase() === modelFilter.toLowerCase());
+        if (exactMatch) {
+            if (menuState === 'create-model') {
+                handleModelSelect(exactMatch.id);
+            }
+            else if (menuState === 'edit-model') {
+                handleAgentModelChange(exactMatch.id);
+            }
+        }
+        else if (filteredModels.length > 0 && modelSelectIndex < filteredModels.length) {
+            // Select the highlighted model
+            const selected = filteredModels[modelSelectIndex];
+            if (selected) {
+                if (menuState === 'create-model') {
+                    handleModelSelect(selected.id);
+                }
+                else if (menuState === 'edit-model') {
+                    handleAgentModelChange(selected.id);
+                }
+            }
+        }
+        else {
+            setErrorMessage('No matching model found');
+        }
+    };
+    /**
+     * Cancel model selection
+     */
+    const handleModelSelectionCancel = () => {
+        setModelFilter('');
+        setModelSelectIndex(0);
+        setEditingAgentForModel(null);
+        setSelectedAgentForEdit(null); // Clear edit flow state
+        setMenuState('list');
+    };
+    /**
+     * Execute confirmed action
+     */
+    const executeConfirmedAction = async (action) => {
+        setMenuState('loading');
+        setStatusMessage('');
+        setErrorMessage('');
+        try {
+            switch (action.type) {
+                case 'edit':
+                    await handleEdit(action.agentName);
+                    break;
+                case 'delete':
+                    await handleDelete(action.agentName);
+                    break;
+            }
+        }
+        catch (error) {
+            setErrorMessage(error.message);
+        }
+        finally {
+            setMenuState('list');
+        }
+    };
+    /**
+     * Handle edit action - opens inline editor (legacy, used by confirmation flow)
+     */
+    const handleEdit = async (agentName) => {
+        const agent = store.getAgent(agentName);
+        if (!agent) {
+            setErrorMessage(`Agent '${agentName}' not found`);
+            return;
+        }
+        try {
+            const content = await store.getAgentContent(agentName);
+            // Set editing state and open inline editor
+            setEditingAgent(agent);
+            setEditingContent(content);
+            setEditingFilePath(agent.filePath);
+            setMenuState('editing');
+        }
+        catch (error) {
+            setErrorMessage(`Failed to load agent: ${error.message}`);
+        }
+    };
+    /**
+     * Handle direct edit action - opens inline editor
+     */
+    const handleDirectEdit = async (agentName) => {
+        const agent = store.getAgent(agentName);
+        if (!agent) {
+            setErrorMessage(`Agent '${agentName}' not found`);
+            return;
+        }
+        try {
+            const content = await store.getAgentContent(agentName);
+            // Clear edit choice state
+            setSelectedAgentForEdit(null);
+            // Set editing state and open inline editor
+            setEditingAgent(agent);
+            setEditingContent(content);
+            setEditingFilePath(agent.filePath);
+            setMenuState('editing');
+        }
+        catch (error) {
+            setErrorMessage(`Failed to load agent: ${error.message}`);
+        }
+    };
+    /**
+     * Handle AI edit start - shows the request input
+     */
+    const handleAiEditStart = async (agentName) => {
+        const agent = store.getAgent(agentName);
+        if (!agent) {
+            setErrorMessage(`Agent '${agentName}' not found`);
+            setMenuState('list');
+            return;
+        }
+        if (!editAssistant) {
+            setErrorMessage('AI edit assistant not available');
+            setMenuState('list');
+            return;
+        }
+        try {
+            const content = await store.getAgentContent(agentName);
+            // Store original content for AI edit flow
+            setAiEditOriginalContent(content);
+            setAiEditRequest('');
+            setAiEditResult(null);
+            setMenuState('ai-edit-request');
+        }
+        catch (error) {
+            setErrorMessage(`Failed to load agent: ${error.message}`);
+            setMenuState('list');
+        }
+    };
+    /**
+     * Handle AI edit request submission
+     */
+    const handleAiEditSubmit = async () => {
+        if (!aiEditRequest.trim() || !selectedAgentForEdit || !editAssistant) {
+            return;
+        }
+        setErrorMessage('');
+        setMenuState('ai-edit-processing');
+        try {
+            const result = await editAssistant(aiEditOriginalContent, aiEditRequest, selectedAgentForEdit.name);
+            setAiEditResult(result);
+            setMenuState('ai-edit-confirm');
+        }
+        catch (error) {
+            setErrorMessage(`AI edit failed: ${error.message}`);
+            setMenuState('ai-edit-request');
+        }
+    };
+    /**
+     * Handle AI edit confirmation - save the changes
+     */
+    const handleAiEditConfirm = async () => {
+        if (!aiEditResult || !selectedAgentForEdit) {
+            return;
+        }
+        try {
+            await store.updateAgent(selectedAgentForEdit.name, aiEditResult.content);
+            setStatusMessage(`Agent '${selectedAgentForEdit.name}' updated: ${aiEditResult.summary}`);
+            loadAgents();
+            // Reset state
+            handleAiEditReset();
+            setMenuState('list');
+        }
+        catch (error) {
+            setErrorMessage(`Failed to save: ${error.message}`);
+            setMenuState('ai-edit-confirm');
+        }
+    };
+    /**
+     * Handle AI edit rejection - discard changes
+     */
+    const handleAiEditReject = () => {
+        setAiEditResult(null);
+        setMenuState('ai-edit-request');
+        setStatusMessage('Changes discarded. Try a different edit request.');
+    };
+    /**
+     * Handle AI edit cancel - return to list
+     */
+    const handleAiEditCancel = () => {
+        handleAiEditReset();
+        setMenuState('list');
+    };
+    /**
+     * Reset all AI edit state
+     */
+    const handleAiEditReset = () => {
+        setSelectedAgentForEdit(null);
+        setAiEditRequest('');
+        setAiEditResult(null);
+        setAiEditOriginalContent('');
+    };
+    /**
+     * Handle view action - show agent details
+     */
+    const handleView = async (agentName) => {
+        const agent = store.getAgent(agentName);
+        if (!agent) {
+            setErrorMessage(`Agent '${agentName}' not found`);
+            return;
+        }
+        setViewingAgent(agent);
+        setMenuState('viewing');
+    };
+    /**
+     * Handle save from inline editor
+     */
+    const handleEditorSave = async (newContent) => {
+        if (!editingFilePath || !editingAgent) {
+            return;
+        }
+        try {
+            await store.updateAgent(editingAgent.name, newContent);
+            setStatusMessage(`Agent '${editingAgent.name}' saved successfully`);
+            setMenuState('list');
+            // Clear editing state
+            setEditingAgent(null);
+            setEditingContent('');
+            setEditingFilePath('');
+            // Reload agents
+            loadAgents();
+        }
+        catch (error) {
+            setErrorMessage(`Failed to save: ${error.message}`);
+            setMenuState('list');
+        }
+    };
+    /**
+     * Handle cancel from inline editor
+     */
+    const handleEditorCancel = () => {
+        setMenuState('list');
+        // Clear editing state
+        setEditingAgent(null);
+        setEditingContent('');
+        setEditingFilePath('');
+    };
+    /**
+     * Handle delete action
+     */
+    const handleDelete = async (agentName) => {
+        try {
+            await store.deleteAgent(agentName);
+            setStatusMessage(`Agent '${agentName}' deleted`);
+            loadAgents();
+            // Adjust selection if needed
+            if (selectedIndex >= agents.length - 1) {
+                setSelectedIndex(Math.max(0, agents.length - 2));
+            }
+        }
+        catch (error) {
+            setErrorMessage(error.message);
+        }
+    };
+    /**
+     * Render model selection step (for both creation and editing)
+     */
+    const renderModelSelection = () => {
+        const isEditing = menuState === 'edit-model';
+        const title = isEditing
+            ? `Change Model for '${editingAgentForModel?.name}'`
+            : 'Step 1: Select Model';
+        // Calculate visible range for scrolling
+        const startIndex = Math.max(0, modelSelectIndex - Math.floor(MAX_VISIBLE_MODELS / 2));
+        const endIndex = Math.min(filteredModels.length, startIndex + MAX_VISIBLE_MODELS);
+        const visibleModels = filteredModels.slice(startIndex, endIndex);
+        return (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { bold: true, color: "cyan", children: title }) }), modelsLoading && (_jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { color: "cyan", children: _jsx(Spinner, { type: "dots" }) }), _jsx(Text, { children: " Loading models..." })] })), !modelsLoading && (_jsxs(_Fragment, { children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { dimColor: true, children: "Type to filter or enter model ID:" }) }), _jsxs(Box, { borderStyle: "single", borderColor: "cyan", paddingX: 1, marginBottom: 1, children: [_jsxs(Text, { color: "cyan", children: ['>', " "] }), _jsx(TextInput, { value: modelFilter, onChange: handleModelFilterChange, onSubmit: handleModelFilterSubmit, placeholder: "e.g., sonnet, opus, gemini, grok..." })] }), _jsx(Box, { marginBottom: 1, children: _jsxs(Text, { dimColor: true, children: ["Showing ", filteredModels.length, " model", filteredModels.length !== 1 ? 's' : '', modelFilter && ` matching "${modelFilter}"`, filteredModels.length > MAX_VISIBLE_MODELS && ` (scroll with arrow keys)`] }) }), _jsx(Box, { flexDirection: "column", marginBottom: 1, children: visibleModels.length === 0 ? (_jsx(Box, { children: _jsx(Text, { color: "yellow", children: "No models match your filter" }) })) : (visibleModels.map((model, displayIndex) => {
+                                const actualIndex = startIndex + displayIndex;
+                                const isSelected = actualIndex === modelSelectIndex;
+                                const providerLabel = model.owned_by ? `[${model.owned_by}]` : '';
+                                const displayName = model.displayName || model.id;
+                                const contextInfo = model.contextWindow
+                                    ? `${Math.round(model.contextWindow / 1000)}k ctx`
+                                    : '';
+                                const costInfo = model.inputCostPer1M !== undefined
+                                    ? `$${model.inputCostPer1M.toFixed(2)}/$${model.outputCostPer1M?.toFixed(2) || '?'}`
+                                    : '';
+                                const reasoningBadge = model.reasoning?.supported ? ' [R]' : '';
+                                return (_jsxs(Box, { paddingLeft: isSelected ? 0 : 2, children: [isSelected && _jsx(Text, { color: "cyan", bold: true, children: '> ' }), _jsxs(Text, { dimColor: true, children: [providerLabel, " "] }), _jsx(Text, { bold: isSelected, color: isSelected ? 'cyan' : undefined, children: displayName }), _jsx(Text, { color: "yellow", children: reasoningBadge }), contextInfo && _jsxs(Text, { dimColor: true, children: [" (", contextInfo, ")"] }), costInfo && _jsxs(Text, { dimColor: true, children: [" ", costInfo] })] }, model.id));
+                            })) }), filteredModels.length > MAX_VISIBLE_MODELS && (_jsx(Box, { marginBottom: 1, children: _jsxs(Text, { dimColor: true, children: [startIndex > 0 ? '↑ more above ' : '', endIndex < filteredModels.length ? '↓ more below' : ''] }) })), errorMessage && (_jsx(Box, { marginBottom: 1, children: _jsxs(Text, { color: "red", children: ['!', " ", errorMessage] }) })), _jsx(Box, { borderStyle: "single", borderColor: "gray", paddingX: 1, marginTop: 1, children: _jsx(Text, { dimColor: true, children: "Type: Filter | \u2191/\u2193: Navigate | Enter: Select | Esc: Cancel" }) })] }))] }));
+    };
+    /**
+     * Render description input step
+     */
+    const renderDescriptionInput = () => {
+        // Find the selected model info
+        const selectedModelInfo = availableModels.find((m) => m.id === createSelectedModel);
+        const modelDisplayName = selectedModelInfo?.displayName || createSelectedModel;
+        return (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { bold: true, color: "cyan", children: "Step 2: Describe Your Agent" }) }), _jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { dimColor: true, children: "Model: " }), _jsx(Text, { color: "green", children: modelDisplayName })] }), _jsxs(Box, { marginBottom: 1, flexDirection: "column", children: [_jsx(Text, { children: "Please describe your new agent. Be as descriptive as possible:" }), _jsx(Text, { dimColor: true, children: "(What should it do? What's its specialty? How should it behave?)" })] }), _jsx(Box, { borderStyle: "single", borderColor: "cyan", paddingX: 1, paddingY: 0, children: _jsx(TextInput, { value: createDescription, onChange: setCreateDescription, onSubmit: handleDescriptionSubmit, placeholder: "E.g., A security auditor that reviews code for vulnerabilities, checks for OWASP top 10 issues, and provides remediation advice..." }) }), errorMessage && (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: "red", children: ['!', " ", errorMessage] }) })), _jsx(Box, { borderStyle: "single", borderColor: "gray", paddingX: 1, marginTop: 1, children: _jsx(Text, { dimColor: true, children: "Enter: Generate Agent | Esc: Cancel" }) })] }));
+    };
+    /**
+     * Render generating state
+     */
+    const renderGenerating = () => {
+        return (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { bold: true, color: "cyan", children: "Creating Your Agent" }) }), _jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { color: "cyan", children: _jsx(Spinner, { type: "dots" }) }), _jsxs(Text, { children: [" ", generatingMessage] })] }), _jsx(Box, { marginTop: 1, borderStyle: "single", borderColor: "gray", paddingX: 1, children: _jsx(Text, { dimColor: true, children: "The AI is generating a detailed agent profile based on your description..." }) })] }));
+    };
+    /**
+     * Render conversation mode - multi-turn agent creation
+     */
+    const renderConversation = () => {
+        // Find the selected model info
+        const selectedModelInfo = availableModels.find((m) => m.id === createSelectedModel);
+        const modelDisplayName = selectedModelInfo?.displayName || createSelectedModel;
+        return (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { bold: true, color: "cyan", children: "Creating Agent - Conversation" }) }), _jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { dimColor: true, children: "Model: " }), _jsx(Text, { color: "green", children: modelDisplayName }), _jsx(Text, { dimColor: true, children: " | Answer the AI's questions to refine your agent" })] }), _jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: "gray", paddingX: 1, paddingY: 1, marginBottom: 1, children: [conversationMessages.map((msg, index) => (_jsx(Box, { marginBottom: index < conversationMessages.length - 1 ? 1 : 0, children: msg.role === 'user' ? (_jsxs(Box, { children: [_jsx(Text, { color: "blue", bold: true, children: "You: " }), _jsx(Text, { children: msg.content })] })) : (_jsxs(Box, { children: [_jsx(Text, { color: "magenta", bold: true, children: "AI: " }), _jsx(Text, { children: msg.content })] })) }, index))), conversationThinking && (_jsxs(Box, { marginTop: 1, children: [_jsx(Text, { color: "cyan", children: _jsx(Spinner, { type: "dots" }) }), _jsx(Text, { dimColor: true, children: " AI is thinking..." })] }))] }), !conversationThinking && (_jsxs(Box, { borderStyle: "single", borderColor: "cyan", paddingX: 1, children: [_jsxs(Text, { color: "cyan", children: ['>', " "] }), _jsx(TextInput, { value: conversationInput, onChange: setConversationInput, onSubmit: handleConversationSubmit, placeholder: "Type your response..." })] })), errorMessage && (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: "red", children: ['!', " ", errorMessage] }) })), _jsx(Box, { borderStyle: "single", borderColor: "gray", paddingX: 1, marginTop: 1, children: _jsx(Text, { dimColor: true, children: "Enter: Submit response | Esc: Cancel creation" }) })] }));
+    };
+    /**
+     * Render confirmation prompt
+     */
+    const renderConfirmation = () => {
+        if (!confirmAction)
+            return null;
+        let promptText = '';
+        let warningText = '';
+        switch (confirmAction.type) {
+            case 'edit':
+                promptText = `Edit agent '${confirmAction.agentName}'?`;
+                break;
+            case 'delete':
+                promptText = `Delete agent '${confirmAction.agentName}'?`;
+                warningText = 'This action cannot be undone.';
+                break;
+        }
+        return (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { bold: true, color: "yellow", children: "Confirmation Required" }) }), _jsx(Box, { marginBottom: warningText ? 1 : 0, children: _jsx(Text, { children: promptText }) }), warningText && (_jsx(Box, { marginBottom: 1, children: _jsx(Text, { dimColor: true, children: warningText }) })), _jsx(Box, { children: _jsxs(Text, { children: ["Press ", _jsx(Text, { bold: true, color: "green", children: "Y" }), " to confirm, ", _jsx(Text, { bold: true, color: "red", children: "N" }), " to cancel"] }) })] }));
+    };
+    /**
+     * Render edit choice dialog
+     */
+    const renderEditChoice = () => {
+        if (!selectedAgentForEdit)
+            return null;
+        const choices = [
+            { label: 'Edit directly', description: 'Open in text editor' },
+            { label: 'AI-assisted edit', description: 'Describe changes in natural language' },
+        ];
+        return (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Box, { marginBottom: 1, children: _jsxs(Text, { bold: true, color: "cyan", children: ["Edit Agent: ", selectedAgentForEdit.name] }) }), _jsx(Box, { marginBottom: 1, children: _jsx(Text, { children: "How would you like to edit this agent?" }) }), _jsx(Box, { flexDirection: "column", marginBottom: 1, children: choices.map((choice, index) => {
+                        const isSelected = index === editChoiceIndex;
+                        return (_jsxs(Box, { paddingLeft: isSelected ? 0 : 2, children: [isSelected && _jsx(Text, { color: "cyan", bold: true, children: '> ' }), _jsx(Text, { bold: isSelected, color: isSelected ? 'cyan' : undefined, children: choice.label }), _jsxs(Text, { dimColor: true, children: [" - ", choice.description] })] }, index));
+                    }) }), !editAssistant && editChoiceIndex === 1 && (_jsx(Box, { marginBottom: 1, children: _jsxs(Text, { color: "yellow", children: ['!', " AI assistant not available"] }) })), _jsx(Box, { borderStyle: "single", borderColor: "gray", paddingX: 1, children: _jsx(Text, { dimColor: true, children: "\u2191/\u2193: Select | Enter: Confirm | Esc: Cancel" }) })] }));
+    };
+    /**
+     * Render AI edit request input
+     */
+    const renderAiEditRequest = () => {
+        if (!selectedAgentForEdit)
+            return null;
+        return (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Box, { marginBottom: 1, children: _jsxs(Text, { bold: true, color: "cyan", children: ["AI-Assisted Edit: ", selectedAgentForEdit.name] }) }), _jsxs(Box, { marginBottom: 1, flexDirection: "column", children: [_jsx(Text, { children: "Describe the changes you'd like to make:" }), _jsx(Text, { dimColor: true, children: "(e.g., \"add error handling guidelines\", \"make it focus on TypeScript\", \"add a code review checklist\")" })] }), _jsxs(Box, { borderStyle: "single", borderColor: "cyan", paddingX: 1, children: [_jsxs(Text, { color: "cyan", children: ['>', " "] }), _jsx(TextInput, { value: aiEditRequest, onChange: setAiEditRequest, onSubmit: handleAiEditSubmit, placeholder: "Describe your changes..." })] }), errorMessage && (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: "red", children: ['!', " ", errorMessage] }) })), statusMessage && (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: "green", children: ['>', " ", statusMessage] }) })), _jsx(Box, { borderStyle: "single", borderColor: "gray", paddingX: 1, marginTop: 1, children: _jsx(Text, { dimColor: true, children: "Enter: Submit | Esc: Cancel" }) })] }));
+    };
+    /**
+     * Render AI edit processing state
+     */
+    const renderAiEditProcessing = () => {
+        return (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { bold: true, color: "cyan", children: "AI-Assisted Edit" }) }), _jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { color: "cyan", children: _jsx(Spinner, { type: "dots" }) }), _jsx(Text, { children: " Processing your edit request..." })] }), _jsx(Box, { marginTop: 1, borderStyle: "single", borderColor: "gray", paddingX: 1, children: _jsx(Text, { dimColor: true, children: "The AI is updating the agent based on your description..." }) })] }));
+    };
+    /**
+     * Render AI edit confirmation
+     */
+    const renderAiEditConfirm = () => {
+        if (!aiEditResult || !selectedAgentForEdit)
+            return null;
+        // Show a preview of the changes (first ~500 chars of content)
+        const preview = aiEditResult.content.slice(0, 500);
+        const truncated = aiEditResult.content.length > 500;
+        return (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Box, { marginBottom: 1, children: _jsxs(Text, { bold: true, color: "cyan", children: ["Review AI Changes: ", selectedAgentForEdit.name] }) }), _jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { bold: true, color: "green", children: "Summary: " }), _jsx(Text, { children: aiEditResult.summary })] }), _jsxs(Box, { borderStyle: "single", borderColor: "gray", paddingX: 1, paddingY: 1, marginBottom: 1, flexDirection: "column", children: [_jsx(Text, { bold: true, dimColor: true, children: "Updated Content Preview:" }), _jsx(Text, { children: preview }), truncated && _jsx(Text, { dimColor: true, children: "... (truncated)" })] }), _jsx(Box, { marginBottom: 1, children: _jsx(Text, { children: "Accept these changes?" }) }), _jsx(Box, { children: _jsxs(Text, { children: ["Press ", _jsx(Text, { bold: true, color: "green", children: "Y" }), " to save, ", _jsx(Text, { bold: true, color: "red", children: "N" }), " to try again"] }) }), errorMessage && (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: "red", children: ['!', " ", errorMessage] }) }))] }));
+    };
+    /**
+     * Render agent list
+     */
+    const renderList = () => {
+        if (agents.length === 0) {
+            return (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Text, { dimColor: true, children: "No agents found" }), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { children: ["Press ", _jsx(Text, { bold: true, color: "cyan", children: "+" }), " or ", _jsx(Text, { bold: true, color: "cyan", children: "N" }), " to create a new agent"] }) }), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { dimColor: true, children: ["Agents directory: ", store.getProjectDir()] }) })] }));
+        }
+        return (_jsx(Box, { flexDirection: "column", marginTop: 1, children: agents.map((agent, index) => {
+                const isSelected = index === selectedIndex;
+                const locationIcon = agent.location === 'project' ? '[P]' : '[G]';
+                const toolsInfo = agent.tools === 'all' ? 'all tools' : `${agent.tools.length} tools`;
+                return (_jsxs(Box, { paddingLeft: isSelected ? 0 : 2, children: [isSelected && _jsx(Text, { color: "cyan", bold: true, children: '> ' }), _jsx(Text, { dimColor: true, children: locationIcon }), _jsx(Text, { children: " " }), _jsx(Text, { bold: isSelected, color: isSelected ? 'cyan' : undefined, children: agent.name }), _jsxs(Text, { dimColor: true, children: [" (", agent.model, ", ", toolsInfo, ")"] })] }, agent.name));
+            }) }));
+    };
+    /**
+     * Render agent detail view
+     */
+    const renderDetail = () => {
+        if (!viewingAgent)
+            return null;
+        const toolsList = viewingAgent.tools === 'all'
+            ? 'All tools'
+            : viewingAgent.tools.join(', ');
+        return (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsxs(Box, { borderStyle: "single", borderColor: "cyan", paddingX: 1, flexDirection: "column", children: [_jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { bold: true, color: "cyan", children: viewingAgent.name }), _jsxs(Text, { dimColor: true, children: [" (", viewingAgent.location, ")"] })] }), _jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { bold: true, children: "Description: " }), _jsx(Text, { children: viewingAgent.description })] }), _jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { bold: true, children: "Model: " }), _jsx(Text, { children: viewingAgent.model })] }), _jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { bold: true, children: "Tools: " }), _jsx(Text, { children: toolsList })] }), _jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { bold: true, children: "File: " }), _jsx(Text, { dimColor: true, children: viewingAgent.filePath })] }), _jsx(Box, { borderStyle: "single", borderColor: "gray", paddingX: 1, marginTop: 1, children: _jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { bold: true, dimColor: true, children: "System Prompt Preview:" }), _jsxs(Text, { children: [viewingAgent.systemPrompt.slice(0, 500), viewingAgent.systemPrompt.length > 500 ? '...' : ''] })] }) })] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "Press any key to return to list" }) })] }));
+    };
+    /**
+     * Render status bar
+     */
+    const renderStatusBar = () => {
+        return (_jsxs(Box, { flexDirection: "column", marginTop: 1, borderStyle: "single", borderColor: "gray", paddingX: 1, children: [_jsx(Box, { justifyContent: "space-between", children: _jsx(Text, { dimColor: true, children: "\u2191/\u2193: Navigate | Enter: Edit | Space: View | +/N: New | M: Model | D: Delete | Q: Quit" }) }), statusMessage && (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: "green", children: ['>', " ", statusMessage] }) })), errorMessage && (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: "red", children: ['!', " ", errorMessage] }) })), selectedAgent && (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { dimColor: true, children: ["Selected: ", selectedAgent.name, " | Location: ", selectedAgent.location, " |", ' ', "Model: ", selectedAgent.model] }) }))] }));
+    };
+    /**
+     * Main render
+     */
+    return (_jsxs(Box, { flexDirection: "column", padding: menuState === 'editing' ? 0 : 1, children: [menuState === 'editing' && editingContent && editingFilePath && (_jsx(InlineEditor, { content: editingContent, filePath: editingFilePath, onSave: handleEditorSave, onCancel: handleEditorCancel })), menuState !== 'editing' && (_jsxs(_Fragment, { children: [_jsxs(Box, { borderStyle: "bold", borderColor: "cyan", paddingX: 1, children: [_jsx(Text, { bold: true, color: "cyan", children: "Task Agent Manager" }), _jsx(Text, { children: " " }), _jsxs(Text, { dimColor: true, children: ["(", agents.length, " agents)"] })] }), menuState === 'loading' && (_jsxs(Box, { marginTop: 1, children: [_jsx(Text, { color: "cyan", children: _jsx(Spinner, { type: "dots" }) }), _jsx(Text, { children: " Processing..." })] })), menuState === 'create-model' && renderModelSelection(), menuState === 'edit-model' && renderModelSelection(), menuState === 'create-description' && renderDescriptionInput(), menuState === 'create-conversation' && renderConversation(), menuState === 'create-generating' && renderGenerating(), menuState === 'confirm' && renderConfirmation(), menuState === 'edit-choice' && renderEditChoice(), menuState === 'ai-edit-request' && renderAiEditRequest(), menuState === 'ai-edit-processing' && renderAiEditProcessing(), menuState === 'ai-edit-confirm' && renderAiEditConfirm(), menuState === 'viewing' && renderDetail(), menuState === 'list' && renderList(), menuState === 'list' && renderStatusBar()] }))] }));
+};
+//# sourceMappingURL=InteractiveAgentMenu.js.map