capsule-ai-cli/dist/ui/components/SubAgentConfig.js

The AI Model Orchestrator - Intelligent multi-model workflows with device-locked licensing

import React, { useState, useEffect } from 'react';
import { Box, Text, useInput } from 'ink';
import SelectInput from 'ink-select-input';
import chalk from 'chalk';
import { configManager } from '../../core/config.js';
import { getProviderColor, createProviderColoredItem } from '../utils/provider-colors.js';
import { stateService } from '../../services/state.js';
export const SubAgentConfig = ({ onConfirm, onCancel, currentModel, currentProvider, currentDefaults, saveAsDefault = false }) => {
    const [selectedProvider, setSelectedProvider] = useState(null);
    const [providers, setProviders] = useState([]);
    const [modelsByProvider, setModelsByProvider] = useState({});
    const [loading, setLoading] = useState(true);
    const providerColor = getProviderColor(selectedProvider || currentProvider);
    useInput((_input, key) => {
        if (key.escape) {
            onCancel();
        }
    });
    useEffect(() => {
        const loadProvidersAndModels = async () => {
            try {
                const availableProviders = await stateService.getAvailableProviders();
                setProviders(availableProviders);
                const modelsMap = {};
                for (const provider of availableProviders) {
                    const models = await stateService.getAvailableModels(provider);
                    modelsMap[provider] = models;
                }
                setModelsByProvider(modelsMap);
            }
            catch (error) {
                console.error('Failed to load providers/models:', error);
                setProviders(['openai', 'anthropic', 'google', 'xai', 'deepseek', 'moonshot']);
                setModelsByProvider({
                    openai: ['openai/gpt-4o', 'openai/gpt-4o-mini'],
                    anthropic: ['anthropic/claude-opus-4', 'anthropic/claude-sonnet-4'],
                    google: ['google/gemini-2.5-pro', 'google/gemini-2.5-flash'],
                    xai: ['x-ai/grok-4'],
                    deepseek: ['deepseek/deepseek-chat-v3-0324', 'deepseek/deepseek-r1-0528:free'],
                    moonshot: ['moonshotai/kimi-k2']
                });
            }
            finally {
                setLoading(false);
            }
        };
        loadProvidersAndModels();
    }, []);
    if (loading) {
        return (React.createElement(Box, { flexDirection: "column", borderStyle: "single", borderColor: providerColor, paddingX: 1 },
            React.createElement(Text, { color: providerColor }, "Loading available models...")));
    }
    if (!selectedProvider) {
        const items = [
            { label: chalk.blue('Same as parent'), value: 'SAME' },
            ...(currentDefaults ? [{
                    label: chalk.green(`Use saved default (${currentDefaults.model} on ${currentDefaults.provider})`),
                    value: 'DEFAULT'
                }] : []),
            ...providers.map(p => ({
                label: p === currentProvider ? `${p} (current)` : p,
                value: p
            }))
        ];
        const handleProviderSelect = (item) => {
            if (item.value === 'SAME') {
                onConfirm(currentModel, currentProvider);
            }
            else if (item.value === 'DEFAULT' && currentDefaults) {
                onConfirm(currentDefaults.model, currentDefaults.provider);
            }
            else {
                setSelectedProvider(item.value);
            }
        };
        return (React.createElement(Box, { flexDirection: "column", borderStyle: "single", borderColor: providerColor, paddingX: 1 },
            React.createElement(Box, { marginBottom: 1 },
                React.createElement(Text, { color: providerColor }, "\uD83E\uDD16 Sub-Agent Configuration")),
            React.createElement(Box, null,
                React.createElement(Text, { dimColor: true }, "Select provider for sub-agents:")),
            React.createElement(Box, { marginTop: 1 },
                React.createElement(SelectInput, { items: items, onSelect: handleProviderSelect, itemComponent: createProviderColoredItem() })),
            React.createElement(Box, { marginTop: 1 },
                React.createElement(Text, { dimColor: true }, "Press ESC to cancel"))));
    }
    const models = modelsByProvider[selectedProvider] || [];
    const items = [
        { label: chalk.blue('Default for provider'), value: 'DEFAULT' },
        ...models.map(m => ({
            label: m,
            value: m
        }))
    ];
    const handleModelSelect = (item) => {
        const model = item.value === 'DEFAULT' ? models[0] : item.value;
        if (saveAsDefault) {
            configManager.setConfig('subAgentDefaults', { provider: selectedProvider, model });
        }
        onConfirm(model, selectedProvider);
    };
    return (React.createElement(Box, { flexDirection: "column", borderStyle: "single", borderColor: providerColor, paddingX: 1 },
        React.createElement(Box, { marginBottom: 1 },
            React.createElement(Text, { color: providerColor }, "\uD83E\uDD16 Sub-Agent Configuration")),
        React.createElement(Box, null,
            React.createElement(Text, { dimColor: true },
                "Select model for ",
                React.createElement(Text, { color: providerColor }, selectedProvider),
                ":")),
        React.createElement(Box, { marginTop: 1 },
            React.createElement(SelectInput, { items: items, onSelect: handleModelSelect })),
        React.createElement(Box, { marginTop: 1 },
            React.createElement(Text, { dimColor: true }, "Press ESC to cancel"))));
};
//# sourceMappingURL=SubAgentConfig.js.map