@mzzsfy/dsh-usage-dash 0.5.0 → 0.7.0

package/README.md

@@ -6,12 +6,12 @@
 
 设置页「使用统计」区块:
 
-- 三粒度视图:天(7/30/90 天/自定义日期段)、小时(24 小时/3 天/7 天/15 天)、分钟(3 小时/24 小时/3 天/7 天,10 分钟桶粒度),后两者为滚动窗口;各视图时间范围统一 4 挡,时/分选择上限与数据保留期一致
+- 三粒度视图,全部支持自定义时间范围:天(7/30/90 天/自定义日期段)、小时(24 小时/3 天/7 天/15 天/自定义时刻段)、分钟(3 小时/24 小时/3 天/7 天/自定义时刻段,10 分钟桶粒度),预设挡为滚动窗口;自定义时刻段为起止 datetime 双输入,两端归一到桶边界(小时取所在整点、分钟起点对齐 10 分钟且终点保留原分钟,均闭区间),跨度上限与数据保留期一致(小时 15 天、分钟 7 天,超限自动钳起点),首次切到自定义挡预填最近 24 小时,时/分两视图共享同一对自定义输入;已知限制:自定义输入残缺(任一端为空)时面板不发请求且图表静默空白,与天视图行为一致,交互反馈留待后续增强
 - 汇总卡六张:Tokens 用量(服务商总口径)、会话数量、请求数量、最常用模型、平均缓存命中率、活跃天数(恒按天口径,不随视图切换);配置定价规则后 Tokens 卡头部行右侧显示估算费用
 - 活动热力图:GitHub 风格周列×星期行,26 周窗口,五档色阶,悬停明细;仅按天视图展示
 - 缓存命中率曲线:日粒度命中率 + 右侧副轴,并叠加平均生成速度曲线与首 token 延迟曲线(各自单独颜色,读数走悬停;仅含配对数据的槽参与,整图无数据不绘制),悬停显示当前时段命中率、平均生成速度、首 token 延迟与 token 明细(配置定价规则后附当前时段估算费用行,受「费用显示」开关;三粒度趋势图通用)
-- 模型 donut 与列表:按 token 前 5 模型占比环形图(中心为总量),列表含命中率与占比;每模型右侧两行:第一行占比%·token 数,第二行估算费用·TTFT·生成速度(语言中立,点分隔;费用需配置定价规则,TTFT/速度无配对数据不显示),悬停联动
-- 三粒度堆叠柱状趋势图(数据量大时裁最旧并提示);图例可点击切换显隐:点击单选(仅显示该项,左轴刻度按可见项归一)/再点恢复全部,Ctrl+点击多选,隐藏最后一项无效
+- 模型 donut 与列表:按 token 前 5 模型占比环形图(中心为总量);每行名称两行展示(厂商/模型名,其余折叠为「其他」),右侧三排:第一排 token 数·占比,第二排输入输出占比构成(缓存/输入/输出 三段各占该模型 token 总量,缓存=读+写,三段合计 100%,无四桶数据不显示),第三排估算费用·TTFT·生成速度(费用需配置定价规则,TTFT/速度无配对数据不显示),悬停明细含输入/缓存读/缓存写/输出四桶 token 拆分并联动
+- 三粒度堆叠柱状趋势图(数据量大时裁最旧并提示);图例可点击切换显隐:点击单选(仅显示该项,左轴刻度按可见项归一)/再点恢复全部,Ctrl+点击多选,隐藏最后一项无效;悬停明细按当前时段数据展示,零用量模型不显示,全零时段不显示悬浮框
 - 回扫状态行默认隐藏:首次启用自动回扫历史会话,运行中显示进度(常显);右上角为折叠箭头与刷新图标,折叠层内展开扫描异常日志块(逐条:时间/类型/明细,计数即明细条数,上限 200 条超限丢最旧,重建时清空)与「重建」入口(二次确认 3 秒后清库重扫),采集错误常显;工具栏分主区与右侧操作区,窄宽度时挡位组在主区内换行
 - 会话底栏接管:替换官方信息行为增强版,偏好卡三个开关默认全开——精确缓存命中率(两位小数)、会话 Token 明细(总/命中缓存/未命中缓存/输出)、费用显示(底栏费用项、趋势 tooltip 费用行与回合费用芯片);三开关全关时与官方逐字节一致
 - 回合费用芯片:经官方 `conversation.chat.assistant-actions` 槽注入动作行(复制与分支图标之间,官方赞/踩与上下文跳转同排),每轮对话结束后显示该轮估算费用(悬停 title 带 token 摘要与估算口径;显隐节奏随官方动作行——最新一轮常显,历史轮悬停显现;受「费用显示」开关;官方用量芯片弹窗已有 token 明细,芯片只承载费用)。旧宿主无该插槽时告警禁用
@@ -19,7 +19,7 @@
 - 双语:跟随宿主语言设置(设置 → 通用 → 语言)即时切换 en/zh
 - 数据 API 守卫:POST 同源校验 + JSON content-type(与 dsh-usage-panel 同构),局域网远程访问可用
 
