宜博 / lemonboss

<template>
  <div class="quota-page">
    <AppNav />
    <div class="quota-layout">
      <header class="page-header">
        <h1>📊 算力消耗与 Token 监控 (Quota Monitor)</h1>
        <p class="subtitle">实时监控企业级 Multi-Agent 系统的大模型 API 成本与耗时</p>
      </header>

      <main class="dashboard-content" v-if="!loading">
        <!-- 核心指标 -->
        <section class="overview-grid">
          <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>
          <div class="stat-card">
            <h3>总输出 Tokens</h3>
            <div class="stat-value">{{ totalOutputTokens.toLocaleString() }}</div>
          </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>

        <div class="charts-row">
          <!-- 按照 Agent 的消耗排行榜 -->
          <section class="chart-card flex-double">
            <h3>🤖 各 Agent 计算力消耗排行榜</h3>
            <div class="bar-chart">
              <div v-for="agent in agentStats" :key="agent.id" class="bar-row">
                <div class="bar-label">
                  <span class="agent-id">{{ agent.id }}</span>
                  <span class="agent-calls">{{ agent.calls }} 次调用</span>
                </div>
                <div class="bar-track-wrapper">
                  <div class="bar-track">
                    <div class="bar-fill" :style="{ width: ((agent.tokens / maxAgentTokens) * 100) + '%' }"></div>
                  </div>
                  <div class="bar-value">{{ (agent.tokens / 1000).toFixed(1) }}k Tkns</div>
                </div>
                <div class="bar-subtext">
                  (模型: {{ agent.model }} | 预估: ${{ agent.cost.toFixed(4) }})
                </div>
              </div>
              <div v-if="agentStats.length === 0" class="empty-state">暂无数据</div>
            </div>
          </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>
          <div class="log-table-wrapper">
            <table class="log-table">
              <thead>
                <tr>
                  <th>时间</th>
                  <th>模型 (Model)</th>
                  <th>Agent</th>
                  <th>耗时</th>
                  <th>输入 Tokens</th>
                  <th>输出 Tokens</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-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>
                  <td class="log-cost">${{ log.costUsd.toFixed(6) }}</td>
                </tr>
              </tbody>
            </table>
            <div v-if="recentLogs.length === 0" class="empty-state">暂无日志</div>
          </div>
        </section>
      </main>

      <div v-else class="loading-state">
        <div class="spinner"></div> 加载监控数据中...
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import AppNav from '../components/AppNav.vue'

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 {
    const res = await fetch('/api/agent/quota')
    if (res.ok) {
      const data = await res.json()
      rawData.value = data.filter(d => d && d.timestamp).sort((a,b) => new Date(b.timestamp) - new Date(a.timestamp))
    }
  } catch(e) {
    console.error('Failed to load quota', e)
  } finally {
    loading.value = false
  }
})

// Overview stats
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 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
const agentStats = computed(() => {
  const map = {}
  rawData.value.forEach(d => {
    const id = d.agentId || 'unknown'
    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.tokens - a.tokens)
})
const maxAgentTokens = computed(() => {
  if (agentStats.value.length === 0) return 1
  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))

function formatTime(iso) {
  const d = new Date(iso)
  return d.toLocaleDateString() + ' ' + d.toLocaleTimeString()
}
</script>

<style scoped>
.quota-page {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg-primary);
  color: var(--text-primary);
  overflow-y: auto;
}

.quota-layout {
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 40px;
  width: 100%;
}

.page-header {
  margin-bottom: 32px;
}
.page-header h1 {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--text-primary);
}
.subtitle {
  color: var(--text-secondary);
  font-size: 14px;
}

.overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}

.stat-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 6px rgba(0,0,0,0.02);
}
.stat-card h3 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
  margin-bottom: 12px;
}
.stat-value {
  font-size: 30px;
  font-weight: 700;
  color: var(--text-primary);
}
.stat-value.highlight {
  color: var(--accent-primary);
}
.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 {
  display: flex;
  gap: 24px;
  margin-bottom: 24px;
}
.chart-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  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;
  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;
  gap: 16px;
}
.bar-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bar-label {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
}
.agent-id { font-weight: 600; color: var(--text-primary); }
.agent-calls { color: var(--text-secondary); font-size: 12px; }
.bar-track-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
}
.bar-track {
  flex: 1;
  height: 8px;
  background: var(--bg-secondary);
  border-radius: 4px;
  overflow: hidden;
}
.bar-fill {
  height: 100%;
  background: var(--accent-primary);
  border-radius: 4px;
  transition: width 0.5s ease-out;
}
.bar-value {
  font-size: 13px;
  font-weight: 600;
  width: 80px;
  text-align: right;
  color: var(--text-primary);
}
.bar-subtext {
  font-size: 11px;
  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;
}
.log-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.log-table th {
  text-align: left;
  padding: 12px;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-secondary);
  font-weight: 500;
}
.log-table td {
  padding: 12px;
  border-bottom: 1px solid var(--border-color);
  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-tokens.in { color: #10b981 !important; }
.log-tokens.out { color: #8b5cf6 !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;
  align-items: center;
  justify-content: center;
  padding: 100px;
  color: var(--text-secondary);
  gap: 12px;
}
.spinner {
  width: 20px; height: 20px;
  border: 2px solid var(--border-color);
  border-top-color: var(--accent-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
</style>