@goodandready/dsh-cost-meter 0.8.26 → 0.8.28

package/lib/client.js

@@ -67,6 +67,12 @@ window.__ModuleLoader__.load({
       'action.sync_ok': 'Catalog updated',
       'action.sync_err': 'Sync failed',
       'action.sync_rate_limited': 'Wait {seconds}s',
+            'action.export_csv': 'Export CSV',
+      'action.export_json': 'Export JSON',
+      'action.export_png': 'PNG Card',
+      'action.exporting_png': 'Generating…',
+      'action.exported': 'Downloaded!',
+      'curr.select': 'Currency',
       'action.copy_report': 'Copy Summary',
       'action.copied': 'Copied!',
             'alert.pre_switch_peak': '⚠️ Peak tariff starts in {time} (higher rates)',
@@ -85,6 +91,17 @@ window.__ModuleLoader__.load({
       'turn.modal_title': 'Message Token & Cost Inspector',
       'turn.tokens_total': 'Turn Tokens',
       'turn.cost_title': 'Turn Cost',
+      'turn.reasoning': 'Thinking / Reasoning',
+      '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',
@@ -179,6 +196,12 @@ window.__ModuleLoader__.load({
       'action.sync_ok': '目录已更新',
       'action.sync_err': '同步失败',
       'action.sync_rate_limited': '请等待 {seconds} 秒',
+            'action.export_csv': '导出 CSV',
+      'action.export_json': '导出 JSON',
+      'action.export_png': '生成图片卡片',
+      'action.exporting_png': '生成中…',
+      'action.exported': '已下载！',
+      'curr.select': '货币',
       'action.copy_report': '复制消费报告',
       'action.copied': '已复制！',
             'alert.pre_switch_peak': '⚠️ 高峰期计费将在 {time} 后开始（标准费率）',
@@ -197,6 +220,17 @@ window.__ModuleLoader__.load({
       'turn.modal_title': '单次回复 Token 与成本详情',
       'turn.tokens_total': '本轮 Token 总量',
       'turn.cost_title': '单次成本',
+      'turn.reasoning': '思考推理 Token',
+      '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': '未命中输入',
@@ -387,6 +421,12 @@ window.__ModuleLoader__.load({
 .dcm-inspector-stat-val { font-size: 13.5px; font-weight: 600; color: var(--dsw-alias-label-primary); font-variant-numeric: tabular-nums; }
 .dcm-turn-list { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; max-height: 180px; overflow-y: auto; }
 .dcm-turn-row { display: flex; justify-content: space-between; align-items: center; padding: 4px 6px; border-radius: 6px; background: color-mix(in srgb, var(--dsw-alias-bg-layer-3) 60%, transparent); font-size: 11px; }
+.dcm-curr-switcher { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border-radius: 6px; background: color-mix(in srgb, var(--dsw-alias-bg-layer-3) 80%, transparent); border: 1px solid var(--dsw-alias-border-l2); }
+.dcm-curr-btn { appearance: none; background: transparent; border: 0; padding: 2px 7px; border-radius: 4px; font-size: 11.5px; font-weight: 500; color: var(--dsw-alias-label-secondary); cursor: pointer; transition: all .15s ease; user-select: none; }
+.dcm-curr-btn:hover { color: var(--dsw-alias-label-primary); background: color-mix(in srgb, var(--dsw-alias-label-primary) 8%, transparent); }
+.dcm-curr-btn-active { background: var(--dsw-alias-label-primary) !important; color: var(--dsw-alias-bg-layer-3) !important; font-weight: 600; }
+.dcm-export-group { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 10px; justify-content: flex-end; }
+
 `
 
 
@@ -682,6 +722,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',
           })
@@ -1180,13 +1223,23 @@ window.__ModuleLoader__.load({
       return perMillion / 1e6
     }
 
+    function normalizeCurrencyCode(symbolOrCode) {
+      const str = String(symbolOrCode || '').trim().toUpperCase()
+      if (str === '₽' || str === 'RUB' || str === 'РУБ') return 'RUB'
+      if (str === '€' || str === 'EUR') return 'EUR'
+      if (str === '¥' || str === 'CNY' || str === 'RMB') return 'CNY'
+      if (str === '$' || str === 'USD') return 'USD'
+      return str
+    }
+
     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)
     }
@@ -1282,7 +1335,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,
@@ -1311,6 +1364,135 @@ window.__ModuleLoader__.load({
     }
 
 
+
+    // --------------------------------------------------- Export helpers (Issue #118)
+
+    function sanitizeCsvCell(value) {
+      if (value === null || value === undefined) return ''
+      let str = String(value)
+      if (/^[=+\-@\t\r]/.test(str)) str = "'" + str
+      if (/[",\n\r]/.test(str)) str = '"' + str.replace(/"/g, '""') + '"'
+      return str
+    }
+
+    function generateSessionCsv(data) {
+      const { model = 'unknown', provider = '', currency = '$', fx = 1, turns = [], totalCostUsd = 0 } = data || {}
+      const headers = ['Timestamp', 'ISO_Time', 'Turn', 'Step', 'Model', 'Uncached_Input', 'Cache_Read', 'Cache_Hit_%', 'Output', 'Total_Tokens', 'Cost_USD', 'Cost_Local', 'Currency']
+      const rows = [headers.map(sanitizeCsvCell).join(',')]
+      let sumIn = 0, sumHit = 0, sumOut = 0, sumTot = 0, sumCost = 0
+      for (const t of turns) {
+        const ts = t.timestamp ? Number(t.timestamp) : Date.now()
+        const iso = new Date(ts).toISOString()
+        const uncached = Number(t.uncachedInputTokens) || 0
+        const hit = Number(t.cacheReadTokens) || 0
+        const out = Number(t.outputTokens) || 0
+        const tot = uncached + hit + out
+        const hitRate = t.cacheHitRate !== undefined ? t.cacheHitRate : (uncached + hit > 0 ? Math.round((hit / (uncached + hit)) * 100) : 0)
+        const costUsd = Number(t.costDeltaUsd) || 0
+        sumIn += uncached; sumHit += hit; sumOut += out; sumTot += tot; sumCost += costUsd
+        rows.push([ts, iso, t.turn ?? '', t.step ?? 0, provider ? (provider + '/' + model) : model, uncached, hit, hitRate, out, tot, costUsd.toFixed(6), (costUsd * fx).toFixed(4), currency].map(sanitizeCsvCell).join(','))
+      }
+      const overallHit = sumIn + sumHit > 0 ? Math.round((sumHit / (sumIn + sumHit)) * 100) : 0
+      rows.push(['TOTAL', new Date().toISOString(), turns.length, '', provider ? (provider + '/' + model) : model, sumIn, sumHit, overallHit, sumOut, sumTot, (totalCostUsd || sumCost).toFixed(6), ((totalCostUsd || sumCost) * fx).toFixed(4), currency].map(sanitizeCsvCell).join(','))
+      return '\uFEFF' + rows.join('\r\n')
+    }
+
+    function generateSessionJson(data) {
+      const { model = 'unknown', provider = '', currency = '$', fx = 1, turns = [], totalCostUsd = 0, cacheSavingsUsd = 0, cacheSavingsPercent = 0, tier = 'Standard' } = data || {}
+      return {
+        version: 1,
+        generator: '@goodandready/dsh-cost-meter',
+        exportedAt: new Date().toISOString(),
+        session: {
+          model, provider, currency, fxRate: fx, totalCostUsd, totalCostLocal: totalCostUsd * fx,
+          cacheSavings: { savedUsd: cacheSavingsUsd, savedLocal: cacheSavingsUsd * fx, percent: cacheSavingsPercent },
+          tier, turnsCount: turns.length,
+        },
+        turns: turns.map((t) => ({
+          turn: t.turn, step: t.step ?? 0, timestamp: t.timestamp,
+          tokens: { uncachedInput: Number(t.uncachedInputTokens) || 0, cacheRead: Number(t.cacheReadTokens) || 0, output: Number(t.outputTokens) || 0, total: Number(t.tokens) || 0, cacheHitRate: t.cacheHitRate || 0 },
+          costDeltaUsd: Number(t.costDeltaUsd) || 0, costDeltaLocal: (Number(t.costDeltaUsd) || 0) * fx,
+        })),
+      }
+    }
+
+    function renderSummaryCardToCanvas(canvas, data) {
+      if (!canvas || typeof canvas.getContext !== 'function') return null
+      const width = 1200, height = 680
+      canvas.width = width; canvas.height = height
+      const ctx = canvas.getContext('2d')
+      if (!ctx) return null
+      const { model = 'model', provider = '', currency = '$', fx = 1, costUsd = 0, tokens = {}, cacheSavingsUsd = 0, cacheSavingsPercent = 0, tier = 'Standard', turns = [] } = data || {}
+      const totalCost = costUsd * fx
+      const costFmt = 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
+      const totTok = uncached + hit + out
+      const hitRate = uncached + hit > 0 ? Math.round((hit / (uncached + hit)) * 100) : 0
+      const savedAmt = cacheSavingsUsd * fx
+      const savedFmt = savedAmt >= 1 ? (currency + savedAmt.toFixed(2)) : (currency + savedAmt.toFixed(4))
+
+      const bg = ctx.createLinearGradient(0, 0, width, height)
+      bg.addColorStop(0, '#0f172a'); bg.addColorStop(1, '#1e293b')
+      ctx.fillStyle = bg; ctx.fillRect(0, 0, width, height)
+      ctx.strokeStyle = '#334155'; ctx.lineWidth = 3; ctx.strokeRect(20, 20, width - 40, height - 40)
+
+      ctx.fillStyle = '#1e293b'; ctx.beginPath(); ctx.roundRect(50, 45, 220, 44, 22); ctx.fill()
+      ctx.strokeStyle = '#3b82f6'; ctx.lineWidth = 2; ctx.stroke()
+      ctx.fillStyle = '#38bdf8'; ctx.font = 'bold 20px system-ui, sans-serif'; ctx.fillText('⚡ Cost Meter', 75, 74)
+
+      ctx.fillStyle = '#94a3b8'; ctx.font = '18px system-ui, sans-serif'; ctx.textAlign = 'right'
+      ctx.fillText(new Date().toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }), width - 60, 74)
+      ctx.textAlign = 'left'
+
+      ctx.fillStyle = '#f8fafc'; ctx.font = 'bold 36px system-ui, sans-serif'
+      ctx.fillText(provider ? (provider + '/' + model) : model, 50, 145)
+
+      ctx.fillStyle = tier.includes('Off-Peak') || tier.includes('低谷') ? '#10b981' : '#f59e0b'
+      ctx.font = 'bold 20px system-ui, sans-serif'; ctx.fillText(tier, 50, 180)
+
+      const tiles = [
+        { label: 'SESSION SPEND', val: costFmt, color: '#38bdf8' },
+        { label: 'TOTAL TOKENS', val: totTok.toLocaleString(), color: '#f8fafc' },
+        { label: 'CACHE HIT RATE', val: hitRate + '%', color: '#34d399' },
+        { label: 'CACHE SAVED', val: '≈ ' + savedFmt + ' (' + cacheSavingsPercent + '%)', color: '#a78bfa' },
+      ]
+      tiles.forEach((t, i) => {
+        const x = 50 + i * 270, y = 215
+        ctx.fillStyle = 'rgba(30, 41, 59, 0.7)'; ctx.beginPath(); ctx.roundRect(x, y, 250, 110, 12); ctx.fill()
+        ctx.strokeStyle = '#334155'; ctx.lineWidth = 1.5; ctx.stroke()
+        ctx.fillStyle = '#94a3b8'; ctx.font = 'bold 14px system-ui, sans-serif'; ctx.fillText(t.label, x + 16, y + 36)
+        ctx.fillStyle = t.color; ctx.font = 'bold 26px system-ui, sans-serif'; ctx.fillText(t.val, x + 16, y + 80)
+      })
+
+      const chartY = 360, chartH = 190, chartW = width - 100
+      ctx.fillStyle = 'rgba(15, 23, 42, 0.6)'; ctx.beginPath(); ctx.roundRect(50, chartY, chartW, chartH, 12); ctx.fill()
+      ctx.strokeStyle = '#334155'; ctx.lineWidth = 1.5; ctx.stroke()
+      ctx.fillStyle = '#64748b'; ctx.font = 'bold 15px system-ui, sans-serif'; ctx.fillText('TURN HISTORY & STEP DYNAMICS', 70, chartY + 35)
+
+      const activeTurns = turns.slice(-25)
+      if (activeTurns.length > 0) {
+        const maxTok = Math.max(...activeTurns.map((t) => Number(t.tokens) || 1), 100)
+        const barW = Math.min(32, Math.floor((chartW - 60) / activeTurns.length) - 6)
+        const baseY = chartY + chartH - 30
+        activeTurns.forEach((t, i) => {
+          const x = 70 + i * (barW + 8)
+          const tok = Number(t.tokens) || 0
+          const h = Math.max(6, Math.round((tok / maxTok) * 100))
+          ctx.fillStyle = '#3b82f6'; ctx.beginPath(); ctx.roundRect(x, baseY - h, barW, h, 4); ctx.fill()
+          const hitTokens = Number(t.cacheReadTokens) || 0
+          if (hitTokens > 0) {
+            const hitH = Math.round((hitTokens / tok) * h)
+            ctx.fillStyle = '#10b981'; ctx.beginPath(); ctx.roundRect(x, baseY - hitH, barW, hitH, 4); ctx.fill()
+          }
+        })
+      }
+
+      ctx.fillStyle = '#64748b'; ctx.font = '16px system-ui, sans-serif'; ctx.fillText('Generated by @goodandready/dsh-cost-meter', 50, height - 35)
+      return canvas
+    }
+
     // --------------------------------------------------- MessageTokenAction (Issue #120)
 
     function MessageTokenAction(props) {
@@ -1318,6 +1500,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
 
@@ -1345,6 +1537,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'
@@ -1359,7 +1553,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' }, '⚡'),
@@ -1398,7 +1592,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 } }, [
@@ -1414,6 +1608,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
@@ -1438,6 +1636,9 @@ window.__ModuleLoader__.load({
       const [copied, setCopied] = React.useState(false)
       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)
 
@@ -1527,10 +1728,33 @@ 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 currency = stored.currency !== undefined ? String(stored.currency) : (state.currency || '$')
-      const fx = stored.usdRate !== undefined && !isNaN(Number(stored.usdRate)) ? Number(stored.usdRate) : (Number(state.usdRate) || 1)
+      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 }
+      const normCode = normalizeCurrencyCode(activeCurrency)
+      const fx = (selectedCurrency && fxRates[normCode] !== undefined)
+        ? 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)
+        const code = normalizeCurrencyCode(sym)
+        const newFx = fxRates[code] || 1
+        if (scope && typeof scope.set === 'function') {
+          try {
+            scope.set('currency', sym)
+            scope.set('usdRate', newFx)
+          } catch (_) {}
+        }
+      }
       const budgetThreshold = stored.budgetThreshold !== undefined ? Number(stored.budgetThreshold) : (Number(state.budgetThreshold) || 0)
       const displayMode = stored.displayMode !== undefined ? stored.displayMode : (state.displayMode || 'auto')
       const schedules = state.schedules || {}
@@ -1657,7 +1881,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)),
         ]
       }
 
@@ -1703,12 +1927,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))
@@ -1751,20 +1975,30 @@ 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) : '—'),
+          h('span', { key: 'sum' }, hasUsage ? '≈ ' + formatMoney(total) : '—'),
           left ? h('span', { key: 'left', className: 'dcm-chip-timer' }, left) : null,
         ]),
 
         open ? h('div', { key: 'panel', className: 'dcm-panel' }, [
           h('div', { key: 'title', className: 'dcm-panel-title' }, [
             h('span', { key: 'model-name' }, activeModelName || (state.route ? state.route.model : 'model')),
-            flat ? null : h('span', { key: 'tier', style: { fontSize: 11.5, opacity: 0.85 } }, cheapNow ? t('offpeak') : t('peak')),
+            h('div', { key: 'curr-switcher', className: 'dcm-curr-switcher' },
+              CURRENCY_LIST.map((c) =>
+                h('button', {
+                  key: c.code,
+                  type: 'button',
+                  className: 'dcm-curr-btn' + (currency === c.symbol || currency === c.code ? ' dcm-curr-btn-active' : ''),
+                  onClick: () => handleCurrencySelect(c.symbol),
+                  title: c.code,
+                }, c.symbol)
+              )
+            ),
           ]),
 
           h('div', { key: 'note', className: 'dcm-panel-note' },
@@ -1787,11 +2021,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,
@@ -1823,10 +2057,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,
@@ -1840,11 +2076,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)),
               ]),
             ])
           })(),
@@ -1916,7 +2152,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'),
                   ),
                 ],
               ),
@@ -1936,19 +2172,104 @@ 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 } },
             t('tokens.no_usage_yet')),
 
-          h('div', { key: 'footer-actions', style: { display: 'flex', justifyContent: 'flex-end', marginTop: 10 } },
+          h('div', { key: 'footer-actions', className: 'dcm-export-group' }, [
             h('button', {
+              key: 'btn-csv',
+              type: 'button',
+              className: 'dcm-btn dcm-btn-sm',
+              title: t('action.export_csv'),
+              onClick: () => {
+                const csvData = generateSessionCsv({
+                  model: activeModelName || (state.route ? state.route.model : 'model'),
+                  provider: activeProvider || '',
+                  currency,
+                  fx,
+                  turns,
+                  totalCostUsd: totalUsd,
+                })
+                const blob = new Blob([csvData], { type: 'text/csv;charset=utf-8;' })
+                const link = document.createElement('a')
+                link.href = URL.createObjectURL(blob)
+                link.download = (activeModelName || 'cost-meter') + '-session.csv'
+                link.click()
+              },
+            }, '📥 CSV'),
+
+            h('button', {
+              key: 'btn-json',
+              type: 'button',
+              className: 'dcm-btn dcm-btn-sm',
+              title: t('action.export_json'),
+              onClick: () => {
+                const jsonData = generateSessionJson({
+                  model: activeModelName || (state.route ? state.route.model : 'model'),
+                  provider: activeProvider || '',
+                  currency,
+                  fx,
+                  turns,
+                  totalCostUsd: totalUsd,
+                  cacheSavingsUsd: cacheSavedAmount / fx,
+                  cacheSavingsPercent: cacheSavedPercent,
+                  tier: flat ? 'Flat' : (cheapNow ? t('offpeak') : t('peak')),
+                })
+                const blob = new Blob([JSON.stringify(jsonData, null, 2)], { type: 'application/json' })
+                const link = document.createElement('a')
+                link.href = URL.createObjectURL(blob)
+                link.download = (activeModelName || 'cost-meter') + '-session.json'
+                link.click()
+              },
+            }, '📋 JSON'),
+
+            h('button', {
+              key: 'btn-png',
+              type: 'button',
+              className: 'dcm-btn dcm-btn-sm',
+              title: t('action.export_png'),
+              disabled: exportingPng,
+              onClick: () => {
+                setExportingPng(true)
+                try {
+                  const canvas = document.createElement('canvas')
+                  renderSummaryCardToCanvas(canvas, {
+                    model: activeModelName || (state.route ? state.route.model : 'model'),
+                    provider: activeProvider || '',
+                    currency,
+                    fx,
+                    costUsd: totalUsd,
+                    tokens: usage || {},
+                    cacheSavingsUsd: cacheSavedAmount / fx,
+                    cacheSavingsPercent: cacheSavedPercent,
+                    tier: flat ? 'Flat Tariff' : (cheapNow ? ('Off-Peak (' + t('offpeak') + ')') : ('Peak Tariff (' + t('peak') + ')')),
+                    turns,
+                  })
+                  canvas.toBlob((blob) => {
+                    setExportingPng(false)
+                    if (blob) {
+                      const link = document.createElement('a')
+                      link.href = URL.createObjectURL(blob)
+                      link.download = (activeModelName || 'cost-meter') + '-summary.png'
+                      link.click()
+                    }
+                  }, 'image/png')
+                } catch (_) {
+                  setExportingPng(false)
+                }
+              },
+            }, exportingPng ? t('action.exporting_png') : '🖼️ PNG'),
+
+            h('button', {
+              key: 'btn-copy',
               type: 'button',
               className: 'dcm-btn dcm-btn-sm',
               onClick: copyReport,
-            }, copied ? t('action.copied') : t('action.copy_report'))
-          ),
+            }, copied ? t('action.copied') : t('action.copy_report')),
+          ]),
         ]) : null,
       ])
     }

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

@@ -0,0 +1,389 @@
+// dsh-cost-meter — session spend export to CSV, JSON, and PNG canvas card (Issue #118).
+
+/**
+ * Sanitize cell values for CSV and prevent CSV formula injection (CWE-1236).
+ * Prepends a single quote if string starts with dangerous characters.
+ */
+export function sanitizeCsvCell(value) {
+  if (value === null || value === undefined) return ''
+  let str = String(value)
+  if (/^[=+\-@\t\r]/.test(str)) {
+    str = "'" + str
+  }
+  if (/[",\n\r]/.test(str)) {
+    str = '"' + str.replace(/"/g, '""') + '"'
+  }
+  return str
+}
+
+/**
+ * Generate formatted CSV with UTF-8 BOM for Excel / spreadsheet compatibility.
+ */
+export function generateSessionCsv(data) {
+  const {
+    model = 'unknown',
+    provider = '',
+    currency = '$',
+    fx = 1,
+    turns = [],
+    totalCostUsd = 0,
+    exportedAt = new Date().toISOString(),
+  } = data || {}
+
+  const headers = [
+    'Timestamp',
+    'ISO_Time',
+    'Turn',
+    'Step',
+    'Model',
+    'Uncached_Input_Tokens',
+    'Cache_Read_Tokens',
+    'Cache_Hit_Rate_%',
+    'Output_Tokens',
+    'Reasoning_Tokens',
+    'Total_Tokens',
+    'Cost_USD',
+    'Cost_Local',
+    'Currency',
+  ]
+
+  const rows = [headers.map(sanitizeCsvCell).join(',')]
+
+  let sumUncached = 0
+  let sumHit = 0
+  let sumOut = 0
+  let sumReasoning = 0
+  let sumTotalTok = 0
+  let sumCostUsd = 0
+
+  for (const t of turns) {
+    const ts = t.timestamp ? Number(t.timestamp) : Date.now()
+    const iso = new Date(ts).toISOString()
+    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
+      : (uncached + hit > 0 ? Math.round((hit / (uncached + hit)) * 100) : 0)
+    const costUsd = Number(t.costDeltaUsd) || 0
+    const costLocal = costUsd * fx
+
+    sumUncached += uncached
+    sumHit += hit
+    sumOut += out
+    sumReasoning += reasoning
+    sumTotalTok += totalTok
+    sumCostUsd += costUsd
+
+    const row = [
+      ts,
+      iso,
+      t.turn ?? '',
+      t.step ?? 0,
+      provider ? `${provider}/${model}` : model,
+      uncached,
+      hit,
+      hitRate,
+      out,
+      reasoning,
+      totalTok,
+      costUsd.toFixed(6),
+      costLocal.toFixed(4),
+      currency,
+    ]
+    rows.push(row.map(sanitizeCsvCell).join(','))
+  }
+
+  // Summary row
+  const overallHitRate = sumUncached + sumHit > 0 ? Math.round((sumHit / (sumUncached + sumHit)) * 100) : 0
+  const summaryRow = [
+    'TOTAL',
+    exportedAt,
+    turns.length,
+    '',
+    provider ? `${provider}/${model}` : model,
+    sumUncached,
+    sumHit,
+    overallHitRate,
+    sumOut,
+    sumReasoning,
+    sumTotalTok,
+    (totalCostUsd || sumCostUsd).toFixed(6),
+    ((totalCostUsd || sumCostUsd) * fx).toFixed(4),
+    currency,
+  ]
+  rows.push(summaryRow.map(sanitizeCsvCell).join(','))
+
+  // Prepend UTF-8 BOM (\uFEFF)
+  return '\uFEFF' + rows.join('\r\n')
+}
+
+/**
+ * Generate structured, versioned JSON export.
+ */
+export function generateSessionJson(data) {
+  const {
+    model = 'unknown',
+    provider = '',
+    currency = '$',
+    fx = 1,
+    turns = [],
+    totalCostUsd = 0,
+    cacheSavingsUsd = 0,
+    cacheSavingsPercent = 0,
+    tier = 'Standard',
+    rates = {},
+    burnRatePerHourUsd = 0,
+    projectedCostUsd = 0,
+    exportedAt = new Date().toISOString(),
+  } = 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,
+      timestamp: t.timestamp,
+      tokens: {
+        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),
+      },
+      durationMs: t.durationMs || 0,
+      costDeltaUsd: Number(t.costDeltaUsd) || 0,
+      costDeltaLocal: (Number(t.costDeltaUsd) || 0) * fx,
+    }
+  })
+
+  const totalPrompt = sumUncached + sumHit
+  const overallHitRate = totalPrompt > 0 ? Math.round((sumHit / totalPrompt) * 100) : 0
+
+  return {
+    version: 1,
+    generator: '@goodandready/dsh-cost-meter',
+    exportedAt,
+    session: {
+      model,
+      provider,
+      currency,
+      fxRate: fx,
+      totalCostUsd,
+      totalCostLocal: totalCostUsd * fx,
+      tokens: {
+        uncachedInput: sumUncached,
+        cacheRead: sumHit,
+        output: sumOut,
+        reasoningTokens: sumReasoning,
+        total: sumUncached + sumHit + sumOut,
+        cacheHitRate: overallHitRate,
+      },
+      cacheSavings: {
+        savedUsd: cacheSavingsUsd,
+        savedLocal: cacheSavingsUsd * fx,
+        percent: cacheSavingsPercent,
+      },
+      tier,
+      rates,
+      burnRate: {
+        perHourUsd: burnRatePerHourUsd,
+        perHourLocal: burnRatePerHourUsd * fx,
+        projectedUsd: projectedCostUsd,
+        projectedLocal: projectedCostUsd * fx,
+      },
+      turnsCount: turns.length,
+    },
+    turns: turnsFormatted,
+  }
+}
+
+/**
+ * Render visual summary card on an HTML5 Canvas (high-res 1200x680, 2x retina).
+ */
+export function renderSummaryCardToCanvas(canvas, data) {
+  if (!canvas || typeof canvas.getContext !== 'function') return null
+
+  const width = 1200
+  const height = 680
+  canvas.width = width
+  canvas.height = height
+
+  const ctx = canvas.getContext('2d')
+  if (!ctx) return null
+
+  const {
+    model = 'deepseek-chat',
+    provider = 'deepseek',
+    currency = '$',
+    fx = 1,
+    costUsd = 0,
+    tokens = {},
+    cacheSavingsUsd = 0,
+    cacheSavingsPercent = 0,
+    tier = 'Off-Peak Tier (-50%)',
+    turns = [],
+  } = data || {}
+
+  const totalCost = costUsd * fx
+  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
+  const totalTok = uncached + hit + out
+  const hitRate = uncached + hit > 0 ? Math.round((hit / (uncached + hit)) * 100) : 0
+  const savedAmt = cacheSavingsUsd * fx
+  const savedFormatted = savedAmt >= 1 ? `${currency}${savedAmt.toFixed(2)}` : `${currency}${savedAmt.toFixed(4)}`
+
+  // Background gradient
+  const bgGrad = ctx.createLinearGradient(0, 0, width, height)
+  bgGrad.addColorStop(0, '#0f172a') // dark slate 900
+  bgGrad.addColorStop(1, '#1e293b') // dark slate 800
+  ctx.fillStyle = bgGrad
+  ctx.fillRect(0, 0, width, height)
+
+  // Outer border with subtle neon glow
+  ctx.strokeStyle = '#334155'
+  ctx.lineWidth = 3
+  ctx.strokeRect(20, 20, width - 40, height - 40)
+
+  // Top header pill
+  ctx.fillStyle = '#1e293b'
+  ctx.beginPath()
+  ctx.roundRect(50, 45, 220, 44, 22)
+  ctx.fill()
+  ctx.strokeStyle = '#3b82f6'
+  ctx.lineWidth = 2
+  ctx.stroke()
+
+  ctx.fillStyle = '#38bdf8'
+  ctx.font = 'bold 20px system-ui, -apple-system, sans-serif'
+  ctx.fillText('⚡ Cost Meter', 75, 74)
+
+  // Date / timestamp
+  ctx.fillStyle = '#94a3b8'
+  ctx.font = '18px system-ui, -apple-system, sans-serif'
+  ctx.textAlign = 'right'
+  ctx.fillText(new Date().toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }), width - 60, 74)
+  ctx.textAlign = 'left'
+
+  // Model Name & Provider
+  ctx.fillStyle = '#f8fafc'
+  ctx.font = 'bold 36px system-ui, -apple-system, sans-serif'
+  const routeStr = provider ? `${provider}/${model}` : model
+  ctx.fillText(routeStr, 50, 145)
+
+  // Tariff Tier badge
+  ctx.fillStyle = tier.includes('Off-Peak') ? '#10b981' : '#f59e0b'
+  ctx.font = 'bold 20px system-ui, -apple-system, sans-serif'
+  ctx.fillText(tier, 50, 180)
+
+  // 4 Metric Tiles
+  const tiles = [
+    { label: 'SESSION SPEND', val: costFormatted, color: '#38bdf8' },
+    { label: 'TOTAL TOKENS', val: totalTok.toLocaleString(), color: '#f8fafc' },
+    { label: 'CACHE HIT RATE', val: `${hitRate}%`, color: '#34d399' },
+    { label: 'CACHE SAVED', val: `≈ ${savedFormatted} (${cacheSavingsPercent}%)`, color: '#a78bfa' },
+  ]
+
+  const tileW = 250
+  const tileH = 110
+  const startX = 50
+  const tileY = 215
+
+  tiles.forEach((t, i) => {
+    const x = startX + i * (tileW + 20)
+    ctx.fillStyle = 'rgba(30, 41, 59, 0.7)'
+    ctx.beginPath()
+    ctx.roundRect(x, tileY, tileW, tileH, 12)
+    ctx.fill()
+    ctx.strokeStyle = '#334155'
+    ctx.lineWidth = 1.5
+    ctx.stroke()
+
+    ctx.fillStyle = '#94a3b8'
+    ctx.font = 'bold 14px system-ui, -apple-system, sans-serif'
+    ctx.fillText(t.label, x + 16, tileY + 36)
+
+    ctx.fillStyle = t.color
+    ctx.font = 'bold 26px system-ui, -apple-system, sans-serif'
+    ctx.fillText(t.val, x + 16, tileY + 80)
+  })
+
+  // Turns mini-chart
+  const chartY = 360
+  const chartH = 190
+  const chartW = width - 100
+  ctx.fillStyle = 'rgba(15, 23, 42, 0.6)'
+  ctx.beginPath()
+  ctx.roundRect(50, chartY, chartW, chartH, 12)
+  ctx.fill()
+  ctx.strokeStyle = '#334155'
+  ctx.lineWidth = 1.5
+  ctx.stroke()
+
+  ctx.fillStyle = '#64748b'
+  ctx.font = 'bold 15px system-ui, -apple-system, sans-serif'
+  ctx.fillText('TURN HISTORY & STEP DYNAMICS', 70, chartY + 35)
+
+  const activeTurns = turns.slice(-25)
+  if (activeTurns.length > 0) {
+    const maxTok = Math.max(...activeTurns.map((t) => Number(t.tokens) || 1), 100)
+    const barW = Math.min(32, Math.floor((chartW - 60) / activeTurns.length) - 6)
+    const baseY = chartY + chartH - 30
+    const availH = 100
+
+    activeTurns.forEach((t, i) => {
+      const x = 70 + i * (barW + 8)
+      const tok = Number(t.tokens) || 0
+      const h = Math.max(6, Math.round((tok / maxTok) * availH))
+      const y = baseY - h
+
+      // Bar fill with cache hit proportion
+      ctx.fillStyle = '#3b82f6'
+      ctx.beginPath()
+      ctx.roundRect(x, y, barW, h, 4)
+      ctx.fill()
+
+      const hitTokens = Number(t.cacheReadTokens) || 0
+      if (hitTokens > 0) {
+        const hitH = Math.round((hitTokens / tok) * h)
+        ctx.fillStyle = '#10b981'
+        ctx.beginPath()
+        ctx.roundRect(x, baseY - hitH, barW, hitH, 4)
+        ctx.fill()
+      }
+    })
+  } else {
+    ctx.fillStyle = '#64748b'
+    ctx.font = '16px system-ui, -apple-system, sans-serif'
+    ctx.fillText('No turn history recorded yet.', 70, chartY + 100)
+  }
+
+  // Footer
+  ctx.fillStyle = '#64748b'
+  ctx.font = '16px system-ui, -apple-system, sans-serif'
+  ctx.fillText('Generated by @goodandready/dsh-cost-meter', 50, height - 35)
+
+  ctx.fillStyle = '#475569'
+  ctx.textAlign = 'right'
+  ctx.fillText('goodandready.app', width - 50, height - 35)
+  ctx.textAlign = 'left'
+
+  return canvas
+}

package/lib/index.js

@@ -32,6 +32,7 @@ export * from './projection.js'
 export * from './fx.js'
 export * from './alerts.js'
 export * from './commands.js'
+export * from './export.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'
@@ -130,6 +131,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 || {},
@@ -161,6 +165,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

@@ -3,6 +3,7 @@ import { createHash } from 'node:crypto'
 import { registerPluginUpdater } from './updater.js'
 import { getLastTurns } from './projection.js'
 import { calculateBurnRateAndProjection } from './analytics.js'
+import { getCachedFxState } from './fx.js'
 
 export const STATE_PATH = '/dsh-cost-meter/state'
 export const REFRESH_PATH = '/dsh-cost-meter/refresh'
@@ -107,8 +108,12 @@ export function registerRoutes(ctx, options) {
           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,

package/package.json

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