swarm-mod

  on('ui.render', { component: 'Pane' }, async ($, e, next) => {
    if (e.requestId === MAIN) return renderMain($, e)
    if (e.requestId === WIZARD) return renderWizard($, e)
    if (e.requestId === ROSTERS) return renderRosters($, e)
    if (typeof e.requestId === 'string' && e.requestId.startsWith(DETAIL)) return renderDetail($, e, e.requestId.slice(DETAIL.length))
    return next(e)
  })

function renderMain($, e) {
  const { Box, Text, Button, Input } = $.ui.resolve(e)
  const { list, working, attention, total } = counts()
  const rows = []
  rows.push(
    Box({
      key: 'head',
      flexDirection: 'row',
      columnGap: 1,
      children: [
        Text({ bold: true, color: '#c678dd', children: ['SWARM'] }),
        Text({ dimColor: true, children: [list.length + ' agents · ' + working + ' working'] }),
        ...(attention ? [Text({ bold: true, color: '#ff5555', children: ['· ' + attention + ' need you'] })] : []),
      ],
    }),
  )
  const liveCount = list.filter((a) => isLive(a) || a.restartAt).length
  rows.push(
    Box({
      key: 'toolbar',
      flexDirection: 'row',
      columnGap: 2,
      children: [
        Button({ key: 'spawn', label: 'n: + Spawn agent', hotkey: 'n', onPress: () => openWizard($) }),
        Button({ key: 'rosters', label: 'r: Rosters', hotkey: 'r', plain: true, onPress: () => openRosters($) }),
        ...(liveCount
          ? [Button({
              key: 'kill-all',
              label: killArmed ? 'k: Press again to kill ' + liveCount : 'k: Kill all',
              hotkey: 'k',
              ...(killArmed ? {} : { plain: true }),
              onPress: async () => {
                if (!killArmed) {
                  killArmed = true
                  $.ui.invalidate('ui.render')
                  $.clock.after(6000, () => {
                    killArmed = false
                    $.ui.invalidate('ui.render')
                  })
                  return
                }
                await killAll($)
              },
            })]
          : []),
      ],
    }),
  )
  if (lastRoster && lastRoster.agents && lastRoster.agents.length) {
    rows.push(
      Button({
        key: 'restore-last',
        label: 'Restore last swarm here (' + lastRoster.agents.length + ' agents: ' + clip(lastRoster.agents.map((x) => x.name).join(', '), 50) + ')',
        onPress: () => launchRoster($, lastRoster.agents, 'last swarm'),
      }),
    )
  }
  if (!list.length) {
    rows.push(Text({ dimColor: true, children: ['No agents yet. Spawn one, or launch a saved roster (r).'] }))
  }
  for (const a of list) {
    const sv = statusView(a)
    rows.push(
      Box({
        key: 'row-' + a.key,
        flexDirection: 'column',
        children: [
          Box({
            flexDirection: 'row',
            columnGap: 1,
            children: [
              Text({ color: a.color, children: ['●'] }),
              Button({ key: 'open-' + a.key, label: a.name, plain: true, onPress: () => openDetail($, a.key) }),
              a.status === 'failed'
                ? Button({ key: 'err-' + a.key, label: sv.glyph + ' ' + sv.word + ' · copy error', plain: true, onPress: async (press) => { await copyError($, a.key, press); await openDetail($, a.key) } })
                : Text({ color: sv.color, bold: !!sv.bold, children: [sv.glyph + ' ' + sv.word] }),
              ...(a.pending
                ? [Button({ key: 'attn-' + a.key, label: a.pending.kind === 'approval' ? '! review' : '? answer', onPress: () => openDetail($, a.key) })]
                : []),
            ],
          }),
          Text({
            dimColor: true,
            wrap: 'truncate-end',
            children: ['  ' + (a.activity || (a.transport === 'session' ? 'own window' : 'teammate')) + ' · ' + fmtTokens(totalTokens(a.tokens)) + ' tok' + (a.autoRestart ? ' · ↻' + (a.restarts ? ' ' + a.restarts + '/' + RESTART_MAX : '') : '')],
          }),
        ],
      }),
    )
  }
  for (const c of conflicts) {
    rows.push(Text({ key: 'conf-' + c.path, color: '#e5c07b', wrap: 'truncate-end', children: ['▲ ' + c.keys.map((k) => (agents[k] ? agents[k].name : k)).join(' & ') + ' both edited ' + baseName(c.path)] }))
  }
  if (list.length) {
    rows.push(Text({ dimColor: true, children: ['total ' + fmtTokens(total) + ' tokens'] }))
    rows.push(
      Input({
        key: 'broadcast',
        label: 'Broadcast',
        placeholder: 'message every live agent',
        value: '',
        submitLabel: 'send',
        onSubmit: (v) => broadcast($, v),
      }),
    )
    if (list.some((a) => !isLive(a))) {
      rows.push(
        Button({
          key: 'clear-done',
          label: 'x: Clear finished',
          hotkey: 'x',
          plain: true,
          onPress: async () => {
            for (const a of list) if (!isLive(a)) await removeAgent($, a.key)
          },
        }),
      )
    }
  }
  return Box({ flexDirection: 'column', gap: 0, children: rows })
}

