dsh-subscriptions 0.1.1 → 0.1.3

package/lib/client/locales.js

@@ -79,6 +79,30 @@ export const en = {
     usageMonthly: 'Monthly',
     usageWindow: 'Window',
     usageResets: 'resets {date}',
+    usageMeterUsed: 'Used {used}% · Remaining {remaining}%',
+    usageMeterPace: 'Time elapsed {elapsed}% (vertical marker)',
+    usageMeterPaceAhead: '{points} points ahead of pace',
+    usageMeterPaceBehind: '{points} points behind pace',
+    usageMeterPaceEven: 'On pace',
+    usageMeterInvalid: 'Quota unavailable',
+    usageMeterStale: 'Reading is stale or unavailable; refresh to confirm',
+    usageMeterNearLimit: 'Near exhaustion',
+    usageMeterAhead: 'Usage ahead of pace',
+    usageMeterNoWarning: 'No quota warning',
+    usageMeterUnknownTime: 'Time progress unknown',
+    usageMeterReset: 'Resets in {duration}',
+    usageUnitDay: '{count} day',
+    usageUnitDays: '{count} days',
+    usageUnitHour: '{count} hour',
+    usageUnitHours: '{count} hours',
+    usageUnitMinute: '{count} minute',
+    usageUnitMinutes: '{count} minutes',
+    usageColorLabel: 'Usage coloring',
+    usageColorStandard: 'Standard (default · 10-point lead)',
+    usageColorRelaxed: 'Relaxed (15-point lead)',
+    usageColorRemaining: 'Remaining quota only (no yellow)',
+    usageColorPaceHint: 'Yellow when usage leads elapsed time by {allowance} points; red at 90% used takes priority. Saved in this browser; only colors change.',
+    usageColorRemainingHint: 'Red at 90% used; no yellow pace warnings. Reliable time markers remain visible. Saved in this browser.',
     usagePlan: 'Plan: {plan}',
     externalUsageTitle: 'Built-in provider usage',
     externalUsageConnected: 'API key configured',
@@ -131,8 +155,9 @@ export const en = {
     usageBadgeTitle: 'Provider usage',
     usageBadgeDisplay: 'Status-bar quota display',
     usageBadgeDisplayRecent: 'Current / most recent provider with usage',
+    usageBadgeDisplayAlways: 'Always show one provider, rotating through the rest',
     usageBadgeDisplayHidden: 'Hidden',
-    usageBadgeDisplayHint: 'Saved automatically in this browser. One provider is shown at a time. Models without a quota source keep the most recent provider selected in this view, or show nothing. Hiding does not affect usage details here.',
+    usageBadgeDisplayHint: 'Saved automatically in this browser. One provider is shown at a time. Models without a quota source keep the most recent provider selected in this view, or show nothing. Always show instead rotates through the providers with usage every 10 seconds while the current model has no quota source. Hiding does not affect usage details here.',
     usageBadgeDisplaySaveFailed: 'Could not save the display preference. Check browser storage permissions.',
     usageBadgeCurrent: 'current',
     usageBadgeModelCount: '{count} model quotas',
@@ -226,6 +251,30 @@ export const zh = {
     usageMonthly: '每月',
     usageWindow: '窗口',
     usageResets: '{date} 重置',
+    usageMeterUsed: '已用 {used}% · 剩余 {remaining}%',
+    usageMeterPace: '时间已过 {elapsed}%（竖线标记）',
+    usageMeterPaceAhead: '领先时间进度 {points} 个百分点',
+    usageMeterPaceBehind: '落后时间进度 {points} 个百分点',
+    usageMeterPaceEven: '与时间进度一致',
+    usageMeterInvalid: '额度数据不可用',
+    usageMeterStale: '读数已陈旧或不可用，请刷新确认',
+    usageMeterNearLimit: '额度接近耗尽',
+    usageMeterAhead: '用量领先时间进度',
+    usageMeterNoWarning: '未触发额度警告',
+    usageMeterUnknownTime: '时间进度未知',
+    usageMeterReset: '{duration}后重置',
+    usageUnitDay: '{count} 天',
+    usageUnitDays: '{count} 天',
+    usageUnitHour: '{count} 小时',
+    usageUnitHours: '{count} 小时',
+    usageUnitMinute: '{count} 分钟',
+    usageUnitMinutes: '{count} 分钟',
+    usageColorLabel: '用量配色',
+    usageColorStandard: '标准（默认 · 领先 10 个百分点）',
+    usageColorRelaxed: '宽松（领先 15 个百分点）',
+    usageColorRemaining: '仅剩余额度（不显示黄色）',
+    usageColorPaceHint: '用量领先时间进度 {allowance} 个百分点时变黄；已用达到 90% 时优先变红。自动保存到当前浏览器，仅改变配色。',
+    usageColorRemainingHint: '已用达到 90% 时变红，不显示黄色节奏警告。可靠的时间标记仍保留，自动保存到当前浏览器。',
     usagePlan: '计划：{plan}',
     externalUsageTitle: '内置供应商用量',
     externalUsageConnected: '已配置 API 密钥',
@@ -278,8 +327,9 @@ export const zh = {
     usageBadgeTitle: '服务商用量',
     usageBadgeDisplay: '状态栏额度显示',
     usageBadgeDisplayRecent: '仅显示当前／最近使用的用量服务商',
+    usageBadgeDisplayAlways: '始终显示一家，其余服务商轮播',
     usageBadgeDisplayHidden: '不显示',
-    usageBadgeDisplayHint: '自动保存到当前浏览器。状态栏一次显示一家服务商；没有额度来源的模型沿用本视图最近选择的服务商，没有记录则隐藏。关闭不影响本页的额度详情。',
+    usageBadgeDisplayHint: '自动保存到当前浏览器。状态栏一次显示一家服务商；没有额度来源的模型沿用本视图最近选择的服务商，没有记录则隐藏。选择“始终显示”时，当前模型没有额度来源，就每 10 秒轮播一家有额度的服务商。关闭不影响本页的额度详情。',
     usageBadgeDisplaySaveFailed: '显示设置保存失败，请检查浏览器存储权限。',
     usageBadgeCurrent: '当前',
     usageBadgeModelCount: '{count} 个模型配额',

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

@@ -45,9 +45,4 @@ export const subscriptionCardStyles = {
         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 },
 };

package/lib/client/usage-badge-preferences.d.ts

@@ -1,5 +1,10 @@
-/** Display-only preference: no credentials or account history are stored. */
-export type UsageBadgeMode = 'recent' | 'hidden';
+/**
+ * Display-only preference: no credentials or account history are stored.
+ * `recent` pins the current/most-recent provider; `always` keeps a provider
+ * visible at all times, rotating through the others when the current model
+ * has no quota source; `hidden` shows nothing.
+ */
+export type UsageBadgeMode = 'recent' | 'always' | 'hidden';
 export declare const USAGE_BADGE_REFRESH_EVENT = "dsh:subscriptions:usage-refresh";
 /** Read the browser preference; blocked storage retains the default display. */
 export declare function readUsageBadgeMode(): UsageBadgeMode;

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

@@ -7,7 +7,8 @@ export function readUsageBadgeMode() {
     if (typeof window === 'undefined')
         return 'recent';
     try {
-        return window.localStorage.getItem(MODE_KEY) === 'hidden' ? 'hidden' : 'recent';
+        const value = window.localStorage.getItem(MODE_KEY);
+        return value === 'hidden' || value === 'always' ? value : 'recent';
     }
     catch (error) {
         if (!(error instanceof DOMException) || error.name !== 'SecurityError')
@@ -17,7 +18,7 @@ export function readUsageBadgeMode() {
 }
 /** Save first, then notify; the settings control reports a rejected write. */
 export function setUsageBadgeMode(mode) {
-    if (mode !== 'recent' && mode !== 'hidden')
+    if (mode !== 'recent' && mode !== 'always' && mode !== 'hidden')
         throw new TypeError('Invalid subscription usage display mode');
     window.localStorage.setItem(MODE_KEY, mode);
     window.dispatchEvent(new Event(MODE_EVENT));

package/lib/client/usage-color-preferences.d.ts

@@ -0,0 +1,6 @@
+export type UsageColorPreset = 'standard' | 'relaxed' | 'remaining';
+export declare function isUsageColorPreset(value: unknown): value is UsageColorPreset;
+export declare function readUsageColorPreset(): UsageColorPreset;
+export declare function setUsageColorPreset(value: UsageColorPreset): void;
+export declare function subscribeUsageColorPreset(notify: () => void): () => void;
+export declare function useUsageColorPreset(): UsageColorPreset;

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

@@ -0,0 +1,38 @@
+import { useSyncExternalStore } from 'react';
+const KEY = 'dsh.subscriptions.usageColorPreset';
+const EVENT = 'dsh:subscriptions:usage-color-preset';
+export function isUsageColorPreset(value) {
+    return value === 'standard' || value === 'relaxed' || value === 'remaining';
+}
+export function readUsageColorPreset() {
+    if (typeof window === 'undefined')
+        return 'standard';
+    try {
+        const value = window.localStorage.getItem(KEY);
+        return isUsageColorPreset(value) ? value : 'standard';
+    }
+    catch (error) {
+        if (!(error instanceof DOMException) || error.name !== 'SecurityError')
+            throw error;
+        return 'standard';
+    }
+}
+export function setUsageColorPreset(value) {
+    if (!isUsageColorPreset(value))
+        throw new TypeError('Invalid usage coloring preset');
+    window.localStorage.setItem(KEY, value);
+    window.dispatchEvent(new Event(EVENT));
+}
+export function subscribeUsageColorPreset(notify) {
+    const storage = (event) => { if (event.key === KEY || event.key === null)
+        notify(); };
+    window.addEventListener(EVENT, notify);
+    window.addEventListener('storage', storage);
+    return () => {
+        window.removeEventListener(EVENT, notify);
+        window.removeEventListener('storage', storage);
+    };
+}
+export function useUsageColorPreset() {
+    return useSyncExternalStore(subscribeUsageColorPreset, readUsageColorPreset, () => 'standard');
+}

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

@@ -0,0 +1,42 @@
+import type { UsageWindow } from './SubscriptionsSection.js';
+import type { UsageColorPreset } from './usage-color-preferences.js';
+export interface UsageObservation {
+    observedAt?: number | undefined;
+    stale?: boolean | undefined;
+}
+export type UsageColorState = 'neutral' | 'red' | 'yellow' | 'green';
+export declare const USAGE_FRESHNESS_MS: number;
+export declare function validUsage(used: number): boolean;
+/**
+ * Rounded share for display, or undefined when the provider's number is
+ * unusable. Callers must show the unavailable state rather than clamp an
+ * out-of-range reading into 0% or 100%.
+ */
+export declare function displayUsedPercent(used: number): number | undefined;
+export interface CountdownPart {
+    unit: 'day' | 'hour' | 'minute';
+    count: number;
+}
+/**
+ * Reset countdown as the two largest nonzero whole units, rounded up so a
+ * window never announces zero remaining time. Always at least one minute.
+ */
+export declare function resetCountdownParts(ms: number): CountdownPart[];
+/**
+ * Whether the reported percentage still describes the window now. Only a fresh
+ * reading may be compared with the current time (pace warnings); an old one
+ * keeps its absolute color. This does not decide whether the time cursor is
+ * drawn: where the window stands in time never depends on the reading.
+ */
+export declare function isUsageFresh(window: UsageWindow, observation: UsageObservation, now?: number): boolean;
+/**
+ * How far through its window the clock is, from the window's own timing alone.
+ * It ignores the percentage and how recently it was read, so an unused,
+ * stale, aged or unobserved reading keeps its cursor whenever the timing
+ * places it. Returns undefined when the timing cannot: only an explicit
+ * interval or a provider-verified fixed duration supports linear pace, and no
+ * start is invented from a window's kind or label.
+ */
+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;

package/lib/client/usage-pace.js

@@ -0,0 +1,71 @@
+export const USAGE_FRESHNESS_MS = 5 * 60_000;
+export function validUsage(used) {
+    return Number.isFinite(used) && used >= 0 && used <= 100;
+}
+/**
+ * Rounded share for display, or undefined when the provider's number is
+ * unusable. Callers must show the unavailable state rather than clamp an
+ * out-of-range reading into 0% or 100%.
+ */
+export function displayUsedPercent(used) {
+    return validUsage(used) ? Math.round(used) : undefined;
+}
+/**
+ * Reset countdown as the two largest nonzero whole units, rounded up so a
+ * window never announces zero remaining time. Always at least one minute.
+ */
+export function resetCountdownParts(ms) {
+    const total = Math.max(1, Math.ceil(ms / 60_000));
+    const parts = [
+        { unit: 'day', count: Math.floor(total / 1440) },
+        { unit: 'hour', count: Math.floor((total % 1440) / 60) },
+        { unit: 'minute', count: total % 60 },
+    ];
+    return parts.filter(part => part.count > 0).slice(0, 2);
+}
+/**
+ * Whether the reported percentage still describes the window now. Only a fresh
+ * reading may be compared with the current time (pace warnings); an old one
+ * keeps its absolute color. This does not decide whether the time cursor is
+ * drawn: where the window stands in time never depends on the reading.
+ */
+export function isUsageFresh(window, observation, now = Date.now()) {
+    return validUsage(window.usedPercent) && observation.stale !== true
+        && observation.observedAt !== undefined && Number.isFinite(observation.observedAt)
+        && observation.observedAt <= now && now - observation.observedAt <= USAGE_FRESHNESS_MS
+        && (window.resetsAt === undefined || Number.isFinite(window.resetsAt) && window.resetsAt > now);
+}
+/**
+ * How far through its window the clock is, from the window's own timing alone.
+ * It ignores the percentage and how recently it was read, so an unused,
+ * stale, aged or unobserved reading keeps its cursor whenever the timing
+ * places it. Returns undefined when the timing cannot: only an explicit
+ * interval or a provider-verified fixed duration supports linear pace, and no
+ * start is invented from a window's kind or label.
+ */
+export function elapsedPercent(window, now = Date.now()) {
+    const end = window.resetsAt;
+    if (end === undefined || !Number.isFinite(end) || end <= now)
+        return undefined;
+    const duration = window.windowDurationMs;
+    const start = window.startsAt ?? (window.fixedWindow === true && duration !== undefined && Number.isFinite(duration) && duration > 0 ? end - duration : undefined);
+    if (start === undefined || !Number.isFinite(start) || start >= end || start > now)
+        return undefined;
+    return Math.min(100, Math.max(0, (now - start) / (end - start) * 100));
+}
+export function usageColorState(used, elapsed, preset, fresh) {
+    if (!validUsage(used))
+        return 'neutral';
+    if (used >= 90)
+        return 'red';
+    // Missing pace or stale observations retain the last reported absolute color.
+    if (!fresh || preset === 'remaining' || elapsed === undefined)
+        return 'green';
+    return used - elapsed >= (preset === 'relaxed' ? 15 : 10) ? 'yellow' : 'green';
+}
+export function usageBarColor(used, elapsed, preset = 'standard', fresh = true) {
+    const state = usageColorState(used, elapsed, preset, fresh);
+    return state === 'red' ? 'var(--dsw-alias-state-error-primary)'
+        : state === 'yellow' ? 'var(--dsw-alias-state-warn-label)'
+            : 'var(--dsw-alias-state-success-primary)';
+}