@goodandready/dsh-cost-meter 0.8.19 → 0.8.20

package/lib/client.js

@@ -98,6 +98,8 @@ window.__ModuleLoader__.load({
       'tokens.no_usage_yet': 'Provider has not reported usage for this session yet.',
       'tokens.not_priced': 'Not priced',
       'tz.invalid': 'Invalid IANA time zone identifier',
+      'sparkline.title': 'Turn dynamics',
+      'sparkline.steps': 'steps',
     }
 
     const zh = {
@@ -176,6 +178,8 @@ window.__ModuleLoader__.load({
       'tokens.no_usage_yet': '提供商尚未报告当前会话的用量数据。',
       'tokens.not_priced': '未定价',
       'tz.invalid': '无效的 IANA 时区标识',
+      'sparkline.title': '步骤动态',
+      'sparkline.steps': '步',
     }
 
     function makeT(dict, fallback) {
@@ -288,8 +292,16 @@ window.__ModuleLoader__.load({
 .dcm-total { display: flex; justify-content: space-between; font-weight: 600; font-size: 13.5px; }
 .dcm-accordion-btn { appearance: none; background: transparent; border: 0; color: var(--dsw-alias-state-brand-primary); font: inherit; font-size: 11.5px; cursor: pointer; padding: 2px 0; text-align: left; }
 .dcm-accordion-btn:hover { text-decoration: underline; }
+.dcm-sparkline-box { margin: 6px 0; padding: 8px 10px; border-radius: 8px; background: color-mix(in srgb, var(--dsw-alias-bg-layer-2) 60%, transparent); border: 1px solid var(--dsw-alias-border-l2); }
+.dcm-sparkline-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
+.dcm-sparkline-count { font-size: 11px; color: var(--dsw-alias-label-tertiary); font-variant-numeric: tabular-nums; }
+.dcm-sparkline-svg { width: 100%; height: 36px; display: block; overflow: visible; }
+.dcm-spark-bar { fill: color-mix(in srgb, var(--dsw-alias-state-brand-primary) 45%, transparent); transition: fill .15s ease; cursor: pointer; }
+.dcm-spark-bar:hover { fill: var(--dsw-alias-state-brand-primary); }
+.dcm-spark-peak { fill: var(--dsw-alias-state-brand-primary); }
 `
 
+
     function ensureStyles() {
       if (typeof document === 'undefined') return
       if (document.getElementById('dsh-cost-meter-unified-css')) return
@@ -1039,8 +1051,63 @@ window.__ModuleLoader__.load({
       return city.replace(/_/g, ' ')
     }
 
+
+    function renderSparkline(turns, options) {
+      if (!Array.isArray(turns) || turns.length === 0) return null
+      const { h, currency, fx, activeRate, t } = options
+
+      const maxTokens = Math.max(1, ...turns.map((item) => Number(item.tokens) || 0))
+      const height = 36
+      const width = 240
+      const count = turns.length
+      const gap = count > 15 ? 2 : 4
+      const barWidth = Math.max(3, Math.min(16, Math.floor((width - (count - 1) * gap) / count)))
+      const totalBarSpace = count * barWidth + (count - 1) * gap
+      const startX = Math.max(0, Math.floor((width - totalBarSpace) / 2))
+
+      const bars = turns.map((item, idx) => {
+        const tok = Number(item.tokens) || 0
+        const barHeight = Math.max(3, Math.round((tok / maxTokens) * (height - 6)))
+        const x = startX + idx * (barWidth + gap)
+        const y = height - barHeight
+        const isPeak = tok === maxTokens && tok > 0
+        const stepCost = (item.costDeltaUsd && item.costDeltaUsd > 0)
+          ? item.costDeltaUsd * fx
+          : (activeRate ? (tok / 1e6) * ((activeRate.input + activeRate.output) / 2) * fx : 0)
+
+        const tip = (t ? t('sparkline.steps') : 'step') + ' ' + (item.turn || idx + 1) +
+          (item.step ? '.' + item.step : '') + ': ' + tokens(tok) +
+          (stepCost > 0 ? ' (≈ ' + money(stepCost, currency) + ')' : '')
+
+        return h('rect', {
+          key: 'bar-' + idx,
+          x,
+          y,
+          width: barWidth,
+          height: barHeight,
+          rx: 2,
+          ry: 2,
+          className: isPeak ? 'dcm-spark-bar dcm-spark-peak' : 'dcm-spark-bar',
+        }, h('title', null, tip))
+      })
+
+      return h('div', { key: 'sparkline', className: 'dcm-sparkline-box' }, [
+        h('div', { key: 'spark-hdr', className: 'dcm-sparkline-header' }, [
+          h('span', { key: 'lbl', className: 'dcm-section-lbl' }, t ? t('sparkline.title') : 'Turn dynamics'),
+          h('span', { key: 'cnt', className: 'dcm-sparkline-count' }, count + ' ' + (t ? t('sparkline.steps') : 'steps')),
+        ]),
+        h('svg', {
+          key: 'spark-svg',
+          viewBox: '0 0 ' + width + ' ' + height,
+          className: 'dcm-sparkline-svg',
+          preserveAspectRatio: 'xMidYMid meet',
+        }, bars),
+      ])
+    }
+
     // ------------------------------------------------------------ CostMeter
 
+
     function CostMeter(props) {
       const ctx = props.ctx
       const locale = useActiveLocale(ctx)
@@ -1048,6 +1115,7 @@ window.__ModuleLoader__.load({
       const useProjection = props.useProjection
       const usage = useProjection ? useProjection('tokenUsage') : undefined
       const byModel = useProjection ? useProjection('costByModel') : undefined
+      const turns = (byModel?.turns && byModel.turns.length > 0) ? byModel.turns : (state?.turns || [])
       const [state, setState] = React.useState(null)
       const [open, setOpen] = React.useState(false)
       const [now, setNow] = React.useState(() => new Date())

package/lib/projection.js

@@ -3,6 +3,18 @@ import { z as zod } from 'zod'
 
 export const ZERO = { uncachedInputTokens: 0, outputTokens: 0, cacheReadTokens: 0, cacheWriteTokens: 0 }
 
+export const MAX_TURNS_HISTORY = 30
+
+let lastSessionTurns = []
+
+export function getLastTurns() {
+  return lastSessionTurns.slice(-MAX_TURNS_HISTORY)
+}
+
+export function resetLastTurns() {
+  lastSessionTurns = []
+}
+
 export const bucketSchema = zod.object({
   uncachedInputTokens: zod.number().nonnegative(),
   outputTokens: zod.number().nonnegative(),
@@ -10,6 +22,18 @@ export const bucketSchema = zod.object({
   cacheWriteTokens: zod.number().nonnegative(),
 }).strict()
 
+export const turnRecordSchema = zod.object({
+  turn: zod.number().int().nonnegative(),
+  step: zod.number().int().nonnegative().optional(),
+  tokens: zod.number().nonnegative(),
+  uncachedInputTokens: zod.number().nonnegative().optional(),
+  outputTokens: zod.number().nonnegative().optional(),
+  cacheReadTokens: zod.number().nonnegative().optional(),
+  cacheWriteTokens: zod.number().nonnegative().optional(),
+  costDeltaUsd: zod.number().nonnegative().optional(),
+  timestamp: zod.number().nonnegative(),
+}).passthrough()
+
 /** Pull the four buckets out of one provider usage record. */
 export function bucketsFromUsage(usage) {
   return {
@@ -67,6 +91,7 @@ export const costByModelViewSchema = zod.object({
     model: zod.string(),
     slots: modelSlotsSchema,
   }).strict()),
+  turns: zod.array(turnRecordSchema).optional(),
 }).strict()
 
 export const costByModelStateSchema = zod.object({
@@ -82,6 +107,7 @@ export const costByModelStateSchema = zod.object({
     slot: zod.string(),
     buckets: bucketSchema,
   }).nullable(),
+  turns: zod.array(turnRecordSchema).optional(),
 }).strict()
 
 export const usageByModelProjection = {
@@ -113,6 +139,47 @@ export const usageByModelProjection = {
         ? state.last.buckets
         : undefined
     if (previous !== undefined && sameBuckets(previous, buckets)) return state
+
+    // Track turns history capped to MAX_TURNS_HISTORY
+    const turnNum = typeof sample.turn === 'number' ? sample.turn : 0
+    const stepNum = typeof sample.step === 'number' ? sample.step : 0
+    const totalTokens = buckets.uncachedInputTokens + buckets.outputTokens + buckets.cacheReadTokens + buckets.cacheWriteTokens
+    const timestamp = (typeof event.time === 'number' && Number.isFinite(event.time))
+      ? event.time
+      : (event.time instanceof Date && !Number.isNaN(event.time.getTime()) ? event.time.getTime() : Date.now())
+
+    const currentTurns = Array.isArray(state.turns) ? state.turns : []
+    const existingIndex = currentTurns.findIndex((t) => t.turn === turnNum && t.step === stepNum)
+    let nextTurns
+    if (existingIndex >= 0) {
+      nextTurns = currentTurns.slice()
+      nextTurns[existingIndex] = {
+        turn: turnNum,
+        step: stepNum,
+        tokens: totalTokens,
+        uncachedInputTokens: buckets.uncachedInputTokens,
+        outputTokens: buckets.outputTokens,
+        cacheReadTokens: buckets.cacheReadTokens,
+        cacheWriteTokens: buckets.cacheWriteTokens,
+        costDeltaUsd: nextTurns[existingIndex].costDeltaUsd || 0,
+        timestamp,
+      }
+    } else {
+      const newEntry = {
+        turn: turnNum,
+        step: stepNum,
+        tokens: totalTokens,
+        uncachedInputTokens: buckets.uncachedInputTokens,
+        outputTokens: buckets.outputTokens,
+        cacheReadTokens: buckets.cacheReadTokens,
+        cacheWriteTokens: buckets.cacheWriteTokens,
+        costDeltaUsd: 0,
+        timestamp,
+      }
+      nextTurns = [...currentTurns, newEntry].slice(-MAX_TURNS_HISTORY)
+    }
+    lastSessionTurns = nextTurns
+
     const slots = state.byKey[key] || {}
     return {
       route: state.route,
@@ -121,6 +188,7 @@ export const usageByModelProjection = {
         [key]: { ...slots, [slot]: addBuckets(slots[slot] || ZERO, previous, buckets) },
       },
       last: { turn: sample.turn, step: sample.step, key, slot, buckets },
+      turns: nextTurns,
     }
   },
   wire: {
@@ -134,6 +202,7 @@ export const usageByModelProjection = {
           slots: state.byKey[key],
         }
       }),
+      ...(state.turns && state.turns.length ? { turns: state.turns } : {}),
     }),
   },
-}
+}

package/lib/routes.js

@@ -1,6 +1,7 @@
 // dsh-cost-meter — HTTP routes registration for webServer service.
 import { createHash } from 'node:crypto'
 import { registerPluginUpdater } from './updater.js'
+import { getLastTurns } from './projection.js'
 
 export const STATE_PATH = '/dsh-cost-meter/state'
 export const REFRESH_PATH = '/dsh-cost-meter/refresh'
@@ -102,6 +103,7 @@ export function registerRoutes(ctx, options) {
             source: own.source,
             matchedId: own.matchedId,
             schedules,
+            turns: getLastTurns(),
             fetchedAt: catalog.fetchedAt || null,
             catalogError: catalog.error,
             catalogModelsCount: Object.keys((catalog.index && catalog.index.byId) || {}).length,
@@ -139,5 +141,4 @@ export function registerRoutes(ctx, options) {
       manifestUrl: new URL('../package.json', import.meta.url),
     }), 'dsh-cost-meter: updater')
   }
-}
-
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@goodandready/dsh-cost-meter",
-  "version": "0.8.19",
+  "version": "0.8.20",
   "description": "DeepSeek Harness plugin: a session cost chip in the conversation header - live token usage by bucket, peak/off-peak tariff, and a countdown to the next tariff switch.",
   "type": "module",
   "main": "lib/index.js",