context-meter

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    if (e.props.hasSurvey) {
      return next(e)
    }
    const beneath = await next(e)
    if (await read($, isHidden)) {
      return beneath
    }
    const reading = await read($, context)
    const now = await $.clock.now()
    const ttl = cacheTtl(ttlConfig, await read($, limits), now)
    const view = {
      surface: e.surface,
      context: reading,
      cache: ttl === null ? null : cacheState(await read($, lastRequestAt), ttl, now, reading?.tokens ?? 0),
      account: { limits: await read($, accountLimits), cost: await read($, cost), now },
      onHide: () => update($, isHidden, () => true),
      compact: (await read($, isCompacting))
        ? ('busy' as const)
        : !e.props.isWorking && reading !== null && reading.percent >= compactAt
          ? () => compactNow($)
          : null,
    }
    if (bandPills(view).length === 0) {
      return beneath
    }

    return band($.ui.resolve(e), view, beneath)
  })

export function band(t: ElementTable, view: BandView, beneath: RenderElement) {
  const { Box, Text, Button } = t
  const own = bandPills(view)

  // One line, never wrapped: the pills on the left (clipped, not wrapped, when
  // the window is too narrow), what draws beneath, the buttons on the right.
  // What draws beneath stays outside the clipped Box: the engine refuses its
  // own drawing under a Box with `overflow`, and then draws nothing of ours.
  return (
    <Box flexDirection="row" flexWrap="nowrap" alignItems="center" columnGap={1} flexGrow={1}>
      <Box flexDirection="row" flexWrap="nowrap" alignItems="center" columnGap={1} flexShrink={1} overflow="hidden">
        {pills(t, view.surface, own)}
      </Box>
      {beneath}
      <Box flexGrow={1} />
      <Box flexDirection="row" flexWrap="nowrap" alignItems="center" columnGap={2} flexShrink={0}>
        {view.compact === 'busy' && <Text dimColor>Compacting…</Text>}
        {typeof view.compact === 'function' && (
          <Button key="compact" label="Compact" variant="primary" onPress={view.compact} />
        )}
        <Button key="hide" label="Hide" plain dimColor onPress={view.onHide} />
      </Box>
    </Box>
  )
}