usage-band

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    const view = await read($, mode)
    if (e.props.hasSurvey || view === 'hidden') return next(e)

    const data = await read($, reading)
    const beat = await read($, tick)
    const now = await $.clock.now()
    const meters = data === null ? [] : metersOf(data, now)
    const table = $.ui.resolve(e)
    const { Box, Button, Text } = table
    // Pixels where the surface draws them, glyphs on the terminal.
    const Svg = e.surface !== 'terminal' && 'Svg' in table ? table.Svg : undefined

    const setMode = async (to: Mode) => {
      await update($, mode, () => to)
      await $.store.set('mode', to).catch(() => undefined)
    }
    const hide = async () => {
      await setMode('hidden')
      $.ui.toast(`Usage hidden · /usage-band brings it back`)
    }

    if (data === null || meters.length === 0) {
      return (
        <Box gap={2}>
          <Text dimColor>Usage appears after the first reply.</Text>
          <Button key="hide" role="dismiss" dimColor label="Hide" onPress={hide} />
        </Box>
      )
    }

    const columns = e.props.bodyColumns
    const fullest = Math.max(...meters.map(meter => meter.percent))
    const lines = sayings(data, now)
    const saying = lines[(beat + Math.floor(now / 30_000)) % lines.length] ?? ''
    // Hovering Clawd shows what it has to say in a talk bubble laid over the
    // meters beside it, so nothing in the band moves. The terminal has no Clawd.
    const clawd = Svg !== undefined && (
      <Box key="clawd" position="relative" alignItems="center" flexShrink={0}>
        <Svg source={clawdSvg(fullest >= 75)} alt="Clawd" width={24} height={18} />
        <Box
          position="absolute"
          top={0}
          left={4}
          display="none"
          hover={{ display: 'flex' }}
          paddingX={1}
        >
          <Text color="claude">
            {'◂ '}
          </Text>
          <Text color="text" wrap="truncate-end">
            {saying}
          </Text>
        </Box>
      </Box>
    )
    const bar = (meter: Meter, width: number) => {
      const filled =
        meter.percent <= 0 ? 0 : Math.min(width, Math.max(1, Math.round((meter.percent / 100) * width)))

      if (Svg !== undefined) {
        const pixels = width * 12

        return (
          <Svg
            source={lineSvg(meter.key, meter.percent, meter.hues, pixels)}
            alt={`${meter.label} ${whole(meter.percent)}`}
            width={pixels}
            height={12}
          />
        )
      }
      // The terminal's fill runs through the meter's shades cell by cell.
      const cells = Array.from({ length: filled }, (_, at) =>
        blend(meter.hues, filled === 1 ? 0 : at / (filled - 1)),
      )

      return (
        <Text>
          {cells.map(colour => (
            <Text color={colour}>{FILL}</Text>
          ))}
          <Text color="subtle">{FILL.repeat(width - filled)}</Text>
        </Text>
      )
    }

    if (view === 'compact') {
      // One line, always: a proportional font draws the bar's glyphs wide, so
      // the desktop gets fewer of them, and nothing here may wrap.
      const width = Svg !== undefined ? 5 : columns >= 100 ? 8 : columns >= 72 ? 5 : 0

      return (
        <Box columnGap={2} flexWrap="nowrap" alignItems="center">
          {clawd}
          {meters.map(meter => (
            <Box gap={1} flexShrink={0} alignItems="center">
              <Text dimColor wrap="truncate-end">
                {meter.label}
              </Text>
              {width > 0 && bar(meter, width)}
              <Text bold color={meter.hues[1]}>
                {whole(meter.percent)}
              </Text>
              {meter.brief !== '' && (
                <Text dimColor wrap="truncate-end">
                  {meter.brief}
                </Text>
              )}
            </Box>
          ))}
          <Button key="details" plain dimColor label="Details" onPress={() => setMode('full')} />
        </Box>
      )
    }

    const labelWidth = Math.max(...meters.map(meter => meter.label.length)) + 2
    const width = Svg !== undefined ? 14 : Math.max(8, Math.min(28, columns - labelWidth - 48))
    const footer = sessionLine(data, now)

    return (
      <Box flexDirection="column">
        {meters.map(meter => (
          <Box gap={1} alignItems="center">
            <Box width={labelWidth}>
              <Text>{meter.label}</Text>
            </Box>
            {bar(meter, width)}
            <Box width={5} justifyContent="flex-end">
              <Text bold color={meter.hues[1]}>
                {whole(meter.percent)}
              </Text>
            </Box>
            <Text dimColor wrap="truncate-end">
              {meter.detail}
            </Text>
          </Box>
        ))}
        <Box gap={2}>
          {clawd}
          {footer !== '' && <Text dimColor>{footer}</Text>}
          <Button key="compact" dimColor label="Less" onPress={() => setMode('compact')} />
          <Button key="hide" role="dismiss" dimColor label="Hide" onPress={hide} />
        </Box>
      </Box>
    )
  })