subagent-monitor

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    if (opts.band === false || e.props.hasSurvey) return next(e)
    const rows = await read($, agents)
    const live = rows.filter(isRunning)
    if (live.length === 0) return next(e)
    const { Box, Text, Button } = $.ui.resolve(e)
    const done = rows.length - live.length
    const newest = newestFirst(live)[0]
    // One line in; the band wraps it and cuts it with … past its lines.
    const doing = lineOf(newest?.lastTool ? `${newest.type}: ${newest.lastTool}` : (newest?.description ?? ''), 400)
    const count = `${plural(live.length, 'subagent')} running`
    const below = await next(e)
    const row: BandRow = {
      key: 'subagent-monitor-running',
      tone: 'active',
      icon: GEAR,
      ...(doing === '' ? { text: count } : { title: count, text: doing }),
      ...(done > 0 ? { note: `${done} done` } : {}),
      actions: [{ key: 'subagent-monitor-view', label: 'View', isQuiet: true, onPress: () => void openPane($) }],
    }
    return band({ Box, Text, Button } as unknown as BandMake, [row], e.props.bodyColumns, below, e.surface === 'terminal' ? glyphMode : 'full')
  })

export function band(make: BandMake, rows: readonly BandRow[], columns: number, below?: RenderElement | null, glyphs: BandGlyphs = 'full'): RenderElement {
  const drawn = rows.map(r => bandRow(make, r, columns, glyphs))
  return make.Box({ flexDirection: 'column', children: isNothing(below) ? drawn : [...drawn, below as RenderElement] })
}

export function bandRow(make: BandMake, row: BandRow, columns: number, glyphs: BandGlyphs = 'full'): RenderElement {
  const tone = TONES[row.tone]
  const mark = glyphs === 'full' && row.icon ? row.icon[0] : tone.glyph
  const actions = row.actions ?? []
  const buttons = actions.reduce((n, a) => n + buttonWidth(a) + 1, 0)
  // a full icon (an emoji, say) may take two cells
  const markWidth = glyphs === 'full' && row.icon ? 3 : 2
  const head = row.title ? row.title.length + 3 : 0
  const tail = row.note ? row.note.length + 3 : 0
  const isStacked = actions.length > 0 && columns - markWidth - buttons - head - tail < 24
  const lines = Math.max(1, row.maxLines ?? 2)
  // the first line shares its width with the glyph, the title, the note and (beside it) the buttons; the others have it all
  const firstLine = Math.max(10, columns - markWidth - (isStacked ? 0 : buttons) - head - tail)
  const room = firstLine + (lines - 1) * Math.max(10, columns - markWidth)
  const children: RenderElement[] = []
  if (row.title) children.push(make.Text({ bold: true, children: [row.title] }), make.Text({ dimColor: true, children: [' · '] }))
  children.push(make.Text({ children: [clipText(row.text, room)] }))
  if (row.note) children.push(make.Text({ dimColor: true, children: [` · ${row.note}`] }))
  const glyph = make.Text({ color: tone.color, bold: true, children: [mark] })
  const text = make.Box({ flexShrink: 1, flexGrow: 1, children: [make.Text({ wrap: 'wrap', children })] })
  const drawn = actions.map(a =>
    make.Button({
      key: a.key,
      label: a.label,
      ...(a.hotkey ? { hotkey: a.hotkey } : {}),
      ...(a.isPrimary ? { variant: 'primary' } : {}),
      ...(a.isQuiet ? { dimColor: true } : {}),
      ...(a.isDismiss ? { role: 'dismiss' } : {}),
      onPress: a.onPress,
    }),
  )
  if (!isStacked) return make.Box({ key: row.key, flexDirection: 'row', columnGap: 1, children: [glyph, text, ...drawn] })
  return make.Box({
    key: row.key,
    flexDirection: 'column',
    children: [
      make.Box({ flexDirection: 'row', columnGap: 1, children: [glyph, text] }),
      make.Box({ flexDirection: 'row', flexWrap: 'wrap', columnGap: 1, paddingLeft: 2, children: drawn }),
    ],
  })
}

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const { Box, Text, Button, Markdown } = $.ui.resolve(e)
    const rows = await read($, agents)
    const open = await read($, expanded)
    const now = await $.clock.now()
    const mode = e.surface === 'terminal' ? glyphMode : 'full'
    const cols = Math.max(30, e.props.bodyColumns)
    const live = rows.filter(isRunning).length
    const done = rows.length - live
    const tokens = rows.reduce((s, r) => s + r.promptTokens + r.outputTokens, 0)
    const tools = rows.reduce((s, r) => s + r.tools, 0)
    const sorted = newestFirst(rows)

    const close = <Button key="close" hotkey="x" role="dismiss" label="Close" onPress={() => void $.ui.close({ id: PANE })} />

    if (rows.length === 0) {
      return (
        <Box flexDirection="column">
          <Text bold>Subagents</Text>
          <Text dimColor wrap="wrap">
            No subagents yet this session. They appear here as soon as one starts.
          </Text>
          <Box marginTop={1}>{close}</Box>
        </Box>
      )
    }

    return (
      <Box flexDirection="column" gap={1}>
        <Box flexDirection="column">
          <Text bold>Subagents</Text>
          <Text wrap="wrap">
            {live > 0 ? <Text color="cyan">{`${live} running`}</Text> : <Text dimColor>0 running</Text>}
            <Text dimColor>{` · ${done} done · ${fmtTokens(tokens)} tokens · ${plural(tools, 'tool call')}`}</Text>
          </Text>
        </Box>
        {sorted.map(row => {
          const { glyph, color } = glyphOf(row.status, mode)
          const elapsed = isRunning(row) ? now - row.startedAt : (row.durationMs ?? (row.endedAt ?? now) - row.startedAt)
          const isOpen = open.includes(row.id)
          const stats = [
            shortModel(row.model),
            plural(row.steps, 'step'),
            `${fmtTokens(row.promptTokens + row.outputTokens)} tokens`,
            plural(row.tools, 'tool'),
          ].join(' · ')
          return (
            <Box key={row.id} flexDirection="column">
              <Box>
                <Box flexGrow={1}>
                  <Text wrap="truncate-end">
                    <Text color={color}>{`${glyph} `}</Text>
                    <Text bold>{row.type}</Text>
                    {row.description !== '' ? <Text>{` ${lineOf(row.description, cols)}`}</Text> : ''}
                  </Text>
                </Box>
                <Text dimColor>{` ${fmtElapsed(elapsed)}`}</Text>
              </Box>
              <Text dimColor wrap="truncate-end">{`  ${stats}`}</Text>
              {row.lastTool !== null && (
                <Text dimColor wrap="truncate-end">{`  ${isRunning(row) ? (mode === 'full' ? ARROW[0] : ARROW[1]) : 'last'} ${row.lastTool}`}</Text>
              )}
              {row.answer !== null && (
                <Box>
                  <Button key={`answer:${row.id}`} label={isOpen ? 'Hide answer' : 'Answer'} dimColor={!isOpen} onPress={() => void toggleAnswer($, row.id)} />
                </Box>
              )}
              {row.answer !== null && isOpen && <Markdown key={`md:${row.id}`} text={row.answer === '' ? '_(no text)_' : row.answer} />}
            </Box>
          )
        })}
        <Box gap={1}>
          {done > 0 && <Button key="clear" hotkey="c" label="Clear finished" onPress={() => void clearFinished($)} />}
          {close}
        </Box>
      </Box>
    )
  })