fix(layout): wire header refresh to page loaders and quota config refresh

feat: make Gemini CLI project ID optional

.eslintrc.cjs

@@ -0,0 +1,20 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+    '@typescript-eslint/no-explicit-any': 'warn',
+    '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
+  },
+};

.github/workflows/release.yml

@@ -0,0 +1,64 @@
+name: Build and Release
+
+on:
+  push:
+    tags:
+      - 'v*'
+
+jobs:
+  build-and-release:
+    runs-on: ubuntu-latest
+
+    permissions:
+      contents: write
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+          fetch-tags: true
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '18'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build all-in-one HTML
+        run: npm run build
+        env:
+          VERSION: ${{ github.ref_name }}
+
+      - name: Prepare release assets
+        run: |
+          cd dist
+          mv index.html management.html
+          ls -lh management.html
+
+      - name: Generate release notes
+        run: |
+          set -euo pipefail
+          current_tag="${GITHUB_REF_NAME}"
+          previous_tag="$(git tag --list 'v*' --sort=-v:refname | grep -v "^${current_tag}$" | head -n 1 || true)"
+          if [ -n "${previous_tag}" ]; then
+            range="${previous_tag}..${current_tag}"
+          else
+            range="${current_tag}"
+          fi
+
+          : > release-notes.md
+          git log --pretty=format:"- %h %s" "${range}" >> release-notes.md
+
+      - name: Create Release
+        uses: softprops/action-gh-release@v1
+        with:
+          files: dist/management.html
+          body_path: release-notes.md
+          draft: false
+          prerelease: false
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -0,0 +1,32 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+api.md
+usage.json
+CLAUDE.md
+AGENTS.md
+antigravity_usage.json
+codex_usage.json
+style.md
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+settings.local.json
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

.prettierrc

@@ -0,0 +1,9 @@
+{
+  "semi": true,
+  "trailingComma": "es5",
+  "singleQuote": true,
+  "printWidth": 100,
+  "tabWidth": 2,
+  "useTabs": false,
+  "arrowParens": "always"
+}

LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2025 Supra4E8C
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

README.md

@@ -1,145 +1,130 @@
-# Cli-Proxy-API-Management-Center
-这是一个用于管理 CLI Proxy API 的现代化 Web 界面。
+# CLI Proxy API Management Center
 
-## 功能特点
+A single-file WebUI (React + TypeScript) for operating and troubleshooting the **CLI Proxy API** via its **Management API** (config, credentials, logs, and usage).
 
-### 认证管理
-- 支持管理密钥认证
-- 可配置 API 基础地址
-- 实时连接状态检测
+[中文文档](README_CN.md)
 
-### 基础设置
-- **调试模式**: 开启/关闭调试功能
-- **代理设置**: 配置代理服务器 URL
-- **请求重试**: 设置请求重试次数
-- **配额管理**: 配置超出配额时的行为
-- **本地访问**: 允许本地未认证访问
+**Main Project**: https://github.com/router-for-me/CLIProxyAPI  
+**Example URL**: https://remote.router-for.me/  
+**Minimum Required Version**: ≥ 6.3.0 (recommended ≥ 6.5.0)
 
-### API 密钥管理
-- **代理服务认证密钥**: 管理用于代理服务的 API 密钥
-- **Gemini API**: 管理 Google Gemini 生成式语言 API 密钥
-- **Codex API**: 管理 OpenAI Codex API 配置
-- **Claude API**: 管理 Anthropic Claude API 配置
-- **OpenAI 兼容提供商**: 管理 OpenAI 兼容的第三方提供商
+Since version 6.0.19, the WebUI ships with the main program; access it via `/management.html` on the API port once the service is running.
 
-### 认证文件管理
-- 上传认证 JSON 文件
-- 下载现有认证文件
-- 删除单个或所有认证文件
-- 显示文件详细信息
+## What this is (and isn’t)
 
-### 系统监控
-- 实时 API 连接状态
-- 最后更新时间跟踪
-- 详细的错误信息提示
+- This repository is the WebUI only. It talks to the CLI Proxy API **Management API** (`/v0/management`) to read/update config, upload credentials, view logs, and inspect usage.
+- It is **not** a proxy and does not forward traffic.
 
-## 使用方法
+## Quick start
 
-### 1. 直接使用（推荐）
-直接用浏览器打开 `index.html` 文件即可使用。
+### Option A: Use the WebUI bundled in CLIProxyAPI (recommended)
+
+1. Start your CLI Proxy API service.
+2. Open: `http://<host>:<api_port>/management.html`
+3. Enter your **management key** and connect.
+
+The address is auto-detected from the current page URL; manual override is supported.
+
+### Option B: Run the dev server
 
-### 2. 使用本地服务器
 ```bash
-# 安装依赖
 npm install
-
-# 使用默认端口(3000）
-npm start
+npm run dev
 ```
 
-### 3. 配置 API 连接
-1. 打开管理界面
-2. 在认证配置区域输入：
-   - **API 地址**: `http://localhost:8317`/v0/management将会自动为您补全
-   - **管理密钥**: 您的管理密钥
-3. 点击"测试连接"按钮
-4. 连接成功后即可使用所有功能
+Open `http://localhost:5173`, then connect to your CLI Proxy API instance.
 
-## 界面说明
+### Option C: Build a single HTML file
 
-### 导航菜单
-- **基础设置**: 调试、代理、重试等基本配置
-- **API 密钥**: 各种 API 服务的密钥管理
-- **AI 提供商**: AI 服务提供商配置
-- **认证文件**: 认证文件的上传下载管理
-- **系统信息**: 连接状态和系统信息
-
-### 操作按钮
-- **刷新全部**: 重新加载所有配置数据
-- **连接状态**: 检查 API 连接状态
-- **添加**: 添加新的配置项
-- **编辑**: 编辑现有配置
-- **删除**: 删除配置项
-
-## 特性亮点
-
-### 现代化 UI
-- 响应式设计，支持各种屏幕尺寸
-- 美观的渐变色彩和阴影效果
-- 流畅的动画和过渡效果
-- 直观的图标和状态指示
-
-### 实时更新
-- 配置更改立即生效
-- 实时状态反馈
-- 自动数据刷新
-
-### 安全特性
-- 密钥遮蔽显示
-
-### 响应式设计
-- 完美适配桌面和移动设备
-- 自适应布局
-- 触摸友好的交互
-
-## 技术栈
-
-- **前端**: 纯 HTML、CSS、JavaScript
-- **样式**: CSS3 + Flexbox/Grid
-- **图标**: Font Awesome 6.4.0
-- **字体**: Segoe UI 系统字体
-- **API**: RESTful API 调用
-
-## 故障排除
-
-### 连接问题
-1. 确认 CLI Proxy API 服务正在运行
-2. 检查 API 地址是否正确
-3. 验证管理密钥是否有效
-4. 确认防火墙设置允许连接
-
-### 数据不更新
-1. 点击"刷新全部"按钮
-2. 检查网络连接
-3. 查看浏览器控制台错误信息
-
-## 开发说明
-
-### 文件结构
-```
-webui/
-├── index.html      # 主页面
-├── styles.css      # 样式文件
-├── app.js          # 应用逻辑
-├── package.json    # 项目配置
-└── README.md       # 说明文档
+```bash
+npm install
+npm run build
 ```
 
-### API 调用
-所有 API 调用都通过 `CLIProxyManager` 类的 `makeRequest` 方法处理，包含：
-- 自动添加认证头
-- 错误处理
-- JSON 响应解析
+- Output: `dist/index.html` (all assets are inlined).
+- For CLIProxyAPI bundling, the release workflow renames it to `management.html`.
+- To preview locally: `npm run preview`
 
-### 状态管理
-- 本地存储保存 API 地址和密钥
-- 内存中维护连接状态
-- 实时数据刷新机制
+Tip: opening `dist/index.html` via `file://` may be blocked by browser CORS; serving it (preview/static server) is more reliable.
 
-## 许可证
+## Connecting to the server
 
-MIT License
+### API address
 
-## 贡献
+You can enter any of the following; the UI will normalize it:
 
-欢迎提交 Issue 和 Pull Request 来改进这个项目！
+- `localhost:8317`
+- `http://192.168.1.10:8317`
+- `https://example.com:8317`
+- `http://example.com:8317/v0/management` (also accepted; the suffix is removed internally)
+
+### Management key (not the same as API keys)
+
+The management key is sent with every request as:
+
+- `Authorization: Bearer <MANAGEMENT_KEY>` (default)
+
+This is different from the proxy `api-keys` you manage inside the UI (those are for client requests to the proxy endpoints).
+
+### Remote management
+
+If you connect from a non-localhost browser, the server must allow remote management (e.g. `allow-remote-management: true`).  
+See `api.md` for the full authentication rules, server-side limits, and edge cases.
+
+## What you can manage (mapped to the UI pages)
+
+- **Dashboard**: connection status, server version/build date, quick counts, model availability snapshot.
+- **Basic Settings**: debug, proxy URL, request retry, quota fallback (switch project/preview models), usage statistics, request logging, file logging, WebSocket auth.
+- **API Keys**: manage proxy `api-keys` (add/edit/delete).
+- **AI Providers**:
+  - Gemini/Codex/Claude key entries (base URL, headers, proxy, model aliases, excluded models, prefix).
+  - OpenAI-compatible providers (multiple API keys, custom headers, model alias import via `/v1/models`, optional browser-side “chat/completions” test).
+  - Ampcode integration (upstream URL/key, force mappings, model mapping table).
+- **Auth Files**: upload/download/delete JSON credentials, filter/search/pagination, runtime-only indicators, view supported models per credential (when the server supports it), manage OAuth excluded models (supports `*` wildcards).
+- **OAuth**: start OAuth/device flows for supported providers, poll status, optionally submit callback `redirect_url`; includes iFlow cookie import.
+- **Usage**: requests/tokens charts (hour/day), per-API & per-model breakdown, cached/reasoning token breakdown, RPM/TPM window, optional cost estimation with locally-saved model pricing.
+- **Config**: edit `/config.yaml` in-browser with YAML highlighting + search, then save/reload.
+- **Logs**: tail logs with incremental polling, auto-refresh, search, hide management traffic, clear logs; download request error log files.
+- **System**: quick links + fetch `/v1/models` (grouped view). Requires at least one proxy API key to query models.
+
+## Build & release notes
+
+- Vite produces a **single HTML** output (`dist/index.html`) with all assets inlined (via `vite-plugin-singlefile`).
+- Tagging `vX.Y.Z` triggers `.github/workflows/release.yml` to publish `dist/management.html`.
+- The UI version shown in the footer is injected at build time (env `VERSION`, git tag, or `package.json` fallback).
+
+## Security notes
+
+- The management key is stored in browser `localStorage` using a lightweight obfuscation format (`enc::v1::...`) to avoid plaintext storage; treat it as sensitive.
+- Use a dedicated browser profile/device for management. Be cautious when enabling remote management and evaluate its exposure surface.
+
+## Troubleshooting
+
+- **Can’t connect / 401**: confirm the API address and management key; remote access may require enabling remote management in the server config.
+- **Repeated auth failures**: the server may temporarily block remote IPs.
+- **Logs page missing**: enable “Logging to file” in Basic Settings; the navigation item is shown only when file logging is enabled.
+- **Some features show “unsupported”**: the backend may be too old or the endpoint is disabled/absent (common for model lists per auth file, excluded models, logs).
+- **OpenAI provider test fails**: the test runs in the browser and depends on network/CORS of the provider endpoint; a failure here does not always mean the server cannot reach it.
+
+## Development
+
+```bash
+npm run dev        # Vite dev server
+npm run build      # tsc + Vite build
+npm run preview    # serve dist locally
+npm run lint       # ESLint (fails on warnings)
+npm run format     # Prettier
+npm run type-check # tsc --noEmit
+```
+
+## Contributing
+
+Issues and PRs are welcome. Please include:
+
+- Reproduction steps (server version + UI version)
+- Screenshots for UI changes
+- Verification notes (`npm run lint`, `npm run type-check`)
+
+## License
+
+MIT

README_CN.md

@@ -0,0 +1,130 @@
+# CLI Proxy API 管理中心
+
+用于管理与排障 **CLI Proxy API** 的单文件 WebUI（React + TypeScript），通过 **Management API** 完成配置、凭据、日志与统计等运维工作。
+
+[English](README.md)
+
+**主项目**: https://github.com/router-for-me/CLIProxyAPI  
+**示例地址**: https://remote.router-for.me/  
+**最低版本要求**: ≥ 6.3.0（推荐 ≥ 6.5.0）
+
+Since version 6.0.19, the WebUI ships with the main program; access it via `/management.html` on the API port once the service is running.
+
+## 这是什么（以及不是什么）
+
+- 本仓库只包含 Web 管理界面本身，通过 CLI Proxy API 的 **Management API**（`/v0/management`）读取/修改配置、上传凭据、查看日志与使用统计。
+- 它 **不是** 代理本体，不参与流量转发。
+
+## 快速开始
+
+### 方式 A：使用 CLIProxyAPI 自带的 WebUI（推荐）
+
+1. 启动 CLI Proxy API 服务。
+2. 打开：`http://<host>:<api_port>/management.html`
+3. 输入 **管理密钥** 并连接。
+
+页面会根据当前地址自动推断 API 地址，也支持手动修改。
+
+### 方式 B：开发调试
+
+```bash
+npm install
+npm run dev
+```
+
+打开 `http://localhost:5173`，然后连接到你的 CLI Proxy API 实例。
+
+### 方式 C：构建单文件 HTML
+
+```bash
+npm install
+npm run build
+```
+
+- 构建产物：`dist/index.html`（资源已全部内联）。
+- 在 CLIProxyAPI 的发布流程里会重命名为 `management.html`。
+- 本地预览：`npm run preview`
+
+提示：直接用 `file://` 打开 `dist/index.html` 可能遇到浏览器 CORS 限制；更稳妥的方式是用预览/静态服务器打开。
+
+## 连接说明
+
+### API 地址怎么填
+
+以下格式均可，WebUI 会自动归一化：
+
+- `localhost:8317`
+- `http://192.168.1.10:8317`
+- `https://example.com:8317`
+- `http://example.com:8317/v0/management`（也可填写，后缀会被自动去除）
+
+### 管理密钥（注意：不是 API Keys）
+
+管理密钥会以如下方式随请求发送：
+
+- `Authorization: Bearer <MANAGEMENT_KEY>`（默认）
+
+这与 WebUI 中“API Keys”页面管理的 `api-keys` 不同：后者是代理对外接口（如 OpenAI 兼容接口）给客户端使用的鉴权 key。
+
+### 远程管理
+
+当你从非 localhost 的浏览器访问时，服务端通常需要开启远程管理（例如 `allow-remote-management: true`）。  
+完整鉴权规则、限制与边界情况请查看 `api.md`。
+
+## 功能一览（按页面对应）
+
+- **仪表盘**：连接状态、服务版本/构建时间、关键数量概览、可用模型概览。
+- **基础设置**：调试开关、代理 URL、请求重试、配额回退（切项目/切预览模型）、使用统计、请求日志、文件日志、WebSocket 鉴权。
+- **API Keys**：管理代理 `api-keys`（增/改/删）。
+- **AI 提供商**：
+  - Gemini/Codex/Claude 配置（Base URL、Headers、代理、模型别名、排除模型、Prefix）。
+  - OpenAI 兼容提供商（多 Key、Header、自助从 `/v1/models` 拉取并导入模型别名、可选浏览器侧 `chat/completions` 测试）。
+  - Ampcode 集成（上游地址/密钥、强制映射、模型映射表）。
+- **认证文件**：上传/下载/删除 JSON 凭据，筛选/搜索/分页，标记 runtime-only；查看单个凭据可用模型（依赖后端支持）；管理 OAuth 排除模型（支持 `*` 通配符）。
+- **OAuth**：对支持的提供商发起 OAuth/设备码流程，轮询状态；可选提交回调 `redirect_url`；包含 iFlow Cookie 导入。
+- **使用统计**：按小时/天图表、按 API 与按模型统计、缓存/推理 Token 拆分、RPM/TPM 时间窗、可选本地保存的模型价格用于费用估算。
+- **配置文件**：浏览器内编辑 `/config.yaml`（YAML 高亮 + 搜索），保存/重载。
+- **日志**：增量拉取日志、自动刷新、搜索、隐藏管理端流量、清空日志；下载请求错误日志文件。
+- **系统信息**：快捷链接 + 拉取 `/v1/models` 并分组展示（需要至少一个代理 API Key 才能查询模型）。
+
+## 构建与发布说明
+
+- 使用 Vite 输出 **单文件 HTML**（`dist/index.html`），资源全部内联（`vite-plugin-singlefile`）。
+- 打 `vX.Y.Z` 标签会触发 `.github/workflows/release.yml`，发布 `dist/management.html`。
+- 页脚显示的 UI 版本在构建期注入（优先使用环境变量 `VERSION`，否则使用 git tag / `package.json`）。
+
+## 安全提示
+
+- 管理密钥会存入浏览器 `localStorage`，并使用轻量混淆格式（`enc::v1::...`）避免明文；仍应视为敏感信息。
+- 建议使用独立浏览器配置/设备进行管理；开启远程管理时请谨慎评估暴露面。
+
+## 常见问题
+
+- **无法连接 / 401**：确认 API 地址与管理密钥；远程访问可能需要服务端开启远程管理。
+- **反复输错密钥**：服务端可能对远程 IP 进行临时封禁。
+- **日志页面不显示**：需要在“基础设置”里开启“写入日志文件”，导航项才会出现。
+- **功能提示不支持**：多为后端版本较旧或接口未启用/不存在（如：认证文件模型列表、排除模型、日志相关接口）。
+- **OpenAI 提供商测试失败**：测试在浏览器侧执行，会受网络与 CORS 影响；这里失败不一定代表服务端不可用。
+
+## 开发命令
+
+```bash
+npm run dev        # 启动开发服务器
+npm run build      # tsc + Vite 构建
+npm run preview    # 本地预览 dist
+npm run lint       # ESLint（warnings 视为失败）
+npm run format     # Prettier
+npm run type-check # tsc --noEmit
+```
+
+## 贡献
+
+欢迎提 Issue 与 PR。建议附上：
+
+- 复现步骤（服务端版本 + UI 版本）
+- UI 改动截图
+- 验证记录（`npm run lint`、`npm run type-check`）
+
+## 许可证
+
+MIT

eslint.config.js

@@ -0,0 +1,30 @@
+import js from '@eslint/js';
+import globals from 'globals';
+import reactHooks from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
+import tseslint from 'typescript-eslint';
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+      '@typescript-eslint/no-explicit-any': 'warn',
+      '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
+    },
+  },
+);

i18n.js

@@ -1,606 +0,0 @@
-// 国际化语言包
-const i18n = {
-    // 语言配置
-    currentLanguage: 'zh-CN',
-    fallbackLanguage: 'zh-CN',
-    
-    // 语言包
-    translations: {
-        'zh-CN': {
-            // 通用
-            'common.login': '登录',
-            'common.logout': '登出',
-            'common.cancel': '取消',
-            'common.confirm': '确认',
-            'common.save': '保存',
-            'common.delete': '删除',
-            'common.edit': '编辑',
-            'common.add': '添加',
-            'common.update': '更新',
-            'common.refresh': '刷新',
-            'common.close': '关闭',
-            'common.success': '成功',
-            'common.error': '错误',
-            'common.info': '信息',
-            'common.warning': '警告',
-            'common.loading': '加载中...',
-            'common.connecting': '连接中...',
-            'common.connected': '已连接',
-            'common.disconnected': '未连接',
-            'common.connecting_status': '连接中',
-            'common.connected_status': '已连接',
-            'common.disconnected_status': '未连接',
-            'common.yes': '是',
-            'common.no': '否',
-            'common.optional': '可选',
-            'common.required': '必填',
-            'common.api_key': '密钥',
-            'common.base_url': '地址',
-            
-            // 页面标题
-            'title.main': 'CLI Proxy API Management Center',
-            'title.login': 'CLI Proxy API Management Center',
-            
-            // 自动登录
-            'auto_login.title': '正在自动登录...',
-            'auto_login.message': '正在使用本地保存的连接信息尝试连接服务器',
-            
-            // 登录页面
-            'login.subtitle': '请输入连接信息以访问管理界面',
-            'login.tab_local_title': 'Local',
-            'login.tab_local_subtitle': '在本地运行 Cli Web 服务器',
-            'login.tab_remote_title': 'Remote',
-            'login.tab_remote_subtitle': '远程连接到 Cli Web 服务器',
-            'login.proxy_label': '代理服务器 (可选):',
-            'login.proxy_placeholder': 'http://ip:port 或 https://ip:port 或 socks5://user:pass@ip:port',
-            'login.local_port_label': '端口号:',
-            'login.local_port_placeholder': '8317',
-            'login.local_url_hint': '将连接到 http://localhost:端口/v0/management',
-            'login.api_url_label': 'API 基础地址:',
-            'login.api_url_placeholder': '例如: http://localhost:8317 或 127.0.0.1:8317',
-            'login.remote_api_url_placeholder': '例如: https://example.com:8317',
-            'login.api_url_hint': '将自动补全 /v0/management',
-            'login.management_key_label': '管理密钥:',
-            'login.management_key_placeholder': '请输入管理密钥',
-            'login.connect_button': '连接',
-            'login.submit_button': '登录',
-            'login.submitting': '连接中...',
-            'login.error_title': '登录失败',
-            'login.error_required': '请填写完整的连接信息',
-            'login.error_invalid': '连接失败，请检查地址和密钥',
-            
-            // 头部导航
-            'header.check_connection': '检查连接',
-            'header.refresh_all': '刷新全部',
-            'header.logout': '登出',
-            
-            // 连接信息
-            'connection.title': '连接信息',
-            'connection.server_address': '服务器地址:',
-            'connection.management_key': '管理密钥:',
-            'connection.status': '连接状态:',
-            
-            // 侧边栏导航
-            'nav.basic_settings': '基础设置',
-            'nav.api_keys': 'API 密钥',
-            'nav.ai_providers': 'AI 提供商',
-            'nav.auth_files': '认证文件',
-            'nav.system_info': '系统信息',
-            
-            // 基础设置
-            'basic_settings.title': '基础设置',
-            'basic_settings.debug_title': '调试模式',
-            'basic_settings.debug_enable': '启用调试模式',
-            'basic_settings.proxy_title': '代理设置',
-            'basic_settings.proxy_url_label': '代理 URL:',
-            'basic_settings.proxy_url_placeholder': '例如: socks5://user:pass@127.0.0.1:1080/',
-            'basic_settings.proxy_update': '更新',
-            'basic_settings.proxy_clear': '清空',
-            'basic_settings.retry_title': '请求重试',
-            'basic_settings.retry_count_label': '重试次数:',
-            'basic_settings.retry_update': '更新',
-            'basic_settings.quota_title': '配额超出行为',
-            'basic_settings.quota_switch_project': '自动切换项目',
-            'basic_settings.quota_switch_preview': '切换到预览模型',
-            'basic_settings.localhost_title': '本地访问',
-            'basic_settings.localhost_allow': '允许本地未认证访问',
-            
-            // API 密钥管理
-            'api_keys.title': 'API 密钥管理',
-            'api_keys.proxy_auth_title': '代理服务认证密钥',
-            'api_keys.add_button': '添加密钥',
-            'api_keys.empty_title': '暂无API密钥',
-            'api_keys.empty_desc': '点击上方按钮添加第一个密钥',
-            'api_keys.item_title': 'API密钥',
-            'api_keys.add_modal_title': '添加API密钥',
-            'api_keys.add_modal_key_label': 'API密钥:',
-            'api_keys.add_modal_key_placeholder': '请输入API密钥',
-            'api_keys.edit_modal_title': '编辑API密钥',
-            'api_keys.edit_modal_key_label': 'API密钥:',
-            'api_keys.delete_confirm': '确定要删除这个API密钥吗？',
-            
-            // AI 提供商
-            'ai_providers.title': 'AI 提供商配置',
-            'ai_providers.gemini_title': 'Gemini API 密钥',
-            'ai_providers.gemini_add_button': '添加密钥',
-            'ai_providers.gemini_empty_title': '暂无Gemini密钥',
-            'ai_providers.gemini_empty_desc': '点击上方按钮添加第一个密钥',
-            'ai_providers.gemini_item_title': 'Gemini密钥',
-            'ai_providers.gemini_add_modal_title': '添加Gemini API密钥',
-            'ai_providers.gemini_add_modal_key_label': 'API密钥:',
-            'ai_providers.gemini_add_modal_key_placeholder': '请输入Gemini API密钥',
-            'ai_providers.gemini_edit_modal_title': '编辑Gemini API密钥',
-            'ai_providers.gemini_edit_modal_key_label': 'API密钥:',
-            'ai_providers.gemini_delete_confirm': '确定要删除这个Gemini密钥吗？',
-            
-            'ai_providers.codex_title': 'Codex API 配置',
-            'ai_providers.codex_add_button': '添加配置',
-            'ai_providers.codex_empty_title': '暂无Codex配置',
-            'ai_providers.codex_empty_desc': '点击上方按钮添加第一个配置',
-            'ai_providers.codex_item_title': 'Codex配置',
-            'ai_providers.codex_add_modal_title': '添加Codex API配置',
-            'ai_providers.codex_add_modal_key_label': 'API密钥:',
-            'ai_providers.codex_add_modal_key_placeholder': '请输入Codex API密钥',
-            'ai_providers.codex_add_modal_url_label': 'Base URL (可选):',
-            'ai_providers.codex_add_modal_url_placeholder': '例如: https://api.example.com',
-            'ai_providers.codex_edit_modal_title': '编辑Codex API配置',
-            'ai_providers.codex_edit_modal_key_label': 'API密钥:',
-            'ai_providers.codex_edit_modal_url_label': 'Base URL (可选):',
-            'ai_providers.codex_delete_confirm': '确定要删除这个Codex配置吗？',
-            
-            'ai_providers.claude_title': 'Claude API 配置',
-            'ai_providers.claude_add_button': '添加配置',
-            'ai_providers.claude_empty_title': '暂无Claude配置',
-            'ai_providers.claude_empty_desc': '点击上方按钮添加第一个配置',
-            'ai_providers.claude_item_title': 'Claude配置',
-            'ai_providers.claude_add_modal_title': '添加Claude API配置',
-            'ai_providers.claude_add_modal_key_label': 'API密钥:',
-            'ai_providers.claude_add_modal_key_placeholder': '请输入Claude API密钥',
-            'ai_providers.claude_add_modal_url_label': 'Base URL (可选):',
-            'ai_providers.claude_add_modal_url_placeholder': '例如: https://api.anthropic.com',
-            'ai_providers.claude_edit_modal_title': '编辑Claude API配置',
-            'ai_providers.claude_edit_modal_key_label': 'API密钥:',
-            'ai_providers.claude_edit_modal_url_label': 'Base URL (可选):',
-            'ai_providers.claude_delete_confirm': '确定要删除这个Claude配置吗？',
-            
-            'ai_providers.openai_title': 'OpenAI 兼容提供商',
-            'ai_providers.openai_add_button': '添加提供商',
-            'ai_providers.openai_empty_title': '暂无OpenAI兼容提供商',
-            'ai_providers.openai_empty_desc': '点击上方按钮添加第一个提供商',
-            'ai_providers.openai_add_modal_title': '添加OpenAI兼容提供商',
-            'ai_providers.openai_add_modal_name_label': '提供商名称:',
-            'ai_providers.openai_add_modal_name_placeholder': '例如: openrouter',
-            'ai_providers.openai_add_modal_url_label': 'Base URL:',
-            'ai_providers.openai_add_modal_url_placeholder': '例如: https://openrouter.ai/api/v1',
-            'ai_providers.openai_add_modal_keys_label': 'API密钥 (每行一个):',
-            'ai_providers.openai_add_modal_keys_placeholder': 'sk-key1\nsk-key2',
-            'ai_providers.openai_edit_modal_title': '编辑OpenAI兼容提供商',
-            'ai_providers.openai_edit_modal_name_label': '提供商名称:',
-            'ai_providers.openai_edit_modal_url_label': 'Base URL:',
-            'ai_providers.openai_edit_modal_keys_label': 'API密钥 (每行一个):',
-            'ai_providers.openai_delete_confirm': '确定要删除这个OpenAI提供商吗？',
-            'ai_providers.openai_keys_count': '密钥数量',
-            'ai_providers.openai_models_count': '模型数量',
-            
-            // 认证文件管理
-            'auth_files.title': '认证文件管理',
-            'auth_files.title_section': '认证文件',
-            'auth_files.upload_button': '上传文件',
-            'auth_files.delete_all_button': '删除全部',
-            'auth_files.empty_title': '暂无认证文件',
-            'auth_files.empty_desc': '点击上方按钮上传第一个文件',
-            'auth_files.file_size': '大小',
-            'auth_files.file_modified': '修改时间',
-            'auth_files.download_button': '下载',
-            'auth_files.delete_button': '删除',
-            'auth_files.delete_confirm': '确定要删除文件',
-            'auth_files.delete_all_confirm': '确定要删除所有认证文件吗？此操作不可恢复！',
-            'auth_files.upload_error_json': '只能上传JSON文件',
-            'auth_files.upload_success': '文件上传成功',
-            'auth_files.download_success': '文件下载成功',
-            'auth_files.delete_success': '文件删除成功',
-            'auth_files.delete_all_success': '成功删除',
-            'auth_files.files_count': '个文件',
-            
-            // 系统信息
-            'system_info.title': '系统信息',
-            'system_info.connection_status_title': '连接状态',
-            'system_info.api_status_label': 'API 状态:',
-            'system_info.config_status_label': '配置状态:',
-            'system_info.last_update_label': '最后更新:',
-            'system_info.cache_data': '缓存数据',
-            'system_info.real_time_data': '实时数据',
-            'system_info.not_loaded': '未加载',
-            'system_info.seconds_ago': '秒前',
-            
-            // 通知消息
-            'notification.debug_updated': '调试设置已更新',
-            'notification.proxy_updated': '代理设置已更新',
-            'notification.proxy_cleared': '代理设置已清空',
-            'notification.retry_updated': '重试设置已更新',
-            'notification.quota_switch_project_updated': '项目切换设置已更新',
-            'notification.quota_switch_preview_updated': '预览模型切换设置已更新',
-            'notification.localhost_updated': '本地访问设置已更新',
-            'notification.api_key_added': 'API密钥添加成功',
-            'notification.api_key_updated': 'API密钥更新成功',
-            'notification.api_key_deleted': 'API密钥删除成功',
-            'notification.gemini_key_added': 'Gemini密钥添加成功',
-            'notification.gemini_key_updated': 'Gemini密钥更新成功',
-            'notification.gemini_key_deleted': 'Gemini密钥删除成功',
-            'notification.codex_config_added': 'Codex配置添加成功',
-            'notification.codex_config_updated': 'Codex配置更新成功',
-            'notification.codex_config_deleted': 'Codex配置删除成功',
-            'notification.claude_config_added': 'Claude配置添加成功',
-            'notification.claude_config_updated': 'Claude配置更新成功',
-            'notification.claude_config_deleted': 'Claude配置删除成功',
-            'notification.openai_provider_added': 'OpenAI提供商添加成功',
-            'notification.openai_provider_updated': 'OpenAI提供商更新成功',
-            'notification.openai_provider_deleted': 'OpenAI提供商删除成功',
-            'notification.data_refreshed': '数据刷新成功',
-            'notification.connection_required': '请先建立连接',
-            'notification.refresh_failed': '刷新失败',
-            'notification.update_failed': '更新失败',
-            'notification.add_failed': '添加失败',
-            'notification.delete_failed': '删除失败',
-            'notification.upload_failed': '上传失败',
-            'notification.download_failed': '下载失败',
-            'notification.login_failed': '登录失败',
-            'notification.please_enter': '请输入',
-            'notification.please_fill': '请填写',
-            'notification.provider_name_url': '提供商名称和Base URL',
-            'notification.api_key': 'API密钥',
-            'notification.gemini_api_key': 'Gemini API密钥',
-            'notification.codex_api_key': 'Codex API密钥',
-            'notification.claude_api_key': 'Claude API密钥',
-            
-            // 语言切换
-            'language.switch': '语言',
-            'language.chinese': '中文',
-            'language.english': 'English',
-            
-            // 主题切换
-            'theme.switch': '主题',
-            'theme.light': '亮色',
-            'theme.dark': '暗色',
-            'theme.switch_to_light': '切换到亮色模式',
-            'theme.switch_to_dark': '切换到暗色模式',
-            'theme.auto': '跟随系统'
-        },
-        
-        'en-US': {
-            // Common
-            'common.login': 'Login',
-            'common.logout': 'Logout',
-            'common.cancel': 'Cancel',
-            'common.confirm': 'Confirm',
-            'common.save': 'Save',
-            'common.delete': 'Delete',
-            'common.edit': 'Edit',
-            'common.add': 'Add',
-            'common.update': 'Update',
-            'common.refresh': 'Refresh',
-            'common.close': 'Close',
-            'common.success': 'Success',
-            'common.error': 'Error',
-            'common.info': 'Info',
-            'common.warning': 'Warning',
-            'common.loading': 'Loading...',
-            'common.connecting': 'Connecting...',
-            'common.connected': 'Connected',
-            'common.disconnected': 'Disconnected',
-            'common.connecting_status': 'Connecting',
-            'common.connected_status': 'Connected',
-            'common.disconnected_status': 'Disconnected',
-            'common.yes': 'Yes',
-            'common.no': 'No',
-            'common.optional': 'Optional',
-            'common.required': 'Required',
-            'common.api_key': 'Key',
-            'common.base_url': 'Address',
-            
-            // Page titles
-            'title.main': 'CLI Proxy API Management Center',
-            'title.login': 'CLI Proxy API Management Center',
-            
-            // Auto login
-            'auto_login.title': 'Auto Login in Progress...',
-            'auto_login.message': 'Attempting to connect to server using locally saved connection information',
-            
-            // Login page
-            'login.subtitle': 'Please enter connection information to access the management interface',
-            'login.tab_local_title': 'Local',
-            'login.tab_local_subtitle': 'Run Cli Web server on your local machine',
-            'login.tab_remote_title': 'Remote',
-            'login.tab_remote_subtitle': 'Remote connection for a remote Cli Web server',
-            'login.proxy_label': 'Proxy Server (Optional):',
-            'login.proxy_placeholder': 'http://ip:port or https://ip:port or socks5://user:pass@ip:port',
-            'login.local_port_label': 'Port:',
-            'login.local_port_placeholder': '8317',
-            'login.local_url_hint': 'Will connect to http://localhost:port/v0/management',
-            'login.api_url_label': 'API Base URL:',
-            'login.api_url_placeholder': 'e.g.: http://localhost:8317 or 127.0.0.1:8317',
-            'login.remote_api_url_placeholder': 'e.g.: https://example.com:8317',
-            'login.api_url_hint': 'Will automatically append /v0/management',
-            'login.management_key_label': 'Management Key:',
-            'login.management_key_placeholder': 'Please enter management key',
-            'login.connect_button': 'Connect',
-            'login.submit_button': 'Login',
-            'login.submitting': 'Connecting...',
-            'login.error_title': 'Login Failed',
-            'login.error_required': 'Please fill in complete connection information',
-            'login.error_invalid': 'Connection failed, please check address and key',
-            
-            // Header navigation
-            'header.check_connection': 'Check Connection',
-            'header.refresh_all': 'Refresh All',
-            'header.logout': 'Logout',
-            
-            // Connection info
-            'connection.title': 'Connection Information',
-            'connection.server_address': 'Server Address:',
-            'connection.management_key': 'Management Key:',
-            'connection.status': 'Connection Status:',
-            
-            // Sidebar navigation
-            'nav.basic_settings': 'Basic Settings',
-            'nav.api_keys': 'API Keys',
-            'nav.ai_providers': 'AI Providers',
-            'nav.auth_files': 'Auth Files',
-            'nav.system_info': 'System Info',
-            
-            // Basic settings
-            'basic_settings.title': 'Basic Settings',
-            'basic_settings.debug_title': 'Debug Mode',
-            'basic_settings.debug_enable': 'Enable Debug Mode',
-            'basic_settings.proxy_title': 'Proxy Settings',
-            'basic_settings.proxy_url_label': 'Proxy URL:',
-            'basic_settings.proxy_url_placeholder': 'e.g.: socks5://user:pass@127.0.0.1:1080/',
-            'basic_settings.proxy_update': 'Update',
-            'basic_settings.proxy_clear': 'Clear',
-            'basic_settings.retry_title': 'Request Retry',
-            'basic_settings.retry_count_label': 'Retry Count:',
-            'basic_settings.retry_update': 'Update',
-            'basic_settings.quota_title': 'Quota Exceeded Behavior',
-            'basic_settings.quota_switch_project': 'Auto Switch Project',
-            'basic_settings.quota_switch_preview': 'Switch to Preview Model',
-            'basic_settings.localhost_title': 'Local Access',
-            'basic_settings.localhost_allow': 'Allow Localhost Unauthenticated Access',
-            
-            // API Keys management
-            'api_keys.title': 'API Keys Management',
-            'api_keys.proxy_auth_title': 'Proxy Service Authentication Keys',
-            'api_keys.add_button': 'Add Key',
-            'api_keys.empty_title': 'No API Keys',
-            'api_keys.empty_desc': 'Click the button above to add the first key',
-            'api_keys.item_title': 'API Key',
-            'api_keys.add_modal_title': 'Add API Key',
-            'api_keys.add_modal_key_label': 'API Key:',
-            'api_keys.add_modal_key_placeholder': 'Please enter API key',
-            'api_keys.edit_modal_title': 'Edit API Key',
-            'api_keys.edit_modal_key_label': 'API Key:',
-            'api_keys.delete_confirm': 'Are you sure you want to delete this API key?',
-            
-            // AI Providers
-            'ai_providers.title': 'AI Providers Configuration',
-            'ai_providers.gemini_title': 'Gemini API Keys',
-            'ai_providers.gemini_add_button': 'Add Key',
-            'ai_providers.gemini_empty_title': 'No Gemini Keys',
-            'ai_providers.gemini_empty_desc': 'Click the button above to add the first key',
-            'ai_providers.gemini_item_title': 'Gemini Key',
-            'ai_providers.gemini_add_modal_title': 'Add Gemini API Key',
-            'ai_providers.gemini_add_modal_key_label': 'API Key:',
-            'ai_providers.gemini_add_modal_key_placeholder': 'Please enter Gemini API key',
-            'ai_providers.gemini_edit_modal_title': 'Edit Gemini API Key',
-            'ai_providers.gemini_edit_modal_key_label': 'API Key:',
-            'ai_providers.gemini_delete_confirm': 'Are you sure you want to delete this Gemini key?',
-            
-            'ai_providers.codex_title': 'Codex API Configuration',
-            'ai_providers.codex_add_button': 'Add Configuration',
-            'ai_providers.codex_empty_title': 'No Codex Configuration',
-            'ai_providers.codex_empty_desc': 'Click the button above to add the first configuration',
-            'ai_providers.codex_item_title': 'Codex Configuration',
-            'ai_providers.codex_add_modal_title': 'Add Codex API Configuration',
-            'ai_providers.codex_add_modal_key_label': 'API Key:',
-            'ai_providers.codex_add_modal_key_placeholder': 'Please enter Codex API key',
-            'ai_providers.codex_add_modal_url_label': 'Base URL (Optional):',
-            'ai_providers.codex_add_modal_url_placeholder': 'e.g.: https://api.example.com',
-            'ai_providers.codex_edit_modal_title': 'Edit Codex API Configuration',
-            'ai_providers.codex_edit_modal_key_label': 'API Key:',
-            'ai_providers.codex_edit_modal_url_label': 'Base URL (Optional):',
-            'ai_providers.codex_delete_confirm': 'Are you sure you want to delete this Codex configuration?',
-            
-            'ai_providers.claude_title': 'Claude API Configuration',
-            'ai_providers.claude_add_button': 'Add Configuration',
-            'ai_providers.claude_empty_title': 'No Claude Configuration',
-            'ai_providers.claude_empty_desc': 'Click the button above to add the first configuration',
-            'ai_providers.claude_item_title': 'Claude Configuration',
-            'ai_providers.claude_add_modal_title': 'Add Claude API Configuration',
-            'ai_providers.claude_add_modal_key_label': 'API Key:',
-            'ai_providers.claude_add_modal_key_placeholder': 'Please enter Claude API key',
-            'ai_providers.claude_add_modal_url_label': 'Base URL (Optional):',
-            'ai_providers.claude_add_modal_url_placeholder': 'e.g.: https://api.anthropic.com',
-            'ai_providers.claude_edit_modal_title': 'Edit Claude API Configuration',
-            'ai_providers.claude_edit_modal_key_label': 'API Key:',
-            'ai_providers.claude_edit_modal_url_label': 'Base URL (Optional):',
-            'ai_providers.claude_delete_confirm': 'Are you sure you want to delete this Claude configuration?',
-            
-            'ai_providers.openai_title': 'OpenAI Compatible Providers',
-            'ai_providers.openai_add_button': 'Add Provider',
-            'ai_providers.openai_empty_title': 'No OpenAI Compatible Providers',
-            'ai_providers.openai_empty_desc': 'Click the button above to add the first provider',
-            'ai_providers.openai_add_modal_title': 'Add OpenAI Compatible Provider',
-            'ai_providers.openai_add_modal_name_label': 'Provider Name:',
-            'ai_providers.openai_add_modal_name_placeholder': 'e.g.: openrouter',
-            'ai_providers.openai_add_modal_url_label': 'Base URL:',
-            'ai_providers.openai_add_modal_url_placeholder': 'e.g.: https://openrouter.ai/api/v1',
-            'ai_providers.openai_add_modal_keys_label': 'API Keys (one per line):',
-            'ai_providers.openai_add_modal_keys_placeholder': 'sk-key1\nsk-key2',
-            'ai_providers.openai_edit_modal_title': 'Edit OpenAI Compatible Provider',
-            'ai_providers.openai_edit_modal_name_label': 'Provider Name:',
-            'ai_providers.openai_edit_modal_url_label': 'Base URL:',
-            'ai_providers.openai_edit_modal_keys_label': 'API Keys (one per line):',
-            'ai_providers.openai_delete_confirm': 'Are you sure you want to delete this OpenAI provider?',
-            'ai_providers.openai_keys_count': 'Keys Count',
-            'ai_providers.openai_models_count': 'Models Count',
-            
-            // Auth files management
-            'auth_files.title': 'Auth Files Management',
-            'auth_files.title_section': 'Auth Files',
-            'auth_files.upload_button': 'Upload File',
-            'auth_files.delete_all_button': 'Delete All',
-            'auth_files.empty_title': 'No Auth Files',
-            'auth_files.empty_desc': 'Click the button above to upload the first file',
-            'auth_files.file_size': 'Size',
-            'auth_files.file_modified': 'Modified',
-            'auth_files.download_button': 'Download',
-            'auth_files.delete_button': 'Delete',
-            'auth_files.delete_confirm': 'Are you sure you want to delete file',
-            'auth_files.delete_all_confirm': 'Are you sure you want to delete all auth files? This operation cannot be undone!',
-            'auth_files.upload_error_json': 'Only JSON files are allowed',
-            'auth_files.upload_success': 'File uploaded successfully',
-            'auth_files.download_success': 'File downloaded successfully',
-            'auth_files.delete_success': 'File deleted successfully',
-            'auth_files.delete_all_success': 'Successfully deleted',
-            'auth_files.files_count': 'files',
-            
-            // System info
-            'system_info.title': 'System Information',
-            'system_info.connection_status_title': 'Connection Status',
-            'system_info.api_status_label': 'API Status:',
-            'system_info.config_status_label': 'Config Status:',
-            'system_info.last_update_label': 'Last Update:',
-            'system_info.cache_data': 'Cache Data',
-            'system_info.real_time_data': 'Real-time Data',
-            'system_info.not_loaded': 'Not Loaded',
-            'system_info.seconds_ago': 'seconds ago',
-            
-            // Notification messages
-            'notification.debug_updated': 'Debug settings updated',
-            'notification.proxy_updated': 'Proxy settings updated',
-            'notification.proxy_cleared': 'Proxy settings cleared',
-            'notification.retry_updated': 'Retry settings updated',
-            'notification.quota_switch_project_updated': 'Project switch settings updated',
-            'notification.quota_switch_preview_updated': 'Preview model switch settings updated',
-            'notification.localhost_updated': 'Localhost access settings updated',
-            'notification.api_key_added': 'API key added successfully',
-            'notification.api_key_updated': 'API key updated successfully',
-            'notification.api_key_deleted': 'API key deleted successfully',
-            'notification.gemini_key_added': 'Gemini key added successfully',
-            'notification.gemini_key_updated': 'Gemini key updated successfully',
-            'notification.gemini_key_deleted': 'Gemini key deleted successfully',
-            'notification.codex_config_added': 'Codex configuration added successfully',
-            'notification.codex_config_updated': 'Codex configuration updated successfully',
-            'notification.codex_config_deleted': 'Codex configuration deleted successfully',
-            'notification.claude_config_added': 'Claude configuration added successfully',
-            'notification.claude_config_updated': 'Claude configuration updated successfully',
-            'notification.claude_config_deleted': 'Claude configuration deleted successfully',
-            'notification.openai_provider_added': 'OpenAI provider added successfully',
-            'notification.openai_provider_updated': 'OpenAI provider updated successfully',
-            'notification.openai_provider_deleted': 'OpenAI provider deleted successfully',
-            'notification.data_refreshed': 'Data refreshed successfully',
-            'notification.connection_required': 'Please establish connection first',
-            'notification.refresh_failed': 'Refresh failed',
-            'notification.update_failed': 'Update failed',
-            'notification.add_failed': 'Add failed',
-            'notification.delete_failed': 'Delete failed',
-            'notification.upload_failed': 'Upload failed',
-            'notification.download_failed': 'Download failed',
-            'notification.login_failed': 'Login failed',
-            'notification.please_enter': 'Please enter',
-            'notification.please_fill': 'Please fill',
-            'notification.provider_name_url': 'provider name and Base URL',
-            'notification.api_key': 'API key',
-            'notification.gemini_api_key': 'Gemini API key',
-            'notification.codex_api_key': 'Codex API key',
-            'notification.claude_api_key': 'Claude API key',
-            
-            // Language switch
-            'language.switch': 'Language',
-            'language.chinese': '中文',
-            'language.english': 'English',
-            
-            // Theme switch
-            'theme.switch': 'Theme',
-            'theme.light': 'Light',
-            'theme.dark': 'Dark',
-            'theme.switch_to_light': 'Switch to light mode',
-            'theme.switch_to_dark': 'Switch to dark mode',
-            'theme.auto': 'Follow system'
-        }
-    },
-    
-    // 获取翻译文本
-    t(key, params = {}) {
-        const translation = this.translations[this.currentLanguage]?.[key] || 
-                           this.translations[this.fallbackLanguage]?.[key] || 
-                           key;
-        
-        // 简单的参数替换
-        return translation.replace(/\{(\w+)\}/g, (match, param) => {
-            return params[param] || match;
-        });
-    },
-    
-    // 设置语言
-    setLanguage(lang) {
-        if (this.translations[lang]) {
-            this.currentLanguage = lang;
-            localStorage.setItem('preferredLanguage', lang);
-            this.updatePageLanguage();
-            this.updateAllTexts();
-        }
-    },
-    
-    // 更新页面语言属性
-    updatePageLanguage() {
-        document.documentElement.lang = this.currentLanguage;
-    },
-    
-    // 更新所有文本
-    updateAllTexts() {
-        // 更新所有带有 data-i18n 属性的元素
-        document.querySelectorAll('[data-i18n]').forEach(element => {
-            const key = element.getAttribute('data-i18n');
-            const text = this.t(key);
-            
-            if (element.tagName === 'INPUT' && (element.type === 'text' || element.type === 'password')) {
-                element.placeholder = text;
-            } else if (element.tagName === 'TITLE') {
-                element.textContent = text;
-            } else {
-                element.textContent = text;
-            }
-        });
-        
-        // 更新所有带有 data-i18n-html 属性的元素（支持HTML）
-        document.querySelectorAll('[data-i18n-html]').forEach(element => {
-            const key = element.getAttribute('data-i18n-html');
-            const html = this.t(key);
-            element.innerHTML = html;
-        });
-    },
-    
-    // 初始化
-    init() {
-        // 从本地存储获取用户偏好语言
-        const savedLanguage = localStorage.getItem('preferredLanguage');
-        if (savedLanguage && this.translations[savedLanguage]) {
-            this.currentLanguage = savedLanguage;
-        } else {
-            // 根据浏览器语言自动选择
-            const browserLang = navigator.language || navigator.userLanguage;
-            if (browserLang.startsWith('zh')) {
-                this.currentLanguage = 'zh-CN';
-            } else {
-                this.currentLanguage = 'en-US';
-            }
-        }
-        
-        this.updatePageLanguage();
-        this.updateAllTexts();
-    }
-};
-
-// 全局函数，供HTML调用
-window.t = (key, params) => i18n.t(key, params);
-window.setLanguage = (lang) => i18n.setLanguage(lang);

