@linxin666/dsh-usage 0.3.24 → 0.4.0

package/src/client/locales.ts

@@ -48,6 +48,7 @@ export const zh = {
   'usage.config.title': '设置',
   'usage.config.enabled': '启用插件',
   'usage.config.pollIntervalSec': '轮询间隔（秒）',
+  'usage.config.saveFailed': '保存失败：设置未被接受。',
   'usage.bank.title': '鲸元券',
   'usage.bank.hint': '官方 API 每消耗 100 万 tokens 铸造 1 鲸元；保存或分享这张票券。',
   'usage.bank.noUsage': '暂无 DeepSeek 官方用量数据（统计自插件启用起）',
@@ -58,15 +59,11 @@ export const zh = {
   'usage.bank.save': '保存图片',
   'usage.bank.share': '分享',
   'usage.bank.drawError': '票券生成失败：{error}',
-  'usage.sidebar.entry.label': '用量',
-  'usage.sidebar.entry.tooltip': '用量面板：套餐配额与余额',
-  'usage.sidebar.toggle.collapse': '折叠',
-  'usage.sidebar.toggle.expand': '展开',
-  'usage.sidebar.empty': '没有已配置的套餐或余额数据。',
-  'usage.sidebar.error': '加载失败：{error}',
-  'usage.sidebar.loading': '正在加载用量数据…',
-  'usage.sidebar.balanceLeft': '剩余 {balance}',
-  'usage.sidebar.todayUsage': '今日 {tokens} tokens',
+  'usage.foot.cost': '今日消费',
+  'usage.foot.noData': '今日暂无用量',
+  'usage.foot.open': '打开使用统计设置',
+  'usage.foot.collapse': '收起用量卡片',
+  'usage.foot.expand': '展开用量卡片',
 }
 
 /** English mirror; every zh key present. */
@@ -110,6 +107,7 @@ export const en: Record<UsageKey, string> = {
   'usage.config.title': 'Settings',
   'usage.config.enabled': 'Enable plugin',
   'usage.config.pollIntervalSec': 'Poll interval (seconds)',
+  '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 official API mint one whale yuan; save or share the note.',
   'usage.bank.noUsage': 'No official DeepSeek usage yet (counting starts when the plugin is enabled)',
@@ -120,15 +118,11 @@ export const en: Record<UsageKey, string> = {
   'usage.bank.save': 'Save image',
   'usage.bank.share': 'Share',
   'usage.bank.drawError': 'Failed to render the voucher: {error}',
-  'usage.sidebar.entry.label': 'Usage',
-  'usage.sidebar.entry.tooltip': 'Usage panel: plan quotas and balances',
-  'usage.sidebar.toggle.collapse': 'Collapse',
-  'usage.sidebar.toggle.expand': 'Expand',
-  'usage.sidebar.empty': 'No plan or balance data configured.',
-  'usage.sidebar.error': 'Loading failed: {error}',
-  'usage.sidebar.loading': 'Loading usage data…',
-  'usage.sidebar.balanceLeft': '{balance} left',
-  'usage.sidebar.todayUsage': '{tokens} tokens today',
+  'usage.foot.cost': 'Today spend',
+  'usage.foot.noData': 'No usage yet today',
+  'usage.foot.open': 'Open usage statistics settings',
+  'usage.foot.collapse': 'Collapse the usage card',
+  'usage.foot.expand': 'Expand the usage card',
 }
 
 export type UsageKey = keyof typeof zh

package/src/client/usage.module.css

@@ -384,82 +384,71 @@
 
 
 /* ---------------------------------------------------------------------------
-   Sidebar usage panel (issue #1592): the entry row reuses the shared
-   sidebar-entry core (its class names are entry / entryIcon / entryLabel), and
-   the collapsed rail rules mirror the skill center's so the row becomes an
-   icon in the 56px rail. Tokens only; no framework styles.
+   Sidebar foot card: the compact usage glance the mount seats as the shell
+   foot area's last child, directly below the Settings row. The chrome is an
+   outer div; the content is one transparent main button (the whole card opens
+   the usage settings section) with a sibling corner chevron toggling the
+   collapsed strip — sibling buttons, since nesting buttons is invalid HTML.
+   Quiet card on the same currentColor mixes as the section cards; hidden in
+   the 56px rail (the frame carries data-sidebar-collapsed).
    --------------------------------------------------------------------------- */
 
-.entry {
+/* Seated above the Settings row as a native sidebar row: the shell's row
+   radius and hover fill, with none of the card chrome that made it read as a
+   pill pasted onto the foot. Only the expanded body keeps a faint surface to
+   hold its four lines together; the collapsed strip is a plain 36px row. */
+.footCard {
+  position: relative;
   box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  gap: 8px;
   width: 100%;
-  height: 36px;
-  padding: 0 10px;
-  background: transparent;
+  margin: 2px 0 4px;
   border: none;
-  border-radius: 8px;
-  color: var(--dsw-alias-label-secondary);
-  cursor: pointer;
-  font-size: 13px;
-  white-space: nowrap;
+  border-radius: 12px;
+  background: color-mix(in srgb, currentColor 4%, transparent);
+  color: inherit;
+  transition: background-color 120ms ease;
 }
 
-.entry:hover {
+.footCard:hover {
   background: var(--dsw-alias-interactive-bg-hover);
-  color: var(--dsw-alias-label-primary);
-}
-
-.entryIcon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  flex: none;
 }
 
-.entryIcon svg {
-  display: block;
-  width: 18px;
-  height: 18px;
-}
-
-.entryLabel {
-  overflow: hidden;
-  text-overflow: ellipsis;
+.footCardCollapsed {
+  background: transparent;
 }
 
-/* Composite row (the core's trailing-actions structure): the main button
-   keeps the old row's hit area and the action buttons seat at the right
-   edge. */
-.entryMain {
+.footMain {
   appearance: none;
+  box-sizing: border-box;
   display: flex;
-  align-items: center;
-  gap: 8px;
-  flex: 1;
-  min-width: 0;
-  height: 100%;
-  padding: 0;
-  background: transparent;
+  flex-direction: column;
+  gap: 4px;
+  width: 100%;
+  padding: 8px;
   border: none;
+  border-radius: 12px;
+  background: transparent;
   color: inherit;
   font: inherit;
   text-align: left;
   cursor: pointer;
 }
 
-.entryAction {
+.footMain:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 45%, transparent);
+}
+
+.footToggle {
   appearance: none;
+  position: absolute;
+  top: 6px;
+  right: 6px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 22px;
-  height: 22px;
-  flex: none;
+  width: 20px;
+  height: 20px;
   padding: 0;
   border: none;
   border-radius: 6px;
@@ -470,166 +459,113 @@
   transition: opacity 120ms ease, background-color 120ms ease;
 }
 
-.entry:hover .entryAction {
+.footCard:hover .footToggle {
   opacity: 0.8;
 }
 
-.entryAction:hover {
+.footToggle:hover {
   opacity: 1;
   background: color-mix(in srgb, currentColor 10%, transparent);
 }
 
-.entryAction:focus-visible,
-.entryMain:focus-visible {
+.footToggle:focus-visible {
   outline: none;
   box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 45%, transparent);
 }
 
-.entryAction:disabled {
-  cursor: default;
-  opacity: 0.4;
-}
-
-.entryAction svg {
+.footToggle svg {
   display: block;
-  width: 14px;
-  height: 14px;
-}
-
-/* Refresh cooldown: the spinning glyph marks the in-flight probe cycle. */
-.entryAction:disabled svg {
-  animation: usageEntrySpin 900ms linear infinite;
 }
 
-@keyframes usageEntrySpin {
-  to {
-    transform: rotate(360deg);
-  }
+.footHead {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 8px;
 }
 
-:global([data-dsh-frame][data-sidebar-collapsed]) .entry,
-:global([data-sidebar-collapsed]) .entry {
-  justify-content: center;
-  width: 36px;
-  height: 36px;
-  padding: 0;
-  margin: 0 auto 12px;
-  border-radius: 50%;
+.footTitle {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+  font-size: 12px;
+  opacity: 0.65;
+  white-space: nowrap;
 }
 
-:global([data-dsh-frame][data-sidebar-collapsed]) .entryMain,
-:global([data-sidebar-collapsed]) .entryMain {
+.footTitle svg {
+  display: block;
   flex: none;
-  width: 100%;
-  justify-content: center;
-}
-
-:global([data-dsh-frame][data-sidebar-collapsed]) .entryAction,
-:global([data-sidebar-collapsed]) .entryAction {
-  display: none;
-}
-
-:global([data-dsh-frame][data-sidebar-collapsed]) .sidebarSummary,
-:global([data-sidebar-collapsed]) .sidebarSummary {
-  display: none;
-}
-
-:global([data-dsh-frame][data-sidebar-collapsed]) .entryLabel,
-:global([data-sidebar-collapsed]) .entryLabel {
-  display: none;
 }
 
-/* Collapsed strip: the current session provider's today usage in one
-   quiet line under the entry row (hidden in the 56px rail). */
-.sidebarSummary {
-  display: flex;
-  align-items: baseline;
-  gap: 6px;
-  margin: 0 4px 12px;
-  padding: 0 10px;
-  font-size: 11px;
-  color: inherit;
-  opacity: 0.75;
+/* The headline value leaves room for the corner toggle. */
+.footValue {
+  margin-right: 18px;
+  font-size: 15px;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
   white-space: nowrap;
-  overflow: hidden;
 }
 
-.sidebarSummaryName {
-  flex: none;
-  max-width: 40%;
+.footLine {
+  font-size: 11px;
+  opacity: 0.7;
+  font-variant-numeric: tabular-nums;
   overflow: hidden;
   text-overflow: ellipsis;
-  font-weight: 600;
+  white-space: nowrap;
 }
 
-.sidebarSummaryFacts {
-  overflow: hidden;
-  text-overflow: ellipsis;
+.footMeta {
+  font-size: 10px;
+  opacity: 0.5;
   font-variant-numeric: tabular-nums;
 }
 
-/* Expanded panel: a quiet card stack directly under the entry row. */
-.sidebarPanel {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  margin: 0 4px 12px;
-  padding: 10px 10px 12px;
-  border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
-  border-radius: 10px;
-  color: inherit;
-  background: color-mix(in srgb, currentColor 4%, transparent);
+/* Collapsed strip: tighter chrome, one horizontal line, room for the toggle. */
+.footCardCollapsed .footMain {
+  min-height: 36px;
+  padding: 7px 8px;
 }
 
-.sidebarProvider {
+.footStrip {
   display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.sidebarProviderHead {
-  display: flex;
-  align-items: baseline;
-  justify-content: space-between;
-  gap: 8px;
+  align-items: center;
+  gap: 6px;
+  padding-right: 20px;
   font-size: 12px;
-}
-
-.sidebarProviderName {
-  overflow: hidden;
-  text-overflow: ellipsis;
   white-space: nowrap;
+  overflow: hidden;
 }
 
-.sidebarBalance {
+.footStrip svg {
+  display: block;
   flex: none;
-  opacity: 0.75;
+  opacity: 0.65;
 }
 
-.sidebarWindowRow {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  font-size: 11px;
-  opacity: 0.85;
+.footStripProvider {
+  flex: none;
+  max-width: 45%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-weight: 500;
 }
 
-.sidebarBar {
-  flex: 1;
-  height: 4px;
-  border-radius: 2px;
-  background: color-mix(in srgb, currentColor 14%, transparent);
+.footStripLabel {
+  opacity: 0.65;
   overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-.sidebarBarFill {
-  display: block;
-  height: 100%;
-  border-radius: 2px;
-  background: currentColor;
+.footStripValue {
+  margin-left: auto;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
 }
 
-.sidebarMuted {
-  font-size: 11px;
-  opacity: 0.6;
+:global([data-dsh-frame][data-sidebar-collapsed]) .footCard,
+:global([data-sidebar-collapsed]) .footCard {
+  display: none;
 }

package/src/host/http.ts

@@ -2,7 +2,9 @@
 /**
  * Shared JSON body/response helpers for the host route families: one strict
  * bounded body reader, one lenient bounded body reader, one JSON object
- * narrow, and one JSON writer. Previously these were copy-pasted across the
+ * narrow, one JSON writer, and the outbound request-init helper that keeps a
+ * host fetch body decodable (withIdentityEncoding). Previously the readers
+ * were copy-pasted across the
  * package route files (routes.ts, update-routes.ts, mobile-api.ts, and each
  * family's route module) with drifting contracts: body caps ranging 4 KiB to
  * 1 MiB and four distinct overflow behaviors (reject, undefined, null, throw).
@@ -88,6 +90,26 @@ export function asJsonObject(value: unknown): Record<string, unknown> | undefine
   return isJsonObject(value) ? value : undefined
 }
 
+/**
+ * Request init that asks a remote origin for an uncompressed body.
+ *
+ * The DSH host boots `@deepseek-ai/dsh-http-proxy`, whose top-level import of
+ * the npm `undici` copy replaces the legacy `undici.globalDispatcher.1` slot
+ * Node's built-in `fetch()` reads. That cross-major wrapper drops the
+ * `content-encoding` header and automatic decompression, so a plain fetch
+ * resolves to raw gzip/brotli/zstd bytes — compressed noise no JSON or text
+ * consumer can read. Every host fetch that parses a remote body must request
+ * identity encoding. Caller headers survive; `accept-encoding` is forced to
+ * `identity` because a caller value has no decoder behind it in this host.
+ * @param init - the caller's request init (signal, headers, method, ...).
+ * @returns a copy with `accept-encoding: identity` merged in.
+ */
+export function withIdentityEncoding(init: RequestInit = {}): RequestInit {
+  const headers = new Headers(init.headers)
+  headers.set('accept-encoding', 'identity')
+  return { ...init, headers }
+}
+
 /**
  * Write one JSON response. Default headers are the family defaults
  * (content-type and referrer-policy); caller headers are appended or

package/src/host/usage-service.ts

@@ -14,6 +14,7 @@ import { credentialKey, credentialRef } from '@deepseek-ai/dsh-credentials'
 import type { Session, SessionEvent } from '@deepseek-ai/dsh-session'
 import type { TokenUsage } from '@deepseek-ai/dsh-llm'
 import { dshHome } from '../dsh-home.ts'
+import { withIdentityEncoding } from './http.ts'
 import { adapterFor, isDeepSeekProviderRoute, providerErrorMessage } from '../core/adapters.ts'
 import type { BalanceParse, PlanParse } from '../core/adapters.ts'
 import { foldAliasRoutes } from '../core/provider-routes.ts'
@@ -164,8 +165,9 @@ export class UsageService {
 
   /**
    * 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.
+   * resolves after the final flush lands, so a successor instance (the Host
+   * reloads the profile row on a config change) can serialize its first load
+   * behind it.
    */
   stop(): Promise<void> {
     this.disposed = true
@@ -175,7 +177,7 @@ export class UsageService {
     return this.flushLedger()
   }
 
-  /** Re-apply options live (settings change); retention shrink prunes now. */
+  /** Re-apply options to this running instance; retention shrink prunes now. */
   applyOptions(options: UsageServiceOptions): void {
     this.options = options
     this.pruneIfNeeded()
@@ -596,7 +598,10 @@ export class UsageService {
       if (half === undefined) return undefined
       try {
         const spec = half.build({ apiKey: credential.key as string, ...(credential.accountId !== undefined ? { accountId: credential.accountId } : {}) })
-        const response = await fetch(spec.url, { headers: spec.headers, signal: AbortSignal.timeout(PROBE_TIMEOUT_MS) })
+        const response = await fetch(spec.url, withIdentityEncoding({
+          headers: spec.headers,
+          signal: AbortSignal.timeout(PROBE_TIMEOUT_MS),
+        }))
         const body: unknown = await response.json().catch(() => undefined)
         if (!response.ok) throw new Error(providerErrorMessage(response.status, body))
         const parsed = half.parse(response.status, body)

package/src/index.ts

@@ -8,6 +8,12 @@ import { makeUsageOverviewRoute, makeUsageRefreshRoute } from './host/routes.ts'
 
 export const name = 'dsh-usage'
 export const inject = ['webServer']
+/**
+ * Family settings namespace this row serves. Since 0.1.7 the settings surface
+ * addresses one form per profile entry id and the Host generates this row's
+ * page from the Config schema below, so the namespace is only the alias the
+ * family settings bridge (dsh-web-settings) resolves onto this row's entry id.
+ */
 export const USAGE_SETTINGS_NAMESPACE = 'dsh-usage' as SettingsNamespace
 
 export interface Config {
@@ -36,74 +42,72 @@ export function resolveConfig(config?: Config): ResolvedConfig {
   }
 }
 
+/**
+ * Tail of the process-wide flush chain; undefined while no predecessor's final
+ * ledger flush is still in flight. The Host reloads this profile row when its
+ * configuration changes, so a successor activation is a dispose + apply pair in
+ * the same process: its first ledger load must serialize behind its
+ * predecessor's final write (and behind the reloads before that one).
+ */
+let pendingStop: Promise<unknown> | undefined
+
+/**
+ * Host body. The plugin's own Config schema above is the settings document the
+ * 0.1.7 Host serves for this row; the effective config arrives here as the
+ * `config` argument the Loader resolved and the Host reloads the row when the
+ * user saves a change, so nothing in this body observes or writes settings.
+ * @param ctx - host root context.
+ * @param config - the row's resolved configuration.
+ */
 export const apply = mountOnce('@linxin666/dsh-usage', (ctx: Context, config?: Config): void => {
-  let source: () => Config = () => config ?? {}
+  const value = resolveConfig(config)
+  // A disabled row mounts nothing: no probe cycle, no ledger, no routes. The
+  // settings page owns the enable switch, and re-enabling reloads this row.
+  if (!value.enabled) return
+
+  let live = true
   let service: UsageService | undefined
-  let pendingStop: Promise<void> | undefined
   let disposeRoutes: (() => void) | undefined
 
-  const rearm = (): void => {
-    const value = resolveConfig(source())
-    if (!value.enabled) {
-      pendingStop = service?.stop()
-      service = undefined
-      disposeRoutes?.()
-      disposeRoutes = undefined
-      return
-    }
-    if (service === undefined) {
-      const next = new UsageService(ctx, value)
-      service = next
-      const begin = (): void => {
-        // A disable may have landed while the predecessor's final flush was
-        // still pending; only start if this instance is still the live one.
-        if (service !== next) return
-        next.start()
-        const disposers = [makeUsageOverviewRoute(ctx, next), makeUsageRefreshRoute(ctx, next)]
-          .map((route) => ctx.webServer.register(route))
-        disposeRoutes = () => {
-          for (const dispose of disposers) {
-            try {
-              dispose()
-            } catch {
-              // Route fiber already gone during shutdown.
-            }
-          }
+  const begin = (): void => {
+    // The fiber may have gone down while the predecessor's final flush was
+    // still pending; only start while this activation is the live one.
+    if (!live) return
+    const next = new UsageService(ctx, value)
+    service = next
+    next.start()
+    const disposers = [makeUsageOverviewRoute(ctx, next), makeUsageRefreshRoute(ctx, next)]
+      .map((route) => ctx.webServer.register(route))
+    disposeRoutes = () => {
+      for (const dispose of disposers) {
+        try {
+          dispose()
+        } catch {
+          // Route fiber already gone during shutdown.
         }
       }
-      // Serialize the start behind a just-stopped predecessor: its final
-      // ledger flush must land on disk before this instance loads the file.
-      if (pendingStop !== undefined) pendingStop.then(begin, begin)
-      else begin()
-    } else {
-      service.applyOptions(value)
     }
   }
 
-  ctx.inject(['settings'], (settingsCtx) => {
-    try {
-      if (typeof settingsCtx.settings?.installSection === 'function') {
-        settingsCtx.settings.installSection(ctx, USAGE_SETTINGS_NAMESPACE, Config, config ?? {}, {
-          setSource: (next) => { source = next; rearm() },
-          onChange: rearm,
-        })
-      } else if (typeof settingsCtx.settings?.register === 'function') {
-        const scope = settingsCtx.settings.register(USAGE_SETTINGS_NAMESPACE, Config, { base: config ?? {} })
-        source = () => scope?.get?.() ?? (config ?? {})
-        scope?.watch?.(() => { rearm() })
-        rearm()
-      }
-    } catch {
-      // Defensive fallback against settings registration differences
-    }
-  })
-
   ctx.effect(() => {
-    rearm()
+    if (pendingStop === undefined) {
+      // No predecessor's flush is in flight: start now.
+      begin()
+    } else {
+      // Serialize the start behind every predecessor: their final writes must
+      // land on disk before this instance loads the file.
+      pendingStop = pendingStop.then(begin, begin).then(() => undefined)
+    }
     return () => {
+      live = false
       disposeRoutes?.()
-      void service?.stop()
+      disposeRoutes = undefined
+      const stopping = service?.stop()
       service = undefined
+      // A successor waits for this instance's final flush, which itself waited
+      // for the predecessor's start: a row disposed before it ever started
+      // keeps the earlier link instead of dropping it.
+      if (stopping !== undefined) pendingStop = (pendingStop ?? Promise.resolve()).then(() => stopping)
     }
   }, 'dsh-usage: runtime')
 })

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

@@ -1,34 +0,0 @@
-/**
- * Sidebar usage panel (issue #1592): the usage body seated directly under the
- * sidebar entry row. The row carries the panel's controls (refresh, collapse
- * chevron), so this component renders only the content: expanded, plan
- * providers show their quota windows and balance-only providers their
- * remaining amount; collapsed, a one-line strip shows the current session
- * provider's today usage (tokens, calls, and cost when priced) from the same
- * /api/dsh-usage/overview document the settings section renders. The open
- * state lives in the mount (persisted to localStorage) and arrives through
- * the open face; polling runs at 10s expanded, 30s collapsed, and pauses
- * while the page is hidden.
- * @module @linxin666/dsh-usage/client/UsageSidebarPanel
- */
-import { type ReactNode } from 'react';
-import type { UsageStoreInstance } from './usage-store.ts';
-/** Expanded-state face the owning mount supplies (subscribe + current value). */
-export interface OpenStateSource {
-    subscribe(listener: () => void): () => void;
-    isOpen(): boolean;
-}
-/** Props of the sidebar panel (the apply body supplies the store and poller). */
-export interface UsageSidebarPanelProps {
-    store: UsageStoreInstance;
-    /** Fetch one overview now. */
-    poll: () => void;
-    /** Expanded state owned by the mount; false renders nothing and pauses polling. */
-    open: OpenStateSource;
-}
-/**
- * Render the sidebar usage panel body.
- * @param props - store, the poll callback, and the mount's open-state face.
- * @returns the panel content, or null while collapsed.
- */
-export declare function UsageSidebarPanel(props: UsageSidebarPanelProps): ReactNode;