dsh-all-usage 1.0.9 → 1.1.2

package/lib/client.js

@@ -92,6 +92,10 @@ window.__ModuleLoader__.load({
       if (n < 1000000000) return trim1(n / 1000000) + 'M'
       return trim1(n / 1000000000) + 'B'
     }
+    function fmtCount(n, language) {
+      if (typeof n !== 'number' || !Number.isFinite(n)) return '0'
+      return Math.round(n).toLocaleString(language === 'en' ? 'en-US' : 'zh-CN')
+    }
     function rateOf(input, cacheRead) {
       const denom = input + cacheRead
       if (denom <= 0) return 0
@@ -106,6 +110,7 @@ window.__ModuleLoader__.load({
         refresh: [React.createElement('path', { key: 'a', d: 'M19 9a7 7 0 1 0 1.1 5.2M19 4v5h-5', ...base })],
         close: [React.createElement('path', { key: 'a', d: 'M6 6l12 12M18 6L6 18', ...base })],
         chart: [React.createElement('path', { key: 'a', d: 'M4 19V5M4 19h16M7 15l3-4 3 2 5-7', ...base })],
+        list: [React.createElement('path', { key: 'a', d: 'M6 6h12M6 12h12M6 18h12', ...base }), React.createElement('circle', { key: 'b', cx: 3.5, cy: 6, r: .7, fill: 'currentColor' }), React.createElement('circle', { key: 'c', cx: 3.5, cy: 12, r: .7, fill: 'currentColor' }), React.createElement('circle', { key: 'd', cx: 3.5, cy: 18, r: .7, fill: 'currentColor' })],
         cache: [React.createElement('path', { key: 'a', d: 'M12 4l7 4-7 4-7-4 7-4zM5 12l7 4 7-4M5 16l7 4 7-4', ...base })],
         wallet: [React.createElement('path', { key: 'a', d: 'M4 7.5A2.5 2.5 0 0 1 6.5 5H18v14H6.5A2.5 2.5 0 0 1 4 16.5zM4 8h14M14 13h.01', ...base })],
         clock: [React.createElement('path', { key: 'a', d: 'M12 6v6l4 2M20 12a8 8 0 1 1-16 0 8 8 0 0 1 16 0z', ...base })],
@@ -113,6 +118,7 @@ window.__ModuleLoader__.load({
         language: [React.createElement('circle', { key: 'a', cx: 12, cy: 12, r: 8, ...base }), React.createElement('path', { key: 'b', d: 'M4 12h16M12 4c2.1 2.2 3.2 4.9 3.2 8S14.1 17.8 12 20M12 4C9.9 6.2 8.8 8.9 8.8 12s1.1 5.8 3.2 8', ...base })],
         chevron: [React.createElement('path', { key: 'a', d: 'M7 10l5 5 5-5', ...base })],
         check: [React.createElement('path', { key: 'a', d: 'M5 12.5l4.2 4.1L19 7.3', ...base })],
+        plus: [React.createElement('path', { key: 'a', d: 'M12 5v14M5 12h14', ...base })],
         calendar: [React.createElement('path', { key: 'a', d: 'M6 4v3M18 4v3M4 9h16M5 6h14a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1z', ...base })],
       }
       return React.createElement('svg', { className: 'uh-line-icon ' + (props.className || ''), width: size, height: size, viewBox: '0 0 24 24', 'aria-hidden': true }, paths[props.name] || paths.chart)
@@ -130,7 +136,101 @@ window.__ModuleLoader__.load({
     function money(currency, n, language) {
       if (n === null || n === undefined) return '—'
       const sym = currency === 'CNY' ? '¥' : currency === 'USD' ? '$' : currency + ' '
-      return sym + n.toLocaleString(language === 'en' ? 'en-US' : 'zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
+      return sym + n.toLocaleString(language === 'en' ? 'en-US' : 'zh-CN', { minimumFractionDigits: 4, maximumFractionDigits: 4 })
+    }
+    function decimalParts(value) {
+      const raw = typeof value === 'number' ? String(value) : typeof value === 'string' ? value.trim().toLowerCase() : ''
+      const match = raw.match(/^(\d+)(?:\.(\d+))?(?:e([+-]?\d+))?$/)
+      if (!match) return { digits: 0n, scale: 0 }
+      let digits = (match[1] || '') + (match[2] || '')
+      let scale = (match[2] || '').length - (match[3] ? Number(match[3]) : 0)
+      if (scale < 0) { digits += '0'.repeat(-scale); scale = 0 }
+      if (scale > digits.length) digits = '0'.repeat(scale - digits.length + 1) + digits
+      while (scale > 0 && digits.length > 1 && digits.endsWith('0')) { digits = digits.slice(0, -1); scale -= 1 }
+      return { digits: BigInt(digits.replace(/^0+(?=\d)/, '') || '0'), scale }
+    }
+    function decimalText(value) {
+      const parts = decimalParts(value)
+      if (parts.digits === 0n) return '0'
+      const raw = parts.digits.toString()
+      if (parts.scale === 0) return raw
+      const padded = raw.padStart(parts.scale + 1, '0')
+      const split = padded.length - parts.scale
+      return padded.slice(0, split) + '.' + padded.slice(split)
+    }
+    function decimalAdd(left, right) {
+      const a = decimalParts(left); const b = decimalParts(right)
+      const scale = Math.max(a.scale, b.scale)
+      const value = a.digits * 10n ** BigInt(scale - a.scale) + b.digits * 10n ** BigInt(scale - b.scale)
+      return decimalText(value.toString() + (scale > 0 ? 'e-' + scale : ''))
+    }
+    function emptyCostAggregate() {
+      return { currency: 'USD', input: '0', output: '0', cacheRead: '0', cacheWrite: '0', baseTotal: '0', total: '0', pricedCalls: 0, unpricedCalls: 0, ambiguousCalls: 0, unsupportedCalls: 0 }
+    }
+    function costAggregate(row) {
+      const source = row && row.cost && typeof row.cost === 'object' ? row.cost : (row && typeof row === 'object' ? row : {})
+      const value = emptyCostAggregate()
+      value.currency = typeof source.currency === 'string' && source.currency !== '' ? source.currency : 'USD'
+      if (source.breakdown && typeof source.breakdown === 'object') {
+        if (source.status === 'priced') {
+          value.input = decimalText(source.breakdown.input)
+          value.output = decimalText(source.breakdown.output)
+          value.cacheRead = decimalText(source.breakdown.cacheRead)
+          value.cacheWrite = decimalText(source.breakdown.cacheWrite)
+          value.baseTotal = decimalText(source.baseTotal)
+          value.total = decimalText(source.total)
+          value.pricedCalls = 1
+        } else if (source.status === 'ambiguous') value.ambiguousCalls = 1
+        else if (source.status === 'unsupported') value.unsupportedCalls = 1
+        else value.unpricedCalls = 1
+        return value
+      }
+      for (const key of ['input', 'output', 'cacheRead', 'cacheWrite', 'baseTotal', 'total']) value[key] = decimalText(source[key])
+      for (const key of ['pricedCalls', 'unpricedCalls', 'ambiguousCalls', 'unsupportedCalls']) value[key] = Number.isFinite(source[key]) ? source[key] : 0
+      return value
+    }
+    function addCostAggregate(target, row) {
+      const value = costAggregate(row)
+      for (const key of ['input', 'output', 'cacheRead', 'cacheWrite', 'baseTotal', 'total']) target[key] = decimalAdd(target[key], value[key])
+      target.pricedCalls += value.pricedCalls
+      target.unpricedCalls += value.unpricedCalls
+      target.ambiguousCalls += value.ambiguousCalls
+      target.unsupportedCalls += value.unsupportedCalls
+      return target
+    }
+    function costDisplay(row, language) {
+      const value = costAggregate(row)
+      if (value.pricedCalls <= 0) return '—'
+      const numeric = Number(value.total)
+      return Number.isFinite(numeric) ? money(value.currency, numeric, language) : value.currency + ' ' + value.total
+    }
+    function costCoverageLabel(row, language) {
+      const value = costAggregate(row)
+      if (value.pricedCalls > 0 && value.unpricedCalls === 0 && value.ambiguousCalls === 0 && value.unsupportedCalls === 0) return language === 'en' ? value.pricedCalls + ' priced' : value.pricedCalls + ' 次已计价'
+      const pending = value.unpricedCalls + value.ambiguousCalls + value.unsupportedCalls
+      return pending > 0 ? (language === 'en' ? pending + ' unpriced' : pending + ' 次未计价') : (language === 'en' ? 'No pricing' : '暂无价格')
+    }
+    function pricingDraftOf(pricing) {
+      const config = pricing && pricing.config && typeof pricing.config === 'object' ? pricing.config : {}
+      const sync = config.sync && typeof config.sync === 'object' ? config.sync : {}
+      return {
+        sync: { autoEnabled: sync.autoEnabled === true, intervalMs: Number.isFinite(sync.intervalMs) ? sync.intervalMs : 21600000 },
+        providerAliases: config.providerAliases && typeof config.providerAliases === 'object' ? Object.assign({}, config.providerAliases) : {},
+        mappings: Array.isArray(config.mappings) ? config.mappings.map((mapping) => Object.assign({}, mapping)) : [],
+        overrides: Array.isArray(config.overrides) ? config.overrides.map((entry) => Object.assign({}, entry)) : [],
+      }
+    }
+    function pricingStatusLabel(status, language) {
+      const labels = { priced: ['已计价', 'priced'], unpriced: ['未计价', 'unpriced'], ambiguous: ['待确认', 'ambiguous'], unsupported: ['不支持', 'unsupported'] }
+      const pair = labels[status] || labels.unpriced
+      return language === 'en' ? pair[1] : pair[0]
+    }
+    function pricingModelKey(value) {
+      return String(value || '').trim().toLowerCase().replace(/^.*\//, '').split(':')[0]
+    }
+    function modelViewKey(value) {
+      const text = String(value || '').trim()
+      return text.includes(' / ') ? text : pricingModelKey(text)
     }
     function humanDate(date, language) {
       const parts = date.split('-')
@@ -170,7 +270,7 @@ window.__ModuleLoader__.load({
       return 'hsl(' + ((i * 137) % 360) + ', 70%, 55%)'
     }
     function rangeAgg(stats, range, utc, customRange) {
-      const empty = { totals: { turns: 0, sessions: 0, input: 0, output: 0, cacheRead: 0, cacheWrite: 0, reasoning: 0 }, perWs: [], perModel: [] }
+      const empty = { totals: { turns: 0, calls: 0, sessions: 0, input: 0, output: 0, cacheRead: 0, cacheWrite: 0, reasoning: 0, cost: emptyCostAggregate() }, perWs: [], perModel: [] }
       if (stats === null) return empty
       if (range === 'all') return { totals: stats.totals, perWs: stats.perWorkspace, perModel: stats.perModel || [] }
       const days = utc && Array.isArray(stats.byDayUtc) ? stats.byDayUtc : (Array.isArray(stats.byDay) ? stats.byDay : [])
@@ -188,7 +288,7 @@ window.__ModuleLoader__.load({
       } else {
         start = fmtDate(shiftCalendarDate(new Date(), -89, utc), utc)
       }
-      const t = { turns: 0, sessions: 0, input: 0, output: 0, cacheRead: 0, cacheWrite: 0, reasoning: 0 }
+      const t = { turns: 0, calls: 0, sessions: 0, input: 0, output: 0, cacheRead: 0, cacheWrite: 0, reasoning: 0, cost: emptyCostAggregate() }
       const per = new Map()
       const models = new Map()
       const sessionsInRange = new Set()
@@ -202,43 +302,143 @@ window.__ModuleLoader__.load({
         t.cacheRead += day.tokens.cacheRead
         t.cacheWrite += day.tokens.cacheWrite
         t.reasoning += day.tokens.reasoning
+        addCostAggregate(t.cost, day.cost)
         for (const w of day.byWorkspace) {
           let p = per.get(w.workspaceId)
-          if (p === undefined) { p = { workspaceId: w.workspaceId, turns: 0, input: 0, output: 0, cacheRead: 0, cacheWrite: 0, reasoning: 0 }; per.set(w.workspaceId, p) }
+          if (p === undefined) { p = { workspaceId: w.workspaceId, turns: 0, input: 0, output: 0, cacheRead: 0, cacheWrite: 0, reasoning: 0, cost: emptyCostAggregate() }; per.set(w.workspaceId, p) }
           p.input += w.input
           p.output += w.output
           p.cacheRead += w.cacheRead
           p.cacheWrite += w.cacheWrite
           p.reasoning += w.reasoning
+          addCostAggregate(p.cost, w.cost)
         }
         for (const w of day.perWorkspace) {
           let p = per.get(w.workspaceId)
-          if (p === undefined) { p = { workspaceId: w.workspaceId, turns: 0, input: 0, output: 0, cacheRead: 0, cacheWrite: 0, reasoning: 0 }; per.set(w.workspaceId, p) }
+          if (p === undefined) { p = { workspaceId: w.workspaceId, turns: 0, input: 0, output: 0, cacheRead: 0, cacheWrite: 0, reasoning: 0, cost: emptyCostAggregate() }; per.set(w.workspaceId, p) }
           p.turns += w.turns
         }
         for (const m of (day.byModel || [])) {
-          let p = models.get(m.model)
-          if (p === undefined) { p = { model: m.model, calls: 0, input: 0, output: 0, cacheRead: 0, cacheWrite: 0, reasoning: 0 }; models.set(m.model, p) }
+          const key = m.identityKey || m.model
+          let p = models.get(key)
+          if (p === undefined) { p = { ...m, calls: 0, input: 0, output: 0, cacheRead: 0, cacheWrite: 0, reasoning: 0, cost: emptyCostAggregate() }; models.set(key, p) }
           p.calls += m.calls; p.input += m.input; p.output += m.output; p.cacheRead += m.cacheRead; p.cacheWrite += m.cacheWrite; p.reasoning += m.reasoning
+          t.calls += Number.isFinite(m.calls) ? m.calls : 0
+          addCostAggregate(p.cost, m.cost)
         }
       }
       t.sessions = sessionsInRange.size
       return { totals: t, perWs: Array.from(per.values()), perModel: Array.from(models.values()) }
     }
-    function modelParts(label, unknownProvider, unknownModel) {
-      const text = typeof label === 'string' ? label : ''
-      const cut = text.indexOf(' / ')
-      return cut >= 0 ? { provider: text.slice(0, cut) || unknownProvider, model: text.slice(cut + 3) || unknownModel } : { provider: unknownProvider, model: text || unknownModel }
+    function resolveRangeBounds(stats, range, utc, customRange) {
+      const days = utc && Array.isArray(stats && stats.byDayUtc) ? stats.byDayUtc : (Array.isArray(stats && stats.byDay) ? stats.byDay : [])
+      const latest = fmtDate(new Date(), utc)
+      if (range === 'custom') {
+        const normalized = normalizeCustomRange(customRange, utc)
+        return normalized === null ? null : { start: normalized.start, end: normalized.end }
+      }
+      if (range === 'today') return { start: latest, end: latest }
+      if (range === '30d') return { start: fmtDate(shiftCalendarDate(new Date(), -29, utc), utc), end: latest }
+      if (range === '90d') return { start: fmtDate(shiftCalendarDate(new Date(), -89, utc), utc), end: latest }
+      const bounds = availableDateBounds(days, latest)
+      return { start: bounds.min, end: bounds.max }
+    }
+    function makeUsageScope(stats, range, utc, customRange, workspaceId, provider, modelKey) {
+      const bounds = resolveRangeBounds(stats, range, utc, customRange)
+      if (bounds === null) return null
+      return { start: bounds.start, end: bounds.end, utc: utc === true, workspaceId: workspaceId || null, provider: provider || null, modelKey: modelKey || null }
+    }
+    function usageScopeKey(scope) {
+      return scope === null ? '' : JSON.stringify({ start: scope.start, end: scope.end, utc: scope.utc === true, workspaceId: scope.workspaceId || null, provider: scope.provider || null, modelKey: scope.modelKey || null })
+    }
+    function rowTokens(row) {
+      const tokens = row && row.tokens && typeof row.tokens === 'object' ? row.tokens : row || {}
+      return { input: Number.isFinite(tokens.input) ? tokens.input : 0, output: Number.isFinite(tokens.output) ? tokens.output : 0, cacheRead: Number.isFinite(tokens.cacheRead) ? tokens.cacheRead : 0, cacheWrite: Number.isFinite(tokens.cacheWrite) ? tokens.cacheWrite : 0, reasoning: Number.isFinite(tokens.reasoning) ? tokens.reasoning : 0 }
+    }
+    function buildTrendRows(rows, bounds, utc) {
+      if (bounds === null || typeof bounds !== 'object') return []
+      const source = new Map((Array.isArray(rows) ? rows : []).filter((row) => row && typeof row.date === 'string').map((row) => [row.date, row]))
+      const startParts = bounds.start.split('-').map(Number)
+      const endParts = bounds.end.split('-').map(Number)
+      const cursor = utc ? new Date(Date.UTC(startParts[0], startParts[1] - 1, startParts[2])) : new Date(startParts[0], startParts[1] - 1, startParts[2])
+      const end = utc ? new Date(Date.UTC(endParts[0], endParts[1] - 1, endParts[2])) : new Date(endParts[0], endParts[1] - 1, endParts[2])
+      const result = []
+      while (cursor.getTime() <= end.getTime()) {
+        const date = fmtDate(cursor, utc)
+        const row = source.get(date)
+        const tokens = rowTokens(row)
+        result.push({ date, turns: row && Number.isFinite(row.turns) ? row.turns : 0, calls: row && Number.isFinite(row.calls) ? row.calls : 0, sessions: row && Number.isFinite(row.sessions) ? row.sessions : 0, tokens, cost: costAggregate(row), total: tokens.input + tokens.output + tokens.cacheRead + tokens.cacheWrite + tokens.reasoning })
+        if (utc) cursor.setUTCDate(cursor.getUTCDate() + 1)
+        else cursor.setDate(cursor.getDate() + 1)
+      }
+      return result
+    }
+    function buildTrendHourlyRows(rows, utc) {
+      const result = []
+      for (const row of (Array.isArray(rows) ? rows : [])) {
+        if (row === null || typeof row !== 'object') continue
+        const time = Number.isFinite(row.time) ? row.time : (typeof row.date === 'string' ? Date.parse(row.date) : NaN)
+        if (!Number.isFinite(time)) continue
+        const tokens = rowTokens(row)
+        result.push({ date: fmtDate(new Date(time), utc), time, turns: Number.isFinite(row.turns) ? row.turns : 0, calls: Number.isFinite(row.calls) ? row.calls : 0, sessions: Number.isFinite(row.sessions) ? row.sessions : 0, tokens, cost: costAggregate(row), total: tokens.input + tokens.output + tokens.cacheRead + tokens.cacheWrite + tokens.reasoning })
+      }
+      return result.sort((a, b) => a.time - b.time)
+    }
+    function trendHourLabel(time, language, detailed) {
+      const options = detailed
+        ? { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', hour12: false }
+        : { month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', hour12: false }
+      if (language === 'en') options.timeZone = 'UTC'
+      return new Date(time).toLocaleString(language === 'en' ? 'en-US' : 'zh-CN', options)
+    }
+    function trendRowLabel(row, language, detailed) {
+      if (row && Number.isFinite(row.time)) return trendHourLabel(row.time, language, detailed)
+      if (!row || typeof row.date !== 'string') return ''
+      return detailed ? humanDate(row.date, language) : row.date.slice(5)
+    }
+    function trendRowKey(row, index) {
+      return row && Number.isFinite(row.time) ? String(row.time) : (row && typeof row.date === 'string' ? row.date : String(index))
+    }
+    function trendRowDate(row) {
+      return row && typeof row.date === 'string' ? row.date : ''
+    }
+    function buildTrendGeometry(rows, visible, width = 900, height = 250) {
+      const keys = Array.isArray(visible) && visible.length > 0 ? visible : ['total']
+      const padding = { left: 46, right: 14, top: 14, bottom: 30 }
+      const innerWidth = Math.max(1, width - padding.left - padding.right)
+      const innerHeight = Math.max(1, height - padding.top - padding.bottom)
+      const values = (Array.isArray(rows) ? rows : []).flatMap((row) => keys.map((key) => key === 'total' ? row.total : row.tokens[key] || 0))
+      const max = Math.max(1, ...values)
+      const points = {}
+      for (const key of keys) points[key] = (Array.isArray(rows) ? rows : []).map((row, index) => ({ x: padding.left + (rows.length > 1 ? index * innerWidth / (rows.length - 1) : innerWidth / 2), y: padding.top + innerHeight - ((key === 'total' ? row.total : row.tokens[key] || 0) / max) * innerHeight, value: key === 'total' ? row.total : row.tokens[key] || 0 }))
+      return { width, height, padding, max, points }
+    }
+    function modelParts(row, unknownProvider, unknownModel) {
+      const structuredModel = typeof row.actualModel === 'string' && row.actualModel !== '' ? row.actualModel : (typeof row.requestedModel === 'string' && row.requestedModel !== '' ? row.requestedModel : '')
+      const displayModel = typeof row.model === 'string' && row.model !== '' ? row.model : unknownModel
+      const separator = displayModel.indexOf(' / ')
+      const rowProvider = typeof row.provider === 'string' && row.provider !== '' ? row.provider : ''
+      const provider = rowProvider || (separator > 0 ? displayModel.slice(0, separator) : unknownProvider)
+      const providerPrefix = provider !== unknownProvider ? provider + ' / ' : ''
+      const fallbackModel = structuredModel !== '' ? displayModel : providerPrefix !== '' && displayModel.startsWith(providerPrefix) ? displayModel.slice(providerPrefix.length) : separator > 0 ? displayModel.slice(separator + 3) : displayModel
+      const model = modelViewKey(structuredModel || fallbackModel) || unknownModel
+      return { provider, model }
+    }
+    function modelOptionLabel(row, unknownProvider, unknownModel) {
+      const parts = modelParts(row, unknownProvider, unknownModel)
+      const base = parts.provider + ' / ' + parts.model
+      return row && row.requestedModel && row.actualModel && row.requestedModel !== row.actualModel ? base + ' ← ' + row.requestedModel : base
     }
     function aggregateModelRows(rows, view, unknownProvider, unknownModel) {
       if (view === 'route') return rows.slice()
       const grouped = new Map()
       for (const row of rows) {
-        const parts = modelParts(row.model, unknownProvider, unknownModel)
+        const parts = modelParts(row, unknownProvider, unknownModel)
         const key = view === 'model' ? parts.model : parts.provider
         let item = grouped.get(key)
-        if (item === undefined) { item = { model: key, calls: 0, input: 0, output: 0, cacheRead: 0, cacheWrite: 0, reasoning: 0 }; grouped.set(key, item) }
+        if (item === undefined) { item = { model: key, provider: view === 'provider' ? key : parts.provider, calls: 0, input: 0, output: 0, cacheRead: 0, cacheWrite: 0, reasoning: 0, cost: emptyCostAggregate() }; grouped.set(key, item) }
         item.calls += row.calls; item.input += row.input; item.output += row.output; item.cacheRead += row.cacheRead; item.cacheWrite += row.cacheWrite; item.reasoning += row.reasoning
+        addCostAggregate(item.cost, row.cost)
       }
       return Array.from(grouped.values())
     }
@@ -295,20 +495,375 @@ window.__ModuleLoader__.load({
       return state.value
     }
 
+    function smoothTrendPath(points) {
+      if (!Array.isArray(points) || points.length === 0) return ''
+      if (points.length === 1) return 'M' + points[0].x.toFixed(2) + ' ' + points[0].y.toFixed(2)
+      const slopes = []
+      for (let i = 0; i < points.length - 1; i += 1) {
+        const dx = points[i + 1].x - points[i].x
+        slopes.push(dx === 0 ? 0 : (points[i + 1].y - points[i].y) / dx)
+      }
+      const tangents = new Array(points.length).fill(0)
+      tangents[0] = slopes[0]
+      tangents[points.length - 1] = slopes[slopes.length - 1]
+      for (let i = 1; i < points.length - 1; i += 1) {
+        const before = slopes[i - 1]
+        const after = slopes[i]
+        tangents[i] = before * after <= 0 ? 0 : (before + after) / 2
+      }
+      // Fritsch-Carlson limiting keeps the smooth curve monotone between points.
+      for (let i = 0; i < slopes.length; i += 1) {
+        if (slopes[i] === 0) { tangents[i] = 0; tangents[i + 1] = 0; continue }
+        const a = tangents[i] / slopes[i]
+        const b = tangents[i + 1] / slopes[i]
+        const magnitude = a * a + b * b
+        if (magnitude > 9) {
+          const scale = 3 / Math.sqrt(magnitude)
+          tangents[i] = scale * a * slopes[i]
+          tangents[i + 1] = scale * b * slopes[i]
+        }
+      }
+      let path = 'M' + points[0].x.toFixed(2) + ' ' + points[0].y.toFixed(2)
+      for (let i = 0; i < points.length - 1; i += 1) {
+        const dx = points[i + 1].x - points[i].x
+        const c1x = points[i].x + dx / 3
+        const c1y = points[i].y + tangents[i] * dx / 3
+        const c2x = points[i + 1].x - dx / 3
+        const c2y = points[i + 1].y - tangents[i + 1] * dx / 3
+        path += ' C' + c1x.toFixed(2) + ' ' + c1y.toFixed(2) + ' ' + c2x.toFixed(2) + ' ' + c2y.toFixed(2) + ' ' + points[i + 1].x.toFixed(2) + ' ' + points[i + 1].y.toFixed(2)
+      }
+      return path
+    }
+    function trendPathLength(points) {
+      if (!Array.isArray(points) || points.length < 2) return 1
+      let length = 0
+      for (let i = 1; i < points.length; i += 1) {
+        const dx = points[i].x - points[i - 1].x
+        const dy = points[i].y - points[i - 1].y
+        length += Math.sqrt(dx * dx + dy * dy)
+      }
+      return Math.max(1, Math.ceil(length * 1.35 + 2))
+    }
+    const DONUT_COLORS = ['#0a84ff', '#30d158', '#bf5af2', '#ff9f0a', '#ff375f', '#64d2ff']
+    function tokenMagnitude(value, language) {
+      const magnitude = chineseMagnitude(value, language)
+      return magnitude !== '' ? magnitude : fmtCompact(value)
+    }
+    function tokenDisplay(value, language) {
+      return tokenMagnitude(value, language) + (language === 'en' ? ' tokens' : ' Token')
+    }
+    function buildDonutSegments(items, otherLabel, limit = 5) {
+      const topLimit = Math.max(1, Number.isInteger(limit) ? limit : 5)
+      const normalized = (Array.isArray(items) ? items : []).map((item, index) => ({
+        label: item && item.label !== undefined ? String(item.label) : '',
+        value: Number(item && item.value),
+        color: item && typeof item.color === 'string' && item.color !== '' ? item.color : DONUT_COLORS[index % DONUT_COLORS.length],
+        cost: costAggregate(item),
+      })).filter((item) => item.label !== '' && Number.isFinite(item.value) && item.value > 0).sort((a, b) => b.value - a.value)
+      const total = normalized.reduce((sum, item) => sum + item.value, 0)
+      if (total <= 0) return { total: 0, segments: [] }
+      const segments = normalized.slice(0, topLimit)
+      const remainderItems = normalized.slice(topLimit)
+      const remainder = remainderItems.reduce((sum, item) => sum + item.value, 0)
+      if (remainder > 0) {
+        const remainderCost = emptyCostAggregate()
+        for (const item of remainderItems) addCostAggregate(remainderCost, item.cost)
+        segments.push({ label: otherLabel + ' (' + (normalized.length - topLimit) + ')', value: remainder, color: '#b8c2cf', cost: remainderCost, other: true })
+      }
+      let angle = -Math.PI / 2
+      return {
+        total,
+        segments: segments.map((item, index) => {
+          const sweep = item.value / total * Math.PI * 2
+          const gap = segments.length > 1 ? Math.min(.018, sweep / 3) : 0
+          const startAngle = angle + gap
+          const endAngle = angle + sweep - gap
+          angle += sweep
+          return { ...item, index, percentage: item.value / total * 100, startAngle: endAngle <= startAngle ? angle - sweep : startAngle, endAngle: endAngle <= startAngle ? angle : endAngle }
+        }),
+      }
+    }
+    function donutArcPath(cx, cy, outerRadius, innerRadius, startAngle, endAngle) {
+      const sweep = Math.max(0, endAngle - startAngle)
+      const point = (radius, angle) => ({ x: cx + radius * Math.cos(angle), y: cy + radius * Math.sin(angle) })
+      const outerStart = point(outerRadius, startAngle)
+      const innerStart = point(innerRadius, startAngle)
+      if (sweep >= Math.PI * 2 - .0001) {
+        const outerMid = point(outerRadius, startAngle + Math.PI)
+        const innerMid = point(innerRadius, startAngle + Math.PI)
+        return 'M' + outerStart.x.toFixed(2) + ' ' + outerStart.y.toFixed(2) + ' A' + outerRadius + ' ' + outerRadius + ' 0 1 1 ' + outerMid.x.toFixed(2) + ' ' + outerMid.y.toFixed(2) + ' A' + outerRadius + ' ' + outerRadius + ' 0 1 1 ' + outerStart.x.toFixed(2) + ' ' + outerStart.y.toFixed(2) + ' L' + innerStart.x.toFixed(2) + ' ' + innerStart.y.toFixed(2) + ' A' + innerRadius + ' ' + innerRadius + ' 0 1 0 ' + innerMid.x.toFixed(2) + ' ' + innerMid.y.toFixed(2) + ' A' + innerRadius + ' ' + innerRadius + ' 0 1 0 ' + innerStart.x.toFixed(2) + ' ' + innerStart.y.toFixed(2) + ' Z'
+      }
+      const outerEnd = point(outerRadius, endAngle)
+      const innerEnd = point(innerRadius, endAngle)
+      const largeArc = sweep > Math.PI ? 1 : 0
+      return 'M' + outerStart.x.toFixed(2) + ' ' + outerStart.y.toFixed(2) + ' A' + outerRadius + ' ' + outerRadius + ' 0 ' + largeArc + ' 1 ' + outerEnd.x.toFixed(2) + ' ' + outerEnd.y.toFixed(2) + ' L' + innerEnd.x.toFixed(2) + ' ' + innerEnd.y.toFixed(2) + ' A' + innerRadius + ' ' + innerRadius + ' 0 ' + largeArc + ' 0 ' + innerStart.x.toFixed(2) + ' ' + innerStart.y.toFixed(2) + ' Z'
+    }
+    function donutArcLinePath(cx, cy, radius, startAngle, endAngle) {
+      const sweep = Math.max(0, endAngle - startAngle)
+      const point = (angle) => ({ x: cx + radius * Math.cos(angle), y: cy + radius * Math.sin(angle) })
+      const start = point(startAngle)
+      if (sweep >= Math.PI * 2 - .0001) {
+        const mid = point(startAngle + Math.PI)
+        return 'M' + start.x.toFixed(2) + ' ' + start.y.toFixed(2) + ' A' + radius + ' ' + radius + ' 0 1 1 ' + mid.x.toFixed(2) + ' ' + mid.y.toFixed(2) + ' A' + radius + ' ' + radius + ' 0 1 1 ' + start.x.toFixed(2) + ' ' + start.y.toFixed(2)
+      }
+      const end = point(endAngle)
+      return 'M' + start.x.toFixed(2) + ' ' + start.y.toFixed(2) + ' A' + radius + ' ' + radius + ' 0 ' + (sweep > Math.PI ? 1 : 0) + ' 1 ' + end.x.toFixed(2) + ' ' + end.y.toFixed(2)
+    }
+    function UsageDonutChart(props) {
+      const language = props.language === 'en' ? 'en' : 'zh'
+      const tr = (zh, en) => language === 'en' ? en : zh
+      const [activeIndex, setActiveIndex] = React.useState(null)
+      const [tooltipPosition, setTooltipPosition] = React.useState(null)
+      const data = buildDonutSegments(props.items, tr('其他', 'Other'))
+      const activeSegment = activeIndex === null ? null : (data.segments[activeIndex] || null)
+      if (data.total <= 0) return null
+      const cx = 130
+      const cy = 130
+      const outerRadius = 94
+      const innerRadius = 61
+      const percentText = (value) => (value >= 10 ? Math.round(value) : Math.round(value * 10) / 10) + '%'
+      const updatePointer = (event) => {
+        const visual = event.currentTarget.ownerSVGElement?.parentElement
+        const box = visual?.getBoundingClientRect()
+        if (!box) return
+        const tooltipWidth = 198
+        const tooltipHeight = 82
+        setTooltipPosition({ left: Math.max(8, Math.min(Math.max(8, box.width - tooltipWidth), event.clientX - box.left + 14)), top: Math.max(8, Math.min(Math.max(8, box.height - tooltipHeight), event.clientY - box.top + 14)) })
+      }
+      const clearPointer = () => { setActiveIndex(null); setTooltipPosition(null) }
+      return React.createElement('div', { className: 'uh-donut-chart', 'aria-label': props.title },
+        React.createElement('div', { className: 'uh-donut-title' }, React.createElement(LineIcon, { name: props.icon || 'chart', size: 16 }), props.title),
+        React.createElement('div', { className: 'uh-donut-layout' },
+          React.createElement('div', { className: 'uh-donut-visual' },
+            React.createElement('svg', { className: 'uh-donut-svg', viewBox: '0 0 260 260', role: 'img', 'aria-label': props.title + ' ' + tokenDisplay(data.total, language) },
+              React.createElement('circle', { cx, cy, r: (outerRadius + innerRadius) / 2, className: 'uh-donut-track', fill: 'none', stroke: 'var(--dsw-alias-bg-layer-2)', strokeWidth: outerRadius - innerRadius }),
+              data.segments.map((segment) => React.createElement('path', { key: 'donut-' + segment.index, d: donutArcLinePath(cx, cy, (outerRadius + innerRadius) / 2, segment.startAngle, segment.endAngle), className: 'uh-donut-segment' + (activeIndex === segment.index ? ' uh-active' : ''), fill: 'none', stroke: segment.color, strokeWidth: outerRadius - innerRadius, strokeLinecap: 'butt', strokeLinejoin: 'round', pathLength: 1, style: { animationDelay: (segment.index * 90) + 'ms' }, tabIndex: 0, 'aria-label': segment.label + ' ' + tokenDisplay(segment.value, language) + ' ' + percentText(segment.percentage) + ' ' + costDisplay(segment.cost, language), onMouseEnter: (event) => { setActiveIndex(segment.index); updatePointer(event) }, onMouseMove: updatePointer, onMouseLeave: clearPointer, onFocus: () => { setActiveIndex(segment.index); setTooltipPosition({ left: 12, top: 12 }) }, onBlur: clearPointer })),
+            ),
+            activeSegment ? React.createElement('div', { className: 'uh-donut-tooltip', style: tooltipPosition ? { left: tooltipPosition.left, top: tooltipPosition.top } : undefined },
+              React.createElement('span', { className: 'uh-donut-dot', style: { background: activeSegment.color } }),
+              React.createElement('div', {},
+                React.createElement('strong', {}, activeSegment.label),
+                React.createElement('span', {}, tokenDisplay(activeSegment.value, language) + ' · ' + percentText(activeSegment.percentage)),
+                React.createElement('span', { className: 'uh-donut-tooltip-cost' }, costDisplay(activeSegment.cost, language)),
+              ),
+            ) : null,
+            React.createElement('div', { className: 'uh-donut-center' },
+              React.createElement('strong', {}, tokenMagnitude(data.total, language)),
+              React.createElement('span', {}, language === 'en' ? 'tokens' : 'Token'),
+            ),
+          ),
+          React.createElement('div', { className: 'uh-donut-legend', role: 'list' },
+            data.segments.map((segment) => React.createElement('div', { key: 'legend-' + segment.index, className: 'uh-donut-legend-row', role: 'listitem' },
+              React.createElement('span', { className: 'uh-donut-dot', style: { background: segment.color } }),
+              React.createElement('div', { className: 'uh-donut-legend-copy' },
+                React.createElement('strong', { title: segment.label }, segment.label),
+              ),
+              React.createElement('div', { className: 'uh-donut-legend-metrics' },
+                React.createElement('span', {}, tokenDisplay(segment.value, language)),
+                React.createElement('span', { className: 'uh-donut-cost' }, costDisplay(segment.cost, language)),
+              ),
+              React.createElement('strong', { className: 'uh-donut-percent' }, percentText(segment.percentage)),
+            )),
+          ),
+        ),
+      )
+    }
+    function trendSeriesLabel(key, language) {
+      const labels = {
+        total: language === 'en' ? 'Total' : '总处理',
+        input: language === 'en' ? 'Input' : '输入',
+        cacheRead: language === 'en' ? 'Cache hits' : '缓存命中',
+        cacheWrite: language === 'en' ? 'Cache writes' : '缓存写入',
+        output: language === 'en' ? 'Output' : '输出',
+        reasoning: language === 'en' ? 'Reasoning' : '推理',
+      }
+      return labels[key] || key
+    }
+    function trendSeriesValue(row, key) {
+      return key === 'total' ? row.total : (row.tokens && Number.isFinite(row.tokens[key]) ? row.tokens[key] : 0)
+    }
+    function UsageTrendChart(props) {
+      const language = props.language === 'en' ? 'en' : 'zh'
+      const tr = (zh, en) => language === 'en' ? en : zh
+      const rows = Array.isArray(props.rows) ? props.rows : []
+      const visible = Array.isArray(props.visible) && props.visible.length > 0 ? props.visible : ['total']
+      const [hoverIndex, setHoverIndex] = React.useState(null)
+      const [tooltipIndex, setTooltipIndex] = React.useState(null)
+      const width = 900
+      const height = 280
+      const geometry = buildTrendGeometry(rows, visible, width, height)
+      const colors = { total: '#f4c542', input: '#5aa9ff', cacheRead: '#44d483', cacheWrite: '#d98bff', output: '#ff8c66', reasoning: '#aab4c4' }
+      const pathFor = (points) => smoothTrendPath(points)
+      const bottomY = height - geometry.padding.bottom
+      const areaPathFor = (points) => {
+        if (!Array.isArray(points) || points.length === 0) return ''
+        return pathFor(points) + ' L' + points[points.length - 1].x.toFixed(2) + ' ' + bottomY + ' L' + points[0].x.toFixed(2) + ' ' + bottomY + ' Z'
+      }
+      const gradientOpacity = { total: .20, input: .16, cacheRead: .18, cacheWrite: .14, output: .16, reasoning: .10 }
+      const tickIndexes = rows.length <= 1 ? [0] : Array.from(new Set([0, Math.floor((rows.length - 1) / 4), Math.floor((rows.length - 1) / 2), Math.floor((rows.length - 1) * 3 / 4), rows.length - 1]))
+      const chartReady = !props.loading && !props.error && rows.length > 0
+      const hourly = rows.length > 0 && Number.isFinite(rows[0].time)
+      const chartAriaLabel = hourly ? tr('每小时 Token 使用趋势，选择小时查看当天请求日志', 'Hourly Token usage trend; select an hour to view request logs') : tr('每日 Token 使用趋势，选择日期查看请求日志', 'Daily Token usage trend; select a date to view request logs')
+      const hovered = hoverIndex === null ? null : (rows[hoverIndex] || null)
+      const hoverPoint = hoverIndex === null ? null : ((geometry.points[visible[0]] || [])[hoverIndex] || null)
+      const tooltipRow = tooltipIndex === null ? null : (rows[tooltipIndex] || null)
+      const tooltipPoint = tooltipIndex === null ? null : ((geometry.points[visible[0]] || [])[tooltipIndex] || null)
+      const tooltipVisible = hoverIndex !== null && tooltipRow !== null && tooltipPoint !== null
+      const tooltipSide = tooltipPoint !== null && tooltipPoint.x > width * .68 ? ' uh-left' : ' uh-right'
+      const tooltipStyle = tooltipPoint === null ? undefined : { left: (tooltipPoint.x / width * 100).toFixed(2) + '%', top: Math.max(23, Math.min(77, tooltipPoint.y / height * 100)).toFixed(2) + '%' }
+      const activateHover = (index) => { setHoverIndex(index); setTooltipIndex(index) }
+      const toggle = (key) => {
+        if (typeof props.onToggle === 'function') props.onToggle(key)
+      }
+      const chartBody = props.loading
+        ? React.createElement('div', { className: 'uh-trend-stage uh-trend-loading', role: 'status', 'aria-label': tr('正在加载趋势', 'Loading trend') }, React.createElement('span', { className: 'uh-trend-spinner', 'aria-hidden': true }))
+        : props.error
+          ? React.createElement('div', { className: 'uh-trend-stage uh-trend-message', role: 'alert' }, props.error)
+          : rows.length === 0
+            ? React.createElement('div', { className: 'uh-trend-stage uh-trend-message' }, tr('该范围内暂无趋势数据', 'No trend data in this range'))
+            : React.createElement('div', { className: 'uh-trend-chart-wrap' },
+              React.createElement('svg', { className: 'uh-trend-svg', viewBox: '0 0 ' + width + ' ' + height, role: 'group', 'aria-label': chartAriaLabel },
+                [0, 0.5, 1].map((ratio) => React.createElement(React.Fragment, { key: ratio },
+                  React.createElement('line', { x1: geometry.padding.left, x2: width - geometry.padding.right, y1: geometry.padding.top + (height - geometry.padding.top - geometry.padding.bottom) * ratio, y2: geometry.padding.top + (height - geometry.padding.top - geometry.padding.bottom) * ratio, className: 'uh-trend-grid' }),
+                  React.createElement('text', { x: geometry.padding.left - 7, y: geometry.padding.top + (height - geometry.padding.top - geometry.padding.bottom) * ratio + 4, className: 'uh-trend-axis-label', textAnchor: 'end' }, fmtCompact(Math.round(geometry.max * (1 - ratio)))),
+                )),
+                React.createElement('defs', {},
+                  visible.map((key) => React.createElement('linearGradient', { key: key, id: 'uh-trend-gradient-' + key, x1: '0', y1: '0', x2: '0', y2: '1' },
+                    React.createElement('stop', { offset: '4%', stopColor: colors[key] || '#9aa4b2', stopOpacity: gradientOpacity[key] || .12 }),
+                    React.createElement('stop', { offset: '96%', stopColor: colors[key] || '#9aa4b2', stopOpacity: 0 }),
+                  )),
+                ),
+                visible.map((key, seriesIndex) => {
+                  const areaPath = areaPathFor(geometry.points[key] || [])
+                  return areaPath === '' ? null : React.createElement('path', { key: 'area-' + key, d: areaPath, className: 'uh-trend-area', 'data-series': key, fill: 'url(#uh-trend-gradient-' + key + ')', style: { animationDelay: (80 + seriesIndex * 80) + 'ms' } })
+                }),
+                visible.map((key) => React.createElement('path', { key: 'line-base-' + key, d: pathFor(geometry.points[key] || []), className: 'uh-trend-line', 'data-series': key, stroke: colors[key] || '#9aa4b2' })),
+                visible.map((key, seriesIndex) => {
+                  const points = geometry.points[key] || []
+                  const drawLength = trendPathLength(points)
+                  return React.createElement('path', { key: 'line-draw-' + key, d: pathFor(points), className: 'uh-trend-line-draw', 'data-series': key, stroke: colors[key] || '#9aa4b2', style: { '--uh-draw-length': drawLength + 'px', animationDelay: (seriesIndex * 90) + 'ms' } })
+                }),
+                visible.map((key) => {
+                  const points = geometry.points[key] || []
+                  if (points.length !== 1) return null
+                  const point = points[0]
+                  return React.createElement('circle', { key: 'single-point-' + key, cx: point.x, cy: point.y, r: 4, className: 'uh-trend-point', fill: colors[key] || '#9aa4b2' })
+                }),
+                hoverIndex !== null && hoverPoint ? React.createElement(React.Fragment, { key: 'hover-' + hoverIndex },
+                  React.createElement('line', { x1: hoverPoint.x, x2: hoverPoint.x, y1: geometry.padding.top, y2: bottomY, className: 'uh-trend-cursor' }),
+                  visible.map((key) => { const point = (geometry.points[key] || [])[hoverIndex]; return point ? React.createElement('circle', { key: key, cx: point.x, cy: point.y, r: 4, className: 'uh-trend-point', fill: colors[key] || '#9aa4b2' }) : null }),
+                ) : null,
+                rows.map((row, index) => {
+                  const point = (geometry.points[visible[0]] || [])[index]
+                  if (!point) return null
+                  const next = (geometry.points[visible[0]] || [])[index + 1]
+                  const cellWidth = next ? Math.max(8, next.x - point.x) : (index > 0 ? Math.max(8, point.x - (geometry.points[visible[0]] || [])[index - 1].x) : 24)
+                  return React.createElement('rect', { key: trendRowKey(row, index), x: Math.max(geometry.padding.left, point.x - cellWidth / 2), y: geometry.padding.top, width: cellWidth, height: height - geometry.padding.top - geometry.padding.bottom, className: 'uh-trend-hit', tabIndex: 0, role: 'button', 'aria-label': trendRowLabel(row, language, true) + ' ' + trendSeriesLabel('total', language) + ' ' + fmtCompact(row.total), onMouseEnter: () => activateHover(index), onMouseLeave: () => setHoverIndex(null), onFocus: () => activateHover(index), onBlur: () => setHoverIndex(null), onKeyDown: (event) => { if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); if (typeof props.onPointClick === 'function') props.onPointClick(trendRowDate(row)) } }, onClick: () => { if (typeof props.onPointClick === 'function') props.onPointClick(trendRowDate(row)) } })
+                }),
+                tickIndexes.map((index) => {
+                  const point = (geometry.points[visible[0]] || [])[index]
+                  const row = rows[index]
+                  return point && row ? React.createElement('text', { key: trendRowKey(row, index), x: point.x, y: height - 8, className: 'uh-trend-axis-label', textAnchor: index === 0 ? 'start' : index === rows.length - 1 ? 'end' : 'middle' }, trendRowLabel(row, language, false)) : null
+                }),
+              ),
+              tooltipRow && tooltipPoint ? React.createElement('div', { className: 'uh-trend-tooltip' + tooltipSide + (tooltipVisible ? ' uh-visible' : ''), style: tooltipStyle, 'aria-hidden': !tooltipVisible },
+                React.createElement('strong', { className: 'uh-trend-tooltip-title' }, trendRowLabel(tooltipRow, language, true)),
+                visible.map((key) => React.createElement('div', { key, className: 'uh-trend-tooltip-row', style: { color: colors[key] || '#9aa4b2' } },
+                  React.createElement('span', { className: 'uh-trend-dot', style: { background: colors[key] || '#9aa4b2' } }),
+                  React.createElement('span', { className: 'uh-trend-tooltip-label' }, trendSeriesLabel(key, language)),
+                  React.createElement('strong', { className: 'uh-trend-tooltip-value' }, fmtCompact(trendSeriesValue(tooltipRow, key))),
+                )),
+              ) : null,
+            )
+      return React.createElement('div', { className: 'uh-panel uh-trend-panel' },
+        React.createElement('div', { className: 'uh-trend-head' },
+          React.createElement('div', {}, React.createElement('h3', { className: 'uh-tbl-title uh-title-with-icon' }, React.createElement(LineIcon, { name: 'chart', size: 16 }), tr('Token 使用趋势', 'Token Usage Trend')), React.createElement('div', { className: 'uh-note' }, props.rangeLabel || '')),
+          chartReady ? React.createElement('div', { className: 'uh-note' }, tr('点击数据点查看当日明细', 'Click a point to inspect that day')) : null,
+        ),
+        chartBody,
+        chartReady ? React.createElement('div', { className: 'uh-trend-legend' },
+          ['total', 'input', 'cacheRead', 'cacheWrite', 'output', 'reasoning'].map((key) => React.createElement('button', { key, type: 'button', className: 'uh-trend-legend-item' + (visible.includes(key) ? ' uh-on' : ''), onClick: () => toggle(key), 'aria-pressed': visible.includes(key) }, React.createElement('span', { className: 'uh-trend-dot', style: { background: colors[key] || '#9aa4b2' } }), trendSeriesLabel(key, language))),
+        ) : null,
+      )
+    }
+
+    function UsageFilterMenu(props) {
+      const options = Array.isArray(props.options) ? props.options : []
+      const value = props.value === undefined || props.value === null ? '' : String(props.value)
+      const selected = options.find((option) => String(option.value) === value)
+      const [open, setOpen] = React.useState(false)
+      const menuRef = React.useRef(null)
+      React.useEffect(() => {
+        if (!open || typeof document === 'undefined') return undefined
+        const closeMenu = (event) => {
+          if (menuRef.current && !menuRef.current.contains(event.target)) setOpen(false)
+        }
+        document.addEventListener('pointerdown', closeMenu)
+        return () => document.removeEventListener('pointerdown', closeMenu)
+      }, [open])
+      const choose = (next) => {
+        if (typeof props.onChange === 'function') props.onChange(next)
+        setOpen(false)
+      }
+      return React.createElement('div', { className: 'uh-language-menu uh-filter-menu' + (props.className ? ' ' + props.className : '') + (open ? ' uh-open' : ''), ref: menuRef, onKeyDown: (event) => { if (event.key === 'Escape' && open) { event.preventDefault(); event.stopPropagation(); setOpen(false) } } },
+        React.createElement('button', {
+          type: 'button',
+          className: 'uh-language-trigger uh-filter-trigger' + (open ? ' uh-open' : ''),
+          title: selected ? selected.label : props.label,
+          'aria-label': props.ariaLabel || props.label,
+          'aria-haspopup': 'listbox',
+          'aria-expanded': open,
+          onClick: () => setOpen((current) => !current),
+        },
+          React.createElement(LineIcon, { name: props.icon || 'chart', size: 14 }),
+          React.createElement('span', { className: 'uh-filter-label' }, selected ? selected.label : props.label),
+          React.createElement(LineIcon, { name: 'chevron', size: 13, className: 'uh-language-caret' }),
+        ),
+        open ? React.createElement('div', { className: 'uh-language-options uh-filter-options', role: 'listbox', 'aria-label': props.ariaLabel || props.label },
+          options.map((option) => {
+            const optionValue = String(option.value)
+            const active = optionValue === value
+            return React.createElement('button', {
+              key: optionValue,
+              type: 'button',
+              role: 'option',
+              'aria-selected': active,
+              className: 'uh-language-option' + (active ? ' uh-on' : ''),
+              onClick: () => choose(optionValue),
+            },
+              React.createElement(LineIcon, { name: props.icon || 'chart', size: 14 }),
+              React.createElement('span', { className: 'uh-filter-option-label' }, option.label),
+              active ? React.createElement(LineIcon, { name: 'check', size: 14, className: 'uh-language-option-check' }) : null,
+            )
+          }),
+        ) : null,
+      )
+    }
+
     const CSS = `
 .uh-page { display:flex; flex-direction:column; gap:14px; padding:2px 2px 28px; font-family:inherit; }
-.uh-head { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
+.uh-head { position:relative; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
 .uh-title { margin:0; font-size:15px; font-weight:600; color:var(--dsw-alias-label-primary); }
 .uh-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
-.uh-language-menu { position:relative; z-index:12; }
+.uh-language-menu, .uh-filter-menu { position:relative; z-index:12; }
+.uh-filter-menu { flex:0 1 auto; min-width:0; }
+.uh-filter-workspace { width:180px; }
+.uh-filter-provider { width:180px; }
+.uh-filter-model { width:260px; }
+.uh-filter-menu.uh-open { z-index:14; }
 .uh-language-trigger { display:inline-flex; align-items:center; gap:6px; min-height:30px; padding:4px 9px 4px 10px; border:1px solid transparent; border-radius:15px; background:color-mix(in srgb, var(--dsw-alias-label-primary) 7%, var(--dsw-alias-bg-layer-1)); color:var(--dsw-alias-label-primary); font:inherit; font-size:12px; font-weight:600; line-height:1; cursor:pointer; transition:border-color .15s ease, background-color .15s ease, transform .1s ease; }
+.uh-filter-trigger { width:100%; min-width:0; justify-content:flex-start; }
 .uh-language-trigger:hover, .uh-language-trigger.uh-open { border-color:color-mix(in srgb, var(--dsw-alias-brand-primary) 58%, var(--dsw-alias-border-l2)); background:color-mix(in srgb, var(--dsw-alias-brand-primary) 13%, var(--dsw-alias-bg-layer-1)); }
 .uh-language-trigger:active { transform:scale(.96); }
 .uh-language-label { min-width:26px; text-align:left; }
+.uh-filter-label { min-width:0; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:left; }
 .uh-language-caret { color:var(--dsw-alias-label-secondary); transition:transform .18s ease; }
 .uh-language-trigger.uh-open .uh-language-caret { transform:rotate(180deg); }
+.uh-language-menu.uh-open { z-index:30; }
 .uh-language-options { position:absolute; top:calc(100% + 7px); right:0; min-width:142px; padding:5px; border:1px solid var(--dsw-alias-border-l2); border-radius:12px; background:var(--dsw-alias-bg-layer-1); box-shadow:0 14px 28px color-mix(in srgb, #000 24%, transparent); animation:uh-menu-in .16s ease both; }
+.uh-filter-options { left:0; right:auto; min-width:100%; max-width:300px; }
 .uh-language-option { display:flex; align-items:center; gap:8px; width:100%; min-height:32px; padding:6px 8px; border:0; border-radius:8px; background:transparent; color:var(--dsw-alias-label-primary); font:inherit; font-size:12px; text-align:left; cursor:pointer; transition:background-color .14s ease, color .14s ease; }
+.uh-filter-option-label { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
 .uh-language-option:hover, .uh-language-option:focus-visible { background:color-mix(in srgb, var(--dsw-alias-brand-primary) 14%, var(--dsw-alias-bg-layer-2)); outline:0; }
 .uh-language-option.uh-on { background:color-mix(in srgb, var(--dsw-alias-brand-primary) 19%, var(--dsw-alias-bg-layer-2)); color:var(--dsw-alias-label-primary); font-weight:600; }
 .uh-language-option-check { margin-left:auto; color:var(--dsw-alias-brand-primary); }
@@ -345,10 +900,123 @@ window.__ModuleLoader__.load({
 .uh-alias-ok { border:1px solid var(--dsw-alias-brand-primary); background:color-mix(in srgb, var(--dsw-alias-brand-primary) 16%, transparent); color:var(--dsw-alias-label-primary); border-radius:6px; font-size:12px; padding:3px 12px; cursor:pointer; font-family:inherit; flex:none; transition:transform .1s ease; }
 .uh-alias-ok:active { transform:scale(.96); }
 .uh-anim-panel { animation:uh-panel-in .28s ease both; }
+.uh-pricing-panel { display:flex; flex-direction:column; gap:12px; }
+.uh-pricing-head, .uh-pricing-toolbar, .uh-pricing-section-head, .uh-pricing-foot { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
+.uh-pricing-note { color:var(--dsw-alias-label-secondary); font-size:12px; line-height:1.55; }
+.uh-pricing-toolbar { padding:10px 0; border-top:1px solid var(--dsw-alias-border-l1); border-bottom:1px solid var(--dsw-alias-border-l1); }
+.uh-pricing-switch { display:inline-flex; align-items:center; gap:7px; color:var(--dsw-alias-label-primary); font-size:12px; }
+.uh-pricing-section { display:flex; flex-direction:column; gap:8px; }
+.uh-pricing-table-wrap { max-height:392px; overflow-x:auto; overflow-y:scroll; scrollbar-gutter:stable; scrollbar-width:auto; scrollbar-color:#707780 #1d1f22; border:1px solid var(--dsw-alias-border-l1); border-radius:8px; background:var(--dsw-alias-bg-layer-2); }
+.uh-pricing-model-table { width:100%; min-width:920px; border-collapse:collapse; table-layout:fixed; font-size:11px; }
+.uh-pricing-model-table th, .uh-pricing-model-table td { min-width:0; padding:8px 9px; border-bottom:1px solid var(--dsw-alias-border-l1); text-align:left; vertical-align:middle; }
+.uh-pricing-model-table th { position:sticky; top:0; z-index:1; color:var(--dsw-alias-label-secondary); background:var(--dsw-alias-bg-layer-2); font-weight:650; white-space:nowrap; }
+.uh-pricing-model-table th:nth-child(1) { width:27%; }
+.uh-pricing-model-table th:nth-child(2) { width:88px; }
+.uh-pricing-model-table th:nth-child(3) { width:23%; }
+.uh-pricing-model-table th:nth-child(n+4) { width:105px; text-align:right; }
+.uh-pricing-model-table td:nth-child(n+4) { text-align:right; }
+.uh-pricing-model-table tbody tr:last-child td { border-bottom:0; }
+.uh-pricing-model-table tbody tr:hover { background:color-mix(in srgb, var(--dsw-alias-bg-layer-1) 65%, transparent); }
+.uh-pricing-model-name, .uh-pricing-model-target { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--dsw-alias-label-primary); }
+.uh-pricing-model-rate { color:var(--dsw-alias-label-secondary); font-variant-numeric:tabular-nums; white-space:nowrap; }
+.uh-pricing-status { display:inline-flex; justify-content:center; padding:3px 6px; border-radius:6px; font-size:10px; font-weight:650; }
+.uh-pricing-status-priced { color:#157347; background:color-mix(in srgb, #30d158 22%, transparent); }
+.uh-pricing-status-unpriced, .uh-pricing-status-ambiguous, .uh-pricing-status-unsupported { color:#9a5b00; background:color-mix(in srgb, #ff9f0a 20%, transparent); }
+.uh-pricing-used-model-picker { position:relative; z-index:2; min-width:0; }
+.uh-pricing-used-model-picker:focus-within { z-index:30; }
+.uh-pricing-used-model-input { box-sizing:border-box; width:100%; min-width:0; min-height:30px; border:1px solid var(--dsw-alias-border-l2); border-radius:6px; padding:4px 7px; background:var(--dsw-alias-bg-base); color:var(--dsw-alias-label-primary); font:inherit; font-size:11px; outline:none; }
+.uh-pricing-used-model-input:focus { border-color:var(--dsw-alias-brand-primary); }
+.uh-pricing-used-model-options { top:calc(100% + 7px); left:0; right:auto; width:100%; min-width:280px; max-height:240px; overflow-y:auto; z-index:40; }
+.uh-pricing-model-search { position:relative; z-index:2; min-width:0; }
+.uh-pricing-model-search:focus-within { z-index:30; }
+.uh-pricing-model-search-input { box-sizing:border-box; width:100%; min-width:0; min-height:30px; border:1px solid var(--dsw-alias-border-l2); border-radius:6px; padding:4px 7px; background:var(--dsw-alias-bg-base); color:var(--dsw-alias-label-primary); font:inherit; font-size:11px; outline:none; }
+.uh-pricing-model-search-input:focus { border-color:var(--dsw-alias-brand-primary); }
+.uh-pricing-model-options { top:calc(100% + 7px); left:0; right:auto; width:100%; min-width:280px; max-height:240px; overflow-y:auto; z-index:40; }
+.uh-pricing-model-option { align-items:flex-start; }
+.uh-pricing-model-option-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+.uh-pricing-model-option-id { margin-left:auto; padding-left:10px; color:var(--dsw-alias-label-secondary); font-size:10px; white-space:nowrap; }
+.uh-pricing-edit-row { display:grid; grid-template-columns:minmax(280px,1.35fr) minmax(300px,1.45fr) minmax(78px,.5fr) 32px; gap:10px; align-items:center; min-width:790px; }
+.uh-pricing-price-row { grid-template-columns:repeat(5,minmax(108px,1fr)) 32px; min-width:650px; }
+.uh-pricing-price-head { display:grid; grid-template-columns:repeat(5,minmax(108px,1fr)) 32px; gap:10px; align-items:center; min-width:650px; color:var(--dsw-alias-label-secondary); font-size:10px; }
+.uh-pricing-price-head span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+.uh-pricing-edit-row input, .uh-pricing-edit-row select { box-sizing:border-box; min-width:0; min-height:30px; border:1px solid var(--dsw-alias-border-l2); border-radius:6px; padding:4px 7px; background:var(--dsw-alias-bg-base); color:var(--dsw-alias-label-primary); font:inherit; font-size:11px; outline:none; }
+.uh-pricing-edit-row input:focus, .uh-pricing-edit-row select:focus { border-color:var(--dsw-alias-brand-primary); }
+.uh-pricing-edit-row .uh-refresh { min-height:30px; padding:0; }
+.uh-pricing-error { color:var(--dsw-alias-warning, #a55b00); font-size:12px; line-height:1.45; }
+.uh-pricing-foot { padding-top:4px; }
+.uh-cost-num { color:var(--dsw-alias-label-primary); }
 .uh-progress { font-size:12px; color:var(--dsw-alias-label-secondary); display:flex; align-items:center; gap:10px; }
 .uh-sync-health { margin-top:8px; padding:8px 12px; display:flex; align-items:center; flex-wrap:wrap; gap:6px; border:1px solid var(--dsw-alias-border-l1); border-radius:10px; color:var(--dsw-alias-label-secondary); background:var(--dsw-alias-bg-layer-1); font-size:11px; line-height:1.45; }
 .uh-sync-health.uh-stale { color:var(--dsw-alias-warning, #a55b00); border-color:color-mix(in srgb, var(--dsw-alias-warning, #d9822b) 45%, var(--dsw-alias-border-l1)); }
 .uh-sync-retry { border:0; background:transparent; color:inherit; font:inherit; text-decoration:underline; cursor:pointer; padding:0 2px; }
+.uh-trend-panel { min-height:300px; animation:uh-panel-in .38s ease both; }
+.uh-trend-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:10px; }
+.uh-trend-chart-wrap { position:relative; min-height:250px; width:100%; overflow:hidden; }
+.uh-trend-stage { display:grid; place-items:center; min-height:250px; width:100%; }
+.uh-trend-message { color:var(--dsw-alias-label-secondary); font-size:12px; }
+.uh-trend-spinner { width:24px; height:24px; border:2px solid color-mix(in srgb, var(--dsw-alias-brand-primary) 22%, var(--dsw-alias-border-l2)); border-top-color:var(--dsw-alias-brand-primary); border-radius:50%; animation:uh-spinner-turn .78s linear infinite; }
+.uh-trend-svg { display:block; width:100%; height:auto; min-height:220px; }
+.uh-trend-grid { stroke:var(--dsw-alias-border-l1); stroke-width:1; stroke-dasharray:3 4; opacity:.8; }
+.uh-trend-cursor { stroke:var(--dsw-alias-label-secondary); stroke-width:1; stroke-dasharray:3 4; opacity:.65; pointer-events:none; }
+.uh-trend-point { stroke:var(--dsw-alias-bg-layer-1); stroke-width:2; vector-effect:non-scaling-stroke; pointer-events:none; }
+.uh-trend-axis-label { fill:var(--dsw-alias-label-secondary); font-size:11px; font-family:inherit; }
+.uh-trend-line { fill:none; stroke-width:2.2; vector-effect:non-scaling-stroke; stroke-linecap:round; stroke-linejoin:round; opacity:.22; }
+.uh-trend-line-draw { fill:none; stroke-width:2.2; vector-effect:non-scaling-stroke; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:var(--uh-draw-length); stroke-dashoffset:var(--uh-draw-length); opacity:.96; pointer-events:none; animation:uh-trend-draw .95s cubic-bezier(.22,.61,.36,1) both; }
+.uh-trend-area { opacity:1; animation:uh-trend-fill .8s ease; }
+.uh-trend-hit { fill:transparent; cursor:crosshair; outline:none; }
+.uh-trend-hit:focus { fill:color-mix(in srgb, var(--dsw-alias-brand-primary) 10%, transparent); outline:1px solid var(--dsw-alias-brand-primary); outline-offset:2px; }
+.uh-trend-tooltip { position:absolute; z-index:4; min-width:166px; padding:10px 11px; border:1px solid color-mix(in srgb, var(--dsw-alias-border-l2) 88%, transparent); border-radius:8px; background:color-mix(in srgb, var(--dsw-alias-bg-layer-1) 94%, transparent); box-shadow:0 10px 24px rgba(0,0,0,.22); backdrop-filter:blur(10px); color:var(--dsw-alias-label-primary); font-size:12px; line-height:1.45; pointer-events:none; opacity:0; visibility:hidden; transform:translate(14px,-50%) scale(.985); transform-origin:left center; transition:left .16s cubic-bezier(.22,.61,.36,1), top .16s cubic-bezier(.22,.61,.36,1), opacity .12s ease, transform .16s cubic-bezier(.22,.61,.36,1), visibility 0s linear .16s; }
+.uh-trend-tooltip.uh-left { transform:translate(calc(-100% - 14px),-50%) scale(.985); transform-origin:right center; }
+.uh-trend-tooltip.uh-visible { opacity:1; visibility:visible; transform:translate(14px,-50%) scale(1); transition-delay:0s; }
+.uh-trend-tooltip.uh-left.uh-visible { transform:translate(calc(-100% - 14px),-50%) scale(1); }
+.uh-trend-tooltip-title { display:block; margin-bottom:6px; color:var(--dsw-alias-label-primary); font-size:12px; font-weight:650; }
+.uh-trend-tooltip-row { display:grid; grid-template-columns:8px minmax(0,1fr) auto; align-items:center; gap:7px; min-width:0; margin-top:3px; font-size:11px; }
+.uh-trend-tooltip-row .uh-trend-dot { width:8px; height:8px; margin:0; }
+.uh-trend-tooltip-label { overflow:hidden; font-weight:600; text-overflow:ellipsis; white-space:nowrap; }
+.uh-trend-tooltip-value { color:inherit; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; }
+.uh-trend-dot { display:inline-block; width:7px; height:7px; margin-right:5px; border-radius:50%; vertical-align:1px; }
+.uh-trend-legend { display:flex; flex-wrap:wrap; gap:5px 8px; margin-top:5px; }
+.uh-trend-legend-item { display:inline-flex; align-items:center; gap:3px; border:0; border-radius:7px; padding:3px 6px; background:transparent; color:var(--dsw-alias-label-secondary); font:inherit; font-size:11px; cursor:pointer; transition:color .15s ease; }
+.uh-trend-legend-item:hover { background:var(--dsw-alias-bg-layer-2); color:var(--dsw-alias-label-primary); }
+.uh-trend-legend-item.uh-on { background:var(--dsw-alias-interactive-bg-hover); color:var(--dsw-alias-label-primary); }
+.uh-filter-bar { position:relative; z-index:10; display:flex; align-items:center; flex-wrap:wrap; gap:7px; }
+.uh-filter-clear { border:0; background:transparent; color:var(--dsw-alias-label-secondary); font:inherit; font-size:11px; cursor:pointer; text-decoration:underline; }
+.uh-query-note { color:var(--dsw-alias-label-secondary); font-size:11px; }
+.uh-detail-tabs { display:flex; align-items:center; flex-wrap:wrap; gap:4px; padding:4px; border:1px solid var(--dsw-alias-border-l1); border-radius:9px; background:color-mix(in srgb, var(--dsw-alias-bg-layer-2) 58%, transparent); }
+.uh-detail-tab { display:inline-flex; align-items:center; gap:6px; min-height:32px; padding:5px 11px; border:0; border-radius:7px; background:transparent; color:var(--dsw-alias-label-secondary); font:inherit; font-size:12px; cursor:pointer; transition:background-color .15s ease, color .15s ease, transform .12s ease; }
+.uh-detail-tab:hover { color:var(--dsw-alias-label-primary); background:var(--dsw-alias-bg-layer-2); }
+.uh-detail-tab.uh-on { color:var(--dsw-alias-label-primary); background:var(--dsw-alias-bg-layer-1); box-shadow:0 1px 3px rgba(0,0,0,.14); }
+.uh-records-panel { animation:uh-panel-in .28s ease both; }
+.uh-records-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:7px; }
+.uh-records-note { margin:8px 0 10px; color:var(--dsw-alias-label-secondary); font-size:11px; line-height:1.45; }
+.uh-records-error { margin:7px 0; color:var(--dsw-alias-warning, #a55b00); font-size:11px; }
+.uh-records-scroll { overflow:auto; border:1px solid var(--dsw-alias-border-l1); border-radius:8px; }
+.uh-record-grid { display:grid; grid-template-columns:112px minmax(190px,1.45fr) 78px repeat(4,minmax(76px,.72fr)) 96px 82px; gap:0; min-width:900px; align-items:center; }
+.uh-record-grid > div { min-width:0; padding:8px 7px; border-bottom:1px solid var(--dsw-alias-border-l1); font-size:11px; }
+.uh-record-header { color:var(--dsw-alias-label-secondary); background:var(--dsw-alias-bg-layer-2); font-weight:600; }
+.uh-record-header > div { white-space:nowrap; }
+.uh-record-row { color:var(--dsw-alias-label-primary); cursor:pointer; outline:none; transition:background-color .14s ease, box-shadow .14s ease; }
+.uh-record-row:hover { background:color-mix(in srgb, var(--dsw-alias-bg-layer-2) 68%, transparent); }
+.uh-record-row.uh-on { background:color-mix(in srgb, var(--dsw-alias-brand-primary) 10%, var(--dsw-alias-bg-layer-1)); box-shadow:inset 3px 0 var(--dsw-alias-brand-primary); }
+.uh-record-row:focus-visible { box-shadow:inset 0 0 0 1px var(--dsw-alias-brand-primary); }
+.uh-record-row:last-child > div { border-bottom:0; }
+.uh-record-time, .uh-record-num { color:var(--dsw-alias-label-secondary); font-variant-numeric:tabular-nums; white-space:nowrap; }
+.uh-record-num { text-align:right; }
+.uh-record-model { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:550; }
+.uh-record-model small { display:block; overflow:hidden; color:var(--dsw-alias-label-secondary); font-size:10px; font-weight:400; text-overflow:ellipsis; white-space:nowrap; }
+.uh-record-source { color:var(--dsw-alias-label-secondary); white-space:nowrap; }
+.uh-records-footer { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:9px; }
+.uh-record-detail { margin-top:12px; padding:10px 11px; border-top:1px solid var(--dsw-alias-border-l2); background:color-mix(in srgb, var(--dsw-alias-bg-layer-2) 42%, transparent); animation:uh-detail-in .24s ease both; }
+.uh-record-detail-head, .uh-record-detail-meta { display:flex; align-items:center; flex-wrap:wrap; gap:7px 14px; }
+.uh-record-detail-head { justify-content:space-between; margin-bottom:5px; color:var(--dsw-alias-label-primary); font-size:12px; }
+.uh-record-detail-meta { color:var(--dsw-alias-label-secondary); font-size:11px; }
+.uh-record-token-strip { display:grid; grid-template-columns:repeat(5,minmax(72px,1fr)) repeat(2,minmax(82px,1.1fr)); gap:6px; margin-top:9px; }
+.uh-record-token-strip > div { display:flex; flex-direction:column; gap:2px; min-width:0; padding:6px 7px; border-radius:6px; background:var(--dsw-alias-bg-layer-2); }
+.uh-record-token-strip span { color:var(--dsw-alias-label-secondary); font-size:10px; }
+.uh-record-token-strip strong { color:var(--dsw-alias-label-primary); font-size:12px; font-variant-numeric:tabular-nums; }
+.uh-record-token-total { border:1px solid color-mix(in srgb, var(--dsw-alias-brand-primary) 38%, var(--dsw-alias-border-l1)) !important; }
+@keyframes uh-detail-in { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:translateY(0); } }
+@media (max-width:640px) { .uh-trend-head { flex-direction:column; } .uh-filter-menu { flex:1 1 130px; width:auto; } .uh-filter-trigger { max-width:100%; } .uh-trend-tooltip { min-width:116px; } .uh-records-head { flex-direction:column; } .uh-record-token-strip { grid-template-columns:repeat(2,minmax(0,1fr)); } .uh-record-token-total { grid-column:1 / -1; } }
 .uh-bar { flex:1; height:6px; border-radius:3px; background:var(--dsw-alias-bg-layer-2); overflow:hidden; max-width:340px; }
 .uh-fill { height:100%; background:var(--dsw-alias-brand-primary); border-radius:3px; transition:width .3s ease; }
 .uh-cards { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:10px; }
@@ -390,8 +1058,8 @@ window.__ModuleLoader__.load({
 .uh-tip-tokens { font-size:11px; color:var(--dsw-alias-label-secondary); margin-top:6px; border-top:1px solid var(--dsw-alias-border-l1); padding-top:6px; }
 .uh-tbl-title { font-size:13px; font-weight:600; color:var(--dsw-alias-label-primary); margin:0 0 10px; }
 .uh-tbl-scroll { overflow-x:auto; }
-.uh-hrow, .uh-row { display:grid; grid-template-columns:minmax(160px,2.2fr) .7fr .9fr .9fr .9fr .9fr 1.1fr .8fr 1fr; gap:8px; align-items:center; min-width:780px; padding:7px 10px; border-radius:8px; font-size:12px; }
-.uh-model-hrow, .uh-model-row { display:grid; grid-template-columns:minmax(190px,2.2fr) .7fr .9fr .9fr .9fr .9fr 1.1fr .8fr; gap:8px; align-items:center; min-width:780px; padding:7px 10px; border-radius:8px; font-size:12px; }
+.uh-hrow, .uh-row { display:grid; grid-template-columns:minmax(160px,2.2fr) .7fr .9fr .9fr .9fr .9fr 1.1fr .9fr .8fr 1fr; gap:8px; align-items:center; min-width:900px; padding:7px 10px; border-radius:8px; font-size:12px; }
+.uh-model-hrow, .uh-model-row { display:grid; grid-template-columns:minmax(190px,2.2fr) .7fr .9fr .9fr .9fr .9fr 1.1fr .9fr .8fr; gap:8px; align-items:center; min-width:860px; padding:7px 10px; border-radius:8px; font-size:12px; }
 .uh-hrow { color:var(--dsw-alias-label-secondary); font-size:11px; }
 .uh-row { cursor:pointer; border:1px solid transparent; transition:background-color .15s ease, border-color .15s ease; }
 .uh-row:hover { background:var(--dsw-alias-bg-layer-2); }
@@ -399,6 +1067,7 @@ window.__ModuleLoader__.load({
 .uh-num { text-align:right; font-variant-numeric:tabular-nums; color:var(--dsw-alias-label-primary); }
 .uh-hrow .uh-num { color:var(--dsw-alias-label-secondary); }
 .uh-ws-title { color:var(--dsw-alias-label-primary); font-weight:550; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+.uh-row-title-wrap { min-width:0; }
 .uh-ws-path { color:var(--dsw-alias-label-secondary); font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
 .uh-barwrap { height:5px; border-radius:3px; background:var(--dsw-alias-bg-layer-2); overflow:hidden; margin-top:3px; }
 .uh-barwrap.uh-bar-thin { height:3px; margin-top:1px; }
@@ -409,13 +1078,20 @@ window.__ModuleLoader__.load({
 .uh-side-entry:hover { background:var(--dsw-alias-interactive-bg-hover); color:var(--dsw-alias-label-primary); }
 .uh-side-entry-icon { width:18px; text-align:center; flex:none; font-size:15px; }
 .uh-side-entry-label { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+.uh-boundary-fallback { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; min-height:360px; padding:24px; border:1px solid var(--dsw-alias-border-l1); border-radius:12px; background:var(--dsw-alias-bg-layer-1); text-align:center; }
+.uh-boundary-title { color:var(--dsw-alias-label-primary); font-size:15px; font-weight:650; }
+.uh-boundary-note { max-width:420px; color:var(--dsw-alias-label-secondary); font-size:12px; line-height:1.6; }
 .uh-side-modal { position:fixed; inset:0; z-index:1100; background:color-mix(in srgb, #000 44%, transparent); display:flex; align-items:stretch; justify-content:center; padding:26px; }
-.uh-side-dialog { width:min(1120px, 100%); overflow:auto; background:var(--dsw-alias-bg-base); border:1px solid var(--dsw-alias-border-l2); border-radius:14px; box-shadow:0 18px 52px rgba(0,0,0,.35); padding:18px; }
+.uh-side-dialog { width:min(1120px, 100%); overflow-x:hidden; overflow-y:scroll; scrollbar-gutter:stable; scrollbar-width:auto; scrollbar-color:#707780 #1d1f22; background:var(--dsw-alias-bg-base); border:1px solid var(--dsw-alias-border-l2); border-radius:14px; box-shadow:0 18px 52px rgba(0,0,0,.35); padding:18px; }
+.uh-side-dialog::-webkit-scrollbar, .uh-pricing-table-wrap::-webkit-scrollbar { width:12px; height:12px; }
+.uh-side-dialog::-webkit-scrollbar-track, .uh-pricing-table-wrap::-webkit-scrollbar-track { background:#1d1f22; border-left:1px solid #363a40; }
+.uh-side-dialog::-webkit-scrollbar-thumb, .uh-pricing-table-wrap::-webkit-scrollbar-thumb { background:#707780; border:3px solid #1d1f22; border-radius:6px; }
+.uh-side-dialog::-webkit-scrollbar-thumb:hover, .uh-pricing-table-wrap::-webkit-scrollbar-thumb:hover { background:#9aa1aa; }
 .uh-side-dialog-head { display:flex; justify-content:flex-end; margin-bottom:8px; }
 @media (max-width: 640px) { .uh-side-modal { padding:0; } .uh-side-dialog { border-radius:0; border:0; padding:14px; } }
 /* iOS-style dashboard: grouped surfaces, tactile controls, and an elevated sheet. */
 .uh-page { gap:18px; max-width:1160px; margin:0 auto; padding:4px 2px 34px; font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif; }
-.uh-head { position:sticky; top:-18px; z-index:5; margin:0 -2px; padding:18px 2px 14px; background:color-mix(in srgb, var(--dsw-alias-bg-base) 88%, transparent); backdrop-filter:blur(18px) saturate(150%); border-bottom:1px solid color-mix(in srgb, var(--dsw-alias-border-l1) 76%, transparent); }
+.uh-head { position:sticky; top:-18px; z-index:20; margin:0 -2px; padding:18px 2px 14px; background:color-mix(in srgb, var(--dsw-alias-bg-base) 88%, transparent); backdrop-filter:blur(18px) saturate(150%); border-bottom:1px solid color-mix(in srgb, var(--dsw-alias-border-l1) 76%, transparent); }
 .uh-title { font-size:22px; line-height:1.2; font-weight:700; letter-spacing:0; }
 .uh-actions { gap:8px; }
 .uh-range { padding:2px; gap:2px; border:0; border-radius:9px; background:color-mix(in srgb, var(--dsw-alias-label-primary) 10%, transparent); overflow:visible; }
@@ -468,37 +1144,98 @@ window.__ModuleLoader__.load({
 .uh-ios-tabs { display:grid; grid-template-columns:repeat(3, 1fr); gap:4px; padding:4px; border-radius:14px; background:color-mix(in srgb, var(--dsw-alias-label-primary) 9%, transparent); }
 .uh-ios-tab { min-height:32px; border:0; border-radius:10px; background:transparent; color:var(--dsw-alias-label-secondary); font:inherit; font-size:13px; font-weight:600; cursor:pointer; }
 .uh-ios-tab.uh-on { color:var(--dsw-alias-label-primary); background:var(--dsw-alias-bg-layer-1); box-shadow:0 1px 4px rgba(0,0,0,.16); }
-.uh-ios-summary { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; background:transparent; box-shadow:none; }
-.uh-ios-summary-total, .uh-ios-summary-cache { min-height:104px; padding:16px 20px; border-radius:22px; display:flex; flex-direction:column; justify-content:center; box-shadow:0 14px 32px rgba(0,0,0,.08); }
-.uh-ios-summary-total { background:color-mix(in srgb, #0a84ff 18%, var(--dsw-alias-bg-layer-1)); }
-.uh-ios-summary-cache { background:color-mix(in srgb, #30d158 17%, var(--dsw-alias-bg-layer-1)); }
+.uh-ios-summary { display:flex; flex-direction:column; gap:12px; background:transparent; box-shadow:none; }
+.uh-ios-summary-hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(320px,.48fr); min-height:142px; padding:20px 22px; border:1px solid var(--dsw-alias-border-l1); border-radius:18px; background:var(--dsw-alias-bg-layer-1); box-shadow:0 1px 2px rgba(0,0,0,.06), 0 8px 22px rgba(0,0,0,.06); }
+.uh-ios-summary-total { min-width:0; min-height:0; padding:0; border-radius:0; display:flex; align-items:center; justify-content:flex-start; gap:16px; background:transparent; box-shadow:none; }
+.uh-ios-summary-total-icon { display:grid; place-items:center; flex:none; width:54px; height:54px; border-radius:16px; background:color-mix(in srgb,#0a84ff 18%,var(--dsw-alias-bg-layer-2)); color:#0a84ff; }
+.uh-ios-summary-total-copy { min-width:0; }
 .uh-ios-summary-label { font-size:13px; font-weight:600; color:var(--dsw-alias-label-secondary); }
-.uh-ios-summary-value { margin-top:4px; font-size:32px; line-height:1; font-weight:750; letter-spacing:0; color:var(--dsw-alias-label-primary); }
+.uh-ios-summary-total .uh-ios-summary-label { font-size:14px; }
+.uh-ios-summary-value { margin-top:7px; font-size:40px; line-height:1; font-weight:750; letter-spacing:0; color:var(--dsw-alias-label-primary); }
 .uh-unit { margin-left:6px; color:var(--dsw-alias-label-secondary); font-size:.4em; font-weight:650; white-space:nowrap; vertical-align:baseline; }
 .uh-wsbar-num .uh-unit { font-size:.78em; margin-left:3px; }
 .uh-ios-summary-caption { margin-top:8px; font-size:12px; color:var(--dsw-alias-label-secondary); }
+.uh-ios-summary-meta { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:center; min-width:0; gap:0; padding:0 0 0 22px; border-left:1px solid var(--dsw-alias-border-l1); background:transparent; font-size:12px; color:var(--dsw-alias-label-secondary); }
+.uh-ios-summary-meta-stat { min-width:0; padding:4px 22px; }
+.uh-ios-summary-meta-stat + .uh-ios-summary-meta-stat { border-left:1px solid var(--dsw-alias-border-l1); }
+.uh-ios-summary-meta-label { display:flex; align-items:center; gap:7px; color:var(--dsw-alias-label-secondary); font-size:12px; font-weight:600; white-space:nowrap; }
+.uh-ios-summary-meta-value { margin-top:7px; color:var(--dsw-alias-label-primary); font-size:24px; line-height:1; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }
+.uh-ios-summary-meta-cost .uh-ios-summary-meta-value { color:#30d158; }
+.uh-ios-summary-meta-caption { margin-top:7px; color:var(--dsw-alias-label-secondary); font-size:11px; white-space:nowrap; }
+.uh-ios-metrics { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; }
+.uh-ios-metric { min-width:0; min-height:108px; padding:16px 18px; border:1px solid var(--dsw-alias-border-l1); border-radius:18px; display:flex; flex-direction:column; justify-content:center; gap:10px; background:var(--dsw-alias-bg-layer-1); box-shadow:0 1px 2px rgba(0,0,0,.06), 0 8px 20px rgba(0,0,0,.05); animation:uh-card-in .35s ease both; }
+.uh-ios-metrics > .uh-card { min-width:0; min-height:141px; padding:16px 18px; gap:4px; border:0; border-radius:18px; }
+.uh-ios-metrics > .uh-card .uh-card-value { min-width:0; font-size:23px; line-height:1.2; font-weight:700; white-space:nowrap; }
+.uh-ios-metrics > .uh-card .uh-card-sub { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+.uh-ios-metrics > .uh-card:nth-child(-n+3) { justify-content:center; }
+.uh-ios-metric-label { display:flex; align-items:center; gap:8px; min-width:0; color:var(--dsw-alias-label-secondary); font-size:13px; font-weight:600; white-space:nowrap; }
+.uh-ios-metric-label .uh-line-icon { flex:none; }
+.uh-ios-metric-value { min-width:0; color:var(--dsw-alias-label-primary); font-size:26px; line-height:1.05; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }
+.uh-ios-metric-input { background:color-mix(in srgb,#0a84ff 11%,var(--dsw-alias-bg-layer-1)); }
+.uh-ios-metric-input .uh-line-icon { color:#0a84ff; }
+.uh-ios-metric-output { background:color-mix(in srgb,#bf5af2 10%,var(--dsw-alias-bg-layer-1)); }
+.uh-ios-metric-output .uh-line-icon { color:#bf5af2; }
+.uh-ios-metric-write { background:color-mix(in srgb,#ff9f0a 11%,var(--dsw-alias-bg-layer-1)); }
+.uh-ios-metric-write .uh-line-icon { color:#ff9f0a; }
+.uh-ios-metric-read { background:color-mix(in srgb,#30d158 11%,var(--dsw-alias-bg-layer-1)); }
+.uh-ios-metric-read .uh-line-icon { color:#30d158; }
+.uh-ios-metric-rate { background:var(--dsw-alias-bg-layer-1); }
+.uh-ios-metric-rate .uh-line-icon { color:#30d158; }
+.uh-ios-metric-rate-head { display:flex; align-items:baseline; justify-content:space-between; gap:8px; min-width:0; }
+.uh-ios-metric-rate-value { flex:none; color:#30d158; font-size:24px; line-height:1; font-weight:700; font-variant-numeric:tabular-nums; }
+.uh-ios-metric-rate-detail { min-width:0; overflow:hidden; color:var(--dsw-alias-label-secondary); font-size:14px; line-height:1.2; font-weight:600; font-variant-numeric:tabular-nums; text-overflow:ellipsis; white-space:nowrap; }
+.uh-ios-metric-bar { height:7px; border-radius:4px; background:var(--dsw-alias-bg-layer-2); overflow:hidden; }
+.uh-ios-metric-fill { height:100%; border-radius:inherit; background:#30d158; transition:width .35s ease; }
 .uh-token-semantics { display:flex; align-items:flex-start; gap:8px; padding:10px 12px; border-radius:12px; background:color-mix(in srgb, var(--dsw-alias-brand-primary) 8%, var(--dsw-alias-bg-layer-1)); color:var(--dsw-alias-label-secondary); font-size:12px; line-height:1.55; }
 .uh-token-semantics .uh-line-icon { margin-top:1px; color:var(--dsw-alias-brand-primary); }
-.uh-ios-summary-meta { display:grid; align-content:center; grid-template-columns:1fr auto; gap:7px 12px; padding:20px 22px; background:color-mix(in srgb, var(--dsw-alias-bg-layer-1) 64%, transparent); font-size:12px; color:var(--dsw-alias-label-secondary); }
-.uh-ios-summary-meta strong { color:var(--dsw-alias-label-primary); font-size:15px; font-variant-numeric:tabular-nums; }
 .uh-ios-list-panel { min-height:360px; }
+.uh-donut-chart { margin:0 0 18px; }
+.uh-donut-title { display:flex; align-items:center; gap:7px; margin-bottom:12px; color:var(--dsw-alias-label-primary); font-size:14px; font-weight:650; }
+.uh-donut-layout { display:grid; grid-template-columns:minmax(220px,300px) minmax(0,1fr); gap:24px; align-items:center; }
+.uh-donut-visual { position:relative; width:min(100%,280px); aspect-ratio:1; margin:0 auto; }
+.uh-donut-svg { display:block; width:100%; height:100%; overflow:visible; }
+.uh-donut-track { opacity:.78; }
+.uh-donut-segment { fill:none; stroke-dasharray:1; stroke-dashoffset:1; animation:uh-donut-draw .95s cubic-bezier(.22,.61,.36,1) both; cursor:pointer; outline:none; transition:filter .15s ease, opacity .15s ease; }
+.uh-donut-segment:hover, .uh-donut-segment:focus-visible, .uh-donut-segment.uh-active { filter:brightness(1.12); }
+.uh-donut-tooltip { position:absolute; top:0; left:0; z-index:3; display:flex; align-items:flex-start; gap:8px; max-width:190px; padding:9px 10px; border:1px solid var(--dsw-alias-border-l2); border-radius:8px; background:color-mix(in srgb, var(--dsw-alias-bg-base) 94%, transparent); box-shadow:0 10px 24px rgba(0,0,0,.22); backdrop-filter:blur(10px); color:var(--dsw-alias-label-primary); pointer-events:none; font-size:12px; line-height:1.4; transition:left .12s cubic-bezier(.22,.61,.36,1), top .12s cubic-bezier(.22,.61,.36,1); }
+.uh-donut-tooltip > div { min-width:0; display:flex; flex-direction:column; gap:4px; }
+.uh-donut-tooltip strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }
+.uh-donut-tooltip span:not(.uh-donut-dot) { color:var(--dsw-alias-label-secondary); font-size:11px; }
+.uh-donut-tooltip-cost { color:var(--dsw-alias-label-primary) !important; font-variant-numeric:tabular-nums; }
+.uh-donut-center { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; pointer-events:none; }
+.uh-donut-center strong { color:var(--dsw-alias-label-primary); font-size:28px; line-height:1; font-weight:750; font-variant-numeric:tabular-nums; }
+.uh-donut-center span { margin-top:5px; color:var(--dsw-alias-label-secondary); font-size:13px; }
+.uh-donut-legend { min-width:0; }
+.uh-donut-legend-row { display:grid; grid-template-columns:12px minmax(180px,1fr) minmax(250px,.8fr) 54px; gap:10px; align-items:center; min-height:58px; padding:8px 0; border-bottom:1px solid color-mix(in srgb, var(--dsw-alias-border-l1) 78%, transparent); }
+.uh-donut-legend-row:last-child { border-bottom:0; }
+.uh-donut-dot { width:12px; height:12px; border-radius:50%; }
+.uh-donut-legend-copy { min-width:0; display:flex; flex-direction:column; gap:5px; }
+.uh-donut-legend-copy strong { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--dsw-alias-label-primary); font-size:13px; font-weight:650; }
+.uh-donut-legend-metrics { display:grid; grid-template-columns:minmax(120px,1fr) minmax(92px,auto); align-items:center; gap:14px; min-width:0; }
+.uh-donut-legend-metrics span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--dsw-alias-label-secondary); font-size:12px; font-variant-numeric:tabular-nums; text-align:right; }
+.uh-donut-legend-metrics .uh-donut-cost { color:var(--dsw-alias-label-secondary); font-size:12px; }
+.uh-donut-percent { min-width:48px; color:var(--dsw-alias-label-secondary); font-size:12px; font-variant-numeric:tabular-nums; text-align:right; }
 /* Each detail table owns its scrolling and sticky header; sections must not overlap in the page scroll. */
 .uh-tbl-scroll { max-height:360px; overflow:auto; border-radius:12px; background:color-mix(in srgb, var(--dsw-alias-bg-layer-2) 55%, transparent); }
 .uh-hrow, .uh-model-hrow { position:sticky; top:0; z-index:3; border-bottom:1px solid var(--dsw-alias-border-l1); box-shadow:0 1px 0 color-mix(in srgb, var(--dsw-alias-bg-base) 70%, transparent); }
 .uh-row, .uh-model-row { min-height:48px; border-bottom:1px solid color-mix(in srgb, var(--dsw-alias-border-l1) 72%, transparent); }
 .uh-row:last-child, .uh-model-row:last-child { border-bottom:0; }
 @media (max-width:640px) { .uh-tbl-scroll { max-height:300px; border-radius:10px; } }
-@media (max-width:640px) { .uh-hm-body { min-width:720px; } .uh-ios-summary { grid-template-columns:1fr; } .uh-ios-summary-total, .uh-ios-summary-cache { padding:18px; min-height:0; border-radius:18px; } .uh-ios-summary-value { font-size:31px; } }
+@media (max-width:640px) { .uh-hm-body { min-width:720px; } .uh-donut-legend-row { grid-template-columns:12px minmax(0,1fr) 48px; gap:8px; } .uh-donut-legend-copy { grid-column:2; grid-row:1; } .uh-donut-legend-metrics { grid-column:2 / -1; grid-row:2; grid-template-columns:minmax(0,1fr) minmax(0,auto); gap:8px; } .uh-donut-percent { grid-column:3; grid-row:1; } .uh-ios-summary-hero { grid-template-columns:1fr; min-height:0; gap:18px; padding:18px; } .uh-ios-summary-total { align-items:flex-start; } .uh-ios-summary-meta { grid-template-columns:repeat(2,minmax(0,1fr)); padding:16px 0 0; border-left:0; border-top:1px solid var(--dsw-alias-border-l1); } .uh-ios-summary-meta-stat { padding:0 12px; } .uh-ios-summary-meta-stat:first-child { padding-left:0; } .uh-ios-summary-meta-stat:last-child { padding-right:0; } .uh-ios-summary-value { font-size:31px; } .uh-ios-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); } .uh-ios-metric:last-child { grid-column:1 / -1; } .uh-ios-metric-value { font-size:24px; } .uh-donut-layout { grid-template-columns:1fr; gap:12px; } .uh-donut-visual { width:min(100%,250px); } }
 @keyframes uh-cell-in { from { opacity:0; transform:scale(.4); } to { opacity:1; transform:scale(1); } }
 @keyframes uh-glow { 0% { box-shadow:0 0 0 0 rgba(46,160,67,.5); } 70% { box-shadow:0 0 0 5px rgba(46,160,67,0); } 100% { box-shadow:0 0 0 0 rgba(46,160,67,0); } }
 @keyframes uh-card-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
 @keyframes uh-bar-grow { from { transform:scaleX(0); } to { transform:scaleX(1); } }
 @keyframes uh-panel-in { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:translateY(0); } }
+@keyframes uh-trend-draw { from { stroke-dashoffset:var(--uh-draw-length); opacity:.2; } to { stroke-dashoffset:0; opacity:1; } }
+@keyframes uh-trend-fill { from { opacity:0; } to { opacity:1; } }
+@keyframes uh-donut-draw { from { stroke-dashoffset:1; opacity:.25; } to { stroke-dashoffset:0; opacity:1; } }
+@keyframes uh-spinner-turn { to { transform:rotate(360deg); } }
 @keyframes uh-menu-in { from { opacity:0; transform:translateY(-4px) scale(.97); } to { opacity:1; transform:translateY(0) scale(1); } }
 @keyframes uh-tip-in { from { opacity:0; } to { opacity:1; } }
 @media (prefers-reduced-motion: reduce) {
-  .uh-cell, .uh-card, .uh-barfill, .uh-anim-panel, .uh-tip, .uh-language-options { animation:none !important; }
-  .uh-card, .uh-cell, .uh-barfill, .uh-fill, .uh-refresh, .uh-chip, .uh-row, .uh-tip-row, .uh-language-trigger, .uh-language-caret, .uh-language-option { transition:none !important; }
+  .uh-cell, .uh-card, .uh-ios-metric, .uh-barfill, .uh-anim-panel, .uh-trend-panel, .uh-trend-line-draw, .uh-trend-area, .uh-trend-point, .uh-trend-spinner, .uh-donut-segment, .uh-records-panel, .uh-record-detail, .uh-tip, .uh-language-options { animation:none !important; stroke-dashoffset:0 !important; opacity:1 !important; }
+  .uh-card, .uh-cell, .uh-ios-metric-fill, .uh-barfill, .uh-fill, .uh-refresh, .uh-chip, .uh-row, .uh-tip-row, .uh-trend-tooltip, .uh-language-trigger, .uh-language-caret, .uh-language-option { transition:none !important; }
 }
 `
     const cssTagId = "dsh-all-usage/styles.css"
@@ -522,6 +1259,27 @@ window.__ModuleLoader__.load({
       if (!r.ok) throw new Error('HTTP ' + r.status)
       return r.json()
     })
+    const getUsageQuery = (scope) => {
+      const params = new URLSearchParams({ start: scope.start, end: scope.end, utc: scope.utc ? '1' : '0' })
+      if (scope.workspaceId) params.set('workspaceId', scope.workspaceId)
+      if (scope.provider) params.set('provider', scope.provider)
+      if (scope.modelKey) params.set('modelKey', scope.modelKey)
+      return fetch('/api/all-usage/query?' + params.toString(), { headers: { accept: 'application/json' } }).then((r) => {
+        if (!r.ok) throw new Error('HTTP ' + r.status)
+        return r.json()
+      })
+    }
+    const getUsageRecords = (scope, cursor, limit) => {
+      const params = new URLSearchParams({ start: scope.start, end: scope.end, utc: scope.utc ? '1' : '0', limit: String(limit || 100) })
+      if (scope.workspaceId) params.set('workspaceId', scope.workspaceId)
+      if (scope.provider) params.set('provider', scope.provider)
+      if (scope.modelKey) params.set('modelKey', scope.modelKey)
+      if (cursor) params.set('cursor', cursor)
+      return fetch('/api/all-usage/records?' + params.toString(), { headers: { accept: 'application/json' } }).then((r) => {
+        if (!r.ok) { const error = new Error('HTTP ' + r.status); error.status = r.status; throw error }
+        return r.json()
+      })
+    }
     const getBalance = (force, requestToken) => fetch('/api/all-usage/balance' + (force ? '?force=1' : ''), { headers: { accept: 'application/json', 'x-all-usage-request-token': requestToken } }).then((r) => {
       if (!r.ok) throw new Error('HTTP ' + r.status)
       return r.json()
@@ -534,6 +1292,33 @@ window.__ModuleLoader__.load({
       if (!r.ok) throw new Error('HTTP ' + r.status)
       return r.json()
     })
+    const getPricing = () => fetch('/api/all-usage/pricing', { headers: { accept: 'application/json' } }).then((r) => {
+      if (!r.ok) throw new Error('HTTP ' + r.status)
+      return r.json()
+    })
+    const getPricingModels = (query) => {
+      const params = new URLSearchParams({ q: String(query || '').slice(0, 120), limit: '30' })
+      return fetch('/api/all-usage/pricing/models?' + params.toString(), { headers: { accept: 'application/json' } }).then((r) => {
+        if (!r.ok) throw new Error('HTTP ' + r.status)
+        return r.json()
+      })
+    }
+    const setPricingRpc = (pricing, backfill, writeToken) => fetch('/api/all-usage/pricing', {
+      method: 'POST',
+      headers: { 'content-type': 'application/json', 'x-all-usage-request-token': writeToken },
+      body: JSON.stringify({ pricing, backfill: backfill === true }),
+    }).then((r) => {
+      if (!r.ok) { const error = new Error('HTTP ' + r.status); error.status = r.status; throw error }
+      return r.json()
+    })
+    const syncPricingRpc = (writeToken) => fetch('/api/all-usage/pricing/sync', {
+      method: 'POST',
+      headers: { 'content-type': 'application/json', 'x-all-usage-request-token': writeToken },
+      body: '{}',
+    }).then((r) => {
+      if (!r.ok) { const error = new Error('HTTP ' + r.status); error.status = r.status; throw error }
+      return r.json()
+    })
 
     const LANGUAGE_STORAGE_KEY = 'dsh-all-usage.language'
     function storedLanguage() {
@@ -542,12 +1327,35 @@ window.__ModuleLoader__.load({
     function persistLanguage(language) {
       try { window.localStorage.setItem(LANGUAGE_STORAGE_KEY, language) } catch (_) {}
     }
+    const USAGE_UI_STATE_KEY = 'dsh-all-usage.ui-state'
+    function storedUsageUiState() {
+      try {
+        const raw = window.localStorage.getItem(USAGE_UI_STATE_KEY)
+        const value = raw ? JSON.parse(raw) : {}
+        if (value === null || typeof value !== 'object' || Array.isArray(value)) return {}
+        const state = {}
+        if (['logs', 'model', 'workspace'].includes(value.detailView)) state.detailView = value.detailView
+        if (['route', 'model', 'provider'].includes(value.modelView)) state.modelView = value.modelView
+        if (['today', '30d', '90d', 'all'].includes(value.range)) state.range = value.range
+        if (typeof value.pricingAutoSync === 'boolean') state.pricingAutoSync = value.pricingAutoSync
+        return state
+      } catch (_) { return {} }
+    }
+    function persistUsageUiState(patch) {
+      try {
+        const current = storedUsageUiState()
+        window.localStorage.setItem(USAGE_UI_STATE_KEY, JSON.stringify(Object.assign({}, current, patch)))
+      } catch (_) {}
+    }
 
     function UsagePage(props) {
       const timer = props.timerCtx
       const language = props.language === 'en' ? 'en' : 'zh'
       const tr = (zh, en) => language === 'en' ? en : zh
       const useUtc = language === 'en'
+      const usageUiStateRef = React.useRef(null)
+      if (usageUiStateRef.current === null) usageUiStateRef.current = storedUsageUiState()
+      const usageUiState = usageUiStateRef.current
       const calendarNow = new Date()
       const latestCalendarDate = fmtDate(calendarNow, useUtc)
       const [stats, setStats] = React.useState(null)
@@ -555,29 +1363,83 @@ window.__ModuleLoader__.load({
       const [statsError, setStatsError] = React.useState('')
       const [lastStatsAt, setLastStatsAt] = React.useState(0)
       const [balance, setBalance] = React.useState(null)
-      const [range, setRange] = React.useState('90d')
+      const [range, setRange] = React.useState(() => usageUiState.range || 'today')
       const [customRange, setCustomRange] = React.useState({ start: '', end: '' })
       const [customDraft, setCustomDraft] = React.useState({ start: '', end: '' })
       const [customRangeOpen, setCustomRangeOpen] = React.useState(false)
-      const [modelView, setModelView] = React.useState('route')
+      const [modelView, setModelView] = React.useState(() => usageUiState.modelView || 'route')
       const [wsFilter, setWsFilter] = React.useState(null)
+      const [providerFilter, setProviderFilter] = React.useState(null)
+      const [modelFilter, setModelFilter] = React.useState(null)
+      const [queryResult, setQueryResult] = React.useState(null)
+      const [queryResultKey, setQueryResultKey] = React.useState('')
+      const [queryLoading, setQueryLoading] = React.useState(false)
+      const [queryError, setQueryError] = React.useState('')
+      const [trendVisible, setTrendVisible] = React.useState(['total', 'input', 'cacheRead', 'output'])
+      const [detailView, setDetailView] = React.useState(() => usageUiState.detailView || 'logs')
+      const [detailSelection, setDetailSelection] = React.useState(null)
+      const [auditSelectedId, setAuditSelectedId] = React.useState(null)
+      const [auditRows, setAuditRows] = React.useState([])
+      const [auditCursor, setAuditCursor] = React.useState(null)
+      const [auditHasMore, setAuditHasMore] = React.useState(false)
+      const [auditReload, setAuditReload] = React.useState(0)
+      const [auditLoading, setAuditLoading] = React.useState(false)
+      const [auditExporting, setAuditExporting] = React.useState(false)
+      const [auditError, setAuditError] = React.useState('')
       const [hover, setHover] = React.useState(null)
       const [aliasOpen, setAliasOpen] = React.useState(false)
       const [aliasDrafts, setAliasDrafts] = React.useState({})
+      const [pricingOpen, setPricingOpen] = React.useState(false)
+      const [pricingDraft, setPricingDraft] = React.useState(null)
+      const [pricingSaving, setPricingSaving] = React.useState(false)
+      const [pricingSyncing, setPricingSyncing] = React.useState(false)
+      const [pricingSyncSaving, setPricingSyncSaving] = React.useState(false)
+      const [pricingError, setPricingError] = React.useState('')
+      const [pricingModelSearchOptions, setPricingModelSearchOptions] = React.useState({})
+      const [pricingModelSearchOpen, setPricingModelSearchOpen] = React.useState(null)
+      const [pricingUsedModelSearchText, setPricingUsedModelSearchText] = React.useState({})
+      const [pricingUsedModelOpen, setPricingUsedModelOpen] = React.useState(null)
+      const [pricingOverrideSearchText, setPricingOverrideSearchText] = React.useState({})
+      const [pricingOverrideOpen, setPricingOverrideOpen] = React.useState(null)
+      const pricingModelSearchSeqRef = React.useRef({})
+      const pricingModelSearchTimerRef = React.useRef({})
       const [languageMenuOpen, setLanguageMenuOpen] = React.useState(false)
       const languageMenuRef = React.useRef(null)
+      const recordsPanelRef = React.useRef(null)
       const statsGateRef = React.useRef(null)
       if (statsGateRef.current === null) statsGateRef.current = createRequestGate()
       const statusGateRef = React.useRef(null)
       if (statusGateRef.current === null) statusGateRef.current = createRequestGate()
       const balanceGateRef = React.useRef(null)
       if (balanceGateRef.current === null) balanceGateRef.current = createRequestGate()
+      const queryGateRef = React.useRef(null)
+      if (queryGateRef.current === null) queryGateRef.current = createRequestGate()
+      const recordsGateRef = React.useRef(null)
+      if (recordsGateRef.current === null) recordsGateRef.current = createRequestGate()
       const statsGate = statsGateRef.current
       const statusGate = statusGateRef.current
       const balanceGate = balanceGateRef.current
+      const queryGate = queryGateRef.current
+      const recordsGate = recordsGateRef.current
       const refreshRef = React.useRef(() => {})
       const setLanguage = (next) => { if (typeof props.onLanguageChange === 'function') props.onLanguageChange(next === 'en' ? 'en' : 'zh') }
       const chooseLanguage = (next) => { setLanguage(next); setLanguageMenuOpen(false) }
+      React.useEffect(() => { persistUsageUiState({ detailView }) }, [detailView])
+      React.useEffect(() => { persistUsageUiState({ modelView }) }, [modelView])
+      React.useEffect(() => { if (range !== 'custom') persistUsageUiState({ range }) }, [range])
+
+      const queryScope = stats === null ? null : makeUsageScope(stats, range, useUtc, customRange, wsFilter, providerFilter, modelFilter)
+      const queryKey = usageScopeKey(queryScope)
+      const selectedDetailScope = detailSelection !== null && detailSelection.baseKey === queryKey ? detailSelection.scope : queryScope
+      const detailKey = usageScopeKey(selectedDetailScope)
+      const previousQueryKeyRef = React.useRef(queryKey)
+      React.useEffect(() => {
+        if (previousQueryKeyRef.current !== queryKey) {
+          previousQueryKeyRef.current = queryKey
+          setDetailSelection(null)
+          setAuditSelectedId(null)
+        }
+      }, [queryKey])
 
       React.useEffect(() => {
         let alive = true
@@ -678,7 +1540,13 @@ window.__ModuleLoader__.load({
           refreshStats()
           refreshBalance(true)
         }
-        return () => { alive = false; clearRetry(); fast(); slow(); bal() }
+        return () => {
+          alive = false
+          clearRetry()
+          fast(); slow(); bal()
+          for (const timerId of Object.values(pricingModelSearchTimerRef.current)) clearTimeout(timerId)
+          pricingModelSearchTimerRef.current = {}
+        }
       }, [])
 
       React.useEffect(() => {
@@ -690,10 +1558,126 @@ window.__ModuleLoader__.load({
         return () => document.removeEventListener('pointerdown', closeLanguageMenu)
       }, [languageMenuOpen])
 
+      React.useEffect(() => {
+        if (queryScope === null || queryKey === '') return undefined
+        const seq = queryGate.next()
+        setQueryLoading(true)
+        setQueryError('')
+        getUsageQuery(queryScope).then((data) => {
+          if (!queryGate.isCurrent(seq)) return
+          if (data === null || typeof data !== 'object' || data.revision !== (stats && stats.revision)) {
+            setQueryError('stale')
+            setQueryLoading(false)
+            return
+          }
+          setQueryResult(data)
+          setQueryResultKey(queryKey)
+          setQueryLoading(false)
+          setQueryError('')
+        }, () => {
+          if (!queryGate.isCurrent(seq)) return
+          setQueryLoading(false)
+          setQueryError('query')
+        })
+        return undefined
+      }, [queryKey, stats && stats.revision])
+
+      const openAuditForScope = (scope) => {
+        if (scope === null || queryKey === '') return
+        setDetailSelection({ baseKey: queryKey, scope: { ...scope } })
+        setDetailView('logs')
+        setAuditSelectedId(null)
+        setAuditError('')
+      }
+      const openAuditForDate = (date) => {
+        if (queryScope === null || typeof date !== 'string') return
+        openAuditForScope({ ...queryScope, start: date, end: date })
+      }
+      React.useEffect(() => {
+        if (selectedDetailScope === null || detailKey === '') return undefined
+        const seq = recordsGate.next()
+        setAuditLoading(true)
+        setAuditError('')
+        setAuditRows([])
+        setAuditSelectedId(null)
+        setAuditCursor(null)
+        setAuditHasMore(false)
+        getUsageRecords(selectedDetailScope, null, 20).then((data) => {
+          if (!recordsGate.isCurrent(seq)) return
+          if (data === null || typeof data !== 'object' || !Array.isArray(data.items)) {
+            setAuditError('audit')
+            setAuditLoading(false)
+            return
+          }
+          setAuditRows(data.items)
+          setAuditSelectedId(data.items[0] ? data.items[0].id : null)
+          setAuditCursor(data.nextCursor || null)
+          setAuditHasMore(data.hasMore === true)
+          setAuditLoading(false)
+          setAuditError('')
+        }, (reason) => {
+          if (!recordsGate.isCurrent(seq)) return
+          if (reason && reason.status === 409) {
+            setAuditError('stale')
+            setAuditReload((value) => value + 1)
+            return
+          }
+          setAuditLoading(false)
+          setAuditError('audit')
+        })
+        return undefined
+      }, [detailKey, stats && stats.revision, auditReload])
+      const loadMoreAudit = () => {
+        if (selectedDetailScope === null || auditCursor === null || auditLoading) return
+        const seq = recordsGate.next()
+        setAuditLoading(true)
+        getUsageRecords(selectedDetailScope, auditCursor, 20).then((data) => {
+          if (!recordsGate.isCurrent(seq)) return
+          if (data === null || typeof data !== 'object' || !Array.isArray(data.items)) {
+            setAuditError('audit')
+            setAuditLoading(false)
+            return
+          }
+          setAuditRows((prev) => prev.concat(data.items))
+          setAuditCursor(data.nextCursor || null)
+          setAuditHasMore(data.hasMore === true)
+          setAuditLoading(false)
+          setAuditError('')
+        }, (reason) => {
+          if (!recordsGate.isCurrent(seq)) return
+          if (reason && reason.status === 409) {
+            setAuditRows([])
+            setAuditSelectedId(null)
+            setAuditCursor(null)
+            setAuditHasMore(false)
+            setAuditError('stale')
+            setAuditReload((value) => value + 1)
+            return
+          }
+          setAuditLoading(false)
+          setAuditError('audit')
+        })
+      }
+      React.useEffect(() => {
+        if (detailSelection === null || detailView !== 'logs' || recordsPanelRef.current === null) return undefined
+        recordsPanelRef.current.scrollIntoView({ behavior: 'smooth', block: 'start' })
+        return undefined
+      }, [detailSelection && usageScopeKey(detailSelection.scope), detailView])
       const onRefresh = () => { refreshRef.current() }
       const toggleFilter = (id) => {
         setWsFilter((prev) => (prev === id ? null : id))
       }
+      const clearFilters = () => {
+        setWsFilter(null)
+        setProviderFilter(null)
+        setModelFilter(null)
+      }
+      const chooseProvider = (value) => {
+        setProviderFilter(value || null)
+      }
+      const chooseModel = (value) => {
+        setModelFilter(value || null)
+      }
       const activeDayRows = useUtc && Array.isArray(stats && stats.byDayUtc) ? stats.byDayUtc : (Array.isArray(stats && stats.byDay) ? stats.byDay : [])
       const availableDateRange = availableDateBounds(activeDayRows, latestCalendarDate)
       const earliestAvailableDate = availableDateRange.min
@@ -718,10 +1702,45 @@ window.__ModuleLoader__.load({
         setCustomRangeOpen(false)
       }
 
-      const agg = rangeAgg(stats, range, useUtc, activeCustomRange)
+      const queryReady = queryResult !== null && queryResultKey === queryKey && queryResult.revision === (stats && stats.revision)
+      const displayedDays = queryReady && Array.isArray(queryResult.daily) ? queryResult.daily : activeDayRows
+      const displayedHeatmap = queryReady && Array.isArray(queryResult.heatmap) ? queryResult.heatmap : activeDayRows
+      const activeCustomRangeKey = activeCustomRange === null ? '' : activeCustomRange.start + ':' + activeCustomRange.end
+      const rangeOnlyAgg = React.useMemo(() => rangeAgg(stats, range, useUtc, activeCustomRange), [stats, range, useUtc, activeCustomRangeKey])
+      const agg = React.useMemo(() => queryReady
+        ? { totals: queryResult.totals, perWs: queryResult.perWorkspace || [], perModel: queryResult.perModel || [] }
+        : rangeOnlyAgg, [queryReady, queryResult, rangeOnlyAgg])
       const animatedTotal = useCountUp(agg.totals.input + agg.totals.output + agg.totals.cacheRead + agg.totals.cacheWrite + agg.totals.reasoning, timer)
       const animatedRate = useCountUp(Math.round(rateOf(agg.totals.input, agg.totals.cacheRead) * 10), timer)
-      const animatedTurns = useCountUp(agg.totals.turns, timer)
+      const scopedCountIsCalls = providerFilter !== null || modelFilter !== null
+      const requestCount = Number.isFinite(agg.totals.calls) && agg.totals.calls > 0 ? agg.totals.calls : agg.totals.turns
+      const displayedCount = scopedCountIsCalls ? requestCount : agg.totals.turns
+      const animatedTurns = useCountUp(displayedCount, timer)
+      const animatedRequests = useCountUp(requestCount, timer)
+      const wsTotal = (w) => w.input + w.output + w.cacheRead + w.cacheWrite + w.reasoning
+      const rows = React.useMemo(() => (Array.isArray(agg.perWs) ? agg.perWs : []).slice().sort((a, b) => wsTotal(b) - wsTotal(a)), [agg.perWs])
+      const modelRows = React.useMemo(() => aggregateModelRows(agg.perModel || [], modelView, tr('未知供应商', 'Unknown provider'), tr('未知模型', 'Unknown model')).sort((a, b) => wsTotal(b) - wsTotal(a)), [agg.perModel, modelView, language])
+      const rangeModelOptions = Array.isArray(rangeOnlyAgg.perModel) ? rangeOnlyAgg.perModel.filter((row) => row && typeof row === 'object') : []
+      const providerOptions = Array.from(new Set(rangeModelOptions.map((row) => typeof row.provider === 'string' && row.provider !== '' ? row.provider : null).filter((value) => value !== null))).sort()
+      const modelFilterValue = (row) => {
+        const structured = typeof row.actualModel === 'string' && row.actualModel !== '' ? row.actualModel : typeof row.requestedModel === 'string' && row.requestedModel !== '' ? row.requestedModel : null
+        if (structured !== null) return structured
+        const display = typeof row.model === 'string' && row.model !== '' ? row.model : tr('未知模型', 'Unknown model')
+        const separator = display.indexOf(' / ')
+        const legacyProvider = separator > 0 ? display.slice(0, separator) : ''
+        return separator > 0 && providerOptions.includes(legacyProvider) ? display.slice(separator + 3) : display
+      }
+      const modelOptions = Array.from(new Set(rangeModelOptions.map(modelFilterValue))).sort((a, b) => a.localeCompare(b))
+      const workspaces = stats && Array.isArray(stats.workspaces) ? stats.workspaces : []
+      const rangeWorkspaceTotals = new Map((Array.isArray(rangeOnlyAgg.perWs) ? rangeOnlyAgg.perWs : []).map((row) => [row.workspaceId, row]))
+      const workspaceHasUsage = (row) => row !== undefined && (Number(row.turns) > 0 || Number(row.calls) > 0 || Number(row.input) > 0 || Number(row.output) > 0 || Number(row.cacheRead) > 0 || Number(row.cacheWrite) > 0 || Number(row.reasoning) > 0)
+      const rangeWorkspaceOptions = workspaces.filter((workspace) => workspaceHasUsage(rangeWorkspaceTotals.get(workspace.id)))
+      const rangeWorkspaceIds = new Set(rangeWorkspaceOptions.map((workspace) => workspace.id))
+      React.useEffect(() => {
+        if (wsFilter !== null && !rangeWorkspaceIds.has(wsFilter)) setWsFilter(null)
+        if (providerFilter !== null && !providerOptions.includes(providerFilter)) setProviderFilter(null)
+        if (modelFilter !== null && !modelOptions.includes(modelFilter)) setModelFilter(null)
+      }, [wsFilter, providerFilter, modelFilter, Array.from(rangeWorkspaceIds).sort().join('\0'), providerOptions.join('\0'), modelOptions.join('\0')])
 
       if (stats === null) {
         const failed = statsError !== ''
@@ -741,14 +1760,15 @@ window.__ModuleLoader__.load({
       const statusPayload = status !== null && typeof status === 'object' ? status : stats
       const scan = statusPayload && statusPayload.scan ? statusPayload.scan : (stats.scan || { done: true, started: true, scanned: 0, total: 0, failed: 0 })
       const sync = statusPayload && statusPayload.sync ? statusPayload.sync : (stats.sync || {})
-      const workspaces = Array.isArray(stats.workspaces) ? stats.workspaces : []
       const aliases = stats.aliases && typeof stats.aliases === 'object' ? stats.aliases : {}
       const wsById = new Map()
       const wsIndex = new Map()
       workspaces.forEach((w, i) => { wsById.set(w.id, w); wsIndex.set(w.id, i) })
-      const dayRows = activeDayRows
+      const dayRows = displayedDays
+      const heatmapMap = new Map()
+      for (const d of displayedHeatmap) heatmapMap.set(d.date, d)
       const dayMap = new Map()
-      for (const d of dayRows) dayMap.set(d.date, d)
+      for (const d of activeDayRows) dayMap.set(d.date, d)
       const wsTitle = (id) => {
         const alias = aliases[id]
         if (typeof alias === 'string' && alias !== '') return alias
@@ -778,9 +1798,213 @@ window.__ModuleLoader__.load({
         }
         setAliasOpen(false)
       }
+      const currentPricing = stats.pricing && typeof stats.pricing === 'object' ? stats.pricing : {}
+      const pricingUsedModels = Array.isArray(currentPricing.usedModels) ? currentPricing.usedModels : []
+      const pricingUsedModelOptions = pricingUsedModels.slice().sort((left, right) => {
+        const rank = { unpriced: 0, ambiguous: 1, unsupported: 2, priced: 3 }
+        return (rank[left.status] === undefined ? 9 : rank[left.status]) - (rank[right.status] === undefined ? 9 : rank[right.status]) || String(left.model || '').localeCompare(String(right.model || ''))
+      }).map((model) => ({
+        value: String(model.identityKey || model.model || ''),
+        label: (model.model || tr('未知模型', 'Unknown model')) + ' · ' + pricingStatusLabel(model.status, language),
+        model: pricingModelKey(model.actualModel || model.requestedModel || model.pricingModel),
+        officialModel: pricingModelKey(model.pricingModel),
+      })).filter((option) => option.value !== '')
+      const openPricingPanel = () => {
+        const draft = pricingDraftOf(currentPricing)
+        const uiState = storedUsageUiState()
+        if (typeof uiState.pricingAutoSync === 'boolean') draft.sync.autoEnabled = uiState.pricingAutoSync
+        setPricingDraft(draft)
+        setPricingUsedModelSearchText({})
+        setPricingOverrideSearchText({})
+        setPricingUsedModelOpen(null)
+        setPricingOverrideOpen(null)
+        setPricingModelSearchOptions({})
+        setPricingModelSearchOpen(null)
+        setPricingError('')
+        setPricingOpen(true)
+        setAliasOpen(false)
+      }
+      const savePricingSettings = (backfill) => {
+        if (pricingDraft === null || pricingSaving || pricingSyncing || pricingSyncSaving) return
+        const requestToken = typeof stats.requestToken === 'string' ? stats.requestToken : ''
+        if (requestToken === '') { setPricingError('token'); return }
+        setPricingSaving(true)
+        setPricingError('')
+        setPricingRpc(pricingDraft, backfill, requestToken).then((data) => {
+          if (!data || data.ok !== true || !data.pricing) { setPricingError('save'); return }
+          setStats((prev) => prev === null ? prev : Object.assign({}, prev, { pricing: data.pricing }))
+          setPricingDraft(pricingDraftOf(data.pricing))
+          setPricingUsedModelSearchText({})
+          setPricingOverrideSearchText({})
+          setPricingUsedModelOpen(null)
+          setPricingOverrideOpen(null)
+          setPricingOpen(false)
+          refreshRef.current()
+        }, (reason) => { setPricingError(reason && reason.status === 403 ? 'forbidden' : 'save') }).finally(() => setPricingSaving(false))
+      }
+      const syncPricingNow = () => {
+        if (pricingSaving || pricingSyncing || pricingSyncSaving) return
+        const requestToken = typeof stats.requestToken === 'string' ? stats.requestToken : ''
+        if (requestToken === '') { setPricingError('token'); return }
+        setPricingSyncing(true)
+        setPricingError('')
+        syncPricingRpc(requestToken).then((data) => {
+          if (!data || data.ok !== true || !data.pricing) { setPricingError('sync'); return }
+          setStats((prev) => prev === null ? prev : Object.assign({}, prev, { pricing: data.pricing }))
+          setPricingDraft(pricingDraftOf(data.pricing))
+          setPricingUsedModelSearchText({})
+          setPricingOverrideSearchText({})
+          setPricingUsedModelOpen(null)
+          setPricingOverrideOpen(null)
+          refreshRef.current()
+        }, (reason) => { setPricingError(reason && reason.status === 403 ? 'forbidden' : 'sync') }).finally(() => setPricingSyncing(false))
+      }
+      const updatePricingSync = (enabled) => {
+        if (pricingDraft === null || pricingSyncSaving || pricingSaving || pricingSyncing) return
+        const nextEnabled = enabled === true
+        const previousEnabled = pricingDraft.sync && pricingDraft.sync.autoEnabled === true
+        setPricingDraft((prev) => prev === null ? prev : Object.assign({}, prev, { sync: Object.assign({}, prev.sync, { autoEnabled: nextEnabled }) }))
+        persistUsageUiState({ pricingAutoSync: nextEnabled })
+        const requestToken = typeof stats.requestToken === 'string' ? stats.requestToken : ''
+        if (requestToken === '') {
+          setPricingDraft((prev) => prev === null ? prev : Object.assign({}, prev, { sync: Object.assign({}, prev.sync, { autoEnabled: previousEnabled }) }))
+          persistUsageUiState({ pricingAutoSync: previousEnabled })
+          setPricingError('token')
+          return
+        }
+        const rollback = (error) => {
+          setPricingDraft((prev) => prev === null ? prev : Object.assign({}, prev, { sync: Object.assign({}, prev.sync, { autoEnabled: previousEnabled }) }))
+          persistUsageUiState({ pricingAutoSync: previousEnabled })
+          setPricingError(error)
+        }
+        setPricingSyncSaving(true)
+        setPricingError('')
+        setPricingRpc({ sync: { autoEnabled: nextEnabled } }, false, requestToken).then((data) => {
+          if (!data || data.ok !== true || !data.pricing) { rollback('save'); return }
+          const savedEnabled = data.pricing.sync && data.pricing.sync.autoEnabled === true
+          setStats((prev) => prev === null ? prev : Object.assign({}, prev, { pricing: data.pricing }))
+          setPricingDraft((prev) => prev === null ? prev : Object.assign({}, prev, { sync: Object.assign({}, prev.sync, { autoEnabled: savedEnabled, intervalMs: data.pricing.sync && data.pricing.sync.intervalMs }) }))
+          persistUsageUiState({ pricingAutoSync: savedEnabled })
+        }, (reason) => rollback(reason && reason.status === 403 ? 'forbidden' : 'save')).finally(() => setPricingSyncSaving(false))
+      }
+      const updatePricingMapping = (index, field, value) => {
+        setPricingDraft((prev) => {
+          if (prev === null || !Array.isArray(prev.mappings) || !prev.mappings[index]) return prev
+          const mappings = prev.mappings.slice()
+          mappings[index] = Object.assign({}, mappings[index], { [field]: value })
+          return Object.assign({}, prev, { mappings })
+        })
+      }
+      const selectPricingUsedModel = (index, value) => {
+        const selected = pricingUsedModels.find((model) => String(model.identityKey || model.model || '') === String(value))
+        if (!selected) return
+        const modelAlias = selected.actualModel || selected.requestedModel || selected.pricingModel || ''
+        const officialModel = selected.status === 'priced' ? (selected.pricingModel || '') : ''
+        setPricingDraft((prev) => {
+          if (prev === null || !Array.isArray(prev.mappings) || !prev.mappings[index]) return prev
+          const mappings = prev.mappings.slice()
+          mappings[index] = Object.assign({}, mappings[index], { usageIdentityKey: value, model: modelAlias, catalogModelId: officialModel, catalogProviderId: selected.providerId || '' })
+          return Object.assign({}, prev, { mappings })
+        })
+        setPricingUsedModelSearchText((prev) => Object.assign({}, prev, { [index]: selected.model || modelAlias }))
+        setPricingUsedModelOpen(null)
+        setPricingModelSearchOpen(null)
+      }
+      const searchUsedModels = (index, value) => {
+        setPricingUsedModelSearchText((prev) => Object.assign({}, prev, { [index]: value }))
+        setPricingUsedModelOpen(index)
+        setPricingDraft((prev) => {
+          if (prev === null || !Array.isArray(prev.mappings) || !prev.mappings[index]) return prev
+          const mappings = prev.mappings.slice()
+          mappings[index] = Object.assign({}, mappings[index], { usageIdentityKey: '', model: '', catalogModelId: '', catalogProviderId: '' })
+          return Object.assign({}, prev, { mappings })
+        })
+      }
+      const searchOfficialModels = (index, value) => {
+        updatePricingMapping(index, 'catalogModelId', value)
+        setPricingModelSearchOpen(index)
+        const previousTimer = pricingModelSearchTimerRef.current[index]
+        if (previousTimer !== undefined) {
+          clearTimeout(previousTimer)
+          delete pricingModelSearchTimerRef.current[index]
+        }
+        const nextSeq = (pricingModelSearchSeqRef.current[index] || 0) + 1
+        pricingModelSearchSeqRef.current[index] = nextSeq
+        if (String(value || '').trim() === '') {
+          setPricingModelSearchOptions((prev) => Object.assign({}, prev, { [index]: [] }))
+          return
+        }
+        const timerId = setTimeout(() => {
+          delete pricingModelSearchTimerRef.current[index]
+          getPricingModels(value).then((data) => {
+            if (pricingModelSearchSeqRef.current[index] !== nextSeq) return
+            setPricingModelSearchOptions((prev) => Object.assign({}, prev, { [index]: Array.isArray(data && data.items) ? data.items : [] }))
+          }, () => {
+            if (pricingModelSearchSeqRef.current[index] === nextSeq) setPricingModelSearchOptions((prev) => Object.assign({}, prev, { [index]: [] }))
+          })
+        }, 180)
+        pricingModelSearchTimerRef.current[index] = timerId
+      }
+      const chooseOfficialModel = (index, option) => {
+        if (!option || typeof option.value !== 'string') return
+        const pendingTimer = pricingModelSearchTimerRef.current[index]
+        if (pendingTimer !== undefined) {
+          clearTimeout(pendingTimer)
+          delete pricingModelSearchTimerRef.current[index]
+        }
+        pricingModelSearchSeqRef.current[index] = (pricingModelSearchSeqRef.current[index] || 0) + 1
+        setPricingDraft((prev) => {
+          if (prev === null || !Array.isArray(prev.mappings) || !prev.mappings[index]) return prev
+          const mappings = prev.mappings.slice()
+          mappings[index] = Object.assign({}, mappings[index], { catalogModelId: option.value, catalogProviderId: option.providerId || '' })
+          return Object.assign({}, prev, { mappings })
+        })
+        setPricingModelSearchOpen(null)
+      }
+      const addPricingMapping = () => {
+        setPricingDraft((prev) => prev === null ? prev : Object.assign({}, prev, { mappings: prev.mappings.concat([{ usageIdentityKey: '', model: '', catalogProviderId: '', catalogModelId: '', inputTokenSemantics: 'fresh', multiplier: '1' }]) }))
+      }
+      const removePricingMapping = (index) => {
+        setPricingDraft((prev) => prev === null ? prev : Object.assign({}, prev, { mappings: prev.mappings.filter((_, itemIndex) => itemIndex !== index) }))
+      }
+      const updatePricingOverride = (index, field, value) => {
+        setPricingDraft((prev) => {
+          if (prev === null || !Array.isArray(prev.overrides) || !prev.overrides[index]) return prev
+          const overrides = prev.overrides.slice()
+          overrides[index] = Object.assign({}, overrides[index], { [field]: value })
+          return Object.assign({}, prev, { overrides })
+        })
+      }
+      const selectPricingOverrideModel = (index, value) => {
+        const selected = pricingUsedModels.find((model) => String(model.identityKey || model.model || '') === String(value))
+        if (!selected) return
+        const modelId = selected.pricingModel || selected.actualModel || selected.requestedModel || ''
+        setPricingDraft((prev) => {
+          if (prev === null || !Array.isArray(prev.overrides) || !prev.overrides[index]) return prev
+          const overrides = prev.overrides.slice()
+          overrides[index] = Object.assign({}, overrides[index], { modelId })
+          return Object.assign({}, prev, { overrides })
+        })
+        setPricingOverrideSearchText((prev) => Object.assign({}, prev, { [index]: modelId }))
+        setPricingOverrideOpen(null)
+      }
+      const searchPricingOverrideModels = (index, value) => {
+        setPricingOverrideSearchText((prev) => Object.assign({}, prev, { [index]: value }))
+        setPricingOverrideOpen(index)
+        updatePricingOverride(index, 'modelId', value)
+      }
+      const addPricingOverride = () => {
+        setPricingDraft((prev) => prev === null ? prev : Object.assign({}, prev, { overrides: prev.overrides.concat([{ providerId: '', modelId: '', displayName: '', input: '', output: '', cacheRead: '', cacheWrite: '' }]) }))
+      }
+      const removePricingOverride = (index) => {
+        setPricingDraft((prev) => prev === null ? prev : Object.assign({}, prev, { overrides: prev.overrides.filter((_, itemIndex) => itemIndex !== index) }))
+      }
 
       const totalTokens = agg.totals.input + agg.totals.output + agg.totals.cacheRead + agg.totals.cacheWrite + agg.totals.reasoning
       const cacheRate = rateOf(agg.totals.input, agg.totals.cacheRead)
+      const scopedCost = costAggregate(agg.totals)
+      const costValue = costDisplay(agg.totals, language)
+      const costCoverage = costCoverageLabel(agg.totals, language)
       const st = streaks(dayMap, useUtc)
 
       const today = calendarNow
@@ -804,7 +2028,7 @@ window.__ModuleLoader__.load({
       const weekdayLabels = language === 'en' ? ['', 'Mon', '', 'Wed', '', 'Fri', ''] : ['', '周一', '', '周三', '', '周五', '']
 
       const onEnter = (cell, ev) => {
-        setHover({ date: cell.date, x: ev.clientX, y: ev.clientY, day: dayMap.get(cell.date) })
+        setHover({ date: cell.date, x: ev.clientX, y: ev.clientY, day: heatmapMap.get(cell.date) })
       }
       const onMove = (cell, ev) => {
         setHover((prev) => (prev !== null && prev.date === cell.date ? { date: prev.date, x: ev.clientX, y: ev.clientY, day: prev.day } : prev))
@@ -812,12 +2036,12 @@ window.__ModuleLoader__.load({
       const onLeave = () => setHover(null)
 
       const cellElements = cells.map((cell, i) => {
-        const day = dayMap.get(cell.date)
+        const day = heatmapMap.get(cell.date)
         let count = 0
         if (day !== undefined) {
-          if (wsFilter === null) count = day.turns
+          if (queryReady || wsFilter === null) count = day.turns
           else {
-            const w = day.perWorkspace.find((x) => x.workspaceId === wsFilter)
+            const w = Array.isArray(day.perWorkspace) ? day.perWorkspace.find((x) => x.workspaceId === wsFilter) : undefined
             if (w !== undefined) count = w.turns
           }
         }
@@ -837,6 +2061,7 @@ window.__ModuleLoader__.load({
           onMouseEnter: (ev) => onEnter(cell, ev),
           onMouseMove: (ev) => onMove(cell, ev),
           onMouseLeave: onLeave,
+          onClick: () => openAuditForDate(cell.date),
         })
       })
 
@@ -872,9 +2097,15 @@ window.__ModuleLoader__.load({
         React.createElement('div', { className: 'uh-card-value' }, value),
         React.createElement('div', { className: 'uh-card-sub' }, sub),
       )
+      const summaryRateMetric = React.createElement('div', { className: 'uh-ios-metric uh-ios-metric-rate', style: { animationDelay: '280ms' } },
+        React.createElement('div', { className: 'uh-ios-metric-rate-head' },
+          React.createElement('div', { className: 'uh-ios-metric-label' }, React.createElement(LineIcon, { name: 'cache', size: 18 }), tr('缓存命中率', 'Cache Hit Rate')),
+          React.createElement('div', { className: 'uh-ios-metric-rate-value' }, (cacheRate).toFixed(1) + '%'),
+        ),
+        React.createElement('div', { className: 'uh-ios-metric-bar' }, React.createElement('div', { className: 'uh-ios-metric-fill', style: { width: Math.max(0, Math.min(100, cacheRate)) + '%' } })),
+        React.createElement('div', { className: 'uh-ios-metric-rate-detail' }, language === 'en' ? 'Context reused ' + fmtCompact(agg.totals.cacheRead) + ' tokens' : '复用上下文 ' + fmtCompact(agg.totals.cacheRead) + ' Token'),
+      )
 
-      const wsTotal = (w) => w.input + w.output + w.cacheRead + w.cacheWrite + w.reasoning
-      const rows = agg.perWs.slice().sort((a, b) => wsTotal(b) - wsTotal(a))
       const maxTotal = rows.length > 0 ? wsTotal(rows[0]) : 0
 
       const tokenCardRows = rows.slice(0, 3).map((w) => {
@@ -924,7 +2155,7 @@ window.__ModuleLoader__.load({
           className: 'uh-row' + (selected ? ' uh-sel' : ''),
           onClick: () => toggleFilter(w.workspaceId),
         },
-          React.createElement('div', {},
+          React.createElement('div', { className: 'uh-row-title-wrap' },
             React.createElement('div', { className: 'uh-ws-title' }, title),
             React.createElement('div', { className: 'uh-ws-path' }, subText),
           ),
@@ -939,6 +2170,7 @@ window.__ModuleLoader__.load({
               React.createElement('div', { className: 'uh-barfill', style: { width: maxTotal > 0 ? Math.max(2, (total / maxTotal) * 100) + '%' : '0%', background: color } }),
             ),
           ),
+          React.createElement('div', { className: 'uh-num uh-cost-num' }, costDisplay(w, language)),
           React.createElement('div', { className: 'uh-num' }, rate.toFixed(1) + '%'),
           React.createElement('div', { className: 'uh-num' }, maxTotal > 0 ? ((total / maxTotal) * 100).toFixed(0) + '%' : '0%'),
         )
@@ -946,29 +2178,47 @@ window.__ModuleLoader__.load({
 
       const modelViewLabel = modelView === 'route' ? tr('混合查看', 'Combined View') : modelView === 'model' ? tr('按模型合并', 'Grouped by Model') : tr('按供应商汇总', 'Grouped by Provider')
       const modelColumnLabel = modelView === 'route' ? tr('供应商 / 模型', 'Provider / Model') : modelView === 'model' ? tr('模型', 'Model') : tr('供应商', 'Provider')
-      const modelRows = aggregateModelRows(agg.perModel || [], modelView, tr('未知供应商', 'Unknown provider'), tr('未知模型', 'Unknown model')).sort((a, b) => wsTotal(b) - wsTotal(a))
+      const modelDonutChart = detailView !== 'model' || modelRows.length === 0 ? null : React.createElement(UsageDonutChart, {
+        key: 'model-donut-' + detailView + ':' + queryKey + ':' + stats.revision + ':' + modelView,
+        title: modelView === 'provider' ? tr('供应商用量', 'Provider Usage') : tr('模型用量', 'Model Usage'),
+        icon: 'chart',
+        language,
+        items: modelRows.map((row, index) => ({ label: row.model, value: wsTotal(row), cost: row.cost, color: DONUT_COLORS[index % DONUT_COLORS.length] })),
+      })
+      const workspaceDonutChart = detailView !== 'workspace' || rows.length === 0 ? null : React.createElement(UsageDonutChart, {
+        key: 'workspace-donut-' + detailView + ':' + queryKey + ':' + stats.revision,
+        title: tr('工作区用量', 'Workspace Usage'),
+        icon: 'folder',
+        language,
+        items: rows.map((row, index) => ({ label: wsTitle(row.workspaceId), value: wsTotal(row), cost: row.cost, color: DONUT_COLORS[index % DONUT_COLORS.length] })),
+      })
       const exportCsv = () => {
         const quote = (value) => '"' + String(value === undefined || value === null ? '' : value).replace(/"/g, '""') + '"'
         const line = (values) => values.map(quote).join(',')
         const allTokens = (entry) => entry.input + entry.output + entry.cacheRead + entry.cacheWrite + entry.reasoning
-        const tokenHeaders = [tr('输入 Token', 'Input Tokens'), tr('缓存命中 Token', 'Cache-Hit Tokens'), tr('缓存写入 Token', 'Cache-Write Tokens'), tr('输出 Token', 'Output Tokens'), tr('推理 Token', 'Reasoning Tokens'), tr('总处理 Token', 'Total Tokens Processed'), tr('缓存命中率', 'Cache Hit Rate')]
+        const tokenHeaders = [tr('输入 Token', 'Input Tokens'), tr('缓存命中 Token', 'Cache-Hit Tokens'), tr('缓存写入 Token', 'Cache-Write Tokens'), tr('输出 Token', 'Output Tokens'), tr('推理 Token', 'Reasoning Tokens'), tr('总处理 Token', 'Total Tokens Processed'), tr('成本', 'Cost'), tr('缓存命中率', 'Cache Hit Rate')]
         const output = [
           line([tr('DSH 用量统计导出', 'DSH Usage Statistics Export')]),
           line([tr('导出时间', 'Exported At'), useUtc ? new Date().toLocaleString('en-US', { timeZone: 'UTC', timeZoneName: 'short' }) : new Date().toLocaleString('zh-CN')]),
           line([tr('时间范围', 'Time Range'), rangeLabel]),
+          line([tr('时区', 'Timezone'), useUtc ? 'UTC' : tr('本地', 'Local')]),
+          line([tr('工作区筛选', 'Workspace Filter'), wsFilter || tr('全部', 'All')]),
+          line([tr('供应商筛选', 'Provider Filter'), providerFilter || tr('全部', 'All')]),
+          line([tr('模型筛选', 'Model Filter'), modelFilter || tr('全部', 'All')]),
+          line([tr('统计 revision', 'Stats Revision'), stats.revision || '']),
           line([tr('模型查看模式', 'Model View Mode'), modelViewLabel]),
           '',
           line([tr('汇总', 'Summary')]),
           line([tr('回合', 'Turns'), tr('会话', 'Sessions'), ...tokenHeaders]),
-          line([agg.totals.turns, agg.totals.sessions, agg.totals.input, agg.totals.cacheRead, agg.totals.cacheWrite, agg.totals.output, agg.totals.reasoning, allTokens(agg.totals), rateOf(agg.totals.input, agg.totals.cacheRead).toFixed(2) + '%']),
+          line([agg.totals.turns, agg.totals.sessions, agg.totals.input, agg.totals.cacheRead, agg.totals.cacheWrite, agg.totals.output, agg.totals.reasoning, allTokens(agg.totals), costDisplay(agg.totals, language), rateOf(agg.totals.input, agg.totals.cacheRead).toFixed(2) + '%']),
           '',
           line([tr('模型用量明细', 'Model Usage Details')]),
           line([modelColumnLabel, tr('调用', 'Calls'), ...tokenHeaders]),
-          ...modelRows.map((m) => line([m.model, m.calls, m.input, m.cacheRead, m.cacheWrite, m.output, m.reasoning, allTokens(m), rateOf(m.input, m.cacheRead).toFixed(2) + '%'])),
+          ...modelRows.map((m) => line([m.model, m.calls, m.input, m.cacheRead, m.cacheWrite, m.output, m.reasoning, allTokens(m), costDisplay(m, language), rateOf(m.input, m.cacheRead).toFixed(2) + '%'])),
           '',
           line([tr('工作区明细', 'Workspace Details')]),
           line([tr('工作区', 'Workspace'), tr('路径', 'Path'), tr('回合', 'Turns'), ...tokenHeaders]),
-          ...rows.map((w) => { const meta = wsById.get(w.workspaceId); return line([wsTitle(w.workspaceId), meta ? meta.path : '', w.turns, w.input, w.cacheRead, w.cacheWrite, w.output, w.reasoning, allTokens(w), rateOf(w.input, w.cacheRead).toFixed(2) + '%']) }),
+          ...rows.map((w) => { const meta = wsById.get(w.workspaceId); return line([wsTitle(w.workspaceId), meta ? meta.path : '', w.turns, w.input, w.cacheRead, w.cacheWrite, w.output, w.reasoning, allTokens(w), costDisplay(w, language), rateOf(w.input, w.cacheRead).toFixed(2) + '%']) }),
         ]
         const blob = new Blob(['\uFEFF' + output.join('\r\n')], { type: 'text/csv;charset=utf-8' })
         const url = URL.createObjectURL(blob)
@@ -979,20 +2229,23 @@ window.__ModuleLoader__.load({
         URL.revokeObjectURL(url)
       }
 
-      const modelElements = modelRows.map((m) => {
+      const modelElements = detailView === 'model' ? modelRows.map((m) => {
         const total = wsTotal(m)
         const rate = rateOf(m.input, m.cacheRead)
-        return React.createElement('div', { key: m.model, className: 'uh-model-row uh-row' },
-          React.createElement('div', { className: 'uh-ws-title', title: m.model }, m.model),
+        return React.createElement('div', { key: m.identityKey || m.model, className: 'uh-model-row uh-row' },
+          React.createElement('div', { className: 'uh-row-title-wrap' },
+            React.createElement('div', { className: 'uh-ws-title', title: m.model }, m.model),
+          ),
           React.createElement('div', { className: 'uh-num' }, fmtCompact(m.calls)),
           React.createElement('div', { className: 'uh-num' }, fmtCompact(m.input)),
           React.createElement('div', { className: 'uh-num' }, fmtCompact(m.cacheRead)),
           React.createElement('div', { className: 'uh-num' }, fmtCompact(m.output)),
           React.createElement('div', { className: 'uh-num' }, fmtCompact(m.reasoning)),
           React.createElement('div', { className: 'uh-num' }, fmtCompact(total)),
+          React.createElement('div', { className: 'uh-num uh-cost-num' }, costDisplay(m, language)),
           React.createElement('div', { className: 'uh-num' }, rate.toFixed(1) + '%'),
         )
-      })
+      }) : []
 
       const aliasPanel = aliasOpen
         ? React.createElement('div', { className: 'uh-panel uh-anim-panel' },
@@ -1022,13 +2275,133 @@ window.__ModuleLoader__.load({
         )
         : null
 
+
+      const pricingSync = currentPricing.sync && typeof currentPricing.sync === 'object' ? currentPricing.sync : {}
+      const pricingPanel = pricingOpen && pricingDraft !== null ? React.createElement('div', { className: 'uh-panel uh-pricing-panel uh-anim-panel' },
+        React.createElement('div', { className: 'uh-pricing-head' },
+          React.createElement('div', { className: 'uh-title-with-icon' }, React.createElement(LineIcon, { name: 'wallet', size: 16 }), React.createElement('strong', {}, tr('成本统计设置', 'Cost Statistics'))),
+          React.createElement('button', { type: 'button', className: 'uh-refresh uh-icon-button', title: tr('关闭成本设置', 'Close cost settings'), 'aria-label': tr('关闭成本设置', 'Close cost settings'), onClick: () => setPricingOpen(false) }, React.createElement(LineIcon, { name: 'close', size: 16 })),
+        ),
+        React.createElement('div', { className: 'uh-pricing-note' }, tr('价格来自 models.dev 的公开目录，单位为 USD / 1M Token。已保存的历史成本不会因目录更新重算；同步只回填当前未计价的调用。', 'Prices come from the public models.dev catalog in USD per 1M tokens. Saved historical costs are not recalculated; sync only backfills currently unpriced calls.')),
+        React.createElement('div', { className: 'uh-pricing-toolbar' },
+          React.createElement('label', { className: 'uh-pricing-switch' },
+            React.createElement('input', { type: 'checkbox', checked: pricingDraft.sync.autoEnabled === true, disabled: pricingSaving || pricingSyncing || pricingSyncSaving, onChange: (event) => updatePricingSync(event.target.checked) }),
+            React.createElement('span', {}, tr('启用 6 小时自动同步', 'Enable 6-hour automatic sync')),
+          ),
+          React.createElement('span', { className: 'uh-note' }, pricingSyncSaving ? tr('保存中…', 'Saving…') : (pricingSync.lastSuccessAt > 0 ? tr('上次成功：', 'Last success: ') + new Date(pricingSync.lastSuccessAt).toLocaleString() : tr('尚未同步', 'Not synced yet'))),
+          React.createElement('button', { type: 'button', className: 'uh-refresh', onClick: syncPricingNow, disabled: pricingSyncing || pricingSaving || pricingSyncSaving }, React.createElement(LineIcon, { name: 'refresh', size: 14 }), pricingSyncing ? tr('同步中…', 'Syncing…') : tr('立即同步', 'Sync now')),
+        ),
+        pricingSync.lastError ? React.createElement('div', { className: 'uh-pricing-error', role: 'alert' }, tr('上次同步失败：', 'Last sync failed: ') + pricingSync.lastError) : null,
+        React.createElement('div', { className: 'uh-pricing-section' },
+          React.createElement('div', { className: 'uh-pricing-section-head' }, React.createElement('strong', {}, tr('当前用量匹配', 'Usage matches')), React.createElement('span', { className: 'uh-note' }, pricingUsedModels.length + ' ' + tr('个模型', 'models'))),
+          pricingUsedModels.length === 0 ? React.createElement('div', { className: 'uh-empty', style: { padding: '12px 0' } }, tr('暂无模型用量', 'No model usage yet')) : React.createElement('div', { className: 'uh-pricing-table-wrap' },
+            React.createElement('table', { className: 'uh-pricing-model-table' },
+              React.createElement('thead', {}, React.createElement('tr', {},
+                React.createElement('th', { scope: 'col' }, tr('当前模型', 'Usage model')),
+                React.createElement('th', { scope: 'col' }, tr('状态', 'Status')),
+                React.createElement('th', { scope: 'col' }, tr('官方模型', 'Official model')),
+                React.createElement('th', { scope: 'col', title: tr('输入价格（USD / 1M）', 'Input price (USD / 1M)') }, tr('输入', 'Input')),
+                React.createElement('th', { scope: 'col', title: tr('输出价格（USD / 1M）', 'Output price (USD / 1M)') }, tr('输出', 'Output')),
+                React.createElement('th', { scope: 'col', title: tr('缓存读取价格（USD / 1M）', 'Cache read price (USD / 1M)') }, tr('缓存读', 'Cache read')),
+                React.createElement('th', { scope: 'col', title: tr('缓存写入价格（USD / 1M）', 'Cache write price (USD / 1M)') }, tr('缓存写', 'Cache write')),
+              )),
+              React.createElement('tbody', {}, pricingUsedModels.map((model) => React.createElement('tr', { key: model.identityKey },
+                React.createElement('td', { className: 'uh-pricing-model-name', title: model.model }, model.model || tr('未知模型', 'Unknown model')),
+                React.createElement('td', { title: model.reason || '' }, React.createElement('span', { className: 'uh-pricing-status uh-pricing-status-' + (model.status || 'unpriced') }, pricingStatusLabel(model.status || 'unpriced', language))),
+                React.createElement('td', { className: 'uh-pricing-model-target', title: model.pricingModel || '' }, model.pricingModel || tr('未匹配', 'No match')),
+                React.createElement('td', { className: 'uh-pricing-model-rate' }, model.status === 'priced' && model.rates ? model.rates.input : '—'),
+                React.createElement('td', { className: 'uh-pricing-model-rate' }, model.status === 'priced' && model.rates ? model.rates.output : '—'),
+                React.createElement('td', { className: 'uh-pricing-model-rate' }, model.status === 'priced' && model.rates ? model.rates.cacheRead : '—'),
+                React.createElement('td', { className: 'uh-pricing-model-rate' }, model.status === 'priced' && model.rates ? model.rates.cacheWrite : '—'),
+              )),
+            ),
+          ),
+        ),
+          ),
+        React.createElement('div', { className: 'uh-pricing-section' },
+          React.createElement('div', { className: 'uh-pricing-section-head' }, React.createElement('strong', {}, tr('模型映射', 'Model mappings')), React.createElement('button', { type: 'button', className: 'uh-refresh', onClick: addPricingMapping }, React.createElement(LineIcon, { name: 'plus', size: 13 }), tr('添加映射', 'Add mapping'))),
+          pricingDraft.mappings.length === 0 ? React.createElement('div', { className: 'uh-empty', style: { padding: '12px 0' } }, tr('选择当前模型后，再指定对应的官方模型。DSH Provider 不参与计价。', 'Select a used model, then choose its official model. The DSH provider is ignored.')) : pricingDraft.mappings.map((mapping, index) => {
+            const usedModelQuery = String(pricingUsedModelSearchText[index] || '').trim().toLowerCase()
+            const mappingModelKey = pricingModelKey(mapping.model)
+            const mappingOfficialModelKey = pricingModelKey(mapping.catalogModelId)
+            const selectedUsedModel = pricingUsedModelOptions.find((option) => option.value === String(mapping.usageIdentityKey || '')) || pricingUsedModelOptions.find((option) => mappingModelKey !== '' && option.model === mappingModelKey) || pricingUsedModelOptions.find((option) => mappingOfficialModelKey !== '' && option.officialModel === mappingOfficialModelKey)
+            const usedModelOptions = pricingUsedModelOptions.filter((option) => usedModelQuery === '' || option.label.toLowerCase().includes(usedModelQuery))
+            return React.createElement('div', { key: index, className: 'uh-pricing-edit-row' },
+              React.createElement('div', { className: 'uh-pricing-used-model-picker' },
+                React.createElement('input', { type: 'text', className: 'uh-pricing-used-model-input', placeholder: tr('选择当前用过的模型', 'Select a used model'), value: pricingUsedModelSearchText[index] !== undefined ? pricingUsedModelSearchText[index] : (selectedUsedModel ? selectedUsedModel.label : ''), 'aria-label': tr('当前用过的模型', 'Used model'), 'aria-haspopup': 'listbox', 'aria-expanded': pricingUsedModelOpen === index, onFocus: () => { setPricingUsedModelOpen(index); setPricingUsedModelSearchText((prev) => Object.assign({}, prev, { [index]: '' })) }, onClick: () => setPricingUsedModelOpen(index), onBlur: () => setTimeout(() => { setPricingUsedModelOpen((current) => current === index ? null : current); if (selectedUsedModel) setPricingUsedModelSearchText((prev) => Object.assign({}, prev, { [index]: selectedUsedModel.label })) }, 120), onKeyDown: (event) => { if (event.key === 'Escape') setPricingUsedModelOpen(null) }, onChange: (event) => searchUsedModels(index, event.target.value) }),
+                pricingUsedModelOpen === index && usedModelOptions.length > 0 ? React.createElement('div', { className: 'uh-language-options uh-pricing-used-model-options', role: 'listbox', 'aria-label': tr('当前用过的模型', 'Used models') },
+                  usedModelOptions.map((option) => React.createElement('button', { key: option.value, type: 'button', role: 'option', className: 'uh-language-option uh-pricing-model-option', onMouseDown: (event) => event.preventDefault(), onClick: () => selectPricingUsedModel(index, option.value) },
+                    React.createElement(LineIcon, { name: 'list', size: 14 }),
+                    React.createElement('span', { className: 'uh-pricing-model-option-name' }, option.label),
+                  )),
+                ) : null,
+              ),
+              React.createElement('div', { className: 'uh-pricing-model-search' },
+                React.createElement('input', { type: 'text', className: 'uh-pricing-model-search-input', placeholder: tr('输入官方模型 ID 检索', 'Type official model ID to search'), value: mapping.catalogModelId || '', 'aria-label': tr('官方模型 ID', 'Official model ID'), 'aria-autocomplete': 'list', onFocus: () => setPricingModelSearchOpen(index), onBlur: () => setTimeout(() => setPricingModelSearchOpen((current) => current === index ? null : current), 120), onKeyDown: (event) => { if (event.key === 'Escape') setPricingModelSearchOpen(null) }, onChange: (event) => searchOfficialModels(index, event.target.value) }),
+                pricingModelSearchOpen === index && Array.isArray(pricingModelSearchOptions[index]) && pricingModelSearchOptions[index].length > 0 ? React.createElement('div', { className: 'uh-language-options uh-pricing-model-options', role: 'listbox', 'aria-label': tr('官方模型匹配结果', 'Official model matches') },
+                  pricingModelSearchOptions[index].map((option) => React.createElement('button', { key: option.value, type: 'button', role: 'option', className: 'uh-language-option uh-pricing-model-option', onMouseDown: (event) => event.preventDefault(), onClick: () => chooseOfficialModel(index, option) },
+                    React.createElement(LineIcon, { name: 'list', size: 14 }),
+                    React.createElement('span', { className: 'uh-pricing-model-option-name' }, option.label || option.value),
+                    React.createElement('span', { className: 'uh-pricing-model-option-id' }, option.value),
+                  )),
+                ) : null,
+              ),
+              React.createElement('input', { type: 'number', min: '0', step: 'any', title: tr('成本倍率', 'Cost multiplier'), 'aria-label': tr('成本倍率', 'Cost multiplier'), value: mapping.multiplier || '1', onChange: (event) => updatePricingMapping(index, 'multiplier', event.target.value) }),
+              React.createElement('button', { type: 'button', className: 'uh-refresh uh-icon-button', title: tr('删除映射', 'Remove mapping'), 'aria-label': tr('删除映射', 'Remove mapping'), onClick: () => removePricingMapping(index) }, React.createElement(LineIcon, { name: 'close', size: 14 })),
+            )
+          }),
+        ),
+        React.createElement('div', { className: 'uh-pricing-section' },
+          React.createElement('div', { className: 'uh-pricing-section-head' }, React.createElement('strong', {}, tr('显式价格覆盖', 'Explicit price overrides')), React.createElement('button', { type: 'button', className: 'uh-refresh', onClick: addPricingOverride }, React.createElement(LineIcon, { name: 'plus', size: 13 }), tr('添加价格', 'Add price'))),
+          pricingDraft.overrides.length === 0 ? React.createElement('div', { className: 'uh-empty', style: { padding: '12px 0' } }, tr('仅在官方目录未覆盖或有明确官方账单时添加；价格按模型 ID 生效。', 'Add an override only when the official catalog lacks the model or you have an authoritative official price. It applies by model ID.')) : React.createElement(React.Fragment, null,
+            React.createElement('div', { className: 'uh-pricing-price-head' },
+              React.createElement('span', {}, tr('官方模型 ID', 'Official model ID')),
+              React.createElement('span', {}, tr('输入价 / 1M', 'Input / 1M')),
+              React.createElement('span', {}, tr('输出价 / 1M', 'Output / 1M')),
+              React.createElement('span', {}, tr('缓存读 / 1M', 'Cache read / 1M')),
+              React.createElement('span', {}, tr('缓存写 / 1M', 'Cache write / 1M')),
+              React.createElement('span', {}, ''),
+            ),
+            pricingDraft.overrides.map((entry, index) => {
+              const overrideModelQuery = String(pricingOverrideSearchText[index] || '').trim().toLowerCase()
+              const overrideModelOptions = pricingUsedModelOptions.filter((option) => overrideModelQuery === '' || option.label.toLowerCase().includes(overrideModelQuery))
+              return React.createElement('div', { key: index, className: 'uh-pricing-edit-row uh-pricing-price-row' },
+                React.createElement('div', { className: 'uh-pricing-used-model-picker' },
+                  React.createElement('input', { type: 'text', className: 'uh-pricing-used-model-input', placeholder: tr('选择当前用过的模型', 'Select a used model'), value: pricingOverrideSearchText[index] !== undefined ? pricingOverrideSearchText[index] : (entry.modelId || ''), 'aria-label': tr('覆盖模型 ID', 'Override model ID'), 'aria-haspopup': 'listbox', 'aria-expanded': pricingOverrideOpen === index, onFocus: () => { setPricingOverrideOpen(index); setPricingOverrideSearchText((prev) => Object.assign({}, prev, { [index]: '' })) }, onClick: () => setPricingOverrideOpen(index), onBlur: () => setTimeout(() => { setPricingOverrideOpen((current) => current === index ? null : current); if (entry.modelId) setPricingOverrideSearchText((prev) => Object.assign({}, prev, { [index]: entry.modelId })) }, 120), onKeyDown: (event) => { if (event.key === 'Escape') setPricingOverrideOpen(null) }, onChange: (event) => searchPricingOverrideModels(index, event.target.value) }),
+                  pricingOverrideOpen === index && overrideModelOptions.length > 0 ? React.createElement('div', { className: 'uh-language-options uh-pricing-used-model-options', role: 'listbox', 'aria-label': tr('当前用过的模型', 'Used models') },
+                    overrideModelOptions.map((option) => React.createElement('button', { key: option.value, type: 'button', role: 'option', className: 'uh-language-option uh-pricing-model-option', onMouseDown: (event) => event.preventDefault(), onClick: () => selectPricingOverrideModel(index, option.value) },
+                      React.createElement(LineIcon, { name: 'list', size: 14 }),
+                      React.createElement('span', { className: 'uh-pricing-model-option-name' }, option.label),
+                    )),
+                  ) : null,
+                ),
+                React.createElement('input', { type: 'number', min: '0', step: 'any', placeholder: tr('输入价 / 1M', 'Input / 1M'), title: tr('输入价格，美元 / 100 万 Token', 'Input price, USD / 1M tokens'), 'aria-label': tr('输入价格 / 1M', 'Input price / 1M'), value: entry.input === undefined ? '' : entry.input, onChange: (event) => updatePricingOverride(index, 'input', event.target.value) }),
+                React.createElement('input', { type: 'number', min: '0', step: 'any', placeholder: tr('输出价 / 1M', 'Output / 1M'), title: tr('输出价格，美元 / 100 万 Token', 'Output price, USD / 1M tokens'), 'aria-label': tr('输出价格 / 1M', 'Output price / 1M'), value: entry.output === undefined ? '' : entry.output, onChange: (event) => updatePricingOverride(index, 'output', event.target.value) }),
+                React.createElement('input', { type: 'number', min: '0', step: 'any', placeholder: tr('缓存读 / 1M', 'Cache read / 1M'), title: tr('缓存读取价格，美元 / 100 万 Token', 'Cache read price, USD / 1M tokens'), 'aria-label': tr('缓存读取价格 / 1M', 'Cache read price / 1M'), value: entry.cacheRead === undefined ? '' : entry.cacheRead, onChange: (event) => updatePricingOverride(index, 'cacheRead', event.target.value) }),
+                React.createElement('input', { type: 'number', min: '0', step: 'any', placeholder: tr('缓存写 / 1M', 'Cache write / 1M'), title: tr('缓存写入价格，美元 / 100 万 Token', 'Cache write price, USD / 1M tokens'), 'aria-label': tr('缓存写入价格 / 1M', 'Cache write price / 1M'), value: entry.cacheWrite === undefined ? '' : entry.cacheWrite, onChange: (event) => updatePricingOverride(index, 'cacheWrite', event.target.value) }),
+                React.createElement('button', { type: 'button', className: 'uh-refresh uh-icon-button', title: tr('删除价格覆盖', 'Remove price override'), 'aria-label': tr('删除价格覆盖', 'Remove price override'), onClick: () => removePricingOverride(index) }, React.createElement(LineIcon, { name: 'close', size: 14 })),
+              )
+            }),
+          ),
+        ),
+        pricingError !== '' ? React.createElement('div', { className: 'uh-pricing-error', role: 'alert' }, pricingError === 'forbidden' ? tr('没有权限保存成本设置', 'Not allowed to save cost settings') : pricingError === 'token' ? tr('当前进程令牌不可用，请刷新看板', 'The process capability is unavailable; refresh the dashboard') : pricingError === 'sync' ? tr('models.dev 同步失败，已保留上次成功目录', 'models.dev sync failed; the last good catalog was kept') : tr('成本设置保存失败，请检查输入', 'Cost settings could not be saved; check the inputs')) : null,
+        React.createElement('div', { className: 'uh-pricing-foot' },
+          React.createElement('span', { className: 'uh-note' }, tr('保存不会重算已有正成本；回填只处理未计价调用。', 'Saving does not recalculate existing positive costs; backfill only handles unpriced calls.')),
+          React.createElement('div', { className: 'uh-actions' },
+            React.createElement('button', { type: 'button', className: 'uh-refresh', onClick: () => setPricingOpen(false) }, tr('取消', 'Cancel')),
+            React.createElement('button', { type: 'button', className: 'uh-refresh', disabled: pricingSaving || pricingSyncing, onClick: () => savePricingSettings(false) }, pricingSaving ? tr('保存中…', 'Saving…') : tr('保存', 'Save')),
+            React.createElement('button', { type: 'button', className: 'uh-refresh uh-pricing-backfill', disabled: pricingSaving || pricingSyncing, onClick: () => savePricingSettings(true) }, tr('保存并回填', 'Save and backfill')),
+          ),
+        ),
+      ) : null
+
       let tip = null
       if (hover !== null && hover !== undefined) {
         const day = hover.day
         let rowsContent = []
         let tokensText = ''
         if (day !== undefined) {
-          const sorted = day.perWorkspace.slice().sort((a, b) => b.turns - a.turns)
+          const sorted = (Array.isArray(day.perWorkspace) ? day.perWorkspace : []).slice().sort((a, b) => b.turns - a.turns)
           rowsContent = sorted.map((entry) => {
             const idx = wsIndex.get(entry.workspaceId)
             return React.createElement('div', {
@@ -1041,8 +2414,9 @@ window.__ModuleLoader__.load({
               React.createElement('span', { className: 'uh-n' }, language === 'en' ? entry.turns + ' uses' : entry.turns + ' 次'),
             )
           })
-          if (day.tokens.input + day.tokens.output + day.tokens.cacheRead > 0) {
-            tokensText = language === 'en' ? 'Tokens: Input ' + fmtCompact(day.tokens.input) + ' · Cache hits ' + fmtCompact(day.tokens.cacheRead) + ' · Output ' + fmtCompact(day.tokens.output) : 'Token：输入 ' + fmtCompact(day.tokens.input) + ' · 缓存命中 ' + fmtCompact(day.tokens.cacheRead) + ' · 输出 ' + fmtCompact(day.tokens.output)
+          const dayTokenValues = rowTokens(day)
+          if (dayTokenValues.input + dayTokenValues.output + dayTokenValues.cacheRead > 0) {
+            tokensText = language === 'en' ? 'Tokens: Input ' + fmtCompact(dayTokenValues.input) + ' · Cache hits ' + fmtCompact(dayTokenValues.cacheRead) + ' · Output ' + fmtCompact(dayTokenValues.output) : 'Token：输入 ' + fmtCompact(dayTokenValues.input) + ' · 缓存命中 ' + fmtCompact(dayTokenValues.cacheRead) + ' · 输出 ' + fmtCompact(dayTokenValues.output)
           }
         }
         const flip = hover.x > 640
@@ -1095,9 +2469,120 @@ window.__ModuleLoader__.load({
         ),
         customRangeErrorText !== '' ? React.createElement('div', { className: 'uh-custom-range-error', role: 'alert' }, customRangeErrorText) : null,
       ) : null
+      const trendBounds = queryScope !== null ? { start: queryScope.start, end: queryScope.end } : resolveRangeBounds(stats, range, useUtc, activeCustomRange)
+      const hourlyTrendRows = queryReady && queryScope !== null && queryScope.start === queryScope.end && queryResult && Array.isArray(queryResult.hourly) ? buildTrendHourlyRows(queryResult.hourly, useUtc) : []
+      const trendRows = hourlyTrendRows.length > 0 ? hourlyTrendRows : buildTrendRows(queryReady && queryResult && Array.isArray(queryResult.daily) ? queryResult.daily : activeDayRows, trendBounds, useUtc)
+      const trendAnimationKey = queryReady && queryResult ? queryKey + ':' + queryResult.revision : queryKey
+      const toggleTrendSeries = (key) => {
+        setTrendVisible((prev) => {
+          if (prev.includes(key)) return prev.length <= 1 ? prev : prev.filter((item) => item !== key)
+          return prev.concat(key)
+        })
+      }
+      const trendPanel = React.createElement(UsageTrendChart, {
+        key: trendAnimationKey,
+        rows: trendRows,
+        visible: trendVisible,
+        language,
+        rangeLabel,
+        loading: queryLoading && !queryReady,
+        error: queryError !== '' && queryError !== 'stale' && !queryReady ? tr('趋势数据加载失败', 'Trend data unavailable') : '',
+        onToggle: toggleTrendSeries,
+        onPointClick: openAuditForDate,
+      })
+      const detailScopeLabel = selectedDetailScope === null
+        ? rangeLabel
+        : selectedDetailScope.start === selectedDetailScope.end
+          ? selectedDetailScope.start
+          : selectedDetailScope.start + ' → ' + selectedDetailScope.end
+      const auditToken = (row, key) => Number(row && row.values && row.values[key]) || 0
+      const auditTotal = (row) => auditToken(row, 'input') + auditToken(row, 'cacheRead') + auditToken(row, 'cacheWrite') + auditToken(row, 'output') + auditToken(row, 'reasoning')
+      const auditSource = (row) => row && row.materialization === 'ledger-recovery' ? tr('账本恢复', 'Ledger recovery') : row && row.materialization === 'ledger-reuse' ? tr('账本复用', 'Ledger reuse') : row && row.materialization === 'scan' ? tr('扫描', 'Scan') : row && row.materialization === 'live' ? tr('实时', 'Live') : tr('未知', 'Unknown')
+      const auditTime = (row, detailed) => row && Number.isFinite(row.time) ? new Date(row.time).toLocaleString(language === 'en' ? 'en-US' : 'zh-CN', language === 'en' ? (detailed ? { timeZone: 'UTC' } : { timeZone: 'UTC', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' }) : (detailed ? undefined : { month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' })) : '—'
+      const selectedAudit = auditRows.find((row) => row.id === auditSelectedId) || auditRows[0] || null
+      const exportAuditCsv = async () => {
+        if (selectedDetailScope === null || auditExporting) return
+        setAuditExporting(true)
+        setAuditError('')
+        try {
+          let cursor = null
+          const all = []
+          for (let page = 0; page < 50; page += 1) {
+            const data = await getUsageRecords(selectedDetailScope, cursor, 200)
+            if (data === null || typeof data !== 'object' || !Array.isArray(data.items)) throw new Error('audit export failed')
+            all.push(...data.items)
+            if (!data.hasMore || !data.nextCursor) break
+            cursor = data.nextCursor
+          }
+          const quote = (value) => '"' + String(value === undefined || value === null ? '' : value).replace(/"/g, '""') + '"'
+          const line = (values) => values.map(quote).join(',')
+          const headers = [tr('时间', 'Time'), tr('日期', 'Date'), tr('Provider', 'Provider'), tr('请求模型', 'Requested model'), tr('实际模型', 'Actual model'), tr('显示模型', 'Display model'), 'turn', 'step', 'seq', tr('输入', 'Input'), tr('缓存命中', 'Cache read'), tr('缓存写入', 'Cache write'), tr('输出', 'Output'), tr('推理', 'Reasoning'), tr('成本', 'Cost'), tr('计价状态', 'Cost status'), tr('计价模型', 'Pricing model'), tr('来源', 'Source')]
+          const lines = [line([tr('DSH 用量明细导出', 'DSH Usage Audit Export')]), line([tr('范围', 'Scope'), selectedDetailScope.start + ' → ' + selectedDetailScope.end]), line([tr('时区', 'Timezone'), selectedDetailScope.utc ? 'UTC' : tr('本地', 'Local')]), line(headers)]
+          for (const row of all) lines.push(line([row.time, row.date, row.provider, row.requestedModel, row.actualModel, row.model, row.turn, row.step, row.seq, auditToken(row, 'input'), auditToken(row, 'cacheRead'), auditToken(row, 'cacheWrite'), auditToken(row, 'output'), auditToken(row, 'reasoning'), row.cost && row.cost.status === 'priced' ? row.cost.total : '', row.cost && row.cost.status ? row.cost.status : 'unpriced', row.cost && row.cost.pricingModel ? row.cost.pricingModel : '', row.materialization || 'unknown']))
+          const blob = new Blob(['\uFEFF' + lines.join('\r\n')], { type: 'text/csv;charset=utf-8' })
+          const url = URL.createObjectURL(blob)
+          const anchor = document.createElement('a')
+          anchor.href = url
+          anchor.download = 'dsh-all-usage-audit-' + selectedDetailScope.start + '-to-' + selectedDetailScope.end + '.csv'
+          document.body.appendChild(anchor); anchor.click(); anchor.remove()
+          URL.revokeObjectURL(url)
+        } catch (err) {
+          setAuditError('audit-export')
+        } finally {
+          setAuditExporting(false)
+        }
+      }
+      const recordsPanel = React.createElement('div', { className: 'uh-panel uh-records-panel', ref: recordsPanelRef, style: { display: detailView === 'logs' ? 'block' : 'none' } },
+        React.createElement('div', { className: 'uh-records-head' },
+          React.createElement('div', {},
+            React.createElement('h3', { className: 'uh-tbl-title uh-title-with-icon' }, React.createElement(LineIcon, { name: 'list', size: 16 }), tr('请求日志', 'Request Logs')),
+            React.createElement('div', { className: 'uh-note' }, detailScopeLabel + (selectedDetailScope && selectedDetailScope.utc ? ' · UTC' : '')),
+          ),
+          React.createElement('div', { className: 'uh-actions' },
+            auditLoading ? React.createElement('span', { className: 'uh-query-note' }, tr('同步中…', 'Refreshing…')) : null,
+            React.createElement('button', { type: 'button', className: 'uh-refresh', title: tr('导出当前日志', 'Export current logs'), onClick: exportAuditCsv, disabled: auditExporting || selectedDetailScope === null }, React.createElement(LineIcon, { name: 'export', size: 13 }), auditExporting ? tr('导出中…', 'Exporting…') : tr('导出日志', 'Export logs')),
+          ),
+        ),
+        auditError !== '' ? React.createElement('div', { className: 'uh-records-error', role: 'alert' }, auditError === 'stale' ? tr('数据已更新，正在重新加载日志…', 'Data changed; reloading logs…') : auditError === 'audit-export' ? tr('日志导出失败', 'Unable to export logs') : tr('日志加载失败，请重试', 'Unable to load logs')) : null,
+        React.createElement('div', { className: 'uh-records-note' }, tr('按时间倒序显示可审计的 Token 调用；选择一行查看 turn / step 和完整 Token 分桶。', 'Token calls are newest first; select a row to inspect its turn / step and token buckets.')),
+        auditRows.length === 0 && !auditLoading ? React.createElement('div', { className: 'uh-empty' }, tr('当前范围没有可审计的 Token 调用', 'No auditable Token calls in this scope')) : React.createElement('div', { className: 'uh-records-scroll' },
+          React.createElement('div', { className: 'uh-record-grid uh-record-header' },
+            React.createElement('div', {}, tr('时间', 'Time')), React.createElement('div', {}, tr('Provider / 模型', 'Provider / Model')), React.createElement('div', { className: 'uh-record-num' }, 'turn / step'), React.createElement('div', { className: 'uh-record-num' }, tr('输入', 'Input')), React.createElement('div', { className: 'uh-record-num' }, tr('缓存命中', 'Cache read')), React.createElement('div', { className: 'uh-record-num' }, tr('缓存写入', 'Cache write')), React.createElement('div', { className: 'uh-record-num' }, tr('输出', 'Output')), React.createElement('div', { className: 'uh-record-num' }, tr('成本', 'Cost')), React.createElement('div', {}, tr('来源', 'Source')),
+          ),
+          auditRows.map((row) => React.createElement('div', { key: row.id, className: 'uh-record-grid uh-record-row' + (selectedAudit && selectedAudit.id === row.id ? ' uh-on' : ''), role: 'button', tabIndex: 0, 'aria-pressed': selectedAudit && selectedAudit.id === row.id, onClick: () => setAuditSelectedId(row.id), onKeyDown: (event) => { if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); setAuditSelectedId(row.id) } } },
+            React.createElement('div', { className: 'uh-record-time' }, auditTime(row, false)),
+            React.createElement('div', { className: 'uh-record-model', title: row.model || '' }, row.model || tr('未知模型', 'Unknown model'), row.requestedModel && row.actualModel && row.requestedModel !== row.actualModel ? React.createElement('small', {}, row.requestedModel + ' → ' + row.actualModel) : null),
+            React.createElement('div', { className: 'uh-record-num' }, (row.turn === null || row.turn === undefined ? '—' : row.turn) + ' / ' + (row.step === null || row.step === undefined ? '—' : row.step)),
+            React.createElement('div', { className: 'uh-record-num' }, fmtCompact(auditToken(row, 'input'))),
+            React.createElement('div', { className: 'uh-record-num' }, fmtCompact(auditToken(row, 'cacheRead'))),
+            React.createElement('div', { className: 'uh-record-num' }, fmtCompact(auditToken(row, 'cacheWrite'))),
+            React.createElement('div', { className: 'uh-record-num' }, fmtCompact(auditToken(row, 'output'))),
+            React.createElement('div', { className: 'uh-record-num uh-cost-num' }, costDisplay(row, language)),
+            React.createElement('div', { className: 'uh-record-source' }, auditSource(row)),
+          )),
+        ),
+        React.createElement('div', { className: 'uh-records-footer' },
+          React.createElement('span', { className: 'uh-note' }, auditRows.length > 0 ? (auditHasMore ? tr('已显示 ' + auditRows.length + ' 条，继续加载可查看更多', auditRows.length + ' shown; load more for additional records') : tr('共显示 ' + auditRows.length + ' 条', auditRows.length + ' records shown')) : ''),
+          auditHasMore ? React.createElement('button', { type: 'button', className: 'uh-refresh', onClick: loadMoreAudit, disabled: auditLoading }, auditLoading ? tr('加载中…', 'Loading…') : tr('加载更多', 'Load more')) : null,
+        ),
+        selectedAudit ? React.createElement('div', { className: 'uh-record-detail' },
+          React.createElement('div', { className: 'uh-record-detail-head' }, React.createElement('strong', {}, tr('选中调用', 'Selected call')), React.createElement('span', { className: 'uh-note' }, auditTime(selectedAudit, true))),
+          React.createElement('div', { className: 'uh-record-detail-meta' },
+            React.createElement('span', {}, (selectedAudit.provider || tr('未知供应商', 'Unknown provider')) + ' / ' + (selectedAudit.actualModel || selectedAudit.requestedModel || selectedAudit.model || tr('未知模型', 'Unknown model'))),
+            React.createElement('span', {}, 'turn ' + (selectedAudit.turn === null || selectedAudit.turn === undefined ? '—' : selectedAudit.turn) + ' · step ' + (selectedAudit.step === null || selectedAudit.step === undefined ? '—' : selectedAudit.step)),
+            React.createElement('span', {}, tr('来源：', 'Source: ') + auditSource(selectedAudit)),
+            React.createElement('span', {}, tr('计价模型：', 'Pricing model: ') + (selectedAudit.cost && selectedAudit.cost.pricingModel ? selectedAudit.cost.pricingModel : tr('未计价', 'unpriced'))),
+          ),
+          React.createElement('div', { className: 'uh-record-token-strip' },
+            ['input', 'cacheRead', 'cacheWrite', 'output', 'reasoning'].map((key) => React.createElement('div', { key }, React.createElement('span', {}, key === 'cacheRead' ? tr('缓存命中', 'Cache read') : key === 'cacheWrite' ? tr('缓存写入', 'Cache write') : key === 'reasoning' ? tr('推理', 'Reasoning') : key === 'input' ? tr('输入', 'Input') : tr('输出', 'Output')), React.createElement('strong', {}, fmtCompact(auditToken(selectedAudit, key))))),
+            React.createElement('div', { className: 'uh-record-token-total' }, React.createElement('span', {}, tr('总处理', 'Total')), React.createElement('strong', {}, fmtCompact(auditTotal(selectedAudit)))),
+            React.createElement('div', { className: 'uh-record-token-total' }, React.createElement('span', {}, tr('成本', 'Cost')), React.createElement('strong', {}, costDisplay(selectedAudit, language))),
+          ),
+        ) : null,
+      )
       const scanning = !scan.done
       const pct = scan.total > 0 ? Math.min(100, Math.round((scan.scanned / scan.total) * 100)) : 40
-      const isEmpty = scan.done && dayRows.length === 0 && stats.totals.turns === 0
+      const isEmpty = scan.done && dayRows.length === 0 && agg.totals.turns === 0 && agg.totals.calls === 0
       const syncCompletedAt = typeof sync.lastCompletedAt === 'number' && sync.lastCompletedAt > 0 ? new Date(sync.lastCompletedAt).toLocaleString(language === 'en' ? 'en-US' : 'zh-CN') : ''
       const lastStatsText = lastStatsAt > 0 ? new Date(lastStatsAt).toLocaleString(language === 'en' ? 'en-US' : 'zh-CN') : ''
       const healthTitle = syncCompletedAt === '' ? undefined : (language === 'en' ? 'Historical scan completed ' + syncCompletedAt : '历史扫描完成于 ' + syncCompletedAt)
@@ -1129,8 +2614,13 @@ window.__ModuleLoader__.load({
               title: tr('管理工作区别名', 'Manage workspace aliases'),
               onClick: () => { if (aliasOpen) setAliasOpen(false); else openAliasPanel() },
             }, React.createElement(LineIcon, { name: 'edit', size: 14 }), tr('工作区别名', 'Workspace Aliases')),
+            React.createElement('button', {
+              className: 'uh-refresh',
+              title: tr('配置模型价格与同步', 'Configure model prices and sync'),
+              onClick: () => { if (pricingOpen) setPricingOpen(false); else openPricingPanel() },
+            }, React.createElement(LineIcon, { name: 'wallet', size: 14 }), tr('成本设置', 'Cost Settings')),
             React.createElement('div', {
-              className: 'uh-language-menu',
+              className: 'uh-language-menu' + (languageMenuOpen ? ' uh-open' : ''),
               ref: languageMenuRef,
               onKeyDown: (event) => { if (event.key === 'Escape') { event.preventDefault(); setLanguageMenuOpen(false) } },
             },
@@ -1175,7 +2665,40 @@ window.__ModuleLoader__.load({
             React.createElement('button', { className: 'uh-refresh uh-icon-button', title: tr('刷新统计数据', 'Refresh usage statistics'), 'aria-label': tr('刷新统计数据', 'Refresh usage statistics'), onClick: onRefresh }, React.createElement(LineIcon, { name: 'refresh', size: 16 })),
           ),
         ),
+        React.createElement('div', { className: 'uh-filter-bar', role: 'group', 'aria-label': tr('统一筛选', 'Unified filters') },
+          React.createElement(UsageFilterMenu, {
+            label: tr('全部工作区', 'All workspaces'),
+            ariaLabel: tr('工作区筛选', 'Workspace filter'),
+            className: 'uh-filter-workspace',
+            icon: 'folder',
+            value: wsFilter || '',
+            options: [{ value: '', label: tr('全部工作区', 'All workspaces') }].concat(rangeWorkspaceOptions.map((w) => ({ value: w.id, label: wsTitle(w.id) }))),
+            onChange: (value) => setWsFilter(value || null),
+          }),
+          React.createElement(UsageFilterMenu, {
+            label: tr('全部供应商', 'All providers'),
+            ariaLabel: tr('供应商筛选', 'Provider filter'),
+            className: 'uh-filter-provider',
+            icon: 'chart',
+            value: providerFilter || '',
+            options: [{ value: '', label: tr('全部供应商', 'All providers') }].concat(providerOptions.map((value) => ({ value, label: value }))),
+            onChange: (value) => chooseProvider(value),
+          }),
+          React.createElement(UsageFilterMenu, {
+            label: tr('全部模型', 'All models'),
+            ariaLabel: tr('模型筛选', 'Model filter'),
+            className: 'uh-filter-model',
+            icon: 'cache',
+            value: modelFilter || '',
+            options: [{ value: '', label: tr('全部模型', 'All models') }].concat(modelOptions.map((value) => ({ value, label: value }))),
+            onChange: (value) => chooseModel(value),
+          }),
+          (wsFilter !== null || providerFilter !== null || modelFilter !== null) ? React.createElement('button', { type: 'button', className: 'uh-filter-clear', onClick: clearFilters }, tr('清除筛选', 'Clear filters')) : null,
+          queryLoading ? React.createElement('span', { className: 'uh-query-note' }, tr('正在更新筛选结果…', 'Updating filtered data…')) : null,
+          queryError !== '' && queryError !== 'stale' ? React.createElement('span', { className: 'uh-query-note', role: 'alert' }, tr('筛选结果加载失败', 'Filtered data unavailable')) : null,
+        ),
         aliasOpen ? aliasPanel : null,
+        pricingPanel,
         customRangePanel,
         scanning ? React.createElement('div', { className: 'uh-progress' },
           React.createElement('span', {}, language === 'en' ? 'Scanning historical sessions: ' + scan.scanned + ' / ' + scan.total + (scan.failed > 0 ? ' (' + scan.failed + ' failed to read)' : '') : '正在统计历史会话 ' + scan.scanned + ' / ' + scan.total + (scan.failed > 0 ? '（' + scan.failed + ' 个读取失败）' : '')),
@@ -1191,27 +2714,40 @@ window.__ModuleLoader__.load({
         ) : React.createElement(React.Fragment, null,
           React.createElement(React.Fragment, null,
           React.createElement('div', { className: 'uh-ios-summary' },
-            React.createElement('div', { className: 'uh-ios-summary-total' },
-              React.createElement('div', { className: 'uh-ios-summary-label' }, React.createElement(LineIcon, { name: 'chart', size: 15 }), tr('总处理 Token', 'Total Tokens Processed')),
-              React.createElement('div', { className: 'uh-ios-summary-value' }, valueWithMagnitude(fmtCompact(animatedTotal), agg.totals.input + agg.totals.output + agg.totals.cacheRead + agg.totals.cacheWrite + agg.totals.reasoning, language)),
-              React.createElement('div', { className: 'uh-ios-summary-caption' }, language === 'en' ? rangeLabel + ' · ' + fmtCompact(animatedTurns) + ' uses · includes cache reads/writes and reasoning' : rangeLabel + ' · ' + fmtCompact(animatedTurns) + ' 次使用 · 含缓存读写与推理'),
+            React.createElement('div', { className: 'uh-ios-summary-hero' },
+              React.createElement('div', { className: 'uh-ios-summary-total' },
+                React.createElement('div', { className: 'uh-ios-summary-total-icon' }, React.createElement(LineIcon, { name: 'chart', size: 24 })),
+                React.createElement('div', { className: 'uh-ios-summary-total-copy' },
+                  React.createElement('div', { className: 'uh-ios-summary-label' }, tr('总处理 Token', 'Total Tokens Processed')),
+                  React.createElement('div', { className: 'uh-ios-summary-value' }, valueWithMagnitude(fmtCompact(animatedTotal), totalTokens, language)),
+                  React.createElement('div', { className: 'uh-ios-summary-caption' }, language === 'en' ? rangeLabel + ' · ' + fmtCompact(animatedTurns) + (scopedCountIsCalls ? ' calls' : ' uses') + ' · includes cache reads/writes and reasoning' : rangeLabel + ' · ' + fmtCompact(animatedTurns) + (scopedCountIsCalls ? ' 次调用' : ' 次使用') + ' · 含缓存读写与推理'),
+                ),
+              ),
+              React.createElement('div', { className: 'uh-ios-summary-meta' },
+                React.createElement('div', { className: 'uh-ios-summary-meta-stat' },
+                  React.createElement('div', { className: 'uh-ios-summary-meta-label' }, React.createElement(LineIcon, { name: 'chart', size: 16 }), tr('总请求数', 'Total Requests')),
+                  React.createElement('div', { className: 'uh-ios-summary-meta-value' }, fmtCount(animatedRequests, language)),
+                ),
+                React.createElement('div', { className: 'uh-ios-summary-meta-stat uh-ios-summary-meta-cost' },
+                  React.createElement('div', { className: 'uh-ios-summary-meta-label' }, React.createElement(LineIcon, { name: 'wallet', size: 16 }), tr('估算成本', 'Estimated Cost')),
+                  React.createElement('div', { className: 'uh-ios-summary-meta-value' }, costValue),
+                  React.createElement('div', { className: 'uh-ios-summary-meta-caption' }, costCoverage),
+                ),
+              ),
             ),
-            React.createElement('div', { className: 'uh-ios-summary-cache' },
-              React.createElement('div', { className: 'uh-ios-summary-label' }, React.createElement(LineIcon, { name: 'cache', size: 15 }), tr('缓存命中', 'Cache Hits')),
-              React.createElement('div', { className: 'uh-ios-summary-value' }, (animatedRate / 10).toFixed(1) + '%'),
-              React.createElement('div', { className: 'uh-ios-summary-caption' }, language === 'en' ? fmtCompact(agg.totals.cacheRead) + ' context tokens reused' : '复用上下文 ' + fmtCompact(agg.totals.cacheRead) + ' Token'),
+            React.createElement('div', { className: 'uh-ios-metrics' },
+              card(tr('DeepSeek 账户余额', 'DeepSeek Account Balance'), balanceValue, balanceSub, 0, 'wallet'),
+              card(scopedCountIsCalls ? tr('匹配调用次数', 'Matching Calls') : tr('总使用次数', 'Total Uses'), fmtCompact(animatedTurns), range === 'all' && !scopedCountIsCalls ? (language === 'en' ? agg.totals.sessions + ' sessions' : agg.totals.sessions + ' 个会话') : (language === 'en' ? (scopedCountIsCalls ? 'Calls in ' : 'Turns in ') + rangeLabel : rangeLabel + (scopedCountIsCalls ? '内的调用数' : '内的回合数')), 1, 'chart'),
+              card(tr('连续使用', 'Current Streak'), language === 'en' ? st.streak + ' days' : st.streak + ' 天', language === 'en' ? 'Longest streak: ' + st.best + ' days' : '最长连续 ' + st.best + ' 天', 2, 'clock'),
+              tokenCard,
+              summaryRateMetric,
             ),
           ),
           React.createElement('div', { className: 'uh-token-semantics' },
             React.createElement(LineIcon, { name: 'cache', size: 16 }),
             tr('总处理 Token = 输入 + 输出 + 缓存读写 + 推理。缓存命中代表复用上下文，不等于新生成 Token 或实际费用。', 'Total tokens processed = input + output + cache reads/writes + reasoning. Cache hits represent reused context; they are not newly generated tokens or actual cost.'),
           ),
-          React.createElement('div', { className: 'uh-cards' },
-            card(tr('DeepSeek 账户余额', 'DeepSeek Account Balance'), balanceValue, balanceSub, 0, 'wallet'),
-            card(tr('总使用次数', 'Total Uses'), fmtCompact(animatedTurns), range === 'all' ? (language === 'en' ? agg.totals.sessions + ' sessions' : agg.totals.sessions + ' 个会话') : (language === 'en' ? 'Turns in ' + rangeLabel : rangeLabel + '内的回合数'), 4, 'chart'),
-            card(tr('连续使用', 'Current Streak'), language === 'en' ? st.streak + ' days' : st.streak + ' 天', language === 'en' ? 'Longest streak: ' + st.best + ' days' : '最长连续 ' + st.best + ' 天', 5, 'clock'),
-            tokenCard,
-          ),
+          trendPanel,
           React.createElement('div', { className: 'uh-panel' },
             React.createElement('div', { className: 'uh-section-title' }, React.createElement(LineIcon, { name: 'calendar', size: 16 }), tr('使用热力图', 'Usage Heatmap')),
             React.createElement('div', { className: 'uh-hm-head' },
@@ -1242,8 +2778,12 @@ window.__ModuleLoader__.load({
             ),
             React.createElement('div', { className: 'uh-note', style: { marginTop: 10 } }, tr('口径：每完成一个回合点亮一次（含子代理会话）；悬停查看按工作区明细，点击工作区可筛选热力图与明细表。日期按本地时区。', 'Methodology: one cell lights up for each completed turn, including subagent sessions. Hover to view workspace details; click a workspace to filter the heatmap and detail tables. English dates and day boundaries use UTC.')),
           ),
+          React.createElement('div', { className: 'uh-detail-tabs', role: 'tablist', 'aria-label': tr('用量明细视图', 'Usage detail views') },
+            [['logs', tr('请求日志', 'Request Logs'), 'list'], ['model', tr('模型统计', 'Model Stats'), 'chart'], ['workspace', tr('工作区统计', 'Workspace Stats'), 'folder']].map((entry) => React.createElement('button', { key: entry[0], type: 'button', role: 'tab', 'aria-selected': detailView === entry[0], className: 'uh-detail-tab' + (detailView === entry[0] ? ' uh-on' : ''), onClick: () => setDetailView(entry[0]) }, React.createElement(LineIcon, { name: entry[2], size: 14 }), entry[1])),
+          ),
+          recordsPanel,
           ),
-          React.createElement('div', { className: 'uh-panel uh-ios-list-panel' },
+          detailView === 'model' ? React.createElement('div', { className: 'uh-panel uh-ios-list-panel' },
             React.createElement('div', { className: 'uh-hm-head' },
               React.createElement('h3', { className: 'uh-tbl-title uh-title-with-icon', style: { margin: 0 } }, React.createElement(LineIcon, { name: 'chart', size: 16 }), language === 'en' ? 'Model Usage Details (' + rangeLabel + ')' : '模型用量明细（' + rangeLabel + '）'),
               React.createElement('div', { className: 'uh-range' },
@@ -1254,49 +2794,77 @@ window.__ModuleLoader__.load({
             ),
             modelRows.length === 0
               ? React.createElement('div', { className: 'uh-empty' }, tr('尚无带模型路由信息的用量记录', 'No usage records with model-routing information yet'))
-              : React.createElement('div', { className: 'uh-tbl-scroll' },
-                React.createElement('div', { className: 'uh-model-hrow uh-hrow' },
-                  React.createElement('div', {}, modelColumnLabel),
-                  React.createElement('div', { className: 'uh-num' }, tr('调用', 'Calls')),
-                  React.createElement('div', { className: 'uh-num' }, tr('输入', 'Input')),
-                  React.createElement('div', { className: 'uh-num' }, tr('缓存命中', 'Cache Hits')),
-                  React.createElement('div', { className: 'uh-num' }, tr('输出', 'Output')),
-                  React.createElement('div', { className: 'uh-num' }, tr('推理', 'Reasoning')),
-                  React.createElement('div', { className: 'uh-num' }, tr('总处理', 'Total Processed')),
-                  React.createElement('div', { className: 'uh-num' }, tr('命中率', 'Hit Rate')),
+              : React.createElement(React.Fragment, null,
+                modelDonutChart,
+                React.createElement('div', { className: 'uh-tbl-scroll' },
+                  React.createElement('div', { className: 'uh-model-hrow uh-hrow' },
+                    React.createElement('div', {}, modelColumnLabel),
+                    React.createElement('div', { className: 'uh-num' }, tr('调用', 'Calls')),
+                    React.createElement('div', { className: 'uh-num' }, tr('输入', 'Input')),
+                    React.createElement('div', { className: 'uh-num' }, tr('缓存命中', 'Cache Hits')),
+                    React.createElement('div', { className: 'uh-num' }, tr('输出', 'Output')),
+                    React.createElement('div', { className: 'uh-num' }, tr('推理', 'Reasoning')),
+                    React.createElement('div', { className: 'uh-num' }, tr('总处理', 'Total Processed')),
+                    React.createElement('div', { className: 'uh-num' }, tr('成本', 'Cost')),
+                    React.createElement('div', { className: 'uh-num' }, tr('命中率', 'Hit Rate')),
+                  ),
+                  modelElements,
                 ),
-                modelElements,
               ),
             React.createElement('div', { className: 'uh-note', style: { marginTop: 10 } }, language === 'en' ? modelViewLabel + ': Combined View distinguishes “Provider / Model”; By Model merges identically named models across providers; By Provider aggregates all of a provider’s models. Historical records without routing information are grouped as “Unknown.”' : modelViewLabel + '：混合查看按“供应商 / 模型”区分；按模型会跨供应商合并同名模型；按供应商则汇总其全部模型。缺少路由信息的历史记录会归为“未知”。'),
-          ),
-          React.createElement('div', { className: 'uh-panel uh-ios-list-panel' },
+          ) : null,
+          detailView === 'workspace' ? React.createElement('div', { className: 'uh-panel uh-ios-list-panel' },
             React.createElement('h3', { className: 'uh-tbl-title uh-title-with-icon' }, React.createElement(LineIcon, { name: 'folder', size: 16 }), language === 'en' ? 'Workspace Details (' + rangeLabel + ')' : '工作区明细（' + rangeLabel + '）'),
             rows.length === 0
               ? React.createElement('div', { className: 'uh-empty' }, tr('该时间范围内没有使用记录', 'No usage records in this time range'))
-              : React.createElement('div', { className: 'uh-tbl-scroll' },
-                React.createElement('div', { className: 'uh-hrow' },
-                  React.createElement('div', {}, tr('工作区', 'Workspace')),
-                  React.createElement('div', { className: 'uh-num' }, tr('回合', 'Turns')),
-                  React.createElement('div', { className: 'uh-num' }, tr('输入', 'Input')),
-                  React.createElement('div', { className: 'uh-num' }, tr('缓存命中', 'Cache Hits')),
-                  React.createElement('div', { className: 'uh-num' }, tr('输出', 'Output')),
-                  React.createElement('div', { className: 'uh-num' }, tr('推理', 'Reasoning')),
-                  React.createElement('div', { className: 'uh-num' }, tr('总处理', 'Total Processed')),
-                  React.createElement('div', { className: 'uh-num' }, tr('命中率', 'Hit Rate')),
-                  React.createElement('div', { className: 'uh-num' }, tr('占比', 'Share')),
+              : React.createElement(React.Fragment, null,
+                workspaceDonutChart,
+                React.createElement('div', { className: 'uh-tbl-scroll' },
+                  React.createElement('div', { className: 'uh-hrow' },
+                    React.createElement('div', {}, tr('工作区', 'Workspace')),
+                    React.createElement('div', { className: 'uh-num' }, tr('回合', 'Turns')),
+                    React.createElement('div', { className: 'uh-num' }, tr('输入', 'Input')),
+                    React.createElement('div', { className: 'uh-num' }, tr('缓存命中', 'Cache Hits')),
+                    React.createElement('div', { className: 'uh-num' }, tr('输出', 'Output')),
+                    React.createElement('div', { className: 'uh-num' }, tr('推理', 'Reasoning')),
+                    React.createElement('div', { className: 'uh-num' }, tr('总处理', 'Total Processed')),
+                    React.createElement('div', { className: 'uh-num' }, tr('成本', 'Cost')),
+                    React.createElement('div', { className: 'uh-num' }, tr('命中率', 'Hit Rate')),
+                    React.createElement('div', { className: 'uh-num' }, tr('占比', 'Share')),
+                  ),
+                  rowElements,
                 ),
-                rowElements,
               ),
-          ),
+          ) : null,
         ),
         tip,
       )
     }
 
+    class UsageDashboardBoundary extends React.Component {
+      constructor(props) { super(props); this.state = { error: null, resetKey: props.resetKey } }
+      static getDerivedStateFromError(error) { return { error } }
+      componentDidUpdate(prevProps) {
+        if (prevProps.resetKey !== this.props.resetKey && this.state.error !== null) this.setState({ error: null, resetKey: this.props.resetKey })
+      }
+      render() {
+        if (this.state.error !== null) return this.props.fallback(this.state.error)
+        return this.props.children
+      }
+    }
     function UsageSidebarEntry(props) {
       const [open, setOpen] = React.useState(false)
+      const [dashboardResetKey, setDashboardResetKey] = React.useState(0)
       const [language, setLanguage] = React.useState(storedLanguage)
       const tr = (zh, en) => language === 'en' ? en : zh
+      const dashboardFallback = () => React.createElement('div', { className: 'uh-boundary-fallback', role: 'alert' },
+        React.createElement('div', { className: 'uh-boundary-title' }, tr('用量统计暂时无法显示', 'Usage statistics is temporarily unavailable')),
+        React.createElement('div', { className: 'uh-boundary-note' }, tr('当前范围加载失败，入口仍然可用。', 'The selected range failed to render; the sidebar entry is still available.')),
+        React.createElement('div', { className: 'uh-actions' },
+          React.createElement('button', { type: 'button', className: 'uh-refresh', onClick: () => setDashboardResetKey((value) => value + 1) }, React.createElement(LineIcon, { name: 'refresh', size: 14 }), tr('重试', 'Retry')),
+          React.createElement('button', { type: 'button', className: 'uh-refresh', onClick: () => setOpen(false) }, React.createElement(LineIcon, { name: 'close', size: 14 }), tr('关闭', 'Close')),
+        ),
+      )
       const changeLanguage = (next) => {
         const value = next === 'en' ? 'en' : 'zh'
         setLanguage(value)
@@ -1317,7 +2885,7 @@ window.__ModuleLoader__.load({
             React.createElement('div', { className: 'uh-side-dialog-head' },
               React.createElement('button', { className: 'uh-refresh uh-close-button', type: 'button', title: tr('关闭用量统计', 'Close Usage Statistics'), 'aria-label': tr('关闭用量统计', 'Close Usage Statistics'), onClick: () => setOpen(false) }, React.createElement(LineIcon, { name: 'close', size: 18 })),
             ),
-            React.createElement(UsagePage, { timerCtx: props.timerCtx, language, onLanguageChange: changeLanguage }),
+            React.createElement(UsageDashboardBoundary, { resetKey: dashboardResetKey, fallback: dashboardFallback }, React.createElement(UsagePage, { timerCtx: props.timerCtx, language, onLanguageChange: changeLanguage })),
           ),
         ) : null,
       )