@dungsil/dsh-plugin-ui-usage 0.0.0-stage → 0.1.0

package/cordis.patch.yml

@@ -0,0 +1,3 @@
+- insert:
+    - id: dungsil-ui-usage
+      name: '@dungsil/dsh-plugin-ui-usage'

package/dist/client.js

@@ -0,0 +1,387 @@
+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");
+// ../../tools/ui/src/client.ts
+function useLocaleSnapshot(locale) {
+	const subscribe = (0, react.useCallback)((listener) => locale.subscribe(listener), [locale]);
+	const getSnapshot = (0, react.useCallback)(() => locale.getSnapshot(), [locale]);
+	return (0, react.useSyncExternalStore)(subscribe, getSnapshot);
+}
+/** Each effect owns its sheet, even when another plugin installs the same defaults. */
+function installStyles(css) {
+	const style = document.createElement("style");
+	style.textContent = css;
+	document.head.append(style);
+	return () => style.remove();
+}
+// src/copy.ts
+const copy = {
+	en: {
+		nav: "Usage",
+		period: "Period",
+		week: "Last 7 days",
+		month: "Last 30 days",
+		all: "All time",
+		refresh: "Refresh",
+		loading: "Loading usage…",
+		error: "Could not load usage. Try refreshing.",
+		empty: "No recorded model calls in this period.",
+		total: "Total tokens",
+		input: "Uncached input",
+		output: "Output",
+		cacheRead: "Cache read",
+		cacheWrite: "Cache write",
+		calls: "Model calls",
+		sessions: "Sessions",
+		daily: "Daily tokens",
+		recent: "Daily tokens · last 30 days",
+		models: "By provider / model",
+		unknown: "Unknown",
+		updated: "Updated",
+		unreported: "Calls without token counts",
+		unreadable: "Sessions that could not be read",
+		scope: "Recorded session calls only, including subagents and retries. Forked history is counted once. Deleted sessions and calls outside session logs (such as titles) are excluded. This is not a billing statement.",
+		accounting: "Input excludes cache reads and writes. Reasoning is included in output. Totals use the provider total when available."
+	},
+	ko: {
+		nav: "사용량",
+		period: "기간",
+		week: "최근 7일",
+		month: "최근 30일",
+		all: "전체 기간",
+		refresh: "새로고침",
+		loading: "사용량을 불러오는 중입니다…",
+		error: "사용량을 불러오지 못했습니다. 새로고침해 주세요.",
+		empty: "이 기간에 기록된 모델 호출이 없습니다.",
+		total: "전체 토큰",
+		input: "캐시 제외 입력",
+		output: "출력",
+		cacheRead: "캐시 읽기",
+		cacheWrite: "캐시 쓰기",
+		calls: "모델 호출",
+		sessions: "세션",
+		daily: "일별 토큰",
+		recent: "일별 토큰 · 최근 30일",
+		models: "제공자 / 모델별",
+		unknown: "알 수 없음",
+		updated: "갱신 시각",
+		unreported: "토큰 수가 보고되지 않은 호출",
+		unreadable: "읽지 못한 세션",
+		scope: "서브에이전트와 재시도를 포함하여 세션에 기록된 호출만 집계합니다. 분기한 세션의 복제 기록은 한 번만 집계합니다. 삭제된 세션과 제목 생성 등 세션 외부 호출은 제외하며, 청구 금액을 나타내지는 않습니다.",
+		accounting: "입력에는 캐시 읽기·쓰기를 포함하지 않습니다. 추론 토큰은 출력에 포함합니다. 제공자가 전체 토큰 수를 보고하면 해당 값을 사용합니다."
+	},
+	zh: {
+		nav: "用量",
+		period: "时间范围",
+		week: "最近 7 天",
+		month: "最近 30 天",
+		all: "全部时间",
+		refresh: "刷新",
+		loading: "正在加载用量…",
+		error: "无法加载用量，请刷新重试。",
+		empty: "此时间范围内没有记录的模型调用。",
+		total: "总令牌数",
+		input: "未缓存输入",
+		output: "输出",
+		cacheRead: "缓存读取",
+		cacheWrite: "缓存写入",
+		calls: "模型调用",
+		sessions: "会话",
+		daily: "每日令牌数",
+		recent: "每日令牌数 · 最近 30 天",
+		models: "按提供方 / 模型",
+		unknown: "未知",
+		updated: "更新时间",
+		unreported: "未报告令牌数的调用",
+		unreadable: "无法读取的会话",
+		scope: "仅统计会话中记录的调用，包括子代理和重试。分支继承的历史仅统计一次。不包括已删除的会话或标题生成等会话外调用。这不是账单。",
+		accounting: "输入不含缓存读取和写入，推理令牌已包含在输出中。如提供方报告总令牌数，则使用该值。"
+	}
+};
+const localizedCopy = (language) => copy[language.startsWith("ko") ? "ko" : language.startsWith("zh") ? "zh" : "en"];
+// src/protocol.ts
+const channel = "/api";
+const method = "dungsil-usage/describe";
+// src/client.tsx
+const name = "dungsil-ui-usage";
+const inject = [
+	"connection",
+	"locale",
+	"slots"
+];
+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; }
+.dsh-usage h1 { margin: 0 0 24px; font-size: 20px; line-height: 28px; font-weight: 500; }
+.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; }
+.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; }
+.dsh-usage dd { margin: 4px 0 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
+.dsh-usage-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding: 20px 0; border-bottom: .5px solid var(--dsw-alias-border-l2); }
+.dsh-usage-summary > div:first-child { grid-column: 1 / -1; }
+.dsh-usage-total { font-size: 28px; line-height: 36px; }
+.dsh-usage-meta { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 12px 0; }
+.dsh-usage-chart { display: flex; align-items: stretch; gap: clamp(1px, .5cqi, 4px); height: 120px; border-bottom: .5px solid var(--dsw-alias-border-l2); }
+.dsh-usage-bar { flex: 1; min-width: 0; display: flex; align-items: flex-end; border: none; padding: 0; background: transparent; cursor: pointer; }
+.dsh-usage-bar span { width: 100%; min-height: 2px; border-radius: 3px 3px 0 0; background: var(--dsw-alias-brand-primary-new-colorprimary-new-color); opacity: .55; }
+.dsh-usage-bar[aria-pressed=true] span, .dsh-usage-bar:hover span { opacity: 1; }
+.dsh-usage-bar:focus-visible { outline: var(--dsw-focus-ring-width) solid var(--dsw-focus-ring-color, var(--dsw-alias-state-business-primary)); outline-offset: 2px; }
+.dsh-usage-axis { display: flex; justify-content: space-between; gap: 12px; margin-top: 4px; font-size: 11px; color: var(--dsw-alias-label-secondary); }
+.dsh-usage-detail { min-height: 22px; margin: 8px 0; font-variant-numeric: tabular-nums; }
+.dsh-usage-model { padding: 14px 0; border-bottom: .5px solid var(--dsw-alias-border-l2); }
+.dsh-usage-model-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; overflow-wrap: anywhere; }
+.dsh-usage-model-heading > span:first-child { min-width: 0; }
+.dsh-usage-model-heading > span:last-child { flex: none; font-variant-numeric: tabular-nums; }
+.dsh-usage-model dl { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: 12px; font-size: 12px; }
+.dsh-usage [role=alert] { color: var(--dsw-alias-state-error-primary, #b54424); }
+@container (max-width: 480px) {
+  .dsh-usage-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .dsh-usage-model dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+}
+@container (max-width: 260px) {
+  .dsh-usage-summary, .dsh-usage-model dl { grid-template-columns: minmax(0, 1fr); }
+  .dsh-usage-model-heading { flex-direction: column; gap: 4px; }
+}
+`;
+function Usage({ ctx }) {
+	const locale = useLocaleSnapshot(ctx.locale);
+	const text = localizedCopy(locale.active);
+	const number = new Intl.NumberFormat(locale.active);
+	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 connection = ctx.get("connection");
+	(0, react.useEffect)(() => {
+		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
+				}, controller.signal);
+				if (controller.signal.aborted) return;
+				if (!result.ok) throw new Error("Usage unavailable");
+				const next = result.value;
+				setView(next);
+				setSelectedDay(next.days.at(-1)?.day ?? "");
+			} catch {
+				if (!controller.signal.aborted) setError(true);
+			} finally {
+				if (!controller.signal.aborted) setBusy(false);
+			}
+		})();
+		return () => controller.abort();
+	}, [
+		connection,
+		period,
+		refresh
+	]);
+	const metrics = [
+		"input",
+		"output",
+		"cacheRead",
+		"cacheWrite"
+	];
+	const periods = [
+		{
+			id: "7",
+			label: text.week
+		},
+		{
+			id: "30",
+			label: text.month
+		},
+		{
+			id: "0",
+			label: text.all
+		}
+	];
+	const selected = view?.days.find(({ day }) => day === selectedDay);
+	const maximum = Math.max(1, ...view?.days.map(({ total }) => total) ?? []);
+	const date = (day) => new Intl.DateTimeFormat(locale.active, {
+		month: "short",
+		day: "numeric",
+		timeZone: "UTC"
+	}).format(/* @__PURE__ */ new Date(`${day}T00:00:00Z`));
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+		className: "dsh-usage",
+		"aria-label": text.nav,
+		"aria-busy": busy,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h1", { children: text.nav }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "dsh-usage-toolbar",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Menu, {
+					open: periodOpen,
+					onClose: () => setPeriodOpen(false),
+					selectedId: String(period),
+					items: periods,
+					onSelect: (id) => {
+						setPeriodOpen(false);
+						setPeriod(Number(id));
+					},
+					portal: true,
+					anchor: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_deepseek_ai_dsh_client_ui_primitives.Button, {
+						variant: "outline",
+						"aria-label": text.period,
+						"aria-haspopup": "menu",
+						"aria-expanded": periodOpen,
+						onClick: () => setPeriodOpen((open) => !open),
+						children: [periods.find(({ id }) => id === String(period)).label, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconChevronDownOutlineRegular, {})]
+					})
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
+					variant: "outline",
+					icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconRefreshOutlineRegular, {}),
+					disabled: busy,
+					onClick: () => setRefresh((value) => value + 1),
+					children: text.refresh
+				})]
+			}),
+			busy && /* @__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]
+			}),
+			error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				role: "alert",
+				children: text.error
+			}),
+			view && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("dl", {
+					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))]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "dsh-usage-meta dsh-usage-muted",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [
+						text.calls,
+						": ",
+						number.format(view.totals.calls)
+					] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [
+						text.sessions,
+						": ",
+						number.format(view.sessions)
+					] })]
+				}),
+				view.unreadable > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+					role: "alert",
+					children: [
+						text.unreadable,
+						": ",
+						number.format(view.unreadable)
+					]
+				}),
+				view.totals.unreported > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+					role: "status",
+					children: [
+						text.unreported,
+						": ",
+						number.format(view.totals.unreported)
+					]
+				}),
+				view.totals.calls === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					role: "status",
+					children: text.empty
+				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", { children: period === 0 ? text.recent : text.daily }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "dsh-usage-chart",
+						role: "group",
+						"aria-label": `${text.daily} (${view.timeZone})`,
+						children: view.days.map(({ day, total }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							className: "dsh-usage-bar",
+							"aria-label": `${day}: ${number.format(total)} ${text.total}`,
+							"aria-pressed": day === selectedDay,
+							onClick: () => setSelectedDay(day),
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { style: { height: `${total / maximum * 100}%` } })
+						}, day))
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "dsh-usage-axis",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: date(view.days[0].day) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: date(view.days.at(-1).day) })]
+					}),
+					/* @__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)}`
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", { children: text.models }),
+					view.models.map((row) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "dsh-usage-model",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "dsh-usage-model-heading",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [
+								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)) })]
+					}, JSON.stringify([row.provider, row.model])))
+				] }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+					className: "dsh-usage-muted",
+					children: [
+						text.updated,
+						":",
+						" ",
+						new Intl.DateTimeFormat(locale.active, {
+							dateStyle: "medium",
+							timeStyle: "short",
+							timeZone: view.timeZone
+						}).format(view.updatedAt),
+						" ",
+						"(",
+						view.timeZone,
+						")"
+					]
+				})
+			] }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "dsh-usage-muted",
+				children: text.scope
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "dsh-usage-muted",
+				children: text.accounting
+			})
+		]
+	});
+}
+function apply(ctx) {
+	ctx.effect(() => installStyles(styles), "usage: styles");
+	ctx.slots.inject("main", () => ctx.slots.register({
+		name: "main",
+		key: name,
+		inject: () => ({ ctx })
+	}, ({ ctx }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "dsh-usage-page",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Usage, { ctx })
+	})));
+	ctx.slots.inject("sidebar.panellist", () => ctx.slots.register({
+		name: "sidebar.panellist",
+		id: name,
+		order: 1,
+		label: () => localizedCopy(ctx.locale.getSnapshot().active).nav
+	}, ({ size }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconGaugeOutlineRegular, { size })));
+}
+exports.apply = apply;
+exports.inject = inject;
+exports.name = name;
+
+return module.exports; } });

