token-printer

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    if (e.props.hasSurvey || (await read($, isBandHidden))) {
      isBandShown = false
      return next(e)
    }

    const [total, list, hasShades, usd] = await Promise.all([read($, printed), read($, runs), read($, isUltra), spent($)])
    const last = list.at(-1)
    hasPrinted ||= e.props.isWorking

    // A resized band is a resized prompt box: the draft wraps anew, so look again.
    const width = Math.max(20, e.props.bodyColumns)
    if (width !== columns) {
      columns = width
      noteCaret(draft, caret)
    }
    const upcoming: Scene = e.props.isWorking ? level : hasDraft ? 'ready' : hasPrinted ? 'idle' : 'drowsy'

    // A new scene starts its animation over; a new print level carries on. A
    // draft startles Clawd only out of sleep: awake, he just turns to watch.
    if ((typeof upcoming === 'number') !== (typeof scene === 'number') || (typeof upcoming !== 'number' && upcoming !== scene)) {
      const wasAsleep = isAsleep(scene, tick - sceneStart)
      sceneStart = upcoming === 'ready' && !wasAsleep ? tick - SETTLED_TICKS : tick
    }

    scene = upcoming
    isBandShown = true
    const t = tick - sceneStart
    const caption = scene === 'ready'
      ? isIntro(t) ? 'Ooh, a prompt!' : 'Printer ready 👀'
      : typeof scene === 'number'
        ? `${WORD[scene]}${hasShades ? ' 😎' : ''}`
        : `Printer idle${last === undefined ? '' : ` · last run +${grouped(last)}`}`
    const ledger = [`${grouped(total)} printed`, dollars(usd)].filter(Boolean).join(' · ')
    const hide = async () => {
      await update($, isBandHidden, () => true)
      $.ui.toast('Printer band hidden. /token-reserve brings it back.')
    }

    // Reading `redraw` is what lets the clock redraw the band, and the band alone.
    await read($, redraw)

    if (e.surface === 'terminal') {
      const { Box, Button, Text } = $.ui.resolve(e)

      return (
        <Box flexDirection="row" gap={1}>
          <Text color={ORANGE}>✻ {caption}</Text>
          <Text dimColor>{ledger}</Text>
          <Button key="hide" label="hide" plain dimColor onPress={hide} />
        </Box>
      )
    }

    const { Box, Text } = $.ui.resolve(e)

    // Clawd and his printer are boxes, 40 columns by 3 rows (3px pixels on the
    // desktop), with the caption pinned over the band's right. No Hide button:
    // here the desktop draws it as a pill in the middle; /token-reserve hides.
    return (
      <Box flexDirection="row" height={3}>
        <Box width={40} height={3}>{pixels(Box, frame({ scene, t, hasShades, gaze }))}</Box>
        <Box position="absolute" top={1} right={3} flexDirection="column">
          <Text color={ORANGE} bold>{caption}</Text>
          <Text dimColor>{ledger}</Text>
        </Box>
      </Box>
    )
  })

function pixels(Box: ElementConstructor<BoxProps>, rows: readonly string[]) {
  return (
    <Box flexDirection="column" width="100%" height="100%">
      {rows.map((row, y) => (
        <Box key={`r${y}`} flexDirection="row" width="100%" height="5%">
          {runsOf(row).filter(([letter], i, all) => letter !== '.' || i < all.length - 1).map(([letter, from, length]) => {
            const color = PALETTE[letter]
            return color === undefined
              ? <Box key={`c${from}`} width={`${length}%`} height="100%" />
              : <Box key={`c${from}`} width={`${length}%`} height="100%" backgroundColor={color} />
          })}
        </Box>
      ))}
    </Box>
  )
}

  on('ui.render', { component: 'Pane', requestId: RESERVE }, async ($, e) => {
    const [total, list, hasShades, working, hidden, usd, lifetime] = await Promise.all([
      read($, printed), read($, runs), read($, isUltra), read($, isPrinting), read($, isBandHidden), spent($), $.store.get('lifetime'),
    ])
    const lines = [
      [`${grouped(total)} tokens printed this session`, dollars(usd)].filter(Boolean).join(' · '),
      `${list.length} ${list.length === 1 ? 'reply' : 'replies'} · biggest run ${grouped(list.length === 0 ? 0 : Math.max(...list))}`,
      `${grouped(Number(lifetime ?? 0))} tokens printed all-time`,
    ]
    const toggle = () => update($, isBandHidden, isHidden => !isHidden)
    const label = hidden ? 'Show band' : 'Hide band'

    if (e.surface === 'terminal') {
      const { Box, Button, Text } = $.ui.resolve(e)

      return (
        <Box flexDirection="column">
          {BLOCK_ART.map(row => (
            <Box flexDirection="row">
              {row.map(([text, color]) => <Text color={color}>{text}</Text>)}
            </Box>
          ))}
          {lines.map(line => <Text>{line}</Text>)}
          {list.length > 0 && <Text color={ORANGE}>{sparkline(list)}</Text>}
          <Button key="band" label={label} onPress={toggle} />
        </Box>
      )
    }

    const { Box, Button, Svg, Text } = $.ui.resolve(e)

    return (
      <Box flexDirection="column" gap={1}>
        <Svg {...strip(working ? level : 'idle', hasShades, 2)} alt="Clawd at the token printer" isInteractive />
        {lines.map(line => <Text>{line}</Text>)}
        <Text bold>Tokens per reply</Text>
        {list.length > 0
          ? <Svg {...chart(list)} alt={`Tokens per reply, oldest first: ${list.map(grouped).join(', ')}`} isInteractive />
          : <Text dimColor>No replies printed yet.</Text>}
        <Box flexDirection="row">
          <Button key="band" label={label} onPress={toggle} />
        </Box>
      </Box>
    )
  })