osai-agent 4.0.0

package/src/ui/components/ProviderMenu.js

@@ -0,0 +1,1095 @@
+import React, { useState, useEffect, useMemo } from 'react';
+import { Box, Text, useInput, useWindowSize } from 'ink';
+import { h } from '../h.js';
+import { InputShell } from './InputShell.js';
+import { isOnlySgrMouseInput } from '../mouse-scroll.js';
+
+const MAIN_ACTIONS = [
+  { name: 'Select Provider',    desc: 'Choose from the provider catalog',              action: 'catalog' },
+  { name: 'Switch Provider',    desc: 'Quick-switch between configured providers',     action: 'switch_provider' },
+  { name: 'Current Provider',   desc: 'Show active provider and model',                action: 'show' },
+  { name: 'Switch Model',       desc: 'Change model of a configured provider',         action: 'switch_model' },
+  { name: 'Update API Key',     desc: 'Change API key of a configured provider',       action: 'update_key' },
+  { name: 'Reset to Default',   desc: 'Switch back to OS AI Agent (auto)',             action: 'reset' },
+];
+
+const TITLE = ' Provider Management';
+
+const LOCAL_PROVIDERS = [
+  { id: 'openai',      name: 'OpenAI',          sdk: 'openai',    needsKey: true,  needsBaseUrl: false, freeTier: false },
+  { id: 'anthropic',   name: 'Anthropic',       sdk: 'anthropic', needsKey: true,  needsBaseUrl: false, freeTier: false },
+  { id: 'gemini',      name: 'Google Gemini',   sdk: 'gemini',    needsKey: true,  needsBaseUrl: false, freeTier: true },
+  { id: 'groq',        name: 'Groq',            sdk: 'openai',    needsKey: true,  needsBaseUrl: false, freeTier: true },
+  { id: 'mistral',     name: 'Mistral AI',      sdk: 'openai',    needsKey: true,  needsBaseUrl: false, freeTier: false },
+  { id: 'deepseek',    name: 'DeepSeek',        sdk: 'openai',    needsKey: true,  needsBaseUrl: false, freeTier: false },
+  { id: 'xai',         name: 'xAI (Grok)',      sdk: 'openai',    needsKey: true,  needsBaseUrl: false, freeTier: false },
+  { id: 'cohere',      name: 'Cohere',          sdk: 'openai',    needsKey: true,  needsBaseUrl: false, freeTier: false },
+  { id: 'perplexity',  name: 'Perplexity',      sdk: 'openai',    needsKey: true,  needsBaseUrl: false, freeTier: false },
+  { id: 'together',    name: 'Together AI',     sdk: 'openai',    needsKey: true,  needsBaseUrl: false, freeTier: false },
+  { id: 'fireworks',   name: 'Fireworks AI',    sdk: 'openai',    needsKey: true,  needsBaseUrl: false, freeTier: false },
+  { id: 'cerebras',    name: 'Cerebras',        sdk: 'openai',    needsKey: true,  needsBaseUrl: false, freeTier: true },
+  { id: 'openrouter',  name: 'OpenRouter',      sdk: 'openai',    needsKey: true,  needsBaseUrl: false, freeTier: false },
+  { id: 'huggingface', name: 'Hugging Face',    sdk: 'openai',    needsKey: true,  needsBaseUrl: false, freeTier: true },
+  { id: 'github',      name: 'GitHub Models',   sdk: 'openai',    needsKey: true,  needsBaseUrl: false, freeTier: true },
+  { id: 'siliconflow', name: 'SiliconFlow',     sdk: 'openai',    needsKey: true,  needsBaseUrl: false, freeTier: true },
+  { id: 'hyperbolic',  name: 'Hyperbolic',      sdk: 'openai',    needsKey: true,  needsBaseUrl: false, freeTier: false },
+  { id: 'novita',      name: 'Novita AI',       sdk: 'openai',    needsKey: true,  needsBaseUrl: false, freeTier: false },
+  { id: 'deepinfra',   name: 'DeepInfra',       sdk: 'openai',    needsKey: true,  needsBaseUrl: false, freeTier: false },
+  { id: 'codestral',   name: 'Codestral',       sdk: 'openai',    needsKey: true,  needsBaseUrl: false, freeTier: false },
+  { id: 'qwen',        name: 'Alibaba Qwen',    sdk: 'openai',    needsKey: true,  needsBaseUrl: false, freeTier: false },
+  { id: 'moonshot',    name: 'Moonshot (Kimi)', sdk: 'openai',    needsKey: true,  needsBaseUrl: false, freeTier: false },
+  { id: 'zhipu',       name: 'Zhipu AI (GLM)',  sdk: 'openai',    needsKey: true,  needsBaseUrl: false, freeTier: false },
+  { id: 'yi',          name: '01.AI (Yi)',      sdk: 'openai',    needsKey: true,  needsBaseUrl: false, freeTier: false },
+  { id: 'baidu',       name: 'Baidu ERNIE',     sdk: 'openai',    needsKey: true,  needsBaseUrl: false, freeTier: false },
+  { id: 'nvidia',      name: 'NVIDIA NIM',      sdk: 'openai',    needsKey: true,  needsBaseUrl: false, freeTier: true },
+  { id: 'nebius',      name: 'Nebius AI',       sdk: 'openai',    needsKey: true,  needsBaseUrl: false, freeTier: false },
+  { id: 'custom',      name: 'Custom Provider', sdk: 'openai',    needsKey: true,  needsBaseUrl: true,  freeTier: false },
+  { id: 'azure',       name: 'Azure OpenAI',    sdk: 'openai',    needsKey: true,  needsBaseUrl: true,  freeTier: false },
+  { id: 'cloudflare',  name: 'Cloudflare AI',   sdk: 'openai',    needsKey: true,  needsBaseUrl: true,  freeTier: true },
+  { id: 'bedrock',     name: 'AWS Bedrock',     sdk: 'openai',    needsKey: true,  needsBaseUrl: true,  freeTier: false },
+  { id: 'vertex',      name: 'Vertex AI',       sdk: 'openai',    needsKey: true,  needsBaseUrl: true,  freeTier: false },
+  { id: 'ollama',      name: 'Ollama (Local)',  sdk: 'openai',    needsKey: false, needsBaseUrl: false, freeTier: true },
+  { id: 'ollama-cloud',name: 'Ollama Cloud',    sdk: 'openai',    needsKey: true,  needsBaseUrl: false, freeTier: true },
+  { id: 'lmstudio',    name: 'LM Studio',       sdk: 'openai',    needsKey: false, needsBaseUrl: false, freeTier: true },
+  { id: 'vllm',        name: 'vLLM (Self-host)',sdk: 'openai',    needsKey: false, needsBaseUrl: true,  freeTier: true },
+];
+
+export function ProviderMenu({ visible, onSelect, onCancel, serverUrl, token, currentProvider, isLocal = false }) {
+  const [phase, setPhase] = useState('menu');
+  const [menuCursor, setMenuCursor] = useState(0);
+  const [menuQuery, setMenuQuery] = useState('');
+
+  const [catalog, setCatalog] = useState([]);
+  const [catalogLoading, setCatalogLoading] = useState(false);
+  const [catalogError, setCatalogError] = useState(null);
+  const [catalogCursor, setCatalogCursor] = useState(0);
+  const [catalogQuery, setCatalogQuery] = useState('');
+
+  const [selectedProvider, setSelectedProvider] = useState(null);
+  const [modelsData, setModelsData] = useState(null);
+  const [modelsLoading, setModelsLoading] = useState(false);
+  const [modelsCursor, setModelsCursor] = useState(0);
+  const [modelsQuery, setModelsQuery] = useState('');
+
+  const [apiKeyInput, setApiKeyInput] = useState('');
+  const [selectedModel, setSelectedModel] = useState(null);
+  const [settingUp, setSettingUp] = useState(false);
+  const [settingError, setSettingError] = useState(null);
+
+  // Configured providers list (for Switch Model / Update API Key / Switch Provider)
+  const [configuredProviders, setConfiguredProviders] = useState([]);
+  const [configuredLoading, setConfiguredLoading] = useState(false);
+  const [configuredError, setConfiguredError] = useState(null);
+  const [configuredCursor, setConfiguredCursor] = useState(0);
+  const [configuredQuery, setConfiguredQuery] = useState('');
+  const [actionType, setActionType] = useState(null);
+
+  // Local mode: base URL input (for providers like vllm, custom, azure, etc.)
+  const [localBaseUrlInput, setLocalBaseUrlInput] = useState('');
+
+  // Filtered lists
+  const filteredMenu = useMemo(() => {
+    const actions = isLocal
+      ? MAIN_ACTIONS.filter(a => a.action !== 'reset')
+      : MAIN_ACTIONS;
+    if (!menuQuery) return actions;
+    const q = menuQuery.toLowerCase();
+    return actions.filter(o => o.name.toLowerCase().includes(q) || o.desc.toLowerCase().includes(q));
+  }, [menuQuery, isLocal]);
+
+  const filteredCatalog = useMemo(() => {
+    if (!catalogQuery) return catalog;
+    const q = catalogQuery.toLowerCase();
+    return catalog.filter(p => p.name.toLowerCase().includes(q) || p.id.toLowerCase().includes(q) || (p.sdk_type || '').toLowerCase().includes(q));
+  }, [catalog, catalogQuery]);
+
+  const filteredModels = useMemo(() => {
+    if (!modelsData?.models) return [];
+    const models = modelsData.models.map(m => typeof m === 'string' ? m : (m.id || m.name || m));
+    if (!modelsQuery) return models;
+    const q = modelsQuery.toLowerCase();
+    return models.filter(m => m.toLowerCase().includes(q));
+  }, [modelsData, modelsQuery]);
+
+  const allModels = useMemo(
+    () => ['__default__ (auto)', ...filteredModels],
+    [filteredModels]
+  );
+
+  const resolveModelAtCursor = (cursor) => {
+    const choice = allModels[cursor];
+    if (!choice || choice === '__default__ (auto)') return '__default__';
+    return choice;
+  };
+
+  const filteredConfigured = useMemo(() => {
+    if (!configuredQuery) return configuredProviders;
+    const q = configuredQuery.toLowerCase();
+    return configuredProviders.filter(p => p.name.toLowerCase().includes(q) || p.type.toLowerCase().includes(q));
+  }, [configuredProviders, configuredQuery]);
+
+  // Clamp cursors
+  useEffect(() => {
+    if (menuCursor >= filteredMenu.length) setMenuCursor(Math.max(0, filteredMenu.length - 1));
+  }, [filteredMenu.length]);
+  useEffect(() => {
+    if (catalogCursor >= filteredCatalog.length) setCatalogCursor(Math.max(0, filteredCatalog.length - 1));
+  }, [filteredCatalog.length]);
+  useEffect(() => {
+    if (modelsCursor >= allModels.length) setModelsCursor(Math.max(0, allModels.length - 1));
+  }, [allModels.length]);
+  useEffect(() => {
+    if (configuredCursor >= filteredConfigured.length) setConfiguredCursor(Math.max(0, filteredConfigured.length - 1));
+  }, [filteredConfigured.length]);
+
+  // Fetch catalog
+  const fetchCatalog = () => {
+    setCatalogLoading(true);
+    setCatalogError(null);
+    (async () => {
+      try {
+        if (isLocal) {
+          const data = LOCAL_PROVIDERS.map(p => ({
+            id: p.id,
+            name: p.name,
+            sdk_type: p.sdk,
+            free_tier: p.freeTier,
+            models_count: null,
+            active: false,
+            base_url: null,
+            needs_key: p.needsKey,
+            needs_base_url: p.needsBaseUrl,
+          }));
+          setCatalog(data);
+          setPhase('catalog');
+        } else {
+          const res = await fetch(`${serverUrl}/api/provider/catalog`, {
+            headers: { Authorization: `Bearer ${token}` }
+          });
+          if (!res.ok) throw new Error(`${res.status}: ${await res.text()}`);
+          const data = await res.json();
+          setCatalog(data);
+          setPhase('catalog');
+        }
+      } catch (err) {
+        setCatalogError(err.message);
+        setPhase('catalog');
+      } finally {
+        setCatalogLoading(false);
+      }
+    })();
+  };
+
+  // Fetch configured providers
+  const fetchConfiguredProviders = (action) => {
+    setActionType(action);
+    setConfiguredLoading(true);
+    setConfiguredError(null);
+    setConfiguredProviders([]);
+    (async () => {
+      try {
+        if (isLocal) {
+          const { getAllLocalProviders } = await import('../../commands/provider.js');
+          const providers = getAllLocalProviders();
+          const mapped = providers.map(p => ({
+            name: p.type,
+            type: p.type,
+            model: p.model,
+            baseUrl: p.baseUrl,
+            apiKey: p.apiKey,
+            key_masked: p.apiKey ? p.apiKey.slice(0, 3) + '...' + p.apiKey.slice(-4) : 'N/A',
+            active: p.active,
+          }));
+          const keylessProviders = ['ollama', 'lmstudio', 'vllm'];
+          const filtered = action === 'update_key'
+            ? mapped.filter(p => !keylessProviders.includes(p.type) && p.key_masked !== 'N/A')
+            : mapped;
+          setConfiguredProviders(filtered);
+          setPhase('configured');
+        } else {
+          const res = await fetch(`${serverUrl}/api/provider/keys`, {
+            headers: { Authorization: `Bearer ${token}` }
+          });
+          if (!res.ok) throw new Error(`${res.status}: ${await res.text()}`);
+          const data = await res.json();
+          const keylessProviders = ['osai', 'ollama', 'lmstudio', 'vllm'];
+          const filtered = action === 'update_key'
+            ? data.filter(p => !keylessProviders.includes(p.type) && p.key_masked)
+            : data;
+          setConfiguredProviders(filtered);
+          setPhase('configured');
+        }
+      } catch (err) {
+        setConfiguredError(err.message);
+        setPhase('configured');
+      } finally {
+        setConfiguredLoading(false);
+      }
+    })();
+  };
+
+  // Fetch models for a provider (server mode)
+  const fetchModels = (provider, nextPhase) => {
+    setSelectedProvider(provider);
+    setModelsLoading(true);
+    setModelsData(null);
+    setModelsCursor(0);
+    setModelsQuery('');
+    setSelectedModel(null);
+    (async () => {
+      try {
+        const providerId = provider.type || provider.id;
+        const res = await fetch(`${serverUrl}/api/provider/models/${providerId}`, {
+          headers: { Authorization: `Bearer ${token}` },
+        });
+        if (!res.ok) throw new Error(`${res.status}: ${await res.text()}`);
+        const data = await res.json();
+        setModelsData(data);
+        setPhase(nextPhase || 'models');
+      } catch (err) {
+        setModelsData({ provider: provider.type || provider.id, models: [], source: 'error', warning: err.message });
+        setPhase(nextPhase || 'models');
+      } finally {
+        setModelsLoading(false);
+      }
+    })();
+  };
+
+  // Fetch models for a provider (local mode)
+  const fetchModelsLocal = async (provider, apiKey, baseUrl) => {
+    setSelectedProvider(provider);
+    setModelsLoading(true);
+    setModelsData(null);
+    setModelsCursor(0);
+    setModelsQuery('');
+    setPhase('models');
+    try {
+      const { fetchLocalModels } = await import('../../llm/direct.js');
+      const providerId = provider.type || provider.id;
+      const models = await fetchLocalModels({ type: providerId, apiKey, baseUrl });
+      setModelsData({ provider: provider.name || providerId, models, source: 'live' });
+    } catch (err) {
+      setModelsData({ provider: provider.name || provider.type || 'provider', models: [], source: 'error', warning: err.message });
+    } finally {
+      setModelsLoading(false);
+    }
+  };
+
+  // Set provider on server (full setup, server mode)
+  const setProvider = async (provider, model, apiKey) => {
+    setSettingUp(true);
+    setSettingError(null);
+    try {
+      const body = { type: provider.id };
+      if (model && model !== '__default__' && model !== '__default__ (auto)') body.model = model;
+      if (apiKey) body.api_key = apiKey;
+      const res = await fetch(`${serverUrl}/api/provider`, {
+        method: 'PUT',
+        headers: {
+          Authorization: `Bearer ${token}`,
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(body)
+      });
+      const data = await res.json();
+      if (!res.ok) {
+        setSettingError(data.error || 'Failed to set provider');
+        setSettingUp(false);
+        return;
+      }
+      const modelDisplay = data.model ? ` | Model: ${data.model}` : '';
+      const keyDisplay = data.key ? ` | Key: ${data.key}` : '';
+      onSelect({
+        action: 'provider_set',
+        content: `**Provider set to ${data.type}**${modelDisplay}${keyDisplay}`,
+        providerType: data.type,
+        providerModel: data.model
+      });
+    } catch (err) {
+      setSettingError(err.message);
+    } finally {
+      setSettingUp(false);
+    }
+  };
+
+  // Patch model only (Switch Model flow, server mode)
+  const patchModel = async (provider, model) => {
+    setSettingUp(true);
+    setSettingError(null);
+    try {
+      const res = await fetch(`${serverUrl}/api/provider/model`, {
+        method: 'PATCH',
+        headers: {
+          Authorization: `Bearer ${token}`,
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ type: provider.type || provider.id, model })
+      });
+      const data = await res.json();
+      if (!res.ok) {
+        setSettingError(data.error || 'Failed to update model');
+        setSettingUp(false);
+        return;
+      }
+      onSelect({
+        action: 'model_updated',
+        content: `**Model changed to ${data.model} for ${data.type}**`,
+        providerType: data.type,
+        providerModel: data.model
+      });
+    } catch (err) {
+      setSettingError(err.message);
+    } finally {
+      setSettingUp(false);
+    }
+  };
+
+  // Patch API key only (Update API Key flow, server mode)
+  const patchKey = async (type, newKey) => {
+    setSettingUp(true);
+    setSettingError(null);
+    try {
+      const res = await fetch(`${serverUrl}/api/provider/key`, {
+        method: 'PATCH',
+        headers: {
+          Authorization: `Bearer ${token}`,
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ type, api_key: newKey })
+      });
+      const data = await res.json();
+      if (!res.ok) {
+        setSettingError(data.error || 'Failed to update API key');
+        setSettingUp(false);
+        return;
+      }
+      onSelect({
+        action: 'key_updated',
+        content: `**API key updated for ${data.type}** | Key: ${data.key}`,
+        providerType: data.type
+      });
+    } catch (err) {
+      setSettingError(err.message);
+    } finally {
+      setSettingUp(false);
+    }
+  };
+
+  // Handle model selection (Enter on a model)
+  const handleModelSelect = async (model) => {
+    const modelVal = model === '__default__' || model === '__default__ (auto)' ? null : model;
+    if (isLocal) {
+      const { saveLocalProvider } = await import('../../commands/provider.js');
+      try {
+        saveLocalProvider(
+          selectedProvider.id || selectedProvider.type,
+          apiKeyInput.trim() || null,
+          modelVal,
+          localBaseUrlInput.trim() || null
+        );
+      } catch {}
+      onSelect({ action: 'set_local', providerType: selectedProvider.id || selectedProvider.type, model: modelVal });
+      resetAll();
+    } else {
+      setSelectedModel(model);
+      const keylessProviders = ['osai', 'ollama', 'lmstudio', 'vllm'];
+      const needsKey = !keylessProviders.includes(selectedProvider.id) && selectedProvider.requires_key !== false;
+      if (needsKey) {
+        setApiKeyInput('');
+        setPhase('api_key');
+      } else {
+        setProvider(selectedProvider, modelVal, null);
+      }
+    }
+  };
+
+  // Handle model selection in switch_model flow
+  const handleSwitchModelSelect = (model) => {
+    const modelVal = model === '__default__' || model === '__default__ (auto)' ? null : model;
+    if (isLocal) {
+      (async () => {
+        const { saveLocalProvider } = await import('../../commands/provider.js');
+        try {
+          saveLocalProvider(selectedProvider.type, selectedProvider.apiKey || null, modelVal, selectedProvider.baseUrl || null);
+        } catch {}
+        onSelect({ action: 'set_local', providerType: selectedProvider.type, model: modelVal });
+        resetAll();
+      })();
+    } else {
+      patchModel(selectedProvider, modelVal);
+    }
+  };
+
+  // Quick switch to a configured provider (server mode)
+  const switchProvider = async (provider) => {
+    setSettingUp(true);
+    setSettingError(null);
+    try {
+      const res = await fetch(`${serverUrl}/api/provider/switch`, {
+        method: 'POST',
+        headers: { Authorization: `Bearer ${token}`, 'Content-Type': 'application/json' },
+        body: JSON.stringify({ type: provider.type || provider.id })
+      });
+      const data = await res.json();
+      if (!res.ok) {
+        setSettingError(data.error || 'Failed to switch provider');
+        setSettingUp(false);
+        return;
+      }
+      const modelDisplay = data.model ? ` | Model: ${data.model}` : '';
+      const keyDisplay = data.key ? ` | Key: ${data.key}` : '';
+      onSelect({
+        action: 'provider_set',
+        content: `**Switched to ${data.type}**${modelDisplay}${keyDisplay}`,
+        providerType: data.type,
+        providerModel: data.model
+      });
+    } catch (err) {
+      setSettingError(err.message);
+      setSettingUp(false);
+    }
+  };
+
+  // Handle configured provider select
+  const handleConfiguredSelect = (provider) => {
+    if (actionType === 'switch_provider') {
+      if (isLocal) {
+        (async () => {
+          const { saveLocalProvider } = await import('../../commands/provider.js');
+          try {
+            saveLocalProvider(provider.type, null, null, null);
+          } catch {}
+          onSelect({ action: 'set_local', providerType: provider.type, model: provider.model || null });
+          resetAll();
+        })();
+      } else {
+        switchProvider(provider);
+      }
+    } else if (actionType === 'switch_model') {
+      if (isLocal) {
+        fetchModelsLocal(provider, provider.apiKey || null, provider.baseUrl || null);
+      } else {
+        fetchModels(provider, 'switch_models');
+      }
+    } else if (actionType === 'update_key') {
+      setSelectedProvider(provider);
+      setApiKeyInput('');
+      setSettingError(null);
+      setPhase('update_key_input');
+    }
+  };
+
+  // Handle update key submission
+  const handleUpdateKeySubmit = () => {
+    const key = apiKeyInput.trim();
+    if (!key) return;
+    if (isLocal) {
+      (async () => {
+        const { saveLocalProvider } = await import('../../commands/provider.js');
+        try {
+          saveLocalProvider(selectedProvider.type, key, null, null);
+        } catch {}
+        onSelect({ action: 'set_local', providerType: selectedProvider.type, model: selectedProvider.model || null });
+        resetAll();
+      })();
+    } else {
+      patchKey(selectedProvider.type, key);
+    }
+  };
+
+  // Handle API key submission (models phase -> key input)
+  const handleApiKeySubmit = () => {
+    const key = apiKeyInput.trim();
+    if (!key) { setSettingError('API key is required'); return; }
+    if (isLocal) {
+      const baseUrl = localBaseUrlInput.trim() || null;
+      fetchModelsLocal(selectedProvider, key, baseUrl);
+    } else {
+      setProvider(selectedProvider, selectedModel, key);
+    }
+  };
+
+  // Handle local API key submission from catalog (enter key, then fetch models)
+  const handleLocalApiKeySubmit = () => {
+    const key = apiKeyInput.trim();
+    if (!key) return;
+    const baseUrl = localBaseUrlInput.trim() || null;
+    fetchModelsLocal(selectedProvider, key, baseUrl);
+  };
+
+  const resetAll = () => {
+    setPhase('menu');
+    setMenuCursor(0);
+    setMenuQuery('');
+    setCatalogCursor(0);
+    setCatalogQuery('');
+    setModelsCursor(0);
+    setModelsQuery('');
+    setSelectedProvider(null);
+    setModelsData(null);
+    setApiKeyInput('');
+    setSelectedModel(null);
+    setSettingUp(false);
+    setSettingError(null);
+    setConfiguredProviders([]);
+    setConfiguredLoading(false);
+    setConfiguredError(null);
+    setConfiguredCursor(0);
+    setConfiguredQuery('');
+    setActionType(null);
+    setLocalBaseUrlInput('');
+  };
+
+  // ── KEYBOARD HANDLING ──
+  useInput((input, key) => {
+    if (!visible) return;
+
+    // === MENU PHASE ===
+    if (phase === 'menu') {
+      if (key.escape) { resetAll(); onCancel(); return; }
+      if (key.upArrow) { setMenuCursor(c => (c > 0 ? c - 1 : filteredMenu.length - 1)); return; }
+      if (key.downArrow) { setMenuCursor(c => (c < filteredMenu.length - 1 ? c + 1 : 0)); return; }
+      if (key.return) {
+        if (filteredMenu.length === 0) { resetAll(); onCancel(); return; }
+        const action = filteredMenu[menuCursor].action;
+        if (action === 'catalog') { fetchCatalog(); return; }
+        if (action === 'show') {
+          onSelect({ action: isLocal ? 'show_local' : 'show' });
+          resetAll();
+          return;
+        }
+        if (action === 'switch_provider') { fetchConfiguredProviders('switch_provider'); return; }
+        if (action === 'switch_model') { fetchConfiguredProviders('switch_model'); return; }
+        if (action === 'update_key') { fetchConfiguredProviders('update_key'); return; }
+        if (action === 'reset') {
+          onSelect({ action: isLocal ? 'reset_local' : 'reset' });
+          resetAll();
+          return;
+        }
+        return;
+      }
+      if (key.backspace || key.delete) { setMenuQuery(q => q.slice(0, -1)); setMenuCursor(0); return; }
+      if (isOnlySgrMouseInput(input)) return;
+      if (input && !key.ctrl && !key.meta) { setMenuQuery(q => q + input); setMenuCursor(0); }
+      return;
+    }
+
+    // === CATALOG PHASE ===
+    if (phase === 'catalog') {
+      if (key.escape) { setPhase('menu'); setCatalogQuery(''); setCatalogCursor(0); return; }
+      if (key.upArrow) { setCatalogCursor(c => (c > 0 ? c - 1 : filteredCatalog.length - 1)); return; }
+      if (key.downArrow) { setCatalogCursor(c => (c < filteredCatalog.length - 1 ? c + 1 : 0)); return; }
+      if (key.return) {
+        if (filteredCatalog.length > 0) {
+          const prov = filteredCatalog[catalogCursor];
+          if (isLocal) {
+            if (prov.needs_base_url) {
+              setSelectedProvider(prov);
+              setLocalBaseUrlInput('');
+              setPhase('base_url');
+            } else if (prov.needs_key) {
+              setSelectedProvider(prov);
+              setApiKeyInput('');
+              setSettingError(null);
+              setPhase('api_key');
+            } else {
+              fetchModelsLocal(prov, null, null);
+            }
+          } else {
+            if (prov.id === 'osai') {
+              setProvider(prov, '__default__', null);
+            } else {
+              fetchModels(prov, 'models');
+            }
+          }
+        }
+        return;
+      }
+      if (key.backspace || key.delete) { setCatalogQuery(q => q.slice(0, -1)); setCatalogCursor(0); return; }
+      if (isOnlySgrMouseInput(input)) return;
+      if (input && !key.ctrl && !key.meta) { setCatalogQuery(q => q + input); setCatalogCursor(0); }
+      return;
+    }
+
+    // === BASE URL PHASE (local mode only) ===
+    if (phase === 'base_url') {
+      if (key.escape) { setPhase('catalog'); setLocalBaseUrlInput(''); setApiKeyInput(''); return; }
+      if (key.return) {
+        const prov = selectedProvider;
+        if (prov?.needs_key) {
+          setPhase('api_key');
+          setApiKeyInput('');
+          setSettingError(null);
+        } else {
+          fetchModelsLocal(prov, null, localBaseUrlInput.trim() || null);
+        }
+        return;
+      }
+      if (key.backspace || key.delete) { setLocalBaseUrlInput(t => t.slice(0, -1)); return; }
+      if (isOnlySgrMouseInput(input)) return;
+      if (input && !key.ctrl && !key.meta) { setLocalBaseUrlInput(t => t + input); }
+      return;
+    }
+
+    // === CONFIGURED PHASE ===
+    if (phase === 'configured') {
+      if (key.escape) { resetAll(); return; }
+      if (key.upArrow) { setConfiguredCursor(c => (c > 0 ? c - 1 : filteredConfigured.length - 1)); return; }
+      if (key.downArrow) { setConfiguredCursor(c => (c < filteredConfigured.length - 1 ? c + 1 : 0)); return; }
+      if (key.return) {
+        if (filteredConfigured.length > 0) {
+          handleConfiguredSelect(filteredConfigured[configuredCursor]);
+        }
+        return;
+      }
+      if (key.backspace || key.delete) { setConfiguredQuery(q => q.slice(0, -1)); setConfiguredCursor(0); return; }
+      if (isOnlySgrMouseInput(input)) return;
+      if (input && !key.ctrl && !key.meta) { setConfiguredQuery(q => q + input); setConfiguredCursor(0); }
+      return;
+    }
+
+    // === MODELS PHASE (full setup) ===
+    if (phase === 'models') {
+      if (modelsLoading) {
+        if (key.escape) { setPhase('catalog'); setModelsQuery(''); setModelsCursor(0); setSelectedProvider(null); setModelsData(null); return; }
+        return;
+      }
+      if (key.escape) { setPhase('catalog'); setModelsQuery(''); setModelsCursor(0); setSelectedProvider(null); return; }
+      if (key.upArrow) { setModelsCursor(c => (c > 0 ? c - 1 : allModels.length - 1)); return; }
+      if (key.downArrow) { setModelsCursor(c => (c < allModels.length - 1 ? c + 1 : 0)); return; }
+      if (key.return) {
+        if (allModels.length > 0) {
+          handleModelSelect(resolveModelAtCursor(modelsCursor));
+        }
+        return;
+      }
+      if (key.backspace || key.delete) { setModelsQuery(q => q.slice(0, -1)); setModelsCursor(0); return; }
+      if (isOnlySgrMouseInput(input)) return;
+      if (input && !key.ctrl && !key.meta) { setModelsQuery(q => q + input); setModelsCursor(0); }
+      return;
+    }
+
+    // === SWITCH MODELS PHASE (model selection for switch_model flow) ===
+    if (phase === 'switch_models') {
+      if (key.escape) { setPhase('configured'); setModelsQuery(''); setModelsCursor(0); setSelectedProvider(null); return; }
+      if (key.upArrow) { setModelsCursor(c => (c > 0 ? c - 1 : allModels.length - 1)); return; }
+      if (key.downArrow) { setModelsCursor(c => (c < allModels.length - 1 ? c + 1 : 0)); return; }
+      if (key.return) {
+        if (allModels.length > 0) {
+          handleSwitchModelSelect(resolveModelAtCursor(modelsCursor));
+        }
+        return;
+      }
+      if (key.backspace || key.delete) { setModelsQuery(q => q.slice(0, -1)); setModelsCursor(0); return; }
+      if (isOnlySgrMouseInput(input)) return;
+      if (input && !key.ctrl && !key.meta) { setModelsQuery(q => q + input); setModelsCursor(0); }
+      return;
+    }
+
+    // === API KEY PHASE (full setup: server mode after model select, local mode before model fetch) ===
+    if (phase === 'api_key') {
+      if (key.escape) {
+        if (isLocal) {
+          if (selectedProvider?.needs_base_url) {
+            setPhase('base_url');
+          } else {
+            setPhase('catalog');
+          }
+        } else {
+          setPhase('models');
+        }
+        setApiKeyInput('');
+        setSettingError(null);
+        return;
+      }
+      if (key.return) {
+        if (isLocal) {
+          handleLocalApiKeySubmit();
+        } else {
+          handleApiKeySubmit();
+        }
+        return;
+      }
+      if (key.backspace || key.delete) { setApiKeyInput(t => t.slice(0, -1)); return; }
+      if (isOnlySgrMouseInput(input)) return;
+      if (input && !key.ctrl && !key.meta) { setApiKeyInput(t => t + input); }
+      return;
+    }
+
+    // === UPDATE KEY INPUT PHASE ===
+    if (phase === 'update_key_input') {
+      if (key.escape) { setPhase('configured'); setApiKeyInput(''); setSettingError(null); return; }
+      if (key.return) { handleUpdateKeySubmit(); return; }
+      if (key.backspace || key.delete) { setApiKeyInput(t => t.slice(0, -1)); return; }
+      if (isOnlySgrMouseInput(input)) return;
+      if (input && !key.ctrl && !key.meta) { setApiKeyInput(t => t + input); }
+      return;
+    }
+  });
+
+  if (!visible) return null;
+
+  const separator = '─'.repeat(52);
+  const { rows } = useWindowSize();
+
+  // === SETTING UP VIEW ===
+  if (settingUp) {
+    return h(Box, { flexDirection: 'column', borderStyle: 'round', borderColor: '#2a2e3f', paddingX: 1, paddingY: 0, marginY: 1 },
+      h(Text, { color: '#7aa2f7', bold: true }, TITLE),
+      h(Text, { color: '#3b3f52' }, separator),
+      h(Box, { marginTop: 1, paddingLeft: 2 },
+        h(Text, { color: '#e0af68' }, `${actionType === 'switch_model' ? 'Updating model' : actionType === 'update_key' ? 'Updating API key' : 'Setting up'} ${selectedProvider?.name || selectedProvider?.type || 'provider'}...`)
+      ),
+    );
+  }
+
+  // === BASE URL INPUT (local mode) ===
+  if (phase === 'base_url') {
+    return h(Box, { flexDirection: 'column', borderStyle: 'round', borderColor: '#2a2e3f', paddingX: 1, paddingY: 0, marginY: 1 },
+      h(Box, { flexDirection: 'row', alignItems: 'center' },
+        h(Text, { color: '#7aa2f7', bold: true }, ` ${selectedProvider?.name || 'Provider'} - Base URL`),
+      ),
+      h(Text, { color: '#3b3f52' }, separator),
+      h(Box, { marginTop: 1, paddingLeft: 2 },
+        h(Text, { color: '#e0af68' }, 'Enter API endpoint URL:')
+      ),
+      h(InputShell, { flexDirection: 'row', marginTop: 1, paddingX: 1 },
+        h(Text, { color: '#7aa2f7' }, '  > '),
+        h(Text, { color: '#c0caf5' }, localBaseUrlInput || 'https://'),
+        h(Text, { color: '#565f89' }, !localBaseUrlInput ? ' Enter your endpoint URL' : '')
+      ),
+      h(Text, { color: '#3b3f52' }, separator),
+      h(Box, { flexDirection: 'row' },
+        h(Text, { color: '#9ece6a' }, ' Enter'), h(Text, { color: '#565f89' }, ' Confirm'),
+        h(Text, { color: '#3b3f52' }, '  '), h(Text, { color: '#9ece6a' }, ' Esc'), h(Text, { color: '#565f89' }, ' Back')
+      ),
+    );
+  }
+
+  // === API KEY VIEW ===
+  if (phase === 'api_key') {
+    const masked = apiKeyInput ? '\u2022'.repeat(apiKeyInput.length) : '';
+    return h(Box, { flexDirection: 'column', borderStyle: 'round', borderColor: '#2a2e3f', paddingX: 1, paddingY: 0, marginY: 1 },
+      h(Box, { flexDirection: 'row', alignItems: 'center' },
+        h(Text, { color: '#7aa2f7', bold: true }, ` ${selectedProvider?.name}`),
+        isLocal
+          ? null
+          : h(Text, { color: '#565f89' }, ` | Model: ${selectedModel || 'default'}`)
+      ),
+      h(Text, { color: '#3b3f52' }, separator),
+      settingError ? h(Box, { paddingLeft: 2, marginTop: 1 }, h(Text, { color: '#f7768e' }, ` Error: ${settingError}`)) : null,
+      h(Box, { marginTop: 1, paddingLeft: 2 },
+        h(Text, { color: '#e0af68' }, 'Enter your API key:')
+      ),
+      h(InputShell, { flexDirection: 'row', marginTop: 1, paddingX: 1 },
+        h(Text, { color: '#7aa2f7' }, '  > '),
+        h(Text, { color: '#c0caf5' }, masked || ' '),
+        h(Text, { color: '#565f89' }, !apiKeyInput ? ' Paste your key here' : '')
+      ),
+      h(Text, { color: '#3b3f52' }, separator),
+      h(Box, { flexDirection: 'row' },
+        h(Text, { color: '#9ece6a' }, ' Enter'), h(Text, { color: '#565f89' }, ' Confirm'),
+        h(Text, { color: '#3b3f52' }, '  '), h(Text, { color: '#9ece6a' }, ' Esc'), h(Text, { color: '#565f89' }, ' Back')
+      ),
+    );
+  }
+
+  // === UPDATE KEY INPUT VIEW ===
+  if (phase === 'update_key_input') {
+    const masked = apiKeyInput ? '\u2022'.repeat(apiKeyInput.length) : '';
+    return h(Box, { flexDirection: 'column', borderStyle: 'round', borderColor: '#2a2e3f', paddingX: 1, paddingY: 0, marginY: 1 },
+      h(Box, { flexDirection: 'row', alignItems: 'center' },
+        h(Text, { color: '#7aa2f7', bold: true }, ` ${selectedProvider?.name} - Update API Key`),
+      ),
+      h(Text, { color: '#3b3f52' }, separator),
+      settingError ? h(Box, { paddingLeft: 2, marginTop: 1 }, h(Text, { color: '#f7768e' }, ` Error: ${settingError}`)) : null,
+      h(Box, { marginTop: 1, paddingLeft: 2, flexDirection: 'row' },
+        h(Text, { color: '#565f89' }, ` Current key: ${selectedProvider?.key_masked || 'none'}`)
+      ),
+      h(Box, { marginTop: 1, paddingLeft: 2 },
+        h(Text, { color: '#e0af68' }, 'Enter new API key:')
+      ),
+      h(InputShell, { flexDirection: 'row', marginTop: 1, paddingX: 1 },
+        h(Text, { color: '#7aa2f7' }, '  > '),
+        h(Text, { color: '#c0caf5' }, masked || ' '),
+        h(Text, { color: '#565f89' }, !apiKeyInput ? ' Paste your new key here' : '')
+      ),
+      h(Text, { color: '#3b3f52' }, separator),
+      h(Box, { flexDirection: 'row' },
+        h(Text, { color: '#9ece6a' }, ' Enter'), h(Text, { color: '#565f89' }, ' Confirm'),
+        h(Text, { color: '#3b3f52' }, '  '), h(Text, { color: '#9ece6a' }, ' Esc'), h(Text, { color: '#565f89' }, ' Back')
+      ),
+    );
+  }
+
+  // === MODELS VIEW (reused for both full setup and switch_model) ===
+  const isSwitchModels = phase === 'switch_models';
+  if (phase === 'models' || isSwitchModels) {
+    if (modelsLoading) {
+      return h(Box, { flexDirection: 'column', borderStyle: 'round', borderColor: '#2a2e3f', paddingX: 1, paddingY: 0, marginY: 1 },
+        h(Text, { color: '#7aa2f7', bold: true }, ` ${selectedProvider?.name} - Models`),
+        h(Text, { color: '#3b3f52' }, separator),
+        h(Box, { paddingLeft: 2, marginTop: 1 }, h(Text, { color: '#565f89' }, ' Fetching models...')),
+      );
+    }
+
+    const maxVis = Math.min(allModels.length, Math.max(5, (rows || 24) - 12));
+    let startIdx = 0;
+    if (allModels.length > maxVis) {
+      const half = Math.floor(maxVis / 2);
+      startIdx = Math.max(0, Math.min(modelsCursor - half, allModels.length - maxVis));
+    }
+
+    return h(Box, { flexDirection: 'column', borderStyle: 'round', borderColor: '#2a2e3f', paddingX: 1, paddingY: 0, marginY: 1 },
+      h(Box, { flexDirection: 'row', alignItems: 'center' },
+        h(Text, { color: '#7aa2f7', bold: true }, ` ${selectedProvider?.name} - Select Model`),
+        h(Text, { color: '#565f89' }, `  ${filteredModels.length} models`),
+        modelsData?.source ? h(Text, { color: '#73daca' }, `  (${modelsData.source})`) : null
+      ),
+      h(Text, { color: '#3b3f52' }, separator),
+      h(InputShell, { flexDirection: 'row', paddingY: 0, marginY: 0 },
+        h(Text, { color: '#e0af68' }, '  Search: '),
+        h(Text, { color: '#c0caf5' }, modelsQuery || ' '),
+        h(Text, { color: '#565f89' }, modelsQuery ? '' : '  type to filter models')
+      ),
+      modelsData?.warning
+        ? h(Box, { paddingLeft: 2, marginBottom: 1 },
+            h(Text, { color: '#e0af68' }, `  ${modelsData.warning}`)
+          )
+        : null,
+      h(Text, { color: '#3b3f52' }, separator),
+      ...allModels.slice(startIdx, startIdx + maxVis).map((model, i) => {
+        const realIdx = startIdx + i;
+        const isHL = realIdx === modelsCursor;
+        const prefix = isHL ? h(Text, { color: '#9ece6a' }, '  > ') : h(Text, { color: '#3b3f52' }, '    ');
+        const isDefault = model === '__default__ (auto)';
+        const display = isDefault ? 'Default (auto)' : model;
+        return h(Box, { key: realIdx },
+          prefix,
+          h(Text, isHL ? { color: '#ffffff', bold: true, backgroundColor: '#2a3a5c' } : { color: '#9aa5ce' },
+            ` ${display}`)
+        );
+      }),
+      allModels.length > maxVis
+        ? h(Text, { color: '#565f89', dimColor: true }, `  Showing ${startIdx + 1}-${Math.min(startIdx + maxVis, allModels.length)} of ${allModels.length}`)
+        : null,
+      h(Text, { color: '#3b3f52' }, separator),
+      h(Box, { flexDirection: 'row' },
+        h(Text, { color: '#9ece6a' }, ' UP/DOWN'), h(Text, { color: '#565f89' }, ' Navigate'),
+        h(Text, { color: '#3b3f52' }, '  '), h(Text, { color: '#9ece6a' }, ' Enter'), h(Text, { color: '#565f89' }, ' Select'),
+        h(Text, { color: '#3b3f52' }, '  '), h(Text, { color: '#9ece6a' }, ' Esc'), h(Text, { color: '#565f89' }, ' Back')
+      ),
+    );
+  }
+
+  // === CONFIGURED VIEW ===
+  if (phase === 'configured') {
+    if (configuredLoading) {
+      return h(Box, { flexDirection: 'column', borderStyle: 'round', borderColor: '#2a2e3f', paddingX: 1, paddingY: 0, marginY: 1 },
+        h(Text, { color: '#7aa2f7', bold: true }, ` ${actionType === 'switch_model' ? 'Switch Model' : actionType === 'update_key' ? 'Update API Key' : 'Switch Provider'}`),
+        h(Text, { color: '#3b3f52' }, separator),
+        h(Box, { paddingLeft: 2, marginTop: 1 }, h(Text, { color: '#565f89' }, ' Loading configured providers...')),
+      );
+    }
+
+    if (configuredError) {
+      return h(Box, { flexDirection: 'column', borderStyle: 'round', borderColor: '#2a2e3f', paddingX: 1, paddingY: 0, marginY: 1 },
+        h(Text, { color: '#7aa2f7', bold: true }, ' Error'),
+        h(Text, { color: '#3b3f52' }, separator),
+        h(Box, { paddingLeft: 2, marginTop: 1 }, h(Text, { color: '#f7768e' }, ` ${configuredError}`)),
+        h(Text, { color: '#3b3f52' }, separator),
+        h(Box, { flexDirection: 'row' },
+          h(Text, { color: '#9ece6a' }, ' Esc'), h(Text, { color: '#565f89' }, ' Back')
+        ),
+      );
+    }
+
+    if (filteredConfigured.length === 0) {
+      return h(Box, { flexDirection: 'column', borderStyle: 'round', borderColor: '#2a2e3f', paddingX: 1, paddingY: 0, marginY: 1 },
+        h(Text, { color: '#7aa2f7', bold: true }, ` ${actionType === 'switch_model' ? 'Switch Model' : actionType === 'update_key' ? 'Update API Key' : 'Switch Provider'}`),
+        h(Text, { color: '#3b3f52' }, separator),
+        h(Box, { paddingLeft: 2, marginTop: 1 }, h(Text, { color: '#565f89' }, ' No configured providers found.')),
+        h(Box, { paddingLeft: 2 }, h(Text, { color: '#e0af68' }, ' Use "Select Provider" to add one first.')),
+        h(Text, { color: '#3b3f52' }, separator),
+        h(Box, { flexDirection: 'row' },
+          h(Text, { color: '#9ece6a' }, ' Esc'), h(Text, { color: '#565f89' }, ' Back')
+        ),
+      );
+    }
+
+    const maxVis = Math.min(filteredConfigured.length, Math.max(5, (rows || 24) - 12));
+    let startIdx = 0;
+    if (filteredConfigured.length > maxVis) {
+      const half = Math.floor(maxVis / 2);
+      startIdx = Math.max(0, Math.min(configuredCursor - half, filteredConfigured.length - maxVis));
+    }
+
+    return h(Box, { flexDirection: 'column', borderStyle: 'round', borderColor: '#2a2e3f', paddingX: 1, paddingY: 0, marginY: 1 },
+      h(Box, { flexDirection: 'row', alignItems: 'center' },
+        h(Text, { color: '#7aa2f7', bold: true }, ` ${actionType === 'switch_model' ? 'Switch Model' : actionType === 'update_key' ? 'Update API Key' : 'Switch Provider'}`),
+      ),
+      h(Text, { color: '#3b3f52' }, separator),
+      h(InputShell, { flexDirection: 'row', paddingY: 0, marginY: 0 },
+        h(Text, { color: '#e0af68' }, '  Search: '),
+        h(Text, { color: '#c0caf5' }, configuredQuery || ' '),
+        h(Text, { color: '#565f89' }, configuredQuery ? '' : '  type to filter')
+      ),
+      h(Text, { color: '#3b3f52' }, separator),
+      ...filteredConfigured.slice(startIdx, startIdx + maxVis).map((p, i) => {
+        const realIdx = startIdx + i;
+        const isHL = realIdx === configuredCursor;
+        const prefix = isHL ? h(Text, { color: '#9ece6a' }, '  > ') : h(Text, { color: '#3b3f52' }, '    ');
+        const activeLabel = p.active ? h(Text, { color: '#73daca' }, ' [active]') : null;
+        const modelLabel = p.model ? h(Text, { color: '#565f89' }, ` ${p.model}`) : null;
+        const keyLabel = p.key_masked && p.key_masked !== 'N/A' ? h(Text, { color: '#565f89' }, ` ${p.key_masked}`) : null;
+        return h(Box, { key: `cfg-${realIdx}` },
+          prefix,
+          h(Text, isHL ? { color: '#ffffff', bold: true, backgroundColor: '#2a3a5c' } : { color: '#9aa5ce' },
+            ` ${p.name || p.type}`.padEnd(25)
+          ),
+          activeLabel,
+          modelLabel,
+          keyLabel,
+        );
+      }),
+      filteredConfigured.length > maxVis
+        ? h(Text, { color: '#565f89', dimColor: true }, `  Showing ${startIdx + 1}-${Math.min(startIdx + maxVis, filteredConfigured.length)} of ${filteredConfigured.length}`)
+        : null,
+      h(Text, { color: '#3b3f52' }, separator),
+      h(Box, { flexDirection: 'row' },
+        h(Text, { color: '#9ece6a' }, ' UP/DOWN'), h(Text, { color: '#565f89' }, ' Navigate'),
+        h(Text, { color: '#3b3f52' }, '  '), h(Text, { color: '#9ece6a' }, ' Enter'), h(Text, { color: '#565f89' }, ' Select'),
+        h(Text, { color: '#3b3f52' }, '  '), h(Text, { color: '#9ece6a' }, ' Esc'), h(Text, { color: '#565f89' }, ' Back'),
+        h(Text, { color: '#3b3f52' }, '  '), h(Text, { color: '#9ece6a' }, ' Type'), h(Text, { color: '#565f89' }, ' Search')
+      ),
+    );
+  }
+
+  // === CATALOG VIEW ===
+  if (phase === 'catalog') {
+    if (catalogLoading) {
+      return h(Box, { flexDirection: 'column', borderStyle: 'round', borderColor: '#2a2e3f', paddingX: 1, paddingY: 0, marginY: 1 },
+        h(Box, { flexDirection: 'row', alignItems: 'center' },
+          h(Text, { color: '#7aa2f7', bold: true }, ' Provider Catalog'),
+          h(Text, { color: '#565f89' }, isLocal ? '  (Local)' : ''),
+        ),
+        h(Text, { color: '#3b3f52' }, separator),
+        h(Box, { paddingLeft: 2, marginTop: 1 }, h(Text, { color: '#565f89' }, ' Loading providers...')),
+      );
+    }
+
+    if (catalogError) {
+      return h(Box, { flexDirection: 'column', borderStyle: 'round', borderColor: '#2a2e3f', paddingX: 1, paddingY: 0, marginY: 1 },
+        h(Text, { color: '#7aa2f7', bold: true }, ' Provider Catalog'),
+        h(Text, { color: '#3b3f52' }, separator),
+        h(Box, { paddingLeft: 2, marginTop: 1 }, h(Text, { color: '#f7768e' }, ` ${catalogError}`)),
+        h(Text, { color: '#3b3f52' }, separator),
+        h(Box, { flexDirection: 'row' },
+          h(Text, { color: '#9ece6a' }, ' Esc'), h(Text, { color: '#565f89' }, ' Back')
+        ),
+      );
+    }
+
+    if (filteredCatalog.length === 0) {
+      return h(Box, { flexDirection: 'column', borderStyle: 'round', borderColor: '#2a2e3f', paddingX: 1, paddingY: 0, marginY: 1 },
+        h(Box, { flexDirection: 'row', alignItems: 'center' },
+          h(Text, { color: '#7aa2f7', bold: true }, ' Provider Catalog'),
+          h(Text, { color: '#565f89' }, isLocal ? '  (Local)' : ''),
+        ),
+        h(Text, { color: '#3b3f52' }, separator),
+        h(Box, { paddingLeft: 2, marginTop: 1 }, h(Text, { color: '#565f89' }, ' No providers found.')),
+        h(Text, { color: '#3b3f52' }, separator),
+        h(Box, { flexDirection: 'row' },
+          h(Text, { color: '#9ece6a' }, ' Esc'), h(Text, { color: '#565f89' }, ' Back')
+        ),
+      );
+    }
+
+    const maxVis = Math.min(filteredCatalog.length, Math.max(5, (rows || 24) - 12));
+    let startIdx = 0;
+    if (filteredCatalog.length > maxVis) {
+      const half = Math.floor(maxVis / 2);
+      startIdx = Math.max(0, Math.min(catalogCursor - half, filteredCatalog.length - maxVis));
+    }
+
+    return h(Box, { flexDirection: 'column', borderStyle: 'round', borderColor: '#2a2e3f', paddingX: 1, paddingY: 0, marginY: 1 },
+      h(Box, { flexDirection: 'row', alignItems: 'center' },
+        h(Text, { color: '#7aa2f7', bold: true }, ' Provider Catalog'),
+        isLocal ? h(Text, { color: '#565f89' }, '  (Local)') : null,
+        h(Text, { color: '#565f89' }, `  ${filteredCatalog.length} providers`),
+      ),
+      h(Text, { color: '#3b3f52' }, separator),
+      h(InputShell, { flexDirection: 'row', paddingY: 0, marginY: 0 },
+        h(Text, { color: '#e0af68' }, '  Search: '),
+        h(Text, { color: '#c0caf5' }, catalogQuery || ' '),
+        h(Text, { color: '#565f89' }, catalogQuery ? '' : '  type to filter providers')
+      ),
+      h(Text, { color: '#3b3f52' }, separator),
+      ...filteredCatalog.slice(startIdx, startIdx + maxVis).map((p, i) => {
+        const realIdx = startIdx + i;
+        const isHL = realIdx === catalogCursor;
+        const prefix = isHL ? h(Text, { color: '#9ece6a' }, '  > ') : h(Text, { color: '#3b3f52' }, '    ');
+        const freeBadge = p.free_tier ? h(Text, { color: '#73daca' }, ' [free]') : null;
+        const keyBadge = p.needs_key ? h(Text, { color: '#e0af68' }, ' [key]') : h(Text, { color: '#565f89' }, ' [no key]');
+        const urlBadge = p.needs_base_url ? h(Text, { color: '#bb9af7' }, ' [custom url]') : null;
+        return h(Box, { key: `cat-${realIdx}` },
+          prefix,
+          h(Text, isHL ? { color: '#ffffff', bold: true, backgroundColor: '#2a3a5c' } : { color: '#9aa5ce' },
+            ` ${p.name || p.id}`.padEnd(25)
+          ),
+          freeBadge,
+          keyBadge,
+          urlBadge,
+        );
+      }),
+      filteredCatalog.length > maxVis
+        ? h(Text, { color: '#565f89', dimColor: true }, `  Showing ${startIdx + 1}-${Math.min(startIdx + maxVis, filteredCatalog.length)} of ${filteredCatalog.length}`)
+        : null,
+      h(Text, { color: '#3b3f52' }, separator),
+      h(Box, { flexDirection: 'row' },
+        h(Text, { color: '#9ece6a' }, ' UP/DOWN'), h(Text, { color: '#565f89' }, ' Navigate'),
+        h(Text, { color: '#3b3f52' }, '  '), h(Text, { color: '#9ece6a' }, ' Enter'), h(Text, { color: '#565f89' }, ' Select'),
+        h(Text, { color: '#3b3f52' }, '  '), h(Text, { color: '#9ece6a' }, ' Esc'), h(Text, { color: '#565f89' }, ' Back'),
+        h(Text, { color: '#3b3f52' }, '  '), h(Text, { color: '#9ece6a' }, ' Type'), h(Text, { color: '#565f89' }, ' Search')
+      ),
+    );
+  }
+
+  // === MENU VIEW ===
+  return h(Box, { flexDirection: 'column', borderStyle: 'round', borderColor: '#2a2e3f', paddingX: 1, paddingY: 0, marginY: 1 },
+    h(Box, { flexDirection: 'row', alignItems: 'center' },
+      h(Text, { color: '#7aa2f7', bold: true }, TITLE),
+      isLocal
+        ? (currentProvider && currentProvider.type
+            ? h(Text, { color: '#9ece6a' }, `  > ${currentProvider.type}${currentProvider.model ? '/' + currentProvider.model : ''}`)
+            : h(Text, { color: '#565f89' }, '  > No provider configured'))
+        : (currentProvider && currentProvider.type && currentProvider.type !== 'osai'
+            ? h(Text, { color: '#9ece6a' }, `  > ${currentProvider.type}${currentProvider.model ? '/' + currentProvider.model : ''}`)
+            : h(Text, { color: '#565f89' }, '  > OS AI Agent (auto)'))
+    ),
+    h(Text, { color: '#3b3f52' }, separator),
+    h(InputShell, { flexDirection: 'row', paddingY: 0, marginY: 0 },
+      h(Text, { color: '#e0af68' }, '  Search: '),
+      h(Text, { color: '#c0caf5' }, menuQuery || ' '),
+      h(Text, { color: '#565f89' }, menuQuery ? '' : '  type to filter actions')
+    ),
+    h(Text, { color: '#3b3f52' }, separator),
+    ...filteredMenu.map((action, i) => {
+      const isHL = i === menuCursor;
+      const prefix = isHL ? h(Text, { color: '#9ece6a' }, '  > ') : h(Text, { color: '#3b3f52' }, '    ');
+      return h(Box, { key: action.action },
+        prefix,
+        h(Text, isHL ? { color: '#ffffff', bold: true, backgroundColor: '#2a3a5c' } : { color: '#9aa5ce' },
+          ` ${action.name.padEnd(22)} ${isHL ? action.desc : ''}`
+        ),
+      );
+    }),
+    h(Text, { color: '#3b3f52' }, separator),
+    h(Box, { flexDirection: 'row' },
+      h(Text, { color: '#9ece6a' }, ' UP/DOWN'), h(Text, { color: '#565f89' }, ' Navigate'),
+      h(Text, { color: '#3b3f52' }, '  '), h(Text, { color: '#9ece6a' }, ' Enter'), h(Text, { color: '#565f89' }, ' Select'),
+      h(Text, { color: '#3b3f52' }, '  '), h(Text, { color: '#9ece6a' }, ' Esc'), h(Text, { color: '#565f89' }, ' Cancel'),
+      h(Text, { color: '#3b3f52' }, '  '), h(Text, { color: '#9ece6a' }, ' Type'), h(Text, { color: '#565f89' }, ' Search')
+    ),
+  );
+}