chore: 更新 .gitignore，移除无效注释和调整条目名称

Changes:
- Add provider type filtering for request logs to quickly locate specific provider usage
- Optimize request log display by showing provider type in a dedicated column and removing auth index column for better readability
- Add friendly prompts for providers that don't support auto-disable (e.g., Claude, Gemini) with manual operation guides
- Point WebUI repository to this repository (forked from official for modifications)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

.gitignore

@@ -12,6 +12,7 @@ CLAUDE.md
 AGENTS.md
 antigravity_usage.json
 codex_usage.json
+style.md
 
 node_modules
 dist
@@ -29,3 +30,6 @@ settings.local.json
 *.njsproj
 *.sln
 *.sw?
+tmpclaude*
+.claude
+CLIProxyAPI

package-lock.json

@@ -9,9 +9,11 @@
       "version": "0.0.0",
       "dependencies": {
         "@codemirror/lang-yaml": "^6.1.2",
+        "@tanstack/react-virtual": "^3.13.18",
         "@uiw/react-codemirror": "^4.25.3",
         "axios": "^1.13.2",
         "chart.js": "^4.5.1",
+        "gsap": "^3.14.2",
         "i18next": "^25.7.1",
         "react": "^19.2.1",
         "react-chartjs-2": "^5.3.1",
@@ -70,6 +72,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",
@@ -464,6 +467,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",
@@ -1864,6 +1868,33 @@
         "win32"
       ]
     },
+    "node_modules/@tanstack/react-virtual": {
+      "version": "3.13.18",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.13.18.tgz",
+      "integrity": "sha512-dZkhyfahpvlaV0rIKnvQiVoWPyURppl6w4m9IwMDpuIjcJ1sD9YGWrt0wISvgU7ewACXx2Ct46WPgI6qAD4v6A==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/virtual-core": "3.13.18"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@tanstack/virtual-core": {
+      "version": "3.13.18",
+      "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.13.18.tgz",
+      "integrity": "sha512-Mx86Hqu1k39icq2Zusq+Ey2J6dDWTjDvEv43PJtRCoEYTLyfaPnxIQ6iy7YAOK0NV/qOEmZQ/uCufrppZxTgcg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
       "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
@@ -1929,6 +1960,7 @@
       "integrity": "sha512-MWtvHrGZLFttgeEj28VXHxpmwYbor/ATPYbBfSFZEIRK0ecCFLl2Qo55z52Hss+UV9CRN7trSeq1zbgx7YDWWg==",
       "devOptional": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "csstype": "^3.2.2"
       }
@@ -2016,6 +2048,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",
@@ -2333,6 +2366,7 @@
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -2544,6 +2578,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"
       },
@@ -2808,6 +2843,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",
@@ -3194,6 +3230,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/gsap": {
+      "version": "3.14.2",
+      "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.14.2.tgz",
+      "integrity": "sha512-P8/mMxVLU7o4+55+1TCnQrPmgjPKnwkzkXOK1asnR9Jg2lna4tEY5qBJjMmAaOBDDZWtlRjBXjLa0w53G/uBLA==",
+      "license": "Standard 'no charge' license: https://gsap.com/standard-license."
+    },
     "node_modules/has-flag": {
       "version": "4.0.0",
       "dev": true,
@@ -3278,6 +3320,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.28.4"
       },
@@ -3607,6 +3650,7 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -3713,6 +3757,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"
       }
@@ -3730,6 +3775,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"
       },
@@ -3773,9 +3819,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",
@@ -3795,12 +3841,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"
@@ -3838,6 +3884,7 @@
       "integrity": "sha512-w8GmOxZfBmKknvdXU1sdM9NHcoQejwF/4mNgj2JuEEdRaHwwF12K7e9eXn1nLZ07ad+du76mkVsyeb2rKGllsA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/estree": "1.0.8"
       },
@@ -4020,6 +4067,7 @@
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "devOptional": true,
       "license": "Apache-2.0",
+      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -4096,6 +4144,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",
@@ -4237,6 +4286,7 @@
       "integrity": "sha512-AvvthqfqrAhNH9dnfmrfKzX5upOdjUVJYFqNSlkmGf64gRaTzlPwz99IHYnVs28qYAybvAlBV+H7pn0saFY4Ig==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }

package.json

@@ -7,15 +7,17 @@
     "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"
   },
   "dependencies": {
     "@codemirror/lang-yaml": "^6.1.2",
+    "@tanstack/react-virtual": "^3.13.18",
     "@uiw/react-codemirror": "^4.25.3",
     "axios": "^1.13.2",
     "chart.js": "^4.5.1",
+    "gsap": "^3.14.2",
     "i18next": "^25.7.1",
     "react": "^19.2.1",
     "react-chartjs-2": "^5.3.1",

src/App.tsx

@@ -1,17 +1,6 @@
 import { useCallback, useEffect, useState } from 'react';
-import { HashRouter, Navigate, Route, Routes } from 'react-router-dom';
+import { HashRouter, Route, Routes } from 'react-router-dom';
 import { LoginPage } from '@/pages/LoginPage';
-import { DashboardPage } from '@/pages/DashboardPage';
-import { SettingsPage } from '@/pages/SettingsPage';
-import { ApiKeysPage } from '@/pages/ApiKeysPage';
-import { AiProvidersPage } from '@/pages/AiProvidersPage';
-import { AuthFilesPage } from '@/pages/AuthFilesPage';
-import { OAuthPage } from '@/pages/OAuthPage';
-import { QuotaPage } from '@/pages/QuotaPage';
-import { UsagePage } from '@/pages/UsagePage';
-import { ConfigPage } from '@/pages/ConfigPage';
-import { LogsPage } from '@/pages/LogsPage';
-import { SystemPage } from '@/pages/SystemPage';
 import { NotificationContainer } from '@/components/common/NotificationContainer';
 import { SplashScreen } from '@/components/common/SplashScreen';
 import { MainLayout } from '@/components/layout/MainLayout';
@@ -75,27 +64,13 @@ function App() {
       <Routes>
         <Route path="/login" element={<LoginPage />} />
         <Route
-          path="/"
+          path="/*"
           element={
             <ProtectedRoute>
               <MainLayout />
             </ProtectedRoute>
           }
-        >
-          <Route index element={<DashboardPage />} />
-          <Route path="dashboard" element={<DashboardPage />} />
-          <Route path="settings" element={<SettingsPage />} />
-          <Route path="api-keys" element={<ApiKeysPage />} />
-          <Route path="ai-providers" element={<AiProvidersPage />} />
-          <Route path="auth-files" element={<AuthFilesPage />} />
-          <Route path="oauth" element={<OAuthPage />} />
-          <Route path="quota" element={<QuotaPage />} />
-          <Route path="usage" element={<UsagePage />} />
-          <Route path="config" element={<ConfigPage />} />
-          <Route path="logs" element={<LogsPage />} />
-          <Route path="system" element={<SystemPage />} />
-          <Route path="*" element={<Navigate to="/" replace />} />
-        </Route>
+        />
       </Routes>
     </HashRouter>
   );

src/components/common/PageTransition.scss

@@ -0,0 +1,39 @@
+@use '@/styles/variables.scss' as *;
+
+.page-transition {
+  position: relative;
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+
+  &__layer {
+    display: flex;
+    flex-direction: column;
+    gap: $spacing-lg;
+    min-height: 0;
+    flex: 1;
+
+    // During animation, exit layer uses absolute positioning
+    &--exit {
+      position: absolute;
+      inset: 0;
+      z-index: 1;
+      overflow: hidden;
+      pointer-events: none;
+    }
+  }
+
+  &--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) {
+    position: relative;
+    z-index: 0;
+  }
+}

src/components/common/PageTransition.tsx

@@ -0,0 +1,182 @@
+import { ReactNode, useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { useLocation, type Location } from 'react-router-dom';
+import gsap from 'gsap';
+import './PageTransition.scss';
+
+interface PageTransitionProps {
+  render: (location: Location) => ReactNode;
+  getRouteOrder?: (pathname: string) => number | null;
+  scrollContainerRef?: React.RefObject<HTMLElement | null>;
+}
+
+const TRANSITION_DURATION = 0.5;
+const EXIT_DURATION = 0.45;
+const ENTER_DELAY = 0.08;
+
+type LayerStatus = 'current' | 'exiting';
+
+type Layer = {
+  key: string;
+  location: Location;
+  status: LayerStatus;
+};
+
+type TransitionDirection = 'forward' | 'backward';
+
+export function PageTransition({
+  render,
+  getRouteOrder,
+  scrollContainerRef,
+}: PageTransitionProps) {
+  const location = useLocation();
+  const currentLayerRef = useRef<HTMLDivElement>(null);
+  const exitingLayerRef = useRef<HTMLDivElement>(null);
+  const exitScrollOffsetRef = useRef(0);
+
+  const [isAnimating, setIsAnimating] = useState(false);
+  const [transitionDirection, setTransitionDirection] = useState<TransitionDirection>('forward');
+  const [layers, setLayers] = useState<Layer[]>(() => [
+    {
+      key: location.key,
+      location,
+      status: 'current',
+    },
+  ]);
+  const currentLayerKey = layers[layers.length - 1]?.key ?? location.key;
+  const currentLayerPathname = layers[layers.length - 1]?.location.pathname;
+
+  const resolveScrollContainer = useCallback(() => {
+    if (scrollContainerRef?.current) return scrollContainerRef.current;
+    if (typeof document === 'undefined') return null;
+    return document.scrollingElement as HTMLElement | null;
+  }, [scrollContainerRef]);
+
+  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) => {
+      if (!getRouteOrder || !pathname) return null;
+      const index = getRouteOrder(pathname);
+      return typeof index === 'number' && index >= 0 ? index : null;
+    };
+    const fromIndex = resolveOrderIndex(currentLayerPathname);
+    const toIndex = resolveOrderIndex(location.pathname);
+    const nextDirection: TransitionDirection =
+      fromIndex === null || toIndex === null || fromIndex === toIndex
+        ? 'forward'
+        : toIndex > fromIndex
+          ? 'forward'
+          : 'backward';
+
+    let cancelled = false;
+
+    queueMicrotask(() => {
+      if (cancelled) return;
+      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' },
+        ];
+      });
+      setIsAnimating(true);
+    });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [
+    isAnimating,
+    location,
+    currentLayerKey,
+    currentLayerPathname,
+    getRouteOrder,
+    resolveScrollContainer,
+  ]);
+
+  // Run GSAP animation when animating starts
+  useLayoutEffect(() => {
+    if (!isAnimating) return;
+
+    if (!currentLayerRef.current) return;
+
+    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 exitBaseY = scrollOffset ? -scrollOffset : 0;
+
+    const tl = gsap.timeline({
+      onComplete: () => {
+        setLayers((prev) => prev.filter((layer) => layer.status !== 'exiting'));
+        setIsAnimating(false);
+      },
+    });
+
+    // 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 },
+        {
+          y: exitBaseY + exitToY,
+          opacity: 0,
+          duration: EXIT_DURATION,
+          ease: 'power2.in', // fast finish to clear screen
+          force3D: true,
+        },
+        0
+      );
+    }
+
+    // Enter animation: slide in from bottom (slow-to-fast)
+    tl.fromTo(
+      currentLayerRef.current,
+      { y: enterFromY, opacity: 0 },
+      {
+        y: 0,
+        opacity: 1,
+        duration: TRANSITION_DURATION,
+        ease: 'power2.out', // smooth settle
+        clearProps: 'transform,opacity',
+        force3D: true,
+      },
+      ENTER_DELAY
+    );
+
+    return () => {
+      tl.kill();
+      gsap.killTweensOf([currentLayerRef.current, exitingLayerRef.current]);
+    };
+  }, [isAnimating, transitionDirection, resolveScrollContainer]);
+
+  return (
+    <div className={`page-transition${isAnimating ? ' page-transition--animating' : ''}`}>
+      {layers.map((layer) => (
+        <div
+          key={layer.key}
+          className={`page-transition__layer${
+            layer.status === 'exiting' ? ' page-transition__layer--exit' : ''
+          }`}
+          ref={layer.status === 'exiting' ? exitingLayerRef : currentLayerRef}
+        >
+          {render(layer.location)}
+        </div>
+      ))}
+    </div>
+  );
+}

src/components/layout/MainLayout.tsx

@@ -7,11 +7,13 @@ import {
   useRef,
   useState,
 } from 'react';
-import { NavLink, Outlet, useLocation } from 'react-router-dom';
+import { NavLink, useLocation } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { Button } from '@/components/ui/Button';
 import { Modal } from '@/components/ui/Modal';
 import { ToggleSwitch } from '@/components/ui/ToggleSwitch';
+import { PageTransition } from '@/components/common/PageTransition';
+import { MainRoutes } from '@/router/MainRoutes';
 import {
   IconBot,
   IconChartLine,
@@ -24,6 +26,7 @@ import {
   IconShield,
   IconSlidersHorizontal,
   IconTimer,
+  IconActivity,
 } from '@/components/ui/icons';
 import { INLINE_LOGO_JPEG } from '@/assets/logoInline';
 import {
@@ -34,6 +37,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} />,
@@ -47,6 +51,7 @@ const sidebarIcons: Record<string, ReactNode> = {
   config: <IconSettings size={18} />,
   logs: <IconScrollText size={18} />,
   system: <IconInfo size={18} />,
+  monitor: <IconActivity size={18} />,
 };
 
 // Header action icons - smaller size for header buttons
@@ -200,6 +205,7 @@ export function MainLayout() {
   const [requestLogDraft, setRequestLogDraft] = useState(false);
   const [requestLogTouched, setRequestLogTouched] = useState(false);
   const [requestLogSaving, setRequestLogSaving] = useState(false);
+  const contentRef = useRef<HTMLDivElement | null>(null);
   const brandCollapseTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
   const headerRef = useRef<HTMLElement | null>(null);
   const versionTapCount = useRef(0);
@@ -341,6 +347,7 @@ export function MainLayout() {
     });
   }, [fetchConfig]);
 
+
   const statusClass =
     connectionStatus === 'connected'
       ? 'success'
@@ -364,16 +371,39 @@ export function MainLayout() {
       ? [{ path: '/logs', label: t('nav.logs'), icon: sidebarIcons.logs }]
       : []),
     { path: '/system', label: t('nav.system_info'), icon: sidebarIcons.system },
+    { path: '/monitor', label: t('nav.monitor'), icon: sidebarIcons.monitor },
   ];
+  const navOrder = navItems.map((item) => item.path);
+  const getRouteOrder = (pathname: string) => {
+    const trimmedPath =
+      pathname.length > 1 && pathname.endsWith('/') ? pathname.slice(0, -1) : pathname;
+    const normalizedPath = trimmedPath === '/dashboard' ? '/' : trimmedPath;
+    const exactIndex = navOrder.indexOf(normalizedPath);
+    if (exactIndex !== -1) return exactIndex;
+    const nestedIndex = navOrder.findIndex(
+      (path) => path !== '/' && normalizedPath.startsWith(`${path}/`)
+    );
+    return nestedIndex === -1 ? null : nestedIndex;
+  };
 
   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 () => {
@@ -508,9 +538,13 @@ export function MainLayout() {
           </div>
         </aside>
 
-        <div className={`content${isLogsPage ? ' content-logs' : ''}`}>
+        <div className={`content${isLogsPage ? ' content-logs' : ''}`} ref={contentRef}>
           <main className={`main-content${isLogsPage ? ' main-content-logs' : ''}`}>
-            <Outlet />
+            <PageTransition
+              render={(location) => <MainRoutes location={location} />}
+              getRouteOrder={getRouteOrder}
+              scrollContainerRef={contentRef}
+            />
           </main>
 
           <footer className="footer">

src/components/monitor/ChannelStats.tsx

@@ -0,0 +1,409 @@
+import { useMemo, useState, useCallback, Fragment } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Card } from '@/components/ui/Card';
+import { useDisableModel } from '@/hooks';
+import { TimeRangeSelector, formatTimeRangeCaption, type TimeRange } from './TimeRangeSelector';
+import { DisableModelModal } from './DisableModelModal';
+import {
+  formatTimestamp,
+  getRateClassName,
+  filterDataByTimeRange,
+  getProviderDisplayParts,
+  type DateRange,
+} from '@/utils/monitor';
+import type { UsageData } from '@/pages/MonitorPage';
+import styles from '@/pages/MonitorPage.module.scss';
+
+interface ChannelStatsProps {
+  data: UsageData | null;
+  loading: boolean;
+  providerMap: Record<string, string>;
+  providerModels: Record<string, Set<string>>;
+}
+
+interface ModelStat {
+  requests: number;
+  success: number;
+  failed: number;
+  successRate: number;
+  recentRequests: { failed: boolean; timestamp: number }[];
+  lastTimestamp: number;
+}
+
+interface ChannelStat {
+  source: string;
+  displayName: string;
+  providerName: string | null;
+  maskedKey: string;
+  totalRequests: number;
+  successRequests: number;
+  failedRequests: number;
+  successRate: number;
+  lastRequestTime: number;
+  recentRequests: { failed: boolean; timestamp: number }[];
+  models: Record<string, ModelStat>;
+}
+
+export function ChannelStats({ data, loading, providerMap, providerModels }: ChannelStatsProps) {
+  const { t } = useTranslation();
+  const [expandedChannel, setExpandedChannel] = useState<string | null>(null);
+  const [filterChannel, setFilterChannel] = useState('');
+  const [filterModel, setFilterModel] = useState('');
+  const [filterStatus, setFilterStatus] = useState<'' | 'success' | 'failed'>('');
+
+  // 时间范围状态
+  const [timeRange, setTimeRange] = useState<TimeRange>(7);
+  const [customRange, setCustomRange] = useState<DateRange | undefined>();
+
+  // 使用禁用模型 Hook
+  const {
+    disableState,
+    disabling,
+    isModelDisabled,
+    handleDisableClick: onDisableClick,
+    handleConfirmDisable,
+    handleCancelDisable,
+  } = useDisableModel({ providerMap, providerModels });
+
+  // 处理时间范围变化
+  const handleTimeRangeChange = useCallback((range: TimeRange, custom?: DateRange) => {
+    setTimeRange(range);
+    if (custom) {
+      setCustomRange(custom);
+    }
+  }, []);
+
+  // 根据时间范围过滤数据
+  const timeFilteredData = useMemo(() => {
+    return filterDataByTimeRange(data, timeRange, customRange);
+  }, [data, timeRange, customRange]);
+
+  // 计算渠道统计数据
+  const channelStats = useMemo(() => {
+    if (!timeFilteredData?.apis) return [];
+
+    const stats: Record<string, ChannelStat> = {};
+
+    Object.values(timeFilteredData.apis).forEach((apiData) => {
+      Object.entries(apiData.models).forEach(([modelName, modelData]) => {
+        modelData.details.forEach((detail) => {
+          const source = detail.source || 'unknown';
+          // 获取渠道显示信息
+          const { provider, masked } = getProviderDisplayParts(source, providerMap);
+          // 只统计在 providerMap 中存在的渠道
+          if (!provider) return;
+
+          const displayName = `${provider} (${masked})`;
+          const timestamp = detail.timestamp ? new Date(detail.timestamp).getTime() : 0;
+
+          if (!stats[displayName]) {
+            stats[displayName] = {
+              source,
+              displayName,
+              providerName: provider,
+              maskedKey: masked,
+              totalRequests: 0,
+              successRequests: 0,
+              failedRequests: 0,
+              successRate: 0,
+              lastRequestTime: 0,
+              recentRequests: [],
+              models: {},
+            };
+          }
+
+          stats[displayName].totalRequests++;
+          if (detail.failed) {
+            stats[displayName].failedRequests++;
+          } else {
+            stats[displayName].successRequests++;
+          }
+
+          // 更新最近请求时间
+          if (timestamp > stats[displayName].lastRequestTime) {
+            stats[displayName].lastRequestTime = timestamp;
+          }
+
+          // 收集请求状态
+          stats[displayName].recentRequests.push({ failed: detail.failed, timestamp });
+
+          // 模型统计
+          if (!stats[displayName].models[modelName]) {
+            stats[displayName].models[modelName] = {
+              requests: 0,
+              success: 0,
+              failed: 0,
+              successRate: 0,
+              recentRequests: [],
+              lastTimestamp: 0,
+            };
+          }
+          stats[displayName].models[modelName].requests++;
+          if (detail.failed) {
+            stats[displayName].models[modelName].failed++;
+          } else {
+            stats[displayName].models[modelName].success++;
+          }
+          stats[displayName].models[modelName].recentRequests.push({ failed: detail.failed, timestamp });
+          if (timestamp > stats[displayName].models[modelName].lastTimestamp) {
+            stats[displayName].models[modelName].lastTimestamp = timestamp;
+          }
+        });
+      });
+    });
+
+    // 计算成功率并排序请求
+    Object.values(stats).forEach((stat) => {
+      stat.successRate = stat.totalRequests > 0
+        ? (stat.successRequests / stat.totalRequests) * 100
+        : 0;
+      // 按时间排序，取最近12个
+      stat.recentRequests.sort((a, b) => a.timestamp - b.timestamp);
+      stat.recentRequests = stat.recentRequests.slice(-12);
+
+      Object.values(stat.models).forEach((model) => {
+        model.successRate = model.requests > 0
+          ? (model.success / model.requests) * 100
+          : 0;
+        model.recentRequests.sort((a, b) => a.timestamp - b.timestamp);
+        model.recentRequests = model.recentRequests.slice(-12);
+      });
+    });
+
+    return Object.values(stats)
+      .filter((stat) => stat.totalRequests > 0)
+      .sort((a, b) => b.totalRequests - a.totalRequests)
+      .slice(0, 10);
+  }, [timeFilteredData, providerMap]);
+
+  // 获取所有渠道和模型列表
+  const { channels, models } = useMemo(() => {
+    const channelSet = new Set<string>();
+    const modelSet = new Set<string>();
+
+    channelStats.forEach((stat) => {
+      channelSet.add(stat.displayName);
+      Object.keys(stat.models).forEach((model) => modelSet.add(model));
+    });
+
+    return {
+      channels: Array.from(channelSet).sort(),
+      models: Array.from(modelSet).sort(),
+    };
+  }, [channelStats]);
+
+  // 过滤后的数据
+  const filteredStats = useMemo(() => {
+    return channelStats.filter((stat) => {
+      if (filterChannel && stat.displayName !== filterChannel) return false;
+      if (filterModel && !stat.models[filterModel]) return false;
+      if (filterStatus === 'success' && stat.failedRequests > 0) return false;
+      if (filterStatus === 'failed' && stat.failedRequests === 0) return false;
+      return true;
+    });
+  }, [channelStats, filterChannel, filterModel, filterStatus]);
+
+  // 切换展开状态
+  const toggleExpand = (displayName: string) => {
+    setExpandedChannel(expandedChannel === displayName ? null : displayName);
+  };
+
+  // 开始禁用流程（阻止事件冒泡）
+  const handleDisableClick = (source: string, model: string, e: React.MouseEvent) => {
+    e.stopPropagation();
+    onDisableClick(source, model);
+  };
+
+  return (
+    <>
+      <Card
+        title={t('monitor.channel.title')}
+        subtitle={
+          <span>
+            {formatTimeRangeCaption(timeRange, customRange, t)} · {t('monitor.channel.subtitle')}
+            <span style={{ color: 'var(--text-tertiary)' }}> · {t('monitor.channel.click_hint')}</span>
+          </span>
+        }
+        extra={
+          <TimeRangeSelector
+            value={timeRange}
+            onChange={handleTimeRangeChange}
+            customRange={customRange}
+          />
+        }
+      >
+        {/* 筛选器 */}
+        <div className={styles.logFilters}>
+          <select
+            className={styles.logSelect}
+            value={filterChannel}
+            onChange={(e) => setFilterChannel(e.target.value)}
+          >
+            <option value="">{t('monitor.channel.all_channels')}</option>
+            {channels.map((channel) => (
+              <option key={channel} value={channel}>{channel}</option>
+            ))}
+          </select>
+          <select
+            className={styles.logSelect}
+            value={filterModel}
+            onChange={(e) => setFilterModel(e.target.value)}
+          >
+            <option value="">{t('monitor.channel.all_models')}</option>
+            {models.map((model) => (
+              <option key={model} value={model}>{model}</option>
+            ))}
+          </select>
+          <select
+            className={styles.logSelect}
+            value={filterStatus}
+            onChange={(e) => setFilterStatus(e.target.value as '' | 'success' | 'failed')}
+          >
+            <option value="">{t('monitor.channel.all_status')}</option>
+            <option value="success">{t('monitor.channel.only_success')}</option>
+            <option value="failed">{t('monitor.channel.only_failed')}</option>
+          </select>
+        </div>
+
+        {/* 表格 */}
+        <div className={styles.tableWrapper}>
+          {loading ? (
+            <div className={styles.emptyState}>{t('common.loading')}</div>
+          ) : filteredStats.length === 0 ? (
+            <div className={styles.emptyState}>{t('monitor.no_data')}</div>
+          ) : (
+            <table className={styles.table}>
+              <thead>
+                <tr>
+                  <th>{t('monitor.channel.header_name')}</th>
+                  <th>{t('monitor.channel.header_count')}</th>
+                  <th>{t('monitor.channel.header_rate')}</th>
+                  <th>{t('monitor.channel.header_recent')}</th>
+                  <th>{t('monitor.channel.header_time')}</th>
+                </tr>
+              </thead>
+              <tbody>
+                {filteredStats.map((stat) => (
+                  <Fragment key={stat.displayName}>
+                    <tr
+                      className={styles.expandable}
+                      onClick={() => toggleExpand(stat.displayName)}
+                    >
+                      <td>
+                        {stat.providerName ? (
+                          <>
+                            <span className={styles.channelName}>{stat.providerName}</span>
+                            <span className={styles.channelSecret}> ({stat.maskedKey})</span>
+                          </>
+                        ) : (
+                          stat.maskedKey
+                        )}
+                      </td>
+                      <td>{stat.totalRequests.toLocaleString()}</td>
+                      <td className={getRateClassName(stat.successRate, styles)}>
+                        {stat.successRate.toFixed(1)}%
+                      </td>
+                      <td>
+                        <div className={styles.statusBars}>
+                          {stat.recentRequests.map((req, i) => (
+                            <div
+                              key={i}
+                              className={`${styles.statusBar} ${req.failed ? styles.failure : styles.success}`}
+                            />
+                          ))}
+                        </div>
+                      </td>
+                      <td>{formatTimestamp(stat.lastRequestTime)}</td>
+                    </tr>
+                    {expandedChannel === stat.displayName && (
+                      <tr key={`${stat.displayName}-detail`}>
+                        <td colSpan={5} className={styles.expandDetail}>
+                          <div className={styles.expandTableWrapper}>
+                          <table className={styles.table}>
+                            <thead>
+                              <tr>
+                                <th>{t('monitor.channel.model')}</th>
+                                <th>{t('monitor.channel.header_count')}</th>
+                                <th>{t('monitor.channel.header_rate')}</th>
+                                <th>{t('monitor.channel.success')}/{t('monitor.channel.failed')}</th>
+                                <th>{t('monitor.channel.header_recent')}</th>
+                                <th>{t('monitor.channel.header_time')}</th>
+                                <th>{t('monitor.logs.header_actions')}</th>
+                              </tr>
+                            </thead>
+                            <tbody>
+                              {Object.entries(stat.models)
+                                .sort((a, b) => {
+                                  const aDisabled = isModelDisabled(stat.source, a[0]);
+                                  const bDisabled = isModelDisabled(stat.source, b[0]);
+                                  // 已禁用的排在后面
+                                  if (aDisabled !== bDisabled) {
+                                    return aDisabled ? 1 : -1;
+                                  }
+                                  // 然后按请求数降序
+                                  return b[1].requests - a[1].requests;
+                                })
+                                .map(([modelName, modelStat]) => {
+                                  const disabled = isModelDisabled(stat.source, modelName);
+                                  return (
+                                    <tr key={modelName} className={disabled ? styles.modelDisabled : ''}>
+                                      <td>{modelName}</td>
+                                      <td>{modelStat.requests.toLocaleString()}</td>
+                                      <td className={getRateClassName(modelStat.successRate, styles)}>
+                                        {modelStat.successRate.toFixed(1)}%
+                                      </td>
+                                      <td>
+                                        <span className={styles.kpiSuccess}>{modelStat.success}</span>
+                                        {' / '}
+                                        <span className={styles.kpiFailure}>{modelStat.failed}</span>
+                                      </td>
+                                      <td>
+                                        <div className={styles.statusBars}>
+                                          {modelStat.recentRequests.map((req, i) => (
+                                            <div
+                                              key={i}
+                                              className={`${styles.statusBar} ${req.failed ? styles.failure : styles.success}`}
+                                            />
+                                          ))}
+                                        </div>
+                                      </td>
+                                      <td>{formatTimestamp(modelStat.lastTimestamp)}</td>
+                                      <td>
+                                        {disabled ? (
+                                          <span className={styles.disabledLabel}>{t('monitor.logs.removed')}</span>
+                                        ) : stat.source && stat.source !== '-' && stat.source !== 'unknown' ? (
+                                          <button
+                                            className={styles.disableBtn}
+                                            onClick={(e) => handleDisableClick(stat.source, modelName, e)}
+                                          >
+                                            {t('monitor.logs.disable')}
+                                          </button>
+                                        ) : '-'}
+                                      </td>
+                                    </tr>
+                                  );
+                                })}
+                            </tbody>
+                          </table>
+                          </div>
+                        </td>
+                      </tr>
+                    )}
+                  </Fragment>
+                ))}
+              </tbody>
+            </table>
+          )}
+        </div>
+      </Card>
+
+      {/* 禁用确认弹窗 */}
+      <DisableModelModal
+        disableState={disableState}
+        disabling={disabling}
+        onConfirm={handleConfirmDisable}
+        onCancel={handleCancelDisable}
+      />
+    </>
+  );
+}

src/components/monitor/DailyTrendChart.tsx

@@ -0,0 +1,279 @@
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Chart } from 'react-chartjs-2';
+import type { UsageData } from '@/pages/MonitorPage';
+import styles from '@/pages/MonitorPage.module.scss';
+
+interface DailyTrendChartProps {
+  data: UsageData | null;
+  loading: boolean;
+  isDark: boolean;
+  timeRange: number;
+}
+
+interface DailyStat {
+  date: string;
+  requests: number;
+  successRequests: number;
+  failedRequests: number;
+  inputTokens: number;
+  outputTokens: number;
+  reasoningTokens: number;
+  cachedTokens: number;
+}
+
+export function DailyTrendChart({ data, loading, isDark, timeRange }: DailyTrendChartProps) {
+  const { t } = useTranslation();
+
+  // 按日期聚合数据
+  const dailyData = useMemo((): DailyStat[] => {
+    if (!data?.apis) return [];
+
+    const dailyStats: Record<string, {
+      requests: number;
+      successRequests: number;
+      failedRequests: number;
+      inputTokens: number;
+      outputTokens: number;
+      reasoningTokens: number;
+      cachedTokens: number;
+    }> = {};
+
+    // 辅助函数：获取本地日期字符串 YYYY-MM-DD
+    const getLocalDateString = (timestamp: string): string => {
+      const date = new Date(timestamp);
+      const year = date.getFullYear();
+      const month = String(date.getMonth() + 1).padStart(2, '0');
+      const day = String(date.getDate()).padStart(2, '0');
+      return `${year}-${month}-${day}`;
+    };
+
+    Object.values(data.apis).forEach((apiData) => {
+      Object.values(apiData.models).forEach((modelData) => {
+        modelData.details.forEach((detail) => {
+          // 使用本地日期而非 UTC 日期
+          const date = getLocalDateString(detail.timestamp);
+          if (!dailyStats[date]) {
+            dailyStats[date] = {
+              requests: 0,
+              successRequests: 0,
+              failedRequests: 0,
+              inputTokens: 0,
+              outputTokens: 0,
+              reasoningTokens: 0,
+              cachedTokens: 0,
+            };
+          }
+          dailyStats[date].requests++;
+          if (detail.failed) {
+            dailyStats[date].failedRequests++;
+          } else {
+            dailyStats[date].successRequests++;
+            // 只统计成功请求的 Token
+            dailyStats[date].inputTokens += detail.tokens.input_tokens || 0;
+            dailyStats[date].outputTokens += detail.tokens.output_tokens || 0;
+            dailyStats[date].reasoningTokens += detail.tokens.reasoning_tokens || 0;
+            dailyStats[date].cachedTokens += detail.tokens.cached_tokens || 0;
+          }
+        });
+      });
+    });
+
+    // 转换为数组并按日期排序
+    return Object.entries(dailyStats)
+      .map(([date, stats]) => ({ date, ...stats }))
+      .sort((a, b) => a.date.localeCompare(b.date));
+  }, [data]);
+
+  // 图表数据
+  const chartData = useMemo(() => {
+    const labels = dailyData.map((item) => {
+      const date = new Date(item.date);
+      return `${date.getMonth() + 1}/${date.getDate()}`;
+    });
+
+    return {
+      labels,
+      datasets: [
+        {
+          type: 'line' as const,
+          label: t('monitor.trend.requests'),
+          data: dailyData.map((item) => item.requests),
+          borderColor: '#3b82f6',
+          backgroundColor: '#3b82f6',
+          borderWidth: 3,
+          fill: false,
+          tension: 0.35,
+          yAxisID: 'y1',
+          order: 0,
+          pointRadius: 3,
+          pointBackgroundColor: '#3b82f6',
+        },
+        {
+          type: 'bar' as const,
+          label: t('monitor.trend.input_tokens'),
+          data: dailyData.map((item) => item.inputTokens / 1000),
+          backgroundColor: 'rgba(34, 197, 94, 0.7)',
+          borderColor: 'rgba(34, 197, 94, 0.7)',
+          borderWidth: 1,
+          borderRadius: 0,
+          yAxisID: 'y',
+          order: 1,
+          stack: 'tokens',
+        },
+        {
+          type: 'bar' as const,
+          label: t('monitor.trend.output_tokens'),
+          data: dailyData.map((item) => item.outputTokens / 1000),
+          backgroundColor: 'rgba(249, 115, 22, 0.7)',
+          borderColor: 'rgba(249, 115, 22, 0.7)',
+          borderWidth: 1,
+          borderRadius: 4,
+          yAxisID: 'y',
+          order: 1,
+          stack: 'tokens',
+        },
+      ],
+    };
+  }, [dailyData, t]);
+
+  // 图表配置
+  const chartOptions = useMemo(() => ({
+    responsive: true,
+    maintainAspectRatio: false,
+    interaction: {
+      mode: 'index' as const,
+      intersect: false,
+    },
+    plugins: {
+      legend: {
+        display: true,
+        position: 'bottom' as const,
+        labels: {
+          color: isDark ? '#9ca3af' : '#6b7280',
+          usePointStyle: true,
+          padding: 16,
+          font: {
+            size: 11,
+          },
+          generateLabels: (chart: any) => {
+            return chart.data.datasets.map((dataset: any, i: number) => {
+              const isLine = dataset.type === 'line';
+              return {
+                text: dataset.label,
+                fillStyle: dataset.backgroundColor,
+                strokeStyle: dataset.borderColor,
+                lineWidth: 0,
+                hidden: !chart.isDatasetVisible(i),
+                datasetIndex: i,
+                pointStyle: isLine ? 'circle' : 'rect',
+              };
+            });
+          },
+        },
+      },
+      tooltip: {
+        backgroundColor: isDark ? '#374151' : '#ffffff',
+        titleColor: isDark ? '#f3f4f6' : '#111827',
+        bodyColor: isDark ? '#d1d5db' : '#4b5563',
+        borderColor: isDark ? '#4b5563' : '#e5e7eb',
+        borderWidth: 1,
+        padding: 12,
+        callbacks: {
+          label: (context: any) => {
+            const label = context.dataset.label || '';
+            const value = context.raw;
+            if (context.dataset.yAxisID === 'y1') {
+              return `${label}: ${value.toLocaleString()}`;
+            }
+            return `${label}: ${value.toFixed(1)}K`;
+          },
+        },
+      },
+    },
+    scales: {
+      x: {
+        grid: {
+          color: isDark ? 'rgba(255, 255, 255, 0.06)' : 'rgba(0, 0, 0, 0.06)',
+        },
+        ticks: {
+          color: isDark ? '#9ca3af' : '#6b7280',
+          font: {
+            size: 11,
+          },
+        },
+      },
+      y: {
+        type: 'linear' as const,
+        position: 'left' as const,
+        stacked: true,
+        grid: {
+          color: isDark ? 'rgba(255, 255, 255, 0.06)' : 'rgba(0, 0, 0, 0.06)',
+        },
+        ticks: {
+          color: isDark ? '#9ca3af' : '#6b7280',
+          font: {
+            size: 11,
+          },
+          callback: (value: string | number) => `${value}K`,
+        },
+        title: {
+          display: true,
+          text: 'Tokens (K)',
+          color: isDark ? '#9ca3af' : '#6b7280',
+          font: {
+            size: 11,
+          },
+        },
+      },
+      y1: {
+        type: 'linear' as const,
+        position: 'right' as const,
+        grid: {
+          drawOnChartArea: false,
+        },
+        ticks: {
+          color: isDark ? '#9ca3af' : '#6b7280',
+          font: {
+            size: 11,
+          },
+        },
+        title: {
+          display: true,
+          text: t('monitor.trend.requests'),
+          color: isDark ? '#9ca3af' : '#6b7280',
+          font: {
+            size: 11,
+          },
+        },
+      },
+    },
+  }), [isDark, t]);
+
+  const timeRangeLabel = timeRange === 1
+    ? t('monitor.today')
+    : t('monitor.last_n_days', { n: timeRange });
+
+  return (
+    <div className={styles.chartCard}>
+      <div className={styles.chartHeader}>
+        <div>
+          <h3 className={styles.chartTitle}>{t('monitor.trend.title')}</h3>
+          <p className={styles.chartSubtitle}>
+            {timeRangeLabel} · {t('monitor.trend.subtitle')}
+          </p>
+        </div>
+      </div>
+
+      <div className={styles.chartContent}>
+        {loading || dailyData.length === 0 ? (
+          <div className={styles.chartEmpty}>
+            {loading ? t('common.loading') : t('monitor.no_data')}
+          </div>
+        ) : (
+          <Chart type="bar" data={chartData} options={chartOptions} />
+        )}
+      </div>
+    </div>
+  );
+}

src/components/monitor/DisableModelModal.tsx

@@ -0,0 +1,101 @@
+/**
+ * 禁用模型确认弹窗组件
+ * 封装三次确认的 UI 逻辑
+ */
+
+import { useTranslation } from 'react-i18next';
+import { Modal } from '@/components/ui/Modal';
+import { Button } from '@/components/ui/Button';
+import type { DisableState } from '@/utils/monitor';
+
+interface DisableModelModalProps {
+  /** 禁用状态 */
+  disableState: DisableState | null;
+  /** 是否正在禁用中 */
+  disabling: boolean;
+  /** 确认回调 */
+  onConfirm: () => void;
+  /** 取消回调 */
+  onCancel: () => void;
+}
+
+export function DisableModelModal({
+  disableState,
+  disabling,
+  onConfirm,
+  onCancel,
+}: DisableModelModalProps) {
+  const { t, i18n } = useTranslation();
+  const isZh = i18n.language === 'zh-CN' || i18n.language === 'zh';
+
+  // 获取警告内容
+  const getWarningContent = () => {
+    if (!disableState) return null;
+
+    if (disableState.step === 1) {
+      return (
+        <p style={{ marginBottom: 16, lineHeight: 1.6 }}>
+          {isZh ? '确定要禁用 ' : 'Are you sure you want to disable '}
+          <strong>{disableState.displayName}</strong>
+          {isZh ? ' 吗？' : '?'}
+        </p>
+      );
+    }
+
+    if (disableState.step === 2) {
+      return (
+        <p style={{ marginBottom: 16, lineHeight: 1.6, color: 'var(--warning-color, #f59e0b)' }}>
+          {isZh
+            ? '⚠️ 警告：此操作将从配置中移除该模型映射！'
+            : '⚠️ Warning: this removes the model mapping from config!'}
+        </p>
+      );
+    }
+
+    return (
+      <p style={{ marginBottom: 16, lineHeight: 1.6, color: 'var(--danger-color, #ef4444)' }}>
+        {isZh
+          ? '🚨 最后确认：禁用后需要手动重新添加才能恢复！'
+          : "🚨 Final confirmation: you'll need to add it back manually later!"}
+      </p>
+    );
+  };
+
+  // 获取确认按钮文本
+  const getConfirmButtonText = () => {
+    if (!disableState) return '';
+    const btnTexts = isZh
+      ? ['确认禁用 (3)', '我确定 (2)', '立即禁用 (1)']
+      : ['Confirm (3)', "I'm sure (2)", 'Disable now (1)'];
+    return btnTexts[disableState.step - 1] || btnTexts[0];
+  };
+
+  return (
+    <Modal
+      open={!!disableState}
+      onClose={onCancel}
+      title={t('monitor.logs.disable_confirm_title')}
+      width={400}
+    >
+      <div style={{ padding: '16px 0' }}>
+        {getWarningContent()}
+        <div style={{ display: 'flex', gap: 12, justifyContent: 'flex-end' }}>
+          <Button
+            variant="secondary"
+            onClick={onCancel}
+            disabled={disabling}
+          >
+            {t('common.cancel')}
+          </Button>
+          <Button
+            variant="danger"
+            onClick={onConfirm}
+            disabled={disabling}
+          >
+            {disabling ? t('monitor.logs.disabling') : getConfirmButtonText()}
+          </Button>
+        </div>
+      </div>
+    </Modal>
+  );
+}

src/components/monitor/FailureAnalysis.tsx

@@ -0,0 +1,420 @@
+import { useMemo, useState, useCallback, Fragment } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Card } from '@/components/ui/Card';
+import { useDisableModel } from '@/hooks';
+import { TimeRangeSelector, formatTimeRangeCaption, type TimeRange } from './TimeRangeSelector';
+import { DisableModelModal } from './DisableModelModal';
+import {
+  formatTimestamp,
+  getRateClassName,
+  filterDataByTimeRange,
+  getProviderDisplayParts,
+  type DateRange,
+} from '@/utils/monitor';
+import type { UsageData } from '@/pages/MonitorPage';
+import styles from '@/pages/MonitorPage.module.scss';
+
+interface FailureAnalysisProps {
+  data: UsageData | null;
+  loading: boolean;
+  providerMap: Record<string, string>;
+  providerModels: Record<string, Set<string>>;
+}
+
+interface ModelFailureStat {
+  success: number;
+  failure: number;
+  total: number;
+  successRate: number;
+  recentRequests: { failed: boolean; timestamp: number }[];
+  lastTimestamp: number;
+}
+
+interface FailureStat {
+  source: string;
+  displayName: string;
+  providerName: string | null;
+  maskedKey: string;
+  failedCount: number;
+  lastFailTime: number;
+  models: Record<string, ModelFailureStat>;
+}
+
+export function FailureAnalysis({ data, loading, providerMap, providerModels }: FailureAnalysisProps) {
+  const { t } = useTranslation();
+  const [expandedChannel, setExpandedChannel] = useState<string | null>(null);
+  const [filterChannel, setFilterChannel] = useState('');
+  const [filterModel, setFilterModel] = useState('');
+
+  // 时间范围状态
+  const [timeRange, setTimeRange] = useState<TimeRange>(7);
+  const [customRange, setCustomRange] = useState<DateRange | undefined>();
+
+  // 使用禁用模型 Hook
+  const {
+    disableState,
+    disabling,
+    isModelDisabled,
+    handleDisableClick: onDisableClick,
+    handleConfirmDisable,
+    handleCancelDisable,
+  } = useDisableModel({ providerMap, providerModels });
+
+  // 处理时间范围变化
+  const handleTimeRangeChange = useCallback((range: TimeRange, custom?: DateRange) => {
+    setTimeRange(range);
+    if (custom) {
+      setCustomRange(custom);
+    }
+  }, []);
+
+  // 根据时间范围过滤数据
+  const timeFilteredData = useMemo(() => {
+    return filterDataByTimeRange(data, timeRange, customRange);
+  }, [data, timeRange, customRange]);
+
+  // 计算失败统计数据
+  const failureStats = useMemo(() => {
+    if (!timeFilteredData?.apis) return [];
+
+    // 首先收集有失败记录的渠道
+    const failedSources = new Set<string>();
+    Object.values(timeFilteredData.apis).forEach((apiData) => {
+      Object.values(apiData.models).forEach((modelData) => {
+        modelData.details.forEach((detail) => {
+          if (detail.failed) {
+            const source = detail.source || 'unknown';
+            const { provider } = getProviderDisplayParts(source, providerMap);
+            if (provider) {
+              failedSources.add(source);
+            }
+          }
+        });
+      });
+    });
+
+    // 统计这些渠道的所有请求
+    const stats: Record<string, FailureStat> = {};
+
+    Object.values(timeFilteredData.apis).forEach((apiData) => {
+      Object.entries(apiData.models).forEach(([modelName, modelData]) => {
+        modelData.details.forEach((detail) => {
+          const source = detail.source || 'unknown';
+          // 只统计有失败记录的渠道
+          if (!failedSources.has(source)) return;
+
+          const { provider, masked } = getProviderDisplayParts(source, providerMap);
+          const displayName = provider ? `${provider} (${masked})` : masked;
+          const timestamp = detail.timestamp ? new Date(detail.timestamp).getTime() : 0;
+
+          if (!stats[displayName]) {
+            stats[displayName] = {
+              source,
+              displayName,
+              providerName: provider,
+              maskedKey: masked,
+              failedCount: 0,
+              lastFailTime: 0,
+              models: {},
+            };
+          }
+
+          if (detail.failed) {
+            stats[displayName].failedCount++;
+            if (timestamp > stats[displayName].lastFailTime) {
+              stats[displayName].lastFailTime = timestamp;
+            }
+          }
+
+          // 按模型统计
+          if (!stats[displayName].models[modelName]) {
+            stats[displayName].models[modelName] = {
+              success: 0,
+              failure: 0,
+              total: 0,
+              successRate: 0,
+              recentRequests: [],
+              lastTimestamp: 0,
+            };
+          }
+          stats[displayName].models[modelName].total++;
+          if (detail.failed) {
+            stats[displayName].models[modelName].failure++;
+          } else {
+            stats[displayName].models[modelName].success++;
+          }
+          stats[displayName].models[modelName].recentRequests.push({ failed: detail.failed, timestamp });
+          if (timestamp > stats[displayName].models[modelName].lastTimestamp) {
+            stats[displayName].models[modelName].lastTimestamp = timestamp;
+          }
+        });
+      });
+    });
+
+    // 计算成功率并排序请求
+    Object.values(stats).forEach((stat) => {
+      Object.values(stat.models).forEach((model) => {
+        model.successRate = model.total > 0
+          ? (model.success / model.total) * 100
+          : 0;
+        model.recentRequests.sort((a, b) => a.timestamp - b.timestamp);
+        model.recentRequests = model.recentRequests.slice(-12);
+      });
+    });
+
+    return Object.values(stats)
+      .filter((stat) => stat.failedCount > 0)
+      .sort((a, b) => b.failedCount - a.failedCount)
+      .slice(0, 10);
+  }, [timeFilteredData, providerMap]);
+
+  // 获取所有渠道和模型列表
+  const { channels, models } = useMemo(() => {
+    const channelSet = new Set<string>();
+    const modelSet = new Set<string>();
+
+    failureStats.forEach((stat) => {
+      channelSet.add(stat.displayName);
+      Object.keys(stat.models).forEach((model) => modelSet.add(model));
+    });
+
+    return {
+      channels: Array.from(channelSet).sort(),
+      models: Array.from(modelSet).sort(),
+    };
+  }, [failureStats]);
+
+  // 过滤后的数据
+  const filteredStats = useMemo(() => {
+    return failureStats.filter((stat) => {
+      if (filterChannel && stat.displayName !== filterChannel) return false;
+      if (filterModel && !stat.models[filterModel]) return false;
+      return true;
+    });
+  }, [failureStats, filterChannel, filterModel]);
+
+  // 切换展开状态
+  const toggleExpand = (displayName: string) => {
+    setExpandedChannel(expandedChannel === displayName ? null : displayName);
+  };
+
+  // 获取主要失败模型（前2个，已禁用的排在后面）
+  const getTopFailedModels = (source: string, modelsMap: Record<string, ModelFailureStat>) => {
+    return Object.entries(modelsMap)
+      .filter(([, stat]) => stat.failure > 0)
+      .sort((a, b) => {
+        const aDisabled = isModelDisabled(source, a[0]);
+        const bDisabled = isModelDisabled(source, b[0]);
+        // 已禁用的排在后面
+        if (aDisabled !== bDisabled) {
+          return aDisabled ? 1 : -1;
+        }
+        // 然后按失败数降序
+        return b[1].failure - a[1].failure;
+      })
+      .slice(0, 2);
+  };
+
+  // 开始禁用流程（阻止事件冒泡）
+  const handleDisableClick = (source: string, model: string, e: React.MouseEvent) => {
+    e.stopPropagation();
+    onDisableClick(source, model);
+  };
+
+  return (
+    <>
+      <Card
+        title={t('monitor.failure.title')}
+        subtitle={
+          <span>
+            {formatTimeRangeCaption(timeRange, customRange, t)} · {t('monitor.failure.subtitle')}
+            <span style={{ color: 'var(--text-tertiary)' }}> · {t('monitor.failure.click_hint')}</span>
+          </span>
+        }
+        extra={
+          <TimeRangeSelector
+            value={timeRange}
+            onChange={handleTimeRangeChange}
+            customRange={customRange}
+          />
+        }
+      >
+        {/* 筛选器 */}
+        <div className={styles.logFilters}>
+          <select
+            className={styles.logSelect}
+            value={filterChannel}
+            onChange={(e) => setFilterChannel(e.target.value)}
+          >
+            <option value="">{t('monitor.channel.all_channels')}</option>
+            {channels.map((channel) => (
+              <option key={channel} value={channel}>{channel}</option>
+            ))}
+          </select>
+          <select
+            className={styles.logSelect}
+            value={filterModel}
+            onChange={(e) => setFilterModel(e.target.value)}
+          >
+            <option value="">{t('monitor.channel.all_models')}</option>
+            {models.map((model) => (
+              <option key={model} value={model}>{model}</option>
+            ))}
+          </select>
+        </div>
+
+        {/* 表格 */}
+        <div className={styles.tableWrapper}>
+          {loading ? (
+            <div className={styles.emptyState}>{t('common.loading')}</div>
+          ) : filteredStats.length === 0 ? (
+            <div className={styles.emptyState}>{t('monitor.failure.no_failures')}</div>
+          ) : (
+            <table className={styles.table}>
+              <thead>
+                <tr>
+                  <th>{t('monitor.failure.header_name')}</th>
+                  <th>{t('monitor.failure.header_count')}</th>
+                  <th>{t('monitor.failure.header_time')}</th>
+                  <th>{t('monitor.failure.header_models')}</th>
+                </tr>
+              </thead>
+              <tbody>
+                {filteredStats.map((stat) => {
+                  const topModels = getTopFailedModels(stat.source, stat.models);
+                  const totalFailedModels = Object.values(stat.models).filter(m => m.failure > 0).length;
+
+                  return (
+                    <Fragment key={stat.displayName}>
+                      <tr
+                        className={styles.expandable}
+                        onClick={() => toggleExpand(stat.displayName)}
+                      >
+                        <td>
+                          {stat.providerName ? (
+                            <>
+                              <span className={styles.channelName}>{stat.providerName}</span>
+                              <span className={styles.channelSecret}> ({stat.maskedKey})</span>
+                            </>
+                          ) : (
+                            stat.maskedKey
+                          )}
+                        </td>
+                        <td className={styles.kpiFailure}>{stat.failedCount.toLocaleString()}</td>
+                        <td>{formatTimestamp(stat.lastFailTime)}</td>
+                        <td>
+                          {topModels.map(([model, modelStat]) => {
+                            const percent = ((modelStat.failure / stat.failedCount) * 100).toFixed(0);
+                            const shortModel = model.length > 16 ? model.slice(0, 13) + '...' : model;
+                            const disabled = isModelDisabled(stat.source, model);
+                            return (
+                              <span
+                                key={model}
+                                className={`${styles.failureModelTag} ${disabled ? styles.modelDisabled : ''}`}
+                                title={`${model}: ${modelStat.failure} (${percent}%)${disabled ? ` - ${t('monitor.logs.removed')}` : ''}`}
+                              >
+                                {shortModel}
+                              </span>
+                            );
+                          })}
+                          {totalFailedModels > 2 && (
+                            <span className={styles.moreModelsHint}>
+                              +{totalFailedModels - 2}
+                            </span>
+                          )}
+                        </td>
+                      </tr>
+                      {expandedChannel === stat.displayName && (
+                        <tr key={`${stat.displayName}-detail`}>
+                          <td colSpan={4} className={styles.expandDetail}>
+                            <div className={styles.expandTableWrapper}>
+                            <table className={styles.table}>
+                              <thead>
+                                <tr>
+                                  <th>{t('monitor.channel.model')}</th>
+                                  <th>{t('monitor.channel.header_count')}</th>
+                                  <th>{t('monitor.channel.header_rate')}</th>
+                                  <th>{t('monitor.channel.success')}/{t('monitor.channel.failed')}</th>
+                                  <th>{t('monitor.channel.header_recent')}</th>
+                                  <th>{t('monitor.channel.header_time')}</th>
+                                  <th>{t('monitor.logs.header_actions')}</th>
+                                </tr>
+                              </thead>
+                              <tbody>
+                                {Object.entries(stat.models)
+                                  .filter(([, m]) => m.failure > 0)
+                                  .sort((a, b) => {
+                                    const aDisabled = isModelDisabled(stat.source, a[0]);
+                                    const bDisabled = isModelDisabled(stat.source, b[0]);
+                                    // 已禁用的排在后面
+                                    if (aDisabled !== bDisabled) {
+                                      return aDisabled ? 1 : -1;
+                                    }
+                                    // 然后按失败数降序
+                                    return b[1].failure - a[1].failure;
+                                  })
+                                  .map(([modelName, modelStat]) => {
+                                    const disabled = isModelDisabled(stat.source, modelName);
+                                    return (
+                                      <tr key={modelName} className={disabled ? styles.modelDisabled : ''}>
+                                        <td>{modelName}</td>
+                                        <td>{modelStat.total.toLocaleString()}</td>
+                                        <td className={getRateClassName(modelStat.successRate, styles)}>
+                                          {modelStat.successRate.toFixed(1)}%
+                                        </td>
+                                        <td>
+                                          <span className={styles.kpiSuccess}>{modelStat.success}</span>
+                                          {' / '}
+                                          <span className={styles.kpiFailure}>{modelStat.failure}</span>
+                                        </td>
+                                        <td>
+                                          <div className={styles.statusBars}>
+                                            {modelStat.recentRequests.map((req, i) => (
+                                              <div
+                                                key={i}
+                                                className={`${styles.statusBar} ${req.failed ? styles.failure : styles.success}`}
+                                              />
+                                            ))}
+                                          </div>
+                                        </td>
+                                        <td>{formatTimestamp(modelStat.lastTimestamp)}</td>
+                                        <td>
+                                          {disabled ? (
+                                            <span className={styles.disabledLabel}>{t('monitor.logs.removed')}</span>
+                                          ) : stat.source && stat.source !== '-' && stat.source !== 'unknown' ? (
+                                            <button
+                                              className={styles.disableBtn}
+                                              onClick={(e) => handleDisableClick(stat.source, modelName, e)}
+                                            >
+                                              {t('monitor.logs.disable')}
+                                            </button>
+                                          ) : '-'}
+                                        </td>
+                                      </tr>
+                                    );
+                                  })}
+                              </tbody>
+                            </table>
+                            </div>
+                          </td>
+                        </tr>
+                      )}
+                    </Fragment>
+                  );
+                })}
+              </tbody>
+            </table>
+          )}
+        </div>
+      </Card>
+
+      {/* 禁用确认弹窗 */}
+      <DisableModelModal
+        disableState={disableState}
+        disabling={disabling}
+        onConfirm={handleConfirmDisable}
+        onCancel={handleCancelDisable}
+      />
+    </>
+  );
+}

src/components/monitor/HourlyModelChart.tsx

@@ -0,0 +1,314 @@
+import { useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Chart } from 'react-chartjs-2';
+import type { UsageData } from '@/pages/MonitorPage';
+import styles from '@/pages/MonitorPage.module.scss';
+
+interface HourlyModelChartProps {
+  data: UsageData | null;
+  loading: boolean;
+  isDark: boolean;
+}
+
+// 颜色调色板
+const COLORS = [
+  'rgba(59, 130, 246, 0.7)',   // 蓝色
+  'rgba(34, 197, 94, 0.7)',    // 绿色
+  'rgba(249, 115, 22, 0.7)',   // 橙色
+  'rgba(139, 92, 246, 0.7)',   // 紫色
+  'rgba(236, 72, 153, 0.7)',   // 粉色
+  'rgba(6, 182, 212, 0.7)',    // 青色
+];
+
+type HourRange = 6 | 12 | 24;
+
+export function HourlyModelChart({ data, loading, isDark }: HourlyModelChartProps) {
+  const { t } = useTranslation();
+  const [hourRange, setHourRange] = useState<HourRange>(12);
+
+  // 按小时聚合数据
+  const hourlyData = useMemo(() => {
+    if (!data?.apis) return { hours: [], models: [], modelData: {} as Record<string, number[]>, successRates: [] };
+
+    const now = new Date();
+    let cutoffTime: Date;
+    let hoursCount: number;
+
+    cutoffTime = new Date(now.getTime() - hourRange * 60 * 60 * 1000);
+    cutoffTime.setMinutes(0, 0, 0);
+    hoursCount = hourRange + 1;
+
+    // 生成所有小时的时间点
+    const allHours: string[] = [];
+    for (let i = 0; i < hoursCount; i++) {
+      const hourTime = new Date(cutoffTime.getTime() + i * 60 * 60 * 1000);
+      const hourKey = hourTime.toISOString().slice(0, 13); // YYYY-MM-DDTHH
+      allHours.push(hourKey);
+    }
+
+    // 收集每小时每个模型的请求数
+    const hourlyStats: Record<string, Record<string, { success: number; failed: number }>> = {};
+    const modelSet = new Set<string>();
+
+    // 初始化所有小时
+    allHours.forEach((hour) => {
+      hourlyStats[hour] = {};
+    });
+
+    Object.values(data.apis).forEach((apiData) => {
+      Object.entries(apiData.models).forEach(([modelName, modelData]) => {
+        modelSet.add(modelName);
+        modelData.details.forEach((detail) => {
+          const timestamp = new Date(detail.timestamp);
+          if (timestamp < cutoffTime) return;
+
+          const hourKey = timestamp.toISOString().slice(0, 13); // YYYY-MM-DDTHH
+          if (!hourlyStats[hourKey]) {
+            hourlyStats[hourKey] = {};
+          }
+          if (!hourlyStats[hourKey][modelName]) {
+            hourlyStats[hourKey][modelName] = { success: 0, failed: 0 };
+          }
+          if (detail.failed) {
+            hourlyStats[hourKey][modelName].failed++;
+          } else {
+            hourlyStats[hourKey][modelName].success++;
+          }
+        });
+      });
+    });
+
+    // 获取排序后的小时列表
+    const hours = allHours.sort();
+
+    // 计算每个模型的总请求数，取 Top 6
+    const modelTotals: Record<string, number> = {};
+    hours.forEach((hour) => {
+      Object.entries(hourlyStats[hour]).forEach(([model, stats]) => {
+        modelTotals[model] = (modelTotals[model] || 0) + stats.success + stats.failed;
+      });
+    });
+
+    const topModels = Object.entries(modelTotals)
+      .sort((a, b) => b[1] - a[1])
+      .slice(0, 6)
+      .map(([name]) => name);
+
+    // 构建每个模型的数据数组
+    const modelData: Record<string, number[]> = {};
+    topModels.forEach((model) => {
+      modelData[model] = hours.map((hour) => {
+        const stats = hourlyStats[hour][model];
+        return stats ? stats.success + stats.failed : 0;
+      });
+    });
+
+    // 计算每小时的成功率
+    const successRates = hours.map((hour) => {
+      let totalSuccess = 0;
+      let totalRequests = 0;
+      Object.values(hourlyStats[hour]).forEach((stats) => {
+        totalSuccess += stats.success;
+        totalRequests += stats.success + stats.failed;
+      });
+      return totalRequests > 0 ? (totalSuccess / totalRequests) * 100 : 0;
+    });
+
+    return { hours, models: topModels, modelData, successRates };
+  }, [data, hourRange]);
+
+  // 获取时间范围标签
+  const hourRangeLabel = useMemo(() => {
+    if (hourRange === 6) return t('monitor.hourly.last_6h');
+    if (hourRange === 12) return t('monitor.hourly.last_12h');
+    return t('monitor.hourly.last_24h');
+  }, [hourRange, t]);
+
+  // 图表数据
+  const chartData = useMemo(() => {
+    const labels = hourlyData.hours.map((hour) => {
+      const date = new Date(hour + ':00:00Z'); // 添加 Z 表示 UTC 时间，确保正确转换为本地时间显示
+      return `${date.getHours()}:00`;
+    });
+
+    // 成功率折线放在最前面
+    const datasets: any[] = [{
+      type: 'line' as const,
+      label: t('monitor.hourly.success_rate'),
+      data: hourlyData.successRates,
+      borderColor: '#4ef0c3',
+      backgroundColor: '#4ef0c3',
+      borderWidth: 2.5,
+      tension: 0.4,
+      yAxisID: 'y1',
+      stack: '',
+      pointRadius: 3,
+      pointBackgroundColor: '#4ef0c3',
+      pointBorderColor: '#4ef0c3',
+    }];
+
+    // 添加模型柱状图
+    hourlyData.models.forEach((model, index) => {
+      datasets.push({
+        type: 'bar' as const,
+        label: model,
+        data: hourlyData.modelData[model],
+        backgroundColor: COLORS[index % COLORS.length],
+        borderColor: COLORS[index % COLORS.length],
+        borderWidth: 1,
+        borderRadius: 4,
+        stack: 'models',
+        yAxisID: 'y',
+      });
+    });
+
+    return { labels, datasets };
+  }, [hourlyData, t]);
+
+  // 图表配置
+  const chartOptions = useMemo(() => ({
+    responsive: true,
+    maintainAspectRatio: false,
+    interaction: {
+      mode: 'index' as const,
+      intersect: false,
+    },
+    plugins: {
+      legend: {
+        display: true,
+        position: 'bottom' as const,
+        labels: {
+          color: isDark ? '#9ca3af' : '#6b7280',
+          usePointStyle: true,
+          padding: 12,
+          font: {
+            size: 11,
+          },
+          generateLabels: (chart: any) => {
+            return chart.data.datasets.map((dataset: any, i: number) => {
+              const isLine = dataset.type === 'line';
+              return {
+                text: dataset.label,
+                fillStyle: dataset.backgroundColor,
+                strokeStyle: dataset.borderColor,
+                lineWidth: 0,
+                hidden: !chart.isDatasetVisible(i),
+                datasetIndex: i,
+                pointStyle: isLine ? 'circle' : 'rect',
+              };
+            });
+          },
+        },
+      },
+      tooltip: {
+        backgroundColor: isDark ? '#374151' : '#ffffff',
+        titleColor: isDark ? '#f3f4f6' : '#111827',
+        bodyColor: isDark ? '#d1d5db' : '#4b5563',
+        borderColor: isDark ? '#4b5563' : '#e5e7eb',
+        borderWidth: 1,
+        padding: 12,
+      },
+    },
+    scales: {
+      x: {
+        stacked: true,
+        grid: {
+          color: isDark ? 'rgba(255, 255, 255, 0.06)' : 'rgba(0, 0, 0, 0.06)',
+        },
+        ticks: {
+          color: isDark ? '#9ca3af' : '#6b7280',
+          font: {
+            size: 11,
+          },
+        },
+      },
+      y: {
+        stacked: true,
+        position: 'left' as const,
+        grid: {
+          color: isDark ? 'rgba(255, 255, 255, 0.06)' : 'rgba(0, 0, 0, 0.06)',
+        },
+        ticks: {
+          color: isDark ? '#9ca3af' : '#6b7280',
+          font: {
+            size: 11,
+          },
+        },
+        title: {
+          display: true,
+          text: t('monitor.hourly.requests'),
+          color: isDark ? '#9ca3af' : '#6b7280',
+          font: {
+            size: 11,
+          },
+        },
+      },
+      y1: {
+        position: 'right' as const,
+        min: 0,
+        max: 100,
+        grid: {
+          drawOnChartArea: false,
+        },
+        ticks: {
+          color: isDark ? '#9ca3af' : '#6b7280',
+          font: {
+            size: 11,
+          },
+          callback: (value: string | number) => `${value}%`,
+        },
+        title: {
+          display: true,
+          text: t('monitor.hourly.success_rate'),
+          color: isDark ? '#9ca3af' : '#6b7280',
+          font: {
+            size: 11,
+          },
+        },
+      },
+    },
+  }), [isDark, t]);
+
+  return (
+    <div className={styles.chartCard}>
+      <div className={styles.chartHeader}>
+        <div>
+          <h3 className={styles.chartTitle}>{t('monitor.hourly_model.title')}</h3>
+          <p className={styles.chartSubtitle}>
+            {hourRangeLabel}
+          </p>
+        </div>
+        <div className={styles.chartControls}>
+          <button
+            className={`${styles.chartControlBtn} ${hourRange === 6 ? styles.active : ''}`}
+            onClick={() => setHourRange(6)}
+          >
+            {t('monitor.hourly.last_6h')}
+          </button>
+          <button
+            className={`${styles.chartControlBtn} ${hourRange === 12 ? styles.active : ''}`}
+            onClick={() => setHourRange(12)}
+          >
+            {t('monitor.hourly.last_12h')}
+          </button>
+          <button
+            className={`${styles.chartControlBtn} ${hourRange === 24 ? styles.active : ''}`}
+            onClick={() => setHourRange(24)}
+          >
+            {t('monitor.hourly.last_24h')}
+          </button>
+        </div>
+      </div>
+
+      <div className={styles.chartContent}>
+        {loading || hourlyData.hours.length === 0 ? (
+          <div className={styles.chartEmpty}>
+            {loading ? t('common.loading') : t('monitor.no_data')}
+          </div>
+        ) : (
+          <Chart type="bar" data={chartData} options={chartOptions} />
+        )}
+      </div>
+    </div>
+  );
+}

src/components/monitor/HourlyTokenChart.tsx

@@ -0,0 +1,274 @@
+import { useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Chart } from 'react-chartjs-2';
+import type { UsageData } from '@/pages/MonitorPage';
+import styles from '@/pages/MonitorPage.module.scss';
+
+interface HourlyTokenChartProps {
+  data: UsageData | null;
+  loading: boolean;
+  isDark: boolean;
+}
+
+type HourRange = 6 | 12 | 24;
+
+export function HourlyTokenChart({ data, loading, isDark }: HourlyTokenChartProps) {
+  const { t } = useTranslation();
+  const [hourRange, setHourRange] = useState<HourRange>(12);
+
+  // 按小时聚合 Token 数据
+  const hourlyData = useMemo(() => {
+    if (!data?.apis) return { hours: [], totalTokens: [], inputTokens: [], outputTokens: [], reasoningTokens: [], cachedTokens: [] };
+
+    const now = new Date();
+    let cutoffTime: Date;
+    let hoursCount: number;
+
+    cutoffTime = new Date(now.getTime() - hourRange * 60 * 60 * 1000);
+    cutoffTime.setMinutes(0, 0, 0);
+    hoursCount = hourRange + 1;
+
+    // 生成所有小时的时间点
+    const allHours: string[] = [];
+    for (let i = 0; i < hoursCount; i++) {
+      const hourTime = new Date(cutoffTime.getTime() + i * 60 * 60 * 1000);
+      const hourKey = hourTime.toISOString().slice(0, 13); // YYYY-MM-DDTHH
+      allHours.push(hourKey);
+    }
+
+    // 初始化所有小时的数据为0
+    const hourlyStats: Record<string, {
+      total: number;
+      input: number;
+      output: number;
+      reasoning: number;
+      cached: number;
+    }> = {};
+    allHours.forEach((hour) => {
+      hourlyStats[hour] = { total: 0, input: 0, output: 0, reasoning: 0, cached: 0 };
+    });
+
+    // 收集每小时的 Token 数据（只统计成功请求）
+    Object.values(data.apis).forEach((apiData) => {
+      Object.values(apiData.models).forEach((modelData) => {
+        modelData.details.forEach((detail) => {
+          // 跳过失败请求，失败请求的 Token 数据不准确
+          if (detail.failed) return;
+
+          const timestamp = new Date(detail.timestamp);
+          if (timestamp < cutoffTime) return;
+
+          const hourKey = timestamp.toISOString().slice(0, 13); // YYYY-MM-DDTHH
+          if (!hourlyStats[hourKey]) {
+            hourlyStats[hourKey] = { total: 0, input: 0, output: 0, reasoning: 0, cached: 0 };
+          }
+          hourlyStats[hourKey].total += detail.tokens.total_tokens || 0;
+          hourlyStats[hourKey].input += detail.tokens.input_tokens || 0;
+          hourlyStats[hourKey].output += detail.tokens.output_tokens || 0;
+          hourlyStats[hourKey].reasoning += detail.tokens.reasoning_tokens || 0;
+          hourlyStats[hourKey].cached += detail.tokens.cached_tokens || 0;
+        });
+      });
+    });
+
+    // 获取排序后的小时列表
+    const hours = allHours.sort();
+
+    return {
+      hours,
+      totalTokens: hours.map((h) => (hourlyStats[h]?.total || 0) / 1000),
+      inputTokens: hours.map((h) => (hourlyStats[h]?.input || 0) / 1000),
+      outputTokens: hours.map((h) => (hourlyStats[h]?.output || 0) / 1000),
+      reasoningTokens: hours.map((h) => (hourlyStats[h]?.reasoning || 0) / 1000),
+      cachedTokens: hours.map((h) => (hourlyStats[h]?.cached || 0) / 1000),
+    };
+  }, [data, hourRange]);
+
+  // 获取时间范围标签
+  const hourRangeLabel = useMemo(() => {
+    if (hourRange === 6) return t('monitor.hourly.last_6h');
+    if (hourRange === 12) return t('monitor.hourly.last_12h');
+    return t('monitor.hourly.last_24h');
+  }, [hourRange, t]);
+
+  // 图表数据
+  const chartData = useMemo(() => {
+    const labels = hourlyData.hours.map((hour) => {
+      const date = new Date(hour + ':00:00Z'); // 添加 Z 表示 UTC 时间，确保正确转换为本地时间显示
+      return `${date.getHours()}:00`;
+    });
+
+    return {
+      labels,
+      datasets: [
+        {
+          type: 'line' as const,
+          label: t('monitor.hourly_token.input'),
+          data: hourlyData.inputTokens,
+          borderColor: '#22c55e',
+          backgroundColor: '#22c55e',
+          borderWidth: 2,
+          tension: 0.4,
+          yAxisID: 'y',
+          order: 0,
+          pointRadius: 3,
+          pointBackgroundColor: '#22c55e',
+        },
+        {
+          type: 'line' as const,
+          label: t('monitor.hourly_token.output'),
+          data: hourlyData.outputTokens,
+          borderColor: '#f97316',
+          backgroundColor: '#f97316',
+          borderWidth: 2,
+          tension: 0.4,
+          yAxisID: 'y',
+          order: 0,
+          pointRadius: 3,
+          pointBackgroundColor: '#f97316',
+        },
+        {
+          type: 'bar' as const,
+          label: t('monitor.hourly_token.total'),
+          data: hourlyData.totalTokens,
+          backgroundColor: 'rgba(59, 130, 246, 0.6)',
+          borderColor: 'rgba(59, 130, 246, 0.6)',
+          borderWidth: 1,
+          borderRadius: 4,
+          yAxisID: 'y',
+          order: 1,
+        },
+      ],
+    };
+  }, [hourlyData, t]);
+
+  // 图表配置
+  const chartOptions = useMemo(() => ({
+    responsive: true,
+    maintainAspectRatio: false,
+    interaction: {
+      mode: 'index' as const,
+      intersect: false,
+    },
+    plugins: {
+      legend: {
+        display: true,
+        position: 'bottom' as const,
+        labels: {
+          color: isDark ? '#9ca3af' : '#6b7280',
+          usePointStyle: true,
+          padding: 12,
+          font: {
+            size: 11,
+          },
+          generateLabels: (chart: any) => {
+            return chart.data.datasets.map((dataset: any, i: number) => {
+              const isLine = dataset.type === 'line';
+              return {
+                text: dataset.label,
+                fillStyle: dataset.backgroundColor,
+                strokeStyle: dataset.borderColor,
+                lineWidth: 0,
+                hidden: !chart.isDatasetVisible(i),
+                datasetIndex: i,
+                pointStyle: isLine ? 'circle' : 'rect',
+              };
+            });
+          },
+        },
+      },
+      tooltip: {
+        backgroundColor: isDark ? '#374151' : '#ffffff',
+        titleColor: isDark ? '#f3f4f6' : '#111827',
+        bodyColor: isDark ? '#d1d5db' : '#4b5563',
+        borderColor: isDark ? '#4b5563' : '#e5e7eb',
+        borderWidth: 1,
+        padding: 12,
+        callbacks: {
+          label: (context: any) => {
+            const label = context.dataset.label || '';
+            const value = context.raw;
+            return `${label}: ${value.toFixed(1)}K`;
+          },
+        },
+      },
+    },
+    scales: {
+      x: {
+        grid: {
+          color: isDark ? 'rgba(255, 255, 255, 0.06)' : 'rgba(0, 0, 0, 0.06)',
+        },
+        ticks: {
+          color: isDark ? '#9ca3af' : '#6b7280',
+          font: {
+            size: 11,
+          },
+        },
+      },
+      y: {
+        position: 'left' as const,
+        grid: {
+          color: isDark ? 'rgba(255, 255, 255, 0.06)' : 'rgba(0, 0, 0, 0.06)',
+        },
+        ticks: {
+          color: isDark ? '#9ca3af' : '#6b7280',
+          font: {
+            size: 11,
+          },
+          callback: (value: string | number) => `${value}K`,
+        },
+        title: {
+          display: true,
+          text: 'Tokens (K)',
+          color: isDark ? '#9ca3af' : '#6b7280',
+          font: {
+            size: 11,
+          },
+        },
+      },
+    },
+  }), [isDark]);
+
+  return (
+    <div className={styles.chartCard}>
+      <div className={styles.chartHeader}>
+        <div>
+          <h3 className={styles.chartTitle}>{t('monitor.hourly_token.title')}</h3>
+          <p className={styles.chartSubtitle}>
+            {hourRangeLabel}
+          </p>
+        </div>
+        <div className={styles.chartControls}>
+          <button
+            className={`${styles.chartControlBtn} ${hourRange === 6 ? styles.active : ''}`}
+            onClick={() => setHourRange(6)}
+          >
+            {t('monitor.hourly.last_6h')}
+          </button>
+          <button
+            className={`${styles.chartControlBtn} ${hourRange === 12 ? styles.active : ''}`}
+            onClick={() => setHourRange(12)}
+          >
+            {t('monitor.hourly.last_12h')}
+          </button>
+          <button
+            className={`${styles.chartControlBtn} ${hourRange === 24 ? styles.active : ''}`}
+            onClick={() => setHourRange(24)}
+          >
+            {t('monitor.hourly.last_24h')}
+          </button>
+        </div>
+      </div>
+
+      <div className={styles.chartContent}>
+        {loading || hourlyData.hours.length === 0 ? (
+          <div className={styles.chartEmpty}>
+            {loading ? t('common.loading') : t('monitor.no_data')}
+          </div>
+        ) : (
+          <Chart type="bar" data={chartData} options={chartOptions} />
+        )}
+      </div>
+    </div>
+  );
+}

src/components/monitor/KpiCards.tsx

@@ -0,0 +1,201 @@
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import type { UsageData } from '@/pages/MonitorPage';
+import styles from '@/pages/MonitorPage.module.scss';
+
+interface KpiCardsProps {
+  data: UsageData | null;
+  loading: boolean;
+  timeRange: number;
+}
+
+// 格式化数字
+function formatNumber(num: number): string {
+  if (num >= 1000000000) {
+    return (num / 1000000000).toFixed(2) + 'B';
+  }
+  if (num >= 1000000) {
+    return (num / 1000000).toFixed(2) + 'M';
+  }
+  if (num >= 1000) {
+    return (num / 1000).toFixed(2) + 'K';
+  }
+  return num.toLocaleString();
+}
+
+export function KpiCards({ data, loading, timeRange }: KpiCardsProps) {
+  const { t } = useTranslation();
+
+  // 计算统计数据
+  const stats = useMemo(() => {
+    if (!data?.apis) {
+      return {
+        totalRequests: 0,
+        successRequests: 0,
+        failedRequests: 0,
+        successRate: 0,
+        totalTokens: 0,
+        inputTokens: 0,
+        outputTokens: 0,
+        reasoningTokens: 0,
+        cachedTokens: 0,
+        avgTpm: 0,
+        avgRpm: 0,
+        avgRpd: 0,
+      };
+    }
+
+    let totalRequests = 0;
+    let successRequests = 0;
+    let failedRequests = 0;
+    let totalTokens = 0;
+    let inputTokens = 0;
+    let outputTokens = 0;
+    let reasoningTokens = 0;
+    let cachedTokens = 0;
+
+    // 收集所有时间戳用于计算 TPM/RPM
+    const timestamps: number[] = [];
+
+    Object.values(data.apis).forEach((apiData) => {
+      Object.values(apiData.models).forEach((modelData) => {
+        modelData.details.forEach((detail) => {
+          totalRequests++;
+          if (detail.failed) {
+            failedRequests++;
+          } else {
+            successRequests++;
+          }
+
+          totalTokens += detail.tokens.total_tokens || 0;
+          inputTokens += detail.tokens.input_tokens || 0;
+          outputTokens += detail.tokens.output_tokens || 0;
+          reasoningTokens += detail.tokens.reasoning_tokens || 0;
+          cachedTokens += detail.tokens.cached_tokens || 0;
+
+          timestamps.push(new Date(detail.timestamp).getTime());
+        });
+      });
+    });
+
+    const successRate = totalRequests > 0 ? (successRequests / totalRequests) * 100 : 0;
+
+    // 计算 TPM 和 RPM（基于实际时间跨度）
+    let avgTpm = 0;
+    let avgRpm = 0;
+    let avgRpd = 0;
+
+    if (timestamps.length > 0) {
+      const minTime = Math.min(...timestamps);
+      const maxTime = Math.max(...timestamps);
+      const timeSpanMinutes = Math.max((maxTime - minTime) / (1000 * 60), 1);
+      const timeSpanDays = Math.max(timeSpanMinutes / (60 * 24), 1);
+
+      avgTpm = Math.round(totalTokens / timeSpanMinutes);
+      avgRpm = Math.round(totalRequests / timeSpanMinutes * 10) / 10;
+      avgRpd = Math.round(totalRequests / timeSpanDays);
+    }
+
+    return {
+      totalRequests,
+      successRequests,
+      failedRequests,
+      successRate,
+      totalTokens,
+      inputTokens,
+      outputTokens,
+      reasoningTokens,
+      cachedTokens,
+      avgTpm,
+      avgRpm,
+      avgRpd,
+    };
+  }, [data]);
+
+  const timeRangeLabel = timeRange === 1
+    ? t('monitor.today')
+    : t('monitor.last_n_days', { n: timeRange });
+
+  return (
+    <div className={styles.kpiGrid}>
+      {/* 请求数 */}
+      <div className={styles.kpiCard}>
+        <div className={styles.kpiTitle}>
+          <span className={styles.kpiLabel}>{t('monitor.kpi.requests')}</span>
+          <span className={styles.kpiTag}>{timeRangeLabel}</span>
+        </div>
+        <div className={styles.kpiValue}>
+          {loading ? '--' : formatNumber(stats.totalRequests)}
+        </div>
+        <div className={styles.kpiMeta}>
+          <span className={styles.kpiSuccess}>
+            {t('monitor.kpi.success')}: {loading ? '--' : stats.successRequests.toLocaleString()}
+          </span>
+          <span className={styles.kpiFailure}>
+            {t('monitor.kpi.failed')}: {loading ? '--' : stats.failedRequests.toLocaleString()}
+          </span>
+          <span>
+            {t('monitor.kpi.rate')}: {loading ? '--' : stats.successRate.toFixed(1)}%
+          </span>
+        </div>
+      </div>
+
+      {/* Tokens */}
+      <div className={`${styles.kpiCard} ${styles.green}`}>
+        <div className={styles.kpiTitle}>
+          <span className={styles.kpiLabel}>{t('monitor.kpi.tokens')}</span>
+          <span className={styles.kpiTag}>{timeRangeLabel}</span>
+        </div>
+        <div className={styles.kpiValue}>
+          {loading ? '--' : formatNumber(stats.totalTokens)}
+        </div>
+        <div className={styles.kpiMeta}>
+          <span>{t('monitor.kpi.input')}: {loading ? '--' : formatNumber(stats.inputTokens)}</span>
+          <span>{t('monitor.kpi.output')}: {loading ? '--' : formatNumber(stats.outputTokens)}</span>
+        </div>
+      </div>
+
+      {/* 平均 TPM */}
+      <div className={`${styles.kpiCard} ${styles.purple}`}>
+        <div className={styles.kpiTitle}>
+          <span className={styles.kpiLabel}>{t('monitor.kpi.avg_tpm')}</span>
+          <span className={styles.kpiTag}>{timeRangeLabel}</span>
+        </div>
+        <div className={styles.kpiValue}>
+          {loading ? '--' : formatNumber(stats.avgTpm)}
+        </div>
+        <div className={styles.kpiMeta}>
+          <span>{t('monitor.kpi.tokens_per_minute')}</span>
+        </div>
+      </div>
+
+      {/* 平均 RPM */}
+      <div className={`${styles.kpiCard} ${styles.orange}`}>
+        <div className={styles.kpiTitle}>
+          <span className={styles.kpiLabel}>{t('monitor.kpi.avg_rpm')}</span>
+          <span className={styles.kpiTag}>{timeRangeLabel}</span>
+        </div>
+        <div className={styles.kpiValue}>
+          {loading ? '--' : stats.avgRpm.toFixed(1)}
+        </div>
+        <div className={styles.kpiMeta}>
+          <span>{t('monitor.kpi.requests_per_minute')}</span>
+        </div>
+      </div>
+
+      {/* 日均 RPD */}
+      <div className={`${styles.kpiCard} ${styles.cyan}`}>
+        <div className={styles.kpiTitle}>
+          <span className={styles.kpiLabel}>{t('monitor.kpi.avg_rpd')}</span>
+          <span className={styles.kpiTag}>{timeRangeLabel}</span>
+        </div>
+        <div className={styles.kpiValue}>
+          {loading ? '--' : formatNumber(stats.avgRpd)}
+        </div>
+        <div className={styles.kpiMeta}>
+          <span>{t('monitor.kpi.requests_per_day')}</span>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/monitor/ModelDistributionChart.tsx

@@ -0,0 +1,205 @@
+import { useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Doughnut } from 'react-chartjs-2';
+import type { UsageData } from '@/pages/MonitorPage';
+import styles from '@/pages/MonitorPage.module.scss';
+
+interface ModelDistributionChartProps {
+  data: UsageData | null;
+  loading: boolean;
+  isDark: boolean;
+  timeRange: number;
+}
+
+// 颜色调色板
+const COLORS = [
+  '#3b82f6', // 蓝色
+  '#22c55e', // 绿色
+  '#f97316', // 橙色
+  '#8b5cf6', // 紫色
+  '#ec4899', // 粉色
+  '#06b6d4', // 青色
+  '#eab308', // 黄色
+  '#ef4444', // 红色
+  '#14b8a6', // 青绿
+  '#6366f1', // 靛蓝
+];
+
+type ViewMode = 'request' | 'token';
+
+export function ModelDistributionChart({ data, loading, isDark, timeRange }: ModelDistributionChartProps) {
+  const { t } = useTranslation();
+  const [viewMode, setViewMode] = useState<ViewMode>('request');
+
+  const timeRangeLabel = timeRange === 1
+    ? t('monitor.today')
+    : t('monitor.last_n_days', { n: timeRange });
+
+  // 计算模型分布数据
+  const distributionData = useMemo(() => {
+    if (!data?.apis) return [];
+
+    const modelStats: Record<string, { requests: number; tokens: number }> = {};
+
+    Object.values(data.apis).forEach((apiData) => {
+      Object.entries(apiData.models).forEach(([modelName, modelData]) => {
+        if (!modelStats[modelName]) {
+          modelStats[modelName] = { requests: 0, tokens: 0 };
+        }
+        modelData.details.forEach((detail) => {
+          modelStats[modelName].requests++;
+          modelStats[modelName].tokens += detail.tokens.total_tokens || 0;
+        });
+      });
+    });
+
+    // 转换为数组并排序
+    const sorted = Object.entries(modelStats)
+      .map(([name, stats]) => ({
+        name,
+        requests: stats.requests,
+        tokens: stats.tokens,
+      }))
+      .sort((a, b) => {
+        if (viewMode === 'request') {
+          return b.requests - a.requests;
+        }
+        return b.tokens - a.tokens;
+      });
+
+    // 取 Top 10
+    return sorted.slice(0, 10);
+  }, [data, viewMode]);
+
+  // 计算总数
+  const total = useMemo(() => {
+    return distributionData.reduce((sum, item) => {
+      return sum + (viewMode === 'request' ? item.requests : item.tokens);
+    }, 0);
+  }, [distributionData, viewMode]);
+
+  // 图表数据
+  const chartData = useMemo(() => {
+    return {
+      labels: distributionData.map((item) => item.name),
+      datasets: [
+        {
+          data: distributionData.map((item) =>
+            viewMode === 'request' ? item.requests : item.tokens
+          ),
+          backgroundColor: COLORS.slice(0, distributionData.length),
+          borderColor: isDark ? '#1f2937' : '#ffffff',
+          borderWidth: 2,
+        },
+      ],
+    };
+  }, [distributionData, viewMode, isDark]);
+
+  // 图表配置
+  const chartOptions = useMemo(() => ({
+    responsive: true,
+    maintainAspectRatio: false,
+    cutout: '65%',
+    plugins: {
+      legend: {
+        display: false,
+      },
+      tooltip: {
+        backgroundColor: isDark ? '#374151' : '#ffffff',
+        titleColor: isDark ? '#f3f4f6' : '#111827',
+        bodyColor: isDark ? '#d1d5db' : '#4b5563',
+        borderColor: isDark ? '#4b5563' : '#e5e7eb',
+        borderWidth: 1,
+        padding: 12,
+        callbacks: {
+          label: (context: any) => {
+            const value = context.raw;
+            const percentage = total > 0 ? ((value / total) * 100).toFixed(1) : 0;
+            if (viewMode === 'request') {
+              return `${value.toLocaleString()} ${t('monitor.requests')} (${percentage}%)`;
+            }
+            return `${value.toLocaleString()} tokens (${percentage}%)`;
+          },
+        },
+      },
+    },
+  }), [isDark, total, viewMode, t]);
+
+  // 格式化数值
+  const formatValue = (value: number) => {
+    if (value >= 1000000) {
+      return (value / 1000000).toFixed(1) + 'M';
+    }
+    if (value >= 1000) {
+      return (value / 1000).toFixed(1) + 'K';
+    }
+    return value.toString();
+  };
+
+  return (
+    <div className={styles.chartCard}>
+      <div className={styles.chartHeader}>
+        <div>
+          <h3 className={styles.chartTitle}>{t('monitor.distribution.title')}</h3>
+          <p className={styles.chartSubtitle}>
+            {timeRangeLabel} · {viewMode === 'request' ? t('monitor.distribution.by_requests') : t('monitor.distribution.by_tokens')}
+            {' · Top 10'}
+          </p>
+        </div>
+        <div className={styles.chartControls}>
+          <button
+            className={`${styles.chartControlBtn} ${viewMode === 'request' ? styles.active : ''}`}
+            onClick={() => setViewMode('request')}
+          >
+            {t('monitor.distribution.requests')}
+          </button>
+          <button
+            className={`${styles.chartControlBtn} ${viewMode === 'token' ? styles.active : ''}`}
+            onClick={() => setViewMode('token')}
+          >
+            {t('monitor.distribution.tokens')}
+          </button>
+        </div>
+      </div>
+
+      {loading || distributionData.length === 0 ? (
+        <div className={styles.chartContent}>
+          <div className={styles.chartEmpty}>
+            {loading ? t('common.loading') : t('monitor.no_data')}
+          </div>
+        </div>
+      ) : (
+        <div className={styles.distributionContent}>
+          <div className={styles.donutWrapper}>
+            <Doughnut data={chartData} options={chartOptions} />
+            <div className={styles.donutCenter}>
+              <div className={styles.donutLabel}>
+                {viewMode === 'request' ? t('monitor.distribution.request_share') : t('monitor.distribution.token_share')}
+              </div>
+            </div>
+          </div>
+          <div className={styles.legendList}>
+            {distributionData.map((item, index) => {
+              const value = viewMode === 'request' ? item.requests : item.tokens;
+              const percentage = total > 0 ? ((value / total) * 100).toFixed(1) : '0';
+              return (
+                <div key={item.name} className={styles.legendItem}>
+                  <span
+                    className={styles.legendDot}
+                    style={{ backgroundColor: COLORS[index] }}
+                  />
+                  <span className={styles.legendName} title={item.name}>
+                    {item.name}
+                  </span>
+                  <span className={styles.legendValue}>
+                    {formatValue(value)} ({percentage}%)
+                  </span>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

src/components/monitor/RequestLogs.tsx

@@ -0,0 +1,672 @@
+import { useMemo, useState, useEffect, useRef, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { Card } from '@/components/ui/Card';
+import { usageApi } from '@/services/api';
+import { useDisableModel } from '@/hooks';
+import { TimeRangeSelector, formatTimeRangeCaption, type TimeRange } from './TimeRangeSelector';
+import { DisableModelModal } from './DisableModelModal';
+import { UnsupportedDisableModal } from './UnsupportedDisableModal';
+import {
+  maskSecret,
+  formatProviderDisplay,
+  formatTimestamp,
+  getRateClassName,
+  getProviderDisplayParts,
+  type DateRange,
+} from '@/utils/monitor';
+import type { UsageData } from '@/pages/MonitorPage';
+import styles from '@/pages/MonitorPage.module.scss';
+
+interface RequestLogsProps {
+  data: UsageData | null;
+  loading: boolean;
+  providerMap: Record<string, string>;
+  providerTypeMap: Record<string, string>;
+  apiFilter: string;
+}
+
+interface LogEntry {
+  id: string;
+  timestamp: string;
+  timestampMs: number;
+  apiKey: string;
+  model: string;
+  source: string;
+  displayName: string;
+  providerName: string | null;
+  providerType: string;
+  maskedKey: string;
+  failed: boolean;
+  inputTokens: number;
+  outputTokens: number;
+  totalTokens: number;
+}
+
+interface ChannelModelRequest {
+  failed: boolean;
+  timestamp: number;
+}
+
+// 预计算的统计数据缓存
+interface PrecomputedStats {
+  recentRequests: ChannelModelRequest[];
+  successRate: string;
+  totalCount: number;
+}
+
+// 虚拟滚动行高
+const ROW_HEIGHT = 40;
+
+export function RequestLogs({ data, loading: parentLoading, providerMap, providerTypeMap, apiFilter }: RequestLogsProps) {
+  const { t } = useTranslation();
+  const [filterApi, setFilterApi] = useState('');
+  const [filterModel, setFilterModel] = useState('');
+  const [filterSource, setFilterSource] = useState('');
+  const [filterStatus, setFilterStatus] = useState<'' | 'success' | 'failed'>('');
+  const [filterProviderType, setFilterProviderType] = useState('');
+  const [autoRefresh, setAutoRefresh] = useState(10);
+  const [countdown, setCountdown] = useState(0);
+  const countdownRef = useRef<ReturnType<typeof setInterval> | null>(null);
+  // 用 ref 存储 fetchLogData，避免作为定时器 useEffect 的依赖
+  const fetchLogDataRef = useRef<() => Promise<void>>(() => Promise.resolve());
+
+  // 虚拟滚动容器 ref
+  const tableContainerRef = useRef<HTMLDivElement>(null);
+  // 固定表头容器 ref
+  const headerRef = useRef<HTMLDivElement>(null);
+
+  // 同步表头和内容的水平滚动
+  const handleScroll = useCallback(() => {
+    if (tableContainerRef.current && headerRef.current) {
+      headerRef.current.scrollLeft = tableContainerRef.current.scrollLeft;
+    }
+  }, []);
+
+  // 时间范围状态
+  const [timeRange, setTimeRange] = useState<TimeRange>(7);
+  const [customRange, setCustomRange] = useState<DateRange | undefined>();
+
+  // 日志独立数据状态
+  const [logData, setLogData] = useState<UsageData | null>(null);
+  const [logLoading, setLogLoading] = useState(false);
+  const [isFirstLoad, setIsFirstLoad] = useState(true);
+
+  // 使用禁用模型 Hook
+  const {
+    disableState,
+    unsupportedState,
+    disabling,
+    isModelDisabled,
+    handleDisableClick,
+    handleConfirmDisable,
+    handleCancelDisable,
+    handleCloseUnsupported,
+  } = useDisableModel({ providerMap, providerTypeMap });
+
+  // 处理时间范围变化
+  const handleTimeRangeChange = useCallback((range: TimeRange, custom?: DateRange) => {
+    setTimeRange(range);
+    if (custom) {
+      setCustomRange(custom);
+    }
+  }, []);
+
+  // 使用日志独立数据或父组件数据
+  const effectiveData = logData || data;
+  // 只在首次加载且没有数据时显示 loading 状态
+  const showLoading = (parentLoading && isFirstLoad && !effectiveData) || (logLoading && !effectiveData);
+
+  // 当父组件数据加载完成时，标记首次加载完成
+  useEffect(() => {
+    if (!parentLoading && data) {
+      setIsFirstLoad(false);
+    }
+  }, [parentLoading, data]);
+
+  // 独立获取日志数据
+  const fetchLogData = useCallback(async () => {
+    setLogLoading(true);
+    try {
+      const response = await usageApi.getUsage();
+      const usageData = response?.usage ?? response;
+
+      // 应用时间范围过滤
+      if (usageData?.apis) {
+        const apis = usageData.apis as UsageData['apis'];
+        const now = new Date();
+        let cutoffStart: Date;
+        let cutoffEnd: Date = new Date(now.getTime());
+        cutoffEnd.setHours(23, 59, 59, 999);
+
+        if (timeRange === 'custom' && customRange) {
+          cutoffStart = customRange.start;
+          cutoffEnd = customRange.end;
+        } else if (typeof timeRange === 'number') {
+          cutoffStart = new Date(now.getTime() - timeRange * 24 * 60 * 60 * 1000);
+          cutoffStart.setHours(0, 0, 0, 0);
+        } else {
+          cutoffStart = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000);
+          cutoffStart.setHours(0, 0, 0, 0);
+        }
+
+        const filtered: UsageData = { apis: {} };
+
+        Object.entries(apis).forEach(([apiKey, apiData]) => {
+          // 如果有 API 过滤器，检查是否匹配
+          if (apiFilter && !apiKey.toLowerCase().includes(apiFilter.toLowerCase())) {
+            return;
+          }
+
+          if (!apiData?.models) return;
+
+          const filteredModels: Record<string, { details: UsageData['apis'][string]['models'][string]['details'] }> = {};
+
+          Object.entries(apiData.models).forEach(([modelName, modelData]) => {
+            if (!modelData?.details || !Array.isArray(modelData.details)) return;
+
+            const filteredDetails = modelData.details.filter((detail) => {
+              const timestamp = new Date(detail.timestamp);
+              return timestamp >= cutoffStart && timestamp <= cutoffEnd;
+            });
+
+            if (filteredDetails.length > 0) {
+              filteredModels[modelName] = { details: filteredDetails };
+            }
+          });
+
+          if (Object.keys(filteredModels).length > 0) {
+            filtered.apis[apiKey] = { models: filteredModels };
+          }
+        });
+
+        setLogData(filtered);
+      }
+    } catch (err) {
+      console.error('日志刷新失败：', err);
+    } finally {
+      setLogLoading(false);
+    }
+  }, [timeRange, customRange, apiFilter]);
+
+  // 同步 fetchLogData 到 ref，确保定时器始终调用最新版本
+  useEffect(() => {
+    fetchLogDataRef.current = fetchLogData;
+  }, [fetchLogData]);
+
+  // 统一的自动刷新定时器管理
+  useEffect(() => {
+    // 清理旧定时器
+    if (countdownRef.current) {
+      clearInterval(countdownRef.current);
+      countdownRef.current = null;
+    }
+
+    // 禁用自动刷新时
+    if (autoRefresh <= 0) {
+      setCountdown(0);
+      return;
+    }
+
+    // 设置初始倒计时
+    setCountdown(autoRefresh);
+
+    // 创建新定时器
+    countdownRef.current = setInterval(() => {
+      setCountdown((prev) => {
+        if (prev <= 1) {
+          // 倒计时结束，触发刷新并重置倒计时
+          fetchLogDataRef.current();
+          return autoRefresh;
+        }
+        return prev - 1;
+      });
+    }, 1000);
+
+    // 组件卸载或 autoRefresh 变化时清理
+    return () => {
+      if (countdownRef.current) {
+        clearInterval(countdownRef.current);
+        countdownRef.current = null;
+      }
+    };
+  }, [autoRefresh]);
+
+  // 时间范围变化时立即刷新数据
+  useEffect(() => {
+    fetchLogData();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [timeRange, customRange]);
+
+  // 获取倒计时显示文本
+  const getCountdownText = () => {
+    if (logLoading) {
+      return t('monitor.logs.refreshing');
+    }
+    if (autoRefresh === 0) {
+      return t('monitor.logs.manual_refresh');
+    }
+    if (countdown > 0) {
+      return t('monitor.logs.refresh_in_seconds', { seconds: countdown });
+    }
+    return t('monitor.logs.refreshing');
+  };
+
+  // 将数据转换为日志条目
+  const logEntries = useMemo(() => {
+    if (!effectiveData?.apis) return [];
+
+    const entries: LogEntry[] = [];
+    let idCounter = 0;
+
+    Object.entries(effectiveData.apis).forEach(([apiKey, apiData]) => {
+      Object.entries(apiData.models).forEach(([modelName, modelData]) => {
+        modelData.details.forEach((detail) => {
+          const source = detail.source || 'unknown';
+          const { provider, masked } = getProviderDisplayParts(source, providerMap);
+          const displayName = provider ? `${provider} (${masked})` : masked;
+          const timestampMs = detail.timestamp ? new Date(detail.timestamp).getTime() : 0;
+          // 获取提供商类型
+          const providerType = providerTypeMap[source] || '--';
+          entries.push({
+            id: `${idCounter++}`,
+            timestamp: detail.timestamp,
+            timestampMs,
+            apiKey,
+            model: modelName,
+            source,
+            displayName,
+            providerName: provider,
+            providerType,
+            maskedKey: masked,
+            failed: detail.failed,
+            inputTokens: detail.tokens.input_tokens || 0,
+            outputTokens: detail.tokens.output_tokens || 0,
+            totalTokens: detail.tokens.total_tokens || 0,
+          });
+        });
+      });
+    });
+
+    // 按时间倒序排序
+    return entries.sort((a, b) => b.timestampMs - a.timestampMs);
+  }, [effectiveData, providerMap, providerTypeMap]);
+
+  // 预计算所有条目的统计数据（一次性计算，避免渲染时重复计算）
+  const precomputedStats = useMemo(() => {
+    const statsMap = new Map<string, PrecomputedStats>();
+
+    // 首先按渠道+模型分组，并按时间排序
+    const channelModelGroups: Record<string, { entry: LogEntry; index: number }[]> = {};
+
+    logEntries.forEach((entry, index) => {
+      const key = `${entry.source}|||${entry.model}`;
+      if (!channelModelGroups[key]) {
+        channelModelGroups[key] = [];
+      }
+      channelModelGroups[key].push({ entry, index });
+    });
+
+    // 对每个分组按时间正序排序（用于计算累计统计）
+    Object.values(channelModelGroups).forEach((group) => {
+      group.sort((a, b) => a.entry.timestampMs - b.entry.timestampMs);
+    });
+
+    // 计算每个条目的统计数据
+    Object.entries(channelModelGroups).forEach(([, group]) => {
+      let successCount = 0;
+      let totalCount = 0;
+      const recentRequests: ChannelModelRequest[] = [];
+
+      group.forEach(({ entry }) => {
+        totalCount++;
+        if (!entry.failed) {
+          successCount++;
+        }
+
+        // 维护最近 10 次请求
+        recentRequests.push({ failed: entry.failed, timestamp: entry.timestampMs });
+        if (recentRequests.length > 10) {
+          recentRequests.shift();
+        }
+
+        // 计算成功率
+        const successRate = totalCount > 0 ? ((successCount / totalCount) * 100).toFixed(1) : '0.0';
+
+        // 存储该条目的统计数据
+        statsMap.set(entry.id, {
+          recentRequests: [...recentRequests],
+          successRate,
+          totalCount,
+        });
+      });
+    });
+
+    return statsMap;
+  }, [logEntries]);
+
+  // 获取筛选选项
+  const { apis, models, sources, providerTypes } = useMemo(() => {
+    const apiSet = new Set<string>();
+    const modelSet = new Set<string>();
+    const sourceSet = new Set<string>();
+    const providerTypeSet = new Set<string>();
+
+    logEntries.forEach((entry) => {
+      apiSet.add(entry.apiKey);
+      modelSet.add(entry.model);
+      sourceSet.add(entry.source);
+      if (entry.providerType && entry.providerType !== '--') {
+        providerTypeSet.add(entry.providerType);
+      }
+    });
+
+    return {
+      apis: Array.from(apiSet).sort(),
+      models: Array.from(modelSet).sort(),
+      sources: Array.from(sourceSet).sort(),
+      providerTypes: Array.from(providerTypeSet).sort(),
+    };
+  }, [logEntries]);
+
+  // 过滤后的数据
+  const filteredEntries = useMemo(() => {
+    return logEntries.filter((entry) => {
+      if (filterApi && entry.apiKey !== filterApi) return false;
+      if (filterModel && entry.model !== filterModel) return false;
+      if (filterSource && entry.source !== filterSource) return false;
+      if (filterStatus === 'success' && entry.failed) return false;
+      if (filterStatus === 'failed' && !entry.failed) return false;
+      if (filterProviderType && entry.providerType !== filterProviderType) return false;
+      return true;
+    });
+  }, [logEntries, filterApi, filterModel, filterSource, filterStatus, filterProviderType]);
+
+  // 虚拟滚动配置
+  const rowVirtualizer = useVirtualizer({
+    count: filteredEntries.length,
+    getScrollElement: () => tableContainerRef.current,
+    estimateSize: () => ROW_HEIGHT,
+    overscan: 10, // 预渲染上下各 10 行
+  });
+
+  // 格式化数字
+  const formatNumber = (num: number) => {
+    return num.toLocaleString('zh-CN');
+  };
+
+  // 获取预计算的统计数据
+  const getStats = (entry: LogEntry): PrecomputedStats => {
+    return precomputedStats.get(entry.id) || {
+      recentRequests: [],
+      successRate: '0.0',
+      totalCount: 0,
+    };
+  };
+
+  // 渲染单行
+  const renderRow = (entry: LogEntry) => {
+    const stats = getStats(entry);
+    const rateValue = parseFloat(stats.successRate);
+    const disabled = isModelDisabled(entry.source, entry.model);
+
+    return (
+      <>
+        <td title={entry.apiKey}>
+          {maskSecret(entry.apiKey)}
+        </td>
+        <td>{entry.providerType}</td>
+        <td title={entry.model}>
+          {entry.model}
+        </td>
+        <td title={entry.source}>
+          {entry.providerName ? (
+            <>
+              <span className={styles.channelName}>{entry.providerName}</span>
+              <span className={styles.channelSecret}> ({entry.maskedKey})</span>
+            </>
+          ) : (
+            entry.maskedKey
+          )}
+        </td>
+        <td>
+          <span className={`${styles.statusPill} ${entry.failed ? styles.failed : styles.success}`}>
+            {entry.failed ? t('monitor.logs.failed') : t('monitor.logs.success')}
+          </span>
+        </td>
+        <td>
+          <div className={styles.statusBars}>
+            {stats.recentRequests.map((req, idx) => (
+              <div
+                key={idx}
+                className={`${styles.statusBar} ${req.failed ? styles.failure : styles.success}`}
+              />
+            ))}
+          </div>
+        </td>
+        <td className={getRateClassName(rateValue, styles)}>
+          {stats.successRate}%
+        </td>
+        <td>{formatNumber(stats.totalCount)}</td>
+        <td>{formatNumber(entry.inputTokens)}</td>
+        <td>{formatNumber(entry.outputTokens)}</td>
+        <td>{formatNumber(entry.totalTokens)}</td>
+        <td>{formatTimestamp(entry.timestamp)}</td>
+        <td>
+          {entry.source && entry.source !== '-' && entry.source !== 'unknown' ? (
+            disabled ? (
+              <span className={styles.disabledLabel}>
+                {t('monitor.logs.disabled')}
+              </span>
+            ) : (
+              <button
+                className={styles.disableBtn}
+                title={t('monitor.logs.disable_model')}
+                onClick={() => handleDisableClick(entry.source, entry.model)}
+              >
+                {t('monitor.logs.disable')}
+              </button>
+            )
+          ) : (
+            '-'
+          )}
+        </td>
+      </>
+    );
+  };
+
+  return (
+    <>
+      <Card
+        title={t('monitor.logs.title')}
+        subtitle={
+          <span>
+            {formatTimeRangeCaption(timeRange, customRange, t)} · {t('monitor.logs.total_count', { count: logEntries.length })}
+            <span style={{ color: 'var(--text-tertiary)' }}> · {t('monitor.logs.scroll_hint')}</span>
+          </span>
+        }
+        extra={
+          <TimeRangeSelector
+            value={timeRange}
+            onChange={handleTimeRangeChange}
+            customRange={customRange}
+          />
+        }
+      >
+        {/* 筛选器 */}
+        <div className={styles.logFilters}>
+          <select
+            className={styles.logSelect}
+            value={filterApi}
+            onChange={(e) => setFilterApi(e.target.value)}
+          >
+            <option value="">{t('monitor.logs.all_apis')}</option>
+            {apis.map((api) => (
+              <option key={api} value={api}>
+                {maskSecret(api)}
+              </option>
+            ))}
+          </select>
+          <select
+            className={styles.logSelect}
+            value={filterProviderType}
+            onChange={(e) => setFilterProviderType(e.target.value)}
+          >
+            <option value="">{t('monitor.logs.all_provider_types')}</option>
+            {providerTypes.map((type) => (
+              <option key={type} value={type}>{type}</option>
+            ))}
+          </select>
+          <select
+            className={styles.logSelect}
+            value={filterModel}
+            onChange={(e) => setFilterModel(e.target.value)}
+          >
+            <option value="">{t('monitor.logs.all_models')}</option>
+            {models.map((model) => (
+              <option key={model} value={model}>{model}</option>
+            ))}
+          </select>
+          <select
+            className={styles.logSelect}
+            value={filterSource}
+            onChange={(e) => setFilterSource(e.target.value)}
+          >
+            <option value="">{t('monitor.logs.all_sources')}</option>
+            {sources.map((source) => (
+              <option key={source} value={source}>
+                {formatProviderDisplay(source, providerMap)}
+              </option>
+            ))}
+          </select>
+          <select
+            className={styles.logSelect}
+            value={filterStatus}
+            onChange={(e) => setFilterStatus(e.target.value as '' | 'success' | 'failed')}
+          >
+            <option value="">{t('monitor.logs.all_status')}</option>
+            <option value="success">{t('monitor.logs.success')}</option>
+            <option value="failed">{t('monitor.logs.failed')}</option>
+          </select>
+
+          <span className={styles.logLastUpdate}>
+            {getCountdownText()}
+          </span>
+
+          <select
+            className={styles.logSelect}
+            value={autoRefresh}
+            onChange={(e) => setAutoRefresh(Number(e.target.value))}
+          >
+            <option value="0">{t('monitor.logs.manual_refresh')}</option>
+            <option value="5">{t('monitor.logs.refresh_5s')}</option>
+            <option value="10">{t('monitor.logs.refresh_10s')}</option>
+            <option value="15">{t('monitor.logs.refresh_15s')}</option>
+            <option value="30">{t('monitor.logs.refresh_30s')}</option>
+            <option value="60">{t('monitor.logs.refresh_60s')}</option>
+          </select>
+        </div>
+
+        {/* 虚拟滚动表格 */}
+        <div className={styles.tableWrapper}>
+          {showLoading ? (
+            <div className={styles.emptyState}>{t('common.loading')}</div>
+          ) : filteredEntries.length === 0 ? (
+            <div className={styles.emptyState}>{t('monitor.no_data')}</div>
+          ) : (
+            <>
+              {/* 固定表头 */}
+              <div ref={headerRef} className={styles.stickyHeader}>
+                <table className={`${styles.table} ${styles.virtualTable}`}>
+                  <thead>
+                    <tr>
+                      <th>{t('monitor.logs.header_api')}</th>
+                      <th>{t('monitor.logs.header_request_type')}</th>
+                      <th>{t('monitor.logs.header_model')}</th>
+                      <th>{t('monitor.logs.header_source')}</th>
+                      <th>{t('monitor.logs.header_status')}</th>
+                      <th>{t('monitor.logs.header_recent')}</th>
+                      <th>{t('monitor.logs.header_rate')}</th>
+                      <th>{t('monitor.logs.header_count')}</th>
+                      <th>{t('monitor.logs.header_input')}</th>
+                      <th>{t('monitor.logs.header_output')}</th>
+                      <th>{t('monitor.logs.header_total')}</th>
+                      <th>{t('monitor.logs.header_time')}</th>
+                      <th>{t('monitor.logs.header_actions')}</th>
+                    </tr>
+                  </thead>
+                </table>
+              </div>
+
+              {/* 虚拟滚动容器 */}
+              <div
+                ref={tableContainerRef}
+                className={styles.virtualScrollContainer}
+                style={{
+                  height: 'calc(100vh - 420px)',
+                  minHeight: '360px',
+                  overflow: 'auto',
+                }}
+                onScroll={handleScroll}
+              >
+                <div
+                  style={{
+                    height: `${rowVirtualizer.getTotalSize()}px`,
+                    width: '100%',
+                    position: 'relative',
+                  }}
+                >
+                  <table className={`${styles.table} ${styles.virtualTable}`}>
+                    <tbody>
+                      {rowVirtualizer.getVirtualItems().map((virtualRow) => {
+                        const entry = filteredEntries[virtualRow.index];
+                        return (
+                          <tr
+                            key={entry.id}
+                            style={{
+                              position: 'absolute',
+                              top: 0,
+                              left: 0,
+                              width: '100%',
+                              height: `${virtualRow.size}px`,
+                              transform: `translateY(${virtualRow.start}px)`,
+                              display: 'table',
+                              tableLayout: 'fixed',
+                            }}
+                          >
+                            {renderRow(entry)}
+                          </tr>
+                        );
+                      })}
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+            </>
+          )}
+        </div>
+
+        {/* 统计信息 */}
+        {filteredEntries.length > 0 && (
+          <div style={{ textAlign: 'center', fontSize: 12, color: 'var(--text-tertiary)', marginTop: 8 }}>
+            {t('monitor.logs.total_count', { count: filteredEntries.length })}
+          </div>
+        )}
+      </Card>
+
+      {/* 禁用确认弹窗 */}
+      <DisableModelModal
+        disableState={disableState}
+        disabling={disabling}
+        onConfirm={handleConfirmDisable}
+        onCancel={handleCancelDisable}
+      />
+
+      {/* 不支持自动禁用提示弹窗 */}
+      <UnsupportedDisableModal
+        state={unsupportedState}
+        onClose={handleCloseUnsupported}
+      />
+    </>
+  );
+}

src/components/monitor/TimeRangeSelector.tsx

@@ -0,0 +1,158 @@
+import { useState, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import styles from '@/pages/MonitorPage.module.scss';
+
+export type TimeRange = 1 | 7 | 14 | 30 | 'custom';
+
+interface DateRange {
+  start: Date;
+  end: Date;
+}
+
+interface TimeRangeSelectorProps {
+  value: TimeRange;
+  onChange: (range: TimeRange, customRange?: DateRange) => void;
+  customRange?: DateRange;
+}
+
+export function TimeRangeSelector({ value, onChange, customRange }: TimeRangeSelectorProps) {
+  const { t } = useTranslation();
+  const [showCustom, setShowCustom] = useState(value === 'custom');
+  const [startDate, setStartDate] = useState(() => {
+    if (customRange?.start) {
+      return formatDateForInput(customRange.start);
+    }
+    const date = new Date();
+    date.setDate(date.getDate() - 7);
+    return formatDateForInput(date);
+  });
+  const [endDate, setEndDate] = useState(() => {
+    if (customRange?.end) {
+      return formatDateForInput(customRange.end);
+    }
+    return formatDateForInput(new Date());
+  });
+
+  const handleTimeClick = useCallback((range: TimeRange) => {
+    if (range === 'custom') {
+      setShowCustom(true);
+      onChange(range);
+    } else {
+      setShowCustom(false);
+      onChange(range);
+    }
+  }, [onChange]);
+
+  const handleApplyCustom = useCallback(() => {
+    if (startDate && endDate) {
+      const start = new Date(startDate);
+      start.setHours(0, 0, 0, 0);
+      const end = new Date(endDate);
+      end.setHours(23, 59, 59, 999);
+
+      if (start <= end) {
+        onChange('custom', { start, end });
+      }
+    }
+  }, [startDate, endDate, onChange]);
+
+  return (
+    <div className={styles.timeRangeSelector}>
+      <div className={styles.timeButtons}>
+        {([1, 7, 14, 30, 'custom'] as TimeRange[]).map((range) => (
+          <button
+            key={range}
+            className={`${styles.timeButton} ${value === range ? styles.active : ''}`}
+            onClick={() => handleTimeClick(range)}
+          >
+            {range === 1
+              ? t('monitor.time.today')
+              : range === 'custom'
+              ? t('monitor.time.custom')
+              : t('monitor.time.last_n_days', { n: range })}
+          </button>
+        ))}
+      </div>
+      {showCustom && (
+        <div className={styles.customDatePicker}>
+          <input
+            type="date"
+            className={styles.dateInput}
+            value={startDate}
+            onChange={(e) => setStartDate(e.target.value)}
+          />
+          <span className={styles.dateSeparator}>{t('monitor.time.to')}</span>
+          <input
+            type="date"
+            className={styles.dateInput}
+            value={endDate}
+            onChange={(e) => setEndDate(e.target.value)}
+          />
+          <button className={styles.dateApplyBtn} onClick={handleApplyCustom}>
+            {t('monitor.time.apply')}
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function formatDateForInput(date: Date): string {
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const day = String(date.getDate()).padStart(2, '0');
+  return `${year}-${month}-${day}`;
+}
+
+// 根据时间范围过滤数据的工具函数
+export function filterByTimeRange<T extends { timestamp?: string }>(
+  items: T[],
+  range: TimeRange,
+  customRange?: DateRange
+): T[] {
+  const now = new Date();
+  let cutoffStart: Date;
+  let cutoffEnd: Date = new Date(now.getTime());
+  cutoffEnd.setHours(23, 59, 59, 999);
+
+  if (range === 'custom' && customRange) {
+    cutoffStart = customRange.start;
+    cutoffEnd = customRange.end;
+  } else if (typeof range === 'number') {
+    cutoffStart = new Date(now.getTime() - range * 24 * 60 * 60 * 1000);
+    cutoffStart.setHours(0, 0, 0, 0);
+  } else {
+    // 默认7天
+    cutoffStart = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000);
+    cutoffStart.setHours(0, 0, 0, 0);
+  }
+
+  return items.filter((item) => {
+    if (!item.timestamp) return false;
+    const timestamp = new Date(item.timestamp);
+    return timestamp >= cutoffStart && timestamp <= cutoffEnd;
+  });
+}
+
+// 格式化时间范围显示
+export function formatTimeRangeCaption(
+  range: TimeRange,
+  customRange?: DateRange,
+  t?: (key: string, options?: any) => string
+): string {
+  if (range === 'custom' && customRange) {
+    const startStr = formatDateForDisplay(customRange.start);
+    const endStr = formatDateForDisplay(customRange.end);
+    return `${startStr} - ${endStr}`;
+  }
+  if (range === 1) {
+    return t ? t('monitor.time.today') : '今天';
+  }
+  return t ? t('monitor.time.last_n_days', { n: range }) : `最近 ${range} 天`;
+}
+
+function formatDateForDisplay(date: Date): string {
+  const month = date.getMonth() + 1;
+  const day = date.getDate();
+  return `${month}/${day}`;
+}

src/components/monitor/UnsupportedDisableModal.tsx

@@ -0,0 +1,82 @@
+/**
+ * 不支持自动禁用提示弹窗组件
+ * 显示手动操作指南
+ */
+
+import { useTranslation } from 'react-i18next';
+import { Modal } from '@/components/ui/Modal';
+import { Button } from '@/components/ui/Button';
+import type { UnsupportedDisableState } from '@/hooks/useDisableModel';
+
+interface UnsupportedDisableModalProps {
+  /** 不支持禁用的状态 */
+  state: UnsupportedDisableState | null;
+  /** 关闭回调 */
+  onClose: () => void;
+}
+
+export function UnsupportedDisableModal({
+  state,
+  onClose,
+}: UnsupportedDisableModalProps) {
+  const { t } = useTranslation();
+
+  if (!state) return null;
+
+  return (
+    <Modal
+      open={!!state}
+      onClose={onClose}
+      title={t('monitor.logs.disable_unsupported_title')}
+      width={450}
+    >
+      <div style={{ padding: '16px 0' }}>
+        {/* 提示信息 */}
+        <p style={{
+          marginBottom: 16,
+          lineHeight: 1.6,
+          color: 'var(--warning-color, #f59e0b)',
+          fontWeight: 500,
+        }}>
+          ⚠️ {t('monitor.logs.disable_unsupported_desc', { providerType: state.providerType })}
+        </p>
+
+        {/* 手动操作指南 */}
+        <div style={{
+          padding: '12px 16px',
+          background: 'var(--bg-tertiary)',
+          borderRadius: '8px',
+          marginBottom: 16,
+        }}>
+          <p style={{
+            fontWeight: 600,
+            marginBottom: 8,
+            color: 'var(--text-primary)',
+          }}>
+            {t('monitor.logs.disable_unsupported_guide_title')}
+          </p>
+          <ul style={{
+            margin: 0,
+            padding: 0,
+            listStyle: 'none',
+            fontSize: 13,
+            lineHeight: 1.8,
+            color: 'var(--text-secondary)',
+          }}>
+            <li>{t('monitor.logs.disable_unsupported_guide_step1')}</li>
+            <li>{t('monitor.logs.disable_unsupported_guide_step2', { providerType: state.providerType })}</li>
+            <li>{t('monitor.logs.disable_unsupported_guide_step3', { model: state.model })}</li>
+            <li>{t('monitor.logs.disable_unsupported_guide_step4')}</li>
+          </ul>
+        </div>
+
+        {/* 关闭按钮 */}
+        <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
+          <Button variant="primary" onClick={onClose}>
+            {t('monitor.logs.disable_unsupported_close')}
+          </Button>
+        </div>
+      </div>
+    </Modal>
+  );
+}

src/components/monitor/index.ts

@@ -0,0 +1,8 @@
+export { KpiCards } from './KpiCards';
+export { ModelDistributionChart } from './ModelDistributionChart';
+export { DailyTrendChart } from './DailyTrendChart';
+export { HourlyModelChart } from './HourlyModelChart';
+export { HourlyTokenChart } from './HourlyTokenChart';
+export { ChannelStats } from './ChannelStats';
+export { FailureAnalysis } from './FailureAnalysis';
+export { RequestLogs } from './RequestLogs';

src/components/providers/AmpcodeSection/AmpcodeModal.tsx

@@ -0,0 +1,264 @@
+import { useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button } from '@/components/ui/Button';
+import { Input } from '@/components/ui/Input';
+import { Modal } from '@/components/ui/Modal';
+import { ModelInputList } from '@/components/ui/ModelInputList';
+import { ToggleSwitch } from '@/components/ui/ToggleSwitch';
+import { useConfigStore, useNotificationStore } from '@/stores';
+import { ampcodeApi } from '@/services/api';
+import type { AmpcodeConfig } from '@/types';
+import { maskApiKey } from '@/utils/format';
+import { buildAmpcodeFormState, entriesToAmpcodeMappings } from '../utils';
+import type { AmpcodeFormState } from '../types';
+
+interface AmpcodeModalProps {
+  isOpen: boolean;
+  disableControls: boolean;
+  onClose: () => void;
+  onBusyChange?: (busy: boolean) => void;
+}
+
+export function AmpcodeModal({ isOpen, disableControls, onClose, onBusyChange }: AmpcodeModalProps) {
+  const { t } = useTranslation();
+  const { showNotification } = useNotificationStore();
+  const config = useConfigStore((state) => state.config);
+  const updateConfigValue = useConfigStore((state) => state.updateConfigValue);
+  const clearCache = useConfigStore((state) => state.clearCache);
+
+  const [form, setForm] = useState<AmpcodeFormState>(() => buildAmpcodeFormState(null));
+  const [loading, setLoading] = useState(false);
+  const [loaded, setLoaded] = useState(false);
+  const [mappingsDirty, setMappingsDirty] = useState(false);
+  const [error, setError] = useState('');
+  const [saving, setSaving] = useState(false);
+  const initializedRef = useRef(false);
+
+  const getErrorMessage = (err: unknown) => {
+    if (err instanceof Error) return err.message;
+    if (typeof err === 'string') return err;
+    return '';
+  };
+
+  useEffect(() => {
+    onBusyChange?.(loading || saving);
+  }, [loading, saving, onBusyChange]);
+
+  useEffect(() => {
+    if (!isOpen) {
+      initializedRef.current = false;
+      setLoading(false);
+      setSaving(false);
+      setError('');
+      setLoaded(false);
+      setMappingsDirty(false);
+      setForm(buildAmpcodeFormState(null));
+      onBusyChange?.(false);
+      return;
+    }
+    if (initializedRef.current) return;
+    initializedRef.current = true;
+
+    setLoading(true);
+    setLoaded(false);
+    setMappingsDirty(false);
+    setError('');
+    setForm(buildAmpcodeFormState(config?.ampcode ?? null));
+
+    void (async () => {
+      try {
+        const ampcode = await ampcodeApi.getAmpcode();
+        setLoaded(true);
+        updateConfigValue('ampcode', ampcode);
+        clearCache('ampcode');
+        setForm(buildAmpcodeFormState(ampcode));
+      } catch (err: unknown) {
+        setError(getErrorMessage(err) || t('notification.refresh_failed'));
+      } finally {
+        setLoading(false);
+      }
+    })();
+  }, [clearCache, config?.ampcode, isOpen, onBusyChange, t, updateConfigValue]);
+
+  const clearAmpcodeUpstreamApiKey = async () => {
+    if (!window.confirm(t('ai_providers.ampcode_clear_upstream_api_key_confirm'))) return;
+    setSaving(true);
+    setError('');
+    try {
+      await ampcodeApi.clearUpstreamApiKey();
+      const previous = config?.ampcode ?? {};
+      const next: AmpcodeConfig = { ...previous };
+      delete next.upstreamApiKey;
+      updateConfigValue('ampcode', next);
+      clearCache('ampcode');
+      showNotification(t('notification.ampcode_upstream_api_key_cleared'), 'success');
+    } catch (err: unknown) {
+      const message = getErrorMessage(err);
+      setError(message);
+      showNotification(`${t('notification.update_failed')}: ${message}`, 'error');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const saveAmpcode = async () => {
+    if (!loaded && mappingsDirty) {
+      const confirmed = window.confirm(t('ai_providers.ampcode_mappings_overwrite_confirm'));
+      if (!confirmed) return;
+    }
+
+    setSaving(true);
+    setError('');
+    try {
+      const upstreamUrl = form.upstreamUrl.trim();
+      const overrideKey = form.upstreamApiKey.trim();
+      const modelMappings = entriesToAmpcodeMappings(form.mappingEntries);
+
+      if (upstreamUrl) {
+        await ampcodeApi.updateUpstreamUrl(upstreamUrl);
+      } else {
+        await ampcodeApi.clearUpstreamUrl();
+      }
+
+      await ampcodeApi.updateForceModelMappings(form.forceModelMappings);
+
+      if (loaded || mappingsDirty) {
+        if (modelMappings.length) {
+          await ampcodeApi.saveModelMappings(modelMappings);
+        } else {
+          await ampcodeApi.clearModelMappings();
+        }
+      }
+
+      if (overrideKey) {
+        await ampcodeApi.updateUpstreamApiKey(overrideKey);
+      }
+
+      const previous = config?.ampcode ?? {};
+      const next: AmpcodeConfig = {
+        upstreamUrl: upstreamUrl || undefined,
+        forceModelMappings: form.forceModelMappings,
+      };
+
+      if (previous.upstreamApiKey) {
+        next.upstreamApiKey = previous.upstreamApiKey;
+      }
+
+      if (Array.isArray(previous.modelMappings)) {
+        next.modelMappings = previous.modelMappings;
+      }
+
+      if (overrideKey) {
+        next.upstreamApiKey = overrideKey;
+      }
+
+      if (loaded || mappingsDirty) {
+        if (modelMappings.length) {
+          next.modelMappings = modelMappings;
+        } else {
+          delete next.modelMappings;
+        }
+      }
+
+      updateConfigValue('ampcode', next);
+      clearCache('ampcode');
+      showNotification(t('notification.ampcode_updated'), 'success');
+      onClose();
+    } catch (err: unknown) {
+      const message = getErrorMessage(err);
+      setError(message);
+      showNotification(`${t('notification.update_failed')}: ${message}`, 'error');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  return (
+    <Modal
+      open={isOpen}
+      onClose={onClose}
+      title={t('ai_providers.ampcode_modal_title')}
+      footer={
+        <>
+          <Button variant="secondary" onClick={onClose} disabled={saving}>
+            {t('common.cancel')}
+          </Button>
+          <Button onClick={saveAmpcode} loading={saving} disabled={disableControls || loading}>
+            {t('common.save')}
+          </Button>
+        </>
+      }
+    >
+      {error && <div className="error-box">{error}</div>}
+      <Input
+        label={t('ai_providers.ampcode_upstream_url_label')}
+        placeholder={t('ai_providers.ampcode_upstream_url_placeholder')}
+        value={form.upstreamUrl}
+        onChange={(e) => setForm((prev) => ({ ...prev, upstreamUrl: e.target.value }))}
+        disabled={loading || saving}
+        hint={t('ai_providers.ampcode_upstream_url_hint')}
+      />
+      <Input
+        label={t('ai_providers.ampcode_upstream_api_key_label')}
+        placeholder={t('ai_providers.ampcode_upstream_api_key_placeholder')}
+        type="password"
+        value={form.upstreamApiKey}
+        onChange={(e) => setForm((prev) => ({ ...prev, upstreamApiKey: e.target.value }))}
+        disabled={loading || saving}
+        hint={t('ai_providers.ampcode_upstream_api_key_hint')}
+      />
+      <div
+        style={{
+          display: 'flex',
+          gap: 8,
+          alignItems: 'center',
+          marginTop: -8,
+          marginBottom: 12,
+          flexWrap: 'wrap',
+        }}
+      >
+        <div className="hint" style={{ margin: 0 }}>
+          {t('ai_providers.ampcode_upstream_api_key_current', {
+            key: config?.ampcode?.upstreamApiKey
+              ? maskApiKey(config.ampcode.upstreamApiKey)
+              : t('common.not_set'),
+          })}
+        </div>
+        <Button
+          variant="danger"
+          size="sm"
+          onClick={clearAmpcodeUpstreamApiKey}
+          disabled={loading || saving || !config?.ampcode?.upstreamApiKey}
+        >
+          {t('ai_providers.ampcode_clear_upstream_api_key')}
+        </Button>
+      </div>
+
+      <div className="form-group">
+        <ToggleSwitch
+          label={t('ai_providers.ampcode_force_model_mappings_label')}
+          checked={form.forceModelMappings}
+          onChange={(value) => setForm((prev) => ({ ...prev, forceModelMappings: value }))}
+          disabled={loading || saving}
+        />
+        <div className="hint">{t('ai_providers.ampcode_force_model_mappings_hint')}</div>
+      </div>
+
+      <div className="form-group">
+        <label>{t('ai_providers.ampcode_model_mappings_label')}</label>
+        <ModelInputList
+          entries={form.mappingEntries}
+          onChange={(entries) => {
+            setMappingsDirty(true);
+            setForm((prev) => ({ ...prev, mappingEntries: entries }));
+          }}
+          addLabel={t('ai_providers.ampcode_model_mappings_add_btn')}
+          namePlaceholder={t('ai_providers.ampcode_model_mappings_from_placeholder')}
+          aliasPlaceholder={t('ai_providers.ampcode_model_mappings_to_placeholder')}
+          disabled={loading || saving}
+        />
+        <div className="hint">{t('ai_providers.ampcode_model_mappings_hint')}</div>
+      </div>
+    </Modal>
+  );
+}

src/components/providers/AmpcodeSection/AmpcodeSection.tsx

@@ -0,0 +1,111 @@
+import { Button } from '@/components/ui/Button';
+import { Card } from '@/components/ui/Card';
+import iconAmp from '@/assets/icons/amp.svg';
+import type { AmpcodeConfig } from '@/types';
+import { maskApiKey } from '@/utils/format';
+import styles from '@/pages/AiProvidersPage.module.scss';
+import { useTranslation } from 'react-i18next';
+import { AmpcodeModal } from './AmpcodeModal';
+
+interface AmpcodeSectionProps {
+  config: AmpcodeConfig | null | undefined;
+  loading: boolean;
+  disableControls: boolean;
+  isSaving: boolean;
+  isSwitching: boolean;
+  isBusy: boolean;
+  isModalOpen: boolean;
+  onOpen: () => void;
+  onCloseModal: () => void;
+  onBusyChange: (busy: boolean) => void;
+}
+
+export function AmpcodeSection({
+  config,
+  loading,
+  disableControls,
+  isSaving,
+  isSwitching,
+  isBusy,
+  isModalOpen,
+  onOpen,
+  onCloseModal,
+  onBusyChange,
+}: AmpcodeSectionProps) {
+  const { t } = useTranslation();
+
+  return (
+    <>
+      <Card
+        title={
+          <span className={styles.cardTitle}>
+            <img src={iconAmp} alt="" className={styles.cardTitleIcon} />
+            {t('ai_providers.ampcode_title')}
+          </span>
+        }
+        extra={
+          <Button
+            size="sm"
+            onClick={onOpen}
+            disabled={disableControls || isSaving || isBusy || isSwitching}
+          >
+            {t('common.edit')}
+          </Button>
+        }
+      >
+        {loading ? (
+          <div className="hint">{t('common.loading')}</div>
+        ) : (
+          <>
+            <div className={styles.fieldRow}>
+              <span className={styles.fieldLabel}>{t('ai_providers.ampcode_upstream_url_label')}:</span>
+              <span className={styles.fieldValue}>{config?.upstreamUrl || t('common.not_set')}</span>
+            </div>
+            <div className={styles.fieldRow}>
+              <span className={styles.fieldLabel}>
+                {t('ai_providers.ampcode_upstream_api_key_label')}:
+              </span>
+              <span className={styles.fieldValue}>
+                {config?.upstreamApiKey ? maskApiKey(config.upstreamApiKey) : t('common.not_set')}
+              </span>
+            </div>
+            <div className={styles.fieldRow}>
+              <span className={styles.fieldLabel}>
+                {t('ai_providers.ampcode_force_model_mappings_label')}:
+              </span>
+              <span className={styles.fieldValue}>
+                {(config?.forceModelMappings ?? false) ? t('common.yes') : t('common.no')}
+              </span>
+            </div>
+            <div className={styles.fieldRow} style={{ marginTop: 8 }}>
+              <span className={styles.fieldLabel}>{t('ai_providers.ampcode_model_mappings_count')}:</span>
+              <span className={styles.fieldValue}>{config?.modelMappings?.length || 0}</span>
+            </div>
+            {config?.modelMappings?.length ? (
+              <div className={styles.modelTagList}>
+                {config.modelMappings.slice(0, 5).map((mapping) => (
+                  <span key={`${mapping.from}→${mapping.to}`} className={styles.modelTag}>
+                    <span className={styles.modelName}>{mapping.from}</span>
+                    <span className={styles.modelAlias}>{mapping.to}</span>
+                  </span>
+                ))}
+                {config.modelMappings.length > 5 && (
+                  <span className={styles.modelTag}>
+                    <span className={styles.modelName}>+{config.modelMappings.length - 5}</span>
+                  </span>
+                )}
+              </div>
+            ) : null}
+          </>
+        )}
+      </Card>
+
+      <AmpcodeModal
+        isOpen={isModalOpen}
+        disableControls={disableControls}
+        onClose={onCloseModal}
+        onBusyChange={onBusyChange}
+      />
+    </>
+  );
+}

src/components/providers/AmpcodeSection/index.ts

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

src/components/providers/ClaudeSection/ClaudeModal.tsx

@@ -0,0 +1,128 @@
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button } from '@/components/ui/Button';
+import { HeaderInputList } from '@/components/ui/HeaderInputList';
+import { Input } from '@/components/ui/Input';
+import { Modal } from '@/components/ui/Modal';
+import { ModelInputList, modelsToEntries } from '@/components/ui/ModelInputList';
+import type { ProviderKeyConfig } from '@/types';
+import { headersToEntries } from '@/utils/headers';
+import { excludedModelsToText } from '../utils';
+import type { ProviderFormState, ProviderModalProps } from '../types';
+
+interface ClaudeModalProps extends ProviderModalProps<ProviderKeyConfig, ProviderFormState> {
+  isSaving: boolean;
+}
+
+const buildEmptyForm = (): ProviderFormState => ({
+  apiKey: '',
+  prefix: '',
+  baseUrl: '',
+  proxyUrl: '',
+  headers: [],
+  models: [],
+  excludedModels: [],
+  modelEntries: [{ name: '', alias: '' }],
+  excludedText: '',
+});
+
+export function ClaudeModal({
+  isOpen,
+  editIndex,
+  initialData,
+  onClose,
+  onSave,
+  isSaving,
+}: ClaudeModalProps) {
+  const { t } = useTranslation();
+  const [form, setForm] = useState<ProviderFormState>(buildEmptyForm);
+
+  useEffect(() => {
+    if (!isOpen) return;
+    if (initialData) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect
+      setForm({
+        ...initialData,
+        headers: headersToEntries(initialData.headers),
+        modelEntries: modelsToEntries(initialData.models),
+        excludedText: excludedModelsToText(initialData.excludedModels),
+      });
+      return;
+    }
+    setForm(buildEmptyForm());
+  }, [initialData, isOpen]);
+
+  return (
+    <Modal
+      open={isOpen}
+      onClose={onClose}
+      title={
+        editIndex !== null
+          ? t('ai_providers.claude_edit_modal_title')
+          : t('ai_providers.claude_add_modal_title')
+      }
+      footer={
+        <>
+          <Button variant="secondary" onClick={onClose} disabled={isSaving}>
+            {t('common.cancel')}
+          </Button>
+          <Button onClick={() => void onSave(form, editIndex)} loading={isSaving}>
+            {t('common.save')}
+          </Button>
+        </>
+      }
+    >
+      <Input
+        label={t('ai_providers.claude_add_modal_key_label')}
+        value={form.apiKey}
+        onChange={(e) => setForm((prev) => ({ ...prev, apiKey: e.target.value }))}
+      />
+      <Input
+        label={t('ai_providers.prefix_label')}
+        placeholder={t('ai_providers.prefix_placeholder')}
+        value={form.prefix ?? ''}
+        onChange={(e) => setForm((prev) => ({ ...prev, prefix: e.target.value }))}
+        hint={t('ai_providers.prefix_hint')}
+      />
+      <Input
+        label={t('ai_providers.claude_add_modal_url_label')}
+        value={form.baseUrl ?? ''}
+        onChange={(e) => setForm((prev) => ({ ...prev, baseUrl: e.target.value }))}
+      />
+      <Input
+        label={t('ai_providers.claude_add_modal_proxy_label')}
+        value={form.proxyUrl ?? ''}
+        onChange={(e) => setForm((prev) => ({ ...prev, proxyUrl: e.target.value }))}
+      />
+      <HeaderInputList
+        entries={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.claude_models_label')}</label>
+        <ModelInputList
+          entries={form.modelEntries}
+          onChange={(entries) => setForm((prev) => ({ ...prev, modelEntries: entries }))}
+          addLabel={t('ai_providers.claude_models_add_btn')}
+          namePlaceholder={t('common.model_name_placeholder')}
+          aliasPlaceholder={t('common.model_alias_placeholder')}
+          disabled={isSaving}
+        />
+      </div>
+      <div className="form-group">
+        <label>{t('ai_providers.excluded_models_label')}</label>
+        <textarea
+          className="input"
+          placeholder={t('ai_providers.excluded_models_placeholder')}
+          value={form.excludedText}
+          onChange={(e) => setForm((prev) => ({ ...prev, excludedText: e.target.value }))}
+          rows={4}
+        />
+        <div className="hint">{t('ai_providers.excluded_models_hint')}</div>
+      </div>
+    </Modal>
+  );
+}

src/components/providers/ClaudeSection/ClaudeSection.tsx

@@ -0,0 +1,202 @@
+import { Fragment, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button } from '@/components/ui/Button';
+import { Card } from '@/components/ui/Card';
+import { ToggleSwitch } from '@/components/ui/ToggleSwitch';
+import iconClaude from '@/assets/icons/claude.svg';
+import type { ProviderKeyConfig } from '@/types';
+import { maskApiKey } from '@/utils/format';
+import { calculateStatusBarData, type KeyStats, type UsageDetail } from '@/utils/usage';
+import styles from '@/pages/AiProvidersPage.module.scss';
+import { ProviderList } from '../ProviderList';
+import { ProviderStatusBar } from '../ProviderStatusBar';
+import { getStatsBySource, hasDisableAllModelsRule } from '../utils';
+import type { ProviderFormState } from '../types';
+import { ClaudeModal } from './ClaudeModal';
+
+interface ClaudeSectionProps {
+  configs: ProviderKeyConfig[];
+  keyStats: KeyStats;
+  usageDetails: UsageDetail[];
+  loading: boolean;
+  disableControls: boolean;
+  isSaving: boolean;
+  isSwitching: boolean;
+  isModalOpen: boolean;
+  modalIndex: number | null;
+  onAdd: () => void;
+  onEdit: (index: number) => void;
+  onDelete: (index: number) => void;
+  onToggle: (index: number, enabled: boolean) => void;
+  onCloseModal: () => void;
+  onSave: (data: ProviderFormState, index: number | null) => Promise<void>;
+}
+
+export function ClaudeSection({
+  configs,
+  keyStats,
+  usageDetails,
+  loading,
+  disableControls,
+  isSaving,
+  isSwitching,
+  isModalOpen,
+  modalIndex,
+  onAdd,
+  onEdit,
+  onDelete,
+  onToggle,
+  onCloseModal,
+  onSave,
+}: ClaudeSectionProps) {
+  const { t } = useTranslation();
+  const actionsDisabled = disableControls || isSaving || isSwitching;
+  const toggleDisabled = disableControls || loading || isSaving || isSwitching;
+
+  const statusBarCache = useMemo(() => {
+    const cache = new Map<string, ReturnType<typeof calculateStatusBarData>>();
+    const allApiKeys = new Set<string>();
+    configs.forEach((config) => config.apiKey && allApiKeys.add(config.apiKey));
+    allApiKeys.forEach((apiKey) => {
+      cache.set(apiKey, calculateStatusBarData(usageDetails, apiKey));
+    });
+    return cache;
+  }, [configs, usageDetails]);
+
+  const initialData = modalIndex !== null ? configs[modalIndex] : undefined;
+
+  return (
+    <>
+      <Card
+        title={
+          <span className={styles.cardTitle}>
+            <img src={iconClaude} alt="" className={styles.cardTitleIcon} />
+            {t('ai_providers.claude_title')}
+          </span>
+        }
+        extra={
+          <Button size="sm" onClick={onAdd} disabled={actionsDisabled}>
+            {t('ai_providers.claude_add_button')}
+          </Button>
+        }
+      >
+        <ProviderList<ProviderKeyConfig>
+          items={configs}
+          loading={loading}
+          keyField={(item) => item.apiKey}
+          emptyTitle={t('ai_providers.claude_empty_title')}
+          emptyDescription={t('ai_providers.claude_empty_desc')}
+          onEdit={onEdit}
+          onDelete={onDelete}
+          actionsDisabled={actionsDisabled}
+          getRowDisabled={(item) => hasDisableAllModelsRule(item.excludedModels)}
+          renderExtraActions={(item, index) => (
+            <ToggleSwitch
+              label={t('ai_providers.config_toggle_label')}
+              checked={!hasDisableAllModelsRule(item.excludedModels)}
+              disabled={toggleDisabled}
+              onChange={(value) => void onToggle(index, value)}
+            />
+          )}
+          renderContent={(item) => {
+            const stats = getStatsBySource(item.apiKey, keyStats, maskApiKey);
+            const headerEntries = Object.entries(item.headers || {});
+            const configDisabled = hasDisableAllModelsRule(item.excludedModels);
+            const excludedModels = item.excludedModels ?? [];
+            const statusData =
+              statusBarCache.get(item.apiKey) || calculateStatusBarData([], item.apiKey);
+
+            return (
+              <Fragment>
+                <div className="item-title">{t('ai_providers.claude_item_title')}</div>
+                <div className={styles.fieldRow}>
+                  <span className={styles.fieldLabel}>{t('common.api_key')}:</span>
+                  <span className={styles.fieldValue}>{maskApiKey(item.apiKey)}</span>
+                </div>
+                {item.prefix && (
+                  <div className={styles.fieldRow}>
+                    <span className={styles.fieldLabel}>{t('common.prefix')}:</span>
+                    <span className={styles.fieldValue}>{item.prefix}</span>
+                  </div>
+                )}
+                {item.baseUrl && (
+                  <div className={styles.fieldRow}>
+                    <span className={styles.fieldLabel}>{t('common.base_url')}:</span>
+                    <span className={styles.fieldValue}>{item.baseUrl}</span>
+                  </div>
+                )}
+                {item.proxyUrl && (
+                  <div className={styles.fieldRow}>
+                    <span className={styles.fieldLabel}>{t('common.proxy_url')}:</span>
+                    <span className={styles.fieldValue}>{item.proxyUrl}</span>
+                  </div>
+                )}
+                {headerEntries.length > 0 && (
+                  <div className={styles.headerBadgeList}>
+                    {headerEntries.map(([key, value]) => (
+                      <span key={key} className={styles.headerBadge}>
+                        <strong>{key}:</strong> {value}
+                      </span>
+                    ))}
+                  </div>
+                )}
+                {configDisabled && (
+                  <div className="status-badge warning" style={{ marginTop: 8, marginBottom: 0 }}>
+                    {t('ai_providers.config_disabled_badge')}
+                  </div>
+                )}
+                {item.models?.length ? (
+                  <div className={styles.modelTagList}>
+                    <span className={styles.modelCountLabel}>
+                      {t('ai_providers.claude_models_count')}: {item.models.length}
+                    </span>
+                    {item.models.map((model) => (
+                      <span key={model.name} className={styles.modelTag}>
+                        <span className={styles.modelName}>{model.name}</span>
+                        {model.alias && model.alias !== model.name && (
+                          <span className={styles.modelAlias}>{model.alias}</span>
+                        )}
+                      </span>
+                    ))}
+                  </div>
+                ) : null}
+                {excludedModels.length ? (
+                  <div className={styles.excludedModelsSection}>
+                    <div className={styles.excludedModelsLabel}>
+                      {t('ai_providers.excluded_models_count', { count: excludedModels.length })}
+                    </div>
+                    <div className={styles.modelTagList}>
+                      {excludedModels.map((model) => (
+                        <span key={model} className={`${styles.modelTag} ${styles.excludedModelTag}`}>
+                          <span className={styles.modelName}>{model}</span>
+                        </span>
+                      ))}
+                    </div>
+                  </div>
+                ) : null}
+                <div className={styles.cardStats}>
+                  <span className={`${styles.statPill} ${styles.statSuccess}`}>
+                    {t('stats.success')}: {stats.success}
+                  </span>
+                  <span className={`${styles.statPill} ${styles.statFailure}`}>
+                    {t('stats.failure')}: {stats.failure}
+                  </span>
+                </div>
+                <ProviderStatusBar statusData={statusData} />
+              </Fragment>
+            );
+          }}
+        />
+      </Card>
+
+      <ClaudeModal
+        isOpen={isModalOpen}
+        editIndex={modalIndex}
+        initialData={initialData}
+        onClose={onCloseModal}
+        onSave={onSave}
+        isSaving={isSaving}
+      />
+    </>
+  );
+}

src/components/providers/ClaudeSection/index.ts

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

src/components/providers/CodexSection/CodexModal.tsx

@@ -0,0 +1,117 @@
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button } from '@/components/ui/Button';
+import { HeaderInputList } from '@/components/ui/HeaderInputList';
+import { Input } from '@/components/ui/Input';
+import { Modal } from '@/components/ui/Modal';
+import type { ProviderKeyConfig } from '@/types';
+import { headersToEntries } from '@/utils/headers';
+import { modelsToEntries } from '@/components/ui/ModelInputList';
+import { excludedModelsToText } from '../utils';
+import type { ProviderFormState, ProviderModalProps } from '../types';
+
+interface CodexModalProps extends ProviderModalProps<ProviderKeyConfig, ProviderFormState> {
+  isSaving: boolean;
+}
+
+const buildEmptyForm = (): ProviderFormState => ({
+  apiKey: '',
+  prefix: '',
+  baseUrl: '',
+  proxyUrl: '',
+  headers: [],
+  models: [],
+  excludedModels: [],
+  modelEntries: [{ name: '', alias: '' }],
+  excludedText: '',
+});
+
+export function CodexModal({
+  isOpen,
+  editIndex,
+  initialData,
+  onClose,
+  onSave,
+  isSaving,
+}: CodexModalProps) {
+  const { t } = useTranslation();
+  const [form, setForm] = useState<ProviderFormState>(buildEmptyForm);
+
+  useEffect(() => {
+    if (!isOpen) return;
+    if (initialData) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect
+      setForm({
+        ...initialData,
+        headers: headersToEntries(initialData.headers),
+        modelEntries: modelsToEntries(initialData.models),
+        excludedText: excludedModelsToText(initialData.excludedModels),
+      });
+      return;
+    }
+    setForm(buildEmptyForm());
+  }, [initialData, isOpen]);
+
+  return (
+    <Modal
+      open={isOpen}
+      onClose={onClose}
+      title={
+        editIndex !== null
+          ? t('ai_providers.codex_edit_modal_title')
+          : t('ai_providers.codex_add_modal_title')
+      }
+      footer={
+        <>
+          <Button variant="secondary" onClick={onClose} disabled={isSaving}>
+            {t('common.cancel')}
+          </Button>
+          <Button onClick={() => void onSave(form, editIndex)} loading={isSaving}>
+            {t('common.save')}
+          </Button>
+        </>
+      }
+    >
+      <Input
+        label={t('ai_providers.codex_add_modal_key_label')}
+        value={form.apiKey}
+        onChange={(e) => setForm((prev) => ({ ...prev, apiKey: e.target.value }))}
+      />
+      <Input
+        label={t('ai_providers.prefix_label')}
+        placeholder={t('ai_providers.prefix_placeholder')}
+        value={form.prefix ?? ''}
+        onChange={(e) => setForm((prev) => ({ ...prev, prefix: e.target.value }))}
+        hint={t('ai_providers.prefix_hint')}
+      />
+      <Input
+        label={t('ai_providers.codex_add_modal_url_label')}
+        value={form.baseUrl ?? ''}
+        onChange={(e) => setForm((prev) => ({ ...prev, baseUrl: e.target.value }))}
+      />
+      <Input
+        label={t('ai_providers.codex_add_modal_proxy_label')}
+        value={form.proxyUrl ?? ''}
+        onChange={(e) => setForm((prev) => ({ ...prev, proxyUrl: e.target.value }))}
+      />
+      <HeaderInputList
+        entries={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.excluded_models_label')}</label>
+        <textarea
+          className="input"
+          placeholder={t('ai_providers.excluded_models_placeholder')}
+          value={form.excludedText}
+          onChange={(e) => setForm((prev) => ({ ...prev, excludedText: e.target.value }))}
+          rows={4}
+        />
+        <div className="hint">{t('ai_providers.excluded_models_hint')}</div>
+      </div>
+    </Modal>
+  );
+}

src/components/providers/CodexSection/CodexSection.tsx

@@ -0,0 +1,194 @@
+import { Fragment, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button } from '@/components/ui/Button';
+import { Card } from '@/components/ui/Card';
+import { ToggleSwitch } from '@/components/ui/ToggleSwitch';
+import iconOpenaiLight from '@/assets/icons/openai-light.svg';
+import iconOpenaiDark from '@/assets/icons/openai-dark.svg';
+import type { ProviderKeyConfig } from '@/types';
+import { maskApiKey } from '@/utils/format';
+import { calculateStatusBarData, type KeyStats, type UsageDetail } from '@/utils/usage';
+import styles from '@/pages/AiProvidersPage.module.scss';
+import { ProviderList } from '../ProviderList';
+import { ProviderStatusBar } from '../ProviderStatusBar';
+import { getStatsBySource, hasDisableAllModelsRule } from '../utils';
+import type { ProviderFormState } from '../types';
+import { CodexModal } from './CodexModal';
+
+interface CodexSectionProps {
+  configs: ProviderKeyConfig[];
+  keyStats: KeyStats;
+  usageDetails: UsageDetail[];
+  loading: boolean;
+  disableControls: boolean;
+  isSaving: boolean;
+  isSwitching: boolean;
+  resolvedTheme: string;
+  isModalOpen: boolean;
+  modalIndex: number | null;
+  onAdd: () => void;
+  onEdit: (index: number) => void;
+  onDelete: (index: number) => void;
+  onToggle: (index: number, enabled: boolean) => void;
+  onCloseModal: () => void;
+  onSave: (data: ProviderFormState, index: number | null) => Promise<void>;
+}
+
+export function CodexSection({
+  configs,
+  keyStats,
+  usageDetails,
+  loading,
+  disableControls,
+  isSaving,
+  isSwitching,
+  resolvedTheme,
+  isModalOpen,
+  modalIndex,
+  onAdd,
+  onEdit,
+  onDelete,
+  onToggle,
+  onCloseModal,
+  onSave,
+}: CodexSectionProps) {
+  const { t } = useTranslation();
+  const actionsDisabled = disableControls || isSaving || isSwitching;
+  const toggleDisabled = disableControls || loading || isSaving || isSwitching;
+
+  const statusBarCache = useMemo(() => {
+    const cache = new Map<string, ReturnType<typeof calculateStatusBarData>>();
+    const allApiKeys = new Set<string>();
+    configs.forEach((config) => config.apiKey && allApiKeys.add(config.apiKey));
+    allApiKeys.forEach((apiKey) => {
+      cache.set(apiKey, calculateStatusBarData(usageDetails, apiKey));
+    });
+    return cache;
+  }, [configs, usageDetails]);
+
+  const initialData = modalIndex !== null ? configs[modalIndex] : undefined;
+
+  return (
+    <>
+      <Card
+        title={
+          <span className={styles.cardTitle}>
+            <img
+              src={resolvedTheme === 'dark' ? iconOpenaiDark : iconOpenaiLight}
+              alt=""
+              className={styles.cardTitleIcon}
+            />
+            {t('ai_providers.codex_title')}
+          </span>
+        }
+        extra={
+          <Button size="sm" onClick={onAdd} disabled={actionsDisabled}>
+            {t('ai_providers.codex_add_button')}
+          </Button>
+        }
+      >
+        <ProviderList<ProviderKeyConfig>
+          items={configs}
+          loading={loading}
+          keyField={(item) => item.apiKey}
+          emptyTitle={t('ai_providers.codex_empty_title')}
+          emptyDescription={t('ai_providers.codex_empty_desc')}
+          onEdit={onEdit}
+          onDelete={onDelete}
+          actionsDisabled={actionsDisabled}
+          getRowDisabled={(item) => hasDisableAllModelsRule(item.excludedModels)}
+          renderExtraActions={(item, index) => (
+            <ToggleSwitch
+              label={t('ai_providers.config_toggle_label')}
+              checked={!hasDisableAllModelsRule(item.excludedModels)}
+              disabled={toggleDisabled}
+              onChange={(value) => void onToggle(index, value)}
+            />
+          )}
+          renderContent={(item) => {
+            const stats = getStatsBySource(item.apiKey, keyStats, maskApiKey);
+            const headerEntries = Object.entries(item.headers || {});
+            const configDisabled = hasDisableAllModelsRule(item.excludedModels);
+            const excludedModels = item.excludedModels ?? [];
+            const statusData =
+              statusBarCache.get(item.apiKey) || calculateStatusBarData([], item.apiKey);
+
+            return (
+              <Fragment>
+                <div className="item-title">{t('ai_providers.codex_item_title')}</div>
+                <div className={styles.fieldRow}>
+                  <span className={styles.fieldLabel}>{t('common.api_key')}:</span>
+                  <span className={styles.fieldValue}>{maskApiKey(item.apiKey)}</span>
+                </div>
+                {item.prefix && (
+                  <div className={styles.fieldRow}>
+                    <span className={styles.fieldLabel}>{t('common.prefix')}:</span>
+                    <span className={styles.fieldValue}>{item.prefix}</span>
+                  </div>
+                )}
+                {item.baseUrl && (
+                  <div className={styles.fieldRow}>
+                    <span className={styles.fieldLabel}>{t('common.base_url')}:</span>
+                    <span className={styles.fieldValue}>{item.baseUrl}</span>
+                  </div>
+                )}
+                {item.proxyUrl && (
+                  <div className={styles.fieldRow}>
+                    <span className={styles.fieldLabel}>{t('common.proxy_url')}:</span>
+                    <span className={styles.fieldValue}>{item.proxyUrl}</span>
+                  </div>
+                )}
+                {headerEntries.length > 0 && (
+                  <div className={styles.headerBadgeList}>
+                    {headerEntries.map(([key, value]) => (
+                      <span key={key} className={styles.headerBadge}>
+                        <strong>{key}:</strong> {value}
+                      </span>
+                    ))}
+                  </div>
+                )}
+                {configDisabled && (
+                  <div className="status-badge warning" style={{ marginTop: 8, marginBottom: 0 }}>
+                    {t('ai_providers.config_disabled_badge')}
+                  </div>
+                )}
+                {excludedModels.length ? (
+                  <div className={styles.excludedModelsSection}>
+                    <div className={styles.excludedModelsLabel}>
+                      {t('ai_providers.excluded_models_count', { count: excludedModels.length })}
+                    </div>
+                    <div className={styles.modelTagList}>
+                      {excludedModels.map((model) => (
+                        <span key={model} className={`${styles.modelTag} ${styles.excludedModelTag}`}>
+                          <span className={styles.modelName}>{model}</span>
+                        </span>
+                      ))}
+                    </div>
+                  </div>
+                ) : null}
+                <div className={styles.cardStats}>
+                  <span className={`${styles.statPill} ${styles.statSuccess}`}>
+                    {t('stats.success')}: {stats.success}
+                  </span>
+                  <span className={`${styles.statPill} ${styles.statFailure}`}>
+                    {t('stats.failure')}: {stats.failure}
+                  </span>
+                </div>
+                <ProviderStatusBar statusData={statusData} />
+              </Fragment>
+            );
+          }}
+        />
+      </Card>
+
+      <CodexModal
+        isOpen={isModalOpen}
+        editIndex={modalIndex}
+        initialData={initialData}
+        onClose={onCloseModal}
+        onSave={onSave}
+        isSaving={isSaving}
+      />
+    </>
+  );
+}

src/components/providers/CodexSection/index.ts

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

src/components/providers/GeminiSection/GeminiModal.tsx

@@ -0,0 +1,113 @@
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button } from '@/components/ui/Button';
+import { HeaderInputList } from '@/components/ui/HeaderInputList';
+import { Input } from '@/components/ui/Input';
+import { Modal } from '@/components/ui/Modal';
+import type { GeminiKeyConfig } from '@/types';
+import { headersToEntries } from '@/utils/headers';
+import { excludedModelsToText } from '../utils';
+import type { GeminiFormState, ProviderModalProps } from '../types';
+
+interface GeminiModalProps extends ProviderModalProps<GeminiKeyConfig, GeminiFormState> {
+  isSaving: boolean;
+}
+
+const buildEmptyForm = (): GeminiFormState => ({
+  apiKey: '',
+  prefix: '',
+  baseUrl: '',
+  headers: [],
+  excludedModels: [],
+  excludedText: '',
+});
+
+export function GeminiModal({
+  isOpen,
+  editIndex,
+  initialData,
+  onClose,
+  onSave,
+  isSaving,
+}: GeminiModalProps) {
+  const { t } = useTranslation();
+  const [form, setForm] = useState<GeminiFormState>(buildEmptyForm);
+
+  useEffect(() => {
+    if (!isOpen) return;
+    if (initialData) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect
+      setForm({
+        ...initialData,
+        headers: headersToEntries(initialData.headers),
+        excludedText: excludedModelsToText(initialData.excludedModels),
+      });
+      return;
+    }
+    setForm(buildEmptyForm());
+  }, [initialData, isOpen]);
+
+  const handleSave = () => {
+    void onSave(form, editIndex);
+  };
+
+  return (
+    <Modal
+      open={isOpen}
+      onClose={onClose}
+      title={
+        editIndex !== null
+          ? t('ai_providers.gemini_edit_modal_title')
+          : t('ai_providers.gemini_add_modal_title')
+      }
+      footer={
+        <>
+          <Button variant="secondary" onClick={onClose} disabled={isSaving}>
+            {t('common.cancel')}
+          </Button>
+          <Button onClick={handleSave} loading={isSaving}>
+            {t('common.save')}
+          </Button>
+        </>
+      }
+    >
+      <Input
+        label={t('ai_providers.gemini_add_modal_key_label')}
+        placeholder={t('ai_providers.gemini_add_modal_key_placeholder')}
+        value={form.apiKey}
+        onChange={(e) => setForm((prev) => ({ ...prev, apiKey: e.target.value }))}
+      />
+      <Input
+        label={t('ai_providers.prefix_label')}
+        placeholder={t('ai_providers.prefix_placeholder')}
+        value={form.prefix ?? ''}
+        onChange={(e) => setForm((prev) => ({ ...prev, prefix: e.target.value }))}
+        hint={t('ai_providers.prefix_hint')}
+      />
+      <Input
+        label={t('ai_providers.gemini_base_url_label')}
+        placeholder={t('ai_providers.gemini_base_url_placeholder')}
+        value={form.baseUrl ?? ''}
+        onChange={(e) => setForm((prev) => ({ ...prev, baseUrl: e.target.value }))}
+      />
+      <HeaderInputList
+        entries={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.excluded_models_label')}</label>
+        <textarea
+          className="input"
+          placeholder={t('ai_providers.excluded_models_placeholder')}
+          value={form.excludedText}
+          onChange={(e) => setForm((prev) => ({ ...prev, excludedText: e.target.value }))}
+          rows={4}
+        />
+        <div className="hint">{t('ai_providers.excluded_models_hint')}</div>
+      </div>
+    </Modal>
+  );
+}

src/components/providers/GeminiSection/GeminiSection.tsx

@@ -0,0 +1,183 @@
+import { Fragment, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button } from '@/components/ui/Button';
+import { Card } from '@/components/ui/Card';
+import { ToggleSwitch } from '@/components/ui/ToggleSwitch';
+import iconGemini from '@/assets/icons/gemini.svg';
+import type { GeminiKeyConfig } from '@/types';
+import { maskApiKey } from '@/utils/format';
+import { calculateStatusBarData, type KeyStats, type UsageDetail } from '@/utils/usage';
+import styles from '@/pages/AiProvidersPage.module.scss';
+import type { GeminiFormState } from '../types';
+import { ProviderList } from '../ProviderList';
+import { ProviderStatusBar } from '../ProviderStatusBar';
+import { getStatsBySource, hasDisableAllModelsRule } from '../utils';
+import { GeminiModal } from './GeminiModal';
+
+interface GeminiSectionProps {
+  configs: GeminiKeyConfig[];
+  keyStats: KeyStats;
+  usageDetails: UsageDetail[];
+  loading: boolean;
+  disableControls: boolean;
+  isSaving: boolean;
+  isSwitching: boolean;
+  isModalOpen: boolean;
+  modalIndex: number | null;
+  onAdd: () => void;
+  onEdit: (index: number) => void;
+  onDelete: (index: number) => void;
+  onToggle: (index: number, enabled: boolean) => void;
+  onCloseModal: () => void;
+  onSave: (data: GeminiFormState, index: number | null) => Promise<void>;
+}
+
+export function GeminiSection({
+  configs,
+  keyStats,
+  usageDetails,
+  loading,
+  disableControls,
+  isSaving,
+  isSwitching,
+  isModalOpen,
+  modalIndex,
+  onAdd,
+  onEdit,
+  onDelete,
+  onToggle,
+  onCloseModal,
+  onSave,
+}: GeminiSectionProps) {
+  const { t } = useTranslation();
+  const actionsDisabled = disableControls || isSaving || isSwitching;
+  const toggleDisabled = disableControls || loading || isSaving || isSwitching;
+
+  const statusBarCache = useMemo(() => {
+    const cache = new Map<string, ReturnType<typeof calculateStatusBarData>>();
+    const allApiKeys = new Set<string>();
+    configs.forEach((config) => config.apiKey && allApiKeys.add(config.apiKey));
+    allApiKeys.forEach((apiKey) => {
+      cache.set(apiKey, calculateStatusBarData(usageDetails, apiKey));
+    });
+    return cache;
+  }, [configs, usageDetails]);
+
+  const initialData = modalIndex !== null ? configs[modalIndex] : undefined;
+
+  return (
+    <>
+      <Card
+        title={
+          <span className={styles.cardTitle}>
+            <img src={iconGemini} alt="" className={styles.cardTitleIcon} />
+            {t('ai_providers.gemini_title')}
+          </span>
+        }
+        extra={
+          <Button size="sm" onClick={onAdd} disabled={actionsDisabled}>
+            {t('ai_providers.gemini_add_button')}
+          </Button>
+        }
+      >
+        <ProviderList<GeminiKeyConfig>
+          items={configs}
+          loading={loading}
+          keyField={(item) => item.apiKey}
+          emptyTitle={t('ai_providers.gemini_empty_title')}
+          emptyDescription={t('ai_providers.gemini_empty_desc')}
+          onEdit={onEdit}
+          onDelete={onDelete}
+          actionsDisabled={actionsDisabled}
+          getRowDisabled={(item) => hasDisableAllModelsRule(item.excludedModels)}
+          renderExtraActions={(item, index) => (
+            <ToggleSwitch
+              label={t('ai_providers.config_toggle_label')}
+              checked={!hasDisableAllModelsRule(item.excludedModels)}
+              disabled={toggleDisabled}
+              onChange={(value) => void onToggle(index, value)}
+            />
+          )}
+          renderContent={(item, index) => {
+            const stats = getStatsBySource(item.apiKey, keyStats, maskApiKey);
+            const headerEntries = Object.entries(item.headers || {});
+            const configDisabled = hasDisableAllModelsRule(item.excludedModels);
+            const excludedModels = item.excludedModels ?? [];
+            const statusData =
+              statusBarCache.get(item.apiKey) || calculateStatusBarData([], item.apiKey);
+
+            return (
+              <Fragment>
+                <div className="item-title">
+                  {t('ai_providers.gemini_item_title')} #{index + 1}
+                </div>
+                <div className={styles.fieldRow}>
+                  <span className={styles.fieldLabel}>{t('common.api_key')}:</span>
+                  <span className={styles.fieldValue}>{maskApiKey(item.apiKey)}</span>
+                </div>
+                {item.prefix && (
+                  <div className={styles.fieldRow}>
+                    <span className={styles.fieldLabel}>{t('common.prefix')}:</span>
+                    <span className={styles.fieldValue}>{item.prefix}</span>
+                  </div>
+                )}
+                {item.baseUrl && (
+                  <div className={styles.fieldRow}>
+                    <span className={styles.fieldLabel}>{t('common.base_url')}:</span>
+                    <span className={styles.fieldValue}>{item.baseUrl}</span>
+                  </div>
+                )}
+                {headerEntries.length > 0 && (
+                  <div className={styles.headerBadgeList}>
+                    {headerEntries.map(([key, value]) => (
+                      <span key={key} className={styles.headerBadge}>
+                        <strong>{key}:</strong> {value}
+                      </span>
+                    ))}
+                  </div>
+                )}
+                {configDisabled && (
+                  <div className="status-badge warning" style={{ marginTop: 8, marginBottom: 0 }}>
+                    {t('ai_providers.config_disabled_badge')}
+                  </div>
+                )}
+                {excludedModels.length ? (
+                  <div className={styles.excludedModelsSection}>
+                    <div className={styles.excludedModelsLabel}>
+                      {t('ai_providers.excluded_models_count', { count: excludedModels.length })}
+                    </div>
+                    <div className={styles.modelTagList}>
+                      {excludedModels.map((model) => (
+                        <span key={model} className={`${styles.modelTag} ${styles.excludedModelTag}`}>
+                          <span className={styles.modelName}>{model}</span>
+                        </span>
+                      ))}
+                    </div>
+                  </div>
+                ) : null}
+                <div className={styles.cardStats}>
+                  <span className={`${styles.statPill} ${styles.statSuccess}`}>
+                    {t('stats.success')}: {stats.success}
+                  </span>
+                  <span className={`${styles.statPill} ${styles.statFailure}`}>
+                    {t('stats.failure')}: {stats.failure}
+                  </span>
+                </div>
+                <ProviderStatusBar statusData={statusData} />
+              </Fragment>
+            );
+          }}
+        />
+      </Card>
+
+      <GeminiModal
+        isOpen={isModalOpen}
+        editIndex={modalIndex}
+        initialData={initialData}
+        onClose={onCloseModal}
+        onSave={onSave}
+        isSaving={isSaving}
+      />
+    </>
+  );
+}

src/components/providers/GeminiSection/index.ts

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

src/components/providers/OpenAISection/OpenAIDiscoveryModal.tsx

@@ -0,0 +1,194 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button } from '@/components/ui/Button';
+import { Input } from '@/components/ui/Input';
+import { Modal } from '@/components/ui/Modal';
+import { modelsApi } from '@/services/api';
+import type { ApiKeyEntry } from '@/types';
+import type { ModelInfo } from '@/utils/models';
+import { buildHeaderObject, type HeaderEntry } from '@/utils/headers';
+import { buildOpenAIModelsEndpoint } from '../utils';
+import styles from '@/pages/AiProvidersPage.module.scss';
+
+interface OpenAIDiscoveryModalProps {
+  isOpen: boolean;
+  baseUrl: string;
+  headers: HeaderEntry[];
+  apiKeyEntries: ApiKeyEntry[];
+  onClose: () => void;
+  onApply: (selected: ModelInfo[]) => void;
+}
+
+export function OpenAIDiscoveryModal({
+  isOpen,
+  baseUrl,
+  headers,
+  apiKeyEntries,
+  onClose,
+  onApply,
+}: OpenAIDiscoveryModalProps) {
+  const { t } = useTranslation();
+  const [endpoint, setEndpoint] = useState('');
+  const [models, setModels] = useState<ModelInfo[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+  const [search, setSearch] = useState('');
+  const [selected, setSelected] = useState<Set<string>>(new Set());
+
+  const getErrorMessage = (err: unknown) => {
+    if (err instanceof Error) return err.message;
+    if (typeof err === 'string') return err;
+    return '';
+  };
+
+  const filteredModels = useMemo(() => {
+    const filter = search.trim().toLowerCase();
+    if (!filter) return models;
+    return models.filter((model) => {
+      const name = (model.name || '').toLowerCase();
+      const alias = (model.alias || '').toLowerCase();
+      const desc = (model.description || '').toLowerCase();
+      return name.includes(filter) || alias.includes(filter) || desc.includes(filter);
+    });
+  }, [models, search]);
+
+  const fetchOpenaiModelDiscovery = useCallback(
+    async ({ allowFallback = true }: { allowFallback?: boolean } = {}) => {
+      const trimmedBaseUrl = baseUrl.trim();
+      if (!trimmedBaseUrl) return;
+
+      setLoading(true);
+      setError('');
+      try {
+        const headerObject = buildHeaderObject(headers);
+        const firstKey = apiKeyEntries.find((entry) => entry.apiKey?.trim())?.apiKey?.trim();
+        const hasAuthHeader = Boolean(headerObject.Authorization || headerObject['authorization']);
+        const list = await modelsApi.fetchModelsViaApiCall(
+          trimmedBaseUrl,
+          hasAuthHeader ? undefined : firstKey,
+          headerObject
+        );
+        setModels(list);
+      } catch (err: unknown) {
+        if (allowFallback) {
+          try {
+            const list = await modelsApi.fetchModelsViaApiCall(trimmedBaseUrl);
+            setModels(list);
+            return;
+          } catch (fallbackErr: unknown) {
+            const message = getErrorMessage(fallbackErr) || getErrorMessage(err);
+            setModels([]);
+            setError(`${t('ai_providers.openai_models_fetch_error')}: ${message}`);
+          }
+        } else {
+          setModels([]);
+          setError(`${t('ai_providers.openai_models_fetch_error')}: ${getErrorMessage(err)}`);
+        }
+      } finally {
+        setLoading(false);
+      }
+    },
+    [apiKeyEntries, baseUrl, headers, t]
+  );
+
+  useEffect(() => {
+    if (!isOpen) return;
+    setEndpoint(buildOpenAIModelsEndpoint(baseUrl));
+    setModels([]);
+    setSearch('');
+    setSelected(new Set());
+    setError('');
+    void fetchOpenaiModelDiscovery();
+  }, [baseUrl, fetchOpenaiModelDiscovery, isOpen]);
+
+  const toggleSelection = (name: string) => {
+    setSelected((prev) => {
+      const next = new Set(prev);
+      if (next.has(name)) {
+        next.delete(name);
+      } else {
+        next.add(name);
+      }
+      return next;
+    });
+  };
+
+  const handleApply = () => {
+    const selectedModels = models.filter((model) => selected.has(model.name));
+    onApply(selectedModels);
+  };
+
+  return (
+    <Modal
+      open={isOpen}
+      onClose={onClose}
+      title={t('ai_providers.openai_models_fetch_title')}
+      width={720}
+      footer={
+        <>
+          <Button variant="secondary" onClick={onClose} disabled={loading}>
+            {t('ai_providers.openai_models_fetch_back')}
+          </Button>
+          <Button onClick={handleApply} disabled={loading}>
+            {t('ai_providers.openai_models_fetch_apply')}
+          </Button>
+        </>
+      }
+    >
+      <div className="hint" style={{ marginBottom: 8 }}>
+        {t('ai_providers.openai_models_fetch_hint')}
+      </div>
+      <div className="form-group">
+        <label>{t('ai_providers.openai_models_fetch_url_label')}</label>
+        <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
+          <input className="input" readOnly value={endpoint} />
+          <Button
+            variant="secondary"
+            size="sm"
+            onClick={() => void fetchOpenaiModelDiscovery({ allowFallback: true })}
+            loading={loading}
+          >
+            {t('ai_providers.openai_models_fetch_refresh')}
+          </Button>
+        </div>
+      </div>
+      <Input
+        label={t('ai_providers.openai_models_search_label')}
+        placeholder={t('ai_providers.openai_models_search_placeholder')}
+        value={search}
+        onChange={(e) => setSearch(e.target.value)}
+      />
+      {error && <div className="error-box">{error}</div>}
+      {loading ? (
+        <div className="hint">{t('ai_providers.openai_models_fetch_loading')}</div>
+      ) : models.length === 0 ? (
+        <div className="hint">{t('ai_providers.openai_models_fetch_empty')}</div>
+      ) : filteredModels.length === 0 ? (
+        <div className="hint">{t('ai_providers.openai_models_search_empty')}</div>
+      ) : (
+        <div className={styles.modelDiscoveryList}>
+          {filteredModels.map((model) => {
+            const checked = selected.has(model.name);
+            return (
+              <label
+                key={model.name}
+                className={`${styles.modelDiscoveryRow} ${checked ? styles.modelDiscoveryRowSelected : ''}`}
+              >
+                <input type="checkbox" checked={checked} onChange={() => toggleSelection(model.name)} />
+                <div className={styles.modelDiscoveryMeta}>
+                  <div className={styles.modelDiscoveryName}>
+                    {model.name}
+                    {model.alias && <span className={styles.modelDiscoveryAlias}>{model.alias}</span>}
+                  </div>
+                  {model.description && (
+                    <div className={styles.modelDiscoveryDesc}>{model.description}</div>
+                  )}
+                </div>
+              </label>
+            );
+          })}
+        </div>
+      )}
+    </Modal>
+  );
+}

src/components/providers/OpenAISection/OpenAIModal.tsx

@@ -0,0 +1,432 @@
+import { useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button } from '@/components/ui/Button';
+import { HeaderInputList } from '@/components/ui/HeaderInputList';
+import { Input } from '@/components/ui/Input';
+import { Modal } from '@/components/ui/Modal';
+import { ModelInputList, modelsToEntries } from '@/components/ui/ModelInputList';
+import { useNotificationStore } from '@/stores';
+import { apiCallApi, getApiCallErrorMessage } from '@/services/api';
+import type { OpenAIProviderConfig, ApiKeyEntry } from '@/types';
+import { buildHeaderObject, headersToEntries } from '@/utils/headers';
+import type { ModelInfo } from '@/utils/models';
+import styles from '@/pages/AiProvidersPage.module.scss';
+import { buildApiKeyEntry, buildOpenAIChatCompletionsEndpoint } from '../utils';
+import type { ModelEntry, OpenAIFormState, ProviderModalProps } from '../types';
+import { OpenAIDiscoveryModal } from './OpenAIDiscoveryModal';
+
+const OPENAI_TEST_TIMEOUT_MS = 30_000;
+
+interface OpenAIModalProps extends ProviderModalProps<OpenAIProviderConfig, OpenAIFormState> {
+  isSaving: boolean;
+}
+
+const buildEmptyForm = (): OpenAIFormState => ({
+  name: '',
+  prefix: '',
+  baseUrl: '',
+  headers: [],
+  apiKeyEntries: [buildApiKeyEntry()],
+  modelEntries: [{ name: '', alias: '' }],
+  testModel: undefined,
+});
+
+export function OpenAIModal({
+  isOpen,
+  editIndex,
+  initialData,
+  onClose,
+  onSave,
+  isSaving,
+}: OpenAIModalProps) {
+  const { t } = useTranslation();
+  const { showNotification } = useNotificationStore();
+  const [form, setForm] = useState<OpenAIFormState>(buildEmptyForm);
+  const [discoveryOpen, setDiscoveryOpen] = useState(false);
+  const [testModel, setTestModel] = useState('');
+  const [testStatus, setTestStatus] = useState<'idle' | 'loading' | 'success' | 'error'>('idle');
+  const [testMessage, setTestMessage] = useState('');
+
+  const getErrorMessage = (err: unknown) => {
+    if (err instanceof Error) return err.message;
+    if (typeof err === 'string') return err;
+    return '';
+  };
+
+  const availableModels = useMemo(
+    () => form.modelEntries.map((entry) => entry.name.trim()).filter(Boolean),
+    [form.modelEntries]
+  );
+
+  useEffect(() => {
+    if (!isOpen) {
+      setDiscoveryOpen(false);
+      return;
+    }
+
+    if (initialData) {
+      const modelEntries = modelsToEntries(initialData.models);
+      setForm({
+        name: initialData.name,
+        prefix: initialData.prefix ?? '',
+        baseUrl: initialData.baseUrl,
+        headers: headersToEntries(initialData.headers),
+        testModel: initialData.testModel,
+        modelEntries,
+        apiKeyEntries: initialData.apiKeyEntries?.length
+          ? initialData.apiKeyEntries
+          : [buildApiKeyEntry()],
+      });
+      const available = modelEntries.map((entry) => entry.name.trim()).filter(Boolean);
+      const initialModel =
+        initialData.testModel && available.includes(initialData.testModel)
+          ? initialData.testModel
+          : available[0] || '';
+      setTestModel(initialModel);
+    } else {
+      setForm(buildEmptyForm());
+      setTestModel('');
+    }
+
+    setTestStatus('idle');
+    setTestMessage('');
+    setDiscoveryOpen(false);
+  }, [initialData, isOpen]);
+
+  useEffect(() => {
+    if (!isOpen) return;
+    if (availableModels.length === 0) {
+      if (testModel) {
+        setTestModel('');
+        setTestStatus('idle');
+        setTestMessage('');
+      }
+      return;
+    }
+
+    if (!testModel || !availableModels.includes(testModel)) {
+      setTestModel(availableModels[0]);
+      setTestStatus('idle');
+      setTestMessage('');
+    }
+  }, [availableModels, isOpen, testModel]);
+
+  const renderKeyEntries = (entries: ApiKeyEntry[]) => {
+    const list = entries.length ? entries : [buildApiKeyEntry()];
+    const updateEntry = (idx: number, field: keyof ApiKeyEntry, value: string) => {
+      const next = list.map((entry, i) => (i === idx ? { ...entry, [field]: value } : entry));
+      setForm((prev) => ({ ...prev, apiKeyEntries: next }));
+    };
+
+    const removeEntry = (idx: number) => {
+      const next = list.filter((_, i) => i !== idx);
+      setForm((prev) => ({
+        ...prev,
+        apiKeyEntries: next.length ? next : [buildApiKeyEntry()],
+      }));
+    };
+
+    const addEntry = () => {
+      setForm((prev) => ({ ...prev, apiKeyEntries: [...list, buildApiKeyEntry()] }));
+    };
+
+    return (
+      <div className="stack">
+        {list.map((entry, index) => (
+          <div key={index} className="item-row">
+            <div className="item-meta">
+              <Input
+                label={`${t('common.api_key')} #${index + 1}`}
+                value={entry.apiKey}
+                onChange={(e) => updateEntry(index, 'apiKey', e.target.value)}
+              />
+              <Input
+                label={t('common.proxy_url')}
+                value={entry.proxyUrl ?? ''}
+                onChange={(e) => updateEntry(index, 'proxyUrl', e.target.value)}
+              />
+            </div>
+            <div className="item-actions">
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => removeEntry(index)}
+                disabled={list.length <= 1 || isSaving}
+              >
+                {t('common.delete')}
+              </Button>
+            </div>
+          </div>
+        ))}
+        <Button variant="secondary" size="sm" onClick={addEntry} disabled={isSaving}>
+          {t('ai_providers.openai_keys_add_btn')}
+        </Button>
+      </div>
+    );
+  };
+
+  const openOpenaiModelDiscovery = () => {
+    const baseUrl = form.baseUrl.trim();
+    if (!baseUrl) {
+      showNotification(t('ai_providers.openai_models_fetch_invalid_url'), 'error');
+      return;
+    }
+    setDiscoveryOpen(true);
+  };
+
+  const applyOpenaiModelDiscoverySelection = (selectedModels: ModelInfo[]) => {
+    if (!selectedModels.length) {
+      setDiscoveryOpen(false);
+      return;
+    }
+
+    const mergedMap = new Map<string, ModelEntry>();
+    form.modelEntries.forEach((entry) => {
+      const name = entry.name.trim();
+      if (!name) return;
+      mergedMap.set(name, { name, alias: entry.alias?.trim() || '' });
+    });
+
+    let addedCount = 0;
+    selectedModels.forEach((model) => {
+      const name = model.name.trim();
+      if (!name || mergedMap.has(name)) return;
+      mergedMap.set(name, { name, alias: model.alias ?? '' });
+      addedCount += 1;
+    });
+
+    const mergedEntries = Array.from(mergedMap.values());
+    setForm((prev) => ({
+      ...prev,
+      modelEntries: mergedEntries.length ? mergedEntries : [{ name: '', alias: '' }],
+    }));
+
+    setDiscoveryOpen(false);
+    if (addedCount > 0) {
+      showNotification(t('ai_providers.openai_models_fetch_added', { count: addedCount }), 'success');
+    }
+  };
+
+  const testOpenaiProviderConnection = async () => {
+    const baseUrl = form.baseUrl.trim();
+    if (!baseUrl) {
+      const message = t('notification.openai_test_url_required');
+      setTestStatus('error');
+      setTestMessage(message);
+      showNotification(message, 'error');
+      return;
+    }
+
+    const endpoint = buildOpenAIChatCompletionsEndpoint(baseUrl);
+    if (!endpoint) {
+      const message = t('notification.openai_test_url_required');
+      setTestStatus('error');
+      setTestMessage(message);
+      showNotification(message, 'error');
+      return;
+    }
+
+    const firstKeyEntry = form.apiKeyEntries.find((entry) => entry.apiKey?.trim());
+    if (!firstKeyEntry) {
+      const message = t('notification.openai_test_key_required');
+      setTestStatus('error');
+      setTestMessage(message);
+      showNotification(message, 'error');
+      return;
+    }
+
+    const modelName = testModel.trim() || availableModels[0] || '';
+    if (!modelName) {
+      const message = t('notification.openai_test_model_required');
+      setTestStatus('error');
+      setTestMessage(message);
+      showNotification(message, 'error');
+      return;
+    }
+
+    const customHeaders = buildHeaderObject(form.headers);
+    const headers: Record<string, string> = {
+      'Content-Type': 'application/json',
+      ...customHeaders,
+    };
+    if (!headers.Authorization && !headers['authorization']) {
+      headers.Authorization = `Bearer ${firstKeyEntry.apiKey.trim()}`;
+    }
+
+    setTestStatus('loading');
+    setTestMessage(t('ai_providers.openai_test_running'));
+
+    try {
+      const result = await apiCallApi.request(
+        {
+          method: 'POST',
+          url: endpoint,
+          header: Object.keys(headers).length ? headers : undefined,
+          data: JSON.stringify({
+            model: modelName,
+            messages: [{ role: 'user', content: 'Hi' }],
+            stream: false,
+            max_tokens: 5,
+          }),
+        },
+        { timeout: OPENAI_TEST_TIMEOUT_MS }
+      );
+
+      if (result.statusCode < 200 || result.statusCode >= 300) {
+        throw new Error(getApiCallErrorMessage(result));
+      }
+
+      setTestStatus('success');
+      setTestMessage(t('ai_providers.openai_test_success'));
+    } catch (err: unknown) {
+      setTestStatus('error');
+      const message = getErrorMessage(err);
+      const errorCode =
+        typeof err === 'object' && err !== null && 'code' in err ? String((err as { code?: string }).code) : '';
+      const isTimeout =
+        errorCode === 'ECONNABORTED' || message.toLowerCase().includes('timeout');
+      if (isTimeout) {
+        setTestMessage(t('ai_providers.openai_test_timeout', { seconds: OPENAI_TEST_TIMEOUT_MS / 1000 }));
+      } else {
+        setTestMessage(`${t('ai_providers.openai_test_failed')}: ${message}`);
+      }
+    }
+  };
+
+  return (
+    <>
+      <Modal
+        open={isOpen}
+        onClose={onClose}
+        title={
+          editIndex !== null
+            ? t('ai_providers.openai_edit_modal_title')
+            : t('ai_providers.openai_add_modal_title')
+        }
+        footer={
+          <>
+            <Button variant="secondary" onClick={onClose} disabled={isSaving}>
+              {t('common.cancel')}
+            </Button>
+            <Button onClick={() => void onSave(form, editIndex)} loading={isSaving}>
+              {t('common.save')}
+            </Button>
+          </>
+        }
+      >
+        <Input
+          label={t('ai_providers.openai_add_modal_name_label')}
+          value={form.name}
+          onChange={(e) => setForm((prev) => ({ ...prev, name: e.target.value }))}
+        />
+        <Input
+          label={t('ai_providers.prefix_label')}
+          placeholder={t('ai_providers.prefix_placeholder')}
+          value={form.prefix ?? ''}
+          onChange={(e) => setForm((prev) => ({ ...prev, prefix: e.target.value }))}
+          hint={t('ai_providers.prefix_hint')}
+        />
+        <Input
+          label={t('ai_providers.openai_add_modal_url_label')}
+          value={form.baseUrl}
+          onChange={(e) => setForm((prev) => ({ ...prev, baseUrl: e.target.value }))}
+        />
+
+        <HeaderInputList
+          entries={form.headers}
+          onChange={(entries) => setForm((prev) => ({ ...prev, headers: entries }))}
+          addLabel={t('common.custom_headers_add')}
+          keyPlaceholder={t('common.custom_headers_key_placeholder')}
+          valuePlaceholder={t('common.custom_headers_value_placeholder')}
+        />
+
+        <div className="form-group">
+          <label>
+            {editIndex !== null
+              ? t('ai_providers.openai_edit_modal_models_label')
+              : t('ai_providers.openai_add_modal_models_label')}
+          </label>
+          <div className="hint">{t('ai_providers.openai_models_hint')}</div>
+          <ModelInputList
+            entries={form.modelEntries}
+            onChange={(entries) => setForm((prev) => ({ ...prev, modelEntries: entries }))}
+            addLabel={t('ai_providers.openai_models_add_btn')}
+            namePlaceholder={t('common.model_name_placeholder')}
+            aliasPlaceholder={t('common.model_alias_placeholder')}
+            disabled={isSaving}
+          />
+          <Button variant="secondary" size="sm" onClick={openOpenaiModelDiscovery} disabled={isSaving}>
+            {t('ai_providers.openai_models_fetch_button')}
+          </Button>
+        </div>
+
+        <div className="form-group">
+          <label>{t('ai_providers.openai_test_title')}</label>
+          <div className="hint">{t('ai_providers.openai_test_hint')}</div>
+          <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
+            <select
+              className={`input ${styles.openaiTestSelect}`}
+              value={testModel}
+              onChange={(e) => {
+                setTestModel(e.target.value);
+                setTestStatus('idle');
+                setTestMessage('');
+              }}
+              disabled={isSaving || availableModels.length === 0}
+            >
+              <option value="">
+                {availableModels.length
+                  ? t('ai_providers.openai_test_select_placeholder')
+                  : t('ai_providers.openai_test_select_empty')}
+              </option>
+              {form.modelEntries
+                .filter((entry) => entry.name.trim())
+                .map((entry, idx) => {
+                  const name = entry.name.trim();
+                  const alias = entry.alias.trim();
+                  const label = alias && alias !== name ? `${name} (${alias})` : name;
+                  return (
+                    <option key={`${name}-${idx}`} value={name}>
+                      {label}
+                    </option>
+                  );
+                })}
+            </select>
+            <Button
+              variant={testStatus === 'error' ? 'danger' : 'secondary'}
+              className={`${styles.openaiTestButton} ${testStatus === 'success' ? styles.openaiTestButtonSuccess : ''}`}
+              onClick={testOpenaiProviderConnection}
+              loading={testStatus === 'loading'}
+              disabled={isSaving || availableModels.length === 0}
+            >
+              {t('ai_providers.openai_test_action')}
+            </Button>
+          </div>
+          {testMessage && (
+            <div
+              className={`status-badge ${
+                testStatus === 'error' ? 'error' : testStatus === 'success' ? 'success' : 'muted'
+              }`}
+            >
+              {testMessage}
+            </div>
+          )}
+        </div>
+
+        <div className="form-group">
+          <label>{t('ai_providers.openai_add_modal_keys_label')}</label>
+          {renderKeyEntries(form.apiKeyEntries)}
+        </div>
+      </Modal>
+
+      <OpenAIDiscoveryModal
+        isOpen={discoveryOpen}
+        baseUrl={form.baseUrl}
+        headers={form.headers}
+        apiKeyEntries={form.apiKeyEntries}
+        onClose={() => setDiscoveryOpen(false)}
+        onApply={applyOpenaiModelDiscoverySelection}
+      />
+    </>
+  );
+}

src/components/providers/OpenAISection/OpenAISection.tsx

@@ -0,0 +1,206 @@
+import { Fragment, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button } from '@/components/ui/Button';
+import { Card } from '@/components/ui/Card';
+import { IconCheck, IconX } from '@/components/ui/icons';
+import iconOpenaiLight from '@/assets/icons/openai-light.svg';
+import iconOpenaiDark from '@/assets/icons/openai-dark.svg';
+import type { OpenAIProviderConfig } from '@/types';
+import { maskApiKey } from '@/utils/format';
+import { calculateStatusBarData, type KeyStats, type UsageDetail } from '@/utils/usage';
+import styles from '@/pages/AiProvidersPage.module.scss';
+import { ProviderList } from '../ProviderList';
+import { ProviderStatusBar } from '../ProviderStatusBar';
+import { getOpenAIProviderStats, getStatsBySource } from '../utils';
+import type { OpenAIFormState } from '../types';
+import { OpenAIModal } from './OpenAIModal';
+
+interface OpenAISectionProps {
+  configs: OpenAIProviderConfig[];
+  keyStats: KeyStats;
+  usageDetails: UsageDetail[];
+  loading: boolean;
+  disableControls: boolean;
+  isSaving: boolean;
+  isSwitching: boolean;
+  resolvedTheme: string;
+  isModalOpen: boolean;
+  modalIndex: number | null;
+  onAdd: () => void;
+  onEdit: (index: number) => void;
+  onDelete: (index: number) => void;
+  onCloseModal: () => void;
+  onSave: (data: OpenAIFormState, index: number | null) => Promise<void>;
+}
+
+export function OpenAISection({
+  configs,
+  keyStats,
+  usageDetails,
+  loading,
+  disableControls,
+  isSaving,
+  isSwitching,
+  resolvedTheme,
+  isModalOpen,
+  modalIndex,
+  onAdd,
+  onEdit,
+  onDelete,
+  onCloseModal,
+  onSave,
+}: OpenAISectionProps) {
+  const { t } = useTranslation();
+  const actionsDisabled = disableControls || isSaving || isSwitching;
+
+  const statusBarCache = useMemo(() => {
+    const cache = new Map<string, ReturnType<typeof calculateStatusBarData>>();
+
+    configs.forEach((provider) => {
+      const allKeys = (provider.apiKeyEntries || []).map((entry) => entry.apiKey).filter(Boolean);
+      const filteredDetails = usageDetails.filter((detail) => allKeys.includes(detail.source));
+      cache.set(provider.name, calculateStatusBarData(filteredDetails));
+    });
+
+    return cache;
+  }, [configs, usageDetails]);
+
+  const initialData = modalIndex !== null ? configs[modalIndex] : undefined;
+
+  return (
+    <>
+      <Card
+        title={
+          <span className={styles.cardTitle}>
+            <img
+              src={resolvedTheme === 'dark' ? iconOpenaiDark : iconOpenaiLight}
+              alt=""
+              className={styles.cardTitleIcon}
+            />
+            {t('ai_providers.openai_title')}
+          </span>
+        }
+        extra={
+          <Button size="sm" onClick={onAdd} disabled={actionsDisabled}>
+            {t('ai_providers.openai_add_button')}
+          </Button>
+        }
+      >
+        <ProviderList<OpenAIProviderConfig>
+          items={configs}
+          loading={loading}
+          keyField={(item) => item.name}
+          emptyTitle={t('ai_providers.openai_empty_title')}
+          emptyDescription={t('ai_providers.openai_empty_desc')}
+          onEdit={onEdit}
+          onDelete={onDelete}
+          actionsDisabled={actionsDisabled}
+          renderContent={(item) => {
+            const stats = getOpenAIProviderStats(item.apiKeyEntries, keyStats, maskApiKey);
+            const headerEntries = Object.entries(item.headers || {});
+            const apiKeyEntries = item.apiKeyEntries || [];
+            const statusData = statusBarCache.get(item.name) || calculateStatusBarData([]);
+
+            return (
+              <Fragment>
+                <div className="item-title">{item.name}</div>
+                {item.prefix && (
+                  <div className={styles.fieldRow}>
+                    <span className={styles.fieldLabel}>{t('common.prefix')}:</span>
+                    <span className={styles.fieldValue}>{item.prefix}</span>
+                  </div>
+                )}
+                <div className={styles.fieldRow}>
+                  <span className={styles.fieldLabel}>{t('common.base_url')}:</span>
+                  <span className={styles.fieldValue}>{item.baseUrl}</span>
+                </div>
+                {headerEntries.length > 0 && (
+                  <div className={styles.headerBadgeList}>
+                    {headerEntries.map(([key, value]) => (
+                      <span key={key} className={styles.headerBadge}>
+                        <strong>{key}:</strong> {value}
+                      </span>
+                    ))}
+                  </div>
+                )}
+                {apiKeyEntries.length > 0 && (
+                  <div className={styles.apiKeyEntriesSection}>
+                    <div className={styles.apiKeyEntriesLabel}>
+                      {t('ai_providers.openai_keys_count')}: {apiKeyEntries.length}
+                    </div>
+                    <div className={styles.apiKeyEntryList}>
+                      {apiKeyEntries.map((entry, entryIndex) => {
+                        const entryStats = getStatsBySource(entry.apiKey, keyStats, maskApiKey);
+                        return (
+                          <div key={entryIndex} className={styles.apiKeyEntryCard}>
+                            <span className={styles.apiKeyEntryIndex}>{entryIndex + 1}</span>
+                            <span className={styles.apiKeyEntryKey}>{maskApiKey(entry.apiKey)}</span>
+                            {entry.proxyUrl && (
+                              <span className={styles.apiKeyEntryProxy}>{entry.proxyUrl}</span>
+                            )}
+                            <div className={styles.apiKeyEntryStats}>
+                              <span
+                                className={`${styles.apiKeyEntryStat} ${styles.apiKeyEntryStatSuccess}`}
+                              >
+                                <IconCheck size={12} /> {entryStats.success}
+                              </span>
+                              <span
+                                className={`${styles.apiKeyEntryStat} ${styles.apiKeyEntryStatFailure}`}
+                              >
+                                <IconX size={12} /> {entryStats.failure}
+                              </span>
+                            </div>
+                          </div>
+                        );
+                      })}
+                    </div>
+                  </div>
+                )}
+                <div className={styles.fieldRow} style={{ marginTop: '8px' }}>
+                  <span className={styles.fieldLabel}>{t('ai_providers.openai_models_count')}:</span>
+                  <span className={styles.fieldValue}>{item.models?.length || 0}</span>
+                </div>
+                {item.models?.length ? (
+                  <div className={styles.modelTagList}>
+                    {item.models.map((model) => (
+                      <span key={model.name} className={styles.modelTag}>
+                        <span className={styles.modelName}>{model.name}</span>
+                        {model.alias && model.alias !== model.name && (
+                          <span className={styles.modelAlias}>{model.alias}</span>
+                        )}
+                      </span>
+                    ))}
+                  </div>
+                ) : null}
+                {item.testModel && (
+                  <div className={styles.fieldRow}>
+                    <span className={styles.fieldLabel}>Test Model:</span>
+                    <span className={styles.fieldValue}>{item.testModel}</span>
+                  </div>
+                )}
+                <div className={styles.cardStats}>
+                  <span className={`${styles.statPill} ${styles.statSuccess}`}>
+                    {t('stats.success')}: {stats.success}
+                  </span>
+                  <span className={`${styles.statPill} ${styles.statFailure}`}>
+                    {t('stats.failure')}: {stats.failure}
+                  </span>
+                </div>
+                <ProviderStatusBar statusData={statusData} />
+              </Fragment>
+            );
+          }}
+        />
+      </Card>
+
+      <OpenAIModal
+        isOpen={isModalOpen}
+        editIndex={modalIndex}
+        initialData={initialData}
+        onClose={onCloseModal}
+        onSave={onSave}
+        isSaving={isSaving}
+      />
+    </>
+  );
+}

src/components/providers/OpenAISection/index.ts

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

src/components/providers/ProviderList.tsx

@@ -0,0 +1,80 @@
+import type { ReactNode } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button } from '@/components/ui/Button';
+import { EmptyState } from '@/components/ui/EmptyState';
+
+interface ProviderListProps<T> {
+  items: T[];
+  loading: boolean;
+  keyField: (item: T) => string;
+  renderContent: (item: T, index: number) => ReactNode;
+  onEdit: (index: number) => void;
+  onDelete: (index: number) => void;
+  emptyTitle: string;
+  emptyDescription: string;
+  deleteLabel?: string;
+  actionsDisabled?: boolean;
+  getRowDisabled?: (item: T, index: number) => boolean;
+  renderExtraActions?: (item: T, index: number) => ReactNode;
+}
+
+export function ProviderList<T>({
+  items,
+  loading,
+  keyField,
+  renderContent,
+  onEdit,
+  onDelete,
+  emptyTitle,
+  emptyDescription,
+  deleteLabel,
+  actionsDisabled = false,
+  getRowDisabled,
+  renderExtraActions,
+}: ProviderListProps<T>) {
+  const { t } = useTranslation();
+
+  if (loading) {
+    return <div className="hint">{t('common.loading')}</div>;
+  }
+
+  if (!items.length) {
+    return <EmptyState title={emptyTitle} description={emptyDescription} />;
+  }
+
+  return (
+    <div className="item-list">
+      {items.map((item, index) => {
+        const rowDisabled = getRowDisabled ? getRowDisabled(item, index) : false;
+        return (
+          <div
+            key={keyField(item)}
+            className="item-row"
+            style={rowDisabled ? { opacity: 0.6 } : undefined}
+          >
+            <div className="item-meta">{renderContent(item, index)}</div>
+            <div className="item-actions">
+              <Button
+                variant="secondary"
+                size="sm"
+                onClick={() => onEdit(index)}
+                disabled={actionsDisabled}
+              >
+                {t('common.edit')}
+              </Button>
+              <Button
+                variant="danger"
+                size="sm"
+                onClick={() => onDelete(index)}
+                disabled={actionsDisabled}
+              >
+                {deleteLabel || t('common.delete')}
+              </Button>
+              {renderExtraActions ? renderExtraActions(item, index) : null}
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

src/components/providers/ProviderStatusBar.tsx

@@ -0,0 +1,38 @@
+import { calculateStatusBarData } from '@/utils/usage';
+import styles from '@/pages/AiProvidersPage.module.scss';
+
+interface ProviderStatusBarProps {
+  statusData: ReturnType<typeof calculateStatusBarData>;
+}
+
+export function ProviderStatusBar({ statusData }: ProviderStatusBarProps) {
+  const hasData = statusData.totalSuccess + statusData.totalFailure > 0;
+  const rateClass = !hasData
+    ? ''
+    : statusData.successRate >= 90
+      ? styles.statusRateHigh
+      : statusData.successRate >= 50
+        ? styles.statusRateMedium
+        : styles.statusRateLow;
+
+  return (
+    <div className={styles.statusBar}>
+      <div className={styles.statusBlocks}>
+        {statusData.blocks.map((state, idx) => {
+          const blockClass =
+            state === 'success'
+              ? styles.statusBlockSuccess
+              : state === 'failure'
+                ? styles.statusBlockFailure
+                : state === 'mixed'
+                  ? styles.statusBlockMixed
+                  : styles.statusBlockIdle;
+          return <div key={idx} className={`${styles.statusBlock} ${blockClass}`} />;
+        })}
+      </div>
+      <span className={`${styles.statusRate} ${rateClass}`}>
+        {hasData ? `${statusData.successRate.toFixed(1)}%` : '--'}
+      </span>
+    </div>
+  );
+}

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,170 @@
+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 { 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>>();
+    const allApiKeys = new Set<string>();
+    configs.forEach((config) => config.apiKey && allApiKeys.add(config.apiKey));
+    allApiKeys.forEach((apiKey) => {
+      cache.set(apiKey, calculateStatusBarData(usageDetails, apiKey));
+    });
+    return cache;
+  }, [configs, usageDetails]);
+
+  const initialData = modalIndex !== null ? configs[modalIndex] : undefined;
+
+  return (
+    <>
+      <Card
+        title={
+          <span className={styles.cardTitle}>
+            <img src={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, maskApiKey);
+            const headerEntries = Object.entries(item.headers || {});
+            const statusData =
+              statusBarCache.get(item.apiKey) || calculateStatusBarData([], item.apiKey);
+
+            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/hooks/useProviderStats.ts

@@ -0,0 +1,37 @@
+import { useCallback, useRef, useState } from 'react';
+import { useInterval } from '@/hooks/useInterval';
+import { usageApi } from '@/services/api';
+import { collectUsageDetails, type KeyStats, type UsageDetail } from '@/utils/usage';
+
+const EMPTY_STATS: KeyStats = { bySource: {}, byAuthIndex: {} };
+
+export const useProviderStats = () => {
+  const [keyStats, setKeyStats] = useState<KeyStats>(EMPTY_STATS);
+  const [usageDetails, setUsageDetails] = useState<UsageDetail[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const loadingRef = useRef(false);
+
+  // 加载 key 统计和 usage 明细（API 层已有60秒超时）
+  const loadKeyStats = useCallback(async () => {
+    if (loadingRef.current) return;
+    loadingRef.current = true;
+    setIsLoading(true);
+    try {
+      const usageResponse = await usageApi.getUsage();
+      const usageData = usageResponse?.usage ?? usageResponse;
+      const stats = await usageApi.getKeyStats(usageData);
+      setKeyStats(stats);
+      setUsageDetails(collectUsageDetails(usageData));
+    } catch {
+      // 静默失败
+    } finally {
+      loadingRef.current = false;
+      setIsLoading(false);
+    }
+  }, []);
+
+  // 定时刷新状态数据（每240秒）
+  useInterval(loadKeyStats, 240_000);
+
+  return { keyStats, usageDetails, loadKeyStats, isLoading };
+};

src/components/providers/index.ts

@@ -0,0 +1,11 @@
+export { AmpcodeSection } from './AmpcodeSection';
+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';
+export * from './types';
+export * from './utils';

src/components/providers/types.ts

@@ -0,0 +1,69 @@
+import type { ApiKeyEntry, GeminiKeyConfig, ProviderKeyConfig } from '@/types';
+import type { HeaderEntry } from '@/utils/headers';
+import type { KeyStats, UsageDetail } from '@/utils/usage';
+
+export type ProviderModal =
+  | { type: 'gemini'; index: number | null }
+  | { type: 'codex'; index: number | null }
+  | { type: 'claude'; index: number | null }
+  | { type: 'vertex'; index: number | null }
+  | { type: 'ampcode'; index: null }
+  | { type: 'openai'; index: number | null };
+
+export interface ModelEntry {
+  name: string;
+  alias: string;
+}
+
+export interface OpenAIFormState {
+  name: string;
+  prefix: string;
+  baseUrl: string;
+  headers: HeaderEntry[];
+  testModel?: string;
+  modelEntries: ModelEntry[];
+  apiKeyEntries: ApiKeyEntry[];
+}
+
+export interface AmpcodeFormState {
+  upstreamUrl: string;
+  upstreamApiKey: string;
+  forceModelMappings: boolean;
+  mappingEntries: ModelEntry[];
+}
+
+export type GeminiFormState = Omit<GeminiKeyConfig, 'headers'> & {
+  headers: HeaderEntry[];
+  excludedText: string;
+};
+
+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;
+  usageDetails: UsageDetail[];
+  disabled: boolean;
+  onEdit: (index: number) => void;
+  onAdd: () => void;
+  onDelete: (index: number) => void;
+  onToggle?: (index: number, enabled: boolean) => void;
+}
+
+export interface ProviderModalProps<TConfig, TPayload = TConfig> {
+  isOpen: boolean;
+  editIndex: number | null;
+  initialData?: TConfig;
+  onClose: () => void;
+  onSave: (data: TPayload, index: number | null) => Promise<void>;
+  disabled?: boolean;
+}

src/components/providers/utils.ts

@@ -0,0 +1,132 @@
+import type { AmpcodeConfig, AmpcodeModelMapping, ApiKeyEntry } from '@/types';
+import type { KeyStatBucket, KeyStats } from '@/utils/usage';
+import type { AmpcodeFormState, ModelEntry } from './types';
+
+export const DISABLE_ALL_MODELS_RULE = '*';
+
+export const hasDisableAllModelsRule = (models?: string[]) =>
+  Array.isArray(models) &&
+  models.some((model) => String(model ?? '').trim() === DISABLE_ALL_MODELS_RULE);
+
+export const stripDisableAllModelsRule = (models?: string[]) =>
+  Array.isArray(models)
+    ? models.filter((model) => String(model ?? '').trim() !== DISABLE_ALL_MODELS_RULE)
+    : [];
+
+export const withDisableAllModelsRule = (models?: string[]) => {
+  const base = stripDisableAllModelsRule(models);
+  return [...base, DISABLE_ALL_MODELS_RULE];
+};
+
+export const withoutDisableAllModelsRule = (models?: string[]) => {
+  const base = stripDisableAllModelsRule(models);
+  return base;
+};
+
+export const parseExcludedModels = (text: string): string[] =>
+  text
+    .split(/[\n,]+/)
+    .map((item) => item.trim())
+    .filter(Boolean);
+
+export const excludedModelsToText = (models?: string[]) =>
+  Array.isArray(models) ? models.join('\n') : '';
+
+export const normalizeOpenAIBaseUrl = (baseUrl: string): string => {
+  let trimmed = String(baseUrl || '').trim();
+  if (!trimmed) return '';
+  trimmed = trimmed.replace(/\/?v0\/management\/?$/i, '');
+  trimmed = trimmed.replace(/\/+$/g, '');
+  if (!/^https?:\/\//i.test(trimmed)) {
+    trimmed = `http://${trimmed}`;
+  }
+  return trimmed;
+};
+
+export const buildOpenAIModelsEndpoint = (baseUrl: string): string => {
+  const trimmed = normalizeOpenAIBaseUrl(baseUrl);
+  if (!trimmed) return '';
+  return trimmed.endsWith('/v1') ? `${trimmed}/models` : `${trimmed}/v1/models`;
+};
+
+export const buildOpenAIChatCompletionsEndpoint = (baseUrl: string): string => {
+  const trimmed = normalizeOpenAIBaseUrl(baseUrl);
+  if (!trimmed) return '';
+  if (trimmed.endsWith('/chat/completions')) {
+    return trimmed;
+  }
+  return trimmed.endsWith('/v1') ? `${trimmed}/chat/completions` : `${trimmed}/v1/chat/completions`;
+};
+
+// 根据 source (apiKey) 获取统计数据 - 与旧版逻辑一致
+export const getStatsBySource = (
+  apiKey: string,
+  keyStats: KeyStats,
+  maskFn: (key: string) => string
+): KeyStatBucket => {
+  const bySource = keyStats.bySource ?? {};
+  const masked = maskFn(apiKey);
+  return bySource[apiKey] || bySource[masked] || { success: 0, failure: 0 };
+};
+
+// 对于 OpenAI 提供商，汇总所有 apiKeyEntries 的统计 - 与旧版逻辑一致
+export const getOpenAIProviderStats = (
+  apiKeyEntries: ApiKeyEntry[] | undefined,
+  keyStats: KeyStats,
+  maskFn: (key: string) => string
+): KeyStatBucket => {
+  const bySource = keyStats.bySource ?? {};
+  let totalSuccess = 0;
+  let totalFailure = 0;
+
+  (apiKeyEntries || []).forEach((entry) => {
+    const key = entry?.apiKey || '';
+    if (!key) return;
+    const masked = maskFn(key);
+    const stats = bySource[key] || bySource[masked] || { success: 0, failure: 0 };
+    totalSuccess += stats.success;
+    totalFailure += stats.failure;
+  });
+
+  return { success: totalSuccess, failure: totalFailure };
+};
+
+export const buildApiKeyEntry = (input?: Partial<ApiKeyEntry>): ApiKeyEntry => ({
+  apiKey: input?.apiKey ?? '',
+  proxyUrl: input?.proxyUrl ?? '',
+  headers: input?.headers ?? {},
+});
+
+export const ampcodeMappingsToEntries = (mappings?: AmpcodeModelMapping[]): ModelEntry[] => {
+  if (!Array.isArray(mappings) || mappings.length === 0) {
+    return [{ name: '', alias: '' }];
+  }
+  return mappings.map((mapping) => ({
+    name: mapping.from ?? '',
+    alias: mapping.to ?? '',
+  }));
+};
+
+export const entriesToAmpcodeMappings = (entries: ModelEntry[]): AmpcodeModelMapping[] => {
+  const seen = new Set<string>();
+  const mappings: AmpcodeModelMapping[] = [];
+
+  entries.forEach((entry) => {
+    const from = entry.name.trim();
+    const to = entry.alias.trim();
+    if (!from || !to) return;
+    const key = from.toLowerCase();
+    if (seen.has(key)) return;
+    seen.add(key);
+    mappings.push({ from, to });
+  });
+
+  return mappings;
+};
+
+export const buildAmpcodeFormState = (ampcode?: AmpcodeConfig | null): AmpcodeFormState => ({
+  upstreamUrl: ampcode?.upstreamUrl ?? '',
+  upstreamApiKey: '',
+  forceModelMappings: ampcode?.forceModelMappings ?? false,
+  mappingEntries: ampcodeMappingsToEntries(ampcode?.modelMappings),
+});

src/components/quota/QuotaCard.tsx

@@ -0,0 +1,145 @@
+/**
+ * Generic quota card component.
+ */
+
+import { useTranslation } from 'react-i18next';
+import type { ReactElement, ReactNode } from 'react';
+import type { TFunction } from 'i18next';
+import type { AuthFileItem, ResolvedTheme, ThemeColors } from '@/types';
+import { TYPE_COLORS } from '@/utils/quota';
+import styles from '@/pages/QuotaPage.module.scss';
+
+type QuotaStatus = 'idle' | 'loading' | 'success' | 'error';
+
+export interface QuotaStatusState {
+  status: QuotaStatus;
+  error?: string;
+  errorStatus?: number;
+}
+
+export interface QuotaProgressBarProps {
+  percent: number | null;
+  highThreshold: number;
+  mediumThreshold: number;
+}
+
+export function QuotaProgressBar({
+  percent,
+  highThreshold,
+  mediumThreshold
+}: QuotaProgressBarProps) {
+  const clamp = (value: number, min: number, max: number) =>
+    Math.min(max, Math.max(min, value));
+  const normalized = percent === null ? null : clamp(percent, 0, 100);
+  const fillClass =
+    normalized === null
+      ? styles.quotaBarFillMedium
+      : normalized >= highThreshold
+        ? styles.quotaBarFillHigh
+        : normalized >= mediumThreshold
+          ? styles.quotaBarFillMedium
+          : styles.quotaBarFillLow;
+  const widthPercent = Math.round(normalized ?? 0);
+
+  return (
+    <div className={styles.quotaBar}>
+      <div
+        className={`${styles.quotaBarFill} ${fillClass}`}
+        style={{ width: `${widthPercent}%` }}
+      />
+    </div>
+  );
+}
+
+export interface QuotaRenderHelpers {
+  styles: typeof styles;
+  QuotaProgressBar: (props: QuotaProgressBarProps) => ReactElement;
+}
+
+interface QuotaCardProps<TState extends QuotaStatusState> {
+  item: AuthFileItem;
+  quota?: TState;
+  resolvedTheme: ResolvedTheme;
+  i18nPrefix: string;
+  cardClassName: string;
+  defaultType: string;
+  renderQuotaItems: (quota: TState, t: TFunction, helpers: QuotaRenderHelpers) => ReactNode;
+}
+
+export function QuotaCard<TState extends QuotaStatusState>({
+  item,
+  quota,
+  resolvedTheme,
+  i18nPrefix,
+  cardClassName,
+  defaultType,
+  renderQuotaItems
+}: QuotaCardProps<TState>) {
+  const { t } = useTranslation();
+
+  const displayType = item.type || item.provider || defaultType;
+  const typeColorSet = TYPE_COLORS[displayType] || TYPE_COLORS.unknown;
+  const typeColor: ThemeColors =
+    resolvedTheme === 'dark' && typeColorSet.dark ? typeColorSet.dark : typeColorSet.light;
+
+  const quotaStatus = quota?.status ?? 'idle';
+  const quotaErrorMessage = resolveQuotaErrorMessage(
+    t,
+    quota?.errorStatus,
+    quota?.error || t('common.unknown_error')
+  );
+
+  const getTypeLabel = (type: string): string => {
+    const key = `auth_files.filter_${type}`;
+    const translated = t(key);
+    if (translated !== key) return translated;
+    if (type.toLowerCase() === 'iflow') return 'iFlow';
+    return type.charAt(0).toUpperCase() + type.slice(1);
+  };
+
+  return (
+    <div className={`${styles.fileCard} ${cardClassName}`}>
+      <div className={styles.cardHeader}>
+        <span
+          className={styles.typeBadge}
+          style={{
+            backgroundColor: typeColor.bg,
+            color: typeColor.text,
+            ...(typeColor.border ? { border: typeColor.border } : {})
+          }}
+        >
+          {getTypeLabel(displayType)}
+        </span>
+        <span className={styles.fileName}>{item.name}</span>
+      </div>
+
+      <div className={styles.quotaSection}>
+        {quotaStatus === 'loading' ? (
+          <div className={styles.quotaMessage}>{t(`${i18nPrefix}.loading`)}</div>
+        ) : quotaStatus === 'idle' ? (
+          <div className={styles.quotaMessage}>{t(`${i18nPrefix}.idle`)}</div>
+        ) : quotaStatus === 'error' ? (
+          <div className={styles.quotaError}>
+            {t(`${i18nPrefix}.load_failed`, {
+              message: quotaErrorMessage
+            })}
+          </div>
+        ) : quota ? (
+          renderQuotaItems(quota, t, { styles, QuotaProgressBar })
+        ) : (
+          <div className={styles.quotaMessage}>{t(`${i18nPrefix}.idle`)}</div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+const resolveQuotaErrorMessage = (
+  t: TFunction,
+  status: number | undefined,
+  fallback: string
+): string => {
+  if (status === 404) return t('common.quota_update_required');
+  if (status === 403) return t('common.quota_check_credential');
+  return fallback;
+};

src/components/quota/QuotaSection.tsx

@@ -0,0 +1,321 @@
+/**
+ * Generic quota section component.
+ */
+
+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;
+
+type ViewMode = 'paged' | 'all';
+
+const MAX_ITEMS_PER_PAGE = 14;
+const MAX_SHOW_ALL_THRESHOLD = 30;
+
+interface QuotaPaginationState<T> {
+  pageSize: number;
+  totalPages: number;
+  currentPage: number;
+  pageItems: T[];
+  setPageSize: (size: number) => void;
+  goToPrev: () => void;
+  goToNext: () => void;
+  loading: boolean;
+  loadingScope: 'page' | 'all' | null;
+  setLoading: (loading: boolean, scope?: 'page' | 'all' | null) => void;
+}
+
+const useQuotaPagination = <T,>(items: T[], defaultPageSize = 6): QuotaPaginationState<T> => {
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSizeState] = useState(defaultPageSize);
+  const [loading, setLoadingState] = useState(false);
+  const [loadingScope, setLoadingScope] = useState<'page' | 'all' | null>(null);
+
+  const totalPages = useMemo(
+    () => Math.max(1, Math.ceil(items.length / pageSize)),
+    [items.length, pageSize]
+  );
+
+  const currentPage = useMemo(() => Math.min(page, totalPages), [page, totalPages]);
+
+  const pageItems = useMemo(() => {
+    const start = (currentPage - 1) * pageSize;
+    return items.slice(start, start + pageSize);
+  }, [items, currentPage, pageSize]);
+
+  const setPageSize = useCallback((size: number) => {
+    setPageSizeState(size);
+    setPage(1);
+  }, []);
+
+  const goToPrev = useCallback(() => {
+    setPage((prev) => Math.max(1, prev - 1));
+  }, []);
+
+  const goToNext = useCallback(() => {
+    setPage((prev) => Math.min(totalPages, prev + 1));
+  }, [totalPages]);
+
+  const setLoading = useCallback((isLoading: boolean, scope?: 'page' | 'all' | null) => {
+    setLoadingState(isLoading);
+    setLoadingScope(isLoading ? (scope ?? null) : null);
+  }, []);
+
+  return {
+    pageSize,
+    totalPages,
+    currentPage,
+    pageItems,
+    setPageSize,
+    goToPrev,
+    goToNext,
+    loading,
+    loadingScope,
+    setLoading
+  };
+};
+
+interface QuotaSectionProps<TState extends QuotaStatusState, TData> {
+  config: QuotaConfig<TState, TData>;
+  files: AuthFileItem[];
+  loading: boolean;
+  disabled: boolean;
+}
+
+export function QuotaSection<TState extends QuotaStatusState, TData>({
+  config,
+  files,
+  loading,
+  disabled
+}: QuotaSectionProps<TState, TData>) {
+  const { t } = useTranslation();
+  const resolvedTheme: ResolvedTheme = useThemeStore((state) => state.resolvedTheme);
+  const setQuota = useQuotaStore((state) => state[config.storeSetter]) as QuotaSetter<
+    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
+  ]);
+  const showAllAllowed = filteredFiles.length <= MAX_SHOW_ALL_THRESHOLD;
+  const effectiveViewMode: ViewMode = viewMode === 'all' && !showAllAllowed ? 'paged' : viewMode;
+
+  const {
+    pageSize,
+    totalPages,
+    currentPage,
+    pageItems,
+    setPageSize,
+    goToPrev,
+    goToNext,
+    loading: sectionLoading,
+    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 pendingQuotaRefreshRef = useRef(false);
+  const prevFilesLoadingRef = useRef(loading);
+
+  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;
+    if (filteredFiles.length === 0) {
+      setQuota({});
+      return;
+    }
+    setQuota((prev) => {
+      const nextState: Record<string, TState> = {};
+      filteredFiles.forEach((file) => {
+        const cached = prev[file.name];
+        if (cached) {
+          nextState[file.name] = cached;
+        }
+      });
+      return nextState;
+    });
+  }, [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={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={handleRefresh}
+            disabled={disabled || isRefreshing}
+            loading={isRefreshing}
+            title={t('quota_management.refresh_files_and_quota')}
+            aria-label={t('quota_management.refresh_files_and_quota')}
+          >
+            {!isRefreshing && <IconRefreshCw size={16} />}
+          </Button>
+        </div>
+      }
+    >
+      {filteredFiles.length === 0 ? (
+        <EmptyState
+          title={t(`${config.i18nPrefix}.empty_title`)}
+          description={t(`${config.i18nPrefix}.empty_desc`)}
+        />
+      ) : (
+        <>
+          <div ref={gridRef} className={config.gridClassName}>
+            {pageItems.map((item) => (
+              <QuotaCard
+                key={item.name}
+                item={item}
+                quota={quota[item.name]}
+                resolvedTheme={resolvedTheme}
+                i18nPrefix={config.i18nPrefix}
+                cardClassName={config.cardClassName}
+                defaultType={config.type}
+                renderQuotaItems={config.renderQuotaItems}
+              />
+            ))}
+          </div>
+          {filteredFiles.length > pageSize && effectiveViewMode === 'paged' && (
+            <div className={styles.pagination}>
+              <Button
+                variant="secondary"
+                size="sm"
+                onClick={goToPrev}
+                disabled={currentPage <= 1}
+              >
+                {t('auth_files.pagination_prev')}
+              </Button>
+              <div className={styles.pageInfo}>
+                {t('auth_files.pagination_info', {
+                  current: currentPage,
+                  total: totalPages,
+                  count: filteredFiles.length
+                })}
+              </div>
+              <Button
+                variant="secondary"
+                size="sm"
+                onClick={goToNext}
+                disabled={currentPage >= totalPages}
+              >
+                {t('auth_files.pagination_next')}
+              </Button>
+            </div>
+          )}
+        </>
+      )}
+      {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/index.ts

@@ -0,0 +1,9 @@
+/**
+ * Quota components barrel export.
+ */
+
+export { QuotaSection } from './QuotaSection';
+export { QuotaCard } from './QuotaCard';
+export { useQuotaLoader } from './useQuotaLoader';
+export { ANTIGRAVITY_CONFIG, CODEX_CONFIG, GEMINI_CLI_CONFIG } from './quotaConfigs';
+export type { QuotaConfig } from './quotaConfigs';

src/components/quota/quotaConfigs.ts

@@ -0,0 +1,604 @@
+/**
+ * Quota configuration definitions.
+ */
+
+import React from 'react';
+import type { ReactNode } from 'react';
+import type { TFunction } from 'i18next';
+import type {
+  AntigravityQuotaGroup,
+  AntigravityModelsPayload,
+  AntigravityQuotaState,
+  AuthFileItem,
+  CodexQuotaState,
+  CodexUsageWindow,
+  CodexQuotaWindow,
+  CodexUsagePayload,
+  GeminiCliParsedBucket,
+  GeminiCliQuotaBucketState,
+  GeminiCliQuotaState
+} from '@/types';
+import { apiCallApi, authFilesApi, getApiCallErrorMessage } from '@/services/api';
+import {
+  ANTIGRAVITY_QUOTA_URLS,
+  ANTIGRAVITY_REQUEST_HEADERS,
+  CODEX_USAGE_URL,
+  CODEX_REQUEST_HEADERS,
+  GEMINI_CLI_QUOTA_URL,
+  GEMINI_CLI_REQUEST_HEADERS,
+  normalizeAuthIndexValue,
+  normalizeNumberValue,
+  normalizePlanType,
+  normalizeQuotaFraction,
+  normalizeStringValue,
+  parseAntigravityPayload,
+  parseCodexUsagePayload,
+  parseGeminiCliQuotaPayload,
+  resolveCodexChatgptAccountId,
+  resolveCodexPlanType,
+  resolveGeminiCliProjectId,
+  formatCodexResetLabel,
+  formatQuotaResetTime,
+  buildAntigravityQuotaGroups,
+  buildGeminiCliQuotaBuckets,
+  createStatusError,
+  getStatusFromError,
+  isAntigravityFile,
+  isCodexFile,
+  isGeminiCliFile,
+  isRuntimeOnlyAuthFile
+} from '@/utils/quota';
+import type { QuotaRenderHelpers } from './QuotaCard';
+import styles from '@/pages/QuotaPage.module.scss';
+
+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>;
+  geminiCliQuota: Record<string, GeminiCliQuotaState>;
+  setAntigravityQuota: (updater: QuotaUpdater<Record<string, AntigravityQuotaState>>) => void;
+  setCodexQuota: (updater: QuotaUpdater<Record<string, CodexQuotaState>>) => void;
+  setGeminiCliQuota: (updater: QuotaUpdater<Record<string, GeminiCliQuotaState>>) => void;
+  clearQuotaCache: () => void;
+}
+
+export interface QuotaConfig<TState, TData> {
+  type: QuotaType;
+  i18nPrefix: string;
+  filterFn: (file: AuthFileItem) => boolean;
+  fetchQuota: (file: AuthFileItem, t: TFunction) => Promise<TData>;
+  storeSelector: (state: QuotaStore) => Record<string, TState>;
+  storeSetter: keyof QuotaStore;
+  buildLoadingState: () => TState;
+  buildSuccessState: (data: TData) => TState;
+  buildErrorState: (message: string, status?: number) => TState;
+  cardClassName: string;
+  controlsClassName: string;
+  controlClassName: string;
+  gridClassName: string;
+  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
+): Promise<AntigravityQuotaGroup[]> => {
+  const rawAuthIndex = file['auth_index'] ?? file.authIndex;
+  const authIndex = normalizeAuthIndexValue(rawAuthIndex);
+  if (!authIndex) {
+    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) {
+    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 === 400 &&
+            isAntigravityUnknownFieldError(lastError) &&
+            attempt < requestBodies.length - 1
+          ) {
+            continue;
+          }
+          break;
+        }
+
+        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;
+        }
+
+        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;
+          }
+        }
+      }
+    }
+  }
+
+  if (hadSuccess) {
+    return [];
+  }
+
+  throw createStatusError(lastError || t('common.unknown_error'), priorityStatus ?? lastStatus);
+};
+
+const buildCodexQuotaWindows = (payload: CodexUsagePayload, t: TFunction): CodexQuotaWindow[] => {
+  const rateLimit = payload.rate_limit ?? payload.rateLimit ?? undefined;
+  const codeReviewLimit = payload.code_review_rate_limit ?? payload.codeReviewRateLimit ?? undefined;
+  const windows: CodexQuotaWindow[] = [];
+
+  const addWindow = (
+    id: string,
+    labelKey: string,
+    window?: CodexUsageWindow | null,
+    limitReached?: boolean,
+    allowed?: boolean
+  ) => {
+    if (!window) return;
+    const resetLabel = formatCodexResetLabel(window);
+    const usedPercentRaw = normalizeNumberValue(window.used_percent ?? window.usedPercent);
+    const isLimitReached = Boolean(limitReached) || allowed === false;
+    const usedPercent = usedPercentRaw ?? (isLimitReached && resetLabel !== '-' ? 100 : null);
+    windows.push({
+      id,
+      label: t(labelKey),
+      labelKey,
+      usedPercent,
+      resetLabel
+    });
+  };
+
+  addWindow(
+    'primary',
+    'codex_quota.primary_window',
+    rateLimit?.primary_window ?? rateLimit?.primaryWindow,
+    rateLimit?.limit_reached ?? rateLimit?.limitReached,
+    rateLimit?.allowed
+  );
+  addWindow(
+    'secondary',
+    'codex_quota.secondary_window',
+    rateLimit?.secondary_window ?? rateLimit?.secondaryWindow,
+    rateLimit?.limit_reached ?? rateLimit?.limitReached,
+    rateLimit?.allowed
+  );
+  addWindow(
+    'code-review',
+    'codex_quota.code_review_window',
+    codeReviewLimit?.primary_window ?? codeReviewLimit?.primaryWindow,
+    codeReviewLimit?.limit_reached ?? codeReviewLimit?.limitReached,
+    codeReviewLimit?.allowed
+  );
+
+  return windows;
+};
+
+const fetchCodexQuota = async (
+  file: AuthFileItem,
+  t: TFunction
+): Promise<{ planType: string | null; windows: CodexQuotaWindow[] }> => {
+  const rawAuthIndex = file['auth_index'] ?? file.authIndex;
+  const authIndex = normalizeAuthIndexValue(rawAuthIndex);
+  if (!authIndex) {
+    throw new Error(t('codex_quota.missing_auth_index'));
+  }
+
+  const planTypeFromFile = resolveCodexPlanType(file);
+  const accountId = resolveCodexChatgptAccountId(file);
+  if (!accountId) {
+    throw new Error(t('codex_quota.missing_account_id'));
+  }
+
+  const requestHeader: Record<string, string> = {
+    ...CODEX_REQUEST_HEADERS,
+    'Chatgpt-Account-Id': accountId
+  };
+
+  const result = await apiCallApi.request({
+    authIndex,
+    method: 'GET',
+    url: CODEX_USAGE_URL,
+    header: requestHeader
+  });
+
+  if (result.statusCode < 200 || result.statusCode >= 300) {
+    throw createStatusError(getApiCallErrorMessage(result), result.statusCode);
+  }
+
+  const payload = parseCodexUsagePayload(result.body ?? result.bodyText);
+  if (!payload) {
+    throw new Error(t('codex_quota.empty_windows'));
+  }
+
+  const planTypeFromUsage = normalizePlanType(payload.plan_type ?? payload.planType);
+  const windows = buildCodexQuotaWindows(payload, t);
+  return { planType: planTypeFromUsage ?? planTypeFromFile, windows };
+};
+
+const fetchGeminiCliQuota = async (
+  file: AuthFileItem,
+  t: TFunction
+): Promise<GeminiCliQuotaBucketState[]> => {
+  const rawAuthIndex = file['auth_index'] ?? file.authIndex;
+  const authIndex = normalizeAuthIndexValue(rawAuthIndex);
+  if (!authIndex) {
+    throw new Error(t('gemini_cli_quota.missing_auth_index'));
+  }
+
+  const projectId = resolveGeminiCliProjectId(file);
+  if (!projectId) {
+    throw new Error(t('gemini_cli_quota.missing_project_id'));
+  }
+
+  const result = await apiCallApi.request({
+    authIndex,
+    method: 'POST',
+    url: GEMINI_CLI_QUOTA_URL,
+    header: { ...GEMINI_CLI_REQUEST_HEADERS },
+    data: JSON.stringify({ project: projectId })
+  });
+
+  if (result.statusCode < 200 || result.statusCode >= 300) {
+    throw createStatusError(getApiCallErrorMessage(result), result.statusCode);
+  }
+
+  const payload = parseGeminiCliQuotaPayload(result.body ?? result.bodyText);
+  const buckets = Array.isArray(payload?.buckets) ? payload?.buckets : [];
+  if (buckets.length === 0) return [];
+
+  const parsedBuckets = buckets
+    .map((bucket) => {
+      const modelId = normalizeStringValue(bucket.modelId ?? bucket.model_id);
+      if (!modelId) return null;
+      const tokenType = normalizeStringValue(bucket.tokenType ?? bucket.token_type);
+      const remainingFractionRaw = normalizeQuotaFraction(
+        bucket.remainingFraction ?? bucket.remaining_fraction
+      );
+      const remainingAmount = normalizeNumberValue(bucket.remainingAmount ?? bucket.remaining_amount);
+      const resetTime = normalizeStringValue(bucket.resetTime ?? bucket.reset_time) ?? undefined;
+      let fallbackFraction: number | null = null;
+      if (remainingAmount !== null) {
+        fallbackFraction = remainingAmount <= 0 ? 0 : null;
+      } else if (resetTime) {
+        fallbackFraction = 0;
+      }
+      const remainingFraction = remainingFractionRaw ?? fallbackFraction;
+      return {
+        modelId,
+        tokenType,
+        remainingFraction,
+        remainingAmount,
+        resetTime
+      };
+    })
+    .filter((bucket): bucket is GeminiCliParsedBucket => bucket !== null);
+
+  return buildGeminiCliQuotaBuckets(parsedBuckets);
+};
+
+const renderAntigravityItems = (
+  quota: AntigravityQuotaState,
+  t: TFunction,
+  helpers: QuotaRenderHelpers
+): ReactNode => {
+  const { styles: styleMap, QuotaProgressBar } = helpers;
+  const { createElement: h } = React;
+  const groups = quota.groups ?? [];
+
+  if (groups.length === 0) {
+    return h('div', { className: styleMap.quotaMessage }, t('antigravity_quota.empty_models'));
+  }
+
+  return groups.map((group) => {
+    const clamped = Math.max(0, Math.min(1, group.remainingFraction));
+    const percent = Math.round(clamped * 100);
+    const resetLabel = formatQuotaResetTime(group.resetTime);
+
+    return h(
+      'div',
+      { key: group.id, className: styleMap.quotaRow },
+      h(
+        'div',
+        { className: styleMap.quotaRowHeader },
+        h(
+          'span',
+          { className: styleMap.quotaModel, title: group.models.join(', ') },
+          group.label
+        ),
+        h(
+          'div',
+          { className: styleMap.quotaMeta },
+          h('span', { className: styleMap.quotaPercent }, `${percent}%`),
+          h('span', { className: styleMap.quotaReset }, resetLabel)
+        )
+      ),
+      h(QuotaProgressBar, { percent, highThreshold: 60, mediumThreshold: 20 })
+    );
+  });
+};
+
+const renderCodexItems = (
+  quota: CodexQuotaState,
+  t: TFunction,
+  helpers: QuotaRenderHelpers
+): ReactNode => {
+  const { styles: styleMap, QuotaProgressBar } = helpers;
+  const { createElement: h, Fragment } = React;
+  const windows = quota.windows ?? [];
+  const planType = quota.planType ?? null;
+
+  const getPlanLabel = (pt?: string | null): string | null => {
+    const normalized = normalizePlanType(pt);
+    if (!normalized) return null;
+    if (normalized === 'plus') return t('codex_quota.plan_plus');
+    if (normalized === 'team') return t('codex_quota.plan_team');
+    if (normalized === 'free') return t('codex_quota.plan_free');
+    return pt || normalized;
+  };
+
+  const planLabel = getPlanLabel(planType);
+  const isFreePlan = normalizePlanType(planType) === 'free';
+  const nodes: ReactNode[] = [];
+
+  if (planLabel) {
+    nodes.push(
+      h(
+        'div',
+        { key: 'plan', className: styleMap.codexPlan },
+        h('span', { className: styleMap.codexPlanLabel }, t('codex_quota.plan_label')),
+        h('span', { className: styleMap.codexPlanValue }, planLabel)
+      )
+    );
+  }
+
+  if (isFreePlan) {
+    nodes.push(
+      h(
+        'div',
+        { key: 'warning', className: styleMap.quotaWarning },
+        t('codex_quota.no_access')
+      )
+    );
+    return h(Fragment, null, ...nodes);
+  }
+
+  if (windows.length === 0) {
+    nodes.push(
+      h('div', { key: 'empty', className: styleMap.quotaMessage }, t('codex_quota.empty_windows'))
+    );
+    return h(Fragment, null, ...nodes);
+  }
+
+  nodes.push(
+    ...windows.map((window) => {
+      const used = window.usedPercent;
+      const clampedUsed = used === null ? null : Math.max(0, Math.min(100, used));
+      const remaining = clampedUsed === null ? null : Math.max(0, Math.min(100, 100 - clampedUsed));
+      const percentLabel = remaining === null ? '--' : `${Math.round(remaining)}%`;
+      const windowLabel = window.labelKey ? t(window.labelKey) : window.label;
+
+      return h(
+        'div',
+        { key: window.id, className: styleMap.quotaRow },
+        h(
+          'div',
+          { className: styleMap.quotaRowHeader },
+          h('span', { className: styleMap.quotaModel }, windowLabel),
+          h(
+            'div',
+            { className: styleMap.quotaMeta },
+            h('span', { className: styleMap.quotaPercent }, percentLabel),
+            h('span', { className: styleMap.quotaReset }, window.resetLabel)
+          )
+        ),
+        h(QuotaProgressBar, { percent: remaining, highThreshold: 80, mediumThreshold: 50 })
+      );
+    })
+  );
+
+  return h(Fragment, null, ...nodes);
+};
+
+const renderGeminiCliItems = (
+  quota: GeminiCliQuotaState,
+  t: TFunction,
+  helpers: QuotaRenderHelpers
+): ReactNode => {
+  const { styles: styleMap, QuotaProgressBar } = helpers;
+  const { createElement: h } = React;
+  const buckets = quota.buckets ?? [];
+
+  if (buckets.length === 0) {
+    return h('div', { className: styleMap.quotaMessage }, t('gemini_cli_quota.empty_buckets'));
+  }
+
+  return buckets.map((bucket) => {
+    const fraction = bucket.remainingFraction;
+    const clamped = fraction === null ? null : Math.max(0, Math.min(1, fraction));
+    const percent = clamped === null ? null : Math.round(clamped * 100);
+    const percentLabel = percent === null ? '--' : `${percent}%`;
+    const remainingAmountLabel =
+      bucket.remainingAmount === null || bucket.remainingAmount === undefined
+        ? null
+        : t('gemini_cli_quota.remaining_amount', {
+            count: bucket.remainingAmount
+          });
+    const titleBase =
+      bucket.modelIds && bucket.modelIds.length > 0 ? bucket.modelIds.join(', ') : bucket.label;
+    const title = bucket.tokenType ? `${titleBase} (${bucket.tokenType})` : titleBase;
+
+    const resetLabel = formatQuotaResetTime(bucket.resetTime);
+
+    return h(
+      'div',
+      { key: bucket.id, className: styleMap.quotaRow },
+      h(
+        'div',
+        { className: styleMap.quotaRowHeader },
+        h('span', { className: styleMap.quotaModel, title }, bucket.label),
+        h(
+          'div',
+          { className: styleMap.quotaMeta },
+          h('span', { className: styleMap.quotaPercent }, percentLabel),
+          remainingAmountLabel
+            ? h('span', { className: styleMap.quotaAmount }, remainingAmountLabel)
+            : null,
+          h('span', { className: styleMap.quotaReset }, resetLabel)
+        )
+      ),
+      h(QuotaProgressBar, { percent, highThreshold: 60, mediumThreshold: 20 })
+    );
+  });
+};
+
+export const ANTIGRAVITY_CONFIG: QuotaConfig<AntigravityQuotaState, AntigravityQuotaGroup[]> = {
+  type: 'antigravity',
+  i18nPrefix: 'antigravity_quota',
+  filterFn: (file) => isAntigravityFile(file),
+  fetchQuota: fetchAntigravityQuota,
+  storeSelector: (state) => state.antigravityQuota,
+  storeSetter: 'setAntigravityQuota',
+  buildLoadingState: () => ({ status: 'loading', groups: [] }),
+  buildSuccessState: (groups) => ({ status: 'success', groups }),
+  buildErrorState: (message, status) => ({
+    status: 'error',
+    groups: [],
+    error: message,
+    errorStatus: status
+  }),
+  cardClassName: styles.antigravityCard,
+  controlsClassName: styles.antigravityControls,
+  controlClassName: styles.antigravityControl,
+  gridClassName: styles.antigravityGrid,
+  renderQuotaItems: renderAntigravityItems
+};
+
+export const CODEX_CONFIG: QuotaConfig<
+  CodexQuotaState,
+  { planType: string | null; windows: CodexQuotaWindow[] }
+> = {
+  type: 'codex',
+  i18nPrefix: 'codex_quota',
+  filterFn: (file) => isCodexFile(file),
+  fetchQuota: fetchCodexQuota,
+  storeSelector: (state) => state.codexQuota,
+  storeSetter: 'setCodexQuota',
+  buildLoadingState: () => ({ status: 'loading', windows: [] }),
+  buildSuccessState: (data) => ({
+    status: 'success',
+    windows: data.windows,
+    planType: data.planType
+  }),
+  buildErrorState: (message, status) => ({
+    status: 'error',
+    windows: [],
+    error: message,
+    errorStatus: status
+  }),
+  cardClassName: styles.codexCard,
+  controlsClassName: styles.codexControls,
+  controlClassName: styles.codexControl,
+  gridClassName: styles.codexGrid,
+  renderQuotaItems: renderCodexItems
+};
+
+export const GEMINI_CLI_CONFIG: QuotaConfig<GeminiCliQuotaState, GeminiCliQuotaBucketState[]> = {
+  type: 'gemini-cli',
+  i18nPrefix: 'gemini_cli_quota',
+  filterFn: (file) => isGeminiCliFile(file) && !isRuntimeOnlyAuthFile(file),
+  fetchQuota: fetchGeminiCliQuota,
+  storeSelector: (state) => state.geminiCliQuota,
+  storeSetter: 'setGeminiCliQuota',
+  buildLoadingState: () => ({ status: 'loading', buckets: [] }),
+  buildSuccessState: (buckets) => ({ status: 'success', buckets }),
+  buildErrorState: (message, status) => ({
+    status: 'error',
+    buckets: [],
+    error: message,
+    errorStatus: status
+  }),
+  cardClassName: styles.geminiCliCard,
+  controlsClassName: styles.geminiCliControls,
+  controlClassName: styles.geminiCliControl,
+  gridClassName: styles.geminiCliGrid,
+  renderQuotaItems: renderGeminiCliItems
+};

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/quota/useQuotaLoader.ts

@@ -0,0 +1,98 @@
+/**
+ * Generic hook for quota data fetching and management.
+ */
+
+import { useCallback, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
+import type { AuthFileItem } from '@/types';
+import { useQuotaStore } from '@/stores';
+import { getStatusFromError } from '@/utils/quota';
+import type { QuotaConfig } from './quotaConfigs';
+
+type QuotaScope = 'page' | 'all';
+
+type QuotaUpdater<T> = T | ((prev: T) => T);
+
+type QuotaSetter<T> = (updater: QuotaUpdater<T>) => void;
+
+interface LoadQuotaResult<TData> {
+  name: string;
+  status: 'success' | 'error';
+  data?: TData;
+  error?: string;
+  errorStatus?: number;
+}
+
+export function useQuotaLoader<TState, TData>(config: QuotaConfig<TState, TData>) {
+  const { t } = useTranslation();
+  const quota = useQuotaStore(config.storeSelector);
+  const setQuota = useQuotaStore((state) => state[config.storeSetter]) as QuotaSetter<
+    Record<string, TState>
+  >;
+
+  const loadingRef = useRef(false);
+  const requestIdRef = useRef(0);
+
+  const loadQuota = useCallback(
+    async (
+      targets: AuthFileItem[],
+      scope: QuotaScope,
+      setLoading: (loading: boolean, scope?: QuotaScope | null) => void
+    ) => {
+      if (loadingRef.current) return;
+      loadingRef.current = true;
+      const requestId = ++requestIdRef.current;
+      setLoading(true, scope);
+
+      try {
+        if (targets.length === 0) return;
+
+        setQuota((prev) => {
+          const nextState = { ...prev };
+          targets.forEach((file) => {
+            nextState[file.name] = config.buildLoadingState();
+          });
+          return nextState;
+        });
+
+        const results = await Promise.all(
+          targets.map(async (file): Promise<LoadQuotaResult<TData>> => {
+            try {
+              const data = await config.fetchQuota(file, t);
+              return { name: file.name, status: 'success', data };
+            } catch (err: unknown) {
+              const message = err instanceof Error ? err.message : t('common.unknown_error');
+              const errorStatus = getStatusFromError(err);
+              return { name: file.name, status: 'error', error: message, errorStatus };
+            }
+          })
+        );
+
+        if (requestId !== requestIdRef.current) return;
+
+        setQuota((prev) => {
+          const nextState = { ...prev };
+          results.forEach((result) => {
+            if (result.status === 'success') {
+              nextState[result.name] = config.buildSuccessState(result.data as TData);
+            } else {
+              nextState[result.name] = config.buildErrorState(
+                result.error || t('common.unknown_error'),
+                result.errorStatus
+              );
+            }
+          });
+          return nextState;
+        });
+      } finally {
+        if (requestId === requestIdRef.current) {
+          setLoading(false);
+          loadingRef.current = false;
+        }
+      }
+    },
+    [config, setQuota, t]
+  );
+
+  return { quota, loadQuota };
+}

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/Card.tsx

@@ -2,16 +2,20 @@ import type { PropsWithChildren, ReactNode } from 'react';
 
 interface CardProps {
   title?: ReactNode;
+  subtitle?: ReactNode;
   extra?: ReactNode;
   className?: string;
 }
 
-export function Card({ title, extra, children, className }: PropsWithChildren<CardProps>) {
+export function Card({ title, subtitle, extra, children, className }: PropsWithChildren<CardProps>) {
   return (
     <div className={className ? `card ${className}` : 'card'}>
       {(title || extra) && (
         <div className="card-header">
-          <div className="title">{title}</div>
+          <div className="card-title-group">
+            <div className="title">{title}</div>
+            {subtitle && <div className="subtitle">{subtitle}</div>}
+          </div>
           {extra}
         </div>
       )}

src/components/ui/Modal.tsx

@@ -1,4 +1,5 @@
 import { useState, useEffect, useCallback, useRef, type PropsWithChildren, type ReactNode } from 'react';
+import { createPortal } from 'react-dom';
 import { IconX } from './icons';
 
 interface ModalProps {
@@ -10,6 +11,26 @@ interface ModalProps {
 }
 
 const CLOSE_ANIMATION_DURATION = 350;
+const MODAL_LOCK_CLASS = 'modal-open';
+let activeModalCount = 0;
+
+const lockScroll = () => {
+  if (typeof document === 'undefined') return;
+  if (activeModalCount === 0) {
+    document.body?.classList.add(MODAL_LOCK_CLASS);
+    document.documentElement?.classList.add(MODAL_LOCK_CLASS);
+  }
+  activeModalCount += 1;
+};
+
+const unlockScroll = () => {
+  if (typeof document === 'undefined') return;
+  activeModalCount = Math.max(0, activeModalCount - 1);
+  if (activeModalCount === 0) {
+    document.body?.classList.remove(MODAL_LOCK_CLASS);
+    document.documentElement?.classList.remove(MODAL_LOCK_CLASS);
+  }
+};
 
 export function Modal({ open, title, onClose, footer, width = 520, children }: PropsWithChildren<ModalProps>) {
   const [isVisible, setIsVisible] = useState(false);
@@ -33,19 +54,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(() => {
@@ -60,12 +90,20 @@ export function Modal({ open, title, onClose, footer, width = 520, children }: P
     };
   }, []);
 
+  const shouldLockScroll = open || isVisible;
+
+  useEffect(() => {
+    if (!shouldLockScroll) return;
+    lockScroll();
+    return () => unlockScroll();
+  }, [shouldLockScroll]);
+
   if (!open && !isVisible) return null;
 
   const overlayClass = `modal-overlay ${isClosing ? 'modal-overlay-closing' : 'modal-overlay-entering'}`;
   const modalClass = `modal ${isClosing ? 'modal-closing' : 'modal-entering'}`;
 
-  return (
+  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">
@@ -79,4 +117,10 @@ export function Modal({ open, title, onClose, footer, width = 520, children }: P
       </div>
     </div>
   );
+
+  if (typeof document === 'undefined') {
+    return modalContent;
+  }
+
+  return createPortal(modalContent, document.body);
 }

src/components/ui/icons.tsx

@@ -314,3 +314,11 @@ export function IconLayoutDashboard({ size = 20, ...props }: IconProps) {
     </svg>
   );
 }
+
+export function IconActivity({ size = 20, ...props }: IconProps) {
+  return (
+    <svg {...baseSvgProps} width={size} height={size} {...props}>
+      <path d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2" />
+    </svg>
+  );
+}

src/components/usage/ApiDetailsCard.tsx

@@ -0,0 +1,79 @@
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Card } from '@/components/ui/Card';
+import { formatTokensInMillions, formatUsd, type ApiStats } from '@/utils/usage';
+import styles from '@/pages/UsagePage.module.scss';
+
+export interface ApiDetailsCardProps {
+  apiStats: ApiStats[];
+  loading: boolean;
+  hasPrices: boolean;
+}
+
+export function ApiDetailsCard({ apiStats, loading, hasPrices }: ApiDetailsCardProps) {
+  const { t } = useTranslation();
+  const [expandedApis, setExpandedApis] = useState<Set<string>>(new Set());
+
+  const toggleExpand = (endpoint: string) => {
+    setExpandedApis((prev) => {
+      const newSet = new Set(prev);
+      if (newSet.has(endpoint)) {
+        newSet.delete(endpoint);
+      } else {
+        newSet.add(endpoint);
+      }
+      return newSet;
+    });
+  };
+
+  return (
+    <Card title={t('usage_stats.api_details')}>
+      {loading ? (
+        <div className={styles.hint}>{t('common.loading')}</div>
+      ) : apiStats.length > 0 ? (
+        <div className={styles.apiList}>
+          {apiStats.map((api) => (
+            <div key={api.endpoint} className={styles.apiItem}>
+              <div className={styles.apiHeader} onClick={() => toggleExpand(api.endpoint)}>
+                <div className={styles.apiInfo}>
+                  <span className={styles.apiEndpoint}>{api.endpoint}</span>
+                  <div className={styles.apiStats}>
+                    <span className={styles.apiBadge}>
+                      {t('usage_stats.requests_count')}: {api.totalRequests}
+                    </span>
+                    <span className={styles.apiBadge}>
+                      Tokens: {formatTokensInMillions(api.totalTokens)}
+                    </span>
+                    {hasPrices && api.totalCost > 0 && (
+                      <span className={styles.apiBadge}>
+                        {t('usage_stats.total_cost')}: {formatUsd(api.totalCost)}
+                      </span>
+                    )}
+                  </div>
+                </div>
+                <span className={styles.expandIcon}>
+                  {expandedApis.has(api.endpoint) ? '▼' : '▶'}
+                </span>
+              </div>
+              {expandedApis.has(api.endpoint) && (
+                <div className={styles.apiModels}>
+                  {Object.entries(api.models).map(([model, stats]) => (
+                    <div key={model} className={styles.modelRow}>
+                      <span className={styles.modelName}>{model}</span>
+                      <span className={styles.modelStat}>
+                        {stats.requests} {t('usage_stats.requests_count')}
+                      </span>
+                      <span className={styles.modelStat}>{formatTokensInMillions(stats.tokens)}</span>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+      ) : (
+        <div className={styles.hint}>{t('usage_stats.no_data')}</div>
+      )}
+    </Card>
+  );
+}

src/components/usage/ChartLineSelector.tsx

@@ -0,0 +1,92 @@
+import { useTranslation } from 'react-i18next';
+import { Card } from '@/components/ui/Card';
+import { Button } from '@/components/ui/Button';
+import styles from '@/pages/UsagePage.module.scss';
+
+export interface ChartLineSelectorProps {
+  chartLines: string[];
+  modelNames: string[];
+  maxLines?: number;
+  onChange: (lines: string[]) => void;
+}
+
+export function ChartLineSelector({
+  chartLines,
+  modelNames,
+  maxLines = 9,
+  onChange
+}: ChartLineSelectorProps) {
+  const { t } = useTranslation();
+
+  const handleAdd = () => {
+    if (chartLines.length >= maxLines) return;
+    const unusedModel = modelNames.find((m) => !chartLines.includes(m));
+    if (unusedModel) {
+      onChange([...chartLines, unusedModel]);
+    } else {
+      onChange([...chartLines, 'all']);
+    }
+  };
+
+  const handleRemove = (index: number) => {
+    if (chartLines.length <= 1) return;
+    const newLines = [...chartLines];
+    newLines.splice(index, 1);
+    onChange(newLines);
+  };
+
+  const handleChange = (index: number, value: string) => {
+    const newLines = [...chartLines];
+    newLines[index] = value;
+    onChange(newLines);
+  };
+
+  return (
+    <Card
+      title={t('usage_stats.chart_line_actions_label')}
+      extra={
+        <div className={styles.chartLineHeader}>
+          <span className={styles.chartLineCount}>
+            {chartLines.length}/{maxLines}
+          </span>
+          <Button
+            variant="secondary"
+            size="sm"
+            onClick={handleAdd}
+            disabled={chartLines.length >= maxLines}
+          >
+            {t('usage_stats.chart_line_add')}
+          </Button>
+        </div>
+      }
+    >
+      <div className={styles.chartLineList}>
+        {chartLines.map((line, index) => (
+          <div key={index} className={styles.chartLineItem}>
+            <span className={styles.chartLineLabel}>
+              {t(`usage_stats.chart_line_label_${index + 1}`)}
+            </span>
+            <select
+              value={line}
+              onChange={(e) => handleChange(index, e.target.value)}
+              className={styles.select}
+            >
+              <option value="all">{t('usage_stats.chart_line_all')}</option>
+              {modelNames.map((name) => (
+                <option key={name} value={name}>
+                  {name}
+                </option>
+              ))}
+            </select>
+            {chartLines.length > 1 && (
+              <Button variant="danger" size="sm" onClick={() => handleRemove(index)}>
+                {t('usage_stats.chart_line_delete')}
+              </Button>
+            )}
+          </div>
+        ))}
+      </div>
+      <p className={styles.chartLineHint}>{t('usage_stats.chart_line_hint')}</p>
+    </Card>
+  );
+}

src/components/usage/ModelStatsCard.tsx

@@ -0,0 +1,54 @@
+import { useTranslation } from 'react-i18next';
+import { Card } from '@/components/ui/Card';
+import { formatTokensInMillions, formatUsd } from '@/utils/usage';
+import styles from '@/pages/UsagePage.module.scss';
+
+export interface ModelStat {
+  model: string;
+  requests: number;
+  tokens: number;
+  cost: number;
+}
+
+export interface ModelStatsCardProps {
+  modelStats: ModelStat[];
+  loading: boolean;
+  hasPrices: boolean;
+}
+
+export function ModelStatsCard({ modelStats, loading, hasPrices }: ModelStatsCardProps) {
+  const { t } = useTranslation();
+
+  return (
+    <Card title={t('usage_stats.models')}>
+      {loading ? (
+        <div className={styles.hint}>{t('common.loading')}</div>
+      ) : modelStats.length > 0 ? (
+        <div className={styles.tableWrapper}>
+          <table className={styles.table}>
+            <thead>
+              <tr>
+                <th>{t('usage_stats.model_name')}</th>
+                <th>{t('usage_stats.requests_count')}</th>
+                <th>{t('usage_stats.tokens_count')}</th>
+                {hasPrices && <th>{t('usage_stats.total_cost')}</th>}
+              </tr>
+            </thead>
+            <tbody>
+              {modelStats.map((stat) => (
+                <tr key={stat.model}>
+                  <td className={styles.modelCell}>{stat.model}</td>
+                  <td>{stat.requests.toLocaleString()}</td>
+                  <td>{formatTokensInMillions(stat.tokens)}</td>
+                  {hasPrices && <td>{stat.cost > 0 ? formatUsd(stat.cost) : '--'}</td>}
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      ) : (
+        <div className={styles.hint}>{t('usage_stats.no_data')}</div>
+      )}
+    </Card>
+  );
+}

src/components/usage/PriceSettingsCard.tsx

@@ -0,0 +1,164 @@
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Card } from '@/components/ui/Card';
+import { Button } from '@/components/ui/Button';
+import { Input } from '@/components/ui/Input';
+import type { ModelPrice } from '@/utils/usage';
+import styles from '@/pages/UsagePage.module.scss';
+
+export interface PriceSettingsCardProps {
+  modelNames: string[];
+  modelPrices: Record<string, ModelPrice>;
+  onPricesChange: (prices: Record<string, ModelPrice>) => void;
+}
+
+export function PriceSettingsCard({
+  modelNames,
+  modelPrices,
+  onPricesChange
+}: PriceSettingsCardProps) {
+  const { t } = useTranslation();
+
+  const [selectedModel, setSelectedModel] = useState('');
+  const [promptPrice, setPromptPrice] = useState('');
+  const [completionPrice, setCompletionPrice] = useState('');
+  const [cachePrice, setCachePrice] = useState('');
+
+  const handleSavePrice = () => {
+    if (!selectedModel) return;
+    const prompt = parseFloat(promptPrice) || 0;
+    const completion = parseFloat(completionPrice) || 0;
+    const cache = cachePrice.trim() === '' ? prompt : parseFloat(cachePrice) || 0;
+    const newPrices = { ...modelPrices, [selectedModel]: { prompt, completion, cache } };
+    onPricesChange(newPrices);
+    setSelectedModel('');
+    setPromptPrice('');
+    setCompletionPrice('');
+    setCachePrice('');
+  };
+
+  const handleDeletePrice = (model: string) => {
+    const newPrices = { ...modelPrices };
+    delete newPrices[model];
+    onPricesChange(newPrices);
+  };
+
+  const handleEditPrice = (model: string) => {
+    const price = modelPrices[model];
+    setSelectedModel(model);
+    setPromptPrice(price?.prompt?.toString() || '');
+    setCompletionPrice(price?.completion?.toString() || '');
+    setCachePrice(price?.cache?.toString() || '');
+  };
+
+  const handleModelSelect = (value: string) => {
+    setSelectedModel(value);
+    const price = modelPrices[value];
+    if (price) {
+      setPromptPrice(price.prompt.toString());
+      setCompletionPrice(price.completion.toString());
+      setCachePrice(price.cache.toString());
+    } else {
+      setPromptPrice('');
+      setCompletionPrice('');
+      setCachePrice('');
+    }
+  };
+
+  return (
+    <Card title={t('usage_stats.model_price_settings')}>
+      <div className={styles.pricingSection}>
+        {/* Price Form */}
+        <div className={styles.priceForm}>
+          <div className={styles.formRow}>
+            <div className={styles.formField}>
+              <label>{t('usage_stats.model_name')}</label>
+              <select
+                value={selectedModel}
+                onChange={(e) => handleModelSelect(e.target.value)}
+                className={styles.select}
+              >
+                <option value="">{t('usage_stats.model_price_select_placeholder')}</option>
+                {modelNames.map((name) => (
+                  <option key={name} value={name}>
+                    {name}
+                  </option>
+                ))}
+              </select>
+            </div>
+            <div className={styles.formField}>
+              <label>{t('usage_stats.model_price_prompt')} ($/1M)</label>
+              <Input
+                type="number"
+                value={promptPrice}
+                onChange={(e) => setPromptPrice(e.target.value)}
+                placeholder="0.00"
+                step="0.0001"
+              />
+            </div>
+            <div className={styles.formField}>
+              <label>{t('usage_stats.model_price_completion')} ($/1M)</label>
+              <Input
+                type="number"
+                value={completionPrice}
+                onChange={(e) => setCompletionPrice(e.target.value)}
+                placeholder="0.00"
+                step="0.0001"
+              />
+            </div>
+            <div className={styles.formField}>
+              <label>{t('usage_stats.model_price_cache')} ($/1M)</label>
+              <Input
+                type="number"
+                value={cachePrice}
+                onChange={(e) => setCachePrice(e.target.value)}
+                placeholder="0.00"
+                step="0.0001"
+              />
+            </div>
+            <Button variant="primary" onClick={handleSavePrice} disabled={!selectedModel}>
+              {t('common.save')}
+            </Button>
+          </div>
+        </div>
+
+        {/* Saved Prices List */}
+        <div className={styles.pricesList}>
+          <h4 className={styles.pricesTitle}>{t('usage_stats.saved_prices')}</h4>
+          {Object.keys(modelPrices).length > 0 ? (
+            <div className={styles.pricesGrid}>
+              {Object.entries(modelPrices).map(([model, price]) => (
+                <div key={model} className={styles.priceItem}>
+                  <div className={styles.priceInfo}>
+                    <span className={styles.priceModel}>{model}</span>
+                    <div className={styles.priceMeta}>
+                      <span>
+                        {t('usage_stats.model_price_prompt')}: ${price.prompt.toFixed(4)}/1M
+                      </span>
+                      <span>
+                        {t('usage_stats.model_price_completion')}: ${price.completion.toFixed(4)}/1M
+                      </span>
+                      <span>
+                        {t('usage_stats.model_price_cache')}: ${price.cache.toFixed(4)}/1M
+                      </span>
+                    </div>
+                  </div>
+                  <div className={styles.priceActions}>
+                    <Button variant="secondary" size="sm" onClick={() => handleEditPrice(model)}>
+                      {t('common.edit')}
+                    </Button>
+                    <Button variant="danger" size="sm" onClick={() => handleDeletePrice(model)}>
+                      {t('common.delete')}
+                    </Button>
+                  </div>
+                </div>
+              ))}
+            </div>
+          ) : (
+            <div className={styles.hint}>{t('usage_stats.model_price_empty')}</div>
+          )}
+        </div>
+      </div>
+    </Card>
+  );
+}

src/components/usage/StatCards.tsx

@@ -0,0 +1,184 @@
+import type { CSSProperties, ReactNode } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Line } from 'react-chartjs-2';
+import { IconDiamond, IconDollarSign, IconSatellite, IconTimer, IconTrendingUp } from '@/components/ui/icons';
+import {
+  formatTokensInMillions,
+  formatPerMinuteValue,
+  formatUsd,
+  calculateTokenBreakdown,
+  calculateRecentPerMinuteRates,
+  calculateTotalCost,
+  type ModelPrice
+} from '@/utils/usage';
+import { sparklineOptions } from '@/utils/usage/chartConfig';
+import type { UsagePayload } from './hooks/useUsageData';
+import type { SparklineBundle } from './hooks/useSparklines';
+import styles from '@/pages/UsagePage.module.scss';
+
+interface StatCardData {
+  key: string;
+  label: string;
+  icon: ReactNode;
+  accent: string;
+  accentSoft: string;
+  accentBorder: string;
+  value: string;
+  meta?: ReactNode;
+  trend: SparklineBundle | null;
+}
+
+export interface StatCardsProps {
+  usage: UsagePayload | null;
+  loading: boolean;
+  modelPrices: Record<string, ModelPrice>;
+  sparklines: {
+    requests: SparklineBundle | null;
+    tokens: SparklineBundle | null;
+    rpm: SparklineBundle | null;
+    tpm: SparklineBundle | null;
+    cost: SparklineBundle | null;
+  };
+}
+
+export function StatCards({ usage, loading, modelPrices, sparklines }: StatCardsProps) {
+  const { t } = useTranslation();
+
+  const tokenBreakdown = usage ? calculateTokenBreakdown(usage) : { cachedTokens: 0, reasoningTokens: 0 };
+  const rateStats = usage
+    ? calculateRecentPerMinuteRates(30, usage)
+    : { rpm: 0, tpm: 0, windowMinutes: 30, requestCount: 0, tokenCount: 0 };
+  const totalCost = usage ? calculateTotalCost(usage, modelPrices) : 0;
+  const hasPrices = Object.keys(modelPrices).length > 0;
+
+  const statsCards: StatCardData[] = [
+    {
+      key: 'requests',
+      label: t('usage_stats.total_requests'),
+      icon: <IconSatellite size={16} />,
+      accent: '#3b82f6',
+      accentSoft: 'rgba(59, 130, 246, 0.18)',
+      accentBorder: 'rgba(59, 130, 246, 0.35)',
+      value: loading ? '-' : (usage?.total_requests ?? 0).toLocaleString(),
+      meta: (
+        <>
+          <span className={styles.statMetaItem}>
+            <span className={styles.statMetaDot} style={{ backgroundColor: '#10b981' }} />
+            {t('usage_stats.success_requests')}: {loading ? '-' : (usage?.success_count ?? 0)}
+          </span>
+          <span className={styles.statMetaItem}>
+            <span className={styles.statMetaDot} style={{ backgroundColor: '#ef4444' }} />
+            {t('usage_stats.failed_requests')}: {loading ? '-' : (usage?.failure_count ?? 0)}
+          </span>
+        </>
+      ),
+      trend: sparklines.requests
+    },
+    {
+      key: 'tokens',
+      label: t('usage_stats.total_tokens'),
+      icon: <IconDiamond size={16} />,
+      accent: '#8b5cf6',
+      accentSoft: 'rgba(139, 92, 246, 0.18)',
+      accentBorder: 'rgba(139, 92, 246, 0.35)',
+      value: loading ? '-' : formatTokensInMillions(usage?.total_tokens ?? 0),
+      meta: (
+        <>
+          <span className={styles.statMetaItem}>
+            {t('usage_stats.cached_tokens')}: {loading ? '-' : formatTokensInMillions(tokenBreakdown.cachedTokens)}
+          </span>
+          <span className={styles.statMetaItem}>
+            {t('usage_stats.reasoning_tokens')}: {loading ? '-' : formatTokensInMillions(tokenBreakdown.reasoningTokens)}
+          </span>
+        </>
+      ),
+      trend: sparklines.tokens
+    },
+    {
+      key: 'rpm',
+      label: t('usage_stats.rpm_30m'),
+      icon: <IconTimer size={16} />,
+      accent: '#22c55e',
+      accentSoft: 'rgba(34, 197, 94, 0.18)',
+      accentBorder: 'rgba(34, 197, 94, 0.32)',
+      value: loading ? '-' : formatPerMinuteValue(rateStats.rpm),
+      meta: (
+        <span className={styles.statMetaItem}>
+          {t('usage_stats.total_requests')}: {loading ? '-' : rateStats.requestCount.toLocaleString()}
+        </span>
+      ),
+      trend: sparklines.rpm
+    },
+    {
+      key: 'tpm',
+      label: t('usage_stats.tpm_30m'),
+      icon: <IconTrendingUp size={16} />,
+      accent: '#f97316',
+      accentSoft: 'rgba(249, 115, 22, 0.18)',
+      accentBorder: 'rgba(249, 115, 22, 0.32)',
+      value: loading ? '-' : formatPerMinuteValue(rateStats.tpm),
+      meta: (
+        <span className={styles.statMetaItem}>
+          {t('usage_stats.total_tokens')}: {loading ? '-' : formatTokensInMillions(rateStats.tokenCount)}
+        </span>
+      ),
+      trend: sparklines.tpm
+    },
+    {
+      key: 'cost',
+      label: t('usage_stats.total_cost'),
+      icon: <IconDollarSign size={16} />,
+      accent: '#f59e0b',
+      accentSoft: 'rgba(245, 158, 11, 0.18)',
+      accentBorder: 'rgba(245, 158, 11, 0.32)',
+      value: loading ? '-' : hasPrices ? formatUsd(totalCost) : '--',
+      meta: (
+        <>
+          <span className={styles.statMetaItem}>
+            {t('usage_stats.total_tokens')}: {loading ? '-' : formatTokensInMillions(usage?.total_tokens ?? 0)}
+          </span>
+          {!hasPrices && (
+            <span className={`${styles.statMetaItem} ${styles.statSubtle}`}>
+              {t('usage_stats.cost_need_price')}
+            </span>
+          )}
+        </>
+      ),
+      trend: hasPrices ? sparklines.cost : null
+    }
+  ];
+
+  return (
+    <div className={styles.statsGrid}>
+      {statsCards.map((card) => (
+        <div
+          key={card.key}
+          className={styles.statCard}
+          style={
+            {
+              '--accent': card.accent,
+              '--accent-soft': card.accentSoft,
+              '--accent-border': card.accentBorder
+            } as CSSProperties
+          }
+        >
+          <div className={styles.statCardHeader}>
+            <div className={styles.statLabelGroup}>
+              <span className={styles.statLabel}>{card.label}</span>
+            </div>
+            <span className={styles.statIconBadge}>{card.icon}</span>
+          </div>
+          <div className={styles.statValue}>{card.value}</div>
+          {card.meta && <div className={styles.statMetaRow}>{card.meta}</div>}
+          <div className={styles.statTrend}>
+            {card.trend ? (
+              <Line className={styles.sparkline} data={card.trend.data} options={sparklineOptions} />
+            ) : (
+              <div className={styles.statTrendPlaceholder}></div>
+            )}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}

src/components/usage/UsageChart.tsx

@@ -0,0 +1,91 @@
+import { useTranslation } from 'react-i18next';
+import type { ChartOptions } from 'chart.js';
+import { Line } from 'react-chartjs-2';
+import { Card } from '@/components/ui/Card';
+import { Button } from '@/components/ui/Button';
+import type { ChartData } from '@/utils/usage';
+import { getHourChartMinWidth } from '@/utils/usage/chartConfig';
+import styles from '@/pages/UsagePage.module.scss';
+
+export interface UsageChartProps {
+  title: string;
+  period: 'hour' | 'day';
+  onPeriodChange: (period: 'hour' | 'day') => void;
+  chartData: ChartData;
+  chartOptions: ChartOptions<'line'>;
+  loading: boolean;
+  isMobile: boolean;
+  emptyText: string;
+}
+
+export function UsageChart({
+  title,
+  period,
+  onPeriodChange,
+  chartData,
+  chartOptions,
+  loading,
+  isMobile,
+  emptyText
+}: UsageChartProps) {
+  const { t } = useTranslation();
+
+  return (
+    <Card
+      title={title}
+      extra={
+        <div className={styles.periodButtons}>
+          <Button
+            variant={period === 'hour' ? 'primary' : 'secondary'}
+            size="sm"
+            onClick={() => onPeriodChange('hour')}
+          >
+            {t('usage_stats.by_hour')}
+          </Button>
+          <Button
+            variant={period === 'day' ? 'primary' : 'secondary'}
+            size="sm"
+            onClick={() => onPeriodChange('day')}
+          >
+            {t('usage_stats.by_day')}
+          </Button>
+        </div>
+      }
+    >
+      {loading ? (
+        <div className={styles.hint}>{t('common.loading')}</div>
+      ) : chartData.labels.length > 0 ? (
+        <div className={styles.chartWrapper}>
+          <div className={styles.chartLegend} aria-label="Chart legend">
+            {chartData.datasets.map((dataset, index) => (
+              <div
+                key={`${dataset.label}-${index}`}
+                className={styles.legendItem}
+                title={dataset.label}
+              >
+                <span className={styles.legendDot} style={{ backgroundColor: dataset.borderColor }} />
+                <span className={styles.legendLabel}>{dataset.label}</span>
+              </div>
+            ))}
+          </div>
+          <div className={styles.chartArea}>
+            <div className={styles.chartScroller}>
+              <div
+                className={styles.chartCanvas}
+                style={
+                  period === 'hour'
+                    ? { minWidth: getHourChartMinWidth(chartData.labels.length, isMobile) }
+                    : undefined
+                }
+              >
+                <Line data={chartData} options={chartOptions} />
+              </div>
+            </div>
+          </div>
+        </div>
+      ) : (
+        <div className={styles.hint}>{emptyText}</div>
+      )}
+    </Card>
+  );
+}

src/components/usage/hooks/index.ts

@@ -0,0 +1,8 @@
+export { useUsageData } from './useUsageData';
+export type { UsagePayload, UseUsageDataReturn } from './useUsageData';
+
+export { useSparklines } from './useSparklines';
+export type { SparklineData, SparklineBundle, UseSparklinesOptions, UseSparklinesReturn } from './useSparklines';
+
+export { useChartData } from './useChartData';
+export type { UseChartDataOptions, UseChartDataReturn } from './useChartData';

src/components/usage/hooks/useChartData.ts

@@ -0,0 +1,76 @@
+import { useState, useMemo } from 'react';
+import type { ChartOptions } from 'chart.js';
+import { buildChartData, type ChartData } from '@/utils/usage';
+import { buildChartOptions } from '@/utils/usage/chartConfig';
+import type { UsagePayload } from './useUsageData';
+
+export interface UseChartDataOptions {
+  usage: UsagePayload | null;
+  chartLines: string[];
+  isDark: boolean;
+  isMobile: boolean;
+}
+
+export interface UseChartDataReturn {
+  requestsPeriod: 'hour' | 'day';
+  setRequestsPeriod: (period: 'hour' | 'day') => void;
+  tokensPeriod: 'hour' | 'day';
+  setTokensPeriod: (period: 'hour' | 'day') => void;
+  requestsChartData: ChartData;
+  tokensChartData: ChartData;
+  requestsChartOptions: ChartOptions<'line'>;
+  tokensChartOptions: ChartOptions<'line'>;
+}
+
+export function useChartData({
+  usage,
+  chartLines,
+  isDark,
+  isMobile
+}: UseChartDataOptions): UseChartDataReturn {
+  const [requestsPeriod, setRequestsPeriod] = useState<'hour' | 'day'>('day');
+  const [tokensPeriod, setTokensPeriod] = useState<'hour' | 'day'>('day');
+
+  const requestsChartData = useMemo(() => {
+    if (!usage) return { labels: [], datasets: [] };
+    return buildChartData(usage, requestsPeriod, 'requests', chartLines);
+  }, [usage, requestsPeriod, chartLines]);
+
+  const tokensChartData = useMemo(() => {
+    if (!usage) return { labels: [], datasets: [] };
+    return buildChartData(usage, tokensPeriod, 'tokens', chartLines);
+  }, [usage, tokensPeriod, chartLines]);
+
+  const requestsChartOptions = useMemo(
+    () =>
+      buildChartOptions({
+        period: requestsPeriod,
+        labels: requestsChartData.labels,
+        isDark,
+        isMobile
+      }),
+    [requestsPeriod, requestsChartData.labels, isDark, isMobile]
+  );
+
+  const tokensChartOptions = useMemo(
+    () =>
+      buildChartOptions({
+        period: tokensPeriod,
+        labels: tokensChartData.labels,
+        isDark,
+        isMobile
+      }),
+    [tokensPeriod, tokensChartData.labels, isDark, isMobile]
+  );
+
+  return {
+    requestsPeriod,
+    setRequestsPeriod,
+    tokensPeriod,
+    setTokensPeriod,
+    requestsChartData,
+    tokensChartData,
+    requestsChartOptions,
+    tokensChartOptions
+  };
+}

src/components/usage/hooks/useSparklines.ts

@@ -0,0 +1,138 @@
+import { useCallback, useMemo } from 'react';
+import { collectUsageDetails, extractTotalTokens } from '@/utils/usage';
+import type { UsagePayload } from './useUsageData';
+
+export interface SparklineData {
+  labels: string[];
+  datasets: [
+    {
+      data: number[];
+      borderColor: string;
+      backgroundColor: string;
+      fill: boolean;
+      tension: number;
+      pointRadius: number;
+      borderWidth: number;
+    }
+  ];
+}
+
+export interface SparklineBundle {
+  data: SparklineData;
+}
+
+export interface UseSparklinesOptions {
+  usage: UsagePayload | null;
+  loading: boolean;
+}
+
+export interface UseSparklinesReturn {
+  requestsSparkline: SparklineBundle | null;
+  tokensSparkline: SparklineBundle | null;
+  rpmSparkline: SparklineBundle | null;
+  tpmSparkline: SparklineBundle | null;
+  costSparkline: SparklineBundle | null;
+}
+
+export function useSparklines({ usage, loading }: UseSparklinesOptions): UseSparklinesReturn {
+  const buildLastHourSeries = useCallback(
+    (metric: 'requests' | 'tokens'): { labels: string[]; data: number[] } => {
+      if (!usage) return { labels: [], data: [] };
+      const details = collectUsageDetails(usage);
+      if (!details.length) return { labels: [], data: [] };
+
+      const windowMinutes = 60;
+      const now = Date.now();
+      const windowStart = now - windowMinutes * 60 * 1000;
+      const buckets = new Array(windowMinutes).fill(0);
+
+      details.forEach((detail) => {
+        const timestamp = Date.parse(detail.timestamp);
+        if (Number.isNaN(timestamp) || timestamp < windowStart) {
+          return;
+        }
+        const minuteIndex = Math.min(
+          windowMinutes - 1,
+          Math.floor((timestamp - windowStart) / 60000)
+        );
+        const increment = metric === 'tokens' ? extractTotalTokens(detail) : 1;
+        buckets[minuteIndex] += increment;
+      });
+
+      const labels = buckets.map((_, idx) => {
+        const date = new Date(windowStart + (idx + 1) * 60000);
+        const h = date.getHours().toString().padStart(2, '0');
+        const m = date.getMinutes().toString().padStart(2, '0');
+        return `${h}:${m}`;
+      });
+
+      return { labels, data: buckets };
+    },
+    [usage]
+  );
+
+  const buildSparkline = useCallback(
+    (
+      series: { labels: string[]; data: number[] },
+      color: string,
+      backgroundColor: string
+    ): SparklineBundle | null => {
+      if (loading || !series?.data?.length) {
+        return null;
+      }
+      const sliceStart = Math.max(series.data.length - 60, 0);
+      const labels = series.labels.slice(sliceStart);
+      const points = series.data.slice(sliceStart);
+      return {
+        data: {
+          labels,
+          datasets: [
+            {
+              data: points,
+              borderColor: color,
+              backgroundColor,
+              fill: true,
+              tension: 0.45,
+              pointRadius: 0,
+              borderWidth: 2
+            }
+          ]
+        }
+      };
+    },
+    [loading]
+  );
+
+  const requestsSparkline = useMemo(
+    () => buildSparkline(buildLastHourSeries('requests'), '#3b82f6', 'rgba(59, 130, 246, 0.18)'),
+    [buildLastHourSeries, buildSparkline]
+  );
+
+  const tokensSparkline = useMemo(
+    () => buildSparkline(buildLastHourSeries('tokens'), '#8b5cf6', 'rgba(139, 92, 246, 0.18)'),
+    [buildLastHourSeries, buildSparkline]
+  );
+
+  const rpmSparkline = useMemo(
+    () => buildSparkline(buildLastHourSeries('requests'), '#22c55e', 'rgba(34, 197, 94, 0.18)'),
+    [buildLastHourSeries, buildSparkline]
+  );
+
+  const tpmSparkline = useMemo(
+    () => buildSparkline(buildLastHourSeries('tokens'), '#f97316', 'rgba(249, 115, 22, 0.18)'),
+    [buildLastHourSeries, buildSparkline]
+  );
+
+  const costSparkline = useMemo(
+    () => buildSparkline(buildLastHourSeries('tokens'), '#f59e0b', 'rgba(245, 158, 11, 0.18)'),
+    [buildLastHourSeries, buildSparkline]
+  );
+
+  return {
+    requestsSparkline,
+    tokensSparkline,
+    rpmSparkline,
+    tpmSparkline,
+    costSparkline
+  };
+}

src/components/usage/hooks/useUsageData.ts

@@ -0,0 +1,153 @@
+import { useEffect, useState, useCallback, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useNotificationStore } from '@/stores';
+import { usageApi } from '@/services/api/usage';
+import { loadModelPrices, saveModelPrices, type ModelPrice } from '@/utils/usage';
+
+export interface UsagePayload {
+  total_requests?: number;
+  success_count?: number;
+  failure_count?: number;
+  total_tokens?: number;
+  apis?: Record<string, unknown>;
+  [key: string]: unknown;
+}
+
+export interface UseUsageDataReturn {
+  usage: UsagePayload | null;
+  loading: boolean;
+  error: string;
+  modelPrices: Record<string, ModelPrice>;
+  setModelPrices: (prices: Record<string, ModelPrice>) => void;
+  loadUsage: () => Promise<void>;
+  handleExport: () => Promise<void>;
+  handleImport: () => void;
+  handleImportChange: (event: React.ChangeEvent<HTMLInputElement>) => Promise<void>;
+  importInputRef: React.RefObject<HTMLInputElement | null>;
+  exporting: boolean;
+  importing: boolean;
+}
+
+export function useUsageData(): UseUsageDataReturn {
+  const { t } = useTranslation();
+  const { showNotification } = useNotificationStore();
+
+  const [usage, setUsage] = useState<UsagePayload | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState('');
+  const [modelPrices, setModelPrices] = useState<Record<string, ModelPrice>>({});
+  const [exporting, setExporting] = useState(false);
+  const [importing, setImporting] = useState(false);
+  const importInputRef = useRef<HTMLInputElement | null>(null);
+
+  const loadUsage = useCallback(async () => {
+    setLoading(true);
+    setError('');
+    try {
+      const data = await usageApi.getUsage();
+      const payload = data?.usage ?? data;
+      setUsage(payload);
+    } catch (err: unknown) {
+      const message = err instanceof Error ? err.message : t('usage_stats.loading_error');
+      setError(message);
+    } finally {
+      setLoading(false);
+    }
+  }, [t]);
+
+  useEffect(() => {
+    loadUsage();
+    setModelPrices(loadModelPrices());
+  }, [loadUsage]);
+
+  const handleExport = async () => {
+    setExporting(true);
+    try {
+      const data = await usageApi.exportUsage();
+      const exportedAt =
+        typeof data?.exported_at === 'string' ? new Date(data.exported_at) : new Date();
+      const safeTimestamp = Number.isNaN(exportedAt.getTime())
+        ? new Date().toISOString()
+        : exportedAt.toISOString();
+      const filename = `usage-export-${safeTimestamp.replace(/[:.]/g, '-')}.json`;
+      const blob = new Blob([JSON.stringify(data ?? {}, null, 2)], { type: 'application/json' });
+      const url = window.URL.createObjectURL(blob);
+      const link = document.createElement('a');
+      link.href = url;
+      link.download = filename;
+      link.click();
+      window.URL.revokeObjectURL(url);
+      showNotification(t('usage_stats.export_success'), 'success');
+    } catch (err: unknown) {
+      const message = err instanceof Error ? err.message : '';
+      showNotification(
+        `${t('notification.download_failed')}${message ? `: ${message}` : ''}`,
+        'error'
+      );
+    } finally {
+      setExporting(false);
+    }
+  };
+
+  const handleImport = () => {
+    importInputRef.current?.click();
+  };
+
+  const handleImportChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    event.target.value = '';
+    if (!file) return;
+
+    setImporting(true);
+    try {
+      const text = await file.text();
+      let payload: unknown;
+      try {
+        payload = JSON.parse(text);
+      } catch {
+        showNotification(t('usage_stats.import_invalid'), 'error');
+        return;
+      }
+
+      const result = await usageApi.importUsage(payload);
+      showNotification(
+        t('usage_stats.import_success', {
+          added: result?.added ?? 0,
+          skipped: result?.skipped ?? 0,
+          total: result?.total_requests ?? 0,
+          failed: result?.failed_requests ?? 0
+        }),
+        'success'
+      );
+      await loadUsage();
+    } catch (err: unknown) {
+      const message = err instanceof Error ? err.message : '';
+      showNotification(
+        `${t('notification.upload_failed')}${message ? `: ${message}` : ''}`,
+        'error'
+      );
+    } finally {
+      setImporting(false);
+    }
+  };
+
+  const handleSetModelPrices = useCallback((prices: Record<string, ModelPrice>) => {
+    setModelPrices(prices);
+    saveModelPrices(prices);
+  }, []);
+
+  return {
+    usage,
+    loading,
+    error,
+    modelPrices,
+    setModelPrices: handleSetModelPrices,
+    loadUsage,
+    handleExport,
+    handleImport,
+    handleImportChange,
+    importInputRef,
+    exporting,
+    importing
+  };
+}

src/components/usage/index.ts

@@ -0,0 +1,28 @@
+// Hooks
+export { useUsageData } from './hooks/useUsageData';
+export type { UsagePayload, UseUsageDataReturn } from './hooks/useUsageData';
+
+export { useSparklines } from './hooks/useSparklines';
+export type { SparklineData, SparklineBundle, UseSparklinesOptions, UseSparklinesReturn } from './hooks/useSparklines';
+
+export { useChartData } from './hooks/useChartData';
+export type { UseChartDataOptions, UseChartDataReturn } from './hooks/useChartData';
+
+// Components
+export { StatCards } from './StatCards';
+export type { StatCardsProps } from './StatCards';
+
+export { UsageChart } from './UsageChart';
+export type { UsageChartProps } from './UsageChart';
+
+export { ChartLineSelector } from './ChartLineSelector';
+export type { ChartLineSelectorProps } from './ChartLineSelector';
+
+export { ApiDetailsCard } from './ApiDetailsCard';
+export type { ApiDetailsCardProps } from './ApiDetailsCard';
+
+export { ModelStatsCard } from './ModelStatsCard';
+export type { ModelStatsCardProps, ModelStat } from './ModelStatsCard';
+
+export { PriceSettingsCard } from './PriceSettingsCard';
+export type { PriceSettingsCardProps } from './PriceSettingsCard';

src/hooks/index.ts

@@ -8,3 +8,6 @@ export { useLocalStorage } from './useLocalStorage';
 export { useInterval } from './useInterval';
 export { useMediaQuery } from './useMediaQuery';
 export { usePagination } from './usePagination';
+export { useHeaderRefresh } from './useHeaderRefresh';
+export { useDisableModel } from './useDisableModel';
+export type { UseDisableModelOptions, UseDisableModelReturn } from './useDisableModel';

src/hooks/useDisableModel.ts

@@ -0,0 +1,199 @@
+/**
+ * 禁用模型 Hook
+ * 封装禁用模型的状态管理和业务逻辑
+ */
+
+import { useState, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { providersApi } from '@/services/api';
+import { useDisabledModelsStore } from '@/stores';
+import {
+  resolveProvider,
+  createDisableState,
+  type DisableState,
+} from '@/utils/monitor';
+import type { OpenAIProviderConfig } from '@/types';
+
+// 不支持禁用的渠道类型（小写）
+const UNSUPPORTED_PROVIDER_TYPES = ['claude', 'gemini', 'codex', 'vertex'];
+
+/**
+ * 不支持禁用的提示状态
+ */
+export interface UnsupportedDisableState {
+  providerType: string;
+  model: string;
+  displayName: string;
+}
+
+export interface UseDisableModelOptions {
+  providerMap: Record<string, string>;
+  providerTypeMap?: Record<string, string>;
+  providerModels?: Record<string, Set<string>>;
+}
+
+export interface UseDisableModelReturn {
+  /** 当前禁用状态 */
+  disableState: DisableState | null;
+  /** 不支持禁用的提示状态 */
+  unsupportedState: UnsupportedDisableState | null;
+  /** 是否正在禁用中 */
+  disabling: boolean;
+  /** 开始禁用流程 */
+  handleDisableClick: (source: string, model: string) => void;
+  /** 确认禁用（需要点击3次） */
+  handleConfirmDisable: () => Promise<void>;
+  /** 取消禁用 */
+  handleCancelDisable: () => void;
+  /** 关闭不支持提示 */
+  handleCloseUnsupported: () => void;
+  /** 检查模型是否已禁用 */
+  isModelDisabled: (source: string, model: string) => boolean;
+}
+
+/**
+ * 禁用模型 Hook
+ * @param options 配置选项
+ * @returns 禁用模型相关的状态和方法
+ */
+export function useDisableModel(options: UseDisableModelOptions): UseDisableModelReturn {
+  const { providerMap, providerTypeMap, providerModels } = options;
+  const { t } = useTranslation();
+
+  // 使用全局 store 管理禁用状态
+  const { addDisabledModel, isDisabled } = useDisabledModelsStore();
+
+  const [disableState, setDisableState] = useState<DisableState | null>(null);
+  const [unsupportedState, setUnsupportedState] = useState<UnsupportedDisableState | null>(null);
+  const [disabling, setDisabling] = useState(false);
+
+  // 开始禁用流程
+  const handleDisableClick = useCallback((source: string, model: string) => {
+    // 首先检查提供商类型是否支持禁用
+    const providerType = providerTypeMap?.[source] || '';
+    const lowerType = providerType.toLowerCase();
+
+    // 如果是不支持的类型，立即显示提示
+    if (lowerType && UNSUPPORTED_PROVIDER_TYPES.includes(lowerType)) {
+      const providerName = resolveProvider(source, providerMap);
+      const displayName = providerName
+        ? `${providerName} / ${model}`
+        : `${source.slice(0, 8)}*** / ${model}`;
+      setUnsupportedState({
+        providerType,
+        model,
+        displayName,
+      });
+      return;
+    }
+
+    // 支持的类型，进入正常禁用流程
+    setDisableState(createDisableState(source, model, providerMap));
+  }, [providerMap, providerTypeMap]);
+
+  // 确认禁用（需要点击3次）
+  const handleConfirmDisable = useCallback(async () => {
+    if (!disableState) return;
+
+    // 前两次点击只增加步骤
+    if (disableState.step < 3) {
+      setDisableState({
+        ...disableState,
+        step: disableState.step + 1,
+      });
+      return;
+    }
+
+    // 第3次点击，执行禁用
+    setDisabling(true);
+    try {
+      const providerName = resolveProvider(disableState.source, providerMap);
+      if (!providerName) {
+        throw new Error(t('monitor.logs.disable_error_no_provider'));
+      }
+
+      // 获取当前配置
+      const providers = await providersApi.getOpenAIProviders();
+      const targetProvider = providers.find(
+        (p) => p.name && p.name.toLowerCase() === providerName.toLowerCase()
+      );
+
+      if (!targetProvider) {
+        throw new Error(t('monitor.logs.disable_error_provider_not_found', { provider: providerName }));
+      }
+
+      const originalModels = targetProvider.models || [];
+      const modelAlias = disableState.model;
+
+      // 过滤掉匹配的模型
+      const filteredModels = originalModels.filter(
+        (m) => m.alias !== modelAlias && m.name !== modelAlias
+      );
+
+      // 只有当模型确实被过滤掉时才调用 API
+      if (filteredModels.length < originalModels.length) {
+        await providersApi.patchOpenAIProviderByName(targetProvider.name, {
+          models: filteredModels,
+        } as Partial<OpenAIProviderConfig>);
+      }
+
+      // 标记为已禁用（全局状态）
+      addDisabledModel(disableState.source, disableState.model);
+      setDisableState(null);
+    } catch (err) {
+      console.error('禁用模型失败：', err);
+      alert(err instanceof Error ? err.message : t('monitor.logs.disable_error'));
+    } finally {
+      setDisabling(false);
+    }
+  }, [disableState, providerMap, t, addDisabledModel]);
+
+  // 取消禁用
+  const handleCancelDisable = useCallback(() => {
+    setDisableState(null);
+  }, []);
+
+  // 关闭不支持提示
+  const handleCloseUnsupported = useCallback(() => {
+    setUnsupportedState(null);
+  }, []);
+
+  // 检查模型是否已禁用
+  const isModelDisabled = useCallback((source: string, model: string): boolean => {
+    // 首先检查全局状态中是否已禁用
+    if (isDisabled(source, model)) {
+      return true;
+    }
+
+    // 如果提供了 providerModels，检查配置中是否已移除
+    if (providerModels) {
+      if (!source || !model) return false;
+
+      // 首先尝试完全匹配
+      if (providerModels[source]) {
+        return !providerModels[source].has(model);
+      }
+
+      // 然后尝试前缀匹配
+      const entries = Object.entries(providerModels);
+      for (const [key, modelSet] of entries) {
+        if (source.startsWith(key) || key.startsWith(source)) {
+          return !modelSet.has(model);
+        }
+      }
+    }
+
+    return false;
+  }, [isDisabled, providerModels]);
+
+  return {
+    disableState,
+    unsupportedState,
+    disabling,
+    handleDisableClick,
+    handleConfirmDisable,
+    handleCancelDisable,
+    handleCloseUnsupported,
+    isModelDisabled,
+  };
+}

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

@@ -95,7 +95,8 @@
     "usage_stats": "Usage Statistics",
     "config_management": "Config Management",
     "logs": "Logs Viewer",
-    "system_info": "Management Center Info"
+    "system_info": "Management Center Info",
+    "monitor": "Monitor Center"
   },
   "dashboard": {
     "title": "Dashboard",
@@ -137,11 +138,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 +233,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 mappings (alias required):",
+    "vertex_models_add_btn": "Add Mapping",
+    "vertex_models_hint": "Each mapping needs both the original model and its alias.",
+    "vertex_models_count": "Mapping count",
     "ampcode_title": "Amp CLI Integration (ampcode)",
     "ampcode_modal_title": "Configure Ampcode",
     "ampcode_upstream_url_label": "Upstream URL",
@@ -292,7 +325,10 @@
     "openai_test_success": "Test succeeded. The model responded.",
     "openai_test_failed": "Test failed",
     "openai_test_select_placeholder": "Choose from current models",
-    "openai_test_select_empty": "No models configured. Add models first"
+    "openai_test_select_empty": "No models configured. Add models first",
+    "search_placeholder": "Search configs (keys, URLs, models...)",
+    "search_empty_title": "No matching configs",
+    "search_empty_desc": "Try a different keyword or clear the search box"
   },
   "auth_files": {
     "title": "Auth Files Management",
@@ -312,6 +348,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 +364,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",
@@ -464,6 +504,34 @@
     "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_mappings": {
+    "title": "OAuth Model Mappings",
+    "add": "Add Mapping",
+    "add_title": "Add provider model mappings",
+    "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.",
+    "mappings_label": "Model mappings",
+    "mapping_name_placeholder": "Source model name",
+    "mapping_alias_placeholder": "Alias (required)",
+    "mapping_fork_label": "Keep original",
+    "mappings_hint": "Saving an empty list removes that provider. Enable “Keep original” to keep the original name while adding the alias.",
+    "add_mapping": "Add mapping",
+    "save": "Save/Update",
+    "save_success": "Model mappings updated",
+    "save_failed": "Failed to update model mappings",
+    "delete": "Delete Provider",
+    "delete_confirm": "Delete model mappings for {{provider}}?",
+    "delete_success": "Model mappings removed",
+    "delete_failed": "Failed to delete model mappings",
+    "no_models": "No model mappings",
+    "model_count": "{{count}} mappings",
+    "list_empty_all": "No model mappings yet—use “Add Mapping” 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 mappings API. Please upgrade to the latest CLI Proxy API (CPA) version."
+  },
   "auth_login": {
     "codex_oauth_title": "Codex OAuth",
     "codex_oauth_button": "Start Codex Login",
@@ -501,9 +569,9 @@
     "gemini_cli_oauth_title": "Gemini CLI OAuth",
     "gemini_cli_oauth_button": "Start Gemini CLI Login",
     "gemini_cli_oauth_hint": "Login to Google Gemini CLI service through OAuth flow, automatically obtain and save authentication files.",
-    "gemini_cli_project_id_label": "Google Cloud Project ID:",
-    "gemini_cli_project_id_placeholder": "Enter Google Cloud Project ID",
-    "gemini_cli_project_id_hint": "Project ID is required for Gemini CLI OAuth.",
+    "gemini_cli_project_id_label": "Google Cloud Project ID (Optional):",
+    "gemini_cli_project_id_placeholder": "Leave blank to auto-select first available project",
+    "gemini_cli_project_id_hint": "Optional. If not provided, the system will automatically select the first available project from your account.",
     "gemini_cli_project_id_required": "Please enter a Google Cloud project ID.",
     "gemini_cli_oauth_url_label": "Authorization URL:",
     "gemini_cli_open_link": "Open Link",
@@ -548,7 +616,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 +777,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",
@@ -761,12 +830,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 +853,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",
@@ -833,5 +910,170 @@
     "build_date": "Build Time",
     "version": "Management UI Version",
     "author": "Author"
+  },
+  "monitor": {
+    "title": "Monitor Center",
+    "time_range": "Time Range",
+    "today": "Today",
+    "last_n_days": "Last {{n}} Days",
+    "api_filter": "API Query",
+    "api_filter_placeholder": "Query API data",
+    "apply": "Apply",
+    "no_data": "No data available",
+    "requests": "Requests",
+    "kpi": {
+      "requests": "Requests",
+      "success": "Success",
+      "failed": "Failed",
+      "rate": "Success Rate",
+      "tokens": "Tokens",
+      "input": "Input",
+      "output": "Output",
+      "reasoning": "Reasoning",
+      "cached": "Cached",
+      "avg_tpm": "Avg TPM",
+      "avg_rpm": "Avg RPM",
+      "avg_rpd": "Avg RPD",
+      "tokens_per_minute": "Tokens per minute",
+      "requests_per_minute": "Requests per minute",
+      "requests_per_day": "Requests per day"
+    },
+    "distribution": {
+      "title": "Model Usage Distribution",
+      "by_requests": "By Requests",
+      "by_tokens": "By Tokens",
+      "requests": "Requests",
+      "tokens": "Tokens",
+      "request_share": "Request Share",
+      "token_share": "Token Share"
+    },
+    "trend": {
+      "title": "Daily Usage Trend",
+      "subtitle": "Requests and Token usage trend",
+      "requests": "Requests",
+      "input_tokens": "Input Tokens",
+      "output_tokens": "Output Tokens",
+      "reasoning_tokens": "Reasoning Tokens",
+      "cached_tokens": "Cached Tokens"
+    },
+    "hourly": {
+      "last_6h": "Last 6 Hours",
+      "last_12h": "Last 12 Hours",
+      "last_24h": "Last 24 Hours",
+      "all": "All",
+      "requests": "Requests",
+      "success_rate": "Success Rate"
+    },
+    "hourly_model": {
+      "title": "Hourly Model Request Distribution",
+      "models": "Models"
+    },
+    "hourly_token": {
+      "title": "Hourly Token Usage",
+      "subtitle": "By Hour",
+      "total": "Total Tokens",
+      "input": "Input",
+      "output": "Output",
+      "reasoning": "Reasoning",
+      "cached": "Cached"
+    },
+    "channel": {
+      "title": "Channel Statistics",
+      "subtitle": "Grouped by source channel",
+      "click_hint": "Click row to expand model details",
+      "all_channels": "All Channels",
+      "all_models": "All Models",
+      "all_status": "All Status",
+      "only_success": "Success Only",
+      "only_failed": "Failed Only",
+      "header_name": "Channel",
+      "header_count": "Requests",
+      "header_rate": "Success Rate",
+      "header_recent": "Recent Status",
+      "header_time": "Last Request",
+      "model_details": "Model Details",
+      "model": "Model",
+      "success": "Success",
+      "failed": "Failed"
+    },
+    "time": {
+      "today": "Today",
+      "last_n_days": "{{n}} Days",
+      "custom": "Custom",
+      "to": "to",
+      "apply": "Apply"
+    },
+    "failure": {
+      "title": "Failure Analysis",
+      "subtitle": "Locate issues by source channel",
+      "click_hint": "Click row to expand details",
+      "no_failures": "No failure data",
+      "header_name": "Channel",
+      "header_count": "Failures",
+      "header_time": "Last Failure",
+      "header_models": "Top Failed Models",
+      "all_failed_models": "All Failed Models"
+    },
+    "logs": {
+      "title": "Request Logs",
+      "total_count": "{{count}} records",
+      "sort_hint": "Auto sorted by time desc",
+      "scroll_hint": "Scroll to browse all data",
+      "virtual_scroll_info": "Showing {{visible}} rows, {{total}} records total",
+      "all_apis": "All APIs",
+      "all_models": "All Models",
+      "all_sources": "All Sources",
+      "all_status": "All Status",
+      "all_provider_types": "All Providers",
+      "success": "Success",
+      "failed": "Failed",
+      "last_update": "Last Update",
+      "manual_refresh": "Manual Refresh",
+      "refresh_5s": "5s Refresh",
+      "refresh_10s": "10s Refresh",
+      "refresh_15s": "15s Refresh",
+      "refresh_30s": "30s Refresh",
+      "refresh_60s": "60s Refresh",
+      "refresh_in_seconds": "Refresh in {{seconds}}s",
+      "refreshing": "Refreshing...",
+      "header_auth": "Auth Index",
+      "header_api": "API",
+      "header_request_type": "Type",
+      "header_model": "Model",
+      "header_source": "Source",
+      "header_status": "Status",
+      "header_recent": "Recent Status",
+      "header_rate": "Success Rate",
+      "header_count": "Requests",
+      "header_input": "Input",
+      "header_output": "Output",
+      "header_total": "Total Tokens",
+      "header_time": "Time",
+      "header_actions": "Actions",
+      "showing": "Showing {{start}}-{{end}} of {{total}}",
+      "page_info": "Page {{current}}/{{total}}",
+      "first_page": "First",
+      "prev_page": "Prev",
+      "next_page": "Next",
+      "last_page": "Last",
+      "disable": "Disable",
+      "disable_model": "Disable this model",
+      "disabled": "Disabled",
+      "removed": "Removed",
+      "disabling": "Disabling...",
+      "disable_confirm_title": "Confirm Disable Model",
+      "disable_error": "Disable failed",
+      "disable_error_no_provider": "Cannot identify provider",
+      "disable_error_provider_not_found": "Provider config not found: {{provider}}",
+      "disable_not_supported": "{{provider}} provider does not support disable operation",
+      "disable_unsupported_title": "Auto-disable Not Supported",
+      "disable_unsupported_desc": "{{providerType}} type providers do not support auto-disable feature.",
+      "disable_unsupported_guide_title": "Manual Operation Guide",
+      "disable_unsupported_guide_step1": "1. Go to the \"AI Providers\" page",
+      "disable_unsupported_guide_step2": "2. Find the corresponding {{providerType}} configuration",
+      "disable_unsupported_guide_step3": "3. Edit the config and remove model \"{{model}}\"",
+      "disable_unsupported_guide_step4": "4. Save the configuration to apply changes",
+      "disable_unsupported_close": "Got it"
+    }
   }
 }

src/i18n/locales/zh-CN.json

@@ -95,7 +95,8 @@
     "usage_stats": "使用统计",
     "config_management": "配置管理",
     "logs": "日志查看",
-    "system_info": "中心信息"
+    "system_info": "中心信息",
+    "monitor": "监控中心"
   },
   "dashboard": {
     "title": "仪表盘",
@@ -137,11 +138,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 +233,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",
@@ -292,7 +325,10 @@
     "openai_test_success": "测试成功，模型可用。",
     "openai_test_failed": "测试失败",
     "openai_test_select_placeholder": "从当前模型列表选择",
-    "openai_test_select_empty": "当前未配置模型，请先添加模型"
+    "openai_test_select_empty": "当前未配置模型，请先添加模型",
+    "search_placeholder": "搜索配置（密钥、地址、模型等）",
+    "search_empty_title": "没有匹配的配置",
+    "search_empty_desc": "请尝试更换关键字或清空搜索框"
   },
   "auth_files": {
     "title": "认证文件管理",
@@ -312,6 +348,7 @@
     "delete_all_confirm": "确定要删除所有认证文件吗？此操作不可恢复！",
     "delete_filtered_confirm": "确定要删除筛选出的 {{type}} 认证文件吗？此操作不可恢复！",
     "upload_error_json": "只能上传JSON文件",
+    "upload_error_size": "文件大小不能超过 {{maxSize}}",
     "upload_success": "文件上传成功",
     "download_success": "文件下载成功",
     "delete_success": "文件删除成功",
@@ -327,6 +364,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",
@@ -464,6 +504,34 @@
     "upgrade_required_title": "需要升级 CPA 版本",
     "upgrade_required_desc": "当前服务器版本不支持获取模型排除列表功能，请升级到最新版本的 CPA（CLI Proxy API）后重试。"
   },
+  "oauth_model_mappings": {
+    "title": "OAuth 模型映射",
+    "add": "新增映射",
+    "add_title": "新增提供商模型映射",
+    "provider_label": "提供商",
+    "provider_placeholder": "例如 gemini-cli / vertex",
+    "provider_hint": "默认选中当前筛选的提供商，也可直接输入或选择其他名称。",
+    "mappings_label": "模型映射",
+    "mapping_name_placeholder": "原模型名称",
+    "mapping_alias_placeholder": "别名 (必填)",
+    "mapping_fork_label": "保留原名",
+    "mappings_hint": "留空保存将删除该提供商记录；开启“保留原名”会在保留原模型名的同时新增别名。",
+    "add_mapping": "添加映射",
+    "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 登录",
@@ -501,9 +569,9 @@
     "gemini_cli_oauth_title": "Gemini CLI OAuth",
     "gemini_cli_oauth_button": "开始 Gemini CLI 登录",
     "gemini_cli_oauth_hint": "通过 OAuth 流程登录 Google Gemini CLI 服务，自动获取并保存认证文件。",
-    "gemini_cli_project_id_label": "Google Cloud 项目 ID:",
-    "gemini_cli_project_id_placeholder": "输入 Google Cloud 项目 ID",
-    "gemini_cli_project_id_hint": "请填写项目 ID，用于 Gemini CLI OAuth 登录。",
+    "gemini_cli_project_id_label": "Google Cloud 项目 ID (可选):",
+    "gemini_cli_project_id_placeholder": "留空将自动选择第一个可用项目",
+    "gemini_cli_project_id_hint": "可选填写项目 ID。如不填写，系统将自动选择您账号下的第一个可用项目。",
     "gemini_cli_project_id_required": "请填写 Google Cloud 项目 ID。",
     "gemini_cli_oauth_url_label": "授权链接:",
     "gemini_cli_open_link": "打开链接",
@@ -548,7 +616,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 +777,8 @@
   "quota_management": {
     "title": "配额管理",
     "description": "集中查看 OAuth 额度与剩余情况",
-    "refresh_files": "刷新认证文件"
+    "refresh_files": "刷新认证文件",
+    "refresh_files_and_quota": "刷新认证文件&额度"
   },
   "system_info": {
     "title": "管理中心信息",
@@ -761,12 +830,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 +853,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": "必填字段不能为空",
@@ -833,5 +910,170 @@
     "build_date": "构建时间",
     "version": "管理中心版本",
     "author": "作者"
+  },
+  "monitor": {
+    "title": "监控中心",
+    "time_range": "时间范围",
+    "today": "今天",
+    "last_n_days": "最近 {{n}} 天",
+    "api_filter": "API 查询",
+    "api_filter_placeholder": "查询对应 API 数据",
+    "apply": "查看",
+    "no_data": "暂无数据",
+    "requests": "请求",
+    "kpi": {
+      "requests": "请求数",
+      "success": "成功",
+      "failed": "失败",
+      "rate": "成功率",
+      "tokens": "Tokens",
+      "input": "输入",
+      "output": "输出",
+      "reasoning": "思考",
+      "cached": "缓存",
+      "avg_tpm": "平均 TPM",
+      "avg_rpm": "平均 RPM",
+      "avg_rpd": "日均 RPD",
+      "tokens_per_minute": "每分钟 Token",
+      "requests_per_minute": "每分钟请求",
+      "requests_per_day": "每日请求数"
+    },
+    "distribution": {
+      "title": "模型用量分布",
+      "by_requests": "按请求数",
+      "by_tokens": "按 Token 数",
+      "requests": "请求",
+      "tokens": "Token",
+      "request_share": "请求占比",
+      "token_share": "Token 占比"
+    },
+    "trend": {
+      "title": "每日用量趋势",
+      "subtitle": "请求数与 Token 用量趋势",
+      "requests": "请求数",
+      "input_tokens": "输入 Token",
+      "output_tokens": "输出 Token",
+      "reasoning_tokens": "思考 Token",
+      "cached_tokens": "缓存 Token"
+    },
+    "hourly": {
+      "last_6h": "最近 6 小时",
+      "last_12h": "最近 12 小时",
+      "last_24h": "最近 24 小时",
+      "all": "全部",
+      "requests": "请求数",
+      "success_rate": "成功率"
+    },
+    "hourly_model": {
+      "title": "每小时模型请求分布",
+      "models": "模型"
+    },
+    "hourly_token": {
+      "title": "每小时 Token 用量",
+      "subtitle": "按小时显示",
+      "total": "总 Token",
+      "input": "输入",
+      "output": "输出",
+      "reasoning": "思考",
+      "cached": "缓存"
+    },
+    "channel": {
+      "title": "渠道统计",
+      "subtitle": "按来源渠道分类",
+      "click_hint": "单击行展开模型详情",
+      "all_channels": "全部渠道",
+      "all_models": "全部模型",
+      "all_status": "全部状态",
+      "only_success": "仅成功",
+      "only_failed": "仅失败",
+      "header_name": "渠道",
+      "header_count": "请求数",
+      "header_rate": "成功率",
+      "header_recent": "最近请求状态",
+      "header_time": "最近请求时间",
+      "model_details": "模型详情",
+      "model": "模型",
+      "success": "成功",
+      "failed": "失败"
+    },
+    "time": {
+      "today": "今天",
+      "last_n_days": "{{n}} 天",
+      "custom": "自定义",
+      "to": "至",
+      "apply": "应用"
+    },
+    "failure": {
+      "title": "失败来源分析",
+      "subtitle": "从来源渠道定位异常",
+      "click_hint": "单击行展开详情",
+      "no_failures": "暂无失败数据",
+      "header_name": "渠道",
+      "header_count": "失败数",
+      "header_time": "最近失败",
+      "header_models": "主要失败模型",
+      "all_failed_models": "所有失败模型"
+    },
+    "logs": {
+      "title": "请求日志",
+      "total_count": "共 {{count}} 条",
+      "sort_hint": "自动按时间倒序",
+      "scroll_hint": "滚动浏览全部数据",
+      "virtual_scroll_info": "当前显示 {{visible}} 行，共 {{total}} 条记录",
+      "all_apis": "全部请求 API",
+      "all_models": "全部请求模型",
+      "all_sources": "全部请求渠道",
+      "all_status": "全部请求状态",
+      "all_provider_types": "全部请求类型",
+      "success": "成功",
+      "failed": "失败",
+      "last_update": "最后更新",
+      "manual_refresh": "手动刷新",
+      "refresh_5s": "5秒刷新",
+      "refresh_10s": "10秒刷新",
+      "refresh_15s": "15秒刷新",
+      "refresh_30s": "30秒刷新",
+      "refresh_60s": "60秒刷新",
+      "refresh_in_seconds": "{{seconds}}秒后刷新",
+      "refreshing": "刷新中...",
+      "header_auth": "认证索引",
+      "header_api": "请求 API",
+      "header_request_type": "请求类型",
+      "header_model": "请求模型",
+      "header_source": "请求渠道",
+      "header_status": "请求状态",
+      "header_recent": "最近请求状态",
+      "header_rate": "成功率",
+      "header_count": "请求数",
+      "header_input": "输入",
+      "header_output": "输出",
+      "header_total": "总 Token",
+      "header_time": "时间",
+      "header_actions": "操作",
+      "showing": "显示 {{start}}-{{end}} 条，共 {{total}} 条",
+      "page_info": "第 {{current}}/{{total}} 页",
+      "first_page": "首页",
+      "prev_page": "上一页",
+      "next_page": "下一页",
+      "last_page": "末页",
+      "disable": "禁用",
+      "disable_model": "禁用此模型",
+      "disabled": "已禁用",
+      "removed": "已移除",
+      "disabling": "禁用中...",
+      "disable_confirm_title": "确认禁用模型",
+      "disable_error": "禁用失败",
+      "disable_error_no_provider": "无法识别渠道",
+      "disable_error_provider_not_found": "未找到渠道配置：{{provider}}",
+      "disable_not_supported": "{{provider}} 渠道不支持禁用操作",
+      "disable_unsupported_title": "不支持自动禁用",
+      "disable_unsupported_desc": "{{providerType}} 类型的渠道暂不支持自动禁用功能。",
+      "disable_unsupported_guide_title": "手动操作指南",
+      "disable_unsupported_guide_step1": "1. 前往「AI 提供商」页面",
+      "disable_unsupported_guide_step2": "2. 找到对应的 {{providerType}} 配置",
+      "disable_unsupported_guide_step3": "3. 编辑配置，移除模型「{{model}}」",
+      "disable_unsupported_guide_step4": "4. 保存配置即可生效",
+      "disable_unsupported_close": "我知道了"
+    }
   }
 }

src/pages/AiProvidersPage.module.scss

@@ -20,7 +20,53 @@
   font-size: 28px;
   font-weight: 700;
   color: var(--text-primary);
-  margin: 0 0 $spacing-xl 0;
+  margin: 0;
+}
+
+.pageHeader {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: $spacing-md;
+  margin-bottom: $spacing-xl;
+}
+
+.searchBox {
+  flex: 0 1 320px;
+  min-width: 200px;
+
+  @include mobile {
+    flex: 1 1 100%;
+  }
+
+  :global(.form-group) {
+    margin-bottom: 0;
+  }
+}
+
+.searchEmpty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: $spacing-xl * 2;
+  text-align: center;
+  background: var(--bg-secondary);
+  border: 1px dashed var(--border-primary);
+  border-radius: 12px;
+}
+
+.searchEmptyTitle {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin-bottom: $spacing-sm;
+}
+
+.searchEmptyDesc {
+  font-size: 14px;
+  color: var(--text-tertiary);
 }
 
 .content {

src/pages/ApiKeysPage.tsx

@@ -9,6 +9,7 @@ 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() {
@@ -83,6 +84,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

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);
@@ -124,7 +146,7 @@
   background-color: var(--bg-primary);
   color: var(--text-primary);
   font-size: 14px;
-  cursor: pointer;
+  cursor: text;
   height: 38px;
   box-sizing: border-box;
 
@@ -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;
@@ -742,6 +751,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;

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';
@@ -50,7 +51,8 @@ const HTTP_METHOD_REGEX = new RegExp(`\\b(${HTTP_METHODS.join('|')})\\b`);
 const LOG_TIMESTAMP_REGEX = /^\[?(\d{4}-\d{2}-\d{2}[ T]\d{2}:\d{2}:\d{2}(?:\.\d{1,3})?)\]?/;
 const LOG_LEVEL_REGEX = /^\[?(trace|debug|info|warn|warning|error|fatal)\s*\]?(?=\s|\[|$)\s*/i;
 const LOG_SOURCE_REGEX = /^\[([^\]]+)\]/;
-const LOG_LATENCY_REGEX = /\b(\d+(?:\.\d+)?)(?:\s*)(µs|us|ms|s)\b/i;
+const LOG_LATENCY_REGEX =
+  /\b(?:\d+(?:\.\d+)?\s*(?:µs|us|ms|s|m))(?:\s*\d+(?:\.\d+)?\s*(?:µs|us|ms|s|m))*\b/i;
 const LOG_IPV4_REGEX = /\b(?:\d{1,3}\.){3}\d{1,3}\b/;
 const LOG_IPV6_REGEX = /\b(?:[a-f0-9]{0,4}:){2,7}[a-f0-9]{0,4}\b/i;
 const LOG_REQUEST_ID_REGEX = /^([a-f0-9]{8}|--------)$/i;
@@ -102,6 +104,12 @@ const normalizeTimestampToSeconds = (value: string): string => {
   return `${match[1]} ${match[2]}`;
 };
 
+const extractLatency = (text: string): string | undefined => {
+  const match = text.match(LOG_LATENCY_REGEX);
+  if (!match) return undefined;
+  return match[0].replace(/\s+/g, '');
+};
+
 type ParsedLogLine = {
   raw: string;
   timestamp?: string;
@@ -244,9 +252,9 @@ const parseLogLine = (raw: string): ParsedLogLine => {
     // latency
     const latencyIndex = segments.findIndex((segment) => LOG_LATENCY_REGEX.test(segment));
     if (latencyIndex >= 0) {
-      const match = segments[latencyIndex].match(LOG_LATENCY_REGEX);
-      if (match) {
-        latency = `${match[1]}${match[2]}`;
+      const extracted = extractLatency(segments[latencyIndex]);
+      if (extracted) {
+        latency = extracted;
         consumed.add(latencyIndex);
       }
     }
@@ -287,8 +295,8 @@ const parseLogLine = (raw: string): ParsedLogLine => {
   } else {
     statusCode = detectHttpStatusCode(remaining);
 
-    const latencyMatch = remaining.match(LOG_LATENCY_REGEX);
-    if (latencyMatch) latency = `${latencyMatch[1]}${latencyMatch[2]}`;
+    const extracted = extractLatency(remaining);
+    if (extracted) latency = extracted;
 
     ip = extractIp(remaining);
 
@@ -467,6 +475,8 @@ export function LogsPage() {
     }
   };
 
+  useHeaderRefresh(() => loadLogs(false));
+
   const clearLogs = async () => {
     if (!window.confirm(t('logs.clear_confirm'))) return;
     try {

src/pages/MonitorPage.tsx

@@ -0,0 +1,379 @@
+import { useState, useEffect, useMemo, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  BarElement,
+  BarController,
+  LineController,
+  ArcElement,
+  Title,
+  Tooltip,
+  Legend,
+  Filler
+} from 'chart.js';
+import { Button } from '@/components/ui/Button';
+import { LoadingSpinner } from '@/components/ui/LoadingSpinner';
+import { useHeaderRefresh } from '@/hooks/useHeaderRefresh';
+import { useThemeStore } from '@/stores';
+import { usageApi, providersApi } from '@/services/api';
+import { KpiCards } from '@/components/monitor/KpiCards';
+import { ModelDistributionChart } from '@/components/monitor/ModelDistributionChart';
+import { DailyTrendChart } from '@/components/monitor/DailyTrendChart';
+import { HourlyModelChart } from '@/components/monitor/HourlyModelChart';
+import { HourlyTokenChart } from '@/components/monitor/HourlyTokenChart';
+import { ChannelStats } from '@/components/monitor/ChannelStats';
+import { FailureAnalysis } from '@/components/monitor/FailureAnalysis';
+import { RequestLogs } from '@/components/monitor/RequestLogs';
+import styles from './MonitorPage.module.scss';
+
+// 注册 Chart.js 组件
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  BarElement,
+  BarController,
+  LineController,
+  ArcElement,
+  Title,
+  Tooltip,
+  Legend,
+  Filler
+);
+
+// 时间范围选项
+type TimeRange = 1 | 7 | 14 | 30;
+
+export interface UsageDetail {
+  timestamp: string;
+  failed: boolean;
+  source: string;
+  auth_index: string;
+  tokens: {
+    input_tokens: number;
+    output_tokens: number;
+    reasoning_tokens: number;
+    cached_tokens: number;
+    total_tokens: number;
+  };
+}
+
+export interface UsageData {
+  apis: Record<string, {
+    models: Record<string, {
+      details: UsageDetail[];
+    }>;
+  }>;
+}
+
+export function MonitorPage() {
+  const { t } = useTranslation();
+  const resolvedTheme = useThemeStore((state) => state.resolvedTheme);
+  const isDark = resolvedTheme === 'dark';
+
+  // 状态
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [usageData, setUsageData] = useState<UsageData | null>(null);
+  const [timeRange, setTimeRange] = useState<TimeRange>(7);
+  const [apiFilter, setApiFilter] = useState('');
+  const [providerMap, setProviderMap] = useState<Record<string, string>>({});
+  const [providerModels, setProviderModels] = useState<Record<string, Set<string>>>({});
+  const [providerTypeMap, setProviderTypeMap] = useState<Record<string, string>>({});
+
+  // 加载渠道名称映射（支持所有提供商类型）
+  const loadProviderMap = useCallback(async () => {
+    try {
+      const map: Record<string, string> = {};
+      const modelsMap: Record<string, Set<string>> = {};
+      const typeMap: Record<string, string> = {};
+
+      // 并行加载所有提供商配置
+      const [openaiProviders, geminiKeys, claudeConfigs, codexConfigs, vertexConfigs] = await Promise.all([
+        providersApi.getOpenAIProviders().catch(() => []),
+        providersApi.getGeminiKeys().catch(() => []),
+        providersApi.getClaudeConfigs().catch(() => []),
+        providersApi.getCodexConfigs().catch(() => []),
+        providersApi.getVertexConfigs().catch(() => []),
+      ]);
+
+      // 处理 OpenAI 兼容提供商
+      openaiProviders.forEach((provider) => {
+        const providerName = provider.headers?.['X-Provider'] || provider.name || 'unknown';
+        const modelSet = new Set<string>();
+        (provider.models || []).forEach((m) => {
+          if (m.alias) modelSet.add(m.alias);
+          if (m.name) modelSet.add(m.name);
+        });
+        const apiKeyEntries = provider.apiKeyEntries || [];
+        apiKeyEntries.forEach((entry) => {
+          const apiKey = entry.apiKey;
+          if (apiKey) {
+            map[apiKey] = providerName;
+            modelsMap[apiKey] = modelSet;
+            typeMap[apiKey] = 'OpenAI';
+          }
+        });
+        if (provider.name) {
+          map[provider.name] = providerName;
+          modelsMap[provider.name] = modelSet;
+          typeMap[provider.name] = 'OpenAI';
+        }
+      });
+
+      // 处理 Gemini 提供商
+      geminiKeys.forEach((config) => {
+        const apiKey = config.apiKey;
+        if (apiKey) {
+          const providerName = config.prefix?.trim() || 'Gemini';
+          map[apiKey] = providerName;
+          typeMap[apiKey] = 'Gemini';
+        }
+      });
+
+      // 处理 Claude 提供商
+      claudeConfigs.forEach((config) => {
+        const apiKey = config.apiKey;
+        if (apiKey) {
+          const providerName = config.prefix?.trim() || 'Claude';
+          map[apiKey] = providerName;
+          typeMap[apiKey] = 'Claude';
+          // 存储模型集合
+          if (config.models && config.models.length > 0) {
+            const modelSet = new Set<string>();
+            config.models.forEach((m) => {
+              if (m.alias) modelSet.add(m.alias);
+              if (m.name) modelSet.add(m.name);
+            });
+            modelsMap[apiKey] = modelSet;
+          }
+        }
+      });
+
+      // 处理 Codex 提供商
+      codexConfigs.forEach((config) => {
+        const apiKey = config.apiKey;
+        if (apiKey) {
+          const providerName = config.prefix?.trim() || 'Codex';
+          map[apiKey] = providerName;
+          typeMap[apiKey] = 'Codex';
+          if (config.models && config.models.length > 0) {
+            const modelSet = new Set<string>();
+            config.models.forEach((m) => {
+              if (m.alias) modelSet.add(m.alias);
+              if (m.name) modelSet.add(m.name);
+            });
+            modelsMap[apiKey] = modelSet;
+          }
+        }
+      });
+
+      // 处理 Vertex 提供商
+      vertexConfigs.forEach((config) => {
+        const apiKey = config.apiKey;
+        if (apiKey) {
+          const providerName = config.prefix?.trim() || 'Vertex';
+          map[apiKey] = providerName;
+          typeMap[apiKey] = 'Vertex';
+          if (config.models && config.models.length > 0) {
+            const modelSet = new Set<string>();
+            config.models.forEach((m) => {
+              if (m.alias) modelSet.add(m.alias);
+              if (m.name) modelSet.add(m.name);
+            });
+            modelsMap[apiKey] = modelSet;
+          }
+        }
+      });
+
+      setProviderMap(map);
+      setProviderModels(modelsMap);
+      setProviderTypeMap(typeMap);
+    } catch (err) {
+      console.warn('Monitor: Failed to load provider map:', err);
+    }
+  }, []);
+
+  // 加载数据
+  const loadData = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      // 并行加载使用数据和渠道映射
+      const [response] = await Promise.all([
+        usageApi.getUsage(),
+        loadProviderMap()
+      ]);
+      // API 返回的数据可能在 response.usage 或直接在 response 中
+      const data = response?.usage ?? response;
+      setUsageData(data as UsageData);
+    } catch (err) {
+      const message = err instanceof Error ? err.message : t('common.unknown_error');
+      console.error('Monitor: Error loading data:', err);
+      setError(message);
+    } finally {
+      setLoading(false);
+    }
+  }, [t, loadProviderMap]);
+
+  // 初始加载
+  useEffect(() => {
+    loadData();
+  }, [loadData]);
+
+  // 响应头部刷新
+  useHeaderRefresh(loadData);
+
+  // 根据时间范围过滤数据
+  const filteredData = useMemo(() => {
+    if (!usageData?.apis) {
+      return null;
+    }
+
+    const now = new Date();
+    const cutoffTime = new Date(now.getTime() - timeRange * 24 * 60 * 60 * 1000);
+
+    const filtered: UsageData = { apis: {} };
+
+    Object.entries(usageData.apis).forEach(([apiKey, apiData]) => {
+      // 如果有 API 过滤器，检查是否匹配
+      if (apiFilter && !apiKey.toLowerCase().includes(apiFilter.toLowerCase())) {
+        return;
+      }
+
+      // 检查 apiData 是否有 models 属性
+      if (!apiData?.models) {
+        return;
+      }
+
+      const filteredModels: Record<string, { details: UsageDetail[] }> = {};
+
+      Object.entries(apiData.models).forEach(([modelName, modelData]) => {
+        // 检查 modelData 是否有 details 属性
+        if (!modelData?.details || !Array.isArray(modelData.details)) {
+          return;
+        }
+
+        const filteredDetails = modelData.details.filter((detail) => {
+          const timestamp = new Date(detail.timestamp);
+          return timestamp >= cutoffTime;
+        });
+
+        if (filteredDetails.length > 0) {
+          filteredModels[modelName] = { details: filteredDetails };
+        }
+      });
+
+      if (Object.keys(filteredModels).length > 0) {
+        filtered.apis[apiKey] = { models: filteredModels };
+      }
+    });
+
+    return filtered;
+  }, [usageData, timeRange, apiFilter]);
+
+  // 处理时间范围变化
+  const handleTimeRangeChange = (range: TimeRange) => {
+    setTimeRange(range);
+  };
+
+  // 处理 API 过滤应用（触发数据刷新）
+  const handleApiFilterApply = () => {
+    loadData();
+  };
+
+  return (
+    <div className={styles.container}>
+      {loading && !usageData && (
+        <div className={styles.loadingOverlay} aria-busy="true">
+          <div className={styles.loadingOverlayContent}>
+            <LoadingSpinner size={28} className={styles.loadingOverlaySpinner} />
+            <span className={styles.loadingOverlayText}>{t('common.loading')}</span>
+          </div>
+        </div>
+      )}
+
+      {/* 页面标题 */}
+      <div className={styles.header}>
+        <h1 className={styles.pageTitle}>{t('monitor.title')}</h1>
+        <div className={styles.headerActions}>
+          <Button
+            variant="secondary"
+            size="sm"
+            onClick={loadData}
+            disabled={loading}
+          >
+            {loading ? t('common.loading') : t('common.refresh')}
+          </Button>
+        </div>
+      </div>
+
+      {/* 错误提示 */}
+      {error && <div className={styles.errorBox}>{error}</div>}
+
+      {/* 时间范围和 API 过滤 */}
+      <div className={styles.filters}>
+        <div className={styles.filterGroup}>
+          <span className={styles.filterLabel}>{t('monitor.time_range')}</span>
+          <div className={styles.timeButtons}>
+            {([1, 7, 14, 30] as TimeRange[]).map((range) => (
+              <button
+                key={range}
+                className={`${styles.timeButton} ${timeRange === range ? styles.active : ''}`}
+                onClick={() => handleTimeRangeChange(range)}
+              >
+                {range === 1 ? t('monitor.today') : t('monitor.last_n_days', { n: range })}
+              </button>
+            ))}
+          </div>
+        </div>
+        <div className={styles.filterGroup}>
+          <span className={styles.filterLabel}>{t('monitor.api_filter')}</span>
+          <input
+            type="text"
+            className={styles.filterInput}
+            placeholder={t('monitor.api_filter_placeholder')}
+            value={apiFilter}
+            onChange={(e) => setApiFilter(e.target.value)}
+          />
+          <Button variant="secondary" size="sm" onClick={handleApiFilterApply}>
+            {t('monitor.apply')}
+          </Button>
+        </div>
+      </div>
+
+      {/* KPI 卡片 */}
+      <KpiCards data={filteredData} loading={loading} timeRange={timeRange} />
+
+      {/* 图表区域 */}
+      <div className={styles.chartsGrid}>
+        <ModelDistributionChart data={filteredData} loading={loading} isDark={isDark} timeRange={timeRange} />
+        <DailyTrendChart data={filteredData} loading={loading} isDark={isDark} timeRange={timeRange} />
+      </div>
+
+      {/* 小时级图表 */}
+      <HourlyModelChart data={filteredData} loading={loading} isDark={isDark} />
+      <HourlyTokenChart data={filteredData} loading={loading} isDark={isDark} />
+
+      {/* 统计表格 */}
+      <div className={styles.statsGrid}>
+        <ChannelStats data={filteredData} loading={loading} providerMap={providerMap} providerModels={providerModels} />
+        <FailureAnalysis data={filteredData} loading={loading} providerMap={providerMap} providerModels={providerModels} />
+      </div>
+
+      {/* 请求日志 */}
+      <RequestLogs
+        data={filteredData}
+        loading={loading}
+        providerMap={providerMap}
+        providerTypeMap={providerTypeMap}
+        apiFilter={apiFilter}
+      />
+    </div>
+  );
+}

src/pages/OAuthPage.module.scss

@@ -115,6 +115,13 @@
   margin-top: $spacing-sm;
 }
 
+.geminiProjectField {
+  :global(.form-group) {
+    margin-top: $spacing-sm;
+    gap: $spacing-sm;
+  }
+}
+
 .filePicker {
   display: flex;
   align-items: center;

src/pages/OAuthPage.tsx

@@ -59,11 +59,10 @@ const PROVIDERS: { id: OAuthProvider; titleKey: string; hintKey: string; urlLabe
   { id: 'anthropic', titleKey: 'auth_login.anthropic_oauth_title', hintKey: 'auth_login.anthropic_oauth_hint', urlLabelKey: 'auth_login.anthropic_oauth_url_label', icon: iconClaude },
   { id: 'antigravity', titleKey: 'auth_login.antigravity_oauth_title', hintKey: 'auth_login.antigravity_oauth_hint', urlLabelKey: 'auth_login.antigravity_oauth_url_label', icon: iconAntigravity },
   { id: 'gemini-cli', titleKey: 'auth_login.gemini_cli_oauth_title', hintKey: 'auth_login.gemini_cli_oauth_hint', urlLabelKey: 'auth_login.gemini_cli_oauth_url_label', icon: iconGemini },
-  { id: 'qwen', titleKey: 'auth_login.qwen_oauth_title', hintKey: 'auth_login.qwen_oauth_hint', urlLabelKey: 'auth_login.qwen_oauth_url_label', icon: iconQwen },
-  { id: 'iflow', titleKey: 'auth_login.iflow_oauth_title', hintKey: 'auth_login.iflow_oauth_hint', urlLabelKey: 'auth_login.iflow_oauth_url_label', icon: iconIflow }
+  { id: 'qwen', titleKey: 'auth_login.qwen_oauth_title', hintKey: 'auth_login.qwen_oauth_hint', urlLabelKey: 'auth_login.qwen_oauth_url_label', icon: iconQwen }
 ];
 
-const CALLBACK_SUPPORTED: OAuthProvider[] = ['codex', 'anthropic', 'antigravity', 'gemini-cli', 'iflow'];
+const CALLBACK_SUPPORTED: OAuthProvider[] = ['codex', 'anthropic', 'antigravity', 'gemini-cli'];
 const getProviderI18nPrefix = (provider: OAuthProvider) => provider.replace('-', '_');
 const getAuthKey = (provider: OAuthProvider, suffix: string) =>
   `auth_login.${getProviderI18nPrefix(provider)}_${suffix}`;
@@ -131,12 +130,7 @@ export function OAuthPage() {
 
   const startAuth = async (provider: OAuthProvider) => {
     const projectId = provider === 'gemini-cli' ? (states[provider]?.projectId || '').trim() : undefined;
-    if (provider === 'gemini-cli' && !projectId) {
-      const message = t('auth_login.gemini_cli_project_id_required');
-      updateProviderState(provider, { projectIdError: message });
-      showNotification(message, 'warning');
-      return;
-    }
+    // 项目 ID 现在是可选的，如果不输入将自动选择第一个可用项目
     if (provider === 'gemini-cli') {
       updateProviderState(provider, { projectIdError: undefined });
     }
@@ -151,7 +145,7 @@ export function OAuthPage() {
     try {
       const res = await oauthApi.startAuth(
         provider,
-        provider === 'gemini-cli' ? { projectId: projectId! } : undefined
+        provider === 'gemini-cli' ? { projectId: projectId || undefined } : undefined
       );
       updateProviderState(provider, { url: res.url, state: res.state, status: 'waiting', polling: true });
       if (res.state) {
@@ -333,19 +327,21 @@ export function OAuthPage() {
               >
                 <div className="hint">{t(provider.hintKey)}</div>
                 {provider.id === 'gemini-cli' && (
-                  <Input
-                    label={t('auth_login.gemini_cli_project_id_label')}
-                    hint={t('auth_login.gemini_cli_project_id_hint')}
-                    value={state.projectId || ''}
-                    error={state.projectIdError}
-                    onChange={(e) =>
-                      updateProviderState(provider.id, {
-                        projectId: e.target.value,
-                        projectIdError: undefined
-                      })
-                    }
-                    placeholder={t('auth_login.gemini_cli_project_id_placeholder')}
-                  />
+                  <div className={styles.geminiProjectField}>
+                    <Input
+                      label={t('auth_login.gemini_cli_project_id_label')}
+                      hint={t('auth_login.gemini_cli_project_id_hint')}
+                      value={state.projectId || ''}
+                      error={state.projectIdError}
+                      onChange={(e) =>
+                        updateProviderState(provider.id, {
+                          projectId: e.target.value,
+                          projectIdError: undefined
+                        })
+                      }
+                      placeholder={t('auth_login.gemini_cli_project_id_placeholder')}
+                    />
+                  </div>
                 )}
                 {state.url && (
                   <div className={`connection-box ${styles.authUrlBox}`}>

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 {
@@ -48,7 +79,7 @@
   background-color: var(--bg-primary);
   color: var(--text-primary);
   font-size: 14px;
-  cursor: pointer;
+  cursor: text;
   height: 38px;
   box-sizing: border-box;
 
@@ -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/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

@@ -181,7 +181,7 @@ export function SystemPage() {
           </a>
 
           <a
-            href="https://github.com/router-for-me/Cli-Proxy-API-Management-Center"
+            href="https://github.com/kongkongyo/Cli-Proxy-API-Management-Center"
             target="_blank"
             rel="noopener noreferrer"
             className={styles.linkCard}

src/router/MainRoutes.tsx

@@ -0,0 +1,34 @@
+import { Navigate, useRoutes, type Location } from 'react-router-dom';
+import { DashboardPage } from '@/pages/DashboardPage';
+import { SettingsPage } from '@/pages/SettingsPage';
+import { ApiKeysPage } from '@/pages/ApiKeysPage';
+import { AiProvidersPage } from '@/pages/AiProvidersPage';
+import { AuthFilesPage } from '@/pages/AuthFilesPage';
+import { OAuthPage } from '@/pages/OAuthPage';
+import { QuotaPage } from '@/pages/QuotaPage';
+import { UsagePage } from '@/pages/UsagePage';
+import { ConfigPage } from '@/pages/ConfigPage';
+import { LogsPage } from '@/pages/LogsPage';
+import { SystemPage } from '@/pages/SystemPage';
+import { MonitorPage } from '@/pages/MonitorPage';
+
+const mainRoutes = [
+  { path: '/', element: <DashboardPage /> },
+  { path: '/dashboard', element: <DashboardPage /> },
+  { path: '/settings', element: <SettingsPage /> },
+  { path: '/api-keys', element: <ApiKeysPage /> },
+  { path: '/ai-providers', element: <AiProvidersPage /> },
+  { path: '/auth-files', element: <AuthFilesPage /> },
+  { path: '/oauth', element: <OAuthPage /> },
+  { path: '/quota', element: <QuotaPage /> },
+  { path: '/usage', element: <UsagePage /> },
+  { path: '/config', element: <ConfigPage /> },
+  { path: '/logs', element: <LogsPage /> },
+  { path: '/system', element: <SystemPage /> },
+  { path: '/monitor', element: <MonitorPage /> },
+  { path: '*', element: <Navigate to="/" replace /> },
+];
+
+export function MainRoutes({ location }: { location?: Location }) {
+  return useRoutes(mainRoutes, location);
+}

src/services/api/authFiles.ts

@@ -4,6 +4,44 @@
 
 import { apiClient } from './client';
 import type { AuthFilesResponse } from '@/types/authFile';
+import type { OAuthModelMappingEntry } from '@/types';
+
+const normalizeOauthExcludedModels = (payload: unknown): Record<string, string[]> => {
+  if (!payload || typeof payload !== 'object') return {};
+
+  const source = (payload as any)['oauth-excluded-models'] ?? (payload as any).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;
+};
 
 export const authFilesApi = {
   list: () => apiClient.get<AuthFilesResponse>('/auth-files'),
@@ -18,11 +56,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,6 +76,40 @@ 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 getOauthModelMappings(): Promise<Record<string, OAuthModelMappingEntry[]>> {
+    const data = await apiClient.get('/oauth-model-alias');
+    const payload = (data && (data['oauth-model-alias'] ?? data.items ?? data)) as any;
+    if (!payload || typeof payload !== 'object') return {};
+    const result: Record<string, OAuthModelMappingEntry[]> = {};
+    Object.entries(payload).forEach(([channel, mappings]) => {
+      if (!Array.isArray(mappings)) return;
+      const normalized = mappings
+        .map((item) => {
+          if (!item || typeof item !== 'object') return null;
+          const name = String(item.name ?? item.id ?? item.model ?? '').trim();
+          const alias = String(item.alias ?? '').trim();
+          if (!name || !alias) return null;
+          const fork = item.fork === true;
+          return fork ? { name, alias, fork } : { name, alias };
+        })
+        .filter(Boolean) as OAuthModelMappingEntry[];
+      if (normalized.length) {
+        result[channel] = normalized;
+      }
+    });
+    return result;
+  },
+
+  saveOauthModelMappings: (channel: string, mappings: OAuthModelMappingEntry[]) =>
+    apiClient.patch('/oauth-model-alias', { channel, mappings }),
+
+  deleteOauthModelMappings: (channel: string) =>
+    apiClient.delete(`/oauth-model-alias?channel=${encodeURIComponent(channel)}`),
+
   // 获取认证凭证支持的模型
   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)}`);

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/oauth.ts

@@ -9,8 +9,7 @@ export type OAuthProvider =
   | 'anthropic'
   | 'antigravity'
   | 'gemini-cli'
-  | 'qwen'
-  | 'iflow';
+  | 'qwen';
 
 export interface OAuthStartResponse {
   url: string;
@@ -30,7 +29,7 @@ export interface IFlowCookieAuthResponse {
   type?: string;
 }
 
-const WEBUI_SUPPORTED: OAuthProvider[] = ['codex', 'anthropic', 'antigravity', 'gemini-cli', 'iflow'];
+const WEBUI_SUPPORTED: OAuthProvider[] = ['codex', 'anthropic', 'antigravity', 'gemini-cli'];
 const CALLBACK_PROVIDER_MAP: Partial<Record<OAuthProvider, string>> = {
   'gemini-cli': 'gemini'
 };

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;
@@ -154,5 +194,14 @@ export const providersApi = {
     apiClient.patch('/openai-compatibility', { index, value: serializeOpenAIProvider(value) }),
 
   deleteOpenAIProvider: (name: string) =>
-    apiClient.delete(`/openai-compatibility?name=${encodeURIComponent(name)}`)
+    apiClient.delete(`/openai-compatibility?name=${encodeURIComponent(name)}`),
+
+  // 通过 name 更新 OpenAI 兼容提供商（用于禁用模型）
+  patchOpenAIProviderByName: (name: string, value: Partial<OpenAIProviderConfig>) => {
+    const payload: Record<string, any> = {};
+    if (value.models !== undefined) {
+      payload.models = serializeModelAliases(value.models);
+    }
+    return apiClient.patch('/openai-compatibility', { name, value: payload });
+  }
 };

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/index.ts

@@ -9,3 +9,4 @@ export { useAuthStore } from './useAuthStore';
 export { useConfigStore } from './useConfigStore';
 export { useModelsStore } from './useModelsStore';
 export { useQuotaStore } from './useQuotaStore';
+export { useDisabledModelsStore } from './useDisabledModelsStore';

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/useDisabledModelsStore.ts

@@ -0,0 +1,50 @@
+/**
+ * 禁用模型状态管理
+ * 全局管理已禁用的模型，确保所有组件状态同步
+ */
+
+import { create } from 'zustand';
+
+interface DisabledModelsState {
+  /** 已禁用的模型集合，格式：`${source}|||${model}` */
+  disabledModels: Set<string>;
+  /** 添加禁用模型 */
+  addDisabledModel: (source: string, model: string) => void;
+  /** 移除禁用模型（恢复） */
+  removeDisabledModel: (source: string, model: string) => void;
+  /** 检查模型是否已禁用 */
+  isDisabled: (source: string, model: string) => boolean;
+  /** 清空所有禁用状态 */
+  clearAll: () => void;
+}
+
+export const useDisabledModelsStore = create<DisabledModelsState>()((set, get) => ({
+  disabledModels: new Set<string>(),
+
+  addDisabledModel: (source, model) => {
+    const key = `${source}|||${model}`;
+    set((state) => {
+      const newSet = new Set(state.disabledModels);
+      newSet.add(key);
+      return { disabledModels: newSet };
+    });
+  },
+
+  removeDisabledModel: (source, model) => {
+    const key = `${source}|||${model}`;
+    set((state) => {
+      const newSet = new Set(state.disabledModels);
+      newSet.delete(key);
+      return { disabledModels: newSet };
+    });
+  },
+
+  isDisabled: (source, model) => {
+    const key = `${source}|||${model}`;
+    return get().disabledModels.has(key);
+  },
+
+  clearAll: () => {
+    set({ disabledModels: new Set() });
+  },
+}));

src/styles/components.scss

@@ -116,14 +116,42 @@ textarea {
 
 .card-header {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   justify-content: space-between;
   margin-bottom: $spacing-md;
+  gap: 12px;
+  flex-wrap: wrap;
+
+  @media (max-width: 768px) {
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  .card-title-group {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    min-width: 0;
+    flex: 1;
+  }
 
   .title {
     font-size: 18px;
     font-weight: 700;
     color: var(--text-primary);
+
+    @media (max-width: 768px) {
+      font-size: 16px;
+    }
+  }
+
+  .subtitle {
+    font-size: 13px;
+    color: var(--text-secondary);
+
+    @media (max-width: 768px) {
+      font-size: 12px;
+    }
   }
 }
 

src/styles/global.scss

@@ -15,6 +15,15 @@ body {
   transition: background-color $transition-normal, color $transition-normal;
 }
 
+html.modal-open,
+body.modal-open {
+  overflow: hidden;
+}
+
+body.modal-open .content {
+  overflow: hidden;
+}
+
 // 滚动条样式
 ::-webkit-scrollbar {
   width: 8px;

src/styles/layout.scss

@@ -348,6 +348,7 @@
   flex-direction: column;
   min-width: 0;
   overflow-y: auto;
+  scrollbar-gutter: stable;
   height: 100%;
 
   &.content-logs {