prompt-rail

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    // Read so a moved prompt being read draws the pane again (see MOVED).
    await $.state.get(MOVED)
    const { Box, Text, Button } = $.ui.resolve(e)
    const isRail = e.props.placement === 'dock' && e.surface === 'terminal'
    noteView(e.props.view.agentId)
    const nextColumns = isRail ? e.props.bodyColumns : 0
    if (nextColumns !== railColumns) {
      // The band decides from this whether it carries the cards.
      railColumns = nextColumns
      redrawRailLater($)
    }
    // The rail lists the main conversation's prompts, which a subagent's
    // transcript does not hold, so pressing one there could not scroll to it.
    if (e.props.view.agentId !== undefined) {
      const hasRoom = !isRail || e.props.bodyColumns >= INLINE_REVEAL_MIN_COLUMNS
      return <Text dimColor wrap="truncate-end">{hasRoom ? 'Prompts of the main conversation only' : '·'}</Text>
    }
    if (entries.length === 0) {
      return <Text dimColor>{isRail ? '·' : 'No prompts yet'}</Text>
    }
    const current = currentIndex()
    drawnCurrent = current
    // Docked on the terminal: one row per prompt, its tick and its text, the
    // whole row pressable. Too narrow for text, ticks alone (the band shows it).
    if (isRail) {
      const hasRoom = e.props.bodyColumns >= INLINE_REVEAL_MIN_COLUMNS
      const width = Math.max(4, e.props.bodyColumns - 4)
      return (
        <Box flexDirection="column">
          {entries.map((entry, i) => (
            <Button
              key={`jump-${i}`}
              plain
              dimColor={i !== current}
              label={
                hasRoom
                  ? ` ${tick(i === current, isUnreachable(i))} ${oneLine(entry.text, width)}`
                  : ` ${tick(i === current, isUnreachable(i))} `
              }
              hover={{ scope: `prompt-rail-${i}`, inverse: true, dimColor: false }}
              onPress={() => {}}
            />
          ))}
        </Box>
      )
    }
    // Elsewhere (inline, or a surface with no band for the card): list the text.
    const width = Math.max(8, e.props.bodyColumns - 3)
    return (
      <Box flexDirection="column">
        {entries.map((entry, i) => (
          <Button
            key={`jump-${i}`}
            plain
            dimColor={i !== current}
            label={`${tick(i === current, isUnreachable(i))} ${oneLine(entry.text, width)}`}
            onPress={() => {}}
          />
        ))}
      </Box>
    )
  })

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    await $.state.get(MOVED)
    noteView(e.props.view.agentId)
    // Nothing while the rail is off, a survey holds the band or a subagent's transcript is in view.
    if (mode === 'off' || e.props.hasSurvey || e.props.view.agentId !== undefined || entries.length === 0) return next(e)
    const { Box, Text, Button } = $.ui.resolve(e)
    const cards = (width: number) =>
      entries.map((entry, i) => (
        <Box key={`card-${i}`} display="none" hover={{ scope: `prompt-rail-${i}`, display: 'flex' }}>
          <Text dimColor>{`#${i + 1} `}</Text>
          <Text wrap="truncate-end">{withTurn(entry, width)}</Text>
        </Box>
      ))

    if (mode === 'horizontal') {
      // Two rows: the text line, then the bars beside the prompt. The text line
      // shows the prompt being read, dim, and the hovered one's card painted
      // over it; the bar of the prompt being read is heavy.
      //
      // Only the terminal's grid of cells hides the dim line under a card. A
      // page (the desktop app) paints a card with no background, in a face of
      // its own widths, so the line beneath shows through: there the text line
      // holds the hovered card alone, and the prompt being read is named after
      // the bars. A clicked bar keeps its native ring there beside the hovered
      // one, so the band takes no ring at all (see the band's ui.focus).
      const isCellGrid = e.surface === 'terminal'
      isBandOnGrid = isCellGrid
      const width = Math.max(8, e.props.bodyColumns - 2 - RAIL_INSET)
      const current = currentIndex()
      drawnCurrent = current
      const shownRing = isCellGrid && ringed !== undefined && ringed < entries.length ? ringed : undefined
      // Cells for the bars and their marks: the whole line, or beside the
      // label of the prompt being read, a gap and a few words of it.
      const barCells = isCellGrid ? width : Math.max(MIN_DESKTOP_BARS, width - 1 - MIN_CARD_TEXT)
      // More prompts than cells: a window of bars centered on the prompt being
      // read (the newest when none is known), `‹` and `›` marking what it hides.
      // It stays put while the ring moves: the ring keeps its place in the row,
      // not its bar, so a shifted window would move it to another prompt.
      const isOverflowing = entries.length > barCells
      const capacity = isOverflowing ? barCells - 2 : entries.length
      const center = current >= 0 ? current : entries.length - 1
      const first = Math.min(Math.max(0, center - Math.floor(capacity / 2)), entries.length - capacity)
      const shown = entries.slice(first, first + capacity)
      const hidesAfter = first + capacity < entries.length
      const label = (i: number, room = width) => `#${i + 1} ${oneLine(entries[i]?.text ?? '', room - `#${i + 1} `.length)}`
      // The hovered prompt's card also sums up its turn.
      const card = (i: number) => {
        const entry = entries[i]
        return entry ? `#${i + 1} ${withTurn(entry, width - `#${i + 1} `.length)}` : ''
      }
      const bars = [
        isOverflowing ? <Text dimColor>{first > 0 ? '‹' : ' '}</Text> : null,
        ...shown.map((entry, offset) => {
          const i = first + offset
          return (
            <Button
              key={`jump-${i}`}
              plain
              dimColor={i !== current}
              label={bar(i === current, isUnreachable(i))}
              hover={{ scope: `prompt-rail-${i}`, inverse: true, dimColor: false }}
              autoFocus={(isCellGrid && i === center) || undefined}
              onPress={() => {}}
            />
          )
        }),
        hidesAfter ? <Text dimColor>›</Text> : null,
      ]
      if (!isCellGrid) {
        // Each bar and mark a cell wide, then a gap.
        const room = width - (isOverflowing ? barCells : entries.length) - 1
        return (
          <Box flexDirection="column" paddingLeft={RAIL_INSET}>
            <Box height={1} width={width}>
              {entries.map((_, i) => (
                <Box key={`card-${i}`} display="none" hover={{ scope: `prompt-rail-${i}`, display: 'flex' }}>
                  <Text wrap="truncate-end">{card(i)}</Text>
                </Box>
              ))}
            </Box>
            <Box flexDirection="row">
              {bars}
              {/* With no prompt known on screen, the newest: bars alone read as a broken rail. */}
              <Box marginLeft={1}>
                <Text dimColor wrap="truncate-end">{label(center, room)}</Text>
              </Box>
            </Box>
          </Box>
        )
      }
      return (
        <Box flexDirection="column" paddingLeft={RAIL_INSET}>
          <Box height={1} width={width}>
            {/* With no prompt known on screen, the newest: an empty line reads as a broken rail. */}
            {shownRing === undefined ? <Text dimColor wrap="truncate-end">{label(center)}</Text> : <Text wrap="truncate-end">{padTo(card(shownRing), width)}</Text>}
            {entries.map((_, i) => (
              <Box key={`card-${i}`} position="absolute" top={0} left={0} display="none" hover={{ scope: `prompt-rail-${i}`, display: 'flex' }}>
                <Text wrap="truncate-end">{padTo(card(i), width)}</Text>
              </Box>
            ))}
          </Box>
          <Box flexDirection="row">{bars}</Box>
        </Box>
      )
    }

    if (railColumns > 0 && railColumns < INLINE_REVEAL_MIN_COLUMNS) {
      return <Box flexDirection="column">{cards(Math.max(8, e.props.bodyColumns - 8))}</Box>
    }
    return next(e)
  })