@tecet/ollm 0.1.3

package/dist/ui/components/settings/SettingsPanel.js

@@ -0,0 +1,864 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useMemo, useCallback } from 'react';
+import { Box, Text, useInput } from 'ink';
+import { ToolCapability, detectServerCapabilities, } from '@ollm/ollm-cli-core/tools/tool-capabilities.js';
+import { builtInThemes } from '../../../config/styles.js';
+import { useFocusManager } from '../../../features/context/FocusContext.js';
+import { useKeybinds } from '../../../features/context/KeybindsContext.js';
+import { useModel } from '../../../features/context/ModelContext.js';
+import { useSettings } from '../../../features/context/SettingsContext.js';
+import { useUI } from '../../../features/context/UIContext.js';
+import { profileManager } from '../../../features/profiles/ProfileManager.js';
+import { useMCP } from '../../contexts/MCPContext.js';
+import { useTabEscapeHandler } from '../../hooks/useTabEscapeHandler.js';
+const WINDOW_SIZE = 30; // Configurable window size
+const sections = [
+    { id: 'keybinds', name: 'Keybinds' },
+    { id: 'provider', name: 'Provider Selection' },
+    { id: 'model', name: 'LLM Models' },
+    { id: 'options', name: 'LLM Options' },
+    { id: 'tool_routing', name: 'Tool Routing' },
+    { id: 'theme', name: 'Theme Selection' },
+];
+/**
+ * SettingsPanel Component
+ *
+ * Two-column settings interface:
+ * - Left (30%): Section navigation
+ * - Right (70%): Settings editor
+ *
+ * Navigation:
+ * - Up/Down: Navigate sections/settings
+ * - Left/Right: Switch between columns
+ * - Enter: Select section or edit setting
+ * - Esc/0: Exit to nav-bar
+ */
+export function SettingsPanel({ windowWidth }) {
+    const { state: uiState } = useUI();
+    const focusManager = useFocusManager();
+    const { settings, updateLLMSetting, updateUISetting, updateToolRouting } = useSettings();
+    const { currentModel, setCurrentModel } = useModel();
+    const { state: mcpState, getServerTools } = useMCP();
+    const { activeKeybinds, defaultKeybinds, setUserBind, restoreDefault, checkConflict } = useKeybinds();
+    const hasFocus = focusManager.isFocused('settings-panel');
+    // Use shared escape handler for consistent navigation
+    useTabEscapeHandler(hasFocus);
+    // Calculate absolute widths if windowWidth is provided
+    const absoluteLeftWidth = windowWidth ? Math.floor(windowWidth * 0.3) : undefined;
+    const absoluteRightWidth = windowWidth && absoluteLeftWidth ? windowWidth - absoluteLeftWidth : undefined;
+    // State
+    const [selectedSectionIndex, setSelectedSectionIndex] = useState(0);
+    const [selectedSettingIndex, setSelectedSettingIndex] = useState(0);
+    const [focusedColumn, setFocusedColumn] = useState('left');
+    const [scrollOffset, _setScrollOffset] = useState(0);
+    const [rightScrollOffset, setRightScrollOffset] = useState(0);
+    const [isOnExitItem, setIsOnExitItem] = useState(false);
+    const [isEditingValue, setIsEditingValue] = useState(false);
+    const [editValue, setEditValue] = useState('');
+    // Get current section
+    const currentSection = useMemo(() => {
+        if (isOnExitItem || selectedSectionIndex >= sections.length) {
+            return null;
+        }
+        return sections[selectedSectionIndex];
+    }, [selectedSectionIndex, isOnExitItem]);
+    // Derive available servers for each capability
+    const capabilityProviders = useMemo(() => {
+        const map = new Map();
+        // Initialize empty lists for all capabilities
+        Object.values(ToolCapability).forEach((cap) => map.set(cap, []));
+        // Scan all connected servers
+        mcpState.servers.forEach((server, serverName) => {
+            if (server.status !== 'connected')
+                return;
+            const tools = getServerTools(serverName);
+            // Adapt MCPTool to Tool interface for detection
+            const adaptedTools = tools.map((t) => ({
+                name: t.name,
+                displayName: t.name,
+                schema: {
+                    name: t.name,
+                    description: t.description,
+                    parameters: t.inputSchema,
+                },
+                createInvocation: () => {
+                    throw new Error('Not implemented for detection');
+                },
+            }));
+            // We cast to any because we're constructing a minimal compatible object
+            // and the full Tool interface is complex
+            const capabilities = detectServerCapabilities(serverName, adaptedTools);
+            capabilities.forEach((cap) => {
+                const list = map.get(cap) || [];
+                if (!list.includes(serverName)) {
+                    list.push(serverName);
+                    map.set(cap, list);
+                }
+            });
+        });
+        return map;
+    }, [mcpState.servers, getServerTools]);
+    // Options for select types
+    const getOptionsForSetting = useCallback((settingId) => {
+        switch (settingId) {
+            case 'provider':
+                return ['ollama', 'openai', 'anthropic', 'local'];
+            case 'model':
+                // For now, hardcode some common ones or get from current model
+                return ['llama3.2:3b', 'llama3.3:70b', 'qwen2.5-coder:7b', 'phi3'];
+            case 'theme':
+                return Object.keys(builtInThemes);
+            default:
+                // Handle tool routing capabilities
+                if (Object.values(ToolCapability).includes(settingId)) {
+                    const servers = capabilityProviders.get(settingId) || [];
+                    return ['(auto)', ...servers];
+                }
+                return [];
+        }
+    }, [capabilityProviders]);
+    // Get settings for current section
+    const currentSettings = useMemo(() => {
+        if (!currentSection)
+            return [];
+        switch (currentSection.id) {
+            case 'provider':
+                return [
+                    {
+                        id: 'local_header',
+                        label: '1 Local LLM Providers:',
+                        value: '',
+                        type: 'header',
+                        category: 'llm',
+                    },
+                    { id: 'h_spacer_1', label: '', value: '', type: 'info', category: 'llm' }, // Padding
+                    {
+                        id: 'prov_ollama',
+                        label: 'Ollama',
+                        value: 'ollama',
+                        active: (settings.llm.provider || 'ollama') === 'ollama',
+                        type: 'choice',
+                        category: 'llm',
+                    },
+                    {
+                        id: 'prov_ollama_cloud',
+                        label: 'Ollama Cloud [ coming soon ]',
+                        value: 'ollama_cloud',
+                        type: 'choice',
+                        category: 'llm',
+                        muted: true,
+                    },
+                    {
+                        id: 'prov_llm_studio',
+                        label: 'LLM Studio [ coming soon ]',
+                        value: 'llm_studio',
+                        type: 'choice',
+                        category: 'llm',
+                        muted: true,
+                    },
+                    {
+                        id: 'prov_vllm',
+                        label: 'vLLM [ coming soon ]',
+                        value: 'vllm',
+                        type: 'choice',
+                        category: 'llm',
+                        muted: true,
+                    },
+                    {
+                        id: 'prov_llama_cpp',
+                        label: 'Llama cpp [ coming soon ]',
+                        value: 'llama_cpp',
+                        type: 'choice',
+                        category: 'llm',
+                        muted: true,
+                    },
+                    {
+                        id: 'prov_mlx_lm',
+                        label: 'MLX-LM [ coming soon ]',
+                        value: 'mlx_lm',
+                        type: 'choice',
+                        category: 'llm',
+                        muted: true,
+                    },
+                    { id: 'spacer_p1', label: '', value: '', type: 'info', category: 'llm' },
+                    { id: 'kraken_header', label: '2 Kraken', value: '', type: 'header', category: 'llm' },
+                    { id: 'h_spacer_2', label: '', value: '', type: 'info', category: 'llm' }, // Padding
+                    {
+                        id: 'prov_claude_code',
+                        label: 'Claude Code CLI [ coming soon ]',
+                        value: 'claude_code',
+                        type: 'choice',
+                        category: 'llm',
+                        muted: true,
+                    },
+                    {
+                        id: 'prov_codex',
+                        label: 'Codex CLI [ coming soon ]',
+                        value: 'codex',
+                        type: 'choice',
+                        category: 'llm',
+                        muted: true,
+                    },
+                    {
+                        id: 'prov_gemini_cli',
+                        label: 'Gemini CLI [ coming soon ]',
+                        value: 'gemini_cli',
+                        type: 'choice',
+                        category: 'llm',
+                        muted: true,
+                    },
+                    { id: 'spacer_p2', label: '', value: '', type: 'info', category: 'llm' },
+                    {
+                        id: 'rag_header',
+                        label: '3 RAG Embedding Model',
+                        value: '',
+                        type: 'header',
+                        category: 'llm',
+                    },
+                    { id: 'h_spacer_3', label: '', value: '', type: 'info', category: 'llm' }, // Padding
+                    {
+                        id: 'rag_model',
+                        label: 'Model Name/ID',
+                        value: 'Embedding LLM',
+                        type: 'info',
+                        category: 'llm',
+                    },
+                    { id: 'rag_api', label: 'API', value: '*******', type: 'info', category: 'llm' },
+                    { id: 'rag_dim', label: 'Dimensions', value: '1024', type: 'info', category: 'llm' },
+                    {
+                        id: 'rag_chunk',
+                        label: 'Chunk Size (Max Tokens)',
+                        value: '512',
+                        type: 'info',
+                        category: 'llm',
+                    },
+                    { id: 'spacer_p3', label: '', value: '', type: 'info', category: 'llm' },
+                    {
+                        id: 'api_header',
+                        label: '4 API LLMs Providers',
+                        value: '',
+                        type: 'header',
+                        category: 'llm',
+                    },
+                    { id: 'h_spacer_4', label: '', value: '', type: 'info', category: 'llm' }, // Padding
+                    {
+                        id: 'api_prov',
+                        label: 'LLM Provider',
+                        value: ' ',
+                        type: 'info',
+                        category: 'llm',
+                        muted_value: true,
+                    },
+                    {
+                        id: 'api_add',
+                        label: '+ Add API',
+                        value: '',
+                        type: 'choice',
+                        category: 'llm',
+                        muted: true,
+                    },
+                ];
+            case 'model': {
+                const userModels = profileManager.getUserModels();
+                const modelEntry = userModels.find((m) => m.id === currentModel);
+                const profile = profileManager.getProfileById(currentModel) || profileManager.findProfile(currentModel);
+                const settingsList = [
+                    { id: 'model_name', label: 'Model', value: currentModel, type: 'info', category: 'llm' },
+                ];
+                if (modelEntry) {
+                    const ctxProfile = modelEntry.context_profiles?.find((p) => p.size === settings.llm.contextSize) ||
+                        modelEntry.context_profiles?.[0];
+                    settingsList.push({
+                        id: 'model_ctx',
+                        label: 'Context Size',
+                        value: ctxProfile?.size_label || modelEntry.default_context || 'N/A',
+                        type: 'info',
+                        category: 'llm',
+                    });
+                    if (profile?.ollama_url) {
+                        settingsList.push({
+                            id: 'model_url',
+                            label: 'Ollama URL',
+                            value: profile.ollama_url,
+                            type: 'info',
+                            category: 'llm',
+                        });
+                    }
+                    settingsList.push({
+                        id: 'model_tools',
+                        label: 'Tool Support',
+                        value: modelEntry.tool_support ? '✓ Supported' : '✗ Not Supported',
+                        type: 'info',
+                        category: 'llm',
+                    });
+                    if (profile?.thinking_enabled || modelEntry.abilities?.includes('Reasoning')) {
+                        settingsList.push({
+                            id: 'model_reasoning',
+                            label: 'Reasoning',
+                            value: '✓ Enabled',
+                            type: 'info',
+                            category: 'llm',
+                        });
+                    }
+                    settingsList.push({
+                        id: 'model_desc',
+                        label: 'Description',
+                        value: modelEntry.description || 'No description available.',
+                        type: 'info',
+                        category: 'llm',
+                    });
+                    // Add 3 lines padding under description
+                    settingsList.push({ id: 'spacer1', label: '', value: '', type: 'info', category: 'llm' });
+                    settingsList.push({ id: 'spacer2', label: '', value: '', type: 'info', category: 'llm' });
+                    settingsList.push({ id: 'spacer3', label: '', value: '', type: 'info', category: 'llm' });
+                }
+                settingsList.push({
+                    id: 'available_models_header',
+                    label: 'Available Models:',
+                    value: '',
+                    type: 'header',
+                    category: 'llm',
+                });
+                // Add line space between header and list
+                settingsList.push({
+                    id: 'list_spacer',
+                    label: '',
+                    value: '',
+                    type: 'info',
+                    category: 'llm',
+                });
+                // Display in alphabetical order
+                [...userModels]
+                    .sort((a, b) => a.id.localeCompare(b.id))
+                    .forEach((m) => {
+                    settingsList.push({
+                        id: 'model',
+                        label: m.id,
+                        value: m.id,
+                        active: m.id === currentModel,
+                        type: 'choice',
+                        category: 'llm',
+                    });
+                });
+                return settingsList;
+            }
+            case 'options': {
+                const isModeLinked = settings.llm.modeLinkedTemperature ?? true;
+                const options = [
+                    {
+                        id: 'modeLinkedTemperature',
+                        label: 'Mode-Linked Temperature',
+                        value: isModeLinked,
+                        type: 'toggle',
+                        category: 'llm',
+                    },
+                    {
+                        id: 'temperature',
+                        label: 'Temperature',
+                        value: settings.llm.temperature || 0.3,
+                        type: 'numeric',
+                        min: 0,
+                        max: 2,
+                        step: 0.1,
+                        category: 'llm',
+                        muted: isModeLinked,
+                    },
+                    {
+                        id: 'temp_info',
+                        label: 'Effective Temp',
+                        value: isModeLinked ? 'Managed by Mode' : String(settings.llm.temperature || 0.3),
+                        type: 'info',
+                        category: 'llm',
+                    },
+                    { id: 'spacer_opt_1', label: '', value: '', type: 'info', category: 'llm' },
+                    {
+                        id: 'tiers_header',
+                        label: 'Temperature Tiers:',
+                        value: '',
+                        type: 'header',
+                        category: 'llm',
+                    },
+                    {
+                        id: 'tier_1',
+                        label: 'Tier 1 - Tech',
+                        value: '0.1 (Dev, Debug, Security)',
+                        type: 'info',
+                        category: 'llm',
+                    },
+                    {
+                        id: 'tier_2',
+                        label: 'Tier 2 - Standard',
+                        value: '0.3 (Planning, Review)',
+                        type: 'info',
+                        category: 'llm',
+                    },
+                    {
+                        id: 'tier_3',
+                        label: 'Tier 3 - Creative',
+                        value: '0.5 (Assistant, Proto)',
+                        type: 'info',
+                        category: 'llm',
+                    },
+                    { id: 'spacer_opt_2', label: '', value: '', type: 'info', category: 'llm' },
+                    {
+                        id: 'contextSize',
+                        label: 'Max Tokens',
+                        value: settings.llm.contextSize || 4096,
+                        type: 'numeric',
+                        category: 'llm',
+                    },
+                    {
+                        id: 'metricsEnabled',
+                        label: 'Metrics',
+                        value: settings.ui.metricsEnabled ?? true,
+                        type: 'toggle',
+                        category: 'ui',
+                    },
+                    {
+                        id: 'reasoningEnabled',
+                        label: 'Reasoning',
+                        value: settings.ui.reasoningEnabled ?? true,
+                        type: 'toggle',
+                        category: 'ui',
+                    },
+                ];
+                return options;
+            }
+            case 'theme':
+                return Object.keys(builtInThemes).map((themeId) => ({
+                    id: 'theme',
+                    label: themeId,
+                    value: themeId,
+                    active: (settings.ui.theme || uiState.theme.name) === themeId,
+                    type: 'choice',
+                    category: 'ui',
+                }));
+            case 'tool_routing': {
+                const config = settings.llm.toolRouting || {};
+                const isEnabled = config.enabled ?? false;
+                const settingsList = [
+                    {
+                        id: 'routing_enabled',
+                        label: 'Enable Tool Routing',
+                        value: isEnabled,
+                        type: 'toggle',
+                        category: 'llm',
+                    },
+                    {
+                        id: 'routing_fallback',
+                        label: 'Auto-Fallback',
+                        value: config.enableFallback ?? true,
+                        type: 'toggle',
+                        category: 'llm',
+                        muted: !isEnabled,
+                    },
+                    { id: 'spacer_tr_1', label: '', value: '', type: 'info', category: 'llm' },
+                    {
+                        id: 'caps_header',
+                        label: 'Capability Bindings:',
+                        value: '',
+                        type: 'header',
+                        category: 'llm',
+                        muted: !isEnabled,
+                    },
+                ];
+                // Add selector for each capability
+                Object.values(ToolCapability).forEach((cap) => {
+                    const providers = capabilityProviders.get(cap) || [];
+                    const binding = config.bindings?.[cap];
+                    const providerCount = providers.length;
+                    // Format label for capability (e.g., 'web_search' -> 'Web Search')
+                    const label = cap
+                        .split('_')
+                        .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
+                        .join(' ');
+                    settingsList.push({
+                        id: cap,
+                        label: `${label} (${providerCount})`,
+                        value: binding || '(auto)',
+                        type: 'select',
+                        category: 'llm',
+                        muted: !isEnabled,
+                        active: !!binding, // Highlight if manually bound
+                    });
+                });
+                return settingsList;
+            }
+            case 'keybinds': {
+                // useKeybinds is called at the top level
+                const settingsList = [];
+                // Header with Restore Default action (simulated as top item)
+                settingsList.push({
+                    id: 'restore_defaults',
+                    label: '[ Restore All Defaults ]',
+                    value: '',
+                    type: 'action', // Custom type for buttons
+                    category: 'ui',
+                });
+                settingsList.push({
+                    id: 'spacer_kb_1',
+                    label: '',
+                    value: '',
+                    type: 'info',
+                    category: 'ui',
+                });
+                // Iterate through all categories
+                Object.entries(activeKeybinds).forEach(([category, actions]) => {
+                    // Add Section Header
+                    const catLabel = category.charAt(0).toUpperCase() + category.slice(1).replace(/([A-Z])/g, ' $1');
+                    settingsList.push({
+                        id: `cat_${category}`,
+                        label: catLabel,
+                        value: '',
+                        type: 'header',
+                        category: 'ui',
+                    });
+                    // Add each action in category
+                    Object.entries(actions).forEach(([actionId, currentKey]) => {
+                        const defaultKey = defaultKeybinds[category]?.[actionId];
+                        const isModified = currentKey !== defaultKey;
+                        // Format label: "togglePanel" -> "Toggle Panel"
+                        const actionLabel = actionId
+                            .replace(/([A-Z])/g, ' $1')
+                            .replace(/^./, (str) => str.toUpperCase());
+                        settingsList.push({
+                            id: `${category}:${actionId}`, // Composite ID for callback
+                            label: actionLabel,
+                            value: currentKey,
+                            defaultValue: defaultKey, // Pass default for display
+                            type: 'keybind', // Special type for keybind input
+                            category: 'ui',
+                            active: isModified, // Highlight modified keys
+                        });
+                    });
+                    settingsList.push({
+                        id: `spacer_${category}`,
+                        label: '',
+                        value: '',
+                        type: 'info',
+                        category: 'ui',
+                    });
+                });
+                return settingsList;
+            }
+            default:
+                return [];
+        }
+    }, [
+        currentSection,
+        settings,
+        uiState.theme.name,
+        currentModel,
+        capabilityProviders,
+        activeKeybinds,
+        defaultKeybinds,
+    ]);
+    // Is focusable helper
+    const isFocusable = (setting) => {
+        return setting.type !== 'info' && setting.type !== 'header' && !setting.muted;
+    };
+    // Navigation handlers
+    const handleNavigateUp = () => {
+        if (focusedColumn === 'right' && !isEditingValue) {
+            // Navigate settings in right column - find previous focusable
+            let nextIdx = selectedSettingIndex - 1;
+            while (nextIdx >= 0 && !isFocusable(currentSettings[nextIdx])) {
+                nextIdx--;
+            }
+            if (nextIdx >= 0) {
+                setSelectedSettingIndex(nextIdx);
+                // Update scroll offset if needed
+                if (nextIdx < rightScrollOffset) {
+                    setRightScrollOffset(nextIdx);
+                }
+            }
+            return;
+        }
+        if (focusedColumn === 'left') {
+            // Left column navigation
+            if (isOnExitItem) {
+                return; // Already at top
+            }
+            if (selectedSectionIndex > 0) {
+                setSelectedSectionIndex((prev) => prev - 1);
+                setSelectedSettingIndex(0); // Reset setting index when changing section
+                setRightScrollOffset(0); // Reset scroll offset
+            }
+            else {
+                // Move to Exit
+                setIsOnExitItem(true);
+            }
+        }
+    };
+    const handleNavigateDown = () => {
+        if (focusedColumn === 'right' && !isEditingValue) {
+            // Navigate settings in right column - find next focusable
+            let nextIdx = selectedSettingIndex + 1;
+            while (nextIdx < currentSettings.length && !isFocusable(currentSettings[nextIdx])) {
+                nextIdx++;
+            }
+            if (nextIdx < currentSettings.length) {
+                setSelectedSettingIndex(nextIdx);
+                // Update scroll offset if needed
+                if (nextIdx >= rightScrollOffset + WINDOW_SIZE) {
+                    setRightScrollOffset(nextIdx - WINDOW_SIZE + 1);
+                }
+            }
+            return;
+        }
+        if (focusedColumn === 'left') {
+            // Left column navigation
+            if (isOnExitItem) {
+                // Move from Exit to first section
+                setIsOnExitItem(false);
+                setSelectedSectionIndex(0);
+                setSelectedSettingIndex(0);
+                return;
+            }
+            if (selectedSectionIndex < sections.length - 1) {
+                setSelectedSectionIndex((prev) => prev + 1);
+                setSelectedSettingIndex(0); // Reset setting index when changing section
+                setRightScrollOffset(0); // Reset scroll offset
+            }
+        }
+    };
+    const handleSwitchColumn = (direction) => {
+        if (isEditingValue)
+            return; // Can't switch while editing
+        if (direction === 'right' && focusedColumn === 'left' && currentSection) {
+            // Move to right column - find first focusable
+            let firstFocusable = 0;
+            while (firstFocusable < currentSettings.length &&
+                !isFocusable(currentSettings[firstFocusable])) {
+                firstFocusable++;
+            }
+            setFocusedColumn('right');
+            setSelectedSettingIndex(firstFocusable < currentSettings.length ? firstFocusable : 0);
+        }
+        else if (direction === 'left' && focusedColumn === 'right') {
+            setFocusedColumn('left');
+        }
+    };
+    const handleToggleSetting = () => {
+        if (focusedColumn !== 'right' || currentSettings.length === 0)
+            return;
+        const setting = currentSettings[selectedSettingIndex];
+        if (setting.type === 'toggle') {
+            if (setting.category === 'llm' || setting.category === 'prompt') {
+                updateLLMSetting(setting.id, !setting.value);
+            }
+            else {
+                updateUISetting(setting.id, !setting.value);
+            }
+        }
+    };
+    const handleEnterOnSetting = () => {
+        if (focusedColumn !== 'right' || currentSettings.length === 0)
+            return;
+        const setting = currentSettings[selectedSettingIndex];
+        if (setting.type === 'action') {
+            if (setting.id === 'restore_defaults') {
+                restoreDefault();
+            }
+        }
+        else if (setting.type === 'keybind') {
+            setIsEditingValue(true);
+            setEditValue(String(setting.value));
+        }
+        else if (setting.type === 'numeric') {
+            setIsEditingValue(true);
+            setEditValue(String(setting.value));
+        }
+        else if (setting.type === 'toggle') {
+            handleToggleSetting();
+        }
+        else if (setting.type === 'choice') {
+            if (setting.id === 'model') {
+                setCurrentModel(String(setting.value));
+            }
+            if (setting.category === 'llm') {
+                updateLLMSetting(setting.id, String(setting.value));
+            }
+            else {
+                updateUISetting(setting.id, String(setting.value));
+            }
+        }
+        else if (setting.type === 'select') {
+            // Toggle through options
+            const options = getOptionsForSetting(setting.id);
+            const currentIndex = options.indexOf(String(setting.value));
+            const nextIndex = (currentIndex + 1) % options.length;
+            const nextValue = options[nextIndex];
+            if (setting.id === 'model') {
+                setCurrentModel(nextValue);
+            }
+            if (setting.category === 'llm') {
+                // Check for capability binding
+                if (Object.values(ToolCapability).includes(setting.id)) {
+                    updateToolRouting(`bindings.${setting.id}`, nextValue === '(auto)' ? undefined : nextValue);
+                    return;
+                }
+                updateLLMSetting(setting.id, nextValue);
+            }
+            else {
+                updateUISetting(setting.id, nextValue);
+            }
+        }
+    };
+    const handleSaveEdit = () => {
+        if (!isEditingValue)
+            return;
+        const setting = currentSettings[selectedSettingIndex];
+        if (setting.type === 'keybind') {
+            // Validate conflict
+            const conflict = checkConflict(editValue);
+            // If conflict exists and it's not the same action we are editing
+            if (conflict && `${conflict.category}:${conflict.id}` !== setting.id) {
+                // For now, simple console warn, better UI needed for alert
+                // We can just append "CONFLICT!" to the value temporarily or block
+                // But for MVP, let's just save. The user sees duplicates in the list.
+                // Ideally we would show a toast/modal.
+            }
+            const [cat, id] = setting.id.split(':');
+            if (cat && id) {
+                setUserBind(cat, id, editValue);
+            }
+        }
+        else {
+            const numValue = parseFloat(editValue);
+            if (!isNaN(numValue)) {
+                if (setting.category === 'llm') {
+                    updateLLMSetting(setting.id, numValue);
+                }
+                else {
+                    updateUISetting(setting.id, numValue);
+                }
+            }
+        }
+        setIsEditingValue(false);
+        setEditValue('');
+    };
+    const handleCancelEdit = () => {
+        setIsEditingValue(false);
+        setEditValue('');
+    };
+    /**
+     * Keyboard Navigation
+     *
+     * Navigation Keys:
+     * - ↑/↓: Navigate settings
+     * - ←/→: Switch between columns
+     * - Enter: Edit setting or toggle
+     * - ESC: Cancel edit (if editing) or exit to nav bar (handled by useTabEscapeHandler)
+     * - 0: Exit to nav bar (handled by useTabEscapeHandler)
+     *
+     * Edit Mode:
+     * - Enter: Save changes
+     * - ESC: Cancel changes
+     * - Backspace/Delete: Remove last character
+     * - Any input: Add to value (numbers for numeric, any for keybinds)
+     *
+     * Note: ESC handling when not editing is now managed by the shared useTabEscapeHandler hook
+     * for consistent hierarchical navigation across all tab components.
+     */
+    useInput((input, key) => {
+        if (!hasFocus)
+            return;
+        if (isEditingValue) {
+            const setting = currentSettings[selectedSettingIndex];
+            // In edit mode
+            if (key.return) {
+                handleSaveEdit();
+            }
+            else if (key.escape) {
+                handleCancelEdit();
+            }
+            else if (key.backspace || key.delete) {
+                setEditValue((prev) => prev.slice(0, -1));
+            }
+            else if (input) {
+                // Allow any input for keybinds, restrict to numbers for numeric
+                if (setting.type === 'keybind') {
+                    setEditValue((prev) => prev + input);
+                }
+                else if (/[0-9.]/.test(input)) {
+                    setEditValue((prev) => prev + input);
+                }
+            }
+        }
+        else {
+            // Normal navigation
+            if (key.upArrow) {
+                handleNavigateUp();
+            }
+            else if (key.downArrow) {
+                handleNavigateDown();
+            }
+            else if (key.leftArrow) {
+                handleSwitchColumn('left');
+            }
+            else if (key.rightArrow) {
+                handleSwitchColumn('right');
+            }
+            else if (key.return) {
+                if (focusedColumn === 'right') {
+                    handleEnterOnSetting();
+                }
+            }
+            // Note: ESC and '0' are now handled by useTabEscapeHandler
+        }
+    }, { isActive: hasFocus });
+    return (_jsxs(Box, { flexDirection: "column", height: "100%", width: windowWidth, children: [_jsx(Box, { borderStyle: uiState.theme.border.style, borderColor: hasFocus ? uiState.theme.text.accent : uiState.theme.text.secondary, paddingX: 1, flexShrink: 0, children: _jsxs(Box, { justifyContent: "space-between", width: "100%", overflow: "hidden", children: [_jsx(Box, { flexShrink: 0, children: _jsx(Text, { bold: true, color: hasFocus ? uiState.theme.text.accent : uiState.theme.text.primary, children: "Settings" }) }), _jsx(Box, { flexShrink: 1, marginLeft: 1, children: _jsx(Text, { wrap: "truncate-end", color: hasFocus ? uiState.theme.text.primary : uiState.theme.text.secondary, children: "\u2191\u2193:Nav \u2190\u2192:Column Enter:Edit 0/Esc:Exit" }) })] }) }), _jsxs(Box, { flexGrow: 1, overflow: "hidden", flexDirection: "row", width: "100%", children: [_jsxs(Box, { flexDirection: "column", width: absoluteLeftWidth ?? '30%', borderStyle: uiState.theme.border.style, borderColor: focusedColumn === 'left' && hasFocus
+                            ? uiState.theme.border.active
+                            : uiState.theme.border.primary, paddingY: 1, children: [scrollOffset > 0 && (_jsxs(_Fragment, { children: [_jsx(Box, { justifyContent: "center", paddingX: 1, children: _jsx(Text, { color: uiState.theme.text.secondary, children: "\u25B2 Scroll up for more" }) }), _jsx(Text, { children: " " })] })), _jsxs(Box, { flexDirection: "column", flexGrow: 1, paddingX: 1, children: [_jsx(Text, { children: " " }), _jsx(Box, { children: _jsx(Text, { bold: isOnExitItem && hasFocus, color: isOnExitItem && hasFocus ? uiState.theme.text.accent : uiState.theme.text.primary, children: "\u2190 Exit" }) }), _jsx(Text, { children: " " }), _jsx(Text, { children: " " }), sections.map((section, idx) => {
+                                        const isSelected = !isOnExitItem && idx === selectedSectionIndex && focusedColumn === 'left';
+                                        return (_jsx(Box, { marginTop: idx > 0 ? 1 : 0, children: _jsx(Text, { bold: isSelected && hasFocus, color: isSelected && hasFocus
+                                                    ? uiState.theme.text.accent
+                                                    : uiState.theme.text.primary, children: section.name }) }, section.id));
+                                    })] }), scrollOffset + WINDOW_SIZE < sections.length + 1 && (_jsxs(_Fragment, { children: [_jsx(Text, { children: " " }), _jsx(Box, { justifyContent: "center", paddingX: 1, children: _jsx(Text, { color: uiState.theme.text.secondary, children: "\u25BC Scroll down for more" }) })] }))] }), _jsx(Box, { flexDirection: "column", width: absoluteRightWidth ?? '70%', borderStyle: uiState.theme.border.style, borderColor: focusedColumn === 'right' && hasFocus
+                            ? uiState.theme.border.active
+                            : uiState.theme.border.primary, paddingX: 2, paddingY: 1, children: currentSection ? (_jsxs(_Fragment, { children: [_jsxs(Box, { paddingLeft: 1, justifyContent: "space-between", width: "100%", children: [_jsx(Text, { bold: true, color: uiState.theme.text.accent, children: currentSection.id === 'model' ? 'Selected LLM Model' : currentSection.name }), rightScrollOffset > 0 && (_jsx(Box, { marginRight: 1, children: _jsx(Text, { color: uiState.theme.text.secondary, children: "\u25B2 More" }) }))] }), _jsx(Text, { children: " " }), _jsx(Box, { flexDirection: "column", flexGrow: 1, children: currentSettings
+                                        .slice(rightScrollOffset, rightScrollOffset + WINDOW_SIZE)
+                                        .map((setting, sliceIdx) => {
+                                        const idx = sliceIdx + rightScrollOffset;
+                                        const isSelected = focusedColumn === 'right' && idx === selectedSettingIndex;
+                                        const isEditing = isEditingValue && isSelected;
+                                        const prevSetting = idx > 0 ? currentSettings[idx - 1] : null;
+                                        if (setting.type === 'header') {
+                                            return (_jsx(Box, { marginTop: 1, paddingLeft: 1, children: _jsx(Text, { bold: true, color: setting.muted
+                                                        ? uiState.theme.text.secondary
+                                                        : uiState.theme.text.accent, dimColor: setting.muted, children: setting.label }) }, `header-${idx}`));
+                                        }
+                                        if (setting.type === 'info') {
+                                            return (_jsxs(Box, { marginTop: idx > 0 && currentSettings[idx - 1].type !== 'header' ? 1 : 0, paddingLeft: 1, children: [_jsx(Box, { width: "30%", children: _jsxs(Text, { color: setting.muted
+                                                                ? uiState.theme.text.secondary
+                                                                : uiState.theme.text.secondary, dimColor: setting.muted, children: [setting.label, setting.label ? ':' : ''] }) }), _jsx(Box, { flexGrow: 1, flexShrink: 1, children: _jsx(Text, { color: setting.muted || setting.muted_value
+                                                                ? uiState.theme.text.secondary
+                                                                : uiState.theme.text.primary, wrap: "wrap", dimColor: setting.muted || setting.muted_value, children: String(setting.value) }) })] }, `info-${idx}`));
+                                        }
+                                        // Determine if we should add marginTop
+                                        const isCompactChoice = setting.type === 'choice' && prevSetting && prevSetting.type === 'choice';
+                                        const marginTop = idx > 0 && prevSetting && prevSetting.type !== 'header' && !isCompactChoice
+                                            ? 1
+                                            : 0;
+                                        return (_jsx(Box, { marginTop: marginTop, paddingLeft: 1, children: setting.type === 'choice' ? (_jsx(Box, { children: _jsxs(Text, { bold: isSelected && hasFocus, color: setting.muted
+                                                        ? uiState.theme.text.secondary
+                                                        : isSelected && hasFocus
+                                                            ? uiState.theme.text.accent
+                                                            : uiState.theme.text.primary, dimColor: setting.muted, children: [setting.active ? '●' : '○', " ", setting.label] }) })) : (_jsxs(_Fragment, { children: [_jsx(Box, { width: "40%", children: _jsxs(Text, { bold: isSelected && hasFocus, color: setting.muted
+                                                                ? uiState.theme.text.secondary
+                                                                : isSelected && hasFocus
+                                                                    ? uiState.theme.text.accent
+                                                                    : uiState.theme.text.primary, dimColor: setting.muted, children: [setting.label, ":"] }) }), _jsx(Box, { width: setting.type === 'keybind' ? '25%' : undefined, children: isEditing ? (_jsxs(Text, { color: uiState.theme.text.accent, children: ["[", editValue, "_] ", _jsx(Text, { dimColor: true, children: "\u21B5" })] })) : (_jsx(Text, { color: setting.muted
+                                                                ? uiState.theme.text.secondary
+                                                                : uiState.theme.text.primary, dimColor: setting.muted, children: setting.type === 'toggle'
+                                                                ? setting.value
+                                                                    ? '✓ Enabled'
+                                                                    : '✗ Disabled'
+                                                                : String(setting.value) })) }), setting.type === 'keybind' &&
+                                                        setting.defaultValue !== undefined &&
+                                                        !isEditing && (_jsx(Box, { children: _jsxs(Text, { dimColor: true, color: uiState.theme.text.secondary, children: ["(Def: ", String(setting.defaultValue), ")"] }) }))] })) }, `${setting.id}-${idx}`));
+                                    }) }), _jsx(Box, { justifyContent: "flex-end", width: "100%", children: rightScrollOffset + WINDOW_SIZE < currentSettings.length ? (_jsx(Box, { marginRight: 1, children: _jsx(Text, { color: uiState.theme.text.secondary, children: "\u25BC More" }) })) : (_jsx(Box, { height: 1 }) // Spacer to keep layout stable
+                                    ) })] })) : (_jsx(Text, { color: uiState.theme.text.secondary, children: "Select a section to view settings" })) })] })] }));
+}
+//# sourceMappingURL=SettingsPanel.js.map