dsh-subscriptions 0.1.3 → 0.1.4

package/lib/client/provider-settings-styles.js

@@ -0,0 +1,206 @@
+/**
+ * The host loads one JS client bundle, so keep this small, scoped stylesheet
+ * with the dialog instead of relying on a separate CSS asset. Geometry and
+ * theme tokens follow the host's settings-form and ui-primitives controls.
+ *
+ * `color-scheme` is left to the host deliberately. Its boot script sets the
+ * property on `:root`, and it inherits, so native controls inside these panels
+ * follow the theme. Upstream also pins `color-scheme: light` here and flips it
+ * back under `body[data-ds-dark-theme]`; without that flip our scoped rules are
+ * more specific than `:root` and would force every native control light inside
+ * a dark theme.
+ */
+const formScope = ':is(.dsh-subscription-manager, .dsh-subscriptions-settings)';
+export const providerSettingsCss = `
+.dsh-subscription-manager {
+  box-sizing: border-box;
+  padding: 0;
+  border: 0;
+  border-radius: var(--dsw-radius-panel, 16px);
+  background: var(--dsw-alias-bg-layer-2, var(--dsw-alias-bg-layer-1));
+  color: var(--dsw-alias-label-primary);
+  box-shadow: var(--dsw-elevation-prominent, 0 20px 70px #0004);
+  font-family: inherit;
+  font-size: 13px;
+  line-height: 1.5;
+}
+.dsh-subscriptions-settings {
+  font-family: inherit;
+  font-size: 13px;
+  line-height: 1.5;
+}
+.dsh-subscription-manager::backdrop {
+  background: var(--dsw-alias-bg-mask-1, #0006);
+  backdrop-filter: var(--dsw-mask-blur, none);
+}
+${formScope} h2 {
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 500;
+}
+${formScope} h3 {
+  font-size: 14px;
+  line-height: 22px;
+  font-weight: 500;
+}
+${formScope} strong,
+${formScope} .dsh-subscription-label {
+  font-size: 13px;
+  line-height: 1.5;
+  font-weight: 500;
+}
+${formScope} legend {
+  font-size: 14px;
+  line-height: 22px;
+  font-weight: 500;
+}
+${formScope} small,
+${formScope} .dsh-subscription-hint,
+${formScope} [role="status"] {
+  margin: 0;
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--dsw-alias-label-tertiary);
+}
+${formScope} [role="alert"] {
+  margin: 0;
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--dsw-alias-state-error-primary, #b42318);
+}
+${formScope} input:not([type="checkbox"]),
+${formScope} select {
+  box-sizing: border-box;
+  min-width: 0;
+  height: 34px;
+  padding: 0 12px;
+  border: 0.5px solid var(--dsw-alias-border-l4, var(--dsw-alias-border-l2));
+  border-radius: var(--dsw-radius-md, 8px);
+  background: var(--dsw-alias-bg-layer-3, var(--dsw-alias-bg-layer-1));
+  color: var(--dsw-alias-label-primary);
+  font: inherit;
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 1.5;
+}
+${formScope} input::placeholder {
+  color: var(--dsw-alias-label-tertiary);
+  opacity: 1;
+}
+${formScope} input:not([type="checkbox"]):focus-visible,
+${formScope} select:focus-visible {
+  outline: none;
+  border-color: var(--dsw-alias-state-business-primary, var(--dsw-alias-brand-primary));
+}
+${formScope} input:not([type="checkbox"]):disabled,
+${formScope} select:disabled {
+  color: var(--dsw-alias-label-tertiary);
+  cursor: default;
+}
+${formScope} input[aria-invalid="true"] {
+  border-color: var(--dsw-alias-state-error-primary, #b42318);
+}
+${formScope} option {
+  background: var(--dsw-alias-bg-layer-2, var(--dsw-alias-bg-layer-1));
+  color: var(--dsw-alias-label-primary);
+}
+${formScope} label:has(> input[type="checkbox"]) {
+  display: flex;
+  align-items: flex-start;
+  gap: 6px;
+  font-size: 14px;
+  line-height: 20px;
+  cursor: pointer;
+}
+${formScope} input[type="checkbox"] {
+  flex: 0 0 auto;
+  width: 16px;
+  height: 16px;
+  margin: 2px 0;
+  accent-color: var(--dsw-alias-brand-primary);
+  cursor: inherit;
+}
+${formScope} label:has(> input[type="checkbox"]:disabled) {
+  cursor: default;
+  opacity: 0.5;
+}
+${formScope} button {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  min-height: 28px;
+  padding: 0 10px;
+  border: 0.5px solid var(--dsw-alias-border-l3, var(--dsw-alias-border-l2));
+  border-radius: var(--dsw-radius-sm, 6px);
+  background: transparent;
+  color: var(--dsw-alias-label-primary);
+  font: inherit;
+  font-size: 12px;
+  line-height: 18px;
+  cursor: pointer;
+}
+${formScope} button:hover:not(:disabled) {
+  background: var(--dsw-alias-interactive-bg-hover, var(--dsw-alias-bg-layer-3));
+}
+${formScope} button:active:not(:disabled) {
+  background: var(--dsw-alias-interactive-bg-active, var(--dsw-alias-bg-layer-3));
+}
+${formScope} button:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+${formScope} button.dsh-subscription-quiet {
+  border-color: transparent;
+  color: var(--dsw-alias-label-secondary, var(--dsw-alias-label-primary));
+}
+${formScope} :is(footer, .dsh-subscription-dialog-actions) button {
+  min-height: 34px;
+  padding: 0 14px;
+  border-radius: var(--dsw-radius-md, 8px);
+  font-size: 13px;
+  line-height: 1.5;
+}
+${formScope} button.dsh-subscription-primary {
+  border-color: transparent;
+  background: var(--dsw-alias-button-primary-fill, var(--dsw-alias-label-primary));
+  color: var(--dsw-alias-label-primary-foreground, var(--dsw-alias-bg-layer-1));
+  font-weight: 500;
+}
+${formScope} button.dsh-subscription-primary:hover:not(:disabled) {
+  background: var(--dsw-alias-button-primary-hover, var(--dsw-alias-label-secondary));
+}
+${formScope} button:focus-visible,
+${formScope} input[type="checkbox"]:focus-visible,
+${formScope} summary:focus-visible {
+  outline: var(--dsw-focus-ring-width, 2px) solid var(--dsw-focus-ring-color, var(--dsw-alias-state-business-primary));
+  outline-offset: 2px;
+}
+${formScope} summary {
+  border-radius: var(--dsw-radius-sm, 6px);
+}
+${formScope} summary:hover {
+  color: var(--dsw-alias-label-secondary, var(--dsw-alias-label-primary));
+}
+`;
+/** Composer controls retain their own geometry, separate from settings forms. */
+export const subscriptionChromeCss = `
+.dsh-subscription-usage-pill { corner-shape: round; }
+.dsh-subscription-usage-panel {
+  --dsw-elevation-stroke-color: var(--dsw-alias-border-l1);
+  backdrop-filter: var(--dsw-menu-backdrop-filter, none);
+}
+.dsh-subscription-speed button:hover:not(:disabled) {
+  --dsh-subscription-speed-hover: var(--dsw-alias-interactive-bg-hover);
+}
+.dsh-subscription-speed button:active:not(:disabled) {
+  --dsh-subscription-speed-hover: var(--dsw-alias-interactive-bg-active);
+}
+.dsh-subscription-speed button:disabled { opacity: 0.4; cursor: default; }
+.dsh-subscription-speed button:focus-visible,
+.dsh-subscription-usage-pill:focus-visible {
+  outline: var(--dsw-focus-ring-width, 2px) solid var(--dsw-focus-ring-color, var(--dsw-alias-state-business-primary));
+  outline-offset: 2px;
+}
+`;

