opencode-tokenwatch 0.4.0 → 0.6.0

package/dist/tui.js

@@ -0,0 +1,4802 @@
+// src/host/runtime.tsx
+import { createComponent as _$createComponent2 } from "@opentui/solid";
+import { createSignal as createSignal2 } from "solid-js";
+
+// src/ui/sidebar.tsx
+import { createComponent as _$createComponent } from "@opentui/solid";
+import { effect as _$effect } from "@opentui/solid";
+import { createTextNode as _$createTextNode } from "@opentui/solid";
+import { insertNode as _$insertNode } from "@opentui/solid";
+import { insert as _$insert } from "@opentui/solid";
+import { memo as _$memo } from "@opentui/solid";
+import { setProp as _$setProp } from "@opentui/solid";
+import { use as _$use } from "@opentui/solid";
+import { createElement as _$createElement } from "@opentui/solid";
+import { createSignal, createMemo, createEffect, For, Show, onMount, onCleanup } from "solid-js";
+import { RGBA } from "@opentui/core";
+
+// src/kernel/format.ts
+function formatTokens(n) {
+  if (n >= 1e9) return `${(n / 1e9).toFixed(1)}B`;
+  if (n >= 1e6) return `${(n / 1e6).toFixed(1)}M`;
+  if (n >= 1e3) return `${(n / 1e3).toFixed(1)}K`;
+  return String(n);
+}
+function formatCost(n) {
+  if (n === 0) return "$0.00";
+  if (n < 0.01) return `$${n.toFixed(4)}`;
+  return `$${n.toFixed(2)}`;
+}
+function formatDuration(ms) {
+  if (ms === null) return "\u2014";
+  if (ms < 1e3) return `${ms.toFixed(0)}ms`;
+  if (ms < 6e4) return `${(ms / 1e3).toFixed(1)}s`;
+  const m = Math.floor(ms / 6e4);
+  const s = Math.floor(ms % 6e4 / 1e3);
+  return `${m}m ${s}s`;
+}
+function formatFilters(filters) {
+  const parts = [];
+  if (filters.sessionId) parts.push(`session=${filters.sessionId}`);
+  if (filters.provider) parts.push(`provider=${filters.provider}`);
+  if (filters.model) parts.push(`model=${filters.model}`);
+  if (filters.startDate || filters.endDate) {
+    parts.push(`date=${filters.startDate ?? "..."}..${filters.endDate ?? "..."}`);
+  }
+  return parts.length ? parts.join(" | ") : "scope=all local sessions";
+}
+function getVisualWidth(str) {
+  let width = 0;
+  for (let i = 0; i < str.length; i++) {
+    width += str.charCodeAt(i) > 255 ? 2 : 1;
+  }
+  return width;
+}
+function truncateByWidth(str, maxWidth) {
+  if (getVisualWidth(str) <= maxWidth) return str;
+  let width = 0;
+  let res = "";
+  for (let i = 0; i < str.length; i++) {
+    const charWidth = str.charCodeAt(i) > 255 ? 2 : 1;
+    if (width + charWidth > maxWidth - 3) {
+      return res + "...";
+    }
+    width += charWidth;
+    res += str[i];
+  }
+  return res;
+}
+function table(columns, rows, totalRow) {
+  const widths = columns.map((col, i) => {
+    const rowWidths = rows.map((row) => getVisualWidth(row[i] ?? ""));
+    const maxRow = rowWidths.length ? Math.max(...rowWidths) : 0;
+    const totalWidth = totalRow ? getVisualWidth(totalRow[i] ?? "") : 0;
+    return Math.max(getVisualWidth(col.label), maxRow, totalWidth);
+  });
+  const renderRow = (cells) => "\u2551" + cells.map((cell, i) => {
+    const value = cell ?? "";
+    const vWidth = getVisualWidth(value);
+    const padding = " ".repeat(widths[i] - vWidth);
+    const content = columns[i].align === "right" ? padding + value : value + padding;
+    return ` ${content} \u2551`;
+  }).join("");
+  const sep = (left, mid, right, fill) => left + widths.map((w) => fill.repeat(w + 2)).join(mid) + right;
+  const lines = [
+    sep("\u2554", "\u2566", "\u2557", "\u2550"),
+    renderRow(columns.map((col) => col.label)),
+    sep("\u2560", "\u256C", "\u2563", "\u2550"),
+    ...rows.map(renderRow)
+  ];
+  if (totalRow) {
+    lines.push(sep("\u2560", "\u256C", "\u2563", "\u2550"));
+    lines.push(renderRow(totalRow));
+  }
+  lines.push(sep("\u255A", "\u2569", "\u255D", "\u2550"));
+  return lines.join("\n");
+}
+function formatSessionSummary(data, title = "Current Session") {
+  const modelLabel = data.modelsUsed.length > 1 ? `${data.modelsUsed.length} models` : data.model || "(unknown)";
+  return [
+    `\u2550\u2550\u2550 ${title} \u2550\u2550\u2550`,
+    `Models:        ${modelLabel}`,
+    `Provider:      ${data.provider || "(mixed)"}`,
+    `Req:           ${data.requestCount}`,
+    `Total Tokens:  ${formatTokens(data.totalTokens)}`,
+    `  Input:       ${formatTokens(data.inputTokens)}`,
+    `  Output:      ${formatTokens(data.outputTokens)}`,
+    `  Reasoning:   ${formatTokens(data.reasoningTokens)}`,
+    `  C.Read:      ${formatTokens(data.cacheRead)}`,
+    `  C.Write:     ${formatTokens(data.cacheWrite)}`,
+    `  Cost:        ${formatCost(data.totalCost)}`
+  ].join("\n");
+}
+function formatModelBreakdown(items) {
+  if (items.length === 0) return "\u2550\u2550\u2550 Model Breakdown \u2550\u2550\u2550\n(no data)";
+  const total = items.reduce((acc, item) => ({
+    requests: acc.requests + item.requests,
+    totalTokens: acc.totalTokens + item.totalTokens,
+    inputTokens: acc.inputTokens + item.inputTokens,
+    outputTokens: acc.outputTokens + item.outputTokens,
+    cacheRead: acc.cacheRead + item.cacheRead
+  }), {
+    requests: 0,
+    totalTokens: 0,
+    inputTokens: 0,
+    outputTokens: 0,
+    cacheRead: 0
+  });
+  const rows = items.map((item) => [
+    item.provider || "-",
+    truncateByWidth(item.model, 20),
+    String(item.requests),
+    formatTokens(item.totalTokens),
+    formatTokens(item.inputTokens),
+    formatTokens(item.outputTokens),
+    formatTokens(item.cacheRead)
+  ]);
+  return [
+    "\u2550\u2550\u2550 Model Breakdown \u2550\u2550\u2550",
+    table([
+      { label: "Provider", align: "left" },
+      { label: "Model", align: "left" },
+      { label: "Req", align: "right" },
+      { label: "Total", align: "right" },
+      { label: "In", align: "right" },
+      { label: "Out", align: "right" },
+      { label: "Cache", align: "right" }
+    ], rows, [
+      "TOTAL",
+      "",
+      String(total.requests),
+      formatTokens(total.totalTokens),
+      formatTokens(total.inputTokens),
+      formatTokens(total.outputTokens),
+      formatTokens(total.cacheRead)
+    ])
+  ].join("\n");
+}
+function formatProviderBreakdown(items) {
+  if (items.length === 0) return "\u2550\u2550\u2550 Provider Breakdown \u2550\u2550\u2550\n(no data)";
+  const total = items.reduce((acc, item) => ({
+    requests: acc.requests + item.requests,
+    totalTokens: acc.totalTokens + item.totalTokens,
+    inputTokens: acc.inputTokens + item.inputTokens,
+    outputTokens: acc.outputTokens + item.outputTokens,
+    cacheRead: acc.cacheRead + item.cacheRead
+  }), {
+    requests: 0,
+    totalTokens: 0,
+    inputTokens: 0,
+    outputTokens: 0,
+    cacheRead: 0
+  });
+  const rows = items.map((item) => [
+    item.provider || "-",
+    String(item.requests),
+    formatTokens(item.totalTokens),
+    formatTokens(item.inputTokens),
+    formatTokens(item.outputTokens),
+    formatTokens(item.cacheRead)
+  ]);
+  return [
+    "\u2550\u2550\u2550 Provider Breakdown \u2550\u2550\u2550",
+    table([
+      { label: "Provider", align: "left" },
+      { label: "Req", align: "right" },
+      { label: "Total", align: "right" },
+      { label: "In", align: "right" },
+      { label: "Out", align: "right" },
+      { label: "Cache", align: "right" }
+    ], rows, [
+      "TOTAL",
+      String(total.requests),
+      formatTokens(total.totalTokens),
+      formatTokens(total.inputTokens),
+      formatTokens(total.outputTokens),
+      formatTokens(total.cacheRead)
+    ])
+  ].join("\n");
+}
+function formatDailyBreakdown(items) {
+  if (items.length === 0) return "\u2550\u2550\u2550 Daily Breakdown \u2550\u2550\u2550\n(no data)";
+  const total = items.reduce((acc, item) => ({
+    requests: acc.requests + item.requests,
+    totalTokens: acc.totalTokens + item.totalTokens,
+    inputTokens: acc.inputTokens + item.inputTokens,
+    outputTokens: acc.outputTokens + item.outputTokens,
+    cacheRead: acc.cacheRead + item.cacheRead
+  }), {
+    requests: 0,
+    totalTokens: 0,
+    inputTokens: 0,
+    outputTokens: 0,
+    cacheRead: 0
+  });
+  const rows = items.map((item) => [
+    item.day,
+    String(item.requests),
+    formatTokens(item.totalTokens),
+    formatTokens(item.inputTokens),
+    formatTokens(item.outputTokens),
+    formatTokens(item.cacheRead)
+  ]);
+  return [
+    "\u2550\u2550\u2550 Daily Breakdown \u2550\u2550\u2550",
+    table([
+      { label: "Day", align: "left" },
+      { label: "Req", align: "right" },
+      { label: "Total", align: "right" },
+      { label: "In", align: "right" },
+      { label: "Out", align: "right" },
+      { label: "Cache", align: "right" }
+    ], rows, [
+      "TOTAL",
+      String(total.requests),
+      formatTokens(total.totalTokens),
+      formatTokens(total.inputTokens),
+      formatTokens(total.outputTokens),
+      formatTokens(total.cacheRead)
+    ])
+  ].join("\n");
+}
+function formatSessionBreakdown(items) {
+  if (items.length === 0) return "\u2550\u2550\u2550 Session Breakdown \u2550\u2550\u2550\n(no data)";
+  const rows = items.map((item) => {
+    const title = truncateByWidth(item.title, 40);
+    return [
+      item.day,
+      item.provider || "-",
+      truncateByWidth(item.model, 20),
+      String(item.requests),
+      formatTokens(item.totalTokens),
+      formatTokens(item.cacheRead),
+      title
+    ];
+  });
+  return [
+    "\u2550\u2550\u2550 Session Breakdown \u2550\u2550\u2550",
+    table([
+      { label: "Day", align: "left" },
+      { label: "Provider", align: "left" },
+      { label: "Model", align: "left" },
+      { label: "Req", align: "right" },
+      { label: "Total", align: "right" },
+      { label: "Cache", align: "right" },
+      { label: "Title", align: "left" }
+    ], rows)
+  ].join("\n");
+}
+function formatUsageReport(report) {
+  return [
+    `Filters: ${formatFilters(report.filters)}`,
+    "",
+    formatSessionSummary(report.summary, "Usage Summary"),
+    "",
+    formatModelBreakdown(report.models),
+    "",
+    formatProviderBreakdown(report.providers),
+    "",
+    formatDailyBreakdown(report.daily),
+    "",
+    formatSessionBreakdown(report.sessions)
+  ].join("\n");
+}
+
+// src/kernel/i18n.ts
+var zh = {
+  panelTitle: "TokenWatch",
+  collapse: "\u6298\u53E0",
+  expand: "\u5C55\u5F00",
+  sessionSummary: "\u4F1A\u8BDD\u7D2F\u8BA1",
+  input: "\u8F93\u5165",
+  output: "\u8F93\u51FA",
+  cacheRead: "\u7F13\u5B58",
+  cacheWrite: "\u7F13\u5B58\u5199",
+  cacheMiss: "\u672A\u547D\u4E2D",
+  hitRate: "\u547D\u4E2D\u7387",
+  requests: "\u8BF7\u6C42",
+  cost: "\u6210\u672C",
+  trendUp: "\u2191",
+  trendDown: "\u2193",
+  cache: "\u7F13\u5B58",
+  lat: "\u5EF6\u8FDF",
+  performance: "\u6027\u80FD",
+  pricing: "Pricing",
+  tokenDistribution: "Token\u5206\u5E03",
+  modelLabel: "\u6A21\u578B",
+  provider: "\u63D0\u4F9B\u5546",
+  ttft: "TTFT",
+  tps: "TPS",
+  latency: "\u5EF6\u8FDF",
+  avg: "\u5E73\u5747",
+  max: "\u6700\u5927",
+  min: "\u6700\u5C0F",
+  read: "\u8BFB",
+  write: "\u5199",
+  sessionAccumulated: "Session\u7D2F\u8BA1",
+  saving: "\u8282\u7701",
+  priceInput: "\u8F93\u5165",
+  priceCacheRead: "\u7F13\u5B58\u8BFB",
+  priceCacheWrite: "\u7F13\u5B58\u5199",
+  priceOutput: "\u8F93\u51FA",
+  total: "\u603B\u8BA1",
+  system: "\u7CFB\u7EDF\u63D0\u793A",
+  user: "\u7528\u6237",
+  other: "\u5176\u4ED6",
+  toolCall: "Tool\u8C03\u7528",
+  toolResult: "Tool\u7ED3\u679C",
+  outputTokens: "\u8F93\u51FA",
+  showPerformance: "\u663E\u793A\u6027\u80FD\u6307\u6807",
+  showPricing: "\u663E\u793A\u6A21\u578B\u5B9A\u4EF7",
+  showTokenDistribution: "\u663E\u793AToken\u5206\u5E03",
+  showTrend: "\u663E\u793A\u8D8B\u52BF\u6307\u793A\u5668",
+  language: "\u8BED\u8A00",
+  auto: "\u81EA\u52A8",
+  cmdTitleHtml: "HTML\u62A5\u544A",
+  cmdDescHtml: "\u751F\u6210\u4EA4\u4E92\u5F0FHTML\u4EEA\u8868\u76D8\uFF0C\u5C55\u793AToken\u7528\u91CF\u3001\u7F13\u5B58\u548C\u6027\u80FD\u56FE\u8868",
+  cmdTitleJson: "JSON\u5BFC\u51FA",
+  cmdDescJson: "\u5BFC\u51FA\u539F\u59CB\u7528\u91CF\u6570\u636E\u4E3AJSON\u6587\u4EF6",
+  cmdTitleText: "\u6587\u672C\u62A5\u544A",
+  cmdDescText: "\u751F\u6210\u7EAF\u6587\u672C\u62A5\u544A\u6587\u4EF6",
+  cmdTitleSettings: "\u8BBE\u7F6E",
+  cmdDescSettings: "\u914D\u7F6E\u4FA7\u8FB9\u680F\u663E\u793A\u9009\u9879",
+  descShowPerformance: "\u5728\u4FA7\u8FB9\u680F\u663E\u793ATPS\u3001TTFT\u3001\u5EF6\u8FDF\u7B49\u6307\u6807",
+  descShowPricing: "\u5728\u4FA7\u8FB9\u680F\u663E\u793A\u6210\u672C\u4F30\u7B97",
+  descShowTokenDistribution: "\u5728\u4FA7\u8FB9\u680F\u663E\u793A\u8F93\u5165/\u8F93\u51FA/\u63A8\u7406Token\u7EC6\u5206",
+  descShowTrend: "\u5728\u4FA7\u8FB9\u680F\u663E\u793AToken\u7528\u91CF\u8D8B\u52BF",
+  settingsLanguage: "\u8BED\u8A00",
+  descSettingsLanguage: "\u5207\u6362\u663E\u793A\u8BED\u8A00",
+  settingsTitle: "TokenWatch\u8BBE\u7F6E",
+  settingsPlaceholder: "\u5207\u6362\u8BBE\u7F6E\u9879...",
+  langAuto: "\u81EA\u52A8",
+  done: "\u5B8C\u6210",
+  closeSettings: "\u5173\u95ED\u8BBE\u7F6E",
+  menuToday: "\u4ECA\u5929",
+  menu7d: "\u6700\u8FD1 7 \u5929",
+  menu30d: "\u6700\u8FD1 30 \u5929",
+  menuAll: "\u5168\u90E8\u65F6\u95F4",
+  noticeFirstScan: "\u9996\u6B21\u7EDF\u8BA1\u9700\u904D\u5386\u5168\u90E8\u5386\u53F2\u4F1A\u8BDD\uFF0C\u53EF\u80FD\u8017\u65F6\u6570\u79D2\uFF0C\u8BF7\u7A0D\u5019\u2026",
+  noticeSkippedSessions: "TokenWatch\uFF1A{n} \u4E2A\u4F1A\u8BDD\u7684\u6D88\u606F\u52A0\u8F7D\u5931\u8D25\uFF0C\u5DF2\u8DF3\u8FC7\uFF0C\u62A5\u544A\u6570\u5B57\u53EF\u80FD\u504F\u5C0F",
+  noticeScanTruncatedSessions: "TokenWatch\uFF1A\u4F1A\u8BDD\u6570\u8D85\u51FA\u626B\u63CF\u4E0A\u9650\uFF0C\u62A5\u544A\u4EC5\u5305\u542B\u6700\u8FD1\u7684\u4F1A\u8BDD",
+  noticeScanTruncatedMessages: "TokenWatch\uFF1A{n} \u4E2A\u4F1A\u8BDD\u7684\u6D88\u606F\u6570\u8D85\u51FA\u4E0A\u9650\uFF0C\u5176\u66F4\u65E9\u7684\u6D88\u606F\u672A\u8BA1\u5165",
+  toastReportSaved: "\u62A5\u544A\u5DF2\u4FDD\u5B58",
+  toastJsonSaved: "JSON \u5DF2\u5BFC\u51FA",
+  toastError: "\u51FA\u9519"
+};
+var en = {
+  panelTitle: "TokenWatch",
+  collapse: "Collapse",
+  expand: "Expand",
+  sessionSummary: "Session",
+  input: "Input",
+  output: "Output",
+  cacheRead: "Cache",
+  cacheWrite: "C.Write",
+  cacheMiss: "Cache Miss",
+  hitRate: "Hit Rate",
+  requests: "Req",
+  cost: "Cost",
+  trendUp: "\u2191",
+  trendDown: "\u2193",
+  cache: "Cache",
+  lat: "Lat",
+  performance: "Performance",
+  pricing: "Pricing",
+  tokenDistribution: "Token Distribution",
+  modelLabel: "Model",
+  provider: "Provider",
+  ttft: "TTFT",
+  tps: "TPS",
+  latency: "Latency",
+  avg: "Avg",
+  max: "Max",
+  min: "Min",
+  read: "Read",
+  write: "Write",
+  sessionAccumulated: "Session Accumulated",
+  saving: "Saving",
+  priceInput: "Input",
+  priceCacheRead: "Cache Read",
+  priceCacheWrite: "Cache Write",
+  priceOutput: "Output",
+  total: "Total",
+  system: "System",
+  user: "User",
+  other: "Other",
+  toolCall: "Tool Call",
+  toolResult: "Tool Result",
+  outputTokens: "Output",
+  showPerformance: "Show Performance",
+  showPricing: "Show Pricing",
+  showTokenDistribution: "Show Token Distribution",
+  showTrend: "Show Trend",
+  language: "Language",
+  auto: "Auto",
+  cmdTitleHtml: "HTML Report",
+  cmdDescHtml: "Generate interactive HTML dashboard with token usage, cache, and performance charts",
+  cmdTitleJson: "JSON Export",
+  cmdDescJson: "Export raw usage data as JSON file",
+  cmdTitleText: "Text Report",
+  cmdDescText: "Generate plain text report file",
+  cmdTitleSettings: "Settings",
+  cmdDescSettings: "Configure sidebar display options",
+  descShowPerformance: "Display TPS, TTFT, latency metrics in sidebar",
+  descShowPricing: "Display cost estimates in sidebar",
+  descShowTokenDistribution: "Display input/output/reasoning token breakdown in sidebar",
+  descShowTrend: "Display token usage trend in sidebar",
+  settingsLanguage: "Language",
+  descSettingsLanguage: "Switch display language",
+  settingsTitle: "TokenWatch Settings",
+  settingsPlaceholder: "Toggle settings...",
+  langAuto: "Auto",
+  done: "Done",
+  closeSettings: "Close settings",
+  menuToday: "Today",
+  menu7d: "Last 7 Days",
+  menu30d: "Last 30 Days",
+  menuAll: "All Time",
+  noticeFirstScan: "First run scans all historical sessions, this may take a few seconds\u2026",
+  noticeSkippedSessions: "TokenWatch: {n} session(s) failed to load and were skipped; report totals may be understated",
+  noticeScanTruncatedSessions: "TokenWatch: session count exceeded the scan cap; only the most recent sessions are included",
+  noticeScanTruncatedMessages: "TokenWatch: {n} session(s) exceeded the message cap; their older messages are not included",
+  toastReportSaved: "Report saved",
+  toastJsonSaved: "JSON exported",
+  toastError: "Error"
+};
+var currentLang = detectLanguage();
+function detectLanguage() {
+  try {
+    const locale = Intl.DateTimeFormat().resolvedOptions().locale;
+    if (locale.startsWith("zh")) return "zh";
+  } catch {
+  }
+  return "en";
+}
+function setLanguage(lang) {
+  if (lang === "auto") {
+    currentLang = detectLanguage();
+  } else {
+    currentLang = lang;
+  }
+}
+function t(key) {
+  const table2 = currentLang === "zh" ? zh : en;
+  return table2[key] ?? key;
+}
+
+// src/kernel/config.ts
+var DEFAULT_CONFIG = {
+  sidebar: { showPerformance: true, showPricing: true, showTokenDistribution: true, showTrend: true },
+  language: "auto"
+};
+var KEY_CONFIG = "tokenwatch-config";
+var KEY_VERSION = "tokenwatch-config-version";
+function cloneDefaults() {
+  return { sidebar: { ...DEFAULT_CONFIG.sidebar }, language: DEFAULT_CONFIG.language };
+}
+function loadConfig(store, pluginConfig) {
+  const base = cloneDefaults();
+  try {
+    const pluginCfg = pluginConfig?.["opencode-tokenwatch"];
+    if (pluginCfg?.sidebar) Object.assign(base.sidebar, pluginCfg.sidebar);
+    if (pluginCfg?.language) base.language = pluginCfg.language;
+    const overrides = store.get(KEY_CONFIG, void 0);
+    if (overrides?.sidebar) Object.assign(base.sidebar, overrides.sidebar);
+    if (overrides?.language) base.language = overrides.language;
+  } catch {
+  }
+  return base;
+}
+function saveConfig(store, cfg) {
+  store.set(KEY_CONFIG, cfg);
+  bumpVersion(store);
+}
+function bumpVersion(store) {
+  const v = (store.get(KEY_VERSION, 0) ?? 0) + 1;
+  store.set(KEY_VERSION, v);
+}
+function toggleSidebarSetting(store, key) {
+  const current = loadConfig(store);
+  current.sidebar[key] = !current.sidebar[key];
+  saveConfig(store, current);
+  return current;
+}
+function setLanguageSetting(store, language) {
+  const current = loadConfig(store);
+  current.language = language;
+  saveConfig(store, current);
+  return current;
+}
+
+// src/ui/sidebar.tsx
+function progressBarWidth(percent, width) {
+  if (percent >= 100) return width;
+  return Math.floor(percent / 100 * width);
+}
+function progressFilled(percent, width) {
+  return "\u2588".repeat(Math.max(0, progressBarWidth(percent, width)));
+}
+function progressRemaining(percent, width) {
+  return "\u2591".repeat(Math.max(0, width - progressBarWidth(percent, width)));
+}
+function getVisualWidth2(str) {
+  let w = 0;
+  for (const c of str) {
+    const code = c.codePointAt(0) ?? 0;
+    if (code >= 19968 && code <= 40959 || code >= 12352 && code <= 12543 || code >= 44032 && code <= 55203 || code >= 4352 && code <= 4607 || code >= 11904 && code <= 12031) {
+      w += 2;
+    } else {
+      w += 1;
+    }
+  }
+  return w;
+}
+function centerAlign(text, width) {
+  const visualW = getVisualWidth2(text);
+  if (visualW >= width) return text;
+  const left = Math.floor((width - visualW) / 2);
+  const right = width - visualW - left;
+  return " ".repeat(left) + text + " ".repeat(right);
+}
+function hitRateColor(rate) {
+  if (rate >= 85) return RGBA.fromInts(76, 175, 80, 255);
+  if (rate >= 70) return RGBA.fromInts(255, 193, 7, 255);
+  return RGBA.fromInts(244, 67, 54, 255);
+}
+function distRoleColor(role) {
+  const map = {
+    system: RGBA.fromInts(130, 80, 255, 255),
+    user: RGBA.fromInts(88, 166, 255, 255),
+    toolCall: RGBA.fromInts(210, 153, 34, 255),
+    toolResult: RGBA.fromInts(219, 109, 40, 255),
+    output: RGBA.fromInts(63, 185, 80, 255),
+    other: RGBA.fromInts(72, 79, 88, 255)
+  };
+  return map[role] ?? RGBA.fromInts(72, 79, 88, 255);
+}
+function estimateTokens(text) {
+  if (!text || text.length === 0) return 0;
+  let ascii = 0, cjk = 0;
+  for (const c of text) {
+    const code = c.codePointAt(0) ?? 0;
+    if (code >= 19968 && code <= 40959 || code >= 12352 && code <= 12543 || code >= 44032 && code <= 55203 || code >= 4352 && code <= 4607 || code >= 11904 && code <= 12031) cjk++;
+    else ascii++;
+  }
+  const trimmed = text.trimStart();
+  const jsonLike = (trimmed.startsWith("{") || trimmed.startsWith("[")) && /"[^"]+"\s*:/.test(text);
+  const codeLike = !jsonLike && /```|^import |^export |^function |^const |^let |^var |^class |^interface |^type |^def |^fn |^pub |^use |^mod |^package /m.test(text);
+  const asciiPerToken = jsonLike ? 2 : codeLike ? 2.5 : 4;
+  return Math.max(1, Math.ceil(ascii / asciiPerToken + cjk / 1.5));
+}
+function loadCollapseState(store) {
+  try {
+    return store.get("tokenwatch-collapse", {
+      global: false,
+      models: {},
+      subBlocks: {}
+    });
+  } catch {
+    return {
+      global: false,
+      models: {},
+      subBlocks: {}
+    };
+  }
+}
+function saveCollapseState(store, state) {
+  try {
+    store.set("tokenwatch-collapse", state);
+  } catch {
+  }
+}
+function TokenWatchPanel(props) {
+  const {
+    host,
+    perfTracker
+  } = props;
+  const store = host.store;
+  const theme = () => host.theme();
+  const getMessages = () => props.messages();
+  const [config, setConfig] = createSignal(loadConfig(store, host.appConfig()));
+  setLanguage(config().language);
+  let knownCfgVer = store.get("tokenwatch-config-version", void 0);
+  const t2 = (key) => {
+    void config().language;
+    return t(key);
+  };
+  const isEnglish = (str) => /^[a-zA-Z\s\.\/]+$/.test(str);
+  createEffect(() => {
+    const timer = setInterval(() => {
+      const v = store.get("tokenwatch-config-version", void 0);
+      if (v != null && v !== knownCfgVer) {
+        knownCfgVer = v;
+        setConfig(loadConfig(store, host.appConfig()));
+      }
+    }, 500);
+    onCleanup(() => clearInterval(timer));
+  });
+  const [collapse, setCollapse] = createSignal(loadCollapseState(store));
+  const [panelWidth, setPanelWidth] = createSignal(38);
+  let outerBoxRef = null;
+  createEffect(() => setLanguage(config().language));
+  const primaryColor = () => theme().primary;
+  const mutedColor = () => theme().textMuted;
+  const dimColor = () => RGBA.fromInts(72, 79, 88, 255);
+  const greenColor = () => RGBA.fromInts(63, 185, 80, 255);
+  const borderColor = () => RGBA.fromInts(55, 65, 80, 255);
+  const modelStats = createMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    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,
+          lastMessageIndex: -1
+        };
+        map.set(key, e);
+      }
+      e.totalInput += msg.inputTokens;
+      e.totalOutput += msg.outputTokens;
+      e.totalReasoning += msg.reasoningTokens;
+      e.cacheRead += msg.cacheRead;
+      e.cacheWrite += msg.cacheWrite;
+      e.totalCost += msg.cost;
+      e.requestCount++;
+      e.lastMessageIndex = i;
+    }
+    return Array.from(map.entries()).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;
+    for (const [, s] of modelStats()) {
+      i += s.totalInput;
+      o += s.totalOutput;
+      ir += s.totalReasoning;
+      cr += s.cacheRead;
+      cw += s.cacheWrite;
+      r += s.requestCount;
+      c += s.totalCost;
+    }
+    return {
+      totalInput: i,
+      totalOutput: o,
+      totalReasoning: ir,
+      totalCacheRead: cr,
+      totalCacheWrite: cw,
+      totalRequests: r,
+      totalCost: c,
+      totalTokens: i + o + ir + cr + cw
+    };
+  });
+  const globalHitRate = createMemo(() => {
+    const denom = sessionTotals().totalInput + sessionTotals().totalCacheRead;
+    return denom > 0 ? sessionTotals().totalCacheRead / denom * 100 : -1;
+  });
+  const modelHitRate = createMemo(() => {
+    return modelStats().map(([key, stat]) => {
+      const denom = stat.totalInput + stat.cacheRead;
+      if (denom === 0) return {
+        key,
+        rate: 0,
+        msgs: []
+      };
+      const msgs = [];
+      for (const msg of props.allTokenMessages()) {
+        const pk = `${msg.providerID}/${msg.modelID}`;
+        if (pk !== key) continue;
+        msgs.push(msg);
+      }
+      return {
+        key,
+        rate: stat.cacheRead / denom * 100,
+        msgs
+      };
+    });
+  });
+  const modelTrend = createMemo(() => {
+    return modelHitRate().map(({
+      key,
+      msgs
+    }) => {
+      if (msgs.length < 6) return {
+        key,
+        trend: null
+      };
+      const sumSlice = (start, end) => {
+        let sumCache = 0, sumTotal = 0;
+        for (let i = start; i < end && i < msgs.length; i++) {
+          sumCache += msgs[i].cacheRead;
+          sumTotal += msgs[i].inputTokens + msgs[i].cacheRead;
+        }
+        return {
+          sumCache,
+          sumTotal
+        };
+      };
+      const n = msgs.length;
+      const recent = sumSlice(n - 3, n);
+      const prev = sumSlice(n - 6, n - 3);
+      const rateRecent = recent.sumTotal > 0 ? recent.sumCache / recent.sumTotal * 100 : 0;
+      const ratePrev = prev.sumTotal > 0 ? prev.sumCache / prev.sumTotal * 100 : 0;
+      return {
+        key,
+        trend: rateRecent - ratePrev
+      };
+    });
+  });
+  const [partVersion, setPartVersion] = createSignal(0);
+  const perfStats = createMemo(() => {
+    props.perfRevision?.();
+    void props.allTokenMessages();
+    return perfTracker.getSessionStats();
+  });
+  const tokenDistribution = createMemo(() => {
+    void props.allTokenMessages();
+    void partVersion();
+    const dist = {};
+    try {
+      const cfg = host.appConfig();
+      const agents = cfg?.agent;
+      if (agents) {
+        for (const ac of Object.values(agents)) {
+          const a = ac;
+          if (typeof a?.prompt === "string" && a.prompt) {
+            dist.system = estimateTokens(a.prompt);
+            break;
+          }
+        }
+      }
+    } catch {
+    }
+    for (const msg of getMessages()) {
+      const role = msg.type ?? msg.role;
+      if (role === "user") {
+        if (msg.system) dist.system = (dist.system ?? 0) + estimateTokens(msg.system);
+        let parts = [];
+        try {
+          parts = props.messageParts(msg.id);
+        } catch {
+          continue;
+        }
+        for (const p of parts) {
+          if (p.type === "text" && !p.synthetic && !p.ignored) {
+            dist.user = (dist.user ?? 0) + estimateTokens(p.text ?? "");
+          } else if (p.type === "file" && p.source?.text?.value) {
+            dist.user = (dist.user ?? 0) + estimateTokens(p.source.text.value);
+          }
+        }
+      } else if (role === "assistant") {
+        let parts = [];
+        try {
+          parts = props.messageParts(msg.id);
+        } catch {
+          continue;
+        }
+        let msgEstimatedOutput = 0;
+        for (const p of parts) {
+          if (p.type === "tool") {
+            let rawInput = "";
+            try {
+              rawInput = p.state?.raw ?? JSON.stringify(p.state?.input);
+            } catch {
+              try {
+                rawInput = JSON.stringify(p.state);
+              } catch {
+              }
+            }
+            if (rawInput) dist.toolCall = (dist.toolCall ?? 0) + estimateTokens(rawInput);
+            if (p.state?.status === "completed" && p.state?.output) {
+              dist.toolResult = (dist.toolResult ?? 0) + estimateTokens(p.state.output);
+            } else if (p.state?.status === "error" && p.state?.error) {
+              dist.toolResult = (dist.toolResult ?? 0) + estimateTokens(p.state.error);
+            }
+          } else if (p.type === "text" && p.text) {
+            msgEstimatedOutput += estimateTokens(p.text);
+          } else if (p.type === "reasoning") {
+            msgEstimatedOutput += estimateTokens(p.text ?? "");
+          } else if (p.type === "subtask") {
+            msgEstimatedOutput += estimateTokens(p.prompt || p.description || "");
+          }
+        }
+        const tokens = msg.tokens;
+        if (tokens?.output !== void 0 || tokens?.reasoning !== void 0) {
+          dist.output = (dist.output ?? 0) + (tokens?.output ?? 0) + (tokens?.reasoning ?? 0);
+        } else {
+          dist.output = (dist.output ?? 0) + msgEstimatedOutput;
+        }
+      }
+    }
+    const realInput = sessionTotals().totalInput;
+    if (realInput > 0) {
+      const estimated = (dist.system ?? 0) + (dist.user ?? 0) + (dist.toolCall ?? 0) + (dist.toolResult ?? 0);
+      const other = realInput - estimated;
+      if (other > 50) dist.other = other;
+    }
+    return dist;
+  });
+  const toggle = {
+    global: () => setCollapse((p) => {
+      const n = {
+        ...p,
+        global: !p.global
+      };
+      saveCollapseState(store, n);
+      return n;
+    }),
+    model: (k) => setCollapse((p) => {
+      const n = {
+        ...p,
+        models: {
+          ...p.models,
+          [k]: !p.models[k]
+        }
+      };
+      saveCollapseState(store, n);
+      return n;
+    }),
+    sub: (k) => setCollapse((p) => {
+      const n = {
+        ...p,
+        subBlocks: {
+          ...p.subBlocks,
+          [k]: !p.subBlocks[k]
+        }
+      };
+      saveCollapseState(store, n);
+      return n;
+    })
+  };
+  onMount(() => {
+    let lastBump = 0;
+    let pendingTimer = null;
+    const bump = () => {
+      lastBump = Date.now();
+      setPartVersion((v) => v + 1);
+    };
+    const unsubPart = host.onPartUpdated(() => {
+      const elapsed = Date.now() - lastBump;
+      if (elapsed >= 500) {
+        bump();
+        return;
+      }
+      if (!pendingTimer) {
+        pendingTimer = setTimeout(() => {
+          pendingTimer = null;
+          bump();
+        }, 500 - elapsed);
+      }
+    });
+    onCleanup(() => {
+      if (pendingTimer) clearTimeout(pendingTimer);
+      try {
+        unsubPart?.();
+      } catch {
+      }
+    });
+  });
+  const innerWidth = () => panelWidth() - 2;
+  const barWidth = () => Math.max(8, innerWidth() - 19);
+  const divider = () => {
+    const w = innerWidth();
+    if (w <= 2) return "\u2500".repeat(w);
+    return " " + "\u2500".repeat(w - 2) + " ";
+  };
+  return (() => {
+    var _el$ = _$createElement("box"), _el$2 = _$createElement("box"), _el$3 = _$createElement("text"), _el$4 = _$createTextNode(` `), _el$5 = _$createElement("text");
+    _$insertNode(_el$, _el$2);
+    _$use((el) => {
+      outerBoxRef = el;
+    }, _el$);
+    _$setProp(_el$, "onSizeChange", () => {
+      if (outerBoxRef) setPanelWidth(outerBoxRef.width);
+    });
+    _$setProp(_el$, "flexDirection", "column");
+    _$setProp(_el$, "border", true);
+    _$setProp(_el$, "borderStyle", "rounded");
+    _$insertNode(_el$2, _el$3);
+    _$insertNode(_el$2, _el$5);
+    _$setProp(_el$2, "flexDirection", "row");
+    _$setProp(_el$2, "justifyContent", "space-between");
+    _$setProp(_el$2, "paddingX", 1);
+    _$insertNode(_el$3, _el$4);
+    _$insert(_el$3, () => collapse().global ? "\u25B6" : "\u25BE", _el$4);
+    _$insert(_el$3, () => t2("panelTitle"), null);
+    _$insert(_el$5, (() => {
+      var _c$ = _$memo(() => !!collapse().global);
+      return () => _c$() ? [_$memo(() => formatTokens(sessionTotals().totalTokens)), _$memo(() => _$memo(() => globalHitRate() >= 0)() ? (() => {
+        var _el$17 = _$createElement("span");
+        _$insert(_el$17, () => ` (${globalHitRate().toFixed(1)}% hit)`);
+        _$effect((_$p) => _$setProp(_el$17, "style", {
+          fg: hitRateColor(globalHitRate())
+        }, _$p));
+        return _el$17;
+      })() : "")] : _$memo(() => globalHitRate() >= 0)() ? (() => {
+        var _el$18 = _$createElement("span");
+        _$insert(_el$18, () => `${globalHitRate().toFixed(1)}% hit`);
+        _$effect((_$p) => _$setProp(_el$18, "style", {
+          fg: hitRateColor(globalHitRate())
+        }, _$p));
+        return _el$18;
+      })() : "";
+    })());
+    _$insert(_el$, _$createComponent(Show, {
+      get when() {
+        return !collapse().global;
+      },
+      get children() {
+        return [(() => {
+          var _el$6 = _$createElement("text");
+          _$insert(_el$6, divider);
+          _$effect((_$p) => _$setProp(_el$6, "fg", borderColor(), _$p));
+          return _el$6;
+        })(), (() => {
+          var _el$7 = _$createElement("box");
+          _$setProp(_el$7, "flexDirection", "row");
+          _$setProp(_el$7, "paddingX", 1);
+          _$insert(_el$7, _$createComponent(For, {
+            get each() {
+              return [{
+                val: formatTokens(sessionTotals().totalTokens),
+                lbl: t2("total")
+              }, {
+                val: sessionTotals().totalRequests.toString(),
+                lbl: t2("requests")
+              }, {
+                val: formatTokens(sessionTotals().totalInput),
+                lbl: t2("input")
+              }, {
+                val: formatTokens(sessionTotals().totalOutput),
+                lbl: t2("output")
+              }];
+            },
+            children: (item, idx) => {
+              const colW = () => {
+                const totalW = panelWidth() - 4;
+                const base = Math.floor(totalW / 4);
+                return idx() === 3 ? totalW - base * 3 : base;
+              };
+              return (() => {
+                var _el$19 = _$createElement("box"), _el$20 = _$createElement("text"), _el$21 = _$createElement("text");
+                _$insertNode(_el$19, _el$20);
+                _$insertNode(_el$19, _el$21);
+                _$setProp(_el$19, "flexDirection", "column");
+                _$insert(_el$20, () => centerAlign(item.val, colW()));
+                _$insert(_el$21, () => centerAlign(isEnglish(item.lbl) ? item.lbl.toUpperCase() : item.lbl, colW()));
+                _$effect((_p$) => {
+                  var _v$9 = colW(), _v$0 = primaryColor(), _v$1 = dimColor();
+                  _v$9 !== _p$.e && (_p$.e = _$setProp(_el$19, "width", _v$9, _p$.e));
+                  _v$0 !== _p$.t && (_p$.t = _$setProp(_el$20, "fg", _v$0, _p$.t));
+                  _v$1 !== _p$.a && (_p$.a = _$setProp(_el$21, "fg", _v$1, _p$.a));
+                  return _p$;
+                }, {
+                  e: void 0,
+                  t: void 0,
+                  a: void 0
+                });
+                return _el$19;
+              })();
+            }
+          }));
+          return _el$7;
+        })(), _$createComponent(Show, {
+          get when() {
+            return _$memo(() => !!config().sidebar.showPricing)() && sessionTotals().totalCost > 0;
+          },
+          get children() {
+            var _el$8 = _$createElement("box"), _el$9 = _$createElement("text"), _el$0 = _$createTextNode(`: `), _el$10 = _$createElement("span");
+            _$insertNode(_el$8, _el$9);
+            _$setProp(_el$8, "flexDirection", "row");
+            _$setProp(_el$8, "justifyContent", "center");
+            _$setProp(_el$8, "marginTop", 1);
+            _$insertNode(_el$9, _el$0);
+            _$insertNode(_el$9, _el$10);
+            _$insert(_el$9, () => t2("cost"), _el$0);
+            _$insert(_el$10, () => formatCost(sessionTotals().totalCost));
+            _$effect((_p$) => {
+              var _v$ = mutedColor(), _v$2 = {
+                fg: greenColor()
+              };
+              _v$ !== _p$.e && (_p$.e = _$setProp(_el$9, "fg", _v$, _p$.e));
+              _v$2 !== _p$.t && (_p$.t = _$setProp(_el$10, "style", _v$2, _p$.t));
+              return _p$;
+            }, {
+              e: void 0,
+              t: void 0
+            });
+            return _el$8;
+          }
+        }), _$createComponent(For, {
+          get each() {
+            return modelStats();
+          },
+          children: ([key, stat]) => {
+            const isExpanded = () => collapse().models[key] !== true;
+            const hitDenom = stat.totalInput + stat.cacheRead;
+            const hitRate = hitDenom > 0 ? stat.cacheRead / hitDenom * 100 : 0;
+            const trendStr = () => {
+              if (!config().sidebar.showTrend) return "";
+              const td = modelTrend().find((h) => h.key === key);
+              if (!td?.trend || td.trend === 0) return "";
+              return td.trend > 0 ? ` ${t2("trendUp")}${td.trend.toFixed(1)}%` : ` ${t2("trendDown")}${Math.abs(td.trend).toFixed(1)}%`;
+            };
+            const trendColor = () => {
+              const td = modelTrend().find((h) => h.key === key);
+              return (td?.trend ?? 0) >= 0 ? RGBA.fromInts(63, 185, 80, 255) : RGBA.fromInts(244, 67, 54, 255);
+            };
+            const MAX_PROVIDER_LEN = 12;
+            let providerDisplay = stat.providerID;
+            if (providerDisplay.length > MAX_PROVIDER_LEN) {
+              providerDisplay = providerDisplay.slice(0, MAX_PROVIDER_LEN - 1) + "\u2026";
+            }
+            let fullTitle = `${providerDisplay}/${stat.modelID}`;
+            if (fullTitle.length > 22) {
+              const parts = fullTitle.split("/");
+              if (parts.length >= 3) {
+                fullTitle = `${parts[0]}/${parts[parts.length - 1]}`;
+              }
+            }
+            const maxNameLen = Math.max(8, innerWidth() - 12);
+            const shortTitle = fullTitle.length > maxNameLen ? fullTitle.slice(0, maxNameLen - 1) + "\u2026" : fullTitle;
+            const modelHeaderRight = () => {
+              if (!isExpanded()) {
+                const total = stat.totalInput + stat.totalOutput + stat.totalReasoning + stat.cacheRead + stat.cacheWrite;
+                return `${formatTokens(total)} \u25B6`;
+              }
+              return `\xD7${stat.requestCount} \u25BE`;
+            };
+            const modelTotalTokens = stat.totalInput + stat.totalOutput + stat.totalReasoning + stat.cacheRead + stat.cacheWrite;
+            const targetW = () => {
+              const cacheLabel = t2("cache") + ":";
+              const costLabel = t2("cost") + ":";
+              return Math.max(getVisualWidth2(cacheLabel), getVisualWidth2(costLabel));
+            };
+            const paddedCachePrefix = () => {
+              const label = t2("cache") + ":";
+              return label + " ".repeat(targetW() - getVisualWidth2(label));
+            };
+            const paddedCostPrefix = () => {
+              const label = t2("cost") + ":";
+              return label + " ".repeat(targetW() - getVisualWidth2(label));
+            };
+            const modelBarWidth = () => Math.max(8, panelWidth() - 4 - targetW() - 11);
+            return (
+              // marginTop=1 提供模型间视觉间距（TUI最小单位为1行）
+              (() => {
+                var _el$22 = _$createElement("box"), _el$23 = _$createElement("box"), _el$24 = _$createElement("text"), _el$25 = _$createElement("span"), _el$27 = _$createTextNode(` `), _el$28 = _$createElement("span"), _el$29 = _$createElement("text");
+                _$insertNode(_el$22, _el$23);
+                _$setProp(_el$22, "flexDirection", "column");
+                _$setProp(_el$22, "marginTop", 1);
+                _$insertNode(_el$23, _el$24);
+                _$insertNode(_el$23, _el$29);
+                _$setProp(_el$23, "flexDirection", "row");
+                _$setProp(_el$23, "justifyContent", "space-between");
+                _$setProp(_el$23, "onMouseDown", () => toggle.model(key));
+                _$setProp(_el$23, "paddingX", 1);
+                _$insertNode(_el$24, _el$25);
+                _$insertNode(_el$24, _el$27);
+                _$insertNode(_el$24, _el$28);
+                _$insertNode(_el$25, _$createTextNode(`\u25CF`));
+                _$insert(_el$28, shortTitle);
+                _$insert(_el$29, modelHeaderRight);
+                _$insert(_el$22, _$createComponent(Show, {
+                  get when() {
+                    return isExpanded();
+                  },
+                  get children() {
+                    var _el$30 = _$createElement("box"), _el$31 = _$createElement("box"), _el$32 = _$createElement("box"), _el$33 = _$createElement("text"), _el$34 = _$createElement("span"), _el$35 = _$createTextNode(` `), _el$36 = _$createTextNode(`%`);
+                    _$insertNode(_el$30, _el$31);
+                    _$insertNode(_el$30, _el$33);
+                    _$setProp(_el$30, "flexDirection", "column");
+                    _$setProp(_el$30, "paddingX", 1);
+                    _$insertNode(_el$31, _el$32);
+                    _$setProp(_el$31, "flexDirection", "column");
+                    _$setProp(_el$31, "border", true);
+                    _$setProp(_el$31, "borderStyle", "rounded");
+                    _$setProp(_el$32, "flexDirection", "row");
+                    _$insert(_el$32, _$createComponent(For, {
+                      get each() {
+                        return [{
+                          val: formatTokens(modelTotalTokens),
+                          lbl: t2("total")
+                        }, {
+                          val: formatTokens(stat.totalInput),
+                          lbl: t2("input")
+                        }, {
+                          val: formatTokens(stat.totalOutput),
+                          lbl: t2("output")
+                        }];
+                      },
+                      children: (item, idx) => {
+                        const colW = () => {
+                          const totalW = panelWidth() - 6;
+                          const base = Math.floor(totalW / 3);
+                          return idx() === 2 ? totalW - base * 2 : base;
+                        };
+                        return (() => {
+                          var _el$46 = _$createElement("box"), _el$47 = _$createElement("text"), _el$48 = _$createElement("text");
+                          _$insertNode(_el$46, _el$47);
+                          _$insertNode(_el$46, _el$48);
+                          _$setProp(_el$46, "flexDirection", "column");
+                          _$insert(_el$47, () => centerAlign(item.val, colW()));
+                          _$insert(_el$48, () => centerAlign(isEnglish(item.lbl) ? item.lbl.toUpperCase() : item.lbl, colW()));
+                          _$effect((_p$) => {
+                            var _v$20 = colW(), _v$21 = primaryColor(), _v$22 = dimColor();
+                            _v$20 !== _p$.e && (_p$.e = _$setProp(_el$46, "width", _v$20, _p$.e));
+                            _v$21 !== _p$.t && (_p$.t = _$setProp(_el$47, "fg", _v$21, _p$.t));
+                            _v$22 !== _p$.a && (_p$.a = _$setProp(_el$48, "fg", _v$22, _p$.a));
+                            return _p$;
+                          }, {
+                            e: void 0,
+                            t: void 0,
+                            a: void 0
+                          });
+                          return _el$46;
+                        })();
+                      }
+                    }));
+                    _$insertNode(_el$33, _el$34);
+                    _$insert(_el$33, paddedCachePrefix, _el$34);
+                    _$insertNode(_el$34, _el$35);
+                    _$insertNode(_el$34, _el$36);
+                    _$insert(_el$34, () => progressFilled(hitRate, modelBarWidth()), _el$35);
+                    _$insert(_el$34, () => progressRemaining(hitRate, modelBarWidth()), _el$35);
+                    _$insert(_el$34, () => hitRate.toFixed(0), _el$36);
+                    _$insert(_el$33, (() => {
+                      var _c$2 = _$memo(() => !!trendStr());
+                      return () => _c$2() ? (() => {
+                        var _el$49 = _$createElement("span");
+                        _$insert(_el$49, trendStr);
+                        _$effect((_$p) => _$setProp(_el$49, "style", {
+                          fg: trendColor()
+                        }, _$p));
+                        return _el$49;
+                      })() : null;
+                    })(), null);
+                    _$insert(_el$30, _$createComponent(Show, {
+                      get when() {
+                        return _$memo(() => !!config().sidebar.showPerformance)() && !!perfStats().models[key];
+                      },
+                      get children() {
+                        var _el$37 = _$createElement("text"), _el$38 = _$createTextNode(`~`), _el$39 = _$createTextNode(` `), _el$40 = _$createElement("span"), _el$41 = _$createTextNode(`    ~`), _el$43 = _$createTextNode(` `), _el$44 = _$createElement("span");
+                        _$insertNode(_el$37, _el$38);
+                        _$insertNode(_el$37, _el$39);
+                        _$insertNode(_el$37, _el$40);
+                        _$insertNode(_el$37, _el$41);
+                        _$insertNode(_el$37, _el$43);
+                        _$insertNode(_el$37, _el$44);
+                        _$setProp(_el$37, "marginTop", 1);
+                        _$insert(_el$37, () => t2("ttft"), _el$39);
+                        _$insert(_el$40, () => formatDuration(perfStats().models[key]?.avgTTFT ?? null));
+                        _$insert(_el$37, () => t2("tps"), _el$43);
+                        _$insert(_el$44, () => perfStats().models[key]?.avgTPS?.toFixed(1) ?? "\u2014");
+                        _$effect((_p$) => {
+                          var _v$10 = mutedColor(), _v$11 = {
+                            fg: primaryColor()
+                          }, _v$12 = {
+                            fg: primaryColor()
+                          };
+                          _v$10 !== _p$.e && (_p$.e = _$setProp(_el$37, "fg", _v$10, _p$.e));
+                          _v$11 !== _p$.t && (_p$.t = _$setProp(_el$40, "style", _v$11, _p$.t));
+                          _v$12 !== _p$.a && (_p$.a = _$setProp(_el$44, "style", _v$12, _p$.a));
+                          return _p$;
+                        }, {
+                          e: void 0,
+                          t: void 0,
+                          a: void 0
+                        });
+                        return _el$37;
+                      }
+                    }), null);
+                    _$insert(_el$30, _$createComponent(Show, {
+                      get when() {
+                        return _$memo(() => !!config().sidebar.showPricing)() && stat.totalCost > 0;
+                      },
+                      get children() {
+                        var _el$45 = _$createElement("text");
+                        _$insert(_el$45, paddedCostPrefix, null);
+                        _$insert(_el$45, () => formatCost(stat.totalCost), null);
+                        _$effect((_$p) => _$setProp(_el$45, "fg", mutedColor(), _$p));
+                        return _el$45;
+                      }
+                    }), null);
+                    _$effect((_p$) => {
+                      var _v$13 = borderColor(), _v$14 = mutedColor(), _v$15 = {
+                        fg: hitRateColor(hitRate)
+                      };
+                      _v$13 !== _p$.e && (_p$.e = _$setProp(_el$31, "borderColor", _v$13, _p$.e));
+                      _v$14 !== _p$.t && (_p$.t = _$setProp(_el$33, "fg", _v$14, _p$.t));
+                      _v$15 !== _p$.a && (_p$.a = _$setProp(_el$34, "style", _v$15, _p$.a));
+                      return _p$;
+                    }, {
+                      e: void 0,
+                      t: void 0,
+                      a: void 0
+                    });
+                    return _el$30;
+                  }
+                }), null);
+                _$effect((_p$) => {
+                  var _v$16 = mutedColor(), _v$17 = {
+                    fg: hitRateColor(hitRate)
+                  }, _v$18 = {
+                    fg: primaryColor()
+                  }, _v$19 = mutedColor();
+                  _v$16 !== _p$.e && (_p$.e = _$setProp(_el$24, "fg", _v$16, _p$.e));
+                  _v$17 !== _p$.t && (_p$.t = _$setProp(_el$25, "style", _v$17, _p$.t));
+                  _v$18 !== _p$.a && (_p$.a = _$setProp(_el$28, "style", _v$18, _p$.a));
+                  _v$19 !== _p$.o && (_p$.o = _$setProp(_el$29, "fg", _v$19, _p$.o));
+                  return _p$;
+                }, {
+                  e: void 0,
+                  t: void 0,
+                  a: void 0,
+                  o: void 0
+                });
+                return _el$22;
+              })()
+            );
+          }
+        }), _$createComponent(Show, {
+          get when() {
+            return config().sidebar.showTokenDistribution;
+          },
+          get children() {
+            var _el$11 = _$createElement("box"), _el$12 = _$createElement("text"), _el$13 = _$createElement("box"), _el$14 = _$createElement("text"), _el$15 = _$createTextNode(` `);
+            _$insertNode(_el$11, _el$12);
+            _$insertNode(_el$11, _el$13);
+            _$setProp(_el$11, "flexDirection", "column");
+            _$setProp(_el$11, "marginTop", 1);
+            _$insert(_el$12, divider);
+            _$insertNode(_el$13, _el$14);
+            _$setProp(_el$13, "flexDirection", "row");
+            _$setProp(_el$13, "onMouseDown", () => toggle.sub("token-dist"));
+            _$setProp(_el$13, "paddingX", 1);
+            _$insertNode(_el$14, _el$15);
+            _$insert(_el$14, () => !collapse().subBlocks["token-dist"] ? "\u25BE" : "\u25B6", _el$15);
+            _$insert(_el$14, () => t2("tokenDistribution"), null);
+            _$insert(_el$11, _$createComponent(Show, {
+              get when() {
+                return !collapse().subBlocks["token-dist"];
+              },
+              get children() {
+                var _el$16 = _$createElement("box");
+                _$setProp(_el$16, "flexDirection", "column");
+                _$setProp(_el$16, "paddingX", 1);
+                _$setProp(_el$16, "marginTop", 1);
+                _$insert(_el$16, _$createComponent(For, {
+                  get each() {
+                    return Object.entries(tokenDistribution()).filter(([_, val]) => val > 0);
+                  },
+                  children: ([role, val]) => (() => {
+                    var _el$50 = _$createElement("box"), _el$51 = _$createElement("box"), _el$52 = _$createElement("text"), _el$54 = _$createElement("text"), _el$55 = _$createElement("text");
+                    _$insertNode(_el$50, _el$51);
+                    _$insertNode(_el$50, _el$55);
+                    _$setProp(_el$50, "flexDirection", "row");
+                    _$setProp(_el$50, "justifyContent", "space-between");
+                    _$insertNode(_el$51, _el$52);
+                    _$insertNode(_el$51, _el$54);
+                    _$setProp(_el$51, "flexDirection", "row");
+                    _$insertNode(_el$52, _$createTextNode(`\u2588 `));
+                    _$insert(_el$54, () => t2(role));
+                    _$insert(_el$55, () => formatTokens(val));
+                    _$effect((_p$) => {
+                      var _v$23 = distRoleColor(role), _v$24 = mutedColor(), _v$25 = mutedColor();
+                      _v$23 !== _p$.e && (_p$.e = _$setProp(_el$52, "fg", _v$23, _p$.e));
+                      _v$24 !== _p$.t && (_p$.t = _$setProp(_el$54, "fg", _v$24, _p$.t));
+                      _v$25 !== _p$.a && (_p$.a = _$setProp(_el$55, "fg", _v$25, _p$.a));
+                      return _p$;
+                    }, {
+                      e: void 0,
+                      t: void 0,
+                      a: void 0
+                    });
+                    return _el$50;
+                  })()
+                }));
+                return _el$16;
+              }
+            }), null);
+            _$effect((_p$) => {
+              var _v$3 = borderColor(), _v$4 = greenColor();
+              _v$3 !== _p$.e && (_p$.e = _$setProp(_el$12, "fg", _v$3, _p$.e));
+              _v$4 !== _p$.t && (_p$.t = _$setProp(_el$14, "fg", _v$4, _p$.t));
+              return _p$;
+            }, {
+              e: void 0,
+              t: void 0
+            });
+            return _el$11;
+          }
+        })];
+      }
+    }), null);
+    _$effect((_p$) => {
+      var _v$5 = borderColor(), _v$6 = toggle.global, _v$7 = primaryColor(), _v$8 = mutedColor();
+      _v$5 !== _p$.e && (_p$.e = _$setProp(_el$, "borderColor", _v$5, _p$.e));
+      _v$6 !== _p$.t && (_p$.t = _$setProp(_el$2, "onMouseDown", _v$6, _p$.t));
+      _v$7 !== _p$.a && (_p$.a = _$setProp(_el$3, "fg", _v$7, _p$.a));
+      _v$8 !== _p$.o && (_p$.o = _$setProp(_el$5, "fg", _v$8, _p$.o));
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0,
+      o: void 0
+    });
+    return _el$;
+  })();
+}
+
+// src/kernel/perf-aggregate.ts
+function computePercentile(sortedArr, p) {
+  if (sortedArr.length === 0) return null;
+  if (sortedArr.length === 1) return sortedArr[0];
+  const idx = p / 100 * (sortedArr.length - 1);
+  const lo = Math.floor(idx);
+  const hi = Math.ceil(idx);
+  if (lo === hi) return sortedArr[lo];
+  return sortedArr[lo] + (sortedArr[hi] - sortedArr[lo]) * (idx - lo);
+}
+var RESERVOIR_SIZE = 500;
+function reservoirAdd(reservoir, value, totalCount) {
+  if (reservoir.length < RESERVOIR_SIZE) {
+    return [...reservoir, value];
+  }
+  const j = Math.floor(Math.random() * totalCount);
+  if (j < RESERVOIR_SIZE) {
+    const next = [...reservoir];
+    next[j] = value;
+    return next;
+  }
+  return reservoir;
+}
+function createAccumulator(model, providerID) {
+  return {
+    model,
+    providerID,
+    requestCount: 0,
+    ttftCount: 0,
+    tpsCount: 0,
+    latencyCount: 0,
+    totalInput: 0,
+    totalOutput: 0,
+    totalCacheRead: 0,
+    totalCacheWrite: 0,
+    totalCost: 0,
+    avgTTFT: null,
+    maxTTFT: null,
+    minTTFT: null,
+    avgTPS: null,
+    maxTPS: null,
+    minTPS: null,
+    avgLatency: null,
+    maxLatency: null,
+    minLatency: null,
+    ttftReservoir: [],
+    latencyReservoir: [],
+    lastTTFT: null,
+    lastTPS: null,
+    lastLatency: null
+  };
+}
+function accumulateEntry(acc, entry) {
+  if (entry.inputTokens + entry.outputTokens + entry.reasoningTokens + entry.cacheReadTokens + entry.cacheWriteTokens === 0) return;
+  acc.requestCount++;
+  acc.totalInput += entry.inputTokens;
+  acc.totalOutput += entry.outputTokens;
+  acc.totalCacheRead += entry.cacheReadTokens;
+  acc.totalCacheWrite += entry.cacheWriteTokens;
+  acc.totalCost += entry.cost;
+  if (entry.ttft_ms != null) {
+    acc.ttftCount++;
+    const c = acc.ttftCount;
+    acc.avgTTFT = acc.avgTTFT != null ? acc.avgTTFT + (entry.ttft_ms - acc.avgTTFT) / c : entry.ttft_ms;
+    acc.maxTTFT = acc.maxTTFT != null ? Math.max(acc.maxTTFT, entry.ttft_ms) : entry.ttft_ms;
+    acc.minTTFT = acc.minTTFT != null ? Math.min(acc.minTTFT, entry.ttft_ms) : entry.ttft_ms;
+    acc.ttftReservoir = reservoirAdd(acc.ttftReservoir, entry.ttft_ms, acc.ttftCount);
+    acc.lastTTFT = entry.ttft_ms;
+  }
+  if (entry.tps != null) {
+    acc.tpsCount++;
+    const c = acc.tpsCount;
+    acc.avgTPS = acc.avgTPS != null ? acc.avgTPS + (entry.tps - acc.avgTPS) / c : entry.tps;
+    acc.maxTPS = acc.maxTPS != null ? Math.max(acc.maxTPS, entry.tps) : entry.tps;
+    acc.minTPS = acc.minTPS != null ? Math.min(acc.minTPS, entry.tps) : entry.tps;
+    acc.lastTPS = entry.tps;
+  }
+  if (entry.latency_ms != null) {
+    acc.latencyCount++;
+    const c = acc.latencyCount;
+    acc.avgLatency = acc.avgLatency != null ? acc.avgLatency + (entry.latency_ms - acc.avgLatency) / c : entry.latency_ms;
+    acc.maxLatency = acc.maxLatency != null ? Math.max(acc.maxLatency, entry.latency_ms) : entry.latency_ms;
+    acc.minLatency = acc.minLatency != null ? Math.min(acc.minLatency, entry.latency_ms) : entry.latency_ms;
+    acc.latencyReservoir = reservoirAdd(acc.latencyReservoir, entry.latency_ms, acc.latencyCount);
+    acc.lastLatency = entry.latency_ms;
+  }
+}
+function finalizeAccumulator(acc) {
+  const ttftArr = [...acc.ttftReservoir].sort((a, b) => a - b);
+  const latArr = [...acc.latencyReservoir].sort((a, b) => a - b);
+  const denom = acc.totalInput + acc.totalCacheRead;
+  return {
+    model: acc.model,
+    providerID: acc.providerID,
+    requestCount: acc.requestCount,
+    ttftCount: acc.ttftCount,
+    tpsCount: acc.tpsCount,
+    latencyCount: acc.latencyCount,
+    totalInput: acc.totalInput,
+    totalOutput: acc.totalOutput,
+    totalCacheRead: acc.totalCacheRead,
+    totalCacheWrite: acc.totalCacheWrite,
+    totalCost: acc.totalCost,
+    avgTTFT: acc.avgTTFT,
+    maxTTFT: acc.maxTTFT,
+    minTTFT: acc.minTTFT,
+    p50TTFT: computePercentile(ttftArr, 50),
+    p95TTFT: computePercentile(ttftArr, 95),
+    p99TTFT: computePercentile(ttftArr, 99),
+    avgTPS: acc.avgTPS,
+    maxTPS: acc.maxTPS,
+    minTPS: acc.minTPS,
+    avgLatency: acc.avgLatency,
+    maxLatency: acc.maxLatency,
+    minLatency: acc.minLatency,
+    p50Latency: computePercentile(latArr, 50),
+    p95Latency: computePercentile(latArr, 95),
+    p99Latency: computePercentile(latArr, 99),
+    cacheHitRate: denom > 0 ? acc.totalCacheRead / denom * 100 : null,
+    // 旧版本持久化文件可能缺少 last* 字段（undefined），统一归一化为 null
+    lastTTFT: acc.lastTTFT ?? null,
+    lastTPS: acc.lastTPS ?? null,
+    lastLatency: acc.lastLatency ?? null
+  };
+}
+
+// src/kernel/perf.ts
+import { appendFileSync, readFileSync as readFileSync2, existsSync as existsSync2, statSync, renameSync as renameSync2, unlinkSync as unlinkSync2 } from "node:fs";
+import { readFile } from "node:fs/promises";
+import { join as join2 } from "node:path";
+import { homedir as homedir2 } from "node:os";
+
+// src/kernel/store.ts
+import { readFileSync, writeFileSync, existsSync, renameSync } from "node:fs";
+import { join } from "node:path";
+import { homedir } from "node:os";
+var STATS_PATH = join(homedir(), ".opencode", "tokenwatch-stats.json");
+var LOG_PATH = join(homedir(), ".opencode", "tokenwatch.jsonl");
+var LOG_PATH_ROTATED = LOG_PATH + ".1";
+var CURRENT_VERSION = 1;
+var WRITE_COALESCE_MS = 1e3;
+function loadStatsFile() {
+  try {
+    if (!existsSync(STATS_PATH)) {
+      return { version: CURRENT_VERSION, updatedAt: "", migratedFromLogs: false, models: {} };
+    }
+    const content = readFileSync(STATS_PATH, "utf-8");
+    const parsed = JSON.parse(content);
+    if (parsed?.version === CURRENT_VERSION && parsed.models) return parsed;
+  } catch {
+  }
+  return { version: CURRENT_VERSION, updatedAt: "", migratedFromLogs: false, models: {} };
+}
+function saveStatsFileNow(file) {
+  try {
+    file.updatedAt = (/* @__PURE__ */ new Date()).toISOString();
+    const tmpPath = STATS_PATH + ".tmp";
+    writeFileSync(tmpPath, JSON.stringify(file), "utf-8");
+    renameSync(tmpPath, STATS_PATH);
+  } catch {
+  }
+}
+var pending = null;
+var flushScheduled = false;
+var lastFlushAt = 0;
+function flushNow() {
+  const file = pending;
+  if (!file) return;
+  pending = null;
+  lastFlushAt = Date.now();
+  saveStatsFileNow(file);
+}
+function flushSoon() {
+  if (flushScheduled) return;
+  flushScheduled = true;
+  const timer = setTimeout(() => {
+    flushScheduled = false;
+    flushNow();
+  }, Math.max(0, WRITE_COALESCE_MS - (Date.now() - lastFlushAt)));
+  timer.unref?.();
+}
+process.once("exit", () => {
+  flushNow();
+});
+function readLogLines(path) {
+  try {
+    if (!existsSync(path)) return [];
+    return readFileSync(path, "utf-8").trim().split("\n").filter(Boolean);
+  } catch {
+    return [];
+  }
+}
+function migrateFromLogsIfNeeded(file) {
+  if (file.migratedFromLogs) return false;
+  const lines = [...readLogLines(LOG_PATH_ROTATED), ...readLogLines(LOG_PATH)];
+  file.migratedFromLogs = true;
+  if (lines.length === 0) return true;
+  try {
+    let migrated = 0;
+    for (const line of lines) {
+      if (!line) continue;
+      try {
+        const entry = JSON.parse(line);
+        if (entry.model && entry.ts) {
+          let acc = file.models[entry.model];
+          if (!acc) {
+            acc = createAccumulator(entry.model, entry.providerID);
+            file.models[entry.model] = acc;
+          }
+          accumulateEntry(acc, entry);
+          migrated++;
+        }
+      } catch {
+      }
+    }
+    if (migrated > 0) {
+      ;
+      file._migratedFrom = `${LOG_PATH} (${migrated} entries)`;
+    }
+    return true;
+  } catch {
+    return true;
+  }
+}
+function updatePersistedStats(entry) {
+  try {
+    const file = pending ?? loadStatsFile();
+    pending = file;
+    let acc = file.models[entry.model];
+    if (!acc) {
+      acc = createAccumulator(entry.model, entry.providerID);
+      file.models[entry.model] = acc;
+    }
+    accumulateEntry(acc, entry);
+    flushSoon();
+  } catch {
+  }
+}
+function readPersistedStats() {
+  try {
+    const file = pending ?? loadStatsFile();
+    pending = file;
+    if (!file.migratedFromLogs) {
+      file.models = {};
+      migrateFromLogsIfNeeded(file);
+      flushNow();
+    }
+    return Object.values(file.models).map((s) => finalizeAccumulator(s));
+  } catch {
+    return [];
+  }
+}
+
+// src/kernel/perf.ts
+var LOG_PATH2 = join2(homedir2(), ".opencode", "tokenwatch.jsonl");
+var LOG_PATH_ROTATED2 = LOG_PATH2 + ".1";
+var PerfTracker = class {
+  /** 最早的任意 part（含 step 起点）—— 用作 TPS 的流式窗口起点（对齐宿主官方口径） */
+  firstPartTimes = /* @__PURE__ */ new Map();
+  /** 最早的输出 part（text/reasoning）—— 用作 TTFT（用户等待首个可见 token 的时间） */
+  firstOutputTimes = /* @__PURE__ */ new Map();
+  statsMap = /* @__PURE__ */ new Map();
+  /** 会话加载令牌：异步重放期间再次切会话时，旧加载结果按令牌过期丢弃 */
+  loadToken = 0;
+  handlePartUpdated(event) {
+    if (!event.time?.start || !event.message_id) return;
+    const cur = this.firstPartTimes.get(event.message_id) ?? Number.POSITIVE_INFINITY;
+    if (event.time.start < cur) {
+      this.firstPartTimes.set(event.message_id, event.time.start);
+    }
+    const type = event.type;
+    const isDelta = type != null && type.endsWith("-delta");
+    const isWindowAnchor = type === "step" || type === "part-open" || type === "step-start" || type === "step-finish" || type != null && type.endsWith("-started");
+    const isFirstTokenAnchor = isDelta || !isWindowAnchor;
+    if (isFirstTokenAnchor) {
+      const curOut = this.firstOutputTimes.get(event.message_id) ?? Number.POSITIVE_INFINITY;
+      if (event.time.start < curOut) {
+        this.firstOutputTimes.set(event.message_id, event.time.start);
+      }
+    }
+  }
+  handleMessageUpdated(event) {
+    const info = event.properties?.info;
+    if (!info || info.role !== "assistant") return;
+    if (!info.time?.completed) return;
+    const messageID = info.id ?? "";
+    const created = info.time.created;
+    const completed = info.time.completed;
+    if (!created || !completed) {
+      this.firstPartTimes.delete(messageID);
+      this.firstOutputTimes.delete(messageID);
+      return;
+    }
+    const sessionID = info.sessionID ?? "";
+    const providerID = info.providerID ?? "unknown";
+    const modelID = info.modelID ?? "unknown";
+    const model = `${providerID}/${modelID}`;
+    const tokens = info.tokens;
+    const inputTokens = tokens?.input ?? 0;
+    const outputTokens = tokens?.output ?? 0;
+    const reasoningTokens = tokens?.reasoning ?? 0;
+    const cacheRead = tokens?.cache?.read ?? 0;
+    const cacheWrite = tokens?.cache?.write ?? 0;
+    const cost = info.cost ?? 0;
+    if (inputTokens + outputTokens + reasoningTokens + cacheRead + cacheWrite === 0) {
+      this.firstPartTimes.delete(messageID);
+      this.firstOutputTimes.delete(messageID);
+      return;
+    }
+    const firstPart = this.firstPartTimes.get(messageID) ?? null;
+    const firstOutput = this.firstOutputTimes.get(messageID) ?? firstPart;
+    const latencyMs = completed - created;
+    const ttftMs = firstOutput !== null ? firstOutput - created : null;
+    const genMs = firstPart !== null ? completed - firstPart : null;
+    const tps = genMs !== null && genMs > 0 && outputTokens > 0 ? outputTokens / genMs * 1e3 : null;
+    this.firstPartTimes.delete(messageID);
+    this.firstOutputTimes.delete(messageID);
+    const entry = {
+      ts: (/* @__PURE__ */ new Date()).toISOString(),
+      model,
+      providerID,
+      modelID,
+      sessionID,
+      ttft_ms: ttftMs,
+      tps,
+      // 只在有可靠 genMs 时才有值
+      latency_ms: latencyMs,
+      inputTokens,
+      outputTokens,
+      reasoningTokens,
+      cacheReadTokens: cacheRead,
+      cacheWriteTokens: cacheWrite,
+      cost
+    };
+    this.appendLog(entry);
+    this.updateStats(model, entry);
+  }
+  appendLog(entry) {
+    try {
+      const MAX_SIZE = 5 * 1024 * 1024;
+      if (existsSync2(LOG_PATH2) && statSync(LOG_PATH2).size > MAX_SIZE) {
+        try {
+          unlinkSync2(LOG_PATH_ROTATED2);
+        } catch {
+        }
+        renameSync2(LOG_PATH2, LOG_PATH_ROTATED2);
+      }
+      appendFileSync(LOG_PATH2, JSON.stringify(entry) + "\n");
+    } catch {
+    }
+    updatePersistedStats(entry);
+  }
+  handleMessageRemoved(event) {
+    const mid = event.properties?.messageID ?? "";
+    if (mid) {
+      this.firstPartTimes.delete(mid);
+      this.firstOutputTimes.delete(mid);
+    }
+  }
+  updateStats(model, entry) {
+    let acc = this.statsMap.get(model);
+    if (!acc) {
+      acc = createAccumulator(model, entry.providerID);
+      this.statsMap.set(model, acc);
+    }
+    accumulateEntry(acc, entry);
+  }
+  getSessionStats() {
+    let totalInput = 0, totalOutput = 0, totalCacheRead = 0, totalCacheWrite = 0;
+    let totalRequests = 0, totalCost = 0;
+    let weightedHitSum = 0, totalReqForHit = 0;
+    const models = {};
+    for (const [model, acc] of this.statsMap) {
+      const stats = finalizeAccumulator(acc);
+      models[model] = stats;
+      totalInput += stats.totalInput;
+      totalOutput += stats.totalOutput;
+      totalCacheRead += stats.totalCacheRead;
+      totalCacheWrite += stats.totalCacheWrite;
+      totalRequests += stats.requestCount;
+      totalCost += stats.totalCost;
+      if (stats.cacheHitRate !== null) {
+        weightedHitSum += stats.cacheHitRate * stats.requestCount;
+        totalReqForHit += stats.requestCount;
+      }
+    }
+    const weightedCacheHitRate = totalReqForHit > 0 ? weightedHitSum / totalReqForHit : null;
+    return {
+      models,
+      totals: { totalInput, totalOutput, totalCacheRead, totalCacheWrite, totalRequests, totalCost, weightedCacheHitRate }
+    };
+  }
+  readLogs(last = 50) {
+    try {
+      if (!existsSync2(LOG_PATH2)) return [];
+      const content = readFileSync2(LOG_PATH2, "utf-8").trim();
+      if (!content) return [];
+      const lines = content.split("\n");
+      const entries = [];
+      for (let i = Math.max(0, lines.length - last); i < lines.length; i++) {
+        try {
+          entries.push(JSON.parse(lines[i]));
+        } catch {
+        }
+      }
+      return entries;
+    } catch {
+      return [];
+    }
+  }
+  reset() {
+    this.loadToken++;
+    this.firstPartTimes.clear();
+    this.firstOutputTimes.clear();
+    this.statsMap.clear();
+  }
+  /**
+   * 切换会话：清空内存态后异步重放该会话的 JSONL 历史。
+   *
+   * 异步化是为了不阻塞 TUI 渲染线程（5MB 日志的同步读可达数十毫秒）；
+   * 重放完成前若又切换了会话，由 loadToken 令牌丢弃过期结果。
+   */
+  async loadSession(sessionID) {
+    const token = ++this.loadToken;
+    this.firstPartTimes.clear();
+    this.firstOutputTimes.clear();
+    this.statsMap.clear();
+    if (!sessionID) return;
+    try {
+      const files = [LOG_PATH_ROTATED2, LOG_PATH2].filter((f) => existsSync2(f));
+      if (files.length === 0) return;
+      for (const filePath of files) {
+        if (token !== this.loadToken) return;
+        const content = await readFile(filePath, "utf-8");
+        if (token !== this.loadToken) return;
+        const trimmed = content.trim();
+        if (!trimmed) continue;
+        for (const line of trimmed.split("\n")) {
+          if (!line) continue;
+          try {
+            const entry = JSON.parse(line);
+            if (entry.sessionID === sessionID) {
+              this.updateStats(entry.model, entry);
+            }
+          } catch {
+          }
+        }
+      }
+    } catch {
+    }
+  }
+};
+function createPerfTracker() {
+  return new PerfTracker();
+}
+function readLogs(last = 50) {
+  const tracker = new PerfTracker();
+  return tracker.readLogs(last);
+}
+
+// src/host/runtime.tsx
+function kvKey(sessionID) {
+  return "tokenwatch-msgs-" + sessionID;
+}
+function toPerfMessageEvent(e) {
+  return {
+    properties: {
+      info: {
+        id: e.messageID,
+        sessionID: e.sessionID,
+        role: e.role,
+        providerID: e.providerID,
+        modelID: e.modelID,
+        tokens: {
+          input: e.input,
+          output: e.output,
+          reasoning: e.reasoning,
+          cache: {
+            read: e.cacheRead,
+            write: e.cacheWrite
+          },
+          total: e.total
+        },
+        cost: e.cost,
+        time: {
+          created: e.timeCreated,
+          completed: e.timeCompleted
+        }
+      }
+    }
+  };
+}
+function toPerfPartEvent(p) {
+  return {
+    message_id: p.messageID,
+    type: p.type,
+    text: p.text,
+    time: {
+      start: p.timeStart
+    }
+  };
+}
+function rebuildFromMessages(sessionID, messages) {
+  const out = [];
+  for (const msg of messages) {
+    const info = msg?.info ?? {};
+    const m = {
+      ...info,
+      ...msg
+    };
+    const kind = m.type ?? m.role;
+    if (kind !== "assistant") continue;
+    const tokens = m.tokens;
+    if (!tokens) continue;
+    const total = (tokens.input ?? 0) + (tokens.output ?? 0) + (tokens.reasoning ?? 0) + (tokens.cache?.read ?? 0) + (tokens.cache?.write ?? 0);
+    if (total === 0) continue;
+    out.push({
+      id: m.id,
+      sessionID,
+      // v1 平铺 providerID/modelID；v2 嵌套在 model 里
+      providerID: m.model?.providerID ?? m.providerID ?? "unknown",
+      modelID: m.model?.id ?? m.modelID ?? "unknown",
+      inputTokens: tokens.input ?? 0,
+      outputTokens: tokens.output ?? 0,
+      reasoningTokens: tokens.reasoning ?? 0,
+      cacheRead: tokens.cache?.read ?? 0,
+      cacheWrite: tokens.cache?.write ?? 0,
+      cost: m.cost ?? 0
+    });
+  }
+  return out;
+}
+var PERSIST_DEBOUNCE_MS = 500;
+var KV_SESSION_KEEP = 20;
+var SESSION_INDEX_KEY = "tokenwatch-session-index";
+function startTokenWatch(host) {
+  const perfTracker = createPerfTracker();
+  const [sidebarRevision, setSidebarRevision] = createSignal2(0);
+  const [perfRevision, setPerfRevision] = createSignal2(0);
+  const [allTokenMessages, setAllTokenMessages] = createSignal2([]);
+  let currentSessionID = "";
+  let pollTimer = null;
+  let persistTimer = null;
+  let persistSession = "";
+  let persistMsgs = [];
+  const persistNow = (sessionID, msgs) => {
+    try {
+      host.store.set(kvKey(sessionID), msgs);
+    } catch {
+    }
+  };
+  const persistThrottled = (sessionID, msgs) => {
+    persistSession = sessionID;
+    persistMsgs = msgs;
+    if (persistTimer) return;
+    persistTimer = setTimeout(() => {
+      persistTimer = null;
+      persistNow(persistSession, persistMsgs);
+    }, PERSIST_DEBOUNCE_MS);
+  };
+  const flushPersist = () => {
+    if (persistTimer) {
+      clearTimeout(persistTimer);
+      persistTimer = null;
+    }
+    if (persistMsgs.length > 0) persistNow(persistSession, persistMsgs);
+  };
+  const evictOldSessions = (sessionID) => {
+    try {
+      const index = host.store.get(SESSION_INDEX_KEY, []).filter(Boolean);
+      const next = [sessionID, ...index.filter((id) => id !== sessionID)].slice(0, KV_SESSION_KEEP);
+      host.store.set(SESSION_INDEX_KEY, next);
+      if (typeof host.store.delete === "function") {
+        for (const id of index.slice(KV_SESSION_KEEP)) {
+          if (!next.includes(id)) {
+            try {
+              host.store.delete(kvKey(id));
+            } catch {
+            }
+          }
+        }
+      }
+    } catch {
+    }
+  };
+  const switchSession = (sessionID) => {
+    if (!sessionID || sessionID === currentSessionID) return;
+    currentSessionID = sessionID;
+    void perfTracker.loadSession(sessionID).then(() => {
+      setPerfRevision((v) => v + 1);
+      setSidebarRevision((v) => v + 1);
+    }).catch(() => {
+    });
+    evictOldSessions(sessionID);
+    if (pollTimer) {
+      clearInterval(pollTimer);
+      pollTimer = null;
+    }
+    let loaded = [];
+    try {
+      const saved = host.store.get(kvKey(sessionID), void 0);
+      if (saved && saved.length > 0) loaded = saved;
+    } catch {
+    }
+    setAllTokenMessages(loaded);
+    let pollCount = 0;
+    const maxPolls = 50;
+    pollTimer = setInterval(() => {
+      pollCount++;
+      let existing = [];
+      try {
+        existing = host.sessionMessages(sessionID);
+      } catch {
+        existing = [];
+      }
+      if (!existing || existing.length === 0) {
+        if (pollCount >= maxPolls && pollTimer) {
+          clearInterval(pollTimer);
+          pollTimer = null;
+        }
+        return;
+      }
+      const rebuilt = rebuildFromMessages(sessionID, existing);
+      setAllTokenMessages((prev) => {
+        if (prev.length >= rebuilt.length) return prev;
+        return rebuilt;
+      });
+      persistThrottled(sessionID, rebuilt);
+      if (pollTimer) {
+        clearInterval(pollTimer);
+        pollTimer = null;
+      }
+    }, 200);
+  };
+  const unsubscribe = host.subscribe({
+    onMessageUpdated(event) {
+      perfTracker.handleMessageUpdated(toPerfMessageEvent(event));
+      setPerfRevision((v) => v + 1);
+      if (event.role === "assistant" && event.total > 0) {
+        const msg = {
+          id: event.messageID,
+          sessionID: event.sessionID,
+          providerID: event.providerID,
+          modelID: event.modelID,
+          inputTokens: event.input,
+          outputTokens: event.output,
+          reasoningTokens: event.reasoning,
+          cacheRead: event.cacheRead,
+          cacheWrite: event.cacheWrite,
+          cost: event.cost
+        };
+        const prev = allTokenMessages();
+        const idx = prev.findIndex((m) => m.id === msg.id);
+        const next = idx >= 0 ? prev.map((m, i) => i === idx ? msg : m) : [...prev, msg];
+        setAllTokenMessages(next);
+        persistThrottled(event.sessionID || currentSessionID, next);
+      }
+      setSidebarRevision((v) => v + 1);
+    },
+    onPartUpdated(event) {
+      perfTracker.handlePartUpdated(toPerfPartEvent(event));
+    },
+    onInvalidate() {
+      setSidebarRevision((v) => v + 1);
+    }
+  });
+  host.registerSidebar((input) => {
+    sidebarRevision();
+    const sid = input.sessionID;
+    queueMicrotask(() => switchSession(sid));
+    return _$createComponent2(TokenWatchPanel, {
+      host,
+      perfTracker,
+      perfRevision,
+      messages: () => {
+        try {
+          return host.sessionMessages(currentSessionID);
+        } catch {
+          return [];
+        }
+      },
+      messageParts: (messageID) => host.messageParts(messageID, currentSessionID),
+      allTokenMessages
+    });
+  });
+  const disposeAll = () => {
+    unsubscribe();
+    flushPersist();
+    if (pollTimer) {
+      clearInterval(pollTimer);
+      pollTimer = null;
+    }
+  };
+  host.onDispose(disposeAll);
+  return disposeAll;
+}
+
+// src/host/v1/data-source.ts
+import { exec } from "node:child_process";
+import { dirname, join as join3 } from "node:path";
+function buildEnvWithOpencodePath() {
+  const nodeDir = dirname(process.execPath);
+  const candidateDirs = [
+    // nvm on Windows: opencode-ai 包的 bin 目录
+    join3(nodeDir, "node_modules", "opencode-ai", "node_modules", "opencode-windows-x64", "bin"),
+    // npm global install: opencode 直接在 node_modules/.bin
+    join3(nodeDir, "node_modules", ".bin"),
+    // 也加入 node.exe 所在目录本身（nvm 可能在此放 shim）
+    nodeDir
+  ];
+  const pathSep = process.platform === "win32" ? ";" : ":";
+  const extraPath = candidateDirs.join(pathSep);
+  return {
+    ...process.env,
+    PATH: `${extraPath}${pathSep}${process.env.PATH ?? ""}`
+  };
+}
+var OPENCODE_ENV = buildEnvWithOpencodePath();
+function execAsync(cmd) {
+  return new Promise((resolve, reject) => {
+    exec(cmd, { windowsHide: true, timeout: 3e4, env: OPENCODE_ENV }, (error, stdout, stderr) => {
+      if (error) reject(Object.assign(error, { stderr }));
+      else if (stderr.trim() && !stdout.trim()) reject(Object.assign(new Error(stderr.trim()), { stderr }));
+      else resolve({ stdout, stderr });
+    });
+  });
+}
+async function queryDb(sql) {
+  const flatSql = sql.replace(/\s+/g, " ").trim();
+  const { stdout, stderr } = await execAsync(`opencode db ${JSON.stringify(flatSql)} --format json`);
+  if (stderr) throw new Error(stderr.trim());
+  const parsed = JSON.parse(stdout.trim());
+  return Array.isArray(parsed) ? parsed : parsed.data ?? [];
+}
+function escapeSql(value) {
+  return value.replace(/'/g, "''").replace(/["%\r\n\0]/g, "");
+}
+function isValidDate(s) {
+  return /^\d{4}-\d{2}-\d{2}$/.test(s);
+}
+function messageWhere(filters) {
+  const where = [
+    "json_extract(m.data, '$.role') = 'assistant'",
+    "coalesce(json_extract(m.data, '$.tokens.total'), 0) > 0"
+  ];
+  if (filters.sessionId) where.push(`m.session_id = '${escapeSql(filters.sessionId)}'`);
+  if (filters.provider) where.push(`coalesce(json_extract(m.data, '$.providerID'), '') = '${escapeSql(filters.provider)}'`);
+  if (filters.model) where.push(`coalesce(json_extract(m.data, '$.modelID'), '') = '${escapeSql(filters.model)}'`);
+  if (filters.startDate && isValidDate(filters.startDate)) {
+    where.push(`date(m.time_created / 1000, 'unixepoch', 'localtime') >= '${filters.startDate}'`);
+  }
+  if (filters.endDate && isValidDate(filters.endDate)) {
+    where.push(`date(m.time_created / 1000, 'unixepoch', 'localtime') <= '${filters.endDate}'`);
+  }
+  return where.join(" AND ");
+}
+function parseList(value) {
+  if (!value) return [];
+  return value.split(",").map((item) => item.trim()).filter(Boolean);
+}
+function toSessionTokenData(row) {
+  const models = parseList(row?.models_used);
+  const providers = parseList(row?.providers_used);
+  return {
+    model: models.length === 1 ? models[0] : "",
+    provider: providers.length === 1 ? providers[0] : "",
+    modelsUsed: models,
+    totalTokens: row?.total_tokens ?? 0,
+    inputTokens: row?.input_tokens ?? 0,
+    outputTokens: row?.output_tokens ?? 0,
+    reasoningTokens: row?.reasoning_tokens ?? 0,
+    cacheRead: row?.cache_read ?? 0,
+    cacheWrite: row?.cache_write ?? 0,
+    totalCost: row?.total_cost ?? 0,
+    requestCount: row?.request_count ?? 0
+  };
+}
+function getPresetRange(preset) {
+  if (preset === "all") return {};
+  const end = /* @__PURE__ */ new Date();
+  const start = new Date(end);
+  if (preset === "7d") start.setDate(end.getDate() - 6);
+  if (preset === "30d") start.setDate(end.getDate() - 29);
+  if (preset === "month") start.setDate(1);
+  const format = (date) => {
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, "0");
+    const day = String(date.getDate()).padStart(2, "0");
+    return `${year}-${month}-${day}`;
+  };
+  return { startDate: format(start), endDate: format(end) };
+}
+async function getSummary(filters = {}) {
+  const sql = `
+SELECT
+  group_concat(distinct coalesce(json_extract(m.data, '$.modelID'), 'unknown')) as models_used,
+  group_concat(distinct coalesce(json_extract(m.data, '$.providerID'), 'unknown')) as providers_used,
+  count(*) as request_count,
+  sum(coalesce(json_extract(m.data, '$.tokens.total'), 0)) as total_tokens,
+  sum(coalesce(json_extract(m.data, '$.tokens.input'), 0)) as input_tokens,
+  sum(coalesce(json_extract(m.data, '$.tokens.output'), 0)) as output_tokens,
+  sum(coalesce(json_extract(m.data, '$.tokens.reasoning'), 0)) as reasoning_tokens,
+  sum(coalesce(json_extract(m.data, '$.tokens.cache.read'), 0)) as cache_read,
+  sum(coalesce(json_extract(m.data, '$.tokens.cache.write'), 0)) as cache_write,
+  sum(coalesce(json_extract(m.data, '$.cost'), 0)) as total_cost
+FROM message m
+WHERE ${messageWhere(filters)}
+  `.trim();
+  const rows = await queryDb(sql);
+  return toSessionTokenData(rows[0]);
+}
+async function getModelBreakdown(filters = {}) {
+  const sql = `
+SELECT
+  coalesce(json_extract(m.data, '$.providerID'), 'unknown') as provider,
+  coalesce(json_extract(m.data, '$.modelID'), 'unknown') as model,
+  count(*) as requests,
+  count(distinct m.session_id) as sessions,
+  sum(coalesce(json_extract(m.data, '$.tokens.total'), 0)) as total_tokens,
+  sum(coalesce(json_extract(m.data, '$.tokens.input'), 0)) as input_tokens,
+  sum(coalesce(json_extract(m.data, '$.tokens.output'), 0)) as output_tokens,
+  sum(coalesce(json_extract(m.data, '$.tokens.reasoning'), 0)) as reasoning_tokens,
+  sum(coalesce(json_extract(m.data, '$.tokens.cache.read'), 0)) as cache_read,
+  sum(coalesce(json_extract(m.data, '$.cost'), 0)) as total_cost
+FROM message m
+WHERE ${messageWhere(filters)}
+GROUP BY provider, model
+ORDER BY total_tokens DESC
+  `.trim();
+  const rows = await queryDb(sql);
+  return rows.map((row) => ({
+    provider: row.provider ?? "unknown",
+    model: row.model ?? "unknown",
+    requests: row.requests ?? 0,
+    sessions: row.sessions ?? 0,
+    totalTokens: row.total_tokens ?? 0,
+    inputTokens: row.input_tokens ?? 0,
+    outputTokens: row.output_tokens ?? 0,
+    reasoningTokens: row.reasoning_tokens ?? 0,
+    cacheRead: row.cache_read ?? 0,
+    totalCost: row.total_cost ?? 0
+  }));
+}
+async function getProviderBreakdown(filters = {}) {
+  const sql = `
+SELECT
+  coalesce(json_extract(m.data, '$.providerID'), 'unknown') as provider,
+  count(*) as requests,
+  count(distinct m.session_id) as sessions,
+  sum(coalesce(json_extract(m.data, '$.tokens.total'), 0)) as total_tokens,
+  sum(coalesce(json_extract(m.data, '$.tokens.input'), 0)) as input_tokens,
+  sum(coalesce(json_extract(m.data, '$.tokens.output'), 0)) as output_tokens,
+  sum(coalesce(json_extract(m.data, '$.tokens.reasoning'), 0)) as reasoning_tokens,
+  sum(coalesce(json_extract(m.data, '$.tokens.cache.read'), 0)) as cache_read,
+  sum(coalesce(json_extract(m.data, '$.cost'), 0)) as total_cost
+FROM message m
+WHERE ${messageWhere(filters)}
+GROUP BY provider
+ORDER BY total_tokens DESC
+  `.trim();
+  const rows = await queryDb(sql);
+  return rows.map((row) => ({
+    provider: row.provider ?? "unknown",
+    requests: row.requests ?? 0,
+    sessions: row.sessions ?? 0,
+    totalTokens: row.total_tokens ?? 0,
+    inputTokens: row.input_tokens ?? 0,
+    outputTokens: row.output_tokens ?? 0,
+    reasoningTokens: row.reasoning_tokens ?? 0,
+    cacheRead: row.cache_read ?? 0,
+    totalCost: row.total_cost ?? 0
+  }));
+}
+async function getDailyBreakdown(filters = {}) {
+  const limit = filters.limit ?? 365;
+  const sql = `
+SELECT
+  date(m.time_created / 1000, 'unixepoch', 'localtime') as day,
+  count(*) as requests,
+  count(distinct m.session_id) as sessions,
+  sum(coalesce(json_extract(m.data, '$.tokens.total'), 0)) as total_tokens,
+  sum(coalesce(json_extract(m.data, '$.tokens.input'), 0)) as input_tokens,
+  sum(coalesce(json_extract(m.data, '$.tokens.output'), 0)) as output_tokens,
+  sum(coalesce(json_extract(m.data, '$.tokens.reasoning'), 0)) as reasoning_tokens,
+  sum(coalesce(json_extract(m.data, '$.tokens.cache.read'), 0)) as cache_read,
+  sum(coalesce(json_extract(m.data, '$.cost'), 0)) as total_cost
+FROM message m
+WHERE ${messageWhere(filters)}
+GROUP BY day
+ORDER BY day DESC
+LIMIT ${Math.max(1, limit)}
+  `.trim();
+  const rows = await queryDb(sql);
+  return rows.map((row) => ({
+    day: row.day ?? "",
+    requests: row.requests ?? 0,
+    sessions: row.sessions ?? 0,
+    totalTokens: row.total_tokens ?? 0,
+    inputTokens: row.input_tokens ?? 0,
+    outputTokens: row.output_tokens ?? 0,
+    reasoningTokens: row.reasoning_tokens ?? 0,
+    cacheRead: row.cache_read ?? 0,
+    totalCost: row.total_cost ?? 0
+  }));
+}
+async function getSessionBreakdown(filters = {}) {
+  const limit = filters.limit ?? 15;
+  const sql = `
+SELECT
+  s.id as session_id,
+  s.title as title,
+  coalesce(json_extract(m.data, '$.providerID'), json_extract(s.model, '$.providerID'), 'unknown') as provider,
+  coalesce(json_extract(m.data, '$.modelID'), json_extract(s.model, '$.id'), 'unknown') as model,
+  count(*) as requests,
+  sum(coalesce(json_extract(m.data, '$.tokens.total'), 0)) as total_tokens,
+  sum(coalesce(json_extract(m.data, '$.tokens.input'), 0)) as input_tokens,
+  sum(coalesce(json_extract(m.data, '$.tokens.output'), 0)) as output_tokens,
+  sum(coalesce(json_extract(m.data, '$.tokens.reasoning'), 0)) as reasoning_tokens,
+  sum(coalesce(json_extract(m.data, '$.tokens.cache.read'), 0)) as cache_read,
+  sum(coalesce(json_extract(m.data, '$.cost'), 0)) as total_cost,
+  date(max(m.time_created) / 1000, 'unixepoch', 'localtime') as day
+FROM message m
+JOIN session s ON s.id = m.session_id
+WHERE ${messageWhere(filters)}
+GROUP BY s.id, s.title, provider, model
+ORDER BY max(m.time_created) DESC
+LIMIT ${Math.max(1, limit)}
+  `.trim();
+  const rows = await queryDb(sql);
+  return rows.map((row) => ({
+    sessionId: row.session_id ?? "",
+    title: row.title ?? "(untitled)",
+    provider: row.provider ?? "unknown",
+    model: row.model ?? "unknown",
+    requests: row.requests ?? 0,
+    totalTokens: row.total_tokens ?? 0,
+    inputTokens: row.input_tokens ?? 0,
+    outputTokens: row.output_tokens ?? 0,
+    reasoningTokens: row.reasoning_tokens ?? 0,
+    cacheRead: row.cache_read ?? 0,
+    totalCost: row.total_cost ?? 0,
+    day: row.day ?? ""
+  }));
+}
+async function getErrorStats(filters = {}) {
+  const baseConds = [
+    "json_extract(m.data, '$.role') = 'assistant'"
+  ];
+  if (filters.sessionId) baseConds.push(`m.session_id = '${escapeSql(filters.sessionId)}'`);
+  if (filters.provider) baseConds.push(`coalesce(json_extract(m.data, '$.providerID'), '') = '${escapeSql(filters.provider)}'`);
+  if (filters.model) baseConds.push(`coalesce(json_extract(m.data, '$.modelID'), '') = '${escapeSql(filters.model)}'`);
+  if (filters.startDate && isValidDate(filters.startDate)) {
+    baseConds.push(`date(m.time_created / 1000, 'unixepoch', 'localtime') >= '${filters.startDate}'`);
+  }
+  if (filters.endDate && isValidDate(filters.endDate)) {
+    baseConds.push(`date(m.time_created / 1000, 'unixepoch', 'localtime') <= '${filters.endDate}'`);
+  }
+  const baseWhere = baseConds.join(" AND ");
+  const sql = `
+SELECT
+  coalesce(json_extract(m.data, '$.providerID'), 'unknown') as provider,
+  coalesce(json_extract(m.data, '$.modelID'), 'unknown') as model,
+  count(*) as total,
+  sum(CASE WHEN coalesce(json_extract(m.data, '$.tokens.total'), 0) = 0 THEN 1 ELSE 0 END) as failed
+FROM message m
+WHERE ${baseWhere}
+GROUP BY provider, model
+ORDER BY failed DESC
+  `.trim();
+  try {
+    const rows = await queryDb(sql);
+    let successCount = 0, failedCount = 0;
+    const byModel = rows.map((r) => {
+      const total = r.total ?? 0;
+      const failed = r.failed ?? 0;
+      const success = total - failed;
+      successCount += success;
+      failedCount += failed;
+      return { provider: r.provider ?? "unknown", model: r.model ?? "unknown", failed, total };
+    });
+    const errorRate = successCount + failedCount > 0 ? failedCount / (successCount + failedCount) : 0;
+    return { successCount, failedCount, errorRate, byModel };
+  } catch {
+    return { successCount: 0, failedCount: 0, errorRate: 0, byModel: [] };
+  }
+}
+async function getUsageReport(filters = {}) {
+  const dailyLimit = filters.limit ?? 365;
+  const [summary, models, providers, daily, sessions, errors] = await Promise.all([
+    getSummary(filters),
+    getModelBreakdown(filters),
+    getProviderBreakdown(filters),
+    getDailyBreakdown(filters),
+    getSessionBreakdown(filters),
+    getErrorStats(filters)
+  ]);
+  return {
+    filters,
+    summary,
+    models,
+    providers,
+    daily,
+    sessions,
+    errors,
+    // 恰好等于上限视为可能截断（无法从数据本身区分"正好 365 天"）
+    dailyTruncated: daily.length >= dailyLimit
+  };
+}
+
+// src/host/v1/adapter.ts
+var sqlDataSource = {
+  kind: "sql",
+  needsFirstRunNotice: false,
+  isCold: () => false,
+  getUsageReport: (filters) => getUsageReport(filters)
+};
+function makeStore(api) {
+  return {
+    get(key, fallback) {
+      try {
+        const v = api.kv?.get?.(key);
+        return v === void 0 || v === null ? fallback : v;
+      } catch {
+        return fallback;
+      }
+    },
+    set(key, value) {
+      try {
+        api.kv?.set?.(key, value);
+      } catch {
+      }
+    },
+    delete(key) {
+      try {
+        api.kv?.delete?.(key);
+      } catch {
+      }
+    }
+  };
+}
+function readTheme(api) {
+  const c = api.theme?.current ?? {};
+  const fallback = c.text ?? c.primary;
+  return {
+    primary: c.primary ?? fallback,
+    text: c.text ?? fallback,
+    textMuted: c.textMuted ?? fallback,
+    background: c.background ?? fallback,
+    border: c.border ?? c.borderSubtle ?? fallback,
+    success: c.success ?? fallback,
+    warning: c.warning ?? fallback,
+    error: c.error ?? fallback
+  };
+}
+function normalizeMessageUpdated(event) {
+  const info = event?.properties?.info ?? event?.info;
+  if (!info) return null;
+  const tokens = info.tokens ?? {};
+  const cache2 = tokens.cache ?? {};
+  return {
+    messageID: info.id ?? "",
+    sessionID: info.sessionID ?? "",
+    role: info.role ?? "",
+    providerID: info.providerID ?? "unknown",
+    modelID: info.modelID ?? "unknown",
+    input: tokens.input ?? 0,
+    output: tokens.output ?? 0,
+    reasoning: tokens.reasoning ?? 0,
+    cacheRead: cache2.read ?? 0,
+    cacheWrite: cache2.write ?? 0,
+    total: tokens.total ?? 0,
+    cost: info.cost ?? 0,
+    timeCreated: info.time?.created,
+    timeCompleted: info.time?.completed,
+    raw: event
+  };
+}
+function normalizePartUpdated(event) {
+  const part = event?.properties?.part ?? event?.part ?? {};
+  return {
+    messageID: part.messageID,
+    type: part.type,
+    text: part.type === "text" ? part.text : void 0,
+    timeStart: part.time?.start,
+    raw: event
+  };
+}
+function createV1Adapter(api) {
+  return {
+    kind: "v1",
+    hostVersion: api?.app?.version ?? "1.x",
+    theme: () => readTheme(api),
+    store: makeStore(api),
+    subscribe(handlers) {
+      const off = [];
+      off.push(
+        api.event.on("message.updated", (event) => {
+          const normalized = normalizeMessageUpdated(event);
+          if (normalized) handlers.onMessageUpdated(normalized);
+          handlers.onInvalidate();
+        })
+      );
+      off.push(
+        api.event.on("message.part.updated", (event) => {
+          handlers.onPartUpdated(normalizePartUpdated(event));
+        })
+      );
+      off.push(
+        api.event.on("message.removed", () => {
+          handlers.onInvalidate();
+        })
+      );
+      return () => {
+        for (const fn of off) {
+          try {
+            fn();
+          } catch {
+          }
+        }
+      };
+    },
+    registerSidebar(render) {
+      try {
+        api.slots.register({
+          order: 50,
+          slots: {
+            sidebar_content: (_ctx, input) => render({ sessionID: input?.session_id ?? "" })
+          }
+        });
+      } catch {
+      }
+      return () => {
+      };
+    },
+    // registerCommands 不在此实现（审查 #13）：v1 的命令经由 host/v1/commands.tsx
+    // 用原生 DialogSelect 实现（UX 优于通用 select），HostAdapter.registerCommands
+    // 在 v1 下不可达，契约中已改为可选 —— 详见 docs/CODE-REVIEW-2026-09-13.md
+    notify(message, variant = "info") {
+      try {
+        api.ui?.toast?.({ message, variant });
+      } catch {
+      }
+    },
+    async alert(input) {
+      try {
+        api.ui?.toast?.({ message: `${input.title}: ${input.message}`, variant: "info" });
+      } catch {
+      }
+    },
+    async select() {
+      return void 0;
+    },
+    onDispose(fn) {
+      try {
+        api.lifecycle?.onDispose?.(fn);
+      } catch {
+      }
+    },
+    sessionMessages(sessionID) {
+      try {
+        return api.state?.session?.messages?.(sessionID) ?? [];
+      } catch {
+        return [];
+      }
+    },
+    messageParts(messageID) {
+      try {
+        return api.state?.part?.(messageID) ?? [];
+      } catch {
+        return [];
+      }
+    },
+    appConfig() {
+      try {
+        return api.state?.config ?? {};
+      } catch {
+        return {};
+      }
+    },
+    onPartUpdated(handler) {
+      try {
+        return api.event.on("message.part.updated", () => handler());
+      } catch {
+        return () => {
+        };
+      }
+    },
+    dataSource: sqlDataSource
+  };
+}
+
+// src/host/v1/commands.tsx
+import { createComponent as _$createComponent3 } from "@opentui/solid";
+
+// src/kernel/report.ts
+import { existsSync as existsSync3, mkdirSync, writeFileSync as writeFileSync3 } from "node:fs";
+import { join as join4 } from "node:path";
+import { homedir as homedir3 } from "node:os";
+import { spawn } from "node:child_process";
+
+// src/kernel/report-html.ts
+function jsonLit(value) {
+  return JSON.stringify(value).replace(/</g, "\\u003c");
+}
+function escapeHtml(value) {
+  return String(value ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+function fmtPercent(n) {
+  return (n * 100).toFixed(1) + "%";
+}
+function cacheHitRate(input, cacheRead) {
+  if (input + cacheRead === 0) return 0;
+  return cacheRead / (input + cacheRead);
+}
+function sortModelsByUsage(models) {
+  return [...models].filter((m) => m.totalTokens > 0).sort((a, b) => b.totalTokens - a.totalTokens);
+}
+function renderMeta(data) {
+  const m = data.meta;
+  return `TokenWatch Usage Report \xB7 ${m.dateRange.start} \u2192 ${m.dateRange.end} \xB7 generated ${m.generatedAt}`;
+}
+function renderKpiCards(data) {
+  const s = data.summary;
+  const hitRate = cacheHitRate(s.inputTokens, s.cacheRead);
+  const hitRatePct = fmtPercent(hitRate);
+  let tpsSum = 0, tpsReqs = 0;
+  for (const p of data.perfSummary) {
+    if (p.avgTPS != null && p.avgTPS > 0) {
+      tpsSum += p.avgTPS * p.tpsCount;
+      tpsReqs += p.tpsCount;
+    }
+  }
+  const avgTpsRaw = tpsReqs > 0 ? tpsSum / tpsReqs : 0;
+  const avgTps = tpsReqs > 0 ? avgTpsRaw.toFixed(1) : "\u2014";
+  const isHighCache = hitRate >= 0.5;
+  const errors = data.errors;
+  const errorRatePct = errors ? (errors.errorRate * 100).toFixed(1) + "%" : "\u2014";
+  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">
+        <div class="kpi-label">Total Tokens</div>
+        <div class="kpi-value">${formatTokens(s.totalTokens)}</div>
+      </div>
+      <div class="kpi-card${isHighCache ? " kpi-glow" : ""}">
+        <div class="kpi-label">Cache Hit Rate</div>
+        <div class="kpi-value" style="color:var(--cache)">${hitRatePct}</div>
+      </div>
+      <div class="kpi-card">
+        <div class="kpi-label">Avg TPS</div>
+        <div class="kpi-value" style="color:var(--tps)">${avgTps}</div>
+      </div>
+      <div class="kpi-card">
+        <div class="kpi-label">Requests</div>
+        <div class="kpi-value">${s.requestCount}</div>
+      </div>
+      <div class="kpi-card">
+        <div class="kpi-label">Total Cost</div>
+        <div class="kpi-value" style="color:var(--tps)">${formatCost(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) {
+  const models = sortModelsByUsage(data.models).filter((m) => m.totalTokens >= 1e6);
+  const names = models.map((m) => m.model);
+  const inputData = models.map((m) => m.inputTokens);
+  const outputData = models.map((m) => m.outputTokens);
+  const cacheData = models.map((m) => m.cacheRead);
+  const tpsData = models.map((m) => {
+    const perf = data.perfSummary.find((p) => p.model === `${m.provider}/${m.model}`);
+    return perf?.avgTPS ?? null;
+  });
+  return `var modelNames = ${jsonLit(names)};
+var modelInput = ${jsonLit(inputData)};
+var modelOutput = ${jsonLit(outputData)};
+var modelCache = ${jsonLit(cacheData)};
+var modelTps = ${jsonLit(tpsData)};
+
+function initModelChart() {
+  var el = document.getElementById('model-chart');
+  if (!el) return;
+  var chart = echarts.init(el);
+  window.modelChart = chart;
+  renderModelChart(chart);
+  return chart;
+}
+
+function renderModelChart(chart) {
+  var totals = modelInput.map(function(v, i) { return v + modelOutput[i] + modelCache[i]; });
+  var option = {
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: { type: 'shadow' },
+      formatter: function(params) {
+        var html = '<b>' + params[0].axisValue + '</b><br/>';
+        var total = 0;
+        params.forEach(function(p) {
+          if (p.seriesName !== 'TPS') {
+            html += p.marker + ' ' + p.seriesName + ': ' + fmt(p.value) + '<br/>';
+            total += p.value;
+          }
+        });
+        html += 'Total: ' + fmt(total) + '<br/>';
+        var tpsParam = params.find(function(p) { return p.seriesName === 'TPS'; });
+        if (tpsParam && tpsParam.value != null) {
+          html += tpsParam.marker + ' TPS: ' + tpsParam.value.toFixed(1) + '<br/>';
+        }
+        return html;
+      }
+    },
+    legend: {
+      data: ['Input', 'Output', 'Cache', 'TPS'],
+      textStyle: { color: '#B0B0C0' },
+      top: 5
+    },
+    grid: { left: 60, right: 60, bottom: 100, top: 50 },
+    xAxis: {
+      type: 'category',
+      data: modelNames,
+      axisLabel: { color: '#B0B0C0', rotate: 45, interval: 0, fontSize: 10 },
+      axisLine: { lineStyle: { color: '#2A2A35' } }
+    },
+    yAxis: [
+      {
+        type: 'value',
+        name: 'Tokens',
+        nameTextStyle: { color: '#B0B0C0' },
+        axisLabel: {
+          color: '#B0B0C0',
+          formatter: fmt
+        },
+        splitLine: { lineStyle: { color: '#2A2A35', type: 'dashed' } }
+      },
+      {
+        type: 'value',
+        name: 'TPS',
+        nameTextStyle: { color: '#FFB800' },
+        axisLabel: { color: '#FFB800', formatter: function(v) { return v.toFixed(1); } },
+        splitLine: { show: false }
+      }
+    ],
+    series: [
+      {
+        name: 'Input',
+        type: 'bar',
+        stack: 'tokens',
+        data: modelInput,
+        itemStyle: { color: '#00D1FF' },
+        barMaxWidth: 40
+      },
+      {
+        name: 'Cache',
+        type: 'bar',
+        stack: 'tokens',
+        data: modelCache,
+        itemStyle: { color: '#00F593' },
+        barMaxWidth: 40,
+        label: {
+          show: true,
+          position: 'inside',
+          formatter: function(p) {
+            var cache = modelCache[p.dataIndex];
+            var input = modelInput[p.dataIndex];
+            if (cache === 0) return '';
+            return (cache / (input + cache) * 100).toFixed(0) + '%';
+          },
+          color: '#fff', fontSize: 10, fontWeight: 'bold'
+        }
+      },
+      {
+        name: 'Output',
+        type: 'bar',
+        stack: 'tokens',
+        data: modelOutput,
+        itemStyle: { color: '#B545FF' },
+        barMaxWidth: 40,
+        label: {
+          show: true,
+          position: 'top',
+          formatter: function(p) {
+            var total = modelInput[p.dataIndex] + modelOutput[p.dataIndex] + modelCache[p.dataIndex];
+            return total > 0 ? fmt(total) : '';
+          },
+          color: '#fff', fontSize: 10, fontWeight: 'bold'
+        }
+      },
+      {
+        name: 'TPS',
+        type: 'scatter',
+        yAxisIndex: 1,
+        data: modelTps,
+        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 > 0 ? p.value.toFixed(1) : ''; },
+          color: '#FFB800', fontSize: 10
+        }
+      }
+    ]
+  };
+  chart.setOption(option);
+  chart.resize();
+}`;
+}
+function renderScatterChartInit(data) {
+  const validPerf = data.perfSummary.filter(
+    (p) => p.requestCount > 0 && p.totalInput + p.totalOutput + p.totalCacheRead + p.totalCacheWrite > 0
+  );
+  if (validPerf.length === 0) return "";
+  const sorted = [...validPerf].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 * 1e3 : 0;
+  });
+  const hitRates = sorted.map((p) => p.cacheHitRate ?? 0);
+  const reqCounts = sorted.map((p) => p.requestCount);
+  return `
+var effNames = ${jsonLit(names)};
+var effTps   = ${jsonLit(tpsValues)};
+var effTtft  = ${jsonLit(ttftValues)};
+var effCost  = ${jsonLit(costValues)};
+var effHit   = ${jsonLit(hitRates)};
+var effReq   = ${jsonLit(reqCounts)};
+
+function initScatterChart() {
+  var el = document.getElementById('scatter-chart');
+  if (!el) return;
+  var chart = echarts.init(el);
+  window.scatterChart = chart;
+
+  // TPS \u8D8A\u9AD8\u8D8A\u7EFF\uFF0C\u8D8A\u4F4E\u8D8A\u7D2B\uFF0C\u65E0\u6570\u636E\u4E3A\u7070
+  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 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/>' +
+          '\u{1F4B0} Cost/1K: ' + cost + '<br/>' +
+          '\u{1F4BE} Cache Hit: ' + hit + '<br/>' +
+          'Requests: ' + effReq[i];
+      }
+    },
+    grid: { left: 20, right: 280, bottom: 30, top: 20, containLabel: true },
+    xAxis: {
+      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: '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: 'bar',
+      data: effTps.map(function(v, i) {
+        return { value: v > 0 ? v : 0.001, itemStyle: { color: barColors[i], borderRadius: [0, 4, 4, 0] } };
+      }),
+      barMaxWidth: 22,
+      label: {
+        show: true,
+        position: 'right',
+        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('$' + 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" };
+  return colors[provider] || "#2A2A35";
+}
+function renderProviderCards(data) {
+  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;
+    for (const x of perfItems) {
+      if (x.avgTTFT != null && x.avgTTFT > 0) {
+        ttftSum += x.avgTTFT * x.ttftCount;
+        ttftReqs += x.ttftCount;
+      }
+    }
+    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.tpsCount;
+        tpsReqs += x.tpsCount;
+      }
+    }
+    const avgTps = tpsReqs > 0 ? tpsSum / tpsReqs : null;
+    return `
+    <div class="provider-card" style="border-color:${providerBorderColor(p.provider)}">
+      <div class="provider-name">${escapeHtml(p.provider)}</div>
+      <div class="provider-stat"><span class="stat-label">Tokens</span><span>${formatTokens(p.totalTokens)}</span></div>
+      <div class="provider-stat"><span class="stat-label">Cost</span><span>${formatCost(p.totalCost)}</span></div>
+      <div class="provider-stat"><span class="stat-label">Avg TTFT</span><span>${avgTtft != null ? avgTtft.toFixed(0) + "ms" : "\u2014"}</span></div>
+      <div class="provider-stat"><span class="stat-label">Avg TPS</span><span>${avgTps != null ? avgTps.toFixed(1) : "\u2014"}</span></div>
+      <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 renderModelAnalyticsSection(data) {
+  const usageRows = sortModelsByUsage(data.models).map((m) => {
+    const hitRate = cacheHitRate(m.inputTokens, m.cacheRead);
+    const hitColor = hitRate >= 0.85 ? "var(--cache)" : hitRate >= 0.7 ? "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" : "\u2014";
+    const p95ttft = perf?.p95TTFT != null ? perf.p95TTFT.toFixed(0) + "ms" : "\u2014";
+    const tps = perf?.avgTPS != null ? perf.avgTPS.toFixed(1) : "\u2014";
+    return `<tr>
+      <td>${escapeHtml(m.model)}</td>
+      <td>${escapeHtml(m.provider)}</td>
+      <td>${m.requests}</td>
+      <td>${formatTokens(m.totalTokens)}</td>
+      <td>${formatTokens(m.inputTokens)}</td>
+      <td>${formatTokens(m.outputTokens)}</td>
+      <td>${formatTokens(m.cacheRead)}</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>${formatCost(m.totalCost)}</td>
+    </tr>`;
+  }).join("\n");
+  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" : "\u2014";
+  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>
+      <td>${escapeHtml(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) + "%" : "\u2014"}</td>
+    </tr>`;
+  }).join("\n");
+  const errors = data.errors;
+  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) + "%" : "\u2014";
+      return `<tr>
+          <td>${escapeHtml(m.provider)}</td>
+          <td>${escapeHtml(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>${errorRows}</tbody>
+      </table>
+      <div class="pagination-ctrl" id="errors-table-ctrl">
+        <button class="page-btn" id="errors-table-prev">\u2190 Prev</button>
+        <span class="page-info" id="errors-table-info"></span>
+        <button class="page-btn" id="errors-table-next">Next \u2192</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">\u2190 Prev</button>
+        <span class="page-info" id="usage-table-info"></span>
+        <button class="page-btn" id="usage-table-next">Next \u2192</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">\u2190 Prev</button>
+        <span class="page-info" id="perf-table-info"></span>
+        <button class="page-btn" id="perf-table-next">Next \u2192</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);
+  const tokens = data.daily.slice().reverse().map((d) => d.totalTokens);
+  const costs = data.daily.slice().reverse().map((d) => d.totalCost);
+  return `
+var dailyDays = ${jsonLit(days)};
+var dailyTokens = ${jsonLit(tokens)};
+var dailyCosts = ${jsonLit(costs)};
+
+function initDailyChart() {
+  var el = document.getElementById('daily-chart');
+  if (!el) return;
+  var chart = echarts.init(el);
+  window.dailyChart = chart;
+  var option = {
+    tooltip: {
+      trigger: 'axis',
+      formatter: function(params) {
+        var html = '<b>' + params[0].axisValue + '</b><br/>';
+        params.forEach(function(p) {
+          html += p.marker + ' ' + p.seriesName + ': ' + (p.seriesName === 'Cost' ? '$' + p.value.toFixed(4) : fmt(p.value)) + '<br/>';
+        });
+        return html;
+      }
+    },
+    legend: {
+      data: ['Tokens', 'Cost'],
+      textStyle: { color: '#B0B0C0' },
+      top: 5
+    },
+    grid: { left: 60, right: 60, bottom: 80, top: 40 },
+    xAxis: {
+      type: 'category',
+      data: dailyDays,
+      axisLabel: { color: '#B0B0C0', rotate: 45, interval: 0, fontSize: 10 },
+      axisLine: { lineStyle: { color: '#2A2A35' } }
+    },
+    yAxis: [
+      {
+        type: 'value',
+        name: 'Tokens',
+        nameTextStyle: { color: '#B0B0C0' },
+        axisLabel: { color: '#B0B0C0', formatter: fmt },
+        splitLine: { lineStyle: { color: '#2A2A35', type: 'dashed' } }
+      },
+      {
+        type: 'value',
+        name: 'Cost',
+        nameTextStyle: { color: '#FFB800' },
+        axisLabel: { color: '#FFB800', formatter: function(v) { return '$' + v.toFixed(4); } },
+        splitLine: { show: false }
+      }
+    ],
+    dataZoom: [{
+      type: 'slider',
+      bottom: 5,
+      height: 20,
+      borderColor: '#2A2A35',
+      fillerColor: 'rgba(0,213,255,0.1)',
+      handleStyle: { color: '#00D1FF' },
+      textStyle: { color: '#B0B0C0' }
+    }],
+    series: [
+      {
+        name: 'Tokens',
+        type: 'line',
+        data: dailyTokens,
+        smooth: true,
+        symbol: 'none',
+        lineStyle: { color: '#00D1FF', width: 2 },
+        areaStyle: { color: 'rgba(0,209,255,0.15)' }
+      },
+      {
+        name: 'Cost',
+        type: 'line',
+        yAxisIndex: 1,
+        data: dailyCosts,
+        smooth: true,
+        symbol: 'none',
+        lineStyle: { color: '#FFB800', width: 2 },
+        areaStyle: { color: 'rgba(255,184,0,0.1)' }
+      }
+    ]
+  };
+  chart.setOption(option);
+  chart.resize();
+}`;
+}
+function renderHeatmapInit(data) {
+  const days = data.daily.slice().reverse();
+  const heatData = days.map((d) => [d.day, Math.log10(d.totalTokens + 1)]);
+  const minDate = days.length > 0 ? days[0].day : "";
+  const maxDate = days.length > 0 ? days[days.length - 1].day : "";
+  return `
+var heatData = ${jsonLit(heatData)};
+
+function initHeatmapChart() {
+  var el = document.getElementById('heatmap-chart');
+  if (!el) return;
+  var chart = echarts.init(el);
+  window.heatmapChart = chart;
+  var option = {
+    tooltip: {
+      formatter: function(params) {
+        var val = params.value;
+        var rawTokens = Math.pow(10, val[1]) - 1;
+        return '<b>' + val[0] + '</b><br/>Tokens: ' + fmt(Math.round(rawTokens));
+      }
+    },
+    visualMap: {
+      min: 0,
+      max: Math.max.apply(null, heatData.map(function(d) { return d[1]; })) || 5,
+      calculable: true,
+      orient: 'horizontal',
+      left: 'center',
+      bottom: 10,
+      textStyle: { color: '#B0B0C0' },
+      inRange: {
+        color: ['#0C0C0E', '#1a3a2a', '#00F593', '#00D1FF', '#B545FF']
+      }
+    },
+    calendar: {
+      left: 30,
+      right: 30,
+      top: 20,
+      bottom: 60,
+      range: ['${escapeHtml(minDate)}', '${escapeHtml(maxDate)}'],
+      splitLine: { lineStyle: { color: '#2A2A35' } },
+      dayLabel: { color: '#B0B0C0' },
+      monthLabel: { color: '#B0B0C0' },
+      yearLabel: { color: '#B0B0C0' },
+      itemStyle: { color: '#16161A', borderColor: '#0C0C0E', borderWidth: 2 }
+    },
+    series: [{
+      type: 'heatmap',
+      coordinateSystem: 'calendar',
+      data: heatData
+    }]
+  };
+  chart.setOption(option);
+  chart.resize();
+}`;
+}
+function generateUsageHtml(data) {
+  const metaStr = renderMeta(data);
+  const kpiStr = renderKpiCards(data);
+  const modelChartVisible = data.models.filter((m) => m.totalTokens >= 1e6).length > 0;
+  const modelChartJs = modelChartVisible ? renderModelChartInit(data) : "";
+  const scatterChartJs = renderScatterChartInit(data);
+  const providerStr = renderProviderCards(data);
+  const modelAnalyticsStr = renderModelAnalyticsSection(data);
+  const dailyChartJs = renderDailyTrendInit(data);
+  const heatmapJs = renderHeatmapInit(data);
+  const hasPerf = data.perfSummary.some(
+    (p) => p.requestCount > 0 && p.totalInput + p.totalOutput + p.totalCacheRead + p.totalCacheWrite > 0
+  );
+  const jsonData = jsonLit(data);
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>TokenWatch Usage Report</title>
+<style>
+  /* \u4F7F\u7528\u7CFB\u7EDF\u5B57\u4F53 stack\uFF0C\u65E0\u9700\u52A0\u8F7D\u5916\u90E8\u5B57\u4F53 */
+  :root {
+    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
+    --font-mono: 'JetBrains Mono', 'Cascadia Code', 'Fira Code', 'Consolas', 'Monaco', monospace;
+  }
+</style>
+<!-- ECharts: \u591A CDN fallback (staticfile -> bootcdn -> cdnjs -> unpkg -> jsDelivr) -->
+<script>
+(function() {
+  var cdns = [
+    'https://cdn.staticfile.org/echarts/5.5.0/echarts.min.js',
+    'https://cdn.bootcdn.net/ajax/libs/echarts/5.5.0/echarts.min.js',
+    'https://cdnjs.cloudflare.com/ajax/libs/echarts/5.5.0/echarts.min.js',
+    'https://unpkg.com/echarts@5.5.0/dist/echarts.min.js',
+    'https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js'
+  ];
+  var idx = 0;
+  function loadNext() {
+    if (idx >= cdns.length) {
+      var err = document.getElementById('echarts-error');
+      if (err) err.style.display = 'block';
+      return;
+    }
+    var s = document.createElement('script');
+    s.src = cdns[idx++];
+    s.onload = function() {
+      if (typeof window.tryInitCharts === 'function') {
+        window.tryInitCharts();
+      }
+    };
+    s.onerror = loadNext;
+    document.head.appendChild(s);
+  }
+  loadNext();
+})();
+</script>
+<style>
+  :root {
+    --bg: #0C0C0E;
+    --card: #16161A;
+    --border: #2A2A35;
+    --text: #E0E0F0;
+    --text-dim: #B0B0C0;
+    --cache: #00F593;
+    --input: #00D1FF;
+    --output: #B545FF;
+    --tps: #FFB800;
+    --radius: 8px;
+  }
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  body {
+    background: var(--bg);
+    color: var(--text);
+    font-family: var(--font-sans);
+    font-size: 14px;
+    line-height: 1.5;
+    min-height: 100vh;
+  }
+  .container { max-width: 1400px; margin: 0 auto; padding: 24px 20px; }
+  .header {
+    display: flex; justify-content: space-between; align-items: center;
+    padding: 16px 0; border-bottom: 1px solid var(--border); margin-bottom: 24px;
+  }
+  .header h1 { font-size: 22px; font-weight: 600; color: var(--text); }
+  .header h1 span { color: var(--input); }
+  .header .meta { font-size: 12px; color: var(--text-dim); font-family: var(--font-mono); }
+
+  .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;
+  }
+  .kpi-card.kpi-glow { box-shadow: 0 0 20px rgba(0,245,147,0.15); border-color: var(--cache); }
+  .kpi-label { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
+  .kpi-value { font-size: 26px; font-weight: 700; font-family: var(--font-mono); color: var(--text); }
+
+  .section { margin-bottom: 28px; }
+  .section-title {
+    font-size: 16px; font-weight: 600; margin-bottom: 12px;
+    padding-bottom: 6px; border-bottom: 1px solid var(--border);
+  }
+  .chart-box {
+    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
+    padding: 12px; height: 400px;
+  }
+
+  .tab-bar { display: flex; gap: 4px; margin-bottom: 12px; }
+  .tab-btn {
+    background: var(--card); border: 1px solid var(--border); color: var(--text-dim);
+    padding: 6px 18px; border-radius: 4px 4px 0 0; cursor: pointer; font-size: 13px; font-family: var(--font-sans);
+  }
+  .tab-btn:hover { border-color: var(--input); color: var(--text); }
+  .tab-btn.active {
+    background: var(--border); color: var(--text); border-bottom-color: var(--border);
+  }
+  .tab-content { display: none; }
+  .tab-content.active { display: block; }
+
+  .provider-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
+  .provider-card {
+    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
+    padding: 14px;
+  }
+  .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 {
+    background: var(--card); color: var(--text-dim); padding: 8px 10px;
+    text-align: right; border-bottom: 1px solid var(--border); font-weight: 500;
+    white-space: nowrap;
+  }
+  .data-table th:first-child { text-align: left; }
+  .data-table td {
+    padding: 6px 10px; text-align: right; border-bottom: 1px solid var(--border);
+    font-family: var(--font-mono);
+  }
+  .data-table td:first-child {
+    text-align: left; color: var(--text); font-family: var(--font-sans);
+  }
+  .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: var(--font-sans); 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: var(--font-mono); 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);
+  }
+
+  .footer {
+    margin-top: 40px; padding: 16px 0; border-top: 1px solid var(--border);
+    text-align: center; font-size: 11px; color: var(--text-dim);
+  }
+
+  @media (max-width: 768px) {
+    .kpi-row { grid-template-columns: repeat(2, 1fr); }
+    .provider-row { grid-template-columns: 1fr; }
+    .container { padding: 12px 10px; }
+    .header { flex-direction: column; gap: 6px; align-items: flex-start; }
+    .chart-box { height: 300px; }
+    .data-table { font-size: 11px; }
+    .data-table th, .data-table td { padding: 4px 6px; }
+  }
+</style>
+</head>
+<body>
+<div id="echarts-error" style="display:none;position:fixed;top:0;left:0;right:0;padding:14px 24px;background:#7f1d1d;color:#fca5a5;font-size:13px;z-index:9999;text-align:center">
+  \u26A0\uFE0F \u56FE\u8868\u5E93\u52A0\u8F7D\u5931\u8D25\uFF08ECharts CDN \u5747\u65E0\u6CD5\u8BBF\u95EE\uFF09\u3002\u8BF7\u68C0\u67E5\u7F51\u7EDC\u8FDE\u63A5\u540E\u5237\u65B0\u9875\u9762\uFF0C\u6216\u5728\u79BB\u7EBF\u73AF\u5883\u4E0B\u5C06 ECharts JS \u6587\u4EF6\u4E0B\u8F7D\u5230\u672C\u5730\u540E\u624B\u52A8\u5F15\u5165\u3002
+</div>
+<div class="container">
+  <div class="header">
+    <h1><span>TokenWatch</span> Usage Report</h1>
+    <div class="meta">${metaStr}</div>
+  </div>
+
+  ${kpiStr}
+
+  <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 &ge;1M tokens in this period.</div>'}
+  </div>
+
+  <div class="section">
+    <div class="section-title">Provider Summary</div>
+    <div class="provider-row">${providerStr}</div>
+  </div>
+
+  ${modelAnalyticsStr}
+
+  <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>'}
+  </div>
+
+  <div class="section">
+    <div class="section-title">Usage Timeline</div>
+    ${data.dailyTruncated ? '<div class="provider-more">\u26A0\uFE0F \u65E5\u671F\u660E\u7EC6\u8D85\u51FA\u6570\u636E\u6E90\u4E0A\u9650\u5DF2\u88AB\u622A\u65AD\uFF0C\u672C\u56FE\u8868\u4EC5\u8986\u76D6\u5176\u4E2D\u6700\u8FD1\u7684\u65E5\u671F\uFF1B\u6C47\u603B\u6570\u5B57\uFF08KPI/\u8868\u683C\uFF09\u4E0D\u53D7\u5F71\u54CD\u3002</div>' : ""}
+    <div class="tab-bar">
+      <button class="tab-btn active" data-tab="daily" onclick="switchTab('daily')">Daily Trend</button>
+      <button class="tab-btn" data-tab="heatmap" onclick="switchTab('heatmap')">Heatmap</button>
+    </div>
+    <div id="tab-daily" class="tab-content active">
+      <div class="chart-box" id="daily-chart"></div>
+    </div>
+    <div id="tab-heatmap" class="tab-content">
+      <div class="chart-box" id="heatmap-chart"></div>
+    </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>
+
+<script id="report-data" type="application/json">${jsonData}</script>
+
+<script>
+var fmt = function(v) {
+  if (v == null) return '\u2014';
+  if (v >= 1000000000) return (v/1000000000).toFixed(1)+'B';
+  if (v >= 1000000) return (v/1000000).toFixed(1)+'M';
+  if (v >= 1000) return (v/1000).toFixed(1)+'K';
+  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[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() {
+    if (name === 'daily' && window.dailyChart) window.dailyChart.resize();
+    if (name === 'heatmap' && window.heatmapChart) window.heatmapChart.resize();
+  }, 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; // \u884C\u6570\u4E0D\u8D85\u8FC7\u4E00\u9875\u65F6\u65E0\u9700\u5206\u9875
+  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}
+${heatmapJs}
+
+window.downloadJSON = function() {
+  var d = document.getElementById('report-data');
+  if (!d) return;
+  var b = new Blob([d.textContent], { type: 'application/json' });
+  var a = document.createElement('a');
+  a.href = URL.createObjectURL(b);
+  a.download = 'tokenwatch-data.json';
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+  setTimeout(function() { URL.revokeObjectURL(a.href); }, 100);
+};
+
+window.tryInitCharts = function() {
+  if (typeof echarts === 'undefined' || window.__chartsInitialized) return;
+  window.__chartsInitialized = true;
+  ${modelChartVisible ? "initModelChart();" : ""}
+  ${hasPerf ? "initScatterChart();" : ""}
+  initDailyChart();
+  initHeatmapChart();
+};
+
+document.addEventListener('DOMContentLoaded', function() {
+  initPaginator('usage-table', 10);
+  initPaginator('perf-table', 10);
+  initPaginator('errors-table', 10);
+  window.tryInitCharts();
+});
+
+window.addEventListener('resize', function() {
+  ${modelChartVisible ? "if (window.modelChart) window.modelChart.resize();" : ""}
+  if (window.scatterChart) window.scatterChart.resize();
+  if (window.dailyChart) window.dailyChart.resize();
+  if (window.heatmapChart) window.heatmapChart.resize();
+});
+</script>
+</body>
+</html>`;
+}
+
+// src/kernel/report.ts
+function localDateStr(d) {
+  const pad = (n) => String(n).padStart(2, "0");
+  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
+}
+function ensureReportDir() {
+  const dir = join4(homedir3(), ".opencode", "reports");
+  if (!existsSync3(dir)) mkdirSync(dir, { recursive: true });
+  return dir;
+}
+function openInBrowser(filePath) {
+  try {
+    const platform = process.platform;
+    let child;
+    if (platform === "win32") {
+      child = spawn("cmd.exe", ["/d", "/s", "/c", "start", "", filePath], {
+        detached: true,
+        stdio: "ignore",
+        windowsHide: true
+      });
+    } else if (platform === "darwin") {
+      child = spawn("open", [filePath], { detached: true, stdio: "ignore" });
+    } else {
+      child = spawn("xdg-open", [filePath], { detached: true, stdio: "ignore" });
+    }
+    child.once("error", () => {
+    });
+    child.unref();
+  } catch {
+  }
+}
+function getRangeSlug(filters, presetTag) {
+  if (presetTag) return presetTag;
+  if (!filters.startDate && !filters.endDate) return "all";
+  if (filters.startDate && filters.endDate) {
+    if (filters.startDate === filters.endDate) {
+      const today = localDateStr(/* @__PURE__ */ new Date());
+      if (filters.startDate === today) return "today";
+      return filters.startDate;
+    }
+    return `${filters.startDate.replace(/-/g, "")}_${filters.endDate.replace(/-/g, "")}`;
+  }
+  if (filters.startDate) return `from_${filters.startDate.replace(/-/g, "")}`;
+  if (filters.endDate) return `until_${filters.endDate.replace(/-/g, "")}`;
+  return "custom";
+}
+function generateUniqueReportPath(dir, rangeSlug) {
+  const dateStr = localDateStr(/* @__PURE__ */ new Date());
+  const baseName = `tokenwatch-${rangeSlug}-${dateStr}`;
+  let targetPath = join4(dir, `${baseName}.html`);
+  if (!existsSync3(targetPath)) return targetPath;
+  const now = /* @__PURE__ */ new Date();
+  const pad = (n) => String(n).padStart(2, "0");
+  const timeSuffix = `${pad(now.getHours())}${pad(now.getMinutes())}${pad(now.getSeconds())}`;
+  targetPath = join4(dir, `${baseName}_${timeSuffix}.html`);
+  let counter = 1;
+  while (existsSync3(targetPath)) {
+    targetPath = join4(dir, `${baseName}_${timeSuffix}_${counter}.html`);
+    counter++;
+  }
+  return targetPath;
+}
+function nowStamp() {
+  const now = /* @__PURE__ */ new Date();
+  const pad = (n) => String(n).padStart(2, "0");
+  return `${now.getFullYear()}-${pad(now.getMonth() + 1)}-${pad(now.getDate())} ${pad(now.getHours())}:${pad(now.getMinutes())}:${pad(now.getSeconds())}`;
+}
+function buildCombinedData(usage) {
+  const logs = readLogs(200);
+  const perfSummary = readPersistedStats();
+  const daily = usage.daily ?? [];
+  const meta = {
+    generatedAt: nowStamp(),
+    dateRange: {
+      start: daily.length > 0 ? daily[daily.length - 1].day : "\u2014",
+      end: daily.length > 0 ? daily[0].day : "\u2014"
+    }
+  };
+  return {
+    ...usage,
+    perfLogs: logs,
+    perfSummary,
+    meta
+  };
+}
+function writeHtmlReport(data, rangeSlug) {
+  const html = generateUsageHtml(data);
+  const dir = ensureReportDir();
+  const filePath = generateUniqueReportPath(dir, rangeSlug);
+  writeFileSync3(filePath, html, "utf-8");
+  return filePath;
+}
+
+// src/host/v1/commands.tsx
+import { writeFileSync as writeFileSync4 } from "node:fs";
+import { join as join5 } from "node:path";
+async function registerCommands(api) {
+  api.command?.register(() => [{
+    value: "tokenwatch-usage",
+    title: "TokenWatch",
+    description: "Token usage reports, export, and settings",
+    category: "Stats",
+    slash: {
+      name: "usage"
+    },
+    onSelect: async (dialog) => {
+      if (dialog) showUsageMenu(api, dialog);
+    }
+  }]);
+}
+function loadConfigFromStore(api) {
+  let pluginConfig;
+  try {
+    pluginConfig = api.state?.config;
+  } catch {
+  }
+  return loadConfig(makeStore(api), pluginConfig);
+}
+function showHtmlReport(api, filters = {}, presetTag) {
+  void (async () => {
+    try {
+      const usage = await getUsageReport(filters);
+      const data = buildCombinedData(usage);
+      const filePath = writeHtmlReport(data, getRangeSlug(filters, presetTag));
+      api.ui.toast?.({
+        message: `Report: ${filePath}`,
+        variant: "info"
+      });
+      openInBrowser(filePath);
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : String(err);
+      api.ui.toast?.({
+        message: `Error: ${msg}`,
+        variant: "error"
+      });
+    }
+  })();
+}
+function showHtmlReportRangeMenu(api, dialog) {
+  dialog.replace(() => _$createComponent3(api.ui.DialogSelect, {
+    get title() {
+      return t("cmdTitleHtml");
+    },
+    placeholder: "Select date range...",
+    get options() {
+      return [{
+        title: t("menuToday"),
+        value: "today",
+        onSelect: () => {
+          dialog.clear();
+          const today = localDateStr(/* @__PURE__ */ new Date());
+          showHtmlReport(api, {
+            startDate: today,
+            endDate: today
+          }, "today");
+        }
+      }, {
+        title: t("menu7d"),
+        value: "7d",
+        onSelect: () => {
+          dialog.clear();
+          showHtmlReport(api, getPresetRange("7d"), "7d");
+        }
+      }, {
+        title: t("menu30d"),
+        value: "30d",
+        onSelect: () => {
+          dialog.clear();
+          showHtmlReport(api, getPresetRange("30d"), "30d");
+        }
+      }, {
+        title: t("menuAll"),
+        value: "all",
+        onSelect: () => {
+          dialog.clear();
+          showHtmlReport(api, getPresetRange("all"), "all");
+        }
+      }];
+    },
+    flat: true
+  }));
+}
+function showUsageMenu(api, dialog) {
+  try {
+    setLanguage(loadConfigFromStore(api).language);
+  } catch {
+  }
+  dialog.replace(() => _$createComponent3(api.ui.DialogSelect, {
+    get title() {
+      return t("panelTitle");
+    },
+    placeholder: "Select an action...",
+    get options() {
+      return [{
+        title: `${t("cmdTitleHtml")} \u25B8`,
+        value: "html",
+        description: t("cmdDescHtml"),
+        onSelect: () => showHtmlReportRangeMenu(api, dialog)
+      }, {
+        title: t("cmdTitleJson"),
+        value: "json",
+        description: t("cmdDescJson"),
+        onSelect: () => {
+          dialog.clear();
+          showJsonExport(api);
+        }
+      }, {
+        title: t("cmdTitleText"),
+        value: "text",
+        description: t("cmdDescText"),
+        onSelect: () => {
+          dialog.clear();
+          showTextReport(api);
+        }
+      }, {
+        title: `${t("cmdTitleSettings")} \u25B8`,
+        value: "settings",
+        description: t("cmdDescSettings"),
+        onSelect: () => showSettingsDialog(api, dialog)
+      }];
+    },
+    flat: true
+  }));
+}
+async function showJsonExport(api) {
+  try {
+    const report = await getUsageReport({});
+    const dir = ensureReportDir();
+    const dateStr = localDateStr(/* @__PURE__ */ new Date());
+    const filePath = join5(dir, `tokenwatch-${dateStr}.json`);
+    writeFileSync4(filePath, JSON.stringify(report, null, 2), "utf-8");
+    api.ui.toast?.({
+      message: `JSON: ${filePath}`,
+      variant: "info"
+    });
+  } catch (err) {
+    const msg = err instanceof Error ? err.message : String(err);
+    api.ui.toast?.({
+      message: `Error: ${msg}`,
+      variant: "error"
+    });
+  }
+}
+async function showTextReport(api) {
+  try {
+    const report = await getUsageReport({});
+    const formatted = formatUsageReport(report);
+    const dir = ensureReportDir();
+    const dateStr = localDateStr(/* @__PURE__ */ new Date());
+    const filePath = join5(dir, `tokenwatch-${dateStr}.md`);
+    writeFileSync4(filePath, formatted, "utf-8");
+    api.ui.toast?.({
+      message: `Report saved to ${filePath}`,
+      variant: "info"
+    });
+  } catch (err) {
+    const msg = err instanceof Error ? err.message : String(err);
+    api.ui.toast?.({
+      message: `Error: ${msg}`,
+      variant: "error"
+    });
+  }
+}
+var lastSelectedSetting;
+function showSettingsDialog(api, dialog) {
+  if (!dialog) return;
+  const reopen = (value) => {
+    lastSelectedSetting = value;
+    setTimeout(() => showSettingsDialog(api, dialog), 0);
+  };
+  const cfg = loadConfigFromStore(api).sidebar;
+  dialog.replace(() => _$createComponent3(api.ui.DialogSelect, {
+    get title() {
+      return t("settingsTitle");
+    },
+    get placeholder() {
+      return t("settingsPlaceholder");
+    },
+    get options() {
+      return [{
+        title: `${cfg.showPerformance ? "\u2713 " : "  "}${t("showPerformance")}`,
+        value: "showPerformance",
+        description: t("descShowPerformance"),
+        onSelect: () => {
+          toggleSidebarSetting2(api, "showPerformance");
+          reopen("showPerformance");
+        }
+      }, {
+        title: `${cfg.showPricing ? "\u2713 " : "  "}${t("showPricing")}`,
+        value: "showPricing",
+        description: t("descShowPricing"),
+        onSelect: () => {
+          toggleSidebarSetting2(api, "showPricing");
+          reopen("showPricing");
+        }
+      }, {
+        title: `${cfg.showTokenDistribution ? "\u2713 " : "  "}${t("showTokenDistribution")}`,
+        value: "showTokenDistribution",
+        description: t("descShowTokenDistribution"),
+        onSelect: () => {
+          toggleSidebarSetting2(api, "showTokenDistribution");
+          reopen("showTokenDistribution");
+        }
+      }, {
+        title: `${cfg.showTrend ? "\u2713 " : "  "}${t("showTrend")}`,
+        value: "showTrend",
+        description: t("descShowTrend"),
+        onSelect: () => {
+          toggleSidebarSetting2(api, "showTrend");
+          reopen("showTrend");
+        }
+      }, {
+        title: `${t("settingsLanguage")} \u25B8`,
+        value: "language",
+        description: t("descSettingsLanguage"),
+        onSelect: () => showLanguageMenu(api, dialog)
+      }, {
+        title: t("done"),
+        value: "done",
+        description: t("closeSettings"),
+        onSelect: () => {
+          lastSelectedSetting = void 0;
+          dialog.clear();
+        }
+      }];
+    },
+    flat: true,
+    current: lastSelectedSetting
+  }));
+}
+function showLanguageMenu(api, dialog) {
+  const current = loadConfigFromStore(api).language;
+  dialog.replace(() => _$createComponent3(api.ui.DialogSelect, {
+    get title() {
+      return t("settingsLanguage");
+    },
+    get placeholder() {
+      return t("settingsLanguage");
+    },
+    get options() {
+      return [{
+        title: `${current === "auto" ? "\u2713 " : "  "}${t("langAuto")}`,
+        value: "auto",
+        description: "\u81EA\u52A8\u68C0\u6D4B / Auto-detect",
+        onSelect: () => {
+          setLanguageSetting2(api, "auto");
+          lastSelectedSetting = "language";
+          dialog.clear();
+          showSettingsDialog(api, dialog);
+        }
+      }, {
+        title: `${current === "zh" ? "\u2713 " : "  "}\u4E2D\u6587`,
+        value: "zh",
+        description: "\u7B80\u4F53\u4E2D\u6587",
+        onSelect: () => {
+          setLanguageSetting2(api, "zh");
+          lastSelectedSetting = "language";
+          dialog.clear();
+          showSettingsDialog(api, dialog);
+        }
+      }, {
+        title: `${current === "en" ? "\u2713 " : "  "}English`,
+        value: "en",
+        description: "English",
+        onSelect: () => {
+          setLanguageSetting2(api, "en");
+          lastSelectedSetting = "language";
+          dialog.clear();
+          showSettingsDialog(api, dialog);
+        }
+      }];
+    },
+    flat: true
+  }));
+}
+function setLanguageSetting2(api, lang) {
+  setLanguageSetting(makeStore(api), lang);
+  setLanguage(lang);
+}
+function toggleSidebarSetting2(api, key) {
+  toggleSidebarSetting(makeStore(api), key);
+}
+
+// src/host/v2/data-source.ts
+var cache = null;
+var inflight = null;
+var dirty = false;
+function dayOf(ts) {
+  const d = new Date(ts);
+  const y = d.getFullYear();
+  const m = String(d.getMonth() + 1).padStart(2, "0");
+  const day = String(d.getDate()).padStart(2, "0");
+  return `${y}-${m}-${day}`;
+}
+function matchesDay(day, filters) {
+  if (filters.startDate && day < filters.startDate) return false;
+  if (filters.endDate && day > filters.endDate) return false;
+  return true;
+}
+function matchesModel(provider, model, filters) {
+  if (filters.model && model !== filters.model) return false;
+  if (filters.provider && provider !== filters.provider) return false;
+  return true;
+}
+function yieldToEventLoop() {
+  return new Promise((resolve) => setTimeout(resolve, 0));
+}
+var MAX_SESSION_PAGES = 64;
+var MAX_MESSAGE_PAGES = 400;
+async function listAllSessions(ctx) {
+  const api = ctx?.client;
+  if (typeof api?.session?.list !== "function") {
+    return { sessions: ctx?.data?.session?.list?.() ?? [], truncated: false };
+  }
+  const out = [];
+  let cursor;
+  for (let page = 0; page < MAX_SESSION_PAGES; page++) {
+    const input = cursor ? { cursor } : { limit: 500, order: "asc" };
+    const resp = await api.session.list(input);
+    out.push(...resp?.data ?? []);
+    cursor = resp?.cursor?.next ?? void 0;
+    if (!cursor) break;
+  }
+  return { sessions: out, truncated: cursor != null };
+}
+async function listAllMessages(ctx, sessionID) {
+  const api = ctx?.client;
+  if (typeof api?.message?.list !== "function") {
+    try {
+      await ctx?.data?.session?.message?.sync?.(sessionID);
+    } catch {
+    }
+    return { messages: ctx?.data?.session?.message?.list?.(sessionID) ?? [], truncated: false };
+  }
+  const out = [];
+  let cursor;
+  for (let page = 0; page < MAX_MESSAGE_PAGES; page++) {
+    const resp = await (cursor ? api.message.list({ sessionID, cursor }) : api.message.list({ sessionID, limit: 200, order: "desc" }));
+    out.push(...resp?.data ?? []);
+    cursor = resp?.cursor?.next ?? void 0;
+    if (!cursor) break;
+  }
+  return { messages: out, truncated: cursor != null };
+}
+function isAssistantMessage(message) {
+  return message?.type === "assistant" || message?.role === "assistant";
+}
+async function scan(ctx) {
+  const sessionAgg = /* @__PURE__ */ new Map();
+  const modelAgg = /* @__PURE__ */ new Map();
+  const providerAgg = /* @__PURE__ */ new Map();
+  const dailyAgg = /* @__PURE__ */ new Map();
+  const modelSessions = /* @__PURE__ */ new Map();
+  const providerSessions = /* @__PURE__ */ new Map();
+  const dailySessions = /* @__PURE__ */ new Map();
+  const errorByModel = /* @__PURE__ */ new Map();
+  let successCount = 0;
+  let failedCount = 0;
+  const { sessions, truncated: sessionsTruncated } = await listAllSessions(ctx);
+  let skippedSessions = 0;
+  let truncatedMessageSessions = 0;
+  for (const session of sessions) {
+    const sessionID = session?.id;
+    if (!sessionID) continue;
+    let messages;
+    try {
+      const result = await listAllMessages(ctx, sessionID);
+      messages = result.messages;
+      if (result.truncated) truncatedMessageSessions++;
+    } catch {
+      skippedSessions++;
+      continue;
+    }
+    let sawAssistant = false;
+    for (const message of messages) {
+      if (!isAssistantMessage(message)) continue;
+      const tokens = message?.tokens;
+      if (!tokens) continue;
+      const input = tokens.input ?? 0;
+      const output = tokens.output ?? 0;
+      const reasoning = tokens.reasoning ?? 0;
+      const cacheRead = tokens.cache?.read ?? 0;
+      const cacheWrite = tokens.cache?.write ?? 0;
+      const total = input + output + reasoning + cacheRead + cacheWrite;
+      const cost = typeof message?.cost === "number" ? message.cost : 0;
+      const provider = message?.model?.providerID ?? "unknown";
+      const model = message?.model?.id ?? "unknown";
+      const day = dayOf(message?.time?.created ?? session?.time?.created ?? Date.now());
+      const isFailure = message?.finish === "error" || total === 0;
+      const modelKey = `${provider}/${model}`;
+      const err = errorByModel.get(modelKey) ?? { provider, model, failed: 0, total: 0 };
+      err.total++;
+      if (isFailure) {
+        err.failed++;
+        failedCount++;
+      } else {
+        successCount++;
+      }
+      errorByModel.set(modelKey, err);
+      if (isFailure) continue;
+      sawAssistant = true;
+      let s = sessionAgg.get(sessionID);
+      if (!s) {
+        s = {
+          sessionId: sessionID,
+          title: session?.title ?? "",
+          provider,
+          model,
+          requests: 0,
+          totalTokens: 0,
+          inputTokens: 0,
+          outputTokens: 0,
+          reasoningTokens: 0,
+          cacheRead: 0,
+          cacheWrite: 0,
+          totalCost: 0,
+          day
+        };
+        sessionAgg.set(sessionID, s);
+      }
+      s.requests++;
+      s.totalTokens += total;
+      s.inputTokens += input;
+      s.outputTokens += output;
+      s.reasoningTokens += reasoning;
+      s.cacheRead += cacheRead;
+      s.cacheWrite += cacheWrite;
+      s.totalCost += cost;
+      if (!s.provider || s.provider === "unknown") s.provider = provider;
+      if (!s.model || s.model === "unknown") s.model = model;
+      let m = modelAgg.get(modelKey);
+      if (!m) {
+        m = {
+          provider,
+          model,
+          requests: 0,
+          sessions: 0,
+          totalTokens: 0,
+          inputTokens: 0,
+          outputTokens: 0,
+          reasoningTokens: 0,
+          cacheRead: 0,
+          totalCost: 0
+        };
+        modelAgg.set(modelKey, m);
+      }
+      m.requests++;
+      m.totalTokens += total;
+      m.inputTokens += input;
+      m.outputTokens += output;
+      m.reasoningTokens += reasoning;
+      m.cacheRead += cacheRead;
+      m.totalCost += cost;
+      (modelSessions.get(modelKey) ?? modelSessions.set(modelKey, /* @__PURE__ */ new Set()).get(modelKey)).add(sessionID);
+      let p = providerAgg.get(provider);
+      if (!p) {
+        p = {
+          provider,
+          requests: 0,
+          sessions: 0,
+          totalTokens: 0,
+          inputTokens: 0,
+          outputTokens: 0,
+          reasoningTokens: 0,
+          cacheRead: 0,
+          totalCost: 0
+        };
+        providerAgg.set(provider, p);
+      }
+      p.requests++;
+      p.totalTokens += total;
+      p.inputTokens += input;
+      p.outputTokens += output;
+      p.reasoningTokens += reasoning;
+      p.cacheRead += cacheRead;
+      p.totalCost += cost;
+      (providerSessions.get(provider) ?? providerSessions.set(provider, /* @__PURE__ */ new Set()).get(provider)).add(sessionID);
+      let d = dailyAgg.get(day);
+      if (!d) {
+        d = {
+          day,
+          requests: 0,
+          sessions: 0,
+          totalTokens: 0,
+          inputTokens: 0,
+          outputTokens: 0,
+          reasoningTokens: 0,
+          cacheRead: 0,
+          totalCost: 0
+        };
+        dailyAgg.set(day, d);
+      }
+      d.requests++;
+      d.totalTokens += total;
+      d.inputTokens += input;
+      d.outputTokens += output;
+      d.reasoningTokens += reasoning;
+      d.cacheRead += cacheRead;
+      d.totalCost += cost;
+      (dailySessions.get(day) ?? dailySessions.set(day, /* @__PURE__ */ new Set()).get(day)).add(sessionID);
+    }
+    if (!sawAssistant && session?.id) {
+      sessionAgg.delete(sessionID);
+    }
+    await yieldToEventLoop();
+  }
+  const warn = (message) => {
+    try {
+      ctx?.ui?.toast?.show({ message, variant: "warning" });
+    } catch {
+      console.warn(`[tokenwatch] ${message}`);
+    }
+  };
+  if (skippedSessions > 0) {
+    warn(t("noticeSkippedSessions").replace("{n}", String(skippedSessions)));
+  }
+  if (sessionsTruncated) {
+    warn(t("noticeScanTruncatedSessions"));
+  }
+  if (truncatedMessageSessions > 0) {
+    warn(t("noticeScanTruncatedMessages").replace("{n}", String(truncatedMessageSessions)));
+  }
+  for (const [key, set] of modelSessions) {
+    const m = modelAgg.get(key);
+    if (m) m.sessions = set.size;
+  }
+  for (const [key, set] of providerSessions) {
+    const p = providerAgg.get(key);
+    if (p) p.sessions = set.size;
+  }
+  for (const [key, set] of dailySessions) {
+    const d = dailyAgg.get(key);
+    if (d) d.sessions = set.size;
+  }
+  return {
+    builtAt: Date.now(),
+    sessions: Array.from(sessionAgg.values()).sort((a, b) => a.day < b.day ? 1 : a.day > b.day ? -1 : 0),
+    models: Array.from(modelAgg.values()).sort((a, b) => b.totalTokens - a.totalTokens),
+    providers: Array.from(providerAgg.values()).sort((a, b) => b.totalTokens - a.totalTokens),
+    daily: Array.from(dailyAgg.values()).sort((a, b) => a.day < b.day ? 1 : a.day > b.day ? -1 : 0),
+    errors: {
+      successCount,
+      failedCount,
+      // 小数口径（0~1），与 v1 的 getErrorStats 及 HTML 报告的消费方一致
+      errorRate: successCount + failedCount > 0 ? failedCount / (successCount + failedCount) : 0,
+      byModel: Array.from(errorByModel.values())
+    }
+  };
+}
+function summarize(input) {
+  let totalTokens = 0, inputTokens = 0, outputTokens = 0, reasoningTokens = 0;
+  let cacheRead = 0, cacheWrite = 0, totalCost = 0, requestCount = 0;
+  for (const s of input.sessions) {
+    totalTokens += s.totalTokens;
+    inputTokens += s.inputTokens;
+    outputTokens += s.outputTokens;
+    reasoningTokens += s.reasoningTokens;
+    cacheRead += s.cacheRead;
+    cacheWrite += s.cacheWrite;
+    totalCost += s.totalCost;
+    requestCount += s.requests;
+  }
+  const modelsUsed = input.models.map((m) => `${m.provider}/${m.model}`);
+  return {
+    model: input.sessions[0]?.model ?? "",
+    provider: input.sessions[0]?.provider ?? "",
+    modelsUsed,
+    totalTokens,
+    inputTokens,
+    outputTokens,
+    reasoningTokens,
+    cacheRead,
+    cacheWrite,
+    totalCost,
+    requestCount
+  };
+}
+function startScan(ctx) {
+  const p = scan(ctx).then((snapshot) => {
+    cache = snapshot;
+    inflight = null;
+    return snapshot;
+  }).catch((err) => {
+    inflight = null;
+    throw err;
+  });
+  p.catch(() => {
+  });
+  inflight = p;
+  return p;
+}
+function buildReport(snapshot, filters) {
+  const sessions = snapshot.sessions.filter(
+    (s) => matchesDay(s.day, filters) && matchesModel(s.provider, s.model, filters)
+  );
+  const models = snapshot.models.filter((m) => matchesModel(m.provider, m.model, filters));
+  const providers = snapshot.providers.filter((p) => !filters.provider || p.provider === filters.provider);
+  const daily = snapshot.daily.filter((d) => matchesDay(d.day, filters));
+  return {
+    filters,
+    summary: summarize({ sessions, models }),
+    models,
+    providers,
+    daily,
+    sessions: sessions.map((s) => ({
+      sessionId: s.sessionId,
+      title: s.title,
+      provider: s.provider,
+      model: s.model,
+      requests: s.requests,
+      totalTokens: s.totalTokens,
+      inputTokens: s.inputTokens,
+      outputTokens: s.outputTokens,
+      reasoningTokens: s.reasoningTokens,
+      cacheRead: s.cacheRead,
+      totalCost: s.totalCost,
+      day: s.day
+    })),
+    errors: snapshot.errors
+  };
+}
+async function getUsageReport2(ctx, filters = {}) {
+  if (!inflight) {
+    if (!cache) {
+      startScan(ctx);
+    } else if (dirty) {
+      dirty = false;
+      startScan(ctx);
+    }
+  }
+  if (!cache) {
+    const snapshot = await inflight;
+    return buildReport(snapshot, filters);
+  }
+  return buildReport(cache, filters);
+}
+function markUsageCacheDirty() {
+  dirty = true;
+}
+function isUsageCacheCold() {
+  return cache === null;
+}
+
+// src/host/v2/adapter.ts
+function readTheme2(ctx) {
+  const t2 = ctx.theme ?? {};
+  const fallback = t2?.text?.default;
+  const actionPrimary = t2?.text?.action?.primary?.default;
+  const feedback = t2?.text?.feedback ?? {};
+  return {
+    primary: actionPrimary ?? fallback,
+    text: t2?.text?.default ?? fallback,
+    textMuted: t2?.text?.subdued ?? fallback,
+    background: t2?.background?.default ?? fallback,
+    border: t2?.border?.default ?? fallback,
+    success: feedback?.success?.default ?? fallback,
+    warning: feedback?.warning?.default ?? fallback,
+    error: feedback?.error?.default ?? fallback
+  };
+}
+function makeStore2(ctx, dispose) {
+  const [state, mutate] = ctx.storage.store("tokenwatch", {
+    initial: { values: {} }
+  });
+  return {
+    get(key, fallback) {
+      try {
+        const v = state?.values?.[key];
+        return v === void 0 || v === null ? fallback : v;
+      } catch {
+        return fallback;
+      }
+    },
+    set(key, value) {
+      void mutate((draft) => {
+        draft.values[key] = value;
+      }).catch(() => {
+      });
+    },
+    delete(key) {
+      void mutate((draft) => {
+        delete draft.values[key];
+      }).catch(() => {
+      });
+    }
+  };
+}
+function normalizeParts(message) {
+  const content = message?.content;
+  if (!Array.isArray(content)) return [];
+  const out = [];
+  for (const part of content) {
+    if (part?.type === "text") {
+      out.push({ type: "text", text: part.text ?? "" });
+    } else if (part?.type === "reasoning") {
+      out.push({ type: "reasoning", text: part.text ?? "" });
+    } else if (part?.type === "tool") {
+      const st = part.state ?? {};
+      out.push({
+        type: "tool",
+        name: part.name,
+        state: {
+          status: st.status,
+          raw: st.input != null ? JSON.stringify(st.input) : void 0,
+          input: st.input,
+          // v2 工具输出在 content 数组里，需拼接为字符串
+          output: st.status === "completed" ? stringifyToolContent(st.content) : void 0,
+          error: st.status === "error" ? String(st.error ?? "") : void 0
+        }
+      });
+    }
+  }
+  return out;
+}
+function stringifyToolContent(content) {
+  if (typeof content === "string") return content;
+  if (!Array.isArray(content)) return "";
+  let out = "";
+  for (const item of content) {
+    if (typeof item === "string") out += item;
+    else if (item && typeof item.text === "string") out += item.text;
+    else if (item?.type === "text" && typeof item?.text === "string") out += item.text;
+  }
+  return out;
+}
+function buildMessageEvent(ctx, data) {
+  const sessionID = data?.sessionID ?? "";
+  const messageID = data?.assistantMessageID ?? "";
+  const tokens = data?.tokens ?? {};
+  const cache2 = tokens.cache ?? {};
+  const message = messageID ? ctx.data.session.message.get(sessionID, messageID) : void 0;
+  const model = message?.model ?? {};
+  const total = (tokens.input ?? 0) + (tokens.output ?? 0) + (tokens.reasoning ?? 0) + (cache2.read ?? 0) + (cache2.write ?? 0);
+  return {
+    messageID,
+    sessionID,
+    role: "assistant",
+    providerID: model.providerID ?? "unknown",
+    modelID: model.id ?? "unknown",
+    input: tokens.input ?? 0,
+    output: tokens.output ?? 0,
+    reasoning: tokens.reasoning ?? 0,
+    cacheRead: cache2.read ?? 0,
+    cacheWrite: cache2.write ?? 0,
+    total,
+    cost: typeof data?.cost === "number" ? data.cost : 0,
+    // step.ended 事件本身不带时间；从消息对象补齐（性能追踪需要 created/completed）。
+    // TPS 的流式终点优先取 time.streamed（provider 响应体接收完毕，剔除收尾
+    // settlement 时间），与宿主官方 tok/s 口径一致；缺失时回退 completed。
+    timeCreated: message?.time?.created ?? data?.time?.created,
+    timeCompleted: message?.time?.streamed ?? message?.time?.completed ?? data?.time?.completed,
+    raw: data
+  };
+}
+function createV2Adapter(ctx, dispose) {
+  let storeRef;
+  let mountKeymapLayer;
+  const clientScanDataSource = {
+    kind: "client-scan",
+    // v2 没有 `opencode db`，历史统计需遍历会话消息重算，首次必须提示用户
+    needsFirstRunNotice: true,
+    isCold: () => isUsageCacheCold(),
+    getUsageReport: (filters) => getUsageReport2(ctx, filters)
+  };
+  return {
+    kind: "v2",
+    hostVersion: ctx.app?.version ?? "2.x",
+    theme: () => readTheme2(ctx),
+    get store() {
+      if (!storeRef) storeRef = makeStore2(ctx, dispose);
+      return storeRef;
+    },
+    subscribe(handlers) {
+      const off = [];
+      off.push(
+        ctx.data.on("session.step.ended", (event) => {
+          const normalized = buildMessageEvent(ctx, event?.data);
+          if (normalized) handlers.onMessageUpdated(normalized);
+          handlers.onInvalidate();
+        })
+      );
+      off.push(
+        ctx.data.on("session.step.started", (event) => {
+          const data = event?.data ?? {};
+          const part = {
+            messageID: data.assistantMessageID,
+            type: "step",
+            timeStart: event?.created,
+            raw: event
+          };
+          handlers.onPartUpdated(part);
+        })
+      );
+      off.push(
+        ctx.data.on("session.reasoning.started", (event) => {
+          const data = event?.data ?? {};
+          const part = {
+            messageID: data.assistantMessageID,
+            type: "part-open",
+            timeStart: event?.created,
+            raw: event
+          };
+          handlers.onPartUpdated(part);
+        })
+      );
+      off.push(
+        ctx.data.on("session.reasoning.delta", (event) => {
+          const data = event?.data ?? {};
+          const part = {
+            messageID: data.assistantMessageID,
+            type: "reasoning-delta",
+            timeStart: event?.created,
+            raw: event
+          };
+          handlers.onPartUpdated(part);
+        })
+      );
+      off.push(
+        ctx.data.on("session.text.delta", (event) => {
+          const data = event?.data ?? {};
+          const part = {
+            messageID: data.assistantMessageID,
+            type: "text-delta",
+            timeStart: event?.created,
+            raw: event
+          };
+          handlers.onPartUpdated(part);
+        })
+      );
+      off.push(
+        ctx.data.on("session.text.started", (event) => {
+          const data = event?.data ?? {};
+          const part = {
+            messageID: data.assistantMessageID,
+            type: "part-open",
+            timeStart: event?.created ?? data.time?.start,
+            raw: event
+          };
+          handlers.onPartUpdated(part);
+        })
+      );
+      off.push(
+        ctx.data.on("session.message.content.updated", () => {
+          handlers.onInvalidate();
+        })
+      );
+      off.push(
+        ctx.data.on("session.idle", () => {
+          markUsageCacheDirty();
+          handlers.onInvalidate();
+        })
+      );
+      const disposeFn = () => {
+        for (const fn of off) {
+          try {
+            fn();
+          } catch {
+          }
+        }
+      };
+      return disposeFn;
+    },
+    registerSidebar(render) {
+      const offPanel = ctx.ui.slot({
+        append: "sidebar.content",
+        render: (input) => render({ sessionID: input?.sessionID ?? "" })
+      });
+      const offVehicle = ctx.ui.slot({
+        append: "prompt.footer",
+        render: () => {
+          mountKeymapLayer?.();
+          return null;
+        }
+      });
+      return () => {
+        if (typeof offPanel === "function") offPanel();
+        if (typeof offVehicle === "function") offVehicle();
+      };
+    },
+    registerCommands(specs) {
+      let mountFailed = false;
+      const mount = () => {
+        try {
+          ctx.keymap.layer(() => ({
+            mode: "global",
+            commands: specs.map((spec) => ({
+              id: spec.id,
+              title: spec.title,
+              description: spec.description,
+              group: spec.category ?? "Stats",
+              palette: true,
+              slash: spec.slash ? { name: spec.slash } : void 0,
+              run: () => {
+                void spec.run();
+              }
+            }))
+          }));
+        } catch (err) {
+          if (!mountFailed) {
+            mountFailed = true;
+            try {
+              const message = err instanceof Error ? err.message : String(err);
+              ctx.ui?.toast?.show({ message: `TokenWatch commands unavailable: ${message}`, variant: "error" });
+            } catch {
+            }
+          }
+        }
+      };
+      mountKeymapLayer = mount;
+      return () => {
+        if (mountKeymapLayer === mount) mountKeymapLayer = void 0;
+      };
+    },
+    notify(message, variant = "info") {
+      try {
+        ctx.ui?.toast?.show({ message, variant });
+      } catch {
+      }
+    },
+    async alert(input) {
+      try {
+        await ctx.ui.dialog.alert(input);
+      } catch {
+      }
+    },
+    async select(input) {
+      try {
+        return await ctx.ui.dialog.select({
+          title: input.title,
+          options: input.options
+        });
+      } catch {
+        return void 0;
+      }
+    },
+    onDispose(fn) {
+      dispose.add(fn);
+    },
+    sessionMessages(sessionID) {
+      try {
+        return ctx.data.session.message.list(sessionID) ?? [];
+      } catch {
+        return [];
+      }
+    },
+    messageParts(messageID, sessionID) {
+      try {
+        if (sessionID) {
+          const message = ctx.data.session.message.get(sessionID, messageID);
+          if (message) return normalizeParts(message);
+        }
+        for (const session of ctx.data.session.list()) {
+          const messages = ctx.data.session.message.list(session.id) ?? [];
+          for (const message of messages) {
+            if (message?.id === messageID) return normalizeParts(message);
+          }
+        }
+      } catch {
+      }
+      return [];
+    },
+    appConfig() {
+      try {
+        const agents = ctx.data.location.agent.list() ?? [];
+        return { agent: Object.fromEntries(agents.map((a) => [a?.name ?? a?.id ?? "default", a])) };
+      } catch {
+        return {};
+      }
+    },
+    onPartUpdated(handler) {
+      try {
+        return ctx.data.on("session.message.content.updated", () => handler());
+      } catch {
+        return () => {
+        };
+      }
+    },
+    dataSource: clientScanDataSource
+  };
+}
+
+// src/host/command-actions.ts
+import { writeFileSync as writeFileSync5 } from "node:fs";
+import { join as join6 } from "node:path";
+async function fetchUsage(host, filters) {
+  if (host.dataSource.needsFirstRunNotice && host.dataSource.isCold()) {
+    host.notify(t("noticeFirstScan"), "info");
+  }
+  return host.dataSource.getUsageReport(filters);
+}
+function errMsg(err) {
+  return `${t("toastError")}: ${err instanceof Error ? err.message : String(err)}`;
+}
+function stamp() {
+  const d = /* @__PURE__ */ new Date();
+  const pad = (n) => String(n).padStart(2, "0");
+  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
+}
+function createCommandActions(host) {
+  return {
+    async htmlReport(filters = {}, presetTag) {
+      try {
+        const usage = await fetchUsage(host, filters);
+        const data = buildCombinedData(usage);
+        const filePath = writeHtmlReport(data, getRangeSlug(filters, presetTag));
+        host.notify(`${t("toastReportSaved")}: ${filePath}`, "success");
+        openInBrowser(filePath);
+      } catch (err) {
+        host.notify(errMsg(err), "error");
+      }
+    },
+    async jsonExport() {
+      try {
+        const usage = await fetchUsage(host, {});
+        const filePath = join6(ensureReportDir(), `tokenwatch-${stamp()}.json`);
+        writeFileSync5(filePath, JSON.stringify(usage, null, 2), "utf-8");
+        host.notify(`${t("toastJsonSaved")}: ${filePath}`, "success");
+      } catch (err) {
+        host.notify(errMsg(err), "error");
+      }
+    },
+    async textReport() {
+      try {
+        const usage = await fetchUsage(host, {});
+        const filePath = join6(ensureReportDir(), `tokenwatch-${stamp()}.md`);
+        writeFileSync5(filePath, formatUsageReport(usage), "utf-8");
+        host.notify(`${t("toastReportSaved")}: ${filePath}`, "success");
+      } catch (err) {
+        host.notify(errMsg(err), "error");
+      }
+    },
+    config: () => loadConfig(host.store, host.appConfig()),
+    toggle: (key) => toggleSidebarSetting(host.store, key),
+    setLanguage(language) {
+      const cfg = setLanguageSetting(host.store, language);
+      setLanguage(language);
+      return cfg;
+    }
+  };
+}
+function rangePresets() {
+  const today = stamp();
+  const daysAgo = (n) => {
+    const d = /* @__PURE__ */ new Date();
+    d.setDate(d.getDate() - n);
+    return localDateStr(d);
+  };
+  return [
+    { id: "all", label: t("menuAll"), tag: "all", filters: {} },
+    { id: "today", label: t("menuToday"), tag: "today", filters: { startDate: today, endDate: today } },
+    { id: "7d", label: t("menu7d"), tag: "7d", filters: { startDate: daysAgo(6) } },
+    { id: "30d", label: t("menu30d"), tag: "30d", filters: { startDate: daysAgo(29) } }
+  ];
+}
+
+// src/host/v2/commands.ts
+var TOGGLE_KEYS = [
+  "showPerformance",
+  "showPricing",
+  "showTokenDistribution",
+  "showTrend"
+];
+var TOGGLE_LABELS = {
+  showPerformance: () => t("showPerformance"),
+  showPricing: () => t("showPricing"),
+  showTokenDistribution: () => t("showTokenDistribution"),
+  showTrend: () => t("showTrend")
+};
+async function showUsageMenu2(host) {
+  const actions = createCommandActions(host);
+  setLanguage(actions.config().language);
+  const choice = await host.select({
+    title: t("panelTitle"),
+    options: [
+      { title: t("cmdTitleHtml"), value: "html", description: t("cmdDescHtml") },
+      { title: t("cmdTitleJson"), value: "json", description: t("cmdDescJson") },
+      { title: t("cmdTitleText"), value: "text", description: t("cmdDescText") },
+      { title: t("cmdTitleSettings"), value: "settings", description: t("cmdDescSettings") }
+    ]
+  });
+  if (choice === void 0) return;
+  switch (choice) {
+    case "html": {
+      const presets = rangePresets();
+      const picked = await host.select({
+        title: t("cmdTitleHtml"),
+        options: presets.map((p) => ({ title: p.label, value: p.id }))
+      });
+      if (picked === void 0) return;
+      const preset = presets.find((p) => p.id === picked);
+      if (preset) await actions.htmlReport(preset.filters, preset.tag);
+      return;
+    }
+    case "json":
+      return actions.jsonExport();
+    case "text":
+      return actions.textReport();
+    case "settings":
+      return showSettingsMenu(host);
+  }
+}
+async function showSettingsMenu(host) {
+  const actions = createCommandActions(host);
+  const options = [
+    ...TOGGLE_KEYS.map((key) => ({
+      title: `${actions.config().sidebar[key] ? "\u2713 " : "  "}${TOGGLE_LABELS[key]()}`,
+      value: key
+    })),
+    { title: t("settingsLanguage"), value: "language" },
+    { title: t("done"), value: "done" }
+  ];
+  const choice = await host.select({ title: t("settingsTitle"), options });
+  if (choice === void 0 || choice === "done") return;
+  if (choice === "language") {
+    const current = actions.config().language;
+    const lang = await host.select({
+      title: t("settingsLanguage"),
+      options: [
+        { title: `${current === "auto" ? "\u2713 " : "  "}${t("langAuto")}`, value: "auto" },
+        { title: `${current === "zh" ? "\u2713 " : "  "}\u4E2D\u6587`, value: "zh" },
+        { title: `${current === "en" ? "\u2713 " : "  "}English`, value: "en" }
+      ]
+    });
+    if (lang !== void 0) actions.setLanguage(lang);
+    return;
+  }
+  actions.toggle(choice);
+  await showSettingsMenu(host);
+}
+function registerV2Commands(host) {
+  const specs = [
+    {
+      id: "tokenwatch.usage",
+      title: "TokenWatch",
+      description: "Token usage reports, export, and settings",
+      category: "Stats",
+      slash: "usage",
+      run: () => showUsageMenu2(host)
+    }
+  ];
+  host.registerCommands?.(specs);
+}
+
+// src/tui.tsx
+var tui = async (api) => {
+  const host = createV1Adapter(api);
+  startTokenWatch(host);
+  await registerCommands(api);
+};
+var setup = (ctx) => {
+  try {
+    const dispose = /* @__PURE__ */ new Set();
+    const host = createV2Adapter(ctx, dispose);
+    startTokenWatch(host);
+    registerV2Commands(host);
+    return () => {
+      for (const fn of dispose) {
+        try {
+          fn();
+        } catch {
+        }
+      }
+    };
+  } catch (err) {
+    const message = err instanceof Error ? (err.stack ?? err.message).split("\n")[0] : String(err);
+    try {
+      ctx?.ui?.toast?.show({
+        message: `TokenWatch setup failed: ${message}`,
+        variant: "error"
+      });
+    } catch {
+    }
+    return () => {
+    };
+  }
+};
+var plugin = {
+  id: "opencode-tokenwatch",
+  tui,
+  setup
+};
+var tui_default = plugin;
+export {
+  tui_default as default
+};