fix(providers): use /chat/completions for OpenAI test requests

model sources.

package-lock.json

@@ -71,6 +71,7 @@
       "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.27.1",
         "@babel/generator": "^7.28.5",
@@ -465,6 +466,7 @@
       "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.38.8.tgz",
       "integrity": "sha512-XcE9fcnkHCbWkjeKyi0lllwXmBLtyYb5dt89dJyx23I9+LSh5vZDIuk7OLG4VM1lgrXZQcY6cxyZyk5WVPRv/A==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@codemirror/state": "^6.5.0",
         "crelt": "^1.0.6",
@@ -1930,6 +1932,7 @@
       "integrity": "sha512-MWtvHrGZLFttgeEj28VXHxpmwYbor/ATPYbBfSFZEIRK0ecCFLl2Qo55z52Hss+UV9CRN7trSeq1zbgx7YDWWg==",
       "devOptional": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "csstype": "^3.2.2"
       }
@@ -2017,6 +2020,7 @@
       "integrity": "sha512-PC0PDZfJg8sP7cmKe6L3QIL8GZwU5aRvUFedqSIpw3B+QjRSUZeeITC2M5XKeMXEzL6wccN196iy3JLwKNvDVA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.48.1",
         "@typescript-eslint/types": "8.48.1",
@@ -2334,6 +2338,7 @@
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -2545,6 +2550,7 @@
       "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.5.1.tgz",
       "integrity": "sha512-GIjfiT9dbmHRiYi6Nl2yFCq7kkwdkp1W/lp2J99rX0yo9tgJGn3lKQATztIjb5tVtevcBtIdICNWqlq5+E8/Pw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@kurkle/color": "^0.3.0"
       },
@@ -2809,6 +2815,7 @@
       "integrity": "sha512-BhHmn2yNOFA9H9JmmIVKJmd288g9hrVRDkdoIgRCRuSySRUHH7r/DI6aAXW9T1WwUuY3DFgrcaqB+deURBLR5g==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -3285,6 +3292,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.28.4"
       },
@@ -3614,6 +3622,7 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -3720,6 +3729,7 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.2.1.tgz",
       "integrity": "sha512-DGrYcCWK7tvYMnWh79yrPHt+vdx9tY+1gPZa7nJQtO/p8bLTDaHp4dzwEhQB7pZ4Xe3ok4XKuEPrVuc+wlpkmw==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -3737,6 +3747,7 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.1.tgz",
       "integrity": "sha512-ibrK8llX2a4eOskq1mXKu/TGZj9qzomO+sNfO98M6d9zIPOEhlBkMkBUBLd1vgS0gQsLDBzA+8jJBVXDnfHmJg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "scheduler": "^0.27.0"
       },
@@ -3780,9 +3791,9 @@
       }
     },
     "node_modules/react-router": {
-      "version": "7.10.1",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.10.1.tgz",
-      "integrity": "sha512-gHL89dRa3kwlUYtRQ+m8NmxGI6CgqN+k4XyGjwcFoQwwCWF6xXpOCUlDovkXClS0d0XJN/5q7kc5W3kiFEd0Yw==",
+      "version": "7.12.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.12.0.tgz",
+      "integrity": "sha512-kTPDYPFzDVGIIGNLS5VJykK0HfHLY5MF3b+xj0/tTyNYL1gF1qs7u67Z9jEhQk2sQ98SUaHxlG31g1JtF7IfVw==",
       "license": "MIT",
       "dependencies": {
         "cookie": "^1.0.1",
@@ -3802,12 +3813,12 @@
       }
     },
     "node_modules/react-router-dom": {
-      "version": "7.10.1",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.10.1.tgz",
-      "integrity": "sha512-JNBANI6ChGVjA5bwsUIwJk7LHKmqB4JYnYfzFwyp2t12Izva11elds2jx7Yfoup2zssedntwU0oZ5DEmk5Sdaw==",
+      "version": "7.12.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.12.0.tgz",
+      "integrity": "sha512-pfO9fiBcpEfX4Tx+iTYKDtPbrSLLCbwJ5EqP+SPYQu1VYCXdy79GSj0wttR0U4cikVdlImZuEZ/9ZNCgoaxwBA==",
       "license": "MIT",
       "dependencies": {
-        "react-router": "7.10.1"
+        "react-router": "7.12.0"
       },
       "engines": {
         "node": ">=20.0.0"
@@ -3845,6 +3856,7 @@
       "integrity": "sha512-w8GmOxZfBmKknvdXU1sdM9NHcoQejwF/4mNgj2JuEEdRaHwwF12K7e9eXn1nLZ07ad+du76mkVsyeb2rKGllsA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/estree": "1.0.8"
       },
@@ -4027,6 +4039,7 @@
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "devOptional": true,
       "license": "Apache-2.0",
+      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -4103,6 +4116,7 @@
       "integrity": "sha512-tI2l/nFHC5rLh7+5+o7QjKjSR04ivXDF4jcgV0f/bTQ+OJiITy5S6gaynVsEM+7RqzufMnVbIon6Sr5x1SDYaQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "esbuild": "^0.25.0",
         "fdir": "^6.5.0",
@@ -4244,6 +4258,7 @@
       "integrity": "sha512-AvvthqfqrAhNH9dnfmrfKzX5upOdjUVJYFqNSlkmGf64gRaTzlPwz99IHYnVs28qYAybvAlBV+H7pn0saFY4Ig==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }

package.json

@@ -7,7 +7,7 @@
     "dev": "vite",
     "build": "tsc && vite build",
     "preview": "vite preview",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives",
     "format": "prettier --write \"src/**/*.{ts,tsx,css,scss}\"",
     "type-check": "tsc --noEmit"
   },

src/App.tsx

@@ -2,6 +2,7 @@ import { useCallback, useEffect, useState } from 'react';
 import { HashRouter, Route, Routes } from 'react-router-dom';
 import { LoginPage } from '@/pages/LoginPage';
 import { NotificationContainer } from '@/components/common/NotificationContainer';
+import { ConfirmationModal } from '@/components/common/ConfirmationModal';
 import { SplashScreen } from '@/components/common/SplashScreen';
 import { MainLayout } from '@/components/layout/MainLayout';
 import { ProtectedRoute } from '@/router/ProtectedRoute';