package/lib/client/reset-action.d.ts

@@ -0,0 +1,14 @@
+/** Explain client-side gating; the server independently revalidates before spending. */
+export declare function resetActionBlock(usage: {
+    windows?: {
+        kind: string;
+        scope?: string;
+        usedPercent: number;
+        resetsAt?: number;
+    }[];
+    resetCredits?: {
+        id?: string;
+        expiresAt?: number;
+    }[];
+    resetCreditsError?: string;
+}, now?: number): 'resetUseGuard' | 'resetUseRefresh' | 'resetUseRestart' | undefined;

package/lib/client/reset-action.js

@@ -0,0 +1,15 @@
+/** Explain client-side gating; the server independently revalidates before spending. */
+export function resetActionBlock(usage, now = Date.now()) {
+    const weekly = usage.windows?.find(w => w.kind === 'weekly' && w.scope === undefined);
+    if (!weekly || !Number.isFinite(weekly.usedPercent))
+        return 'resetUseRefresh';
+    if (weekly.usedPercent < 80)
+        return 'resetUseGuard';
+    if (weekly.resetsAt === undefined || weekly.resetsAt <= now || usage.resetCreditsError)
+        return 'resetUseRefresh';
+    if (!usage.resetCredits?.some(c => c.id))
+        return 'resetUseRestart';
+    if (!usage.resetCredits.some(c => c.id && (c.expiresAt === undefined || c.expiresAt > now)))
+        return 'resetUseRefresh';
+    return undefined;
+}

