dsh-plugin-subscription-oauth 0.2.2 → 0.4.0

package/lib/client/styles.js

@@ -243,7 +243,13 @@ ${scope} .dsh-subscription-disclosure:hover:not(:disabled) {
 ${scope} .dsh-subscription-meter {
   height: 6px;
   border-radius: 999px;
-  background: var(--dsw-alias-bg-layer-3, var(--dsw-alias-bg-layer-2));
+  /* The track must stay visible when nothing is spent — a 0 % window otherwise reads as
+     "no meter at all", which is the opposite of "nothing used". The layer token falls
+     back to the card's own colour on a host that does not define it, so the neutral is
+     explicit and translucent, and the inset ring keeps the empty track visible on a
+     light theme as well as a dark one. */
+  background: #8a8f9826;
+  box-shadow: inset 0 0 0 1px #8a8f9833;
   overflow: hidden;
 }
 ${scope} .dsh-subscription-meter > span {
@@ -255,3 +261,124 @@ ${scope} .dsh-subscription-meter > span[data-exhausted="true"] {
   background: var(--dsw-alias-state-error-primary, #b42318);
 }
 `;
+/**
+ * The composer usage chip's stylesheet.
+ *
+ * Separate from the page's, because the chip renders in the composer's own bar rather
+ * than inside either page container — the page stylesheet is scoped to those
+ * containers on purpose, so nothing here may leak into the shell.
+ *
+ * The chip inherits the bar's type and only draws a meter, so it sits beside the shell's
+ * own stats pills without looking like a second design. The trigger is a bare control:
+ * the host gives plugin markup no control classes, and a default `<button>` would
+ * otherwise read as a raised chip. Every token carries a fallback for hosts that do not
+ * define it.
+ */
+export const usageChipCss = `
+.dsh-subscription-usage-chip {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  /* The bar is a centred flex row whose children are this slot's entries followed by the
+     shell's context meter, and a list slot renders its entries as bare children (no
+     wrapper). So the chip is itself a flex item: a higher order places it after the
+     context meter, and no auto margin is set, so it sits immediately beside it rather
+     than being pushed to the edge of the bar. */
+  order: 1;
+  min-width: 0;
+  font-family: inherit;
+  font-size: 12px;
+  line-height: 1;
+}
+.dsh-subscription-usage-chip-trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  margin: 0;
+  padding: 2px 6px;
+  border: 0;
+  border-radius: var(--dsw-radius-sm, 6px);
+  background: transparent;
+  color: var(--dsw-alias-label-secondary, #8a8f98);
+  font: inherit;
+  cursor: pointer;
+}
+.dsh-subscription-usage-chip-trigger:hover {
+  background: var(--dsw-alias-interactive-bg-hover, #ffffff14);
+}
+.dsh-subscription-usage-chip-trigger:focus-visible {
+  outline: 2px solid var(--dsw-alias-border-focus, #4d6bfe);
+  outline-offset: 1px;
+}
+.dsh-subscription-usage-chip-label {
+  overflow: hidden;
+  max-width: 6ch;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.dsh-subscription-usage-chip-cell {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 2px;
+}
+.dsh-subscription-usage-chip-window {
+  opacity: 0.75;
+}
+.dsh-subscription-usage-chip-value {
+  color: var(--dsw-alias-label-primary, #e8e8e8);
+  font-variant-numeric: tabular-nums;
+}
+.dsh-subscription-usage-chip-panel {
+  position: absolute;
+  bottom: calc(100% + 6px);
+  right: 0;
+  z-index: 20;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-width: 168px;
+  padding: 10px 12px;
+  border: 1px solid var(--dsw-alias-border-secondary, #ffffff1f);
+  border-radius: var(--dsw-radius-md, 10px);
+  background: var(--dsw-alias-bg-layer-2, #26262a);
+  box-shadow: var(--dsw-elevation-prominent, 0 12px 32px #0007);
+  color: var(--dsw-alias-label-primary, #e8e8e8);
+  white-space: nowrap;
+}
+.dsh-subscription-usage-chip-full {
+  font-size: 11px;
+  color: var(--dsw-alias-label-secondary, #8a8f98);
+}
+.dsh-subscription-usage-chip-meter {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.dsh-subscription-usage-chip-meterHead {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 12px;
+  font-size: 12px;
+}
+.dsh-subscription-usage-chip-detail {
+  color: var(--dsw-alias-label-secondary, #8a8f98);
+  font-variant-numeric: tabular-nums;
+}
+.dsh-subscription-usage-chip-track {
+  display: block;
+  width: 100%;
+  height: 5px;
+  border-radius: 999px;
+  /* As on the settings meter: an unspent window has to show its track, so the neutral and
+     its ring are explicit rather than a layer token that may match the panel. */
+  background: #8a8f9826;
+  box-shadow: inset 0 0 0 1px #8a8f9833;
+  overflow: hidden;
+}
+.dsh-subscription-usage-chip-fill {
+  display: block;
+  height: 100%;
+  background: var(--dsw-alias-state-success-primary, #067647);
+}
+`;

package/lib/client.js

@@ -126,7 +126,9 @@ const en = {
 	detail_project: "Cloud project",
 	lastError: "Last login attempt failed: {message}",
 	loginFailed: "Could not start the sign-in: {message}",
-	actionFailed: "Action failed: {message}"
+	actionFailed: "Action failed: {message}",
+	usageChipTitle: "{provider} subscription usage",
+	usageChipFull: "{provider} allowance"
 };
 /** Chinese strings. */
 const zh = {
@@ -218,7 +220,9 @@ const zh = {
 	detail_project: "云项目",
 	lastError: "上次登录失败：{message}",
 	loginFailed: "无法开始登录：{message}",
-	actionFailed: "操作失败：{message}"
+	actionFailed: "操作失败：{message}",
+	usageChipTitle: "{provider} 订阅用量",
+	usageChipFull: "{provider} 额度"
 };
 
 //#endregion
@@ -468,7 +472,13 @@ ${scope} .dsh-subscription-disclosure:hover:not(:disabled) {
 ${scope} .dsh-subscription-meter {
   height: 6px;
   border-radius: 999px;
-  background: var(--dsw-alias-bg-layer-3, var(--dsw-alias-bg-layer-2));
+  /* The track must stay visible when nothing is spent — a 0 % window otherwise reads as
+     "no meter at all", which is the opposite of "nothing used". The layer token falls
+     back to the card's own colour on a host that does not define it, so the neutral is
+     explicit and translucent, and the inset ring keeps the empty track visible on a
+     light theme as well as a dark one. */
+  background: #8a8f9826;
+  box-shadow: inset 0 0 0 1px #8a8f9833;
   overflow: hidden;
 }
 ${scope} .dsh-subscription-meter > span {
@@ -480,6 +490,127 @@ ${scope} .dsh-subscription-meter > span[data-exhausted="true"] {
   background: var(--dsw-alias-state-error-primary, #b42318);
 }
 `;
+/**
+* The composer usage chip's stylesheet.
+*
+* Separate from the page's, because the chip renders in the composer's own bar rather
+* than inside either page container — the page stylesheet is scoped to those
+* containers on purpose, so nothing here may leak into the shell.
+*
+* The chip inherits the bar's type and only draws a meter, so it sits beside the shell's
+* own stats pills without looking like a second design. The trigger is a bare control:
+* the host gives plugin markup no control classes, and a default `<button>` would
+* otherwise read as a raised chip. Every token carries a fallback for hosts that do not
+* define it.
+*/
+const usageChipCss = `
+.dsh-subscription-usage-chip {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  /* The bar is a centred flex row whose children are this slot's entries followed by the
+     shell's context meter, and a list slot renders its entries as bare children (no
+     wrapper). So the chip is itself a flex item: a higher order places it after the
+     context meter, and no auto margin is set, so it sits immediately beside it rather
+     than being pushed to the edge of the bar. */
+  order: 1;
+  min-width: 0;
+  font-family: inherit;
+  font-size: 12px;
+  line-height: 1;
+}
+.dsh-subscription-usage-chip-trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  margin: 0;
+  padding: 2px 6px;
+  border: 0;
+  border-radius: var(--dsw-radius-sm, 6px);
+  background: transparent;
+  color: var(--dsw-alias-label-secondary, #8a8f98);
+  font: inherit;
+  cursor: pointer;
+}
+.dsh-subscription-usage-chip-trigger:hover {
+  background: var(--dsw-alias-interactive-bg-hover, #ffffff14);
+}
+.dsh-subscription-usage-chip-trigger:focus-visible {
+  outline: 2px solid var(--dsw-alias-border-focus, #4d6bfe);
+  outline-offset: 1px;
+}
+.dsh-subscription-usage-chip-label {
+  overflow: hidden;
+  max-width: 6ch;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.dsh-subscription-usage-chip-cell {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 2px;
+}
+.dsh-subscription-usage-chip-window {
+  opacity: 0.75;
+}
+.dsh-subscription-usage-chip-value {
+  color: var(--dsw-alias-label-primary, #e8e8e8);
+  font-variant-numeric: tabular-nums;
+}
+.dsh-subscription-usage-chip-panel {
+  position: absolute;
+  bottom: calc(100% + 6px);
+  right: 0;
+  z-index: 20;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-width: 168px;
+  padding: 10px 12px;
+  border: 1px solid var(--dsw-alias-border-secondary, #ffffff1f);
+  border-radius: var(--dsw-radius-md, 10px);
+  background: var(--dsw-alias-bg-layer-2, #26262a);
+  box-shadow: var(--dsw-elevation-prominent, 0 12px 32px #0007);
+  color: var(--dsw-alias-label-primary, #e8e8e8);
+  white-space: nowrap;
+}
+.dsh-subscription-usage-chip-full {
+  font-size: 11px;
+  color: var(--dsw-alias-label-secondary, #8a8f98);
+}
+.dsh-subscription-usage-chip-meter {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.dsh-subscription-usage-chip-meterHead {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 12px;
+  font-size: 12px;
+}
+.dsh-subscription-usage-chip-detail {
+  color: var(--dsw-alias-label-secondary, #8a8f98);
+  font-variant-numeric: tabular-nums;
+}
+.dsh-subscription-usage-chip-track {
+  display: block;
+  width: 100%;
+  height: 5px;
+  border-radius: 999px;
+  /* As on the settings meter: an unspent window has to show its track, so the neutral and
+     its ring are explicit rather than a layer token that may match the panel. */
+  background: #8a8f9826;
+  box-shadow: inset 0 0 0 1px #8a8f9833;
+  overflow: hidden;
+}
+.dsh-subscription-usage-chip-fill {
+  display: block;
+  height: 100%;
+  background: var(--dsw-alias-state-success-primary, #067647);
+}
+`;
 
 //#endregion
 //#region src/protocol.ts
@@ -586,7 +717,7 @@ const RESET_RELATIVE_MS = 1440 * 60 * 1e3;
 * @param t - translator, so the wording follows the page language.
 * @returns the reset text.
 */
-function formatReset(at, t) {
+function formatReset$1(at, t) {
 	const remaining = at - Date.now();
 	if (remaining <= 0) return t("usageResetDue");
 	if (remaining >= RESET_RELATIVE_MS) return t("usageReset", { time: formatTime(at) });
@@ -1051,7 +1182,7 @@ function UsageBlock(props) {
 							]
 						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 							style: styles.modelMeta,
-							children: window$1.resetsAt === void 0 ? "" : formatReset(window$1.resetsAt, t)
+							children: window$1.resetsAt === void 0 ? "" : formatReset$1(window$1.resetsAt, t)
 						})]
 					}), window$1.usedPercent !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 						className: "dsh-subscription-meter",
@@ -2050,13 +2181,280 @@ function SubscriptionsSection(props) {
 	});
 }
 
+//#endregion
+//#region src/client/UsageChip.tsx
+/** How often a visible chip refreshes its figures. */
+const REFRESH_INTERVAL_MS = 6e4;
+/**
+* Abbreviations for the routes this plugin serves.
+*
+* The bar is a status line under the composer, where a full product name crowds out the
+* shell's own pills; the full name is one click away. The fallback shortens an unknown
+* route's display name rather than dropping it.
+*/
+const SHORT_LABELS = {
+	kimi: "Kimi",
+	grok: "Grok",
+	antigravity: "Anti",
+	glm: "GLM",
+	ark: "Ark"
+};
+/**
+* Abbreviations for the window names the providers use.
+*
+* The bar has room for a token or two, so `weekly` becomes `7d` — the same figure in a
+* form that reads at a glance. An unrecognised window keeps its own name, shortened
+* only if it is long.
+*/
+const SHORT_WINDOWS = {
+	"weekly": "7d",
+	"7d": "7d",
+	"5h": "5h",
+	"monthly": "mo",
+	"daily": "1d",
+	"credits": "cr",
+	"free": "free",
+	"session": "s"
+};
+/** The session's provider, from its model-selection projection. */
+function providerOf(projection) {
+	return (projection?.next ?? projection?.lastUsed)?.provider;
+}
+/**
+* The short form of a route's name.
+*
+* @param provider - the route id.
+* @param label - the route's own display name.
+* @returns an abbreviation that still identifies the route.
+*/
+function shortLabel(provider, label) {
+	const known = SHORT_LABELS[provider];
+	if (known !== void 0) return known;
+	const [first] = label.trim().split(/\s+/);
+	return first === void 0 || first === "" ? provider : first;
+}
+/**
+* The short form of a window's name.
+*
+* @param label - the window's own name, e.g. `weekly`.
+* @returns an abbreviation, or the label itself when it is already short.
+*/
+function shortWindow(label) {
+	const known = SHORT_WINDOWS[label.toLowerCase()];
+	if (known !== void 0) return known;
+	return label.length <= 4 ? label : label.slice(0, 4);
+}
+/**
+* Pick the window a single line should show.
+*
+* A plan can meter several windows at once (a rolling five-hour one and a weekly one).
+* The most constrained is the one that will stop work soonest, so it earns the space;
+* ties fall to the earlier window, which is the order the providers state them in.
+*
+* @param windows - the route's metered windows.
+* @returns the window to show, or undefined when none states a figure.
+*/
+function pickWindow(windows) {
+	let best;
+	for (const window$1 of windows) {
+		if (window$1.usedPercent === void 0) continue;
+		if (best?.usedPercent === void 0 || window$1.usedPercent > best.usedPercent) best = window$1;
+	}
+	return best;
+}
+/**
+* Reduce one route's usage to what the chip renders.
+*
+* @param provider - the route the figures came from.
+* @param label - the route's display name.
+* @param usage - the accounts the route answered for.
+* @returns the reading, or undefined when the route stated no figure.
+*/
+function readingOf(provider, label, usage) {
+	for (const entry of usage) {
+		const window$1 = pickWindow(entry.windows);
+		if (window$1 === void 0) continue;
+		return {
+			provider,
+			label,
+			windows: entry.windows.filter((candidate) => candidate.usedPercent !== void 0),
+			window: window$1,
+			...entry.plan === void 0 ? {} : { plan: entry.plan }
+		};
+	}
+}
+/**
+* Format a window's reset the way the settings cards do.
+*
+* The rule is shared with the cards on purpose: a figure reading `6d20h` here and
+* something else there would be two answers to one question.
+*
+* @param at - epoch milliseconds, or undefined when the provider states none.
+* @param now - the instant to measure from.
+* @returns a short phrase, or undefined when there is no reset to show.
+*/
+function formatReset(at, now) {
+	if (at === void 0) return void 0;
+	const remaining = at - now;
+	if (remaining <= 0) return "now";
+	const hours = remaining / 36e5;
+	if (hours < 1) return `${String(Math.max(1, Math.round(remaining / 6e4)))}m`;
+	if (hours < 24) return `${String(Math.round(hours))}h`;
+	const days = Math.floor(hours / 24);
+	return `${String(days)}d${String(Math.round(hours - days * 24))}h`;
+}
+/**
+* The composer's usage chip.
+*
+* @param props - injected RPC caller, copy, and the session's provider reader.
+* @returns the chip, or null when there is nothing true to say.
+*/
+function UsageChip({ call, t, isOwnProvider, useProjection }) {
+	const [reading, setReading] = (0, react.useState)(void 0);
+	const [now, setNow] = (0, react.useState)(() => Date.now());
+	const [open, setOpen] = (0, react.useState)(false);
+	const lastOwn = (0, react.useRef)(void 0);
+	const selected = useProjection("modelSelection", (value) => providerOf(value));
+	const load = (0, react.useCallback)(async (target) => {
+		try {
+			const result = await call("usage", { provider: target });
+			return readingOf(target, result.status.providers.find((entry) => entry.provider === target)?.displayName ?? target, result.usage);
+		} catch {
+			return;
+		}
+	}, [call]);
+	(0, react.useEffect)(() => {
+		const target = selected !== void 0 && isOwnProvider(selected) ? selected : lastOwn.current;
+		if (target === void 0) {
+			setReading(void 0);
+			return;
+		}
+		let live = true;
+		const refresh = () => {
+			setNow(Date.now());
+			load(target).then((next) => {
+				if (!live || next === void 0) return;
+				lastOwn.current = target;
+				setReading(next);
+			});
+		};
+		refresh();
+		const timer = setInterval(refresh, REFRESH_INTERVAL_MS);
+		return () => {
+			live = false;
+			clearInterval(timer);
+		};
+	}, [
+		selected,
+		isOwnProvider,
+		load
+	]);
+	(0, react.useEffect)(() => {
+		if (!open) return;
+		const close = () => {
+			setOpen(false);
+		};
+		document.addEventListener("click", close);
+		return () => {
+			document.removeEventListener("click", close);
+		};
+	}, [open]);
+	if (reading === void 0) return null;
+	if (reading.window.usedPercent === void 0) return null;
+	formatReset(reading.window.resetsAt, now);
+	const short = shortLabel(reading.provider, reading.label);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+		className: "dsh-subscription-usage-chip",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("style", { children: usageChipCss }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+				type: "button",
+				className: "dsh-subscription-usage-chip-trigger",
+				"aria-expanded": open,
+				title: t("usageChipTitle", { provider: reading.label }),
+				onClick: (event) => {
+					event.stopPropagation();
+					setOpen((was) => !was);
+				},
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "dsh-subscription-usage-chip-label",
+					children: short
+				}), reading.windows.map((window$1) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+					className: "dsh-subscription-usage-chip-cell",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "dsh-subscription-usage-chip-window",
+						children: shortWindow(window$1.label)
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "dsh-subscription-usage-chip-value",
+						children: `${String(Math.round(window$1.usedPercent ?? 0))}%`
+					})]
+				}, window$1.label))]
+			}),
+			open && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+				className: "dsh-subscription-usage-chip-panel",
+				role: "status",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "dsh-subscription-usage-chip-full",
+						children: t("usageChipFull", { provider: reading.label })
+					}),
+					reading.windows.map((window$1) => {
+						const windowReset = formatReset(window$1.resetsAt, now);
+						return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+							className: "dsh-subscription-usage-chip-meter",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+								className: "dsh-subscription-usage-chip-meterHead",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: window$1.label }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "dsh-subscription-usage-chip-detail",
+									children: `${String(Math.round(window$1.usedPercent ?? 0))}%${windowReset === void 0 ? "" : ` · ${windowReset}`}`
+								})]
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "dsh-subscription-usage-chip-track",
+								"aria-hidden": "true",
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "dsh-subscription-usage-chip-fill",
+									style: { width: `${String(Math.max(0, Math.min(100, window$1.usedPercent ?? 0)))}%` }
+								})
+							})]
+						}, window$1.label);
+					}),
+					reading.plan === void 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "dsh-subscription-usage-chip-detail",
+						children: reading.plan
+					})
+				]
+			})
+		]
+	});
+}
+
 //#endregion
 //#region src/client/index.ts
