dsh-token-pulse 0.4.1 → 0.4.2

package/lib/client.js

@@ -1106,8 +1106,10 @@ window.__ModuleLoader__.load({
 			if (n >= 1e3) return (n / 1e3).toFixed(2) + "k";
 			return n.toLocaleString();
 		}
-		function ModelTop5({ t, topModels, topProviders, days, mode = "model", onModeChange }) {
+		function ModelTop5({ t, topModels, topProviders, days, mode = "model", onModeChange, othersModelTokens, othersProviderTokens }) {
 			const active = mode === "provider" ? topProviders : topModels;
+			const othersTokens = mode === "provider" ? othersProviderTokens : othersModelTokens;
+			const hasOthers = (othersTokens ?? 0) > 0;
 			if (active.length === 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				style: {
 					border: "1px solid var(--dsw-alias-border-l2)",
@@ -1193,12 +1195,12 @@ window.__ModuleLoader__.load({
 								children: t("view.provider")
 							})]
 						}) : null]
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						style: {
 							display: "flex",
 							flexDirection: "column"
 						},
-						children: active.map((item, idx) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						children: [active.map((item, idx) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 							style: {
 								display: "flex",
 								alignItems: "center",
@@ -1254,7 +1256,63 @@ window.__ModuleLoader__.load({
 									children: formatTokens(item.tokens)
 								})
 							]
-						}, item.name))
+						}, item.name)), hasOthers ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							style: {
+								display: "flex",
+								alignItems: "center",
+								gap: 12,
+								padding: "10px 16px",
+								borderTop: "1px solid var(--dsw-alias-border-l2)",
+								opacity: .75
+							},
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									style: {
+										width: 20,
+										textAlign: "center",
+										fontSize: 12,
+										color: "var(--dsw-alias-label-tertiary)"
+									},
+									children: "…"
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									style: {
+										flex: "0 1 40%",
+										minWidth: 0,
+										fontSize: 13,
+										color: "var(--dsw-alias-label-secondary)",
+										overflow: "hidden",
+										textOverflow: "ellipsis",
+										whiteSpace: "nowrap"
+									},
+									title: t("model.others"),
+									children: t("model.others")
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									style: {
+										flex: 1,
+										height: 6,
+										borderRadius: 3,
+										background: "var(--dsw-alias-bg-layer-2, #ebedf0)",
+										overflow: "hidden"
+									},
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { style: {
+										width: `${Math.min(100, Math.max(4, (othersTokens ?? 0) / max * 100))}%`,
+										height: "100%",
+										background: "#9aa3ad",
+										borderRadius: 3
+									} })
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									style: {
+										fontSize: 12,
+										color: "var(--dsw-alias-label-secondary)",
+										whiteSpace: "nowrap"
+									},
+									children: formatTokens(othersTokens ?? 0)
+								})
+							]
+						}) : null]
 					})]
 				})
 			});
