agent-swarm

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    const t0 = performance.now()
    try {
      const [isOpen] = await Promise.all([read($, openAtom), restore($)])
      if (e.props.hasSurvey) {
        mounted.delete(e.requestId)
        fullSite = undefined

        return next(e)
      }
      if (isOpen) return await drawFull($, e)
      if (fullSite === e.requestId) fullSite = undefined
      await read($, bandRevAtom)
      const list = ordered(snapshot.filter(a => isLive(a.phase) || (a.endedAt ?? 0) >= batchStart))
      if (list.length === 0) {
        mounted.delete(e.requestId)

        return next(e)
      }
      const { Box, Text, Button } = $.ui.resolve(e)
      const Raster = e.surface === 'terminal' ? $.ui.resolve(e).Raster : undefined
      const Client = e.surface === 'terminal' ? $.ui.resolve(e).Client : undefined
      /** A transparent region over the whole agent, last so it is on top: a click anywhere picks it. */
      const hitArea = (a: SwarmAgent, columns: number, rows: number, inset = 1) =>
        Client === undefined ? null : (
          <Box position="absolute" top={-inset} left={-inset}>
            <Client key={`hit-${coreKey(a.id)}`} module="./hit-area.tsx" props={{ id: a.id }} width={columns} height={rows} />
          </Box>
        )
      const width = Math.max(SQUARE, e.props.bodyColumns)
      const perRow = Math.max(1, Math.floor((width + GAP) / (SQUARE + GAP)))
      const fitRows = Math.max(1, Math.floor((e.props.maxRows - 1) / SQUARE_ROWS))
      const shown = list.slice(0, perRow * fitRows)
      const hidden = list.length - shown.length
      const inner = SQUARE - 2
      const live = list.filter(a => isLive(a.phase)).length
      const cost = totalCost(list)

      bandSite = e.requestId
      const prevCores = mounted.get(e.requestId)
      const cores = new Map<string, Core>()
      mounted.set(e.requestId, cores)

      const square = (a: SwarmAgent) => {
        const color = phaseColor(a.phase)
        const isOn = isLive(a.phase)
        let core
        if (Raster !== undefined) {
          core = <Raster key={coreKey(a.id)} columns={inner} rows={1} cells={coreCells(prevCores, cores, a, inner, 1)} />
        } else {
          core = <Text color={color}>{isOn ? '· • ● • ·' : a.phase}</Text>
        }

        return (
          <Box
            key={`sq-${a.id}`}
            flexDirection="column"
            width={SQUARE}
            borderStyle="round"
            borderColor={isOn ? color : hex(ramp(a.phase)[2])}
            borderDimColor={!isOn}
            hover={{ borderColor: hex(ramp(a.phase)[4]), borderDimColor: false }}
          >
            <Button
              key={`band-pick-${a.id}`}
              label={head(`${PHASE_GLYPH[a.phase]} ${a.name ?? a.type}`, inner)}
              plain
              dimColor={!isOn}
              onPress={() => void select($, a.id, { toggle: false, open: true })}
            />
            {core}
            <Box justifyContent="space-between">
              <Box>
                {effortCells(a.effortLevel).map(c =>
                  c.isOn ? (
                    <Text color={c.color} dimColor={!isOn}>
                      {c.ch}
                    </Text>
                  ) : (
                    <Text dimColor>{c.ch}</Text>
                  ),
                )}
              </Box>
              <Text dimColor>
                {a.phase === 'tool' && a.tool ? a.tool.slice(0, 8) : (costLabel(a) ?? `⚒${a.tools}`)}
              </Text>
            </Box>
            {hitArea(a, SQUARE, SQUARE_ROWS)}
          </Box>
        )
      }

      const rows: SwarmAgent[][] = []
      for (let i = 0; i < shown.length; i += perRow) rows.push(shown.slice(i, i + perRow))

      return (
        <Box flexDirection="column">
          <Text wrap="truncate-end">
            <Text bold color={BRAND}>◆ </Text>
            <Text color="suggestion">{live > 0 ? `${live} working` : 'all finished'}</Text>
            {cost !== undefined && <Text color={COST_COLOR}>{` · ${usd(cost)}`}</Text>}
            <Text dimColor>{`${hidden > 0 ? ` · +${hidden} more` : ''} · click one for details · /swarm unfolds`}</Text>
          </Text>
          {rows.map((row, i) => (
            <Box key={`band-row-${i}`} gap={GAP}>
              {row.map(square)}
            </Box>
          ))}
        </Box>
      )
    } finally {
      record('render.band', performance.now() - t0)
    }
  })

