@geminilight/mindos 0.6.63 → 0.6.65

package/app/components/settings/AiTab.tsx

@@ -1,56 +1,38 @@
 'use client';
 
-import { useState, useRef, useCallback, useEffect, useMemo } from 'react';
-import { AlertCircle, Loader2, Sparkles, Bot, Monitor, ExternalLink, RotateCcw, Check, Zap, X } 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';
 import ModelInput from '@/components/shared/ModelInput';
-import { type CustomProvider, generateCustomProviderId } from '@/lib/custom-endpoints';
-import { ALL_PROVIDER_IDS } from '@/lib/agent/providers';
+import { type Provider, generateProviderId } from '@/lib/custom-endpoints';
+import { useCustomProviderForm, type TestResult } from './useCustomProviderForm';
+import CustomProviderFields from './CustomProviderFields';
+import { TestButton } from './TestButton';
 
-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;
-  }
-}
-
-export function AiTab({ data, updateAi, updateAgent, updateCustomProviders, t }: AiTabProps) {
+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 [customEditingId, setCustomEditingId] = useState<string | null>(null);
   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); }, []);
 
@@ -59,15 +41,17 @@ export function AiTab({ data, updateAi, updateAgent, updateCustomProviders, t }:
     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',
@@ -77,79 +61,87 @@ export function AiTab({ data, updateAi, updateAgent, updateCustomProviders, t }:
       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 resetProvider = useCallback((name: ProviderId) => {
-    setTestResult(prev => ({ ...prev, [name]: { state: 'idle' } }));
+  // ── 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,
-        [name]: { apiKey: '', model: '', baseUrl: '' },
-      },
+      providers: data.ai.providers.map(p => p.id === current.id ? {
+        ...p,
+        apiKey: '',
+        model: '',
+        baseUrl: defaults?.fixedBaseUrl ?? '',
+      } : p),
     });
-  }, [data.ai.providers, updateAi]);
+  }, [current, data.ai.providers, updateAi]);
 
-  const customProviders = data.customProviders ?? [];
-  const editingCustomProvider = useMemo(
-    () => customEditingId ? customProviders.find(p => p.id === customEditingId) : null,
-    [customEditingId, customProviders],
-  );
-  const handleSaveCustom = useCallback((cp: CustomProvider) => {
-    const updated = customEditingId
-      ? customProviders.map(p => p.id === customEditingId ? cp : p)
-      : [...customProviders, cp];
-    updateCustomProviders(updated);
+  // ── 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);
-    setCustomEditingId(null);
-  }, [customEditingId, customProviders, updateCustomProviders]);
-  const handleDeleteCustom = useCallback((id: string) => {
-    if (customEditingId === id) { setCustomFormOpen(false); setCustomEditingId(null); }
-    updateCustomProviders(customProviders.filter(p => p.id !== id));
-  }, [customProviders, updateCustomProviders, customEditingId]);
+  }, [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">
@@ -160,45 +152,77 @@ export function AiTab({ data, updateAi, updateAgent, updateCustomProviders, t }:
         description={displayName}
       >
         <ProviderSelect
-          value={provider}
+          value={data.ai.activeProvider as ProviderId}
           onChange={id => {
-            if (id !== 'skip') updateAi({ provider: id });
+            if (id !== 'skip') updateAi({ activeProvider: id });
             setCustomFormOpen(false);
-            setCustomEditingId(null);
           }}
           compact
-          configuredProviders={configuredProviders}
-          customProviders={customProviders}
-          onAddCustom={() => { setCustomEditingId(null); setCustomFormOpen(true); }}
-          onEditCustom={id => { setCustomEditingId(id); setCustomFormOpen(true); }}
-          onDeleteCustom={handleDeleteCustom}
+          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);
+          }}
         />
 
-        {/* Inline custom provider form */}
+        {/* Add new provider form */}
         {customFormOpen && (
           <CustomProviderForm
-            key={customEditingId ?? 'new'}
-            initial={editingCustomProvider ?? undefined}
-            onSave={handleSaveCustom}
-            onCancel={() => { setCustomFormOpen(false); setCustomEditingId(null); }}
+            key="new"
+            onSave={handleSaveNew}
+            onCancel={() => setCustomFormOpen(false)}
             t={t}
+            existingNames={data.ai.providers.map(p => p.name)}
           />
         )}
 
