opencode-tokenwatch 0.4.0 → 0.5.0

package/dist/tui.js

@@ -0,0 +1,3611 @@
+// src/tui.tsx
+import { createComponent as _$createComponent3 } from "@opentui/solid";
+import { createSignal as createSignal2, createEffect as createEffect2, onCleanup as onCleanup2 } from "solid-js";
+
+// src/commands.tsx
+import { createComponent as _$createComponent } from "@opentui/solid";
+
+// src/queries.ts
+import { exec } from "node:child_process";
+import { dirname, join } from "node:path";
+function buildEnvWithOpencodePath() {
+  const nodeDir = dirname(process.execPath);
+  const candidateDirs = [
+    // nvm on Windows: opencode-ai 包的 bin 目录
+    join(nodeDir, "node_modules", "opencode-ai", "node_modules", "opencode-windows-x64", "bin"),
+    // npm global install: opencode 直接在 node_modules/.bin
+    join(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 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, "''");
+}
+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 ?? 30;
+  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 [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 };
+}
+
+// src/formatter.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/generate-usage-html.ts
+function fmtTokens(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 fmtCost(n) {
+  if (n === 0) return "$0.00";
+  if (n < 0.01) return "$" + n.toFixed(6);
+  return "$" + n.toFixed(2);
+}
+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.requestCount;
+      tpsReqs += p.requestCount;
+    }
+  }
+  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">${fmtTokens(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)">${fmtCost(s.totalCost)}</div>
+      </div>
+      <div class="kpi-card">
+        <div class="kpi-label">Error Rate</div>
+        <div class="kpi-value" style="color:${errorColor}">${errorRatePct}</div>
+      </div>
+    </div>`;
+}
+function renderModelChartInit(data) {
+  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 = ${JSON.stringify(names)};
+var modelInput = ${JSON.stringify(inputData)};
+var modelOutput = ${JSON.stringify(outputData)};
+var modelCache = ${JSON.stringify(cacheData)};
+var modelTps = ${JSON.stringify(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 = ${JSON.stringify(names)};
+var effTps   = ${JSON.stringify(tpsValues)};
+var effTtft  = ${JSON.stringify(ttftValues)};
+var effCost  = ${JSON.stringify(costValues)};
+var effHit   = ${JSON.stringify(hitRates)};
+var effReq   = ${JSON.stringify(reqCounts)};
+
+function initScatterChart() {
+  var el = document.getElementById('scatter-chart');
+  if (!el) return;
+  var chart = echarts.init(el);
+  window.scatterChart = chart;
+
+  // TPS \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.requestCount;
+        ttftReqs += x.requestCount;
+      }
+    }
+    const avgTtft = ttftReqs > 0 ? ttftSum / ttftReqs : null;
+    let tpsSum = 0, tpsReqs = 0;
+    for (const x of perfItems) {
+      if (x.avgTPS != null && x.avgTPS > 0) {
+        tpsSum += x.avgTPS * x.requestCount;
+        tpsReqs += x.requestCount;
+      }
+    }
+    const avgTps = tpsReqs > 0 ? tpsSum / tpsReqs : null;
+    return `
+    <div class="provider-card" style="border-color:${providerBorderColor(p.provider)}">
+      <div class="provider-name">${p.provider}</div>
+      <div class="provider-stat"><span class="stat-label">Tokens</span><span>${fmtTokens(p.totalTokens)}</span></div>
+      <div class="provider-stat"><span class="stat-label">Cost</span><span>${fmtCost(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>${m.model}</td>
+      <td>${m.provider}</td>
+      <td>${m.requests}</td>
+      <td>${fmtTokens(m.totalTokens)}</td>
+      <td>${fmtTokens(m.inputTokens)}</td>
+      <td>${fmtTokens(m.outputTokens)}</td>
+      <td>${fmtTokens(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>${fmtCost(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>${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>${m.provider}</td>
+          <td>${m.model}</td>
+          <td>${m.total}</td>
+          <td style="color:var(--output)">${m.failed}</td>
+          <td style="color:var(--tps)">${m.total - m.failed}</td>
+          <td style="color:${cellColor}">${modelRate}</td>
+        </tr>`;
+    }).join("\n");
+    errorTabBtn = `
+      <button class="tab-btn" data-mtab="errors" onclick="switchModelTab('errors')">
+        Failed Requests <span style="color:var(--output);margin-left:4px;font-size:0.85em">(${errors.failedCount})</span>
+      </button>`;
+    errorTabContent = `
+    <div id="model-tab-errors" class="tab-content">
+      <p style="font-size:12px;color:${rateColor};padding:8px 0 6px">
+        Overall error rate: <strong>${errorRatePct}</strong> &mdash;
+        ${errors.failedCount} failed / ${errors.successCount + errors.failedCount} total
+      </p>
+      <table id="errors-table" class="data-table">
+        <thead><tr>
+          <th>Provider</th><th>Model</th><th>Total</th>
+          <th>Failed</th><th>Success</th><th>Error Rate</th>
+        </tr></thead>
+        <tbody>${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 = ${JSON.stringify(days)};
+var dailyTokens = ${JSON.stringify(tokens)};
+var dailyCosts = ${JSON.stringify(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 = ${JSON.stringify(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: ['${minDate}', '${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 = JSON.stringify(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>
+    <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/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",
+  agent: "Agent\u6307\u4EE4",
+  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"
+};
+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",
+  agent: "Agent",
+  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"
+};
+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/perf-tracker.ts
+import { appendFileSync, readFileSync as readFileSync2, writeFileSync as writeFileSync2 } from "node:fs";
+import { join as join3 } from "node:path";
+import { homedir as homedir2 } from "node:os";
+import { existsSync as existsSync2, statSync } from "node:fs";
+
+// src/stats-store.ts
+import { readFileSync, writeFileSync, existsSync } from "node:fs";
+import { join as join2 } from "node:path";
+import { homedir } from "node:os";
+var STATS_PATH = join2(homedir(), ".opencode", "tokenwatch-stats.json");
+var LOG_PATH = join2(homedir(), ".opencode", "tokenwatch.jsonl");
+var RESERVOIR_SIZE = 500;
+var CURRENT_VERSION = 1;
+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 saveStatsFile(file) {
+  try {
+    file.updatedAt = (/* @__PURE__ */ new Date()).toISOString();
+    writeFileSync(STATS_PATH, JSON.stringify(file), "utf-8");
+  } catch {
+  }
+}
+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 applyEntryToModels(models, entry) {
+  const key = entry.model;
+  let s = models[key];
+  if (!s) {
+    s = {
+      model: entry.model,
+      providerID: entry.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: []
+    };
+    models[key] = s;
+  }
+  s.requestCount++;
+  s.totalInput += entry.inputTokens;
+  s.totalOutput += entry.outputTokens;
+  s.totalCacheRead += entry.cacheReadTokens;
+  s.totalCacheWrite += entry.cacheWriteTokens;
+  s.totalCost += entry.cost;
+  if (entry.ttft_ms != null) {
+    s.ttftCount++;
+    const c = s.ttftCount;
+    s.avgTTFT = s.avgTTFT != null ? s.avgTTFT + (entry.ttft_ms - s.avgTTFT) / c : entry.ttft_ms;
+    s.maxTTFT = s.maxTTFT != null ? Math.max(s.maxTTFT, entry.ttft_ms) : entry.ttft_ms;
+    s.minTTFT = s.minTTFT != null ? Math.min(s.minTTFT, entry.ttft_ms) : entry.ttft_ms;
+    s.ttftReservoir = reservoirAdd(s.ttftReservoir, entry.ttft_ms, s.ttftCount);
+  }
+  if (entry.tps != null) {
+    s.tpsCount++;
+    const c = s.tpsCount;
+    s.avgTPS = s.avgTPS != null ? s.avgTPS + (entry.tps - s.avgTPS) / c : entry.tps;
+    s.maxTPS = s.maxTPS != null ? Math.max(s.maxTPS, entry.tps) : entry.tps;
+    s.minTPS = s.minTPS != null ? Math.min(s.minTPS, entry.tps) : entry.tps;
+  }
+  if (entry.latency_ms != null) {
+    s.latencyCount++;
+    const c = s.latencyCount;
+    s.avgLatency = s.avgLatency != null ? s.avgLatency + (entry.latency_ms - s.avgLatency) / c : entry.latency_ms;
+    s.maxLatency = s.maxLatency != null ? Math.max(s.maxLatency, entry.latency_ms) : entry.latency_ms;
+    s.minLatency = s.minLatency != null ? Math.min(s.minLatency, entry.latency_ms) : entry.latency_ms;
+    s.latencyReservoir = reservoirAdd(s.latencyReservoir, entry.latency_ms, s.latencyCount);
+  }
+}
+function migrateFromLogsIfNeeded(file) {
+  if (file.migratedFromLogs) return false;
+  if (!existsSync(LOG_PATH)) {
+    file.migratedFromLogs = true;
+    return true;
+  }
+  try {
+    const content = readFileSync(LOG_PATH, "utf-8").trim();
+    if (!content) {
+      file.migratedFromLogs = true;
+      return true;
+    }
+    let migrated = 0;
+    for (const line of content.split("\n")) {
+      if (!line) continue;
+      try {
+        const entry = JSON.parse(line);
+        if (entry.model && entry.ts) {
+          applyEntryToModels(file.models, entry);
+          migrated++;
+        }
+      } catch {
+      }
+    }
+    file.migratedFromLogs = true;
+    if (migrated > 0) {
+      ;
+      file._migratedFrom = `${LOG_PATH} (${migrated} entries)`;
+    }
+    return true;
+  } catch {
+    file.migratedFromLogs = true;
+    return true;
+  }
+}
+function percentile(arr, p) {
+  if (arr.length === 0) return null;
+  if (arr.length === 1) return arr[0];
+  const idx = p / 100 * (arr.length - 1);
+  const lo = Math.floor(idx);
+  const hi = Math.ceil(idx);
+  if (lo === hi) return arr[lo];
+  return arr[lo] + (arr[hi] - arr[lo]) * (idx - lo);
+}
+function updatePersistedStats(entry) {
+  try {
+    const file = loadStatsFile();
+    applyEntryToModels(file.models, entry);
+    saveStatsFile(file);
+  } catch {
+  }
+}
+function readPersistedStats() {
+  try {
+    const file = loadStatsFile();
+    if (!file.migratedFromLogs) {
+      file.models = {};
+      migrateFromLogsIfNeeded(file);
+      saveStatsFile(file);
+    }
+    return Object.values(file.models).map((s) => {
+      const ttftArr = [...s.ttftReservoir].sort((a, b) => a - b);
+      const latArr = [...s.latencyReservoir].sort((a, b) => a - b);
+      const denom = s.totalInput + s.totalCacheRead;
+      return {
+        model: s.model,
+        providerID: s.providerID,
+        requestCount: s.requestCount,
+        ttftCount: s.ttftCount,
+        tpsCount: s.tpsCount,
+        latencyCount: s.latencyCount,
+        totalInput: s.totalInput,
+        totalOutput: s.totalOutput,
+        totalCacheRead: s.totalCacheRead,
+        totalCacheWrite: s.totalCacheWrite,
+        totalCost: s.totalCost,
+        avgTTFT: s.avgTTFT,
+        maxTTFT: s.maxTTFT,
+        minTTFT: s.minTTFT,
+        p50TTFT: percentile(ttftArr, 50),
+        p95TTFT: percentile(ttftArr, 95),
+        p99TTFT: percentile(ttftArr, 99),
+        avgTPS: s.avgTPS,
+        maxTPS: s.maxTPS,
+        minTPS: s.minTPS,
+        avgLatency: s.avgLatency,
+        maxLatency: s.maxLatency,
+        minLatency: s.minLatency,
+        p50Latency: percentile(latArr, 50),
+        p95Latency: percentile(latArr, 95),
+        p99Latency: percentile(latArr, 99),
+        cacheHitRate: denom > 0 ? s.totalCacheRead / denom * 100 : null
+      };
+    });
+  } catch {
+    return [];
+  }
+}
+
+// src/perf-tracker.ts
+var LOG_PATH2 = join3(homedir2(), ".opencode", "tokenwatch.jsonl");
+var PerfTracker = class {
+  firstPartTimes = /* @__PURE__ */ new Map();
+  statsMap = /* @__PURE__ */ new Map();
+  /** 原始样本串，用于分位数计算，不持久化 */
+  ttftSamples = /* @__PURE__ */ new Map();
+  latencySamples = /* @__PURE__ */ new Map();
+  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);
+    }
+  }
+  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);
+      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 + cacheRead + cacheWrite === 0) {
+      this.firstPartTimes.delete(messageID);
+      return;
+    }
+    const firstPart = this.firstPartTimes.get(messageID) ?? null;
+    const latencyMs = completed - created;
+    const ttftMs = firstPart !== null ? firstPart - created : null;
+    const genMs = firstPart !== null ? completed - firstPart : null;
+    const tps = genMs !== null && genMs > 0 && outputTokens > 0 ? outputTokens / genMs * 1e3 : null;
+    this.firstPartTimes.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;
+      const KEEP_LINES = 2e3;
+      if (existsSync2(LOG_PATH2) && statSync(LOG_PATH2).size > MAX_SIZE) {
+        const lines = readFileSync2(LOG_PATH2, "utf-8").trim().split("\n");
+        writeFileSync2(LOG_PATH2, lines.slice(-KEEP_LINES).join("\n") + "\n");
+      }
+      appendFileSync(LOG_PATH2, JSON.stringify(entry) + "\n");
+    } catch {
+    }
+    updatePersistedStats(entry);
+  }
+  handleMessageRemoved(event) {
+    const mid = event.properties?.messageID ?? "";
+    if (mid) {
+      this.firstPartTimes.delete(mid);
+    }
+  }
+  updateStats(model, entry) {
+    let stats = this.statsMap.get(model);
+    if (!stats) {
+      stats = {
+        model,
+        providerID: entry.providerID,
+        requestCount: 0,
+        ttftCount: 0,
+        // Bug fix: 独立维护有效样本计数
+        tpsCount: 0,
+        latencyCount: 0,
+        totalInput: 0,
+        totalOutput: 0,
+        totalCacheRead: 0,
+        totalCacheWrite: 0,
+        totalCost: 0,
+        avgTTFT: null,
+        maxTTFT: null,
+        minTTFT: null,
+        p50TTFT: null,
+        p95TTFT: null,
+        p99TTFT: null,
+        avgTPS: null,
+        maxTPS: null,
+        minTPS: null,
+        avgLatency: null,
+        maxLatency: null,
+        minLatency: null,
+        p50Latency: null,
+        p95Latency: null,
+        p99Latency: null,
+        cacheHitRate: null
+      };
+      this.statsMap.set(model, stats);
+    }
+    stats.requestCount++;
+    stats.totalInput += entry.inputTokens;
+    stats.totalOutput += entry.outputTokens;
+    stats.totalCacheRead += entry.cacheReadTokens;
+    stats.totalCacheWrite += entry.cacheWriteTokens;
+    stats.totalCost += entry.cost;
+    if (entry.ttft_ms !== null) {
+      stats.ttftCount++;
+      const c = stats.ttftCount;
+      const prev = stats.avgTTFT;
+      stats.avgTTFT = prev !== null ? prev + (entry.ttft_ms - prev) / c : entry.ttft_ms;
+      stats.maxTTFT = stats.maxTTFT !== null ? Math.max(stats.maxTTFT, entry.ttft_ms) : entry.ttft_ms;
+      stats.minTTFT = stats.minTTFT !== null ? Math.min(stats.minTTFT, entry.ttft_ms) : entry.ttft_ms;
+      const ttftArr = this.ttftSamples.get(model) ?? [];
+      ttftArr.push(entry.ttft_ms);
+      this.ttftSamples.set(model, ttftArr);
+    }
+    if (entry.tps !== null) {
+      stats.tpsCount++;
+      const c = stats.tpsCount;
+      const prev = stats.avgTPS;
+      stats.avgTPS = prev !== null ? prev + (entry.tps - prev) / c : entry.tps;
+      stats.maxTPS = stats.maxTPS !== null ? Math.max(stats.maxTPS, entry.tps) : entry.tps;
+      stats.minTPS = stats.minTPS !== null ? Math.min(stats.minTPS, entry.tps) : entry.tps;
+    }
+    if (entry.latency_ms !== null) {
+      stats.latencyCount++;
+      const c = stats.latencyCount;
+      const prev = stats.avgLatency;
+      stats.avgLatency = prev !== null ? prev + (entry.latency_ms - prev) / c : entry.latency_ms;
+      stats.maxLatency = stats.maxLatency !== null ? Math.max(stats.maxLatency, entry.latency_ms) : entry.latency_ms;
+      stats.minLatency = stats.minLatency !== null ? Math.min(stats.minLatency, entry.latency_ms) : entry.latency_ms;
+      const latArr = this.latencySamples.get(model) ?? [];
+      latArr.push(entry.latency_ms);
+      this.latencySamples.set(model, latArr);
+    }
+  }
+  /** 计算有序数组的指定百分位数（线性插值法） */
+  percentile(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);
+  }
+  getSessionStats() {
+    let totalInput = 0, totalOutput = 0, totalCacheRead = 0, totalCacheWrite = 0;
+    let totalRequests = 0, totalCost = 0;
+    let weightedHitSum = 0, totalReqForHit = 0;
+    for (const [model, s] of this.statsMap) {
+      totalInput += s.totalInput;
+      totalOutput += s.totalOutput;
+      totalCacheRead += s.totalCacheRead;
+      totalCacheWrite += s.totalCacheWrite;
+      totalRequests += s.requestCount;
+      totalCost += s.totalCost;
+      const ttftArr = [...this.ttftSamples.get(model) ?? []].sort((a, b) => a - b);
+      s.p50TTFT = this.percentile(ttftArr, 50);
+      s.p95TTFT = this.percentile(ttftArr, 95);
+      s.p99TTFT = this.percentile(ttftArr, 99);
+      const latArr = [...this.latencySamples.get(model) ?? []].sort((a, b) => a - b);
+      s.p50Latency = this.percentile(latArr, 50);
+      s.p95Latency = this.percentile(latArr, 95);
+      s.p99Latency = this.percentile(latArr, 99);
+      const denom = s.totalInput + s.totalCacheRead;
+      s.cacheHitRate = denom > 0 ? s.totalCacheRead / denom * 100 : null;
+      if (s.cacheHitRate !== null) {
+        weightedHitSum += s.cacheHitRate * s.requestCount;
+        totalReqForHit += s.requestCount;
+      }
+    }
+    const weightedCacheHitRate = totalReqForHit > 0 ? weightedHitSum / totalReqForHit : null;
+    return {
+      models: Object.fromEntries(this.statsMap),
+      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.firstPartTimes.clear();
+    this.statsMap.clear();
+    this.ttftSamples.clear();
+    this.latencySamples.clear();
+  }
+  loadSession(sessionID) {
+    this.firstPartTimes.clear();
+    this.statsMap.clear();
+    this.ttftSamples.clear();
+    this.latencySamples.clear();
+    if (!sessionID) return;
+    try {
+      if (!existsSync2(LOG_PATH2)) return;
+      const content = readFileSync2(LOG_PATH2, "utf-8").trim();
+      if (!content) return;
+      const lines = content.split("\n");
+      for (const line of lines) {
+        if (!line) continue;
+        try {
+          const entry = JSON.parse(line);
+          if (entry.sessionID === sessionID) {
+            this.updateStats(entry.model, entry);
+          }
+        } catch {
+        }
+      }
+    } catch {
+    }
+  }
+};
+function createPerfTracker() {
+  return new PerfTracker();
+}
+function readLogs(last = 50) {
+  const tracker = new PerfTracker();
+  return tracker.readLogs(last);
+}
+
+// src/commands.tsx
+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 { execSync } from "node:child_process";
+var DEFAULT_CONFIG = {
+  sidebar: {
+    showPerformance: true,
+    showPricing: true,
+    showTokenDistribution: true,
+    showTrend: true
+  },
+  language: "auto"
+};
+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 ensureReportDir() {
+  const dir = join4(homedir3(), ".opencode", "reports");
+  if (!existsSync3(dir)) mkdirSync(dir, {
+    recursive: true
+  });
+  return dir;
+}
+function openInBrowser(filePath) {
+  try {
+    const platform = process.platform;
+    if (platform === "win32") execSync(`start "" "${filePath}"`, {
+      windowsHide: true,
+      timeout: 5e3
+    });
+    else if (platform === "darwin") execSync(`open "${filePath}"`, {
+      timeout: 5e3
+    });
+    else execSync(`xdg-open "${filePath}"`, {
+      timeout: 5e3
+    });
+  } catch {
+  }
+}
+async function buildCombinedData(api, filters = {}) {
+  const report = await getUsageReport(filters);
+  const logs = readLogs(200);
+  const perfSummary = readPersistedStats();
+  const now = /* @__PURE__ */ new Date();
+  const pad = (n) => String(n).padStart(2, "0");
+  const meta = {
+    generatedAt: `${now.getFullYear()}-${pad(now.getMonth() + 1)}-${pad(now.getDate())} ${pad(now.getHours())}:${pad(now.getMinutes())}:${pad(now.getSeconds())}`,
+    dateRange: {
+      start: report.daily.length > 0 ? report.daily[report.daily.length - 1].day : "\u2014",
+      end: report.daily.length > 0 ? report.daily[0].day : "\u2014"
+    }
+  };
+  return {
+    ...report,
+    perfLogs: logs,
+    perfSummary,
+    meta
+  };
+}
+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 = (/* @__PURE__ */ new Date()).toISOString().slice(0, 10);
+      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 = (/* @__PURE__ */ new Date()).toISOString().slice(0, 10);
+  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;
+}
+async function showHtmlReport(api, filters = {}, presetTag) {
+  try {
+    const data = await buildCombinedData(api, filters);
+    const html = generateUsageHtml(data);
+    const dir = ensureReportDir();
+    const rangeSlug = getRangeSlug(filters, presetTag);
+    const filePath = generateUniqueReportPath(dir, rangeSlug);
+    writeFileSync3(filePath, html, "utf-8");
+    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(() => _$createComponent(api.ui.DialogSelect, {
+    get title() {
+      return t("cmdTitleHtml");
+    },
+    placeholder: "Select date range...",
+    get options() {
+      return [{
+        title: t("menuToday"),
+        value: "today",
+        onSelect: () => {
+          dialog.clear();
+          const d = /* @__PURE__ */ new Date();
+          const pad = (n) => String(n).padStart(2, "0");
+          const s = `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
+          showHtmlReport(api, {
+            startDate: s,
+            endDate: s
+          }, "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(() => _$createComponent(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 = (/* @__PURE__ */ new Date()).toISOString().slice(0, 10);
+    const filePath = join4(dir, `tokenwatch-${dateStr}.json`);
+    writeFileSync3(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 = (/* @__PURE__ */ new Date()).toISOString().slice(0, 10);
+    const filePath = join4(dir, `tokenwatch-${dateStr}.md`);
+    writeFileSync3(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"
+    });
+  }
+}
+function saveConfigToStore(api, cfg) {
+  api.kv?.set?.("tokenwatch-config", cfg);
+}
+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(() => _$createComponent(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: () => {
+          toggleSidebarSetting(api, "showPerformance");
+          reopen("showPerformance");
+        }
+      }, {
+        title: `${cfg.showPricing ? "\u2713 " : "  "}${t("showPricing")}`,
+        value: "showPricing",
+        description: t("descShowPricing"),
+        onSelect: () => {
+          toggleSidebarSetting(api, "showPricing");
+          reopen("showPricing");
+        }
+      }, {
+        title: `${cfg.showTokenDistribution ? "\u2713 " : "  "}${t("showTokenDistribution")}`,
+        value: "showTokenDistribution",
+        description: t("descShowTokenDistribution"),
+        onSelect: () => {
+          toggleSidebarSetting(api, "showTokenDistribution");
+          reopen("showTokenDistribution");
+        }
+      }, {
+        title: `${cfg.showTrend ? "\u2713 " : "  "}${t("showTrend")}`,
+        value: "showTrend",
+        description: t("descShowTrend"),
+        onSelect: () => {
+          toggleSidebarSetting(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 = api.kv?.get?.("tokenwatch-config")?.language ?? "auto";
+  dialog.replace(() => _$createComponent(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: () => {
+          setLanguageSetting(api, "auto");
+          lastSelectedSetting = "language";
+          dialog.clear();
+          showSettingsDialog(api, dialog);
+        }
+      }, {
+        title: `${current === "zh" ? "\u2713 " : "  "}\u4E2D\u6587`,
+        value: "zh",
+        description: "\u7B80\u4F53\u4E2D\u6587",
+        onSelect: () => {
+          setLanguageSetting(api, "zh");
+          lastSelectedSetting = "language";
+          dialog.clear();
+          showSettingsDialog(api, dialog);
+        }
+      }, {
+        title: `${current === "en" ? "\u2713 " : "  "}English`,
+        value: "en",
+        description: "English",
+        onSelect: () => {
+          setLanguageSetting(api, "en");
+          lastSelectedSetting = "language";
+          dialog.clear();
+          showSettingsDialog(api, dialog);
+        }
+      }];
+    },
+    flat: true
+  }));
+}
+function setLanguageSetting(api, lang) {
+  setLanguage(lang);
+  const current = loadConfigFromStore(api);
+  current.language = lang;
+  saveConfigToStore(api, current);
+  const v = (api.kv?.get?.("tokenwatch-config-version") ?? 0) + 1;
+  api.kv?.set?.("tokenwatch-config-version", v);
+}
+function toggleSidebarSetting(api, key) {
+  const current = loadConfigFromStore(api);
+  current.sidebar[key] = !current.sidebar[key];
+  saveConfigToStore(api, current);
+  const v = (api.kv?.get?.("tokenwatch-config-version") ?? 0) + 1;
+  api.kv?.set?.("tokenwatch-config-version", v);
+}
+function loadConfigFromStore(api) {
+  const base = {
+    sidebar: {
+      ...DEFAULT_CONFIG.sidebar
+    },
+    language: DEFAULT_CONFIG.language
+  };
+  try {
+    const stored = api.kv?.get?.("tokenwatch-config");
+    if (stored) {
+      if (stored.sidebar) Object.assign(base.sidebar, stored.sidebar);
+      if (stored.language) base.language = stored.language;
+    }
+  } catch {
+  }
+  return base;
+}
+
+// src/sidebar.tsx
+import { createComponent as _$createComponent2 } 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";
+var DEFAULT_CONFIG2 = {
+  sidebar: {
+    showPerformance: true,
+    showPricing: true,
+    showTokenDistribution: true,
+    showTrend: true
+  },
+  language: "auto"
+};
+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(api) {
+  try {
+    return api.kv?.get?.("tokenwatch-collapse") ?? {
+      global: false,
+      models: {},
+      subBlocks: {}
+    };
+  } catch {
+    return {
+      global: false,
+      models: {},
+      subBlocks: {}
+    };
+  }
+}
+function saveCollapseState(api, state) {
+  try {
+    api.kv?.set?.("tokenwatch-collapse", state);
+  } catch {
+  }
+}
+function loadConfig(api) {
+  const base = {
+    sidebar: {
+      ...DEFAULT_CONFIG2.sidebar
+    },
+    language: DEFAULT_CONFIG2.language
+  };
+  try {
+    const pluginCfg = api.config?.pluginConfig?.["opencode-tokenwatch"];
+    if (pluginCfg?.sidebar) Object.assign(base.sidebar, pluginCfg.sidebar);
+    if (pluginCfg?.language) base.language = pluginCfg.language;
+    const overrides = api.kv?.get?.("tokenwatch-config");
+    if (overrides?.sidebar) Object.assign(base.sidebar, overrides.sidebar);
+    if (overrides?.language) base.language = overrides.language;
+  } catch {
+  }
+  return base;
+}
+function TokenWatchPanel(props) {
+  const {
+    api,
+    theme,
+    perfTracker
+  } = props;
+  const getMessages = () => props.messages();
+  const [config, setConfig] = createSignal(loadConfig(api));
+  setLanguage(config().language);
+  let knownCfgVer = api.kv?.get?.("tokenwatch-config-version");
+  const t2 = (key) => {
+    void config().language;
+    return t(key);
+  };
+  const isEnglish = (str) => /^[a-zA-Z\s\.\/]+$/.test(str);
+  createEffect(() => {
+    const timer = setInterval(() => {
+      const v = api.kv?.get?.("tokenwatch-config-version");
+      if (v != null && v !== knownCfgVer) {
+        knownCfgVer = v;
+        setConfig(loadConfig(api));
+      }
+    }, 500);
+    onCleanup(() => clearInterval(timer));
+  });
+  const [collapse, setCollapse] = createSignal(loadCollapseState(api));
+  const [panelWidth, setPanelWidth] = createSignal(38);
+  let outerBoxRef = null;
+  createEffect(() => setLanguage(config().language));
+  const primaryColor = () => theme.current.primary;
+  const mutedColor = () => theme.current.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(() => {
+    void props.allTokenMessages();
+    void partVersion();
+    return perfTracker.getSessionStats();
+  });
+  const tokenDistribution = createMemo(() => {
+    void props.allTokenMessages();
+    void partVersion();
+    const dist = {};
+    try {
+      const cfg = api.state.config;
+      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.role;
+      if (role === "user") {
+        if (msg.system) dist.system = (dist.system ?? 0) + estimateTokens(msg.system);
+        let parts = [];
+        try {
+          parts = api.state.part(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 = api.state.part(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(api, n);
+      return n;
+    }),
+    model: (k) => setCollapse((p) => {
+      const n = {
+        ...p,
+        models: {
+          ...p.models,
+          [k]: !p.models[k]
+        }
+      };
+      saveCollapseState(api, n);
+      return n;
+    }),
+    sub: (k) => setCollapse((p) => {
+      const n = {
+        ...p,
+        subBlocks: {
+          ...p.subBlocks,
+          [k]: !p.subBlocks[k]
+        }
+      };
+      saveCollapseState(api, n);
+      return n;
+    })
+  };
+  onMount(() => {
+    const unsubPart = api.event?.on?.("message.part.updated", () => setPartVersion((v) => v + 1));
+    onCleanup(() => {
+      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$, _$createComponent2(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, _$createComponent2(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;
+        })(), _$createComponent2(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;
+          }
+        }), _$createComponent2(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, _$createComponent2(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, _$createComponent2(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$47 = _$createElement("box"), _el$48 = _$createElement("text"), _el$49 = _$createElement("text");
+                          _$insertNode(_el$47, _el$48);
+                          _$insertNode(_el$47, _el$49);
+                          _$setProp(_el$47, "flexDirection", "column");
+                          _$insert(_el$48, () => centerAlign(item.val, colW()));
+                          _$insert(_el$49, () => centerAlign(isEnglish(item.lbl) ? item.lbl.toUpperCase() : item.lbl, colW()));
+                          _$effect((_p$) => {
+                            var _v$21 = colW(), _v$22 = primaryColor(), _v$23 = dimColor();
+                            _v$21 !== _p$.e && (_p$.e = _$setProp(_el$47, "width", _v$21, _p$.e));
+                            _v$22 !== _p$.t && (_p$.t = _$setProp(_el$48, "fg", _v$22, _p$.t));
+                            _v$23 !== _p$.a && (_p$.a = _$setProp(_el$49, "fg", _v$23, _p$.a));
+                            return _p$;
+                          }, {
+                            e: void 0,
+                            t: void 0,
+                            a: void 0
+                          });
+                          return _el$47;
+                        })();
+                      }
+                    }));
+                    _$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$50 = _$createElement("span");
+                        _$insert(_el$50, trendStr);
+                        _$effect((_$p) => _$setProp(_el$50, "style", {
+                          fg: trendColor()
+                        }, _$p));
+                        return _el$50;
+                      })() : null;
+                    })(), null);
+                    _$insert(_el$30, _$createComponent2(Show, {
+                      get when() {
+                        return _$memo(() => !!config().sidebar.showPerformance)() && !!perfStats().models[key];
+                      },
+                      get children() {
+                        var _el$37 = _$createElement("text"), _el$38 = _$createTextNode(` `), _el$39 = _$createElement("span"), _el$40 = _$createTextNode(`  `), _el$41 = _$createTextNode(` `), _el$42 = _$createElement("span"), _el$43 = _$createTextNode(`  `), _el$44 = _$createTextNode(` `), _el$45 = _$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$42);
+                        _$insertNode(_el$37, _el$43);
+                        _$insertNode(_el$37, _el$44);
+                        _$insertNode(_el$37, _el$45);
+                        _$setProp(_el$37, "marginTop", 1);
+                        _$insert(_el$37, () => t2("ttft"), _el$38);
+                        _$insert(_el$39, () => formatDuration(perfStats().models[key]?.avgTTFT ?? null));
+                        _$insert(_el$37, () => t2("tps"), _el$41);
+                        _$insert(_el$42, () => perfStats().models[key]?.avgTPS?.toFixed(1) ?? "\u2014");
+                        _$insert(_el$37, () => t2("lat"), _el$44);
+                        _$insert(_el$45, () => formatDuration(perfStats().models[key]?.avgLatency ?? null));
+                        _$effect((_p$) => {
+                          var _v$10 = mutedColor(), _v$11 = {
+                            fg: primaryColor()
+                          }, _v$12 = {
+                            fg: primaryColor()
+                          }, _v$13 = {
+                            fg: primaryColor()
+                          };
+                          _v$10 !== _p$.e && (_p$.e = _$setProp(_el$37, "fg", _v$10, _p$.e));
+                          _v$11 !== _p$.t && (_p$.t = _$setProp(_el$39, "style", _v$11, _p$.t));
+                          _v$12 !== _p$.a && (_p$.a = _$setProp(_el$42, "style", _v$12, _p$.a));
+                          _v$13 !== _p$.o && (_p$.o = _$setProp(_el$45, "style", _v$13, _p$.o));
+                          return _p$;
+                        }, {
+                          e: void 0,
+                          t: void 0,
+                          a: void 0,
+                          o: void 0
+                        });
+                        return _el$37;
+                      }
+                    }), null);
+                    _$insert(_el$30, _$createComponent2(Show, {
+                      get when() {
+                        return _$memo(() => !!config().sidebar.showPricing)() && stat.totalCost > 0;
+                      },
+                      get children() {
+                        var _el$46 = _$createElement("text");
+                        _$insert(_el$46, paddedCostPrefix, null);
+                        _$insert(_el$46, () => formatCost(stat.totalCost), null);
+                        _$effect((_$p) => _$setProp(_el$46, "fg", mutedColor(), _$p));
+                        return _el$46;
+                      }
+                    }), null);
+                    _$effect((_p$) => {
+                      var _v$14 = borderColor(), _v$15 = mutedColor(), _v$16 = {
+                        fg: hitRateColor(hitRate)
+                      };
+                      _v$14 !== _p$.e && (_p$.e = _$setProp(_el$31, "borderColor", _v$14, _p$.e));
+                      _v$15 !== _p$.t && (_p$.t = _$setProp(_el$33, "fg", _v$15, _p$.t));
+                      _v$16 !== _p$.a && (_p$.a = _$setProp(_el$34, "style", _v$16, _p$.a));
+                      return _p$;
+                    }, {
+                      e: void 0,
+                      t: void 0,
+                      a: void 0
+                    });
+                    return _el$30;
+                  }
+                }), null);
+                _$effect((_p$) => {
+                  var _v$17 = mutedColor(), _v$18 = {
+                    fg: hitRateColor(hitRate)
+                  }, _v$19 = {
+                    fg: primaryColor()
+                  }, _v$20 = mutedColor();
+                  _v$17 !== _p$.e && (_p$.e = _$setProp(_el$24, "fg", _v$17, _p$.e));
+                  _v$18 !== _p$.t && (_p$.t = _$setProp(_el$25, "style", _v$18, _p$.t));
+                  _v$19 !== _p$.a && (_p$.a = _$setProp(_el$28, "style", _v$19, _p$.a));
+                  _v$20 !== _p$.o && (_p$.o = _$setProp(_el$29, "fg", _v$20, _p$.o));
+                  return _p$;
+                }, {
+                  e: void 0,
+                  t: void 0,
+                  a: void 0,
+                  o: void 0
+                });
+                return _el$22;
+              })()
+            );
+          }
+        }), _$createComponent2(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, _$createComponent2(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, _$createComponent2(For, {
+                  get each() {
+                    return Object.entries(tokenDistribution()).filter(([_, val]) => val > 0);
+                  },
+                  children: ([role, val]) => (() => {
+                    var _el$51 = _$createElement("box"), _el$52 = _$createElement("box"), _el$53 = _$createElement("text"), _el$55 = _$createElement("text"), _el$56 = _$createElement("text");
+                    _$insertNode(_el$51, _el$52);
+                    _$insertNode(_el$51, _el$56);
+                    _$setProp(_el$51, "flexDirection", "row");
+                    _$setProp(_el$51, "justifyContent", "space-between");
+                    _$insertNode(_el$52, _el$53);
+                    _$insertNode(_el$52, _el$55);
+                    _$setProp(_el$52, "flexDirection", "row");
+                    _$insertNode(_el$53, _$createTextNode(`\u2588 `));
+                    _$insert(_el$55, () => t2(role));
+                    _$insert(_el$56, () => formatTokens(val));
+                    _$effect((_p$) => {
+                      var _v$24 = distRoleColor(role), _v$25 = mutedColor(), _v$26 = mutedColor();
+                      _v$24 !== _p$.e && (_p$.e = _$setProp(_el$53, "fg", _v$24, _p$.e));
+                      _v$25 !== _p$.t && (_p$.t = _$setProp(_el$55, "fg", _v$25, _p$.t));
+                      _v$26 !== _p$.a && (_p$.a = _$setProp(_el$56, "fg", _v$26, _p$.a));
+                      return _p$;
+                    }, {
+                      e: void 0,
+                      t: void 0,
+                      a: void 0
+                    });
+                    return _el$51;
+                  })()
+                }));
+                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/tui.tsx
+function kvKey(sessionID) {
+  return "tokenwatch-msgs-" + sessionID;
+}
+var tui = async (api) => {
+  const perfTracker = createPerfTracker();
+  const [sidebarRevision, setSidebarRevision] = createSignal2(0);
+  const [allTokenMessages, setAllTokenMessages] = createSignal2([]);
+  let currentSlotSessionID = "";
+  const cleanups = [];
+  registerCommands(api);
+  function persistToKv(sessionID, msgs) {
+    try {
+      api.kv?.set?.(kvKey(sessionID), msgs);
+    } catch {
+    }
+  }
+  const unsubMsgUpdated = api.event.on("message.updated", (event) => {
+    const info = event.properties?.info;
+    perfTracker.handleMessageUpdated(event);
+    if (info?.role === "assistant" && info?.tokens?.total > 0) {
+      setAllTokenMessages((prev) => {
+        const msg = {
+          id: info.id,
+          sessionID: info.sessionID ?? "",
+          providerID: info.providerID ?? "unknown",
+          modelID: info.modelID ?? "unknown",
+          inputTokens: info.tokens?.input ?? 0,
+          outputTokens: info.tokens?.output ?? 0,
+          reasoningTokens: info.tokens?.reasoning ?? 0,
+          cacheRead: info.tokens?.cache?.read ?? 0,
+          cacheWrite: info.tokens?.cache?.write ?? 0,
+          cost: info.cost ?? 0
+        };
+        const idx = prev.findIndex((m) => m.id === msg.id);
+        let next;
+        if (idx >= 0) {
+          next = [...prev];
+          next[idx] = msg;
+        } else {
+          next = [...prev, msg];
+        }
+        const targetSessionID = info.sessionID ?? currentSlotSessionID;
+        persistToKv(targetSessionID, next);
+        return next;
+      });
+    }
+    setSidebarRevision((v) => v + 1);
+  });
+  cleanups.push(unsubMsgUpdated);
+  const unsubPartUpdated = api.event.on("message.part.updated", (event) => {
+    perfTracker.handlePartUpdated({
+      message_id: event.properties?.part?.messageID,
+      type: event.properties?.part?.type,
+      text: event.properties?.part?.type === "text" ? event.properties?.part?.text : void 0,
+      time: {
+        start: event.properties?.part?.time?.start
+      }
+    });
+  });
+  cleanups.push(unsubPartUpdated);
+  const unsubRemoved = api.event.on("message.removed", () => {
+    setSidebarRevision((v) => v + 1);
+  });
+  cleanups.push(unsubRemoved);
+  api.lifecycle?.onDispose?.(() => {
+    for (const cleanup of cleanups) cleanup();
+  });
+  api.slots.register({
+    order: 50,
+    slots: {
+      sidebar_content: (_ctx, {
+        session_id
+      }) => {
+        sidebarRevision();
+        if (session_id && session_id !== currentSlotSessionID) {
+          currentSlotSessionID = session_id;
+          perfTracker.loadSession(session_id);
+          let loaded = [];
+          try {
+            const saved = api.kv?.get?.(kvKey(session_id));
+            if (saved && saved.length > 0) loaded = saved;
+          } catch {
+          }
+          setAllTokenMessages(loaded);
+        }
+        createEffect2(() => {
+          if (!session_id) return;
+          let timer = null;
+          let pollCount = 0;
+          const maxPolls = 50;
+          const checkAndPopulate = () => {
+            const existing = api.state.session.messages(session_id);
+            if (!existing || existing.length === 0) return false;
+            setAllTokenMessages((prev) => {
+              let changed = false;
+              const next = [...prev];
+              for (const msg of existing) {
+                if (msg.role !== "assistant") continue;
+                const tokens = msg.tokens;
+                if (!tokens || (tokens.total ?? 0) === 0) continue;
+                const id = msg.id;
+                const idx = next.findIndex((m) => m.id === id);
+                const tokenMsg = {
+                  id,
+                  sessionID: session_id,
+                  providerID: msg.providerID ?? "unknown",
+                  modelID: msg.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: msg.cost ?? 0
+                };
+                if (idx >= 0) {
+                  const cur = next[idx];
+                  if (cur.inputTokens !== tokenMsg.inputTokens || cur.outputTokens !== tokenMsg.outputTokens || cur.reasoningTokens !== tokenMsg.reasoningTokens || cur.cacheRead !== tokenMsg.cacheRead || cur.cacheWrite !== tokenMsg.cacheWrite || cur.cost !== tokenMsg.cost) {
+                    next[idx] = tokenMsg;
+                    changed = true;
+                  }
+                } else {
+                  next.push(tokenMsg);
+                  changed = true;
+                }
+              }
+              if (changed) {
+                persistToKv(session_id, next);
+                return next;
+              }
+              return prev;
+            });
+            return true;
+          };
+          const hasMessages = checkAndPopulate();
+          if (!hasMessages) {
+            timer = setInterval(() => {
+              pollCount++;
+              if (checkAndPopulate() || pollCount >= maxPolls) {
+                clearInterval(timer);
+                timer = null;
+              }
+            }, 200);
+          }
+          onCleanup2(() => {
+            if (timer) {
+              clearInterval(timer);
+            }
+          });
+        });
+        return _$createComponent3(TokenWatchPanel, {
+          api,
+          get theme() {
+            return api.theme;
+          },
+          perfTracker,
+          messages: () => api.state.session.messages(session_id),
+          allTokenMessages
+        });
+      }
+    }
+  });
+};
+var plugin = {
+  id: "opencode-tokenwatch",
+  tui
+};
+var tui_default = plugin;
+export {
+  tui_default as default
+};