@geminilight/mindos 0.6.63 → 0.6.65

package/_standalone/components/settings/ProviderModal.tsx

@@ -1,128 +1,52 @@
 'use client';
 
-import { useState, useEffect, useCallback, useMemo } from 'react';
-import { X, AlertCircle, Loader2 } from 'lucide-react';
+import { X } from 'lucide-react';
 import { useLocale } from '@/lib/stores/locale-store';
 import { type Messages } from '@/lib/i18n';
-import { type CustomProvider, generateCustomProviderId } from '@/lib/custom-endpoints';
-import { PROVIDER_PRESETS, type ProviderId, groupedProviders } from '@/lib/agent/providers';
-import { Field, Input, Select } from './Primitives';
-import ProviderSelect from '@/components/shared/ProviderSelect';
+import { type CustomProvider } from '@/lib/custom-endpoints';
+import { useCustomProviderForm } from './useCustomProviderForm';
+import CustomProviderFields from './CustomProviderFields';
+import { TestButton } from './TestButton';
 
 interface ProviderModalProps {
   isOpen: boolean;
   onClose: () => void;
   onSave: (provider: CustomProvider) => void;
   initialProvider?: CustomProvider;
+  existingNames?: string[];
   t: Messages;
 }
 
-type TestState = 'idle' | 'testing' | 'ok' | 'error';
-
+/**
+ * Modal wrapper — renders nothing when closed, remounts inner form
+ * on open so hook state resets cleanly.
+ */
 export default function ProviderModal({
-  isOpen,
-  onClose,
-  onSave,
-  initialProvider,
-  t,
+  isOpen, onClose, onSave, initialProvider, existingNames, t,
 }: ProviderModalProps) {
-  const { locale } = useLocale();
-  const [name, setName] = useState('');
-  const [baseProviderId, setBaseProviderId] = useState<ProviderId>('openai');
-  const [apiKey, setApiKey] = useState('');
-  const [model, setModel] = useState('');
-  const [baseUrl, setBaseUrl] = useState('');
-  const [showApiKey, setShowApiKey] = useState(false);
-  const [testState, setTestState] = useState<TestState>('idle');
-  const [testError, setTestError] = useState('');
-  const [isSaving, setIsSaving] = useState(false);
-
-  useEffect(() => {
-    if (initialProvider) {
-      setName(initialProvider.name);
-      setBaseProviderId(initialProvider.baseProviderId);
-      setApiKey(initialProvider.apiKey === '***set***' ? '' : initialProvider.apiKey);
-      setModel(initialProvider.model);
-      setBaseUrl(initialProvider.baseUrl);
-    } else {
-      setName('');
-      setBaseProviderId('openai');
-      setApiKey('');
-      setModel('');
-      setBaseUrl('');
-    }
-    setShowApiKey(false);
-    setTestState('idle');
-    setTestError('');
-  }, [initialProvider, isOpen]);
-
-  const handleTest = useCallback(async () => {
-    if (!name.trim() || !baseUrl.trim() || !model.trim()) {
-      setTestError('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({
-          customProviderId: initialProvider?.id,
-          apiKey,
-          model,
-          baseUrl,
-          baseProviderId,
-        }),
-      });
-
-      const json = await res.json();
-
-      if (json.ok) {
-        setTestState('ok');
-      } else {
-        setTestState('error');
-        setTestError(json.error || 'Test failed');
-      }
-    } catch (err) {
-      setTestState('error');
-      setTestError('Network error');
-    }
-  }, [name, baseUrl, model, apiKey, baseProviderId, initialProvider?.id]);
-
-  const handleSave = useCallback(async () => {
-    if (!name.trim() || !baseUrl.trim() || !model.trim()) {
-      setTestError('Name, base URL, and model are required');
-      return;
-    }
-
-    setIsSaving(true);
-
-    try {
-      const provider: CustomProvider = {
-        id: initialProvider?.id || generateCustomProviderId(),
-        name: name.trim(),
-        baseProviderId,
-        apiKey,
-        model: model.trim(),
-        baseUrl: baseUrl.trim(),
-      };
+  if (!isOpen) return null;
 
-      onSave(provider);
-    } finally {
-      setIsSaving(false);
-    }
-  }, [name, baseUrl, model, apiKey, baseProviderId, initialProvider, onSave]);
+  return (
+    <ProviderModalInner
+      key={initialProvider?.id ?? '__new__'}
+      onClose={onClose}
+      onSave={onSave}
+      initialProvider={initialProvider}
+      existingNames={existingNames}
+      t={t}
+    />
+  );
+}
 