package/lib/client/reset-credits-view.d.ts

@@ -0,0 +1,53 @@
+import type { ResetCreditView, SubscriptionsSectionInjected } from './SubscriptionsSection.js';
+type Translate = SubscriptionsSectionInjected['t'];
+/** How one grant reads. Color is not the only carrier; the state word is in the row name. */
+export type ResetCreditState = 'available' | 'notUsable' | 'paused' | 'exhausted' | 'expired';
+/**
+ * Classify one grant. Expired outranks every other flag. A future
+ * `cooldownUntil` or `usableNow: false` is not usable even when `claimable`
+ * is true. `claimable` does not change the word: it is not an action.
+ */
+export declare function resetCreditState(credit: ResetCreditView, now: number): ResetCreditState;
+/**
+ * Headline count. Codex passes one entry per credit, so the count is the
+ * list length. Claude passes one entry per grant, so the count is the sum of
+ * `resetsLeft` on grants that are neither expired nor paused. A missing
+ * `resetsLeft` adds nothing; the row says the count is unavailable.
+ */
+export declare function resetCreditsAvailableCount(credits: readonly ResetCreditView[], now: number, mode: 'credits' | 'grants'): number;
+/** Codex Use control. Absent for Claude, which must not render a button. */
+export interface ResetCreditUseAction {
+    accountKey: string;
+    busy: boolean;
+    disabled: boolean;
+    title: string;
+    label: string;
+    onUse: () => void;
+}
+/** Accessible name of one Claude grant row: state, remaining, and expiry, not a control name. */
+export declare function resetCreditRowName(t: Translate, credit: ResetCreditView, now: number): string;
+/** Claude omits an empty grant list; Codex still shows a defined, possibly empty, list. */
+export declare function showsResetCredits(provider: 'codex' | 'claude', credits: readonly ResetCreditView[] | undefined): boolean;
+/** The error line the settings card mounts. Claude never interpolates provider text. */
+export declare function ResetCreditsErrorLine({ provider, message, t }: {
+    provider: 'codex' | 'claude';
+    message: string;
+    t: Translate;
+}): import("react").JSX.Element;
+/** Fixed sentence for Claude. Codex may include the lookup message; Claude must not. */
+export declare function resetCreditsErrorText(provider: 'codex' | 'claude', message: string, t: Translate): string;
+/**
+ * The closed disclosure both providers share. Claude rows are plain text:
+ * no button, no `role="button"`, and `cursor: default`, including when
+ * `claimable` is true.
+ */
+export declare function ResetCreditsDisclosure({ mode, credits, t, now, nextCredit, useAction, statusMessage, }: {
+    mode: 'credits' | 'grants';
+    credits: readonly ResetCreditView[];
+    t: Translate;
+    now?: number;
+    nextCredit?: ResetCreditView;
+    useAction?: ResetCreditUseAction;
+    statusMessage?: string;
+}): import("react").JSX.Element;
+export {};

