agent-atc

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const ui = $.ui.resolve(e)
    const { Box, Text, Button } = ui
    const Input = 'Input' in ui ? ui.Input : undefined

    const [all, picked, , top, at] = await Promise.all([
      read($, agents),
      read($, selected),
      read($, now),
      read($, main),
      $.clock.now(),
    ])
    const width = Math.max(30, e.props.bodyColumns)
    const rows = treeOrder(Object.values(all))
    const live = rows.filter(row => isBusy(row.agent.status)).length
    const done = rows.filter(row => row.agent.status === 'completed').length
    const other = rows.filter(row => !isLive(row.agent.status) && row.agent.status !== 'completed').length
    const focusId = picked ?? e.props.view.agentId ?? null
    const focus = focusId === null ? undefined : all[focusId]

    const pick = (id: string) => () => {
      void update($, selected, current => (current === id ? null : id))
    }

    const send = (agent: AtcAgent) => async (text: string) => {
      const message = text.trim()
      if (message === '') return
      const sent = await $.session.send({ to: { agentId: agent.id }, text: message })
      $.ui.toast(sent.isDelivered ? `Sent to ${agent.label}` : `Not sent: ${sent.reason}`)
    }

    const stop = (agent: AtcAgent) => async () => {
      const ran = await $.tool.call({
        tool: 'TaskStop',
        task_id: agent.teammateId ?? agent.id,
        consent: `The user pressed "Stop" on agent ${agent.label} in the agent control pane.`,
      })
      if (ran.deny !== undefined) $.ui.toast(`Not stopped: ${ran.deny}`)
      else if (ran.isError === true) $.ui.toast(`Not stopped: ${ran.text}`)
      else $.ui.toast(`Stopped ${agent.label}`)
    }

    return (
      <Box flexDirection="column" width={width}>
        <Text bold wrap="truncate-end">
          {rows.length === 0
            ? 'No subagents yet'
            : `${live} running · ${done} done${other > 0 ? ` · ${other} stopped or failed` : ''}`}
        </Text>
        {top.step !== undefined && (
          <Text dimColor wrap="truncate-end">
            main: {STEP_MARK[top.step.state]} {stepLine(top.step)} · {ago(at - top.lastAt)} ago
          </Text>
        )}
        <Text dimColor>{'─'.repeat(width)}</Text>

        {rows.length === 0 && (
          <Text dimColor wrap="wrap">
            Each subagent shows here the moment it starts, with what it is doing now.
          </Text>
        )}
        {rows.map(({ agent, depth }, i) => {
          const { glyph, color, word } = look(agent, at)
          const last = agent.steps[agent.steps.length - 1]
          return (
            <Box key={`row-${agent.id}`} flexDirection="row">
              <Text color={color}>
                {'  '.repeat(depth)}
                {agent.id === focusId ? '›' : ' '}
                {glyph}{' '}
              </Text>
              <Button
                key={`pick-${agent.id}`}
                plain
                hotkey={i < 9 ? String(i + 1) : undefined}
                label={agent.name ?? agent.label}
                onPress={pick(agent.id)}
              />
              <Text dimColor wrap="truncate-end">
                {'  '}
                {word}
                {isLive(agent.status) && last !== undefined ? `  ${stepLine(last)}` : ''}
              </Text>
            </Box>
          )
        })}

        {focus !== undefined && (
          <Box flexDirection="column" marginTop={1}>
            <Text bold wrap="truncate-end">
              {focus.name ?? focus.label}
            </Text>
            <Text dimColor wrap="truncate-end">
              {[
                focus.type,
                shortModel(focus.model),
                `started ${clockTime(focus.startedAt)}`,
                `${focus.calls} calls`,
                focus.errors > 0 ? `${focus.errors} errors` : undefined,
                focus.tokens !== undefined ? kTokens(focus.tokens) : undefined,
              ]
                .filter(part => part !== undefined)
                .join(' · ')}
            </Text>
            {focus.name !== undefined && (
              <Text dimColor wrap="truncate-end">
                {focus.label}
              </Text>
            )}
            {focus.steps.map(step => (
              <Box key={`step-${step.id}`} flexDirection="row">
                <Text dimColor>{clockTime(step.at)} </Text>
                <Text color={step.state === 'err' || step.state === 'deny' ? 'red' : undefined}>
                  {STEP_MARK[step.state]}{' '}
                </Text>
                <Text wrap="truncate-end">{stepLine(step)}</Text>
              </Box>
            ))}
            {focus.steps.length === 0 && <Text dimColor>No tool calls yet.</Text>}
            {focus.answer !== undefined && !isLive(focus.status) && (
              <Text wrap="wrap">Answer: {focus.answer}</Text>
            )}
            {Input !== undefined && (
              <Input
                key={`msg-${focus.id}`}
                placeholder={isLive(focus.status) ? 'Message this agent…' : 'Ask it a follow-up…'}
                submitLabel="Send"
                onSubmit={send(focus)}
              />
            )}
            <Box flexDirection="row" gap={1}>
              {isLive(focus.status) && (
                <Button key="stop" label="Stop" onPress={stop(focus)} />
              )}
              {picked !== null && (
                <Button key="back" label="Back" hotkey="b" onPress={() => void update($, selected, () => null)} />
              )}
            </Box>
          </Box>
        )}

        {rows.length > 0 && (
          <Text dimColor wrap="truncate-end">
            {'\n'}1-9 picks an agent · Tab walks the controls · Esc gives the keyboard back
          </Text>
        )}
      </Box>
    )
  })