runner-avatar

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    // Leave the band to a survey, and to a terminal too small for the avatar
    if (isHidden || e.props.hasSurvey || e.props.maxRows < 3 || e.props.bodyColumns < WIDTH) return next(e)
    columns = e.props.bodyColumns
    isWorking = e.props.isWorking
    const { Box, Text, Client, Svg } = $.ui.resolve(e)
    // The desktop app gets drawings, the terminal block characters
    const isDrawn = e.surface === 'desktop'

    const spriteColor = contextPercent !== null && contextPercent >= HOT_PERCENT ? HOT_COLOR : COLOR
    // A game of tennis: a court as wide as the band allows, a net in the middle, a player at each
    // baseline. Drawn as a grid of cells, each row then cut into runs of one style.
    const scene = sceneWidth()
    if (mood === 'tennis' && scene > 0) {
      const grid = [0, 1, 2].map(() => Array.from({ length: scene }, () => null))
      const put = (row, col, text, style) => {
        for (const [i, char] of [...text].entries()) {
          if (char !== ' ' && col + i >= 0 && col + i < scene) grid[row][col + i] = { char, ...style }
        }
      }
      const net = Math.floor(scene / 2)
      const player = { color: spriteColor }
      const rival = { color: RIVAL_COLOR }
      const line = { dimColor: true }
      const rivalLeft = scene - WIDTH - rivalAt

      // The court's surface, the net, and the score over it
      put(2, 0, '▁'.repeat(scene), { color: 'green', dimColor: true })
      put(1, net, '╻', line)
      put(2, net, '┃', line)
      const board = banner !== '' ? banner : POINTS[score[0]] + ' : ' + POINTS[score[1]]
      for (const [i, char] of [...board].entries()) grid[0][net - Math.floor(board.length / 2) + i] = { char, ...line }
      // The players, each with a racket held toward the net
      put(0, playerAt + OFFSETS[0], BODY[0], player)
      put(1, playerAt + OFFSETS[1], BODY[1], player)
      put(2, playerAt + OFFSETS[2], LEGS[playerLegs], player)
      put(1, playerAt + WIDTH, '─o', line)
      put(0, rivalLeft + OFFSETS[0], BODY[0], rival)
      put(1, rivalLeft + OFFSETS[1], BODY[1], rival)
      put(2, rivalLeft + OFFSETS[2], LEGS[rivalLegs], rival)
      put(1, rivalLeft - 2, 'o─', line)
      put(ballRow(), ball, '●', { color: 'yellow' })

      // Cut a row into runs of cells that share a style: one Text each, and a Box for a gap
      const runs = (cells) => {
        const children = []
        let from = 0
        while (from < cells.length) {
          const first = cells[from]
          let to = from + 1
          while (
            to < cells.length &&
            (cells[to] === null) === (first === null) &&
            cells[to]?.color === first?.color &&
            cells[to]?.dimColor === first?.dimColor
          ) {
            to += 1
          }
          children.push(
            first === null
              ? Box({ width: to - from, flexShrink: 0, children: [] })
              : Text({
                  color: first.color,
                  dimColor: first.dimColor === true,
                  children: [cells.slice(from, to).map((cell) => cell.char).join('')],
                }),
          )
          from = to
        }
        return Box({ flexDirection: 'row', children })
      }
      if (isDrawn) {
        return Box({
          key: 'tennis',
          marginLeft: Math.floor((columns - scene) / 2),
          children: [Svg({ ...drawingOf(grid, scene), alt: 'A game of tennis, ' + board })],
        })
      }
      return Box({
        key: 'tennis',
        flexDirection: 'column',
        marginLeft: Math.floor((columns - scene) / 2),
        children: grid.map(runs),
      })
    }

    const left = Math.max(0, Math.min(x, columns - WIDTH))
    const rows = [...BODY, LEGS[frame]]
    // The avatar is drawn by sprite.js in a region of its own, which reports clicks;
    // on the desktop it is a drawing, which doesn't
    const sprite = isDrawn
      ? Svg({
          ...drawingOf(
            rows.map((row, i) => cellsOf(row, OFFSETS[i], { color: spriteColor, dimColor: mood === 'asleep' })),
            WIDTH,
          ),
          alt: 'Claude avatar',
        })
      : Client({
          key: 'avatar',
          module: './sprite.js',
          width: WIDTH,
          height: 3,
          props: {
            rows,
            offsets: OFFSETS,
            color: spriteColor,
            isDim: mood === 'asleep',
          },
        })
    // In the air the avatar is a row higher, over its shadow
    const lift = (tree) =>
      jump > 0 && e.props.maxRows >= 4
        ? Box({
            flexDirection: 'column',
            children: [
              tree,
              Box({ key: 'shadow', marginLeft: left + 2, children: [Text({ dimColor: true, children: ['▔▔▔▔▔'] })] }),
            ],
          })
        : tree

    const { text, color, dim } = bubble()
    // The subagents' small avatars run beside the big one, at ground level
    const count = Math.min(agents.size, MINI_MAX)
    const minis = [MINI_HEAD, MINI_LEGS[frame]].map((row) => Array.from({ length: count }, () => row).join(' '))
    const sideWidth = Math.max(text.length, minis[0].length)
    if (sideWidth === 0) return lift(Box({ marginLeft: left, children: [sprite] }))

    // The bubble goes to the right of the avatar, or to its left near the right edge
    const roomRight = columns - (left + WIDTH + 1)
    const isOnRight = sideWidth <= roomRight || left < sideWidth + 1
    const cut = (line) => (isOnRight ? line.slice(0, Math.max(0, roomRight)) : line)
    const blank = Text({ children: [' '] })
    const side = Box({
      flexDirection: 'column',
      alignItems: isOnRight ? 'flex-start' : 'flex-end',
      children: [
        text === ''
          ? blank
          : Box({ key: 'bubble', children: [Text({ color, dimColor: dim === true, children: [cut(text)] })] }),
        count === 0
          ? Box({ flexDirection: 'column', children: [blank, blank] })
          : Box({
              key: 'minis',
              flexDirection: 'column',
              children: minis.map((row) => Text({ color: spriteColor, children: [cut(row)] })),
            }),
      ],
    })
    return lift(
      Box({
        flexDirection: 'row',
        columnGap: 1,
        marginLeft: isOnRight ? left : left - sideWidth - 1,
        children: isOnRight ? [sprite, side] : [side, sprite],
      }),
    )
  })