fleet

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const { Box, Text, Button, Link } = $.ui.resolve(e)
    const v = await read($, view)
    const shown = await read($, open)
    const width = Math.max(40, e.props.bodyColumns)
    const viewing = e.props.view?.agentId
    const toggle = (key: string, byDefault = false) => () =>
      update($, open, m => ({ ...m, [key]: !(m[key] ?? byDefault) }))

    if (!v) return <Text dimColor>Reading this session's agents…</Text>

    const agentLine = (a: FleetAgent, indent: number) => {
      const mark = MARKS[a.status] ?? { glyph: '·' }
      const when = isActive(a.status)
        ? a.startedAt
          ? `running ${age(v.now - a.startedAt)}`
          : 'running'
        : a.endedAt
          ? `${a.status} ${age(v.now - a.endedAt)} ago`
          : a.status
      const onScreen = a.id === viewing
      return (
        <Box key={`a-${a.id}`} flexDirection="column" paddingLeft={indent}>
          <Box gap={1}>
            <Text {...tint(mark.color)}>{mark.glyph}</Text>
            <Box flexShrink={1}>
              <Text bold={onScreen} wrap="truncate-end">
                {a.description || a.type}
              </Text>
            </Box>
            <Box flexShrink={0}>
              <Text dimColor>{`${a.type} · ${when}${onScreen ? ' · on screen' : ''}`}</Text>
            </Box>
          </Box>
          {!!a.doing && (
            <Box paddingLeft={2}>
              <Text dimColor wrap="truncate-end">{`↳ ${a.doing} · ${age(v.now - (a.doingAt ?? v.now))} ago`}</Text>
            </Box>
          )}
        </Box>
      )
    }

    const folded = (key: string, label: string, indent: number, agents: FleetAgent[]) => {
      const isOpen = shown[key] === true
      const running = agents.filter(a => isActive(a.status)).length
      return (
        <Box key={`f-${key}`} flexDirection="column">
          <Box paddingLeft={indent}>
            <Button
              key={key}
              plain
              dimColor
              label={`${isOpen ? '▾' : '▸'} ${label}${running ? ` · ${running} running` : ''}`}
              onPress={toggle(key)}
            />
          </Box>
          {isOpen && agents.map(a => agentLine(a, indent + 2 * a.depth))}
        </Box>
      )
    }

    const ticketBlock = (t: FleetTicket) => {
      const tone = toneOf(t.status)
      const key = `fold-${t.id}`
      // a completed ticket starts folded, unless an agent under it still runs
      const byDefault = !t.isDone || t.running > 0
      const isOpen = shown[key] ?? byDefault
      return (
        <Box key={`t-${t.id}`} flexDirection="column" paddingLeft={2}>
          <Box gap={1}>
            <Button key={key} plain dimColor label={isOpen ? '▾' : '▸'} onPress={toggle(key, byDefault)} />
            <Text {...tint(tone.color)}>{tone.glyph}</Text>
            <Box flexShrink={0}>{t.url ? <Link href={t.url} label={t.id} /> : <Text bold>{t.id}</Text>}</Box>
            <Box flexShrink={0}>
              <Text {...tint(tone.color)}>{t.isDone ? 'Complete' : t.status}</Text>
            </Box>
            <Box flexShrink={1}>
              <Text wrap="truncate-end">{t.title}</Text>
            </Box>
            {!isOpen && (
              <Box flexShrink={0}>
                <Text dimColor>{plural(t.leads.length + t.subs.length, 'agent')}</Text>
              </Box>
            )}
          </Box>
          {isOpen && t.leads.map(a => agentLine(a, 2))}
          {isOpen && t.subs.length > 0 && folded(`sub-${t.id}`, plural(t.subs.length, 'sub-agent'), 2, t.subs)}
        </Box>
      )
    }

    const epicBlock = (ep: FleetEpic) => {
      const pct = ep.total ? Math.round((100 * ep.done) / ep.total) : 0
      const bar = Math.max(10, Math.min(24, width - 40))
      const filled = Math.round((bar * pct) / 100)
      return (
        <Box key={`e-${ep.key}`} flexDirection="column" marginTop={1}>
          <Box gap={1}>
            <Box flexShrink={0}>
              <Link href={ep.url} label={ep.id} />
            </Box>
            <Box flexShrink={1}>
              <Text bold wrap="truncate-end">
                {ep.title}
              </Text>
            </Box>
          </Box>
          <Box gap={1}>
            <Box flexShrink={0}>
              {filled > 0 && <Text color="green">{'█'.repeat(filled)}</Text>}
              {filled < bar && <Text dimColor>{'░'.repeat(bar - filled)}</Text>}
            </Box>
            <Box flexShrink={0}>
              <Text bold>{`${pct}%`}</Text>
            </Box>
            <Box flexShrink={1}>
              <Text dimColor wrap="truncate-end">
                {`${ep.done} of ${ep.total} done${ep.running ? ` · ${plural(ep.running, 'agent')} running` : ''}`}
              </Text>
            </Box>
          </Box>
          {ep.tickets.map(ticketBlock)}
          {ep.own.length > 0 &&
            folded(`own-${ep.key}`, `${plural(ep.own.length, 'agent')} on the epic itself`, 2, ep.own)}
          {ep.waiting.length > 0 && (
            <Box paddingLeft={2}>
              <Text dimColor wrap="wrap">
                {`No agent yet: ${ep.waiting.map(w => `${w.id} (${w.status})`).join(', ')}`}
              </Text>
            </Box>
          )}
        </Box>
      )
    }

    const nothing = v.epics.length === 0 && v.loose.length === 0 && v.other.length === 0
    return (
      <Box flexDirection="column">
        <Box gap={1} justifyContent="space-between">
          <Text bold>{`${plural(v.running, 'agent')} running`}</Text>
          <Button key="refresh" label="Refresh" onPress={() => void refreshAll()} />
        </Box>
        {settings.missing ? (
          <Text wrap="wrap">{settings.missing}</Text>
        ) : (
          <Text dimColor>{v.boardAt ? `Boards read ${age(v.now - v.boardAt)} ago` : 'Reading the boards…'}</Text>
        )}
        {settings.problems.map((problem, i) => (
          <Text key={`problem-${i}`} color="yellow" wrap="wrap">
            {problem}
          </Text>
        ))}
        {!!v.error && (
          <Text color="red" wrap="wrap">
            {`GitHub: ${v.error}`}
          </Text>
        )}
        {nothing && (
          <Text dimColor wrap="wrap">