Merge pull request #95 from router-for-me/revert-93-claude-quota

Revert "feat(ui): added claude quota display"

.github/workflows/release.yml

@@ -15,6 +15,9 @@ jobs:
     steps:
       - name: Checkout code
         uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+          fetch-tags: true
 
       - name: Setup Node.js
         uses: actions/setup-node@v4
@@ -36,27 +39,25 @@ jobs:
           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: |
-            ## CLI Proxy API Management Center - ${{ github.ref_name }}
-
-            ### Download and Usage
-            1. Download the `management.html` file
-            2. Open it directly in your browser
-            3. All assets (CSS, JavaScript, images) are bundled into this single file
-
-            ### Features
-            - Single file, no external dependencies required
-            - Complete management interface for CLI Proxy API
-            - Support for local and remote connections
-            - Multi-language support (Chinese/English)
-            - Dark/Light theme support
-
-            ---
-            🤖 Generated with GitHub Actions
+          body_path: release-notes.md
           draft: false
           prerelease: false
         env:

.gitignore

@@ -10,13 +10,18 @@ api.md
 usage.json
 CLAUDE.md
 AGENTS.md
+antigravity_usage.json
+codex_usage.json
+style.md
 
 node_modules
 dist
 dist-ssr
 *.local
+skills
 
 # Editor directories and files
+settings.local.json
 .vscode/*
 !.vscode/extensions.json
 .idea

README.md

@@ -1,190 +1,130 @@
 # CLI Proxy API Management Center
 
-A modern React-based WebUI for managing the CLI Proxy API, completely refactored with a modern tech stack for enhanced maintainability, type safety, and user experience.
+A single-file WebUI (React + TypeScript) for operating and troubleshooting the **CLI Proxy API** via its **Management API** (config, credentials, logs, and usage).
 
 [中文文档](README_CN.md)
 
-**Main Project**: https://github.com/router-for-me/CLIProxyAPI
-**Example URL**: https://remote.router-for.me/
+**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)
 
 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.
 
-## Features
+## What this is (and isn’t)
 
-### Core Capabilities
+- 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.
 
-- **Login & Authentication**: Auto-detects current address (manual override supported), encrypted auto-login with secure localStorage, session persistence
-- **Basic Settings**: Debug mode, proxy URL, request retries with custom config, quota fallback (auto-switch project/preview models), usage statistics toggle, request logging & file logging, WebSocket `/ws/*` authentication
-- **API Keys Management**: Manage proxy auth keys with add/edit/delete operations
-- **AI Providers**: Configure Gemini/Codex/Claude settings, OpenAI-compatible providers with custom base URLs/headers/proxy/model aliases, Vertex AI credential import from service-account JSON
-- **Auth Files & OAuth**: Upload/download/search/paginate JSON credentials; type filters (Qwen/Gemini/GeminiCLI/AIStudio/Claude/Codex/Antigravity/iFlow/Vertex/Empty); bulk delete; OAuth/Device flows for multiple providers
-- **Logs Viewer**: Real-time log viewer with auto-refresh, download and clear capabilities (appears when logging-to-file is enabled)
-- **Usage Analytics**: Overview cards, hourly/daily toggles, interactive charts with multiple model lines, per-API statistics table
-- **Config Management**: In-browser YAML editor for `/config.yaml` with syntax highlighting, reload/save functionality
-- **System Information**: Connection status, config cache, server version/build date, UI version in footer
+## Quick start
 
-### User Experience
+### Option A: Use the WebUI bundled in CLIProxyAPI (recommended)
 
-- **Responsive Design**: Full mobile support with collapsible sidebar
-- **Theme System**: Light/dark mode with persistent preference
-- **Internationalization**: English and Simplified Chinese (zh-CN) with seamless switching
-- **Real-time Feedback**: Toast notifications for all operations
-- **Security**: Masked secrets, encrypted local storage
+1. Start your CLI Proxy API service.
+2. Open: `http://<host>:<api_port>/management.html`
+3. Enter your **management key** and connect.
 
-## Tech Stack
+The address is auto-detected from the current page URL; manual override is supported.
 
-- **Frontend Framework**: React 19 with TypeScript
-- **Build Tool**: Vite 7 with single-file output ([vite-plugin-singlefile](https://github.com/nicknisi/vite-plugin-singlefile))
-- **State Management**: [Zustand](https://github.com/pmndrs/zustand) for global stores
-- **Routing**: React Router 7 with HashRouter
-- **HTTP Client**: Axios with interceptors for auth & error handling
-- **Internationalization**: i18next + react-i18next
-- **Styling**: SCSS with CSS Modules, CSS Variables for theming
-- **Charts**: Chart.js + react-chartjs-2
-- **Code Editor**: @uiw/react-codemirror with YAML support
-
-## Getting Started
-
-### Prerequisites
-
-- Node.js 18+ (LTS recommended)
-- npm 9+
-
-### Installation
+### Option B: Run the dev server
 
 ```bash
-# Clone the repository
-git clone https://github.com/router-for-me/Cli-Proxy-API-Management-Center.git
-cd Cli-Proxy-API-Management-Center
-
-# Install dependencies
 npm install
+npm run dev
 ```
 
-### Development
+Open `http://localhost:5173`, then connect to your CLI Proxy API instance.
+
+### Option C: Build a single HTML file
 
 ```bash
-npm run dev          # Start Vite dev server (default: http://localhost:5173)
+npm install
+npm run build
 ```
 
-### Build
+- 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`
 
-```bash
-npm run build        # TypeScript check + Vite production build
-```
+Tip: opening `dist/index.html` via `file://` may be blocked by browser CORS; serving it (preview/static server) is more reliable.
 
-The build outputs a single `dist/index.html` file with all assets inlined.
+## Connecting to the server
 
-### Other Commands
+### API address
 
-```bash
-npm run preview      # Preview production build locally
-npm run lint         # ESLint with strict mode (--max-warnings 0)
-npm run format       # Prettier formatting for src/**/*.{ts,tsx,css,scss}
-npm run type-check   # TypeScript type checking only (tsc --noEmit)
-```
+You can enter any of the following; the UI will normalize it:
 
-## Usage
+- `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)
 
-### Access Methods
+### Management key (not the same as API keys)
 
-1. **Integrated with CLI Proxy API (Recommended)**
-   After starting the CLI Proxy API service, visit `http://your-server:8317/management.html`
+The management key is sent with every request as:
 
-2. **Standalone (Built file)**
-   Open the built `dist/index.html` directly in a browser, or host it on any static file server
+- `Authorization: Bearer <MANAGEMENT_KEY>` (default)
 
-3. **Development Server**
-   Run `npm run dev` and open `http://localhost:5173`
+This is different from the proxy `api-keys` you manage inside the UI (those are for client requests to the proxy endpoints).
 
-### Initial Configuration
+### Remote management
 
-1. The login page auto-detects the current address; you can modify it if needed
-2. Enter your management key
-3. Click Connect to authenticate
-4. Credentials are encrypted and saved locally for auto-login
+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.
 
-> **Tip**: The Logs navigation item appears only after enabling "Logging to file" in Basic Settings.
+## What you can manage (mapped to the UI pages)
 
-## Project Structure
+- **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.
 
-```
-├── src/
-│   ├── components/
-│   │   ├── common/           # Shared components (NotificationContainer)
-│   │   ├── layout/           # App shell (MainLayout with sidebar)
-│   │   └── ui/               # Reusable UI primitives (Button, Input, Modal, etc.)
-│   ├── hooks/                # Custom hooks (useApi, useDebounce, usePagination, etc.)
-│   ├── i18n/
-│   │   ├── locales/          # Translation files (zh-CN.json, en.json)
-│   │   └── index.ts          # i18next configuration
-│   ├── pages/                # Route page components with co-located .module.scss
-│   ├── router/               # ProtectedRoute wrapper
-│   ├── services/
-│   │   ├── api/              # API layer (client.ts singleton, feature modules)
-│   │   └── storage/          # Secure storage utilities
-│   ├── stores/               # Zustand stores (auth, config, theme, language, notification)
-│   ├── styles/               # Global SCSS (variables, mixins, themes, components)
-│   ├── types/                # TypeScript type definitions
-│   ├── utils/                # Utility functions (constants, format, validation, etc.)
-│   ├── App.tsx               # Root component with routing
-│   └── main.tsx              # Entry point
-├── dist/                     # Build output (single-file bundle)
-├── vite.config.ts            # Vite configuration
-├── tsconfig.json             # TypeScript configuration
-└── package.json
-```
+## Build & release notes
 
-### Key Architecture Patterns
+- 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).
 
-- **Path Alias**: Use `@/` to import from `src/` (configured in vite.config.ts and tsconfig.json)
-- **API Client**: Singleton `apiClient` in `src/services/api/client.ts` with auth interceptors
-- **State Management**: Zustand stores with localStorage persistence for auth/theme/language
-- **Styling**: SCSS variables auto-injected; CSS Modules for component-scoped styles
-- **Build Output**: Single-file bundle for easy distribution (all assets inlined)
+## 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
 
-### Connection Issues
+- **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.
 
-1. Confirm the CLI Proxy API service is running
-2. Check if the API address is correct
-3. Verify that the management key is valid
-4. Ensure your firewall allows the connection
+## Development
 
-### Data Not Updating
-
-1. Click the "Refresh All" button in the header
-2. Check your network connection
-3. Open browser DevTools console for error details
-
-### Logs & Config Editor
-
-- **Logs**: Requires server-side logging-to-file enabled; 404 indicates old server version or logging disabled
-- **Config Editor**: Requires `/config.yaml` endpoint; ensure valid YAML syntax before saving
-
-### Usage Statistics
-
-- If charts are empty, enable "Usage statistics" in settings; data resets on server restart
+```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
 
-We welcome Issues and Pull Requests! Please follow these guidelines:
+Issues and PRs are welcome. Please include:
 
-1. Fork the repository
-2. Create a feature branch (`git checkout -b feature/amazing-feature`)
-3. Commit your changes with clear messages
-4. Push to your branch
-5. Open a Pull Request
-
-### Development Guidelines
-
-- Run `npm run lint` and `npm run type-check` before committing
-- Follow existing code patterns and naming conventions
-- Use TypeScript strict mode
-- Write meaningful commit messages
+- Reproduction steps (server version + UI version)
+- Screenshots for UI changes
+- Verification notes (`npm run lint`, `npm run type-check`)
 
 ## License
 
-This project is licensed under the MIT License.
+MIT

README_CN.md

@@ -1,190 +1,130 @@
 # CLI Proxy API 管理中心
 
-用于管理 CLI Proxy API 的现代化 React Web 界面，采用全新技术栈重构，提供更好的可维护性、类型安全性和用户体验。
+用于管理与排障 **CLI Proxy API** 的单文件 WebUI（React + TypeScript），通过 **Management API** 完成配置、凭据、日志与统计等运维工作。
 
 [English](README.md)
 
-**主项目**: https://github.com/router-for-me/CLIProxyAPI
-**示例地址**: https://remote.router-for.me/
+**主项目**: https://github.com/router-for-me/CLIProxyAPI  
+**示例地址**: https://remote.router-for.me/  
 **最低版本要求**: ≥ 6.3.0（推荐 ≥ 6.5.0）
 
-自 6.0.19 版本起，WebUI 已集成到主程序中，启动服务后可通过 `/management.html` 访问。
+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.
 
-## 功能特点
+## 这是什么（以及不是什么）
 
-### 核心功能
-
-- **登录与认证**: 自动检测当前地址（支持手动修改），加密自动登录，会话持久化
-- **基础设置**: 调试模式、代理 URL、请求重试配置、配额溢出自动切换项目/预览模型、使用统计开关、请求日志与文件日志、WebSocket `/ws/*` 鉴权
-- **API 密钥管理**: 管理代理认证密钥，支持添加/编辑/删除操作
-- **AI 提供商**: 配置 Gemini/Codex/Claude，OpenAI 兼容提供商（自定义 Base URL/Headers/代理/模型别名），Vertex AI 服务账号 JSON 导入
-- **认证文件与 OAuth**: 上传/下载/搜索/分页 JSON 凭据；类型筛选（Qwen/Gemini/GeminiCLI/AIStudio/Claude/Codex/Antigravity/iFlow/Vertex/Empty）；批量删除；多提供商 OAuth/设备码流程
-- **日志查看**: 实时日志查看，支持自动刷新、下载和清空（启用"写入日志文件"后显示）
-- **使用统计**: 概览卡片、小时/天切换、多模型交互式图表、按 API 统计表格
-- **配置管理**: 内置 YAML 编辑器，支持 `/config.yaml` 语法高亮、重载/保存
-- **系统信息**: 连接状态、配置缓存、服务器版本/构建时间、底栏显示 UI 版本
-
-### 用户体验
-
-- **响应式设计**: 完整移动端支持，可折叠侧边栏
-- **主题系统**: 明/暗模式切换，偏好持久化
-- **国际化**: 简体中文和英文，无缝切换
-- **实时反馈**: 所有操作的消息通知
-- **安全性**: 密钥遮蔽、加密本地存储
-
-## 技术栈
-
-- **前端框架**: React 19 + TypeScript
-- **构建工具**: Vite 7，单文件输出（[vite-plugin-singlefile](https://github.com/nicknisi/vite-plugin-singlefile)）
-- **状态管理**: [Zustand](https://github.com/pmndrs/zustand)
-- **路由**: React Router 7 (HashRouter)
-- **HTTP 客户端**: Axios，带认证和错误处理拦截器
-- **国际化**: i18next + react-i18next
-- **样式**: SCSS + CSS Modules，CSS 变量主题
-- **图表**: Chart.js + react-chartjs-2
-- **代码编辑器**: @uiw/react-codemirror（YAML 支持）
+- 本仓库只包含 Web 管理界面本身，通过 CLI Proxy API 的 **Management API**（`/v0/management`）读取/修改配置、上传凭据、查看日志与使用统计。
+- 它 **不是** 代理本体，不参与流量转发。
 
 ## 快速开始
 
-### 环境要求
+### 方式 A：使用 CLIProxyAPI 自带的 WebUI（推荐）
 
-- Node.js 18+（推荐 LTS 版本）
-- npm 9+
+1. 启动 CLI Proxy API 服务。
+2. 打开：`http://<host>:<api_port>/management.html`
+3. 输入 **管理密钥** 并连接。
 
-### 安装
+页面会根据当前地址自动推断 API 地址，也支持手动修改。
+
+### 方式 B：开发调试
 
 ```bash
-# 克隆仓库
-git clone https://github.com/router-for-me/Cli-Proxy-API-Management-Center.git
-cd Cli-Proxy-API-Management-Center
-
-# 安装依赖
 npm install
+npm run dev
 ```
 
-### 开发
+打开 `http://localhost:5173`，然后连接到你的 CLI Proxy API 实例。
+
+### 方式 C：构建单文件 HTML
 
 ```bash
-npm run dev          # 启动 Vite 开发服务器（默认: http://localhost:5173）
+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 build        # TypeScript 检查 + Vite 生产构建
+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
 ```
 
-构建输出单个 `dist/index.html` 文件，所有资源已内联。
-
-### 其他命令
-
-```bash
-npm run preview      # 本地预览生产构建
-npm run lint         # ESLint 严格模式（--max-warnings 0）
-npm run format       # Prettier 格式化 src/**/*.{ts,tsx,css,scss}
-npm run type-check   # 仅 TypeScript 类型检查（tsc --noEmit）
-```
-
-## 使用方法
-
-### 访问方式
-
-1. **与 CLI Proxy API 集成使用（推荐）**
-   启动 CLI Proxy API 服务后，访问 `http://您的服务器:8317/management.html`
-
-2. **独立使用（构建后文件）**
-   直接在浏览器打开构建的 `dist/index.html`，或部署到任意静态文件服务器
-
-3. **开发服务器**
-   运行 `npm run dev` 后打开 `http://localhost:5173`
-
-### 初始配置
-
-1. 登录页会自动检测当前地址，可根据需要修改
-2. 输入管理密钥
-3. 点击连接进行认证
-4. 凭据会加密保存到本地，下次自动登录
-
-> **提示**: 只有在"基础设置"中启用"写入日志文件"后，才会显示"日志查看"导航项。
-
-## 项目结构
-
-```
-├── src/
-│   ├── components/
-│   │   ├── common/           # 公共组件（NotificationContainer）
-│   │   ├── layout/           # 应用外壳（MainLayout 侧边栏布局）
-│   │   └── ui/               # 可复用 UI 组件（Button、Input、Modal 等）
-│   ├── hooks/                # 自定义 Hooks（useApi、useDebounce、usePagination 等）
-│   ├── i18n/
-│   │   ├── locales/          # 翻译文件（zh-CN.json、en.json）
-│   │   └── index.ts          # i18next 配置
-│   ├── pages/                # 路由页面组件，配套 .module.scss 样式
-│   ├── router/               # ProtectedRoute 路由守卫
-│   ├── services/
-│   │   ├── api/              # API 层（client.ts 单例，功能模块）
-│   │   └── storage/          # 安全存储工具
-│   ├── stores/               # Zustand 状态管理（auth、config、theme、language、notification）
-│   ├── styles/               # 全局 SCSS（variables、mixins、themes、components）
-│   ├── types/                # TypeScript 类型定义
-│   ├── utils/                # 工具函数（constants、format、validation 等）
-│   ├── App.tsx               # 根组件与路由
-│   └── main.tsx              # 入口文件
-├── dist/                     # 构建输出（单文件打包）
-├── vite.config.ts            # Vite 配置
-├── tsconfig.json             # TypeScript 配置
-└── package.json
-```
-
-### 核心架构模式
-
-- **路径别名**: 使用 `@/` 导入 `src/` 目录（在 vite.config.ts 和 tsconfig.json 中配置）
-- **API 客户端**: `src/services/api/client.ts` 单例，带认证拦截器
-- **状态管理**: Zustand stores，auth/theme/language 持久化到 localStorage
-- **样式**: SCSS 变量自动注入；CSS Modules 实现组件作用域样式
-- **构建输出**: 单文件打包，便于分发（所有资源内联）
-
-## 故障排除
-
-### 连接问题
-
-1. 确认 CLI Proxy API 服务正在运行
-2. 检查 API 地址是否正确
-3. 验证管理密钥是否有效
-4. 确认防火墙设置允许连接
-
-### 数据不更新
-
-1. 点击顶栏的"刷新全部"按钮
-2. 检查网络连接
-3. 打开浏览器开发者工具控制台查看错误信息
-
-### 日志与配置编辑
-
-- **日志**: 需要服务端启用写文件日志；返回 404 说明服务器版本过旧或未启用日志
-- **配置编辑**: 依赖 `/config.yaml` 接口；保存前请确保 YAML 语法正确
-
-### 使用统计
-
-- 若图表为空，请在设置中启用"使用统计"；数据在服务重启后会清空
-
 ## 贡献
 
-欢迎提交 Issue 和 Pull Request！请遵循以下指南：
+欢迎提 Issue 与 PR。建议附上：
 
-1. Fork 本仓库
-2. 创建功能分支（`git checkout -b feature/amazing-feature`）
-3. 提交更改，使用清晰的提交信息
-4. 推送到分支
-5. 开启 Pull Request
-
-### 开发规范
-
-- 提交前运行 `npm run lint` 和 `npm run type-check`
-- 遵循现有代码模式和命名规范
-- 使用 TypeScript 严格模式
-- 编写有意义的提交信息
+- 复现步骤（服务端版本 + UI 版本）
+- UI 改动截图
+- 验证记录（`npm run lint`、`npm run type-check`）
 
 ## 许可证
 
-本项目采用 MIT 许可证。
+MIT

index.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="zh-CN">
   <head>
     <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" />

package-lock.json

@@ -12,12 +12,14 @@
         "@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",
+        "yaml": "^2.8.2",
         "zustand": "^5.0.9"
       },
       "devDependencies": {
@@ -70,6 +72,7 @@
       "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.27.1",
         "@babel/generator": "^7.28.5",
@@ -464,6 +467,7 @@
       "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.38.8.tgz",
       "integrity": "sha512-XcE9fcnkHCbWkjeKyi0lllwXmBLtyYb5dt89dJyx23I9+LSh5vZDIuk7OLG4VM1lgrXZQcY6cxyZyk5WVPRv/A==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@codemirror/state": "^6.5.0",
         "crelt": "^1.0.6",
@@ -1239,6 +1243,18 @@
       "integrity": "sha512-l0h88YhZFyKdXIFNfSWpyjStDjGHwZ/U7iobcK1cQQD8sejsONdQtTVU+1wVN1PBw40PiiHB1vA5S7VTfQiP9g==",
       "license": "MIT"
     },
+    "node_modules/@openai/codex": {
+      "version": "0.98.0",
+      "resolved": "https://registry.npmjs.org/@openai/codex/-/codex-0.98.0.tgz",
+      "integrity": "sha512-CKjrhAmzTvWn7Vbsi27iZRKBAJw9a7ZTTkWQDbLgQZP1weGbDIBk1r6wiLEp1ZmDO7w0fHPLYgnVspiOrYgcxg==",
+      "license": "Apache-2.0",
+      "bin": {
+        "codex": "bin/codex.js"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
     "node_modules/@parcel/watcher": {
       "version": "2.5.1",
       "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.5.1.tgz",
@@ -1929,6 +1945,7 @@
       "integrity": "sha512-MWtvHrGZLFttgeEj28VXHxpmwYbor/ATPYbBfSFZEIRK0ecCFLl2Qo55z52Hss+UV9CRN7trSeq1zbgx7YDWWg==",
       "devOptional": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "csstype": "^3.2.2"
       }
@@ -2016,6 +2033,7 @@
       "integrity": "sha512-PC0PDZfJg8sP7cmKe6L3QIL8GZwU5aRvUFedqSIpw3B+QjRSUZeeITC2M5XKeMXEzL6wccN196iy3JLwKNvDVA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.48.1",
         "@typescript-eslint/types": "8.48.1",
@@ -2333,6 +2351,7 @@
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -2544,6 +2563,7 @@
       "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.5.1.tgz",
       "integrity": "sha512-GIjfiT9dbmHRiYi6Nl2yFCq7kkwdkp1W/lp2J99rX0yo9tgJGn3lKQATztIjb5tVtevcBtIdICNWqlq5+E8/Pw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@kurkle/color": "^0.3.0"
       },
@@ -2808,6 +2828,7 @@
       "integrity": "sha512-BhHmn2yNOFA9H9JmmIVKJmd288g9hrVRDkdoIgRCRuSySRUHH7r/DI6aAXW9T1WwUuY3DFgrcaqB+deURBLR5g==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -3194,6 +3215,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/gsap": {
+      "version": "3.14.2",
+      "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.14.2.tgz",
+      "integrity": "sha512-P8/mMxVLU7o4+55+1TCnQrPmgjPKnwkzkXOK1asnR9Jg2lna4tEY5qBJjMmAaOBDDZWtlRjBXjLa0w53G/uBLA==",
+      "license": "Standard 'no charge' license: https://gsap.com/standard-license."
+    },
     "node_modules/has-flag": {
       "version": "4.0.0",
       "dev": true,
@@ -3278,6 +3305,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.28.4"
       },
@@ -3607,6 +3635,7 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -3713,6 +3742,7 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.2.1.tgz",
       "integrity": "sha512-DGrYcCWK7tvYMnWh79yrPHt+vdx9tY+1gPZa7nJQtO/p8bLTDaHp4dzwEhQB7pZ4Xe3ok4XKuEPrVuc+wlpkmw==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -3730,6 +3760,7 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.1.tgz",
       "integrity": "sha512-ibrK8llX2a4eOskq1mXKu/TGZj9qzomO+sNfO98M6d9zIPOEhlBkMkBUBLd1vgS0gQsLDBzA+8jJBVXDnfHmJg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "scheduler": "^0.27.0"
       },
@@ -3773,9 +3804,9 @@
       }
     },
     "node_modules/react-router": {
-      "version": "7.10.1",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.10.1.tgz",
-      "integrity": "sha512-gHL89dRa3kwlUYtRQ+m8NmxGI6CgqN+k4XyGjwcFoQwwCWF6xXpOCUlDovkXClS0d0XJN/5q7kc5W3kiFEd0Yw==",
+      "version": "7.12.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.12.0.tgz",
+      "integrity": "sha512-kTPDYPFzDVGIIGNLS5VJykK0HfHLY5MF3b+xj0/tTyNYL1gF1qs7u67Z9jEhQk2sQ98SUaHxlG31g1JtF7IfVw==",
       "license": "MIT",
       "dependencies": {
         "cookie": "^1.0.1",
@@ -3795,12 +3826,12 @@
       }
     },
     "node_modules/react-router-dom": {
-      "version": "7.10.1",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.10.1.tgz",
-      "integrity": "sha512-JNBANI6ChGVjA5bwsUIwJk7LHKmqB4JYnYfzFwyp2t12Izva11elds2jx7Yfoup2zssedntwU0oZ5DEmk5Sdaw==",
+      "version": "7.12.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.12.0.tgz",
+      "integrity": "sha512-pfO9fiBcpEfX4Tx+iTYKDtPbrSLLCbwJ5EqP+SPYQu1VYCXdy79GSj0wttR0U4cikVdlImZuEZ/9ZNCgoaxwBA==",
       "license": "MIT",
       "dependencies": {
-        "react-router": "7.10.1"
+        "react-router": "7.12.0"
       },
       "engines": {
         "node": ">=20.0.0"
@@ -3838,6 +3869,7 @@
       "integrity": "sha512-w8GmOxZfBmKknvdXU1sdM9NHcoQejwF/4mNgj2JuEEdRaHwwF12K7e9eXn1nLZ07ad+du76mkVsyeb2rKGllsA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/estree": "1.0.8"
       },
@@ -4020,6 +4052,7 @@
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "devOptional": true,
       "license": "Apache-2.0",
+      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -4096,6 +4129,7 @@
       "integrity": "sha512-tI2l/nFHC5rLh7+5+o7QjKjSR04ivXDF4jcgV0f/bTQ+OJiITy5S6gaynVsEM+7RqzufMnVbIon6Sr5x1SDYaQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "esbuild": "^0.25.0",
         "fdir": "^6.5.0",
@@ -4220,6 +4254,22 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/yaml": {
+      "version": "2.8.2",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.2.tgz",
+      "integrity": "sha512-mplynKqc1C2hTVYxd0PU2xQAc22TI1vShAYGksCCfxbn/dFwnHTNi1bvYsBTkhdUNtGIf5xNOg938rrSSYvS9A==",
+      "license": "ISC",
+      "peer": true,
+      "bin": {
+        "yaml": "bin.mjs"
+      },
+      "engines": {
+        "node": ">= 14.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/eemeli"
+      }
+    },
     "node_modules/yocto-queue": {
       "version": "0.1.0",
       "dev": true,
@@ -4237,6 +4287,7 @@
       "integrity": "sha512-AvvthqfqrAhNH9dnfmrfKzX5upOdjUVJYFqNSlkmGf64gRaTzlPwz99IHYnVs28qYAybvAlBV+H7pn0saFY4Ig==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }

package.json

@@ -7,7 +7,7 @@
     "dev": "vite",
     "build": "tsc && vite build",
     "preview": "vite preview",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives",
     "format": "prettier --write \"src/**/*.{ts,tsx,css,scss}\"",
     "type-check": "tsc --noEmit"
   },
