token-monster

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const elements = $.ui.resolve(e)
    const { Box, Button, Text } = elements
    const at = await read($, now)
    const full = (await read($, belly)) ?? { percent: 0, tokens: 0, window: 0, ate: 0, fedAt: at, burpAt: null, known: false, compactAt: null, fill: 0 }
    const limits = await read($, pantry)
    const activity = await read($, doing)
    const dieting = (await read($, armed)).length
    const plate = await read($, serving)
    const { monster, color } = await read($, look)
    const power = await read($, level)
    const helpers = scene.minions
    const hits = await read($, combo)
    const eaten = await read($, xp)
    const rank = levelOf(eaten)
    const isLoud = await read($, sound)
    const asked = await read($, waiting)
    const kept = cold(scene) ? scene.cache : null
    // Waiting on the person outranks everything: that is what needs them now.
    // About to burst outranks super mode: that line is the /compact warning.
    // What it said back to a pet or a hello shows for a moment, over its mood; hatching, it cracks.
    const { eye, say } =
      asked !== null
        ? CALLING
        : ((await read($, chat)) ?? ((await read($, egg)) ? { eye: 'o', say: '*crack* ... *crack*' } : voice(full, at, power, helpers)))
    const chain = onFire(hits)
    const remark = larder(limits)
    const tint = hex(PALETTE[color] ?? 0x3d7bff)
    const pie = await read($, slices)
    // Biggest first; free space is the empty part of the bar, not a legend entry.
    // Categories sharing a color merge (two MCP rows are one "mcp"); the five biggest
    // show, then the reserve.
    const merged = new Map<string, { color: string; short: string; kind: string; tokens: number }>()

    for (const row of pie.filter(one => one.kind !== 'free')) {
      const look = sliceLook(row.name)
      const known = merged.get(look.short)

      merged.set(look.short, { ...look, kind: row.kind, tokens: (known?.tokens ?? 0) + row.tokens })
    }

    const parts = [...merged.values()]
    const legend = [
      ...parts.filter(part => part.kind !== 'buffer').sort((a, b) => b.tokens - a.tokens).slice(0, 5),
      ...parts.filter(part => part.kind === 'buffer'),
    ]
    const entry = (part: (typeof legend)[number]) => `■ ${part.short} ${kilo(part.tokens)}  `
    const dietLine = dieting > 0 ? `eating ~${kilo(plate)} tokens from the context on your next /compact` : ''
    // The readout's height at `columns` wide, line by line, so the sprite takes only
    // what is left and the buttons never fall off the bottom of the pane.
    const lines = (columns: number) => {
      let legendLines = legend.length > 0 ? 1 : 0

      for (let used = 0, i = 0; i < legend.length; i++) {
        const w = entry(legend[i]!).length

        if (used + w > columns && used > 0) {
          legendLines += 1
          used = 0
        }
        used += w
      }

      // What it says can wrap: a gag or a fed-up line runs past a narrow readout.
      return (
        2 +
        Math.ceil(say.length / columns) +
        legendLines +
        limits.length +
        1 +
        (remark === undefined ? 0 : 1) +
        Math.ceil(dietLine.length / columns) +
        2 +
        (e.props.isFocused ? 0 : 1)
      )
    }
    // Stacked, the sprite takes up to 64 columns and the readout stays a 48 column block
    // under it. A pane too short for that (fewer than 10 sprite rows) and wide enough
    // for both puts the sprite beside the readout instead, as tall as it, twice as wide.
    const { bodyColumns, scroll } = e.props
    const wide = Math.max(16, Math.min(64, bodyColumns))
    const beside = Math.min(48, bodyColumns - 1 - 2 * Math.min(scroll.bodyRows, lines(Math.min(48, wide))))
    const isBeside =
      e.surface === 'terminal' && 'Raster' in elements && scroll.bodyRows - lines(Math.min(48, wide)) - 1 < 10 && beside >= 40
    const columns = isBeside ? beside : Math.min(48, wide)
    const readoutLines = lines(columns)
    const width = Math.max(6, Math.min(BAR, columns - 23))
    const grown = Math.round(((eaten - xpFor(rank)) / (xpFor(rank + 1) - xpFor(rank))) * width)
    const row = (name: string, percent: number, tail: string) => {
      const [used, left] = bar(percent, width)

      return (
        <Box>
          <Text dimColor>{name.padEnd(8)}</Text>
          <Text color={barColor(percent)}>{used}</Text>
          <Text dimColor>{left}</Text>
          <Text>
            {` ${Math.round(percent)}%`.padStart(5)} {tail}
          </Text>
        </Box>
      )
    }
    const layers = stack(pie, full.window || 1, width)
    let sprite

    // Raster draws on the terminal only; elsewhere it is an empty fragment.
    if (e.surface === 'terminal' && 'Raster' in elements) {
      const { Raster } = elements

      // After a hot reload the scene starts over: take the level from the banked tokens.
      if (scene.rank === 0) levelUp(scene, rank)
      // Mid-resize the pane can report no rows at all; a Raster under one cell is refused.
      const rows = isBeside ? Math.max(1, Math.min(scroll.bodyRows, readoutLines)) : Math.max(6, Math.min(22, scroll.bodyRows - readoutLines - 1))
      const across = isBeside ? Math.max(1, Math.min(2 * rows, bodyColumns - 1 - columns)) : wide

      canvas = { columns: across, rows }
      if (loop === undefined) {
        settle(scene)
        loop = $.clock.every(1000 / FPS, () => void frame($))
      }
      sprite = <Raster key="sprite" columns={across} rows={rows} cells={encode(paint(scene, across, rows * 2), across, rows, is256)} />
    } else {
      const drawing = ASCII[monster] ?? ASCII.cookie!

      sprite = (
        <Box flexDirection="column">
          {(activity === '' ? drawing.closed : drawing.open).map(line => (
            <Text color={tint}>{line.replaceAll('E', eye)}</Text>
          ))}
        </Box>
      )
    }

    const readout = (
      <Box flexDirection="column" width={columns}>
        <Text color={tint} bold>
          {say}
        </Text>
        <Text dimColor wrap="truncate-end">
          {asked !== null
            ? waitLine(asked)
            : activity !== ''
              ? `> ${activity}${chain}`
              : kept !== null
                ? `cold cache: next prompt re-reads ~${kilo(kept.tokens)} uncached`
                : full.ate > 0
                  ? `last bite +${kilo(full.ate)}, fed ${span(at - full.fedAt)} ago`
                  : `fed ${span(at - full.fedAt)} ago`}
        </Text>
        {pie.length === 0 ? (
          row('belly', full.percent, `${kilo(full.tokens)}/${kilo(full.window)}`)
        ) : (
          <Box>
            <Text dimColor>{'belly'.padEnd(8)}</Text>
            {layers.content.map(part => (
              <Text color={part.color}>{'█'.repeat(part.cells)}</Text>
            ))}
            <Text dimColor>{'░'.repeat(layers.free)}</Text>
            {layers.reserve.map(part => (
              <Text color={part.color}>{'▒'.repeat(part.cells)}</Text>

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

    const pane = (await $.ui.panes()).find(one => one.id === PANE)

    if (pane?.isShown === true && pane.isPlaced) return next(e)

    const { Box, Text } = $.ui.resolve(e)
    const at = await read($, now)
    const full = await read($, belly)

    if (full === null) return next(e)

    const limits = await read($, pantry)
    const activity = await read($, doing)
    const power = await read($, level)
    const hits = await read($, combo)
    const asked = await read($, waiting)
    const tint = hex(PALETTE[(await read($, look)).color] ?? 0x3d7bff)
    const { eye, say } = asked !== null ? CALLING : voice(full, at, power, scene.minions)
    const [used, left] = bar(full.percent, 8)
    const pieces = [
      ...limits.map(limit => `  ${limitName(limit.kind)} ${Math.round(limit.percentUsed)}%`),
      '  /token-monster',
    ]
    const head = `(${eye})(${eye}) ${asked !== null ? waitLine(asked) : activity !== '' ? `> ${activity}${onFire(hits)}` : say}`
    const meter = ` ${used}${left} ${full.percent}%`
    const room = e.props.bodyColumns - 2
    // What fits: the face and words first, cut short if they must, then the gauges.
    const words = head.slice(0, Math.max(10, room - meter.length))
    const tail = pieces.filter((_, index) => words.length + meter.length + pieces.slice(0, index + 1).join('').length <= room)

    return (
      <Box paddingX={1}>
        <Text color={tint} bold>
          {words}
        </Text>
        <Text color={barColor(full.percent)}>{` ${used}`}</Text>
        <Text dimColor>{left}</Text>
        <Text>{` ${full.percent}%`}</Text>
        <Text dimColor>{tail.join('')}</Text>
      </Box>
    )
  })