dsh-token-pulse 0.3.0 → 0.4.0

package/lib/client.js

@@ -430,7 +430,7 @@ window.__ModuleLoader__.load({
 			}));
 			return out;
 		}
-		function formatTokensShort(n) {
+		function formatTokensShort$1(n) {
 			if (n >= 1e9) return (n / 1e9).toFixed(2) + "B";
 			if (n >= 1e6) return (n / 1e6).toFixed(2) + "M";
 			if (n >= 1e3) return (n / 1e3).toFixed(2) + "k";
@@ -438,7 +438,7 @@ window.__ModuleLoader__.load({
 		}
 		function tooltipTotal(day) {
 			if (day.totalTokens === 0) return `${day.dayKey}: No usage`;
-			return `${day.dayKey}: ${formatTokensShort(day.totalTokens)} tokens`;
+			return `${day.dayKey}: ${formatTokensShort$1(day.totalTokens)} tokens`;
 		}
 		function HeatCell({ day, level, size = 14 }) {
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -481,7 +481,7 @@ window.__ModuleLoader__.load({
 				},
 				children: hourly.map((v, h) => {
 					const lv = hourLevels[h] ?? 0;
-					const hh = v === 0 ? `${String(h).padStart(2, "0")}:00 — No usage` : `${String(h).padStart(2, "0")}:00 — ${formatTokensShort(v)} tokens`;
+					const hh = v === 0 ? `${String(h).padStart(2, "0")}:00 — No usage` : `${String(h).padStart(2, "0")}:00 — ${formatTokensShort$1(v)} tokens`;
 					return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 						title: hh,
 						"aria-label": hh,
@@ -904,7 +904,7 @@ window.__ModuleLoader__.load({
 									textOverflow: "ellipsis",
 									maxWidth: "100%"
 								},
-								children: d.totalTokens > 0 ? formatTokensShort(d.totalTokens) : ""
+								children: d.totalTokens > 0 ? formatTokensShort$1(d.totalTokens) : ""
 							})]
 						}, d.dayKey);
 					})
@@ -1024,7 +1024,7 @@ window.__ModuleLoader__.load({
 											width: 80,
 											textAlign: "right"
 										},
-										children: d.totalTokens === 0 ? "No usage" : `${formatTokensShort(d.totalTokens)} tokens`
+										children: d.totalTokens === 0 ? "No usage" : `${formatTokensShort$1(d.totalTokens)} tokens`
 									})
 								]
 							}, d.dayKey);
@@ -1260,6 +1260,664 @@ window.__ModuleLoader__.load({
 			});
 		}
 		//#endregion