-        {/* Provider configuration fields */}
-        {preset && !customFormOpen && (
+        {/* ── Inline config fields for the selected provider ── */}
+        {!customFormOpen && current && (
           <div className="space-y-3 pt-3 border-t border-border">
-            {/* 1. API Key — most essential, enter first */}
+            {/* 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"
@@ -214,58 +238,51 @@ export function AiTab({ data, updateAi, updateAgent, updateCustomProviders, t }:
               )}
             </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}
+                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 & Reset — after all fields */}
+            {/* Test & Reset & Delete */}
             <ProviderActions
-              provider={provider}
-              result={testResult[provider] ?? { state: 'idle' }}
-              hasKey={!!currentConfig.apiKey}
+              provider={current.protocol}
+              result={testResult[current.id] ?? { state: 'idle' }}
+              hasKey={!!current.apiKey}
               hasEnv={!!activeEnvKey}
-              hasConfig={!!(currentConfig.apiKey || currentConfig.model || currentConfig.baseUrl)}
-              onTest={() => handleTestKey(provider)}
-              onReset={() => resetProvider(provider)}
+              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>
@@ -356,10 +373,10 @@ export function AiTab({ data, updateAi, updateAgent, updateCustomProviders, t }:
   );
 }
 
-/* ── Provider Actions: Test + Reset ── */
+/* ── Provider Actions: Test + Reset + Delete ── */
 
 function ProviderActions({
-  provider, result, hasKey, hasEnv, hasConfig, onTest, onReset, t,
+  provider, result, hasKey, hasEnv, hasConfig, onTest, onReset, onDelete, t,
 }: {
   provider: ProviderId;
   result: TestResult;
@@ -367,146 +384,106 @@ function ProviderActions({
   hasEnv: boolean;
   hasConfig: boolean;
   onTest: () => void;
-  onReset: () => void;
+  onReset?: () => void;
+  onDelete?: () => void;
   t: AiTabProps['t'];
 }) {
-  const [confirmReset, setConfirmReset] = useState(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;
-  const isTesting = result.state === 'testing';
-  const isOk = result.state === 'ok';
-  const isError = result.state === 'error';
 
   useEffect(() => () => { if (confirmTimerRef.current) clearTimeout(confirmTimerRef.current); }, []);
 
-  const handleResetClick = () => {
-    if (confirmReset) {
-      onReset();
-      setConfirmReset(false);
+  const startConfirm = (action: 'reset' | 'delete') => {
+    if (confirmAction === action) {
+      if (action === 'reset') onReset?.(); else onDelete?.();
+      setConfirmAction(null);
       if (confirmTimerRef.current) clearTimeout(confirmTimerRef.current);
     } else {
-      setConfirmReset(true);
-      confirmTimerRef.current = setTimeout(() => setConfirmReset(false), 3000);
+      setConfirmAction(action);
+      if (confirmTimerRef.current) clearTimeout(confirmTimerRef.current);
+      confirmTimerRef.current = setTimeout(() => setConfirmAction(null), 3000);
     }
   };
 
+  const { locale } = useLocale();
+
   return (
     <div className="space-y-2 pt-2">
       <div className="flex items-center justify-between">
-        {/* Left: Test button */}
-        <button
-          type="button"
-          disabled={!canTest || isTesting}
-          onClick={onTest}
-          className={`inline-flex items-center gap-1.5 px-3.5 py-1.5 text-sm font-medium rounded-lg transition-all duration-200 disabled:cursor-not-allowed ${
-            isOk
-              ? 'bg-success/10 text-success border border-success/20'
-              : isError
-                ? 'bg-destructive/8 text-destructive border border-destructive/20 hover:bg-destructive/12'
-                : 'border border-border text-muted-foreground hover:text-foreground hover:border-foreground/20 disabled:opacity-40'
-          }`}
-        >
-          {isTesting ? (
-            <Loader2 size={13} className="animate-spin" />
-          ) : isOk ? (
-            <Check size={13} />
-          ) : isError ? (
-            <AlertCircle size={13} />
-          ) : (
-            <Zap size={13} />
+        <TestButton result={result} disabled={!canTest} onTest={onTest} t={t} />
+
+        <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>
           )}
-          {isTesting
-            ? t.settings.ai.testKeyTesting
-            : isOk && result.latency != null
-              ? t.settings.ai.testKeyOk(result.latency)
-              : isError
-                ? errorMessage(t, result.code)
-                : t.settings.ai.testKey}
-        </button>
-
-        {/* Right: Reset — subtle, icon-first, inline confirm */}
-        {hasConfig && (
-          <button
-            type="button"
-            onClick={handleResetClick}
-            onBlur={() => { setConfirmReset(false); 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 ${
-              confirmReset
-                ? '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} />
-            {confirmReset ? t.settings.ai.resetProviderConfirm : t.settings.ai.resetProvider}
-          </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>
   );
 }
 
-/* ── Inline Custom Provider Form (replaces modal) ── */
+/* ── Inline Custom Provider Form (uses shared hook + fields) ── */
 
 function CustomProviderForm({
-  initial, onSave, onCancel, t,
+  initial, onSave, onCancel, onDelete, t, existingNames,
 }: {
-  initial?: CustomProvider;
-  onSave: (provider: CustomProvider) => void;
+  initial?: Provider;
+  onSave: (provider: Provider) => void;
   onCancel: () => void;
+  onDelete?: () => void;
   t: AiTabProps['t'];
+  existingNames: string[];
 }) {
   const { locale } = useLocale();
-  const [name, setName] = useState(initial?.name ?? '');
-  const [baseProviderId, setBaseProviderId] = useState<ProviderId>(initial?.baseProviderId ?? 'openai');
-  const [apiKey, setApiKey] = useState(initial?.apiKey === '***set***' ? '' : initial?.apiKey ?? '');
-  const [model, setModel] = useState(initial?.model ?? '');
-  const [baseUrl, setBaseUrl] = useState(initial?.baseUrl ?? '');
-  const [testState, setTestState] = useState<'idle' | 'testing' | 'ok' | 'error'>('idle');
-  const [testError, setTestError] = useState('');
-
-  const basePreset = PROVIDER_PRESETS[baseProviderId];
-  const canSave = name.trim() && baseUrl.trim() && model.trim();
-
-  const handleTest = useCallback(async () => {
-    if (!canSave) { setTestError(locale === 'zh' ? '名称、接口地址和模型为必填' : 'Name, base URL, and model are required'); return; }
-    setTestState('testing');
-    setTestError('');
-    try {
-      const res = await fetch('/api/settings/test-key', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ apiKey, model, baseUrl, baseProviderId }),
-      });
-      const json = await res.json();
-      if (json.ok) setTestState('ok');
-      else { setTestState('error'); setTestError(json.error || 'Test failed'); }
-    } catch {
-      setTestState('error');
-      setTestError('Network error');
-    }
-  }, [canSave, apiKey, model, baseUrl, baseProviderId, locale]);
-
-  const handleSave = () => {
-    if (!canSave) { setTestError(locale === 'zh' ? '名称、接口地址和模型为必填' : 'Name, base URL, and model are required'); return; }
-    onSave({
-      id: initial?.id || generateCustomProviderId(),
-      name: name.trim(),
-      baseProviderId,
-      apiKey,
-      model: model.trim(),
-      baseUrl: baseUrl.trim(),
-    });
-  };
+  const form = useCustomProviderForm({ initial, onSave, locale, existingNames });
+  const [confirmDelete, setConfirmDelete] = useState(false);
+  const deleteTimerRef = useRef<ReturnType<typeof setTimeout>>(undefined);
 
-  const formTitle = initial
-    ? (locale === 'zh' ? '编辑自定义 Provider' : 'Edit Custom Provider')
-    : (locale === 'zh' ? '添加自定义 Provider' : 'Add Custom Provider');
+  useEffect(() => () => { if (deleteTimerRef.current) clearTimeout(deleteTimerRef.current); }, []);
+
+  const formTitle = initial?.id
+    ? (locale === 'zh' ? '编辑 Provider' : 'Edit Provider')
+    : (locale === 'zh' ? '添加 Provider' : 'Add Provider');
 
   const missingFields: string[] = [];
-  if (!name.trim()) missingFields.push(locale === 'zh' ? '名称' : 'Name');
-  if (!baseUrl.trim()) missingFields.push(locale === 'zh' ? '接口地址' : 'Base URL');
-  if (!model.trim()) missingFields.push(locale === 'zh' ? '模型' : 'Model');
+  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 className="mt-3 rounded-lg border border-border overflow-hidden">
@@ -524,101 +501,47 @@ function CustomProviderForm({
       </div>
 
       {/* Form body */}
-      <div className="space-y-3 p-4">
-        {/* Row 1: Name + Protocol side by side */}
-        <div className="grid grid-cols-2 gap-3">
-          <Field label={t.settings?.customProviders?.modal?.fieldName ?? 'Name'}>
-            <Input
-              value={name}
-              onChange={e => setName(e.target.value)}
-              placeholder={locale === 'zh' ? '公司 GPT-4' : 'Company GPT-4'}
-              autoFocus
-            />
-          </Field>
-          <Field
-            label={t.settings?.customProviders?.modal?.fieldProtocol ?? 'Protocol'}
-          >
-            <Select
-              value={baseProviderId}
-              onChange={e => setBaseProviderId(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>
-
-        {/* Base URL */}
-        <Field
-          label={t.settings?.customProviders?.modal?.fieldBaseUrl ?? 'Base URL'}
-          hint={t.settings?.customProviders?.modal?.fieldBaseUrlHint}
-        >
-          <Input
-            value={baseUrl}
-            onChange={e => setBaseUrl(e.target.value)}
-            placeholder={basePreset.fixedBaseUrl || 'https://api.example.com/v1'}
-          />
-        </Field>
-
-        {/* API Key */}
-        <Field
-          label={<>{t.settings?.customProviders?.modal?.fieldApiKey ?? 'API Key'} <span className="text-muted-foreground/50 font-normal">{locale === 'zh' ? '(可选)' : '(optional)'}</span></>}
-        >
-          <Input
-            type="password"
-            value={apiKey}
-            onChange={e => setApiKey(e.target.value)}
-            placeholder="sk-..."
-          />
-        </Field>
-
-        {/* Model */}
-        <Field label={t.settings?.customProviders?.modal?.fieldModel ?? 'Model'}>
-          <ModelInput
-            value={model}
-            onChange={setModel}
-            placeholder={basePreset.defaultModel}
-            provider={baseProviderId}
-            apiKey={apiKey}
-            baseUrl={baseUrl}
-            supportsListModels={!!baseUrl.trim()}
-            allowNoKey
-            browseLabel={t.settings.ai.listModels}
-            noModelsLabel={t.settings.ai.noModelsFound}
-          />
-        </Field>
-
-        {/* Feedback */}
-        {testError && testState !== 'ok' && (
-          <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">
-            <AlertCircle size={13} className="shrink-0 mt-0.5" />
-            <span>{testError}</span>
-          </div>
-        )}
-        {testState === 'ok' && (
-          <div className="flex items-center gap-2 text-xs text-success bg-success/10 border border-success/20 rounded-lg px-3 py-2">
-            <Check size={13} />
-            <span>{t.settings?.customProviders?.modal?.success ?? 'Connected'}</span>
-          </div>
-        )}
+      <div className="p-4">
+        <CustomProviderFields form={form} t={t} locale={locale} layout="compact" />
 
         {/* Actions */}
-        <div className="flex items-center gap-2 pt-1">
-          <button
-            type="button"
-            onClick={handleTest}
-            disabled={!canSave || testState === 'testing'}
-            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"
-          >
-            {testState === 'testing' ? <Loader2 size={12} className="animate-spin" /> : <Zap size={13} />}
-            {testState === 'testing' ? t.settings.ai.testKeyTesting : t.settings.ai.testKey}
-          </button>
+        <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
+              type="button"
+              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'
+              }`}
+            >
+              <Trash2 size={12} />
+              {confirmDelete
+                ? (locale === 'zh' ? '确认删除？' : 'Confirm?')
+                : (locale === 'zh' ? '删除' : 'Delete')}
+            </button>
+          )}
 
           <div className="flex-1">
-            {!canSave && missingFields.length > 0 && (
+            {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>
@@ -634,8 +557,8 @@ function CustomProviderForm({
           </button>
           <button
             type="button"
-            onClick={handleSave}
-            disabled={!canSave}
+            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'}