@within-7/minto 0.3.10 → 0.4.0

package/dist/components/ModelSelector/ModelSelector.js

@@ -16,6 +16,8 @@ import {
   validateGPT5Config
 } from "../../services/gpt5ConnectionTest.js";
 import { SEMANTIC_COLORS } from "../../constants/colors.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";
@@ -26,32 +28,20 @@ import {
   MAX_TOKENS_OPTIONS,
   DEFAULT_MAX_TOKENS
 } from "./constants.js";
-function printModelConfig() {
-  const config = getGlobalConfig();
-  const modelProfiles = config.modelProfiles || [];
-  const activeProfiles = modelProfiles.filter((p) => p.isActive);
-  if (activeProfiles.length === 0) {
-    return;
-  }
-}
 function ModelSelector({
   onDone: onDoneProp,
   abortController,
   targetPointer,
   isOnboarding = false,
   onCancel,
-  skipModelType = false
+  skipModelType = false,
+  editingModel
 }) {
   const config = getGlobalConfig();
-  const onDone = () => {
-    printModelConfig();
-    onDoneProp();
-  };
+  const onDone = onDoneProp;
   useExitOnCtrlCD(() => process.exit(0));
-  const getInitialScreen = () => {
-    return "provider";
-  };
-  const [screenStack, setScreenStack] = useState([getInitialScreen()]);
+  const isEditMode = !!editingModel;
+  const [screenStack, setScreenStack] = useState([isEditMode ? "testAndSave" : "provider"]);
   const currentScreen = screenStack[screenStack.length - 1];
   const navigateTo = (screen) => {
     setScreenStack((prev) => [...prev, screen]);
@@ -64,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);
@@ -89,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("");
@@ -105,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" },
@@ -142,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
@@ -234,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) {
@@ -608,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();
@@ -636,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}`);
       }
@@ -718,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();
@@ -906,6 +913,10 @@ function ModelSelector({
   }
   function handleApiKeySubmit(key) {
     setApiKey(key);
+    if (isEditMode) {
+      goBack();
+      return;
+    }
     if (selectedProvider === "azure") {
       navigateTo("resourceName");
       return;
@@ -928,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);
@@ -962,6 +982,7 @@ function ModelSelector({
   function handleCustomModelSubmit(model) {
     setCustomModelName(model);
     setSelectedModel(model);
+    setIsManualModelEntry(true);
     setSupportsReasoningEffort(false);
     setReasoningEffort(null);
     setMaxTokensMode("preset");
@@ -973,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) {
@@ -1007,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);
     }
@@ -1022,21 +1055,7 @@ 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) {
           const configValidation = validateGPT5Config({
@@ -1131,13 +1150,19 @@ function ModelSelector({
       temperature: 0,
       stream: false
     };
-    if (selectedModel && selectedModel.toLowerCase().includes("gpt-5")) {
-      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;
       }
-      if (testPayload.temperature !== void 0 && testPayload.temperature !== 1) {
-        testPayload.temperature = 1;
+      if (caps.temperatureRange === "omit") {
+        delete testPayload.temperature;
+      } else if (typeof caps.temperatureRange === "object") {
+        testPayload.temperature = Math.min(
+          testPayload.temperature,
+          caps.temperatureRange.max
+        );
       }
     }
     const headers = {
@@ -1152,7 +1177,8 @@ 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();
@@ -1226,7 +1252,8 @@ 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();
@@ -1326,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 || "";
@@ -1380,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;
@@ -1401,6 +1445,11 @@ 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();
@@ -1764,84 +1813,104 @@ function ModelSelector({
       }
     );
   }
-  if (currentScreen === "connectionTest") {
+  if (currentScreen === "testAndSave") {
     const providerDisplayName = getProviderLabel(selectedProvider, 0).split(
       " ("
     )[0];
-    const testSections = [
-      {
-        title: t("modelSelector.connectionTestDesc"),
-        items: [
-          { label: "Provider", value: providerDisplayName },
-          { label: "Model", value: selectedModel },
-          ...connectionTestResult ? [
-            {
-              label: "Status",
-              value: connectionTestResult.message,
-              valueColor: connectionTestResult.success ? SEMANTIC_COLORS.success : SEMANTIC_COLORS.error
-            },
-            ...connectionTestResult.endpoint ? [
-              {
-                label: "Endpoint",
-                value: connectionTestResult.endpoint
-              }
-            ] : [],
-            ...connectionTestResult.details ? [
-              {
-                label: "Details",
-                value: connectionTestResult.details
-              }
-            ] : []
-          ] : []
-        ]
+    const showsApiKey = selectedProvider !== "ollama";
+    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")
+        });
       }
-    ];
-    const testActions = [];
-    if (!isTestingConnection && !connectionTestResult) {
-      testActions.push({
-        key: "return",
-        keyLabel: "Enter",
-        description: t("modelSelector.connectionTestStart"),
-        onPress: () => handleConnectionTest()
+      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")
       });
-    } else if (connectionTestResult && connectionTestResult.success) {
-      testActions.push({
-        key: "return",
-        keyLabel: "Enter",
-        description: t("modelSelector.continue"),
-        onPress: () => navigateTo("confirmation")
+      editItems.push({
+        id: "__edit_contextLength__",
+        label: "Context Length",
+        description: contextLengthLabel,
+        category: t("modelSelector.testAndSaveDesc")
       });
-    } else if (connectionTestResult && !connectionTestResult.success) {
-      testActions.push({
-        key: "return",
-        keyLabel: "Enter",
-        description: t("modelSelector.connectionTestRetry"),
-        onPress: () => handleConnectionTest()
+      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 testOverlay = isTestingConnection ? {
-      type: "loading",
-      message: t("modelSelector.connectionTestRunning")
-    } : connectionTestResult?.success ? {
-      type: "success",
-      message: t("modelSelector.connectionTestAutoProceeding")
-    } : null;
-    return /* @__PURE__ */ React.createElement(
-      InfoPanel,
-      {
-        title: `${t("modelSelector.connectionTestTitle")} \u2014 ${providerDisplayName}`,
-        sections: testSections,
-        actions: testActions,
-        onClose: handleBack,
-        statusOverlay: testOverlay
-      }
-    );
-  }
-  if (currentScreen === "confirmation") {
-    const providerDisplayName = getProviderLabel(selectedProvider, 0).split(
-      " ("
-    )[0];
-    const showsApiKey = selectedProvider !== "ollama";
     const configItems = [
       { label: "Provider", value: providerDisplayName },
       ...selectedProvider === "azure" ? [{ label: "Resource Name", value: resourceName }] : [],
@@ -1850,20 +1919,30 @@ function ModelSelector({
       { label: "Model", value: selectedModel },
       ...apiKey && showsApiKey ? [{ label: "API Key", value: `****${apiKey.slice(-4)}` }] : [],
       ...maxTokens ? [{ label: "Max Tokens", value: maxTokens }] : [],
-      {
-        label: "Context Length",
-        value: CONTEXT_LENGTH_OPTIONS.find((opt) => opt.value === contextLength)?.label || `${contextLength.toLocaleString()} tokens`
-      },
+      { label: "Context Length", value: contextLengthLabel },
       ...supportsReasoningEffort ? [{ label: "Reasoning Effort", value: reasoningEffort }] : []
     ];
-    const confirmSections = [
+    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 = [
       {
-        title: t("modelSelector.confirmationDesc"),
+        title: t("modelSelector.testAndSaveDesc"),
         items: configItems
       }
     ];
     if (validationError) {
-      confirmSections.unshift({
+      testAndSaveSections.unshift({
         title: t("modelSelector.configError"),
         items: [
           {
@@ -1874,8 +1953,9 @@ function ModelSelector({
         ]
       });
     }
-    const confirmActions = [
-      {
+    const testAndSaveActions = [];
+    if (connectionTestResult?.success) {
+      testAndSaveActions.push({
         key: "return",
         keyLabel: "Enter",
         description: t("modelSelector.confirmationSave"),
@@ -1886,15 +1966,42 @@ function ModelSelector({
             );
           });
         }
-      }
-    ];
+      });
+    } 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.confirmationTitle"),
-        sections: confirmSections,
-        actions: confirmActions,
-        onClose: handleBack
+        title: t("modelSelector.testAndSaveTitle"),
+        sections: testAndSaveSections,
+        actions: testAndSaveActions,
+        onClose: handleBack,
+        statusOverlay: testAndSaveOverlay
       }
     );
   }