budget-governor

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    const c = await read($, caps)
    if (e.props.hasSurvey || !hasCaps(c)) return next(e)
    const s = await read($, spend)
    const known = await read($, costKnown)
    const history = await read($, turns)
    const lv = level(c, s)
    const { Box, Text } = $.ui.resolve(e)

    const width = 10
    const filled = lv.ratio >= 1 ? width : Math.min(width - 1, Math.floor(lv.ratio * width))
    const color = lv.ratio >= 1 ? 'red' : lv.ratio >= WARN ? 'yellow' : 'green'

    // Burn rate over the last hour of turns, from the first of them; shown once
    // there are two turns to measure between.
    const now = await $.clock.now()
    const recent = history.filter(t => now - t.at <= 3_600_000)
    const first = recent[0]
    const hours = first === undefined ? 0 : Math.max((now - first.at) / 3_600_000, 1 / 60)
    const burn = recent.length >= 2 ? recent.reduce((sum, t) => sum + t.usd, 0) / hours : 0

    const last = history.slice(-12)
    const top = Math.max(...last.map(t => t.usd), 0)
    const spark = last.map(t => SPARK[top > 0 ? Math.min(7, Math.floor((t.usd / top) * 7.999)) : 0]).join('')

    const parts: string[] = []
    if (!known) parts.push('cost unavailable: using last recorded spend')
    if (c.day !== null) parts.push(`${money(s.day)} / ${money(c.day)} today`)
    if (c.session !== null) parts.push(`${money(s.session)} / ${money(c.session)} session`)
    if (lv.ratio >= 1) parts.push('cap reached')
    if (burn > 0) parts.push(`${money(burn)}/hr`)

    // The band is shared: draw ours above whatever the plugins beneath drew.
    const below = await next(e)
    return (
      <Box flexDirection="column">
        <Box>
          <Text color={color}>{'█'.repeat(filled)}</Text>
          <Text dimColor>{'░'.repeat(width - filled)} </Text>
          <Text>{parts.join(' · ')} </Text>
          {spark !== '' && <Text dimColor>{spark}</Text>}
        </Box>
        {below}
      </Box>
    )
  })