dsh-model-billing 0.3.1 → 0.3.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## [0.3.2] - 2026-11-05
+
+### 变更
+
+- 费用统计改为读取 Session 投影，不再调用已弃用的同步会话事件读取接口（DSH 0.2.2 起标记弃用，后续大版本可能移除）；费用数字与直接折叠会话日志的结果一致。
+- 切换模型或推理强度被拒绝时，改为菜单内浮层提示并自动消失，菜单不再因错误信息被撑高；模型目录本身加载失败时仍保留内联错误与「重新加载」按钮。
+
+### Changed
+
+- Cost estimation now reads a Session projection instead of the deprecated synchronous session-event readers (deprecated since DSH 0.2.2 and removable in a later major version); the reported cost matches folding the session log directly.
+- A rejected model or reasoning-effort switch now shows a self-dismissing overlay inside the picker instead of an inline error that grew the menu; a failed model-catalog load still shows the inline error with its retry button.
+
 ## [0.3.1] - 2026-11-05
 
 ### 变更

package/client.js

@@ -751,7 +751,12 @@ window.__ModuleLoader__.load({
       .mb-picker-search::placeholder { color: var(--dsw-alias-label-caption, var(--dsw-alias-label-secondary)); }
       .mb-picker-search:focus { border-color: var(--dsw-alias-state-business-primary); outline: none; }
       .mb-picker-list { min-height: 0; overflow-y: auto; padding: 0 2px; display: flex; flex-direction: column; }
-      .mb-picker-group { color: var(--dsw-alias-label-tertiary, var(--dsw-alias-label-secondary)); background: var(--dsw-alias-menu-group-header-fill, var(--dsw-menu-surface-fill, var(--dsw-alias-bg-layer-1))); position: sticky; top: 0; z-index: 1; margin-top: 2px; padding: 10px 10px 6px; font-size: 11px; font-weight: 500; line-height: 16px; }
+      .mb-picker-group { color: var(--dsw-alias-label-tertiary, var(--dsw-alias-label-secondary)); background: var(--dsw-alias-menu-group-header-fill, var(--dsw-menu-surface-fill, var(--dsw-alias-bg-layer-1))); position: sticky; top: 0; z-index: 1; margin-top: 2px; padding: 5px 10px; font-size: 11px; font-weight: 500; line-height: 16px; }
+      /* The first group header opens the list, so the menu's own padding already
+         separates it from the top edge; it only drops the inter-group lead-in.
+         A negative margin cannot do this: the list is a scroll container, and the
+         overflow clip eats any lead-in that leaves its scrollport. */
+      .mb-picker-group:first-child { margin-top: 0; }
       .mb-picker-row { box-sizing: border-box; border-radius: var(--dsw-radius-md); width: auto; min-width: 100%; color: inherit; text-align: left; cursor: pointer; background: 0 0; border: none; outline: none; align-items: center; gap: 8px; padding: 10px; font: inherit; display: flex; }
       .mb-picker-row + .mb-picker-row { margin-top: 2px; }
       .mb-picker-row:hover:not(:disabled), .mb-picker-row:focus-visible { background: var(--dsw-alias-interactive-bg-hover); }
@@ -773,6 +778,9 @@ window.__ModuleLoader__.load({
       .mb-picker-error { border-radius: var(--dsw-radius-md); background: var(--dsw-alias-interactive-bg-hover-danger); color: var(--dsw-alias-state-error-primary); margin-bottom: 3px; padding: 6px 7px; font-size: 11px; line-height: 16px; }
       .mb-picker-retry { align-self: flex-start; margin: 0 4px 2px; }
       .mb-picker-status { color: var(--dsw-alias-label-tertiary, var(--dsw-alias-label-secondary)); padding: 4px 7px; font-size: 11px; line-height: 16px; }
+      .mb-picker-dot { width: 12px; height: 12px; border: 2px solid var(--dsw-alias-state-business-primary); border-right-color: transparent; border-radius: 50%; flex: none; animation: mb-picker-spin .7s linear infinite; }
+      @keyframes mb-picker-spin { to { transform: rotate(360deg); } }
+      .mb-picker-toast { position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 3; border-radius: var(--dsw-radius-md); background: var(--dsw-alias-state-error-primary); color: #fff; padding: 7px 9px; font-size: 12px; line-height: 16px; box-shadow: var(--dsw-elevation-prominent); }
       .mb-fatal { border: 1px solid var(--dsw-alias-state-error-primary); color: var(--dsw-alias-state-error-primary); border-radius: 8px; padding: 12px; }
       @media (max-width: 720px) {
         .mb-price-grid { grid-template-columns: 1fr; }
@@ -1758,7 +1766,10 @@ window.__ModuleLoader__.load({
       const [open, setOpen] = useState(false)
       const [query, setQuery] = useState('')
       const [selecting, setSelecting] = useState(false)
-      const [failure, setFailure] = useState(null)
+      // The route being submitted, so its row can show a pending spinner, and a
+      // transient rejection message that must not push the list around.
+      const [pending, setPending] = useState(null)
+      const [toast, setToast] = useState(null)
       const [menuPos, setMenuPos] = useState(null)
       // Roving cursor for arrow-key navigation inside the model list.
       const [activeIndex, setActiveIndex] = useState(0)
@@ -1816,6 +1827,13 @@ window.__ModuleLoader__.load({
         if (locked && open) setOpen(false)
       }, [locked, open])
 
+      // A rejection toast clears itself; the menu is not blocked while it shows.
+      useEffect(() => {
+        if (toast === null) return undefined
+        const timer = setTimeout(() => setToast(null), 4200)
+        return () => clearTimeout(timer)
+      }, [toast])
+
       const rank = useMemo(() => {
         const map = new Map()
         for (const model of catalogSnap.data?.models ?? []) {
@@ -1952,14 +1970,15 @@ window.__ModuleLoader__.load({
       const close = (restoreFocus) => {
         setOpen(false)
         setQuery('')
-        setFailure(null)
+        setToast(null)
         if (restoreFocus) queueMicrotask(() => triggerRef.current?.focus())
       }
 
       const submit = async (selection) => {
         if (busy) return
         setSelecting(true)
-        setFailure(null)
+        setToast(null)
+        setPending(selection)
         try {
           const result = directory !== null
             ? await directory.select(selection)
@@ -1969,14 +1988,16 @@ window.__ModuleLoader__.load({
               body: JSON.stringify({ sessionId, ...selection }),
             })
           if (result?.ok === false) {
-            setFailure(result.error?.message ?? translate('pickerEmpty'))
+            // A refusal is a toast: the list stays where the user left it.
+            setToast(result.error?.message ?? translate('pickerEmpty'))
             return
           }
           close(true)
         } catch (error) {
-          setFailure(error instanceof Error ? error.message : String(error))
+          setToast(error instanceof Error ? error.message : String(error))
         } finally {
           setSelecting(false)
+          setPending(null)
         }
       }
 
@@ -2006,7 +2027,7 @@ window.__ModuleLoader__.load({
           close(true)
           return
         }
-        setFailure(null)
+        setToast(null)
         // Open the cursor on the row the user is already using, when there is one.
         const selectedAt = filtered.findIndex((entry) => entry.group.id === current?.provider && entry.model.id === current?.model)
         setActiveIndex(selectedAt < 0 ? 0 : selectedAt)
@@ -2022,7 +2043,6 @@ window.__ModuleLoader__.load({
           maxHeight: menuPos.maxHeight,
           ...menuPos.top === undefined ? { bottom: menuPos.bottom } : { top: menuPos.top },
         }
-      const errorText = failure ?? (state?.status === 'error' ? state.error : null)
 
       // Arrow keys move a roving cursor through the list. Enter and Space are
       // left to the focused row itself, so a <button> keeps its native
@@ -2123,18 +2143,20 @@ window.__ModuleLoader__.load({
                     h('span', { className: 'mb-picker-model' }, entry.model.name),
                     h(PriceLines, { pricing: price, translate })),
                   h('span', { className: 'mb-picker-check' },
-                    selected
-                      ? h('svg', {
-                        viewBox: '0 0 16 16',
-                        width: 14,
-                        height: 14,
-                        fill: 'none',
-                        stroke: 'currentColor',
-                        strokeWidth: 1.7,
-                        'aria-hidden': true,
-                      },
-                        h('path', { d: 'M3.5 8.5l3 3 6-7' }))
-                      : null)))
+                    pending !== null && pending.provider === entry.group.id && pending.model === entry.model.id
+                      ? h('span', { className: 'mb-picker-dot', 'aria-hidden': true })
+                      : selected
+                        ? h('svg', {
+                          viewBox: '0 0 16 16',
+                          width: 14,
+                          height: 14,
+                          fill: 'none',
+                          stroke: 'currentColor',
+                          strokeWidth: 1.7,
+                          'aria-hidden': true,
+                        },
+                          h('path', { d: 'M3.5 8.5l3 3 6-7' }))
+                        : null)))
             })),
         effortChoices.length === 0 ? null : h(Fragment, null,
           h('div', { className: 'mb-picker-divider' }),
@@ -2149,13 +2171,15 @@ window.__ModuleLoader__.load({
               onClick: () => chooseEffort(choice.effort),
             }, choice.label)))),
         busy ? h('div', { className: 'mb-picker-status' }, translate('switching')) : null,
-        errorText === null ? null : h('div', { className: 'mb-picker-error' }, errorText),
+        toast === null ? null : h('div', { className: 'mb-picker-toast', role: 'status', 'aria-live': 'polite' }, toast),
+        state?.status === 'error'
+          ? h('div', { className: 'mb-picker-error' }, state.error)
+          : null,
         state?.status === 'error'
           ? h('button', {
             type: 'button',
             className: 'mb-btn mb-picker-retry',
             onClick: () => {
-              setFailure(null)
               directory.load().catch(() => {})
             },
           }, translate('pickerRetry'))

package/host.js

@@ -1139,6 +1139,9 @@ export function apply(ctx) {
   const onSelect = (request, response) => {
     void serveSelect(ctx, request, response).catch((error) => fail(ctx, response, error))
   }
+  // Register the samples projection before the routes: the unit folds lazily for
+  // sessions that already existed, and drives every later event eagerly.
+  void billingProjectionHandle(ctx)
   ctx.effect(() => ctx.webServer.register({ kind: 'exact', path: CATALOG_PATH, handler: onCatalog }), 'model-billing: catalog route')
   ctx.effect(() => ctx.webServer.register({ kind: 'exact', path: USAGE_PATH, handler: onUsage }), 'model-billing: usage route')
   ctx.effect(() => ctx.webServer.register({ kind: 'exact', path: SAVE_PATH, handler: onSave }), 'model-billing: save route')
@@ -1161,6 +1164,156 @@ function wantsRefresh(request) {
   }
 }
 
+// ---------------------------------------------------------------------------
+// Billing samples
+//
+// `session.ownEvents()` / `snapshotEvents()` are synchronous log reads that
+// 0.2.2 deprecates for production use, so the fold is fed by a session
+// projection instead: the registry drives it per committed event, folds the log
+// lazily for sessions that predate the registration, and checkpoints it with
+// every other unit. The state keeps a trimmed copy of each billing-relevant
+// event rather than the durable log, because the fold only reads a few fields.
+// ---------------------------------------------------------------------------
+
+const BILLING_SAMPLES_KEY = 'model-billing/samples'
+const BILLING_SAMPLES_VERSION = 1
+
+/** The last usage chunk of a durable assistant stream, kept alone. */
+function usageStreamRecord(stream) {
+  if (!Array.isArray(stream)) return undefined
+  for (let index = stream.length - 1; index >= 0; index -= 1) {
+    const record = stream[index]
+    if (record?.type === 'chunk' && record.chunk?.type === 'usage') {
+      return { type: 'chunk', time: record.time, chunk: { type: 'usage', usage: record.chunk.usage } }
+    }
+  }
+  return undefined
+}
+
+/** One committed event trimmed to the fields `computeSessionUsage` reads. */
+function billingSample(event) {
+  const seq = event?.seq
+  const time = event?.time
+  switch (event?.type) {
+    case 'turn/start':
+    case 'turn/end':
+      return { type: event.type, seq, time, data: { turn: event.data?.turn } }
+    case 'user/message': {
+      const content = Array.isArray(event.data?.content)
+        ? event.data.content.filter((block) => block?.type === 'text').map((block) => ({ type: 'text', text: block.text }))
+        : []
+      return { type: 'user/message', seq, time, data: { content } }
+    }
+    case 'request/header': {
+      const config = event.data?.header?.config
+      return { type: 'request/header', seq, time, data: { header: { config: { provider: config?.provider, model: config?.model } } } }
+    }
+    case 'assistant/message': {
+      const source = event.data?.message?.source
+      const usage = event.data?.usage
+      const record = usageStreamRecord(event.data?.stream)
+      return {
+        type: 'assistant/message',
+        seq,
+        time,
+        data: {
+          turn: event.data?.turn,
+          message: { source: { provider: source?.provider, model: source?.model } },
+          ...usage === undefined || usage === null ? {} : { usage },
+          ...record === undefined ? {} : { stream: [record] },
+        },
+      }
+    }
+    case 'assistant/attempt': {
+      const record = usageStreamRecord(event.data?.stream)
+      return {
+        type: 'assistant/attempt',
+        seq,
+        time,
+        // `turn` is what the fold keys the attempt on; without it the sample is dropped.
+        data: { turn: event.data?.turn, step: event.data?.step, ...record === undefined ? {} : { stream: [record] } },
+      }
+    }
+    case 'tool/call':
+      return { type: 'tool/call', seq, time, data: { turn: event.data?.turn, callId: event.data?.callId, name: event.data?.name } }
+    case 'tool/result': {
+      const message = event.data?.message
+      const error = event.data?.error
+      const meta = event.data?.meta
+      return {
+        type: 'tool/result',
+        seq,
+        time,
+        data: {
+          turn: event.data?.turn,
+          ...message === undefined ? {} : { message: { toolCallId: message?.toolCallId, isError: message?.isError } },
+          ...error === undefined ? {} : { error },
+          ...meta === undefined ? {} : { meta },
+        },
+      }
+    }
+    default:
+      return undefined
+  }
+}
+
+/** Shape check for checkpoint restores; the plugin ships no zod, so it is hand-rolled. */
+const billingSamplesSchema = {
+  parse(value) {
+    if (value === null || typeof value !== 'object' || !Array.isArray(value.samples)) {
+      throw new TypeError('model-billing: unexpected samples projection state')
+    }
+    return value
+  },
+}
+
+const billingSamplesProjection = {
+  key: BILLING_SAMPLES_KEY,
+  stateVersion: BILLING_SAMPLES_VERSION,
+  stateSchema: billingSamplesSchema,
+  init(header, inheritedEventCount) {
+    return { inheritedCut: Number(inheritedEventCount) || 0, samples: [] }
+  },
+  apply(state, event) {
+    // A fork child owns only the events after its inherited prefix; the prefix
+    // was already billed in the session it came from.
+    if (typeof event?.seq === 'number' && event.seq < state.inheritedCut) return state
+    const sample = billingSample(event)
+    if (sample === undefined) return state
+    return { inheritedCut: state.inheritedCut, samples: [...state.samples, sample] }
+  },
+}
+
+const billingProjectionPromises = new WeakMap()
+
+/**
+ * The billing projection handle for one Host context, or null on a Harness that
+ * predates `sessionProjections`. Registration is memoized per context.
+ */
+function billingProjectionHandle(ctx) {
+  const cached = billingProjectionPromises.get(ctx)
+  if (cached !== undefined) return cached
+  let service
+  try {
+    service = ctx?.get?.('sessionProjections')
+  } catch {
+    service = undefined
+  }
+  const promise = service?.register === undefined
+    ? Promise.resolve(null)
+    : Promise.resolve(service.register(billingSamplesProjection)).catch(() => null)
+  billingProjectionPromises.set(ctx, promise)
+  return promise
+}
+
+/** The billing samples of one session, from the projection or the log on old hosts. */
+async function sessionBillingSamples(ctx, session) {
+  const handle = await billingProjectionHandle(ctx)
+  if (handle !== null && handle !== undefined) return handle.stateOf(session).samples
+  if (typeof session.snapshotEvents === 'function') return session.snapshotEvents(session.inheritedEventCount)
+  return session.ownEvents()
+}
+
 const USAGE_CACHE_LIMIT = 50
 const usageCache = new Map()
 
@@ -1203,7 +1356,7 @@ async function serveUsage(ctx, request, response) {
     return sendJson(response, 404, { ok: false, code: 'session-not-found', message: 'this Session is not loaded in the Host' })
   }
   const state = await loadState(ctx)
-  const events = session.ownEvents()
+  const events = await sessionBillingSamples(ctx, session)
   const lastSeq = Array.isArray(events) && events.length > 0 ? events[events.length - 1]?.seq : undefined
   const billing = webToolBilling(ctx)
   const webKey = `${billing.search ?? 'free'}:${billing.fetch ?? 'free'}:${billing.start}`
@@ -1362,6 +1515,8 @@ function messageOf(error) {
 export const __test = {
   applySavedOrder,
   authorityOf,
+  billingSample,
+  billingSamplesProjection,
   builtinRatesFor,
   buildCatalog,
   catalogPricing,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-model-billing",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "type": "module",
   "description": "Reorder models in the DSH composer picker, store three per-million-token prices, and estimate per-turn and session cost with built-in DeepSeek peak/off-peak rates.",
   "keywords": [