+/**
+* Routes this plugin serves.
+*
+* The chip only reports for these; a provider somebody else registered gets no chip,
+* because this plugin has no way to read its allowance.
+*/
+const OWN_PROVIDER_IDS = new Set([
+	"kimi",
+	"grok",
+	"antigravity",
+	"glm",
+	"ark"
+]);
 /** Dictionary namespace owned by this plugin. */
 const NS = "settings.subscriptions";
 /** Settings nav position: after the shipped sections, before plugin tooling. */
 const SECTION_ORDER = 92;
 /**
+* Composer-dock position: after the shell's own stats pills, which sit at 0.
+*
+* The shell owns that bar and registers `tok/s` and the cache-hit pill into it, so the
+* chip follows them rather than displacing them.
+*/
+const CHIP_ORDER = 10;
+/**
 * Required services: `slots` carries the registration seat, `connection` the
 * RPC caller, and `locale` the copy dictionaries.
 */
@@ -2091,6 +2489,16 @@ function apply(ctx) {
 			t
 		})
 	}, SubscriptionsSection));
+	ctx.slots.inject("conversation.composer.dock", () => ctx.slots.register({
+		name: "conversation.composer.dock",
+		id: "subscription-usage",
+		order: CHIP_ORDER,
+		inject: () => ({
+			call,
+			t,
+			isOwnProvider: (provider) => OWN_PROVIDER_IDS.has(provider)
+		})
+	}, UsageChip));
 }
 
 //#endregion