async function drawFull($: EngineInterface, e: RenderInput<'AbovePrompt'>) {
  const t0 = performance.now()
  try {
    const { Box, Text, Button } = $.ui.resolve(e)
    const Raster = e.surface === 'terminal' ? $.ui.resolve(e).Raster : undefined
    const Client = e.surface === 'terminal' ? $.ui.resolve(e).Client : undefined
    /** A transparent region over the whole agent, last so it is on top: a click anywhere picks it. */
    const hitArea = (a: SwarmAgent, columns: number, rows: number, inset = 1) =>
      Client === undefined ? null : (
        <Box position="absolute" top={-inset} left={-inset}>
          <Client key={`hit-${coreKey(a.id)}`} module="./hit-area.tsx" props={{ id: a.id }} width={columns} height={rows} />
        </Box>
      )
    const [, isCompact, selectedId, now] = await Promise.all([
      read($, paneRevAtom),
      read($, compactAtom),
      read($, selectedAtom),
      $.clock.now(),
      restore($),
    ])
    const list = ordered(snapshot)
    const selected = list.find(a => a.id === selectedId)
    shownId = selected?.id ?? ''

    const bodyColumns = Math.max(8, e.props.bodyColumns - FRAME)
    const width = Math.max(MIN_CARD, bodyColumns)
    const perRow = Math.max(1, Math.min(Math.floor((width + GAP) / (MIN_CARD + GAP)), list.length || 1))
    const cardWidth = Math.floor((width - GAP * (perRow - 1)) / perRow)
    const inner = Math.max(8, cardWidth - 4)

    const live = list.filter(a => isLive(a.phase)).length
    const done = list.filter(a => a.phase === 'done').length
    const failed = list.filter(a => a.phase === 'failed' || a.phase === 'stopped').length
    const tools = list.reduce((n, a) => n + a.tools, 0)
    const cost = totalCost(list)
    const isNarrow = bodyColumns < 64
    const closesIn = closeAt === undefined ? undefined : Math.max(0, Math.ceil((closeAt - now) / 1000))

    const prevCores = mounted.get(e.requestId)
    const cores = new Map<string, Core>()
    const surfaceKey = `${e.surface}|${isLightTheme()}`
    fullSite = e.requestId
    mounted.set(e.requestId, cores)

    const heading = (a: SwarmAgent, width?: number) => {
      const isOn = isLive(a.phase)
      const { lead, effort } = headingParts(a)

      return (
        <Box width={width} flexShrink={1}>
          <Text bold={isOn} dimColor={!isOn} color={phaseColor(a.phase)} wrap="truncate-end">
            {lead}
            {effort !== '' && <Text color={effortColor(a.effortLevel)}>{effort}</Text>}
          </Text>
        </Box>
      )
    }

    const badgeOf = (a: SwarmAgent) => {
      const badge = BADGE[a.phase]

      return badge !== undefined ? (
        <Text bold color={BADGE_INK} backgroundColor={phaseColor(a.phase)}>
          {` ${badge} `}
        </Text>
      ) : (
        <Text dimColor>{a.phase.toUpperCase()}</Text>
      )
    }

    /** The agent's description as the control that opens it in the inspector; 1–9 press it. */
    const picker = (a: SwarmAgent, i: number, room: number) => {
      const hotkey = i < 9 ? String(i + 1) : undefined
      const isShown = a.id === selected?.id

      return (
        <Button
          key={`pick-${a.id}`}
          label={head(a.description || a.name || a.type, Math.max(4, room - (hotkey === undefined ? 0 : 3)))}
          hotkey={hotkey}
          plain
          dimColor={!isLive(a.phase) && !isShown}
          onPress={() => void select($, a.id)}
        />
      )
    }

    const borderOf = (a: SwarmAgent) => {
      const isOn = isLive(a.phase)
      const isShown = a.id === selected?.id

      return {
        borderStyle: isShown ? 'bold' : 'round',
        borderColor: isOn || isShown ? phaseColor(a.phase) : hex(ramp(a.phase)[2]),
        borderDimColor: !isOn && !isShown,
        hover: { borderColor: hex(ramp(a.phase)[4]), borderDimColor: false },
      }
    }

    // Compact: one line per agent, headings padded to one width so the animations line up.
    const BADGE_W = 7
    const headW = Math.min(
      Math.floor(width / 3),
      Math.max(0, ...list.map(a => headingParts(a)).map(p => p.lead.length + p.effort.length)),
    )
    const lineCore = Math.max(4, width - headW - BADGE_W - 2)

    const activityOf = (a: SwarmAgent, elapsed: number): string => {
      switch (a.phase) {
        case 'tool':
          return `▸ ${a.tool ?? 'tool'}${a.toolArg ? `  ${a.toolArg}` : ''}`
        case 'thinking':
          return `✻ thinking · step ${a.steps}`
        case 'writing':
          return `✎ writing · step ${a.steps}`
        case 'spawning':
          return `◌ starting${a.isBackground ? ' in background' : ''}…`
        default:
          return `${PHASE_GLYPH[a.phase]} ${a.phase} in ${clock(elapsed)} · ${a.steps} step${a.steps === 1 ? '' : 's'}`
      }
    }

    const line = (a: SwarmAgent, i: number) => {
      const isOn = isLive(a.phase)
      let core
      if (Raster !== undefined) {
        core = <Raster key={coreKey(a.id)} columns={lineCore} rows={1} cells={coreCells(prevCores, cores, a, lineCore, 1)} />
      } else {
        core = (
          <Text color={phaseColor(a.phase)} dimColor={!isOn} wrap="truncate-end">
            {isOn ? '· • ● • ·' : (a.description || '')}
          </Text>
        )
      }

      const elapsed = (a.endedAt ?? now) - a.startedAt
      const cost = costLabel(a)
      const stats = `${cost === undefined ? '' : `${cost} · `}⚒${a.tools} · ${clock(elapsed)}`
      const isShown = a.id === selected?.id

      return (
        <Box key={`line-${a.id}`} flexDirection="column">
          <Box gap={1}>
            {heading(a, headW)}
            <Box width={lineCore}>{core}</Box>
            <Box width={BADGE_W} justifyContent="flex-end">
              {badgeOf(a)}
            </Box>
          </Box>
          <Box paddingLeft={1}>
            <Text color={phaseColor(a.phase)}>{isShown ? '▸' : ' '}</Text>
            {picker(a, i, width - 2)}
          </Box>
          <Box justifyContent="space-between" gap={2} paddingLeft={2}>
            <Box flexShrink={1}>
              <Text color={phaseColor(a.phase)} dimColor wrap="truncate-end">
                {activityOf(a, elapsed)}
              </Text>
            </Box>
            <Box flexShrink={0}>