@goodandready/dsh-cost-meter 0.8.27 → 0.8.29

package/lib/analytics.js

@@ -90,4 +90,59 @@ export function calculateBurnRateAndProjection(turns, totalCostUsd, options = {}
     projectedCostUsd,
     confidence,
   }
-}
+}
+
+/**
+ * Returns estimated context window token limit for model identifier.
+ */
+export function getFallbackContextLength(model) {
+  const m = String(model || '').toLowerCase()
+  if (m.includes('claude-3-5') || m.includes('claude-3-7') || m.includes('claude-3-opus')) return 200000
+  if (m.includes('claude')) return 200000
+  if (m.includes('gemini-1.5') || m.includes('gemini-2.0') || m.includes('gemini-exp')) return 1000000
+  if (m.includes('gpt-4.1') || m.includes('gpt-4o') || m.includes('o1') || m.includes('o3')) return 128000
+  if (m.includes('qwen-2.5') || m.includes('qwq')) return 128000
+  if (m.includes('deepseek')) return 128000
+  return 128000
+}
+
+/**
+ * Calculates context window saturation metrics and compaction risk.
+ *
+ * @param {Array<{ turn: number, uncachedInputTokens?: number, cacheReadTokens?: number }>} turns
+ * @param {object} [tariff]
+ * @param {object} [route]
+ * @returns {{ currentTokens: number, contextLength: number, saturationPercent: number, riskLevel: 'low' | 'moderate' | 'high', nextTurnEstUsd: number }}
+ */
+export function calculateContextMetrics(turns, tariff, route) {
+  const lastTurn = (Array.isArray(turns) && turns.length > 0) ? turns[turns.length - 1] : null
+  const currentTokens = lastTurn
+    ? (Number(lastTurn.uncachedInputTokens || 0) + Number(lastTurn.cacheReadTokens || 0))
+    : 0
+
+  const contextLength = (tariff && Number(tariff.contextLength)) || getFallbackContextLength(route?.model)
+  const saturationPercent = contextLength > 0
+    ? Math.min(100, Math.round((currentTokens / contextLength) * 100))
+    : 0
+
+  let riskLevel = 'low'
+  if (saturationPercent >= 80) {
+    riskLevel = 'high'
+  } else if (saturationPercent >= 50) {
+    riskLevel = 'moderate'
+  }
+
+  const rates = tariff?.schedule?.base || {}
+  const inputRate = Number(rates.input) || 0.14
+  const nextTurnEstUsd = currentTokens > 0
+    ? Number(((currentTokens * inputRate) / 1e6).toFixed(6))
+    : 0
+
+  return {
+    currentTokens,
+    contextLength,
+    saturationPercent,
+    riskLevel,
+    nextTurnEstUsd,
+  }
+}

package/lib/client.js