function renderWizard($, e) {
  const { Box, Text, Button, Input } = $.ui.resolve(e)
  const redraw = () => $.ui.invalidate('ui.render')
  if (!draft) {
    return Box({ flexDirection: 'column', children: [Text({ dimColor: true, children: ['Nothing to spawn.'] }), Button({ key: 'w-close', label: 'Close', onPress: () => $.ui.close({ id: WIZARD }) })] })
  }
  const d = draft
  const typeOptions = [{ value: 'default', label: 'Default (general-purpose)' }]
  for (const t of [...BUILTIN_AGENTS.filter((b) => b !== 'general-purpose'), ...Object.keys(agentTypes).sort()]) {
    if (!typeOptions.some((o) => o.value === t)) typeOptions.push({ value: t, label: t + (agentTypes[t] ? ' - ' + clip(agentTypes[t], 50) : '') })
  }
  const used = liveColors()
  const colorOptions = PALETTE.filter((c) => !used.includes(c.hex) || c.hex === d.color).map((c) => ({ value: c.hex, label: c.name }))
  const options = colorOptions.length ? colorOptions : PALETTE.map((c) => ({ value: c.hex, label: c.name }))
  const notes = []
  if (d.mode === 'teammate' && !d.teamsOn) {
    notes.push(Text({ color: '#e5c07b', children: ['Agent teams are off (CLAUDE_CODE_EXPERIMENTAL_AGENT_TEAMS=1). It will run as a named background agent instead.'] }))
  }
  if (d.mode === 'teammate' && ['auto'].includes(d.approval)) {
    notes.push(Text({ dimColor: true, children: ["Auto for a teammate follows the lead session's own mode."] }))
  }
  if (d.mode === 'session' && BUILTIN_AGENTS.includes(d.agentType) && d.agentType !== 'general-purpose') {
    notes.push(Text({ dimColor: true, children: [d.agentType + ' is built in; a separate session starts as a normal session.'] }))
  }
  const ui = { Box, Text, Button }
  const restartOptions = [{ value: 'off', label: 'Off' }, { value: 'on', label: 'Restart if it crashes or hangs (up to ' + RESTART_MAX + 'x)' }]
  return Box({
    flexDirection: 'column',
    children: [
      Text({ bold: true, children: ['Spawn a swarm agent'] }),
      picker($, ui, { key: 'mode', label: 'Runs as', options: MODES, value: d.mode, next: 'w-agent', set: (v) => { d.mode = v } }),
      picker($, ui, { key: 'agent', label: 'Agent', options: typeOptions, value: d.agentType, next: 'w-model', set: (v) => { d.agentType = v } }),
      picker($, ui, { key: 'model', label: 'Model', options: MODELS, value: d.model, next: 'w-effort', set: (v) => { d.model = v } }),
      picker($, ui, { key: 'effort', label: 'Thinking effort', options: EFFORTS, value: d.effort, next: 'w-name', set: (v) => { d.effort = v } }),
      Input({ key: 'w-name', label: 'Name', placeholder: 'scout', value: d.name, onInput: (v) => { d.name = v }, onSubmit: (v) => { d.name = v; redraw() } }),
      picker($, ui, { key: 'color', label: 'Color', options, value: d.color, next: 'w-approval', set: (v) => { d.color = v }, prefix: [Text({ color: d.color, children: ['●●●'] })] }),
      picker($, ui, { key: 'approval', label: 'Approval mode', options: APPROVALS, value: d.approval, next: 'w-restart', set: (v) => { d.approval = v } }),
      picker($, ui, { key: 'restart', label: 'Auto-restart', options: restartOptions, value: d.autoRestart ? 'on' : 'off', next: 'w-task', set: (v) => { d.autoRestart = v === 'on' } }),
      Input({ key: 'w-task', label: 'Task', placeholder: d.mode === 'session' ? 'first prompt (optional)' : 'what should it work on?', value: d.task, onInput: (v) => { d.task = v }, onSubmit: (v) => { d.task = v; redraw() } }),
      Text({ dimColor: true, wrap: 'truncate-middle', children: ['Workspace: ' + (d.cwd || 'this session’s directory')] }),
      ...notes,
      ...(wizardError ? [Text({ color: '#ff5555', children: [wizardError] })] : []),
      Box({
        flexDirection: 'row',
        columnGap: 2,
        children: [
          Button({ key: 'w-spawn', label: 'Spawn ' + (String(d.name || '').trim() || 'agent'), onPress: () => spawnFromDraft($) }),
          Button({ key: 'w-cancel', label: 'Cancel', onPress: async () => { draft = null; await $.ui.close({ id: WIZARD }) } }),
        ],
      }),
    ],
  })
}