-口径:token 总量 = 未缓存输入 + 输出 + 缓存读 + 缓存写;命中率 = 缓存读 / (缓存读 + 未缓存输入 + 缓存写);桶按 host 本地时区。平均生成速度 = decode 配对分子 ÷ 解码时长,两者均取官方吞吐口径(与官方 session-stats 投影同构):解码时长为该步首 token 时刻(首个产出 token 的 attempt 流,回落 message 自带流)到 usage 汇报时刻,不含首 token 前的排队与提示处理等待;首 token 延迟(TTFT)= 首 token 时刻 − `step/start`(起点不随 `llm/retry-started` 重置,即含失败尝试时间)。首 token 时刻在 chunk token 样本上不可得,由后续 usage 报告(message 为主)补发零桶 timing 增量行承载(decodeTokens 与时长同源配对,不重复计 token);存量旧行(时长为旧全时长口径)速度分子回落输出 token,聚合随新数据自然收敛,重建(重扫)可全量按新口径重建。保留策略:天桶永久,小时桶固定 15 天,分钟桶默认 7 天且上限 7 天(设置项 `minuteRetentionDays`,0 = 禁用分钟桶)。
+口径:token 总量 = 未缓存输入 + 输出 + 缓存读 + 缓存写;命中率 = 缓存读 / (缓存读 + 未缓存输入 + 缓存写);桶按 host 本地时区。聚合响应 `models` 数组每模型带 `inputTokens`/`outputTokens`/`cacheReadTokens`/`cacheWriteTokens` 四桶拆分(与定价四桶同口径),模型列表据此展示输入输出对比。平均生成速度 = decode 配对分子 ÷ 解码时长,两者均取官方吞吐口径(与官方 session-stats 投影同构):解码时长为该步首 token 时刻(首个产出 token 的 attempt 流,回落 message 自带流)到 usage 汇报时刻,不含首 token 前的排队与提示处理等待;首 token 延迟(TTFT)= 首 token 时刻 − `step/start`(起点不随 `llm/retry-started` 重置,即含失败尝试时间)。首 token 时刻在 chunk token 样本上不可得,由后续 usage 报告(message 为主)补发零桶 timing 增量行承载(decodeTokens 与时长同源配对,不重复计 token);存量旧行(时长为旧全时长口径)速度分子回落输出 token,聚合随新数据自然收敛,重建(重扫)可全量按新口径重建。保留策略:天桶永久,小时桶固定 15 天,分钟桶默认 7 天且上限 7 天(设置项 `minuteRetentionDays`,0 = 禁用分钟桶)。
 
 写入模型:样本先同步合并进内存 pending,按 2 秒周期批量落盘(单布局存储域每次持久化写都全量重发布 unit 文档,合并把每样本 3 次写降为每脏行 1 次,回扫万级样本写放大降约 99%);查询前自动 flush 保证读己之写;flush 失败的行留 pending 下轮重试并经异常日志可观测,崩溃丢失窗口 = flush 周期,统计可由会话重扫重建。
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mzzsfy/dsh-usage-dash",
   "description": "用量统计面板:天/小时/分钟三粒度 token 与请求统计,26 周活跃热力图,会话底栏信息接管与官方动作行回合费用芯片,多条件分时段定价规则与费用估算;复刻自 github.com/HaoyueQin/dsh-usage-statistics-panel,感谢原作者 HaoyueQin",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "type": "module",
   "main": "src/index.js",
   "exports": {

package/src/client.js

@@ -77,9 +77,76 @@ function resolveMinuteRange(presetId, now = new Date()) {
   return { from, to: minuteBucket(now) }
 }
 
+// 自定义挡 id 与时/分自定义跨度上限(与数据保留期一致:小时桶固定 15 天,分钟桶上限 7 天)
+const CUSTOM_RANGE_ID = 'custom'
+const HOUR_CUSTOM_MAX_HOURS = 15 * 24
+const MINUTE_CUSTOM_MAX_MINUTES = 7 * 24 * 60
+// 选中自定义挡且无历史输入时的预填窗口
+const POINT_CUSTOM_DEFAULT_HOURS = 24
+
+const DATETIME_INPUT_PATTERN = /^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2})(?::(\d{2}))?$/
+
+// datetime-local 输入值解析为本地时刻,形态或日历非法(13 月/2 月 30 日/回卷)返回 null
+function parseLocalDateTime(value) {
+  if (typeof value !== 'string') return null
+  const match = DATETIME_INPUT_PATTERN.exec(value)
+  if (!match) return null
+  const [year, month, day, hour, minute, second] = match.slice(1)
+  const parts = [Number(year), Number(month) - 1, Number(day), Number(hour), Number(minute), Number(second ?? 0)]
+  const date = new Date(...parts)
+  const components = [date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(), date.getMinutes()]
+  // 数字分量构造对超界值静默回卷,逐分量回读比对拦截
+  const legal = parts.slice(0, 5).every((part, index) => components[index] === part)
+  return legal ? date : null
+}
+
+const formatDateTimeInput = (date) => `${formatDate(date)}T${pad(date.getHours())}:${pad(date.getMinutes())}`
+
+// 小时自定义范围:两端归一到所在小时桶(闭区间),跨度超保留期钳起点
+function resolveHourCustomRange(fromValue, toValue) {
+  const from = parseLocalDateTime(fromValue)
+  const to = parseLocalDateTime(toValue)
+  if (!from || !to || from > to) return null
+  const clampedFrom = new Date(Math.max(from.getTime(), to.getTime() - HOUR_CUSTOM_MAX_HOURS * MS_PER_HOUR))
+  return { from: hourBucket(clampedFrom), to: hourBucket(to) }
+}
+
+// 分钟自定义范围:from 对齐 10 分钟桶边界,to 保持原始分钟(闭区间上界),跨度超保留期钳起点
+function resolveMinuteCustomRange(fromValue, toValue) {
+  const from = parseLocalDateTime(fromValue)
+  const to = parseLocalDateTime(toValue)
+  if (!from || !to || from > to) return null
+  const clampedFrom = Math.max(
+    minuteBucketFloor(from.getTime()),
+    minuteBucketFloor(to.getTime()) - MINUTE_CUSTOM_MAX_MINUTES * MS_PER_MINUTE,
+  )
+  return { from: minuteBucket(new Date(clampedFrom)), to: minuteBucket(to) }
+}
+
+// 时/分查询请求与缓存键:预设挡键为挡位 id,自定义挡键含归一后桶串(范围变化即换键防误命中)
+function resolvePointQuery(view, preset, customFrom, customTo, now = new Date()) {
+  if (view === 'hour') {
+    if (preset === CUSTOM_RANGE_ID) {
+      const range = resolveHourCustomRange(customFrom, customTo)
+      return range ? { request: range, key: `${CUSTOM_RANGE_ID}:${range.from}:${range.to}` } : null
+    }
+    return { request: resolveHourRange(preset, now), key: preset }
+  }
+  if (view === 'minute') {
+    if (preset === CUSTOM_RANGE_ID) {
+      const range = resolveMinuteCustomRange(customFrom, customTo)
+      return range ? { request: range, key: `${CUSTOM_RANGE_ID}:${range.from}:${range.to}` } : null
+    }
+    return { request: resolveMinuteRange(preset, now), key: preset }
+  }
+  return null
+}
+
 function maxSlotsFor(view, presetId) {
-  if (view === 'hour') return hourValueOf(presetId) + 1
-  if (view === 'minute') return minuteValueOf(presetId) / MINUTE_BUCKET_SPAN_MINUTES + 1
+  if (view === 'hour') return (presetId === CUSTOM_RANGE_ID ? HOUR_CUSTOM_MAX_HOURS : hourValueOf(presetId)) + 1
+  if (view === 'minute') {
+    return (presetId === CUSTOM_RANGE_ID ? MINUTE_CUSTOM_MAX_MINUTES : minuteValueOf(presetId)) / MINUTE_BUCKET_SPAN_MINUTES + 1
+  }
   return DAY_MAX_SLOTS
 }
 
