dsh-plugin-subscriptions 0.1.2 → 0.2.0

package/README.md

@@ -28,6 +28,8 @@ The `image_generate` tool renders its result inline in the conversation:
 
 Only logged-in providers appear in the session model picker; the lists above refresh on login/logout. Vision-capable models declare `['text', 'image']` input modalities, and image content is translated to each provider's wire format.
 
+Logged-in cards also show **subscription usage** — per rate-limit window (5-hour session, weekly, and per-model weekly where the plan has one) with the used percentage, a progress bar, and the reset time, plus a Refresh button. Codex usage comes from `chatgpt.com/backend-api/wham/usage` (also reports the plan), Claude usage from `api.anthropic.com/api/oauth/usage`, and Grok usage from the Grok Build CLI proxy's `cli-chat-proxy.grok.com/v1/billing` (the source of the CLI's `/usage` panel; reports the shared weekly pool and the subscription tier).
+
 Also included, registered when the matching provider is enabled:
 
 - **`x_search`** tool (Grok) — xAI's hosted X search, returning `{ answer, citations }`.

package/README.zh.md

@@ -28,6 +28,8 @@
 
 只有已登录的 provider 才会出现在会话模型选择器里;登录/退出后列表自动刷新。支持视觉的模型会声明 `['text', 'image']` 输入模态,图片内容会被翻译成各 provider 的 wire 格式。
 
+已登录的卡片还会显示**订阅用量**——按限额窗口(5 小时会话窗、每周窗,以及计划包含的按模型每周窗)展示已用百分比、进度条和重置时间,并带刷新按钮。Codex 用量来自 `chatgpt.com/backend-api/wham/usage`(同时报告计划类型),Claude 用量来自 `api.anthropic.com/api/oauth/usage`,Grok 用量来自 Grok Build CLI 代理的 `cli-chat-proxy.grok.com/v1/billing`(即 CLI `/usage` 面板的数据源,报告共享每周额度和订阅档位)。
+
 随 provider 启用自动注册的工具:
 
 - **`x_search`**(Grok)—— xAI 托管的 X 搜索,返回 `{ answer, citations }`。

package/lib/auth/rpc.d.ts

@@ -7,6 +7,7 @@
 import type { Context } from '@deepseek-ai/cordis';
 import type { ImageAttachmentRef } from '@deepseek-ai/dsh-attachment';
 import { type ProviderId } from './store.js';
+import type { ProviderUsage } from '../providers/common.js';
 /** The RPC channel this plugin registers on the host connection. */
 export declare const SUBSCRIPTIONS_AUTH_CHANNEL = "/subscriptions-auth";
 /** Decoded image bytes returned by the `image` endpoint. */
