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

package/README.md

@@ -0,0 +1,20 @@
+# Usage Dashboard · 사용량 대시보드
+
+![사용량 대시보드의 라이트 모드와 다크 모드를 꼭짓점 대각선으로 나눈 미리보기](./assets/light-dark-preview.webp)
+
+DSH Web 사이드바에서 세션에 기록된 토큰 사용량, 일별 추이와 제공자·모델별 사용량을 확인합니다. 청구서나 제공자 계정의 잔액 조회 화면은 아닙니다.
+
+위 이미지는 최신 빌드의 실제 플러그인 컴포넌트에 예시 사용량 응답과 공식 DSH 테마·UI primitives를 제공한 독립 브라우저 화면을 각각 캡처해 합성했습니다. 실제 DSH 세션 화면은 아니며, 모델·날짜·수치는 모두 예시입니다.
+
+## 사용 방법
+
+1. DSH 플러그인 설치 화면에서 `@dungsil/dsh-plugin-ui-usage`를 설치하고 활성화합니다.
+2. 사이드바의 **사용량**을 엽니다. **최근 7일**, **최근 30일**, **전체 기간** 중 조회 범위를 선택합니다.
+3. 일별 막대를 눌러 해당 날짜의 토큰 수를 확인합니다. 최신 기록을 다시 읽으려면 **새로고침**을 누릅니다.
+
+## 집계 범위와 호환성
+
+- DSH `0.2.1-rc.5` 이상 `0.3.0` 미만의 Web UI를 지원합니다. 한국어·영어·중국어(간체)와 DSH 테마를 따릅니다.
+- 세션에 기록된 호출만 집계하며 하위 에이전트와 재시도를 포함합니다. 분기에서 상속된 기록은 한 번만 셉니다. 삭제한 세션과 제목 생성 등 세션 밖 호출은 제외합니다.
+- 입력은 캐시 읽기·쓰기를 제외하고, 추론 토큰은 출력에 포함합니다. 제공자가 전체 토큰 수를 보고하면 해당 값을 사용합니다. 토큰 수 미보고 호출이나 읽지 못한 세션은 별도로 알립니다.
+- 날짜는 브라우저 시간대를 사용합니다. 전체 기간을 선택해도 일별 차트는 최근 30일을 표시합니다. 자동 실시간 갱신 대신 새로고침으로 기록을 다시 조회합니다.

package/dist/client.js

