snow-ai 0.2.24 → 0.2.26

package/dist/ui/pages/ConfigScreen.js

@@ -0,0 +1,748 @@
+import React, { useState, useEffect } from 'react';
+import { Box, Text, useInput } from 'ink';
+import Gradient from 'ink-gradient';
+import { Select, Alert, Spinner } from '@inkjs/ui';
+import TextInput from 'ink-text-input';
+import chalk from 'chalk';
+import { getOpenAiConfig, updateOpenAiConfig, validateApiConfig, } from '../../utils/apiConfig.js';
+import { fetchAvailableModels, filterModels, } from '../../api/models.js';
+import { getActiveProfileName, getAllProfiles, switchProfile, createProfile, deleteProfile, saveProfile, } from '../../utils/configManager.js';
+const focusEventTokenRegex = /(?:\x1b)?\[[0-9;]*[IO]/g;
+const isFocusEventInput = (value) => {
+    if (!value) {
+        return false;
+    }
+    if (value === '\x1b[I' ||
+        value === '\x1b[O' ||
+        value === '[I' ||
+        value === '[O') {
+        return true;
+    }
+    const trimmed = value.trim();
+    if (!trimmed) {
+        return false;
+    }
+    const tokens = trimmed.match(focusEventTokenRegex);
+    if (!tokens) {
+        return false;
+    }
+    const normalized = trimmed.replace(/\s+/g, '');
+    const tokensCombined = tokens.join('');
+    return tokensCombined === normalized;
+};
+const stripFocusArtifacts = (value) => {
+    if (!value) {
+        return '';
+    }
+    return value
+        .replace(/\x1b\[[0-9;]*[IO]/g, '')
+        .replace(/\[[0-9;]*[IO]/g, '')
+        .replace(/[\x00-\x08\x0B\x0C\x0E-\x1F\x7F]/g, '');
+};
+export default function ConfigScreen({ onBack, onSave, inlineMode = false, }) {
+    // Profile management
+    const [profiles, setProfiles] = useState([]);
+    const [activeProfile, setActiveProfile] = useState('');
+    const [profileMode, setProfileMode] = useState('normal');
+    const [newProfileName, setNewProfileName] = useState('');
+    // API settings
+    const [baseUrl, setBaseUrl] = useState('');
+    const [apiKey, setApiKey] = useState('');
+    const [requestMethod, setRequestMethod] = useState('chat');
+    const [anthropicBeta, setAnthropicBeta] = useState(false);
+    // Model settings
+    const [advancedModel, setAdvancedModel] = useState('');
+    const [basicModel, setBasicModel] = useState('');
+    const [maxContextTokens, setMaxContextTokens] = useState(4000);
+    const [maxTokens, setMaxTokens] = useState(4096);
+    const [compactModelName, setCompactModelName] = useState('');
+    // UI state
+    const [currentField, setCurrentField] = useState('profile');
+    const [errors, setErrors] = useState([]);
+    const [isEditing, setIsEditing] = useState(false);
+    const [models, setModels] = useState([]);
+    const [loading, setLoading] = useState(false);
+    const [loadError, setLoadError] = useState('');
+    const [searchTerm, setSearchTerm] = useState('');
+    const [manualInputMode, setManualInputMode] = useState(false);
+    const [manualInputValue, setManualInputValue] = useState('');
+    const requestMethodOptions = [
+        {
+            label: 'Chat Completions - Modern chat API (GPT-4, GPT-3.5-turbo)',
+            value: 'chat',
+        },
+        {
+            label: 'Responses - New responses API (2025, with built-in tools)',
+            value: 'responses',
+        },
+        {
+            label: 'Gemini - Google Gemini API',
+            value: 'gemini',
+        },
+        {
+            label: 'Anthropic - Claude API',
+            value: 'anthropic',
+        },
+    ];
+    useEffect(() => {
+        loadProfilesAndConfig();
+    }, []);
+    const loadProfilesAndConfig = () => {
+        // Load profiles
+        const loadedProfiles = getAllProfiles();
+        setProfiles(loadedProfiles);
+        // Load current config
+        const config = getOpenAiConfig();
+        setBaseUrl(config.baseUrl);
+        setApiKey(config.apiKey);
+        setRequestMethod(config.requestMethod || 'chat');
+        setAnthropicBeta(config.anthropicBeta || false);
+        setAdvancedModel(config.advancedModel || '');
+        setBasicModel(config.basicModel || '');
+        setMaxContextTokens(config.maxContextTokens || 4000);
+        setMaxTokens(config.maxTokens || 4096);
+        setCompactModelName(config.compactModel?.modelName || '');
+        setActiveProfile(getActiveProfileName());
+    };
+    const loadModels = async () => {
+        setLoading(true);
+        setLoadError('');
+        // Temporarily save current config to use the latest baseUrl/apiKey
+        const tempConfig = {
+            baseUrl,
+            apiKey,
+            requestMethod,
+        };
+        updateOpenAiConfig(tempConfig);
+        try {
+            const fetchedModels = await fetchAvailableModels();
+            setModels(fetchedModels);
+        }
+        catch (err) {
+            const errorMessage = err instanceof Error ? err.message : 'Unknown error occurred';
+            setLoadError(errorMessage);
+            throw err;
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    const getCurrentOptions = () => {
+        const filteredModels = filterModels(models, searchTerm);
+        const modelOptions = filteredModels.map(model => ({
+            label: model.id,
+            value: model.id,
+        }));
+        return [
+            { label: 'Manual Input (Enter model name)', value: '__MANUAL_INPUT__' },
+            ...modelOptions,
+        ];
+    };
+    const getCurrentValue = () => {
+        if (currentField === 'profile')
+            return activeProfile;
+        if (currentField === 'baseUrl')
+            return baseUrl;
+        if (currentField === 'apiKey')
+            return apiKey;
+        if (currentField === 'advancedModel')
+            return advancedModel;
+        if (currentField === 'basicModel')
+            return basicModel;
+        if (currentField === 'maxContextTokens')
+            return maxContextTokens.toString();
+        if (currentField === 'maxTokens')
+            return maxTokens.toString();
+        if (currentField === 'compactModelName')
+            return compactModelName;
+        return '';
+    };
+    const handleProfileChange = (value) => {
+        if (value === '__CREATE_NEW__') {
+            setProfileMode('creating');
+            setNewProfileName('');
+            return;
+        }
+        if (value === '__DELETE__') {
+            if (activeProfile === 'default') {
+                setErrors(['Cannot delete the default profile']);
+                return;
+            }
+            setProfileMode('deleting');
+            return;
+        }
+        // Switch profile
+        try {
+            switchProfile(value);
+            loadProfilesAndConfig();
+            setIsEditing(false);
+            setErrors([]);
+        }
+        catch (err) {
+            setErrors([
+                err instanceof Error ? err.message : 'Failed to switch profile',
+            ]);
+        }
+    };
+    const handleCreateProfile = () => {
+        const cleaned = stripFocusArtifacts(newProfileName).trim();
+        if (!cleaned) {
+            setErrors(['Profile name cannot be empty']);
+            return;
+        }
+        try {
+            // Create new profile with current config
+            const currentConfig = {
+                snowcfg: {
+                    baseUrl,
+                    apiKey,
+                    requestMethod,
+                    anthropicBeta,
+                    advancedModel,
+                    basicModel,
+                    maxContextTokens,
+                    maxTokens,
+                    compactModel: compactModelName ? { modelName: compactModelName } : undefined,
+                },
+            };
+            createProfile(cleaned, currentConfig);
+            switchProfile(cleaned);
+            loadProfilesAndConfig();
+            setProfileMode('normal');
+            setNewProfileName('');
+            setIsEditing(false);
+            setErrors([]);
+        }
+        catch (err) {
+            setErrors([
+                err instanceof Error ? err.message : 'Failed to create profile',
+            ]);
+        }
+    };
+    const handleDeleteProfile = () => {
+        try {
+            deleteProfile(activeProfile);
+            loadProfilesAndConfig();
+            setProfileMode('normal');
+            setIsEditing(false);
+            setErrors([]);
+        }
+        catch (err) {
+            setErrors([
+                err instanceof Error ? err.message : 'Failed to delete profile',
+            ]);
+            setProfileMode('normal');
+        }
+    };
+    const handleModelChange = (value) => {
+        if (value === '__MANUAL_INPUT__') {
+            setManualInputMode(true);
+            setManualInputValue('');
+            return;
+        }
+        if (currentField === 'advancedModel') {
+            setAdvancedModel(value);
+        }
+        else if (currentField === 'basicModel') {
+            setBasicModel(value);
+        }
+        else if (currentField === 'compactModelName') {
+            setCompactModelName(value);
+        }
+        setIsEditing(false);
+        setSearchTerm('');
+    };
+    const saveConfiguration = () => {
+        const validationErrors = validateApiConfig({
+            baseUrl,
+            apiKey,
+            requestMethod,
+        });
+        if (validationErrors.length === 0) {
+            const config = {
+                baseUrl,
+                apiKey,
+                requestMethod,
+                anthropicBeta,
+                advancedModel,
+                basicModel,
+                maxContextTokens,
+                maxTokens,
+            };
+            // Only save compactModel if modelName is provided (uses same baseUrl/apiKey)
+            if (compactModelName) {
+                config.compactModel = {
+                    modelName: compactModelName,
+                };
+            }
+            // Save to main config
+            updateOpenAiConfig(config);
+            // Also save to the current profile
+            try {
+                const fullConfig = {
+                    snowcfg: {
+                        baseUrl,
+                        apiKey,
+                        requestMethod,
+                        anthropicBeta,
+                        advancedModel,
+                        basicModel,
+                        maxContextTokens,
+                        maxTokens,
+                        compactModel: compactModelName
+                            ? { modelName: compactModelName }
+                            : undefined,
+                    },
+                };
+                saveProfile(activeProfile, fullConfig);
+            }
+            catch (err) {
+                console.error('Failed to save profile:', err);
+            }
+            setErrors([]);
+            return true;
+        }
+        else {
+            setErrors(validationErrors);
+            return false;
+        }
+    };
+    useInput((rawInput, key) => {
+        const input = stripFocusArtifacts(rawInput);
+        if (!input && isFocusEventInput(rawInput)) {
+            return;
+        }
+        if (isFocusEventInput(rawInput)) {
+            return;
+        }
+        // Handle profile creation mode
+        if (profileMode === 'creating') {
+            if (key.return) {
+                handleCreateProfile();
+            }
+            else if (key.escape) {
+                setProfileMode('normal');
+                setNewProfileName('');
+                setErrors([]);
+            }
+            return;
+        }
+        // Handle profile deletion confirmation
+        if (profileMode === 'deleting') {
+            if (input === 'y' || input === 'Y') {
+                handleDeleteProfile();
+            }
+            else if (input === 'n' || input === 'N' || key.escape) {
+                setProfileMode('normal');
+                setErrors([]);
+            }
+            return;
+        }
+        // Handle loading state
+        if (loading) {
+            if (key.escape) {
+                setLoading(false);
+            }
+            return;
+        }
+        // Handle manual input mode
+        if (manualInputMode) {
+            if (key.return) {
+                const cleaned = stripFocusArtifacts(manualInputValue).trim();
+                if (cleaned) {
+                    if (currentField === 'advancedModel') {
+                        setAdvancedModel(cleaned);
+                    }
+                    else if (currentField === 'basicModel') {
+                        setBasicModel(cleaned);
+                    }
+                    else if (currentField === 'compactModelName') {
+                        setCompactModelName(cleaned);
+                    }
+                }
+                setManualInputMode(false);
+                setManualInputValue('');
+                setIsEditing(false);
+                setSearchTerm('');
+            }
+            else if (key.escape) {
+                setManualInputMode(false);
+                setManualInputValue('');
+            }
+            else if (key.backspace || key.delete) {
+                setManualInputValue(prev => prev.slice(0, -1));
+            }
+            else if (input && input.match(/[a-zA-Z0-9-_./:]/)) {
+                setManualInputValue(prev => prev + stripFocusArtifacts(input));
+            }
+            return;
+        }
+        // Allow Escape key to exit Select component
+        if (isEditing &&
+            (currentField === 'profile' ||
+                currentField === 'requestMethod' ||
+                currentField === 'advancedModel' ||
+                currentField === 'basicModel' ||
+                currentField === 'compactModelName') &&
+            key.escape) {
+            setIsEditing(false);
+            setSearchTerm('');
+            return;
+        }
+        // Handle editing mode
+        if (isEditing) {
+            // For baseUrl and apiKey, TextInput component handles all input, just handle Return to exit
+            if (currentField === 'baseUrl' || currentField === 'apiKey') {
+                if (key.return) {
+                    setIsEditing(false);
+                }
+                return;
+            }
+            // Handle numeric input for token fields
+            if (currentField === 'maxContextTokens' || currentField === 'maxTokens') {
+                if (input && input.match(/[0-9]/)) {
+                    const currentValue = currentField === 'maxContextTokens' ? maxContextTokens : maxTokens;
+                    const newValue = parseInt(currentValue.toString() + input, 10);
+                    if (!isNaN(newValue)) {
+                        if (currentField === 'maxContextTokens') {
+                            setMaxContextTokens(newValue);
+                        }
+                        else {
+                            setMaxTokens(newValue);
+                        }
+                    }
+                }
+                else if (key.backspace || key.delete) {
+                    const currentValue = currentField === 'maxContextTokens' ? maxContextTokens : maxTokens;
+                    const currentStr = currentValue.toString();
+                    const newStr = currentStr.slice(0, -1);
+                    const newValue = parseInt(newStr, 10);
+                    if (currentField === 'maxContextTokens') {
+                        setMaxContextTokens(!isNaN(newValue) ? newValue : 0);
+                    }
+                    else {
+                        setMaxTokens(!isNaN(newValue) ? newValue : 0);
+                    }
+                }
+                else if (key.return) {
+                    const minValue = currentField === 'maxContextTokens' ? 4000 : 100;
+                    const currentValue = currentField === 'maxContextTokens' ? maxContextTokens : maxTokens;
+                    const finalValue = currentValue < minValue ? minValue : currentValue;
+                    if (currentField === 'maxContextTokens') {
+                        setMaxContextTokens(finalValue);
+                    }
+                    else {
+                        setMaxTokens(finalValue);
+                    }
+                    setIsEditing(false);
+                }
+                return;
+            }
+            // Allow typing to filter for model selection
+            if (input && input.match(/[a-zA-Z0-9-_.]/)) {
+                setSearchTerm(prev => prev + input);
+            }
+            else if (key.backspace || key.delete) {
+                setSearchTerm(prev => prev.slice(0, -1));
+            }
+            return;
+        }
+        // Handle save/exit globally
+        if (input === 's' && (key.ctrl || key.meta)) {
+            if (saveConfiguration()) {
+                onSave();
+            }
+        }
+        else if (key.escape) {
+            saveConfiguration();
+            onBack();
+        }
+        else if (key.return) {
+            if (isEditing) {
+                setIsEditing(false);
+            }
+            else {
+                // Enter edit mode
+                if (currentField === 'anthropicBeta') {
+                    setAnthropicBeta(!anthropicBeta);
+                }
+                else if (currentField === 'maxContextTokens' ||
+                    currentField === 'maxTokens') {
+                    setIsEditing(true);
+                }
+                else if (currentField === 'advancedModel' ||
+                    currentField === 'basicModel' ||
+                    currentField === 'compactModelName') {
+                    // Load models for model fields
+                    setLoadError(''); // Clear previous error
+                    loadModels()
+                        .then(() => {
+                        setIsEditing(true);
+                    })
+                        .catch(() => {
+                        // Error is already set in loadModels, just enter manual input mode
+                        setManualInputMode(true);
+                        setManualInputValue(getCurrentValue());
+                    });
+                }
+                else {
+                    setIsEditing(true);
+                }
+            }
+        }
+        else if (input === 'm' && !isEditing) {
+            // Shortcut: press 'm' for manual input mode
+            if (currentField === 'advancedModel' ||
+                currentField === 'basicModel' ||
+                currentField === 'compactModelName') {
+                setManualInputMode(true);
+                setManualInputValue(getCurrentValue());
+            }
+        }
+        else if (!isEditing && key.upArrow) {
+            const fields = [
+                'profile',
+                'baseUrl',
+                'apiKey',
+                'requestMethod',
+                'anthropicBeta',
+                'advancedModel',
+                'basicModel',
+                'compactModelName',
+                'maxContextTokens',
+                'maxTokens',
+            ];
+            const currentIndex = fields.indexOf(currentField);
+            if (currentIndex > 0) {
+                setCurrentField(fields[currentIndex - 1]);
+            }
+        }
+        else if (!isEditing && key.downArrow) {
+            const fields = [
+                'profile',
+                'baseUrl',
+                'apiKey',
+                'requestMethod',
+                'anthropicBeta',
+                'advancedModel',
+                'basicModel',
+                'compactModelName',
+                'maxContextTokens',
+                'maxTokens',
+            ];
+            const currentIndex = fields.indexOf(currentField);
+            if (currentIndex < fields.length - 1) {
+                setCurrentField(fields[currentIndex + 1]);
+            }
+        }
+    });
+    // Render profile creation mode
+    if (profileMode === 'creating') {
+        return (React.createElement(Box, { flexDirection: "column", padding: 1 },
+            !inlineMode && (React.createElement(Box, { marginBottom: 1, borderStyle: "double", borderColor: 'cyan', paddingX: 2 },
+                React.createElement(Box, { flexDirection: "column" },
+                    React.createElement(Gradient, { name: "rainbow" }, "Create New Profile"),
+                    React.createElement(Text, { color: "gray", dimColor: true }, "Enter a name for the new configuration profile")))),
+            React.createElement(Box, { flexDirection: "column" },
+                React.createElement(Text, { color: "cyan" }, "Profile Name:"),
+                React.createElement(Box, { marginLeft: 2 },
+                    React.createElement(TextInput, { value: newProfileName, onChange: value => setNewProfileName(stripFocusArtifacts(value)), placeholder: "e.g., work, personal, test" }))),
+            errors.length > 0 && (React.createElement(Box, { marginTop: 1 },
+                React.createElement(Text, { color: "red" }, errors[0]))),
+            React.createElement(Box, { marginTop: 1 },
+                React.createElement(Alert, { variant: "info" }, "Press Enter to create, Esc to cancel"))));
+    }
+    // Render profile deletion confirmation
+    if (profileMode === 'deleting') {
+        return (React.createElement(Box, { flexDirection: "column", padding: 1 },
+            !inlineMode && (React.createElement(Box, { marginBottom: 1, borderStyle: "double", borderColor: 'cyan', paddingX: 2 },
+                React.createElement(Box, { flexDirection: "column" },
+                    React.createElement(Gradient, { name: "rainbow" }, "Delete Profile"),
+                    React.createElement(Text, { color: "gray", dimColor: true }, "Confirm profile deletion")))),
+            React.createElement(Box, { flexDirection: "column" },
+                React.createElement(Text, { color: "yellow" },
+                    "Are you sure you want to delete the profile \"",
+                    activeProfile,
+                    "\"?"),
+                React.createElement(Text, { color: "gray", dimColor: true }, "This action cannot be undone. You will be switched to the default profile.")),
+            errors.length > 0 && (React.createElement(Box, { marginTop: 1 },
+                React.createElement(Text, { color: "red" }, errors[0]))),
+            React.createElement(Box, { marginTop: 1 },
+                React.createElement(Alert, { variant: "warning" }, "Press Y to confirm, N or Esc to cancel"))));
+    }
+    if (loading) {
+        return (React.createElement(Box, { flexDirection: "column", padding: 1 },
+            !inlineMode && (React.createElement(Box, { marginBottom: 1, borderStyle: "double", borderColor: 'cyan', paddingX: 2 },
+                React.createElement(Box, { flexDirection: "column" },
+                    React.createElement(Gradient, { name: "rainbow" }, "API & Model Configuration"),
+                    React.createElement(Text, { color: "gray", dimColor: true }, "Loading available models...")))),
+            React.createElement(Box, { flexDirection: "column" },
+                React.createElement(Box, null,
+                    React.createElement(Spinner, { type: "dots" }),
+                    React.createElement(Text, { color: "cyan" }, " Fetching models from API...")),
+                React.createElement(Box, { marginLeft: 2 },
+                    React.createElement(Text, { color: "gray", dimColor: true }, "This may take a few seconds depending on your network connection"))),
+            React.createElement(Box, { flexDirection: "column", marginTop: 1 },
+                React.createElement(Alert, { variant: "info" }, "Press Esc to cancel and return to configuration"))));
+    }
+    if (manualInputMode) {
+        return (React.createElement(Box, { flexDirection: "column", padding: 1 },
+            !inlineMode && (React.createElement(Box, { marginBottom: 1, borderStyle: "double", borderColor: 'cyan', paddingX: 2 },
+                React.createElement(Box, { flexDirection: "column" },
+                    React.createElement(Gradient, { name: "rainbow" }, "Manual Input Model"),
+                    React.createElement(Text, { color: "gray", dimColor: true }, "Enter model name manually")))),
+            loadError && (React.createElement(Box, { flexDirection: "column", marginBottom: 1 },
+                React.createElement(Text, { color: "yellow" }, "\u26A0 Failed to load models from API"),
+                React.createElement(Text, { color: "gray", dimColor: true }, loadError))),
+            React.createElement(Box, { flexDirection: "column" },
+                React.createElement(Text, { color: "cyan" },
+                    currentField === 'advancedModel' && 'Advanced Model',
+                    currentField === 'basicModel' && 'Basic Model',
+                    currentField === 'compactModelName' && 'Compact Model',
+                    ":"),
+                React.createElement(Box, { marginLeft: 2 },
+                    React.createElement(Text, { color: "green" },
+                        `> ${manualInputValue}`,
+                        React.createElement(Text, { color: "white" }, "_")))),
+            React.createElement(Box, { flexDirection: "column", marginTop: 1 },
+                React.createElement(Alert, { variant: "info" }, "Press Enter to confirm, Esc to cancel"))));
+    }
+    return (React.createElement(Box, { flexDirection: "column", padding: 1 },
+        !inlineMode && (React.createElement(Box, { marginBottom: 1, borderStyle: "double", borderColor: 'cyan', paddingX: 2 },
+            React.createElement(Box, { flexDirection: "column" },
+                React.createElement(Gradient, { name: "rainbow" }, "API & Model Configuration"),
+                React.createElement(Text, { color: "gray", dimColor: true }, "Configure your API settings and AI models"),
+                activeProfile && (React.createElement(Text, { color: "cyan", dimColor: true },
+                    "Active Profile: ",
+                    activeProfile))))),
+        React.createElement(Box, { flexDirection: "column" },
+            React.createElement(Box, { flexDirection: "column" },
+                React.createElement(Text, { color: currentField === 'profile' ? 'green' : 'white' },
+                    currentField === 'profile' ? '❯ ' : '  ',
+                    "Profile:"),
+                currentField === 'profile' && isEditing && (React.createElement(Box, { marginLeft: 3 },
+                    React.createElement(Select, { options: [
+                            ...profiles.map(p => ({
+                                label: `${p.displayName}${p.isActive ? ' (Active)' : ''}`,
+                                value: p.name,
+                            })),
+                            {
+                                label: chalk.green('+ New Profile'),
+                                value: '__CREATE_NEW__',
+                            },
+                            {
+                                label: chalk.red('🆇 Delete Profile'),
+                                value: '__DELETE__',
+                            },
+                        ], defaultValue: activeProfile, onChange: handleProfileChange }))),
+                (!isEditing || currentField !== 'profile') && (React.createElement(Box, { marginLeft: 3 },
+                    React.createElement(Text, { color: "gray" }, profiles.find(p => p.name === activeProfile)?.displayName ||
+                        activeProfile)))),
+            React.createElement(Box, { flexDirection: "column" },
+                React.createElement(Text, { color: currentField === 'baseUrl' ? 'green' : 'white' },
+                    currentField === 'baseUrl' ? '❯ ' : '  ',
+                    "Base URL:"),
+                currentField === 'baseUrl' && isEditing && (React.createElement(Box, { marginLeft: 3 },
+                    React.createElement(TextInput, { value: baseUrl, onChange: value => setBaseUrl(stripFocusArtifacts(value)), placeholder: "https://api.openai.com/v1" }))),
+                (!isEditing || currentField !== 'baseUrl') && (React.createElement(Box, { marginLeft: 3 },
+                    React.createElement(Text, { color: "gray" }, baseUrl || 'Not set')))),
+            React.createElement(Box, { flexDirection: "column" },
+                React.createElement(Text, { color: currentField === 'apiKey' ? 'green' : 'white' },
+                    currentField === 'apiKey' ? '❯ ' : '  ',
+                    "API Key:"),
+                currentField === 'apiKey' && isEditing && (React.createElement(Box, { marginLeft: 3 },
+                    React.createElement(TextInput, { value: apiKey, onChange: value => setApiKey(stripFocusArtifacts(value)), placeholder: "sk-...", mask: "*" }))),
+                (!isEditing || currentField !== 'apiKey') && (React.createElement(Box, { marginLeft: 3 },
+                    React.createElement(Text, { color: "gray" }, apiKey ? '*'.repeat(Math.min(apiKey.length, 20)) : 'Not set')))),
+            React.createElement(Box, { flexDirection: "column" },
+                React.createElement(Text, { color: currentField === 'requestMethod' ? 'green' : 'white' },
+                    currentField === 'requestMethod' ? '❯ ' : '  ',
+                    "Request Method:"),
+                currentField === 'requestMethod' && isEditing && (React.createElement(Box, { marginLeft: 3 },
+                    React.createElement(Select, { options: requestMethodOptions, defaultValue: requestMethod, onChange: value => {
+                            setRequestMethod(value);
+                            setIsEditing(false);
+                        } }))),
+                (!isEditing || currentField !== 'requestMethod') && (React.createElement(Box, { marginLeft: 3 },
+                    React.createElement(Text, { color: "gray" }, requestMethodOptions.find(opt => opt.value === requestMethod)
+                        ?.label || 'Not set')))),
+            React.createElement(Box, { flexDirection: "column" },
+                React.createElement(Text, { color: currentField === 'anthropicBeta' ? 'green' : 'white' },
+                    currentField === 'anthropicBeta' ? '❯ ' : '  ',
+                    "Anthropic Beta:"),
+                React.createElement(Box, { marginLeft: 3 },
+                    React.createElement(Text, { color: "gray" },
+                        anthropicBeta ? '☑ Enabled' : '☐ Disabled',
+                        " (Press Enter to toggle)"))),
+            React.createElement(Box, { flexDirection: "column" },
+                React.createElement(Text, { color: currentField === 'advancedModel' ? 'green' : 'white' },
+                    currentField === 'advancedModel' ? '❯ ' : '  ',
+                    "Advanced Model:"),
+                currentField === 'advancedModel' && isEditing && (React.createElement(Box, { marginLeft: 3 },
+                    React.createElement(Box, { flexDirection: "column" },
+                        searchTerm && React.createElement(Text, { color: "cyan" },
+                            "Filter: ",
+                            searchTerm),
+                        React.createElement(Select, { options: getCurrentOptions(), defaultValue: getCurrentValue(), onChange: handleModelChange })))),
+                (!isEditing || currentField !== 'advancedModel') && (React.createElement(Box, { marginLeft: 3 },
+                    React.createElement(Text, { color: "gray" }, advancedModel || 'Not set')))),
+            React.createElement(Box, { flexDirection: "column" },
+                React.createElement(Text, { color: currentField === 'basicModel' ? 'green' : 'white' },
+                    currentField === 'basicModel' ? '❯ ' : '  ',
+                    "Basic Model:"),
+                currentField === 'basicModel' && isEditing && (React.createElement(Box, { marginLeft: 3 },
+                    React.createElement(Box, { flexDirection: "column" },
+                        searchTerm && React.createElement(Text, { color: "cyan" },
+                            "Filter: ",
+                            searchTerm),
+                        React.createElement(Select, { options: getCurrentOptions(), defaultValue: getCurrentValue(), onChange: handleModelChange })))),
+                (!isEditing || currentField !== 'basicModel') && (React.createElement(Box, { marginLeft: 3 },
+                    React.createElement(Text, { color: "gray" }, basicModel || 'Not set')))),
+            React.createElement(Box, { flexDirection: "column" },
+                React.createElement(Text, { color: currentField === 'compactModelName' ? 'green' : 'white' },
+                    currentField === 'compactModelName' ? '❯ ' : '  ',
+                    "Compact Model:"),
+                currentField === 'compactModelName' && isEditing && (React.createElement(Box, { marginLeft: 3 },
+                    React.createElement(Box, { flexDirection: "column" },
+                        searchTerm && React.createElement(Text, { color: "cyan" },
+                            "Filter: ",
+                            searchTerm),
+                        React.createElement(Select, { options: getCurrentOptions(), defaultValue: getCurrentValue(), onChange: handleModelChange })))),
+                (!isEditing || currentField !== 'compactModelName') && (React.createElement(Box, { marginLeft: 3 },
+                    React.createElement(Text, { color: "gray" }, compactModelName || 'Not set')))),
+            React.createElement(Box, { flexDirection: "column" },
+                React.createElement(Text, { color: currentField === 'maxContextTokens' ? 'green' : 'white' },
+                    currentField === 'maxContextTokens' ? '❯ ' : '  ',
+                    "Max Context Tokens:"),
+                currentField === 'maxContextTokens' && isEditing && (React.createElement(Box, { marginLeft: 3 },
+                    React.createElement(Text, { color: "cyan" },
+                        "Enter value: ",
+                        maxContextTokens))),
+                (!isEditing || currentField !== 'maxContextTokens') && (React.createElement(Box, { marginLeft: 3 },
+                    React.createElement(Text, { color: "gray" }, maxContextTokens)))),
+            React.createElement(Box, { flexDirection: "column" },
+                React.createElement(Text, { color: currentField === 'maxTokens' ? 'green' : 'white' },
+                    currentField === 'maxTokens' ? '❯ ' : '  ',
+                    "Max Tokens:"),
+                currentField === 'maxTokens' && isEditing && (React.createElement(Box, { marginLeft: 3 },
+                    React.createElement(Text, { color: "cyan" },
+                        "Enter value: ",
+                        maxTokens))),
+                (!isEditing || currentField !== 'maxTokens') && (React.createElement(Box, { marginLeft: 3 },
+                    React.createElement(Text, { color: "gray" }, maxTokens))))),
+        errors.length > 0 && (React.createElement(Box, { flexDirection: "column", marginTop: 1 },
+            React.createElement(Text, { color: "red", bold: true }, "Errors:"),
+            errors.map((error, index) => (React.createElement(Text, { key: index, color: "red" },
+                "\u2022 ",
+                error))))),
+        React.createElement(Box, { flexDirection: "column", marginTop: 1 }, isEditing ? (React.createElement(React.Fragment, null,
+            React.createElement(Alert, { variant: "info" },
+                "Editing mode:",
+                ' ',
+                currentField === 'advancedModel' ||
+                    currentField === 'basicModel' ||
+                    currentField === 'compactModelName'
+                    ? 'Type to filter, ↑↓ to select, Enter to confirm'
+                    : 'Press Enter to save and exit editing'))) : (React.createElement(React.Fragment, null,
+            React.createElement(Alert, { variant: "info" }, "Use \u2191\u2193 to navigate, Enter to edit, M for manual input, Ctrl+S or Esc to save"))))));
+}