@@ -48,6 +49,13 @@ export interface AuthController {
     cancel(provider: ProviderId): Promise<void>;
     /** Delete the stored session. */
     logout(provider: ProviderId): Promise<void>;
+    /**
+     * Current subscription usage of one provider.
+     * @param signal - caller cancellation from the RPC transport.
+     * @returns `{ supported: false }` when the provider has no usage endpoint.
+     * @throws when logged out or the usage lookup fails.
+     */
+    usage(provider: ProviderId, signal: AbortSignal): Promise<ProviderUsage>;
     /**
      * Read one image attachment's bytes for inline display.
      * @param ref - the full durable reference (`readImage` verifies against it).

package/lib/auth/rpc.js

@@ -91,6 +91,8 @@ async function dispatch(controller, endpoint, payload, signal) {
         case 'logout':
             await controller.logout(readProvider(payload));
             return ok({ ok: true });
+        case 'usage':
+            return ok(await controller.usage(readProvider(payload), signal));
         case 'image':
             return ok(await controller.readImage(readImageRef(payload), signal));
         default:

package/lib/client/SubscriptionsSection.d.ts

@@ -10,6 +10,19 @@ export interface ProviderStatus {
     account?: string;
     detail?: string;
 }
+/** One rate-limit window as answered by the `usage` endpoint. */
+export interface UsageWindow {
+    kind: 'session' | 'weekly' | 'other';
+    scope?: string;
+    usedPercent: number;
+    resetsAt?: number;
+}
+/** `usage` endpoint value: the node half owns this shape. */
+export interface ProviderUsage {
+    supported: boolean;
+    windows?: UsageWindow[];
+    plan?: string;
+}
 /** Injected dependencies of {@link SubscriptionsSection} (slot `inject`). */
 export interface SubscriptionsSectionInjected {
     /** Generic logical-RPC caller over the Connection transport. */

package/lib/client/SubscriptionsSection.js

@@ -89,6 +89,30 @@ const styles = {
         color: 'var(--dsw-alias-label-primary)', font: 'inherit', fontSize: 12, lineHeight: '18px',
         cursor: 'pointer',
     },
+    usage: {
+        display: 'flex', flexDirection: 'column', gap: 6, marginTop: 4,
+        borderTop: '1px solid var(--dsw-alias-border-l2)', paddingTop: 8,
+    },
+    usageHeader: { display: 'flex', alignItems: 'center', gap: 8 },
+    usageTitle: { fontSize: 12, lineHeight: '18px', fontWeight: 500, color: 'var(--dsw-alias-label-secondary)' },
+    usagePlan: { fontSize: 12, lineHeight: '18px', color: 'var(--dsw-alias-label-tertiary)' },
+    usageRefresh: {
+        boxSizing: 'border-box', display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
+        height: 22, padding: '0 8px', borderRadius: 11, marginLeft: 'auto',
+        border: '1px solid var(--dsw-alias-border-l2)', background: 'transparent',
+        color: 'var(--dsw-alias-label-secondary)', font: 'inherit', fontSize: 12, lineHeight: '18px',
+        cursor: 'pointer',
+    },
+    usageRow: { display: 'flex', flexDirection: 'column', gap: 3 },
+    usageMeta: {
+        display: 'flex', justifyContent: 'space-between', gap: 8,
+        fontSize: 12, lineHeight: '18px', color: 'var(--dsw-alias-label-tertiary)',
+    },
+    usageTrack: {
+        height: 6, borderRadius: 3, overflow: 'hidden',
+        background: 'var(--dsw-alias-bg-layer-1)', border: '1px solid var(--dsw-alias-border-l2)',
+    },
+    usageFill: { height: '100%', borderRadius: 3 },
     manual: { marginTop: 4, fontSize: 12, lineHeight: '18px', color: 'var(--dsw-alias-label-secondary)' },
     manualRow: { display: 'flex', gap: 8, marginTop: 6 },
     manualInput: {
@@ -133,6 +157,26 @@ function statusText(t, status) {
     }
     return t('notLoggedIn');
 }
+/**
+ * Localized label of one usage window (kind, plus the model scope when named).
+ * @param t - section translate.
+ * @param window - the reported window.
+ * @returns e.g. "5-hour window" or "Weekly · Opus".
+ */
+function usageWindowLabel(t, window) {
+    const base = window.kind === 'session'
+        ? t('usageSession')
+        : window.kind === 'weekly' ? t('usageWeekly') : t('usageWindow');
+    return window.scope !== undefined && window.scope !== '' ? `${base} · ${window.scope}` : base;
+}
+/** Bar fill color: success normally, warn from 80%, error from 95%. */
+function usageBarColor(usedPercent) {
+    if (usedPercent >= 95)
+        return 'var(--dsw-alias-state-error-primary)';
+    if (usedPercent >= 80)
+        return 'var(--dsw-alias-state-warn-label)';
+    return 'var(--dsw-alias-state-success-primary)';
+}
 /**
  * The Subscriptions settings page component.
  * @param props - the slot inject face ({@link SubscriptionsSectionInjected}).
@@ -146,8 +190,13 @@ export function SubscriptionsSection(props) {
     const [manualDrafts, setManualDrafts] = useState({
         codex: '', claude: '', grok: '',
     });
+    const [usages, setUsages] = useState({});
+    const [usageErrors, setUsageErrors] = useState({});
+    const [usageLoading, setUsageLoading] = useState({});
     const mountedRef = useRef(true);
     const pollersRef = useRef(new Map());
+    /** Providers with a `usage` call in flight; guards the auto-fetch effect against re-entry. */
+    const usageInflightRef = useRef(new Set());
     const setProviderError = useCallback((provider, message) => {
         if (!mountedRef.current)
             return;
@@ -216,6 +265,58 @@ export function SubscriptionsSection(props) {
             pollersRef.current.clear();
         };
     }, [refresh, startPolling]);
+    const loadUsage = useCallback(async (provider) => {
+        if (rpc === undefined || usageInflightRef.current.has(provider))
+            return;
+        usageInflightRef.current.add(provider);
+        setUsageLoading(prev => ({ ...prev, [provider]: true }));
+        try {
+            const usage = await callSubscriptionsAuth(rpc, 'usage', { provider });
+            if (!mountedRef.current)
+                return;
+            setUsages(prev => ({ ...prev, [provider]: usage }));
+            setUsageErrors((prev) => {
+                const next = { ...prev };
+                delete next[provider];
+                return next;
+            });
+        }
+        catch (error) {
+            if (mountedRef.current)
+                setUsageErrors(prev => ({ ...prev, [provider]: messageOf(error) }));
+        }
+        finally {
+            usageInflightRef.current.delete(provider);
+            if (mountedRef.current)
+                setUsageLoading(prev => ({ ...prev, [provider]: false }));
+        }
+    }, [rpc]);
+    // Fetch usage once a provider is logged in; drop the cached snapshot on
+    // logout so a re-login refetches. A failed lookup does not auto-retry — the
+    // per-card Refresh button is the retry path.
+    useEffect(() => {
+        for (const { id } of PROVIDERS) {
+            const status = statuses[id];
+            if (status === undefined)
+                continue;
+            if (status.loggedIn) {
+                if (usages[id] === undefined && usageErrors[id] === undefined)
+                    void loadUsage(id);
+            }
+            else if (usages[id] !== undefined || usageErrors[id] !== undefined) {
+                setUsages((prev) => {
+                    const next = { ...prev };
+                    delete next[id];
+                    return next;
+                });
+                setUsageErrors((prev) => {
+                    const next = { ...prev };
+                    delete next[id];
+                    return next;
+                });
+            }
+        }
+    }, [statuses, usages, usageErrors, loadUsage]);
     const login = useCallback(async (provider) => {
         if (rpc === undefined)
             return;
@@ -285,6 +386,15 @@ export function SubscriptionsSection(props) {
     return (_jsxs("div", { style: styles.section, children: [_jsx("p", { style: styles.intro, children: t('intro') }), PROVIDERS.map(({ id, name }) => {
                 const status = statuses[id];
                 const busy = status?.busy === true;
-                return (_jsxs("div", { style: styles.card, children: [_jsxs("div", { style: styles.cardHeader, children: [_jsx("span", { style: { ...styles.dot, background: dotColor(status) } }), _jsx("span", { style: styles.name, children: name })] }), _jsx("p", { style: styles.statusLine, children: statusText(t, status) }), status?.detail !== undefined && status.detail !== '' && (_jsx("p", { style: styles.statusLine, children: status.detail })), errors[id] !== undefined && _jsx("p", { style: styles.errorLine, children: errors[id] }), _jsxs("div", { style: styles.actions, children: [!busy && status?.loggedIn !== true && (_jsx("button", { type: "button", style: styles.button, onClick: () => { void login(id); }, children: t('login') })), busy && (_jsx("button", { type: "button", style: styles.button, onClick: () => { void cancel(id); }, children: t('cancel') })), status?.loggedIn === true && (_jsx("button", { type: "button", style: styles.button, onClick: () => { void logout(id, name); }, children: t('logout') }))] }), busy && (_jsxs("details", { style: styles.manual, children: [_jsx("summary", { children: t('manualSummary') }), _jsxs("div", { style: styles.manualRow, children: [_jsx("input", { style: styles.manualInput, value: manualDrafts[id], placeholder: t('manualPlaceholder'), onChange: event => setManualDrafts(prev => ({ ...prev, [id]: event.target.value })) }), _jsx("button", { type: "button", style: styles.button, onClick: () => { void submitManual(id); }, children: t('submit') })] })] }))] }, id));
+                const usage = usages[id];
+                const usageError = usageErrors[id];
+                // Providers without a usage endpoint answer supported:false — no block.
+                const showUsage = status?.loggedIn === true && usage?.supported !== false
+                    && (usage !== undefined || usageError !== undefined || usageLoading[id] === true);
+                return (_jsxs("div", { style: styles.card, children: [_jsxs("div", { style: styles.cardHeader, children: [_jsx("span", { style: { ...styles.dot, background: dotColor(status) } }), _jsx("span", { style: styles.name, children: name })] }), _jsx("p", { style: styles.statusLine, children: statusText(t, status) }), status?.detail !== undefined && status.detail !== '' && (_jsx("p", { style: styles.statusLine, children: status.detail })), errors[id] !== undefined && _jsx("p", { style: styles.errorLine, children: errors[id] }), _jsxs("div", { style: styles.actions, children: [!busy && status?.loggedIn !== true && (_jsx("button", { type: "button", style: styles.button, onClick: () => { void login(id); }, children: t('login') })), busy && (_jsx("button", { type: "button", style: styles.button, onClick: () => { void cancel(id); }, children: t('cancel') })), status?.loggedIn === true && (_jsx("button", { type: "button", style: styles.button, onClick: () => { void logout(id, name); }, children: t('logout') }))] }), showUsage && (_jsxs("div", { style: styles.usage, children: [_jsxs("div", { style: styles.usageHeader, children: [_jsx("span", { style: styles.usageTitle, children: t('usageTitle') }), usage?.plan !== undefined && (_jsx("span", { style: styles.usagePlan, children: t('usagePlan', { plan: usage.plan }) })), _jsx("button", { type: "button", style: { ...styles.usageRefresh, ...usageLoading[id] === true ? { opacity: 0.5, cursor: 'default' } : {} }, disabled: usageLoading[id] === true, onClick: () => { void loadUsage(id); }, children: t('usageRefresh') })] }), usage === undefined && usageError === undefined && (_jsx("p", { style: styles.statusLine, children: t('usageLoading') })), usageError !== undefined && (_jsx("p", { style: styles.errorLine, children: t('usageError', { message: usageError }) })), usage?.windows !== undefined && usage.windows.length === 0 && (_jsx("p", { style: styles.statusLine, children: t('usageEmpty') })), (usage?.windows ?? []).map((window, index) => {
+                                    const percent = Math.min(100, Math.max(0, window.usedPercent));
+                                    return (_jsxs("div", { style: styles.usageRow, children: [_jsxs("div", { style: styles.usageMeta, children: [_jsx("span", { children: usageWindowLabel(t, window) }), _jsxs("span", { children: [`${String(Math.round(percent))}%`, window.resetsAt !== undefined
+                                                                && ` · ${t('usageResets', { date: new Date(window.resetsAt).toLocaleString() })}`] })] }), _jsx("div", { style: styles.usageTrack, children: _jsx("div", { style: { ...styles.usageFill, width: `${String(percent)}%`, background: usageBarColor(percent) } }) })] }, index));
+                                })] })), busy && (_jsxs("details", { style: styles.manual, children: [_jsx("summary", { children: t('manualSummary') }), _jsxs("div", { style: styles.manualRow, children: [_jsx("input", { style: styles.manualInput, value: manualDrafts[id], placeholder: t('manualPlaceholder'), onChange: event => setManualDrafts(prev => ({ ...prev, [id]: event.target.value })) }), _jsx("button", { type: "button", style: styles.button, onClick: () => { void submitManual(id); }, children: t('submit') })] })] }))] }, id));
             })] }));
 }

package/lib/client/locales.d.ts

@@ -19,6 +19,16 @@ export declare const en: {
     manualPlaceholder: string;
     submit: string;
     loginMissingUrl: string;
+    usageTitle: string;
+    usageRefresh: string;
+    usageLoading: string;
+    usageEmpty: string;
+    usageError: string;
+    usageSession: string;
+    usageWeekly: string;
+    usageWindow: string;
+    usageResets: string;
+    usagePlan: string;
     generating: string;
     image: string;
     viewImage: string;
@@ -48,6 +58,16 @@ export declare const zh: {
     manualPlaceholder: string;
     submit: string;
     loginMissingUrl: string;
+    usageTitle: string;
+    usageRefresh: string;
+    usageLoading: string;
+    usageEmpty: string;
+    usageError: string;
+    usageSession: string;
+    usageWeekly: string;
+    usageWindow: string;
+    usageResets: string;
+    usagePlan: string;
     generating: string;
     image: string;
     viewImage: string;

package/lib/client/locales.js

@@ -19,6 +19,16 @@ export const en = {
     manualPlaceholder: 'Paste the callback URL or code',
     submit: 'Submit',
     loginMissingUrl: 'login answered without an authorizeUrl',
+    usageTitle: 'Usage',
+    usageRefresh: 'Refresh',
+    usageLoading: 'Loading usage…',
+    usageEmpty: 'No usage windows reported.',
+    usageError: 'Usage lookup failed: {message}',
+    usageSession: '5-hour window',
+    usageWeekly: 'Weekly',
+    usageWindow: 'Window',
+    usageResets: 'resets {date}',
+    usagePlan: 'Plan: {plan}',
     generating: 'Generating image…',
     image: 'image',
     viewImage: 'View image',
@@ -48,6 +58,16 @@ export const zh = {
     manualPlaceholder: '粘贴回调 URL 或授权码',
     submit: '提交',
     loginMissingUrl: 'login 响应缺少 authorizeUrl',
+    usageTitle: '用量',
+    usageRefresh: '刷新',
+    usageLoading: '用量加载中…',
+    usageEmpty: '服务商未返回任何用量窗口。',
+    usageError: '用量查询失败：{message}',
+    usageSession: '5 小时窗口',
+    usageWeekly: '每周',
+    usageWindow: '窗口',
+    usageResets: '{date} 重置',
+    usagePlan: '计划：{plan}',
     generating: '正在生成图片…',
     image: '图片',
     viewImage: '查看图片',

package/lib/client.js

@@ -54,6 +54,16 @@ const en = {
 	manualPlaceholder: "Paste the callback URL or code",
 	submit: "Submit",
 	loginMissingUrl: "login answered without an authorizeUrl",
+	usageTitle: "Usage",
+	usageRefresh: "Refresh",
+	usageLoading: "Loading usage…",
+	usageEmpty: "No usage windows reported.",
+	usageError: "Usage lookup failed: {message}",
+	usageSession: "5-hour window",
+	usageWeekly: "Weekly",
+	usageWindow: "Window",
+	usageResets: "resets {date}",
+	usagePlan: "Plan: {plan}",
 	generating: "Generating image…",
 	image: "image",
 	viewImage: "View image",
@@ -83,6 +93,16 @@ const zh = {
 	manualPlaceholder: "粘贴回调 URL 或授权码",
 	submit: "提交",
 	loginMissingUrl: "login 响应缺少 authorizeUrl",
+	usageTitle: "用量",
+	usageRefresh: "刷新",
+	usageLoading: "用量加载中…",
+	usageEmpty: "服务商未返回任何用量窗口。",
+	usageError: "用量查询失败：{message}",
+	usageSession: "5 小时窗口",
+	usageWeekly: "每周",
+	usageWindow: "窗口",
+	usageResets: "{date} 重置",
+	usagePlan: "计划：{plan}",
 	generating: "正在生成图片…",
 	image: "图片",
 	viewImage: "查看图片",
@@ -223,6 +243,71 @@ const styles$1 = {
 		lineHeight: "18px",
 		cursor: "pointer"
 	},
+	usage: {
+		display: "flex",
+		flexDirection: "column",
+		gap: 6,
+		marginTop: 4,
+		borderTop: "1px solid var(--dsw-alias-border-l2)",
+		paddingTop: 8
+	},
+	usageHeader: {
+		display: "flex",
+		alignItems: "center",
+		gap: 8
+	},
+	usageTitle: {
+		fontSize: 12,
+		lineHeight: "18px",
+		fontWeight: 500,
+		color: "var(--dsw-alias-label-secondary)"
+	},
+	usagePlan: {
+		fontSize: 12,
+		lineHeight: "18px",
+		color: "var(--dsw-alias-label-tertiary)"
+	},
+	usageRefresh: {
+		boxSizing: "border-box",
+		display: "inline-flex",
+		alignItems: "center",
+		justifyContent: "center",
+		height: 22,
+		padding: "0 8px",
+		borderRadius: 11,
+		marginLeft: "auto",
+		border: "1px solid var(--dsw-alias-border-l2)",
+		background: "transparent",
+		color: "var(--dsw-alias-label-secondary)",
+		font: "inherit",
+		fontSize: 12,
+		lineHeight: "18px",
+		cursor: "pointer"
+	},
+	usageRow: {
+		display: "flex",
+		flexDirection: "column",
+		gap: 3
+	},
+	usageMeta: {
+		display: "flex",
+		justifyContent: "space-between",
+		gap: 8,
+		fontSize: 12,
+		lineHeight: "18px",
+		color: "var(--dsw-alias-label-tertiary)"
+	},
+	usageTrack: {
+		height: 6,
+		borderRadius: 3,
+		overflow: "hidden",
+		background: "var(--dsw-alias-bg-layer-1)",
+		border: "1px solid var(--dsw-alias-border-l2)"
+	},
+	usageFill: {
+		height: "100%",
+		borderRadius: 3
+	},
 	manual: {
 		marginTop: 4,
 		fontSize: 12,
@@ -275,6 +360,22 @@ function statusText(t, status) {
 	return t("notLoggedIn");
 }
 /**
+* Localized label of one usage window (kind, plus the model scope when named).
+* @param t - section translate.
+* @param window - the reported window.
+* @returns e.g. "5-hour window" or "Weekly · Opus".
+*/
+function usageWindowLabel(t, window$1) {
+	const base = window$1.kind === "session" ? t("usageSession") : window$1.kind === "weekly" ? t("usageWeekly") : t("usageWindow");
+	return window$1.scope !== void 0 && window$1.scope !== "" ? `${base} · ${window$1.scope}` : base;
+}
+/** Bar fill color: success normally, warn from 80%, error from 95%. */
+function usageBarColor(usedPercent) {
+	if (usedPercent >= 95) return "var(--dsw-alias-state-error-primary)";
+	if (usedPercent >= 80) return "var(--dsw-alias-state-warn-label)";
+	return "var(--dsw-alias-state-success-primary)";
+}
+/**
 * The Subscriptions settings page component.
 * @param props - the slot inject face ({@link SubscriptionsSectionInjected}).
 * @returns the section body, or a notice while the RPC face is absent.
@@ -289,8 +390,13 @@ function SubscriptionsSection(props) {
 		claude: "",
 		grok: ""
 	});
+	const [usages, setUsages] = (0, react.useState)({});
+	const [usageErrors, setUsageErrors] = (0, react.useState)({});
+	const [usageLoading, setUsageLoading] = (0, react.useState)({});
 	const mountedRef = (0, react.useRef)(true);
 	const pollersRef = (0, react.useRef)(/* @__PURE__ */ new Map());
+	/** Providers with a `usage` call in flight; guards the auto-fetch effect against re-entry. */
+	const usageInflightRef = (0, react.useRef)(/* @__PURE__ */ new Set());
 	const setProviderError = (0, react.useCallback)((provider, message) => {
 		if (!mountedRef.current) return;
 		setErrors((prev) => {
@@ -344,6 +450,63 @@ function SubscriptionsSection(props) {
 			pollersRef.current.clear();
 		};
 	}, [refresh, startPolling]);
+	const loadUsage = (0, react.useCallback)(async (provider) => {
+		if (rpc === void 0 || usageInflightRef.current.has(provider)) return;
+		usageInflightRef.current.add(provider);
+		setUsageLoading((prev) => ({
+			...prev,
+			[provider]: true
+		}));
+		try {
+			const usage = await callSubscriptionsAuth$1(rpc, "usage", { provider });
+			if (!mountedRef.current) return;
+			setUsages((prev) => ({
+				...prev,
+				[provider]: usage
+			}));
+			setUsageErrors((prev) => {
+				const next = { ...prev };
+				delete next[provider];
+				return next;
+			});
+		} catch (error) {
+			if (mountedRef.current) setUsageErrors((prev) => ({
+				...prev,
+				[provider]: messageOf(error)
+			}));
+		} finally {
+			usageInflightRef.current.delete(provider);
+			if (mountedRef.current) setUsageLoading((prev) => ({
+				...prev,
+				[provider]: false
+			}));
+		}
+	}, [rpc]);
+	(0, react.useEffect)(() => {
+		for (const { id } of PROVIDERS) {
+			const status = statuses[id];
+			if (status === void 0) continue;
+			if (status.loggedIn) {
+				if (usages[id] === void 0 && usageErrors[id] === void 0) loadUsage(id);
+			} else if (usages[id] !== void 0 || usageErrors[id] !== void 0) {
+				setUsages((prev) => {
+					const next = { ...prev };
+					delete next[id];
+					return next;
+				});
+				setUsageErrors((prev) => {
+					const next = { ...prev };
+					delete next[id];
+					return next;
+				});
+			}
+		}
+	}, [
+		statuses,
+		usages,
+		usageErrors,
+		loadUsage
+	]);
 	const login = (0, react.useCallback)(async (provider) => {
 		if (rpc === void 0) return;
 		setProviderError(provider, void 0);
@@ -437,6 +600,9 @@ function SubscriptionsSection(props) {
 		}), PROVIDERS.map(({ id, name }) => {
 			const status = statuses[id];
 			const busy = status?.busy === true;
+			const usage = usages[id];
+			const usageError = usageErrors[id];
+			const showUsage = status?.loggedIn === true && usage?.supported !== false && (usage !== void 0 || usageError !== void 0 || usageLoading[id] === true);
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				style: styles$1.card,
 				children: [
@@ -491,6 +657,68 @@ function SubscriptionsSection(props) {
 							})
 						]
 					}),
+					showUsage && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						style: styles$1.usage,
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								style: styles$1.usageHeader,
+								children: [
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										style: styles$1.usageTitle,
+										children: t("usageTitle")
+									}),
+									usage?.plan !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										style: styles$1.usagePlan,
+										children: t("usagePlan", { plan: usage.plan })
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+										type: "button",
+										style: {
+											...styles$1.usageRefresh,
+											...usageLoading[id] === true ? {
+												opacity: .5,
+												cursor: "default"
+											} : {}
+										},
+										disabled: usageLoading[id] === true,
+										onClick: () => {
+											loadUsage(id);
+										},
+										children: t("usageRefresh")
+									})
+								]
+							}),
+							usage === void 0 && usageError === void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								style: styles$1.statusLine,
+								children: t("usageLoading")
+							}),
+							usageError !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								style: styles$1.errorLine,
+								children: t("usageError", { message: usageError })
+							}),
+							usage?.windows !== void 0 && usage.windows.length === 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								style: styles$1.statusLine,
+								children: t("usageEmpty")
+							}),
+							(usage?.windows ?? []).map((window$1, index) => {
+								const percent = Math.min(100, Math.max(0, window$1.usedPercent));
+								return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									style: styles$1.usageRow,
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+										style: styles$1.usageMeta,
+										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: usageWindowLabel(t, window$1) }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [`${String(Math.round(percent))}%`, window$1.resetsAt !== void 0 && ` · ${t("usageResets", { date: new Date(window$1.resetsAt).toLocaleString() })}`] })]
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+										style: styles$1.usageTrack,
+										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { style: {
+											...styles$1.usageFill,
+											width: `${String(percent)}%`,
+											background: usageBarColor(percent)
+										} })
+									})]
+								}, index);
+							})
+						]
+					}),
 					busy && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("details", {
 						style: styles$1.manual,
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("summary", { children: t("manualSummary") }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {