dsh-workbuddy-connect 0.7.0 → 0.7.2

package/lib/client.js

@@ -97,7 +97,8 @@ window.__ModuleLoader__.load({
 			statusPath: WORKBUDDY_STATUS_PATH,
 			probePath: WORKBUDDY_PROBE_PATH,
 			appName: "WorkBuddy",
-			unavailableKey: "assistUnavailableCN"
+			unavailableKey: "assistUnavailableCN",
+			creditPrefix: "WB."
 		};
 		/** International WorkBuddy AI. */
 		const AI_CARD_VARIANT = {
@@ -108,7 +109,8 @@ window.__ModuleLoader__.load({
 			statusPath: WORKBUDDY_AI_STATUS_PATH,
 			probePath: WORKBUDDY_AI_PROBE_PATH,
 			appName: "WorkBuddy AI",
-			unavailableKey: "assistUnavailableAI"
+			unavailableKey: "assistUnavailableAI",
+			creditPrefix: "WB AI."
 		};
 		/** Both cards, in display order. */
 		const CARD_VARIANTS = [CN_CARD_VARIANT, AI_CARD_VARIANT];
@@ -304,6 +306,31 @@ window.__ModuleLoader__.load({
 			...bodyStyle$1,
 			color: "var(--dsw-alias-state-error-primary)"
 		};
+		const noticeStyle = {
+			display: "flex",
+			flexDirection: "column",
+			gap: 2,
+			padding: "10px 12px",
+			borderRadius: 8,
+			border: "1px solid",
+			fontSize: 13,
+			lineHeight: "18px"
+		};
+		const noticeDetailStyle = {
+			fontSize: 12,
+			lineHeight: "16px",
+			opacity: .8
+		};
+		const urgentNoticeStyle = {
+			background: "var(--dsw-alias-state-warn-tertiary, #fff4e5)",
+			borderColor: "var(--dsw-alias-state-warn-primary, #d97706)",
+			color: "var(--dsw-alias-label-primary)"
+		};
+		const warnNoticeStyle = {
+			background: "var(--dsw-alias-bg-l2, #f6f7f9)",
+			borderColor: "var(--dsw-alias-border-l2)",
+			color: "var(--dsw-alias-label-primary)"
+		};
 		const quotaListStyle = {
 			display: "flex",
 			flexDirection: "column",
@@ -563,6 +590,54 @@ window.__ModuleLoader__.load({
 			return time;
 		}
 		/**
+		* A warning that credit is about to lapse.
+		*
+		* The total alone cannot express this: a package expiring in an hour and one
+		* expiring next month both render as "500 credit", so a user watching only the
+		* total loses the first one silently. The banner names the amount, the package
+		* count and the soonest expiry, and escalates 7d → 24h.
+		*
+		* Only future horizons are covered: the billing query behind this returns
+		* `valid` + `usedUp` packages from the current time forward, so an
+		* already-lapsed package never reaches here.
+		*
+		* Renders nothing when the upstream reported no end times at all — absence of
+		* expiry data is not evidence that nothing expires, so the component stays
+		* silent rather than reassuring.
+		*/
+		function ExpiryNotice({ expiry, t }) {
+			const { within24h, within7d } = expiry;
+			let message;
+			let soonest;
+			let tone;
+			if (within24h.packages > 0) {
+				message = t("expiryWarningSoon", {
+					total: formatNumber(Math.round(within24h.total * 100) / 100),
+					packages: String(within24h.packages)
+				});
+				soonest = within24h.earliestEndTimeMs;
+				tone = urgentNoticeStyle;
+			} else if (within7d.packages > 0) {
+				message = t("expiryWarningWeek", {
+					total: formatNumber(Math.round(within7d.total * 100) / 100),
+					packages: String(within7d.packages)
+				});
+				soonest = within7d.earliestEndTimeMs;
+				tone = warnNoticeStyle;
+			} else return null;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				style: {
+					...noticeStyle,
+					...tone
+				},
+				role: "status",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: message }), soonest === void 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					style: noticeDetailStyle,
+					children: t("expiryExpiresAt", { time: formatTime(soonest) })
+				})]
+			});
+		}
+		/**
 		* One billing package as a labeled progress bar.
 		*
 		* A package whose allowance the upstream never reported (`size` not positive)
@@ -1288,19 +1363,26 @@ window.__ModuleLoader__.load({
 								children: [
 									status.credits === void 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 										style: quotaListStyle,
-										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-											style: rowStyle$1,
-											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
-												style: quotaTitleStyle,
-												children: t("creditsHeading")
-											}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-												style: bodyStyle$1,
-												children: status.credits.unlimited === true ? t("creditsTotalUnlimited") : t("creditsTotal", { total: formatNumber(status.credits.total) })
-											})]
-										}), status.credits.cycleResetTime === void 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-											style: descriptionStyle,
-											children: t("cycleResetAt", { time: formatCycleReset(status.credits.cycleResetTime) })
-										})]
+										children: [
+											status.credits.expiry === void 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ExpiryNotice, {
+												expiry: status.credits.expiry,
+												t
+											}),
+											/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+												style: rowStyle$1,
+												children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+													style: quotaTitleStyle,
+													children: t("creditsHeading")
+												}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+													style: bodyStyle$1,
+													children: status.credits.unlimited === true ? t("creditsTotalUnlimited") : t("creditsTotal", { total: formatNumber(status.credits.total) })
+												})]
+											}),
+											status.credits.cycleResetTime === void 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+												style: descriptionStyle,
+												children: t("cycleResetAt", { time: formatCycleReset(status.credits.cycleResetTime) })
+											})
+										]
 									}),
 									status.creditsError === void 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 										style: errorStyle,
@@ -1410,6 +1492,19 @@ window.__ModuleLoader__.load({
 		*   `window.confirm`. Probing spends real credit, so a confirmation stays — but
 		*   it belongs next to the thing it acts on, sized to one line plus two small
 		*   buttons.
+		* - a **credit badge** (#99): the account's remaining balance as one tiny
+		*   annotation on the same seat, read from the same status document as the
+		*   probe entry. Hidden whenever the document has no answer (signed-out,
+		*   error, missing `credits`); zero is a real balance and is shown, `unlimited`
+		*   renders as ∞ rather than as 0. The badge is why the control stays mounted
+		*   for non-candidate models: the probe entry alone is what disappears for
+		*   them.
+		* - a **↻ beside the badge** is the only re-read after the mount fetch: there
+		*   is no interval and no focus polling, because every status GET also queries
+		*   billing upstream and the balance should not refresh behind the user's
+		*   back. A failed manual read hides the balance rather than passing the old
+		*   one off as current; a click also picks up probes started elsewhere, which
+		*   is the reconcile the removed poll used to provide.
 		*
 		* @module dsh-workbuddy-connect/client/probe-control
 		*/
