feat: track genuine LLM model names in billing logs, and revamp Quota Monitor wi…

…th time-based multi-dimension token tracking charts

feat: track genuine LLM model names in billing logs, and revamp Quota Monitor wi…
…th time-based multi-dimension token tracking charts
yibo
1 parent 9f5229d5
Showing 3 changed files with 221 additions and 28 deletions
packages/acp-core/protocol/ClaudeCliProtocol.js
server/routes/agent-chat.js
web/src/views/QuotaMonitor.vue
@@ -332,11 +332,13 @@ class ClaudeCliProtocol extends EventEmitter {
                         session_id: event.session_id,
                         stop_reason: event.stop_reason,
                         usage: this._lastUsage || { input: 0, output: 0 },
+                        model: this._lastModel || 'unknown',
                     },
                     timestamp: Date.now(),
                 });
  
                 this._lastUsage = null;
+                this._lastModel = null;
  
                 if (this._promptResolve) {
                     if (this._idleTimer) { clearTimeout(this._idleTimer); this._idleTimer = null; }
@@ -404,6 +406,9 @@ class ClaudeCliProtocol extends EventEmitter {
             this._lastUsage.input += (innerEvent.message.usage.input_tokens || 0);
             this._lastUsage.output += (innerEvent.message.usage.output_tokens || 0);
         }
+        if (innerEvent.message?.model) {
+            this._lastModel = innerEvent.message.model;
+        }
  
         switch (innerEvent.type) {
             case 'content_block_delta':
@@ -1924,6 +1924,7 @@ router.post(&#39;/:agentId/chat&#39;, async (req, res) =&gt; {
                 timestamp: new Date().toISOString(),
                 agentId,
                 convId,
+                model: event.params.model || 'unknown',
                 costUsd: event.params.cost_usd || 0,
                 durationMs: event.params.duration_ms,
                 usage: event.params.usage || { input: 0, output: 0 }
@@ -10,11 +10,15 @@
       <main class="dashboard-content" v-if="!loading">
         <!-- 核心指标 -->
         <section class="overview-grid">
-          <div class="stat-card sum-card">
-            <h3>总消耗金额 (USD)</h3>
+          <div class="stat-card sum-card" title="由于底层使用 Claude CLI 引擎，这里的 USD 计费默认根据官方 Claude 3.5 Sonnet 单价($3输入/$15输出)进行估值。">
+            <h3>总预估金额 (USD)*</h3>
             <div class="stat-value highlight">${{ totalCost.toFixed(4) }}</div>
           </div>
           <div class="stat-card">
+            <h3>总调用次数</h3>
+            <div class="stat-value">{{ totalCalls.toLocaleString() }} 次</div>
+          </div>
+          <div class="stat-card">
             <h3>总输入 Tokens</h3>
             <div class="stat-value">{{ totalInputTokens.toLocaleString() }}</div>
           </div>
@@ -22,9 +26,49 @@
             <h3>总输出 Tokens</h3>
             <div class="stat-value">{{ totalOutputTokens.toLocaleString() }}</div>
           </div>
-          <div class="stat-card">
-            <h3>平均单次推理耗时</h3>
-            <div class="stat-value">{{ avgDuration.toFixed(1) }}s</div>
+        </section>
+
+        <!-- 按照时间维度的调用频次柱状图 -->
+        <section class="chart-card flex-double time-chart-section">
+          <div class="card-header">
+            <h3>📈 使用趋势统计</h3>
+            <div class="time-filters">
+              <button :class="{active: timeScale === 'hour'}" @click="timeScale = 'hour'">按小时</button>
+              <button :class="{active: timeScale === 'day'}" @click="timeScale = 'day'">按天</button>
+              <button :class="{active: timeScale === 'week'}" @click="timeScale = 'week'">按周</button>
+              <button :class="{active: timeScale === 'month'}" @click="timeScale = 'month'">按月</button>
+            </div>
+          </div>
+          
+          <div class="trend-charts-wrapper">
+            <!-- Tokens 柱状图 -->
+            <div class="chart-box">
+              <h4 class="chart-title">Token 消耗量 <span class="legend"><span class="c-in">■</span>输入 <span class="c-out">■</span>输出</span></h4>
+              <div class="trend-bars">
+                <div v-for="t in timeStats" :key="t.label" class="trend-bar-col">
+                  <div class="bar-stack" title="Input: {{ t.input }} | Output: {{ t.output }}">
+                    <div class="bar-portion-out" :style="{ height: ((t.output / maxTimeTokens) * 100) + '%' }"></div>
+                    <div class="bar-portion-in" :style="{ height: ((t.input / maxTimeTokens) * 100) + '%' }"></div>
+                  </div>
+                  <div class="trend-label">{{ t.label }}</div>
+                </div>
+                <div v-if="timeStats.length === 0" class="empty-state">无数据</div>
+              </div>
+            </div>
+
+            <!-- 调用次数柱状图 -->
+            <div class="chart-box">
+              <h4 class="chart-title">API 调用频次</h4>
+              <div class="trend-bars">
+                <div v-for="t in timeStats" :key="t.label" class="trend-bar-col">
+                  <div class="bar-stack" title="{{ t.calls }} 次">
+                    <div class="bar-portion-calls" :style="{ height: ((t.calls / maxTimeCalls) * 100) + '%' }"></div>
+                  </div>
+                  <div class="trend-label">{{ t.label }}</div>
+                </div>
+                <div v-if="timeStats.length === 0" class="empty-state">无数据</div>
+              </div>
+            </div>
           </div>
         </section>
  
@@ -40,12 +84,12 @@
                 </div>
                 <div class="bar-track-wrapper">
                   <div class="bar-track">
-                    <div class="bar-fill" :style="{ width: ((agent.cost / maxAgentCost) * 100) + '%' }"></div>
+                    <div class="bar-fill" :style="{ width: ((agent.tokens / maxAgentTokens) * 100) + '%' }"></div>
                   </div>
-                  <div class="bar-value">${{ agent.cost.toFixed(4) }}</div>
+                  <div class="bar-value">{{ (agent.tokens / 1000).toFixed(1) }}k Tkns</div>
                 </div>
                 <div class="bar-subtext">
-                  (In: {{ agent.input.toLocaleString() }} / Out: {{ agent.output.toLocaleString() }})
+                  (模型: {{ agent.model }} | 预估: ${{ agent.cost.toFixed(4) }})
                 </div>
               </div>
               <div v-if="agentStats.length === 0" class="empty-state">暂无数据</div>
@@ -61,19 +105,19 @@
               <thead>
                 <tr>
                   <th>时间</th>
+                  <th>模型 (Model)</th>
                   <th>Agent</th>
-                  <th>对话 ID</th>
                   <th>耗时</th>
                   <th>输入 Tokens</th>
                   <th>输出 Tokens</th>
-                  <th>消耗金额</th>
+                  <th>计算预估*</th>
                 </tr>
               </thead>
               <tbody>
                 <tr v-for="(log, i) in recentLogs" :key="i">
                   <td class="log-time">{{ formatTime(log.timestamp) }}</td>
+                  <td class="log-model">{{ log.model || 'unknown' }}</td>
                   <td class="log-agent">{{ log.agentId }}</td>
-                  <td class="log-conv" :title="log.convId">{{ log.convId.substring(0, 12) }}...</td>
                   <td class="log-duration">{{ (log.durationMs / 1000).toFixed(1) }}s</td>
                   <td class="log-tokens in">+{{ (log.usage?.input || 0).toLocaleString() }}</td>
                   <td class="log-tokens out">+{{ (log.usage?.output || 0).toLocaleString() }}</td>
@@ -100,12 +144,13 @@ import AppNav from &#39;../components/AppNav.vue&#39;
 const loading = ref(true)
 const rawData = ref([])
  
+const timeScale = ref('day') // hour, day, week, month
+
 onMounted(async () => {
   try {
     const res = await fetch('/api/agent/quota')
     if (res.ok) {
       const data = await res.json()
-      // Filter out invalid records if any
       rawData.value = data.filter(d => d && d.timestamp).sort((a,b) => new Date(b.timestamp) - new Date(a.timestamp))
     }
   } catch(e) {
@@ -119,10 +164,43 @@ onMounted(async () =&gt; {
 const totalCost = computed(() => rawData.value.reduce((s, d) => s + (d.costUsd || 0), 0))
 const totalInputTokens = computed(() => rawData.value.reduce((s, d) => s + (d.usage?.input || 0), 0))
 const totalOutputTokens = computed(() => rawData.value.reduce((s, d) => s + (d.usage?.output || 0), 0))
-const avgDuration = computed(() => {
-  if (rawData.value.length === 0) return 0
-  const sumMs = rawData.value.reduce((s, d) => s + (d.durationMs || 0), 0)
-  return (sumMs / rawData.value.length) / 1000
+const totalCalls = computed(() => rawData.value.length)
+
+// Time Breakdown
+const timeStats = computed(() => {
+  const map = {}
+  rawData.value.forEach(d => {
+    const date = new Date(d.timestamp)
+    let label = ''
+    if (timeScale.value === 'hour') {
+      label = `${date.getMonth()+1}/${date.getDate()} ${date.getHours()}:00`
+    } else if (timeScale.value === 'day') {
+      label = `${date.getMonth()+1}/${date.getDate()}`
+    } else if (timeScale.value === 'week') {
+      const year = date.getFullYear()
+      const week = Math.ceil(date.getDate() / 7)
+      label = `W${week} (${date.getMonth()+1}月)`
+    } else if (timeScale.value === 'month') {
+      label = `${date.getFullYear()}-${date.getMonth()+1}`
+    }
+    
+    if (!map[label]) map[label] = { label, input: 0, output: 0, calls: 0, time: date.getTime() }
+    map[label].input += (d.usage?.input || 0)
+    map[label].output += (d.usage?.output || 0)
+    map[label].calls += 1
+  })
+  
+  // Sort chronically
+  return Object.values(map).sort((a,b) => a.time - b.time).slice(-15) // Show last 15 periods
+})
+
+const maxTimeTokens = computed(() => {
+  if (timeStats.value.length === 0) return 1
+  return Math.max(...timeStats.value.map(t => t.input + t.output), 1)
+})
+const maxTimeCalls = computed(() => {
+  if (timeStats.value.length === 0) return 1
+  return Math.max(...timeStats.value.map(t => t.calls), 1)
 })
  
 // Agent Breakdown
@@ -130,21 +208,23 @@ const agentStats = computed(() =&gt; {
   const map = {}
   rawData.value.forEach(d => {
     const id = d.agentId || 'unknown'
-    if (!map[id]) map[id] = { id, cost: 0, input: 0, output: 0, calls: 0 }
+    if (!map[id]) map[id] = { id, cost: 0, input: 0, output: 0, tokens: 0, calls: 0, model: d.model || 'claude-3-5-*' }
     map[id].cost += (d.costUsd || 0)
     map[id].input += (d.usage?.input || 0)
     map[id].output += (d.usage?.output || 0)
+    map[id].tokens += (d.usage?.input || 0) + (d.usage?.output || 0)
     map[id].calls += 1
+    if (d.model && d.model !== 'unknown') map[id].model = d.model
   })
-  return Object.values(map).sort((a,b) => b.cost - a.cost)
+  return Object.values(map).sort((a,b) => b.tokens - a.tokens)
 })
-const maxAgentCost = computed(() => {
+const maxAgentTokens = computed(() => {
   if (agentStats.value.length === 0) return 1
-  return Math.max(...agentStats.value.map(a => a.cost), 0.0001)
+  return Math.max(...agentStats.value.map(a => a.tokens), 1)
 })
  
 // Recent Logs table
-const recentLogs = computed(() => rawData.value.slice(0, 100))
+const recentLogs = computed(() => rawData.value.slice(0, 50))
  
 function formatTime(iso) {
   const d = new Date(iso)
@@ -185,7 +265,7 @@ function formatTime(iso) {
  
 .overview-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
   gap: 20px;
   margin-bottom: 24px;
 }
@@ -197,7 +277,7 @@ function formatTime(iso) {
   padding: 24px;
   display: flex;
   flex-direction: column;
-  box-shadow: 0 4px 6px rgba(0,0,0,0.05);
+  box-shadow: 0 4px 6px rgba(0,0,0,0.02);
 }
 .stat-card h3 {
   font-size: 13px;
@@ -207,7 +287,7 @@ function formatTime(iso) {
   margin-bottom: 12px;
 }
 .stat-value {
-  font-size: 32px;
+  font-size: 30px;
   font-weight: 700;
   color: var(--text-primary);
 }
@@ -217,6 +297,7 @@ function formatTime(iso) {
 .sum-card {
   background: linear-gradient(145deg, rgba(82, 168, 255, 0.1) 0%, rgba(35, 131, 226, 0.02) 100%);
   border-color: rgba(82, 168, 255, 0.2);
+  cursor: help;
 }
  
 .charts-row {
@@ -230,16 +311,121 @@ function formatTime(iso) {
   border-radius: 12px;
   padding: 24px;
   flex: 1;
+  margin-bottom: 24px;
+}
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
 }
 .chart-card h3 {
   font-size: 16px;
-  margin-bottom: 20px;
   color: var(--text-primary);
   display: flex;
   align-items: center;
   gap: 8px;
 }
  
+/* 按时间过滤 */
+.time-filters {
+  display: flex;
+  background: var(--bg-secondary);
+  border-radius: 8px;
+  padding: 4px;
+}
+.time-filters button {
+  background: transparent;
+  border: none;
+  font-size: 12px;
+  padding: 6px 12px;
+  border-radius: 6px;
+  color: var(--text-secondary);
+  cursor: pointer;
+}
+.time-filters button.active {
+  background: var(--bg-surface);
+  color: var(--text-primary);
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+/* 双柱状图布局 */
+.trend-charts-wrapper {
+  display: flex;
+  gap: 32px;
+}
+.chart-box {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+.chart-title {
+  font-size: 13px;
+  color: var(--text-secondary);
+  margin-bottom: 16px;
+  font-weight: 500;
+  display: flex;
+  justify-content: space-between;
+}
+.legend { font-size: 11px; }
+.legend .c-in { color: #10b981; margin-right: 4px; }
+.legend .c-out { color: #8b5cf6; margin-right: 4px; margin-left:8px; }
+
+.trend-bars {
+  display: flex;
+  align-items: flex-end;
+  gap: 8px;
+  height: 180px;
+  padding-bottom: 24px;
+  position: relative;
+  border-bottom: 1px solid var(--border-color);
+}
+.trend-bar-col {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height: 100%;
+  justify-content: flex-end;
+  position: relative;
+}
+.bar-stack {
+  width: 100%;
+  max-width: 40px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  cursor: crosshair;
+}
+.bar-portion-in {
+  background: #10b981;
+  width: 100%;
+  border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+.bar-portion-out {
+  background: #8b5cf6;
+  width: 100%;
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+}
+.bar-portion-calls {
+  background: var(--accent-primary);
+  width: 100%;
+  border-radius: 4px;
+}
+.trend-label {
+  position: absolute;
+  bottom: -22px;
+  font-size: 10px;
+  color: var(--text-secondary);
+  white-space: nowrap;
+  transform: rotate(-30deg);
+  transform-origin: top center;
+}
+
+/* Agent 排行榜 */
 .bar-chart {
   display: flex;
   flex-direction: column;
@@ -278,7 +464,7 @@ function formatTime(iso) {
 .bar-value {
   font-size: 13px;
   font-weight: 600;
-  width: 70px;
+  width: 80px;
   text-align: right;
   color: var(--text-primary);
 }
@@ -308,17 +494,18 @@ function formatTime(iso) {
   color: var(--text-primary);
 }
 .log-time { color: var(--text-secondary) !important; font-variant-numeric: tabular-nums; }
+.log-model { color: #aa862e; font-family: monospace; font-size: 12px; }
 .log-agent { font-weight: 500; }
-.log-conv { color: var(--text-faint) !important; font-family: monospace; }
 .log-tokens.in { color: #10b981 !important; }
 .log-tokens.out { color: #8b5cf6 !important; }
-.log-cost { font-weight: 600; color: var(--accent-primary) !important; }
+.log-cost { font-weight: 600; color: var(--text-faint) !important; }
  
 .empty-state {
   padding: 40px;
   text-align: center;
   color: var(--text-faint);
   font-style: italic;
+  width: 100%;
 }
 .loading-state {
   display: flex;