@@ -16,12 +16,14 @@
     "@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",
+    "yaml": "^2.8.2",
     "zustand": "^5.0.9"
   },
   "devDependencies": {

src/App.tsx

@@ -1,61 +1,45 @@
 import { useEffect } from 'react';
-import { HashRouter, Navigate, Route, Routes } from 'react-router-dom';
+import { HashRouter, Route, Routes } from 'react-router-dom';
 import { LoginPage } from '@/pages/LoginPage';
-import { SettingsPage } from '@/pages/SettingsPage';
-import { ApiKeysPage } from '@/pages/ApiKeysPage';
-import { AiProvidersPage } from '@/pages/AiProvidersPage';
-import { AuthFilesPage } from '@/pages/AuthFilesPage';
-import { OAuthPage } from '@/pages/OAuthPage';
-import { UsagePage } from '@/pages/UsagePage';
-import { ConfigPage } from '@/pages/ConfigPage';
-import { LogsPage } from '@/pages/LogsPage';
-import { SystemPage } from '@/pages/SystemPage';
 import { NotificationContainer } from '@/components/common/NotificationContainer';
+import { ConfirmationModal } from '@/components/common/ConfirmationModal';
 import { MainLayout } from '@/components/layout/MainLayout';
 import { ProtectedRoute } from '@/router/ProtectedRoute';
-import { useAuthStore, useLanguageStore, useThemeStore } from '@/stores';
+import { useLanguageStore, useThemeStore } from '@/stores';
 
 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);
 
   useEffect(() => {
-    initializeTheme();
-    restoreSession();
-  }, [initializeTheme, restoreSession]);
+    const cleanupTheme = initializeTheme();
+    return cleanupTheme;
+  }, [initializeTheme]);
 
   useEffect(() => {
     setLanguage(language);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []); // 仅用于首屏同步 i18n 语言
 
+  useEffect(() => {
+    document.documentElement.lang = language;
+  }, [language]);
+
   return (
     <HashRouter>
       <NotificationContainer />
+      <ConfirmationModal />
       <Routes>
         <Route path="/login" element={<LoginPage />} />
         <Route
-          path="/"
+          path="/*"
           element={
             <ProtectedRoute>
               <MainLayout />
             </ProtectedRoute>
           }
-        >
-          <Route index element={<Navigate to="/settings" replace />} />
-          <Route path="settings" element={<SettingsPage />} />
-          <Route path="api-keys" element={<ApiKeysPage />} />
-          <Route path="ai-providers" element={<AiProvidersPage />} />
-          <Route path="auth-files" element={<AuthFilesPage />} />
-          <Route path="oauth" element={<OAuthPage />} />
-          <Route path="usage" element={<UsagePage />} />
-          <Route path="config" element={<ConfigPage />} />
-          <Route path="logs" element={<LogsPage />} />
-          <Route path="system" element={<SystemPage />} />
-          <Route path="*" element={<Navigate to="/settings" replace />} />
-        </Route>
+        />
       </Routes>
     </HashRouter>
   );

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/codex_drak.svg

@@ -0,0 +1,25 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="256.000000pt" height="256.000000pt" viewBox="0 0 256.000000 256.000000"
+ preserveAspectRatio="xMidYMid meet">
+
+<g transform="translate(0.000000,256.000000) scale(0.100000,-0.100000)"
+fill="#FFFFFF" stroke="none">
+<path d="M1107 2290 c-316 -57 -615 -283 -748 -565 -68 -144 -91 -241 -96
+-406 -6 -156 7 -249 49 -374 87 -254 291 -478 542 -596 146 -68 226 -84 426
+-84 152 0 186 3 260 23 182 50 327 136 465 277 147 150 245 334 282 529 23
+123 14 344 -20 456 -35 116 -69 190 -134 290 -131 200 -340 354 -578 426 -78
+23 -111 27 -245 30 -85 1 -177 -1 -203 -6z m362 -216 c91 -21 224 -86 310
+-152 133 -101 249 -275 293 -439 16 -60 21 -108 21 -203 0 -152 -21 -240 -88
+-368 -130 -253 -350 -407 -634 -443 -393 -50 -777 214 -882 607 -30 110 -30
+296 0 408 72 270 282 489 552 576 130 41 287 47 428 14z"/>
+<path d="M849 1637 c-31 -24 -52 -67 -46 -95 3 -15 35 -78 71 -139 36 -61 66
+-115 66 -119 0 -5 -30 -58 -66 -119 -36 -60 -68 -123 -70 -140 -7 -42 26 -90
+70 -105 31 -10 42 -9 72 7 31 15 51 43 125 173 93 162 101 188 73 243 -50 97
+-169 289 -185 297 -25 14 -91 12 -110 -3z"/>
+<path d="M1353 1139 c-42 -12 -73 -53 -73 -96 0 -27 8 -43 35 -70 l34 -34 216
+3 217 3 30 34 c26 29 29 40 25 73 -7 49 -29 75 -76 88 -45 12 -364 12 -408 -1z"/>
+</g>
+</svg>

src/assets/icons/codex_light.svg

@@ -0,0 +1,25 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="256.000000pt" height="256.000000pt" viewBox="0 0 256.000000 256.000000"
+ preserveAspectRatio="xMidYMid meet">
+
+<g transform="translate(0.000000,256.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M1107 2290 c-316 -57 -615 -283 -748 -565 -68 -144 -91 -241 -96
+-406 -6 -156 7 -249 49 -374 87 -254 291 -478 542 -596 146 -68 226 -84 426
+-84 152 0 186 3 260 23 182 50 327 136 465 277 147 150 245 334 282 529 23
+123 14 344 -20 456 -35 116 -69 190 -134 290 -131 200 -340 354 -578 426 -78
+23 -111 27 -245 30 -85 1 -177 -1 -203 -6z m362 -216 c91 -21 224 -86 310
+-152 133 -101 249 -275 293 -439 16 -60 21 -108 21 -203 0 -152 -21 -240 -88
+-368 -130 -253 -350 -407 -634 -443 -393 -50 -777 214 -882 607 -30 110 -30
+296 0 408 72 270 282 489 552 576 130 41 287 47 428 14z"/>
+<path d="M849 1637 c-31 -24 -52 -67 -46 -95 3 -15 35 -78 71 -139 36 -61 66
+-115 66 -119 0 -5 -30 -58 -66 -119 -36 -60 -68 -123 -70 -140 -7 -42 26 -90
+70 -105 31 -10 42 -9 72 7 31 15 51 43 125 173 93 162 101 188 73 243 -50 97
+-169 289 -185 297 -25 14 -91 12 -110 -3z"/>
+<path d="M1353 1139 c-42 -12 -73 -53 -73 -96 0 -27 8 -43 35 -70 l34 -34 216
+3 217 3 30 34 c26 29 29 40 25 73 -7 49 -29 75 -76 88 -45 12 -364 12 -408 -1z"/>
+</g>
+</svg>

src/assets/icons/deepseek.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>DeepSeek</title><path d="M23.748 4.482c-.254-.124-.364.113-.512.234-.051.039-.094.09-.137.136-.372.397-.806.657-1.373.626-.829-.046-1.537.214-2.163.848-.133-.782-.575-1.248-1.247-1.548-.352-.156-.708-.311-.955-.65-.172-.241-.219-.51-.305-.774-.055-.16-.11-.323-.293-.35-.2-.031-.278.136-.356.276-.313.572-.434 1.202-.422 1.84.027 1.436.633 2.58 1.838 3.393.137.093.172.187.129.323-.082.28-.18.552-.266.833-.055.179-.137.217-.329.14a5.526 5.526 0 01-1.736-1.18c-.857-.828-1.631-1.742-2.597-2.458a11.365 11.365 0 00-.689-.471c-.985-.957.13-1.743.388-1.836.27-.098.093-.432-.779-.428-.872.004-1.67.295-2.687.684a3.055 3.055 0 01-.465.137 9.597 9.597 0 00-2.883-.102c-1.885.21-3.39 1.102-4.497 2.623C.082 8.606-.231 10.684.152 12.85c.403 2.284 1.569 4.175 3.36 5.653 1.858 1.533 3.997 2.284 6.438 2.14 1.482-.085 3.133-.284 4.994-1.86.47.234.962.327 1.78.397.63.059 1.236-.03 1.705-.128.735-.156.684-.837.419-.961-2.155-1.004-1.682-.595-2.113-.926 1.096-1.296 2.746-2.642 3.392-7.003.05-.347.007-.565 0-.845-.004-.17.035-.237.23-.256a4.173 4.173 0 001.545-.475c1.396-.763 1.96-2.015 2.093-3.517.02-.23-.004-.467-.247-.588zM11.581 18c-2.089-1.642-3.102-2.183-3.52-2.16-.392.024-.321.471-.235.763.09.288.207.486.371.739.114.167.192.416-.113.603-.673.416-1.842-.14-1.897-.167-1.361-.802-2.5-1.86-3.301-3.307-.774-1.393-1.224-2.887-1.298-4.482-.02-.386.093-.522.477-.592a4.696 4.696 0 011.529-.039c2.132.312 3.946 1.265 5.468 2.774.868.86 1.525 1.887 2.202 2.891.72 1.066 1.494 2.082 2.48 2.914.348.292.625.514.891.677-.802.09-2.14.11-3.054-.614zm1-6.44a.306.306 0 01.415-.287.302.302 0 01.2.288.306.306 0 01-.31.307.303.303 0 01-.304-.308zm3.11 1.596c-.2.081-.399.151-.59.16a1.245 1.245 0 01-.798-.254c-.274-.23-.47-.358-.552-.758a1.73 1.73 0 01.016-.588c.07-.327-.008-.537-.239-.727-.187-.156-.426-.199-.688-.199a.559.559 0 01-.254-.078c-.11-.054-.2-.19-.114-.358.028-.054.16-.186.192-.21.356-.202.767-.136 1.146.016.352.144.618.408 1.001.782.391.451.462.576.685.914.176.265.336.537.445.848.067.195-.019.354-.25.452z" fill="#4D6BFE"></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/glm.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>Zhipu</title><path d="M11.991 23.503a.24.24 0 00-.244.248.24.24 0 00.244.249.24.24 0 00.245-.249.24.24 0 00-.22-.247l-.025-.001zM9.671 5.365a1.697 1.697 0 011.099 2.132l-.071.172-.016.04-.018.054c-.07.16-.104.32-.104.498-.035.71.47 1.279 1.186 1.314h.366c1.309.053 2.338 1.173 2.286 2.523-.052 1.332-1.152 2.38-2.478 2.327h-.174c-.715.018-1.274.64-1.239 1.368 0 .124.018.23.053.337.209.373.54.658.96.8.75.23 1.517-.125 1.9-.782l.018-.035c.402-.64 1.17-.96 1.92-.711.854.284 1.378 1.226 1.099 2.167a1.661 1.661 0 01-2.077 1.102 1.711 1.711 0 01-.907-.711l-.017-.035c-.2-.323-.463-.58-.851-.711l-.056-.018a1.646 1.646 0 00-1.954.746 1.66 1.66 0 01-1.065.764 1.677 1.677 0 01-1.989-1.279c-.209-.906.332-1.83 1.257-2.043a1.51 1.51 0 01.296-.035h.018c.68-.071 1.151-.622 1.116-1.333a1.307 1.307 0 00-.227-.693 2.515 2.515 0 01-.366-1.403 2.39 2.39 0 01.366-1.208c.14-.195.21-.444.227-.693.018-.71-.506-1.261-1.186-1.332l-.07-.018a1.43 1.43 0 01-.299-.07l-.05-.019a1.7 1.7 0 01-1.047-2.114 1.68 1.68 0 012.094-1.101zm-5.575 10.11c.26-.264.639-.367.994-.27.355.096.633.379.728.74.095.362-.007.748-.267 1.013-.402.41-1.053.41-1.455 0a1.062 1.062 0 010-1.482zm14.845-.294c.359-.09.738.024.992.297.254.274.344.665.237 1.025-.107.36-.396.634-.756.718-.551.128-1.1-.22-1.23-.781a1.05 1.05 0 01.757-1.26zm-.064-4.39c.314.32.49.753.49 1.206 0 .452-.176.886-.49 1.206-.315.32-.74.5-1.185.5-.444 0-.87-.18-1.184-.5a1.727 1.727 0 010-2.412 1.654 1.654 0 012.369 0zm-11.243.163c.364.484.447 1.128.218 1.691a1.665 1.665 0 01-2.188.923c-.855-.36-1.26-1.358-.907-2.228a1.68 1.68 0 011.33-1.038c.593-.08 1.183.169 1.547.652zm11.545-4.221c.368 0 .708.2.892.524.184.324.184.724 0 1.048a1.026 1.026 0 01-.892.524c-.568 0-1.03-.47-1.03-1.048 0-.579.462-1.048 1.03-1.048zm-14.358 0c.368 0 .707.2.891.524.184.324.184.724 0 1.048a1.026 1.026 0 01-.891.524c-.569 0-1.03-.47-1.03-1.048 0-.579.461-1.048 1.03-1.048zm10.031-1.475c.925 0 1.675.764 1.675 1.706s-.75 1.705-1.675 1.705-1.674-.763-1.674-1.705c0-.942.75-1.706 1.674-1.706zm-2.626-.684c.362-.082.653-.356.761-.718a1.062 1.062 0 00-.238-1.028 1.017 1.017 0 00-.996-.294c-.547.14-.881.7-.752 1.257.13.558.675.907 1.225.783zm0 16.876c.359-.087.644-.36.75-.72a1.062 1.062 0 00-.237-1.019 1.018 1.018 0 00-.985-.301 1.037 1.037 0 00-.762.717c-.108.361-.017.754.239 1.028.245.263.606.377.953.305l.043-.01zM17.19 3.5a.631.631 0 00.628-.64c0-.355-.279-.64-.628-.64a.631.631 0 00-.628.64c0 .355.28.64.628.64zm-10.38 0a.631.631 0 00.628-.64c0-.355-.28-.64-.628-.64a.631.631 0 00-.628.64c0 .355.279.64.628.64zm-5.182 7.852a.631.631 0 00-.628.64c0 .354.28.639.628.639a.63.63 0 00.627-.606l.001-.034a.62.62 0 00-.628-.64zm5.182 9.13a.631.631 0 00-.628.64c0 .355.279.64.628.64a.631.631 0 00.628-.64c0-.355-.28-.64-.628-.64zm10.38.018a.631.631 0 00-.628.64c0 .355.28.64.628.64a.631.631 0 00.628-.64c0-.355-.279-.64-.628-.64zm5.182-9.148a.631.631 0 00-.628.64c0 .354.279.639.628.639a.631.631 0 00.628-.64c0-.355-.28-.64-.628-.64zm-.384-4.992a.24.24 0 00.244-.249.24.24 0 00-.244-.249.24.24 0 00-.244.249c0 .142.122.249.244.249zM11.991.497a.24.24 0 00.245-.248A.24.24 0 0011.99 0a.24.24 0 00-.244.249c0 .133.108.236.223.247l.021.001zM2.011 6.36a.24.24 0 00.245-.249.24.24 0 00-.244-.249.24.24 0 00-.244.249.24.24 0 00.244.249zm0 11.263a.24.24 0 00-.243.248.24.24 0 00.244.249.24.24 0 00.244-.249.252.252 0 00-.244-.248zm19.995-.018a.24.24 0 00-.245.248.24.24 0 00.245.25.24.24 0 00.244-.25.252.252 0 00-.244-.248z" fill="#3859FF" fill-rule="nonzero"></path></svg>

src/assets/icons/grok.svg

@@ -0,0 +1 @@
+<svg fill="currentColor" 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>Grok</title><path d="M9.27 15.29l7.978-5.897c.391-.29.95-.177 1.137.272.98 2.369.542 5.215-1.41 7.169-1.951 1.954-4.667 2.382-7.149 1.406l-2.711 1.257c3.889 2.661 8.611 2.003 11.562-.953 2.341-2.344 3.066-5.539 2.388-8.42l.006.007c-.983-4.232.242-5.924 2.75-9.383.06-.082.12-.164.179-.248l-3.301 3.305v-.01L9.267 15.292M7.623 16.723c-2.792-2.67-2.31-6.801.071-9.184 1.761-1.763 4.647-2.483 7.166-1.425l2.705-1.25a7.808 7.808 0 00-1.829-1A8.975 8.975 0 005.984 5.83c-2.533 2.536-3.33 6.436-1.962 9.764 1.022 2.487-.653 4.246-2.34 6.022-.599.63-1.199 1.259-1.682 1.925l7.62-6.815"></path></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/kimi-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>Kimi</title><path d="M19.738 5.776c.163-.209.306-.4.457-.585.07-.087.064-.153-.004-.244-.655-.861-.717-1.817-.34-2.787.283-.73.909-1.072 1.674-1.145.477-.045.945.004 1.379.236.57.305.902.77 1.01 1.412.086.512.07 1.012-.075 1.508-.257.878-.888 1.333-1.753 1.448-.718.096-1.446.108-2.17.157-.056.004-.113 0-.178 0z" fill="#FFFFFF"></path><path d="M17.962 1.844h-4.326l-3.425 7.81H5.369V1.878H1.5V22h3.87v-8.477h6.824a3.025 3.025 0 002.743-1.75V22h3.87v-8.477a3.87 3.87 0 00-3.588-3.86v-.01h-2.125a3.94 3.94 0 002.323-2.12l2.545-5.689z"></path></svg>

src/assets/icons/kimi-light.svg

@@ -0,0 +1 @@
+<svg fill="currentColor" 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>Kimi</title><path d="M19.738 5.776c.163-.209.306-.4.457-.585.07-.087.064-.153-.004-.244-.655-.861-.717-1.817-.34-2.787.283-.73.909-1.072 1.674-1.145.477-.045.945.004 1.379.236.57.305.902.77 1.01 1.412.086.512.07 1.012-.075 1.508-.257.878-.888 1.333-1.753 1.448-.718.096-1.446.108-2.17.157-.056.004-.113 0-.178 0z" fill="#027AFF"></path><path d="M17.962 1.844h-4.326l-3.425 7.81H5.369V1.878H1.5V22h3.87v-8.477h6.824a3.025 3.025 0 002.743-1.75V22h3.87v-8.477a3.87 3.87 0 00-3.588-3.86v-.01h-2.125a3.94 3.94 0 002.323-2.12l2.545-5.689z"></path></svg>

src/assets/icons/minimax.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>Minimax</title><defs><linearGradient id="lobe-icons-minimax-fill" x1="0%" x2="100.182%" y1="50.057%" y2="50.057%"><stop offset="0%" stop-color="#E2167E"></stop><stop offset="100%" stop-color="#FE603C"></stop></linearGradient></defs><path d="M16.278 2c1.156 0 2.093.927 2.093 2.07v12.501a.74.74 0 00.744.709.74.74 0 00.743-.709V9.099a2.06 2.06 0 012.071-2.049A2.06 2.06 0 0124 9.1v6.561a.649.649 0 01-.652.645.649.649 0 01-.653-.645V9.1a.762.762 0 00-.766-.758.762.762 0 00-.766.758v7.472a2.037 2.037 0 01-2.048 2.026 2.037 2.037 0 01-2.048-2.026v-12.5a.785.785 0 00-.788-.753.785.785 0 00-.789.752l-.001 15.904A2.037 2.037 0 0113.441 22a2.037 2.037 0 01-2.048-2.026V18.04c0-.356.292-.645.652-.645.36 0 .652.289.652.645v1.934c0 .263.142.506.372.638.23.131.514.131.744 0a.734.734 0 00.372-.638V4.07c0-1.143.937-2.07 2.093-2.07zm-5.674 0c1.156 0 2.093.927 2.093 2.07v11.523a.648.648 0 01-.652.645.648.648 0 01-.652-.645V4.07a.785.785 0 00-.789-.78.785.785 0 00-.789.78v14.013a2.06 2.06 0 01-2.07 2.048 2.06 2.06 0 01-2.071-2.048V9.1a.762.762 0 00-.766-.758.762.762 0 00-.766.758v3.8a2.06 2.06 0 01-2.071 2.049A2.06 2.06 0 010 12.9v-1.378c0-.357.292-.646.652-.646.36 0 .653.29.653.646V12.9c0 .418.343.757.766.757s.766-.339.766-.757V9.099a2.06 2.06 0 012.07-2.048 2.06 2.06 0 012.071 2.048v8.984c0 .419.343.758.767.758.423 0 .766-.339.766-.758V4.07c0-1.143.937-2.07 2.093-2.07z" fill="url(#lobe-icons-minimax-fill)" fill-rule="nonzero"></path></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/components/common/ConfirmationModal.tsx

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

src/components/common/PageTransition.scss

@@ -0,0 +1,54 @@
+@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;
+    background: var(--bg-secondary);
+    backface-visibility: hidden;
+    transform: translateZ(0);
+
+    // During animation, exit layer uses absolute positioning
+    &--exit {
+      position: absolute;
+      inset: 0;
+      overflow: hidden;
+      pointer-events: none;
+      will-change: transform, opacity;
+    }
+
+    &--stacked {
+      display: none;
+
+      // Keep the previous layer rendered (but invisible) to avoid a blank flash when popping back.
+      // Older stacked layers remain `display: none` for performance.
+      &.page-transition__layer--stacked-keep {
+        display: flex;
+        position: absolute;
+        inset: 0;
+        overflow: hidden;
+        pointer-events: none;
+        opacity: 0;
+        will-change: transform, opacity;
+      }
+    }
+  }
+
+  &--animating &__layer {
+    will-change: transform, opacity;
+  }
+
+  &--animating &__layer:not(.page-transition__layer--exit):not(.page-transition__layer--stacked) {
+    position: relative;
+  }
+}

src/components/common/PageTransition.tsx