@@ -61,6 +62,7 @@ function App() {
   return (
     <HashRouter>
       <NotificationContainer />
+      <ConfirmationModal />
       <Routes>
         <Route path="/login" element={<LoginPage />} />
         <Route

src/components/common/ConfirmationModal.tsx

@@ -0,0 +1,61 @@
+import { useTranslation } from 'react-i18next';
+import { Modal } from '@/components/ui/Modal';
+import { Button } from '@/components/ui/Button';
+import { useNotificationStore } from '@/stores';
+
+export function ConfirmationModal() {
+  const { t } = useTranslation();
+  const confirmation = useNotificationStore((state) => state.confirmation);
+  const hideConfirmation = useNotificationStore((state) => state.hideConfirmation);
+  const setConfirmationLoading = useNotificationStore((state) => state.setConfirmationLoading);
+
+  const { isOpen, isLoading, options } = confirmation;
+
+  if (!isOpen || !options) {
+    return null;
+  }
+
+  const { title, message, onConfirm, onCancel, confirmText, cancelText, variant = 'primary' } = options;
+
+  const handleConfirm = async () => {
+    try {
+      setConfirmationLoading(true);
+      await onConfirm();
+      hideConfirmation();
+    } catch (error) {
+      console.error('Confirmation action failed:', error);
+      // Optional: show error notification here if needed, 
+      // but usually the calling component handles specific errors.
+    } finally {
+      setConfirmationLoading(false);
+    }
+  };
+
+  const handleCancel = () => {
+    if (isLoading) {
+      return;
+    }
+    if (onCancel) {
+      onCancel();
+    }
+    hideConfirmation();
+  };
+
+  return (
+    <Modal open={isOpen} onClose={handleCancel} title={title} closeDisabled={isLoading}>
+      <p style={{ margin: '1rem 0' }}>{message}</p>
+      <div style={{ display: 'flex', justifyContent: 'flex-end', gap: '1rem', marginTop: '2rem' }}>
+        <Button variant="ghost" onClick={handleCancel} disabled={isLoading}>
+          {cancelText || t('common.cancel')}
+        </Button>
+        <Button 
+          variant={variant} 
+          onClick={handleConfirm} 
+          loading={isLoading}
+        >
+          {confirmText || t('common.confirm')}
+        </Button>
+      </div>
+    </Modal>
+  );
+}

src/components/common/PageTransition.scss

@@ -14,6 +14,8 @@
     gap: $spacing-lg;
     min-height: 0;
     flex: 1;
+    backface-visibility: hidden;
+    transform: translateZ(0);
 
     // During animation, exit layer uses absolute positioning
     &--exit {
@@ -22,17 +24,15 @@
       z-index: 1;
       overflow: hidden;
       pointer-events: none;
+      will-change: transform, opacity;
     }
   }
 
   &--animating &__layer {
     will-change: transform, opacity;
-    backface-visibility: hidden;
-    transform-style: preserve-3d;
   }
 
-  // When both layers exist, current layer also needs positioning
-  &--animating &__layer:not(&__layer--exit) {
+  &--animating &__layer:not(.page-transition__layer--exit) {
     position: relative;
     z-index: 0;
   }

src/components/common/PageTransition.tsx

@@ -9,9 +9,8 @@ interface PageTransitionProps {
   scrollContainerRef?: React.RefObject<HTMLElement | null>;
 }
 
-const TRANSITION_DURATION = 0.5;
-const EXIT_DURATION = 0.45;
-const ENTER_DELAY = 0.08;
+const TRANSITION_DURATION = 0.35;
+const TRAVEL_DISTANCE = 60;
 
 type LayerStatus = 'current' | 'exiting';
 
@@ -23,18 +22,14 @@ type Layer = {
 
 type TransitionDirection = 'forward' | 'backward';
 
-export function PageTransition({
-  render,
-  getRouteOrder,
-  scrollContainerRef,
-}: PageTransitionProps) {
+export function PageTransition({ render, getRouteOrder, scrollContainerRef }: PageTransitionProps) {
   const location = useLocation();
   const currentLayerRef = useRef<HTMLDivElement>(null);
   const exitingLayerRef = useRef<HTMLDivElement>(null);
+  const transitionDirectionRef = useRef<TransitionDirection>('forward');
   const exitScrollOffsetRef = useRef(0);
 
   const [isAnimating, setIsAnimating] = useState(false);
-  const [transitionDirection, setTransitionDirection] = useState<TransitionDirection>('forward');
   const [layers, setLayers] = useState<Layer[]>(() => [
     {
       key: location.key,
@@ -54,6 +49,7 @@ export function PageTransition({
   useEffect(() => {
     if (isAnimating) return;
     if (location.key === currentLayerKey) return;
+    if (currentLayerPathname === location.pathname) return;
     const scrollContainer = resolveScrollContainer();
     exitScrollOffsetRef.current = scrollContainer?.scrollTop ?? 0;
     const resolveOrderIndex = (pathname?: string) => {
@@ -69,17 +65,27 @@ export function PageTransition({
         : toIndex > fromIndex
           ? 'forward'
           : 'backward';
-    setTransitionDirection(nextDirection);
-    setLayers((prev) => {
-      const prevCurrent = prev[prev.length - 1];
-      return [
-        prevCurrent
-          ? { ...prevCurrent, status: 'exiting' }
-          : { key: location.key, location, status: 'exiting' },
-        { key: location.key, location, status: 'current' },
-      ];
+
+    transitionDirectionRef.current = nextDirection;
+
+    let cancelled = false;
+    queueMicrotask(() => {
+      if (cancelled) return;
+      setLayers((prev) => {
+        const prevCurrent = prev[prev.length - 1];
+        return [
+          prevCurrent
+            ? { ...prevCurrent, status: 'exiting' }
+            : { key: location.key, location, status: 'exiting' },
+          { key: location.key, location, status: 'current' },
+        ];
+      });
+      setIsAnimating(true);
     });
-    setIsAnimating(true);
+
+    return () => {
+      cancelled = true;
+    };
   }, [
     isAnimating,
     location,
@@ -95,17 +101,18 @@ export function PageTransition({
 
     if (!currentLayerRef.current) return;
 
+    const currentLayerEl = currentLayerRef.current;
+    const exitingLayerEl = exitingLayerRef.current;
+
     const scrollContainer = resolveScrollContainer();
     const scrollOffset = exitScrollOffsetRef.current;
     if (scrollContainer && scrollOffset > 0) {
       scrollContainer.scrollTo({ top: 0, left: 0, behavior: 'auto' });
     }
 
-    const containerHeight = scrollContainer?.clientHeight ?? 0;
-    const viewportHeight = typeof window === 'undefined' ? 0 : window.innerHeight;
-    const travelDistance = Math.max(containerHeight, viewportHeight, 1);
-    const enterFromY = transitionDirection === 'forward' ? travelDistance : -travelDistance;
-    const exitToY = transitionDirection === 'forward' ? -travelDistance : travelDistance;
+    const transitionDirection = transitionDirectionRef.current;
+    const enterFromY = transitionDirection === 'forward' ? TRAVEL_DISTANCE : -TRAVEL_DISTANCE;
+    const exitToY = transitionDirection === 'forward' ? -TRAVEL_DISTANCE : TRAVEL_DISTANCE;
     const exitBaseY = scrollOffset ? -scrollOffset : 0;
 
     const tl = gsap.timeline({
@@ -115,43 +122,46 @@ export function PageTransition({
       },
     });
 
-    // Exit animation: fly out to top (slow-to-fast)
-    if (exitingLayerRef.current) {
-      gsap.set(exitingLayerRef.current, { y: exitBaseY });
-      tl.fromTo(
-        exitingLayerRef.current,
-        { y: exitBaseY, opacity: 1 },
+    // Exit animation: fade out with slight movement (runs simultaneously)
+    if (exitingLayerEl) {
+      gsap.set(exitingLayerEl, { y: exitBaseY });
+      tl.to(
+        exitingLayerEl,
         {
           y: exitBaseY + exitToY,
           opacity: 0,
-          duration: EXIT_DURATION,
-          ease: 'power2.in', // fast finish to clear screen
+          duration: TRANSITION_DURATION,
+          ease: 'circ.out',
           force3D: true,
         },
         0
       );
     }
 
-    // Enter animation: slide in from bottom (slow-to-fast)
+    // Enter animation: fade in with slight movement (runs simultaneously)
     tl.fromTo(
-      currentLayerRef.current,
+      currentLayerEl,
       { y: enterFromY, opacity: 0 },
       {
         y: 0,
         opacity: 1,
         duration: TRANSITION_DURATION,
-        ease: 'power2.out', // smooth settle
-        clearProps: 'transform,opacity',
+        ease: 'circ.out',
         force3D: true,
+        onComplete: () => {
+          if (currentLayerEl) {
+            gsap.set(currentLayerEl, { clearProps: 'transform,opacity' });
+          }
+        },
       },
-      ENTER_DELAY
+      0
     );
 
     return () => {
       tl.kill();
-      gsap.killTweensOf([currentLayerRef.current, exitingLayerRef.current]);
+      gsap.killTweensOf([currentLayerEl, exitingLayerEl]);
     };
-  }, [isAnimating, transitionDirection, resolveScrollContainer]);
+  }, [isAnimating, resolveScrollContainer]);
 
   return (
     <div className={`page-transition${isAnimating ? ' page-transition--animating' : ''}`}>

src/components/layout/MainLayout.tsx

@@ -36,6 +36,7 @@ import {
   useThemeStore,
 } from '@/stores';
 import { configApi, versionApi } from '@/services/api';
+import { triggerHeaderRefresh } from '@/hooks/useHeaderRefresh';
 
 const sidebarIcons: Record<string, ReactNode> = {
   dashboard: <IconLayoutDashboard size={18} />,
@@ -384,12 +385,22 @@ export function MainLayout() {
 
   const handleRefreshAll = async () => {
     clearCache();
-    try {
-      await fetchConfig(undefined, true);
-      showNotification(t('notification.data_refreshed'), 'success');
-    } catch (error: any) {
-      showNotification(`${t('notification.refresh_failed')}: ${error?.message || ''}`, 'error');
+    const results = await Promise.allSettled([
+      fetchConfig(undefined, true),
+      triggerHeaderRefresh()
+    ]);
+    const rejected = results.find((result) => result.status === 'rejected');
+    if (rejected && rejected.status === 'rejected') {
+      const reason = rejected.reason;
+      const message =
+        typeof reason === 'string' ? reason : reason instanceof Error ? reason.message : '';
+      showNotification(
+        `${t('notification.refresh_failed')}${message ? `: ${message}` : ''}`,
+        'error'
+      );
+      return;
     }
+    showNotification(t('notification.data_refreshed'), 'success');
   };
 
   const handleVersionCheck = async () => {

src/components/providers/AmpcodeSection/AmpcodeModal.tsx

@@ -21,7 +21,7 @@ interface AmpcodeModalProps {
 
 export function AmpcodeModal({ isOpen, disableControls, onClose, onBusyChange }: AmpcodeModalProps) {
   const { t } = useTranslation();
-  const { showNotification } = useNotificationStore();
+  const { showNotification, showConfirmation } = useNotificationStore();
   const config = useConfigStore((state) => state.config);
   const updateConfigValue = useConfigStore((state) => state.updateConfigValue);
   const clearCache = useConfigStore((state) => state.clearCache);
@@ -81,32 +81,34 @@ export function AmpcodeModal({ isOpen, disableControls, onClose, onBusyChange }:
   }, [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);
-    }
+    showConfirmation({
+      title: t('ai_providers.ampcode_clear_upstream_api_key_title', { defaultValue: 'Clear Upstream API Key' }),
+      message: t('ai_providers.ampcode_clear_upstream_api_key_confirm'),
+      variant: 'danger',
+      confirmText: t('common.confirm'),
+      onConfirm: async () => {
+        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;
-    }
-
+  const performSaveAmpcode = async () => {
     setSaving(true);
     setError('');
     try {
@@ -173,6 +175,21 @@ export function AmpcodeModal({ isOpen, disableControls, onClose, onBusyChange }:
     }
   };
 
+  const saveAmpcode = async () => {
+    if (!loaded && mappingsDirty) {
+      showConfirmation({
+        title: t('ai_providers.ampcode_mappings_overwrite_title', { defaultValue: 'Overwrite Mappings' }),
+        message: t('ai_providers.ampcode_mappings_overwrite_confirm'),
+        variant: 'secondary', // Not dangerous, just a warning
+        confirmText: t('common.confirm'),
+        onConfirm: performSaveAmpcode,
+      });
+      return;
+    }
+
+    await performSaveAmpcode();
+  };
+
   return (
     <Modal
       open={isOpen}

src/components/providers/ClaudeSection/ClaudeModal.tsx

@@ -6,7 +6,7 @@ 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 { headersToEntries } from '@/utils/headers';
 import { excludedModelsToText } from '../utils';
 import type { ProviderFormState, ProviderModalProps } from '../types';
 
@@ -19,7 +19,7 @@ const buildEmptyForm = (): ProviderFormState => ({
   prefix: '',
   baseUrl: '',
   proxyUrl: '',
-  headers: {},
+  headers: [],
   models: [],
   excludedModels: [],
   modelEntries: [{ name: '', alias: '' }],
@@ -43,7 +43,7 @@ export function ClaudeModal({
       // eslint-disable-next-line react-hooks/set-state-in-effect
       setForm({
         ...initialData,
-        headers: initialData.headers ?? {},
+        headers: headersToEntries(initialData.headers),
         modelEntries: modelsToEntries(initialData.models),
         excludedText: excludedModelsToText(initialData.excludedModels),
       });
@@ -95,8 +95,8 @@ export function ClaudeModal({
         onChange={(e) => setForm((prev) => ({ ...prev, proxyUrl: e.target.value }))}
       />
       <HeaderInputList
-        entries={headersToEntries(form.headers)}
-        onChange={(entries) => setForm((prev) => ({ ...prev, headers: buildHeaderObject(entries) }))}
+        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')}

src/components/providers/ClaudeSection/ClaudeSection.tsx

@@ -6,7 +6,12 @@ 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 {
+  buildCandidateUsageSourceIds,
+  calculateStatusBarData,
+  type KeyStats,
+  type UsageDetail,
+} from '@/utils/usage';
 import styles from '@/pages/AiProvidersPage.module.scss';
 import { ProviderList } from '../ProviderList';
 import { ProviderStatusBar } from '../ProviderStatusBar';
@@ -55,11 +60,19 @@ export function ClaudeSection({
 
   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));
+
+    configs.forEach((config) => {
+      if (!config.apiKey) return;
+      const candidates = buildCandidateUsageSourceIds({
+        apiKey: config.apiKey,
+        prefix: config.prefix,
+      });
+      if (!candidates.length) return;
+      const candidateSet = new Set(candidates);
+      const filteredDetails = usageDetails.filter((detail) => candidateSet.has(detail.source));
+      cache.set(config.apiKey, calculateStatusBarData(filteredDetails));
     });
+
     return cache;
   }, [configs, usageDetails]);
 
@@ -99,12 +112,11 @@ export function ClaudeSection({
             />
           )}
           renderContent={(item) => {
-            const stats = getStatsBySource(item.apiKey, keyStats, maskApiKey);
+            const stats = getStatsBySource(item.apiKey, keyStats, item.prefix);
             const headerEntries = Object.entries(item.headers || {});
             const configDisabled = hasDisableAllModelsRule(item.excludedModels);
             const excludedModels = item.excludedModels ?? [];
-            const statusData =
-              statusBarCache.get(item.apiKey) || calculateStatusBarData([], item.apiKey);
+            const statusData = statusBarCache.get(item.apiKey) || calculateStatusBarData([]);
 
             return (
               <Fragment>

src/components/providers/CodexSection/CodexModal.tsx

@@ -5,7 +5,7 @@ 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 { headersToEntries } from '@/utils/headers';
 import { modelsToEntries } from '@/components/ui/ModelInputList';
 import { excludedModelsToText } from '../utils';
 import type { ProviderFormState, ProviderModalProps } from '../types';
@@ -19,7 +19,7 @@ const buildEmptyForm = (): ProviderFormState => ({
   prefix: '',
   baseUrl: '',
   proxyUrl: '',
-  headers: {},
+  headers: [],
   models: [],
   excludedModels: [],
   modelEntries: [{ name: '', alias: '' }],
@@ -43,7 +43,7 @@ export function CodexModal({
       // eslint-disable-next-line react-hooks/set-state-in-effect
       setForm({
         ...initialData,
-        headers: initialData.headers ?? {},
+        headers: headersToEntries(initialData.headers),
         modelEntries: modelsToEntries(initialData.models),
         excludedText: excludedModelsToText(initialData.excludedModels),
       });
@@ -95,8 +95,8 @@ export function CodexModal({
         onChange={(e) => setForm((prev) => ({ ...prev, proxyUrl: e.target.value }))}
       />
       <HeaderInputList
-        entries={headersToEntries(form.headers)}
-        onChange={(entries) => setForm((prev) => ({ ...prev, headers: buildHeaderObject(entries) }))}
+        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')}

src/components/providers/CodexSection/CodexSection.tsx

@@ -7,7 +7,12 @@ 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 {
+  buildCandidateUsageSourceIds,
+  calculateStatusBarData,
+  type KeyStats,
+  type UsageDetail,
+} from '@/utils/usage';
 import styles from '@/pages/AiProvidersPage.module.scss';
 import { ProviderList } from '../ProviderList';
 import { ProviderStatusBar } from '../ProviderStatusBar';
@@ -58,11 +63,19 @@ export function CodexSection({
 
   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));
+
+    configs.forEach((config) => {
+      if (!config.apiKey) return;
+      const candidates = buildCandidateUsageSourceIds({
+        apiKey: config.apiKey,
+        prefix: config.prefix,
+      });
+      if (!candidates.length) return;
+      const candidateSet = new Set(candidates);
+      const filteredDetails = usageDetails.filter((detail) => candidateSet.has(detail.source));
+      cache.set(config.apiKey, calculateStatusBarData(filteredDetails));
     });
+
     return cache;
   }, [configs, usageDetails]);
 
@@ -106,12 +119,11 @@ export function CodexSection({
             />
           )}
           renderContent={(item) => {
-            const stats = getStatsBySource(item.apiKey, keyStats, maskApiKey);
+            const stats = getStatsBySource(item.apiKey, keyStats, item.prefix);
             const headerEntries = Object.entries(item.headers || {});
             const configDisabled = hasDisableAllModelsRule(item.excludedModels);
             const excludedModels = item.excludedModels ?? [];
-            const statusData =
-              statusBarCache.get(item.apiKey) || calculateStatusBarData([], item.apiKey);
+            const statusData = statusBarCache.get(item.apiKey) || calculateStatusBarData([]);
 
             return (
               <Fragment>

src/components/providers/GeminiSection/GeminiModal.tsx

@@ -5,7 +5,7 @@ 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 { headersToEntries } from '@/utils/headers';
 import { excludedModelsToText } from '../utils';
 import type { GeminiFormState, ProviderModalProps } from '../types';
 
@@ -17,7 +17,7 @@ const buildEmptyForm = (): GeminiFormState => ({
   apiKey: '',
   prefix: '',
   baseUrl: '',
-  headers: {},
+  headers: [],
   excludedModels: [],
   excludedText: '',
 });
@@ -39,7 +39,7 @@ export function GeminiModal({
       // eslint-disable-next-line react-hooks/set-state-in-effect
       setForm({
         ...initialData,
-        headers: initialData.headers ?? {},
+        headers: headersToEntries(initialData.headers),
         excludedText: excludedModelsToText(initialData.excludedModels),
       });
       return;
@@ -91,8 +91,8 @@ export function GeminiModal({
         onChange={(e) => setForm((prev) => ({ ...prev, baseUrl: e.target.value }))}
       />
       <HeaderInputList
-        entries={headersToEntries(form.headers)}
-        onChange={(entries) => setForm((prev) => ({ ...prev, headers: buildHeaderObject(entries) }))}
+        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')}

src/components/providers/GeminiSection/GeminiSection.tsx

@@ -6,7 +6,12 @@ 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 {
+  buildCandidateUsageSourceIds,
+  calculateStatusBarData,
+  type KeyStats,
+  type UsageDetail,
+} from '@/utils/usage';
 import styles from '@/pages/AiProvidersPage.module.scss';
 import type { GeminiFormState } from '../types';
 import { ProviderList } from '../ProviderList';
@@ -55,11 +60,19 @@ export function GeminiSection({
 
   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));
+
+    configs.forEach((config) => {
+      if (!config.apiKey) return;
+      const candidates = buildCandidateUsageSourceIds({
+        apiKey: config.apiKey,
+        prefix: config.prefix,
+      });
+      if (!candidates.length) return;
+      const candidateSet = new Set(candidates);
+      const filteredDetails = usageDetails.filter((detail) => candidateSet.has(detail.source));
+      cache.set(config.apiKey, calculateStatusBarData(filteredDetails));
     });
+
     return cache;
   }, [configs, usageDetails]);
 
@@ -99,12 +112,11 @@ export function GeminiSection({
             />
           )}
           renderContent={(item, index) => {
-            const stats = getStatsBySource(item.apiKey, keyStats, maskApiKey);
+            const stats = getStatsBySource(item.apiKey, keyStats, item.prefix);
             const headerEntries = Object.entries(item.headers || {});
             const configDisabled = hasDisableAllModelsRule(item.excludedModels);
             const excludedModels = item.excludedModels ?? [];
-            const statusData =
-              statusBarCache.get(item.apiKey) || calculateStatusBarData([], item.apiKey);
+            const statusData = statusBarCache.get(item.apiKey) || calculateStatusBarData([]);
 
             return (
               <Fragment>

src/components/providers/OpenAISection/OpenAISection.tsx

@@ -7,7 +7,12 @@ 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 {
+  buildCandidateUsageSourceIds,
+  calculateStatusBarData,
+  type KeyStats,
+  type UsageDetail,
+} from '@/utils/usage';
 import styles from '@/pages/AiProvidersPage.module.scss';
 import { ProviderList } from '../ProviderList';
 import { ProviderStatusBar } from '../ProviderStatusBar';
@@ -57,8 +62,15 @@ export function OpenAISection({
     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));
+      const sourceIds = new Set<string>();
+      buildCandidateUsageSourceIds({ prefix: provider.prefix }).forEach((id) => sourceIds.add(id));
+      (provider.apiKeyEntries || []).forEach((entry) => {
+        buildCandidateUsageSourceIds({ apiKey: entry.apiKey }).forEach((id) => sourceIds.add(id));
+      });
+
+      const filteredDetails = sourceIds.size
+        ? usageDetails.filter((detail) => sourceIds.has(detail.source))
+        : [];
       cache.set(provider.name, calculateStatusBarData(filteredDetails));
     });
 
@@ -96,7 +108,7 @@ export function OpenAISection({
           onDelete={onDelete}
           actionsDisabled={actionsDisabled}
           renderContent={(item) => {
-            const stats = getOpenAIProviderStats(item.apiKeyEntries, keyStats, maskApiKey);
+            const stats = getOpenAIProviderStats(item.apiKeyEntries, keyStats, item.prefix);
             const headerEntries = Object.entries(item.headers || {});
             const apiKeyEntries = item.apiKeyEntries || [];
             const statusData = statusBarCache.get(item.name) || calculateStatusBarData([]);
@@ -130,7 +142,7 @@ export function OpenAISection({
                     </div>
                     <div className={styles.apiKeyEntryList}>
                       {apiKeyEntries.map((entry, entryIndex) => {
-                        const entryStats = getStatsBySource(entry.apiKey, keyStats, maskApiKey);
+                        const entryStats = getStatsBySource(entry.apiKey, keyStats);
                         return (
                           <div key={entryIndex} className={styles.apiKeyEntryCard}>
                             <span className={styles.apiKeyEntryIndex}>{entryIndex + 1}</span>

src/components/providers/VertexSection/VertexModal.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 { ModelInputList, modelsToEntries } from '@/components/ui/ModelInputList';
+import type { ProviderKeyConfig } from '@/types';
+import { headersToEntries } from '@/utils/headers';
+import type { ProviderModalProps, VertexFormState } from '../types';
+
+interface VertexModalProps extends ProviderModalProps<ProviderKeyConfig, VertexFormState> {
+  isSaving: boolean;
+}
+
+const buildEmptyForm = (): VertexFormState => ({
+  apiKey: '',
+  prefix: '',
+  baseUrl: '',
+  proxyUrl: '',
+  headers: [],
+  models: [],
+  modelEntries: [{ name: '', alias: '' }],
+});
+
+export function VertexModal({
+  isOpen,
+  editIndex,
+  initialData,
+  onClose,
+  onSave,
+  isSaving,
+}: VertexModalProps) {
+  const { t } = useTranslation();
+  const [form, setForm] = useState<VertexFormState>(buildEmptyForm);
+
+  useEffect(() => {
+    if (!isOpen) return;
+    if (initialData) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect
+      setForm({
+        ...initialData,
+        headers: headersToEntries(initialData.headers),
+        modelEntries: modelsToEntries(initialData.models),
+      });
+      return;
+    }
+    setForm(buildEmptyForm());
+  }, [initialData, isOpen]);
+
+  return (
+    <Modal
+      open={isOpen}
+      onClose={onClose}
+      title={
+        editIndex !== null
+          ? t('ai_providers.vertex_edit_modal_title')
+          : t('ai_providers.vertex_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.vertex_add_modal_key_label')}
+        placeholder={t('ai_providers.vertex_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.vertex_add_modal_url_label')}
+        placeholder={t('ai_providers.vertex_add_modal_url_placeholder')}
+        value={form.baseUrl ?? ''}
+        onChange={(e) => setForm((prev) => ({ ...prev, baseUrl: e.target.value }))}
+      />
+      <Input
+        label={t('ai_providers.vertex_add_modal_proxy_label')}
+        placeholder={t('ai_providers.vertex_add_modal_proxy_placeholder')}
+        value={form.proxyUrl ?? ''}
+        onChange={(e) => setForm((prev) => ({ ...prev, proxyUrl: 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>{t('ai_providers.vertex_models_label')}</label>
+        <ModelInputList
+          entries={form.modelEntries}
+          onChange={(entries) => setForm((prev) => ({ ...prev, modelEntries: entries }))}
+          addLabel={t('ai_providers.vertex_models_add_btn')}
+          namePlaceholder={t('common.model_name_placeholder')}
+          aliasPlaceholder={t('common.model_alias_placeholder')}
+          disabled={isSaving}
+        />
+        <div className="hint">{t('ai_providers.vertex_models_hint')}</div>
+      </div>
+    </Modal>
+  );
+}

src/components/providers/VertexSection/VertexSection.tsx

@@ -0,0 +1,182 @@
+import { Fragment, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button } from '@/components/ui/Button';
+import { Card } from '@/components/ui/Card';
+import iconVertex from '@/assets/icons/vertex.svg';
+import type { ProviderKeyConfig } from '@/types';
+import { maskApiKey } from '@/utils/format';
+import {
+  buildCandidateUsageSourceIds,
+  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 } from '../utils';
+import type { VertexFormState } from '../types';
+import { VertexModal } from './VertexModal';
+
+interface VertexSectionProps {
+  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;
+  onCloseModal: () => void;
+  onSave: (data: VertexFormState, index: number | null) => Promise<void>;
+}
+
+export function VertexSection({
+  configs,
+  keyStats,
+  usageDetails,
+  loading,
+  disableControls,
+  isSaving,
+  isSwitching,
+  isModalOpen,
+  modalIndex,
+  onAdd,
+  onEdit,
+  onDelete,
+  onCloseModal,
+  onSave,
+}: VertexSectionProps) {
+  const { t } = useTranslation();
+  const actionsDisabled = disableControls || isSaving || isSwitching;
+
+  const statusBarCache = useMemo(() => {
+    const cache = new Map<string, ReturnType<typeof calculateStatusBarData>>();
+
+    configs.forEach((config) => {
+      if (!config.apiKey) return;
+      const candidates = buildCandidateUsageSourceIds({
+        apiKey: config.apiKey,
+        prefix: config.prefix,
+      });
+      if (!candidates.length) return;
+      const candidateSet = new Set(candidates);
+      const filteredDetails = usageDetails.filter((detail) => candidateSet.has(detail.source));
+      cache.set(config.apiKey, calculateStatusBarData(filteredDetails));
+    });
+
+    return cache;
+  }, [configs, usageDetails]);
+
+  const initialData = modalIndex !== null ? configs[modalIndex] : undefined;
+
+  return (
+    <>
+      <Card
+        title={
+          <span className={styles.cardTitle}>
+            <img src={iconVertex} alt="" className={styles.cardTitleIcon} />
+            {t('ai_providers.vertex_title')}
+          </span>
+        }
+        extra={
+          <Button size="sm" onClick={onAdd} disabled={actionsDisabled}>
+            {t('ai_providers.vertex_add_button')}
+          </Button>
+        }
+      >
+        <ProviderList<ProviderKeyConfig>
+          items={configs}
+          loading={loading}
+          keyField={(item) => item.apiKey}
+          emptyTitle={t('ai_providers.vertex_empty_title')}
+          emptyDescription={t('ai_providers.vertex_empty_desc')}
+          onEdit={onEdit}
+          onDelete={onDelete}
+          actionsDisabled={actionsDisabled}
+          renderContent={(item, index) => {
+            const stats = getStatsBySource(item.apiKey, keyStats, item.prefix);
+            const headerEntries = Object.entries(item.headers || {});
+            const statusData = statusBarCache.get(item.apiKey) || calculateStatusBarData([]);
+
+            return (
+              <Fragment>
+                <div className="item-title">
+                  {t('ai_providers.vertex_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>
+                )}
+                {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>
+                )}
+                {item.models?.length ? (
+                  <div className={styles.modelTagList}>
+                    <span className={styles.modelCountLabel}>
+                      {t('ai_providers.vertex_models_count')}: {item.models.length}
+                    </span>
+                    {item.models.map((model) => (
+                      <span key={`${model.name}-${model.alias || 'default'}`} className={styles.modelTag}>
+                        <span className={styles.modelName}>{model.name}</span>
+                        {model.alias && (
+                          <span className={styles.modelAlias}>{model.alias}</span>
+                        )}
+                      </span>
+                    ))}
+                  </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>
+
+      <VertexModal
+        isOpen={isModalOpen}
+        editIndex={modalIndex}
+        initialData={initialData}
+        onClose={onCloseModal}
+        onSave={onSave}
+        isSaving={isSaving}
+      />
+    </>
+  );
+}

src/components/providers/VertexSection/index.ts

@@ -0,0 +1 @@
+export { VertexSection } from './VertexSection';

src/components/providers/index.ts

@@ -3,6 +3,7 @@ export { ClaudeSection } from './ClaudeSection';
 export { CodexSection } from './CodexSection';
 export { GeminiSection } from './GeminiSection';
 export { OpenAISection } from './OpenAISection';
+export { VertexSection } from './VertexSection';
 export { ProviderList } from './ProviderList';
 export { ProviderStatusBar } from './ProviderStatusBar';
 export * from './hooks/useProviderStats';

src/components/providers/types.ts

@@ -6,6 +6,7 @@ export type ProviderModal =
   | { type: 'gemini'; index: number | null }
   | { type: 'codex'; index: number | null }
   | { type: 'claude'; index: number | null }
+  | { type: 'vertex'; index: number | null }
   | { type: 'ampcode'; index: null }
   | { type: 'openai'; index: number | null };
 
@@ -31,13 +32,22 @@ export interface AmpcodeFormState {
   mappingEntries: ModelEntry[];
 }
 
-export type GeminiFormState = GeminiKeyConfig & { excludedText: string };
+export type GeminiFormState = Omit<GeminiKeyConfig, 'headers'> & {
+  headers: HeaderEntry[];
+  excludedText: string;
+};
 
-export type ProviderFormState = ProviderKeyConfig & {
+export type ProviderFormState = Omit<ProviderKeyConfig, 'headers'> & {
+  headers: HeaderEntry[];
   modelEntries: ModelEntry[];
   excludedText: string;
 };
 
+export type VertexFormState = Omit<ProviderKeyConfig, 'headers' | 'excludedModels'> & {
+  headers: HeaderEntry[];
+  modelEntries: ModelEntry[];
+};
+
 export interface ProviderSectionProps<TConfig> {
   configs: TConfig[];
   keyStats: KeyStats;

src/components/providers/utils.ts

@@ -1,5 +1,5 @@
 import type { AmpcodeConfig, AmpcodeModelMapping, ApiKeyEntry } from '@/types';
-import type { KeyStatBucket, KeyStats } from '@/utils/usage';
+import { buildCandidateUsageSourceIds, type KeyStatBucket, type KeyStats } from '@/utils/usage';
 import type { AmpcodeFormState, ModelEntry } from './types';
 
 export const DISABLE_ALL_MODELS_RULE = '*';
@@ -46,7 +46,7 @@ export const normalizeOpenAIBaseUrl = (baseUrl: string): string => {
 export const buildOpenAIModelsEndpoint = (baseUrl: string): string => {
   const trimmed = normalizeOpenAIBaseUrl(baseUrl);
   if (!trimmed) return '';
-  return trimmed.endsWith('/v1') ? `${trimmed}/models` : `${trimmed}/v1/models`;
+  return `${trimmed}/models`;
 };
 
 export const buildOpenAIChatCompletionsEndpoint = (baseUrl: string): string => {
@@ -55,40 +55,60 @@ export const buildOpenAIChatCompletionsEndpoint = (baseUrl: string): string => {
   if (trimmed.endsWith('/chat/completions')) {
     return trimmed;
   }
-  return trimmed.endsWith('/v1') ? `${trimmed}/chat/completions` : `${trimmed}/v1/chat/completions`;
+  if (trimmed.endsWith('/v1')) {
+    return `${trimmed.slice(0, -3)}/chat/completions`;
+  }
+  return `${trimmed}/chat/completions`;
 };
 
 // 根据 source (apiKey) 获取统计数据 - 与旧版逻辑一致
 export const getStatsBySource = (
   apiKey: string,
   keyStats: KeyStats,
-  maskFn: (key: string) => string
+  prefix?: string
 ): KeyStatBucket => {
   const bySource = keyStats.bySource ?? {};
-  const masked = maskFn(apiKey);
-  return bySource[apiKey] || bySource[masked] || { success: 0, failure: 0 };
+  const candidates = buildCandidateUsageSourceIds({ apiKey, prefix });
+  if (!candidates.length) {
+    return { success: 0, failure: 0 };
+  }
+
+  let success = 0;
+  let failure = 0;
+  candidates.forEach((candidate) => {
+    const stats = bySource[candidate];
+    if (!stats) return;
+    success += stats.success;
+    failure += stats.failure;
+  });
+
+  return { success, failure };
 };
 
 // 对于 OpenAI 提供商，汇总所有 apiKeyEntries 的统计 - 与旧版逻辑一致
 export const getOpenAIProviderStats = (
   apiKeyEntries: ApiKeyEntry[] | undefined,
   keyStats: KeyStats,
-  maskFn: (key: string) => string
+  providerPrefix?: string
 ): KeyStatBucket => {
   const bySource = keyStats.bySource ?? {};
-  let totalSuccess = 0;
-  let totalFailure = 0;
 
+  const sourceIds = new Set<string>();
+  buildCandidateUsageSourceIds({ prefix: providerPrefix }).forEach((id) => sourceIds.add(id));
   (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;
+    buildCandidateUsageSourceIds({ apiKey: entry?.apiKey }).forEach((id) => sourceIds.add(id));
   });
 
-  return { success: totalSuccess, failure: totalFailure };
+  let success = 0;
+  let failure = 0;
+  sourceIds.forEach((id) => {
+    const stats = bySource[id];
+    if (!stats) return;
+    success += stats.success;
+    failure += stats.failure;
+  });
+
+  return { success, failure };
 };
 
 export const buildApiKeyEntry = (input?: Partial<ApiKeyEntry>): ApiKeyEntry => ({

src/components/quota/QuotaSection.tsx

@@ -2,28 +2,30 @@
  * Generic quota section component.
  */
 
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Card } from '@/components/ui/Card';
 import { Button } from '@/components/ui/Button';
 import { EmptyState } from '@/components/ui/EmptyState';
+import { triggerHeaderRefresh } from '@/hooks/useHeaderRefresh';
 import { useQuotaStore, useThemeStore } from '@/stores';
 import type { AuthFileItem, ResolvedTheme } from '@/types';
 import { QuotaCard } from './QuotaCard';
 import type { QuotaStatusState } from './QuotaCard';
 import { useQuotaLoader } from './useQuotaLoader';
 import type { QuotaConfig } from './quotaConfigs';
+import { useGridColumns } from './useGridColumns';
+import { IconRefreshCw } from '@/components/ui/icons';
 import styles from '@/pages/QuotaPage.module.scss';
 
 type QuotaUpdater<T> = T | ((prev: T) => T);
 
 type QuotaSetter<T> = (updater: QuotaUpdater<T>) => void;
 
-const MIN_CARD_PAGE_SIZE = 3;
-const MAX_CARD_PAGE_SIZE = 30;
+type ViewMode = 'paged' | 'all';
 
-const clampCardPageSize = (value: number) =>
-  Math.min(MAX_CARD_PAGE_SIZE, Math.max(MIN_CARD_PAGE_SIZE, Math.round(value)));
+const MAX_ITEMS_PER_PAGE = 14;
+const MAX_SHOW_ALL_THRESHOLD = 30;
 
 interface QuotaPaginationState<T> {
   pageSize: number;
@@ -40,7 +42,7 @@ interface QuotaPaginationState<T> {
 
 const useQuotaPagination = <T,>(items: T[], defaultPageSize = 6): QuotaPaginationState<T> => {
   const [page, setPage] = useState(1);
-  const [pageSize, setPageSizeState] = useState(() => clampCardPageSize(defaultPageSize));
+  const [pageSize, setPageSizeState] = useState(defaultPageSize);
   const [loading, setLoadingState] = useState(false);
   const [loadingScope, setLoadingScope] = useState<'page' | 'all' | null>(null);
 
@@ -57,7 +59,7 @@ const useQuotaPagination = <T,>(items: T[], defaultPageSize = 6): QuotaPaginatio
   }, [items, currentPage, pageSize]);
 
   const setPageSize = useCallback((size: number) => {
-    setPageSizeState(clampCardPageSize(size));
+    setPageSizeState(size);
     setPage(1);
   }, []);
 
@@ -107,10 +109,17 @@ export function QuotaSection<TState extends QuotaStatusState, TData>({
     Record<string, TState>
   >;
 
+  /* Removed useRef */
+  const [columns, gridRef] = useGridColumns(380); // Min card width 380px matches SCSS
+  const [viewMode, setViewMode] = useState<ViewMode>('paged');
+  const [showTooManyWarning, setShowTooManyWarning] = useState(false);
+
   const filteredFiles = useMemo(() => files.filter((file) => config.filterFn(file)), [
     files,
-    config.filterFn
+    config
   ]);
+  const showAllAllowed = filteredFiles.length <= MAX_SHOW_ALL_THRESHOLD;
+  const effectiveViewMode: ViewMode = viewMode === 'all' && !showAllAllowed ? 'paged' : viewMode;
 
   const {
     pageSize,
@@ -121,19 +130,59 @@ export function QuotaSection<TState extends QuotaStatusState, TData>({
     goToPrev,
     goToNext,
     loading: sectionLoading,
-    loadingScope,
     setLoading
   } = useQuotaPagination(filteredFiles);
 
+  useEffect(() => {
+    if (showAllAllowed) return;
+    if (viewMode !== 'all') return;
+
+    let cancelled = false;
+    queueMicrotask(() => {
+      if (cancelled) return;
+      setViewMode('paged');
+      setShowTooManyWarning(true);
+    });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [showAllAllowed, viewMode]);
+
+  // Update page size based on view mode and columns
+  useEffect(() => {
+    if (effectiveViewMode === 'all') {
+      setPageSize(Math.max(1, filteredFiles.length));
+    } else {
+      // Paged mode: 3 rows * columns, capped to avoid oversized pages.
+      setPageSize(Math.min(columns * 3, MAX_ITEMS_PER_PAGE));
+    }
+  }, [effectiveViewMode, columns, filteredFiles.length, setPageSize]);
+
   const { quota, loadQuota } = useQuotaLoader(config);
 
-  const handleRefreshPage = useCallback(() => {
-    loadQuota(pageItems, 'page', setLoading);
-  }, [loadQuota, pageItems, setLoading]);
+  const pendingQuotaRefreshRef = useRef(false);
+  const prevFilesLoadingRef = useRef(loading);
 
-  const handleRefreshAll = useCallback(() => {
-    loadQuota(filteredFiles, 'all', setLoading);
-  }, [loadQuota, filteredFiles, setLoading]);
+  const handleRefresh = useCallback(() => {
+    pendingQuotaRefreshRef.current = true;
+    void triggerHeaderRefresh();
+  }, []);
+
+  useEffect(() => {
+    const wasLoading = prevFilesLoadingRef.current;
+    prevFilesLoadingRef.current = loading;
+
+    if (!pendingQuotaRefreshRef.current) return;
+    if (loading) return;
+    if (!wasLoading) return;
+
+    pendingQuotaRefreshRef.current = false;
+    const scope = effectiveViewMode === 'all' ? 'all' : 'page';
+    const targets = effectiveViewMode === 'all' ? filteredFiles : pageItems;
+    if (targets.length === 0) return;
+    loadQuota(targets, scope, setLoading);
+  }, [loading, effectiveViewMode, filteredFiles, pageItems, loadQuota, setLoading]);
 
   useEffect(() => {
     if (loading) return;
@@ -153,28 +202,56 @@ export function QuotaSection<TState extends QuotaStatusState, TData>({
     });
   }, [filteredFiles, loading, setQuota]);
 
+  const titleNode = (
+    <div className={styles.titleWrapper}>
+      <span>{t(`${config.i18nPrefix}.title`)}</span>
+      {filteredFiles.length > 0 && (
+        <span className={styles.countBadge}>
+          {filteredFiles.length}
+        </span>
+      )}
+    </div>
+  );
+
+  const isRefreshing = sectionLoading || loading;
+
   return (
     <Card
-      title={t(`${config.i18nPrefix}.title`)}
+      title={titleNode}
       extra={
         <div className={styles.headerActions}>
+          <div className={styles.viewModeToggle}>
+            <Button
+              variant={effectiveViewMode === 'paged' ? 'primary' : 'secondary'}
+              size="sm"
+              onClick={() => setViewMode('paged')}
+            >
+              {t('auth_files.view_mode_paged')}
+            </Button>
+            <Button
+              variant={effectiveViewMode === 'all' ? 'primary' : 'secondary'}
+              size="sm"
+              onClick={() => {
+                if (filteredFiles.length > MAX_SHOW_ALL_THRESHOLD) {
+                  setShowTooManyWarning(true);
+                } else {
+                  setViewMode('all');
+                }
+              }}
+            >
+              {t('auth_files.view_mode_all')}
+            </Button>
+          </div>
           <Button
             variant="secondary"
             size="sm"
-            onClick={handleRefreshPage}
-            disabled={disabled || sectionLoading || pageItems.length === 0}
-            loading={sectionLoading && loadingScope === 'page'}
+            onClick={handleRefresh}
+            disabled={disabled || isRefreshing}
+            loading={isRefreshing}
+            title={t('quota_management.refresh_files_and_quota')}
+            aria-label={t('quota_management.refresh_files_and_quota')}
           >
-            {t(`${config.i18nPrefix}.refresh_button`)}
-          </Button>
-          <Button
-            variant="secondary"
-            size="sm"
-            onClick={handleRefreshAll}
-            disabled={disabled || sectionLoading || filteredFiles.length === 0}
-            loading={sectionLoading && loadingScope === 'all'}
-          >
-            {t(`${config.i18nPrefix}.fetch_all`)}
+            {!isRefreshing && <IconRefreshCw size={16} />}
           </Button>
         </div>
       }
@@ -186,31 +263,7 @@ export function QuotaSection<TState extends QuotaStatusState, TData>({
         />
       ) : (
         <>
-          <div className={config.controlsClassName}>
-            <div className={config.controlClassName}>
-              <label>{t('auth_files.page_size_label')}</label>
-              <input
-                className={styles.pageSizeSelect}
-                type="number"
-                min={MIN_CARD_PAGE_SIZE}
-                max={MAX_CARD_PAGE_SIZE}
-                step={1}
-                value={pageSize}
-                onChange={(e) => {
-                  const value = e.currentTarget.valueAsNumber;
-                  if (!Number.isFinite(value)) return;
-                  setPageSize(value);
-                }}
-              />
-            </div>
-            <div className={config.controlClassName}>
-              <label>{t('common.info')}</label>
-              <div className={styles.statsInfo}>
-                {filteredFiles.length} {t('auth_files.files_count')}
-              </div>
-            </div>
-          </div>
-          <div className={config.gridClassName}>
+          <div ref={gridRef} className={config.gridClassName}>
             {pageItems.map((item) => (
               <QuotaCard
                 key={item.name}
@@ -224,7 +277,7 @@ export function QuotaSection<TState extends QuotaStatusState, TData>({
               />
             ))}
           </div>
-          {filteredFiles.length > pageSize && (
+          {filteredFiles.length > pageSize && effectiveViewMode === 'paged' && (
             <div className={styles.pagination}>
               <Button
                 variant="secondary"
@@ -253,6 +306,16 @@ export function QuotaSection<TState extends QuotaStatusState, TData>({
           )}
         </>
       )}
+      {showTooManyWarning && (
+        <div className={styles.warningOverlay} onClick={() => setShowTooManyWarning(false)}>
+          <div className={styles.warningModal} onClick={(e) => e.stopPropagation()}>
+            <p>{t('auth_files.too_many_files_warning')}</p>
+            <Button variant="primary" size="sm" onClick={() => setShowTooManyWarning(false)}>
+              {t('common.confirm')}
+            </Button>
+          </div>
+        </div>
+      )}
     </Card>
   );
 }

src/components/quota/quotaConfigs.ts

@@ -18,7 +18,7 @@ import type {
   GeminiCliQuotaBucketState,
   GeminiCliQuotaState
 } from '@/types';
-import { apiCallApi, getApiCallErrorMessage } from '@/services/api';
+import { apiCallApi, authFilesApi, getApiCallErrorMessage } from '@/services/api';
 import {
   ANTIGRAVITY_QUOTA_URLS,
   ANTIGRAVITY_REQUEST_HEADERS,
@@ -55,6 +55,8 @@ type QuotaUpdater<T> = T | ((prev: T) => T);
 
 type QuotaType = 'antigravity' | 'codex' | 'gemini-cli';
 
+const DEFAULT_ANTIGRAVITY_PROJECT_ID = 'bamboo-precept-lgxtn';
+
 export interface QuotaStore {
   antigravityQuota: Record<string, AntigravityQuotaState>;
   codexQuota: Record<string, CodexQuotaState>;
@@ -82,6 +84,43 @@ export interface QuotaConfig<TState, TData> {
   renderQuotaItems: (quota: TState, t: TFunction, helpers: QuotaRenderHelpers) => ReactNode;
 }
 
+const resolveAntigravityProjectId = async (file: AuthFileItem): Promise<string> => {
+  try {
+    const text = await authFilesApi.downloadText(file.name);
+    const trimmed = text.trim();
+    if (!trimmed) return DEFAULT_ANTIGRAVITY_PROJECT_ID;
+
+    const parsed = JSON.parse(trimmed) as Record<string, unknown>;
+    const topLevel = normalizeStringValue(parsed.project_id ?? parsed.projectId);
+    if (topLevel) return topLevel;
+
+    const installed =
+      parsed.installed && typeof parsed.installed === 'object' && parsed.installed !== null
+        ? (parsed.installed as Record<string, unknown>)
+        : null;
+    const installedProjectId = installed
+      ? normalizeStringValue(installed.project_id ?? installed.projectId)
+      : null;
+    if (installedProjectId) return installedProjectId;
+
+    const web =
+      parsed.web && typeof parsed.web === 'object' && parsed.web !== null
+        ? (parsed.web as Record<string, unknown>)
+        : null;
+    const webProjectId = web ? normalizeStringValue(web.project_id ?? web.projectId) : null;
+    if (webProjectId) return webProjectId;
+  } catch {
+    return DEFAULT_ANTIGRAVITY_PROJECT_ID;
+  }
+
+  return DEFAULT_ANTIGRAVITY_PROJECT_ID;
+};
+
+const isAntigravityUnknownFieldError = (message: string): boolean => {
+  const normalized = message.toLowerCase();
+  return normalized.includes('unknown name') && normalized.includes('cannot find field');
+};
+
 const fetchAntigravityQuota = async (
   file: AuthFileItem,
   t: TFunction
@@ -92,52 +131,64 @@ const fetchAntigravityQuota = async (
     throw new Error(t('antigravity_quota.missing_auth_index'));
   }
 
+  const projectId = await resolveAntigravityProjectId(file);
+  const requestBodies = [JSON.stringify({ projectId }), JSON.stringify({ project: projectId })];
+
   let lastError = '';
   let lastStatus: number | undefined;
   let priorityStatus: number | undefined;
   let hadSuccess = false;
 
   for (const url of ANTIGRAVITY_QUOTA_URLS) {
-    try {
-      const result = await apiCallApi.request({
-        authIndex,
-        method: 'POST',
-        url,
-        header: { ...ANTIGRAVITY_REQUEST_HEADERS },
-        data: '{}'
-      });
+    for (let attempt = 0; attempt < requestBodies.length; attempt++) {
+      try {
+        const result = await apiCallApi.request({
+          authIndex,
+          method: 'POST',
+          url,
+          header: { ...ANTIGRAVITY_REQUEST_HEADERS },
+          data: requestBodies[attempt]
+        });
 
-      if (result.statusCode < 200 || result.statusCode >= 300) {
-        lastError = getApiCallErrorMessage(result);
-        lastStatus = result.statusCode;
-        if (result.statusCode === 403 || result.statusCode === 404) {
-          priorityStatus ??= result.statusCode;
+        if (result.statusCode < 200 || result.statusCode >= 300) {
+          lastError = getApiCallErrorMessage(result);
+          lastStatus = result.statusCode;
+          if (result.statusCode === 403 || result.statusCode === 404) {
+            priorityStatus ??= result.statusCode;
+          }
+          if (
+            result.statusCode === 400 &&
+            isAntigravityUnknownFieldError(lastError) &&
+            attempt < requestBodies.length - 1
+          ) {
+            continue;
+          }
+          break;
         }
-        continue;
-      }
 
-      hadSuccess = true;
-      const payload = parseAntigravityPayload(result.body ?? result.bodyText);
-      const models = payload?.models;
-      if (!models || typeof models !== 'object' || Array.isArray(models)) {
-        lastError = t('antigravity_quota.empty_models');
-        continue;
-      }
+        hadSuccess = true;
+        const payload = parseAntigravityPayload(result.body ?? result.bodyText);
+        const models = payload?.models;
+        if (!models || typeof models !== 'object' || Array.isArray(models)) {
+          lastError = t('antigravity_quota.empty_models');
+          continue;
+        }
 
-      const groups = buildAntigravityQuotaGroups(models as AntigravityModelsPayload);
-      if (groups.length === 0) {
-        lastError = t('antigravity_quota.empty_models');
-        continue;
-      }
+        const groups = buildAntigravityQuotaGroups(models as AntigravityModelsPayload);
+        if (groups.length === 0) {
+          lastError = t('antigravity_quota.empty_models');
+          continue;
+        }
 
-      return groups;
-    } catch (err: unknown) {
-      lastError = err instanceof Error ? err.message : t('common.unknown_error');
-      const status = getStatusFromError(err);
-      if (status) {
-        lastStatus = status;
-        if (status === 403 || status === 404) {
-          priorityStatus ??= status;
+        return groups;
+      } catch (err: unknown) {
+        lastError = err instanceof Error ? err.message : t('common.unknown_error');
+        const status = getStatusFromError(err);
+        if (status) {
+          lastStatus = status;
+          if (status === 403 || status === 404) {
+            priorityStatus ??= status;
+          }
         }
       }
     }

src/components/quota/useGridColumns.ts

@@ -0,0 +1,40 @@
+import { useState, useEffect, useCallback } from 'react';
+
+/**
+ * Hook to calculate the number of grid columns based on container width and item min-width.
+ * Returns [columns, refCallback].
+ */
+export function useGridColumns(
+    itemMinWidth: number,
+    gap: number = 16
+): [number, (node: HTMLDivElement | null) => void] {
+    const [columns, setColumns] = useState(1);
+    const [element, setElement] = useState<HTMLDivElement | null>(null);
+
+    const refCallback = useCallback((node: HTMLDivElement | null) => {
+        setElement(node);
+    }, []);
+
+    useEffect(() => {
+        if (!element) return;
+
+        const updateColumns = () => {
+            const containerWidth = element.clientWidth;
+            const effectiveItemWidth = itemMinWidth + gap;
+            const count = Math.floor((containerWidth + gap) / effectiveItemWidth);
+            setColumns(Math.max(1, count));
+        };
+
+        updateColumns();
+
+        const observer = new ResizeObserver(() => {
+            updateColumns();
+        });
+
+        observer.observe(element);
+
+        return () => observer.disconnect();
+    }, [element, itemMinWidth, gap]);
+
+    return [columns, refCallback];
+}

src/components/ui/AutocompleteInput.tsx

@@ -0,0 +1,175 @@
+import { useEffect, useRef, useState, type ChangeEvent, type KeyboardEvent, type ReactNode } from 'react';
+import { IconChevronDown } from './icons';
+
+interface AutocompleteInputProps {
+  label?: string;
+  value: string;
+  onChange: (value: string) => void;
+  options: string[] | { value: string; label?: string }[];
+  placeholder?: string;
+  disabled?: boolean;
+  hint?: string;
+  error?: string;
+  className?: string;
+  wrapperClassName?: string;
+  wrapperStyle?: React.CSSProperties;
+  id?: string;
+  rightElement?: ReactNode;
+}
+
+export function AutocompleteInput({
+  label,
+  value,
+  onChange,
+  options,
+  placeholder,
+  disabled,
+  hint,
+  error,
+  className = '',
+  wrapperClassName = '',
+  wrapperStyle,
+  id,
+  rightElement
+}: AutocompleteInputProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [highlightedIndex, setHighlightedIndex] = useState(-1);
+  const containerRef = useRef<HTMLDivElement>(null);
+  
+  const normalizedOptions = options.map(opt => 
+    typeof opt === 'string' ? { value: opt, label: opt } : { value: opt.value, label: opt.label || opt.value }
+  );
+
+  const filteredOptions = normalizedOptions.filter(opt => {
+    const v = value.toLowerCase();
+    return opt.value.toLowerCase().includes(v) || (opt.label && opt.label.toLowerCase().includes(v));
+  });
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
+    onChange(e.target.value);
+    setIsOpen(true);
+    setHighlightedIndex(-1);
+  };
+
+  const handleSelect = (selectedValue: string) => {
+    onChange(selectedValue);
+    setIsOpen(false);
+  };
+
+  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+    if (disabled) return;
+
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      if (!isOpen) {
+          setIsOpen(true);
+          return;
+      }
+      setHighlightedIndex(prev => 
+        prev < filteredOptions.length - 1 ? prev + 1 : prev
+      );
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      setHighlightedIndex(prev => prev > 0 ? prev - 1 : 0);
+    } else if (e.key === 'Enter') {
+      if (isOpen && highlightedIndex >= 0 && highlightedIndex < filteredOptions.length) {
+        e.preventDefault();
+        handleSelect(filteredOptions[highlightedIndex].value);
+      } else if (isOpen) {
+          e.preventDefault();
+          setIsOpen(false);
+      }
+    } else if (e.key === 'Escape') {
+      setIsOpen(false);
+    } else if (e.key === 'Tab') {
+      setIsOpen(false);
+    }
+  };
+
+  return (
+    <div className={`form-group ${wrapperClassName}`} ref={containerRef} style={wrapperStyle}>
+      {label && <label htmlFor={id}>{label}</label>}
+      <div style={{ position: 'relative' }}>
+        <input 
+            id={id}
+            className={`input ${className}`.trim()} 
+            value={value}
+            onChange={handleInputChange}
+            onFocus={() => setIsOpen(true)}
+            onKeyDown={handleKeyDown}
+            placeholder={placeholder}
+            disabled={disabled}
+            autoComplete="off"
+            style={{ paddingRight: 32 }}
+        />
+        <div 
+            style={{ 
+                position: 'absolute', 
+                right: 8, 
+                top: '50%', 
+                transform: 'translateY(-50%)',
+                display: 'flex',
+                alignItems: 'center',
+                pointerEvents: disabled ? 'none' : 'auto',
+                cursor: 'pointer',
+                height: '100%'
+            }}
+            onClick={() => !disabled && setIsOpen(!isOpen)}
+        >
+            {rightElement}
+            <IconChevronDown size={16} style={{ opacity: 0.5, marginLeft: 4 }} />
+        </div>
+
+        {isOpen && filteredOptions.length > 0 && !disabled && (
+            <div className="autocomplete-dropdown" style={{
+                position: 'absolute',
+                top: 'calc(100% + 4px)',
+                left: 0,
+                right: 0,
+                zIndex: 1000,
+                backgroundColor: 'var(--bg-secondary)',
+                border: '1px solid var(--border-color)',
+                borderRadius: 'var(--radius-md)',
+                maxHeight: 200,
+                overflowY: 'auto',
+                boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)'
+            }}>
+                {filteredOptions.map((opt, index) => (
+                    <div
+                        key={`${opt.value}-${index}`}
+                        onClick={() => handleSelect(opt.value)}
+                        style={{
+                            padding: '8px 12px',
+                            cursor: 'pointer',
+                            backgroundColor: index === highlightedIndex ? 'var(--bg-tertiary)' : 'transparent',
+                            color: 'var(--text-primary)',
+                            display: 'flex',
+                            flexDirection: 'column',
+                            fontSize: '0.9rem'
+                        }}
+                        onMouseEnter={() => setHighlightedIndex(index)}
+                    >
+                        <span style={{ fontWeight: 500 }}>{opt.value}</span>
+                        {opt.label && opt.label !== opt.value && (
+                            <span style={{ fontSize: '0.85em', color: 'var(--text-secondary)' }}>{opt.label}</span>
+                        )}
+                    </div>
+                ))}
+            </div>
+        )}
+      </div>
+      {hint && <div className="hint">{hint}</div>}
+      {error && <div className="error-box">{error}</div>}
+    </div>
+  );
+}

src/components/ui/Button.tsx

@@ -20,6 +20,7 @@ export function Button({
   disabled,
   ...rest
 }: PropsWithChildren<ButtonProps>) {
+  const hasChildren = children !== null && children !== undefined && children !== false;
   const classes = [
     'btn',
     `btn-${variant}`,
@@ -33,7 +34,7 @@ export function Button({
   return (
     <button className={classes} disabled={disabled || loading} {...rest}>
       {loading && <span className="loading-spinner" aria-hidden="true" />}
-      <span>{children}</span>
+      {hasChildren && <span>{children}</span>}
     </button>
   );
 }

src/components/ui/Modal.tsx

@@ -8,6 +8,7 @@ interface ModalProps {
   onClose: () => void;
   footer?: ReactNode;
   width?: number | string;
+  closeDisabled?: boolean;
 }
 
 const CLOSE_ANIMATION_DURATION = 350;
@@ -32,7 +33,15 @@ const unlockScroll = () => {
   }
 };
 
-export function Modal({ open, title, onClose, footer, width = 520, children }: PropsWithChildren<ModalProps>) {
+export function Modal({
+  open,
+  title,
+  onClose,
+  footer,
+  width = 520,
+  closeDisabled = false,
+  children
+}: PropsWithChildren<ModalProps>) {
   const [isVisible, setIsVisible] = useState(false);
   const [isClosing, setIsClosing] = useState(false);
   const closeTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
@@ -54,19 +63,28 @@ export function Modal({ open, title, onClose, footer, width = 520, children }: P
   );
 
   useEffect(() => {
+    let cancelled = false;
+
     if (open) {
       if (closeTimerRef.current !== null) {
         window.clearTimeout(closeTimerRef.current);
         closeTimerRef.current = null;
       }
-      setIsVisible(true);
-      setIsClosing(false);
-      return;
+      queueMicrotask(() => {
+        if (cancelled) return;
+        setIsVisible(true);
+        setIsClosing(false);
+      });
+    } else if (isVisible) {
+      queueMicrotask(() => {
+        if (cancelled) return;
+        startClose(false);
+      });
     }
 
-    if (isVisible) {
-      startClose(false);
-    }
+    return () => {
+      cancelled = true;
+    };
   }, [open, isVisible, startClose]);
 
   const handleClose = useCallback(() => {
@@ -97,7 +115,13 @@ export function Modal({ open, title, onClose, footer, width = 520, children }: P
   const modalContent = (
     <div className={overlayClass}>
       <div className={modalClass} style={{ width }} role="dialog" aria-modal="true">
-        <button className="modal-close-floating" onClick={handleClose} aria-label="Close">
+        <button
+          type="button"
+          className="modal-close-floating"
+          onClick={closeDisabled ? undefined : handleClose}
+          aria-label="Close"
+          disabled={closeDisabled}
+        >
           <IconX size={20} />
         </button>
         <div className="modal-header">

src/components/ui/ToggleSwitch.tsx

@@ -4,6 +4,7 @@ interface ToggleSwitchProps {
   checked: boolean;
   onChange: (value: boolean) => void;
   label?: ReactNode;
+  ariaLabel?: string;
   disabled?: boolean;
   labelPosition?: 'left' | 'right';
 }
@@ -12,6 +13,7 @@ export function ToggleSwitch({
   checked,
   onChange,
   label,
+  ariaLabel,
   disabled = false,
   labelPosition = 'right'
 }: ToggleSwitchProps) {
@@ -25,7 +27,13 @@ export function ToggleSwitch({
 
   return (
     <label className={className}>
-      <input type="checkbox" checked={checked} onChange={handleChange} disabled={disabled} />
+      <input
+        type="checkbox"
+        checked={checked}
+        onChange={handleChange}
+        disabled={disabled}
+        aria-label={ariaLabel}
+      />
       <span className="track">
         <span className="thumb" />
       </span>

src/components/usage/ModelStatsCard.tsx

@@ -6,6 +6,8 @@ import styles from '@/pages/UsagePage.module.scss';
 export interface ModelStat {
   model: string;
   requests: number;
+  successCount: number;
+  failureCount: number;
   tokens: number;
   cost: number;
 }
@@ -38,7 +40,15 @@ export function ModelStatsCard({ modelStats, loading, hasPrices }: ModelStatsCar
               {modelStats.map((stat) => (
                 <tr key={stat.model}>
                   <td className={styles.modelCell}>{stat.model}</td>
-                  <td>{stat.requests.toLocaleString()}</td>
+                  <td>
+                    <span className={styles.requestCountCell}>
+                      <span>{stat.requests.toLocaleString()}</span>
+                      <span className={styles.requestBreakdown}>
+                        (<span className={styles.statSuccess}>{stat.successCount.toLocaleString()}</span>{' '}
+                        <span className={styles.statFailure}>{stat.failureCount.toLocaleString()}</span>)
+                      </span>
+                    </span>
+                  </td>
                   <td>{formatTokensInMillions(stat.tokens)}</td>
                   {hasPrices && <td>{stat.cost > 0 ? formatUsd(stat.cost) : '--'}</td>}
                 </tr>

src/hooks/index.ts

@@ -8,3 +8,4 @@ export { useLocalStorage } from './useLocalStorage';
 export { useInterval } from './useInterval';
 export { useMediaQuery } from './useMediaQuery';
 export { usePagination } from './usePagination';
+export { useHeaderRefresh } from './useHeaderRefresh';

src/hooks/useHeaderRefresh.ts

@@ -0,0 +1,24 @@
+import { useEffect } from 'react';
+
+export type HeaderRefreshHandler = () => void | Promise<void>;
+
+let activeHeaderRefreshHandler: HeaderRefreshHandler | null = null;
+
+export const triggerHeaderRefresh = async () => {
+  if (!activeHeaderRefreshHandler) return;
+  await activeHeaderRefreshHandler();
+};
+
+export const useHeaderRefresh = (handler?: HeaderRefreshHandler | null) => {
+  useEffect(() => {
+    if (!handler) return;
+
+    activeHeaderRefreshHandler = handler;
+
+    return () => {
+      if (activeHeaderRefreshHandler === handler) {
+        activeHeaderRefreshHandler = null;
+      }
+    };
+  }, [handler]);
+};

src/i18n/locales/en.json

@@ -137,11 +137,22 @@
     "usage_statistics_enable": "Enable usage statistics",
     "logging_title": "Logging",
     "logging_to_file_enable": "Enable logging to file",
+    "logs_max_total_size_title": "Log Size Limit",
+    "logs_max_total_size_label": "Total log size cap (MB):",
+    "logs_max_total_size_hint": "Set to 0 to disable the limit.",
+    "logs_max_total_size_update": "Update",
     "request_log_title": "Request Logging",
     "request_log_enable": "Enable request logging",
     "request_log_warning": "Keep this off unless you need detailed troubleshooting.",
+    "force_model_prefix_enable": "Force model prefix",
     "ws_auth_title": "WebSocket Authentication",
-    "ws_auth_enable": "Require auth for /ws/*"
+    "ws_auth_enable": "Require auth for /ws/*",
+    "routing_title": "Routing Strategy",
+    "routing_strategy_label": "Routing strategy:",
+    "routing_strategy_hint": "round-robin cycles through keys; fill-first prioritizes the first available key.",
+    "routing_strategy_update": "Update",
+    "routing_strategy_round_robin": "round-robin (cycle)",
+    "routing_strategy_fill_first": "fill-first (prioritize)"
   },
   "api_keys": {
     "title": "API Keys Management",
@@ -221,6 +232,27 @@
     "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",
+    "vertex_title": "Vertex API Configuration",
+    "vertex_add_button": "Add Configuration",
+    "vertex_empty_title": "No Vertex Configuration",
+    "vertex_empty_desc": "Click the button above to add the first configuration",
+    "vertex_item_title": "Vertex Configuration",
+    "vertex_add_modal_title": "Add Vertex API Configuration",
+    "vertex_add_modal_key_label": "API Key:",
+    "vertex_add_modal_key_placeholder": "Please enter Vertex API key",
+    "vertex_add_modal_url_label": "Base URL (Required):",
+    "vertex_add_modal_url_placeholder": "e.g.: https://example.com/api",
+    "vertex_add_modal_proxy_label": "Proxy URL (Optional):",
+    "vertex_add_modal_proxy_placeholder": "e.g.: socks5://proxy.example.com:1080",
+    "vertex_edit_modal_title": "Edit Vertex API Configuration",
+    "vertex_edit_modal_key_label": "API Key:",
+    "vertex_edit_modal_url_label": "Base URL (Required):",
+    "vertex_edit_modal_proxy_label": "Proxy URL (Optional):",
+    "vertex_delete_confirm": "Are you sure you want to delete this Vertex configuration?",
+    "vertex_models_label": "Model aliases (alias required):",
+    "vertex_models_add_btn": "Add Mapping",
+    "vertex_models_hint": "Each alias needs both the original model and the alias.",
+    "vertex_models_count": "Alias count",
     "ampcode_title": "Amp CLI Integration (ampcode)",
     "ampcode_modal_title": "Configure Ampcode",
     "ampcode_upstream_url_label": "Upstream URL",
@@ -261,12 +293,12 @@
     "openai_model_name_placeholder": "Model name, e.g. moonshotai/kimi-k2:free",
     "openai_model_alias_placeholder": "Model alias (optional)",
     "openai_models_add_btn": "Add Model",
-    "openai_models_fetch_button": "Fetch via /v1/models",
-    "openai_models_fetch_title": "Pick Models from /v1/models",
-    "openai_models_fetch_hint": "Call the /v1/models endpoint using the Base URL above, sending the first API key as Bearer plus custom headers.",
+    "openai_models_fetch_button": "Fetch via /models",
+    "openai_models_fetch_title": "Pick Models from /models",
+    "openai_models_fetch_hint": "Call the /models endpoint using the Base URL above, sending the first API key as Bearer plus custom headers.",
     "openai_models_fetch_url_label": "Request URL",
     "openai_models_fetch_refresh": "Refresh",
-    "openai_models_fetch_loading": "Fetching models from /v1/models...",
+    "openai_models_fetch_loading": "Fetching models from /models...",
     "openai_models_fetch_empty": "No models returned. Please check the endpoint or auth.",
     "openai_models_fetch_error": "Failed to fetch models",
     "openai_models_fetch_back": "Back to edit",
@@ -284,7 +316,7 @@
     "openai_keys_count": "Keys Count",
     "openai_models_count": "Models Count",
     "openai_test_title": "Connection Test",
-    "openai_test_hint": "Send a /v1/chat/completions request with the current settings to verify availability.",
+    "openai_test_hint": "Send a /chat/completions request with the current settings to verify availability.",
     "openai_test_model_placeholder": "Model to test",
     "openai_test_action": "Run Test",
     "openai_test_running": "Sending test request...",
@@ -312,6 +344,7 @@
     "delete_all_confirm": "Are you sure you want to delete all auth files? This operation cannot be undone!",
     "delete_filtered_confirm": "Are you sure you want to delete all {{type}} auth files? This operation cannot be undone!",
     "upload_error_json": "Only JSON files are allowed",
+    "upload_error_size": "File size cannot exceed {{maxSize}}",
     "upload_success": "File uploaded successfully",
     "download_success": "File downloaded successfully",
     "delete_success": "File deleted successfully",
@@ -327,6 +360,9 @@
     "search_placeholder": "Filter by name, type, or provider",
     "page_size_label": "Per page",
     "page_size_unit": "items",
+    "view_mode_paged": "Paged",
+    "view_mode_all": "Show all",
+    "too_many_files_warning": "Too many credentials. Showing all may cause performance issues, please use paged view.",
     "filter_all": "All",
     "filter_qwen": "Qwen",
     "filter_gemini": "Gemini",
@@ -359,7 +395,19 @@
     "models_unsupported": "This feature is not supported in the current version",
     "models_unsupported_desc": "Please update CLI Proxy API to the latest version and try again",
     "models_excluded_badge": "Excluded",
-    "models_excluded_hint": "This model is excluded by OAuth"
+    "models_excluded_hint": "This model is excluded by OAuth",
+    "status_toggle_label": "Enabled",
+    "status_enabled_success": "\"{{name}}\" enabled",
+    "status_disabled_success": "\"{{name}}\" disabled",
+    "prefix_proxy_button": "Edit prefix/proxy_url",
+    "prefix_proxy_loading": "Loading credential...",
+    "prefix_proxy_source_label": "Credential JSON",
+    "prefix_label": "prefix",
+    "proxy_url_label": "proxy_url",
+    "prefix_placeholder": "",
+    "proxy_url_placeholder": "socks5://username:password@proxy_ip:port/",
+    "prefix_proxy_invalid_json": "This credential is not a JSON object and cannot be edited.",
+    "prefix_proxy_saved_success": "Updated \"{{name}}\" successfully"
   },
   "antigravity_quota": {
     "title": "Antigravity Quota",
@@ -440,8 +488,10 @@
     "provider_placeholder": "e.g. gemini-cli",
     "provider_hint": "Defaults to the current filter; pick an existing provider or type a new name.",
     "models_label": "Models to exclude",
-    "models_placeholder": "gpt-4.1-mini\n*-preview",
-    "models_hint": "Separate by commas or new lines; saving an empty list removes that provider. * wildcards are supported.",
+    "models_loading": "Loading models...",
+    "models_unsupported": "Current CPA version does not support fetching model lists.",
+    "models_loaded": "{{count}} models loaded. Check the models to exclude.",
+    "no_models_available": "No models available for this provider.",
     "save": "Save/Update",
     "saving": "Saving...",
     "save_success": "Excluded models updated",
@@ -464,6 +514,36 @@
     "upgrade_required_title": "Please upgrade CLI Proxy API",
     "upgrade_required_desc": "The current server does not support the OAuth excluded models API. Please upgrade to the latest CLI Proxy API (CPA) version."
   },
+  "oauth_model_alias": {
+    "title": "OAuth Model Aliases",
+    "add": "Add Alias",
+    "add_title": "Add provider model aliases",
+    "provider_label": "Provider",
+    "provider_placeholder": "e.g. gemini-cli / vertex",
+    "provider_hint": "Defaults to the current filter; pick an existing provider or type a new name.",
+    "model_source_loading": "Loading models...",
+    "model_source_unsupported": "The current CPA version does not support fetching model lists (manual input still works).",
+    "model_source_loaded": "{{count}} models loaded. Use the dropdown in 'Source model name', or type custom values. Saving an empty list removes that provider. Enable 'Keep original' to keep the original name while adding the alias.",
+    "alias_label": "Model aliases",
+    "alias_name_placeholder": "Source model name",
+    "alias_placeholder": "Alias (required)",
+    "alias_fork_label": "Keep original",
+    "add_alias": "Add alias",
+    "save": "Save/Update",
+    "save_success": "Model aliases updated",
+    "save_failed": "Failed to update model aliases",
+    "delete": "Delete Provider",
+    "delete_confirm": "Delete model aliases for {{provider}}?",
+    "delete_success": "Model aliases removed",
+    "delete_failed": "Failed to delete model aliases",
+    "no_models": "No model aliases",
+    "model_count": "{{count}} aliases",
+    "list_empty_all": "No model aliases yet—use “Add Alias” to create one.",
+    "provider_required": "Please enter a provider first",
+    "upgrade_required": "This feature requires a newer CLI Proxy API (CPA) version. Please upgrade.",
+    "upgrade_required_title": "Please upgrade CLI Proxy API",
+    "upgrade_required_desc": "The current server does not support the OAuth model aliases API. Please upgrade to the latest CLI Proxy API (CPA) version."
+  },
   "auth_login": {
     "codex_oauth_title": "Codex OAuth",
     "codex_oauth_button": "Start Codex Login",
@@ -548,7 +628,7 @@
     "iflow_oauth_polling_error": "Failed to check authentication status:",
     "iflow_cookie_title": "iFlow Cookie Login",
     "iflow_cookie_label": "Cookie Value:",
-    "iflow_cookie_placeholder": "Paste browser cookie, e.g. sessionid=...;",
+    "iflow_cookie_placeholder": "Enter the BXAuth value, starting with BXAuth=",
     "iflow_cookie_hint": "Submit an existing cookie to finish login without opening the authorization link; the credential file will be saved automatically.",
     "iflow_cookie_key_hint": "Note: Create a key on the platform first.",
     "iflow_cookie_button": "Submit Cookie Login",
@@ -709,7 +789,8 @@
   "quota_management": {
     "title": "Quota Management",
     "description": "Monitor OAuth quota status for Antigravity, Codex, and Gemini CLI credentials.",
-    "refresh_files": "Refresh auth files"
+    "refresh_files": "Refresh auth files",
+    "refresh_files_and_quota": "Refresh files & quota"
   },
   "system_info": {
     "title": "Management Center Info",
@@ -722,9 +803,9 @@
     "not_loaded": "Not Loaded",
     "seconds_ago": "seconds ago",
     "models_title": "Available Models",
-    "models_desc": "Shows the /v1/models response and uses saved API keys for auth automatically.",
+    "models_desc": "Shows the /models response and uses saved API keys for auth automatically.",
     "models_loading": "Loading available models...",
-    "models_empty": "No models returned by /v1/models",
+    "models_empty": "No models returned by /models",
     "models_error": "Failed to load model list",
     "models_count": "{{count}} available models",
     "version_check_title": "Update Check",
@@ -761,12 +842,16 @@
     "quota_switch_preview_updated": "Preview model switch settings updated",
     "usage_statistics_updated": "Usage statistics settings updated",
     "logging_to_file_updated": "Logging settings updated",
+    "logs_max_total_size_updated": "Log size limit updated",
     "request_log_updated": "Request logging setting updated",
+    "force_model_prefix_updated": "Model prefix setting updated",
     "ws_auth_updated": "WebSocket authentication setting updated",
+    "routing_strategy_updated": "Routing strategy updated",
     "login_storage_cleared": "Local login data cleared",
     "api_key_added": "API key added successfully",
     "api_key_updated": "API key updated successfully",
     "api_key_deleted": "API key deleted successfully",
+    "api_key_invalid_chars": "API key can only contain letters, numbers, and symbols",
     "gemini_key_added": "Gemini key added successfully",
     "gemini_key_updated": "Gemini key updated successfully",
     "gemini_key_deleted": "Gemini key deleted successfully",
@@ -780,6 +865,10 @@
     "claude_config_added": "Claude configuration added successfully",
     "claude_config_updated": "Claude configuration updated successfully",
     "claude_config_deleted": "Claude configuration deleted successfully",
+    "vertex_config_added": "Vertex configuration added successfully",
+    "vertex_config_updated": "Vertex configuration updated successfully",
+    "vertex_config_deleted": "Vertex configuration deleted successfully",
+    "vertex_base_url_required": "Please enter the Vertex Base URL",
     "config_enabled": "Configuration enabled",
     "config_disabled": "Configuration disabled",
     "field_required": "Required fields cannot be empty",

src/i18n/locales/zh-CN.json

@@ -137,11 +137,22 @@
     "usage_statistics_enable": "启用使用统计",
     "logging_title": "日志记录",
     "logging_to_file_enable": "启用日志记录到文件",
+    "logs_max_total_size_title": "日志容量限制",
+    "logs_max_total_size_label": "日志总大小上限 (MB):",
+    "logs_max_total_size_hint": "设置为 0 表示不限制。",
+    "logs_max_total_size_update": "更新",
     "request_log_title": "请求日志",
     "request_log_enable": "启用请求日志",
     "request_log_warning": "仅在需要排查问题时开启，日常请保持关闭。",
+    "force_model_prefix_enable": "强制模型前缀",
     "ws_auth_title": "WebSocket 鉴权",
-    "ws_auth_enable": "启用 /ws/* 鉴权"
+    "ws_auth_enable": "启用 /ws/* 鉴权",
+    "routing_title": "路由策略",
+    "routing_strategy_label": "路由策略:",
+    "routing_strategy_hint": "round-robin 为轮询，fill-first 为优先填充。",
+    "routing_strategy_update": "更新",
+    "routing_strategy_round_robin": "round-robin (轮询)",
+    "routing_strategy_fill_first": "fill-first (优先填充)"
   },
   "api_keys": {
     "title": "API 密钥管理",
@@ -221,6 +232,27 @@
     "claude_models_hint": "为空表示使用全部模型；可填写 name[, alias] 以限制或重命名模型。",
     "claude_models_add_btn": "添加模型",
     "claude_models_count": "模型数量",
+    "vertex_title": "Vertex API 配置",
+    "vertex_add_button": "添加配置",
+    "vertex_empty_title": "暂无Vertex配置",
+    "vertex_empty_desc": "点击上方按钮添加第一个配置",
+    "vertex_item_title": "Vertex配置",
+    "vertex_add_modal_title": "添加Vertex API配置",
+    "vertex_add_modal_key_label": "API密钥:",
+    "vertex_add_modal_key_placeholder": "请输入Vertex API密钥",
+    "vertex_add_modal_url_label": "Base URL (必填):",
+    "vertex_add_modal_url_placeholder": "例如: https://example.com/api",
+    "vertex_add_modal_proxy_label": "代理 URL (可选):",
+    "vertex_add_modal_proxy_placeholder": "例如: socks5://proxy.example.com:1080",
+    "vertex_edit_modal_title": "编辑Vertex API配置",
+    "vertex_edit_modal_key_label": "API密钥:",
+    "vertex_edit_modal_url_label": "Base URL (必填):",
+    "vertex_edit_modal_proxy_label": "代理 URL (可选):",
+    "vertex_delete_confirm": "确定要删除这个Vertex配置吗？",
+    "vertex_models_label": "模型别名 (别名必填):",
+    "vertex_models_add_btn": "添加映射",
+    "vertex_models_hint": "每条别名需要填写原模型与别名。",
+    "vertex_models_count": "别名数量",
     "ampcode_title": "Amp CLI 集成 (ampcode)",
     "ampcode_modal_title": "配置 Ampcode",
     "ampcode_upstream_url_label": "Upstream URL",
@@ -261,12 +293,12 @@
     "openai_model_name_placeholder": "模型名称，如 moonshotai/kimi-k2:free",
     "openai_model_alias_placeholder": "模型别名 (可选)",
     "openai_models_add_btn": "添加模型",
-    "openai_models_fetch_button": "从 /v1/models 获取",
-    "openai_models_fetch_title": "从 /v1/models 选择模型",
-    "openai_models_fetch_hint": "使用上方 Base URL 调用 /v1/models 端点，附带首个 API Key（Bearer）与自定义请求头。",
+    "openai_models_fetch_button": "从 /models 获取",
+    "openai_models_fetch_title": "从 /models 选择模型",
+    "openai_models_fetch_hint": "使用上方 Base URL 调用 /models 端点，附带首个 API Key（Bearer）与自定义请求头。",
     "openai_models_fetch_url_label": "请求地址",
     "openai_models_fetch_refresh": "重新获取",
-    "openai_models_fetch_loading": "正在从 /v1/models 获取模型列表...",
+    "openai_models_fetch_loading": "正在从 /models 获取模型列表...",
     "openai_models_fetch_empty": "未获取到模型，请检查端点或鉴权信息。",
     "openai_models_fetch_error": "获取模型失败",
     "openai_models_fetch_back": "返回编辑",
@@ -284,7 +316,7 @@
     "openai_keys_count": "密钥数量",
     "openai_models_count": "模型数量",
     "openai_test_title": "连通性测试",
-    "openai_test_hint": "使用当前配置向 /v1/chat/completions 请求，验证是否可用。",
+    "openai_test_hint": "使用当前配置向 /chat/completions 请求，验证是否可用。",
     "openai_test_model_placeholder": "选择或输入要测试的模型",
     "openai_test_action": "发送测试",
     "openai_test_running": "正在发送测试请求...",
@@ -312,6 +344,7 @@
     "delete_all_confirm": "确定要删除所有认证文件吗？此操作不可恢复！",
     "delete_filtered_confirm": "确定要删除筛选出的 {{type}} 认证文件吗？此操作不可恢复！",
     "upload_error_json": "只能上传JSON文件",
+    "upload_error_size": "文件大小不能超过 {{maxSize}}",
     "upload_success": "文件上传成功",
     "download_success": "文件下载成功",
     "delete_success": "文件删除成功",
@@ -327,6 +360,9 @@
     "search_placeholder": "输入名称、类型或提供方关键字",
     "page_size_label": "单页数量",
     "page_size_unit": "个/页",
+    "view_mode_paged": "按页显示",
+    "view_mode_all": "显示全部",
+    "too_many_files_warning": "您的凭证总数过多，全部加载会导致页面卡顿，请保持单页浏览。",
     "filter_all": "全部",
     "filter_qwen": "Qwen",
     "filter_gemini": "Gemini",
@@ -359,7 +395,19 @@
     "models_unsupported": "当前版本不支持此功能",
     "models_unsupported_desc": "请更新 CLI Proxy API 到最新版本后重试",
     "models_excluded_badge": "已排除",
-    "models_excluded_hint": "此模型已被 OAuth 排除"
+    "models_excluded_hint": "此模型已被 OAuth 排除",
+    "status_toggle_label": "启用",
+    "status_enabled_success": "已启用 \"{{name}}\"",
+    "status_disabled_success": "已停用 \"{{name}}\"",
+    "prefix_proxy_button": "配置 prefix/proxy_url",
+    "prefix_proxy_loading": "正在加载凭证文件...",
+    "prefix_proxy_source_label": "凭证 JSON",
+    "prefix_label": "prefix",
+    "proxy_url_label": "proxy_url",
+    "prefix_placeholder": "",
+    "proxy_url_placeholder": "socks5://username:password@proxy_ip:port/",
+    "prefix_proxy_invalid_json": "该凭证文件不是 JSON 对象，无法编辑。",
+    "prefix_proxy_saved_success": "已更新 \"{{name}}\""
   },
   "antigravity_quota": {
     "title": "Antigravity 额度",
@@ -440,8 +488,10 @@
     "provider_placeholder": "例如 gemini-cli / openai",
     "provider_hint": "默认选中当前筛选的提供商，也可直接输入或选择其他名称。",
     "models_label": "排除的模型",
-    "models_placeholder": "gpt-4.1-mini\n*-preview",
-    "models_hint": "逗号或换行分隔；留空保存将删除该提供商记录；支持 * 通配符。",
+    "models_loading": "正在加载模型列表...",
+    "models_unsupported": "当前 CPA 版本不支持获取模型列表。",
+    "models_loaded": "已加载 {{count}} 个模型，勾选要排除的模型。",
+    "no_models_available": "该提供商暂无可用模型列表。",
     "save": "保存/更新",
     "saving": "正在保存...",
     "save_success": "排除列表已更新",
@@ -464,6 +514,36 @@
     "upgrade_required_title": "需要升级 CPA 版本",
     "upgrade_required_desc": "当前服务器版本不支持获取模型排除列表功能，请升级到最新版本的 CPA（CLI Proxy API）后重试。"
   },
+  "oauth_model_alias": {
+    "title": "OAuth 模型别名",
+    "add": "新增别名",
+    "add_title": "新增提供商模型别名",
+    "provider_label": "提供商",
+    "provider_placeholder": "例如 gemini-cli / vertex",
+    "provider_hint": "默认选中当前筛选的提供商，也可直接输入或选择其他名称。",
+    "model_source_loading": "正在加载模型列表...",
+    "model_source_unsupported": "当前 CPA 版本不支持获取模型列表（仍可手动输入）。",
+    "model_source_loaded": "已加载 {{count}} 个模型，可在“原模型名称”中下拉选择；也可手动输入。留空保存将删除该提供商记录；开启“保留原名”会在保留原模型名的同时新增别名。",
+    "alias_label": "模型别名",
+    "alias_name_placeholder": "原模型名称",
+    "alias_placeholder": "别名 (必填)",
+    "alias_fork_label": "保留原名",
+    "add_alias": "添加别名",
+    "save": "保存/更新",
+    "save_success": "模型别名已更新",
+    "save_failed": "更新模型别名失败",
+    "delete": "删除提供商",
+    "delete_confirm": "确定要删除 {{provider}} 的模型别名吗？",
+    "delete_success": "已删除该提供商的模型别名",
+    "delete_failed": "删除模型别名失败",
+    "no_models": "未配置模型别名",
+    "model_count": "{{count}} 条别名",
+    "list_empty_all": "暂无任何提供商的模型别名，点击“新增别名”创建。",
+    "provider_required": "请先填写提供商名称",
+    "upgrade_required": "当前 CPA 版本不支持模型别名功能，请升级 CPA 版本",
+    "upgrade_required_title": "需要升级 CPA 版本",
+    "upgrade_required_desc": "当前服务器版本不支持 OAuth 模型别名功能，请升级到最新版本的 CPA（CLI Proxy API）后重试。"
+  },
   "auth_login": {
     "codex_oauth_title": "Codex OAuth",
     "codex_oauth_button": "开始 Codex 登录",
@@ -548,7 +628,7 @@
     "iflow_oauth_polling_error": "检查认证状态失败:",
     "iflow_cookie_title": "iFlow Cookie 登录",
     "iflow_cookie_label": "Cookie 内容:",
-    "iflow_cookie_placeholder": "粘贴浏览器中的 Cookie，例如 sessionid=...;",
+    "iflow_cookie_placeholder": "填入BXAuth值 以BXAuth=开头",
     "iflow_cookie_hint": "直接提交 Cookie 以完成登录（无需打开授权链接），服务端将自动保存凭据。",
     "iflow_cookie_key_hint": "提示：需在平台上先创建 Key。",
     "iflow_cookie_button": "提交 Cookie 登录",
@@ -709,7 +789,8 @@
   "quota_management": {
     "title": "配额管理",
     "description": "集中查看 OAuth 额度与剩余情况",
-    "refresh_files": "刷新认证文件"
+    "refresh_files": "刷新认证文件",
+    "refresh_files_and_quota": "刷新认证文件&额度"
   },
   "system_info": {
     "title": "管理中心信息",
@@ -722,9 +803,9 @@
     "not_loaded": "未加载",
     "seconds_ago": "秒前",
     "models_title": "可用模型列表",
-    "models_desc": "展示 /v1/models 返回的模型，并自动使用服务器保存的 API Key 进行鉴权。",
+    "models_desc": "展示 /models 返回的模型，并自动使用服务器保存的 API Key 进行鉴权。",
     "models_loading": "正在加载可用模型...",
-    "models_empty": "未从 /v1/models 获取到模型数据",
+    "models_empty": "未从 /models 获取到模型数据",
     "models_error": "获取模型列表失败",
     "models_count": "可用模型 {{count}} 个",
     "version_check_title": "版本检查",
@@ -761,12 +842,16 @@
     "quota_switch_preview_updated": "预览模型切换设置已更新",
     "usage_statistics_updated": "使用统计设置已更新",
     "logging_to_file_updated": "日志记录设置已更新",
+    "logs_max_total_size_updated": "日志容量设置已更新",
     "request_log_updated": "请求日志设置已更新",
+    "force_model_prefix_updated": "模型前缀设置已更新",
     "ws_auth_updated": "WebSocket 鉴权设置已更新",
+    "routing_strategy_updated": "路由策略已更新",
     "login_storage_cleared": "本地登录信息已清理",
     "api_key_added": "API密钥添加成功",
     "api_key_updated": "API密钥更新成功",
     "api_key_deleted": "API密钥删除成功",
+    "api_key_invalid_chars": "API密钥仅支持英文字母、数字和符号",
     "gemini_key_added": "Gemini密钥添加成功",
     "gemini_key_updated": "Gemini密钥更新成功",
     "gemini_key_deleted": "Gemini密钥删除成功",
@@ -780,6 +865,10 @@
     "claude_config_added": "Claude配置添加成功",
     "claude_config_updated": "Claude配置更新成功",
     "claude_config_deleted": "Claude配置删除成功",
+    "vertex_config_added": "Vertex配置添加成功",
+    "vertex_config_updated": "Vertex配置更新成功",
+    "vertex_config_deleted": "Vertex配置删除成功",
+    "vertex_base_url_required": "请填写Vertex Base URL",
     "config_enabled": "配置已启用",
     "config_disabled": "配置已停用",
     "field_required": "必填字段不能为空",

src/pages/AiProvidersPage.tsx

@@ -7,11 +7,13 @@ import {
   CodexSection,
   GeminiSection,
   OpenAISection,
+  VertexSection,
   useProviderStats,
   type GeminiFormState,
   type OpenAIFormState,
   type ProviderFormState,
   type ProviderModal,
+  type VertexFormState,
 } from '@/components/providers';
 import {
   parseExcludedModels,
@@ -21,12 +23,12 @@ import {
 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 { buildHeaderObject } from '@/utils/headers';
 import styles from './AiProvidersPage.module.scss';
 
 export function AiProvidersPage() {
   const { t } = useTranslation();
-  const { showNotification } = useNotificationStore();
+  const { showNotification, showConfirmation } = useNotificationStore();
   const resolvedTheme = useThemeStore((state) => state.resolvedTheme);
   const connectionStatus = useAuthStore((state) => state.connectionStatus);
 
@@ -41,6 +43,7 @@ export function AiProvidersPage() {
   const [geminiKeys, setGeminiKeys] = useState<GeminiKeyConfig[]>([]);
   const [codexConfigs, setCodexConfigs] = useState<ProviderKeyConfig[]>([]);
   const [claudeConfigs, setClaudeConfigs] = useState<ProviderKeyConfig[]>([]);
+  const [vertexConfigs, setVertexConfigs] = useState<ProviderKeyConfig[]>([]);
   const [openaiProviders, setOpenaiProviders] = useState<OpenAIProviderConfig[]>([]);
 
   const [saving, setSaving] = useState(false);
@@ -63,17 +66,32 @@ export function AiProvidersPage() {
     setLoading(true);
     setError('');
     try {
-      const data = await fetchConfig();
+      const [configResult, vertexResult, ampcodeResult] = await Promise.allSettled([
+        fetchConfig(),
+        providersApi.getVertexConfigs(),
+        ampcodeApi.getAmpcode(),
+      ]);
+
+      if (configResult.status !== 'fulfilled') {
+        throw configResult.reason;
+      }
+
+      const data = configResult.value;
       setGeminiKeys(data?.geminiApiKeys || []);
       setCodexConfigs(data?.codexApiKeys || []);
       setClaudeConfigs(data?.claudeApiKeys || []);
+      setVertexConfigs(data?.vertexApiKeys || []);
       setOpenaiProviders(data?.openaiCompatibility || []);
-      try {
-        const ampcode = await ampcodeApi.getAmpcode();
-        updateConfigValue('ampcode', ampcode);
+
+      if (vertexResult.status === 'fulfilled') {
+        setVertexConfigs(vertexResult.value || []);
+        updateConfigValue('vertex-api-key', vertexResult.value || []);
+        clearCache('vertex-api-key');
+      }
+
+      if (ampcodeResult.status === 'fulfilled') {
+        updateConfigValue('ampcode', ampcodeResult.value);
         clearCache('ampcode');
-      } catch {
-        // ignore
       }
     } catch (err: unknown) {
       const message = getErrorMessage(err) || t('notification.refresh_failed');
@@ -92,11 +110,13 @@ export function AiProvidersPage() {
     if (config?.geminiApiKeys) setGeminiKeys(config.geminiApiKeys);
     if (config?.codexApiKeys) setCodexConfigs(config.codexApiKeys);
     if (config?.claudeApiKeys) setClaudeConfigs(config.claudeApiKeys);
+    if (config?.vertexApiKeys) setVertexConfigs(config.vertexApiKeys);
     if (config?.openaiCompatibility) setOpenaiProviders(config.openaiCompatibility);
   }, [
     config?.geminiApiKeys,
     config?.codexApiKeys,
     config?.claudeApiKeys,
+    config?.vertexApiKeys,
     config?.openaiCompatibility,
   ]);
 
@@ -112,6 +132,10 @@ export function AiProvidersPage() {
     setModal({ type, index });
   };
 
+  const openVertexModal = (index: number | null) => {
+    setModal({ type: 'vertex', index });
+  };
+
   const openAmpcodeModal = () => {
     setModal({ type: 'ampcode', index: null });
   };
@@ -127,7 +151,7 @@ export function AiProvidersPage() {
         apiKey: form.apiKey.trim(),
         prefix: form.prefix?.trim() || undefined,
         baseUrl: form.baseUrl?.trim() || undefined,
-        headers: buildHeaderObject(headersToEntries(form.headers)),
+        headers: buildHeaderObject(form.headers),
         excludedModels: parseExcludedModels(form.excludedText),
       };
       const nextList =
@@ -156,18 +180,25 @@ export function AiProvidersPage() {
   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(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: unknown) {
-      const message = getErrorMessage(err);
-      showNotification(`${t('notification.delete_failed')}: ${message}`, 'error');
-    }
+    showConfirmation({
+      title: t('ai_providers.gemini_delete_title', { defaultValue: 'Delete Gemini Key' }),
+      message: t('ai_providers.gemini_delete_confirm'),
+      variant: 'danger',
+      confirmText: t('common.confirm'),
+      onConfirm: async () => {
+        try {
+          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: unknown) {
+          const message = getErrorMessage(err);
+          showNotification(`${t('notification.delete_failed')}: ${message}`, 'error');
+        }
+      },
+    });
   };
 
   const setConfigEnabled = async (
@@ -283,7 +314,7 @@ export function AiProvidersPage() {
         prefix: form.prefix?.trim() || undefined,
         baseUrl,
         proxyUrl: form.proxyUrl?.trim() || undefined,
-        headers: buildHeaderObject(headersToEntries(form.headers)),
+        headers: buildHeaderObject(form.headers),
         models: entriesToModels(form.modelEntries),
         excludedModels: parseExcludedModels(form.excludedText),
       };
@@ -328,29 +359,109 @@ export function AiProvidersPage() {
     const source = type === 'codex' ? codexConfigs : claudeConfigs;
     const entry = source[index];
     if (!entry) return;
-    if (!window.confirm(t(`ai_providers.${type}_delete_confirm`))) return;
+    showConfirmation({
+      title: t(`ai_providers.${type}_delete_title`, { defaultValue: `Delete ${type === 'codex' ? 'Codex' : 'Claude'} Config` }),
+      message: t(`ai_providers.${type}_delete_confirm`),
+      variant: 'danger',
+      confirmText: t('common.confirm'),
+      onConfirm: async () => {
+        try {
+          if (type === 'codex') {
+            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(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: unknown) {
+          const message = getErrorMessage(err);
+          showNotification(`${t('notification.delete_failed')}: ${message}`, 'error');
+        }
+      },
+    });
+  };
+
+  const saveVertex = async (form: VertexFormState, editIndex: number | null) => {
+    const trimmedBaseUrl = (form.baseUrl ?? '').trim();
+    const baseUrl = trimmedBaseUrl || undefined;
+    if (!baseUrl) {
+      showNotification(t('notification.vertex_base_url_required'), 'error');
+      return;
+    }
+
+    setSaving(true);
     try {
-      if (type === 'codex') {
-        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(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');
-      }
+      const payload: ProviderKeyConfig = {
+        apiKey: form.apiKey.trim(),
+        prefix: form.prefix?.trim() || undefined,
+        baseUrl,
+        proxyUrl: form.proxyUrl?.trim() || undefined,
+        headers: buildHeaderObject(form.headers),
+        models: form.modelEntries
+          .map((entry) => {
+            const name = entry.name.trim();
+            const alias = entry.alias.trim();
+            if (!name || !alias) return null;
+            return { name, alias };
+          })
+          .filter(Boolean) as ProviderKeyConfig['models'],
+      };
+
+      const nextList =
+        editIndex !== null
+          ? vertexConfigs.map((item, idx) => (idx === editIndex ? payload : item))
+          : [...vertexConfigs, payload];
+
+      await providersApi.saveVertexConfigs(nextList);
+      setVertexConfigs(nextList);
+      updateConfigValue('vertex-api-key', nextList);
+      clearCache('vertex-api-key');
+      const message =
+        editIndex !== null
+          ? t('notification.vertex_config_updated')
+          : t('notification.vertex_config_added');
+      showNotification(message, 'success');
+      closeModal();
     } catch (err: unknown) {
       const message = getErrorMessage(err);
-      showNotification(`${t('notification.delete_failed')}: ${message}`, 'error');
+      showNotification(`${t('notification.update_failed')}: ${message}`, 'error');
+    } finally {
+      setSaving(false);
     }
   };
 
+  const deleteVertex = async (index: number) => {
+    const entry = vertexConfigs[index];
+    if (!entry) return;
+    showConfirmation({
+      title: t('ai_providers.vertex_delete_title', { defaultValue: 'Delete Vertex Config' }),
+      message: t('ai_providers.vertex_delete_confirm'),
+      variant: 'danger',
+      confirmText: t('common.confirm'),
+      onConfirm: async () => {
+        try {
+          await providersApi.deleteVertexConfig(entry.apiKey);
+          const next = vertexConfigs.filter((_, idx) => idx !== index);
+          setVertexConfigs(next);
+          updateConfigValue('vertex-api-key', next);
+          clearCache('vertex-api-key');
+          showNotification(t('notification.vertex_config_deleted'), 'success');
+        } catch (err: unknown) {
+          const message = getErrorMessage(err);
+          showNotification(`${t('notification.delete_failed')}: ${message}`, 'error');
+        }
+      },
+    });
+  };
+
   const saveOpenai = async (form: OpenAIFormState, editIndex: number | null) => {
     setSaving(true);
     try {
@@ -395,23 +506,31 @@ export function AiProvidersPage() {
   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(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: unknown) {
-      const message = getErrorMessage(err);
-      showNotification(`${t('notification.delete_failed')}: ${message}`, 'error');
-    }
+    showConfirmation({
+      title: t('ai_providers.openai_delete_title', { defaultValue: 'Delete OpenAI Provider' }),
+      message: t('ai_providers.openai_delete_confirm'),
+      variant: 'danger',
+      confirmText: t('common.confirm'),
+      onConfirm: async () => {
+        try {
+          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: unknown) {
+          const message = getErrorMessage(err);
+          showNotification(`${t('notification.delete_failed')}: ${message}`, 'error');
+        }
+      },
+    });
   };
 
   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 vertexModalIndex = modal?.type === 'vertex' ? modal.index : null;
   const openaiModalIndex = modal?.type === 'openai' ? modal.index : null;
 
   return (
@@ -475,6 +594,23 @@ export function AiProvidersPage() {
           onSave={(form, editIndex) => saveProvider('claude', form, editIndex)}
         />
 
+        <VertexSection
+          configs={vertexConfigs}
+          keyStats={keyStats}
+          usageDetails={usageDetails}
+          loading={loading}
+          disableControls={disableControls}
+          isSaving={saving}
+          isSwitching={isSwitching}
+          isModalOpen={modal?.type === 'vertex'}
+          modalIndex={vertexModalIndex}
+          onAdd={() => openVertexModal(null)}
+          onEdit={(index) => openVertexModal(index)}
+          onDelete={deleteVertex}
+          onCloseModal={closeModal}
+          onSave={saveVertex}
+        />
+
         <AmpcodeSection
           config={config?.ampcode}
           loading={loading}

src/pages/ApiKeysPage.tsx

@@ -9,11 +9,12 @@ import { LoadingSpinner } from '@/components/ui/LoadingSpinner';
 import { useAuthStore, useConfigStore, useNotificationStore } from '@/stores';
 import { apiKeysApi } from '@/services/api';
 import { maskApiKey } from '@/utils/format';
+import { isValidApiKeyCharset } from '@/utils/validation';
 import styles from './ApiKeysPage.module.scss';
 
 export function ApiKeysPage() {
   const { t } = useTranslation();
-  const { showNotification } = useNotificationStore();
+  const { showNotification, showConfirmation } = useNotificationStore();
   const connectionStatus = useAuthStore((state) => state.connectionStatus);
 
   const config = useConfigStore((state) => state.config);
@@ -28,7 +29,6 @@ export function ApiKeysPage() {
   const [editingIndex, setEditingIndex] = useState<number | null>(null);
   const [inputValue, setInputValue] = useState('');
   const [saving, setSaving] = useState(false);
-  const [deletingIndex, setDeletingIndex] = useState<number | null>(null);
 
   const disableControls = useMemo(() => connectionStatus !== 'connected', [connectionStatus]);
 
@@ -83,6 +83,10 @@ export function ApiKeysPage() {
       showNotification(`${t('notification.please_enter')} ${t('notification.api_key')}`, 'error');
       return;
     }
+    if (!isValidApiKeyCharset(trimmed)) {
+      showNotification(t('notification.api_key_invalid_chars'), 'error');
+      return;
+    }
 
     const isEdit = editingIndex !== null;
     const nextKeys = isEdit
@@ -110,21 +114,42 @@ export function ApiKeysPage() {
     }
   };
 
-  const handleDelete = async (index: number) => {
-    if (!window.confirm(t('api_keys.delete_confirm'))) return;
-    setDeletingIndex(index);
-    try {
-      await apiKeysApi.delete(index);
-      const nextKeys = apiKeys.filter((_, idx) => idx !== index);
-      setApiKeys(nextKeys);
-      updateConfigValue('api-keys', nextKeys);
-      clearCache('api-keys');
-      showNotification(t('notification.api_key_deleted'), 'success');
-    } catch (err: any) {
-      showNotification(`${t('notification.delete_failed')}: ${err?.message || ''}`, 'error');
-    } finally {
-      setDeletingIndex(null);
+  const handleDelete = (index: number) => {
+    const apiKeyToDelete = apiKeys[index];
+    if (!apiKeyToDelete) {
+      showNotification(t('notification.delete_failed'), 'error');
+      return;
     }
+
+    showConfirmation({
+      title: t('common.delete'),
+      message: t('api_keys.delete_confirm'),
+      variant: 'danger',
+      onConfirm: async () => {
+        const latestKeys = useConfigStore.getState().config?.apiKeys;
+        const currentKeys = Array.isArray(latestKeys) ? latestKeys : [];
+        const deleteIndex =
+          currentKeys[index] === apiKeyToDelete
+            ? index
+            : currentKeys.findIndex((key) => key === apiKeyToDelete);
+
+        if (deleteIndex < 0) {
+          showNotification(t('notification.delete_failed'), 'error');
+          return;
+        }
+
+        try {
+          await apiKeysApi.delete(deleteIndex);
+          const nextKeys = currentKeys.filter((_, idx) => idx !== deleteIndex);
+          setApiKeys(nextKeys);
+          updateConfigValue('api-keys', nextKeys);
+          clearCache('api-keys');
+          showNotification(t('notification.api_key_deleted'), 'success');
+        } catch (err: any) {
+          showNotification(`${t('notification.delete_failed')}: ${err?.message || ''}`, 'error');
+        }
+      }
+    });
   };
 
   const actionButtons = (
@@ -176,8 +201,7 @@ export function ApiKeysPage() {
                     variant="danger"
                     size="sm"
                     onClick={() => handleDelete(index)}
-                    disabled={disableControls || deletingIndex === index}
-                    loading={deletingIndex === index}
+                    disabled={disableControls}
                   >
                     {t('common.delete')}
                   </Button>

src/pages/AuthFilesPage.module.scss

@@ -32,6 +32,28 @@
   flex-wrap: wrap;
 }
 
+.titleWrapper {
+  display: flex;
+  align-items: center;
+  gap: $spacing-sm;
+  line-height: 24px;
+}
+
+.countBadge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 24px;
+  min-width: 24px;
+  padding: 0 8px;
+  border-radius: 999px;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--count-badge-text);
+  background-color: var(--count-badge-bg);
+  box-sizing: border-box;
+}
+
 .errorBox {
   padding: $spacing-md;
   background-color: rgba(239, 68, 68, 0.1);
@@ -134,19 +156,6 @@
   }
 }
 
-.statsInfo {
-  padding: 8px 12px;
-  background-color: var(--bg-secondary);
-  border-radius: $radius-md;
-  font-size: 13px;
-  color: var(--text-secondary);
-  white-space: nowrap;
-  height: 38px;
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-}
-
 // 卡片网格
 .fileGrid {
   display: grid;
@@ -268,27 +277,15 @@
 }
 
 .antigravityCard {
-  background-image: linear-gradient(
-    180deg,
-    rgba(224, 247, 250, 0.12),
-    rgba(224, 247, 250, 0)
-  );
+  background-image: linear-gradient(180deg, rgba(224, 247, 250, 0.12), rgba(224, 247, 250, 0));
 }
 
 .codexCard {
-  background-image: linear-gradient(
-    180deg,
-    rgba(255, 243, 224, 0.18),
-    rgba(255, 243, 224, 0)
-  );
+  background-image: linear-gradient(180deg, rgba(255, 243, 224, 0.18), rgba(255, 243, 224, 0));
 }
 
 .geminiCliCard {
-  background-image: linear-gradient(
-    180deg,
-    rgba(231, 239, 255, 0.2),
-    rgba(231, 239, 255, 0)
-  );
+  background-image: linear-gradient(180deg, rgba(231, 239, 255, 0.2), rgba(231, 239, 255, 0));
 }
 
 .quotaSection {
@@ -437,7 +434,10 @@
   display: flex;
   flex-direction: column;
   gap: $spacing-sm;
-  transition: transform $transition-fast, box-shadow $transition-fast, border-color $transition-fast;
+  transition:
+    transform $transition-fast,
+    box-shadow $transition-fast,
+    border-color $transition-fast;
 
   &:hover {
     transform: translateY(-2px);
@@ -446,6 +446,16 @@
   }
 }
 
+.fileCardDisabled {
+  opacity: 0.6;
+
+  &:hover {
+    transform: none;
+    box-shadow: none;
+    border-color: var(--border-color);
+  }
+}
+
 .cardHeader {
   display: flex;
   align-items: center;
@@ -537,7 +547,9 @@
   height: 8px;
   border-radius: 2px;
   min-width: 6px;
-  transition: transform 0.15s ease, opacity 0.15s ease;
+  transition:
+    transform 0.15s ease,
+    opacity 0.15s ease;
 
   &:hover {
     transform: scaleY(1.5);
@@ -588,14 +600,90 @@
   background: var(--failure-badge-bg, #fee2e2);
 }
 
+.prefixProxyEditor {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-md;
+  max-height: 60vh;
+  overflow: auto;
+}
+
+.prefixProxyLoading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: $spacing-sm;
+  font-size: 12px;
+  color: var(--text-secondary);
+  padding: $spacing-sm 0;
+}
+
+.prefixProxyError {
+  padding: $spacing-sm $spacing-md;
+  border-radius: $radius-md;
+  border: 1px solid var(--danger-color);
+  background-color: rgba(239, 68, 68, 0.1);
+  color: var(--danger-color);
+  font-size: 12px;
+}
+
+.prefixProxyJsonWrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.prefixProxyLabel {
+  font-size: 12px;
+  color: var(--text-secondary);
+  font-weight: 600;
+}
+
+.prefixProxyTextarea {
+  width: 100%;
+  padding: $spacing-sm $spacing-md;
+  border: 1px solid var(--border-color);
+  border-radius: $radius-md;
+  background-color: var(--bg-secondary);
+  color: var(--text-primary);
+  font-size: 12px;
+  font-family: monospace;
+  resize: vertical;
+  min-height: 120px;
+  box-sizing: border-box;
+
+  &:focus {
+    outline: none;
+    border-color: var(--primary-color);
+  }
+}
+
+.prefixProxyFields {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: $spacing-sm;
+
+  :global(.form-group) {
+    margin: 0;
+  }
+}
+
 .cardActions {
   display: flex;
   gap: $spacing-xs;
   justify-content: flex-end;
+  align-items: center;
   margin-top: auto;
   padding-top: $spacing-sm;
 }
 
+.statusToggle {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  margin-left: $spacing-sm;
+}
+
 .iconButton:global(.btn.btn-sm) {
   width: 34px;
   height: 34px;
@@ -742,6 +830,32 @@
   }
 }
 
+// OAuth 模型映射表单
+.mappingRow {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr auto auto;
+  align-items: center;
+  gap: $spacing-sm;
+
+  @include mobile {
+    grid-template-columns: 1fr;
+  }
+}
+
+.mappingSeparator {
+  color: var(--text-secondary);
+  text-align: center;
+
+  @include mobile {
+    display: none;
+  }
+}
+
+.mappingFork {
+  display: flex;
+  align-items: center;
+}
+
 // 详情弹窗
 .detailContent {
   max-height: 400px;
@@ -881,3 +995,53 @@
   border: 1px solid var(--danger-color);
   flex-shrink: 0;
 }
+
+// 排除模型勾选列表
+.excludedCheckList {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-xs;
+  max-height: 280px;
+  overflow-y: auto;
+  border: 1px solid var(--border-color);
+  border-radius: $radius-md;
+  padding: $spacing-sm;
+  background-color: var(--bg-secondary);
+}
+
+.excludedCheckItem {
+  display: flex;
+  align-items: center;
+  gap: $spacing-sm;
+  padding: $spacing-xs $spacing-sm;
+  border-radius: $radius-sm;
+  cursor: pointer;
+  transition: background-color $transition-fast;
+
+  &:hover {
+    background-color: var(--bg-hover);
+  }
+
+  input[type="checkbox"] {
+    width: 16px;
+    height: 16px;
+    cursor: pointer;
+    accent-color: var(--primary-color);
+  }
+}
+
+.excludedCheckLabel {
+  display: flex;
+  align-items: center;
+  gap: $spacing-sm;
+  font-size: 13px;
+  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+  color: var(--text-primary);
+  word-break: break-all;
+}
+
+.excludedCheckDisplayName {
+  font-size: 12px;
+  color: var(--text-tertiary);
+  font-family: inherit;
+}

src/pages/ConfigPage.module.scss

@@ -133,14 +133,18 @@
 
 .editorWrapper {
   width: 100%;
-  flex: 1;
-  min-height: 800px;
+  flex: 0 0 auto;
+  height: clamp(360px, 60vh, 920px);
   border: 1px solid var(--border-color);
   border-radius: $radius-lg;
   overflow: hidden;
   position: relative;
   --floating-controls-height: 0px;
 
+  @supports (height: 100dvh) {
+    height: clamp(360px, 60dvh, 920px);
+  }
+
   // Floating search toolbar on top of the editor (but not covering content).
   .floatingControls {
     position: absolute;
@@ -219,8 +223,8 @@
 .configCard {
   display: flex;
   flex-direction: column;
-  height: 1120px;
-  flex-shrink: 0;
+  flex: 1;
+  min-height: 0;
   overflow: visible;
 }
 
@@ -253,11 +257,6 @@
   }
 
   .configCard {
-    height: 880px;
     padding: $spacing-md;
   }
-
-  .editorWrapper {
-    min-height: 600px;
-  }
 }

src/pages/LoginPage.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useState, useCallback } from 'react';
 import { Navigate, useNavigate, useLocation } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { Button } from '@/components/ui/Button';
@@ -50,11 +50,6 @@ export function LoginPage() {
     init();
   }, [detectedBase, restoreSession, storedBase, storedKey, storedRememberPassword]);
 
-  if (isAuthenticated) {
-    const redirect = (location.state as any)?.from?.pathname || '/';
-    return <Navigate to={redirect} replace />;
-  }
-
   const handleSubmit = async () => {
     if (!managementKey.trim()) {
       setError(t('login.error_required'));
@@ -81,6 +76,21 @@ export function LoginPage() {
     }
   };
 
+  const handleSubmitKeyDown = useCallback(
+    (event: React.KeyboardEvent) => {
+      if (event.key === 'Enter' && !loading) {
+        event.preventDefault();
+        handleSubmit();
+      }
+    },
+    [loading, handleSubmit]
+  );
+
+  if (isAuthenticated) {
+    const redirect = (location.state as any)?.from?.pathname || '/';
+    return <Navigate to={redirect} replace />;
+  }
+
   return (
     <div className="login-page">
       <div className="login-card">
@@ -129,11 +139,13 @@ export function LoginPage() {
         )}
 
         <Input
+          autoFocus
           label={t('login.management_key_label')}
           placeholder={t('login.management_key_placeholder')}
           type={showKey ? 'text' : 'password'}
           value={managementKey}
           onChange={(e) => setManagementKey(e.target.value)}
+          onKeyDown={handleSubmitKeyDown}
           rightElement={
             <button
               type="button"

src/pages/LogsPage.tsx

@@ -16,6 +16,7 @@ import {
   IconTrash2,
   IconX,
 } from '@/components/ui/icons';
+import { useHeaderRefresh } from '@/hooks/useHeaderRefresh';
 import { useAuthStore, useConfigStore, useNotificationStore } from '@/stores';
 import { logsApi } from '@/services/api/logs';
 import { MANAGEMENT_API_PREFIX } from '@/utils/constants';
@@ -370,7 +371,7 @@ type TabType = 'logs' | 'errors';
 
 export function LogsPage() {
   const { t } = useTranslation();
-  const { showNotification } = useNotificationStore();
+  const { showNotification, showConfirmation } = useNotificationStore();
   const connectionStatus = useAuthStore((state) => state.connectionStatus);
   const requestLogEnabled = useConfigStore((state) => state.config?.requestLog ?? false);
 
@@ -474,20 +475,29 @@ export function LogsPage() {
     }
   };
 
+  useHeaderRefresh(() => loadLogs(false));
+
   const clearLogs = async () => {
-    if (!window.confirm(t('logs.clear_confirm'))) return;
-    try {
-      await logsApi.clearLogs();
-      setLogState({ buffer: [], visibleFrom: 0 });
-      latestTimestampRef.current = 0;
-      showNotification(t('logs.clear_success'), 'success');
-    } catch (err: unknown) {
-      const message = getErrorMessage(err);
-      showNotification(
-        `${t('notification.delete_failed')}${message ? `: ${message}` : ''}`,
-        'error'
-      );
-    }
+    showConfirmation({
+      title: t('logs.clear_confirm_title', { defaultValue: 'Clear Logs' }),
+      message: t('logs.clear_confirm'),
+      variant: 'danger',
+      confirmText: t('common.confirm'),
+      onConfirm: async () => {
+        try {
+          await logsApi.clearLogs();
+          setLogState({ buffer: [], visibleFrom: 0 });
+          latestTimestampRef.current = 0;
+          showNotification(t('logs.clear_success'), 'success');
+        } catch (err: unknown) {
+          const message = getErrorMessage(err);
+          showNotification(
+            `${t('notification.delete_failed')}${message ? `: ${message}` : ''}`,
+            'error'
+          );
+        }
+      },
+    });
   };
 
   const downloadLogs = () => {

src/pages/QuotaPage.module.scss

@@ -30,6 +30,37 @@
   display: flex;
   gap: $spacing-sm;
   flex-wrap: wrap;
+  align-items: center;
+
+  :global(.btn-sm) {
+    line-height: 16px;
+  }
+
+  :global(svg) {
+    display: block;
+  }
+}
+
+.titleWrapper {
+  display: flex;
+  align-items: center;
+  gap: $spacing-sm;
+  line-height: 24px;
+}
+
+.countBadge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 24px;
+  min-width: 24px;
+  padding: 0 8px;
+  border-radius: 999px;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--count-badge-text);
+  background-color: var(--count-badge-bg);
+  box-sizing: border-box;
 }
 
 .errorBox {
@@ -76,11 +107,7 @@
 .geminiCliGrid {
   display: grid;
   gap: $spacing-md;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-
-  @include tablet {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
+  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
 
   @include mobile {
     grid-template-columns: 1fr;
@@ -112,28 +139,28 @@
   }
 }
 
+.viewModeToggle {
+  display: flex;
+  gap: $spacing-xs;
+  align-items: center;
+}
+
 .antigravityCard {
-  background-image: linear-gradient(
-    180deg,
-    rgba(224, 247, 250, 0.12),
-    rgba(224, 247, 250, 0)
-  );
+  background-image: linear-gradient(180deg,
+      rgba(224, 247, 250, 0.12),
+      rgba(224, 247, 250, 0));
 }
 
 .codexCard {
-  background-image: linear-gradient(
-    180deg,
-    rgba(255, 243, 224, 0.18),
-    rgba(255, 243, 224, 0)
-  );
+  background-image: linear-gradient(180deg,
+      rgba(255, 243, 224, 0.18),
+      rgba(255, 243, 224, 0));
 }
 
 .geminiCliCard {
-  background-image: linear-gradient(
-    180deg,
-    rgba(231, 239, 255, 0.2),
-    rgba(231, 239, 255, 0)
-  );
+  background-image: linear-gradient(180deg,
+      rgba(231, 239, 255, 0.2),
+      rgba(231, 239, 255, 0));
 }
 
 .quotaSection {
@@ -331,3 +358,32 @@
   background-color: var(--bg-secondary);
   border-radius: $radius-md;
 }
+
+.warningOverlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.warningModal {
+  background-color: var(--bg-primary);
+  border-radius: $radius-lg;
+  padding: $spacing-lg;
+  max-width: 400px;
+  text-align: center;
+  box-shadow: $shadow-lg;
+
+  p {
+    margin: 0 0 $spacing-md 0;
+    color: var(--text-primary);
+    font-size: 14px;
+    line-height: 1.6;
+  }
+}

src/pages/QuotaPage.tsx

@@ -4,9 +4,9 @@
 
 import { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Button } from '@/components/ui/Button';
+import { useHeaderRefresh } from '@/hooks/useHeaderRefresh';
 import { useAuthStore } from '@/stores';
-import { authFilesApi } from '@/services/api';
+import { authFilesApi, configFileApi } from '@/services/api';
 import {
   QuotaSection,
   ANTIGRAVITY_CONFIG,
@@ -26,6 +26,15 @@ export function QuotaPage() {
 
   const disableControls = connectionStatus !== 'connected';
 
+  const loadConfig = useCallback(async () => {
+    try {
+      await configFileApi.fetchConfigYaml();
+    } catch (err: unknown) {
+      const errorMessage = err instanceof Error ? err.message : t('notification.refresh_failed');
+      setError((prev) => prev || errorMessage);
+    }
+  }, [t]);
+
   const loadFiles = useCallback(async () => {
     setLoading(true);
     setError('');
@@ -40,20 +49,22 @@ export function QuotaPage() {
     }
   }, [t]);
 
+  const handleHeaderRefresh = useCallback(async () => {
+    await Promise.all([loadConfig(), loadFiles()]);
+  }, [loadConfig, loadFiles]);
+
+  useHeaderRefresh(handleHeaderRefresh);
+
   useEffect(() => {
     loadFiles();
-  }, [loadFiles]);
+    loadConfig();
+  }, [loadFiles, loadConfig]);
 
   return (
     <div className={styles.container}>
       <div className={styles.pageHeader}>
         <h1 className={styles.pageTitle}>{t('quota_management.title')}</h1>
         <p className={styles.description}>{t('quota_management.description')}</p>
-        <div className={styles.headerActions}>
-          <Button variant="secondary" size="sm" onClick={loadFiles} disabled={loading}>
-            {t('quota_management.refresh_files')}
-          </Button>
-        </div>
       </div>
 
       {error && <div className={styles.errorBox}>{error}</div>}

src/pages/Settings/Settings.module.scss

@@ -122,6 +122,33 @@
   }
 }
 
+.retryRowAligned {
+  align-items: flex-start;
+
+  .retryButton {
+    margin-top: calc(1.5em + #{$spacing-xs});
+  }
+
+  @include mobile {
+    align-items: stretch;
+
+    .retryButton {
+      margin-top: 0;
+    }
+  }
+}
+
+.retryRowInputGrow {
+  :global(.form-group) {
+    flex: 1 1 0;
+    min-width: 0;
+  }
+
+  .retryInput {
+    width: 100%;
+  }
+}
+
 .retryInput {
   width: 140px;
 

src/pages/SettingsPage.tsx

@@ -13,6 +13,9 @@ type PendingKey =
   | 'debug'
   | 'proxy'
   | 'retry'
+  | 'logsMaxSize'
+  | 'forceModelPrefix'
+  | 'routingStrategy'
   | 'switchProject'
   | 'switchPreview'
   | 'usage'
@@ -31,6 +34,8 @@ export function SettingsPage() {
   const [loading, setLoading] = useState(true);
   const [proxyValue, setProxyValue] = useState('');
   const [retryValue, setRetryValue] = useState(0);
+  const [logsMaxTotalSizeMb, setLogsMaxTotalSizeMb] = useState(0);
+  const [routingStrategy, setRoutingStrategy] = useState('round-robin');
   const [pending, setPending] = useState<Record<PendingKey, boolean>>({} as Record<PendingKey, boolean>);
   const [error, setError] = useState('');
 
@@ -41,9 +46,34 @@ export function SettingsPage() {
       setLoading(true);
       setError('');
       try {
-        const data = (await fetchConfig()) as Config;
+        const [configResult, logsResult, prefixResult, routingResult] = await Promise.allSettled([
+          fetchConfig(),
+          configApi.getLogsMaxTotalSizeMb(),
+          configApi.getForceModelPrefix(),
+          configApi.getRoutingStrategy(),
+        ]);
+
+        if (configResult.status !== 'fulfilled') {
+          throw configResult.reason;
+        }
+
+        const data = configResult.value as Config;
         setProxyValue(data?.proxyUrl ?? '');
         setRetryValue(typeof data?.requestRetry === 'number' ? data.requestRetry : 0);
+
+        if (logsResult.status === 'fulfilled' && Number.isFinite(logsResult.value)) {
+          setLogsMaxTotalSizeMb(Math.max(0, Number(logsResult.value)));
+          updateConfigValue('logs-max-total-size-mb', Math.max(0, Number(logsResult.value)));
+        }
+
+        if (prefixResult.status === 'fulfilled') {
+          updateConfigValue('force-model-prefix', Boolean(prefixResult.value));
+        }
+
+        if (routingResult.status === 'fulfilled' && routingResult.value) {
+          setRoutingStrategy(String(routingResult.value));
+          updateConfigValue('routing/strategy', String(routingResult.value));
+        }
       } catch (err: any) {
         setError(err?.message || t('notification.refresh_failed'));
       } finally {
@@ -52,7 +82,7 @@ export function SettingsPage() {
     };
 
     load();
-  }, [fetchConfig, t]);
+  }, [fetchConfig, t, updateConfigValue]);
 
   useEffect(() => {
     if (config) {
@@ -60,8 +90,14 @@ export function SettingsPage() {
       if (typeof config.requestRetry === 'number') {
         setRetryValue(config.requestRetry);
       }
+      if (typeof config.logsMaxTotalSizeMb === 'number') {
+        setLogsMaxTotalSizeMb(config.logsMaxTotalSizeMb);
+      }
+      if (config.routingStrategy) {
+        setRoutingStrategy(config.routingStrategy);
+      }
     }
-  }, [config?.proxyUrl, config?.requestRetry]);
+  }, [config?.proxyUrl, config?.requestRetry, config?.logsMaxTotalSizeMb, config?.routingStrategy]);
 
   const setPendingFlag = (key: PendingKey, value: boolean) => {
     setPending((prev) => ({ ...prev, [key]: value }));
@@ -69,7 +105,7 @@ export function SettingsPage() {
 
   const toggleSetting = async (
     section: PendingKey,
-    rawKey: 'debug' | 'usage-statistics-enabled' | 'logging-to-file' | 'ws-auth',
+    rawKey: 'debug' | 'usage-statistics-enabled' | 'logging-to-file' | 'ws-auth' | 'force-model-prefix',
     value: boolean,
     updater: (val: boolean) => Promise<any>,
     successMessage: string
@@ -84,6 +120,8 @@ export function SettingsPage() {
           return config?.loggingToFile ?? false;
         case 'ws-auth':
           return config?.wsAuth ?? false;
+        case 'force-model-prefix':
+          return config?.forceModelPrefix ?? false;
         default:
           return false;
       }
@@ -162,6 +200,52 @@ export function SettingsPage() {
     }
   };
 
+  const handleLogsMaxTotalSizeUpdate = async () => {
+    const previous = config?.logsMaxTotalSizeMb ?? 0;
+    const parsed = Number(logsMaxTotalSizeMb);
+    if (!Number.isFinite(parsed) || parsed < 0) {
+      showNotification(t('login.error_invalid'), 'error');
+      setLogsMaxTotalSizeMb(previous);
+      return;
+    }
+    const normalized = Math.max(0, parsed);
+    setPendingFlag('logsMaxSize', true);
+    updateConfigValue('logs-max-total-size-mb', normalized);
+    try {
+      await configApi.updateLogsMaxTotalSizeMb(normalized);
+      clearCache('logs-max-total-size-mb');
+      showNotification(t('notification.logs_max_total_size_updated'), 'success');
+    } catch (err: any) {
+      setLogsMaxTotalSizeMb(previous);
+      updateConfigValue('logs-max-total-size-mb', previous);
+      showNotification(`${t('notification.update_failed')}: ${err?.message || ''}`, 'error');
+    } finally {
+      setPendingFlag('logsMaxSize', false);
+    }
+  };
+
+  const handleRoutingStrategyUpdate = async () => {
+    const strategy = routingStrategy.trim();
+    if (!strategy) {
+      showNotification(t('login.error_invalid'), 'error');
+      return;
+    }
+    const previous = config?.routingStrategy ?? 'round-robin';
+    setPendingFlag('routingStrategy', true);
+    updateConfigValue('routing/strategy', strategy);
+    try {
+      await configApi.updateRoutingStrategy(strategy);
+      clearCache('routing/strategy');
+      showNotification(t('notification.routing_strategy_updated'), 'success');
+    } catch (err: any) {
+      setRoutingStrategy(previous);
+      updateConfigValue('routing/strategy', previous);
+      showNotification(`${t('notification.update_failed')}: ${err?.message || ''}`, 'error');
+    } finally {
+      setPendingFlag('routingStrategy', false);
+    }
+  };
+
   const quotaSwitchProject = config?.quotaExceeded?.switchProject ?? false;
   const quotaSwitchPreview = config?.quotaExceeded?.switchPreviewModel ?? false;
 
@@ -171,63 +255,78 @@ export function SettingsPage() {
 
       <div className={styles.grid}>
         <Card>
-        {error && <div className="error-box">{error}</div>}
-        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
-          <ToggleSwitch
-            label={t('basic_settings.debug_enable')}
-            checked={config?.debug ?? false}
-            disabled={disableControls || pending.debug || loading}
-            onChange={(value) =>
-              toggleSetting('debug', 'debug', value, configApi.updateDebug, t('notification.debug_updated'))
-            }
-          />
+          {error && <div className="error-box">{error}</div>}
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+            <ToggleSwitch
+              label={t('basic_settings.debug_enable')}
+              checked={config?.debug ?? false}
+              disabled={disableControls || pending.debug || loading}
+              onChange={(value) =>
+                toggleSetting('debug', 'debug', value, configApi.updateDebug, t('notification.debug_updated'))
+              }
+            />
 
-          <ToggleSwitch
-            label={t('basic_settings.usage_statistics_enable')}
-            checked={config?.usageStatisticsEnabled ?? false}
-            disabled={disableControls || pending.usage || loading}
-            onChange={(value) =>
-              toggleSetting(
-                'usage',
-                'usage-statistics-enabled',
-                value,
-                configApi.updateUsageStatistics,
-                t('notification.usage_statistics_updated')
-              )
-            }
-          />
+            <ToggleSwitch
+              label={t('basic_settings.usage_statistics_enable')}
+              checked={config?.usageStatisticsEnabled ?? false}
+              disabled={disableControls || pending.usage || loading}
+              onChange={(value) =>
+                toggleSetting(
+                  'usage',
+                  'usage-statistics-enabled',
+                  value,
+                  configApi.updateUsageStatistics,
+                  t('notification.usage_statistics_updated')
+                )
+              }
+            />
 
-          <ToggleSwitch
-            label={t('basic_settings.logging_to_file_enable')}
-            checked={config?.loggingToFile ?? false}
-            disabled={disableControls || pending.loggingToFile || loading}
-            onChange={(value) =>
-              toggleSetting(
-                'loggingToFile',
-                'logging-to-file',
-                value,
-                configApi.updateLoggingToFile,
-                t('notification.logging_to_file_updated')
-              )
-            }
-          />
+            <ToggleSwitch
+              label={t('basic_settings.logging_to_file_enable')}
+              checked={config?.loggingToFile ?? false}
+              disabled={disableControls || pending.loggingToFile || loading}
+              onChange={(value) =>
+                toggleSetting(
+                  'loggingToFile',
+                  'logging-to-file',
+                  value,
+                  configApi.updateLoggingToFile,
+                  t('notification.logging_to_file_updated')
+                )
+              }
+            />
 
-          <ToggleSwitch
-            label={t('basic_settings.ws_auth_enable')}
-            checked={config?.wsAuth ?? false}
-            disabled={disableControls || pending.wsAuth || loading}
-            onChange={(value) =>
-              toggleSetting(
-                'wsAuth',
-                'ws-auth',
-                value,
-                configApi.updateWsAuth,
-                t('notification.ws_auth_updated')
-              )
-            }
-          />
-        </div>
-      </Card>
+            <ToggleSwitch
+              label={t('basic_settings.ws_auth_enable')}
+              checked={config?.wsAuth ?? false}
+              disabled={disableControls || pending.wsAuth || loading}
+              onChange={(value) =>
+                toggleSetting(
+                  'wsAuth',
+                  'ws-auth',
+                  value,
+                  configApi.updateWsAuth,
+                  t('notification.ws_auth_updated')
+                )
+              }
+            />
+
+            <ToggleSwitch
+              label={t('basic_settings.force_model_prefix_enable')}
+              checked={config?.forceModelPrefix ?? false}
+              disabled={disableControls || pending.forceModelPrefix || loading}
+              onChange={(value) =>
+                toggleSetting(
+                  'forceModelPrefix',
+                  'force-model-prefix',
+                  value,
+                  configApi.updateForceModelPrefix,
+                  t('notification.force_model_prefix_updated')
+                )
+              }
+            />
+          </div>
+        </Card>
 
       <Card title={t('basic_settings.proxy_title')}>
         <Input
@@ -271,6 +370,57 @@ export function SettingsPage() {
         </div>
       </Card>
 
+      <Card title={t('basic_settings.logs_max_total_size_title')}>
+        <div className={`${styles.retryRow} ${styles.retryRowAligned} ${styles.retryRowInputGrow}`}>
+          <Input
+            label={t('basic_settings.logs_max_total_size_label')}
+            hint={t('basic_settings.logs_max_total_size_hint')}
+            type="number"
+            inputMode="numeric"
+            min={0}
+            step={1}
+            value={logsMaxTotalSizeMb}
+            onChange={(e) => setLogsMaxTotalSizeMb(Number(e.target.value))}
+            disabled={disableControls || loading}
+            className={styles.retryInput}
+          />
+          <Button
+            className={styles.retryButton}
+            onClick={handleLogsMaxTotalSizeUpdate}
+            loading={pending.logsMaxSize}
+            disabled={disableControls || loading}
+          >
+            {t('basic_settings.logs_max_total_size_update')}
+          </Button>
+        </div>
+      </Card>
+
+      <Card title={t('basic_settings.routing_title')}>
+        <div className={`${styles.retryRow} ${styles.retryRowAligned} ${styles.retryRowInputGrow}`}>
+          <div className="form-group">
+            <label>{t('basic_settings.routing_strategy_label')}</label>
+            <select
+              className="input"
+              value={routingStrategy}
+              onChange={(e) => setRoutingStrategy(e.target.value)}
+              disabled={disableControls || loading}
+            >
+              <option value="round-robin">{t('basic_settings.routing_strategy_round_robin')}</option>
+              <option value="fill-first">{t('basic_settings.routing_strategy_fill_first')}</option>
+            </select>
+            <div className="hint">{t('basic_settings.routing_strategy_hint')}</div>
+          </div>
+          <Button
+            className={styles.retryButton}
+            onClick={handleRoutingStrategyUpdate}
+            loading={pending.routingStrategy}
+            disabled={disableControls || loading}
+          >
+            {t('basic_settings.routing_strategy_update')}
+          </Button>
+        </div>
+      </Card>
+
       <Card title={t('basic_settings.quota_title')}>
         <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
           <ToggleSwitch

src/pages/SystemPage.tsx

@@ -11,7 +11,7 @@ import styles from './SystemPage.module.scss';
 
 export function SystemPage() {
   const { t, i18n } = useTranslation();
-  const { showNotification } = useNotificationStore();
+  const { showNotification, showConfirmation } = useNotificationStore();
   const auth = useAuthStore();
   const config = useConfigStore((state) => state.config);
   const fetchConfig = useConfigStore((state) => state.fetchConfig);
@@ -106,12 +106,19 @@ export function SystemPage() {
   };
 
   const handleClearLoginStorage = () => {
-    if (!window.confirm(t('system_info.clear_login_confirm'))) return;
-    auth.logout();
-    if (typeof localStorage === 'undefined') return;
-    const keysToRemove = [STORAGE_KEY_AUTH, 'isLoggedIn', 'apiBase', 'apiUrl', 'managementKey'];
-    keysToRemove.forEach((key) => localStorage.removeItem(key));
-    showNotification(t('notification.login_storage_cleared'), 'success');
+    showConfirmation({
+      title: t('system_info.clear_login_title', { defaultValue: 'Clear Login Storage' }),
+      message: t('system_info.clear_login_confirm'),
+      variant: 'danger',
+      confirmText: t('common.confirm'),
+      onConfirm: () => {
+        auth.logout();
+        if (typeof localStorage === 'undefined') return;
+        const keysToRemove = [STORAGE_KEY_AUTH, 'isLoggedIn', 'apiBase', 'apiUrl', 'managementKey'];
+        keysToRemove.forEach((key) => localStorage.removeItem(key));
+        showNotification(t('notification.login_storage_cleared'), 'success');
+      },
+    });
   };
 
   useEffect(() => {

src/pages/UsagePage.module.scss

@@ -456,6 +456,18 @@
   word-break: break-all;
 }
 
+.requestCountCell {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 6px;
+  font-variant-numeric: tabular-nums;
+}
+
+.requestBreakdown {
+  color: var(--text-secondary);
+  white-space: nowrap;
+}
+
 // Pricing Section (80%比例)
 .pricingSection {
   display: flex;

src/pages/UsagePage.tsx

@@ -14,6 +14,7 @@ import {
 import { Button } from '@/components/ui/Button';
 import { LoadingSpinner } from '@/components/ui/LoadingSpinner';
 import { useMediaQuery } from '@/hooks/useMediaQuery';
+import { useHeaderRefresh } from '@/hooks/useHeaderRefresh';
 import { useThemeStore } from '@/stores';
 import {
   StatCards,
@@ -63,6 +64,8 @@ export function UsagePage() {
     importing
   } = useUsageData();
 
+  useHeaderRefresh(loadUsage);
+
   // Chart lines state
   const [chartLines, setChartLines] = useState<string[]>(['all']);
   const MAX_CHART_LINES = 9;

src/services/api/authFiles.ts

@@ -4,10 +4,110 @@
 
 import { apiClient } from './client';
 import type { AuthFilesResponse } from '@/types/authFile';
+import type { OAuthModelAliasEntry } from '@/types';
+
+type StatusError = { status?: number };
+type AuthFileStatusResponse = { status: string; disabled: boolean };
+
+const getStatusCode = (err: unknown): number | undefined => {
+  if (!err || typeof err !== 'object') return undefined;
+  if ('status' in err) return (err as StatusError).status;
+  return undefined;
+};
+
+const normalizeOauthExcludedModels = (payload: unknown): Record<string, string[]> => {
+  if (!payload || typeof payload !== 'object') return {};
+
+  const record = payload as Record<string, unknown>;
+  const source = record['oauth-excluded-models'] ?? record.items ?? payload;
+  if (!source || typeof source !== 'object') return {};
+
+  const result: Record<string, string[]> = {};
+
+  Object.entries(source as Record<string, unknown>).forEach(([provider, models]) => {
+    const key = String(provider ?? '')
+      .trim()
+      .toLowerCase();
+    if (!key) return;
+
+    const rawList = Array.isArray(models)
+      ? models
+      : typeof models === 'string'
+        ? models.split(/[\n,]+/)
+        : [];
+
+    const seen = new Set<string>();
+    const normalized: string[] = [];
+    rawList.forEach((item) => {
+      const trimmed = String(item ?? '').trim();
+      if (!trimmed) return;
+      const modelKey = trimmed.toLowerCase();
+      if (seen.has(modelKey)) return;
+      seen.add(modelKey);
+      normalized.push(trimmed);
+    });
+
+    result[key] = normalized;
+  });
+
+  return result;
+};
+
+const normalizeOauthModelAlias = (payload: unknown): Record<string, OAuthModelAliasEntry[]> => {
+  if (!payload || typeof payload !== 'object') return {};
+
+  const record = payload as Record<string, unknown>;
+  const source =
+    record['oauth-model-alias'] ??
+    record.items ??
+    payload;
+  if (!source || typeof source !== 'object') return {};
+
+  const result: Record<string, OAuthModelAliasEntry[]> = {};
+
+  Object.entries(source as Record<string, unknown>).forEach(([channel, mappings]) => {
+    const key = String(channel ?? '')
+      .trim()
+      .toLowerCase();
+    if (!key) return;
+    if (!Array.isArray(mappings)) return;
+
+	    const seen = new Set<string>();
+	    const normalized = mappings
+	      .map((item) => {
+	        if (!item || typeof item !== 'object') return null;
+	        const entry = item as Record<string, unknown>;
+	        const name = String(entry.name ?? entry.id ?? entry.model ?? '').trim();
+	        const alias = String(entry.alias ?? '').trim();
+	        if (!name || !alias) return null;
+	        const fork = entry.fork === true;
+	        return fork ? { name, alias, fork } : { name, alias };
+	      })
+      .filter(Boolean)
+      .filter((entry) => {
+        const aliasEntry = entry as OAuthModelAliasEntry;
+        const dedupeKey = `${aliasEntry.name.toLowerCase()}::${aliasEntry.alias.toLowerCase()}::${aliasEntry.fork ? '1' : '0'}`;
+        if (seen.has(dedupeKey)) return false;
+        seen.add(dedupeKey);
+        return true;
+      }) as OAuthModelAliasEntry[];
+
+    if (normalized.length) {
+      result[key] = normalized;
+    }
+  });
+
+  return result;
+};
+
+const OAUTH_MODEL_ALIAS_ENDPOINT = '/oauth-model-alias';
 
 export const authFilesApi = {
   list: () => apiClient.get<AuthFilesResponse>('/auth-files'),
 
+  setStatus: (name: string, disabled: boolean) =>
+    apiClient.patch<AuthFileStatusResponse>('/auth-files/status', { name, disabled }),
+
   upload: (file: File) => {
     const formData = new FormData();
     formData.append('file', file, file.name);
@@ -18,11 +118,18 @@ export const authFilesApi = {
 
   deleteAll: () => apiClient.delete('/auth-files', { params: { all: true } }),
 
+  downloadText: async (name: string): Promise<string> => {
+    const response = await apiClient.getRaw(`/auth-files/download?name=${encodeURIComponent(name)}`, {
+      responseType: 'blob'
+    });
+    const blob = response.data as Blob;
+    return blob.text();
+  },
+
   // OAuth 排除模型
   async getOauthExcludedModels(): Promise<Record<string, string[]>> {
     const data = await apiClient.get('/oauth-excluded-models');
-    const payload = (data && (data['oauth-excluded-models'] ?? data.items ?? data)) as any;
-    return payload && typeof payload === 'object' ? payload : {};
+    return normalizeOauthExcludedModels(data);
   },
 
   saveOauthExcludedModels: (provider: string, models: string[]) =>
@@ -31,9 +138,48 @@ export const authFilesApi = {
   deleteOauthExcludedEntry: (provider: string) =>
     apiClient.delete(`/oauth-excluded-models?provider=${encodeURIComponent(provider)}`),
 
+  replaceOauthExcludedModels: (map: Record<string, string[]>) =>
+    apiClient.put('/oauth-excluded-models', normalizeOauthExcludedModels(map)),
+
+  // OAuth 模型别名
+  async getOauthModelAlias(): Promise<Record<string, OAuthModelAliasEntry[]>> {
+    const data = await apiClient.get(OAUTH_MODEL_ALIAS_ENDPOINT);
+    return normalizeOauthModelAlias(data);
+  },
+
+  saveOauthModelAlias: async (channel: string, aliases: OAuthModelAliasEntry[]) => {
+    const normalizedChannel = String(channel ?? '')
+      .trim()
+      .toLowerCase();
+    const normalizedAliases = normalizeOauthModelAlias({ [normalizedChannel]: aliases })[normalizedChannel] ?? [];
+    await apiClient.patch(OAUTH_MODEL_ALIAS_ENDPOINT, { channel: normalizedChannel, aliases: normalizedAliases });
+  },
+
+  deleteOauthModelAlias: async (channel: string) => {
+    const normalizedChannel = String(channel ?? '')
+      .trim()
+      .toLowerCase();
+
+    try {
+      await apiClient.patch(OAUTH_MODEL_ALIAS_ENDPOINT, { channel: normalizedChannel, aliases: [] });
+    } catch (err: unknown) {
+      const status = getStatusCode(err);
+      if (status !== 405) throw err;
+      await apiClient.delete(`${OAUTH_MODEL_ALIAS_ENDPOINT}?channel=${encodeURIComponent(normalizedChannel)}`);
+    }
+  },
+
   // 获取认证凭证支持的模型
   async getModelsForAuthFile(name: string): Promise<{ id: string; display_name?: string; type?: string; owned_by?: string }[]> {
     const data = await apiClient.get(`/auth-files/models?name=${encodeURIComponent(name)}`);
     return (data && Array.isArray(data['models'])) ? data['models'] : [];
+  },
+
+  // 获取指定 channel 的模型定义
+  async getModelDefinitions(channel: string): Promise<{ id: string; display_name?: string; type?: string; owned_by?: string }[]> {
+    const normalizedChannel = String(channel ?? '').trim().toLowerCase();
+    if (!normalizedChannel) return [];
+    const data = await apiClient.get(`/model-definitions/${encodeURIComponent(normalizedChannel)}`);
+    return (data && Array.isArray(data['models'])) ? data['models'] : [];
   }
 };

src/services/api/config.ts

@@ -68,8 +68,48 @@ export const configApi = {
    */
   updateLoggingToFile: (enabled: boolean) => apiClient.put('/logging-to-file', { value: enabled }),
 
+  /**
+   * 获取日志总大小上限（MB）
+   */
+  async getLogsMaxTotalSizeMb(): Promise<number> {
+    const data = await apiClient.get('/logs-max-total-size-mb');
+    return data?.['logs-max-total-size-mb'] ?? data?.logsMaxTotalSizeMb ?? 0;
+  },
+
+  /**
+   * 更新日志总大小上限（MB）
+   */
+  updateLogsMaxTotalSizeMb: (value: number) =>
+    apiClient.put('/logs-max-total-size-mb', { value }),
+
   /**
    * WebSocket 鉴权开关
    */
   updateWsAuth: (enabled: boolean) => apiClient.put('/ws-auth', { value: enabled }),
+
+  /**
+   * 获取强制模型前缀开关
+   */
+  async getForceModelPrefix(): Promise<boolean> {
+    const data = await apiClient.get('/force-model-prefix');
+    return data?.['force-model-prefix'] ?? data?.forceModelPrefix ?? false;
+  },
+
+  /**
+   * 更新强制模型前缀开关
+   */
+  updateForceModelPrefix: (enabled: boolean) => apiClient.put('/force-model-prefix', { value: enabled }),
+
+  /**
+   * 获取路由策略
+   */
+  async getRoutingStrategy(): Promise<string> {
+    const data = await apiClient.get('/routing/strategy');
+    return data?.strategy ?? data?.['routing-strategy'] ?? data?.routingStrategy ?? 'round-robin';
+  },
+
+  /**
+   * 更新路由策略
+   */
+  updateRoutingStrategy: (strategy: string) => apiClient.put('/routing/strategy', { value: strategy }),
 };

src/services/api/models.ts

@@ -20,12 +20,21 @@ const normalizeBaseUrl = (baseUrl: string): string => {
 const buildModelsEndpoint = (baseUrl: string): string => {
   const normalized = normalizeBaseUrl(baseUrl);
   if (!normalized) return '';
-  return normalized.endsWith('/v1') ? `${normalized}/models` : `${normalized}/v1/models`;
+  return `${normalized}/models`;
+};
+
+const buildV1ModelsEndpoint = (baseUrl: string): string => {
+  const normalized = normalizeBaseUrl(baseUrl);
+  if (!normalized) return '';
+  return `${normalized}/v1/models`;
 };
 
 export const modelsApi = {
+  /**
+   * Fetch available models from /v1/models endpoint (for system info page)
+   */
   async fetchModels(baseUrl: string, apiKey?: string, headers: Record<string, string> = {}) {
-    const endpoint = buildModelsEndpoint(baseUrl);
+    const endpoint = buildV1ModelsEndpoint(baseUrl);
     if (!endpoint) {
       throw new Error('Invalid base url');
     }
@@ -42,6 +51,9 @@ export const modelsApi = {
     return normalizeModelList(payload, { dedupe: true });
   },
 
+  /**
+   * Fetch models from /models endpoint via api-call (for OpenAI provider discovery)
+   */
   async fetchModelsViaApiCall(
     baseUrl: string,
     apiKey?: string,

src/services/api/providers.ts

@@ -61,6 +61,30 @@ const serializeProviderKey = (config: ProviderKeyConfig) => {
   return payload;
 };
 
+const serializeVertexModelAliases = (models?: ModelAlias[]) =>
+  Array.isArray(models)
+    ? models
+        .map((model) => {
+          const name = typeof model?.name === 'string' ? model.name.trim() : '';
+          const alias = typeof model?.alias === 'string' ? model.alias.trim() : '';
+          if (!name || !alias) return null;
+          return { name, alias };
+        })
+        .filter(Boolean)
+    : undefined;
+
+const serializeVertexKey = (config: ProviderKeyConfig) => {
+  const payload: Record<string, any> = { 'api-key': config.apiKey };
+  if (config.prefix?.trim()) payload.prefix = config.prefix.trim();
+  if (config.baseUrl) payload['base-url'] = config.baseUrl;
+  if (config.proxyUrl) payload['proxy-url'] = config.proxyUrl;
+  const headers = serializeHeaders(config.headers);
+  if (headers) payload.headers = headers;
+  const models = serializeVertexModelAliases(config.models);
+  if (models && models.length) payload.models = models;
+  return payload;
+};
+
 const serializeGeminiKey = (config: GeminiKeyConfig) => {
   const payload: Record<string, any> = { 'api-key': config.apiKey };
   if (config.prefix?.trim()) payload.prefix = config.prefix.trim();
@@ -140,6 +164,22 @@ export const providersApi = {
   deleteClaudeConfig: (apiKey: string) =>
     apiClient.delete(`/claude-api-key?api-key=${encodeURIComponent(apiKey)}`),
 
+  async getVertexConfigs(): Promise<ProviderKeyConfig[]> {
+    const data = await apiClient.get('/vertex-api-key');
+    const list = (data && (data['vertex-api-key'] ?? data.items ?? data)) as any;
+    if (!Array.isArray(list)) return [];
+    return list.map((item) => normalizeProviderKeyConfig(item)).filter(Boolean) as ProviderKeyConfig[];
+  },
+
+  saveVertexConfigs: (configs: ProviderKeyConfig[]) =>
+    apiClient.put('/vertex-api-key', configs.map((item) => serializeVertexKey(item))),
+
+  updateVertexConfig: (index: number, value: ProviderKeyConfig) =>
+    apiClient.patch('/vertex-api-key', { index, value: serializeVertexKey(value) }),
+
+  deleteVertexConfig: (apiKey: string) =>
+    apiClient.delete(`/vertex-api-key?api-key=${encodeURIComponent(apiKey)}`),
+
   async getOpenAIProviders(): Promise<OpenAIProviderConfig[]> {
     const data = await apiClient.get('/openai-compatibility');
     const list = (data && (data['openai-compatibility'] ?? data.items ?? data)) as any;

src/services/api/transformers.ts

@@ -258,7 +258,15 @@ export const normalizeConfigResponse = (raw: any): Config => {
   config.usageStatisticsEnabled = raw['usage-statistics-enabled'] ?? raw.usageStatisticsEnabled;
   config.requestLog = raw['request-log'] ?? raw.requestLog;
   config.loggingToFile = raw['logging-to-file'] ?? raw.loggingToFile;
+  config.logsMaxTotalSizeMb = raw['logs-max-total-size-mb'] ?? raw.logsMaxTotalSizeMb;
   config.wsAuth = raw['ws-auth'] ?? raw.wsAuth;
+  config.forceModelPrefix = raw['force-model-prefix'] ?? raw.forceModelPrefix;
+  const routing = raw.routing;
+  if (routing && typeof routing === 'object') {
+    config.routingStrategy = routing.strategy ?? routing['strategy'];
+  } else {
+    config.routingStrategy = raw['routing-strategy'] ?? raw.routingStrategy;
+  }
   config.apiKeys = Array.isArray(raw['api-keys']) ? raw['api-keys'].slice() : raw.apiKeys;
 
   const geminiList = raw['gemini-api-key'] ?? raw.geminiApiKey ?? raw.geminiApiKeys;
@@ -282,6 +290,13 @@ export const normalizeConfigResponse = (raw: any): Config => {
       .filter(Boolean) as ProviderKeyConfig[];
   }
 
+  const vertexList = raw['vertex-api-key'] ?? raw.vertexApiKey ?? raw.vertexApiKeys;
+  if (Array.isArray(vertexList)) {
+    config.vertexApiKeys = vertexList
+      .map((item: any) => normalizeProviderKeyConfig(item))
+      .filter(Boolean) as ProviderKeyConfig[];
+  }
+
   const openaiList = raw['openai-compatibility'] ?? raw.openaiCompatibility ?? raw.openAICompatibility;
   if (Array.isArray(openaiList)) {
     config.openaiCompatibility = openaiList

src/stores/useConfigStore.ts

@@ -38,12 +38,16 @@ const SECTION_KEYS: RawConfigSection[] = [
   'usage-statistics-enabled',
   'request-log',
   'logging-to-file',
+  'logs-max-total-size-mb',
   'ws-auth',
+  'force-model-prefix',
+  'routing/strategy',
   'api-keys',
   'ampcode',
   'gemini-api-key',
   'codex-api-key',
   'claude-api-key',
+  'vertex-api-key',
   'openai-compatibility',
   'oauth-excluded-models'
 ];
@@ -65,8 +69,14 @@ const extractSectionValue = (config: Config | null, section?: RawConfigSection)
       return config.requestLog;
     case 'logging-to-file':
       return config.loggingToFile;
+    case 'logs-max-total-size-mb':
+      return config.logsMaxTotalSizeMb;
     case 'ws-auth':
       return config.wsAuth;
+    case 'force-model-prefix':
+      return config.forceModelPrefix;
+    case 'routing/strategy':
+      return config.routingStrategy;
     case 'api-keys':
       return config.apiKeys;
     case 'ampcode':
@@ -77,6 +87,8 @@ const extractSectionValue = (config: Config | null, section?: RawConfigSection)
       return config.codexApiKeys;
     case 'claude-api-key':
       return config.claudeApiKeys;
+    case 'vertex-api-key':
+      return config.vertexApiKeys;
     case 'openai-compatibility':
       return config.openaiCompatibility;
     case 'oauth-excluded-models':
@@ -194,9 +206,18 @@ export const useConfigStore = create<ConfigState>((set, get) => ({
         case 'logging-to-file':
           nextConfig.loggingToFile = value;
           break;
+        case 'logs-max-total-size-mb':
+          nextConfig.logsMaxTotalSizeMb = value;
+          break;
         case 'ws-auth':
           nextConfig.wsAuth = value;
           break;
+        case 'force-model-prefix':
+          nextConfig.forceModelPrefix = value;
+          break;
+        case 'routing/strategy':
+          nextConfig.routingStrategy = value;
+          break;
         case 'api-keys':
           nextConfig.apiKeys = value;
           break;
@@ -212,6 +233,9 @@ export const useConfigStore = create<ConfigState>((set, get) => ({
         case 'claude-api-key':
           nextConfig.claudeApiKeys = value;
           break;
+        case 'vertex-api-key':
+          nextConfig.vertexApiKeys = value;
+          break;
         case 'openai-compatibility':
           nextConfig.openaiCompatibility = value;
           break;

src/stores/useNotificationStore.ts

@@ -8,15 +8,38 @@ import type { Notification, NotificationType } from '@/types';
 import { generateId } from '@/utils/helpers';
 import { NOTIFICATION_DURATION_MS } from '@/utils/constants';
 
+interface ConfirmationOptions {
+  title?: string;
+  message: string;
+  confirmText?: string;
+  cancelText?: string;
+  variant?: 'danger' | 'primary' | 'secondary';
+  onConfirm: () => void | Promise<void>;
+  onCancel?: () => void;
+}
+
 interface NotificationState {
   notifications: Notification[];
+  confirmation: {
+    isOpen: boolean;
+    isLoading: boolean;
+    options: ConfirmationOptions | null;
+  };
   showNotification: (message: string, type?: NotificationType, duration?: number) => void;
   removeNotification: (id: string) => void;
   clearAll: () => void;
+  showConfirmation: (options: ConfirmationOptions) => void;
+  hideConfirmation: () => void;
+  setConfirmationLoading: (loading: boolean) => void;
 }
 
 export const useNotificationStore = create<NotificationState>((set) => ({
   notifications: [],
+  confirmation: {
+    isOpen: false,
+    isLoading: false,
+    options: null
+  },
 
   showNotification: (message, type = 'info', duration = NOTIFICATION_DURATION_MS) => {
     const id = generateId();
@@ -49,5 +72,34 @@ export const useNotificationStore = create<NotificationState>((set) => ({
 
   clearAll: () => {
     set({ notifications: [] });
+  },
+
+  showConfirmation: (options) => {
+    set({
+      confirmation: {
+        isOpen: true,
+        isLoading: false,
+        options
+      }
+    });
+  },
+
+  hideConfirmation: () => {
+    set((state) => ({
+      confirmation: {
+        ...state.confirmation,
+        isOpen: false,
+        options: null // Cleanup
+      }
+    }));
+  },
+
+  setConfirmationLoading: (loading) => {
+    set((state) => ({
+      confirmation: {
+        ...state.confirmation,
+        isLoading: loading
+      }
+    }));
   }
 }));

src/styles/components.scss

@@ -453,6 +453,18 @@ textarea {
   &:active {
     transform: scale(0.95);
   }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+    transform: none;
+  }
+
+  &:disabled:hover {
+    color: var(--text-secondary);
+    background: var(--bg-secondary);
+    transform: none;
+  }
 }
 
 .modal-header {

src/styles/themes.scss

@@ -32,6 +32,9 @@
   --failure-badge-text: #991b1b;
   --failure-badge-border: #fca5a5;
 
+  --count-badge-bg: rgba(59, 130, 246, 0.14);
+  --count-badge-text: var(--primary-active);
+
   --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
   --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
 }
@@ -66,6 +69,9 @@
   --failure-badge-text: #fca5a5;
   --failure-badge-border: #dc2626;
 
+  --count-badge-bg: rgba(59, 130, 246, 0.25);
+  --count-badge-text: var(--primary-active);
+
   --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.3);
   --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.3);
 }

src/types/config.ts

@@ -19,12 +19,16 @@ export interface Config {
   usageStatisticsEnabled?: boolean;
   requestLog?: boolean;
   loggingToFile?: boolean;
+  logsMaxTotalSizeMb?: number;
   wsAuth?: boolean;
+  forceModelPrefix?: boolean;
+  routingStrategy?: string;
   apiKeys?: string[];
   ampcode?: AmpcodeConfig;
   geminiApiKeys?: GeminiKeyConfig[];
   codexApiKeys?: ProviderKeyConfig[];
   claudeApiKeys?: ProviderKeyConfig[];
+  vertexApiKeys?: ProviderKeyConfig[];
   openaiCompatibility?: OpenAIProviderConfig[];
   oauthExcludedModels?: Record<string, string[]>;
   raw?: Record<string, any>;
@@ -38,12 +42,16 @@ export type RawConfigSection =
   | 'usage-statistics-enabled'
   | 'request-log'
   | 'logging-to-file'
+  | 'logs-max-total-size-mb'
   | 'ws-auth'
+  | 'force-model-prefix'
+  | 'routing/strategy'
   | 'api-keys'
   | 'ampcode'
   | 'gemini-api-key'
   | 'codex-api-key'
   | 'claude-api-key'
+  | 'vertex-api-key'
   | 'openai-compatibility'
   | 'oauth-excluded-models';
 

src/types/oauth.ts

@@ -33,3 +33,12 @@ export interface OAuthConfig {
 export interface OAuthExcludedModels {
   models: string[];
 }
+
+// OAuth 模型别名
+export interface OAuthModelAliasEntry {
+  name: string;
+  alias: string;
+  fork?: boolean;
+}
+
+export type OAuthModelAlias = Record<string, OAuthModelAliasEntry[]>;

src/types/quota.ts

@@ -55,6 +55,7 @@ export interface AntigravityQuotaGroupDefinition {
 export interface GeminiCliQuotaGroupDefinition {
   id: string;
   label: string;
+  preferredModelId?: string;
   modelIds: string[];
 }
 

src/utils/format.ts

@@ -4,16 +4,19 @@
  */
 
 /**
- * 隐藏 API Key 中间部分
+ * 隐藏 API Key 中间部分，仅保留前后两位
  */
-export function maskApiKey(key: string, visibleChars: number = 4): string {
-  if (!key || key.length <= visibleChars * 2) {
-    return key;
+export function maskApiKey(key: string): string {
+  const trimmed = String(key || '').trim();
+  if (!trimmed) {
+    return '';
   }
 
-  const start = key.slice(0, visibleChars);
-  const end = key.slice(-visibleChars);
-  const maskedLength = Math.min(key.length - visibleChars * 2, 20);
+  const MASKED_LENGTH = 10;
+  const visibleChars = trimmed.length < 4 ? 1 : 2;
+  const start = trimmed.slice(0, visibleChars);
+  const end = trimmed.slice(-visibleChars);
+  const maskedLength = Math.max(MASKED_LENGTH - visibleChars * 2, 1);
   const masked = '*'.repeat(maskedLength);
 
   return `${start}${masked}${end}`;

src/utils/quota/builders.ts

@@ -8,7 +8,7 @@ import type {
   AntigravityQuotaInfo,
   AntigravityModelsPayload,
   GeminiCliParsedBucket,
-  GeminiCliQuotaBucketState
+  GeminiCliQuotaBucketState,
 } from '@/types';
 import { ANTIGRAVITY_QUOTA_GROUPS, GEMINI_CLI_GROUP_LOOKUP } from './constants';
 import { normalizeQuotaFraction } from './parsers';
@@ -35,7 +35,19 @@ export function buildGeminiCliQuotaBuckets(
 ): GeminiCliQuotaBucketState[] {
   if (buckets.length === 0) return [];
 
-  const grouped = new Map<string, GeminiCliQuotaBucketState & { modelIds: string[] }>();
+  type GeminiCliQuotaBucketGroup = {
+    id: string;
+    label: string;
+    tokenType: string | null;
+    modelIds: string[];
+    preferredModelId?: string;
+    preferredBucket?: GeminiCliParsedBucket;
+    fallbackRemainingFraction: number | null;
+    fallbackRemainingAmount: number | null;
+    fallbackResetTime: string | undefined;
+  };
+
+  const grouped = new Map<string, GeminiCliQuotaBucketGroup>();
 
   buckets.forEach((bucket) => {
     if (isIgnoredGeminiCliModel(bucket.modelId)) return;
@@ -47,37 +59,55 @@ export function buildGeminiCliQuotaBuckets(
     const existing = grouped.get(mapKey);
 
     if (!existing) {
+      const preferredModelId = group?.preferredModelId;
+      const preferredBucket =
+        preferredModelId && bucket.modelId === preferredModelId ? bucket : undefined;
       grouped.set(mapKey, {
         id: `${groupId}${tokenKey ? `-${tokenKey}` : ''}`,
         label,
-        remainingFraction: bucket.remainingFraction,
-        remainingAmount: bucket.remainingAmount,
-        resetTime: bucket.resetTime,
         tokenType: bucket.tokenType,
-        modelIds: [bucket.modelId]
+        modelIds: [bucket.modelId],
+        preferredModelId,
+        preferredBucket,
+        fallbackRemainingFraction: bucket.remainingFraction,
+        fallbackRemainingAmount: bucket.remainingAmount,
+        fallbackResetTime: bucket.resetTime,
       });
       return;
     }
 
-    existing.remainingFraction = minNullableNumber(
-      existing.remainingFraction,
+    existing.fallbackRemainingFraction = minNullableNumber(
+      existing.fallbackRemainingFraction,
       bucket.remainingFraction
     );
-    existing.remainingAmount = minNullableNumber(existing.remainingAmount, bucket.remainingAmount);
-    existing.resetTime = pickEarlierResetTime(existing.resetTime, bucket.resetTime);
+    existing.fallbackRemainingAmount = minNullableNumber(
+      existing.fallbackRemainingAmount,
+      bucket.remainingAmount
+    );
+    existing.fallbackResetTime = pickEarlierResetTime(existing.fallbackResetTime, bucket.resetTime);
     existing.modelIds.push(bucket.modelId);
+
+    if (existing.preferredModelId && bucket.modelId === existing.preferredModelId) {
+      existing.preferredBucket = bucket;
+    }
   });
 
   return Array.from(grouped.values()).map((bucket) => {
     const uniqueModelIds = Array.from(new Set(bucket.modelIds));
+    const preferred = bucket.preferredBucket;
+    const remainingFraction = preferred
+      ? preferred.remainingFraction
+      : bucket.fallbackRemainingFraction;
+    const remainingAmount = preferred ? preferred.remainingAmount : bucket.fallbackRemainingAmount;
+    const resetTime = preferred ? preferred.resetTime : bucket.fallbackResetTime;
     return {
       id: bucket.id,
       label: bucket.label,
-      remainingFraction: bucket.remainingFraction,
-      remainingAmount: bucket.remainingAmount,
-      resetTime: bucket.resetTime,
+      remainingFraction,
+      remainingAmount,
+      resetTime,
       tokenType: bucket.tokenType,
-      modelIds: uniqueModelIds
+      modelIds: uniqueModelIds,
     };
   });
 }
@@ -101,7 +131,7 @@ export function getAntigravityQuotaInfo(entry?: AntigravityQuotaInfo): {
   return {
     remainingFraction,
     resetTime,
-    displayName
+    displayName,
   };
 }
 
@@ -150,7 +180,7 @@ export function buildAntigravityQuotaGroups(
           id,
           remainingFraction,
           resetTime: info.resetTime,
-          displayName: info.displayName
+          displayName: info.displayName,
         };
       })
       .filter((entry): entry is NonNullable<typeof entry> => entry !== null);
@@ -168,7 +198,7 @@ export function buildAntigravityQuotaGroups(
       label,
       models: quotaEntries.map((entry) => entry.id),
       remainingFraction,
-      resetTime
+      resetTime,
     };
   };
 

src/utils/quota/constants.ts

@@ -5,64 +5,64 @@
 import type {
   AntigravityQuotaGroupDefinition,
   GeminiCliQuotaGroupDefinition,
-  TypeColorSet
+  TypeColorSet,
 } from '@/types';
 
 // Theme colors for type badges
 export const TYPE_COLORS: Record<string, TypeColorSet> = {
   qwen: {
     light: { bg: '#e8f5e9', text: '#2e7d32' },
-    dark: { bg: '#1b5e20', text: '#81c784' }
+    dark: { bg: '#1b5e20', text: '#81c784' },
   },
   gemini: {
     light: { bg: '#e3f2fd', text: '#1565c0' },
-    dark: { bg: '#0d47a1', text: '#64b5f6' }
+    dark: { bg: '#0d47a1', text: '#64b5f6' },
   },
   'gemini-cli': {
     light: { bg: '#e7efff', text: '#1e4fa3' },
-    dark: { bg: '#1c3f73', text: '#a8c7ff' }
+    dark: { bg: '#1c3f73', text: '#a8c7ff' },
   },
   aistudio: {
     light: { bg: '#f0f2f5', text: '#2f343c' },
-    dark: { bg: '#373c42', text: '#cfd3db' }
+    dark: { bg: '#373c42', text: '#cfd3db' },
   },
   claude: {
     light: { bg: '#fce4ec', text: '#c2185b' },
-    dark: { bg: '#880e4f', text: '#f48fb1' }
+    dark: { bg: '#880e4f', text: '#f48fb1' },
   },
   codex: {
     light: { bg: '#fff3e0', text: '#ef6c00' },
-    dark: { bg: '#e65100', text: '#ffb74d' }
+    dark: { bg: '#e65100', text: '#ffb74d' },
   },
   antigravity: {
     light: { bg: '#e0f7fa', text: '#006064' },
-    dark: { bg: '#004d40', text: '#80deea' }
+    dark: { bg: '#004d40', text: '#80deea' },
   },
   iflow: {
     light: { bg: '#f3e5f5', text: '#7b1fa2' },
-    dark: { bg: '#4a148c', text: '#ce93d8' }
+    dark: { bg: '#4a148c', text: '#ce93d8' },
   },
   empty: {
     light: { bg: '#f5f5f5', text: '#616161' },
-    dark: { bg: '#424242', text: '#bdbdbd' }
+    dark: { bg: '#424242', text: '#bdbdbd' },
   },
   unknown: {
     light: { bg: '#f0f0f0', text: '#666666', border: '1px dashed #999999' },
-    dark: { bg: '#3a3a3a', text: '#aaaaaa', border: '1px dashed #666666' }
-  }
+    dark: { bg: '#3a3a3a', text: '#aaaaaa', border: '1px dashed #666666' },
+  },
 };
 
 // Antigravity API configuration
 export const ANTIGRAVITY_QUOTA_URLS = [
   'https://daily-cloudcode-pa.googleapis.com/v1internal:fetchAvailableModels',
   'https://daily-cloudcode-pa.sandbox.googleapis.com/v1internal:fetchAvailableModels',
-  'https://cloudcode-pa.googleapis.com/v1internal:fetchAvailableModels'
+  'https://cloudcode-pa.googleapis.com/v1internal:fetchAvailableModels',
 ];
 
 export const ANTIGRAVITY_REQUEST_HEADERS = {
   Authorization: 'Bearer $TOKEN$',
   'Content-Type': 'application/json',
-  'User-Agent': 'antigravity/1.11.5 windows/amd64'
+  'User-Agent': 'antigravity/1.11.5 windows/amd64',
 };
 
 export const ANTIGRAVITY_QUOTA_GROUPS: AntigravityQuotaGroupDefinition[] = [
@@ -73,40 +73,40 @@ export const ANTIGRAVITY_QUOTA_GROUPS: AntigravityQuotaGroupDefinition[] = [
       'claude-sonnet-4-5-thinking',
       'claude-opus-4-5-thinking',
       'claude-sonnet-4-5',
-      'gpt-oss-120b-medium'
-    ]
+      'gpt-oss-120b-medium',
+    ],
   },
   {
     id: 'gemini-3-pro',
     label: 'Gemini 3 Pro',
-    identifiers: ['gemini-3-pro-high', 'gemini-3-pro-low']
+    identifiers: ['gemini-3-pro-high', 'gemini-3-pro-low'],
   },
   {
     id: 'gemini-2-5-flash',
     label: 'Gemini 2.5 Flash',
-    identifiers: ['gemini-2.5-flash', 'gemini-2.5-flash-thinking']
+    identifiers: ['gemini-2.5-flash', 'gemini-2.5-flash-thinking'],
   },
   {
     id: 'gemini-2-5-flash-lite',
     label: 'Gemini 2.5 Flash Lite',
-    identifiers: ['gemini-2.5-flash-lite']
+    identifiers: ['gemini-2.5-flash-lite'],
   },
   {
     id: 'gemini-2-5-cu',
     label: 'Gemini 2.5 CU',
-    identifiers: ['rev19-uic3-1p']
+    identifiers: ['rev19-uic3-1p'],
   },
   {
     id: 'gemini-3-flash',
     label: 'Gemini 3 Flash',
-    identifiers: ['gemini-3-flash']
+    identifiers: ['gemini-3-flash'],
   },
   {
     id: 'gemini-image',
     label: 'gemini-3-pro-image',
     identifiers: ['gemini-3-pro-image'],
-    labelFromModel: true
-  }
+    labelFromModel: true,
+  },
 ];
 
 // Gemini CLI API configuration
@@ -115,30 +115,22 @@ export const GEMINI_CLI_QUOTA_URL =
 
 export const GEMINI_CLI_REQUEST_HEADERS = {
   Authorization: 'Bearer $TOKEN$',
-  'Content-Type': 'application/json'
+  'Content-Type': 'application/json',
 };
 
 export const GEMINI_CLI_QUOTA_GROUPS: GeminiCliQuotaGroupDefinition[] = [
   {
-    id: 'gemini-2-5-flash-series',
-    label: 'Gemini 2.5 Flash Series',
-    modelIds: ['gemini-2.5-flash', 'gemini-2.5-flash-lite']
+    id: 'gemini-flash-series',
+    label: 'Gemini Flash Series',
+    preferredModelId: 'gemini-3-flash-preview',
+    modelIds: ['gemini-3-flash-preview', 'gemini-2.5-flash', 'gemini-2.5-flash-lite'],
   },
   {
-    id: 'gemini-2-5-pro',
-    label: 'Gemini 2.5 Pro',
-    modelIds: ['gemini-2.5-pro']
+    id: 'gemini-pro-series',
+    label: 'Gemini Pro Series',
+    preferredModelId: 'gemini-3-pro-preview',
+    modelIds: ['gemini-3-pro-preview', 'gemini-2.5-pro'],
   },
-  {
-    id: 'gemini-3-pro-preview',
-    label: 'Gemini 3 Pro Preview',
-    modelIds: ['gemini-3-pro-preview']
-  },
-  {
-    id: 'gemini-3-flash-preview',
-    label: 'Gemini 3 Flash Preview',
-    modelIds: ['gemini-3-flash-preview']
-  }
 ];
 
 export const GEMINI_CLI_GROUP_LOOKUP = new Map(
@@ -155,5 +147,5 @@ export const CODEX_USAGE_URL = 'https://chatgpt.com/backend-api/wham/usage';
 export const CODEX_REQUEST_HEADERS = {
   Authorization: 'Bearer $TOKEN$',
   'Content-Type': 'application/json',
-  'User-Agent': 'codex_cli_rs/0.76.0 (Debian 13.0.0; x86_64) WindowsTerminal'
+  'User-Agent': 'codex_cli_rs/0.76.0 (Debian 13.0.0; x86_64) WindowsTerminal',
 };

src/utils/usage.ts

@@ -73,6 +73,124 @@ const normalizeAuthIndex = (value: any) => {
   return null;
 };
 
+const USAGE_SOURCE_PREFIX_KEY = 'k:';
+const USAGE_SOURCE_PREFIX_MASKED = 'm:';
+const USAGE_SOURCE_PREFIX_TEXT = 't:';
+
+const KEY_LIKE_TOKEN_REGEX =
+  /(sk-[A-Za-z0-9-_]{6,}|sk-ant-[A-Za-z0-9-_]{6,}|AIza[0-9A-Za-z-_]{8,}|AI[a-zA-Z0-9_-]{6,}|hf_[A-Za-z0-9]{6,}|pk_[A-Za-z0-9]{6,}|rk_[A-Za-z0-9]{6,})/;
+const MASKED_TOKEN_HINT_REGEX = /^[^\s]{1,24}(\*{2,}|\.{3}|…)[^\s]{1,24}$/;
+
+const keyFingerprintCache = new Map<string, string>();
+
+const fnv1a64Hex = (value: string): string => {
+  const cached = keyFingerprintCache.get(value);
+  if (cached) return cached;
+
+  const FNV_OFFSET_BASIS = 0xcbf29ce484222325n;
+  const FNV_PRIME = 0x100000001b3n;
+
+  let hash = FNV_OFFSET_BASIS;
+  for (let i = 0; i < value.length; i++) {
+    hash ^= BigInt(value.charCodeAt(i));
+    hash = (hash * FNV_PRIME) & 0xffffffffffffffffn;
+  }
+
+  const hex = hash.toString(16).padStart(16, '0');
+  keyFingerprintCache.set(value, hex);
+  return hex;
+};
+
+const looksLikeRawSecret = (text: string): boolean => {
+  if (!text || /\s/.test(text)) return false;
+
+  const lower = text.toLowerCase();
+  if (lower.endsWith('.json')) return false;
+  if (lower.startsWith('http://') || lower.startsWith('https://')) return false;
+  if (/[\\/]/.test(text)) return false;
+
+  if (KEY_LIKE_TOKEN_REGEX.test(text)) return true;
+
+  if (text.length >= 32 && text.length <= 512) {
+    return true;
+  }
+
+  if (text.length >= 16 && text.length < 32 && /^[A-Za-z0-9._=-]+$/.test(text)) {
+    return /[A-Za-z]/.test(text) && /\d/.test(text);
+  }
+
+  return false;
+};
+
+const extractRawSecretFromText = (text: string): string | null => {
+  if (!text) return null;
+  if (looksLikeRawSecret(text)) return text;
+
+  const keyLikeMatch = text.match(KEY_LIKE_TOKEN_REGEX);
+  if (keyLikeMatch?.[0]) return keyLikeMatch[0];
+
+  const queryMatch = text.match(
+    /(?:[?&])(api[-_]?key|key|token|access_token|authorization)=([^&#\s]+)/i
+  );
+  const queryValue = queryMatch?.[2];
+  if (queryValue && looksLikeRawSecret(queryValue)) {
+    return queryValue;
+  }
+
+  const headerMatch = text.match(
+    /(api[-_]?key|key|token|access[-_]?token|authorization)\s*[:=]\s*([A-Za-z0-9._=-]+)/i
+  );
+  const headerValue = headerMatch?.[2];
+  if (headerValue && looksLikeRawSecret(headerValue)) {
+    return headerValue;
+  }
+
+  const bearerMatch = text.match(/\bBearer\s+([A-Za-z0-9._=-]{6,})/i);
+  const bearerValue = bearerMatch?.[1];
+  if (bearerValue && looksLikeRawSecret(bearerValue)) {
+    return bearerValue;
+  }
+
+  return null;
+};
+
+export function normalizeUsageSourceId(
+  value: unknown,
+  masker: (val: string) => string = maskApiKey
+): string {
+  const raw = typeof value === 'string' ? value : value === null || value === undefined ? '' : String(value);
+  const trimmed = raw.trim();
+  if (!trimmed) return '';
+
+  const extracted = extractRawSecretFromText(trimmed);
+  if (extracted) {
+    return `${USAGE_SOURCE_PREFIX_KEY}${fnv1a64Hex(extracted)}`;
+  }
+
+  if (MASKED_TOKEN_HINT_REGEX.test(trimmed)) {
+    return `${USAGE_SOURCE_PREFIX_MASKED}${masker(trimmed)}`;
+  }
+
+  return `${USAGE_SOURCE_PREFIX_TEXT}${trimmed}`;
+}
+
+export function buildCandidateUsageSourceIds(input: { apiKey?: string; prefix?: string }): string[] {
+  const result: string[] = [];
+
+  const prefix = input.prefix?.trim();
+  if (prefix) {
+    result.push(`${USAGE_SOURCE_PREFIX_TEXT}${prefix}`);
+  }
+
+  const apiKey = input.apiKey?.trim();
+  if (apiKey) {
+    result.push(`${USAGE_SOURCE_PREFIX_KEY}${fnv1a64Hex(apiKey)}`);
+    result.push(`${USAGE_SOURCE_PREFIX_MASKED}${maskApiKey(apiKey)}`);
+  }
+
+  return Array.from(new Set(result));
+}
+
 /**
  * 对使用数据中的敏感字段进行遮罩
  */
@@ -200,6 +318,7 @@ export function collectUsageDetails(usageData: any): UsageDetail[] {
         if (detail && detail.timestamp) {
           details.push({
             ...detail,
+            source: normalizeUsageSourceId(detail.source),
             __modelName: modelName
           });
         }
@@ -460,6 +579,8 @@ export function getApiStats(usageData: any, modelPrices: Record<string, ModelPri
 export function getModelStats(usageData: any, modelPrices: Record<string, ModelPrice>): Array<{
   model: string;
   requests: number;
+  successCount: number;
+  failureCount: number;
   tokens: number;
   cost: number;
 }> {
@@ -467,20 +588,39 @@ export function getModelStats(usageData: any, modelPrices: Record<string, ModelP
     return [];
   }
 
-  const modelMap = new Map<string, { requests: number; tokens: number; cost: number }>();
+  const modelMap = new Map<string, { requests: number; successCount: number; failureCount: number; tokens: number; cost: number }>();
 
   Object.values(usageData.apis as Record<string, any>).forEach(apiData => {
     const models = apiData?.models || {};
     Object.entries(models as Record<string, any>).forEach(([modelName, modelData]) => {
-      const existing = modelMap.get(modelName) || { requests: 0, tokens: 0, cost: 0 };
+      const existing = modelMap.get(modelName) || { requests: 0, successCount: 0, failureCount: 0, tokens: 0, cost: 0 };
       existing.requests += modelData.total_requests || 0;
       existing.tokens += modelData.total_tokens || 0;
 
+      const details = Array.isArray(modelData.details) ? modelData.details : [];
+
       const price = modelPrices[modelName];
-      if (price) {
-        const details = Array.isArray(modelData.details) ? modelData.details : [];
+
+      const hasExplicitCounts =
+        typeof modelData.success_count === 'number' || typeof modelData.failure_count === 'number';
+      if (hasExplicitCounts) {
+        existing.successCount += Number(modelData.success_count) || 0;
+        existing.failureCount += Number(modelData.failure_count) || 0;
+      }
+
+      if (details.length > 0 && (!hasExplicitCounts || price)) {
         details.forEach((detail: any) => {
-          existing.cost += calculateCost({ ...detail, __modelName: modelName }, modelPrices);
+          if (!hasExplicitCounts) {
+            if (detail?.failed === true) {
+              existing.failureCount += 1;
+            } else {
+              existing.successCount += 1;
+            }
+          }
+
+          if (price) {
+            existing.cost += calculateCost({ ...detail, __modelName: modelName }, modelPrices);
+          }
         });
       }
       modelMap.set(modelName, existing);
@@ -638,6 +778,8 @@ export interface ChartDataset {
   data: number[];
   borderColor: string;
   backgroundColor: string | CanvasGradient | ((context: ScriptableContext<'line'>) => string | CanvasGradient);
+  pointBackgroundColor?: string;
+  pointBorderColor?: string;
   fill: boolean;
   tension: number;
 }
@@ -743,6 +885,8 @@ export function buildChartData(
       backgroundColor: shouldFill
         ? (ctx) => buildAreaGradient(ctx, style.borderColor, style.backgroundColor)
         : style.backgroundColor,
+      pointBackgroundColor: style.borderColor,
+      pointBorderColor: style.borderColor,
       fill: shouldFill,
       tension: 0.35
     };
@@ -780,11 +924,11 @@ export function calculateStatusBarData(
   authIndexFilter?: number
 ): StatusBarData {
   const BLOCK_COUNT = 20;
-  const BLOCK_DURATION_MS = 5 * 60 * 1000; // 5 minutes
-  const HOUR_MS = 60 * 60 * 1000;
+  const BLOCK_DURATION_MS = 10 * 60 * 1000; // 10 minutes
+  const WINDOW_MS = 200 * 60 * 1000; // 200 minutes
 
   const now = Date.now();
-  const hourAgo = now - HOUR_MS;
+  const windowStart = now - WINDOW_MS;
 
   // Initialize blocks
   const blockStats: Array<{ success: number; failure: number }> = Array.from(
@@ -798,7 +942,7 @@ export function calculateStatusBarData(
   // Filter and bucket the usage details
   usageDetails.forEach((detail) => {
     const timestamp = Date.parse(detail.timestamp);
-    if (Number.isNaN(timestamp) || timestamp < hourAgo || timestamp > now) {
+    if (Number.isNaN(timestamp) || timestamp < windowStart || timestamp > now) {
       return;
     }
 
@@ -874,7 +1018,7 @@ export function computeKeyStats(usageData: any, masker: (val: string) => string
       const details = modelEntry?.details || [];
 
       details.forEach((detail: any) => {
-        const source = maskUsageSensitiveValue(detail?.source, masker);
+        const source = normalizeUsageSourceId(detail?.source, masker);
         const authIndexKey = normalizeAuthIndex(detail?.auth_index);
         const isFailed = detail?.failed === true;
 

src/utils/validation.ts

@@ -35,6 +35,14 @@ export function isValidApiKey(key: string): boolean {
   return !/\s/.test(key);
 }
 
+/**
+ * 验证 API Key 字符集（仅允许 ASCII 可见字符）
+ */
+export function isValidApiKeyCharset(key: string): boolean {
+  if (!key) return false;
+  return /^[\x21-\x7E]+$/.test(key);
+}
+
 /**
  * 验证 JSON 格式
  */