@@ -1283,6 +1341,22 @@ window.__ModuleLoader__.load({
 			return totals;
 		}
 		const byTotalDesc = (a, b) => b[1] - a[1] || (a[0] < b[0] ? -1 : 1);
+		/** Synthetic series key for "all other models combined". */
+		const OTHER_KEY = "__other__";
+		/** Sum of every model NOT in `exclude`, per day, aligned to `dayKeys`. */
+		function buildOtherSeries(days, dayKeys, exclude) {
+			const index = new Map(dayKeys.map((k, i) => [k, i]));
+			const points = new Array(dayKeys.length).fill(0);
+			for (const d of days) {
+				const i = index.get(d.dayKey);
+				if (i === void 0) continue;
+				for (const [m, v] of d.byModel) if (!exclude.has(m)) points[i] += v;
+			}
+			return {
+				model: OTHER_KEY,
+				points
+			};
+		}
 		/** 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);
@@ -1363,12 +1437,33 @@ window.__ModuleLoader__.load({
 			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) {
+		/**
+		* Same curve as seriesPath, but resampled at `samples` evenly spaced x
+		* positions into a FIXED-structure polyline (M + samples L). Every path then
+		* has an identical command count no matter how many days it represents, so
+		* CSS `transition: d` can morph lines across range switches too — where raw
+		* bezier paths (M + n-1 C) have mismatched structures and would jump.
+		* Visual output is indistinguishable at this density.
+		*/
+		function seriesPathFixed(points, samples = 89) {
 			if (points.length === 0) return "";
-			const head = `M ${fmtNum(points[0][0])} ${fmtNum(points[0][1])}`;
+			const x0 = points[0][0];
+			const x1 = points[points.length - 1][0];
+			const head = `M ${fmtNum(x0)} ${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("");
+			const segs = monotoneSegments(points);
+			let out = "";
+			let seg = 0;
+			for (let s = 1; s <= samples; s++) {
+				const x = x0 + (x1 - x0) * s / samples;
+				while (seg < segs.length - 1 && x > segs[seg].p1[0]) seg++;
+				const g = segs[seg];
+				const t = g.p1[0] === g.p0[0] ? 0 : Math.min(1, Math.max(0, (x - g.p0[0]) / (g.p1[0] - g.p0[0])));
+				const mt = 1 - t;
+				const y = mt * mt * mt * g.p0[1] + 3 * mt * mt * t * g.c1[1] + 3 * mt * t * t * g.c2[1] + t * t * t * g.p1[1];
+				out += ` L ${fmtNum(x)} ${fmtNum(y)}`;
+			}
+			return head + out;
 		}
 		/** Compact token count for axis labels (same semantics as the heatmap). */
 		function formatTokensShort(n) {
@@ -1398,6 +1493,11 @@ window.__ModuleLoader__.load({
 			const unit = Math.pow(10, Math.floor(Math.log10(v))) / 2;
 			return Math.ceil(v / unit) * unit;
 		}
+		/** "z-ai/glm-5.3" -> "glm-5.3": display only the part after the last "/". */
+		function shortName(model) {
+			const i = model.lastIndexOf("/");
+			return i >= 0 ? model.slice(i + 1) : model;
+		}
 		const W = 720;
 		const H = 280;
 		const PAD = {
@@ -1408,37 +1508,96 @@ window.__ModuleLoader__.load({
 		};
 		/** chart container horizontal padding (must match the div below) */
 		const CX_PAD = 8;
+		const LS_TYPE_KEY = "dsh-token-pulse:trendChartType";
+		/** transition/animation duration for the value/axis morphs (one tempo everywhere) */
+		const DUR = ".55s";
+		const T_POS = `x ${DUR} ease, y ${DUR} ease, width ${DUR} ease, height ${DUR} ease`;
+		const T_D = `d ${DUR} ease`;
+		const T_POINT = `cx ${DUR} ease, cy ${DUR} ease, r .2s ease`;
+		const T_FADE = `opacity ${DUR} ease`;
+		const T_SHIFT = `transform ${DUR} ease`;
+		const GHOST_MS = 650;
+		/**
+		* Stable color assignment per MODEL (not per rank): the same model keeps its
+		* color across range switches and legend toggles, so the animation never
+		* repaints a series. First-seen order locks the palette slot for good.
+		* Module-level so the assignment survives closing/reopening the panel.
+		*/
+		const modelColorSlot = /* @__PURE__ */ new Map();
+		function colorFor(model) {
+			let slot = modelColorSlot.get(model);
+			if (slot === void 0) {
+				slot = modelColorSlot.size % COLORS.length;
+				modelColorSlot.set(model, slot);
+			}
+			return COLORS[slot];
+		}
+		/**
+		* Animation styles. Elements that ENTER on a range/type switch (CSS transitions
+		* only animate elements that already existed) play a keyframe in the same 0.55s
+		* tempo as the gliding elements, and elements that LEAVE stay mounted for one
+		* beat as a "ghost" layer that collapses/fades — so the whole chart moves
+		* together instead of mixing instant pops with in-flight marks.
+		* The enter classes self-remove on animationend so live styles (hover opacity,
+		* legend toggles) keep working afterwards.
+		*/
+		const ANIM_CSS = `
+@keyframes dtp-grow { from { transform: scaleY(.02); opacity: .3; } }
+@keyframes dtp-fadein { from { opacity: 0; } }
+@keyframes dtp-shrink { to { transform: scaleY(.02); opacity: 0; } }
+@keyframes dtp-fadeout { to { opacity: 0; } }
+.dtp-growin { transform-box: fill-box; transform-origin: bottom; animation: dtp-grow ${DUR} ease; }
+.dtp-fadein { animation: dtp-fadein ${DUR} ease; }
+.dtp-ghost-bars { transform-box: fill-box; transform-origin: bottom; animation: dtp-shrink ${DUR} ease forwards; }
+.dtp-ghost-lines { animation: dtp-fadeout ${DUR} ease forwards; }
+`;
 		/**
-		* 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.
+		* Usage chart at the bottom of the settings section, two switchable forms:
+		* - "line": one smoothed (monotone cubic) line per model over the days
+		* - "bar":  one stacked bar per day, visible models layered bottom-up
+		* Both share the legend (top-10 + week's top-3, chips toggle models), the
+		* 7 / 30 / 90-day ranges and a compact translucent hover tooltip BESIDE the
+		* cursor (date, day total, per-model totals sorted desc, zero rows hidden).
+		*
+		* Range/type switches animate as ONE coordinated beat: retained marks glide
+		* by date identity (the last 7 days of a 30-day view sit in the rightmost
+		* slots, so 7→30 slides the week's bars right+down), entering marks grow from
+		* the baseline / fade in, and leaving marks collapse in a ghost overlay.
+		* Model colors are locked to model identity, never to rank position.
+		*
 		* Pure SVG + absolutely-positioned HTML tooltip, no dependencies.
 		*/
 		function TrendChart({ t, days, isEn = false }) {
 			const [rangeDays, setRangeDays] = react.useState(7);
+			const [chartType, setChartType] = react.useState(() => {
+				try {
+					return localStorage.getItem(LS_TYPE_KEY) === "line" ? "line" : "bar";
+				} catch {
+					return "bar";
+				}
+			});
 			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);
+			/** one-beat overlay of the PREVIOUS layout's marks, collapsing out on switches */
+			const [ghost, setGhost] = 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), [
+			const topModels = react.useMemo(() => pickTrendModels(days, dayKeys, weekKeys, 9, 3), [
 				days,
 				dayKeys,
 				weekKeys
 			]);
-			const series = react.useMemo(() => buildSeries(days, dayKeys, topModels), [
+			const series = react.useMemo(() => {
+				const base = buildSeries(days, dayKeys, topModels);
+				const other = buildOtherSeries(days, dayKeys, new Set(topModels));
+				return other.points.some((v) => v > 0) ? [...base, other] : base;
+			}, [
 				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,
@@ -1456,6 +1615,12 @@ window.__ModuleLoader__.load({
 				ro.observe(el);
 				return () => ro.disconnect();
 			}, []);
+			const prevDaysRef = react.useRef(null);
+			const prevModelsRef = react.useRef(null);
+			const prevTickRef = react.useRef(null);
+			const prevTypeRef = react.useRef(null);
+			const marksRef = react.useRef(null);
+			const labelsRef = react.useRef(null);
 			const toggle = (model) => {
 				setHidden((prev) => {
 					const next = new Set(prev);
@@ -1464,18 +1629,62 @@ window.__ModuleLoader__.load({
 					return next;
 				});
 			};
-			const colorOf = (model) => COLORS[Math.max(0, topModels.indexOf(model)) % COLORS.length];
-			const visible = series.filter((s) => !hidden.has(s.model));
+			const colorOf = (model) => model === "__other__" ? "#8b949e" : colorFor(model);
+			/** 其它 series 用固定中性灰；显示名：其它系列显示「其它/Other」，模型只显示 "/" 后半段 */
+			const dispName = (model) => model === "__other__" ? t("model.others") : shortName(model);
+			const isHidden = (model) => hidden.has(model);
+			const visible = series.filter((s) => !isHidden(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 slot = plotW / dayKeys.length;
+			const barW = Math.max(2, slot * .6);
+			const cxOf = (i) => PAD.left + slot * (i + .5);
+			const anchorX = (i) => chartType === "bar" ? cxOf(i) : xOf(i);
+			const dayTotals = dayKeys.map((_, i) => visible.reduce((a, s) => a + s.points[i], 0));
+			const yMax = chartType === "bar" ? niceCeil(Math.max(1, ...dayTotals)) : niceCeil(Math.max(1, ...visible.map((s) => Math.max(0, ...s.points))));
 			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 typeChanged = prevTypeRef.current !== null && prevTypeRef.current !== chartType;
+			const isNewDay = (k) => prevDaysRef.current !== null && (typeChanged || !prevDaysRef.current.includes(k));
+			const isNewModel = (m) => prevModelsRef.current !== null && (typeChanged || !prevModelsRef.current.includes(m));
+			const isNewTick = (k) => prevTickRef.current !== null && (typeChanged || !prevTickRef.current.includes(k));
+			const enterCls = (isNew, grow) => isNew ? grow ? "dtp-growin" : "dtp-fadein" : void 0;
+			const onAnimEnd = (e) => {
+				e.currentTarget.classList.remove("dtp-growin", "dtp-fadein");
+			};
+			react.useEffect(() => {
+				marksRef.current = marksNode;
+				labelsRef.current = labelsNode;
+				prevDaysRef.current = dayKeys;
+				prevModelsRef.current = series.map((s) => s.model);
+				prevTickRef.current = tickIdx.map((i) => dayKeys[i]);
+				prevTypeRef.current = chartType;
+			});
+			react.useEffect(() => {
+				if (!ghost) return;
+				const timer = setTimeout(() => setGhost(null), GHOST_MS);
+				return () => clearTimeout(timer);
+			}, [ghost]);
+			const switchTo = (patch) => {
+				setGhost({
+					marks: marksRef.current,
+					labels: labelsRef.current,
+					type: chartType
+				});
+				if (patch.range !== void 0) setRangeDays(patch.range);
+				if (patch.type !== void 0) {
+					setChartType(patch.type);
+					try {
+						localStorage.setItem(LS_TYPE_KEY, patch.type);
+					} catch {}
+				}
+				setHover(null);
+			};
 			const onMove = (e) => {
 				const wrapEl = wrapRef.current;
 				if (!wrapEl) return;
@@ -1483,7 +1692,7 @@ window.__ModuleLoader__.load({
 				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);
+				const i = chartType === "bar" ? Math.floor((xvb - PAD.left) / slot) : Math.round((xvb - PAD.left) / step);
 				setHover({
 					idx: Math.max(0, Math.min(dayKeys.length - 1, i)),
 					px: e.clientX - wrapRect.left,
@@ -1500,7 +1709,7 @@ window.__ModuleLoader__.load({
 			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;
+			const colPx = hover == null ? 0 : CX_PAD + anchorX(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);
@@ -1514,6 +1723,81 @@ window.__ModuleLoader__.load({
 				background: "var(--dsw-alias-bg-layer-3)",
 				color: "var(--dsw-alias-label-secondary)"
 			};
+			const segBtn = (active) => ({
+				...segStyle,
+				background: active ? "var(--dsw-alias-label-primary)" : "transparent",
+				color: active ? "var(--dsw-alias-bg-layer-3)" : "var(--dsw-alias-label-secondary)",
+				transition: "background .25s ease, color .25s ease"
+			});
+			const labelsNode = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: tickIdx.map((i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("text", {
+				x: 0,
+				y: 0,
+				textAnchor: "middle",
+				fontSize: 14,
+				fill: "var(--dsw-alias-label-tertiary)",
+				className: enterCls(isNewTick(dayKeys[i]), false),
+				onAnimationEnd: onAnimEnd,
+				style: {
+					transform: `translate(${anchorX(i)}px, 270px)`,
+					transition: T_SHIFT
+				},
+				children: fmtDay(dayKeys[i])
+			}, dayKeys[i])) });
+			const marksNode = chartType === "bar" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: dayKeys.map((k, i) => {
+				const dayNew = isNewDay(k);
+				let cum = 0;
+				const segs = series.map((s) => {
+					const v = isHidden(s.model) ? 0 : s.points[i];
+					const yTop = yOf(cum + v);
+					const h = v > 0 ? Math.max(.5, yOf(cum) - yTop) : 0;
+					cum += v;
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
+						x: cxOf(i) - barW / 2,
+						y: yTop,
+						width: barW,
+						height: h,
+						fill: colorOf(s.model),
+						className: enterCls(!dayNew && isNewModel(s.model), true),
+						onAnimationEnd: onAnimEnd,
+						style: { transition: T_POS }
+					}, s.model);
+				});
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("g", {
+					opacity: hover?.idx === i ? 1 : .8,
+					className: enterCls(dayNew, true),
+					onAnimationEnd: onAnimEnd,
+					style: { transition: T_FADE },
+					children: segs
+				}, k);
+			}) }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: series.map((s) => {
+				const color = colorOf(s.model);
+				const off = isHidden(s.model);
+				const modelNew = isNewModel(s.model);
+				const pts = s.points.map((v, i) => [xOf(i), yOf(v)]);
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("g", {
+					opacity: off ? 0 : .8,
+					className: enterCls(modelNew, false),
+					onAnimationEnd: onAnimEnd,
+					style: { transition: T_FADE },
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+						d: seriesPathFixed(pts),
+						fill: "none",
+						stroke: color,
+						strokeWidth: 2,
+						strokeLinecap: "round",
+						strokeLinejoin: "round",
+						style: { transition: T_D }
+					}), 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,
+						className: enterCls(!modelNew && isNewDay(dayKeys[i]), false),
+						onAnimationEnd: onAnimEnd,
+						style: { transition: T_POINT }
+					}, dayKeys[i]) : null)]
+				}, s.model);
+			}) });
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				style: {
 					border: "1px solid var(--dsw-alias-border-l2)",
@@ -1522,6 +1806,7 @@ window.__ModuleLoader__.load({
 					overflow: "hidden"
 				},
 				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("style", { children: ANIM_CSS }),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						style: {
 							padding: "12px 16px 8px",
@@ -1551,29 +1836,40 @@ window.__ModuleLoader__.load({
 								},
 								children: t("trend.hint")
 							})]
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 							style: {
-								display: "inline-flex",
-								border: "1px solid var(--dsw-alias-border-l2)",
-								borderRadius: 6,
-								overflow: "hidden"
+								display: "flex",
+								gap: 8
 							},
-							children: [
-								7,
-								30,
-								90
-							].map((n) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-								onClick: () => {
-									setRangeDays(n);
-									setHover(null);
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								style: {
+									display: "inline-flex",
+									border: "1px solid var(--dsw-alias-border-l2)",
+									borderRadius: 6,
+									overflow: "hidden"
 								},
+								children: ["line", "bar"].map((ty) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+									onClick: () => switchTo({ type: ty }),
+									style: segBtn(chartType === ty),
+									children: ty === "line" ? t("trend.type.line") : t("trend.type.bar")
+								}, ty))
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 								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)"
+									display: "inline-flex",
+									border: "1px solid var(--dsw-alias-border-l2)",
+									borderRadius: 6,
+									overflow: "hidden"
 								},
-								children: n === 7 ? t("trend.range7") : n === 30 ? t("trend.range30") : t("trend.range90")
-							}, n))
+								children: [
+									7,
+									30,
+									90
+								].map((n) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+									onClick: () => switchTo({ range: n }),
+									style: segBtn(rangeDays === n),
+									children: n === 7 ? t("trend.range7") : n === 30 ? t("trend.range30") : t("trend.range90")
+								}, n))
+							})]
 						})]
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -1585,58 +1881,48 @@ window.__ModuleLoader__.load({
 								gap: 6
 							},
 							children: series.map((s) => {
-								const off = hidden.has(s.model);
+								const off = isHidden(s.model);
 								return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 									onClick: () => toggle(s.model),
-									title: s.model,
+									title: s.model === "__other__" ? dispName(s.model) : s.model,
 									style: {
 										display: "inline-flex",
 										alignItems: "center",
-										gap: 4,
-										padding: "1px 6px",
+										gap: 6,
+										padding: "2px 8px",
 										borderRadius: 999,
 										border: "1px solid var(--dsw-alias-border-l2)",
 										background: "transparent",
 										cursor: "pointer",
 										opacity: off ? .35 : 1,
-										fontSize: 11,
+										transition: T_FADE,
+										fontSize: 12,
 										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)
-										})
-									]
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { style: {
+										width: 8,
+										height: 8,
+										borderRadius: 4,
+										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: dispName(s.model)
+									})]
 								}, s.model);
 							})
 						}), series.length === 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 							style: {
-								fontSize: 10,
+								fontSize: 11,
 								color: "var(--dsw-alias-label-tertiary)",
 								marginTop: 4
 							},
@@ -1674,61 +1960,44 @@ window.__ModuleLoader__.load({
 									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,
+									return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("g", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+										d: `M ${PAD.left} ${y} L ${W - PAD.right} ${y}`,
+										fill: "none",
 										stroke: "var(--dsw-alias-border-l2)",
 										strokeWidth: 1,
-										strokeDasharray: f === 0 ? void 0 : "3 3"
+										strokeDasharray: f === 0 ? void 0 : "3 3",
+										style: { transition: T_D }
 									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("text", {
-										x: PAD.left - 8,
-										y: y + 5,
+										x: 0,
+										y: 0,
 										textAnchor: "end",
 										fontSize: 14,
 										fill: "var(--dsw-alias-label-tertiary)",
+										style: {
+											transform: `translate(${PAD.left - 8}px, ${y + 5}px)`,
+											transition: T_SHIFT
+										},
 										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,
+								ghost ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("g", {
+									className: ghost.type === "bar" ? "dtp-ghost-bars" : "dtp-ghost-lines",
+									children: ghost.marks
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("g", {
+									className: "dtp-ghost-lines",
+									children: ghost.labels
+								})] }) : null,
+								labelsNode,
+								marksNode,
+								hover != null ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+									d: `M ${anchorX(hover.idx)} ${PAD.top} L ${anchorX(hover.idx)} ${PAD.top + plotH}`,
+									fill: "none",
 									stroke: "var(--dsw-alias-label-tertiary)",
 									strokeWidth: 1,
 									strokeDasharray: "4 3",
-									opacity: .6
+									opacity: .6,
+									style: { transition: T_D }
 								}) : 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,
@@ -1807,7 +2076,7 @@ window.__ModuleLoader__.load({
 													whiteSpace: "nowrap"
 												},
 												title: r.model,
-												children: r.model
+												children: dispName(r.model)
 											}),
 											/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 												style: {
@@ -1858,6 +2127,7 @@ window.__ModuleLoader__.load({
 			"stats.count": "{count} 次",
 			"model.top5": "Top 5 模型",
 			"model.top5.hint": "按 Token 用量排序",
+			"model.others": "其它",
 			"model.winner": "当日最常用模型",
 			"model.none": "暂无模型数据",
 			"model.tokens": "{count} tokens",
@@ -1868,6 +2138,8 @@ window.__ModuleLoader__.load({
 			"trend.range7": "近一周",
 			"trend.range30": "近一月",
 			"trend.range90": "近90天",
+			"trend.type.line": "折线",
+			"trend.type.bar": "柱状",
 			"trend.empty": "所选范围内暂无数据",
 			"trend.legend.hint": "点击图例可显示/隐藏",
 			"common.tokens": "tokens"
@@ -1903,6 +2175,7 @@ window.__ModuleLoader__.load({
 			"stats.count": "{count} turns",
 			"model.top5": "Top 5 Models",
 			"model.top5.hint": "By token usage",
+			"model.others": "Others",
 			"model.winner": "Daily winner (model)",
 			"model.none": "No model data",
 			"model.tokens": "{count} tokens",
@@ -1913,6 +2186,8 @@ window.__ModuleLoader__.load({
 			"trend.range7": "7 days",
 			"trend.range30": "30 days",
 			"trend.range90": "90 days",
+			"trend.type.line": "Lines",
+			"trend.type.bar": "Bars",
 			"trend.empty": "No data in this range",
 			"trend.legend.hint": "Click legend to toggle",
 			"common.tokens": "tokens"
@@ -2232,6 +2507,14 @@ window.__ModuleLoader__.load({
 				name: x.provider ?? x.name,
 				tokens: x.tokens
 			}));
+			const othersScope = selectedKey && aggregated?.byDay.has(selectedKey) ? [aggregated.byDay.get(selectedKey)] : days ?? [];
+			const sumField = (field) => {
+				let total = 0;
+				for (const d of othersScope) for (const [, v] of d[field]) total += v;
+				return total;
+			};
+			const modelOthersTokens = sumField("byModel") - viewTopModels.reduce((a, x) => a + x.tokens, 0);
+			const providerOthersTokens = sumField("byProvider") - viewTopProviders.reduce((a, x) => a + x.tokens, 0);
 			const injectedTop = injectedTop5;
 			const hasData = totals && (totals.today > 0 || totals.thisWeek > 0 || totals.thisMonth > 0 || totals.all > 0);
 			const tt = (key, params) => {
@@ -2324,7 +2607,7 @@ window.__ModuleLoader__.load({
 									color: "var(--dsw-alias-label-tertiary)",
 									verticalAlign: "middle"
 								},
-								children: ["v", "0.4.1"]
+								children: ["v", "0.4.2"]
 							})]
 						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 							style: {
@@ -2753,7 +3036,9 @@ window.__ModuleLoader__.load({
 						topProviders: [],
 						days: days ?? void 0,
 						mode: topMode,
-						onModeChange: setTopMode
+						onModeChange: setTopMode,
+						othersModelTokens: modelOthersTokens,
+						othersProviderTokens: providerOthersTokens
 					}) : viewTopModelsNamed.length > 0 || viewTopProvidersNamed.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ModelTop5, {
 						t: lang === "en" ? (k, p) => ({
 							"model.top5": "Top 5 Models",
@@ -2761,13 +3046,16 @@ window.__ModuleLoader__.load({
 							"model.top5.hint": "By token usage",
 							"model.none": "No data",
 							"view.model": "Model",
-							"view.provider": "Provider"
+							"view.provider": "Provider",
+							"model.others": "Others"
 						})[k] ?? t(k, p) : t,
 						topModels: viewTopModelsNamed,
 						topProviders: viewTopProvidersNamed,
 						days: days ?? void 0,
 						mode: topMode,
-						onModeChange: setTopMode
+						onModeChange: setTopMode,
+						othersModelTokens: modelOthersTokens,
+						othersProviderTokens: providerOthersTokens
 					}) : null,
 					!hasData && !days ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 						style: {