dsh-token-chart 0.0.0-stage → 0.1.0

package/lib/client.js

@@ -0,0 +1,1743 @@
+window.__ModuleLoader__.load({ id: "dsh-token-chart", factory: (require) => {
+var module = { exports: {} };
+var exports = module.exports;
+
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/client/index.tsx
+var index_exports = {};
+__export(index_exports, {
+  apply: () => apply,
+  inject: () => inject
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/constants.ts
+var DAY_MS = 24 * 60 * 60 * 1e3;
+var UPDATE_CHECK_TTL_MS = 30 * 60 * 1e3;
+var METRIC_IDS = ["input", "output", "cache", "total"];
+var CHART_IDS = ["bar", "line", "pie", "table", "multi-bar", "multi-line", "bar-line"];
+
+// src/client/contract.ts
+var API = "/token-chart/api";
+var NS = "token-chart";
+var KIND = "dsh-token-chart";
+var PANEL_ID = "token-chart";
+var COLOR = {
+  total: "var(--dsw-alias-brand-primary)",
+  input: "var(--dsw-alias-state-warn-primary)",
+  output: "var(--dsw-alias-state-success-primary)",
+  cache: "var(--dsw-alias-state-idle-primary)",
+  cacheHitRate: "var(--dsw-alias-state-error-primary)"
+};
+var METRIC_COLOR = {
+  total: COLOR.total,
+  input: COLOR.input,
+  output: COLOR.output,
+  cache: COLOR.cache,
+  cacheHitRate: COLOR.cacheHitRate
+};
+var CHART_KINDS = [...CHART_IDS];
+var METRIC_IDS2 = [...METRIC_IDS];
+var DEFAULT_PREFS = {
+  sessionChart: "multi-bar",
+  dailyChart: "multi-bar",
+  sessionMetrics: ["input", "output", "cache", "total"],
+  dailyMetrics: ["input", "output", "cache", "total"],
+  showTable: true,
+  showCacheHitRate: true,
+  interceptUsageButton: true
+};
+
+// src/client/react.ts
+var React = __toESM(require("react"), 1);
+
+// src/client/api.ts
+var useSyncExternalStore = typeof React.useSyncExternalStore === "function" ? React.useSyncExternalStore : (subscribe, getSnapshot) => {
+  const [value, setValue] = React.useState(getSnapshot);
+  React.useEffect(() => subscribe(() => setValue(getSnapshot())), [subscribe, getSnapshot]);
+  return value;
+};
+var prefsStore = (() => {
+  let value = { ...DEFAULT_PREFS };
+  const listeners = /* @__PURE__ */ new Set();
+  return {
+    get: () => value,
+    set: (next) => {
+      value = next;
+      for (const listener of [...listeners]) listener();
+    },
+    subscribe: (listener) => {
+      listeners.add(listener);
+      return () => listeners.delete(listener);
+    }
+  };
+})();
+function usePrefs() {
+  return useSyncExternalStore(prefsStore.subscribe, prefsStore.get);
+}
+async function apiGet(path) {
+  const response = await fetch(`${API}${path}`, { headers: { accept: "application/json" } });
+  const payload = await response.json().catch(() => null);
+  if (payload === null || payload.ok !== true) {
+    throw new Error(payload?.error?.message ?? `HTTP ${response.status}`);
+  }
+  return payload;
+}
+async function apiPost(path, body) {
+  const response = await fetch(`${API}${path}`, {
+    method: "POST",
+    headers: { "content-type": "application/json" },
+    body: JSON.stringify(body ?? {})
+  });
+  const payload = await response.json().catch(() => null);
+  if (payload === null || payload.ok !== true) {
+    throw new Error(payload?.error?.message ?? `HTTP ${response.status}`);
+  }
+  return payload;
+}
+function useEndpoint(path, tick) {
+  const [state, setState] = React.useState({ loading: true, value: void 0 });
+  React.useEffect(() => {
+    let live = true;
+    setState((current) => ({ ...current, loading: true }));
+    apiGet(path).then((payload) => {
+      if (!live) return;
+      setState({ loading: false, value: payload.value, error: void 0 });
+    }).catch((error) => {
+      if (!live) return;
+      setState({
+        loading: false,
+        value: void 0,
+        error: String(error?.message ?? error)
+      });
+    });
+    return () => {
+      live = false;
+    };
+  }, [path, tick]);
+  return state;
+}
+function useElementWidth() {
+  const ref = React.useRef(null);
+  const [width, setWidth] = React.useState(0);
+  React.useEffect(() => {
+    const node = ref.current;
+    if (node === null) return void 0;
+    const update = () => setWidth(node.clientWidth);
+    update();
+    if (typeof ResizeObserver === "undefined") {
+      window.addEventListener("resize", update);
+      return () => window.removeEventListener("resize", update);
+    }
+    const observer = new ResizeObserver(update);
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, []);
+  return [ref, width];
+}
+
+// src/client/chrome.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function PanelIcon({ size = 18, active = false }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      "aria-hidden": true,
+      style: { opacity: active ? 1 : 0.9, display: "block" },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { x: 3, y: 12, width: 4, height: 9, rx: 1, fill: "currentColor" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { x: 9, y: 8, width: 4, height: 13, rx: 1, fill: "currentColor", opacity: 0.75 }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { x: 15, y: 4, width: 4, height: 17, rx: 1, fill: "currentColor", opacity: 0.5 })
+      ]
+    }
+  );
+}
+function HeaderUsageButton({
+  sessionId,
+  open,
+  t
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "button",
+    {
+      type: "button",
+      className: "dtc-header-button",
+      "aria-label": t("usage.openDrawer"),
+      title: t("usage.title"),
+      onClick: () => open(sessionId),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: 16, height: 16, viewBox: "0 0 24 24", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M4 19V9M10 19V5M16 19v-7M22 19H2", stroke: "currentColor", strokeWidth: 1.6, strokeLinecap: "round" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dtc-header-label", children: t("panel.title") })
+      ]
+    }
+  );
+}
+var STYLE_PATH = "/token-chart/assets/token-chart.css";
+var STYLE_LINK_MARKER = "data-dtc-styles";
+var SETTINGS_NAV_MARKER = "data-dtc-settings-nav";
+function registerSettingsNavIcon(label) {
+  let disposed = false;
+  const sync = () => {
+    if (disposed) return;
+    const current = label().trim();
+    for (const button of document.querySelectorAll('[role="dialog"] nav button')) {
+      if (current !== "" && (button.textContent ?? "").trim() === current) button.setAttribute(SETTINGS_NAV_MARKER, "");
+      else button.removeAttribute(SETTINGS_NAV_MARKER);
+    }
+  };
+  sync();
+  const observer = new MutationObserver(sync);
+  observer.observe(document.body, { childList: true, subtree: true, characterData: true });
+  return () => {
+    disposed = true;
+    observer.disconnect();
+    for (const marked of document.querySelectorAll(`[${SETTINGS_NAV_MARKER}]`))
+      marked.removeAttribute(SETTINGS_NAV_MARKER);
+  };
+}
+function installStyles() {
+  const existing = document.querySelector(`link[${STYLE_LINK_MARKER}]`);
+  if (existing !== null) return () => {
+  };
+  const link = document.createElement("link");
+  link.rel = "stylesheet";
+  link.href = STYLE_PATH;
+  link.setAttribute(STYLE_LINK_MARKER, "");
+  document.head.appendChild(link);
+  return () => {
+    link.remove();
+  };
+}
+
+// src/client/pill.ts
+function isUsagePill(target) {
+  let node = target;
+  for (let depth = 0; depth < 6 && node !== null && node !== void 0; depth += 1) {
+    if (node.nodeType === 1 && node.tagName === "BUTTON") {
+      const text = node.textContent ?? "";
+      if (node.getAttribute("aria-haspopup") === "dialog" && /\btok\b/i.test(text)) return true;
+      return false;
+    }
+    node = node.parentNode;
+  }
+  return false;
+}
+
+// src/client/locales.ts
+var zh = {
+  "panel.title": "Token 用量",
+  "panel.subtitle": "统计今天、近 3 天、近 7 天的 Token 用量",
+  "panel.range.today": "今天",
+  "panel.range.3d": "近 3 天",
+  "panel.range.7d": "近 7 天",
+  "panel.refresh": "刷新",
+  "panel.loading": "正在统计…",
+  "panel.empty": "所选区间内还没有 Token 用量记录",
+  "table.total": "共 {count} 条",
+  "table.pagination": "分页",
+  "table.prev": "上一页",
+  "table.next": "下一页",
+  "table.pageSizeLabel": "每页条数",
+  "table.page": "第 {page} 页",
+  "table.pageSize": "{size} 条/页",
+  "panel.updated": "更新于 {time}",
+  "panel.retention": "仅保留近 {days} 天的数据",
+  "settings.nav": "Token 用量",
+  "settings.title": "Token 用量可视化",
+  "settings.description": "选择各场景使用的图表形式与展示指标，保存后立即生效。",
+  "settings.sessionChart": "会话用量抽屉",
+  "settings.sessionChartHint": "点击会话中的「用量」按钮后，在右侧抽屉里展示的图形。",
+  "settings.dailyChart": "每日用量面板",
+  "settings.dailyChartHint": "侧边栏「Token 用量」菜单中「今天 / 近 3 天 / 近 7 天」的图形。",
+  "settings.metrics": "展示指标",
+  "settings.showTable": "图表下方附带数据表格",
+  "settings.showCacheHitRate": "叠加缓存命中率折线",
+  "settings.showCacheHitRateHint": "在柱状图、折线图与组合图中叠加缓存命中率折线（右轴）",
+  "settings.interceptUsageButton": "点击「用量」按钮打开侧边抽屉",
+  "settings.interceptUsageButtonHint": "关闭后恢复 DSH 默认的用量弹窗。",
+  "settings.saved": "已保存",
+  "settings.saving": "保存中…",
+  "settings.saveFailed": "保存失败：{error}",
+  "settings.preview": "预览",
+  "settings.reset": "恢复默认",
+  "chart.bar": "柱状图",
+  "chart.line": "折线图",
+  "chart.pie": "饼图",
+  "chart.table": "表格",
+  "chart.multi-bar": "多柱状图",
+  "chart.multi-line": "多折线图",
+  "chart.bar-line": "柱状折线组合图",
+  "chart.loading": "正在加载图表…",
+  "settings.update": "更新版本",
+  "settings.update.checking": "正在检查更新…",
+  "settings.update.upToDate": "已是最新版本",
+  "settings.update.unpublished": "未发布到 registry，无法自动更新",
+  "settings.update.running": "正在更新…",
+  "settings.update.done": "更新完成：{target}",
+  "settings.update.failed": "更新失败：{error}",
+  "settings.update.local": "本地安装，请在源码目录重建并重新加载",
+  "settings.update.check": "检查更新",
+  "metric.total": "总 Token",
+  "metric.input": "输入 Token",
+  "metric.output": "输出 Token",
+  "metric.cache": "缓存 Token",
+  "metric.cacheHitRate": "缓存命中率",
+  "usage.title": "Token 用量",
+  "usage.session": "会话 Token 用量",
+  "usage.turns": "对话轮次",
+  "usage.sessions": "活跃会话",
+  "usage.cacheRead": "缓存读取",
+  "usage.cacheWrite": "缓存写入",
+  "usage.route": "模型",
+  "usage.openDrawer": "打开 Token 用量抽屉",
+  "usage.refresh": "刷新用量",
+  "table.day": "日期",
+  "table.turn": "轮次",
+  "table.time": "时间",
+  "table.metric": "指标",
+  "table.value": "数值",
+  "table.share": "占比",
+  "table.session": "会话",
+  "usage.emptySession": "该会话还没有可统计的 Token 用量",
+  "usage.accounting": "总量按计费口径累计：每次请求的上下文（含缓存重读）都计入，与 DSH 产品内「用量」一致",
+  "usage.crossCheckFailed": "与产品内「用量」投影不一致（产品 {product}）——请反馈此差异"
+};
+var en = {
+  "panel.title": "Token usage",
+  "panel.subtitle": "Today, last 3 days, and last 7 days of token usage",
+  "panel.range.today": "Today",
+  "panel.range.3d": "Last 3 days",
+  "panel.range.7d": "Last 7 days",
+  "panel.refresh": "Refresh",
+  "panel.loading": "Collecting…",
+  "panel.empty": "No token usage recorded in this window",
+  "table.total": "{count} rows",
+  "table.pagination": "Pagination",
+  "table.prev": "Previous page",
+  "table.next": "Next page",
+  "table.page": "Page {page}",
+  "table.pageSize": "{size} / page",
+  "table.pageSizeLabel": "Rows per page",
+  "panel.updated": "Updated {time}",
+  "panel.retention": "Only the last {days} days are kept",
+  "settings.nav": "Token usage",
+  "settings.title": "Token usage charts",
+  "settings.description": "Choose the chart form and the metrics for each surface; changes apply immediately.",
+  "settings.sessionChart": "Session usage drawer",
+  "settings.sessionChartHint": "The chart shown in the right drawer after clicking the usage button.",
+  "settings.dailyChart": "Daily usage panel",
+  "settings.dailyChartHint": "The chart for Today / last 3 days / last 7 days in the sidebar panel.",
+  "settings.metrics": "Metrics",
+  "settings.showTable": "Show the data table under the chart",
+  "settings.showCacheHitRate": "Overlay the cache-hit-rate line",
+  "settings.showCacheHitRateHint": "Overlay the cache-hit-rate line (right axis) on bar, line and combo charts",
+  "settings.interceptUsageButton": "Open the drawer from the usage button",
+  "settings.interceptUsageButtonHint": "Turn off to restore the shipped usage dialog.",
+  "settings.saved": "Saved",
+  "settings.saving": "Saving…",
+  "settings.saveFailed": "Save failed: {error}",
+  "settings.preview": "Preview",
+  "settings.reset": "Restore defaults",
+  "chart.bar": "Bar",
+  "chart.line": "Line",
+  "chart.pie": "Pie",
+  "chart.table": "Table",
+  "chart.multi-bar": "Grouped bars",
+  "chart.multi-line": "Multi line",
+  "chart.bar-line": "Bar + line",
+  "chart.loading": "Loading chart…",
+  "settings.update": "Update",
+  "settings.update.checking": "Checking for updates…",
+  "settings.update.upToDate": "Up to date",
+  "settings.update.unpublished": "Not published to a registry",
+  "settings.update.running": "Updating…",
+  "settings.update.done": "Updated: {target}",
+  "settings.update.failed": "Update failed: {error}",
+  "settings.update.local": "Local install — rebuild and reload from the source directory",
+  "settings.update.check": "Check for updates",
+  "metric.total": "Total tokens",
+  "metric.input": "Input tokens",
+  "metric.output": "Output tokens",
+  "metric.cache": "Cache tokens",
+  "metric.cacheHitRate": "Cache hit rate",
+  "usage.title": "Token usage",
+  "usage.session": "Session token usage",
+  "usage.turns": "Turns",
+  "usage.sessions": "Active sessions",
+  "usage.cacheRead": "Cache read",
+  "usage.cacheWrite": "Cache write",
+  "usage.route": "Model",
+  "usage.openDrawer": "Open the token usage drawer",
+  "usage.refresh": "Refresh usage",
+  "table.day": "Day",
+  "table.turn": "Turn",
+  "table.time": "Time",
+  "table.metric": "Metric",
+  "table.value": "Value",
+  "table.share": "Share",
+  "table.session": "Session",
+  "usage.emptySession": "This session has no token usage yet",
+  "usage.accounting": "Totals follow the billing rule: every request re-reads the context (cache included) and counts — same as the product usage pill",
+  "usage.crossCheckFailed": "Differs from the product usage projection ({product}) — please report this"
+};
+
+// src/client/format.ts
+function compactTokens(value) {
+  const number = Number(value) || 0;
+  if (Math.abs(number) >= 1e9) return `${(number / 1e9).toFixed(2)}B`;
+  if (Math.abs(number) >= 1e6) return `${(number / 1e6).toFixed(2)}M`;
+  if (Math.abs(number) >= 1e4) return `${(number / 1e3).toFixed(1)}K`;
+  return String(Math.round(number));
+}
+function exactTokens(value) {
+  return (Number(value) || 0).toLocaleString("en-US");
+}
+function percentText(rate) {
+  return `${((Number(rate) || 0) * 100).toFixed(1)}%`;
+}
+function clockText(time, withSeconds = false) {
+  const date = new Date(Number(time) || Date.now());
+  const pad = (input) => String(input).padStart(2, "0");
+  const base = `${pad(date.getHours())}:${pad(date.getMinutes())}`;
+  return withSeconds ? `${base}:${pad(date.getSeconds())}` : base;
+}
+function fill(template, values) {
+  return String(template).replace(
+    /\{(\w+)\}/g,
+    (_match, key) => values[key] === void 0 ? `{${key}}` : String(values[key])
+  );
+}
+
+// src/client/ui.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function KpiRow({ totals, t }) {
+  const items = [
+    { key: "total", label: t("metric.total") },
+    { key: "input", label: t("metric.input") },
+    { key: "output", label: t("metric.output") },
+    { key: "cache", label: t("metric.cache") }
+  ];
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "dtc-kpis", children: [
+    items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "dtc-kpi", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "dtc-kpi-label", children: item.label }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "dtc-kpi-value", children: compactTokens(totals?.[item.key]) }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "dtc-kpi-exact", children: exactTokens(totals?.[item.key]) })
+    ] }, item.key)),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "dtc-kpi", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "dtc-kpi-label", children: t("metric.cacheHitRate") }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "dtc-kpi-value", children: percentText(totals?.cacheHitRate) }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "dtc-kpi-exact", children: `${exactTokens(totals?.cacheRead)} / ${exactTokens((totals?.cacheRead ?? 0) + (totals?.cacheWrite ?? 0))}` })
+    ] })
+  ] });
+}
+function UsageFacts({ totals, t, extra }) {
+  const rows = [
+    [t("usage.turns"), exactTokens(totals?.turns)],
+    [t("usage.cacheRead"), exactTokens(totals?.cacheRead)],
+    [t("usage.cacheWrite"), exactTokens(totals?.cacheWrite)],
+    [t("metric.input"), exactTokens(totals?.input)],
+    [t("metric.output"), exactTokens(totals?.output)],
+    [t("metric.cacheHitRate"), percentText(totals?.cacheHitRate)],
+    ...extra ?? []
+  ];
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("dl", { className: "dtc-facts", children: rows.flatMap(([label, value]) => [/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("dt", { children: label }, `${label}-dt`), /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("dd", { children: value }, `${label}-dd`)]) });
+}
+function Toolbar({ children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "dtc-toolbar", children });
+}
+function Segmented({
+  value,
+  options,
+  onChange
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "dtc-segmented", role: "tablist", children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "button",
+    {
+      type: "button",
+      role: "tab",
+      "aria-selected": value === option.value,
+      className: option.value === value ? "dtc-segment dtc-segment-active" : "dtc-segment",
+      onClick: () => onChange(option.value),
+      children: option.label
+    },
+    option.value
+  )) });
+}
+
+// src/client/charts.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function CartesianChart({
+  points,
+  series,
+  height = 210
+}) {
+  const [ref, width] = useElementWidth();
+  const box = Math.max(220, width || 320);
+  const hasRight = series.some((entry) => entry.axis === "right");
+  const padding = { top: 12, right: hasRight ? 46 : 14, bottom: 30, left: 48 };
+  const innerWidth = Math.max(40, box - padding.left - padding.right);
+  const innerHeight = Math.max(40, height - padding.top - padding.bottom);
+  const leftMax = Math.max(
+    1,
+    ...series.filter((entry) => entry.axis !== "right").flatMap((entry) => points.map((point) => Number(point.values[entry.key]) || 0))
+  );
+  const rightMax = Math.max(
+    1e-4,
+    ...series.filter((entry) => entry.axis === "right").flatMap((entry) => points.map((point) => Number(point.values[entry.key]) || 0))
+  );
+  const scaleY = (value, axis) => {
+    const max = axis === "right" ? rightMax : leftMax;
+    return padding.top + innerHeight - Math.max(0, value) / max * innerHeight;
+  };
+  const step = innerWidth / Math.max(1, points.length);
+  const barSeries = series.filter((entry) => entry.type === "bar");
+  const barWidth = Math.max(2, Math.min(26, step * 0.72 / Math.max(1, barSeries.length)));
+  const gridLines = [0, 0.25, 0.5, 0.75, 1];
+  const labelEvery = Math.max(1, Math.ceil(points.length / Math.max(2, Math.floor(innerWidth / 56))));
+  const children = [];
+  for (const ratio of gridLines) {
+    const y = padding.top + innerHeight * ratio;
+    children.push(
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "line",
+        {
+          x1: padding.left,
+          x2: padding.left + innerWidth,
+          y1: y,
+          y2: y,
+          stroke: "var(--dsw-alias-border-l1)",
+          strokeWidth: 1,
+          strokeDasharray: ratio === 1 ? void 0 : "3 4"
+        },
+        `grid-${ratio}`
+      )
+    );
+  }
+  children.push(
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "text",
+      {
+        x: padding.left - 8,
+        y: padding.top + 4,
+        textAnchor: "end",
+        fontSize: 10,
+        fill: "var(--dsw-alias-label-secondary)",
+        children: compactTokens(leftMax)
+      },
+      "axis-left-max"
+    )
+  );
+  children.push(
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "text",
+      {
+        x: padding.left - 8,
+        y: padding.top + innerHeight,
+        textAnchor: "end",
+        fontSize: 10,
+        fill: "var(--dsw-alias-label-secondary)",
+        children: "0"
+      },
+      "axis-left-zero"
+    )
+  );
+  if (hasRight) {
+    children.push(
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "text",
+        {
+          x: padding.left + innerWidth + 8,
+          y: padding.top + 4,
+          fontSize: 10,
+          fill: "var(--dsw-alias-label-secondary)",
+          children: percentText(rightMax)
+        },
+        "axis-right-max"
+      )
+    );
+  }
+  points.forEach((point, index) => {
+    if (index % labelEvery !== 0) return;
+    children.push(
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "text",
+        {
+          x: padding.left + step * index + step / 2,
+          y: padding.top + innerHeight + 16,
+          textAnchor: "middle",
+          fontSize: 10,
+          fill: "var(--dsw-alias-label-secondary)",
+          children: String(point.label ?? "")
+        },
+        `label-${index}`
+      )
+    );
+  });
+  barSeries.forEach((entry, seriesIndex) => {
+    points.forEach((point, index) => {
+      const value = Math.max(0, Number(point.values[entry.key]) || 0);
+      if (value <= 0) return;
+      const x = padding.left + step * index + step / 2 - barWidth * barSeries.length / 2 + barWidth * seriesIndex;
+      const y = scaleY(value, entry.axis);
+      children.push(
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "rect",
+          {
+            x,
+            y,
+            width: barWidth,
+            height: Math.max(1, padding.top + innerHeight - y),
+            rx: Math.min(3, barWidth / 2),
+            fill: entry.color,
+            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("title", { children: `${entry.label}: ${exactTokens(value)}` })
+          },
+          `bar-${entry.key}-${index}`
+        )
+      );
+    });
+  });
+  for (const entry of series.filter((item) => item.type === "line")) {
+    const coordinates = points.map((point, index) => {
+      const value = Number(point.values[entry.key]) || 0;
+      return [padding.left + step * index + step / 2, scaleY(value, entry.axis)];
+    });
+    children.push(
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "polyline",
+        {
+          points: coordinates.map((pair) => pair.join(",")).join(" "),
+          fill: "none",
+          stroke: entry.color,
+          strokeWidth: 2,
+          strokeLinejoin: "round",
+          strokeLinecap: "round"
+        },
+        `line-${entry.key}`
+      )
+    );
+    coordinates.forEach((pair, index) => {
+      children.push(
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: pair[0], cy: pair[1], r: 2.6, fill: entry.color, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("title", { children: `${entry.label}: ${exactTokens(points[index].values[entry.key])}` }) }, `dot-${entry.key}-${index}`)
+      );
+    });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "dtc-chart", ref, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { width: box, height, role: "img", "aria-label": series.map((entry) => entry.label).join(", "), children }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Legend, { series })
+  ] });
+}
+function Legend({ series }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "dtc-legend", children: series.map((entry) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "dtc-legend-item", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "dtc-swatch", style: { background: entry.color } }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: entry.label })
+  ] }, entry.key)) });
+}
+function PieChart({ slices, t }) {
+  const [ref, width] = useElementWidth();
+  const box = Math.max(180, Math.min(width || 240, 240));
+  const size = box;
+  const radius = size / 2 - 6;
+  const inner = radius * 0.58;
+  const center = size / 2;
+  const total = slices.reduce((sum, slice) => sum + (Number(slice.value) || 0), 0);
+  if (total <= 0) return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "dtc-empty", children: t("panel.empty") });
+  let angle = -Math.PI / 2;
+  const paths = slices.map((slice, index) => {
+    const fraction = (Number(slice.value) || 0) / total;
+    const sweep = fraction * Math.PI * 2;
+    const start = angle;
+    const end = angle + sweep;
+    angle = end;
+    const large = sweep > Math.PI ? 1 : 0;
+    const point = (r, a) => [center + r * Math.cos(a), center + r * Math.sin(a)];
+    const [x1, y1] = point(radius, start);
+    const [x2, y2] = point(radius, end);
+    const [x3, y3] = point(inner, end);
+    const [x4, y4] = point(inner, start);
+    const d = slice.value <= 0 ? "" : `M ${x1} ${y1} A ${radius} ${radius} 0 ${large} 1 ${x2} ${y2} L ${x3} ${y3} A ${inner} ${inner} 0 ${large} 0 ${x4} ${y4} Z`;
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "path",
+      {
+        d,
+        fill: slice.color,
+        fillOpacity: slice.opacity ?? 1,
+        stroke: "var(--dsw-alias-bg-base)",
+        strokeWidth: 1.5,
+        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("title", { children: `${slice.label}: ${exactTokens(slice.value)} (${percentText(fraction)})` })
+      },
+      `slice-${slice.key}-${index}`
+    );
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "dtc-chart dtc-chart-pie", ref, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { width: size, height: size, role: "img", "aria-label": t("chart.pie"), children: paths }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "dtc-legend dtc-legend-column", children: slices.map((slice, index) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "dtc-legend-item", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "dtc-swatch", style: { background: slice.color, opacity: slice.opacity ?? 1 } }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: `${slice.label} · ${compactTokens(slice.value)} · ${percentText((Number(slice.value) || 0) / total)}` })
+    ] }, `legend-${slice.key}-${index}`)) })
+  ] });
+}
+
+// src/client/mount.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var CHART_CHUNK = "./client.echarts.js";
+var chartLibrary = null;
+function loadChartLibrary() {
+  if (chartLibrary === null) {
+    chartLibrary = Promise.resolve().then(() => require.async(CHART_CHUNK)).then((chunk) => {
+      const library = chunk !== null && typeof chunk === "object" && chunk.default !== void 0 ? chunk.default : chunk;
+      if (library === null || typeof library !== "object" || typeof library.init !== "function") {
+        throw new Error("chart chunk did not export ECharts");
+      }
+      return library;
+    }).catch((error) => {
+      chartLibrary = null;
+      throw error;
+    });
+  }
+  return chartLibrary;
+}
+function themeTokens() {
+  const computed = typeof getComputedStyle === "function" ? getComputedStyle(document.body) : null;
+  const read = (name, fallback) => {
+    const value = computed === null ? "" : computed.getPropertyValue(name).trim();
+    return value === "" ? fallback : value;
+  };
+  return {
+    total: read("--dsw-alias-brand-primary", "#4C6EF5"),
+    input: read("--dsw-alias-state-warn-primary", "#F59F00"),
+    output: read("--dsw-alias-state-success-primary", "#37B24D"),
+    cache: read("--dsw-alias-state-idle-primary", "#868E96"),
+    hitRate: read("--dsw-alias-state-error-primary", "#F03E3E"),
+    secondary: read("--dsw-alias-label-secondary", "#646A73"),
+    border: read("--dsw-alias-border-l1", "#DEE0E3")
+  };
+}
+var TOKEN_OF_METRIC = {
+  total: "total",
+  input: "input",
+  output: "output",
+  cache: "cache",
+  cacheHitRate: "hitRate"
+};
+function withAlpha(color, alpha) {
+  const match = /^#([\da-f]{3}|[\da-f]{6})$/i.exec(String(color).trim());
+  if (match === null) return color;
+  const hex = match[1].length === 3 ? match[1].split("").map((char) => char + char).join("") : match[1];
+  const [r, g, b] = [0, 2, 4].map((offset) => Number.parseInt(hex.slice(offset, offset + 2), 16));
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+function useThemeRevision() {
+  const [revision, setRevision] = React.useState(0);
+  React.useEffect(() => {
+    if (typeof MutationObserver === "undefined") return void 0;
+    const observer = new MutationObserver(() => setRevision((value) => value + 1));
+    const options = { attributes: true, attributeFilter: ["data-ds-dark-theme", "class", "style"] };
+    observer.observe(document.documentElement, options);
+    observer.observe(document.body, options);
+    return () => observer.disconnect();
+  }, []);
+  return revision;
+}
+function echartsOption({ kind, points, series, slices }, tokens) {
+  const axisLabel = { color: tokens.secondary, fontSize: 10 };
+  const axisLine = { lineStyle: { color: tokens.border } };
+  const categories = points.map((point, index) => String(point.label ?? index + 1));
+  const hasRightAxis = series.some((entry) => entry.axis === "right");
+  const colorOf = (key) => tokens[TOKEN_OF_METRIC[key] ?? "total"];
+  if (kind === "pie") {
+    return {
+      animationDuration: 200,
+      textStyle: { color: tokens.secondary, fontSize: 11 },
+      tooltip: {
+        trigger: "item",
+        formatter: (params) => `${params.name}: ${exactTokens(params.value)} (${Number(params.percent).toFixed(1)}%)`
+      },
+      legend: {
+        bottom: 0,
+        itemWidth: 8,
+        itemHeight: 8,
+        textStyle: { color: tokens.secondary, fontSize: 11 }
+      },
+      series: [
+        {
+          type: "pie",
+          radius: ["46%", "70%"],
+          center: ["50%", "44%"],
+          avoidLabelOverlap: true,
+          label: { color: tokens.secondary, fontSize: 10 },
+          labelLine: { lineStyle: { color: tokens.border } },
+          data: slices.map((slice) => ({
+            name: slice.label,
+            value: slice.value,
+            itemStyle: { color: colorOf(slice.metric ?? "total"), opacity: slice.opacity ?? 1 }
+          }))
+        }
+      ]
+    };
+  }
+  const yAxis = [
+    {
+      type: "value",
+      splitLine: { lineStyle: { color: tokens.border, type: "dashed" } },
+      axisLabel: { ...axisLabel, formatter: (value) => compactTokens(value) }
+    }
+  ];
+  if (hasRightAxis) {
+    yAxis.push({
+      type: "value",
+      min: 0,
+      max: 1,
+      position: "right",
+      splitLine: { show: false },
+      axisLabel: { ...axisLabel, formatter: (value) => percentText(value) }
+    });
+  }
+  const zoomable = categories.length >= 2;
+  const legendShown = series.length > 1;
+  const dataZoom = zoomable ? [
+    { type: "inside", start: 0, end: 100 },
+    {
+      type: "slider",
+      start: 0,
+      end: 100,
+      height: 18,
+      bottom: 6,
+      borderColor: tokens.border,
+      backgroundColor: "transparent",
+      fillerColor: withAlpha(tokens.total, 0.12),
+      handleStyle: { color: tokens.total, borderColor: tokens.total },
+      moveHandleStyle: { color: tokens.total },
+      dataBackground: { lineStyle: { color: tokens.border }, areaStyle: { color: tokens.border, opacity: 0.35 } },
+      selectedDataBackground: {
+        lineStyle: { color: tokens.secondary },
+        areaStyle: { color: tokens.secondary, opacity: 0.3 }
+      },
+      textStyle: { color: tokens.secondary, fontSize: 10 },
+      brushSelect: false
+    }
+  ] : void 0;
+  return {
+    animationDuration: 200,
+    textStyle: { color: tokens.secondary, fontSize: 11 },
+    tooltip: { trigger: "axis", axisPointer: { type: "shadow" }, valueFormatter: (value) => exactTokens(value) },
+    legend: legendShown ? { bottom: zoomable ? 30 : 0, itemWidth: 8, itemHeight: 8, textStyle: { color: tokens.secondary, fontSize: 11 } } : { show: false },
+    grid: {
+      left: 4,
+      right: 4,
+      top: 14,
+      bottom: zoomable ? legendShown ? 74 : 48 : legendShown ? 26 : 6,
+      containLabel: true
+    },
+    ...dataZoom === void 0 ? {} : { dataZoom },
+    xAxis: { type: "category", data: categories, axisLabel, axisLine, axisTick: { show: false } },
+    yAxis,
+    series: series.map((entry) => ({
+      name: entry.label,
+      type: entry.type,
+      yAxisIndex: entry.axis === "right" ? 1 : 0,
+      barMaxWidth: 26,
+      itemStyle: { color: colorOf(entry.key) },
+      lineStyle: { color: colorOf(entry.key), width: 2 },
+      symbolSize: 5,
+      data: points.map((point) => Number(point.values[entry.key]) || 0),
+      ...entry.axis === "right" ? { tooltip: { valueFormatter: (value) => percentText(value) } } : {}
+    }))
+  };
+}
+function EchartsMount({
+  spec,
+  height,
+  fallback,
+  t
+}) {
+  const [containerRef, width] = useElementWidth();
+  const holderRef = React.useRef(null);
+  const chartRef = React.useRef(null);
+  const [status, setStatus] = React.useState("pending");
+  const themeRevision = useThemeRevision();
+  const option = React.useMemo(
+    () => status === "failed" ? null : echartsOption(spec, themeTokens()),
+    // themeRevision re-reads the tokens after a light/dark switch
+    [spec, status, themeRevision]
+  );
+  React.useEffect(() => {
+    let live = true;
+    if (status === "failed" || width <= 0) return void 0;
+    loadChartLibrary().then((echarts) => {
+      if (!live) return;
+      const holder = holderRef.current;
+      if (holder === null) return;
+      let chart = chartRef.current;
+      if (chart === null) {
+        chart = echarts.init(holder, null, { renderer: "svg", width, height });
+        chartRef.current = chart;
+      }
+      chart.resize({ width, height });
+      chart.setOption(option, true);
+      setStatus("ready");
+    }).catch((error) => {
+      if (!live) return;
+      console.warn("[dsh-token-chart] chart chunk unavailable, using the built-in renderer:", error);
+      setStatus("failed");
+    });
+    return () => {
+      live = false;
+    };
+  }, [option, width, height, status]);
+  React.useEffect(
+    () => () => {
+      if (chartRef.current !== null) {
+        chartRef.current.dispose();
+        chartRef.current = null;
+      }
+    },
+    []
+  );
+  if (status === "failed") return fallback;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "div",
+    {
+      className: "dtc-chart",
+      ref: containerRef,
+      "data-dtc-renderer": status === "ready" ? "echarts" : "pending",
+      "data-dtc-chart": spec.kind,
+      "data-dtc-zoom": spec.zoom === true ? "slider" : "none",
+      "data-dtc-series": spec.series.length > 0 ? spec.series.map((entry) => entry.type).join(",") : spec.kind === "pie" ? "pie" : "",
+      children: [
+        status === "ready" ? null : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "dtc-empty", children: t("chart.loading") }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "div",
+          {
+            ref: holderRef,
+            className: "dtc-echarts",
+            style: { width: "100%", height: `${height}px`, display: status === "ready" ? "block" : "none" }
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/client/table.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var PAGE_SIZES = [10, 20, 50];
+var DEFAULT_PAGE_SIZE = 20;
+function pageItems(current, pages) {
+  if (pages <= 7) return Array.from({ length: pages }, (_unused, index) => index + 1);
+  const items = [1];
+  const start = Math.max(2, current - 2);
+  const end = Math.min(pages - 1, current + 2);
+  if (start > 2) items.push("gap");
+  for (let page = start; page <= end; page += 1) items.push(page);
+  if (end < pages - 1) items.push("gap");
+  items.push(pages);
+  return items;
+}
+function DataTable({ columns, rows, t }) {
+  const [pageSize, setPageSize] = React.useState(DEFAULT_PAGE_SIZE);
+  const [page, setPage] = React.useState(1);
+  const pages = Math.max(1, Math.ceil(rows.length / pageSize));
+  const current = Math.min(Math.max(page, 1), pages);
+  const start = (current - 1) * pageSize;
+  const visible = rows.slice(start, start + pageSize);
+  React.useEffect(() => {
+    setPage(1);
+  }, [rows.length, pageSize]);
+  if (rows.length === 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "dtc-table-block", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "dtc-table-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("table", { className: "dtc-table", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("tr", { children: columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("th", { className: column.align === "right" ? "dtc-right" : void 0, children: column.label }, column.key)) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("tbody", { children: visible.map((row, index) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("tr", { children: columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("td", { className: column.align === "right" ? "dtc-right" : void 0, children: column.render ? column.render(row) : String(row[column.key] ?? "") }, column.key)) }, row.key ?? index)) })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      "nav",
+      {
+        className: "dtc-pager tw:flex tw:items-center tw:justify-end tw:gap-1",
+        "data-dtc-pager": `${current}/${pages}`,
+        "aria-label": t("table.pagination"),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "dtc-pager-total", children: fill(t("table.total"), { count: exactTokens(rows.length) }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "button",
+            {
+              type: "button",
+              className: "dtc-page dtc-page-nav",
+              "data-dtc-page-step": "prev",
+              disabled: current <= 1,
+              "aria-label": t("table.prev"),
+              onClick: () => setPage((value) => Math.max(1, Math.min(value, pages) - 1)),
+              children: "‹"
+            }
+          ),
+          pageItems(current, pages).map(
+            (item, index) => item === "gap" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "dtc-page-gap", "aria-hidden": "true", children: "…" }, `gap-${index}`) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              "button",
+              {
+                type: "button",
+                className: item === current ? "dtc-page dtc-page-current" : "dtc-page",
+                "data-dtc-page-number": item,
+                "aria-current": item === current ? "page" : void 0,
+                "aria-label": fill(t("table.page"), { page: String(item) }),
+                onClick: () => setPage(item),
+                children: String(item)
+              },
+              item
+            )
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "button",
+            {
+              type: "button",
+              className: "dtc-page dtc-page-nav",
+              "data-dtc-page-step": "next",
+              disabled: current >= pages,
+              "aria-label": t("table.next"),
+              onClick: () => setPage((value) => Math.min(pages, Math.min(Math.max(value, 1), pages) + 1)),
+              children: "›"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "dtc-page-size", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              "select",
+              {
+                className: "dtc-select",
+                "data-dtc-page-size": pageSize,
+                "aria-label": t("table.pageSizeLabel"),
+                value: String(pageSize),
+                onChange: (event) => setPageSize(Number(event.target.value)),
+                children: PAGE_SIZES.map((size) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: String(size), children: fill(t("table.pageSize"), { size: String(size) }) }, size))
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { className: "dtc-select-chevron", viewBox: "0 0 12 12", width: "12", height: "12", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M3 4.5 6 7.5 9 4.5", fill: "none", stroke: "currentColor", strokeWidth: "1.2", strokeLinecap: "round" }) })
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+
+// src/client/series.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function seriesFor(metrics, kind, showHitRate, t) {
+  const wanted = METRIC_IDS2.filter((id) => metrics.includes(id));
+  const list = wanted.length > 0 ? wanted : ["total"];
+  const overlay = showHitRate ? [{ key: "cacheHitRate", label: t("metric.cacheHitRate"), color: COLOR.cacheHitRate, type: "line", axis: "right" }] : [];
+  if (kind === "multi-bar" || kind === "multi-line") {
+    const type = kind === "multi-bar" ? "bar" : "line";
+    return [
+      ...list.map((id) => ({
+        key: id,
+        label: t(`metric.${id}`),
+        color: METRIC_COLOR[id],
+        type
+      })),
+      ...overlay
+    ];
+  }
+  const primary = list.includes("total") ? "total" : list[0];
+  const bar = kind !== "line";
+  return [
+    { key: primary, label: t(`metric.${primary}`), color: METRIC_COLOR[primary], type: bar ? "bar" : "line" },
+    ...overlay
+  ];
+}
+function slicesFor(_kind, points, totals, metrics, t) {
+  const wanted = METRIC_IDS2.filter((id) => metrics.includes(id));
+  if (wanted.length > 1) {
+    return wanted.map((id) => ({
+      key: id,
+      metric: id,
+      label: t(`metric.${id}`),
+      value: Number(totals?.[id]) || 0,
+      color: METRIC_COLOR[id]
+    })).filter((slice) => slice.value > 0);
+  }
+  const key = wanted[0] ?? "total";
+  const sorted = [...points].sort((left, right) => (right.values[key] || 0) - (left.values[key] || 0));
+  const head = sorted.slice(0, 8);
+  const tail = sorted.slice(8);
+  const slices = head.map((point, index) => ({
+    key: `${key}-${index}`,
+    metric: key,
+    label: String(point.label ?? index),
+    value: Number(point.values[key]) || 0,
+    color: COLOR.total,
+    opacity: Math.max(0.22, 1 - index * 0.11)
+  }));
+  if (tail.length > 0) {
+    slices.push({
+      key: `${key}-other`,
+      metric: "cache",
+      label: "…",
+      value: tail.reduce((sum, point) => sum + (Number(point.values[key]) || 0), 0),
+      color: COLOR.cache,
+      opacity: 1
+    });
+  }
+  return slices.filter((slice) => slice.value > 0);
+}
+function ChartBlock({
+  kind,
+  points,
+  totals,
+  metrics,
+  columns,
+  rows,
+  showTable,
+  showHitRate,
+  t
+}) {
+  if (points.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "dtc-empty", children: t("panel.empty") });
+  const table = showTable ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DataTable, { columns, rows, t }) : null;
+  if (kind === "table") return table ?? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "dtc-empty", children: t("panel.empty") });
+  const slices = kind === "pie" ? slicesFor(kind, points, totals ?? {}, metrics, t) : [];
+  const series = kind === "pie" ? [] : seriesFor(metrics, kind, showHitRate, t);
+  const zoom = kind !== "pie" && points.length >= 2;
+  const fallback = kind === "pie" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PieChart, { slices, t }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CartesianChart, { points, series, t });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(EchartsMount, { spec: { kind, points, series, slices, zoom }, height: zoom ? 248 : 210, fallback, t }),
+    table
+  ] });
+}
+
+// src/client/panel.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function DailyUsagePanel({ t }) {
+  const prefs = usePrefs();
+  const [range, setRange] = React.useState("today");
+  const [tick, setTick] = React.useState(0);
+  const endpoint = useEndpoint(`/overview?range=${range}`, tick);
+  const report = endpoint.value;
+  const totals = report?.totals;
+  const buckets = Array.isArray(report?.buckets) ? report.buckets : [];
+  const points = Array.isArray(report?.points) ? report.points : [];
+  const todayLabels = points.map((point) => clockText(point.time));
+  const todayHasDuplicateMinutes = new Set(todayLabels).size < todayLabels.length;
+  const chartPoints = range === "today" ? points.map((point, index) => ({
+    label: todayHasDuplicateMinutes ? clockText(point.time, true) : todayLabels[index],
+    values: {
+      input: point.input,
+      output: point.output,
+      cache: point.cache,
+      total: point.total,
+      cacheHitRate: point.cacheHitRate
+    }
+  })) : buckets.map((bucket) => ({
+    label: bucket.label,
+    values: {
+      input: bucket.input,
+      output: bucket.output,
+      cache: bucket.cache,
+      total: bucket.total,
+      cacheHitRate: bucket.cacheHitRate
+    }
+  }));
+  const columns = range === "today" ? [
+    { key: "time", label: t("table.time"), render: (row) => clockText(row.time) },
+    { key: "session", label: t("table.session"), render: (row) => String(row.sessionId ?? "").slice(0, 8) },
+    { key: "turn", label: t("table.turn") },
+    { key: "total", label: t("metric.total"), align: "right", render: (row) => exactTokens(row.total) },
+    { key: "input", label: t("metric.input"), align: "right", render: (row) => exactTokens(row.input) },
+    { key: "output", label: t("metric.output"), align: "right", render: (row) => exactTokens(row.output) },
+    { key: "cache", label: t("metric.cache"), align: "right", render: (row) => exactTokens(row.cache) },
+    {
+      key: "cacheHitRate",
+      label: t("metric.cacheHitRate"),
+      align: "right",
+      render: (row) => percentText(row.cacheHitRate)
+    }
+  ] : [
+    { key: "label", label: t("table.day") },
+    { key: "turns", label: t("usage.turns"), align: "right" },
+    { key: "sessions", label: t("usage.sessions"), align: "right" },
+    { key: "total", label: t("metric.total"), align: "right", render: (row) => exactTokens(row.total) },
+    { key: "input", label: t("metric.input"), align: "right", render: (row) => exactTokens(row.input) },
+    { key: "output", label: t("metric.output"), align: "right", render: (row) => exactTokens(row.output) },
+    { key: "cache", label: t("metric.cache"), align: "right", render: (row) => exactTokens(row.cache) },
+    {
+      key: "cacheHitRate",
+      label: t("metric.cacheHitRate"),
+      align: "right",
+      render: (row) => percentText(row.cacheHitRate)
+    }
+  ];
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "dtc-root dtc-panel", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "dtc-head", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h2", { className: "dtc-title", children: t("panel.title") }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "dtc-subtitle", children: t("panel.subtitle") })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Toolbar, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", className: "dtc-button", onClick: () => setTick((value) => value + 1), children: t("panel.refresh") }) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "dtc-filters", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        Segmented,
+        {
+          value: range,
+          onChange: setRange,
+          options: [
+            { value: "today", label: t("panel.range.today") },
+            { value: "3d", label: t("panel.range.3d") },
+            { value: "7d", label: t("panel.range.7d") }
+          ]
+        }
+      ),
+      report !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "dtc-meta", children: `${t("panel.updated", { time: clockText(report.generatedAt) })} · ${t("panel.retention", { days: report.retentionDays ?? 7 })}` }) : null
+    ] }),
+    endpoint.loading && report === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "dtc-empty", children: t("panel.loading") }) : endpoint.error !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "dtc-error", children: endpoint.error }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(React.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "dtc-banner", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "dtc-banner-label", children: t("metric.total") }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "dtc-banner-value", children: exactTokens(totals?.total) }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "dtc-banner-extra", children: `${exactTokens(totals?.turns)} ${t("usage.turns")} · ${exactTokens(totals?.sessions)} ${t("usage.sessions")}` })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(KpiRow, { totals, t }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "dtc-section-title", children: t("settings.dailyChart") }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        ChartBlock,
+        {
+          kind: prefs.dailyChart,
+          points: chartPoints,
+          totals,
+          metrics: prefs.dailyMetrics,
+          columns,
+          rows: range === "today" ? points : buckets,
+          showTable: prefs.showTable,
+          showHitRate: prefs.showCacheHitRate,
+          t
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/client/drawer.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function SessionUsageBody({ sessionId, t }) {
+  const prefs = usePrefs();
+  const [tick, setTick] = React.useState(0);
+  const endpoint = useEndpoint(`/session?sessionId=${encodeURIComponent(sessionId ?? "")}`, tick);
+  const report = endpoint.value;
+  const totals = report?.totals;
+  const turns = Array.isArray(report?.turns) ? report.turns : [];
+  const points = turns.map((turn) => ({
+    label: `#${turn.turn}`,
+    values: {
+      input: turn.input,
+      output: turn.output,
+      cache: turn.cache,
+      total: turn.total,
+      cacheHitRate: turn.cacheHitRate
+    }
+  }));
+  const columns = [
+    { key: "turn", label: t("table.turn") },
+    { key: "time", label: t("table.time"), render: (row) => clockText(row.time) },
+    { key: "total", label: t("metric.total"), align: "right", render: (row) => exactTokens(row.total) },
+    { key: "input", label: t("metric.input"), align: "right", render: (row) => exactTokens(row.input) },
+    { key: "output", label: t("metric.output"), align: "right", render: (row) => exactTokens(row.output) },
+    { key: "cache", label: t("metric.cache"), align: "right", render: (row) => exactTokens(row.cache) },
+    {
+      key: "cacheHitRate",
+      label: t("metric.cacheHitRate"),
+      align: "right",
+      render: (row) => percentText(row.cacheHitRate)
+    }
+  ];
+  const routes = Array.isArray(totals?.routes) && totals.routes.length > 0 ? [[t("usage.route"), totals.routes.join(", ")]] : [];
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "dtc-root dtc-drawer", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "dtc-head", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h3", { className: "dtc-title", children: t("usage.title") }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "dtc-subtitle", children: `${t("usage.session")} · ${turns.length} ${t("usage.turns")}` })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        "button",
+        {
+          type: "button",
+          className: "dtc-button",
+          onClick: () => setTick((value) => value + 1),
+          title: t("usage.refresh"),
+          children: t("panel.refresh")
+        }
+      )
+    ] }),
+    endpoint.loading && report === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "dtc-empty", children: t("panel.loading") }) : endpoint.error !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "dtc-error", children: endpoint.error }) : turns.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "dtc-empty", children: t("usage.emptySession") }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(React.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "dtc-banner", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "dtc-banner-label", children: t("metric.total") }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "dtc-banner-value", children: exactTokens(totals?.total) })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(UsageFacts, { totals, t, extra: routes }),
+      report?.crossCheck?.matches === false ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "dtc-warn", "data-dtc-crosscheck": "mismatch", children: fill(t("usage.crossCheckFailed"), { product: exactTokens(report.crossCheck.total) }) }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "dtc-footnote", children: t("usage.accounting") }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(KpiRow, { totals, t }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "dtc-section-title", children: t("settings.sessionChart") }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        ChartBlock,
+        {
+          kind: prefs.sessionChart,
+          points,
+          totals,
+          metrics: prefs.sessionMetrics,
+          columns,
+          rows: turns,
+          showTable: prefs.showTable,
+          showHitRate: prefs.showCacheHitRate,
+          t
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/client/settings.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+function ChartPicker({
+  value,
+  onChange,
+  t
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "dtc-picker", children: CHART_KINDS.map((kind) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    "button",
+    {
+      type: "button",
+      className: kind === value ? "dtc-chip dtc-chip-active" : "dtc-chip",
+      "aria-pressed": kind === value,
+      onClick: () => onChange(kind),
+      children: t(`chart.${kind}`)
+    },
+    kind
+  )) });
+}
+function MetricPicker({
+  value,
+  onChange,
+  t
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "dtc-picker", children: METRIC_IDS2.map((id) => {
+    const active = value.includes(id);
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      "button",
+      {
+        type: "button",
+        className: active ? "dtc-chip dtc-chip-active" : "dtc-chip",
+        "aria-pressed": active,
+        onClick: () => onChange(active ? value.filter((item) => item !== id) : [...value, id]),
+        children: t(`metric.${id}`)
+      },
+      id
+    );
+  }) });
+}
+function SwitchRow({
+  label,
+  hint,
+  checked,
+  onChange
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "dtc-switch-row", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "dtc-switch-text", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "dtc-switch-label", children: label }),
+      hint !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "dtc-switch-hint", children: hint }) : null
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      "button",
+      {
+        type: "button",
+        role: "switch",
+        "aria-checked": checked,
+        className: checked ? "dtc-switch dtc-switch-on" : "dtc-switch",
+        onClick: () => onChange(!checked),
+        children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "dtc-switch-knob" })
+      }
+    )
+  ] });
+}
+function PluginHeader({ t }) {
+  const [state, setState] = React.useState({
+    loading: true,
+    value: void 0,
+    error: ""
+  });
+  const [run, setRun] = React.useState({
+    phase: "idle",
+    startedAt: 0,
+    finishedAt: 0,
+    message: "",
+    error: ""
+  });
+  const [tick, setTick] = React.useState(0);
+  React.useEffect(() => {
+    let live = true;
+    apiGet("/version").then((payload) => {
+      if (!live) return;
+      setState({ loading: false, value: payload.value, error: "" });
+      if (payload.value?.run !== void 0) setRun(payload.value.run);
+    }).catch((failure) => {
+      if (!live) return;
+      setState({ loading: false, value: void 0, error: String(failure?.message ?? failure) });
+    });
+    return () => {
+      live = false;
+    };
+  }, [tick]);
+  React.useEffect(() => {
+    if (run.phase !== "running") return void 0;
+    const timer = setTimeout(() => setTick((value) => value + 1), 2500);
+    return () => clearTimeout(timer);
+  }, [run.phase, tick]);
+  const version = state.value?.version;
+  const updateAvailable = state.value?.updateAvailable === true;
+  const status = state.value?.status;
+  const note = state.error !== "" ? state.error : run.phase === "running" ? t("settings.update.running") : run.phase === "done" ? fill(t("settings.update.done"), { target: state.value?.latest ?? "" }) : run.phase === "failed" ? fill(t("settings.update.failed"), { error: run.error }) : run.phase === "manual" ? t("settings.update.local") : state.loading ? t("settings.update.checking") : updateAvailable ? "" : status === "unpublished" ? t("settings.update.unpublished") : status === "ok" ? t("settings.update.upToDate") : "";
+  const trigger = async () => {
+    try {
+      await apiPost("/update", {});
+      setRun({ phase: "running", startedAt: Date.now(), finishedAt: 0, message: "", error: "" });
+    } catch (failure) {
+      setRun({
+        phase: "failed",
+        startedAt: Date.now(),
+        finishedAt: Date.now(),
+        message: "",
+        error: String(failure?.message ?? failure)
+      });
+    } finally {
+      setTick((value) => value + 1);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "dtc-plugin-head", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "dtc-plugin-id", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "dtc-plugin-icon", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(PanelIcon, { size: 18 }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h3", { className: "dtc-title", children: t("settings.title") }),
+      version !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "dtc-plugin-name", children: state.value?.name ?? "" }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "dtc-plugin-version", "data-dtc-version": version ?? "", children: version === void 0 ? t("settings.update.checking") : `v${version}` }),
+      updateAvailable ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        "button",
+        {
+          type: "button",
+          className: "dtc-update-button",
+          "data-dtc-update": "available",
+          disabled: run.phase === "running",
+          onClick: () => {
+            void trigger();
+          },
+          children: run.phase === "running" ? t("settings.update.running") : t("settings.update")
+        }
+      ) : null
+    ] }),
+    note === "" ? null : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "dtc-plugin-note", "data-dtc-update-note": run.phase, children: note })
+  ] });
+}
+function TokenChartSettings({ t }) {
+  const prefs = usePrefs();
+  const [status, setStatus] = React.useState("idle");
+  const [error, setError] = React.useState("");
+  const timer = React.useRef(null);
+  const save = React.useCallback((patch) => {
+    const next = { ...prefsStore.get(), ...patch };
+    prefsStore.set(next);
+    setStatus("saving");
+    if (timer.current !== null) clearTimeout(timer.current);
+    timer.current = setTimeout(() => {
+      apiPost("/prefs", { patch }).then((payload) => {
+        prefsStore.set({ ...DEFAULT_PREFS, ...payload.value });
+        setStatus("saved");
+        setError("");
+      }).catch((failure) => {
+        setStatus("failed");
+        setError(String(failure?.message ?? failure));
+      });
+    }, 260);
+  }, []);
+  React.useEffect(
+    () => () => {
+      if (timer.current !== null) clearTimeout(timer.current);
+    },
+    []
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "dtc-root dtc-settings", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(PluginHeader, { t }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "dtc-subtitle", children: t("settings.description") }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("section", { className: "dtc-card", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h4", { className: "dtc-card-title", children: t("settings.sessionChart") }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "dtc-card-hint", children: t("settings.sessionChartHint") }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ChartPicker, { value: prefs.sessionChart, onChange: (value) => save({ sessionChart: value }), t }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "dtc-field-label", children: t("settings.metrics") }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(MetricPicker, { value: prefs.sessionMetrics, onChange: (value) => save({ sessionMetrics: value }), t })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("section", { className: "dtc-card", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h4", { className: "dtc-card-title", children: t("settings.dailyChart") }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "dtc-card-hint", children: t("settings.dailyChartHint") }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ChartPicker, { value: prefs.dailyChart, onChange: (value) => save({ dailyChart: value }), t }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "dtc-field-label", children: t("settings.metrics") }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(MetricPicker, { value: prefs.dailyMetrics, onChange: (value) => save({ dailyMetrics: value }), t })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("section", { className: "dtc-card", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        SwitchRow,
+        {
+          label: t("settings.showTable"),
+          checked: prefs.showTable,
+          onChange: (value) => save({ showTable: value })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        SwitchRow,
+        {
+          label: t("settings.showCacheHitRate"),
+          hint: t("settings.showCacheHitRateHint"),
+          checked: prefs.showCacheHitRate,
+          onChange: (value) => save({ showCacheHitRate: value })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        SwitchRow,
+        {
+          label: t("settings.interceptUsageButton"),
+          hint: t("settings.interceptUsageButtonHint"),
+          checked: prefs.interceptUsageButton,
+          onChange: (value) => save({ interceptUsageButton: value })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "dtc-settings-footer", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: status === "failed" ? "dtc-status dtc-status-error" : "dtc-status", children: status === "saving" ? t("settings.saving") : status === "failed" ? fill(t("settings.saveFailed"), { error }) : status === "saved" ? t("settings.saved") : "" }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        "button",
+        {
+          type: "button",
+          className: "dtc-button",
+          onClick: () => {
+            const defaults = { ...DEFAULT_PREFS };
+            prefsStore.set(defaults);
+            apiPost("/prefs", { patch: defaults }).then((payload) => {
+              prefsStore.set({ ...DEFAULT_PREFS, ...payload.value });
+              setStatus("saved");
+            }).catch((failure) => {
+              setStatus("failed");
+              setError(String(failure?.message ?? failure));
+            });
+          },
+          children: t("settings.reset")
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/client/index.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var inject = ["slots", "locale"];
+function apply(ctx) {
+  const t = ctx.locale.bind(NS);
+  ctx.effect(() => ctx.locale.register(NS, { zh, en }), "dsh-token-chart: dictionaries");
+  ctx.effect(() => installStyles(), "dsh-token-chart: styles");
+  ctx.effect(() => registerSettingsNavIcon(() => t("settings.nav")), "dsh-token-chart: settings nav icon");
+  const services = {
+    sidebarRight: void 0,
+    sidebarRightTabs: void 0
+  };
+  const openDrawer = (sessionId) => {
+    const right = services.sidebarRight;
+    if (right === void 0 || typeof sessionId !== "string" || sessionId === "") return false;
+    try {
+      right.openTab(KIND, { params: { sessionId } });
+      return true;
+    } catch (error) {
+      console.warn("[dsh-token-chart] could not open the usage drawer:", error);
+      return false;
+    }
+  };
+  const mountedSessionId = () => {
+    const right = services.sidebarRight;
+    if (right === void 0 || right.mounted === void 0) return void 0;
+    try {
+      return right.mounted.getSnapshot();
+    } catch {
+      return void 0;
+    }
+  };
+  ctx.effect(() => {
+    let live = true;
+    apiGet("/prefs").then((payload) => {
+      if (live) prefsStore.set({ ...DEFAULT_PREFS, ...payload.value });
+    }).catch(() => {
+    });
+    return () => {
+      live = false;
+    };
+  }, "dsh-token-chart: preferences");
+  ctx.slots.inject(
+    "settings.section",
+    () => ctx.slots.register(
+      {
+        name: "settings.section",
+        id: "token-chart",
+        order: 30,
+        label: () => t("settings.nav"),
+        locale: NS
+      },
+      TokenChartSettings
+    )
+  );
+  ctx.slots.inject(
+    "sidebar.panellist",
+    () => ctx.slots.register(
+      {
+        name: "sidebar.panellist",
+        id: PANEL_ID,
+        order: 12,
+        label: () => t("panel.title"),
+        locale: NS
+      },
+      PanelIcon
+    )
+  );
+  ctx.slots.inject(
+    "main",
+    () => ctx.slots.register(
+      {
+        name: "main",
+        key: PANEL_ID,
+        locale: NS
+      },
+      DailyUsagePanel
+    )
+  );
+  ctx.slots.inject(
+    "conversation.session.header.utilities",
+    () => ctx.slots.register(
+      {
+        name: "conversation.session.header.utilities",
+        id: "token-chart",
+        order: 6,
+        locale: NS,
+        inject: (sessionId) => ({ sessionId, open: openDrawer })
+      },
+      HeaderUsageButton
+    )
+  );
+  ctx.inject(["sidebarRightTabs"], (injected) => {
+    const tabs = injected.get("sidebarRightTabs");
+    if (tabs === void 0) return void 0;
+    services.sidebarRightTabs = tabs;
+    const disposers = [];
+    try {
+      disposers.push(
+        tabs.register({
+          id: KIND,
+          kind: KIND,
+          priority: "extension",
+          title: () => t("usage.title"),
+          guide: [
+            {
+              id: KIND,
+              order: 40,
+              title: () => t("usage.title"),
+              description: () => t("usage.session")
+            }
+          ]
+        })
+      );
+    } catch (error) {
+      console.warn("[dsh-token-chart] tab type registration failed:", error);
+      return void 0;
+    }
+    disposers.push(
+      ctx.slots.inject(
+        "sidebar.right.pane.tab",
+        () => ctx.slots.register(
+          {
+            name: "sidebar.right.pane.tab",
+            key: KIND,
+            locale: NS,
+            inject: (sessionId) => ({ sessionId })
+          },
+          SessionUsageBody
+        )
+      )
+    );
+    disposers.push(
+      ctx.slots.inject(
+        "sidebar.right.pane.tab.title",
+        () => ctx.slots.register(
+          {
+            name: "sidebar.right.pane.tab.title",
+            key: KIND,
+            locale: NS
+          },
+          ({ t: translate }) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "dtc-tab-title", children: translate("usage.title") })
+        )
+      )
+    );
+    return () => {
+      services.sidebarRightTabs = void 0;
+      for (const dispose of disposers) {
+        try {
+          dispose();
+        } catch {
+        }
+      }
+    };
+  });
+  ctx.inject(["sidebarRight"], (injected) => {
+    services.sidebarRight = injected.get("sidebarRight");
+    return () => {
+      services.sidebarRight = void 0;
+    };
+  });
+  ctx.effect(() => {
+    const onClick = (event) => {
+      if (prefsStore.get().interceptUsageButton !== true) return;
+      if (isUsagePill(event.target) === false) return;
+      const sessionId = mountedSessionId();
+      if (sessionId === void 0) return;
+      if (openDrawer(sessionId) === false) return;
+      event.preventDefault();
+      event.stopPropagation();
+    };
+    document.addEventListener("click", onClick, true);
+    return () => document.removeEventListener("click", onClick, true);
+  }, "dsh-token-chart: usage pill interception");
+  ctx.effect(
+    () => () => {
+    },
+    "dsh-token-chart: teardown"
+  );
+}
+
+return module.exports;
+} });
+