@@ -1423,8 +1518,6 @@ window.__ModuleLoader__.load({
 		function cardVariantFor(provider) {
 			return CARD_VARIANTS.find((card) => card.id === provider);
 		}
-		/** How often the control re-checks state when the window regains focus. */
-		const RECONCILE_MS = 6e4;
 		const wrapperStyle = {
 			display: "inline-flex",
 			position: "relative",
@@ -1457,6 +1550,35 @@ window.__ModuleLoader__.load({
 			lineHeight: "16px",
 			color: "var(--dsw-alias-label-tertiary)"
 		};
+		/**
+		* The credit badge (#99). The same annotation register as {@link labelStyle} —
+		* small and dim, on the model name's side of the seat — so a changing balance
+		* reads as a note on the selection, not composer chrome of its own.
+		*/
+		const creditStyle = {
+			fontSize: 11,
+			lineHeight: "16px",
+			color: "var(--dsw-alias-label-tertiary)",
+			whiteSpace: "nowrap",
+			padding: "0 4px"
+		};
+		/**
+		* The badge's ↻ (#99): the only re-read after the mount fetch. An icon-only
+		* button in the same dim register, so it reads as part of the annotation
+		* rather than a fourth composer control.
+		*/
+		const refreshStyle = {
+			display: "inline-flex",
+			alignItems: "center",
+			justifyContent: "center",
+			width: 20,
+			height: 20,
+			padding: 0,
+			border: 0,
+			borderRadius: 6,
+			background: "transparent",
+			color: "var(--dsw-alias-label-tertiary)"
+		};
 		/** Tooltip bubble: the Fast Mode shape (nowrap, one line, above the control). */
 		const tooltipStyle = {
 			position: "absolute",
@@ -1576,6 +1698,28 @@ window.__ModuleLoader__.load({
 			return status.probe?.results.find((result) => result.id === model);
 		}
 		/**
+		* The credit badge's one line, or `undefined` whenever there is no honest
+		* answer to show (#99).
+		*
+		* Every non-answer collapses to hidden: a signed-out or errored document, a
+		* missing `credits` section (which is also all a `creditsError` leaves behind),
+		* or a total that is not a finite number — the status guard deliberately does
+		* not validate optional fields, so this narrows before reading. Zero is a real
+		* balance and is shown; `unlimited` renders as ∞, never as 0.
+		*/
+		function creditBadge(status, card, t) {
+			if (status === void 0 || status.status !== "signed-in") return void 0;
+			if (status.creditsError !== void 0) return void 0;
+			const credits = status.credits;
+			if (credits === void 0) return void 0;
+			const total = credits.unlimited === true ? "∞" : typeof credits.total === "number" && Number.isFinite(credits.total) ? new Intl.NumberFormat(void 0, { maximumFractionDigits: 2 }).format(credits.total) : void 0;
+			if (total === void 0) return void 0;
+			return t("composerCredit", {
+				prefix: card.creditPrefix,
+				total
+			});
+		}
+		/**
 		* The one-line tooltip: current state first, then what a click does — the same
 		* two-part shape Fast Mode uses.
 		*
@@ -1618,7 +1762,16 @@ window.__ModuleLoader__.load({
 			const [tooltipVisible, setTooltipVisible] = (0, react.useState)(false);
 			const [failed, setFailed] = (0, react.useState)(false);
 			const [note, setNote] = (0, react.useState)();
+			/**
+			* A manual credit read failed (#99). The balance hides until a later read
+			* succeeds, so the old number can never pose as current; the probe state is
+			* untouched — the two features merely share one document.
+			*/
+			const [creditFailed, setCreditFailed] = (0, react.useState)(false);
+			/** Whether a manual credit refresh is in flight, for the ↻'s busy state. */
+			const [refreshing, setRefreshing] = (0, react.useState)(false);
 			const inFlight = (0, react.useRef)(false);
+			const refreshingRef = (0, react.useRef)(false);
 			const mounted = (0, react.useRef)(false);
 			const readSeq = (0, react.useRef)(0);
 			const tooltipId = (0, react.useId)();
@@ -1626,30 +1779,56 @@ window.__ModuleLoader__.load({
 				const seq = ++readSeq.current;
 				const response = await fetch(card.statusPath, {
 					credentials: "same-origin",
+					cache: "no-store",
 					headers: { accept: "application/json" },
 					...signal === void 0 ? {} : { signal }
 				});
 				if (!response.ok) throw new Error(`HTTP ${response.status}`);
 				const value = await response.json().catch(() => void 0);
 				if (!isWorkBuddyWebStatus(value)) throw new Error(t("statusResponseInvalid"));
-				if (mounted.current && !signal?.aborted && seq === readSeq.current) setStatus(value);
+				if (mounted.current && !signal?.aborted && seq === readSeq.current) {
+					setStatus(value);
+					setCreditFailed(false);
+				}
 			}, [card.statusPath, t]);
 			(0, react.useEffect)(() => {
 				mounted.current = true;
 				const controller = new AbortController();
-				const load = () => {
-					refresh(controller.signal).catch(() => {});
-				};
-				load();
-				const timer = window.setInterval(load, RECONCILE_MS);
-				window.addEventListener("focus", load);
+				refresh(controller.signal).catch(() => {});
 				return () => {
 					mounted.current = false;
 					controller.abort();
-					window.clearInterval(timer);
-					window.removeEventListener("focus", load);
 				};
 			}, [refresh]);
+			/**
+			* The ↻'s action (#99): one manual re-read through the same status route.
+			*
+			* The guard is a ref, not the state: two clicks inside one act batch both
+			* see the same stale `refreshing` closure, and only a synchronous check can
+			* keep the second click from sending a second billing read.
+			*
+			* A failure hides the balance (see `creditFailed`) instead of leaving the old
+			* number on screen as though it were fresh — but only when the failed read is
+			* still the newest one (`refresh` bumped `readSeq` for it, and nothing newer
+			* has started since). An out-of-date manual failure racing a successful
+			* probe's trailing read must not hide the fresh balance that just arrived:
+			* `readSeq` is what decides, and `refresh` itself already clears the flag on
+			* any newer successful write.
+			*/
+			const checkNow = async () => {
+				if (refreshingRef.current) return;
+				refreshingRef.current = true;
+				setRefreshing(true);
+				const seqAtStart = readSeq.current + 1;
+				try {
+					await refresh();
+				} catch {
+					if (mounted.current && readSeq.current === seqAtStart) setCreditFailed(true);
+				} finally {
+					refreshingRef.current = false;
+					if (mounted.current) setRefreshing(false);
+				}
+			};
 			const probe = status?.status === "signed-in" ? status.probe : void 0;
 			const key = status?.status === "signed-in" ? status.probeKey : void 0;
 			const result = status === void 0 ? void 0 : resultFor(status, model);
@@ -1701,7 +1880,7 @@ window.__ModuleLoader__.load({
 					if (mounted.current) setBusy(false);
 				}
 			};
-			if (!visible) return null;
+			const credit = creditFailed ? void 0 : creditBadge(status, card, t);
 			const text = tooltipText(t, model, {
 				busy,
 				result,
@@ -1718,7 +1897,39 @@ window.__ModuleLoader__.load({
 					setTooltipVisible(false);
 				},
 				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+					credit === void 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						style: creditStyle,
+						children: credit
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						style: {
+							...refreshStyle,
+							opacity: refreshing ? .6 : 1,
+							cursor: refreshing ? "default" : "pointer"
+						},
+						title: t("composerCreditRefresh"),
+						"aria-label": t("composerCreditRefresh"),
+						"aria-busy": refreshing,
+						disabled: refreshing,
+						onClick: () => {
+							checkNow();
+						},
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+							width: "12",
+							height: "12",
+							viewBox: "0 0 24 24",
+							fill: "none",
+							stroke: "currentColor",
+							strokeWidth: "2",
+							strokeLinecap: "round",
+							strokeLinejoin: "round",
+							"aria-hidden": "true",
+							focusable: "false",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M20 12a8 8 0 1 1-2.34-5.66" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M20 4v4h-4" })]
+						})
+					}),
+					visible && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 						type: "button",
 						"aria-label": text,
 						"aria-describedby": showTooltip ? tooltipId : void 0,
@@ -1771,13 +1982,13 @@ window.__ModuleLoader__.load({
 							children: label
 						})]
 					}),