@@ -91,6 +91,25 @@ window.__ModuleLoader__.load({
       'turn.modal_title': 'Message Token & Cost Inspector',
       'turn.tokens_total': 'Turn Tokens',
       'turn.cost_title': 'Turn Cost',
+      'turn.reasoning': 'Thinking / Reasoning',
+      'context.title': 'Context Window',
+      'context.saturation': 'Context Saturation',
+      'context.risk_low': 'Healthy',
+      'context.risk_moderate': 'Moderate',
+      'context.risk_high': 'Compaction Risk',
+      'context.next_turn': 'Next turn base: ≈ {cost}',
+      'context.compaction_warning': 'Context saturation over 80%. High compaction and prompt fee risk.',
+
+      'privacy.toggle': 'Streamer / Privacy Mode',
+      'privacy.enabled': 'Privacy mode active (amounts masked)',
+      'field.privacyMode': 'Privacy / Streamer Mode',
+      'hint.privacyMode': 'Mask currency amounts with asterisks to safely share screens or recordings.',
+      'field.showHeaderChip': 'Show Cost Chip in Header',
+      'hint.showHeaderChip': 'Display the live cost meter chip in the chat conversation header.',
+      'field.showMessageAction': 'Show Token Inspector on Messages',
+      'hint.showMessageAction': 'Display the lightning token inspector button on assistant messages.',
+      'notice.hidden_access': 'Cost metering is active in background. Full statistics and session data remain available in this settings panel and via the /cost command.',
+
       'turn.cache_hit_rate': 'Cache Hit',
       'turn.duration': 'Duration',
       'turn.uncached_in': 'Uncached Input',
@@ -209,6 +228,25 @@ window.__ModuleLoader__.load({
       'turn.modal_title': '单次回复 Token 与成本详情',
       'turn.tokens_total': '本轮 Token 总量',
       'turn.cost_title': '单次成本',
+      'turn.reasoning': '思考推理 Token',
+      'context.title': '上下文窗口',
+      'context.saturation': '上下文饱和度',
+      'context.risk_low': '充足',
+      'context.risk_moderate': '适中',
+      'context.risk_high': '压缩风险',
+      'context.next_turn': '下轮基础成本：≈ {cost}',
+      'context.compaction_warning': '上下文占用超过 80%，存在压缩丢忆与费用激增风险。',
+
+      'privacy.toggle': '主播/隐私模式',
+      'privacy.enabled': '隐私模式已开启（金额已隐藏）',
+      'field.privacyMode': '隐私/主播模式',
+      'hint.privacyMode': '隐藏所有金额显示（替换为星号），便于录屏、直播或截图分享。',
+      'field.showHeaderChip': '在顶部显示消费小组件',
+      'hint.showHeaderChip': '在对话顶部标题栏显示实时费用与费率倒计时小组件。',
+      'field.showMessageAction': '在单条消息旁显示 Token 详情按钮',
+      'hint.showMessageAction': '在助手回复的消息操作栏中显示闪电 Token 详情按钮。',
+      'notice.hidden_access': '后台费用计量与记录正常运行。即使隐藏顶部组件，仍可在此设置面板或通过 /cost 命令随时查看完整统计。',
+
       'turn.cache_hit_rate': '缓存命中率',
       'turn.duration': '耗时',
       'turn.uncached_in': '未命中输入',
@@ -381,6 +419,19 @@ window.__ModuleLoader__.load({
 .dcm-proj-item { display: inline-flex; align-items: center; gap: 4px; }
 .dcm-proj-val { font-weight: 600; color: var(--dsw-alias-label-primary); font-variant-numeric: tabular-nums; }
 
+.dcm-odometer { display: inline-block; font-variant-numeric: tabular-nums; transition: transform 0.15s ease-out; }
+@media (prefers-reduced-motion: reduce) { .dcm-odometer { transition: none !important; } }
+.dcm-context-gauge { margin: 8px 0; padding: 8px 10px; border-radius: 6px; background: color-mix(in srgb, var(--dsw-alias-bg-layer-2) 60%, transparent); border: 1px solid var(--dsw-alias-border-l2); display: flex; flex-direction: column; gap: 5px; }
+.dcm-context-header { display: flex; justify-content: space-between; align-items: center; font-size: 11px; }
+.dcm-context-bar-bg { width: 100%; height: 5px; border-radius: 3px; background: color-mix(in srgb, var(--dsw-alias-bg-layer-2) 90%, transparent); overflow: hidden; }
+.dcm-context-bar-fill { height: 100%; border-radius: 3px; transition: width 0.3s ease-out; }
+.dcm-context-footer { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--dsw-alias-label-secondary); }
+.dcm-risk-badge { padding: 1px 5px; border-radius: 8px; font-size: 10px; font-weight: 500; }
+.dcm-risk-low { background: color-mix(in srgb, var(--dsw-alias-state-success-primary) 15%, transparent); color: var(--dsw-alias-state-success-primary); }
+.dcm-risk-moderate { background: color-mix(in srgb, var(--dsw-alias-state-warning-primary) 15%, transparent); color: var(--dsw-alias-state-warning-primary); }
+.dcm-risk-high { background: color-mix(in srgb, var(--dsw-alias-state-danger-primary) 15%, transparent); color: var(--dsw-alias-state-danger-primary); }
+
+
 .dcm-chip-alert-peak { box-shadow: 0 0 0 2px color-mix(in srgb, var(--dsw-alias-state-warning-primary) 50%, transparent); animation: dcm-pulse-peak 2s infinite ease-in-out; }
 .dcm-chip-alert-offpeak { box-shadow: 0 0 0 2px color-mix(in srgb, var(--dsw-alias-state-success-primary) 50%, transparent); animation: dcm-pulse-offpeak 2s infinite ease-in-out; }
 @keyframes dcm-pulse-peak { 0%, 100% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--dsw-alias-state-warning-primary) 30%, transparent); } 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--dsw-alias-state-warning-primary) 70%, transparent); } }
@@ -700,6 +751,9 @@ window.__ModuleLoader__.load({
             alertBeforeSwitch: stored.alertBeforeSwitch !== undefined ? Boolean(stored.alertBeforeSwitch) : true,
             alertLeadMinutes: stored.alertLeadMinutes !== undefined ? String(stored.alertLeadMinutes) : '5',
             browserNotifications: stored.browserNotifications !== undefined ? Boolean(stored.browserNotifications) : false,
+            privacyMode: stored.privacyMode !== undefined ? Boolean(stored.privacyMode) : false,
+            showHeaderChip: stored.showHeaderChip !== undefined ? Boolean(stored.showHeaderChip) : true,
+            showMessageAction: stored.showMessageAction !== undefined ? Boolean(stored.showMessageAction) : true,
             useOpenRouter: stored.useOpenRouter !== undefined ? Boolean(stored.useOpenRouter) : true,
             refreshHours: stored.refreshHours !== undefined ? String(stored.refreshHours) : '24',
           })
