@geminilight/mindos 0.6.61 → 0.6.65

package/app/components/settings/AiTab.tsx

@@ -1,51 +1,38 @@
 'use client';
 
-import { useState, useRef, useCallback, useEffect, useMemo } from 'react';
-import { AlertCircle, ChevronDown, Loader2, Sparkles, Bot, Monitor, ExternalLink } from 'lucide-react';
-import type { AiSettings, AgentSettings, ProviderConfig, SettingsData, AiTabProps } from './types';
-import { Field, Select, Input, EnvBadge, ApiKeyInput, Toggle, SettingCard, SettingRow } from './Primitives';
+import { useState, useRef, useCallback, useEffect } from 'react';
+import { AlertCircle, Sparkles, Bot, Monitor, ExternalLink, RotateCcw, Trash2, X } from 'lucide-react';
+import type { AiTabProps } from './types';
+import { Field, Select, Input, PasswordInput, EnvBadge, Toggle, SettingCard, SettingRow } from './Primitives';
 import { useLocale } from '@/lib/stores/locale-store';
-import { type ProviderId, PROVIDER_PRESETS, isProviderId, getApiKeyEnvVar, getDefaultBaseUrl } from '@/lib/agent/providers';
+import { type ProviderId, PROVIDER_PRESETS, ALL_PROVIDER_IDS, getApiKeyEnvVar, getDefaultBaseUrl } from '@/lib/agent/providers';
 import ProviderSelect from '@/components/shared/ProviderSelect';
-
-type TestState = 'idle' | 'testing' | 'ok' | 'error';
-type ErrorCode = 'auth_error' | 'model_not_found' | 'rate_limited' | 'network_error' | 'unknown';
-
-interface TestResult {
-  state: TestState;
-  latency?: number;
-  error?: string;
-  code?: ErrorCode;
-}
-
-function errorMessage(t: AiTabProps['t'], code?: ErrorCode): string {
-  switch (code) {
-    case 'auth_error': return t.settings.ai.testKeyAuthError;
-    case 'model_not_found': return t.settings.ai.testKeyModelNotFound;
-    case 'rate_limited': return t.settings.ai.testKeyRateLimited;
-    case 'network_error': return t.settings.ai.testKeyNetworkError;
-    default: return t.settings.ai.testKeyUnknown;
-  }
-}
+import ModelInput from '@/components/shared/ModelInput';
+import { type Provider, generateProviderId } from '@/lib/custom-endpoints';
+import { useCustomProviderForm, type TestResult } from './useCustomProviderForm';
+import CustomProviderFields from './CustomProviderFields';
+import { TestButton } from './TestButton';
 
 export function AiTab({ data, updateAi, updateAgent, t }: AiTabProps) {
   const { locale } = useLocale();
   const env = data.envOverrides ?? {};
-  const envVal = data.envValues ?? {};
-  const provider = data.ai.provider;
-  const preset = isProviderId(provider) ? PROVIDER_PRESETS[provider] : null;
+
+  // ── Current provider from the unified array ──
+  const current = data.ai.providers.find(p => p.id === data.ai.activeProvider);
+  const preset = current ? PROVIDER_PRESETS[current.protocol] : null;
 
   const [testResult, setTestResult] = useState<Record<string, TestResult>>({});
+  const [customFormOpen, setCustomFormOpen] = useState(false);
   const okTimerRef = useRef<ReturnType<typeof setTimeout>>(undefined);
-  const prevProviderRef = useRef(provider);
+  const prevProviderRef = useRef(data.ai.activeProvider);
 
   useEffect(() => {
-    if (prevProviderRef.current !== provider) {
-      prevProviderRef.current = provider;
+    if (prevProviderRef.current !== data.ai.activeProvider) {
+      prevProviderRef.current = data.ai.activeProvider;
       setTestResult({});
       if (okTimerRef.current) { clearTimeout(okTimerRef.current); okTimerRef.current = undefined; }
     }
-  }, [provider]);
+  }, [data.ai.activeProvider]);
 
   useEffect(() => () => { if (okTimerRef.current) clearTimeout(okTimerRef.current); }, []);
 
@@ -54,15 +41,17 @@ export function AiTab({ data, updateAi, updateAgent, t }: AiTabProps) {
     try { localStorage.setItem('mindos-reconnect-retries', String(v)); } catch (err) { console.warn("[AiTab] localStorage setItem reconnectRetries failed:", err); }
   }, [data.agent?.reconnectRetries]);
 
