dsh-usage-badge 0.1.0 → 0.1.2

package/README.md

@@ -32,7 +32,9 @@ dsh plugin --profile web remove dsh-usage-badge
 
 弹窗有两个页签：
 
-- **用量** —— 四个时间区间、按 provider 筛选、金额/请求数/Token/缓存命中率四项合计，以及一张四序列折线图（金额、token 总量、请求数、缓存命中率）。鼠标移到图上显示该点的四项数值和参考线。
+- **用量** —— 四个时间区间（`24 小时` / `近 7 日` / `近 30 日` / `近 12 个月`）、按 provider 筛选、金额/请求数/Token/缓存命中率四项合计，以及一张四序列折线图（金额、token 总量、请求数、缓存命中率）。鼠标移到图上显示该点的四项数值和参考线。
+
+  区间按**自然日 / 自然月**切分：`近 7 日` 就是最近 7 个连续自然日，没有用量的那天保留自己的空槽位，不会把窗口拉长成 8 天。
 - **单价配置** —— 官方定价、法定节假日日历、当前生效单价。
 
 ## 单价：只有一个来源

package/lib/client.js

@@ -173,6 +173,46 @@ window.__ModuleLoader__.load({
       return out
     }
 
+    const pad2 = (value) => String(value).padStart(2, '0')
+
+    /** The local `YYYY-MM-DD` key of a Date. */
+    const dayKeyOf = (date) => `${date.getFullYear()}-${pad2(date.getMonth() + 1)}-${pad2(date.getDate())}`
+
+    /**
+     * The last `count` calendar days ending at `endKey`, oldest first.
+     *
+     * Enumerated from the calendar, not from the days that happen to have usage: the
+     * host only reports days with requests, so taking "the last 7 of those" stretches
+     * the window to whatever 7 days last had data and hides the gaps instead of
+     * showing them. A quiet Saturday is still a day.
+     */
+    function lastDays(endKey, count) {
+      const [year, month, day] = endKey.split('-').map(Number)
+      const cursor = new Date(year, month - 1, day)
+      const out = []
+      for (let index = 0; index < count; index++) {
+        out.unshift(dayKeyOf(cursor))
+        cursor.setDate(cursor.getDate() - 1)
+      }
+      return out
+    }
+
+    /** The last `count` calendar months ending at `endKey`'s month, oldest first. */
+    function lastMonths(endKey, count) {
+      const [year, month] = endKey.split('-').map(Number)
+      const out = []
+      for (let index = count - 1; index >= 0; index--) {
+        const cursor = new Date(year, month - 1 - index, 1)
+        out.push(`${cursor.getFullYear()}-${pad2(cursor.getMonth() + 1)}`)
+      }
+      return out
+    }
+
+    /** The day a snapshot is anchored on: the host's own "today". */
+    function anchorDate(snapshot) {
+      return snapshot.badge?.date ?? snapshot.today?.date ?? snapshot.days?.[0]?.date ?? ''
+    }
+
     /**
      * Build the chart points and totals for one range under one provider filter.
      *
@@ -207,30 +247,35 @@ window.__ModuleLoader__.load({
       }
 
       if (range === '12m') {
-        const months = new Map()
+        const byMonth = new Map()
         for (const day of snapshot.days) {
           const key = day.date.slice(0, 7)
-          if (!months.has(key)) months.set(key, [])
-          months.get(key).push(entryTotals(day, provider))
+          if (!byMonth.has(key)) byMonth.set(key, [])
+          byMonth.get(key).push(entryTotals(day, provider))
         }
-        const keys = [...months.keys()].sort().slice(-12)
+        // Twelve calendar months, so a month with no usage keeps its empty slot
+        // instead of quietly pushing an older month into the window.
         return {
-          points: keys.map((key) => point(key.slice(2), key, sumTotals(months.get(key)))),
+          points: lastMonths(anchorDate(snapshot), 12).map((key) =>
+            point(key.slice(2), key, sumTotals(byMonth.get(key) ?? [])),
+          ),
           marks: false,
         }
       }
 
       const count = range === '7d' ? 7 : 30
-      const slice = snapshot.days.slice(0, count).reverse()
+      const byDate = new Map(snapshot.days.map((day) => [day.date, day]))
       return {
-        points: slice.map((day) =>
-          point(
-            day.date.slice(5),
-            `${day.date}${day.dayName ? `  ${day.dayName}` : ''}`,
+        points: lastDays(anchorDate(snapshot), count).map((date) => {
+          const day = byDate.get(date)
+          if (!day) return point(date.slice(5), `${date}（无用量）`, EMPTY_TOTALS)
+          return point(
+            date.slice(5),
+            `${date}${day.dayName ? `  ${day.dayName}` : ''}`,
             entryTotals(day, provider),
             day.dayClass,
-          ),
-        ),
+          )
+        }),
         marks: true,
       }
     }
@@ -469,8 +514,8 @@ window.__ModuleLoader__.load({
     }
 
     /** The 用量 panel: ranges, provider filter, totals and the chart. */
-    function UsagePanel({ snapshot }) {
-      const [range, setRange] = React.useState('24h')
+    function UsagePanel({ snapshot, initialRange = '24h' }) {
+      const [range, setRange] = React.useState(initialRange)
       const [provider, setProvider] = React.useState('')
       const providers = snapshot.today.providers || []
       const series = buildSeries(snapshot, range, provider)
@@ -544,6 +589,17 @@ window.__ModuleLoader__.load({
       )
     }
 
+    /**
+     * The last successful 单价配置 payloads, kept for the life of the page.
+     *
+     * Switching tabs unmounts this panel, so without a cache every return to the tab
+     * starts from the loading placeholder and swaps its contents in a moment later —
+     * a visible flicker. Holding the last answer lets the panel render it straight
+     * away and refresh behind it.
+     */
+    let cachedConfig = null
+    let cachedOfficial = null
+
     /**
      * The 单价配置 panel.
      *
@@ -554,32 +610,38 @@ window.__ModuleLoader__.load({
      */
     function ConfigPanel({ snapshot, reload, initialConfig = null, initialOfficial = null }) {
       const [source, setSource] = React.useState('zh-cn')
-      const [official, setOfficial] = React.useState(initialOfficial)
-      const [officialState, setOfficialState] = React.useState(initialOfficial ? 'ready' : 'loading')
-      const [applyState, setApplyState] = React.useState('idle')
-      const [config, setConfig] = React.useState(initialConfig)
-
-      const loadOfficial = React.useCallback(
-        async (which) => {
-          setOfficialState('loading')
-          try {
-            const response = await fetch(`/usage-badge/official-pricing?refresh=1&source=${which}`, { cache: 'no-store' })
-            const body = await response.json()
-            if (!response.ok) throw new Error(body?.error ?? `HTTP ${response.status}`)
-            setOfficial(body)
-            setOfficialState('ready')
-          } catch (error) {
-            setOfficial(null)
-            setOfficialState(`failed: ${error?.message ?? error}`)
-          }
-        },
-        [],
+      const [official, setOfficial] = React.useState(initialOfficial ?? cachedOfficial)
+      const [officialState, setOfficialState] = React.useState(
+        (initialOfficial ?? cachedOfficial) ? 'ready' : 'loading',
       )
+      const [applyState, setApplyState] = React.useState('idle')
+      const [config, setConfig] = React.useState(initialConfig ?? cachedConfig)
+
+      const loadOfficial = React.useCallback(async (which) => {
+        // Only show the placeholder when there is nothing to show: flipping to
+        // 'loading' with a table already on screen blanks it for a frame.
+        if (!cachedOfficial) setOfficialState('loading')
+        try {
+          const response = await fetch(`/usage-badge/official-pricing?refresh=1&source=${which}`, { cache: 'no-store' })
+          const body = await response.json()
+          if (!response.ok) throw new Error(body?.error ?? `HTTP ${response.status}`)
+          cachedOfficial = body
+          setOfficial(body)
+          setOfficialState('ready')
+        } catch (error) {
+          // A failed refresh keeps the last good list on screen; the warning says why.
+          if (!cachedOfficial) setOfficial(null)
+          setOfficialState(`failed: ${error?.message ?? error}`)
+        }
+      }, [])
 
       const loadConfig = React.useCallback(async () => {
         try {
           const response = await fetch('/usage-badge/config', { cache: 'no-store' })
-          if (response.ok) setConfig(await response.json())
+          if (response.ok) {
+            cachedConfig = await response.json()
+            setConfig(cachedConfig)
+          }
         } catch {
           // The effective config is informative here; a failure leaves the rest of
           // the panel usable.
@@ -850,7 +912,7 @@ window.__ModuleLoader__.load({
       )
     }
 
-    function UsageDialog({ snapshot, onClose, reload, initialTab = 'usage', initialConfig = null, initialOfficial = null }) {
+    function UsageDialog({ snapshot, onClose, reload, initialTab = 'usage', initialConfig = null, initialOfficial = null, initialRange = '24h' }) {
       const [tab, setTab] = React.useState(initialTab)
       const chip = bandChip(snapshot)
 
@@ -893,10 +955,10 @@ window.__ModuleLoader__.load({
               ),
             ),
           ),
-          // Only the active panel is mounted, so returning to 单价配置 re-fetches
-          // the published list — which is the behavior that was asked for.
+          // Only the active panel is mounted, so returning to 单价配置 re-fetches the
+          // published list — from the cache it renders at once, then refreshes.
           tab === 'usage'
-            ? h(UsagePanel, { snapshot })
+            ? h(UsagePanel, { snapshot, initialRange })
             : h(ConfigPanel, { snapshot, reload, initialConfig, initialOfficial }),
         ),
       )
@@ -913,7 +975,8 @@ window.__ModuleLoader__.load({
      * seat: the full row while expanded, a 36px square on the collapsed rail.
      *
      * @param {{wide?: boolean, initialSnapshot?: object|null, initialOpen?: boolean,
-     *   initialTab?: string, initialConfig?: object|null, initialOfficial?: object|null}} props
+     *   initialTab?: string, initialConfig?: object|null, initialOfficial?: object|null,
+     *   initialRange?: string}} props
      */
     function UsageBadge({
       wide = true,
@@ -922,6 +985,7 @@ window.__ModuleLoader__.load({
       initialTab = 'usage',
       initialConfig = null,
       initialOfficial = null,
+      initialRange = '24h',
     } = {}) {
       const [snapshot, setSnapshot] = React.useState(initialSnapshot)
       const [failed, setFailed] = React.useState(false)
@@ -972,7 +1036,7 @@ window.__ModuleLoader__.load({
           h('span', { className: 'dub-pill-amount' }, text),
         ),
         open && snapshot
-          ? h(UsageDialog, { snapshot, onClose: () => setOpen(false), reload: load, initialTab, initialConfig, initialOfficial })
+          ? h(UsageDialog, { snapshot, onClose: () => setOpen(false), reload: load, initialTab, initialConfig, initialOfficial, initialRange })
           : null,
       )
     }

package/lib/official-pricing.js

@@ -91,16 +91,28 @@ function parseAmount(text) {
 function toLocalRanges(ranges, sourceOffsetMinutes, localOffsetMinutes) {
   const delta = localOffsetMinutes - sourceOffsetMinutes
   const round = (value) => Math.round(value * 100) / 100
+  const wrap = (minutes) => ((minutes % 1440) + 1440) % 1440
   const out = []
   for (const [start, end] of ranges) {
-    const startMinutes = start * 60 + delta
-    const endMinutes = end * 60 + delta
+    let startMinutes = start * 60 + delta
+    let endMinutes = end * 60 + delta
+
+    // A window pushed entirely out of the day wraps as a whole. Only a window that
+    // straddles midnight splits in two — splitting an out-of-range one instead
+    // produced nonsense ranges (01:00–04:00 UTC in a UTC-5 host came out as
+    // [0,23], i.e. almost the entire day at peak rates).
+    if (endMinutes <= 0) {
+      startMinutes += 1440
+      endMinutes += 1440
+    } else if (startMinutes >= 1440) {
+      startMinutes -= 1440
+      endMinutes -= 1440
+    }
+
     if (startMinutes >= 0 && endMinutes <= 1440) {
       out.push([round(startMinutes / 60), round(endMinutes / 60)])
       continue
     }
-    // The shifted window crosses midnight, so it becomes two ranges.
-    const wrap = (minutes) => ((minutes % 1440) + 1440) % 1440
     out.push([round(wrap(startMinutes) / 60), 24])
     out.push([0, round(wrap(endMinutes) / 60)])
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-usage-badge",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "DeepSeek Harness 的用量徽标插件：侧边栏底部一行显示当天的 token 总量与估算费用，点开可看 24 小时 / 近 7 日 / 近 30 日 / 近 12 个月用量，按 provider 筛选，并按 DeepSeek 官方定价与中国法定节假日计价。A usage badge plugin for DeepSeek Harness: today's tokens and estimated spend in the sidebar, with 24h / 7d / 30d / 12-month charts, official DeepSeek pricing and Chinese public holidays.",
   "type": "module",
   "main": "lib/index.js",
@@ -39,7 +39,7 @@
     "docs"
   ],
   "scripts": {
-    "test": "node test/manifest.verify.mjs && node test/pricing.verify.mjs && node test/holidays.verify.mjs && node test/official-pricing.verify.mjs && node test/client.render.mjs",
+    "test": "node test/all.mjs",
     "test:smoke": "node test/smoke.mjs",
     "prepublishOnly": "npm test"
   },