dsh-plugin-subscription-usage 0.0.0-stage → 0.1.0

package/lib/client/store.js

@@ -0,0 +1,129 @@
+import { call, isMetered, USAGE_PROVIDERS } from './rpc.js';
+export const POLL_MS = 5 * 60_000;
+export const usageKey = (provider, account) => `${provider}/${account}`;
+export class SubscriptionsStore {
+    rpc;
+    snapshot = { status: undefined, statusError: undefined, usage: new Map(), refreshing: new Set() };
+    listeners = new Set();
+    lastRevision = -1;
+    statusInFlight;
+    timer;
+    /** The session the gauge is showing, so `status` reports its serving account. */
+    sessionId;
+    constructor(rpc) {
+        this.rpc = rpc;
+    }
+    getSnapshot = () => this.snapshot;
+    subscribe = (listener) => {
+        this.listeners.add(listener);
+        if (this.listeners.size === 1)
+            this.start();
+        return () => {
+            this.listeners.delete(listener);
+            if (this.listeners.size === 0)
+                this.stop();
+        };
+    };
+    /** Report the session whose serving account the `status` read should name. */
+    focusSession(sessionId) {
+        if (this.sessionId === sessionId)
+            return;
+        this.sessionId = sessionId;
+        void this.refreshStatus();
+    }
+    /** Re-read login status; usage follows when the Host's revision moved. */
+    refreshStatus() {
+        this.statusInFlight ??= this.readStatus().finally(() => { this.statusInFlight = undefined; });
+        return this.statusInFlight;
+    }
+    /** Read every signed-in account's usage under one reason. */
+    async refreshUsage(reason, only) {
+        const status = this.snapshot.status;
+        if (status === undefined)
+            return;
+        await Promise.all(USAGE_PROVIDERS.filter(p => (only === undefined || p === only) && isMetered(status, p))
+            .flatMap(provider => (status.providers[provider]?.accounts ?? []).map(account => this.readUsage(provider, account.key, reason))));
+    }
+    async readStatus() {
+        try {
+            const status = await call(this.rpc, 'status', this.sessionId === undefined ? {} : { sessionId: this.sessionId });
+            const known = new Set(USAGE_PROVIDERS.flatMap(p => (status.providers[p]?.accounts ?? []).map(a => usageKey(p, a.key))));
+            const usage = new Map([...this.snapshot.usage].filter(([key]) => known.has(key)));
+            this.publish({ ...this.snapshot, status, statusError: undefined, usage });
+            if (status.usageRevision !== this.lastRevision) {
+                this.lastRevision = status.usageRevision;
+                await this.refreshUsage('poll');
+            }
+        }
+        catch (error) {
+            this.publish({ ...this.snapshot, statusError: error instanceof Error ? error.message : String(error) });
+        }
+    }
+    async readUsage(provider, account, reason) {
+        const key = usageKey(provider, account);
+        if (!this.snapshot.usage.has(key))
+            this.setUsage(key, { kind: 'loading' });
+        this.publish({ ...this.snapshot, refreshing: new Set([...this.snapshot.refreshing, key]) });
+        try {
+            const usage = await call(this.rpc, 'usage', { provider, account, reason });
+            this.setUsage(key, { kind: 'ready', usage, receivedAt: Date.now() });
+        }
+        catch (error) {
+            const previous = this.snapshot.usage.get(key);
+            // Keep showing a real snapshot through a failure; the Host already marks it stale.
+            if (previous?.kind !== 'ready')
+                this.setUsage(key, { kind: 'error', message: error instanceof Error ? error.message : String(error) });
+        }
+        finally {
+            const refreshing = new Set(this.snapshot.refreshing);
+            refreshing.delete(key);
+            this.publish({ ...this.snapshot, refreshing });
+        }
+    }
+    setUsage(key, entry) {
+        const usage = new Map(this.snapshot.usage);
+        usage.set(key, entry);
+        this.publish({ ...this.snapshot, usage });
+    }
+    publish(next) {
+        this.snapshot = next;
+        for (const listener of this.listeners)
+            listener();
+    }
+    onVisibility = () => {
+        if (document.visibilityState === 'visible')
+            void this.refreshStatus();
+    };
+    start() {
+        void this.refreshStatus();
+        this.timer = setInterval(() => {
+            if (document.visibilityState !== 'visible')
+                return;
+            void this.refreshStatus().then(() => this.refreshUsage('poll'));
+        }, POLL_MS);
+        document.addEventListener('visibilitychange', this.onVisibility);
+    }
+    stop() {
+        if (this.timer !== undefined)
+            clearInterval(this.timer);
+        this.timer = undefined;
+        document.removeEventListener('visibilitychange', this.onVisibility);
+    }
+}
+/** The account a provider is using now: the one that served last, else the default, else the first. */
+export function activeAccountKey(status) {
+    if (status === undefined || status.accounts.length === 0)
+        return undefined;
+    const served = status.servingAccount;
+    if (served !== undefined && status.accounts.some(a => a.key === served))
+        return served;
+    return (status.accounts.find(a => a.isDefault) ?? status.accounts[0])?.key;
+}
+/** The active account shown in full, and the others that fold behind one row. */
+export function splitAccounts(status) {
+    const key = activeAccountKey(status);
+    const active = status.accounts.find(a => a.key === key);
+    if (active === undefined)
+        return undefined;
+    return { active, rest: status.accounts.filter(a => a !== active) };
+}

package/lib/client/styles.d.ts

