meter

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    if (e.props.hasSurvey || !figures) return next(e)
    const now = await $.clock.now()
    const memory = figures.context.percent
    const plan = limitOf(figures.rateLimits, 'five_hour', now)
    const week = limitOf(figures.rateLimits, 'seven_day', now)
    if (memory === undefined && !plan && !week) return next(e)
    const { Box, Text, Button } = $.ui.resolve(e)

    if ((memory ?? 0) < MEMORY_WARN && isCalm(plan) && isCalm(week)) {
      const figure = (label: string, l: Limit | null) => (l ? [`${label} ${l.isPast ? 'reset?' : `${l.percent}%`}`] : [])
      const line = [...(memory === undefined ? [] : [`memory ${memory}%`]), ...figure('plan', plan), ...figure('week', week)]
      return Box({ flexDirection: 'column', children: [Text({ dimColor: true, children: line.join(' · ') }), await next(e)] })
    }

    const cells = Math.min(BAR_CELLS, Math.max(MIN_BAR_CELLS, e.props.bodyColumns - 50))
    const dim = (text: string) => Text({ dimColor: true, children: text })
    const label = (name: string) => dim(name.padEnd(7))
    const row = (name: string, percent: number, hints: RenderElement[]) => {
      const color = levelColor(percent)
      const [fill, track] = bar(percent, cells)
      return Box({
        flexDirection: 'row',
        children: [
          label(name),
          ...(fill ? [Text({ color, children: fill })] : []),
          ...(track ? [dim(track)] : []),
          Text({ bold: true, color, children: ` ${percent}%`.padStart(5) }),
          ...hints.flatMap(h => [Text({ children: '  ' }), h]),
        ],
      })
    }
    const stale = (name: string) => Box({ flexDirection: 'row', children: [label(name), dim('reset?')] })

    const rows: RenderElement[] = []
    if (memory !== undefined) {
      const hints: RenderElement[] = []
      if (memory >= 80) {
        hints.push(Text({ color: 'red', children: '⚠ clear soon' }))
        if (!e.props.isWorking) hints.push(Button({ key: 'compact', label: 'Compact', onPress: () => compact($) }))
      } else if (memory >= MEMORY_WARN) {
        hints.push(dim('clear when you switch tasks'))
      }
      rows.push(row('memory', memory, hints))
    }
    if (plan?.isPast) rows.push(stale('plan'))
    else if (plan) {
      const hints: RenderElement[] = []
      if (plan.percent >= 90) hints.push(Text({ color: 'red', children: '⚠ near limit' }))
      if (plan.resetAt !== null) hints.push(dim(`resets ${until(plan.resetAt, now)}`))
      rows.push(row('plan', plan.percent, hints))
    }
    if (week?.isPast) rows.push(stale('week'))
    else if (week) {
      const isSoon = week.resetAt !== null && week.percent >= LIMIT_WARN
      rows.push(row('week', week.percent, isSoon ? [dim(`resets ${resetDay(week.resetAt!, now)}`)] : []))
    }

    return Box({ flexDirection: 'column', children: [...rows, await next(e)] })
  })

  on('ui.render', { component: 'Pane' }, async ($, e, next) => {
    if (e.requestId !== 'tokens') return next(e)
    const { Box, Text, Button } = $.ui.resolve(e)
    const now = await $.clock.now()
    days ??= await load($, now)

    const recent = days.slice(0, CHART_DAYS)
    const daily = recent.map(d => total(d?.repos ?? {})).reverse()
    const chart = recent.some(d => d)
      ? barRows(daily, CHART_ROWS).map(l => Text({ color: 'cyan', children: l }))
      : [Text({ dimColor: true, children: `No tokens recorded in the last ${CHART_DAYS} days.` })]

    const picked = merge(days.slice(0, range))
    const section = (title: string, buckets: Record<string, Bucket>) => {
      const more = Object.keys(buckets).length - TOP
      return [
        Text({ bold: true, children: title }),
        ...top(buckets, TOP).map(([name, b]) =>
          Text({ wrap: 'truncate-end', children: `  ${short(b.tokens).padStart(6)} tok  ${name}` }),
        ),
        ...(more > 0 ? [Text({ dimColor: true, children: `  +${more} more` })] : []),
      ]
    }
    const hit = cachePercent(cache)

    return Box({
      flexDirection: 'column',
      children: [
        ...(ledgerFailure ? [Text({ color: 'red', children: `ledger write failed: ${ledgerFailure}` })] : []),
        Text({ bold: true, children: `Tokens per day, last ${CHART_DAYS} days (max ${short(Math.max(...daily))})` }),
        Text({ dimColor: true, children: hit === null ? 'cache hits: no requests yet' : `cache hits ${hit}% (higher is better)` }),
        ...chart,
        Text({ dimColor: true, children: `${dayOf(now, CHART_DAYS - 1).slice(5)} … ${dayOf(now).slice(5)}` }),
        Box({
          flexDirection: 'row',
          gap: 1,
          children: RANGES.map(n =>
            Button({
              key: `${n}d`,
              label: `${n}d`,
              ...(n === range && { variant: 'primary' as const }),
              onPress: () => {
                range = n
                $.ui.invalidate('ui.render')
              },
            }),
          ),
        }),
        Text({ children: `${range}d total ${short(total(picked.repos))} tok` }),
        ...section('Repos', picked.repos),
        ...section('Branches', picked.branches),
        ...section('Models', picked.models),
      ],
    })
  })