prompt-posse

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    // Only the terminal's band reaches under the engine's columns.
    const reach = e.surface === 'terminal' ? MARK_COLUMNS : 0
    const columns = Math.min(e.props.bodyColumns + reach, 512)
    // The boss leads the posse: it walks during the turn and for as long
    // as any subagent is still out.
    const hasBoss = e.props.isWorking || hasCompany(walk)

    if ((e.surface !== 'terminal' && e.surface !== 'desktop') || !walk.isOn) {
      walk.band = null
      return next(e)
    }

    // A load (a hot reload among them) can come in mid-turn, or while
    // background subagents walk: the first drawing catches up with both.
    if (!walk.isSynced) {
      walk.isSynced = true
      if (e.props.isWorking && !walk.isMainTurn) {
        walk.isMainTurn = true
        walk.boss.since = await $.clock.now()
        walk.boss.drawnAt = walk.boss.since
        wake($, walk)
      }
      relist($, walk)
    }

    if (
      !hasBoss ||
      e.props.hasSurvey ||
      e.props.maxRows < BAND_ROWS ||
      columns < BOSS_WIDTH / 2
    ) {
      walk.band = null
      return next(e)
    }

    const creatures = shown(walk, hasBoss)
    for (const { walker } of creatures) {
      walker.x = Math.min(walker.x, lastX(columns, walker.width))
    }
    walk.band = { requestId: e.requestId, columns, hasBoss, surface: e.surface }
    if (walk.timer !== null) {
      wake($, walk)
    }

    // The subagents' marks and tasks, in the order they joined.
    const entries = [...walk.subagents.values(), ...walk.demo.values()].map(({ look, description }) => ({
      text: description,
      mark: look.hatColor ?? look.color,
      color: look.color,
    }))
    const hasLegend = entries.length > 0 && e.props.maxRows >= BAND_ROWS + LEGEND_ROWS
    const segments = hasLegend ? legendRow(columns, entries) : []

    if (e.surface === 'desktop') {
      const now = await $.clock.now()
      const strides = creatures.map(({ walker, look, drawnAt, drawnSpeed }) => ({
        x: walker.x,
        heading: walker.heading,
        speed: drawnSpeed,
        elapsedMs: now - drawnAt,
        look,
      }))
      const { Box, Svg, Text } = $.ui.resolve(e)
      const svg = (
        <Svg
          source={posseSvg(columns, strides)}
          alt={describe(hasBoss, [...walk.subagents.values(), ...walk.demo.values()].map(c => c.type))}
          isInteractive
        />
      )
      if (!hasLegend) {
        return svg
      }

      return (
        <Box flexDirection="column">
          {svg}
          <Text wrap="truncate">
            {segments.map(({ text, color, isDim }) => (
              <Text color={color === undefined ? undefined : hex(color)} dimColor={isDim}>
                {text}
              </Text>
            ))}
          </Text>
        </Box>
      )
    }

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

    // Each row is placed absolutely so it can reach under the engine's
    // columns; the ground sits at the top of its row, so feet touch it.
    return (
      <Box flexDirection="column">
        <Box height={SPRITE_ROWS}>
          <Box position="absolute" left={0} width={columns}>
            <Raster
              key={KEY}
              columns={columns}
              rows={SPRITE_ROWS}
              cells={frame(columns, creatures)}
            />
          </Box>
        </Box>
        <Box height={1}>
          <Box position="absolute" left={0} width={columns}>
            <Text dimColor wrap="truncate">
              {GROUND.repeat(columns)}
            </Text>
          </Box>
        </Box>
        {hasLegend && (
          <Box height={LEGEND_ROWS}>
            <Box position="absolute" left={0} width={columns}>
              <Text wrap="truncate">
                {segments.map(({ text, color, isDim }) => (
                  <Text color={color === undefined ? undefined : hex(color)} dimColor={isDim}>
                    {text}
                  </Text>
                ))}
              </Text>
            </Box>
          </Box>
        )}
      </Box>
    )
  })