lemo-meter

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    // 问卷占着横条时让给它；安全页上关了横条就原样交给里层
    if (e.props.hasSurvey || !(await read($, bandOn))) return next(e)
    const below = await next(e)
    const band = await drawBand($, e)
    if (below.type === 'engine') return band
    // 引擎原样不许放进带 width 的 Box（会拒绝整棵树），所以外面这层不给 width
    const { Box } = $.ui.resolve(e)
    return (
      <Box flexDirection="column" gap={1}>
        {band}
        {below}
      </Box>
    )
  })

async function drawBand($: EngineInterface, e: RenderInput<'AbovePrompt'>): Promise<RenderElement> {
  const lk = await look($)
  const S = STR[lk.lang]
  const u = await read($, usage)
  const n = await seqOf($)
  const br = await read($, branch)
  const now = await $.clock.now()
  const list = liveBadges((await $.state.get(BadgesRef)).value, now)
  const shown = (await $.state.get(NoticeRef)).value ?? null
  // 读了 frame 就每秒重画一次。有倒计时的胶囊时要读，剩余时间跟着走；
  // 终端有像素小画时也读，小画一直冒泡。
  // 桌面没有倒计时就不读，免得 SVG 跟着一直重画、闪（平时让 SVG 自己的气泡动画跑）
  const ticking = list.some(b => typeof b.endsAt === 'number' && b.endsAt > now)
  const animate = e.surface === 'terminal' && lk.st.sprite !== null && lk.st.sprite.frames.length > 1
  const tick = ticking || animate ? ((await $.state.get(FrameRef)).value ?? 0) : 0
  const pills: Pill[] = list.map(b => ({ text: badgeLabel(b, now, lk.lang), tone: b.tone }))
  const brandName = word(lk, 'lemo-core.title', 'lemo-mod')

  if (e.surface === 'desktop') {
    const { Box, Svg } = $.ui.resolve(e)
    const data = {
      ctx: u.ctx,
      quota: u.quota,
      usd: u.usd,
      label: fill(word(lk, 'lemo-meter.trial', S.trial), { no: exp(n) }),
      pills: br === null ? pills : [...pills, { text: `⎇ ${br}`, tone: 'grey' as const }],
      notice: shown === null ? null : { text: shown.text, tone: shown.tone },
      brand: brandName,
      brandSub: word(lk, 'lemo-meter.brandSub', S.brandSub),
      words: { ctx: S.band.ctx, quota: S.band.quota, cost: S.band.cost, pending: word(lk, 'lemo-meter.pending', S.band.pending) },
    }
    const alt = `${brandName}: ${S.band.ctx} ${pct(u.ctx)}, ${S.band.quota} ${pct(u.quota)}`
    const guess = Math.round(e.props.bodyColumns * CELL_PX)
    // 不给 width，外面包一层竖排 Box，竖排容器会把它横向拉满（桌面上单独放只有 280 像素）。
    // 不加 isInteractive：那样 SVG 装在一个沙盒框里，每重画一次整个框重新加载、闪一下；画成图片，内容没变就不闪
    return (
      <Box flexDirection="column" width="100%">
        <Svg source={bandSvg(data, { width: '100%', guess }, lk.c, lk.st.motif, lk.st.sprite)} alt={alt} height={BAND_H} />
      </Box>
    )
  }

  // 终端（以及别的界面）：两行刻度尺 + 一行底行；提示出现时顶替底行
  const { Box, Text } = $.ui.resolve(e)
  const ink = bareInk(lk, e.surface)
  const ctxLabel = word(lk, 'lemo-meter.tbandCtx', S.tband.ctx)
  const quotaLabel = word(lk, 'lemo-meter.tbandQuota', S.tband.quota)
  const cols = Math.max(width(ctxLabel), width(quotaLabel))
  const scale = (key: string, label: string, v: number | null) => {
    const r = ruler(v)
    return (
      <Box key={key} flexDirection="row">
        <Text color={lk.c.pencil}>{padTo(label, cols) + ' '}</Text>
        <Text color={lk.c.grid}>{r.before}</Text>
        <Text color={lk.c.ink}>●</Text>
        <Text color={lk.c.grid}>{r.after}</Text>
        <Text {...ink}>{' ' + (v === null ? word(lk, 'lemo-meter.pending', S.band.pending) : pct(v))}</Text>
      </Box>
    )
  }
  const sample = word(lk, 'lemo-meter.tbandSample', S.tband.sample)
  // 底行放不下时截掉，不折行：折出来的行会把刻度尺往上挤，分支名也会断成「⎇」和「main」两行
  let foot: RenderChildren
  if (shown !== null) {
    foot = <Text {...termTone(lk, shown.tone)} bold wrap="truncate">{` ● ${shown.text} `}</Text>
  } else {
    foot = (
      <Text color={lk.c.pencil} wrap="truncate">
        {`${sample} ${exp(n)}${u.usd === null ? '' : ` · ${money(u.usd)}`}`}
        {pills.map((p, i) => (
          <Text key={`badge-${i}`} color={lk.c.pencil}>
            {' · '}
            <Text {...termTone(lk, p.tone)}>{p.tone === 'accent' ? ` ${p.text} ` : p.text}</Text>
          </Text>
        ))}
        {br === null ? '' : ` · ⎇ ${br}`}
      </Text>
    )
  }
  // 地方不够时一级一级往下减：先不画小画，刻度尺也放不下（面板停在旁边、对话区很窄，或者面板在输入框上方、
  // 只给一两行）时改成一行文字。不然刻度尺会被挤成竖排，引擎再把多出来的行收成「↓ 3 more」。
  // 引擎在横条第一行的右端画收起按钮「[-]」（3 格）：第一行右边留出 FOLD 格，数值不被它盖住
  const room = e.props.bodyColumns
  const rows = e.props.maxRows
  const pending = word(lk, 'lemo-meter.pending', S.band.pending)
  const rowW = cols + 1 + width(ruler(0).before) + 1 + width(ruler(0).after) + 1 + Math.max(width(pending), 4)
  if (room < rowW + FOLD || rows < 3) {
    const val = (v: number | null) => (v === null ? pending : pct(v))
    const brief = (
      <Box key="meter-brief" paddingRight={FOLD}>
        <Text {...ink} wrap="truncate">{`${ctxLabel} ${val(u.ctx)} · ${quotaLabel} ${val(u.quota)}`}</Text>
      </Box>
    )
    // 只给一行时：有提示就只写提示，没有就只写用量
    if (rows < 2) return shown !== null ? <Box paddingRight={FOLD}>{foot}</Box> : brief
    return (
      <Box flexDirection="column">
        {brief}
        {foot}
      </Box>
    )
  }
  const meter = (
    <Box flexDirection="column">
      {scale('meter-ctx', ctxLabel, u.ctx)}
      {scale('meter-quota', quotaLabel, u.quota)}
      {foot}
    </Box>
  )
  const sprite = lk.st.sprite
  if (e.surface === 'terminal' && sprite !== null && sprite.frames.length > 0) {
    // 风格的像素小画：每秒换一帧。放不下（宽度或行数不够）就不画
    const frame = sprite.frames[tick % sprite.frames.length] ?? sprite.frames[0] ?? []
    const cells = spriteCells(sprite.palette, frame)
    if (room >= cells.columns + 2 + rowW + FOLD && rows >= cells.rows) {
      const { Raster } = $.ui.resolve(e)
      return (
        <Box flexDirection="row" gap={2} alignItems="center">
          <Raster key="meter-sprite" {...cells} />
          {meter}
        </Box>
      )
    }
  }
  return meter
}