@linxin666/dsh-usage 0.3.20 → 0.3.22

package/lib/types/client/voucher.d.ts

@@ -0,0 +1,56 @@
+/**
+ * The Whale-yuan voucher (鲸元券): the DeepSeek official family's retained
+ * ledger totals stamped onto the banknote artwork as a denomination, ready
+ * to save or share. The canvas copy is deliberately locale-neutral (digits,
+ * latin captions, ISO dates) so the exported image needs no dictionary;
+ * everything user-facing around it lives in the section's locales. The pure
+ * helpers are unit-tested; the draw itself degrades to a thrown error the
+ * section renders as its failure line.
+ * @module @linxin666/dsh-usage/client/voucher
+ */
+import type { UsageWindowSummary } from '../core/types.ts';
+/** The facts stamped onto one voucher. */
+export interface VoucherData {
+    /** DeepSeek official family total tokens over the retained window. */
+    tokens: number;
+    /** Provider calls that reported usage. */
+    calls: number;
+    /** Fold-time spend estimate in CNY (the only priced family). */
+    cost: number;
+    /** Retained window bounds (local date keys, inclusive). */
+    from: string;
+    to: string;
+}
+/** Anti-inflation exchange rate: 1000 tokens mint one whale yuan. */
+export declare const TOKENS_PER_WHALE_YUAN = 1000;
+/** The note's face value in whale yuan; the smallest denomination is 1. */
+export declare function faceValue(tokens: number): number;
+/** Local calendar day (`YYYY-MM-DD`) for an epoch ms timestamp. */
+export declare function formatDay(ms: number): string;
+/**
+ * Sum the DeepSeek official family rows out of a usage window (both the
+ * `deepseek` catalog alias and the live `deepseek-official` route fold into
+ * one voucher). Undefined when the window is absent (older host) or the
+ * family has no usage — a zero-token note mints nothing.
+ */
+export declare function deepseekVoucherData(window: UsageWindowSummary | undefined): VoucherData | undefined;
+/** Banknote denomination: full digits with thousands separators. */
+export declare function formatDenomination(value: number): string;
+/** Deterministic serial number flavor: the face value mod 1e9, zero-padded. */
+export declare function voucherSerial(face: number): string;
+/** The decoded note artwork plus its intrinsic size. */
+export interface VoucherArt {
+    image: CanvasImageSource;
+    width: number;
+    height: number;
+}
+/** Decode the note artwork once per page; a failed decode retries next call. */
+export declare function loadVoucherArt(): Promise<VoucherArt>;
+/**
+ * Stamp the denomination block onto a canvas sized to the artwork: the
+ * minted whale yuan as the face value under the note title, a small
+ * `whale yuan` caption, and a seal-red serial line with the minting
+ * window. All geometry is relative to the artwork size so a regenerated
+ * asset reflows.
+ */
+export declare function drawVoucher(canvas: HTMLCanvasElement, art: VoucherArt, data: VoucherData): void;

package/lib/types/core/pricing.d.ts

@@ -1,13 +1,19 @@
 /**
- * DeepSeek official peak/off-peak pricing: the published V4 price book plus
- * the peak-window clock, folded into a per-call spend estimate the ledger
- * stamps at fold time (the provider bills each request in the period the
- * request ran in, so pricing at the fold is the honest estimate).
+ * DeepSeek official peak/off-peak pricing: the published price book plus the
+ * peak-window clock, folded into a per-call spend estimate the ledger stamps
+ * at fold time (the provider bills each request in the period the request ran
+ * in, so pricing at the fold is the honest estimate).
  *
- * Policy (api-docs.deepseek.com pricing page, effective 2026-08-17): peak
- * hours are Beijing time Monday-Friday 09:00-12:00 and 14:00-18:00; every
- * other hour (nights, weekends) is off-peak and billed at half the peak
- * price. All prices here are CNY per million tokens.
+ * Policy (api-docs.deepseek.com pricing page, effective 2026-09-10 12:00
+ * Beijing): peak hours are Beijing time Monday-Friday 09:00-12:00 and
+ * 14:00-18:00; every other hour (nights, weekends) is off-peak and billed at
+ * half the peak price. All prices here are CNY per million tokens.
+ *
+ * The published rows are `deepseek-flash` (DeepSeek-V4.1-Flash) and
+ * `deepseek-v4-pro` (DeepSeek-V4-Pro-0813). The retired flash ids
+ * (`deepseek-v4-flash`, `deepseek-v4-flash-vision-exp`) stay accepted and bill
+ * at the flash row; DeepSeek routes `deepseek-v4-pro` to V4.1-Flash from the
+ * retirement instant below until V4.1 Pro ships.
  * @module @linxin666/dsh-usage/core/pricing
  */
 import type { UsageTokenTotals } from './types.ts';