@@ -0,0 +1,7 @@
+/**
+ * One stylesheet for every surface, prefixed `dsm-`, colored only through
+ * `--dsw-alias-*` tokens. Card and button values copy the Models page
+ * (`dsh-client-ui-settings-models` 0.2.2-rc.1); meters follow
+ * design/usage-draft.html v3.
+ */
+export declare const css = "\n.dsm-sub { display: flex; flex-direction: column; gap: 8px; min-width: 0; font-size: 13px; line-height: 20px; color: var(--dsw-alias-label-primary); }\n.dsm-sub .dsm-card-error { color: var(--dsw-alias-state-error-primary); font-size: 12px; }\n.dsm-num, .dsm-w, .dsm-mini, .dsm-fresh { font-variant-numeric: tabular-nums; }\n\n.dsm-btn { box-sizing: border-box; height: 28px; padding: 0 10px; border-radius: var(--dsw-radius-sm); font: inherit; font-size: 12px; line-height: 18px;\n  cursor: pointer; border: .5px solid var(--dsw-alias-border-l3); background: transparent; color: var(--dsw-alias-label-primary);\n  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }\n.dsm-btn:hover:not(:disabled) { background: var(--dsw-alias-interactive-bg-hover-solid, var(--dsw-alias-interactive-bg-hover)); }\n.dsm-btn:disabled { opacity: .4; cursor: default; }\n.dsm-btn:focus-visible, .dsm-fold:focus-visible, .dsm-seg button:focus-visible, .dsm-switch:focus-visible, .dsm-chip:focus-visible, .dsm-gauge:focus-visible, .dsm-tab:focus-visible {\n  box-shadow: 0 0 0 2px var(--dsw-focus-ring-color, var(--dsw-alias-state-business-primary)); outline: none; }\n.dsm-btn.dsm-primary { background: var(--dsw-alias-button-primary-fill, var(--dsw-alias-label-primary)); color: var(--dsw-alias-label-primary-foreground, var(--dsw-alias-bg-base)); border-color: transparent; }\n.dsm-btn.dsm-primary:hover:not(:disabled) { background: var(--dsw-alias-button-primary-hover, var(--dsw-alias-label-primary)); }\n.dsm-btn.dsm-ghost { border-color: transparent; color: var(--dsw-alias-label-secondary); }\n.dsm-btn.dsm-danger { border-color: transparent; color: var(--dsw-alias-state-error-primary); }\n.dsm-btn.dsm-danger:hover:not(:disabled) { background: var(--dsw-alias-interactive-bg-hover-danger, var(--dsw-alias-interactive-bg-hover)); }\n.dsm-btn.dsm-icon { width: 28px; padding: 0; justify-content: center; border-color: transparent; color: var(--dsw-alias-label-secondary); }\n.dsm-btn.dsm-icon.dsm-sm { width: 24px; height: 24px; }\n.dsm-spinning svg { animation: dsm-spin .7s linear infinite; }\n@keyframes dsm-spin { to { transform: rotate(360deg); } }\n\n.dsm-acct { display: flex; flex-direction: column; gap: 6px; min-width: 0; }\n.dsm-acct-head { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--dsw-alias-label-secondary); }\n.dsm-acct-name { color: var(--dsw-alias-label-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }\n.dsm-tag { flex: none; font-size: 11px; line-height: 16px; padding: 0 5px; border-radius: var(--dsw-radius-xs); border: .5px solid var(--dsw-alias-border-l3); color: var(--dsw-alias-label-secondary); }\n.dsm-glyph { display: inline-flex; flex: none; color: var(--dsw-alias-label-tertiary); }\n.dsm-glyph.dsm-star { color: var(--dsw-alias-state-warn-primary); }\n.dsm-glyph.dsm-live { color: var(--dsw-alias-state-business-primary); }\n.dsm-fresh { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--dsw-alias-label-tertiary); white-space: nowrap; flex: none; }\n.dsm-fresh.dsm-stale { color: var(--dsw-alias-state-warn-primary); }\n.dsm-live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--dsw-alias-state-success-primary); }\n\n/* Fixed label, value and time columns, so bars line up across accounts and providers. */\n.dsm-wins { display: grid; grid-template-columns: fit-content(132px) minmax(48px, 1fr) 40px 92px; column-gap: 12px; row-gap: 6px; align-items: center; }\n.dsm-w { display: contents; font-size: 12px; line-height: 18px; }\n.dsm-wl { color: var(--dsw-alias-label-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; line-height: 18px; }\n.dsm-wv { text-align: right; font-weight: 600; font-size: 13px; line-height: 18px; color: var(--dsw-alias-label-primary); }\n.dsm-wt { text-align: right; color: var(--dsw-alias-label-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; line-height: 18px; }\n.dsm-w.dsm-tight .dsm-wv, .dsm-w.dsm-tight .dsm-wt { color: var(--dsw-alias-state-warn-primary); }\n.dsm-w.dsm-over .dsm-wv, .dsm-w.dsm-over .dsm-wt, .dsm-w.dsm-out .dsm-wv, .dsm-w.dsm-out .dsm-wt { color: var(--dsw-alias-state-error-primary); }\n\n.dsm-bar { position: relative; display: block; border-radius: 3px; background: color-mix(in srgb, var(--dsw-alias-label-primary) 9%, transparent); color: var(--dsw-alias-state-success-primary); }\n.dsm-fill { position: absolute; top: 0; bottom: 0; left: 0; border-radius: inherit; background: currentColor; transition: width .5s cubic-bezier(.16, 1, .3, 1); }\n.dsm-proj { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(90deg, transparent 0 2px, color-mix(in srgb, currentColor 55%, transparent) 2px 3px); }\n.dsm-bar.dsm-tight { color: var(--dsw-alias-state-warn-primary); }\n.dsm-bar.dsm-over, .dsm-bar.dsm-out { color: var(--dsw-alias-state-error-primary); }\n.dsm-bar.dsm-unknown .dsm-fill { display: none; }\n\n.dsm-minis { display: inline-flex; gap: 14px; flex: none; }\n.dsm-mini { display: inline-grid; grid-template-columns: auto 32px 34px; align-items: center; gap: 5px; font-size: 11px; line-height: 16px; }\n.dsm-mini i { font-style: normal; color: var(--dsw-alias-label-tertiary); max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.dsm-mini b { font-weight: 500; text-align: right; color: var(--dsw-alias-label-primary); font-size: 12px; }\n.dsm-mini.dsm-tight b { color: var(--dsw-alias-state-warn-primary); }\n.dsm-mini.dsm-over b, .dsm-mini.dsm-out b { color: var(--dsw-alias-state-error-primary); }\n\n.dsm-fold { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; width: 100%; min-height: 32px; padding: 0 6px 0 2px;\n  border: 0; background: none; text-align: left; cursor: pointer; border-radius: var(--dsw-radius-md); font: inherit; font-size: 12px; color: var(--dsw-alias-label-secondary); }\n.dsm-fold:hover { background: var(--dsw-alias-interactive-bg-hover); }\n.dsm-fold .dsm-chev { color: var(--dsw-alias-label-tertiary); transition: transform .2s cubic-bezier(.16, 1, .3, 1); }\n.dsm-fold[aria-expanded=\"true\"] .dsm-chev { transform: rotate(90deg); }\n.dsm-fold-name { display: flex; align-items: center; gap: 6px; min-width: 0; }\n.dsm-fold-name > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.dsm-fold-body { display: flex; flex-direction: column; gap: 8px; padding: 2px 0 4px 24px; min-width: 0; }\n\n.dsm-foot { display: flex; align-items: center; gap: 6px; }\n.dsm-muted { color: var(--dsw-alias-label-tertiary); font-size: 12px; line-height: 18px; margin: 0; display: inline-flex; align-items: center; gap: 6px; }\n.dsm-alert { display: flex; gap: 8px; align-items: center; padding: 6px 6px 6px 10px; border-radius: var(--dsw-radius-lg);\n  background: color-mix(in srgb, var(--dsw-alias-state-error-primary) 10%, transparent); }\n.dsm-alert > svg { color: var(--dsw-alias-state-error-primary); }\n.dsm-alert .dsm-btn { margin-left: auto; }\n\n.dsm-panel { border-radius: var(--dsw-radius-lg); background: var(--dsw-alias-bg-module-platform, var(--dsw-alias-bg-layer-2)); padding: 2px 12px 12px; display: flex; flex-direction: column; gap: 8px; }\n.dsm-tabs { display: flex; gap: 2px; border-bottom: .5px solid var(--dsw-alias-border-l2); margin: 0 -12px; padding: 0 8px; }\n.dsm-tab { border: 0; background: none; padding: 9px 8px 8px; font: inherit; font-size: 13px; color: var(--dsw-alias-label-tertiary); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -.5px; }\n.dsm-tab[aria-selected=\"true\"] { color: var(--dsw-alias-label-primary); border-bottom-color: var(--dsw-alias-label-primary); }\n.dsm-row { display: flex; align-items: center; gap: 10px; min-height: 36px; font-size: 13px; }\n.dsm-row + .dsm-row { border-top: .5px solid var(--dsw-alias-border-l1); }\n.dsm-grow { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; }\n.dsm-grow > .dsm-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }\n.dsm-note { color: var(--dsw-alias-label-tertiary); font-size: 12px; }\n.dsm-list { max-height: 280px; overflow-y: auto; }\n.dsm-switch { width: 30px; height: 18px; border-radius: 9px; background: var(--dsw-alias-state-idle-primary); border: 0; position: relative; cursor: pointer; flex: none; padding: 0; }\n.dsm-switch::after { content: \"\"; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .2s cubic-bezier(.16, 1, .3, 1); }\n.dsm-switch[aria-checked=\"true\"] { background: var(--dsw-alias-state-success-primary); }\n.dsm-switch[aria-checked=\"true\"]::after { transform: translateX(12px); }\n.dsm-switch:disabled { opacity: .4; cursor: default; }\n.dsm-input { box-sizing: border-box; height: 30px; width: 100%; border-radius: var(--dsw-radius-md); border: .5px solid var(--dsw-alias-border-l3);\n  background: var(--dsw-alias-bg-layer-1); color: var(--dsw-alias-label-primary); padding: 0 10px; font: inherit; font-size: 13px; }\n.dsm-select { height: 26px; border-radius: var(--dsw-radius-sm); border: .5px solid var(--dsw-alias-border-l3); background: var(--dsw-alias-bg-layer-1);\n  color: var(--dsw-alias-label-primary); font: inherit; font-size: 12px; padding: 0 4px; max-width: 160px; }\n.dsm-panel-foot { display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding-top: 4px; }\n.dsm-panel-foot .dsm-card-error { margin-right: auto; }\n.dsm-seg { display: inline-flex; padding: 2px; border-radius: 7px; background: color-mix(in srgb, var(--dsw-alias-label-primary) 9%, transparent); gap: 2px; flex: none; }\n.dsm-seg button { border: 0; background: transparent; height: 22px; padding: 0 9px; border-radius: 5px; font: inherit; font-size: 12px; color: var(--dsw-alias-label-secondary); cursor: pointer; }\n.dsm-seg button[aria-pressed=\"true\"] { background: var(--dsw-alias-bg-layer-1); color: var(--dsw-alias-label-primary); box-shadow: 0 1px 2px #0000002e; }\n.dsm-chips { display: flex; flex-wrap: wrap; gap: 6px; }\n.dsm-chip { height: 26px; padding: 0 10px 0 8px; border-radius: 13px; border: .5px solid var(--dsw-alias-border-l3); background: transparent; font: inherit; font-size: 12px;\n  cursor: pointer; display: inline-flex; align-items: center; gap: 5px; color: var(--dsw-alias-label-secondary); }\n.dsm-chip[aria-pressed=\"true\"] { background: var(--dsw-alias-label-primary); color: var(--dsw-alias-bg-base); border-color: transparent; }\n.dsm-chip:disabled { opacity: .4; cursor: default; }\n\n.dsm-signin { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: var(--dsw-radius-lg); background: var(--dsw-alias-bg-module-platform, var(--dsw-alias-bg-layer-2)); }\n.dsm-steps { display: flex; gap: 16px; margin: 0; padding: 0; list-style: none; font-size: 12px; flex-wrap: wrap; }\n.dsm-steps li { display: inline-flex; gap: 6px; align-items: center; color: var(--dsw-alias-label-tertiary); }\n.dsm-steps li[data-s=\"done\"] { color: var(--dsw-alias-state-success-primary); }\n.dsm-steps li[data-s=\"now\"] { color: var(--dsw-alias-label-primary); }\n.dsm-spin { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--dsw-alias-border-l3); border-top-color: currentColor; animation: dsm-spin .8s linear infinite; flex: none; box-sizing: border-box; }\n.dsm-code { font: 600 20px/28px var(--dsw-font-family-mono, ui-monospace, Menlo, monospace); letter-spacing: .12em; padding: 4px 12px; border-radius: var(--dsw-radius-md);\n  background: var(--dsw-alias-bg-layer-1); border: .5px solid var(--dsw-alias-border-l2); }\n.dsm-fallback summary { cursor: pointer; color: var(--dsw-alias-label-tertiary); font-size: 12px; list-style: none; display: inline-flex; gap: 4px; align-items: center; }\n.dsm-fallback summary::-webkit-details-marker { display: none; }\n.dsm-fallback[open] summary { margin-bottom: 6px; }\n\n.dsm-footer-block { margin-top: 18px; padding-top: 14px; border-top: .5px solid var(--dsw-alias-border-l2); display: flex; flex-direction: column; max-width: 720px; }\n.dsm-footer-block h3 { margin: 0 0 4px; font-size: 14px; font-weight: 500; line-height: 22px; color: var(--dsw-alias-label-primary); }\n.dsm-footer-block .dsm-row { min-height: 40px; color: var(--dsw-alias-label-primary); }\n\n.dsm-gauge-slot { position: relative; display: inline-flex; }\n.dsm-gauge { display: inline-flex; align-items: center; gap: 10px; height: 24px; padding: 0 8px; border-radius: 12px; border: 0; background: transparent; cursor: pointer;\n  color: var(--dsw-alias-label-secondary); font: inherit; font-size: 12px; }\n.dsm-gauge:hover, .dsm-gauge[aria-expanded=\"true\"] { background: var(--dsw-alias-interactive-bg-hover); }\n.dsm-gp { display: inline-flex; align-items: center; gap: 8px; }\n.dsm-gp + .dsm-gp { padding-left: 10px; border-left: .5px solid var(--dsw-alias-border-l3); }\n.dsm-gp-name { color: var(--dsw-alias-label-primary); }\n.dsm-gp .dsm-minis { gap: 10px; }\n.dsm-gp .dsm-mini { grid-template-columns: auto 26px auto; }\n\n.dsm-pop { position: fixed; z-index: 1000; width: 420px; max-width: calc(100vw - 20px); box-sizing: border-box; background: var(--dsw-specific-menu, var(--dsw-alias-bg-overlay));\n  backdrop-filter: var(--dsw-menu-backdrop-filter, none); border-radius: var(--dsw-radius-xl); box-shadow: var(--dsw-elevation-panel, 0 12px 32px #0006);\n  border: .5px solid var(--dsw-alias-border-l2); padding: 6px; display: flex; flex-direction: column; color: var(--dsw-alias-label-primary);\n  text-align: left; font-size: 13px; line-height: 20px; max-height: min(560px, calc(100vh - 24px)); overflow: hidden auto; }\n.dsm-pop-head { display: flex; align-items: center; gap: 2px; padding: 2px 2px 6px 8px; }\n.dsm-pop-head b { font-weight: 600; font-size: 13px; margin-right: auto; }\n.dsm-psec { border-top: .5px solid var(--dsw-alias-border-l2); padding: 4px 0; }\n.dsm-psec-head { display: flex; align-items: center; gap: 2px; }\n.dsm-psec-head .dsm-fold { flex: 1; }\n.dsm-psec-name { color: var(--dsw-alias-label-primary); font-weight: 500; font-size: 13px; }\n.dsm-psec .dsm-fold-body { padding: 0 8px 6px 26px; gap: 6px; }\n.dsm-psec .dsm-fold-body .dsm-fold-body { padding: 4px 0 0; }\n.dsm-psec .dsm-fold-body .dsm-fold { margin-left: -24px; width: calc(100% + 24px); }\n.dsm-pacct { display: flex; flex-direction: column; gap: 4px; min-width: 0; }\n.dsm-pacct .dsm-acct-head { font-size: 12px; line-height: 18px; }\n.dsm-others { padding-bottom: 0; }\n.dsm-others .dsm-psec { border-top: 0; padding: 0 0 0 16px; }\n.dsm-gauge > svg { color: var(--dsw-alias-label-secondary); }\n.dsm-pin { color: var(--dsw-alias-label-tertiary); }\n.dsm-pin[aria-pressed=\"true\"] { color: var(--dsw-alias-label-primary); }\n\n.dsm-notice { display: flex; gap: 8px; align-items: center; padding: 6px 6px 6px 12px; font-size: 13px; line-height: 20px; color: var(--dsw-alias-label-primary);\n  background: var(--dsw-specific-menu, var(--dsw-alias-bg-overlay)); border-radius: var(--dsw-radius-lg); border: .5px solid var(--dsw-alias-border-l2);\n  box-shadow: var(--dsw-elevation-panel, 0 12px 32px #0006); animation: dsm-drop .45s cubic-bezier(.16, 1, .3, 1); }\n.dsm-notice > svg { color: var(--dsw-alias-state-warn-primary); }\n.dsm-notice.dsm-err > svg { color: var(--dsw-alias-state-error-primary); }\n.dsm-notice-host { position: fixed; top: 52px; right: 20px; z-index: 1000; max-width: calc(100vw - 40px); }\n@keyframes dsm-drop { from { opacity: 0; transform: translateY(-8px); filter: blur(4px); } }\n\n.dsh-subscription-speed button:hover:not(:disabled) { --dsh-subscription-speed-hover: var(--dsw-alias-interactive-bg-hover); }\n.dsh-subscription-speed button:active:not(:disabled) { --dsh-subscription-speed-hover: var(--dsw-alias-interactive-bg-active); }\n.dsh-subscription-speed button:disabled { opacity: .4; cursor: default; }\n.dsh-subscription-speed button:focus-visible { outline: var(--dsw-focus-ring-width, 2px) solid var(--dsw-focus-ring-color, var(--dsw-alias-state-business-primary)); outline-offset: 2px; }\n\n@media (prefers-reduced-motion: reduce) { .dsm-sub *, .dsm-pop *, .dsm-notice, .dsm-fill { animation: none !important; transition: none !important; } }\n@media (max-width: 640px) {\n  .dsm-wins { column-gap: 8px; grid-template-columns: fit-content(96px) minmax(40px, 1fr) 36px 84px; }\n  .dsm-minis { gap: 8px; } .dsm-mini { grid-template-columns: auto 22px 32px; } .dsm-mini i { max-width: 56px; }\n  .dsm-gp-name { display: none; }\n  .dsm-footer-block .dsm-row { flex-wrap: wrap; padding: 6px 0; }\n}\n";