-  const handleTestKey = useCallback(async (providerName: ProviderId) => {
-    const prov = data.ai.providers?.[providerName] ?? {} as ProviderConfig;
-    setTestResult(prev => ({ ...prev, [providerName]: { state: 'testing' } }));
+  // ── Test key for the current provider ──
+  const handleTestKey = useCallback(async () => {
+    if (!current) return;
+    const pid = current.id;
+    setTestResult(prev => ({ ...prev, [pid]: { state: 'testing' } }));
 
     try {
-      const body: Record<string, string> = { provider: providerName };
-      if (prov.apiKey) body.apiKey = prov.apiKey;
-      if (prov.model) body.model = prov.model;
-      if (prov.baseUrl) body.baseUrl = prov.baseUrl;
+      const body: Record<string, string> = { provider: current.protocol };
+      if (current.apiKey) body.apiKey = current.apiKey;
+      if (current.model) body.model = current.model;
+      if (current.baseUrl) body.baseUrl = current.baseUrl;
 
       const res = await fetch('/api/settings/test-key', {
         method: 'POST',
@@ -72,86 +61,87 @@ export function AiTab({ data, updateAi, updateAgent, t }: AiTabProps) {
       const json = await res.json();
 
       if (json.ok) {
-        setTestResult(prev => ({ ...prev, [providerName]: { state: 'ok', latency: json.latency } }));
+        setTestResult(prev => ({ ...prev, [pid]: { state: 'ok', latency: json.latency } }));
         if (okTimerRef.current) clearTimeout(okTimerRef.current);
         okTimerRef.current = setTimeout(() => {
-          setTestResult(prev => ({ ...prev, [providerName]: { state: 'idle' } }));
+          setTestResult(prev => ({ ...prev, [pid]: { state: 'idle' } }));
         }, 8000);
       } else {
         setTestResult(prev => ({
           ...prev,
-          [providerName]: { state: 'error', error: json.error, code: json.code },
+          [pid]: { state: 'error', error: json.error, code: json.code },
         }));
       }
     } catch {
       setTestResult(prev => ({
         ...prev,
-        [providerName]: { state: 'error', code: 'network_error', error: 'Network error' },
+        [pid]: { state: 'error', code: 'network_error', error: 'Network error' },
       }));
     }
-  }, [data.ai.providers]);
+  }, [current]);
 
-  const patchProvider = useCallback((name: ProviderId, patch: Partial<ProviderConfig>) => {
+  // ── Patch any field on the current provider (auto-save) ──
+  const patchProvider = useCallback((patch: Partial<Provider>) => {
+    if (!current) return;
     if ('apiKey' in patch) {
-      setTestResult(prev => ({ ...prev, [name]: { state: 'idle' } }));
+      setTestResult(prev => ({ ...prev, [current.id]: { state: 'idle' } }));
     }
     updateAi({
-      providers: {
-        ...data.ai.providers,
-        [name]: { ...data.ai.providers?.[name], ...patch },
-      },
+      providers: data.ai.providers.map(p => p.id === current.id ? { ...p, ...patch } : p),
     });
-  }, [data.ai.providers, updateAi]);
+  }, [current, data.ai.providers, updateAi]);
 
-  const currentConfig = data.ai.providers?.[provider] ?? { apiKey: '', model: '', baseUrl: '' };
-  const envKeyName = preset ? getApiKeyEnvVar(provider) : undefined;
-  const activeApiKey = currentConfig.apiKey;
+  // ── Env key detection ──
+  const envKeyName = current ? getApiKeyEnvVar(current.protocol) : undefined;
   const activeEnvKey = envKeyName ? env[envKeyName] : false;
   const hasFallbackKey = !!preset?.apiKeyFallback;
-  const missingApiKey = !activeApiKey && !activeEnvKey && !hasFallbackKey;
 
-  const configuredProviders = new Set(
-    Object.entries(data.ai.providers ?? {})
-      .filter(([id, cfg]) => (cfg && cfg.apiKey) || PROVIDER_PRESETS[id as ProviderId]?.apiKeyFallback)
-      .map(([id]) => id as ProviderId),
-  );
-
-  const renderTestButton = (providerName: ProviderId, hasKey: boolean, hasEnv: boolean) => {
-    const result = testResult[providerName] ?? { state: 'idle' as TestState };
-    const hasFallback = !!PROVIDER_PRESETS[providerName]?.apiKeyFallback;
-    const disabled = result.state === 'testing' || (!hasKey && !hasEnv && !hasFallback);
+  // ── Reset provider (clear fields to defaults) ──
+  const resetProvider = useCallback(() => {
+    if (!current) return;
+    const defaults = PROVIDER_PRESETS[current.protocol];
+    setTestResult(prev => ({ ...prev, [current.id]: { state: 'idle' } }));
+    updateAi({
+      providers: data.ai.providers.map(p => p.id === current.id ? {
+        ...p,
+        apiKey: '',
+        model: '',
+        baseUrl: defaults?.fixedBaseUrl ?? '',
+      } : p),
+    });
+  }, [current, data.ai.providers, updateAi]);
 
-    return (
-      <div className="flex items-center gap-2 mt-1.5">
-        <button
-          type="button"
-          disabled={disabled}
-          title={disabled ? t.hints.testInProgressOrNoKey : undefined}
-          onClick={() => handleTestKey(providerName)}
-          className="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm rounded-lg border border-border text-muted-foreground hover:text-foreground hover:border-foreground/20 transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
-        >
-          {result.state === 'testing' ? (
-            <>
-              <Loader2 size={12} className="animate-spin" />
-              {t.settings.ai.testKeyTesting}
-            </>
-          ) : (
-            t.settings.ai.testKey
-          )}
-        </button>
-        {result.state === 'ok' && result.latency != null && (
-          <span className="text-xs text-success">
-            {t.settings.ai.testKeyOk(result.latency)}
-          </span>
-        )}
-        {result.state === 'error' && (
-          <span className="text-xs text-error">✗ {errorMessage(t, result.code)}</span>
-        )}
-      </div>
-    );
-  };
+  // ── Delete provider ──
+  const deleteProvider = useCallback(() => {
+    if (!current) return;
+    const remaining = data.ai.providers.filter(p => p.id !== current.id);
+    const fallbackId = remaining.length > 0 ? remaining[0].id : '';
+    updateAi({
+      activeProvider: fallbackId,
+      providers: remaining,
+    });
+    setTestResult(prev => { const n = { ...prev }; delete n[current.id]; return n; });
+  }, [current, data.ai.providers, updateAi]);
+
+  // ── Save handler for the "Add Provider" form ──
+  const handleSaveNew = useCallback((formProvider: Provider) => {
+    // The form uses `protocol` directly now (no mapping needed)
+    const newProvider: Provider = {
+      id: formProvider.id || generateProviderId(),
+      name: formProvider.name,
+      protocol: formProvider.protocol,
+      apiKey: formProvider.apiKey,
+      model: formProvider.model,
+      baseUrl: formProvider.baseUrl,
+    };
+    updateAi({
+      activeProvider: newProvider.id,
+      providers: [...data.ai.providers, newProvider],
+    });
+    setCustomFormOpen(false);
+  }, [data.ai.providers, updateAi]);
 
-  const displayName = preset ? (locale === 'zh' ? preset.nameZh : preset.name) : provider;
+  const displayName = current?.name ?? (locale === 'zh' ? '未选择' : 'No provider');
 
   return (
     <div className="space-y-4">
@@ -162,26 +152,77 @@ export function AiTab({ data, updateAi, updateAgent, t }: AiTabProps) {
         description={displayName}
       >
         <ProviderSelect
-          value={provider}
-          onChange={id => { if (id !== 'skip') updateAi({ provider: id }); }}
+          value={data.ai.activeProvider as ProviderId}
+          onChange={id => {
+            if (id !== 'skip') updateAi({ activeProvider: id });
+            setCustomFormOpen(false);
+          }}
           compact
-          configuredProviders={configuredProviders}
+          customProviders={data.ai.providers}
+          onAdd={() => {
+            // Open form pre-filled with OpenAI defaults
+            const defaultId: ProviderId = 'openai';
+            const p = PROVIDER_PRESETS[defaultId];
+            const baseName = locale === 'zh' ? p.nameZh : p.name;
+            const names = new Set(data.ai.providers.map(cp => cp.name.toLowerCase()));
+            let finalName = baseName;
+            if (names.has(finalName.toLowerCase())) {
+              let n = 2;
+              while (names.has(`${baseName} (${n})`.toLowerCase())) n++;
+              finalName = `${baseName} (${n})`;
+            }
+            setCustomFormOpen(true);
+          }}
         />
 
-        {/* Provider configuration fields */}
-        {preset && (
-          <div className="space-y-3 pt-3" style={{ borderTop: '1px solid var(--border)' }}>
-            {/* 1. API Key — most essential, enter first */}
+        {/* Add new provider form */}
+        {customFormOpen && (
+          <CustomProviderForm
+            key="new"
+            onSave={handleSaveNew}
+            onCancel={() => setCustomFormOpen(false)}
+            t={t}
+            existingNames={data.ai.providers.map(p => p.name)}
+          />
+        )}
+
+        {/* ── Inline config fields for the selected provider ── */}
+        {!customFormOpen && current && (
+          <div className="space-y-3 pt-3 border-t border-border">
+            {/* Name + Protocol (inline, auto-save) */}
+            <div className="grid grid-cols-2 gap-3">
+              <Field label={locale === 'zh' ? '名称' : 'Name'}>
+                <Input
+                  value={current.name}
+                  onChange={e => patchProvider({ name: e.target.value })}
+                  placeholder={locale === 'zh' ? '输入名称' : 'Enter name'}
+                />
+              </Field>
+              <Field label={locale === 'zh' ? '协议' : 'Protocol'}>
+                <Select
+                  value={current.protocol}
+                  onChange={e => patchProvider({ protocol: e.target.value as ProviderId })}
+                >
+                  {ALL_PROVIDER_IDS.map(id => (
+                    <option key={id} value={id}>
+                      {locale === 'zh' ? PROVIDER_PRESETS[id].nameZh : PROVIDER_PRESETS[id].name}
+                    </option>
+                  ))}
+                </Select>
+              </Field>
+            </div>
+
+            {/* API Key */}
             <Field
               label={<>{t.settings.ai.apiKey} {envKeyName && <EnvBadge overridden={env[envKeyName]} />}</>}
-              hint={activeEnvKey ? t.settings.ai.envFieldNote(envKeyName!) : hasFallbackKey ? t.settings.ai.keyOptionalHint : t.settings.ai.keyHint}
+              hint={preset && activeEnvKey ? t.settings.ai.envFieldNote(envKeyName!) : preset && hasFallbackKey ? t.settings.ai.keyOptionalHint : undefined}
             >
-              <ApiKeyInput
-                value={currentConfig.apiKey}
-                onChange={v => patchProvider(provider, { apiKey: v })}
-                labels={{ change: t.settings.ai.keyChange, cancel: t.settings.ai.keyCancel }}
+              <PasswordInput
+                value={current.apiKey}
+                onChange={v => patchProvider({ apiKey: v })}
+                placeholder="sk-..."
               />
-              {preset.signupUrl && !currentConfig.apiKey && !activeEnvKey && (
+              {preset?.signupUrl && !current.apiKey && !activeEnvKey && (
                 <a
                   href={preset.signupUrl}
                   target="_blank"
@@ -197,48 +238,51 @@ export function AiTab({ data, updateAi, updateAgent, t }: AiTabProps) {
               )}
             </Field>
 
-            {/* 2. Base URL — before Model so "List Models" uses the correct endpoint */}
-            {preset.supportsBaseUrl && (
-              <Field
-                label={t.settings.ai.baseUrl}
-                hint={t.settings.ai.baseUrlHint}
-              >
+            {/* Base URL */}
+            {(preset?.supportsBaseUrl || current.baseUrl) && (
+              <Field label="Base URL">
                 <Input
-                  value={currentConfig.baseUrl ?? ''}
-                  onChange={e => patchProvider(provider, { baseUrl: e.target.value })}
-                  placeholder={preset.fixedBaseUrl || getDefaultBaseUrl(provider) || 'https://api.openai.com/v1'}
+                  value={current.baseUrl}
+                  onChange={e => patchProvider({ baseUrl: e.target.value })}
+                  placeholder={preset?.fixedBaseUrl || getDefaultBaseUrl(current.protocol) || 'https://api.openai.com/v1'}
                 />
               </Field>
             )}
 
-            {/* 3. Model — after Base URL so "List Models" queries the right endpoint */}
-            <Field label={t.settings.ai.model}>
+            {/* Model */}
+            <Field label={locale === 'zh' ? '模型' : 'Model'}>
               <ModelInput
-                value={currentConfig.model}
-                onChange={v => patchProvider(provider, { model: v })}
-                placeholder={preset.defaultModel}
-                provider={provider}
-                apiKey={currentConfig.apiKey}
+                value={current.model}
+                onChange={v => patchProvider({ model: v })}
+                placeholder={preset?.defaultModel ?? ''}
+                provider={current.protocol}
+                apiKey={current.apiKey}
                 envKey={!!activeEnvKey}
-                baseUrl={currentConfig.baseUrl}
-                supportsListModels={preset.supportsListModels}
-                t={t}
+                baseUrl={current.baseUrl}
+                supportsListModels={!!current.baseUrl?.trim() || !!preset?.supportsListModels}
+                allowNoKey={!!current.baseUrl?.trim()}
+                browseLabel={t.settings.ai.listModels}
+                noModelsLabel={t.settings.ai.noModelsFound}
               />
             </Field>
 
-            {/* 4. Test — after all fields, tests the complete configuration */}
-            {renderTestButton(provider, !!currentConfig.apiKey, !!activeEnvKey)}
+            {/* Test & Reset & Delete */}
+            <ProviderActions
+              provider={current.protocol}
+              result={testResult[current.id] ?? { state: 'idle' }}
+              hasKey={!!current.apiKey}
+              hasEnv={!!activeEnvKey}
+              hasConfig={!!(current.apiKey || current.model || current.baseUrl)}
+              onTest={handleTestKey}
+              onReset={resetProvider}
+              onDelete={deleteProvider}
+              t={t}
+            />
           </div>
         )}
 
-        {/* Inline warnings */}
-        {missingApiKey && (
-          <div className="flex items-start gap-2 text-xs text-destructive/80 bg-destructive/8 border border-destructive/20 rounded-lg px-3 py-2.5">
-            <AlertCircle size={13} className="shrink-0 mt-0.5" />
-            <span>{t.settings.ai.noApiKey}</span>
-          </div>
-        )}
-        {Object.values(env).some(Boolean) && (
+        {/* Env override hint — only when env vars are active */}
+        {!customFormOpen && Object.values(env).some(Boolean) && (
           <div className="flex items-start gap-2 text-xs text-[var(--amber)] bg-[var(--amber-subtle)] border border-[var(--amber)]/20 rounded-lg px-3 py-2.5">
             <AlertCircle size={13} className="shrink-0 mt-0.5" />
             <span>{t.settings.ai.envHint}</span>
@@ -329,193 +373,204 @@ export function AiTab({ data, updateAi, updateAgent, t }: AiTabProps) {
   );
 }
 
-/* ── Model Input with "List models" picker ── */
+/* ── Provider Actions: Test + Reset + Delete ── */
 
-function ModelInput({
-  value, onChange, placeholder, provider, apiKey, envKey, baseUrl, supportsListModels, t,
+function ProviderActions({
+  provider, result, hasKey, hasEnv, hasConfig, onTest, onReset, onDelete, t,
 }: {
-  value: string;
-  onChange: (v: string) => void;
-  placeholder: string;
   provider: ProviderId;
-  apiKey: string;
-  envKey?: boolean;
-  baseUrl?: string;
-  supportsListModels: boolean;
+  result: TestResult;
+  hasKey: boolean;
+  hasEnv: boolean;
+  hasConfig: boolean;
+  onTest: () => void;
+  onReset?: () => void;
+  onDelete?: () => void;
   t: AiTabProps['t'];
 }) {
-  const [models, setModels] = useState<string[] | null>(null);
-  const [loading, setLoading] = useState(false);
-  const [open, setOpen] = useState(false);
-  const [error, setError] = useState('');
-  const [focused, setFocused] = useState(false);
-  const [highlightIdx, setHighlightIdx] = useState(-1);
-  const containerRef = useRef<HTMLDivElement>(null);
-  const listRef = useRef<HTMLDivElement>(null);
-  const fetchedRef = useRef(false);
-  const fetchVersionRef = useRef(0);
-  const loadingRef = useRef(false);
-
-  const hasKey = !!apiKey || !!envKey || !!PROVIDER_PRESETS[provider]?.apiKeyFallback;
-
-  // Reset fetched cache when provider/key/baseUrl changes
-  useEffect(() => {
-    fetchedRef.current = false;
-    fetchVersionRef.current++;
-    setModels(null);
-  }, [provider, apiKey, baseUrl]);
-
-  const fetchModels = useCallback(async (silent = false) => {
-    if (loadingRef.current) return;
-    loadingRef.current = true;
-    setLoading(true);
-    if (!silent) setError('');
-    const version = fetchVersionRef.current;
-    try {
-      const body: Record<string, string> = { provider };
-      if (apiKey) body.apiKey = apiKey;
-      if (baseUrl) body.baseUrl = baseUrl;
-
-      const res = await fetch('/api/settings/list-models', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify(body),
-      });
-      if (version !== fetchVersionRef.current) return;
-      const json = await res.json();
-      if (version !== fetchVersionRef.current) return;
-      if (json.ok && Array.isArray(json.models)) {
-        setModels(json.models);
-        fetchedRef.current = true;
-        if (!silent) setOpen(true);
-      } else if (!silent) {
-        setError(json.error || 'Failed to fetch models');
-      }
-    } catch {
-      if (version !== fetchVersionRef.current) return;
-      if (!silent) setError('Network error');
-    } finally {
-      loadingRef.current = false;
-      setLoading(false);
+  const [confirmAction, setConfirmAction] = useState<'reset' | 'delete' | null>(null);
+  const confirmTimerRef = useRef<ReturnType<typeof setTimeout>>(undefined);
+  const hasFallback = !!PROVIDER_PRESETS[provider]?.apiKeyFallback;
+  const canTest = hasKey || hasEnv || hasFallback;
+
+  useEffect(() => () => { if (confirmTimerRef.current) clearTimeout(confirmTimerRef.current); }, []);
+
+  const startConfirm = (action: 'reset' | 'delete') => {
+    if (confirmAction === action) {
+      if (action === 'reset') onReset?.(); else onDelete?.();
+      setConfirmAction(null);
+      if (confirmTimerRef.current) clearTimeout(confirmTimerRef.current);
+    } else {
+      setConfirmAction(action);
+      if (confirmTimerRef.current) clearTimeout(confirmTimerRef.current);
+      confirmTimerRef.current = setTimeout(() => setConfirmAction(null), 3000);
     }
-  }, [provider, apiKey, baseUrl]);
+  };
 
-  const handleFocus = useCallback(() => {
-    setFocused(true);
-    if (!fetchedRef.current && supportsListModels && hasKey && !loadingRef.current) {
-      fetchModels(true);
-    }
-  }, [supportsListModels, hasKey, fetchModels]);
+  const { locale } = useLocale();
 
-  // Filtered models for typeahead
-  const filtered = useMemo(() => {
-    if (!models || !value.trim()) return models ?? [];
-    const q = value.toLowerCase();
-    return models.filter(m => m.toLowerCase().includes(q));
-  }, [models, value]);
+  return (
+    <div className="space-y-2 pt-2">
+      <div className="flex items-center justify-between">
+        <TestButton result={result} disabled={!canTest} onTest={onTest} t={t} />
 
-  // Show typeahead when focused + models loaded + user is typing (or Browse was clicked)
-  const showDropdown = open || (focused && models !== null && value.trim().length > 0 && filtered.length > 0);
+        <div className="flex items-center gap-1">
+          {/* Reset */}
+          {onReset && hasConfig && (
+            <button
+              type="button"
+              onClick={() => startConfirm('reset')}
+              onBlur={() => { if (confirmAction === 'reset') { setConfirmAction(null); if (confirmTimerRef.current) clearTimeout(confirmTimerRef.current); } }}
+              className={`inline-flex items-center gap-1.5 px-2.5 py-1.5 text-xs rounded-lg transition-all duration-200 ${
+                confirmAction === 'reset'
+                  ? 'bg-destructive/10 text-destructive border border-destructive/25 font-medium'
+                  : 'text-muted-foreground/60 hover:text-muted-foreground hover:bg-muted/50'
+              }`}
+            >
+              <RotateCcw size={12} />
+              {confirmAction === 'reset'
+                ? (locale === 'zh' ? '确认重置？' : 'Confirm?')
+                : (locale === 'zh' ? '重置' : 'Reset')}
+            </button>
+          )}
+          {/* Delete */}
+          {onDelete && (
+            <button
+              type="button"
+              onClick={() => startConfirm('delete')}
+              onBlur={() => { if (confirmAction === 'delete') { setConfirmAction(null); if (confirmTimerRef.current) clearTimeout(confirmTimerRef.current); } }}
+              className={`inline-flex items-center gap-1.5 px-2.5 py-1.5 text-xs rounded-lg transition-all duration-200 ${
+                confirmAction === 'delete'
+                  ? 'bg-destructive/10 text-destructive border border-destructive/25 font-medium'
+                  : 'text-muted-foreground/60 hover:text-muted-foreground hover:bg-muted/50'
+              }`}
+            >
+              <Trash2 size={12} />
+              {confirmAction === 'delete'
+                ? (locale === 'zh' ? '确认删除？' : 'Confirm?')
+                : (locale === 'zh' ? '删除' : 'Delete')}
+            </button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
 
-  // Reset highlight when filtered list changes
-  useEffect(() => { setHighlightIdx(-1); }, [filtered]);
+/* ── Inline Custom Provider Form (uses shared hook + fields) ── */
 
-  // Scroll highlighted item into view
-  useEffect(() => {
-    if (highlightIdx < 0 || !listRef.current) return;
-    const items = listRef.current.querySelectorAll('[data-model-item]');
-    items[highlightIdx]?.scrollIntoView({ block: 'nearest' });
-  }, [highlightIdx]);
-
-  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
-    const items = showDropdown ? filtered : [];
-    if (!items.length) return;
-
-    if (e.key === 'ArrowDown') {
-      e.preventDefault();
-      setHighlightIdx(i => (i + 1) % items.length);
-    } else if (e.key === 'ArrowUp') {
-      e.preventDefault();
-      setHighlightIdx(i => (i - 1 + items.length) % items.length);
-    } else if (e.key === 'Enter' && highlightIdx >= 0 && highlightIdx < items.length) {
-      e.preventDefault();
-      onChange(items[highlightIdx]);
-      setOpen(false);
-      setFocused(false);
-    } else if (e.key === 'Escape') {
-      setOpen(false);
-      setFocused(false);
-    }
-  }, [showDropdown, filtered, highlightIdx, onChange]);
+function CustomProviderForm({
+  initial, onSave, onCancel, onDelete, t, existingNames,
+}: {
+  initial?: Provider;
+  onSave: (provider: Provider) => void;
+  onCancel: () => void;
+  onDelete?: () => void;
+  t: AiTabProps['t'];
+  existingNames: string[];
+}) {
+  const { locale } = useLocale();
+  const form = useCustomProviderForm({ initial, onSave, locale, existingNames });
+  const [confirmDelete, setConfirmDelete] = useState(false);
+  const deleteTimerRef = useRef<ReturnType<typeof setTimeout>>(undefined);
 
-  useEffect(() => {
-    if (!showDropdown) return;
-    function handleClickOutside(e: MouseEvent) {
-      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
-        setOpen(false);
-        setFocused(false);
-      }
-    }
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => document.removeEventListener('mousedown', handleClickOutside);
-  }, [showDropdown]);
+  useEffect(() => () => { if (deleteTimerRef.current) clearTimeout(deleteTimerRef.current); }, []);
+
+  const formTitle = initial?.id
+    ? (locale === 'zh' ? '编辑 Provider' : 'Edit Provider')
+    : (locale === 'zh' ? '添加 Provider' : 'Add Provider');
 
-  const displayList = filtered;
+  const missingFields: string[] = [];
+  if (!form.name.trim()) missingFields.push(locale === 'zh' ? '名称' : 'Name');
+  if (!form.baseUrl.trim()) missingFields.push(locale === 'zh' ? '接口地址' : 'Base URL');
+  if (!form.model.trim()) missingFields.push(locale === 'zh' ? '模型' : 'Model');
 
   return (
-    <div ref={containerRef} className="relative">
-      <div className="flex gap-1.5">
-        <Input
-          value={value}
-          onChange={e => { onChange(e.target.value); if (!open) setFocused(true); }}
-          onFocus={handleFocus}
-          onKeyDown={handleKeyDown}
-          placeholder={placeholder}
-          className="flex-1"
-          autoComplete="off"
-        />
-        {supportsListModels && (
-          <button
-            type="button"
-            disabled={!hasKey || loading}
-            onClick={() => fetchModels(false)}
-            title={t.settings.ai.listModels}
-            className="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm rounded-lg border border-border text-muted-foreground hover:text-foreground hover:border-foreground/20 transition-colors disabled:opacity-40 disabled:cursor-not-allowed shrink-0"
-          >
-            {loading ? <Loader2 size={12} className="animate-spin" /> : <ChevronDown size={12} />}
-            {t.settings.ai.listModels}
-          </button>
-        )}
+    <div className="mt-3 rounded-lg border border-border overflow-hidden">
+      {/* Header */}
+      <div className="flex items-center justify-between px-4 py-2.5 border-b border-border">
+        <span className="text-sm font-medium text-foreground">{formTitle}</span>
+        <button
+          type="button"
+          onClick={onCancel}
+          className="p-1 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted/50 transition-colors"
+          aria-label={locale === 'zh' ? '关闭' : 'Close'}
+        >
+          <X size={14} />
+        </button>
       </div>
-      {error && <p className="text-xs text-error mt-1">{error}</p>}
-      {showDropdown && displayList.length > 0 && (
-        <div ref={listRef} className="absolute z-50 mt-1 w-full max-h-48 overflow-y-auto rounded-lg border border-border bg-popover shadow-lg">
-          {displayList.map((m, i) => (
+
+      {/* Form body */}
+      <div className="p-4">
+        <CustomProviderFields form={form} t={t} locale={locale} layout="compact" />
+
+        {/* Actions */}
+        <div className="flex items-center gap-2 pt-4">
+          <TestButton result={form.testResult} disabled={!form.canSave} onTest={form.handleTest} t={t} />
+
+          {/* Delete — only when editing an existing provider */}
+          {onDelete && initial?.id && (
             <button
-              key={m}
               type="button"
-              data-model-item
-              className={`w-full text-left px-3 py-1.5 text-sm transition-colors ${
-                m === value ? 'bg-accent/60 font-medium'
-                : i === highlightIdx ? 'bg-accent'
-                : 'hover:bg-accent'
+              onClick={() => {
+                if (confirmDelete) {
+                  onDelete();
+                  if (deleteTimerRef.current) clearTimeout(deleteTimerRef.current);
+                } else {
+                  setConfirmDelete(true);
+                  deleteTimerRef.current = setTimeout(() => setConfirmDelete(false), 3000);
+                }
+              }}
+              onBlur={() => { setConfirmDelete(false); if (deleteTimerRef.current) clearTimeout(deleteTimerRef.current); }}
+              className={`inline-flex items-center gap-1.5 px-2.5 py-1.5 text-xs rounded-lg transition-all duration-200 ${
+                confirmDelete
+                  ? 'bg-destructive/10 text-destructive border border-destructive/25 font-medium'
+                  : 'text-muted-foreground/60 hover:text-muted-foreground hover:bg-muted/50'
               }`}
-              onClick={() => { onChange(m); setOpen(false); setFocused(false); }}
             >
-              {m}
+              <Trash2 size={12} />
+              {confirmDelete
+                ? (locale === 'zh' ? '确认删除？' : 'Confirm?')
+                : (locale === 'zh' ? '删除' : 'Delete')}
             </button>
-          ))}
-        </div>
-      )}
-      {open && displayList.length === 0 && (
-        <div className="absolute z-50 mt-1 w-full rounded-lg border border-border bg-popover shadow-lg px-3 py-2 text-xs text-muted-foreground">
-          {t.settings.ai.noModelsFound}
+          )}
+
+          <div className="flex-1">
+            {form.isDuplicateName && (
+              <span className="text-2xs text-destructive pl-2">
+                {locale === 'zh' ? '名称已存在' : 'Name already exists'}
+              </span>
+            )}
+            {!form.isDuplicateName && !form.canSave && missingFields.length > 0 && (
+              <span className="text-2xs text-muted-foreground/60 pl-2">
+                {locale === 'zh' ? `需要: ${missingFields.join('、')}` : `Required: ${missingFields.join(', ')}`}
+              </span>
+            )}
+          </div>
+
+          <button
+            type="button"
+            onClick={onCancel}
+            className="px-3 py-1.5 text-sm rounded-lg text-muted-foreground hover:text-foreground transition-colors"
+          >
+            {t.settings?.customProviders?.modal?.buttonCancel ?? 'Cancel'}
+          </button>
+          <button
+            type="button"
+            onClick={form.handleSave}
+            disabled={!form.canSave}
+            className="px-4 py-1.5 text-sm font-medium rounded-lg bg-[var(--amber)] text-[var(--amber-foreground)] hover:bg-[var(--amber)]/90 transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
+          >
+            {locale === 'zh' ? '保存' : 'Save'}
+          </button>
         </div>
-      )}
+      </div>
     </div>
   );
 }
 
+/* ModelInput is now a shared component at @/components/shared/ModelInput */
+
 /* ── Ask AI Display Mode (localStorage-based, no server roundtrip) ── */
 
 function AskDisplayMode() {