function picker($, ui, f) {
  const { Box, Button } = ui
  const cur = f.options.find((o) => o.value === f.value) || f.options[0]
  const isOpen = openPick === f.key
  const head = Button({
    key: 'w-' + f.key,
    label: f.label + ': ' + cur.label + (isOpen ? ' ▴' : ' ▾'),
    plain: true,
    onPress: async () => {
      openPick = isOpen ? null : f.key
      $.ui.invalidate('ui.render')
      if (!isOpen) await moveFocus($, 'w-' + f.key + ':' + cur.value)
    },
  })
  const rows = [f.prefix ? Box({ flexDirection: 'row', columnGap: 1, children: [...f.prefix, head] }) : head]
  if (isOpen) {
    rows.push(Box({
      flexDirection: 'column',
      paddingLeft: 2,
      children: f.options.map((o) => Button({
        key: 'w-' + f.key + ':' + o.value,
        label: (o.value === cur.value ? '● ' : '○ ') + o.label,
        plain: true,
        onPress: async () => {
          f.set(o.value)
          openPick = null
          $.ui.invalidate('ui.render')
          await moveFocus($, f.next)
        },
      })),
    }))
  }
  return Box({ key: 'f-' + f.key, flexDirection: 'column', children: rows })
}

function renderRosters($, e) {
  const { Box, Text, Button, Input } = $.ui.resolve(e)
  const rows = []
  rows.push(Text({ bold: true, children: ['Saved rosters'] }))
  rows.push(Text({ dimColor: true, children: ['A roster keeps each agent\'s name, color, type, model, effort, approval mode, transport, task and auto-restart. Launching one spawns them all in this workspace.'] }))
  rows.push(
    Input({
      key: 'r-name',
      label: 'Save this swarm as',
      placeholder: 'roster name',
      value: rosterNameDraft,
      submitLabel: 'save',
      onInput: (v) => { rosterNameDraft = v },
      onSubmit: (v) => saveRoster($, v),
    }),
  )
  if (rosterError) rows.push(Text({ color: '#ff5555', children: [rosterError] }))
  if (!rosterList.length) rows.push(Text({ dimColor: true, children: ['No saved rosters yet.'] }))
  for (const [i, r] of rosterList.entries()) {
    const when = r.savedAt ? new Date(r.savedAt).toISOString().slice(0, 16).replace('T', ' ') : ''
    rows.push(
      Box({
        key: 'roster-' + i,
        flexDirection: 'column',
        children: [
          Box({
            flexDirection: 'row',
            columnGap: 2,
            children: [
              Text({ bold: true, children: [r.name] }),
              Button({ key: 'rl-' + i, label: 'Launch', onPress: async () => { await $.ui.close({ id: ROSTERS }); await launchRoster($, r.agents, r.name) } }),
              Button({ key: 'rd-' + i, label: 'Delete', plain: true, onPress: () => deleteRoster($, r.name) }),
            ],
          }),
          Box({
            flexDirection: 'row',
            columnGap: 1,
            children: [
              Text({ dimColor: true, children: ['  '] }),
              ...r.agents.slice(0, 8).map((x, j) => Text({ key: 'dot-' + j, color: x.color, children: ['● ' + x.name] })),
              Text({ dimColor: true, wrap: 'truncate-end', children: [(r.agents.length > 8 ? '+' + (r.agents.length - 8) + ' · ' : '') + when + (r.cwd ? ' · from ' + baseName(String(r.cwd).replace(/[\\/]+$/, '')) : '')] }),
            ],
          }),
        ],
      }),
    )
  }
  rows.push(Button({ key: 'r-close', label: 'c: Close', hotkey: 'c', plain: true, onPress: () => $.ui.close({ id: ROSTERS }) }))
  return Box({ flexDirection: 'column', children: rows })
}