@@ -113,8 +180,8 @@ const MESSAGES_ZH = {
   'rangePreset.30': '30 天',
   'rangePreset.90': '90 天',
   rangeCustom: '自定义',
-  from: '开始日期',
-  to: '结束日期',
+  from: '开始',
+  to: '结束',
   refresh: '刷新',
   loading: '正在扫描历史会话。安装插件后首次会全量回扫,数据量大时耗时较久,期间尽量减少操作以免服务变卡',
   tokens: 'Tokens 用量',
@@ -137,6 +204,9 @@ const MESSAGES_ZH = {
   dailyTrend: '按天 Token 趋势',
   trendLimited: '仅显示最近 {n} 天',
   modelUsage: '模型用量',
+  modelCache: '缓存',
+  modelInput: '输入',
+  modelOutput: '输出',
   other: '其他',
   total: '总用量',
   percent: '占比',
@@ -277,6 +347,9 @@ const MESSAGES_EN = {
   dailyTrend: 'Daily token trend',
   trendLimited: 'Showing only the last {n} days',
   modelUsage: 'Model usage',
+  modelCache: 'Cache',
+  modelInput: 'Input',
+  modelOutput: 'Output',
   other: 'Other',
   total: 'Total',
   percent: 'Share',
@@ -494,10 +567,12 @@ const topWithOther = (ranked) => {
   const models = ranked.slice(0, GROUP_TOP_COUNT)
   if (ranked.length > GROUP_TOP_COUNT) {
     const rest = ranked.slice(GROUP_TOP_COUNT)
+    // 四桶与费用同源条件挂载:输入条目无该字段(旧形数据/未配价)时哨兵同样不带,防零值假数据
     models.push({
       model: OTHER_MODEL,
       tokens: rest.reduce((sum, item) => sum + item.tokens, 0),
-      cost: rest.reduce((sum, item) => sum + (item.cost ?? 0), 0),
+      ...(rest.some(hasTokenBuckets) ? { ...bucketSumsOf(rest) } : {}),
+      ...(rest.some((item) => item.cost !== undefined) ? { cost: rest.reduce((sum, item) => sum + (item.cost ?? 0), 0) } : {}),
       items: rest,
     })
   }
@@ -753,7 +828,7 @@ function ttftTipText(ttft, t) {
   return ttft === undefined ? TOOLTIP_MISSING : formatDuration(ttft, t)
 }
 
-// 语言中立短时长:60 秒内一位小数秒,以上整秒折分秒(模型列表第二行用,禁本地化)
+// 语言中立短时长:60 秒内一位小数秒,以上整秒折分秒(模型列表 meta 行用,禁本地化)
 function formatDurationShort(ms) {
   const seconds = ms / MS_PER_SECOND
   if (seconds < DURATION_MINUTE_SECONDS) return `${Math.round(seconds * NUMBER_ONE_DECIMAL) / NUMBER_ONE_DECIMAL}s`
@@ -767,6 +842,39 @@ function modelTtftText(ttft) {
   return `TTFT ${formatDurationShort(ttft)}`
 }
 
+// 模型条目四桶齐备判定:生产端同源恒齐,旧形数据缺桶即视为不可渲染
+const hasTokenBuckets = (item) => TOKEN_BUCKET_KEYS.every((key) => typeof item?.[key] === 'number')
+
+// 逐桶求和:按共享桶键列表产出四桶聚合形态
+const bucketSumsOf = (items) => Object.fromEntries(TOKEN_BUCKET_KEYS.map((key) => [
+  key,
+  items.reduce((sum, item) => sum + (item[key] ?? 0), 0),
+]))
+
+// 模型输入输出占比构成:缓存/输入/输出 三段各占该模型 token 总量百分比(缓存=读+写,
+// 三段合计恒 100%);四桶缺失(旧数据)或零总量为空串
+function modelIoPercentText(item, t) {
+  if (!hasTokenBuckets(item) || !(item.tokens > 0)) return ''
+  const share = (value) => formatPercent((value / item.tokens) * PERCENT_SCALE)
+  return `${t('modelCache')} ${share(item.cacheReadTokens + item.cacheWriteTokens)} · ${t('modelInput')} ${share(item.inputTokens)} · ${t('modelOutput')} ${share(item.outputTokens)}`
+}
+
+// 趋势 tooltip 内容门:全零槽(无任何用量)不渲染 tooltip
+const hasTipContent = (hoverSlot) => Boolean(hoverSlot) && hoverSlot.total > 0
+
+// 趋势 tooltip 模型行数据:主行 = 可见且当前时段有用量的模型;OTHER 子行 = OTHER 可见
+// 且当前时段有用量的其余模型明细,按 tokens 降序由本函数保证
+const tipModelEntries = (hoverSlot, visibleSet) => {
+  if (!hasTipContent(hoverSlot)) return { main: [], other: [] }
+  const main = Object.entries(hoverSlot.byModel)
+    .filter(([model, tokens]) => visibleSet.has(model) && tokens > 0)
+    .map(([model, tokens]) => ({ model, tokens }))
+  const other = visibleSet.has(OTHER_MODEL)
+    ? Object.entries(hoverSlot.otherByModel ?? {}).filter(([, tokens]) => tokens > 0).sort((a, b) => b[1] - a[1])
+    : []
+  return { main, other }
+}
+
 // 热力图:窗口固定 26 周,与所选范围无关
 const HEAT_WEEKS = 26
 const HEAT_ROW_COUNT = 7
@@ -824,29 +932,33 @@ function heatLevel(tokens, max) {
   return tokens === 0 ? 0 : 1 + Math.floor((tokens / max) * HEAT_LEVEL_BANDS)
 }
 
-// ChartTip 定位:锚定区装得下贴内顶(趋势图悬停区即绘图区,悬浮窗留在图表内),装不下上翻、再下翻、末了钳边界顶
+// ChartTip 定位:进入命中区时锚定指针,先放指针右下,右侧或下方越界翻对侧,仍越界钳进边界
 const TIP_GAP_PX = 8
 const TIP_MARGIN_PX = 8
 
+// 悬停锚点:指针事件取指针坐标;焦点事件无坐标,回退目标矩形中心保键盘可访问
+const pointerAt = (event) => {
+  if (event.clientX != null && event.clientY != null) return { x: event.clientX, y: event.clientY }
+  const rect = event.currentTarget.getBoundingClientRect()
+  return { x: (rect.left + rect.right) / 2, y: (rect.top + rect.bottom) / 2 }
+}
+
 // 回合费用芯片与前置官方芯片(结束时钟)的间距
 const TURN_COST_GAP_PX = 8
 
 function tipPlace(anchor, tip, bounds, gap = TIP_GAP_PX, margin = TIP_MARGIN_PX) {
   if (!tip || tip.width <= 0 || tip.height <= 0) return null
-  if (!anchor || (anchor.left === 0 && anchor.top === 0 && anchor.right === 0 && anchor.bottom === 0)) return null
+  if (!anchor || !Number.isFinite(anchor.x) || !Number.isFinite(anchor.y)) return null
   const minX = bounds.left + margin
   const minY = bounds.top + margin
-  const maxX = bounds.right - margin
-  const maxY = bounds.bottom - margin
-  const left = Math.max(minX, Math.min((anchor.left + anchor.right) / 2 - tip.width / 2, maxX - tip.width))
-  const inside = anchor.top + gap
-  const above = anchor.top - gap - tip.height
-  const below = anchor.bottom + gap
-  let top
-  if (inside + tip.height <= anchor.bottom) top = inside
-  else if (above >= minY) top = above
-  else if (below + tip.height <= maxY) top = below
-  else top = minY
+  const maxLeft = bounds.right - margin - tip.width
+  const maxTop = bounds.bottom - margin - tip.height
+  const left = anchor.x + gap + tip.width <= bounds.right - margin
+    ? anchor.x + gap
+    : Math.max(minX, Math.min(anchor.x - gap - tip.width, maxLeft))
+  const top = anchor.y + gap + tip.height <= bounds.bottom - margin
+    ? anchor.y + gap
+    : Math.max(minY, Math.min(anchor.y - gap - tip.height, maxTop))
   return { left, top }
 }
 
@@ -1245,6 +1357,9 @@ const BUCKET_PRICE_KEYS = [
   { tokens: 'cacheWriteTokens', price: 'cacheWrite' },
 ]
 
+// 展示侧四桶键单一来源:模型分组求和与齐备判定共用,禁止各处手工复制键名
+const TOKEN_BUCKET_KEYS = BUCKET_PRICE_KEYS.map(({ tokens }) => tokens)
+
 const toFiniteNumber = (value) => (Number.isFinite(value) ? value : 0)
 
 // 费用 = Σ(桶 token × 桶单价) / 每百万;缺桶或非法值按 0,原始浮点不圆整(展示层负责)
@@ -1312,15 +1427,20 @@ const TURN_COST_CHIP_ORDER = 20 + 10
 // messageId 反查:节点表为 chat 节点仓库(values() 可枚举,Map/仓库两态兼容);
 // 回合级用量优先取回合位置数据(location.turn.data.get('turn-tail')).tokenUsage(官方 tokenUsage 聚合,
 // 分页窗口缺 turn/start 时缺席),回退视图节点 data.closing.usage(末步用量采样,输入侧已含缓存,计费口径同源)
-// 索引缓存:每份节点表快照只全量扫描一次建 messageId→turn-tail 索引(WeakMap 随快照释放),
-// 长会话流式期间多芯片各自全量扫描是 O(消息数×节点数) 放大,索引后单快照 O(节点数)
+// 索引缓存:键取节点集数组身份 —— 官方 chat store 实例身份跨回合恒定,values() 返回的缓存数组
+// 随节点集更替换新引用:未变时全芯片共享一次扫描,新增回合节点经 values() 换引用自动失效重建
+// (按 store 实例为键会让新节点永远查不到旧索引,表现为回合费用芯片刷新后才出现);
+// Map/迭代器形态(测试兼容)仍按容器为键
 const TURN_USAGE_INDEX_CACHE = new WeakMap()
 
 function turnUsageIndexOf(nodes) {
-  let index = TURN_USAGE_INDEX_CACHE.get(nodes)
+  const source = nodes && typeof nodes.values === 'function' ? nodes.values() : nodes
+  const snapshotForm = Array.isArray(source)
+  const cacheKey = snapshotForm ? source : nodes
+  let index = TURN_USAGE_INDEX_CACHE.get(cacheKey)
   if (index !== undefined) return index
   index = new Map()
-  const list = nodes && typeof nodes.values === 'function' ? [...nodes.values()] : nodes
+  const list = snapshotForm ? source : typeof source?.[Symbol.iterator] === 'function' ? [...source] : source
   if (Array.isArray(list)) {
     for (const node of list) {
       try {
@@ -1331,13 +1451,13 @@ function turnUsageIndexOf(nodes) {
       } catch { /* 单节点形状残缺跳过 */ }
     }
   }
-  TURN_USAGE_INDEX_CACHE.set(nodes, index)
+  TURN_USAGE_INDEX_CACHE.set(cacheKey, index)
   return index
 }
 
 function turnTokenUsageOfMessage(nodes, messageId) {
   // 非对象(含 null/undefined)直接 null:WeakMap 键要求对象,展开校验收进索引构建,
-  // 每快照只物化一次节点序列
+  // 每份节点集只物化一次节点序列
   if (nodes === null || typeof nodes !== 'object') return null
   const node = turnUsageIndexOf(nodes).get(messageId)
   if (node === undefined) return null
@@ -1863,11 +1983,11 @@ body[data-ds-dark-theme] .ud-panel{--ud-chart-1:color-mix(in srgb,#0576ff 65%,wh
 .ud-heat-l5{fill:var(--dsw-heat-5);background:var(--dsw-heat-5)}
 .ud-heat-legend{display:inline-flex;align-items:center;gap:${HEAT_GAP}px;margin-left:auto;flex:none;font-size:11px;color:var(--dsw-alias-label-secondary)}
 .ud-heat-legend i{display:inline-block;width:${HEAT_BASE}px;height:${HEAT_BASE}px;border-radius:${HEAT_RX}px;flex:none}
-.ud-tip{position:fixed;z-index:${TIP_Z_INDEX};visibility:hidden;pointer-events:none;white-space:nowrap;border:1px solid var(--dsw-alias-border-l2);border-radius:8px;background:var(--dsw-alias-bg-overlay);box-shadow:0 4px 12px var(--dsw-alias-bg-mask-2);color:var(--dsw-alias-label-primary);font-size:13px;padding:8px 10px}
-.ud-tip-title{font-weight:600}
-.ud-tip-row{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--dsw-alias-label-secondary)}
-.ud-tip-row--sub{padding-left:12px;color:var(--dsw-alias-label-tertiary);font-size:11px}
-.ud-tip-breakdown{display:flex;flex-direction:column;gap:2px;border-top:1px solid var(--dsw-alias-border-l1);margin-top:6px;padding-top:6px}
+.ud-tip{position:fixed;z-index:${TIP_Z_INDEX};visibility:hidden;pointer-events:none;white-space:nowrap;border:1px solid var(--dsw-alias-border-l2);border-radius:10px;background:var(--dsw-alias-bg-overlay);box-shadow:0 1px 2px var(--dsw-alias-bg-mask-2),0 6px 20px var(--dsw-alias-bg-mask-2);color:var(--dsw-alias-label-primary);font-size:13px;padding:10px 12px;font-variant-numeric:tabular-nums}
+.ud-tip-title{font-weight:600;margin-bottom:6px}
+.ud-tip-row{display:flex;align-items:center;gap:8px;font-size:12px;line-height:1.6;color:var(--dsw-alias-label-secondary)}
+.ud-tip-row--sub{padding-left:14px;color:var(--dsw-alias-label-tertiary);font-size:11px}
+.ud-tip-breakdown{display:flex;flex-direction:column;gap:3px;border-top:1px solid var(--dsw-alias-border-l1);margin-top:8px;padding-top:8px}
 .ud-axis-rate{fill:var(--dsw-alias-label-tertiary);font-size:11px;font-variant-numeric:tabular-nums}
 .ud-bar{transform-box:fill-box;transform-origin:center}
 .ud-bar-hit{fill:transparent;pointer-events:all}
@@ -1887,17 +2007,17 @@ body[data-ds-dark-theme] .ud-panel{--ud-chart-1:color-mix(in srgb,#0576ff 65%,wh
 .ud-donut-center{font-size:18px;font-weight:600;fill:var(--dsw-alias-label-primary)}
 .ud-donut-label{font-size:11px;fill:var(--dsw-alias-label-tertiary)}
 .ud-models{flex:1 1 260px;min-width:240px;display:flex;flex-direction:column}
-.ud-model-row{display:flex;align-items:center;gap:8px;min-height:44px;padding:2px 4px;border-bottom:1px solid var(--dsw-alias-border-l1)}
+.ud-model-row{display:flex;align-items:center;gap:8px;min-height:48px;padding:2px 4px;border-bottom:1px solid var(--dsw-alias-border-l1)}
 .ud-model-row--expand{cursor:pointer}
 .ud-model-row--expand:hover{background:var(--dsw-alias-interactive-bg-hover)}
 .ud-model-swatch{width:10px;height:10px;border-radius:2px;flex:none}
 .ud-model-id{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
-.ud-model-name{font-size:13px;color:var(--dsw-alias-label-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
-.ud-model-provider{font-size:11px;color:var(--dsw-alias-label-tertiary)}
+.ud-model-name{font-size:14px;font-weight:500;color:var(--dsw-alias-label-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.ud-model-provider{font-size:12px;color:var(--dsw-alias-label-tertiary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .ud-model-values{display:flex;flex-direction:column;align-items:flex-end;gap:1px;font-variant-numeric:tabular-nums;flex:none}
 .ud-model-tokens{font-size:12px;color:var(--dsw-alias-label-secondary)}
-.ud-model-pct{font-size:11px;color:var(--dsw-alias-label-tertiary);white-space:nowrap}
-.ud-model-cost{font-size:11px;color:var(--dsw-alias-label-tertiary);font-variant-numeric:tabular-nums}
+.ud-model-io{font-size:11px;color:var(--dsw-alias-label-secondary);white-space:nowrap}
+.ud-model-meta{font-size:11px;color:var(--dsw-alias-label-tertiary);white-space:nowrap}
 .ud-model-toggle{border:none;background:transparent;color:var(--dsw-alias-label-tertiary);cursor:pointer;padding:2px 6px;font-size:14px;line-height:1;transition:transform .2s ease}
 .ud-model-toggle[aria-expanded="true"]{transform:rotate(90deg)}
 .ud-model-toggle:focus-visible{outline:1px solid var(--dsw-alias-state-business-primary);border-radius:4px}
@@ -2105,11 +2225,9 @@ body[data-ds-dark-theme] .ud-panel{--ud-chart-1:color-mix(in srgb,#0576ff 65%,wh
       const hoverRatePoint = showRate && hoverSlot ? ratePoints.find((point) => point.day === hoverSlot.day) : null
       const hoverSpeedPoint = hoverSlot ? speedPoints.find((point) => point.day === hoverSlot.day) : null
       const hoverTtftPoint = hoverSlot ? ttftPoints.find((point) => point.day === hoverSlot.day) : null
-      const pick = (index) => (event) => setHover({ index, anchor: event.currentTarget })
+      const pick = (index) => (event) => setHover({ index, anchor: pointerAt(event) })
       const clear = () => setHover(null)
-      const otherEntries = hoverSlot
-        ? Object.entries(hoverSlot.otherByModel ?? {}).sort((a, b) => b[1] - a[1])
-        : []
+      const tipEntries = hasTipContent(hoverSlot) ? tipModelEntries(hoverSlot, visibleSet) : null
       return h('div', { className: 'ud-section' },
         h('div', { className: 'ud-section-head' },
           h('span', { className: 'ud-section-title' }, title),
@@ -2178,15 +2296,15 @@ body[data-ds-dark-theme] .ud-panel{--ud-chart-1:color-mix(in srgb,#0576ff 65%,wh
           onItem: (key, ctrl) => setVisibleKeys(legendToggle(visibleKeys, key, ctrl)),
         }),
         h(ChartTip, { anchor: hover ? hover.anchor : null, panelRef },
-          hoverSlot
+          tipEntries
             ? [
                 h('div', { key: 'title', className: 'ud-tip-title' }, slotLabelFor ? slotLabelFor(hoverSlot.day) : hoverSlot.day),
                 h('div', { key: 'total', className: 'ud-tip-row' }, `${t('total')}: ${formatTokens(hoverSlot.total)}`),
-                ...legendModels.filter((item) => visibleSet.has(item.model)).map((item) => h('div', { key: `m-${item.model}`, className: 'ud-tip-row' },
-                  h('i', { className: 'ud-legend-swatch', style: { background: colorFor(item.model) } }),
-                  `${item.model === OTHER_MODEL ? t('other') : item.model}: ${formatTokens(hoverSlot.byModel[item.model] ?? 0)}`)),
-                ...(visibleSet.has(OTHER_MODEL) ? otherEntries.map(([model, tokens]) => h('div', { key: `om-${model}`, className: 'ud-tip-row ud-tip-row--sub' },
-                  `${model}: ${formatTokens(tokens)}`)) : []),
+                ...tipEntries.main.map((row) => h('div', { key: `m-${row.model}`, className: 'ud-tip-row' },
+                  h('i', { className: 'ud-legend-swatch', style: { background: colorFor(row.model) } }),
+                  `${row.model === OTHER_MODEL ? t('other') : row.model}: ${formatTokens(row.tokens)}`)),
+                ...tipEntries.other.map(([model, tokens]) => h('div', { key: `om-${model}`, className: 'ud-tip-row ud-tip-row--sub' },
+                  `${model}: ${formatTokens(tokens)}`)),
                 showRate ? h('div', { key: 'rate', className: 'ud-tip-row' }, `${t('cacheHitRate')}: ${cacheRateText(hoverSlot.cacheHit, hoverSlot.cacheMiss)}`) : null,
                 showSpeed ? h('div', { key: 'speed', className: 'ud-tip-row' }, `${t('avgSpeed')}: ${speedTipText(hoverSlot.speed)}`) : null,
                 showTtft ? h('div', { key: 'ttft', className: 'ud-tip-row' }, `${t('ttftLegend')}: ${ttftTipText(hoverSlot.ttft, t)}`) : null,
@@ -2209,7 +2327,7 @@ body[data-ds-dark-theme] .ud-panel{--ud-chart-1:color-mix(in srgb,#0576ff 65%,wh
           ? panel.getBoundingClientRect()
           : { left: 0, top: 0, right: window.innerWidth, bottom: window.innerHeight }
         const next = tipPlace(
-          anchor ? anchor.getBoundingClientRect() : null,
+          anchor,
           { width: tip.offsetWidth, height: tip.offsetHeight },
           bounds,
         )
@@ -2230,15 +2348,17 @@ body[data-ds-dark-theme] .ud-panel{--ud-chart-1:color-mix(in srgb,#0576ff 65%,wh
           observer.disconnect()
         }
       }, [place])
+      // 空内容(无子节点或空数组)不显示悬浮盒,防零尺寸守卫下出现纯背景空壳
+      const show = Boolean(anchor && children != null && (!Array.isArray(children) || children.length > 0))
       const element = h('div', {
         className: 'ud-tip',
         ref: tipRef,
         style: {
           left: pos ? pos.left : 0,
           top: pos ? pos.top : 0,
-          visibility: pos && anchor ? 'visible' : 'hidden',
+          visibility: show && pos ? 'visible' : 'hidden',
         },
-      }, anchor ? children : null)
+      }, show ? children : null)
       return createPortal && typeof document !== 'undefined' && document.body
         ? createPortal(element, document.body)
         : element
@@ -2261,7 +2381,7 @@ body[data-ds-dark-theme] .ud-panel{--ud-chart-1:color-mix(in srgb,#0576ff 65%,wh
       const display = geom ? heatDisplayDays(days, geom.cols) : null
       const grid = display ? heatGrid(display, geom.size) : null
       const peak = display ? Math.max(1, ...display.map((slot) => slot.tokens)) : 1
-      const pick = (cell) => (event) => setHover({ ...cell, anchor: event.currentTarget })
+      const pick = (cell) => (event) => setHover({ ...cell, anchor: pointerAt(event) })
       const clear = () => setHover(null)
       return h('div', { className: 'ud-section' },
         h('div', { className: 'ud-section-head' },
@@ -2310,7 +2430,7 @@ body[data-ds-dark-theme] .ud-panel{--ud-chart-1:color-mix(in srgb,#0576ff 65%,wh
       const displayName = (model) => (model === OTHER_MODEL ? t('other') : model)
       const pick = (model) => (event) => {
         setHover(model)
-        setTip({ model, anchor: event.currentTarget })
+        setTip({ model, anchor: pointerAt(event) })
       }
       const clear = () => {
         setHover(null)
@@ -2351,6 +2471,7 @@ body[data-ds-dark-theme] .ud-panel{--ud-chart-1:color-mix(in srgb,#0576ff 65%,wh
               const isOther = item.model === OTHER_MODEL
               const speedText = modelSpeedText(item.speed)
               const ttftText = modelTtftText(item.ttft)
+              const ioText = modelIoPercentText(item, t)
               const metaParts = [
                 item.cost !== undefined ? `≈ ${formatCost(item.cost, costCurrency)}` : null,
                 ttftText,
@@ -2365,8 +2486,12 @@ body[data-ds-dark-theme] .ud-panel{--ud-chart-1:color-mix(in srgb,#0576ff 65%,wh
                 },
                   h('i', { className: 'ud-model-swatch', style: { background: colorFor(item.model) } }),
                   h('div', { className: 'ud-model-id' },
-                    h('span', { className: 'ud-model-name' }, displayName(item.model)),
-                    isOther ? null : h('span', { className: 'ud-model-provider' }, providerOf(item.model))),
+                    isOther
+                      ? h('span', { className: 'ud-model-name' }, displayName(item.model))
+                      : [
+                          h('span', { className: 'ud-model-provider' }, providerOf(item.model)),
+                          h('span', { className: 'ud-model-name' }, modelNameOf(item.model)),
+                        ]),
                   isOther
                     ? h('button', {
                         className: 'ud-model-toggle', 'aria-expanded': expandedOther, 'aria-label': t('other'),
@@ -2379,7 +2504,8 @@ body[data-ds-dark-theme] .ud-panel{--ud-chart-1:color-mix(in srgb,#0576ff 65%,wh
                   h('div', { className: 'ud-model-values' },
                     h('span', { className: 'ud-model-tokens' },
                       `${formatTokens(item.tokens)} (${formatPercent((item.tokens / total) * PERCENT_SCALE)})`),
-                    h('span', { className: 'ud-model-pct' }, metaParts.join(' · ')))),
+                    ioText ? h('span', { className: 'ud-model-io' }, ioText) : null,
+                    h('span', { className: 'ud-model-meta' }, metaParts.join(' · ')))),
                 isOther
                   ? h('div', { className: cx('ud-model-other', expandedOther && 'ud-model-other--open') },
                       h('div', { className: 'ud-model-other-list' },
@@ -2398,6 +2524,14 @@ body[data-ds-dark-theme] .ud-panel{--ud-chart-1:color-mix(in srgb,#0576ff 65%,wh
                 h('div', { key: 'title', className: 'ud-tip-title' }, displayName(tipSegment.model)),
                 h('div', { key: 'tokens', className: 'ud-tip-row' }, `${t('total')}: ${formatTokens(tipSegment.tokens)}`),
                 h('div', { key: 'pct', className: 'ud-tip-row' }, `${t('percent')}: ${formatPercent(tipSegment.percent)}`),
+                hasTokenBuckets(tipSegment)
+                  ? [
+                      h('div', { key: 'input', className: 'ud-tip-row' }, `${t('priceInput')}: ${formatTokens(tipSegment.inputTokens)}`),
+                      h('div', { key: 'cacheRead', className: 'ud-tip-row' }, `${t('priceCacheRead')}: ${formatTokens(tipSegment.cacheReadTokens)}`),
+                      h('div', { key: 'cacheWrite', className: 'ud-tip-row' }, `${t('priceCacheWrite')}: ${formatTokens(tipSegment.cacheWriteTokens)}`),
+                      h('div', { key: 'output', className: 'ud-tip-row' }, `${t('priceOutput')}: ${formatTokens(tipSegment.outputTokens)}`),
+                    ]
+                  : null,
                 tipSegment.model === OTHER_MODEL && (tipSegment.items ?? []).length > 0
                   ? h('div', { key: 'breakdown', className: 'ud-tip-breakdown' },
                       tipSegment.items.map((detail) => h('div', { key: detail.model, className: 'ud-tip-row ud-tip-row--sub' },
@@ -2952,6 +3086,9 @@ body[data-ds-dark-theme] .ud-panel{--ud-chart-1:color-mix(in srgb,#0576ff 65%,wh
       const [error, setError] = useState('')
       const [hourPreset, setHourPreset] = useState(DEFAULT_HOUR_PRESET)
       const [minutePreset, setMinutePreset] = useState(DEFAULT_MINUTE_PRESET)
+      // 自定义挡 datetime 输入,时/分视图共享一对,各视图按桶粒度分别归一
+      const [pointCustomFrom, setPointCustomFrom] = useState('')
+      const [pointCustomTo, setPointCustomTo] = useState('')
       const [pointStats, setPointStats] = useState(null)
       const [pointStatus, setPointStatus] = useState('idle')
       const [fetchTick, setFetchTick] = useState(0)
@@ -3018,17 +3155,16 @@ body[data-ds-dark-theme] .ud-panel{--ud-chart-1:color-mix(in srgb,#0576ff 65%,wh
         load()
       }, [load])
 
-      const presetId = view === 'hour' ? hourPreset : view === 'minute' ? minutePreset : null
+      const rawPreset = view === 'hour' ? hourPreset : view === 'minute' ? minutePreset : null
+      // 自定义挡输入不完整时 query 为 null:不发请求,已取数据留存缓存,输入恢复即按键命中
+      const activeQuery = view === 'day' ? null : resolvePointQuery(view, rawPreset, pointCustomFrom, pointCustomTo)
 
       useEffect(() => {
-        if (view === 'day') return
-        if (pointStatsMatches(pointStats, view, presetId)) return
-        const request = view === 'hour'
-          ? resolveHourRange(presetId, new Date())
-          : resolveMinuteRange(presetId, new Date())
+        if (!activeQuery) return
+        if (pointStatsMatches(pointStats, view, activeQuery.key)) return
         const generation = ++pointGenerationRef.current
         setPointStatus('loading')
-        requestPost(view === 'hour' ? ENDPOINTS.hours : ENDPOINTS.minutes, request).then((result) => {
+        requestPost(view === 'hour' ? ENDPOINTS.hours : ENDPOINTS.minutes, activeQuery.request).then((result) => {
           if (pointGenerationRef.current !== generation) return
           if (!result.ok) {
             setPointStatus('error')
@@ -3037,9 +3173,9 @@ body[data-ds-dark-theme] .ud-panel{--ud-chart-1:color-mix(in srgb,#0576ff 65%,wh
           }
           setError('')
           setPointStatus('ok')
-          setPointStats({ view, preset: presetId, value: result.value })
+          setPointStats({ view, preset: activeQuery.key, value: result.value })
         })
-      }, [view, presetId, fetchTick])
+      }, [view, rawPreset, pointCustomFrom, pointCustomTo, fetchTick])
 
       const refreshPoints = useCallback(() => {
         setPointStats(null)
@@ -3060,6 +3196,16 @@ body[data-ds-dark-theme] .ud-panel{--ud-chart-1:color-mix(in srgb,#0576ff 65%,wh
         if (refreshTimerRef.current) clearTimeout(refreshTimerRef.current)
       }, [])
 
+      // 切换时/分挡位;切到自定义挡且无历史输入时预填最近窗口,即点即用
+      const selectPointPreset = (id) => {
+        if (id === CUSTOM_RANGE_ID && !pointCustomFrom && !pointCustomTo) {
+          setPointCustomFrom(formatDateTimeInput(new Date(Date.now() - POINT_CUSTOM_DEFAULT_HOURS * MS_PER_HOUR)))
+          setPointCustomTo(formatDateTimeInput(new Date()))
+        }
+        if (view === 'hour') setHourPreset(id)
+        else setMinutePreset(id)
+      }
+
       const refresh = () => {
         setError('')
         if (view === 'day') load()
@@ -3105,7 +3251,7 @@ body[data-ds-dark-theme] .ud-panel{--ud-chart-1:color-mix(in srgb,#0576ff 65%,wh
       }, [])
 
       const grouped = useMemo(() => (stats ? groupStats(stats) : null), [stats])
-      const pointView = pointStatsMatches(pointStats, view, presetId) ? pointStats.value : null
+      const pointView = activeQuery && pointStatsMatches(pointStats, view, activeQuery.key) ? pointStats.value : null
       const pointGrouped = useMemo(() => (pointView ? groupPointSlots(pointView.daily) : null), [pointView])
       const colorFor = useMemo(() => colorForModel(stats ? stats.models : []), [stats])
 
@@ -3113,7 +3259,7 @@ body[data-ds-dark-theme] .ud-panel{--ud-chart-1:color-mix(in srgb,#0576ff 65%,wh
       const trendSource = pointActive
         ? (pointGrouped ? { slots: pointGrouped.daily, models: pointGrouped.models, value: pointView } : null)
         : (grouped ? { slots: grouped.daily, models: grouped.models, value: stats } : null)
-      const maxSlots = pointActive ? maxSlotsFor(view, presetId) : DAY_MAX_SLOTS
+      const maxSlots = pointActive ? maxSlotsFor(view, rawPreset) : DAY_MAX_SLOTS
       const trimmedSlots = trendSource ? trimSlots(trendSource.slots, maxSlots) : null
       const notes = []
       if (trendSource && trendSource.slots.length > trimmedSlots.length) notes.push(trendLimitedText(t, view, trimmedSlots.length))
@@ -3134,13 +3280,33 @@ body[data-ds-dark-theme] .ud-panel{--ud-chart-1:color-mix(in srgb,#0576ff 65%,wh
                 onClick: () => setView(tab.id),
               }, viewLabel(t, tab.id)))),
             pointActive
-              ? h('div', { className: 'ud-group', role: 'group', 'aria-label': t('range') },
-                  (view === 'hour' ? HOUR_PRESETS : MINUTE_PRESETS).map((id) => h('button', {
-                    key: id,
-                    className: cx('ud-seg-item', presetId === id && 'ud-seg-item--on'),
-                    'aria-pressed': presetId === id,
-                    onClick: () => (view === 'hour' ? setHourPreset(id) : setMinutePreset(id)),
-                  }, presetLabel(t, view, id))))
+              ? h(React.Fragment, null,
+                  h('div', { className: 'ud-group', role: 'group', 'aria-label': t('range') },
+                    (view === 'hour' ? HOUR_PRESETS : MINUTE_PRESETS).map((id) => h('button', {
+                      key: id,
+                      className: cx('ud-seg-item', rawPreset === id && 'ud-seg-item--on'),
+                      'aria-pressed': rawPreset === id,
+                      onClick: () => selectPointPreset(id),
+                    }, presetLabel(t, view, id))),
+                    h('button', {
+                      className: cx('ud-seg-item', rawPreset === CUSTOM_RANGE_ID && 'ud-seg-item--on'),
+                      'aria-pressed': rawPreset === CUSTOM_RANGE_ID,
+                      onClick: () => selectPointPreset(CUSTOM_RANGE_ID),
+                    }, t('rangeCustom'))),
+                  rawPreset === CUSTOM_RANGE_ID
+                    ? h('div', { className: 'ud-custom-range' },
+                        h('input', {
+                          type: 'datetime-local', className: 'ud-date-input', 'aria-label': t('from'),
+                          value: pointCustomFrom, max: pointCustomTo || undefined,
+                          onChange: (event) => setPointCustomFrom(event.target.value),
+                        }),
+                        h('span', { className: 'ud-custom-sep' }, '–'),
+                        h('input', {
+                          type: 'datetime-local', className: 'ud-date-input', 'aria-label': t('to'),
+                          value: pointCustomTo, min: pointCustomFrom || undefined, max: formatDateTimeInput(new Date()),
+                          onChange: (event) => setPointCustomTo(event.target.value),
+                        }))
+                    : null)
               : h(React.Fragment, null,
                   h('div', { className: 'ud-group', role: 'group', 'aria-label': t('range') },
                     DAY_PRESETS.map((id) => h('button', {