dsh-subscriptions 0.1.5 → 0.2.2

package/lib/client/ollama-draft.js

@@ -0,0 +1,255 @@
+/**
+ * Draft rules of the Ollama Cloud settings dialog, kept free of React and the
+ * DOM so they can be unit tested. The node half owns the shapes below; the
+ * client restates them locally because the browser bundle does not import
+ * node-side modules.
+ */
+/**
+ * Append the checked candidates to the draft's model list. Existing rows are
+ * never replaced or reordered, ids already present are skipped, and adopted
+ * rows keep the candidate order. Optional fields are set only when the
+ * candidate advertises a value, because `exactOptionalPropertyTypes` (and the
+ * store) must not see an explicit `undefined`.
+ * @param current - the draft list before adoption.
+ * @param candidates - the cloud list as fetched, in display order.
+ * @param selectedIds - ids the user checked.
+ * @returns a new list; the input array is not mutated.
+ */
+export function adoptCandidates(current, candidates, selectedIds) {
+    const models = [...(current ?? [])];
+    const present = new Set(models.map((model) => model.id));
+    const selected = new Set(selectedIds);
+    for (const candidate of candidates) {
+        if (!selected.has(candidate.id) || present.has(candidate.id))
+            continue;
+        present.add(candidate.id);
+        models.push({
+            id: candidate.id,
+            name: candidate.name,
+            ...(candidate.contextWindow === undefined
+                ? {}
+                : { contextWindow: candidate.contextWindow }),
+            ...(candidate.vision ? { vision: true } : {}),
+            ...(candidate.thinking ? { thinking: true } : {}),
+            // The vendor's default is not copied: defaultEffort in the store is
+            // the user's explicit choice only, so the resolver's priority
+            // (user, then vendor, then family) keeps the vendor default live
+            // in discovery while the selector stays an override.
+            ...(candidate.efforts.length ? { efforts: [...candidate.efforts] } : {}),
+        });
+    }
+    return models;
+}
+/**
+ * Swap one model with its neighbour. An id that is absent or a move past
+ * either end returns the same order.
+ * @param models - the current list.
+ * @param id - the row to move.
+ * @param delta - `-1` moves up, `1` moves down.
+ * @returns a new list; the input array is not mutated.
+ */
+export function moveModel(models, id, delta) {
+    const next = [...models];
+    const index = next.findIndex((model) => model.id === id);
+    const target = index + delta;
+    if (index === -1 || target < 0 || target >= next.length)
+        return next;
+    const moved = next[index];
+    next[index] = next[target];
+    next[target] = moved;
+    return next;
+}
+/**
+ * Drop one model from the list.
+ * @param models - the current list.
+ * @param id - the row to drop; an unknown id leaves the list unchanged.
+ * @returns a new list; the input array is not mutated.
+ */
+export function removeModel(models, id) {
+    return models.filter((model) => model.id !== id);
+}
+/**
+ * Short context-window label for a model row.
+ * @param contextWindow - the advertised window in tokens.
+ * @returns `'1M'`, `'262K'`, the bare number below 1000, or `undefined` when unknown.
+ */
+export function contextLabel(contextWindow) {
+    if (contextWindow === undefined)
+        return undefined;
+    if (contextWindow < 1000)
+        return String(contextWindow);
+    if (contextWindow >= 1_000_000) {
+        const millions = contextWindow / 1_000_000;
+        return `${Number.isInteger(millions) ? millions : Number(millions.toFixed(1))}M`;
+    }
+    return `${Math.round(contextWindow / 1000)}K`;
+}
+/**
+ * Rename one model row. An empty display name deletes the field so the
+ * validator keeps accepting the draft; a blank id leaves the list unchanged.
+ * @param models - the current list.
+ * @param id - the row to rename; an unknown id leaves the list unchanged.
+ * @param name - the new display name; whitespace trims before storing.
+ * @returns a new list; the input array is not mutated.
+ */
+export function renameModel(models, id, name) {
+    return models.map((model) => {
+        if (model.id !== id)
+            return model;
+        const next = { ...model };
+        if (name === '')
+            delete next.name;
+        else
+            next.name = name;
+        return next;
+    });
+}
+/**
+ * Set or clear one model row's default reasoning effort. An empty choice
+ * deletes the field so the resolver falls back to the vendor or family
+ * default.
+ * @param models - the current list.
+ * @param id - the row to edit; an unknown id leaves the list unchanged.
+ * @param effort - the chosen level, or `''` to clear.
+ * @returns a new list; the input array is not mutated.
+ */
+export function setModelEffort(models, id, effort) {
+    return models.map((model) => {
+        if (model.id !== id)
+            return model;
+        if (effort === '') {
+            const next = { ...model };
+            delete next.defaultEffort;
+            return next;
+        }
+        return { ...model, defaultEffort: effort };
+    });
+}
+/**
+ * Set or clear one model row's local context-window override. `undefined`
+ * deletes the field so the model follows the endpoint again; the runtime
+ * caps a stored value at the advertised window.
+ * @param models - the current list.
+ * @param id - the row to edit; an unknown id leaves the list unchanged.
+ * @param tokens - a positive safe integer, or `undefined` to clear.
+ * @returns a new list; the input array is not mutated.
+ */
+export function setModelContext(models, id, tokens) {
+    return models.map((model) => {
+        if (model.id !== id)
+            return model;
+        const next = { ...model };
+        if (tokens === undefined)
+            delete next.contextOverride;
+        else
+            next.contextOverride = tokens;
+        return next;
+    });
+}
+/**
+ * Parse the context input's text. Only a positive safe integer is a value;
+ * an empty string clears the override.
+ * @param text - what the user typed.
+ * @returns the number, `undefined` for blank, or `null` for text to reject.
+ */
+export function parseContextInput(text) {
+    const trimmed = text.trim();
+    if (trimmed === '')
+        return undefined;
+    if (!/^\d+$/.test(trimmed))
+        return null;
+    const value = Number(trimmed);
+    return Number.isSafeInteger(value) && value > 0 ? value : null;
+}
+/**
+ * Untick one model: drop it from the list and keep its full row (display
+ * name, default effort, context, ...) in the stash so ticking it again is
+ * lossless, even when the cloud listing no longer carries the id.
+ * @param models - the current list.
+ * @param stash - the stash before this untick.
+ * @param id - the row to untick; an absent id changes nothing.
+ * @returns the new list and stash; neither input is mutated.
+ */
+export function untickModel(models, stash, id) {
+    const row = models.find((model) => model.id === id);
+    if (row === undefined)
+        return { models: [...models], stash };
+    return { models: removeModel(models, id), stash: new Map(stash).set(id, row) };
+}
+/**
+ * Tick one model: restore its stashed row when this dialog unticked it,
+ * otherwise adopt it from the fetched candidates (which never copies the
+ * vendor default effort). A model already in the list, or unknown to both
+ * sources, leaves the list unchanged.
+ * @param models - the current list.
+ * @param stash - rows unticked earlier in this dialog.
+ * @param candidates - the cloud list as fetched.
+ * @param id - the row to tick.
+ * @returns a new list and the stash without the restored row.
+ */
+export function tickModel(models, stash, candidates, id) {
+    if (models.some((model) => model.id === id))
+        return { models: [...models], stash };
+    const stashed = stash.get(id);
+    if (stashed === undefined)
+        return { models: adoptCandidates(models, candidates, [id]), stash };
+    const next = new Map(stash);
+    next.delete(id);
+    return { models: [...models, stashed], stash: next };
+}
+/**
+ * Tick every listed id in order. Rows already in the list stay where they
+ * are; restored and adopted rows append in the given order.
+ * @param models - the current list.
+ * @param stash - rows unticked earlier in this dialog.
+ * @param candidates - the cloud list as fetched.
+ * @param ids - the ids to tick, typically the filtered view.
+ * @returns the new list and stash; neither input is mutated.
+ */
+export function tickModels(models, stash, candidates, ids) {
+    let state = { models: [...models], stash };
+    for (const id of ids)
+        state = tickModel(state.models, state.stash, candidates, id);
+    return state;
+}
+/**
+ * Untick every listed id, stashing each removed row. Ids outside the list,
+ * such as filtered-out rows, are untouched.
+ * @param models - the current list.
+ * @param stash - the stash before this untick.
+ * @param ids - the ids to untick, typically the filtered view.
+ * @returns the new list and stash; neither input is mutated.
+ */
+export function untickModels(models, stash, ids) {
+    let state = { models: [...models], stash };
+    for (const id of ids)
+        state = untickModel(state.models, state.stash, id);
+    return state;
+}
+/**
+ * The effort choices for one ticked row. The row's own `efforts` decide the
+ * ids because the store rejects a default outside them, so the selector must
+ * never offer anything else. A snapshot of the endpoint (`labels`) may only
+ * supply friendlier names for the same ids. A saved default the list no
+ * longer contains is kept visible and marked unavailable instead of
+ * silently reading as "follow the provider".
+ * @param row - the draft row.
+ * @param fetched - efforts from this dialog's latest fetch, when it returned the row.
+ * @param labels - the opened dialog's snapshot of named efforts for the id.
+ * @returns the options in picker order.
+ */
+export function effortOptions(row, fetched, labels) {
+    const ids = row.efforts ?? fetched ?? labels?.map((entry) => entry.id) ?? [];
+    const options = ids.map((id) => ({
+        id,
+        name: labels?.find((entry) => entry.id === id)?.name ?? id,
+    }));
+    if (row.defaultEffort !== undefined && !ids.includes(row.defaultEffort)) {
+        options.push({
+            id: row.defaultEffort,
+            name: row.defaultEffort,
+            unavailable: true,
+        });
+    }
+    return options;
+}

