feat(settings): auto-discover models in custom provider modal

hqhq1025 · hqhq1025 · commit d6e419992fbe · 2026-04-22T22:19:44.000+08:00
Debounced 500ms probe via config:v1:test-endpoint fires whenever
baseUrl (http/https), apiKey, or wire changes. Shows inline spinner /
success badge / failure hint next to the Default model label.

On success, the text input becomes a &lt;select&gt; with smart auto-selection
(claude-sonnet-4-5 &gt; claude-opus &gt; claude-sonnet &gt; gemini-2.5-pro &gt;
gpt-5 &gt; first in list). "Enter manually" / "Pick from list" toggles
let users override the dropdown at any time. Empty or non-http(s) URLs
are skipped so the existing manual flow is unaffected.
diff --git a/.changeset/cpa-modal-autodiscover.md b/.changeset/cpa-modal-autodiscover.md
@@ -0,0 +1,10 @@
+---
+'@open-codesign/desktop': patch
+'@open-codesign/i18n': patch
+---
+
+feat(settings): auto-discover models in custom provider modal
+
+When adding a custom provider (e.g. a CPA at http://127.0.0.1:8317), the modal now probes the endpoint automatically after the user types a valid http(s) baseUrl, debouncing 500ms. A spinner appears inline next to the "Default model" label while discovery runs, then either a green "Found N models" badge or a muted "Could not connect" hint.
+
+On success the "Default model" input becomes a `<select>` pre-populated with discovered model IDs, with smart auto-selection prioritising claude-sonnet-4-5 → claude-opus → claude-sonnet → gemini-2.5-pro → gpt-5 → first in list. A "Enter manually" escape hatch lets users type any ID instead, and a "Pick from list" link restores the dropdown. The probe re-fires when the API key or wire protocol changes. Empty or non-http(s) baseUrls are skipped so the existing manual flow is completely unaffected.
diff --git a/apps/desktop/src/renderer/src/components/AddCustomProviderModal.tsx b/apps/desktop/src/renderer/src/components/AddCustomProviderModal.tsx
@@ -1,8 +1,8 @@
 import { useT } from '@open-codesign/i18n';
 import { type WireApi, canonicalBaseUrl, detectWireFromBaseUrl } from '@open-codesign/shared';
 import { Button } from '@open-codesign/ui';
-import { AlertCircle, CheckCircle, Loader2, X } from 'lucide-react';
-import { useState } from 'react';
+import { AlertCircle, Check, CheckCircle, Loader2, X } from 'lucide-react';
+import { useRef, useState } from 'react';
 
 interface Props {
   onSave: () => void;
@@ -48,6 +48,28 @@ type TestState =
   | { kind: 'ok'; modelCount: number }
   | { kind: 'error'; message: string };
 
+type DiscoveryState =
+  | { kind: 'idle' }
+  | { kind: 'discovering' }
+  | { kind: 'found'; models: string[] }
+  | { kind: 'failed' };
+
+/** Priority-ordered model selection after a successful discovery. */
+function pickBestModel(models: string[]): string {
+  const priorities: RegExp[] = [
+    /^claude-sonnet-4-5/,
+    /^claude-opus/,
+    /^claude-sonnet/,
+    /^gemini-2\.5-pro$|^gemini-3.*pro/,
+    /^gpt-5/,
+  ];
+  for (const pattern of priorities) {
+    const match = models.find((m) => pattern.test(m));
+    if (match !== undefined) return match;
+  }
+  return models[0] ?? '';
+}
+
 /**
  * Minimal Custom Provider form — wire-agnostic endpoint onboarding.
  * Deliberately barebones (native form + FormData-ish accessors, no schema),
@@ -79,15 +101,74 @@ export function AddCustomProviderModal({
   const [saving, setSaving] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
+  const [discovery, setDiscovery] = useState<DiscoveryState>({ kind: 'idle' });
+  // When true, user explicitly chose to type a model name instead of picking from the dropdown.
+  const [manualModel, setManualModel] = useState(false);
+  // Track whether user has explicitly typed/picked a model so auto-pick doesn't override it.
+  const userPickedModel = useRef(false);
+
+  const debounceTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  function scheduleDiscovery(currentBaseUrl: string, currentApiKey: string, currentWire: WireApi) {
+    if (debounceTimer.current !== null) clearTimeout(debounceTimer.current);
+    if (!currentBaseUrl.trim().match(/^https?:\/\//)) {
+      setDiscovery({ kind: 'idle' });
+      return;
+    }
+    debounceTimer.current = setTimeout(() => {
+      void runDiscovery(currentBaseUrl, currentApiKey, currentWire);
+    }, 500);
+  }
+
+  async function runDiscovery(currentBaseUrl: string, currentApiKey: string, currentWire: WireApi) {
+    if (!window.codesign?.config) return;
+    setDiscovery({ kind: 'discovering' });
+    try {
+      const res = await window.codesign.config.testEndpoint({
+        wire: currentWire,
+        baseUrl: currentBaseUrl.trim(),
+        apiKey: currentApiKey.trim(),
+      });
+      if (res.ok && res.models.length > 0) {
+        setDiscovery({ kind: 'found', models: res.models });
+        if (!userPickedModel.current) {
+          const best = pickBestModel(res.models);
+          setDefaultModel(best);
+        }
+      } else {
+        setDiscovery({ kind: 'failed' });
+      }
+    } catch {
+      setDiscovery({ kind: 'failed' });
+    }
+  }
+
   function handleBaseUrlChange(v: string) {
     setBaseUrl(v);
     if (wireAuto) setWire(detectWireFromBaseUrl(v));
     setTest({ kind: 'idle' });
+    scheduleDiscovery(v, apiKey, wireAuto ? detectWireFromBaseUrl(v) : wire);
+  }
+
+  function handleApiKeyChange(v: string) {
+    setApiKey(v);
+    scheduleDiscovery(baseUrl, v, wire);
   }
 
   function handleWireChange(v: WireApi) {
     setWire(v);
     setWireAuto(false);
+    scheduleDiscovery(baseUrl, apiKey, v);
+  }
+
+  function handleModelSelect(v: string) {
+    setDefaultModel(v);
+    userPickedModel.current = true;
+  }
+
+  function handleModelTextChange(v: string) {
+    setDefaultModel(v);
+    userPickedModel.current = v.length > 0;
   }
 
   async function handleTest() {
@@ -168,6 +249,10 @@ export function AddCustomProviderModal({
     ? t('settings.providers.custom.editTitle')
     : t('settings.providers.custom.title');
 
+  // Show the model dropdown when discovery found models AND user hasn't switched to manual entry.
+  const showModelDropdown =
+    !manualModel && discovery.kind === 'found' && discovery.models.length > 0;
+
   return (
     <div
       role="dialog"
@@ -243,7 +328,7 @@ export function AddCustomProviderModal({
         <Field label={t('settings.providers.custom.apiKey')}>
           <TextInput
             value={apiKey}
-            onChange={setApiKey}
+            onChange={handleApiKeyChange}
             type="password"
             placeholder={
               isEdit && editTarget?.keyMask !== undefined && editTarget.keyMask.length > 0
@@ -255,8 +340,68 @@ export function AddCustomProviderModal({
           />
         </Field>
 
-        <Field label={t('settings.providers.custom.defaultModel')}>
-          <TextInput value={defaultModel} onChange={setDefaultModel} placeholder="model-name" />
+        <Field
+          label={t('settings.providers.custom.defaultModel')}
+          inline={
+            discovery.kind === 'discovering' ? (
+              <span className="inline-flex items-center gap-1 text-[var(--text-xs)] text-[var(--color-text-muted)]">
+                <Loader2 className="w-3 h-3 animate-spin" />
+                {t('settings.providers.cliProxyApi.discoveringModels')}
+              </span>
+            ) : discovery.kind === 'found' ? (
+              <span className="inline-flex items-center gap-1 text-[var(--text-xs)] text-[var(--color-success)]">
+                <Check className="w-3 h-3" />
+                {t('settings.providers.cliProxyApi.discoveredModels', {
+                  count: discovery.models.length,
+                })}
+              </span>
+            ) : discovery.kind === 'failed' ? (
+              <span className="inline-flex items-center gap-1 text-[var(--text-xs)] text-[var(--color-text-muted)]">
+                <AlertCircle className="w-3 h-3" />
+                {t('settings.providers.cliProxyApi.discoveryFailed')}
+              </span>
+            ) : null
+          }
+        >
+          {showModelDropdown ? (
+            <div className="flex items-center gap-2">
+              <select
+                value={defaultModel}
+                onChange={(e) => handleModelSelect(e.target.value)}
+                className="flex-1 h-8 px-3 rounded-[var(--radius-md)] bg-[var(--color-surface)] border border-[var(--color-border)] text-[var(--text-sm)] text-[var(--color-text-primary)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)]"
+              >
+                {discovery.models.map((m) => (
+                  <option key={m} value={m}>
+                    {m}
+                  </option>
+                ))}
+              </select>
+              <button
+                type="button"
+                onClick={() => setManualModel(true)}
+                className="shrink-0 text-[var(--text-xs)] text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] underline"
+              >
+                {t('settings.providers.custom.switchToManual')}
+              </button>
+            </div>
+          ) : (
+            <div className="flex items-center gap-2">
+              <TextInput
+                value={defaultModel}
+                onChange={handleModelTextChange}
+                placeholder="model-name"
+              />
+              {manualModel && discovery.kind === 'found' && discovery.models.length > 0 && (
+                <button
+                  type="button"
+                  onClick={() => setManualModel(false)}
+                  className="shrink-0 text-[var(--text-xs)] text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] underline"
+                >
+                  {t('settings.providers.custom.switchToDropdown')}
+                </button>
+              )}
+            </div>
+          )}
         </Field>
 
         <div className="flex items-center gap-2">
@@ -304,12 +449,23 @@ export function AddCustomProviderModal({
   );
 }
 
-function Field({ label, children }: { label: string; children: React.ReactNode }) {
+function Field({
+  label,
+  inline,
+  children,
+}: {
+  label: string;
+  inline?: React.ReactNode;
+  children: React.ReactNode;
+}) {
   return (
     <div>
-      <p className="block text-[var(--text-xs)] font-medium text-[var(--color-text-secondary)] mb-1.5">
-        {label}
-      </p>
+      <div className="flex items-center justify-between mb-1.5">
+        <p className="block text-[var(--text-xs)] font-medium text-[var(--color-text-secondary)]">
+          {label}
+        </p>
+        {inline !== undefined && <span>{inline}</span>}
+      </div>
       {children}
     </div>
   );
diff --git a/packages/i18n/src/locales/en.json b/packages/i18n/src/locales/en.json
@@ -215,11 +215,18 @@
         "apiKey": "API Key",
         "apiKeyEditPlaceholder": "Leave empty to keep {{mask}}",
         "defaultModel": "Default model",
+        "switchToManual": "Enter manually",
+        "switchToDropdown": "Pick from list",
         "test": "Test connection",
         "testOk": "OK — {{count}} models available",
         "save": "Save & continue",
         "saveEdit": "Save changes"
       },
+      "cliProxyApi": {
+        "discoveringModels": "Discovering models…",
+        "discoveredModels": "Found {{count}} models",
+        "discoveryFailed": "Could not connect"
+      },
       "import": {
         "action": "Import",
         "dismiss": "Dismiss",
diff --git a/packages/i18n/src/locales/zh-CN.json b/packages/i18n/src/locales/zh-CN.json
@@ -215,11 +215,18 @@
         "apiKey": "API Key",
         "apiKeyEditPlaceholder": "留空则保留 {{mask}}",
         "defaultModel": "默认模型",
+        "switchToManual": "手动输入",
+        "switchToDropdown": "从列表选择",
         "test": "测试连接",
         "testOk": "正常 — 共 {{count}} 个模型",
         "save": "保存并继续",
         "saveEdit": "保存修改"
       },
+      "cliProxyApi": {
+        "discoveringModels": "正在探测模型…",
+        "discoveredModels": "找到 {{count}} 个模型",
+        "discoveryFailed": "无法连接"
+      },
       "import": {
         "action": "导入",
         "dismiss": "忽略",