index.html

@@ -1,467 +1,13 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="zh-CN">
   <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title data-i18n="title.login">CLI Proxy API Management Center</title>
-    <link rel="stylesheet" href="styles.css">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-    <script src="i18n.js"></script>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20aria-hidden%3D%22true%22%20role%3D%22img%22%20class%3D%22iconify%20iconify--logos%22%20width%3D%2231.88%22%20height%3D%2232%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%20256%20257%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22IconifyId1813088fe1fbc01fb466%22%20x1%3D%22-.828%25%22%20x2%3D%2257.636%25%22%20y1%3D%227.652%25%22%20y2%3D%2278.411%25%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%2341D1FF%22%3E%3C%2Fstop%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%23BD34FE%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22IconifyId1813088fe1fbc01fb467%22%20x1%3D%2243.376%25%22%20x2%3D%2250.316%25%22%20y1%3D%222.242%25%22%20y2%3D%2289.03%25%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23FFEA83%22%3E%3C%2Fstop%3E%3Cstop%20offset%3D%228.333%25%22%20stop-color%3D%22%23FFDD35%22%3E%3C%2Fstop%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%23FFA800%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath%20fill%3D%22url(%23IconifyId1813088fe1fbc01fb466)%22%20d%3D%22M255.153%2037.938L134.897%20252.976c-2.483%204.44-8.862%204.466-11.382.048L.875%2037.958c-2.746-4.814%201.371-10.646%206.827-9.67l120.385%2021.517a6.537%206.537%200%200%200%202.322-.004l117.867-21.483c5.438-.991%209.574%204.796%206.877%209.62Z%22%3E%3C%2Fpath%3E%3Cpath%20fill%3D%22url(%23IconifyId1813088fe1fbc01fb467)%22%20d%3D%22M185.432.063L96.44%2017.501a3.268%203.268%200%200%200-2.634%203.014l-5.474%2092.456a3.268%203.268%200%200%200%203.997%203.378l24.777-5.718c2.318-.535%204.413%201.507%203.936%203.838l-7.361%2036.047c-.495%202.426%201.782%204.5%204.151%203.78l15.304-4.649c2.372-.72%204.652%201.36%204.15%203.788l-11.698%2056.621c-.732%203.542%203.979%205.473%205.943%202.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505%204.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>CLI Proxy API Management Center</title>
   </head>
   <body>
-    <!-- 自动登录加载页面 -->
-    <div id="auto-login-loading" class="login-container" style="display: none;">
-        <div class="login-card">
-            <div class="auto-login-content">
-                <div class="loading-spinner">
-                    <div class="spinner"></div>
-                </div>
-                <h2 data-i18n="auto_login.title">正在自动登录...</h2>
-                <p data-i18n="auto_login.message">正在使用本地保存的连接信息尝试连接服务器</p>
-            </div>
-        </div>
-    </div>
-
-    <!-- 登录页面 -->
-    <div id="login-page" class="login-container">
-        <div class="login-card">
-            <div class="login-header">
-                <div class="login-header-top">
-                    <h1 class="login-title">
-                        <img id="login-logo" alt="Logo" style="display:none" />
-                        <span data-i18n="title.login">CLI Proxy API Management Center</span>
-                    </h1>
-                    <div class="header-controls">
-                        <div class="language-switcher">
-                            <button id="language-toggle" class="btn btn-secondary language-btn">
-                                <i class="fas fa-globe"></i>
-                                <span data-i18n="language.switch">语言</span>
-                            </button>
-                        </div>
-                        <div class="theme-switcher">
-                            <button id="theme-toggle" class="btn btn-secondary theme-btn">
-                                <i class="fas fa-moon"></i>
-                                <span data-i18n="theme.switch">主题</span>
-                            </button>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            
-            <!-- 选项卡导航 -->
-            <div class="connection-tabs">
-                <button class="tab-button active" data-tab="local">
-                    <i class="fas fa-home"></i>
-                    <div class="tab-content">
-                        <span class="tab-title" data-i18n="login.tab_local_title">Local</span>
-                        <span class="tab-subtitle" data-i18n="login.tab_local_subtitle">Run CLI Web server on your local machine</span>
-                    </div>
-                </button>
-                <button class="tab-button" data-tab="remote">
-                    <i class="fas fa-cloud"></i>
-                    <div class="tab-content">
-                        <span class="tab-title" data-i18n="login.tab_remote_title">Remote</span>
-                        <span class="tab-subtitle" data-i18n="login.tab_remote_subtitle">Remote connection for a remote CLI Web server</span>
-                    </div>
-                </button>
-            </div>
-            
-            <!-- 代理服务器设置（可选） -->
-            <div class="proxy-settings">
-                <label data-i18n="login.proxy_label">Proxy Server (Optional):</label>
-                <input type="text" id="login-proxy-url" data-i18n="login.proxy_placeholder" placeholder="http://ip:port or https://ip:port or socks5://user:pass@ip:port">
-            </div>
-            
-            <!-- 本地连接表单 -->
-            <div id="local-form" class="connection-form active">
-                <form class="login-form">
-                    <div class="form-group">
-                        <label for="local-port" data-i18n="login.local_port_label">端口号:</label>
-                        <div class="local-url-group">
-                            <span class="url-prefix">http://localhost:</span>
-                            <input type="number" id="local-port" value="8317" min="1" max="65535" data-i18n="login.local_port_placeholder" placeholder="8317" required>
-                        </div>
-                        <div class="form-hint" data-i18n="login.local_url_hint">将连接到 http://localhost:端口/v0/management</div>
-                    </div>
-                    
-                    <div class="form-group">
-                        <label for="local-management-key" data-i18n="login.management_key_label">管理密钥:</label>
-                        <div class="input-group">
-                            <input type="password" id="local-management-key" data-i18n="login.management_key_placeholder" placeholder="请输入管理密钥" required>
-                            <button type="button" class="btn btn-secondary toggle-key-visibility">
-                                <i class="fas fa-eye"></i>
-                            </button>
-                        </div>
-                    </div>
-                </form>
-            </div>
-            
-            <!-- 远程连接表单 -->
-            <div id="remote-form" class="connection-form">
-                <form class="login-form">
-                    <div class="form-group">
-                        <label for="remote-api-url" data-i18n="login.api_url_label">API 基础地址:</label>
-                        <input type="text" id="remote-api-url" data-i18n="login.remote_api_url_placeholder" placeholder="例如: https://example.com:8317" required>
-                        <div class="form-hint" data-i18n="login.api_url_hint">将自动补全 /v0/management</div>
-                    </div>
-                    
-                    <div class="form-group">
-                        <label for="remote-management-key" data-i18n="login.management_key_label">管理密钥:</label>
-                        <div class="input-group">
-                            <input type="password" id="remote-management-key" data-i18n="login.management_key_placeholder" placeholder="请输入管理密钥" required>
-                            <button type="button" class="btn btn-secondary toggle-key-visibility">
-                                <i class="fas fa-eye"></i>
-                            </button>
-                        </div>
-                    </div>
-                </form>
-            </div>
-            
-            <!-- 连接按钮 -->
-            <div class="form-actions">
-                <button type="button" id="login-submit" class="btn btn-primary login-btn">
-                    <i class="fas fa-plug"></i> <span data-i18n="login.connect_button">Connect</span>
-                </button>
-            </div>
-            
-            <div id="login-error" class="login-error" style="display: none;">
-                <i class="fas fa-exclamation-triangle"></i>
-                <span id="login-error-message"></span>
-            </div>
-        </div>
-    </div>
-
-    <!-- 主页面 -->
-    <div id="main-page" class="container" style="display: none;">
-        <!-- 头部导航 -->
-        <header class="header">
-            <div class="header-content">
-                <h1 class="brand">
-                    <img id="site-logo" alt="Logo" style="display:none" />
-                    <span class="brand-title" data-i18n="title.main">CLI Proxy API Management Center</span>
-                </h1>
-                <div class="header-actions">
-                    <div class="header-controls">
-                        <div class="language-switcher">
-                            <button id="language-toggle-main" class="btn btn-secondary language-btn">
-                                <i class="fas fa-globe"></i>
-                                <span data-i18n="language.switch">语言</span>
-                            </button>
-                        </div>
-                        <div class="theme-switcher">
-                            <button id="theme-toggle-main" class="btn btn-secondary theme-btn">
-                                <i class="fas fa-moon"></i>
-                                <span data-i18n="theme.switch">主题</span>
-                            </button>
-                        </div>
-                    </div>
-                    <button id="connection-status" class="btn btn-secondary">
-                        <i class="fas fa-circle"></i> <span data-i18n="header.check_connection">检查连接</span>
-                    </button>
-                    <button id="refresh-all" class="btn btn-primary">
-                        <i class="fas fa-sync-alt"></i> <span data-i18n="header.refresh_all">刷新全部</span>
-                    </button>
-                    <button id="logout-btn" class="btn btn-danger">
-                        <i class="fas fa-sign-out-alt"></i> <span data-i18n="header.logout">登出</span>
-                    </button>
-                </div>
-            </div>
-        </header>
-
-        <!-- 连接信息 -->
-        <section class="auth-section">
-            <div class="card">
-                <div class="card-header">
-                    <h2><i class="fas fa-server"></i> <span data-i18n="connection.title">连接信息</span></h2>
-                </div>
-                <div class="card-content">
-                    <div class="connection-info">
-                        <div class="info-item">
-                            <div class="info-label">
-                                <i class="fas fa-globe"></i>
-                                <span data-i18n="connection.server_address">服务器地址:</span>
-                            </div>
-                            <div class="info-value" id="display-api-url">-</div>
-                        </div>
-                        <div class="info-item">
-                            <div class="info-label">
-                                <i class="fas fa-key"></i>
-                                <span data-i18n="connection.management_key">管理密钥:</span>
-                            </div>
-                            <div class="info-value" id="display-management-key">-</div>
-                        </div>
-                        <div class="info-item">
-                            <div class="info-label">
-                                <i class="fas fa-circle"></i>
-                                <span data-i18n="connection.status">连接状态:</span>
-                            </div>
-                            <div class="info-value" id="display-connection-status">
-                                <span class="status-indicator disconnected" data-i18n="common.disconnected">未连接</span>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </section>
-
-        <!-- 主要内容区域 -->
-        <main class="main-content">
-            <!-- 侧边栏导航 -->
-            <nav class="sidebar">
-                <ul class="nav-menu">
-                    <li><a href="#basic-settings" class="nav-item active" data-section="basic-settings">
-                        <i class="fas fa-sliders-h"></i> <span data-i18n="nav.basic_settings">基础设置</span>
-                    </a></li>
-                    <li><a href="#api-keys" class="nav-item" data-section="api-keys">
-                        <i class="fas fa-key"></i> <span data-i18n="nav.api_keys">API 密钥</span>
-                    </a></li>
-                    <li><a href="#ai-providers" class="nav-item" data-section="ai-providers">
-                        <i class="fas fa-robot"></i> <span data-i18n="nav.ai_providers">AI 提供商</span>
-                    </a></li>
-                    <li><a href="#auth-files" class="nav-item" data-section="auth-files">
-                        <i class="fas fa-file-alt"></i> <span data-i18n="nav.auth_files">认证文件</span>
-                    </a></li>
-                    <li><a href="#system-info" class="nav-item" data-section="system-info">
-                        <i class="fas fa-info-circle"></i> <span data-i18n="nav.system_info">系统信息</span>
-                    </a></li>
-                </ul>
-            </nav>
-
-            <!-- 内容区域 -->
-            <div class="content-area">
-                <!-- 基础设置 -->
-                <section id="basic-settings" class="content-section active">
-                    <h2 data-i18n="basic_settings.title">基础设置</h2>
-                    
-                    <!-- Debug 设置 -->
-                    <div class="card">
-                        <div class="card-header">
-                            <h3><i class="fas fa-bug"></i> <span data-i18n="basic_settings.debug_title">调试模式</span></h3>
-                        </div>
-                        <div class="card-content">
-                            <div class="toggle-group">
-                                <label class="toggle-switch">
-                                    <input type="checkbox" id="debug-toggle">
-                                    <span class="slider"></span>
-                                </label>
-                                <span class="toggle-label" data-i18n="basic_settings.debug_enable">启用调试模式</span>
-                            </div>
-                        </div>
-                    </div>
-
-                    <!-- 代理设置 -->
-                    <div class="card">
-                        <div class="card-header">
-                            <h3><i class="fas fa-network-wired"></i> <span data-i18n="basic_settings.proxy_title">代理设置</span></h3>
-                        </div>
-                        <div class="card-content">
-                            <div class="form-group">
-                                <label for="proxy-url" data-i18n="basic_settings.proxy_url_label">代理 URL:</label>
-                                <div class="input-group">
-                                    <input type="text" id="proxy-url" data-i18n="basic_settings.proxy_url_placeholder" placeholder="例如: socks5://user:pass@127.0.0.1:1080/">
-                                    <button id="update-proxy" class="btn btn-primary" data-i18n="basic_settings.proxy_update">更新</button>
-                                    <button id="clear-proxy" class="btn btn-danger" data-i18n="basic_settings.proxy_clear">清空</button>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
-                    <!-- 请求重试设置 -->
-                    <div class="card">
-                        <div class="card-header">
-                            <h3><i class="fas fa-redo"></i> <span data-i18n="basic_settings.retry_title">请求重试</span></h3>
-                        </div>
-                        <div class="card-content">
-                            <div class="form-group">
-                                <label for="request-retry" data-i18n="basic_settings.retry_count_label">重试次数:</label>
-                                <div class="input-group">
-                                    <input type="number" id="request-retry" min="0" max="10" value="3">
-                                    <button id="update-retry" class="btn btn-primary" data-i18n="basic_settings.retry_update">更新</button>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
-                    <!-- 配额超出行为 -->
-                    <div class="card">
-                        <div class="card-header">
-                            <h3><i class="fas fa-exclamation-triangle"></i> <span data-i18n="basic_settings.quota_title">配额超出行为</span></h3>
-                        </div>
-                        <div class="card-content">
-                            <div class="toggle-group">
-                                <label class="toggle-switch">
-                                    <input type="checkbox" id="switch-project-toggle">
-                                    <span class="slider"></span>
-                                </label>
-                                <span class="toggle-label" data-i18n="basic_settings.quota_switch_project">自动切换项目</span>
-                            </div>
-                            <div class="toggle-group">
-                                <label class="toggle-switch">
-                                    <input type="checkbox" id="switch-preview-model-toggle">
-                                    <span class="slider"></span>
-                                </label>
-                                <span class="toggle-label" data-i18n="basic_settings.quota_switch_preview">切换到预览模型</span>
-                            </div>
-                        </div>
-                    </div>
-
-                    <!-- 本地访问设置 -->
-                    <div class="card">
-                        <div class="card-header">
-                            <h3><i class="fas fa-home"></i> <span data-i18n="basic_settings.localhost_title">本地访问</span></h3>
-                        </div>
-                        <div class="card-content">
-                            <div class="toggle-group">
-                                <label class="toggle-switch">
-                                    <input type="checkbox" id="allow-localhost-toggle">
-                                    <span class="slider"></span>
-                                </label>
-                                <span class="toggle-label" data-i18n="basic_settings.localhost_allow">允许本地未认证访问</span>
-                            </div>
-                        </div>
-                    </div>
-                </section>
-
-                <!-- API 密钥管理 -->
-                <section id="api-keys" class="content-section">
-                    <h2 data-i18n="api_keys.title">API 密钥管理</h2>
-                    
-                    <div class="card">
-                        <div class="card-header">
-                            <h3><i class="fas fa-key"></i> <span data-i18n="api_keys.proxy_auth_title">代理服务认证密钥</span></h3>
-                            <button id="add-api-key" class="btn btn-primary">
-                                <i class="fas fa-plus"></i> <span data-i18n="api_keys.add_button">添加密钥</span>
-                            </button>
-                        </div>
-                        <div class="card-content">
-                            <div id="api-keys-list" class="key-list"></div>
-                        </div>
-                    </div>
-                </section>
-
-                <!-- AI 提供商 -->
-                <section id="ai-providers" class="content-section">
-                    <h2 data-i18n="ai_providers.title">AI 提供商配置</h2>
-
-                    <!-- Gemini API Keys -->
-                    <div class="card">
-                        <div class="card-header">
-                            <h3><i class="fab fa-google"></i> <span data-i18n="ai_providers.gemini_title">Gemini API 密钥</span></h3>
-                            <button id="add-gemini-key" class="btn btn-primary">
-                                <i class="fas fa-plus"></i> <span data-i18n="ai_providers.gemini_add_button">添加密钥</span>
-                            </button>
-                        </div>
-                        <div class="card-content">
-                            <div id="gemini-keys-list" class="key-list"></div>
-                        </div>
-                    </div>
-
-                    <!-- Codex API Keys -->
-                    <div class="card">
-                        <div class="card-header">
-                            <h3><i class="fas fa-code"></i> <span data-i18n="ai_providers.codex_title">Codex API 配置</span></h3>
-                            <button id="add-codex-key" class="btn btn-primary">
-                                <i class="fas fa-plus"></i> <span data-i18n="ai_providers.codex_add_button">添加配置</span>
-                            </button>
-                        </div>
-                        <div class="card-content">
-                            <div id="codex-keys-list" class="provider-list"></div>
-                        </div>
-                    </div>
-
-                    <!-- Claude API Keys -->
-                    <div class="card">
-                        <div class="card-header">
-                            <h3><i class="fas fa-brain"></i> <span data-i18n="ai_providers.claude_title">Claude API 配置</span></h3>
-                            <button id="add-claude-key" class="btn btn-primary">
-                                <i class="fas fa-plus"></i> <span data-i18n="ai_providers.claude_add_button">添加配置</span>
-                            </button>
-                        </div>
-                        <div class="card-content">
-                            <div id="claude-keys-list" class="provider-list"></div>
-                        </div>
-                    </div>
-
-                    <!-- OpenAI 兼容提供商 -->
-                    <div class="card">
-                        <div class="card-header">
-                            <h3><i class="fas fa-plug"></i> <span data-i18n="ai_providers.openai_title">OpenAI 兼容提供商</span></h3>
-                            <button id="add-openai-provider" class="btn btn-primary">
-                                <i class="fas fa-plus"></i> <span data-i18n="ai_providers.openai_add_button">添加提供商</span>
-                            </button>
-                        </div>
-                        <div class="card-content">
-                            <div id="openai-providers-list" class="provider-list"></div>
-                        </div>
-                    </div>
-                </section>
-
-                <!-- 认证文件管理 -->
-                <section id="auth-files" class="content-section">
-                    <h2 data-i18n="auth_files.title">认证文件管理</h2>
-                    
-                    <div class="card">
-                        <div class="card-header">
-                            <h3><i class="fas fa-file-alt"></i> <span data-i18n="auth_files.title_section">认证文件</span></h3>
-                            <div class="header-actions">
-                                <button id="upload-auth-file" class="btn btn-primary">
-                                    <i class="fas fa-upload"></i> <span data-i18n="auth_files.upload_button">上传文件</span>
-                                </button>
-                                <button id="delete-all-auth-files" class="btn btn-danger">
-                                    <i class="fas fa-trash"></i> <span data-i18n="auth_files.delete_all_button">删除全部</span>
-                                </button>
-                            </div>
-                        </div>
-                        <div class="card-content">
-                            <div id="auth-files-list" class="file-list"></div>
-                            <input type="file" id="auth-file-input" accept=".json" style="display: none;">
-                        </div>
-                    </div>
-                </section>
-
-                <!-- 系统信息 -->
-                <section id="system-info" class="content-section">
-                    <h2 data-i18n="system_info.title">系统信息</h2>
-                    
-                    <div class="card">
-                        <div class="card-header">
-                            <h3><i class="fas fa-info-circle"></i> <span data-i18n="system_info.connection_status_title">连接状态</span></h3>
-                        </div>
-                        <div class="card-content">
-                            <div id="system-status" class="status-info">
-                                <div class="status-item">
-                                    <span class="status-label" data-i18n="system_info.api_status_label">API 状态:</span>
-                                    <span id="api-status" class="status-value" data-i18n="common.disconnected">未连接</span>
-                                </div>
-                                <div class="status-item">
-                                    <span class="status-label" data-i18n="system_info.config_status_label">配置状态:</span>
-                                    <span id="config-status" class="status-value" data-i18n="system_info.not_loaded">未加载</span>
-                                </div>
-                                <div class="status-item">
-                                    <span class="status-label" data-i18n="system_info.last_update_label">最后更新:</span>
-                                    <span id="last-update" class="status-value">-</span>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </section>
-            </div>
-        </main>
-    </div>
-
-    <!-- 模态框 -->
-    <div id="modal" class="modal">
-        <div class="modal-content">
-            <span class="close">&times;</span>
-            <div id="modal-body"></div>
-        </div>
-    </div>
-
-    <!-- 通知 -->
-    <div id="notification" class="notification"></div>
-
-    </div>
-
-    <script src="app.js"></script>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>

package.json

@@ -1,31 +1,46 @@
 {
-  "name": "cli-proxy-api-webui",
-  "version": "1.0.0",
-  "description": "CLI Proxy API 管理界面",
-  "main": "index.html",
+  "name": "cli-proxy-webui-react",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
   "scripts": {
-    "start": "npx serve .",
-    "dev": "npx serve . --port 3000",
-    "build": "echo '无需构建，直接使用静态文件'",
-    "lint": "echo '使用浏览器开发者工具检查代码'"
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "format": "prettier --write \"src/**/*.{ts,tsx,css,scss}\"",
+    "type-check": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@codemirror/lang-yaml": "^6.1.2",
+    "@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",
+    "react-dom": "^19.2.1",
+    "react-i18next": "^16.4.0",
+    "react-router-dom": "^7.10.1",
+    "zustand": "^5.0.9"
   },
-  "keywords": [
-    "cli-proxy-api",
-    "webui",
-    "management",
-    "api"
-  ],
-  "author": "CLI Proxy API WebUI",
-  "license": "MIT",
   "devDependencies": {
-    "serve": "^14.2.1"
-  },
-  "engines": {
-    "node": ">=14.0.0"
-  },
-  "repository": {
-    "type": "git",
-    "url": "local"
-  },
-  "dependencies": {}
+    "@eslint/js": "^9.39.1",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "@typescript-eslint/eslint-plugin": "^8.48.1",
+    "@typescript-eslint/parser": "^8.48.1",
+    "@vitejs/plugin-react": "^5.1.1",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "prettier": "^3.7.4",
+    "sass": "^1.94.2",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.48.1",
+    "vite": "^7.2.6",
+    "vite-plugin-singlefile": "^2.3.0"
+  }
 }

src/App.css

@@ -0,0 +1,42 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}

src/App.tsx

@@ -0,0 +1,79 @@
+import { useCallback, useEffect, useState } from 'react';
+import { HashRouter, Route, Routes } from 'react-router-dom';
+import { LoginPage } from '@/pages/LoginPage';
+import { NotificationContainer } from '@/components/common/NotificationContainer';
+import { SplashScreen } from '@/components/common/SplashScreen';
+import { MainLayout } from '@/components/layout/MainLayout';
+import { ProtectedRoute } from '@/router/ProtectedRoute';
+import { useAuthStore, useLanguageStore, useThemeStore } from '@/stores';
+
+const SPLASH_DURATION = 1500;
+const SPLASH_FADE_DURATION = 400;
+
+function App() {
+  const initializeTheme = useThemeStore((state) => state.initializeTheme);
+  const language = useLanguageStore((state) => state.language);
+  const setLanguage = useLanguageStore((state) => state.setLanguage);
+  const restoreSession = useAuthStore((state) => state.restoreSession);
+
+  const [splashReadyToFade, setSplashReadyToFade] = useState(false);
+  const [showSplash, setShowSplash] = useState(true);
+  const [authReady, setAuthReady] = useState(false);
+
+  useEffect(() => {
+    const cleanupTheme = initializeTheme();
+    void restoreSession().finally(() => {
+      setAuthReady(true);
+    });
+    return cleanupTheme;
+  }, [initializeTheme, restoreSession]);
+
+  useEffect(() => {
+    setLanguage(language);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []); // 仅用于首屏同步 i18n 语言
+
+  useEffect(() => {
+    document.documentElement.lang = language;
+  }, [language]);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setSplashReadyToFade(true);
+    }, SPLASH_DURATION - SPLASH_FADE_DURATION);
+
+    return () => clearTimeout(timer);
+  }, []);
+
+  const handleSplashFinish = useCallback(() => {
+    setShowSplash(false);
+  }, []);
+
+  if (showSplash) {
+    return (
+      <SplashScreen
+        fadeOut={splashReadyToFade && authReady}
+        onFinish={handleSplashFinish}
+      />
+    );
+  }
+
+  return (
+    <HashRouter>
+      <NotificationContainer />
+      <Routes>
+        <Route path="/login" element={<LoginPage />} />
+        <Route
+          path="/*"
+          element={
+            <ProtectedRoute>
+              <MainLayout />
+            </ProtectedRoute>
+          }
+        />
+      </Routes>
+    </HashRouter>
+  );
+}
+
+export default App;

src/assets/icons/amp.svg

@@ -0,0 +1,6 @@
+<svg width="400" height="400" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.9197 13.61L17.3816 26.566L14.242 27.4049L11.2645 16.2643L0.119926 13.2906L0.957817 10.15L13.9197 13.61Z" fill="#F34E3F"/>
+<path d="M13.7391 16.0892L4.88169 24.9056L2.58872 22.6019L11.4461 13.7865L13.7391 16.0892Z" fill="#F34E3F"/>
+<path d="M18.9386 8.58315L22.4005 21.5392L19.2609 22.3781L16.2833 11.2374L5.13879 8.26381L5.97668 5.12318L18.9386 8.58315Z" fill="#F34E3F"/>
+<path d="M23.9803 3.55632L27.4422 16.5124L24.3025 17.3512L21.325 6.21062L10.1805 3.23698L11.0183 0.0963593L23.9803 3.55632Z" fill="#F34E3F"/>
+</svg>

src/assets/icons/antigravity.svg