package/lib/client/reset-action.js

@@ -1,15 +1,17 @@
 /** 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);
+    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)
+    if (weekly.resetsAt === undefined ||
+        weekly.resetsAt <= now ||
+        usage.resetCreditsError)
         return 'resetUseRefresh';
-    if (!usage.resetCredits?.some(c => c.id))
+    if (!usage.resetCredits?.some((c) => c.id))
         return 'resetUseRestart';
-    if (!usage.resetCredits.some(c => c.id && (c.expiresAt === undefined || c.expiresAt > now)))
+    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

@@ -29,7 +29,7 @@ export declare function resetCreditRowName(t: Translate, credit: ResetCreditView
 /** 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 }: {
+export declare function ResetCreditsErrorLine({ provider, message, t, }: {
     provider: 'codex' | 'claude';
     message: string;
     t: Translate;

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

@@ -19,7 +19,8 @@ export function resetCreditState(credit, now) {
         return 'paused';
     if (credit.resetsLeft === 0)
         return 'exhausted';
-    if ((credit.cooldownUntil !== undefined && credit.cooldownUntil > now) || credit.usableNow === false)
+    if ((credit.cooldownUntil !== undefined && credit.cooldownUntil > now) ||
+        credit.usableNow === false)
         return 'notUsable';
     return 'available';
 }
@@ -37,7 +38,9 @@ export function resetCreditsAvailableCount(credits, now, mode) {
         const state = resetCreditState(credit, now);
         if (state === 'expired' || state === 'paused')
             continue;
-        if (typeof credit.resetsLeft === 'number' && Number.isFinite(credit.resetsLeft) && credit.resetsLeft > 0) {
+        if (typeof credit.resetsLeft === 'number' &&
+            Number.isFinite(credit.resetsLeft) &&
+            credit.resetsLeft > 0) {
             sum += credit.resetsLeft;
         }
     }
@@ -46,7 +49,9 @@ export function resetCreditsAvailableCount(credits, now, mode) {
 function expiryText(t, credit) {
     return credit.expiresAt === undefined
         ? t('resetCreditExpiryUnknown')
-        : t('resetCreditExpires', { date: new Date(credit.expiresAt).toLocaleString() });
+        : t('resetCreditExpires', {
+            date: new Date(credit.expiresAt).toLocaleString(),
+        });
 }
 function remainingText(t, credit) {
     const left = credit.resetsLeft;
@@ -62,9 +67,18 @@ function remainingText(t, credit) {
 /** 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() }));
+    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(', ');
 }
@@ -75,15 +89,21 @@ export function showsResetCredits(provider, credits) {
     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) });
+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 });
+    return provider === 'claude'
+        ? t('resetCreditsErrorFixed')
+        : t('resetCreditsError', { message });
 }
 const summaryStyle = {
-    ...cardStyles.usageMeta, cursor: 'pointer', listStyle: 'none', justifyContent: 'flex-start', gap: 6,
+    ...cardStyles.usageMeta,
+    cursor: 'pointer',
+    listStyle: 'none',
+    justifyContent: 'flex-start',
+    gap: 6,
 };
 /**
  * The closed disclosure both providers share. Claude rows are plain text:
@@ -92,12 +112,41 @@ const summaryStyle = {
  */
 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) => {
+    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 })] })] }));
+                        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 }))] })] }));
 }

