opencode-tokenwatch 0.3.1 → 0.4.0

package/README.en.md

@@ -9,14 +9,14 @@ Real-time token usage, cache analytics & performance dashboard plugin for OpenCo
 ## Features
 
 - **Sidebar panel** — Session-level and per-model real-time stats (requests, tokens, cache, cost)
-- **Cache hit rate** — Inline color progress bars with trend indicators (↑/↓) and global weighted hit rate
+- **Cache hit rate** — Per-model tracking with trend indicators (↑/↓) and global weighted total
 - **Performance metrics** — TTFT / TPS / End-to-end latency + P50/P95/P99 latency percentiles
-- **Token distribution** — 5-bucket role breakdown (system / user / toolCall / toolResult / output + other fallback)
-- **Error rate tracking** — Detects failed requests (empty token response) and computes real-time error rate
-- **Cost display** — Per-model cost (requires provider billing data)
+- **Token distribution** — Per-role breakdown (system / user / tool / output)
+- **Cost tracking** — Per-model cost display (requires provider billing data)
+- **Error rate tracking** — Detects failed requests and computes real-time error rate
 - **`/usage` command** — HTML Report → JSON Export → Text Report → Settings
-- **HTML report** — Interactive ECharts dashboard: token distribution, performance percentiles, TPS horizontal ranking, error rate analysis — auto-opened in browser
-- **Persistent stats** — Performance metrics (TPS/TTFT/latency) written to a dedicated JSON file that accumulates forever, unaffected by log rotation
+- **HTML report** — Interactive ECharts dashboard: token trends, performance comparison, TPS ranking, error rate analysis — auto-opened in browser
+- **Persistent stats** — Performance metrics accumulate forever in a dedicated file, unaffected by session resets
 - **Multi-level collapse** — Panel, models, and sub-blocks collapsible with persisted state
 - **Language switching** — Auto-detect or manually switch between Chinese and English
 
@@ -37,32 +37,7 @@ Add to `opencode.json` or `opencode.jsonc`:
 
 ## Configuration
 
-```jsonc
-{
-  "plugin": ["opencode-tokenwatch"],
-  "pluginConfig": {
-    "opencode-tokenwatch": {
-      "sidebar": {
-        "showPerformance": true,
-        "showPricing": true,
-        "showTokenDistribution": true,
-        "showTrend": true
-      },
-      "language": "auto"
-    }
-  }
-}
-```
-
-| Option | Type | Default | Description |
-|--------|------|---------|-------------|
-| `sidebar.showPerformance` | boolean | `true` | Show TTFT/TPS/latency |
-| `sidebar.showPricing` | boolean | `true` | Show request cost |
-| `sidebar.showTokenDistribution` | boolean | `true` | Show token distribution |
-| `sidebar.showTrend` | boolean | `true` | Show trend indicator |
-| `language` | `"auto"` / `"zh"` / `"en"` | `"auto"` | UI language |
-
-Settings can also be toggled via `/usage` → Settings, taking precedence over `pluginConfig`.
+In OpenCode TUI, run `/usage` → **Settings** to interactively toggle display items and switch language. Settings are persisted automatically — no need to edit config files manually.
 
 ## Usage
 
@@ -77,8 +52,8 @@ In OpenCode TUI, run `/usage`:
 
 | File | Path | Description |
 |------|------|-------------|
-| JSONL log | `~/.opencode/tokenwatch.jsonl` | Raw per-request log, auto-rotated at 5 MB |
-| Aggregated stats | `~/.opencode/tokenwatch-stats.json` | Persistent performance stats, accumulates forever |
+| JSONL log | `~/.opencode/tokenwatch.jsonl` | Raw per-request log |
+| Aggregated stats | `~/.opencode/tokenwatch-stats.json` | Persistent performance stats |
 | Report output | `~/.opencode/reports/` | HTML / JSON / Markdown reports |
 
 ## Requirements

package/README.md

@@ -9,14 +9,14 @@ OpenCode CLI 的实时 Token 用量统计、缓存分析与性能指标插件。
 ## 功能
 
 - **侧边栏面板** — 会话级与按模型的实时统计（请求数、Token、缓存、成本）
