feat(v3): T19-T20 模型池设置 UI + 智能体页 + 指标分账卡

- 设置页「模型池」区块：三角色指派下拉、条目表格（档位徽标/单价/启用/测试/编辑/删除）、
  内联添加表单（模型列表探测 datalist，api_key 留空保留原值）
- 新增「🤖 智能体」页 /agent：任务输入 + 池模型选择、工具调用时间轴
  （round/tool_call/tool_result/usage/final）、左侧工作区文件浏览与预览
- 指标页「按模型分账」卡片（v2.by_model 表格）
- 修复：SSE final 后 EventSource 自动重连回放导致的事件重复渲染（终态即关闭+回放拦截）

webapp/src/views/MetricsView.vue

@@ -33,11 +33,31 @@
           <h3>协作管线（v2）</h3>
           <div class="kv-list">
             <template v-for="(v, k) in data.v2" :key="k">
-              <span>{{ k }}</span><b>{{ v }}</b>
+              <span v-if="k !== 'by_model'">{{ k }}</span>
+              <b v-if="k !== 'by_model'">{{ v }}</b>
             </template>
           </div>
         </div>
 
+        <div v-if="byModel && Object.keys(byModel).length" class="metric-card">
+          <h3>按模型分账（token / 成本）</h3>
+          <table class="by-model">
+            <thead>
+              <tr><th>模型</th><th>次数</th><th>入</th><th>出</th><th>成本 $</th></tr>
+            </thead>
+            <tbody>
+              <tr v-for="(b, m) in byModel" :key="m">
+                <td class="mono">{{ m }}</td>
+                <td>{{ b.requests }}</td>
+                <td>{{ b.input_tokens }}</td>
+                <td>{{ b.output_tokens }}</td>
+                <td>{{ b.cost_est_usd }}</td>
+              </tr>
+            </tbody>
+          </table>
+          <p class="hint">单价来自模型池条目（$/1M tokens）；经典设置下的模型成本不计入。</p>
+        </div>
+
         <div v-if="data.review" class="metric-card review-card">
           <h3>人工检验</h3>
           <div class="review-stats">
@@ -75,7 +95,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { ref, computed, onMounted } from 'vue'
 import { getMetrics } from '@/api'
 import type { Metrics } from '@/types'
 
@@ -83,6 +103,18 @@ const data = ref<Metrics | null>(null)
 const loading = ref(false)
 const error = ref('')
 
+interface ModelBucket {
+  requests: number
+  input_tokens: number
+  output_tokens: number
+  cost_est_usd: number
+}
+
+const byModel = computed(() => {
+  const v2 = data.value?.v2 as Record<string, unknown> | undefined
+  return (v2?.by_model as Record<string, ModelBucket>) || null
+})
+
 async function load() {
   loading.value = true
   error.value = ''
@@ -102,6 +134,12 @@ onMounted(load)
 <style scoped>
 .metrics-view { padding: 20px 24px; height: 100%; overflow-y: auto; }
 
+.by-model { width: 100%; border-collapse: collapse; font-size: 12px; }
+.by-model th, .by-model td { text-align: left; padding: 4px 8px; border-bottom: 1px solid #f3f4f6; }
+.by-model th { color: #6b7280; font-weight: 600; }
+.by-model td.mono { font-family: ui-monospace, Consolas, monospace; }
+.hint { color: #9ca3af; font-size: 11px; margin-top: 8px; }
+
 .metrics-header {
   display: flex;
   align-items: center;