package/lib/types/core/types.d.ts

@@ -81,6 +81,20 @@ export interface PlanView {
 }
 /** How the credential backing one provider route was resolved. */
 export type CredentialKind = 'api-key' | 'env' | 'oauth' | 'none';
+/** One aggregated usage window (the 30-day trend, or the whole retained ledger). */
+export interface UsageWindowSummary {
+    from: string;
+    to: string;
+    totals: UsageTokenTotals;
+    providers: UsageProviderSummary[];
+}
+/** Real spend observed from an official balance series rather than priced locally. */
+export interface ObservedSpendView {
+    /** Accrued spend in the account currency (CNY for the DeepSeek official watch). */
+    cny: number;
+    /** Epoch ms of the first balance observation the accrual starts at. */
+    since: number;
+}
 /** One provider row of the overview snapshot. */
 export interface ProviderSnapshotView {
     /** Provider route key (`deepseek`, `kimi-coding`, custom routes, ...). */
@@ -123,12 +137,20 @@ export interface UsageOverviewView {
          * The same window aggregated per provider and model — the trend card's
          * bar-chart data. Optional so an older host document still renders.
          */
-        range?: {
-            from: string;
-            to: string;
-            totals: UsageTokenTotals;
-            providers: UsageProviderSummary[];
-        };
+        range?: UsageWindowSummary;
+        /**
+         * The whole retained ledger (up to `retainDays`, today included)
+         * aggregated per provider — the voucher's minted total. Optional for the
+         * same older-host tolerance as `range`.
+         */
+        all?: UsageWindowSummary;
+        /**
+         * Real CNY spend of the official DeepSeek family, accrued from observed
+         * decreases of the official balance (top-ups never count). Present once
+         * a decrease has been observed; until then the section falls back to the
+         * fold-time estimate.
+         */
+        observedSpend?: ObservedSpendView;
     };
 }
 /**

package/lib/types/host/usage-service.d.ts

@@ -10,6 +10,21 @@ import type { Context } from '@deepseek-ai/cordis';
 import type { ProviderSnapshotView, UsageOverviewView, UsageTokenTotals } from '../core/types.ts';
 /** Source tag the plugin stamps onto pet announcements. */
 export declare const USAGE_ANNOUNCE_SOURCE = "dsh-usage";
