fix(ai-providers): gate Claude models input and refine excluded tag styles

src/i18n/locales/en.json

@@ -424,9 +424,10 @@
     "gemini_cli_oauth_title": "Gemini CLI OAuth",
     "gemini_cli_oauth_button": "Start Gemini CLI Login",
     "gemini_cli_oauth_hint": "Login to Google Gemini CLI service through OAuth flow, automatically obtain and save authentication files.",
-    "gemini_cli_project_id_label": "Google Cloud Project ID (Optional):",
+    "gemini_cli_project_id_label": "Google Cloud Project ID:",
-    "gemini_cli_project_id_placeholder": "Enter Google Cloud Project ID (optional)",
+    "gemini_cli_project_id_placeholder": "Enter Google Cloud Project ID",
-    "gemini_cli_project_id_hint": "If a project ID is specified, authentication information for that project will be used.",
+    "gemini_cli_project_id_hint": "Project ID is required for Gemini CLI OAuth.",
+    "gemini_cli_project_id_required": "Please enter a Google Cloud project ID.",
     "gemini_cli_oauth_url_label": "Authorization URL:",
     "gemini_cli_open_link": "Open Link",
     "gemini_cli_copy_link": "Copy Link",
@@ -446,6 +447,16 @@
     "qwen_oauth_status_error": "Authentication failed:",
     "qwen_oauth_start_error": "Failed to start Qwen OAuth:",
     "qwen_oauth_polling_error": "Failed to check authentication status:",
+    "oauth_callback_label": "Callback URL",
+    "oauth_callback_placeholder": "http://localhost:1455/auth/callback?code=...&state=...",
+    "oauth_callback_hint": "Remote browser mode: after the provider redirects to http://localhost:..., copy the full URL and submit it here.",
+    "oauth_callback_button": "Submit Callback URL",
+    "oauth_callback_required": "Please paste the full redirect URL first.",
+    "oauth_callback_success": "Callback URL submitted. Continue waiting for authentication.",
+    "oauth_callback_error": "Failed to submit callback URL:",
+    "oauth_callback_upgrade_hint": "Please update CLI Proxy API or check the connection.",
+    "oauth_callback_status_success": "Callback URL submitted, waiting for authentication...",
+    "oauth_callback_status_error": "Callback URL submission failed:",
     "missing_state": "Unable to retrieve authentication state parameter",
     "iflow_oauth_title": "iFlow OAuth",
     "iflow_oauth_button": "Start iFlow Login",

src/i18n/locales/zh-CN.json

@@ -424,9 +424,10 @@
     "gemini_cli_oauth_title": "Gemini CLI OAuth",
     "gemini_cli_oauth_button": "开始 Gemini CLI 登录",
     "gemini_cli_oauth_hint": "通过 OAuth 流程登录 Google Gemini CLI 服务，自动获取并保存认证文件。",
-    "gemini_cli_project_id_label": "Google Cloud 项目 ID (可选):",
+    "gemini_cli_project_id_label": "Google Cloud 项目 ID:",
-    "gemini_cli_project_id_placeholder": "输入 Google Cloud 项目 ID (可选)",
+    "gemini_cli_project_id_placeholder": "输入 Google Cloud 项目 ID",
-    "gemini_cli_project_id_hint": "如果指定了项目 ID，将使用该项目的认证信息。",
+    "gemini_cli_project_id_hint": "请填写项目 ID，用于 Gemini CLI OAuth 登录。",
+    "gemini_cli_project_id_required": "请填写 Google Cloud 项目 ID。",
     "gemini_cli_oauth_url_label": "授权链接:",
     "gemini_cli_open_link": "打开链接",
     "gemini_cli_copy_link": "复制链接",
@@ -446,6 +447,16 @@
     "qwen_oauth_status_error": "认证失败:",
     "qwen_oauth_start_error": "启动 Qwen OAuth 失败:",
     "qwen_oauth_polling_error": "检查认证状态失败:",
