@linxin666/dsh-usage 0.3.23 → 0.3.24

package/src/client/usage.module.css

@@ -381,3 +381,255 @@
   outline: none;
   box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 45%, transparent);
 }
+
+
+/* ---------------------------------------------------------------------------
+   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.
+   --------------------------------------------------------------------------- */
+
+.entry {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  height: 36px;
+  padding: 0 10px;
+  background: transparent;
+  border: none;
+  border-radius: 8px;
+  color: var(--dsw-alias-label-secondary);
+  cursor: pointer;
+  font-size: 13px;
+  white-space: nowrap;
+}
+
+.entry: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;
+}
+
+/* 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 {
+  appearance: none;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: 1;
+  min-width: 0;
+  height: 100%;
+  padding: 0;
+  background: transparent;
+  border: none;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.entryAction {
+  appearance: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  flex: none;
+  padding: 0;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  opacity: 0.55;
+  transition: opacity 120ms ease, background-color 120ms ease;
+}
+
+.entry:hover .entryAction {
+  opacity: 0.8;
+}
+
+.entryAction:hover {
+  opacity: 1;
+  background: color-mix(in srgb, currentColor 10%, transparent);
+}
+
+.entryAction:focus-visible,
+.entryMain: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 {
+  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);
+  }
+}
+
+: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%;
+}
+
+:global([data-dsh-frame][data-sidebar-collapsed]) .entryMain,
+:global([data-sidebar-collapsed]) .entryMain {
+  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;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.sidebarSummaryName {
+  flex: none;
+  max-width: 40%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-weight: 600;
+}
+
+.sidebarSummaryFacts {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  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);
+}
+
+.sidebarProvider {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.sidebarProviderHead {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 8px;
+  font-size: 12px;
+}
+
+.sidebarProviderName {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sidebarBalance {
+  flex: none;
+  opacity: 0.75;
+}
+
+.sidebarWindowRow {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11px;
+  opacity: 0.85;
+}
+
+.sidebarBar {
+  flex: 1;
+  height: 4px;
+  border-radius: 2px;
+  background: color-mix(in srgb, currentColor 14%, transparent);
+  overflow: hidden;
+}
+
+.sidebarBarFill {
+  display: block;
+  height: 100%;
+  border-radius: 2px;
+  background: currentColor;
+}
+
+.sidebarMuted {
+  font-size: 11px;
+  opacity: 0.6;
+}

package/src/core/adapters.ts

@@ -67,6 +67,11 @@ function str(value: unknown): string | undefined {
   return typeof value === 'string' && value.trim() !== '' ? value.trim() : undefined
 }
 
+/** Clamp a provider percentage into the renderable 0-100 band. */
+function clampPercent(value: number): number {
+  return Math.max(0, Math.min(100, value))
+}
+
 /** Format a number to a fixed 2-decimal display string. */
 function money(value: number): string {
   return value.toFixed(2)
@@ -190,7 +195,26 @@ const KIMI_CODING: ProviderAdapter = {
   },
 }
 
