opencode-tokenwatch 0.2.0 → 0.3.1

package/dist/generate-usage-html.js

@@ -33,12 +33,20 @@ function renderKpiCards(data) {
     const s = data.summary;
     const hitRate = cacheHitRate(s.inputTokens, s.cacheRead);
     const hitRatePct = fmtPercent(hitRate);
-    const avgTpsRaw = s.requestCount > 0 && data.perfSummary.length > 0
-        ? data.perfSummary.reduce((sum, p) => sum + (p.avgTPS ?? 0) * p.requestCount, 0) /
-            data.perfSummary.reduce((sum, p) => sum + p.requestCount, 0)
-        : 0;
-    const avgTps = avgTpsRaw ? avgTpsRaw.toFixed(1) : "—";
+    let tpsSum = 0, tpsReqs = 0;
+    for (const p of data.perfSummary) {
+        if (p.avgTPS != null && p.avgTPS > 0) {
+            tpsSum += p.avgTPS * p.requestCount;
+            tpsReqs += p.requestCount;
+        }
+    }
+    const avgTpsRaw = tpsReqs > 0 ? tpsSum / tpsReqs : 0;
+    const avgTps = tpsReqs > 0 ? avgTpsRaw.toFixed(1) : '—';
     const isHighCache = hitRate >= 0.5;
+    const errors = data.errors;
+    const errorRatePct = errors ? (errors.errorRate * 100).toFixed(1) + '%' : '—';
+    const errorColor = errors && errors.errorRate >= 0.05 ? 'var(--output)'
+        : errors && errors.errorRate > 0 ? 'var(--tps)' : 'var(--cache)';
     return `
     <div class="kpi-row">
       <div class="kpi-card">
@@ -61,6 +69,10 @@ function renderKpiCards(data) {
         <div class="kpi-label">Total Cost</div>
         <div class="kpi-value" style="color:var(--tps)">${fmtCost(s.totalCost)}</div>
       </div>
+      <div class="kpi-card">
+        <div class="kpi-label">Error Rate</div>
+        <div class="kpi-value" style="color:${errorColor}">${errorRatePct}</div>
+      </div>
     </div>`;
 }
 function renderModelChartInit(data) {
@@ -189,18 +201,16 @@ function renderModelChart(chart) {
       },
       {
         name: 'TPS',
-        type: 'line',
+        type: 'scatter',
         yAxisIndex: 1,
         data: modelTps,
-        smooth: true,
-        symbol: 'circle',
-        symbolSize: 6,
-        lineStyle: { color: '#FFB800', width: 2 },
+        symbol: 'diamond',
+        symbolSize: function(val) { return val != null && val > 0 ? 13 : 0; },
         itemStyle: { color: '#FFB800' },
         label: {
           show: true,
           position: 'right',
-          formatter: function(p) { return p.value != null ? p.value.toFixed(1) : ''; },
+          formatter: function(p) { return p.value != null && p.value > 0 ? p.value.toFixed(1) : ''; },
           color: '#FFB800', fontSize: 10
         }
       }
@@ -213,84 +223,112 @@ function renderModelChart(chart) {
 function renderScatterChartInit(data) {
     if (data.perfSummary.length === 0)
         return "";
-    const providerColors = {
-        opencode: "#00F593", deepseek: "#00D1FF", nvidia: "#B545FF", modelscope: "#FFB800",
-    };
-    const scatterData = data.perfSummary.map(p => {
-        const costPer1K = p.totalInput + p.totalOutput > 0
-            ? (p.totalCost / (p.totalInput + p.totalOutput)) * 1000
-            : 0;
-        return {
-            name: p.model,
-            provider: p.providerID,
-            tps: p.avgTPS,
-            value: [p.avgTTFT != null && p.avgTTFT > 0 ? p.avgTTFT : 0.01, costPer1K, p.requestCount]
-        };
+    // 按 TPS 降序排列（null TPS 放末尾），让最快的模型显示在最上方
+    const sorted = [...data.perfSummary].sort((a, b) => {
+        if (a.avgTPS == null && b.avgTPS == null)
+            return 0;
+        if (a.avgTPS == null)
+            return 1;
+        if (b.avgTPS == null)
+            return -1;
+        return b.avgTPS - a.avgTPS;
     });
+    const names = sorted.map(p => p.model);
+    const tpsValues = sorted.map(p => p.avgTPS ?? 0);
+    const ttftValues = sorted.map(p => p.avgTTFT ?? 0);
+    const costValues = sorted.map(p => {
+        const billable = p.totalInput + p.totalOutput + p.totalCacheRead + p.totalCacheWrite;
+        return billable > 0 ? (p.totalCost / billable) * 1000 : 0;
+    });
+    const hitRates = sorted.map(p => p.cacheHitRate ?? 0);
+    const reqCounts = sorted.map(p => p.requestCount);
     return `
-var scatterData = ${JSON.stringify(scatterData)};
-var providerColors = ${JSON.stringify(providerColors)};
+var effNames = ${JSON.stringify(names)};
+var effTps   = ${JSON.stringify(tpsValues)};
+var effTtft  = ${JSON.stringify(ttftValues)};
+var effCost  = ${JSON.stringify(costValues)};
+var effHit   = ${JSON.stringify(hitRates)};
+var effReq   = ${JSON.stringify(reqCounts)};
 
 function initScatterChart() {
   var el = document.getElementById('scatter-chart');
   if (!el) return;
   var chart = echarts.init(el);
   window.scatterChart = chart;
+
+  // TPS 越高越绿，越低越紫，无数据为灰
+  var maxTps = Math.max.apply(null, effTps.filter(function(v){ return v > 0; })) || 1;
+  var barColors = effTps.map(function(v) {
+    if (v <= 0) return '#444455';
+    var r = v / maxTps;
+    if (r >= 0.8) return '#00F593';
+    if (r >= 0.5) return '#FFB800';
+    return '#B545FF';
+  });
+
   var option = {
     tooltip: {
+      trigger: 'axis',
+      axisPointer: { type: 'none' },
       formatter: function(params) {
-        var d = params.data;
-        return '<b>' + params.name + '</b><br/>' +
-          'Provider: ' + (d.provider || '\u2014') + '<br/>' +
-          'TTFT: ' + (d.value[0] != null ? d.value[0].toFixed(1) + 'ms' : '\u2014') + '<br/>' +
-          'TPS: ' + (d.tps != null ? d.tps.toFixed(1) : '\u2014') + '<br/>' +
-          'Cost/1K: $' + d.value[1].toFixed(4) + '<br/>' +
-          'Requests: ' + d.value[2];
+        var i = params[0].dataIndex;
+        var tps  = effTps[i]  > 0 ? effTps[i].toFixed(1)  + ' tok/s' : '\u2014';
+        var ttft = effTtft[i] > 0 ? effTtft[i].toFixed(0) + ' ms'    : '\u2014';
+        var cost = effCost[i] > 0 ? '$' + effCost[i].toFixed(4) + '/1K' : '\u2014';
+        var hit  = effHit[i]  > 0 ? effHit[i].toFixed(1)  + '%'     : '\u2014';
+        return '<b>' + effNames[i] + '</b><br/>' +
+          '\u25B6 TPS: '        + tps  + '<br/>' +
+          '\u23F1 TTFT: '       + ttft + '<br/>' +
+          '\uD83D\uDCB0 Cost/1K: ' + cost + '<br/>' +
+          '\uD83D\uDCBE Cache Hit: ' + hit + '<br/>' +
+          'Requests: ' + effReq[i];
       }
     },
-    grid: { left: 80, right: 40, bottom: 60, top: 30 },
+    grid: { left: 20, right: 280, bottom: 30, top: 20, containLabel: true },
     xAxis: {
-      type: 'log',
-      name: 'TTFT (ms)',
-      min: 0.01,
-      nameTextStyle: { color: '#B0B0C0' },
-      axisLabel: { color: '#B0B0C0' },
+      type: 'value',
+      name: 'Avg TPS  (tokens / sec)',
+      nameTextStyle: { color: '#B0B0C0', fontSize: 11 },
+      axisLabel: { color: '#B0B0C0', formatter: function(v) { return v > 0 ? v.toFixed(0) : '0'; } },
       splitLine: { lineStyle: { color: '#2A2A35', type: 'dashed' } }
     },
     yAxis: {
-      type: 'value',
-      name: 'Cost per 1K tokens',
-      nameTextStyle: { color: '#B0B0C0' },
-      axisLabel: { color: '#B0B0C0', formatter: function(v) { return '$' + v.toFixed(4); } },
-      splitLine: { lineStyle: { color: '#2A2A35', type: 'dashed' } }
+      type: 'category',
+      data: effNames,
+      inverse: true,
+      axisLabel: {
+        color: '#E0E0F0',
+        fontSize: 11,
+        formatter: function(v) { return v.length > 50 ? v.slice(0, 48) + '\u2026' : v; }
+      },
+      axisLine: { show: false },
+      axisTick: { show: false }
     },
     series: [{
-      type: 'scatter',
-      data: scatterData.map(function(d) {
-        return {
-          value: d.value,
-          name: d.name,
-          provider: d.provider,
-          tps: d.tps,
-          itemStyle: { color: providerColors[d.provider] || '#B545FF' }
-        };
+      type: 'bar',
+      data: effTps.map(function(v, i) {
+        return { value: v > 0 ? v : 0.001, itemStyle: { color: barColors[i], borderRadius: [0, 4, 4, 0] } };
       }),
-      symbolSize: function(val) {
-        return Math.max(8, Math.min(40, Math.sqrt(val[2]) * 3));
-      },
-      itemStyle: { opacity: 0.8 },
+      barMaxWidth: 22,
       label: {
         show: true,
-        formatter: function(p) { return p.name; },
         position: 'right',
-        color: '#B0B0C0',
-        fontSize: 10
+        color: '#E0E0F0',
+        fontSize: 10,
+        formatter: function(p) {
+          var i = p.dataIndex;
+          var parts = [effTps[i] > 0 ? effTps[i].toFixed(1) + ' t/s' : '\u2014'];
+          if (effTtft[i] > 0) parts.push('TTFT ' + effTtft[i].toFixed(0) + 'ms');
+          if (effCost[i] > 0) parts.push('\u0024' + effCost[i].toFixed(4) + '/1K');
+          return parts.join('   ');
+        }
       }
     }]
   };
   chart.setOption(option);
   chart.resize();
-}`;
+}
+`;
 }
 function providerBorderColor(provider) {
     const colors = { opencode: "#00F593", deepseek: "#00D1FF", nvidia: "#B545FF", modelscope: "#FFB800", };
@@ -300,14 +338,22 @@ function renderProviderCards(data) {
     return data.providers.map(p => {
         const modelCount = data.models.filter(m => m.provider === p.provider).length;
         const perfItems = data.perfSummary.filter(ps => ps.providerID === p.provider);
-        const avgTtft = perfItems.length > 0
-            ? perfItems.reduce((s, x) => s + (x.avgTTFT ?? 0) * x.requestCount, 0) /
-                perfItems.reduce((s, x) => s + x.requestCount, 0)
-            : null;
-        const avgTps = perfItems.length > 0
-            ? perfItems.reduce((s, x) => s + (x.avgTPS ?? 0) * x.requestCount, 0) /
-                perfItems.reduce((s, x) => s + x.requestCount, 0)
-            : null;
+        let ttftSum = 0, ttftReqs = 0;
+        for (const x of perfItems) {
+            if (x.avgTTFT != null && x.avgTTFT > 0) {
+                ttftSum += x.avgTTFT * x.requestCount;
+                ttftReqs += x.requestCount;
+            }
+        }
+        const avgTtft = ttftReqs > 0 ? ttftSum / ttftReqs : null;
+        let tpsSum = 0, tpsReqs = 0;
+        for (const x of perfItems) {
+            if (x.avgTPS != null && x.avgTPS > 0) {
+                tpsSum += x.avgTPS * x.requestCount;
+                tpsReqs += x.requestCount;
+            }
+        }
+        const avgTps = tpsReqs > 0 ? tpsSum / tpsReqs : null;
         return `
     <div class="provider-card" style="border-color:${providerBorderColor(p.provider)}">
       <div class="provider-name">${p.provider}</div>
@@ -326,6 +372,7 @@ function renderDataTable(data) {
         const hitColor = hitRate >= 0.85 ? 'var(--cache)' : hitRate >= 0.70 ? 'var(--tps)' : 'var(--output)';
         const perf = data.perfSummary.find(p => p.model === `${m.provider}/${m.model}`);
         const ttft = perf?.avgTTFT != null ? perf.avgTTFT.toFixed(0) + 'ms' : '—';
+        const p95ttft = perf?.p95TTFT != null ? perf.p95TTFT.toFixed(0) + 'ms' : '—';
         const tps = perf?.avgTPS != null ? perf.avgTPS.toFixed(1) : '—';
         return `<tr>
       <td>${m.model}</td>
@@ -337,6 +384,7 @@ function renderDataTable(data) {
       <td>${fmtTokens(m.cacheRead)}</td>
       <td style="color:${hitColor};font-weight:600">${hitRatePct}</td>
       <td>${ttft}</td>
+      <td style="color:var(--tps);font-size:0.85em">${p95ttft}</td>
       <td>${tps}</td>
       <td>${fmtCost(m.totalCost)}</td>
     </tr>`;
@@ -352,7 +400,8 @@ function renderDataTable(data) {
         <th>Output</th>
         <th>Cache</th>
         <th>Hit Rate</th>
-        <th>TTFT</th>
+        <th>Avg TTFT</th>
+        <th>P95 TTFT</th>
         <th>TPS</th>
         <th>Cost</th>
       </tr>
@@ -360,6 +409,90 @@ function renderDataTable(data) {
     <tbody>${rows}</tbody>
   </table>`;
 }
+/** 渲染 P50/P95/P99 延迟分位数表格 */
+function renderPerfPercentileTable(data) {
+    if (data.perfSummary.length === 0)
+        return '';
+    const fmtMs = (v) => v != null ? v.toFixed(0) + 'ms' : '—';
+    const rows = data.perfSummary.map(p => {
+        const hitColor = p.cacheHitRate != null && p.cacheHitRate >= 85 ? 'var(--cache)'
+            : p.cacheHitRate != null && p.cacheHitRate >= 70 ? 'var(--tps)' : 'var(--output)';
+        return `<tr>
+      <td>${p.model}</td>
+      <td>${p.requestCount}</td>
+      <td>${fmtMs(p.avgTTFT)}</td>
+      <td>${fmtMs(p.p50TTFT)}</td>
+      <td>${fmtMs(p.p95TTFT)}</td>
+      <td>${fmtMs(p.p99TTFT)}</td>
+      <td>${fmtMs(p.avgLatency)}</td>
+      <td>${fmtMs(p.p50Latency)}</td>
+      <td>${fmtMs(p.p95Latency)}</td>
+      <td>${fmtMs(p.p99Latency)}</td>
+      <td style="color:${hitColor};font-weight:600">${p.cacheHitRate != null ? p.cacheHitRate.toFixed(1) + '%' : '—'}</td>
+    </tr>`;
+    }).join("\n");
+    return `
+  <section class="section">
+    <h2 class="section-title">Performance Latency Percentiles</h2>
+    <table class="data-table">
+      <thead>
+        <tr>
+          <th>Model</th>
+          <th>Req</th>
+          <th>Avg TTFT</th>
+          <th>P50 TTFT</th>
+          <th>P95 TTFT</th>
+          <th>P99 TTFT</th>
+          <th>Avg E2E</th>
+          <th>P50 E2E</th>
+          <th>P95 E2E</th>
+          <th>P99 E2E</th>
+          <th>Cache Hit</th>
+        </tr>
+      </thead>
+      <tbody>${rows}</tbody>
+    </table>
+  </section>`;
+}
+/** 渲染失败请求统计区域 */
+function renderErrorStatsSection(data) {
+    const errors = data.errors;
+    if (!errors || errors.failedCount === 0)
+        return '';
+    const errorRatePct = (errors.errorRate * 100).toFixed(2) + '%';
+    const rateColor = errors.errorRate >= 0.05 ? 'var(--output)'
+        : errors.errorRate > 0 ? 'var(--tps)' : 'var(--cache)';
+    const rows = errors.byModel
+        .filter(m => m.failed > 0)
+        .map(m => {
+        const modelRate = m.total > 0 ? (m.failed / m.total * 100).toFixed(1) + '%' : '—';
+        return `<tr>
+        <td>${m.provider}</td>
+        <td>${m.model}</td>
+        <td>${m.total}</td>
+        <td style="color:var(--output)">${m.failed}</td>
+        <td style="color:var(--tps)">${m.total - m.failed}</td>
+        <td style="color:${errors.errorRate >= 0.05 ? 'var(--output)' : 'var(--tps)'}">${modelRate}</td>
+      </tr>`;
+    }).join('\n');
+    return `
+  <section class="section">
+    <h2 class="section-title">Failed Requests
+      <span style="margin-left:12px;font-size:0.85em;color:${rateColor}">
+        overall error rate: ${errorRatePct} (${errors.failedCount} failed / ${errors.successCount + errors.failedCount} total)
+      </span>
+    </h2>
+    <table class="data-table">
+      <thead>
+        <tr>
+          <th>Provider</th><th>Model</th><th>Total</th>
+          <th>Failed</th><th>Success</th><th>Error Rate</th>
+        </tr>
+      </thead>
+      <tbody>${rows}</tbody>
+    </table>
+  </section>`;
+}
 function renderDailyTrendInit(data) {
     const days = data.daily.slice().reverse().map(d => d.day);
     const tokens = data.daily.slice().reverse().map(d => d.totalTokens);
@@ -511,6 +644,8 @@ export function generateUsageHtml(data) {
     const scatterChartJs = renderScatterChartInit(data);
     const providerStr = renderProviderCards(data);
     const tableStr = renderDataTable(data);
+    const perfPercentileStr = renderPerfPercentileTable(data);
+    const errorStatsStr = renderErrorStatsSection(data);
     const dailyChartJs = renderDailyTrendInit(data);
     const heatmapJs = renderHeatmapInit(data);
     const hasPerf = data.perfSummary.length > 0;
@@ -555,7 +690,7 @@ export function generateUsageHtml(data) {
   .header h1 span { color: var(--input); }
   .header .meta { font-size: 12px; color: var(--text-dim); font-family: 'JetBrains Mono', monospace; }
 
-  .kpi-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 24px; }
+  .kpi-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-bottom: 24px; }
   .kpi-card {
     background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
     padding: 16px; text-align: center;
@@ -656,6 +791,10 @@ export function generateUsageHtml(data) {
     ${tableStr}
   </div>
 
+  ${perfPercentileStr}
+
+  ${errorStatsStr}
+
   <div class="section">
     <div class="section-title">Efficiency vs Cost</div>
     ${hasPerf ? '<div class="chart-box" id="scatter-chart"></div>' : '<div class="empty-state">No performance data available for this period.</div>'}

package/dist/i18n.js

@@ -14,6 +14,7 @@ const zh = {
     trendUp: "↑",
     trendDown: "↓",
     cache: "缓存",
+    lat: "延迟",
     performance: "性能",
     pricing: "Pricing",
     tokenDistribution: "Token分布",
@@ -40,8 +41,6 @@ const zh = {
     toolCall: "Tool调用",
     toolResult: "Tool结果",
     outputTokens: "输出",
-    settings: "Settings",
-    showCache: "显示缓存统计",
     showPerformance: "显示性能指标",
     showPricing: "显示模型定价",
     showTokenDistribution: "显示Token分布",
@@ -88,6 +87,7 @@ const en = {
     trendUp: "↑",
     trendDown: "↓",
     cache: "Cache",
+    lat: "Lat",
     performance: "Performance",
     pricing: "Pricing",
     tokenDistribution: "Token Distribution",
@@ -114,8 +114,6 @@ const en = {
     toolCall: "Tool Call",
     toolResult: "Tool Result",
     outputTokens: "Output",
-    settings: "Settings",
-    showCache: "Show Cache",
     showPerformance: "Show Performance",
     showPricing: "Show Pricing",
     showTokenDistribution: "Show Token Distribution",

package/dist/perf-tracker.d.ts

@@ -41,14 +41,20 @@ interface MessageRemoveEvent {
 declare class PerfTracker {
     private firstPartTimes;
     private statsMap;
+    /** 原始样本串，用于分位数计算，不持久化 */
+    private ttftSamples;
+    private latencySamples;
     handlePartUpdated(event: PartEvent): void;
     handleMessageUpdated(event: MessageUpdateEvent): void;
     private appendLog;
     handleMessageRemoved(event: MessageRemoveEvent): void;
     private updateStats;
+    /** 计算有序数组的指定百分位数（线性插值法） */
+    private percentile;
     getSessionStats(): SessionPerfStats;
     readLogs(last?: number): LogEntry[];
     reset(): void;
+    loadSession(sessionID: string): void;
 }
 export declare function createPerfTracker(): PerfTracker;
 export type { PartEvent, PerfTracker };