@within-7/minto 0.3.9 → 0.4.0

package/dist/components/ModelSelector/ModelSelector.js

@@ -1,7 +1,5 @@
 import React, { useState, useEffect } from "react";
-import { Box, Text, useInput, Newline } from "ink";
-import { getTheme } from "../../utils/theme.js";
-import { Select } from "../CustomSelect/select.js";
+import { Text, useInput } from "ink";
 import { getModelManager } from "../../utils/model.js";
 import { useExitOnCtrlCD } from "../../hooks/useExitOnCtrlCD.js";
 import {
@@ -10,9 +8,7 @@ import {
   setModelPointer
 } from "../../utils/config.js";
 import models, { providers } from "../../constants/models.js";
-import TextInput from "../TextInput.js";
 import OpenAI from "openai";
-import chalk from "chalk";
 import { verifyApiKey } from "../../services/claude.js";
 import { fetchCustomModels } from "../../services/openai.js";
 import {
@@ -20,44 +16,32 @@ import {
   validateGPT5Config
 } from "../../services/gpt5ConnectionTest.js";
 import { SEMANTIC_COLORS } from "../../constants/colors.js";
-import { ScreenContainer } from "./ScreenContainer.js";
+import { isOpenAICompatibleProvider } from "../../constants/providers.js";
+import { getEffectiveCapabilities } from "../../constants/providerRegistry.js";
+import { t } from "../../i18n/index.js";
+import { SimpleSelector } from "../SimpleSelector/SimpleSelector.js";
+import { InfoPanel } from "../InfoPanel/InfoPanel.js";
+import { BrandTextInput } from "./BrandTextInput.js";
 import {
   CONTEXT_LENGTH_OPTIONS,
   DEFAULT_CONTEXT_LENGTH,
   MAX_TOKENS_OPTIONS,
   DEFAULT_MAX_TOKENS
 } from "./constants.js";
-import { useEscapeNavigation } from "./hooks/index.js";
-function printModelConfig() {
-  const config = getGlobalConfig();
-  const modelProfiles = config.modelProfiles || [];
-  const activeProfiles = modelProfiles.filter((p) => p.isActive);
-  if (activeProfiles.length === 0) {
-    console.log(chalk.gray("  \u23BF  No active model profiles configured"));
-    return;
-  }
-  const profileSummary = activeProfiles.map((p) => `${p.name} (${p.provider}: ${p.modelName})`).join(" | ");
-  console.log(chalk.gray(`  \u23BF  ${profileSummary}`));
-}
 function ModelSelector({
   onDone: onDoneProp,
   abortController,
   targetPointer,
   isOnboarding = false,
   onCancel,
-  skipModelType = false
+  skipModelType = false,
+  editingModel
 }) {
   const config = getGlobalConfig();
-  const theme = getTheme();
-  const onDone = () => {
-    printModelConfig();
-    onDoneProp();
-  };
-  const exitState = useExitOnCtrlCD(() => process.exit(0));
-  const getInitialScreen = () => {
-    return "provider";
-  };
-  const [screenStack, setScreenStack] = useState([getInitialScreen()]);
+  const onDone = onDoneProp;
+  useExitOnCtrlCD(() => process.exit(0));
+  const isEditMode = !!editingModel;
+  const [screenStack, setScreenStack] = useState([isEditMode ? "testAndSave" : "provider"]);
   const currentScreen = screenStack[screenStack.length - 1];
   const navigateTo = (screen) => {
     setScreenStack((prev) => [...prev, screen]);
@@ -70,22 +54,26 @@ function ModelSelector({
     }
   };
   const [selectedProvider, setSelectedProvider] = useState(
-    config.primaryProvider ?? "anthropic"
+    editingModel?.provider ?? config.primaryProvider ?? "anthropic"
   );
   const [anthropicProviderType, setAnthropicProviderType] = useState("official");
-  const [selectedModel, setSelectedModel] = useState("");
-  const [apiKey, setApiKey] = useState("");
+  const [selectedModel, setSelectedModel] = useState(
+    editingModel?.modelName ?? ""
+  );
+  const [apiKey, setApiKey] = useState(editingModel?.apiKey ?? "");
   const [maxTokens, setMaxTokens] = useState(
-    config.maxTokens?.toString() || DEFAULT_MAX_TOKENS.toString()
+    editingModel?.maxTokens?.toString() ?? config.maxTokens?.toString() ?? DEFAULT_MAX_TOKENS.toString()
   );
   const [maxTokensMode, setMaxTokensMode] = useState(
     "preset"
   );
   const [selectedMaxTokensPreset, setSelectedMaxTokensPreset] = useState(config.maxTokens || DEFAULT_MAX_TOKENS);
-  const [reasoningEffort, setReasoningEffort] = useState("medium");
-  const [supportsReasoningEffort, setSupportsReasoningEffort] = useState(false);
+  const [reasoningEffort, setReasoningEffort] = useState(
+    editingModel?.reasoningEffort ?? "medium"
+  );
+  const [supportsReasoningEffort, setSupportsReasoningEffort] = useState(!!editingModel?.reasoningEffort);
   const [contextLength, setContextLength] = useState(
-    DEFAULT_CONTEXT_LENGTH
+    editingModel?.contextLength ?? DEFAULT_CONTEXT_LENGTH
   );
   const [activeFieldIndex, setActiveFieldIndex] = useState(0);
   const [maxTokensCursorOffset, setMaxTokensCursorOffset] = useState(0);
@@ -95,12 +83,13 @@ function ModelSelector({
   const [modelSearchQuery, setModelSearchQuery] = useState("");
   const [modelSearchCursorOffset, setModelSearchCursorOffset] = useState(0);
   const [cursorOffset, setCursorOffset] = useState(0);
-  const [apiKeyEdited, setApiKeyEdited] = useState(false);
+  const [apiKeyEdited, setApiKeyEdited] = useState(isEditMode);
   const [fetchRetryCount, setFetchRetryCount] = useState(0);
   const [isRetrying, setIsRetrying] = useState(false);
   const [isTestingConnection, setIsTestingConnection] = useState(false);
   const [connectionTestResult, setConnectionTestResult] = useState(null);
   const [validationError, setValidationError] = useState(null);
+  const [isManualModelEntry, setIsManualModelEntry] = useState(false);
   const [resourceName, setResourceName] = useState("");
   const [resourceNameCursorOffset, setResourceNameCursorOffset] = useState(0);
   const [customModelName, setCustomModelName] = useState("");
@@ -111,7 +100,9 @@ function ModelSelector({
   const [ollamaBaseUrlCursorOffset, setOllamaBaseUrlCursorOffset] = useState(0);
   const [customBaseUrl, setCustomBaseUrl] = useState("");
   const [customBaseUrlCursorOffset, setCustomBaseUrlCursorOffset] = useState(0);
-  const [providerBaseUrl, setProviderBaseUrl] = useState("");
+  const [providerBaseUrl, setProviderBaseUrl] = useState(
+    editingModel?.baseURL ?? ""
+  );
   const [providerBaseUrlCursorOffset, setProviderBaseUrlCursorOffset] = useState(0);
   const reasoningEffortOptions = [
     { label: "Low - Faster responses, less thorough reasoning", value: "low" },
@@ -148,6 +139,11 @@ function ModelSelector({
       setContextLength(DEFAULT_CONTEXT_LENGTH);
     }
   }, [currentScreen, contextLength]);
+  useEffect(() => {
+    if (currentScreen === "testAndSave" && !isEditMode && !isTestingConnection && !connectionTestResult) {
+      handleConnectionTest();
+    }
+  }, [currentScreen]);
   const ourModelNames = new Set(
     (models[selectedProvider] || []).map(
       (model) => model.model
@@ -240,7 +236,8 @@ function ModelSelector({
           "anthropic-version": "2023-06-01",
           "Content-Type": "application/json",
           Authorization: `Bearer ${apiKey2}`
-        }
+        },
+        signal: AbortSignal.timeout(3e4)
       });
       if (!response.ok) {
         if (response.status === 401) {
@@ -305,10 +302,6 @@ function ModelSelector({
       }));
     } catch (error) {
       lastError = error;
-      console.log(
-        `Anthropic API failed for ${provider}, trying OpenAI format:`,
-        error
-      );
     }
     try {
       const models2 = await fetchCustomModels(baseURL, apiKey);
@@ -322,10 +315,6 @@ function ModelSelector({
       }));
     } catch (error) {
       lastError = error;
-      console.log(
-        `OpenAI API failed for ${provider}, falling back to manual input:`,
-        error
-      );
     }
     let errorMessage = `Failed to fetch ${provider} models using both Anthropic and OpenAI API formats`;
     if (lastError) {
@@ -622,7 +611,8 @@ function ModelSelector({
   async function fetchGeminiModels() {
     try {
       const response = await fetch(
-        `https://generativelanguage.googleapis.com/v1beta/models?key=${apiKey}`
+        `https://generativelanguage.googleapis.com/v1beta/models?key=${apiKey}`,
+        { signal: AbortSignal.timeout(3e4) }
       );
       if (!response.ok) {
         const errorData = await response.json();
@@ -650,7 +640,9 @@ function ModelSelector({
   }
   async function fetchOllamaModels() {
     try {
-      const response = await fetch(`${ollamaBaseUrl}/models`);
+      const response = await fetch(`${ollamaBaseUrl}/models`, {
+        signal: AbortSignal.timeout(3e4)
+      });
       if (!response.ok) {
         throw new Error(`HTTP error ${response.status}: ${response.statusText}`);
       }
@@ -732,7 +724,8 @@ function ModelSelector({
             const showResp = await fetch(`${ollamaRoot}/api/show`, {
               method: "POST",
               headers: { "Content-Type": "application/json" },
-              body: JSON.stringify({ name: m.model })
+              body: JSON.stringify({ name: m.model }),
+              signal: AbortSignal.timeout(3e4)
             });
             if (showResp.ok) {
               const showData = await showResp.json();
@@ -763,7 +756,6 @@ function ModelSelector({
       } else {
         setModelLoadError(`Error loading Ollama models: ${errorMessage}`);
       }
-      console.error("Error fetching Ollama models:", error);
       return [];
     }
   }
@@ -787,7 +779,6 @@ function ModelSelector({
         return models2;
       } catch (error) {
         lastError = error instanceof Error ? error : new Error(String(error));
-        console.log(`Model fetch attempt ${attempt} failed:`, lastError.message);
         if (attempt === MAX_RETRIES) {
           break;
         }
@@ -915,7 +906,6 @@ function ModelSelector({
       navigateTo("model");
       return fetchedModels;
     } catch (error) {
-      console.error("Error fetching models:", error);
       throw error;
     } finally {
       setIsLoadingModels(false);
@@ -923,12 +913,15 @@ function ModelSelector({
   }
   function handleApiKeySubmit(key) {
     setApiKey(key);
+    if (isEditMode) {
+      goBack();
+      return;
+    }
     if (selectedProvider === "azure") {
       navigateTo("resourceName");
       return;
     }
-    fetchModelsWithRetry().catch((error) => {
-      console.error("Final error after retries:", error);
+    fetchModelsWithRetry().catch(() => {
     });
   }
   function handleResourceNameSubmit(name) {
@@ -946,11 +939,20 @@ function ModelSelector({
   function handleCustomBaseUrlSubmit(url) {
     const cleanUrl = url.replace(/\/+$/, "");
     setCustomBaseUrl(cleanUrl);
+    setProviderBaseUrl(cleanUrl);
+    if (isEditMode) {
+      goBack();
+      return;
+    }
     navigateTo("apiKey");
   }
   function handleProviderBaseUrlSubmit(url) {
     const cleanUrl = url.replace(/\/+$/, "");
     setProviderBaseUrl(cleanUrl);
+    if (isEditMode) {
+      goBack();
+      return;
+    }
     if (selectedProvider === "ollama") {
       setOllamaBaseUrl(cleanUrl);
       setIsLoadingModels(true);
@@ -980,6 +982,7 @@ function ModelSelector({
   function handleCustomModelSubmit(model) {
     setCustomModelName(model);
     setSelectedModel(model);
+    setIsManualModelEntry(true);
     setSupportsReasoningEffort(false);
     setReasoningEffort(null);
     setMaxTokensMode("preset");
@@ -991,6 +994,7 @@ function ModelSelector({
   }
   function handleModelSelection(model) {
     setSelectedModel(model);
+    setIsManualModelEntry(false);
     const modelInfo = availableModels.find((m) => m.model === model);
     setSupportsReasoningEffort(modelInfo?.supports_reasoning_effort || false);
     if (!modelInfo?.supports_reasoning_effort) {
@@ -1025,6 +1029,17 @@ function ModelSelector({
     setActiveFieldIndex(0);
   }
   const handleModelParamsSubmit = () => {
+    if (isEditMode) {
+      goBack();
+      return;
+    }
+    if (!isManualModelEntry) {
+      const modelInfo = availableModels.find((m) => m.model === selectedModel);
+      if (modelInfo?.context_length || modelInfo?.max_input_tokens) {
+        navigateTo("testAndSave");
+        return;
+      }
+    }
     if (!CONTEXT_LENGTH_OPTIONS.find((opt) => opt.value === contextLength)) {
       setContextLength(DEFAULT_CONTEXT_LENGTH);
     }
@@ -1040,26 +1055,9 @@ function ModelSelector({
       } else if (selectedProvider === "custom-openai") {
         testBaseURL = customBaseUrl;
       }
-      const isOpenAICompatible = [
-        "minimax",
-        "kimi",
-        "deepseek",
-        "siliconflow",
-        "qwen",
-        "glm",
-        "baidu-qianfan",
-        "openai",
-        "mistral",
-        "xai",
-        "groq",
-        "custom-openai"
-      ].includes(selectedProvider);
-      if (isOpenAICompatible) {
+      if (isOpenAICompatibleProvider(selectedProvider)) {
         const isGPT5 = selectedModel?.toLowerCase().includes("gpt-5");
         if (isGPT5) {
-          console.log(
-            `\u{1F680} Using specialized GPT-5 connection test for model: ${selectedModel}`
-          );
           const configValidation = validateGPT5Config({
             model: selectedModel,
             apiKey,
@@ -1152,20 +1150,19 @@ function ModelSelector({
       temperature: 0,
       stream: false
     };
-    if (selectedModel && selectedModel.toLowerCase().includes("gpt-5")) {
-      console.log(`Applying GPT-5 parameter fix for model: ${selectedModel}`);
-      if (testPayload.max_tokens) {
-        testPayload.max_completion_tokens = testPayload.max_tokens;
+    if (selectedModel && selectedProvider) {
+      const caps = getEffectiveCapabilities(selectedProvider, selectedModel);
+      if (caps.maxTokensField !== "max_tokens" && testPayload.max_tokens) {
+        testPayload[caps.maxTokensField] = testPayload.max_tokens;
         delete testPayload.max_tokens;
-        console.log(
-          `Transformed max_tokens \u2192 max_completion_tokens: ${testPayload.max_completion_tokens}`
-        );
       }
-      if (testPayload.temperature !== void 0 && testPayload.temperature !== 1) {
-        console.log(
-          `Adjusting temperature from ${testPayload.temperature} to 1 for GPT-5`
+      if (caps.temperatureRange === "omit") {
+        delete testPayload.temperature;
+      } else if (typeof caps.temperatureRange === "object") {
+        testPayload.temperature = Math.min(
+          testPayload.temperature,
+          caps.temperatureRange.max
         );
-        testPayload.temperature = 1;
       }
     }
     const headers = {
@@ -1180,14 +1177,11 @@ function ModelSelector({
       const response = await fetch(testURL, {
         method: "POST",
         headers,
-        body: JSON.stringify(testPayload)
+        body: JSON.stringify(testPayload),
+        signal: AbortSignal.timeout(3e4)
       });
       if (response.ok) {
         const data = await response.json();
-        console.log(
-          "[DEBUG] Connection test response:",
-          JSON.stringify(data, null, 2)
-        );
         let responseContent = "";
         if (data.choices && data.choices.length > 0) {
           responseContent = data.choices[0]?.message?.content || "";
@@ -1196,7 +1190,6 @@ function ModelSelector({
         } else if (data.output) {
           responseContent = data.output?.text || data.output || "";
         }
-        console.log("[DEBUG] Extracted response content:", responseContent);
         const containsYes = responseContent.toLowerCase().includes("yes");
         if (containsYes) {
           return {
@@ -1251,9 +1244,6 @@ function ModelSelector({
         // Fast response for connection test
       }
     };
-    console.log(`\u{1F527} Testing GPT-5 Responses API for model: ${selectedModel}`);
-    console.log(`\u{1F527} Test URL: ${testURL}`);
-    console.log(`\u{1F527} Test payload:`, JSON.stringify(testPayload, null, 2));
     const headers = {
       "Content-Type": "application/json",
       Authorization: `Bearer ${apiKey}`
@@ -1262,21 +1252,17 @@ function ModelSelector({
       const response = await fetch(testURL, {
         method: "POST",
         headers,
-        body: JSON.stringify(testPayload)
+        body: JSON.stringify(testPayload),
+        signal: AbortSignal.timeout(3e4)
       });
       if (response.ok) {
         const data = await response.json();
-        console.log(
-          "[DEBUG] Responses API connection test response:",
-          JSON.stringify(data, null, 2)
-        );
         let responseContent = "";
         if (data.output_text) {
           responseContent = data.output_text;
         } else if (data.output) {
           responseContent = typeof data.output === "string" ? data.output : data.output.text || "";
         }
-        console.log("[DEBUG] Extracted response content:", responseContent);
         const containsYes = responseContent.toLowerCase().includes("yes");
         if (containsYes) {
           return {
@@ -1296,10 +1282,6 @@ function ModelSelector({
       } else {
         const errorData = await response.json().catch(() => null);
         const errorMessage = errorData?.error?.message || errorData?.message || response.statusText;
-        console.log(
-          `\u{1F6A8} GPT-5 Responses API Error (${response.status}):`,
-          errorData
-        );
         let details = `Responses API Error: ${errorMessage}`;
         if (response.status === 400 && errorMessage.includes("max_tokens")) {
           details += "\n\u{1F527} Note: This appears to be a parameter compatibility issue. The fallback to Chat Completions should handle this.";
@@ -1327,9 +1309,6 @@ function ModelSelector({
   async function testProviderSpecificEndpoint(baseURL) {
     if (selectedProvider === "anthropic" || selectedProvider === "bigdream") {
       try {
-        console.log(
-          `[DEBUG] Testing ${selectedProvider} connection using official Anthropic SDK...`
-        );
         let testBaseURL = void 0;
         if (selectedProvider === "bigdream") {
           testBaseURL = baseURL || "https://api-key.info";
@@ -1357,7 +1336,6 @@ function ModelSelector({
           };
         }
       } catch (error) {
-        console.log(`[DEBUG] ${selectedProvider} connection test error:`, error);
         return {
           success: false,
           message: `\u274C ${selectedProvider} connection failed`,
@@ -1375,14 +1353,13 @@ function ModelSelector({
   async function handleConnectionTest() {
     const result = await testConnection();
     setConnectionTestResult(result);
-    if (result.success) {
-      setTimeout(() => {
-        navigateTo("confirmation");
-      }, 2e3);
-    }
   }
   const handleContextLengthSubmit = () => {
-    navigateTo("connectionTest");
+    if (isEditMode) {
+      goBack();
+      return;
+    }
+    navigateTo("testAndSave");
   };
   async function saveConfiguration(provider, model) {
     let baseURL = providerBaseUrl || providers[provider]?.baseURL || "";
@@ -1429,6 +1406,24 @@ function ModelSelector({
   }
   async function handleConfirmation() {
     setValidationError(null);
+    if (isEditMode && editingModel) {
+      try {
+        const modelManager = getModelManager();
+        modelManager.updateModel(editingModel.modelName, {
+          baseURL: providerBaseUrl || editingModel.baseURL,
+          apiKey: apiKey || editingModel.apiKey,
+          maxTokens: parseInt(maxTokens) || editingModel.maxTokens,
+          contextLength: contextLength || editingModel.contextLength,
+          reasoningEffort
+        });
+        onDone();
+      } catch (error) {
+        setValidationError(
+          error instanceof Error ? error.message : "Failed to update model"
+        );
+      }
+      return;
+    }
     const modelId = await saveConfiguration(selectedProvider, selectedModel);
     if (!modelId) {
       return;
@@ -1450,10 +1445,20 @@ function ModelSelector({
         onDone();
       }
     } else {
+      if (currentScreen === "testAndSave") {
+        setConnectionTestResult(null);
+        setIsTestingConnection(false);
+        setValidationError(null);
+      }
+      const prevScreen = screenStack[screenStack.length - 2];
+      if (prevScreen === "modelParams") {
+        const formFields = getFormFieldsForModelParams();
+        const submitIndex = formFields.findIndex((f) => f.name === "submit");
+        setActiveFieldIndex(Math.max(0, submitIndex - 1));
+      }
       setScreenStack((prev) => prev.slice(0, -1));
     }
   };
-  useEscapeNavigation(handleBack, abortController);
   function handleCursorOffsetChange(offset) {
     setCursorOffset(offset);
   }
@@ -1468,7 +1473,13 @@ function ModelSelector({
   function handleModelSearchCursorOffsetChange(offset) {
     setModelSearchCursorOffset(offset);
   }
+  const textScreens = ["apiKey", "baseUrl", "resourceName", "modelInput"];
   useInput((input, key) => {
+    if (!textScreens.includes(currentScreen)) return;
+    if (key.escape) {
+      handleBack();
+      return;
+    }
     if (currentScreen === "apiKey" && key.return) {
       if (apiKey) {
         handleApiKeySubmit(apiKey);
@@ -1480,8 +1491,7 @@ function ModelSelector({
         navigateTo("modelInput");
         return;
       }
-      fetchModelsWithRetry().catch((error) => {
-        console.error("Final error after retries:", error);
+      fetchModelsWithRetry().catch(() => {
       });
       return;
     }
@@ -1505,76 +1515,6 @@ function ModelSelector({
       }
       return;
     }
-    if (currentScreen === "confirmation" && key.return) {
-      handleConfirmation().catch((error) => {
-        console.error("Error in handleConfirmation:", error);
-        setValidationError(
-          error instanceof Error ? error.message : "Unexpected error occurred"
-        );
-      });
-      return;
-    }
-    if (currentScreen === "connectionTest") {
-      if (key.return) {
-        if (!isTestingConnection && !connectionTestResult) {
-          handleConnectionTest();
-        } else if (connectionTestResult && connectionTestResult.success) {
-          navigateTo("confirmation");
-        } else if (connectionTestResult && !connectionTestResult.success) {
-          handleConnectionTest();
-        }
-        return;
-      }
-    }
-    if (currentScreen === "contextLength") {
-      if (key.return) {
-        handleContextLengthSubmit();
-        return;
-      }
-      if (key.upArrow) {
-        const currentIndex = CONTEXT_LENGTH_OPTIONS.findIndex(
-          (opt) => opt.value === contextLength
-        );
-        const newIndex = currentIndex > 0 ? currentIndex - 1 : currentIndex === -1 ? CONTEXT_LENGTH_OPTIONS.findIndex(
-          (opt) => opt.value === DEFAULT_CONTEXT_LENGTH
-        ) || 0 : CONTEXT_LENGTH_OPTIONS.length - 1;
-        setContextLength(CONTEXT_LENGTH_OPTIONS[newIndex].value);
-        return;
-      }
-      if (key.downArrow) {
-        const currentIndex = CONTEXT_LENGTH_OPTIONS.findIndex(
-          (opt) => opt.value === contextLength
-        );
-        const newIndex = currentIndex === -1 ? CONTEXT_LENGTH_OPTIONS.findIndex(
-          (opt) => opt.value === DEFAULT_CONTEXT_LENGTH
-        ) || 0 : (currentIndex + 1) % CONTEXT_LENGTH_OPTIONS.length;
-        setContextLength(CONTEXT_LENGTH_OPTIONS[newIndex].value);
-        return;
-      }
-    }
-    if (currentScreen === "apiKey" && (key.ctrl && input === "v" || key.meta && input === "v")) {
-      setModelLoadError(
-        "Please use your terminal's paste functionality or type the API key manually"
-      );
-      return;
-    }
-    if (currentScreen === "modelParams" && key.tab) {
-      const formFields = getFormFieldsForModelParams();
-      setActiveFieldIndex((current) => (current + 1) % formFields.length);
-      return;
-    }
-    if (currentScreen === "modelParams" && key.return) {
-      const formFields = getFormFieldsForModelParams();
-      const currentField = formFields[activeFieldIndex];
-      if (currentField.name === "submit" || activeFieldIndex === formFields.length - 1) {
-        handleModelParamsSubmit();
-      } else if (currentField.component === "select") {
-        setActiveFieldIndex(
-          (current) => Math.min(current + 1, formFields.length - 1)
-        );
-      }
-      return;
-    }
   });
   function getFormFieldsForModelParams() {
     return [
@@ -1607,433 +1547,518 @@ function ModelSelector({
     ];
   }
   if (currentScreen === "apiKey") {
-    const modelTypeText = "this model profile";
-    return /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", gap: 1 }, /* @__PURE__ */ React.createElement(
-      Box,
+    const providerLabel = getProviderLabel(selectedProvider, 0).split(" (")[0];
+    const apiKeyUrls = {
+      kimi: "https://platform.moonshot.cn/console/api-keys",
+      deepseek: "https://platform.deepseek.com/api_keys",
+      siliconflow: "https://cloud.siliconflow.cn/i/oJWsm6io",
+      qwen: "https://bailian.console.aliyun.com/?tab=model#/api-key",
+      glm: "https://open.bigmodel.cn (API Keys section)",
+      minimax: "https://www.minimax.io/platform/user-center/basic-information",
+      "baidu-qianfan": "https://console.bce.baidu.com/iam/#/iam/accesslist",
+      openai: "https://platform.openai.com/api-keys"
+    };
+    let apiKeyUrl = apiKeyUrls[selectedProvider] || "";
+    if (selectedProvider === "anthropic") {
+      apiKeyUrl = anthropicProviderType === "official" ? "https://console.anthropic.com/settings/keys" : anthropicProviderType === "bigdream" ? "https://api-key.info/register?aff=MSl4" : anthropicProviderType === "opendev" ? "https://api.openai-next.com/register/?aff_code=4xo7" : "your custom API provider";
+    }
+    const supportsManualInput = selectedProvider === "anthropic" || selectedProvider === "kimi" || selectedProvider === "deepseek" || selectedProvider === "qwen" || selectedProvider === "glm" || selectedProvider === "minimax" || selectedProvider === "baidu-qianfan" || selectedProvider === "siliconflow" || selectedProvider === "custom-openai";
+    const tabHintText = supportsManualInput ? t("modelSelector.apiKeyTabHintManual") : t("modelSelector.apiKeyTabHintSkip");
+    const apiKeyHint = apiKeyUrl ? /* @__PURE__ */ React.createElement(Text, { color: SEMANTIC_COLORS.dim }, "Get your API key from:", " ", /* @__PURE__ */ React.createElement(Text, { color: SEMANTIC_COLORS.info }, apiKeyUrl)) : void 0;
+    return /* @__PURE__ */ React.createElement(
+      BrandTextInput,
       {
-        flexDirection: "column",
-        gap: 1,
-        borderStyle: "round",
-        borderColor: theme.secondaryBorder,
-        paddingX: 2,
-        paddingY: 1
-      },
-      /* @__PURE__ */ React.createElement(Text, { bold: true }, "API Key Setup", " ", exitState.pending ? `(press ${exitState.keyName} again to exit)` : ""),
-      /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", gap: 1 }, /* @__PURE__ */ React.createElement(Text, { bold: true }, "Enter your ", getProviderLabel(selectedProvider, 0).split(" (")[0], " ", "API key for ", modelTypeText, ":"), /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", width: 70 }, /* @__PURE__ */ React.createElement(Text, { color: theme.secondaryText }, "This key will be stored locally and used to access the", " ", selectedProvider, " API.", /* @__PURE__ */ React.createElement(Newline, null), "Your key is never sent to our servers.", /* @__PURE__ */ React.createElement(Newline, null), /* @__PURE__ */ React.createElement(Newline, null), selectedProvider === "kimi" && /* @__PURE__ */ React.createElement(React.Fragment, null, "\u{1F4A1} Get your API key from:", " ", /* @__PURE__ */ React.createElement(Text, { color: theme.suggestion }, "https://platform.moonshot.cn/console/api-keys")), selectedProvider === "deepseek" && /* @__PURE__ */ React.createElement(React.Fragment, null, "\u{1F4A1} Get your API key from:", " ", /* @__PURE__ */ React.createElement(Text, { color: theme.suggestion }, "https://platform.deepseek.com/api_keys")), selectedProvider === "siliconflow" && /* @__PURE__ */ React.createElement(React.Fragment, null, "\u{1F4A1} Get your API key from:", " ", /* @__PURE__ */ React.createElement(Text, { color: theme.suggestion }, "https://cloud.siliconflow.cn/i/oJWsm6io")), selectedProvider === "qwen" && /* @__PURE__ */ React.createElement(React.Fragment, null, "\u{1F4A1} Get your API key from:", " ", /* @__PURE__ */ React.createElement(Text, { color: theme.suggestion }, "https://bailian.console.aliyun.com/?tab=model#/api-key")), selectedProvider === "glm" && /* @__PURE__ */ React.createElement(React.Fragment, null, "\u{1F4A1} Get your API key from:", " ", /* @__PURE__ */ React.createElement(Text, { color: theme.suggestion }, "https://open.bigmodel.cn (API Keys section)")), selectedProvider === "minimax" && /* @__PURE__ */ React.createElement(React.Fragment, null, "\u{1F4A1} Get your API key from:", " ", /* @__PURE__ */ React.createElement(Text, { color: theme.suggestion }, "https://www.minimax.io/platform/user-center/basic-information")), selectedProvider === "baidu-qianfan" && /* @__PURE__ */ React.createElement(React.Fragment, null, "\u{1F4A1} Get your API key from:", " ", /* @__PURE__ */ React.createElement(Text, { color: theme.suggestion }, "https://console.bce.baidu.com/iam/#/iam/accesslist")), selectedProvider === "anthropic" && /* @__PURE__ */ React.createElement(React.Fragment, null, "\u{1F4A1} Get your API key from:", " ", /* @__PURE__ */ React.createElement(Text, { color: theme.suggestion }, anthropicProviderType === "official" ? "https://console.anthropic.com/settings/keys" : anthropicProviderType === "bigdream" ? "https://api-key.info/register?aff=MSl4" : anthropicProviderType === "opendev" ? "https://api.openai-next.com/register/?aff_code=4xo7" : "your custom API provider")), selectedProvider === "openai" && /* @__PURE__ */ React.createElement(React.Fragment, null, "\u{1F4A1} Get your API key from:", " ", /* @__PURE__ */ React.createElement(Text, { color: theme.suggestion }, "https://platform.openai.com/api-keys")))), /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(
-        TextInput,
-        {
-          placeholder: "sk-...",
-          value: apiKey,
-          onChange: handleApiKeyChange,
-          onSubmit: handleApiKeySubmit,
-          mask: "*",
-          columns: 500,
-          cursorOffset,
-          onChangeCursorOffset: handleCursorOffsetChange,
-          showCursor: true
-        }
-      )), /* @__PURE__ */ React.createElement(Box, { marginTop: 1 }, /* @__PURE__ */ React.createElement(Text, null, /* @__PURE__ */ React.createElement(Text, { color: apiKey ? theme.suggestion : SEMANTIC_COLORS.dim }, "[Submit API Key]"), /* @__PURE__ */ React.createElement(Text, null, " ", "- Press Enter or click to continue with this API key"))), isLoadingModels && /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(Text, { color: theme.suggestion }, "Loading available models...")), modelLoadError && /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(Text, { color: SEMANTIC_COLORS.error }, "Error: ", modelLoadError)), /* @__PURE__ */ React.createElement(Box, { marginTop: 1 }, /* @__PURE__ */ React.createElement(Text, { color: SEMANTIC_COLORS.dim }, "Press ", /* @__PURE__ */ React.createElement(Text, { color: theme.suggestion }, "Enter"), " to continue,", " ", /* @__PURE__ */ React.createElement(Text, { color: theme.suggestion }, "Tab"), " to", " ", selectedProvider === "anthropic" || selectedProvider === "kimi" || selectedProvider === "deepseek" || selectedProvider === "qwen" || selectedProvider === "glm" || selectedProvider === "minimax" || selectedProvider === "baidu-qianfan" || selectedProvider === "siliconflow" || selectedProvider === "custom-openai" ? "skip to manual model input" : "skip using a key", ", or ", /* @__PURE__ */ React.createElement(Text, { color: theme.suggestion }, "Esc"), " to go back")))
-    ));
+        title: `${t("modelSelector.apiKeyTitle")} \u2014 ${providerLabel}`,
+        description: t("modelSelector.apiKeyDesc"),
+        placeholder: "sk-...",
+        value: apiKey,
+        onChange: handleApiKeyChange,
+        onSubmit: handleApiKeySubmit,
+        mask: "*",
+        error: modelLoadError ? `Error: ${modelLoadError}` : null,
+        isLoading: isLoadingModels,
+        loadingText: "Loading available models...",
+        hint: apiKeyHint,
+        footerHint: `Enter continue \xB7 Tab ${tabHintText} \xB7 Esc back`,
+        cursorOffset,
+        onChangeCursorOffset: handleCursorOffsetChange
+      }
+    );
   }
   if (currentScreen === "model") {
-    const modelTypeText = "this model profile";
-    return /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", gap: 1 }, /* @__PURE__ */ React.createElement(
-      Box,
+    const providerLabel = getProviderLabel(
+      selectedProvider,
+      availableModels.length
+    ).split(" (")[0];
+    const modelSelectorItems = modelOptions.map((opt) => ({
+      id: opt.value,
+      label: opt.label
+    }));
+    const subtitle = modelOptions.length > 0 ? `${modelOptions.length}/${availableModels.length} models` : availableModels.length > 0 ? t("modelSelector.noModelsMatch") : t("modelSelector.noModelsAvailable");
+    return /* @__PURE__ */ React.createElement(
+      SimpleSelector,
       {
-        flexDirection: "column",
-        gap: 1,
-        borderStyle: "round",
-        borderColor: theme.secondaryBorder,
-        paddingX: 2,
-        paddingY: 1
-      },
-      /* @__PURE__ */ React.createElement(Text, { bold: true }, "Model Selection", " ", exitState.pending ? `(press ${exitState.keyName} again to exit)` : ""),
-      /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", gap: 1 }, /* @__PURE__ */ React.createElement(Text, { bold: true }, "Select a model from", " ", getProviderLabel(
-        selectedProvider,
-        availableModels.length
-      ).split(" (")[0], " ", "for ", modelTypeText, ":"), /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", width: 70 }, /* @__PURE__ */ React.createElement(Text, { color: theme.secondaryText }, "This model profile can be assigned to different pointers (main, task, reasoning, quick) for various use cases.")), /* @__PURE__ */ React.createElement(Box, { marginY: 1 }, /* @__PURE__ */ React.createElement(Text, { bold: true }, "Search models:"), /* @__PURE__ */ React.createElement(
-        TextInput,
-        {
-          placeholder: "Type to filter models...",
-          value: modelSearchQuery,
-          onChange: handleModelSearchChange,
-          columns: 100,
-          cursorOffset: modelSearchCursorOffset,
-          onChangeCursorOffset: handleModelSearchCursorOffsetChange,
-          showCursor: true,
-          focus: true
-        }
-      )), modelOptions.length > 0 ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-        Select,
-        {
-          options: modelOptions,
-          onChange: handleModelSelection
-        }
-      ), /* @__PURE__ */ React.createElement(Text, { color: SEMANTIC_COLORS.dim }, "Showing ", modelOptions.length, " of ", availableModels.length, " ", "models")) : /* @__PURE__ */ React.createElement(Box, null, availableModels.length > 0 ? /* @__PURE__ */ React.createElement(Text, { color: SEMANTIC_COLORS.running }, "No models match your search. Try a different query.") : /* @__PURE__ */ React.createElement(Text, { color: SEMANTIC_COLORS.running }, "No models available for this provider.")), /* @__PURE__ */ React.createElement(Box, { marginTop: 1 }, /* @__PURE__ */ React.createElement(Text, { color: SEMANTIC_COLORS.dim }, "Press ", /* @__PURE__ */ React.createElement(Text, { color: theme.suggestion }, "Esc"), " to go back to API key input")))
-    ));
+        title: `${t("modelSelector.modelSelectionTitle")} \u2014 ${providerLabel}`,
+        subtitle,
+        items: modelSelectorItems,
+        onSelect: (item) => handleModelSelection(item.id),
+        onClose: handleBack
+      }
+    );
   }
   if (currentScreen === "modelParams") {
     const formFields = getFormFieldsForModelParams();
-    return /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", gap: 1 }, /* @__PURE__ */ React.createElement(
-      Box,
-      {
-        flexDirection: "column",
-        gap: 1,
-        borderStyle: "round",
-        borderColor: theme.secondaryBorder,
-        paddingX: 2,
-        paddingY: 1
-      },
-      /* @__PURE__ */ React.createElement(Text, { bold: true }, "Model Parameters", " ", exitState.pending ? `(press ${exitState.keyName} again to exit)` : ""),
-      /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", gap: 1 }, /* @__PURE__ */ React.createElement(Text, { bold: true }, "Configure parameters for ", selectedModel, ":"), /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", width: 70 }, /* @__PURE__ */ React.createElement(Text, { color: theme.secondaryText }, "Use ", /* @__PURE__ */ React.createElement(Text, { color: theme.suggestion }, "Tab"), " to navigate between fields. Press", " ", /* @__PURE__ */ React.createElement(Text, { color: theme.suggestion }, "Enter"), " to submit.")), /* @__PURE__ */ React.createElement(Box, { flexDirection: "column" }, formFields.map((field, index) => /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", marginY: 1, key: field.name }, field.component !== "button" ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-        Text,
-        {
-          bold: true,
-          color: activeFieldIndex === index ? theme.success : void 0
-        },
-        field.label
-      ), field.description && /* @__PURE__ */ React.createElement(Text, { color: theme.secondaryText }, field.description)) : /* @__PURE__ */ React.createElement(
-        Text,
-        {
-          bold: true,
-          color: activeFieldIndex === index ? theme.success : void 0
-        },
-        field.label
-      ), /* @__PURE__ */ React.createElement(Box, { marginY: 1 }, activeFieldIndex === index ? field.component === "select" ? field.name === "maxTokens" ? /* @__PURE__ */ React.createElement(
-        Select,
+    const currentField = formFields[activeFieldIndex];
+    if (currentField?.name === "maxTokens") {
+      const maxTokensItems = MAX_TOKENS_OPTIONS.map((opt) => ({
+        id: opt.value.toString(),
+        label: opt.label,
+        isCurrent: opt.value === parseInt(maxTokens)
+      }));
+      return /* @__PURE__ */ React.createElement(
+        SimpleSelector,
         {
-          options: field.options || [],
-          onChange: (value) => {
-            const numValue = parseInt(value);
+          title: `${t("modelSelector.modelParamsTitle")} \u2014 ${t("modelSelector.maxTokens")}`,
+          subtitle: selectedModel,
+          items: maxTokensItems,
+          onSelect: (item) => {
+            const numValue = parseInt(item.id);
             setMaxTokens(numValue.toString());
             setSelectedMaxTokensPreset(numValue);
-            setMaxTokensCursorOffset(
-              numValue.toString().length
-            );
-            setTimeout(() => {
-              setActiveFieldIndex(index + 1);
-            }, 100);
+            setMaxTokensCursorOffset(numValue.toString().length);
+            setActiveFieldIndex(activeFieldIndex + 1);
           },
-          defaultValue: field.defaultValue
+          onClose: handleBack
         }
-      ) : /* @__PURE__ */ React.createElement(
-        Select,
+      );
+    }
+    if (currentField?.name === "reasoningEffort") {
+      const effortItems = reasoningEffortOptions.map((opt) => ({
+        id: opt.value,
+        label: opt.label,
+        isCurrent: opt.value === reasoningEffort
+      }));
+      return /* @__PURE__ */ React.createElement(
+        SimpleSelector,
         {
-          options: reasoningEffortOptions,
-          onChange: (value) => {
-            setReasoningEffort(value);
-            setTimeout(() => {
-              setActiveFieldIndex(index + 1);
-            }, 100);
+          title: `${t("modelSelector.modelParamsTitle")} \u2014 ${t("modelSelector.reasoningEffort")}`,
+          subtitle: selectedModel,
+          items: effortItems,
+          onSelect: (item) => {
+            setReasoningEffort(item.id);
+            setActiveFieldIndex(activeFieldIndex + 1);
           },
-          defaultValue: reasoningEffort
+          onClose: () => {
+            setActiveFieldIndex(0);
+          }
         }
-      ) : null : field.name === "maxTokens" ? /* @__PURE__ */ React.createElement(Text, { color: theme.secondaryText }, "Current:", " ", /* @__PURE__ */ React.createElement(Text, { color: theme.suggestion }, MAX_TOKENS_OPTIONS.find(
-        (opt) => opt.value === parseInt(maxTokens)
-      )?.label || `${maxTokens} tokens`)) : field.name === "reasoningEffort" ? /* @__PURE__ */ React.createElement(Text, { color: theme.secondaryText }, "Current:", " ", /* @__PURE__ */ React.createElement(Text, { color: theme.suggestion }, reasoningEffort)) : null))), /* @__PURE__ */ React.createElement(Box, { marginTop: 1 }, /* @__PURE__ */ React.createElement(Text, { color: SEMANTIC_COLORS.dim }, "Press ", /* @__PURE__ */ React.createElement(Text, { color: theme.suggestion }, "Tab"), " to navigate,", " ", /* @__PURE__ */ React.createElement(Text, { color: theme.suggestion }, "Enter"), " to continue, or", " ", /* @__PURE__ */ React.createElement(Text, { color: theme.suggestion }, "Esc"), " to go back"))))
-    ));
+      );
+    }
+    handleModelParamsSubmit();
+    return null;
   }
   if (currentScreen === "resourceName") {
-    return /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", gap: 1 }, /* @__PURE__ */ React.createElement(
-      Box,
+    return /* @__PURE__ */ React.createElement(
+      BrandTextInput,
       {
-        flexDirection: "column",
-        gap: 1,
-        borderStyle: "round",
-        borderColor: theme.secondaryBorder,
-        paddingX: 2,
-        paddingY: 1
-      },
-      /* @__PURE__ */ React.createElement(Text, { bold: true }, "Azure Resource Setup", " ", exitState.pending ? `(press ${exitState.keyName} again to exit)` : ""),
-      /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", gap: 1 }, /* @__PURE__ */ React.createElement(Text, { bold: true }, "Enter your Azure OpenAI resource name:"), /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", width: 70 }, /* @__PURE__ */ React.createElement(Text, { color: theme.secondaryText }, "This is the name of your Azure OpenAI resource (without the full domain).", /* @__PURE__ */ React.createElement(Newline, null), 'For example, if your endpoint is "https://myresource.openai.azure.com", enter "myresource".')), /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(
-        TextInput,
-        {
-          placeholder: "myazureresource",
-          value: resourceName,
-          onChange: setResourceName,
-          onSubmit: handleResourceNameSubmit,
-          columns: 100,
-          cursorOffset: resourceNameCursorOffset,
-          onChangeCursorOffset: setResourceNameCursorOffset,
-          showCursor: true
-        }
-      )), /* @__PURE__ */ React.createElement(Box, { marginTop: 1 }, /* @__PURE__ */ React.createElement(Text, null, /* @__PURE__ */ React.createElement(
-        Text,
-        {
-          color: resourceName ? theme.suggestion : SEMANTIC_COLORS.dim
-        },
-        "[Submit Resource Name]"
-      ), /* @__PURE__ */ React.createElement(Text, null, " - Press Enter or click to continue"))), /* @__PURE__ */ React.createElement(Box, { marginTop: 1 }, /* @__PURE__ */ React.createElement(Text, { color: SEMANTIC_COLORS.dim }, "Press ", /* @__PURE__ */ React.createElement(Text, { color: theme.suggestion }, "Enter"), " to continue or", " ", /* @__PURE__ */ React.createElement(Text, { color: theme.suggestion }, "Esc"), " to go back")))
-    ));
+        title: t("modelSelector.resourceNameTitle"),
+        description: t("modelSelector.resourceNameDesc"),
+        placeholder: "myazureresource",
+        value: resourceName,
+        onChange: setResourceName,
+        onSubmit: handleResourceNameSubmit,
+        footerHint: t("modelSelector.footerEnterContinue"),
+        cursorOffset: resourceNameCursorOffset,
+        onChangeCursorOffset: setResourceNameCursorOffset
+      }
+    );
   }
   if (currentScreen === "baseUrl") {
     const isCustomOpenAI = selectedProvider === "custom-openai";
     if (isCustomOpenAI) {
-      return /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", gap: 1 }, /* @__PURE__ */ React.createElement(
-        Box,
+      return /* @__PURE__ */ React.createElement(
+        BrandTextInput,
         {
-          flexDirection: "column",
-          gap: 1,
-          borderStyle: "round",
-          borderColor: theme.secondaryBorder,
-          paddingX: 2,
-          paddingY: 1
-        },
-        /* @__PURE__ */ React.createElement(Text, { bold: true }, "Custom API Server Setup", " ", exitState.pending ? `(press ${exitState.keyName} again to exit)` : ""),
-        /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", gap: 1 }, /* @__PURE__ */ React.createElement(Text, { bold: true }, "Enter your custom API URL:"), /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", width: 70 }, /* @__PURE__ */ React.createElement(Text, { color: theme.secondaryText }, "This is the base URL for your OpenAI-compatible API.", /* @__PURE__ */ React.createElement(Newline, null), "For example: https://api.example.com/v1")), /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(
-          TextInput,
-          {
-            placeholder: "https://api.example.com/v1",
-            value: customBaseUrl,
-            onChange: setCustomBaseUrl,
-            onSubmit: handleCustomBaseUrlSubmit,
-            columns: 100,
-            cursorOffset: customBaseUrlCursorOffset,
-            onChangeCursorOffset: setCustomBaseUrlCursorOffset,
-            showCursor: !isLoadingModels,
-            focus: !isLoadingModels
-          }
-        )), /* @__PURE__ */ React.createElement(Box, { marginTop: 1 }, /* @__PURE__ */ React.createElement(Text, null, /* @__PURE__ */ React.createElement(
-          Text,
-          {
-            color: isLoadingModels ? theme.secondaryText : theme.suggestion
-          },
-          "[Submit Base URL]"
-        ), /* @__PURE__ */ React.createElement(Text, null, " - Press Enter or click to continue"))), /* @__PURE__ */ React.createElement(Box, { marginTop: 1 }, /* @__PURE__ */ React.createElement(Text, { color: SEMANTIC_COLORS.dim }, "Press ", /* @__PURE__ */ React.createElement(Text, { color: theme.suggestion }, "Enter"), " to continue or ", /* @__PURE__ */ React.createElement(Text, { color: theme.suggestion }, "Esc"), " to go back")))
-      ));
+          title: t("modelSelector.customApiTitle"),
+          description: t("modelSelector.customApiDesc"),
+          placeholder: "https://api.example.com/v1",
+          value: customBaseUrl,
+          onChange: setCustomBaseUrl,
+          onSubmit: handleCustomBaseUrlSubmit,
+          isLoading: isLoadingModels,
+          loadingText: "Connecting...",
+          error: modelLoadError ? `Error: ${modelLoadError}` : null,
+          footerHint: t("modelSelector.footerEnterContinue"),
+          cursorOffset: customBaseUrlCursorOffset,
+          onChangeCursorOffset: setCustomBaseUrlCursorOffset
+        }
+      );
     }
     const providerName = providers[selectedProvider]?.name || selectedProvider;
     const defaultUrl = providers[selectedProvider]?.baseURL || "";
-    return /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", gap: 1 }, /* @__PURE__ */ React.createElement(
-      Box,
+    const desc = selectedProvider === "ollama" ? t("modelSelector.baseUrlOllamaDesc") : `${t("modelSelector.baseUrlDesc")} You can modify this URL or press Enter to use the default.`;
+    return /* @__PURE__ */ React.createElement(
+      BrandTextInput,
       {
-        flexDirection: "column",
-        gap: 1,
-        borderStyle: "round",
-        borderColor: theme.secondaryBorder,
-        paddingX: 2,
-        paddingY: 1
-      },
-      /* @__PURE__ */ React.createElement(Text, { bold: true }, providerName, " API Configuration", " ", exitState.pending ? `(press ${exitState.keyName} again to exit)` : ""),
-      /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", gap: 1 }, /* @__PURE__ */ React.createElement(Text, { bold: true }, "Configure the API endpoint for ", providerName, ":"), /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", width: 70 }, /* @__PURE__ */ React.createElement(Text, { color: theme.secondaryText }, selectedProvider === "ollama" ? /* @__PURE__ */ React.createElement(React.Fragment, null, "This is the URL of your Ollama server.", /* @__PURE__ */ React.createElement(Newline, null), "Default is http://localhost:11434/v1 for local Ollama installations.") : /* @__PURE__ */ React.createElement(React.Fragment, null, "This is the base URL for the ", providerName, " API.", /* @__PURE__ */ React.createElement(Newline, null), "You can modify this URL or press Enter to use the default."))), /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(
-        TextInput,
-        {
-          placeholder: defaultUrl,
-          value: providerBaseUrl,
-          onChange: setProviderBaseUrl,
-          onSubmit: handleProviderBaseUrlSubmit,
-          columns: 100,
-          cursorOffset: providerBaseUrlCursorOffset,
-          onChangeCursorOffset: setProviderBaseUrlCursorOffset,
-          showCursor: !isLoadingModels,
-          focus: !isLoadingModels
-        }
-      )), /* @__PURE__ */ React.createElement(Box, { marginTop: 1 }, /* @__PURE__ */ React.createElement(Text, null, /* @__PURE__ */ React.createElement(
-        Text,
-        {
-          color: isLoadingModels ? theme.secondaryText : theme.suggestion
-        },
-        "[Submit Base URL]"
-      ), /* @__PURE__ */ React.createElement(Text, null, " - Press Enter or click to continue"))), isLoadingModels && /* @__PURE__ */ React.createElement(Box, { marginTop: 1 }, /* @__PURE__ */ React.createElement(Text, { color: theme.success }, selectedProvider === "ollama" ? "Connecting to Ollama server..." : `Connecting to ${providerName}...`)), modelLoadError && /* @__PURE__ */ React.createElement(Box, { marginTop: 1 }, /* @__PURE__ */ React.createElement(Text, { color: SEMANTIC_COLORS.error }, "Error: ", modelLoadError)), /* @__PURE__ */ React.createElement(Box, { marginTop: 1 }, /* @__PURE__ */ React.createElement(Text, { color: SEMANTIC_COLORS.dim }, "Press ", /* @__PURE__ */ React.createElement(Text, { color: theme.suggestion }, "Enter"), " to continue or", " ", /* @__PURE__ */ React.createElement(Text, { color: theme.suggestion }, "Esc"), " to go back")))
-    ));
+        title: `${t("modelSelector.baseUrlTitle")} \u2014 ${providerName}`,
+        description: desc,
+        placeholder: defaultUrl,
+        value: providerBaseUrl,
+        onChange: setProviderBaseUrl,
+        onSubmit: handleProviderBaseUrlSubmit,
+        isLoading: isLoadingModels,
+        loadingText: selectedProvider === "ollama" ? "Connecting to Ollama server..." : `Connecting to ${providerName}...`,
+        error: modelLoadError ? `Error: ${modelLoadError}` : null,
+        footerHint: t("modelSelector.footerEnterContinue"),
+        cursorOffset: providerBaseUrlCursorOffset,
+        onChangeCursorOffset: setProviderBaseUrlCursorOffset
+      }
+    );
   }
   if (currentScreen === "modelInput") {
-    const modelTypeText = "this model profile";
-    let screenTitle = "Manual Model Setup";
-    let description = "Enter the model name manually";
-    let placeholder = "gpt-4";
-    let examples = 'For example: "gpt-4", "gpt-3.5-turbo", etc.';
-    if (selectedProvider === "azure") {
-      screenTitle = "Azure Model Setup";
-      description = `Enter your Azure OpenAI deployment name for ${modelTypeText}:`;
-      examples = 'For example: "gpt-4", "gpt-35-turbo", etc.';
-      placeholder = "gpt-4";
-    } else if (selectedProvider === "anthropic") {
-      screenTitle = "Claude Model Setup";
-      description = `Enter the Claude model name for ${modelTypeText}:`;
-      examples = 'For example: "claude-3-5-sonnet-latest", "claude-3-5-haiku-latest", etc.';
-      placeholder = "claude-3-5-sonnet-latest";
-    } else if (selectedProvider === "bigdream") {
-      screenTitle = "BigDream Model Setup";
-      description = `Enter the BigDream model name for ${modelTypeText}:`;
-      examples = 'For example: "claude-3-5-sonnet-latest", "claude-3-5-haiku-latest", etc.';
-      placeholder = "claude-3-5-sonnet-latest";
-    } else if (selectedProvider === "kimi") {
-      screenTitle = "Kimi Model Setup";
-      description = `Enter the Kimi model name for ${modelTypeText}:`;
-      examples = 'For example: "kimi-k2-0711-preview"';
-      placeholder = "kimi-k2-0711-preview";
-    } else if (selectedProvider === "deepseek") {
-      screenTitle = "DeepSeek Model Setup";
-      description = `Enter the DeepSeek model name for ${modelTypeText}:`;
-      examples = 'For example: "deepseek-chat", "deepseek-coder", "deepseek-reasoner", etc.';
-      placeholder = "deepseek-chat";
-    } else if (selectedProvider === "siliconflow") {
-      screenTitle = "SiliconFlow Model Setup";
-      description = `Enter the SiliconFlow model name for ${modelTypeText}:`;
-      examples = 'For example: "Qwen/Qwen2.5-72B-Instruct", "meta-llama/Meta-Llama-3.1-8B-Instruct", etc.';
-      placeholder = "Qwen/Qwen2.5-72B-Instruct";
-    } else if (selectedProvider === "qwen") {
-      screenTitle = "Qwen Model Setup";
-      description = `Enter the Qwen model name for ${modelTypeText}:`;
-      examples = 'For example: "qwen-plus", "qwen-turbo", "qwen-max", etc.';
-      placeholder = "qwen-plus";
-    } else if (selectedProvider === "glm") {
-      screenTitle = "GLM Model Setup";
-      description = `Enter the GLM model name for ${modelTypeText}:`;
-      examples = 'For example: "glm-4", "glm-4v", "glm-3-turbo", etc.';
-      placeholder = "glm-4";
-    } else if (selectedProvider === "minimax") {
-      screenTitle = "MiniMax Model Setup";
-      description = `Enter the MiniMax model name for ${modelTypeText}:`;
-      examples = 'For example: "abab6.5s-chat", "abab6.5g-chat", "abab5.5s-chat", etc.';
-      placeholder = "abab6.5s-chat";
-    } else if (selectedProvider === "baidu-qianfan") {
-      screenTitle = "Baidu Qianfan Model Setup";
-      description = `Enter the Baidu Qianfan model name for ${modelTypeText}:`;
-      examples = 'For example: "ERNIE-4.0-8K", "ERNIE-3.5-8K", "ERNIE-Speed-128K", etc.';
-      placeholder = "ERNIE-4.0-8K";
-    } else if (selectedProvider === "custom-openai") {
-      screenTitle = "Custom API Model Setup";
-      description = `Enter the model name for ${modelTypeText}:`;
-      examples = "Enter the exact model name as supported by your API endpoint.";
-      placeholder = "model-name";
-    }
-    return /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", gap: 1 }, /* @__PURE__ */ React.createElement(
-      Box,
-      {
-        flexDirection: "column",
-        gap: 1,
-        borderStyle: "round",
-        borderColor: theme.secondaryBorder,
-        paddingX: 2,
-        paddingY: 1
+    const modelInputConfig = {
+      azure: {
+        title: "Azure Model Setup",
+        placeholder: "gpt-4",
+        examples: 'e.g. "gpt-4", "gpt-35-turbo"'
       },
-      /* @__PURE__ */ React.createElement(Text, { bold: true }, screenTitle, " ", exitState.pending ? `(press ${exitState.keyName} again to exit)` : ""),
-      /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", gap: 1 }, /* @__PURE__ */ React.createElement(Text, { bold: true }, description), /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", width: 70 }, /* @__PURE__ */ React.createElement(Text, { color: theme.secondaryText }, selectedProvider === "azure" ? "This is the deployment name you configured in your Azure OpenAI resource." : selectedProvider === "anthropic" ? "This should be a valid Claude model identifier from Claude." : selectedProvider === "bigdream" ? "This should be a valid Claude model identifier supported by BigDream." : selectedProvider === "kimi" ? "This should be a valid Kimi model identifier from Moonshot AI." : selectedProvider === "deepseek" ? "This should be a valid DeepSeek model identifier." : selectedProvider === "siliconflow" ? "This should be a valid SiliconFlow model identifier." : selectedProvider === "qwen" ? "This should be a valid Qwen model identifier from Alibaba Cloud." : selectedProvider === "glm" ? "This should be a valid GLM model identifier from Zhipu AI." : selectedProvider === "minimax" ? "This should be a valid MiniMax model identifier." : selectedProvider === "baidu-qianfan" ? "This should be a valid Baidu Qianfan model identifier." : "This should match the model name supported by your API endpoint.", /* @__PURE__ */ React.createElement(Newline, null), examples)), /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(
-        TextInput,
-        {
-          placeholder,
-          value: customModelName,
-          onChange: setCustomModelName,
-          onSubmit: handleCustomModelSubmit,
-          columns: 100,
-          cursorOffset: customModelNameCursorOffset,
-          onChangeCursorOffset: setCustomModelNameCursorOffset,
-          showCursor: true
-        }
-      )), /* @__PURE__ */ React.createElement(Box, { marginTop: 1 }, /* @__PURE__ */ React.createElement(Text, null, /* @__PURE__ */ React.createElement(
-        Text,
-        {
-          color: customModelName ? theme.suggestion : SEMANTIC_COLORS.dim
-        },
-        "[Submit Model Name]"
-      ), /* @__PURE__ */ React.createElement(Text, null, " - Press Enter or click to continue"))), /* @__PURE__ */ React.createElement(Box, { marginTop: 1 }, /* @__PURE__ */ React.createElement(Text, { color: SEMANTIC_COLORS.dim }, "Press ", /* @__PURE__ */ React.createElement(Text, { color: theme.suggestion }, "Enter"), " to continue or", " ", /* @__PURE__ */ React.createElement(Text, { color: theme.suggestion }, "Esc"), " to go back")))
-    ));
-  }
-  if (currentScreen === "contextLength") {
-    const selectedOption = CONTEXT_LENGTH_OPTIONS.find((opt) => opt.value === contextLength) || CONTEXT_LENGTH_OPTIONS[2];
-    return /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", gap: 1 }, /* @__PURE__ */ React.createElement(
-      Box,
-      {
-        flexDirection: "column",
-        gap: 1,
-        borderStyle: "round",
-        borderColor: theme.secondaryBorder,
-        paddingX: 2,
-        paddingY: 1
+      anthropic: {
+        title: "Claude Model Setup",
+        placeholder: "claude-3-5-sonnet-latest",
+        examples: 'e.g. "claude-3-5-sonnet-latest", "claude-3-5-haiku-latest"'
       },
-      /* @__PURE__ */ React.createElement(Text, { bold: true }, "Context Length Configuration", " ", exitState.pending ? `(press ${exitState.keyName} again to exit)` : ""),
-      /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", gap: 1 }, /* @__PURE__ */ React.createElement(Text, { bold: true }, "Choose the context window length for your model:"), /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", width: 70 }, /* @__PURE__ */ React.createElement(Text, { color: theme.secondaryText }, "This determines how much conversation history and context the model can process at once. Higher values allow for longer conversations but may increase costs.")), /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", marginY: 1 }, CONTEXT_LENGTH_OPTIONS.map((option, index) => {
-        const isSelected = option.value === contextLength;
-        return /* @__PURE__ */ React.createElement(Box, { key: option.value, flexDirection: "row" }, /* @__PURE__ */ React.createElement(Text, { color: isSelected ? "blue" : void 0 }, isSelected ? "\u2192 " : "  ", option.label, option.value === DEFAULT_CONTEXT_LENGTH ? " (recommended)" : ""));
-      })), /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", marginY: 1 }, /* @__PURE__ */ React.createElement(Text, { color: SEMANTIC_COLORS.dim }, "Selected:", " ", /* @__PURE__ */ React.createElement(Text, { color: theme.suggestion }, selectedOption.label))))
-    ), /* @__PURE__ */ React.createElement(Box, { marginLeft: 1 }, /* @__PURE__ */ React.createElement(Text, { color: SEMANTIC_COLORS.dim }, "\u2191/\u2193 to select \xB7 Enter to continue \xB7 Esc to go back")));
+      bigdream: {
+        title: "BigDream Model Setup",
+        placeholder: "claude-3-5-sonnet-latest",
+        examples: 'e.g. "claude-3-5-sonnet-latest", "claude-3-5-haiku-latest"'
+      },
+      kimi: {
+        title: "Kimi Model Setup",
+        placeholder: "kimi-k2-0711-preview",
+        examples: 'e.g. "kimi-k2-0711-preview"'
+      },
+      deepseek: {
+        title: "DeepSeek Model Setup",
+        placeholder: "deepseek-chat",
+        examples: 'e.g. "deepseek-chat", "deepseek-coder", "deepseek-reasoner"'
+      },
+      siliconflow: {
+        title: "SiliconFlow Model Setup",
+        placeholder: "Qwen/Qwen2.5-72B-Instruct",
+        examples: 'e.g. "Qwen/Qwen2.5-72B-Instruct"'
+      },
+      qwen: {
+        title: "Qwen Model Setup",
+        placeholder: "qwen-plus",
+        examples: 'e.g. "qwen-plus", "qwen-turbo", "qwen-max"'
+      },
+      glm: {
+        title: "GLM Model Setup",
+        placeholder: "glm-4",
+        examples: 'e.g. "glm-4", "glm-4v", "glm-3-turbo"'
+      },
+      minimax: {
+        title: "MiniMax Model Setup",
+        placeholder: "abab6.5s-chat",
+        examples: 'e.g. "abab6.5s-chat", "abab6.5g-chat"'
+      },
+      "baidu-qianfan": {
+        title: "Baidu Qianfan Model Setup",
+        placeholder: "ERNIE-4.0-8K",
+        examples: 'e.g. "ERNIE-4.0-8K", "ERNIE-3.5-8K"'
+      },
+      "custom-openai": {
+        title: "Custom API Model Setup",
+        placeholder: "model-name",
+        examples: "Enter the exact model name supported by your API endpoint."
+      }
+    };
+    const cfg = modelInputConfig[selectedProvider] || {
+      title: t("modelSelector.modelInputTitle"),
+      placeholder: "gpt-4",
+      examples: 'e.g. "gpt-4", "gpt-3.5-turbo"'
+    };
+    return /* @__PURE__ */ React.createElement(
+      BrandTextInput,
+      {
+        title: cfg.title,
+        description: cfg.examples,
+        placeholder: cfg.placeholder,
+        value: customModelName,
+        onChange: setCustomModelName,
+        onSubmit: handleCustomModelSubmit,
+        footerHint: t("modelSelector.footerEnterContinue"),
+        cursorOffset: customModelNameCursorOffset,
+        onChangeCursorOffset: setCustomModelNameCursorOffset
+      }
+    );
   }
-  if (currentScreen === "connectionTest") {
-    const providerDisplayName = getProviderLabel(selectedProvider, 0).split(
-      " ("
-    )[0];
-    return /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", gap: 1 }, /* @__PURE__ */ React.createElement(
-      Box,
+  if (currentScreen === "contextLength") {
+    const contextItems = CONTEXT_LENGTH_OPTIONS.map((opt) => ({
+      id: opt.value.toString(),
+      label: opt.value === DEFAULT_CONTEXT_LENGTH ? `${opt.label} (${t("modelSelector.recommended")})` : opt.label,
+      isCurrent: opt.value === contextLength
+    }));
+    return /* @__PURE__ */ React.createElement(
+      SimpleSelector,
       {
-        flexDirection: "column",
-        gap: 1,
-        borderStyle: "round",
-        borderColor: theme.secondaryBorder,
-        paddingX: 2,
-        paddingY: 1
-      },
-      /* @__PURE__ */ React.createElement(Text, { bold: true }, "Connection Test", " ", exitState.pending ? `(press ${exitState.keyName} again to exit)` : ""),
-      /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", gap: 1 }, /* @__PURE__ */ React.createElement(Text, { bold: true }, "Testing connection to ", providerDisplayName, "..."), /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", width: 70 }, /* @__PURE__ */ React.createElement(Text, { color: theme.secondaryText }, "This will verify your configuration by sending a test request to the API.", selectedProvider === "minimax" && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Newline, null), "For MiniMax, we'll test both v2 and v1 endpoints to find the best one."))), !connectionTestResult && !isTestingConnection && /* @__PURE__ */ React.createElement(Box, { marginY: 1 }, /* @__PURE__ */ React.createElement(Text, null, /* @__PURE__ */ React.createElement(Text, { color: theme.suggestion }, "Press Enter"), " to start the connection test")), isTestingConnection && /* @__PURE__ */ React.createElement(Box, { marginY: 1 }, /* @__PURE__ */ React.createElement(Text, { color: theme.suggestion }, "\u{1F504} Testing connection...")), connectionTestResult && /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", marginY: 1, paddingX: 1 }, /* @__PURE__ */ React.createElement(
-        Text,
-        {
-          color: connectionTestResult.success ? theme.success : "red"
+        title: t("modelSelector.contextLengthTitle"),
+        subtitle: t("modelSelector.contextLengthDesc"),
+        items: contextItems,
+        onSelect: (item) => {
+          setContextLength(parseInt(item.id));
+          handleContextLengthSubmit();
         },
-        connectionTestResult.message
-      ), connectionTestResult.endpoint && /* @__PURE__ */ React.createElement(Text, { color: theme.secondaryText }, "Endpoint: ", connectionTestResult.endpoint), connectionTestResult.details && /* @__PURE__ */ React.createElement(Text, { color: theme.secondaryText }, "Details: ", connectionTestResult.details), connectionTestResult.success ? /* @__PURE__ */ React.createElement(Box, { marginTop: 1 }, /* @__PURE__ */ React.createElement(Text, { color: theme.success }, "\u2705 Automatically proceeding to confirmation...")) : /* @__PURE__ */ React.createElement(Box, { marginTop: 1 }, /* @__PURE__ */ React.createElement(Text, null, /* @__PURE__ */ React.createElement(Text, { color: theme.suggestion }, "Press Enter"), " to retry test, or ", /* @__PURE__ */ React.createElement(Text, { color: theme.suggestion }, "Esc"), " to go back"))), /* @__PURE__ */ React.createElement(Box, { marginTop: 1 }, /* @__PURE__ */ React.createElement(Text, { color: SEMANTIC_COLORS.dim }, "Press ", /* @__PURE__ */ React.createElement(Text, { color: theme.suggestion }, "Esc"), " to go back to context length")))
-    ));
+        onClose: handleBack
+      }
+    );
   }
-  if (currentScreen === "confirmation") {
+  if (currentScreen === "testAndSave") {
     const providerDisplayName = getProviderLabel(selectedProvider, 0).split(
       " ("
     )[0];
     const showsApiKey = selectedProvider !== "ollama";
-    return /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", gap: 1 }, /* @__PURE__ */ React.createElement(
-      Box,
+    const contextLengthLabel = CONTEXT_LENGTH_OPTIONS.find((opt) => opt.value === contextLength)?.label || `${contextLength.toLocaleString()} tokens`;
+    if (isEditMode) {
+      const editItems = [];
+      if (showsApiKey) {
+        editItems.push({
+          id: "__edit_apiKey__",
+          label: "API Key",
+          description: apiKey ? `****${apiKey.slice(-4)}` : "(not set)",
+          category: t("modelSelector.testAndSaveDesc")
+        });
+      }
+      if (selectedProvider === "custom-openai" || providerBaseUrl !== providers[selectedProvider]?.baseURL) {
+        editItems.push({
+          id: "__edit_baseUrl__",
+          label: "Base URL",
+          description: providerBaseUrl || customBaseUrl || "(not set)",
+          category: t("modelSelector.testAndSaveDesc")
+        });
+      }
+      editItems.push({
+        id: "__edit_modelParams__",
+        label: "Max Tokens",
+        description: maxTokens,
+        category: t("modelSelector.testAndSaveDesc")
+      });
+      editItems.push({
+        id: "__edit_contextLength__",
+        label: "Context Length",
+        description: contextLengthLabel,
+        category: t("modelSelector.testAndSaveDesc")
+      });
+      if (connectionTestResult) {
+        editItems.push({
+          id: "__test_status__",
+          label: "Connection",
+          description: connectionTestResult.message,
+          statusIcon: connectionTestResult.success ? "\u2713" : "\u2715",
+          statusColor: connectionTestResult.success ? SEMANTIC_COLORS.success : SEMANTIC_COLORS.error,
+          category: t("modelSelector.testAndSaveDesc")
+        });
+      }
+      editItems.push({
+        id: "__save__",
+        label: t("modelSelector.confirmationSave"),
+        category: t("commands.model.actionsCategory"),
+        statusIcon: "\u2713",
+        statusColor: SEMANTIC_COLORS.success
+      });
+      editItems.push({
+        id: "__test__",
+        label: t("modelSelector.connectionTestRetry"),
+        category: t("commands.model.actionsCategory")
+      });
+      const editTitle = t("commands.model.editTitle").replace(
+        "{model}",
+        editingModel?.name ?? selectedModel
+      );
+      const editOverlay = isTestingConnection ? {
+        type: "loading",
+        message: t("modelSelector.autoTesting")
+      } : validationError ? { type: "error", message: validationError } : null;
+      return /* @__PURE__ */ React.createElement(
+        SimpleSelector,
+        {
+          title: editTitle,
+          items: editItems,
+          groupByCategory: true,
+          onSelect: (item) => {
+            if (item.id === "__edit_apiKey__") {
+              navigateTo("apiKey");
+            } else if (item.id === "__edit_baseUrl__") {
+              navigateTo("baseUrl");
+            } else if (item.id === "__edit_modelParams__") {
+              setActiveFieldIndex(0);
+              navigateTo("modelParams");
+            } else if (item.id === "__edit_contextLength__") {
+              navigateTo("contextLength");
+            } else if (item.id === "__save__") {
+              handleConfirmation().catch((error) => {
+                setValidationError(
+                  error instanceof Error ? error.message : "Unexpected error occurred"
+                );
+              });
+            } else if (item.id === "__test__") {
+              setConnectionTestResult(null);
+              handleConnectionTest();
+            }
+          },
+          onClose: handleBack,
+          statusOverlay: editOverlay
+        }
+      );
+    }
+    const configItems = [
+      { label: "Provider", value: providerDisplayName },
+      ...selectedProvider === "azure" ? [{ label: "Resource Name", value: resourceName }] : [],
+      ...selectedProvider === "ollama" ? [{ label: "Server URL", value: ollamaBaseUrl }] : [],
+      ...selectedProvider === "custom-openai" ? [{ label: "API Base URL", value: customBaseUrl }] : [],
+      { label: "Model", value: selectedModel },
+      ...apiKey && showsApiKey ? [{ label: "API Key", value: `****${apiKey.slice(-4)}` }] : [],
+      ...maxTokens ? [{ label: "Max Tokens", value: maxTokens }] : [],
+      { label: "Context Length", value: contextLengthLabel },
+      ...supportsReasoningEffort ? [{ label: "Reasoning Effort", value: reasoningEffort }] : []
+    ];
+    if (connectionTestResult) {
+      configItems.push({
+        label: "Connection",
+        value: connectionTestResult.message,
+        valueColor: connectionTestResult.success ? SEMANTIC_COLORS.success : SEMANTIC_COLORS.error
+      });
+      if (connectionTestResult.details && !connectionTestResult.success) {
+        configItems.push({
+          label: "Details",
+          value: connectionTestResult.details
+        });
+      }
+    }
+    const testAndSaveSections = [
       {
-        flexDirection: "column",
-        gap: 1,
-        borderStyle: "round",
-        borderColor: theme.secondaryBorder,
-        paddingX: 2,
-        paddingY: 1
-      },
-      /* @__PURE__ */ React.createElement(Text, { bold: true }, "Configuration Confirmation", " ", exitState.pending ? `(press ${exitState.keyName} again to exit)` : ""),
-      /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", gap: 1 }, /* @__PURE__ */ React.createElement(Text, { bold: true }, "Confirm your model configuration:"), /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", width: 70 }, /* @__PURE__ */ React.createElement(Text, { color: theme.secondaryText }, "Please review your selections before saving.")), validationError && /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", marginY: 1, paddingX: 1 }, /* @__PURE__ */ React.createElement(Text, { color: theme.error, bold: true }, "\u26A0 Configuration Error:"), /* @__PURE__ */ React.createElement(Text, { color: theme.error }, validationError)), /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", marginY: 1, paddingX: 1 }, /* @__PURE__ */ React.createElement(Text, null, /* @__PURE__ */ React.createElement(Text, { bold: true }, "Provider: "), /* @__PURE__ */ React.createElement(Text, { color: theme.suggestion }, providerDisplayName)), selectedProvider === "azure" && /* @__PURE__ */ React.createElement(Text, null, /* @__PURE__ */ React.createElement(Text, { bold: true }, "Resource Name: "), /* @__PURE__ */ React.createElement(Text, { color: theme.suggestion }, resourceName)), selectedProvider === "ollama" && /* @__PURE__ */ React.createElement(Text, null, /* @__PURE__ */ React.createElement(Text, { bold: true }, "Server URL: "), /* @__PURE__ */ React.createElement(Text, { color: theme.suggestion }, ollamaBaseUrl)), selectedProvider === "custom-openai" && /* @__PURE__ */ React.createElement(Text, null, /* @__PURE__ */ React.createElement(Text, { bold: true }, "API Base URL: "), /* @__PURE__ */ React.createElement(Text, { color: theme.suggestion }, customBaseUrl)), /* @__PURE__ */ React.createElement(Text, null, /* @__PURE__ */ React.createElement(Text, { bold: true }, "Model: "), /* @__PURE__ */ React.createElement(Text, { color: theme.suggestion }, selectedModel)), apiKey && showsApiKey && /* @__PURE__ */ React.createElement(Text, null, /* @__PURE__ */ React.createElement(Text, { bold: true }, "API Key: "), /* @__PURE__ */ React.createElement(Text, { color: theme.suggestion }, "****", apiKey.slice(-4))), maxTokens && /* @__PURE__ */ React.createElement(Text, null, /* @__PURE__ */ React.createElement(Text, { bold: true }, "Max Tokens: "), /* @__PURE__ */ React.createElement(Text, { color: theme.suggestion }, maxTokens)), /* @__PURE__ */ React.createElement(Text, null, /* @__PURE__ */ React.createElement(Text, { bold: true }, "Context Length: "), /* @__PURE__ */ React.createElement(Text, { color: theme.suggestion }, CONTEXT_LENGTH_OPTIONS.find(
-        (opt) => opt.value === contextLength
-      )?.label || `${contextLength.toLocaleString()} tokens`)), supportsReasoningEffort && /* @__PURE__ */ React.createElement(Text, null, /* @__PURE__ */ React.createElement(Text, { bold: true }, "Reasoning Effort: "), /* @__PURE__ */ React.createElement(Text, { color: theme.suggestion }, reasoningEffort))), /* @__PURE__ */ React.createElement(Box, { marginTop: 1 }, /* @__PURE__ */ React.createElement(Text, { color: SEMANTIC_COLORS.dim }, "Press ", /* @__PURE__ */ React.createElement(Text, { color: theme.suggestion }, "Esc"), " to go back to model parameters or ", /* @__PURE__ */ React.createElement(Text, { color: theme.suggestion }, "Enter"), " ", "to save configuration")))
-    ));
+        title: t("modelSelector.testAndSaveDesc"),
+        items: configItems
+      }
+    ];
+    if (validationError) {
+      testAndSaveSections.unshift({
+        title: t("modelSelector.configError"),
+        items: [
+          {
+            label: "Error",
+            value: validationError,
+            valueColor: SEMANTIC_COLORS.error
+          }
+        ]
+      });
+    }
+    const testAndSaveActions = [];
+    if (connectionTestResult?.success) {
+      testAndSaveActions.push({
+        key: "return",
+        keyLabel: "Enter",
+        description: t("modelSelector.confirmationSave"),
+        onPress: () => {
+          handleConfirmation().catch((error) => {
+            setValidationError(
+              error instanceof Error ? error.message : "Unexpected error occurred"
+            );
+          });
+        }
+      });
+    } else if (connectionTestResult && !connectionTestResult.success) {
+      testAndSaveActions.push({
+        key: "return",
+        keyLabel: "Enter",
+        description: t("modelSelector.connectionTestRetry"),
+        onPress: () => {
+          setConnectionTestResult(null);
+          handleConnectionTest();
+        }
+      });
+      testAndSaveActions.push({
+        key: "s",
+        keyLabel: "s",
+        description: t("modelSelector.saveAnyway"),
+        onPress: () => {
+          handleConfirmation().catch((error) => {
+            setValidationError(
+              error instanceof Error ? error.message : "Unexpected error occurred"
+            );
+          });
+        }
+      });
+    }
+    const testAndSaveOverlay = isTestingConnection ? {
+      type: "loading",
+      message: t("modelSelector.autoTesting")
+    } : null;
+    return /* @__PURE__ */ React.createElement(
+      InfoPanel,
+      {
+        title: t("modelSelector.testAndSaveTitle"),
+        sections: testAndSaveSections,
+        actions: testAndSaveActions,
+        onClose: handleBack,
+        statusOverlay: testAndSaveOverlay
+      }
+    );
   }
   if (currentScreen === "anthropicSubMenu") {
-    const anthropicOptions = [
-      { label: "Official Anthropic API", value: "official" },
-      { label: "BigDream (Community Proxy)", value: "bigdream" },
-      { label: "OpenDev (Community Proxy)", value: "opendev" },
-      { label: "Custom Anthropic-Compatible API", value: "custom" }
-    ];
-    return /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", gap: 1 }, /* @__PURE__ */ React.createElement(
-      Box,
+    const anthropicItems = [
       {
-        flexDirection: "column",
-        gap: 1,
-        borderStyle: "round",
-        borderColor: theme.secondaryBorder,
-        paddingX: 2,
-        paddingY: 1
+        id: "official",
+        label: t("modelSelector.anthropicOfficial"),
+        description: t("modelSelector.anthropicOfficialDesc")
       },
-      /* @__PURE__ */ React.createElement(Text, { bold: true }, "Claude Provider Selection", " ", exitState.pending ? `(press ${exitState.keyName} again to exit)` : ""),
-      /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", gap: 1 }, /* @__PURE__ */ React.createElement(Text, { bold: true }, "Choose your Anthropic API access method for this model profile:"), /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", width: 70 }, /* @__PURE__ */ React.createElement(Text, { color: theme.secondaryText }, "\u2022 ", /* @__PURE__ */ React.createElement(Text, { bold: true }, "Official Anthropic API:"), " Direct access to Anthropic's official API", /* @__PURE__ */ React.createElement(Newline, null), "\u2022 ", /* @__PURE__ */ React.createElement(Text, { bold: true }, "BigDream:"), " Community proxy providing Claude access", /* @__PURE__ */ React.createElement(Newline, null), "\u2022 ", /* @__PURE__ */ React.createElement(Text, { bold: true }, "Custom:"), " Your own Anthropic-compatible API endpoint")), /* @__PURE__ */ React.createElement(
-        Select,
-        {
-          options: anthropicOptions,
-          onChange: handleAnthropicProviderSelection
-        }
-      ), /* @__PURE__ */ React.createElement(Box, { marginTop: 1 }, /* @__PURE__ */ React.createElement(Text, { color: SEMANTIC_COLORS.dim }, "Press ", /* @__PURE__ */ React.createElement(Text, { color: theme.suggestion }, "Esc"), " to go back to provider selection")))
-    ));
+      {
+        id: "bigdream",
+        label: t("modelSelector.anthropicBigdream"),
+        description: t("modelSelector.anthropicBigdreamDesc")
+      },
+      {
+        id: "opendev",
+        label: t("modelSelector.anthropicOpendev"),
+        description: t("modelSelector.anthropicOpendevDesc")
+      },
+      {
+        id: "custom",
+        label: t("modelSelector.anthropicCustom"),
+        description: t("modelSelector.anthropicCustomDesc")
+      }
+    ];
+    return /* @__PURE__ */ React.createElement(
+      SimpleSelector,
+      {
+        title: t("modelSelector.anthropicSubMenu"),
+        subtitle: t("modelSelector.anthropicSubMenuDesc"),
+        items: anthropicItems,
+        onSelect: (item) => handleAnthropicProviderSelection(
+          item.id
+        ),
+        onClose: handleBack
+      }
+    );
   }
+  const providerSelectorItems = providerOptions.map((opt) => ({
+    id: opt.value,
+    label: opt.label
+  }));
   return /* @__PURE__ */ React.createElement(
-    ScreenContainer,
+    SimpleSelector,
     {
-      title: "Provider Selection",
-      exitState,
-      children: /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", gap: 1 }, /* @__PURE__ */ React.createElement(Text, { bold: true }, "Select your preferred AI provider for this model profile:"), /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", width: 70 }, /* @__PURE__ */ React.createElement(Text, { color: theme.secondaryText }, "Choose the provider you want to use for this model profile.", /* @__PURE__ */ React.createElement(Newline, null), "This will determine which models are available to you.")), /* @__PURE__ */ React.createElement(
-        Select,
-        {
-          options: providerOptions,
-          onChange: handleProviderSelection
+      title: t("modelSelector.providerSelection"),
+      subtitle: t("modelSelector.providerSelectionDesc"),
+      items: providerSelectorItems,
+      onSelect: (item) => handleProviderSelection(item.id),
+      onClose: () => {
+        if (onCancel) {
+          onCancel();
+        } else {
+          onDone();
         }
-      ), /* @__PURE__ */ React.createElement(Box, { marginTop: 1 }, /* @__PURE__ */ React.createElement(Text, { color: SEMANTIC_COLORS.dim }, "You can change this later by running", " ", /* @__PURE__ */ React.createElement(Text, { color: theme.suggestion }, "/model"), " again")))
+      }
     }
   );
 }