@@ -1207,13 +1261,64 @@ window.__ModuleLoader__.load({
       return str
     }
 
+    function useAnimatedNumber(target, enabled = true) {
+      const [display, setDisplay] = React.useState(target)
+      const animRef = React.useRef(null)
+      const currentRef = React.useRef(target)
+
+      React.useEffect(() => {
+        const prefersReduced = typeof window !== 'undefined' &&
+          window.matchMedia &&
+          window.matchMedia('(prefers-reduced-motion: reduce)').matches
+
+        if (prefersReduced || !enabled || typeof target !== 'number' || isNaN(target)) {
+          currentRef.current = target
+          setDisplay(target)
+          return
+        }
+
+        const start = currentRef.current
+        const diff = target - start
+        if (Math.abs(diff) < 0.00001) return
+
+        const duration = Math.min(800, Math.max(300, Math.abs(diff) * 1000))
+        const startTime = performance.now()
+
+        const step = (now) => {
+          const elapsed = now - startTime
+          const progress = Math.min(1, elapsed / duration)
+          const ease = 1 - Math.pow(1 - progress, 3)
+          const current = start + diff * ease
+          currentRef.current = current
+          setDisplay(current)
+
+          if (progress < 1) {
+            animRef.current = requestAnimationFrame(step)
+          } else {
+            currentRef.current = target
+            setDisplay(target)
+          }
+        }
+
+        if (animRef.current) cancelAnimationFrame(animRef.current)
+        animRef.current = requestAnimationFrame(step)
+
+        return () => {
+          if (animRef.current) cancelAnimationFrame(animRef.current)
+        }
+      }, [target, enabled])
+
+      return display
+    }
+
     function rate(value) {
       if (!value) return '—'
       const text = value < 0.1 ? value.toFixed(3) : value.toFixed(2)
       return '$' + text.replace(/(\\.\\d*?)0+$/, '$1').replace(/\\.$/, '')
     }
 
-    function money(value, currency) {
+    function money(value, currency, privacy = false) {
+      if (privacy) return currency + '••••'
       const n = Number(value) || 0
       return currency + n.toFixed(Math.abs(n) >= 100 ? 0 : 2)
     }
@@ -1309,7 +1414,7 @@ window.__ModuleLoader__.load({
 
         const tip = (t ? t('sparkline.steps') : 'step') + ' ' + (item.turn || idx + 1) +
           (item.step ? '.' + item.step : '') + ': ' + tokens(tok) +
-          (stepCost > 0 ? ' (≈ ' + money(stepCost, currency) + ')' : '')
+          (stepCost > 0 ? ' (≈ ' + money(stepCost, currency, isPrivacy) + ')' : '')
 
         return h('rect', {
           key: 'bar-' + idx,
@@ -1474,6 +1579,16 @@ window.__ModuleLoader__.load({
       const locale = useActiveLocale(ctx)
       const t = props.t || makeT(locale === 'zh' ? zh : en, en)
       const [open, setOpen] = React.useState(false)
+      const configForms = getSettingsScope(ctx)
+      const scope = React.useMemo(() => (configForms ? configForms.get(NS) : undefined), [configForms])
+      const snapshot = React.useSyncExternalStore(
+        React.useMemo(() => (cb) => (scope ? scope.subscribe(cb) : () => {}), [scope]),
+        React.useCallback(() => (scope ? scope.getSnapshot() : { status: 'loading' }), [scope]),
+        React.useCallback(() => ({ status: 'loading' }), []),
+      )
+      const stored = (snapshot && snapshot.value) || {}
+      if (stored.showMessageAction === false) return null
+
       const useProjection = props.useProjection || (ctx && ctx.useProjection)
       const byModel = useProjection ? useProjection('costByModel') : undefined
 
@@ -1501,6 +1616,8 @@ window.__ModuleLoader__.load({
         : (uncached + hit > 0 ? Math.round((hit / (uncached + hit)) * 100) : 0)
       const durMs = Number(tr.durationMs) || 0
       const cost = Number(tr.costDeltaUsd) || 0
+      const reasoning = Number(tr.reasoningTokens) || 0
+      const isPrivacy = Boolean(stored.privacyMode)
 
       const fmtDur = (ms) => {
         if (!ms || ms <= 0) return '0s'
@@ -1515,7 +1632,7 @@ window.__ModuleLoader__.load({
           key: 'btn',
           type: 'button',
           className: 'dcm-msg-action-btn',
-          title: t('turn.modal_title'),
+          title: t('turn.modal_title') + (reasoning > 0 ? (' (🧠 ' + tokens(reasoning) + ')') : ''),
           onClick: () => setOpen(true),
         }, [
           React.createElement('span', { key: 'icon' }, '⚡'),
@@ -1554,7 +1671,7 @@ window.__ModuleLoader__.load({
               ]),
               React.createElement('div', { key: 's4', className: 'dcm-inspector-stat' }, [
                 React.createElement('div', { className: 'dcm-inspector-stat-lbl' }, t('turn.cost_title')),
-                React.createElement('div', { className: 'dcm-inspector-stat-val' }, cost > 0 ? ('$' + cost.toFixed(4)) : '—'),
+                React.createElement('div', { className: 'dcm-inspector-stat-val' }, isPrivacy ? '$••••' : (cost > 0 ? ('$' + cost.toFixed(4)) : '—')),
               ]),
             ]),
             React.createElement('div', { key: 'breakdown', style: { display: 'flex', flexDirection: 'column', gap: 6, fontSize: 11.5, marginTop: 8 } }, [
@@ -1570,6 +1687,10 @@ window.__ModuleLoader__.load({
                 React.createElement('span', { style: { color: 'var(--dsw-alias-label-secondary)' } }, t('turn.output')),
                 React.createElement('span', { style: { fontVariantNumeric: 'tabular-nums' } }, tokens(out)),
               ]),
+              reasoning > 0 ? React.createElement('div', { key: 'b-reasoning', style: { display: 'flex', justifyContent: 'space-between', color: 'var(--dsw-alias-brand-primary)' } }, [
+                React.createElement('span', null, '🧠 ' + t('turn.reasoning')),
+                React.createElement('span', { style: { fontVariantNumeric: 'tabular-nums' } }, tokens(reasoning)),
+              ]) : null,
             ]),
           ])
         ) : null
@@ -1580,6 +1701,13 @@ window.__ModuleLoader__.load({
     // ------------------------------------------------------------ CostMeter
 
 
+    function AnimatedCost(props) {
+      const { value = 0, currency = '$', isPrivacy = false, className = '' } = props || {}
+      const animated = useAnimatedNumber(Number(value) || 0, !isPrivacy)
+      if (isPrivacy) return React.createElement('span', { className }, currency + '••••')
+      return React.createElement('span', { className }, money(animated, currency))
+    }
+
     function CostMeter(props) {
       const ctx = props.ctx
       const locale = useActiveLocale(ctx)
@@ -1595,6 +1723,7 @@ window.__ModuleLoader__.load({
       const [showAllModels, setShowAllModels] = React.useState(false)
       const [showTurnInspector, setShowTurnInspector] = React.useState(false)
       const [selectedCurrency, setSelectedCurrency] = React.useState(null)
+      const [selectedPrivacy, setSelectedPrivacy] = React.useState(null)
       const [exportingPng, setExportingPng] = React.useState(false)
       const lastAlertRef = React.useRef(null)
       const box = React.useRef(null)
@@ -1685,8 +1814,11 @@ window.__ModuleLoader__.load({
 
       if (!state) return null
 
-      const turns = (byModel?.turns && byModel.turns.length > 0) ? byModel.turns : (state.turns || [])
       const stored = (settingsSnap && settingsSnap.value) || {}
+      const showHeaderChip = stored.showHeaderChip !== undefined ? Boolean(stored.showHeaderChip) : (state.showHeaderChip !== false)
+      if (!showHeaderChip) return null
+
+      const turns = (byModel?.turns && byModel.turns.length > 0) ? byModel.turns : (state.turns || [])
       const CURRENCY_LIST = [{ symbol: '$', code: 'USD' }, { symbol: '¥', code: 'CNY' }, { symbol: '₽', code: 'RUB' }, { symbol: '€', code: 'EUR' }]
       const activeCurrency = selectedCurrency || (stored.currency !== undefined ? String(stored.currency) : (state.currency || '$'))
       const fxRates = state.fxRates || { USD: 1, RUB: 80, CNY: 7.15, EUR: 0.92 }
@@ -1695,6 +1827,8 @@ window.__ModuleLoader__.load({
         ? Number(fxRates[normCode])
         : (stored.usdRate !== undefined && !isNaN(Number(stored.usdRate)) ? Number(stored.usdRate) : (Number(state.usdRate) || 1))
       const currency = activeCurrency
+      const isPrivacy = selectedPrivacy !== null ? selectedPrivacy : (stored.privacyMode !== undefined ? Boolean(stored.privacyMode) : Boolean(state.privacyMode))
+      const formatMoney = (val) => money(val, currency, isPrivacy)
 
       const handleCurrencySelect = (sym) => {
         setSelectedCurrency(sym)
@@ -1833,7 +1967,7 @@ window.__ModuleLoader__.load({
         return [
           h('div', { key: label + '-l', className: 'dcm-td' }, label),
           h('div', { key: label + '-n', className: 'dcm-num' }, tokens(n)),
-          h('div', { key: label + '-v', className: 'dcm-cost' }, money(usd * fx, currency)),
+          h('div', { key: label + '-v', className: 'dcm-cost' }, formatMoney(usd * fx)),
         ]
       }
 
@@ -1879,12 +2013,12 @@ window.__ModuleLoader__.load({
       const copyReport = () => {
         const lines = [
           '=== ' + (activeModelName || (state.route ? state.route.model : 'Cost Meter Report')) + ' ===',
-          t('tokens.session_total') + ' ' + (hasUsage ? money(total, currency) : '—') + (budgetThreshold > 0 ? ' (limit: ' + money(budgetThreshold * fx, currency) + ')' : ''),
+          t('tokens.session_total') + ' ' + (hasUsage ? formatMoney(total) : '—') + (budgetThreshold > 0 ? ' (limit: ' + money(budgetThreshold * fx, currency) + ')' : ''),
           'Tier: ' + (flat ? 'Flat' : (cheapNow ? t('offpeak') : t('peak'))),
           'Rates (1M): input ' + rate(active.input) + ', output ' + rate(active.output) + ', cache ' + rate(active.cacheHit),
         ]
         if (cacheSavedAmount > 0) {
-          lines.push('Cache saved: ≈ ' + money(cacheSavedAmount, currency) + ' (' + cacheSavedPercent + '%)')
+          lines.push('Cache saved: ≈ ' + formatMoney(cacheSavedAmount) + ' (' + cacheSavedPercent + '%)')
         }
         if (hasUsage && usage) {
           lines.push('Tokens: in ' + tokens(usage.inputTokens) + ', out ' + tokens(usage.outputTokens) + ', cache hit ' + tokens(usage.cacheReadTokens))
@@ -1927,13 +2061,13 @@ window.__ModuleLoader__.load({
           className: 'dcm-chip' + (displayMode === 'compact' ? ' dcm-chip-compact' : '') + (alertActive ? (alertDirection === 'peak' ? ' dcm-chip-alert-peak' : ' dcm-chip-alert-offpeak') : ''),
           onClick: () => setOpen((v) => !v),
           title: (budgetExceeded
-            ? t('budget.exceeded', { limit: money(budgetThreshold * fx, currency) })
+            ? t('budget.exceeded', { limit: formatMoney(budgetThreshold * fx) })
             : (flat ? 'Flat tariff' : cheapNow ? t('offpeak') : t('peak'))) +
-            (cacheSavedAmount > 0 ? ' · ' + t('savings.cache_saved', { amount: money(cacheSavedAmount, currency), percent: cacheSavedPercent }) : ''),
+            (cacheSavedAmount > 0 ? ' · ' + t('savings.cache_saved', { amount: formatMoney(cacheSavedAmount), percent: cacheSavedPercent }) : ''),
 
         }, [
           h('span', { key: 'dot', className: dotClass }),
-          h('span', { key: 'sum' }, hasUsage ? '≈ ' + money(total, currency) : '—'),
+          hasUsage ? h(AnimatedCost, { key: 'sum', value: total, currency, isPrivacy, className: 'dcm-odometer' }) : h('span', { key: 'sum' }, '—'),
           left ? h('span', { key: 'left', className: 'dcm-chip-timer' }, left) : null,
         ]),
 
@@ -1973,11 +2107,11 @@ window.__ModuleLoader__.load({
 
           cacheSavedAmount > 0
             ? h('div', { key: 'cache-saved-box', className: 'dcm-cache-box', style: { marginTop: 6 } },
-                t('savings.cache_saved', { amount: money(cacheSavedAmount, currency), percent: cacheSavedPercent }))
+                t('savings.cache_saved', { amount: formatMoney(cacheSavedAmount), percent: cacheSavedPercent }))
             : null,
 
           budgetExceeded ? h('div', { key: 'budget-warn', className: 'dcm-alert dcm-alert-err', style: { marginTop: 6, padding: '6px 10px', fontSize: 11 } },
-            t('budget.exceeded', { limit: money(budgetThreshold * fx, currency) })) : null,
+            t('budget.exceeded', { limit: formatMoney(budgetThreshold * fx) })) : null,
 
           renderSparkline(turns, {
             h,
@@ -2009,10 +2143,12 @@ window.__ModuleLoader__.load({
                   ? tr.cacheHitRate
                   : (uncached + hit > 0 ? Math.round((hit / (uncached + hit)) * 100) : 0)
                 const cost = Number(tr.costDeltaUsd) || 0
+      const reasoning = Number(tr.reasoningTokens) || 0
+      const isPrivacy = Boolean(stored.privacyMode)
                 return h('div', { key: 'tr-' + idx, className: 'dcm-turn-row' }, [
                   h('span', { key: 'tn', style: { fontWeight: 500 } }, 'T#' + tr.turn + (tr.step ? '.' + tr.step : '')),
                   h('span', { key: 'tok', style: { color: 'var(--dsw-alias-label-secondary)' } }, tokens(tok) + ' tok (' + hitRate + '% hit)'),
-                  h('span', { key: 'c', style: { fontWeight: 600 } }, cost > 0 ? money(cost * fx, currency) : '—'),
+                  h('span', { key: 'c', style: { fontWeight: 600 } }, cost > 0 ? formatMoney(cost * fx) : '—'),
                 ])
               })
             ) : null,
@@ -2026,11 +2162,11 @@ window.__ModuleLoader__.load({
             return h('div', { key: 'proj-box', className: 'dcm-proj-box' }, [
               h('span', { key: 'burn', className: 'dcm-proj-item' }, [
                 h('span', null, t('projection.burn_rate') + ' '),
-                h('span', { className: 'dcm-proj-val' }, money(burnRate, currency) + t('projection.per_hour')),
+                h('span', { className: 'dcm-proj-val' }, formatMoney(burnRate) + t('projection.per_hour')),
               ]),
               h('span', { key: 'proj', className: 'dcm-proj-item' }, [
                 h('span', null, t('projection.projected') + ' '),
-                h('span', { className: 'dcm-proj-val' }, '≈ ' + money(projectedTotal, currency)),
+                h('span', { className: 'dcm-proj-val' }, '≈ ' + formatMoney(projectedTotal)),
               ]),
             ])
           })(),
@@ -2102,7 +2238,7 @@ window.__ModuleLoader__.load({
                         color: m.known ? 'var(--dsw-alias-label-primary)' : 'var(--dsw-alias-label-tertiary)',
                       },
                     },
-                    m.known ? (hasUsage ? money(m.cost, currency) : '—') : t('tokens.not_priced'),
+                    m.known ? (hasUsage ? formatMoney(m.cost) : '—') : t('tokens.not_priced'),
                   ),
                 ],
               ),
@@ -2122,7 +2258,7 @@ window.__ModuleLoader__.load({
 
           h('div', { key: 'total', className: 'dcm-total' }, [
             h('span', { key: 'l' }, t('tokens.session_total')),
-            h('span', { key: 'v' }, hasUsage ? '≈ ' + money(total, currency) : '—'),
+            h('span', { key: 'v' }, hasUsage ? '≈ ' + formatMoney(total) : '—'),
           ]),
 
           hasUsage ? null : h('div', { key: 'nodata', className: 'dcm-panel-note', style: { paddingTop: 6 } },

package/lib/commands.js

@@ -60,6 +60,10 @@ export function formatCostReceipt(data) {
     `| **Output Tokens** | ${formatNumber(output)} |`,
   ]
 
+  if (tokens.reasoningTokens > 0) {
+    lines.push(`| **Thinking / Reasoning** | 🧠 ${formatNumber(tokens.reasoningTokens)} |`)
+  }
+
   if (cacheWrite > 0) {
     lines.push(`| **Cache Write** | ${formatNumber(cacheWrite)} |`)
   }

package/lib/export.js

@@ -40,6 +40,7 @@ export function generateSessionCsv(data) {
     'Cache_Read_Tokens',
     'Cache_Hit_Rate_%',
     'Output_Tokens',
+    'Reasoning_Tokens',
     'Total_Tokens',
     'Cost_USD',
     'Cost_Local',
@@ -51,6 +52,7 @@ export function generateSessionCsv(data) {
   let sumUncached = 0
   let sumHit = 0
   let sumOut = 0
+  let sumReasoning = 0
   let sumTotalTok = 0
   let sumCostUsd = 0
 
@@ -60,6 +62,7 @@ export function generateSessionCsv(data) {
     const uncached = Number(t.uncachedInputTokens) || 0
     const hit = Number(t.cacheReadTokens) || 0
     const out = Number(t.outputTokens) || 0
+    const reasoning = Number(t.reasoningTokens) || 0
     const totalTok = uncached + hit + out
     const hitRate = t.cacheHitRate !== undefined
       ? t.cacheHitRate
@@ -70,6 +73,7 @@ export function generateSessionCsv(data) {
     sumUncached += uncached
     sumHit += hit
     sumOut += out
+    sumReasoning += reasoning
     sumTotalTok += totalTok
     sumCostUsd += costUsd
 
@@ -83,6 +87,7 @@ export function generateSessionCsv(data) {
       hit,
       hitRate,
       out,
+      reasoning,
       totalTok,
       costUsd.toFixed(6),
       costLocal.toFixed(4),
@@ -103,6 +108,7 @@ export function generateSessionCsv(data) {
     sumHit,
     overallHitRate,
     sumOut,
+    sumReasoning,
     sumTotalTok,
     (totalCostUsd || sumCostUsd).toFixed(6),
     ((totalCostUsd || sumCostUsd) * fx).toFixed(4),
@@ -137,14 +143,17 @@ export function generateSessionJson(data) {
   let sumUncached = 0
   let sumHit = 0
   let sumOut = 0
+  let sumReasoning = 0
 
   const turnsFormatted = turns.map((t) => {
     const uncached = Number(t.uncachedInputTokens) || 0
     const hit = Number(t.cacheReadTokens) || 0
     const out = Number(t.outputTokens) || 0
+    const reasoning = Number(t.reasoningTokens) || 0
     sumUncached += uncached
     sumHit += hit
     sumOut += out
+    sumReasoning += reasoning
     return {
       turn: t.turn,
       step: t.step ?? 0,
@@ -153,6 +162,7 @@ export function generateSessionJson(data) {
         uncachedInput: uncached,
         cacheRead: hit,
         output: out,
+        reasoningTokens: reasoning,
         total: uncached + hit + out,
         cacheHitRate: t.cacheHitRate !== undefined ? t.cacheHitRate : (uncached + hit > 0 ? Math.round((hit / (uncached + hit)) * 100) : 0),
       },
@@ -180,6 +190,7 @@ export function generateSessionJson(data) {
         uncachedInput: sumUncached,
         cacheRead: sumHit,
         output: sumOut,
+        reasoningTokens: sumReasoning,
         total: sumUncached + sumHit + sumOut,
         cacheHitRate: overallHitRate,
       },
@@ -230,7 +241,7 @@ export function renderSummaryCardToCanvas(canvas, data) {
   } = data || {}
 
   const totalCost = costUsd * fx
-  const costFormatted = totalCost >= 1 ? `${currency}${totalCost.toFixed(2)}` : (totalCost > 0 ? `${currency}${totalCost.toFixed(4)}` : `${currency}0.00`)
+  const costFormatted = data?.privacyMode ? `${currency}****` : (totalCost >= 1 ? `${currency}${totalCost.toFixed(2)}` : (totalCost > 0 ? `${currency}${totalCost.toFixed(4)}` : `${currency}0.00`))
   const uncached = Number(tokens.uncachedInputTokens || tokens.inputTokens) || 0
   const hit = Number(tokens.cacheReadTokens) || 0
   const out = Number(tokens.outputTokens) || 0

package/lib/index.js

@@ -33,6 +33,7 @@ export * from './fx.js'
 export * from './alerts.js'
 export * from './commands.js'
 export * from './export.js'
+export * from './analytics.js'
 export { STATE_PATH, REFRESH_PATH } from './routes.js'
 import { indexCatalog, resolveTariff, matchModel, unwrapVolatile, calculateCacheSavings } from './tariff.js'
 import { usageByModelProjection, getLastTurns, resetLastTurns } from './projection.js'
@@ -131,6 +132,9 @@ export function normalizeConfig(raw) {
     alertBeforeSwitch: u.alertBeforeSwitch !== false,
     alertLeadMinutes: Math.max(1, Math.min(30, Number(u.alertLeadMinutes) || 5)),
     browserNotifications: Boolean(u.browserNotifications),
+    privacyMode: Boolean(u.privacyMode),
+    showHeaderChip: u.showHeaderChip !== false,
+    showMessageAction: u.showMessageAction !== false,
     useOpenRouter: u.useOpenRouter !== false,
     refreshHours: Number(u.refreshHours) || 24,
     deepseekPeakPrices: u.deepseekPeakPrices || {},
@@ -162,6 +166,9 @@ export const Config = z.object({
   alertBeforeSwitch: z.boolean().description('Pre-switch notification and visual alert before tariff change.').default(true).volatile(),
   alertLeadMinutes: z.number().description('Minutes before tariff change to trigger pre-switch alert.').default(5).volatile(),
   browserNotifications: z.boolean().description('Enable desktop browser notifications for tariff switches.').default(false).volatile(),
+  privacyMode: z.boolean().description('Streamer/Privacy mode: mask financial spend with asterisks while retaining token stats.').default(false).volatile(),
+  showHeaderChip: z.boolean().description('Show the cost meter chip in the conversation header.').default(true).volatile(),
+  showMessageAction: z.boolean().description('Show the token inspector action button on assistant messages.').default(true).volatile(),
   deepseekPeakPrices: z.dict(PriceRow).description('Override the built-in DeepSeek peak rates, by model id.').default({}).volatile(),
   useOpenRouter: z.boolean().description('Pull rates and discount windows from the public OpenRouter catalog.').default(true).volatile(),
   refreshHours: z.number().description('How often to refetch the catalog.').default(24).volatile(),

package/lib/projection.js

@@ -20,6 +20,7 @@ export const bucketSchema = zod.object({
   outputTokens: zod.number().nonnegative(),
   cacheReadTokens: zod.number().nonnegative(),
   cacheWriteTokens: zod.number().nonnegative(),
+  reasoningTokens: zod.number().nonnegative().optional(),
 }).strict()
 
 export const turnRecordSchema = zod.object({
@@ -30,6 +31,7 @@ export const turnRecordSchema = zod.object({
   outputTokens: zod.number().nonnegative().optional(),
   cacheReadTokens: zod.number().nonnegative().optional(),
   cacheWriteTokens: zod.number().nonnegative().optional(),
+  reasoningTokens: zod.number().nonnegative().optional(),
   costDeltaUsd: zod.number().nonnegative().optional(),
   timestamp: zod.number().nonnegative(),
   durationMs: zod.number().nonnegative().optional(),
@@ -38,11 +40,19 @@ export const turnRecordSchema = zod.object({
 
 /** Pull the four buckets out of one provider usage record. */
 export function bucketsFromUsage(usage) {
+  const reasoningTokens = Number(
+    usage?.completion_tokens_details?.reasoning_tokens ||
+    usage?.reasoningTokens ||
+    usage?.reasoning_tokens ||
+    usage?.details?.reasoning_tokens ||
+    0
+  ) || 0
   return {
     uncachedInputTokens: Number(usage.inputTokens) || 0,
     outputTokens: Number(usage.outputTokens) || 0,
     cacheReadTokens: Number(usage.cacheReadTokens) || 0,
     cacheWriteTokens: Number(usage.cacheWriteTokens) || 0,
+    reasoningTokens,
   }
 }
 
@@ -180,6 +190,7 @@ export const usageByModelProjection = {
         outputTokens: buckets.outputTokens,
         cacheReadTokens: buckets.cacheReadTokens,
         cacheWriteTokens: buckets.cacheWriteTokens,
+        reasoningTokens: buckets.reasoningTokens || 0,
         costDeltaUsd: nextTurns[existingIndex].costDeltaUsd || 0,
         timestamp,
         durationMs: nextTurns[existingIndex].durationMs || durationMs,
@@ -194,6 +205,7 @@ export const usageByModelProjection = {
         outputTokens: buckets.outputTokens,
         cacheReadTokens: buckets.cacheReadTokens,
         cacheWriteTokens: buckets.cacheWriteTokens,
+        reasoningTokens: buckets.reasoningTokens || 0,
         costDeltaUsd: 0,
         timestamp,
         durationMs,

package/lib/routes.js

@@ -2,7 +2,7 @@
 import { createHash } from 'node:crypto'
 import { registerPluginUpdater } from './updater.js'
 import { getLastTurns } from './projection.js'
-import { calculateBurnRateAndProjection } from './analytics.js'
+import { calculateBurnRateAndProjection, calculateContextMetrics } from './analytics.js'
 import { getCachedFxState } from './fx.js'
 
 export const STATE_PATH = '/dsh-cost-meter/state'
@@ -105,12 +105,19 @@ export function registerRoutes(ctx, options) {
             }
           }
 
+          const turnsList = getLastTurns()
+          const fxRateVal = Number(cfg?.usdRate) > 0 ? Number(cfg.usdRate) : 1
+          const ctxMetrics = calculateContextMetrics(turnsList, own, route)
+
           const payloadObj = {
             currency: typeof cfg?.currency === 'string' && cfg.currency ? cfg.currency : '$',
             usdRate: Number(cfg?.usdRate) > 0 ? Number(cfg.usdRate) : 1,
             fxRates: { USD: 1, ...(getCachedFxState().rates || {}) },
             displayTimeZone: typeof cfg?.displayTimeZone === 'string' && cfg.displayTimeZone ? cfg.displayTimeZone : 'Europe/Moscow',
             budgetThreshold: Number(cfg?.budgetThreshold) || 0,
+            privacyMode: Boolean(cfg?.privacyMode),
+            showHeaderChip: cfg?.showHeaderChip !== false,
+            showMessageAction: cfg?.showMessageAction !== false,
             displayMode: cfg?.displayMode || 'auto',
             alertBeforeSwitch: cfg?.alertBeforeSwitch !== false,
             alertLeadMinutes: Number(cfg?.alertLeadMinutes) || 5,
@@ -126,6 +133,14 @@ export function registerRoutes(ctx, options) {
             catalogError: catalog.error,
             catalogModelsCount: Object.keys((catalog.index && catalog.index.byId) || {}).length,
             schedule: own.schedule,
+            contextMetrics: {
+              currentTokens: ctxMetrics.currentTokens,
+              contextLength: ctxMetrics.contextLength,
+              saturationPercent: ctxMetrics.saturationPercent,
+              riskLevel: ctxMetrics.riskLevel,
+              nextTurnEstUsd: ctxMetrics.nextTurnEstUsd,
+              nextTurnEstLocal: ctxMetrics.nextTurnEstUsd * fxRateVal,
+            },
           }
 
           const serialized = JSON.stringify(payloadObj)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@goodandready/dsh-cost-meter",
-  "version": "0.8.27",
+  "version": "0.8.29",
   "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",