package/dist/index.js

@@ -0,0 +1,158 @@
+import { clientRequestSchema } from "@deepseek-ai/dsh-client-connection";
+import { lastAssistantStreamChunk } from "@deepseek-ai/dsh-llm";
+// src/protocol.ts
+const method = "dungsil-usage/describe";
+// src/index.ts
+const name = "dungsil-ui-usage";
+const inject = ["connection", "sessionQuery"];
+const empty = () => ({
+	calls: 0,
+	unreported: 0,
+	input: 0,
+	output: 0,
+	cacheRead: 0,
+	cacheWrite: 0,
+	total: 0
+});
+function add(totals, usage) {
+	totals.calls++;
+	if (!usage) {
+		totals.unreported++;
+		return;
+	}
+	totals.input += usage.inputTokens;
+	totals.output += usage.outputTokens;
+	totals.cacheRead += usage.cacheReadTokens ?? 0;
+	totals.cacheWrite += usage.cacheWriteTokens ?? 0;
+	totals.total += usage.totalTokens ?? usage.inputTokens + usage.outputTokens + (usage.cacheReadTokens ?? 0) + (usage.cacheWriteTokens ?? 0);
+}
+function apply(ctx) {
+	ctx.effect(() => ctx.connection.fetch.register({
+		path: `/api/${method}`,
+		methods: ["POST"],
+		requestBody: "buffered",
+		async fetch(request) {
+			let rpcId = "";
+			const failure = (code) => ({
+				ok: false,
+				error: {
+					code,
+					message: "Usage unavailable",
+					details: {}
+				}
+			});
+			let result;
+			try {
+				const body = clientRequestSchema.parse(await request.json());
+				rpcId = body.rpcId;
+				const input = body.payload;
+				if (body.method !== "dungsil-usage/describe" || !input || ![
+					7,
+					30,
+					0
+				].includes(input.days) || typeof input.timeZone !== "string") return Response.json({
+					type: "server-response",
+					rpcId,
+					result: failure("invalid")
+				}, { headers: { "Cache-Control": "no-store" } });
+				let formatter;
+				try {
+					formatter = new Intl.DateTimeFormat("en-CA", {
+						timeZone: input.timeZone,
+						year: "numeric",
+						month: "2-digit",
+						day: "2-digit"
+					});
+				} catch {
+					return Response.json({
+						type: "server-response",
+						rpcId,
+						result: failure("invalid")
+					}, { headers: { "Cache-Control": "no-store" } });
+				}
+				const signal = AbortSignal.any([request.signal, AbortSignal.timeout(6e4)]);
+				const updatedAt = Date.now();
+				const today = formatter.format(updatedAt);
+				const start = input.days === 0 ? "" : (/* @__PURE__ */ new Date(Date.parse(`${today}T00:00:00Z`) - (input.days - 1) * 864e5)).toISOString().slice(0, 10);
+				const view = {
+					totals: empty(),
+					models: [],
+					days: [],
+					sessions: 0,
+					unreadable: 0,
+					updatedAt,
+					timeZone: input.timeZone
+				};
+				const models = /* @__PURE__ */ new Map();
+				const days = /* @__PURE__ */ new Map();
+				const records = await ctx.sessionQuery.listSessions(signal);
+				let index = 0;
+				await Promise.all(Array.from({ length: Math.min(4, records.length) }, async () => {
+					while (index < records.length) {
+						signal.throwIfAborted();
+						const record = records[index++];
+						try {
+							using observation = await ctx.sessionQuery.observeSession(record.header.id, {
+								signal,
+								projectionMode: "none"
+							});
+							let provider = "";
+							let model = "";
+							let included = false;
+							for (const event of observation.events) {
+								if (event.type === "request/context") ({provider, model} = event.data);
+								if (event.type === "request/header") ({provider, model} = event.data.header.config);
+								if (event.seq < observation.inheritedEventCount || event.time > updatedAt) continue;
+								if (event.type !== "assistant/message" && event.type !== "assistant/attempt") continue;
+								const day = formatter.format(event.time);
+								if (day < start || day > today) continue;
+								const usage = event.type === "assistant/message" ? event.data.usage : lastAssistantStreamChunk(event.data.stream, "usage")?.usage;
+								const route = event.type === "assistant/message" ? event.data.message.source : {
+									provider,
+									model
+								};
+								const key = JSON.stringify([route.provider, route.model]);
+								let row = models.get(key);
+								if (!row) models.set(key, row = {
+									provider: route.provider,
+									model: route.model,
+									...empty()
+								});
+								const before = row.total;
+								add(row, usage);
+								add(view.totals, usage);
+								days.set(day, (days.get(day) ?? 0) + row.total - before);
+								included = true;
+							}
+							if (included) view.sessions++;
+						} catch {
+							signal.throwIfAborted();
+							view.unreadable++;
+						}
+					}
+				}));
+				view.models = [...models.values()].sort((a, b) => b.total - a.total || a.provider.localeCompare(b.provider) || a.model.localeCompare(b.model));
+				const chartStart = start || (/* @__PURE__ */ new Date(Date.parse(`${today}T00:00:00Z`) - 25056e5)).toISOString().slice(0, 10);
+				for (let date = Date.parse(`${chartStart}T00:00:00Z`); date <= Date.parse(`${today}T00:00:00Z`); date += 864e5) {
+					const day = new Date(date).toISOString().slice(0, 10);
+					view.days.push({
+						day,
+						total: days.get(day) ?? 0
+					});
+				}
+				result = {
+					ok: true,
+					value: view
+				};
+			} catch {
+				result = failure("unavailable");
+			}
+			return Response.json({
+				type: "server-response",
+				rpcId,
+				result
+			}, { headers: { "Cache-Control": "no-store" } });
+		}
+	}), "usage: owner-only session accounting");
+}
+export { apply, inject, name };

