@hongmaple0820/scale-engine 0.48.0 → 0.50.1

package/dist/dashboard/spa/pages/costs.js

@@ -0,0 +1,522 @@
+/**
+ * Costs Page v2 — Model comparison radar, efficiency gauge, token waterfall, optimization tips
+ */
+;(() => {
+  'use strict'
+
+  const { fetchJSON, formatNumber, registerChart, getTheme, t, $, $$, dom } = window.Dashboard
+  const { chartContainer, dataTable, el, emptyState, metricCard, panel, renderText } = dom
+
+  // Model pricing (USD per 1M tokens, approximate)
+  const MODEL_PRICING = {
+    'claude-opus-4': { input: 15, output: 75 },
+    'claude-sonnet-4': { input: 3, output: 15 },
+    'claude-haiku-3.5': { input: 0.80, output: 4 },
+    'gpt-4o': { input: 2.50, output: 10 },
+    'gpt-4o-mini': { input: 0.15, output: 0.60 },
+    'default': { input: 3, output: 15 },
+  }
+
+  async function renderCosts() {
+    const app = $('#app')
+    app.replaceChildren(
+      el('div', { className: 'metrics-row', id: 'cost-metrics' }),
+      el('div', { className: 'tabs', id: 'cost-tabs' }, [
+        el('div', { className: 'tab active', text: t('costs.overview'), dataset: { tab: 'overview' } }),
+        el('div', { className: 'tab', text: t('costs.modelComparison'), dataset: { tab: 'models' } }),
+        el('div', { className: 'tab', text: t('costs.optimization'), dataset: { tab: 'optimization' } }),
+      ]),
+      el('div', { id: 'cost-content' })
+    )
+
+    const metrics = await fetchJSON('/api/metrics')
+    renderCostMetrics(metrics)
+
+    let currentTab = 'overview'
+    $('#cost-tabs').addEventListener('click', (e) => {
+      const tab = e.target.dataset?.tab
+      if (!tab) return
+      currentTab = tab
+      $$('#cost-tabs .tab').forEach(el => el.classList.toggle('active', el.dataset.tab === tab))
+      renderCostTab(tab, metrics)
+    })
+
+    renderCostTab('overview', metrics)
+  }
+
+  function renderCostMetrics(metrics) {
+    const container = $('#cost-metrics')
+    const cmd = metrics?.commandRuns
+    const model = metrics?.modelUsage
+
+    const totalTokens = (model?.totalInputTokens ?? 0) + (model?.totalOutputTokens ?? 0)
+    const savedTokens = cmd?.savedEstimatedTokens ?? 0
+    const efficiency = cmd?.rawEstimatedTokens > 0
+      ? ((savedTokens / cmd.rawEstimatedTokens) * 100).toFixed(1) + '%'
+      : '0%'
+    const estimatedCost = estimateCost(model)
+
+    const cards = [
+      { label: t('costs.totalTokens'), value: formatNumber(totalTokens), cls: '' },
+      { label: t('costs.rawEstTokens'), value: formatNumber(cmd?.rawEstimatedTokens ?? 0), cls: '' },
+      { label: t('costs.tokensSaved'), value: formatNumber(savedTokens), cls: 'accent' },
+      { label: t('costs.compressionRate'), value: efficiency, cls: 'accent' },
+      { label: t('costs.estCost'), value: '$' + estimatedCost.toFixed(2), cls: '' },
+    ]
+    container.replaceChildren(...cards.map(c => metricCard(c.label, c.value, c.cls)))
+  }
+
+  function renderCostTab(tab, metrics) {
+    const container = $('#cost-content')
+    switch (tab) {
+      case 'overview': renderOverview(container, metrics); break
+      case 'models': renderModelComparison(container, metrics); break
+      case 'optimization': renderOptimization(container, metrics); break
+    }
+  }
+
+  // ── Overview ───────────────────────────────────────────────────────
+
+  function renderOverview(container, metrics) {
+    const cmd = metrics?.commandRuns
+
+    container.replaceChildren(
+      el('div', { className: 'grid-2 mb-24' }, [
+        chartContainer(t('costs.tokenUsage'), 'cost-token-chart'),
+        chartContainer(t('costs.compressionEfficiency'), 'cost-gauge'),
+      ]),
+      el('div', { className: 'grid-2' }, [
+        chartContainer(t('costs.tokenWaterfall'), 'cost-waterfall'),
+        panel(t('costs.costBreakdownByModel'), 'cost-model-table'),
+      ])
+    )
+
+    renderTokenChart(metrics)
+    renderEfficiencyGauge(metrics)
+    renderWaterfall(metrics)
+    renderModelTable(metrics)
+  }
+
+  function renderTokenChart(metrics) {
+    const el = $('#cost-token-chart')
+    const cmd = metrics?.commandRuns
+    if (!cmd || cmd.total === 0) {
+      el.replaceChildren(emptyState(t('costs.noTokenData')))
+      return
+    }
+
+    const chart = echarts.init(el, getTheme() === 'dark' ? 'dark' : null)
+    registerChart(chart)
+
+    chart.setOption({
+      tooltip: { trigger: 'axis', formatter: (p) => p.map(s => `${s.seriesName}: ${formatNumber(s.value)}`).join('<br/>') },
+      legend: { textStyle: { color: '#a1a1a1' }, bottom: 0 },
+      grid: { left: 80, right: 20, top: 20, bottom: 40 },
+      xAxis: {
+        type: 'category',
+        data: [t('costs.rawEst'), t('costs.afterCompression'), t('costs.saved')],
+        axisLabel: { color: '#a1a1a1' },
+      },
+      yAxis: {
+        type: 'value',
+        axisLabel: { color: '#a1a1a1', formatter: (v) => formatNumber(v) },
+        splitLine: { lineStyle: { color: '#2a2a2a' } },
+      },
+      series: [{
+        name: t('costs.tokens'),
+        type: 'bar', barWidth: 50,
+        data: [
+          { value: cmd.rawEstimatedTokens, itemStyle: { color: '#5588ff', borderRadius: [4, 4, 0, 0] } },
+          { value: cmd.compressedEstimatedTokens, itemStyle: { color: '#ffaa00', borderRadius: [4, 4, 0, 0] } },
+          { value: cmd.savedEstimatedTokens, itemStyle: { color: '#00dc82', borderRadius: [4, 4, 0, 0] } },
+        ],
+        label: {
+          show: true, position: 'top',
+          formatter: (p) => formatNumber(p.value),
+          color: '#a1a1a1', fontSize: 11,
+        },
+      }],
+    })
+  }
+
+  function renderEfficiencyGauge(metrics) {
+    const el = $('#cost-gauge')
+    const cmd = metrics?.commandRuns
+    if (!cmd || cmd.rawEstimatedTokens === 0) {
+      el.replaceChildren(emptyState(t('common.noData')))
+      return
+    }
+
+    const efficiency = (cmd.savedEstimatedTokens / cmd.rawEstimatedTokens) * 100
+    const chart = echarts.init(el, getTheme() === 'dark' ? 'dark' : null)
+    registerChart(chart)
+
+    chart.setOption({
+      series: [{
+        type: 'gauge',
+        startAngle: 200, endAngle: -20,
+        min: 0, max: 100,
+        progress: { show: true, width: 18, itemStyle: { color: '#00dc82' } },
+        axisLine: { lineStyle: { width: 18, color: [[1, '#2a2a2a']] } },
+        axisTick: { show: false },
+        splitLine: { show: false },
+        axisLabel: { show: false },
+        pointer: { show: false },
+        title: { show: true, offsetCenter: [0, '30%'], color: '#a1a1a1', fontSize: 13 },
+        detail: {
+          valueAnimation: true, fontSize: 32, fontWeight: 'bold',
+          color: '#00dc82', offsetCenter: [0, '-10%'],
+          formatter: '{value}%',
+        },
+        data: [{ value: efficiency.toFixed(1), name: t('costs.compressionEfficiency') }],
+      }],
+    })
+  }
+
+  function renderWaterfall(metrics) {
+    const el = $('#cost-waterfall')
+    const cmd = metrics?.commandRuns
+    const model = metrics?.modelUsage
+    if (!cmd || !model) {
+      el.replaceChildren(emptyState(t('common.noData')))
+      return
+    }
+
+    const chart = echarts.init(el, getTheme() === 'dark' ? 'dark' : null)
+    registerChart(chart)
+
+    const inputTokens = model.totalInputTokens ?? 0
+    const outputTokens = model.totalOutputTokens ?? 0
+
+    chart.setOption({
+      tooltip: { trigger: 'axis' },
+      grid: { left: 80, right: 20, top: 20, bottom: 30 },
+      xAxis: {
+        type: 'category',
+        data: [t('costs.input'), t('costs.output'), t('costs.total'), t('costs.compressed'), t('costs.saved')],
+        axisLabel: { color: '#a1a1a1' },
+      },
+      yAxis: {
+        type: 'value',
+        axisLabel: { color: '#a1a1a1', formatter: (v) => formatNumber(v) },
+        splitLine: { lineStyle: { color: '#2a2a2a' } },
+      },
+      series: [{
+        type: 'bar', barWidth: 40,
+        data: [
+          { value: inputTokens, itemStyle: { color: '#5588ff', borderRadius: [4, 4, 0, 0] } },
+          { value: outputTokens, itemStyle: { color: '#aa88ff', borderRadius: [4, 4, 0, 0] } },
+          { value: inputTokens + outputTokens, itemStyle: { color: '#888', borderRadius: [4, 4, 0, 0] } },
+          { value: cmd.compressedEstimatedTokens, itemStyle: { color: '#ffaa00', borderRadius: [4, 4, 0, 0] } },
+          { value: cmd.savedEstimatedTokens, itemStyle: { color: '#00dc82', borderRadius: [4, 4, 0, 0] } },
+        ],
+        label: { show: true, position: 'top', formatter: (p) => formatNumber(p.value), color: '#a1a1a1', fontSize: 10 },
+      }],
+    })
+  }
+
+  function renderModelTable(metrics) {
+    const container = $('#cost-model-table')
+    const model = metrics?.modelUsage
+    if (!model?.models?.length) {
+      renderText(container, t('costs.noModelUsage'))
+      return
+    }
+
+    const rows = model.models.map(m => {
+      const cost = estimateModelCost(m.model, m.inputTokens, m.outputTokens)
+      return el('tr', {}, [
+        el('td', { text: m.model, style: { fontWeight: '500' } }),
+        el('td', { text: formatNumber(m.inputTokens) }),
+        el('td', { text: formatNumber(m.outputTokens) }),
+        el('td', { text: m.requestCount }),
+        el('td', { text: '$' + cost.toFixed(2), style: { color: '#00dc82' } }),
+      ])
+    })
+    container.replaceChildren(dataTable([
+      t('costs.model'),
+      t('costs.inputTokens'),
+      t('costs.outputTokens'),
+      t('costs.requests'),
+      t('costs.estCost'),
+    ], rows))
+  }
+
+  // ── Model Comparison ───────────────────────────────────────────────
+
+  function renderModelComparison(container, metrics) {
+    const model = metrics?.modelUsage
+    if (!model?.models?.length) {
+      container.replaceChildren(emptyState(t('costs.noModelData')))
+      return
+    }
+
+    container.replaceChildren(
+      el('div', { className: 'grid-2 mb-24' }, [
+        chartContainer(t('costs.modelUsageRadar'), 'cost-radar'),
+        chartContainer(t('costs.tokenDistByModel'), 'cost-model-pie'),
+      ]),
+      chartContainer(t('costs.costPerRequest'), 'cost-per-req')
+    )
+
+    // Radar
+    const radarEl = $('#cost-radar')
+    if (radarEl) {
+      const chart = echarts.init(radarEl, getTheme() === 'dark' ? 'dark' : null)
+      registerChart(chart)
+      const models = model.models.slice(0, 5)
+      const maxInput = Math.max(...models.map(m => m.inputTokens), 1)
+      const maxOutput = Math.max(...models.map(m => m.outputTokens), 1)
+      const maxReqs = Math.max(...models.map(m => m.requestCount), 1)
+
+      chart.setOption({
+        tooltip: {},
+        legend: { data: models.map(m => m.model), textStyle: { color: '#a1a1a1', fontSize: 10 }, bottom: 0 },
+        radar: {
+          indicator: [
+            { name: t('costs.inputTokens'), max: maxInput },
+            { name: t('costs.outputTokens'), max: maxOutput },
+            { name: t('costs.requests'), max: maxReqs },
+            { name: t('costs.estCost'), max: Math.max(...models.map(m => estimateModelCost(m.model, m.inputTokens, m.outputTokens)), 0.01) },
+          ],
+          axisName: { color: '#a1a1a1', fontSize: 10 },
+        },
+        series: [{
+          type: 'radar',
+          data: models.map((m, i) => ({
+            name: m.model,
+            value: [
+              m.inputTokens, m.outputTokens, m.requestCount,
+              estimateModelCost(m.model, m.inputTokens, m.outputTokens),
+            ],
+            areaStyle: { opacity: 0.1 },
+          })),
+        }],
+      })
+    }
+
+    // Pie
+    const pieEl = $('#cost-model-pie')
+    if (pieEl) {
+      const chart = echarts.init(pieEl, getTheme() === 'dark' ? 'dark' : null)
+      registerChart(chart)
+      chart.setOption({
+        tooltip: { trigger: 'item' },
+        series: [{
+          type: 'pie', radius: ['35%', '65%'],
+          label: { color: '#a1a1a1', formatter: '{b}\n{d}%' },
+          data: model.models.map(m => ({
+            name: m.model,
+            value: m.inputTokens + m.outputTokens,
+          })),
+        }],
+      })
+    }
+
+    // Cost per request
+    const cprEl = $('#cost-per-req')
+    if (cprEl) {
+      const chart = echarts.init(cprEl, getTheme() === 'dark' ? 'dark' : null)
+      registerChart(chart)
+      const modelsWithCost = model.models.map(m => ({
+        name: m.model,
+        cost: m.requestCount > 0 ? estimateModelCost(m.model, m.inputTokens, m.outputTokens) / m.requestCount : 0,
+      })).sort((a, b) => b.cost - a.cost)
+
+      chart.setOption({
+        tooltip: { trigger: 'axis' },
+        grid: { left: 150, right: 40, top: 10, bottom: 30 },
+        xAxis: { type: 'value', axisLabel: { color: '#a1a1a1', formatter: (v) => '$' + v.toFixed(3) }, splitLine: { lineStyle: { color: '#2a2a2a' } } },
+        yAxis: { type: 'category', data: modelsWithCost.map(m => m.name), axisLabel: { color: '#a1a1a1', fontSize: 11 } },
+        series: [{
+          type: 'bar',
+          data: modelsWithCost.map(m => ({
+            value: m.cost,
+            itemStyle: { color: '#5588ff', borderRadius: [0, 4, 4, 0] },
+          })),
+          barWidth: 20,
+          label: { show: true, position: 'right', formatter: (p) => '$' + p.value.toFixed(4), color: '#a1a1a1', fontSize: 10 },
+        }],
+      })
+    }
+  }
+
+  // ── Optimization ───────────────────────────────────────────────────
+
+  function renderOptimization(container, metrics) {
+    const tips = generateOptimizationTips(metrics)
+    const score = getOptimizationScore(metrics)
+    const recommendationsTitle = el('div', { className: 'panel-title' }, [
+      document.createTextNode(t('costs.recommendations') + ' '),
+      el('span', { className: 'count', text: `(${tips.length})` }),
+    ])
+    const recommendationBody = tips.length === 0
+      ? el('div', { className: 'text-muted text-sm', text: t('costs.noOptTips') })
+      : el('div', { style: { display: 'flex', flexDirection: 'column', gap: '12px' } }, tips.map(tip => {
+        const details = [
+          el('div', { text: tip.title, style: { fontSize: '14px', fontWeight: '500', marginBottom: '4px' } }),
+          el('div', { text: tip.description, style: { fontSize: '13px', color: 'var(--text-1)' } }),
+        ]
+        if (tip.impact) {
+          details.push(el('div', {
+            text: t('costs.potentialSavings', { impact: tip.impact }),
+            style: { fontSize: '12px', color: 'var(--accent)', marginTop: '4px' },
+          }))
+        }
+        return el('div', {
+          style: {
+            display: 'flex',
+            gap: '12px',
+            padding: '12px',
+            background: 'var(--bg-2)',
+            borderRadius: 'var(--radius)',
+            borderLeft: `3px solid ${tip.color}`,
+          },
+        }, [
+          el('div', { text: tip.icon, style: { fontSize: '16px', flexShrink: '0' } }),
+          el('div', {}, details),
+        ])
+      }))
+
+    container.replaceChildren(
+      el('div', { className: 'panel mb-24' }, [
+        el('div', { className: 'panel-title', text: t('costs.optimizationScore') }),
+        el('div', { style: { display: 'flex', alignItems: 'center', gap: '24px', padding: '12px 0' } }, [
+          el('div', { text: score, style: { fontSize: '48px', fontWeight: '700', color: getScoreColor(score) } }),
+          el('div', {}, [
+            el('div', { text: getScoreLabel(score), style: { fontSize: '14px', color: 'var(--text-1)', marginBottom: '4px' } }),
+          ]),
+        ]),
+      ]),
+      el('div', { className: 'panel' }, [
+        recommendationsTitle,
+        recommendationBody,
+      ])
+    )
+  }
+
+  function generateOptimizationTips(metrics) {
+    const tips = []
+    const cmd = metrics?.commandRuns
+    const model = metrics?.modelUsage
+
+    if (!cmd || !model) return tips
+
+    const efficiency = cmd.rawEstimatedTokens > 0 ? cmd.savedEstimatedTokens / cmd.rawEstimatedTokens : 0
+
+    // Compression tips
+    if (efficiency < 0.3) {
+      tips.push({
+        icon: '\uD83D\uDCE6',
+        title: t('costs.tipLowCompression'),
+        description: t('costs.tipLowCompressionDesc'),
+        color: '#ff4444',
+        impact: t('costs.tipLowCompressionImpact'),
+      })
+    }
+
+    // Model selection tips
+    for (const m of model.models ?? []) {
+      if (m.model.includes('opus') && m.requestCount > 10) {
+        tips.push({
+          icon: '\uD83D\uDCB0',
+          title: t('costs.tipDowngrade', { model: m.model }),
+          description: t('costs.tipDowngradeDesc', { count: m.requestCount }),
+          color: '#ffaa00',
+          impact: t('costs.tipDowngradeImpact', { cost: (estimateModelCost(m.model, m.inputTokens, m.outputTokens) * 0.7).toFixed(2) }),
+        })
+      }
+    }
+
+    // Failed commands
+    if (cmd.failed > 0 && cmd.total > 0) {
+      const failRate = cmd.failed / cmd.total
+      if (failRate > 0.1) {
+        tips.push({
+          icon: '\u26A0',
+          title: t('costs.tipHighFailRate'),
+          description: t('costs.tipHighFailRateDesc', { rate: (failRate * 100).toFixed(0) }),
+          color: '#ff4444',
+          impact: t('costs.tipHighFailRateImpact', { count: formatNumber(cmd.failed * 1000) }),
+        })
+      }
+    }
+
+    // Large output tokens
+    if (model.totalOutputTokens > model.totalInputTokens * 2) {
+      tips.push({
+        icon: '\uD83D\uDCDD',
+        title: t('costs.tipHighOutputRatio'),
+        description: t('costs.tipHighOutputRatioDesc'),
+        color: '#5588ff',
+        impact: t('costs.tipHighOutputRatioImpact'),
+      })
+    }
+
+    // General tips
+    if (tips.length === 0) {
+      tips.push({
+        icon: '\u2713',
+        title: t('costs.tipLookingGood'),
+        description: t('costs.tipLookingGoodDesc'),
+        color: '#00dc82',
+      })
+    }
+
+    return tips
+  }
+
+  function getOptimizationScore(metrics) {
+    const cmd = metrics?.commandRuns
+    if (!cmd || cmd.rawEstimatedTokens === 0) return 0
+
+    let score = 0
+    const efficiency = cmd.savedEstimatedTokens / cmd.rawEstimatedTokens
+    score += Math.min(efficiency * 40, 40) // max 40 points for compression
+
+    const passRate = cmd.total > 0 ? cmd.passed / cmd.total : 0
+    score += passRate * 30 // max 30 points for pass rate
+
+    const model = metrics?.modelUsage
+    if (model?.models?.length) {
+      const hasCheapModels = model.models.some(m => m.model.includes('haiku') || m.model.includes('mini'))
+      if (hasCheapModels) score += 15 // bonus for using cheap models
+    }
+
+    score += 15 // base score for having metrics
+    return Math.min(Math.round(score), 100)
+  }
+
+  function getScoreColor(score) {
+    if (score >= 80) return '#00dc82'
+    if (score >= 50) return '#ffaa00'
+    return '#ff4444'
+  }
+
+  function getScoreLabel(score) {
+    if (score >= 80) return t('costs.scoreExcellent')
+    if (score >= 60) return t('costs.scoreGood')
+    if (score >= 40) return t('costs.scoreFair')
+    return t('costs.scoreNeedsAttention')
+  }
+
+  // ── Cost Estimation ────────────────────────────────────────────────
+
+  function estimateCost(model) {
+    if (!model?.models?.length) return 0
+    let total = 0
+    for (const m of model.models) {
+      total += estimateModelCost(m.model, m.inputTokens, m.outputTokens)
+    }
+    return total
+  }
+
+  function estimateModelCost(modelName, inputTokens, outputTokens) {
+    const pricing = Object.entries(MODEL_PRICING).find(([k]) => modelName.toLowerCase().includes(k))?.[1]
+      ?? MODEL_PRICING.default
+    return (inputTokens / 1e6 * pricing.input) + (outputTokens / 1e6 * pricing.output)
+  }
+
+  window.DashboardPages = window.DashboardPages || {}
+  window.DashboardPages.costs = renderCosts
+})()