-- **缓存命中率** — 模型行内彩色进度条，带趋势指示器（↑/↓），全局总计行显示**加权命中率**
-- **性能指标** — TTFT / TPS / 端到端延迟 + P50/P95/P99 延迟分位数
-- **Token 分布** — 5 桶角色分解（system / user / toolCall / toolResult / output + other 兜底）
-- **错误率统计** — 识别并统计失败请求（空 Token 响应），实时计算错误率
-- **成本展示** — 按模型显示 cost（需 provider 返回计费数据）
+- **缓存命中率** — 按模型实时追踪，带趋势指示器（↑/↓）与全局加权总计
+- **性能指标** — TTFT / TPS / 端到端延迟，含 P50/P95/P99 延迟分位数
+- **Token 分布** — 按角色（system / user / tool / output）分解用量占比
+- **成本追踪** — 按模型实时显示请求成本（需 provider 返回计费数据）
+- **错误率统计** — 识别并统计失败请求，实时计算错误率
 - **`/usage` 命令** — HTML 报告 → JSON 导出 → 文本报告 → 设置
-- **HTML 报告** — 交互式 ECharts 仪表盘：Token 分布、性能分位数、TPS 水平排名、错误率分析，自动在浏览器打开
-- **持久化统计** — 性能指标（TPS/TTFT/延迟）写入独立 JSON 文件，永久累积，不受日志轮转影响
+- **HTML 报告** — 交互式 ECharts 仪表盘：Token 趋势、性能对比、TPS 排名、错误率分析，自动在浏览器打开
+- **持久化统计** — 性能指标永久累积写入独立文件，历史数据不受会话重置影响
 - **多级折叠** — 面板、模型、子区块均可折叠，状态持久化
 - **语言切换** — 中英双语，跟随系统或手动切换
 
@@ -37,32 +37,7 @@ npm install opencode-tokenwatch
 
 ## 配置
 
-```jsonc
-{
-  "plugin": ["opencode-tokenwatch"],
-  "pluginConfig": {
-    "opencode-tokenwatch": {
-      "sidebar": {
-        "showPerformance": true,
-        "showPricing": true,
-        "showTokenDistribution": true,
-        "showTrend": true
-      },
-      "language": "auto"
-    }
-  }
-}
-```
-
-| 配置项 | 类型 | 默认值 | 说明 |
-|--------|------|--------|------|
-| `sidebar.showPerformance` | boolean | `true` | 显示 TTFT/TPS/延迟 |
-| `sidebar.showPricing` | boolean | `true` | 显示请求成本 |
-| `sidebar.showTokenDistribution` | boolean | `true` | 显示 Token 分布 |
-| `sidebar.showTrend` | boolean | `true` | 显示趋势指示器 |
-| `language` | `"auto"` / `"zh"` / `"en"` | `"auto"` | 界面语言 |
-
-运行时也可通过 `/usage` → 设置 调整，优先级高于 `pluginConfig`。
+在 OpenCode TUI 中输入 `/usage` → **设置**，可交互式开关各显示项和切换界面语言，配置自动持久化，无需手动编辑配置文件。
 
 ## 用法
 
@@ -77,8 +52,8 @@ npm install opencode-tokenwatch
 
 | 文件 | 路径 | 说明 |
 |------|------|------|
-| JSONL 日志 | `~/.opencode/tokenwatch.jsonl` | 原始请求日志，超 5MB 自动轮转 |
-| 聚合统计 | `~/.opencode/tokenwatch-stats.json` | 持久化性能统计，永久累积 |
+| JSONL 日志 | `~/.opencode/tokenwatch.jsonl` | 原始请求日志 |
+| 聚合统计 | `~/.opencode/tokenwatch-stats.json` | 持久化性能统计 |
 | 报告输出 | `~/.opencode/reports/` | HTML / JSON / Markdown 报告 |
 
 ## 系统要求

package/dist/commands.jsx