@@ -0,0 +1,393 @@
+import {
+  ReactNode,
+  createContext,
+  useCallback,
+  useContext,
+  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;
+  getTransitionVariant?: (fromPathname: string, toPathname: string) => TransitionVariant;
+  scrollContainerRef?: React.RefObject<HTMLElement | null>;
+}
+
+const VERTICAL_TRANSITION_DURATION = 0.35;
+const VERTICAL_TRAVEL_DISTANCE = 60;
+const IOS_TRANSITION_DURATION = 0.42;
+const IOS_ENTER_FROM_X_PERCENT = 100;
+const IOS_EXIT_TO_X_PERCENT_FORWARD = -30;
+const IOS_EXIT_TO_X_PERCENT_BACKWARD = 100;
+const IOS_ENTER_FROM_X_PERCENT_BACKWARD = -30;
+const IOS_EXIT_DIM_OPACITY = 0.72;
+
+type LayerStatus = 'current' | 'exiting' | 'stacked';
+
+type Layer = {
+  key: string;
+  location: Location;
+  status: LayerStatus;
+};
+
+type TransitionDirection = 'forward' | 'backward';
+
+type TransitionVariant = 'vertical' | 'ios';
+
+type PageTransitionLayerContextValue = {
+  status: LayerStatus;
+};
+
+const PageTransitionLayerContext = createContext<PageTransitionLayerContextValue | null>(null);
+
+export function usePageTransitionLayer() {
+  return useContext(PageTransitionLayerContext);
+}
+
+export function PageTransition({
+  render,
+  getRouteOrder,
+  getTransitionVariant,
+  scrollContainerRef,
+}: PageTransitionProps) {
+  const location = useLocation();
+  const currentLayerRef = useRef<HTMLDivElement>(null);
+  const exitingLayerRef = useRef<HTMLDivElement>(null);
+  const transitionDirectionRef = useRef<TransitionDirection>('forward');
+  const transitionVariantRef = useRef<TransitionVariant>('vertical');
+  const exitScrollOffsetRef = useRef(0);
+  const enterScrollOffsetRef = useRef(0);
+  const scrollPositionsRef = useRef(new Map<string, number>());
+  const nextLayersRef = useRef<Layer[] | null>(null);
+
+  const [isAnimating, setIsAnimating] = useState(false);
+  const [layers, setLayers] = useState<Layer[]>(() => [
+    {
+      key: location.key,
+      location,
+      status: 'current',
+    },
+  ]);
+  const currentLayer =
+    layers.find((layer) => layer.status === 'current') ?? layers[layers.length - 1];
+  const currentLayerKey = currentLayer?.key ?? location.key;
+  const currentLayerPathname = currentLayer?.location.pathname;
+
+  const resolveScrollContainer = useCallback(() => {
+    if (scrollContainerRef?.current) return scrollContainerRef.current;
+    if (typeof document === 'undefined') return null;
+    return document.scrollingElement as HTMLElement | null;
+  }, [scrollContainerRef]);
+
+  useLayoutEffect(() => {
+    if (isAnimating) return;
+    if (location.key === currentLayerKey) return;
+    if (currentLayerPathname === location.pathname) return;
+    const scrollContainer = resolveScrollContainer();
+    const exitScrollOffset = scrollContainer?.scrollTop ?? 0;
+    exitScrollOffsetRef.current = exitScrollOffset;
+    scrollPositionsRef.current.set(currentLayerKey, exitScrollOffset);
+
+    enterScrollOffsetRef.current = scrollPositionsRef.current.get(location.key) ?? 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 nextVariant: TransitionVariant = getTransitionVariant
+      ? getTransitionVariant(currentLayerPathname ?? '', location.pathname)
+      : 'vertical';
+
+    let nextDirection: TransitionDirection =
+      fromIndex === null || toIndex === null || fromIndex === toIndex
+        ? 'forward'
+        : toIndex > fromIndex
+          ? 'forward'
+          : 'backward';
+
+    // When using iOS-style stacking, history POP within the same "section" can have equal route order.
+    // In that case, prefer treating navigation to an existing layer as a backward (pop) transition.
+    if (nextVariant === 'ios' && layers.some((layer) => layer.key === location.key)) {
+      nextDirection = 'backward';
+    }
+
+    transitionDirectionRef.current = nextDirection;
+    transitionVariantRef.current = nextVariant;
+
+    const shouldSkipExitLayer = (() => {
+      if (nextVariant !== 'ios' || nextDirection !== 'backward') return false;
+      const normalizeSegments = (pathname: string) =>
+        pathname
+          .split('/')
+          .filter(Boolean)
+          .filter((segment) => segment.length > 0);
+      const fromSegments = normalizeSegments(currentLayerPathname ?? '');
+      const toSegments = normalizeSegments(location.pathname);
+      if (!fromSegments.length || !toSegments.length) return false;
+      return fromSegments[0] === toSegments[0] && toSegments.length === 1;
+    })();
+
+    setLayers((prev) => {
+      const variant = transitionVariantRef.current;
+      const direction = transitionDirectionRef.current;
+      const previousCurrentIndex = prev.findIndex((layer) => layer.status === 'current');
+      const resolvedCurrentIndex =
+        previousCurrentIndex >= 0 ? previousCurrentIndex : prev.length - 1;
+      const previousCurrent = prev[resolvedCurrentIndex];
+      const previousStack: Layer[] = prev
+        .filter((_, idx) => idx !== resolvedCurrentIndex)
+        .map((layer): Layer => ({ ...layer, status: 'stacked' }));
+
+      const nextCurrent: Layer = { key: location.key, location, status: 'current' };
+
+      if (!previousCurrent) {
+        nextLayersRef.current = [nextCurrent];
+        return [nextCurrent];
+      }
+
+      if (variant === 'ios') {
+        if (direction === 'forward') {
+          const exitingLayer: Layer = { ...previousCurrent, status: 'exiting' };
+          const stackedLayer: Layer = { ...previousCurrent, status: 'stacked' };
+
+          nextLayersRef.current = [...previousStack, stackedLayer, nextCurrent];
+          return [...previousStack, exitingLayer, nextCurrent];
+        }
+
+        const targetIndex = prev.findIndex((layer) => layer.key === location.key);
+        if (targetIndex !== -1) {
+          const targetStack: Layer[] = prev
+            .slice(0, targetIndex + 1)
+            .map((layer, idx): Layer => {
+              const isTarget = idx === targetIndex;
+              return {
+                ...layer,
+                location: isTarget ? location : layer.location,
+                status: isTarget ? 'current' : 'stacked',
+              };
+            });
+
+          if (shouldSkipExitLayer) {
+            nextLayersRef.current = targetStack;
+            return targetStack;
+          }
+
+          const exitingLayer: Layer = { ...previousCurrent, status: 'exiting' };
+          nextLayersRef.current = targetStack;
+          return [...targetStack, exitingLayer];
+        }
+      }
+
+      if (shouldSkipExitLayer) {
+        nextLayersRef.current = [nextCurrent];
+        return [nextCurrent];
+      }
+
+      const exitingLayer: Layer = { ...previousCurrent, status: 'exiting' };
+
+      nextLayersRef.current = [nextCurrent];
+      return [exitingLayer, nextCurrent];
+    });
+    setIsAnimating(true);
+  }, [
+    isAnimating,
+    location,
+    currentLayerKey,
+    currentLayerPathname,
+    getRouteOrder,
+    getTransitionVariant,
+    resolveScrollContainer,
+    layers,
+  ]);
+
+  // Run GSAP animation when animating starts
+  useLayoutEffect(() => {
+    if (!isAnimating) return;
+
+    if (!currentLayerRef.current) return;
+
+    const currentLayerEl = currentLayerRef.current;
+    const exitingLayerEl = exitingLayerRef.current;
+    const transitionVariant = transitionVariantRef.current;
+
+    gsap.set(currentLayerEl, { clearProps: 'transform,opacity,boxShadow' });
+    if (exitingLayerEl) {
+      gsap.set(exitingLayerEl, { clearProps: 'transform,opacity,boxShadow' });
+    }
+
+    const scrollContainer = resolveScrollContainer();
+    const exitScrollOffset = exitScrollOffsetRef.current;
+    const enterScrollOffset = enterScrollOffsetRef.current;
+    if (scrollContainer && exitScrollOffset !== enterScrollOffset) {
+      scrollContainer.scrollTo({ top: enterScrollOffset, left: 0, behavior: 'auto' });
+    }
+
+    const transitionDirection = transitionDirectionRef.current;
+    const isForward = transitionDirection === 'forward';
+    const enterFromY = isForward ? VERTICAL_TRAVEL_DISTANCE : -VERTICAL_TRAVEL_DISTANCE;
+    const exitToY = isForward ? -VERTICAL_TRAVEL_DISTANCE : VERTICAL_TRAVEL_DISTANCE;
+    const exitBaseY = enterScrollOffset - exitScrollOffset;
+
+    const tl = gsap.timeline({
+      onComplete: () => {
+        const nextLayers = nextLayersRef.current;
+        nextLayersRef.current = null;
+        setLayers((prev) => nextLayers ?? prev.filter((layer) => layer.status !== 'exiting'));
+        setIsAnimating(false);
+
+        if (currentLayerEl) {
+          gsap.set(currentLayerEl, { clearProps: 'transform,opacity,boxShadow' });
+        }
+        if (exitingLayerEl) {
+          gsap.set(exitingLayerEl, { clearProps: 'transform,opacity,boxShadow' });
+        }
+      },
+    });
+
+    if (transitionVariant === 'ios') {
+      const exitToXPercent = isForward
+        ? IOS_EXIT_TO_X_PERCENT_FORWARD
+        : IOS_EXIT_TO_X_PERCENT_BACKWARD;
+      const enterFromXPercent = isForward
+        ? IOS_ENTER_FROM_X_PERCENT
+        : IOS_ENTER_FROM_X_PERCENT_BACKWARD;
+
+      if (exitingLayerEl) {
+        gsap.set(exitingLayerEl, {
+          y: exitBaseY,
+          xPercent: 0,
+          opacity: 1,
+        });
+      }
+
+      gsap.set(currentLayerEl, {
+        xPercent: enterFromXPercent,
+        opacity: 1,
+      });
+
+      const shadowValue = '-14px 0 24px rgba(0, 0, 0, 0.16)';
+
+      const topLayerEl = isForward ? currentLayerEl : exitingLayerEl;
+      if (topLayerEl) {
+        gsap.set(topLayerEl, { boxShadow: shadowValue });
+      }
+
+      if (exitingLayerEl) {
+        tl.to(
+          exitingLayerEl,
+          {
+            xPercent: exitToXPercent,
+            opacity: isForward ? IOS_EXIT_DIM_OPACITY : 1,
+            duration: IOS_TRANSITION_DURATION,
+            ease: 'power2.out',
+            force3D: true,
+          },
+          0
+        );
+      }
+
+      tl.to(
+        currentLayerEl,
+        {
+          xPercent: 0,
+          opacity: 1,
+          duration: IOS_TRANSITION_DURATION,
+          ease: 'power2.out',
+          force3D: true,
+        },
+        0
+      );
+    } else {
+      // Exit animation: fade out with slight movement (runs simultaneously)
+      if (exitingLayerEl) {
+        gsap.set(exitingLayerEl, { y: exitBaseY });
+        tl.to(
+          exitingLayerEl,
+          {
+            y: exitBaseY + exitToY,
+            opacity: 0,
+            duration: VERTICAL_TRANSITION_DURATION,
+            ease: 'circ.out',
+            force3D: true,
+          },
+          0
+        );
+      }
+
+      // Enter animation: fade in with slight movement (runs simultaneously)
+      tl.fromTo(
+        currentLayerEl,
+        { y: enterFromY, opacity: 0 },
+        {
+          y: 0,
+          opacity: 1,
+          duration: VERTICAL_TRANSITION_DURATION,
+          ease: 'circ.out',
+          force3D: true,
+          onComplete: () => {
+            if (currentLayerEl) {
+              gsap.set(currentLayerEl, { clearProps: 'transform,opacity' });
+            }
+          },
+        },
+        0
+      );
+    }
+
+    return () => {
+      tl.kill();
+      gsap.killTweensOf([currentLayerEl, exitingLayerEl]);
+    };
+  }, [isAnimating, resolveScrollContainer]);
+
+  return (
+    <div className={`page-transition${isAnimating ? ' page-transition--animating' : ''}`}>
+      {(() => {
+        const currentIndex = layers.findIndex((layer) => layer.status === 'current');
+        const resolvedCurrentIndex = currentIndex === -1 ? layers.length - 1 : currentIndex;
+        const keepStackedIndex = layers
+          .slice(0, resolvedCurrentIndex)
+          .map((layer, index) => ({ layer, index }))
+          .reverse()
+          .find(({ layer }) => layer.status === 'stacked')?.index;
+
+        return layers.map((layer, index) => {
+          const shouldKeepStacked = layer.status === 'stacked' && index === keepStackedIndex;
+          return (
+        <div
+          key={layer.key}
+          className={[
+            'page-transition__layer',
+            layer.status === 'exiting' ? 'page-transition__layer--exit' : '',
+            layer.status === 'stacked' ? 'page-transition__layer--stacked' : '',
+            shouldKeepStacked ? 'page-transition__layer--stacked-keep' : '',
+          ]
+            .filter(Boolean)
+            .join(' ')}
+          aria-hidden={layer.status !== 'current'}
+          inert={layer.status !== 'current'}
+          ref={
+            layer.status === 'exiting'
+              ? exitingLayerRef
+              : layer.status === 'current'
+                ? currentLayerRef
+                : undefined
+          }
+        >
+          <PageTransitionLayerContext.Provider value={{ status: layer.status }}>
+            {render(layer.location)}
+          </PageTransitionLayerContext.Provider>
+        </div>
+          );
+        });
+      })()}
+    </div>
+  );
+}

src/components/common/SecondaryScreenShell.module.scss

