From 5f542715cb773bc005745b61e65d776cf5e28dbe Mon Sep 17 00:00:00 2001
From: duanshuwen <duanshuwen@gogpay.cn>
Date: Thu, 9 Apr 2026 21:49:52 +0800
Subject: [PATCH] feat(models): add models configuration page with provider
 management and token usage

- Replace "Task Center" with "Models" in sidebar and routing
- Add new models configuration page with AI provider account management
- Implement token usage history with filtering, grouping, and visualization
- Create provider store with Pinia for state management
- Add internationalization support for models feature
- Include development analysis documentation for feature implementation
---
 Models-Configuration-Analysis.md              |  84 ++++
 src/components/SideMenus/index.vue            |   2 +-
 src/constant/menus.ts                         |  18 +-
 src/i18n/constants.ts                         |   1 +
 src/i18n/locales/en/models.json               |  58 +++
 src/i18n/locales/ja/models.json               |  58 +++
 src/i18n/locales/zh/models.json               |  58 +++
 src/lib/host-api.ts                           |  46 ++
 src/lib/provider-accounts.ts                  | 126 ++++++
 src/lib/providers.ts                          | 236 +++++++++++
 .../agents/components/ProvidersSettings.vue   | 400 ++++++++++++++++++
 .../components/RequestContentDialog.vue       |  84 ++++
 src/pages/agents/components/UsageBarChart.vue |  84 ++++
 src/pages/agents/index.vue                    | 340 +++++++++++++++
 src/pages/agents/usage-history.ts             | 118 ++++++
 src/pages/task/index.vue                      |  12 -
 src/router/index.ts                           |   6 +-
 src/store/providers.ts                        | 334 +++++++++++++++
 18 files changed, 2040 insertions(+), 25 deletions(-)
 create mode 100644 Models-Configuration-Analysis.md
 create mode 100644 src/i18n/locales/en/models.json
 create mode 100644 src/i18n/locales/ja/models.json
 create mode 100644 src/i18n/locales/zh/models.json
 create mode 100644 src/lib/host-api.ts
 create mode 100644 src/lib/provider-accounts.ts
 create mode 100644 src/lib/providers.ts
 create mode 100644 src/pages/agents/components/ProvidersSettings.vue
 create mode 100644 src/pages/agents/components/RequestContentDialog.vue
 create mode 100644 src/pages/agents/components/UsageBarChart.vue
 create mode 100644 src/pages/agents/index.vue
 create mode 100644 src/pages/agents/usage-history.ts
 delete mode 100644 src/pages/task/index.vue
 create mode 100644 src/store/providers.ts

diff --git a/Models-Configuration-Analysis.md b/Models-Configuration-Analysis.md
new file mode 100644
index 0000000..e41a1bb
--- /dev/null
+++ b/Models-Configuration-Analysis.md
@@ -0,0 +1,84 @@
+# 模型配置 (Models) 功能分析报告与开发计划
+
+本报告基于 `ClawX` 项目中 `/src/pages/Models` 及相关依赖的源码分析，为在 `zn-ai` (Vue 3 + Element Plus) 项目中实现一致且完整的模型配置功能提供分析报告与落地计划。
+
+## 一、 功能实现分析报告
+
+### 1. 核心功能模块划分
+模型配置功能在逻辑上主要分为两大模块：
+*   **提供商与账号管理 (Providers Settings)**
+    *   **配置列表**: 展示支持的 AI 模型提供商（如 OpenAI, Anthropic, Ollama, 硅基流动, 字节 Ark 等），并标识配置状态。
+    *   **鉴权与网络配置**: 支持填写 API Key、Base URL，处理不同提供商的特定配置（如特定的请求头、API Protocol 等）。
+    *   **高可用配置**: 允许为某个账号配置**备用模型 (Fallback Models)** 和 **备用账号 (Fallback Accounts)**，以在请求失败时重试。
+    *   **账号级管理**: 支持同一提供商的多个账号管理（通过 `ProviderAccount` 模型），并支持设置默认提供商。
+*   **Token 用量历史 (Usage History)**
+    *   **数据获取与轮询**: 从后端获取最近的 Token 消耗历史，支持通过定时器（15s）自动轮询和失焦/聚焦刷新。
+    *   **统计与聚合图表**: 根据时间窗口（7天、30天、全部）过滤数据，支持按“模型 (Model)”或“日期 (Day)”聚合统计输入、输出及缓存 Token 数量。
+    *   **明细列表与调试**: 分页展示每次对话的消耗明细（模型、来源、Token 数量、状态、预估费用）。在开发者模式下，可查看请求的原始 Content。
+
+### 2. 技术栈与架构差异（ClawX vs zn-ai）
+由于两个项目底层 UI 框架不同，迁移时需要进行范式转换：
+| 维度 | ClawX (源项目) | zn-ai (目标项目) | 迁移策略 |
+| :--- | :--- | :--- | :--- |
+| **视图框架** | React 18 | Vue 3 (Composition API) | 将 React Hooks (`useEffect`, `useReducer`) 转换为 Vue 的 `ref`, `reactive`, `watch`, `computed`。 |
+| **组件库** | shadcn/ui + lucide-react | Element Plus + @remixicon/vue | 将原生的 Tailwind 结构适配为 `el-form`, `el-table`, `el-dialog` 等组件，图标全量替换。 |
+| **状态管理** | Zustand (`useProviderStore`) | Pinia | 重写 `src/stores/providers.ts` 为 Pinia Store 格式，保留 `init`, `refresh`, `create` 等核心 Action。 |
+| **API 交互** | `hostApiFetch` (REST over IPC) | Axios / 封装的 IPC 请求 | 保持 Payload 结构一致，对接 `zn-ai` 主进程对应的路由。 |
+
+### 3. 核心数据结构 (需无损迁移)
+*   **`ProviderAccount`**: 核心实体，包含 `id`, `vendorId`, `authMode`, `baseUrl`, `model`, `fallbackModels`, `fallbackAccountIds` 等。
+*   **`ProviderTypeInfo` / `PROVIDER_TYPE_INFO`**: 静态元数据，定义各个提供商的默认图标、占位符、文档链接、是否需要 API Key 等。
+*   **`UsageHistoryEntry`**: 用量记录，包含 `inputTokens`, `outputTokens`, `cacheReadTokens`, `usageStatus` 等。
+
+---
+
+## 二、 功能开发计划
+
+为确保模型配置功能在 `zn-ai` 中**代码无缺失、功能高度一致**，制定以下四个阶段的开发计划：
+
+### 阶段一：底层核心逻辑与状态层迁移 (预计 1-2 天)
+**目标**：完成类型定义、静态配置和状态管理的 Vue 适配。
+1.  **移植基础配置与类型**：
+    *   在 `zn-ai/src/lib/providers.ts` 中，完整迁移 `ProviderType`, `ProviderConfig`, `ProviderAccount`, `PROVIDER_TYPE_INFO` 等静态元数据定义。
+    *   在 `zn-ai/src/lib/provider-accounts.ts` 中，迁移相关辅助函数（如 `buildProviderAccountId`, `hasConfiguredCredentials` 等）。
+2.  **创建 Pinia 状态管理**：
+    *   新建 `zn-ai/src/store/providers.ts`。
+    *   将 Zustand 逻辑重写为 Pinia，实现对 `/api/providers`, `/api/provider-accounts` 的增删改查方法，确保状态同步逻辑一致。
+3.  **移植用量统计核心算法**：
+    *   完整迁移 `ClawX/src/pages/Models/usage-history.ts`，包括 `groupUsageHistory`, `filterUsageHistoryByWindow`, `resolveStableUsageHistory` 等纯纯函数，确保数据处理逻辑 100% 一致。
+
+### 阶段二：配置管理视图重构 (预计 2 天)
+**目标**：实现“AI 提供商配置”交互界面。
+1.  **开发 ProviderSettings 组件**：
+    *   新建 `zn-ai/src/pages/models/components/ProvidersSettings.vue`。
+    *   使用 `Element Plus` 还原 ClawX 的卡片式配置列表和展开面板。
+    *   实现复杂的表单逻辑：API Key 的掩码与更新、Base URL 覆盖、默认模型设置、Fallback 备用链路的选择交互。
+2.  **API Key 连通性测试**：
+    *   实现“验证 Key”按钮交互，调用后端的 `validateApiKey` 服务，根据返回结果给出 `ElMessage` 成功/失败提示。
+
+### 阶段三：Token 用量历史与主页面组装 (预计 1-2 天)
+**目标**：实现 Token 用量大盘及主页面。
+1.  **实现用量统计图表组件 (UsageBarChart)**：
+    *   新建 Vue 组件，使用 Tailwind CSS 的 Flex 布局精确还原 ClawX 的自定义多色进度条图表（输入/输出/缓存 Token 比例展示）。
+2.  **开发 Models 主页面**：
+    *   新建 `zn-ai/src/pages/models/index.vue`。
+    *   引入 `ProvidersSettings.vue`。
+    *   实现下半部分的用量记录（Usage History）展示：
+        *   集成基于时间（7天/30天/全部）和聚合方式（模型/日期）的筛选器。
+        *   实现 `fetchUsageHistoryWithRetry` 带重试机制和自动轮询（15s/窗口聚焦）的数据拉取逻辑。
+        *   实现列表分页和各项 Token 详细消耗展示。
+3.  **开发者模式弹窗**：
+    *   实现点击用量记录查看请求详情（Content）的 `el-dialog`。
+
+### 阶段四：国际化、联调与收尾 (预计 1 天)
+**目标**：多语言支持与端到端可用性保障。
+1.  **多语言词条补全**：
+    *   提取上述页面中的硬编码中文，写入 `zn-ai/src/i18n/locales/{zh,en,ja}/models.json`。
+    *   使用 `useI18n()` 进行全量替换，确保一致性。
+2.  **主进程接口对齐联调**：
+    *   验证 Electron 主进程是否已完全实现 `/api/provider-accounts`, `/api/providers`, `/api/usage/recent-token-history` 路由，并保证响应结构一致。若有差异，需在前后端通信层进行抹平。
+3.  **UI 细节走查**：
+    *   测试亮色/暗色模式下的颜色变量兼容性（如 `border-black/10 dark:border-white/10` 转换为合适的 Tailwind/Element 变量）。
+
+---
+**备注**：此计划遵循了从数据驱动到 UI 呈现的构建原则，由于源项目高度依赖于状态的订阅分发，强烈建议在实施阶段严格按照【阶段一】优先完成 Pinia Store，再推进后续 UI 开发，以杜绝代码缺失或状态不一致的问题。
\ No newline at end of file
diff --git a/src/components/SideMenus/index.vue b/src/components/SideMenus/index.vue
index 7725569..1c1218f 100644
--- a/src/components/SideMenus/index.vue
+++ b/src/components/SideMenus/index.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="w-[80px] h-full box-border flex flex-col items-center pb-[8px]">
-        <div :class="['flex flex-col gap-[16px]', { 'mt-auto mb-[8px] shrink-1': item.id === 3 }]"
+        <div :class="['flex flex-col gap-[16px]', { 'mt-auto mb-[8px] shrink-1': item.id === 4 }]"
             v-for="(item) in menus" :key="item.id">
             <div :class="['cursor-pointer flex flex-col items-center justify-center']" @click="handleClick(item)">
                 <div :class="['box-border rounded-[16px] p-[8px]', { 'bg-white': item.id === currentId }]">
