fleet

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const { Box, Button, Client, Text } = $.ui.resolve(e)
    const s = await read($, snapshot)
    if (!s) return <Text dimColor>Reading the board…</Text>
    const waiting = s.agents.filter(a => a.awaiting_go && a.presence === 'waiting')
    // The fleet tab, live: fleet draws it, the Client shows it and takes its
    // keys. Beneath it, while a worker waits, the go the tab gives by keys.
    // The rows the pane shows, not the terminal's: the prompt and the
    // status take the bottom of the screen.
    const shown = e.props.scroll?.bodyRows ?? (e.viewport?.rows ?? 30) - 8
    const rows = Math.max(10, shown - (waiting.length > 0 ? 1 : 0))
    return (
      <Box flexDirection="column" width={Math.max(40, e.props.bodyColumns ?? 80)}>
        <Client key="fleet-view" module="./view.tsx" props={{ lines: frame }} width="100%" height={rows} />
        {waiting.length > 0 && (
          <Box flexDirection="row" gap={1}>
            <Text>  Waiting for a go:</Text>
            {waiting.map(a => (
              <Button key={`go-${a.name}`} label={`go ${a.awaiting_go}`} onPress={() => give($, a.awaiting_go ?? '')} />
            ))}
          </Box>
        )}
      </Box>
    )
  })

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    if (isWorker || e.props.hasSurvey) return next(e)
    const s = await read($, snapshot)
    const crew = s?.agents.filter(a => a.role === 'worker') ?? []
    if (!s || crew.length === 0) return next(e)
    const { Box, Text } = $.ui.resolve(e)
    const want = needs(s)
    const working = crew.filter(a => a.presence === 'working').length
    const idle = crew.filter(a => a.presence === 'waiting').length
    const open = s.tasks.length

    // A card: the fleet's numbers, and under them, only when there is any,
    // what needs the user. The border turns yellow with it. As wide as the
    // band, not its text.
    return (
      <Box flexDirection="column" borderStyle="round" borderColor={want.length > 0 ? 'yellow' : 'gray'} paddingX={1} width={e.props.bodyColumns}>
        <Box flexDirection="row" columnGap={3}>
          <Text bold>fleet</Text>
          <Text>{`${crew.length} agent${crew.length === 1 ? '' : 's'}`}</Text>
          <Text><Text color="green">●</Text>{` ${working} working`}</Text>
          <Text><Text dimColor>○</Text>{` ${idle} idle`}</Text>
          <Text>{`${open} open`}</Text>
          <Text dimColor>/fleet</Text>
        </Box>
        {want.length > 0 && (
          <Box flexDirection="row" flexWrap="wrap" columnGap={3}>
            {want.map(w => <Text color="yellow">{`▲ ${w}`}</Text>)}
          </Box>
        )}
      </Box>
    )
  })