package/lib/client/subscription-card-styles.js

@@ -1,48 +1,118 @@
 /** Shared visual language for OAuth, Cursor, and built-in provider cards. */
 export const subscriptionCardStyles = {
     card: {
-        border: '1px solid var(--dsw-alias-border-l2)', borderRadius: 12,
-        padding: '12px 14px', display: 'flex', flexDirection: 'column', gap: 6,
+        border: '1px solid var(--dsw-alias-border-l2)',
+        borderRadius: 12,
+        padding: '12px 14px',
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 6,
         color: 'var(--dsw-alias-label-primary)',
     },
     header: { display: 'flex', alignItems: 'center', gap: 8 },
     dot: { width: 8, height: 8, borderRadius: '50%', flexShrink: 0 },
-    name: { fontWeight: 500, fontSize: 14, lineHeight: '22px', color: 'var(--dsw-alias-label-primary)' },
-    status: { margin: 0, fontSize: 12, lineHeight: '18px', color: 'var(--dsw-alias-label-tertiary)' },
-    error: { margin: 0, fontSize: 12, lineHeight: '18px', color: 'var(--dsw-alias-state-error-primary)' },
-    actions: { display: 'flex', gap: 8, marginTop: 4, alignItems: 'center', flexWrap: 'wrap' },
+    name: {
+        fontWeight: 500,
+        fontSize: 14,
+        lineHeight: '22px',
+        color: 'var(--dsw-alias-label-primary)',
+    },
+    status: {
+        margin: 0,
+        fontSize: 12,
+        lineHeight: '18px',
+        color: 'var(--dsw-alias-label-tertiary)',
+    },
+    error: {
+        margin: 0,
+        fontSize: 12,
+        lineHeight: '18px',
+        color: 'var(--dsw-alias-state-error-primary)',
+    },
+    actions: {
+        display: 'flex',
+        gap: 8,
+        marginTop: 4,
+        alignItems: 'center',
+        flexWrap: 'wrap',
+    },
     button: {
-        boxSizing: 'border-box', display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
-        height: 28, padding: '0 10px', borderRadius: 14,
-        border: '1px solid var(--dsw-alias-border-l2)', background: 'transparent',
-        color: 'var(--dsw-alias-label-primary)', font: 'inherit', fontSize: 12, lineHeight: '18px',
+        boxSizing: 'border-box',
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        height: 28,
+        padding: '0 10px',
+        borderRadius: 14,
+        border: '1px solid var(--dsw-alias-border-l2)',
+        background: 'transparent',
+        color: 'var(--dsw-alias-label-primary)',
+        font: 'inherit',
+        fontSize: 12,
+        lineHeight: '18px',
         cursor: 'pointer',
     },
     account: {
-        display: 'flex', flexDirection: 'column', gap: 6,
-        border: '1px solid var(--dsw-alias-border-l2)', borderRadius: 8,
-        padding: '8px 10px', marginTop: 4,
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 6,
+        border: '1px solid var(--dsw-alias-border-l2)',
+        borderRadius: 8,
+        padding: '8px 10px',
+        marginTop: 4,
     },
     accountHeader: { display: 'flex', alignItems: 'center', gap: 8 },
-    accountName: { fontSize: 13, lineHeight: '20px', color: 'var(--dsw-alias-label-primary)', userSelect: 'all' },
+    accountName: {
+        fontSize: 13,
+        lineHeight: '20px',
+        color: 'var(--dsw-alias-label-primary)',
+        userSelect: 'all',
+    },
     defaultStar: { color: 'var(--dsw-alias-state-warn-label)' },
     usage: {
-        display: 'flex', flexDirection: 'column', gap: 6, marginTop: 4,
-        borderTop: '1px solid var(--dsw-alias-border-l2)', paddingTop: 8,
+        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)' },
+    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',
+        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)',
+        display: 'flex',
+        justifyContent: 'space-between',
+        gap: 8,
+        fontSize: 12,
+        lineHeight: '18px',
+        color: 'var(--dsw-alias-label-tertiary)',
     },
 };

