feat: add task-level cost breakdown to quota page

Parses convId strings (e.g. task-T-xxx, callback-T-xxx) to group billing records by task ID. Provides a consolidated view showing total cost, token consumption, duration, and the agent pipeline sequence for each task, along with an expandable detailed breakdown per agent call. This allows easier identification of wasteful agent patterns.

feat: add task-level cost breakdown to quota page
Parses convId strings (e.g. task-T-xxx, callback-T-xxx) to group billing records by task ID. Provides a consolidated view showing total cost, token consumption, duration, and the agent pipeline sequence for each task, along with an expandable detailed breakdown per agent call. This allows easier identification of wasteful agent patterns.
yibo
1 parent c75bfc64
Showing 1 changed file with 140 additions and 0 deletions
web/src/views/QuotaMonitor.vue
@@ -97,6 +97,67 @@
           </section>
         </div>
+        <!-- 🆕 按任务链聚合的成本分析 -->
+        <section class="chart-card">
+          <div class="card-header">
+            <h3>🎯 任务级成本分析</h3>
+            <div class="time-filters">
+              <button :class="{active: taskSort === 'cost'}" @click="taskSort = 'cost'">按花费</button>
+              <button :class="{active: taskSort === 'tokens'}" @click="taskSort = 'tokens'">按 Tokens</button>
+              <button :class="{active: taskSort === 'time'}" @click="taskSort = 'time'">按时间</button>
+            </div>
+          </div>
+          <div class="task-table-wrapper">
+            <table class="log-table task-table">
+              <thead>
+                <tr>
+                  <th>任务 ID</th>
+                  <th>Agent 链路</th>
+                  <th>调用次数</th>
+                  <th>Input Tokens</th>
+                  <th>Output Tokens</th>
+                  <th>总耗时</th>
+                  <th>总花费</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-for="task in taskStats" :key="task.taskId"
+                    :class="{'task-row-expensive': task.cost > 2}"
+                    @click="task.expanded = !task.expanded">
+                  <td class="log-agent task-id-cell">
+                    <span class="expand-icon">{{ task.expanded ? '▼' : '▶' }}</span>
+                    {{ task.taskId }}
+                  </td>
+                  <td class="task-agents">
+                    <span v-for="(a, i) in task.agents" :key="a" class="agent-badge">
+                      {{ a }}<span v-if="i < task.agents.length - 1"> → </span>
+                    </span>
+                  </td>
+                  <td>{{ task.calls }}</td>
+                  <td class="log-tokens in">{{ (task.input / 1000).toFixed(0) }}k</td>
+                  <td class="log-tokens out">{{ (task.output / 1000).toFixed(0) }}k</td>
+                  <td class="log-duration">{{ (task.duration / 1000).toFixed(0) }}s</td>
+                  <td class="log-cost" :class="{'cost-warn': task.cost > 2, 'cost-danger': task.cost > 5}">
+                    ${{ task.cost.toFixed(2) }}
+                  </td>
+                </tr>
+                <template v-for="task in taskStats" :key="'detail-'+task.taskId">
+                  <tr v-if="task.expanded" v-for="(call, ci) in task.details" :key="ci" class="task-detail-row">
+                    <td></td>
+                    <td class="log-agent">{{ call.agentId }}</td>
+                    <td class="log-model">{{ call.convId }}</td>
+                    <td class="log-tokens in">{{ (call.usage?.input || 0).toLocaleString() }}</td>
+                    <td class="log-tokens out">{{ (call.usage?.output || 0).toLocaleString() }}</td>
+                    <td class="log-duration">{{ (call.durationMs / 1000).toFixed(1) }}s</td>
+                    <td class="log-cost">${{ call.costUsd.toFixed(4) }}</td>
+                  </tr>
+                </template>
+              </tbody>
+            </table>
+            <div v-if="taskStats.length === 0" class="empty-state">暂无任务数据</div>
+          </div>
+        </section>
+
         <!-- 详细调用日志 -->
         <section class="chart-card">
           <h3>🕒 最近的大模型调用日志</h3>
@@ -145,6 +206,7 @@ const loading = ref(true)
 const rawData = ref([])
 const timeScale = ref('day') // hour, day, week, month
+const taskSort = ref('cost') // cost, tokens, time
 onMounted(async () => {
   try {
@@ -223,6 +285,36 @@ const maxAgentTokens = computed(() =&gt; {
   return Math.max(...agentStats.value.map(a => a.tokens), 1)
 })
+// Task-level Breakdown
+const taskStats = computed(() => {
+  const map = {}
+  rawData.value.forEach(d => {
+    // 从 convId 中提取 taskId
+    const convId = d.convId || ''
+    let taskId = null
+    const taskMatch = convId.match(/(?:task|callback)-?(T-[a-z0-9]+)/i)
+    if (taskMatch) taskId = taskMatch[1]
+    else if (convId.startsWith('tpl-train-')) taskId = convId
+    else return // 跳过非任务类型的记录（如 conv-xxx 用户对话）
+
+    if (!map[taskId]) map[taskId] = { taskId, cost: 0, input: 0, output: 0, calls: 0, duration: 0, agentSet: new Set(), details: [], expanded: false, firstTime: d.timestamp }
+    map[taskId].cost += (d.costUsd || 0)
+    map[taskId].input += (d.usage?.input || 0)
+    map[taskId].output += (d.usage?.output || 0)
+    map[taskId].calls += 1
+    map[taskId].duration += (d.durationMs || 0)
+    map[taskId].agentSet.add(d.agentId)
+    map[taskId].details.push(d)
+    if (d.timestamp < map[taskId].firstTime) map[taskId].firstTime = d.timestamp
+  })
+
+  const arr = Object.values(map).map(t => ({ ...t, agents: [...t.agentSet] }))
+  if (taskSort.value === 'cost') arr.sort((a, b) => b.cost - a.cost)
+  else if (taskSort.value === 'tokens') arr.sort((a, b) => (b.input + b.output) - (a.input + a.output))
+  else arr.sort((a, b) => new Date(b.firstTime) - new Date(a.firstTime))
+  return arr.slice(0, 50)
+})
+
 // Recent Logs table
 const recentLogs = computed(() => rawData.value.slice(0, 50))
@@ -473,6 +565,54 @@ function formatTime(iso) {
   color: var(--text-faint);
 }
+/* Task breakdown */
+.task-table-wrapper {
+  overflow-x: auto;
+  max-height: 600px;
+  overflow-y: auto;
+}
+.task-table tr {
+  cursor: pointer;
+  transition: background 0.15s;
+}
+.task-table tr:hover {
+  background: rgba(82, 168, 255, 0.05);
+}
+.task-id-cell {
+  font-family: monospace;
+  font-size: 12px;
+  white-space: nowrap;
+}
+.expand-icon {
+  font-size: 10px;
+  margin-right: 6px;
+  color: var(--text-secondary);
+}
+.agent-badge {
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+.task-row-expensive {
+  background: rgba(255, 100, 50, 0.04);
+}
+.cost-warn {
+  color: #f59e0b !important;
+  font-weight: 700;
+}
+.cost-danger {
+  color: #ef4444 !important;
+  font-weight: 700;
+}
+.task-detail-row {
+  background: var(--bg-secondary) !important;
+  cursor: default !important;
+  font-size: 12px;
+}
+.task-detail-row td {
+  padding: 8px 12px;
+  color: var(--text-secondary);
+}
+
 .log-table-wrapper {
   overflow-x: auto;
 }