activity

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    const below = await next(e)
    const rows = await read($, crew)
    const f = await read($, flow)
    const p = await read($, panel)

    if (e.props.hasSurvey || !isBandShown(rows, f, p.dismissedFor === bandKey(f))) {
      return below
    }

    return renderBand($.ui.resolve(e), {
      rows,
      flow: f,
      below,
      onOpen: () => void togglePane($).catch(() => {}),
      onDismiss: () => {
        void (async () => {
          const current = await read($, flow)
          await update($, panel, prev => ({ ...prev, dismissedFor: bandKey(current) }))
        })().catch(() => {})
      },
    })
  })

export function renderBand(ui: ElementTable, d: BandData) {
  const { Box, Text, Button } = ui
  const t = totals(d.rows)
  const running = d.rows.filter(r => r.id !== 'main' && r.status === 'running').length
  const label = d.flow ? flowLabel(d.flow) : ''

  return (
    <Box flexDirection="column">
      {d.below}
      <Box flexDirection="row" gap={2}>
        <Text color={running > 0 ? ACCENT : DONE}>●</Text>
        <Text bold wrap="truncate-end">
          {d.flow?.title || 'agents'}
        </Text>
        {label !== '' && <Text>{label}</Text>}
        <Text dimColor>{`${running} running · ${short(t.tokens)} tok · est. ${usd(t.costUsd)}`}</Text>
        <Button key="crew" label={`×${d.rows.filter(r => r.id !== 'main').length}`} plain onPress={d.onOpen} />
        <Button key="dismiss" label="✕" plain role="dismiss" onPress={d.onDismiss} />
      </Box>
    </Box>
  )
}

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const rows = await read($, crew)
    const f = await read($, flow)
    const p = await read($, panel)
    const at = await read($, now)
    const usage = await $.session.usage().catch(() => null)

    return renderPane($.ui.resolve(e), {
      rows,
      flow: f,
      panel: p,
      at,
      sessionUsd: usage?.cost?.usd,
      columns: e.props.bodyColumns,
      surface: e.surface,
      onToggleDone: () => void update($, panel, prev => ({ ...prev, isDoneCollapsed: !prev.isDoneCollapsed })).catch(() => {}),
    })
  })

export function renderPane(ui: ElementTable, d: PaneData) {
  const { Box, Text, Button } = ui
  const hasSvg = d.surface !== 'terminal' && (ui as any).Svg !== undefined
  const row = (r: Row) => (hasSvg ? desktopRow(ui, r, d) : terminalRow(ui, r, d))

  const main = d.rows.find(r => r.id === 'main')
  const agents = d.rows.filter(r => r.id !== 'main')
  const running = agents.filter(r => r.status === 'running')
  const finished = agents.filter(r => r.status !== 'running')
  const failedCount = finished.filter(r => r.status === 'failed').length
  const shownFinished = finished.slice(-MAX_FINISHED)
  const planned = d.flow ? plannedOf(d.flow, d.rows) : []
  const t = totals(d.rows)
  const session = d.sessionUsd !== undefined ? ` · session ${usd(d.sessionUsd)}` : ''

  return (
    <Box flexDirection="column">
      <Text bold>{`Crew · ${t.running} running · ${short(t.tokens)} tok · est. ${usd(t.costUsd)}${session}`}</Text>
      {d.flow ? <Text dimColor>{`${d.flow.title}${flowLabel(d.flow) ? ' · ' + flowLabel(d.flow) : ''}`}</Text> : null}
      <Box marginTop={1} flexDirection="column">
        {main ? row(main) : null}
        {agents.length === 0 ? <Text dimColor>No subagents yet</Text> : null}
        {running.length > 0 ? <Text dimColor>{`Running · ${running.length}`}</Text> : null}
        {running.map(row)}
        {finished.length > 0 ? (
          <Button
            key="toggle-done"
            plain
            label={`${d.panel.isDoneCollapsed ? '▸' : '▾'} Finished · ${finished.length}${failedCount > 0 ? ` · ${failedCount} failed` : ''}`}
            onPress={d.onToggleDone}
          />
        ) : null}
        {!d.panel.isDoneCollapsed && finished.length > shownFinished.length ? (
          <Text dimColor>{`+${finished.length - shownFinished.length} older`}</Text>
        ) : null}
        {!d.panel.isDoneCollapsed && shownFinished.map(row)}
        {planned.length > 0 ? <Text dimColor>{`Planned · ${planned.length}`}</Text> : null}
        {planned.map(p => (
          <Box key={`plan-${p.n}`} flexDirection="column" marginBottom={1}>
            <Text dimColor wrap="truncate-end">{`▢ ${p.n}. ${p.title} ◷`}</Text>
            <Text dimColor wrap="truncate-end">{`  ${p.lane}${p.after.length ? ' · after ' + p.after.join(', ') : ''}`}</Text>
          </Box>
        ))}
      </Box>
    </Box>
  )
}