async function renderDetail($, e, key) {
  const { Box, Text, Button, Input, Markdown } = $.ui.resolve(e)
  const a = agents[key]
  if (!a) {
    return Box({ flexDirection: 'column', children: [Text({ dimColor: true, children: ['This agent is no longer in the swarm.'] }), Button({ key: 'close', label: 'Close', onPress: () => $.ui.close({ id: e.requestId }) })] })
  }
  const sv = statusView(a)
  const t = a.tokens || emptyTokens()
  const parts = []
  parts.push(
    Box({
      flexDirection: 'row',
      columnGap: 1,
      children: [
        Text({ color: a.color, children: ['●'] }),
        Text({ bold: true, color: a.color, children: [a.name] }),
        Text({ dimColor: true, children: ['· ' + (a.transport === 'session' ? 'separate session' : a.teammateId ? 'teammate ' + a.teammateId : 'teammate')] }),
      ],
    }),
  )
  parts.push(Text({ dimColor: true, wrap: 'truncate-end', children: [a.agentType + ' · ' + labelOf(MODELS, a.model) + (a.resolvedModel ? ' (' + a.resolvedModel + ')' : '') + ' · effort ' + a.effort + ' · ' + labelOf(APPROVALS, a.approval) + ' · ' + colorName(a.color)] }))
  parts.push(Text({ color: sv.color, bold: !!sv.bold, children: [sv.glyph + ' ' + sv.word + (a.activity ? ' · ' + a.activity : '')] }))
  parts.push(Text({ children: ['tokens ' + fmtTokens(totalTokens(t)) + '  (in ' + fmtTokens(t.input) + ' · out ' + fmtTokens(t.output) + ' · cache read ' + fmtTokens(t.cacheRead) + ' · cache write ' + fmtTokens(t.cacheWrite) + ')  ctx ' + fmtTokens(a.ctx) + ' · ' + (a.turns || 0) + ' turns'] }))
  if (a.status === 'failed' && a.error) {
    parts.push(
      Box({
        key: 'error',
        flexDirection: 'column',
        borderStyle: 'round',
        paddingX: 1,
        children: [
          Text({ bold: true, color: '#ff5555', children: ['✕ Error'] }),
          Text({ children: [a.error.length > 4000 ? a.error.slice(0, 4000) + '…' : a.error] }),
          Button({ key: 'copy-error', label: 'o: Copy error', hotkey: 'o', plain: true, onPress: (press) => copyError($, key, press) }),
        ],
      }),
    )
  }
  for (const c of conflicts.filter((c) => c.keys.includes(key))) {
    parts.push(Text({ color: '#e5c07b', children: ['▲ also edited by ' + c.keys.filter((k) => k !== key).map((k) => (agents[k] ? agents[k].name : k)).join(', ') + ': ' + c.path] }))
  }

  const p = a.pending
  if (p && p.kind === 'approval') {
    parts.push(
      Box({
        key: 'approval',
        flexDirection: 'column',
        borderStyle: 'round',
        paddingX: 1,
        children: [
          Text({ bold: true, color: '#ff5555', children: ['! ' + a.name + ' wants to use ' + p.tool] }),
          ...(p.reason ? [Text({ dimColor: true, children: [p.reason] })] : []),
          Text({ children: [clip(p.detail || p.summary, 1500)] }),
          Box({
            flexDirection: 'row',
            columnGap: 2,
            children: [
              Button({ key: 'ap-allow', label: 'y: Approve', hotkey: 'y', onPress: () => resolvePending($, key, { decision: 'allow' }) }),
              Button({ key: 'ap-deny', label: 'd: Deny', hotkey: 'd', onPress: () => resolvePending($, key, { decision: 'deny' }) }),
              Button({ key: 'ap-native', label: 'l: Use its own prompt', hotkey: 'l', onPress: () => resolvePending($, key, { decision: 'native' }) }),
            ],
          }),
        ],
      }),
    )
  } else if (p && p.kind === 'question') {
    const answers = qDraft[p.reqId] || (qDraft[p.reqId] = {})
    const qs = p.questions || []
    const qBlocks = qs.map((q, qi) =>
      Box({
        key: 'q-' + qi,
        flexDirection: 'column',
        children: [
          Text({ bold: true, children: [(q.header ? '[' + q.header + '] ' : '') + q.question] }),
          ...(q.options || []).map((o, oi) => {
            const chosen = String(answers[q.question] || '').split(', ').includes(o.label)
            return Button({
              key: 'q-' + qi + '-' + oi,
              label: (chosen ? '✓ ' : '  ') + o.label + (o.description ? ' - ' + clip(o.description, 60) : ''),
              plain: true,
              onPress: () => {
                if (q.multiSelect) {
                  const cur = String(answers[q.question] || '').split(', ').filter(Boolean)
                  answers[q.question] = (cur.includes(o.label) ? cur.filter((x) => x !== o.label) : [...cur, o.label]).join(', ')
                } else {
                  answers[q.question] = o.label
                }
                $.ui.invalidate('ui.render')
              },
            })
          }),
          Input({ key: 'q-' + qi + '-other', label: 'Other', placeholder: 'type your own answer', value: '', onSubmit: (v) => { if (String(v).trim()) { answers[q.question] = String(v).trim(); $.ui.invalidate('ui.render') } } }),
        ],
      }),
    )
    const ready = qs.every((q) => answers[q.question])
    parts.push(
      Box({
        key: 'question',
        flexDirection: 'column',
        borderStyle: 'round',
        paddingX: 1,
        children: [
          Text({ bold: true, color: '#ff79c6', children: ['? ' + a.name + ' is asking'] }),
          ...qBlocks,
          Box({
            flexDirection: 'row',
            columnGap: 2,
            children: [
              Button({ key: 'q-send', label: ready ? 'Send answers' : 'Answer every question first', dimColor: !ready, onPress: () => (ready ? resolvePending($, key, { answers: { ...answers } }) : undefined) }),
              Button({ key: 'q-native', label: 'Use its own prompt', plain: true, onPress: () => resolvePending($, key, { decision: 'native' }) }),
            ],
          }),
        ],
      }),
    )
  }

  // Recent activity, and the conversation when this process can read it
  const recent = (a.log || []).slice(expanded[key] ? -20 : -8)
  if (recent.length) {
    parts.push(Text({ bold: true, children: ['Recent'] }))
    for (const [i, l] of recent.entries()) parts.push(Text({ key: 'log-' + i, dimColor: true, wrap: 'truncate-end', children: ['  ' + l.text] }))
  }
  if (a.transport === 'teammate' && a.agentId && expanded[key]) {
    try {
      const msgs = await $.session.messages({ agentId: a.agentId })
      if (Array.isArray(msgs) && msgs.length) {
        parts.push(Text({ bold: true, children: ['Conversation'] }))
        for (const [i, m] of msgs.slice(-8).entries()) {
          const tools = (m.toolUses || []).map((u) => summarizeTool(u.tool, u.input)).join('; ')
          const line = (m.role === 'assistant' ? a.name : 'in') + ': ' + clip(m.text || tools || '(tool results)', 300)
          parts.push(Text({ key: 'msg-' + i, color: m.role === 'assistant' ? a.color : undefined, dimColor: m.role !== 'assistant', children: [line] }))
        }
      }
    } catch {}
  }
  if (a.lastAnswer) {
    parts.push(Text({ bold: true, children: ['Last answer'] }))
    parts.push(Markdown({ key: 'answer', text: clip(a.lastAnswer, expanded[key] ? 6000 : 1200) }))
  }

  parts.push(
    Input({
      key: 'msg',
      label: 'Message',
      placeholder: 'send ' + a.name + ' a message',
      value: '',
      submitLabel: 'send',
      onSubmit: (v) => sendTo($, key, v),
    }),
  )
  const actions = []
  const live = isLive(a) || !!a.restartAt
  if (a.transport === 'session' && isLive(a)) {
    actions.push(Button({ key: 'focus', label: 'w: Open its window', hotkey: 'w', onPress: () => focusWindow($, key) }))
    actions.push(Button({ key: 'interrupt', label: 'i: Interrupt', hotkey: 'i', onPress: () => stopAgent($, key) }))
  }
  if (live) actions.push(Button({ key: 'kill', label: 'k: Kill', hotkey: 'k', onPress: () => killAgent($, key) }))