@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Generator: visioncortex VTracer 0.6.4 -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="64" height="59">
+<path d="M0,0 L8,0 L14,4 L19,14 L27,40 L32,50 L36,54 L35,59 L30,59 L22,52 L11,35 L6,33 L-1,34 L-6,39 L-14,52 L-22,59 L-28,59 L-27,53 L-22,47 L-17,34 L-10,12 L-5,3 Z " fill="#3789F9" transform="translate(28,0)"/>
+<path d="M0,0 L8,0 L14,4 L19,14 L25,35 L21,34 L16,29 L11,26 L7,20 L7,18 L2,16 L-3,15 L-8,18 L-12,19 L-9,9 L-4,2 Z " fill="#6D80D8" transform="translate(28,0)"/>
+<path d="M0,0 L8,0 L14,4 L19,14 L20,19 L13,15 L10,12 L3,10 L-1,8 L-7,7 L-4,2 Z " fill="#D78240" transform="translate(28,0)"/>
+<path d="M0,0 L5,1 L10,4 L12,9 L1,8 L-5,13 L-10,21 L-13,26 L-16,26 L-9,5 L-4,2 Z M6,7 Z " fill="#3294CC" transform="translate(25,14)"/>
+<path d="M0,0 L5,2 L10,10 L12,18 L5,14 L1,10 L0,4 L-3,3 L0,2 Z " fill="#E45C49" transform="translate(36,1)"/>
+<path d="M0,0 L9,1 L12,3 L12,5 L7,6 L4,8 L-1,11 L-5,12 L-2,2 Z " fill="#90AE64" transform="translate(21,7)"/>
+<path d="M0,0 L5,1 L5,4 L-2,7 L-7,11 L-11,10 L-9,5 L-4,2 Z " fill="#53A89A" transform="translate(25,14)"/>
+<path d="M0,0 L5,0 L16,9 L17,13 L12,12 L8,9 L8,7 L4,5 L0,2 Z " fill="#B5677D" transform="translate(33,11)"/>
+<path d="M0,0 L6,0 L14,6 L19,11 L23,12 L22,15 L15,12 L10,8 L10,6 L4,5 Z " fill="#778998" transform="translate(27,12)"/>
+<path d="M0,0 L4,2 L-11,17 L-12,14 L-5,4 Z " fill="#3390DF" transform="translate(26,21)"/>
+<path d="M0,0 L2,1 L-4,5 L-9,9 L-13,13 L-14,10 L-13,7 L-6,4 L-3,1 Z " fill="#3FA1B7" transform="translate(27,18)"/>
+<path d="M0,0 L4,0 L9,5 L13,6 L12,9 L5,6 L0,2 Z " fill="#8277BB" transform="translate(37,18)"/>
+<path d="M0,0 L5,1 L7,6 L-2,5 Z M1,4 Z " fill="#4989CF" transform="translate(30,17)"/>
+<path d="M0,0 L5,1 L2,3 L-3,6 L-7,7 L-6,3 Z " fill="#71B774" transform="translate(23,12)"/>
+<path d="M0,0 L7,1 L9,7 L5,6 L0,1 Z " fill="#6687E9" transform="translate(44,28)"/>
+<path d="M0,0 L7,0 L5,1 L5,3 L8,4 L4,5 L-2,4 Z " fill="#C7AF38" transform="translate(23,3)"/>
+<path d="M0,0 L8,0 L8,3 L4,4 L-4,3 Z " fill="#EF842A" transform="translate(28,0)"/>
+<path d="M0,0 L7,4 L7,6 L10,6 L11,10 L4,6 L0,2 Z " fill="#CD5D67" transform="translate(37,9)"/>
+<path d="M0,0 L5,2 L9,8 L8,11 L2,3 L0,2 Z " fill="#F35241" transform="translate(36,1)"/>
+<path d="M0,0 L8,2 L9,6 L4,5 L0,2 Z " fill="#A667A2" transform="translate(41,18)"/>
+<path d="M0,0 L9,1 L8,3 L-2,3 Z " fill="#A4B34C" transform="translate(21,7)"/>
+<path d="M0,0 L2,0 L7,5 L8,7 L3,6 L0,2 Z " fill="#617FCF" transform="translate(35,18)"/>
+<path d="M0,0 L5,2 L8,7 L4,5 L0,2 Z " fill="#9D7784" transform="translate(33,11)"/>
+<path d="M0,0 L6,2 L6,4 L0,3 Z " fill="#BC7F59" transform="translate(31,7)"/>
+</svg>

src/assets/icons/claude.svg

@@ -0,0 +1 @@
+<svg height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>Claude</title><path d="M4.709 15.955l4.72-2.647.08-.23-.08-.128H9.2l-.79-.048-2.698-.073-2.339-.097-2.266-.122-.571-.121L0 11.784l.055-.352.48-.321.686.06 1.52.103 2.278.158 1.652.097 2.449.255h.389l.055-.157-.134-.098-.103-.097-2.358-1.596-2.552-1.688-1.336-.972-.724-.491-.364-.462-.158-1.008.656-.722.881.06.225.061.893.686 1.908 1.476 2.491 1.833.365.304.145-.103.019-.073-.164-.274-1.355-2.446-1.446-2.49-.644-1.032-.17-.619a2.97 2.97 0 01-.104-.729L6.283.134 6.696 0l.996.134.42.364.62 1.414 1.002 2.229 1.555 3.03.456.898.243.832.091.255h.158V9.01l.128-1.706.237-2.095.23-2.695.08-.76.376-.91.747-.492.584.28.48.685-.067.444-.286 1.851-.559 2.903-.364 1.942h.212l.243-.242.985-1.306 1.652-2.064.73-.82.85-.904.547-.431h1.033l.76 1.129-.34 1.166-1.064 1.347-.881 1.142-1.264 1.7-.79 1.36.073.11.188-.02 2.856-.606 1.543-.28 1.841-.315.833.388.091.395-.328.807-1.969.486-2.309.462-3.439.813-.042.03.049.061 1.549.146.662.036h1.622l3.02.225.79.522.474.638-.079.485-1.215.62-1.64-.389-3.829-.91-1.312-.329h-.182v.11l1.093 1.068 2.006 1.81 2.509 2.33.127.578-.322.455-.34-.049-2.205-1.657-.851-.747-1.926-1.62h-.128v.17l.444.649 2.345 3.521.122 1.08-.17.353-.608.213-.668-.122-1.374-1.925-1.415-2.167-1.143-1.943-.14.08-.674 7.254-.316.37-.729.28-.607-.461-.322-.747.322-1.476.389-1.924.315-1.53.286-1.9.17-.632-.012-.042-.14.018-1.434 1.967-2.18 2.945-1.726 1.845-.414.164-.717-.37.067-.662.401-.589 2.388-3.036 1.44-1.882.93-1.086-.006-.158h-.055L4.132 18.56l-1.13.146-.487-.456.061-.746.231-.243 1.908-1.312-.006.006z" fill="#D97757" fill-rule="nonzero"></path></svg>

src/assets/icons/gemini.svg

@@ -0,0 +1 @@
+<svg height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>Gemini</title><path d="M20.616 10.835a14.147 14.147 0 01-4.45-3.001 14.111 14.111 0 01-3.678-6.452.503.503 0 00-.975 0 14.134 14.134 0 01-3.679 6.452 14.155 14.155 0 01-4.45 3.001c-.65.28-1.318.505-2.002.678a.502.502 0 000 .975c.684.172 1.35.397 2.002.677a14.147 14.147 0 014.45 3.001 14.112 14.112 0 013.679 6.453.502.502 0 00.975 0c.172-.685.397-1.351.677-2.003a14.145 14.145 0 013.001-4.45 14.113 14.113 0 016.453-3.678.503.503 0 000-.975 13.245 13.245 0 01-2.003-.678z" fill="#3186FF"></path><path d="M20.616 10.835a14.147 14.147 0 01-4.45-3.001 14.111 14.111 0 01-3.678-6.452.503.503 0 00-.975 0 14.134 14.134 0 01-3.679 6.452 14.155 14.155 0 01-4.45 3.001c-.65.28-1.318.505-2.002.678a.502.502 0 000 .975c.684.172 1.35.397 2.002.677a14.147 14.147 0 014.45 3.001 14.112 14.112 0 013.679 6.453.502.502 0 00.975 0c.172-.685.397-1.351.677-2.003a14.145 14.145 0 013.001-4.45 14.113 14.113 0 016.453-3.678.503.503 0 000-.975 13.245 13.245 0 01-2.003-.678z" fill="url(#lobe-icons-gemini-fill-0)"></path><path d="M20.616 10.835a14.147 14.147 0 01-4.45-3.001 14.111 14.111 0 01-3.678-6.452.503.503 0 00-.975 0 14.134 14.134 0 01-3.679 6.452 14.155 14.155 0 01-4.45 3.001c-.65.28-1.318.505-2.002.678a.502.502 0 000 .975c.684.172 1.35.397 2.002.677a14.147 14.147 0 014.45 3.001 14.112 14.112 0 013.679 6.453.502.502 0 00.975 0c.172-.685.397-1.351.677-2.003a14.145 14.145 0 013.001-4.45 14.113 14.113 0 016.453-3.678.503.503 0 000-.975 13.245 13.245 0 01-2.003-.678z" fill="url(#lobe-icons-gemini-fill-1)"></path><path d="M20.616 10.835a14.147 14.147 0 01-4.45-3.001 14.111 14.111 0 01-3.678-6.452.503.503 0 00-.975 0 14.134 14.134 0 01-3.679 6.452 14.155 14.155 0 01-4.45 3.001c-.65.28-1.318.505-2.002.678a.502.502 0 000 .975c.684.172 1.35.397 2.002.677a14.147 14.147 0 014.45 3.001 14.112 14.112 0 013.679 6.453.502.502 0 00.975 0c.172-.685.397-1.351.677-2.003a14.145 14.145 0 013.001-4.45 14.113 14.113 0 016.453-3.678.503.503 0 000-.975 13.245 13.245 0 01-2.003-.678z" fill="url(#lobe-icons-gemini-fill-2)"></path><defs><linearGradient gradientUnits="userSpaceOnUse" id="lobe-icons-gemini-fill-0" x1="7" x2="11" y1="15.5" y2="12"><stop stop-color="#08B962"></stop><stop offset="1" stop-color="#08B962" stop-opacity="0"></stop></linearGradient><linearGradient gradientUnits="userSpaceOnUse" id="lobe-icons-gemini-fill-1" x1="8" x2="11.5" y1="5.5" y2="11"><stop stop-color="#F94543"></stop><stop offset="1" stop-color="#F94543" stop-opacity="0"></stop></linearGradient><linearGradient gradientUnits="userSpaceOnUse" id="lobe-icons-gemini-fill-2" x1="3.5" x2="17.5" y1="13.5" y2="12"><stop stop-color="#FABC12"></stop><stop offset=".46" stop-color="#FABC12" stop-opacity="0"></stop></linearGradient></defs></svg>

src/assets/icons/iflow.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="32" height="32" viewBox="0 0 32 32"><defs><filter id="master_svg0_278_51503" filterUnits="objectBoundingBox" color-interpolation-filters="sRGB" x="0" y="0" width="1" height="1"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur in="BackgroundImageFix" stdDeviation="1.3333334922790527"/><feComposite in2="SourceAlpha" operator="in" result="effect1_foregroundBlur"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_foregroundBlur" result="shape"/></filter><linearGradient x1="0.07353696972131729" y1="0.12899449467658997" x2="0.9907095821060244" y2="0.9383787344260006" id="master_svg1_93_40276"><stop offset="0%" stop-color="#5C5CFF" stop-opacity="1"/><stop offset="100%" stop-color="#AE5CFF" stop-opacity="1"/></linearGradient></defs><g><g filter="url(#master_svg0_278_51503)"><rect x="0" y="0" width="32" height="32" rx="16" fill="#F0F2F5" fill-opacity="0"/></g><g><g><path d="M31.843111328125,14.751C31.315411328125,7.18121,25.497411328125,1.04691,17.966011328125,0.119698C10.434711328125,-0.807512,3.302541328125,3.73244,0.954596328125,10.9482C0.345662328125,12.8248,1.732821328125,14.751,3.705641328125,14.751C4.950051328125,14.7517,6.055631328125,13.9569,6.451401328125,12.7772C7.497331328125,9.65101,10.504411328125,3.91401,18.482011328125,3.91401Q29.445911328125,3.91401,31.843111328125,14.751ZM9.127681328125,17.3314L9.127681328125,13.0862Q9.127681328125,13.0022,9.144081328125,12.9198Q9.160481328125,12.8373,9.192641328125,12.7597Q9.224801328125,12.682,9.271501328125,12.6122Q9.318191328125,12.5423,9.377621328125,12.4828Q9.437051328125,12.4234,9.506931328125,12.3767Q9.576811328125,12.33,9.654461328125,12.2979Q9.732111328125,12.2657,9.814541328125,12.2493Q9.896971328125,12.2329,9.981021328125,12.2329L11.049211328125,12.2329Q11.133211328125,12.2329,11.215711328125,12.2493Q11.298111328125,12.2657,11.375811328125,12.2979Q11.453411328125,12.33,11.523311328125,12.3767Q11.593211328125,12.4234,11.652611328125,12.4828Q11.712011328125,12.5423,11.758711328125,12.6122Q11.805411328125,12.682,11.837611328125,12.7597Q11.869711328125,12.8373,11.886111328125,12.9198Q11.902511328125,13.0022,11.902511328125,13.0862L11.902511328125,17.3314Q11.902511328125,17.4154,11.886111328125,17.4978Q11.869711328125,17.5803,11.837611328125,17.6579Q11.805411328125,17.7356,11.758711328125,17.8055Q11.712011328125,17.8753,11.652611328125,17.9348Q11.593211328125,17.9942,11.523311328125,18.0409Q11.453411328125,18.0876,11.375811328125,18.1197Q11.298111328125,18.1519,11.215711328125,18.1683Q11.133211328125,18.1847,11.049211328125,18.1847L9.981021328125,18.1847Q9.896971328125,18.1847,9.814541328125,18.1683Q9.732111328125,18.1519,9.654461328125,18.1197Q9.576811328125,18.0876,9.506931328125,18.0409Q9.437051328125,17.9942,9.377621328125,17.9348Q9.318191328125,17.8753,9.271501328125,17.8055Q9.224801328125,17.7356,9.192641328125,17.6579Q9.160481328125,17.5803,9.144081328125,17.4978Q9.127681328125,17.4154,9.127681328125,17.3314ZM17.273611328125,17.3295C17.272611328125,17.8015,17.654911328125,18.1847,18.126911328125,18.1847L19.408411328125,18.1847C19.879011328125,18.1847,20.260711328125,17.8038,20.261811328125,17.3332L20.266411328125,15.2107L20.266411328125,15.2069L20.261811328125,13.0844C20.260711328125,12.6138,19.879011328125,12.2329,19.408411328125,12.2329L18.126911328125,12.2329C17.654911328125,12.2329,17.272611328125,12.6161,17.273611328125,13.0881L17.278211328125,15.2069L17.278211328125,15.2107L17.273611328125,17.3295ZM13.574711328125,28.0523C21.552211328125,28.0523,24.559311328125,22.3153,25.605811328125,19.1897C26.001411328125,18.0098,27.107111328125,17.215,28.351511328125,17.2158C30.323811328125,17.2158,31.711511328125,19.1416,31.102611328125,21.0181C30.552411328125,22.7189,29.716211328125,24.3134,28.629811328125,25.733L30.137611328125,30.2235L24.775211328125,29.3432C14.645911328125,36.0484,1.048779328125,29.3346,0.214111328125,17.2158Q2.611231328125,28.0523,13.574711328125,28.0523Z" fill-rule="evenodd" fill="url(#master_svg1_93_40276)" fill-opacity="1"/></g></g></g></svg>

src/assets/icons/openai-dark.svg

@@ -0,0 +1 @@
+<svg fill="#ffffff" fill-rule="evenodd" height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>OpenAI</title><path d="M21.55 10.004a5.416 5.416 0 00-.478-4.501c-1.217-2.09-3.662-3.166-6.05-2.66A5.59 5.59 0 0010.831 1C8.39.995 6.224 2.546 5.473 4.838A5.553 5.553 0 001.76 7.496a5.487 5.487 0 00.691 6.5 5.416 5.416 0 00.477 4.502c1.217 2.09 3.662 3.165 6.05 2.66A5.586 5.586 0 0013.168 23c2.443.006 4.61-1.546 5.361-3.84a5.553 5.553 0 003.715-2.66 5.488 5.488 0 00-.693-6.497v.001zm-8.381 11.558a4.199 4.199 0 01-2.675-.954c.034-.018.093-.05.132-.074l4.44-2.53a.71.71 0 00.364-.623v-6.176l1.877 1.069c.02.01.033.029.036.05v5.115c-.003 2.274-1.87 4.118-4.174 4.123zM4.192 17.78a4.059 4.059 0 01-.498-2.763c.032.02.09.055.131.078l4.44 2.53c.225.13.504.13.73 0l5.42-3.088v2.138a.068.068 0 01-.027.057L9.9 19.288c-1.999 1.136-4.552.46-5.707-1.51h-.001zM3.023 8.216A4.15 4.15 0 015.198 6.41l-.002.151v5.06a.711.711 0 00.364.624l5.42 3.087-1.876 1.07a.067.067 0 01-.063.005l-4.489-2.559c-1.995-1.14-2.679-3.658-1.53-5.63h.001zm15.417 3.54l-5.42-3.088L14.896 7.6a.067.067 0 01.063-.006l4.489 2.557c1.998 1.14 2.683 3.662 1.529 5.633a4.163 4.163 0 01-2.174 1.807V12.38a.71.71 0 00-.363-.623zm1.867-2.773a6.04 6.04 0 00-.132-.078l-4.44-2.53a.731.731 0 00-.729 0l-5.42 3.088V7.325a.068.068 0 01.027-.057L14.1 4.713c2-1.137 4.555-.46 5.707 1.513.487.833.664 1.809.499 2.757h.001zm-11.741 3.81l-1.877-1.068a.065.065 0 01-.036-.051V6.559c.001-2.277 1.873-4.122 4.181-4.12.976 0 1.92.338 2.671.954-.034.018-.092.05-.131.073l-4.44 2.53a.71.71 0 00-.365.623l-.003 6.173v.002zm1.02-2.168L12 9.25l2.414 1.375v2.75L12 14.75l-2.415-1.375v-2.75z"></path></svg>

src/assets/icons/openai-light.svg

@@ -0,0 +1 @@
+<svg fill="#000000" fill-rule="evenodd" height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>OpenAI</title><path d="M21.55 10.004a5.416 5.416 0 00-.478-4.501c-1.217-2.09-3.662-3.166-6.05-2.66A5.59 5.59 0 0010.831 1C8.39.995 6.224 2.546 5.473 4.838A5.553 5.553 0 001.76 7.496a5.487 5.487 0 00.691 6.5 5.416 5.416 0 00.477 4.502c1.217 2.09 3.662 3.165 6.05 2.66A5.586 5.586 0 0013.168 23c2.443.006 4.61-1.546 5.361-3.84a5.553 5.553 0 003.715-2.66 5.488 5.488 0 00-.693-6.497v.001zm-8.381 11.558a4.199 4.199 0 01-2.675-.954c.034-.018.093-.05.132-.074l4.44-2.53a.71.71 0 00.364-.623v-6.176l1.877 1.069c.02.01.033.029.036.05v5.115c-.003 2.274-1.87 4.118-4.174 4.123zM4.192 17.78a4.059 4.059 0 01-.498-2.763c.032.02.09.055.131.078l4.44 2.53c.225.13.504.13.73 0l5.42-3.088v2.138a.068.068 0 01-.027.057L9.9 19.288c-1.999 1.136-4.552.46-5.707-1.51h-.001zM3.023 8.216A4.15 4.15 0 015.198 6.41l-.002.151v5.06a.711.711 0 00.364.624l5.42 3.087-1.876 1.07a.067.067 0 01-.063.005l-4.489-2.559c-1.995-1.14-2.679-3.658-1.53-5.63h.001zm15.417 3.54l-5.42-3.088L14.896 7.6a.067.067 0 01.063-.006l4.489 2.557c1.998 1.14 2.683 3.662 1.529 5.633a4.163 4.163 0 01-2.174 1.807V12.38a.71.71 0 00-.363-.623zm1.867-2.773a6.04 6.04 0 00-.132-.078l-4.44-2.53a.731.731 0 00-.729 0l-5.42 3.088V7.325a.068.068 0 01.027-.057L14.1 4.713c2-1.137 4.555-.46 5.707 1.513.487.833.664 1.809.499 2.757h.001zm-11.741 3.81l-1.877-1.068a.065.065 0 01-.036-.051V6.559c.001-2.277 1.873-4.122 4.181-4.12.976 0 1.92.338 2.671.954-.034.018-.092.05-.131.073l-4.44 2.53a.71.71 0 00-.365.623l-.003 6.173v.002zm1.02-2.168L12 9.25l2.414 1.375v2.75L12 14.75l-2.415-1.375v-2.75z"></path></svg>

src/assets/icons/qwen.svg

@@ -0,0 +1 @@
+<svg height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>Qwen</title><path d="M12.604 1.34c.393.69.784 1.382 1.174 2.075a.18.18 0 00.157.091h5.552c.174 0 .322.11.446.327l1.454 2.57c.19.337.24.478.024.837-.26.43-.513.864-.76 1.3l-.367.658c-.106.196-.223.28-.04.512l2.652 4.637c.172.301.111.494-.043.77-.437.785-.882 1.564-1.335 2.34-.159.272-.352.375-.68.37-.777-.016-1.552-.01-2.327.016a.099.099 0 00-.081.05 575.097 575.097 0 01-2.705 4.74c-.169.293-.38.363-.725.364-.997.003-2.002.004-3.017.002a.537.537 0 01-.465-.271l-1.335-2.323a.09.09 0 00-.083-.049H4.982c-.285.03-.553-.001-.805-.092l-1.603-2.77a.543.543 0 01-.002-.54l1.207-2.12a.198.198 0 000-.197 550.951 550.951 0 01-1.875-3.272l-.79-1.395c-.16-.31-.173-.496.095-.965.465-.813.927-1.625 1.387-2.436.132-.234.304-.334.584-.335a338.3 338.3 0 012.589-.001.124.124 0 00.107-.063l2.806-4.895a.488.488 0 01.422-.246c.524-.001 1.053 0 1.583-.006L11.704 1c.341-.003.724.032.9.34zm-3.432.403a.06.06 0 00-.052.03L6.254 6.788a.157.157 0 01-.135.078H3.253c-.056 0-.07.025-.041.074l5.81 10.156c.025.042.013.062-.034.063l-2.795.015a.218.218 0 00-.2.116l-1.32 2.31c-.044.078-.021.118.068.118l5.716.008c.046 0 .08.02.104.061l1.403 2.454c.046.081.092.082.139 0l5.006-8.76.783-1.382a.055.055 0 01.096 0l1.424 2.53a.122.122 0 00.107.062l2.763-.02a.04.04 0 00.035-.02.041.041 0 000-.04l-2.9-5.086a.108.108 0 010-.113l.293-.507 1.12-1.977c.024-.041.012-.062-.035-.062H9.2c-.059 0-.073-.026-.043-.077l1.434-2.505a.107.107 0 000-.114L9.225 1.774a.06.06 0 00-.053-.031zm6.29 8.02c.046 0 .058.02.034.06l-.832 1.465-2.613 4.585a.056.056 0 01-.05.029.058.058 0 01-.05-.029L8.498 9.841c-.02-.034-.01-.052.028-.054l.216-.012 6.722-.012z" fill="url(#lobe-icons-qwen-fill)" fill-rule="nonzero"></path><defs><linearGradient id="lobe-icons-qwen-fill" x1="0%" x2="100%" y1="0%" y2="0%"><stop offset="0%" stop-color="#6336E7" stop-opacity=".84"></stop><stop offset="100%" stop-color="#6F69F7" stop-opacity=".84"></stop></linearGradient></defs></svg>

src/assets/icons/vertex.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"><path d="M20,13.89A.77.77,0,0,0,19,13.73l-7,5.14v.22a.72.72,0,1,1,0,1.43v0a.74.74,0,0,0,.45-.15l7.41-5.47A.76.76,0,0,0,20,13.89Z" style="fill:#669df6"/><path d="M12,20.52a.72.72,0,0,1,0-1.43h0v-.22L5,13.73a.76.76,0,0,0-1,.16.74.74,0,0,0,.16,1l7.41,5.47a.73.73,0,0,0,.44.15v0Z" style="fill:#aecbfa"/><path d="M12,18.34a1.47,1.47,0,1,0,1.47,1.47A1.47,1.47,0,0,0,12,18.34Zm0,2.18a.72.72,0,1,1,.72-.71A.71.71,0,0,1,12,20.52Z" style="fill:#4285f4"/><path d="M6,6.11a.76.76,0,0,1-.75-.75V3.48a.76.76,0,1,1,1.51,0V5.36A.76.76,0,0,1,6,6.11Z" style="fill:#aecbfa"/><circle cx="5.98" cy="12" r="0.76" style="fill:#aecbfa"/><circle cx="5.98" cy="9.79" r="0.76" style="fill:#aecbfa"/><circle cx="5.98" cy="7.57" r="0.76" style="fill:#aecbfa"/><path d="M18,8.31a.76.76,0,0,1-.75-.76V5.67a.75.75,0,1,1,1.5,0V7.55A.75.75,0,0,1,18,8.31Z" style="fill:#4285f4"/><circle cx="18.02" cy="12.01" r="0.76" style="fill:#4285f4"/><circle cx="18.02" cy="9.76" r="0.76" style="fill:#4285f4"/><circle cx="18.02" cy="3.48" r="0.76" style="fill:#4285f4"/><path d="M12,15a.76.76,0,0,1-.75-.75V12.34a.76.76,0,0,1,1.51,0v1.89A.76.76,0,0,1,12,15Z" style="fill:#669df6"/><circle cx="12" cy="16.45" r="0.76" style="fill:#669df6"/><circle cx="12" cy="10.14" r="0.76" style="fill:#669df6"/><circle cx="12" cy="7.92" r="0.76" style="fill:#669df6"/><path d="M15,10.54a.76.76,0,0,1-.75-.75V7.91a.76.76,0,1,1,1.51,0V9.79A.76.76,0,0,1,15,10.54Z" style="fill:#4285f4"/><circle cx="15.01" cy="5.69" r="0.76" style="fill:#4285f4"/><circle cx="15.01" cy="14.19" r="0.76" style="fill:#4285f4"/><circle cx="15.01" cy="11.97" r="0.76" style="fill:#4285f4"/><circle cx="8.99" cy="14.19" r="0.76" style="fill:#aecbfa"/><circle cx="8.99" cy="7.92" r="0.76" style="fill:#aecbfa"/><circle cx="8.99" cy="5.69" r="0.76" style="fill:#aecbfa"/><path d="M9,12.73A.76.76,0,0,1,8.24,12V10.1a.75.75,0,1,1,1.5,0V12A.75.75,0,0,1,9,12.73Z" style="fill:#aecbfa"/></svg>

src/assets/react.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>

src/components/common/NotificationContainer.tsx

@@ -0,0 +1,94 @@
+import { useEffect, useRef, useState } from 'react';
+import { useNotificationStore } from '@/stores';
+import { IconX } from '@/components/ui/icons';
+import type { Notification } from '@/types';
+
+interface AnimatedNotification extends Notification {
+  isExiting?: boolean;
+}
+
+const ANIMATION_DURATION = 300; // ms
+
+export function NotificationContainer() {
+  const { notifications, removeNotification } = useNotificationStore();
+  const [animatedNotifications, setAnimatedNotifications] = useState<AnimatedNotification[]>([]);
+  const prevNotificationsRef = useRef<Notification[]>([]);
+
+  // Track notifications and manage animation states
+  useEffect(() => {
+    const prevNotifications = prevNotificationsRef.current;
+    const prevIds = new Set(prevNotifications.map((n) => n.id));
+    const currentIds = new Set(notifications.map((n) => n.id));
+
+    // Find new notifications (for enter animation)
+    const newNotifications = notifications.filter((n) => !prevIds.has(n.id));
+
+    // Find removed notifications (for exit animation)
+    const removedIds = new Set(
+      prevNotifications.filter((n) => !currentIds.has(n.id)).map((n) => n.id)
+    );
+
+    setAnimatedNotifications((prev) => {
+      // Mark removed notifications as exiting
+      let updated = prev.map((n) =>
+        removedIds.has(n.id) ? { ...n, isExiting: true } : n
+      );
+
+      // Add new notifications
+      newNotifications.forEach((n) => {
+        if (!updated.find((an) => an.id === n.id)) {
+          updated.push({ ...n, isExiting: false });
+        }
+      });
+
+      // Remove notifications that are not in current and not exiting
+      // (they've already completed their exit animation)
+      updated = updated.filter(
+        (n) => currentIds.has(n.id) || n.isExiting
+      );
+
+      return updated;
+    });
+
+    // Clean up exited notifications after animation
+    if (removedIds.size > 0) {
+      setTimeout(() => {
+        setAnimatedNotifications((prev) =>
+          prev.filter((n) => !removedIds.has(n.id))
+        );
+      }, ANIMATION_DURATION);
+    }
+
+    prevNotificationsRef.current = notifications;
+  }, [notifications]);
+
+  const handleClose = (id: string) => {
+    // Start exit animation
+    setAnimatedNotifications((prev) =>
+      prev.map((n) => (n.id === id ? { ...n, isExiting: true } : n))
+    );
+
+    // Actually remove after animation
+    setTimeout(() => {
+      removeNotification(id);
+    }, ANIMATION_DURATION);
+  };
+
+  if (!animatedNotifications.length) return null;
+
+  return (
+    <div className="notification-container">
+      {animatedNotifications.map((notification) => (
+        <div
+          key={notification.id}
+          className={`notification ${notification.type} ${notification.isExiting ? 'exiting' : 'entering'}`}
+        >
+          <div className="message">{notification.message}</div>
+          <button className="close-btn" onClick={() => handleClose(notification.id)} aria-label="Close">
+            <IconX size={16} />
+          </button>
+        </div>
+      ))}
+    </div>
+  );
+}

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,171 @@
+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;
+    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';
+    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);
+  }, [
+    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/common/SplashScreen.scss

@@ -0,0 +1,106 @@
+@use 'sass:color';
+@use '../../styles/variables.scss' as *;
+
+.splash-screen {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--bg-primary);
+  opacity: 1;
+  transition: opacity 0.4s ease-out;
+
+  &.fade-out {
+    opacity: 0;
+    pointer-events: none;
+  }
+}
+
+.splash-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: $spacing-md;
+  animation: splash-enter 0.6s ease-out;
+}
+
+@keyframes splash-enter {
+  from {
+    opacity: 0;
+    transform: scale(0.9) translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+.splash-logo {
+  height: 80px;
+  width: auto;
+  border-radius: $radius-lg;
+  box-shadow: $shadow-lg;
+  animation: splash-logo-pulse 1.5s ease-in-out infinite;
+}
+
+@keyframes splash-logo-pulse {
+  0%, 100% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.05);
+  }
+}
+
+.splash-title {
+  font-size: 28px;
+  font-weight: 800;
+  color: var(--text-primary);
+  margin: 0;
+  letter-spacing: -0.5px;
+}
+
+.splash-subtitle {
+  font-size: 16px;
+  font-weight: 500;
+  color: var(--text-secondary);
+  margin: 0;
+  margin-top: -8px;
+}
+
+.splash-loader {
+  width: 120px;
+  height: 3px;
+  background: var(--border-color);
+  border-radius: $radius-full;
+  overflow: hidden;
+  margin-top: $spacing-md;
+}
+
+.splash-loader-bar {
+  width: 100%;
+  height: 100%;
+  background: var(--primary-color);
+  border-radius: $radius-full;
+  animation: splash-loading 1.2s ease-in-out infinite;
+  transform-origin: left;
+}
+
+@keyframes splash-loading {
+  0% {
+    transform: scaleX(0);
+  }
+  50% {
+    transform: scaleX(1);
+    transform-origin: left;
+  }
+  50.01% {
+    transform-origin: right;
+  }
+  100% {
+    transform: scaleX(0);
+    transform-origin: right;
+  }
+}

src/components/common/SplashScreen.tsx

