宜博 / 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>
        
        <div class="global-time-filter">
          <span class="filter-label">🕒 全局数据范围:</span>
          <button :class="{active: globalTimeRange === '1h'}" @click="globalTimeRange = '1h'">最近 1 小时</button>
          <button :class="{active: globalTimeRange === '24h'}" @click="globalTimeRange = '24h'">最近 24 小时</button>
          <button :class="{active: globalTimeRange === '7d'}" @click="globalTimeRange = '7d'">最近 7 天</button>
          <button :class="{active: globalTimeRange === '30d'}" @click="globalTimeRange = '30d'">最近 30 天</button>
          <button :class="{active: globalTimeRange === 'all'}" @click="globalTimeRange = 'all'">全部</button>
        </div>
      </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>

        <!-- 导航 Tabs -->
        <div class="tabs-nav">
          <button :class="{active: activeTab === 'trend'}" @click="activeTab = 'trend'">📈 使用趋势统计</button>
          <button :class="{active: activeTab === 'agent'}" @click="activeTab = 'agent'">🤖 Agent 排行榜</button>
          <button :class="{active: activeTab === 'task'}" @click="activeTab = 'task'">🎯 任务级成本分析</button>
          <button :class="{active: activeTab === 'log'}" @click="activeTab = 'log'">🕒 最近调用日志</button>
        </div>

        <div class="tab-content">
          <!-- 按照时间维度的调用频次柱状图 -->
          <section v-if="activeTab === 'trend'" 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>

          <!-- 按照 Agent 的消耗排行榜 -->
          <section v-if="activeTab === 'agent'" class="chart-card flex-double">
            <div class="card-header">
              <h3>各 Agent 计算力消耗排行榜</h3>
              <div class="tab-controls">
                <input type="text" v-model="searchAgent" placeholder="🔍 搜索 Agent 或 模型..." class="search-input" />
                <select v-model="sortAgent" class="sort-select">
                  <option value="tokens">⬇️ 按消耗 Tokens</option>
                  <option value="calls">⬇️ 按调用次数</option>
                  <option value="cost">⬇️ 按预估花费</option>
                </select>
              </div>
            </div>
            <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>

          <!-- 🆕 按任务链聚合的成本分析 -->
          <section v-if="activeTab === 'task'" class="chart-card">
            <div class="card-header">
              <h3>任务级成本分析</h3>
              <div class="tab-controls">
                <input type="text" v-model="searchTask" placeholder="🔍 搜索 任务ID 或 Agent..." class="search-input" />
                <select v-model="taskSort" class="sort-select">
                  <option value="cost">⬇️ 按花费</option>
                  <option value="tokens">⬇️ 按 Tokens</option>
                  <option value="time">⬇️ 按首条调用时间</option>
                </select>
              </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 v-if="activeTab === 'log'" class="chart-card">
            <div class="card-header">
              <h3>最近的大模型调用日志 (明细)</h3>
              <div class="tab-controls">
                <input type="text" v-model="searchLog" placeholder="🔍 搜索 Agent 或 模型..." class="search-input" />
                <select v-model="sortLog" class="sort-select">
                  <option value="time">⬇️ 按时间</option>
                  <option value="cost">⬇️ 按花费</option>
                  <option value="duration">⬇️ 按耗时</option>
                </select>
              </div>
            </div>
            <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>
        </div>
      </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 activeTab = ref('task') // 'trend', 'agent', 'task', 'log'

// Global Time Range Filter
const globalTimeRange = ref('7d')

// Tab filters & sorters
const searchAgent = ref('')
const sortAgent = ref('tokens')

const searchTask = ref('')
const taskSort = ref('cost')

const searchLog = ref('')
const sortLog = ref('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
  }
})

const filteredData = computed(() => {
  if (globalTimeRange.value === 'all') return rawData.value
  const now = Date.now()
  let cutoff = 0
  if (globalTimeRange.value === '1h') cutoff = now - 3600 * 1000
  else if (globalTimeRange.value === '24h') cutoff = now - 24 * 3600 * 1000
  else if (globalTimeRange.value === '7d') cutoff = now - 7 * 24 * 3600 * 1000
  else if (globalTimeRange.value === '30d') cutoff = now - 30 * 24 * 3600 * 1000
  return rawData.value.filter(d => new Date(d.timestamp).getTime() >= cutoff)
})