@@ -61,6 +61,9 @@ function computePercentile(sortedArr, p) {
 function aggregatePerfStats(logs) {
     const map = new Map();
     for (const entry of logs) {
+        // 过滤掉全零无效条目：token 均为 0 表示请求失败或未完成
+        if (entry.inputTokens + entry.outputTokens + entry.cacheReadTokens + entry.cacheWriteTokens === 0)
+            continue;
         const key = entry.model;
         let s = map.get(key);
         if (!s) {

package/dist/generate-usage-html.js

@@ -23,7 +23,8 @@ function cacheHitRate(input, cacheRead) {
     return cacheRead / (input + cacheRead);
 }
 function sortModelsByUsage(models) {
-    return [...models].sort((a, b) => b.totalTokens - a.totalTokens);
+    // 过滤掉 totalTokens=0 的无效模型条目（如会话失败导致全为 0 的记录）
+    return [...models].filter(m => m.totalTokens > 0).sort((a, b) => b.totalTokens - a.totalTokens);
 }
 function renderMeta(data) {
     const m = data.meta;
@@ -221,10 +222,13 @@ function renderModelChart(chart) {
 }`;
 }
 function renderScatterChartInit(data) {
-    if (data.perfSummary.length === 0)
+    // 过滤掉全零无效条目：无请求或无任何 token 的模型
+    const validPerf = data.perfSummary.filter(p => p.requestCount > 0 &&
+        (p.totalInput + p.totalOutput + p.totalCacheRead + p.totalCacheWrite) > 0);
+    if (validPerf.length === 0)
         return "";
     // 按 TPS 降序排列（null TPS 放末尾），让最快的模型显示在最上方
-    const sorted = [...data.perfSummary].sort((a, b) => {
+    const sorted = [...validPerf].sort((a, b) => {
         if (a.avgTPS == null && b.avgTPS == null)
             return 0;
         if (a.avgTPS == null)
@@ -334,8 +338,12 @@ function providerBorderColor(provider) {
     const colors = { opencode: "#00F593", deepseek: "#00D1FF", nvidia: "#B545FF", modelscope: "#FFB800", };
     return colors[provider] || "#2A2A35";
 }
+/** 渲染 Provider 卡片，按 token 总量降序，最多显示 10 个 */
 function renderProviderCards(data) {
-    return data.providers.map(p => {
+    const sorted = [...data.providers].sort((a, b) => b.totalTokens - a.totalTokens);
+    const top = sorted.slice(0, 10);
+    const remaining = sorted.length - 10;
+    const cards = top.map(p => {
         const modelCount = data.models.filter(m => m.provider === p.provider).length;
         const perfItems = data.perfSummary.filter(ps => ps.providerID === p.provider);
         let ttftSum = 0, ttftReqs = 0;
@@ -364,11 +372,21 @@ function renderProviderCards(data) {
       <div class="provider-stat"><span class="stat-label">Models</span><span>${modelCount}</span></div>
     </div>`;
     }).join("\n");
+    const moreHint = remaining > 0
+        ? `<div class="provider-more">+ ${remaining} more provider${remaining > 1 ? 's' : ''} not shown</div>`
+        : '';
+    return cards + moreHint;
 }
-function renderDataTable(data) {
-    const rows = sortModelsByUsage(data.models).map(m => {
+/**
+ * 渲染 Model Analytics 区块：三个表格合并为 Tab 切换展示，各自带分页控件。
+ * Tab 1: Usage Breakdown  — Token/成本用量分解
+ * Tab 2: Latency Percentiles — TTFT/E2E 分位数
+ * Tab 3: Failed Requests  — 失败请求明细（无数据时不显示此 Tab）
+ */
+function renderModelAnalyticsSection(data) {
+    // ─── Tab 1: Usage Breakdown ───────────────────────────────────────────────
+    const usageRows = sortModelsByUsage(data.models).map(m => {
         const hitRate = cacheHitRate(m.inputTokens, m.cacheRead);
-        const hitRatePct = fmtPercent(hitRate);
         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' : '—';
@@ -382,39 +400,18 @@ function renderDataTable(data) {
       <td>${fmtTokens(m.inputTokens)}</td>
       <td>${fmtTokens(m.outputTokens)}</td>
       <td>${fmtTokens(m.cacheRead)}</td>
-      <td style="color:${hitColor};font-weight:600">${hitRatePct}</td>
+      <td style="color:${hitColor};font-weight:600">${fmtPercent(hitRate)}</td>
       <td>${ttft}</td>
       <td style="color:var(--tps);font-size:0.85em">${p95ttft}</td>
       <td>${tps}</td>
       <td>${fmtCost(m.totalCost)}</td>
     </tr>`;
     }).join("\n");
-    return `<table class="data-table">
-    <thead>
-      <tr>
-        <th>Model</th>
-        <th>Provider</th>
-        <th>Req</th>
-        <th>Total</th>
-        <th>Input</th>
-        <th>Output</th>
-        <th>Cache</th>
-        <th>Hit Rate</th>
-        <th>Avg TTFT</th>
-        <th>P95 TTFT</th>
-        <th>TPS</th>
-        <th>Cost</th>
-      </tr>
-    </thead>
-    <tbody>${rows}</tbody>
-  </table>`;
-}
-/** 渲染 P50/P95/P99 延迟分位数表格 */
-function renderPerfPercentileTable(data) {
-    if (data.perfSummary.length === 0)
-        return '';
+    // ─── Tab 2: Latency Percentiles ───────────────────────────────────────────
+    const validPerf = data.perfSummary.filter(p => p.requestCount > 0 &&
+        (p.totalInput + p.totalOutput + p.totalCacheRead + p.totalCacheWrite) > 0);
     const fmtMs = (v) => v != null ? v.toFixed(0) + 'ms' : '—';
-    const rows = data.perfSummary.map(p => {
+    const perfRows = validPerf.map(p => {
         const hitColor = p.cacheHitRate != null && p.cacheHitRate >= 85 ? 'var(--cache)'
             : p.cacheHitRate != null && p.cacheHitRate >= 70 ? 'var(--tps)' : 'var(--output)';
         return `<tr>
@@ -431,67 +428,97 @@ function renderPerfPercentileTable(data) {
       <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) {
+    // ─── Tab 3: Failed Requests ───────────────────────────────────────────────
     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>
+    const hasErrors = !!(errors && errors.failedCount > 0);
+    let errorTabBtn = '';
+    let errorTabContent = '';
+    if (hasErrors) {
+        const errorRatePct = (errors.errorRate * 100).toFixed(2) + '%';
+        const rateColor = errors.errorRate >= 0.05 ? 'var(--output)' : 'var(--tps)';
+        const cellColor = errors.errorRate >= 0.05 ? 'var(--output)' : 'var(--tps)';
+        const errorRows = 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:${cellColor}">${modelRate}</td>
+        </tr>`;
+        }).join('\n');
+        errorTabBtn = `
+      <button class="tab-btn" data-mtab="errors" onclick="switchModelTab('errors')">
+        Failed Requests <span style="color:var(--output);margin-left:4px;font-size:0.85em">(${errors.failedCount})</span>
+      </button>`;
+        errorTabContent = `
+    <div id="model-tab-errors" class="tab-content">
+      <p style="font-size:12px;color:${rateColor};padding:8px 0 6px">
+        Overall error rate: <strong>${errorRatePct}</strong> &mdash;
+        ${errors.failedCount} failed / ${errors.successCount + errors.failedCount} total
+      </p>
+      <table id="errors-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>`;
+        </tr></thead>
+        <tbody>${errorRows}</tbody>
+      </table>
+      <div class="pagination-ctrl" id="errors-table-ctrl">
+        <button class="page-btn" id="errors-table-prev">← Prev</button>
+        <span class="page-info" id="errors-table-info"></span>
+        <button class="page-btn" id="errors-table-next">Next →</button>
+      </div>
+    </div>`;
+    }
+    return `
+  <div class="section">
+    <div class="section-title">Model Analytics</div>
+    <div class="tab-bar">
+      <button class="tab-btn active" data-mtab="usage" onclick="switchModelTab('usage')">Usage Breakdown</button>
+      <button class="tab-btn" data-mtab="perf" onclick="switchModelTab('perf')">Latency Percentiles</button>
+      ${errorTabBtn}
+    </div>
+
+    <div id="model-tab-usage" class="tab-content active">
+      <table id="usage-table" class="data-table">
+        <thead><tr>
+          <th>Model</th><th>Provider</th><th>Req</th><th>Total</th>
+          <th>Input</th><th>Output</th><th>Cache</th><th>Hit Rate</th>
+          <th>Avg TTFT</th><th>P95 TTFT</th><th>TPS</th><th>Cost</th>
+        </tr></thead>
+        <tbody>${usageRows}</tbody>
+      </table>
+      <div class="pagination-ctrl" id="usage-table-ctrl">
+        <button class="page-btn" id="usage-table-prev">← Prev</button>
+        <span class="page-info" id="usage-table-info"></span>
+        <button class="page-btn" id="usage-table-next">Next →</button>
+      </div>
+    </div>
+
+    <div id="model-tab-perf" class="tab-content">
+      ${validPerf.length > 0 ? `
+      <table id="perf-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>${perfRows}</tbody>
+      </table>
+      <div class="pagination-ctrl" id="perf-table-ctrl">
+        <button class="page-btn" id="perf-table-prev">← Prev</button>
+        <span class="page-info" id="perf-table-info"></span>
+        <button class="page-btn" id="perf-table-next">Next →</button>
+      </div>` : '<div class="empty-state">No performance data available for this period.</div>'}
+    </div>
+
+    ${errorTabContent}
+  </div>`;
 }
 function renderDailyTrendInit(data) {
     const days = data.daily.slice().reverse().map(d => d.day);
@@ -643,12 +670,11 @@ export function generateUsageHtml(data) {
     const modelChartJs = modelChartVisible ? renderModelChartInit(data) : "";
     const scatterChartJs = renderScatterChartInit(data);
     const providerStr = renderProviderCards(data);
-    const tableStr = renderDataTable(data);
-    const perfPercentileStr = renderPerfPercentileTable(data);
-    const errorStatsStr = renderErrorStatsSection(data);
+    const modelAnalyticsStr = renderModelAnalyticsSection(data);
     const dailyChartJs = renderDailyTrendInit(data);
     const heatmapJs = renderHeatmapInit(data);
-    const hasPerf = data.perfSummary.length > 0;
+    const hasPerf = data.perfSummary.some(p => p.requestCount > 0 &&
+        (p.totalInput + p.totalOutput + p.totalCacheRead + p.totalCacheWrite) > 0);
     const jsonData = JSON.stringify(data);
     return `<!DOCTYPE html>
 <html lang="en">
@@ -729,6 +755,7 @@ export function generateUsageHtml(data) {
   .provider-name { font-size: 14px; font-weight: 600; margin-bottom: 8px; color: var(--input); }
   .provider-stat { display: flex; justify-content: space-between; font-size: 12px; padding: 2px 0; }
   .provider-stat .stat-label { color: var(--text-dim); }
+  .provider-more { color: var(--text-dim); font-size: 11px; padding: 10px 4px 0; grid-column: 1 / -1; }
 
   .data-table { width: 100%; border-collapse: collapse; font-size: 12px; }
   .data-table th {
@@ -746,6 +773,22 @@ export function generateUsageHtml(data) {
   }
   .data-table tbody tr:hover { background: rgba(42,42,53,0.4); }
 
+  .pagination-ctrl {
+    display: none; align-items: center; gap: 14px; justify-content: center;
+    padding: 14px 0 4px;
+  }
+  .page-btn {
+    background: var(--card); border: 1px solid var(--border); color: var(--text);
+    padding: 5px 16px; border-radius: 4px; cursor: pointer;
+    font-size: 12px; font-family: 'Inter', sans-serif; transition: border-color 0.15s, color 0.15s;
+  }
+  .page-btn:hover:not(:disabled) { border-color: var(--input); color: var(--input); }
+  .page-btn:disabled { opacity: 0.35; cursor: not-allowed; }
+  .page-info {
+    color: var(--text-dim); font-size: 12px;
+    font-family: 'JetBrains Mono', monospace; min-width: 110px; text-align: center;
+  }
+
   .empty-state {
     background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
     padding: 40px; text-align: center; color: var(--text-dim);
@@ -778,7 +821,7 @@ export function generateUsageHtml(data) {
 
   <div class="section">
     <div class="section-title">Model Comparison Matrix</div>
-    ${modelChartVisible ? '<div class="chart-box" id="model-chart"></div>' : '<div class="empty-state">No models with >=1M tokens in this period.</div>'}
+    ${modelChartVisible ? '<div class="chart-box" id="model-chart"></div>' : '<div class="empty-state">No models with &ge;1M tokens in this period.</div>'}
   </div>
 
   <div class="section">
@@ -786,14 +829,7 @@ export function generateUsageHtml(data) {
     <div class="provider-row">${providerStr}</div>
   </div>
 
-  <div class="section">
-    <div class="section-title">Detailed Data Grid</div>
-    ${tableStr}
-  </div>
-
-  ${perfPercentileStr}
-
-  ${errorStatsStr}
+  ${modelAnalyticsStr}
 
   <div class="section">
     <div class="section-title">Efficiency vs Cost</div>
@@ -814,9 +850,9 @@ export function generateUsageHtml(data) {
     </div>
   </div>
 
-    <div class="footer">
-      Generated by TokenWatch &middot; Data: SQLite + JSONL &middot; Export: <a href="javascript:void(0)" onclick="downloadJSON()" style="color:var(--input);text-decoration:none">JSON</a> <span style="color:var(--text-dim)">(saves to browser download folder)</span>
-    </div>
+  <div class="footer">
+    Generated by TokenWatch &middot; Data: SQLite + JSONL &middot; Export: <a href="javascript:void(0)" onclick="downloadJSON()" style="color:var(--input);text-decoration:none">JSON</a> <span style="color:var(--text-dim)">(saves to browser download folder)</span>
+  </div>
 </div>
 
 <script id="report-data" type="application/json">${jsonData}</script>
@@ -830,9 +866,10 @@ var fmt = function(v) {
   return String(v);
 };
 
+// Usage Timeline tab switcher
 window.switchTab = function(name) {
   document.querySelectorAll('.tab-content').forEach(function(el) { el.classList.remove('active'); });
-  document.querySelectorAll('.tab-btn').forEach(function(el) { el.classList.remove('active'); });
+  document.querySelectorAll('.tab-btn[data-tab]').forEach(function(el) { el.classList.remove('active'); });
   document.getElementById('tab-' + name).classList.add('active');
   document.querySelector('[data-tab="' + name + '"]').classList.add('active');
   setTimeout(function() {
@@ -841,6 +878,50 @@ window.switchTab = function(name) {
   }, 50);
 };
 
+// Model Analytics tab switcher
+window.switchModelTab = function(name) {
+  document.querySelectorAll('[data-mtab]').forEach(function(el) { el.classList.remove('active'); });
+  ['model-tab-usage', 'model-tab-perf', 'model-tab-errors'].forEach(function(id) {
+    var el = document.getElementById(id);
+    if (el) el.classList.remove('active');
+  });
+  var activeTab = document.getElementById('model-tab-' + name);
+  if (activeTab) activeTab.classList.add('active');
+  var activeBtn = document.querySelector('[data-mtab="' + name + '"]');
+  if (activeBtn) activeBtn.classList.add('active');
+};
+
+// Generic paginator: hide/show tbody rows, show prev/next controls
+function initPaginator(tableId, pageSize) {
+  var tbody = document.querySelector('#' + tableId + ' tbody');
+  if (!tbody) return;
+  var rows = Array.from(tbody.querySelectorAll('tr'));
+  if (rows.length <= pageSize) return; // 行数不超过一页时无需分页
+  var totalPages = Math.ceil(rows.length / pageSize);
+  var cur = 1;
+
+  function render() {
+    rows.forEach(function(r, i) {
+      r.style.display = (i >= (cur - 1) * pageSize && i < cur * pageSize) ? '' : 'none';
+    });
+    var info = document.getElementById(tableId + '-info');
+    if (info) info.textContent = 'Page ' + cur + ' / ' + totalPages + ' (' + rows.length + ' rows)';
+    var prevEl = document.getElementById(tableId + '-prev');
+    var nextEl = document.getElementById(tableId + '-next');
+    if (prevEl) prevEl.disabled = cur === 1;
+    if (nextEl) nextEl.disabled = cur === totalPages;
+  }
+
+  var prevEl = document.getElementById(tableId + '-prev');
+  var nextEl = document.getElementById(tableId + '-next');
+  if (prevEl) prevEl.addEventListener('click', function() { if (cur > 1) { cur--; render(); } });
+  if (nextEl) nextEl.addEventListener('click', function() { if (cur < totalPages) { cur++; render(); } });
+
+  var ctrl = document.getElementById(tableId + '-ctrl');
+  if (ctrl) ctrl.style.display = 'flex';
+  render();
+}
+
 ${modelChartJs}
 ${scatterChartJs}
 ${dailyChartJs}
@@ -864,6 +945,9 @@ document.addEventListener('DOMContentLoaded', function() {
   ${hasPerf ? 'initScatterChart();' : ''}
   initDailyChart();
   initHeatmapChart();
+  initPaginator('usage-table', 10);
+  initPaginator('perf-table', 10);
+  initPaginator('errors-table', 10);
 });
 
 window.addEventListener('resize', function() {

package/dist/perf-tracker.js

@@ -43,6 +43,11 @@ class PerfTracker {
         const cacheRead = tokens?.cache?.read ?? 0;
         const cacheWrite = tokens?.cache?.write ?? 0;
         const cost = info.cost ?? 0;
+        // 过滤全零 token 的失败请求，不写入日志和统计，防止污染数据
+        if (inputTokens + outputTokens + cacheRead + cacheWrite === 0) {
+            this.firstPartTimes.delete(messageID);
+            return;
+        }
         const firstPart = this.firstPartTimes.get(messageID) ?? null;
         const latencyMs = completed - created;
         const ttftMs = firstPart !== null ? firstPart - created : null;

package/dist/sidebar.jsx

@@ -149,11 +149,13 @@ export function TokenWatchPanel(props) {
     // ── 数据聚合 ──
     const modelStats = createMemo(() => {
         const map = new Map();
-        for (const msg of props.allTokenMessages()) {
+        const msgs = props.allTokenMessages();
+        for (let i = 0; i < msgs.length; i++) {
+            const msg = msgs[i];
             const key = `${msg.providerID}/${msg.modelID}`;
             let e = map.get(key);
             if (!e) {
-                e = { providerID: msg.providerID, modelID: msg.modelID, totalInput: 0, totalOutput: 0, totalReasoning: 0, cacheRead: 0, cacheWrite: 0, totalCost: 0, requestCount: 0 };
+                e = { providerID: msg.providerID, modelID: msg.modelID, totalInput: 0, totalOutput: 0, totalReasoning: 0, cacheRead: 0, cacheWrite: 0, totalCost: 0, requestCount: 0, lastMessageIndex: -1 };
                 map.set(key, e);
             }
             e.totalInput += msg.inputTokens;
@@ -163,8 +165,13 @@ export function TokenWatchPanel(props) {
             e.cacheWrite += msg.cacheWrite;
             e.totalCost += msg.cost;
             e.requestCount++;
+            e.lastMessageIndex = i; // 追踪该模型最后一条消息的索引（越大 = 越近调用）
         }
-        return Array.from(map.entries()).sort((a, b) => (b[1].totalInput + b[1].totalOutput) - (a[1].totalInput + a[1].totalOutput));
+        return Array.from(map.entries())
+            // 过滤掉全零无效模型（如会话失败导致 token 全为 0 的记录）
+            .filter(([, s]) => s.totalInput + s.totalOutput + s.totalReasoning + s.cacheRead + s.cacheWrite > 0)
+            // 按最近调用时间降序：最后一条消息在数组中索引越大越靠前
+            .sort((a, b) => b[1].lastMessageIndex - a[1].lastMessageIndex);
     });
     const sessionTotals = createMemo(() => {
         let i = 0, o = 0, ir = 0, cr = 0, cw = 0, r = 0, c = 0;
@@ -442,8 +449,14 @@ export function TokenWatchPanel(props) {
                     ? RGBA.fromInts(63, 185, 80, 255)
                     : RGBA.fromInts(244, 67, 54, 255);
             };
-            // 模型名处理：假如总长超过22字符，且格式为 厂商/模型厂商/模型名称，去除中间模型厂商，只留 provider/modelname 格式
-            let fullTitle = `${stat.providerID}/${stat.modelID}`;
+            // 供应商名称截断：超过12字符则省略
+            const MAX_PROVIDER_LEN = 12;
+            let providerDisplay = stat.providerID;
+            if (providerDisplay.length > MAX_PROVIDER_LEN) {
+                providerDisplay = providerDisplay.slice(0, MAX_PROVIDER_LEN - 1) + "…";
+            }
+            let fullTitle = `${providerDisplay}/${stat.modelID}`;
+            // 去除中间段：格式为 厂商/模型厂商/模型名称 时只留 provider/modelname
             if (fullTitle.length > 22) {
                 const parts = fullTitle.split("/");
                 if (parts.length >= 3) {

package/dist/tui.jsx

@@ -108,7 +108,8 @@ const tui = async (api) => {
                                 if (msg.role !== "assistant")
                                     continue;
                                 const tokens = msg.tokens;
-                                if (!tokens)
+                                // 与 message.updated 处理器保持一致：过滤 total=0 的失败请求
+                                if (!tokens || (tokens.total ?? 0) === 0)
                                     continue;
                                 const id = msg.id;
                                 const idx = next.findIndex(m => m.id === id);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "opencode-tokenwatch",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "description": "Real-time token usage, cache analytics & performance dashboard plugin for OpenCode CLI",
   "type": "module",
   "main": "./dist/index.js",