+		//#region src/client/trend.ts
+		/**
+		* Pure logic for the bottom-of-page trend line chart: window slicing,
+		* top-model selection, per-model series building and monotone cubic smoothing.
+		* Kept free of React/DOM so it is unit-testable and reusable.
+		*/
+		/** N consecutive day keys ending at `endKey` (inclusive). */
+		function recentDayKeys(endKey, n) {
+			const out = [];
+			for (let i = n - 1; i >= 0; i--) out.push(addDays(endKey, -i));
+			return out;
+		}
+		/** Sum each model's tokens over `dayKeys`. */
+		function modelTotals(days, dayKeys) {
+			const inWindow = new Set(dayKeys);
+			const totals = /* @__PURE__ */ new Map();
+			for (const d of days) {
+				if (!inWindow.has(d.dayKey)) continue;
+				for (const [model, tokens] of d.byModel) totals.set(model, (totals.get(model) ?? 0) + tokens);
+			}
+			return totals;
+		}
+		const byTotalDesc = (a, b) => b[1] - a[1] || (a[0] < b[0] ? -1 : 1);
+		/** Sum each model's tokens over `dayKeys`, return up to `k` names by total desc. */
+		function pickTopModels(days, dayKeys, k = 5) {
+			return [...modelTotals(days, dayKeys).entries()].sort(byTotalDesc).slice(0, k).map(([model]) => model);
+		}
+		/**
+		* Legend selection for the trend chart: the range's top-k models PLUS the
+		* week's top-`weekTopN` models guaranteed (a model that took over this week
+		* must stay visible in a 30/90-day view). If the union exceeds `k`, the
+		* weakest range-ranked models give up their slots. Result is ordered by range
+		* usage desc, deduplicated, at most `k` names.
+		*/
+		function pickTrendModels(days, dayKeys, weekKeys, k = 10, weekTopN = 3) {
+			const rangeTotals = modelTotals(days, dayKeys);
+			const rangeRanked = [...rangeTotals.entries()].sort(byTotalDesc).slice(0, k).map(([m]) => m);
+			const weekTop = pickTopModels(days, weekKeys, weekTopN);
+			const selected = new Set(weekTop);
+			for (const m of rangeRanked) {
+				if (selected.size >= k) break;
+				selected.add(m);
+			}
+			return [...selected].sort((a, b) => (rangeTotals.get(b) ?? 0) - (rangeTotals.get(a) ?? 0) || (a < b ? -1 : 1));
+		}
+		/** One series per model: its daily tokens aligned to `dayKeys`, 0 where absent. */
+		function buildSeries(days, dayKeys, models) {
+			const index = new Map(days.map((d) => [d.dayKey, d]));
+			return models.map((model) => ({
+				model,
+				points: dayKeys.map((k) => index.get(k)?.byModel.get(model) ?? 0)
+			}));
+		}
+		/**
+		* Monotone cubic (Fritsch–Carlson) Hermite interpolation of 2-D points as
+		* cubic bezier segments. Used instead of plain Catmull-Rom because a smooth
+		* trend line must NOT overshoot: a zero day between two peaks stays at zero
+		* instead of dipping below the axis and inventing a fake trough.
+		*/
+		function monotoneSegments(pts) {
+			const n = pts.length;
+			if (n < 2) return [];
+			const h = [];
+			const delta = [];
+			for (let i = 0; i < n - 1; i++) {
+				const dx = pts[i + 1][0] - pts[i][0];
+				h.push(dx);
+				delta.push(dx === 0 ? 0 : (pts[i + 1][1] - pts[i][1]) / dx);
+			}
+			const m = new Array(n);
+			m[0] = delta[0];
+			m[n - 1] = delta[n - 2];
+			for (let i = 1; i < n - 1; i++) m[i] = delta[i - 1] * delta[i] <= 0 ? 0 : (delta[i - 1] + delta[i]) / 2;
+			for (let i = 0; i < n - 1; i++) {
+				if (delta[i] === 0) {
+					m[i] = 0;
+					m[i + 1] = 0;
+					continue;
+				}
+				const a = m[i] / delta[i];
+				const b = m[i + 1] / delta[i];
+				const s = a * a + b * b;
+				if (s > 9) {
+					const t = 3 / Math.sqrt(s);
+					m[i] = t * a * delta[i];
+					m[i + 1] = t * b * delta[i];
+				}
+			}
+			const segs = [];
+			for (let i = 0; i < n - 1; i++) {
+				const [x0, y0] = pts[i];
+				const [x1, y1] = pts[i + 1];
+				const dx = (x1 - x0) / 3;
+				segs.push({
+					p0: [x0, y0],
+					c1: [x0 + dx, y0 + m[i] * (x1 - x0) / 3],
+					c2: [x1 - dx, y1 - m[i + 1] * (x1 - x0) / 3],
+					p1: [x1, y1]
+				});
+			}
+			return segs;
+		}
+		const fmtNum = (v) => Math.round(v * 100) / 100;
+		/** SVG path `d` for a smoothed polyline through `points` ([x,y] pairs). */
+		function seriesPath(points) {
+			if (points.length === 0) return "";
+			const head = `M ${fmtNum(points[0][0])} ${fmtNum(points[0][1])}`;
+			if (points.length === 1) return head;
+			return head + monotoneSegments(points).map((s) => ` C ${fmtNum(s.c1[0])} ${fmtNum(s.c1[1])}, ${fmtNum(s.c2[0])} ${fmtNum(s.c2[1])}, ${fmtNum(s.p1[0])} ${fmtNum(s.p1[1])}`).join("");
+		}
+		/** Compact token count for axis labels (same semantics as the heatmap). */
+		function formatTokensShort(n) {
+			if (n >= 1e9) return (n / 1e9).toFixed(2) + "B";
+			if (n >= 1e6) return (n / 1e6).toFixed(2) + "M";
+			if (n >= 1e3) return (n / 1e3).toFixed(2) + "k";
+			return n.toLocaleString();
+		}
+		//#endregion
+		//#region src/client/TrendChart.tsx
+		/** Distinct, colorblind-tolerant series colors (first matches the heatmap green). */
+		const COLORS = [
+			"#40c463",
+			"#4c8dff",
+			"#f6a609",
+			"#c956e0",
+			"#ff7a59",
+			"#26c6da",
+			"#ff5c8a",
+			"#9ccc65",
+			"#7e57c2",
+			"#ffd54f"
+		];
+		/** Round a max up to a friendly axis ceiling (steps of half a decade). */
+		function niceCeil(v) {
+			if (v <= 0) return 1;
+			const unit = Math.pow(10, Math.floor(Math.log10(v))) / 2;
+			return Math.ceil(v / unit) * unit;
+		}
+		const W = 720;
+		const H = 280;
+		const PAD = {
+			top: 10,
+			right: 28,
+			bottom: 34,
+			left: 76
+		};
+		/** chart container horizontal padding (must match the div below) */
+		const CX_PAD = 8;
+		/**
+		* Trend line chart at the bottom of the settings section: one smoothed line
+		* per model (top 10 of the selected range), legend chips toggle visibility,
+		* range switch between the last 7 / 30 / 90 days. Hovering a date column shows a
+		* compact translucent tooltip BESIDE the cursor (never covering the hovered
+		* point): date, day total, per-model totals with color dots.
+		* Pure SVG + absolutely-positioned HTML tooltip, no dependencies.
+		*/
+		function TrendChart({ t, days, isEn = false }) {
+			const [rangeDays, setRangeDays] = react.useState(7);
+			const [hidden, setHidden] = react.useState(/* @__PURE__ */ new Set());
+			/** hovered column index + pointer position in wrapper px (for side placement) */
+			const [hover, setHover] = react.useState(null);
+			const endKey = toDayKey(Date.now());
+			const dayKeys = react.useMemo(() => recentDayKeys(endKey, rangeDays), [endKey, rangeDays]);
+			const weekKeys = react.useMemo(() => recentDayKeys(endKey, 7), [endKey]);
+			const topModels = react.useMemo(() => pickTrendModels(days, dayKeys, weekKeys, 10, 3), [
+				days,
+				dayKeys,
+				weekKeys
+			]);
+			const series = react.useMemo(() => buildSeries(days, dayKeys, topModels), [
+				days,
+				dayKeys,
+				topModels
+			]);
+			const totalsByModel = react.useMemo(() => {
+				const m = /* @__PURE__ */ new Map();
+				for (const s of series) m.set(s.model, s.points.reduce((a, b) => a + b, 0));
+				return m;
+			}, [series]);
+			const wrapRef = react.useRef(null);
+			const [wrap, setWrap] = react.useState({
+				w: 0,
+				h: 0
+			});
+			react.useEffect(() => {
+				const el = wrapRef.current;
+				if (!el) return;
+				const measure = () => setWrap({
+					w: el.clientWidth,
+					h: el.clientHeight
+				});
+				measure();
+				const ro = new ResizeObserver(measure);
+				ro.observe(el);
+				return () => ro.disconnect();
+			}, []);
+			const toggle = (model) => {
+				setHidden((prev) => {
+					const next = new Set(prev);
+					if (next.has(model)) next.delete(model);
+					else next.add(model);
+					return next;
+				});
+			};
+			const colorOf = (model) => COLORS[Math.max(0, topModels.indexOf(model)) % COLORS.length];
+			const visible = series.filter((s) => !hidden.has(s.model));
+			const plotW = W - PAD.left - PAD.right;
+			const plotH = H - PAD.top - PAD.bottom;
+			const yMax = niceCeil(Math.max(1, ...visible.map((s) => Math.max(0, ...s.points))));
+			const step = dayKeys.length > 1 ? plotW / (dayKeys.length - 1) : plotW;
+			const xOf = (i) => PAD.left + (dayKeys.length > 1 ? i * step : plotW / 2);
+			const yOf = (v) => PAD.top + (1 - v / yMax) * plotH;
+			const fmtDay = (k) => `${Number(k.slice(5, 7))}/${Number(k.slice(8, 10))}`;
+			const fmtDayLong = (k) => isEn ? `${Number(k.slice(5, 7))}/${Number(k.slice(8, 10))}` : `${Number(k.slice(5, 7))}月${Number(k.slice(8, 10))}日`;
+			const tickEvery = rangeDays === 7 ? 1 : rangeDays === 30 ? 5 : 10;
+			const tickIdx = dayKeys.map((_, i) => i).filter((i) => i % tickEvery === 0 || i === dayKeys.length - 1);
+			const onMove = (e) => {
+				const wrapEl = wrapRef.current;
+				if (!wrapEl) return;
+				const wrapRect = wrapEl.getBoundingClientRect();
+				const svgRect = e.currentTarget.getBoundingClientRect();
+				const scale = svgRect.width / W || 1;
+				const xvb = (e.clientX - svgRect.left) / scale;
+				const i = Math.round((xvb - PAD.left) / step);
+				setHover({
+					idx: Math.max(0, Math.min(dayKeys.length - 1, i)),
+					px: e.clientX - wrapRect.left,
+					py: e.clientY - wrapRect.top
+				});
+			};
+			const hoverRows = hover == null ? [] : visible.map((s) => ({
+				model: s.model,
+				color: colorOf(s.model),
+				value: s.points[hover.idx]
+			})).filter((r) => r.value > 0).sort((a, b) => b.value - a.value);
+			const hoverTotal = hoverRows.reduce((a, r) => a + r.value, 0);
+			const tipW = 200;
+			const tipH = 56 + hoverRows.length * 19;
+			const gap = 14;
+			const svgW = Math.max(0, wrap.w - 16);
+			const colPx = hover == null ? 0 : CX_PAD + xOf(hover.idx) / W * svgW;
+			let tipLeft = hover == null ? 0 : colPx + gap;
+			if (hover != null && tipLeft + tipW > wrap.w - 4) tipLeft = colPx - gap - tipW;
+			tipLeft = Math.max(4, tipLeft);
+			const tipTop = hover == null ? 0 : Math.max(4, Math.min(hover.py - tipH / 2, Math.max(4, wrap.h - tipH - 4)));
+			const segStyle = {
+				padding: "2px 8px",
+				fontSize: 12,
+				border: "none",
+				cursor: "pointer",
+				borderRadius: 5,
+				background: "var(--dsw-alias-bg-layer-3)",
+				color: "var(--dsw-alias-label-secondary)"
+			};
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				style: {
+					border: "1px solid var(--dsw-alias-border-l2)",
+					background: "var(--dsw-alias-bg-layer-3)",
+					borderRadius: 12,
+					overflow: "hidden"
+				},
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						style: {
+							padding: "12px 16px 8px",
+							borderBottom: "1px solid var(--dsw-alias-border-l2)",
+							display: "flex",
+							alignItems: "center",
+							justifyContent: "space-between",
+							gap: 8
+						},
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							style: {
+								display: "flex",
+								alignItems: "center",
+								gap: 8
+							},
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								style: {
+									fontSize: 13,
+									fontWeight: 600,
+									color: "var(--dsw-alias-label-primary)"
+								},
+								children: t("trend.title")
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								style: {
+									fontSize: 12,
+									color: "var(--dsw-alias-label-tertiary)"
+								},
+								children: t("trend.hint")
+							})]
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							style: {
+								display: "inline-flex",
+								border: "1px solid var(--dsw-alias-border-l2)",
+								borderRadius: 6,
+								overflow: "hidden"
+							},
+							children: [
+								7,
+								30,
+								90
+							].map((n) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								onClick: () => {
+									setRangeDays(n);
+									setHover(null);
+								},
+								style: {
+									...segStyle,
+									background: rangeDays === n ? "var(--dsw-alias-label-primary)" : "transparent",
+									color: rangeDays === n ? "var(--dsw-alias-bg-layer-3)" : "var(--dsw-alias-label-secondary)"
+								},
+								children: n === 7 ? t("trend.range7") : n === 30 ? t("trend.range30") : t("trend.range90")
+							}, n))
+						})]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						style: { padding: "10px 16px 4px" },
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							style: {
+								display: "grid",
+								gridTemplateColumns: "repeat(5, minmax(0, 1fr))",
+								gap: 6
+							},
+							children: series.map((s) => {
+								const off = hidden.has(s.model);
+								return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+									onClick: () => toggle(s.model),
+									title: s.model,
+									style: {
+										display: "inline-flex",
+										alignItems: "center",
+										gap: 4,
+										padding: "1px 6px",
+										borderRadius: 999,
+										border: "1px solid var(--dsw-alias-border-l2)",
+										background: "transparent",
+										cursor: "pointer",
+										opacity: off ? .35 : 1,
+										fontSize: 11,
+										color: "var(--dsw-alias-label-primary)",
+										minWidth: 0
+									},
+									children: [
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { style: {
+											width: 6,
+											height: 6,
+											borderRadius: 3,
+											background: colorOf(s.model),
+											flexShrink: 0
+										} }),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+											style: {
+												flex: 1,
+												minWidth: 0,
+												overflow: "hidden",
+												textOverflow: "ellipsis",
+												whiteSpace: "nowrap",
+												textAlign: "left",
+												textDecoration: off ? "line-through" : "none"
+											},
+											children: s.model
+										}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+											style: {
+												fontSize: 10,
+												color: "var(--dsw-alias-label-tertiary)",
+												flexShrink: 0
+											},
+											children: formatTokensShort(totalsByModel.get(s.model) ?? 0)
+										})
+									]
+								}, s.model);
+							})
+						}), series.length === 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							style: {
+								fontSize: 10,
+								color: "var(--dsw-alias-label-tertiary)",
+								marginTop: 4
+							},
+							children: t("trend.legend.hint")
+						})]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						ref: wrapRef,
+						style: {
+							position: "relative",
+							padding: `4px ${CX_PAD}px 12px`
+						},
+						children: [topModels.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							style: {
+								padding: 24,
+								textAlign: "center",
+								fontSize: 14,
+								color: "var(--dsw-alias-label-tertiary)"
+							},
+							children: t("trend.empty")
+						}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+							viewBox: `0 0 ${W} ${H}`,
+							width: "100%",
+							style: { display: "block" },
+							role: "img",
+							"aria-label": t("trend.title"),
+							onMouseMove: onMove,
+							onMouseLeave: () => setHover(null),
+							children: [
+								[
+									0,
+									.25,
+									.5,
+									.75,
+									1
+								].map((f) => {
+									const y = PAD.top + (1 - f) * plotH;
+									return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("g", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
+										x1: PAD.left,
+										y1: y,
+										x2: W - PAD.right,
+										y2: y,
+										stroke: "var(--dsw-alias-border-l2)",
+										strokeWidth: 1,
+										strokeDasharray: f === 0 ? void 0 : "3 3"
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("text", {
+										x: PAD.left - 8,
+										y: y + 5,
+										textAnchor: "end",
+										fontSize: 14,
+										fill: "var(--dsw-alias-label-tertiary)",
+										children: formatTokensShort(yMax * f)
+									})] }, f);
+								}),
+								tickIdx.map((i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("text", {
+									x: xOf(i),
+									y: 270,
+									textAnchor: "middle",
+									fontSize: 14,
+									fill: "var(--dsw-alias-label-tertiary)",
+									children: fmtDay(dayKeys[i])
+								}, i)),
+								hover != null ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
+									x1: xOf(hover.idx),
+									y1: PAD.top,
+									x2: xOf(hover.idx),
+									y2: PAD.top + plotH,
+									stroke: "var(--dsw-alias-label-tertiary)",
+									strokeWidth: 1,
+									strokeDasharray: "4 3",
+									opacity: .6
+								}) : null,
+								visible.map((s) => {
+									const color = colorOf(s.model);
+									const pts = s.points.map((v, i) => [xOf(i), yOf(v)]);
+									return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("g", {
+										opacity: .8,
+										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+											d: seriesPath(pts),
+											fill: "none",
+											stroke: color,
+											strokeWidth: 2,
+											strokeLinecap: "round",
+											strokeLinejoin: "round"
+										}), pts.map(([x, y], i) => s.points[i] > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+											cx: x,
+											cy: y,
+											r: hover?.idx === i ? 4 : 2,
+											fill: color
+										}, i) : null)]
+									}, s.model);
+								}),
+								visible.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("text", {
+									x: W / 2,
+									y: PAD.top + plotH / 2,
+									textAnchor: "middle",
+									fontSize: 13,
+									fill: "var(--dsw-alias-label-tertiary)",
+									children: t("trend.legend.hint")
+								}) : null
+							]
+						}), hover != null && topModels.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							style: {
+								position: "absolute",
+								left: tipLeft,
+								top: tipTop,
+								width: tipW,
+								opacity: .7,
+								pointerEvents: "none",
+								background: "var(--dsw-alias-bg-layer-3)",
+								border: "1px solid var(--dsw-alias-border-l2)",
+								borderRadius: 8,
+								boxShadow: "0 6px 18px rgba(0,0,0,0.25)",
+								padding: "6px 10px",
+								fontSize: 11,
+								lineHeight: 1.5,
+								color: "var(--dsw-alias-label-primary)",
+								zIndex: 5
+							},
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									style: {
+										fontWeight: 600,
+										fontSize: 12,
+										marginBottom: 4
+									},
+									children: fmtDayLong(dayKeys[hover.idx])
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									style: {
+										display: "flex",
+										justifyContent: "space-between",
+										gap: 10,
+										fontWeight: 600
+									},
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: isEn ? "Total" : "消耗总量" }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [formatTokensShort(hoverTotal), " tokens"] })]
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { style: {
+									borderTop: "1px solid var(--dsw-alias-border-l2)",
+									margin: "4px 0"
+								} }),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									style: {
+										display: "flex",
+										flexDirection: "column",
+										gap: 3
+									},
+									children: hoverRows.map((r) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+										style: {
+											display: "flex",
+											alignItems: "center",
+											gap: 6
+										},
+										children: [
+											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { style: {
+												width: 7,
+												height: 7,
+												borderRadius: 4,
+												background: r.color,
+												flexShrink: 0
+											} }),
+											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+												style: {
+													flex: 1,
+													minWidth: 0,
+													overflow: "hidden",
+													textOverflow: "ellipsis",
+													whiteSpace: "nowrap"
+												},
+												title: r.model,
+												children: r.model
+											}),
+											/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+												style: {
+													fontWeight: 500,
+													whiteSpace: "nowrap"
+												},
+												children: [formatTokensShort(r.value), " tokens"]
+											})
+										]
+									}, r.model))
+								})
+							]
+						}) : null]
+					})
+				]
+			});
+		}
+		//#endregion
+		//#region src/client/locales.ts
+		const zh = {
+			"nav": "Token Pulse",
+			"heatmap.title": "Token Pulse",
+			"heatmap.subtitle": "基于本地会话日志统计 Token 用量，北京时间自然日分桶，零网络零计费。首次同步后持久化，删除会话不丢历史。",
+			"heatmap.empty": "暂无用量数据，开始一次对话后这里会出现热图。",
+			"heatmap.legend.less": "少",
+			"heatmap.legend.more": "多",
+			"heatmap.tooltip.tokens": "{count} tokens",
+			"heatmap.tooltip.none": "无用量",
+			"heatmap.refresh": "刷新",
+			"heatmap.refreshing": "刷新中…",
+			"heatmap.lastRefresh": "上次刷新：{time}",
+			"heatmap.autoRefresh": "自动刷新",
+			"heatmap.autoRefresh.off": "关闭",
+			"heatmap.autoRefresh.hint": "设置自动刷新间隔（分钟）",
+			"heatmap.reset": "重置历史",
+			"heatmap.reset.confirm": "确定重置所有历史数据？此操作不可撤销。",
+			"heatmap.reset.done": "已重置",
+			"view.week": "周",
+			"view.month": "月",
+			"view.quarter": "季度",
+			"view.year": "年",
+			"view.model": "模型",
+			"view.provider": "供应商",
+			"stats.today": "今日",
+			"stats.week": "本周",
+			"stats.month": "本月",
+			"stats.all": "累计",
+			"stats.count": "{count} 次",
+			"model.top5": "Top 5 模型",
+			"model.top5.hint": "按 Token 用量排序",
+			"model.winner": "当日最常用模型",
+			"model.none": "暂无模型数据",
+			"model.tokens": "{count} tokens",
+			"provider.top5": "Top 5 供应商",
+			"provider.winner": "当日最常用供应商",
+			"trend.title": "用量趋势",
+			"trend.hint": "按模型的每日 Token 用量",
+			"trend.range7": "近一周",
+			"trend.range30": "近一月",
+			"trend.range90": "近90天",
+			"trend.empty": "所选范围内暂无数据",
+			"trend.legend.hint": "点击图例可显示/隐藏",
+			"common.tokens": "tokens"
+		};
+		const en = {
+			"nav": "Token Pulse",
+			"heatmap.title": "Token Pulse",
+			"heatmap.subtitle": "Local token usage from session logs, bucketed by Asia/Shanghai, no network or billing. Synced once then persisted, surviving session deletion.",
+			"heatmap.empty": "No usage yet. Start a conversation and the heatmap will appear here.",
+			"heatmap.legend.less": "Less",
+			"heatmap.legend.more": "More",
+			"heatmap.tooltip.tokens": "{count} tokens",
+			"heatmap.tooltip.none": "No usage",
+			"heatmap.refresh": "Refresh",
+			"heatmap.refreshing": "Refreshing…",
+			"heatmap.lastRefresh": "Last refresh: {time}",
+			"heatmap.autoRefresh": "Auto refresh",
+			"heatmap.autoRefresh.off": "Off",
+			"heatmap.autoRefresh.hint": "Auto refresh interval (minutes)",
+			"heatmap.reset": "Reset history",
+			"heatmap.reset.confirm": "Reset all historical data? This cannot be undone.",
+			"heatmap.reset.done": "Reset done",
+			"view.week": "Week",
+			"view.month": "Month",
+			"view.quarter": "Quarter",
+			"view.year": "Year",
+			"view.model": "Model",
+			"view.provider": "Provider",
+			"stats.today": "Today",
+			"stats.week": "This week",
+			"stats.month": "This month",
+			"stats.all": "All time",
+			"stats.count": "{count} turns",
+			"model.top5": "Top 5 Models",
+			"model.top5.hint": "By token usage",
+			"model.winner": "Daily winner (model)",
+			"model.none": "No model data",
+			"model.tokens": "{count} tokens",
+			"provider.top5": "Top 5 Providers",
+			"provider.winner": "Daily winner (provider)",
+			"trend.title": "Usage Trend",
+			"trend.hint": "Daily token usage per model",
+			"trend.range7": "7 days",
+			"trend.range30": "30 days",
+			"trend.range90": "90 days",
+			"trend.empty": "No data in this range",
+			"trend.legend.hint": "Click legend to toggle",
+			"common.tokens": "tokens"
+		};
+		//#endregion
 		//#region src/client/hooks.ts
 		const LS_INTERVAL_KEY = "dsh-token-pulse:autoRefreshMinutes";
 		function getAutoRefreshMinutes() {
@@ -1543,6 +2201,10 @@ window.__ModuleLoader__.load({
 				} catch {}
 			};
 			const days = injectedDays ?? computedDays;
+			const allDays = react.useMemo(() => {
+				if (aggregated?.byDay) return [...aggregated.byDay.values()];
+				return days ?? [];
+			}, [aggregated, days]);
 			const totals = injectedTotals ?? aggregated?.totals;
 			const viewTopModelsRaw = computedTopModels.length ? computedTopModels : aggregated?.topModels ?? [];
 			const viewTopProvidersRaw = computedTopProviders.length ? computedTopProviders : aggregated?.topProviders ?? [];
@@ -1662,7 +2324,7 @@ window.__ModuleLoader__.load({
 									color: "var(--dsw-alias-label-tertiary)",
 									verticalAlign: "middle"
 								},
-								children: ["v", "0.3.0"]
+								children: ["v", "0.4.0"]
 							})]
 						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 							style: {
@@ -2117,89 +2779,16 @@ window.__ModuleLoader__.load({
 							fontSize: 13
 						},
 						children: t("heatmap.empty")
+					}) : null,
+					allDays.some((d) => d.totalTokens > 0) ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TrendChart, {
+						t: lang === "en" ? (k, p) => en[k] ?? t(k, p) : t,
+						days: allDays,
+						isEn: lang === "en"
 					}) : null
 				]
 			});
 		}
 		//#endregion