// Overview stats (derived from filteredData)
const totalCost = computed(() => filteredData.value.reduce((s, d) => s + (d.costUsd || 0), 0))
const totalInputTokens = computed(() => filteredData.value.reduce((s, d) => s + (d.usage?.input || 0), 0))
const totalOutputTokens = computed(() => filteredData.value.reduce((s, d) => s + (d.usage?.output || 0), 0))
const totalCalls = computed(() => filteredData.value.length)

// Time Breakdown
const timeStats = computed(() => {
  const map = {}
  filteredData.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 = {}
  filteredData.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
  })
  
  let result = Object.values(map)
  if (searchAgent.value) {
    const q = searchAgent.value.toLowerCase()
    result = result.filter(a => a.id.toLowerCase().includes(q) || a.model.toLowerCase().includes(q))
  }
  
  if (sortAgent.value === 'calls') result.sort((a,b) => b.calls - a.calls)
  else if (sortAgent.value === 'cost') result.sort((a,b) => b.cost - a.cost)
  else result.sort((a,b) => b.tokens - a.tokens)
  
  return result
})
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 = {}
  filteredData.value.forEach(d => {
    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

    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
  })

  let arr = Object.values(map).map(t => ({ ...t, agents: [...t.agentSet] }))
  
  if (searchTask.value) {
    const q = searchTask.value.toLowerCase()
    arr = arr.filter(t => t.taskId.toLowerCase().includes(q) || t.agents.some(a => a.toLowerCase().includes(q)))
  }

  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, 100) // 提升显示上限
})

// Recent Logs table
const recentLogs = computed(() => {
  let list = filteredData.value
  if (searchLog.value) {
    const q = searchLog.value.toLowerCase()
    list = list.filter(d => (d.agentId && d.agentId.toLowerCase().includes(q)) || 
                            (d.model && d.model.toLowerCase().includes(q)) || 
                            (d.convId && d.convId.toLowerCase().includes(q)))
  }
  
  let sorted = [...list]
  if (sortLog.value === 'cost') sorted.sort((a,b) => (b.costUsd||0) - (a.costUsd||0))
  else if (sortLog.value === 'duration') sorted.sort((a,b) => (b.durationMs||0) - (a.durationMs||0))
  else sorted.sort((a,b) => new Date(b.timestamp) - new Date(a.timestamp))
  
  return sorted.slice(0, 200) // Increase limits
})

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: 24px;
}
.page-header h1 {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--text-primary);
}
.subtitle {
  color: var(--text-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
.global-time-filter {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-surface);
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  width: fit-content;
}
.filter-label {
  font-size: 13px;
  color: var(--text-secondary);
  margin-right: 8px;
}
.global-time-filter button {
  background: transparent;
  border: 1px solid transparent;
  font-size: 13px;
  padding: 6px 16px;
  border-radius: 6px;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.2s;
}
.global-time-filter button:hover {
  background: var(--bg-secondary);
}
.global-time-filter button.active {
  background: var(--accent-primary);
  color: #fff;
  border-color: rgba(0,0,0,0.1);
  box-shadow: 0 2px 4px rgba(35, 131, 226, 0.2);
}

.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;
}

/* 导航 Tabs */
.tabs-nav {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 12px;
}
.tabs-nav button {
  background: transparent;
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 8px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s;
}
.tabs-nav button:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
}
.tabs-nav button.active {
  background: var(--bg-surface);
  border-color: var(--border-color);
  color: var(--accent-primary);
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.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;
}

/* Tab Controls for Search and Sort */
.tab-controls {
  display: flex;
  gap: 12px;
  align-items: center;
}
.search-input {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  width: 220px;
  outline: none;
  transition: border-color 0.2s;
}
.search-input:focus {
  border-color: var(--accent-primary);
}
.sort-select {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  padding: 6px 30px 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  outline: none;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 14px;
}

/* 按时间过滤 */
.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>