@nexus-aethra/dshell-usage 0.1.6

package/lib/client.js

@@ -0,0 +1,1146 @@
+window.__ModuleLoader__.load({
+	id: "@nexus-aethra/dshell-usage",
+	factory: (require) => {
+		var module = { exports: {} };
+		var exports = module.exports;
+		Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+		//#region \0rolldown/runtime.js
+		var __commonJSMin = (cb, mod) => () => (mod || (cb((mod = { exports: {} }).exports, mod), cb = null), mod.exports);
+		//#endregion
+		let react = require("react");
+		//#region lib/client/locales.js
+		/**
+		* `dshellUsage` namespace dictionaries, and the namespace's declaration.
+		*
+		* The namespace merge lives with its key set so that any module naming
+		* `TranslateNS<'dshellUsage'>` or `PropsLocale<'dshellUsage'>` needs only this
+		* file. Keys are lowercase and dotted: `nav.*` (the settings navigation row),
+		* `range.*` (the window selector), `chart.*` (the two charts' captions),
+		* `table.*` (the route breakdown), and `state.*` (empty, busy, freshness, and
+		* the load failure).
+		*/
+		/** Simplified Chinese dictionary and key-set source of truth. */
+		const zh = {
+			"nav": "用量",
+			"title": "模型 token 消耗",
+			"subtitle": "按模型汇总每个会话上报的用量。索引建在 dshell 自己的数据目录里，首次打开会扫一遍全部历史会话，之后只补新增的部分。",
+			"range.7": "近 7 天",
+			"range.30": "近 30 天",
+			"range.all": "全部",
+			"range.label": "时间范围",
+			"rebuild": "重新聚合",
+			"rebuild.busy": "正在聚合…",
+			"chart.heatmap": "每日热力（近 26 周内）",
+			"chart.heatmapDay": "{day} · {total} tok · {turns} 次调用",
+			"chart.heatmapLess": "少",
+			"chart.heatmapMore": "多",
+			"chart.heatmapPeak": "最忙一天 {total} tok",
+			"chart.heatmapTruncated": "只画最近 26 周",
+			"chart.curve": "每日消耗（按模型）",
+			"chart.pie": "模型占比",
+			"summary.total": "合计",
+			"summary.uncached": "未缓存输入",
+			"summary.output": "输出",
+			"summary.cacheRead": "缓存读",
+			"summary.turns": "调用",
+			"summary.hitRate": "缓存命中率",
+			"table.title": "按模型明细",
+			"table.model": "模型",
+			"table.input": "输入",
+			"table.output": "输出",
+			"table.cacheRead": "缓存读",
+			"table.cacheWrite": "缓存写",
+			"table.turns": "调用",
+			"table.total": "合计",
+			"state.empty.title": "还没有可统计的用量",
+			"state.empty.body": "索引里没有任何一条带用量上报的模型调用。跑一次 agent 会话后再点「重新聚合」。",
+			"state.freshness": "索引更新于 {day}",
+			"state.skipped": "有 {count} 个会话的日志读不了，未计入（详情见悬停提示）。",
+			"state.scanned": "本次扫描列出 {sessions} 个会话，读取了 {read} 个，命中 {turns} 次调用。",
+			"state.error": "读取用量失败：{reason}",
+			"state.loading": "正在读取索引…"
+		};
+		/** English dictionary, keyed by the same set. */
+		const en = {
+			"nav": "Usage",
+			"title": "Model token usage",
+			"subtitle": "Per-model totals folded from the usage every session reports. The index lives in dshell's own data directory: the first visit scans every session once, and later visits add only what is new.",
+			"range.7": "Last 7 days",
+			"range.30": "Last 30 days",
+			"range.all": "All time",
+			"range.label": "Range",
+			"rebuild": "Rebuild",
+			"rebuild.busy": "Rebuilding…",
+			"chart.heatmap": "Daily heatmap (last 26 weeks)",
+			"chart.heatmapDay": "{day} · {total} tok · {turns} calls",
+			"chart.heatmapLess": "Less",
+			"chart.heatmapMore": "More",
+			"chart.heatmapPeak": "Busiest day {total} tok",
+			"chart.heatmapTruncated": "Showing the last 26 weeks",
+			"chart.curve": "Daily usage by model",
+			"chart.pie": "Share by model",
+			"summary.total": "Total",
+			"summary.uncached": "Uncached input",
+			"summary.output": "Output",
+			"summary.cacheRead": "Cache read",
+			"summary.turns": "Calls",
+			"summary.hitRate": "Cache hit rate",
+			"table.title": "By model",
+			"table.model": "Model",
+			"table.input": "Input",
+			"table.output": "Output",
+			"table.cacheRead": "Cache read",
+			"table.cacheWrite": "Cache write",
+			"table.turns": "Calls",
+			"table.total": "Total",
+			"state.empty.title": "No usage to count yet",
+			"state.empty.body": "The index holds no model call that reported usage. Run an agent session, then press Rebuild.",
+			"state.freshness": "Index updated {day}",
+			"state.skipped": "{count} session logs could not be read and are not counted (hover for the reason).",
+			"state.scanned": "This scan listed {sessions} sessions, read {read}, and counted {turns} calls.",
+			"state.error": "Reading usage failed: {reason}",
+			"state.loading": "Reading the index…"
+		};
+		//#endregion
+		//#region ../../../node_modules/.pnpm/react@18.3.1/node_modules/react/cjs/react-jsx-runtime.production.min.js
+		/**
+		* @license React
+		* react-jsx-runtime.production.min.js
+		*
+		* Copyright (c) Facebook, Inc. and its affiliates.
+		*
+		* This source code is licensed under the MIT license found in the
+		* LICENSE file in the root directory of this source tree.
+		*/
+		var require_react_jsx_runtime_production_min = /* @__PURE__ */ __commonJSMin(((exports) => {
+			var f = require("react");
+			var k = Symbol.for("react.element");
+			var m = Object.prototype.hasOwnProperty;
+			var n = f.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner;
+			var p = {
+				key: !0,
+				ref: !0,
+				__self: !0,
+				__source: !0
+			};
+			function q(c, a, g) {
+				var b, d = {}, e = null, h = null;
+				void 0 !== g && (e = "" + g);
+				void 0 !== a.key && (e = "" + a.key);
+				void 0 !== a.ref && (h = a.ref);
+				for (b in a) m.call(a, b) && !p.hasOwnProperty(b) && (d[b] = a[b]);
+				if (c && c.defaultProps) for (b in a = c.defaultProps, a) void 0 === d[b] && (d[b] = a[b]);
+				return {
+					$$typeof: k,
+					type: c,
+					key: e,
+					ref: h,
+					props: d,
+					_owner: n.current
+				};
+			}
+			exports.jsx = q;
+			exports.jsxs = q;
+		}));
+		//#endregion
+		//#region ../../../node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js
+		var require_jsx_runtime = /* @__PURE__ */ __commonJSMin(((exports, module) => {
+			module.exports = require_react_jsx_runtime_production_min();
+		}));
+		//#endregion
+		//#region ../std/lib/contracts.js
+		/**
+		* The usage index route: one exact `/api` endpoint behind dsh's existing trust
+		* and authentication fence, in the shape every other dshell route uses.
+		*
+		* The page reads aggregates and triggers the scan through the same endpoint:
+		* the scan is the expensive half and belongs on the host, where the session
+		* events already are, so the browser asks for it rather than doing it.
+		*/
+		const DSHELL_USAGE_PATH = "/api/dshell/usage";
+		//#endregion
+		//#region lib/client/heatmap.js
+		var import_jsx_runtime = require_jsx_runtime();
+		/** The local date of a `YYYY-MM-DD` label, at local midnight. */
+		function dateOf(day) {
+			return /* @__PURE__ */ new Date(`${day}T00:00:00`);
+		}
+		/** The `YYYY-MM-DD` label of a local date, the way the index spells days. */
+		function labelOf(date) {
+			const pad = (value) => String(value).padStart(2, "0");
+			return `${String(date.getFullYear())}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
+		}
+		/**
+		* Lay the recorded days out in a full rectangle of `weeks` columns.
+		*
+		* The newest cell is the anchor: the last column's bottom cell holds the anchor
+		* day, and every earlier cell steps back one day, so the grid reads oldest at
+		* the top-left and newest at the bottom-right. The rectangle is always full —
+		* cells the history does not reach are present but empty — because a grid that
+		* grew and shrank with the data would move the corner as the history changed.
+		*
+		* @param days - one entry per recorded day, any order.
+		* @param weeks - how many columns to draw.
+		* @param anchor - the host's today, `YYYY-MM-DD`; the bottom-right cell.
+		* @returns the columns, left to right.
+		*/
+		function heatmapColumns(days, weeks, anchor) {
+			const byDay = new Map(days.map((day) => [day.day, day]));
+			const max = Math.max(1, ...days.map((day) => day.total));
+			const end = dateOf(anchor);
+			const columns = [];
+			for (let column = 0; column < weeks; column += 1) {
+				const cells = [];
+				for (let row = 0; row < 7; row += 1) {
+					const back = (weeks - 1 - column) * 7 + (6 - row);
+					const date = new Date(end);
+					date.setDate(date.getDate() - back);
+					const label = labelOf(date);
+					if (date.getTime() > end.getTime()) {
+						cells.push(void 0);
+						continue;
+					}
+					const recorded = byDay.get(label);
+					cells.push(recorded === void 0 ? void 0 : {
+						...recorded,
+						level: recorded.total === 0 ? 0 : Math.min(4, 1 + Math.floor(recorded.total / max * 3))
+					});
+				}
+				columns.push(cells);
+			}
+			return columns;
+		}
+		/**
+		* Whether the history reaches further back than the grid draws.
+		*
+		* @param days - the same days handed to {@link heatmapColumns}.
+		* @param weeks - the same width.
+		* @param anchor - the same anchor.
+		* @returns whether any recorded day fell off the left edge.
+		*/
+		function heatmapTruncated(days, weeks, anchor) {
+			if (days.length === 0) return false;
+			const oldest = days.reduce((earliest, day) => day.day < earliest ? day.day : earliest, days[0].day);
+			const start = dateOf(anchor);
+			start.setDate(start.getDate() - (weeks * 7 - 1));
+			return dateOf(oldest).getTime() < start.getTime();
+		}
+		//#endregion
+		//#region lib/client/page.js
+		/**
+		* The usage page: one settings entry that charts what every model has cost.
+		*
+		* Everything on it comes from one host endpoint. `summary` reads the index,
+		* `scan` extends it first — the host owns both the session events and the
+		* index, so the browser asks for a rebuild rather than performing one.
+		*
+		* The two charts answer different questions and neither is derivable from the
+		* other: the stacked area shows how the total moved over time and which route
+		* moved it, and the pie shows what share each route holds across the whole
+		* window. Both are hand-rolled SVG — the client bundle inlines its imports, and
+		* a charting library would be the largest thing in it by an order of magnitude.
+		*/
+		/** A fixed palette: a route keeps its colour as the window changes. */
+		const PALETTE = [
+			"#5B8FF9",
+			"#61DDAA",
+			"#F6BD16",
+			"#7262FD",
+			"#78D3F8",
+			"#9661BC",
+			"#F6903D",
+			"#008685",
+			"#F08BB4",
+			"#E8684A"
+		];
+		const RANGES = [
+			{
+				days: 7,
+				key: "range.7"
+			},
+			{
+				days: 30,
+				key: "range.30"
+			},
+			{
+				days: null,
+				key: "range.all"
+			}
+		];
+		/** Compact token counts: the axis and the table both read better rounded. */
+		const counts = new Intl.NumberFormat(void 0, {
+			notation: "compact",
+			maximumFractionDigits: 1
+		});
+		/** Rough sizes; the page is a settings column, not a full viewport. */
+		const CURVE = {
+			width: 720,
+			height: 200,
+			padLeft: 56,
+			padRight: 12,
+			padTop: 12,
+			padBottom: 24
+		};
+		const PIE = {
+			size: 200,
+			radius: 88,
+			inner: 52
+		};
+		/** The heatmap's grid geometry: a fixed half-year block at settings scale. */
+		const HEAT = {
+			cell: 13,
+			gap: 3,
+			weeks: 26
+		};
+		/** The heatmap's shades, from "a little" to "the busiest day", tinted like the first curve. */
+		const HEAT_SHADES = [
+			"#5B8FF9",
+			"#4a78e0",
+			"#3c62c4",
+			"#2f4da6"
+		];
+		/** Every bucket summed — the measure both charts and the table sort on. */
+		function total(buckets) {
+			return buckets.uncachedInputTokens + buckets.outputTokens + buckets.cacheReadTokens + buckets.cacheWriteTokens;
+		}
+		/** One model's curve: the path across the days, and a point at each day. */
+		function linePoints(values, xs, y) {
+			return values.map((value, index) => `${String(xs[index])},${String(y(value))}`).join(" ");
+		}
+		/**
+		* One ring segment.
+		*
+		* A segment covering the whole circle needs its own spelling: its start and end
+		* points coincide, and an arc between coincident points draws nothing — which
+		* is exactly what a reader with one model would see. The full turn is two half
+		* turns, outer and inner wound in opposite directions so the middle stays open.
+		*/
+		function ringPath(start, end) {
+			const { size, radius, inner } = PIE;
+			const cx = size / 2;
+			const cy = size / 2;
+			const at = (r, angle) => [cx + r * Math.cos(angle), cy + r * Math.sin(angle)];
+			if (end - start >= Math.PI * 2 - 1e-6) return `${`M${String(cx)},${String(cy - radius)} A${String(radius)},${String(radius)} 0 1 1 ${String(cx)},${String(cy + radius)} A${String(radius)},${String(radius)} 0 1 1 ${String(cx)},${String(cy - radius)} Z`} ${`M${String(cx)},${String(cy - inner)} A${String(inner)},${String(inner)} 0 1 0 ${String(cx)},${String(cy + inner)} A${String(inner)},${String(inner)} 0 1 0 ${String(cx)},${String(cy - inner)} Z`}`;
+			const [ox1, oy1] = at(radius, start);
+			const [ox2, oy2] = at(radius, end);
+			const [ix2, iy2] = at(inner, end);
+			const [ix1, iy1] = at(inner, start);
+			const large = end - start > Math.PI ? 1 : 0;
+			return `M${String(ox1)},${String(oy1)} A${String(radius)},${String(radius)} 0 ${String(large)} 1 ${String(ox2)},${String(oy2)} L${String(ix2)},${String(iy2)} A${String(inner)},${String(inner)} 0 ${String(large)} 0 ${String(ix1)},${String(iy1)} Z`;
+		}
+		/** The page body. */
+		function UsageSection({ t }) {
+			const [days, setDays] = (0, react.useState)(7);
+			const [summary, setSummary] = (0, react.useState)(void 0);
+			const [error, setError] = (0, react.useState)(void 0);
+			const [busy, setBusy] = (0, react.useState)(false);
+			const [note, setNote] = (0, react.useState)(void 0);
+			/** Sessions the last scan had to skip, so the page can say the totals are partial. */
+			const [skipped, setSkipped] = (0, react.useState)(void 0);
+			const ask = (0, react.useCallback)(async (action, window) => {
+				setBusy(true);
+				setError(void 0);
+				try {
+					const body = await (await fetch(DSHELL_USAGE_PATH, {
+						method: "POST",
+						credentials: "include",
+						headers: { "content-type": "application/json" },
+						body: JSON.stringify({
+							action,
+							days: window
+						})
+					})).json();
+					if ("error" in body) throw new Error(body.error);
+					setSummary(body);
+					setNote(action === "scan" && body.scanned !== void 0 ? t("state.scanned", {
+						sessions: counts.format(body.scanned.sessions),
+						read: counts.format(body.scanned.read),
+						turns: counts.format(body.scanned.turns)
+					}) : void 0);
+					setSkipped(body.scanned !== void 0 && body.scanned.skipped > 0 ? {
+						count: body.scanned.skipped,
+						reason: body.scanned.skipReason
+					} : void 0);
+				} catch (reason) {
+					setError(reason instanceof Error ? reason.message : String(reason));
+				} finally {
+					setBusy(false);
+				}
+			}, [t]);
+			const firstOpen = (0, react.useRef)(true);
+			(0, react.useEffect)(() => {
+				const action = firstOpen.current ? "scan" : "summary";
+				firstOpen.current = false;
+				ask(action, days);
+			}, [ask, days]);
+			const curve = (0, react.useMemo)(() => {
+				if (summary === void 0) return void 0;
+				const daysList = summary.daysList;
+				const models = summary.models;
+				if (daysList.length === 0 || models.length === 0) return void 0;
+				const span = CURVE.width - CURVE.padLeft - CURVE.padRight;
+				const xs = daysList.length === 1 ? [CURVE.padLeft + span / 2] : daysList.map((_, index) => CURVE.padLeft + index * span / (daysList.length - 1));
+				const seriesValues = models.map((model) => daysList.map((day) => summary.byDay.filter((row) => row.day === day && `${row.provider}/${row.model}` === model).reduce((sum, row) => sum + total(row), 0)));
+				const max = Math.max(1, ...seriesValues.flat());
+				const y = (value) => CURVE.height - CURVE.padBottom - value / max * (CURVE.height - CURVE.padTop - CURVE.padBottom);
+				return {
+					xs,
+					y,
+					max,
+					daysList,
+					series: models.map((model, index) => ({
+						model,
+						color: PALETTE[index % PALETTE.length],
+						points: linePoints(seriesValues[index], xs, y),
+						markers: seriesValues[index].map((value, position) => ({
+							x: xs[position],
+							y: y(value)
+						}))
+					}))
+				};
+			}, [summary]);
+			const pie = (0, react.useMemo)(() => {
+				if (summary === void 0) return void 0;
+				const rows = [...summary.totals];
+				const sum = rows.reduce((carry, row) => carry + total(row), 0);
+				if (sum === 0) return void 0;
+				let angle = -Math.PI / 2;
+				return {
+					sum,
+					slices: rows.map((row, index) => {
+						const share = total(row) / sum;
+						const start = angle;
+						const end = angle + share * Math.PI * 2;
+						angle = end;
+						return {
+							row,
+							color: PALETTE[index % PALETTE.length],
+							share,
+							path: ringPath(start, end)
+						};
+					})
+				};
+			}, [summary]);
+			/** The window's headline numbers: what the two charts are shares and shapes of. */
+			const headline = (0, react.useMemo)(() => {
+				if (summary === void 0) return void 0;
+				const sums = summary.totals.reduce((carry, row) => ({
+					uncachedInputTokens: carry.uncachedInputTokens + row.uncachedInputTokens,
+					outputTokens: carry.outputTokens + row.outputTokens,
+					cacheReadTokens: carry.cacheReadTokens + row.cacheReadTokens,
+					cacheWriteTokens: carry.cacheWriteTokens + row.cacheWriteTokens,
+					turns: carry.turns + row.turns
+				}), {
+					uncachedInputTokens: 0,
+					outputTokens: 0,
+					cacheReadTokens: 0,
+					cacheWriteTokens: 0,
+					turns: 0
+				});
+				const billed = sums.uncachedInputTokens + sums.cacheReadTokens;
+				return {
+					...sums,
+					total: total(sums),
+					hitRate: billed === 0 ? void 0 : sums.cacheReadTokens / billed
+				};
+			}, [summary]);
+			/** The calendar grid: a fixed rectangle of weeks, newest day at the bottom right. */
+			const heat = (0, react.useMemo)(() => {
+				if (summary === void 0 || summary.heat.length === 0) return void 0;
+				const columns = heatmapColumns(summary.heat, HEAT.weeks, summary.today);
+				if (columns.length === 0) return void 0;
+				return {
+					columns,
+					truncated: heatmapTruncated(summary.heat, HEAT.weeks, summary.today),
+					busiest: Math.max(...summary.heat.map((day) => day.total))
+				};
+			}, [summary]);
+			return (0, import_jsx_runtime.jsxs)("section", {
+				style: {
+					display: "flex",
+					flexDirection: "column",
+					gap: 20,
+					padding: "4px 2px"
+				},
+				children: [
+					(0, import_jsx_runtime.jsxs)("header", {
+						style: {
+							display: "flex",
+							flexDirection: "column",
+							gap: 6
+						},
+						children: [(0, import_jsx_runtime.jsx)("h2", {
+							style: {
+								margin: 0,
+								fontSize: 16
+							},
+							children: t("title")
+						}), (0, import_jsx_runtime.jsx)("p", {
+							style: {
+								margin: 0,
+								opacity: .7,
+								lineHeight: 1.6
+							},
+							children: t("subtitle")
+						})]
+					}),
+					heat !== void 0 && (0, import_jsx_runtime.jsxs)("figure", {
+						style: {
+							margin: 0,
+							display: "flex",
+							flexDirection: "column",
+							gap: 8
+						},
+						children: [
+							(0, import_jsx_runtime.jsx)("figcaption", {
+								style: { opacity: .8 },
+								children: t("chart.heatmap")
+							}),
+							(0, import_jsx_runtime.jsx)("div", {
+								style: {
+									display: "flex",
+									gap: HEAT.gap,
+									overflowX: "auto"
+								},
+								children: heat.columns.map((column, index) => (0, import_jsx_runtime.jsx)("div", {
+									style: {
+										display: "grid",
+										gridTemplateRows: `repeat(7, ${String(HEAT.cell)}px)`,
+										gap: HEAT.gap
+									},
+									children: column.map((cell, slot) => cell === void 0 ? (0, import_jsx_runtime.jsx)("span", { style: {
+										width: HEAT.cell,
+										height: HEAT.cell,
+										borderRadius: 3,
+										background: "currentColor",
+										opacity: .06
+									} }, `empty-${String(slot)}`) : (0, import_jsx_runtime.jsx)("span", {
+										title: t("chart.heatmapDay", {
+											day: cell.day,
+											total: counts.format(cell.total),
+											turns: counts.format(cell.turns)
+										}),
+										style: {
+											width: HEAT.cell,
+											height: HEAT.cell,
+											borderRadius: 3,
+											background: cell.level === 0 ? "currentColor" : HEAT_SHADES[cell.level - 1],
+											opacity: cell.level === 0 ? .06 : .35 + cell.level / 4 * .65
+										}
+									}, cell.day))
+								}, `column-${String(index)}`))
+							}),
+							(0, import_jsx_runtime.jsxs)("div", {
+								style: {
+									display: "flex",
+									alignItems: "center",
+									gap: 6,
+									fontSize: 11,
+									opacity: .7
+								},
+								children: [
+									(0, import_jsx_runtime.jsx)("span", { children: t("chart.heatmapLess") }),
+									[
+										0,
+										1,
+										2,
+										3,
+										4
+									].map((level) => (0, import_jsx_runtime.jsx)("span", { style: {
+										width: HEAT.cell,
+										height: HEAT.cell,
+										borderRadius: 3,
+										background: level === 0 ? "currentColor" : HEAT_SHADES[level - 1],
+										opacity: level === 0 ? .06 : .35 + level / 4 * .65
+									} }, String(level))),
+									(0, import_jsx_runtime.jsx)("span", { children: t("chart.heatmapMore") }),
+									(0, import_jsx_runtime.jsx)("span", {
+										style: {
+											marginLeft: 6,
+											opacity: .8
+										},
+										children: t("chart.heatmapPeak", { total: counts.format(heat.busiest) })
+									}),
+									heat.truncated ? (0, import_jsx_runtime.jsxs)("span", {
+										style: { opacity: .8 },
+										children: ["· ", t("chart.heatmapTruncated")]
+									}) : null
+								]
+							})
+						]
+					}),
+					(0, import_jsx_runtime.jsxs)("div", {
+						style: {
+							display: "flex",
+							alignItems: "center",
+							gap: 12,
+							flexWrap: "wrap"
+						},
+						children: [
+							(0, import_jsx_runtime.jsx)("span", {
+								style: { opacity: .7 },
+								children: t("range.label")
+							}),
+							RANGES.map((range) => (0, import_jsx_runtime.jsx)("button", {
+								type: "button",
+								onClick: () => {
+									setDays(range.days);
+								},
+								style: {
+									padding: "4px 12px",
+									borderRadius: 999,
+									cursor: "pointer",
+									border: days === range.days ? "1.5px solid currentColor" : "1px solid currentColor",
+									background: "transparent",
+									color: "inherit",
+									fontWeight: days === range.days ? 600 : 400,
+									opacity: days === range.days ? 1 : .55
+								},
+								children: t(range.key)
+							}, range.key)),
+							(0, import_jsx_runtime.jsx)("button", {
+								type: "button",
+								disabled: busy,
+								onClick: () => {
+									ask("scan", days);
+								},
+								style: {
+									marginLeft: "auto",
+									padding: "4px 14px",
+									borderRadius: 6,
+									cursor: busy ? "default" : "pointer"
+								},
+								children: busy ? t("rebuild.busy") : t("rebuild")
+							})
+						]
+					}),
+					summary?.scannedAt != null && (0, import_jsx_runtime.jsxs)("div", {
+						style: {
+							opacity: .6,
+							fontSize: 12
+						},
+						children: [t("state.freshness", { day: summary.scannedAt }), note === void 0 ? "" : ` · ${note}`]
+					}),
+					skipped !== void 0 && (0, import_jsx_runtime.jsxs)("div", {
+						style: {
+							fontSize: 12,
+							lineHeight: 1.6,
+							padding: "6px 10px",
+							borderRadius: 8,
+							color: "var(--dsw-alias-state-warning-primary, #b45309)",
+							background: "var(--dsw-alias-interactive-bg-hover-warning, rgba(245,158,11,.12))"
+						},
+						title: skipped.reason,
+						children: [t("state.skipped", { count: counts.format(skipped.count) }), skipped.reason === void 0 ? null : (0, import_jsx_runtime.jsxs)("span", {
+							style: { opacity: .7 },
+							children: [" · ", shorten(skipped.reason, 120)]
+						})]
+					}),
+					error !== void 0 && (0, import_jsx_runtime.jsx)("div", {
+						style: {
+							color: "var(--dsh-danger, #c0392b)",
+							fontSize: 13
+						},
+						children: t("state.error", { reason: error })
+					}),
+					summary === void 0 && error === void 0 && (0, import_jsx_runtime.jsx)("div", {
+						style: { opacity: .6 },
+						children: t("state.loading")
+					}),
+					headline !== void 0 && headline.turns > 0 && (0, import_jsx_runtime.jsx)("div", {
+						style: {
+							display: "flex",
+							gap: 18,
+							flexWrap: "wrap"
+						},
+						children: [
+							["summary.total", counts.format(headline.total)],
+							["summary.uncached", counts.format(headline.uncachedInputTokens)],
+							["summary.output", counts.format(headline.outputTokens)],
+							["summary.cacheRead", counts.format(headline.cacheReadTokens)],
+							["summary.turns", counts.format(headline.turns)],
+							...headline.hitRate === void 0 ? [] : [["summary.hitRate", `${(headline.hitRate * 100).toFixed(1)}%`]]
+						].map(([key, value]) => (0, import_jsx_runtime.jsxs)("div", {
+							style: {
+								display: "flex",
+								flexDirection: "column",
+								gap: 2
+							},
+							children: [(0, import_jsx_runtime.jsx)("span", {
+								style: {
+									fontSize: 11,
+									opacity: .6
+								},
+								children: t(key)
+							}), (0, import_jsx_runtime.jsx)("span", {
+								style: {
+									fontSize: 18,
+									fontVariantNumeric: "tabular-nums"
+								},
+								children: value
+							})]
+						}, key))
+					}),
+					summary !== void 0 && curve === void 0 && (0, import_jsx_runtime.jsxs)("div", {
+						style: {
+							display: "flex",
+							flexDirection: "column",
+							gap: 4
+						},
+						children: [(0, import_jsx_runtime.jsx)("strong", { children: t("state.empty.title") }), (0, import_jsx_runtime.jsx)("span", {
+							style: { opacity: .7 },
+							children: t("state.empty.body")
+						})]
+					}),
+					curve !== void 0 && (0, import_jsx_runtime.jsxs)("figure", {
+						style: {
+							margin: 0,
+							display: "flex",
+							flexDirection: "column",
+							gap: 8
+						},
+						children: [
+							(0, import_jsx_runtime.jsx)("figcaption", {
+								style: { opacity: .8 },
+								children: t("chart.curve")
+							}),
+							(0, import_jsx_runtime.jsxs)("svg", {
+								viewBox: `0 0 ${String(CURVE.width)} ${String(CURVE.height)}`,
+								style: {
+									width: "100%",
+									height: "auto"
+								},
+								role: "img",
+								children: [
+									[
+										0,
+										.5,
+										1
+									].map((fraction) => {
+										const value = curve.max * fraction;
+										return (0, import_jsx_runtime.jsxs)("g", { children: [(0, import_jsx_runtime.jsx)("line", {
+											x1: CURVE.padLeft,
+											x2: CURVE.width - CURVE.padRight,
+											y1: curve.y(value),
+											y2: curve.y(value),
+											stroke: "currentColor",
+											strokeOpacity: .15,
+											strokeDasharray: fraction === 0 ? void 0 : "3 3"
+										}), (0, import_jsx_runtime.jsx)("text", {
+											x: CURVE.padLeft - 8,
+											y: curve.y(value) + 4,
+											textAnchor: "end",
+											fontSize: 10,
+											fill: "currentColor",
+											fillOpacity: .6,
+											children: counts.format(value)
+										})] }, fraction);
+									}),
+									curve.series.map((series) => (0, import_jsx_runtime.jsxs)("g", { children: [(0, import_jsx_runtime.jsx)("polyline", {
+										points: series.points,
+										fill: "none",
+										stroke: series.color,
+										strokeWidth: 2,
+										strokeLinejoin: "round"
+									}), series.markers.map((marker, position) => (0, import_jsx_runtime.jsx)("circle", {
+										cx: marker.x,
+										cy: marker.y,
+										r: 3,
+										fill: series.color
+									}, `${series.model}-${String(position)}`))] }, series.model)),
+									curve.daysList.map((day, index) => index % Math.ceil(curve.daysList.length / 8) === 0 ? (0, import_jsx_runtime.jsx)("text", {
+										x: curve.xs[index],
+										y: CURVE.height - 6,
+										textAnchor: "middle",
+										fontSize: 10,
+										fill: "currentColor",
+										fillOpacity: .6,
+										children: day.slice(5)
+									}, day) : null)
+								]
+							}),
+							(0, import_jsx_runtime.jsx)(Legend, { series: curve.series })
+						]
+					}),
+					pie !== void 0 && (0, import_jsx_runtime.jsxs)("figure", {
+						style: {
+							margin: 0,
+							display: "flex",
+							gap: 20,
+							alignItems: "center",
+							flexWrap: "wrap"
+						},
+						children: [
+							(0, import_jsx_runtime.jsx)("figcaption", {
+								style: {
+									opacity: .8,
+									alignSelf: "flex-start"
+								},
+								children: t("chart.pie")
+							}),
+							(0, import_jsx_runtime.jsxs)("svg", {
+								viewBox: `0 0 ${String(PIE.size)} ${String(PIE.size)}`,
+								style: {
+									width: PIE.size,
+									height: PIE.size
+								},
+								role: "img",
+								children: [
+									pie.slices.map((slice) => (0, import_jsx_runtime.jsx)("path", {
+										d: slice.path,
+										fill: slice.color,
+										fillOpacity: .85,
+										fillRule: "evenodd"
+									}, `${slice.row.provider}/${slice.row.model}`)),
+									(0, import_jsx_runtime.jsx)("text", {
+										x: PIE.size / 2,
+										y: PIE.size / 2 - 2,
+										textAnchor: "middle",
+										fontSize: 16,
+										fill: "currentColor",
+										children: counts.format(pie.sum)
+									}),
+									(0, import_jsx_runtime.jsx)("text", {
+										x: PIE.size / 2,
+										y: PIE.size / 2 + 14,
+										textAnchor: "middle",
+										fontSize: 10,
+										fill: "currentColor",
+										fillOpacity: .6,
+										children: "tok"
+									})
+								]
+							}),
+							(0, import_jsx_runtime.jsxs)("table", {
+								style: {
+									borderCollapse: "collapse",
+									fontSize: 13
+								},
+								children: [(0, import_jsx_runtime.jsx)("thead", { children: (0, import_jsx_runtime.jsxs)("tr", {
+									style: { opacity: .7 },
+									children: [
+										(0, import_jsx_runtime.jsx)("th", {
+											style: cellStyle("left"),
+											children: t("table.model")
+										}),
+										(0, import_jsx_runtime.jsx)("th", {
+											style: cellStyle("right"),
+											children: t("table.total")
+										}),
+										(0, import_jsx_runtime.jsx)("th", {
+											style: cellStyle("right"),
+											children: t("table.turns")
+										})
+									]
+								}) }), (0, import_jsx_runtime.jsx)("tbody", { children: pie.slices.map((slice) => (0, import_jsx_runtime.jsxs)("tr", { children: [
+									(0, import_jsx_runtime.jsxs)("td", {
+										style: cellStyle("left"),
+										children: [
+											(0, import_jsx_runtime.jsx)("span", { style: {
+												display: "inline-block",
+												width: 8,
+												height: 8,
+												borderRadius: 2,
+												background: slice.color,
+												marginRight: 6
+											} }),
+											slice.row.model,
+											(0, import_jsx_runtime.jsx)("span", {
+												style: {
+													opacity: .5,
+													marginLeft: 6
+												},
+												children: slice.row.provider
+											})
+										]
+									}),
+									(0, import_jsx_runtime.jsxs)("td", {
+										style: cellStyle("right"),
+										children: [
+											counts.format(total(slice.row)),
+											" ",
+											(0, import_jsx_runtime.jsxs)("span", {
+												style: { opacity: .5 },
+												children: [
+													"(",
+													(slice.share * 100).toFixed(1),
+													"%)"
+												]
+											})
+										]
+									}),
+									(0, import_jsx_runtime.jsx)("td", {
+										style: cellStyle("right"),
+										children: counts.format(slice.row.turns)
+									})
+								] }, `${slice.row.provider}/${slice.row.model}`)) })]
+							})
+						]
+					}),
+					pie !== void 0 && (0, import_jsx_runtime.jsxs)("details", { children: [(0, import_jsx_runtime.jsx)("summary", {
+						style: {
+							cursor: "pointer",
+							opacity: .8
+						},
+						children: t("table.title")
+					}), (0, import_jsx_runtime.jsxs)("table", {
+						style: {
+							borderCollapse: "collapse",
+							fontSize: 13,
+							marginTop: 10,
+							width: "100%"
+						},
+						children: [(0, import_jsx_runtime.jsx)("thead", { children: (0, import_jsx_runtime.jsxs)("tr", {
+							style: { opacity: .7 },
+							children: [
+								(0, import_jsx_runtime.jsx)("th", {
+									style: cellStyle("left"),
+									children: t("table.model")
+								}),
+								(0, import_jsx_runtime.jsx)("th", {
+									style: cellStyle("right"),
+									children: t("table.input")
+								}),
+								(0, import_jsx_runtime.jsx)("th", {
+									style: cellStyle("right"),
+									children: t("table.output")
+								}),
+								(0, import_jsx_runtime.jsx)("th", {
+									style: cellStyle("right"),
+									children: t("table.cacheRead")
+								}),
+								(0, import_jsx_runtime.jsx)("th", {
+									style: cellStyle("right"),
+									children: t("table.cacheWrite")
+								}),
+								(0, import_jsx_runtime.jsx)("th", {
+									style: cellStyle("right"),
+									children: t("table.turns")
+								}),
+								(0, import_jsx_runtime.jsx)("th", {
+									style: cellStyle("right"),
+									children: t("table.total")
+								})
+							]
+						}) }), (0, import_jsx_runtime.jsx)("tbody", { children: summary?.totals.map((row, index) => (0, import_jsx_runtime.jsxs)("tr", { children: [
+							(0, import_jsx_runtime.jsxs)("td", {
+								style: cellStyle("left"),
+								children: [
+									(0, import_jsx_runtime.jsx)("span", { style: {
+										display: "inline-block",
+										width: 8,
+										height: 8,
+										borderRadius: 2,
+										background: PALETTE[index % PALETTE.length],
+										marginRight: 6
+									} }),
+									row.model,
+									(0, import_jsx_runtime.jsx)("span", {
+										style: {
+											opacity: .5,
+											marginLeft: 6
+										},
+										children: row.provider
+									})
+								]
+							}),
+							(0, import_jsx_runtime.jsx)("td", {
+								style: cellStyle("right"),
+								children: counts.format(row.uncachedInputTokens)
+							}),
+							(0, import_jsx_runtime.jsx)("td", {
+								style: cellStyle("right"),
+								children: counts.format(row.outputTokens)
+							}),
+							(0, import_jsx_runtime.jsx)("td", {
+								style: cellStyle("right"),
+								children: counts.format(row.cacheReadTokens)
+							}),
+							(0, import_jsx_runtime.jsx)("td", {
+								style: cellStyle("right"),
+								children: counts.format(row.cacheWriteTokens)
+							}),
+							(0, import_jsx_runtime.jsx)("td", {
+								style: cellStyle("right"),
+								children: counts.format(row.turns)
+							}),
+							(0, import_jsx_runtime.jsx)("td", {
+								style: cellStyle("right"),
+								children: counts.format(total(row))
+							})
+						] }, `${row.provider}/${row.model}`)) })]
+					})] })
+				]
+			});
+		}
+		/** The curve's colour key, in the order the lines are drawn. */
+		function Legend({ series }) {
+			return (0, import_jsx_runtime.jsx)("div", {
+				style: {
+					display: "flex",
+					gap: 14,
+					flexWrap: "wrap",
+					fontSize: 12
+				},
+				children: series.map((entry) => (0, import_jsx_runtime.jsxs)("span", {
+					style: {
+						display: "inline-flex",
+						alignItems: "center",
+						gap: 5
+					},
+					children: [(0, import_jsx_runtime.jsx)("span", { style: {
+						width: 8,
+						height: 8,
+						borderRadius: 2,
+						background: entry.color
+					} }), entry.model]
+				}, entry.model))
+			});
+		}
+		/** One table cell's alignment and padding, so the two tables match. */
+		function cellStyle(align) {
+			return {
+				textAlign: align,
+				padding: "3px 10px 3px 0"
+			};
+		}
+		/**
+		* Shorten a host error for a one-line note.
+		*
+		* A refusal names the session, the reason and the log path — useful, and far too
+		* long to sit in a settings line; the full text stays in the note's `title`.
+		*/
+		function shorten(text, limit) {
+			return text.length <= limit ? text : `${text.slice(0, limit)}…`;
+		}
+		//#endregion
+		//#region lib/client/nav-icon.js
+		/**
+		* The usage entry's own icon in the settings navigation.
+		*
+		* dsh's settings shell picks a nav icon from a map of the section ids IT ships
+		* (`account`, `models`, `plugins`, …) and draws a generic gear for anything
+		* else, and rc.2's `settings.section` seat carries no icon of its own — so a
+		* contributed section cannot ask for one and ours read as "some settings".
+		*
+		* Hence the one DOM patch in this package: find our own row by the label we
+		* registered, and put a gauge where the gear was. It is the same technique
+		* dshell's sidebar section uses (and the artwork is copied verbatim from
+		* `@deepseek-ai/dsh-client-ui-primitives`, medium weight, 16 viewBox, 1.3px
+		* stroke) because a surface mounted into a node dsh owns cannot render React
+		* components into it.
+		*
+		* The row is re-created whenever the dialog opens, so a MutationObserver
+		* watches for it; the patch is idempotent (it re-checks the label and a marker
+		* attribute) and only touches the svg node React will not write to again.
+		* Delete this file the day `settings.section` accepts an icon.
+		*/
+		/**
+		* The gauge artwork, verbatim from the primitives package
+		* (`IconGaugeOutlineMedium`): the same three paths, in the same order.
+		*/
+		const GAUGE_PATHS = [
+			{
+				d: "M3.4041 13.096C2.49514 12.187 1.87614 11.0288 1.62537 9.76798C1.37459 8.50716 1.50331 7.20028 1.99525 6.01261C2.48719 4.82494 3.32025 3.80981 4.3891 3.09557C5.45795 2.38134 6.71458 2.00008 8.0001 2C9.28563 2.00008 10.5423 2.38134 11.6111 3.09557C12.68 3.80981 13.513 4.82494 14.005 6.01261C14.4969 7.20028 14.6256 8.50716 14.3748 9.76798C14.1241 11.0288 13.5051 12.187 12.5961 13.096",
+				stroke: true
+			},
+			{
+				d: "M8 8.49994L11.6114 4.88855",
+				stroke: true
+			},
+			{
+				d: "M8 9.75C8.69036 9.75 9.25 9.19036 9.25 8.5C9.25 7.80964 8.69036 7.25 8 7.25C7.30964 7.25 6.75 7.80964 6.75 8.5C6.75 9.19036 7.30964 9.75 8 9.75Z",
+				stroke: false
+			}
+		];
+		const SVG_NS = "http://www.w3.org/2000/svg";
+		/** The marker that says a row already carries our artwork. */
+		const MARKER = "data-dshell-usage-icon";
+		/** One gauge, sized and coloured like the icons beside it. */
+		function gauge(size, className) {
+			const svg = document.createElementNS(SVG_NS, "svg");
+			svg.setAttribute("width", String(size));
+			svg.setAttribute("height", String(size));
+			svg.setAttribute("viewBox", "0 0 16 16");
+			svg.setAttribute("fill", "none");
+			svg.setAttribute("stroke-width", "1.3");
+			svg.setAttribute("aria-hidden", "true");
+			if (className !== null) svg.setAttribute("class", className);
+			for (const spec of GAUGE_PATHS) {
+				const path = document.createElementNS(SVG_NS, "path");
+				path.setAttribute("d", spec.d);
+				if (spec.stroke) path.setAttribute("stroke", "currentColor");
+				else path.setAttribute("fill", "currentColor");
+				svg.append(path);
+			}
+			return svg;
+		}
+		/**
+		* Keep the settings navigation's usage row drawn with the gauge.
+		*
+		* @param label - the section label as the shell renders it, in the live locale.
+		* @returns the disposer that stops watching.
+		*/
+		function watchUsageNavIcon(label) {
+			if (typeof document === "undefined") return () => {};
+			const patch = () => {
+				for (const dialog of document.querySelectorAll("[role=\"dialog\"]")) for (const row of dialog.querySelectorAll("nav button")) {
+					if ((row.textContent?.trim() ?? "") !== label()) continue;
+					const svg = row.querySelector("svg");
+					if (svg === null || svg.getAttribute(MARKER) !== null) continue;
+					const replacement = gauge(Number(svg.getAttribute("width") ?? 16) || 16, svg.getAttribute("class"));
+					replacement.setAttribute(MARKER, "");
+					svg.replaceWith(replacement);
+				}
+			};
+			patch();
+			const observer = new MutationObserver(() => {
+				patch();
+			});
+			observer.observe(document.body, {
+				childList: true,
+				subtree: true
+			});
+			return () => {
+				observer.disconnect();
+			};
+		}
+		//#endregion
+		//#region lib/client/index.js
+		/**
+		* The usage page's client face: the locale dictionaries and the Settings
+		* navigation row that mounts the page.
+		*
+		* `settings.section` is the seat dsh's own Plugins page uses, so this page is a
+		* peer of it rather than a tab inside it — the charts want the full settings
+		* column, and a reader looking for "what did this cost" looks in the
+		* navigation, not under a plugin list.
+		*/
+		/** The locale namespace, matching the key `locales.ts` declares. */
+		const NS = "dshellUsage";
+		const name = "@nexus-aethra/dshell-usage/client";
+		const inject = ["slots", "locale"];
+		function apply(ctx) {
+			const t = ctx.locale.bind(NS);
+			ctx.effect(() => ctx.locale.register(NS, {
+				zh,
+				en
+			}), "dshell-usage: dictionaries");
+			ctx.slots.inject("settings.section", () => ctx.slots.register({
+				name: "settings.section",
+				id: "usage",
+				order: 40,
+				label: () => t("nav"),
+				locale: NS
+			}, UsageSection));
+			ctx.effect(() => watchUsageNavIcon(() => t("nav")), "dshell-usage: navigation icon");
+		}
+		//#endregion
+		exports.apply = apply;
+		exports.inject = inject;
+		exports.name = name;
+		return module.exports;
+	}
+});
+
+//# sourceMappingURL=client.js.map