From 6bad007cd9128d5168a5e8ff56697ae109d9bf2c Mon Sep 17 00:00:00 2001
From: wangwei <Wei.Wang@t-systems.com>
Date: Thu, 2 Jul 2026 15:40:37 +0800
Subject: [PATCH] feat(token-tracking): add Token usage panel to the report
 detail page

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 webapp/static/index.html   |  4 ++++
 webapp/static/js/report.js | 21 +++++++++++++++++++++
 2 files changed, 25 insertions(+)

diff --git a/webapp/static/index.html b/webapp/static/index.html
index 02c1fa4..b48180b 100644
--- a/webapp/static/index.html
+++ b/webapp/static/index.html
@@ -185,6 +185,10 @@
               <div class="advice-body" id="advice-body"></div>
             </div>
           </div>
+
+          <!-- ⑥ Token 用量（按模型分组，不换算金额） -->
+          <div class="section-label">⑥ Token 用量</div>
+          <div class="panel" id="token-usage-wrap"></div>
         </div>
       </section>
 
diff --git a/webapp/static/js/report.js b/webapp/static/js/report.js
index 6a2a2ed..49b80a9 100644
--- a/webapp/static/js/report.js
+++ b/webapp/static/js/report.js
@@ -32,6 +32,7 @@ const Report = {
       Report.renderGroupings(detail.report);
       Report.renderLowest(detail.report);
       Report.renderAdvice(detail.summary, detail.report);
+      Report.renderTokenUsage(detail.report);
       content.style.opacity = "1";
 
       // 同步下拉选中项
@@ -254,6 +255,26 @@ const Report = {
     tableEl.innerHTML = `<table class="group-table">${head}${body}</table>`;
   },
 
+  // 渲染"Token 用量"面板：按模型分组的 input/output/调用次数表格。
+  renderTokenUsage(report) {
+    const wrap = document.getElementById("token-usage-wrap");
+    if (!wrap) return;
+    const usage = report.token_usage || {};
+    const models = Object.keys(usage).sort();
+    if (models.length === 0) {
+      wrap.innerHTML = '<p class="muted tiny">暂无 token 用量数据。</p>';
+      return;
+    }
+    let head = "<tr><th>模型</th><th>input_tokens</th><th>output_tokens</th><th>调用次数</th></tr>";
+    let body = "";
+    models.forEach((model) => {
+      const u = usage[model] || {};
+      body += `<tr><td>${App.escape(model)}</td><td>${u.input_tokens ?? 0}</td>` +
+        `<td>${u.output_tokens ?? 0}</td><td>${u.calls ?? 0}</td></tr>`;
+    });
+    wrap.innerHTML = `<table class="group-table">${head}${body}</table>`;
+  },
+
   // ④ 最低分样本逐条复核表（点击展开）。
   renderLowest(report) {    const wrap = document.getElementById("lowest-table");
     const samples = report.lowest_samples || [];