usage-band

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    if (mode !== 'band' || e.props.hasSurvey) return next(e)

    const s = await snapshot($)
    if (s.isEmpty) return next(e)
    const tpsLabel = tpsText(s.tps)

    // the stats cards: open, and only with a rate-limit window to describe
    const isOpen = await read($, statsOpen)
    const view = await read($, statsView)
    const th = await read($, theme)
    const hasWindows = !!(s.five || s.seven)
    const windows = isOpen && hasWindows ? await windowsNow($) : []

    const setView = (v: StatsView) => async () => {
      await update($, statsView, () => v)
      await $.store.set('statsView', v)
    }
    const nextTheme = async () => {
      const order: Theme[] = ['auto', 'light', 'dark']
      const v = order[(order.indexOf(await read($, theme)) + 1) % order.length] ?? 'auto'
      await update($, theme, () => v)
      await $.store.set('theme', v)
      $.ui.toast(`usage-band theme: ${v === 'auto' ? 'follow the system' : v}`)
    }

    if (e.surface === 'terminal') {
      const { Box, Text, Button } = $.ui.resolve(e)
      const bar = (w: Window) => {
        const n = Math.round(Math.min(1, w.pct / 100) * 8)
        return '█'.repeat(n) + '░'.repeat(8 - n)
      }
      const win = (w: Window | null, color: string) =>
        w && (
          <Text color={color}>
            {w.label} {bar(w)} <Text bold>{Math.round(w.pct)}%</Text>
            {w.left ? ` ↻ ${w.left}` : ''}
            {'  '}
          </Text>
        )
      return (
        <Box flexDirection="column">
          {windows.length > 0 && (
            <Box flexDirection="column" marginBottom={1}>
              {windows.map(w => (
                <Text key={w.kind} color={w.kind === 'five_hour' ? 'green' : 'magenta'} wrap="wrap">
                  {statsAlt(w, view)}
                </Text>
              ))}
              <Box flexDirection="row" gap={1}>
                <Button key="view-chart" label="Pace" variant={view === 'chart' ? 'primary' : 'secondary'} onPress={setView('chart')} />
                <Button key="view-model" label="By model" variant={view === 'model' ? 'primary' : 'secondary'} onPress={setView('model')} />
              </Box>
            </Box>
          )}
          <Box flexWrap="wrap">
            {win(s.five, 'green')}
            {win(s.seven, 'magenta')}
            <Text color="red">in {fmtTokens(s.input)}  </Text>
            <Text color="green">out {fmtTokens(s.output)}  </Text>
            <Text color="cyan">⚡ {tpsLabel}  </Text>
            <Text color="blue">cache {fmtTokens(s.cache)}  </Text>
            {s.usd !== undefined && <Text color="yellow">$ {s.usd.toFixed(2)}  </Text>}
            {s.ctx && <Text dimColor>ctx {Math.round(s.ctx.pct)}%  </Text>}
            {hasWindows && <Button key="stats" label="stats" plain dimColor={!isOpen} onPress={() => void toggleStats($)} />}
          </Box>
        </Box>
      )
    }

    if (e.surface !== 'desktop' && e.surface !== 'vscode' && e.surface !== 'mobile') return next(e)
    const { Box, Svg, Button } = $.ui.resolve(e)

    // Room for the row, in CSS px, estimated from the band's cell width
    const room = Math.max(320, e.props.bodyColumns * PX_PER_COL)

    const specs: Spec[] = [
      ...(s.five ? [windowPill(s.five, 'teal', 'gauge')] : []),
      ...(s.seven ? [windowPill(s.seven, 'violet', 'calendar')] : []),
      labelPill('in', 'red', fmtTokens(s.input), `Input tokens ${s.input} (incl. cache writes)`),
      labelPill('out', 'green', fmtTokens(s.output), `Output tokens ${s.output}`),
      simplePill(
        'bolt',
        'cyan',
        tpsLabel,
        !s.tps ? 'No response timed yet' : s.tps.isLive ? `Streaming at about ${tpsLabel}` : `Last response: ${tpsLabel}`,
        8,
      ),
      labelPill('cache', 'blue', fmtTokens(s.cache), `Cache read tokens ${s.cache}`),
      ...(s.usd !== undefined
        ? [simplePill('coin', 'gold', '$' + s.usd.toFixed(2), `Session cost $${s.usd.toFixed(2)}`)]
        : []),
      ...(s.ctx ? [windowPill(s.ctx, 'slate', 'doc')] : []),
    ]
    const bandRoom = hasWindows ? room - STATS_BUTTON_PX : room
    const row = band(specs, bandRoom, th)
    // a row wider than its room is scaled down to it, not left to push 📈 out
    const bandWidth = Math.min(row.width, bandRoom)

    // The SVGs sit in boxes that may shrink, so a narrower slot than the
    // estimate scales them down instead of pushing the buttons out of view
    // The cards always side by side, scaled down with the band
    let cards = null
    if (windows.length > 0) {
      const c = statsSvg(windows, view, th)
      const width = Math.min(c.width, Math.max(240, room - TOGGLES_PX))
      cards = (
        <Box flexDirection="row" alignItems="flex-start" marginBottom={1}>
          <Box flexShrink={1} minWidth={0}>
            <Svg source={c.svg} alt={c.alt} width={width} height={Math.round((c.height * width) / c.width)} />
          </Box>
          <Box flexDirection="column" flexShrink={0} marginLeft={1} gap={1}>
            <Button key="view-chart" label="Chart" variant={view === 'chart' ? 'primary' : 'secondary'} onPress={setView('chart')} />
            <Button key="view-model" label="By model" variant={view === 'model' ? 'primary' : 'secondary'} onPress={setView('model')} />
            <Button key="theme" label="◐" plain dimColor onPress={() => void nextTheme()} />
          </Box>
        </Box>
      )
    }

    return (
      <Box flexDirection="column">
        {cards}
        <Box flexDirection="row" alignItems="center">
          <Box flexShrink={1} minWidth={0}>
            <Svg source={row.svg} alt={row.alt} width={bandWidth} height={Math.round((30 * bandWidth) / row.width)} />
          </Box>
          {hasWindows && (
            <Box flexShrink={0} marginLeft={1}>
              <Button key="stats" label="📈" plain dimColor={!isOpen} onPress={() => void toggleStats($)} />
            </Box>
          )}
        </Box>
      </Box>
    )
  })