snow-ai 0.4.15 → 0.4.17

package/dist/ui/pages/ConfigScreen.js

@@ -1,1101 +0,0 @@
-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 { 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';
-import { useI18n } from '../../i18n/index.js';
-import { useTheme } from '../contexts/ThemeContext.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, }) {
-    const { t } = useI18n();
-    const { theme } = useTheme();
-    // 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);
-    const [enablePromptOptimization, setEnablePromptOptimization] = useState(true);
-    const [enableAutoCompress, setEnableAutoCompress] = useState(true);
-    const [thinkingEnabled, setThinkingEnabled] = useState(false);
-    const [thinkingBudgetTokens, setThinkingBudgetTokens] = useState(10000);
-    const [geminiThinkingEnabled, setGeminiThinkingEnabled] = useState(false);
-    const [geminiThinkingBudget, setGeminiThinkingBudget] = useState(1024);
-    const [responsesReasoningEnabled, setResponsesReasoningEnabled] = useState(false);
-    const [responsesReasoningEffort, setResponsesReasoningEffort] = useState('high');
-    // 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 [, forceUpdate] = useState(0);
-    // Scrolling configuration
-    const MAX_VISIBLE_FIELDS = 8;
-    const requestMethodOptions = [
-        {
-            label: t.configScreen.requestMethodChat,
-            value: 'chat',
-        },
-        {
-            label: t.configScreen.requestMethodResponses,
-            value: 'responses',
-        },
-        {
-            label: t.configScreen.requestMethodGemini,
-            value: 'gemini',
-        },
-        {
-            label: t.configScreen.requestMethodAnthropic,
-            value: 'anthropic',
-        },
-    ];
-    // Get all available fields based on current request method
-    const getAllFields = () => {
-        return [
-            'profile',
-            'baseUrl',
-            'apiKey',
-            'requestMethod',
-            'enablePromptOptimization',
-            'enableAutoCompress',
-            ...(requestMethod === 'anthropic'
-                ? [
-                    'anthropicBeta',
-                    'thinkingEnabled',
-                    'thinkingBudgetTokens',
-                ]
-                : requestMethod === 'gemini'
-                    ? [
-                        'geminiThinkingEnabled',
-                        'geminiThinkingBudget',
-                    ]
-                    : requestMethod === 'responses'
-                        ? [
-                            'responsesReasoningEnabled',
-                            'responsesReasoningEffort',
-                        ]
-                        : []),
-            'advancedModel',
-            'basicModel',
-            'compactModelName',
-            'maxContextTokens',
-            'maxTokens',
-        ];
-    };
-    // Get current field index and total count
-    const allFields = getAllFields();
-    const currentFieldIndex = allFields.indexOf(currentField);
-    const totalFields = allFields.length;
-    useEffect(() => {
-        loadProfilesAndConfig();
-    }, []);
-    // Auto-adjust currentField when requestMethod changes
-    useEffect(() => {
-        // If requestMethod is not 'anthropic' and currentField is on Anthropic-specific fields,
-        // move to the next available field
-        if (requestMethod !== 'anthropic' &&
-            (currentField === 'anthropicBeta' ||
-                currentField === 'thinkingEnabled' ||
-                currentField === 'thinkingBudgetTokens')) {
-            setCurrentField('advancedModel');
-        }
-        // If requestMethod is not 'gemini' and currentField is on Gemini-specific fields,
-        // move to the next available field
-        if (requestMethod !== 'gemini' &&
-            (currentField === 'geminiThinkingEnabled' ||
-                currentField === 'geminiThinkingBudget')) {
-            setCurrentField('advancedModel');
-        }
-        // If requestMethod is not 'responses' and currentField is on Responses-specific fields,
-        // move to the next available field
-        if (requestMethod !== 'responses' &&
-            (currentField === 'responsesReasoningEnabled' ||
-                currentField === 'responsesReasoningEffort')) {
-            setCurrentField('advancedModel');
-        }
-    }, [requestMethod, currentField]);
-    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);
-        setEnablePromptOptimization(config.enablePromptOptimization !== false); // Default to true
-        setEnableAutoCompress(config.enableAutoCompress !== false); // Default to true
-        setThinkingEnabled(config.thinking?.type === 'enabled' || false);
-        setThinkingBudgetTokens(config.thinking?.budget_tokens || 10000);
-        setGeminiThinkingEnabled(config.geminiThinking?.enabled || false);
-        setGeminiThinkingBudget(config.geminiThinking?.budget || 1024);
-        setResponsesReasoningEnabled(config.responsesReasoning?.enabled || false);
-        setResponsesReasoningEffort(config.responsesReasoning?.effort || 'high');
-        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: t.configScreen.manualInputOption, 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 === 'thinkingBudgetTokens')
-            return thinkingBudgetTokens.toString();
-        if (currentField === 'geminiThinkingBudget')
-            return geminiThinkingBudget.toString();
-        if (currentField === 'responsesReasoningEffort')
-            return responsesReasoningEffort;
-        if (currentField === 'compactModelName')
-            return compactModelName;
-        return '';
-    };
-    const handleCreateProfile = () => {
-        const cleaned = stripFocusArtifacts(newProfileName).trim();
-        if (!cleaned) {
-            setErrors([t.configScreen.profileNameEmpty]);
-            return;
-        }
-        try {
-            // Create new profile with current config
-            const currentConfig = {
-                snowcfg: {
-                    baseUrl,
-                    apiKey,
-                    requestMethod,
-                    anthropicBeta,
-                    thinking: thinkingEnabled
-                        ? { type: 'enabled', budget_tokens: thinkingBudgetTokens }
-                        : undefined,
-                    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);
-            // Important: Update activeProfile state BEFORE loading profiles
-            // because deleteProfile switches to 'default' if the active profile is deleted
-            const newActiveProfile = getActiveProfileName();
-            setActiveProfile(newActiveProfile);
-            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,
-                enablePromptOptimization,
-                enableAutoCompress,
-                advancedModel,
-                basicModel,
-                maxContextTokens,
-                maxTokens,
-            };
-            // Save thinking configuration (always save to preserve settings)
-            if (thinkingEnabled) {
-                config.thinking = {
-                    type: 'enabled',
-                    budget_tokens: thinkingBudgetTokens,
-                };
-            }
-            else {
-                // Explicitly set to undefined to clear it when disabled
-                config.thinking = undefined;
-            }
-            // Save Gemini thinking configuration
-            if (geminiThinkingEnabled) {
-                config.geminiThinking = {
-                    enabled: true,
-                    budget: geminiThinkingBudget,
-                };
-            }
-            else {
-                config.geminiThinking = undefined;
-            }
-            // Save Responses reasoning configuration
-            if (responsesReasoningEnabled) {
-                config.responsesReasoning = {
-                    enabled: true,
-                    effort: responsesReasoningEffort,
-                };
-            }
-            else {
-                config.responsesReasoning = undefined;
-            }
-            // 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,
-                        enablePromptOptimization,
-                        enableAutoCompress,
-                        thinking: thinkingEnabled
-                            ? { type: 'enabled', budget_tokens: thinkingBudgetTokens }
-                            : undefined,
-                        geminiThinking: geminiThinkingEnabled
-                            ? { enabled: true, budget: geminiThinkingBudget }
-                            : undefined,
-                        responsesReasoning: responsesReasoningEnabled
-                            ? { enabled: true, effort: responsesReasoningEffort }
-                            : undefined,
-                        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;
-        }
-    };
-    // Helper function to render a single field
-    const renderField = (field) => {
-        const isActive = field === currentField;
-        const isCurrentlyEditing = isEditing && isActive;
-        switch (field) {
-            case 'profile':
-                return (React.createElement(Box, { key: field, flexDirection: "column" },
-                    React.createElement(Text, { color: isActive ? theme.colors.menuSelected : theme.colors.menuNormal },
-                        isActive ? '❯ ' : '  ',
-                        t.configScreen.profile),
-                    !isCurrentlyEditing && (React.createElement(Box, { marginLeft: 3 },
-                        React.createElement(Text, { color: theme.colors.menuSecondary }, profiles.find(p => p.name === activeProfile)?.displayName ||
-                            activeProfile)))));
-            case 'baseUrl':
-                return (React.createElement(Box, { key: field, flexDirection: "column" },
-                    React.createElement(Text, { color: isActive ? theme.colors.menuSelected : theme.colors.menuNormal },
-                        isActive ? '❯ ' : '  ',
-                        t.configScreen.baseUrl),
-                    isCurrentlyEditing && (React.createElement(Box, { marginLeft: 3 },
-                        React.createElement(TextInput, { value: baseUrl, onChange: value => setBaseUrl(stripFocusArtifacts(value)), placeholder: "https://api.openai.com/v1" }))),
-                    !isCurrentlyEditing && (React.createElement(Box, { marginLeft: 3 },
-                        React.createElement(Text, { color: theme.colors.menuSecondary }, baseUrl || t.configScreen.notSet)))));
-            case 'apiKey':
-                return (React.createElement(Box, { key: field, flexDirection: "column" },
-                    React.createElement(Text, { color: isActive ? theme.colors.menuSelected : theme.colors.menuNormal },
-                        isActive ? '❯ ' : '  ',
-                        t.configScreen.apiKey),
-                    isCurrentlyEditing && (React.createElement(Box, { marginLeft: 3 },
-                        React.createElement(TextInput, { value: apiKey, onChange: value => setApiKey(stripFocusArtifacts(value)), placeholder: "sk-...", mask: "*" }))),
-                    !isCurrentlyEditing && (React.createElement(Box, { marginLeft: 3 },
-                        React.createElement(Text, { color: theme.colors.menuSecondary }, apiKey ? '*'.repeat(Math.min(apiKey.length, 20)) : t.configScreen.notSet)))));
-            case 'requestMethod':
-                return (React.createElement(Box, { key: field, flexDirection: "column" },
-                    React.createElement(Text, { color: isActive ? theme.colors.menuSelected : theme.colors.menuNormal },
-                        isActive ? '❯ ' : '  ',
-                        t.configScreen.requestMethod),
-                    !isCurrentlyEditing && (React.createElement(Box, { marginLeft: 3 },
-                        React.createElement(Text, { color: theme.colors.menuSecondary }, requestMethodOptions.find(opt => opt.value === requestMethod)
-                            ?.label || t.configScreen.notSet)))));
-            case 'anthropicBeta':
-                return (React.createElement(Box, { key: field, flexDirection: "column" },
-                    React.createElement(Text, { color: isActive ? theme.colors.menuSelected : theme.colors.menuNormal },
-                        isActive ? '❯ ' : '  ',
-                        t.configScreen.anthropicBeta),
-                    React.createElement(Box, { marginLeft: 3 },
-                        React.createElement(Text, { color: theme.colors.menuSecondary },
-                            anthropicBeta ? t.configScreen.enabled : t.configScreen.disabled,
-                            " ",
-                            t.configScreen.toggleHint))));
-            case 'enablePromptOptimization':
-                return (React.createElement(Box, { key: field, flexDirection: "column" },
-                    React.createElement(Text, { color: isActive ? theme.colors.menuSelected : theme.colors.menuNormal },
-                        isActive ? '❯ ' : '  ',
-                        t.configScreen.enablePromptOptimization),
-                    React.createElement(Box, { marginLeft: 3 },
-                        React.createElement(Text, { color: theme.colors.menuSecondary },
-                            enablePromptOptimization ? t.configScreen.enabled : t.configScreen.disabled,
-                            " ",
-                            t.configScreen.toggleHint))));
-            case 'enableAutoCompress':
-                return (React.createElement(Box, { key: field, flexDirection: "column" },
-                    React.createElement(Text, { color: isActive ? theme.colors.menuSelected : theme.colors.menuNormal },
-                        isActive ? '❯ ' : '  ',
-                        t.configScreen.enableAutoCompress),
-                    React.createElement(Box, { marginLeft: 3 },
-                        React.createElement(Text, { color: theme.colors.menuSecondary },
-                            enableAutoCompress ? t.configScreen.enabled : t.configScreen.disabled,
-                            " ",
-                            t.configScreen.toggleHint))));
-            case 'thinkingEnabled':
-                return (React.createElement(Box, { key: field, flexDirection: "column" },
-                    React.createElement(Text, { color: isActive ? theme.colors.menuSelected : theme.colors.menuNormal },
-                        isActive ? '❯ ' : '  ',
-                        t.configScreen.thinkingEnabled),
-                    React.createElement(Box, { marginLeft: 3 },
-                        React.createElement(Text, { color: theme.colors.menuSecondary },
-                            thinkingEnabled ? t.configScreen.enabled : t.configScreen.disabled,
-                            " ",
-                            t.configScreen.toggleHint))));
-            case 'thinkingBudgetTokens':
-                return (React.createElement(Box, { key: field, flexDirection: "column" },
-                    React.createElement(Text, { color: isActive ? theme.colors.menuSelected : theme.colors.menuNormal },
-                        isActive ? '❯ ' : '  ',
-                        t.configScreen.thinkingBudgetTokens),
-                    isCurrentlyEditing && (React.createElement(Box, { marginLeft: 3 },
-                        React.createElement(Text, { color: theme.colors.menuInfo },
-                            t.configScreen.enterValue,
-                            " ",
-                            thinkingBudgetTokens))),
-                    !isCurrentlyEditing && (React.createElement(Box, { marginLeft: 3 },
-                        React.createElement(Text, { color: theme.colors.menuSecondary }, thinkingBudgetTokens)))));
-            case 'geminiThinkingEnabled':
-                return (React.createElement(Box, { key: field, flexDirection: "column" },
-                    React.createElement(Text, { color: isActive ? theme.colors.menuSelected : theme.colors.menuNormal },
-                        isActive ? '❯ ' : '  ',
-                        t.configScreen.geminiThinkingEnabled),
-                    React.createElement(Box, { marginLeft: 3 },
-                        React.createElement(Text, { color: theme.colors.menuSecondary },
-                            geminiThinkingEnabled ? t.configScreen.enabled : t.configScreen.disabled,
-                            " ",
-                            t.configScreen.toggleHint))));
-            case 'geminiThinkingBudget':
-                return (React.createElement(Box, { key: field, flexDirection: "column" },
-                    React.createElement(Text, { color: isActive ? theme.colors.menuSelected : theme.colors.menuNormal },
-                        isActive ? '❯ ' : '  ',
-                        t.configScreen.geminiThinkingBudget),
-                    isCurrentlyEditing && (React.createElement(Box, { marginLeft: 3 },
-                        React.createElement(Text, { color: theme.colors.menuInfo },
-                            t.configScreen.enterValue,
-                            " ",
-                            geminiThinkingBudget))),
-                    !isCurrentlyEditing && (React.createElement(Box, { marginLeft: 3 },
-                        React.createElement(Text, { color: theme.colors.menuSecondary }, geminiThinkingBudget)))));
-            case 'responsesReasoningEnabled':
-                return (React.createElement(Box, { key: field, flexDirection: "column" },
-                    React.createElement(Text, { color: isActive ? theme.colors.menuSelected : theme.colors.menuNormal },
-                        isActive ? '❯ ' : '  ',
-                        t.configScreen.responsesReasoningEnabled),
-                    React.createElement(Box, { marginLeft: 3 },
-                        React.createElement(Text, { color: theme.colors.menuSecondary },
-                            responsesReasoningEnabled ? t.configScreen.enabled : t.configScreen.disabled,
-                            ' ',
-                            t.configScreen.toggleHint))));
-            case 'responsesReasoningEffort':
-                return (React.createElement(Box, { key: field, flexDirection: "column" },
-                    React.createElement(Text, { color: isActive ? theme.colors.menuSelected : theme.colors.menuNormal },
-                        isActive ? '❯ ' : '  ',
-                        t.configScreen.responsesReasoningEffort),
-                    !isCurrentlyEditing && (React.createElement(Box, { marginLeft: 3 },
-                        React.createElement(Text, { color: theme.colors.menuSecondary }, responsesReasoningEffort.toUpperCase()))),
-                    isCurrentlyEditing && (React.createElement(Box, { marginLeft: 3 },
-                        React.createElement(Select, { options: [
-                                { label: 'LOW', value: 'low' },
-                                { label: 'MEDIUM', value: 'medium' },
-                                { label: 'HIGH', value: 'high' },
-                                { label: 'XHIGH', value: 'xhigh' },
-                            ], defaultValue: responsesReasoningEffort, onChange: value => {
-                                setResponsesReasoningEffort(value);
-                                setIsEditing(false);
-                            } })))));
-            case 'advancedModel':
-                return (React.createElement(Box, { key: field, flexDirection: "column" },
-                    React.createElement(Text, { color: isActive ? theme.colors.menuSelected : theme.colors.menuNormal },
-                        isActive ? '❯ ' : '  ',
-                        t.configScreen.advancedModel),
-                    !isCurrentlyEditing && (React.createElement(Box, { marginLeft: 3 },
-                        React.createElement(Text, { color: theme.colors.menuSecondary }, advancedModel || t.configScreen.notSet)))));
-            case 'basicModel':
-                return (React.createElement(Box, { key: field, flexDirection: "column" },
-                    React.createElement(Text, { color: isActive ? theme.colors.menuSelected : theme.colors.menuNormal },
-                        isActive ? '❯ ' : '  ',
-                        t.configScreen.basicModel),
-                    !isCurrentlyEditing && (React.createElement(Box, { marginLeft: 3 },
-                        React.createElement(Text, { color: theme.colors.menuSecondary }, basicModel || t.configScreen.notSet)))));
-            case 'compactModelName':
-                return (React.createElement(Box, { key: field, flexDirection: "column" },
-                    React.createElement(Text, { color: isActive ? theme.colors.menuSelected : theme.colors.menuNormal },
-                        isActive ? '❯ ' : '  ',
-                        t.configScreen.compactModel),
-                    !isCurrentlyEditing && (React.createElement(Box, { marginLeft: 3 },
-                        React.createElement(Text, { color: theme.colors.menuSecondary }, compactModelName || t.configScreen.notSet)))));
-            case 'maxContextTokens':
-                return (React.createElement(Box, { key: field, flexDirection: "column" },
-                    React.createElement(Text, { color: isActive ? theme.colors.menuSelected : theme.colors.menuNormal },
-                        isActive ? '❯ ' : '  ',
-                        t.configScreen.maxContextTokens),
-                    isCurrentlyEditing && (React.createElement(Box, { marginLeft: 3 },
-                        React.createElement(Text, { color: theme.colors.menuInfo },
-                            t.configScreen.enterValue,
-                            " ",
-                            maxContextTokens))),
-                    !isCurrentlyEditing && (React.createElement(Box, { marginLeft: 3 },
-                        React.createElement(Text, { color: theme.colors.menuSecondary }, maxContextTokens)))));
-            case 'maxTokens':
-                return (React.createElement(Box, { key: field, flexDirection: "column" },
-                    React.createElement(Text, { color: isActive ? theme.colors.menuSelected : theme.colors.menuNormal },
-                        isActive ? '❯ ' : '  ',
-                        t.configScreen.maxTokens),
-                    isCurrentlyEditing && (React.createElement(Box, { marginLeft: 3 },
-                        React.createElement(Text, { color: theme.colors.menuInfo },
-                            t.configScreen.enterValue,
-                            " ",
-                            maxTokens))),
-                    !isCurrentlyEditing && (React.createElement(Box, { marginLeft: 3 },
-                        React.createElement(Text, { color: theme.colors.menuSecondary }, maxTokens)))));
-            default:
-                return null;
-        }
-    };
-    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 profile shortcuts (only when in normal profile mode)
-        if (profileMode === 'normal' &&
-            currentField === 'profile' &&
-            (input === 'n' || input === 'N')) {
-            // Handle profile creation (works in both normal and editing mode)
-            setProfileMode('creating');
-            setNewProfileName('');
-            setIsEditing(false); // Exit Select editing mode
-            return;
-        }
-        if (profileMode === 'normal' &&
-            currentField === 'profile' &&
-            (input === 'd' || input === 'D')) {
-            // Handle profile deletion (works in both normal and editing mode)
-            if (activeProfile === 'default') {
-                setErrors([t.configScreen.cannotDeleteDefault]);
-                setIsEditing(false);
-                return;
-            }
-            setProfileMode('deleting');
-            setIsEditing(false); // Exit Select editing mode
-            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' ||
-                currentField === 'responsesReasoningEffort') &&
-            key.escape) {
-            setIsEditing(false);
-            setSearchTerm('');
-            // Force re-render to clear Select component artifacts
-            forceUpdate(prev => prev + 1);
-            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' ||
-                currentField === 'thinkingBudgetTokens' ||
-                currentField === 'geminiThinkingBudget') {
-                if (input && input.match(/[0-9]/)) {
-                    const currentValue = currentField === 'maxContextTokens'
-                        ? maxContextTokens
-                        : currentField === 'maxTokens'
-                            ? maxTokens
-                            : currentField === 'thinkingBudgetTokens'
-                                ? thinkingBudgetTokens
-                                : geminiThinkingBudget;
-                    const newValue = parseInt(currentValue.toString() + input, 10);
-                    if (!isNaN(newValue)) {
-                        if (currentField === 'maxContextTokens') {
-                            setMaxContextTokens(newValue);
-                        }
-                        else if (currentField === 'maxTokens') {
-                            setMaxTokens(newValue);
-                        }
-                        else if (currentField === 'thinkingBudgetTokens') {
-                            setThinkingBudgetTokens(newValue);
-                        }
-                        else {
-                            setGeminiThinkingBudget(newValue);
-                        }
-                    }
-                }
-                else if (key.backspace || key.delete) {
-                    const currentValue = currentField === 'maxContextTokens'
-                        ? maxContextTokens
-                        : currentField === 'maxTokens'
-                            ? maxTokens
-                            : currentField === 'thinkingBudgetTokens'
-                                ? thinkingBudgetTokens
-                                : geminiThinkingBudget;
-                    const currentStr = currentValue.toString();
-                    const newStr = currentStr.slice(0, -1);
-                    const newValue = parseInt(newStr, 10);
-                    if (currentField === 'maxContextTokens') {
-                        setMaxContextTokens(!isNaN(newValue) ? newValue : 0);
-                    }
-                    else if (currentField === 'maxTokens') {
-                        setMaxTokens(!isNaN(newValue) ? newValue : 0);
-                    }
-                    else if (currentField === 'thinkingBudgetTokens') {
-                        setThinkingBudgetTokens(!isNaN(newValue) ? newValue : 0);
-                    }
-                    else {
-                        setGeminiThinkingBudget(!isNaN(newValue) ? newValue : 0);
-                    }
-                }
-                else if (key.return) {
-                    const minValue = currentField === 'maxContextTokens'
-                        ? 4000
-                        : currentField === 'maxTokens'
-                            ? 100
-                            : currentField === 'thinkingBudgetTokens'
-                                ? 1000
-                                : 1;
-                    const currentValue = currentField === 'maxContextTokens'
-                        ? maxContextTokens
-                        : currentField === 'maxTokens'
-                            ? maxTokens
-                            : currentField === 'thinkingBudgetTokens'
-                                ? thinkingBudgetTokens
-                                : geminiThinkingBudget;
-                    const finalValue = currentValue < minValue ? minValue : currentValue;
-                    if (currentField === 'maxContextTokens') {
-                        setMaxContextTokens(finalValue);
-                    }
-                    else if (currentField === 'maxTokens') {
-                        setMaxTokens(finalValue);
-                    }
-                    else if (currentField === 'thinkingBudgetTokens') {
-                        setThinkingBudgetTokens(finalValue);
-                    }
-                    else {
-                        setGeminiThinkingBudget(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 === 'enablePromptOptimization') {
-                    setEnablePromptOptimization(!enablePromptOptimization);
-                }
-                else if (currentField === 'enableAutoCompress') {
-                    setEnableAutoCompress(!enableAutoCompress);
-                }
-                else if (currentField === 'thinkingEnabled') {
-                    setThinkingEnabled(!thinkingEnabled);
-                }
-                else if (currentField === 'geminiThinkingEnabled') {
-                    setGeminiThinkingEnabled(!geminiThinkingEnabled);
-                }
-                else if (currentField === 'responsesReasoningEnabled') {
-                    setResponsesReasoningEnabled(!responsesReasoningEnabled);
-                }
-                else if (currentField === 'maxContextTokens' ||
-                    currentField === 'maxTokens' ||
-                    currentField === 'thinkingBudgetTokens' ||
-                    currentField === 'geminiThinkingBudget') {
-                    setIsEditing(true);
-                }
-                else if (currentField === 'responsesReasoningEffort') {
-                    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 = getAllFields();
-            const currentIndex = fields.indexOf(currentField);
-            if (currentIndex > 0) {
-                setCurrentField(fields[currentIndex - 1]);
-            }
-        }
-        else if (!isEditing && key.downArrow) {
-            const fields = getAllFields();
-            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: theme.colors.menuInfo, paddingX: 2 },
-                React.createElement(Box, { flexDirection: "column" },
-                    React.createElement(Gradient, { name: "rainbow" }, t.configScreen.createNewProfile),
-                    React.createElement(Text, { color: theme.colors.menuSecondary, dimColor: true }, t.configScreen.enterProfileName)))),
-            React.createElement(Box, { flexDirection: "column" },
-                React.createElement(Text, { color: theme.colors.menuInfo }, "Profile Name:"),
-                React.createElement(Box, { marginLeft: 2 },
-                    React.createElement(TextInput, { value: newProfileName, onChange: value => setNewProfileName(stripFocusArtifacts(value)), placeholder: t.configScreen.profileNamePlaceholder }))),
-            errors.length > 0 && (React.createElement(Box, { marginTop: 1 },
-                React.createElement(Text, { color: theme.colors.error }, errors[0]))),
-            React.createElement(Box, { marginTop: 1 },
-                React.createElement(Alert, { variant: "info" }, t.configScreen.createHint))));
-    }
-    // Render profile deletion confirmation
-    if (profileMode === 'deleting') {
-        return (React.createElement(Box, { flexDirection: "column", padding: 1 },
-            !inlineMode && (React.createElement(Box, { marginBottom: 1, borderStyle: "double", borderColor: theme.colors.menuInfo, paddingX: 2 },
-                React.createElement(Box, { flexDirection: "column" },
-                    React.createElement(Gradient, { name: "rainbow" }, t.configScreen.deleteProfile),
-                    React.createElement(Text, { color: theme.colors.menuSecondary, dimColor: true }, t.configScreen.confirmDelete)))),
-            React.createElement(Box, { flexDirection: "column" },
-                React.createElement(Text, { color: theme.colors.warning },
-                    "Are you sure you want to delete the profile \"",
-                    activeProfile,
-                    "\"?"),
-                React.createElement(Text, { color: theme.colors.menuSecondary, dimColor: true }, t.configScreen.deleteWarning)),
-            errors.length > 0 && (React.createElement(Box, { marginTop: 1 },
-                React.createElement(Text, { color: theme.colors.error }, errors[0]))),
-            React.createElement(Box, { marginTop: 1 },
-                React.createElement(Alert, { variant: "warning" }, t.configScreen.confirmHint))));
-    }
-    if (loading) {
-        return (React.createElement(Box, { flexDirection: "column", padding: 1 },
-            !inlineMode && (React.createElement(Box, { marginBottom: 1, borderStyle: "double", borderColor: theme.colors.menuInfo, paddingX: 2 },
-                React.createElement(Box, { flexDirection: "column" },
-                    React.createElement(Gradient, { name: "rainbow" }, t.configScreen.title),
-                    React.createElement(Text, { color: theme.colors.menuSecondary, dimColor: true }, t.configScreen.loadingMessage)))),
-            React.createElement(Box, { flexDirection: "column" },
-                React.createElement(Box, null,
-                    React.createElement(Spinner, { type: "dots" }),
-                    React.createElement(Text, { color: theme.colors.menuInfo },
-                        " ",
-                        t.configScreen.fetchingModels)),
-                React.createElement(Box, { marginLeft: 2 },
-                    React.createElement(Text, { color: theme.colors.menuSecondary, dimColor: true }, t.configScreen.fetchingHint))),
-            React.createElement(Box, { flexDirection: "column", marginTop: 1 },
-                React.createElement(Alert, { variant: "info" }, t.configScreen.loadingCancelHint))));
-    }
-    if (manualInputMode) {
-        return (React.createElement(Box, { flexDirection: "column", padding: 1 },
-            !inlineMode && (React.createElement(Box, { marginBottom: 1, borderStyle: "double", borderColor: theme.colors.menuInfo, paddingX: 2 },
-                React.createElement(Box, { flexDirection: "column" },
-                    React.createElement(Gradient, { name: "rainbow" }, t.configScreen.manualInputTitle),
-                    React.createElement(Text, { color: theme.colors.menuSecondary, dimColor: true }, t.configScreen.manualInputSubtitle)))),
-            loadError && (React.createElement(Box, { flexDirection: "column", marginBottom: 1 },
-                React.createElement(Text, { color: theme.colors.warning }, t.configScreen.loadingError),
-                React.createElement(Text, { color: theme.colors.menuSecondary, dimColor: true }, loadError))),
-            React.createElement(Box, { flexDirection: "column" },
-                React.createElement(Text, { color: theme.colors.menuInfo },
-                    currentField === 'advancedModel' && t.configScreen.advancedModel,
-                    currentField === 'basicModel' && t.configScreen.basicModel,
-                    currentField === 'compactModelName' && t.configScreen.compactModel),
-                React.createElement(Box, { marginLeft: 2 },
-                    React.createElement(Text, { color: theme.colors.menuSelected },
-                        `> ${manualInputValue}`,
-                        React.createElement(Text, { color: theme.colors.menuNormal }, "_")))),
-            React.createElement(Box, { flexDirection: "column", marginTop: 1 },
-                React.createElement(Alert, { variant: "info" }, t.configScreen.manualInputHint))));
-    }
-    return (React.createElement(Box, { flexDirection: "column", padding: 1 },
-        !inlineMode && (React.createElement(Box, { marginBottom: 1, borderStyle: "double", borderColor: theme.colors.menuInfo, paddingX: 2 },
-            React.createElement(Box, { flexDirection: "column" },
-                React.createElement(Gradient, { name: "rainbow" }, t.configScreen.title),
-                React.createElement(Text, { color: theme.colors.menuSecondary, dimColor: true }, t.configScreen.subtitle),
-                activeProfile && (React.createElement(Text, { color: theme.colors.menuInfo, dimColor: true },
-                    t.configScreen.activeProfile,
-                    " ",
-                    activeProfile))))),
-        React.createElement(Box, { marginBottom: 1 },
-            React.createElement(Text, { color: theme.colors.warning, bold: true },
-                t.configScreen.settingsPosition,
-                " (",
-                currentFieldIndex + 1,
-                "/",
-                totalFields,
-                ")"),
-            totalFields > MAX_VISIBLE_FIELDS && (React.createElement(Text, { color: theme.colors.menuSecondary, dimColor: true }, t.configScreen.scrollHint))),
-        isEditing &&
-            (currentField === 'profile' ||
-                currentField === 'requestMethod' ||
-                currentField === 'advancedModel' ||
-                currentField === 'basicModel' ||
-                currentField === 'compactModelName' ||
-                currentField === 'responsesReasoningEffort') ? (React.createElement(Box, { flexDirection: "column" },
-            React.createElement(Text, { color: theme.colors.menuSelected },
-                "\u276F ",
-                currentField === 'profile' && t.configScreen.profile.replace(':', ''),
-                currentField === 'requestMethod' && t.configScreen.requestMethod.replace(':', ''),
-                currentField === 'advancedModel' && t.configScreen.advancedModel.replace(':', ''),
-                currentField === 'basicModel' && t.configScreen.basicModel.replace(':', ''),
-                currentField === 'compactModelName' && t.configScreen.compactModel.replace(':', ''),
-                currentField === 'responsesReasoningEffort' &&
-                    t.configScreen.responsesReasoningEffort.replace(':', '')),
-            React.createElement(Box, { marginLeft: 3, marginTop: 1 },
-                currentField === 'profile' && (React.createElement(Box, { flexDirection: "column" },
-                    profiles.length > 1 && (React.createElement(Text, { color: theme.colors.menuSecondary, dimColor: true }, "Scroll to see more profiles (\u2191\u2193)")),
-                    React.createElement(Select, { options: profiles.map(p => ({
-                            label: `${p.displayName}${p.isActive ? ' (Active)' : ''}`,
-                            value: p.name,
-                        })), defaultValue: activeProfile, onChange: value => {
-                            switchProfile(value);
-                            loadProfilesAndConfig();
-                            setIsEditing(false);
-                            setErrors([]);
-                        } }),
-                    React.createElement(Box, { flexDirection: "row", marginTop: 1 },
-                        React.createElement(Box, { marginRight: 2 },
-                            React.createElement(Text, { color: theme.colors.menuSelected }, t.configScreen.newProfile),
-                            React.createElement(Text, { color: theme.colors.menuSecondary }, " (n)")),
-                        React.createElement(Box, null,
-                            React.createElement(Text, { color: theme.colors.error }, t.configScreen.deleteProfileShort),
-                            React.createElement(Text, { color: theme.colors.menuSecondary }, " (d)"))))),
-                currentField === 'requestMethod' && (React.createElement(Select, { options: requestMethodOptions, defaultValue: requestMethod, onChange: value => {
-                        setRequestMethod(value);
-                        setIsEditing(false);
-                    } })),
-                (currentField === 'advancedModel' ||
-                    currentField === 'basicModel' ||
-                    currentField === 'compactModelName') && (React.createElement(Box, { flexDirection: "column" },
-                    searchTerm && React.createElement(Text, { color: theme.colors.menuInfo },
-                        "Filter: ",
-                        searchTerm),
-                    React.createElement(Select, { options: getCurrentOptions(), defaultValue: getCurrentValue(), onChange: handleModelChange }))),
-                currentField === 'responsesReasoningEffort' && (React.createElement(Select, { options: [
-                        { label: 'LOW', value: 'low' },
-                        { label: 'MEDIUM', value: 'medium' },
-                        { label: 'HIGH', value: 'high' },
-                        { label: 'XHIGH', value: 'xhigh' },
-                    ], defaultValue: responsesReasoningEffort, onChange: value => {
-                        setResponsesReasoningEffort(value);
-                        setIsEditing(false);
-                    } }))),
-            React.createElement(Box, { marginTop: 1 },
-                React.createElement(Alert, { variant: "info" },
-                    (currentField === 'advancedModel' ||
-                        currentField === 'basicModel' ||
-                        currentField === 'compactModelName') &&
-                        t.configScreen.modelFilterHint,
-                    currentField === 'responsesReasoningEffort' &&
-                        t.configScreen.effortSelectHint,
-                    currentField === 'profile' &&
-                        t.configScreen.profileSelectHint,
-                    currentField === 'requestMethod' &&
-                        t.configScreen.requestMethodSelectHint)))) : (React.createElement(Box, { flexDirection: "column" }, (() => {
-            // Calculate visible window
-            if (allFields.length <= MAX_VISIBLE_FIELDS) {
-                // Show all fields if less than max
-                return allFields.map(field => renderField(field));
-            }
-            // Calculate scroll window
-            const halfWindow = Math.floor(MAX_VISIBLE_FIELDS / 2);
-            let startIndex = Math.max(0, currentFieldIndex - halfWindow);
-            let endIndex = Math.min(allFields.length, startIndex + MAX_VISIBLE_FIELDS);
-            // Adjust if we're near the end
-            if (endIndex - startIndex < MAX_VISIBLE_FIELDS) {
-                startIndex = Math.max(0, endIndex - MAX_VISIBLE_FIELDS);
-            }
-            const visibleFields = allFields.slice(startIndex, endIndex);
-            return visibleFields.map(field => renderField(field));
-        })())),
-        errors.length > 0 && (React.createElement(Box, { flexDirection: "column", marginTop: 1 },
-            React.createElement(Text, { color: theme.colors.error, bold: true }, t.configScreen.errors),
-            errors.map((error, index) => (React.createElement(Text, { key: index, color: theme.colors.error },
-                "\u2022 ",
-                error))))),
-        !(isEditing &&
-            (currentField === 'profile' ||
-                currentField === 'requestMethod' ||
-                currentField === 'advancedModel' ||
-                currentField === 'basicModel' ||
-                currentField === 'compactModelName' ||
-                currentField === 'responsesReasoningEffort')) && (React.createElement(Box, { flexDirection: "column", marginTop: 1 }, isEditing ? (React.createElement(Alert, { variant: "info" }, currentField === 'maxContextTokens' ||
-            currentField === 'maxTokens'
-            ? t.configScreen.editingHintNumeric
-            : t.configScreen.editingHintGeneral)) : (React.createElement(Alert, { variant: "info" }, t.configScreen.navigationHint))))));
-}