@dungsil/dsh-plugin-ui-usage 0.3.1 → 0.4.0

package/dist/client.js

@@ -71,6 +71,13 @@ const copy = {
 		week: "Last 7 days",
 		month: "Last 30 days",
 		all: "All time",
+		custom: "Custom range",
+		startDate: "Start date",
+		endDate: "End date",
+		apply: "Apply",
+		showing: "Showing",
+		rangeHint: "Includes both dates, up to 366 days. Uses your browser time zone.",
+		rangeError: "Enter valid dates in order, no more than 366 days apart including both dates.",
 		refresh: "Refresh",
 		refreshing: "Refreshing…",
 		loading: "Loading usage…",
@@ -109,6 +116,13 @@ const copy = {
 		week: "최근 7일",
 		month: "최근 30일",
 		all: "전체 기간",
+		custom: "사용자 지정",
+		startDate: "시작일",
+		endDate: "종료일",
+		apply: "적용",
+		showing: "조회 중인 기간",
+		rangeHint: "시작일과 종료일을 포함해 최대 366일까지 조회합니다. 브라우저 시간대를 사용합니다.",
+		rangeError: "시작일과 종료일을 올바르게 입력해 주세요. 종료일은 시작일과 같거나 늦어야 하며, 두 날짜를 포함해 366일 이내여야 합니다.",
 		refresh: "새로고침",
 		refreshing: "새로고침 중…",
 		loading: "사용량을 불러오는 중입니다…",
@@ -147,6 +161,13 @@ const copy = {
 		week: "最近 7 天",
 		month: "最近 30 天",
 		all: "全部时间",
+		custom: "自定义范围",
+		startDate: "开始日期",
+		endDate: "结束日期",
+		apply: "应用",
+		showing: "当前查询范围",
+		rangeHint: "包含起止日期，最多 366 天。使用浏览器时区。",
+		rangeError: "请输入有效且顺序正确的日期，包含起止日期的范围不得超过 366 天。",
 		refresh: "刷新",
 		refreshing: "正在刷新…",
 		loading: "正在加载用量…",
@@ -184,6 +205,16 @@ const localizedCopy = (language) => copy[language.startsWith("ko") ? "ko" : lang
 // src/protocol.ts
 const channel = "/api";
 const method = "dungsil-usage/describe";
+function isValidDateRange(startDate, endDate) {
+	const parse = (value) => {
+		if (!/^\d{4}-\d{2}-\d{2}$/.test(value)) return NaN;
+		const time = Date.parse(`${value}T00:00:00Z`);
+		return Number.isFinite(time) && new Date(time).toISOString().slice(0, 10) === value ? time : NaN;
+	};
+	const start = parse(startDate);
+	const inclusiveDays = (parse(endDate) - start) / 864e5 + 1;
+	return inclusiveDays >= 1 && inclusiveDays <= 366;
+}
 // src/client.tsx
 const name = "dungsil-ui-usage";
 const inject = [
@@ -192,10 +223,20 @@ const inject = [
 	"slots"
 ];
 const cachedViews = /* @__PURE__ */ new WeakMap();
+const savedPeriods = /* @__PURE__ */ new WeakMap();
+function localDay(offset = 0) {
+	const date = /* @__PURE__ */ new Date();
+	date.setDate(date.getDate() + offset);
+	return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`;
+}
 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; }
+.dsh-usage-range { display: flex; align-items: end; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
+.dsh-usage-range label { display: flex; flex: 1 1 160px; min-width: 0; flex-direction: column; gap: 6px; }
+.dsh-usage-range input { width: 100%; min-width: 0; box-sizing: border-box; color-scheme: light dark; }
+.dsh-usage-range-note { flex-basis: 100%; margin: 0; }
 @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; }
@@ -245,10 +286,19 @@ function Usage({ ctx }) {
 		notation: "compact",
 		maximumFractionDigits: 1
 	});
-	const [period, setPeriod] = (0, react.useState)(7);
+	const connection = ctx.get("connection");
+	const [period, setPeriod] = (0, react.useState)(() => savedPeriods.get(connection) ?? { days: 7 });
+	const [editingRange, setEditingRange] = (0, react.useState)(() => !("days" in period));
+	const [startDate, setStartDate] = (0, react.useState)(() => "startDate" in period ? period.startDate : localDay(-6));
+	const [endDate, setEndDate] = (0, react.useState)(() => "endDate" in period ? period.endDate : localDay());
+	const [rangeError, setRangeError] = (0, react.useState)(false);
+	const rangeId = (0, react.useId)();
+	const applyPeriod = (next) => {
+		savedPeriods.set(connection, next);
+		setPeriod(next);
+	};
 	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);
@@ -272,7 +322,7 @@ function Usage({ ctx }) {
 		(async () => {
 			try {
 				const result = await connection.rpc.call(channel, method, {
-					days: period,
+					...period,
 					timeZone
 				}, controller.signal);
 				if (controller.signal.aborted) return;
@@ -314,6 +364,10 @@ function Usage({ ctx }) {
 		{
 			id: "0",
 			label: text.all
+		},
+		{
+			id: "custom",
+			label: text.custom
 		}
 	];
 	const selected = view?.days.find(({ day }) => day === selectedDay);
@@ -334,9 +388,13 @@ function Usage({ ctx }) {
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ButtonPicker, {
 					variant: "outline",
 					label: text.period,
-					value: String(period),
+					value: editingRange || !("days" in period) ? "custom" : String(period.days),
 					items: periods,
-					onChange: (id) => setPeriod(Number(id))
+					onChange: (id) => {
+						setEditingRange(id === "custom");
+						setRangeError(false);
+						if (id !== "custom") applyPeriod({ days: Number(id) });
+					}
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
 					variant: "outline",
 					className: "dsh-usage-refresh",
@@ -350,6 +408,76 @@ function Usage({ ctx }) {
 					children: busy ? text.refreshing : text.refresh
 				})]
 			}),
+			editingRange && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("form", {
+				className: "dsh-usage-range",
+				noValidate: true,
+				onSubmit: (event) => {
+					event.preventDefault();
+					if (!isValidDateRange(startDate, endDate)) {
+						setRangeError(true);
+						return;
+					}
+					setRangeError(false);
+					applyPeriod({
+						startDate,
+						endDate
+					});
+				},
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", { children: [text.startDate, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Input, {
+						type: "date",
+						value: startDate,
+						required: true,
+						"aria-invalid": rangeError,
+						"aria-describedby": `${rangeId}-hint${rangeError ? ` ${rangeId}-error` : ""}`,
+						onChange: (event) => {
+							setStartDate(event.target.value);
+							setRangeError(false);
+						}
+					})] }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", { children: [text.endDate, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Input, {
+						type: "date",
+						value: endDate,
+						required: true,
+						"aria-invalid": rangeError,
+						"aria-describedby": `${rangeId}-hint${rangeError ? ` ${rangeId}-error` : ""}`,
+						onChange: (event) => {
+							setEndDate(event.target.value);
+							setRangeError(false);
+						}
+					})] }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
+						type: "submit",
+						variant: "outline",
+						children: text.apply
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+						id: `${rangeId}-hint`,
+						className: "dsh-usage-muted dsh-usage-range-note",
+						children: [
+							text.rangeHint,
+							" (",
+							timeZone,
+							")"
+						]
+					}),
+					rangeError && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						id: `${rangeId}-error`,
+						className: "dsh-usage-range-note",
+						role: "alert",
+						children: text.rangeError
+					})
+				]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+				className: "dsh-usage-muted",
+				children: [
+					text.showing,
+					":",
+					" ",
+					"days" in period ? periods.find(({ id }) => id === String(period.days))?.label : `${period.startDate} – ${period.endDate}`
+				]
+			}),
 			busy && !view && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
 				role: "status",
 				className: "dsh-usage-status",
@@ -403,7 +531,7 @@ function Usage({ ctx }) {
 					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)("h3", { children: "days" in period && period.days === 0 ? text.recent : text.daily }),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 						className: "dsh-usage-chart",
 						role: "group",

package/dist/index.js

@@ -2,6 +2,16 @@ import { clientRequestSchema } from "@deepseek-ai/dsh-client-connection";
 import { lastAssistantStreamChunk } from "@deepseek-ai/dsh-llm";
 // src/protocol.ts
 const method = "dungsil-usage/describe";
+function isValidDateRange(startDate, endDate) {
+	const parse = (value) => {
+		if (!/^\d{4}-\d{2}-\d{2}$/.test(value)) return NaN;
+		const time = Date.parse(`${value}T00:00:00Z`);
+		return Number.isFinite(time) && new Date(time).toISOString().slice(0, 10) === value ? time : NaN;
+	};
+	const start = parse(startDate);
+	const inclusiveDays = (parse(endDate) - start) / 864e5 + 1;
+	return inclusiveDays >= 1 && inclusiveDays <= 366;
+}
 // src/index.ts
 const name = "dungsil-ui-usage";
 const inject = ["connection", "sessionQuery"];
@@ -46,11 +56,11 @@ function apply(ctx) {
 				const body = clientRequestSchema.parse(await request.json());
 				rpcId = body.rpcId;
 				const input = body.payload;
-				if (body.method !== "dungsil-usage/describe" || !input || ![
+				if (body.method !== "dungsil-usage/describe" || !input || typeof input !== "object" || Array.isArray(input) || typeof input.timeZone !== "string" || ("startDate" in input || "endDate" in input ? "days" in input || typeof input.startDate !== "string" || typeof input.endDate !== "string" || !isValidDateRange(input.startDate, input.endDate) : ![
 					7,
 					30,
 					0
-				].includes(input.days) || typeof input.timeZone !== "string") return Response.json({
+				].includes(input.days))) return Response.json({
 					type: "server-response",
 					rpcId,
 					result: failure("invalid")
@@ -73,7 +83,8 @@ function apply(ctx) {
 				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 end = typeof input.endDate === "string" ? input.endDate : today;
+				const start = typeof input.startDate === "string" ? input.startDate : 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: [],
@@ -106,7 +117,7 @@ function apply(ctx) {
 								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;
+								if (day < start || day > end) 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,
@@ -148,7 +159,7 @@ function apply(ctx) {
 				}));
 				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) {
+				for (let date = Date.parse(`${chartStart}T00:00:00Z`); date <= Date.parse(`${end}T00:00:00Z`); date += 864e5) {
 					const day = new Date(date).toISOString().slice(0, 10);
 					view.days.push({
 						day,

package/package.json

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