fleet-pane

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const table = $.ui.resolve(e)
    const { Box, Text, Button } = table
    const width = Math.max(40, e.props.bodyColumns)
    const snapshot = await read($, view)
    const codexRows = await read($, codex)
    const failure = await read($, problem)
    const replying = await read($, replyTo)
    const outcome = await read($, notice)
    const me = await read($, self)

    if (snapshot === null) {
      return (
        <Box flexDirection="column">
          <Text color={failure === null ? undefined : 'red'} wrap="truncate-end">
            {failure ?? 'Reading the fleet…'}
          </Text>
        </Box>
      )
    }

    const groups = groupSessions(snapshot.sessions)
    const waitingOnYou = groups.waiting.filter(one => one.sessionId !== me).length
    const first = groups.waiting.find(one => one.sessionId !== me)
    const textWidth = width - ACTIONS_WIDTH

    const row = (session: FleetPaneSession) => {
      const isSelf = session.sessionId === me
      const isDead = session.state === 'dead'
      const isFirst = first !== undefined && session.sessionId === first.sessionId
      const target = session
      return (
        <Box key={`row:${session.sessionId}`} flexDirection="column">
          <Box flexDirection="row">
            <Box width={textWidth}>
              <Text wrap="truncate-end" dimColor={isSelf}>
                {sessionLine(session, isSelf, textWidth)}
              </Text>
            </Box>
            <Box flexDirection="row" gap={2}>
              {!isSelf && !isDead && (
                <Button
                  key={`reply:${session.sessionId}`}
                  label="reply"
                  plain
                  dimColor={!isFirst}
                  {...(isFirst ? { hotkey: 'y' } : {})}
                  onPress={() => {
                    void openReply($, target.sessionId)
                  }}
                />
              )}
              <Button
                key={`copy:${session.sessionId}`}
                label="copy"
                plain
                dimColor={!isFirst}
                {...(isFirst ? { hotkey: 'c' } : {})}
                onPress={press => {
                  void copyResume($, target, press.surface)
                }}
              />
            </Box>
          </Box>
          {replying === session.sessionId && 'Input' in table && (
            <Box flexDirection="column" paddingLeft={2}>
              <table.Input
                key="reply-text"
                label={`reply to ${displayName(session)}: `}
                placeholder="type, Enter sends · Esc returns"
                submitLabel="send"
                autoFocus
                onSubmit={value => {
                  void sendReply($, target, value)
                }}
              />
              <Text dimColor wrap="truncate-end">
                {session.state === 'busy'
                  ? 'it is busy: the reply lands inside its running turn'
                  : 'the reply arrives as a message from the fleet mod'}
              </Text>
              <Button
                key="reply-cancel"
                label="cancel"
                plain
                dimColor
                onPress={() => {
                  void update($, replyTo, () => null)
                }}
              />
            </Box>
          )}
          {replying === session.sessionId && !('Input' in table) && (
            <Text dimColor wrap="truncate-end">
              this surface has no text field: reply from the terminal or desktop
            </Text>
          )}
        </Box>
      )
    }

    const idleParts = [`idle · ${groups.idle.length}`]
    if (snapshot.counts.shell > 0) {
      idleParts.push(`${snapshot.counts.shell} at a shell`)
    }
    if (snapshot.counts.ended + snapshot.counts.unknown > 0) {
      idleParts.push(`${snapshot.counts.ended + snapshot.counts.unknown} ended or unknown`)
    }

    return (
      <Box flexDirection="column">
        <Box flexDirection="row">
          <Box width={width - HEADER_ACTIONS_WIDTH}>
            <Text bold wrap="truncate-end">
              {`Fleet · ${snapshot.counts.total} sessions · ${waitingOnYou} waiting on you`}
            </Text>
          </Box>
          <Box flexDirection="row" gap={2}>
            <Button
              key="refresh"
              label="refresh"
              plain
              hotkey="r"
              onPress={() => {
                void refresh($, true)
              }}
            />
            <Button
              key="close"
              label="close"
              plain
              role="dismiss"
              hotkey="x"
              onPress={() => {
                void closePane($)
              }}
            />
          </Box>
        </Box>
        {failure !== null && (
          <Text color="red" wrap="truncate-end">
            {failure}
          </Text>
        )}
        {outcome !== null && (
          <Text dimColor wrap="truncate-end">
            {outcome}
          </Text>
        )}
        <Text dimColor>{rule(`waiting on you · ${groups.waiting.length}`, width)}</Text>
        {groups.waiting.length === 0 && <Text dimColor>  nobody is waiting on you</Text>}
        {groups.waiting.map(row)}
        {groups.dead.length > 0 && <Text dimColor>{rule(`died while busy · ${groups.dead.length}`, width)}</Text>}
        {groups.dead.map(row)}
        <Text dimColor>{rule(`working · ${groups.working.length}`, width)}</Text>
        {groups.working.map(row)}
        <Text dimColor>{rule(idleParts.join(' · '), width)}</Text>
        {codexRows.length > 0 && <Text dimColor>{rule(`codex (read-only) · ${codexRows.length}`, width)}</Text>}
        {codexRows.map(one => (
          <Text dimColor wrap="truncate-end">