@compass-ai/nova 1.0.74 → 1.0.76

package/dist/ui/components/AgentCreationWizard.js

@@ -1,619 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * React/ink component for interactive agent creation wizard.
- * Multi-step wizard for creating new agents with full configuration options.
- */
-import { useState, useCallback, useEffect } from 'react';
-import { Box, Text, useInput } from 'ink';
-import TextInput from 'ink-text-input';
-import { createAgent } from '../../services/agent-manager.js';
-import { logger } from '../../utils/logger.js';
-import { generateAgentSystemPrompt } from '../../services/llm-system-prompt-generator.js';
-/**
- * Available tool categories
- */
-const TOOL_CATEGORIES = [
-    {
-        id: 'all',
-        label: 'All tools',
-        description: 'Full access to all available tools',
-        tools: [],
-    },
-    {
-        id: 'execution',
-        label: 'Execution tools',
-        description: 'Bash, Task, and other execution tools',
-        tools: ['Bash', 'Task', 'TaskOutput', 'KillShell'],
-    },
-    {
-        id: 'edit',
-        label: 'Edit tools',
-        description: 'Read, Write, Edit, and file manipulation',
-        tools: ['Read', 'Write', 'Edit', 'NotebookEdit'],
-    },
-    {
-        id: 'search',
-        label: 'Search tools',
-        description: 'Glob, Grep, and search capabilities',
-        tools: ['Glob', 'Grep', 'WebSearch', 'WebFetch'],
-    },
-    {
-        id: 'other',
-        label: 'Other tools',
-        description: 'TodoWrite, AskUserQuestion, and misc',
-        tools: ['TodoWrite', 'AskUserQuestion', 'Skill', 'EnterPlanMode', 'ExitPlanMode'],
-    },
-];
-/**
- * Available model options
- */
-const MODEL_OPTIONS = [
-    {
-        id: 'sonnet',
-        label: 'Sonnet',
-        description: 'Balanced performance - best for most agents',
-    },
-    {
-        id: 'opus',
-        label: 'Opus',
-        description: 'Most capable for complex reasoning tasks',
-    },
-    {
-        id: 'haiku',
-        label: 'Haiku',
-        description: 'Fast and efficient for simple tasks',
-    },
-    {
-        id: 'inherit',
-        label: 'Inherit from parent',
-        description: 'Use the same model as the main conversation',
-    },
-];
-/**
- * Available color options
- */
-const COLOR_OPTIONS = [
-    { id: 'auto', label: 'Automatic color', color: 'white', bgColor: '' },
-    { id: 'red', label: 'Red', color: 'white', bgColor: 'bgRed' },
-    { id: 'blue', label: 'Blue', color: 'white', bgColor: 'bgBlue' },
-    { id: 'green', label: 'Green', color: 'black', bgColor: 'bgGreen' },
-    { id: 'yellow', label: 'Yellow', color: 'black', bgColor: 'bgYellow' },
-    { id: 'magenta', label: 'Purple', color: 'white', bgColor: 'bgMagenta' },
-    { id: 'cyan', label: 'Cyan', color: 'black', bgColor: 'bgCyan' },
-];
-/**
- * AgentCreationWizard component provides a multi-step wizard for creating agents.
- *
- * Steps:
- * 1. Location selection (Project vs Personal)
- * 2. Creation method (Generate with Claude vs Manual)
- * 3. Name input
- * 4. Description input
- * 5. Tool selection
- * 6. Model selection
- * 7. Color selection
- * 8. Confirmation and save
- */
-export const AgentCreationWizard = ({ onComplete, onCancel, isActive = true, projectRoot: _projectRoot = process.cwd(), enabledTools, }) => {
-    const [step, setStep] = useState('location');
-    const [error, setError] = useState(null);
-    const [selectedIndex, setSelectedIndex] = useState(0);
-    // Agent configuration
-    const [config, setConfig] = useState({
-        location: 'project',
-        creationMethod: 'manual',
-        name: '',
-        description: '',
-        selectedToolCategories: new Set(['all']),
-        model: 'sonnet',
-        color: 'auto',
-        systemPrompt: '',
-    });
-    // Text input focus state
-    const [isTextInputActive, setIsTextInputActive] = useState(false);
-    // Track prompt generation progress
-    const [generationProgress, setGenerationProgress] = useState('');
-    // Track terminal width for horizontal lines
-    const [terminalWidth, setTerminalWidth] = useState(process.stdout.columns || 80);
-    // Listen for terminal resize events
-    useEffect(() => {
-        const handleResize = () => {
-            setTerminalWidth(process.stdout.columns || 80);
-        };
-        process.stdout.on('resize', handleResize);
-        return () => {
-            process.stdout.off('resize', handleResize);
-        };
-    }, []);
-    /**
-     * Gets tools array from selected categories
-     */
-    const getSelectedTools = useCallback(() => {
-        if (config.selectedToolCategories.has('all')) {
-            // When "All tools" is selected, use the currently enabled tools if provided
-            // This ensures the subagent gets the same tools that were enabled at creation time
-            if (enabledTools && enabledTools.length > 0) {
-                return enabledTools;
-            }
-            return undefined; // undefined means all tools (fallback)
-        }
-        const tools = new Set();
-        for (const categoryId of config.selectedToolCategories) {
-            const category = TOOL_CATEGORIES.find((c) => c.id === categoryId);
-            if (category) {
-                for (const tool of category.tools) {
-                    tools.add(tool);
-                }
-            }
-        }
-        return tools.size > 0 ? Array.from(tools) : undefined;
-    }, [config.selectedToolCategories, enabledTools]);
-    /**
-     * Handles saving the agent
-     */
-    const handleSave = useCallback(async () => {
-        setStep('generating-prompt');
-        setError(null);
-        setGenerationProgress('Initializing...');
-        try {
-            // Generate description and system prompt using LLM
-            let systemPrompt = config.systemPrompt;
-            let finalDescription = config.description;
-            if (!systemPrompt) {
-                setGenerationProgress('Generating optimized description and system prompt with Claude...');
-                const result = await generateAgentSystemPrompt({
-                    name: config.name,
-                    description: config.description,
-                    tools: getSelectedTools(),
-                    model: config.model,
-                }, {
-                    stream: false,
-                    temperature: 0.5,
-                });
-                systemPrompt = result.systemPrompt;
-                finalDescription = result.description;
-                logger.debug('Generated agent content', {
-                    agentName: config.name,
-                    descriptionLength: finalDescription.length,
-                    promptLength: systemPrompt.length,
-                });
-            }
-            setStep('saving');
-            setGenerationProgress('Creating agent file...');
-            const agentPath = await createAgent({
-                name: config.name,
-                description: finalDescription,
-                systemPrompt,
-                allowedTools: getSelectedTools(),
-                model: config.model === 'inherit' ? undefined : config.model,
-                permissionMode: 'default',
-                rawFrontmatter: {
-                    name: config.name,
-                    description: finalDescription,
-                    tools: getSelectedTools()?.join(', '),
-                    model: config.model === 'inherit' ? 'inherit' : config.model,
-                },
-            }, config.location);
-            setStep('complete');
-            setTimeout(() => {
-                onComplete(agentPath);
-            }, 1500);
-        }
-        catch (err) {
-            const errorMsg = err instanceof Error ? err.message : 'Failed to create agent';
-            setError(errorMsg);
-            setStep('confirm');
-            logger.error('Failed to create agent', err);
-        }
-    }, [config, getSelectedTools, onComplete]);
-    /**
-     * Navigation options count for current step
-     */
-    const getOptionsCount = useCallback(() => {
-        switch (step) {
-            case 'location':
-                return 2;
-            case 'creation-method':
-                return 2;
-            case 'tools':
-                return TOOL_CATEGORIES.length + 1; // +1 for continue button
-            case 'model':
-                return MODEL_OPTIONS.length;
-            case 'color':
-                return COLOR_OPTIONS.length;
-            default:
-                return 0;
-        }
-    }, [step]);
-    /**
-     * Handles step navigation
-     */
-    const handleNext = useCallback(() => {
-        switch (step) {
-            case 'location':
-                setConfig((prev) => ({
-                    ...prev,
-                    location: selectedIndex === 0 ? 'project' : 'user',
-                }));
-                setSelectedIndex(0);
-                setStep('creation-method');
-                break;
-            case 'creation-method':
-                setConfig((prev) => ({
-                    ...prev,
-                    creationMethod: selectedIndex === 0 ? 'generate' : 'manual',
-                }));
-                setSelectedIndex(0);
-                setStep('name');
-                setIsTextInputActive(true);
-                break;
-            case 'name':
-                if (!config.name.trim()) {
-                    setError('Agent name is required');
-                    return;
-                }
-                // Validate name format
-                if (!/^[a-z0-9-]+$/.test(config.name)) {
-                    setError('Name must be lowercase letters, numbers, and hyphens only');
-                    return;
-                }
-                setError(null);
-                setIsTextInputActive(true);
-                setStep('description');
-                break;
-            case 'description':
-                if (!config.description.trim()) {
-                    setError('Description is required');
-                    return;
-                }
-                setError(null);
-                setIsTextInputActive(false);
-                setSelectedIndex(0);
-                setStep('tools');
-                break;
-            case 'tools':
-                // Last index is the continue button
-                if (selectedIndex === TOOL_CATEGORIES.length) {
-                    setSelectedIndex(0);
-                    setStep('model');
-                }
-                break;
-            case 'model':
-                setConfig((prev) => ({
-                    ...prev,
-                    model: MODEL_OPTIONS[selectedIndex].id,
-                }));
-                setSelectedIndex(0);
-                setStep('color');
-                break;
-            case 'color':
-                setConfig((prev) => ({
-                    ...prev,
-                    color: COLOR_OPTIONS[selectedIndex].id,
-                }));
-                setStep('confirm');
-                break;
-            case 'confirm':
-                handleSave();
-                break;
-        }
-    }, [step, selectedIndex, config.name, config.description, handleSave]);
-    /**
-     * Handles going back to previous step
-     */
-    const handleBack = useCallback(() => {
-        switch (step) {
-            case 'creation-method':
-                setStep('location');
-                setSelectedIndex(config.location === 'project' ? 0 : 1);
-                break;
-            case 'name':
-                setStep('creation-method');
-                setIsTextInputActive(false);
-                setSelectedIndex(config.creationMethod === 'generate' ? 0 : 1);
-                break;
-            case 'description':
-                setStep('name');
-                break;
-            case 'tools':
-                setStep('description');
-                setIsTextInputActive(true);
-                break;
-            case 'model':
-                setStep('tools');
-                setSelectedIndex(0);
-                break;
-            case 'color':
-                setStep('model');
-                setSelectedIndex(MODEL_OPTIONS.findIndex((m) => m.id === config.model));
-                break;
-            case 'confirm':
-                setStep('color');
-                setSelectedIndex(COLOR_OPTIONS.findIndex((c) => c.id === config.color));
-                break;
-        }
-    }, [step, config]);
-    /**
-     * Handles tool category toggle
-     */
-    const toggleToolCategory = useCallback((categoryId) => {
-        setConfig((prev) => {
-            const newCategories = new Set(prev.selectedToolCategories);
-            if (categoryId === 'all') {
-                // If selecting "all", clear other selections
-                if (newCategories.has('all')) {
-                    newCategories.delete('all');
-                }
-                else {
-                    newCategories.clear();
-                    newCategories.add('all');
-                }
-            }
-            else {
-                // If selecting a specific category, remove "all"
-                newCategories.delete('all');
-                if (newCategories.has(categoryId)) {
-                    newCategories.delete(categoryId);
-                }
-                else {
-                    newCategories.add(categoryId);
-                }
-                // If no categories selected, default to "all"
-                if (newCategories.size === 0) {
-                    newCategories.add('all');
-                }
-            }
-            return { ...prev, selectedToolCategories: newCategories };
-        });
-    }, []);
-    /**
-     * Handles keyboard input
-     */
-    useInput((input, key) => {
-        if (!isActive)
-            return;
-        // Don't handle navigation when text input is active
-        if (isTextInputActive && (step === 'name' || step === 'description')) {
-            if (key.escape) {
-                onCancel();
-            }
-            return;
-        }
-        // Global escape to cancel
-        if (key.escape) {
-            if (step === 'location') {
-                onCancel();
-            }
-            else {
-                handleBack();
-            }
-            return;
-        }
-        // Navigation
-        if (key.upArrow) {
-            const count = getOptionsCount();
-            if (count > 0) {
-                setSelectedIndex((prev) => (prev > 0 ? prev - 1 : count - 1));
-            }
-            return;
-        }
-        if (key.downArrow) {
-            const count = getOptionsCount();
-            if (count > 0) {
-                setSelectedIndex((prev) => (prev < count - 1 ? prev + 1 : 0));
-            }
-            return;
-        }
-        // Selection/Enter
-        if (key.return) {
-            if (step === 'tools' && selectedIndex < TOOL_CATEGORIES.length) {
-                toggleToolCategory(TOOL_CATEGORIES[selectedIndex].id);
-            }
-            else {
-                handleNext();
-            }
-            return;
-        }
-        // Space to toggle in tools step
-        if (input === ' ' && step === 'tools' && selectedIndex < TOOL_CATEGORIES.length) {
-            toggleToolCategory(TOOL_CATEGORIES[selectedIndex].id);
-            return;
-        }
-        // Quick keys for confirm step
-        if (step === 'confirm') {
-            if (input.toLowerCase() === 's') {
-                handleSave();
-            }
-            else if (input.toLowerCase() === 'e') {
-                // TODO: Open in editor
-                handleSave();
-            }
-        }
-    }, { isActive: isActive && !isTextInputActive });
-    /**
-     * Gets the step title
-     */
-    const getStepTitle = () => {
-        switch (step) {
-            case 'location':
-                return 'Choose location';
-            case 'creation-method':
-                return 'Creation method';
-            case 'name':
-                return 'Agent name';
-            case 'description':
-                return 'Agent description';
-            case 'tools':
-                return 'Select tools';
-            case 'model':
-                return 'Select model';
-            case 'color':
-                return 'Choose background color';
-            case 'confirm':
-                return 'Confirm and save';
-            case 'generating-prompt':
-                return 'Generating agent content...';
-            case 'saving':
-                return 'Saving...';
-            case 'complete':
-                return 'Agent created!';
-            default:
-                return 'Create new agent';
-        }
-    };
-    /**
-     * Renders the location selection step
-     */
-    const renderLocationStep = () => (_jsxs(Box, { flexDirection: "column", children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { dimColor: true, children: "Where should this agent be saved?" }) }), _jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { children: [_jsx(Text, { color: selectedIndex === 0 ? 'cyan' : undefined, children: selectedIndex === 0 ? '❯ ' : '  ' }), _jsx(Text, { bold: selectedIndex === 0, children: "1. Project (.compass/agents/)" })] }), _jsxs(Box, { children: [_jsx(Text, { color: selectedIndex === 1 ? 'cyan' : undefined, children: selectedIndex === 1 ? '❯ ' : '  ' }), _jsx(Text, { bold: selectedIndex === 1, children: "2. Personal (~/.compass/agents/)" })] })] })] }));
-    /**
-     * Renders the creation method selection step
-     */
-    const renderCreationMethodStep = () => (_jsxs(Box, { flexDirection: "column", children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { dimColor: true, children: "How would you like to create this agent?" }) }), _jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { children: [_jsx(Text, { color: selectedIndex === 0 ? 'cyan' : undefined, children: selectedIndex === 0 ? '❯ ' : '  ' }), _jsx(Text, { bold: selectedIndex === 0, children: "1. Generate with Claude (recommended)" })] }), _jsxs(Box, { children: [_jsx(Text, { color: selectedIndex === 1 ? 'cyan' : undefined, children: selectedIndex === 1 ? '❯ ' : '  ' }), _jsx(Text, { bold: selectedIndex === 1, children: "2. Manual configuration" })] })] })] }));
-    /**
-     * Renders the name input step
-     */
-    const renderNameStep = () => (_jsxs(Box, { flexDirection: "column", children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { dimColor: true, children: "Enter a unique name for this agent (lowercase, hyphens allowed)" }) }), _jsxs(Box, { children: [_jsx(Text, { bold: true, children: "Name: " }), _jsx(TextInput, { value: config.name, onChange: (value) => {
-                            setConfig((prev) => ({ ...prev, name: value.toLowerCase().replace(/[^a-z0-9-]/g, '') }));
-                            if (error)
-                                setError(null);
-                        }, onSubmit: handleNext, placeholder: "e.g., code-reviewer" })] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "Press Enter to continue" }) })] }));
-    /**
-     * Renders the description input step
-     */
-    const renderDescriptionStep = () => (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { dimColor: true, children: "Describe what this agent should do and when it should be used" }), _jsx(Text, { dimColor: true, children: " (be comprehensive for best results)" })] }), _jsx(Box, { children: _jsx(TextInput, { value: config.description, onChange: (value) => {
-                        setConfig((prev) => ({ ...prev, description: value }));
-                        if (error)
-                            setError(null);
-                    }, onSubmit: handleNext, placeholder: "e.g., Help me write unit tests for my code..." }) }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "Press Enter to continue" }) })] }));
-    /**
-     * Renders the tool selection step
-     */
-    const renderToolsStep = () => {
-        const toolsLabel = config.selectedToolCategories.has('all')
-            ? 'All tools selected'
-            : `${config.selectedToolCategories.size} categories selected`;
-        return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { dimColor: true, children: "Select which tools this agent can use" }) }), _jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { dimColor: true, children: "\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500" }), TOOL_CATEGORIES.map((category, index) => {
-                            const isSelected = config.selectedToolCategories.has(category.id);
-                            const isFocused = selectedIndex === index;
-                            return (_jsxs(Box, { children: [_jsx(Text, { color: isFocused ? 'cyan' : undefined, children: isFocused ? '❯ ' : '  ' }), _jsx(Text, { color: isSelected ? 'green' : 'gray', children: isSelected ? '☒' : '☐' }), _jsxs(Text, { bold: isFocused, children: [" ", category.label] }), isFocused && (_jsxs(Text, { dimColor: true, children: [" - ", category.description] }))] }, category.id));
-                        }), _jsx(Text, { dimColor: true, children: "\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500" }), _jsxs(Box, { marginTop: 1, children: [_jsx(Text, { color: selectedIndex === TOOL_CATEGORIES.length ? 'cyan' : undefined, children: selectedIndex === TOOL_CATEGORIES.length ? '❯ ' : '  ' }), _jsx(Text, { bold: selectedIndex === TOOL_CATEGORIES.length, children: "[ Continue ]" })] })] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: toolsLabel }) })] }));
-    };
-    /**
-     * Renders the model selection step
-     */
-    const renderModelStep = () => (_jsxs(Box, { flexDirection: "column", children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { dimColor: true, children: "Model determines the agent's reasoning capabilities and speed." }) }), _jsx(Box, { flexDirection: "column", children: MODEL_OPTIONS.map((model, index) => {
-                    const isFocused = selectedIndex === index;
-                    const isCurrentDefault = model.id === 'sonnet';
-                    return (_jsxs(Box, { children: [_jsx(Text, { color: isFocused ? 'cyan' : undefined, children: isFocused ? '❯ ' : '  ' }), _jsxs(Text, { bold: isFocused, children: [index + 1, ". ", model.label] }), isCurrentDefault && _jsx(Text, { color: "green", children: " \u2714" }), _jsxs(Text, { dimColor: true, children: ['  ', model.description] })] }, model.id));
-                }) })] }));
-    /**
-     * Renders the color selection step
-     */
-    const renderColorStep = () => (_jsxs(Box, { flexDirection: "column", children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { dimColor: true, children: "Choose a background color for the agent badge" }) }), _jsx(Box, { flexDirection: "column", children: COLOR_OPTIONS.map((color, index) => {
-                    const isFocused = selectedIndex === index;
-                    return (_jsxs(Box, { children: [_jsx(Text, { color: isFocused ? 'cyan' : undefined, children: isFocused ? '❯ ' : '  ' }), color.id !== 'auto' && (_jsx(Text, { backgroundColor: color.id, color: color.color, children: '  ' })), _jsxs(Text, { bold: isFocused, children: [" ", color.label] })] }, color.id));
-                }) }), _jsxs(Box, { marginTop: 1, children: [_jsx(Text, { dimColor: true, children: "Preview: " }), config.color !== 'auto' ? (_jsxs(Text, { backgroundColor: config.color, color: "white", children: [' ', config.name || 'agent-name', ' '] })) : (_jsx(Text, { bold: true, children: config.name || 'agent-name' }))] })] }));
-    /**
-     * Renders the confirmation step
-     */
-    const renderConfirmStep = () => {
-        const toolsDisplay = config.selectedToolCategories.has('all')
-            ? 'All tools'
-            : Array.from(config.selectedToolCategories).join(', ');
-        const modelDisplay = MODEL_OPTIONS.find((m) => m.id === config.model)?.label || config.model;
-        return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsxs(Box, { children: [_jsx(Text, { dimColor: true, children: "Name: " }), _jsx(Text, { bold: true, children: config.name })] }), _jsxs(Box, { children: [_jsx(Text, { dimColor: true, children: "Location: " }), _jsx(Text, { children: config.location === 'project'
-                                        ? '.compass\\agents\\' + config.name + '.md'
-                                        : '~/.compass/agents/' + config.name + '.md' })] }), _jsxs(Box, { children: [_jsx(Text, { dimColor: true, children: "Tools: " }), _jsx(Text, { children: toolsDisplay })] }), _jsxs(Box, { children: [_jsx(Text, { dimColor: true, children: "Model: " }), _jsx(Text, { children: modelDisplay })] })] }), _jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsx(Text, { dimColor: true, children: "Description (tells Claude when to use this agent):" }), _jsx(Box, { marginLeft: 2, marginTop: 1, children: _jsx(Text, { wrap: "wrap", children: config.description }) })] }), config.selectedToolCategories.has('all') && (_jsx(Box, { marginBottom: 1, children: _jsx(Text, { color: "yellow", children: "\u26A0 Agent has access to all tools" }) })), _jsxs(Box, { marginTop: 1, children: [_jsx(Text, { dimColor: true, children: "Press " }), _jsx(Text, { color: "cyan", children: "s" }), _jsx(Text, { dimColor: true, children: " or " }), _jsx(Text, { color: "cyan", children: "Enter" }), _jsx(Text, { dimColor: true, children: " to save, " }), _jsx(Text, { color: "cyan", children: "e" }), _jsx(Text, { dimColor: true, children: " to save and edit" })] })] }));
-    };
-    /**
-     * Renders the generating prompt step
-     */
-    const renderGeneratingPromptStep = () => (_jsxs(Box, { flexDirection: "column", children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { color: "cyan", children: generationProgress || 'Generating agent content...' }) }), _jsx(Box, { children: _jsx(Text, { dimColor: true, children: "Using Claude to create:" }) }), _jsxs(Box, { marginLeft: 2, flexDirection: "column", children: [_jsx(Text, { dimColor: true, children: "\u2022 Optimized description that tells Claude when to use this agent" }), _jsx(Text, { dimColor: true, children: "\u2022 High-quality system prompt tailored to the agent's role" })] })] }));
-    /**
-     * Renders the saving step
-     */
-    const renderSavingStep = () => (_jsx(Box, { flexDirection: "column", children: _jsx(Text, { dimColor: true, children: "Creating agent..." }) }));
-    /**
-     * Renders the complete step
-     */
-    const renderCompleteStep = () => (_jsxs(Box, { flexDirection: "column", children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { color: "green", bold: true, children: "\u2713 Agent created successfully!" }) }), _jsxs(Box, { children: [_jsx(Text, { dimColor: true, children: "Location: " }), _jsx(Text, { children: config.location === 'project'
-                            ? '.compass/agents/' + config.name + '.md'
-                            : '~/.compass/agents/' + config.name + '.md' })] })] }));
-    /**
-     * Renders step content based on current step
-     */
-    const renderStepContent = () => {
-        switch (step) {
-            case 'location':
-                return renderLocationStep();
-            case 'creation-method':
-                return renderCreationMethodStep();
-            case 'name':
-                return renderNameStep();
-            case 'description':
-                return renderDescriptionStep();
-            case 'tools':
-                return renderToolsStep();
-            case 'model':
-                return renderModelStep();
-            case 'color':
-                return renderColorStep();
-            case 'confirm':
-                return renderConfirmStep();
-            case 'generating-prompt':
-                return renderGeneratingPromptStep();
-            case 'saving':
-                return renderSavingStep();
-            case 'complete':
-                return renderCompleteStep();
-            default:
-                return null;
-        }
-    };
-    /**
-     * Renders the progress indicator
-     */
-    const renderProgressIndicator = () => {
-        const steps = [
-            'location',
-            'creation-method',
-            'name',
-            'description',
-            'tools',
-            'model',
-            'color',
-            'confirm',
-        ];
-        const currentIndex = steps.indexOf(step);
-        return (_jsx(Box, { marginBottom: 1, children: steps.map((s, index) => (_jsxs(Box, { children: [_jsx(Text, { color: index === currentIndex ? 'cyan' : index < currentIndex ? 'green' : 'gray', bold: index === currentIndex, children: index < currentIndex ? '✓' : index === currentIndex ? '●' : '○' }), index < steps.length - 1 && _jsx(Text, { dimColor: true, children: " \u2192 " })] }, s))) }));
-    };
-    /**
-     * Renders the footer with navigation hints
-     */
-    const renderFooter = () => {
-        if (step === 'saving' || step === 'complete' || step === 'generating-prompt') {
-            return null;
-        }
-        const hints = [];
-        if (step === 'name' || step === 'description') {
-            hints.push('Enter to continue');
-        }
-        else if (step === 'tools') {
-            hints.push('Enter to toggle selection', '↑↓ to navigate');
-        }
-        else if (step === 'confirm') {
-            hints.push('s/Enter to save', 'e to edit in your editor');
-        }
-        else {
-            hints.push('↑↓ to navigate', 'Enter to select');
-        }
-        hints.push('escape to go back');
-        return (_jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: hints.join(' · ') }) }));
-    };
-    // Get horizontal line for full screen (recalculates on resize)
-    const lineWidth = terminalWidth - 2;
-    const horizontalLine = '─'.repeat(Math.max(1, lineWidth));
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Box, { children: _jsx(Text, { dimColor: true, children: horizontalLine }) }), _jsx(Box, { marginBottom: 1, children: _jsx(Text, { bold: true, color: "cyan", children: "Create new agent" }) }), step !== 'saving' && step !== 'complete' && step !== 'generating-prompt' && renderProgressIndicator(), _jsx(Box, { marginBottom: 1, children: _jsx(Text, { bold: true, children: getStepTitle() }) }), error && (_jsx(Box, { marginBottom: 1, children: _jsxs(Text, { color: "red", children: ["\u2717 ", error] }) })), renderStepContent(), renderFooter()] }));
-};
-export default AgentCreationWizard;
-//# sourceMappingURL=AgentCreationWizard.js.map