context-gauge

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    const others = await next(e)
    if (e.props.hasSurvey || !(await read($, detail))) return others
    const r = await read($, reading)
    const b = await read($, breakdown)
    const { Box, Text } = $.ui.resolve(e)

    return (
      <Box flexDirection="column">
        {others}
        {band(Box, Text, r, b, e.props.bodyColumns)}
      </Box>
    )
  })

function band(Box: any, Text: any, r: GaugeReading, b: GaugeBreakdown | null, columns: number) {
  const who = []
  if (r.place && columns >= 70) who.push(<Text dimColor>{`${r.place} · `}</Text>)
  if (r.model) who.push(<Text bold>{modelLabel(r.model)}</Text>)
  if (r.window) who.push(<Text dimColor>{` ${short(r.window)}`}</Text>)
  if (r.effort) who.push(<Text dimColor>{` · ${r.effort}`}</Text>)

  if (!b) {
    return [
      <Box flexDirection="row">
        {who}
        <Text dimColor>{'  measuring context…'}</Text>
      </Box>,
    ]
  }

  const used = Math.min(100, Math.max(0, Math.round(b.percentage)))
  const left = 100 - used
  const color = left > 20 ? 'green' : left >= 10 ? 'yellow' : 'red'
  const free = b.categories.find(c => c.kind === 'free')?.tokens ?? Math.max(0, b.rawMaxTokens - b.totalTokens)
  const width = Math.max(10, Math.min(columns, 120))
  const cells = split(b.categories, width)

  return [
    <Box flexDirection="row" justifyContent="space-between" width={columns}>
      <Box flexDirection="row">{who}</Box>
      <Box flexDirection="row">
        <Text color={color} bold>{`${used}% used`}</Text>
        <Text dimColor>{` · ${short(free)} free`}</Text>
      </Box>
    </Box>,
    <Box flexDirection="row">
      {b.categories.map((c, i) =>
        cells[i] ? (
          c.kind === 'free' ? (
            <Text dimColor>{'░'.repeat(cells[i]!)}</Text>
          ) : (
            <Text color={c.color}>{(c.kind === 'buffer' ? '▒' : '█').repeat(cells[i]!)}</Text>
          )
        ) : null,
      )}
    </Box>,
  ]
}