diff --git a/src/constant/menus.ts b/src/constant/menus.ts
index c7821fe..2e906c7 100644
--- a/src/constant/menus.ts
+++ b/src/constant/menus.ts
@@ -1,4 +1,4 @@
-import { RiHomeLine, RiFileEditLine, RiApps2AiLine, RiSettingsLine } from '@remixicon/vue'
+import { RiHomeLine, RiFileEditLine, RiCpuLine, RiSettingsLine } from '@remixicon/vue'
 
 // 菜单列表申明
 export interface MenuItem {
@@ -27,16 +27,16 @@ export const menus: MenuItem[] = [
         activeColor: '#2B7FFF',
         url: '/knowledge',
     },
-    // {
-    //     id: 3,
-    //     name: '任务中心',
-    //     icon: RiApps2AiLine,
-    //     color: '#525866',
-    //     activeColor: '#2B7FFF',
-    //     url: '/task',
-    // },
     {
         id: 3,
+        name: '模型',
+        icon: RiCpuLine,
+        color: '#525866',
+        activeColor: '#2B7FFF',
+        url: '/agents',
+    },
+    {
+        id: 4,
         name: '设置',
         icon: RiSettingsLine,
         color: '#525866',
diff --git a/src/i18n/constants.ts b/src/i18n/constants.ts
index 9508071..72b15fb 100644
--- a/src/i18n/constants.ts
+++ b/src/i18n/constants.ts
@@ -19,5 +19,6 @@ export const NAMESPACES = [
   'rate',
   'knowledge',
   'component',
+  'models',
 ] as const;
 export type Namespace = (typeof NAMESPACES)[number];
\ No newline at end of file
diff --git a/src/i18n/locales/en/models.json b/src/i18n/locales/en/models.json
new file mode 100644
index 0000000..79caa73
--- /dev/null
+++ b/src/i18n/locales/en/models.json
@@ -0,0 +1,58 @@
+{
+  "title": "Models Configuration",
+  "subtitle": "Configure your AI providers and view token usage.",
+  "aiProviders": {
+    "title": "AI Providers",
+    "subtitle": "Manage your AI models and API keys.",
+    "addProvider": "Add Provider",
+    "default": "Default",
+    "configured": "Configured",
+    "notConfigured": "Not Configured",
+    "setDefault": "Set Default",
+    "edit": "Edit",
+    "delete": "Delete",
+    "deleteConfirm": "Are you sure you want to delete this provider?",
+    "empty": "No providers configured yet. Click \"Add Provider\" to start.",
+    "editProvider": "Edit Provider",
+    "apiKey": "API Key",
+    "apiKeyPlaceholder": "Enter API Key",
+    "validate": "Validate",
+    "baseUrl": "Base URL (Optional)",
+    "defaultModel": "Default Model (Optional)",
+    "setDefaultSuccess": "Default provider set successfully",
+    "deleteSuccess": "Provider deleted successfully",
+    "apiKeyRequired": "Please enter an API Key first",
+    "validateSuccess": "API Key is valid!",
+    "validateFail": "Invalid API Key",
+    "saveSuccess": "Provider saved successfully"
+  },
+  "recentTokenHistory": {
+    "title": "Token Usage History",
+    "loading": "Loading usage history...",
+    "empty": "No usage history available.",
+    "emptyForWindow": "No usage history in the selected time window.",
+    "groupByModel": "By Model",
+    "groupByTime": "By Time",
+    "last7Days": "Last 7 Days",
+    "last30Days": "Last 30 Days",
+    "allTime": "All Time",
+    "showingLast": "Showing {count} records",
+    "totalTokens": "Total",
+    "inputShort": "Input",
+    "outputShort": "Output",
+    "cacheShort": "Cache",
+    "unknownModel": "Unknown Model",
+    "noUsage": "No usage info",
+    "usageParseError": "Error parsing usage",
+    "input": "Input: {value}",
+    "output": "Output: {value}",
+    "cacheRead": "Cache Read: {value}",
+    "cacheWrite": "Cache Write: {value}",
+    "cost": "${amount}",
+    "viewContent": "View Content",
+    "page": "Page {current} of {total}",
+    "prev": "Prev",
+    "next": "Next",
+    "contentDialogTitle": "Request Content"
+  }
+}
diff --git a/src/i18n/locales/ja/models.json b/src/i18n/locales/ja/models.json
new file mode 100644
index 0000000..61dddba
--- /dev/null
+++ b/src/i18n/locales/ja/models.json
@@ -0,0 +1,58 @@
+{
+  "title": "モデル構成",
+  "subtitle": "AIプロバイダーを設定し、トークンの使用状況を表示します。",
+  "aiProviders": {
+    "title": "AIプロバイダー",
+    "subtitle": "AIモデルとAPIキーを管理します。",
+    "addProvider": "プロバイダーを追加",
+    "default": "デフォルト",
+    "configured": "設定済み",
+    "notConfigured": "未設定",
+    "setDefault": "デフォルトに設定",
+    "edit": "編集",
+    "delete": "削除",
+    "deleteConfirm": "このプロバイダーを削除してもよろしいですか？",
+    "empty": "プロバイダーがまだ設定されていません。「プロバイダーを追加」をクリックして開始してください。",
+    "editProvider": "プロバイダーを編集",
+    "apiKey": "APIキー",
+    "apiKeyPlaceholder": "APIキーを入力",
+    "validate": "検証",
+    "baseUrl": "ベースURL (オプション)",
+    "defaultModel": "デフォルトモデル (オプション)",
+    "setDefaultSuccess": "デフォルトのプロバイダーが正常に設定されました",
+    "deleteSuccess": "プロバイダーが正常に削除されました",
+    "apiKeyRequired": "最初にAPIキーを入力してください",
+    "validateSuccess": "APIキーは有効です！",
+    "validateFail": "無効なAPIキー",
+    "saveSuccess": "プロバイダーが正常に保存されました"
+  },
+  "recentTokenHistory": {
+    "title": "トークン使用履歴",
+    "loading": "使用履歴を読み込み中...",
+    "empty": "使用履歴はありません。",
+    "emptyForWindow": "選択した期間内に使用履歴はありません。",
+    "groupByModel": "モデル別",
+    "groupByTime": "時間別",
+    "last7Days": "過去7日間",
+    "last30Days": "過去30日間",
+    "allTime": "すべての期間",
+    "showingLast": "{count}件の記録を表示中",
+    "totalTokens": "合計",
+    "inputShort": "入力",
+    "outputShort": "出力",
+    "cacheShort": "キャッシュ",
+    "unknownModel": "不明なモデル",
+    "noUsage": "使用情報なし",
+    "usageParseError": "使用状況の解析エラー",
+    "input": "入力: {value}",
+    "output": "出力: {value}",
+    "cacheRead": "キャッシュ読み取り: {value}",
+    "cacheWrite": "キャッシュ書き込み: {value}",
+    "cost": "${amount}",
+    "viewContent": "コンテンツを表示",
+    "page": "ページ {current} / {total}",
+    "prev": "前へ",
+    "next": "次へ",
+    "contentDialogTitle": "リクエストコンテンツ"
+  }
+}
diff --git a/src/i18n/locales/zh/models.json b/src/i18n/locales/zh/models.json
new file mode 100644
index 0000000..7d0b92f
--- /dev/null
+++ b/src/i18n/locales/zh/models.json
@@ -0,0 +1,58 @@
+{
+  "title": "模型配置",
+  "subtitle": "管理你的 AI 提供商并查看 Token 用量。",
+  "aiProviders": {
+    "title": "AI 提供商",
+    "subtitle": "管理你的 AI 模型和 API 密钥。",
+    "addProvider": "添加提供商",
+    "default": "默认",
+    "configured": "已配置",
+    "notConfigured": "未配置",
+    "setDefault": "设为默认",
+    "edit": "编辑",
+    "delete": "删除",
+    "deleteConfirm": "确定要删除此提供商吗？",
+    "empty": "暂无配置的提供商。点击“添加提供商”开始配置。",
+    "editProvider": "编辑提供商",
+    "apiKey": "API Key",
+    "apiKeyPlaceholder": "输入 API Key",
+    "validate": "验证",
+    "baseUrl": "Base URL (可选)",
+    "defaultModel": "默认模型 (可选)",
+    "setDefaultSuccess": "已成功设为默认提供商",
+    "deleteSuccess": "提供商删除成功",
+    "apiKeyRequired": "请先输入 API Key",
+    "validateSuccess": "API Key 验证成功！",
+    "validateFail": "无效的 API Key",
+    "saveSuccess": "提供商保存成功"
+  },
+  "recentTokenHistory": {
+    "title": "Token 用量历史",
+    "loading": "加载中...",
+    "empty": "暂无用量记录。",
+    "emptyForWindow": "所选时间范围内暂无用量记录。",
+    "groupByModel": "按模型",
+    "groupByTime": "按时间",
+    "last7Days": "最近 7 天",
+    "last30Days": "最近 30 天",
+    "allTime": "全部时间",
+    "showingLast": "显示最后 {count} 条记录",
+    "totalTokens": "总计",
+    "inputShort": "输入",
+    "outputShort": "输出",
+    "cacheShort": "缓存",
+    "unknownModel": "未知模型",
+    "noUsage": "无用量信息",
+    "usageParseError": "用量解析错误",
+    "input": "输入: {value}",
+    "output": "输出: {value}",
+    "cacheRead": "缓存读取: {value}",
+    "cacheWrite": "缓存写入: {value}",
+    "cost": "${amount}",
+    "viewContent": "查看内容",
+    "page": "第 {current} 页 / 共 {total} 页",
+    "prev": "上一页",
+    "next": "下一页",
+    "contentDialogTitle": "请求内容"
+  }
+}
diff --git a/src/lib/host-api.ts b/src/lib/host-api.ts
new file mode 100644
index 0000000..133efd7
--- /dev/null
+++ b/src/lib/host-api.ts
@@ -0,0 +1,46 @@
+import { IPC_EVENTS } from '@lib/constants';
+
+export async function hostApiFetch<T>(path: string, init?: RequestInit): Promise<T> {
+  const method = init?.method || 'GET';
+  
+  try {
+    // Attempt to call via IPC if window.api exists
+    if ((window as any).api && (window as any).api.invoke) {
+      const response = await (window as any).api.invoke('hostapi:fetch', {
+        path,
+        method,
+        headers: init?.headers || {},
+        body: init?.body ?? null,
+      });
+      
+      if (response && typeof response === 'object') {
+        if (response.success || response.ok) {
+          return (response.json ?? response.data?.json ?? response.data ?? []) as T;
+        } else {
+          throw new Error(response.error || response.text || 'Request failed');
+        }
+      }
+      
+      return response as T;
+    }
+  } catch (error) {
+    console.warn(`[hostApiFetch] IPC request failed for ${path}:`, error);
+  }
+
+  // Dummy fallback for UI development if backend is not ready
+  console.warn(`[hostApiFetch] Using dummy data for ${path}`);
+  if (path.includes('recent-token-history')) {
+    return [] as any as T;
+  }
+  if (path.includes('provider-accounts')) {
+    return (method === 'GET' ? [] : { success: true }) as any as T;
+  }
+  if (path.includes('providers')) {
+    return (method === 'GET' ? [] : { success: true }) as any as T;
+  }
+  if (path.includes('provider-vendors')) {
+    return [] as any as T;
+  }
+  
+  return {} as T;
+}
diff --git a/src/lib/provider-accounts.ts b/src/lib/provider-accounts.ts
new file mode 100644
index 0000000..80e0162
--- /dev/null
+++ b/src/lib/provider-accounts.ts
@@ -0,0 +1,126 @@
+import { hostApiFetch } from '@lib/host-api';
+import type {
+  ProviderAccount,
+  ProviderType,
+  ProviderVendorInfo,
+  ProviderWithKeyInfo,
+} from '@lib/providers';
+
+export interface ProviderSnapshot {
+  accounts: ProviderAccount[];
+  statuses: ProviderWithKeyInfo[];
+  vendors: ProviderVendorInfo[];
+  defaultAccountId: string | null;
+}
+
+export interface ProviderListItem {
+  account: ProviderAccount;
+  vendor?: ProviderVendorInfo;
+  status?: ProviderWithKeyInfo;
+}
+
+export async function fetchProviderSnapshot(): Promise<ProviderSnapshot> {
+  const [accounts, statuses, vendors, defaultInfo] = await Promise.all([
+    hostApiFetch<ProviderAccount[]>('/api/provider-accounts'),
+    hostApiFetch<ProviderWithKeyInfo[]>('/api/providers'),
+    hostApiFetch<ProviderVendorInfo[]>('/api/provider-vendors'),
+    hostApiFetch<{ accountId: string | null }>('/api/provider-accounts/default'),
+  ]);
+
+  return {
+    accounts,
+    statuses,
+    vendors,
+    defaultAccountId: defaultInfo.accountId,
+  };
+}
+
+export function hasConfiguredCredentials(
+  account: ProviderAccount,
+  status?: ProviderWithKeyInfo,
+): boolean {
+  if (account.authMode === 'oauth_device' || account.authMode === 'oauth_browser' || account.authMode === 'local') {
+    return true;
+  }
+  return status?.hasKey ?? false;
+}
+
+export function pickPreferredAccount(
+  accounts: ProviderAccount[],
+  defaultAccountId: string | null,
+  vendorId: ProviderType | string,
+  statusMap: Map<string, ProviderWithKeyInfo>,
+): ProviderAccount | null {
+  const sameVendor = accounts.filter((account) => account.vendorId === vendorId);
+  if (sameVendor.length === 0) return null;
+
+  return (
+    (defaultAccountId ? sameVendor.find((account) => account.id === defaultAccountId) : undefined)
+    || sameVendor.find((account) => hasConfiguredCredentials(account, statusMap.get(account.id)))
+    || sameVendor[0]
+  );
+}
+
+export function buildProviderAccountId(
+  vendorId: ProviderType,
+  existingAccountId: string | null,
+  vendors: ProviderVendorInfo[],
+): string {
+  if (existingAccountId) {
+    return existingAccountId;
+  }
+
+  const vendor = vendors.find((candidate) => candidate.id === vendorId);
+  return vendor?.supportsMultipleAccounts ? `${vendorId}-${crypto.randomUUID()}` : vendorId;
+}
+
+export function legacyProviderToAccount(provider: ProviderWithKeyInfo): ProviderAccount {
+  return {
+    id: provider.id,
+    vendorId: provider.type,
+    label: provider.name,
+    authMode: provider.type === 'ollama' ? 'local' : 'api_key',
+    baseUrl: provider.baseUrl,
+    headers: provider.headers,
+    model: provider.model,
+    fallbackModels: provider.fallbackModels,
+    fallbackAccountIds: provider.fallbackProviderIds,
+    enabled: provider.enabled,
+    isDefault: false,
+    createdAt: provider.createdAt,
+    updatedAt: provider.updatedAt,
+  };
+}
+
+export function buildProviderListItems(
+  accounts: ProviderAccount[],
+  statuses: ProviderWithKeyInfo[],
+  vendors: ProviderVendorInfo[],
+  defaultAccountId: string | null,
+): ProviderListItem[] {
+  const safeAccounts = accounts ?? [];
+  const safeStatuses = statuses ?? [];
+  const safeVendors = vendors ?? [];
+  const vendorMap = new Map(safeVendors.map((vendor) => [vendor.id, vendor]));
+  const statusMap = new Map(safeStatuses.map((status) => [status.id, status]));
+
+  if (safeAccounts.length > 0) {
+    return safeAccounts
+      .map((account) => ({
+        account,
+        vendor: vendorMap.get(account.vendorId),
+        status: statusMap.get(account.id),
+      }))
+      .sort((left, right) => {
+        if (left.account.id === defaultAccountId) return -1;
+        if (right.account.id === defaultAccountId) return 1;
+        return right.account.updatedAt.localeCompare(left.account.updatedAt);
+      });
+  }
+
+  return safeStatuses.map((status) => ({
+    account: legacyProviderToAccount(status),
+    vendor: vendorMap.get(status.type),
+    status,
+  }));
+}
diff --git a/src/lib/providers.ts b/src/lib/providers.ts
new file mode 100644
index 0000000..0951cf1
--- /dev/null
+++ b/src/lib/providers.ts
@@ -0,0 +1,236 @@
+export const PROVIDER_TYPES = [
+  'anthropic',
+  'openai',
+  'google',
+  'openrouter',
+  'ark',
+  'moonshot',
+  'siliconflow',
+  'minimax-portal',
+  'minimax-portal-cn',
+  'modelstudio',
+  'ollama',
+  'custom',
+] as const;
+export type ProviderType = (typeof PROVIDER_TYPES)[number];
+
+export const BUILTIN_PROVIDER_TYPES = [
+  'anthropic',
+  'openai',
+  'google',
+  'openrouter',
+  'ark',
+  'moonshot',
+  'siliconflow',
+  'minimax-portal',
+  'minimax-portal-cn',
+  'modelstudio',
+  'ollama',
+] as const;
+
+export const OLLAMA_PLACEHOLDER_API_KEY = 'ollama-local';
+
+export interface ProviderConfig {
+  id: string;
+  name: string;
+  type: ProviderType;
+  baseUrl?: string;
+  apiProtocol?: 'openai-completions' | 'openai-responses' | 'anthropic-messages';
+  headers?: Record<string, string>;
+  model?: string;
+  fallbackModels?: string[];
+  fallbackProviderIds?: string[];
+  enabled: boolean;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface ProviderWithKeyInfo extends ProviderConfig {
+  hasKey: boolean;
+  keyMasked: string | null;
+}
+
+export interface ProviderTypeInfo {
+  id: ProviderType;
+  name: string;
+  icon: string;
+  placeholder: string;
+  model?: string;
+  requiresApiKey: boolean;
+  defaultBaseUrl?: string;
+  showBaseUrl?: boolean;
+  showModelId?: boolean;
+  showModelIdInDevModeOnly?: boolean;
+  modelIdPlaceholder?: string;
+  defaultModelId?: string;
+  isOAuth?: boolean;
+  supportsApiKey?: boolean;
+  apiKeyUrl?: string;
+  docsUrl?: string;
+  docsUrlZh?: string;
+  codePlanPresetBaseUrl?: string;
+  codePlanPresetModelId?: string;
+  codePlanDocsUrl?: string;
+  hidden?: boolean;
+}
+
+export type ProviderAuthMode =
+  | 'api_key'
+  | 'oauth_device'
+  | 'oauth_browser'
+  | 'local';
+
+export type ProviderVendorCategory =
+  | 'official'
+  | 'compatible'
+  | 'local'
+  | 'custom';
+
+export interface ProviderVendorInfo extends ProviderTypeInfo {
+  category: ProviderVendorCategory;
+  envVar?: string;
+  supportedAuthModes: ProviderAuthMode[];
+  defaultAuthMode: ProviderAuthMode;
+  supportsMultipleAccounts: boolean;
+}
+
+export interface ProviderAccount {
+  id: string;
+  vendorId: ProviderType;
+  label: string;
+  authMode: ProviderAuthMode;
+  baseUrl?: string;
+  apiProtocol?: 'openai-completions' | 'openai-responses' | 'anthropic-messages';
+  headers?: Record<string, string>;
+  model?: string;
+  fallbackModels?: string[];
+  fallbackAccountIds?: string[];
+  enabled: boolean;
+  isDefault: boolean;
+  metadata?: {
+    region?: string;
+    email?: string;
+    resourceUrl?: string;
+    customModels?: string[];
+  };
+  createdAt: string;
+  updatedAt: string;
+}
+
+export const PROVIDER_TYPE_INFO: ProviderTypeInfo[] = [
+  {
+    id: 'anthropic',
+    name: 'Anthropic',
+    icon: '🤖',
+    placeholder: 'sk-ant-api03-...',
+    model: 'Claude',
+    requiresApiKey: true,
+    docsUrl: 'https://platform.claude.com/docs/en/api/overview',
+  },
+  {
+    id: 'openai',
+    name: 'OpenAI',
+    icon: '💚',
+    placeholder: 'sk-proj-...',
+    model: 'GPT',
+    requiresApiKey: true,
+    isOAuth: true,
+    supportsApiKey: true,
+    defaultModelId: 'gpt-5.4',
+    showModelId: true,
+    showModelIdInDevModeOnly: true,
+    modelIdPlaceholder: 'gpt-5.4',
+    apiKeyUrl: 'https://platform.openai.com/api-keys',
+  },
+  {
+    id: 'google',
+    name: 'Google',
+    icon: '🔷',
+    placeholder: 'AIza...',
+    model: 'Gemini',
+    requiresApiKey: true,
+    isOAuth: true,
+    supportsApiKey: true,
+    defaultModelId: 'gemini-3-pro-preview',
+    showModelId: true,
+    showModelIdInDevModeOnly: true,
+    modelIdPlaceholder: 'gemini-3-pro-preview',
+    apiKeyUrl: 'https://aistudio.google.com/app/apikey',
+  },
+  { id: 'openrouter', name: 'OpenRouter', icon: '🌐', placeholder: 'sk-or-v1-...', model: 'Multi-Model', requiresApiKey: true, showModelId: true, modelIdPlaceholder: 'openai/gpt-5.4', defaultModelId: 'openai/gpt-5.4', docsUrl: 'https://openrouter.ai/models' },
+  { id: 'minimax-portal-cn', name: 'MiniMax (CN)', icon: '☁️', placeholder: 'sk-...', model: 'MiniMax', requiresApiKey: false, isOAuth: true, supportsApiKey: true, defaultModelId: 'MiniMax-M2.7', showModelId: true, showModelIdInDevModeOnly: true, modelIdPlaceholder: 'MiniMax-M2.7', apiKeyUrl: 'https://platform.minimaxi.com/' },
+  { id: 'moonshot', name: 'Moonshot (CN)', icon: '🌙', placeholder: 'sk-...', model: 'Kimi', requiresApiKey: true, defaultBaseUrl: 'https://api.moonshot.cn/v1', defaultModelId: 'kimi-k2.5', docsUrl: 'https://platform.moonshot.cn/' },
+  { id: 'siliconflow', name: 'SiliconFlow (CN)', icon: '🌊', placeholder: 'sk-...', model: 'Multi-Model', requiresApiKey: true, defaultBaseUrl: 'https://api.siliconflow.cn/v1', showModelId: true, showModelIdInDevModeOnly: true, modelIdPlaceholder: 'deepseek-ai/DeepSeek-V3', defaultModelId: 'deepseek-ai/DeepSeek-V3', docsUrl: 'https://docs.siliconflow.cn/cn/userguide/introduction' },
+  { id: 'minimax-portal', name: 'MiniMax (Global)', icon: '☁️', placeholder: 'sk-...', model: 'MiniMax', requiresApiKey: false, isOAuth: true, supportsApiKey: true, defaultModelId: 'MiniMax-M2.7', showModelId: true, showModelIdInDevModeOnly: true, modelIdPlaceholder: 'MiniMax-M2.7', apiKeyUrl: 'https://platform.minimax.io' },
+  { id: 'modelstudio', name: 'Model Studio', icon: '☁️', placeholder: 'sk-...', model: 'Qwen', requiresApiKey: true, defaultBaseUrl: 'https://coding.dashscope.aliyuncs.com/v1', showBaseUrl: true, defaultModelId: 'qwen3.5-plus', showModelId: true, showModelIdInDevModeOnly: true, modelIdPlaceholder: 'qwen3.5-plus', apiKeyUrl: 'https://bailian.console.aliyun.com/', hidden: true },
+  { id: 'ark', name: 'ByteDance Ark', icon: 'A', placeholder: 'your-ark-api-key', model: 'Doubao', requiresApiKey: true, defaultBaseUrl: 'https://ark.cn-beijing.volces.com/api/v3', showBaseUrl: true, showModelId: true, modelIdPlaceholder: 'ep-20260228000000-xxxxx', docsUrl: 'https://www.volcengine.com/', codePlanPresetBaseUrl: 'https://ark.cn-beijing.volces.com/api/coding/v3', codePlanPresetModelId: 'ark-code-latest', codePlanDocsUrl: 'https://www.volcengine.com/docs/82379/1928261?lang=zh' },
+  { id: 'ollama', name: 'Ollama', icon: '🦙', placeholder: 'Not required', requiresApiKey: false, defaultBaseUrl: 'http://localhost:11434/v1', showBaseUrl: true, showModelId: true, modelIdPlaceholder: 'qwen3:latest' },
+  {
+    id: 'custom',
+    name: 'Custom',
+    icon: '⚙️',
+    placeholder: 'API key...',
+    requiresApiKey: true,
+    showBaseUrl: true,
+    showModelId: true,
+    modelIdPlaceholder: 'your-provider/model-id',
+    docsUrl: 'https://icnnp7d0dymg.feishu.cn/wiki/BmiLwGBcEiloZDkdYnGc8RWnn6d#Ee1ldfvKJoVGvfxc32mcILwenth',
+    docsUrlZh: 'https://icnnp7d0dymg.feishu.cn/wiki/BmiLwGBcEiloZDkdYnGc8RWnn6d#IWQCdfe5fobGU3xf3UGcgbLynGh',
+  },
+];
+
+export function getProviderIconUrl(type: ProviderType | string): string | undefined {
+  return undefined;
+}
+
+export function shouldInvertInDark(_type: ProviderType | string): boolean {
+  return true;
+}
+
+export const SETUP_PROVIDERS = PROVIDER_TYPE_INFO;
+
+export function getProviderTypeInfo(type: ProviderType): ProviderTypeInfo | undefined {
+  return PROVIDER_TYPE_INFO.find((t) => t.id === type);
+}
+
+export function getProviderDocsUrl(
+  provider: Pick<ProviderTypeInfo, 'docsUrl' | 'docsUrlZh'> | undefined,
+  language: string
+): string | undefined {
+  if (!provider?.docsUrl) {
+    return undefined;
+  }
+  if (language.startsWith('zh') && provider.docsUrlZh) {
+    return provider.docsUrlZh;
+  }
+  return provider.docsUrl;
+}
+
+export function shouldShowProviderModelId(
+  provider: Pick<ProviderTypeInfo, 'showModelId' | 'showModelIdInDevModeOnly'> | undefined,
+  devModeUnlocked: boolean
+): boolean {
+  if (!provider?.showModelId) return false;
+  if (provider.showModelIdInDevModeOnly && !devModeUnlocked) return false;
+  return true;
+}
+
+export function resolveProviderModelForSave(
+  provider: Pick<ProviderTypeInfo, 'defaultModelId' | 'showModelId' | 'showModelIdInDevModeOnly'> | undefined,
+  modelId: string,
+  devModeUnlocked: boolean
+): string | undefined {
+  if (!shouldShowProviderModelId(provider, devModeUnlocked)) {
+    return undefined;
+  }
+  const trimmedModelId = modelId.trim();
+  return trimmedModelId || provider?.defaultModelId || undefined;
+}
+
+export function resolveProviderApiKeyForSave(type: ProviderType | string, apiKey: string): string | undefined {
+  const trimmed = apiKey.trim();
+  if (type === 'ollama') {
+    return trimmed || OLLAMA_PLACEHOLDER_API_KEY;
+  }
+  return trimmed || undefined;
+}
diff --git a/src/pages/agents/components/ProvidersSettings.vue b/src/pages/agents/components/ProvidersSettings.vue
new file mode 100644
index 0000000..fb6521e
--- /dev/null
+++ b/src/pages/agents/components/ProvidersSettings.vue
@@ -0,0 +1,400 @@
+<template>
+  <div class="space-y-6">
+    <div class="flex items-center justify-between">
+      <div>
+        <h3 class="text-lg font-medium text-[#171717]">{{ t('models.aiProviders.title', 'AI Providers') }}</h3>
+        <p class="text-sm text-[#99A0AE] mt-1">{{ t('models.aiProviders.subtitle', 'Manage your AI models and API keys.') }}</p>
+      </div>
+      <el-button type="primary" @click="showAddDialog = true">
+        <el-icon class="mr-1"><Plus /></el-icon>
+        {{ t('models.aiProviders.addProvider', 'Add Provider') }}
+      </el-button>
+    </div>
+
+    <!-- Provider List -->
+    <div v-if="loading" class="py-8 text-center text-[#99A0AE]">
+      <el-icon class="is-loading text-2xl"><Loading /></el-icon>
+    </div>
+    
+    <div v-else class="space-y-4">
+      <el-card v-for="item in displayProviders" :key="item.account.id" shadow="hover" class="provider-card">
+        <div class="flex items-start justify-between">
+          <div class="flex items-center gap-4">
+            <div class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center text-xl overflow-hidden border border-gray-200">
+              {{ item.vendor?.icon || '🤖' }}
+            </div>
+            <div>
+              <div class="flex items-center gap-2">
+                <span class="font-medium text-[16px] text-[#171717]">{{ item.account.label || item.vendor?.name }}</span>
+                <el-tag size="small" :type="item.account.isDefault ? 'success' : 'info'" v-if="item.account.isDefault">
+                  {{ t('models.aiProviders.default', 'Default') }}
+                </el-tag>
+              </div>
+              <div class="text-sm text-[#99A0AE] mt-1 flex items-center gap-2">
+                <span v-if="item.account.baseUrl" class="truncate max-w-[200px]">{{ item.account.baseUrl }}</span>
+                <span v-if="item.account.model" class="truncate max-w-[150px] bg-gray-100 px-2 py-0.5 rounded text-xs">{{ item.account.model }}</span>
+                <span v-if="item.status?.hasKey" class="text-green-600 text-xs flex items-center">
+                  <el-icon class="mr-1"><Check /></el-icon> {{ t('models.aiProviders.configured', 'Configured') }}
+                </span>
+                <span v-else class="text-orange-500 text-xs flex items-center">
+                  <el-icon class="mr-1"><Warning /></el-icon> {{ t('models.aiProviders.notConfigured', 'Not Configured') }}
+                </span>
+              </div>
+            </div>
+          </div>
+          
+          <div class="flex items-center gap-2">
+            <el-button v-if="!item.account.isDefault && item.status?.hasKey" size="small" @click="handleSetDefault(item.account.id)">
+              {{ t('models.aiProviders.setDefault', 'Set Default') }}
+            </el-button>
+            <el-button size="small" @click="handleEdit(item)">
+              {{ t('models.aiProviders.edit', 'Edit') }}
+            </el-button>
+            <el-popconfirm :title="t('models.aiProviders.deleteConfirm', 'Are you sure you want to delete this provider?')" @confirm="handleDelete(item.account.id)">
+              <template #reference>
+                <el-button size="small" type="danger" plain>
+                  {{ t('models.aiProviders.delete', 'Delete') }}
+                </el-button>
+              </template>
+            </el-popconfirm>
+          </div>
+        </div>
+      </el-card>
+      
+      <div v-if="displayProviders.length === 0" class="text-center py-12 border border-dashed border-gray-300 rounded-lg text-gray-500">
+        {{ t('models.aiProviders.empty', 'No providers configured yet. Click "Add Provider" to start.') }}
+      </div>
+    </div>
+
+    <!-- Edit Dialog -->
+    <el-dialog
+      v-model="editDialogVisible"
+      width="640px"
+      :show-close="false"
+      class="custom-provider-dialog"
+    >
+      <div class="p-[30px] pb-[20px]">
+        <div class="flex justify-between items-start mb-[24px]">
+          <div>
+            <h2 class="text-[24px] font-serif text-[#171717] mb-[8px] font-normal tracking-tight">
+              {{ editingItem?.account.id.includes('-') ? t('models.aiProviders.addProvider', '添加 AI 提供商') : t('models.aiProviders.editProvider', '编辑提供商') }}
+            </h2>
+            <p class="text-[14px] text-[#99A0AE]">
+              配置新的 AI 模型提供商
+            </p>
+          </div>
+          <button @click="editDialogVisible = false" class="text-[#99A0AE] hover:text-[#171717] transition-colors mt-[4px]">
+            <el-icon class="text-[20px]"><Close /></el-icon>
+          </button>
+        </div>
+
+        <div class="bg-white rounded-[16px] p-[20px] flex items-center gap-[16px] mb-[24px] shadow-sm">
+          <div class="w-[48px] h-[48px] rounded-[14px] bg-[#F4F3EB] flex items-center justify-center text-[24px] overflow-hidden">
+            {{ editingItem?.vendor?.icon || '🤖' }}
+          </div>
+          <div class="flex flex-col">
+            <span class="text-[16px] font-medium text-[#171717] mb-[4px]">{{ editingItem?.vendor?.name }}</span>
+            <div class="flex items-center text-[13px] text-[#007AFF]">
+              <a href="javascript:void(0)" @click="showAddDialog = true; editDialogVisible = false" class="hover:underline">更换提供商</a>
+              <span class="mx-[8px] text-[#E5E8EE]">|</span>
+              <a v-if="editingItem?.vendor?.docsUrl" :href="editingItem.vendor.docsUrl" target="_blank" class="hover:underline flex items-center gap-[4px]">
+                查看文档
+                <el-icon class="text-[12px]"><TopRight /></el-icon>
+              </a>
+            </div>
+          </div>
+        </div>
+
+        <el-form :model="editForm" label-position="top" @submit.prevent class="custom-form">
+          <el-form-item label="显示名称" class="mb-[24px]">
+            <el-input v-if="editingItem" v-model="editingItem.account.label" :placeholder="editingItem?.vendor?.name" class="custom-input font-mono" />
+          </el-form-item>
+
+          <el-form-item label="API 密钥" class="mb-[8px]">
+            <el-input 
+              v-model="editForm.apiKey" 
+              :placeholder="editingItem?.vendor?.placeholder || t('models.aiProviders.apiKeyPlaceholder', 'Enter API Key')" 
+              show-password 
+              clearable
+              class="custom-input font-mono"
+            >
+            </el-input>
+            <div class="text-[12px] text-[#99A0AE] mt-[8px]">
+              您的 API 密钥存储在本地机器上。
+            </div>
+          </el-form-item>
+          
+          <template v-if="editingItem?.vendor?.showBaseUrl">
+            <el-form-item :label="t('models.aiProviders.baseUrl', 'Base URL (Optional)')" class="mt-[24px] mb-[24px]">
+              <el-input v-model="editForm.baseUrl" :placeholder="editingItem?.vendor?.defaultBaseUrl || 'https://api.example.com/v1'" clearable class="custom-input font-mono" />
+            </el-form-item>
+          </template>
+
+          <template v-if="editingItem?.vendor?.showModelId">
+            <el-form-item :label="t('models.aiProviders.defaultModel', 'Default Model (Optional)')" class="mb-[24px]">
+              <el-input v-model="editForm.model" :placeholder="editingItem?.vendor?.modelIdPlaceholder || editingItem?.vendor?.defaultModelId || 'e.g. gpt-4'" clearable class="custom-input font-mono" />
+            </el-form-item>
+          </template>
+        </el-form>
+
+        <div class="h-[1px] bg-[rgba(0,0,0,0.05)] w-full my-[24px]"></div>
+
+        <div class="flex justify-end">
+          <el-button type="primary" @click="saveEdit" :loading="saving" class="h-[40px] px-[24px] rounded-[20px] bg-[#007AFF] hover:bg-[#0066FF] border-none text-[14px] font-medium">
+            {{ editingItem?.account.id.includes('-') ? '添加提供商' : t('common.save', 'Save') }}
+          </el-button>
+        </div>
+      </div>
+    </el-dialog>
+
+    <!-- Add Dialog -->
+    <el-dialog
+      v-model="showAddDialog"
+      width="800px"
+      :show-close="false"
+      class="custom-provider-dialog"
+    >
+      <div class="p-[30px]">
+        <div class="flex justify-between items-start mb-[30px]">
+          <div>
+            <h2 class="text-[24px] font-serif text-[#171717] mb-[8px] font-normal tracking-tight">
+              {{ t('models.aiProviders.addProvider', 'Add AI Provider') }}
+            </h2>
+            <p class="text-[14px] text-[#99A0AE]">
+              配置新的 AI 模型提供商
+            </p>
+          </div>
+          <button @click="showAddDialog = false" class="text-[#99A0AE] hover:text-[#171717] transition-colors mt-[4px]">
+            <el-icon class="text-[20px]"><Close /></el-icon>
+          </button>
+        </div>
+
+        <div class="grid grid-cols-2 md:grid-cols-3 gap-[16px]">
+          <div 
+            v-for="provider in availableProviders" 
+            :key="provider.id"
+            @click="selectNewProvider(provider)"
+            class="cursor-pointer border border-[rgba(0,0,0,0.05)] rounded-[16px] p-[20px] flex flex-col items-center justify-center gap-[12px] bg-[rgba(255,255,255,0.4)] hover:bg-[rgba(255,255,255,0.8)] transition-all duration-200"
+          >
+            <div class="w-[48px] h-[48px] rounded-[14px] bg-[rgba(0,0,0,0.05)] flex items-center justify-center text-[24px] overflow-hidden">
+              {{ provider.icon || '🤖' }}
+            </div>
+            <span class="text-[14px] font-medium text-[#171717] text-center">{{ provider.name }}</span>
+          </div>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { Plus, Loading, Check, Warning, Close, TopRight } from '@element-plus/icons-vue';
+import { ElMessage } from 'element-plus';
+import { useProviderStore } from '@src/store/providers';
+import { PROVIDER_TYPE_INFO, type ProviderTypeInfo } from '@lib/providers';
+import type { ProviderListItem } from '@lib/provider-accounts';
+
+const { t } = useI18n();
+const providerStore = useProviderStore();
+
+const showAddDialog = ref(false);
+const editDialogVisible = ref(false);
+const validating = ref(false);
+const saving = ref(false);
+const editingItem = ref<ProviderListItem | null>(null);
+
+const editForm = ref({
+  apiKey: '',
+  baseUrl: '',
+  model: ''
+});
+
+const loading = computed(() => providerStore.loading);
+const displayProviders = computed(() => {
+  const { accounts, statuses, vendors, defaultAccountId } = providerStore;
+  
+  // Safe map building
+  const safeAccounts = accounts || [];
+  const safeStatuses = statuses || [];
+  const safeVendors = vendors || [];
+  
+  const vendorMap = new Map(safeVendors.map((vendor) => [vendor.id, vendor]));
+  const statusMap = new Map(safeStatuses.map((status) => [status.id, status]));
+
+  if (safeAccounts.length > 0) {
+    return safeAccounts
+      .map((account) => ({
+        account: { ...account, isDefault: account.id === defaultAccountId },
+        vendor: vendorMap.get(account.vendorId) || PROVIDER_TYPE_INFO.find(p => p.id === account.vendorId) as any,
+        status: statusMap.get(account.id),
+      }))
+      .sort((left, right) => {
+        if (left.account.id === defaultAccountId) return -1;
+        if (right.account.id === defaultAccountId) return 1;
+        return right.account.updatedAt.localeCompare(left.account.updatedAt);
+      });
+  }
+  return [];
+});
+
+const availableProviders = computed(() => {
+  return PROVIDER_TYPE_INFO.filter(p => !p.hidden);
+});
+
+onMounted(() => {
+  providerStore.init();
+});
+
+const handleSetDefault = async (id: string) => {
+  try {
+    await providerStore.setDefaultAccount(id);
+    ElMessage.success(t('models.aiProviders.setDefaultSuccess', 'Default provider set successfully'));
+  } catch (e: any) {
+    ElMessage.error(e.message || 'Failed to set default provider');
+  }
+};
+
+const handleDelete = async (id: string) => {
+  try {
+    await providerStore.deleteAccount(id);
+    ElMessage.success(t('models.aiProviders.deleteSuccess', 'Provider deleted successfully'));
+  } catch (e: any) {
+    ElMessage.error(e.message || 'Failed to delete provider');
+  }
+};
+
+const handleEdit = (item: ProviderListItem) => {
+  editingItem.value = item;
+  editForm.value = {
+    apiKey: '', // Don't fetch actual key to UI unless requested, usually handled via backend updates
+    baseUrl: item.account.baseUrl || '',
+    model: item.account.model || ''
+  };
+  editDialogVisible.value = true;
+};
+
+const selectNewProvider = (provider: ProviderTypeInfo) => {
+  showAddDialog.value = false;
+  
+  // Setup a new mock item to edit
+  editingItem.value = {
+    account: {
+      id: `${provider.id}-${Date.now()}`,
+      vendorId: provider.id,
+      label: provider.name,
+      authMode: provider.requiresApiKey ? 'api_key' : 'local',
+      baseUrl: provider.defaultBaseUrl || '',
+      model: provider.defaultModelId || '',
+      enabled: true,
+      isDefault: false,
+      createdAt: new Date().toISOString(),
+      updatedAt: new Date().toISOString(),
+    },
+    vendor: provider as any,
+    status: undefined
+  };
+  
+  editForm.value = {
+    apiKey: '',
+    baseUrl: provider.defaultBaseUrl || '',
+    model: provider.defaultModelId || ''
+  };
+  editDialogVisible.value = true;
+};
+
+const validateKey = async (providerId: string, apiKey: string, baseUrl?: string) => {
+  if (!apiKey) {
+    ElMessage.warning(t('models.aiProviders.apiKeyRequired', 'Please enter an API Key first'));
+    return;
+  }
+  validating.value = true;
+  try {
+    // Note: If adding a new provider, we pass the vendor ID. If updating, we pass the account ID.
+    // The backend `validateApiKey` handles this mapping or we can adjust logic accordingly.
+    const vendorId = editingItem.value?.account.vendorId || providerId;
+    const res = await providerStore.validateApiKey(vendorId, apiKey, { baseUrl });
+    if (res.valid) {
+      ElMessage.success(t('models.aiProviders.validateSuccess', 'API Key is valid!'));
+    } else {
+      ElMessage.error(res.error || t('models.aiProviders.validateFail', 'Invalid API Key'));
+    }
+  } catch (e: any) {
+    ElMessage.error(e.message || 'Validation failed');
+  } finally {
+    validating.value = false;
+  }
+};
+
+const saveEdit = async () => {
+  if (!editingItem.value) return;
+  saving.value = true;
+  
+  try {
+    const isNew = !displayProviders.value.find(p => p.account.id === editingItem.value!.account.id);
+    const updates = {
+      baseUrl: editForm.value.baseUrl || undefined,
+      model: editForm.value.model || undefined
+    };
+    
+    if (isNew) {
+      // It's a new provider
+      const accountToCreate = {
+        ...editingItem.value.account,
+        ...updates
+      };
+      await providerStore.createAccount(accountToCreate, editForm.value.apiKey);
+    } else {
+      // Update existing
+      await providerStore.updateAccount(editingItem.value.account.id, updates, editForm.value.apiKey || undefined);
+    }
+    
+    ElMessage.success(t('models.aiProviders.saveSuccess', 'Provider saved successfully'));
+    editDialogVisible.value = false;
+  } catch (e: any) {
+    ElMessage.error(e.message || 'Failed to save provider');
+  } finally {
+    saving.value = false;
+  }
+};
+</script>
+
+<style scoped>
+.provider-card {
+  border-radius: 12px;
+  border: 1px solid #E5E8EE;
+  box-shadow: none;
+}
+</style>
+<style>
+.custom-provider-dialog {
+  background-color: #F4F3EB !important;
+  border-radius: 20px !important;
+}
+.custom-provider-dialog .el-dialog__header {
+  display: none !important;
+}
+.custom-provider-dialog .el-dialog__body {
+  padding: 0 !important;
+}
+.custom-form .el-form-item__label {
+  font-weight: 600 !important;
+  color: #171717 !important;
+  padding-bottom: 8px !important;
+  font-size: 15px !important;
+}
+.custom-input .el-input__wrapper {
+  background-color: #F4F3EB !important;
+  border: 1px solid rgba(0,0,0,0.1) !important;
+  border-radius: 12px !important;
+  box-shadow: none !important;
+  padding: 10px 16px !important;
+}
+.custom-input .el-input__wrapper:hover, .custom-input .el-input__wrapper.is-focus {
+  border-color: rgba(0,0,0,0.2) !important;
+}
+.custom-input .el-input__inner {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/agents/components/RequestContentDialog.vue b/src/pages/agents/components/RequestContentDialog.vue
new file mode 100644
index 0000000..9291172
--- /dev/null
+++ b/src/pages/agents/components/RequestContentDialog.vue
@@ -0,0 +1,84 @@
+<template>
+  <el-dialog
+    v-model="visible"
+    width="800px"
+    :show-close="false"
+    class="custom-request-dialog"
+    @closed="handleClosed"
+  >
+    <div class="p-[30px]">
+      <div class="flex justify-between items-start mb-[24px]">
+        <div>
+          <h2 class="text-[24px] font-serif text-[#171717] mb-[8px] font-normal tracking-tight">
+            {{ t('models.recentTokenHistory.contentDialogTitle', 'Request Content') }}
+          </h2>
+          <p class="text-[14px] text-[#99A0AE]">
+            {{ entry?.model || t('models.recentTokenHistory.unknownModel', 'Unknown Model') }} • {{ formatUsageTimestamp(entry?.timestamp) }}
+          </p>
+        </div>
+        <button @click="visible = false" class="text-[#99A0AE] hover:text-[#171717] transition-colors mt-[4px]">
+          <el-icon class="text-[20px]"><Close /></el-icon>
+        </button>
+      </div>
+
+      <div class="max-h-[60vh] overflow-y-auto p-[20px] bg-white rounded-[16px] border border-[rgba(0,0,0,0.05)] shadow-sm">
+        <pre class="whitespace-pre-wrap break-words text-[13px] leading-relaxed text-[#171717] font-mono">
+          {{ entry?.content }}
+        </pre>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { Close } from '@element-plus/icons-vue';
+import type { UsageHistoryEntry } from '../usage-history';
+
+const { t } = useI18n();
+
+const props = defineProps<{
+  modelValue: boolean;
+  entry: UsageHistoryEntry | null;
+}>();
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: boolean): void;
+  (e: 'closed'): void;
+}>();
+
+const visible = computed({
+  get: () => props.modelValue,
+  set: (value) => emit('update:modelValue', value)
+});
+
+const handleClosed = () => {
+  emit('closed');
+};
+
+const formatUsageTimestamp = (timestamp?: string) => {
+  if (!timestamp) return '';
+  const date = new Date(timestamp);
+  if (Number.isNaN(date.getTime())) return timestamp;
+  return new Intl.DateTimeFormat(undefined, {
+    month: 'short',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+  }).format(date);
+};
+</script>
+
+<style>
+.custom-request-dialog {
+  background-color: #F4F3EB !important;
+  border-radius: 20px !important;
+}
+.custom-request-dialog .el-dialog__header {
+  display: none !important;
+}
+.custom-request-dialog .el-dialog__body {
+  padding: 0 !important;
+}
+</style>
diff --git a/src/pages/agents/components/UsageBarChart.vue b/src/pages/agents/components/UsageBarChart.vue
new file mode 100644
index 0000000..6699efa
--- /dev/null
+++ b/src/pages/agents/components/UsageBarChart.vue
@@ -0,0 +1,84 @@
+<template>
+  <div v-if="groups.length === 0" class="rounded-2xl border border-dashed border-gray-300 dark:border-gray-700 p-8 text-center text-[14px] font-medium text-gray-500">
+    {{ emptyLabel }}
+  </div>
+
+  <div v-else class="space-y-4 bg-transparent p-5 rounded-2xl border border-gray-200 dark:border-gray-800">
+    <div class="flex flex-wrap gap-4 text-[13px] font-medium text-gray-500 mb-2">
+      <span class="inline-flex items-center gap-2">
+        <span class="h-2.5 w-2.5 rounded-full bg-sky-500" />
+        {{ inputLabel }}
+      </span>
+      <span class="inline-flex items-center gap-2">
+        <span class="h-2.5 w-2.5 rounded-full bg-violet-500" />
+        {{ outputLabel }}
+      </span>
+      <span class="inline-flex items-center gap-2">
+        <span class="h-2.5 w-2.5 rounded-full bg-amber-500" />
+        {{ cacheLabel }}
+      </span>
+    </div>
+
+    <div v-for="group in groups" :key="group.label" class="space-y-1.5">
+      <div class="flex items-center justify-between gap-3 text-[13.5px]">
+        <span class="truncate font-semibold text-gray-900 dark:text-gray-100">{{ group.label }}</span>
+        <span class="text-gray-500 font-medium">
+          {{ totalLabel }}: {{ formatTokenCount(group.totalTokens) }}
+        </span>
+      </div>
+      <div class="h-3.5 overflow-hidden rounded-full bg-gray-100 dark:bg-gray-800">
+        <div
+          class="flex h-full overflow-hidden rounded-full"
+          :style="{
+            width: group.totalTokens > 0
+              ? `${Math.max((group.totalTokens / maxTokens) * 100, 6)}%`
+              : '0%',
+          }"
+        >
+          <div
+            v-if="group.inputTokens > 0"
+            class="h-full bg-sky-500"
+            :style="{ width: `${(group.inputTokens / group.totalTokens) * 100}%` }"
+          />
+          <div
+            v-if="group.outputTokens > 0"
+            class="h-full bg-violet-500"
+            :style="{ width: `${(group.outputTokens / group.totalTokens) * 100}%` }"
+          />
+          <div
+            v-if="group.cacheTokens > 0"
+            class="h-full bg-amber-500"
+            :style="{ width: `${(group.cacheTokens / group.totalTokens) * 100}%` }"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const props = defineProps<{
+  groups: Array<{
+    label: string;
+    totalTokens: number;
+    inputTokens: number;
+    outputTokens: number;
+    cacheTokens: number;
+  }>;
+  emptyLabel: string;
+  totalLabel: string;
+  inputLabel: string;
+  outputLabel: string;
+  cacheLabel: string;
+}>();
+
+const maxTokens = computed(() => {
+  return Math.max(...props.groups.map((group) => group.totalTokens), 1);
+});
+
+const formatTokenCount = (value: number) => {
+  return new Intl.NumberFormat().format(value);
+};
+</script>
diff --git a/src/pages/agents/index.vue b/src/pages/agents/index.vue
new file mode 100644
index 0000000..6fd9a2e
--- /dev/null
+++ b/src/pages/agents/index.vue
@@ -0,0 +1,340 @@
+<template>
+  <layout>
+    <div class="bg-white w-full h-full flex flex-col p-[20px] rounded-[16px] overflow-hidden">
+      <!-- Header -->
+      <TitleSection :title="t('models.title')" :desc="t('models.subtitle')" />
+
+      <!-- Content Area -->
+      <div class="flex-1 overflow-y-auto pr-2 pb-10 min-h-0 space-y-12">
+        <!-- AI Providers Section -->
+        <ProvidersSettings />
+
+        <!-- Token Usage History Section -->
+        <div>
+          <h2 class="text-2xl font-serif text-[#171717] mb-6 font-normal tracking-tight">
+            {{ t('models.recentTokenHistory.title', 'Token Usage History') }}
+          </h2>
+          
+          <div v-if="usageLoading" class="flex items-center justify-center py-12 text-[#99A0AE] bg-gray-50 rounded-2xl border border-transparent border-dashed">
+            <el-icon class="is-loading mr-2 text-xl"><Loading /></el-icon>
+            {{ t('models.recentTokenHistory.loading', 'Loading usage history...') }}
+          </div>
+          
+          <div v-else-if="visibleUsageHistory.length === 0" class="flex items-center justify-center py-12 text-[#99A0AE] bg-gray-50 rounded-2xl border border-transparent border-dashed">
+            {{ t('models.recentTokenHistory.empty', 'No usage history available.') }}
+          </div>
+          
+          <div v-else-if="filteredUsageHistory.length === 0" class="flex items-center justify-center py-12 text-[#99A0AE] bg-gray-50 rounded-2xl border border-transparent border-dashed">
+            {{ t('models.recentTokenHistory.emptyForWindow', 'No usage history in the selected time window.') }}
+          </div>
+          
+          <div v-else class="space-y-6">
+            <div class="flex flex-wrap items-center justify-between gap-3">
+              <div class="flex flex-wrap items-center gap-3">
+                <div class="flex rounded-lg bg-gray-100 p-1 border border-gray-200">
+                  <el-button
+                    :type="usageGroupBy === 'model' ? 'primary' : 'default'"
+                    :plain="usageGroupBy !== 'model'"
+                    size="small"
+                    @click="usageGroupBy = 'model'; usagePage = 1"
+                    class="border-0"
+                  >
+                    {{ t('models.recentTokenHistory.groupByModel', 'By Model') }}
+                  </el-button>
+                  <el-button
+                    :type="usageGroupBy === 'day' ? 'primary' : 'default'"
+                    :plain="usageGroupBy !== 'day'"
+                    size="small"
+                    @click="usageGroupBy = 'day'; usagePage = 1"
+                    class="border-0"
+                  >
+                    {{ t('models.recentTokenHistory.groupByTime', 'By Time') }}
+                  </el-button>
+                </div>
+                <div class="flex rounded-lg bg-gray-100 p-1 border border-gray-200">
+                  <el-button
+                    :type="usageWindow === '7d' ? 'primary' : 'default'"
+                    :plain="usageWindow !== '7d'"
+                    size="small"
+                    @click="usageWindow = '7d'; usagePage = 1"
+                    class="border-0"
+                  >
+                    {{ t('models.recentTokenHistory.last7Days', 'Last 7 Days') }}
+                  </el-button>
+                  <el-button
+                    :type="usageWindow === '30d' ? 'primary' : 'default'"
+                    :plain="usageWindow !== '30d'"
+                    size="small"
+                    @click="usageWindow = '30d'; usagePage = 1"
+                    class="border-0"
+                  >
+                    {{ t('models.recentTokenHistory.last30Days', 'Last 30 Days') }}
+                  </el-button>
+                  <el-button
+                    :type="usageWindow === 'all' ? 'primary' : 'default'"
+                    :plain="usageWindow !== 'all'"
+                    size="small"
+                    @click="usageWindow = 'all'; usagePage = 1"
+                    class="border-0"
+                  >
+                    {{ t('models.recentTokenHistory.allTime', 'All Time') }}
+                  </el-button>
+                </div>
+              </div>
+              <p class="text-[13px] font-medium text-[#99A0AE]">
+                {{ usageRefreshing
+                  ? t('models.recentTokenHistory.loading', 'Loading...')
+                  : t('models.recentTokenHistory.showingLast', `Showing ${filteredUsageHistory.length} records`) }}
+              </p>
+            </div>
+
+            <UsageBarChart
+              :groups="usageGroups"
+              :emptyLabel="t('models.recentTokenHistory.empty', 'Empty')"
+              :totalLabel="t('models.recentTokenHistory.totalTokens', 'Total')"
+              :inputLabel="t('models.recentTokenHistory.inputShort', 'Input')"
+              :outputLabel="t('models.recentTokenHistory.outputShort', 'Output')"
+              :cacheLabel="t('models.recentTokenHistory.cacheShort', 'Cache')"
+            />
+
+            <div class="space-y-3 pt-2">
+              <div
+                v-for="entry in pagedUsageHistory"
+                :key="`${entry.sessionId}-${entry.timestamp}`"
+                class="rounded-xl bg-transparent border border-gray-200 p-5 hover:bg-gray-50 transition-colors"
+              >
+                <div class="flex items-start justify-between gap-3">
+                  <div class="min-w-0">
+                    <p class="font-semibold text-[15px] text-[#171717] truncate">
+                      {{ entry.model || t('models.recentTokenHistory.unknownModel', 'Unknown Model') }}
+                    </p>
+                    <p class="text-[13px] text-[#99A0AE] truncate mt-0.5">
+                      {{ [formatUsageSource(entry.provider), formatUsageSource(entry.agentId), entry.sessionId].filter(Boolean).join(' • ') }}
+                    </p>
+                  </div>
+                  <div class="text-right shrink-0">
+                    <p :class="getUsageTotalClass(entry)">
+                      {{ formatUsageTotal(entry) }}
+                    </p>
+                    <p v-if="entry.usageStatus === 'missing'" class="text-[12px] text-[#99A0AE] mt-0.5">
+                      {{ t('models.recentTokenHistory.noUsage', 'No usage info') }}
+                    </p>
+                    <p v-if="entry.usageStatus === 'error'" class="text-[12px] text-red-500 mt-0.5">
+                      {{ t('models.recentTokenHistory.usageParseError', 'Error parsing usage') }}
+                    </p>
+                    <p class="text-[12px] text-[#99A0AE] mt-0.5">
+                      {{ formatUsageTimestamp(entry.timestamp) }}
+                    </p>
+                  </div>
+                </div>
+                <div class="mt-3 flex flex-wrap gap-x-4 gap-y-1.5 text-[12.5px] font-medium text-[#99A0AE]">
+                  <template v-if="entry.usageStatus === 'available' || entry.usageStatus === undefined">
+                    <span class="flex items-center gap-1.5"><div class="w-2 h-2 rounded-full bg-sky-500"></div>{{ t('models.recentTokenHistory.input', `Input: ${formatTokenCount(entry.inputTokens)}`) }}</span>
+                    <span class="flex items-center gap-1.5"><div class="w-2 h-2 rounded-full bg-violet-500"></div>{{ t('models.recentTokenHistory.output', `Output: ${formatTokenCount(entry.outputTokens)}`) }}</span>
+                    <span v-if="entry.cacheReadTokens > 0" class="flex items-center gap-1.5"><div class="w-2 h-2 rounded-full bg-amber-500"></div>{{ t('models.recentTokenHistory.cacheRead', `Cache Read: ${formatTokenCount(entry.cacheReadTokens)}`) }}</span>
+                    <span v-if="entry.cacheWriteTokens > 0" class="flex items-center gap-1.5"><div class="w-2 h-2 rounded-full bg-amber-500"></div>{{ t('models.recentTokenHistory.cacheWrite', `Cache Write: ${formatTokenCount(entry.cacheWriteTokens)}`) }}</span>
+                  </template>
+                  <span v-else class="text-[12px]">
+                    {{ entry.usageStatus === 'missing'
+                      ? t('models.recentTokenHistory.noUsage', 'No usage reported')
+                      : t('models.recentTokenHistory.usageParseError', 'Parse error') }}
+                  </span>
+                  <span v-if="typeof entry.costUsd === 'number' && Number.isFinite(entry.costUsd)" class="flex items-center gap-1.5 ml-auto text-[#171717] bg-gray-100 px-2 py-0.5 rounded-md">
+                    {{ t('models.recentTokenHistory.cost', `$${entry.costUsd.toFixed(4)}`) }}
+                  </span>
+                  <el-button
+                    v-if="devModeUnlocked && entry.content"
+                    size="small"
+                    class="h-6 rounded-full px-2.5 text-[11.5px] ml-2"
+                    @click="selectedUsageEntry = entry"
+                  >
+                    {{ t('models.recentTokenHistory.viewContent', 'View Content') }}
+                  </el-button>
+                </div>
+              </div>
+            </div>
+
+            <div class="flex items-center justify-between gap-3 pt-2">
+              <p class="text-[13px] font-medium text-[#99A0AE]">
+                {{ t('models.recentTokenHistory.page', `Page ${safeUsagePage} of ${usageTotalPages}`) }}
+              </p>
+              <div class="flex items-center gap-2">
+                <el-button
+                  size="small"
+                  @click="usagePage = Math.max(1, usagePage - 1)"
+                  :disabled="safeUsagePage <= 1"
+                  class="rounded-full px-4 h-9"
+                >
+                  <el-icon class="mr-1"><ArrowLeft /></el-icon>
+                  {{ t('models.recentTokenHistory.prev', 'Prev') }}
+                </el-button>
+                <el-button
+                  size="small"
+                  @click="usagePage = Math.min(usageTotalPages, usagePage + 1)"
+                  :disabled="safeUsagePage >= usageTotalPages"
+                  class="rounded-full px-4 h-9"
+                >
+                  {{ t('models.recentTokenHistory.next', 'Next') }}
+                  <el-icon class="ml-1"><ArrowRight /></el-icon>
+                </el-button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Dev Mode Popup -->
+      <RequestContentDialog
+        v-if="devModeUnlocked && selectedUsageEntry"
+        v-model="popupVisible"
+        :entry="selectedUsageEntry"
+        @closed="selectedUsageEntry = null"
+      />
+    </div>
+  </layout>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import ProvidersSettings from './components/ProvidersSettings.vue';
+import UsageBarChart from './components/UsageBarChart.vue';
+import RequestContentDialog from './components/RequestContentDialog.vue';
+import TitleSection from '@src/components/TitleSection/index.vue'
+import { hostApiFetch } from '@lib/host-api';
+import {
+  filterUsageHistoryByWindow,
+  groupUsageHistory,
+  resolveStableUsageHistory,
+  resolveVisibleUsageHistory,
+  type UsageGroupBy,
+  type UsageHistoryEntry,
+  type UsageWindow,
+} from './usage-history';
+
+const { t } = useI18n();
+
+// States
+const devModeUnlocked = ref(true); // Default true for now or fetch from a settings store
+const usageGroupBy = ref<UsageGroupBy>('model');
+const usageWindow = ref<UsageWindow>('7d');
+const usagePage = ref(1);
+const selectedUsageEntry = ref<UsageHistoryEntry | null>(null);
+const popupVisible = computed({
+  get: () => selectedUsageEntry.value !== null,
+  set: (v) => { if (!v) selectedUsageEntry.value = null; }
+});
+
+const fetchState = ref<{
+  status: 'idle' | 'loading' | 'done';
+  data: UsageHistoryEntry[];
+  stableData: UsageHistoryEntry[];
+}>({
+  status: 'idle',
+  data: [],
+  stableData: [],
+});
+
+const usageLoading = computed(() => fetchState.value.status === 'loading' && visibleUsageHistory.value.length === 0);
+const usageRefreshing = computed(() => fetchState.value.status === 'loading' && visibleUsageHistory.value.length > 0);
+
+// Fetching logic
+let refreshTimer: ReturnType<typeof setInterval> | null = null;
+
+const fetchUsage = async () => {
+  if (fetchState.value.status === 'loading') return;
+  fetchState.value.status = 'loading';
+  try {
+    const entries = await hostApiFetch<UsageHistoryEntry[]>('/api/usage/recent-token-history');
+    const normalized = Array.isArray(entries) ? entries : [];
+    fetchState.value.stableData = resolveStableUsageHistory(fetchState.value.stableData, normalized);
+    fetchState.value.data = normalized;
+    fetchState.value.status = 'done';
+  } catch (error) {
+    console.error('Failed to fetch usage history', error);
+    fetchState.value.status = 'done';
+  }
+};
+
+onMounted(() => {
+  fetchUsage();
+  refreshTimer = setInterval(fetchUsage, 15000);
+  
+  const handleVisibilityChange = () => {
+    if (document.visibilityState === 'visible') {
+      fetchUsage();
+    }
+  };
+  document.addEventListener('visibilitychange', handleVisibilityChange);
+});
+
+onUnmounted(() => {
+  if (refreshTimer) clearInterval(refreshTimer);
+});
+
+// Computed properties
+const HIDDEN_USAGE_MARKERS = ['gateway-injected', 'delivery-mirror'];
+const isHiddenUsageSource = (source?: string) => {
+  if (!source) return false;
+  const normalizedSource = source.trim().toLowerCase();
+  return HIDDEN_USAGE_MARKERS.some((marker) => normalizedSource.includes(marker));
+};
+
+const formatUsageSource = (source?: string) => {
+  if (!source) return undefined;
+  if (isHiddenUsageSource(source)) return undefined;
+  return source;
+};
+
+const shouldHideUsageEntry = (entry: UsageHistoryEntry) => {
+  return isHiddenUsageSource(entry.provider) || isHiddenUsageSource(entry.model);
+};
+
+const usageHistory = computed(() => fetchState.value.data.filter((entry) => !shouldHideUsageEntry(entry)));
+const stableUsageHistory = computed(() => fetchState.value.stableData.filter((entry) => !shouldHideUsageEntry(entry)));
+
+const visibleUsageHistory = computed(() => resolveVisibleUsageHistory(usageHistory.value, stableUsageHistory.value, {
+  preferStableOnEmpty: fetchState.value.status === 'loading',
+}));
+
+const filteredUsageHistory = computed(() => filterUsageHistoryByWindow(visibleUsageHistory.value, usageWindow.value));
+const usageGroups = computed(() => groupUsageHistory(filteredUsageHistory.value, usageGroupBy.value));
+
+const usagePageSize = 5;
+const usageTotalPages = computed(() => Math.max(1, Math.ceil(filteredUsageHistory.value.length / usagePageSize)));
+const safeUsagePage = computed(() => Math.min(usagePage.value, usageTotalPages.value));
+
+const pagedUsageHistory = computed(() => {
+  const start = (safeUsagePage.value - 1) * usagePageSize;
+  const end = safeUsagePage.value * usagePageSize;
+  return filteredUsageHistory.value.slice(start, end);
+});
+
+const formatTokenCount = (value: number) => Intl.NumberFormat().format(value);
+
+const getUsageTotalClass = (entry: UsageHistoryEntry) => {
+  if (entry.usageStatus === 'error') return 'font-bold text-[15px] text-red-500';
+  if (entry.usageStatus === 'missing') return 'font-bold text-[15px] text-[#99A0AE]';
+  return 'font-bold text-[15px] text-[#171717]';
+};
+
+const formatUsageTotal = (entry: UsageHistoryEntry) => {
+  if (entry.usageStatus === 'error') return '✕';
+  if (entry.usageStatus === 'missing') return '—';
+  return formatTokenCount(entry.totalTokens);
+};
+
+const formatUsageTimestamp = (timestamp: string) => {
+  const date = new Date(timestamp);
+  if (Number.isNaN(date.getTime())) return timestamp;
+  return new Intl.DateTimeFormat(undefined, {
+    month: 'short',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+  }).format(date);
+};
+
+watch(usageGroupBy, () => usagePage.value = 1);
+watch(usageWindow, () => usagePage.value = 1);
+</script>
diff --git a/src/pages/agents/usage-history.ts b/src/pages/agents/usage-history.ts
new file mode 100644
index 0000000..13cacdf
--- /dev/null
+++ b/src/pages/agents/usage-history.ts
@@ -0,0 +1,118 @@
+export type UsageHistoryEntry = {
+  timestamp: string;
+  sessionId: string;
+  agentId: string;
+  model?: string;
+  provider?: string;
+  content?: string;
+  usageStatus?: 'available' | 'missing' | 'error';
+  inputTokens: number;
+  outputTokens: number;
+  cacheReadTokens: number;
+  cacheWriteTokens: number;
+  totalTokens: number;
+  costUsd?: number;
+};
+
+export type UsageWindow = '7d' | '30d' | 'all';
+export type UsageGroupBy = 'model' | 'day';
+
+export type UsageGroup = {
+  label: string;
+  totalTokens: number;
+  inputTokens: number;
+  outputTokens: number;
+  cacheTokens: number;
+  sortKey: number | string;
+};
+
+export function resolveStableUsageHistory(
+  previousStableEntries: UsageHistoryEntry[],
+  nextEntries: UsageHistoryEntry[],
+  options: { preservePreviousOnEmpty?: boolean } = {},
+): UsageHistoryEntry[] {
+  if (nextEntries.length > 0) {
+    return nextEntries;
+  }
+
+  return options.preservePreviousOnEmpty ? previousStableEntries : [];
+}
+
+export function resolveVisibleUsageHistory(
+  currentEntries: UsageHistoryEntry[],
+  stableEntries: UsageHistoryEntry[],
+  options: { preferStableOnEmpty?: boolean } = {},
+): UsageHistoryEntry[] {
+  if (options.preferStableOnEmpty && currentEntries.length === 0) {
+    return stableEntries;
+  }
+
+  return currentEntries;
+}
+
+export function formatUsageDay(timestamp: string): string {
+  const date = new Date(timestamp);
+  if (Number.isNaN(date.getTime())) return timestamp;
+  return new Intl.DateTimeFormat(undefined, {
+    month: 'short',
+    day: 'numeric',
+  }).format(date);
+}
+
+export function getUsageDaySortKey(timestamp: string): number {
+  const date = new Date(timestamp);
+  if (Number.isNaN(date.getTime())) return 0;
+  date.setHours(0, 0, 0, 0);
+  return date.getTime();
+}
+
+export function groupUsageHistory(
+  entries: UsageHistoryEntry[],
+  groupBy: UsageGroupBy,
+): UsageGroup[] {
+  const grouped = new Map<string, UsageGroup>();
+
+  for (const entry of entries) {
+    const label = groupBy === 'model'
+      ? (entry.model || 'Unknown')
+      : formatUsageDay(entry.timestamp);
+    const current = grouped.get(label) ?? {
+      label,
+      totalTokens: 0,
+      inputTokens: 0,
+      outputTokens: 0,
+      cacheTokens: 0,
+      sortKey: groupBy === 'day' ? getUsageDaySortKey(entry.timestamp) : label.toLowerCase(),
+    };
+    current.totalTokens += entry.totalTokens;
+    current.inputTokens += entry.inputTokens;
+    current.outputTokens += entry.outputTokens;
+    current.cacheTokens += entry.cacheReadTokens + entry.cacheWriteTokens;
+    grouped.set(label, current);
+  }
+
+  const sorted = Array.from(grouped.values()).sort((a, b) => {
+    if (groupBy === 'day') {
+      return Number(a.sortKey) - Number(b.sortKey);
+    }
+    return b.totalTokens - a.totalTokens;
+  });
+
+  return groupBy === 'model' ? sorted.slice(0, 8) : sorted;
+}
+
+export function filterUsageHistoryByWindow(
+  entries: UsageHistoryEntry[],
+  window: UsageWindow,
+  now = Date.now(),
+): UsageHistoryEntry[] {
+  if (window === 'all') return entries;
+
+  const days = window === '7d' ? 7 : 30;
+  const cutoff = now - days * 24 * 60 * 60 * 1000;
+
+  return entries.filter((entry) => {
+    const timestamp = Date.parse(entry.timestamp);
+    return Number.isFinite(timestamp) && timestamp >= cutoff;
+  });
+}
diff --git a/src/pages/task/index.vue b/src/pages/task/index.vue
deleted file mode 100644
index 50faced..0000000
--- a/src/pages/task/index.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<template>
-  
-  <layout>
-    <div class="bg-white h-full flex flex-col p-[20px]">
-      任务中心
-    </div>
-  </layout>
-</template>
-
-<script setup lang="ts">
-
-</script>
diff --git a/src/router/index.ts b/src/router/index.ts
index 79cc111..a86766f 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -18,9 +18,9 @@ const routes = [
     meta: { requiresAuth: true },
   },
   {
-    path: "/task",
-    component: () => import("@src/pages/task/index.vue"),
-    name: "Task",
+    path: "/agents",
+    component: () => import("@src/pages/agents/index.vue"),
+    name: "Agents",
     meta: { requiresAuth: true },
   },
   {
diff --git a/src/store/providers.ts b/src/store/providers.ts
new file mode 100644
index 0000000..6f21b22
--- /dev/null
+++ b/src/store/providers.ts
@@ -0,0 +1,334 @@
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+import { hostApiFetch } from '@lib/host-api';
+import { fetchProviderSnapshot } from '@lib/provider-accounts';
+import type {
+  ProviderAccount,
+  ProviderConfig,
+  ProviderVendorInfo,
+  ProviderWithKeyInfo,
+} from '@lib/providers';
+
+export const useProviderStore = defineStore('providers', () => {
+  const statuses = ref<ProviderWithKeyInfo[]>([]);
+  const accounts = ref<ProviderAccount[]>([]);
+  const vendors = ref<ProviderVendorInfo[]>([]);
+  const defaultAccountId = ref<string | null>(null);
+  const loading = ref(false);
+  const error = ref<string | null>(null);
+
+  const init = async () => {
+    await refreshProviderSnapshot();
+  };
+
+  const refreshProviderSnapshot = async () => {
+    loading.value = true;
+    error.value = null;
+    
+    try {
+      const snapshot = await fetchProviderSnapshot();
+      
+      statuses.value = snapshot.statuses ?? [];
+      accounts.value = snapshot.accounts ?? [];
+      vendors.value = snapshot.vendors ?? [];
+      defaultAccountId.value = snapshot.defaultAccountId ?? null;
+      loading.value = false;
+    } catch (err) {
+      error.value = String(err);
+      loading.value = false;
+    }
+  };
+
+  const fetchProviders = async () => {
+    await refreshProviderSnapshot();
+  };
+  
+  const addProvider = async (config: Omit<ProviderConfig, 'createdAt' | 'updatedAt'>, apiKey?: string) => {
+    try {
+      const fullConfig: ProviderConfig = {
+        ...config,
+        createdAt: new Date().toISOString(),
+        updatedAt: new Date().toISOString(),
+      };
+      
+      const result = await hostApiFetch<{ success: boolean; error?: string }>('/api/providers', {
+        method: 'POST',
+        body: JSON.stringify({ config: fullConfig, apiKey }),
+      });
+      
+      if (!result.success) {
+        throw new Error(result.error || 'Failed to save provider');
+      }
+      
+      await refreshProviderSnapshot();
+    } catch (err) {
+      console.error('Failed to add provider:', err);
+      throw err;
+    }
+  };
+
+  const createAccount = async (account: ProviderAccount, apiKey?: string) => {
+    try {
+      const result = await hostApiFetch<{ success: boolean; error?: string }>('/api/provider-accounts', {
+        method: 'POST',
+        body: JSON.stringify({ account, apiKey }),
+      });
+
+      if (!result.success) {
+        throw new Error(result.error || 'Failed to create provider account');
+      }
+
+      await refreshProviderSnapshot();
+    } catch (err) {
+      console.error('Failed to add account:', err);
+      throw err;
+    }
+  };
+
+  const addAccount = async (account: ProviderAccount, apiKey?: string) => {
+    return createAccount(account, apiKey);
+  };
+  
+  const updateProvider = async (providerId: string, updates: Partial<ProviderConfig>, apiKey?: string) => {
+    try {
+      const existing = statuses.value.find((p) => p.id === providerId);
+      if (!existing) {
+        throw new Error('Provider not found');
+      }
+
+      const { hasKey: _hasKey, keyMasked: _keyMasked, ...providerConfig } = existing;
+      
+      const updatedConfig: ProviderConfig = {
+        ...providerConfig,
+        ...updates,
+        updatedAt: new Date().toISOString(),
+      };
+      
+      const result = await hostApiFetch<{ success: boolean; error?: string }>(`/api/providers/${encodeURIComponent(providerId)}`, {
+        method: 'PUT',
+        body: JSON.stringify({ updates: updatedConfig, apiKey }),
+      });
+      
+      if (!result.success) {
+        throw new Error(result.error || 'Failed to update provider');
+      }
+      
+      await refreshProviderSnapshot();
+    } catch (err) {
+      console.error('Failed to update provider:', err);
+      throw err;
+    }
+  };
+
+  const updateAccount = async (accountId: string, updates: Partial<ProviderAccount>, apiKey?: string) => {
+    try {
+      const result = await hostApiFetch<{ success: boolean; error?: string }>(`/api/provider-accounts/${encodeURIComponent(accountId)}`, {
+        method: 'PUT',
+        body: JSON.stringify({ updates, apiKey }),
+      });
+
+      if (!result.success) {
+        throw new Error(result.error || 'Failed to update provider account');
+      }
+
+      await refreshProviderSnapshot();
+    } catch (err) {
+      console.error('Failed to update account:', err);
+      throw err;
+    }
+  };
+  
+  const deleteProvider = async (providerId: string) => {
+    try {
+      const result = await hostApiFetch<{ success: boolean; error?: string }>(`/api/providers/${encodeURIComponent(providerId)}`, {
+        method: 'DELETE',
+      });
+      
+      if (!result.success) {
+        throw new Error(result.error || 'Failed to delete provider');
+      }
+      
+      await refreshProviderSnapshot();
+    } catch (err) {
+      console.error('Failed to delete provider:', err);
+      throw err;
+    }
+  };
+
+  const removeAccount = async (accountId: string) => {
+    try {
+      const result = await hostApiFetch<{ success: boolean; error?: string }>(`/api/provider-accounts/${encodeURIComponent(accountId)}`, {
+        method: 'DELETE',
+      });
+
+      if (!result.success) {
+        throw new Error(result.error || 'Failed to delete provider account');
+      }
+
+      await refreshProviderSnapshot();
+    } catch (err) {
+      console.error('Failed to delete account:', err);
+      throw err;
+    }
+  };
+
+  const deleteAccount = async (accountId: string) => {
+    return removeAccount(accountId);
+  };
+  
+  const setApiKey = async (providerId: string, apiKey: string) => {
+    try {
+      const result = await hostApiFetch<{ success: boolean; error?: string }>(`/api/providers/${encodeURIComponent(providerId)}`, {
+        method: 'PUT',
+        body: JSON.stringify({ updates: {}, apiKey }),
+      });
+      
+      if (!result.success) {
+        throw new Error(result.error || 'Failed to set API key');
+      }
+      
+      await refreshProviderSnapshot();
+    } catch (err) {
+      console.error('Failed to set API key:', err);
+      throw err;
+    }
+  };
+
+  const updateProviderWithKey = async (providerId: string, updates: Partial<ProviderConfig>, apiKey?: string) => {
+    try {
+      const result = await hostApiFetch<{ success: boolean; error?: string }>(`/api/providers/${encodeURIComponent(providerId)}`, {
+        method: 'PUT',
+        body: JSON.stringify({ updates, apiKey }),
+      });
+
+      if (!result.success) {
+        throw new Error(result.error || 'Failed to update provider');
+      }
+
+      await refreshProviderSnapshot();
+    } catch (err) {
+      console.error('Failed to update provider with key:', err);
+      throw err;
+    }
+  };
+  
+  const deleteApiKey = async (providerId: string) => {
+    try {
+      const result = await hostApiFetch<{ success: boolean; error?: string }>(
+        `/api/providers/${encodeURIComponent(providerId)}?apiKeyOnly=1`,
+        { method: 'DELETE' },
+      );
+      
+      if (!result.success) {
+        throw new Error(result.error || 'Failed to delete API key');
+      }
+      
+      await refreshProviderSnapshot();
+    } catch (err) {
+      console.error('Failed to delete API key:', err);
+      throw err;
+    }
+  };
+  
+  const setDefaultProvider = async (providerId: string) => {
+    try {
+      const result = await hostApiFetch<{ success: boolean; error?: string }>('/api/providers/default', {
+        method: 'PUT',
+        body: JSON.stringify({ providerId }),
+      });
+      
+      if (!result.success) {
+        throw new Error(result.error || 'Failed to set default provider');
+      }
+      
+      defaultAccountId.value = providerId;
+    } catch (err) {
+      console.error('Failed to set default provider:', err);
+      throw err;
+    }
+  };
+
+  const setDefaultAccount = async (accountId: string) => {
+    try {
+      const result = await hostApiFetch<{ success: boolean; error?: string }>('/api/provider-accounts/default', {
+        method: 'PUT',
+        body: JSON.stringify({ accountId }),
+      });
+
+      if (!result.success) {
+        throw new Error(result.error || 'Failed to set default provider account');
+      }
+
+      defaultAccountId.value = accountId;
+    } catch (err) {
+      console.error('Failed to set default account:', err);
+      throw err;
+    }
+  };
+  
+  const validateAccountApiKey = async (
+    providerId: string,
+    apiKey: string,
+    options?: { baseUrl?: string; apiProtocol?: ProviderAccount['apiProtocol'] }
+  ) => {
+    try {
+      const result = await hostApiFetch<{ valid: boolean; error?: string }>('/api/providers/validate', {
+        method: 'POST',
+        body: JSON.stringify({ providerId, apiKey, options }),
+      });
+      return result;
+    } catch (err) {
+      return { valid: false, error: String(err) };
+    }
+  };
+
+  const validateApiKey = async (
+    providerId: string,
+    apiKey: string,
+    options?: { baseUrl?: string; apiProtocol?: ProviderAccount['apiProtocol'] }
+  ) => {
+    return validateAccountApiKey(providerId, apiKey, options);
+  };
+  
+  const getAccountApiKey = async (providerId: string) => {
+    try {
+      const result = await hostApiFetch<{ apiKey: string | null }>(`/api/providers/${encodeURIComponent(providerId)}/api-key`);
+      return result.apiKey;
+    } catch {
+      return null;
+    }
+  };
+
+  const getApiKey = async (providerId: string) => {
+    return getAccountApiKey(providerId);
+  };
+
+  return {
+    statuses,
+    accounts,
+    vendors,
+    defaultAccountId,
+    loading,
+    error,
+    init,
+    refreshProviderSnapshot,
+    fetchProviders,
+    addProvider,
+    createAccount,
+    addAccount,
+    updateProvider,
+    updateAccount,
+    deleteProvider,
+    removeAccount,
+    deleteAccount,
+    setApiKey,
+    updateProviderWithKey,
+    deleteApiKey,
+    setDefaultProvider,
+    setDefaultAccount,
+    validateAccountApiKey,
+    validateApiKey,
+    getAccountApiKey,
+    getApiKey,
+  };
+});