-/** GLM Coding Plan quota; auth is the RAW key without a Bearer prefix. */
+/**
+ * GLM Coding Plan quota windows, keyed by the provider's own `unit` code
+ * rather than by row position so an added or reordered limit cannot shift a
+ * window's meaning: 3 = the rolling 5-hour window, 6 = the weekly window,
+ * 5 = the monthly one. Two row kinds carry quota — `TOKENS_LIMIT` (token
+ * plans) and `CREDIT_LIMIT` (credit plans, whose exact ratio is
+ * `currentValue` / `usage`) — while `TIME_LIMIT` is the MCP request cap and
+ * is not a plan window at all. Auth is the RAW key without a Bearer prefix.
+ */
+const GLM_UNIT_KEYS: Readonly<Record<number, string>> = { 3: '5h', 5: 'month', 6: 'week' }
+
+/** Percent from a credit row's exact ratio, else the provider's own percentage. */
+function glmCreditPercent(row: Record<string, unknown>): number | undefined {
+  const used = toNum(row.currentValue)
+  const limit = toNum(row.usage)
+  if (used !== undefined && limit !== undefined && limit > 0) return clampPercent((used / limit) * 100)
+  const percentage = toNum(row.percentage)
+  return percentage === undefined ? undefined : clampPercent(percentage)
+}
+
 function glmPlan(host: string, ids: readonly string[]): ProviderAdapter {
   return {
     ids,
@@ -212,11 +236,21 @@ function glmPlan(host: string, ids: readonly string[]): ProviderAdapter {
         for (const entry of limits) {
           if (typeof entry !== 'object' || entry === null) continue
           const row = entry as Record<string, unknown>
-          const unit = toNum(row.unit)
-          const percent = toNum(row.percentage)
+          const kind = str(row.type)
+          // The MCP request cap is a per-minute request budget, not a plan window.
+          if (kind === 'TIME_LIMIT') continue
+          const key = GLM_UNIT_KEYS[toNum(row.unit) ?? Number.NaN]
+          // Unknown units fall through: rendering them would invent a window.
+          if (key === undefined) continue
+          if (kind !== 'TOKENS_LIMIT' && kind !== 'CREDIT_LIMIT') continue
           windows.push({
-            key: unit === 3 ? '5h' : unit === 6 ? 'week' : unit !== undefined ? `unit-${unit}` : 'window',
-            percent: percent === undefined ? undefined : Math.max(0, Math.min(100, percent)),
+            key,
+            percent: kind === 'CREDIT_LIMIT'
+              ? glmCreditPercent(row)
+              : (() => {
+                  const percentage = toNum(row.percentage)
+                  return percentage === undefined ? undefined : clampPercent(percentage)
+                })(),
             resetsAt: toIso(row.nextResetTime),
           })
         }
@@ -409,7 +443,7 @@ export const PROVIDER_ADAPTERS: readonly ProviderAdapter[] = [
   moonshotBalance('api.moonshot.ai', 'USD', ['moonshotai']),
   KIMI_CODING,
   glmPlan('open.bigmodel.cn', ['zai-coding-cn']),
-  glmPlan('api.z.ai', ['zai-coding']),
+  glmPlan('api.z.ai', ['zai', 'zai-coding']),
   OPENCODE_GO,
   minimaxPlan('api.minimaxi.com', ['minimax-cn']),
   minimaxPlan('api.minimax.io', ['minimax']),

package/src/core/provider-routes.ts

@@ -0,0 +1,37 @@
+/**
+ * Alias folding for the enumerated provider routes. Kept in core because the
+ * rule is pure — the host enumerates routes and this decides which of two
+ * routes serving one adapter family survives.
+ * @module @linxin666/dsh-usage/core/provider-routes
+ */
+
+import { adapterFor } from './adapters.ts'
+
+/** The facts alias folding needs about one enumerated provider route. */
+export interface FoldableRoute {
+  /** Provider route key (`deepseek`, `deepseek-official`, custom routes, ...). */
+  id: string
+  /** Whether the LLM runtime serves requests on this route; a catalog-only entry is dormant. */
+  live: boolean
+}
+
+/**
+ * Drop dormant catalog aliases that shadow a live route of the same adapter
+ * family. The pi-ai catalog ships route keys the runtime serves nothing on
+ * until a profile declares them: for DeepSeek the catalog entry `deepseek`
+ * sits beside the llm-deepseek runtime route `deepseek-official`, and both
+ * resolve the same credential (the family's `apiKeyEnv` fallback), so probing
+ * and rendering both turns one account into two identical balance rows.
+ *
+ * A family keeps every live route it has — two configured profiles are two
+ * real accounts, not aliases. A route with no adapter, or one whose family
+ * has no live route at all, is returned untouched.
+ */
+export function foldAliasRoutes<T extends FoldableRoute>(routes: readonly T[]): T[] {
+  return routes.filter((route) => {
+    if (route.live) return true
+    const family = adapterFor(route.id)
+    if (family === undefined) return true
+    return !routes.some((other) => other.live && adapterFor(other.id) === family)
+  })
+}

package/src/core/types.ts

@@ -140,12 +140,25 @@ export interface ProviderSnapshotView {
 export interface UsageOverviewView {
   updatedAt: number
   providers: ProviderSnapshotView[]
-  /** The provider the pet bubble and the header highlight; `source` says how it was picked. */
+  /** The provider the collapsed sidebar strip and the header highlight; `source` says how it was picked. */
   current: {
     provider?: string
     model?: string
     /** `live` — last request seen this boot; `default` — the agent default model. */
     source: 'live' | 'default'
+    /**
+     * Resolved display name (snapshot first, route-derived otherwise), so the
+     * strip needs no name-resolution of its own. Optional so an older host
+     * document still renders.
+     */
+    displayName?: string
+    /**
+     * Today's ledger totals for the provider's adapter family (the route
+     * itself when adapter-less), carrying tokens, calls, and the priced cost.
+     * Absent on a day without usage; optional for the same older-host
+     * tolerance as displayName.
+     */
+    today?: UsageTokenTotals
   }
   usage: {
     today: { date: string; totals: UsageTokenTotals; providers: UsageProviderSummary[] }

package/src/host/access.ts

@@ -0,0 +1,21 @@
+/**
+ * Usage trust fence (issue #1592): loopback (the desktop) always passes, and a
+ * live paired-device cookie is an additional allow path when remote-web-ui is
+ * loaded — the same family fence the skill center uses. Without that service
+ * the fence stays loopback-only, so an unpaired LAN browser keeps its 403.
+ * The decision logic lives in the generated pair-access.ts copy (shared by
+ * git-graph / pet / skill-explorer).
+ */
+import type { IncomingMessage } from 'node:http'
+import type { Context } from '@deepseek-ai/cordis'
+import { isPairedOrLoopbackAllowed } from './pair-access.ts'
+
+/**
+ * Whether this request may read the usage overview or trigger a refresh.
+ * @param ctx - host context; may expose remoteWebUiPairing.
+ * @param request - the incoming HTTP request.
+ * @returns true for loopback, or a live paired-device cookie.
+ */
+export function isUsageAllowed(ctx: Context, request: IncomingMessage): boolean {
+  return isPairedOrLoopbackAllowed(ctx, request)
+}

package/src/host/pair-access.ts

@@ -0,0 +1,49 @@
+// Generated by scripts/sync-shared.mjs from shared/host/pair-access.ts. Do not edit this copy; edit the shared source and run "node scripts/sync-shared.mjs".
+/**
+ * Pairing trust fence shared by plugins that expose host routes: loopback
+ * (the desktop) always passes; a live paired-device cookie is an additional
+ * allow path when remote-web-ui is loaded. The consuming plugin never
+ * depends on that plugin — without the service the fence stays
+ * loopback-only.
+ *
+ * Per-package wrappers (access.ts) call this with their own name so each
+ * plugin keeps a self-describing export; the security decision lives only
+ * here.
+ */
+import type { IncomingMessage } from 'node:http'
+import { isLoopbackRequest } from './loopback.ts'
+
+/** Structural pairing lookup (no package dependency on remote-web-ui). */
+interface PairingAccess {
+  isPairedDevice(request: IncomingMessage): boolean
+}
+
+/**
+ * Structural host-context shape: shared sources carry no @deepseek-ai
+ * dependency (the shared package must typecheck standalone), so the fence
+ * reads only the two members it needs; cordis Context satisfies this.
+ * ctx.get is optional on the test harness; production Context always has it.
+ */
+interface LookupCtx {
+  get?(name: string, strict?: boolean): unknown
+  remoteWebUiPairing?: PairingAccess
+}
+
+/**
+ * Whether this request may enter the plugin's host routes.
+ * @param ctx - host context; may expose remoteWebUiPairing.
+ * @param request - the incoming HTTP request.
+ * @returns true for loopback, or a live paired-device cookie.
+ */
+export function isPairedOrLoopbackAllowed(ctx: LookupCtx, request: IncomingMessage): boolean {
+  if (isLoopbackRequest(request)) return true
+  const fromGet = typeof ctx.get === 'function' ? ctx.get('remoteWebUiPairing', false) : undefined
+  const pairing = (isPairingAccess(fromGet) ? fromGet : ctx.remoteWebUiPairing)
+  return pairing?.isPairedDevice(request) === true
+}
+
+function isPairingAccess(value: unknown): value is PairingAccess {
+  return value !== undefined
+    && value !== null
+    && typeof (value as PairingAccess).isPairedDevice === 'function'
+}

package/src/host/routes.ts

@@ -1,22 +1,28 @@
 import type { IncomingMessage, ServerResponse } from 'node:http'
+import type { Context } from '@deepseek-ai/cordis'
 import type { WebRoute } from '@deepseek-ai/dsh-host-webserver'
-import { isLoopbackRequest } from './loopback.ts'
+import { isUsageAllowed } from './access.ts'
 import { writeJson } from './http.ts'
 import type { UsageService } from './usage-service.ts'
 
 export const USAGE_API_PREFIX = '/api/dsh-usage'
 
 /**
- * Loopback-fenced overview route: provider balances, plan quotas, and token
- * usage totals. Personal account data, so the loopback fence mirrors
- * dsh-perf's stats surface; the browser runs on the same machine.
+ * Overview route: provider balances, plan quotas, and token usage totals.
+ * Personal account data behind the family trust fence — loopback always
+ * passes, and a live paired-device cookie passes too when remote-web-ui is
+ * loaded (issue #1592: the sidebar usage panel reads this from a paired LAN
+ * browser); every unpaired LAN request keeps its 403.
+ * @param ctx - host context; may expose remoteWebUiPairing.
+ * @param service - the usage service.
+ * @returns the route.
  */
-export function makeUsageOverviewRoute(service: UsageService): WebRoute {
+export function makeUsageOverviewRoute(ctx: Context, service: UsageService): WebRoute {
   return {
     kind: 'exact',
     path: USAGE_API_PREFIX + '/overview',
     handler: async (req: IncomingMessage, res: ServerResponse): Promise<void> => {
-      if (!isLoopbackRequest(req)) {
+      if (!isUsageAllowed(ctx, req)) {
         writeJson(res, 403, { ok: false, error: 'forbidden: loopback-only' })
         return
       }
@@ -26,15 +32,18 @@ export function makeUsageOverviewRoute(service: UsageService): WebRoute {
 }
 
 /**
- * Loopback-fenced manual refresh: forces one probe cycle now and answers
- * with the fresh overview.
+ * Manual refresh: forces one probe cycle now and answers with the fresh
+ * overview. Same trust fence as the overview route.
+ * @param ctx - host context; may expose remoteWebUiPairing.
+ * @param service - the usage service.
+ * @returns the route.
  */
-export function makeUsageRefreshRoute(service: UsageService): WebRoute {
+export function makeUsageRefreshRoute(ctx: Context, service: UsageService): WebRoute {
   return {
     kind: 'exact',
     path: USAGE_API_PREFIX + '/refresh',
     handler: async (req: IncomingMessage, res: ServerResponse): Promise<void> => {
-      if (!isLoopbackRequest(req)) {
+      if (!isUsageAllowed(ctx, req)) {
         writeJson(res, 403, { ok: false, error: 'forbidden: loopback-only' })
         return
       }