package/lib/client/styles.js

@@ -0,0 +1,176 @@
+/**
+ * One stylesheet for every surface, prefixed `dsm-`, colored only through
+ * `--dsw-alias-*` tokens. Card and button values copy the Models page
+ * (`dsh-client-ui-settings-models` 0.2.2-rc.1); meters follow
+ * design/usage-draft.html v3.
+ */
+export const css = `
+.dsm-sub { display: flex; flex-direction: column; gap: 8px; min-width: 0; font-size: 13px; line-height: 20px; color: var(--dsw-alias-label-primary); }
+.dsm-sub .dsm-card-error { color: var(--dsw-alias-state-error-primary); font-size: 12px; }
+.dsm-num, .dsm-w, .dsm-mini, .dsm-fresh { font-variant-numeric: tabular-nums; }
+
+.dsm-btn { box-sizing: border-box; height: 28px; padding: 0 10px; border-radius: var(--dsw-radius-sm); font: inherit; font-size: 12px; line-height: 18px;
+  cursor: pointer; border: .5px solid var(--dsw-alias-border-l3); background: transparent; color: var(--dsw-alias-label-primary);
+  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
+.dsm-btn:hover:not(:disabled) { background: var(--dsw-alias-interactive-bg-hover-solid, var(--dsw-alias-interactive-bg-hover)); }
+.dsm-btn:disabled { opacity: .4; cursor: default; }
+.dsm-btn:focus-visible, .dsm-fold:focus-visible, .dsm-seg button:focus-visible, .dsm-switch:focus-visible, .dsm-chip:focus-visible, .dsm-gauge:focus-visible, .dsm-tab:focus-visible {
+  box-shadow: 0 0 0 2px var(--dsw-focus-ring-color, var(--dsw-alias-state-business-primary)); outline: none; }
+.dsm-btn.dsm-primary { background: var(--dsw-alias-button-primary-fill, var(--dsw-alias-label-primary)); color: var(--dsw-alias-label-primary-foreground, var(--dsw-alias-bg-base)); border-color: transparent; }
+.dsm-btn.dsm-primary:hover:not(:disabled) { background: var(--dsw-alias-button-primary-hover, var(--dsw-alias-label-primary)); }
+.dsm-btn.dsm-ghost { border-color: transparent; color: var(--dsw-alias-label-secondary); }
+.dsm-btn.dsm-danger { border-color: transparent; color: var(--dsw-alias-state-error-primary); }
+.dsm-btn.dsm-danger:hover:not(:disabled) { background: var(--dsw-alias-interactive-bg-hover-danger, var(--dsw-alias-interactive-bg-hover)); }
+.dsm-btn.dsm-icon { width: 28px; padding: 0; justify-content: center; border-color: transparent; color: var(--dsw-alias-label-secondary); }
+.dsm-btn.dsm-icon.dsm-sm { width: 24px; height: 24px; }
+.dsm-spinning svg { animation: dsm-spin .7s linear infinite; }
+@keyframes dsm-spin { to { transform: rotate(360deg); } }
+
+.dsm-acct { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
+.dsm-acct-head { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--dsw-alias-label-secondary); }
+.dsm-acct-name { color: var(--dsw-alias-label-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
+.dsm-tag { flex: none; font-size: 11px; line-height: 16px; padding: 0 5px; border-radius: var(--dsw-radius-xs); border: .5px solid var(--dsw-alias-border-l3); color: var(--dsw-alias-label-secondary); }
+.dsm-glyph { display: inline-flex; flex: none; color: var(--dsw-alias-label-tertiary); }
+.dsm-glyph.dsm-star { color: var(--dsw-alias-state-warn-primary); }
+.dsm-glyph.dsm-live { color: var(--dsw-alias-state-business-primary); }
+.dsm-fresh { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--dsw-alias-label-tertiary); white-space: nowrap; flex: none; }
+.dsm-fresh.dsm-stale { color: var(--dsw-alias-state-warn-primary); }
+.dsm-live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--dsw-alias-state-success-primary); }
+
+/* Fixed label, value and time columns, so bars line up across accounts and providers. */
+.dsm-wins { display: grid; grid-template-columns: fit-content(132px) minmax(48px, 1fr) 40px 92px; column-gap: 12px; row-gap: 6px; align-items: center; }
+.dsm-w { display: contents; font-size: 12px; line-height: 18px; }
+.dsm-wl { color: var(--dsw-alias-label-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; line-height: 18px; }
+.dsm-wv { text-align: right; font-weight: 600; font-size: 13px; line-height: 18px; color: var(--dsw-alias-label-primary); }
+.dsm-wt { text-align: right; color: var(--dsw-alias-label-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; line-height: 18px; }
+.dsm-w.dsm-tight .dsm-wv, .dsm-w.dsm-tight .dsm-wt { color: var(--dsw-alias-state-warn-primary); }
+.dsm-w.dsm-over .dsm-wv, .dsm-w.dsm-over .dsm-wt, .dsm-w.dsm-out .dsm-wv, .dsm-w.dsm-out .dsm-wt { color: var(--dsw-alias-state-error-primary); }
+
+.dsm-bar { position: relative; display: block; border-radius: 3px; background: color-mix(in srgb, var(--dsw-alias-label-primary) 9%, transparent); color: var(--dsw-alias-state-success-primary); }
+.dsm-fill { position: absolute; top: 0; bottom: 0; left: 0; border-radius: inherit; background: currentColor; transition: width .5s cubic-bezier(.16, 1, .3, 1); }
+.dsm-proj { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(90deg, transparent 0 2px, color-mix(in srgb, currentColor 55%, transparent) 2px 3px); }
+.dsm-bar.dsm-tight { color: var(--dsw-alias-state-warn-primary); }
+.dsm-bar.dsm-over, .dsm-bar.dsm-out { color: var(--dsw-alias-state-error-primary); }
+.dsm-bar.dsm-unknown .dsm-fill { display: none; }
+
+.dsm-minis { display: inline-flex; gap: 14px; flex: none; }
+.dsm-mini { display: inline-grid; grid-template-columns: auto 32px 34px; align-items: center; gap: 5px; font-size: 11px; line-height: 16px; }
+.dsm-mini i { font-style: normal; color: var(--dsw-alias-label-tertiary); max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.dsm-mini b { font-weight: 500; text-align: right; color: var(--dsw-alias-label-primary); font-size: 12px; }
+.dsm-mini.dsm-tight b { color: var(--dsw-alias-state-warn-primary); }
+.dsm-mini.dsm-over b, .dsm-mini.dsm-out b { color: var(--dsw-alias-state-error-primary); }
+
+.dsm-fold { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; width: 100%; min-height: 32px; padding: 0 6px 0 2px;
+  border: 0; background: none; text-align: left; cursor: pointer; border-radius: var(--dsw-radius-md); font: inherit; font-size: 12px; color: var(--dsw-alias-label-secondary); }
+.dsm-fold:hover { background: var(--dsw-alias-interactive-bg-hover); }
+.dsm-fold .dsm-chev { color: var(--dsw-alias-label-tertiary); transition: transform .2s cubic-bezier(.16, 1, .3, 1); }
+.dsm-fold[aria-expanded="true"] .dsm-chev { transform: rotate(90deg); }
+.dsm-fold-name { display: flex; align-items: center; gap: 6px; min-width: 0; }
+.dsm-fold-name > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.dsm-fold-body { display: flex; flex-direction: column; gap: 8px; padding: 2px 0 4px 24px; min-width: 0; }
+
+.dsm-foot { display: flex; align-items: center; gap: 6px; }
+.dsm-muted { color: var(--dsw-alias-label-tertiary); font-size: 12px; line-height: 18px; margin: 0; display: inline-flex; align-items: center; gap: 6px; }
+.dsm-alert { display: flex; gap: 8px; align-items: center; padding: 6px 6px 6px 10px; border-radius: var(--dsw-radius-lg);
+  background: color-mix(in srgb, var(--dsw-alias-state-error-primary) 10%, transparent); }
+.dsm-alert > svg { color: var(--dsw-alias-state-error-primary); }
+.dsm-alert .dsm-btn { margin-left: auto; }
+
+.dsm-panel { border-radius: var(--dsw-radius-lg); background: var(--dsw-alias-bg-module-platform, var(--dsw-alias-bg-layer-2)); padding: 2px 12px 12px; display: flex; flex-direction: column; gap: 8px; }
+.dsm-tabs { display: flex; gap: 2px; border-bottom: .5px solid var(--dsw-alias-border-l2); margin: 0 -12px; padding: 0 8px; }
+.dsm-tab { border: 0; background: none; padding: 9px 8px 8px; font: inherit; font-size: 13px; color: var(--dsw-alias-label-tertiary); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -.5px; }
+.dsm-tab[aria-selected="true"] { color: var(--dsw-alias-label-primary); border-bottom-color: var(--dsw-alias-label-primary); }
+.dsm-row { display: flex; align-items: center; gap: 10px; min-height: 36px; font-size: 13px; }
+.dsm-row + .dsm-row { border-top: .5px solid var(--dsw-alias-border-l1); }
+.dsm-grow { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; }
+.dsm-grow > .dsm-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
+.dsm-note { color: var(--dsw-alias-label-tertiary); font-size: 12px; }
+.dsm-list { max-height: 280px; overflow-y: auto; }
+.dsm-switch { width: 30px; height: 18px; border-radius: 9px; background: var(--dsw-alias-state-idle-primary); border: 0; position: relative; cursor: pointer; flex: none; padding: 0; }
+.dsm-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .2s cubic-bezier(.16, 1, .3, 1); }
+.dsm-switch[aria-checked="true"] { background: var(--dsw-alias-state-success-primary); }
+.dsm-switch[aria-checked="true"]::after { transform: translateX(12px); }
+.dsm-switch:disabled { opacity: .4; cursor: default; }
+.dsm-input { box-sizing: border-box; height: 30px; width: 100%; border-radius: var(--dsw-radius-md); border: .5px solid var(--dsw-alias-border-l3);
+  background: var(--dsw-alias-bg-layer-1); color: var(--dsw-alias-label-primary); padding: 0 10px; font: inherit; font-size: 13px; }
+.dsm-select { height: 26px; border-radius: var(--dsw-radius-sm); border: .5px solid var(--dsw-alias-border-l3); background: var(--dsw-alias-bg-layer-1);
+  color: var(--dsw-alias-label-primary); font: inherit; font-size: 12px; padding: 0 4px; max-width: 160px; }
+.dsm-panel-foot { display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding-top: 4px; }
+.dsm-panel-foot .dsm-card-error { margin-right: auto; }
+.dsm-seg { display: inline-flex; padding: 2px; border-radius: 7px; background: color-mix(in srgb, var(--dsw-alias-label-primary) 9%, transparent); gap: 2px; flex: none; }
+.dsm-seg button { border: 0; background: transparent; height: 22px; padding: 0 9px; border-radius: 5px; font: inherit; font-size: 12px; color: var(--dsw-alias-label-secondary); cursor: pointer; }
+.dsm-seg button[aria-pressed="true"] { background: var(--dsw-alias-bg-layer-1); color: var(--dsw-alias-label-primary); box-shadow: 0 1px 2px #0000002e; }
+.dsm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
+.dsm-chip { height: 26px; padding: 0 10px 0 8px; border-radius: 13px; border: .5px solid var(--dsw-alias-border-l3); background: transparent; font: inherit; font-size: 12px;
+  cursor: pointer; display: inline-flex; align-items: center; gap: 5px; color: var(--dsw-alias-label-secondary); }
+.dsm-chip[aria-pressed="true"] { background: var(--dsw-alias-label-primary); color: var(--dsw-alias-bg-base); border-color: transparent; }
+.dsm-chip:disabled { opacity: .4; cursor: default; }
+
+.dsm-signin { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: var(--dsw-radius-lg); background: var(--dsw-alias-bg-module-platform, var(--dsw-alias-bg-layer-2)); }
+.dsm-steps { display: flex; gap: 16px; margin: 0; padding: 0; list-style: none; font-size: 12px; flex-wrap: wrap; }
+.dsm-steps li { display: inline-flex; gap: 6px; align-items: center; color: var(--dsw-alias-label-tertiary); }
+.dsm-steps li[data-s="done"] { color: var(--dsw-alias-state-success-primary); }
+.dsm-steps li[data-s="now"] { color: var(--dsw-alias-label-primary); }
+.dsm-spin { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--dsw-alias-border-l3); border-top-color: currentColor; animation: dsm-spin .8s linear infinite; flex: none; box-sizing: border-box; }
+.dsm-code { font: 600 20px/28px var(--dsw-font-family-mono, ui-monospace, Menlo, monospace); letter-spacing: .12em; padding: 4px 12px; border-radius: var(--dsw-radius-md);
+  background: var(--dsw-alias-bg-layer-1); border: .5px solid var(--dsw-alias-border-l2); }
+.dsm-fallback summary { cursor: pointer; color: var(--dsw-alias-label-tertiary); font-size: 12px; list-style: none; display: inline-flex; gap: 4px; align-items: center; }
+.dsm-fallback summary::-webkit-details-marker { display: none; }
+.dsm-fallback[open] summary { margin-bottom: 6px; }
+
+.dsm-footer-block { margin-top: 18px; padding-top: 14px; border-top: .5px solid var(--dsw-alias-border-l2); display: flex; flex-direction: column; max-width: 720px; }
+.dsm-footer-block h3 { margin: 0 0 4px; font-size: 14px; font-weight: 500; line-height: 22px; color: var(--dsw-alias-label-primary); }
+.dsm-footer-block .dsm-row { min-height: 40px; color: var(--dsw-alias-label-primary); }
+
+.dsm-gauge-slot { position: relative; display: inline-flex; }
+.dsm-gauge { display: inline-flex; align-items: center; gap: 10px; height: 24px; padding: 0 8px; border-radius: 12px; border: 0; background: transparent; cursor: pointer;
+  color: var(--dsw-alias-label-secondary); font: inherit; font-size: 12px; }
+.dsm-gauge:hover, .dsm-gauge[aria-expanded="true"] { background: var(--dsw-alias-interactive-bg-hover); }
+.dsm-gp { display: inline-flex; align-items: center; gap: 8px; }
+.dsm-gp + .dsm-gp { padding-left: 10px; border-left: .5px solid var(--dsw-alias-border-l3); }
+.dsm-gp-name { color: var(--dsw-alias-label-primary); }
+.dsm-gp .dsm-minis { gap: 10px; }
+.dsm-gp .dsm-mini { grid-template-columns: auto 26px auto; }
+
+.dsm-pop { position: fixed; z-index: 1000; width: 420px; max-width: calc(100vw - 20px); box-sizing: border-box; background: var(--dsw-specific-menu, var(--dsw-alias-bg-overlay));
+  backdrop-filter: var(--dsw-menu-backdrop-filter, none); border-radius: var(--dsw-radius-xl); box-shadow: var(--dsw-elevation-panel, 0 12px 32px #0006);
+  border: .5px solid var(--dsw-alias-border-l2); padding: 6px; display: flex; flex-direction: column; color: var(--dsw-alias-label-primary);
+  text-align: left; font-size: 13px; line-height: 20px; max-height: min(560px, calc(100vh - 24px)); overflow: hidden auto; }
+.dsm-pop-head { display: flex; align-items: center; gap: 2px; padding: 2px 2px 6px 8px; }
+.dsm-pop-head b { font-weight: 600; font-size: 13px; margin-right: auto; }
+.dsm-psec { border-top: .5px solid var(--dsw-alias-border-l2); padding: 4px 0; }
+.dsm-psec-head { display: flex; align-items: center; gap: 2px; }
+.dsm-psec-head .dsm-fold { flex: 1; }
+.dsm-psec-name { color: var(--dsw-alias-label-primary); font-weight: 500; font-size: 13px; }
+.dsm-psec .dsm-fold-body { padding: 0 8px 6px 26px; gap: 6px; }
+.dsm-psec .dsm-fold-body .dsm-fold-body { padding: 4px 0 0; }
+.dsm-psec .dsm-fold-body .dsm-fold { margin-left: -24px; width: calc(100% + 24px); }
+.dsm-pacct { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
+.dsm-pacct .dsm-acct-head { font-size: 12px; line-height: 18px; }
+.dsm-others { padding-bottom: 0; }
+.dsm-others .dsm-psec { border-top: 0; padding: 0 0 0 16px; }
+.dsm-gauge > svg { color: var(--dsw-alias-label-secondary); }
+.dsm-pin { color: var(--dsw-alias-label-tertiary); }
+.dsm-pin[aria-pressed="true"] { color: var(--dsw-alias-label-primary); }
+
+.dsm-notice { display: flex; gap: 8px; align-items: center; padding: 6px 6px 6px 12px; font-size: 13px; line-height: 20px; color: var(--dsw-alias-label-primary);
+  background: var(--dsw-specific-menu, var(--dsw-alias-bg-overlay)); border-radius: var(--dsw-radius-lg); border: .5px solid var(--dsw-alias-border-l2);
+  box-shadow: var(--dsw-elevation-panel, 0 12px 32px #0006); animation: dsm-drop .45s cubic-bezier(.16, 1, .3, 1); }
+.dsm-notice > svg { color: var(--dsw-alias-state-warn-primary); }
+.dsm-notice.dsm-err > svg { color: var(--dsw-alias-state-error-primary); }
+.dsm-notice-host { position: fixed; top: 52px; right: 20px; z-index: 1000; max-width: calc(100vw - 40px); }
+@keyframes dsm-drop { from { opacity: 0; transform: translateY(-8px); filter: blur(4px); } }
+
+.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: .4; cursor: default; }
+.dsh-subscription-speed button:focus-visible { outline: var(--dsw-focus-ring-width, 2px) solid var(--dsw-focus-ring-color, var(--dsw-alias-state-business-primary)); outline-offset: 2px; }
+
+@media (prefers-reduced-motion: reduce) { .dsm-sub *, .dsm-pop *, .dsm-notice, .dsm-fill { animation: none !important; transition: none !important; } }
+@media (max-width: 640px) {
+  .dsm-wins { column-gap: 8px; grid-template-columns: fit-content(96px) minmax(40px, 1fr) 36px 84px; }
+  .dsm-minis { gap: 8px; } .dsm-mini { grid-template-columns: auto 22px 32px; } .dsm-mini i { max-width: 56px; }
+  .dsm-gp-name { display: none; }
+  .dsm-footer-block .dsm-row { flex-wrap: wrap; padding: 6px 0; }
+}
+`;