-  if (!isOpen) return null;
+function ProviderModalInner({
+  onClose, onSave, initialProvider, existingNames, t,
+}: Omit<ProviderModalProps, 'isOpen'>) {
+  const { locale } = useLocale();
+  const form = useCustomProviderForm({ initial: initialProvider, onSave, locale, existingNames });
 
-  const preset = PROVIDER_PRESETS[baseProviderId];
-  const displayName = locale === 'zh' ? preset.nameZh : preset.name;
   const title = initialProvider
-    ? t.settings?.customProviders?.modal?.titleEdit
-    : t.settings?.customProviders?.modal?.titleAdd;
+    ? (locale === 'zh' ? '编辑 Provider' : 'Edit Provider')
+    : (locale === 'zh' ? '添加 Provider' : 'Add Provider');
 
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40" onClick={onClose}>
@@ -130,138 +54,31 @@ export default function ProviderModal({
         className="bg-card border border-border rounded-lg shadow-lg p-6 max-w-md w-full mx-4 max-h-[90vh] overflow-y-auto"
         onClick={e => e.stopPropagation()}
       >
-        {/* Header */}
         <div className="flex items-center justify-between mb-4">
           <h2 className="font-semibold text-foreground">{title}</h2>
-          <button
-            type="button"
-            onClick={onClose}
-            className="p-1 hover:bg-muted rounded transition-colors"
-          >
+          <button type="button" onClick={onClose} className="p-1 hover:bg-muted rounded transition-colors">
             <X size={16} />
           </button>
         </div>
 
-        {/* Form */}
-        <div className="space-y-3">
-          {/* Name */}
-          <Field
-            label={t.settings?.customProviders?.modal?.fieldName ?? 'Name'}
-            hint={t.settings?.customProviders?.modal?.fieldNameHint}
-          >
-            <Input
-              value={name}
-              onChange={e => setName(e.target.value)}
-              placeholder="Company GPT-4"
-            />
-          </Field>
-
-          {/* Protocol */}
-          <div>
-            <label className="text-xs font-medium text-foreground block mb-2">
-              {t.settings?.customProviders?.modal?.fieldProtocol ?? 'Protocol'}
-            </label>
-            <p className="text-2xs text-muted-foreground mb-2">
-              {t.settings?.customProviders?.modal?.fieldProtocolHint}
-            </p>
-            <ProviderSelect
-              value={baseProviderId}
-              onChange={id => id !== 'skip' && setBaseProviderId(id as ProviderId)}
-              compact
-            />
-          </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="https://api.example.com/v1"
-            />
-          </Field>
-
-          {/* API Key */}
-          <Field
-            label={t.settings?.customProviders?.modal?.fieldApiKey ?? 'API Key'}
-            hint={t.settings?.customProviders?.modal?.fieldApiKeyHint}
-          >
-            <div className="flex gap-2 items-center">
-              <Input
-                type={showApiKey ? 'text' : 'password'}
-                value={apiKey}
-                onChange={e => setApiKey(e.target.value)}
-                placeholder="••••••••"
-              />
-              <button
-                type="button"
-                onClick={() => setShowApiKey(!showApiKey)}
-                className="text-xs text-muted-foreground hover:text-foreground transition-colors px-2 py-1"
-              >
-                {showApiKey ? 'Hide' : 'Show'}
-              </button>
-            </div>
-          </Field>
-
-          {/* Model */}
-          <Field
-            label={t.settings?.customProviders?.modal?.fieldModel ?? 'Model'}
-            hint={t.settings?.customProviders?.modal?.fieldModelHint}
-          >
-            <Input
-              value={model}
-              onChange={e => setModel(e.target.value)}
-              placeholder="gpt-4-turbo"
-            />
-          </Field>
-
-          {/* Error message */}
-          {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>
-          )}
-
-          {/* Success message */}
-          {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">
-              <span>✓ {t.settings?.customProviders?.modal?.success ?? 'Connected'}</span>
-            </div>
-          )}
-        </div>
+        <CustomProviderFields form={form} t={t} locale={locale} layout="full" />
 
-        {/* Buttons */}
         <div className="flex gap-2 mt-6">
           <button
             type="button"
             onClick={onClose}
-            disabled={isSaving}
-            className="flex-1 px-3 py-2 text-sm rounded border border-border text-muted-foreground hover:text-foreground hover:border-foreground/20 transition-colors disabled:opacity-40"
+            className="flex-1 px-3 py-2 text-sm rounded-lg border border-border text-muted-foreground hover:text-foreground hover:border-foreground/20 transition-colors"
           >
             {t.settings?.customProviders?.modal?.buttonCancel ?? 'Cancel'}
           </button>
+          <TestButton result={form.testResult} disabled={!form.canSave} onTest={form.handleTest} t={t} />
           <button
             type="button"
-            onClick={handleTest}
-            disabled={isSaving || testState === 'testing'}
-            className="flex-1 px-3 py-2 text-sm rounded border border-border text-muted-foreground hover:text-foreground hover:border-foreground/20 transition-colors disabled:opacity-40 inline-flex items-center justify-center gap-1"
-          >
-            {testState === 'testing' && <Loader2 size={12} className="animate-spin" />}
-            {testState === 'testing'
-              ? (t.settings?.customProviders?.modal?.validating ?? 'Testing...')
-              : (t.settings?.customProviders?.modal?.buttonSave ?? 'Save & Test')}
-          </button>
-          <button
-            type="button"
-            onClick={handleSave}
-            disabled={isSaving}
-            className="flex-1 px-3 py-2 text-sm rounded font-medium bg-[var(--amber)] text-[var(--amber-foreground)] hover:bg-[var(--amber)]/90 transition-colors disabled:opacity-40 inline-flex items-center justify-center gap-1"
+            onClick={form.handleSave}
+            disabled={!form.canSave}
+            className="flex-1 px-4 py-2 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"
           >
-            {isSaving && <Loader2 size={12} className="animate-spin" />}
-            Save
+            {locale === 'zh' ? '保存' : 'Save'}
           </button>
         </div>
       </div>

package/_standalone/components/settings/SettingsContent.tsx

@@ -121,7 +121,7 @@ export default function SettingsContent({ visible, initialTab, variant, onClose
       await apiFetch('/api/settings', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ ai: d.ai, agent: d.agent, mindRoot: d.mindRoot, webPassword: d.webPassword, authToken: d.authToken, customProviders: d.customProviders }),
+        body: JSON.stringify({ ai: d.ai, agent: d.agent, mindRoot: d.mindRoot, webPassword: d.webPassword, authToken: d.authToken }),
       });
       setStatus('saved');
       window.dispatchEvent(new Event('mindos:settings-changed'));