@@ -1,8 +1,8 @@
 window.__ModuleLoader__.load({ id: "@dungsil/dsh-plugin-ui-usage", factory(require) { const module = { exports: {} }; const exports = module.exports;
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 let react = require("react");
-let _deepseek_ai_dsh_client_ui_primitives = require("@deepseek-ai/dsh-client-ui-primitives");
 let react_jsx_runtime = require("react/jsx-runtime");
+let _deepseek_ai_dsh_client_ui_primitives = require("@deepseek-ai/dsh-client-ui-primitives");
 // ../../tools/ui/src/client.ts
 function useLocaleSnapshot(locale) {
 	const subscribe = (0, react.useCallback)((listener) => locale.subscribe(listener), [locale]);
@@ -25,6 +25,7 @@ const copy = {
 		month: "Last 30 days",
 		all: "All time",
 		refresh: "Refresh",
+		refreshing: "Refreshing…",
 		loading: "Loading usage…",
 		error: "Could not load usage. Try refreshing.",
 		empty: "No recorded model calls in this period.",
@@ -52,6 +53,7 @@ const copy = {
 		month: "최근 30일",
 		all: "전체 기간",
 		refresh: "새로고침",
+		refreshing: "새로고침 중…",
 		loading: "사용량을 불러오는 중입니다…",
 		error: "사용량을 불러오지 못했습니다. 새로고침해 주세요.",
 		empty: "이 기간에 기록된 모델 호출이 없습니다.",
@@ -79,6 +81,7 @@ const copy = {
 		month: "最近 30 天",
 		all: "全部时间",
 		refresh: "刷新",
+		refreshing: "正在刷新…",
 		loading: "正在加载用量…",
 		error: "无法加载用量，请刷新重试。",
 		empty: "此时间范围内没有记录的模型调用。",
@@ -111,6 +114,7 @@ const inject = [
 	"locale",
 	"slots"
 ];
+const cachedViews = /* @__PURE__ */ new WeakMap();
 const styles = `
 .dsh-usage-page { box-sizing: border-box; height: 100%; overflow: auto; padding: 24px; padding-inline-start: max(24px, var(--dsh-frame-leading-clearance, 0px)); }
 .dsh-usage-page > .dsh-usage { max-width: 960px; margin: 0 auto; }
@@ -118,6 +122,10 @@ const styles = `
 .dsh-usage { container-type: inline-size; overflow-wrap: anywhere; color: var(--dsw-alias-label-primary); font: 14px/22px var(--dsw-font-family, system-ui); }
 .dsh-usage-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
 .dsh-usage-status { display: flex; align-items: center; gap: 6px; }
+@keyframes dsh-usage-spin { to { transform: rotate(360deg); } }
+@media (prefers-reduced-motion: no-preference) {
+  .dsh-usage-refresh[aria-busy=true] svg { animation: dsh-usage-spin .8s linear infinite; }
+}
 .dsh-usage-muted, .dsh-usage dt { color: var(--dsw-alias-label-secondary); font-size: 12px; }
 .dsh-usage h3 { margin: 24px 0 12px; font-size: 14px; font-weight: 500; }
 .dsh-usage dl { margin: 0; }
@@ -152,30 +160,47 @@ 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 [view, setView] = (0, react.useState)();
-	const [busy, setBusy] = (0, react.useState)(true);
-	const [error, setError] = (0, react.useState)(false);
-	const [selectedDay, setSelectedDay] = (0, react.useState)("");
+	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)(() => !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(void 0);
 		(async () => {
 			try {
 				const result = await connection.rpc.call(channel, method, {
 					days: period,
-					timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone
+					timeZone
 				}, controller.signal);
 				if (controller.signal.aborted) return;
 				if (!result.ok) throw new Error("Usage unavailable");
 				const next = result.value;
+				cache.set(cacheKey, next);
 				setView(next);
-				setSelectedDay(next.days.at(-1)?.day ?? "");
+				setSelectedDay((day) => next.days.some((entry) => entry.day === day) ? day : next.days.at(-1)?.day ?? "");
 			} catch {
 				if (!controller.signal.aborted) setError(true);
 			} finally {
@@ -186,6 +211,9 @@ function Usage({ ctx }) {
 	}, [
 		connection,
 		period,
+		timeZone,
+		cache,
+		cacheKey,
 		refresh
 	]);
 	const metrics = [
@@ -243,13 +271,18 @@ function Usage({ ctx }) {
 					})
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
 					variant: "outline",
+					className: "dsh-usage-refresh",
+					"aria-busy": busy,
 					icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconRefreshOutlineRegular, {}),
 					disabled: busy,
-					onClick: () => setRefresh((value) => value + 1),
-					children: text.refresh
+					onClick: () => {
+						refreshRequested.current = true;
+						setRefresh((value) => value + 1);
+					},
+					children: busy ? text.refreshing : text.refresh
 				})]
 			}),
-			busy && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+			busy && !view && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
 				role: "status",
 				className: "dsh-usage-status",
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.StateDot, { state: "ongoing" }), text.loading]
@@ -263,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",
@@ -319,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", {
@@ -330,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.0",
+  "version": "0.2.0",
   "description": "Recorded session token usage dashboard for DeepSeek Harness.",
   "license": "MIT",
   "repository": {
@@ -11,6 +11,7 @@
   "files": [
     "dist",
     "locale",
+    "assets",
     "cordis.patch.yml"
   ],
   "type": "module",
@@ -37,7 +38,9 @@
     "@dungsil/dsh-tsdown": "0.0.0",
     "@dungsil/dsh-ui": "0.0.0",
     "@types/react": "18.3.31",
+    "happy-dom": "21.0.4",
     "react": "18.3.1",
+    "react-dom": "18.3.1",
     "tsdown": "0.23.4"
   },
   "peerDependencies": {