usage-bar

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    if (e.props.hasSurvey) return next(e)
    await read($, nowA) // 订阅：定时刷新会触发重绘

    const now = await $.clock.now()
    const limits = await read($, limitsA)
    const cacheAt = await read($, cacheAtA)
    cacheAtMem = cacheAt
    const data: Data = {
      cacheV: cacheView(cacheAt, await read($, cacheHitA), await read($, ctxA), now),
      h5: windowView(limits.find(l => l.kind === 'five_hour'), now),
      d7: windowView(limits.find(l => l.kind === 'seven_day'), now),
      up: await read($, upA),
      down: await read($, downA),
      cache: CONFIG.cacheMode === 'context' ? ((await read($, ctxA)) ?? 0) : await read($, cacheA),
      cost: await read($, costA),
    }
    const partial = await read($, partialA)
    const { Box, Text, Svg } = $.ui.resolve(e) as any

    // 终端没有 Svg：退回纯文字
    if (e.surface === 'terminal') {
      const f = (v: View | null) => (v ? `${Math.round(v.pct)}% ↻${fmtTime(v.remaining)}` : '--')
      const cv = data.cacheV
      const cacheText = !CONFIG.cacheTimer
        ? ''
        : ' │ ' +
          (cv.state === 'none'
            ? '缓存 --'
            : cv.state === 'cold'
              ? `cold · 下条消息约重新缓存 ${cv.ctx === null ? '--' : fmtTokens(cv.ctx)} tokens`
              : `缓存 ${fmtCacheLeft(cv.left)} · ${cv.hit === null ? '--' : Math.round(cv.hit * 100) + '%'}`)
      return (
        <Text dimColor>
          {`5h ${f(data.h5)} │ 7d ${f(data.d7)} │ ↑${fmtTokens(data.up)} ↓${fmtTokens(data.down)} cache ${fmtTokens(data.cache)} │ ${
            data.cost === null ? '--' : '$' + data.cost.toFixed(2)
          }${cacheText}${partial ? ' (自加载起)' : ''}`}
        </Text>
      )
    }

    const cols = e.props.bodyColumns
    const { source, w, vbH, shown } = buildSvg(data, partial, cols * CONFIG.cellPx)
    // 不传 width/height：容器按 viewBox 等比缩放到可用宽度
    return (
      <Box>
        <Svg source={source} alt="用量状态条" />
      </Box>
    )
  })