cc-cli-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)
    if (!isPaneDrawn && isShown) {
      // The band's button stands down once the pane is on screen. A draw
      // while hidden (a closing pane drawn once more) shows nothing.
      isPaneDrawn = true
      redrawRailLater($)
    }
    const nextColumns = isRail ? e.props.bodyColumns : 0
    if (nextColumns !== railColumns) {
      // The band decides from this whether it carries the cards.
      railColumns = nextColumns
      redrawRailLater($)
    }
    const hasRoom = !isRail || e.props.bodyColumns >= INLINE_REVEAL_MIN_COLUMNS
    const hide = (
      <Button key={HIDE_ELEMENT} plain dimColor label={hasRoom ? ' » hide' : ' » '} hover={{ scope: HIDE_ELEMENT, inverse: true, dimColor: false }} onPress={() => {}} />
    )
    // The hide button sits on the bottom-right cell of the body's window, over
    // whatever row is drawn there (AFU 4/10). The column fills the window so
    // the corner exists when the list is short; on a long list it follows the
    // window down.
    const { offset, bodyRows } = e.props.scroll
    const framed = (body: ReturnType<typeof Box>) => (
      <Box flexDirection="column" minHeight={bodyRows}>
        {body}
        <Box key={`${HIDE_ELEMENT}-corner`} position="absolute" top={offset + Math.max(0, bodyRows - 1)} right={0}>
          {hide}
        </Box>
      </Box>
    )
    // 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) {
      return framed(<Text dimColor wrap="truncate-end">{hasRoom ? 'Prompts of the main conversation only' : '·'}</Text>)
    }
    if (entries.length === 0) {
      return framed(<Text dimColor>{isRail && !hasRoom ? '·' : '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 width = Math.max(4, e.props.bodyColumns - 4)
      return framed(
        <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: `${PLUGIN}-${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 framed(
      <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 a survey holds the band or a subagent's transcript is in view.
    if (e.props.hasSurvey || e.props.view.agentId !== undefined || entries.length === 0) return next(e)
    const { Box, Text, Button } = $.ui.resolve(e)
    if (!isShown || !isPaneDrawn) {
      return (
        <Box flexDirection="row" justifyContent="flex-end">
          <Button
            key={SHOW_ELEMENT}
            plain
            dimColor
            label={`« prompts (${entries.length})`}
            hover={{ scope: SHOW_ELEMENT, inverse: true, dimColor: false }}
            onPress={() => {}}
          />
        </Box>
      )
    }
    if (railColumns > 0 && railColumns < INLINE_REVEAL_MIN_COLUMNS) {
      const width = Math.max(8, e.props.bodyColumns - 8)
      return (
        <Box flexDirection="column">
          {entries.map((entry, i) => (
            <Box key={`card-${i}`} display="none" hover={{ scope: `${PLUGIN}-${i}`, display: 'flex' }}>
              <Text dimColor>{`#${i + 1} `}</Text>
              <Text wrap="truncate-end">{withTurn(entry, width)}</Text>
            </Box>
          ))}
        </Box>
      )
    }
    return next(e)
  })