-		//#region src/client/locales.ts
-		const zh = {
-			"nav": "Token Pulse",
-			"heatmap.title": "Token Pulse",
-			"heatmap.subtitle": "基于本地会话日志统计 Token 用量，北京时间自然日分桶，零网络零计费。首次同步后持久化，删除会话不丢历史。",
-			"heatmap.empty": "暂无用量数据，开始一次对话后这里会出现热图。",
-			"heatmap.legend.less": "少",
-			"heatmap.legend.more": "多",
-			"heatmap.tooltip.tokens": "{count} tokens",
-			"heatmap.tooltip.none": "无用量",
-			"heatmap.refresh": "刷新",
-			"heatmap.refreshing": "刷新中…",
-			"heatmap.lastRefresh": "上次刷新：{time}",
-			"heatmap.autoRefresh": "自动刷新",
-			"heatmap.autoRefresh.off": "关闭",
-			"heatmap.autoRefresh.hint": "设置自动刷新间隔（分钟）",
-			"heatmap.reset": "重置历史",
-			"heatmap.reset.confirm": "确定重置所有历史数据？此操作不可撤销。",
-			"heatmap.reset.done": "已重置",
-			"view.week": "周",
-			"view.month": "月",
-			"view.quarter": "季度",
-			"view.year": "年",
-			"view.model": "模型",
-			"view.provider": "供应商",
-			"stats.today": "今日",
-			"stats.week": "本周",
-			"stats.month": "本月",
-			"stats.all": "累计",
-			"stats.count": "{count} 次",
-			"model.top5": "Top 5 模型",
-			"model.top5.hint": "按 Token 用量排序",
-			"model.winner": "当日最常用模型",
-			"model.none": "暂无模型数据",
-			"model.tokens": "{count} tokens",
-			"provider.top5": "Top 5 供应商",
-			"provider.winner": "当日最常用供应商",
-			"common.tokens": "tokens"
-		};
-		const en = {
-			"nav": "Token Pulse",
-			"heatmap.title": "Token Pulse",
-			"heatmap.subtitle": "Local token usage from session logs, bucketed by Asia/Shanghai, no network or billing. Synced once then persisted, surviving session deletion.",
-			"heatmap.empty": "No usage yet. Start a conversation and the heatmap will appear here.",
-			"heatmap.legend.less": "Less",
-			"heatmap.legend.more": "More",
-			"heatmap.tooltip.tokens": "{count} tokens",
-			"heatmap.tooltip.none": "No usage",
-			"heatmap.refresh": "Refresh",
-			"heatmap.refreshing": "Refreshing…",
-			"heatmap.lastRefresh": "Last refresh: {time}",
-			"heatmap.autoRefresh": "Auto refresh",
-			"heatmap.autoRefresh.off": "Off",
-			"heatmap.autoRefresh.hint": "Auto refresh interval (minutes)",
-			"heatmap.reset": "Reset history",
-			"heatmap.reset.confirm": "Reset all historical data? This cannot be undone.",
-			"heatmap.reset.done": "Reset done",
-			"view.week": "Week",
-			"view.month": "Month",
-			"view.quarter": "Quarter",
-			"view.year": "Year",
-			"view.model": "Model",
-			"view.provider": "Provider",
-			"stats.today": "Today",
-			"stats.week": "This week",
-			"stats.month": "This month",
-			"stats.all": "All time",
-			"stats.count": "{count} turns",
-			"model.top5": "Top 5 Models",
-			"model.top5.hint": "By token usage",
-			"model.winner": "Daily winner (model)",
-			"model.none": "No model data",
-			"model.tokens": "{count} tokens",
-			"provider.top5": "Top 5 Providers",
-			"provider.winner": "Daily winner (provider)",
-			"common.tokens": "tokens"
-		};
-		//#endregion
 		//#region src/client/index.ts
 		const NS = "dsh-token-pulse";
 		const inject = ["locale", "slots"];