package/locale/en.json

@@ -0,0 +1,6 @@
+{
+  "meta": {
+    "title": "Usage Dashboard",
+    "description": "View recorded session tokens, daily activity, and model usage from the sidebar."
+  }
+}

package/locale/ko.json

@@ -0,0 +1,6 @@
+{
+  "meta": {
+    "title": "사용량 대시보드",
+    "description": "사이드바에서 세션에 기록된 토큰, 일별 추이, 모델별 사용량을 확인합니다."
+  }
+}

package/locale/zh.json

@@ -0,0 +1,6 @@
+{
+  "meta": {
+    "title": "用量仪表盘",
+    "description": "从侧边栏查看会话记录的令牌、每日趋势和模型用量。"
+  }
+}

package/package.json

@@ -1,6 +1,95 @@
 {
   "name": "@dungsil/dsh-plugin-ui-usage",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.0",
+  "description": "Recorded session token usage dashboard for DeepSeek Harness.",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/dungsil/dsh-plugins.git",
+    "directory": "packages/ui-usage"
+  },
+  "files": [
+    "dist",
+    "locale",
+    "cordis.patch.yml"
+  ],
+  "type": "module",
+  "exports": {
+    ".": "./dist/index.js",
+    "./client": "./dist/client.js",
+    "./package.json": "./package.json",
+    "./locale/*.json": "./locale/*.json"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "@deepseek-ai/cordis": "4.0.5",
+    "@deepseek-ai/dsh-client-connection": "0.2.1-rc.5",
+    "@deepseek-ai/dsh-client-locale": "0.2.1-rc.5",
+    "@deepseek-ai/dsh-client-ui-layout": "0.2.1-rc.5",
+    "@deepseek-ai/dsh-client-ui-renderer": "0.2.1-rc.5",
+    "@deepseek-ai/dsh-client-ui-sidebar": "0.2.1-rc.5",
+    "@deepseek-ai/dsh-credentials-local": "0.2.1-rc.5",
+    "@deepseek-ai/dsh-llm": "0.2.1-rc.5",
+    "@deepseek-ai/dsh-session-query": "0.2.1-rc.5",
+    "@dungsil/dsh-tsconfig": "0.0.0",
+    "@dungsil/dsh-tsdown": "0.0.0",
+    "@dungsil/dsh-ui": "0.0.0",
+    "@types/react": "18.3.31",
+    "react": "18.3.1",
+    "tsdown": "0.23.4"
+  },
+  "peerDependencies": {
+    "@deepseek-ai/dsh-client-connection": "^0.2.1-rc.5",
+    "@deepseek-ai/dsh-client-ui-primitives": "^0.2.1-rc.5",
+    "@deepseek-ai/dsh-llm": "^0.2.1-rc.5",
+    "@deepseek-ai/dsh-session-query": "^0.2.1-rc.5"
+  },
+  "engines": {
+    "dsh": "^0.2.1-rc.5",
+    "node": ">=24.9.0"
+  },
+  "dsh": {
+    "bundle": {
+      "patch": "./cordis.patch.yml"
+    },
+    "client": {
+      "platform": "web",
+      "immediately": true,
+      "inject": [
+        "@deepseek-ai/dsh-client-connection",
+        "@deepseek-ai/dsh-client-locale",
+        "@deepseek-ai/dsh-client-ui-renderer",
+        "@deepseek-ai/dsh-client-ui-layout",
+        "@deepseek-ai/dsh-client-ui-sidebar"
+      ]
+    }
+  },
+  "market": {
+    "order": 12,
+    "title": {
+      "en": "Usage Dashboard",
+      "ko": "사용량 대시보드",
+      "zh": "用量仪表盘"
+    },
+    "description": {
+      "en": "View recorded session tokens, daily activity, and model usage from the sidebar.",
+      "ko": "사이드바에서 세션에 기록된 토큰, 일별 추이, 모델별 사용량을 확인합니다.",
+      "zh": "从侧边栏查看会话记录的令牌、每日趋势和模型用量。"
+    },
+    "category": "ui",
+    "labels": [],
+    "keywords": [
+      "usage",
+      "tokens",
+      "dashboard",
+      "models"
+    ]
+  },
+  "scripts": {
+    "build": "tsdown",
+    "typecheck": "tsc --noEmit",
+    "test": "node --test test/*.test.mjs"
+  }
 }

package/README.md

@@ -1,3 +0,0 @@
-# Temporary Holding Version
-
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.