@dungsil/dsh-plugin-ui-usage 0.1.1 → 0.2.0

package/dist/client.js

@@ -160,23 +160,35 @@ function Usage({ ctx }) {
 	const locale = useLocaleSnapshot(ctx.locale);
 	const text = localizedCopy(locale.active);
 	const number = new Intl.NumberFormat(locale.active);
+	const tokens = new Intl.NumberFormat(locale.active, {
+		notation: "compact",
+		maximumFractionDigits: 1
+	});
 	const [period, setPeriod] = (0, react.useState)(7);
 	const [periodOpen, setPeriodOpen] = (0, react.useState)(false);
 	const [refresh, setRefresh] = (0, react.useState)(0);
+	const refreshRequested = (0, react.useRef)(false);
 	const connection = ctx.get("connection");
 	const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
 	const cacheKey = JSON.stringify([period, timeZone]);
 	let cache = cachedViews.get(connection);
 	if (!cache) cachedViews.set(connection, cache = /* @__PURE__ */ new Map());
 	const [view, setView] = (0, react.useState)(() => cache.get(cacheKey));
-	const [busy, setBusy] = (0, react.useState)(true);
+	const [busy, setBusy] = (0, react.useState)(() => !cache.has(cacheKey));
 	const [error, setError] = (0, react.useState)(false);
 	const [selectedDay, setSelectedDay] = (0, react.useState)(() => view?.days.at(-1)?.day ?? "");
 	(0, react.useEffect)(() => {
+		const cached = cache.get(cacheKey);
+		setError(false);
+		setView(cached);
+		if (cached && !refreshRequested.current) {
+			setBusy(false);
+			setSelectedDay((day) => cached.days.some((entry) => entry.day === day) ? day : cached.days.at(-1)?.day ?? "");
+			return;
+		}
+		refreshRequested.current = false;
 		const controller = new AbortController();
 		setBusy(true);
-		setError(false);
-		setView(cache.get(cacheKey));
 		(async () => {
 			try {
 				const result = await connection.rpc.call(channel, method, {
@@ -263,7 +275,10 @@ function Usage({ ctx }) {
 					"aria-busy": busy,
 					icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconRefreshOutlineRegular, {}),
 					disabled: busy,
-					onClick: () => setRefresh((value) => value + 1),
+					onClick: () => {
+						refreshRequested.current = true;
+						setRefresh((value) => value + 1);
+					},
 					children: busy ? text.refreshing : text.refresh
 				})]
 			}),
@@ -281,8 +296,12 @@ function Usage({ ctx }) {
 					className: "dsh-usage-summary",
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("dt", { children: text.total }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("dd", {
 						className: "dsh-usage-total",
-						children: number.format(view.totals.total)
-					})] }), metrics.map((key) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("dt", { children: text[key] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("dd", { children: number.format(view.totals[key]) })] }, key))]
+						title: number.format(view.totals.total),
+						children: tokens.format(view.totals.total)
+					})] }), metrics.map((key) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("dt", { children: text[key] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("dd", {
+						title: number.format(view.totals[key]),
+						children: tokens.format(view.totals[key])
+					})] }, key))]
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: "dsh-usage-meta dsh-usage-muted",
@@ -337,7 +356,8 @@ function Usage({ ctx }) {
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 						className: "dsh-usage-detail",
 						"aria-live": "polite",
-						children: selected && `${date(selected.day)} · ${text.total}: ${number.format(selected.total)}`
+						title: selected && number.format(selected.total),
+						children: selected && `${date(selected.day)} · ${text.total}: ${tokens.format(selected.total)}`
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", { children: text.models }),
 					view.models.map((row) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -348,8 +368,14 @@ function Usage({ ctx }) {
 								row.provider || text.unknown,
 								" / ",
 								row.model || text.unknown
-							] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: number.format(row.total) })]
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("dl", { children: ["calls", ...metrics].map((key) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("dt", { children: text[key] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("dd", { children: number.format(row[key]) })] }, key)) })]
+							] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								title: number.format(row.total),
+								children: tokens.format(row.total)
+							})]
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("dl", { children: ["calls", ...metrics].map((key) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("dt", { children: text[key] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("dd", {
+							title: number.format(row[key]),
+							children: key === "calls" ? number.format(row[key]) : tokens.format(row[key])
+						})] }, key)) })]
 					}, JSON.stringify([row.provider, row.model])))
 				] }),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dungsil/dsh-plugin-ui-usage",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "Recorded session token usage dashboard for DeepSeek Harness.",
   "license": "MIT",
   "repository": {