+    "oauth_callback_label": "回调 URL",
+    "oauth_callback_placeholder": "http://localhost:1455/auth/callback?code=...&state=...",
+    "oauth_callback_hint": "远程浏览器模式：当授权跳转到 http://localhost:... 后，复制完整 URL 并提交到这里。",
+    "oauth_callback_button": "提交回调 URL",
+    "oauth_callback_required": "请先粘贴完整的回调 URL。",
+    "oauth_callback_success": "回调 URL 已提交，请继续等待认证。",
+    "oauth_callback_error": "提交回调 URL 失败:",
+    "oauth_callback_upgrade_hint": "请更新CLI Proxy API或检查连接",
+    "oauth_callback_status_success": "回调 URL 已提交，等待认证中...",
+    "oauth_callback_status_error": "回调 URL 提交失败:",
     "missing_state": "无法获取认证状态参数",
     "iflow_oauth_title": "iFlow OAuth",
     "iflow_oauth_button": "开始 iFlow 登录",

src/pages/AiProvidersPage.module.scss

@@ -404,8 +404,17 @@
   }
 
   .excludedModelTag {
-    background: rgba(251, 191, 36, 0.2);
+    background: rgba(251, 191, 36, 0.22);
-    border-color: rgba(251, 191, 36, 0.4);
+    border-color: rgba(251, 191, 36, 0.55);
+    color: #fde68a;
+
+    .modelName {
+      color: #fde68a;
+    }
+  }
+
+  .excludedModelsLabel {
+    color: #fde68a;
   }
 
   .apiKeyEntryCard {

src/pages/AiProvidersPage.tsx

@@ -1897,19 +1897,21 @@ export function AiProvidersPage() {
             keyPlaceholder={t('common.custom_headers_key_placeholder')}
             valuePlaceholder={t('common.custom_headers_value_placeholder')}
           />
-          <div className="form-group">
+          {modal?.type === 'claude' && (
-            <label>{t('ai_providers.claude_models_label')}</label>
+            <div className="form-group">
-            <ModelInputList
+              <label>{t('ai_providers.claude_models_label')}</label>
-              entries={providerForm.modelEntries}
+              <ModelInputList
-              onChange={(entries) =>
+                entries={providerForm.modelEntries}
-                setProviderForm((prev) => ({ ...prev, modelEntries: entries }))
+                onChange={(entries) =>
-              }
+                  setProviderForm((prev) => ({ ...prev, modelEntries: entries }))
-              addLabel={t('ai_providers.claude_models_add_btn')}
+                }
-              namePlaceholder={t('common.model_name_placeholder')}
+                addLabel={t('ai_providers.claude_models_add_btn')}
-              aliasPlaceholder={t('common.model_alias_placeholder')}
+                namePlaceholder={t('common.model_name_placeholder')}
-              disabled={saving}
+                aliasPlaceholder={t('common.model_alias_placeholder')}
-            />
+                disabled={saving}
-          </div>
+              />
+            </div>
+          )}
           <div className="form-group">
             <label>{t('ai_providers.excluded_models_label')}</label>
             <textarea

src/pages/OAuthPage.module.scss

@@ -59,3 +59,47 @@
     color: #3b82f6;
   }
 }
+
+.callbackSection {
+  margin-top: $spacing-md;
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-xs;
+}
+
+.callbackActions {
+  display: flex;
+  gap: $spacing-md;
+}
+
+.authUrlBox {
+  background: var(--bg-secondary);
+  border: 1px dashed var(--border-color);
+  border-radius: $radius-md;
+  padding: $spacing-md;
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-xs;
+}
+
+.authUrlLabel {
+  color: var(--text-secondary);
+  font-size: 14px;
+}
+
+.authUrlValue {
+  font-weight: 700;
+  color: var(--text-primary);
+  word-break: break-all;
+  overflow-wrap: anywhere;
+  line-height: 1.5;
+  max-width: 100%;
+}
+
+.authUrlActions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: $spacing-sm;
+  margin-top: $spacing-sm;
+}

src/pages/OAuthPage.tsx

@@ -1,11 +1,10 @@
-import { useEffect, useRef, useState, useMemo } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Card } from '@/components/ui/Card';
 import { Button } from '@/components/ui/Button';
 import { Input } from '@/components/ui/Input';
 import { useNotificationStore } from '@/stores';
 import { oauthApi, type OAuthProvider, type IFlowCookieAuthResponse } from '@/services/api/oauth';
