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

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 react_jsx_runtime = require("react/jsx-runtime");
 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]);
@@ -16,6 +16,53 @@ function installStyles(css) {
 	document.head.append(style);
 	return () => style.remove();
 }
+// ../../tools/ui/src/button-picker.tsx
+function ButtonPicker({ label, value, items, onChange, disabled = false, menuClassName, compact, ...buttonProps }) {
+	const [open, setOpen] = (0, react.useState)(false);
+	(0, react.useEffect)(() => {
+		if (disabled) setOpen(false);
+	}, [disabled]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Menu, {
+		open: open && !disabled,
+		portal: true,
+		compact,
+		className: menuClassName,
+		selectedId: value,
+		items,
+		onClose: () => setOpen(false),
+		onSelect: (id) => {
+			setOpen(false);
+			const item = items.find((item) => item.id === id && !item.disabled);
+			if (!disabled && item) onChange(item.id);
+		},
+		anchor: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_deepseek_ai_dsh_client_ui_primitives.Button, {
+			...buttonProps,
+			type: "button",
+			"aria-label": label,
+			"aria-haspopup": "menu",
+			"aria-expanded": open && !disabled,
+			disabled,
+			onClick: () => setOpen((current) => !current),
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: items.find((item) => item.id === value)?.label }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconChevronDownOutlineRegular, { "aria-hidden": "true" })]
+		})
+	});
+}
+// ../../tools/ui/src/page.tsx
+function PluginPage({ children, className = "", contentClassName = "" }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: `dsh-plugin-page ${className}`,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: `dsh-plugin-page-content ${contentClassName}`,
+			children
+		})
+	});
+}
+// ../../tools/ui/src/page-styles.ts
+const pageStyles = `
+.dsh-plugin-page { box-sizing: border-box; height: 100%; min-height: 0; overflow: auto; padding: 24px; padding-inline-start: max(24px, var(--dsh-frame-leading-clearance, 0px)); }
+.dsh-plugin-page-content { max-width: 960px; margin: 0 auto; }
+.dsh-plugin-page h1 { margin: 0 0 24px; font-size: 20px; line-height: 28px; font-weight: 500; }
+`;
 // src/copy.ts
 const copy = {
 	en: {
@@ -39,6 +86,16 @@ const copy = {
 		daily: "Daily tokens",
 		recent: "Daily tokens · last 30 days",
 		models: "By provider / model",
+		requests: "Model call log",
+		requestScope: "Most recent 100 settled calls in this period, newest first. Times are settlement times. Retries are separate calls. Request and response bodies are not shown.",
+		time: "Recorded at",
+		session: "Session",
+		status: "Status",
+		success: "Succeeded",
+		failure: "Failed",
+		interrupted: "Interrupted",
+		unknownStatus: "Unconfirmed",
+		notReported: "Not reported",
 		unknown: "Unknown",
 		updated: "Updated",
 		unreported: "Calls without token counts",
@@ -67,6 +124,16 @@ const copy = {
 		daily: "일별 토큰",
 		recent: "일별 토큰 · 최근 30일",
 		models: "제공자 / 모델별",
+		requests: "모델 호출 로그",
+		requestScope: "선택한 기간에 기록이 확정된 최근 100건을 최신순으로 표시합니다. 시각은 기록 확정 시각이며, 재시도는 각각 표시합니다. 요청·응답 본문은 표시하지 않습니다.",
+		time: "기록 시각",
+		session: "세션",
+		status: "상태",
+		success: "성공",
+		failure: "실패",
+		interrupted: "중단",
+		unknownStatus: "미확정",
+		notReported: "미보고",
 		unknown: "알 수 없음",
 		updated: "갱신 시각",
 		unreported: "토큰 수가 보고되지 않은 호출",
@@ -95,6 +162,16 @@ const copy = {
 		daily: "每日令牌数",
 		recent: "每日令牌数 · 最近 30 天",
 		models: "按提供方 / 模型",
+		requests: "模型调用日志",
+		requestScope: "按时间倒序显示所选时间范围内最近 100 次已结算调用。时间为记录结算时间，重试单独列出。不显示请求和响应正文。",
+		time: "记录时间",
+		session: "会话",
+		status: "状态",
+		success: "成功",
+		failure: "失败",
+		interrupted: "已中断",
+		unknownStatus: "未确认",
+		notReported: "未报告",
 		unknown: "未知",
 		updated: "更新时间",
 		unreported: "未报告令牌数的调用",
@@ -115,10 +192,7 @@ const inject = [
 	"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; }
-.dsh-usage h1 { margin: 0 0 24px; font-size: 20px; line-height: 28px; font-weight: 500; }
+const styles = `${pageStyles}
 .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; }
@@ -146,6 +220,13 @@ const styles = `
 .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-calls { list-style: none; margin: 0; padding: 0 12px; max-height: 520px; overflow: auto; border: .5px solid var(--dsw-alias-border-l2); border-radius: 8px; }
+.dsh-usage-calls: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-calls .dsh-usage-model:last-child { border-bottom: none; }
+.dsh-usage-calls dl { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+.dsh-usage-call-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 6px; }
+.dsh-usage-call-status { flex: none; font-size: 12px; }
+.dsh-usage-call-status[data-status=failure] { color: var(--dsw-alias-state-error-primary, #b54424); }
 .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)); }
@@ -160,23 +241,34 @@ 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, {
@@ -239,31 +331,22 @@ function Usage({ ctx }) {
 			/* @__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),
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ButtonPicker, {
+					variant: "outline",
+					label: text.period,
+					value: 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, {})]
-					})
+					onChange: (id) => setPeriod(Number(id))
 				}), /* @__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),
+					onClick: () => {
+						refreshRequested.current = true;
+						setRefresh((value) => value + 1);
+					},
 					children: busy ? text.refreshing : text.refresh
 				})]
 			}),
@@ -281,8 +364,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 +424,62 @@ 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.requests }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "dsh-usage-muted",
+						children: text.requestScope
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("ol", {
+						className: "dsh-usage-calls",
+						tabIndex: 0,
+						"aria-label": text.requests,
+						children: view.calls.map((call) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
+							className: "dsh-usage-model",
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: "dsh-usage-call-meta",
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("time", {
+										className: "dsh-usage-muted",
+										dateTime: new Date(call.time).toISOString(),
+										children: [
+											text.time,
+											":",
+											" ",
+											new Intl.DateTimeFormat(locale.active, {
+												dateStyle: "medium",
+												timeStyle: "medium",
+												timeZone: view.timeZone
+											}).format(call.time)
+										]
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+										className: "dsh-usage-call-status",
+										"data-status": call.status,
+										children: [
+											text.status,
+											": ",
+											text[call.status]
+										]
+									})]
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [
+									call.provider || text.unknown,
+									" / ",
+									call.model || text.unknown
+								] }),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: "dsh-usage-muted",
+									children: [
+										text.session,
+										": ",
+										call.session
+									]
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("dl", { children: ["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: call.unreported ? text.notReported : number.format(call[key]) })] }, key)) })
+							]
+						}, JSON.stringify([call.session, call.seq])))
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", { children: text.models }),
 					view.models.map((row) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -348,8 +490,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", {
@@ -387,10 +535,7 @@ function apply(ctx) {
 		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 }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PluginPage, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Usage, { ctx }) })));
 	ctx.slots.inject("sidebar.panellist", () => ctx.slots.register({
 		name: "sidebar.panellist",
 		id: name,

package/dist/index.js

@@ -77,6 +77,7 @@ function apply(ctx) {
 				const view = {
 					totals: empty(),
 					models: [],
+					calls: [],
 					days: [],
 					sessions: 0,
 					unreadable: 0,
@@ -121,6 +122,20 @@ function apply(ctx) {
 								const before = row.total;
 								add(row, usage);
 								add(view.totals, usage);
+								const finish = lastAssistantStreamChunk(event.data.stream, "finish")?.reason.kind;
+								const call = {
+									...empty(),
+									session: record.header.id,
+									seq: event.seq,
+									time: event.time,
+									provider: route.provider,
+									model: route.model,
+									status: finish === "error" ? "failure" : finish === "aborted" || event.type === "assistant/message" && event.data.interrupted ? "interrupted" : event.type === "assistant/message" ? "success" : "unknownStatus"
+								};
+								add(call, usage);
+								view.calls.push(call);
+								view.calls.sort((a, b) => b.time - a.time || a.session.localeCompare(b.session) || b.seq - a.seq);
+								if (view.calls.length > 100) view.calls.pop();
 								days.set(day, (days.get(day) ?? 0) + row.total - before);
 								included = true;
 							}

package/package.json

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