feat(ai-providers): add Claude model discovery and connectivity test

2026-02-18 02:30:51 +08:00 · 2026-02-17 01:22:45 +08:00
parent 7d4c400084
commit 3769447604
9 changed files with 1059 additions and 161 deletions
--- a/src/components/providers/utils.ts
+++ b/src/components/providers/utils.ts
@@ -43,6 +43,19 @@ export const normalizeOpenAIBaseUrl = (baseUrl: string): string => {
  return trimmed;
 };

+export const normalizeClaudeBaseUrl = (baseUrl: string): string => {
+  let trimmed = String(baseUrl || '').trim();
+  if (!trimmed) {
+    return 'https://api.anthropic.com';
+  }
+  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 '';
@@ -58,6 +71,18 @@ export const buildOpenAIChatCompletionsEndpoint = (baseUrl: string): string => {
  return `${trimmed}/chat/completions`;
 };

+export const buildClaudeMessagesEndpoint = (baseUrl: string): string => {
+  const trimmed = normalizeClaudeBaseUrl(baseUrl);
+  if (!trimmed) return '';
+  if (trimmed.endsWith('/v1/messages')) {
+    return trimmed;
+  }
+  if (trimmed.endsWith('/v1')) {
+    return `${trimmed}/messages`;
+  }
+  return `${trimmed}/v1/messages`;
+};
+
 // 根据 source (apiKey) 获取统计数据 - 与旧版逻辑一致
 export const getStatsBySource = (
  apiKey: string,
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -250,6 +250,31 @@
    "claude_models_hint": "Leave empty to allow all models, or add name[, alias] entries to limit/alias them.",
    "claude_models_add_btn": "Add Model",
    "claude_models_count": "Models Count",
+    "claude_models_fetch_button": "Fetch via /v1/models",
+    "claude_models_fetch_title": "Pick Models from Claude /v1/models",
+    "claude_models_fetch_hint": "Call GET /v1/models with Anthropic headers. By default, this sends x-api-key and anthropic-version: 2023-06-01, merged with your custom headers.",
+    "claude_models_fetch_url_label": "Request URL",
+    "claude_models_fetch_refresh": "Refresh",
+    "claude_models_fetch_loading": "Fetching models from Claude /v1/models...",
+    "claude_models_fetch_empty": "No models returned. Please check Base URL, API key, or headers.",
+    "claude_models_fetch_error": "Failed to fetch Claude models",
+    "claude_models_fetch_apply": "Add selected models",
+    "claude_models_search_label": "Search models",
+    "claude_models_search_placeholder": "Filter by name, alias, or description",
+    "claude_models_search_empty": "No models match your search. Try a different keyword.",
+    "claude_models_fetch_added": "{{count}} new models added",
+    "claude_test_title": "Connection Test",
+    "claude_test_hint": "Send a test request to /v1/messages using Anthropic headers to verify this configuration.",
+    "claude_test_select_placeholder": "Choose from current models",
+    "claude_test_select_empty": "No models configured. Add models first",
+    "claude_test_action": "Test",
+    "claude_test_running": "Sending Claude test request...",
+    "claude_test_timeout": "Test request timed out after {{seconds}} seconds.",
+    "claude_test_success": "Test succeeded. Claude model responded.",
+    "claude_test_failed": "Test failed",
+    "claude_test_key_required": "Please provide a Claude API key or set x-api-key in custom headers",
+    "claude_test_model_required": "Please select a model to test",
+    "claude_test_endpoint_invalid": "Unable to build a valid Claude /v1/messages endpoint",
    "vertex_title": "Vertex API Configuration",
    "vertex_add_button": "Add Configuration",
    "vertex_empty_title": "No Vertex Configuration",
--- a/src/i18n/locales/ru.json
+++ b/src/i18n/locales/ru.json
@@ -250,6 +250,31 @@
    "claude_models_hint": "Оставьте пустым, чтобы разрешить все модели, или добавьте записи name[, alias], чтобы ограничить/переименовать их.",
    "claude_models_add_btn": "Добавить модель",
    "claude_models_count": "Количество моделей",
+    "claude_models_fetch_button": "Получить через /v1/models",
+    "claude_models_fetch_title": "Выбор моделей из Claude /v1/models",
+    "claude_models_fetch_hint": "Вызывает GET /v1/models по спецификации Anthropic. По умолчанию отправляются x-api-key и anthropic-version: 2023-06-01, объединённые с вашими пользовательскими заголовками.",
+    "claude_models_fetch_url_label": "URL запроса",
+    "claude_models_fetch_refresh": "Обновить",
+    "claude_models_fetch_loading": "Получение моделей из Claude /v1/models...",
+    "claude_models_fetch_empty": "Модели не вернулись. Проверьте Base URL, API-ключ или заголовки.",
+    "claude_models_fetch_error": "Не удалось получить модели Claude",
+    "claude_models_fetch_apply": "Добавить выбранные модели",
+    "claude_models_search_label": "Поиск моделей",
+    "claude_models_search_placeholder": "Фильтр по имени, псевдониму или описанию",
+    "claude_models_search_empty": "Модели по запросу не найдены. Попробуйте другой ключ.",
+    "claude_models_fetch_added": "Добавлено новых моделей: {{count}}",
+    "claude_test_title": "Тест подключения",
+    "claude_test_hint": "Отправляет тестовый запрос в /v1/messages по спецификации Anthropic, чтобы проверить текущую конфигурацию.",
+    "claude_test_select_placeholder": "Выберите из текущих моделей",
+    "claude_test_select_empty": "Модели не настроены. Сначала добавьте модели",
+    "claude_test_action": "Тест",
+    "claude_test_running": "Отправка тестового запроса Claude...",
+    "claude_test_timeout": "Тестовый запрос превысил тайм-аут {{seconds}} с",
+    "claude_test_success": "Тест выполнен успешно. Модель Claude ответила.",
+    "claude_test_failed": "Тест не выполнен",
+    "claude_test_key_required": "Укажите Claude API-ключ или задайте x-api-key в пользовательских заголовках",
+    "claude_test_model_required": "Выберите модель для теста",
+    "claude_test_endpoint_invalid": "Не удалось сформировать корректный endpoint Claude /v1/messages",
    "vertex_title": "Конфигурация Vertex API",
    "vertex_add_button": "Добавить конфигурацию",
    "vertex_empty_title": "Конфигурации Vertex отсутствуют",
--- a/src/i18n/locales/zh-CN.json
+++ b/src/i18n/locales/zh-CN.json
@@ -250,6 +250,31 @@
    "claude_models_hint": "为空表示使用全部模型；可填写 name[, alias] 以限制或重命名模型。",
    "claude_models_add_btn": "添加模型",
    "claude_models_count": "模型数量",
+    "claude_models_fetch_button": "从 /v1/models 获取",
+    "claude_models_fetch_title": "从 Claude /v1/models 选择模型",
+    "claude_models_fetch_hint": "按 Anthropic 规范请求 GET /v1/models，默认附带 x-api-key 与 anthropic-version: 2023-06-01；也会合并你配置的自定义请求头。",
+    "claude_models_fetch_url_label": "请求地址",
+    "claude_models_fetch_refresh": "重新获取",
+    "claude_models_fetch_loading": "正在从 Claude /v1/models 获取模型列表...",
+    "claude_models_fetch_empty": "未获取到模型，请检查 Base URL、API Key 或请求头。",
+    "claude_models_fetch_error": "获取 Claude 模型失败",
+    "claude_models_fetch_apply": "添加所选模型",
+    "claude_models_search_label": "搜索模型",
+    "claude_models_search_placeholder": "按名称、别名或描述筛选",
+    "claude_models_search_empty": "没有匹配的模型，请更换关键字试试。",
+    "claude_models_fetch_added": "已添加 {{count}} 个新模型",
+    "claude_test_title": "连通性测试",
+    "claude_test_hint": "按 Anthropic 规范向 /v1/messages 发送测试请求，验证当前配置是否可用。",
+    "claude_test_select_placeholder": "从当前模型列表选择",
+    "claude_test_select_empty": "当前未配置模型，请先添加模型",
+    "claude_test_action": "测试",
+    "claude_test_running": "正在发送 Claude 测试请求...",
+    "claude_test_timeout": "测试请求超时（{{seconds}}秒）。",
+    "claude_test_success": "测试成功，Claude 模型可用。",
+    "claude_test_failed": "测试失败",
+    "claude_test_key_required": "请先填写 Claude API Key 或在自定义请求头中设置 x-api-key",
+    "claude_test_model_required": "请选择要测试的模型",
+    "claude_test_endpoint_invalid": "无法构造有效的 Claude /v1/messages 请求地址",
    "vertex_title": "Vertex API 配置",
    "vertex_add_button": "添加配置",
    "vertex_empty_title": "暂无Vertex配置",
--- a/src/pages/AiProvidersClaudeEditLayout.tsx
+++ b/src/pages/AiProvidersClaudeEditLayout.tsx
@@ -0,0 +1,292 @@
+import type { Dispatch, SetStateAction } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { Outlet, useLocation, useNavigate, useParams } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { providersApi } from '@/services/api';
+import { useAuthStore, useConfigStore, useNotificationStore } from '@/stores';
+import type { ProviderKeyConfig } from '@/types';
+import type { ModelInfo } from '@/utils/models';
+import type { ModelEntry, ProviderFormState } from '@/components/providers/types';
+import { buildHeaderObject, headersToEntries } from '@/utils/headers';
+import { excludedModelsToText, parseExcludedModels } from '@/components/providers/utils';
+import { modelsToEntries } from '@/components/ui/modelInputListUtils';
+
+type LocationState = { fromAiProviders?: boolean } | null;
+
+type TestStatus = 'idle' | 'loading' | 'success' | 'error';
+
+export type ClaudeEditOutletContext = {
+  hasIndexParam: boolean;
+  editIndex: number | null;
+  invalidIndexParam: boolean;
+  invalidIndex: boolean;
+  disableControls: boolean;
+  loading: boolean;
+  saving: boolean;
+  form: ProviderFormState;
+  setForm: Dispatch<SetStateAction<ProviderFormState>>;
+  testModel: string;
+  setTestModel: Dispatch<SetStateAction<string>>;
+  testStatus: TestStatus;
+  setTestStatus: Dispatch<SetStateAction<TestStatus>>;
+  testMessage: string;
+  setTestMessage: Dispatch<SetStateAction<string>>;
+  availableModels: string[];
+  handleBack: () => void;
+  handleSave: () => Promise<void>;
+  mergeDiscoveredModels: (selectedModels: ModelInfo[]) => void;
+};
+
+const buildEmptyForm = (): ProviderFormState => ({
+  apiKey: '',
+  prefix: '',
+  baseUrl: '',
+  proxyUrl: '',
+  headers: [],
+  models: [],
+  excludedModels: [],
+  modelEntries: [{ name: '', alias: '' }],
+  excludedText: '',
+});
+
+const parseIndexParam = (value: string | undefined) => {
+  if (!value) return null;
+  const parsed = Number.parseInt(value, 10);
+  return Number.isFinite(parsed) ? parsed : null;
+};
+
+const getErrorMessage = (err: unknown) => {
+  if (err instanceof Error) return err.message;
+  if (typeof err === 'string') return err;
+  return '';
+};
+
+export function AiProvidersClaudeEditLayout() {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const { showNotification } = useNotificationStore();
+
+  const params = useParams<{ index?: string }>();
+  const hasIndexParam = typeof params.index === 'string';
+  const editIndex = useMemo(() => parseIndexParam(params.index), [params.index]);
+  const invalidIndexParam = hasIndexParam && editIndex === null;
+
+  const connectionStatus = useAuthStore((state) => state.connectionStatus);
+  const disableControls = connectionStatus !== 'connected';
+
+  const config = useConfigStore((state) => state.config);
+  const fetchConfig = useConfigStore((state) => state.fetchConfig);
+  const isCacheValid = useConfigStore((state) => state.isCacheValid);
+  const updateConfigValue = useConfigStore((state) => state.updateConfigValue);
+  const clearCache = useConfigStore((state) => state.clearCache);
+
+  const [configs, setConfigs] = useState<ProviderKeyConfig[]>(() => config?.claudeApiKeys ?? []);
+  const [loading, setLoading] = useState(() => !isCacheValid('claude-api-key'));
+  const [saving, setSaving] = useState(false);
+  const [form, setForm] = useState<ProviderFormState>(() => buildEmptyForm());
+  const [testModel, setTestModel] = useState('');
+  const [testStatus, setTestStatus] = useState<TestStatus>('idle');
+  const [testMessage, setTestMessage] = useState('');
+
+  const initialData = useMemo(() => {
+    if (editIndex === null) return undefined;
+    return configs[editIndex];
+  }, [configs, editIndex]);
+
+  const invalidIndex = editIndex !== null && !initialData;
+
+  const availableModels = useMemo(
+    () => form.modelEntries.map((entry) => entry.name.trim()).filter(Boolean),
+    [form.modelEntries]
+  );
+
+  const handleBack = useCallback(() => {
+    const state = location.state as LocationState;
+    if (state?.fromAiProviders) {
+      navigate(-1);
+      return;
+    }
+    navigate('/ai-providers', { replace: true });
+  }, [location.state, navigate]);
+
+  useEffect(() => {
+    let cancelled = false;
+    const hasValidCache = isCacheValid('claude-api-key');
+    if (!hasValidCache) {
+      setLoading(true);
+    }
+
+    fetchConfig('claude-api-key')
+      .then((value) => {
+        if (cancelled) return;
+        setConfigs(Array.isArray(value) ? (value as ProviderKeyConfig[]) : []);
+      })
+      .catch((err: unknown) => {
+        if (cancelled) return;
+        const message = getErrorMessage(err) || t('notification.refresh_failed');
+        showNotification(`${t('notification.load_failed')}: ${message}`, 'error');
+      })
+      .finally(() => {
+        if (cancelled) return;
+        setLoading(false);
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [fetchConfig, isCacheValid, showNotification, t]);
+
+  useEffect(() => {
+    if (loading) return;
+
+    if (initialData) {
+      setForm({
+        ...initialData,
+        headers: headersToEntries(initialData.headers),
+        modelEntries: modelsToEntries(initialData.models),
+        excludedText: excludedModelsToText(initialData.excludedModels),
+      });
+      return;
+    }
+
+    setForm(buildEmptyForm());
+  }, [initialData, loading]);
+
+  useEffect(() => {
+    if (loading) return;
+
+    if (availableModels.length === 0) {
+      if (testModel) {
+        setTestModel('');
+        setTestStatus('idle');
+        setTestMessage('');
+      }
+      return;
+    }
+
+    if (!testModel || !availableModels.includes(testModel)) {
+      setTestModel(availableModels[0]);
+      setTestStatus('idle');
+      setTestMessage('');
+    }
+  }, [availableModels, loading, testModel]);
+
+  const mergeDiscoveredModels = useCallback(
+    (selectedModels: ModelInfo[]) => {
+      if (!selectedModels.length) return;
+
+      let addedCount = 0;
+      setForm((prev) => {
+        const mergedMap = new Map<string, ModelEntry>();
+        prev.modelEntries.forEach((entry) => {
+          const name = entry.name.trim();
+          if (!name) return;
+          mergedMap.set(name, { name, alias: entry.alias?.trim() || '' });
+        });
+
+        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());
+        return {
+          ...prev,
+          modelEntries: mergedEntries.length ? mergedEntries : [{ name: '', alias: '' }],
+        };
+      });
+
+      if (addedCount > 0) {
+        showNotification(t('ai_providers.claude_models_fetch_added', { count: addedCount }), 'success');
+      }
+    },
+    [showNotification, t]
+  );
+
+  const handleSave = useCallback(async () => {
+    const canSave = !disableControls && !saving && !loading && !invalidIndexParam && !invalidIndex;
+    if (!canSave) return;
+
+    setSaving(true);
+    try {
+      const payload: ProviderKeyConfig = {
+        apiKey: form.apiKey.trim(),
+        prefix: form.prefix?.trim() || undefined,
+        baseUrl: (form.baseUrl ?? '').trim() || undefined,
+        proxyUrl: form.proxyUrl?.trim() || undefined,
+        headers: buildHeaderObject(form.headers),
+        models: form.modelEntries
+          .map((entry) => {
+            const name = entry.name.trim();
+            if (!name) return null;
+            const alias = entry.alias.trim();
+            return { name, alias: alias || name };
+          })
+          .filter(Boolean) as ProviderKeyConfig['models'],
+        excludedModels: parseExcludedModels(form.excludedText),
+      };
+
+      const nextList =
+        editIndex !== null
+          ? configs.map((item, idx) => (idx === editIndex ? payload : item))
+          : [...configs, payload];
+
+      await providersApi.saveClaudeConfigs(nextList);
+      setConfigs(nextList);
+      updateConfigValue('claude-api-key', nextList);
+      clearCache('claude-api-key');
+      showNotification(
+        editIndex !== null ? t('notification.claude_config_updated') : t('notification.claude_config_added'),
+        'success'
+      );
+      handleBack();
+    } catch (err: unknown) {
+      showNotification(`${t('notification.update_failed')}: ${getErrorMessage(err)}`, 'error');
+    } finally {
+      setSaving(false);
+    }
+  }, [
+    clearCache,
+    configs,
+    disableControls,
+    editIndex,
+    form,
+    handleBack,
+    invalidIndex,
+    invalidIndexParam,
+    loading,
+    saving,
+    showNotification,
+    t,
+    updateConfigValue,
+  ]);
+
+  return (
+    <Outlet
+      context={{
+        hasIndexParam,
+        editIndex,
+        invalidIndexParam,
+        invalidIndex,
+        disableControls,
+        loading,
+        saving,
+        form,
+        setForm,
+        testModel,
+        setTestModel,
+        testStatus,
+        setTestStatus,
+        testMessage,
+        setTestMessage,
+        availableModels,
+        handleBack,
+        handleSave,
+        mergeDiscoveredModels,
+      } satisfies ClaudeEditOutletContext}
+    />
+  );
+}
--- a/src/pages/AiProvidersClaudeEditPage.tsx
+++ b/src/pages/AiProvidersClaudeEditPage.tsx
@@ -1,88 +1,75 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { useLocation, useNavigate, useParams } from 'react-router-dom';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useNavigate, useOutletContext } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { Card } from '@/components/ui/Card';
 import { Button } from '@/components/ui/Button';
 import { Input } from '@/components/ui/Input';
+import { Select } from '@/components/ui/Select';
 import { HeaderInputList } from '@/components/ui/HeaderInputList';
 import { ModelInputList } from '@/components/ui/ModelInputList';
-import { modelsToEntries } from '@/components/ui/modelInputListUtils';
 import { useEdgeSwipeBack } from '@/hooks/useEdgeSwipeBack';
 import { SecondaryScreenShell } from '@/components/common/SecondaryScreenShell';
-import { providersApi } from '@/services/api';
-import { useAuthStore, useConfigStore, useNotificationStore } from '@/stores';
-import type { ProviderKeyConfig } from '@/types';
-import { buildHeaderObject, headersToEntries } from '@/utils/headers';
-import { excludedModelsToText, parseExcludedModels } from '@/components/providers/utils';
-import type { ProviderFormState } from '@/components/providers';
+import { apiCallApi, getApiCallErrorMessage } from '@/services/api';
+import { useNotificationStore } from '@/stores';
+import { buildHeaderObject } from '@/utils/headers';
+import { buildClaudeMessagesEndpoint } from '@/components/providers/utils';
+import type { ClaudeEditOutletContext } from './AiProvidersClaudeEditLayout';
+import styles from './AiProvidersPage.module.scss';
 import layoutStyles from './AiProvidersEditLayout.module.scss';

-type LocationState = { fromAiProviders?: boolean } | null;
+const CLAUDE_TEST_TIMEOUT_MS = 30_000;
+const DEFAULT_ANTHROPIC_VERSION = '2023-06-01';

-const buildEmptyForm = (): ProviderFormState => ({
-  apiKey: '',
-  prefix: '',
-  baseUrl: '',
-  proxyUrl: '',
-  headers: [],
-  models: [],
-  excludedModels: [],
-  modelEntries: [{ name: '', alias: '' }],
-  excludedText: '',
-});
+const getErrorMessage = (err: unknown) => {
+  if (err instanceof Error) return err.message;
+  if (typeof err === 'string') return err;
+  return '';
+};

-const parseIndexParam = (value: string | undefined) => {
-  if (!value) return null;
-  const parsed = Number.parseInt(value, 10);
-  return Number.isFinite(parsed) ? parsed : null;
+const hasHeader = (headers: Record<string, string>, name: string) => {
+  const target = name.toLowerCase();
+  return Object.keys(headers).some((key) => key.toLowerCase() === target);
+};
+
+const resolveBearerTokenFromAuthorization = (headers: Record<string, string>): string => {
+  const entry = Object.entries(headers).find(([key]) => key.toLowerCase() === 'authorization');
+  if (!entry) return '';
+  const value = String(entry[1] ?? '').trim();
+  if (!value) return '';
+  const match = value.match(/^Bearer\s+(.+)$/i);
+  return match?.[1]?.trim() || '';
 };

 export function AiProvidersClaudeEditPage() {
  const { t } = useTranslation();
  const navigate = useNavigate();
-  const location = useLocation();
-  const params = useParams<{ index?: string }>();
-
  const { showNotification } = useNotificationStore();
-  const connectionStatus = useAuthStore((state) => state.connectionStatus);
-  const disableControls = connectionStatus !== 'connected';
+  const {
+    hasIndexParam,
+    invalidIndexParam,
+    invalidIndex,
+    disableControls,
+    loading,
+    saving,
+    form,
+    setForm,
+    testModel,
+    setTestModel,
+    testStatus,
+    setTestStatus,
+    testMessage,
+    setTestMessage,
+    availableModels,
+    handleBack,
+    handleSave,
+  } = useOutletContext<ClaudeEditOutletContext>();

-  const fetchConfig = useConfigStore((state) => state.fetchConfig);
-  const updateConfigValue = useConfigStore((state) => state.updateConfigValue);
-  const clearCache = useConfigStore((state) => state.clearCache);
-
-  const [configs, setConfigs] = useState<ProviderKeyConfig[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [saving, setSaving] = useState(false);
-  const [error, setError] = useState('');
-  const [form, setForm] = useState<ProviderFormState>(() => buildEmptyForm());
-
-  const hasIndexParam = typeof params.index === 'string';
-  const editIndex = useMemo(() => parseIndexParam(params.index), [params.index]);
-  const invalidIndexParam = hasIndexParam && editIndex === null;
-
-  const initialData = useMemo(() => {
-    if (editIndex === null) return undefined;
-    return configs[editIndex];
-  }, [configs, editIndex]);
-
-  const invalidIndex = editIndex !== null && !initialData;
-
-  const title =
-    editIndex !== null
-      ? t('ai_providers.claude_edit_modal_title')
-      : t('ai_providers.claude_add_modal_title');
-
-  const handleBack = useCallback(() => {
-    const state = location.state as LocationState;
-    if (state?.fromAiProviders) {
-      navigate(-1);
-      return;
-    }
-    navigate('/ai-providers', { replace: true });
-  }, [location.state, navigate]);
+  const title = hasIndexParam
+    ? t('ai_providers.claude_edit_modal_title')
+    : t('ai_providers.claude_add_modal_title');

  const swipeRef = useEdgeSwipeBack({ onBack: handleBack });
+  const [isTesting, setIsTesting] = useState(false);

  useEffect(() => {
    const handleKeyDown = (event: KeyboardEvent) => {
@@ -94,101 +81,163 @@ export function AiProvidersClaudeEditPage() {
    return () => window.removeEventListener('keydown', handleKeyDown);
  }, [handleBack]);

-  useEffect(() => {
-    let cancelled = false;
-    setLoading(true);
-    setError('');
+  const canSave =
+    !disableControls && !loading && !saving && !invalidIndexParam && !invalidIndex && !isTesting;

-    fetchConfig('claude-api-key')
-      .then((value) => {
-        if (cancelled) return;
-        setConfigs(Array.isArray(value) ? (value as ProviderKeyConfig[]) : []);
-      })
-      .catch((err: unknown) => {
-        if (cancelled) return;
-        const message = err instanceof Error ? err.message : '';
-        setError(message || t('notification.refresh_failed'));
-      })
-      .finally(() => {
-        if (cancelled) return;
-        setLoading(false);
+  const modelSelectOptions = useMemo(() => {
+    const seen = new Set<string>();
+    return form.modelEntries.reduce<Array<{ value: string; label: string }>>((acc, entry) => {
+      const name = entry.name.trim();
+      if (!name || seen.has(name)) return acc;
+      seen.add(name);
+      const alias = entry.alias.trim();
+      acc.push({
+        value: name,
+        label: alias && alias !== name ? `${name} (${alias})` : name,
      });
+      return acc;
+    }, []);
+  }, [form.modelEntries]);

-    return () => {
-      cancelled = true;
-    };
-  }, [fetchConfig, t]);
+  const connectivityConfigSignature = useMemo(() => {
+    const headersSignature = form.headers
+      .map((entry) => `${entry.key.trim()}:${entry.value.trim()}`)
+      .join('|');
+    const modelsSignature = form.modelEntries
+      .map((entry) => `${entry.name.trim()}:${entry.alias.trim()}`)
+      .join('|');
+    return [
+      form.apiKey.trim(),
+      form.baseUrl?.trim() ?? '',
+      testModel.trim(),
+      headersSignature,
+      modelsSignature,
+    ].join('||');
+  }, [form.apiKey, form.baseUrl, form.headers, form.modelEntries, testModel]);
+
+  const previousConnectivityConfigRef = useRef(connectivityConfigSignature);

  useEffect(() => {
-    if (loading) return;
-
-    if (initialData) {
-      setForm({
-        ...initialData,
-        headers: headersToEntries(initialData.headers),
-        modelEntries: modelsToEntries(initialData.models),
-        excludedText: excludedModelsToText(initialData.excludedModels),
-      });
+    if (previousConnectivityConfigRef.current === connectivityConfigSignature) {
      return;
    }
-    setForm(buildEmptyForm());
-  }, [initialData, loading]);
+    previousConnectivityConfigRef.current = connectivityConfigSignature;
+    setTestStatus('idle');
+    setTestMessage('');
+  }, [connectivityConfigSignature, setTestMessage, setTestStatus]);

-  const canSave = !disableControls && !saving && !loading && !invalidIndexParam && !invalidIndex;
+  const openClaudeModelDiscovery = () => {
+    navigate('models');
+  };

-  const handleSave = useCallback(async () => {
-    if (!canSave) return;
+  const runClaudeConnectivityTest = useCallback(async () => {
+    if (isTesting) return;
+
+    const modelName = testModel.trim() || availableModels[0] || '';
+    if (!modelName) {
+      const message = t('ai_providers.claude_test_model_required');
+      setTestStatus('error');
+      setTestMessage(message);
+      showNotification(message, 'error');
+      return;
+    }
+
+    const customHeaders = buildHeaderObject(form.headers);
+    const apiKey = form.apiKey.trim();
+    const hasApiKeyHeader = hasHeader(customHeaders, 'x-api-key');
+    const apiKeyFromAuthorization = resolveBearerTokenFromAuthorization(customHeaders);
+    const resolvedApiKey = apiKey || apiKeyFromAuthorization;
+
+    if (!resolvedApiKey && !hasApiKeyHeader) {
+      const message = t('ai_providers.claude_test_key_required');
+      setTestStatus('error');
+      setTestMessage(message);
+      showNotification(message, 'error');
+      return;
+    }
+
+    const endpoint = buildClaudeMessagesEndpoint(form.baseUrl ?? '');
+    if (!endpoint) {
+      const message = t('ai_providers.claude_test_endpoint_invalid');
+      setTestStatus('error');
+      setTestMessage(message);
+      showNotification(message, 'error');
+      return;
+    }
+
+    const headers: Record<string, string> = {
+      'Content-Type': 'application/json',
+      ...customHeaders,
+    };
+
+    if (!hasHeader(headers, 'anthropic-version')) {
+      headers['anthropic-version'] = DEFAULT_ANTHROPIC_VERSION;
+    }
+    if (!Object.prototype.hasOwnProperty.call(headers, 'Anthropic-Version')) {
+      headers['Anthropic-Version'] = headers['anthropic-version'] ?? DEFAULT_ANTHROPIC_VERSION;
+    }
+
+    if (!hasApiKeyHeader && resolvedApiKey) {
+      headers['x-api-key'] = resolvedApiKey;
+    }
+    if (!Object.prototype.hasOwnProperty.call(headers, 'X-Api-Key') && resolvedApiKey) {
+      headers['X-Api-Key'] = resolvedApiKey;
+    }
+
+    setIsTesting(true);
+    setTestStatus('loading');
+    setTestMessage(t('ai_providers.claude_test_running'));

-    setSaving(true);
-    setError('');
    try {
-      const payload: ProviderKeyConfig = {
-        apiKey: form.apiKey.trim(),
-        prefix: form.prefix?.trim() || undefined,
-        baseUrl: (form.baseUrl ?? '').trim() || undefined,
-        proxyUrl: form.proxyUrl?.trim() || undefined,
-        headers: buildHeaderObject(form.headers),
-        models: form.modelEntries
-          .map((entry) => {
-            const name = entry.name.trim();
-            if (!name) return null;
-            const alias = entry.alias.trim();
-            return { name, alias: alias || name };
-          })
-          .filter(Boolean) as ProviderKeyConfig['models'],
-        excludedModels: parseExcludedModels(form.excludedText),
-      };
-
-      const nextList =
-        editIndex !== null
-          ? configs.map((item, idx) => (idx === editIndex ? payload : item))
-          : [...configs, payload];
-
-      await providersApi.saveClaudeConfigs(nextList);
-      updateConfigValue('claude-api-key', nextList);
-      clearCache('claude-api-key');
-      showNotification(
-        editIndex !== null ? t('notification.claude_config_updated') : t('notification.claude_config_added'),
-        'success'
+      const result = await apiCallApi.request(
+        {
+          method: 'POST',
+          url: endpoint,
+          header: headers,
+          data: JSON.stringify({
+            model: modelName,
+            max_tokens: 8,
+            messages: [{ role: 'user', content: 'Hi' }],
+          }),
+        },
+        { timeout: CLAUDE_TEST_TIMEOUT_MS }
      );
-      handleBack();
+
+      if (result.statusCode < 200 || result.statusCode >= 300) {
+        throw new Error(getApiCallErrorMessage(result));
+      }
+
+      const message = t('ai_providers.claude_test_success');
+      setTestStatus('success');
+      setTestMessage(message);
+      showNotification(message, 'success');
    } catch (err: unknown) {
-      const message = err instanceof Error ? err.message : '';
-      setError(message);
-      showNotification(`${t('notification.update_failed')}: ${message}`, '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');
+      const resolvedMessage = isTimeout
+        ? t('ai_providers.claude_test_timeout', { seconds: CLAUDE_TEST_TIMEOUT_MS / 1000 })
+        : `${t('ai_providers.claude_test_failed')}: ${message || t('common.unknown_error')}`;
+      setTestStatus('error');
+      setTestMessage(resolvedMessage);
+      showNotification(resolvedMessage, 'error');
    } finally {
-      setSaving(false);
+      setIsTesting(false);
    }
  }, [
-    canSave,
-    clearCache,
-    configs,
-    editIndex,
-    form,
-    handleBack,
+    availableModels,
+    form.apiKey,
+    form.baseUrl,
+    form.headers,
+    isTesting,
+    setTestMessage,
+    setTestStatus,
    showNotification,
    t,
-    updateConfigValue,
+    testModel,
  ]);

  return (
@@ -200,7 +249,7 @@ export function AiProvidersClaudeEditPage() {
      backLabel={t('common.back')}
      backAriaLabel={t('common.back')}
      rightAction={
-        <Button size="sm" onClick={handleSave} loading={saving} disabled={!canSave}>
+        <Button size="sm" onClick={() => void handleSave()} loading={saving} disabled={!canSave}>
          {t('common.save')}
        </Button>
      }
@@ -208,16 +257,15 @@ export function AiProvidersClaudeEditPage() {
      loadingLabel={t('common.loading')}
    >
      <Card>
-        {error && <div className="error-box">{error}</div>}
        {invalidIndexParam || invalidIndex ? (
-          <div className="hint">{t('common.invalid_provider_index')}</div>
+          <div className={styles.sectionHint}>{t('common.invalid_provider_index')}</div>
        ) : (
-          <>
+          <div className={styles.openaiEditForm}>
            <Input
              label={t('ai_providers.claude_add_modal_key_label')}
              value={form.apiKey}
              onChange={(e) => setForm((prev) => ({ ...prev, apiKey: e.target.value }))}
-              disabled={disableControls || saving}
+              disabled={saving || disableControls || isTesting}
            />
            <Input
              label={t('ai_providers.prefix_label')}
@@ -225,19 +273,19 @@ export function AiProvidersClaudeEditPage() {
              value={form.prefix ?? ''}
              onChange={(e) => setForm((prev) => ({ ...prev, prefix: e.target.value }))}
              hint={t('ai_providers.prefix_hint')}
-              disabled={disableControls || saving}
+              disabled={saving || disableControls || isTesting}
            />
            <Input
              label={t('ai_providers.claude_add_modal_url_label')}
              value={form.baseUrl ?? ''}
              onChange={(e) => setForm((prev) => ({ ...prev, baseUrl: e.target.value }))}
-              disabled={disableControls || saving}
+              disabled={saving || disableControls || isTesting}
            />
            <Input
              label={t('ai_providers.claude_add_modal_proxy_label')}
              value={form.proxyUrl ?? ''}
              onChange={(e) => setForm((prev) => ({ ...prev, proxyUrl: e.target.value }))}
-              disabled={disableControls || saving}
+              disabled={saving || disableControls || isTesting}
            />
            <HeaderInputList
              entries={form.headers}
@@ -247,21 +295,117 @@ export function AiProvidersClaudeEditPage() {
              valuePlaceholder={t('common.custom_headers_value_placeholder')}
              removeButtonTitle={t('common.delete')}
              removeButtonAriaLabel={t('common.delete')}
-              disabled={disableControls || saving}
+              disabled={saving || disableControls || isTesting}
            />
-            <div className="form-group">
-              <label>{t('ai_providers.claude_models_label')}</label>
+
+            <div className={styles.modelConfigSection}>
+              <div className={styles.modelConfigHeader}>
+                <label className={styles.modelConfigTitle}>{t('ai_providers.claude_models_label')}</label>
+                <div className={styles.modelConfigToolbar}>
+                  <Button
+                    variant="secondary"
+                    size="sm"
+                    onClick={() =>
+                      setForm((prev) => ({
+                        ...prev,
+                        modelEntries: [...prev.modelEntries, { name: '', alias: '' }],
+                      }))
+                    }
+                    disabled={saving || disableControls || isTesting}
+                  >
+                    {t('ai_providers.claude_models_add_btn')}
+                  </Button>
+                  <Button
+                    variant="secondary"
+                    size="sm"
+                    onClick={openClaudeModelDiscovery}
+                    disabled={saving || disableControls || isTesting}
+                  >
+                    {t('ai_providers.claude_models_fetch_button')}
+                  </Button>
+                </div>
+              </div>
+
+              <div className={styles.sectionHint}>{t('ai_providers.claude_models_hint')}</div>
+
              <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={saving || disableControls || isTesting}
+                hideAddButton
+                className={styles.modelInputList}
+                rowClassName={styles.modelInputRow}
+                inputClassName={styles.modelInputField}
+                removeButtonClassName={styles.modelRowRemoveButton}
                removeButtonTitle={t('common.delete')}
                removeButtonAriaLabel={t('common.delete')}
-                disabled={disableControls || saving}
              />
+
+              <div className={styles.modelTestPanel}>
+                <div className={styles.modelTestMeta}>
+                  <label className={styles.modelTestLabel}>{t('ai_providers.claude_test_title')}</label>
+                  <span className={styles.modelTestHint}>{t('ai_providers.claude_test_hint')}</span>
+                </div>
+                <div className={styles.modelTestControls}>
+                  <Select
+                    value={testModel}
+                    options={modelSelectOptions}
+                    onChange={(value) => {
+                      setTestModel(value);
+                      setTestStatus('idle');
+                      setTestMessage('');
+                    }}
+                    placeholder={
+                      availableModels.length
+                        ? t('ai_providers.claude_test_select_placeholder')
+                        : t('ai_providers.claude_test_select_empty')
+                    }
+                    className={styles.openaiTestSelect}
+                    ariaLabel={t('ai_providers.claude_test_title')}
+                    disabled={
+                      saving ||
+                      disableControls ||
+                      isTesting ||
+                      testStatus === 'loading' ||
+                      availableModels.length === 0
+                    }
+                  />
+                  <Button
+                    variant={testStatus === 'error' ? 'danger' : 'secondary'}
+                    size="sm"
+                    onClick={() => void runClaudeConnectivityTest()}
+                    loading={testStatus === 'loading'}
+                    disabled={
+                      saving ||
+                      disableControls ||
+                      isTesting ||
+                      testStatus === 'loading' ||
+                      availableModels.length === 0
+                    }
+                    className={styles.modelTestAllButton}
+                  >
+                    {t('ai_providers.claude_test_action')}
+                  </Button>
+                </div>
+              </div>
+
+              {testMessage && (
+                <div
+                  className={`status-badge ${
+                    testStatus === 'error'
+                      ? 'error'
+                      : testStatus === 'success'
+                        ? 'success'
+                        : 'muted'
+                  }`}
+                >
+                  {testMessage}
+                </div>
+              )}
            </div>
+
            <div className="form-group">
              <label>{t('ai_providers.excluded_models_label')}</label>
              <textarea
@@ -270,11 +414,11 @@ export function AiProvidersClaudeEditPage() {
                value={form.excludedText}
                onChange={(e) => setForm((prev) => ({ ...prev, excludedText: e.target.value }))}
                rows={4}
-                disabled={disableControls || saving}
+                disabled={saving || disableControls || isTesting}
              />
              <div className="hint">{t('ai_providers.excluded_models_hint')}</div>
            </div>
-          </>
+          </div>
        )}
      </Card>
    </SecondaryScreenShell>
--- a/src/pages/AiProvidersClaudeModelsPage.tsx
+++ b/src/pages/AiProvidersClaudeModelsPage.tsx
@@ -0,0 +1,248 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useNavigate, useOutletContext } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { Button } from '@/components/ui/Button';
+import { Card } from '@/components/ui/Card';
+import { Input } from '@/components/ui/Input';
+import { SecondaryScreenShell } from '@/components/common/SecondaryScreenShell';
+import { useEdgeSwipeBack } from '@/hooks/useEdgeSwipeBack';
+import { modelsApi } from '@/services/api';
+import type { ModelInfo } from '@/utils/models';
+import { buildHeaderObject } from '@/utils/headers';
+import type { ClaudeEditOutletContext } from './AiProvidersClaudeEditLayout';
+import styles from './AiProvidersPage.module.scss';
+import layoutStyles from './AiProvidersEditLayout.module.scss';
+
+const getErrorMessage = (err: unknown) => {
+  if (err instanceof Error) return err.message;
+  if (typeof err === 'string') return err;
+  return '';
+};
+
+export function AiProvidersClaudeModelsPage() {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const {
+    disableControls,
+    loading: initialLoading,
+    saving,
+    form,
+    mergeDiscoveredModels,
+  } = useOutletContext<ClaudeEditOutletContext>();
+
+  const [endpoint, setEndpoint] = useState('');
+  const [models, setModels] = useState<ModelInfo[]>([]);
+  const [fetching, setFetching] = useState(false);
+  const [error, setError] = useState('');
+  const [search, setSearch] = useState('');
+  const [selected, setSelected] = useState<Set<string>>(new Set());
+  const autoFetchSignatureRef = useRef<string>('');
+
+  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 fetchClaudeModelDiscovery = useCallback(async () => {
+    setFetching(true);
+    setError('');
+    const headerObject = buildHeaderObject(form.headers);
+    try {
+      const list = await modelsApi.fetchClaudeModelsViaApiCall(
+        form.baseUrl ?? '',
+        form.apiKey.trim() || undefined,
+        headerObject
+      );
+      setModels(list);
+    } catch (err: unknown) {
+      setModels([]);
+      const message = getErrorMessage(err);
+      const hasCustomXApiKey = Object.keys(headerObject).some(
+        (key) => key.toLowerCase() === 'x-api-key'
+      );
+      const hasAuthorization = Object.keys(headerObject).some(
+        (key) => key.toLowerCase() === 'authorization'
+      );
+      const shouldAttachDiag =
+        message.toLowerCase().includes('x-api-key') || message.includes('401');
+      const diag = shouldAttachDiag
+        ? ` [diag: apiKeyField=${form.apiKey.trim() ? 'yes' : 'no'}, customXApiKey=${
+            hasCustomXApiKey ? 'yes' : 'no'
+          }, customAuthorization=${hasAuthorization ? 'yes' : 'no'}]`
+        : '';
+      setError(`${t('ai_providers.claude_models_fetch_error')}: ${message}${diag}`);
+    } finally {
+      setFetching(false);
+    }
+  }, [form.apiKey, form.baseUrl, form.headers, t]);
+
+  useEffect(() => {
+    if (initialLoading) return;
+
+    const nextEndpoint = modelsApi.buildClaudeModelsEndpoint(form.baseUrl ?? '');
+    setEndpoint(nextEndpoint);
+    setModels([]);
+    setSearch('');
+    setSelected(new Set());
+    setError('');
+
+    const headerObject = buildHeaderObject(form.headers);
+    const hasCustomXApiKey = Object.keys(headerObject).some(
+      (key) => key.toLowerCase() === 'x-api-key'
+    );
+    const hasAuthorization = Object.keys(headerObject).some(
+      (key) => key.toLowerCase() === 'authorization'
+    );
+    const hasApiKeyField = Boolean(form.apiKey.trim());
+    const canAutoFetch = hasApiKeyField || hasCustomXApiKey || hasAuthorization;
+
+    // Avoid firing a guaranteed 401 on initial render (common while the parent form is still
+    // initializing), and avoid duplicate auto-fetches (e.g. React StrictMode in dev).
+    if (!canAutoFetch) return;
+
+    const headerSignature = Object.entries(headerObject)
+      .sort(([a], [b]) => a.toLowerCase().localeCompare(b.toLowerCase()))
+      .map(([key, value]) => `${key}:${value}`)
+      .join('|');
+    const signature = `${nextEndpoint}||${form.apiKey.trim()}||${headerSignature}`;
+    if (autoFetchSignatureRef.current === signature) return;
+    autoFetchSignatureRef.current = signature;
+
+    void fetchClaudeModelDiscovery();
+  }, [fetchClaudeModelDiscovery, form.apiKey, form.baseUrl, form.headers, initialLoading]);
+
+  const handleBack = useCallback(() => {
+    navigate(-1);
+  }, [navigate]);
+
+  const swipeRef = useEdgeSwipeBack({ onBack: handleBack });
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        handleBack();
+      }
+    };
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [handleBack]);
+
+  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));
+    if (selectedModels.length) {
+      mergeDiscoveredModels(selectedModels);
+    }
+    handleBack();
+  };
+
+  const canApply = !disableControls && !saving && !fetching;
+
+  return (
+    <SecondaryScreenShell
+      ref={swipeRef}
+      contentClassName={layoutStyles.content}
+      title={t('ai_providers.claude_models_fetch_title')}
+      onBack={handleBack}
+      backLabel={t('common.back')}
+      backAriaLabel={t('common.back')}
+      rightAction={
+        <Button size="sm" onClick={handleApply} disabled={!canApply}>
+          {t('ai_providers.claude_models_fetch_apply')}
+        </Button>
+      }
+      isLoading={initialLoading}
+      loadingLabel={t('common.loading')}
+    >
+      <Card>
+        <div className={styles.openaiModelsContent}>
+          <div className={styles.sectionHint}>{t('ai_providers.claude_models_fetch_hint')}</div>
+          <div className={styles.openaiModelsEndpointSection}>
+            <label className={styles.openaiModelsEndpointLabel}>
+              {t('ai_providers.claude_models_fetch_url_label')}
+            </label>
+            <div className={styles.openaiModelsEndpointControls}>
+              <input
+                className={`input ${styles.openaiModelsEndpointInput}`}
+                readOnly
+                value={endpoint}
+              />
+              <Button
+                variant="secondary"
+                size="sm"
+                onClick={() => void fetchClaudeModelDiscovery()}
+                loading={fetching}
+                disabled={disableControls || saving}
+              >
+                {t('ai_providers.claude_models_fetch_refresh')}
+              </Button>
+            </div>
+          </div>
+          <Input
+            label={t('ai_providers.claude_models_search_label')}
+            placeholder={t('ai_providers.claude_models_search_placeholder')}
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            disabled={fetching}
+          />
+          {error && <div className="error-box">{error}</div>}
+          {fetching ? (
+            <div className={styles.sectionHint}>{t('ai_providers.claude_models_fetch_loading')}</div>
+          ) : models.length === 0 ? (
+            <div className={styles.sectionHint}>{t('ai_providers.claude_models_fetch_empty')}</div>
+          ) : filteredModels.length === 0 ? (
+            <div className={styles.sectionHint}>{t('ai_providers.claude_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>
+          )}
+        </div>
+      </Card>
+    </SecondaryScreenShell>
+  );
+}
--- a/src/router/MainRoutes.tsx
+++ b/src/router/MainRoutes.tsx
@@ -2,7 +2,9 @@ import { Navigate, useRoutes, type Location } from 'react-router-dom';
 import { DashboardPage } from '@/pages/DashboardPage';
 import { AiProvidersPage } from '@/pages/AiProvidersPage';
 import { AiProvidersAmpcodeEditPage } from '@/pages/AiProvidersAmpcodeEditPage';
+import { AiProvidersClaudeEditLayout } from '@/pages/AiProvidersClaudeEditLayout';
 import { AiProvidersClaudeEditPage } from '@/pages/AiProvidersClaudeEditPage';
+import { AiProvidersClaudeModelsPage } from '@/pages/AiProvidersClaudeModelsPage';
 import { AiProvidersCodexEditPage } from '@/pages/AiProvidersCodexEditPage';
 import { AiProvidersGeminiEditPage } from '@/pages/AiProvidersGeminiEditPage';
 import { AiProvidersOpenAIEditLayout } from '@/pages/AiProvidersOpenAIEditLayout';
@@ -28,8 +30,22 @@ const mainRoutes = [
  { path: '/ai-providers/gemini/:index', element: <AiProvidersGeminiEditPage /> },
  { path: '/ai-providers/codex/new', element: <AiProvidersCodexEditPage /> },
  { path: '/ai-providers/codex/:index', element: <AiProvidersCodexEditPage /> },
-  { path: '/ai-providers/claude/new', element: <AiProvidersClaudeEditPage /> },
-  { path: '/ai-providers/claude/:index', element: <AiProvidersClaudeEditPage /> },
+  {
+    path: '/ai-providers/claude/new',
+    element: <AiProvidersClaudeEditLayout />,
+    children: [
+      { index: true, element: <AiProvidersClaudeEditPage /> },
+      { path: 'models', element: <AiProvidersClaudeModelsPage /> },
+    ],
+  },
+  {
+    path: '/ai-providers/claude/:index',
+    element: <AiProvidersClaudeEditLayout />,
+    children: [
+      { index: true, element: <AiProvidersClaudeEditPage /> },
+      { path: 'models', element: <AiProvidersClaudeModelsPage /> },
+    ],
+  },
  { path: '/ai-providers/vertex/new', element: <AiProvidersVertexEditPage /> },
  { path: '/ai-providers/vertex/:index', element: <AiProvidersVertexEditPage /> },
  {
--- a/src/services/api/models.ts
+++ b/src/services/api/models.ts
@@ -7,16 +7,56 @@ import { normalizeModelList } from '@/utils/models';
 import { normalizeApiBase } from '@/utils/connection';
 import { apiCallApi, getApiCallErrorMessage } from './apiCall';

+const DEFAULT_CLAUDE_BASE_URL = 'https://api.anthropic.com';
+const DEFAULT_ANTHROPIC_VERSION = '2023-06-01';
+const CLAUDE_MODELS_IN_FLIGHT = new Map<string, Promise<ReturnType<typeof normalizeModelList>>>();
+
+const buildRequestSignature = (url: string, headers: Record<string, string>) => {
+  const headerSignature = Object.entries(headers)
+    .sort(([a], [b]) => a.toLowerCase().localeCompare(b.toLowerCase()))
+    .map(([key, value]) => `${key}:${value}`)
+    .join('|');
+  return `${url}||${headerSignature}`;
+};
+
 const buildModelsEndpoint = (baseUrl: string): string => {
  const normalized = normalizeApiBase(baseUrl);
  if (!normalized) return '';
-  return `${normalized}/models`;
+  const trimmed = normalized.replace(/\/+$/g, '');
+  if (/\/models$/i.test(trimmed)) return trimmed;
+  return `${trimmed}/models`;
 };

 const buildV1ModelsEndpoint = (baseUrl: string): string => {
  const normalized = normalizeApiBase(baseUrl);
  if (!normalized) return '';
-  return `${normalized}/v1/models`;
+  const trimmed = normalized.replace(/\/+$/g, '');
+  if (/\/v1\/models$/i.test(trimmed)) return trimmed;
+  if (/\/v1$/i.test(trimmed)) return `${trimmed}/models`;
+  return `${trimmed}/v1/models`;
+};
+
+const buildClaudeModelsEndpoint = (baseUrl: string): string => {
+  const normalized = normalizeApiBase(baseUrl);
+  const fallback = normalized || DEFAULT_CLAUDE_BASE_URL;
+  let trimmed = fallback.replace(/\/+$/g, '');
+  trimmed = trimmed.replace(/\/v1\/models$/i, '');
+  trimmed = trimmed.replace(/\/v1(?:\/.*)?$/i, '');
+  return `${trimmed}/v1/models`;
+};
+
+const hasHeader = (headers: Record<string, string>, name: string) => {
+  const target = name.toLowerCase();
+  return Object.keys(headers).some((key) => key.toLowerCase() === target);
+};
+
+const resolveBearerTokenFromAuthorization = (headers: Record<string, string>): string => {
+  const entry = Object.entries(headers).find(([key]) => key.toLowerCase() === 'authorization');
+  if (!entry) return '';
+  const value = String(entry[1] ?? '').trim();
+  if (!value) return '';
+  const match = value.match(/^Bearer\s+(.+)$/i);
+  return match?.[1]?.trim() || '';
 };

 export const modelsApi = {
@@ -72,5 +112,63 @@ export const modelsApi = {

    const payload = result.body ?? result.bodyText;
    return normalizeModelList(payload, { dedupe: true });
-  }
+  },
+
+  buildClaudeModelsEndpoint(baseUrl: string) {
+    return buildClaudeModelsEndpoint(baseUrl);
+  },
+
+  /**
+   * Fetch Claude models from /v1/models via api-call.
+   * Anthropic requires `x-api-key` and `anthropic-version` headers.
+   */
+  async fetchClaudeModelsViaApiCall(
+    baseUrl: string,
+    apiKey?: string,
+    headers: Record<string, string> = {}
+  ) {
+    const endpoint = buildClaudeModelsEndpoint(baseUrl);
+    if (!endpoint) {
+      throw new Error('Invalid base url');
+    }
+
+    const resolvedHeaders = { ...headers };
+    let resolvedApiKey = String(apiKey ?? '').trim();
+    if (!resolvedApiKey && !hasHeader(resolvedHeaders, 'x-api-key')) {
+      resolvedApiKey = resolveBearerTokenFromAuthorization(resolvedHeaders);
+    }
+
+    if (resolvedApiKey && !hasHeader(resolvedHeaders, 'x-api-key')) {
+      resolvedHeaders['x-api-key'] = resolvedApiKey;
+    }
+    if (!hasHeader(resolvedHeaders, 'anthropic-version')) {
+      resolvedHeaders['anthropic-version'] = DEFAULT_ANTHROPIC_VERSION;
+    }
+
+    const signature = buildRequestSignature(endpoint, resolvedHeaders);
+    const existing = CLAUDE_MODELS_IN_FLIGHT.get(signature);
+    if (existing) return existing;
+
+    const request = (async () => {
+      const result = await apiCallApi.request({
+        method: 'GET',
+        url: endpoint,
+        header: Object.keys(resolvedHeaders).length ? resolvedHeaders : undefined
+      });
+
+      if (result.statusCode < 200 || result.statusCode >= 300) {
+        throw new Error(getApiCallErrorMessage(result));
+      }
+
+      const payload = result.body ?? result.bodyText;
+      return normalizeModelList(payload, { dedupe: true });
+    })();
+
+    CLAUDE_MODELS_IN_FLIGHT.set(signature, request);
+    try {
+      return await request;
+    } finally {
+      CLAUDE_MODELS_IN_FLIGHT.delete(signature);
+    }
+  },
 };