-					showTooltip && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					visible && showTooltip && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 						id: tooltipId,
 						role: "tooltip",
 						style: tooltipStyle,
 						children: text
 					}),
-					confirming && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+					visible && confirming && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 						style: confirmStyle,
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("probeBubbleBody") }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 							style: confirmRowStyle,
@@ -1798,7 +2009,7 @@ window.__ModuleLoader__.load({
 							})]
 						})]
 					}),
-					note === void 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+					visible && note !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 						role: "status",
 						"aria-live": "polite",
 						style: noteStyle,
@@ -2561,7 +2772,7 @@ window.__ModuleLoader__.load({
 		};
 		//#endregion
 		//#region src/version.ts
-		const WORKBUDDY_CONNECT_VERSION = "0.7.0";
+		const WORKBUDDY_CONNECT_VERSION = "0.7.2";
 		//#endregion
 		//#region src/client/WorkBuddyConfigPage.tsx
 		/**
@@ -2624,8 +2835,13 @@ window.__ModuleLoader__.load({
 			creditsTotal: "Total: {total}",
 			creditsTotalUnlimited: "Total: Unlimited",
 			unlimitedQuota: "Unlimited",
+			composerCredit: "{prefix}{total} credits",
+			composerCreditRefresh: "Refresh credit balance",
 			packageEnterprise: "Enterprise quota",
 			cycleResetAt: "Resets {time}",
+			expiryWarningSoon: "{total} credit expires within 24 hours ({packages} packages)",
+			expiryWarningWeek: "{total} credit expires within 7 days ({packages} packages)",
+			expiryExpiresAt: "Earliest: {time}",
 			percentRemaining: "{percent}% remaining",
 			percentUnknown: "Remaining share unknown",
 			exactRemaining: "{remain} / {size} remaining",
@@ -2743,8 +2959,13 @@ window.__ModuleLoader__.load({
 			creditsTotal: "合计：{total}",
 			creditsTotalUnlimited: "合计：不限额",
 			unlimitedQuota: "不限额",
+			composerCredit: "{prefix}{total}（积分）",
+			composerCreditRefresh: "刷新积分",
 			packageEnterprise: "企业额度",
 			cycleResetAt: "重置时间：{time}",
+			expiryWarningSoon: "有 {total} 积分将在 24 小时内过期（{packages} 个套餐）",
+			expiryWarningWeek: "有 {total} 积分将在 7 天内过期（{packages} 个套餐）",
+			expiryExpiresAt: "最早到期：{time}",
 			percentRemaining: "剩余 {percent}%",
 			percentUnknown: "剩余占比未知",
 			exactRemaining: "剩余 {remain} / {size}",