package/lib/client/reset-credits-view.js

@@ -0,0 +1,103 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { subscriptionCardStyles as cardStyles } from './subscription-card-styles.js';
+const STATE_KEYS = {
+    available: 'resetCreditAvailable',
+    notUsable: 'resetCreditNotUsable',
+    paused: 'resetCreditPaused',
+    exhausted: 'resetCreditExhausted',
+    expired: 'resetCreditExpired',
+};
+/**
+ * Classify one grant. Expired outranks every other flag. A future
+ * `cooldownUntil` or `usableNow: false` is not usable even when `claimable`
+ * is true. `claimable` does not change the word: it is not an action.
+ */
+export function resetCreditState(credit, now) {
+    if (credit.expiresAt !== undefined && credit.expiresAt <= now)
+        return 'expired';
+    if (credit.paused === true)
+        return 'paused';
+    if (credit.resetsLeft === 0)
+        return 'exhausted';
+    if ((credit.cooldownUntil !== undefined && credit.cooldownUntil > now) || credit.usableNow === false)
+        return 'notUsable';
+    return 'available';
+}
+/**
+ * Headline count. Codex passes one entry per credit, so the count is the
+ * list length. Claude passes one entry per grant, so the count is the sum of
+ * `resetsLeft` on grants that are neither expired nor paused. A missing
+ * `resetsLeft` adds nothing; the row says the count is unavailable.
+ */
+export function resetCreditsAvailableCount(credits, now, mode) {
+    if (mode === 'credits')
+        return credits.length;
+    let sum = 0;
+    for (const credit of credits) {
+        const state = resetCreditState(credit, now);
+        if (state === 'expired' || state === 'paused')
+            continue;
+        if (typeof credit.resetsLeft === 'number' && Number.isFinite(credit.resetsLeft) && credit.resetsLeft > 0) {
+            sum += credit.resetsLeft;
+        }
+    }
+    return sum;
+}
+function expiryText(t, credit) {
+    return credit.expiresAt === undefined
+        ? t('resetCreditExpiryUnknown')
+        : t('resetCreditExpires', { date: new Date(credit.expiresAt).toLocaleString() });
+}
+function remainingText(t, credit) {
+    const left = credit.resetsLeft;
+    const total = credit.resetsTotal;
+    const hasLeft = typeof left === 'number' && Number.isFinite(left);
+    const hasTotal = typeof total === 'number' && Number.isFinite(total);
+    if (hasLeft && hasTotal)
+        return t('resetCreditRemaining', { left, total });
+    if (hasLeft)
+        return t('resetCreditLeft', { left });
+    return t('resetCreditRemainingUnknown');
+}
+/** Accessible name of one Claude grant row: state, remaining, and expiry, not a control name. */
+export function resetCreditRowName(t, credit, now) {
+    const state = resetCreditState(credit, now);
+    const parts = [t('resetCreditFull'), t(STATE_KEYS[state]), remainingText(t, credit), expiryText(t, credit)];
+    if (state === 'notUsable' && credit.cooldownUntil !== undefined && credit.cooldownUntil > now) {
+        parts.push(t('resetCreditCooldownUntil', { date: new Date(credit.cooldownUntil).toLocaleString() }));
+    }
+    return parts.join(', ');
+}
+/** Claude omits an empty grant list; Codex still shows a defined, possibly empty, list. */
+export function showsResetCredits(provider, credits) {
+    if (provider === 'codex')
+        return credits !== undefined;
+    return (credits?.length ?? 0) > 0;
+}
+/** The error line the settings card mounts. Claude never interpolates provider text. */
+export function ResetCreditsErrorLine({ provider, message, t }) {
+    return _jsx("p", { style: cardStyles.error, children: resetCreditsErrorText(provider, message, t) });
+}
+/** Fixed sentence for Claude. Codex may include the lookup message; Claude must not. */
+export function resetCreditsErrorText(provider, message, t) {
+    return provider === 'claude' ? t('resetCreditsErrorFixed') : t('resetCreditsError', { message });
+}
+const summaryStyle = {
+    ...cardStyles.usageMeta, cursor: 'pointer', listStyle: 'none', justifyContent: 'flex-start', gap: 6,
+};
+/**
+ * The closed disclosure both providers share. Claude rows are plain text:
+ * no button, no `role="button"`, and `cursor: default`, including when
+ * `claimable` is true.
+ */
+export function ResetCreditsDisclosure({ mode, credits, t, now = Date.now(), nextCredit, useAction, statusMessage, }) {
+    const count = resetCreditsAvailableCount(credits, now, mode);
+    return (_jsxs("details", { className: "subscriptions-reset-credits", style: cardStyles.usageRow, children: [_jsxs("summary", { style: summaryStyle, children: [_jsx("svg", { "aria-hidden": "true", width: "12", height: "12", viewBox: "0 0 16 16", style: { flexShrink: 0 }, children: _jsx("path", { d: "m6 3 5 5-5 5", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }), _jsx("span", { children: t('resetCreditsTitle') }), mode === 'grants' && _jsx("span", { children: t('resetCreditReadOnlyLabel') }), _jsx("span", { style: { marginLeft: 'auto' }, children: t('resetCreditsAvailable', { count }) })] }), _jsx("style", { children: '.subscriptions-reset-credits > summary::-webkit-details-marker { display: none; }'
+                    + '.subscriptions-reset-credits[open] > summary > svg { transform: rotate(90deg); }' }), _jsxs("div", { style: { paddingLeft: 18, marginTop: 6 }, children: [mode === 'grants' && _jsx("p", { style: cardStyles.status, children: t('resetCreditReadOnly') }), credits.map((credit, index) => {
+                        const state = resetCreditState(credit, now);
+                        const showUse = mode === 'credits' && useAction !== undefined && credit === nextCredit;
+                        return (_jsxs("div", { "data-reset-state": mode === 'grants' ? state : undefined, "data-reset-claimable": mode === 'grants' && credit.claimable === true ? 'true' : undefined, role: mode === 'grants' ? 'group' : undefined, "aria-label": mode === 'grants' ? resetCreditRowName(t, credit, now) : undefined, style: { ...cardStyles.usageMeta, minHeight: 28, gap: 12, cursor: mode === 'grants' ? 'default' : undefined }, children: [_jsxs("span", { style: { display: 'inline-flex', alignItems: 'center', gap: 8, flexShrink: 0 }, children: [t('resetCreditFull'), mode === 'grants' && (_jsx("span", { "aria-hidden": "true", "data-reset-state-word": state, children: t(STATE_KEYS[state]) })), showUse && (_jsx("button", { type: "button", "aria-disabled": useAction.disabled, title: useAction.title, style: { minHeight: 22, height: 22, padding: '0 7px', borderRadius: 6,
+                                                opacity: useAction.disabled ? 0.35 : 1, cursor: useAction.disabled ? 'not-allowed' : 'pointer' }, onClick: () => { if (!useAction.disabled)
+                                                useAction.onUse(); }, children: useAction.busy ? t('resetUseChecking') : useAction.label }))] }), _jsxs("span", { style: { textAlign: 'right' }, children: [mode === 'grants' && _jsxs("span", { "aria-hidden": "true", children: [remainingText(t, credit), " \u00B7 "] }), mode === 'grants' && state === 'notUsable' && credit.cooldownUntil !== undefined && credit.cooldownUntil > now && (_jsxs("span", { "aria-hidden": "true", children: [t('resetCreditCooldownUntil', { date: new Date(credit.cooldownUntil).toLocaleString() }), " \u00B7 "] })), _jsx("span", { "aria-hidden": mode === 'grants' ? true : undefined, children: expiryText(t, credit) })] })] }, credit.id ?? index));
+                    }), statusMessage !== undefined && statusMessage !== '' && _jsx("p", { role: "status", style: cardStyles.status, children: statusMessage })] })] }));
+}