-import { isLocalhost } from '@/utils/connection';
 import styles from './OAuthPage.module.scss';
 
 interface ProviderState {
@@ -14,6 +13,12 @@ interface ProviderState {
   status?: 'idle' | 'waiting' | 'success' | 'error';
   error?: string;
   polling?: boolean;
+  projectId?: string;
+  projectIdError?: string;
+  callbackUrl?: string;
+  callbackSubmitting?: boolean;
+  callbackStatus?: 'success' | 'error';
+  callbackError?: string;
 }
 
 interface IFlowCookieState {
@@ -33,6 +38,8 @@ const PROVIDERS: { id: OAuthProvider; titleKey: string; hintKey: string; urlLabe
   { id: 'iflow', titleKey: 'auth_login.iflow_oauth_title', hintKey: 'auth_login.iflow_oauth_hint', urlLabelKey: 'auth_login.iflow_oauth_url_label' }
 ];
 
+const CALLBACK_SUPPORTED: OAuthProvider[] = ['codex', 'anthropic', 'antigravity', 'gemini-cli', 'iflow'];
+
 export function OAuthPage() {
   const { t } = useTranslation();
   const { showNotification } = useNotificationStore();
@@ -40,15 +47,19 @@ export function OAuthPage() {
   const [iflowCookie, setIflowCookie] = useState<IFlowCookieState>({ cookie: '', loading: false });
   const timers = useRef<Record<string, number>>({});
 
-  // 检测是否为本地访问
-  const isLocal = useMemo(() => isLocalhost(window.location.hostname), []);
-
   useEffect(() => {
     return () => {
       Object.values(timers.current).forEach((timer) => window.clearInterval(timer));
     };
   }, []);
 
+  const updateProviderState = (provider: OAuthProvider, next: Partial<ProviderState>) => {
+    setStates((prev) => ({
+      ...prev,
+      [provider]: { ...(prev[provider] ?? {}), ...next }
+    }));
+  };
+
   const startPolling = (provider: OAuthProvider, state: string) => {
     if (timers.current[provider]) {
       clearInterval(timers.current[provider]);
@@ -57,27 +68,18 @@ export function OAuthPage() {
       try {
         const res = await oauthApi.getAuthStatus(state);
         if (res.status === 'ok') {
-          setStates((prev) => ({
+          updateProviderState(provider, { status: 'success', polling: false });
-            ...prev,
-            [provider]: { ...prev[provider], status: 'success', polling: false }
-          }));
           showNotification(t('auth_login.codex_oauth_status_success'), 'success');
           window.clearInterval(timer);
           delete timers.current[provider];
         } else if (res.status === 'error') {
-          setStates((prev) => ({
+          updateProviderState(provider, { status: 'error', error: res.error, polling: false });
-            ...prev,
-            [provider]: { ...prev[provider], status: 'error', error: res.error, polling: false }
-          }));
           showNotification(`${t('auth_login.codex_oauth_status_error')} ${res.error || ''}`, 'error');
           window.clearInterval(timer);
           delete timers.current[provider];
         }
       } catch (err: any) {
-        setStates((prev) => ({
+        updateProviderState(provider, { status: 'error', error: err?.message, polling: false });
-          ...prev,
-          [provider]: { ...prev[provider], status: 'error', error: err?.message, polling: false }
-        }));
         window.clearInterval(timer);
         delete timers.current[provider];
       }
@@ -86,24 +88,35 @@ export function OAuthPage() {
   };
 
   const startAuth = async (provider: OAuthProvider) => {
-    setStates((prev) => ({
+    const projectId = provider === 'gemini-cli' ? (states[provider]?.projectId || '').trim() : undefined;
-      ...prev,
+    if (provider === 'gemini-cli' && !projectId) {
-      [provider]: { ...prev[provider], status: 'waiting', polling: true, error: undefined }
+      const message = t('auth_login.gemini_cli_project_id_required');
-    }));
+      updateProviderState(provider, { projectIdError: message });
+      showNotification(message, 'warning');
+      return;
+    }
+    if (provider === 'gemini-cli') {
+      updateProviderState(provider, { projectIdError: undefined });
+    }
+    updateProviderState(provider, {
+      status: 'waiting',
+      polling: true,
+      error: undefined,
+      callbackStatus: undefined,
+      callbackError: undefined,
+      callbackUrl: ''
+    });
     try {
-      const res = await oauthApi.startAuth(provider);
+      const res = await oauthApi.startAuth(
-      setStates((prev) => ({
+        provider,
-        ...prev,
+        provider === 'gemini-cli' ? { projectId: projectId! } : undefined
-        [provider]: { ...prev[provider], url: res.url, state: res.state, status: 'waiting', polling: true }
+      );
-      }));
+      updateProviderState(provider, { url: res.url, state: res.state, status: 'waiting', polling: true });
       if (res.state) {
         startPolling(provider, res.state);
       }
     } catch (err: any) {
-      setStates((prev) => ({
+      updateProviderState(provider, { status: 'error', error: err?.message, polling: false });
-        ...prev,
-        [provider]: { ...prev[provider], status: 'error', error: err?.message, polling: false }
-      }));
       showNotification(`${t('auth_login.codex_oauth_start_error')} ${err?.message || ''}`, 'error');
     }
   };
@@ -118,6 +131,40 @@ export function OAuthPage() {
     }
   };
 
+  const submitCallback = async (provider: OAuthProvider) => {
+    const redirectUrl = (states[provider]?.callbackUrl || '').trim();
+    if (!redirectUrl) {
+      showNotification(t('auth_login.oauth_callback_required'), 'warning');
+      return;
+    }
+    updateProviderState(provider, {
+      callbackSubmitting: true,
+      callbackStatus: undefined,
+      callbackError: undefined
+    });
+    try {
+      await oauthApi.submitCallback(provider, redirectUrl);
+      updateProviderState(provider, { callbackSubmitting: false, callbackStatus: 'success' });
+      showNotification(t('auth_login.oauth_callback_success'), 'success');
+    } catch (err: any) {
+      const errorMessage =
+        err?.status === 404
+          ? t('auth_login.oauth_callback_upgrade_hint', {
+              defaultValue: 'Please update CLI Proxy API or check the connection.'
+            })
+          : err?.message;
+      updateProviderState(provider, {
+        callbackSubmitting: false,
+        callbackStatus: 'error',
+        callbackError: errorMessage
+      });
+      const notificationMessage = errorMessage
+        ? `${t('auth_login.oauth_callback_error')} ${errorMessage}`
+        : t('auth_login.oauth_callback_error');
+      showNotification(notificationMessage, 'error');
+    }
+  };
+
   const submitIflowCookie = async () => {
     const cookie = iflowCookie.cookie.trim();
     if (!cookie) {
@@ -164,36 +211,38 @@ export function OAuthPage() {
       <div className={styles.content}>
         {PROVIDERS.map((provider) => {
           const state = states[provider.id] || {};
-          // 非本地访问时禁用所有 OAuth 登录方式
+          const canSubmitCallback = CALLBACK_SUPPORTED.includes(provider.id) && Boolean(state.url);
-          const isDisabled = !isLocal;
           return (
-            <div
+            <div key={provider.id}>
-              key={provider.id}
-              style={isDisabled ? { opacity: 0.6, pointerEvents: 'none' } : undefined}
-            >
               <Card
                 title={t(provider.titleKey)}
                 extra={
-                  <Button
+                  <Button onClick={() => startAuth(provider.id)} loading={state.polling}>
-                    onClick={() => startAuth(provider.id)}
-                    loading={state.polling}
-                    disabled={isDisabled}
-                  >
                     {t('common.login')}
                   </Button>
                 }
               >
                 <div className="hint">{t(provider.hintKey)}</div>
-                {isDisabled && (
+                {provider.id === 'gemini-cli' && (
-                  <div className="status-badge warning" style={{ marginTop: 8 }}>
+                  <Input
-                    {t('auth_login.remote_access_disabled')}
+                    label={t('auth_login.gemini_cli_project_id_label')}
-                  </div>
+                    hint={t('auth_login.gemini_cli_project_id_hint')}
+                    value={state.projectId || ''}
+                    error={state.projectIdError}
+                    onChange={(e) =>
+                      updateProviderState(provider.id, {
+                        projectId: e.target.value,
+                        projectIdError: undefined
+                      })
+                    }
+                    placeholder={t('auth_login.gemini_cli_project_id_placeholder')}
+                  />
                 )}
-                {!isDisabled && state.url && (
+                {state.url && (
-                  <div className="connection-box">
+                  <div className={`connection-box ${styles.authUrlBox}`}>
-                    <div className="label">{t(provider.urlLabelKey)}</div>
+                    <div className={styles.authUrlLabel}>{t(provider.urlLabelKey)}</div>
-                    <div className="value">{state.url}</div>
+                    <div className={styles.authUrlValue}>{state.url}</div>
-                    <div className="item-actions" style={{ marginTop: 8 }}>
+                    <div className={styles.authUrlActions}>
                       <Button variant="secondary" size="sm" onClick={() => copyLink(state.url!)}>
                         {t('auth_login.codex_copy_link')}
                       </Button>
@@ -207,7 +256,44 @@ export function OAuthPage() {
                     </div>
                   </div>
                 )}
-                {!isDisabled && state.status && state.status !== 'idle' && (
+                {canSubmitCallback && (
+                  <div className={styles.callbackSection}>
+                    <Input
+                      label={t('auth_login.oauth_callback_label')}
+                      hint={t('auth_login.oauth_callback_hint')}
+                      value={state.callbackUrl || ''}
+                      onChange={(e) =>
+                        updateProviderState(provider.id, {
+                          callbackUrl: e.target.value,
+                          callbackStatus: undefined,
+                          callbackError: undefined
+                        })
+                      }
+                      placeholder={t('auth_login.oauth_callback_placeholder')}
+                    />
+                    <div className={styles.callbackActions}>
+                      <Button
+                        variant="secondary"
+                        size="sm"
+                        onClick={() => submitCallback(provider.id)}
+                        loading={state.callbackSubmitting}
+                      >
+                        {t('auth_login.oauth_callback_button')}
+                      </Button>
+                    </div>
+                    {state.callbackStatus === 'success' && (
+                      <div className="status-badge success" style={{ marginTop: 8 }}>
+                        {t('auth_login.oauth_callback_status_success')}
+                      </div>
+                    )}
+                    {state.callbackStatus === 'error' && (
+                      <div className="status-badge error" style={{ marginTop: 8 }}>
+                        {t('auth_login.oauth_callback_status_error')} {state.callbackError || ''}
+                      </div>
+                    )}
+                  </div>
+                )}
+                {state.status && state.status !== 'idle' && (
                   <div className="status-badge" style={{ marginTop: 8 }}>
                     {state.status === 'success'
                       ? t('auth_login.codex_oauth_status_success')

src/services/api/oauth.ts

@@ -17,6 +17,10 @@ export interface OAuthStartResponse {
   state?: string;
 }
 
+export interface OAuthCallbackResponse {
+  status: 'ok';
+}
+
 export interface IFlowCookieAuthResponse {
   status: 'ok' | 'error';
   error?: string;
@@ -27,18 +31,37 @@ export interface IFlowCookieAuthResponse {
 }
 
 const WEBUI_SUPPORTED: OAuthProvider[] = ['codex', 'anthropic', 'antigravity', 'gemini-cli', 'iflow'];
+const CALLBACK_PROVIDER_MAP: Partial<Record<OAuthProvider, string>> = {
+  'gemini-cli': 'gemini'
+};
 
 export const oauthApi = {
-  startAuth: (provider: OAuthProvider) =>
+  startAuth: (provider: OAuthProvider, options?: { projectId?: string }) => {
-    apiClient.get<OAuthStartResponse>(`/${provider}-auth-url`, {
+    const params: Record<string, string | boolean> = {};
-      params: WEBUI_SUPPORTED.includes(provider) ? { is_webui: true } : undefined
+    if (WEBUI_SUPPORTED.includes(provider)) {
-    }),
+      params.is_webui = true;
+    }
+    if (provider === 'gemini-cli' && options?.projectId) {
+      params.project_id = options.projectId;
+    }
+    return apiClient.get<OAuthStartResponse>(`/${provider}-auth-url`, {
+      params: Object.keys(params).length ? params : undefined
+    });
+  },
 
   getAuthStatus: (state: string) =>
     apiClient.get<{ status: 'ok' | 'wait' | 'error'; error?: string }>(`/get-auth-status`, {
       params: { state }
     }),
 
+  submitCallback: (provider: OAuthProvider, redirectUrl: string) => {
+    const callbackProvider = CALLBACK_PROVIDER_MAP[provider] ?? provider;
+    return apiClient.post<OAuthCallbackResponse>('/oauth-callback', {
+      provider: callbackProvider,
+      redirect_url: redirectUrl
+    });
+  },
+
   /** iFlow cookie 认证 */
   iflowCookieAuth: (cookie: string) =>
     apiClient.post<IFlowCookieAuthResponse>('/iflow-auth-url', { cookie })