opencode-tokenwatch 0.3.0 → 0.3.2

package/README.en.md

@@ -8,18 +8,20 @@ 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, latency, cost)
-- **Cache hit rate** — Inline progress bars with color thresholds, trend indicators (↑/↓), and global weighted cache hit rate in the summary row
+- **Sidebar panel** — Session-level and per-model real-time stats (requests, tokens, cache, cost)
+- **Smart sorting** — Models sorted by most recent call time, current model always on top
+- **Provider name truncation** — Long provider names auto-truncated (12 chars) to prevent layout overflow
+- **Cache hit rate** — Inline color progress bars with trend indicators (↑/↓) and global weighted hit rate
 - **Performance metrics** — TTFT / TPS / End-to-end latency + P50/P95/P99 latency percentiles
-- **Token distribution** — 5-bucket role breakdown (system, user, Agent, Tool and other with fallback and adaptive scaling)
-- **Error rate statistics** — Detects and tracks failed requests (empty token response) and real-time error rate
-- **Model pricing** — Input/cache/output unit prices
+- **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
+- **Invalid data filtering** — Full-chain defense: filters zero-token entries from perf-tracker, sidebar, and HTML reports
+- **Cost display** — Per-model cost (requires provider billing data)
 - **`/usage` command** — HTML Report → JSON Export → Text Report → Settings
-- **HTML report** — Interactive ECharts dashboard: Token distribution, performance percentiles, error rate analysis, model speed rankings (redesigned from overlapping scatter plots to horizontal bar charts), auto-opened in browser
+- **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
 - **Multi-level collapse** — Panel, models, and sub-blocks collapsible with persisted state
 - **Language switching** — Auto-detect or manually switch between Chinese and English
-- **Per-request tracking** — TTFT/TPS/latency logged to JSONL for report analysis
-- **Adaptive coloring** — Colors auto-derived from theme
 
 ## Install
 