+/**
+ * Persisted accrual state for the official DeepSeek family's real spend:
+ * consecutive observations of the official CNY balance, decreases counted
+ * as spent (a rise is a top-up and never accrues). `since` is the first
+ * observation; the ledger keeps no such fact, so this watch is the only
+ * source of the voucher's observed-spend figure.
+ */
+export interface SpendWatch {
+    /** Total observed decrease since `since`, in CNY. */
+    accruedCny: number;
+    /** Epoch ms of the first balance observation. */
+    since: number;
+    /** The balance the previous observation ended on, when one exists. */
+    lastBalanceCny?: number;
+}
 /** Poll-loop and announce options; re-applied live on settings change. */
 export interface UsageServiceOptions {
     pollIntervalSec: number;
@@ -66,6 +81,8 @@ export declare class UsageService {
     private readonly snapshotsPath;
     private ledger;
     private readonly snapshots;
+    /** The official DeepSeek family's real-spend watch (see SpendWatch). */
+    private spendWatch;
     /** Per-live-session route attribution (WeakMap: disposed sessions age out). */
     private readonly sessionRoutes;
     /** The most recent route seen this boot; the pet bubble follows it. */
@@ -105,6 +122,15 @@ export declare class UsageService {
     private familyCostToday;
     /** Today's ledger totals for one provider route (the exact id, not the family). */
     private providerUsageToday;
+    /**
+     * Accrue the official DeepSeek family's real spend from observed CNY
+     * balance decreases; a balance rise is a top-up and never counts. The
+     * family's route ids can alias one account, so the watch follows the
+     * largest balance seen this cycle and accrues only decreases of that
+     * series — a failed probe keeps the stale balance and accrues nothing
+     * until the next success reports the whole drop at once.
+     */
+    private accrueDeepSeekSpend;
     /**
      * The display name for a route key: the LLM runtime's first, then the
      * adapter's, then the id itself — the snapshot may not exist for

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@linxin666/dsh-usage",
   "description": "Usage statistics plugin for the dsh web GUI: per-provider balance and coding-plan quota detection plus a live token usage ledger, with a dedicated pet bubble for the current provider",
-  "version": "0.3.20",
+  "version": "0.3.22",
   "type": "module",
   "engines": {
     "node": "^22.19.0 || >=24.0.0"
@@ -66,7 +66,7 @@
     "@deepseek-ai/dsh-llm": "^0.1.5-rc.1",
     "@deepseek-ai/dsh-session": "^0.1.5-rc.1",
     "@deepseek-ai/dsh-settings": "^0.1.5-rc.1",
-    "@linxin666/dsh-pet": "0.3.20",
+    "@linxin666/dsh-pet": "0.3.22",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.2",
     "@types/node": "^22.20.0",

package/src/client/UsageSectionCard.tsx

@@ -1,20 +1,22 @@
 /**
- * The usage statistics settings section: two tabs (用量: today's usage,
- * balances, trend; 个人套餐: per-provider plan quota windows) plus a compact
- * settings row. Data comes from the host's loopback-fenced
+ * The usage statistics settings section: three tabs (用量: today's usage,
+ * balances, trend; 个人套餐: per-provider plan quota windows; Token 银行:
+ * the whale-yuan voucher minted from the DeepSeek official family's usage)
+ * plus a compact settings row. Data comes from the host's loopback-fenced
  * /api/dsh-usage/overview document; polling runs only while the section is
  * mounted and the tab is visible.
  * @module @linxin666/dsh-usage/client/UsageSectionCard
  */
 
-import { useEffect, useState, useSyncExternalStore, type ReactNode } from 'react'
+import { useEffect, useRef, useState, useSyncExternalStore, type ReactNode } from 'react'
 import type { SettingsScope } from '@deepseek-ai/dsh-client-ui-settings/client'
 import type { UsageStoreInstance } from './usage-store.ts'
 import { t } from './locales.ts'
 import styles from './usage.module.css'
 import { isDeepSeekProviderRoute } from '../core/adapters.ts'
 import { deepseekPeriodAt } from '../core/pricing.ts'
-import type { ProviderSnapshotView, UsageOverviewView, UsageProviderSummary, UsageTokenTotals } from '../core/types.ts'
+import { deepseekVoucherData, drawVoucher, faceValue, formatDay, formatDenomination, loadVoucherArt } from './voucher.ts'
+import type { ObservedSpendView, ProviderSnapshotView, UsageOverviewView, UsageProviderSummary, UsageTokenTotals, UsageWindowSummary } from '../core/types.ts'
 
 /** The settings fields this section edits (immediate-apply semantics). */
 export interface UsageSettings {
@@ -150,13 +152,22 @@ export function UsageSectionCard(props: UsageSectionProps): ReactNode {
   const ui = useSyncExternalStore(store.subscribe, store.getSnapshot)
   const settingsSnapshot = settings.getSnapshot()
   const settingsValue = settingsSnapshot.value ?? {}
-  const [tab, setTab] = useState<'usage' | 'plans'>('usage')
+  const [tab, setTab] = useState<'usage' | 'plans' | 'bank'>('usage')
   const [refreshing, setRefreshing] = useState(false)
-
-  // Poll while mounted and visible; the overview is cheap (no probes — the
-  // host's own cycle owns those) so 10 s keeps balances fresh-ish between
+  // The enable checkbox writes through the settings scope, so subscribing here
+  // keeps the flag below live: the poll starts and stops with it instead of
+  // waiting for an unrelated render.
+  const [, bumpSettings] = useState(0)
+  useEffect(() => settings.subscribe(() => bumpSettings((count) => count + 1)), [settings])
+  const enabled = settingsValue.enabled ?? true
+
+  // Poll while mounted, enabled and visible; the overview is cheap (no probes —
+  // the host's own cycle owns those) so 10 s keeps balances fresh-ish between
   // manual refreshes.
   useEffect(() => {
+    // A disabled plugin deregisters its host routes, so the poll must stop with
+    // it; the section re-enables by writing the flag back through the checkbox.
+    if (!enabled) return undefined
     poll()
     let timer: number | undefined
     const start = (): void => {
@@ -177,7 +188,7 @@ export function UsageSectionCard(props: UsageSectionProps): ReactNode {
       if (timer !== undefined) window.clearInterval(timer)
       document.removeEventListener('visibilitychange', onVisibility)
     }
-  }, [poll])
+  }, [poll, enabled])
 
   const snapshot = ui.snapshot
 
@@ -191,11 +202,22 @@ export function UsageSectionCard(props: UsageSectionProps): ReactNode {
     }
   }
 
-  if (ui.status === 'error') {
-    return <div className={styles.section} data-dsh-plugin="usage">{t('usage.error', { error: ui.error ?? '' })}</div>
-  }
-  if (snapshot === null) {
-    return <div className={styles.section} data-dsh-plugin="usage">{t('usage.loading')}</div>
+  // Disabled, failed and still-loading states keep the settings row mounted:
+  // it owns the enable checkbox, so replacing the whole panel would leave the
+  // user no way back from the UI.
+  if (!enabled || ui.status === 'error' || snapshot === null) {
+    return (
+      <div className={styles.section} data-dsh-plugin="usage">
+        <span className={styles.muted} data-dsh-part="status-line">
+          {!enabled
+            ? t('usage.disabled')
+            : ui.status === 'error'
+              ? t('usage.error', { error: ui.error ?? '' })
+              : t('usage.loading')}
+        </span>
+        <SettingsRow settings={settings} snapshot={settingsSnapshot.status === 'ready' ? settingsSnapshot : undefined} value={settingsValue} />
+      </div>
+    )
   }
 
   const current = snapshot.current
@@ -234,6 +256,9 @@ export function UsageSectionCard(props: UsageSectionProps): ReactNode {
         <button type="button" role="tab" aria-selected={tab === 'plans'} className={tab === 'plans' ? `${styles.tab} ${styles.tabActive}` : styles.tab} onClick={() => setTab('plans')}>
           {t('usage.tab.plans')}
         </button>
+        <button type="button" role="tab" aria-selected={tab === 'bank'} className={tab === 'bank' ? `${styles.tab} ${styles.tabActive}` : styles.tab} onClick={() => setTab('bank')}>
+          {t('usage.tab.bank')}
+        </button>
       </div>
 
       {tab === 'usage' && (
@@ -299,6 +324,8 @@ export function UsageSectionCard(props: UsageSectionProps): ReactNode {
           ? <div className={styles.card}><span className={styles.muted}>{t('usage.plan.noneConfigured')}</span></div>
           : planProviders.map((provider) => <PlanCard key={provider.provider} provider={provider} current={current.provider} />)
       )}
+
+      {tab === 'bank' && <VoucherCard window={snapshot.usage.all ?? snapshot.usage.range} observedSpend={snapshot.usage.observedSpend} />}
     </div>
   )
 }
@@ -372,6 +399,105 @@ function totalOf(totals: UsageTokenTotals): number {
   return totals.inputTokens + totals.cacheReadTokens + totals.cacheWriteTokens + totals.outputTokens
 }
 
+/**
+ * The Token 银行 card: the DeepSeek official family's retained-ledger usage
+ * minted onto the whale-yuan note at 1000 tokens per whale yuan. The window
+ * prefers the host's whole-ledger aggregate and falls back to the 30-day
+ * trend when an older host serves no `all`; the spend line prefers the
+ * official balance watch and falls back to the fold-time estimate; the
+ * artwork draw failure degrades to an error line and never takes the
+ * section down.
+ */
+function VoucherCard(props: { window?: UsageWindowSummary; observedSpend?: ObservedSpendView }): ReactNode {
+  const { window: ledger, observedSpend } = props
+  const data = deepseekVoucherData(ledger)
+  const canvasRef = useRef<HTMLCanvasElement | null>(null)
+  const [drawError, setDrawError] = useState<string | undefined>(undefined)
+  const dataKey = data === undefined ? '' : `${data.from}|${data.to}|${data.tokens}|${data.calls}|${data.cost}`
+
+  useEffect(() => {
+    if (data === undefined) return
+    const voucher = data
+    let cancelled = false
+    loadVoucherArt().then((art) => {
+      if (cancelled) return
+      const canvas = canvasRef.current
+      if (canvas !== null) {
+        try {
+          drawVoucher(canvas, art, voucher)
+        } catch (error) {
+          if (!cancelled) setDrawError(error instanceof Error ? error.message : String(error))
+        }
+      }
+    }, (error) => {
+      if (!cancelled) setDrawError(error instanceof Error ? error.message : String(error))
+    })
+    return () => {
+      cancelled = true
+    }
+  // dataKey covers every field the draw and the buttons read.
+  }, [dataKey])
+
+  const onSave = (): void => {
+    const canvas = canvasRef.current
+    if (canvas === null || data === undefined) return
+    canvas.toBlob((blob) => {
+      if (blob === null) return
+      const url = URL.createObjectURL(blob)
+      const anchor = document.createElement('a')
+      anchor.href = url
+      anchor.download = `dsh-whale-voucher-${data.to}.png`
+      anchor.click()
+      window.setTimeout(() => URL.revokeObjectURL(url), 10_000)
+    }, 'image/png')
+  }
+
+  const shareSupported = typeof navigator !== 'undefined' && typeof navigator.canShare === 'function'
+  const onShare = (): void => {
+    const canvas = canvasRef.current
+    if (canvas === null || data === undefined || !shareSupported) return
+    canvas.toBlob(async (blob) => {
+      if (blob === null) return
+      const file = new File([blob], `dsh-whale-voucher-${data.to}.png`, { type: 'image/png' })
+      if (!navigator.canShare({ files: [file] })) return
+      try {
+        await navigator.share({ files: [file], title: t('usage.bank.title') })
+      } catch {
+        // A user-cancelled share sheet rejects; nothing to report.
+      }
+    }, 'image/png')
+  }
+
+  return (
+    <div className={styles.card} data-dsh-part="bank-card">
+      <span className={styles.cardTitle}>{t('usage.bank.title')}</span>
+      {data === undefined
+        ? <span className={styles.muted}>{t('usage.bank.noUsage')}</span>
+        : <>
+            <span className={styles.muted}>{t('usage.bank.hint')}</span>
+            <div className={styles.voucherPreview} data-dsh-part="voucher-preview">
+              <canvas ref={canvasRef} aria-label={t('usage.bank.title')} />
+            </div>
+            {drawError !== undefined && <span className={styles.errorLine}>{t('usage.bank.drawError', { error: drawError })}</span>}
+            <div className={styles.providerRow}>
+              <span className={styles.providerName}>{t('usage.bank.minted', { minted: formatDenomination(faceValue(data.tokens)), tokens: formatTokens(data.tokens) })}</span>
+              <span className={styles.providerTokens}>{t('usage.calls', { n: data.calls })}</span>
+            </div>
+            <span className={styles.muted}>
+              {observedSpend !== undefined
+                ? t('usage.bank.spend.observed', { cost: observedSpend.cny.toFixed(2), since: formatDay(observedSpend.since) })
+                : t('usage.bank.spend.estimated', { cost: data.cost.toFixed(2) })}
+            </span>
+            <span className={styles.muted}>{t('usage.bank.window', { from: data.from, to: data.to })}</span>
+            <div className={styles.buttonRow}>
+              <button type="button" className={styles.refreshBtn} onClick={onSave}>{t('usage.bank.save')}</button>
+              {shareSupported && <button type="button" className={styles.refreshBtn} onClick={onShare}>{t('usage.bank.share')}</button>}
+            </div>
+          </>}
+    </div>
+  )
+}
+
 function PlanCard(props: { provider: ProviderSnapshotView; current?: string }): ReactNode {
   const { provider, current } = props
   return (

package/src/client/index.ts

@@ -98,9 +98,12 @@ export function apply(ctx: ClientContext): void {
     usageApi.overview().then((snapshot) => {
       if (seq !== pollSeq) return
       store.actions.setSnapshot(snapshot)
-    }, () => {
+    }, (error: unknown) => {
       if (seq !== pollSeq) return
-      store.actions.setState('error', 'usage.overview transport error')
+      // Surface the transport's own message: a 404 here means the host has no
+      // /api/dsh-usage/overview route (plugin disabled), which the panel must be
+      // able to tell apart from a genuine failure.
+      store.actions.setState('error', error instanceof Error ? error.message : String(error))
     })
   }
   // The refresh response is authoritative: it reflects the completed probe
@@ -112,9 +115,9 @@ export function apply(ctx: ClientContext): void {
     usageApi.refresh().then((snapshot) => {
       pollSeq = seq
       store.actions.setSnapshot(snapshot)
-    }, () => {
+    }, (error: unknown) => {
       if (seq !== pollSeq) return
-      store.actions.setState('error', 'usage.refresh transport error')
+      store.actions.setState('error', error instanceof Error ? error.message : String(error))
     })
   }
 

package/src/client/locales.ts

@@ -12,11 +12,13 @@ export const zh = {
   'usage.title': '使用统计',
   'usage.tab.usage': '用量',
   'usage.tab.plans': '个人套餐',
+  'usage.tab.bank': 'Token 银行',
   'usage.refresh': '刷新',
   'usage.refreshing': '刷新中…',
   'usage.updated': '更新于 {time}',
   'usage.loading': '正在加载用量数据…',
   'usage.error': '加载失败：{error}',
+  'usage.disabled': '插件已停用：勾选下方「启用插件」即可恢复统计。',
   'usage.current': '当前',
   'usage.today': '今日用量',
   'usage.today.cost': '今日消费（估算）',
@@ -50,6 +52,16 @@ export const zh = {
   'usage.config.bubbleMode.always': '常驻显示',
   'usage.config.bubbleMode.change': '仅变化时',
   'usage.config.bubbleMode.off': '关闭',
+  'usage.bank.title': '鲸元券',
+  'usage.bank.hint': '官方 API 每消耗 1000 tokens 铸造 1 鲸元；保存或分享这张票券。',
+  'usage.bank.noUsage': '暂无 DeepSeek 官方用量数据（统计自插件启用起）',
+  'usage.bank.minted': '累计铸造 {minted} 鲸元（{tokens} tokens）',
+  'usage.bank.spend.observed': '官方余额实测花费 ¥{cost}（自 {since} 起）',
+  'usage.bank.spend.estimated': '消费估算：约 ¥{cost}',
+  'usage.bank.window': '统计窗口 {from} ~ {to}',
+  'usage.bank.save': '保存图片',
+  'usage.bank.share': '分享',
+  'usage.bank.drawError': '票券生成失败：{error}',
 }
 
 /** English mirror; every zh key present. */
@@ -57,11 +69,13 @@ export const en: Record<UsageKey, string> = {
   'usage.title': 'Usage Statistics',
   'usage.tab.usage': 'Usage',
   'usage.tab.plans': 'Plans',
+  'usage.tab.bank': 'Token Bank',
   'usage.refresh': 'Refresh',
   'usage.refreshing': 'Refreshing…',
   'usage.updated': 'Updated {time}',
   'usage.loading': 'Loading usage data…',
   'usage.error': 'Failed to load: {error}',
+  'usage.disabled': 'Plugin disabled. Tick "Enable plugin" below to resume statistics.',
   'usage.current': 'Current',
   'usage.today': 'Today',
   'usage.today.cost': 'Today spend (estimated)',
@@ -95,6 +109,16 @@ export const en: Record<UsageKey, string> = {
   'usage.config.bubbleMode.always': 'Always visible',
   'usage.config.bubbleMode.change': 'On change',
   'usage.config.bubbleMode.off': 'Off',
+  'usage.bank.title': 'Whale-yuan voucher',
+  'usage.bank.hint': 'Every 1,000 tokens spent on the official API mint one whale yuan; save or share the note.',
+  'usage.bank.noUsage': 'No official DeepSeek usage yet (counting starts when the plugin is enabled)',
+  'usage.bank.minted': 'Minted {minted} whale yuan ({tokens} tokens)',
+  'usage.bank.spend.observed': 'Spent ¥{cost} observed on the official balance (watching since {since})',
+  'usage.bank.spend.estimated': 'Estimated spend: about ¥{cost}',
+  'usage.bank.window': 'Window {from} - {to}',
+  'usage.bank.save': 'Save image',
+  'usage.bank.share': 'Share',
+  'usage.bank.drawError': 'Failed to render the voucher: {error}',
 }
 
 export type UsageKey = keyof typeof zh

package/src/client/usage.module.css

@@ -259,6 +259,19 @@
   opacity: 0.6;
 }
 
+/* Token 银行：票面 canvas 按容器宽度缩放；按钮行沿用 ghost 按钮样式。 */
+.voucherPreview canvas {
+  display: block;
+  width: 100%;
+  height: auto;
+  border-radius: 8px;
+}
+
+.buttonRow {
+  display: flex;
+  gap: 8px;
+}
+
 .errorLine {
   font-size: 12px;
   opacity: 0.75;