feat(token-usage): implement token usage tracking and reporting features (agentscope-ai#775)

Author: Cirilla-zmh

console/src/api/index.ts

@@ -17,6 +17,7 @@ import { workspaceApi } from "./modules/workspace";
 import { localModelApi } from "./modules/localModel";
 import { ollamaModelApi } from "./modules/ollamaModel";
 import { mcpApi } from "./modules/mcp";
+import { tokenUsageApi } from "./modules/tokenUsage";
 import { toolsApi } from "./modules/tools";
 
 export const api = {
@@ -62,6 +63,8 @@ export const api = {
   // MCP Clients
   ...mcpApi,
 
+  // Token Usage
+  ...tokenUsageApi,
   // Tools
   ...toolsApi,
 };

console/src/api/modules/tokenUsage.ts

@@ -0,0 +1,20 @@
+import { request } from "../request";
+import type { TokenUsageSummary } from "../types/tokenUsage";
+
+export interface GetTokenUsageParams {
+  start_date: string;
+  end_date: string;
+}
+
+function buildQuery(params: GetTokenUsageParams): string {
+  const search = new URLSearchParams({
+    start_date: params.start_date,
+    end_date: params.end_date,
+  });
+  return `?${search.toString()}`;
+}
+
+export const tokenUsageApi = {
+  getTokenUsage: (params: GetTokenUsageParams) =>
+    request<TokenUsageSummary>(`/token-usage${buildQuery(params)}`),
+};

console/src/api/types/index.ts

@@ -8,3 +8,4 @@ export * from "./mcp";
 export * from "./provider";
 export * from "./skill";
 export * from "./workspace";
+export * from "./tokenUsage";

console/src/api/types/tokenUsage.ts

@@ -0,0 +1,16 @@
+/** Per-model (has provider_id, model) or per-date (no provider_id, model) stats. */
+export interface TokenUsageStats {
+  provider_id?: string;
+  model?: string;
+  prompt_tokens: number;
+  completion_tokens: number;
+  call_count: number;
+}
+
+export interface TokenUsageSummary {
+  total_prompt_tokens: number;
+  total_completion_tokens: number;
+  total_calls: number;
+  by_model: Record<string, TokenUsageStats>;
+  by_date: Record<string, TokenUsageStats>;
+}

console/src/layouts/MainLayout/index.tsx

@@ -17,6 +17,7 @@ import WorkspacePage from "../../pages/Agent/Workspace";
 import MCPPage from "../../pages/Agent/MCP";
 import ModelsPage from "../../pages/Settings/Models";
 import EnvironmentsPage from "../../pages/Settings/Environments";
+import TokenUsagePage from "../../pages/Settings/TokenUsage";
 
 const { Content } = Layout;
 
@@ -34,6 +35,7 @@ const pathToKey: Record<string, string> = {
   "/models": "models",
   "/environments": "environments",
   "/agent-config": "agent-config",
+  "/token-usage": "token-usage",
 };
 
 export default function MainLayout() {
@@ -70,6 +72,7 @@ export default function MainLayout() {
               <Route path="/models" element={<ModelsPage />} />
               <Route path="/environments" element={<EnvironmentsPage />} />
               <Route path="/agent-config" element={<AgentConfigPage />} />
+              <Route path="/token-usage" element={<TokenUsagePage />} />
               <Route path="/" element={<Chat />} />
             </Routes>
           </div>

console/src/layouts/Sidebar.tsx

@@ -34,6 +34,7 @@ import {
   PanelLeftOpen,
   Copy,
   Check,
+  BarChart3,
 } from "lucide-react";
 import api from "../api";
 import styles from "./index.module.less";
@@ -62,6 +63,7 @@ const KEY_TO_PATH: Record<string, string> = {
   models: "/models",
   environments: "/environments",
   "agent-config": "/agent-config",
+  "token-usage": "/token-usage",
 };
 
 const UPDATE_MD: Record<string, string> = {
@@ -339,6 +341,11 @@ export default function Sidebar({ selectedKey }: SidebarProps) {
           label: t("nav.environments"),
           icon: <Globe size={16} />,
         },
+        {
+          key: "token-usage",
+          label: t("nav.tokenUsage"),
+          icon: <BarChart3 size={16} />,
+        },
       ],
     },
   ];

console/src/locales/en.json

@@ -36,7 +36,8 @@
     "agentConfig": "Configuration",
     "settings": "Settings",
     "models": "Models",
-    "environments": "Environments"
+    "environments": "Environments",
+    "tokenUsage": "Token Usage"
   },
   "workspace": {
     "title": "WorkSpace",
@@ -323,6 +324,22 @@
     "showValue": "Show value",
     "hideValue": "Hide value"
   },
+  "tokenUsage": {
+    "title": "Token Usage",
+    "description": "View LLM token consumption over time, by date and model.",
+    "totalTokens": "Total Tokens",
+    "totalCalls": "Total Calls",
+    "promptTokens": "Prompt Tokens",
+    "completionTokens": "Completion Tokens",
+    "byModel": "By Model",
+    "byDate": "By Date",
+    "provider": "Provider",
+    "model": "Model",
+    "date": "Date",
+    "refresh": "Refresh",
+    "loadFailed": "Failed to load token usage",
+    "noData": "No token usage data in the selected period"
+  },
   "models": {
     "llmConfiguration": "LLM Configuration",
     "providersTitle": "Providers",

console/src/locales/ja.json

@@ -320,6 +320,22 @@
     "showValue": "値を表示",
     "hideValue": "値を非表示"
   },
+  "tokenUsage": {
+    "title": "Token 使用量",
+    "description": "日付・モデル別の LLM Token 使用量を確認します。",
+    "totalTokens": "合計 Token 数",
+    "totalCalls": "総呼び出し回数",
+    "promptTokens": "入力 Token",
+    "completionTokens": "出力 Token",
+    "byModel": "モデル別",
+    "byDate": "日付別",
+    "provider": "プロバイダー",
+    "model": "モデル",
+    "date": "日付",
+    "refresh": "更新",
+    "loadFailed": "Token 使用量の読み込みに失敗しました",
+    "noData": "選択期間に Token 使用データがありません"
+  },
   "models": {
     "llmConfiguration": "LLM設定",
     "providersTitle": "プロバイダー",

console/src/locales/ru.json

@@ -323,6 +323,22 @@
     "showValue": "Показать значение",
     "hideValue": "Скрыть значение"
   },
+  "tokenUsage": {
+    "title": "Использование токенов",
+    "description": "Просмотр расхода LLM-токенов по датам и моделям.",
+    "totalTokens": "Всего токенов",
+    "totalCalls": "Всего вызовов",
+    "promptTokens": "Входные токены",
+    "completionTokens": "Выходные токены",
+    "byModel": "По модели",
+    "byDate": "По дате",
+    "provider": "Провайдер",
+    "model": "Модель",
+    "date": "Дата",
+    "refresh": "Обновить",
+    "loadFailed": "Не удалось загрузить данные об использовании токенов",
+    "noData": "Нет данных об использовании токенов за выбранный период"
+  },
   "models": {
     "llmConfiguration": "Конфигурация LLM",
     "providersTitle": "Провайдеры",

console/src/locales/zh.json

@@ -36,7 +36,8 @@
     "agentConfig": "运行配置",
     "settings": "设置",
     "models": "模型",
-    "environments": "环境变量"
+    "environments": "环境变量",
+    "tokenUsage": "Token 消耗"
   },
   "workspace": {
     "title": "工作区",
@@ -323,6 +324,22 @@
     "showValue": "显示值",
     "hideValue": "隐藏值"
   },
+  "tokenUsage": {
+    "title": "Token 消耗",
+    "description": "查看一段时间内的 LLM Token 消耗，按日期和模型统计。",
+    "totalTokens": "总 Token 数",
+    "totalCalls": "总调用次数",
+    "promptTokens": "输入 Token",
+    "completionTokens": "输出 Token",
+    "byModel": "按模型",
+    "byDate": "按日期",
+    "provider": "提供商",
+    "model": "模型",
+    "date": "日期",
+    "refresh": "刷新",
+    "loadFailed": "加载 Token 消耗数据失败",
+    "noData": "所选时间段内暂无 Token 消耗数据"
+  },
   "models": {
     "llmConfiguration": "LLM 配置",
     "providersTitle": "提供商",