@linxin666/dsh-usage 0.3.7 → 0.3.9

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

@@ -17,6 +17,9 @@ export declare const zh: {
     'usage.error': string;
     'usage.current': string;
     'usage.today': string;
+    'usage.today.cost': string;
+    'usage.peak.on': string;
+    'usage.peak.off': string;
     'usage.calls': string;
     'usage.tokens.total': string;
     'usage.tokens.input': string;
@@ -31,6 +34,7 @@ export declare const zh: {
     'usage.oauth': string;
     'usage.plan.reset': string;
     'usage.plan.noPlan': string;
+    'usage.plan.noneConfigured': string;
     'usage.plan.windows.5h': string;
     'usage.plan.windows.week': string;
     'usage.plan.windows.month': string;

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

@@ -15,8 +15,10 @@ export interface ProbeSpec {
 }
 /** Inputs an adapter may use to build a probe. */
 export interface AdapterProbeContext {
-    /** Resolved credential value (the raw key; env refs are resolved upstream). */
+    /** Resolved credential value: a raw API key, or an OAuth access token for the oauth-aware adapters. */
     apiKey: string;
+    /** Provider account id riding a dedicated header, when the credential carries one (Codex). */
+    accountId?: string;
 }
 /** A parsed balance fact. */
 export interface BalanceParse {
@@ -51,6 +53,13 @@ export interface ProviderAdapter {
 export declare const PROVIDER_ADAPTERS: readonly ProviderAdapter[];
 /** Find the adapter serving a provider route key, if any. */
 export declare function adapterFor(provider: string): ProviderAdapter | undefined;
+/**
+ * Whether a provider route belongs to the official DeepSeek family: the only
+ * family with a spend price book and a settings-section-owned env credential
+ * (llm-deepseek) rather than a pi-ai profile. Drives the env fallback in
+ * credential resolution and the fold-time cost stamping.
+ */
+export declare function isDeepSeekProviderRoute(provider: string): boolean;
 /**
  * Best-effort human message from a provider error body, for the per-provider
  * error line. Never throws; truncated to one short sentence.

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

@@ -4,18 +4,31 @@
  * Host-side state lives only in the document; the service owns persistence.
  * @module @linxin666/dsh-usage/core/ledger
  */
-import { type UsageLedgerDocument, type UsageTokenTotals } from './types.ts';
+import { type UsageLedgerDocument, type UsageProviderSummary, type UsageTokenTotals } from './types.ts';
 /** Local-date key (`YYYY-MM-DD`) for an epoch ms timestamp. */
 export declare function localDateKey(ms: number): string;
 /** An empty ledger document. */
 export declare function createLedgerDocument(): UsageLedgerDocument;
 /**
  * Fold one usage report into the ledger in place. `provider` is the route key
- * and `model` the provider-owned model id the step ran under.
+ * and `model` the provider-owned model id the step ran under. Reports keyed
+ * by prototype-plumbing names are dropped.
  */
 export declare function foldUsage(doc: UsageLedgerDocument, atMs: number, provider: string, model: string, usage: Readonly<UsageTokenTotals>): void;
 /** Total tokens of a bucket (billed input + output; reasoning is inside output). */
 export declare function totalTokens(totals: Readonly<UsageTokenTotals>): number;
+/** How many model rows one summarized provider keeps. */
+export declare const SUMMARY_MODEL_CAP = 12;
+/**
+ * Aggregate whole per-day maps (each `provider -> model -> totals`) into the
+ * per-provider/per-model summary the overview serves for one day or a range:
+ * disjoint bucket sums per provider, per-model rows heaviest first, and the
+ * grand total. Pure: reads its inputs, allocates fresh buckets.
+ */
+export declare function summarizeDays(days: ReadonlyArray<Record<string, Record<string, UsageTokenTotals>>>): {
+    totals: UsageTokenTotals;
+    providers: UsageProviderSummary[];
+};
 /** All local-date keys in the ledger, ascending. */
 export declare function ledgerDayKeys(doc: Readonly<UsageLedgerDocument>): string[];
 /**

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

@@ -0,0 +1,30 @@
+/**
+ * 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).
+ *
+ * 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.
+ * @module @linxin666/dsh-usage/core/pricing
+ */
+import type { UsageTokenTotals } from './types.ts';
+/**
+ * The DeepSeek billing period at `ms`, plus when it next flips. The clock is
+ * Beijing time regardless of the host timezone (UTC+8 has no DST, so a fixed
+ * shift is exact). `boundaryMs` is the instant the current period ends — the
+ * window's close while peaking, the next window's open otherwise.
+ */
+export declare function deepseekPeriodAt(ms: number): {
+    peak: boolean;
+    boundaryMs: number;
+};
+/**
+ * Estimate one call's DeepSeek spend in CNY from its token totals, priced in
+ * the billing period at `atMs`. Uncatalogued model ids take the flash-class
+ * row; ids from other providers never reach this function (the service gates
+ * by route family). Rounded to micro-CNY so the ledger stays readable.
+ */
+export declare function deepseekModelSpend(model: string, totals: Readonly<UsageTokenTotals>, atMs: number): number;

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

@@ -19,6 +19,13 @@ export interface UsageTokenTotals {
     reasoningTokens: number;
     /** Provider calls that reported usage. */
     calls: number;
+    /**
+     * Spend estimate stamped at fold time, in the priced provider's billing
+     * currency (currently DeepSeek official only, CNY); every other provider
+     * stays 0 = unpriced, so the sum is never a mixed-currency total. Persisted
+     * buckets recorded before a price-book change keep the old pricing.
+     */
+    cost: number;
 }
 /** A zeroed totals bucket. */
 export declare function emptyTotals(): UsageTokenTotals;
@@ -81,8 +88,12 @@ export interface ProviderSnapshotView {
     /** Display name from the LLM runtime, else the adapter's, else the route key. */
     displayName: string;
     credential: CredentialKind;
-    /** Whether a balance/plan adapter exists for this route. */
+    /** Whether any balance/plan adapter exists for this route. */
     supported: boolean;
+    /** A balance adapter exists for this route (the Usage tab's balance card). */
+    balanceSupported?: boolean;
+    /** A coding-plan adapter exists for this route — the Plans tab lists these only. */
+    planSupported?: boolean;
     balance?: BalanceView;
     plan?: PlanView;
     /** Last probe failure, cleared on the next success. */
@@ -108,5 +119,27 @@ export interface UsageOverviewView {
         };
         /** Last N local days ascending, including today. */
         days: UsageDaySummary[];
+        /**
+         * 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[];
+        };
     };
 }
+/**
+ * Host-side snapshot state: the wire view plus one error slot per probed
+ * fact. A probe half only clears its own slot, so a plan success can no
+ * longer mask a failing balance probe (and vice versa); the overview
+ * collapses them into the single wire `error` line, balance first.
+ */
+export interface ProviderSnapshotState extends ProviderSnapshotView {
+    /** Last balance-probe failure; cleared on the next balance success. */
+    balanceError?: string;
+    /** Last plan-probe failure; cleared on the next plan success. */
+    planError?: string;
+}

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

@@ -7,7 +7,7 @@
  * @module @linxin666/dsh-usage/host/usage-service
  */
 import type { Context } from '@deepseek-ai/cordis';
-import type { UsageOverviewView } from '../core/types.ts';
+import type { ProviderSnapshotView, UsageOverviewView } from '../core/types.ts';
 /** Source tag the plugin stamps onto pet announcements. */
 export declare const USAGE_ANNOUNCE_SOURCE = "dsh-usage";
 /** Poll-loop and announce options; re-applied live on settings change. */
@@ -20,6 +20,24 @@ export interface UsageServiceOptions {
 export declare function formatMoney(currency: string, totalBalance: string): string;
 /** Map a used percent to the announcement tone. */
 export declare function planTone(percent: number): 'ok' | 'warn' | 'low';
+/** Announcement context the service computes per poll: today's family spend and the DeepSeek period. */
+export interface AnnounceContext {
+    /** Today's ledger spend for the announced provider's family (CNY; 0 = unpriced). */
+    todayCost?: number;
+    /** Whether DeepSeek peak pricing is in effect right now. */
+    peak?: boolean;
+}
+/**
+ * Build the raw pet announce payload for one provider snapshot, or
+ * undefined when nothing worth announcing exists. Pure: every payload this
+ * returns satisfies the pet's `parseAnnouncement` contract — plan
+ * announcements require a numeric percent, so percent-less windows never
+ * announce (the pet validator would silently drop them). A priced family
+ * (DeepSeek) with spend today announces a cost bubble first; balance-only
+ * families announce the balance; plan families announce their tightest
+ * percent window.
+ */
+export declare function buildAnnouncement(snapshot: Pick<ProviderSnapshotView, 'displayName' | 'balance' | 'plan'>, context?: AnnounceContext): Record<string, unknown> | undefined;
 export declare class UsageService {
     private readonly ctx;
     private options;
@@ -36,38 +54,74 @@ export declare class UsageService {
     private pollTimer;
     private flushTimer;
     private pollInFlight;
+    /** The running poll cycle; manual refresh joins it instead of no-oping. */
+    private pollPromise;
+    /** Serialized ledger flushes: overlapping debounce/stop flushes queue, never interleave. */
+    private flushChain;
+    /** True once loadPersisted finished; nothing may overwrite the files before that. */
+    private loaded;
     private disposed;
     private lastSignature;
+    /** Last prune guard: once per local day, and whenever retention shrinks. */
+    private lastPrune;
     constructor(ctx: Context, options: UsageServiceOptions);
     /** Start the listeners, load persisted state, and arm the first poll. */
     start(): void;
-    /** Stop timers and flush pending ledger writes. */
-    stop(): void;
-    /** Re-apply options live (settings change); the poll cycle picks them up. */
+    /**
+     * Stop timers and flush pending ledger writes. The returned promise
+     * resolves after the final flush lands, so a successor instance (quick
+     * disable → enable) can serialize its first load behind it.
+     */
+    stop(): Promise<void>;
+    /** Re-apply options live (settings change); retention shrink prunes now. */
     applyOptions(options: UsageServiceOptions): void;
-    /** Force one poll now (manual refresh route). */
+    /** Force one poll now (manual refresh route); joins an in-flight cycle. */
     refresh(): Promise<void>;
     /** Assemble the overview document the browser section renders. */
     overview(): UsageOverviewView;
     /** One local day aggregated per provider. */
     private daySummary;
+    /** Today's ledger spend for one provider's adapter family (0 when unpriced). */
+    private familyCostToday;
     private onSessionEvent;
-    /** Normalize a provider TokenUsage into the ledger bucket (one call). */
+    /**
+     * Normalize a provider TokenUsage into the ledger bucket (one call). The
+     * DeepSeek official family is priced at the fold instant (its billing
+     * period is time-of-day); other families stay unpriced (cost 0).
+     */
     private totalsFrom;
     private loadPersisted;
     private scheduleFlush;
+    /**
+     * Queue one ledger flush behind the previous one. Debounce and stop-time
+     * flushes serialize here, so two `writeJsonAtomic` calls can never run
+     * concurrently on the same path.
+     */
     private flushLedger;
+    private writeLedgerOnce;
+    /**
+     * Prune days past retention. Runs at most once per local day and whenever
+     * `retainDays` shrinks — not only at startup, so long-lived processes and
+     * live settings changes both honor retention.
+     */
+    private pruneIfNeeded;
     private persistSnapshots;
     private rearmPoll;
-    /** One poll cycle: enumerate routes, resolve credentials, probe, announce. */
+    /**
+     * One poll cycle: enumerate routes, resolve credentials, probe, announce.
+     * A call while a cycle is already running joins that cycle instead of
+     * returning immediately, so a manual refresh always waits for real probes.
+     */
     pollNow(): Promise<void>;
     private listProviderRoutes;
     private probeRoute;
     /**
      * Resolve the credential backing one route: pi-ai credential records
      * first, then the profile's apiKeyEnv reference, then the DeepSeek
-     * official adapter's env reference. OAuth grants resolve to a kind with
-     * no key (this plugin does not spend third-party OAuth budgets).
+     * official adapter's env reference. OAuth grants hand their stored access
+     * token to the oauth-aware adapters (Codex plan quota); a stale token
+     * fails its probe with a 401 and refreshes the next time the harness
+     * itself runs that provider.
      */
     private resolveCredential;
     /** The llm-pi-ai profile object for one provider route, when configured. */
@@ -75,8 +129,15 @@ export declare class UsageService {
     /** The DeepSeek official adapter's credential reference name. */
     private deepseekApiKeyEnv;
     /**
-     * Announce the current provider's balance or plan usage to the pet. In
-     * `change` mode only meaningful value changes re-announce; `off` skips.
+     * Announce the current provider's spend, balance, or plan usage to the pet.
+     * In `change` mode only meaningful value changes re-announce; `off` skips.
+     * The TTL rides the poll interval (bubble_mode `always` re-announces every
+     * cycle, so a TTL of two cycles + margin keeps the bubble continuous
+     * across polls; the pet contract caps the ceiling). A route id the
+     * catalogs spell differently than the snapshot keys falls back to its
+     * adapter family's snapshot. Fully guarded: a malformed snapshot or a
+     * failing pet service must never break the poll loop, and a disposed
+     * service never announces.
      */
     private announceCurrent;
 }

package/lib/types/index.d.ts

@@ -1,9 +1,10 @@
 import type { Context } from '@deepseek-ai/cordis';
+import type { SettingsNamespace } from '@deepseek-ai/dsh-settings';
 import z from 'schemastery';
 import { type UsageServiceOptions } from './host/usage-service.ts';
 export declare const name = "dsh-usage";
 export declare const inject: string[];
-export declare const USAGE_SETTINGS_NAMESPACE: import("@deepseek-ai/dsh-settings").SettingsNamespace;
+export declare const USAGE_SETTINGS_NAMESPACE: SettingsNamespace;
 export interface Config {
     enabled?: boolean;
     /** Provider probe cycle in seconds; 30-3600. */

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.7",
+  "version": "0.3.9",
   "type": "module",
   "engines": {
     "node": "^22.19.0 || >=24.0.0"
@@ -54,19 +54,19 @@
     "react": "^18.2.0"
   },
   "devDependencies": {
-    "@deepseek-ai/cordis": "^4.0.1",
-    "@deepseek-ai/dsh-credentials": "^0.1.2-alpha.1",
-    "@deepseek-ai/dsh-client-connection": "^0.1.2-alpha.1",
-    "@deepseek-ai/dsh-client-locale": "^0.1.2-alpha.1",
-    "@deepseek-ai/dsh-client-store": "^0.1.2-alpha.1",
-    "@deepseek-ai/dsh-client-ui-renderer": "^0.1.2-alpha.1",
-    "@deepseek-ai/dsh-client-ui-settings": "^0.1.2-alpha.1",
-    "@deepseek-ai/dsh-client-ui-slots": "^0.1.2-alpha.1",
-    "@deepseek-ai/dsh-host-webserver": "^0.1.2-alpha.1",
-    "@deepseek-ai/dsh-llm": "^0.1.2-alpha.1",
-    "@deepseek-ai/dsh-session": "^0.1.2-alpha.1",
-    "@deepseek-ai/dsh-settings": "^0.1.2-alpha.1",
-    "@linxin666/dsh-pet": "0.3.7",
+    "@deepseek-ai/cordis": "^4.0.2",
+    "@deepseek-ai/dsh-credentials": "^0.1.2-alpha.2",
+    "@deepseek-ai/dsh-client-connection": "^0.1.2-alpha.2",
+    "@deepseek-ai/dsh-client-locale": "^0.1.2-alpha.2",
+    "@deepseek-ai/dsh-client-store": "^0.1.2-alpha.2",
+    "@deepseek-ai/dsh-client-ui-renderer": "^0.1.2-alpha.2",
+    "@deepseek-ai/dsh-client-ui-settings": "^0.1.2-alpha.2",
+    "@deepseek-ai/dsh-client-ui-slots": "^0.1.2-alpha.2",
+    "@deepseek-ai/dsh-host-webserver": "^0.1.2-alpha.2",
+    "@deepseek-ai/dsh-llm": "^0.1.2-alpha.2",
+    "@deepseek-ai/dsh-session": "^0.1.2-alpha.2",
+    "@deepseek-ai/dsh-settings": "^0.1.2-alpha.2",
+    "@linxin666/dsh-pet": "0.3.9",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.2",
     "@types/node": "^22.20.0",
@@ -87,6 +87,6 @@
     "build": "tsc -p tsconfig.build.json && tsdown",
     "watch": "tsdown --watch",
     "test": "vitest run",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit && tsc -p tsconfig.test.json --pretty false"
   }
 }

package/src/client/UsageSectionCard.tsx

@@ -7,12 +7,14 @@
  * @module @linxin666/dsh-usage/client/UsageSectionCard
  */
 
-import { useEffect, useMemo, useState, useSyncExternalStore, type ReactNode } from 'react'
+import { useEffect, 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 type { ProviderSnapshotView, UsageTokenTotals } from '../core/types.ts'
+import { isDeepSeekProviderRoute } from '../core/adapters.ts'
+import { deepseekPeriodAt } from '../core/pricing.ts'
+import type { ProviderSnapshotView, UsageOverviewView, UsageProviderSummary, UsageTokenTotals } from '../core/types.ts'
 
 /** The settings fields this section edits (immediate-apply semantics). */
 export interface UsageSettings {
@@ -62,6 +64,19 @@ 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
@@ -159,10 +174,6 @@ export function UsageSectionCard(props: UsageSectionProps): ReactNode {
   }, [poll])
 
   const snapshot = ui.snapshot
-  const trendMax = useMemo(() => {
-    if (snapshot === null) return 0
-    return Math.max(1, ...snapshot.usage.days.map((day) => day.totals.inputTokens + day.totals.outputTokens + day.totals.cacheReadTokens + day.totals.cacheWriteTokens))
-  }, [snapshot])
 
   const onRefresh = (): void => {
     setRefreshing(true)
@@ -183,7 +194,15 @@ export function UsageSectionCard(props: UsageSectionProps): ReactNode {
 
   const current = snapshot.current
   const currentProvider = snapshot.providers.find((provider) => provider.provider === current.provider)
-  const planProviders = snapshot.providers.filter((provider) => provider.plan !== undefined || (provider.supported && provider.credential !== 'none' && provider.credential !== 'oauth'))
+  // Peak-period line: only when the official DeepSeek family is in play this
+  // session (the current route, or spend recorded under one today).
+  const deepseekPeriod = deepseekPeriodAt(Date.now())
+  const deepseekVisible = (current.provider !== undefined && isDeepSeekProviderRoute(current.provider))
+    || snapshot.usage.today.providers.some((row) => isDeepSeekProviderRoute(row.provider))
+  // Plans tab: only routes with a real coding-plan/subscription adapter
+  // (planSupported; an older host without the flag falls back to "has a plan
+  // fact"). Balance-only providers (DeepSeek, ZenMux, ...) never appear here.
+  const planProviders = snapshot.providers.filter((provider) => provider.planSupported === true || (provider.planSupported === undefined && provider.plan !== undefined))
 
   return (
     <div className={styles.section} data-dsh-plugin="usage">
@@ -214,9 +233,20 @@ export function UsageSectionCard(props: UsageSectionProps): ReactNode {
         <>
           <div className={styles.card} data-dsh-part="today-card">
             <span className={styles.cardTitle}>{t('usage.today')}</span>
+            {deepseekVisible && (
+              <span className={styles.muted} data-dsh-part="peak-status">
+                {t(deepseekPeriod.peak ? 'usage.peak.on' : 'usage.peak.off', { time: formatClock(deepseekPeriod.boundaryMs) })}
+              </span>
+            )}
             {snapshot.usage.today.totals.calls === 0
               ? <span className={styles.muted}>{t('usage.noData')}</span>
               : <TotalsRow totals={snapshot.usage.today.totals} />}
+            {snapshot.usage.today.totals.cost > 0 && (
+              <div className={styles.providerRow} data-dsh-part="today-cost">
+                <span className={styles.providerName}>{t('usage.today.cost')}</span>
+                <span className={styles.providerTokens}>{formatCost(snapshot.usage.today.totals.cost)}</span>
+              </div>
+            )}
             {snapshot.usage.today.providers.length > 0 && (
               <div data-dsh-part="provider-list">
                 {snapshot.usage.today.providers.map((row) => (
@@ -225,7 +255,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 })}</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>
                   </div>
                 ))}
               </div>
@@ -234,11 +264,13 @@ export function UsageSectionCard(props: UsageSectionProps): ReactNode {
 
           <div className={styles.card} data-dsh-part="balance-card">
             <span className={styles.cardTitle}>{t('usage.balance')}</span>
-            {snapshot.providers.filter((provider) => provider.supported).length === 0
-              ? <span className={styles.muted}>{t('usage.balance.unsupported')}</span>
-              : snapshot.providers.filter((provider) => provider.supported).map((provider) => (
+            {(() => {
+              const rows = snapshot.providers.filter((provider) => provider.balanceSupported === true || (provider.balanceSupported === undefined && provider.supported))
+              if (rows.length === 0) return <span className={styles.muted}>{t('usage.balance.unsupported')}</span>
+              return rows.map((provider) => (
                 <ProviderRow key={provider.provider} provider={provider} current={current.provider} />
-              ))}
+              ))
+            })()}
             {snapshot.providers.some((provider) => provider.error !== undefined) && (
               <span className={styles.errorLine}>
                 {snapshot.providers.filter((provider) => provider.error !== undefined).map((provider) => `${provider.displayName}: ${t('usage.provider.error', { error: provider.error ?? '' })}`).join('；')}
@@ -246,28 +278,7 @@ export function UsageSectionCard(props: UsageSectionProps): ReactNode {
             )}
           </div>
 
-          {snapshot.usage.days.length > 0 && (
-            <div className={styles.card} data-dsh-part="trend-card">
-              <span className={styles.cardTitle}>{t('usage.trend')}</span>
-              <div className={styles.trend}>
-                {snapshot.usage.days.map((day, index) => {
-                  const total = day.totals.inputTokens + day.totals.outputTokens + day.totals.cacheReadTokens + day.totals.cacheWriteTokens
-                  return (
-                    <div
-                      key={day.date}
-                      className={index === snapshot.usage.days.length - 1 ? `${styles.trendBar} ${styles.trendBarToday}` : styles.trendBar}
-                      style={{ height: `${Math.max(3, Math.round((total / trendMax) * 100))}%` }}
-                      title={`${day.date}: ${formatTokens(total)}`}
-                    />
-                  )
-                })}
-              </div>
-              <div className={styles.trendAxis}>
-                <span>{snapshot.usage.days[0]?.date.slice(5)}</span>
-                <span>{snapshot.usage.days[snapshot.usage.days.length - 1]?.date.slice(5)}</span>
-              </div>
-            </div>
-          )}
+          <RangeCard range={snapshot.usage.range} providers={snapshot.providers} currentProvider={current.provider} />
 
           <SettingsRow settings={settings} snapshot={settingsSnapshot.status === 'ready' ? settingsSnapshot : undefined} value={settingsValue} />
         </>
@@ -275,42 +286,114 @@ export function UsageSectionCard(props: UsageSectionProps): ReactNode {
 
       {tab === 'plans' && (
         planProviders.length === 0
-          ? <div className={styles.card}><span className={styles.muted}>{t('usage.plan.noPlan')}</span></div>
-          : planProviders.map((provider) => <PlanCard key={provider.provider} provider={provider} />)
+          ? <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} />)
       )}
     </div>
   )
 }
 
-function PlanCard(props: { provider: ProviderSnapshotView }): ReactNode {
-  const { provider } = props
+/** How many model sub-bars render under one provider bar. */
+const CHART_MODEL_CAP = 3
+
+/**
+ * The 近 30 天 card: horizontal bars per provider over the trend window,
+ * each with its heaviest models as nested sub-bars. Window totals come from
+ * the host's aggregated `usage.range` (an older host without it renders no
+ * card instead of a wrong one).
+ */
+function RangeCard(props: { range?: UsageOverviewView['usage']['range']; providers: ProviderSnapshotView[]; currentProvider?: string }): ReactNode {
+  const { range, providers, currentProvider } = props
+  if (range === undefined) return null
+  const grandTotal = range.totals.inputTokens + range.totals.outputTokens + range.totals.cacheReadTokens + range.totals.cacheWriteTokens
+  const maxProvider = Math.max(1, ...range.providers.map((row) => totalOf(row.totals)))
+  const nameOf = (id: string): string => providers.find((provider) => provider.provider === id)?.displayName ?? id
+  return (
+    <div className={styles.card} data-dsh-part="trend-card">
+      <span className={styles.cardTitle}>{t('usage.trend')}</span>
+      {range.providers.length === 0 || grandTotal === 0
+        ? <span className={styles.muted}>{t('usage.noData')}</span>
+        : <div className={styles.chart} data-dsh-part="usage-chart">
+            {range.providers.map((row) => (
+              <ChartProviderRow key={row.provider} row={row} name={nameOf(row.provider)} max={maxProvider} current={currentProvider === row.provider} />
+            ))}
+            <span className={styles.trendAxis}>
+              <span>{range.from.slice(5)}</span>
+              <span>{range.to.slice(5)}</span>
+            </span>
+          </div>}
+    </div>
+  )
+}
+
+function ChartProviderRow(props: { row: UsageProviderSummary; name: string; max: number; current: boolean }): ReactNode {
+  const { row, name, max, current } = props
+  const total = totalOf(row.totals)
+  const maxModel = Math.max(1, ...row.models.slice(0, CHART_MODEL_CAP).map((model) => totalOf(model.totals)))
+  return (
+    <div className={styles.chartProvider}>
+      <span className={styles.chartHead}>
+        <span className={styles.providerName}>
+          {name}
+          {current && <span className={styles.currentBadge}>{t('usage.current')}</span>}
+        </span>
+        <span className={styles.chartTokens}>{formatTokens(total)} · {t('usage.calls', { n: row.totals.calls })}</span>
+      </span>
+      <span className={styles.chartBar}>
+        <span className={styles.chartFill} style={{ width: `${Math.max(2, Math.round((total / max) * 100))}%` }} />
+      </span>
+      {row.models.slice(0, CHART_MODEL_CAP).map((model) => {
+        const modelTotal = totalOf(model.totals)
+        return (
+          <span key={model.model} className={styles.chartModel} title={`${row.provider} · ${model.model}: ${formatTokens(modelTotal)}`}>
+            <span className={styles.chartModelName}>{model.model}</span>
+            <span className={styles.chartModelBar}>
+              <span className={styles.chartModelFill} style={{ width: `${Math.max(3, Math.round((modelTotal / maxModel) * 100))}%` }} />
+            </span>
+            <span className={styles.chartTokens}>{formatTokens(modelTotal)}</span>
+          </span>
+        )
+      })}
+    </div>
+  )
+}
+
+function totalOf(totals: UsageTokenTotals): number {
+  return totals.inputTokens + totals.cacheReadTokens + totals.cacheWriteTokens + totals.outputTokens
+}
+
+function PlanCard(props: { provider: ProviderSnapshotView; current?: string }): ReactNode {
+  const { provider, current } = props
   return (
     <div className={`${styles.card} ${styles.planCard}`} data-dsh-part="plan-card">
       <div className={styles.planHead}>
         <span className={styles.planName}>
           {provider.displayName}
+          {current === provider.provider && <span className={styles.currentBadge}>{t('usage.current')}</span>}
           {provider.plan?.planName !== undefined ? ` · ${provider.plan.planName}` : ''}
         </span>
       </div>
       {provider.error !== undefined && <span className={styles.errorLine}>{t('usage.provider.error', { error: provider.error })}</span>}
-      {provider.plan === undefined || provider.plan.windows.length === 0
-        ? <span className={styles.muted}>{t('usage.plan.noPlan')}</span>
-        : provider.plan.windows.map((window) => (
-          <div key={window.key} className={styles.windowRow} data-dsh-part="plan-window">
-            <span className={styles.windowLabel}>
-              <span>{window.name ?? t(`usage.plan.windows.${window.key}`)}</span>
-              <span>{window.percent !== undefined ? `${window.percent >= 10 ? Math.round(window.percent) : window.percent.toFixed(1)}%` : ''}</span>
-            </span>
-            {window.percent !== undefined && (
-              <span className={styles.bar}>
-                <span className={toneClass(window.percent)} style={{ width: `${Math.min(100, Math.max(0, window.percent))}%`, display: 'block' }} />
+      {provider.credential === 'none' && provider.plan === undefined
+        ? <span className={styles.muted}>{t('usage.balance.noCredential')}</span>
+        : provider.plan === undefined || provider.plan.windows.length === 0
+          ? <span className={styles.muted}>{t('usage.plan.noPlan')}</span>
+          : provider.plan.windows.map((window) => (
+            <div key={window.key} className={styles.windowRow} data-dsh-part="plan-window">
+              <span className={styles.windowLabel}>
+                <span>{window.name ?? t(`usage.plan.windows.${window.key}`)}</span>
+                <span>{window.percent !== undefined ? `${window.percent >= 10 ? Math.round(window.percent) : window.percent.toFixed(1)}%` : ''}</span>
               </span>
-            )}
-            {window.resetsAt !== undefined && (
-              <span className={styles.resetLine}>{t('usage.plan.reset', { date: new Date(window.resetsAt).toLocaleString() })}</span>
-            )}
-          </div>
-        ))}
+              {window.percent !== undefined && (
+                <span className={styles.bar}>
+                  <span className={toneClass(window.percent)} style={{ width: `${Math.min(100, Math.max(0, window.percent))}%`, display: 'block' }} />
+                </span>
+              )}
+              {window.resetsAt !== undefined && (
+                <span className={styles.resetLine}>{t('usage.plan.reset', { date: new Date(window.resetsAt).toLocaleString() })}</span>
+              )}
+            </div>
+          ))}
     </div>
   )
 }