usage-hud

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    if (layout === 'off' || e.props.hasSurvey) return next(e)
    if (e.surface === 'desktop') {
      const els: any = $.ui.resolve(e)
      return buildDesktop($, els, e.props.bodyColumns ?? 100, !!e.props.isWorking)
    }
    if (e.surface !== 'terminal' || position !== 'above') return next(e)
    const els: any = $.ui.resolve(e)
    const { Box, Text } = els
    const view = await buildView($, els, e.surface, e.props.bodyColumns ?? 100, !!e.props.isWorking)
    return (
      <Box flexDirection="column">
        <Text key="gap"> </Text>
        {view}
      </Box>
    )
  })

async function buildDesktop($: any, els: any, cols: number, working: boolean) {
  const { Box, Svg } = els
  const s = await snapshot($, working)
  const reset = (l?: Limit) => (l?.resetsAt ? durShort(Date.parse(l.resetsAt) - Date.now()) + ' 后重置' : '')
  const ag = agentsNow ? `  +${agentsNow} 个子代理` : ''
  // 客户端只显示到分钟: 每秒变一次会让图片每秒重换一次
  const ran = s.now - turnStartedAt
  const status: DashData['status'] = working
    ? { text: toolLabel(currentTool) + (ran >= 60_000 ? '  ' + durShort(ran) : '') + ag, tone: 'work' }
    : agentsNow
      ? { text: agentsNow + ' 个子代理在跑', tone: 'agents' }
      : lastTurnMs
        ? { text: '✓ 上一轮 ' + dur(lastTurnMs) + '，' + lastTurnTools + ' 次工具', tone: 'idle' }
        : { text: '✓ 待命', tone: 'idle' }
  const top = Object.entries(toolCounts)
    .sort((a, b) => b[1] - a[1])
    .slice(0, 3)
    .map(([t, n]) => shortTool(t) + ' ' + n)
    .join('  ')
  const counted = tokState === 'ready' || tokState === 'failed'
  const data: DashData = {
    model: prettyModel(modelId),
    effort,
    project: project || '--',
    branch: branch ? branch + (dirty ? ' *' + dirty : '') : '',
    session: dur(s.now - (s.u.startedAt ?? s.now)),
    cost: s.u.cost ? '$' + s.u.cost.usd.toFixed(2) : '',
    ctx: { pct: s.pct, extra: tok(s.ctxTokens) + ' / ' + tok(s.ctxWindow) },
    five: { pct: s.five?.percentUsed, extra: reset(s.five) },
    week: { pct: s.week?.percentUsed, extra: reset(s.week) },
    status,
    tools: top,
    tokenTotal: counted ? big(tokTotal(s.tk)) : '统计中..',
    tokenOutput: counted ? big(s.tk.output) : '',
  }
  const sc = s.scene
  // 可用宽度: 横栏格数 x 每格像素, 减去螃蟹和间距; 太窄就只放一行用量条
  lastDesktopCols = cols
  const crabScale = 5
  const crabW = 16 * crabScale
  // 估计的可用宽度; 故意多画 5% + 20 像素, 让客户端总是把它等比缩到正好贴满卡片, 右边缘和卡片对齐
  const est = Math.round((cols || 100) * DESKTOP_PX_PER_COL) - crabW - 15
  const dashW = Math.max(340, Math.min(1040, Math.round(est * 1.05) + 20))
  const compact = layout === 'compact' || est < 380
  // 螃蟹直接画在卡片上 (没有底板/边框); 当普通图片显示, SMIL 动画照样会动, 必须给明确宽高
  const crab = crabSvg(
    {
      mode: sc.celebrating ? 'celebrate' : working ? 'work' : sc.sleeping ? 'sleep' : 'idle',
      kind: sc.kind,
      heat: lastPct >= 95 ? 'crit' : lastPct >= 80 ? 'hot' : 'ok',
      agents: Math.min(3, agentsNow),
    },
    compact ? 3 : crabScale,
  )
  const crabSize = compact ? { w: 48, h: 21 } : { w: crabW, h: 7 * crabScale }
  const dash = dashSvg(data, { compact, width: dashW })
  return (
    <Box key="hud-d-row" flexDirection="row" alignItems="center" columnGap={2}>
      <Box key="hud-d-crab" flexShrink={0}>
        <Svg key="crab-svg" source={crab} alt="用量面板的小螃蟹" width={crabSize.w} height={crabSize.h} />
      </Box>
      {/* 估计的宽度偏大时, 这个容器允许仪表盘等比缩小, 不会被截断 */}
      <Box key="hud-d-dash" flexGrow={1} flexShrink={1} minWidth={0} overflow="hidden">
        <Svg key="dash-svg" source={dash} alt={`上下文 ${data.ctx.pct ?? '--'}%，5小时 ${data.five.pct ?? '--'}%，本周 ${data.week.pct ?? '--'}%`} />
      </Box>
    </Box>
  )
}