package/lib/client/usage-color-preferences.js

@@ -24,8 +24,10 @@ export function setUsageColorPreset(value) {
     window.dispatchEvent(new Event(EVENT));
 }
 export function subscribeUsageColorPreset(notify) {
-    const storage = (event) => { if (event.key === KEY || event.key === null)
-        notify(); };
+    const storage = (event) => {
+        if (event.key === KEY || event.key === null)
+            notify();
+    };
     window.addEventListener(EVENT, notify);
     window.addEventListener('storage', storage);
     return () => {

package/lib/client/usage-pace.d.ts

@@ -40,3 +40,10 @@ export declare function isUsageFresh(window: UsageWindow, observation: UsageObse
 export declare function elapsedPercent(window: UsageWindow, now?: number): number | undefined;
 export declare function usageColorState(used: number, elapsed: number | undefined, preset: UsageColorPreset, fresh: boolean): UsageColorState;
 export declare function usageBarColor(used: number, elapsed?: number, preset?: UsageColorPreset, fresh?: boolean): string;
+/**
+ * Marker position from the window's display-only assumed start
+ * (`displayStartsAt`): the reading and its age are irrelevant, exactly
+ * like the verified marker. Returns undefined when the window carries no
+ * assumed start or its reset has passed.
+ */
+export declare function displayStartPercent(window: UsageWindow, now?: number): number | undefined;