stack-traffic-control

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    const at = await read($, root)
    if (at === null || e.props.hasSurvey) return next(e)
    const stack = (await read($, stacks))[at]
    if (stack === undefined || stack.status !== 'stacked' || !onStack(stack)) return next(e)
    const index = stack.branches.findIndex(b => b.name === stack.branch)
    const behind = stack.branches.filter(b => b.needsRebase).length
    const { Box, Text } = $.ui.resolve(e)
    const mine = (
      <Box>
        <Text>🛫 stack {index + 1}/{stack.branches.length}</Text>
        <Text dimColor> · {stack.branch}</Text>
        {behind > 0
          ? <Text color="yellow"> · {behind} need{behind === 1 ? 's' : ''} rebase</Text>
          : <Text color="green"> · no rebase needed</Text>}
      </Box>
    )
    // The band is one instance shared by every mod: draw ours above whatever the others drew.
    const below = await next(e)
    return (
      <Box flexDirection="column">
        {mine}
        {below}
      </Box>
    )
  })

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const { Box, Text, Button } = $.ui.resolve(e)
    const at = await read($, root)
    const stack = at === null ? undefined : (await read($, stacks))[at]
    const shown = await read($, board)
    const busy = await read($, loading)
    const refreshButton = <Button key="refresh" label={busy ? 'refreshing…' : 'refresh'} onPress={() => refresh($)} />
    if (stack === undefined || stack.status !== 'stacked' || !onStack(stack)) {
      const why =
        stack?.status === 'unknown' ? `Couldn't read the stack: ${stack.reason}`
        : stack?.status === 'stacked' ? `\`${stack.branch || 'HEAD'}\` is not on a stack in this repo.`
        : 'This checkout is not on a gh stack.'
      return (
        <Box flexDirection="column">
          <Text dimColor>{busy && stack === undefined ? 'Looking for a stack…' : why}</Text>
          {stack?.status === 'unknown' ? null : <Text dimColor>Start one with `gh stack init`, or switch with `gh stack checkout`.</Text>}
          {refreshButton}
        </Box>
      )
    }
    // Details from another checkout (or none yet) are not shown against this stack.
    const rows = shown !== null && shown.root === stack.root ? shown.rows : {}
    const width = Math.max(10, Math.min(28, (e.props.bodyColumns ?? 60) - 34))
    const cut = (s: string) => (s.length > width ? `${s.slice(0, width - 1)}…` : s.padEnd(width))
    return (
      <Box flexDirection="column">
        <Text bold>DEPARTURES · trunk {stack.trunk}</Text>
        {[...stack.branches].reverse().map(b => {
          const d = rows[b.name]
          const isCurrent = b.name === stack.branch
          const status = b.isMerged ? 'landed' : b.isQueued ? 'queued' : b.needsRebase ? 'rebase' : 'ready'
          const color = b.isMerged ? 'gray' : b.needsRebase ? 'yellow' : 'green'
          const pr = d === undefined ? '…' : d.pr !== null ? `#${d.pr}` : '—'
          const ci = d?.checks === 'pass' ? '✓' : d?.checks === 'fail' ? '✗' : d?.checks === 'pending' ? '…' : ' '
          const push = d === undefined ? '' : d.published === false ? ' unpublished' : d.unpushed === null ? ' ?' : d.unpushed > 0 ? ` ↑${d.unpushed}` : ''
          const dirty = d?.dirty ? ' ✎' : ''
          return (
            <Box key={b.name}>
              <Text bold={isCurrent}>{isCurrent ? '▶ ' : '  '}{cut(b.name)} </Text>
              <Text dimColor>{pr.padEnd(6)} </Text>
              <Text color={d?.checks === 'fail' ? 'red' : undefined}>{ci} </Text>
              <Text color={color}>{status}</Text>
              <Text dimColor>{push}{dirty}</Text>
            </Box>
          )
        })}
        <Text dimColor>✓✗… checks · ↑ unpushed · ✎ uncommitted · ? unknown</Text>
        {refreshButton}
      </Box>
    )
  })