dsh-simple-usage-info 0.1.0 → 0.2.0

package/README.md

@@ -4,8 +4,8 @@
 [![license](https://img.shields.io/npm/l/dsh-simple-usage-info.svg)](LICENSE)
 
 A [DeepSeek Harness](https://github.com/deepseek-ai/deepseek-harness) plugin that puts your
-**DeepSeek API balance** and the **current billing window** in the composer dock — the ambient row
-directly below the message input, after the context meter.
+**DeepSeek API balance**, the **current billing window**, and the **session estimated cost** in the
+composer dock — the ambient row directly below the message input, after the context meter.
 
 ```
 ┌──────────────────────────────────────────────────────────┐
@@ -26,6 +26,10 @@ Applies because          Chinese public holiday
 Peak hours today (Asia/Manila)   09:00–12:00, 14:00–18:00
 Next switch              peak in 6d 13h (Thu 09:00)
 ─────────────────────────────────────────────────────────────
+Estimated cost
+USD                                 $0.012
+CNY                                 ¥0.08
+─────────────────────────────────────────────────────────────
 CNY
 Total                                 ¥22.48
 Granted                                ¥0.00
@@ -45,6 +49,12 @@ holidays. The holiday list is fetched from
 [NateScarlet/holiday-cn](https://github.com/NateScarlet/holiday-cn), which scrapes the State Council
 announcements daily, so it keeps itself current.
 
+The **Estimated cost** section shows the running session cost in both USD and CNY, calculated from
+the token usage (cached input, uncached input, and output) using the published peak and off-peak
+rates of the model selected for the session. Supported models are `deepseek-flash`
+(DeepSeek-V41-Flash) and `deepseek-v4-pro` (DeepSeek-V4-Pro-0813). The section appears only when
+the session has non-zero token usage.
+
 ## Requirements
 
 - DeepSeek Harness `0.2.0-rc.2` or later
@@ -187,57 +197,9 @@ bun run preview:panel      # prints the popover markup and stylesheet, no browse
 There is no build step: `lib/index.js` is plain ESM, and `lib/client.js` is hand-authored in the web
 client's module-loader bundle format. Neither half needs a bundler.
 
-## Publishing
-
-The repository publishes to npm from GitHub Actions
-([`.github/workflows/ci.yml`](.github/workflows/ci.yml)): tests run on every push and pull request,
-and a **GitHub Release** — or the *Run workflow* button — publishes to the registry.
-
-Authentication uses **[npm trusted publishing](https://docs.npmjs.com/trusted-publishers)**, so
-there is **no `NPM_TOKEN` secret and no long-lived credential to rotate**. The publish job holds
-`id-token: write`, GitHub mints an OIDC token, and npm exchanges it for a credential valid for that
-one publish. Provenance comes from the same token.
-
-The two jobs install differently on purpose:
-
-- **`test`** installs with **bun** (`bun install --frozen-lockfile`) and runs the preflight suite.
-- **`publish`** is **npm-only and installs nothing**. The published files are committed sources with
-  no build step, so `npm publish` just packs `lib/` and `cordis.patch.yml`. It is gated on `test`
-  via `needs:`, so nothing reaches the registry untested.
-
-### One-time setup
-
-**Step 1 — publish the first version by hand.** This is not optional. A trusted publisher is
-configured on a package page, and npm's own setup path is *Packages → YOUR_PACKAGE → Settings →
-Trusted publishing* — which does not exist until the package does. An OIDC token **cannot create a
-new package**, so publishing before this step fails with `E404` on the `PUT`.
-
-```sh
-bun install && bun run preflight
-npm login          # as your npm account
-npm whoami
-npm publish --access public
-```
-
-That publishes `0.1.0` and creates the package page.
-
-**Step 2 — add the trusted publisher** on npmjs.com at
-`https://www.npmjs.com/package/dsh-simple-usage-info/access`:
-
-| Field | Value |
-|---|---|
-| Publisher | GitHub Actions |
-| Organization or user | `MarJose123` — the **GitHub** owner, *not* the npm username |
-| Repository | `dsh-simple-usage-info` |
-| Workflow filename | `ci.yml` — the filename only, with the extension, not the full path |
-| Environment name | *(leave blank — the job declares no environment)* |
-| Allowed actions | **tick "Allow npm publish"** |
-
-That last row is the trap: `npm stage publish` is always permitted, but direct `npm publish` is a
-separate opt-in and is **off by default**. Without it the publish is rejected even though the
-workflow is otherwise correct.
+### Preparation for release 
 
-**Step 3 — release via CI.** Bump the version, then cut a GitHub Release:
+**release via CI.** Bump the version, then cut a GitHub Release:
 
 ```sh
 npm version 0.1.1 --no-git-tag-version
@@ -245,24 +207,6 @@ git commit -am "Release 0.1.1" && git push
 gh release create v0.1.1 --generate-notes
 ```
 
-The publish job runs, and from here on every release goes through OIDC. Revoke the bootstrap token
-if you created one — nothing needs it any more.
-
-> If you would rather `0.1.0` be the CI-published version, bootstrap a throwaway `0.0.1` instead,
-> then set the version back to `0.1.0` and release that. The bootstrap version is scaffolding, so it
-> never carries provenance.
-
-### Reading a failed publish
-
-The two failure modes look similar but have different causes, and npm's error code tells them apart:
-
-| Error | Meaning |
-|---|---|
-| `E404` on `PUT` | The package does not exist yet — do the bootstrap above |
-| `ENEEDAUTH` | The package exists but the trusted publisher does not match: check the GitHub owner, repository, and workflow filename are **exact and case-sensitive**, and that the job has `id-token: write` |
-
-The workflow checks for the first case before publishing and fails with the remedy instead of a bare
-404.
 
 ## License
 

package/lib/client.d.ts

@@ -62,8 +62,37 @@ export interface PanelModel {
   readonly footer: string
 }
 
+/** Token usage from the `tokenUsage` session projection (flat object). */
+export interface TokenUsageProjection {
+  readonly uncachedInputTokens: number
+  readonly outputTokens: number
+  readonly cacheReadTokens: number
+  readonly cacheWriteTokens: number
+}
+
+/** Per-currency per-million-token rates for one billing window. */
+export interface CurrencyRates {
+  readonly usd: { readonly inputCacheHit: number; readonly inputCacheMiss: number; readonly output: number }
+  readonly cny: { readonly inputCacheHit: number; readonly inputCacheMiss: number; readonly output: number }
+}
+
+/** Rates for a model across peak and off-peak billing windows. */
+export interface ModelRates {
+  readonly peak: CurrencyRates
+  readonly offPeak: CurrencyRates
+}
+
+/** Estimated cost in both currencies. */
+export interface EstimatedCost {
+  readonly usd: number
+  readonly cny: number
+}
+
+/** Known model keys recognised by the rates table. */
+export type ModelKey = 'deepseek-flash' | 'deepseek-v4-pro'
+
 /** The composer-dock entry component. */
-export declare function UsageBar(): unknown
+export declare function UsageBar(props?: { useProjection?: (key: string) => unknown }): unknown
 /** Client plugin body: one entry in the composer dock. */
 export declare function apply(ctx: ClientContext): void
 
@@ -74,7 +103,15 @@ export declare function summarize(state: { status: string; payload?: unknown }):
 /** The peak / off-peak pill: the window name and nothing else. */
 export declare function priceBadge(pricing?: { window?: string } | null): unknown
 /** The popover's contents, as data. */
-export declare function panelModel(payload: unknown, pricing: unknown, now: number): PanelModel
+export declare function panelModel(payload: unknown, pricing: unknown, now: number, tokenUsage?: TokenUsageProjection | undefined, model?: string | undefined): PanelModel
+/** Estimate cost from token usage at the current billing window. */
+export declare function estimateCost(usage: TokenUsageProjection | undefined, isPeak: boolean, model?: string | undefined): EstimatedCost | null
+/** Resolve the rates table for a model key and billing window, falling back to the default. */
+export declare function getModelRates(model?: string | undefined, isPeak?: boolean): CurrencyRates
+/** Format a dollar amount. */
+export declare function formatUsd(value: number): string
+/** Format a CNY amount. */
+export declare function formatCny(value: number): string
 /** `2m` / `2h 5m` / `2d 2h`, always rounding up. */
 export declare function countdown(target?: number, now?: number): string | undefined
 /** Which window one instant falls in, mirroring lib/pricing.js. */

package/lib/client.js

@@ -49,10 +49,133 @@ window.__ModuleLoader__.load({
     const POLL_MS = 60000
     /** How often the clock-derived badge re-evaluates between polls. */
     const TICK_MS = 20000
+    /** Random retry window when in error state (5-10 seconds). */
+    const RETRY_MIN_MS = 5000
+    const RETRY_MAX_MS = 10000
 
     const PEAK = 'peak'
     const OFF_PEAK = 'off-peak'
 
+    // ------------------------------------------------------------------ pricing
+
+    /**
+     * Per-model per-million-token rates for peak and off-peak billing windows.
+     *
+     * Source: https://api-docs.deepseek.com/quick_start/pricing
+     */
+    const RATES = {
+      'deepseek-flash': {
+        peak: {
+          usd: {
+            inputCacheHit: 0.006,
+            inputCacheMiss: 0.30,
+            output: 1.20
+          },
+          cny: {
+            inputCacheHit: 0.04,
+            inputCacheMiss: 2,
+            output: 8
+          }
+        },
+        offPeak: {
+          usd: {
+            inputCacheHit: 0.003,
+            inputCacheMiss: 0.15,
+            output: 0.60
+          },
+          cny: {
+            inputCacheHit: 0.02,
+            inputCacheMiss: 1,
+            output: 4
+          }
+        }
+      },
+      'deepseek-v4-pro': {
+        peak: {
+          usd: {
+            inputCacheHit: 0.044,
+            inputCacheMiss: 1.32,
+            output: 3.96
+          },
+          cny: {
+            inputCacheHit: 0.30,
+            inputCacheMiss: 9.00,
+            output: 27.0
+          }
+        },
+        offPeak: {
+          usd: {
+            inputCacheHit: 0.022,
+            inputCacheMiss: 0.66,
+            output: 1.98
+          },
+          cny: {
+            inputCacheHit: 0.15,
+            inputCacheMiss: 4.5,
+            output: 13.5
+          }
+        }
+      }
+    }
+
+    /** Default model key when the session model is unknown. */
+    const DEFAULT_MODEL = 'deepseek-flash'
+
+    /**
+     * Resolve the rates table for a model key and billing window,
+     * falling back to the default model.
+     */
+    function getModelRates(model, isPeak) {
+      const modelRates = RATES[model] ?? RATES[DEFAULT_MODEL]
+      return isPeak ? modelRates.peak : modelRates.offPeak
+    }
+
+    /**
+     * Estimate the cost for one token-usage snapshot at the current billing
+     * window. Returns costs in both currencies.
+     * @param usage - the flat `TokenUsageProjection` from `useProjection('tokenUsage')`.
+     * @param isPeak - whether the current window is peak-rate.
+     * @param model - optional model key (e.g. `'deepseek-flash'`, `'deepseek-v4-pro'`); defaults to Flash.
+     * @returns estimated costs in USD and CNY, or `null` when usage is zero.
+     */
+    function estimateCost(usage, isPeak, model) {
+      if (usage === undefined || usage === null) return null
+      const cacheHit = usage.cacheReadTokens ?? 0
+      const cacheMiss = usage.uncachedInputTokens ?? 0
+      const output = usage.outputTokens ?? 0
+      if (cacheHit + cacheMiss + output === 0) return null
+
+      const rates = getModelRates(model, isPeak)
+
+      const usd = (
+        cacheHit * rates.usd.inputCacheHit +
+        cacheMiss * rates.usd.inputCacheMiss +
+        output * rates.usd.output
+      ) / 1_000_000
+
+      const cny = (
+        cacheHit * rates.cny.inputCacheHit +
+        cacheMiss * rates.cny.inputCacheMiss +
+        output * rates.cny.output
+      ) / 1_000_000
+
+      return { usd, cny }
+    }
+
+    /** Format a small dollar amount, e.g. `$0.012` / `$0.00`. */
+    function formatUsd(value) {
+      const clamped = Math.max(0, value)
+      if (clamped >= 1) return `$${clamped.toFixed(2)}`
+      return `$${parseFloat(clamped.toFixed(4)).toFixed(4).replace(/0+$/, '').replace(/\.$/, '')}`
+    }
+
+    /** Format a small CNY amount, e.g. `¥0.08` / `¥0.00`. */
+    function formatCny(value) {
+      const clamped = Math.max(0, value)
+      if (clamped >= 1) return `¥${clamped.toFixed(2)}`
+      return `¥${parseFloat(clamped.toFixed(4)).toFixed(4).replace(/0+$/, '').replace(/\.$/, '')}`
+    }
+
     // ------------------------------------------------------------------ styles
 
     /**
@@ -95,6 +218,7 @@ window.__ModuleLoader__.load({
 .dsu-dot-ok{background:var(--dsw-alias-state-success-primary)}
 .dsu-dot-low{background:var(--dsw-alias-state-error-primary)}
 .dsu-dot-unknown{background:var(--dsw-alias-label-quaternary)}
+.dsu-dot-error{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:8px solid var(--dsw-alias-state-warning-primary, #e67e22);flex:none;border-radius:0}
 .dsu-pill{padding:0 6px;border-radius:999px;border:1px solid currentColor;font-size:11px;line-height:15px;font-weight:500;flex:none}
 .dsu-pill-off{color:var(--dsw-alias-state-success-primary)}
 .dsu-pill-peak{color:var(--dsw-alias-state-error-primary)}
@@ -285,17 +409,30 @@ window.__ModuleLoader__.load({
     }
 
     /**
-     * One line of text for the dock. The API reports every configured wallet,
-     * usually including a permanently zero one, so the bar shows the first
-     * funded wallet; the popover carries the full breakdown either way.
+     * One line of text for the dock. Shows "DeepSeek ¥19.41" if USD is empty or
+     * zero, "DeepSeek ¥19.41 + $10.00" if both are funded, or "DeepSeek $10.00"
+     * if CNY is empty; the popover carries the full breakdown.
      */
     function summarize(state) {
       if (state.status === 'loading') return 'DeepSeek …'
       if (state.status === 'error') return 'DeepSeek unavailable'
       const infos = state.payload?.balance?.balance_infos ?? []
       if (infos.length === 0) return 'DeepSeek no balance'
-      const funded = infos.find((info) => Number(info?.total_balance ?? 0) > 0)
-      return `DeepSeek ${formatWallet(funded ?? infos[0])}`
+      const cny = infos.find((info) => info?.currency === 'CNY')
+      const usd = infos.find((info) => info?.currency === 'USD')
+      const hasCny = cny !== undefined && Number(cny.total_balance ?? 0) > 0
+      const hasUsd = usd !== undefined && Number(usd.total_balance ?? 0) > 0
+
+      if (hasCny && hasUsd) {
+        return `DeepSeek ${formatWallet(cny)} + ${formatWallet(usd)}`
+      }
+      if (hasCny || (cny !== undefined && !hasUsd)) {
+        return `DeepSeek ${formatWallet(cny)}`
+      }
+      if (hasUsd || usd !== undefined) {
+        return `DeepSeek ${formatWallet(usd)}`
+      }
+      return `DeepSeek ${infos.map(formatWallet).join(' + ')}`
     }
 
     /**
@@ -303,9 +440,11 @@ window.__ModuleLoader__.load({
      * @param payload - the host's balance branch, or undefined.
      * @param pricing - the live billing reading.
      * @param now - skew-corrected epoch milliseconds.
+     * @param tokenUsage - the token usage totals from the `tokenUsage` projection.
+     * @param model - optional model key for cost estimation (e.g. `'deepseek-flash'`, `'deepseek-v4-pro'`).
      * @returns the headline, the label/value groups, and the footer.
      */
-    function panelModel(payload, pricing, now) {
+    function panelModel(payload, pricing, now, tokenUsage, model) {
       const infos = payload?.ok === true ? (payload.balance?.balance_infos ?? []) : []
       const funded = infos.find((info) => Number(info?.total_balance ?? 0) > 0)
       // The API lists a permanently zero wallet first (USD beside a funded CNY),
@@ -340,6 +479,18 @@ window.__ModuleLoader__.load({
         groups.push({ title: 'Billing window', rows })
       }
 
+      // Estimated cost from session token usage
+      const cost = estimateCost(tokenUsage, pricing?.window === PEAK, model)
+      if (cost !== null) {
+        groups.push({
+          title: 'Estimated cost',
+          rows: [
+            { label: 'USD', value: formatUsd(cost.usd) },
+            { label: 'CNY', value: formatCny(cost.cny) }
+          ]
+        })
+      }
+
       for (const info of ordered) {
         groups.push({
           title: String(info.currency ?? 'balance'),
@@ -462,15 +613,35 @@ window.__ModuleLoader__.load({
      * The dock entry. Reads the host route on mount and once a minute after,
      * re-evaluates the billing window every 20 s in between, and opens the
      * popover on click.
+     * @param props - dock props including `useProjection` from the session standard kit.
      * @returns the bar plus, while open, the portaled panel.
      */
-    function UsageBar() {
+    function UsageBar(props) {
+      // Read session projections so the popover can estimate cost with the correct model.
+      // `useProjection` is supplied by the slot system's session standard kit.
+      const useProjection = props && props.useProjection ? props.useProjection : undefined
+      const tokenUsage = useProjection ? useProjection('tokenUsage') : undefined
+      const modelSelection = useProjection ? useProjection('modelSelection') : undefined
+      // Derive the model key from the last-used model, falling back to the pending selection.
+      const model = (modelSelection?.lastUsed?.model ?? modelSelection?.next?.model ?? undefined)
       const [state, setState] = React.useState({ status: 'loading' })
       const [open, setOpen] = React.useState(false)
       const [, setTick] = React.useState(0)
       const alive = React.useRef(true)
       const rootRef = React.useRef(null)
       const panelRef = React.useRef(null)
+      const retryTimer = React.useRef(null)
+
+      const scheduleRetry = () => {
+        clearTimeout(retryTimer.current)
+        const delay = RETRY_MIN_MS + Math.random() * (RETRY_MAX_MS - RETRY_MIN_MS)
+        retryTimer.current = setTimeout(() => load(true), delay)
+      }
+
+      const clearRetry = () => {
+        clearTimeout(retryTimer.current)
+        retryTimer.current = null
+      }
 
       const load = React.useCallback(async (force) => {
         try {
@@ -484,18 +655,26 @@ window.__ModuleLoader__.load({
           // stays on screen even when the balance read failed.
           const pricing = body?.pricing
           const skewMs = typeof pricing?.now === 'number' ? pricing.now - Date.now() : 0
-          if (body !== undefined && body.ok === true) setState({ status: 'ready', payload: body, pricing, skewMs })
-          else if (body !== undefined && body.ok === false)
+          if (body !== undefined && body.ok === true) {
+            clearRetry()
+            setState({ status: 'ready', payload: body, pricing, skewMs })
+          } else if (body !== undefined && body.ok === false) {
+            scheduleRetry()
             setState({ status: 'error', message: String(body.error?.message ?? 'unknown error'), pricing, skewMs })
-          else setState({ status: 'error', message: `HTTP ${response.status}` })
+          } else {
+            scheduleRetry()
+            setState({ status: 'error', message: `HTTP ${response.status}` })
+          }
         } catch (error) {
-          if (alive.current === true)
+          if (alive.current === true) {
+            scheduleRetry()
             setState((previous) => ({
               status: 'error',
               message: String(error?.message ?? error),
               pricing: previous.pricing,
               skewMs: previous.skewMs
             }))
+          }
         }
       }, [])
 
@@ -506,6 +685,7 @@ window.__ModuleLoader__.load({
         const tick = setInterval(() => setTick((count) => count + 1), TICK_MS)
         return () => {
           alive.current = false
+          clearRetry()
           clearInterval(poll)
           clearInterval(tick)
         }
@@ -547,6 +727,17 @@ window.__ModuleLoader__.load({
           : host
 
       const available = state.status === 'ready' ? state.payload?.balance?.is_available : undefined
+      const isError = state.status === 'error'
+      const barChildren = []
+      if (isError) {
+        barChildren.push(React.createElement('span', { key: 'dot', 'aria-hidden': true, className: 'dsu-dot-error' }))
+      } else {
+        barChildren.push(dot(available))
+      }
+      barChildren.push(React.createElement('span', { key: 'text' }, summarize(state)))
+      if (!isError) {
+        barChildren.push(priceBadge(pricing))
+      }
       const bar = React.createElement(
         'span',
         {
@@ -554,26 +745,36 @@ window.__ModuleLoader__.load({
           ref: rootRef,
           role: 'button',
           tabIndex: 0,
-          'aria-haspopup': 'dialog',
+          'aria-haspopup': isError ? undefined : 'dialog',
           'aria-expanded': open,
-          title: 'DeepSeek balance and billing window',
-          onClick: () => setOpen((value) => value !== true),
+          title: isError ? 'Reconnecting automatically' : 'DeepSeek balance and billing window',
+          onClick: () => {
+            if (isError) {
+              load(true)
+            } else {
+              setOpen((value) => value !== true)
+            }
+          },
           onKeyDown: (event) => {
             if (event.key === 'Enter' || event.key === ' ') {
               event.preventDefault()
-              setOpen((value) => value !== true)
+              if (isError) {
+                load(true)
+              } else {
+                setOpen((value) => value !== true)
+              }
             }
           },
           className: 'dsu-bar'
         },
-        [dot(available), React.createElement('span', { key: 'text' }, summarize(state)), priceBadge(pricing)]
+        barChildren
       )
 
       return React.createElement(React.Fragment, null, [
         bar,
-        open === true
+        open === true && !isError
           ? ReactDOM.createPortal(
-              panelElement(panelModel(state.payload, pricing, now), position, panelRef, () => load(true)),
+              panelElement(panelModel(state.payload, pricing, now, tokenUsage, model), position, panelRef, () => load(true)),
               document.body
             )
           : null
@@ -608,6 +809,10 @@ window.__ModuleLoader__.load({
     exports.summarize = summarize
     exports.priceBadge = priceBadge
     exports.panelModel = panelModel
+    exports.estimateCost = estimateCost
+    exports.getModelRates = getModelRates
+    exports.formatUsd = formatUsd
+    exports.formatCny = formatCny
     exports.countdown = countdown
     exports.windowAt = windowAt
     exports.readWindow = readWindow

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-simple-usage-info",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "DeepSeek Harness plugin: your DeepSeek API balance and the current peak/off-peak billing window, below the message input.",
   "keywords": [
     "dsh",