@@ -45,8 +47,8 @@ Add to `opencode.json` or `opencode.jsonc`:
     "opencode-tokenwatch": {
       "sidebar": {
         "showPerformance": true,
-        "showPricing": false,
-        "showTokenDistribution": false,
+        "showPricing": true,
+        "showTokenDistribution": true,
         "showTrend": true
       },
       "language": "auto"
@@ -58,7 +60,7 @@ Add to `opencode.json` or `opencode.jsonc`:
 | Option | Type | Default | Description |
 |--------|------|---------|-------------|
 | `sidebar.showPerformance` | boolean | `true` | Show TTFT/TPS/latency |
-| `sidebar.showPricing` | boolean | `true` | Show model pricing |
+| `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 |
@@ -74,6 +76,14 @@ In OpenCode TUI, run `/usage`:
 - **Text Report** — Exports Markdown report to `~/.opencode/reports/`
 - **Settings** — Toggle sidebar blocks, switch language
 
+## Data Files
+
+| 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 |
+| Report output | `~/.opencode/reports/` | HTML / JSON / Markdown reports |
+
 ## Requirements
 
 - OpenCode CLI (with `opencode db` command)

package/README.md

@@ -8,18 +8,20 @@ OpenCode CLI 的实时 Token 用量统计、缓存分析与性能指标插件。
 
 ## 功能
 
-- **侧边栏面板** — 会话级与按模型的实时统计（请求数、Token、缓存、耗时、成本）
-- **缓存命中率** — 模型行内彩色进度条，带趋势指示器（↑/↓），全局总计行显示**全局加权命中率**
+- **侧边栏面板** — 会话级与按模型的实时统计（请求数、Token、缓存、成本）
+- **智能排序** — 模型按最近调用时间降序排列，当前焦点模型始终在顶部
+- **供应商名称截断** — 超长供应商名自动截断（12 字符），避免撑破布局
+- **缓存命中率** — 模型行内彩色进度条，带趋势指示器（↑/↓），全局总计行显示**加权命中率**
 - **性能指标** — TTFT / TPS / 端到端延迟 + P50/P95/P99 延迟分位数
-- **Token 分布** — 5 桶角色分解（系统、用户、Agent、Tool 以及 other 兜底，支持自适应缩放）
+- **Token 分布** — 5 桶角色分解（system / user / toolCall / toolResult / output + other 兜底）
 - **错误率统计** — 识别并统计失败请求（空 Token 响应），实时计算错误率
-- **模型定价** — 输入/缓存/输出单价
+- **无效数据过滤** — 全链路防御：从 perf-tracker 到 sidebar、HTML 报告均过滤全零 token 无效请求
+- **成本展示** — 按模型显示 cost（需 provider 返回计费数据）
 - **`/usage` 命令** — HTML 报告 → JSON 导出 → 文本报告 → 设置
-- **HTML 报告** — 交互式 ECharts 仪表盘：Token 分布、性能分位数、错误率分析、模型效率水平排名（已重构重叠散点图为水平条形对比图），自动在浏览器打开
+- **HTML 报告** — 交互式 ECharts 仪表盘：Token 分布、性能分位数、TPS 水平排名、错误率分析，自动在浏览器打开
+- **持久化统计** — 性能指标（TPS/TTFT/延迟）写入独立 JSON 文件，永久累积，不受日志轮转影响
 - **多级折叠** — 面板、模型、子区块均可折叠，状态持久化
-- **语言切换** — 中英双语，可跟随系统或手动切换
-- **性能追踪** — 每次请求的 TTFT/TPS/延迟写入 JSONL，用于报告分析
-- **自适应配色** — 从主题色自动衍生
+- **语言切换** — 中英双语，跟随系统或手动切换
 
 ## 安装
 
@@ -45,8 +47,8 @@ npm install opencode-tokenwatch
     "opencode-tokenwatch": {
       "sidebar": {
         "showPerformance": true,
-        "showPricing": false,
-        "showTokenDistribution": false,
+        "showPricing": true,
+        "showTokenDistribution": true,
         "showTrend": true
       },
       "language": "auto"
@@ -58,7 +60,7 @@ npm install opencode-tokenwatch
 | 配置项 | 类型 | 默认值 | 说明 |
 |--------|------|--------|------|
 | `sidebar.showPerformance` | boolean | `true` | 显示 TTFT/TPS/延迟 |
-| `sidebar.showPricing` | boolean | `true` | 显示模型定价 |
+| `sidebar.showPricing` | boolean | `true` | 显示请求成本 |
 | `sidebar.showTokenDistribution` | boolean | `true` | 显示 Token 分布 |
 | `sidebar.showTrend` | boolean | `true` | 显示趋势指示器 |
 | `language` | `"auto"` / `"zh"` / `"en"` | `"auto"` | 界面语言 |
@@ -74,6 +76,14 @@ npm install opencode-tokenwatch
 - **文本报告** — 导出 Markdown 格式至 `~/.opencode/reports/`
 - **设置** — 开关侧边栏显示项、切换语言
 
+## 数据文件
+
+| 文件 | 路径 | 说明 |
+|------|------|------|
+| JSONL 日志 | `~/.opencode/tokenwatch.jsonl` | 原始请求日志，超 5MB 自动轮转 |
+| 聚合统计 | `~/.opencode/tokenwatch-stats.json` | 持久化性能统计，永久累积 |
+| 报告输出 | `~/.opencode/reports/` | HTML / JSON / Markdown 报告 |
+
 ## 系统要求
 
 - OpenCode CLI（支持 `opencode db` 命令）

package/dist/commands.jsx

@@ -3,6 +3,7 @@ import { formatUsageReport } from "./formatter.js";
 import { generateUsageHtml } from "./generate-usage-html.js";
 import { t, setLanguage } from "./i18n.js";
 import { readLogs } from "./perf-tracker.js";
+import { readPersistedStats } from "./stats-store.js";
 import { existsSync, mkdirSync, writeFileSync } from "node:fs";
 import { join } from "node:path";
 import { homedir } from "node:os";
@@ -60,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) {
@@ -144,7 +148,11 @@ function aggregatePerfStats(logs) {
 }
 async function buildCombinedData(api, filters = {}) {
     const report = await getUsageReport(filters);
-    const logs = readLogs(1000);
+    // perfLogs: 仅用于 JSON 导出参考，保持适当窗口即可
+    const logs = readLogs(200);
+    // perfSummary: 使用持久化聚合统计，包含自插件安装以来的全量历史数据
+    // 不再受 readLogs 窗口限制，即使 JSONL 被轮转，历史指标也不会丢失
+    const perfSummary = readPersistedStats();
     const now = new Date();
     const pad = (n) => String(n).padStart(2, '0');
     const meta = {
@@ -157,7 +165,7 @@ async function buildCombinedData(api, filters = {}) {
     return {
         ...report,
         perfLogs: logs,
-        perfSummary: aggregatePerfStats(logs),
+        perfSummary,
         meta,
     };
 }
@@ -208,6 +216,10 @@ function showHtmlReportRangeMenu(api, dialog) {
         ]} flat={true}/>));
 }
 function showUsageMenu(api, dialog) {
+    try {
+        setLanguage(loadConfigFromStore(api).language);
+    }
+    catch { }
     dialog.replace(() => (<api.ui.DialogSelect title={t("panelTitle")} placeholder="Select an action..." options={[
             {
                 title: `${t("cmdTitleHtml")} ▸`,

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;
@@ -33,11 +34,15 @@ 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) + '%' : '—';
@@ -217,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)
@@ -280,7 +288,7 @@ function initScatterChart() {
           'Requests: ' + effReq[i];
       }
     },
-    grid: { left: 20, right: 240, bottom: 30, top: 20, containLabel: true },
+    grid: { left: 20, right: 280, bottom: 30, top: 20, containLabel: true },
     xAxis: {
       type: 'value',
       name: 'Avg TPS  (tokens / sec)',
@@ -295,7 +303,7 @@ function initScatterChart() {
       axisLabel: {
         color: '#E0E0F0',
         fontSize: 11,
-        formatter: function(v) { return v.length > 26 ? v.slice(0, 24) + '\u2026' : v; }
+        formatter: function(v) { return v.length > 50 ? v.slice(0, 48) + '\u2026' : v; }
       },
       axisLine: { show: false },
       axisTick: { show: false }
@@ -334,14 +342,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>
@@ -399,10 +415,13 @@ function renderDataTable(data) {
 }
 /** 渲染 P50/P95/P99 延迟分位数表格 */
 function renderPerfPercentileTable(data) {
-    if (data.perfSummary.length === 0)
+    // 过滤掉无效记录：无请求或 token 全为 0 的模型
+    const validPerf = data.perfSummary.filter(p => p.requestCount > 0 &&
+        (p.totalInput + p.totalOutput + p.totalCacheRead + p.totalCacheWrite) > 0);
+    if (validPerf.length === 0)
         return '';
     const fmtMs = (v) => v != null ? v.toFixed(0) + 'ms' : '—';
-    const rows = data.perfSummary.map(p => {
+    const rows = 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>
@@ -636,7 +655,8 @@ export function generateUsageHtml(data) {
     const errorStatsStr = renderErrorStatsSection(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">

package/dist/i18n.js

@@ -14,6 +14,7 @@ const zh = {
     trendUp: "↑",
     trendDown: "↓",
     cache: "缓存",
+    lat: "延迟",
     performance: "性能",
     pricing: "Pricing",
     tokenDistribution: "Token分布",
@@ -86,6 +87,7 @@ const en = {
     trendUp: "↑",
     trendDown: "↓",
     cache: "Cache",
+    lat: "Lat",
     performance: "Performance",
     pricing: "Pricing",
     tokenDistribution: "Token Distribution",

package/dist/perf-tracker.d.ts

@@ -54,6 +54,7 @@ declare class PerfTracker {
     getSessionStats(): SessionPerfStats;
     readLogs(last?: number): LogEntry[];
     reset(): void;
+    loadSession(sessionID: string): void;
 }
 export declare function createPerfTracker(): PerfTracker;
 export type { PartEvent, PerfTracker };

package/dist/perf-tracker.js

@@ -2,6 +2,7 @@ import { appendFileSync, readFileSync, writeFileSync } from "node:fs";
 import { join } from "node:path";
 import { homedir } from "node:os";
 import { existsSync, statSync } from "node:fs";
+import { updatePersistedStats } from "./stats-store.js";
 const LOG_PATH = join(homedir(), ".opencode", "tokenwatch.jsonl");
 class PerfTracker {
     firstPartTimes = new Map();
@@ -42,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;
@@ -76,6 +82,7 @@ class PerfTracker {
         try {
             // Risk fix: JSONL 日志轮转保护，防止长期使用后文件无限增长
             // 超过 5MB 时截断，保留最新 2000 行
+            // 注意：轮转前先调用 updatePersistedStats，确保被轮转行的数据已持久化
             const MAX_SIZE = 5 * 1024 * 1024; // 5 MB
             const KEEP_LINES = 2000;
             if (existsSync(LOG_PATH) && statSync(LOG_PATH).size > MAX_SIZE) {
@@ -87,6 +94,9 @@ class PerfTracker {
         catch {
             // Silently fail — logging is non-critical
         }
+        // 无论 JSONL 写入是否成功，都尝试更新持久化聚合统计
+        // 这样即使日志被轮转，历史统计数据也永不丢失
+        updatePersistedStats(entry);
     }
     handleMessageRemoved(event) {
         const mid = event.properties?.messageID ?? "";
@@ -247,6 +257,38 @@ class PerfTracker {
         this.ttftSamples.clear();
         this.latencySamples.clear();
     }
+    loadSession(sessionID) {
+        this.firstPartTimes.clear();
+        this.statsMap.clear();
+        this.ttftSamples.clear();
+        this.latencySamples.clear();
+        if (!sessionID)
+            return;
+        try {
+            if (!existsSync(LOG_PATH))
+                return;
+            const content = readFileSync(LOG_PATH, "utf-8").trim();
+            if (!content)
+                return;
+            const lines = content.split("\n");
+            for (const line of lines) {
+                if (!line)
+                    continue;
+                try {
+                    const entry = JSON.parse(line);
+                    if (entry.sessionID === sessionID) {
+                        this.updateStats(entry.model, entry);
+                    }
+                }
+                catch {
+                    // Skip malformed lines
+                }
+            }
+        }
+        catch {
+            // Non-critical loading failure
+        }
+    }
 }
 export function createPerfTracker() {
     return new PerfTracker();

package/dist/sidebar.d.ts

@@ -15,8 +15,8 @@ interface TokenWatchPanelProps {
     api: TuiPluginApi;
     theme: TuiTheme;
     perfTracker: PerfTracker;
-    messages: readonly any[];
-    allTokenMessages: TokenMessage[];
+    messages: () => readonly any[];
+    allTokenMessages: () => TokenMessage[];
 }
 export declare function TokenWatchPanel(props: TokenWatchPanelProps): any;
 export {};