diff --git a/src/components/providers/AmpcodeSection/AmpcodeModal.tsx b/src/components/providers/AmpcodeSection/AmpcodeModal.tsx
new file mode 100644
index 0000000..3b201e5
--- /dev/null
+++ b/src/components/providers/AmpcodeSection/AmpcodeModal.tsx
@@ -0,0 +1,264 @@
+import { useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button } from '@/components/ui/Button';
+import { Input } from '@/components/ui/Input';
+import { Modal } from '@/components/ui/Modal';
+import { ModelInputList } from '@/components/ui/ModelInputList';
+import { ToggleSwitch } from '@/components/ui/ToggleSwitch';
+import { useConfigStore, useNotificationStore } from '@/stores';
+import { ampcodeApi } from '@/services/api';
+import type { AmpcodeConfig } from '@/types';
+import { maskApiKey } from '@/utils/format';
+import { buildAmpcodeFormState, entriesToAmpcodeMappings } from '../utils';
+import type { AmpcodeFormState } from '../types';
+
+interface AmpcodeModalProps {
+  isOpen: boolean;
+  disableControls: boolean;
+  onClose: () => void;
+  onBusyChange?: (busy: boolean) => void;
+}
+
+export function AmpcodeModal({ isOpen, disableControls, onClose, onBusyChange }: AmpcodeModalProps) {
+  const { t } = useTranslation();
+  const { showNotification } = useNotificationStore();
+  const config = useConfigStore((state) => state.config);
+  const updateConfigValue = useConfigStore((state) => state.updateConfigValue);
+  const clearCache = useConfigStore((state) => state.clearCache);
+
+  const [form, setForm] = useState<AmpcodeFormState>(() => buildAmpcodeFormState(null));
+  const [loading, setLoading] = useState(false);
+  const [loaded, setLoaded] = useState(false);
+  const [mappingsDirty, setMappingsDirty] = useState(false);
+  const [error, setError] = useState('');
+  const [saving, setSaving] = useState(false);
+  const initializedRef = useRef(false);
+
+  const getErrorMessage = (err: unknown) => {
+    if (err instanceof Error) return err.message;
+    if (typeof err === 'string') return err;
+    return '';
+  };
+
+  useEffect(() => {
+    onBusyChange?.(loading || saving);
+  }, [loading, saving, onBusyChange]);
+
+  useEffect(() => {
+    if (!isOpen) {
+      initializedRef.current = false;
+      setLoading(false);
+      setSaving(false);
+      setError('');
+      setLoaded(false);
+      setMappingsDirty(false);
+      setForm(buildAmpcodeFormState(null));
+      onBusyChange?.(false);
+      return;
+    }
+    if (initializedRef.current) return;
+    initializedRef.current = true;
+
+    setLoading(true);
+    setLoaded(false);
+    setMappingsDirty(false);
+    setError('');
+    setForm(buildAmpcodeFormState(config?.ampcode ?? null));
+
+    void (async () => {
+      try {
+        const ampcode = await ampcodeApi.getAmpcode();
+        setLoaded(true);
+        updateConfigValue('ampcode', ampcode);
+        clearCache('ampcode');
+        setForm(buildAmpcodeFormState(ampcode));
+      } catch (err: unknown) {
+        setError(getErrorMessage(err) || t('notification.refresh_failed'));
+      } finally {
+        setLoading(false);
+      }
+    })();
+  }, [clearCache, config?.ampcode, isOpen, onBusyChange, t, updateConfigValue]);
+
+  const clearAmpcodeUpstreamApiKey = async () => {
+    if (!window.confirm(t('ai_providers.ampcode_clear_upstream_api_key_confirm'))) return;
+    setSaving(true);
+    setError('');
+    try {
+      await ampcodeApi.clearUpstreamApiKey();
+      const previous = config?.ampcode ?? {};
+      const next: AmpcodeConfig = { ...previous };
+      delete next.upstreamApiKey;
+      updateConfigValue('ampcode', next);
+      clearCache('ampcode');
+      showNotification(t('notification.ampcode_upstream_api_key_cleared'), 'success');
+    } catch (err: unknown) {
+      const message = getErrorMessage(err);
+      setError(message);
+      showNotification(`${t('notification.update_failed')}: ${message}`, 'error');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const saveAmpcode = async () => {
+    if (!loaded && mappingsDirty) {
+      const confirmed = window.confirm(t('ai_providers.ampcode_mappings_overwrite_confirm'));
+      if (!confirmed) return;
+    }
+
+    setSaving(true);
+    setError('');
+    try {
+      const upstreamUrl = form.upstreamUrl.trim();
+      const overrideKey = form.upstreamApiKey.trim();
+      const modelMappings = entriesToAmpcodeMappings(form.mappingEntries);
+
+      if (upstreamUrl) {
+        await ampcodeApi.updateUpstreamUrl(upstreamUrl);
+      } else {
+        await ampcodeApi.clearUpstreamUrl();
+      }
+
+      await ampcodeApi.updateForceModelMappings(form.forceModelMappings);
+
+      if (loaded || mappingsDirty) {
+        if (modelMappings.length) {
+          await ampcodeApi.saveModelMappings(modelMappings);
+        } else {
+          await ampcodeApi.clearModelMappings();
+        }
+      }
+
+      if (overrideKey) {
+        await ampcodeApi.updateUpstreamApiKey(overrideKey);
+      }
+
+      const previous = config?.ampcode ?? {};
+      const next: AmpcodeConfig = {
+        upstreamUrl: upstreamUrl || undefined,
+        forceModelMappings: form.forceModelMappings,
+      };
+
+      if (previous.upstreamApiKey) {
+        next.upstreamApiKey = previous.upstreamApiKey;
+      }
+
+      if (Array.isArray(previous.modelMappings)) {
+        next.modelMappings = previous.modelMappings;
+      }
+
+      if (overrideKey) {
+        next.upstreamApiKey = overrideKey;
+      }
+
+      if (loaded || mappingsDirty) {
+        if (modelMappings.length) {
+          next.modelMappings = modelMappings;
+        } else {
+          delete next.modelMappings;
+        }
+      }
+
+      updateConfigValue('ampcode', next);
+      clearCache('ampcode');
+      showNotification(t('notification.ampcode_updated'), 'success');
+      onClose();
+    } catch (err: unknown) {
+      const message = getErrorMessage(err);
+      setError(message);
+      showNotification(`${t('notification.update_failed')}: ${message}`, 'error');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  return (
+    <Modal
+      open={isOpen}
+      onClose={onClose}
+      title={t('ai_providers.ampcode_modal_title')}
+      footer={
+        <>
+          <Button variant="secondary" onClick={onClose} disabled={saving}>
+            {t('common.cancel')}
+          </Button>
+          <Button onClick={saveAmpcode} loading={saving} disabled={disableControls || loading}>
+            {t('common.save')}
+          </Button>
+        </>
+      }
+    >
+      {error && <div className="error-box">{error}</div>}
+      <Input
+        label={t('ai_providers.ampcode_upstream_url_label')}
+        placeholder={t('ai_providers.ampcode_upstream_url_placeholder')}
+        value={form.upstreamUrl}
+        onChange={(e) => setForm((prev) => ({ ...prev, upstreamUrl: e.target.value }))}
+        disabled={loading || saving}
+        hint={t('ai_providers.ampcode_upstream_url_hint')}
+      />
+      <Input
+        label={t('ai_providers.ampcode_upstream_api_key_label')}
+        placeholder={t('ai_providers.ampcode_upstream_api_key_placeholder')}
+        type="password"
+        value={form.upstreamApiKey}
+        onChange={(e) => setForm((prev) => ({ ...prev, upstreamApiKey: e.target.value }))}
+        disabled={loading || saving}
+        hint={t('ai_providers.ampcode_upstream_api_key_hint')}
+      />
+      <div
+        style={{
+          display: 'flex',
+          gap: 8,
+          alignItems: 'center',
+          marginTop: -8,
+          marginBottom: 12,
+          flexWrap: 'wrap',
+        }}
+      >
+        <div className="hint" style={{ margin: 0 }}>
+          {t('ai_providers.ampcode_upstream_api_key_current', {
+            key: config?.ampcode?.upstreamApiKey
+              ? maskApiKey(config.ampcode.upstreamApiKey)
+              : t('common.not_set'),
+          })}
+        </div>
+        <Button
+          variant="danger"
+          size="sm"
+          onClick={clearAmpcodeUpstreamApiKey}
+          disabled={loading || saving || !config?.ampcode?.upstreamApiKey}
+        >
+          {t('ai_providers.ampcode_clear_upstream_api_key')}
+        </Button>
+      </div>
+
+      <div className="form-group">
+        <ToggleSwitch
+          label={t('ai_providers.ampcode_force_model_mappings_label')}
+          checked={form.forceModelMappings}
+          onChange={(value) => setForm((prev) => ({ ...prev, forceModelMappings: value }))}
+          disabled={loading || saving}
+        />
+        <div className="hint">{t('ai_providers.ampcode_force_model_mappings_hint')}</div>
+      </div>
+
+      <div className="form-group">
+        <label>{t('ai_providers.ampcode_model_mappings_label')}</label>
+        <ModelInputList
+          entries={form.mappingEntries}
+          onChange={(entries) => {
+            setMappingsDirty(true);
+            setForm((prev) => ({ ...prev, mappingEntries: entries }));
+          }}
+          addLabel={t('ai_providers.ampcode_model_mappings_add_btn')}
+          namePlaceholder={t('ai_providers.ampcode_model_mappings_from_placeholder')}
+          aliasPlaceholder={t('ai_providers.ampcode_model_mappings_to_placeholder')}
+          disabled={loading || saving}
+        />
+        <div className="hint">{t('ai_providers.ampcode_model_mappings_hint')}</div>
+      </div>
+    </Modal>
+  );
+}
diff --git a/src/components/providers/AmpcodeSection/AmpcodeSection.tsx b/src/components/providers/AmpcodeSection/AmpcodeSection.tsx
new file mode 100644
index 0000000..ca87940
--- /dev/null
+++ b/src/components/providers/AmpcodeSection/AmpcodeSection.tsx
@@ -0,0 +1,111 @@
+import { Button } from '@/components/ui/Button';
+import { Card } from '@/components/ui/Card';
+import iconAmp from '@/assets/icons/amp.svg';
+import type { AmpcodeConfig } from '@/types';
+import { maskApiKey } from '@/utils/format';
+import styles from '@/pages/AiProvidersPage.module.scss';
+import { useTranslation } from 'react-i18next';
+import { AmpcodeModal } from './AmpcodeModal';
+
+interface AmpcodeSectionProps {
+  config: AmpcodeConfig | null | undefined;
+  loading: boolean;
+  disableControls: boolean;
+  isSaving: boolean;
+  isSwitching: boolean;
+  isBusy: boolean;
+  isModalOpen: boolean;
+  onOpen: () => void;
+  onCloseModal: () => void;
+  onBusyChange: (busy: boolean) => void;
+}
+
+export function AmpcodeSection({
+  config,
+  loading,
+  disableControls,
+  isSaving,
+  isSwitching,
+  isBusy,
+  isModalOpen,
+  onOpen,
+  onCloseModal,
+  onBusyChange,
+}: AmpcodeSectionProps) {
+  const { t } = useTranslation();
+
+  return (
+    <>
+      <Card
+        title={
+          <span className={styles.cardTitle}>
+            <img src={iconAmp} alt="" className={styles.cardTitleIcon} />
+            {t('ai_providers.ampcode_title')}
+          </span>
+        }
+        extra={
+          <Button
+            size="sm"
+            onClick={onOpen}
+            disabled={disableControls || isSaving || isBusy || isSwitching}
+          >
+            {t('common.edit')}
+          </Button>
+        }
+      >
+        {loading ? (
+          <div className="hint">{t('common.loading')}</div>
+        ) : (
+          <>
+            <div className={styles.fieldRow}>
+              <span className={styles.fieldLabel}>{t('ai_providers.ampcode_upstream_url_label')}:</span>
+              <span className={styles.fieldValue}>{config?.upstreamUrl || t('common.not_set')}</span>
+            </div>
+            <div className={styles.fieldRow}>
+              <span className={styles.fieldLabel}>
+                {t('ai_providers.ampcode_upstream_api_key_label')}:
+              </span>
+              <span className={styles.fieldValue}>
+                {config?.upstreamApiKey ? maskApiKey(config.upstreamApiKey) : t('common.not_set')}
+              </span>
+            </div>
+            <div className={styles.fieldRow}>
+              <span className={styles.fieldLabel}>
+                {t('ai_providers.ampcode_force_model_mappings_label')}:
+              </span>
+              <span className={styles.fieldValue}>
+                {(config?.forceModelMappings ?? false) ? t('common.yes') : t('common.no')}
+              </span>
+            </div>
+            <div className={styles.fieldRow} style={{ marginTop: 8 }}>
+              <span className={styles.fieldLabel}>{t('ai_providers.ampcode_model_mappings_count')}:</span>
+              <span className={styles.fieldValue}>{config?.modelMappings?.length || 0}</span>
+            </div>
+            {config?.modelMappings?.length ? (
+              <div className={styles.modelTagList}>
+                {config.modelMappings.slice(0, 5).map((mapping) => (
+                  <span key={`${mapping.from}→${mapping.to}`} className={styles.modelTag}>
+                    <span className={styles.modelName}>{mapping.from}</span>
+                    <span className={styles.modelAlias}>{mapping.to}</span>
+                  </span>
+                ))}
+                {config.modelMappings.length > 5 && (
+                  <span className={styles.modelTag}>
+                    <span className={styles.modelName}>+{config.modelMappings.length - 5}</span>
+                  </span>
+                )}
+              </div>
+            ) : null}
+          </>
+        )}
+      </Card>
+
+      <AmpcodeModal
+        isOpen={isModalOpen}
+        disableControls={disableControls}
+        onClose={onCloseModal}
+        onBusyChange={onBusyChange}
+      />
+    </>
+  );
+}
diff --git a/src/components/providers/AmpcodeSection/index.ts b/src/components/providers/AmpcodeSection/index.ts
new file mode 100644
index 0000000..b645805
--- /dev/null
+++ b/src/components/providers/AmpcodeSection/index.ts
@@ -0,0 +1 @@
+export { AmpcodeSection } from './AmpcodeSection';
diff --git a/src/components/providers/ClaudeSection/ClaudeModal.tsx b/src/components/providers/ClaudeSection/ClaudeModal.tsx
new file mode 100644
index 0000000..bf56c0a
--- /dev/null
+++ b/src/components/providers/ClaudeSection/ClaudeModal.tsx
@@ -0,0 +1,128 @@
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button } from '@/components/ui/Button';
+import { HeaderInputList } from '@/components/ui/HeaderInputList';
+import { Input } from '@/components/ui/Input';
+import { Modal } from '@/components/ui/Modal';
+import { ModelInputList, modelsToEntries } from '@/components/ui/ModelInputList';
+import type { ProviderKeyConfig } from '@/types';
+import { buildHeaderObject, headersToEntries } from '@/utils/headers';
+import { excludedModelsToText } from '../utils';
+import type { ProviderFormState, ProviderModalProps } from '../types';
+
+interface ClaudeModalProps extends ProviderModalProps<ProviderKeyConfig, ProviderFormState> {
+  isSaving: boolean;
+}
+
+const buildEmptyForm = (): ProviderFormState => ({
+  apiKey: '',
+  prefix: '',
+  baseUrl: '',
+  proxyUrl: '',
+  headers: {},
+  models: [],
+  excludedModels: [],
+  modelEntries: [{ name: '', alias: '' }],
+  excludedText: '',
+});
+
+export function ClaudeModal({
+  isOpen,
+  editIndex,
+  initialData,
+  onClose,
+  onSave,
+  isSaving,
+}: ClaudeModalProps) {
+  const { t } = useTranslation();
+  const [form, setForm] = useState<ProviderFormState>(buildEmptyForm);
+
+  useEffect(() => {
+    if (!isOpen) return;
+    if (initialData) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect
+      setForm({
+        ...initialData,
+        headers: initialData.headers ?? {},
+        modelEntries: modelsToEntries(initialData.models),
+        excludedText: excludedModelsToText(initialData.excludedModels),
+      });
+      return;
+    }
+    setForm(buildEmptyForm());
+  }, [initialData, isOpen]);
+
+  return (
+    <Modal
+      open={isOpen}
+      onClose={onClose}
+      title={
+        editIndex !== null
+          ? t('ai_providers.claude_edit_modal_title')
+          : t('ai_providers.claude_add_modal_title')
+      }
+      footer={
+        <>
+          <Button variant="secondary" onClick={onClose} disabled={isSaving}>
+            {t('common.cancel')}
+          </Button>
+          <Button onClick={() => void onSave(form, editIndex)} loading={isSaving}>
+            {t('common.save')}
+          </Button>
+        </>
+      }
+    >
+      <Input
+        label={t('ai_providers.claude_add_modal_key_label')}
+        value={form.apiKey}
+        onChange={(e) => setForm((prev) => ({ ...prev, apiKey: e.target.value }))}
+      />
+      <Input
+        label={t('ai_providers.prefix_label')}
+        placeholder={t('ai_providers.prefix_placeholder')}
+        value={form.prefix ?? ''}
+        onChange={(e) => setForm((prev) => ({ ...prev, prefix: e.target.value }))}
+        hint={t('ai_providers.prefix_hint')}
+      />
+      <Input
+        label={t('ai_providers.claude_add_modal_url_label')}
+        value={form.baseUrl ?? ''}
+        onChange={(e) => setForm((prev) => ({ ...prev, baseUrl: e.target.value }))}
+      />
+      <Input
+        label={t('ai_providers.claude_add_modal_proxy_label')}
+        value={form.proxyUrl ?? ''}
+        onChange={(e) => setForm((prev) => ({ ...prev, proxyUrl: e.target.value }))}
+      />
+      <HeaderInputList
+        entries={headersToEntries(form.headers)}
+        onChange={(entries) => setForm((prev) => ({ ...prev, headers: buildHeaderObject(entries) }))}
+        addLabel={t('common.custom_headers_add')}
+        keyPlaceholder={t('common.custom_headers_key_placeholder')}
+        valuePlaceholder={t('common.custom_headers_value_placeholder')}
+      />
+      <div className="form-group">
+        <label>{t('ai_providers.claude_models_label')}</label>
+        <ModelInputList
+          entries={form.modelEntries}
+          onChange={(entries) => setForm((prev) => ({ ...prev, modelEntries: entries }))}
+          addLabel={t('ai_providers.claude_models_add_btn')}
+          namePlaceholder={t('common.model_name_placeholder')}
+          aliasPlaceholder={t('common.model_alias_placeholder')}
+          disabled={isSaving}
+        />
+      </div>
+      <div className="form-group">
+        <label>{t('ai_providers.excluded_models_label')}</label>
+        <textarea
+          className="input"
+          placeholder={t('ai_providers.excluded_models_placeholder')}
+          value={form.excludedText}
+          onChange={(e) => setForm((prev) => ({ ...prev, excludedText: e.target.value }))}
+          rows={4}
+        />
+        <div className="hint">{t('ai_providers.excluded_models_hint')}</div>
+      </div>
+    </Modal>
+  );
+}
diff --git a/src/components/providers/ClaudeSection/ClaudeSection.tsx b/src/components/providers/ClaudeSection/ClaudeSection.tsx
new file mode 100644
index 0000000..c937159
--- /dev/null
+++ b/src/components/providers/ClaudeSection/ClaudeSection.tsx
@@ -0,0 +1,202 @@
+import { Fragment, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button } from '@/components/ui/Button';
+import { Card } from '@/components/ui/Card';
+import { ToggleSwitch } from '@/components/ui/ToggleSwitch';
+import iconClaude from '@/assets/icons/claude.svg';
+import type { ProviderKeyConfig } from '@/types';
+import { maskApiKey } from '@/utils/format';
+import { calculateStatusBarData, type KeyStats, type UsageDetail } from '@/utils/usage';
+import styles from '@/pages/AiProvidersPage.module.scss';
+import { ProviderList } from '../ProviderList';
+import { ProviderStatusBar } from '../ProviderStatusBar';
+import { getStatsBySource, hasDisableAllModelsRule } from '../utils';
+import type { ProviderFormState } from '../types';
+import { ClaudeModal } from './ClaudeModal';
+
+interface ClaudeSectionProps {
+  configs: ProviderKeyConfig[];
+  keyStats: KeyStats;
+  usageDetails: UsageDetail[];
+  loading: boolean;
+  disableControls: boolean;
+  isSaving: boolean;
+  isSwitching: boolean;
+  isModalOpen: boolean;
+  modalIndex: number | null;
+  onAdd: () => void;
+  onEdit: (index: number) => void;
+  onDelete: (index: number) => void;
+  onToggle: (index: number, enabled: boolean) => void;
+  onCloseModal: () => void;
+  onSave: (data: ProviderFormState, index: number | null) => Promise<void>;
+}
+
+export function ClaudeSection({
+  configs,
+  keyStats,
+  usageDetails,
+  loading,
+  disableControls,
+  isSaving,
+  isSwitching,
+  isModalOpen,
+  modalIndex,
+  onAdd,
+  onEdit,
+  onDelete,
+  onToggle,
+  onCloseModal,
+  onSave,
+}: ClaudeSectionProps) {
+  const { t } = useTranslation();
+  const actionsDisabled = disableControls || isSaving || isSwitching;
+  const toggleDisabled = disableControls || loading || isSaving || isSwitching;
+
+  const statusBarCache = useMemo(() => {
+    const cache = new Map<string, ReturnType<typeof calculateStatusBarData>>();
+    const allApiKeys = new Set<string>();
+    configs.forEach((config) => config.apiKey && allApiKeys.add(config.apiKey));
+    allApiKeys.forEach((apiKey) => {
+      cache.set(apiKey, calculateStatusBarData(usageDetails, apiKey));
+    });
+    return cache;
+  }, [configs, usageDetails]);
+
+  const initialData = modalIndex !== null ? configs[modalIndex] : undefined;
+
+  return (
+    <>
+      <Card
+        title={
+          <span className={styles.cardTitle}>
+            <img src={iconClaude} alt="" className={styles.cardTitleIcon} />
+            {t('ai_providers.claude_title')}
+          </span>
+        }
+        extra={
+          <Button size="sm" onClick={onAdd} disabled={actionsDisabled}>
+            {t('ai_providers.claude_add_button')}
+          </Button>
+        }
+      >
+        <ProviderList<ProviderKeyConfig>
+          items={configs}
+          loading={loading}
+          keyField={(item) => item.apiKey}
+          emptyTitle={t('ai_providers.claude_empty_title')}
+          emptyDescription={t('ai_providers.claude_empty_desc')}
+          onEdit={onEdit}
+          onDelete={onDelete}
+          actionsDisabled={actionsDisabled}
+          getRowDisabled={(item) => hasDisableAllModelsRule(item.excludedModels)}
+          renderExtraActions={(item, index) => (
+            <ToggleSwitch
+              label={t('ai_providers.config_toggle_label')}
+              checked={!hasDisableAllModelsRule(item.excludedModels)}
+              disabled={toggleDisabled}
+              onChange={(value) => void onToggle(index, value)}
+            />
+          )}
+          renderContent={(item) => {
+            const stats = getStatsBySource(item.apiKey, keyStats, maskApiKey);
+            const headerEntries = Object.entries(item.headers || {});
+            const configDisabled = hasDisableAllModelsRule(item.excludedModels);
+            const excludedModels = item.excludedModels ?? [];
+            const statusData =
+              statusBarCache.get(item.apiKey) || calculateStatusBarData([], item.apiKey);
+
+            return (
+              <Fragment>
+                <div className="item-title">{t('ai_providers.claude_item_title')}</div>
+                <div className={styles.fieldRow}>
+                  <span className={styles.fieldLabel}>{t('common.api_key')}:</span>
+                  <span className={styles.fieldValue}>{maskApiKey(item.apiKey)}</span>
+                </div>
+                {item.prefix && (
+                  <div className={styles.fieldRow}>
+                    <span className={styles.fieldLabel}>{t('common.prefix')}:</span>
+                    <span className={styles.fieldValue}>{item.prefix}</span>
+                  </div>
+                )}
+                {item.baseUrl && (
+                  <div className={styles.fieldRow}>
+                    <span className={styles.fieldLabel}>{t('common.base_url')}:</span>
+                    <span className={styles.fieldValue}>{item.baseUrl}</span>
+                  </div>
+                )}
+                {item.proxyUrl && (
+                  <div className={styles.fieldRow}>
+                    <span className={styles.fieldLabel}>{t('common.proxy_url')}:</span>
+                    <span className={styles.fieldValue}>{item.proxyUrl}</span>
+                  </div>
+                )}
+                {headerEntries.length > 0 && (
+                  <div className={styles.headerBadgeList}>
+                    {headerEntries.map(([key, value]) => (
+                      <span key={key} className={styles.headerBadge}>
+                        <strong>{key}:</strong> {value}
+                      </span>
+                    ))}
+                  </div>
+                )}
+                {configDisabled && (
+                  <div className="status-badge warning" style={{ marginTop: 8, marginBottom: 0 }}>
+                    {t('ai_providers.config_disabled_badge')}
+                  </div>
+                )}
+                {item.models?.length ? (
+                  <div className={styles.modelTagList}>
+                    <span className={styles.modelCountLabel}>
+                      {t('ai_providers.claude_models_count')}: {item.models.length}
+                    </span>
+                    {item.models.map((model) => (
+                      <span key={model.name} className={styles.modelTag}>
+                        <span className={styles.modelName}>{model.name}</span>
+                        {model.alias && model.alias !== model.name && (
+                          <span className={styles.modelAlias}>{model.alias}</span>
+                        )}
+                      </span>
+                    ))}
+                  </div>
+                ) : null}
+                {excludedModels.length ? (
+                  <div className={styles.excludedModelsSection}>
+                    <div className={styles.excludedModelsLabel}>
+                      {t('ai_providers.excluded_models_count', { count: excludedModels.length })}
+                    </div>
+                    <div className={styles.modelTagList}>
+                      {excludedModels.map((model) => (
+                        <span key={model} className={`${styles.modelTag} ${styles.excludedModelTag}`}>
+                          <span className={styles.modelName}>{model}</span>
+                        </span>
+                      ))}
+                    </div>
+                  </div>
+                ) : null}
+                <div className={styles.cardStats}>
+                  <span className={`${styles.statPill} ${styles.statSuccess}`}>
+                    {t('stats.success')}: {stats.success}
+                  </span>
+                  <span className={`${styles.statPill} ${styles.statFailure}`}>
+                    {t('stats.failure')}: {stats.failure}
+                  </span>
+                </div>
+                <ProviderStatusBar statusData={statusData} />
+              </Fragment>
+            );
+          }}
+        />
+      </Card>
+
+      <ClaudeModal
+        isOpen={isModalOpen}
+        editIndex={modalIndex}
+        initialData={initialData}
+        onClose={onCloseModal}
+        onSave={onSave}
+        isSaving={isSaving}
+      />
+    </>
+  );
+}
diff --git a/src/components/providers/ClaudeSection/index.ts b/src/components/providers/ClaudeSection/index.ts
new file mode 100644
index 0000000..c5a4347
--- /dev/null
+++ b/src/components/providers/ClaudeSection/index.ts
@@ -0,0 +1 @@
+export { ClaudeSection } from './ClaudeSection';
diff --git a/src/components/providers/CodexSection/CodexModal.tsx b/src/components/providers/CodexSection/CodexModal.tsx
new file mode 100644
index 0000000..3a6f817
--- /dev/null
+++ b/src/components/providers/CodexSection/CodexModal.tsx
@@ -0,0 +1,117 @@
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button } from '@/components/ui/Button';
+import { HeaderInputList } from '@/components/ui/HeaderInputList';
+import { Input } from '@/components/ui/Input';
+import { Modal } from '@/components/ui/Modal';
+import type { ProviderKeyConfig } from '@/types';
+import { buildHeaderObject, headersToEntries } from '@/utils/headers';
+import { modelsToEntries } from '@/components/ui/ModelInputList';
+import { excludedModelsToText } from '../utils';
+import type { ProviderFormState, ProviderModalProps } from '../types';
+
+interface CodexModalProps extends ProviderModalProps<ProviderKeyConfig, ProviderFormState> {
+  isSaving: boolean;
+}
+
+const buildEmptyForm = (): ProviderFormState => ({
+  apiKey: '',
+  prefix: '',
+  baseUrl: '',
+  proxyUrl: '',
+  headers: {},
+  models: [],
+  excludedModels: [],
+  modelEntries: [{ name: '', alias: '' }],
+  excludedText: '',
+});
+
+export function CodexModal({
+  isOpen,
+  editIndex,
+  initialData,
+  onClose,
+  onSave,
+  isSaving,
+}: CodexModalProps) {
+  const { t } = useTranslation();
+  const [form, setForm] = useState<ProviderFormState>(buildEmptyForm);
+
+  useEffect(() => {
+    if (!isOpen) return;
+    if (initialData) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect
+      setForm({
+        ...initialData,
+        headers: initialData.headers ?? {},
+        modelEntries: modelsToEntries(initialData.models),
+        excludedText: excludedModelsToText(initialData.excludedModels),
+      });
+      return;
+    }
+    setForm(buildEmptyForm());
+  }, [initialData, isOpen]);
+
+  return (
+    <Modal
+      open={isOpen}
+      onClose={onClose}
+      title={
+        editIndex !== null
+          ? t('ai_providers.codex_edit_modal_title')
+          : t('ai_providers.codex_add_modal_title')
+      }
+      footer={
+        <>
+          <Button variant="secondary" onClick={onClose} disabled={isSaving}>
+            {t('common.cancel')}
+          </Button>
+          <Button onClick={() => void onSave(form, editIndex)} loading={isSaving}>
+            {t('common.save')}
+          </Button>
+        </>
+      }
+    >
+      <Input
+        label={t('ai_providers.codex_add_modal_key_label')}
+        value={form.apiKey}
+        onChange={(e) => setForm((prev) => ({ ...prev, apiKey: e.target.value }))}
+      />
+      <Input
+        label={t('ai_providers.prefix_label')}
+        placeholder={t('ai_providers.prefix_placeholder')}
+        value={form.prefix ?? ''}
+        onChange={(e) => setForm((prev) => ({ ...prev, prefix: e.target.value }))}
+        hint={t('ai_providers.prefix_hint')}
+      />
+      <Input
+        label={t('ai_providers.codex_add_modal_url_label')}
+        value={form.baseUrl ?? ''}
+        onChange={(e) => setForm((prev) => ({ ...prev, baseUrl: e.target.value }))}
+      />
+      <Input
+        label={t('ai_providers.codex_add_modal_proxy_label')}
+        value={form.proxyUrl ?? ''}
+        onChange={(e) => setForm((prev) => ({ ...prev, proxyUrl: e.target.value }))}
+      />
+      <HeaderInputList
+        entries={headersToEntries(form.headers)}
+        onChange={(entries) => setForm((prev) => ({ ...prev, headers: buildHeaderObject(entries) }))}
+        addLabel={t('common.custom_headers_add')}
+        keyPlaceholder={t('common.custom_headers_key_placeholder')}
+        valuePlaceholder={t('common.custom_headers_value_placeholder')}
+      />
+      <div className="form-group">
+        <label>{t('ai_providers.excluded_models_label')}</label>
+        <textarea
+          className="input"
+          placeholder={t('ai_providers.excluded_models_placeholder')}
+          value={form.excludedText}
+          onChange={(e) => setForm((prev) => ({ ...prev, excludedText: e.target.value }))}
+          rows={4}
+        />
+        <div className="hint">{t('ai_providers.excluded_models_hint')}</div>
+      </div>
+    </Modal>
+  );
+}
diff --git a/src/components/providers/CodexSection/CodexSection.tsx b/src/components/providers/CodexSection/CodexSection.tsx
new file mode 100644
index 0000000..bd53bd1
--- /dev/null
+++ b/src/components/providers/CodexSection/CodexSection.tsx
@@ -0,0 +1,194 @@
+import { Fragment, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button } from '@/components/ui/Button';
+import { Card } from '@/components/ui/Card';
+import { ToggleSwitch } from '@/components/ui/ToggleSwitch';
+import iconOpenaiLight from '@/assets/icons/openai-light.svg';
+import iconOpenaiDark from '@/assets/icons/openai-dark.svg';
+import type { ProviderKeyConfig } from '@/types';
+import { maskApiKey } from '@/utils/format';
+import { calculateStatusBarData, type KeyStats, type UsageDetail } from '@/utils/usage';
+import styles from '@/pages/AiProvidersPage.module.scss';
+import { ProviderList } from '../ProviderList';
+import { ProviderStatusBar } from '../ProviderStatusBar';
+import { getStatsBySource, hasDisableAllModelsRule } from '../utils';
+import type { ProviderFormState } from '../types';
+import { CodexModal } from './CodexModal';
+
+interface CodexSectionProps {
+  configs: ProviderKeyConfig[];
+  keyStats: KeyStats;
+  usageDetails: UsageDetail[];
+  loading: boolean;
+  disableControls: boolean;
+  isSaving: boolean;
+  isSwitching: boolean;
+  resolvedTheme: string;
+  isModalOpen: boolean;
+  modalIndex: number | null;
+  onAdd: () => void;
+  onEdit: (index: number) => void;
+  onDelete: (index: number) => void;
+  onToggle: (index: number, enabled: boolean) => void;
+  onCloseModal: () => void;
+  onSave: (data: ProviderFormState, index: number | null) => Promise<void>;
+}
+
+export function CodexSection({
+  configs,
+  keyStats,
+  usageDetails,
+  loading,
+  disableControls,
+  isSaving,
+  isSwitching,
+  resolvedTheme,
+  isModalOpen,
+  modalIndex,
+  onAdd,
+  onEdit,
+  onDelete,
+  onToggle,
+  onCloseModal,
+  onSave,
+}: CodexSectionProps) {
+  const { t } = useTranslation();
+  const actionsDisabled = disableControls || isSaving || isSwitching;
+  const toggleDisabled = disableControls || loading || isSaving || isSwitching;
+
+  const statusBarCache = useMemo(() => {
+    const cache = new Map<string, ReturnType<typeof calculateStatusBarData>>();
+    const allApiKeys = new Set<string>();
+    configs.forEach((config) => config.apiKey && allApiKeys.add(config.apiKey));
+    allApiKeys.forEach((apiKey) => {
+      cache.set(apiKey, calculateStatusBarData(usageDetails, apiKey));
+    });
+    return cache;
+  }, [configs, usageDetails]);
+
+  const initialData = modalIndex !== null ? configs[modalIndex] : undefined;
+
+  return (
+    <>
+      <Card
+        title={
+          <span className={styles.cardTitle}>
+            <img
+              src={resolvedTheme === 'dark' ? iconOpenaiDark : iconOpenaiLight}
+              alt=""
+              className={styles.cardTitleIcon}
+            />
+            {t('ai_providers.codex_title')}
+          </span>
+        }
+        extra={
+          <Button size="sm" onClick={onAdd} disabled={actionsDisabled}>
+            {t('ai_providers.codex_add_button')}
+          </Button>
+        }
+      >
+        <ProviderList<ProviderKeyConfig>
+          items={configs}
+          loading={loading}
+          keyField={(item) => item.apiKey}
+          emptyTitle={t('ai_providers.codex_empty_title')}
+          emptyDescription={t('ai_providers.codex_empty_desc')}
+          onEdit={onEdit}
+          onDelete={onDelete}
+          actionsDisabled={actionsDisabled}
+          getRowDisabled={(item) => hasDisableAllModelsRule(item.excludedModels)}
+          renderExtraActions={(item, index) => (
+            <ToggleSwitch
+              label={t('ai_providers.config_toggle_label')}
+              checked={!hasDisableAllModelsRule(item.excludedModels)}
+              disabled={toggleDisabled}
+              onChange={(value) => void onToggle(index, value)}
+            />
+          )}
+          renderContent={(item) => {
+            const stats = getStatsBySource(item.apiKey, keyStats, maskApiKey);
+            const headerEntries = Object.entries(item.headers || {});
+            const configDisabled = hasDisableAllModelsRule(item.excludedModels);
+            const excludedModels = item.excludedModels ?? [];
+            const statusData =
+              statusBarCache.get(item.apiKey) || calculateStatusBarData([], item.apiKey);
+
+            return (
+              <Fragment>
+                <div className="item-title">{t('ai_providers.codex_item_title')}</div>
+                <div className={styles.fieldRow}>
+                  <span className={styles.fieldLabel}>{t('common.api_key')}:</span>
+                  <span className={styles.fieldValue}>{maskApiKey(item.apiKey)}</span>
+                </div>
+                {item.prefix && (
+                  <div className={styles.fieldRow}>
+                    <span className={styles.fieldLabel}>{t('common.prefix')}:</span>
+                    <span className={styles.fieldValue}>{item.prefix}</span>
+                  </div>
+                )}
+                {item.baseUrl && (
+                  <div className={styles.fieldRow}>
+                    <span className={styles.fieldLabel}>{t('common.base_url')}:</span>
+                    <span className={styles.fieldValue}>{item.baseUrl}</span>
+                  </div>
+                )}
+                {item.proxyUrl && (
+                  <div className={styles.fieldRow}>
+                    <span className={styles.fieldLabel}>{t('common.proxy_url')}:</span>
+                    <span className={styles.fieldValue}>{item.proxyUrl}</span>
+                  </div>
+                )}
+                {headerEntries.length > 0 && (
+                  <div className={styles.headerBadgeList}>
+                    {headerEntries.map(([key, value]) => (
+                      <span key={key} className={styles.headerBadge}>
+                        <strong>{key}:</strong> {value}
+                      </span>
+                    ))}
+                  </div>
+                )}
+                {configDisabled && (
+                  <div className="status-badge warning" style={{ marginTop: 8, marginBottom: 0 }}>
+                    {t('ai_providers.config_disabled_badge')}
+                  </div>
+                )}
+                {excludedModels.length ? (
+                  <div className={styles.excludedModelsSection}>
+                    <div className={styles.excludedModelsLabel}>
+                      {t('ai_providers.excluded_models_count', { count: excludedModels.length })}
+                    </div>
+                    <div className={styles.modelTagList}>
+                      {excludedModels.map((model) => (
+                        <span key={model} className={`${styles.modelTag} ${styles.excludedModelTag}`}>
+                          <span className={styles.modelName}>{model}</span>
+                        </span>
+                      ))}
+                    </div>
+                  </div>
+                ) : null}
+                <div className={styles.cardStats}>
+                  <span className={`${styles.statPill} ${styles.statSuccess}`}>
+                    {t('stats.success')}: {stats.success}
+                  </span>
+                  <span className={`${styles.statPill} ${styles.statFailure}`}>
+                    {t('stats.failure')}: {stats.failure}
+                  </span>
+                </div>
+                <ProviderStatusBar statusData={statusData} />
+              </Fragment>
+            );
+          }}
+        />
+      </Card>
+
+      <CodexModal
+        isOpen={isModalOpen}
+        editIndex={modalIndex}
+        initialData={initialData}
+        onClose={onCloseModal}
+        onSave={onSave}
+        isSaving={isSaving}
+      />
+    </>
+  );
+}
diff --git a/src/components/providers/CodexSection/index.ts b/src/components/providers/CodexSection/index.ts
new file mode 100644
index 0000000..1293aaa
--- /dev/null
+++ b/src/components/providers/CodexSection/index.ts
@@ -0,0 +1 @@
+export { CodexSection } from './CodexSection';
diff --git a/src/components/providers/GeminiSection/GeminiModal.tsx b/src/components/providers/GeminiSection/GeminiModal.tsx
new file mode 100644
index 0000000..d9699ef
--- /dev/null
+++ b/src/components/providers/GeminiSection/GeminiModal.tsx
@@ -0,0 +1,113 @@
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button } from '@/components/ui/Button';
+import { HeaderInputList } from '@/components/ui/HeaderInputList';
+import { Input } from '@/components/ui/Input';
+import { Modal } from '@/components/ui/Modal';
+import type { GeminiKeyConfig } from '@/types';
+import { buildHeaderObject, headersToEntries } from '@/utils/headers';
+import { excludedModelsToText } from '../utils';
+import type { GeminiFormState, ProviderModalProps } from '../types';
+
+interface GeminiModalProps extends ProviderModalProps<GeminiKeyConfig, GeminiFormState> {
+  isSaving: boolean;
+}
+
+const buildEmptyForm = (): GeminiFormState => ({
+  apiKey: '',
+  prefix: '',
+  baseUrl: '',
+  headers: {},
+  excludedModels: [],
+  excludedText: '',
+});
+
+export function GeminiModal({
+  isOpen,
+  editIndex,
+  initialData,
+  onClose,
+  onSave,
+  isSaving,
+}: GeminiModalProps) {
+  const { t } = useTranslation();
+  const [form, setForm] = useState<GeminiFormState>(buildEmptyForm);
+
+  useEffect(() => {
+    if (!isOpen) return;
+    if (initialData) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect
+      setForm({
+        ...initialData,
+        headers: initialData.headers ?? {},
+        excludedText: excludedModelsToText(initialData.excludedModels),
+      });
+      return;
+    }
+    setForm(buildEmptyForm());
+  }, [initialData, isOpen]);
+
+  const handleSave = () => {
+    void onSave(form, editIndex);
+  };
+
+  return (
+    <Modal
+      open={isOpen}
+      onClose={onClose}
+      title={
+        editIndex !== null
+          ? t('ai_providers.gemini_edit_modal_title')
+          : t('ai_providers.gemini_add_modal_title')
+      }
+      footer={
+        <>
+          <Button variant="secondary" onClick={onClose} disabled={isSaving}>
+            {t('common.cancel')}
+          </Button>
+          <Button onClick={handleSave} loading={isSaving}>
+            {t('common.save')}
+          </Button>
+        </>
+      }
+    >
+      <Input
+        label={t('ai_providers.gemini_add_modal_key_label')}
+        placeholder={t('ai_providers.gemini_add_modal_key_placeholder')}
+        value={form.apiKey}
+        onChange={(e) => setForm((prev) => ({ ...prev, apiKey: e.target.value }))}
+      />
+      <Input
+        label={t('ai_providers.prefix_label')}
+        placeholder={t('ai_providers.prefix_placeholder')}
+        value={form.prefix ?? ''}
+        onChange={(e) => setForm((prev) => ({ ...prev, prefix: e.target.value }))}
+        hint={t('ai_providers.prefix_hint')}
+      />
+      <Input
+        label={t('ai_providers.gemini_base_url_label')}
+        placeholder={t('ai_providers.gemini_base_url_placeholder')}
+        value={form.baseUrl ?? ''}
+        onChange={(e) => setForm((prev) => ({ ...prev, baseUrl: e.target.value }))}
+      />
+      <HeaderInputList
+        entries={headersToEntries(form.headers)}
+        onChange={(entries) => setForm((prev) => ({ ...prev, headers: buildHeaderObject(entries) }))}
+        addLabel={t('common.custom_headers_add')}
+        keyPlaceholder={t('common.custom_headers_key_placeholder')}
+        valuePlaceholder={t('common.custom_headers_value_placeholder')}
+      />
+      <div className="form-group">
+        <label>{t('ai_providers.excluded_models_label')}</label>
+        <textarea
+          className="input"
+          placeholder={t('ai_providers.excluded_models_placeholder')}
+          value={form.excludedText}
+          onChange={(e) => setForm((prev) => ({ ...prev, excludedText: e.target.value }))}
+          rows={4}
+        />
+        <div className="hint">{t('ai_providers.excluded_models_hint')}</div>
+      </div>
+    </Modal>
+  );
+}
diff --git a/src/components/providers/GeminiSection/GeminiSection.tsx b/src/components/providers/GeminiSection/GeminiSection.tsx
new file mode 100644
index 0000000..dcdb69c
--- /dev/null
+++ b/src/components/providers/GeminiSection/GeminiSection.tsx
@@ -0,0 +1,183 @@
+import { Fragment, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button } from '@/components/ui/Button';
+import { Card } from '@/components/ui/Card';
+import { ToggleSwitch } from '@/components/ui/ToggleSwitch';
+import iconGemini from '@/assets/icons/gemini.svg';
+import type { GeminiKeyConfig } from '@/types';
+import { maskApiKey } from '@/utils/format';
+import { calculateStatusBarData, type KeyStats, type UsageDetail } from '@/utils/usage';
+import styles from '@/pages/AiProvidersPage.module.scss';
+import type { GeminiFormState } from '../types';
+import { ProviderList } from '../ProviderList';
+import { ProviderStatusBar } from '../ProviderStatusBar';
+import { getStatsBySource, hasDisableAllModelsRule } from '../utils';
+import { GeminiModal } from './GeminiModal';
+
+interface GeminiSectionProps {
+  configs: GeminiKeyConfig[];
+  keyStats: KeyStats;
+  usageDetails: UsageDetail[];
+  loading: boolean;
+  disableControls: boolean;
+  isSaving: boolean;
+  isSwitching: boolean;
+  isModalOpen: boolean;
+  modalIndex: number | null;
+  onAdd: () => void;
+  onEdit: (index: number) => void;
+  onDelete: (index: number) => void;
+  onToggle: (index: number, enabled: boolean) => void;
+  onCloseModal: () => void;
+  onSave: (data: GeminiFormState, index: number | null) => Promise<void>;
+}
+
+export function GeminiSection({
+  configs,
+  keyStats,
+  usageDetails,
+  loading,
+  disableControls,
+  isSaving,
+  isSwitching,
+  isModalOpen,
+  modalIndex,
+  onAdd,
+  onEdit,
+  onDelete,
+  onToggle,
+  onCloseModal,
+  onSave,
+}: GeminiSectionProps) {
+  const { t } = useTranslation();
+  const actionsDisabled = disableControls || isSaving || isSwitching;
+  const toggleDisabled = disableControls || loading || isSaving || isSwitching;
+
+  const statusBarCache = useMemo(() => {
+    const cache = new Map<string, ReturnType<typeof calculateStatusBarData>>();
+    const allApiKeys = new Set<string>();
+    configs.forEach((config) => config.apiKey && allApiKeys.add(config.apiKey));
+    allApiKeys.forEach((apiKey) => {
+      cache.set(apiKey, calculateStatusBarData(usageDetails, apiKey));
+    });
+    return cache;
+  }, [configs, usageDetails]);
+
+  const initialData = modalIndex !== null ? configs[modalIndex] : undefined;
+
+  return (
+    <>
+      <Card
+        title={
+          <span className={styles.cardTitle}>
+            <img src={iconGemini} alt="" className={styles.cardTitleIcon} />
+            {t('ai_providers.gemini_title')}
+          </span>
+        }
+        extra={
+          <Button size="sm" onClick={onAdd} disabled={actionsDisabled}>
+            {t('ai_providers.gemini_add_button')}
+          </Button>
+        }
+      >
+        <ProviderList<GeminiKeyConfig>
+          items={configs}
+          loading={loading}
+          keyField={(item) => item.apiKey}
+          emptyTitle={t('ai_providers.gemini_empty_title')}
+          emptyDescription={t('ai_providers.gemini_empty_desc')}
+          onEdit={onEdit}
+          onDelete={onDelete}
+          actionsDisabled={actionsDisabled}
+          getRowDisabled={(item) => hasDisableAllModelsRule(item.excludedModels)}
+          renderExtraActions={(item, index) => (
+            <ToggleSwitch
+              label={t('ai_providers.config_toggle_label')}
+              checked={!hasDisableAllModelsRule(item.excludedModels)}
+              disabled={toggleDisabled}
+              onChange={(value) => void onToggle(index, value)}
+            />
+          )}
+          renderContent={(item, index) => {
+            const stats = getStatsBySource(item.apiKey, keyStats, maskApiKey);
+            const headerEntries = Object.entries(item.headers || {});
+            const configDisabled = hasDisableAllModelsRule(item.excludedModels);
+            const excludedModels = item.excludedModels ?? [];
+            const statusData =
+              statusBarCache.get(item.apiKey) || calculateStatusBarData([], item.apiKey);
+
+            return (
+              <Fragment>
+                <div className="item-title">
+                  {t('ai_providers.gemini_item_title')} #{index + 1}
+                </div>
+                <div className={styles.fieldRow}>
+                  <span className={styles.fieldLabel}>{t('common.api_key')}:</span>
+                  <span className={styles.fieldValue}>{maskApiKey(item.apiKey)}</span>
+                </div>
+                {item.prefix && (
+                  <div className={styles.fieldRow}>
+                    <span className={styles.fieldLabel}>{t('common.prefix')}:</span>
+                    <span className={styles.fieldValue}>{item.prefix}</span>
+                  </div>
+                )}
+                {item.baseUrl && (
+                  <div className={styles.fieldRow}>
+                    <span className={styles.fieldLabel}>{t('common.base_url')}:</span>
+                    <span className={styles.fieldValue}>{item.baseUrl}</span>
+                  </div>
+                )}
+                {headerEntries.length > 0 && (
+                  <div className={styles.headerBadgeList}>
+                    {headerEntries.map(([key, value]) => (
+                      <span key={key} className={styles.headerBadge}>
+                        <strong>{key}:</strong> {value}
+                      </span>
+                    ))}
+                  </div>
+                )}
+                {configDisabled && (
+                  <div className="status-badge warning" style={{ marginTop: 8, marginBottom: 0 }}>
+                    {t('ai_providers.config_disabled_badge')}
+                  </div>
+                )}
+                {excludedModels.length ? (
+                  <div className={styles.excludedModelsSection}>
+                    <div className={styles.excludedModelsLabel}>
+                      {t('ai_providers.excluded_models_count', { count: excludedModels.length })}
+                    </div>
+                    <div className={styles.modelTagList}>
+                      {excludedModels.map((model) => (
+                        <span key={model} className={`${styles.modelTag} ${styles.excludedModelTag}`}>
+                          <span className={styles.modelName}>{model}</span>
+                        </span>
+                      ))}
+                    </div>
+                  </div>
+                ) : null}
+                <div className={styles.cardStats}>
+                  <span className={`${styles.statPill} ${styles.statSuccess}`}>
+                    {t('stats.success')}: {stats.success}
+                  </span>
+                  <span className={`${styles.statPill} ${styles.statFailure}`}>
+                    {t('stats.failure')}: {stats.failure}
+                  </span>
+                </div>
+                <ProviderStatusBar statusData={statusData} />
+              </Fragment>
+            );
+          }}
+        />
+      </Card>
+
+      <GeminiModal
+        isOpen={isModalOpen}
+        editIndex={modalIndex}
+        initialData={initialData}
+        onClose={onCloseModal}
+        onSave={onSave}
+        isSaving={isSaving}
+      />
+    </>
+  );
+}
diff --git a/src/components/providers/GeminiSection/index.ts b/src/components/providers/GeminiSection/index.ts
new file mode 100644
index 0000000..c520851
--- /dev/null
+++ b/src/components/providers/GeminiSection/index.ts
@@ -0,0 +1 @@
+export { GeminiSection } from './GeminiSection';
diff --git a/src/components/providers/OpenAISection/OpenAIDiscoveryModal.tsx b/src/components/providers/OpenAISection/OpenAIDiscoveryModal.tsx
new file mode 100644
index 0000000..b1fc3f9
--- /dev/null
+++ b/src/components/providers/OpenAISection/OpenAIDiscoveryModal.tsx
@@ -0,0 +1,194 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button } from '@/components/ui/Button';
+import { Input } from '@/components/ui/Input';
+import { Modal } from '@/components/ui/Modal';
+import { modelsApi } from '@/services/api';
+import type { ApiKeyEntry } from '@/types';
+import type { ModelInfo } from '@/utils/models';
+import { buildHeaderObject, type HeaderEntry } from '@/utils/headers';
+import { buildOpenAIModelsEndpoint } from '../utils';
+import styles from '@/pages/AiProvidersPage.module.scss';
+
+interface OpenAIDiscoveryModalProps {
+  isOpen: boolean;
+  baseUrl: string;
+  headers: HeaderEntry[];
+  apiKeyEntries: ApiKeyEntry[];
+  onClose: () => void;
+  onApply: (selected: ModelInfo[]) => void;
+}
+
+export function OpenAIDiscoveryModal({
+  isOpen,
+  baseUrl,
+  headers,
+  apiKeyEntries,
+  onClose,
+  onApply,
+}: OpenAIDiscoveryModalProps) {
+  const { t } = useTranslation();
+  const [endpoint, setEndpoint] = useState('');
+  const [models, setModels] = useState<ModelInfo[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+  const [search, setSearch] = useState('');
+  const [selected, setSelected] = useState<Set<string>>(new Set());
+
+  const getErrorMessage = (err: unknown) => {
+    if (err instanceof Error) return err.message;
+    if (typeof err === 'string') return err;
+    return '';
+  };
+
+  const filteredModels = useMemo(() => {
+    const filter = search.trim().toLowerCase();
+    if (!filter) return models;
+    return models.filter((model) => {
+      const name = (model.name || '').toLowerCase();
+      const alias = (model.alias || '').toLowerCase();
+      const desc = (model.description || '').toLowerCase();
+      return name.includes(filter) || alias.includes(filter) || desc.includes(filter);
+    });
+  }, [models, search]);
+
+  const fetchOpenaiModelDiscovery = useCallback(
+    async ({ allowFallback = true }: { allowFallback?: boolean } = {}) => {
+      const trimmedBaseUrl = baseUrl.trim();
+      if (!trimmedBaseUrl) return;
+
+      setLoading(true);
+      setError('');
+      try {
+        const headerObject = buildHeaderObject(headers);
+        const firstKey = apiKeyEntries.find((entry) => entry.apiKey?.trim())?.apiKey?.trim();
+        const hasAuthHeader = Boolean(headerObject.Authorization || headerObject['authorization']);
+        const list = await modelsApi.fetchModelsViaApiCall(
+          trimmedBaseUrl,
+          hasAuthHeader ? undefined : firstKey,
+          headerObject
+        );
+        setModels(list);
+      } catch (err: unknown) {
+        if (allowFallback) {
+          try {
+            const list = await modelsApi.fetchModelsViaApiCall(trimmedBaseUrl);
+            setModels(list);
+            return;
+          } catch (fallbackErr: unknown) {
+            const message = getErrorMessage(fallbackErr) || getErrorMessage(err);
+            setModels([]);
+            setError(`${t('ai_providers.openai_models_fetch_error')}: ${message}`);
+          }
+        } else {
+          setModels([]);
+          setError(`${t('ai_providers.openai_models_fetch_error')}: ${getErrorMessage(err)}`);
+        }
+      } finally {
+        setLoading(false);
+      }
+    },
+    [apiKeyEntries, baseUrl, headers, t]
+  );
+
+  useEffect(() => {
+    if (!isOpen) return;
+    setEndpoint(buildOpenAIModelsEndpoint(baseUrl));
+    setModels([]);
+    setSearch('');
+    setSelected(new Set());
+    setError('');
+    void fetchOpenaiModelDiscovery();
+  }, [baseUrl, fetchOpenaiModelDiscovery, isOpen]);
+
+  const toggleSelection = (name: string) => {
+    setSelected((prev) => {
+      const next = new Set(prev);
+      if (next.has(name)) {
+        next.delete(name);
+      } else {
+        next.add(name);
+      }
+      return next;
+    });
+  };
+
+  const handleApply = () => {
+    const selectedModels = models.filter((model) => selected.has(model.name));
+    onApply(selectedModels);
+  };
+
+  return (
+    <Modal
+      open={isOpen}
+      onClose={onClose}
+      title={t('ai_providers.openai_models_fetch_title')}
+      width={720}
+      footer={
+        <>
+          <Button variant="secondary" onClick={onClose} disabled={loading}>
+            {t('ai_providers.openai_models_fetch_back')}
+          </Button>
+          <Button onClick={handleApply} disabled={loading}>
+            {t('ai_providers.openai_models_fetch_apply')}
+          </Button>
+        </>
+      }
+    >
+      <div className="hint" style={{ marginBottom: 8 }}>
+        {t('ai_providers.openai_models_fetch_hint')}
+      </div>
+      <div className="form-group">
+        <label>{t('ai_providers.openai_models_fetch_url_label')}</label>
+        <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
+          <input className="input" readOnly value={endpoint} />
+          <Button
+            variant="secondary"
+            size="sm"
+            onClick={() => void fetchOpenaiModelDiscovery({ allowFallback: true })}
+            loading={loading}
+          >
+            {t('ai_providers.openai_models_fetch_refresh')}
+          </Button>
+        </div>
+      </div>
+      <Input
+        label={t('ai_providers.openai_models_search_label')}
+        placeholder={t('ai_providers.openai_models_search_placeholder')}
+        value={search}
+        onChange={(e) => setSearch(e.target.value)}
+      />
+      {error && <div className="error-box">{error}</div>}
+      {loading ? (
+        <div className="hint">{t('ai_providers.openai_models_fetch_loading')}</div>
+      ) : models.length === 0 ? (
+        <div className="hint">{t('ai_providers.openai_models_fetch_empty')}</div>
+      ) : filteredModels.length === 0 ? (
+        <div className="hint">{t('ai_providers.openai_models_search_empty')}</div>
+      ) : (
+        <div className={styles.modelDiscoveryList}>
+          {filteredModels.map((model) => {
+            const checked = selected.has(model.name);
+            return (
+              <label
+                key={model.name}
+                className={`${styles.modelDiscoveryRow} ${checked ? styles.modelDiscoveryRowSelected : ''}`}
+              >
+                <input type="checkbox" checked={checked} onChange={() => toggleSelection(model.name)} />
+                <div className={styles.modelDiscoveryMeta}>
+                  <div className={styles.modelDiscoveryName}>
+                    {model.name}
+                    {model.alias && <span className={styles.modelDiscoveryAlias}>{model.alias}</span>}
+                  </div>
+                  {model.description && (
+                    <div className={styles.modelDiscoveryDesc}>{model.description}</div>
+                  )}
+                </div>
+              </label>
+            );
+          })}
+        </div>
+      )}
+    </Modal>
+  );
+}
diff --git a/src/components/providers/OpenAISection/OpenAIModal.tsx b/src/components/providers/OpenAISection/OpenAIModal.tsx
new file mode 100644
index 0000000..d9ff0c7
--- /dev/null
+++ b/src/components/providers/OpenAISection/OpenAIModal.tsx
@@ -0,0 +1,432 @@
+import { useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button } from '@/components/ui/Button';
+import { HeaderInputList } from '@/components/ui/HeaderInputList';
+import { Input } from '@/components/ui/Input';
+import { Modal } from '@/components/ui/Modal';
+import { ModelInputList, modelsToEntries } from '@/components/ui/ModelInputList';
+import { useNotificationStore } from '@/stores';
+import { apiCallApi, getApiCallErrorMessage } from '@/services/api';
+import type { OpenAIProviderConfig, ApiKeyEntry } from '@/types';
+import { buildHeaderObject, headersToEntries } from '@/utils/headers';
+import type { ModelInfo } from '@/utils/models';
+import styles from '@/pages/AiProvidersPage.module.scss';
+import { buildApiKeyEntry, buildOpenAIChatCompletionsEndpoint } from '../utils';
+import type { ModelEntry, OpenAIFormState, ProviderModalProps } from '../types';
+import { OpenAIDiscoveryModal } from './OpenAIDiscoveryModal';
+
+const OPENAI_TEST_TIMEOUT_MS = 30_000;
+
+interface OpenAIModalProps extends ProviderModalProps<OpenAIProviderConfig, OpenAIFormState> {
+  isSaving: boolean;
+}
+
+const buildEmptyForm = (): OpenAIFormState => ({
+  name: '',
+  prefix: '',
+  baseUrl: '',
+  headers: [],
+  apiKeyEntries: [buildApiKeyEntry()],
+  modelEntries: [{ name: '', alias: '' }],
+  testModel: undefined,
+});
+
+export function OpenAIModal({
+  isOpen,
+  editIndex,
+  initialData,
+  onClose,
+  onSave,
+  isSaving,
+}: OpenAIModalProps) {
+  const { t } = useTranslation();
+  const { showNotification } = useNotificationStore();
+  const [form, setForm] = useState<OpenAIFormState>(buildEmptyForm);
+  const [discoveryOpen, setDiscoveryOpen] = useState(false);
+  const [testModel, setTestModel] = useState('');
+  const [testStatus, setTestStatus] = useState<'idle' | 'loading' | 'success' | 'error'>('idle');
+  const [testMessage, setTestMessage] = useState('');
+
+  const getErrorMessage = (err: unknown) => {
+    if (err instanceof Error) return err.message;
+    if (typeof err === 'string') return err;
+    return '';
+  };
+
+  const availableModels = useMemo(
+    () => form.modelEntries.map((entry) => entry.name.trim()).filter(Boolean),
+    [form.modelEntries]
+  );
+
+  useEffect(() => {
+    if (!isOpen) {
+      setDiscoveryOpen(false);
+      return;
+    }
+
+    if (initialData) {
+      const modelEntries = modelsToEntries(initialData.models);
+      setForm({
+        name: initialData.name,
+        prefix: initialData.prefix ?? '',
+        baseUrl: initialData.baseUrl,
+        headers: headersToEntries(initialData.headers),
+        testModel: initialData.testModel,
+        modelEntries,
+        apiKeyEntries: initialData.apiKeyEntries?.length
+          ? initialData.apiKeyEntries
+          : [buildApiKeyEntry()],
+      });
+      const available = modelEntries.map((entry) => entry.name.trim()).filter(Boolean);
+      const initialModel =
+        initialData.testModel && available.includes(initialData.testModel)
+          ? initialData.testModel
+          : available[0] || '';
+      setTestModel(initialModel);
+    } else {
+      setForm(buildEmptyForm());
+      setTestModel('');
+    }
+
+    setTestStatus('idle');
+    setTestMessage('');
+    setDiscoveryOpen(false);
+  }, [initialData, isOpen]);
+
+  useEffect(() => {
+    if (!isOpen) return;
+    if (availableModels.length === 0) {
+      if (testModel) {
+        setTestModel('');
+        setTestStatus('idle');
+        setTestMessage('');
+      }
+      return;
+    }
+
+    if (!testModel || !availableModels.includes(testModel)) {
+      setTestModel(availableModels[0]);
+      setTestStatus('idle');
+      setTestMessage('');
+    }
+  }, [availableModels, isOpen, testModel]);
+
+  const renderKeyEntries = (entries: ApiKeyEntry[]) => {
+    const list = entries.length ? entries : [buildApiKeyEntry()];
+    const updateEntry = (idx: number, field: keyof ApiKeyEntry, value: string) => {
+      const next = list.map((entry, i) => (i === idx ? { ...entry, [field]: value } : entry));
+      setForm((prev) => ({ ...prev, apiKeyEntries: next }));
+    };
+
+    const removeEntry = (idx: number) => {
+      const next = list.filter((_, i) => i !== idx);
+      setForm((prev) => ({
+        ...prev,
+        apiKeyEntries: next.length ? next : [buildApiKeyEntry()],
+      }));
+    };
+
+    const addEntry = () => {
+      setForm((prev) => ({ ...prev, apiKeyEntries: [...list, buildApiKeyEntry()] }));
+    };
+
+    return (
+      <div className="stack">
+        {list.map((entry, index) => (
+          <div key={index} className="item-row">
+            <div className="item-meta">
+              <Input
+                label={`${t('common.api_key')} #${index + 1}`}
+                value={entry.apiKey}
+                onChange={(e) => updateEntry(index, 'apiKey', e.target.value)}
+              />
+              <Input
+                label={t('common.proxy_url')}
+                value={entry.proxyUrl ?? ''}
+                onChange={(e) => updateEntry(index, 'proxyUrl', e.target.value)}
+              />
+            </div>
+            <div className="item-actions">
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => removeEntry(index)}
+                disabled={list.length <= 1 || isSaving}
+              >
+                {t('common.delete')}
+              </Button>
+            </div>
+          </div>
+        ))}
+        <Button variant="secondary" size="sm" onClick={addEntry} disabled={isSaving}>
+          {t('ai_providers.openai_keys_add_btn')}
+        </Button>
+      </div>
+    );
+  };
+
+  const openOpenaiModelDiscovery = () => {
+    const baseUrl = form.baseUrl.trim();
+    if (!baseUrl) {
+      showNotification(t('ai_providers.openai_models_fetch_invalid_url'), 'error');
+      return;
+    }
+    setDiscoveryOpen(true);
+  };
+
+  const applyOpenaiModelDiscoverySelection = (selectedModels: ModelInfo[]) => {
+    if (!selectedModels.length) {
+      setDiscoveryOpen(false);
+      return;
+    }
+
+    const mergedMap = new Map<string, ModelEntry>();
+    form.modelEntries.forEach((entry) => {
+      const name = entry.name.trim();
+      if (!name) return;
+      mergedMap.set(name, { name, alias: entry.alias?.trim() || '' });
+    });
+
+    let addedCount = 0;
+    selectedModels.forEach((model) => {
+      const name = model.name.trim();
+      if (!name || mergedMap.has(name)) return;
+      mergedMap.set(name, { name, alias: model.alias ?? '' });
+      addedCount += 1;
+    });
+
+    const mergedEntries = Array.from(mergedMap.values());
+    setForm((prev) => ({
+      ...prev,
+      modelEntries: mergedEntries.length ? mergedEntries : [{ name: '', alias: '' }],
+    }));
+
+    setDiscoveryOpen(false);
+    if (addedCount > 0) {
+      showNotification(t('ai_providers.openai_models_fetch_added', { count: addedCount }), 'success');
+    }
+  };
+
+  const testOpenaiProviderConnection = async () => {
+    const baseUrl = form.baseUrl.trim();
+    if (!baseUrl) {
+      const message = t('notification.openai_test_url_required');
+      setTestStatus('error');
+      setTestMessage(message);
+      showNotification(message, 'error');
+      return;
+    }
+
+    const endpoint = buildOpenAIChatCompletionsEndpoint(baseUrl);
+    if (!endpoint) {
+      const message = t('notification.openai_test_url_required');
+      setTestStatus('error');
+      setTestMessage(message);
+      showNotification(message, 'error');
+      return;
+    }
+
+    const firstKeyEntry = form.apiKeyEntries.find((entry) => entry.apiKey?.trim());
+    if (!firstKeyEntry) {
+      const message = t('notification.openai_test_key_required');
+      setTestStatus('error');
+      setTestMessage(message);
+      showNotification(message, 'error');
+      return;
+    }
+
+    const modelName = testModel.trim() || availableModels[0] || '';
+    if (!modelName) {
+      const message = t('notification.openai_test_model_required');
+      setTestStatus('error');
+      setTestMessage(message);
+      showNotification(message, 'error');
+      return;
+    }
+
+    const customHeaders = buildHeaderObject(form.headers);
+    const headers: Record<string, string> = {
+      'Content-Type': 'application/json',
+      ...customHeaders,
+    };
+    if (!headers.Authorization && !headers['authorization']) {
+      headers.Authorization = `Bearer ${firstKeyEntry.apiKey.trim()}`;
+    }
+
+    setTestStatus('loading');
+    setTestMessage(t('ai_providers.openai_test_running'));
+
+    try {
+      const result = await apiCallApi.request(
+        {
+          method: 'POST',
+          url: endpoint,
+          header: Object.keys(headers).length ? headers : undefined,
+          data: JSON.stringify({
+            model: modelName,
+            messages: [{ role: 'user', content: 'Hi' }],
+            stream: false,
+            max_tokens: 5,
+          }),
+        },
+        { timeout: OPENAI_TEST_TIMEOUT_MS }
+      );
+
+      if (result.statusCode < 200 || result.statusCode >= 300) {
+        throw new Error(getApiCallErrorMessage(result));
+      }
+
+      setTestStatus('success');
+      setTestMessage(t('ai_providers.openai_test_success'));
+    } catch (err: unknown) {
+      setTestStatus('error');
+      const message = getErrorMessage(err);
+      const errorCode =
+        typeof err === 'object' && err !== null && 'code' in err ? String((err as { code?: string }).code) : '';
+      const isTimeout =
+        errorCode === 'ECONNABORTED' || message.toLowerCase().includes('timeout');
+      if (isTimeout) {
+        setTestMessage(t('ai_providers.openai_test_timeout', { seconds: OPENAI_TEST_TIMEOUT_MS / 1000 }));
+      } else {
+        setTestMessage(`${t('ai_providers.openai_test_failed')}: ${message}`);
+      }
+    }
+  };
+
+  return (
+    <>
+      <Modal
+        open={isOpen}
+        onClose={onClose}
+        title={
+          editIndex !== null
+            ? t('ai_providers.openai_edit_modal_title')
+            : t('ai_providers.openai_add_modal_title')
+        }
+        footer={
+          <>
+            <Button variant="secondary" onClick={onClose} disabled={isSaving}>
+              {t('common.cancel')}
+            </Button>
+            <Button onClick={() => void onSave(form, editIndex)} loading={isSaving}>
+              {t('common.save')}
+            </Button>
+          </>
+        }
+      >
+        <Input
+          label={t('ai_providers.openai_add_modal_name_label')}
+          value={form.name}
+          onChange={(e) => setForm((prev) => ({ ...prev, name: e.target.value }))}
+        />
+        <Input
+          label={t('ai_providers.prefix_label')}
+          placeholder={t('ai_providers.prefix_placeholder')}
+          value={form.prefix ?? ''}
+          onChange={(e) => setForm((prev) => ({ ...prev, prefix: e.target.value }))}
+          hint={t('ai_providers.prefix_hint')}
+        />
+        <Input
+          label={t('ai_providers.openai_add_modal_url_label')}
+          value={form.baseUrl}
+          onChange={(e) => setForm((prev) => ({ ...prev, baseUrl: e.target.value }))}
+        />
+
+        <HeaderInputList
+          entries={form.headers}
+          onChange={(entries) => setForm((prev) => ({ ...prev, headers: entries }))}
+          addLabel={t('common.custom_headers_add')}
+          keyPlaceholder={t('common.custom_headers_key_placeholder')}
+          valuePlaceholder={t('common.custom_headers_value_placeholder')}
+        />
+
+        <div className="form-group">
+          <label>
+            {editIndex !== null
+              ? t('ai_providers.openai_edit_modal_models_label')
+              : t('ai_providers.openai_add_modal_models_label')}
+          </label>
+          <div className="hint">{t('ai_providers.openai_models_hint')}</div>
+          <ModelInputList
+            entries={form.modelEntries}
+            onChange={(entries) => setForm((prev) => ({ ...prev, modelEntries: entries }))}
+            addLabel={t('ai_providers.openai_models_add_btn')}
+            namePlaceholder={t('common.model_name_placeholder')}
+            aliasPlaceholder={t('common.model_alias_placeholder')}
+            disabled={isSaving}
+          />
+          <Button variant="secondary" size="sm" onClick={openOpenaiModelDiscovery} disabled={isSaving}>
+            {t('ai_providers.openai_models_fetch_button')}
+          </Button>
+        </div>
+
+        <div className="form-group">
+          <label>{t('ai_providers.openai_test_title')}</label>
+          <div className="hint">{t('ai_providers.openai_test_hint')}</div>
+          <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
+            <select
+              className={`input ${styles.openaiTestSelect}`}
+              value={testModel}
+              onChange={(e) => {
+                setTestModel(e.target.value);
+                setTestStatus('idle');
+                setTestMessage('');
+              }}
+              disabled={isSaving || availableModels.length === 0}
+            >
+              <option value="">
+                {availableModels.length
+                  ? t('ai_providers.openai_test_select_placeholder')
+                  : t('ai_providers.openai_test_select_empty')}
+              </option>
+              {form.modelEntries
+                .filter((entry) => entry.name.trim())
+                .map((entry, idx) => {
+                  const name = entry.name.trim();
+                  const alias = entry.alias.trim();
+                  const label = alias && alias !== name ? `${name} (${alias})` : name;
+                  return (
+                    <option key={`${name}-${idx}`} value={name}>
+                      {label}
+                    </option>
+                  );
+                })}
+            </select>
+            <Button
+              variant={testStatus === 'error' ? 'danger' : 'secondary'}
+              className={`${styles.openaiTestButton} ${testStatus === 'success' ? styles.openaiTestButtonSuccess : ''}`}
+              onClick={testOpenaiProviderConnection}
+              loading={testStatus === 'loading'}
+              disabled={isSaving || availableModels.length === 0}
+            >
+              {t('ai_providers.openai_test_action')}
+            </Button>
+          </div>
+          {testMessage && (
+            <div
+              className={`status-badge ${
+                testStatus === 'error' ? 'error' : testStatus === 'success' ? 'success' : 'muted'
+              }`}
+            >
+              {testMessage}
+            </div>
+          )}
+        </div>
+
+        <div className="form-group">
+          <label>{t('ai_providers.openai_add_modal_keys_label')}</label>
+          {renderKeyEntries(form.apiKeyEntries)}
+        </div>
+      </Modal>
+
+      <OpenAIDiscoveryModal
+        isOpen={discoveryOpen}
+        baseUrl={form.baseUrl}
+        headers={form.headers}
+        apiKeyEntries={form.apiKeyEntries}
+        onClose={() => setDiscoveryOpen(false)}
+        onApply={applyOpenaiModelDiscoverySelection}
+      />
+    </>
+  );
+}
diff --git a/src/components/providers/OpenAISection/OpenAISection.tsx b/src/components/providers/OpenAISection/OpenAISection.tsx
new file mode 100644
index 0000000..a444740
--- /dev/null
+++ b/src/components/providers/OpenAISection/OpenAISection.tsx
@@ -0,0 +1,206 @@
+import { Fragment, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button } from '@/components/ui/Button';
+import { Card } from '@/components/ui/Card';
+import { IconCheck, IconX } from '@/components/ui/icons';
+import iconOpenaiLight from '@/assets/icons/openai-light.svg';
+import iconOpenaiDark from '@/assets/icons/openai-dark.svg';
+import type { OpenAIProviderConfig } from '@/types';
+import { maskApiKey } from '@/utils/format';
+import { calculateStatusBarData, type KeyStats, type UsageDetail } from '@/utils/usage';
+import styles from '@/pages/AiProvidersPage.module.scss';
+import { ProviderList } from '../ProviderList';
+import { ProviderStatusBar } from '../ProviderStatusBar';
+import { getOpenAIProviderStats, getStatsBySource } from '../utils';
+import type { OpenAIFormState } from '../types';
+import { OpenAIModal } from './OpenAIModal';
+
+interface OpenAISectionProps {
+  configs: OpenAIProviderConfig[];
+  keyStats: KeyStats;
+  usageDetails: UsageDetail[];
+  loading: boolean;
+  disableControls: boolean;
+  isSaving: boolean;
+  isSwitching: boolean;
+  resolvedTheme: string;
+  isModalOpen: boolean;
+  modalIndex: number | null;
+  onAdd: () => void;
+  onEdit: (index: number) => void;
+  onDelete: (index: number) => void;
+  onCloseModal: () => void;
+  onSave: (data: OpenAIFormState, index: number | null) => Promise<void>;
+}
+
+export function OpenAISection({
+  configs,
+  keyStats,
+  usageDetails,
+  loading,
+  disableControls,
+  isSaving,
+  isSwitching,
+  resolvedTheme,
+  isModalOpen,
+  modalIndex,
+  onAdd,
+  onEdit,
+  onDelete,
+  onCloseModal,
+  onSave,
+}: OpenAISectionProps) {
+  const { t } = useTranslation();
+  const actionsDisabled = disableControls || isSaving || isSwitching;
+
+  const statusBarCache = useMemo(() => {
+    const cache = new Map<string, ReturnType<typeof calculateStatusBarData>>();
+
+    configs.forEach((provider) => {
+      const allKeys = (provider.apiKeyEntries || []).map((entry) => entry.apiKey).filter(Boolean);
+      const filteredDetails = usageDetails.filter((detail) => allKeys.includes(detail.source));
+      cache.set(provider.name, calculateStatusBarData(filteredDetails));
+    });
+
+    return cache;
+  }, [configs, usageDetails]);
+
+  const initialData = modalIndex !== null ? configs[modalIndex] : undefined;
+
+  return (
+    <>
+      <Card
+        title={
+          <span className={styles.cardTitle}>
+            <img
+              src={resolvedTheme === 'dark' ? iconOpenaiDark : iconOpenaiLight}
+              alt=""
+              className={styles.cardTitleIcon}
+            />
+            {t('ai_providers.openai_title')}
+          </span>
+        }
+        extra={
+          <Button size="sm" onClick={onAdd} disabled={actionsDisabled}>
+            {t('ai_providers.openai_add_button')}
+          </Button>
+        }
+      >
+        <ProviderList<OpenAIProviderConfig>
+          items={configs}
+          loading={loading}
+          keyField={(item) => item.name}
+          emptyTitle={t('ai_providers.openai_empty_title')}
+          emptyDescription={t('ai_providers.openai_empty_desc')}
+          onEdit={onEdit}
+          onDelete={onDelete}
+          actionsDisabled={actionsDisabled}
+          renderContent={(item) => {
+            const stats = getOpenAIProviderStats(item.apiKeyEntries, keyStats, maskApiKey);
+            const headerEntries = Object.entries(item.headers || {});
+            const apiKeyEntries = item.apiKeyEntries || [];
+            const statusData = statusBarCache.get(item.name) || calculateStatusBarData([]);
+
+            return (
+              <Fragment>
+                <div className="item-title">{item.name}</div>
+                {item.prefix && (
+                  <div className={styles.fieldRow}>
+                    <span className={styles.fieldLabel}>{t('common.prefix')}:</span>
+                    <span className={styles.fieldValue}>{item.prefix}</span>
+                  </div>
+                )}
+                <div className={styles.fieldRow}>
+                  <span className={styles.fieldLabel}>{t('common.base_url')}:</span>
+                  <span className={styles.fieldValue}>{item.baseUrl}</span>
+                </div>
+                {headerEntries.length > 0 && (
+                  <div className={styles.headerBadgeList}>
+                    {headerEntries.map(([key, value]) => (
+                      <span key={key} className={styles.headerBadge}>
+                        <strong>{key}:</strong> {value}
+                      </span>
+                    ))}
+                  </div>
+                )}
+                {apiKeyEntries.length > 0 && (
+                  <div className={styles.apiKeyEntriesSection}>
+                    <div className={styles.apiKeyEntriesLabel}>
+                      {t('ai_providers.openai_keys_count')}: {apiKeyEntries.length}
+                    </div>
+                    <div className={styles.apiKeyEntryList}>
+                      {apiKeyEntries.map((entry, entryIndex) => {
+                        const entryStats = getStatsBySource(entry.apiKey, keyStats, maskApiKey);
+                        return (
+                          <div key={entryIndex} className={styles.apiKeyEntryCard}>
+                            <span className={styles.apiKeyEntryIndex}>{entryIndex + 1}</span>
+                            <span className={styles.apiKeyEntryKey}>{maskApiKey(entry.apiKey)}</span>
+                            {entry.proxyUrl && (
+                              <span className={styles.apiKeyEntryProxy}>{entry.proxyUrl}</span>
+                            )}
+                            <div className={styles.apiKeyEntryStats}>
+                              <span
+                                className={`${styles.apiKeyEntryStat} ${styles.apiKeyEntryStatSuccess}`}
+                              >
+                                <IconCheck size={12} /> {entryStats.success}
+                              </span>
+                              <span
+                                className={`${styles.apiKeyEntryStat} ${styles.apiKeyEntryStatFailure}`}
+                              >
+                                <IconX size={12} /> {entryStats.failure}
+                              </span>
+                            </div>
+                          </div>
+                        );
+                      })}
+                    </div>
+                  </div>
+                )}
+                <div className={styles.fieldRow} style={{ marginTop: '8px' }}>
+                  <span className={styles.fieldLabel}>{t('ai_providers.openai_models_count')}:</span>
+                  <span className={styles.fieldValue}>{item.models?.length || 0}</span>
+                </div>
+                {item.models?.length ? (
+                  <div className={styles.modelTagList}>
+                    {item.models.map((model) => (
+                      <span key={model.name} className={styles.modelTag}>
+                        <span className={styles.modelName}>{model.name}</span>
+                        {model.alias && model.alias !== model.name && (
+                          <span className={styles.modelAlias}>{model.alias}</span>
+                        )}
+                      </span>
+                    ))}
+                  </div>
+                ) : null}
+                {item.testModel && (
+                  <div className={styles.fieldRow}>
+                    <span className={styles.fieldLabel}>Test Model:</span>
+                    <span className={styles.fieldValue}>{item.testModel}</span>
+                  </div>
+                )}
+                <div className={styles.cardStats}>
+                  <span className={`${styles.statPill} ${styles.statSuccess}`}>
+                    {t('stats.success')}: {stats.success}
+                  </span>
+                  <span className={`${styles.statPill} ${styles.statFailure}`}>
+                    {t('stats.failure')}: {stats.failure}
+                  </span>
+                </div>
+                <ProviderStatusBar statusData={statusData} />
+              </Fragment>
+            );
+          }}
+        />
+      </Card>
+
+      <OpenAIModal
+        isOpen={isModalOpen}
+        editIndex={modalIndex}
+        initialData={initialData}
+        onClose={onCloseModal}
+        onSave={onSave}
+        isSaving={isSaving}
+      />
+    </>
+  );
+}
diff --git a/src/components/providers/OpenAISection/index.ts b/src/components/providers/OpenAISection/index.ts
new file mode 100644
index 0000000..71500f6
--- /dev/null
+++ b/src/components/providers/OpenAISection/index.ts
@@ -0,0 +1 @@
+export { OpenAISection } from './OpenAISection';
diff --git a/src/components/providers/ProviderList.tsx b/src/components/providers/ProviderList.tsx
new file mode 100644
index 0000000..7d6ec15
--- /dev/null
+++ b/src/components/providers/ProviderList.tsx
@@ -0,0 +1,80 @@
+import type { ReactNode } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button } from '@/components/ui/Button';
+import { EmptyState } from '@/components/ui/EmptyState';
+
+interface ProviderListProps<T> {
+  items: T[];
+  loading: boolean;
+  keyField: (item: T) => string;
+  renderContent: (item: T, index: number) => ReactNode;
+  onEdit: (index: number) => void;
+  onDelete: (index: number) => void;
+  emptyTitle: string;
+  emptyDescription: string;
+  deleteLabel?: string;
+  actionsDisabled?: boolean;
+  getRowDisabled?: (item: T, index: number) => boolean;
+  renderExtraActions?: (item: T, index: number) => ReactNode;
+}
+
+export function ProviderList<T>({
+  items,
+  loading,
+  keyField,
+  renderContent,
+  onEdit,
+  onDelete,
+  emptyTitle,
+  emptyDescription,
+  deleteLabel,
+  actionsDisabled = false,
+  getRowDisabled,
+  renderExtraActions,
+}: ProviderListProps<T>) {
+  const { t } = useTranslation();
+
+  if (loading) {
+    return <div className="hint">{t('common.loading')}</div>;
+  }
+
+  if (!items.length) {
+    return <EmptyState title={emptyTitle} description={emptyDescription} />;
+  }
+
+  return (
+    <div className="item-list">
+      {items.map((item, index) => {
+        const rowDisabled = getRowDisabled ? getRowDisabled(item, index) : false;
+        return (
+          <div
+            key={keyField(item)}
+            className="item-row"
+            style={rowDisabled ? { opacity: 0.6 } : undefined}
+          >
+            <div className="item-meta">{renderContent(item, index)}</div>
+            <div className="item-actions">
+              <Button
+                variant="secondary"
+                size="sm"
+                onClick={() => onEdit(index)}
+                disabled={actionsDisabled}
+              >
+                {t('common.edit')}
+              </Button>
+              <Button
+                variant="danger"
+                size="sm"
+                onClick={() => onDelete(index)}
+                disabled={actionsDisabled}
+              >
+                {deleteLabel || t('common.delete')}
+              </Button>
+              {renderExtraActions ? renderExtraActions(item, index) : null}
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/src/components/providers/ProviderStatusBar.tsx b/src/components/providers/ProviderStatusBar.tsx
new file mode 100644
index 0000000..6bda64c
--- /dev/null
+++ b/src/components/providers/ProviderStatusBar.tsx
@@ -0,0 +1,38 @@
+import { calculateStatusBarData } from '@/utils/usage';
+import styles from '@/pages/AiProvidersPage.module.scss';
+
+interface ProviderStatusBarProps {
+  statusData: ReturnType<typeof calculateStatusBarData>;
+}
+
+export function ProviderStatusBar({ statusData }: ProviderStatusBarProps) {
+  const hasData = statusData.totalSuccess + statusData.totalFailure > 0;
+  const rateClass = !hasData
+    ? ''
+    : statusData.successRate >= 90
+      ? styles.statusRateHigh
+      : statusData.successRate >= 50
+        ? styles.statusRateMedium
+        : styles.statusRateLow;
+
+  return (
+    <div className={styles.statusBar}>
+      <div className={styles.statusBlocks}>
+        {statusData.blocks.map((state, idx) => {
+          const blockClass =
+            state === 'success'
+              ? styles.statusBlockSuccess
+              : state === 'failure'
+                ? styles.statusBlockFailure
+                : state === 'mixed'
+                  ? styles.statusBlockMixed
+                  : styles.statusBlockIdle;
+          return <div key={idx} className={`${styles.statusBlock} ${blockClass}`} />;
+        })}
+      </div>
+      <span className={`${styles.statusRate} ${rateClass}`}>
+        {hasData ? `${statusData.successRate.toFixed(1)}%` : '--'}
+      </span>
+    </div>
+  );
+}
diff --git a/src/components/providers/hooks/useProviderStats.ts b/src/components/providers/hooks/useProviderStats.ts
new file mode 100644
index 0000000..4955529
--- /dev/null
+++ b/src/components/providers/hooks/useProviderStats.ts
@@ -0,0 +1,37 @@
+import { useCallback, useRef, useState } from 'react';
+import { useInterval } from '@/hooks/useInterval';
+import { usageApi } from '@/services/api';
+import { collectUsageDetails, type KeyStats, type UsageDetail } from '@/utils/usage';
+
+const EMPTY_STATS: KeyStats = { bySource: {}, byAuthIndex: {} };
+
+export const useProviderStats = () => {
+  const [keyStats, setKeyStats] = useState<KeyStats>(EMPTY_STATS);
+  const [usageDetails, setUsageDetails] = useState<UsageDetail[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const loadingRef = useRef(false);
+
+  // 加载 key 统计和 usage 明细（API 层已有60秒超时）
+  const loadKeyStats = useCallback(async () => {
+    if (loadingRef.current) return;
+    loadingRef.current = true;
+    setIsLoading(true);
+    try {
+      const usageResponse = await usageApi.getUsage();
+      const usageData = usageResponse?.usage ?? usageResponse;
+      const stats = await usageApi.getKeyStats(usageData);
+      setKeyStats(stats);
+      setUsageDetails(collectUsageDetails(usageData));
+    } catch {
+      // 静默失败
+    } finally {
+      loadingRef.current = false;
+      setIsLoading(false);
+    }
+  }, []);
+
+  // 定时刷新状态数据（每240秒）
+  useInterval(loadKeyStats, 240_000);
+
+  return { keyStats, usageDetails, loadKeyStats, isLoading };
+};
diff --git a/src/components/providers/index.ts b/src/components/providers/index.ts
new file mode 100644
index 0000000..7a96716
--- /dev/null
+++ b/src/components/providers/index.ts
@@ -0,0 +1,10 @@
+export { AmpcodeSection } from './AmpcodeSection';
+export { ClaudeSection } from './ClaudeSection';
+export { CodexSection } from './CodexSection';
+export { GeminiSection } from './GeminiSection';
+export { OpenAISection } from './OpenAISection';
+export { ProviderList } from './ProviderList';
+export { ProviderStatusBar } from './ProviderStatusBar';
+export * from './hooks/useProviderStats';
+export * from './types';
+export * from './utils';
diff --git a/src/components/providers/types.ts b/src/components/providers/types.ts
new file mode 100644
index 0000000..e4b0991
--- /dev/null
+++ b/src/components/providers/types.ts
@@ -0,0 +1,59 @@
+import type { ApiKeyEntry, GeminiKeyConfig, ProviderKeyConfig } from '@/types';
+import type { HeaderEntry } from '@/utils/headers';
+import type { KeyStats, UsageDetail } from '@/utils/usage';
+
+export type ProviderModal =
+  | { type: 'gemini'; index: number | null }
+  | { type: 'codex'; index: number | null }
+  | { type: 'claude'; index: number | null }
+  | { type: 'ampcode'; index: null }
+  | { type: 'openai'; index: number | null };
+
+export interface ModelEntry {
+  name: string;
+  alias: string;
+}
+
+export interface OpenAIFormState {
+  name: string;
+  prefix: string;
+  baseUrl: string;
+  headers: HeaderEntry[];
+  testModel?: string;
+  modelEntries: ModelEntry[];
+  apiKeyEntries: ApiKeyEntry[];
+}
+
+export interface AmpcodeFormState {
+  upstreamUrl: string;
+  upstreamApiKey: string;
+  forceModelMappings: boolean;
+  mappingEntries: ModelEntry[];
+}
+
+export type GeminiFormState = GeminiKeyConfig & { excludedText: string };
+
+export type ProviderFormState = ProviderKeyConfig & {
+  modelEntries: ModelEntry[];
+  excludedText: string;
+};
+
+export interface ProviderSectionProps<TConfig> {
+  configs: TConfig[];
+  keyStats: KeyStats;
+  usageDetails: UsageDetail[];
+  disabled: boolean;
+  onEdit: (index: number) => void;
+  onAdd: () => void;
+  onDelete: (index: number) => void;
+  onToggle?: (index: number, enabled: boolean) => void;
+}
+
+export interface ProviderModalProps<TConfig, TPayload = TConfig> {
+  isOpen: boolean;
+  editIndex: number | null;
+  initialData?: TConfig;
+  onClose: () => void;
+  onSave: (data: TPayload, index: number | null) => Promise<void>;
+  disabled?: boolean;
+}
diff --git a/src/components/providers/utils.ts b/src/components/providers/utils.ts
new file mode 100644
index 0000000..746b721
--- /dev/null
+++ b/src/components/providers/utils.ts
@@ -0,0 +1,132 @@
+import type { AmpcodeConfig, AmpcodeModelMapping, ApiKeyEntry } from '@/types';
+import type { KeyStatBucket, KeyStats } from '@/utils/usage';
+import type { AmpcodeFormState, ModelEntry } from './types';
+
+export const DISABLE_ALL_MODELS_RULE = '*';
+
+export const hasDisableAllModelsRule = (models?: string[]) =>
+  Array.isArray(models) &&
+  models.some((model) => String(model ?? '').trim() === DISABLE_ALL_MODELS_RULE);
+
+export const stripDisableAllModelsRule = (models?: string[]) =>
+  Array.isArray(models)
+    ? models.filter((model) => String(model ?? '').trim() !== DISABLE_ALL_MODELS_RULE)
+    : [];
+
+export const withDisableAllModelsRule = (models?: string[]) => {
+  const base = stripDisableAllModelsRule(models);
+  return [...base, DISABLE_ALL_MODELS_RULE];
+};
+
+export const withoutDisableAllModelsRule = (models?: string[]) => {
+  const base = stripDisableAllModelsRule(models);
+  return base;
+};
+
+export const parseExcludedModels = (text: string): string[] =>
+  text
+    .split(/[\n,]+/)
+    .map((item) => item.trim())
+    .filter(Boolean);
+
+export const excludedModelsToText = (models?: string[]) =>
+  Array.isArray(models) ? models.join('\n') : '';
+
+export const normalizeOpenAIBaseUrl = (baseUrl: string): string => {
+  let trimmed = String(baseUrl || '').trim();
+  if (!trimmed) return '';
+  trimmed = trimmed.replace(/\/?v0\/management\/?$/i, '');
+  trimmed = trimmed.replace(/\/+$/g, '');
+  if (!/^https?:\/\//i.test(trimmed)) {
+    trimmed = `http://${trimmed}`;
+  }
+  return trimmed;
+};
+
+export const buildOpenAIModelsEndpoint = (baseUrl: string): string => {
+  const trimmed = normalizeOpenAIBaseUrl(baseUrl);
+  if (!trimmed) return '';
+  return trimmed.endsWith('/v1') ? `${trimmed}/models` : `${trimmed}/v1/models`;
+};
+
+export const buildOpenAIChatCompletionsEndpoint = (baseUrl: string): string => {
+  const trimmed = normalizeOpenAIBaseUrl(baseUrl);
+  if (!trimmed) return '';
+  if (trimmed.endsWith('/chat/completions')) {
+    return trimmed;
+  }
+  return trimmed.endsWith('/v1') ? `${trimmed}/chat/completions` : `${trimmed}/v1/chat/completions`;
+};
+
+// 根据 source (apiKey) 获取统计数据 - 与旧版逻辑一致
+export const getStatsBySource = (
+  apiKey: string,
+  keyStats: KeyStats,
+  maskFn: (key: string) => string
+): KeyStatBucket => {
+  const bySource = keyStats.bySource ?? {};
+  const masked = maskFn(apiKey);
+  return bySource[apiKey] || bySource[masked] || { success: 0, failure: 0 };
+};
+
+// 对于 OpenAI 提供商，汇总所有 apiKeyEntries 的统计 - 与旧版逻辑一致
+export const getOpenAIProviderStats = (
+  apiKeyEntries: ApiKeyEntry[] | undefined,
+  keyStats: KeyStats,
+  maskFn: (key: string) => string
+): KeyStatBucket => {
+  const bySource = keyStats.bySource ?? {};
+  let totalSuccess = 0;
+  let totalFailure = 0;
+
+  (apiKeyEntries || []).forEach((entry) => {
+    const key = entry?.apiKey || '';
+    if (!key) return;
+    const masked = maskFn(key);
+    const stats = bySource[key] || bySource[masked] || { success: 0, failure: 0 };
+    totalSuccess += stats.success;
+    totalFailure += stats.failure;
+  });
+
+  return { success: totalSuccess, failure: totalFailure };
+};
+
+export const buildApiKeyEntry = (input?: Partial<ApiKeyEntry>): ApiKeyEntry => ({
+  apiKey: input?.apiKey ?? '',
+  proxyUrl: input?.proxyUrl ?? '',
+  headers: input?.headers ?? {},
+});
+
+export const ampcodeMappingsToEntries = (mappings?: AmpcodeModelMapping[]): ModelEntry[] => {
+  if (!Array.isArray(mappings) || mappings.length === 0) {
+    return [{ name: '', alias: '' }];
+  }
+  return mappings.map((mapping) => ({
+    name: mapping.from ?? '',
+    alias: mapping.to ?? '',
+  }));
+};
+
+export const entriesToAmpcodeMappings = (entries: ModelEntry[]): AmpcodeModelMapping[] => {
+  const seen = new Set<string>();
+  const mappings: AmpcodeModelMapping[] = [];
+
+  entries.forEach((entry) => {
+    const from = entry.name.trim();
+    const to = entry.alias.trim();
+    if (!from || !to) return;
+    const key = from.toLowerCase();
+    if (seen.has(key)) return;
+    seen.add(key);
+    mappings.push({ from, to });
+  });
+
+  return mappings;
+};
+
+export const buildAmpcodeFormState = (ampcode?: AmpcodeConfig | null): AmpcodeFormState => ({
+  upstreamUrl: ampcode?.upstreamUrl ?? '',
+  upstreamApiKey: '',
+  forceModelMappings: ampcode?.forceModelMappings ?? false,
+  mappingEntries: ampcodeMappingsToEntries(ampcode?.modelMappings),
+});
diff --git a/src/pages/AiProvidersPage.tsx b/src/pages/AiProvidersPage.tsx
index 2c9e717..e6b828a 100644
--- a/src/pages/AiProvidersPage.tsx
+++ b/src/pages/AiProvidersPage.tsx
@@ -1,204 +1,29 @@
-import { Fragment, useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useInterval } from '@/hooks/useInterval';
-import { Card } from '@/components/ui/Card';
-import { Button } from '@/components/ui/Button';
-import { Input } from '@/components/ui/Input';
-import { Modal } from '@/components/ui/Modal';
-import { EmptyState } from '@/components/ui/EmptyState';
-import { HeaderInputList } from '@/components/ui/HeaderInputList';
-import { ModelInputList, modelsToEntries, entriesToModels } from '@/components/ui/ModelInputList';
-import { ToggleSwitch } from '@/components/ui/ToggleSwitch';
-import { IconCheck, IconX } from '@/components/ui/icons';
-import { useAuthStore, useConfigStore, useNotificationStore, useThemeStore } from '@/stores';
+import { entriesToModels } from '@/components/ui/ModelInputList';
 import {
-  ampcodeApi,
-  apiCallApi,
-  getApiCallErrorMessage,
-  modelsApi,
-  providersApi,
-  usageApi
-} from '@/services/api';
-import iconGemini from '@/assets/icons/gemini.svg';
-import iconOpenaiLight from '@/assets/icons/openai-light.svg';
-import iconOpenaiDark from '@/assets/icons/openai-dark.svg';
-import iconClaude from '@/assets/icons/claude.svg';
-import iconAmp from '@/assets/icons/amp.svg';
-import type {
-  GeminiKeyConfig,
-  ProviderKeyConfig,
-  OpenAIProviderConfig,
-  ApiKeyEntry,
-  AmpcodeConfig,
-  AmpcodeModelMapping,
-} from '@/types';
-import type { KeyStats, KeyStatBucket, UsageDetail } from '@/utils/usage';
-import { collectUsageDetails, calculateStatusBarData } from '@/utils/usage';
-import type { ModelInfo } from '@/utils/models';
-import { headersToEntries, buildHeaderObject, type HeaderEntry } from '@/utils/headers';
-import { maskApiKey } from '@/utils/format';
+  AmpcodeSection,
+  ClaudeSection,
+  CodexSection,
+  GeminiSection,
+  OpenAISection,
+  useProviderStats,
+  type GeminiFormState,
+  type OpenAIFormState,
+  type ProviderFormState,
+  type ProviderModal,
+} from '@/components/providers';
+import {
+  parseExcludedModels,
+  withDisableAllModelsRule,
+  withoutDisableAllModelsRule,
+} from '@/components/providers/utils';
+import { ampcodeApi, providersApi } from '@/services/api';
+import { useAuthStore, useConfigStore, useNotificationStore, useThemeStore } from '@/stores';
+import type { GeminiKeyConfig, OpenAIProviderConfig, ProviderKeyConfig } from '@/types';
+import { buildHeaderObject, headersToEntries } from '@/utils/headers';
 import styles from './AiProvidersPage.module.scss';
 
-type ProviderModal =
-  | { type: 'gemini'; index: number | null }
-  | { type: 'codex'; index: number | null }
-  | { type: 'claude'; index: number | null }
-  | { type: 'ampcode'; index: null }
-  | { type: 'openai'; index: number | null };
-
-interface ModelEntry {
-  name: string;
-  alias: string;
-}
-
-interface OpenAIFormState {
-  name: string;
-  prefix: string;
-  baseUrl: string;
-  headers: HeaderEntry[];
-  testModel?: string;
-  modelEntries: ModelEntry[];
-  apiKeyEntries: ApiKeyEntry[];
-}
-
-interface AmpcodeFormState {
-  upstreamUrl: string;
-  upstreamApiKey: string;
-  forceModelMappings: boolean;
-  mappingEntries: ModelEntry[];
-}
-
-const DISABLE_ALL_MODELS_RULE = '*';
-
-const hasDisableAllModelsRule = (models?: string[]) =>
-  Array.isArray(models) &&
-  models.some((model) => String(model ?? '').trim() === DISABLE_ALL_MODELS_RULE);
-
-const stripDisableAllModelsRule = (models?: string[]) =>
-  Array.isArray(models)
-    ? models.filter((model) => String(model ?? '').trim() !== DISABLE_ALL_MODELS_RULE)
-    : [];
-
-const withDisableAllModelsRule = (models?: string[]) => {
-  const base = stripDisableAllModelsRule(models);
-  return [...base, DISABLE_ALL_MODELS_RULE];
-};
-
-const withoutDisableAllModelsRule = (models?: string[]) => {
-  const base = stripDisableAllModelsRule(models);
-  return base;
-};
-
-const parseExcludedModels = (text: string): string[] =>
-  text
-    .split(/[\n,]+/)
-    .map((item) => item.trim())
-    .filter(Boolean);
-
-const excludedModelsToText = (models?: string[]) =>
-  Array.isArray(models) ? models.join('\n') : '';
-
-const normalizeOpenAIBaseUrl = (baseUrl: string): string => {
-  let trimmed = String(baseUrl || '').trim();
-  if (!trimmed) return '';
-  trimmed = trimmed.replace(/\/?v0\/management\/?$/i, '');
-  trimmed = trimmed.replace(/\/+$/g, '');
-  if (!/^https?:\/\//i.test(trimmed)) {
-    trimmed = `http://${trimmed}`;
-  }
-  return trimmed;
-};
-
-const buildOpenAIModelsEndpoint = (baseUrl: string): string => {
-  const trimmed = normalizeOpenAIBaseUrl(baseUrl);
-  if (!trimmed) return '';
-  return trimmed.endsWith('/v1') ? `${trimmed}/models` : `${trimmed}/v1/models`;
-};
-
-const buildOpenAIChatCompletionsEndpoint = (baseUrl: string): string => {
-  const trimmed = normalizeOpenAIBaseUrl(baseUrl);
-  if (!trimmed) return '';
-  if (trimmed.endsWith('/chat/completions')) {
-    return trimmed;
-  }
-  return trimmed.endsWith('/v1') ? `${trimmed}/chat/completions` : `${trimmed}/v1/chat/completions`;
-};
-
-const OPENAI_TEST_TIMEOUT_MS = 30_000;
-
-// 根据 source (apiKey) 获取统计数据 - 与旧版逻辑一致
-const getStatsBySource = (
-  apiKey: string,
-  keyStats: KeyStats,
-  maskFn: (key: string) => string
-): KeyStatBucket => {
-  const bySource = keyStats.bySource ?? {};
-  const masked = maskFn(apiKey);
-  return bySource[apiKey] || bySource[masked] || { success: 0, failure: 0 };
-};
-
-// 对于 OpenAI 提供商，汇总所有 apiKeyEntries 的统计 - 与旧版逻辑一致
-const getOpenAIProviderStats = (
-  apiKeyEntries: ApiKeyEntry[] | undefined,
-  keyStats: KeyStats,
-  maskFn: (key: string) => string
-): KeyStatBucket => {
-  const bySource = keyStats.bySource ?? {};
-  let totalSuccess = 0;
-  let totalFailure = 0;
-
-  (apiKeyEntries || []).forEach((entry) => {
-    const key = entry?.apiKey || '';
-    if (!key) return;
-    const masked = maskFn(key);
-    const stats = bySource[key] || bySource[masked] || { success: 0, failure: 0 };
-    totalSuccess += stats.success;
-    totalFailure += stats.failure;
-  });
-
-  return { success: totalSuccess, failure: totalFailure };
-};
-
-const buildApiKeyEntry = (input?: Partial<ApiKeyEntry>): ApiKeyEntry => ({
-  apiKey: input?.apiKey ?? '',
-  proxyUrl: input?.proxyUrl ?? '',
-  headers: input?.headers ?? {},
-});
-
-const ampcodeMappingsToEntries = (mappings?: AmpcodeModelMapping[]): ModelEntry[] => {
-  if (!Array.isArray(mappings) || mappings.length === 0) {
-    return [{ name: '', alias: '' }];
-  }
-  return mappings.map((mapping) => ({
-    name: mapping.from ?? '',
-    alias: mapping.to ?? '',
-  }));
-};
-
-const entriesToAmpcodeMappings = (entries: ModelEntry[]): AmpcodeModelMapping[] => {
-  const seen = new Set<string>();
-  const mappings: AmpcodeModelMapping[] = [];
-
-  entries.forEach((entry) => {
-    const from = entry.name.trim();
-    const to = entry.alias.trim();
-    if (!from || !to) return;
-    const key = from.toLowerCase();
-    if (seen.has(key)) return;
-    seen.add(key);
-    mappings.push({ from, to });
-  });
-
-  return mappings;
-};
-
-const buildAmpcodeFormState = (ampcode?: AmpcodeConfig | null): AmpcodeFormState => ({
-  upstreamUrl: ampcode?.upstreamUrl ?? '',
-  upstreamApiKey: '',
-  forceModelMappings: ampcode?.forceModelMappings ?? false,
-  mappingEntries: ampcodeMappingsToEntries(ampcode?.modelMappings),
-});
-
 export function AiProvidersPage() {
   const { t } = useTranslation();
   const { showNotification } = useNotificationStore();
@@ -217,101 +42,24 @@ export function AiProvidersPage() {
   const [codexConfigs, setCodexConfigs] = useState<ProviderKeyConfig[]>([]);
   const [claudeConfigs, setClaudeConfigs] = useState<ProviderKeyConfig[]>([]);
   const [openaiProviders, setOpenaiProviders] = useState<OpenAIProviderConfig[]>([]);
-  const [keyStats, setKeyStats] = useState<KeyStats>({ bySource: {}, byAuthIndex: {} });
-  const [usageDetails, setUsageDetails] = useState<UsageDetail[]>([]);
-  const loadingKeyStatsRef = useRef(false);
 
-  const [modal, setModal] = useState<ProviderModal | null>(null);
-
-  const [geminiForm, setGeminiForm] = useState<GeminiKeyConfig & { excludedText: string }>({
-    apiKey: '',
-    prefix: '',
-    baseUrl: '',
-    headers: {},
-    excludedModels: [],
-    excludedText: '',
-  });
-  const [providerForm, setProviderForm] = useState<
-    ProviderKeyConfig & { modelEntries: ModelEntry[]; excludedText: string }
-  >({
-    apiKey: '',
-    prefix: '',
-    baseUrl: '',
-    proxyUrl: '',
-    headers: {},
-    models: [],
-    excludedModels: [],
-    modelEntries: [{ name: '', alias: '' }],
-    excludedText: '',
-  });
-  const [openaiForm, setOpenaiForm] = useState<OpenAIFormState>({
-    name: '',
-    prefix: '',
-    baseUrl: '',
-    headers: [],
-    apiKeyEntries: [buildApiKeyEntry()],
-    modelEntries: [{ name: '', alias: '' }],
-  });
-  const [ampcodeForm, setAmpcodeForm] = useState<AmpcodeFormState>(() =>
-    buildAmpcodeFormState(null)
-  );
-  const [ampcodeModalLoading, setAmpcodeModalLoading] = useState(false);
-  const [ampcodeLoaded, setAmpcodeLoaded] = useState(false);
-  const [ampcodeMappingsDirty, setAmpcodeMappingsDirty] = useState(false);
-  const [ampcodeModalError, setAmpcodeModalError] = useState('');
-  const [ampcodeSaving, setAmpcodeSaving] = useState(false);
-  const [openaiDiscoveryOpen, setOpenaiDiscoveryOpen] = useState(false);
-  const [openaiDiscoveryEndpoint, setOpenaiDiscoveryEndpoint] = useState('');
-  const [openaiDiscoveryModels, setOpenaiDiscoveryModels] = useState<ModelInfo[]>([]);
-  const [openaiDiscoveryLoading, setOpenaiDiscoveryLoading] = useState(false);
-  const [openaiDiscoveryError, setOpenaiDiscoveryError] = useState('');
-  const [openaiDiscoverySearch, setOpenaiDiscoverySearch] = useState('');
-  const [openaiDiscoverySelected, setOpenaiDiscoverySelected] = useState<Set<string>>(new Set());
-  const [openaiTestModel, setOpenaiTestModel] = useState('');
-  const [openaiTestStatus, setOpenaiTestStatus] = useState<
-    'idle' | 'loading' | 'success' | 'error'
-  >('idle');
-  const [openaiTestMessage, setOpenaiTestMessage] = useState('');
   const [saving, setSaving] = useState(false);
   const [configSwitchingKey, setConfigSwitchingKey] = useState<string | null>(null);
+  const [modal, setModal] = useState<ProviderModal | null>(null);
+  const [ampcodeBusy, setAmpcodeBusy] = useState(false);
 
-  const disableControls = useMemo(() => connectionStatus !== 'connected', [connectionStatus]);
-  const filteredOpenaiDiscoveryModels = useMemo(() => {
-    const filter = openaiDiscoverySearch.trim().toLowerCase();
-    if (!filter) return openaiDiscoveryModels;
-    return openaiDiscoveryModels.filter((model) => {
-      const name = (model.name || '').toLowerCase();
-      const alias = (model.alias || '').toLowerCase();
-      const desc = (model.description || '').toLowerCase();
-      return name.includes(filter) || alias.includes(filter) || desc.includes(filter);
-    });
-  }, [openaiDiscoveryModels, openaiDiscoverySearch]);
-  const openaiAvailableModels = useMemo(
-    () => openaiForm.modelEntries.map((entry) => entry.name.trim()).filter(Boolean),
-    [openaiForm.modelEntries]
-  );
+  const disableControls = connectionStatus !== 'connected';
+  const isSwitching = Boolean(configSwitchingKey);
 
-  // 加载 key 统计和 usage 明细（API 层已有60秒超时）
-  const loadKeyStats = useCallback(async () => {
-    // 防止重复请求
-    if (loadingKeyStatsRef.current) return;
-    loadingKeyStatsRef.current = true;
-    try {
-      const usageResponse = await usageApi.getUsage();
-      const usageData = usageResponse?.usage ?? usageResponse;
-      const stats = await usageApi.getKeyStats(usageData);
-      setKeyStats(stats);
-      // 收集 usage 明细用于状态栏
-      const details = collectUsageDetails(usageData);
-      setUsageDetails(details);
-    } catch {
-      // 静默失败
-    } finally {
-      loadingKeyStatsRef.current = false;
-    }
-  }, []);
+  const { keyStats, usageDetails, loadKeyStats } = useProviderStats();
 
-  const loadConfigs = async () => {
+  const getErrorMessage = (err: unknown) => {
+    if (err instanceof Error) return err.message;
+    if (typeof err === 'string') return err;
+    return '';
+  };
+
+  const loadConfigs = useCallback(async () => {
     setLoading(true);
     setError('');
     try {
@@ -327,20 +75,18 @@ export function AiProvidersPage() {
       } catch {
         // ignore
       }
-    } catch (err: any) {
-      setError(err?.message || t('notification.refresh_failed'));
+    } catch (err: unknown) {
+      const message = getErrorMessage(err) || t('notification.refresh_failed');
+      setError(message);
     } finally {
       setLoading(false);
     }
-  };
+  }, [clearCache, fetchConfig, t, updateConfigValue]);
 
   useEffect(() => {
     loadConfigs();
     loadKeyStats();
-  }, [loadKeyStats]);
-
-  // 定时刷新状态数据（每240秒）
-  useInterval(loadKeyStats, 240_000);
+  }, [loadConfigs, loadKeyStats]);
 
   useEffect(() => {
     if (config?.geminiApiKeys) setGeminiKeys(config.geminiApiKeys);
@@ -356,452 +102,37 @@ export function AiProvidersPage() {
 
   const closeModal = () => {
     setModal(null);
-    setGeminiForm({
-      apiKey: '',
-      prefix: '',
-      baseUrl: '',
-      headers: {},
-      excludedModels: [],
-      excludedText: '',
-    });
-    setProviderForm({
-      apiKey: '',
-      prefix: '',
-      baseUrl: '',
-      proxyUrl: '',
-      headers: {},
-      models: [],
-      excludedModels: [],
-      modelEntries: [{ name: '', alias: '' }],
-      excludedText: '',
-    });
-    setOpenaiForm({
-      name: '',
-      prefix: '',
-      baseUrl: '',
-      headers: [],
-      apiKeyEntries: [buildApiKeyEntry()],
-      modelEntries: [{ name: '', alias: '' }],
-      testModel: undefined,
-    });
-    setAmpcodeForm(buildAmpcodeFormState(null));
-    setAmpcodeModalLoading(false);
-    setAmpcodeLoaded(false);
-    setAmpcodeMappingsDirty(false);
-    setAmpcodeModalError('');
-    setAmpcodeSaving(false);
-    setOpenaiDiscoveryOpen(false);
-    setOpenaiDiscoveryModels([]);
-    setOpenaiDiscoverySelected(new Set());
-    setOpenaiDiscoverySearch('');
-    setOpenaiDiscoveryError('');
-    setOpenaiDiscoveryEndpoint('');
-    setOpenaiTestModel('');
-    setOpenaiTestStatus('idle');
-    setOpenaiTestMessage('');
   };
 
   const openGeminiModal = (index: number | null) => {
-    if (index !== null) {
-      const entry = geminiKeys[index];
-      setGeminiForm({
-        ...entry,
-        excludedText: excludedModelsToText(entry?.excludedModels),
-      });
-    }
     setModal({ type: 'gemini', index });
   };
 
   const openProviderModal = (type: 'codex' | 'claude', index: number | null) => {
-    const source = type === 'codex' ? codexConfigs : claudeConfigs;
-    if (index !== null) {
-      const entry = source[index];
-      setProviderForm({
-        ...entry,
-        modelEntries: modelsToEntries(entry?.models),
-        excludedText: excludedModelsToText(entry?.excludedModels),
-      });
-    }
     setModal({ type, index });
   };
 
   const openAmpcodeModal = () => {
-    setAmpcodeModalLoading(true);
-    setAmpcodeLoaded(false);
-    setAmpcodeMappingsDirty(false);
-    setAmpcodeModalError('');
-    setAmpcodeForm(buildAmpcodeFormState(config?.ampcode ?? null));
     setModal({ type: 'ampcode', index: null });
-
-    void (async () => {
-      try {
-        const ampcode = await ampcodeApi.getAmpcode();
-        setAmpcodeLoaded(true);
-        updateConfigValue('ampcode', ampcode);
-        clearCache('ampcode');
-        setAmpcodeForm(buildAmpcodeFormState(ampcode));
-      } catch (err: any) {
-        setAmpcodeModalError(err?.message || t('notification.refresh_failed'));
-      } finally {
-        setAmpcodeModalLoading(false);
-      }
-    })();
   };
 
   const openOpenaiModal = (index: number | null) => {
-    if (index !== null) {
-      const entry = openaiProviders[index];
-      const modelEntries = modelsToEntries(entry.models);
-      setOpenaiForm({
-        name: entry.name,
-        prefix: entry.prefix ?? '',
-        baseUrl: entry.baseUrl,
-        headers: headersToEntries(entry.headers),
-        testModel: entry.testModel,
-        modelEntries,
-        apiKeyEntries: entry.apiKeyEntries?.length ? entry.apiKeyEntries : [buildApiKeyEntry()],
-      });
-      const available = modelEntries.map((m) => m.name.trim()).filter(Boolean);
-      const initialModel =
-        entry.testModel && available.includes(entry.testModel)
-          ? entry.testModel
-          : available[0] || '';
-      setOpenaiTestModel(initialModel);
-    } else {
-      setOpenaiTestModel('');
-    }
-    setOpenaiTestStatus('idle');
-    setOpenaiTestMessage('');
     setModal({ type: 'openai', index });
   };
 
-  const closeOpenaiModelDiscovery = () => {
-    setOpenaiDiscoveryOpen(false);
-    setOpenaiDiscoveryModels([]);
-    setOpenaiDiscoverySelected(new Set());
-    setOpenaiDiscoverySearch('');
-    setOpenaiDiscoveryError('');
-  };
-
-  const fetchOpenaiModelDiscovery = async ({
-    allowFallback = true,
-  }: { allowFallback?: boolean } = {}) => {
-    const baseUrl = openaiForm.baseUrl.trim();
-    if (!baseUrl) return;
-
-    setOpenaiDiscoveryLoading(true);
-    setOpenaiDiscoveryError('');
-    try {
-      const headers = buildHeaderObject(openaiForm.headers);
-      const firstKey = openaiForm.apiKeyEntries
-        .find((entry) => entry.apiKey?.trim())
-        ?.apiKey?.trim();
-      const hasAuthHeader = Boolean(headers.Authorization || headers['authorization']);
-      const list = await modelsApi.fetchModelsViaApiCall(
-        baseUrl,
-        hasAuthHeader ? undefined : firstKey,
-        headers
-      );
-      setOpenaiDiscoveryModels(list);
-    } catch (err: any) {
-      if (allowFallback) {
-        try {
-          const list = await modelsApi.fetchModelsViaApiCall(baseUrl);
-          setOpenaiDiscoveryModels(list);
-          return;
-        } catch (fallbackErr: any) {
-          const message = fallbackErr?.message || err?.message || '';
-          setOpenaiDiscoveryModels([]);
-          setOpenaiDiscoveryError(`${t('ai_providers.openai_models_fetch_error')}: ${message}`);
-        }
-      } else {
-        setOpenaiDiscoveryModels([]);
-        setOpenaiDiscoveryError(
-          `${t('ai_providers.openai_models_fetch_error')}: ${err?.message || ''}`
-        );
-      }
-    } finally {
-      setOpenaiDiscoveryLoading(false);
-    }
-  };
-
-  const openOpenaiModelDiscovery = () => {
-    const baseUrl = openaiForm.baseUrl.trim();
-    if (!baseUrl) {
-      showNotification(t('ai_providers.openai_models_fetch_invalid_url'), 'error');
-      return;
-    }
-
-    setOpenaiDiscoveryEndpoint(buildOpenAIModelsEndpoint(baseUrl));
-    setOpenaiDiscoveryModels([]);
-    setOpenaiDiscoverySearch('');
-    setOpenaiDiscoverySelected(new Set());
-    setOpenaiDiscoveryError('');
-    setOpenaiDiscoveryOpen(true);
-    void fetchOpenaiModelDiscovery();
-  };
-
-  const toggleOpenaiModelSelection = (name: string) => {
-    setOpenaiDiscoverySelected((prev) => {
-      const next = new Set(prev);
-      if (next.has(name)) {
-        next.delete(name);
-      } else {
-        next.add(name);
-      }
-      return next;
-    });
-  };
-
-  const applyOpenaiModelDiscoverySelection = () => {
-    const selectedModels = openaiDiscoveryModels.filter((model) =>
-      openaiDiscoverySelected.has(model.name)
-    );
-    if (!selectedModels.length) {
-      closeOpenaiModelDiscovery();
-      return;
-    }
-
-    const mergedMap = new Map<string, ModelEntry>();
-    openaiForm.modelEntries.forEach((entry) => {
-      const name = entry.name.trim();
-      if (!name) return;
-      mergedMap.set(name, { name, alias: entry.alias?.trim() || '' });
-    });
-
-    let addedCount = 0;
-    selectedModels.forEach((model) => {
-      const name = model.name.trim();
-      if (!name || mergedMap.has(name)) return;
-      mergedMap.set(name, { name, alias: model.alias ?? '' });
-      addedCount += 1;
-    });
-
-    const mergedEntries = Array.from(mergedMap.values());
-    setOpenaiForm((prev) => ({
-      ...prev,
-      modelEntries: mergedEntries.length ? mergedEntries : [{ name: '', alias: '' }],
-    }));
-
-    closeOpenaiModelDiscovery();
-    if (addedCount > 0) {
-      showNotification(
-        t('ai_providers.openai_models_fetch_added', { count: addedCount }),
-        'success'
-      );
-    }
-  };
-
-  useEffect(() => {
-    if (modal?.type !== 'openai') return;
-    if (openaiAvailableModels.length === 0) {
-      if (openaiTestModel) {
-        setOpenaiTestModel('');
-        setOpenaiTestStatus('idle');
-        setOpenaiTestMessage('');
-      }
-      return;
-    }
-
-    if (!openaiTestModel || !openaiAvailableModels.includes(openaiTestModel)) {
-      setOpenaiTestModel(openaiAvailableModels[0]);
-      setOpenaiTestStatus('idle');
-      setOpenaiTestMessage('');
-    }
-  }, [modal?.type, openaiAvailableModels, openaiTestModel]);
-
-  const testOpenaiProviderConnection = async () => {
-    const baseUrl = openaiForm.baseUrl.trim();
-    if (!baseUrl) {
-      const message = t('notification.openai_test_url_required');
-      setOpenaiTestStatus('error');
-      setOpenaiTestMessage(message);
-      showNotification(message, 'error');
-      return;
-    }
-
-    const endpoint = buildOpenAIChatCompletionsEndpoint(baseUrl);
-    if (!endpoint) {
-      const message = t('notification.openai_test_url_required');
-      setOpenaiTestStatus('error');
-      setOpenaiTestMessage(message);
-      showNotification(message, 'error');
-      return;
-    }
-
-    const firstKeyEntry = openaiForm.apiKeyEntries.find((entry) => entry.apiKey?.trim());
-    if (!firstKeyEntry) {
-      const message = t('notification.openai_test_key_required');
-      setOpenaiTestStatus('error');
-      setOpenaiTestMessage(message);
-      showNotification(message, 'error');
-      return;
-    }
-
-    const modelName = openaiTestModel.trim() || openaiAvailableModels[0] || '';
-    if (!modelName) {
-      const message = t('notification.openai_test_model_required');
-      setOpenaiTestStatus('error');
-      setOpenaiTestMessage(message);
-      showNotification(message, 'error');
-      return;
-    }
-
-    const customHeaders = buildHeaderObject(openaiForm.headers);
-    const headers: Record<string, string> = {
-      'Content-Type': 'application/json',
-      ...customHeaders,
-    };
-    if (!headers.Authorization && !headers['authorization']) {
-      headers.Authorization = `Bearer ${firstKeyEntry.apiKey.trim()}`;
-    }
-
-    setOpenaiTestStatus('loading');
-    setOpenaiTestMessage(t('ai_providers.openai_test_running'));
-
-    try {
-      const result = await apiCallApi.request(
-        {
-          method: 'POST',
-          url: endpoint,
-          header: Object.keys(headers).length ? headers : undefined,
-          data: JSON.stringify({
-            model: modelName,
-            messages: [{ role: 'user', content: 'Hi' }],
-            stream: false,
-            max_tokens: 5,
-          }),
-        },
-        { timeout: OPENAI_TEST_TIMEOUT_MS }
-      );
-
-      if (result.statusCode < 200 || result.statusCode >= 300) {
-        throw new Error(getApiCallErrorMessage(result));
-      }
-
-      setOpenaiTestStatus('success');
-      setOpenaiTestMessage(t('ai_providers.openai_test_success'));
-    } catch (err: any) {
-      setOpenaiTestStatus('error');
-      const isTimeout =
-        err?.code === 'ECONNABORTED' ||
-        String(err?.message || '').toLowerCase().includes('timeout');
-      if (isTimeout) {
-        setOpenaiTestMessage(
-          t('ai_providers.openai_test_timeout', { seconds: OPENAI_TEST_TIMEOUT_MS / 1000 })
-        );
-      } else {
-        setOpenaiTestMessage(`${t('ai_providers.openai_test_failed')}: ${err?.message || ''}`);
-      }
-    }
-  };
-
-  const clearAmpcodeUpstreamApiKey = async () => {
-    if (!window.confirm(t('ai_providers.ampcode_clear_upstream_api_key_confirm'))) return;
-    setAmpcodeSaving(true);
-    setAmpcodeModalError('');
-    try {
-      await ampcodeApi.clearUpstreamApiKey();
-      const previous = config?.ampcode ?? {};
-      const next: AmpcodeConfig = { ...previous };
-      delete (next as any).upstreamApiKey;
-      updateConfigValue('ampcode', next);
-      clearCache('ampcode');
-      showNotification(t('notification.ampcode_upstream_api_key_cleared'), 'success');
-    } catch (err: any) {
-      const message = err?.message || '';
-      setAmpcodeModalError(message);
-      showNotification(`${t('notification.update_failed')}: ${message}`, 'error');
-    } finally {
-      setAmpcodeSaving(false);
-    }
-  };
-
-  const saveAmpcode = async () => {
-    if (!ampcodeLoaded && ampcodeMappingsDirty) {
-      const confirmed = window.confirm(t('ai_providers.ampcode_mappings_overwrite_confirm'));
-      if (!confirmed) return;
-    }
-
-    setAmpcodeSaving(true);
-    setAmpcodeModalError('');
-    try {
-      const upstreamUrl = ampcodeForm.upstreamUrl.trim();
-      const overrideKey = ampcodeForm.upstreamApiKey.trim();
-      const modelMappings = entriesToAmpcodeMappings(ampcodeForm.mappingEntries);
-
-      if (upstreamUrl) {
-        await ampcodeApi.updateUpstreamUrl(upstreamUrl);
-      } else {
-        await ampcodeApi.clearUpstreamUrl();
-      }
-
-      await ampcodeApi.updateForceModelMappings(ampcodeForm.forceModelMappings);
-
-      if (ampcodeLoaded || ampcodeMappingsDirty) {
-        if (modelMappings.length) {
-          await ampcodeApi.saveModelMappings(modelMappings);
-        } else {
-          await ampcodeApi.clearModelMappings();
-        }
-      }
-
-      if (overrideKey) {
-        await ampcodeApi.updateUpstreamApiKey(overrideKey);
-      }
-
-      const previous = config?.ampcode ?? {};
-      const next: AmpcodeConfig = {
-        upstreamUrl: upstreamUrl || undefined,
-        forceModelMappings: ampcodeForm.forceModelMappings,
-      };
-
-      if (previous.upstreamApiKey) {
-        next.upstreamApiKey = previous.upstreamApiKey;
-      }
-
-      if (Array.isArray(previous.modelMappings)) {
-        next.modelMappings = previous.modelMappings;
-      }
-
-      if (overrideKey) {
-        next.upstreamApiKey = overrideKey;
-      }
-
-      if (ampcodeLoaded || ampcodeMappingsDirty) {
-        if (modelMappings.length) {
-          next.modelMappings = modelMappings;
-        } else {
-          delete (next as any).modelMappings;
-        }
-      }
-
-      updateConfigValue('ampcode', next);
-      clearCache('ampcode');
-      showNotification(t('notification.ampcode_updated'), 'success');
-      closeModal();
-    } catch (err: any) {
-      const message = err?.message || '';
-      setAmpcodeModalError(message);
-      showNotification(`${t('notification.update_failed')}: ${message}`, 'error');
-    } finally {
-      setAmpcodeSaving(false);
-    }
-  };
-
-  const saveGemini = async () => {
+  const saveGemini = async (form: GeminiFormState, editIndex: number | null) => {
     setSaving(true);
     try {
       const payload: GeminiKeyConfig = {
-        apiKey: geminiForm.apiKey.trim(),
-        prefix: geminiForm.prefix?.trim() || undefined,
-        baseUrl: geminiForm.baseUrl?.trim() || undefined,
-        headers: buildHeaderObject(headersToEntries(geminiForm.headers as any)),
-        excludedModels: parseExcludedModels(geminiForm.excludedText),
+        apiKey: form.apiKey.trim(),
+        prefix: form.prefix?.trim() || undefined,
+        baseUrl: form.baseUrl?.trim() || undefined,
+        headers: buildHeaderObject(headersToEntries(form.headers)),
+        excludedModels: parseExcludedModels(form.excludedText),
       };
       const nextList =
-        modal?.type === 'gemini' && modal.index !== null
-          ? geminiKeys.map((item, idx) => (idx === modal.index ? payload : item))
+        editIndex !== null
+          ? geminiKeys.map((item, idx) => (idx === editIndex ? payload : item))
           : [...geminiKeys, payload];
 
       await providersApi.saveGeminiKeys(nextList);
@@ -809,29 +140,33 @@ export function AiProvidersPage() {
       updateConfigValue('gemini-api-key', nextList);
       clearCache('gemini-api-key');
       const message =
-        modal?.index !== null
+        editIndex !== null
           ? t('notification.gemini_key_updated')
           : t('notification.gemini_key_added');
       showNotification(message, 'success');
       closeModal();
-    } catch (err: any) {
-      showNotification(`${t('notification.update_failed')}: ${err?.message || ''}`, 'error');
+    } catch (err: unknown) {
+      const message = getErrorMessage(err);
+      showNotification(`${t('notification.update_failed')}: ${message}`, 'error');
     } finally {
       setSaving(false);
     }
   };
 
-  const deleteGemini = async (apiKey: string) => {
+  const deleteGemini = async (index: number) => {
+    const entry = geminiKeys[index];
+    if (!entry) return;
     if (!window.confirm(t('ai_providers.gemini_delete_confirm'))) return;
     try {
-      await providersApi.deleteGeminiKey(apiKey);
-      const next = geminiKeys.filter((item) => item.apiKey !== apiKey);
+      await providersApi.deleteGeminiKey(entry.apiKey);
+      const next = geminiKeys.filter((_, idx) => idx !== index);
       setGeminiKeys(next);
       updateConfigValue('gemini-api-key', next);
       clearCache('gemini-api-key');
       showNotification(t('notification.gemini_key_deleted'), 'success');
-    } catch (err: any) {
-      showNotification(`${t('notification.delete_failed')}: ${err?.message || ''}`, 'error');
+    } catch (err: unknown) {
+      const message = getErrorMessage(err);
+      showNotification(`${t('notification.delete_failed')}: ${message}`, 'error');
     }
   };
 
@@ -864,11 +199,12 @@ export function AiProvidersPage() {
           enabled ? t('notification.config_enabled') : t('notification.config_disabled'),
           'success'
         );
-      } catch (err: any) {
+      } catch (err: unknown) {
+        const message = getErrorMessage(err);
         setGeminiKeys(previousList);
         updateConfigValue('gemini-api-key', previousList);
         clearCache('gemini-api-key');
-        showNotification(`${t('notification.update_failed')}: ${err?.message || ''}`, 'error');
+        showNotification(`${t('notification.update_failed')}: ${message}`, 'error');
       } finally {
         setConfigSwitchingKey(null);
       }
@@ -909,7 +245,8 @@ export function AiProvidersPage() {
         enabled ? t('notification.config_enabled') : t('notification.config_disabled'),
         'success'
       );
-    } catch (err: any) {
+    } catch (err: unknown) {
+      const message = getErrorMessage(err);
       if (provider === 'codex') {
         setCodexConfigs(previousList);
         updateConfigValue('codex-api-key', previousList);
@@ -919,14 +256,18 @@ export function AiProvidersPage() {
         updateConfigValue('claude-api-key', previousList);
         clearCache('claude-api-key');
       }
-      showNotification(`${t('notification.update_failed')}: ${err?.message || ''}`, 'error');
+      showNotification(`${t('notification.update_failed')}: ${message}`, 'error');
     } finally {
       setConfigSwitchingKey(null);
     }
   };
 
-  const saveProvider = async (type: 'codex' | 'claude') => {
-    const trimmedBaseUrl = (providerForm.baseUrl ?? '').trim();
+  const saveProvider = async (
+    type: 'codex' | 'claude',
+    form: ProviderFormState,
+    editIndex: number | null
+  ) => {
+    const trimmedBaseUrl = (form.baseUrl ?? '').trim();
     const baseUrl = trimmedBaseUrl || undefined;
     if (type === 'codex' && !baseUrl) {
       showNotification(t('notification.codex_base_url_required'), 'error');
@@ -938,18 +279,18 @@ export function AiProvidersPage() {
       const source = type === 'codex' ? codexConfigs : claudeConfigs;
 
       const payload: ProviderKeyConfig = {
-        apiKey: providerForm.apiKey.trim(),
-        prefix: providerForm.prefix?.trim() || undefined,
+        apiKey: form.apiKey.trim(),
+        prefix: form.prefix?.trim() || undefined,
         baseUrl,
-        proxyUrl: providerForm.proxyUrl?.trim() || undefined,
-        headers: buildHeaderObject(headersToEntries(providerForm.headers as any)),
-        models: entriesToModels(providerForm.modelEntries),
-        excludedModels: parseExcludedModels(providerForm.excludedText),
+        proxyUrl: form.proxyUrl?.trim() || undefined,
+        headers: buildHeaderObject(headersToEntries(form.headers)),
+        models: entriesToModels(form.modelEntries),
+        excludedModels: parseExcludedModels(form.excludedText),
       };
 
       const nextList =
-        modal?.type === type && modal.index !== null
-          ? source.map((item, idx) => (idx === modal.index ? payload : item))
+        editIndex !== null
+          ? source.map((item, idx) => (idx === editIndex ? payload : item))
           : [...source, payload];
 
       if (type === 'codex') {
@@ -958,7 +299,7 @@ export function AiProvidersPage() {
         updateConfigValue('codex-api-key', nextList);
         clearCache('codex-api-key');
         const message =
-          modal?.index !== null
+          editIndex !== null
             ? t('notification.codex_config_updated')
             : t('notification.codex_config_added');
         showNotification(message, 'success');
@@ -968,64 +309,69 @@ export function AiProvidersPage() {
         updateConfigValue('claude-api-key', nextList);
         clearCache('claude-api-key');
         const message =
-          modal?.index !== null
+          editIndex !== null
             ? t('notification.claude_config_updated')
             : t('notification.claude_config_added');
         showNotification(message, 'success');
       }
 
       closeModal();
-    } catch (err: any) {
-      showNotification(`${t('notification.update_failed')}: ${err?.message || ''}`, 'error');
+    } catch (err: unknown) {
+      const message = getErrorMessage(err);
+      showNotification(`${t('notification.update_failed')}: ${message}`, 'error');
     } finally {
       setSaving(false);
     }
   };
 
-  const deleteProviderEntry = async (type: 'codex' | 'claude', apiKey: string) => {
-    if (!window.confirm(t(`ai_providers.${type}_delete_confirm` as any))) return;
+  const deleteProviderEntry = async (type: 'codex' | 'claude', index: number) => {
+    const source = type === 'codex' ? codexConfigs : claudeConfigs;
+    const entry = source[index];
+    if (!entry) return;
+    if (!window.confirm(t(`ai_providers.${type}_delete_confirm`))) return;
     try {
       if (type === 'codex') {
-        await providersApi.deleteCodexConfig(apiKey);
-        const next = codexConfigs.filter((item) => item.apiKey !== apiKey);
+        await providersApi.deleteCodexConfig(entry.apiKey);
+        const next = codexConfigs.filter((_, idx) => idx !== index);
         setCodexConfigs(next);
         updateConfigValue('codex-api-key', next);
         clearCache('codex-api-key');
         showNotification(t('notification.codex_config_deleted'), 'success');
       } else {
-        await providersApi.deleteClaudeConfig(apiKey);
-        const next = claudeConfigs.filter((item) => item.apiKey !== apiKey);
+        await providersApi.deleteClaudeConfig(entry.apiKey);
+        const next = claudeConfigs.filter((_, idx) => idx !== index);
         setClaudeConfigs(next);
         updateConfigValue('claude-api-key', next);
         clearCache('claude-api-key');
         showNotification(t('notification.claude_config_deleted'), 'success');
       }
-    } catch (err: any) {
-      showNotification(`${t('notification.delete_failed')}: ${err?.message || ''}`, 'error');
+    } catch (err: unknown) {
+      const message = getErrorMessage(err);
+      showNotification(`${t('notification.delete_failed')}: ${message}`, 'error');
     }
   };
 
-  const saveOpenai = async () => {
+  const saveOpenai = async (form: OpenAIFormState, editIndex: number | null) => {
     setSaving(true);
     try {
       const payload: OpenAIProviderConfig = {
-        name: openaiForm.name.trim(),
-        prefix: openaiForm.prefix?.trim() || undefined,
-        baseUrl: openaiForm.baseUrl.trim(),
-        headers: buildHeaderObject(openaiForm.headers),
-        apiKeyEntries: openaiForm.apiKeyEntries.map((entry) => ({
+        name: form.name.trim(),
+        prefix: form.prefix?.trim() || undefined,
+        baseUrl: form.baseUrl.trim(),
+        headers: buildHeaderObject(form.headers),
+        apiKeyEntries: form.apiKeyEntries.map((entry) => ({
           apiKey: entry.apiKey.trim(),
           proxyUrl: entry.proxyUrl?.trim() || undefined,
           headers: entry.headers,
         })),
       };
-      if (openaiForm.testModel) payload.testModel = openaiForm.testModel.trim();
-      const models = entriesToModels(openaiForm.modelEntries);
+      if (form.testModel) payload.testModel = form.testModel.trim();
+      const models = entriesToModels(form.modelEntries);
       if (models.length) payload.models = models;
 
       const nextList =
-        modal?.type === 'openai' && modal.index !== null
-          ? openaiProviders.map((item, idx) => (idx === modal.index ? payload : item))
+        editIndex !== null
+          ? openaiProviders.map((item, idx) => (idx === editIndex ? payload : item))
           : [...openaiProviders, payload];
 
       await providersApi.saveOpenAIProviders(nextList);
@@ -1033,251 +379,40 @@ export function AiProvidersPage() {
       updateConfigValue('openai-compatibility', nextList);
       clearCache('openai-compatibility');
       const message =
-        modal?.index !== null
+        editIndex !== null
           ? t('notification.openai_provider_updated')
           : t('notification.openai_provider_added');
       showNotification(message, 'success');
       closeModal();
-    } catch (err: any) {
-      showNotification(`${t('notification.update_failed')}: ${err?.message || ''}`, 'error');
+    } catch (err: unknown) {
+      const message = getErrorMessage(err);
+      showNotification(`${t('notification.update_failed')}: ${message}`, 'error');
     } finally {
       setSaving(false);
     }
   };
 
-  const deleteOpenai = async (name: string) => {
+  const deleteOpenai = async (index: number) => {
+    const entry = openaiProviders[index];
+    if (!entry) return;
     if (!window.confirm(t('ai_providers.openai_delete_confirm'))) return;
     try {
-      await providersApi.deleteOpenAIProvider(name);
-      const next = openaiProviders.filter((item) => item.name !== name);
+      await providersApi.deleteOpenAIProvider(entry.name);
+      const next = openaiProviders.filter((_, idx) => idx !== index);
       setOpenaiProviders(next);
       updateConfigValue('openai-compatibility', next);
       clearCache('openai-compatibility');
       showNotification(t('notification.openai_provider_deleted'), 'success');
-    } catch (err: any) {
-      showNotification(`${t('notification.delete_failed')}: ${err?.message || ''}`, 'error');
+    } catch (err: unknown) {
+      const message = getErrorMessage(err);
+      showNotification(`${t('notification.delete_failed')}: ${message}`, 'error');
     }
   };
 
-  const renderKeyEntries = (entries: ApiKeyEntry[]) => {
-    const list = entries.length ? entries : [buildApiKeyEntry()];
-    const updateEntry = (idx: number, field: keyof ApiKeyEntry, value: string) => {
-      const next = list.map((entry, i) => (i === idx ? { ...entry, [field]: value } : entry));
-      setOpenaiForm((prev) => ({ ...prev, apiKeyEntries: next }));
-    };
-
-    const removeEntry = (idx: number) => {
-      const next = list.filter((_, i) => i !== idx);
-      setOpenaiForm((prev) => ({
-        ...prev,
-        apiKeyEntries: next.length ? next : [buildApiKeyEntry()],
-      }));
-    };
-
-    const addEntry = () => {
-      setOpenaiForm((prev) => ({ ...prev, apiKeyEntries: [...list, buildApiKeyEntry()] }));
-    };
-
-    return (
-      <div className="stack">
-        {list.map((entry, index) => (
-          <div key={index} className="item-row">
-            <div className="item-meta">
-              <Input
-                label={`${t('common.api_key')} #${index + 1}`}
-                value={entry.apiKey}
-                onChange={(e) => updateEntry(index, 'apiKey', e.target.value)}
-              />
-              <Input
-                label={t('common.proxy_url')}
-                value={entry.proxyUrl ?? ''}
-                onChange={(e) => updateEntry(index, 'proxyUrl', e.target.value)}
-              />
-            </div>
-            <div className="item-actions">
-              <Button
-                variant="ghost"
-                size="sm"
-                onClick={() => removeEntry(index)}
-                disabled={list.length <= 1 || saving}
-              >
-                {t('common.delete')}
-              </Button>
-            </div>
-          </div>
-        ))}
-        <Button variant="secondary" size="sm" onClick={addEntry} disabled={saving}>
-          {t('ai_providers.openai_keys_add_btn')}
-        </Button>
-      </div>
-    );
-  };
-
-  // 预计算所有 apiKey 的状态栏数据（避免每次渲染重复计算）
-  const statusBarCache = useMemo(() => {
-    const cache = new Map<string, ReturnType<typeof calculateStatusBarData>>();
-
-    // 收集所有需要计算的 apiKey
-    const allApiKeys = new Set<string>();
-    geminiKeys.forEach((k) => k.apiKey && allApiKeys.add(k.apiKey));
-    codexConfigs.forEach((k) => k.apiKey && allApiKeys.add(k.apiKey));
-    claudeConfigs.forEach((k) => k.apiKey && allApiKeys.add(k.apiKey));
-    openaiProviders.forEach((p) => {
-      (p.apiKeyEntries || []).forEach((e) => e.apiKey && allApiKeys.add(e.apiKey));
-    });
-
-    // 预计算每个 apiKey 的状态数据
-    allApiKeys.forEach((apiKey) => {
-      cache.set(apiKey, calculateStatusBarData(usageDetails, apiKey));
-    });
-
-    return cache;
-  }, [usageDetails, geminiKeys, codexConfigs, claudeConfigs, openaiProviders]);
-
-  // 预计算 OpenAI 提供商的汇总状态栏数据
-  const openaiStatusBarCache = useMemo(() => {
-    const cache = new Map<string, ReturnType<typeof calculateStatusBarData>>();
-
-    openaiProviders.forEach((provider) => {
-      const allKeys = (provider.apiKeyEntries || []).map((e) => e.apiKey).filter(Boolean);
-      const filteredDetails = usageDetails.filter((detail) => allKeys.includes(detail.source));
-      cache.set(provider.name, calculateStatusBarData(filteredDetails));
-    });
-
-    return cache;
-  }, [usageDetails, openaiProviders]);
-
-  // 渲染状态监测栏
-  const renderStatusBar = (apiKey: string) => {
-    const statusData = statusBarCache.get(apiKey) || calculateStatusBarData([], apiKey);
-    const hasData = statusData.totalSuccess + statusData.totalFailure > 0;
-    const rateClass = !hasData
-      ? ''
-      : statusData.successRate >= 90
-        ? styles.statusRateHigh
-        : statusData.successRate >= 50
-          ? styles.statusRateMedium
-          : styles.statusRateLow;
-
-    return (
-      <div className={styles.statusBar}>
-        <div className={styles.statusBlocks}>
-          {statusData.blocks.map((state, idx) => {
-            const blockClass =
-              state === 'success'
-                ? styles.statusBlockSuccess
-                : state === 'failure'
-                  ? styles.statusBlockFailure
-                  : state === 'mixed'
-                    ? styles.statusBlockMixed
-                    : styles.statusBlockIdle;
-            return <div key={idx} className={`${styles.statusBlock} ${blockClass}`} />;
-          })}
-        </div>
-        <span className={`${styles.statusRate} ${rateClass}`}>
-          {hasData ? `${statusData.successRate.toFixed(1)}%` : '--'}
-        </span>
-      </div>
-    );
-  };
-
-  // 渲染 OpenAI 提供商的状态栏（汇总多个 apiKey）
-  const renderOpenAIStatusBar = (providerName: string) => {
-    const statusData = openaiStatusBarCache.get(providerName) || calculateStatusBarData([]);
-    const hasData = statusData.totalSuccess + statusData.totalFailure > 0;
-    const rateClass = !hasData
-      ? ''
-      : statusData.successRate >= 90
-        ? styles.statusRateHigh
-        : statusData.successRate >= 50
-          ? styles.statusRateMedium
-          : styles.statusRateLow;
-
-    return (
-      <div className={styles.statusBar}>
-        <div className={styles.statusBlocks}>
-          {statusData.blocks.map((state, idx) => {
-            const blockClass =
-              state === 'success'
-                ? styles.statusBlockSuccess
-                : state === 'failure'
-                  ? styles.statusBlockFailure
-                  : state === 'mixed'
-                    ? styles.statusBlockMixed
-                    : styles.statusBlockIdle;
-            return <div key={idx} className={`${styles.statusBlock} ${blockClass}`} />;
-          })}
-        </div>
-        <span className={`${styles.statusRate} ${rateClass}`}>
-          {hasData ? `${statusData.successRate.toFixed(1)}%` : '--'}
-        </span>
-      </div>
-    );
-  };
-
-  const renderList = <T,>(
-    items: T[],
-    keyField: (item: T) => string,
-    renderContent: (item: T, index: number) => ReactNode,
-    onEdit: (index: number) => void,
-    onDelete: (item: T) => void,
-    emptyTitle: string,
-    emptyDescription: string,
-    deleteLabel?: string,
-    options?: {
-      getRowDisabled?: (item: T, index: number) => boolean;
-      renderExtraActions?: (item: T, index: number) => ReactNode;
-    }
-  ) => {
-    if (loading) {
-      return <div className="hint">{t('common.loading')}</div>;
-    }
-
-    if (!items.length) {
-      return (
-        <EmptyState
-          title={emptyTitle}
-          description={emptyDescription}
-        />
-      );
-    }
-
-    return (
-      <div className="item-list">
-        {items.map((item, index) => {
-          const rowDisabled = options?.getRowDisabled ? options.getRowDisabled(item, index) : false;
-          return (
-            <div
-              key={keyField(item)}
-              className="item-row"
-              style={rowDisabled ? { opacity: 0.6 } : undefined}
-            >
-              <div className="item-meta">{renderContent(item, index)}</div>
-              <div className="item-actions">
-                <Button
-                  variant="secondary"
-                  size="sm"
-                  onClick={() => onEdit(index)}
-                  disabled={disableControls || saving || Boolean(configSwitchingKey)}
-                >
-                  {t('common.edit')}
-                </Button>
-                <Button
-                  variant="danger"
-                  size="sm"
-                  onClick={() => onDelete(item)}
-                  disabled={disableControls || saving || Boolean(configSwitchingKey)}
-                >
-                  {deleteLabel || t('common.delete')}
-                </Button>
-                {options?.renderExtraActions ? options.renderExtraActions(item, index) : null}
-              </div>
-            </div>
-          );
-        })}
-      </div>
-    );
-  };
+  const geminiModalIndex = modal?.type === 'gemini' ? modal.index : null;
+  const codexModalIndex = modal?.type === 'codex' ? modal.index : null;
+  const claudeModalIndex = modal?.type === 'claude' ? modal.index : null;
+  const openaiModalIndex = modal?.type === 'openai' ? modal.index : null;
 
   return (
     <div className={styles.container}>
@@ -1285,1068 +420,91 @@ export function AiProvidersPage() {
       <div className={styles.content}>
         {error && <div className="error-box">{error}</div>}
 
-        <Card
-          title={
-            <span className={styles.cardTitle}>
-              <img src={iconGemini} alt="" className={styles.cardTitleIcon} />
-              {t('ai_providers.gemini_title')}
-            </span>
-          }
-          extra={
-            <Button
-              size="sm"
-              onClick={() => openGeminiModal(null)}
-              disabled={disableControls || saving || Boolean(configSwitchingKey)}
-            >
-              {t('ai_providers.gemini_add_button')}
-            </Button>
-          }
-        >
-          {renderList<GeminiKeyConfig>(
-            geminiKeys,
-            (item) => item.apiKey,
-            (item, index) => {
-              const stats = getStatsBySource(item.apiKey, keyStats, maskApiKey);
-              const headerEntries = Object.entries(item.headers || {});
-              const configDisabled = hasDisableAllModelsRule(item.excludedModels);
-              const excludedModels = item.excludedModels ?? [];
-              return (
-                <Fragment>
-                  <div className="item-title">
-                    {t('ai_providers.gemini_item_title')} #{index + 1}
-                  </div>
-                  {/* API Key 行 */}
-                  <div className={styles.fieldRow}>
-                    <span className={styles.fieldLabel}>{t('common.api_key')}:</span>
-                    <span className={styles.fieldValue}>{maskApiKey(item.apiKey)}</span>
-                  </div>
-                  {item.prefix && (
-                    <div className={styles.fieldRow}>
-                      <span className={styles.fieldLabel}>{t('common.prefix')}:</span>
-                      <span className={styles.fieldValue}>{item.prefix}</span>
-                    </div>
-                  )}
-                  {/* Base URL 行 */}
-                  {item.baseUrl && (
-                    <div className={styles.fieldRow}>
-                      <span className={styles.fieldLabel}>{t('common.base_url')}:</span>
-                      <span className={styles.fieldValue}>{item.baseUrl}</span>
-                    </div>
-                  )}
-                  {/* 自定义请求头徽章 */}
-                  {headerEntries.length > 0 && (
-                    <div className={styles.headerBadgeList}>
-                      {headerEntries.map(([key, value]) => (
-                        <span key={key} className={styles.headerBadge}>
-                          <strong>{key}:</strong> {value}
-                        </span>
-                      ))}
-                    </div>
-                  )}
-                  {configDisabled && (
-                    <div className="status-badge warning" style={{ marginTop: 8, marginBottom: 0 }}>
-                      {t('ai_providers.config_disabled_badge')}
-                    </div>
-                  )}
-                  {/* 排除模型徽章 */}
-                  {excludedModels.length ? (
-                    <div className={styles.excludedModelsSection}>
-                      <div className={styles.excludedModelsLabel}>
-                        {t('ai_providers.excluded_models_count', { count: excludedModels.length })}
-                      </div>
-                      <div className={styles.modelTagList}>
-                        {excludedModels.map((model) => (
-                          <span
-                            key={model}
-                            className={`${styles.modelTag} ${styles.excludedModelTag}`}
-                          >
-                            <span className={styles.modelName}>{model}</span>
-                          </span>
-                        ))}
-                      </div>
-                    </div>
-                  ) : null}
-                  {/* 成功/失败统计 */}
-                  <div className={styles.cardStats}>
-                    <span className={`${styles.statPill} ${styles.statSuccess}`}>
-                      {t('stats.success')}: {stats.success}
-                    </span>
-                    <span className={`${styles.statPill} ${styles.statFailure}`}>
-                      {t('stats.failure')}: {stats.failure}
-                    </span>
-                  </div>
-                  {/* 状态监测栏 */}
-                  {renderStatusBar(item.apiKey)}
-                </Fragment>
-              );
-            },
-            (index) => openGeminiModal(index),
-            (item) => deleteGemini(item.apiKey),
-            t('ai_providers.gemini_empty_title'),
-            t('ai_providers.gemini_empty_desc'),
-            undefined,
-            {
-              getRowDisabled: (item) => hasDisableAllModelsRule(item.excludedModels),
-              renderExtraActions: (item, index) => (
-                <ToggleSwitch
-                  label={t('ai_providers.config_toggle_label')}
-                  checked={!hasDisableAllModelsRule(item.excludedModels)}
-                  disabled={disableControls || loading || saving || Boolean(configSwitchingKey)}
-                  onChange={(value) => void setConfigEnabled('gemini', index, value)}
-                />
-              ),
-            }
-          )}
-        </Card>
+        <GeminiSection
+          configs={geminiKeys}
+          keyStats={keyStats}
+          usageDetails={usageDetails}
+          loading={loading}
+          disableControls={disableControls}
+          isSaving={saving}
+          isSwitching={isSwitching}
+          isModalOpen={modal?.type === 'gemini'}
+          modalIndex={geminiModalIndex}
+          onAdd={() => openGeminiModal(null)}
+          onEdit={(index) => openGeminiModal(index)}
+          onDelete={deleteGemini}
+          onToggle={(index, enabled) => void setConfigEnabled('gemini', index, enabled)}
+          onCloseModal={closeModal}
+          onSave={saveGemini}
+        />
 
-        <Card
-          title={
-            <span className={styles.cardTitle}>
-              <img
-                src={resolvedTheme === 'dark' ? iconOpenaiDark : iconOpenaiLight}
-                alt=""
-                className={styles.cardTitleIcon}
-              />
-              {t('ai_providers.codex_title')}
-            </span>
-          }
-          extra={
-            <Button
-              size="sm"
-              onClick={() => openProviderModal('codex', null)}
-              disabled={disableControls || saving || Boolean(configSwitchingKey)}
-            >
-              {t('ai_providers.codex_add_button')}
-            </Button>
-          }
-        >
-          {renderList<ProviderKeyConfig>(
-            codexConfigs,
-            (item) => item.apiKey,
-            (item, _index) => {
-              const stats = getStatsBySource(item.apiKey, keyStats, maskApiKey);
-              const headerEntries = Object.entries(item.headers || {});
-              const configDisabled = hasDisableAllModelsRule(item.excludedModels);
-              const excludedModels = item.excludedModels ?? [];
-              return (
-                <Fragment>
-                  <div className="item-title">{t('ai_providers.codex_item_title')}</div>
-                  {/* API Key 行 */}
-                  <div className={styles.fieldRow}>
-                    <span className={styles.fieldLabel}>{t('common.api_key')}:</span>
-                    <span className={styles.fieldValue}>{maskApiKey(item.apiKey)}</span>
-                  </div>
-                  {item.prefix && (
-                    <div className={styles.fieldRow}>
-                      <span className={styles.fieldLabel}>{t('common.prefix')}:</span>
-                      <span className={styles.fieldValue}>{item.prefix}</span>
-                    </div>
-                  )}
-                  {/* Base URL 行 */}
-                  {item.baseUrl && (
-                    <div className={styles.fieldRow}>
-                      <span className={styles.fieldLabel}>{t('common.base_url')}:</span>
-                      <span className={styles.fieldValue}>{item.baseUrl}</span>
-                    </div>
-                  )}
-                  {/* Proxy URL 行 */}
-                  {item.proxyUrl && (
-                    <div className={styles.fieldRow}>
-                      <span className={styles.fieldLabel}>{t('common.proxy_url')}:</span>
-                      <span className={styles.fieldValue}>{item.proxyUrl}</span>
-                    </div>
-                  )}
-                  {/* 自定义请求头徽章 */}
-                  {headerEntries.length > 0 && (
-                    <div className={styles.headerBadgeList}>
-                      {headerEntries.map(([key, value]) => (
-                        <span key={key} className={styles.headerBadge}>
-                          <strong>{key}:</strong> {value}
-                        </span>
-                      ))}
-                    </div>
-                  )}
-                  {configDisabled && (
-                    <div className="status-badge warning" style={{ marginTop: 8, marginBottom: 0 }}>
-                      {t('ai_providers.config_disabled_badge')}
-                    </div>
-                  )}
-                  {/* 排除模型徽章 */}
-                  {excludedModels.length ? (
-                    <div className={styles.excludedModelsSection}>
-                      <div className={styles.excludedModelsLabel}>
-                        {t('ai_providers.excluded_models_count', { count: excludedModels.length })}
-                      </div>
-                      <div className={styles.modelTagList}>
-                        {excludedModels.map((model) => (
-                          <span
-                            key={model}
-                            className={`${styles.modelTag} ${styles.excludedModelTag}`}
-                          >
-                            <span className={styles.modelName}>{model}</span>
-                          </span>
-                        ))}
-                      </div>
-                    </div>
-                  ) : null}
-                  {/* 成功/失败统计 */}
-                  <div className={styles.cardStats}>
-                    <span className={`${styles.statPill} ${styles.statSuccess}`}>
-                      {t('stats.success')}: {stats.success}
-                    </span>
-                    <span className={`${styles.statPill} ${styles.statFailure}`}>
-                      {t('stats.failure')}: {stats.failure}
-                    </span>
-                  </div>
-                  {/* 状态监测栏 */}
-                  {renderStatusBar(item.apiKey)}
-                </Fragment>
-              );
-            },
-            (index) => openProviderModal('codex', index),
-            (item) => deleteProviderEntry('codex', item.apiKey),
-            t('ai_providers.codex_empty_title'),
-            t('ai_providers.codex_empty_desc'),
-            undefined,
-            {
-              getRowDisabled: (item) => hasDisableAllModelsRule(item.excludedModels),
-              renderExtraActions: (item, index) => (
-                <ToggleSwitch
-                  label={t('ai_providers.config_toggle_label')}
-                  checked={!hasDisableAllModelsRule(item.excludedModels)}
-                  disabled={disableControls || loading || saving || Boolean(configSwitchingKey)}
-                  onChange={(value) => void setConfigEnabled('codex', index, value)}
-                />
-              ),
-            }
-          )}
-        </Card>
+        <CodexSection
+          configs={codexConfigs}
+          keyStats={keyStats}
+          usageDetails={usageDetails}
+          loading={loading}
+          disableControls={disableControls}
+          isSaving={saving}
+          isSwitching={isSwitching}
+          resolvedTheme={resolvedTheme}
+          isModalOpen={modal?.type === 'codex'}
+          modalIndex={codexModalIndex}
+          onAdd={() => openProviderModal('codex', null)}
+          onEdit={(index) => openProviderModal('codex', index)}
+          onDelete={(index) => void deleteProviderEntry('codex', index)}
+          onToggle={(index, enabled) => void setConfigEnabled('codex', index, enabled)}
+          onCloseModal={closeModal}
+          onSave={(form, editIndex) => saveProvider('codex', form, editIndex)}
+        />
 
-        <Card
-          title={
-            <span className={styles.cardTitle}>
-              <img src={iconClaude} alt="" className={styles.cardTitleIcon} />
-              {t('ai_providers.claude_title')}
-            </span>
-          }
-          extra={
-            <Button
-              size="sm"
-              onClick={() => openProviderModal('claude', null)}
-              disabled={disableControls || saving || Boolean(configSwitchingKey)}
-            >
-              {t('ai_providers.claude_add_button')}
-            </Button>
-          }
-        >
-          {renderList<ProviderKeyConfig>(
-            claudeConfigs,
-            (item) => item.apiKey,
-            (item, _index) => {
-              const stats = getStatsBySource(item.apiKey, keyStats, maskApiKey);
-              const headerEntries = Object.entries(item.headers || {});
-              const configDisabled = hasDisableAllModelsRule(item.excludedModels);
-              const excludedModels = item.excludedModels ?? [];
-              return (
-                <Fragment>
-                  <div className="item-title">{t('ai_providers.claude_item_title')}</div>
-                  {/* API Key 行 */}
-                  <div className={styles.fieldRow}>
-                    <span className={styles.fieldLabel}>{t('common.api_key')}:</span>
-                    <span className={styles.fieldValue}>{maskApiKey(item.apiKey)}</span>
-                  </div>
-                  {item.prefix && (
-                    <div className={styles.fieldRow}>
-                      <span className={styles.fieldLabel}>{t('common.prefix')}:</span>
-                      <span className={styles.fieldValue}>{item.prefix}</span>
-                    </div>
-                  )}
-                  {/* Base URL 行 */}
-                  {item.baseUrl && (
-                    <div className={styles.fieldRow}>
-                      <span className={styles.fieldLabel}>{t('common.base_url')}:</span>
-                      <span className={styles.fieldValue}>{item.baseUrl}</span>
-                    </div>
-                  )}
-                  {/* Proxy URL 行 */}
-                  {item.proxyUrl && (
-                    <div className={styles.fieldRow}>
-                      <span className={styles.fieldLabel}>{t('common.proxy_url')}:</span>
-                      <span className={styles.fieldValue}>{item.proxyUrl}</span>
-                    </div>
-                  )}
-                  {/* 自定义请求头徽章 */}
-                  {headerEntries.length > 0 && (
-                    <div className={styles.headerBadgeList}>
-                      {headerEntries.map(([key, value]) => (
-                        <span key={key} className={styles.headerBadge}>
-                          <strong>{key}:</strong> {value}
-                        </span>
-                      ))}
-                    </div>
-                  )}
-                  {configDisabled && (
-                    <div className="status-badge warning" style={{ marginTop: 8, marginBottom: 0 }}>
-                      {t('ai_providers.config_disabled_badge')}
-                    </div>
-                  )}
-                  {/* 模型列表 */}
-                  {item.models?.length ? (
-                    <div className={styles.modelTagList}>
-                      <span className={styles.modelCountLabel}>
-                        {t('ai_providers.claude_models_count')}: {item.models.length}
-                      </span>
-                      {item.models.map((model) => (
-                        <span key={model.name} className={styles.modelTag}>
-                          <span className={styles.modelName}>{model.name}</span>
-                          {model.alias && model.alias !== model.name && (
-                            <span className={styles.modelAlias}>{model.alias}</span>
-                          )}
-                        </span>
-                      ))}
-                    </div>
-                  ) : null}
-                  {/* 排除模型徽章 */}
-                  {excludedModels.length ? (
-                    <div className={styles.excludedModelsSection}>
-                      <div className={styles.excludedModelsLabel}>
-                        {t('ai_providers.excluded_models_count', { count: excludedModels.length })}
-                      </div>
-                      <div className={styles.modelTagList}>
-                        {excludedModels.map((model) => (
-                          <span
-                            key={model}
-                            className={`${styles.modelTag} ${styles.excludedModelTag}`}
-                          >
-                            <span className={styles.modelName}>{model}</span>
-                          </span>
-                        ))}
-                      </div>
-                    </div>
-                  ) : null}
-                  {/* 成功/失败统计 */}
-                  <div className={styles.cardStats}>
-                    <span className={`${styles.statPill} ${styles.statSuccess}`}>
-                      {t('stats.success')}: {stats.success}
-                    </span>
-                    <span className={`${styles.statPill} ${styles.statFailure}`}>
-                      {t('stats.failure')}: {stats.failure}
-                    </span>
-                  </div>
-                  {/* 状态监测栏 */}
-                  {renderStatusBar(item.apiKey)}
-                </Fragment>
-              );
-            },
-            (index) => openProviderModal('claude', index),
-            (item) => deleteProviderEntry('claude', item.apiKey),
-            t('ai_providers.claude_empty_title'),
-            t('ai_providers.claude_empty_desc'),
-            undefined,
-            {
-              getRowDisabled: (item) => hasDisableAllModelsRule(item.excludedModels),
-              renderExtraActions: (item, index) => (
-                <ToggleSwitch
-                  label={t('ai_providers.config_toggle_label')}
-                  checked={!hasDisableAllModelsRule(item.excludedModels)}
-                  disabled={disableControls || loading || saving || Boolean(configSwitchingKey)}
-                  onChange={(value) => void setConfigEnabled('claude', index, value)}
-                />
-              ),
-            }
-          )}
-        </Card>
+        <ClaudeSection
+          configs={claudeConfigs}
+          keyStats={keyStats}
+          usageDetails={usageDetails}
+          loading={loading}
+          disableControls={disableControls}
+          isSaving={saving}
+          isSwitching={isSwitching}
+          isModalOpen={modal?.type === 'claude'}
+          modalIndex={claudeModalIndex}
+          onAdd={() => openProviderModal('claude', null)}
+          onEdit={(index) => openProviderModal('claude', index)}
+          onDelete={(index) => void deleteProviderEntry('claude', index)}
+          onToggle={(index, enabled) => void setConfigEnabled('claude', index, enabled)}
+          onCloseModal={closeModal}
+          onSave={(form, editIndex) => saveProvider('claude', form, editIndex)}
+        />
 
-        <Card
-          title={
-            <span className={styles.cardTitle}>
-              <img src={iconAmp} alt="" className={styles.cardTitleIcon} />
-              {t('ai_providers.ampcode_title')}
-            </span>
-          }
-          extra={
-            <Button
-              size="sm"
-              onClick={openAmpcodeModal}
-              disabled={disableControls || saving || ampcodeSaving || Boolean(configSwitchingKey)}
-            >
-              {t('common.edit')}
-            </Button>
-          }
-        >
-          {loading ? (
-            <div className="hint">{t('common.loading')}</div>
-          ) : (
-            <>
-              <div className={styles.fieldRow}>
-                <span className={styles.fieldLabel}>
-                  {t('ai_providers.ampcode_upstream_url_label')}:
-                </span>
-                <span className={styles.fieldValue}>
-                  {config?.ampcode?.upstreamUrl || t('common.not_set')}
-                </span>
-              </div>
-              <div className={styles.fieldRow}>
-                <span className={styles.fieldLabel}>
-                  {t('ai_providers.ampcode_upstream_api_key_label')}:
-                </span>
-                <span className={styles.fieldValue}>
-                  {config?.ampcode?.upstreamApiKey
-                    ? maskApiKey(config.ampcode.upstreamApiKey)
-                    : t('common.not_set')}
-                </span>
-              </div>
-              <div className={styles.fieldRow}>
-                <span className={styles.fieldLabel}>
-                  {t('ai_providers.ampcode_force_model_mappings_label')}:
-                </span>
-                <span className={styles.fieldValue}>
-                  {(config?.ampcode?.forceModelMappings ?? false)
-                    ? t('common.yes')
-                    : t('common.no')}
-                </span>
-              </div>
-              <div className={styles.fieldRow} style={{ marginTop: 8 }}>
-                <span className={styles.fieldLabel}>
-                  {t('ai_providers.ampcode_model_mappings_count')}:
-                </span>
-                <span className={styles.fieldValue}>
-                  {config?.ampcode?.modelMappings?.length || 0}
-                </span>
-              </div>
-              {config?.ampcode?.modelMappings?.length ? (
-                <div className={styles.modelTagList}>
-                  {config.ampcode.modelMappings.slice(0, 5).map((mapping) => (
-                    <span key={`${mapping.from}→${mapping.to}`} className={styles.modelTag}>
-                      <span className={styles.modelName}>{mapping.from}</span>
-                      <span className={styles.modelAlias}>{mapping.to}</span>
-                    </span>
-                  ))}
-                  {config.ampcode.modelMappings.length > 5 && (
-                    <span className={styles.modelTag}>
-                      <span className={styles.modelName}>
-                        +{config.ampcode.modelMappings.length - 5}
-                      </span>
-                    </span>
-                  )}
-                </div>
-              ) : null}
-            </>
-          )}
-        </Card>
+        <AmpcodeSection
+          config={config?.ampcode}
+          loading={loading}
+          disableControls={disableControls}
+          isSaving={saving}
+          isSwitching={isSwitching}
+          isBusy={ampcodeBusy}
+          isModalOpen={modal?.type === 'ampcode'}
+          onOpen={openAmpcodeModal}
+          onCloseModal={closeModal}
+          onBusyChange={setAmpcodeBusy}
+        />
 
-        <Card
-          title={
-            <span className={styles.cardTitle}>
-              <img
-                src={resolvedTheme === 'dark' ? iconOpenaiDark : iconOpenaiLight}
-                alt=""
-                className={styles.cardTitleIcon}
-              />
-              {t('ai_providers.openai_title')}
-            </span>
-          }
-          extra={
-            <Button
-              size="sm"
-              onClick={() => openOpenaiModal(null)}
-              disabled={disableControls || saving || Boolean(configSwitchingKey)}
-            >
-              {t('ai_providers.openai_add_button')}
-            </Button>
-          }
-        >
-          {renderList<OpenAIProviderConfig>(
-            openaiProviders,
-            (item) => item.name,
-            (item, _index) => {
-              const stats = getOpenAIProviderStats(item.apiKeyEntries, keyStats, maskApiKey);
-              const headerEntries = Object.entries(item.headers || {});
-              const apiKeyEntries = item.apiKeyEntries || [];
-              return (
-                <Fragment>
-                  <div className="item-title">{item.name}</div>
-                  {item.prefix && (
-                    <div className={styles.fieldRow}>
-                      <span className={styles.fieldLabel}>{t('common.prefix')}:</span>
-                      <span className={styles.fieldValue}>{item.prefix}</span>
-                    </div>
-                  )}
-                  {/* Base URL 行 */}
-                  <div className={styles.fieldRow}>
-                    <span className={styles.fieldLabel}>{t('common.base_url')}:</span>
-                    <span className={styles.fieldValue}>{item.baseUrl}</span>
-                  </div>
-                  {/* 自定义请求头徽章 */}
-                  {headerEntries.length > 0 && (
-                    <div className={styles.headerBadgeList}>
-                      {headerEntries.map(([key, value]) => (
-                        <span key={key} className={styles.headerBadge}>
-                          <strong>{key}:</strong> {value}
-                        </span>
-                      ))}
-                    </div>
-                  )}
-                  {/* API密钥条目二级卡片 */}
-                  {apiKeyEntries.length > 0 && (
-                    <div className={styles.apiKeyEntriesSection}>
-                      <div className={styles.apiKeyEntriesLabel}>
-                        {t('ai_providers.openai_keys_count')}: {apiKeyEntries.length}
-                      </div>
-                      <div className={styles.apiKeyEntryList}>
-                        {apiKeyEntries.map((entry, entryIndex) => {
-                          const entryStats = getStatsBySource(entry.apiKey, keyStats, maskApiKey);
-                          return (
-                            <div key={entryIndex} className={styles.apiKeyEntryCard}>
-                              <span className={styles.apiKeyEntryIndex}>{entryIndex + 1}</span>
-                              <span className={styles.apiKeyEntryKey}>
-                                {maskApiKey(entry.apiKey)}
-                              </span>
-                              {entry.proxyUrl && (
-                                <span className={styles.apiKeyEntryProxy}>{entry.proxyUrl}</span>
-                              )}
-                              <div className={styles.apiKeyEntryStats}>
-                                <span
-                                  className={`${styles.apiKeyEntryStat} ${styles.apiKeyEntryStatSuccess}`}
-                                >
-                                  <IconCheck size={12} /> {entryStats.success}
-                                </span>
-                                <span
-                                  className={`${styles.apiKeyEntryStat} ${styles.apiKeyEntryStatFailure}`}
-                                >
-                                  <IconX size={12} /> {entryStats.failure}
-                                </span>
-                              </div>
-                            </div>
-                          );
-                        })}
-                      </div>
-                    </div>
-                  )}
-                  {/* 模型数量标签 */}
-                  <div className={styles.fieldRow} style={{ marginTop: '8px' }}>
-                    <span className={styles.fieldLabel}>
-                      {t('ai_providers.openai_models_count')}:
-                    </span>
-                    <span className={styles.fieldValue}>{item.models?.length || 0}</span>
-                  </div>
-                  {/* 模型列表徽章 */}
-                  {item.models?.length ? (
-                    <div className={styles.modelTagList}>
-                      {item.models.map((model) => (
-                        <span key={model.name} className={styles.modelTag}>
-                          <span className={styles.modelName}>{model.name}</span>
-                          {model.alias && model.alias !== model.name && (
-                            <span className={styles.modelAlias}>{model.alias}</span>
-                          )}
-                        </span>
-                      ))}
-                    </div>
-                  ) : null}
-                  {/* 测试模型 */}
-                  {item.testModel && (
-                    <div className={styles.fieldRow}>
-                      <span className={styles.fieldLabel}>Test Model:</span>
-                      <span className={styles.fieldValue}>{item.testModel}</span>
-                    </div>
-                  )}
-                  {/* 成功/失败统计（汇总） */}
-                  <div className={styles.cardStats}>
-                    <span className={`${styles.statPill} ${styles.statSuccess}`}>
-                      {t('stats.success')}: {stats.success}
-                    </span>
-                    <span className={`${styles.statPill} ${styles.statFailure}`}>
-                      {t('stats.failure')}: {stats.failure}
-                    </span>
-                  </div>
-                  {/* 状态监测栏（汇总） */}
-                  {renderOpenAIStatusBar(item.name)}
-                </Fragment>
-              );
-            },
-            (index) => openOpenaiModal(index),
-            (item) => deleteOpenai(item.name),
-            t('ai_providers.openai_empty_title'),
-            t('ai_providers.openai_empty_desc')
-          )}
-        </Card>
-
-        {/* Ampcode Modal */}
-        <Modal
-          open={modal?.type === 'ampcode'}
-          onClose={closeModal}
-          title={t('ai_providers.ampcode_modal_title')}
-          footer={
-            <>
-              <Button variant="secondary" onClick={closeModal} disabled={ampcodeSaving}>
-                {t('common.cancel')}
-              </Button>
-              <Button
-                onClick={saveAmpcode}
-                loading={ampcodeSaving}
-                disabled={disableControls || ampcodeModalLoading}
-              >
-                {t('common.save')}
-              </Button>
-            </>
-          }
-        >
-          {ampcodeModalError && <div className="error-box">{ampcodeModalError}</div>}
-          <Input
-            label={t('ai_providers.ampcode_upstream_url_label')}
-            placeholder={t('ai_providers.ampcode_upstream_url_placeholder')}
-            value={ampcodeForm.upstreamUrl}
-            onChange={(e) => setAmpcodeForm((prev) => ({ ...prev, upstreamUrl: e.target.value }))}
-            disabled={ampcodeModalLoading || ampcodeSaving}
-            hint={t('ai_providers.ampcode_upstream_url_hint')}
-          />
-          <Input
-            label={t('ai_providers.ampcode_upstream_api_key_label')}
-            placeholder={t('ai_providers.ampcode_upstream_api_key_placeholder')}
-            type="password"
-            value={ampcodeForm.upstreamApiKey}
-            onChange={(e) =>
-              setAmpcodeForm((prev) => ({ ...prev, upstreamApiKey: e.target.value }))
-            }
-            disabled={ampcodeModalLoading || ampcodeSaving}
-            hint={t('ai_providers.ampcode_upstream_api_key_hint')}
-          />
-          <div
-            style={{
-              display: 'flex',
-              gap: 8,
-              alignItems: 'center',
-              marginTop: -8,
-              marginBottom: 12,
-              flexWrap: 'wrap',
-            }}
-          >
-            <div className="hint" style={{ margin: 0 }}>
-              {t('ai_providers.ampcode_upstream_api_key_current', {
-                key: config?.ampcode?.upstreamApiKey
-                  ? maskApiKey(config.ampcode.upstreamApiKey)
-                  : t('common.not_set'),
-              })}
-            </div>
-            <Button
-              variant="danger"
-              size="sm"
-              onClick={clearAmpcodeUpstreamApiKey}
-              disabled={ampcodeModalLoading || ampcodeSaving || !config?.ampcode?.upstreamApiKey}
-            >
-              {t('ai_providers.ampcode_clear_upstream_api_key')}
-            </Button>
-          </div>
-
-          <div className="form-group">
-            <ToggleSwitch
-              label={t('ai_providers.ampcode_force_model_mappings_label')}
-              checked={ampcodeForm.forceModelMappings}
-              onChange={(value) =>
-                setAmpcodeForm((prev) => ({ ...prev, forceModelMappings: value }))
-              }
-              disabled={ampcodeModalLoading || ampcodeSaving}
-            />
-            <div className="hint">{t('ai_providers.ampcode_force_model_mappings_hint')}</div>
-          </div>
-
-          <div className="form-group">
-            <label>{t('ai_providers.ampcode_model_mappings_label')}</label>
-            <ModelInputList
-              entries={ampcodeForm.mappingEntries}
-              onChange={(entries) => {
-                setAmpcodeMappingsDirty(true);
-                setAmpcodeForm((prev) => ({ ...prev, mappingEntries: entries }));
-              }}
-              addLabel={t('ai_providers.ampcode_model_mappings_add_btn')}
-              namePlaceholder={t('ai_providers.ampcode_model_mappings_from_placeholder')}
-              aliasPlaceholder={t('ai_providers.ampcode_model_mappings_to_placeholder')}
-              disabled={ampcodeModalLoading || ampcodeSaving}
-            />
-            <div className="hint">{t('ai_providers.ampcode_model_mappings_hint')}</div>
-          </div>
-        </Modal>
-
-        {/* Gemini Modal */}
-        <Modal
-          open={modal?.type === 'gemini'}
-          onClose={closeModal}
-          title={
-            modal?.index !== null
-              ? t('ai_providers.gemini_edit_modal_title')
-              : t('ai_providers.gemini_add_modal_title')
-          }
-          footer={
-            <>
-              <Button variant="secondary" onClick={closeModal} disabled={saving}>
-                {t('common.cancel')}
-              </Button>
-              <Button onClick={saveGemini} loading={saving}>
-                {t('common.save')}
-              </Button>
-            </>
-          }
-        >
-          <Input
-            label={t('ai_providers.gemini_add_modal_key_label')}
-            placeholder={t('ai_providers.gemini_add_modal_key_placeholder')}
-            value={geminiForm.apiKey}
-            onChange={(e) => setGeminiForm((prev) => ({ ...prev, apiKey: e.target.value }))}
-          />
-          <Input
-            label={t('ai_providers.prefix_label')}
-            placeholder={t('ai_providers.prefix_placeholder')}
-            value={geminiForm.prefix ?? ''}
-            onChange={(e) => setGeminiForm((prev) => ({ ...prev, prefix: e.target.value }))}
-            hint={t('ai_providers.prefix_hint')}
-          />
-          <Input
-            label={t('ai_providers.gemini_base_url_label')}
-            placeholder={t('ai_providers.gemini_base_url_placeholder')}
-            value={geminiForm.baseUrl ?? ''}
-            onChange={(e) => setGeminiForm((prev) => ({ ...prev, baseUrl: e.target.value }))}
-          />
-          <HeaderInputList
-            entries={headersToEntries(geminiForm.headers as any)}
-            onChange={(entries) =>
-              setGeminiForm((prev) => ({ ...prev, headers: buildHeaderObject(entries) }))
-            }
-            addLabel={t('common.custom_headers_add')}
-            keyPlaceholder={t('common.custom_headers_key_placeholder')}
-            valuePlaceholder={t('common.custom_headers_value_placeholder')}
-          />
-          <div className="form-group">
-            <label>{t('ai_providers.excluded_models_label')}</label>
-            <textarea
-              className="input"
-              placeholder={t('ai_providers.excluded_models_placeholder')}
-              value={geminiForm.excludedText}
-              onChange={(e) => setGeminiForm((prev) => ({ ...prev, excludedText: e.target.value }))}
-              rows={4}
-            />
-            <div className="hint">{t('ai_providers.excluded_models_hint')}</div>
-          </div>
-        </Modal>
-
-        {/* Codex / Claude Modal */}
-        <Modal
-          open={modal?.type === 'codex' || modal?.type === 'claude'}
-          onClose={closeModal}
-          title={
-            modal?.type === 'codex'
-              ? modal.index !== null
-                ? t('ai_providers.codex_edit_modal_title')
-                : t('ai_providers.codex_add_modal_title')
-              : modal?.type === 'claude' && modal.index !== null
-                ? t('ai_providers.claude_edit_modal_title')
-                : t('ai_providers.claude_add_modal_title')
-          }
-          footer={
-            <>
-              <Button variant="secondary" onClick={closeModal} disabled={saving}>
-                {t('common.cancel')}
-              </Button>
-              <Button
-                onClick={() => saveProvider(modal?.type as 'codex' | 'claude')}
-                loading={saving}
-              >
-                {t('common.save')}
-              </Button>
-            </>
-          }
-        >
-          <Input
-            label={
-              modal?.type === 'codex'
-                ? t('ai_providers.codex_add_modal_key_label')
-                : t('ai_providers.claude_add_modal_key_label')
-            }
-            value={providerForm.apiKey}
-            onChange={(e) => setProviderForm((prev) => ({ ...prev, apiKey: e.target.value }))}
-          />
-          <Input
-            label={t('ai_providers.prefix_label')}
-            placeholder={t('ai_providers.prefix_placeholder')}
-            value={providerForm.prefix ?? ''}
-            onChange={(e) => setProviderForm((prev) => ({ ...prev, prefix: e.target.value }))}
-            hint={t('ai_providers.prefix_hint')}
-          />
-          <Input
-            label={
-              modal?.type === 'codex'
-                ? t('ai_providers.codex_add_modal_url_label')
-                : t('ai_providers.claude_add_modal_url_label')
-            }
-            value={providerForm.baseUrl ?? ''}
-            onChange={(e) => setProviderForm((prev) => ({ ...prev, baseUrl: e.target.value }))}
-          />
-          <Input
-            label={
-              modal?.type === 'codex'
-                ? t('ai_providers.codex_add_modal_proxy_label')
-                : t('ai_providers.claude_add_modal_proxy_label')
-            }
-            value={providerForm.proxyUrl ?? ''}
-            onChange={(e) => setProviderForm((prev) => ({ ...prev, proxyUrl: e.target.value }))}
-          />
-          <HeaderInputList
-            entries={headersToEntries(providerForm.headers as any)}
-            onChange={(entries) =>
-              setProviderForm((prev) => ({ ...prev, headers: buildHeaderObject(entries) }))
-            }
-            addLabel={t('common.custom_headers_add')}
-            keyPlaceholder={t('common.custom_headers_key_placeholder')}
-            valuePlaceholder={t('common.custom_headers_value_placeholder')}
-          />
-          {modal?.type === 'claude' && (
-            <div className="form-group">
-              <label>{t('ai_providers.claude_models_label')}</label>
-              <ModelInputList
-                entries={providerForm.modelEntries}
-                onChange={(entries) =>
-                  setProviderForm((prev) => ({ ...prev, modelEntries: entries }))
-                }
-                addLabel={t('ai_providers.claude_models_add_btn')}
-                namePlaceholder={t('common.model_name_placeholder')}
-                aliasPlaceholder={t('common.model_alias_placeholder')}
-                disabled={saving}
-              />
-            </div>
-          )}
-          <div className="form-group">
-            <label>{t('ai_providers.excluded_models_label')}</label>
-            <textarea
-              className="input"
-              placeholder={t('ai_providers.excluded_models_placeholder')}
-              value={providerForm.excludedText}
-              onChange={(e) =>
-                setProviderForm((prev) => ({ ...prev, excludedText: e.target.value }))
-              }
-              rows={4}
-            />
-            <div className="hint">{t('ai_providers.excluded_models_hint')}</div>
-          </div>
-        </Modal>
-
-        {/* OpenAI Modal */}
-        <Modal
-          open={modal?.type === 'openai'}
-          onClose={closeModal}
-          title={
-            modal?.index !== null
-              ? t('ai_providers.openai_edit_modal_title')
-              : t('ai_providers.openai_add_modal_title')
-          }
-          footer={
-            <>
-              <Button variant="secondary" onClick={closeModal} disabled={saving}>
-                {t('common.cancel')}
-              </Button>
-              <Button onClick={saveOpenai} loading={saving}>
-                {t('common.save')}
-              </Button>
-            </>
-          }
-        >
-          <Input
-            label={t('ai_providers.openai_add_modal_name_label')}
-            value={openaiForm.name}
-            onChange={(e) => setOpenaiForm((prev) => ({ ...prev, name: e.target.value }))}
-          />
-          <Input
-            label={t('ai_providers.prefix_label')}
-            placeholder={t('ai_providers.prefix_placeholder')}
-            value={openaiForm.prefix ?? ''}
-            onChange={(e) => setOpenaiForm((prev) => ({ ...prev, prefix: e.target.value }))}
-            hint={t('ai_providers.prefix_hint')}
-          />
-          <Input
-            label={t('ai_providers.openai_add_modal_url_label')}
-            value={openaiForm.baseUrl}
-            onChange={(e) => setOpenaiForm((prev) => ({ ...prev, baseUrl: e.target.value }))}
-          />
-
-          <HeaderInputList
-            entries={openaiForm.headers}
-            onChange={(entries) => setOpenaiForm((prev) => ({ ...prev, headers: entries }))}
-            addLabel={t('common.custom_headers_add')}
-            keyPlaceholder={t('common.custom_headers_key_placeholder')}
-            valuePlaceholder={t('common.custom_headers_value_placeholder')}
-          />
-
-          <div className="form-group">
-            <label>
-              {modal?.index !== null
-                ? t('ai_providers.openai_edit_modal_models_label')
-                : t('ai_providers.openai_add_modal_models_label')}
-            </label>
-            <div className="hint">{t('ai_providers.openai_models_hint')}</div>
-            <ModelInputList
-              entries={openaiForm.modelEntries}
-              onChange={(entries) => setOpenaiForm((prev) => ({ ...prev, modelEntries: entries }))}
-              addLabel={t('ai_providers.openai_models_add_btn')}
-              namePlaceholder={t('common.model_name_placeholder')}
-              aliasPlaceholder={t('common.model_alias_placeholder')}
-              disabled={saving}
-            />
-            <Button
-              variant="secondary"
-              size="sm"
-              onClick={openOpenaiModelDiscovery}
-              disabled={saving}
-            >
-              {t('ai_providers.openai_models_fetch_button')}
-            </Button>
-          </div>
-
-          <div className="form-group">
-            <label>{t('ai_providers.openai_test_title')}</label>
-            <div className="hint">{t('ai_providers.openai_test_hint')}</div>
-            <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
-              <select
-                className={`input ${styles.openaiTestSelect}`}
-                value={openaiTestModel}
-                onChange={(e) => {
-                  setOpenaiTestModel(e.target.value);
-                  setOpenaiTestStatus('idle');
-                  setOpenaiTestMessage('');
-                }}
-                disabled={saving || openaiAvailableModels.length === 0}
-              >
-                <option value="">
-                  {openaiAvailableModels.length
-                    ? t('ai_providers.openai_test_select_placeholder')
-                    : t('ai_providers.openai_test_select_empty')}
-                </option>
-                {openaiForm.modelEntries
-                  .filter((entry) => entry.name.trim())
-                  .map((entry, idx) => {
-                    const name = entry.name.trim();
-                    const alias = entry.alias.trim();
-                    const label = alias && alias !== name ? `${name} (${alias})` : name;
-                    return (
-                      <option key={`${name}-${idx}`} value={name}>
-                        {label}
-                      </option>
-                    );
-                  })}
-              </select>
-              <Button
-                variant={openaiTestStatus === 'error' ? 'danger' : 'secondary'}
-                className={`${styles.openaiTestButton} ${openaiTestStatus === 'success' ? styles.openaiTestButtonSuccess : ''}`}
-                onClick={testOpenaiProviderConnection}
-                loading={openaiTestStatus === 'loading'}
-                disabled={saving || openaiAvailableModels.length === 0}
-              >
-                {t('ai_providers.openai_test_action')}
-              </Button>
-            </div>
-            {openaiTestMessage && (
-              <div
-                className={`status-badge ${
-                  openaiTestStatus === 'error'
-                    ? 'error'
-                    : openaiTestStatus === 'success'
-                      ? 'success'
-                      : 'muted'
-                }`}
-              >
-                {openaiTestMessage}
-              </div>
-            )}
-          </div>
-
-          <div className="form-group">
-            <label>{t('ai_providers.openai_add_modal_keys_label')}</label>
-            {renderKeyEntries(openaiForm.apiKeyEntries)}
-          </div>
-        </Modal>
-
-        {/* OpenAI Models Discovery Modal */}
-        <Modal
-          open={openaiDiscoveryOpen}
-          onClose={closeOpenaiModelDiscovery}
-          title={t('ai_providers.openai_models_fetch_title')}
-          width={720}
-          footer={
-            <>
-              <Button
-                variant="secondary"
-                onClick={closeOpenaiModelDiscovery}
-                disabled={openaiDiscoveryLoading}
-              >
-                {t('ai_providers.openai_models_fetch_back')}
-              </Button>
-              <Button
-                onClick={applyOpenaiModelDiscoverySelection}
-                disabled={openaiDiscoveryLoading}
-              >
-                {t('ai_providers.openai_models_fetch_apply')}
-              </Button>
-            </>
-          }
-        >
-          <div className="hint" style={{ marginBottom: 8 }}>
-            {t('ai_providers.openai_models_fetch_hint')}
-          </div>
-          <div className="form-group">
-            <label>{t('ai_providers.openai_models_fetch_url_label')}</label>
-            <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
-              <input className="input" readOnly value={openaiDiscoveryEndpoint} />
-              <Button
-                variant="secondary"
-                size="sm"
-                onClick={() => fetchOpenaiModelDiscovery({ allowFallback: true })}
-                loading={openaiDiscoveryLoading}
-              >
-                {t('ai_providers.openai_models_fetch_refresh')}
-              </Button>
-            </div>
-          </div>
-          <Input
-            label={t('ai_providers.openai_models_search_label')}
-            placeholder={t('ai_providers.openai_models_search_placeholder')}
-            value={openaiDiscoverySearch}
-            onChange={(e) => setOpenaiDiscoverySearch(e.target.value)}
-          />
-          {openaiDiscoveryError && <div className="error-box">{openaiDiscoveryError}</div>}
-          {openaiDiscoveryLoading ? (
-            <div className="hint">{t('ai_providers.openai_models_fetch_loading')}</div>
-          ) : openaiDiscoveryModels.length === 0 ? (
-            <div className="hint">{t('ai_providers.openai_models_fetch_empty')}</div>
-          ) : filteredOpenaiDiscoveryModels.length === 0 ? (
-            <div className="hint">{t('ai_providers.openai_models_search_empty')}</div>
-          ) : (
-            <div className={styles.modelDiscoveryList}>
-              {filteredOpenaiDiscoveryModels.map((model) => {
-                const checked = openaiDiscoverySelected.has(model.name);
-                return (
-                  <label
-                    key={model.name}
-                    className={`${styles.modelDiscoveryRow} ${checked ? styles.modelDiscoveryRowSelected : ''}`}
-                  >
-                    <input
-                      type="checkbox"
-                      checked={checked}
-                      onChange={() => toggleOpenaiModelSelection(model.name)}
-                    />
-                    <div className={styles.modelDiscoveryMeta}>
-                      <div className={styles.modelDiscoveryName}>
-                        {model.name}
-                        {model.alias && (
-                          <span className={styles.modelDiscoveryAlias}>{model.alias}</span>
-                        )}
-                      </div>
-                      {model.description && (
-                        <div className={styles.modelDiscoveryDesc}>{model.description}</div>
-                      )}
-                    </div>
-                  </label>
-                );
-              })}
-            </div>
-          )}
-        </Modal>
+        <OpenAISection
+          configs={openaiProviders}
+          keyStats={keyStats}
+          usageDetails={usageDetails}
+          loading={loading}
+          disableControls={disableControls}
+          isSaving={saving}
+          isSwitching={isSwitching}
+          resolvedTheme={resolvedTheme}
+          isModalOpen={modal?.type === 'openai'}
+          modalIndex={openaiModalIndex}
+          onAdd={() => openOpenaiModal(null)}
+          onEdit={(index) => openOpenaiModal(index)}
+          onDelete={deleteOpenai}
+          onCloseModal={closeModal}
+          onSave={saveOpenai}
+        />
       </div>
     </div>
   );