@linxin666/dsh-usage 0.4.7 → 0.4.9

package/src/client/UsageFootCard.tsx

@@ -27,8 +27,12 @@ import { useEffect, useState, useSyncExternalStore, type ReactNode } from 'react
 import type { ConfigForm } from '@deepseek-ai/dsh-client-ui-settings/client'
 import { t } from './locales.ts'
 import styles from './usage.module.css'
+import { formatClock, PeakBadge } from './PeakBadge.tsx'
 import { formatTokens, type UsageSettings } from './UsageSectionCard.tsx'
+import { deepseekPeriodAt } from '../core/pricing.ts'
+import { isDeepSeekProviderRoute } from '../core/adapters.ts'
 import { totalTokens } from '../core/ledger.ts'
+import { formatSpend } from '../core/spend.ts'
 import type { BalanceView, ProviderSnapshotView, UsageOverviewView } from '../core/types.ts'
 import type { UsageStoreInstance } from './usage-store.ts'
 
@@ -114,27 +118,23 @@ function formatBalance(balance: BalanceView): string {
   return currency + ' ' + balance.totalBalance
 }
 
-function formatClock(ms: number): string {
-  try {
-    return new Date(ms).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
-  } catch {
-    return ''
-  }
-}
-
 /**
- * Display name of the provider owning today's priced spend: the day's highest
- * cost row, else the current session route, resolved through the provider
- * snapshot (an older host without the day rows falls back to the current
- * route). Undefined when there is no route to name.
+ * Route key owning today's priced spend: the day's highest cost row, else the
+ * current session route (an older host without the day rows falls back to the
+ * current route). Undefined when neither names one.
  */
