rich-input

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    if (!showBand || e.props.hasSurvey) return next(e)
    const { Box, Button, Text } = $.ui.resolve(e)
    return (
      <Box flexDirection="row">
        <Button key="open-rich" label="✎ Rich input" plain dimColor action={openAction} onPress={() => openEditor($)} />
        <Text dimColor> Alt+R or /rich</Text>
      </Box>
    )
  })

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const ui = $.ui.resolve(e)
    const { Box, Button, Text } = ui
    if (!('Input' in ui)) return <Text>This surface can't draw the editor; use the prompt.</Text>

    const d = await read($, doc)
    const width = String(d.lines.length).length
    // Every line is drawn, always, keyed by its id: the surface keeps each
    // field (and the person's typing in it) with its own line.
    const rows: RenderElement[] = []
    d.lines.forEach((line, i) => {
      const gutter = `${String(i + 1).padStart(width)} │`
      if (line.id !== d.active) {
        // A field without the focus is not drawn with its text on every
        // terminal, so only the active line is a field: the others are rows
        // the ring walks, and Enter (or a click) on one edits it.
        rows.push(
          <Box flexDirection="row">
            <Text dimColor>{gutter}</Text>
            <Button key={lineKey(line.id)} plain label={line.text === '' ? ' ' : line.text} onPress={() => editLine($, line.id)} />
          </Box>,
        )
        return
      }
      const isMenu = d.sug !== null && d.sug.line === line.id
      rows.push(
        <ui.Input
          key={editKey(line.id, d.epoch)}
          label={gutter}
          value={line.text}
          placeholder={d.lines.length === 1 ? 'Write your prompt… @ mentions files and folders' : undefined}
          submitLabel={isMenu ? 'accept' : 'new line'}
          autoFocus
          onInput={value => changeLine($, line.id, value)}
          onSubmit={value => submitLine($, line.id, value)}
        />,
      )
      if (isMenu) {
        d.sug!.items.slice(0, MENU_SIZE).forEach((choice, j) =>
          rows.push(
            <Box paddingLeft={width + 2}>
              <Button
                key={`sug:${j}`}
                plain
                hotkey={String(j + 1)}
                dimColor={!choice.isDir}
                label={choice.label}
                onPress={() => accept($, line.id, choice)}
              />
            </Box>,
          ),
        )
      }
    })

    return (
      <Box flexDirection="column">
        <Box flexDirection="row">
          <Button key="send" label="Send to prompt" variant="primary" action={sendAction} onPress={() => send($)} />
          <Text> </Text>
          <Button key="delete-line" label="Delete line" onPress={() => deleteLine($)} />
          <Text> </Text>
          <Button key="cancel" label="Cancel" role="dismiss" onPress={() => closeEditor($, null)} />
          <Text dimColor wrap="truncate-end">
            {'  '}Enter new line · Tab @ suggestions · Ctrl+S send · Esc leave
          </Text>
        </Box>
        {rows}
      </Box>
    )
  })