statusbar

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    if (e.props.hasSurvey || (await read($, isHidden))) return next(e)
    const s = await read($, snap)
    if (!s) return next(e)

    const { Box, Text } = $.ui.resolve(e)
    const [list, l, legend, hist] = await Promise.all([
      read($, rows),
      read($, last),
      read($, isLegend),
      read($, history),
    ])
    await read($, now)
    const wall = await $.clock.now()
    const cols = e.props.bodyColumns
    const t = tier(cols)
    const isNarrow = t === 'narrow'
    const isTiny = cols < 120
    const pct = Math.round(s.percent ?? 0)
    const shown = (list ?? []).filter(r => r.kind !== 'deferred')
    const total = shown.reduce((a, r) => a + r.tokens, 0)
    const threshold = (total * autocompact) / 100
    const left = list ? turnsLeft(hist, threshold) : null
    const leftText =
      left === null ? '' : left === 0 ? 'compact due' : left < 3 ? `${left} turns left` : `~${left} turns left`
    const width = Math.max(10, cols - 3 - leftText.length - 6)
    const markerAt = Math.floor((autocompact / 100) * width)
    const cells = list
      ? barCells(list, width, markerAt)
      : barCells(
          [
            { name: 'messages', tokens: pct, color: '', kind: 'used' },
            { name: 'free', tokens: 100 - pct, color: '', kind: 'free' },
          ],
          width,
          markerAt,
        )
    const items = list ? legendItems(list, total || 1, isTiny, isTiny ? 0.01 : 0.005) : []
    if (list) items.push({ key: 'compact', swatch: '┃', color: '#cdd6f4', text: `compact ${fmt(Math.round(threshold))}` })
    const cacheLeft = l ? Math.round(ttl - (wall - l.endedAt) / 1000) : null
    const cache = cacheState(cacheLeft)
    const limitCells = cols < 100 ? 6 : 10
    const gap = isNarrow ? 2 : 3
    const rowGap = isNarrow ? 3 : 4
    const blank = 0

    const limitNodes = s.limits.map(x => {
      const name = x.kind === 'five_hour' ? '5h' : x.kind === 'seven_day' ? '7d' : x.kind
      const left = Math.max(0, 100 - Math.round(x.percentUsed))
      const color = leftColor(left)
      return (
        <Text key={x.kind}>
          {name} <Text color={color}>{limitBar(left, limitCells)}</Text>{' '}
          <Text color={color}>{left}%</Text> <Text dimColor>{eta(x.resetsAt, wall)}</Text>
        </Text>
      )
    })

    const turnNodes = l
      ? [
          <Text key="s">{l.seconds}s</Text>,
          <Text key="t">{l.tools} {l.tools === 1 ? 'tool' : 'tools'}</Text>,
          <Text key="c">${l.usd.toFixed(2)}</Text>,
          <Text key="o">↑{fmt(l.outTokens)}</Text>,
          <Text key="h" color={l.cacheHitPercent >= 90 ? undefined : hitColor(l.cacheHitPercent)} dimColor={l.cacheHitPercent >= 90}>⚡ {l.cacheHitPercent}% cache</Text>,
          cache ? (
            <Text key="k">
              <Text color={cache.color}>{cache.glyph}</Text>{' '}
              <Text color={cache.glyph === '○' ? RED : undefined} dimColor={cache.glyph === '●'}>{cache.text}</Text>
              {cache.glyph === '○' && !isNarrow && <Text color={RED}> ⚠ next re-reads full</Text>}
            </Text>
          ) : (
            <Text key="k"> </Text>
          ),
        ]
      : []

    const lane = (nodes: unknown[]) =>
      nodes.map((n, i) => <Box key={String(i)}>{n as never}</Box>)

    return (
      <Box flexDirection="column" marginTop={1}>
        <Box flexDirection="row">
          <Box width={3}><Text dimColor>◔</Text></Box>
          <Box flexDirection="row" columnGap={2}>
            <Box flexDirection="row">
              {runs(cells).map((r, i) => (
                <Text key={String(i)} color={r.color}>{r.text}</Text>
              ))}
            </Box>
            {leftText !== '' && (
              <Text color={left !== null && left < 3 ? RED : undefined} dimColor={left !== null && left >= 3}>
                {leftText}
              </Text>
            )}
          </Box>
        </Box>
        {legend && cols >= 80 && items.length > 0 && (
          <Box flexDirection="row">
            <Box width={3}><Text> </Text></Box>
            <Box flexDirection="row" flexWrap="wrap" columnGap={gap}>
              {lane(
                items.map(it => (
                  <Text key={it.key}>
                    <Text color={it.color}>{it.swatch}</Text> <Text dimColor>{it.text}</Text>
                  </Text>
                )),
              )}
            </Box>
          </Box>
        )}
        <Box flexDirection="row" marginTop={blank}>
          <Box width={3}><Text dimColor>⏱</Text></Box>
          <Box flexDirection="row" columnGap={rowGap}>
            {lane(
              limitNodes.flatMap((n, i) => (i === 0 ? [n] : [<Text key={`d${i}`} dimColor>·</Text>, n])),
            )}
          </Box>
        </Box>
        {l && (
          <Box flexDirection="row" marginTop={blank}>
            <Box width={3}><Text dimColor>↻</Text></Box>
            <Box flexDirection="row" columnGap={rowGap}>
              {lane(turnNodes)}
            </Box>
          </Box>
        )}
      </Box>
    )
  })