-function spendProvider(snapshot: UsageOverviewView): string | undefined {
+function spendRoute(snapshot: UsageOverviewView): string | undefined {
   let top: UsageOverviewView['usage']['today']['providers'][number] | undefined
   for (const row of snapshot.usage.today.providers) {
     if (row.totals.cost <= 0) continue
     if (top === undefined || row.totals.cost > top.totals.cost) top = row
   }
-  const route = top?.provider ?? snapshot.current.provider
+  return top?.provider ?? snapshot.current.provider
+}
+
+/** Display name of the route spendRoute() names, resolved through the snapshot. */
+function spendProvider(snapshot: UsageOverviewView): string | undefined {
+  const route = spendRoute(snapshot)
   if (route === undefined) return undefined
   return snapshot.providers.find((entry) => entry.provider === route)?.displayName
     ?? (route === snapshot.current.provider ? snapshot.current.displayName : undefined)
@@ -149,9 +149,9 @@ function spendProvider(snapshot: UsageOverviewView): string | undefined {
  */
 function headline(snapshot: UsageOverviewView): { label: string; value: string; tokenFallback: boolean; provider?: string } {
   const totals = snapshot.usage.today.totals
-  if (totals.cost > 0) return { label: t('usage.foot.cost'), value: '¥' + totals.cost.toFixed(2), tokenFallback: false, provider: spendProvider(snapshot) }
+  if (totals.cost > 0) return { label: t('usage.foot.cost'), value: formatSpend(totals.cost, snapshot.display), tokenFallback: false, provider: spendProvider(snapshot) }
   if (totals.calls > 0) return { label: t('usage.today'), value: formatTokens(totalTokens(totals)) + ' tokens', tokenFallback: true }
-  return { label: t('usage.foot.cost'), value: '¥0.00', tokenFallback: false }
+  return { label: t('usage.foot.cost'), value: formatSpend(0, snapshot.display), tokenFallback: false }
 }
 
 /** The tokens/calls sub-line under the headline; a quiet no-data line on an empty day. */
@@ -266,6 +266,11 @@ export function UsageFootCard(props: UsageFootCardProps): ReactNode {
 
   const head = headline(snapshot)
   const balances = balanceLine(snapshot)
+  // The published peak/off-peak clock prices the official DeepSeek family only,
+  // so the marker follows the route that owns today's spend (else the session
+  // route) and stays away from every other provider's card.
+  const route = spendRoute(snapshot)
+  const period = route !== undefined && isDeepSeekProviderRoute(route) ? deepseekPeriodAt(Date.now()) : undefined
 
   if (collapsed) {
     return (
@@ -274,6 +279,7 @@ export function UsageFootCard(props: UsageFootCardProps): ReactNode {
           <span className={styles.footStrip} data-dsh-part="foot-card-strip">
             <GaugeIcon />
             {head.provider !== undefined && <span className={styles.footStripProvider}>{head.provider}</span>}
+            {period !== undefined && <PeakBadge peak={period.peak} boundaryMs={period.boundaryMs} variant="compact" />}
             <span className={styles.footStripLabel}>{head.label}</span>
             <span className={styles.footStripValue}>{head.value}</span>
           </span>
@@ -292,6 +298,14 @@ export function UsageFootCard(props: UsageFootCardProps): ReactNode {
         </span>
         <span className={styles.footLine} data-dsh-part="foot-card-usage">{usageLine(snapshot, head.tokenFallback)}</span>
         {balances !== undefined && <span className={styles.footLine} data-dsh-part="foot-card-balances">{balances}</span>}
+        {period !== undefined && (
+          <span className={styles.footPeak}>
+            <PeakBadge peak={period.peak} boundaryMs={period.boundaryMs} variant="compact" />
+            <span className={styles.footPeakClock}>
+              {t(period.peak ? 'usage.peak.ends' : 'usage.peak.starts', { time: formatClock(period.boundaryMs) })}
+            </span>
+          </span>
+        )}
         <span className={styles.footMeta}>{t('usage.updated', { time: formatClock(snapshot.updatedAt) })}</span>
       </button>
       {toggle}

package/src/client/UsageSectionCard.tsx

@@ -1,7 +1,7 @@
 /**
  * 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)
+ * the whale-yuan voucher minted from every provider's ledger 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.
@@ -13,15 +13,21 @@ import type { ConfigForm, ConfigFormSnapshot } from '@deepseek-ai/dsh-client-ui-
 import type { UsageStoreInstance } from './usage-store.ts'
 import { t } from './locales.ts'
 import styles from './usage.module.css'
+import { PeakBadge } from './PeakBadge.tsx'
 import { isDeepSeekProviderRoute } from '../core/adapters.ts'
 import { deepseekPeriodAt } from '../core/pricing.ts'
 import { voucherData, drawVoucher, faceValue, formatDay, formatDenomination, loadVoucherArt } from './voucher.ts'
 import type { ObservedSpendView, ProviderSnapshotView, UsageDayView, UsageOverviewView, UsageProviderSummary, UsageTokenTotals, UsageWindowSummary } from '../core/types.ts'
+import { formatSpend, type SpendDisplay } from '../core/spend.ts'
 
 /** The settings fields this section edits (immediate-apply semantics). */
 export interface UsageSettings {
   enabled?: boolean
   pollIntervalSec?: number
+  /** Currency the spend figures are displayed in; the ledger stays CNY. */
+  spendCurrency?: 'CNY' | 'USD'
+  /** CNY per USD, consulted only while the display currency is USD. */
+  cnyPerUsd?: number
 }
 
 /** The registration-side face the section's slot entry injects. */
@@ -77,19 +83,6 @@ function formatTime(ms: number): string {
   }
 }
 
-function formatClock(ms: number): string {
-  try {
-    return new Date(ms).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
-  } catch {
-    return ''
-  }
-}
-
-/** Formatted CNY spend estimate (the only priced currency today). */
-function formatCost(cost: number): string {
-  return '¥' + cost.toFixed(2)
-}
-
 function toneClass(percent: number): string {
   if (percent >= 90) return styles.barLow
   if (percent >= 70) return styles.barWarn
@@ -389,9 +382,7 @@ export function UsageSectionCard(props: UsageSectionProps): ReactNode {
               onSelect={(date) => { setUsageDay(date === todayDate ? undefined : date) }}
             />
             {deepseekVisible && (
-              <span className={styles.muted} data-dsh-part="peak-status">
-                {t(deepseekPeriod.peak ? 'usage.peak.on' : 'usage.peak.off', { time: formatClock(deepseekPeriod.boundaryMs) })}
-              </span>
+              <PeakBadge peak={deepseekPeriod.peak} boundaryMs={deepseekPeriod.boundaryMs} variant="full" />
             )}
             {usageDayLoad?.status === 'error'
               ? <span className={styles.errorLine}>{t('usage.day.error', { error: usageDayLoad.error ?? '' })}</span>
@@ -403,7 +394,7 @@ export function UsageSectionCard(props: UsageSectionProps): ReactNode {
             {(day?.totals.cost ?? 0) > 0 && (
               <div className={styles.providerRow} data-dsh-part="today-cost">
                 <span className={styles.providerName}>{isToday ? t('usage.today.cost') : t('usage.day.cost')}</span>
-                <span className={styles.providerTokens}>{formatCost(day?.totals.cost ?? 0)}</span>
+                <span className={styles.providerTokens}>{formatSpend(day?.totals.cost ?? 0, snapshot.display)}</span>
               </div>
             )}
             {(day?.providers.length ?? 0) > 0 && (
@@ -414,7 +405,7 @@ export function UsageSectionCard(props: UsageSectionProps): ReactNode {
                       {snapshot.providers.find((provider) => provider.provider === row.provider)?.displayName ?? row.provider}
                       {current.provider === row.provider && <span className={styles.currentBadge}>{t('usage.current')}</span>}
                     </span>
-                    <span className={styles.providerTokens}>{formatTokens(row.totals.inputTokens + row.totals.cacheReadTokens + row.totals.cacheWriteTokens + row.totals.outputTokens)} · {t('usage.calls', { n: row.totals.calls })}{row.totals.cost > 0 ? ` · ${formatCost(row.totals.cost)}` : ''}</span>
+                    <span className={styles.providerTokens}>{formatTokens(row.totals.inputTokens + row.totals.cacheReadTokens + row.totals.cacheWriteTokens + row.totals.outputTokens)} · {t('usage.calls', { n: row.totals.calls })}{row.totals.cost > 0 ? ` · ${formatSpend(row.totals.cost, snapshot.display)}` : ''}</span>
                   </div>
                 ))}
               </div>
@@ -472,6 +463,7 @@ export function UsageSectionCard(props: UsageSectionProps): ReactNode {
             // voucher falls back to that day's fold-time estimate.
             observedSpend={bankSelection === undefined ? snapshot.usage.observedSpend : undefined}
             loading={bankSelection !== undefined && bankDayLoad?.status === 'loading'}
+            display={snapshot.display}
             {...(bankDayLoad?.status === 'error' ? { error: bankDayLoad.error ?? '' } : {})}
           />
         </>
@@ -550,17 +542,17 @@ function totalOf(totals: UsageTokenTotals): number {
 }
 
 /**
- * The Token 银行 card: the mint family's (DeepSeek official + MiMo)
- * retained-ledger usage minted onto the whale-yuan note at 1,000,000 tokens
- * per whale yuan. The window is the whole retained ledger by default (the
- * host's aggregate, falling back to the 30-day trend when an older host serves
- * no `all`) or the single day the user picked; the spend line prefers the
- * official balance watch (whole window only) and falls back to the fold-time
- * estimate, which only the priced family feeds; the artwork draw failure
- * degrades to an error line and never takes the section down.
+ * The Token 银行 card: every provider's retained-ledger usage minted onto the
+ * whale-yuan note at 1,000,000 tokens per whale yuan. The window is the whole
+ * retained ledger by default (the host's aggregate, falling back to the 30-day
+ * trend when an older host serves no `all`) or the single day the user picked;
+ * the spend line prefers the official balance watch (whole window only) and
+ * falls back to the fold-time estimate, which only the priced family feeds;
+ * the artwork draw failure degrades to an error line and never takes the
+ * section down.
  */
-function VoucherCard(props: { window?: UsageWindowSummary; observedSpend?: ObservedSpendView; loading?: boolean; error?: string }): ReactNode {
-  const { window: ledger, observedSpend, loading, error } = props
+function VoucherCard(props: { window?: UsageWindowSummary; observedSpend?: ObservedSpendView; loading?: boolean; error?: string; display?: SpendDisplay }): ReactNode {
+  const { window: ledger, observedSpend, loading, error, display } = props
   const data = voucherData(ledger)
   const canvasRef = useRef<HTMLCanvasElement | null>(null)
   const [drawError, setDrawError] = useState<string | undefined>(undefined)
@@ -640,8 +632,8 @@ function VoucherCard(props: { window?: UsageWindowSummary; observedSpend?: Obser
             </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) })}
+                ? t('usage.bank.spend.observed', { cost: formatSpend(observedSpend.cny, display), since: formatDay(observedSpend.since) })
+                : t('usage.bank.spend.estimated', { cost: formatSpend(data.cost, display) })}
             </span>
             <span className={styles.muted}>{t('usage.bank.window', { from: data.from, to: data.to })}</span>
             <div className={styles.buttonRow}>
@@ -704,7 +696,7 @@ function SettingsRow(props: {
   const disabled = snapshot === undefined || !snapshot.writable
   const [failure, setFailure] = useState<string | undefined>(undefined)
 
-  const write = (field: 'enabled' | 'pollIntervalSec', next: boolean | number): void => {
+  const write = (field: 'enabled' | 'pollIntervalSec' | 'spendCurrency' | 'cnyPerUsd', next: boolean | number | 'CNY' | 'USD'): void => {
     setFailure(undefined)
     let answer: Promise<boolean>
     try {
@@ -749,6 +741,34 @@ function SettingsRow(props: {
             }}
           />
         </label>
+        <label className={styles.settingItem}>
+          {t('usage.config.spendCurrency')}
+          <select
+            value={value.spendCurrency === 'USD' ? 'USD' : 'CNY'}
+            disabled={disabled}
+            onChange={(event) => { write('spendCurrency', event.target.value === 'USD' ? 'USD' : 'CNY') }}
+          >
+            <option value="CNY">CNY</option>
+            <option value="USD">USD</option>
+          </select>
+        </label>
+        <label className={styles.settingItem}>
+          {t('usage.config.cnyPerUsd')}
+          <input
+            type="number"
+            min={0.01}
+            max={1000}
+            step={0.01}
+            value={typeof value.cnyPerUsd === 'number' ? value.cnyPerUsd : 7.2}
+            disabled={disabled}
+            onChange={(event) => {
+              const parsed = Number(event.target.value)
+              // An unusable rate is simply not written: the stored value stays,
+              // and rendering falls back to the documented default rate.
+              if (Number.isFinite(parsed) && parsed >= 0.01 && parsed <= 1000) write('cnyPerUsd', Math.round(parsed * 100) / 100)
+            }}
+          />
+        </label>
       </div>
       {failure !== undefined && (
         <span className={styles.errorLine} role="status">

package/src/client/foot-card-mount.tsx

@@ -22,55 +22,179 @@ import { UsageFootCard, type UsageFootCardProps } from './UsageFootCard.tsx'
 /** Stable data attribute identifying the injected card container. */
 export const FOOT_CARD_SELECTOR = '[data-dsh-usage-foot-card]'
 
+/** The shell slot whose occupant is the settings shell (and carries its store). */
+const SETTINGS_SEAT_SLOT = 'sidebar.settings'
+
+/** The shell sidebar column, which also scopes the settings seat. */
+const SIDEBAR_SELECTOR = '[data-pane="sidebar"], [class*="sidebarCol"]'
+
+/** The shell's settings row: the launcher seat plus the Settings trigger fallback. */
+const SETTINGS_AREA_SELECTOR = '[class*="settingsArea"]'
+
+/** A launcher that opens the settings dialog by itself (the shell's own gear). */
+const DIALOG_TRIGGER_SELECTOR = 'button[aria-haspopup="dialog"]'
+
+/** A launcher that opens a menu whose settings item opens the dialog (the account row). */
+const MENU_ITEM_SELECTOR = '[role="menu"] button[role="menuitem"]'
+
+/** One shell frame of the replay poll: menus and the panel mount a frame later. */
+const REPLAY_STEP_MS = 50
+
+/** Replay poll budget in steps (about one second of shell frames). */
+const REPLAY_STEPS = 20
+
+/**
+ * The settings shell's store handle, narrowed to the one write this module
+ * performs. A slot registration stores its seat type-erased (`StoreDecl`), so
+ * the shape the seat's occupant guarantees is restated here.
+ */
+export interface SettingsShellStore {
+  create(): { actions: { openSection(id: string): void } }
+}
+
+/** The registry read the seat lookup needs (structurally `ctx.slots`). */
+export interface SlotSeatReader {
+  entries(key: string): readonly { store?: unknown }[]
+}
+
+/** What the card knows about the settings section it opens. */
+export interface UsageSettingsTarget {
+  /** Slot registration id of the usage section (the nav row the panel selects). */
+  id: string
+  /** The section's nav label in the active locale (the DOM replay's row pick). */
+  label: () => string
+  /** The settings shell's store handle, when the seat exposes one. */
+  store?: SettingsShellStore | undefined
+}
+
+/** The shell sidebar column, when the shell has mounted one. */
+function sidebarColumn(): HTMLElement | undefined {
+  return document.querySelector<HTMLElement>(SIDEBAR_SELECTOR) ?? undefined
+}
+
 /** The shell sidebar's foot area (footer actions + the Settings row), when mounted. */
 function footArea(): HTMLElement | undefined {
-  const column = document.querySelector<HTMLElement>('[data-pane="sidebar"], [class*="sidebarCol"]')
-  return column?.querySelector<HTMLElement>('[class*="footArea"]') ?? undefined
+  return sidebarColumn()?.querySelector<HTMLElement>('[class*="footArea"]') ?? undefined
+}
+
+/**
+ * Resolve the settings shell's store handle from the `sidebar.settings` seat.
+ *
+ * The seat is a single-occupant slot and the shell's own registration carries
+ * the store that owns the panel's open state and active section, so reading it
+ * is the one step that opens the panel without touching the DOM. A shell that
+ * exposes no seat, a seat without a store, or a registry answering mid-teardown
+ * all yield undefined, and the caller replays the DOM path instead.
+ * @param slots - the renderer-owned slot registry.
+ * @returns the store handle, or undefined when the seat carries none.
+ */
+export function settingsShellStore(slots: SlotSeatReader | undefined): SettingsShellStore | undefined {
+  let seat: unknown
+  try {
+    seat = slots?.entries(SETTINGS_SEAT_SLOT)[0]?.store
+  } catch {
+    return undefined
+  }
+  if (seat === undefined || seat === null) return undefined
+  return typeof (seat as { create?: unknown }).create === 'function'
+    ? seat as SettingsShellStore
+    : undefined
 }
 
 /**
- * Open the settings panel on the usage section. The shell owns the panel's
- * open state and exposes no service for it, so the card replays the user's
- * own path: activate the sidebar Settings trigger, then pick the nav row
- * carrying the section's (localized) label. Every step degrades silently —
- * with the panel already open only the nav pick runs, and a missing row
- * leaves the panel on its default section.
- * @param label - the usage section's nav label in the active locale.
+ * Drive the shell's settings store onto the usage section.
+ * @param store - the seat's store handle.
+ * @param id - the section's slot registration id.
+ * @returns true when the store accepted the call, false when it threw.
  */
-export function openUsageSettings(label: () => string): void {
-  /** Click the nav row carrying the usage label inside the open panel. */
-  const pick = (panel: Element): void => {
-    const wanted = label()
-    for (const row of panel.querySelectorAll<HTMLButtonElement>('nav button')) {
-      if (row.textContent !== null && row.textContent.includes(wanted)) {
-        row.click()
-        return
-      }
+function openThroughStore(store: SettingsShellStore, id: string): boolean {
+  try {
+    store.create().actions.openSection(id)
+    return true
+  } catch {
+    // A foreign shell exposing an unrelated seat: the DOM replay still runs.
+    return false
+  }
+}
+
+/**
+ * Click the nav row carrying the section's label inside the open panel.
+ * @param panel - the open settings dialog.
+ * @param label - the section's nav label in the active locale.
+ */
+function pickSectionRow(panel: Element, label: () => string): void {
+  const wanted = label()
+  for (const row of panel.querySelectorAll<HTMLButtonElement>('nav button')) {
+    if (row.textContent !== null && row.textContent.includes(wanted)) {
+      row.click()
+      return
     }
-    // Panel open but the usage row is gone (plugin toggled off): stay put.
   }
-  // A panel that is already open must never be toggled shut by the trigger;
+  // Panel open but the usage row is gone (plugin toggled off): stay put.
+}
+
+/**
+ * Poll the page over the shell's next frames until a lookup yields a value.
+ * @param find - the lookup, run once per step.
+ * @param steps - remaining frame budget.
+ * @returns the first value found, or undefined once the budget is spent.
+ */
+function until<T>(find: () => T | null | undefined, steps = REPLAY_STEPS): Promise<T | undefined> {
+  const found = find()
+  if (found !== undefined && found !== null) return Promise.resolve(found)
+  if (steps <= 0) return Promise.resolve(undefined)
+  return new Promise<void>((resolve) => { window.setTimeout(resolve, REPLAY_STEP_MS) })
+    .then(() => until(find, steps - 1))
+}
+
+/**
+ * Replay the user's own settings path, one shell frame at a time.
+ * @param launcher - the settings seat's trigger.
+ * @param label - the section's nav label in the active locale.
+ */
+async function replay(launcher: HTMLButtonElement, label: () => string): Promise<void> {
+  launcher.click()
+  // A launcher that opens a menu (an account row occupying settings.launcher)
+  // reaches Settings through its first item; the shell's own trigger opens the
+  // panel directly.
+  if (launcher.getAttribute('aria-haspopup') === 'menu') {
+    const item = await until(() => document.querySelector<HTMLButtonElement>(MENU_ITEM_SELECTOR))
+    if (item === undefined) return
+    item.click()
+  }
+  const panel = await until(() => document.querySelector('[role="dialog"]'))
+  if (panel !== undefined) pickSectionRow(panel, label)
+}
+
+/**
+ * Open the settings panel on the usage section.
+ *
+ * The seat's store is the primary path: `openSection` opens the dialog on the
+ * usage row in one call, with no dependence on which plugin occupies the
+ * `settings.launcher` seat — an account row there turns a trigger click into a
+ * menu, which is how this click used to land on the account menu instead of the
+ * panel. Without such a store the card replays the user's own path: activate
+ * the launcher (preferring the dialog trigger over a menu trigger), follow a
+ * menu launcher's first settings item, then pick the nav row carrying the
+ * section's label. Every step degrades silently — a missing surface leaves the
+ * page untouched, and with the panel already open only the nav pick runs.
+ * @param target - the section id, its localized label, and the seat's store.
+ */
+export function openUsageSettings(target: UsageSettingsTarget): void {
+  const { id, label, store } = target
+  if (store !== undefined && openThroughStore(store, id)) return
+  // A panel that is already open must never be toggled shut by the launcher;
   // only the nav pick runs.
   const open = document.querySelector('[role="dialog"]')
   if (open !== null) {
-    pick(open)
+    pickSectionRow(open, label)
     return
   }
-  const column = document.querySelector<HTMLElement>('[data-pane="sidebar"], [class*="sidebarCol"]')
-  const trigger = column?.querySelector<HTMLButtonElement>('[class*="settingsArea"] button')
-  trigger?.click()
-  let tries = 0
-  const attempt = (): void => {
-    const panel = document.querySelector('[role="dialog"]')
-    if (panel !== null) {
-      pick(panel)
-      return
-    }
-    tries += 1
-    // The panel mounts on the shell's next frames; wait briefly, then give up.
-    if (tries <= 20) window.setTimeout(attempt, 50)
-  }
-  window.setTimeout(attempt, 0)
+  const area = sidebarColumn()?.querySelector<HTMLElement>(SETTINGS_AREA_SELECTOR)
+  const launcher = area?.querySelector<HTMLButtonElement>(DIALOG_TRIGGER_SELECTOR)
+    ?? area?.querySelector<HTMLButtonElement>('button')
+  if (launcher === undefined || launcher === null) return
+  void replay(launcher, label)
 }
 
 /**
@@ -93,7 +217,7 @@ export function mountUsageFootCard(props: UsageFootCardProps): () => void {
   const place = (): void => {
     const foot = footArea()
     if (foot === undefined) return
-    const settings = foot.querySelector<HTMLElement>('[class*="settingsArea"]')
+    const settings = foot.querySelector<HTMLElement>(SETTINGS_AREA_SELECTOR)
     if (settings !== null) {
       if (container.nextElementSibling !== settings) foot.insertBefore(container, settings)
       return

package/src/client/index.ts

@@ -19,7 +19,7 @@ import type {} from '@deepseek-ai/dsh-client-ui-slots'
 import type {} from '@deepseek-ai/dsh-client-ui-renderer/client'
 import { createUsageStore, type UsageStoreInstance } from './usage-store.ts'
 import { UsageSectionCard, type UsageSectionFace, type UsageSettings } from './UsageSectionCard.tsx'
-import { mountUsageFootCard, openUsageSettings } from './foot-card-mount.tsx'
+import { mountUsageFootCard, openUsageSettings, settingsShellStore } from './foot-card-mount.tsx'
 import { NS, en, zh, t } from './locales.ts'
 import { createServedEntryForm } from './settings-entry-form.ts'
 import type { UsageDayResponse, UsageDayView, UsageOverviewView } from '../core/types.ts'
@@ -68,6 +68,9 @@ const USAGE_ENTRY_IDS: readonly string[] = [AGGREGATE_ENTRY_ID, 'usage', USAGE_S
 /** First-level nav position: directly below the Workshop section (order 150). */
 const SECTION_ORDER = 151
 
+/** The section's nav row id — what the shell's store selects when the card opens. */
+const USAGE_SECTION_ID = 'dsh-usage'
+
 /** Required services. */
 export const inject = ['slots', 'locale', 'connection', 'configForms', 'remote']
 
@@ -174,7 +177,13 @@ export function apply(ctx: ClientContext): void {
     store,
     poll,
     settings: settingsForm,
-    onOpen: () => { openUsageSettings(() => t('usage.title')) },
+    onOpen: () => {
+      openUsageSettings({
+        id: USAGE_SECTION_ID,
+        label: () => t('usage.title'),
+        store: settingsShellStore(ctx.slots),
+      })
+    },
     locale: ctx.locale,
   })
   ctx.effect(() => () => {
@@ -189,7 +198,7 @@ export function apply(ctx: ClientContext): void {
     try {
       const unregister = ctx.slots.register({
         name: 'settings.section',
-        id: 'dsh-usage',
+        id: USAGE_SECTION_ID,
         order: SECTION_ORDER,
         label: () => ctx.locale.bind(NS)('usage.title'),
         locale: NS,

package/src/client/locales.ts

@@ -31,6 +31,10 @@ export const zh = {
   'usage.day.error': '该日用量加载失败：{error}',
   'usage.peak.on': 'DeepSeek 高峰时段：计价 ×2，{time} 结束',
   'usage.peak.off': 'DeepSeek 空闲时段：计价为高峰一半，{time} 进入高峰',
+  'usage.peak.tag.on': '高峰',
+  'usage.peak.tag.off': '空闲',
+  'usage.peak.ends': '{time} 结束',
+  'usage.peak.starts': '{time} 进入高峰',
   'usage.calls': '{n} 次调用',
   'usage.tokens.total': '总 tokens',
   'usage.tokens.input': '输入',
@@ -55,13 +59,15 @@ export const zh = {
   'usage.config.title': '设置',
   'usage.config.enabled': '启用插件',
   'usage.config.pollIntervalSec': '轮询间隔（秒）',
+  'usage.config.spendCurrency': '消费显示货币',
+  'usage.config.cnyPerUsd': '汇率（1 美元兑人民币）',
   'usage.config.saveFailed': '保存失败：设置未被接受。',
   'usage.bank.title': '鲸元券',
-  'usage.bank.hint': 'DeepSeek 官方 API 与 MiMo 每消耗 100 万 tokens 铸造 1 鲸元；保存或分享这张票券。',
-  'usage.bank.noUsage': '暂无 DeepSeek 官方 / MiMo 用量数据（统计自插件启用起）',
+  'usage.bank.hint': '所有模型每消耗 100 万 tokens 铸造 1 鲸元；保存或分享这张票券。',
+  'usage.bank.noUsage': '暂无用量数据',
   'usage.bank.minted': '累计铸造 {minted} 鲸元（{tokens} tokens）',
-  'usage.bank.spend.observed': '官方余额实测花费 ¥{cost}（自 {since} 起）',
-  'usage.bank.spend.estimated': '消费估算：约 ¥{cost}',
+  'usage.bank.spend.observed': '官方余额实测花费 {cost}（自 {since} 起）',
+  'usage.bank.spend.estimated': '消费估算：约 {cost}',
   'usage.bank.window': '统计窗口 {from} ~ {to}',
   'usage.bank.windowAll': '全部保留期',
   'usage.bank.save': '保存图片',
@@ -98,6 +104,10 @@ export const en: Record<UsageKey, string> = {
   'usage.day.error': 'Failed to load that day: {error}',
   'usage.peak.on': 'DeepSeek peak hours: 2x pricing, ends {time}',
   'usage.peak.off': 'DeepSeek off-peak: half of peak pricing, peak returns {time}',
+  'usage.peak.tag.on': 'Peak',
+  'usage.peak.tag.off': 'Off-peak',
+  'usage.peak.ends': 'ends {time}',
+  'usage.peak.starts': 'peak at {time}',
   'usage.calls': '{n} calls',
   'usage.tokens.total': 'Total tokens',
   'usage.tokens.input': 'Input',
@@ -122,13 +132,15 @@ export const en: Record<UsageKey, string> = {
   'usage.config.title': 'Settings',
   'usage.config.enabled': 'Enable plugin',
   'usage.config.pollIntervalSec': 'Poll interval (seconds)',
+  'usage.config.spendCurrency': 'Spend display currency',
+  'usage.config.cnyPerUsd': 'Exchange rate (CNY per USD)',
   'usage.config.saveFailed': 'Save failed: the deployment did not accept the setting.',
   'usage.bank.title': 'Whale-yuan voucher',
-  'usage.bank.hint': 'Every 1,000,000 tokens spent on the DeepSeek official API or on MiMo mint one whale yuan; save or share the note.',
-  'usage.bank.noUsage': 'No DeepSeek official or MiMo usage yet (counting starts when the plugin is enabled)',
+  'usage.bank.hint': 'Every 1,000,000 tokens spent across all models mint one whale yuan; save or share the note.',
+  'usage.bank.noUsage': 'No usage data yet',
   '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.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.windowAll': 'All retained days',
   'usage.bank.save': 'Save image',