@@ -0,0 +1,84 @@
+@use '../../styles/variables' as *;
+
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-lg;
+  min-height: 0;
+}
+
+.topBar {
+  position: sticky;
+  top: 0;
+  z-index: 5;
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
+  gap: $spacing-md;
+  padding: $spacing-sm $spacing-md;
+  background: var(--bg-secondary);
+  border-bottom: 1px solid var(--border-color);
+  min-height: 44px;
+}
+
+.topBarTitle {
+  min-width: 0;
+  text-align: center;
+  font-size: 16px;
+  font-weight: 650;
+  color: var(--text-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  justify-self: center;
+}
+
+.backButton {
+  padding-left: 6px;
+  padding-right: 10px;
+  justify-self: start;
+  gap: 0;
+}
+
+.backButton > span:last-child {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.backIcon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  svg {
+    display: block;
+  }
+}
+
+.backText {
+  font-weight: 600;
+  line-height: 18px;
+}
+
+.rightSlot {
+  justify-self: end;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.loadingState {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: $spacing-sm;
+  padding: $spacing-2xl 0;
+  color: var(--text-secondary);
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-lg;
+}
+

src/components/common/SecondaryScreenShell.tsx

@@ -0,0 +1,78 @@
+import { forwardRef, type ReactNode } from 'react';
+import { Button } from '@/components/ui/Button';
+import { LoadingSpinner } from '@/components/ui/LoadingSpinner';
+import { IconChevronLeft } from '@/components/ui/icons';
+import styles from './SecondaryScreenShell.module.scss';
+
+export type SecondaryScreenShellProps = {
+  title: ReactNode;
+  onBack?: () => void;
+  backLabel?: string;
+  backAriaLabel?: string;
+  rightAction?: ReactNode;
+  isLoading?: boolean;
+  loadingLabel?: ReactNode;
+  className?: string;
+  contentClassName?: string;
+  children?: ReactNode;
+};
+
+export const SecondaryScreenShell = forwardRef<HTMLDivElement, SecondaryScreenShellProps>(
+  function SecondaryScreenShell(
+    {
+      title,
+      onBack,
+      backLabel = 'Back',
+      backAriaLabel,
+      rightAction,
+      isLoading = false,
+      loadingLabel = 'Loading...',
+      className = '',
+      contentClassName = '',
+      children,
+    },
+    ref
+  ) {
+    const containerClassName = [styles.container, className].filter(Boolean).join(' ');
+    const contentClasses = [styles.content, contentClassName].filter(Boolean).join(' ');
+    const titleTooltip = typeof title === 'string' ? title : undefined;
+    const resolvedBackAriaLabel = backAriaLabel ?? backLabel;
+
+    return (
+      <div className={containerClassName} ref={ref}>
+        <div className={styles.topBar}>
+          {onBack ? (
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={onBack}
+              className={styles.backButton}
+              aria-label={resolvedBackAriaLabel}
+            >
+              <span className={styles.backIcon}>
+                <IconChevronLeft size={18} />
+              </span>
+              <span className={styles.backText}>{backLabel}</span>
+            </Button>
+          ) : (
+            <div />
+          )}
+          <div className={styles.topBarTitle} title={titleTooltip}>
+            {title}
+          </div>
+          <div className={styles.rightSlot}>{rightAction}</div>
+        </div>
+
+        {isLoading ? (
+          <div className={styles.loadingState}>
+            <LoadingSpinner size={16} />
+            <span>{loadingLabel}</span>
+          </div>
+        ) : (
+          <div className={contentClasses}>{children}</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/config/ConfigSection.tsx

@@ -0,0 +1,22 @@
+import type { PropsWithChildren, ReactNode } from 'react';
+import { Card } from '@/components/ui/Card';
+
+interface ConfigSectionProps {
+  title: ReactNode;
+  description?: ReactNode;
+  className?: string;
+}
+
+export function ConfigSection({ title, description, className, children }: PropsWithChildren<ConfigSectionProps>) {
+  return (
+    <Card title={title} className={className}>
+      {description && (
+        <p style={{ margin: '-4px 0 16px 0', color: 'var(--text-secondary)', fontSize: 13 }}>
+          {description}
+        </p>
+      )}
+      {children}
+    </Card>
+  );
+}
+

src/components/config/VisualConfigEditor.module.scss

@@ -0,0 +1,37 @@
+.payloadRuleModelRow {
+  display: grid;
+  grid-template-columns: 1fr 160px auto;
+  gap: 8px;
+  align-items: center;
+}
+
+.payloadRuleModelRowProtocolFirst {
+  grid-template-columns: 160px 1fr auto;
+}
+
+.payloadRuleParamRow {
+  display: grid;
+  grid-template-columns: 1fr 140px 1fr auto;
+  gap: 8px;
+  align-items: center;
+}
+
+.payloadFilterModelRow {
+  display: grid;
+  grid-template-columns: 1fr 160px auto;
+  gap: 8px;
+  align-items: center;
+}
+
+@media (max-width: 900px) {
+  .payloadRuleModelRow,
+  .payloadRuleModelRowProtocolFirst,
+  .payloadRuleParamRow,
+  .payloadFilterModelRow {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .payloadRowActionButton {
+    width: 100%;
+  }
+}

src/components/layout/MainLayout.tsx

@@ -1,32 +1,51 @@
-import { ReactNode, SVGProps, useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
-import { NavLink, Outlet } from 'react-router-dom';
+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 { 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 {
+  useAuthStore,
+  useConfigStore,
+  useLanguageStore,
+  useNotificationStore,
+  useThemeStore,
+} from '@/stores';
 import { versionApi } from '@/services/api';
+import { triggerHeaderRefresh } from '@/hooks/useHeaderRefresh';
+import { LANGUAGE_LABEL_KEYS, LANGUAGE_ORDER } from '@/utils/constants';
+import { isSupportedLanguage } from '@/utils/language';
 
 const sidebarIcons: Record<string, ReactNode> = {
-  settings: <IconSlidersHorizontal size={18} />,
-  apiKeys: <IconKey size={18} />,
+  dashboard: <IconLayoutDashboard 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} />
+  system: <IconInfo size={18} />,
 };
 
 // Header action icons - smaller size for header buttons
@@ -40,7 +59,7 @@ const headerIconProps: SVGProps<SVGSVGElement> = {
   strokeLinecap: 'round',
   strokeLinejoin: 'round',
   'aria-hidden': 'true',
-  focusable: 'false'
+  focusable: 'false',
 };
 
 const headerIcons = {
@@ -93,19 +112,38 @@ const headerIcons = {
       <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>
-	  ),
-	  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>
-	  )
-	};
+  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;
@@ -134,12 +172,12 @@ const compareVersions = (latest?: string | null, current?: string | null) => {
 };
 
 export function MainLayout() {
-  const { t, i18n } = useTranslation();
+  const { t } = 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);
 
@@ -148,18 +186,23 @@ export function MainLayout() {
   const clearCache = useConfigStore((state) => state.clearCache);
 
   const theme = useThemeStore((state) => state.theme);
-  const toggleTheme = useThemeStore((state) => state.toggleTheme);
-  const toggleLanguage = useLanguageStore((state) => state.toggleLanguage);
+  const cycleTheme = useThemeStore((state) => state.cycleTheme);
+  const language = useLanguageStore((state) => state.language);
+  const setLanguage = useLanguageStore((state) => state.setLanguage);
 
   const [sidebarOpen, setSidebarOpen] = useState(false);
   const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
   const [checkingVersion, setCheckingVersion] = useState(false);
+  const [languageMenuOpen, setLanguageMenuOpen] = useState(false);
   const [brandExpanded, setBrandExpanded] = useState(true);
+  const contentRef = useRef<HTMLDivElement | null>(null);
+  const languageMenuRef = useRef<HTMLDivElement | null>(null);
   const brandCollapseTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
   const headerRef = useRef<HTMLElement | null>(null);
 
   const fullBrandName = 'CLI Proxy API Management Center';
   const abbrBrandName = t('title.abbr');
+  const isLogsPage = location.pathname.startsWith('/logs');
 
   // 将顶栏高度写入 CSS 变量，确保侧栏/内容区计算一致，防止滚动时抖动
   useLayoutEffect(() => {
@@ -173,7 +216,9 @@ export function MainLayout() {
     updateHeaderHeight();
 
     const resizeObserver =
-      typeof ResizeObserver !== 'undefined' && headerRef.current ? new ResizeObserver(updateHeaderHeight) : null;
+      typeof ResizeObserver !== 'undefined' && headerRef.current
+        ? new ResizeObserver(updateHeaderHeight)
+        : null;
     if (resizeObserver && headerRef.current) {
       resizeObserver.observe(headerRef.current);
     }
@@ -188,6 +233,38 @@ export function MainLayout() {
     };
   }, []);
 
+  // 将主内容区的中心点写入 CSS 变量，供底部浮层（配置面板操作栏、提供商导航）对齐到内容区
+  useLayoutEffect(() => {
+    const updateContentCenter = () => {
+      const el = contentRef.current;
+      if (!el) return;
+      const rect = el.getBoundingClientRect();
+      const centerX = rect.left + rect.width / 2;
+      document.documentElement.style.setProperty('--content-center-x', `${centerX}px`);
+    };
+
+    updateContentCenter();
+
+    const resizeObserver =
+      typeof ResizeObserver !== 'undefined' && contentRef.current
+        ? new ResizeObserver(updateContentCenter)
+        : null;
+
+    if (resizeObserver && contentRef.current) {
+      resizeObserver.observe(contentRef.current);
+    }
+
+    window.addEventListener('resize', updateContentCenter);
+
+    return () => {
+      if (resizeObserver) {
+        resizeObserver.disconnect();
+      }
+      window.removeEventListener('resize', updateContentCenter);
+      document.documentElement.style.removeProperty('--content-center-x');
+    };
+  }, []);
+
   // 5秒后自动收起品牌名称
   useEffect(() => {
     brandCollapseTimer.current = setTimeout(() => {
@@ -201,6 +278,32 @@ export function MainLayout() {
     };
   }, []);
 
+  useEffect(() => {
+    if (!languageMenuOpen) {
+      return;
+    }
+
+    const handlePointerDown = (event: MouseEvent) => {
+      if (!languageMenuRef.current?.contains(event.target as Node)) {
+        setLanguageMenuOpen(false);
+      }
+    };
+
+    const handleEscape = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        setLanguageMenuOpen(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handlePointerDown);
+    document.addEventListener('keydown', handleEscape);
+
+    return () => {
+      document.removeEventListener('mousedown', handlePointerDown);
+      document.removeEventListener('keydown', handleEscape);
+    };
+  }, [languageMenuOpen]);
+
   const handleBrandClick = useCallback(() => {
     if (!brandExpanded) {
       setBrandExpanded(true);
@@ -214,12 +317,28 @@ export function MainLayout() {
     }
   }, [brandExpanded]);
 
+  const toggleLanguageMenu = useCallback(() => {
+    setLanguageMenuOpen((prev) => !prev);
+  }, []);
+
+  const handleLanguageSelect = useCallback(
+    (nextLanguage: string) => {
+      if (!isSupportedLanguage(nextLanguage)) {
+        return;
+      }
+      setLanguage(nextLanguage);
+      setLanguageMenuOpen(false);
+    },
+    [setLanguage]
+  );
+
   useEffect(() => {
     fetchConfig().catch(() => {
       // ignore initial failure; login flow会提示
     });
   }, [fetchConfig]);
 
+
   const statusClass =
     connectionStatus === 'connected'
       ? 'success'
@@ -230,25 +349,92 @@ export function MainLayout() {
           : 'muted';
 
   const navItems = [
-    { path: '/settings', label: t('nav.basic_settings'), icon: sidebarIcons.settings },
-    { path: '/api-keys', label: t('nav.api_keys'), icon: sidebarIcons.apiKeys },
+    { path: '/', label: t('nav.dashboard'), icon: sidebarIcons.dashboard },
+    { path: '/config', label: t('nav.config_management'), icon: sidebarIcons.config },
     { 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 }
+    ...(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 aiProvidersIndex = navOrder.indexOf('/ai-providers');
+    if (aiProvidersIndex !== -1) {
+      if (normalizedPath === '/ai-providers') return aiProvidersIndex;
+      if (normalizedPath.startsWith('/ai-providers/')) {
+        if (normalizedPath.startsWith('/ai-providers/gemini')) return aiProvidersIndex + 0.1;
+        if (normalizedPath.startsWith('/ai-providers/codex')) return aiProvidersIndex + 0.2;
+        if (normalizedPath.startsWith('/ai-providers/claude')) return aiProvidersIndex + 0.3;
+        if (normalizedPath.startsWith('/ai-providers/vertex')) return aiProvidersIndex + 0.4;
+        if (normalizedPath.startsWith('/ai-providers/ampcode')) return aiProvidersIndex + 0.5;
+        if (normalizedPath.startsWith('/ai-providers/openai')) return aiProvidersIndex + 0.6;
+        return aiProvidersIndex + 0.05;
+      }
+    }
+
+    const authFilesIndex = navOrder.indexOf('/auth-files');
+    if (authFilesIndex !== -1) {
+      if (normalizedPath === '/auth-files') return authFilesIndex;
+      if (normalizedPath.startsWith('/auth-files/')) {
+        if (normalizedPath.startsWith('/auth-files/oauth-excluded')) return authFilesIndex + 0.1;
+        if (normalizedPath.startsWith('/auth-files/oauth-model-alias')) return authFilesIndex + 0.2;
+        return authFilesIndex + 0.05;
+      }
+    }
+
+    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 getTransitionVariant = useCallback((fromPathname: string, toPathname: string) => {
+    const normalize = (pathname: string) => {
+      const trimmed =
+        pathname.length > 1 && pathname.endsWith('/') ? pathname.slice(0, -1) : pathname;
+      return trimmed === '/dashboard' ? '/' : trimmed;
+    };
+
+    const from = normalize(fromPathname);
+    const to = normalize(toPathname);
+    const isAuthFiles = (pathname: string) =>
+      pathname === '/auth-files' || pathname.startsWith('/auth-files/');
+    const isAiProviders = (pathname: string) =>
+      pathname === '/ai-providers' || pathname.startsWith('/ai-providers/');
+    if (isAuthFiles(from) && isAuthFiles(to)) return 'ios';
+    if (isAiProviders(from) && isAiProviders(to)) return 'ios';
+    return 'vertical';
+  }, []);
 
   const handleRefreshAll = async () => {
     clearCache();
-    try {
-      await fetchConfig(undefined, true);
-      showNotification(t('notification.data_refreshed'), 'success');
-    } catch (error: any) {
-      showNotification(`${t('notification.refresh_failed')}: ${error?.message || ''}`, 'error');
+    const results = await Promise.allSettled([
+      fetchConfig(undefined, true),
+      triggerHeaderRefresh()
+    ]);
+    const rejected = results.find((result) => result.status === 'rejected');
+    if (rejected && rejected.status === 'rejected') {
+      const reason = rejected.reason;
+      const message =
+        typeof reason === 'string' ? reason : reason instanceof Error ? reason.message : '';
+      showNotification(
+        `${t('notification.refresh_failed')}${message ? `: ${message}` : ''}`,
+        'error'
+      );
+      return;
     }
+    showNotification(t('notification.data_refreshed'), 'success');
   };
 
   const handleVersionCheck = async () => {
@@ -287,7 +473,11 @@ export function MainLayout() {
           <button
             className="sidebar-toggle-header"
             onClick={() => setSidebarCollapsed((prev) => !prev)}
-            title={sidebarCollapsed ? t('sidebar.expand', { defaultValue: '展开' }) : t('sidebar.collapse', { defaultValue: '收起' })}
+            title={
+              sidebarCollapsed
+                ? t('sidebar.expand', { defaultValue: '展开' })
+                : t('sidebar.collapse', { defaultValue: '收起' })
+            }
           >
             {sidebarCollapsed ? headerIcons.chevronRight : headerIcons.chevronLeft}
           </button>
@@ -317,20 +507,67 @@ export function MainLayout() {
           </div>
 
           <div className="header-actions">
-            <Button className="mobile-menu-btn" variant="ghost" size="sm" onClick={() => setSidebarOpen((prev) => !prev)}>
+            <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')}>
+            <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')}>
+            <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={toggleTheme} title={t('theme.switch')}>
-              {theme === 'dark' ? headerIcons.sun : headerIcons.moon}
+            <div className={`language-menu ${languageMenuOpen ? 'open' : ''}`} ref={languageMenuRef}>
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={toggleLanguageMenu}
+                title={t('language.switch')}
+                aria-label={t('language.switch')}
+                aria-haspopup="menu"
+                aria-expanded={languageMenuOpen}
+              >
+                {headerIcons.language}
+              </Button>
+              {languageMenuOpen && (
+                <div className="notification entering language-menu-popover" role="menu" aria-label={t('language.switch')}>
+                  {LANGUAGE_ORDER.map((lang) => (
+                    <button
+                      key={lang}
+                      type="button"
+                      className={`language-menu-option ${language === lang ? 'active' : ''}`}
+                      onClick={() => handleLanguageSelect(lang)}
+                      role="menuitemradio"
+                      aria-checked={language === lang}
+                    >
+                      <span>{t(LANGUAGE_LABEL_KEYS[lang])}</span>
+                      {language === lang ? <span className="language-menu-check">✓</span> : null}
+                    </button>
+                  ))}
+                </div>
+              )}
+            </div>
+            <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}
@@ -340,7 +577,9 @@ export function MainLayout() {
       </header>
 
       <div className="main-body">
-        <aside className={`sidebar ${sidebarOpen ? 'open' : ''} ${sidebarCollapsed ? 'collapsed' : ''}`}>
+        <aside
+          className={`sidebar ${sidebarOpen ? 'open' : ''} ${sidebarCollapsed ? 'collapsed' : ''}`}
+        >
           <div className="nav-section">
             {navItems.map((item) => (
               <NavLink
@@ -357,23 +596,15 @@ export function MainLayout() {
           </div>
         </aside>
 
-        <div className="content">
-          <main className="main-content">
-            <Outlet />
+        <div className={`content${isLogsPage ? ' content-logs' : ''}`} ref={contentRef}>
+          <main className={`main-content${isLogsPage ? ' main-content-logs' : ''}`}>
+            <PageTransition
+              render={(location) => <MainRoutes location={location} />}
+              getRouteOrder={getRouteOrder}
+              getTransitionVariant={getTransitionVariant}
+              scrollContainerRef={contentRef}
+            />
           </main>
-
-          <footer className="footer">
-            <span>
-              {t('footer.api_version')}: {serverVersion || t('system_info.version_unknown')}
-            </span>
-            <span>
-              {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>
     </div>

src/components/modelAlias/ModelMappingDiagram.module.scss

@@ -0,0 +1,359 @@
+@use '../../styles/variables' as *;
+
+.scrollContainer {
+  width: 100%;
+  overflow-x: auto;
+  overscroll-behavior-x: contain;
+  -webkit-overflow-scrolling: touch;
+}
+
+.tapHint {
+  position: sticky;
+  left: 0;
+  z-index: 3;
+  font-size: 12px;
+  color: var(--text-secondary);
+  padding: 0 4px;
+  margin-bottom: 8px;
+}
+
+.container {
+  display: inline-flex;
+  position: relative;
+  min-width: 100%;
+  min-height: 300px;
+  justify-content: space-between;
+  padding: 20px 0;
+  user-select: none;
+
+  @media (max-width: 768px) {
+    // Give mobile extra horizontal room to reduce line overlap; users can swipe to scroll.
+    min-width: max(100%, 960px);
+    padding: 12px 0;
+  }
+}
+
+// SVG layer for connection lines (behind columns so links are visible)
+.connections {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 1;
+  overflow: visible;
+
+  path {
+    fill: none;
+    stroke-width: 2;
+  }
+}
+
+.column {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  z-index: 2;
+  flex: 0 0 auto;
+
+  &.providers {
+    align-items: flex-end;
+    min-width: 140px;
+  }
+
+  &.sources {
+    align-items: flex-start;
+    min-width: 200px;
+  }
+
+  &.aliases {
+    align-items: flex-start;
+    min-width: 200px;
+  }
+}
+
+.columnHeader {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-secondary);
+  text-transform: uppercase;
+  margin-bottom: 8px;
+  padding: 0 4px;
+}
+
+.item {
+  background: var(--bg-primary);
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  padding: 10px 14px;
+  font-size: 13px;
+  color: var(--text-primary);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  max-width: 280px;
+  position: relative;
+  transition: all 0.2s ease;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+
+  &:hover {
+    border-color: var(--primary-color);
+    transform: translateY(-1px);
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
+    z-index: 10;
+  }
+
+  &.dropTarget {
+    background-color: var(--bg-secondary);
+    border-color: var(--primary-color);
+    border-width: 2px;
+  }
+
+  &.selected {
+    border-color: var(--primary-color);
+    background-color: var(--bg-secondary);
+    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
+  }
+}
+
+// Mindmap-style provider branch (root node)
+.providerItem {
+  border-left: 3px solid transparent;
+  padding-left: 8px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+
+  .providerLabel {
+    font-weight: 600;
+    font-size: 13px;
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .collapseBtn {
+    flex-shrink: 0;
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    background: var(--bg-secondary);
+    border-radius: 4px;
+    cursor: pointer;
+    color: var(--text-secondary);
+    transition: background-color 0.15s, color 0.15s;
+
+    &:hover {
+      background: var(--border-color);
+      color: var(--text-primary);
+    }
+  }
+
+  .chevronDown,
+  .chevronRight {
+    display: inline-block;
+    width: 0;
+    height: 0;
+    border-style: solid;
+  }
+
+  .chevronDown {
+    border-width: 5px 4px 0 4px;
+    border-color: currentColor transparent transparent transparent;
+  }
+
+  .chevronRight {
+    border-width: 4px 0 4px 5px;
+    border-color: transparent transparent transparent currentColor;
+  }
+}
+
+.providerGroup {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  width: 100%;
+}
+
+.sourceItem,
+.aliasItem {
+  cursor: grab;
+
+  &:active {
+    cursor: grabbing;
+  }
+
+  &.dragging {
+    opacity: 0.5;
+    border-style: dashed;
+  }
+}
+
+.dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  position: absolute;
+  top: 50%;
+  margin-top: -3px;
+  flex-shrink: 0;
+
+  &.dotLeft {
+    left: -3px;
+    background: var(--text-tertiary);
+  }
+}
+
+.sourceItem .dot {
+  right: -3px;
+}
+
+.providerBadge {
+  font-size: 11px;
+  padding: 2px 6px;
+  border-radius: 4px;
+  background: var(--bg-secondary);
+  color: var(--text-secondary);
+  margin-right: 8px;
+  font-weight: 500;
+}
+
+.itemName {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.itemCount {
+  font-size: 11px;
+  color: var(--text-tertiary);
+  margin-left: 8px;
+  background: var(--bg-secondary);
+  padding: 1px 6px;
+  border-radius: 10px;
+}
+
+.contextMenu {
+  position: fixed;
+  background: var(--bg-primary);
+  border: 1px solid var(--border-color);
+  border-radius: 6px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  z-index: 9999;
+  min-width: 120px;
+  overflow: hidden;
+  padding: 4px 0;
+
+  .menuItem {
+    padding: 8px 12px;
+    font-size: 13px;
+    color: var(--text-primary);
+    cursor: pointer;
+    transition: background-color 0.1s;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    &:hover {
+      background-color: var(--bg-secondary);
+    }
+
+    &.danger {
+      color: var(--error-color);
+
+      &:hover {
+        background-color: var(--bg-error-light);
+      }
+    }
+  }
+
+  .menuDivider {
+    height: 1px;
+    margin: 4px 0;
+    background: var(--border-color);
+    padding: 0;
+    cursor: default;
+    pointer-events: none;
+  }
+}
+
+.settingsEmpty {
+  color: var(--text-tertiary);
+  font-size: 13px;
+  text-align: center;
+  padding: $spacing-lg 0;
+}
+
+.settingsList {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-sm;
+}
+
+.settingsRow {
+  display: grid;
+  grid-template-columns: minmax(200px, 1fr) auto;
+  gap: $spacing-md;
+  align-items: center;
+  padding: $spacing-sm $spacing-md;
+  border: 1px solid var(--border-color);
+  border-radius: $radius-md;
+  background: var(--bg-secondary);
+
+  @media (max-width: 768px) {
+    grid-template-columns: 1fr;
+    align-items: flex-start;
+  }
+}
+
+.settingsNames {
+  display: flex;
+  align-items: center;
+  gap: $spacing-xs;
+  font-size: 13px;
+  color: var(--text-primary);
+  min-width: 0;
+}
+
+.settingsSource,
+.settingsAlias {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 220px;
+}
+
+.settingsArrow {
+  color: var(--text-tertiary);
+}
+
+.settingsActions {
+  display: flex;
+  align-items: center;
+  gap: $spacing-sm;
+}
+
+.settingsLabel {
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+
+.settingsDelete {
+  border: 0;
+  background: transparent;
+  color: var(--error-color);
+  padding: 6px;
+  border-radius: 6px;
+  cursor: pointer;
+
+  &:hover {
+    background: var(--bg-error-light);
+  }
+}

src/components/modelAlias/ModelMappingDiagram.tsx

@@ -0,0 +1,659 @@
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState, type DragEvent, type MouseEvent as ReactMouseEvent } from 'react';
+import { useTranslation } from 'react-i18next';
+import type { OAuthModelAliasEntry } from '@/types';
+import { useThemeStore } from '@/stores';
+import { AliasColumn, ProviderColumn, SourceColumn } from './ModelMappingDiagramColumns';
+import { DiagramContextMenu } from './ModelMappingDiagramContextMenu';
+import {
+  AddAliasModal,
+  RenameAliasModal,
+  SettingsAliasModal,
+  SettingsSourceModal
+} from './ModelMappingDiagramModals';
+import type {
+  AliasNode,
+  AuthFileModelItem,
+  ContextMenuState,
+  DiagramLine,
+  SourceNode
+} from './ModelMappingDiagramTypes';
+import styles from './ModelMappingDiagram.module.scss';
+
+export interface ModelMappingDiagramProps {
+  modelAlias: Record<string, OAuthModelAliasEntry[]>;
+  allProviderModels?: Record<string, AuthFileModelItem[]>;
+  onUpdate?: (provider: string, sourceModel: string, newAlias: string) => void;
+  onDeleteLink?: (provider: string, sourceModel: string, alias: string) => void;
+  onToggleFork?: (provider: string, sourceModel: string, alias: string, fork: boolean) => void;
+  onRenameAlias?: (oldAlias: string, newAlias: string) => void;
+  onDeleteAlias?: (alias: string) => void;
+  onEditProvider?: (provider: string) => void;
+  onDeleteProvider?: (provider: string) => void;
+  className?: string;
+}
+
+const PROVIDER_COLORS = [
+  '#3b82f6', '#10b981', '#f59e0b', '#ef4444', 
+  '#8b5cf6', '#ec4899', '#06b6d4', '#84cc16'
+];
+
+function getProviderColor(provider: string): string {
+  const hash = provider.split('').reduce((acc, c) => acc + c.charCodeAt(0), 0);
+  return PROVIDER_COLORS[hash % PROVIDER_COLORS.length];
+}
+
+export interface ModelMappingDiagramRef {
+  collapseAll: () => void;
+  refreshLayout: () => void;
+}
+
+export const ModelMappingDiagram = forwardRef<ModelMappingDiagramRef, ModelMappingDiagramProps>(function ModelMappingDiagram({ 
+  modelAlias, 
+  allProviderModels = {}, 
+  onUpdate,
+  onDeleteLink,
+  onToggleFork,
+  onRenameAlias,
+  onDeleteAlias,
+  onEditProvider,
+  onDeleteProvider,
+  className
+}, ref) {
+  const { t } = useTranslation();
+  const resolvedTheme = useThemeStore((state) => state.resolvedTheme);
+  const isDark = resolvedTheme === 'dark';
+  const enableTapLinking = useMemo(() => {
+    if (typeof window === 'undefined' || typeof window.matchMedia === 'undefined') return false;
+    return (
+      window.matchMedia('(any-pointer: coarse)').matches &&
+      !window.matchMedia('(any-pointer: fine)').matches
+    );
+  }, []);
+  
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [lines, setLines] = useState<DiagramLine[]>([]);
+  const [draggedSource, setDraggedSource] = useState<SourceNode | null>(null);
+  const [draggedAlias, setDraggedAlias] = useState<string | null>(null);
+  const [dropTargetAlias, setDropTargetAlias] = useState<string | null>(null);
+  const [dropTargetSource, setDropTargetSource] = useState<string | null>(null);
+  const [tapSourceId, setTapSourceId] = useState<string | null>(null);
+  const [tapAlias, setTapAlias] = useState<string | null>(null);
+  const [extraAliases, setExtraAliases] = useState<string[]>([]);
+  const [contextMenu, setContextMenu] = useState<ContextMenuState | null>(null);
+  const [collapsedProviders, setCollapsedProviders] = useState<Set<string>>(new Set());
+  const [providerGroupHeights, setProviderGroupHeights] = useState<Record<string, number>>({});
+  const [renameState, setRenameState] = useState<{ oldAlias: string } | null>(null);
+  const [renameValue, setRenameValue] = useState('');
+  const [renameError, setRenameError] = useState('');
+  const [addAliasOpen, setAddAliasOpen] = useState(false);
+  const [addAliasValue, setAddAliasValue] = useState('');
+  const [addAliasError, setAddAliasError] = useState('');
+  const [settingsAlias, setSettingsAlias] = useState<string | null>(null);
+  const [settingsSourceId, setSettingsSourceId] = useState<string | null>(null);
+
+  // Parse data: each source model (provider+name) and each alias is distinct by id; 1 source -> many aliases.
+  const { aliasNodes, providerNodes } = useMemo(() => {
+    const sourceMap = new Map<
+      string,
+      { provider: string; name: string; aliases: Map<string, boolean> }
+    >();
+    const aliasSet = new Set<string>();
+
+    // 1. Existing mappings: group by (provider, name), each source has a set of aliases
+    Object.entries(modelAlias).forEach(([provider, mappings]) => {
+      (mappings ?? []).forEach((m) => {
+        const name = (m?.name || '').trim();
+        const alias = (m?.alias || '').trim();
+        if (!name || !alias) return;
+
+        const pk = `${provider.toLowerCase()}::${name.toLowerCase()}`;
+        if (!sourceMap.has(pk)) {
+          sourceMap.set(pk, { provider, name, aliases: new Map() });
+        }
+        sourceMap.get(pk)!.aliases.set(alias, m?.fork === true);
+        aliasSet.add(alias);
+      });
+    });
+
+    // 2. Unmapped models from allProviderModels (no mapping yet)
+    Object.entries(allProviderModels).forEach(([provider, models]) => {
+      (models ?? []).forEach((m) => {
+        const name = (m.id || '').trim();
+        if (!name) return;
+        const pk = `${provider.toLowerCase()}::${name.toLowerCase()}`;
+        if (sourceMap.has(pk)) {
+          // Already in sourceMap from mappings; keep provider from mapping for correct grouping.
+          return;
+        }
+        sourceMap.set(pk, { provider, name, aliases: new Map() });
+      });
+    });
+
+    // 3. Source nodes: distinct by id = provider::name
+    const sources: SourceNode[] = Array.from(sourceMap.entries())
+      .map(([id, v]) => ({
+        id,
+        provider: v.provider,
+        name: v.name,
+        aliases: Array.from(v.aliases.entries()).map(([alias, fork]) => ({ alias, fork }))
+      }))
+      .sort((a, b) => {
+        if (a.provider !== b.provider) return a.provider.localeCompare(b.provider);
+        return a.name.localeCompare(b.name);
+      });
+
+    // 4. Extra aliases (no mapping yet)
+    extraAliases.forEach((alias) => aliasSet.add(alias));
+
+    // 5. Alias nodes: distinct by id = alias; sources = SourceNodes that have this alias in their aliases
+    const aliasNodesList: AliasNode[] = Array.from(aliasSet)
+      .map((alias) => ({
+        id: alias,
+        alias,
+        sources: sources.filter((s) => s.aliases.some((entry) => entry.alias === alias))
+      }))
+      .sort((a, b) => {
+        if (b.sources.length !== a.sources.length) return b.sources.length - a.sources.length;
+        return a.alias.localeCompare(b.alias);
+      });
+
+    // 6. Group sources by provider
+    const providerMap = new Map<string, SourceNode[]>();
+    sources.forEach((s) => {
+      if (!providerMap.has(s.provider)) providerMap.set(s.provider, []);
+      providerMap.get(s.provider)!.push(s);
+    });
+    const providerNodesList = Array.from(providerMap.entries())
+      .map(([provider, providerSources]) => ({ provider, sources: providerSources }))
+      .sort((a, b) => a.provider.localeCompare(b.provider));
+
+    return { aliasNodes: aliasNodesList, providerNodes: providerNodesList };
+  }, [modelAlias, allProviderModels, extraAliases]);
+
+  // Track element positions
+  const providerRefs = useRef<Map<string, HTMLDivElement>>(new Map());
+  const sourceRefs = useRef<Map<string, HTMLDivElement>>(new Map());
+  const aliasRefs = useRef<Map<string, HTMLDivElement>>(new Map());
+
+  const toggleProviderCollapse = (provider: string) => {
+    setCollapsedProviders((prev) => {
+      const next = new Set(prev);
+      if (next.has(provider)) next.delete(provider);
+      else next.add(provider);
+      return next;
+    });
+  };
+
+  // Calculate lines: provider→source, source→alias (when expanded); midpoint + linkData for source→alias
+  const updateLines = useCallback(() => {
+    if (!containerRef.current) return;
+    const containerRect = containerRef.current.getBoundingClientRect();
+    const newLines: { path: string; color: string; id: string }[] = [];
+    const nextProviderGroupHeights: Record<string, number> = {};
+
+    const bezier = (
+      x1: number, y1: number,
+      x2: number, y2: number
+    ) => {
+      const cpx1 = x1 + (x2 - x1) * 0.5;
+      const cpx2 = x2 - (x2 - x1) * 0.5;
+      return `M ${x1} ${y1} C ${cpx1} ${y1}, ${cpx2} ${y2}, ${x2} ${y2}`;
+    };
+
+    providerNodes.forEach(({ provider, sources }) => {
+      const collapsed = collapsedProviders.has(provider);
+      if (collapsed) return;
+
+      if (sources.length > 0) {
+        const firstEl = sourceRefs.current.get(sources[0].id);
+        const lastEl = sourceRefs.current.get(sources[sources.length - 1].id);
+        if (firstEl && lastEl) {
+          const height = Math.max(0, Math.round(lastEl.getBoundingClientRect().bottom - firstEl.getBoundingClientRect().top));
+          if (height > 0) nextProviderGroupHeights[provider] = height;
+        }
+      }
+
+      const providerEl = providerRefs.current.get(provider);
+      if (!providerEl) return;
+      const providerRect = providerEl.getBoundingClientRect();
+      const px = providerRect.right - containerRect.left;
+      const py = providerRect.top + providerRect.height / 2 - containerRect.top;
+      const color = getProviderColor(provider);
+
+      // Provider → Source (branch link, no dot)
+      sources.forEach((source) => {
+        const sourceEl = sourceRefs.current.get(source.id);
+        if (!sourceEl) return;
+        const sourceRect = sourceEl.getBoundingClientRect();
+        const sx = sourceRect.left - containerRect.left;
+        const sy = sourceRect.top + sourceRect.height / 2 - containerRect.top;
+        newLines.push({
+          id: `provider-${provider}-source-${source.id}`,
+          path: bezier(px, py, sx, sy),
+          color
+        });
+      });
+      // Source → Alias: one line per alias
+      sources.forEach((source) => {
+        if (!source.aliases || source.aliases.length === 0) return;
+        
+        source.aliases.forEach((aliasEntry) => {
+          const sourceEl = sourceRefs.current.get(source.id);
+          const aliasEl = aliasRefs.current.get(aliasEntry.alias);
+          if (!sourceEl || !aliasEl) return;
+          
+          const sourceRect = sourceEl.getBoundingClientRect();
+          const aliasRect = aliasEl.getBoundingClientRect();
+          
+          // Calculate coordinates relative to the container
+          const x1 = sourceRect.right - containerRect.left;
+          const y1 = sourceRect.top + sourceRect.height / 2 - containerRect.top;
+          const x2 = aliasRect.left - containerRect.left;
+          const y2 = aliasRect.top + aliasRect.height / 2 - containerRect.top;
+          
+          newLines.push({
+            id: `${source.id}-${aliasEntry.alias}`,
+            path: bezier(x1, y1, x2, y2),
+            color
+          });
+        });
+      });
+    });
+
+    setLines(newLines);
+    setProviderGroupHeights((prev) => {
+      const prevKeys = Object.keys(prev);
+      const nextKeys = Object.keys(nextProviderGroupHeights);
+      if (prevKeys.length !== nextKeys.length) return nextProviderGroupHeights;
+      for (const key of nextKeys) {
+        if (!(key in prev) || prev[key] !== nextProviderGroupHeights[key]) {
+          return nextProviderGroupHeights;
+        }
+      }
+      return prev;
+    });
+  }, [providerNodes, collapsedProviders]);
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      collapseAll: () => setCollapsedProviders(new Set(providerNodes.map((p) => p.provider))),
+      refreshLayout: () => updateLines()
+    }),
+    [providerNodes, updateLines]
+  );
+
+  useLayoutEffect(() => {
+    // updateLines is called after layout is calculated, ensuring elements are in place.
+    updateLines();
+    const raf = requestAnimationFrame(updateLines);
+    window.addEventListener('resize', updateLines);
+    return () => {
+      cancelAnimationFrame(raf);
+      window.removeEventListener('resize', updateLines);
+    };
+  }, [updateLines, aliasNodes]);
+
+  useLayoutEffect(() => {
+    updateLines();
+    const raf = requestAnimationFrame(updateLines);
+    return () => cancelAnimationFrame(raf);
+  }, [providerGroupHeights, updateLines]);
+
+  useEffect(() => {
+    if (!containerRef.current || typeof ResizeObserver === 'undefined') return;
+    const observer = new ResizeObserver(() => updateLines());
+    observer.observe(containerRef.current);
+    return () => observer.disconnect();
+  }, [updateLines]);
+
+  // Drag and Drop handlers
+  // 1. Source -> Alias
+  const handleDragStart = (e: DragEvent, source: SourceNode) => {
+    setTapSourceId(null);
+    setTapAlias(null);
+    setDraggedSource(source);
+    e.dataTransfer.setData('text/plain', source.id);
+    e.dataTransfer.effectAllowed = 'link';
+  };
+
+  const handleDragOver = (e: DragEvent, alias: string) => {
+    if (!draggedSource || draggedSource.aliases.some((entry) => entry.alias === alias)) return;
+    e.preventDefault(); // Allow drop
+    e.dataTransfer.dropEffect = 'link';
+    setDropTargetAlias(alias);
+  };
+
+  const handleDragLeave = () => {
+    setDropTargetAlias(null);
+  };
+
+  const handleDrop = (e: DragEvent, alias: string) => {
+    e.preventDefault();
+    if (draggedSource && !draggedSource.aliases.some((entry) => entry.alias === alias) && onUpdate) {
+      onUpdate(draggedSource.provider, draggedSource.name, alias);
+    }
+    setDraggedSource(null);
+    setDropTargetAlias(null);
+  };
+
+  // 2. Alias -> Source
+  const handleDragStartAlias = (e: DragEvent, alias: string) => {
+    setTapSourceId(null);
+    setTapAlias(null);
+    setDraggedAlias(alias);
+    e.dataTransfer.setData('text/plain', alias);
+    e.dataTransfer.effectAllowed = 'link';
+  };
+
+  const handleDragOverSource = (e: DragEvent, source: SourceNode) => {
+    if (!draggedAlias || source.aliases.some((entry) => entry.alias === draggedAlias)) return;
+    e.preventDefault();
+    e.dataTransfer.dropEffect = 'link';
+    setDropTargetSource(source.id);
+  };
+
+  const handleDragLeaveSource = () => {
+    setDropTargetSource(null);
+  };
+
+  const handleDropOnSource = (e: DragEvent, source: SourceNode) => {
+    e.preventDefault();
+    if (draggedAlias && !source.aliases.some((entry) => entry.alias === draggedAlias) && onUpdate) {
+      onUpdate(source.provider, source.name, draggedAlias);
+    }
+    setDraggedAlias(null);
+    setDropTargetSource(null);
+  };
+
+  const handleContextMenu = (
+    e: ReactMouseEvent,
+    type: 'alias' | 'background' | 'provider' | 'source',
+    data?: string
+  ) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setContextMenu({
+      x: e.clientX,
+      y: e.clientY,
+      type,
+      data
+    });
+  };
+
+  const closeContextMenu = () => setContextMenu(null);
+
+  const resolveSourceById = useCallback(
+    (id: string | null) => {
+      if (!id) return null;
+      for (const { sources } of providerNodes) {
+        const found = sources.find((source) => source.id === id);
+        if (found) return found;
+      }
+      return null;
+    },
+    [providerNodes]
+  );
+
+  const handleTapSelectSource = (source: SourceNode) => {
+    if (!onUpdate) return;
+    if (tapSourceId === source.id) {
+      setTapSourceId(null);
+      return;
+    }
+
+    if (tapAlias) {
+      onUpdate(source.provider, source.name, tapAlias);
+      setTapSourceId(null);
+      setTapAlias(null);
+      return;
+    }
+
+    setTapSourceId(source.id);
+    setTapAlias(null);
+  };
+
+  const handleTapSelectAlias = (alias: string) => {
+    if (!onUpdate) return;
+    if (tapAlias === alias) {
+      setTapAlias(null);
+      return;
+    }
+
+    if (tapSourceId) {
+      const source = resolveSourceById(tapSourceId);
+      if (source) {
+        onUpdate(source.provider, source.name, alias);
+      }
+      setTapSourceId(null);
+      setTapAlias(null);
+      return;
+    }
+
+    setTapAlias(alias);
+    setTapSourceId(null);
+  };
+
+  const handleUnlinkSource = (provider: string, sourceModel: string, alias: string) => {
+    if (onDeleteLink) onDeleteLink(provider, sourceModel, alias);
+  };
+
+  const handleToggleFork = (
+    provider: string,
+    sourceModel: string,
+    alias: string,
+    value: boolean
+  ) => {
+    if (onToggleFork) onToggleFork(provider, sourceModel, alias, value);
+  };
+
+  const handleAddAlias = () => {
+    closeContextMenu();
+    setAddAliasOpen(true);
+    setAddAliasValue('');
+    setAddAliasError('');
+  };
+
+  const handleAddAliasSubmit = () => {
+    const trimmed = addAliasValue.trim();
+    if (!trimmed) {
+      setAddAliasError(t('oauth_model_alias.diagram_please_enter_alias'));
+      return;
+    }
+    if (aliasNodes.some(a => a.alias === trimmed)) {
+      setAddAliasError(t('oauth_model_alias.diagram_alias_exists'));
+      return;
+    }
+    setExtraAliases(prev => [...prev, trimmed]);
+    setAddAliasOpen(false);
+  };
+
+  const handleRenameClick = (oldAlias: string) => {
+    closeContextMenu();
+    setRenameState({ oldAlias });
+    setRenameValue(oldAlias);
+    setRenameError('');
+  };
+
+  const handleRenameSubmit = () => {
+    const trimmed = renameValue.trim();
+    if (!trimmed) {
+      setRenameError(t('oauth_model_alias.diagram_please_enter_alias'));
+      return;
+    }
+    if (trimmed === renameState?.oldAlias) {
+      setRenameState(null);
+      return;
+    }
+    if (aliasNodes.some(a => a.alias === trimmed)) {
+      setRenameError(t('oauth_model_alias.diagram_alias_exists'));
+      return;
+    }
+    if (onRenameAlias && renameState) onRenameAlias(renameState.oldAlias, trimmed);
+    if (extraAliases.includes(renameState?.oldAlias ?? '')) {
+      setExtraAliases(prev => prev.map(a => a === renameState?.oldAlias ? trimmed : a));
+    }
+    setRenameState(null);
+  };
+
+  const handleDeleteClick = (alias: string) => {
+    closeContextMenu();
+    const node = aliasNodes.find(n => n.alias === alias);
+    if (!node) return;
+
+    if (node.sources.length === 0) {
+      setExtraAliases(prev => prev.filter(a => a !== alias));
+    } else {
+      if (onDeleteAlias) onDeleteAlias(alias);
+    }
+  };
+
+
+  return (
+    <div className={[styles.scrollContainer, className].filter(Boolean).join(' ')}>
+      {enableTapLinking && onUpdate && (
+        <div className={styles.tapHint}>{t('oauth_model_alias.diagram_tap_hint')}</div>
+      )}
+      <div
+        className={styles.container}
+        ref={containerRef}
+        onContextMenu={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          handleContextMenu(e, 'background');
+        }}
+      >
+        <svg className={styles.connections}>
+          {lines.map((line) => (
+            <path
+              key={line.id}
+              d={line.path}
+              stroke={line.color}
+              strokeOpacity={isDark ? 0.4 : 0.3}
+            />
+          ))}
+        </svg>
+
+        <ProviderColumn
+          providerNodes={providerNodes}
+          collapsedProviders={collapsedProviders}
+          getProviderColor={getProviderColor}
+          providerGroupHeights={providerGroupHeights}
+          providerRefs={providerRefs}
+          onToggleCollapse={toggleProviderCollapse}
+          onContextMenu={(e, type, data) => handleContextMenu(e, type, data)}
+          label={t('oauth_model_alias.diagram_providers')}
+          expandLabel={t('oauth_model_alias.diagram_expand')}
+          collapseLabel={t('oauth_model_alias.diagram_collapse')}
+        />
+        <SourceColumn
+          providerNodes={providerNodes}
+          collapsedProviders={collapsedProviders}
+          sourceRefs={sourceRefs}
+          getProviderColor={getProviderColor}
+          selectedSourceId={enableTapLinking ? tapSourceId : null}
+          onSelectSource={enableTapLinking ? handleTapSelectSource : undefined}
+          draggedSource={draggedSource}
+          dropTargetSource={dropTargetSource}
+          draggable={!!onUpdate}
+          onDragStart={handleDragStart}
+          onDragEnd={() => {
+            setDraggedSource(null);
+            setDropTargetAlias(null);
+          }}
+          onDragOver={handleDragOverSource}
+          onDragLeave={handleDragLeaveSource}
+          onDrop={handleDropOnSource}
+          onContextMenu={(e, type, data) => handleContextMenu(e, type, data)}
+          label={t('oauth_model_alias.diagram_source_models')}
+        />
+        <AliasColumn
+          aliasNodes={aliasNodes}
+          aliasRefs={aliasRefs}
+          dropTargetAlias={dropTargetAlias}
+          draggedAlias={draggedAlias}
+          selectedAlias={enableTapLinking ? tapAlias : null}
+          onSelectAlias={enableTapLinking ? handleTapSelectAlias : undefined}
+          draggable={!!onUpdate}
+          onDragStart={handleDragStartAlias}
+          onDragEnd={() => {
+            setDraggedAlias(null);
+            setDropTargetSource(null);
+          }}
+          onDragOver={handleDragOver}
+          onDragLeave={handleDragLeave}
+          onDrop={handleDrop}
+          onContextMenu={(e, type, data) => handleContextMenu(e, type, data)}
+          label={t('oauth_model_alias.diagram_aliases')}
+        />
+      </div>
+
+      <DiagramContextMenu
+        contextMenu={contextMenu}
+        t={t}
+        onRequestClose={() => setContextMenu(null)}
+        onAddAlias={handleAddAlias}
+        onRenameAlias={handleRenameClick}
+        onOpenAliasSettings={(alias) => {
+          setContextMenu(null);
+          setSettingsAlias(alias);
+        }}
+        onDeleteAlias={handleDeleteClick}
+        onEditProvider={(provider) => {
+          setContextMenu(null);
+          onEditProvider?.(provider);
+        }}
+        onDeleteProvider={(provider) => {
+          setContextMenu(null);
+          onDeleteProvider?.(provider);
+        }}
+        onOpenSourceSettings={(sourceId) => {
+          setContextMenu(null);
+          setSettingsSourceId(sourceId);
+        }}
+      />
+
+      <RenameAliasModal
+        open={!!renameState}
+        t={t}
+        value={renameValue}
+        error={renameError}
+        onChange={(value) => {
+          setRenameValue(value);
+          setRenameError('');
+        }}
+        onClose={() => setRenameState(null)}
+        onSubmit={handleRenameSubmit}
+      />
+      <AddAliasModal
+        open={addAliasOpen}
+        t={t}
+        value={addAliasValue}
+        error={addAliasError}
+        onChange={(value) => {
+          setAddAliasValue(value);
+          setAddAliasError('');
+        }}
+        onClose={() => setAddAliasOpen(false)}
+        onSubmit={handleAddAliasSubmit}
+      />
+      <SettingsAliasModal
+        open={Boolean(settingsAlias)}
+        t={t}
+        alias={settingsAlias}
+        aliasNodes={aliasNodes}
+        onClose={() => setSettingsAlias(null)}
+        onToggleFork={handleToggleFork}
+        onUnlink={handleUnlinkSource}
+      />
+      <SettingsSourceModal
+        open={Boolean(settingsSourceId)}
+        t={t}
+        source={resolveSourceById(settingsSourceId)}
+        onClose={() => setSettingsSourceId(null)}
+        onToggleFork={handleToggleFork}
+        onUnlink={handleUnlinkSource}
+      />
+    </div>
+  );
+});

src/components/modelAlias/ModelMappingDiagramColumns.tsx

@@ -0,0 +1,251 @@
+import type { DragEvent, MouseEvent as ReactMouseEvent, RefObject } from 'react';
+import type { AliasNode, ProviderNode, SourceNode } from './ModelMappingDiagramTypes';
+import styles from './ModelMappingDiagram.module.scss';
+
+interface ProviderColumnProps {
+  providerNodes: ProviderNode[];
+  collapsedProviders: Set<string>;
+  getProviderColor: (provider: string) => string;
+  providerGroupHeights?: Record<string, number>;
+  providerRefs: RefObject<Map<string, HTMLDivElement>>;
+  onToggleCollapse: (provider: string) => void;
+  onContextMenu: (e: ReactMouseEvent, type: 'provider' | 'background', data?: string) => void;
+  label: string;
+  expandLabel: string;
+  collapseLabel: string;
+}
+
+export function ProviderColumn({
+  providerNodes,
+  collapsedProviders,
+  getProviderColor,
+  providerGroupHeights = {},
+  providerRefs,
+  onToggleCollapse,
+  onContextMenu,
+  label,
+  expandLabel,
+  collapseLabel
+}: ProviderColumnProps) {
+  return (
+    <div
+      className={`${styles.column} ${styles.providers}`}
+      onContextMenu={(e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        onContextMenu(e, 'background');
+      }}
+    >
+      <div className={styles.columnHeader}>{label}</div>
+      {providerNodes.map(({ provider, sources }) => {
+        const collapsed = collapsedProviders.has(provider);
+        const groupHeight = collapsed ? undefined : providerGroupHeights[provider];
+        return (
+          <div
+            key={provider}
+            className={styles.providerGroup}
+            style={groupHeight ? { height: groupHeight } : undefined}
+          >
+            <div
+              ref={(el) => {
+                if (el) providerRefs.current?.set(provider, el);
+                else providerRefs.current?.delete(provider);
+              }}
+              className={`${styles.item} ${styles.providerItem}`}
+              style={{ borderLeftColor: getProviderColor(provider) }}
+              onContextMenu={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                onContextMenu(e, 'provider', provider);
+              }}
+            >
+              <button
+                type="button"
+                className={styles.collapseBtn}
+                onClick={() => onToggleCollapse(provider)}
+                aria-label={collapsed ? expandLabel : collapseLabel}
+                title={collapsed ? expandLabel : collapseLabel}
+              >
+                <span className={collapsed ? styles.chevronRight : styles.chevronDown} />
+              </button>
+              <span className={styles.providerLabel} style={{ color: getProviderColor(provider) }}>
+                {provider}
+              </span>
+              <span className={styles.itemCount}>{sources.length}</span>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+interface SourceColumnProps {
+  providerNodes: ProviderNode[];
+  collapsedProviders: Set<string>;
+  sourceRefs: RefObject<Map<string, HTMLDivElement>>;
+  getProviderColor: (provider: string) => string;
+  selectedSourceId?: string | null;
+  onSelectSource?: (source: SourceNode) => void;
+  draggedSource: SourceNode | null;
+  dropTargetSource: string | null;
+  draggable: boolean;
+  onDragStart: (e: DragEvent, source: SourceNode) => void;
+  onDragEnd: () => void;
+  onDragOver: (e: DragEvent, source: SourceNode) => void;
+  onDragLeave: () => void;
+  onDrop: (e: DragEvent, source: SourceNode) => void;
+  onContextMenu: (e: ReactMouseEvent, type: 'source' | 'background', data?: string) => void;
+  label: string;
+}
+
+export function SourceColumn({
+  providerNodes,
+  collapsedProviders,
+  sourceRefs,
+  getProviderColor,
+  selectedSourceId,
+  onSelectSource,
+  draggedSource,
+  dropTargetSource,
+  draggable,
+  onDragStart,
+  onDragEnd,
+  onDragOver,
+  onDragLeave,
+  onDrop,
+  onContextMenu,
+  label
+}: SourceColumnProps) {
+  return (
+    <div
+      className={`${styles.column} ${styles.sources}`}
+      onContextMenu={(e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        onContextMenu(e, 'background');
+      }}
+    >
+      <div className={styles.columnHeader}>{label}</div>
+      {providerNodes.flatMap(({ provider, sources }) => {
+        if (collapsedProviders.has(provider)) return [];
+        return sources.map((source) => (
+          <div
+            key={source.id}
+            ref={(el) => {
+              if (el) sourceRefs.current?.set(source.id, el);
+              else sourceRefs.current?.delete(source.id);
+            }}
+            className={`${styles.item} ${styles.sourceItem} ${
+              draggedSource?.id === source.id ? styles.dragging : ''
+            } ${dropTargetSource === source.id ? styles.dropTarget : ''} ${
+              selectedSourceId === source.id ? styles.selected : ''
+            }`}
+            onClick={() => onSelectSource?.(source)}
+            draggable={draggable}
+            onDragStart={(e) => onDragStart(e, source)}
+            onDragEnd={onDragEnd}
+            onDragOver={(e) => onDragOver(e, source)}
+            onDragLeave={onDragLeave}
+            onDrop={(e) => onDrop(e, source)}
+            onContextMenu={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              onContextMenu(e, 'source', source.id);
+            }}
+          >
+            <span className={styles.itemName} title={source.name}>
+              {source.name}
+            </span>
+            <div
+              className={styles.dot}
+              style={{
+                background: getProviderColor(source.provider),
+                opacity: source.aliases.length > 0 ? 1 : 0.3
+              }}
+            />
+          </div>
+        ));
+      })}
+    </div>
+  );
+}
+
+interface AliasColumnProps {
+  aliasNodes: AliasNode[];
+  aliasRefs: RefObject<Map<string, HTMLDivElement>>;
+  dropTargetAlias: string | null;
+  draggedAlias: string | null;
+  selectedAlias?: string | null;
+  onSelectAlias?: (alias: string) => void;
+  draggable: boolean;
+  onDragStart: (e: DragEvent, alias: string) => void;
+  onDragEnd: () => void;
+  onDragOver: (e: DragEvent, alias: string) => void;
+  onDragLeave: () => void;
+  onDrop: (e: DragEvent, alias: string) => void;
+  onContextMenu: (e: ReactMouseEvent, type: 'alias' | 'background', data?: string) => void;
+  label: string;
+}
+
+export function AliasColumn({
+  aliasNodes,
+  aliasRefs,
+  dropTargetAlias,
+  draggedAlias,
+  selectedAlias,
+  onSelectAlias,
+  draggable,
+  onDragStart,
+  onDragEnd,
+  onDragOver,
+  onDragLeave,
+  onDrop,
+  onContextMenu,
+  label
+}: AliasColumnProps) {
+  return (
+    <div
+      className={`${styles.column} ${styles.aliases}`}
+      onContextMenu={(e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        onContextMenu(e, 'background');
+      }}
+    >
+      <div className={styles.columnHeader}>{label}</div>
+      {aliasNodes.map((node) => (
+        <div
+          key={node.id}
+          ref={(el) => {
+            if (el) aliasRefs.current?.set(node.id, el);
+            else aliasRefs.current?.delete(node.id);
+          }}
+          className={`${styles.item} ${styles.aliasItem} ${
+            dropTargetAlias === node.alias ? styles.dropTarget : ''
+          } ${draggedAlias === node.alias ? styles.dragging : ''} ${
+            selectedAlias === node.alias ? styles.selected : ''
+          }`}
+          onClick={() => onSelectAlias?.(node.alias)}
+          draggable={draggable}
+          onDragStart={(e) => onDragStart(e, node.alias)}
+          onDragEnd={onDragEnd}
+          onDragOver={(e) => onDragOver(e, node.alias)}
+          onDragLeave={onDragLeave}
+          onDrop={(e) => onDrop(e, node.alias)}
+          onContextMenu={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            onContextMenu(e, 'alias', node.alias);
+          }}
+        >
+          <div className={`${styles.dot} ${styles.dotLeft}`} />
+          <span className={styles.itemName} title={node.alias}>
+            {node.alias}
+          </span>
+          <span className={styles.itemCount}>{node.sources.length}</span>
+        </div>
+      ))}
+    </div>
+  );
+}

src/components/modelAlias/ModelMappingDiagramContextMenu.tsx

@@ -0,0 +1,111 @@
+import { useEffect, useRef } from 'react';
+import { createPortal } from 'react-dom';
+import type { TFunction } from 'i18next';
+import type { ContextMenuState } from './ModelMappingDiagramTypes';
+import styles from './ModelMappingDiagram.module.scss';
+
+interface DiagramContextMenuProps {
+  contextMenu: ContextMenuState | null;
+  t: TFunction;
+  onRequestClose: () => void;
+  onAddAlias: () => void;
+  onRenameAlias: (alias: string) => void;
+  onOpenAliasSettings: (alias: string) => void;
+  onDeleteAlias: (alias: string) => void;
+  onEditProvider: (provider: string) => void;
+  onDeleteProvider: (provider: string) => void;
+  onOpenSourceSettings: (sourceId: string) => void;
+}
+
+export function DiagramContextMenu({
+  contextMenu,
+  t,
+  onRequestClose,
+  onAddAlias,
+  onRenameAlias,
+  onOpenAliasSettings,
+  onDeleteAlias,
+  onEditProvider,
+  onDeleteProvider,
+  onOpenSourceSettings
+}: DiagramContextMenuProps) {
+  const menuRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    if (!contextMenu) return;
+    const handleClick = (event: globalThis.MouseEvent) => {
+      if (!menuRef.current?.contains(event.target as Node)) {
+        onRequestClose();
+      }
+    };
+    document.addEventListener('mousedown', handleClick);
+    return () => document.removeEventListener('mousedown', handleClick);
+  }, [contextMenu, onRequestClose]);
+
+  if (!contextMenu) return null;
+
+  const { type, data } = contextMenu;
+
+  const renderBackground = () => (
+    <div className={styles.menuItem} onClick={onAddAlias}>
+      <span>{t('oauth_model_alias.diagram_add_alias')}</span>
+    </div>
+  );
+
+  const renderAlias = () => {
+    if (!data) return null;
+    return (
+      <>
+        <div className={styles.menuItem} onClick={() => onRenameAlias(data)}>
+          <span>{t('oauth_model_alias.diagram_rename')}</span>
+        </div>
+        <div className={styles.menuItem} onClick={() => onOpenAliasSettings(data)}>
+          <span>{t('oauth_model_alias.diagram_settings')}</span>
+        </div>
+        <div className={styles.menuDivider} />
+        <div className={`${styles.menuItem} ${styles.danger}`} onClick={() => onDeleteAlias(data)}>
+          <span>{t('oauth_model_alias.diagram_delete_alias')}</span>
+        </div>
+      </>
+    );
+  };
+
+  const renderProvider = () => {
+    if (!data) return null;
+    return (
+      <>
+        <div className={styles.menuItem} onClick={() => onEditProvider(data)}>
+          <span>{t('common.edit')}</span>
+        </div>
+        <div className={styles.menuDivider} />
+        <div className={`${styles.menuItem} ${styles.danger}`} onClick={() => onDeleteProvider(data)}>
+          <span>{t('oauth_model_alias.delete')}</span>
+        </div>
+      </>
+    );
+  };
+
+  const renderSource = () => {
+    if (!data) return null;
+    return (
+      <div className={styles.menuItem} onClick={() => onOpenSourceSettings(data)}>
+        <span>{t('oauth_model_alias.diagram_settings')}</span>
+      </div>
+    );
+  };
+
+  return createPortal(
+    <div
+      ref={menuRef}
+      className={styles.contextMenu}
+      style={{ top: contextMenu.y, left: contextMenu.x }}
+      onClick={(e) => e.stopPropagation()}
+    >
+      {type === 'background' && renderBackground()}
+      {type === 'alias' && renderAlias()}
+      {type === 'provider' && renderProvider()}
+      {type === 'source' && renderSource()}
+    </div>,
+    document.body
+  );
+}

src/components/modelAlias/ModelMappingDiagramModals.tsx

@@ -0,0 +1,267 @@
+import type { KeyboardEvent } from 'react';
+import type { TFunction } from 'i18next';
+import { Modal } from '@/components/ui/Modal';
+import { Input } from '@/components/ui/Input';
+import { Button } from '@/components/ui/Button';
+import { ToggleSwitch } from '@/components/ui/ToggleSwitch';
+import { IconTrash2 } from '@/components/ui/icons';
+import type { AliasNode, SourceNode } from './ModelMappingDiagramTypes';
+import styles from './ModelMappingDiagram.module.scss';
+
+interface RenameAliasModalProps {
+  open: boolean;
+  t: TFunction;
+  value: string;
+  error: string;
+  onChange: (value: string) => void;
+  onClose: () => void;
+  onSubmit: () => void;
+}
+
+export function RenameAliasModal({
+  open,
+  t,
+  value,
+  error,
+  onChange,
+  onClose,
+  onSubmit
+}: RenameAliasModalProps) {
+  return (
+    <Modal
+      open={open}
+      onClose={onClose}
+      title={t('oauth_model_alias.diagram_rename_alias_title')}
+      width={400}
+      footer={
+        <>
+          <Button variant="secondary" onClick={onClose}>
+            {t('common.cancel')}
+          </Button>
+          <Button onClick={onSubmit}>{t('oauth_model_alias.diagram_rename_btn')}</Button>
+        </>
+      }
+    >
+      <Input
+        label={t('oauth_model_alias.diagram_rename_alias_label')}
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {
+          if (e.key === 'Enter') onSubmit();
+        }}
+        error={error}
+        placeholder={t('oauth_model_alias.diagram_rename_placeholder')}
+        autoFocus
+      />
+    </Modal>
+  );
+}
+
+interface AddAliasModalProps {
+  open: boolean;
+  t: TFunction;
+  value: string;
+  error: string;
+  onChange: (value: string) => void;
+  onClose: () => void;
+  onSubmit: () => void;
+}
+
+export function AddAliasModal({
+  open,
+  t,
+  value,
+  error,
+  onChange,
+  onClose,
+  onSubmit
+}: AddAliasModalProps) {
+  return (
+    <Modal
+      open={open}
+      onClose={onClose}
+      title={t('oauth_model_alias.diagram_add_alias_title')}
+      width={400}
+      footer={
+        <>
+          <Button variant="secondary" onClick={onClose}>
+            {t('common.cancel')}
+          </Button>
+          <Button onClick={onSubmit}>{t('oauth_model_alias.diagram_add_btn')}</Button>
+        </>
+      }
+    >
+      <Input
+        label={t('oauth_model_alias.diagram_add_alias_label')}
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {
+          if (e.key === 'Enter') onSubmit();
+        }}
+        error={error}
+        placeholder={t('oauth_model_alias.diagram_add_placeholder')}
+        autoFocus
+      />
+    </Modal>
+  );
+}
+
+interface SettingsAliasModalProps {
+  open: boolean;
+  t: TFunction;
+  alias: string | null;
+  aliasNodes: AliasNode[];
+  onClose: () => void;
+  onToggleFork: (provider: string, sourceModel: string, alias: string, fork: boolean) => void;
+  onUnlink: (provider: string, sourceModel: string, alias: string) => void;
+}
+
+export function SettingsAliasModal({
+  open,
+  t,
+  alias,
+  aliasNodes,
+  onClose,
+  onToggleFork,
+  onUnlink
+}: SettingsAliasModalProps) {
+  return (
+    <Modal
+      open={open}
+      onClose={onClose}
+      title={t('oauth_model_alias.diagram_settings_title', { alias: alias ?? '' })}
+      width={720}
+      footer={
+        <Button variant="secondary" onClick={onClose}>
+          {t('common.close')}
+        </Button>
+      }
+    >
+      {alias ? (
+        (() => {
+          const node = aliasNodes.find((n) => n.alias === alias);
+          if (!node || node.sources.length === 0) {
+            return <div className={styles.settingsEmpty}>{t('oauth_model_alias.diagram_settings_empty')}</div>;
+          }
+          return (
+            <div className={styles.settingsList}>
+              {node.sources.map((source) => {
+                const entry = source.aliases.find((item) => item.alias === alias);
+                const forkEnabled = entry?.fork === true;
+                return (
+                  <div key={source.id} className={styles.settingsRow}>
+                    <div className={styles.settingsNames}>
+                      <span className={styles.settingsSource}>{source.name}</span>
+                      <span className={styles.settingsArrow}>→</span>
+                      <span className={styles.settingsAlias}>{alias}</span>
+                    </div>
+                    <div className={styles.settingsActions}>
+                      <span className={styles.settingsLabel}>
+                        {t('oauth_model_alias.alias_fork_label')}
+                      </span>
+                      <ToggleSwitch
+                        checked={forkEnabled}
+                        onChange={(value) => onToggleFork(source.provider, source.name, alias, value)}
+                        ariaLabel={t('oauth_model_alias.alias_fork_label')}
+                      />
+                      <button
+                        type="button"
+                        className={styles.settingsDelete}
+                        onClick={() => onUnlink(source.provider, source.name, alias)}
+                        aria-label={t('oauth_model_alias.diagram_delete_link', {
+                          provider: source.provider,
+                          name: source.name
+                        })}
+                        title={t('oauth_model_alias.diagram_delete_link', {
+                          provider: source.provider,
+                          name: source.name
+                        })}
+                      >
+                        <IconTrash2 size={14} />
+                      </button>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          );
+        })()
+      ) : null}
+    </Modal>
+  );
+}
+
+interface SettingsSourceModalProps {
+  open: boolean;
+  t: TFunction;
+  source: SourceNode | null;
+  onClose: () => void;
+  onToggleFork: (provider: string, sourceModel: string, alias: string, fork: boolean) => void;
+  onUnlink: (provider: string, sourceModel: string, alias: string) => void;
+}
+
+export function SettingsSourceModal({
+  open,
+  t,
+  source,
+  onClose,
+  onToggleFork,
+  onUnlink
+}: SettingsSourceModalProps) {
+  return (
+    <Modal
+      open={open}
+      onClose={onClose}
+      title={t('oauth_model_alias.diagram_settings_source_title')}
+      width={720}
+      footer={
+        <Button variant="secondary" onClick={onClose}>
+          {t('common.close')}
+        </Button>
+      }
+    >
+      {source ? (
+        source.aliases.length === 0 ? (
+          <div className={styles.settingsEmpty}>{t('oauth_model_alias.diagram_settings_empty')}</div>
+        ) : (
+          <div className={styles.settingsList}>
+            {source.aliases.map((entry) => (
+              <div key={`${source.id}-${entry.alias}`} className={styles.settingsRow}>
+                <div className={styles.settingsNames}>
+                  <span className={styles.settingsSource}>{source.name}</span>
+                  <span className={styles.settingsArrow}>→</span>
+                  <span className={styles.settingsAlias}>{entry.alias}</span>
+                </div>
+                <div className={styles.settingsActions}>
+                  <span className={styles.settingsLabel}>
+                    {t('oauth_model_alias.alias_fork_label')}
+                  </span>
+                  <ToggleSwitch
+                    checked={entry.fork === true}
+                    onChange={(value) => onToggleFork(source.provider, source.name, entry.alias, value)}
+                    ariaLabel={t('oauth_model_alias.alias_fork_label')}
+                  />
+                  <button
+                    type="button"
+                    className={styles.settingsDelete}
+                    onClick={() => onUnlink(source.provider, source.name, entry.alias)}
+                    aria-label={t('oauth_model_alias.diagram_delete_link', {
+                      provider: source.provider,
+                      name: source.name
+                    })}
+                    title={t('oauth_model_alias.diagram_delete_link', {
+                      provider: source.provider,
+                      name: source.name
+                    })}
+                  >
+                    <IconTrash2 size={14} />
+                  </button>
+                </div>
+              </div>
+            ))}
+          </div>
+        )
+      ) : null}
+    </Modal>
+  );
+}

src/components/modelAlias/ModelMappingDiagramTypes.ts

@@ -0,0 +1,33 @@
+export interface AuthFileModelItem {
+  id: string;
+  display_name?: string;
+  type?: string;
+  owned_by?: string;
+}
+
+export interface SourceNode {
+  id: string; // unique: provider::name
+  provider: string;
+  name: string;
+  aliases: { alias: string; fork: boolean }[]; // all aliases this source maps to
+}
+
+export interface AliasNode {
+  id: string; // alias
+  alias: string;
+  sources: SourceNode[];
+}
+
+export interface ProviderNode {
+  provider: string;
+  sources: SourceNode[];
+}
+
+export interface ContextMenuState {
+  x: number;
+  y: number;
+  type: 'alias' | 'background' | 'provider' | 'source';
+  data?: string;
+}
+
+export type DiagramLine = { path: string; color: string; id: string };

src/components/modelAlias/index.ts

@@ -0,0 +1,2 @@
+export { ModelMappingDiagram } from './ModelMappingDiagram';
+export type { ModelMappingDiagramProps, ModelMappingDiagramRef } from './ModelMappingDiagram';

src/components/providers/AmpcodeSection/AmpcodeModal.tsx

@@ -0,0 +1,281 @@
+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, showConfirmation } = 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 () => {
+    showConfirmation({
+      title: t('ai_providers.ampcode_clear_upstream_api_key_title', { defaultValue: 'Clear Upstream API Key' }),
+      message: t('ai_providers.ampcode_clear_upstream_api_key_confirm'),
+      variant: 'danger',
+      confirmText: t('common.confirm'),
+      onConfirm: async () => {
+        setSaving(true);
+        setError('');
+        try {
+          await ampcodeApi.clearUpstreamApiKey();
+          const previous = config?.ampcode ?? {};
+          const next: AmpcodeConfig = { ...previous };
+          delete next.upstreamApiKey;
+          updateConfigValue('ampcode', next);
+          clearCache('ampcode');
+          showNotification(t('notification.ampcode_upstream_api_key_cleared'), 'success');
+        } catch (err: unknown) {
+          const message = getErrorMessage(err);
+          setError(message);
+          showNotification(`${t('notification.update_failed')}: ${message}`, 'error');
+        } finally {
+          setSaving(false);
+        }
+      },
+    });
+  };
+
+  const performSaveAmpcode = async () => {
+    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);
+    }
+  };
+
+  const saveAmpcode = async () => {
+    if (!loaded && mappingsDirty) {
+      showConfirmation({
+        title: t('ai_providers.ampcode_mappings_overwrite_title', { defaultValue: 'Overwrite Mappings' }),
+        message: t('ai_providers.ampcode_mappings_overwrite_confirm'),
+        variant: 'secondary', // Not dangerous, just a warning
+        confirmText: t('common.confirm'),
+        onConfirm: performSaveAmpcode,
+      });
+      return;
+    }
+
+    await performSaveAmpcode();
+  };
+
+  return (
+    <Modal
+      open={isOpen}
+      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,94 @@
+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';
+
+interface AmpcodeSectionProps {
+  config: AmpcodeConfig | null | undefined;
+  loading: boolean;
+  disableControls: boolean;
+  isSwitching: boolean;
+  onEdit: () => void;
+}
+
+export function AmpcodeSection({
+  config,
+  loading,
+  disableControls,
+  isSwitching,
+  onEdit,
+}: AmpcodeSectionProps) {
+  const { t } = useTranslation();
+  const showLoadingPlaceholder = loading && !config;
+
+  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={onEdit}
+            disabled={disableControls || loading || isSwitching}
+          >
+            {t('common.edit')}
+          </Button>
+        }
+      >
+        {showLoadingPlaceholder ? (
+          <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>
+    </>
+  );
+}

src/components/providers/AmpcodeSection/index.ts

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

src/components/providers/ClaudeSection/ClaudeModal.tsx

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

src/components/providers/ClaudeSection/ClaudeSection.tsx

@@ -0,0 +1,191 @@
+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 {
+  buildCandidateUsageSourceIds,
+  calculateStatusBarData,
+  type KeyStats,
+  type UsageDetail,
+} from '@/utils/usage';
+import styles from '@/pages/AiProvidersPage.module.scss';
+import { ProviderList } from '../ProviderList';
+import { ProviderStatusBar } from '../ProviderStatusBar';
+import { getStatsBySource, hasDisableAllModelsRule } from '../utils';
+
+interface ClaudeSectionProps {
+  configs: ProviderKeyConfig[];
+  keyStats: KeyStats;
+  usageDetails: UsageDetail[];
+  loading: boolean;
+  disableControls: boolean;
+  isSwitching: boolean;
+  onAdd: () => void;
+  onEdit: (index: number) => void;
+  onDelete: (index: number) => void;
+  onToggle: (index: number, enabled: boolean) => void;
+}
+
+export function ClaudeSection({
+  configs,
+  keyStats,
+  usageDetails,
+  loading,
+  disableControls,
+  isSwitching,
+  onAdd,
+  onEdit,
+  onDelete,
+  onToggle,
+}: ClaudeSectionProps) {
+  const { t } = useTranslation();
+  const actionsDisabled = disableControls || loading || isSwitching;
+  const toggleDisabled = disableControls || loading || isSwitching;
+
+  const statusBarCache = useMemo(() => {
+    const cache = new Map<string, ReturnType<typeof calculateStatusBarData>>();
+
+    configs.forEach((config) => {
+      if (!config.apiKey) return;
+      const candidates = buildCandidateUsageSourceIds({
+        apiKey: config.apiKey,
+        prefix: config.prefix,
+      });
+      if (!candidates.length) return;
+      const candidateSet = new Set(candidates);
+      const filteredDetails = usageDetails.filter((detail) => candidateSet.has(detail.source));
+      cache.set(config.apiKey, calculateStatusBarData(filteredDetails));
+    });
+
+    return cache;
+  }, [configs, usageDetails]);
+
+  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, item.prefix);
+            const headerEntries = Object.entries(item.headers || {});
+            const configDisabled = hasDisableAllModelsRule(item.excludedModels);
+            const excludedModels = item.excludedModels ?? [];
+            const statusData = statusBarCache.get(item.apiKey) || calculateStatusBarData([]);
+
+            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>
+    </>
+  );
+}

src/components/providers/ClaudeSection/index.ts

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

src/components/providers/CodexSection/CodexModal.tsx

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

src/components/providers/CodexSection/CodexSection.tsx

@@ -0,0 +1,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 iconCodexLight from '@/assets/icons/codex_light.svg';
+import iconCodexDark from '@/assets/icons/codex_drak.svg';
+import type { ProviderKeyConfig } from '@/types';
+import { maskApiKey } from '@/utils/format';
+import {
+  buildCandidateUsageSourceIds,
+  calculateStatusBarData,
+  type KeyStats,
+  type UsageDetail,
+} from '@/utils/usage';
+import styles from '@/pages/AiProvidersPage.module.scss';
+import { ProviderList } from '../ProviderList';
+import { ProviderStatusBar } from '../ProviderStatusBar';
+import { getStatsBySource, hasDisableAllModelsRule } from '../utils';
+
+interface CodexSectionProps {
+  configs: ProviderKeyConfig[];
+  keyStats: KeyStats;
+  usageDetails: UsageDetail[];
+  loading: boolean;
+  disableControls: boolean;
+  isSwitching: boolean;
+  resolvedTheme: string;
+  onAdd: () => void;
+  onEdit: (index: number) => void;
+  onDelete: (index: number) => void;
+  onToggle: (index: number, enabled: boolean) => void;
+}
+
+export function CodexSection({
+  configs,
+  keyStats,
+  usageDetails,
+  loading,
+  disableControls,
+  isSwitching,
+  resolvedTheme,
+  onAdd,
+  onEdit,
+  onDelete,
+  onToggle,
+}: CodexSectionProps) {
+  const { t } = useTranslation();
+  const actionsDisabled = disableControls || loading || isSwitching;
+  const toggleDisabled = disableControls || loading || isSwitching;
+
+  const statusBarCache = useMemo(() => {
+    const cache = new Map<string, ReturnType<typeof calculateStatusBarData>>();
+
+    configs.forEach((config) => {
+      if (!config.apiKey) return;
+      const candidates = buildCandidateUsageSourceIds({
+        apiKey: config.apiKey,
+        prefix: config.prefix,
+      });
+      if (!candidates.length) return;
+      const candidateSet = new Set(candidates);
+      const filteredDetails = usageDetails.filter((detail) => candidateSet.has(detail.source));
+      cache.set(config.apiKey, calculateStatusBarData(filteredDetails));
+    });
+
+    return cache;
+  }, [configs, usageDetails]);
+
+  return (
+    <>
+      <Card
+        title={
+          <span className={styles.cardTitle}>
+            <img
+              src={resolvedTheme === 'dark' ? iconCodexDark : iconCodexLight}
+              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, item.prefix);
+            const headerEntries = Object.entries(item.headers || {});
+            const configDisabled = hasDisableAllModelsRule(item.excludedModels);
+            const excludedModels = item.excludedModels ?? [];
+            const statusData = statusBarCache.get(item.apiKey) || calculateStatusBarData([]);
+
+            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>
+    </>
+  );
+}

src/components/providers/CodexSection/index.ts

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

src/components/providers/GeminiSection/GeminiModal.tsx

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

src/components/providers/GeminiSection/GeminiSection.tsx

@@ -0,0 +1,172 @@
+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 {
+  buildCandidateUsageSourceIds,
+  calculateStatusBarData,
+  type KeyStats,
+  type UsageDetail,
+} from '@/utils/usage';
+import styles from '@/pages/AiProvidersPage.module.scss';
+import { ProviderList } from '../ProviderList';
+import { ProviderStatusBar } from '../ProviderStatusBar';
+import { getStatsBySource, hasDisableAllModelsRule } from '../utils';
+
+interface GeminiSectionProps {
+  configs: GeminiKeyConfig[];
+  keyStats: KeyStats;
+  usageDetails: UsageDetail[];
+  loading: boolean;
+  disableControls: boolean;
+  isSwitching: boolean;
+  onAdd: () => void;
+  onEdit: (index: number) => void;
+  onDelete: (index: number) => void;
+  onToggle: (index: number, enabled: boolean) => void;
+}
+
+export function GeminiSection({
+  configs,
+  keyStats,
+  usageDetails,
+  loading,
+  disableControls,
+  isSwitching,
+  onAdd,
+  onEdit,
+  onDelete,
+  onToggle,
+}: GeminiSectionProps) {
+  const { t } = useTranslation();
+  const actionsDisabled = disableControls || loading || isSwitching;
+  const toggleDisabled = disableControls || loading || isSwitching;
+
+  const statusBarCache = useMemo(() => {
+    const cache = new Map<string, ReturnType<typeof calculateStatusBarData>>();
+
+    configs.forEach((config) => {
+      if (!config.apiKey) return;
+      const candidates = buildCandidateUsageSourceIds({
+        apiKey: config.apiKey,
+        prefix: config.prefix,
+      });
+      if (!candidates.length) return;
+      const candidateSet = new Set(candidates);
+      const filteredDetails = usageDetails.filter((detail) => candidateSet.has(detail.source));
+      cache.set(config.apiKey, calculateStatusBarData(filteredDetails));
+    });
+
+    return cache;
+  }, [configs, usageDetails]);
+
+  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, item.prefix);
+            const headerEntries = Object.entries(item.headers || {});
+            const configDisabled = hasDisableAllModelsRule(item.excludedModels);
+            const excludedModels = item.excludedModels ?? [];
+            const statusData = statusBarCache.get(item.apiKey) || calculateStatusBarData([]);
+
+            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>
+    </>
+  );
+}

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,433 @@
+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 } from '@/components/ui/ModelInputList';
+import { modelsToEntries } from '@/components/ui/modelInputListUtils';
+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,195 @@
+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 {
+  buildCandidateUsageSourceIds,
+  calculateStatusBarData,
+  type KeyStats,
+  type UsageDetail,
+} from '@/utils/usage';
+import styles from '@/pages/AiProvidersPage.module.scss';
+import { ProviderList } from '../ProviderList';
+import { ProviderStatusBar } from '../ProviderStatusBar';
+import { getOpenAIProviderStats, getStatsBySource } from '../utils';
+
+interface OpenAISectionProps {
+  configs: OpenAIProviderConfig[];
+  keyStats: KeyStats;
+  usageDetails: UsageDetail[];
+  loading: boolean;
+  disableControls: boolean;
+  isSwitching: boolean;
+  resolvedTheme: string;
+  onAdd: () => void;
+  onEdit: (index: number) => void;
+  onDelete: (index: number) => void;
+}
+
+export function OpenAISection({
+  configs,
+  keyStats,
+  usageDetails,
+  loading,
+  disableControls,
+  isSwitching,
+  resolvedTheme,
+  onAdd,
+  onEdit,
+  onDelete,
+}: OpenAISectionProps) {
+  const { t } = useTranslation();
+  const actionsDisabled = disableControls || loading || isSwitching;
+
+  const statusBarCache = useMemo(() => {
+    const cache = new Map<string, ReturnType<typeof calculateStatusBarData>>();
+
+    configs.forEach((provider) => {
+      const sourceIds = new Set<string>();
+      buildCandidateUsageSourceIds({ prefix: provider.prefix }).forEach((id) => sourceIds.add(id));
+      (provider.apiKeyEntries || []).forEach((entry) => {
+        buildCandidateUsageSourceIds({ apiKey: entry.apiKey }).forEach((id) => sourceIds.add(id));
+      });
+
+      const filteredDetails = sourceIds.size
+        ? usageDetails.filter((detail) => sourceIds.has(detail.source))
+        : [];
+      cache.set(provider.name, calculateStatusBarData(filteredDetails));
+    });
+
+    return cache;
+  }, [configs, usageDetails]);
+
+  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, item.prefix);
+            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);
+                        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>
+    </>
+  );
+}

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 && items.length === 0) {
+    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/ProviderNav/ProviderNav.module.scss

@@ -0,0 +1,153 @@
+@use '../../../styles/variables' as *;
+
+.navContainer {
+  position: fixed;
+  left: var(--content-center-x, 50%);
+  bottom: calc(12px + env(safe-area-inset-bottom));
+  transform: translateX(-50%);
+  z-index: 50;
+  pointer-events: auto;
+  width: fit-content;
+  max-width: calc(100vw - 24px);
+}
+
+.navList {
+  position: relative;
+  display: inline-flex;
+  flex-direction: row;
+  gap: 6px;
+  padding: 10px 12px;
+  background: rgba(255, 255, 255, 0.7);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  border-radius: 999px;
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
+  overflow-x: auto;
+  scrollbar-width: none;
+  max-width: inherit;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+.indicator {
+  position: absolute;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+  opacity: 0;
+  border-radius: 999px;
+  background: rgba(59, 130, 246, 0.15);
+  box-shadow: inset 0 0 0 2px var(--primary-color);
+  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
+    width 220ms cubic-bezier(0.22, 1, 0.36, 1),
+    height 220ms cubic-bezier(0.22, 1, 0.36, 1),
+    opacity 120ms ease;
+  will-change: transform, width, height;
+}
+
+.indicatorVisible {
+  opacity: 1;
+}
+
+.indicatorNoTransition {
+  transition: none;
+}
+
+.navItem {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  border-radius: 999px;
+  cursor: pointer;
+  transition: background-color 0.2s ease, transform 0.15s ease;
+  flex: 0 0 auto;
+
+  &:hover {
+    background: rgba(0, 0, 0, 0.06);
+    transform: scale(1.08);
+  }
+
+  &:active {
+    transform: scale(0.95);
+  }
+}
+
+.navItem.active {
+  &:hover {
+    background: transparent;
+    transform: none;
+  }
+}
+
+.icon {
+  width: 24px;
+  height: 24px;
+  object-fit: contain;
+}
+
+.active {
+  // Active highlight is rendered by the sliding indicator.
+  background: transparent;
+  box-shadow: none;
+}
+
+// 暗色主题适配
+:global([data-theme='dark']) {
+  .navList {
+    background: rgba(30, 30, 30, 0.7);
+    border-color: rgba(255, 255, 255, 0.1);
+    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
+  }
+
+  .navItem {
+    &:hover {
+      background: rgba(255, 255, 255, 0.1);
+    }
+  }
+
+  .indicator {
+    background: rgba(59, 130, 246, 0.25);
+  }
+}
+
+// 小屏幕进一步收紧尺寸
+@media (max-width: 1200px) {
+  .navContainer {
+    max-width: calc(100vw - 16px);
+  }
+
+  .navList {
+    gap: 6px;
+    padding: 8px 10px;
+  }
+
+  .navItem {
+    width: 36px;
+    height: 36px;
+  }
+
+  .icon {
+    width: 22px;
+    height: 22px;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .indicator {
+    transition: none;
+  }
+
+  .navItem {
+    transition: background-color 0.2s ease;
+  }
+}

src/components/providers/ProviderNav/ProviderNav.tsx

@@ -0,0 +1,285 @@
+import { CSSProperties, useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { useLocation } from 'react-router-dom';
+import { usePageTransitionLayer } from '@/components/common/PageTransition';
+import { useThemeStore } from '@/stores';
+import iconGemini from '@/assets/icons/gemini.svg';
+import iconOpenaiLight from '@/assets/icons/openai-light.svg';
+import iconOpenaiDark from '@/assets/icons/openai-dark.svg';
+import iconCodexLight from '@/assets/icons/codex_light.svg';
+import iconCodexDark from '@/assets/icons/codex_drak.svg';
+import iconClaude from '@/assets/icons/claude.svg';
+import iconVertex from '@/assets/icons/vertex.svg';
+import iconAmp from '@/assets/icons/amp.svg';
+import styles from './ProviderNav.module.scss';
+
+export type ProviderId = 'gemini' | 'codex' | 'claude' | 'vertex' | 'ampcode' | 'openai';
+
+interface ProviderNavItem {
+  id: ProviderId;
+  label: string;
+  getIcon: (theme: string) => string;
+}
+
+const PROVIDERS: ProviderNavItem[] = [
+  { id: 'gemini', label: 'Gemini', getIcon: () => iconGemini },
+  { id: 'codex', label: 'Codex', getIcon: (theme) => (theme === 'dark' ? iconCodexDark : iconCodexLight) },
+  { id: 'claude', label: 'Claude', getIcon: () => iconClaude },
+  { id: 'vertex', label: 'Vertex', getIcon: () => iconVertex },
+  { id: 'ampcode', label: 'Ampcode', getIcon: () => iconAmp },
+  { id: 'openai', label: 'OpenAI', getIcon: (theme) => (theme === 'dark' ? iconOpenaiDark : iconOpenaiLight) },
+];
+
+const HEADER_OFFSET = 24;
+type ScrollContainer = HTMLElement | (Window & typeof globalThis);
+
+export function ProviderNav() {
+  const location = useLocation();
+  const pageTransitionLayer = usePageTransitionLayer();
+  const isCurrentLayer = pageTransitionLayer ? pageTransitionLayer.status === 'current' : true;
+  const resolvedTheme = useThemeStore((state) => state.resolvedTheme);
+  const [activeProvider, setActiveProvider] = useState<ProviderId | null>(null);
+  const contentScrollerRef = useRef<HTMLElement | null>(null);
+  const navListRef = useRef<HTMLDivElement | null>(null);
+  const navContainerRef = useRef<HTMLDivElement | null>(null);
+  const itemRefs = useRef<Record<ProviderId, HTMLButtonElement | null>>({
+    gemini: null,
+    codex: null,
+    claude: null,
+    vertex: null,
+    ampcode: null,
+    openai: null,
+  });
+  const [indicatorRect, setIndicatorRect] = useState<{
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+  } | null>(null);
+  const [indicatorTransitionsEnabled, setIndicatorTransitionsEnabled] = useState(false);
+  const indicatorHasEnabledTransitionsRef = useRef(false);
+
+  // Only show this quick-switch overlay on the AI Providers list page.
+  // Note: The app uses iOS-style stacked page transitions inside `/ai-providers/*`,
+  // so this component can stay mounted while the user is on an edit route.
+  const normalizedPathname =
+    location.pathname.length > 1 && location.pathname.endsWith('/')
+      ? location.pathname.slice(0, -1)
+      : location.pathname;
+  const shouldShow = isCurrentLayer && normalizedPathname === '/ai-providers';
+
+  const getHeaderHeight = useCallback(() => {
+    const header = document.querySelector('.main-header') as HTMLElement | null;
+    if (header) return header.getBoundingClientRect().height;
+
+    const raw = getComputedStyle(document.documentElement).getPropertyValue('--header-height');
+    const value = Number.parseFloat(raw);
+    return Number.isFinite(value) ? value : 0;
+  }, []);
+
+  const getContentScroller = useCallback(() => {
+    if (contentScrollerRef.current && document.contains(contentScrollerRef.current)) {
+      return contentScrollerRef.current;
+    }
+
+    const container = document.querySelector('.content') as HTMLElement | null;
+    contentScrollerRef.current = container;
+    return container;
+  }, []);
+
+  const getScrollContainer = useCallback((): ScrollContainer => {
+    // Mobile layout uses document scroll (layout switches at 768px); desktop uses the `.content` scroller.
+    const isMobile = window.matchMedia('(max-width: 768px)').matches;
+    if (isMobile) return window;
+    return getContentScroller() ?? window;
+  }, [getContentScroller]);
+
+  const handleScroll = useCallback(() => {
+    const container = getScrollContainer();
+    if (!container) return;
+
+    const isElementScroller = container instanceof HTMLElement;
+    const headerHeight = isElementScroller ? 0 : getHeaderHeight();
+    const containerTop = isElementScroller ? container.getBoundingClientRect().top : 0;
+    const activationLine = containerTop + headerHeight + HEADER_OFFSET + 1;
+    let currentActive: ProviderId | null = null;
+
+    for (const provider of PROVIDERS) {
+      const element = document.getElementById(`provider-${provider.id}`);
+      if (!element) continue;
+
+      const rect = element.getBoundingClientRect();
+      if (rect.top <= activationLine) {
+        currentActive = provider.id;
+        continue;
+      }
+
+      if (currentActive) break;
+    }
+
+    if (!currentActive) {
+      const firstVisible = PROVIDERS.find((provider) =>
+        document.getElementById(`provider-${provider.id}`)
+      );
+      currentActive = firstVisible?.id ?? null;
+    }
+
+    setActiveProvider(currentActive);
+  }, [getHeaderHeight, getScrollContainer]);
+
+  useEffect(() => {
+    if (!shouldShow) return;
+    const contentScroller = getContentScroller();
+
+    // Listen to both: desktop scroll happens on `.content`; mobile uses `window`.
+    window.addEventListener('scroll', handleScroll, { passive: true });
+    contentScroller?.addEventListener('scroll', handleScroll, { passive: true });
+    window.addEventListener('resize', handleScroll);
+    handleScroll();
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+      window.removeEventListener('resize', handleScroll);
+      contentScroller?.removeEventListener('scroll', handleScroll);
+    };
+  }, [getContentScroller, handleScroll, shouldShow]);
+
+  const updateIndicator = useCallback((providerId: ProviderId | null) => {
+    if (!providerId) {
+      setIndicatorRect(null);
+      return;
+    }
+
+    const itemEl = itemRefs.current[providerId];
+    if (!itemEl) return;
+
+    setIndicatorRect({
+      x: itemEl.offsetLeft,
+      y: itemEl.offsetTop,
+      width: itemEl.offsetWidth,
+      height: itemEl.offsetHeight,
+    });
+
+    // Avoid animating from an initial (0,0) state on first paint.
+    if (!indicatorHasEnabledTransitionsRef.current) {
+      indicatorHasEnabledTransitionsRef.current = true;
+      requestAnimationFrame(() => setIndicatorTransitionsEnabled(true));
+    }
+  }, []);
+
+  useLayoutEffect(() => {
+    if (!shouldShow) return;
+    updateIndicator(activeProvider);
+  }, [activeProvider, shouldShow, updateIndicator]);
+
+  // Expose overlay height to the page, so it can reserve bottom padding and avoid being covered.
+  useLayoutEffect(() => {
+    if (!shouldShow) return;
+
+    const el = navContainerRef.current;
+    if (!el) return;
+
+    const updateHeight = () => {
+      const height = el.getBoundingClientRect().height;
+      document.documentElement.style.setProperty('--provider-nav-height', `${height}px`);
+    };
+
+    updateHeight();
+    window.addEventListener('resize', updateHeight);
+
+    const ro = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(updateHeight);
+    ro?.observe(el);
+
+    return () => {
+      ro?.disconnect();
+      window.removeEventListener('resize', updateHeight);
+      document.documentElement.style.removeProperty('--provider-nav-height');
+    };
+  }, [shouldShow]);
+
+  const scrollToProvider = (providerId: ProviderId) => {
+    const container = getScrollContainer();
+    const element = document.getElementById(`provider-${providerId}`);
+    if (!element || !container) return;
+
+    setActiveProvider(providerId);
+    updateIndicator(providerId);
+
+    // Mobile: scroll the document (header is fixed, so offset by header height).
+    if (!(container instanceof HTMLElement)) {
+      const headerHeight = getHeaderHeight();
+      const elementTop = element.getBoundingClientRect().top + window.scrollY;
+      const target = Math.max(0, elementTop - headerHeight - HEADER_OFFSET);
+      window.scrollTo({ top: target, behavior: 'smooth' });
+      return;
+    }
+
+    const containerRect = container.getBoundingClientRect();
+    const elementRect = element.getBoundingClientRect();
+    const scrollTop = container.scrollTop + (elementRect.top - containerRect.top) - HEADER_OFFSET;
+
+    container.scrollTo({ top: scrollTop, behavior: 'smooth' });
+  };
+
+  useEffect(() => {
+    if (!shouldShow) return;
+    const handleResize = () => updateIndicator(activeProvider);
+    window.addEventListener('resize', handleResize);
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, [activeProvider, shouldShow, updateIndicator]);
+
+  const navContent = (
+    <div className={styles.navContainer} ref={navContainerRef}>
+      <div className={styles.navList} ref={navListRef}>
+        <div
+          className={[
+            styles.indicator,
+            indicatorRect ? styles.indicatorVisible : '',
+            indicatorTransitionsEnabled ? '' : styles.indicatorNoTransition,
+          ]
+            .filter(Boolean)
+            .join(' ')}
+          style={
+            (indicatorRect
+              ? ({
+                  transform: `translate3d(${indicatorRect.x}px, ${indicatorRect.y}px, 0)`,
+                  width: indicatorRect.width,
+                  height: indicatorRect.height,
+                } satisfies CSSProperties)
+              : undefined) as CSSProperties | undefined
+          }
+        />
+        {PROVIDERS.map((provider) => {
+          const isActive = activeProvider === provider.id;
+          return (
+            <button
+              key={provider.id}
+              className={`${styles.navItem} ${isActive ? styles.active : ''}`}
+              ref={(node) => {
+                itemRefs.current[provider.id] = node;
+              }}
+              onClick={() => scrollToProvider(provider.id)}
+              title={provider.label}
+              type="button"
+              aria-label={provider.label}
+              aria-pressed={isActive}
+            >
+              <img
+                src={provider.getIcon(resolvedTheme)}
+                alt={provider.label}
+                className={styles.icon}
+              />
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+
+  if (typeof document === 'undefined') return null;
+
+  if (!shouldShow) return null;
+
+  return createPortal(navContent, document.body);
+}

src/components/providers/ProviderNav/index.ts

@@ -0,0 +1,2 @@
+export { ProviderNav } from './ProviderNav';
+export type { ProviderId } from './ProviderNav';

src/components/providers/ProviderStatusBar.tsx

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

src/components/providers/VertexSection/VertexModal.tsx

@@ -0,0 +1,118 @@
+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 } from '@/components/ui/ModelInputList';
+import { modelsToEntries } from '@/components/ui/modelInputListUtils';
+import type { ProviderKeyConfig } from '@/types';
+import { headersToEntries } from '@/utils/headers';
+import type { ProviderModalProps, VertexFormState } from '../types';
+
+interface VertexModalProps extends ProviderModalProps<ProviderKeyConfig, VertexFormState> {
+  isSaving: boolean;
+}
+
+const buildEmptyForm = (): VertexFormState => ({
+  apiKey: '',
+  prefix: '',
+  baseUrl: '',
+  proxyUrl: '',
+  headers: [],
+  models: [],
+  modelEntries: [{ name: '', alias: '' }],
+});
+
+export function VertexModal({
+  isOpen,
+  editIndex,
+  initialData,
+  onClose,
+  onSave,
+  isSaving,
+}: VertexModalProps) {
+  const { t } = useTranslation();
+  const [form, setForm] = useState<VertexFormState>(buildEmptyForm);
+
+  useEffect(() => {
+    if (!isOpen) return;
+    if (initialData) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect
+      setForm({
+        ...initialData,
+        headers: headersToEntries(initialData.headers),
+        modelEntries: modelsToEntries(initialData.models),
+      });
+      return;
+    }
+    setForm(buildEmptyForm());
+  }, [initialData, isOpen]);
+
+  return (
+    <Modal
+      open={isOpen}
+      onClose={onClose}
+      title={
+        editIndex !== null
+          ? t('ai_providers.vertex_edit_modal_title')
+          : t('ai_providers.vertex_add_modal_title')
+      }
+      footer={
+        <>
+          <Button variant="secondary" onClick={onClose} disabled={isSaving}>
+            {t('common.cancel')}
+          </Button>
+          <Button onClick={() => void onSave(form, editIndex)} loading={isSaving}>
+            {t('common.save')}
+          </Button>
+        </>
+      }
+    >
+      <Input
+        label={t('ai_providers.vertex_add_modal_key_label')}
+        placeholder={t('ai_providers.vertex_add_modal_key_placeholder')}
+        value={form.apiKey}
+        onChange={(e) => setForm((prev) => ({ ...prev, apiKey: e.target.value }))}
+      />
+      <Input
+        label={t('ai_providers.prefix_label')}
+        placeholder={t('ai_providers.prefix_placeholder')}
+        value={form.prefix ?? ''}
+        onChange={(e) => setForm((prev) => ({ ...prev, prefix: e.target.value }))}
+        hint={t('ai_providers.prefix_hint')}
+      />
+      <Input
+        label={t('ai_providers.vertex_add_modal_url_label')}
+        placeholder={t('ai_providers.vertex_add_modal_url_placeholder')}
+        value={form.baseUrl ?? ''}
+        onChange={(e) => setForm((prev) => ({ ...prev, baseUrl: e.target.value }))}
+      />
+      <Input
+        label={t('ai_providers.vertex_add_modal_proxy_label')}
+        placeholder={t('ai_providers.vertex_add_modal_proxy_placeholder')}
+        value={form.proxyUrl ?? ''}
+        onChange={(e) => setForm((prev) => ({ ...prev, proxyUrl: e.target.value }))}
+      />
+      <HeaderInputList
+        entries={form.headers}
+        onChange={(entries) => setForm((prev) => ({ ...prev, headers: entries }))}
+        addLabel={t('common.custom_headers_add')}
+        keyPlaceholder={t('common.custom_headers_key_placeholder')}
+        valuePlaceholder={t('common.custom_headers_value_placeholder')}
+      />
+      <div className="form-group">
+        <label>{t('ai_providers.vertex_models_label')}</label>
+        <ModelInputList
+          entries={form.modelEntries}
+          onChange={(entries) => setForm((prev) => ({ ...prev, modelEntries: entries }))}
+          addLabel={t('ai_providers.vertex_models_add_btn')}
+          namePlaceholder={t('common.model_name_placeholder')}
+          aliasPlaceholder={t('common.model_alias_placeholder')}
+          disabled={isSaving}
+        />
+        <div className="hint">{t('ai_providers.vertex_models_hint')}</div>
+      </div>
+    </Modal>
+  );
+}

src/components/providers/VertexSection/VertexSection.tsx

@@ -0,0 +1,159 @@
+import { Fragment, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button } from '@/components/ui/Button';
+import { Card } from '@/components/ui/Card';
+import iconVertex from '@/assets/icons/vertex.svg';
+import type { ProviderKeyConfig } from '@/types';
+import { maskApiKey } from '@/utils/format';
+import {
+  buildCandidateUsageSourceIds,
+  calculateStatusBarData,
+  type KeyStats,
+  type UsageDetail,
+} from '@/utils/usage';
+import styles from '@/pages/AiProvidersPage.module.scss';
+import { ProviderList } from '../ProviderList';
+import { ProviderStatusBar } from '../ProviderStatusBar';
+import { getStatsBySource } from '../utils';
+
+interface VertexSectionProps {
+  configs: ProviderKeyConfig[];
+  keyStats: KeyStats;
+  usageDetails: UsageDetail[];
+  loading: boolean;
+  disableControls: boolean;
+  isSwitching: boolean;
+  onAdd: () => void;
+  onEdit: (index: number) => void;
+  onDelete: (index: number) => void;
+}
+
+export function VertexSection({
+  configs,
+  keyStats,
+  usageDetails,
+  loading,
+  disableControls,
+  isSwitching,
+  onAdd,
+  onEdit,
+  onDelete,
+}: VertexSectionProps) {
+  const { t } = useTranslation();
+  const actionsDisabled = disableControls || loading || isSwitching;
+
+  const statusBarCache = useMemo(() => {
+    const cache = new Map<string, ReturnType<typeof calculateStatusBarData>>();
+
+    configs.forEach((config) => {
+      if (!config.apiKey) return;
+      const candidates = buildCandidateUsageSourceIds({
+        apiKey: config.apiKey,
+        prefix: config.prefix,
+      });
+      if (!candidates.length) return;
+      const candidateSet = new Set(candidates);
+      const filteredDetails = usageDetails.filter((detail) => candidateSet.has(detail.source));
+      cache.set(config.apiKey, calculateStatusBarData(filteredDetails));
+    });
+
+    return cache;
+  }, [configs, usageDetails]);
+
+  return (
+    <>
+      <Card
+        title={
+          <span className={styles.cardTitle}>
+            <img src={iconVertex} alt="" className={styles.cardTitleIcon} />
+            {t('ai_providers.vertex_title')}
+          </span>
+        }
+        extra={
+          <Button size="sm" onClick={onAdd} disabled={actionsDisabled}>
+            {t('ai_providers.vertex_add_button')}
+          </Button>
+        }
+      >
+        <ProviderList<ProviderKeyConfig>
+          items={configs}
+          loading={loading}
+          keyField={(item) => item.apiKey}
+          emptyTitle={t('ai_providers.vertex_empty_title')}
+          emptyDescription={t('ai_providers.vertex_empty_desc')}
+          onEdit={onEdit}
+          onDelete={onDelete}
+          actionsDisabled={actionsDisabled}
+          renderContent={(item, index) => {
+            const stats = getStatsBySource(item.apiKey, keyStats, item.prefix);
+            const headerEntries = Object.entries(item.headers || {});
+            const statusData = statusBarCache.get(item.apiKey) || calculateStatusBarData([]);
+
+            return (
+              <Fragment>
+                <div className="item-title">
+                  {t('ai_providers.vertex_item_title')} #{index + 1}
+                </div>
+                <div className={styles.fieldRow}>
+                  <span className={styles.fieldLabel}>{t('common.api_key')}:</span>
+                  <span className={styles.fieldValue}>{maskApiKey(item.apiKey)}</span>
+                </div>
+                {item.prefix && (
+                  <div className={styles.fieldRow}>
+                    <span className={styles.fieldLabel}>{t('common.prefix')}:</span>
+                    <span className={styles.fieldValue}>{item.prefix}</span>
+                  </div>
+                )}
+                {item.baseUrl && (
+                  <div className={styles.fieldRow}>
+                    <span className={styles.fieldLabel}>{t('common.base_url')}:</span>
+                    <span className={styles.fieldValue}>{item.baseUrl}</span>
+                  </div>
+                )}
+                {item.proxyUrl && (
+                  <div className={styles.fieldRow}>
+                    <span className={styles.fieldLabel}>{t('common.proxy_url')}:</span>
+                    <span className={styles.fieldValue}>{item.proxyUrl}</span>
+                  </div>
+                )}
+                {headerEntries.length > 0 && (
+                  <div className={styles.headerBadgeList}>
+                    {headerEntries.map(([key, value]) => (
+                      <span key={key} className={styles.headerBadge}>
+                        <strong>{key}:</strong> {value}
+                      </span>
+                    ))}
+                  </div>
+                )}
+                {item.models?.length ? (
+                  <div className={styles.modelTagList}>
+                    <span className={styles.modelCountLabel}>
+                      {t('ai_providers.vertex_models_count')}: {item.models.length}
+                    </span>
+                    {item.models.map((model) => (
+                      <span key={`${model.name}-${model.alias || 'default'}`} className={styles.modelTag}>
+                        <span className={styles.modelName}>{model.name}</span>
+                        {model.alias && (
+                          <span className={styles.modelAlias}>{model.alias}</span>
+                        )}
+                      </span>
+                    ))}
+                  </div>
+                ) : null}
+                <div className={styles.cardStats}>
+                  <span className={`${styles.statPill} ${styles.statSuccess}`}>
+                    {t('stats.success')}: {stats.success}
+                  </span>
+                  <span className={`${styles.statPill} ${styles.statFailure}`}>
+                    {t('stats.failure')}: {stats.failure}
+                  </span>
+                </div>
+                <ProviderStatusBar statusData={statusData} />
+              </Fragment>
+            );
+          }}
+        />
+      </Card>
+    </>
+  );
+}

src/components/providers/VertexSection/index.ts

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

src/components/providers/hooks/useProviderStats.ts

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

src/components/providers/index.ts

@@ -0,0 +1,12 @@
+export { AmpcodeSection } from './AmpcodeSection';
+export { ClaudeSection } from './ClaudeSection';
+export { CodexSection } from './CodexSection';
+export { GeminiSection } from './GeminiSection';
+export { OpenAISection } from './OpenAISection';
+export { VertexSection } from './VertexSection';
+export { ProviderList } from './ProviderList';
+export { ProviderStatusBar } from './ProviderStatusBar';
+export { ProviderNav } from './ProviderNav';
+export * from './hooks/useProviderStats';
+export * from './types';
+export * from './utils';

src/components/providers/types.ts

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

src/components/providers/utils.ts

@@ -0,0 +1,149 @@
+import type { AmpcodeConfig, AmpcodeModelMapping, ApiKeyEntry } from '@/types';
+import { buildCandidateUsageSourceIds, type KeyStatBucket, type 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}/models`;
+};
+
+export const buildOpenAIChatCompletionsEndpoint = (baseUrl: string): string => {
+  const trimmed = normalizeOpenAIBaseUrl(baseUrl);
+  if (!trimmed) return '';
+  if (trimmed.endsWith('/chat/completions')) {
+    return trimmed;
+  }
+  return `${trimmed}/chat/completions`;
+};
+
+// 根据 source (apiKey) 获取统计数据 - 与旧版逻辑一致
+export const getStatsBySource = (
+  apiKey: string,
+  keyStats: KeyStats,
+  prefix?: string
+): KeyStatBucket => {
+  const bySource = keyStats.bySource ?? {};
+  const candidates = buildCandidateUsageSourceIds({ apiKey, prefix });
+  if (!candidates.length) {
+    return { success: 0, failure: 0 };
+  }
+
+  let success = 0;
+  let failure = 0;
+  candidates.forEach((candidate) => {
+    const stats = bySource[candidate];
+    if (!stats) return;
+    success += stats.success;
+    failure += stats.failure;
+  });
+
+  return { success, failure };
+};
+
+// 对于 OpenAI 提供商，汇总所有 apiKeyEntries 的统计 - 与旧版逻辑一致
+export const getOpenAIProviderStats = (
+  apiKeyEntries: ApiKeyEntry[] | undefined,
+  keyStats: KeyStats,
+  providerPrefix?: string
+): KeyStatBucket => {
+  const bySource = keyStats.bySource ?? {};
+
+  const sourceIds = new Set<string>();
+  buildCandidateUsageSourceIds({ prefix: providerPrefix }).forEach((id) => sourceIds.add(id));
+  (apiKeyEntries || []).forEach((entry) => {
+    buildCandidateUsageSourceIds({ apiKey: entry?.apiKey }).forEach((id) => sourceIds.add(id));
+  });
+
+  let success = 0;
+  let failure = 0;
+  sourceIds.forEach((id) => {
+    const stats = bySource[id];
+    if (!stats) return;
+    success += stats.success;
+    failure += stats.failure;
+  });
+
+  return { success, failure };
+};
+
+export const buildApiKeyEntry = (input?: Partial<ApiKeyEntry>): ApiKeyEntry => ({
+  apiKey: input?.apiKey ?? '',
+  proxyUrl: input?.proxyUrl ?? '',
+  headers: input?.headers ?? {},
+});
+
+export const ampcodeMappingsToEntries = (mappings?: AmpcodeModelMapping[]): ModelEntry[] => {
+  if (!Array.isArray(mappings) || mappings.length === 0) {
+    return [{ name: '', alias: '' }];
+  }
+  return mappings.map((mapping) => ({
+    name: mapping.from ?? '',
+    alias: mapping.to ?? '',
+  }));
+};
+
+export const entriesToAmpcodeMappings = (entries: ModelEntry[]): AmpcodeModelMapping[] => {
+  const seen = new Set<string>();
+  const mappings: AmpcodeModelMapping[] = [];
+
+  entries.forEach((entry) => {
+    const from = entry.name.trim();
+    const to = entry.alias.trim();
+    if (!from || !to) return;
+    const key = from.toLowerCase();
+    if (seen.has(key)) return;
+    seen.add(key);
+    mappings.push({ from, to });
+  });
+
+  return mappings;
+};
+
+export const buildAmpcodeFormState = (ampcode?: AmpcodeConfig | null): AmpcodeFormState => ({
+  upstreamUrl: ampcode?.upstreamUrl ?? '',
+  upstreamApiKey: '',
+  forceModelMappings: ampcode?.forceModelMappings ?? false,
+  mappingEntries: ampcodeMappingsToEntries(ampcode?.modelMappings),
+});

src/components/quota/QuotaCard.tsx

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

src/components/quota/QuotaSection.tsx

@@ -0,0 +1,321 @@
+/**
+ * Generic quota section component.
+ */
+
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Card } from '@/components/ui/Card';
+import { Button } from '@/components/ui/Button';
+import { EmptyState } from '@/components/ui/EmptyState';
+import { triggerHeaderRefresh } from '@/hooks/useHeaderRefresh';
+import { useQuotaStore, useThemeStore } from '@/stores';
+import type { AuthFileItem, ResolvedTheme } from '@/types';
+import { QuotaCard } from './QuotaCard';
+import type { QuotaStatusState } from './QuotaCard';
+import { useQuotaLoader } from './useQuotaLoader';
+import type { QuotaConfig } from './quotaConfigs';
+import { useGridColumns } from './useGridColumns';
+import { IconRefreshCw } from '@/components/ui/icons';
+import styles from '@/pages/QuotaPage.module.scss';
+
+type QuotaUpdater<T> = T | ((prev: T) => T);
+
+type QuotaSetter<T> = (updater: QuotaUpdater<T>) => void;
+
+type ViewMode = 'paged' | 'all';
+
+const MAX_ITEMS_PER_PAGE = 14;
+const MAX_SHOW_ALL_THRESHOLD = 30;
+
+interface QuotaPaginationState<T> {
+  pageSize: number;
+  totalPages: number;
+  currentPage: number;
+  pageItems: T[];
+  setPageSize: (size: number) => void;
+  goToPrev: () => void;
+  goToNext: () => void;
+  loading: boolean;
+  loadingScope: 'page' | 'all' | null;
+  setLoading: (loading: boolean, scope?: 'page' | 'all' | null) => void;
+}
+
+const useQuotaPagination = <T,>(items: T[], defaultPageSize = 6): QuotaPaginationState<T> => {
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSizeState] = useState(defaultPageSize);
+  const [loading, setLoadingState] = useState(false);
+  const [loadingScope, setLoadingScope] = useState<'page' | 'all' | null>(null);
+
+  const totalPages = useMemo(
+    () => Math.max(1, Math.ceil(items.length / pageSize)),
+    [items.length, pageSize]
+  );
+
+  const currentPage = useMemo(() => Math.min(page, totalPages), [page, totalPages]);
+
+  const pageItems = useMemo(() => {
+    const start = (currentPage - 1) * pageSize;
+    return items.slice(start, start + pageSize);
+  }, [items, currentPage, pageSize]);
+
+  const setPageSize = useCallback((size: number) => {
+    setPageSizeState(size);
+    setPage(1);
+  }, []);
+
+  const goToPrev = useCallback(() => {
+    setPage((prev) => Math.max(1, prev - 1));
+  }, []);
+
+  const goToNext = useCallback(() => {
+    setPage((prev) => Math.min(totalPages, prev + 1));
+  }, [totalPages]);
+
+  const setLoading = useCallback((isLoading: boolean, scope?: 'page' | 'all' | null) => {
+    setLoadingState(isLoading);
+    setLoadingScope(isLoading ? (scope ?? null) : null);
+  }, []);
+
+  return {
+    pageSize,
+    totalPages,
+    currentPage,
+    pageItems,
+    setPageSize,
+    goToPrev,
+    goToNext,
+    loading,
+    loadingScope,
+    setLoading
+  };
+};
+
+interface QuotaSectionProps<TState extends QuotaStatusState, TData> {
+  config: QuotaConfig<TState, TData>;
+  files: AuthFileItem[];
+  loading: boolean;
+  disabled: boolean;
+}
+
+export function QuotaSection<TState extends QuotaStatusState, TData>({
+  config,
+  files,
+  loading,
+  disabled
+}: QuotaSectionProps<TState, TData>) {
+  const { t } = useTranslation();
+  const resolvedTheme: ResolvedTheme = useThemeStore((state) => state.resolvedTheme);
+  const setQuota = useQuotaStore((state) => state[config.storeSetter]) as QuotaSetter<
+    Record<string, TState>
+  >;
+
+  /* Removed useRef */
+  const [columns, gridRef] = useGridColumns(380); // Min card width 380px matches SCSS
+  const [viewMode, setViewMode] = useState<ViewMode>('paged');
+  const [showTooManyWarning, setShowTooManyWarning] = useState(false);
+
+  const filteredFiles = useMemo(() => files.filter((file) => config.filterFn(file)), [
+    files,
+    config
+  ]);
+  const showAllAllowed = filteredFiles.length <= MAX_SHOW_ALL_THRESHOLD;
+  const effectiveViewMode: ViewMode = viewMode === 'all' && !showAllAllowed ? 'paged' : viewMode;
+
+  const {
+    pageSize,
+    totalPages,
+    currentPage,
+    pageItems,
+    setPageSize,
+    goToPrev,
+    goToNext,
+    loading: sectionLoading,
+    setLoading
+  } = useQuotaPagination(filteredFiles);
+
+  useEffect(() => {
+    if (showAllAllowed) return;
+    if (viewMode !== 'all') return;
+
+    let cancelled = false;
+    queueMicrotask(() => {
+      if (cancelled) return;
+      setViewMode('paged');
+      setShowTooManyWarning(true);
+    });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [showAllAllowed, viewMode]);
+
+  // Update page size based on view mode and columns
+  useEffect(() => {
+    if (effectiveViewMode === 'all') {
+      setPageSize(Math.max(1, filteredFiles.length));
+    } else {
+      // Paged mode: 3 rows * columns, capped to avoid oversized pages.
+      setPageSize(Math.min(columns * 3, MAX_ITEMS_PER_PAGE));
+    }
+  }, [effectiveViewMode, columns, filteredFiles.length, setPageSize]);
+
+  const { quota, loadQuota } = useQuotaLoader(config);
+
+  const pendingQuotaRefreshRef = useRef(false);
+  const prevFilesLoadingRef = useRef(loading);
+
+  const handleRefresh = useCallback(() => {
+    pendingQuotaRefreshRef.current = true;
+    void triggerHeaderRefresh();
+  }, []);
+
+  useEffect(() => {
+    const wasLoading = prevFilesLoadingRef.current;
+    prevFilesLoadingRef.current = loading;
+
+    if (!pendingQuotaRefreshRef.current) return;
+    if (loading) return;
+    if (!wasLoading) return;
+
+    pendingQuotaRefreshRef.current = false;
+    const scope = effectiveViewMode === 'all' ? 'all' : 'page';
+    const targets = effectiveViewMode === 'all' ? filteredFiles : pageItems;
+    if (targets.length === 0) return;
+    loadQuota(targets, scope, setLoading);
+  }, [loading, effectiveViewMode, filteredFiles, pageItems, loadQuota, setLoading]);
+
+  useEffect(() => {
+    if (loading) return;
+    if (filteredFiles.length === 0) {
+      setQuota({});
+      return;
+    }
+    setQuota((prev) => {
+      const nextState: Record<string, TState> = {};
+      filteredFiles.forEach((file) => {
+        const cached = prev[file.name];
+        if (cached) {
+          nextState[file.name] = cached;
+        }
+      });
+      return nextState;
+    });
+  }, [filteredFiles, loading, setQuota]);
+
+  const titleNode = (
+    <div className={styles.titleWrapper}>
+      <span>{t(`${config.i18nPrefix}.title`)}</span>
+      {filteredFiles.length > 0 && (
+        <span className={styles.countBadge}>
+          {filteredFiles.length}
+        </span>
+      )}
+    </div>
+  );
+
+  const isRefreshing = sectionLoading || loading;
+
+  return (
+    <Card
+      title={titleNode}
+      extra={
+        <div className={styles.headerActions}>
+          <div className={styles.viewModeToggle}>
+            <Button
+              variant={effectiveViewMode === 'paged' ? 'primary' : 'secondary'}
+              size="sm"
+              onClick={() => setViewMode('paged')}
+            >
+              {t('auth_files.view_mode_paged')}
+            </Button>
+            <Button
+              variant={effectiveViewMode === 'all' ? 'primary' : 'secondary'}
+              size="sm"
+              onClick={() => {
+                if (filteredFiles.length > MAX_SHOW_ALL_THRESHOLD) {
+                  setShowTooManyWarning(true);
+                } else {
+                  setViewMode('all');
+                }
+              }}
+            >
+              {t('auth_files.view_mode_all')}
+            </Button>
+          </div>
+          <Button
+            variant="secondary"
+            size="sm"
+            onClick={handleRefresh}
+            disabled={disabled || isRefreshing}
+            loading={isRefreshing}
+            title={t('quota_management.refresh_files_and_quota')}
+            aria-label={t('quota_management.refresh_files_and_quota')}
+          >
+            {!isRefreshing && <IconRefreshCw size={16} />}
+          </Button>
+        </div>
+      }
+    >
+      {filteredFiles.length === 0 ? (
+        <EmptyState
+          title={t(`${config.i18nPrefix}.empty_title`)}
+          description={t(`${config.i18nPrefix}.empty_desc`)}
+        />
+      ) : (
+        <>
+          <div ref={gridRef} className={config.gridClassName}>
+            {pageItems.map((item) => (
+              <QuotaCard
+                key={item.name}
+                item={item}
+                quota={quota[item.name]}
+                resolvedTheme={resolvedTheme}
+                i18nPrefix={config.i18nPrefix}
+                cardClassName={config.cardClassName}
+                defaultType={config.type}
+                renderQuotaItems={config.renderQuotaItems}
+              />
+            ))}
+          </div>
+          {filteredFiles.length > pageSize && effectiveViewMode === 'paged' && (
+            <div className={styles.pagination}>
+              <Button
+                variant="secondary"
+                size="sm"
+                onClick={goToPrev}
+                disabled={currentPage <= 1}
+              >
+                {t('auth_files.pagination_prev')}
+              </Button>
+              <div className={styles.pageInfo}>
+                {t('auth_files.pagination_info', {
+                  current: currentPage,
+                  total: totalPages,
+                  count: filteredFiles.length
+                })}
+              </div>
+              <Button
+                variant="secondary"
+                size="sm"
+                onClick={goToNext}
+                disabled={currentPage >= totalPages}
+              >
+                {t('auth_files.pagination_next')}
+              </Button>
+            </div>
+          )}
+        </>
+      )}
+      {showTooManyWarning && (
+        <div className={styles.warningOverlay} onClick={() => setShowTooManyWarning(false)}>
+          <div className={styles.warningModal} onClick={(e) => e.stopPropagation()}>
+            <p>{t('auth_files.too_many_files_warning')}</p>
+            <Button variant="primary" size="sm" onClick={() => setShowTooManyWarning(false)}>
+              {t('common.confirm')}
+            </Button>
+          </div>
+        </div>
+      )}
+    </Card>
+  );
+}

src/components/quota/index.ts

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

src/components/quota/quotaConfigs.ts

@@ -0,0 +1,633 @@
+/**
+ * Quota configuration definitions.
+ */
+
+import React from 'react';
+import type { ReactNode } from 'react';
+import type { TFunction } from 'i18next';
+import type {
+  AntigravityQuotaGroup,
+  AntigravityModelsPayload,
+  AntigravityQuotaState,
+  AuthFileItem,
+  CodexRateLimitInfo,
+  CodexQuotaState,
+  CodexUsageWindow,
+  CodexQuotaWindow,
+  CodexUsagePayload,
+  GeminiCliParsedBucket,
+  GeminiCliQuotaBucketState,
+  GeminiCliQuotaState,
+} from '@/types';
+import { apiCallApi, authFilesApi, getApiCallErrorMessage } from '@/services/api';
+import {
+  ANTIGRAVITY_QUOTA_URLS,
+  ANTIGRAVITY_REQUEST_HEADERS,
+  CODEX_USAGE_URL,
+  CODEX_REQUEST_HEADERS,
+  GEMINI_CLI_QUOTA_URL,
+  GEMINI_CLI_REQUEST_HEADERS,
+  normalizeAuthIndexValue,
+  normalizeGeminiCliModelId,
+  normalizeNumberValue,
+  normalizePlanType,
+  normalizeQuotaFraction,
+  normalizeStringValue,
+  parseAntigravityPayload,
+  parseCodexUsagePayload,
+  parseGeminiCliQuotaPayload,
+  resolveCodexChatgptAccountId,
+  resolveCodexPlanType,
+  resolveGeminiCliProjectId,
+  formatCodexResetLabel,
+  formatQuotaResetTime,
+  buildAntigravityQuotaGroups,
+  buildGeminiCliQuotaBuckets,
+  createStatusError,
+  getStatusFromError,
+  isAntigravityFile,
+  isCodexFile,
+  isDisabledAuthFile,
+  isGeminiCliFile,
+  isRuntimeOnlyAuthFile,
+} from '@/utils/quota';
+import type { QuotaRenderHelpers } from './QuotaCard';
+import styles from '@/pages/QuotaPage.module.scss';
+
+type QuotaUpdater<T> = T | ((prev: T) => T);
+
+type QuotaType = 'antigravity' | 'codex' | 'gemini-cli';
+
+const DEFAULT_ANTIGRAVITY_PROJECT_ID = 'bamboo-precept-lgxtn';
+
+export interface QuotaStore {
+  antigravityQuota: Record<string, AntigravityQuotaState>;
+  codexQuota: Record<string, CodexQuotaState>;
+  geminiCliQuota: Record<string, GeminiCliQuotaState>;
+  setAntigravityQuota: (updater: QuotaUpdater<Record<string, AntigravityQuotaState>>) => void;
+  setCodexQuota: (updater: QuotaUpdater<Record<string, CodexQuotaState>>) => void;
+  setGeminiCliQuota: (updater: QuotaUpdater<Record<string, GeminiCliQuotaState>>) => void;
+  clearQuotaCache: () => void;
+}
+
+export interface QuotaConfig<TState, TData> {
+  type: QuotaType;
+  i18nPrefix: string;
+  filterFn: (file: AuthFileItem) => boolean;
+  fetchQuota: (file: AuthFileItem, t: TFunction) => Promise<TData>;
+  storeSelector: (state: QuotaStore) => Record<string, TState>;
+  storeSetter: keyof QuotaStore;
+  buildLoadingState: () => TState;
+  buildSuccessState: (data: TData) => TState;
+  buildErrorState: (message: string, status?: number) => TState;
+  cardClassName: string;
+  controlsClassName: string;
+  controlClassName: string;
+  gridClassName: string;
+  renderQuotaItems: (quota: TState, t: TFunction, helpers: QuotaRenderHelpers) => ReactNode;
+}
+
+const resolveAntigravityProjectId = async (file: AuthFileItem): Promise<string> => {
+  try {
+    const text = await authFilesApi.downloadText(file.name);
+    const trimmed = text.trim();
+    if (!trimmed) return DEFAULT_ANTIGRAVITY_PROJECT_ID;
+
+    const parsed = JSON.parse(trimmed) as Record<string, unknown>;
+    const topLevel = normalizeStringValue(parsed.project_id ?? parsed.projectId);
+    if (topLevel) return topLevel;
+
+    const installed =
+      parsed.installed && typeof parsed.installed === 'object' && parsed.installed !== null
+        ? (parsed.installed as Record<string, unknown>)
+        : null;
+    const installedProjectId = installed
+      ? normalizeStringValue(installed.project_id ?? installed.projectId)
+      : null;
+    if (installedProjectId) return installedProjectId;
+
+    const web =
+      parsed.web && typeof parsed.web === 'object' && parsed.web !== null
+        ? (parsed.web as Record<string, unknown>)
+        : null;
+    const webProjectId = web ? normalizeStringValue(web.project_id ?? web.projectId) : null;
+    if (webProjectId) return webProjectId;
+  } catch {
+    return DEFAULT_ANTIGRAVITY_PROJECT_ID;
+  }
+
+  return DEFAULT_ANTIGRAVITY_PROJECT_ID;
+};
+
+const fetchAntigravityQuota = async (
+  file: AuthFileItem,
+  t: TFunction
+): Promise<AntigravityQuotaGroup[]> => {
+  const rawAuthIndex = file['auth_index'] ?? file.authIndex;
+  const authIndex = normalizeAuthIndexValue(rawAuthIndex);
+  if (!authIndex) {
+    throw new Error(t('antigravity_quota.missing_auth_index'));
+  }
+
+  const projectId = await resolveAntigravityProjectId(file);
+  const requestBody = JSON.stringify({ project: projectId });
+
+  let lastError = '';
+  let lastStatus: number | undefined;
+  let priorityStatus: number | undefined;
+  let hadSuccess = false;
+
+  for (const url of ANTIGRAVITY_QUOTA_URLS) {
+    try {
+      const result = await apiCallApi.request({
+        authIndex,
+        method: 'POST',
+        url,
+        header: { ...ANTIGRAVITY_REQUEST_HEADERS },
+        data: requestBody,
+      });
+
+      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 FIVE_HOUR_SECONDS = 18000;
+  const WEEK_SECONDS = 604800;
+  const WINDOW_META = {
+    codeFiveHour: { id: 'five-hour', labelKey: 'codex_quota.primary_window' },
+    codeWeekly: { id: 'weekly', labelKey: 'codex_quota.secondary_window' },
+    codeReviewFiveHour: { id: 'code-review-five-hour', labelKey: 'codex_quota.code_review_primary_window' },
+    codeReviewWeekly: { id: 'code-review-weekly', labelKey: 'codex_quota.code_review_secondary_window' },
+  } as const;
+
+  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,
+    });
+  };
+
+  const getWindowSeconds = (window?: CodexUsageWindow | null): number | null => {
+    if (!window) return null;
+    return normalizeNumberValue(window.limit_window_seconds ?? window.limitWindowSeconds);
+  };
+
+  const rawLimitReached = rateLimit?.limit_reached ?? rateLimit?.limitReached;
+  const rawAllowed = rateLimit?.allowed;
+
+  const pickClassifiedWindows = (
+    limitInfo?: CodexRateLimitInfo | null
+  ): { fiveHourWindow: CodexUsageWindow | null; weeklyWindow: CodexUsageWindow | null } => {
+    const rawWindows = [
+      limitInfo?.primary_window ?? limitInfo?.primaryWindow ?? null,
+      limitInfo?.secondary_window ?? limitInfo?.secondaryWindow ?? null,
+    ];
+
+    let fiveHourWindow: CodexUsageWindow | null = null;
+    let weeklyWindow: CodexUsageWindow | null = null;
+
+    for (const window of rawWindows) {
+      if (!window) continue;
+      const seconds = getWindowSeconds(window);
+      if (seconds === FIVE_HOUR_SECONDS && !fiveHourWindow) {
+        fiveHourWindow = window;
+      } else if (seconds === WEEK_SECONDS && !weeklyWindow) {
+        weeklyWindow = window;
+      }
+    }
+
+    return { fiveHourWindow, weeklyWindow };
+  };
+
+  const rateWindows = pickClassifiedWindows(rateLimit);
+  addWindow(
+    WINDOW_META.codeFiveHour.id,
+    WINDOW_META.codeFiveHour.labelKey,
+    rateWindows.fiveHourWindow,
+    rawLimitReached,
+    rawAllowed
+  );
+  addWindow(
+    WINDOW_META.codeWeekly.id,
+    WINDOW_META.codeWeekly.labelKey,
+    rateWindows.weeklyWindow,
+    rawLimitReached,
+    rawAllowed
+  );
+
+  const codeReviewWindows = pickClassifiedWindows(codeReviewLimit);
+  const codeReviewLimitReached = codeReviewLimit?.limit_reached ?? codeReviewLimit?.limitReached;
+  const codeReviewAllowed = codeReviewLimit?.allowed;
+  addWindow(
+    WINDOW_META.codeReviewFiveHour.id,
+    WINDOW_META.codeReviewFiveHour.labelKey,
+    codeReviewWindows.fiveHourWindow,
+    codeReviewLimitReached,
+    codeReviewAllowed
+  );
+  addWindow(
+    WINDOW_META.codeReviewWeekly.id,
+    WINDOW_META.codeReviewWeekly.labelKey,
+    codeReviewWindows.weeklyWindow,
+    codeReviewLimitReached,
+    codeReviewAllowed
+  );
+
+  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 = normalizeGeminiCliModelId(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 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 (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) && !isDisabledAuthFile(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) && !isDisabledAuthFile(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) && !isDisabledAuthFile(file),
+  fetchQuota: fetchGeminiCliQuota,
+  storeSelector: (state) => state.geminiCliQuota,
+  storeSetter: 'setGeminiCliQuota',
+  buildLoadingState: () => ({ status: 'loading', buckets: [] }),
+  buildSuccessState: (buckets) => ({ status: 'success', buckets }),
+  buildErrorState: (message, status) => ({
+    status: 'error',
+    buckets: [],
+    error: message,
+    errorStatus: status,
+  }),
+  cardClassName: styles.geminiCliCard,
+  controlsClassName: styles.geminiCliControls,
+  controlClassName: styles.geminiCliControl,
+  gridClassName: styles.geminiCliGrid,
+  renderQuotaItems: renderGeminiCliItems,
+};

src/components/quota/useGridColumns.ts

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

src/components/quota/useQuotaLoader.ts

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

src/components/ui/AutocompleteInput.tsx

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

src/components/ui/Button.tsx

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

src/components/ui/Card.tsx

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

src/components/ui/LoadingSpinner.tsx

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

src/components/ui/Modal.tsx

@@ -1,4 +1,5 @@
-import type { PropsWithChildren, ReactNode } from 'react';
+import { useState, useEffect, useCallback, useRef, type PropsWithChildren, type ReactNode } from 'react';
+import { createPortal } from 'react-dom';
 import { IconX } from './icons';
 
 interface ModalProps {
@@ -7,29 +8,201 @@ interface ModalProps {
   onClose: () => void;
   footer?: ReactNode;
   width?: number | string;
+  className?: string;
+  closeDisabled?: boolean;
 }
 
-export function Modal({ open, title, onClose, footer, width = 520, children }: PropsWithChildren<ModalProps>) {
-  if (!open) return null;
+const CLOSE_ANIMATION_DURATION = 350;
+const MODAL_LOCK_CLASS = 'modal-open';
+let activeModalCount = 0;
 
-  const handleMaskClick = (event: React.MouseEvent<HTMLDivElement>) => {
-    if (event.target === event.currentTarget) {
-      onClose();
+const scrollLockSnapshot = {
+  scrollY: 0,
+  contentScrollTop: 0,
+  contentEl: null as HTMLElement | null,
+  bodyPosition: '',
+  bodyTop: '',
+  bodyLeft: '',
+  bodyRight: '',
+  bodyWidth: '',
+  bodyOverflow: '',
+  htmlOverflow: '',
+};
+
+const resolveContentScrollContainer = () => {
+  if (typeof document === 'undefined') return null;
+  const contentEl = document.querySelector('.content');
+  return contentEl instanceof HTMLElement ? contentEl : null;
+};
+
+const lockScroll = () => {
+  if (typeof document === 'undefined') return;
+  if (activeModalCount === 0) {
+    const body = document.body;
+    const html = document.documentElement;
+    const contentEl = resolveContentScrollContainer();
+
+    scrollLockSnapshot.scrollY = window.scrollY || window.pageYOffset || html.scrollTop || 0;
+    scrollLockSnapshot.contentEl = contentEl;
+    scrollLockSnapshot.contentScrollTop = contentEl?.scrollTop ?? 0;
+    scrollLockSnapshot.bodyPosition = body.style.position;
+    scrollLockSnapshot.bodyTop = body.style.top;
+    scrollLockSnapshot.bodyLeft = body.style.left;
+    scrollLockSnapshot.bodyRight = body.style.right;
+    scrollLockSnapshot.bodyWidth = body.style.width;
+    scrollLockSnapshot.bodyOverflow = body.style.overflow;
+    scrollLockSnapshot.htmlOverflow = html.style.overflow;
+
+    body.classList.add(MODAL_LOCK_CLASS);
+    html.classList.add(MODAL_LOCK_CLASS);
+
+    body.style.position = 'fixed';
+    body.style.top = `-${scrollLockSnapshot.scrollY}px`;
+    body.style.left = '0';
+    body.style.right = '0';
+    body.style.width = '100%';
+    body.style.overflow = 'hidden';
+    html.style.overflow = 'hidden';
+  }
+  activeModalCount += 1;
+};
+
+const unlockScroll = () => {
+  if (typeof document === 'undefined') return;
+  activeModalCount = Math.max(0, activeModalCount - 1);
+  if (activeModalCount === 0) {
+    const body = document.body;
+    const html = document.documentElement;
+    const scrollY = scrollLockSnapshot.scrollY;
+    const contentScrollTop = scrollLockSnapshot.contentScrollTop;
+    const contentEl = scrollLockSnapshot.contentEl;
+
+    body.classList.remove(MODAL_LOCK_CLASS);
+    html.classList.remove(MODAL_LOCK_CLASS);
+
+    body.style.position = scrollLockSnapshot.bodyPosition;
+    body.style.top = scrollLockSnapshot.bodyTop;
+    body.style.left = scrollLockSnapshot.bodyLeft;
+    body.style.right = scrollLockSnapshot.bodyRight;
+    body.style.width = scrollLockSnapshot.bodyWidth;
+    body.style.overflow = scrollLockSnapshot.bodyOverflow;
+    html.style.overflow = scrollLockSnapshot.htmlOverflow;
+
+    if (contentEl) {
+      contentEl.scrollTo({ top: contentScrollTop, left: 0, behavior: 'auto' });
     }
-  };
+    window.scrollTo({ top: scrollY, left: 0, behavior: 'auto' });
 
-  return (
-    <div className="modal-overlay" onClick={handleMaskClick}>
-      <div className="modal" style={{ width }} role="dialog" aria-modal="true">
+    scrollLockSnapshot.scrollY = 0;
+    scrollLockSnapshot.contentScrollTop = 0;
+    scrollLockSnapshot.contentEl = null;
+  }
+};
+
+export function Modal({
+  open,
+  title,
+  onClose,
+  footer,
+  width = 520,
+  className,
+  closeDisabled = false,
+  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(() => {
+    let cancelled = false;
+
+    if (open) {
+      if (closeTimerRef.current !== null) {
+        window.clearTimeout(closeTimerRef.current);
+        closeTimerRef.current = null;
+      }
+      queueMicrotask(() => {
+        if (cancelled) return;
+        setIsVisible(true);
+        setIsClosing(false);
+      });
+    } else if (isVisible) {
+      queueMicrotask(() => {
+        if (cancelled) return;
+        startClose(false);
+      });
+    }
+
+    return () => {
+      cancelled = true;
+    };
+  }, [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'}${className ? ` ${className}` : ''}`;
+
+  const modalContent = (
+    <div className={overlayClass}>
+      <div className={modalClass} style={{ width }} role="dialog" aria-modal="true">
+        <button
+          type="button"
+          className="modal-close-floating"
+          onClick={closeDisabled ? undefined : handleClose}
+          aria-label="Close"
+          disabled={closeDisabled}
+        >
+          <IconX size={20} />
+        </button>
         <div className="modal-header">
           <div className="modal-title">{title}</div>
-          <button className="modal-close" onClick={onClose} aria-label="Close">
-            <IconX size={18} />
-          </button>
         </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

@@ -1,12 +1,7 @@
 import { Fragment } from 'react';
 import { Button } from './Button';
 import { IconX } from './icons';
-import type { ModelAlias } from '@/types';
-
-interface ModelEntry {
-  name: string;
-  alias: string;
-}
+import type { ModelEntry } from './modelInputListUtils';
 
 interface ModelInputListProps {
   entries: ModelEntry[];
@@ -17,29 +12,6 @@ interface ModelInputListProps {
   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,

src/components/ui/ToggleSwitch.module.scss

@@ -0,0 +1,58 @@
+.root {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: $spacing-sm;
+  cursor: pointer;
+}
+
+.labelLeft {
+  .label {
+    order: -1;
+  }
+}
+
+.disabled {
+  cursor: not-allowed;
+}
+
+.root input {
+  width: 0;
+  height: 0;
+  opacity: 0;
+  position: absolute;
+}
+
+.track {
+  width: 44px;
+  height: 24px;
+  background: var(--border-color);
+  border-radius: $radius-full;
+  position: relative;
+  transition: background $transition-fast;
+}
+
+.thumb {
+  position: absolute;
+  top: 3px;
+  left: 3px;
+  width: 18px;
+  height: 18px;
+  background: #fff;
+  border-radius: $radius-full;
+  box-shadow: $shadow-sm;
+  transition: transform $transition-fast;
+}
+
+.root input:checked + .track {
+  background: var(--primary-color);
+}
+
+.root input:checked + .track .thumb {
+  transform: translateX(20px);
+}
+
+.label {
+  color: var(--text-primary);
+  font-weight: 600;
+}

src/components/ui/ToggleSwitch.tsx

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

src/components/ui/icons.tsx

@@ -164,6 +164,14 @@ export function IconChevronDown({ size = 20, ...props }: IconProps) {
   );
 }
 
+export function IconChevronLeft({ size = 20, ...props }: IconProps) {
+  return (
+    <svg {...baseSvgProps} width={size} height={size} {...props}>
+      <path d="m15 18-6-6 6-6" />
+    </svg>
+  );
+}
+
 export function IconSearch({ size = 20, ...props }: IconProps) {
   return (
     <svg {...baseSvgProps} width={size} height={size} {...props}>
@@ -303,3 +311,14 @@ export function IconCode({ size = 20, ...props }: IconProps) {
     </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/ui/modelInputListUtils.ts

@@ -0,0 +1,29 @@
+import type { ModelAlias } from '@/types';
+
+export interface ModelEntry {
+  name: string;
+  alias: string;
+}
+
+export const modelsToEntries = (models?: ModelAlias[]): ModelEntry[] => {
+  if (!Array.isArray(models) || models.length === 0) {
+    return [{ name: '', alias: '' }];
+  }
+  return models.map((model) => ({
+    name: model.name || '',
+    alias: model.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;
+    });
+};

src/components/usage/ApiDetailsCard.tsx

@@ -0,0 +1,93 @@
+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}>
+                      <span className={styles.requestCountCell}>
+                        <span>
+                          {t('usage_stats.requests_count')}: {api.totalRequests.toLocaleString()}
+                        </span>
+                        <span className={styles.requestBreakdown}>
+                          (<span className={styles.statSuccess}>{api.successCount.toLocaleString()}</span>{' '}
+                          <span className={styles.statFailure}>{api.failureCount.toLocaleString()}</span>)
+                        </span>
+                      </span>
+                    </span>
+                    <span className={styles.apiBadge}>
+                      {t('usage_stats.tokens_count')}: {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}>
+                        <span className={styles.requestCountCell}>
+                          <span>{stats.requests.toLocaleString()}</span>
+                          <span className={styles.requestBreakdown}>
+                            (<span className={styles.statSuccess}>{stats.successCount.toLocaleString()}</span>{' '}
+                            <span className={styles.statFailure}>{stats.failureCount.toLocaleString()}</span>)
+                          </span>
+                        </span>
+                      </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,64 @@
+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;
+  successCount: number;
+  failureCount: 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>
+                    <span className={styles.requestCountCell}>
+                      <span>{stat.requests.toLocaleString()}</span>
+                      <span className={styles.requestBreakdown}>
+                        (<span className={styles.statSuccess}>{stat.successCount.toLocaleString()}</span>{' '}
+                        <span className={styles.statFailure}>{stat.failureCount.toLocaleString()}</span>)
+                      </span>
+                    </span>
+                  </td>
+                  <td>{formatTokensInMillions(stat.tokens)}</td>
+                  {hasPrices && <td>{stat.cost > 0 ? formatUsd(stat.cost) : '--'}</td>}
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      ) : (
+        <div className={styles.hint}>{t('usage_stats.no_data')}</div>
+      )}
+    </Card>
+  );
+}

src/components/usage/PriceSettingsCard.tsx

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

src/components/usage/StatCards.tsx

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

src/components/usage/UsageChart.tsx

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

src/components/usage/hooks/index.ts

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

src/components/usage/hooks/useChartData.ts

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

src/components/usage/hooks/useSparklines.ts

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

src/components/usage/hooks/useUsageData.ts

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

src/components/usage/index.ts

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

src/hooks/index.ts

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

src/hooks/useEdgeSwipeBack.ts

@@ -0,0 +1,103 @@
+import { useEffect, useRef } from 'react';
+
+type SwipeBackOptions = {
+  enabled?: boolean;
+  edgeSize?: number;
+  threshold?: number;
+  onBack: () => void;
+};
+
+type ActiveGesture = {
+  pointerId: number;
+  startX: number;
+  startY: number;
+  active: boolean;
+};
+
+const DEFAULT_EDGE_SIZE = 28;
+const DEFAULT_THRESHOLD = 90;
+const VERTICAL_TOLERANCE_RATIO = 1.2;
+
+export function useEdgeSwipeBack({
+  enabled = true,
+  edgeSize = DEFAULT_EDGE_SIZE,
+  threshold = DEFAULT_THRESHOLD,
+  onBack,
+}: SwipeBackOptions) {
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const gestureRef = useRef<ActiveGesture | null>(null);
+
+  useEffect(() => {
+    if (!enabled) return;
+    const el = containerRef.current;
+    if (!el) return;
+
+    const reset = () => {
+      gestureRef.current = null;
+    };
+
+    const handlePointerMove = (event: PointerEvent) => {
+      const gesture = gestureRef.current;
+      if (!gesture?.active) return;
+      if (event.pointerId !== gesture.pointerId) return;
+
+      const dx = event.clientX - gesture.startX;
+      const dy = event.clientY - gesture.startY;
+
+      if (Math.abs(dy) > Math.abs(dx) * VERTICAL_TOLERANCE_RATIO) {
+        reset();
+      }
+    };
+
+    const handlePointerUp = (event: PointerEvent) => {
+      const gesture = gestureRef.current;
+      if (!gesture?.active) return;
+      if (event.pointerId !== gesture.pointerId) return;
+
+      const dx = event.clientX - gesture.startX;
+      const dy = event.clientY - gesture.startY;
+      const isHorizontal = Math.abs(dx) > Math.abs(dy) * VERTICAL_TOLERANCE_RATIO;
+
+      reset();
+
+      if (dx >= threshold && isHorizontal) {
+        onBack();
+      }
+    };
+
+    const handlePointerCancel = (event: PointerEvent) => {
+      const gesture = gestureRef.current;
+      if (!gesture?.active) return;
+      if (event.pointerId !== gesture.pointerId) return;
+      reset();
+    };
+
+    const handlePointerDown = (event: PointerEvent) => {
+      if (event.pointerType !== 'touch') return;
+      if (!event.isPrimary) return;
+      if (event.clientX > edgeSize) return;
+
+      gestureRef.current = {
+        pointerId: event.pointerId,
+        startX: event.clientX,
+        startY: event.clientY,
+        active: true,
+      };
+    };
+
+    el.addEventListener('pointerdown', handlePointerDown, { passive: true });
+    window.addEventListener('pointermove', handlePointerMove, { passive: true });
+    window.addEventListener('pointerup', handlePointerUp, { passive: true });
+    window.addEventListener('pointercancel', handlePointerCancel, { passive: true });
+
+    return () => {
+      el.removeEventListener('pointerdown', handlePointerDown);
+      window.removeEventListener('pointermove', handlePointerMove);
+      window.removeEventListener('pointerup', handlePointerUp);
+      window.removeEventListener('pointercancel', handlePointerCancel);
+    };
+  }, [edgeSize, enabled, onBack, threshold]);
+
+  return containerRef;
+}
+