@@ -0,0 +1,36 @@
+import { useEffect } from 'react';
+import { INLINE_LOGO_JPEG } from '@/assets/logoInline';
+import './SplashScreen.scss';
+
+interface SplashScreenProps {
+  onFinish: () => void;
+  fadeOut?: boolean;
+}
+
+const FADE_OUT_DURATION = 400;
+
+export function SplashScreen({ onFinish, fadeOut = false }: SplashScreenProps) {
+  useEffect(() => {
+    if (!fadeOut) return;
+    const finishTimer = setTimeout(() => {
+      onFinish();
+    }, FADE_OUT_DURATION);
+
+    return () => {
+      clearTimeout(finishTimer);
+    };
+  }, [fadeOut, onFinish]);
+
+  return (
+    <div className={`splash-screen ${fadeOut ? 'fade-out' : ''}`}>
+      <div className="splash-content">
+        <img src={INLINE_LOGO_JPEG} alt="CPAMC" className="splash-logo" />
+        <h1 className="splash-title">CLI Proxy API</h1>
+        <p className="splash-subtitle">Management Center</p>
+        <div className="splash-loader">
+          <div className="splash-loader-bar" />
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/layout/MainLayout.tsx

@@ -0,0 +1,599 @@
+import {
+  ReactNode,
+  SVGProps,
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from 'react';
+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,
+  IconFileText,
+  IconInfo,
+  IconKey,
+  IconLayoutDashboard,
+  IconScrollText,
+  IconSettings,
+  IconShield,
+  IconSlidersHorizontal,
+  IconTimer,
+} from '@/components/ui/icons';
+import { INLINE_LOGO_JPEG } from '@/assets/logoInline';
+import {
+  useAuthStore,
+  useConfigStore,
+  useLanguageStore,
+  useNotificationStore,
+  useThemeStore,
+} from '@/stores';
+import { configApi, versionApi } from '@/services/api';
+import { triggerHeaderRefresh } from '@/hooks/useHeaderRefresh';
+
+const sidebarIcons: Record<string, ReactNode> = {
+  dashboard: <IconLayoutDashboard size={18} />,
+  settings: <IconSlidersHorizontal size={18} />,
+  apiKeys: <IconKey size={18} />,
+  aiProviders: <IconBot size={18} />,
+  authFiles: <IconFileText size={18} />,
+  oauth: <IconShield size={18} />,
+  quota: <IconTimer size={18} />,
+  usage: <IconChartLine size={18} />,
+  config: <IconSettings size={18} />,
+  logs: <IconScrollText size={18} />,
+  system: <IconInfo size={18} />,
+};
+
+// Header action icons - smaller size for header buttons
+const headerIconProps: SVGProps<SVGSVGElement> = {
+  width: 16,
+  height: 16,
+  viewBox: '0 0 24 24',
+  fill: 'none',
+  stroke: 'currentColor',
+  strokeWidth: 2,
+  strokeLinecap: 'round',
+  strokeLinejoin: 'round',
+  'aria-hidden': 'true',
+  focusable: 'false',
+};
+
+const headerIcons = {
+  refresh: (
+    <svg {...headerIconProps}>
+      <path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8" />
+      <path d="M21 3v5h-5" />
+    </svg>
+  ),
+  update: (
+    <svg {...headerIconProps}>
+      <path d="M12 19V5" />
+      <path d="m5 12 7-7 7 7" />
+    </svg>
+  ),
+  menu: (
+    <svg {...headerIconProps}>
+      <path d="M4 7h16" />
+      <path d="M4 12h16" />
+      <path d="M4 17h16" />
+    </svg>
+  ),
+  chevronLeft: (
+    <svg {...headerIconProps}>
+      <path d="m14 18-6-6 6-6" />
+    </svg>
+  ),
+  chevronRight: (
+    <svg {...headerIconProps}>
+      <path d="m10 6 6 6-6 6" />
+    </svg>
+  ),
+  language: (
+    <svg {...headerIconProps}>
+      <circle cx="12" cy="12" r="10" />
+      <path d="M2 12h20" />
+      <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" />
+    </svg>
+  ),
+  sun: (
+    <svg {...headerIconProps}>
+      <circle cx="12" cy="12" r="4" />
+      <path d="M12 2v2" />
+      <path d="M12 20v2" />
+      <path d="m4.93 4.93 1.41 1.41" />
+      <path d="m17.66 17.66 1.41 1.41" />
+      <path d="M2 12h2" />
+      <path d="M20 12h2" />
+      <path d="m6.34 17.66-1.41 1.41" />
+      <path d="m19.07 4.93-1.41 1.41" />
+    </svg>
+  ),
+  moon: (
+    <svg {...headerIconProps}>
+      <path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9z" />
+    </svg>
+  ),
+  autoTheme: (
+    <svg {...headerIconProps}>
+      <defs>
+        <clipPath id="mainLayoutAutoThemeSunLeftHalf">
+          <rect x="0" y="0" width="12" height="24" />
+        </clipPath>
+      </defs>
+      <circle cx="12" cy="12" r="4" />
+      <circle cx="12" cy="12" r="4" clipPath="url(#mainLayoutAutoThemeSunLeftHalf)" fill="currentColor" />
+      <path d="M12 2v2" />
+      <path d="M12 20v2" />
+      <path d="M4.93 4.93l1.41 1.41" />
+      <path d="M17.66 17.66l1.41 1.41" />
+      <path d="M2 12h2" />
+      <path d="M20 12h2" />
+      <path d="M6.34 17.66l-1.41 1.41" />
+      <path d="M19.07 4.93l-1.41 1.41" />
+    </svg>
+  ),
+  logout: (
+    <svg {...headerIconProps}>
+      <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
+      <path d="m16 17 5-5-5-5" />
+      <path d="M21 12H9" />
+    </svg>
+  ),
+};
+
+const parseVersionSegments = (version?: string | null) => {
+  if (!version) return null;
+  const cleaned = version.trim().replace(/^v/i, '');
+  if (!cleaned) return null;
+  const parts = cleaned
+    .split(/[^0-9]+/)
+    .filter(Boolean)
+    .map((segment) => Number.parseInt(segment, 10))
+    .filter(Number.isFinite);
+  return parts.length ? parts : null;
+};
+
+const compareVersions = (latest?: string | null, current?: string | null) => {
+  const latestParts = parseVersionSegments(latest);
+  const currentParts = parseVersionSegments(current);
+  if (!latestParts || !currentParts) return null;
+  const length = Math.max(latestParts.length, currentParts.length);
+  for (let i = 0; i < length; i++) {
+    const l = latestParts[i] || 0;
+    const c = currentParts[i] || 0;
+    if (l > c) return 1;
+    if (l < c) return -1;
+  }
+  return 0;
+};
+
+export function MainLayout() {
+  const { t, i18n } = useTranslation();
+  const { showNotification } = useNotificationStore();
+  const location = useLocation();
+
+  const apiBase = useAuthStore((state) => state.apiBase);
+  const serverVersion = useAuthStore((state) => state.serverVersion);
+  const serverBuildDate = useAuthStore((state) => state.serverBuildDate);
+  const connectionStatus = useAuthStore((state) => state.connectionStatus);
+  const logout = useAuthStore((state) => state.logout);
+
+  const config = useConfigStore((state) => state.config);
+  const fetchConfig = useConfigStore((state) => state.fetchConfig);
+  const clearCache = useConfigStore((state) => state.clearCache);
+  const updateConfigValue = useConfigStore((state) => state.updateConfigValue);
+
+  const theme = useThemeStore((state) => state.theme);
+  const cycleTheme = useThemeStore((state) => state.cycleTheme);
+  const toggleLanguage = useLanguageStore((state) => state.toggleLanguage);
+
+  const [sidebarOpen, setSidebarOpen] = useState(false);
+  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
+  const [checkingVersion, setCheckingVersion] = useState(false);
+  const [brandExpanded, setBrandExpanded] = useState(true);
+  const [requestLogModalOpen, setRequestLogModalOpen] = useState(false);
+  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);
+  const versionTapTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const fullBrandName = 'CLI Proxy API Management Center';
+  const abbrBrandName = t('title.abbr');
+  const requestLogEnabled = config?.requestLog ?? false;
+  const requestLogDirty = requestLogDraft !== requestLogEnabled;
+  const canEditRequestLog = connectionStatus === 'connected' && Boolean(config);
+  const isLogsPage = location.pathname.startsWith('/logs');
+
+  // 将顶栏高度写入 CSS 变量，确保侧栏/内容区计算一致，防止滚动时抖动
+  useLayoutEffect(() => {
+    const updateHeaderHeight = () => {
+      const height = headerRef.current?.offsetHeight;
+      if (height) {
+        document.documentElement.style.setProperty('--header-height', `${height}px`);
+      }
+    };
+
+    updateHeaderHeight();
+
+    const resizeObserver =
+      typeof ResizeObserver !== 'undefined' && headerRef.current
+        ? new ResizeObserver(updateHeaderHeight)
+        : null;
+    if (resizeObserver && headerRef.current) {
+      resizeObserver.observe(headerRef.current);
+    }
+
+    window.addEventListener('resize', updateHeaderHeight);
+
+    return () => {
+      if (resizeObserver) {
+        resizeObserver.disconnect();
+      }
+      window.removeEventListener('resize', updateHeaderHeight);
+    };
+  }, []);
+
+  // 5秒后自动收起品牌名称
+  useEffect(() => {
+    brandCollapseTimer.current = setTimeout(() => {
+      setBrandExpanded(false);
+    }, 5000);
+
+    return () => {
+      if (brandCollapseTimer.current) {
+        clearTimeout(brandCollapseTimer.current);
+      }
+    };
+  }, []);
+
+  useEffect(() => {
+    if (requestLogModalOpen && !requestLogTouched) {
+      setRequestLogDraft(requestLogEnabled);
+    }
+  }, [requestLogModalOpen, requestLogTouched, requestLogEnabled]);
+
+  useEffect(() => {
+    return () => {
+      if (versionTapTimer.current) {
+        clearTimeout(versionTapTimer.current);
+      }
+    };
+  }, []);
+
+  const handleBrandClick = useCallback(() => {
+    if (!brandExpanded) {
+      setBrandExpanded(true);
+      // 点击展开后，5秒后再次收起
+      if (brandCollapseTimer.current) {
+        clearTimeout(brandCollapseTimer.current);
+      }
+      brandCollapseTimer.current = setTimeout(() => {
+        setBrandExpanded(false);
+      }, 5000);
+    }
+  }, [brandExpanded]);
+
+  const openRequestLogModal = useCallback(() => {
+    setRequestLogTouched(false);
+    setRequestLogDraft(requestLogEnabled);
+    setRequestLogModalOpen(true);
+  }, [requestLogEnabled]);
+
+  const handleRequestLogClose = useCallback(() => {
+    setRequestLogModalOpen(false);
+    setRequestLogTouched(false);
+  }, []);
+
+  const handleVersionTap = useCallback(() => {
+    versionTapCount.current += 1;
+    if (versionTapTimer.current) {
+      clearTimeout(versionTapTimer.current);
+    }
+    versionTapTimer.current = setTimeout(() => {
+      versionTapCount.current = 0;
+    }, 1500);
+
+    if (versionTapCount.current >= 7) {
+      versionTapCount.current = 0;
+      if (versionTapTimer.current) {
+        clearTimeout(versionTapTimer.current);
+        versionTapTimer.current = null;
+      }
+      openRequestLogModal();
+    }
+  }, [openRequestLogModal]);
+
+  const handleRequestLogSave = async () => {
+    if (!canEditRequestLog) return;
+    if (!requestLogDirty) {
+      setRequestLogModalOpen(false);
+      return;
+    }
+
+    const previous = requestLogEnabled;
+    setRequestLogSaving(true);
+    updateConfigValue('request-log', requestLogDraft);
+
+    try {
+      await configApi.updateRequestLog(requestLogDraft);
+      clearCache('request-log');
+      showNotification(t('notification.request_log_updated'), 'success');
+      setRequestLogModalOpen(false);
+    } catch (error: any) {
+      updateConfigValue('request-log', previous);
+      showNotification(`${t('notification.update_failed')}: ${error?.message || ''}`, 'error');
+    } finally {
+      setRequestLogSaving(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchConfig().catch(() => {
+      // ignore initial failure; login flow会提示
+    });
+  }, [fetchConfig]);
+
+
+  const statusClass =
+    connectionStatus === 'connected'
+      ? 'success'
+      : connectionStatus === 'connecting'
+        ? 'warning'
+        : connectionStatus === 'error'
+          ? 'error'
+          : 'muted';
+
+  const navItems = [
+    { path: '/', label: t('nav.dashboard'), icon: sidebarIcons.dashboard },
+    { path: '/settings', label: t('nav.basic_settings'), icon: sidebarIcons.settings },
+    { path: '/api-keys', label: t('nav.api_keys'), icon: sidebarIcons.apiKeys },
+    { path: '/ai-providers', label: t('nav.ai_providers'), icon: sidebarIcons.aiProviders },
+    { path: '/auth-files', label: t('nav.auth_files'), icon: sidebarIcons.authFiles },
+    { path: '/oauth', label: t('nav.oauth', { defaultValue: 'OAuth' }), icon: sidebarIcons.oauth },
+    { path: '/quota', label: t('nav.quota_management'), icon: sidebarIcons.quota },
+    { path: '/usage', label: t('nav.usage_stats'), icon: sidebarIcons.usage },
+    { path: '/config', label: t('nav.config_management'), icon: sidebarIcons.config },
+    ...(config?.loggingToFile
+      ? [{ path: '/logs', label: t('nav.logs'), icon: sidebarIcons.logs }]
+      : []),
+    { path: '/system', label: t('nav.system_info'), icon: sidebarIcons.system },
+  ];
+  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();
+    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 () => {
+    setCheckingVersion(true);
+    try {
+      const data = await versionApi.checkLatest();
+      const latest = data?.['latest-version'] ?? data?.latest_version ?? data?.latest ?? '';
+      const comparison = compareVersions(latest, serverVersion);
+
+      if (!latest) {
+        showNotification(t('system_info.version_check_error'), 'error');
+        return;
+      }
+
+      if (comparison === null) {
+        showNotification(t('system_info.version_current_missing'), 'warning');
+        return;
+      }
+
+      if (comparison > 0) {
+        showNotification(t('system_info.version_update_available', { version: latest }), 'warning');
+      } else {
+        showNotification(t('system_info.version_is_latest'), 'success');
+      }
+    } catch (error: any) {
+      showNotification(`${t('system_info.version_check_error')}: ${error?.message || ''}`, 'error');
+    } finally {
+      setCheckingVersion(false);
+    }
+  };
+
+  return (
+    <div className="app-shell">
+      <header className="main-header" ref={headerRef}>
+        <div className="left">
+          <button
+            className="sidebar-toggle-header"
+            onClick={() => setSidebarCollapsed((prev) => !prev)}
+            title={
+              sidebarCollapsed
+                ? t('sidebar.expand', { defaultValue: '展开' })
+                : t('sidebar.collapse', { defaultValue: '收起' })
+            }
+          >
+            {sidebarCollapsed ? headerIcons.chevronRight : headerIcons.chevronLeft}
+          </button>
+          <img src={INLINE_LOGO_JPEG} alt="CPAMC logo" className="brand-logo" />
+          <div
+            className={`brand-header ${brandExpanded ? 'expanded' : 'collapsed'}`}
+            onClick={handleBrandClick}
+            title={brandExpanded ? undefined : fullBrandName}
+          >
+            <span className="brand-full">{fullBrandName}</span>
+            <span className="brand-abbr">{abbrBrandName}</span>
+          </div>
+        </div>
+
+        <div className="right">
+          <div className="connection">
+            <span className={`status-badge ${statusClass}`}>
+              {t(
+                connectionStatus === 'connected'
+                  ? 'common.connected_status'
+                  : connectionStatus === 'connecting'
+                    ? 'common.connecting_status'
+                    : 'common.disconnected_status'
+              )}
+            </span>
+            <span className="base">{apiBase || '-'}</span>
+          </div>
+
+          <div className="header-actions">
+            <Button
+              className="mobile-menu-btn"
+              variant="ghost"
+              size="sm"
+              onClick={() => setSidebarOpen((prev) => !prev)}
+            >
+              {headerIcons.menu}
+            </Button>
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={handleRefreshAll}
+              title={t('header.refresh_all')}
+            >
+              {headerIcons.refresh}
+            </Button>
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={handleVersionCheck}
+              loading={checkingVersion}
+              title={t('system_info.version_check_button')}
+            >
+              {headerIcons.update}
+            </Button>
+            <Button variant="ghost" size="sm" onClick={toggleLanguage} title={t('language.switch')}>
+              {headerIcons.language}
+            </Button>
+            <Button variant="ghost" size="sm" onClick={cycleTheme} title={t('theme.switch')}>
+              {theme === 'auto'
+                ? headerIcons.autoTheme
+                : theme === 'dark'
+                  ? headerIcons.moon
+                  : headerIcons.sun}
+            </Button>
+            <Button variant="ghost" size="sm" onClick={logout} title={t('header.logout')}>
+              {headerIcons.logout}
+            </Button>
+          </div>
+        </div>
+      </header>
+
+      <div className="main-body">
+        <aside
+          className={`sidebar ${sidebarOpen ? 'open' : ''} ${sidebarCollapsed ? 'collapsed' : ''}`}
+        >
+          <div className="nav-section">
+            {navItems.map((item) => (
+              <NavLink
+                key={item.path}
+                to={item.path}
+                className={({ isActive }) => `nav-item ${isActive ? 'active' : ''}`}
+                onClick={() => setSidebarOpen(false)}
+                title={sidebarCollapsed ? item.label : undefined}
+              >
+                <span className="nav-icon">{item.icon}</span>
+                {!sidebarCollapsed && <span className="nav-label">{item.label}</span>}
+              </NavLink>
+            ))}
+          </div>
+        </aside>
+
+        <div className={`content${isLogsPage ? ' content-logs' : ''}`} ref={contentRef}>
+          <main className={`main-content${isLogsPage ? ' main-content-logs' : ''}`}>
+            <PageTransition
+              render={(location) => <MainRoutes location={location} />}
+              getRouteOrder={getRouteOrder}
+              scrollContainerRef={contentRef}
+            />
+          </main>
+
+          <footer className="footer">
+            <span>
+              {t('footer.api_version')}: {serverVersion || t('system_info.version_unknown')}
+            </span>
+            <span className="footer-version" onClick={handleVersionTap}>
+              {t('footer.version')}: {__APP_VERSION__ || t('system_info.version_unknown')}
+            </span>
+            <span>
+              {t('footer.build_date')}:{' '}
+              {serverBuildDate
+                ? new Date(serverBuildDate).toLocaleString(i18n.language)
+                : t('system_info.version_unknown')}
+            </span>
+          </footer>
+        </div>
+      </div>
+
+      <Modal
+        open={requestLogModalOpen}
+        onClose={handleRequestLogClose}
+        title={t('basic_settings.request_log_title')}
+        footer={
+          <>
+            <Button variant="secondary" onClick={handleRequestLogClose} disabled={requestLogSaving}>
+              {t('common.cancel')}
+            </Button>
+            <Button
+              onClick={handleRequestLogSave}
+              loading={requestLogSaving}
+              disabled={!canEditRequestLog || !requestLogDirty}
+            >
+              {t('common.save')}
+            </Button>
+          </>
+        }
+      >
+        <div className="request-log-modal">
+          <div className="status-badge warning">{t('basic_settings.request_log_warning')}</div>
+          <ToggleSwitch
+            label={t('basic_settings.request_log_enable')}
+            labelPosition="left"
+            checked={requestLogDraft}
+            disabled={!canEditRequestLog || requestLogSaving}
+            onChange={(value) => {
+              setRequestLogDraft(value);
+              setRequestLogTouched(true);
+            }}
+          />
+        </div>
+      </Modal>
+    </div>
+  );
+}

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

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

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

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/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,10 @@
+export { AmpcodeSection } from './AmpcodeSection';
+export { ClaudeSection } from './ClaudeSection';
+export { CodexSection } from './CodexSection';
+export { GeminiSection } from './GeminiSection';
+export { OpenAISection } from './OpenAISection';
+export { ProviderList } from './ProviderList';
+export { ProviderStatusBar } from './ProviderStatusBar';
+export * from './hooks/useProviderStats';
+export * from './types';
+export * from './utils';

src/components/providers/types.ts

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

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,258 @@
+/**
+ * Generic quota section component.
+ */
+
+import { useCallback, useEffect, useMemo, 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 { 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 styles from '@/pages/QuotaPage.module.scss';
+
+type QuotaUpdater<T> = T | ((prev: T) => T);
+
+type QuotaSetter<T> = (updater: QuotaUpdater<T>) => void;
+
+const MIN_CARD_PAGE_SIZE = 3;
+const MAX_CARD_PAGE_SIZE = 30;
+
+const clampCardPageSize = (value: number) =>
+  Math.min(MAX_CARD_PAGE_SIZE, Math.max(MIN_CARD_PAGE_SIZE, Math.round(value)));
+
+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(() => clampCardPageSize(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(clampCardPageSize(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>
+  >;
+
+  const filteredFiles = useMemo(() => files.filter((file) => config.filterFn(file)), [
+    files,
+    config.filterFn
+  ]);
+
+  const {
+    pageSize,
+    totalPages,
+    currentPage,
+    pageItems,
+    setPageSize,
+    goToPrev,
+    goToNext,
+    loading: sectionLoading,
+    loadingScope,
+    setLoading
+  } = useQuotaPagination(filteredFiles);
+
+  const { quota, loadQuota } = useQuotaLoader(config);
+
+  const handleRefreshPage = useCallback(() => {
+    loadQuota(pageItems, 'page', setLoading);
+  }, [loadQuota, pageItems, setLoading]);
+
+  const handleRefreshAll = useCallback(() => {
+    loadQuota(filteredFiles, 'all', setLoading);
+  }, [loadQuota, filteredFiles, 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]);
+
+  return (
+    <Card
+      title={t(`${config.i18nPrefix}.title`)}
+      extra={
+        <div className={styles.headerActions}>
+          <Button
+            variant="secondary"
+            size="sm"
+            onClick={handleRefreshPage}
+            disabled={disabled || sectionLoading || pageItems.length === 0}
+            loading={sectionLoading && loadingScope === 'page'}
+          >
+            {t(`${config.i18nPrefix}.refresh_button`)}
+          </Button>
+          <Button
+            variant="secondary"
+            size="sm"
+            onClick={handleRefreshAll}
+            disabled={disabled || sectionLoading || filteredFiles.length === 0}
+            loading={sectionLoading && loadingScope === 'all'}
+          >
+            {t(`${config.i18nPrefix}.fetch_all`)}
+          </Button>
+        </div>
+      }
+    >
+      {filteredFiles.length === 0 ? (
+        <EmptyState
+          title={t(`${config.i18nPrefix}.empty_title`)}
+          description={t(`${config.i18nPrefix}.empty_desc`)}
+        />
+      ) : (
+        <>
+          <div className={config.controlsClassName}>
+            <div className={config.controlClassName}>
+              <label>{t('auth_files.page_size_label')}</label>
+              <input
+                className={styles.pageSizeSelect}
+                type="number"
+                min={MIN_CARD_PAGE_SIZE}
+                max={MAX_CARD_PAGE_SIZE}
+                step={1}
+                value={pageSize}
+                onChange={(e) => {
+                  const value = e.currentTarget.valueAsNumber;
+                  if (!Number.isFinite(value)) return;
+                  setPageSize(value);
+                }}
+              />
+            </div>
+            <div className={config.controlClassName}>
+              <label>{t('common.info')}</label>
+              <div className={styles.statsInfo}>
+                {filteredFiles.length} {t('auth_files.files_count')}
+              </div>
+            </div>
+          </div>
+          <div className={config.gridClassName}>
+            {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 && (
+            <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>
+          )}
+        </>
+      )}
+    </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,553 @@
+/**
+ * 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, 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';
+
+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 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'));
+  }
+
+  let lastError = '';
+  let lastStatus: number | undefined;
+  let priorityStatus: number | undefined;
+  let hadSuccess = false;
+
+  for (const url of ANTIGRAVITY_QUOTA_URLS) {
+    try {
+      const result = await apiCallApi.request({
+        authIndex,
+        method: 'POST',
+        url,
+        header: { ...ANTIGRAVITY_REQUEST_HEADERS },
+        data: '{}'
+      });
+
+      if (result.statusCode < 200 || result.statusCode >= 300) {
+        lastError = getApiCallErrorMessage(result);
+        lastStatus = result.statusCode;
+        if (result.statusCode === 403 || result.statusCode === 404) {
+          priorityStatus ??= result.statusCode;
+        }
+        continue;
+      }
+
+      hadSuccess = true;
+      const payload = parseAntigravityPayload(result.body ?? result.bodyText);
+      const models = payload?.models;
+      if (!models || typeof models !== 'object' || Array.isArray(models)) {
+        lastError = t('antigravity_quota.empty_models');
+        continue;
+      }
+
+      const groups = buildAntigravityQuotaGroups(models as AntigravityModelsPayload);
+      if (groups.length === 0) {
+        lastError = t('antigravity_quota.empty_models');
+        continue;
+      }
+
+      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/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

@@ -0,0 +1,39 @@
+import type { ButtonHTMLAttributes, PropsWithChildren } from 'react';
+
+type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger';
+type ButtonSize = 'md' | 'sm';
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  fullWidth?: boolean;
+  loading?: boolean;
+}
+
+export function Button({
+  children,
+  variant = 'primary',
+  size = 'md',
+  fullWidth = false,
+  loading = false,
+  className = '',
+  disabled,
+  ...rest
+}: PropsWithChildren<ButtonProps>) {
+  const classes = [
+    'btn',
+    `btn-${variant}`,
+    size === 'sm' ? 'btn-sm' : '',
+    fullWidth ? 'btn-full' : '',
+    className
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  return (
+    <button className={classes} disabled={disabled || loading} {...rest}>
+      {loading && <span className="loading-spinner" aria-hidden="true" />}
+      <span>{children}</span>
+    </button>
+  );
+}

src/components/ui/Card.tsx

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

src/components/ui/EmptyState.tsx

@@ -0,0 +1,25 @@
+import type { ReactNode } from 'react';
+import { IconInbox } from './icons';
+
+interface EmptyStateProps {
+  title: string;
+  description?: string;
+  action?: ReactNode;
+}
+
+export function EmptyState({ title, description, action }: EmptyStateProps) {
+  return (
+    <div className="empty-state">
+      <div className="empty-content">
+        <div className="empty-icon" aria-hidden="true">
+          <IconInbox size={20} />
+        </div>
+        <div>
+          <div className="empty-title">{title}</div>
+          {description && <div className="empty-desc">{description}</div>}
+        </div>
+      </div>
+      {action && <div className="empty-action">{action}</div>}
+    </div>
+  );
+}

src/components/ui/HeaderInputList.tsx

@@ -0,0 +1,77 @@
+import { Fragment } from 'react';
+import { Button } from './Button';
+import { IconX } from './icons';
+import type { HeaderEntry } from '@/utils/headers';
+
+interface HeaderInputListProps {
+  entries: HeaderEntry[];
+  onChange: (entries: HeaderEntry[]) => void;
+  addLabel: string;
+  disabled?: boolean;
+  keyPlaceholder?: string;
+  valuePlaceholder?: string;
+}
+
+export function HeaderInputList({
+  entries,
+  onChange,
+  addLabel,
+  disabled = false,
+  keyPlaceholder = 'X-Custom-Header',
+  valuePlaceholder = 'value'
+}: HeaderInputListProps) {
+  const currentEntries = entries.length ? entries : [{ key: '', value: '' }];
+
+  const updateEntry = (index: number, field: 'key' | 'value', value: string) => {
+    const next = currentEntries.map((entry, idx) => (idx === index ? { ...entry, [field]: value } : entry));
+    onChange(next);
+  };
+
+  const addEntry = () => {
+    onChange([...currentEntries, { key: '', value: '' }]);
+  };
+
+  const removeEntry = (index: number) => {
+    const next = currentEntries.filter((_, idx) => idx !== index);
+    onChange(next.length ? next : [{ key: '', value: '' }]);
+  };
+
+  return (
+    <div className="header-input-list">
+      {currentEntries.map((entry, index) => (
+        <Fragment key={index}>
+          <div className="header-input-row">
+            <input
+              className="input"
+              placeholder={keyPlaceholder}
+              value={entry.key}
+              onChange={(e) => updateEntry(index, 'key', e.target.value)}
+              disabled={disabled}
+            />
+            <span className="header-separator">:</span>
+            <input
+              className="input"
+              placeholder={valuePlaceholder}
+              value={entry.value}
+              onChange={(e) => updateEntry(index, 'value', e.target.value)}
+              disabled={disabled}
+            />
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => removeEntry(index)}
+              disabled={disabled || currentEntries.length <= 1}
+              title="Remove"
+              aria-label="Remove"
+            >
+              <IconX size={14} />
+            </Button>
+          </div>
+        </Fragment>
+      ))}
+      <Button variant="secondary" size="sm" onClick={addEntry} disabled={disabled} className="align-start">
+        {addLabel}
+      </Button>
+    </div>
+  );
+}

src/components/ui/Input.tsx

@@ -0,0 +1,26 @@
+import type { InputHTMLAttributes, ReactNode } from 'react';
+
+interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+  hint?: string;
+  error?: string;
+  rightElement?: ReactNode;
+}
+
+export function Input({ label, hint, error, rightElement, className = '', ...rest }: InputProps) {
+  return (
+    <div className="form-group">
+      {label && <label>{label}</label>}
+      <div style={{ position: 'relative' }}>
+        <input className={`input ${className}`.trim()} {...rest} />
+        {rightElement && (
+          <div style={{ position: 'absolute', right: 8, top: '50%', transform: 'translateY(-50%)' }}>
+            {rightElement}
+          </div>
+        )}
+      </div>
+      {hint && <div className="hint">{hint}</div>}
+      {error && <div className="error-box">{error}</div>}
+    </div>
+  );
+}

src/components/ui/LoadingSpinner.tsx

@@ -0,0 +1,16 @@
+export function LoadingSpinner({
+  size = 20,
+  className = ''
+}: {
+  size?: number;
+  className?: string;
+}) {
+  return (
+    <div
+      className={`loading-spinner${className ? ` ${className}` : ''}`}
+      style={{ width: size, height: size, borderWidth: size / 7 }}
+      role="status"
+      aria-live="polite"
+    />
+  );
+}

src/components/ui/Modal.tsx

@@ -0,0 +1,117 @@
+import { useState, useEffect, useCallback, useRef, type PropsWithChildren, type ReactNode } from 'react';
+import { createPortal } from 'react-dom';
+import { IconX } from './icons';
+
+interface ModalProps {
+  open: boolean;
+  title?: ReactNode;
+  onClose: () => void;
+  footer?: ReactNode;
+  width?: number | string;
+}
+
+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);
+  const [isClosing, setIsClosing] = useState(false);
+  const closeTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const startClose = useCallback(
+    (notifyParent: boolean) => {
+      if (closeTimerRef.current !== null) return;
+      setIsClosing(true);
+      closeTimerRef.current = window.setTimeout(() => {
+        setIsVisible(false);
+        setIsClosing(false);
+        closeTimerRef.current = null;
+        if (notifyParent) {
+          onClose();
+        }
+      }, CLOSE_ANIMATION_DURATION);
+    },
+    [onClose]
+  );
+
+  useEffect(() => {
+    if (open) {
+      if (closeTimerRef.current !== null) {
+        window.clearTimeout(closeTimerRef.current);
+        closeTimerRef.current = null;
+      }
+      setIsVisible(true);
+      setIsClosing(false);
+      return;
+    }
+
+    if (isVisible) {
+      startClose(false);
+    }
+  }, [open, isVisible, startClose]);
+
+  const handleClose = useCallback(() => {
+    startClose(true);
+  }, [startClose]);
+
+  useEffect(() => {
+    return () => {
+      if (closeTimerRef.current !== null) {
+        window.clearTimeout(closeTimerRef.current);
+      }
+    };
+  }, []);
+
+  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'}`;
+
+  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">
+          <IconX size={20} />
+        </button>
+        <div className="modal-header">
+          <div className="modal-title">{title}</div>
+        </div>
+        <div className="modal-body">{children}</div>
+        {footer && <div className="modal-footer">{footer}</div>}
+      </div>
+    </div>
+  );
+
+  if (typeof document === 'undefined') {
+    return modalContent;
+  }
+
+  return createPortal(modalContent, document.body);
+}

src/components/ui/ModelInputList.tsx

@@ -0,0 +1,105 @@
+import { Fragment } from 'react';
+import { Button } from './Button';
+import { IconX } from './icons';
+import type { ModelAlias } from '@/types';
+
+interface ModelEntry {
+  name: string;
+  alias: string;
+}
+
+interface ModelInputListProps {
+  entries: ModelEntry[];
+  onChange: (entries: ModelEntry[]) => void;
+  addLabel: string;
+  disabled?: boolean;
+  namePlaceholder?: string;
+  aliasPlaceholder?: string;
+}
+
+export const modelsToEntries = (models?: ModelAlias[]): ModelEntry[] => {
+  if (!Array.isArray(models) || models.length === 0) {
+    return [{ name: '', alias: '' }];
+  }
+  return models.map((m) => ({
+    name: m.name || '',
+    alias: m.alias || ''
+  }));
+};
+
+export const entriesToModels = (entries: ModelEntry[]): ModelAlias[] => {
+  return entries
+    .filter((entry) => entry.name.trim())
+    .map((entry) => {
+      const model: ModelAlias = { name: entry.name.trim() };
+      const alias = entry.alias.trim();
+      if (alias && alias !== model.name) {
+        model.alias = alias;
+      }
+      return model;
+    });
+};
+
+export function ModelInputList({
+  entries,
+  onChange,
+  addLabel,
+  disabled = false,
+  namePlaceholder = 'model-name',
+  aliasPlaceholder = 'alias (optional)'
+}: ModelInputListProps) {
+  const currentEntries = entries.length ? entries : [{ name: '', alias: '' }];
+
+  const updateEntry = (index: number, field: 'name' | 'alias', value: string) => {
+    const next = currentEntries.map((entry, idx) => (idx === index ? { ...entry, [field]: value } : entry));
+    onChange(next);
+  };
+
+  const addEntry = () => {
+    onChange([...currentEntries, { name: '', alias: '' }]);
+  };
+
+  const removeEntry = (index: number) => {
+    const next = currentEntries.filter((_, idx) => idx !== index);
+    onChange(next.length ? next : [{ name: '', alias: '' }]);
+  };
+
+  return (
+    <div className="header-input-list">
+      {currentEntries.map((entry, index) => (
+        <Fragment key={index}>
+          <div className="header-input-row">
+            <input
+              className="input"
+              placeholder={namePlaceholder}
+              value={entry.name}
+              onChange={(e) => updateEntry(index, 'name', e.target.value)}
+              disabled={disabled}
+            />
+            <span className="header-separator">→</span>
+            <input
+              className="input"
+              placeholder={aliasPlaceholder}
+              value={entry.alias}
+              onChange={(e) => updateEntry(index, 'alias', e.target.value)}
+              disabled={disabled}
+            />
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => removeEntry(index)}
+              disabled={disabled || currentEntries.length <= 1}
+              title="Remove"
+              aria-label="Remove"
+            >
+              <IconX size={14} />
+            </Button>
+          </div>
+        </Fragment>
+      ))}
+      <Button variant="secondary" size="sm" onClick={addEntry} disabled={disabled} className="align-start">
+        {addLabel}
+      </Button>
+    </div>
+  );
+}

src/components/ui/ToggleSwitch.tsx

@@ -0,0 +1,35 @@
+import type { ChangeEvent, ReactNode } from 'react';
+
+interface ToggleSwitchProps {
+  checked: boolean;
+  onChange: (value: boolean) => void;
+  label?: ReactNode;
+  disabled?: boolean;
+  labelPosition?: 'left' | 'right';
+}
+
+export function ToggleSwitch({
+  checked,
+  onChange,
+  label,
+  disabled = false,
+  labelPosition = 'right'
+}: ToggleSwitchProps) {
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    onChange(event.target.checked);
+  };
+
+  const className = ['switch', labelPosition === 'left' ? 'switch-label-left' : '']
+    .filter(Boolean)
+    .join(' ');
+
+  return (
+    <label className={className}>
+      <input type="checkbox" checked={checked} onChange={handleChange} disabled={disabled} />
+      <span className="track">
+        <span className="thumb" />
+      </span>
+      {label && <span className="label">{label}</span>}
+    </label>
+  );
+}

src/components/ui/icons.tsx

@@ -0,0 +1,316 @@
+import type { SVGProps } from 'react';
+
+// Inline SVG icons (Lucide, ISC). We embed paths to keep the WebUI single-file/offline friendly.
+// Source: https://github.com/lucide-icons/lucide (via lucide-static).
+
+export interface IconProps extends SVGProps<SVGSVGElement> {
+  size?: number;
+}
+
+const baseSvgProps: SVGProps<SVGSVGElement> = {
+  xmlns: 'http://www.w3.org/2000/svg',
+  viewBox: '0 0 24 24',
+  fill: 'none',
+  stroke: 'currentColor',
+  strokeWidth: 2,
+  strokeLinecap: 'round',
+  strokeLinejoin: 'round',
+  'aria-hidden': 'true',
+  focusable: 'false'
+};
+
+export function IconSlidersHorizontal({ size = 20, ...props }: IconProps) {
+  return (
+    <svg {...baseSvgProps} width={size} height={size} {...props}>
+      <line x1="21" x2="14" y1="4" y2="4" />
+      <line x1="10" x2="3" y1="4" y2="4" />
+      <line x1="21" x2="12" y1="12" y2="12" />
+      <line x1="8" x2="3" y1="12" y2="12" />
+      <line x1="21" x2="16" y1="20" y2="20" />
+      <line x1="12" x2="3" y1="20" y2="20" />
+      <line x1="14" x2="14" y1="2" y2="6" />
+      <line x1="8" x2="8" y1="10" y2="14" />
+      <line x1="16" x2="16" y1="18" y2="22" />
+    </svg>
+  );
+}
+
+export function IconKey({ size = 20, ...props }: IconProps) {
+  return (
+    <svg {...baseSvgProps} width={size} height={size} {...props}>
+      <path d="m15.5 7.5 2.3 2.3a1 1 0 0 0 1.4 0l2.1-2.1a1 1 0 0 0 0-1.4L19 4" />
+      <path d="m21 2-9.6 9.6" />
+      <circle cx="7.5" cy="15.5" r="5.5" />
+    </svg>
+  );
+}
+
+export function IconBot({ size = 20, ...props }: IconProps) {
+  return (
+    <svg {...baseSvgProps} width={size} height={size} {...props}>
+      <path d="M12 8V4H8" />
+      <rect width="16" height="12" x="4" y="8" rx="2" />
+      <path d="M2 14h2" />
+      <path d="M20 14h2" />
+      <path d="M15 13v2" />
+      <path d="M9 13v2" />
+    </svg>
+  );
+}
+
+export function IconFileText({ size = 20, ...props }: IconProps) {
+  return (
+    <svg {...baseSvgProps} width={size} height={size} {...props}>
+      <path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" />
+      <path d="M14 2v4a2 2 0 0 0 2 2h4" />
+      <path d="M10 9H8" />
+      <path d="M16 13H8" />
+      <path d="M16 17H8" />
+    </svg>
+  );
+}
+
+export function IconShield({ size = 20, ...props }: IconProps) {
+  return (
+    <svg {...baseSvgProps} width={size} height={size} {...props}>
+      <path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" />
+    </svg>
+  );
+}
+
+export function IconChartLine({ size = 20, ...props }: IconProps) {
+  return (
+    <svg {...baseSvgProps} width={size} height={size} {...props}>
+      <path d="M3 3v16a2 2 0 0 0 2 2h16" />
+      <path d="m19 9-5 5-4-4-3 3" />
+    </svg>
+  );
+}
+
+export function IconSettings({ size = 20, ...props }: IconProps) {
+  return (
+    <svg {...baseSvgProps} width={size} height={size} {...props}>
+      <path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z" />
+      <circle cx="12" cy="12" r="3" />
+    </svg>
+  );
+}
+
+export function IconScrollText({ size = 20, ...props }: IconProps) {
+  return (
+    <svg {...baseSvgProps} width={size} height={size} {...props}>
+      <path d="M15 12h-5" />
+      <path d="M15 8h-5" />
+      <path d="M19 17V5a2 2 0 0 0-2-2H4" />
+      <path d="M8 21h12a2 2 0 0 0 2-2v-1a1 1 0 0 0-1-1H11a1 1 0 0 0-1 1v1a2 2 0 1 1-4 0V5a2 2 0 1 0-4 0v2a1 1 0 0 0 1 1h3" />
+    </svg>
+  );
+}
+
+export function IconInfo({ size = 20, ...props }: IconProps) {
+  return (
+    <svg {...baseSvgProps} width={size} height={size} {...props}>
+      <circle cx="12" cy="12" r="10" />
+      <path d="M12 16v-4" />
+      <path d="M12 8h.01" />
+    </svg>
+  );
+}
+
+export function IconRefreshCw({ size = 20, ...props }: IconProps) {
+  return (
+    <svg {...baseSvgProps} width={size} height={size} {...props}>
+      <path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8" />
+      <path d="M21 3v5h-5" />
+    </svg>
+  );
+}
+
+export function IconDownload({ size = 20, ...props }: IconProps) {
+  return (
+    <svg {...baseSvgProps} width={size} height={size} {...props}>
+      <path d="M12 15V3" />
+      <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+      <path d="m7 10 5 5 5-5" />
+    </svg>
+  );
+}
+
+export function IconTrash2({ size = 20, ...props }: IconProps) {
+  return (
+    <svg {...baseSvgProps} width={size} height={size} {...props}>
+      <path d="M3 6h18" />
+      <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" />
+      <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" />
+      <line x1="10" x2="10" y1="11" y2="17" />
+      <line x1="14" x2="14" y1="11" y2="17" />
+    </svg>
+  );
+}
+
+export function IconChevronUp({ size = 20, ...props }: IconProps) {
+  return (
+    <svg {...baseSvgProps} width={size} height={size} {...props}>
+      <path d="m18 15-6-6-6 6" />
+    </svg>
+  );
+}
+
+export function IconChevronDown({ size = 20, ...props }: IconProps) {
+  return (
+    <svg {...baseSvgProps} width={size} height={size} {...props}>
+      <path d="m6 9 6 6 6-6" />
+    </svg>
+  );
+}
+
+export function IconSearch({ size = 20, ...props }: IconProps) {
+  return (
+    <svg {...baseSvgProps} width={size} height={size} {...props}>
+      <path d="m21 21-4.34-4.34" />
+      <circle cx="11" cy="11" r="8" />
+    </svg>
+  );
+}
+
+export function IconX({ size = 20, ...props }: IconProps) {
+  return (
+    <svg {...baseSvgProps} width={size} height={size} {...props}>
+      <path d="M18 6 6 18" />
+      <path d="m6 6 12 12" />
+    </svg>
+  );
+}
+
+export function IconCheck({ size = 20, ...props }: IconProps) {
+  return (
+    <svg {...baseSvgProps} width={size} height={size} {...props}>
+      <path d="M20 6 9 17l-5-5" />
+    </svg>
+  );
+}
+
+export function IconEye({ size = 20, ...props }: IconProps) {
+  return (
+    <svg {...baseSvgProps} width={size} height={size} {...props}>
+      <path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0" />
+      <circle cx="12" cy="12" r="3" />
+    </svg>
+  );
+}
+
+export function IconEyeOff({ size = 20, ...props }: IconProps) {
+  return (
+    <svg {...baseSvgProps} width={size} height={size} {...props}>
+      <path d="M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49" />
+      <path d="M14.084 14.158a3 3 0 0 1-4.242-4.242" />
+      <path d="M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143" />
+      <path d="m2 2 20 20" />
+    </svg>
+  );
+}
+
+export function IconInbox({ size = 20, ...props }: IconProps) {
+  return (
+    <svg {...baseSvgProps} width={size} height={size} {...props}>
+      <polyline points="22 12 16 12 14 15 10 15 8 12 2 12" />
+      <path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" />
+    </svg>
+  );
+}
+
+export function IconSatellite({ size = 20, ...props }: IconProps) {
+  return (
+    <svg {...baseSvgProps} width={size} height={size} {...props}>
+      <path d="m13.5 6.5-3.148-3.148a1.205 1.205 0 0 0-1.704 0L6.352 5.648a1.205 1.205 0 0 0 0 1.704L9.5 10.5" />
+      <path d="M16.5 7.5 19 5" />
+      <path d="m17.5 10.5 3.148 3.148a1.205 1.205 0 0 1 0 1.704l-2.296 2.296a1.205 1.205 0 0 1-1.704 0L13.5 14.5" />
+      <path d="M9 21a6 6 0 0 0-6-6" />
+      <path d="M9.352 10.648a1.205 1.205 0 0 0 0 1.704l2.296 2.296a1.205 1.205 0 0 0 1.704 0l4.296-4.296a1.205 1.205 0 0 0 0-1.704l-2.296-2.296a1.205 1.205 0 0 0-1.704 0z" />
+    </svg>
+  );
+}
+
+export function IconDiamond({ size = 20, ...props }: IconProps) {
+  return (
+    <svg {...baseSvgProps} width={size} height={size} {...props}>
+      <path d="M2.7 10.3a2.41 2.41 0 0 0 0 3.41l7.59 7.59a2.41 2.41 0 0 0 3.41 0l7.59-7.59a2.41 2.41 0 0 0 0-3.41l-7.59-7.59a2.41 2.41 0 0 0-3.41 0Z" />
+    </svg>
+  );
+}
+
+export function IconTimer({ size = 20, ...props }: IconProps) {
+  return (
+    <svg {...baseSvgProps} width={size} height={size} {...props}>
+      <line x1="10" x2="14" y1="2" y2="2" />
+      <line x1="12" x2="15" y1="14" y2="11" />
+      <circle cx="12" cy="14" r="8" />
+    </svg>
+  );
+}
+
+export function IconTrendingUp({ size = 20, ...props }: IconProps) {
+  return (
+    <svg {...baseSvgProps} width={size} height={size} {...props}>
+      <path d="M16 7h6v6" />
+      <path d="m22 7-8.5 8.5-5-5L2 17" />
+    </svg>
+  );
+}
+
+export function IconDollarSign({ size = 20, ...props }: IconProps) {
+  return (
+    <svg {...baseSvgProps} width={size} height={size} {...props}>
+      <line x1="12" x2="12" y1="2" y2="22" />
+      <path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" />
+    </svg>
+  );
+}
+
+export function IconGithub({ size = 20, ...props }: IconProps) {
+  return (
+    <svg {...baseSvgProps} width={size} height={size} {...props}>
+      <path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4" />
+      <path d="M9 18c-4.51 2-5-2-7-2" />
+    </svg>
+  );
+}
+
+export function IconExternalLink({ size = 20, ...props }: IconProps) {
+  return (
+    <svg {...baseSvgProps} width={size} height={size} {...props}>
+      <path d="M15 3h6v6" />
+      <path d="M10 14 21 3" />
+      <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
+    </svg>
+  );
+}
+
+export function IconBookOpen({ size = 20, ...props }: IconProps) {
+  return (
+    <svg {...baseSvgProps} width={size} height={size} {...props}>
+      <path d="M12 7v14" />
+      <path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z" />
+    </svg>
+  );
+}
+
+export function IconCode({ size = 20, ...props }: IconProps) {
+  return (
+    <svg {...baseSvgProps} width={size} height={size} {...props}>
+      <polyline points="16 18 22 12 16 6" />
+      <polyline points="8 6 2 12 8 18" />
+    </svg>
+  );
+}
+
+export function IconLayoutDashboard({ size = 20, ...props }: IconProps) {
+  return (
+    <svg {...baseSvgProps} width={size} height={size} {...props}>
+      <rect width="7" height="9" x="3" y="3" rx="1" />
+      <rect width="7" height="5" x="14" y="3" rx="1" />
+      <rect width="7" height="9" x="14" y="12" rx="1" />
+      <rect width="7" height="5" x="3" y="16" rx="1" />
+    </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

@@ -0,0 +1,11 @@
+/**
+ * Hooks 统一导出
+ */
+
+export { useApi } from './useApi';
+export { useDebounce } from './useDebounce';
+export { useLocalStorage } from './useLocalStorage';
+export { useInterval } from './useInterval';
+export { useMediaQuery } from './useMediaQuery';
+export { usePagination } from './usePagination';
+export { useHeaderRefresh } from './useHeaderRefresh';

src/hooks/useApi.ts

@@ -0,0 +1,65 @@
+/**
+ * 通用 API 调用 Hook
+ */
+
+import { useState, useCallback } from 'react';
+import { useNotificationStore } from '@/stores';
+
+interface UseApiOptions<T> {
+  onSuccess?: (data: T) => void;
+  onError?: (error: Error) => void;
+  showSuccessNotification?: boolean;
+  showErrorNotification?: boolean;
+  successMessage?: string;
+}
+
+export function useApi<T = any, Args extends any[] = any[]>(
+  apiFunction: (...args: Args) => Promise<T>,
+  options: UseApiOptions<T> = {}
+) {
+  const [data, setData] = useState<T | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+
+  const { showNotification } = useNotificationStore();
+
+  const execute = useCallback(
+    async (...args: Args) => {
+      setLoading(true);
+      setError(null);
+
+      try {
+        const result = await apiFunction(...args);
+        setData(result);
+
+        if (options.showSuccessNotification && options.successMessage) {
+          showNotification(options.successMessage, 'success');
+        }
+
+        options.onSuccess?.(result);
+        return result;
+      } catch (err) {
+        const errorObj = err as Error;
+        setError(errorObj);
+
+        if (options.showErrorNotification !== false) {
+          showNotification(errorObj.message, 'error');
+        }
+
+        options.onError?.(errorObj);
+        throw errorObj;
+      } finally {
+        setLoading(false);
+      }
+    },
+    [apiFunction, options, showNotification]
+  );
+
+  const reset = useCallback(() => {
+    setData(null);
+    setError(null);
+    setLoading(false);
+  }, []);
+
+  return { data, loading, error, execute, reset };
+}

src/hooks/useDebounce.ts

@@ -0,0 +1,21 @@
+/**
+ * 防抖 Hook
+ */
+
+import { useEffect, useState } from 'react';
+
+export function useDebounce<T>(value: T, delay: number = 500): T {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value);
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+}

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/hooks/useInterval.ts

@@ -0,0 +1,24 @@
+/**
+ * 定时器 Hook
+ */
+
+import { useEffect, useRef } from 'react';
+
+export function useInterval(callback: () => void, delay: number | null) {
+  const savedCallback = useRef<(() => void) | null>(null);
+
+  useEffect(() => {
+    savedCallback.current = callback;
+  }, [callback]);
+
+  useEffect(() => {
+    if (delay === null) return;
+
+    const tick = () => {
+      savedCallback.current?.();
+    };
+
+    const id = setInterval(tick, delay);
+    return () => clearInterval(id);
+  }, [delay]);
+}

src/hooks/useLocalStorage.ts

@@ -0,0 +1,32 @@
+/**
+ * LocalStorage Hook
+ */
+
+import { useState } from 'react';
+
+export function useLocalStorage<T>(
+  key: string,
+  initialValue: T
+): [T, (value: T | ((val: T) => T)) => void] {
+  const [storedValue, setStoredValue] = useState<T>(() => {
+    try {
+      const item = window.localStorage.getItem(key);
+      return item ? (JSON.parse(item) as T) : initialValue;
+    } catch (error) {
+      console.error(`Error reading localStorage key "${key}":`, error);
+      return initialValue;
+    }
+  });
+
+  const setValue = (value: T | ((val: T) => T)) => {
+    try {
+      const valueToStore = value instanceof Function ? value(storedValue) : value;
+      setStoredValue(valueToStore);
+      window.localStorage.setItem(key, JSON.stringify(valueToStore));
+    } catch (error) {
+      console.error(`Error setting localStorage key "${key}":`, error);
+    }
+  };
+
+  return [storedValue, setValue];
+}

src/hooks/useMediaQuery.ts

@@ -0,0 +1,27 @@
+/**
+ * 媒体查询 Hook
+ */
+
+import { useState, useEffect } from 'react';
+
+export function useMediaQuery(query: string): boolean {
+  const [matches, setMatches] = useState(() => {
+    return window.matchMedia(query).matches;
+  });
+
+  useEffect(() => {
+    const media = window.matchMedia(query);
+
+    const listener = (event: MediaQueryListEvent) => {
+      setMatches(event.matches);
+    };
+
+    // Set initial value via listener to avoid direct setState in effect
+    listener({ matches: media.matches } as MediaQueryListEvent);
+
+    media.addEventListener('change', listener);
+    return () => media.removeEventListener('change', listener);
+  }, [query]);
+
+  return matches;
+}

src/hooks/usePagination.ts

@@ -0,0 +1,59 @@
+/**
+ * 分页 Hook
+ */
+
+import { useState, useMemo } from 'react';
+import type { PaginationState } from '@/types';
+
+export function usePagination<T>(
+  items: T[],
+  initialPageSize: number = 20
+): PaginationState & {
+  currentItems: T[];
+  goToPage: (page: number) => void;
+  nextPage: () => void;
+  prevPage: () => void;
+  setPageSize: (size: number) => void;
+} {
+  const [currentPage, setCurrentPage] = useState(1);
+  const [pageSize, setPageSize] = useState(initialPageSize);
+
+  const totalItems = items.length;
+  const totalPages = Math.ceil(totalItems / pageSize) || 1;
+
+  const currentItems = useMemo(() => {
+    const start = (currentPage - 1) * pageSize;
+    const end = start + pageSize;
+    return items.slice(start, end);
+  }, [items, currentPage, pageSize]);
+
+  const goToPage = (page: number) => {
+    const validPage = Math.max(1, Math.min(page, totalPages));
+    setCurrentPage(validPage);
+  };
+
+  const nextPage = () => {
+    goToPage(currentPage + 1);
+  };
+
+  const prevPage = () => {
+    goToPage(currentPage - 1);
+  };
+
+  const handleSetPageSize = (size: number) => {
+    setPageSize(size);
+    setCurrentPage(1); // 重置到第一页
+  };
+
+  return {
+    currentPage,
+    pageSize,
+    totalPages,
+    totalItems,
+    currentItems,
+    goToPage,
+    nextPage,
+    prevPage,
+    setPageSize: handleSetPageSize
+  };
+}

src/i18n/index.ts

@@ -0,0 +1,26 @@
+/**
+ * i18next 国际化配置
+ */
+
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import zhCN from './locales/zh-CN.json';
+import en from './locales/en.json';
+import { getInitialLanguage } from '@/utils/language';
+
+i18n.use(initReactI18next).init({
+  resources: {
+    'zh-CN': { translation: zhCN },
+    en: { translation: en }
+  },
+  lng: getInitialLanguage(),
+  fallbackLng: 'zh-CN',
+  interpolation: {
+    escapeValue: false // React 已经转义
+  },
+  react: {
+    useSuspense: false
+  }
+});
+
+export default i18n;

src/i18n/locales/en.json

@@ -0,0 +1,837 @@
+{
+  "common": {
+    "login": "Login",
+    "logout": "Logout",
+    "cancel": "Cancel",
+    "confirm": "Confirm",
+    "save": "Save",
+    "delete": "Delete",
+    "edit": "Edit",
+    "add": "Add",
+    "update": "Update",
+    "refresh": "Refresh",
+    "close": "Close",
+    "success": "Success",
+    "error": "Error",
+    "info": "Info",
+    "warning": "Warning",
+    "loading": "Loading...",
+    "connecting": "Connecting...",
+    "connected": "Connected",
+    "disconnected": "Disconnected",
+    "connecting_status": "Connecting",
+    "connected_status": "Connected",
+    "disconnected_status": "Disconnected",
+    "yes": "Yes",
+    "no": "No",
+    "not_set": "Not set",
+    "optional": "Optional",
+    "required": "Required",
+    "api_key": "Key",
+    "base_url": "Address",
+    "prefix": "Prefix",
+    "proxy_url": "Proxy",
+    "alias": "Alias",
+    "failure": "Failure",
+    "unknown_error": "Unknown error",
+    "quota_update_required": "Please update the CPA version or check for updates",
+    "quota_check_credential": "Please check the credential status",
+    "copy": "Copy",
+    "custom_headers_label": "Custom Headers",
+    "custom_headers_hint": "Optional HTTP headers to send with the request. Leave blank to remove.",
+    "custom_headers_add": "Add Header",
+    "custom_headers_key_placeholder": "Header name, e.g. X-Custom-Header",
+    "custom_headers_value_placeholder": "Header value",
+    "model_name_placeholder": "Model name, e.g. claude-3-5-sonnet-20241022",
+    "model_alias_placeholder": "Model alias (optional)"
+  },
+  "title": {
+    "main": "CLI Proxy API Management Center",
+    "login": "CLI Proxy API Management Center",
+    "abbr": "CPAMC"
+  },
+  "auto_login": {
+    "title": "Auto Login in Progress...",
+    "message": "Attempting to connect to server using locally saved connection information"
+  },
+  "login": {
+    "subtitle": "Please enter connection information to access the management interface",
+    "connection_title": "Connection Address",
+    "connection_current": "Current URL",
+    "connection_auto_hint": "The system will automatically use the current URL for connection",
+    "custom_connection_label": "Custom Connection URL:",
+    "custom_connection_placeholder": "Eg: https://example.com:8317",
+    "custom_connection_hint": "By default the current URL is used. Override it here if needed.",
+    "use_current_address": "Use Current URL",
+    "remember_password_label": "Remember password",
+    "management_key_label": "Management Key:",
+    "management_key_placeholder": "Enter the management key",
+    "connect_button": "Connect",
+    "submit_button": "Login",
+    "submitting": "Connecting...",
+    "error_title": "Login Failed",
+    "error_required": "Please fill in complete connection information",
+    "error_invalid": "Connection failed, please check address and key"
+  },
+  "header": {
+    "check_connection": "Check Connection",
+    "refresh_all": "Refresh All",
+    "logout": "Logout"
+  },
+  "connection": {
+    "title": "Connection Information",
+    "server_address": "Server Address:",
+    "management_key": "Management Key:",
+    "status": "Connection Status:"
+  },
+  "nav": {
+    "dashboard": "Dashboard",
+    "basic_settings": "Basic Settings",
+    "api_keys": "API Keys",
+    "ai_providers": "AI Providers",
+    "auth_files": "Auth Files",
+    "oauth": "OAuth Login",
+    "quota_management": "Quota Management",
+    "usage_stats": "Usage Statistics",
+    "config_management": "Config Management",
+    "logs": "Logs Viewer",
+    "system_info": "Management Center Info"
+  },
+  "dashboard": {
+    "title": "Dashboard",
+    "subtitle": "Welcome to CLI Proxy API Management Center",
+    "openai_providers": "OpenAI Providers",
+    "quick_actions": "Quick Actions",
+    "current_config": "Current Configuration",
+    "management_keys": "Management Keys",
+    "provider_keys_detail": "G:{{gemini}} C:{{codex}} Cl:{{claude}} O:{{openai}}",
+    "oauth_credentials": "OAuth Credentials",
+    "usage_overview": "Usage Overview",
+    "total_requests": "Total Requests",
+    "total_tokens": "Total Tokens",
+    "rpm_30min": "RPM (30min)",
+    "tpm_30min": "TPM (30min)",
+    "models_used": "Models Used",
+    "no_usage_data": "No usage data available",
+    "view_detailed_usage": "View Detailed Stats",
+    "edit_settings": "Edit Settings",
+    "available_models": "Available Models",
+    "available_models_desc": "Total models from all providers"
+  },
+  "basic_settings": {
+    "title": "Basic Settings",
+    "debug_title": "Debug Mode",
+    "debug_enable": "Enable Debug Mode",
+    "proxy_title": "Proxy Settings",
+    "proxy_url_label": "Proxy URL:",
+    "proxy_url_placeholder": "e.g.: socks5://user:pass@127.0.0.1:1080/",
+    "proxy_update": "Update",
+    "proxy_clear": "Clear",
+    "retry_title": "Request Retry",
+    "retry_count_label": "Retry Count:",
+    "retry_update": "Update",
+    "quota_title": "Quota Exceeded Behavior",
+    "quota_switch_project": "Auto Switch Project",
+    "quota_switch_preview": "Switch to Preview Model",
+    "usage_statistics_title": "Usage Statistics",
+    "usage_statistics_enable": "Enable usage statistics",
+    "logging_title": "Logging",
+    "logging_to_file_enable": "Enable logging to file",
+    "request_log_title": "Request Logging",
+    "request_log_enable": "Enable request logging",
+    "request_log_warning": "Keep this off unless you need detailed troubleshooting.",
+    "ws_auth_title": "WebSocket Authentication",
+    "ws_auth_enable": "Require auth for /ws/*"
+  },
+  "api_keys": {
+    "title": "API Keys Management",
+    "proxy_auth_title": "Proxy Service Authentication Keys",
+    "add_button": "Add Key",
+    "empty_title": "No API Keys",
+    "empty_desc": "Click the button above to add the first key",
+    "item_title": "API Key",
+    "add_modal_title": "Add API Key",
+    "add_modal_key_label": "API Key:",
+    "add_modal_key_placeholder": "Please enter API key",
+    "edit_modal_title": "Edit API Key",
+    "edit_modal_key_label": "API Key:",
+    "delete_confirm": "Are you sure you want to delete this API key?"
+  },
+  "ai_providers": {
+    "title": "AI Providers Configuration",
+    "gemini_title": "Gemini API Keys",
+    "gemini_add_button": "Add Key",
+    "gemini_empty_title": "No Gemini Keys",
+    "gemini_empty_desc": "Click the button above to add the first key",
+    "gemini_item_title": "Gemini Key",
+    "gemini_add_modal_title": "Add Gemini API Key",
+    "gemini_add_modal_key_label": "API Keys:",
+    "gemini_add_modal_key_placeholder": "Enter Gemini API key",
+    "gemini_add_modal_key_hint": "Add keys one by one and optionally specify a Base URL.",
+    "gemini_keys_add_btn": "Add Key",
+    "gemini_base_url_label": "Base URL (Optional):",
+    "gemini_base_url_placeholder": "e.g.: https://generativelanguage.googleapis.com",
+    "gemini_edit_modal_title": "Edit Gemini API Key",
+    "gemini_edit_modal_key_label": "API Key:",
+    "gemini_delete_confirm": "Are you sure you want to delete this Gemini key?",
+    "excluded_models_label": "Excluded models (optional):",
+    "excluded_models_placeholder": "Comma or newline separated, e.g. gemini-1.5-pro, gemini-1.5-flash",
+    "excluded_models_hint": "Leave empty to allow all models; values are trimmed and deduplicated automatically.",
+    "excluded_models_count": "Excluding {{count}} models",
+    "prefix_label": "Prefix (Optional):",
+    "prefix_placeholder": "e.g.: team-a",
+    "prefix_hint": "When set, call models as prefix/<model> to target this entry.",
+    "config_toggle_label": "Enabled",
+    "config_disabled_badge": "Disabled",
+    "codex_title": "Codex API Configuration",
+    "codex_add_button": "Add Configuration",
+    "codex_empty_title": "No Codex Configuration",
+    "codex_empty_desc": "Click the button above to add the first configuration",
+    "codex_item_title": "Codex Configuration",
+    "codex_add_modal_title": "Add Codex API Configuration",
+    "codex_add_modal_key_label": "API Key:",
+    "codex_add_modal_key_placeholder": "Please enter Codex API key",
+    "codex_add_modal_url_label": "Base URL (Required):",
+    "codex_add_modal_url_placeholder": "e.g.: https://api.example.com",
+    "codex_add_modal_proxy_label": "Proxy URL (Optional):",
+    "codex_add_modal_proxy_placeholder": "e.g.: socks5://proxy.example.com:1080",
+    "codex_edit_modal_title": "Edit Codex API Configuration",
+    "codex_edit_modal_key_label": "API Key:",
+    "codex_edit_modal_url_label": "Base URL (Required):",
+    "codex_edit_modal_proxy_label": "Proxy URL (Optional):",
+    "codex_delete_confirm": "Are you sure you want to delete this Codex configuration?",
+    "claude_title": "Claude API Configuration",
+    "claude_add_button": "Add Configuration",
+    "claude_empty_title": "No Claude Configuration",
+    "claude_empty_desc": "Click the button above to add the first configuration",
+    "claude_item_title": "Claude Configuration",
+    "claude_add_modal_title": "Add Claude API Configuration",
+    "claude_add_modal_key_label": "API Key:",
+    "claude_add_modal_key_placeholder": "Please enter Claude API key",
+    "claude_add_modal_url_label": "Base URL (Optional):",
+    "claude_add_modal_url_placeholder": "e.g.: https://api.anthropic.com",
+    "claude_add_modal_proxy_label": "Proxy URL (Optional):",
+    "claude_add_modal_proxy_placeholder": "e.g.: socks5://proxy.example.com:1080",
+    "claude_edit_modal_title": "Edit Claude API Configuration",
+    "claude_edit_modal_key_label": "API Key:",
+    "claude_edit_modal_url_label": "Base URL (Optional):",
+    "claude_edit_modal_proxy_label": "Proxy URL (Optional):",
+    "claude_delete_confirm": "Are you sure you want to delete this Claude configuration?",
+    "claude_models_label": "Custom Models (Optional):",
+    "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",
+    "ampcode_title": "Amp CLI Integration (ampcode)",
+    "ampcode_modal_title": "Configure Ampcode",
+    "ampcode_upstream_url_label": "Upstream URL",
+    "ampcode_upstream_url_placeholder": "e.g. https://ampcode.com",
+    "ampcode_upstream_url_hint": "Optional. Leave empty to use the default/auto-discovered control plane URL.",
+    "ampcode_upstream_api_key_label": "Upstream API Key (Amp Official)",
+    "ampcode_upstream_api_key_placeholder": "Enter sk-amp... (leave empty to keep current)",
+    "ampcode_upstream_api_key_hint": "Optional. Leaving it empty will not change the current Amp official key. Use the button below to clear it.",
+    "ampcode_upstream_api_key_current": "Current Amp official key: {{key}}",
+    "ampcode_clear_upstream_api_key": "Clear official key",
+    "ampcode_clear_upstream_api_key_confirm": "Are you sure you want to clear the Ampcode upstream API key (Amp official)?",
+    "ampcode_force_model_mappings_label": "Force model mappings",
+    "ampcode_force_model_mappings_hint": "When enabled, mappings override local API-key availability checks.",
+    "ampcode_model_mappings_label": "Model mappings (from → to)",
+    "ampcode_model_mappings_hint": "Rewrites model names in Amp requests. Leave empty to disable mappings.",
+    "ampcode_model_mappings_add_btn": "Add mapping",
+    "ampcode_model_mappings_from_placeholder": "from model (source)",
+    "ampcode_model_mappings_to_placeholder": "to model (target)",
+    "ampcode_model_mappings_count": "Mappings Count",
+    "ampcode_mappings_overwrite_confirm": "Existing mappings could not be loaded. Continuing may overwrite or clear them. Continue?",
+    "openai_title": "OpenAI Compatible Providers",
+    "openai_add_button": "Add Provider",
+    "openai_empty_title": "No OpenAI Compatible Providers",
+    "openai_empty_desc": "Click the button above to add the first provider",
+    "openai_add_modal_title": "Add OpenAI Compatible Provider",
+    "openai_add_modal_name_label": "Provider Name:",
+    "openai_add_modal_name_placeholder": "e.g.: openrouter",
+    "openai_add_modal_url_label": "Base URL:",
+    "openai_add_modal_url_placeholder": "e.g.: https://openrouter.ai/api/v1",
+    "openai_add_modal_keys_label": "API Keys",
+    "openai_edit_modal_keys_label": "API Keys",
+    "openai_keys_hint": "Add each key separately with an optional proxy URL to keep things organized.",
+    "openai_keys_add_btn": "Add Key",
+    "openai_key_placeholder": "sk-... key",
+    "openai_proxy_placeholder": "Optional proxy URL (e.g. socks5://...)",
+    "openai_add_modal_models_label": "Model List (name[, alias] one per line):",
+    "openai_models_hint": "Example: gpt-4o-mini or moonshotai/kimi-k2:free, kimi-k2",
+    "openai_model_name_placeholder": "Model name, e.g. moonshotai/kimi-k2:free",
+    "openai_model_alias_placeholder": "Model alias (optional)",
+    "openai_models_add_btn": "Add Model",
+    "openai_models_fetch_button": "Fetch via /v1/models",
+    "openai_models_fetch_title": "Pick Models from /v1/models",
+    "openai_models_fetch_hint": "Call the /v1/models endpoint using the Base URL above, sending the first API key as Bearer plus custom headers.",
+    "openai_models_fetch_url_label": "Request URL",
+    "openai_models_fetch_refresh": "Refresh",
+    "openai_models_fetch_loading": "Fetching models from /v1/models...",
+    "openai_models_fetch_empty": "No models returned. Please check the endpoint or auth.",
+    "openai_models_fetch_error": "Failed to fetch models",
+    "openai_models_fetch_back": "Back to edit",
+    "openai_models_fetch_apply": "Add selected models",
+    "openai_models_search_label": "Search models",
+    "openai_models_search_placeholder": "Filter by name, alias, or description",
+    "openai_models_search_empty": "No models match your search. Try a different keyword.",
+    "openai_models_fetch_invalid_url": "Please enter a valid Base URL first",
+    "openai_models_fetch_added": "{{count}} new models added",
+    "openai_edit_modal_title": "Edit OpenAI Compatible Provider",
+    "openai_edit_modal_name_label": "Provider Name:",
+    "openai_edit_modal_url_label": "Base URL:",
+    "openai_edit_modal_models_label": "Model List (name[, alias] one per line):",
+    "openai_delete_confirm": "Are you sure you want to delete this OpenAI provider?",
+    "openai_keys_count": "Keys Count",
+    "openai_models_count": "Models Count",
+    "openai_test_title": "Connection Test",
+    "openai_test_hint": "Send a /v1/chat/completions request with the current settings to verify availability.",
+    "openai_test_model_placeholder": "Model to test",
+    "openai_test_action": "Run Test",
+    "openai_test_running": "Sending test request...",
+    "openai_test_timeout": "Test request timed out after {{seconds}} seconds.",
+    "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"
+  },
+  "auth_files": {
+    "title": "Auth Files Management",
+    "title_section": "Auth Files",
+    "description": "Manage all CLI Proxy JSON auth files here (e.g. Qwen, Gemini, Vertex). Uploading a credential immediately enables the corresponding AI integration.",
+    "upload_button": "Upload File",
+    "delete_all_button": "Delete All",
+    "empty_title": "No Auth Files",
+    "empty_desc": "Click the button above to upload the first file",
+    "search_empty_title": "No matching files",
+    "search_empty_desc": "Try changing the filters or clearing the search box.",
+    "file_size": "Size",
+    "file_modified": "Modified",
+    "download_button": "Download",
+    "delete_button": "Delete",
+    "delete_confirm": "Are you sure you want to delete file",
+    "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_success": "File uploaded successfully",
+    "download_success": "File downloaded successfully",
+    "delete_success": "File deleted successfully",
+    "delete_all_success": "Successfully deleted",
+    "delete_filtered_success": "Deleted {{count}} {{type}} auth files successfully",
+    "delete_filtered_partial": "{{type}} auth files deletion finished: {{success}} succeeded, {{failed}} failed",
+    "delete_filtered_none": "No deletable auth files under the current filter ({{type}})",
+    "files_count": "files",
+    "pagination_prev": "Previous",
+    "pagination_next": "Next",
+    "pagination_info": "Page {{current}} / {{total}} · {{count}} files",
+    "search_label": "Search configs",
+    "search_placeholder": "Filter by name, type, or provider",
+    "page_size_label": "Per page",
+    "page_size_unit": "items",
+    "filter_all": "All",
+    "filter_qwen": "Qwen",
+    "filter_gemini": "Gemini",
+    "filter_gemini-cli": "GeminiCLI",
+    "filter_aistudio": "AIStudio",
+    "filter_claude": "Claude",
+    "filter_codex": "Codex",
+    "filter_antigravity": "Antigravity",
+    "filter_iflow": "iFlow",
+    "filter_vertex": "Vertex",
+    "filter_empty": "Empty",
+    "filter_unknown": "Other",
+    "type_qwen": "Qwen",
+    "type_gemini": "Gemini",
+    "type_gemini-cli": "GeminiCLI",
+    "type_aistudio": "AIStudio",
+    "type_claude": "Claude",
+    "type_codex": "Codex",
+    "type_antigravity": "Antigravity",
+    "type_iflow": "iFlow",
+    "type_vertex": "Vertex",
+    "type_empty": "Empty",
+    "type_unknown": "Other",
+    "type_virtual": "Virtual auth file",
+    "models_button": "Models",
+    "models_title": "Supported models",
+    "models_loading": "Loading model list...",
+    "models_empty": "No available models for this credential",
+    "models_empty_desc": "This credential may not be loaded by the server yet, or no models are bound to it.",
+    "models_unsupported": "This feature is not supported in the current version",
+    "models_unsupported_desc": "Please update CLI Proxy API to the latest version and try again",
+    "models_excluded_badge": "Excluded",
+    "models_excluded_hint": "This model is excluded by OAuth"
+  },
+  "antigravity_quota": {
+    "title": "Antigravity Quota",
+    "empty_title": "No Antigravity Auth Files",
+    "empty_desc": "Upload an Antigravity credential to view remaining quota.",
+    "idle": "Not loaded. Click Refresh Button.",
+    "loading": "Loading quota...",
+    "load_failed": "Failed to load quota: {{message}}",
+    "missing_auth_index": "Auth file missing auth_index",
+    "empty_models": "No quota data available",
+    "refresh_button": "Refresh Quota",
+    "fetch_all": "Fetch All"
+  },
+  "codex_quota": {
+    "title": "Codex Quota",
+    "empty_title": "No Codex Auth Files",
+    "empty_desc": "Upload a Codex credential to view quota.",
+    "idle": "Not loaded. Click Refresh Button.",
+    "loading": "Loading quota...",
+    "load_failed": "Failed to load quota: {{message}}",
+    "missing_auth_index": "Auth file missing auth_index",
+    "missing_account_id": "Codex credential missing ChatGPT account ID",
+    "empty_windows": "No quota data available",
+    "no_access": "This credential has no Codex access (plan: free).",
+    "refresh_button": "Refresh Quota",
+    "fetch_all": "Fetch All",
+    "primary_window": "5-hour limit",
+    "secondary_window": "Weekly limit",
+    "code_review_window": "Code review limit",
+    "plan_label": "Plan",
+    "plan_plus": "Plus",
+    "plan_team": "Team",
+    "plan_free": "Free"
+  },
+  "gemini_cli_quota": {
+    "title": "Gemini CLI Quota",
+    "empty_title": "No Gemini CLI Auth Files",
+    "empty_desc": "Upload a Gemini CLI credential to view remaining quota.",
+    "idle": "Not loaded. Click Refresh Button.",
+    "loading": "Loading quota...",
+    "load_failed": "Failed to load quota: {{message}}",
+    "missing_auth_index": "Auth file missing auth_index",
+    "missing_project_id": "Gemini CLI credential missing project ID",
+    "empty_buckets": "No quota data available",
+    "refresh_button": "Refresh Quota",
+    "fetch_all": "Fetch All",
+    "remaining_amount": "Remaining {{count}}"
+  },
+  "vertex_import": {
+    "title": "Vertex JSON Login",
+    "description": "Upload a Google service account JSON to store it as auth-dir/vertex-<project>.json using the same rules as the CLI vertex-import helper.",
+    "location_label": "Region (optional)",
+    "location_placeholder": "us-central1",
+    "location_hint": "Leave empty to use the default region us-central1.",
+    "file_label": "Service account key JSON",
+    "file_hint": "Only Google Cloud service account key JSON files are accepted.",
+    "file_placeholder": "No file selected",
+    "choose_file": "Choose File",
+    "import_button": "Import Vertex Credential",
+    "file_required": "Select a .json credential file first",
+    "success": "Vertex credential imported successfully",
+    "result_title": "Credential saved",
+    "result_project": "Project ID",
+    "result_email": "Service account",
+    "result_location": "Region",
+    "result_file": "Persisted file"
+  },
+  "oauth_excluded": {
+    "title": "OAuth Excluded Models",
+    "description": "Per-provider exclusions are shown as cards; click edit to adjust. Wildcards * are supported and the scope follows the auth file filter.",
+    "add": "Add Exclusion",
+    "add_title": "Add provider exclusion",
+    "edit_title": "Edit exclusions for {{provider}}",
+    "refresh": "Refresh",
+    "refreshing": "Refreshing...",
+    "provider_label": "Provider",
+    "provider_auto": "Follow current filter",
+    "provider_placeholder": "e.g. gemini-cli",
+    "provider_hint": "Defaults to the current filter; pick an existing provider or type a new name.",
+    "models_label": "Models to exclude",
+    "models_placeholder": "gpt-4.1-mini\n*-preview",
+    "models_hint": "Separate by commas or new lines; saving an empty list removes that provider. * wildcards are supported.",
+    "save": "Save/Update",
+    "saving": "Saving...",
+    "save_success": "Excluded models updated",
+    "save_failed": "Failed to update excluded models",
+    "delete": "Delete Provider",
+    "delete_confirm": "Delete the exclusion list for {{provider}}?",
+    "delete_success": "Exclusion list removed",
+    "delete_failed": "Failed to delete exclusion list",
+    "deleting": "Deleting...",
+    "no_models": "No excluded models",
+    "model_count": "{{count}} models excluded",
+    "list_empty_all": "No exclusions yet—use “Add Exclusion” to create one.",
+    "list_empty_filtered": "No exclusions in this scope; click “Add Exclusion” to add.",
+    "disconnected": "Connect to the server to view exclusions",
+    "load_failed": "Failed to load exclusion list",
+    "provider_required": "Please enter a provider first",
+    "scope_all": "Scope: All providers",
+    "scope_provider": "Scope: {{provider}}",
+    "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 excluded models API. Please upgrade to the latest CLI Proxy API (CPA) version."
+  },
+  "auth_login": {
+    "codex_oauth_title": "Codex OAuth",
+    "codex_oauth_button": "Start Codex Login",
+    "codex_oauth_hint": "Login to Codex service through OAuth flow, automatically obtain and save authentication files.",
+    "codex_oauth_url_label": "Authorization URL:",
+    "codex_open_link": "Open Link",
+    "codex_copy_link": "Copy Link",
+    "codex_oauth_status_waiting": "Waiting for authentication...",
+    "codex_oauth_status_success": "Authentication successful!",
+    "codex_oauth_status_error": "Authentication failed:",
+    "codex_oauth_start_error": "Failed to start Codex OAuth:",
+    "codex_oauth_polling_error": "Failed to check authentication status:",
+    "anthropic_oauth_title": "Anthropic OAuth",
+    "anthropic_oauth_button": "Start Anthropic Login",
+    "anthropic_oauth_hint": "Login to Anthropic (Claude) service through OAuth flow, automatically obtain and save authentication files.",
+    "anthropic_oauth_url_label": "Authorization URL:",
+    "anthropic_open_link": "Open Link",
+    "anthropic_copy_link": "Copy Link",
+    "anthropic_oauth_status_waiting": "Waiting for authentication...",
+    "anthropic_oauth_status_success": "Authentication successful!",
+    "anthropic_oauth_status_error": "Authentication failed:",
+    "anthropic_oauth_start_error": "Failed to start Anthropic OAuth:",
+    "anthropic_oauth_polling_error": "Failed to check authentication status:",
+    "antigravity_oauth_title": "Antigravity OAuth",
+    "antigravity_oauth_button": "Start Antigravity Login",
+    "antigravity_oauth_hint": "Login to Antigravity service (Google account) through OAuth flow, automatically obtain and save authentication files.",
+    "antigravity_oauth_url_label": "Authorization URL:",
+    "antigravity_open_link": "Open Link",
+    "antigravity_copy_link": "Copy Link",
+    "antigravity_oauth_status_waiting": "Waiting for authentication...",
+    "antigravity_oauth_status_success": "Authentication successful!",
+    "antigravity_oauth_status_error": "Authentication failed:",
+    "antigravity_oauth_start_error": "Failed to start Antigravity OAuth:",
+    "antigravity_oauth_polling_error": "Failed to check authentication status:",
+    "gemini_cli_oauth_title": "Gemini CLI OAuth",
+    "gemini_cli_oauth_button": "Start Gemini CLI Login",
+    "gemini_cli_oauth_hint": "Login to Google Gemini CLI service through OAuth flow, automatically obtain and save authentication files.",
+    "gemini_cli_project_id_label": "Google Cloud Project ID (Optional):",
+    "gemini_cli_project_id_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",
+    "gemini_cli_copy_link": "Copy Link",
+    "gemini_cli_oauth_status_waiting": "Waiting for authentication...",
+    "gemini_cli_oauth_status_success": "Authentication successful!",
+    "gemini_cli_oauth_status_error": "Authentication failed:",
+    "gemini_cli_oauth_start_error": "Failed to start Gemini CLI OAuth:",
+    "gemini_cli_oauth_polling_error": "Failed to check authentication status:",
+    "qwen_oauth_title": "Qwen OAuth",
+    "qwen_oauth_button": "Start Qwen Login",
+    "qwen_oauth_hint": "Login to Qwen service through device authorization flow, automatically obtain and save authentication files.",
+    "qwen_oauth_url_label": "Authorization URL:",
+    "qwen_open_link": "Open Link",
+    "qwen_copy_link": "Copy Link",
+    "qwen_oauth_status_waiting": "Waiting for authentication...",
+    "qwen_oauth_status_success": "Authentication successful!",
+    "qwen_oauth_status_error": "Authentication failed:",
+    "qwen_oauth_start_error": "Failed to start Qwen OAuth:",
+    "qwen_oauth_polling_error": "Failed to check authentication status:",
+    "oauth_callback_label": "Callback URL",
+    "oauth_callback_placeholder": "http://localhost:1455/auth/callback?code=...&state=...",
+    "oauth_callback_hint": "Remote browser mode: after the provider redirects to http://localhost:..., copy the full URL and submit it here.",
+    "oauth_callback_button": "Submit Callback URL",
+    "oauth_callback_required": "Please paste the full redirect URL first.",
+    "oauth_callback_success": "Callback URL submitted. Continue waiting for authentication.",
+    "oauth_callback_error": "Failed to submit callback URL:",
+    "oauth_callback_upgrade_hint": "Please update CLI Proxy API or check the connection.",
+    "oauth_callback_status_success": "Callback URL submitted, waiting for authentication...",
+    "oauth_callback_status_error": "Callback URL submission failed:",
+    "missing_state": "Unable to retrieve authentication state parameter",
+    "iflow_oauth_title": "iFlow OAuth",
+    "iflow_oauth_button": "Start iFlow Login",
+    "iflow_oauth_hint": "Login to iFlow service through OAuth flow, automatically obtain and save authentication files.",
+    "iflow_oauth_url_label": "Authorization URL:",
+    "iflow_open_link": "Open Link",
+    "iflow_copy_link": "Copy Link",
+    "iflow_oauth_status_waiting": "Waiting for authentication...",
+    "iflow_oauth_status_success": "Authentication successful!",
+    "iflow_oauth_status_error": "Authentication failed:",
+    "iflow_oauth_start_error": "Failed to start iFlow OAuth:",
+    "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_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",
+    "iflow_cookie_status_success": "Cookie login succeeded and credentials are saved.",
+    "iflow_cookie_status_error": "Cookie login failed:",
+    "iflow_cookie_status_duplicate": "Duplicate config:",
+    "iflow_cookie_start_error": "Failed to submit cookie login:",
+    "iflow_cookie_config_duplicate": "A config file already exists (duplicate). Remove the existing file and try again if you want to re-save it.",
+    "iflow_cookie_required": "Please provide the Cookie value first.",
+    "iflow_cookie_result_title": "Cookie Login Result",
+    "iflow_cookie_result_email": "Account",
+    "iflow_cookie_result_expired": "Expires At",
+    "iflow_cookie_result_path": "Saved Path",
+    "iflow_cookie_result_type": "Type",
+    "remote_access_disabled": "This login method is not available for remote access. Please access from localhost."
+  },
+  "usage_stats": {
+    "title": "Usage Statistics",
+    "total_requests": "Total Requests",
+    "success_requests": "Success Requests",
+    "failed_requests": "Failed Requests",
+    "total_tokens": "Total Tokens",
+    "cached_tokens": "Cached Tokens",
+    "reasoning_tokens": "Reasoning Tokens",
+    "rpm_30m": "RPM",
+    "tpm_30m": "TPM",
+    "rate_30m": "Rate (last 30 min)",
+    "model_name": "Model Name",
+    "model_price_settings": "Model Pricing Settings",
+    "saved_prices": "Saved Prices",
+    "requests_trend": "Request Trends",
+    "tokens_trend": "Token Usage Trends",
+    "api_details": "API Details",
+    "by_hour": "By Hour",
+    "by_day": "By Day",
+    "refresh": "Refresh",
+    "export": "Export",
+    "import": "Import",
+    "export_success": "Usage export downloaded",
+    "import_success": "Import complete: added {{added}}, skipped {{skipped}}, total {{total}}, failed {{failed}}",
+    "import_invalid": "Invalid usage export file",
+    "chart_line_label_1": "Line 1",
+    "chart_line_label_2": "Line 2",
+    "chart_line_label_3": "Line 3",
+    "chart_line_label_4": "Line 4",
+    "chart_line_label_5": "Line 5",
+    "chart_line_label_6": "Line 6",
+    "chart_line_label_7": "Line 7",
+    "chart_line_label_8": "Line 8",
+    "chart_line_label_9": "Line 9",
+    "chart_line_hidden": "Hide",
+    "chart_line_actions_label": "Lines to display",
+    "chart_line_add": "Add line",
+    "chart_line_all": "All",
+    "chart_line_delete": "Delete line",
+    "chart_line_hint": "Show up to 9 model lines at once",
+    "no_data": "No Data Available",
+    "loading_error": "Loading Failed",
+    "api_endpoint": "API Endpoint",
+    "requests_count": "Request Count",
+    "tokens_count": "Token Count",
+    "models": "Model Statistics",
+    "success_rate": "Success Rate",
+    "total_cost": "Total Cost",
+    "total_cost_hint": "Based on configured model pricing",
+    "model_price_title": "Model Pricing",
+    "model_price_reset": "Clear Prices",
+    "model_price_model_label": "Model",
+    "model_price_select_placeholder": "Choose a model",
+    "model_price_select_hint": "Models come from usage details",
+    "model_price_prompt": "Prompt price",
+    "model_price_completion": "Completion price",
+    "model_price_cache": "Cache price",
+    "model_price_save": "Save Price",
+    "model_price_empty": "No model prices set",
+    "model_price_model": "Model",
+    "model_price_saved": "Model price saved",
+    "model_price_model_required": "Please choose a model to set pricing",
+    "cost_trend": "Cost Overview",
+    "cost_axis_label": "Cost ($)",
+    "cost_need_price": "Set a model price to view cost stats",
+    "cost_need_usage": "No usage data available to calculate cost",
+    "cost_no_data": "No cost data yet"
+  },
+  "stats": {
+    "success": "Success",
+    "failure": "Failure"
+  },
+  "logs": {
+    "title": "Logs Viewer",
+    "refresh_button": "Refresh Logs",
+    "clear_button": "Clear Logs",
+    "download_button": "Download Logs",
+    "error_log_button": "Select Error Log",
+    "error_logs_modal_title": "Error Request Logs",
+    "error_logs_description": "Pick an error request log file to download (only generated when request logging is off).",
+    "error_logs_request_log_enabled": "Request logging is enabled, so this list will always be empty. Disable request logging and refresh to view error logs.",
+    "error_logs_empty": "No error request log files found",
+    "error_logs_load_error": "Failed to load error log list",
+    "error_logs_size": "Size",
+    "error_logs_modified": "Last modified",
+    "error_logs_download": "Download",
+    "error_log_download_success": "Error log downloaded successfully",
+    "request_log_download_title": "Download Request Log",
+    "request_log_download_confirm": "Download request log for ID {{id}}?",
+    "request_log_download_success": "Request log downloaded successfully",
+    "empty_title": "No Logs Available",
+    "empty_desc": "When \"Enable logging to file\" is enabled, logs will be displayed here",
+    "log_content": "Log Content",
+    "loading": "Loading logs...",
+    "load_error": "Failed to load logs",
+    "clear_confirm": "Are you sure you want to clear all logs? This action cannot be undone!",
+    "clear_success": "Logs cleared successfully",
+    "download_success": "Logs downloaded successfully",
+    "auto_refresh": "Auto Refresh",
+    "auto_refresh_enabled": "Auto refresh enabled",
+    "auto_refresh_disabled": "Auto refresh disabled",
+    "load_more_hint": "Scroll up to load more",
+    "hidden_lines": "Hidden: {{count}} lines",
+    "loaded_lines": "Loaded: {{count}} lines",
+    "filtered_lines": "Filtered: {{count}} lines",
+    "hide_management_logs": "Hide {{prefix}} logs",
+    "search_placeholder": "Search logs by content or keyword",
+    "search_empty_title": "No matching logs found",
+    "search_empty_desc": "Try a different keyword or clear the filters.",
+    "double_click_copy_hint": "Double-click to copy raw log line",
+    "copy_success": "Log copied to clipboard",
+    "copy_failed": "Copy failed",
+    "lines": "lines",
+    "removed": "Filtered",
+    "upgrade_required_title": "Please Upgrade CLI Proxy API",
+    "upgrade_required_desc": "The current server version does not support the logs viewing feature. Please upgrade to the latest version of CLI Proxy API to use this feature."
+  },
+  "config_management": {
+    "title": "Config Management",
+    "editor_title": "Configuration File",
+    "reload": "Reload",
+    "save": "Save",
+    "description": "View and edit the server-side config.yaml file. Validate the syntax before saving.",
+    "status_idle": "Waiting for action",
+    "status_loading": "Loading configuration...",
+    "status_loaded": "Configuration loaded",
+    "status_dirty": "Unsaved changes",
+    "status_disconnected": "Connect to the server to load the configuration",
+    "status_load_failed": "Load failed",
+    "status_saving": "Saving configuration...",
+    "status_saved": "Configuration saved",
+    "status_save_failed": "Save failed",
+    "save_success": "Configuration saved successfully",
+    "error_yaml_not_supported": "Server did not return YAML. Verify the /config.yaml endpoint is available.",
+    "editor_placeholder": "key: value",
+    "search_placeholder": "Search config...",
+    "search_button": "Search",
+    "search_no_results": "No results",
+    "search_prev": "Previous",
+    "search_next": "Next"
+  },
+  "quota_management": {
+    "title": "Quota Management",
+    "description": "Monitor OAuth quota status for Antigravity, Codex, and Gemini CLI credentials.",
+    "refresh_files": "Refresh auth files"
+  },
+  "system_info": {
+    "title": "Management Center Info",
+    "connection_status_title": "Connection Status",
+    "api_status_label": "API Status:",
+    "config_status_label": "Config Status:",
+    "last_update_label": "Last Update:",
+    "cache_data": "Cache Data",
+    "real_time_data": "Real-time Data",
+    "not_loaded": "Not Loaded",
+    "seconds_ago": "seconds ago",
+    "models_title": "Available Models",
+    "models_desc": "Shows the /v1/models response and uses saved API keys for auth automatically.",
+    "models_loading": "Loading available models...",
+    "models_empty": "No models returned by /v1/models",
+    "models_error": "Failed to load model list",
+    "models_count": "{{count}} available models",
+    "version_check_title": "Update Check",
+    "version_check_desc": "Call the /latest-version endpoint to compare with the server version and see if an update is available.",
+    "version_current_label": "Current version",
+    "version_latest_label": "Latest version",
+    "version_check_button": "Check for updates",
+    "version_check_idle": "Click to check for updates",
+    "version_checking": "Checking for the latest version...",
+    "version_update_available": "An update is available: {{version}}",
+    "version_is_latest": "You are on the latest version",
+    "version_check_error": "Update check failed",
+    "version_current_missing": "Server version is unavailable; cannot compare",
+    "version_unknown": "Unknown",
+    "quick_links_title": "Quick Links",
+    "quick_links_desc": "Access project repositories and documentation for help and updates.",
+    "link_main_repo": "Main Repository",
+    "link_main_repo_desc": "CLI Proxy API core program source code",
+    "link_webui_repo": "WebUI Repository",
+    "link_webui_repo_desc": "Management Center frontend source code",
+    "link_docs": "Documentation",
+    "link_docs_desc": "Usage tutorials and configuration guides",
+    "clear_login_title": "Local Login Data",
+    "clear_login_desc": "Clear locally saved login data and sign out. Usage stats pricing settings will remain untouched.",
+    "clear_login_button": "Clear login data",
+    "clear_login_confirm": "Clear local login data and sign out now?"
+  },
+  "notification": {
+    "debug_updated": "Debug settings updated",
+    "proxy_updated": "Proxy settings updated",
+    "proxy_cleared": "Proxy settings cleared",
+    "retry_updated": "Retry settings updated",
+    "quota_switch_project_updated": "Project switch settings updated",
+    "quota_switch_preview_updated": "Preview model switch settings updated",
+    "usage_statistics_updated": "Usage statistics settings updated",
+    "logging_to_file_updated": "Logging settings updated",
+    "request_log_updated": "Request logging setting updated",
+    "ws_auth_updated": "WebSocket authentication setting 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",
+    "gemini_key_added": "Gemini key added successfully",
+    "gemini_key_updated": "Gemini key updated successfully",
+    "gemini_key_deleted": "Gemini key deleted successfully",
+    "gemini_multi_input_required": "Please enter at least one Gemini key",
+    "gemini_multi_failed": "Gemini bulk add failed",
+    "gemini_multi_summary": "Gemini bulk add finished: {{success}} added, {{skipped}} skipped, {{failed}} failed",
+    "codex_config_added": "Codex configuration added successfully",
+    "codex_config_updated": "Codex configuration updated successfully",
+    "codex_config_deleted": "Codex configuration deleted successfully",
+    "codex_base_url_required": "Please enter the Codex Base URL",
+    "claude_config_added": "Claude configuration added successfully",
+    "claude_config_updated": "Claude configuration updated successfully",
+    "claude_config_deleted": "Claude configuration deleted successfully",
+    "config_enabled": "Configuration enabled",
+    "config_disabled": "Configuration disabled",
+    "field_required": "Required fields cannot be empty",
+    "openai_provider_required": "Please fill in provider name and Base URL",
+    "openai_provider_added": "OpenAI provider added successfully",
+    "openai_provider_updated": "OpenAI provider updated successfully",
+    "openai_provider_deleted": "OpenAI provider deleted successfully",
+    "ampcode_updated": "Ampcode configuration updated",
+    "ampcode_upstream_api_key_cleared": "Ampcode upstream API key override cleared",
+    "openai_model_name_required": "Model name is required",
+    "openai_test_url_required": "Please provide a valid Base URL before testing",
+    "openai_test_key_required": "Please add at least one API key before testing",
+    "openai_test_model_required": "Please select a model to test",
+    "data_refreshed": "Data refreshed successfully",
+    "connection_required": "Please establish connection first",
+    "refresh_failed": "Refresh failed",
+    "update_failed": "Update failed",
+    "add_failed": "Add failed",
+    "delete_failed": "Delete failed",
+    "upload_failed": "Upload failed",
+    "download_failed": "Download failed",
+    "login_failed": "Login failed",
+    "please_enter": "Please enter",
+    "please_fill": "Please fill",
+    "provider_name_url": "provider name and Base URL",
+    "api_key": "API key",
+    "gemini_api_key": "Gemini API key",
+    "codex_api_key": "Codex API key",
+    "claude_api_key": "Claude API key",
+    "link_copied": "Link copied to clipboard"
+  },
+  "language": {
+    "switch": "Language",
+    "chinese": "中文",
+    "english": "English"
+  },
+  "theme": {
+    "switch": "Theme",
+    "light": "Light",
+    "dark": "Dark",
+    "switch_to_light": "Switch to light mode",
+    "switch_to_dark": "Switch to dark mode",
+    "auto": "Follow system"
+  },
+  "sidebar": {
+    "toggle_expand": "Expand sidebar",
+    "toggle_collapse": "Collapse sidebar"
+  },
+  "footer": {
+    "api_version": "CLI Proxy API Version",
+    "build_date": "Build Time",
+    "version": "Management UI Version",
+    "author": "Author"
+  }
+}

src/i18n/locales/zh-CN.json

@@ -0,0 +1,837 @@
+{
+  "common": {
+    "login": "登录",
+    "logout": "登出",
+    "cancel": "取消",
+    "confirm": "确认",
+    "save": "保存",
+    "delete": "删除",
+    "edit": "编辑",
+    "add": "添加",
+    "update": "更新",
+    "refresh": "刷新",
+    "close": "关闭",
+    "success": "成功",
+    "error": "错误",
+    "info": "信息",
+    "warning": "警告",
+    "loading": "加载中...",
+    "connecting": "连接中...",
+    "connected": "已连接",
+    "disconnected": "未连接",
+    "connecting_status": "连接中",
+    "connected_status": "已连接",
+    "disconnected_status": "未连接",
+    "yes": "是",
+    "no": "否",
+    "not_set": "未设置",
+    "optional": "可选",
+    "required": "必填",
+    "api_key": "密钥",
+    "base_url": "地址",
+    "prefix": "前缀",
+    "proxy_url": "代理",
+    "alias": "别名",
+    "failure": "失败",
+    "unknown_error": "未知错误",
+    "quota_update_required": "请更新 CPA 版本或检查更新",
+    "quota_check_credential": "请检查凭证状态",
+    "copy": "复制",
+    "custom_headers_label": "自定义请求头",
+    "custom_headers_hint": "可选，设置需要附带到请求中的 HTTP 头，名称和值均不能为空。",
+    "custom_headers_add": "添加请求头",
+    "custom_headers_key_placeholder": "Header 名称，例如 X-Custom-Header",
+    "custom_headers_value_placeholder": "Header 值",
+    "model_name_placeholder": "模型名称，例如 claude-3-5-sonnet-20241022",
+    "model_alias_placeholder": "模型别名 (可选)"
+  },
+  "title": {
+    "main": "CLI Proxy API Management Center",
+    "login": "CLI Proxy API Management Center",
+    "abbr": "CPAMC"
+  },
+  "auto_login": {
+    "title": "正在自动登录...",
+    "message": "正在使用本地保存的连接信息尝试连接服务器"
+  },
+  "login": {
+    "subtitle": "请输入连接信息以访问管理界面",
+    "connection_title": "连接地址",
+    "connection_current": "当前地址",
+    "connection_auto_hint": "系统将自动使用当前访问地址进行连接",
+    "custom_connection_label": "自定义连接地址:",
+    "custom_connection_placeholder": "例如: https://example.com:8317",
+    "custom_connection_hint": "默认使用当前访问地址，若需要可手动输入其他地址。",
+    "use_current_address": "使用当前地址",
+    "remember_password_label": "记住密码",
+    "management_key_label": "管理密钥:",
+    "management_key_placeholder": "请输入管理密钥",
+    "connect_button": "连接",
+    "submit_button": "登录",
+    "submitting": "连接中...",
+    "error_title": "登录失败",
+    "error_required": "请填写完整的连接信息",
+    "error_invalid": "连接失败，请检查地址和密钥"
+  },
+  "header": {
+    "check_connection": "检查连接",
+    "refresh_all": "刷新全部",
+    "logout": "登出"
+  },
+  "connection": {
+    "title": "连接信息",
+    "server_address": "服务器地址:",
+    "management_key": "管理密钥:",
+    "status": "连接状态:"
+  },
+  "nav": {
+    "dashboard": "仪表盘",
+    "basic_settings": "基础设置",
+    "api_keys": "API 密钥",
+    "ai_providers": "AI 提供商",
+    "auth_files": "认证文件",
+    "oauth": "OAuth 登录",
+    "quota_management": "配额管理",
+    "usage_stats": "使用统计",
+    "config_management": "配置管理",
+    "logs": "日志查看",
+    "system_info": "中心信息"
+  },
+  "dashboard": {
+    "title": "仪表盘",
+    "subtitle": "欢迎使用 CLI Proxy API 管理中心",
+    "openai_providers": "OpenAI 提供商",
+    "quick_actions": "快捷操作",
+    "current_config": "当前配置",
+    "management_keys": "管理密钥",
+    "provider_keys_detail": "G:{{gemini}} C:{{codex}} Cl:{{claude}} O:{{openai}}",
+    "oauth_credentials": "OAuth 凭证",
+    "usage_overview": "使用概览",
+    "total_requests": "总请求数",
+    "total_tokens": "总 Token 数",
+    "rpm_30min": "RPM (30分钟)",
+    "tpm_30min": "TPM (30分钟)",
+    "models_used": "使用模型数",
+    "no_usage_data": "暂无使用数据",
+    "view_detailed_usage": "查看详细统计",
+    "edit_settings": "编辑设置",
+    "available_models": "可用模型",
+    "available_models_desc": "所有提供商的模型总数"
+  },
+  "basic_settings": {
+    "title": "基础设置",
+    "debug_title": "调试模式",
+    "debug_enable": "启用调试模式",
+    "proxy_title": "代理设置",
+    "proxy_url_label": "代理 URL:",
+    "proxy_url_placeholder": "例如: socks5://user:pass@127.0.0.1:1080/",
+    "proxy_update": "更新",
+    "proxy_clear": "清空",
+    "retry_title": "请求重试",
+    "retry_count_label": "重试次数:",
+    "retry_update": "更新",
+    "quota_title": "配额超出行为",
+    "quota_switch_project": "自动切换项目",
+    "quota_switch_preview": "切换到预览模型",
+    "usage_statistics_title": "使用统计",
+    "usage_statistics_enable": "启用使用统计",
+    "logging_title": "日志记录",
+    "logging_to_file_enable": "启用日志记录到文件",
+    "request_log_title": "请求日志",
+    "request_log_enable": "启用请求日志",
+    "request_log_warning": "仅在需要排查问题时开启，日常请保持关闭。",
+    "ws_auth_title": "WebSocket 鉴权",
+    "ws_auth_enable": "启用 /ws/* 鉴权"
+  },
+  "api_keys": {
+    "title": "API 密钥管理",
+    "proxy_auth_title": "代理服务认证密钥",
+    "add_button": "添加密钥",
+    "empty_title": "暂无API密钥",
+    "empty_desc": "点击上方按钮添加第一个密钥",
+    "item_title": "API密钥",
+    "add_modal_title": "添加API密钥",
+    "add_modal_key_label": "API密钥:",
+    "add_modal_key_placeholder": "请输入API密钥",
+    "edit_modal_title": "编辑API密钥",
+    "edit_modal_key_label": "API密钥:",
+    "delete_confirm": "确定要删除这个API密钥吗？"
+  },
+  "ai_providers": {
+    "title": "AI 提供商配置",
+    "gemini_title": "Gemini API 密钥",
+    "gemini_add_button": "添加密钥",
+    "gemini_empty_title": "暂无Gemini密钥",
+    "gemini_empty_desc": "点击上方按钮添加第一个密钥",
+    "gemini_item_title": "Gemini密钥",
+    "gemini_add_modal_title": "添加Gemini API密钥",
+    "gemini_add_modal_key_label": "API密钥",
+    "gemini_add_modal_key_placeholder": "输入 Gemini API 密钥",
+    "gemini_add_modal_key_hint": "逐条输入密钥，可同时指定可选 Base URL。",
+    "gemini_keys_add_btn": "添加密钥",
+    "gemini_base_url_label": "Base URL (可选)",
+    "gemini_base_url_placeholder": "例如: https://generativelanguage.googleapis.com",
+    "gemini_edit_modal_title": "编辑Gemini API密钥",
+    "gemini_edit_modal_key_label": "API密钥:",
+    "gemini_delete_confirm": "确定要删除这个Gemini密钥吗？",
+    "excluded_models_label": "排除的模型 (可选):",
+    "excluded_models_placeholder": "用逗号或换行分隔，例如: gemini-1.5-pro, gemini-1.5-flash",
+    "excluded_models_hint": "留空表示不过滤；保存时会自动去重并忽略空白。",
+    "excluded_models_count": "排除 {{count}} 个模型",
+    "prefix_label": "前缀 (可选):",
+    "prefix_placeholder": "例如: team-a",
+    "prefix_hint": "设置后可用 prefix/<model> 选择该条目。",
+    "config_toggle_label": "启用",
+    "config_disabled_badge": "已停用",
+    "codex_title": "Codex API 配置",
+    "codex_add_button": "添加配置",
+    "codex_empty_title": "暂无Codex配置",
+    "codex_empty_desc": "点击上方按钮添加第一个配置",
+    "codex_item_title": "Codex配置",
+    "codex_add_modal_title": "添加Codex API配置",
+    "codex_add_modal_key_label": "API密钥:",
+    "codex_add_modal_key_placeholder": "请输入Codex API密钥",
+    "codex_add_modal_url_label": "Base URL (必填):",
+    "codex_add_modal_url_placeholder": "例如: https://api.example.com",
+    "codex_add_modal_proxy_label": "代理 URL (可选):",
+    "codex_add_modal_proxy_placeholder": "例如: socks5://proxy.example.com:1080",
+    "codex_edit_modal_title": "编辑Codex API配置",
+    "codex_edit_modal_key_label": "API密钥:",
+    "codex_edit_modal_url_label": "Base URL (必填):",
+    "codex_edit_modal_proxy_label": "代理 URL (可选):",
+    "codex_delete_confirm": "确定要删除这个Codex配置吗？",
+    "claude_title": "Claude API 配置",
+    "claude_add_button": "添加配置",
+    "claude_empty_title": "暂无Claude配置",
+    "claude_empty_desc": "点击上方按钮添加第一个配置",
+    "claude_item_title": "Claude配置",
+    "claude_add_modal_title": "添加Claude API配置",
+    "claude_add_modal_key_label": "API密钥:",
+    "claude_add_modal_key_placeholder": "请输入Claude API密钥",
+    "claude_add_modal_url_label": "Base URL (可选):",
+    "claude_add_modal_url_placeholder": "例如: https://api.anthropic.com",
+    "claude_add_modal_proxy_label": "代理 URL (可选):",
+    "claude_add_modal_proxy_placeholder": "例如: socks5://proxy.example.com:1080",
+    "claude_edit_modal_title": "编辑Claude API配置",
+    "claude_edit_modal_key_label": "API密钥:",
+    "claude_edit_modal_url_label": "Base URL (可选):",
+    "claude_edit_modal_proxy_label": "代理 URL (可选):",
+    "claude_delete_confirm": "确定要删除这个Claude配置吗？",
+    "claude_models_label": "自定义模型 (可选):",
+    "claude_models_hint": "为空表示使用全部模型；可填写 name[, alias] 以限制或重命名模型。",
+    "claude_models_add_btn": "添加模型",
+    "claude_models_count": "模型数量",
+    "ampcode_title": "Amp CLI 集成 (ampcode)",
+    "ampcode_modal_title": "配置 Ampcode",
+    "ampcode_upstream_url_label": "Upstream URL",
+    "ampcode_upstream_url_placeholder": "例如: https://ampcode.com",
+    "ampcode_upstream_url_hint": "可选；留空表示使用默认/自动发现的控制平面地址。",
+    "ampcode_upstream_api_key_label": "Upstream API Key (Amp官方)",
+    "ampcode_upstream_api_key_placeholder": "输入 sk-amp...（留空不修改）",
+    "ampcode_upstream_api_key_hint": "可选；留空不会修改当前Amp官方密钥，需清除请点击下方按钮。",
+    "ampcode_upstream_api_key_current": "当前Amp官方密钥: {{key}}",
+    "ampcode_clear_upstream_api_key": "清除官方密钥",
+    "ampcode_clear_upstream_api_key_confirm": "确定要清除 Ampcode 的 upstream API key（Amp官方）吗？",
+    "ampcode_force_model_mappings_label": "强制应用模型映射",
+    "ampcode_force_model_mappings_hint": "开启后，模型映射将覆盖本地 API Key 可用性判断。",
+    "ampcode_model_mappings_label": "模型映射 (from → to)",
+    "ampcode_model_mappings_hint": "用于重写 Amp 请求中的模型名称；留空表示不做映射。",
+    "ampcode_model_mappings_add_btn": "添加映射",
+    "ampcode_model_mappings_from_placeholder": "from 模型（原始）",
+    "ampcode_model_mappings_to_placeholder": "to 模型（目标）",
+    "ampcode_model_mappings_count": "映射数量",
+    "ampcode_mappings_overwrite_confirm": "当前未成功加载服务器已有映射，继续保存可能覆盖或清空已有映射，是否继续？",
+    "openai_title": "OpenAI 兼容提供商",
+    "openai_add_button": "添加提供商",
+    "openai_empty_title": "暂无OpenAI兼容提供商",
+    "openai_empty_desc": "点击上方按钮添加第一个提供商",
+    "openai_add_modal_title": "添加OpenAI兼容提供商",
+    "openai_add_modal_name_label": "提供商名称:",
+    "openai_add_modal_name_placeholder": "例如: openrouter",
+    "openai_add_modal_url_label": "Base URL:",
+    "openai_add_modal_url_placeholder": "例如: https://openrouter.ai/api/v1",
+    "openai_add_modal_keys_label": "API密钥",
+    "openai_edit_modal_keys_label": "API密钥",
+    "openai_keys_hint": "每个密钥可搭配一个可选代理地址，更便于管理。",
+    "openai_keys_add_btn": "添加密钥",
+    "openai_key_placeholder": "输入 sk- 开头的密钥",
+    "openai_proxy_placeholder": "可选代理 URL (如 socks5://...)",
+    "openai_add_modal_models_label": "模型列表 (name[, alias] 每行一个):",
+    "openai_models_hint": "示例：gpt-4o-mini 或 moonshotai/kimi-k2:free, kimi-k2",
+    "openai_model_name_placeholder": "模型名称，如 moonshotai/kimi-k2:free",
+    "openai_model_alias_placeholder": "模型别名 (可选)",
+    "openai_models_add_btn": "添加模型",
+    "openai_models_fetch_button": "从 /v1/models 获取",
+    "openai_models_fetch_title": "从 /v1/models 选择模型",
+    "openai_models_fetch_hint": "使用上方 Base URL 调用 /v1/models 端点，附带首个 API Key（Bearer）与自定义请求头。",
+    "openai_models_fetch_url_label": "请求地址",
+    "openai_models_fetch_refresh": "重新获取",
+    "openai_models_fetch_loading": "正在从 /v1/models 获取模型列表...",
+    "openai_models_fetch_empty": "未获取到模型，请检查端点或鉴权信息。",
+    "openai_models_fetch_error": "获取模型失败",
+    "openai_models_fetch_back": "返回编辑",
+    "openai_models_fetch_apply": "添加所选模型",
+    "openai_models_search_label": "搜索模型",
+    "openai_models_search_placeholder": "按名称、别名或描述筛选",
+    "openai_models_search_empty": "没有匹配的模型，请更换关键字试试。",
+    "openai_models_fetch_invalid_url": "请先填写有效的 Base URL",
+    "openai_models_fetch_added": "已添加 {{count}} 个新模型",
+    "openai_edit_modal_title": "编辑OpenAI兼容提供商",
+    "openai_edit_modal_name_label": "提供商名称:",
+    "openai_edit_modal_url_label": "Base URL:",
+    "openai_edit_modal_models_label": "模型列表 (name[, alias] 每行一个):",
+    "openai_delete_confirm": "确定要删除这个OpenAI提供商吗？",
+    "openai_keys_count": "密钥数量",
+    "openai_models_count": "模型数量",
+    "openai_test_title": "连通性测试",
+    "openai_test_hint": "使用当前配置向 /v1/chat/completions 请求，验证是否可用。",
+    "openai_test_model_placeholder": "选择或输入要测试的模型",
+    "openai_test_action": "发送测试",
+    "openai_test_running": "正在发送测试请求...",
+    "openai_test_timeout": "测试请求超时（{{seconds}}秒）。",
+    "openai_test_success": "测试成功，模型可用。",
+    "openai_test_failed": "测试失败",
+    "openai_test_select_placeholder": "从当前模型列表选择",
+    "openai_test_select_empty": "当前未配置模型，请先添加模型"
+  },
+  "auth_files": {
+    "title": "认证文件管理",
+    "title_section": "认证文件",
+    "description": "这里集中管理 CLI Proxy 支持的所有 JSON 认证文件（如 Qwen、Gemini、Vertex 等），上传后即可在运行时启用相应的 AI 服务。",
+    "upload_button": "上传文件",
+    "delete_all_button": "删除全部",
+    "empty_title": "暂无认证文件",
+    "empty_desc": "点击上方按钮上传第一个文件",
+    "search_empty_title": "没有匹配的配置文件",
+    "search_empty_desc": "请调整筛选条件或清空搜索关键字再试一次。",
+    "file_size": "大小",
+    "file_modified": "修改时间",
+    "download_button": "下载",
+    "delete_button": "删除",
+    "delete_confirm": "确定要删除文件",
+    "delete_all_confirm": "确定要删除所有认证文件吗？此操作不可恢复！",
+    "delete_filtered_confirm": "确定要删除筛选出的 {{type}} 认证文件吗？此操作不可恢复！",
+    "upload_error_json": "只能上传JSON文件",
+    "upload_success": "文件上传成功",
+    "download_success": "文件下载成功",
+    "delete_success": "文件删除成功",
+    "delete_all_success": "成功删除",
+    "delete_filtered_success": "成功删除 {{count}} 个 {{type}} 认证文件",
+    "delete_filtered_partial": "{{type}} 认证文件删除完成，成功 {{success}} 个，失败 {{failed}} 个",
+    "delete_filtered_none": "当前筛选类型 ({{type}}) 下没有可删除的认证文件",
+    "files_count": "个文件",
+    "pagination_prev": "上一页",
+    "pagination_next": "下一页",
+    "pagination_info": "第 {{current}} / {{total}} 页 · 共 {{count}} 个文件",
+    "search_label": "搜索配置文件",
+    "search_placeholder": "输入名称、类型或提供方关键字",
+    "page_size_label": "单页数量",
+    "page_size_unit": "个/页",
+    "filter_all": "全部",
+    "filter_qwen": "Qwen",
+    "filter_gemini": "Gemini",
+    "filter_gemini-cli": "GeminiCLI",
+    "filter_aistudio": "AIStudio",
+    "filter_claude": "Claude",
+    "filter_codex": "Codex",
+    "filter_antigravity": "Antigravity",
+    "filter_iflow": "iFlow",
+    "filter_vertex": "Vertex",
+    "filter_empty": "空文件",
+    "filter_unknown": "其他",
+    "type_qwen": "Qwen",
+    "type_gemini": "Gemini",
+    "type_gemini-cli": "GeminiCLI",
+    "type_aistudio": "AIStudio",
+    "type_claude": "Claude",
+    "type_codex": "Codex",
+    "type_antigravity": "Antigravity",
+    "type_iflow": "iFlow",
+    "type_vertex": "Vertex",
+    "type_empty": "空文件",
+    "type_unknown": "其他",
+    "type_virtual": "虚拟认证文件",
+    "models_button": "模型",
+    "models_title": "支持的模型",
+    "models_loading": "正在加载模型列表...",
+    "models_empty": "该凭证暂无可用模型",
+    "models_empty_desc": "该认证凭证可能尚未被服务器加载或没有绑定任何模型",
+    "models_unsupported": "当前版本不支持此功能",
+    "models_unsupported_desc": "请更新 CLI Proxy API 到最新版本后重试",
+    "models_excluded_badge": "已排除",
+    "models_excluded_hint": "此模型已被 OAuth 排除"
+  },
+  "antigravity_quota": {
+    "title": "Antigravity 额度",
+    "empty_title": "暂无 Antigravity 认证",
+    "empty_desc": "上传 Antigravity 认证文件后即可查看额度。",
+    "idle": "尚未加载额度，请点击刷新按钮。",
+    "loading": "正在加载额度...",
+    "load_failed": "额度获取失败：{{message}}",
+    "missing_auth_index": "认证文件缺少 auth_index",
+    "empty_models": "暂无额度数据",
+    "refresh_button": "刷新额度",
+    "fetch_all": "获取全部"
+  },
+  "codex_quota": {
+    "title": "Codex 额度",
+    "empty_title": "暂无 Codex 认证",
+    "empty_desc": "上传 Codex 认证文件后即可查看额度。",
+    "idle": "尚未加载额度，请点击刷新按钮。",
+    "loading": "正在加载额度...",
+    "load_failed": "额度获取失败：{{message}}",
+    "missing_auth_index": "认证文件缺少 auth_index",
+    "missing_account_id": "Codex 凭证缺少 ChatGPT 账号 ID",
+    "empty_windows": "暂无额度数据",
+    "no_access": "该凭证已无 Codex 访问权限（free）。",
+    "refresh_button": "刷新额度",
+    "fetch_all": "获取全部",
+    "primary_window": "5 小时限额",
+    "secondary_window": "周限额",
+    "code_review_window": "代码审查限额",
+    "plan_label": "套餐",
+    "plan_plus": "Plus",
+    "plan_team": "Team",
+    "plan_free": "Free"
+  },
+  "gemini_cli_quota": {
+    "title": "Gemini CLI 额度",
+    "empty_title": "暂无 Gemini CLI 认证",
+    "empty_desc": "上传 Gemini CLI 认证文件后即可查看额度。",
+    "idle": "尚未加载额度，请点击刷新按钮。",
+    "loading": "正在加载额度...",
+    "load_failed": "额度获取失败：{{message}}",
+    "missing_auth_index": "认证文件缺少 auth_index",
+    "missing_project_id": "Gemini CLI 凭证缺少 Project ID",
+    "empty_buckets": "暂无额度数据",
+    "refresh_button": "刷新额度",
+    "fetch_all": "获取全部",
+    "remaining_amount": "剩余 {{count}}"
+  },
+  "vertex_import": {
+    "title": "Vertex JSON 登录",
+    "description": "上传 Google 服务账号 JSON，使用 CLI vertex-import 同步规则写入 auth-dir/vertex-<project>.json。",
+    "location_label": "目标区域 (可选)",
+    "location_placeholder": "us-central1",
+    "location_hint": "留空表示使用默认区域 us-central1。",
+    "file_label": "服务账号密钥 JSON",
+    "file_hint": "仅支持 Google Cloud service account key JSON 文件，私钥会自动规范化。",
+    "file_placeholder": "尚未选择文件",
+    "choose_file": "选择文件",
+    "import_button": "导入 Vertex 凭证",
+    "file_required": "请先选择 .json 凭证文件",
+    "success": "Vertex 凭证导入成功",
+    "result_title": "凭证已保存",
+    "result_project": "项目 ID",
+    "result_email": "服务账号",
+    "result_location": "区域",
+    "result_file": "存储文件"
+  },
+  "oauth_excluded": {
+    "title": "OAuth 排除列表",
+    "description": "按提供商分列展示，点击卡片编辑或删除；支持 * 通配符，范围跟随上方的配置文件过滤标签。",
+    "add": "新增排除",
+    "add_title": "新增提供商排除列表",
+    "edit_title": "编辑 {{provider}} 的排除列表",
+    "refresh": "刷新",
+    "refreshing": "刷新中...",
+    "provider_label": "提供商",
+    "provider_auto": "跟随当前过滤",
+    "provider_placeholder": "例如 gemini-cli / openai",
+    "provider_hint": "默认选中当前筛选的提供商，也可直接输入或选择其他名称。",
+    "models_label": "排除的模型",
+    "models_placeholder": "gpt-4.1-mini\n*-preview",
+    "models_hint": "逗号或换行分隔；留空保存将删除该提供商记录；支持 * 通配符。",
+    "save": "保存/更新",
+    "saving": "正在保存...",
+    "save_success": "排除列表已更新",
+    "save_failed": "更新排除列表失败",
+    "delete": "删除提供商",
+    "delete_confirm": "确定要删除 {{provider}} 的排除列表吗？",
+    "delete_success": "已删除该提供商的排除列表",
+    "delete_failed": "删除排除列表失败",
+    "deleting": "正在删除...",
+    "no_models": "未配置排除模型",
+    "model_count": "排除 {{count}} 个模型",
+    "list_empty_all": "暂无任何提供商的排除列表，点击“新增排除”创建。",
+    "list_empty_filtered": "当前筛选下没有排除项，点击“新增排除”添加。",
+    "disconnected": "请先连接服务器以查看排除列表",
+    "load_failed": "加载排除列表失败",
+    "provider_required": "请先填写提供商名称",
+    "scope_all": "当前范围：全局（显示所有提供商）",
+    "scope_provider": "当前范围：{{provider}}",
+    "upgrade_required": "当前 CPA 版本不支持模型排除列表，请升级 CPA 版本",
+    "upgrade_required_title": "需要升级 CPA 版本",
+    "upgrade_required_desc": "当前服务器版本不支持获取模型排除列表功能，请升级到最新版本的 CPA（CLI Proxy API）后重试。"
+  },
+  "auth_login": {
+    "codex_oauth_title": "Codex OAuth",
+    "codex_oauth_button": "开始 Codex 登录",
+    "codex_oauth_hint": "通过 OAuth 流程登录 Codex 服务，自动获取并保存认证文件。",
+    "codex_oauth_url_label": "授权链接:",
+    "codex_open_link": "打开链接",
+    "codex_copy_link": "复制链接",
+    "codex_oauth_status_waiting": "等待认证中...",
+    "codex_oauth_status_success": "认证成功！",
+    "codex_oauth_status_error": "认证失败:",
+    "codex_oauth_start_error": "启动 Codex OAuth 失败:",
+    "codex_oauth_polling_error": "检查认证状态失败:",
+    "anthropic_oauth_title": "Anthropic OAuth",
+    "anthropic_oauth_button": "开始 Anthropic 登录",
+    "anthropic_oauth_hint": "通过 OAuth 流程登录 Anthropic (Claude) 服务，自动获取并保存认证文件。",
+    "anthropic_oauth_url_label": "授权链接:",
+    "anthropic_open_link": "打开链接",
+    "anthropic_copy_link": "复制链接",
+    "anthropic_oauth_status_waiting": "等待认证中...",
+    "anthropic_oauth_status_success": "认证成功！",
+    "anthropic_oauth_status_error": "认证失败:",
+    "anthropic_oauth_start_error": "启动 Anthropic OAuth 失败:",
+    "anthropic_oauth_polling_error": "检查认证状态失败:",
+    "antigravity_oauth_title": "Antigravity OAuth",
+    "antigravity_oauth_button": "开始 Antigravity 登录",
+    "antigravity_oauth_hint": "通过 OAuth 流程登录 Antigravity（Google 账号）服务，自动获取并保存认证文件。",
+    "antigravity_oauth_url_label": "授权链接:",
+    "antigravity_open_link": "打开链接",
+    "antigravity_copy_link": "复制链接",
+    "antigravity_oauth_status_waiting": "等待认证中...",
+    "antigravity_oauth_status_success": "认证成功！",
+    "antigravity_oauth_status_error": "认证失败:",
+    "antigravity_oauth_start_error": "启动 Antigravity OAuth 失败:",
+    "antigravity_oauth_polling_error": "检查认证状态失败:",
+    "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": "留空将自动选择第一个可用项目",
+    "gemini_cli_project_id_hint": "可选填写项目 ID。如不填写，系统将自动选择您账号下的第一个可用项目。",
+    "gemini_cli_project_id_required": "请填写 Google Cloud 项目 ID。",
+    "gemini_cli_oauth_url_label": "授权链接:",
+    "gemini_cli_open_link": "打开链接",
+    "gemini_cli_copy_link": "复制链接",
+    "gemini_cli_oauth_status_waiting": "等待认证中...",
+    "gemini_cli_oauth_status_success": "认证成功！",
+    "gemini_cli_oauth_status_error": "认证失败:",
+    "gemini_cli_oauth_start_error": "启动 Gemini CLI OAuth 失败:",
+    "gemini_cli_oauth_polling_error": "检查认证状态失败:",
+    "qwen_oauth_title": "Qwen OAuth",
+    "qwen_oauth_button": "开始 Qwen 登录",
+    "qwen_oauth_hint": "通过设备授权流程登录 Qwen 服务，自动获取并保存认证文件。",
+    "qwen_oauth_url_label": "授权链接:",
+    "qwen_open_link": "打开链接",
+    "qwen_copy_link": "复制链接",
+    "qwen_oauth_status_waiting": "等待认证中...",
+    "qwen_oauth_status_success": "认证成功！",
+    "qwen_oauth_status_error": "认证失败:",
+    "qwen_oauth_start_error": "启动 Qwen OAuth 失败:",
+    "qwen_oauth_polling_error": "检查认证状态失败:",
+    "oauth_callback_label": "回调 URL",
+    "oauth_callback_placeholder": "http://localhost:1455/auth/callback?code=...&state=...",
+    "oauth_callback_hint": "远程浏览器模式：当授权跳转到 http://localhost:... 后，复制完整 URL 并提交到这里。",
+    "oauth_callback_button": "提交回调 URL",
+    "oauth_callback_required": "请先粘贴完整的回调 URL。",
+    "oauth_callback_success": "回调 URL 已提交，请继续等待认证。",
+    "oauth_callback_error": "提交回调 URL 失败:",
+    "oauth_callback_upgrade_hint": "请更新CLI Proxy API或检查连接",
+    "oauth_callback_status_success": "回调 URL 已提交，等待认证中...",
+    "oauth_callback_status_error": "回调 URL 提交失败:",
+    "missing_state": "无法获取认证状态参数",
+    "iflow_oauth_title": "iFlow OAuth",
+    "iflow_oauth_button": "开始 iFlow 登录",
+    "iflow_oauth_hint": "通过 OAuth 流程登录 iFlow 服务，自动获取并保存认证文件。",
+    "iflow_oauth_url_label": "授权链接:",
+    "iflow_open_link": "打开链接",
+    "iflow_copy_link": "复制链接",
+    "iflow_oauth_status_waiting": "等待认证中...",
+    "iflow_oauth_status_success": "认证成功！",
+    "iflow_oauth_status_error": "认证失败:",
+    "iflow_oauth_start_error": "启动 iFlow OAuth 失败:",
+    "iflow_oauth_polling_error": "检查认证状态失败:",
+    "iflow_cookie_title": "iFlow Cookie 登录",
+    "iflow_cookie_label": "Cookie 内容:",
+    "iflow_cookie_placeholder": "粘贴浏览器中的 Cookie，例如 sessionid=...;",
+    "iflow_cookie_hint": "直接提交 Cookie 以完成登录（无需打开授权链接），服务端将自动保存凭据。",
+    "iflow_cookie_key_hint": "提示：需在平台上先创建 Key。",
+    "iflow_cookie_button": "提交 Cookie 登录",
+    "iflow_cookie_status_success": "Cookie 登录成功，凭据已保存。",
+    "iflow_cookie_status_error": "Cookie 登录失败:",
+    "iflow_cookie_status_duplicate": "配置文件重复:",
+    "iflow_cookie_start_error": "提交 Cookie 登录失败:",
+    "iflow_cookie_config_duplicate": "检测到配置文件已存在（重复），如需重新保存请先删除原文件后重试。",
+    "iflow_cookie_required": "请先填写 Cookie 内容",
+    "iflow_cookie_result_title": "Cookie 登录结果",
+    "iflow_cookie_result_email": "账号",
+    "iflow_cookie_result_expired": "过期时间",
+    "iflow_cookie_result_path": "保存路径",
+    "iflow_cookie_result_type": "类型",
+    "remote_access_disabled": "远程访问不支持此登录方式，请从本地 (localhost) 访问"
+  },
+  "usage_stats": {
+    "title": "使用统计",
+    "total_requests": "总请求数",
+    "success_requests": "成功请求",
+    "failed_requests": "失败请求",
+    "total_tokens": "总Token数",
+    "cached_tokens": "缓存 Tokens",
+    "reasoning_tokens": "思考 Tokens",
+    "rpm_30m": "RPM",
+    "tpm_30m": "TPM",
+    "rate_30m": "近30分钟速率",
+    "model_name": "模型名称",
+    "model_price_settings": "模型价格设置",
+    "saved_prices": "已保存的价格",
+    "requests_trend": "请求趋势",
+    "tokens_trend": "Token 使用趋势",
+    "api_details": "API 详细统计",
+    "by_hour": "按小时",
+    "by_day": "按天",
+    "refresh": "刷新",
+    "export": "导出数据",
+    "import": "导入数据",
+    "export_success": "使用统计已导出",
+    "import_success": "导入完成：新增 {{added}}，跳过 {{skipped}}，总请求 {{total}}，失败 {{failed}}",
+    "import_invalid": "导入文件格式不正确",
+    "chart_line_label_1": "曲线 1",
+    "chart_line_label_2": "曲线 2",
+    "chart_line_label_3": "曲线 3",
+    "chart_line_label_4": "曲线 4",
+    "chart_line_label_5": "曲线 5",
+    "chart_line_label_6": "曲线 6",
+    "chart_line_label_7": "曲线 7",
+    "chart_line_label_8": "曲线 8",
+    "chart_line_label_9": "曲线 9",
+    "chart_line_hidden": "不显示",
+    "chart_line_actions_label": "曲线数量",
+    "chart_line_add": "增加曲线",
+    "chart_line_all": "全部",
+    "chart_line_delete": "删除曲线",
+    "chart_line_hint": "最多同时显示 9 条模型曲线",
+    "no_data": "暂无数据",
+    "loading_error": "加载失败",
+    "api_endpoint": "API端点",
+    "requests_count": "请求次数",
+    "tokens_count": "Token数量",
+    "models": "模型统计",
+    "success_rate": "成功率",
+    "total_cost": "总花费",
+    "total_cost_hint": "基于已设置的模型单价",
+    "model_price_title": "模型价格",
+    "model_price_reset": "清除价格",
+    "model_price_model_label": "选择模型",
+    "model_price_select_placeholder": "选择模型",
+    "model_price_select_hint": "模型列表来自使用统计明细",
+    "model_price_prompt": "提示价格",
+    "model_price_completion": "补全价格",
+    "model_price_cache": "缓存价格",
+    "model_price_save": "保存价格",
+    "model_price_empty": "暂未设置任何模型价格",
+    "model_price_model": "模型",
+    "model_price_saved": "模型价格已保存",
+    "model_price_model_required": "请选择要设置价格的模型",
+    "cost_trend": "花费统计",
+    "cost_axis_label": "花费 ($)",
+    "cost_need_price": "请先设置模型价格",
+    "cost_need_usage": "暂无使用数据，无法计算花费",
+    "cost_no_data": "没有可计算的花费数据"
+  },
+  "stats": {
+    "success": "成功",
+    "failure": "失败"
+  },
+  "logs": {
+    "title": "日志查看",
+    "refresh_button": "刷新日志",
+    "clear_button": "清空日志",
+    "download_button": "下载日志",
+    "error_log_button": "选择错误日志",
+    "error_logs_modal_title": "错误请求日志",
+    "error_logs_description": "请选择要下载的错误请求日志文件（仅在关闭请求日志时生成）。",
+    "error_logs_request_log_enabled": "当前已开启请求日志，按接口约定错误请求日志列表会始终为空。关闭请求日志后再刷新即可查看。",
+    "error_logs_empty": "暂无错误请求日志文件",
+    "error_logs_load_error": "加载错误日志列表失败",
+    "error_logs_size": "大小",
+    "error_logs_modified": "最后修改",
+    "error_logs_download": "下载",
+    "error_log_download_success": "错误日志下载成功",
+    "request_log_download_title": "下载报文",
+    "request_log_download_confirm": "是否要下载id为{{id}}的报文？",
+    "request_log_download_success": "报文下载成功",
+    "empty_title": "暂无日志记录",
+    "empty_desc": "当启用\"日志记录到文件\"功能后，日志将显示在这里",
+    "log_content": "日志内容",
+    "loading": "正在加载日志...",
+    "load_error": "加载日志失败",
+    "clear_confirm": "确定要清空所有日志吗？此操作不可恢复！",
+    "clear_success": "日志已清空",
+    "download_success": "日志下载成功",
+    "auto_refresh": "自动刷新",
+    "auto_refresh_enabled": "自动刷新已开启",
+    "auto_refresh_disabled": "自动刷新已关闭",
+    "load_more_hint": "向上滚动加载更多",
+    "hidden_lines": "已隐藏 {{count}} 行",
+    "loaded_lines": "已载入 {{count}} 行",
+    "filtered_lines": "已过滤 {{count}} 行",
+    "hide_management_logs": "屏蔽 {{prefix}} 日志",
+    "search_placeholder": "搜索日志内容或关键字",
+    "search_empty_title": "未找到匹配的日志",
+    "search_empty_desc": "尝试更换关键字或清空筛选条件。",
+    "double_click_copy_hint": "双击复制日志原文",
+    "copy_success": "已复制日志原文",
+    "copy_failed": "复制失败",
+    "lines": "行",
+    "removed": "已过滤",
+    "upgrade_required_title": "需要升级 CLI Proxy API",
+    "upgrade_required_desc": "当前服务器版本不支持日志查看功能，请升级到最新版本的 CLI Proxy API 以使用此功能。"
+  },
+  "config_management": {
+    "title": "配置管理",
+    "editor_title": "配置文件",
+    "reload": "重新加载",
+    "save": "保存",
+    "description": "查看并编辑服务器上的 config.yaml 配置文件。保存前请确认语法正确。",
+    "status_idle": "等待操作",
+    "status_loading": "加载配置中...",
+    "status_loaded": "配置已加载",
+    "status_dirty": "有未保存的更改",
+    "status_disconnected": "请先连接服务器以加载配置",
+    "status_load_failed": "加载失败",
+    "status_saving": "正在保存配置...",
+    "status_saved": "配置保存完成",
+    "status_save_failed": "保存失败",
+    "save_success": "配置已保存",
+    "error_yaml_not_supported": "服务器未返回 YAML 格式，请确认 /config.yaml 接口可用",
+    "editor_placeholder": "key: value",
+    "search_placeholder": "搜索配置内容...",
+    "search_button": "搜索",
+    "search_no_results": "无结果",
+    "search_prev": "上一个",
+    "search_next": "下一个"
+  },
+  "quota_management": {
+    "title": "配额管理",
+    "description": "集中查看 OAuth 额度与剩余情况",
+    "refresh_files": "刷新认证文件"
+  },
+  "system_info": {
+    "title": "管理中心信息",
+    "connection_status_title": "连接状态",
+    "api_status_label": "API 状态:",
+    "config_status_label": "配置状态:",
+    "last_update_label": "最后更新:",
+    "cache_data": "缓存数据",
+    "real_time_data": "实时数据",
+    "not_loaded": "未加载",
+    "seconds_ago": "秒前",
+    "models_title": "可用模型列表",
+    "models_desc": "展示 /v1/models 返回的模型，并自动使用服务器保存的 API Key 进行鉴权。",
+    "models_loading": "正在加载可用模型...",
+    "models_empty": "未从 /v1/models 获取到模型数据",
+    "models_error": "获取模型列表失败",
+    "models_count": "可用模型 {{count}} 个",
+    "version_check_title": "版本检查",
+    "version_check_desc": "调用 /latest-version 接口比对服务器版本，提示是否有可用更新。",
+    "version_current_label": "当前版本",
+    "version_latest_label": "最新版本",
+    "version_check_button": "检查更新",
+    "version_check_idle": "点击检查更新",
+    "version_checking": "正在检查最新版本...",
+    "version_update_available": "有新版本可用：{{version}}",
+    "version_is_latest": "当前已是最新版本",
+    "version_check_error": "检查更新失败",
+    "version_current_missing": "未获取到服务器版本号，暂无法比对",
+    "version_unknown": "未知",
+    "quick_links_title": "快捷链接",
+    "quick_links_desc": "访问项目仓库和文档，获取帮助和更新。",
+    "link_main_repo": "主程序仓库",
+    "link_main_repo_desc": "CLI Proxy API 核心程序源代码",
+    "link_webui_repo": "WebUI 仓库",
+    "link_webui_repo_desc": "管理中心前端界面源代码",
+    "link_docs": "使用教程",
+    "link_docs_desc": "配置指南和使用说明",
+    "clear_login_title": "本地登录信息",
+    "clear_login_desc": "清理本地保存的登录信息并退出登录，不会影响使用统计中的价格设置。",
+    "clear_login_button": "清理登录信息",
+    "clear_login_confirm": "确认清理本地登录信息并退出登录？"
+  },
+  "notification": {
+    "debug_updated": "调试设置已更新",
+    "proxy_updated": "代理设置已更新",
+    "proxy_cleared": "代理设置已清空",
+    "retry_updated": "重试设置已更新",
+    "quota_switch_project_updated": "项目切换设置已更新",
+    "quota_switch_preview_updated": "预览模型切换设置已更新",
+    "usage_statistics_updated": "使用统计设置已更新",
+    "logging_to_file_updated": "日志记录设置已更新",
+    "request_log_updated": "请求日志设置已更新",
+    "ws_auth_updated": "WebSocket 鉴权设置已更新",
+    "login_storage_cleared": "本地登录信息已清理",
+    "api_key_added": "API密钥添加成功",
+    "api_key_updated": "API密钥更新成功",
+    "api_key_deleted": "API密钥删除成功",
+    "gemini_key_added": "Gemini密钥添加成功",
+    "gemini_key_updated": "Gemini密钥更新成功",
+    "gemini_key_deleted": "Gemini密钥删除成功",
+    "gemini_multi_input_required": "请先输入至少一个Gemini密钥",
+    "gemini_multi_failed": "Gemini密钥批量添加失败",
+    "gemini_multi_summary": "Gemini批量添加完成：成功 {{success}}，跳过 {{skipped}}，失败 {{failed}}",
+    "codex_config_added": "Codex配置添加成功",
+    "codex_config_updated": "Codex配置更新成功",
+    "codex_config_deleted": "Codex配置删除成功",
+    "codex_base_url_required": "请填写Codex Base URL",
+    "claude_config_added": "Claude配置添加成功",
+    "claude_config_updated": "Claude配置更新成功",
+    "claude_config_deleted": "Claude配置删除成功",
+    "config_enabled": "配置已启用",
+    "config_disabled": "配置已停用",
+    "field_required": "必填字段不能为空",
+    "openai_provider_required": "请填写提供商名称和Base URL",
+    "openai_provider_added": "OpenAI提供商添加成功",
+    "openai_provider_updated": "OpenAI提供商更新成功",
+    "openai_provider_deleted": "OpenAI提供商删除成功",
+    "ampcode_updated": "Ampcode 配置已更新",
+    "ampcode_upstream_api_key_cleared": "Ampcode upstream API key 覆盖已清除",
+    "openai_model_name_required": "请填写模型名称",
+    "openai_test_url_required": "请先填写有效的 Base URL 以进行测试",
+    "openai_test_key_required": "请至少填写一个 API 密钥以进行测试",
+    "openai_test_model_required": "请选择要测试的模型",
+    "data_refreshed": "数据刷新成功",
+    "connection_required": "请先建立连接",
+    "refresh_failed": "刷新失败",
+    "update_failed": "更新失败",
+    "add_failed": "添加失败",
+    "delete_failed": "删除失败",
+    "upload_failed": "上传失败",
+    "download_failed": "下载失败",
+    "login_failed": "登录失败",
+    "please_enter": "请输入",
+    "please_fill": "请填写",
+    "provider_name_url": "提供商名称和Base URL",
+    "api_key": "API密钥",
+    "gemini_api_key": "Gemini API密钥",
+    "codex_api_key": "Codex API密钥",
+    "claude_api_key": "Claude API密钥",
+    "link_copied": "已复制"
+  },
+  "language": {
+    "switch": "语言",
+    "chinese": "中文",
+    "english": "English"
+  },
+  "theme": {
+    "switch": "主题",
+    "light": "亮色",
+    "dark": "暗色",
+    "switch_to_light": "切换到亮色模式",
+    "switch_to_dark": "切换到暗色模式",
+    "auto": "跟随系统"
+  },
+  "sidebar": {
+    "toggle_expand": "展开侧边栏",
+    "toggle_collapse": "收起侧边栏"
+  },
+  "footer": {
+    "api_version": "CLI Proxy API 版本",
+    "build_date": "构建时间",
+    "version": "管理中心版本",
+    "author": "作者"
+  }
+}

src/index.css

@@ -0,0 +1,68 @@
+:root {
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}

src/main.tsx

@@ -0,0 +1,25 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import '@/styles/global.scss';
+import { INLINE_LOGO_JPEG } from '@/assets/logoInline';
+import App from './App.tsx';
+
+document.title = 'CLI Proxy API Management Center';
+
+const faviconEl = document.querySelector<HTMLLinkElement>('link[rel="icon"]');
+if (faviconEl) {
+  faviconEl.href = INLINE_LOGO_JPEG;
+  faviconEl.type = 'image/jpeg';
+} else {
+  const newFavicon = document.createElement('link');
+  newFavicon.rel = 'icon';
+  newFavicon.type = 'image/jpeg';
+  newFavicon.href = INLINE_LOGO_JPEG;
+  document.head.appendChild(newFavicon);
+}
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);

src/pages/AiProvidersPage.module.scss

@@ -0,0 +1,531 @@
+@use '../styles/variables' as *;
+@use '../styles/mixins' as *;
+
+.container {
+  width: 100%;
+}
+
+.cardTitle {
+  display: flex;
+  align-items: center;
+  gap: $spacing-sm;
+}
+
+.cardTitleIcon {
+  width: 24px;
+  height: 24px;
+}
+
+.pageTitle {
+  font-size: 28px;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin: 0 0 $spacing-xl 0;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-xl;
+}
+
+.section {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-md;
+}
+
+.sectionHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: $spacing-md;
+
+  h3 {
+    margin: 0;
+    font-size: 20px;
+    font-weight: 600;
+    color: var(--text-primary);
+  }
+}
+
+.providerList {
+  display: grid;
+  gap: $spacing-md;
+  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
+
+  @include mobile {
+    grid-template-columns: 1fr;
+  }
+}
+
+// 成功失败次数统计样式
+.cardStats {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 8px;
+  padding-top: 4px;
+}
+
+.statPill {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  border-radius: 999px;
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 1.1;
+  border: 1px solid transparent;
+  background-color: var(--bg-tertiary);
+  color: var(--text-primary);
+  white-space: nowrap;
+}
+
+.statSuccess {
+  background-color: var(--success-badge-bg, #d1fae5);
+  color: var(--success-badge-text, #065f46);
+  border-color: var(--success-badge-border, #6ee7b7);
+}
+
+.statFailure {
+  background-color: var(--failure-badge-bg, #fee2e2);
+  color: var(--failure-badge-text, #991b1b);
+  border-color: var(--failure-badge-border, #fca5a5);
+}
+
+// 字段行样式：标签 + 值
+.fieldRow {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 6px;
+  margin-bottom: 4px;
+  font-size: 13px;
+  line-height: 1.4;
+}
+
+.fieldLabel {
+  color: var(--text-tertiary);
+  font-weight: 500;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.fieldValue {
+  color: var(--text-primary);
+  font-weight: 600;
+  word-break: break-all;
+  font-family: 'Monaco', 'Menlo', 'Consolas', 'Ubuntu Mono', monospace;
+}
+
+// 自定义请求头徽章
+.headerBadgeList {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-top: 6px;
+}
+
+.headerBadge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  background: var(--accent-tertiary, #f3f4f6);
+  border: 1px solid var(--border-primary);
+  border-radius: 12px;
+  padding: 4px 10px;
+  font-size: 12px;
+  color: var(--text-secondary);
+
+  strong {
+    font-weight: 600;
+    color: var(--text-primary);
+  }
+}
+
+// 模型标签容器
+.modelTagList {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-top: 8px;
+  align-items: center;
+}
+
+.modelCountLabel {
+  display: inline-flex;
+  align-items: center;
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 1.4;
+  color: var(--text-tertiary);
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+// 单个模型标签
+.modelTag {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  background: var(--bg-quinary, #f8f9fa);
+  color: var(--text-secondary);
+  border: 1px solid var(--border-secondary);
+  border-radius: 14px;
+  padding: 4px 10px;
+  font-size: 12px;
+  transition: all 0.15s ease;
+
+  &:hover {
+    background: var(--bg-tertiary);
+    border-color: var(--primary-color);
+  }
+}
+
+.modelName {
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.modelAlias {
+  color: var(--text-tertiary);
+  font-style: italic;
+
+  &::before {
+    content: '→ ';
+  }
+}
+
+// 排除模型标签（警告色）
+.excludedModelTag {
+  background: var(--warning-bg, #fef3c7);
+  border-color: var(--warning-border, #fbbf24);
+  color: var(--warning-text, #92400e);
+
+  .modelName {
+    color: var(--warning-text, #92400e);
+  }
+}
+
+// 排除模型区块
+.excludedModelsSection {
+  margin-top: 8px;
+}
+
+.excludedModelsLabel {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--warning-text, #92400e);
+  margin-bottom: 4px;
+}
+
+// API密钥条目列表（二级卡片）
+.apiKeyEntriesSection {
+  margin-top: 10px;
+}
+
+.apiKeyEntriesLabel {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-secondary);
+  margin-bottom: 6px;
+}
+
+.apiKeyEntryList {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.apiKeyEntryCard {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  background: var(--bg-secondary, #f9fafb);
+  border: 1px solid var(--border-secondary);
+  border-radius: 8px;
+  font-size: 12px;
+}
+
+.apiKeyEntryIndex {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: var(--primary-color);
+  color: white;
+  font-size: 11px;
+  font-weight: 600;
+  flex-shrink: 0;
+}
+
+.apiKeyEntryKey {
+  font-family: 'Monaco', 'Menlo', 'Consolas', 'Ubuntu Mono', monospace;
+  font-weight: 600;
+  color: var(--text-primary);
+  word-break: break-all;
+}
+
+.apiKeyEntryProxy {
+  color: var(--text-tertiary);
+  font-size: 11px;
+
+  &::before {
+    content: '| Proxy: ';
+    color: var(--text-quaternary);
+  }
+}
+
+.apiKeyEntryStats {
+  display: flex;
+  gap: 6px;
+  margin-left: auto;
+}
+
+.apiKeyEntryStat {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  padding: 2px 6px;
+  border-radius: 10px;
+  font-size: 10px;
+  font-weight: 600;
+
+  svg {
+    display: block;
+  }
+}
+
+.apiKeyEntryStatSuccess {
+  background: var(--success-badge-bg, #d1fae5);
+  color: var(--success-badge-text, #065f46);
+}
+
+.apiKeyEntryStatFailure {
+  background: var(--failure-badge-bg, #fee2e2);
+  color: var(--failure-badge-text, #991b1b);
+}
+
+// OpenAI 模型发现（二级界面）
+.modelDiscoveryList {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  max-height: 360px;
+  overflow-y: auto;
+  margin-top: 8px;
+  padding-right: 4px;
+}
+
+.modelDiscoveryRow {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 8px 10px;
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  background: var(--bg-primary);
+  cursor: pointer;
+  transition: background 0.15s ease, border-color 0.15s ease;
+
+  input[type='checkbox'] {
+    margin-top: 2px;
+    cursor: pointer;
+  }
+
+  &:hover {
+    border-color: var(--primary-color);
+    background: var(--bg-secondary);
+  }
+}
+
+.modelDiscoveryRowSelected {
+  border-color: var(--primary-color);
+  background: var(--bg-tertiary);
+}
+
+.modelDiscoveryMeta {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.modelDiscoveryName {
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.modelDiscoveryAlias {
+  margin-left: 6px;
+  color: var(--text-tertiary);
+  font-style: italic;
+}
+
+.modelDiscoveryDesc {
+  font-size: 12px;
+  color: var(--text-secondary);
+  line-height: 1.4;
+}
+
+.openaiTestButtonSuccess {
+  background-color: var(--success-badge-bg, #d1fae5);
+  border-color: var(--success-badge-border, #6ee7b7);
+  color: var(--success-badge-text, #065f46);
+
+  &:hover {
+    background-color: var(--success-badge-bg, #d1fae5);
+    border-color: var(--success-badge-border, #6ee7b7);
+  }
+}
+
+// 连通性测试按钮高度对齐
+.openaiTestSelect {
+  flex: 1 1 0;
+  min-width: 0;
+}
+
+.openaiTestButton {
+  flex: 1 1 0;
+  padding: 8px 12px;
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+// 状态监测栏
+.statusBar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 8px;
+  padding: 8px 0;
+  max-width: 280px;
+}
+
+.statusBlocks {
+  display: flex;
+  gap: 2px;
+  flex: 1;
+  min-width: 180px;
+}
+
+.statusBlock {
+  flex: 1;
+  height: 8px;
+  border-radius: 2px;
+  min-width: 6px;
+  transition: transform 0.15s ease, opacity 0.15s ease;
+
+  &:hover {
+    transform: scaleY(1.5);
+    opacity: 0.85;
+  }
+}
+
+.statusBlockSuccess {
+  background-color: var(--success-color, #22c55e);
+}
+
+.statusBlockFailure {
+  background-color: var(--danger-color, #ef4444);
+}
+
+.statusBlockMixed {
+  background-color: var(--warning-color, #f59e0b);
+}
+
+.statusBlockIdle {
+  background-color: var(--border-secondary, #e5e7eb);
+}
+
+.statusRate {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 12px;
+  font-weight: 600;
+  white-space: nowrap;
+  padding: 4px 8px;
+  border-radius: 6px;
+  background: var(--bg-tertiary);
+}
+
+.statusRateHigh {
+  color: var(--success-badge-text, #065f46);
+  background: var(--success-badge-bg, #d1fae5);
+}
+
+.statusRateMedium {
+  color: var(--warning-text, #92400e);
+  background: var(--warning-bg, #fef3c7);
+}
+
+.statusRateLow {
+  color: var(--failure-badge-text, #991b1b);
+  background: var(--failure-badge-bg, #fee2e2);
+}
+
+// 暗色主题适配
+:global([data-theme='dark']) {
+  .headerBadge {
+    background: rgba(59, 130, 246, 0.15);
+    border-color: rgba(59, 130, 246, 0.3);
+    color: var(--text-secondary);
+
+    strong {
+      color: var(--text-secondary);
+    }
+  }
+
+  .modelTag {
+    background: rgba(59, 130, 246, 0.1);
+    border-color: var(--border-secondary);
+  }
+
+  .excludedModelTag {
+    background: rgba(251, 191, 36, 0.22);
+    border-color: rgba(251, 191, 36, 0.55);
+    color: #fde68a;
+
+    .modelName {
+      color: #fde68a;
+    }
+  }
+
+  .excludedModelsLabel {
+    color: #fde68a;
+  }
+
+  .apiKeyEntryCard {
+    background: var(--bg-tertiary);
+    border-color: var(--border-primary);
+  }
+
+  .apiKeyEntryIndex {
+    background: var(--primary-color);
+  }
+
+  .statusBlockIdle {
+    background-color: var(--border-primary, #374151);
+  }
+
+  .statusRateHigh {
+    background: rgba(34, 197, 94, 0.2);
+    color: #86efac;
+  }
+
+  .statusRateMedium {
+    background: rgba(251, 191, 36, 0.2);
+    color: #fde68a;
+  }
+
+  .statusRateLow {
+    background: rgba(239, 68, 68, 0.2);
+    color: #fca5a5;
+  }
+}

src/pages/AiProvidersPage.tsx

@@ -0,0 +1,511 @@
+import { useCallback, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { entriesToModels } from '@/components/ui/ModelInputList';
+import {
+  AmpcodeSection,
+  ClaudeSection,
+  CodexSection,
+  GeminiSection,
+  OpenAISection,
+  useProviderStats,
+  type GeminiFormState,
+  type OpenAIFormState,
+  type ProviderFormState,
+  type ProviderModal,
+} from '@/components/providers';
+import {
+  parseExcludedModels,
+  withDisableAllModelsRule,
+  withoutDisableAllModelsRule,
+} from '@/components/providers/utils';
+import { ampcodeApi, providersApi } from '@/services/api';
+import { useAuthStore, useConfigStore, useNotificationStore, useThemeStore } from '@/stores';
+import type { GeminiKeyConfig, OpenAIProviderConfig, ProviderKeyConfig } from '@/types';
+import { buildHeaderObject, headersToEntries } from '@/utils/headers';
+import styles from './AiProvidersPage.module.scss';
+
+export function AiProvidersPage() {
+  const { t } = useTranslation();
+  const { showNotification } = useNotificationStore();
+  const resolvedTheme = useThemeStore((state) => state.resolvedTheme);
+  const connectionStatus = useAuthStore((state) => state.connectionStatus);
+
+  const config = useConfigStore((state) => state.config);
+  const fetchConfig = useConfigStore((state) => state.fetchConfig);
+  const updateConfigValue = useConfigStore((state) => state.updateConfigValue);
+  const clearCache = useConfigStore((state) => state.clearCache);
+
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState('');
+
+  const [geminiKeys, setGeminiKeys] = useState<GeminiKeyConfig[]>([]);
+  const [codexConfigs, setCodexConfigs] = useState<ProviderKeyConfig[]>([]);
+  const [claudeConfigs, setClaudeConfigs] = useState<ProviderKeyConfig[]>([]);
+  const [openaiProviders, setOpenaiProviders] = useState<OpenAIProviderConfig[]>([]);
+
+  const [saving, setSaving] = useState(false);
+  const [configSwitchingKey, setConfigSwitchingKey] = useState<string | null>(null);
+  const [modal, setModal] = useState<ProviderModal | null>(null);
+  const [ampcodeBusy, setAmpcodeBusy] = useState(false);
+
+  const disableControls = connectionStatus !== 'connected';
+  const isSwitching = Boolean(configSwitchingKey);
+
+  const { keyStats, usageDetails, loadKeyStats } = useProviderStats();
+
+  const getErrorMessage = (err: unknown) => {
+    if (err instanceof Error) return err.message;
+    if (typeof err === 'string') return err;
+    return '';
+  };
+
+  const loadConfigs = useCallback(async () => {
+    setLoading(true);
+    setError('');
+    try {
+      const data = await fetchConfig();
+      setGeminiKeys(data?.geminiApiKeys || []);
+      setCodexConfigs(data?.codexApiKeys || []);
+      setClaudeConfigs(data?.claudeApiKeys || []);
+      setOpenaiProviders(data?.openaiCompatibility || []);
+      try {
+        const ampcode = await ampcodeApi.getAmpcode();
+        updateConfigValue('ampcode', ampcode);
+        clearCache('ampcode');
+      } catch {
+        // ignore
+      }
+    } catch (err: unknown) {
+      const message = getErrorMessage(err) || t('notification.refresh_failed');
+      setError(message);
+    } finally {
+      setLoading(false);
+    }
+  }, [clearCache, fetchConfig, t, updateConfigValue]);
+
+  useEffect(() => {
+    loadConfigs();
+    loadKeyStats();
+  }, [loadConfigs, loadKeyStats]);
+
+  useEffect(() => {
+    if (config?.geminiApiKeys) setGeminiKeys(config.geminiApiKeys);
+    if (config?.codexApiKeys) setCodexConfigs(config.codexApiKeys);
+    if (config?.claudeApiKeys) setClaudeConfigs(config.claudeApiKeys);
+    if (config?.openaiCompatibility) setOpenaiProviders(config.openaiCompatibility);
+  }, [
+    config?.geminiApiKeys,
+    config?.codexApiKeys,
+    config?.claudeApiKeys,
+    config?.openaiCompatibility,
+  ]);
+
+  const closeModal = () => {
+    setModal(null);
+  };
+
+  const openGeminiModal = (index: number | null) => {
+    setModal({ type: 'gemini', index });
+  };
+
+  const openProviderModal = (type: 'codex' | 'claude', index: number | null) => {
+    setModal({ type, index });
+  };
+
+  const openAmpcodeModal = () => {
+    setModal({ type: 'ampcode', index: null });
+  };
+
+  const openOpenaiModal = (index: number | null) => {
+    setModal({ type: 'openai', index });
+  };
+
+  const saveGemini = async (form: GeminiFormState, editIndex: number | null) => {
+    setSaving(true);
+    try {
+      const payload: GeminiKeyConfig = {
+        apiKey: form.apiKey.trim(),
+        prefix: form.prefix?.trim() || undefined,
+        baseUrl: form.baseUrl?.trim() || undefined,
+        headers: buildHeaderObject(headersToEntries(form.headers)),
+        excludedModels: parseExcludedModels(form.excludedText),
+      };
+      const nextList =
+        editIndex !== null
+          ? geminiKeys.map((item, idx) => (idx === editIndex ? payload : item))
+          : [...geminiKeys, payload];
+
+      await providersApi.saveGeminiKeys(nextList);
+      setGeminiKeys(nextList);
+      updateConfigValue('gemini-api-key', nextList);
+      clearCache('gemini-api-key');
+      const message =
+        editIndex !== null
+          ? t('notification.gemini_key_updated')
+          : t('notification.gemini_key_added');
+      showNotification(message, 'success');
+      closeModal();
+    } catch (err: unknown) {
+      const message = getErrorMessage(err);
+      showNotification(`${t('notification.update_failed')}: ${message}`, 'error');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const deleteGemini = async (index: number) => {
+    const entry = geminiKeys[index];
+    if (!entry) return;
+    if (!window.confirm(t('ai_providers.gemini_delete_confirm'))) return;
+    try {
+      await providersApi.deleteGeminiKey(entry.apiKey);
+      const next = geminiKeys.filter((_, idx) => idx !== index);
+      setGeminiKeys(next);
+      updateConfigValue('gemini-api-key', next);
+      clearCache('gemini-api-key');
+      showNotification(t('notification.gemini_key_deleted'), 'success');
+    } catch (err: unknown) {
+      const message = getErrorMessage(err);
+      showNotification(`${t('notification.delete_failed')}: ${message}`, 'error');
+    }
+  };
+
+  const setConfigEnabled = async (
+    provider: 'gemini' | 'codex' | 'claude',
+    index: number,
+    enabled: boolean
+  ) => {
+    if (provider === 'gemini') {
+      const current = geminiKeys[index];
+      if (!current) return;
+
+      const switchingKey = `${provider}:${current.apiKey}`;
+      setConfigSwitchingKey(switchingKey);
+
+      const previousList = geminiKeys;
+      const nextExcluded = enabled
+        ? withoutDisableAllModelsRule(current.excludedModels)
+        : withDisableAllModelsRule(current.excludedModels);
+      const nextItem: GeminiKeyConfig = { ...current, excludedModels: nextExcluded };
+      const nextList = previousList.map((item, idx) => (idx === index ? nextItem : item));
+
+      setGeminiKeys(nextList);
+      updateConfigValue('gemini-api-key', nextList);
+      clearCache('gemini-api-key');
+
+      try {
+        await providersApi.saveGeminiKeys(nextList);
+        showNotification(
+          enabled ? t('notification.config_enabled') : t('notification.config_disabled'),
+          'success'
+        );
+      } catch (err: unknown) {
+        const message = getErrorMessage(err);
+        setGeminiKeys(previousList);
+        updateConfigValue('gemini-api-key', previousList);
+        clearCache('gemini-api-key');
+        showNotification(`${t('notification.update_failed')}: ${message}`, 'error');
+      } finally {
+        setConfigSwitchingKey(null);
+      }
+      return;
+    }
+
+    const source = provider === 'codex' ? codexConfigs : claudeConfigs;
+    const current = source[index];
+    if (!current) return;
+
+    const switchingKey = `${provider}:${current.apiKey}`;
+    setConfigSwitchingKey(switchingKey);
+
+    const previousList = source;
+    const nextExcluded = enabled
+      ? withoutDisableAllModelsRule(current.excludedModels)
+      : withDisableAllModelsRule(current.excludedModels);
+    const nextItem: ProviderKeyConfig = { ...current, excludedModels: nextExcluded };
+    const nextList = previousList.map((item, idx) => (idx === index ? nextItem : item));
+
+    if (provider === 'codex') {
+      setCodexConfigs(nextList);
+      updateConfigValue('codex-api-key', nextList);
+      clearCache('codex-api-key');
+    } else {
+      setClaudeConfigs(nextList);
+      updateConfigValue('claude-api-key', nextList);
+      clearCache('claude-api-key');
+    }
+
+    try {
+      if (provider === 'codex') {
+        await providersApi.saveCodexConfigs(nextList);
+      } else {
+        await providersApi.saveClaudeConfigs(nextList);
+      }
+      showNotification(
+        enabled ? t('notification.config_enabled') : t('notification.config_disabled'),
+        'success'
+      );
+    } catch (err: unknown) {
+      const message = getErrorMessage(err);
+      if (provider === 'codex') {
+        setCodexConfigs(previousList);
+        updateConfigValue('codex-api-key', previousList);
+        clearCache('codex-api-key');
+      } else {
+        setClaudeConfigs(previousList);
+        updateConfigValue('claude-api-key', previousList);
+        clearCache('claude-api-key');
+      }
+      showNotification(`${t('notification.update_failed')}: ${message}`, 'error');
+    } finally {
+      setConfigSwitchingKey(null);
+    }
+  };
+
+  const saveProvider = async (
+    type: 'codex' | 'claude',
+    form: ProviderFormState,
+    editIndex: number | null
+  ) => {
+    const trimmedBaseUrl = (form.baseUrl ?? '').trim();
+    const baseUrl = trimmedBaseUrl || undefined;
+    if (type === 'codex' && !baseUrl) {
+      showNotification(t('notification.codex_base_url_required'), 'error');
+      return;
+    }
+
+    setSaving(true);
+    try {
+      const source = type === 'codex' ? codexConfigs : claudeConfigs;
+
+      const payload: ProviderKeyConfig = {
+        apiKey: form.apiKey.trim(),
+        prefix: form.prefix?.trim() || undefined,
+        baseUrl,
+        proxyUrl: form.proxyUrl?.trim() || undefined,
+        headers: buildHeaderObject(headersToEntries(form.headers)),
+        models: entriesToModels(form.modelEntries),
+        excludedModels: parseExcludedModels(form.excludedText),
+      };
+
+      const nextList =
+        editIndex !== null
+          ? source.map((item, idx) => (idx === editIndex ? payload : item))
+          : [...source, payload];
+
+      if (type === 'codex') {
+        await providersApi.saveCodexConfigs(nextList);
+        setCodexConfigs(nextList);
+        updateConfigValue('codex-api-key', nextList);
+        clearCache('codex-api-key');
+        const message =
+          editIndex !== null
+            ? t('notification.codex_config_updated')
+            : t('notification.codex_config_added');
+        showNotification(message, 'success');
+      } else {
+        await providersApi.saveClaudeConfigs(nextList);
+        setClaudeConfigs(nextList);
+        updateConfigValue('claude-api-key', nextList);
+        clearCache('claude-api-key');
+        const message =
+          editIndex !== null
+            ? t('notification.claude_config_updated')
+            : t('notification.claude_config_added');
+        showNotification(message, 'success');
+      }
+
+      closeModal();
+    } catch (err: unknown) {
+      const message = getErrorMessage(err);
+      showNotification(`${t('notification.update_failed')}: ${message}`, 'error');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const deleteProviderEntry = async (type: 'codex' | 'claude', index: number) => {
+    const source = type === 'codex' ? codexConfigs : claudeConfigs;
+    const entry = source[index];
+    if (!entry) return;
+    if (!window.confirm(t(`ai_providers.${type}_delete_confirm`))) return;
+    try {
+      if (type === 'codex') {
+        await providersApi.deleteCodexConfig(entry.apiKey);
+        const next = codexConfigs.filter((_, idx) => idx !== index);
+        setCodexConfigs(next);
+        updateConfigValue('codex-api-key', next);
+        clearCache('codex-api-key');
+        showNotification(t('notification.codex_config_deleted'), 'success');
+      } else {
+        await providersApi.deleteClaudeConfig(entry.apiKey);
+        const next = claudeConfigs.filter((_, idx) => idx !== index);
+        setClaudeConfigs(next);
+        updateConfigValue('claude-api-key', next);
+        clearCache('claude-api-key');
+        showNotification(t('notification.claude_config_deleted'), 'success');
+      }
+    } catch (err: unknown) {
+      const message = getErrorMessage(err);
+      showNotification(`${t('notification.delete_failed')}: ${message}`, 'error');
+    }
+  };
+
+  const saveOpenai = async (form: OpenAIFormState, editIndex: number | null) => {
+    setSaving(true);
+    try {
+      const payload: OpenAIProviderConfig = {
+        name: form.name.trim(),
+        prefix: form.prefix?.trim() || undefined,
+        baseUrl: form.baseUrl.trim(),
+        headers: buildHeaderObject(form.headers),
+        apiKeyEntries: form.apiKeyEntries.map((entry) => ({
+          apiKey: entry.apiKey.trim(),
+          proxyUrl: entry.proxyUrl?.trim() || undefined,
+          headers: entry.headers,
+        })),
+      };
+      if (form.testModel) payload.testModel = form.testModel.trim();
+      const models = entriesToModels(form.modelEntries);
+      if (models.length) payload.models = models;
+
+      const nextList =
+        editIndex !== null
+          ? openaiProviders.map((item, idx) => (idx === editIndex ? payload : item))
+          : [...openaiProviders, payload];
+
+      await providersApi.saveOpenAIProviders(nextList);
+      setOpenaiProviders(nextList);
+      updateConfigValue('openai-compatibility', nextList);
+      clearCache('openai-compatibility');
+      const message =
+        editIndex !== null
+          ? t('notification.openai_provider_updated')
+          : t('notification.openai_provider_added');
+      showNotification(message, 'success');
+      closeModal();
+    } catch (err: unknown) {
+      const message = getErrorMessage(err);
+      showNotification(`${t('notification.update_failed')}: ${message}`, 'error');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const deleteOpenai = async (index: number) => {
+    const entry = openaiProviders[index];
+    if (!entry) return;
+    if (!window.confirm(t('ai_providers.openai_delete_confirm'))) return;
+    try {
+      await providersApi.deleteOpenAIProvider(entry.name);
+      const next = openaiProviders.filter((_, idx) => idx !== index);
+      setOpenaiProviders(next);
+      updateConfigValue('openai-compatibility', next);
+      clearCache('openai-compatibility');
+      showNotification(t('notification.openai_provider_deleted'), 'success');
+    } catch (err: unknown) {
+      const message = getErrorMessage(err);
+      showNotification(`${t('notification.delete_failed')}: ${message}`, 'error');
+    }
+  };
+
+  const geminiModalIndex = modal?.type === 'gemini' ? modal.index : null;
+  const codexModalIndex = modal?.type === 'codex' ? modal.index : null;
+  const claudeModalIndex = modal?.type === 'claude' ? modal.index : null;
+  const openaiModalIndex = modal?.type === 'openai' ? modal.index : null;
+
+  return (
+    <div className={styles.container}>
+      <h1 className={styles.pageTitle}>{t('ai_providers.title')}</h1>
+      <div className={styles.content}>
+        {error && <div className="error-box">{error}</div>}
+
+        <GeminiSection
+          configs={geminiKeys}
+          keyStats={keyStats}
+          usageDetails={usageDetails}
+          loading={loading}
+          disableControls={disableControls}
+          isSaving={saving}
+          isSwitching={isSwitching}
+          isModalOpen={modal?.type === 'gemini'}
+          modalIndex={geminiModalIndex}
+          onAdd={() => openGeminiModal(null)}
+          onEdit={(index) => openGeminiModal(index)}
+          onDelete={deleteGemini}
+          onToggle={(index, enabled) => void setConfigEnabled('gemini', index, enabled)}
+          onCloseModal={closeModal}
+          onSave={saveGemini}
+        />
+
+        <CodexSection
+          configs={codexConfigs}
+          keyStats={keyStats}
+          usageDetails={usageDetails}
+          loading={loading}
+          disableControls={disableControls}
+          isSaving={saving}
+          isSwitching={isSwitching}
+          resolvedTheme={resolvedTheme}
+          isModalOpen={modal?.type === 'codex'}
+          modalIndex={codexModalIndex}
+          onAdd={() => openProviderModal('codex', null)}
+          onEdit={(index) => openProviderModal('codex', index)}
+          onDelete={(index) => void deleteProviderEntry('codex', index)}
+          onToggle={(index, enabled) => void setConfigEnabled('codex', index, enabled)}
+          onCloseModal={closeModal}
+          onSave={(form, editIndex) => saveProvider('codex', form, editIndex)}
+        />
+
+        <ClaudeSection
+          configs={claudeConfigs}
+          keyStats={keyStats}
+          usageDetails={usageDetails}
+          loading={loading}
+          disableControls={disableControls}
+          isSaving={saving}
+          isSwitching={isSwitching}
+          isModalOpen={modal?.type === 'claude'}
+          modalIndex={claudeModalIndex}
+          onAdd={() => openProviderModal('claude', null)}
+          onEdit={(index) => openProviderModal('claude', index)}
+          onDelete={(index) => void deleteProviderEntry('claude', index)}
+          onToggle={(index, enabled) => void setConfigEnabled('claude', index, enabled)}
+          onCloseModal={closeModal}
+          onSave={(form, editIndex) => saveProvider('claude', form, editIndex)}
+        />
+
+        <AmpcodeSection
+          config={config?.ampcode}
+          loading={loading}
+          disableControls={disableControls}
+          isSaving={saving}
+          isSwitching={isSwitching}
+          isBusy={ampcodeBusy}
+          isModalOpen={modal?.type === 'ampcode'}
+          onOpen={openAmpcodeModal}
+          onCloseModal={closeModal}
+          onBusyChange={setAmpcodeBusy}
+        />
+
+        <OpenAISection
+          configs={openaiProviders}
+          keyStats={keyStats}
+          usageDetails={usageDetails}
+          loading={loading}
+          disableControls={disableControls}
+          isSaving={saving}
+          isSwitching={isSwitching}
+          resolvedTheme={resolvedTheme}
+          isModalOpen={modal?.type === 'openai'}
+          modalIndex={openaiModalIndex}
+          onAdd={() => openOpenaiModal(null)}
+          onEdit={(index) => openOpenaiModal(index)}
+          onDelete={deleteOpenai}
+          onCloseModal={closeModal}
+          onSave={saveOpenai}
+        />
+      </div>
+    </div>
+  );
+}

src/pages/ApiKeysPage.module.scss

@@ -0,0 +1,56 @@
+@use '../styles/mixins' as *;
+
+.container {
+  width: 100%;
+}
+
+.pageTitle {
+  font-size: 28px;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin: 0 0 $spacing-xl 0;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-lg;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: $spacing-md;
+
+  @include mobile {
+    flex-direction: column;
+    align-items: stretch;
+  }
+}
+
+.actions {
+  display: flex;
+  gap: $spacing-sm;
+}
+
+.emptyState {
+  text-align: center;
+  padding: $spacing-2xl;
+  color: var(--text-secondary);
+
+  i {
+    font-size: 48px;
+    margin-bottom: $spacing-md;
+    opacity: 0.5;
+  }
+
+  h3 {
+    margin: 0 0 $spacing-sm 0;
+    color: var(--text-primary);
+  }
+
+  p {
+    margin: 0;
+  }
+}

src/pages/ApiKeysPage.tsx

@@ -0,0 +1,222 @@
+import { useCallback, useEffect, useMemo, 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 { Modal } from '@/components/ui/Modal';
+import { EmptyState } from '@/components/ui/EmptyState';
+import { LoadingSpinner } from '@/components/ui/LoadingSpinner';
+import { useAuthStore, useConfigStore, useNotificationStore } from '@/stores';
+import { apiKeysApi } from '@/services/api';
+import { maskApiKey } from '@/utils/format';
+import styles from './ApiKeysPage.module.scss';
+
+export function ApiKeysPage() {
+  const { t } = useTranslation();
+  const { showNotification } = useNotificationStore();
+  const connectionStatus = useAuthStore((state) => state.connectionStatus);
+
+  const config = useConfigStore((state) => state.config);
+  const fetchConfig = useConfigStore((state) => state.fetchConfig);
+  const updateConfigValue = useConfigStore((state) => state.updateConfigValue);
+  const clearCache = useConfigStore((state) => state.clearCache);
+
+  const [apiKeys, setApiKeys] = useState<string[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState('');
+  const [modalOpen, setModalOpen] = useState(false);
+  const [editingIndex, setEditingIndex] = useState<number | null>(null);
+  const [inputValue, setInputValue] = useState('');
+  const [saving, setSaving] = useState(false);
+  const [deletingIndex, setDeletingIndex] = useState<number | null>(null);
+
+  const disableControls = useMemo(() => connectionStatus !== 'connected', [connectionStatus]);
+
+  const loadApiKeys = useCallback(
+    async (force = false) => {
+      setLoading(true);
+      setError('');
+      try {
+        const result = (await fetchConfig('api-keys', force)) as string[] | undefined;
+        const list = Array.isArray(result) ? result : [];
+        setApiKeys(list);
+      } catch (err: any) {
+        setError(err?.message || t('notification.refresh_failed'));
+      } finally {
+        setLoading(false);
+      }
+    },
+    [fetchConfig, t]
+  );
+
+  useEffect(() => {
+    loadApiKeys();
+  }, [loadApiKeys]);
+
+  useEffect(() => {
+    if (Array.isArray(config?.apiKeys)) {
+      setApiKeys(config.apiKeys);
+    }
+  }, [config?.apiKeys]);
+
+  const openAddModal = () => {
+    setEditingIndex(null);
+    setInputValue('');
+    setModalOpen(true);
+  };
+
+  const openEditModal = (index: number) => {
+    setEditingIndex(index);
+    setInputValue(apiKeys[index] ?? '');
+    setModalOpen(true);
+  };
+
+  const closeModal = () => {
+    setModalOpen(false);
+    setInputValue('');
+    setEditingIndex(null);
+  };
+
+  const handleSave = async () => {
+    const trimmed = inputValue.trim();
+    if (!trimmed) {
+      showNotification(`${t('notification.please_enter')} ${t('notification.api_key')}`, 'error');
+      return;
+    }
+
+    const isEdit = editingIndex !== null;
+    const nextKeys = isEdit
+      ? apiKeys.map((key, idx) => (idx === editingIndex ? trimmed : key))
+      : [...apiKeys, trimmed];
+
+    setSaving(true);
+    try {
+      if (isEdit && editingIndex !== null) {
+        await apiKeysApi.update(editingIndex, trimmed);
+        showNotification(t('notification.api_key_updated'), 'success');
+      } else {
+        await apiKeysApi.replace(nextKeys);
+        showNotification(t('notification.api_key_added'), 'success');
+      }
+
+      setApiKeys(nextKeys);
+      updateConfigValue('api-keys', nextKeys);
+      clearCache('api-keys');
+      closeModal();
+    } catch (err: any) {
+      showNotification(`${t('notification.update_failed')}: ${err?.message || ''}`, 'error');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleDelete = async (index: number) => {
+    if (!window.confirm(t('api_keys.delete_confirm'))) return;
+    setDeletingIndex(index);
+    try {
+      await apiKeysApi.delete(index);
+      const nextKeys = apiKeys.filter((_, idx) => idx !== index);
+      setApiKeys(nextKeys);
+      updateConfigValue('api-keys', nextKeys);
+      clearCache('api-keys');
+      showNotification(t('notification.api_key_deleted'), 'success');
+    } catch (err: any) {
+      showNotification(`${t('notification.delete_failed')}: ${err?.message || ''}`, 'error');
+    } finally {
+      setDeletingIndex(null);
+    }
+  };
+
+  const actionButtons = (
+    <div style={{ display: 'flex', gap: 8 }}>
+      <Button variant="secondary" size="sm" onClick={() => loadApiKeys(true)} disabled={loading}>
+        {t('common.refresh')}
+      </Button>
+      <Button size="sm" onClick={openAddModal} disabled={disableControls}>
+        {t('api_keys.add_button')}
+      </Button>
+    </div>
+  );
+
+  return (
+    <div className={styles.container}>
+      <h1 className={styles.pageTitle}>{t('api_keys.title')}</h1>
+
+      <Card title={t('api_keys.proxy_auth_title')} extra={actionButtons}>
+        {error && <div className="error-box">{error}</div>}
+
+        {loading ? (
+          <div className="flex-center" style={{ padding: '24px 0' }}>
+            <LoadingSpinner size={28} />
+          </div>
+        ) : apiKeys.length === 0 ? (
+          <EmptyState
+            title={t('api_keys.empty_title')}
+            description={t('api_keys.empty_desc')}
+            action={
+              <Button onClick={openAddModal} disabled={disableControls}>
+                {t('api_keys.add_button')}
+              </Button>
+            }
+          />
+        ) : (
+          <div className="item-list">
+            {apiKeys.map((key, index) => (
+              <div key={index} className="item-row">
+                <div className="item-meta">
+                  <div className="pill">#{index + 1}</div>
+                  <div className="item-title">{t('api_keys.item_title')}</div>
+                  <div className="item-subtitle">{maskApiKey(String(key || ''))}</div>
+                </div>
+                <div className="item-actions">
+                  <Button variant="secondary" size="sm" onClick={() => openEditModal(index)} disabled={disableControls}>
+                    {t('common.edit')}
+                  </Button>
+                  <Button
+                    variant="danger"
+                    size="sm"
+                    onClick={() => handleDelete(index)}
+                    disabled={disableControls || deletingIndex === index}
+                    loading={deletingIndex === index}
+                  >
+                    {t('common.delete')}
+                  </Button>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+
+        <Modal
+          open={modalOpen}
+          onClose={closeModal}
+          title={editingIndex !== null ? t('api_keys.edit_modal_title') : t('api_keys.add_modal_title')}
+          footer={
+            <>
+              <Button variant="secondary" onClick={closeModal} disabled={saving}>
+                {t('common.cancel')}
+              </Button>
+              <Button onClick={handleSave} loading={saving}>
+                {editingIndex !== null ? t('common.update') : t('common.add')}
+              </Button>
+            </>
+          }
+        >
+          <Input
+            label={
+              editingIndex !== null ? t('api_keys.edit_modal_key_label') : t('api_keys.add_modal_key_label')
+            }
+            placeholder={
+              editingIndex !== null
+                ? t('api_keys.edit_modal_key_label')
+                : t('api_keys.add_modal_key_placeholder')
+            }
+            value={inputValue}
+            onChange={(e) => setInputValue(e.target.value)}
+            disabled={saving}
+          />
+        </Modal>
+      </Card>
+    </div>
+  );
+}

src/pages/AuthFilesPage.module.scss

@@ -0,0 +1,883 @@
+@use '../styles/variables' as *;
+@use '../styles/mixins' as *;
+
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-lg;
+}
+
+.pageHeader {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-sm;
+}
+
+.pageTitle {
+  font-size: 28px;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin: 0;
+}
+
+.description {
+  font-size: 14px;
+  color: var(--text-secondary);
+  margin: 0;
+}
+
+.headerActions {
+  display: flex;
+  gap: $spacing-sm;
+  flex-wrap: wrap;
+}
+
+.errorBox {
+  padding: $spacing-md;
+  background-color: rgba(239, 68, 68, 0.1);
+  border: 1px solid var(--danger-color);
+  border-radius: $radius-md;
+  color: var(--danger-color);
+  font-size: 14px;
+  margin-bottom: $spacing-md;
+}
+
+// 筛选区域
+.filterSection {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-md;
+  margin-bottom: $spacing-lg;
+}
+
+.filterTags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: $spacing-xs;
+}
+
+.filterTag {
+  padding: 6px 14px;
+  border-radius: 20px;
+  font-size: 13px;
+  font-weight: 500;
+  border: 1px solid transparent;
+  cursor: pointer;
+  transition: all $transition-fast;
+
+  &:hover {
+    transform: translateY(-1px);
+    box-shadow: $shadow-sm;
+  }
+}
+
+.filterTagActive {
+  font-weight: 600;
+}
+
+.filterControls {
+  display: flex;
+  gap: $spacing-md;
+  flex-wrap: wrap;
+  align-items: flex-end;
+
+  // 修复 Input 组件在 filterItem 中的嵌套样式
+  :global(.form-group) {
+    margin: 0;
+  }
+
+  :global(.input) {
+    height: 38px;
+    box-sizing: border-box;
+  }
+}
+
+.filterItem {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+
+  label {
+    font-size: 12px;
+    color: var(--text-secondary);
+    font-weight: 500;
+    white-space: nowrap;
+  }
+
+  // 搜索输入框需要更宽以显示完整的 placeholder
+  &:first-child {
+    min-width: 220px;
+    flex: 1;
+    max-width: 320px;
+  }
+
+  // 其他 filterItem 保持较小的宽度
+  &:not(:first-child) {
+    min-width: auto;
+  }
+}
+
+.pageSizeSelect {
+  padding: 8px 12px;
+  border: 1px solid var(--border-color);
+  border-radius: $radius-md;
+  background-color: var(--bg-primary);
+  color: var(--text-primary);
+  font-size: 14px;
+  cursor: text;
+  height: 38px;
+  box-sizing: border-box;
+
+  &:focus {
+    outline: none;
+    border-color: var(--primary-color);
+  }
+}
+
+.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;
+  gap: $spacing-md;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+
+  @include tablet {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  @include mobile {
+    grid-template-columns: 1fr;
+  }
+}
+
+.antigravityGrid {
+  display: grid;
+  gap: $spacing-md;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+
+  @include tablet {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  @include mobile {
+    grid-template-columns: 1fr;
+  }
+}
+
+.codexGrid {
+  display: grid;
+  gap: $spacing-md;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+
+  @include tablet {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  @include mobile {
+    grid-template-columns: 1fr;
+  }
+}
+
+.geminiCliGrid {
+  display: grid;
+  gap: $spacing-md;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+
+  @include tablet {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  @include mobile {
+    grid-template-columns: 1fr;
+  }
+}
+
+.antigravityControls {
+  display: flex;
+  gap: $spacing-md;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  margin-bottom: $spacing-md;
+}
+
+.antigravityControl {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+
+  label {
+    font-size: 12px;
+    color: var(--text-secondary);
+    font-weight: 500;
+    white-space: nowrap;
+  }
+}
+
+.codexControls {
+  display: flex;
+  gap: $spacing-md;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  margin-bottom: $spacing-md;
+}
+
+.codexControl {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+
+  label {
+    font-size: 12px;
+    color: var(--text-secondary);
+    font-weight: 500;
+    white-space: nowrap;
+  }
+}
+
+.geminiCliControls {
+  display: flex;
+  gap: $spacing-md;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  margin-bottom: $spacing-md;
+}
+
+.geminiCliControl {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+
+  label {
+    font-size: 12px;
+    color: var(--text-secondary);
+    font-weight: 500;
+    white-space: nowrap;
+  }
+}
+
+.antigravityCard {
+  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)
+  );
+}
+
+.geminiCliCard {
+  background-image: linear-gradient(
+    180deg,
+    rgba(231, 239, 255, 0.2),
+    rgba(231, 239, 255, 0)
+  );
+}
+
+.quotaSection {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-sm;
+  padding-top: $spacing-sm;
+  margin-top: $spacing-xs;
+  border-top: 1px dashed var(--border-color);
+}
+
+.quotaRow {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-xs;
+}
+
+.quotaRowHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: $spacing-sm;
+  min-width: 0;
+
+  @include mobile {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}
+
+.quotaModel {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex: 1;
+  min-width: 0;
+
+  @include mobile {
+    white-space: normal;
+  }
+}
+
+.quotaBar {
+  height: 8px;
+  background-color: var(--bg-tertiary);
+  border-radius: 999px;
+  overflow: hidden;
+}
+
+.quotaBarFill {
+  height: 100%;
+  background-color: var(--success-color, #22c55e);
+  transition: width 0.2s ease;
+}
+
+.quotaBarFillHigh {
+  background-color: var(--success-color, #22c55e);
+}
+
+.quotaBarFillMedium {
+  background-color: var(--warning-color, #f59e0b);
+}
+
+.quotaBarFillLow {
+  background-color: var(--danger-color, #ef4444);
+}
+
+.quotaMeta {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+  color: var(--text-secondary);
+  white-space: nowrap;
+
+  @include mobile {
+    justify-content: flex-start;
+  }
+}
+
+.quotaPercent {
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.quotaReset {
+  color: var(--text-tertiary);
+}
+
+.quotaAmount {
+  color: var(--text-secondary);
+}
+
+.quotaMessage {
+  font-size: 12px;
+  color: var(--text-tertiary);
+  text-align: center;
+  padding: $spacing-sm 0;
+}
+
+.quotaError {
+  font-size: 12px;
+  color: var(--danger-color);
+  background-color: rgba(239, 68, 68, 0.08);
+  border: 1px solid var(--danger-color);
+  border-radius: $radius-sm;
+  padding: $spacing-xs $spacing-sm;
+}
+
+.quotaWarning {
+  font-size: 12px;
+  color: var(--warning-color, #f59e0b);
+  background-color: rgba(245, 158, 11, 0.12);
+  border: 1px solid var(--warning-color, #f59e0b);
+  border-radius: $radius-sm;
+  padding: $spacing-xs $spacing-sm;
+}
+
+.codexPlan {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+
+.codexPlanLabel {
+  color: var(--text-tertiary);
+}
+
+.codexPlanValue {
+  font-weight: 600;
+  color: var(--text-primary);
+  text-transform: capitalize;
+}
+
+// 单个认证文件卡片
+.fileCard {
+  background-color: var(--bg-primary);
+  border: 1px solid var(--border-color);
+  border-radius: $radius-lg;
+  padding: $spacing-md;
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-sm;
+  transition: transform $transition-fast, box-shadow $transition-fast, border-color $transition-fast;
+
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: $shadow-md;
+    border-color: rgba(37, 99, 235, 0.2);
+  }
+}
+
+.cardHeader {
+  display: flex;
+  align-items: center;
+  gap: $spacing-sm;
+  min-height: 28px;
+}
+
+.typeBadge {
+  padding: 4px 10px;
+  border-radius: 12px;
+  font-size: 12px;
+  font-weight: 600;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.fileName {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text-primary);
+  word-break: break-all;
+  line-height: 1.4;
+}
+
+.cardMeta {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  font-size: 12px;
+  color: var(--text-secondary);
+  padding: $spacing-xs 0;
+  border-top: 1px solid var(--border-color);
+  border-bottom: 1px solid var(--border-color);
+}
+
+.cardStats {
+  display: flex;
+  flex-wrap: wrap;
+  gap: $spacing-sm;
+  padding-top: $spacing-xs;
+  margin-top: $spacing-xs;
+}
+
+.statPill {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  border-radius: 999px;
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 1.1;
+  border: 1px solid transparent;
+  background-color: var(--bg-tertiary);
+  color: var(--text-primary);
+  white-space: nowrap;
+}
+
+.statSuccess {
+  background-color: var(--success-badge-bg, #d1fae5);
+  color: var(--success-badge-text, #065f46);
+  border-color: var(--success-badge-border, #6ee7b7);
+}
+
+.statFailure {
+  background-color: var(--failure-badge-bg, #fee2e2);
+  color: var(--failure-badge-text, #991b1b);
+  border-color: var(--failure-badge-border, #fca5a5);
+}
+
+// 状态监测栏
+.statusBar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 0;
+  max-width: 280px;
+}
+
+.statusBlocks {
+  display: flex;
+  gap: 2px;
+  flex: 1;
+  min-width: 180px;
+}
+
+.statusBlock {
+  flex: 1;
+  height: 8px;
+  border-radius: 2px;
+  min-width: 6px;
+  transition: transform 0.15s ease, opacity 0.15s ease;
+
+  &:hover {
+    transform: scaleY(1.5);
+    opacity: 0.85;
+  }
+}
+
+.statusBlockSuccess {
+  background-color: var(--success-color, #22c55e);
+}
+
+.statusBlockFailure {
+  background-color: var(--danger-color, #ef4444);
+}
+
+.statusBlockMixed {
+  background-color: var(--warning-color, #f59e0b);
+}
+
+.statusBlockIdle {
+  background-color: var(--border-secondary, #e5e7eb);
+}
+
+.statusRate {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 12px;
+  font-weight: 600;
+  white-space: nowrap;
+  padding: 4px 8px;
+  border-radius: 6px;
+  background: var(--bg-tertiary);
+}
+
+.statusRateHigh {
+  color: var(--success-badge-text, #065f46);
+  background: var(--success-badge-bg, #d1fae5);
+}
+
+.statusRateMedium {
+  color: var(--warning-text, #92400e);
+  background: var(--warning-bg, #fef3c7);
+}
+
+.statusRateLow {
+  color: var(--failure-badge-text, #991b1b);
+  background: var(--failure-badge-bg, #fee2e2);
+}
+
+.cardActions {
+  display: flex;
+  gap: $spacing-xs;
+  justify-content: flex-end;
+  margin-top: auto;
+  padding-top: $spacing-sm;
+}
+
+.iconButton:global(.btn.btn-sm) {
+  width: 34px;
+  height: 34px;
+  min-width: 34px;
+  padding: 0;
+  box-sizing: border-box;
+  border-radius: 6px;
+  gap: 0;
+}
+
+.actionIcon {
+  display: block;
+}
+
+.virtualBadge {
+  font-size: 12px;
+  color: var(--text-secondary);
+  background-color: var(--bg-tertiary);
+  padding: 4px 10px;
+  border-radius: $radius-sm;
+  font-style: italic;
+  display: inline-flex;
+  align-items: center;
+}
+
+// 分页
+.pagination {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: $spacing-md;
+  margin-top: $spacing-lg;
+  padding-top: $spacing-md;
+  border-top: 1px solid var(--border-color);
+}
+
+.pageInfo {
+  font-size: 13px;
+  color: var(--text-secondary);
+  padding: $spacing-xs $spacing-md;
+  background-color: var(--bg-secondary);
+  border-radius: $radius-md;
+}
+
+// OAuth 排除列表
+.excludedList {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-sm;
+}
+
+.excludedItem {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: $spacing-md;
+  background-color: var(--bg-secondary);
+  border-radius: $radius-md;
+  border: 1px solid var(--border-color);
+  gap: $spacing-md;
+
+  @include mobile {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}
+
+.excludedInfo {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+  flex: 1;
+}
+
+.excludedProvider {
+  font-weight: 600;
+  color: var(--text-primary);
+  font-size: 14px;
+}
+
+.excludedModels {
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+
+.excludedActions {
+  display: flex;
+  gap: $spacing-xs;
+  flex-shrink: 0;
+}
+
+// OAuth 排除列表表单：提供商快捷标签
+.providerField {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-xs;
+
+  :global(.form-group) {
+    margin-bottom: 0;
+  }
+}
+
+.providerTagList {
+  display: flex;
+  flex-wrap: wrap;
+  gap: $spacing-xs;
+}
+
+.providerTag {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 10px;
+  border-radius: $radius-full;
+  border: 1px solid var(--border-color);
+  background-color: var(--bg-secondary);
+  color: var(--text-secondary);
+  font-size: 12px;
+  cursor: pointer;
+  transition: all $transition-fast;
+
+  &:hover {
+    border-color: var(--primary-color);
+    color: var(--text-primary);
+    background-color: var(--bg-hover);
+  }
+
+  &:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+}
+
+.providerTagActive {
+  background-color: var(--primary-color);
+  border-color: var(--primary-color);
+  color: #fff;
+
+  &:hover {
+    background-color: var(--primary-color);
+    border-color: var(--primary-color);
+    color: #fff;
+  }
+}
+
+// 详情弹窗
+.detailContent {
+  max-height: 400px;
+  overflow: auto;
+}
+
+.jsonContent {
+  background-color: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: $radius-md;
+  padding: $spacing-md;
+  font-family: monospace;
+  font-size: 12px;
+  white-space: pre-wrap;
+  word-break: break-all;
+  color: var(--text-primary);
+  margin: 0;
+}
+
+// 表单
+.formGroup {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-xs;
+  margin-top: $spacing-md;
+
+  label {
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--text-primary);
+  }
+}
+
+.textarea {
+  width: 100%;
+  padding: $spacing-sm $spacing-md;
+  border: 1px solid var(--border-color);
+  border-radius: $radius-md;
+  background-color: var(--bg-primary);
+  color: var(--text-primary);
+  font-size: 14px;
+  font-family: monospace;
+  resize: vertical;
+
+  &:focus {
+    outline: none;
+    border-color: var(--primary-color);
+  }
+
+  &::placeholder {
+    color: var(--text-tertiary);
+  }
+}
+
+.hint {
+  font-size: 12px;
+  color: var(--text-tertiary);
+  font-style: italic;
+  text-align: center;
+  padding: $spacing-lg;
+}
+
+// 模型列表弹窗
+.modelsList {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-sm;
+}
+
+.modelItem {
+  display: flex;
+  align-items: center;
+  gap: $spacing-sm;
+  padding: $spacing-sm $spacing-md;
+  background-color: var(--bg-secondary);
+  border-radius: $radius-md;
+  border: 1px solid var(--border-color);
+  flex-wrap: wrap;
+  cursor: pointer;
+  transition: all $transition-fast;
+
+  &:hover {
+    background-color: var(--bg-hover);
+    border-color: var(--primary-color);
+  }
+
+  &:active {
+    transform: scale(0.98);
+  }
+}
+
+.modelId {
+  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-primary);
+  word-break: break-all;
+}
+
+.modelDisplayName {
+  font-size: 12px;
+  color: var(--text-secondary);
+  flex-shrink: 0;
+}
+
+.modelType {
+  font-size: 11px;
+  color: var(--text-tertiary);
+  background-color: var(--bg-tertiary);
+  padding: 2px 8px;
+  border-radius: 10px;
+  flex-shrink: 0;
+  margin-left: auto;
+}
+
+.modelItemExcluded {
+  opacity: 0.6;
+  background-color: var(--bg-tertiary);
+  border-style: dashed;
+
+  .modelId {
+    text-decoration: line-through;
+    color: var(--text-tertiary);
+  }
+
+  &:hover {
+    border-color: var(--danger-color);
+  }
+}
+
+.modelExcludedBadge {
+  font-size: 10px;
+  color: var(--danger-color);
+  background-color: rgba(239, 68, 68, 0.1);
+  padding: 2px 6px;
+  border-radius: 8px;
+  border: 1px solid var(--danger-color);
+  flex-shrink: 0;
+}

src/pages/ConfigPage.module.scss

@@ -0,0 +1,263 @@
+@use '../styles/mixins' as *;
+
+.container {
+  width: 100%;
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+}
+
+.pageTitle {
+  font-size: 28px;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin: 0 0 $spacing-md 0;
+}
+
+.description {
+  font-size: 14px;
+  color: var(--text-secondary);
+  margin: 0 0 $spacing-xl 0;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-lg;
+  flex: 1;
+  min-height: 0;
+}
+
+.searchInputWrapper {
+  flex: 1;
+  position: relative;
+  display: flex;
+  align-items: center;
+
+  // The shared Input component adds a wrapper (.form-group) with margin-bottom.
+  // In the floating toolbar we want the input to be compact.
+  :global(.form-group) {
+    margin-bottom: 0;
+  }
+}
+
+.searchInput {
+  flex: 1;
+  border-radius: $radius-full !important;
+  padding-right: 132px !important;
+}
+
+.searchCount {
+  font-size: 12px;
+  color: var(--text-secondary);
+  background: var(--bg-secondary);
+  padding: 2px 8px;
+  border-radius: $radius-full;
+  pointer-events: none;
+  white-space: nowrap;
+}
+
+.searchRight {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.searchButton {
+  @include button-reset;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: $radius-full;
+  background: var(--primary-color);
+  border: 1px solid var(--primary-color);
+  color: #fff;
+  transition: background-color $transition-fast, border-color $transition-fast, opacity $transition-fast;
+
+  &:hover:not(:disabled) {
+    background: var(--primary-hover);
+    border-color: var(--primary-hover);
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}
+
+.searchActions {
+  display: flex;
+  gap: 4px;
+  flex-shrink: 0;
+
+  button {
+    min-width: 32px;
+    width: 32px;
+    height: 32px;
+    padding: 0 !important;
+    border-radius: $radius-full;
+  }
+}
+
+.controls {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: $spacing-md;
+
+  @include mobile {
+    flex-direction: column;
+    align-items: stretch;
+  }
+}
+
+.status {
+  font-size: 14px;
+  color: var(--text-secondary);
+
+  &.modified {
+    color: #f59e0b;
+  }
+
+  &.saved {
+    color: #16a34a;
+  }
+
+  &.error {
+    color: #dc2626;
+  }
+}
+
+.editorWrapper {
+  width: 100%;
+  flex: 1;
+  min-height: 800px;
+  border: 1px solid var(--border-color);
+  border-radius: $radius-lg;
+  overflow: hidden;
+  position: relative;
+  --floating-controls-height: 0px;
+
+  // Floating search toolbar on top of the editor (but not covering content).
+  .floatingControls {
+    position: absolute;
+    top: 12px;
+    left: 12px;
+    right: 12px;
+    z-index: 10;
+    display: flex;
+    align-items: center;
+    gap: $spacing-sm;
+    flex-wrap: wrap;
+    pointer-events: auto;
+  }
+
+  // CodeMirror theme overrides
+  :global {
+    .cm-editor {
+      height: 100%;
+      font-size: 14px;
+      font-family: 'Consolas', 'Monaco', 'Menlo', monospace;
+    }
+
+    .cm-scroller {
+      overflow: auto;
+      padding-top: calc(var(--floating-controls-height, 0px) + #{$spacing-md});
+      -webkit-overflow-scrolling: touch;
+      touch-action: pan-x pan-y;
+      overscroll-behavior: contain;
+    }
+
+    .cm-gutters {
+      border-right: 1px solid var(--border-color);
+      background: var(--bg-secondary);
+    }
+
+    .cm-lineNumbers .cm-gutterElement {
+      padding: 0 8px 0 12px;
+      min-width: 40px;
+      color: var(--text-muted);
+    }
+
+    .cm-activeLine {
+      background: var(--bg-hover);
+    }
+
+    .cm-activeLineGutter {
+      background: var(--bg-hover);
+    }
+
+    .cm-selectionMatch {
+      background: rgba(255, 193, 7, 0.3);
+    }
+
+    .cm-searchMatch {
+      background: rgba(255, 193, 7, 0.4);
+      outline: 1px solid rgba(255, 193, 7, 0.6);
+    }
+
+    .cm-searchMatch-selected {
+      background: rgba(255, 152, 0, 0.5);
+    }
+
+    // Dark theme adjustments
+    [data-theme='dark'] & {
+      .cm-gutters {
+        background: var(--bg-tertiary);
+      }
+
+      .cm-selectionMatch {
+        background: rgba(255, 193, 7, 0.2);
+      }
+    }
+  }
+}
+
+.configCard {
+  display: flex;
+  flex-direction: column;
+  height: 1120px;
+  flex-shrink: 0;
+  overflow: visible;
+}
+
+.actions {
+  display: flex;
+  gap: $spacing-sm;
+  justify-content: flex-end;
+
+  @include mobile {
+    justify-content: stretch;
+
+    button {
+      flex: 1;
+    }
+  }
+}
+
+@media (max-height: 820px) {
+  .pageTitle {
+    font-size: 24px;
+    margin-bottom: $spacing-sm;
+  }
+
+  .description {
+    margin-bottom: $spacing-lg;
+  }
+
+  .content {
+    gap: $spacing-md;
+  }
+
+  .configCard {
+    height: 880px;
+    padding: $spacing-md;
+  }
+
+  .editorWrapper {
+    min-height: 600px;
+  }
+}