dsh-plugin-token-heatmap 0.1.0

package/lib/client.js

@@ -0,0 +1,900 @@
+window.__ModuleLoader__.load({
+	id: "dsh-plugin-token-heatmap",
+	factory: (require) => {
+		var module = { exports: {} };
+		var exports = module.exports;
+		Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name2 in all)
+    __defProp(target, name2, { get: all[name2], 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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/client/index.tsx
+var index_exports = {};
+__export(index_exports, {
+  apply: () => apply,
+  inject: () => inject,
+  name: () => name
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/client/TokenHeatmapOverlay.tsx
+var import_react3 = require("react");
+
+// src/day.ts
+var DAY_MS = 864e5;
+function dayKeyOf(time) {
+  const d = new Date(time);
+  const m = String(d.getMonth() + 1).padStart(2, "0");
+  const day = String(d.getDate()).padStart(2, "0");
+  return d.getFullYear() + "-" + m + "-" + day;
+}
+function parseDayKey(key) {
+  const parts = key.split("-").map(Number);
+  return new Date(parts[0], parts[1] - 1, parts[2]).getTime();
+}
+function isoWeekday(time) {
+  const wd = new Date(time).getDay();
+  return wd === 0 ? 7 : wd;
+}
+function cutoffKey(now) {
+  const d = new Date(now);
+  return dayKeyOf(new Date(d.getFullYear(), d.getMonth() - 12, 1).getTime());
+}
+
+// src/client/palette.ts
+var LEVEL_COLORS = [
+  "var(--dsw-alias-bg-skeleton)",
+  "#C9DDF9",
+  "#8FB9F0",
+  "#5E8FE8",
+  "#396BE2"
+];
+var GLYPH_COLORS = [
+  "var(--dsw-alias-label-primary)",
+  // L0 骨架底色随主题反转 → 字形跟主题文字色
+  "#25407A",
+  // L1 浅蓝 → 深蓝灰
+  "#25407A",
+  // L2 → 深蓝灰（白色对比不足）
+  "rgba(255,255,255,0.95)",
+  // L3
+  "rgba(255,255,255,0.95)"
+  // L4
+];
+function glyphColorFor(level) {
+  return GLYPH_COLORS[level];
+}
+function levelsFor(values) {
+  const nonZero = values.filter((v) => v > 0).sort((a, b) => a - b);
+  const n = nonZero.length;
+  if (n === 0) return () => 0;
+  const at = (p) => nonZero[Math.min(n - 1, Math.floor(p * (n - 1)))];
+  const q25 = at(0.25);
+  const q50 = at(0.5);
+  const q75 = at(0.75);
+  if (q25 === q75) return (value) => value > 0 ? 3 : 0;
+  return (value) => {
+    if (value <= 0) return 0;
+    if (value >= q75) return 4;
+    if (value >= q50) return 3;
+    if (value >= q25) return 2;
+    return 1;
+  };
+}
+
+// src/client/HeatmapGrid.tsx
+var import_react = require("react");
+
+// src/client/grid.ts
+function buildWeeks(endKey, count = 53) {
+  const end = parseDayKey(endKey);
+  const endMonday = end - (isoWeekday(end) - 1) * DAY_MS;
+  const weeks = [];
+  for (let w = 0; w < count; w += 1) {
+    const monday = endMonday - w * 7 * DAY_MS;
+    const week = [];
+    for (let d = 0; d < 7; d += 1) {
+      const t = monday + d * DAY_MS;
+      week.push({
+        key: dayKeyOf(t),
+        weekday: d + 1,
+        month: new Date(t).getMonth(),
+        future: t > end
+      });
+    }
+    weeks.push(week);
+  }
+  return weeks;
+}
+function monthLabels(weeks) {
+  let previous = null;
+  return weeks.map((week) => {
+    const first = week.find((c) => !c.future);
+    if (first === void 0) return null;
+    if (previous === first.month) return null;
+    previous = first.month;
+    return first.month + 1 + "\u6708";
+  });
+}
+function sumRange(days, fromKey, toKey) {
+  let sum = 0;
+  for (const [key, value] of Object.entries(days)) {
+    if (key >= fromKey && key <= toKey) sum += value.total;
+  }
+  return sum;
+}
+function formatTokens(n) {
+  if (n >= 1e6) return Math.floor(n / 1e6) + "M";
+  if (n >= 1e3) return Math.floor(n / 1e3) + "K";
+  return String(Math.floor(n));
+}
+
+// src/client/HeatmapGrid.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var CELL = 16;
+var GAP = 4;
+var STEP = CELL + GAP;
+var WEEKDAYS = ["\u4E00", "\u4E8C", "\u4E09", "\u56DB", "\u4E94", "\u516D", "\u65E5"];
+var FADE_PX = 10;
+var style = {
+  root: {
+    display: "flex",
+    flexDirection: "column",
+    gap: 8,
+    fontSize: 12
+  },
+  // 网格块拉伸到窗口内容宽（minWidth 保证月份标签有地儿放），格子组在其内精确居中：
+  // 月份标签绝对定位在行左缘，脱离流，不再把格子整体推右。
+  gridBlock: {
+    display: "flex",
+    flexDirection: "column",
+    gap: GAP,
+    alignSelf: "stretch",
+    minWidth: 208,
+    position: "relative"
+  },
+  scroll: {
+    overflowY: "auto",
+    display: "flex",
+    flexDirection: "column",
+    gap: GAP,
+    // 行与行之间的固定间距（此前块级堆叠导致行间距为 0）
+    // 内边距给悬停放大留出空间，避免首末行/左右列的放大被 scrollport 裁剪；
+    // maxHeight 相应加上下 padding，可见行数仍为 5。
+    padding: 4,
+    maxHeight: 5 * STEP - GAP + 8,
+    scrollbarWidth: "none",
+    msOverflowStyle: "none"
+  },
+  row: { display: "flex", alignItems: "center", gap: GAP, height: CELL, justifyContent: "center", position: "relative" },
+  label: { width: 30, flex: "0 0 30px", fontSize: 10, color: "var(--dsw-alias-label-tertiary)", textAlign: "right", paddingRight: 4 },
+  cell: { width: CELL, height: CELL, borderRadius: 3, transformOrigin: "center" },
+  // 与行同规则：星期标注居中于格子列上方（隐藏占位标签绝对定位，不参与居中计算）
+  header: { display: "flex", alignItems: "center", gap: GAP, justifyContent: "center", position: "relative" },
+  footer: { display: "flex", alignItems: "flex-end", justifyContent: "space-between", gap: 12 },
+  // 两行两列网格：无中点分隔符，列轨道跨行共享（上下对齐）；
+  // 窗口宽度稳定性由 gridBlock minWidth 208 兑底（footer 自然宽 ≤ 208，不随数字位数变化）。
+  summary: { display: "grid", gridTemplateColumns: "max-content max-content", columnGap: 12, rowGap: 4, fontSize: 11, color: "var(--dsw-alias-label-secondary)" },
+  legendBlock: { display: "flex", flexDirection: "column", gap: 3 },
+  swatches: { display: "flex", gap: 3 },
+  legendLabels: { display: "flex", justifyContent: "space-between", width: 62, fontSize: 10, color: "var(--dsw-alias-label-tertiary)" },
+  chip: {
+    position: "absolute",
+    right: 0,
+    bottom: 6,
+    border: "1px solid var(--dsw-alias-border-l)",
+    background: "var(--dsw-alias-bg-overlay)",
+    color: "var(--dsw-alias-label-secondary)",
+    borderRadius: 999,
+    padding: "3px 10px",
+    fontSize: 10,
+    cursor: "pointer",
+    boxShadow: "0 2px 8px rgba(0,0,0,0.12)"
+  }
+};
+function maskOf(topFade, bottomFade) {
+  const head = topFade ? `transparent 0, black ${FADE_PX}px` : `black 0`;
+  const tail = bottomFade ? `black calc(100% - ${FADE_PX}px), transparent 100%` : `black 100%`;
+  return `linear-gradient(to bottom, ${head}, black, ${tail})`;
+}
+function HeatmapGrid({ days, endKey }) {
+  const end = endKey ?? dayKeyOf(Date.now());
+  const weeks = (0, import_react.useMemo)(() => buildWeeks(end), [end]);
+  const levelOf = (0, import_react.useMemo)(() => levelsFor(Object.values(days).map((d) => d.total)), [days]);
+  const labels = (0, import_react.useMemo)(() => monthLabels(weeks), [weeks]);
+  const scrollRef = (0, import_react.useRef)(null);
+  const [edgeMask, setEdgeMask] = (0, import_react.useState)({ top: false, bottom: true });
+  const [hover, setHover] = (0, import_react.useState)(null);
+  const updateMask = (0, import_react.useCallback)(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    setEdgeMask({
+      top: el.scrollTop > 0,
+      bottom: el.scrollTop + el.clientHeight < el.scrollHeight - 1
+    });
+  }, []);
+  (0, import_react.useEffect)(() => {
+    updateMask();
+    const el = scrollRef.current;
+    el?.addEventListener("scroll", updateMask, { passive: true });
+    return () => el?.removeEventListener("scroll", updateMask);
+  }, [updateMask]);
+  const backToLatest = (0, import_react.useCallback)(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    if (typeof el.scrollTo === "function") el.scrollTo({ top: 0, behavior: "smooth" });
+    else el.scrollTop = 0;
+  }, []);
+  const endTime = parseDayKey(end);
+  const todayKey = dayKeyOf(endTime);
+  const weekMonday = endTime - (isoWeekday(endTime) - 1) * DAY_MS;
+  const monthFirst = dayKeyOf(new Date(endTime).setDate(1));
+  const cutoff = cutoffKey(endTime);
+  const totals = {
+    today: sumRange(days, todayKey, todayKey),
+    week: sumRange(days, dayKeyOf(weekMonday), todayKey),
+    month: sumRange(days, monthFirst, todayKey),
+    year: sumRange(days, cutoff, todayKey)
+  };
+  const maskImage = maskOf(edgeMask.top, edgeMask.bottom);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: style.root, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: `
+        [data-th-scroll]::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }
+        [data-th-cell] { transition: transform 120ms ease-out; transform-origin: center; }
+        [data-th-cell]:hover { transform: scale(1.3); }
+      ` }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: style.gridBlock, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: style.header, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { ...style.label, visibility: "hidden", position: "absolute", left: 0 }, children: "x" }),
+        WEEKDAYS.map((w) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { width: CELL, textAlign: "center", fontSize: 10, color: "var(--dsw-alias-label-tertiary)" }, children: w }, w))
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "div",
+        {
+          ref: scrollRef,
+          "data-th-scroll": true,
+          style: { ...style.scroll, maskImage, WebkitMaskImage: maskImage },
+          children: weeks.map((week, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { "data-testid": "week-row", style: style.row, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { ...style.label, position: "absolute", left: 0 }, children: labels[i] ?? "" }),
+            week.map((cell) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DayCell, { cell, days, levelOf, onHover: setHover }, cell.key))
+          ] }, week[0].key))
+        }
+      ),
+      edgeMask.top && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", "data-testid": "back-to-latest", style: style.chip, onClick: backToLatest, children: "\u56DE\u5230\u6700\u65B0" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: style.footer, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { "data-testid": "summary", style: style.summary, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
+          "\u4ECA\u65E5 ",
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "data-testid": "sum-today", style: { color: "var(--dsw-alias-label-primary)", fontWeight: 600 }, children: formatTokens(totals.today) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
+          "\u672C\u5468 ",
+          formatTokens(totals.week)
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
+          "\u672C\u6708 ",
+          formatTokens(totals.month)
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
+          "12\u4E2A\u6708 ",
+          formatTokens(totals.year)
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { "data-testid": "legend", style: style.legendBlock, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: style.swatches, children: LEVEL_COLORS.map((color) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { width: 10, height: 10, borderRadius: 2, background: color, display: "inline-block" } }, color)) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: style.legendLabels, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "\u5C11" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "\u591A" })
+        ] })
+      ] })
+    ] }),
+    hover !== null && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        "data-testid": "cell-tooltip",
+        style: {
+          position: "fixed",
+          left: Math.min(hover.x + 12, Math.max(8, window.innerWidth - 220)),
+          top: Math.min(Math.max(8, hover.y - 66), Math.max(8, window.innerHeight - 80)),
+          zIndex: 9999,
+          pointerEvents: "none",
+          background: "var(--dsw-alias-bg-overlay)",
+          border: "1px solid var(--dsw-alias-border-l)",
+          borderRadius: 8,
+          padding: "6px 8px",
+          fontSize: 11,
+          color: "var(--dsw-alias-label-primary)",
+          boxShadow: "0 4px 12px rgba(0,0,0,0.15)",
+          whiteSpace: "nowrap"
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontWeight: 600 }, children: hover.key }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+            formatTokens(hover.total),
+            " tokens\uFF08\u8F93\u5165 ",
+            formatTokens(hover.input),
+            " / \u8F93\u51FA ",
+            formatTokens(hover.output),
+            " / \u7F13\u5B58 ",
+            formatTokens(hover.cache),
+            "\uFF09"
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+function DayCell({
+  cell,
+  days,
+  levelOf,
+  onHover
+}) {
+  const entry = days[cell.key];
+  const total = entry?.total ?? 0;
+  const level = cell.future ? 0 : levelOf(total);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      "data-testid": "day-cell",
+      "data-day": cell.key,
+      "data-level": level,
+      "data-th-cell": true,
+      onMouseEnter: (e) => {
+        if (entry !== void 0 && !cell.future) {
+          onHover({
+            key: cell.key,
+            total: entry.total,
+            input: entry.input,
+            output: entry.output,
+            cache: entry.cacheRead + entry.cacheWrite,
+            x: e.clientX,
+            y: e.clientY
+          });
+        }
+      },
+      onMouseLeave: () => onHover(null),
+      style: { ...style.cell, background: LEVEL_COLORS[level], opacity: cell.future ? 0.25 : 1 }
+    }
+  );
+}
+
+// src/client/ToggleIcon.tsx
+var import_react2 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var ICON_SIZE = 40;
+var ICON_MARGIN = 28;
+var DRAG_THRESHOLD = 5;
+var baseIconStyle = {
+  position: "fixed",
+  width: ICON_SIZE,
+  height: ICON_SIZE,
+  borderRadius: 10,
+  border: "none",
+  cursor: "grab",
+  touchAction: "none",
+  userSelect: "none",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  boxShadow: "0 4px 12px rgba(0,0,0,0.18)",
+  zIndex: 9990
+};
+function ToggleIcon({
+  level,
+  todayTokens,
+  onClick,
+  position = null,
+  onPositionChange
+}) {
+  const drag = (0, import_react2.useRef)(null);
+  const lastPos = (0, import_react2.useRef)(null);
+  const movedRef = (0, import_react2.useRef)(false);
+  const cornerPosition = () => ({
+    x: window.innerWidth - ICON_MARGIN - ICON_SIZE,
+    y: window.innerHeight - ICON_MARGIN - ICON_SIZE
+  });
+  const handlePointerDown = (event) => {
+    const base = position ?? cornerPosition();
+    drag.current = { startX: event.clientX, startY: event.clientY, baseX: base.x, baseY: base.y, moved: false };
+    movedRef.current = false;
+    const onMove = (e) => {
+      const d = drag.current;
+      if (!d) return;
+      const dx = e.clientX - d.startX;
+      const dy = e.clientY - d.startY;
+      if (!d.moved && Math.abs(dx) < DRAG_THRESHOLD && Math.abs(dy) < DRAG_THRESHOLD) return;
+      d.moved = true;
+      movedRef.current = true;
+      const pos = {
+        x: Math.min(Math.max(0, d.baseX + dx), window.innerWidth - ICON_SIZE),
+        y: Math.min(Math.max(0, d.baseY + dy), window.innerHeight - ICON_SIZE)
+      };
+      lastPos.current = pos;
+      onPositionChange?.(pos, false);
+    };
+    const onUp = () => {
+      window.removeEventListener("pointermove", onMove);
+      window.removeEventListener("pointerup", onUp);
+      const d = drag.current;
+      drag.current = null;
+      if (d?.moved && onPositionChange) {
+        const end = lastPos.current ?? cornerPosition();
+        onPositionChange(end, true);
+      }
+    };
+    window.addEventListener("pointermove", onMove);
+    window.addEventListener("pointerup", onUp);
+  };
+  const handleClick = () => {
+    if (movedRef.current) {
+      movedRef.current = false;
+      return;
+    }
+    onClick();
+  };
+  const iconStyle = position === null ? { ...baseIconStyle, background: LEVEL_COLORS[level], right: ICON_MARGIN, bottom: ICON_MARGIN } : { ...baseIconStyle, background: LEVEL_COLORS[level], left: position.x, top: position.y };
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "button",
+    {
+      "data-testid": "toggle-icon",
+      type: "button",
+      onClick: handleClick,
+      onPointerDown: handlePointerDown,
+      title: "\u4ECA\u65E5 token\uFF1A" + formatTokens(todayTokens),
+      style: iconStyle,
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { width: "18", height: "18", viewBox: "0 0 18 18", "aria-hidden": "true", style: { color: glyphColorFor(level) }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { x: "1", y: "10", width: "4", height: "7", rx: "1", fill: "currentColor" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { x: "7", y: "5", width: "4", height: "12", rx: "1", fill: "currentColor" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { x: "13", y: "1", width: "4", height: "16", rx: "1", fill: "currentColor" })
+      ] })
+    }
+  );
+}
+
+// src/client/TokenHeatmapOverlay.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var LS_VISIBLE = "dsh.tokenHeatmap.visible";
+var LS_POSITION = "dsh.tokenHeatmap.position";
+var LS_VIEW = "dsh.tokenHeatmap.view";
+var POLL_MS = 3e3;
+var RETRY_MIN_MS = 300;
+var RETRY_MAX_MS = 1e4;
+var WINDOW_W = 232;
+var WINDOW_H = 220;
+var WINDOW_ICON_GAP = 16;
+var LS_ICON_POSITION = "dsh.tokenHeatmap.iconPosition";
+function readVisible() {
+  try {
+    return localStorage.getItem(LS_VISIBLE) === "1";
+  } catch {
+    return false;
+  }
+}
+function readPosition() {
+  try {
+    const raw = localStorage.getItem(LS_POSITION);
+    if (raw === null) return null;
+    const parsed = JSON.parse(raw);
+    if (typeof parsed.x === "number" && typeof parsed.y === "number") return parsed;
+  } catch {
+  }
+  return null;
+}
+function readIconPosition() {
+  try {
+    const raw = localStorage.getItem(LS_ICON_POSITION);
+    if (raw === null) return null;
+    const parsed = JSON.parse(raw);
+    if (typeof parsed.x === "number" && typeof parsed.y === "number") return { x: parsed.x, y: parsed.y };
+  } catch {
+  }
+  return null;
+}
+function readView() {
+  try {
+    return localStorage.getItem(LS_VIEW) === "session" ? "session" : "global";
+  } catch {
+    return "global";
+  }
+}
+var headerStyle = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  gap: 6,
+  cursor: "grab",
+  userSelect: "none",
+  fontSize: 13,
+  fontWeight: 600
+};
+var windowStyle = {
+  position: "fixed",
+  width: "max-content",
+  zIndex: 9990,
+  display: "flex",
+  flexDirection: "column",
+  gap: 8,
+  padding: 12,
+  background: "var(--dsw-alias-bg-overlay)",
+  border: "1px solid var(--dsw-alias-border-l)",
+  borderRadius: 12,
+  boxShadow: "0 8px 24px rgba(0,0,0,0.16)",
+  color: "var(--dsw-alias-label-primary)",
+  fontSize: 12
+};
+var windowShownStyle = {
+  opacity: 1,
+  transform: "none",
+  visibility: "visible",
+  pointerEvents: "auto",
+  transition: "opacity 160ms ease, transform 160ms ease, visibility 0s"
+};
+var windowHiddenStyle = {
+  opacity: 0,
+  transform: "translateY(6px) scale(0.96)",
+  visibility: "hidden",
+  pointerEvents: "none",
+  transition: "opacity 160ms ease, transform 160ms ease, visibility 0s linear 160ms"
+};
+var segmentedStyle = {
+  display: "inline-flex",
+  alignItems: "center",
+  gap: 2,
+  border: "1px solid var(--dsw-alias-border-l)",
+  borderRadius: 8,
+  padding: 2
+};
+function segButtonStyle(active) {
+  return {
+    border: "none",
+    background: active ? "var(--dsw-alias-bg-skeleton)" : "transparent",
+    color: active ? "var(--dsw-alias-label-primary)" : "var(--dsw-alias-label-secondary)",
+    fontWeight: active ? 700 : 400,
+    borderRadius: 6,
+    padding: "2px 8px",
+    fontSize: 11,
+    cursor: "pointer"
+  };
+}
+var retryButtonStyle = {
+  border: "1px solid var(--dsw-alias-border-l)",
+  background: "transparent",
+  color: "var(--dsw-alias-label-secondary)",
+  borderRadius: 999,
+  padding: "2px 10px",
+  fontSize: 11,
+  cursor: "pointer"
+};
+var stateStyle = {
+  display: "flex",
+  alignItems: "center",
+  gap: 8,
+  padding: "4px 2px",
+  fontSize: 12,
+  color: "var(--dsw-alias-label-secondary)"
+};
+function TokenHeatmapOverlay({ api, sessions }) {
+  const [visible, setVisible] = (0, import_react3.useState)(readVisible);
+  const [view, setView] = (0, import_react3.useState)(readView);
+  const [position, setPosition] = (0, import_react3.useState)(readPosition);
+  const [iconPos, setIconPos] = (0, import_react3.useState)(readIconPosition);
+  const [data, setData] = (0, import_react3.useState)({ version: -1, days: {} });
+  const [backfill, setBackfill] = (0, import_react3.useState)(null);
+  const [error, setError] = (0, import_react3.useState)(false);
+  const [loading, setLoading] = (0, import_react3.useState)(true);
+  const dataKeyRef = (0, import_react3.useRef)("");
+  const [currentId, setCurrentId] = (0, import_react3.useState)(() => sessions.list.getSnapshot().current);
+  const positionRef = (0, import_react3.useRef)(position);
+  positionRef.current = position;
+  const windowRef = (0, import_react3.useRef)(null);
+  const [windowWidth, setWindowWidth] = (0, import_react3.useState)(null);
+  (0, import_react3.useLayoutEffect)(() => {
+    const el = windowRef.current;
+    if (!el) return;
+    const update = () => {
+      const w = el.offsetWidth;
+      if (w > 0) setWindowWidth(w);
+    };
+    update();
+    if (typeof ResizeObserver === "undefined") return;
+    const ro = new ResizeObserver(update);
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+  (0, import_react3.useEffect)(() => {
+    return sessions.list.subscribe(() => setCurrentId(sessions.list.getSnapshot().current));
+  }, [sessions]);
+  (0, import_react3.useEffect)(() => {
+    if (!visible) return;
+    let cancelled = false;
+    let timer = null;
+    let delay = 0;
+    const schedule = () => {
+      timer = setTimeout(run, delay);
+    };
+    const run = async () => {
+      if (cancelled) return;
+      try {
+        const [payload, status] = await Promise.all([
+          view === "global" ? api.getGlobalUsage() : currentId !== void 0 ? api.getSessionUsage(currentId) : Promise.resolve({ version: -1, days: {} }),
+          api.getBackfillStatus()
+        ]);
+        if (cancelled) return;
+        const key = view + ":" + payload.version;
+        if (dataKeyRef.current !== key) {
+          dataKeyRef.current = key;
+          setData(payload);
+        }
+        setBackfill(status);
+        setError(false);
+        setLoading(false);
+        delay = POLL_MS;
+      } catch (err) {
+        if (cancelled) return;
+        const message = err instanceof Error ? err.message : String(err);
+        console.warn("[token-heatmap] poll failed:", message);
+        setError(true);
+        setLoading(false);
+        delay = Math.min(Math.max(delay * 2, RETRY_MIN_MS), RETRY_MAX_MS);
+      }
+      if (!cancelled) schedule();
+    };
+    schedule();
+    return () => {
+      cancelled = true;
+      if (timer !== null) clearTimeout(timer);
+    };
+  }, [visible, view, currentId, api]);
+  const toggle = (0, import_react3.useCallback)(() => {
+    setVisible((v) => {
+      const next = !v;
+      try {
+        localStorage.setItem(LS_VISIBLE, next ? "1" : "0");
+      } catch {
+      }
+      return next;
+    });
+  }, []);
+  const switchView = (0, import_react3.useCallback)((next) => {
+    setView(next);
+    try {
+      localStorage.setItem(LS_VIEW, next);
+    } catch {
+    }
+  }, []);
+  const defaultPosition = (0, import_react3.useCallback)(() => {
+    const width = windowWidth ?? WINDOW_W;
+    const iconX = iconPos?.x ?? window.innerWidth - ICON_MARGIN - ICON_SIZE;
+    const iconY = iconPos?.y ?? window.innerHeight - ICON_MARGIN - ICON_SIZE;
+    const x = Math.min(Math.max(8, iconX + (ICON_SIZE - width) / 2), Math.max(8, window.innerWidth - width - 8));
+    const above = iconY - WINDOW_H - WINDOW_ICON_GAP;
+    const y = above >= 8 ? above : Math.min(Math.max(8, iconY + ICON_SIZE + WINDOW_ICON_GAP), Math.max(8, window.innerHeight - WINDOW_H - 8));
+    return { x, y };
+  }, [iconPos, windowWidth]);
+  const onPointerDown = (0, import_react3.useCallback)((event) => {
+    const start = positionRef.current ?? defaultPosition();
+    const origin = { x: event.clientX, y: event.clientY };
+    const onMove = (e) => {
+      const x = Math.min(Math.max(0, start.x + e.clientX - origin.x), window.innerWidth - 60);
+      const y = Math.min(Math.max(0, start.y + e.clientY - origin.y), window.innerHeight - 60);
+      setPosition({ x, y });
+    };
+    const onUp = () => {
+      window.removeEventListener("pointermove", onMove);
+      window.removeEventListener("pointerup", onUp);
+      try {
+        localStorage.setItem(LS_POSITION, JSON.stringify(positionRef.current));
+      } catch {
+      }
+    };
+    window.addEventListener("pointermove", onMove);
+    window.addEventListener("pointerup", onUp);
+  }, [defaultPosition]);
+  const days = data.days;
+  const todayKey = dayKeyOf(Date.now());
+  const todayTotal = days[todayKey]?.total ?? 0;
+  const levelOf = (0, import_react3.useMemo)(() => levelsFor(Object.values(days).map((d) => d.total)), [days]);
+  const winPos = position ?? defaultPosition();
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("style", { children: `@media (prefers-reduced-motion: reduce) { [data-th-window] { transition: none !important; } }` }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      ToggleIcon,
+      {
+        level: levelOf(todayTotal),
+        todayTokens: todayTotal,
+        onClick: toggle,
+        position: iconPos,
+        onPositionChange: (pos, committed) => {
+          setIconPos(pos);
+          if (committed) {
+            try {
+              localStorage.setItem(LS_ICON_POSITION, JSON.stringify(pos));
+            } catch {
+            }
+            setPosition(null);
+          }
+        }
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      "div",
+      {
+        ref: windowRef,
+        "data-th-window": true,
+        style: { ...windowStyle, left: winPos.x, top: winPos.y, ...visible ? windowShownStyle : windowHiddenStyle },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: headerStyle, onPointerDown, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: "Token \u70ED\u529B\u56FE" }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: segmentedStyle, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "button", style: segButtonStyle(view === "global"), "aria-pressed": view === "global", onClick: () => switchView("global"), children: "\u5168\u5C40" }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "button", style: segButtonStyle(view === "session"), "aria-pressed": view === "session", onClick: () => switchView("session"), children: "\u4F1A\u8BDD" })
+            ] })
+          ] }),
+          error ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: stateStyle, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: "\u6570\u636E\u52A0\u8F7D\u5931\u8D25" }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "button", style: retryButtonStyle, onClick: () => {
+              setError(false);
+              setLoading(true);
+            }, children: "\u91CD\u8BD5" })
+          ] }) : loading ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: stateStyle, children: "\u6570\u636E\u52A0\u8F7D\u4E2D\u2026" }) : view === "session" && currentId === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: stateStyle, children: "\u5F53\u524D\u6CA1\u6709\u6253\u5F00\u7684\u4F1A\u8BDD" }) : Object.keys(days).length === 0 && backfill !== null && !backfill.done ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: stateStyle, children: "\u6B63\u5728\u56DE\u586B\u5386\u53F2\u6570\u636E\u2026" }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(HeatmapGrid, { days }),
+          backfill !== null && backfill.done && backfill.skipped > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { fontSize: 11, color: "var(--dsw-alias-label-tertiary)" }, children: [
+            "\u56DE\u586B\u5B8C\u6210\uFF0C\u8DF3\u8FC7 ",
+            backfill.skipped,
+            " \u6761\u8BB0\u5F55"
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+
+// src/client/remote.ts
+function createTokenHeatmapRemote(ns) {
+  const call = async (pending, method) => {
+    const result = await pending;
+    if (!result.ok) {
+      throw new Error(`tokenHeatmap.${method} failed: ${result.error.code}: ${result.error.message}`);
+    }
+    return result.value;
+  };
+  return {
+    getGlobalUsage: () => call(ns.getGlobalUsage(), "getGlobalUsage"),
+    getSessionUsage: (sessionId) => call(ns.getSessionUsage(sessionId), "getSessionUsage"),
+    getBackfillStatus: () => call(ns.getBackfillStatus(), "getBackfillStatus")
+  };
+}
+var isRecord = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
+var daysSchema = {
+  parse(value) {
+    if (!isRecord(value)) throw new Error("usage days must be an object");
+    const out = {};
+    for (const [key, entry] of Object.entries(value)) {
+      if (!isRecord(entry)) throw new Error(`usage day ${key} must be an object`);
+      const num = (field) => {
+        const n = entry[field];
+        if (typeof n !== "number" || !Number.isFinite(n) || n < 0) {
+          throw new Error(`usage day ${key}.${field} invalid`);
+        }
+        return n;
+      };
+      out[key] = {
+        total: num("total"),
+        input: num("input"),
+        output: num("output"),
+        cacheRead: num("cacheRead"),
+        cacheWrite: num("cacheWrite")
+      };
+    }
+    return out;
+  }
+};
+var usageSchema = {
+  parse(value) {
+    if (!isRecord(value)) throw new Error("usage payload must be an object");
+    if (typeof value.version !== "number") throw new Error("usage version invalid");
+    return { version: value.version, days: daysSchema.parse(value.days) };
+  }
+};
+var backfillSchema = {
+  parse(value) {
+    if (!isRecord(value)) throw new Error("backfill status must be an object");
+    const num = (field) => {
+      const n = value[field];
+      return typeof n === "number" ? n : 0;
+    };
+    return {
+      done: value.done === true,
+      scanned: num("scanned"),
+      skipped: num("skipped"),
+      startedAt: typeof value.startedAt === "number" ? value.startedAt : null,
+      finishedAt: typeof value.finishedAt === "number" ? value.finishedAt : null
+    };
+  }
+};
+var jsonSchema = {
+  parse(value) {
+    if (typeof value !== "string") throw new Error("expected string");
+    return value;
+  }
+};
+function descriptor(method, parameters, result) {
+  return {
+    id: `tokenHeatmap/${method}`,
+    service: "tokenHeatmap",
+    namespace: "tokenHeatmap",
+    method,
+    invocation: { kind: "direct" },
+    parameters: parameters.map((p) => ({
+      name: p.name,
+      wire: p.wire,
+      source: "json",
+      codec: { mode: "strict", typeSymbol: "string", schema: jsonSchema }
+    })),
+    result: { mode: "strict", typeSymbol: "tokenHeatmap", schema: result }
+  };
+}
+function mountTokenHeatmapRemote(ctx, remote) {
+  const contribution = {
+    package: "dsh-plugin-token-heatmap",
+    descriptors: [
+      descriptor("getGlobalUsage", [], usageSchema),
+      descriptor("getSessionUsage", [{ name: "sessionId", wire: "sessionId" }], usageSchema),
+      descriptor("getBackfillStatus", [], backfillSchema)
+    ]
+  };
+  let dispose = () => {
+  };
+  void remote.$mount(contribution).then(
+    (disposer) => {
+      dispose = disposer;
+    },
+    (error) => {
+      console.error("[token-heatmap] remote mount failed:", error);
+    }
+  );
+  ctx.effect(() => () => dispose());
+  return () => dispose();
+}
+
+// src/client/index.tsx
+var name = "token-heatmap";
+var inject = ["slots", "remote", "sessions"];
+function apply(ctx) {
+  ctx.inject(["slots", "remote", "sessions"], (baseCtx) => {
+    const slots = baseCtx.get("slots");
+    const remote = baseCtx.get("remote");
+    const sessions = baseCtx.get("sessions");
+    if (slots === void 0 || remote === void 0 || sessions === void 0) return;
+    mountTokenHeatmapRemote(baseCtx, remote);
+    baseCtx.inject(["remote.tokenHeatmap"], (nsCtx) => {
+      const ns = nsCtx.get("remote.tokenHeatmap");
+      if (ns === void 0) return;
+      const api = createTokenHeatmapRemote(ns);
+      slots.inject(
+        "shell.overlay",
+        () => slots.register({ name: "shell.overlay", id: "token-heatmap", inject: () => ({ api, sessions }) }, TokenHeatmapOverlay)
+      );
+    });
+  });
+}
+
+		return module.exports;
+	},
+});