@@ -168,7 +168,7 @@ export default function SettingsContent({ visible, initialTab, variant, onClose
         apiFetch('/api/settings', {
           method: 'POST',
           headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ ai: d.ai, agent: d.agent, mindRoot: d.mindRoot, webPassword: d.webPassword, authToken: d.authToken, customProviders: d.customProviders }),
+          body: JSON.stringify({ ai: d.ai, agent: d.agent, mindRoot: d.mindRoot, webPassword: d.webPassword, authToken: d.authToken }),
         }).catch(() => {});
       }
     };
@@ -179,10 +179,6 @@ export default function SettingsContent({ visible, initialTab, variant, onClose
     setData(d => d ? { ...d, ai: { ...d.ai, ...patch } } : d);
   }, []);
 
-  const updateCustomProviders = useCallback((providers: import('@/lib/custom-endpoints').CustomProvider[]) => {
-    setData(d => d ? { ...d, customProviders: providers } : d);
-  }, []);
-
   const updateAgent = useCallback((patch: Partial<AgentSettings>) => {
     setData(d => d ? { ...d, agent: { ...(d.agent ?? {}), ...patch } } : d);
   }, []);
@@ -190,11 +186,8 @@ export default function SettingsContent({ visible, initialTab, variant, onClose
   const restoreFromEnv = useCallback(async () => {
     if (!data) return;
     const defaults: AiSettings = {
-      provider: 'anthropic',
-      providers: {
-        anthropic: { apiKey: '', model: 'claude-sonnet-4-6' },
-        openai: { apiKey: '', model: 'gpt-5.4', baseUrl: '' },
-      },
+      activeProvider: '',
+      providers: [],
     };
     setData(d => d ? { ...d, ai: defaults } : d);
     const DEBOUNCE_DELAY = 800;
@@ -234,7 +227,7 @@ export default function SettingsContent({ visible, initialTab, variant, onClose
         </div>
       ) : (
         <>
-          {tab === 'ai' && data?.ai && <AiTab data={data} updateAi={updateAi} updateAgent={updateAgent} updateCustomProviders={updateCustomProviders} t={t} />}
+          {tab === 'ai' && data?.ai && <AiTab data={data} updateAi={updateAi} updateAgent={updateAgent} t={t} />}
           {tab === 'appearance' && <AppearanceTab font={font} setFont={setFont} fontSize={fontSize} setFontSize={setFontSize} contentWidth={contentWidth} setContentWidth={setContentWidth} dark={dark} setDark={setDark} locale={locale} setLocale={setLocale} t={t} />}
           {tab === 'knowledge' && data && <KnowledgeTab data={data} setData={setData} t={t} />}
           {tab === 'sync' && <SyncTab t={t} />}

package/_standalone/components/settings/TestButton.tsx

@@ -0,0 +1,64 @@
+'use client';
+
+import { AlertCircle, Loader2, Check, Zap } from 'lucide-react';
+import type { TestResult, ErrorCode } from './useCustomProviderForm';
+import type { AiTabProps } from './types';
+
+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;
+  }
+}
+
+/**
+ * Shared test-connection button used by both built-in and custom provider forms.
+ * Shows contextual icon + text based on test result state (idle/testing/ok/error).
+ */
+export function TestButton({
+  result, disabled, onTest, t,
+}: {
+  result: TestResult;
+  disabled: boolean;
+  onTest: () => void;
+  t: AiTabProps['t'];
+}) {
+  const isTesting = result.state === 'testing';
+  const isOk = result.state === 'ok';
+  const isError = result.state === 'error';
+
+  return (
+    <button
+      type="button"
+      disabled={disabled || 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} />
+      )}
+      {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>
+  );
+}

package/_standalone/components/settings/types.ts

@@ -1,17 +1,10 @@
 import type { Locale, Messages } from '@/lib/i18n';
 import type React from 'react';
-import type { ProviderId } from '@/lib/agent/providers';
-import type { CustomProvider } from '@/lib/custom-endpoints';
-
-export interface ProviderConfig {
-  apiKey: string;
-  model: string;
-  baseUrl?: string;
-}
+import type { Provider } from '@/lib/custom-endpoints';
 
 export interface AiSettings {
-  provider: ProviderId;
-  providers: Partial<Record<ProviderId, ProviderConfig>>;
+  activeProvider: string;
+  providers: Provider[];
 }
 
 export interface AgentSettings {
@@ -31,7 +24,6 @@ export interface SettingsData {
   mcpPort?: number;
   envOverrides?: Record<string, boolean>;
   envValues?: Record<string, string>;
-  customProviders?: CustomProvider[];
 }
 
 export type Tab = 'ai' | 'appearance' | 'knowledge' | 'mcp' | 'sync' | 'update' | 'uninstall';
@@ -161,7 +153,6 @@ export interface AiTabProps {
   data: SettingsData;
   updateAi: (patch: Partial<AiSettings>) => void;
   updateAgent: (patch: Partial<AgentSettings>) => void;
-  updateCustomProviders: (providers: CustomProvider[]) => void;
   t: Messages;
 }
 

package/_standalone/components/settings/useCustomProviderForm.ts

@@ -0,0 +1,132 @@
+'use client';
+
+import { useState, useCallback } from 'react';
+import { type ProviderId } from '@/lib/agent/providers';
+import { type Provider, generateProviderId } from '@/lib/custom-endpoints';
+
+export type TestState = 'idle' | 'testing' | 'ok' | 'error';
+export type ErrorCode = 'auth_error' | 'model_not_found' | 'rate_limited' | 'network_error' | 'unknown';
+
+export interface TestResult {
+  state: TestState;
+  latency?: number;
+  error?: string;
+  code?: ErrorCode;
+}
+
+export interface CustomProviderFormState {
+  name: string;
+  setName: (v: string) => void;
+  protocol: ProviderId;
+  setProtocol: (v: ProviderId) => void;
+  apiKey: string;
+  setApiKey: (v: string) => void;
+  model: string;
+  setModel: (v: string) => void;
+  baseUrl: string;
+  setBaseUrl: (v: string) => void;
+  testResult: TestResult;
+  canSave: boolean;
+  isDuplicateName: boolean;
+  handleTest: () => Promise<void>;
+  handleSave: () => void;
+}
+
+/**
+ * Shared form state + test/save logic for provider forms.
+ * Used by both the inline form (AiTab) and the modal (ProviderModal).
+ */
+export function useCustomProviderForm({
+  initial,
+  onSave,
+  locale,
+  existingNames,
+}: {
+  initial?: Provider;
+  onSave: (provider: Provider) => void;
+  locale: string;
+  existingNames?: string[];
+}): CustomProviderFormState {
+  const [name, setName] = useState(initial?.name ?? '');
+  const [protocol, setProtocol] = useState<ProviderId>(initial?.protocol ?? 'openai');
+  const [apiKey, setApiKey] = useState(initial?.apiKey ?? '');
+  const [model, setModel] = useState(initial?.model ?? '');
+  const [baseUrl, setBaseUrl] = useState(initial?.baseUrl ?? '');
+  const [testResult, setTestResult] = useState<TestResult>({ state: 'idle' });
+
+  // Check for duplicate name (exclude the provider being edited)
+  const trimmedName = name.trim();
+  const isDuplicateName = !!(trimmedName && existingNames?.some(
+    n => n.toLowerCase() === trimmedName.toLowerCase(),
+  ));
+
+  const canSave = !!(trimmedName && baseUrl.trim() && model.trim() && !isDuplicateName);
+
+  const handleTest = useCallback(async () => {
+    if (!canSave) {
+      setTestResult({
+        state: 'error',
+        error: locale === 'zh' ? '名称、接口地址和模型为必填' : 'Name, base URL, and model are required',
+      });
+      return;
+    }
+    setTestResult({ state: 'testing' });
+    try {
+      const res = await fetch('/api/settings/test-key', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(
+          initial?.id
+            ? { provider: initial.id, apiKey, model, baseUrl }
+            : { protocol, apiKey, model, baseUrl },
+        ),
+      });
+      const json = await res.json();
+      if (json.ok) {
+        setTestResult({ state: 'ok', latency: json.latency });
+      } else {
+        setTestResult({ state: 'error', error: json.error || 'Test failed', code: json.code });
+      }
+    } catch {
+      setTestResult({ state: 'error', code: 'network_error', error: 'Network error' });
+    }
+  }, [canSave, apiKey, model, baseUrl, protocol, locale, initial?.id]);
+
+  const handleSave = useCallback(() => {
+    if (isDuplicateName) {
+      setTestResult({
+        state: 'error',
+        error: locale === 'zh' ? '名称已存在，请使用其他名称' : 'Name already exists, please use a different name',
+      });
+      return;
+    }
+    if (!canSave) {
+      setTestResult({
+        state: 'error',
+        error: locale === 'zh' ? '名称、接口地址和模型为必填' : 'Name, base URL, and model are required',
+      });
+      return;
+    }
+    onSave({
+      id: initial?.id || generateProviderId(),
+      name: name.trim(),
+      protocol,
+      apiKey,
+      model: model.trim(),
+      baseUrl: baseUrl.trim(),
+    });
+  }, [canSave, isDuplicateName, name, protocol, apiKey, model, baseUrl, initial?.id, onSave, locale]);
+
+  return {
+    name, setName,
+    protocol, setProtocol,
+    apiKey, setApiKey,
+    model, setModel,
+    baseUrl, setBaseUrl,
+    testResult,
+    canSave,
+    isDuplicateName,
+    handleTest,
+    handleSave,
+  };
+}

package/_standalone/components/setup/StepAI.tsx

@@ -2,7 +2,7 @@
 
 import { useState, useEffect } from 'react';
 import { ChevronDown, ChevronRight, Copy, ExternalLink } from 'lucide-react';
-import { Field, Input, ApiKeyInput } from '@/components/settings/Primitives';
+import { Field, Input, PasswordInput } from '@/components/settings/Primitives';
 import type { SetupState, SetupMessages, PortStatus, ProviderSetupConfig } from './types';
 import type { ProviderId } from '@/lib/agent/providers';
 import { PROVIDER_PRESETS, isProviderId, getApiKeyEnvVar, getDefaultBaseUrl } from '@/lib/agent/providers';
@@ -58,7 +58,7 @@ export default function StepAI({ state, update, s, onCopyToken, webPortStatus, m
     <div className="space-y-5">
       <ProviderSelect
         value={state.provider}
-        onChange={id => update('provider', id)}
+        onChange={id => update('provider', id as ProviderId | 'skip')}
         showSkip
         compact
         configuredProviders={configuredProviders}
@@ -68,7 +68,7 @@ export default function StepAI({ state, update, s, onCopyToken, webPortStatus, m
         <div className="space-y-4 pt-2">
           {/* API Key */}
           <Field label={s.apiKey}>
-            <ApiKeyInput
+            <PasswordInput
               value={currentConfig.apiKey}
               onChange={v => patchConfig({ apiKey: v })}
               placeholder={currentConfig.apiKeyMask || `${getApiKeyEnvVar(currentProvider as ProviderId) ?? 'API Key'}...`}

package/_standalone/components/shared/ModelInput.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useRef, useCallback, useEffect, useMemo } from 'react';
+import { useState, useRef, useCallback, useEffect, useMemo, type CSSProperties } from 'react';
 import { ChevronDown, Loader2 } from 'lucide-react';
 import { Input } from '@/components/settings/Primitives';
 import { type ProviderId, PROVIDER_PRESETS } from '@/lib/agent/providers';
@@ -32,7 +32,9 @@ export default function ModelInput({
   const [focused, setFocused] = useState(false);
   const [highlightIdx, setHighlightIdx] = useState(-1);
   const containerRef = useRef<HTMLDivElement>(null);
+  const inputRowRef = useRef<HTMLDivElement>(null);
   const listRef = useRef<HTMLDivElement>(null);
+  const [dropdownStyle, setDropdownStyle] = useState<CSSProperties>({});
   const fetchedRef = useRef(false);
   const fetchVersionRef = useRef(0);
   const loadingRef = useRef(false);
@@ -107,6 +109,18 @@ export default function ModelInput({
 
   const showDropdown = open || (focused && models !== null && value.trim().length > 0 && filtered.length > 0);
 
+  // Compute fixed position for dropdown so it escapes overflow:auto ancestors
+  useEffect(() => {
+    if (!showDropdown || !inputRowRef.current) return;
+    const rect = inputRowRef.current.getBoundingClientRect();
+    setDropdownStyle({
+      position: 'fixed',
+      top: rect.bottom + 4,
+      left: rect.left,
+      width: rect.width,
+    });
+  }, [showDropdown]);
+
   useEffect(() => { setHighlightIdx(-1); }, [filtered]);
 
   useEffect(() => {
@@ -150,7 +164,7 @@ export default function ModelInput({
 
   return (
     <div ref={containerRef} className="relative">
-      <div className="flex gap-1.5">
+      <div ref={inputRowRef} className="flex gap-1.5">
         <Input
           value={value}
           onChange={e => { onChange(e.target.value); if (!open) setFocused(true); }}
@@ -175,7 +189,7 @@ export default function ModelInput({
       </div>
       {error && <p className="text-xs text-error mt-1">{error}</p>}
       {showDropdown && filtered.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">
+        <div ref={listRef} style={dropdownStyle} className="fixed z-[9999] max-h-48 overflow-y-auto rounded-lg border border-border bg-popover shadow-lg">
           {filtered.map((m, i) => {
             const isMatch = !value.trim() || m.toLowerCase().includes(value.toLowerCase());
             return (
@@ -197,7 +211,7 @@ export default function ModelInput({
         </div>
       )}
       {open && filtered.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">
+        <div style={dropdownStyle} className="fixed z-[9999] rounded-lg border border-border bg-popover shadow-lg px-3 py-2 text-xs text-muted-foreground">
           {noModelsLabel}
         </div>
       )}