board-pane

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const ui = $.ui.resolve(e)
    const { Box, Text, Button } = ui
    // Not every surface draws an Input; where it is missing the filter is skipped.
    const Input = 'Input' in ui ? ui.Input : undefined
    const board = await read($, state)
    const { repos, filter, isExpanded, isFallback, errorLines, refreshedAt, next } = board
    const isWide = e.props.bodyColumns >= WIDE_COLUMNS
    // The hotkey label and a tone bullet take about 6 cells; the rest is the row.
    const room = Math.max(12, e.props.bodyColumns - 6)
    const open = repos.find(repo => repo.name === board.repo)
    const back = () => update($, state, prev => ({ ...prev, repo: undefined, filter: '', isExpanded: false }))
    const setFilter = (value: string) => update($, state, prev => ({ ...prev, filter: value }))

    const controls = (
      <Box flexDirection="row">
        {open && !isFallback && <Button key="back" label="‹ back" hotkey="b" onPress={back} />}
        <Button key="refresh" label="Refresh" hotkey="r" onPress={() => refresh($)} />
        <Button key="close" label="Close" hotkey="q" role="dismiss" onPress={() => $.ui.close({ id: PANE })} />
      </Box>
    )
    const filterInput = Input && (
      <Input key="filter" placeholder="filter repos, IDs, titles" value={filter} onInput={setFilter} onSubmit={setFilter} />
    )
    const notes = (
      <Box flexDirection="column">
        {isFallback && <Text dimColor>no registry: set BOARD_REGISTRY for the cross-repo view</Text>}
        {errorLines.map(line => (
          <Text dimColor wrap="truncate-end">
            {line}
          </Text>
        ))}
      </Box>
    )
    const stamp = refreshedAt ? ` · ${refreshedAt}` : ''

    if (open) {
      const flying = filterItems(inFlightItems(open), filter)
      const queued = filterItems(queuedItems(open), filter)
      const shown = isExpanded ? queued : queued.slice(0, QUEUED_SHOWN)
      let itemNo = 0
      const row = (item: BoardRepo['items'][number]) => {
        itemNo += 1
        const tone = itemTone(item.state)
        // Button has no color prop, so the state tone rides on a bullet beside it.
        // A press fills the prompt instead of submitting: a stray key must never start a turn.
        return (
          <Box flexDirection="row">
            {tone && <Text color={tone}>* </Text>}
            <Button
              key={`item-${itemNo}`}
              plain
              label={itemLabel(item, room, isWide)}
              hotkey={itemNo <= 9 ? String(itemNo) : undefined}
              onPress={() => $.prompt.fill({ text: promptFor(item, open) })}
            />
          </Box>
        )
      }
      return (
        <Box flexDirection="column">
          {controls}
          <Box key="repo-title" flexDirection="row">
            <Text bold>{open.name}</Text>
            {open.behind > 0 && <Text dimColor>{`   ↓${open.behind} behind upstream`}</Text>}
          </Box>
          {filterInput}
          {notes}
          {flying.length > 0 && <Text bold>{`IN FLIGHT ${flying.length}`}</Text>}
          {flying.map(row)}
          {queued.length > 0 && <Text bold>{`QUEUED ${queued.length}`}</Text>}
          {shown.map(row)}
          {!isExpanded && queued.length > shown.length && (
            <Button
              key="more"
              plain
              dimColor
              label={`+ ${queued.length - shown.length} more`}
              onPress={() => update($, state, prev => ({ ...prev, isExpanded: true }))}
            />
          )}
          <Text dimColor>{`press an item to put it in the prompt · Esc back${stamp}`}</Text>
        </Box>
      )
    }

    const sum = totals(repos)
    const overview = buildOverview(repos, filter)
    const nameWidth = Math.min(16, Math.max(0, ...repos.map(repo => repo.name.length)))
    const picks = rankNext(next, filter)
    // NEXT rows take the first hotkeys, then the repos, so 1 to 9 map to the visible rows in order.
    let repoNo = picks.length
    return (
      <Box flexDirection="column">
        {controls}
        <Box key="header" flexDirection="row">
          <Text bold>{`Board · ${sum.repos} repos · ${sum.active} in flight · ${sum.queued} queued`}</Text>
        </Box>
        {filterInput}
        {notes}
        {picks.length > 0 && (
          <Box key="next" flexDirection="column">
            <Text dimColor>NEXT</Text>
            {picks.map((pick, index) => (
              <Button
                key={`next-${index + 1}`}
                plain
                label={fit(nextLabel(pick), room)}
                hotkey={index < 9 ? String(index + 1) : undefined}
                onPress={() => $.prompt.fill({ text: nextPrompt(pick, repos) })}
              />
            ))}
          </Box>
        )}
        {overview.groups.map(group => (
          <Box key={`rail-${group.rail}`} flexDirection="column">
            <Text dimColor>{group.rail}</Text>
            {group.repos.map(repo => {
              repoNo += 1
              return (
                <Button
                  key={`repo-${repo.name}`}
                  plain
                  label={fit(repoLabel(repo, nameWidth, isWide), room)}
                  hotkey={repoNo <= 9 ? String(repoNo) : undefined}
                  onPress={() => update($, state, prev => ({ ...prev, repo: repo.name, filter: '', isExpanded: false }))}
                />
              )
            })}
          </Box>
        ))}
        {overview.idle.length > 0 && (
          <Box key="idle" flexDirection="row">
            <Text dimColor wrap="truncate-end">{`idle  ${overview.idle.join(' · ')}`}</Text>
          </Box>
        )}
        <Text dimColor>{`press a repo to open it · Esc back${stamp}`}</Text>
      </Box>
    )
  })

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    if (e.props.hasSurvey) return next(e)
    const { tasks, handoffs, worktrees, staleWorktrees: stale, prs } = await read($, summary)
    const { Box, Text, Button } = $.ui.resolve(e)
    // A press fills the prompt and never submits: the person reads it and presses Enter.
    const fill = (text: string) => () => $.prompt.fill({ text })
    const segments = []
    if (tasks) {
      segments.push(
        <Box key="seg-tasks" flexDirection="row">
          <Button key="band-tasks" plain dimColor label="tasks" hotkey="b" onPress={() => toggleBoard($)} />
          <Text color="cyan"> {tasks.queued}</Text>
          <Text dimColor>q </Text>
          <Text color={tasks.executing > 0 ? 'yellow' : undefined}>{tasks.executing}</Text>
          <Text dimColor>act</Text>
        </Box>,
      )
    }
    if (handoffs !== undefined) {
      segments.push(
        <Box key="seg-handoffs" flexDirection="row">
          <Text>{handoffs}</Text>
          <Button key="band-handoffs" plain dimColor label="ho" hotkey="h" onPress={fill(HANDOFF_PROMPT)} />
        </Box>,
      )
    }
    if (worktrees !== undefined) {
      segments.push(
        <Box key="seg-worktrees" flexDirection="row">
          <Text>{worktrees}</Text>
          <Button key="band-worktrees" plain dimColor label="wt" hotkey="w" onPress={fill(WORKTREE_PROMPT)} />
          {stale !== undefined && stale > 0 && <Text dimColor>{` (${stale} stale)`}</Text>}
        </Box>,
      )
    }
    if (prs !== undefined) {
      segments.push(
        <Box key="seg-prs" flexDirection="row">
          <Text>{prs}</Text>
          <Button key="band-prs" plain dimColor label="pr" hotkey="p" onPress={fill(PR_PROMPT)} />
        </Box>,
      )
    }
    if (segments.length === 0) return next(e)
    return (
      <Box flexDirection="row">
        {segments.flatMap((segment, index) => (index === 0 ? [segment] : [<Text dimColor>{' · '}</Text>, segment]))}
      </Box>
    )
  })