prompts

  on('ui.render', { component: 'Pane', requestId: PANE }, ($, e) => {
    const { Box, Text, Button } = $.ui.resolve(e)
    const rows = e.props.placement === 'dock' ? e.props.scroll.bodyRows : INLINE_ROWS
    const columns = e.props.bodyColumns
    const layout = layoutOf(state.prompts, state.selected, columns, rows)
    const last = state.prompts.length - 1
    const select = (at: number) => {
      const target = Math.min(last, Math.max(0, at))

      // 選回最新的一句就恢復「跟著最新的」
      state.selected = target === last ? null : target
      $.ui.invalidate('ui.render')
    }
    const current = state.selected ?? last
    const header = Box({
      flexDirection: 'row',
      justifyContent: 'space-between',
      children: [Text({ bold: true, children: ['我問過的'] }), Text({ dimColor: true, children: [layout.count] })],
    })

    if (layout.rows.length === 0) {
      return Box({
        flexDirection: 'column',
        children: [header, Text({ children: [' '] }), Text({ dimColor: true, children: ['這次對話還沒有打過任何一句話'] })],
      })
    }

    return Box({
      flexDirection: 'column',
      children: [
        header,
        Text({ children: [' '] }),
        ...layout.rows.map(row =>
          Button({
            key: `row-${row.at}`,
            label: row.label,
            plain: true,
            ...(row.isShort && !row.isSelected ? { dimColor: true } : {}),
            onPress: () => select(row.at),
          }),
        ),
        Text({ dimColor: true, children: ['─'.repeat(Math.max(1, columns))] }),
        Text({ bold: true, children: [layout.title] }),
        ...layout.detail.map(text => Text({ wrap: 'truncate-end', children: [text === '' ? ' ' : text] })),
        ...(layout.hidden > 0
          ? [Text({ dimColor: true, children: [`…還有 ${layout.hidden} 行，按 C 複製全文`] })]
          : []),
        Text({ children: [' '] }),
        Box({
          flexDirection: 'row',
          columnGap: 2,
          flexWrap: 'wrap',
          children: [
            Button({ key: 'older', label: '上一句', hotkey: 'k', plain: true, onPress: () => select(current - 1) }),
            Button({ key: 'newer', label: '下一句', hotkey: 'j', plain: true, onPress: () => select(current + 1) }),
            Button({ key: 'copy', label: '複製', hotkey: 'c', plain: true, onPress: press => void copyChosen($, state, press) }),
            Button({ key: 'fill', label: '放回輸入框', hotkey: 'e', plain: true, onPress: () => void fillChosen($, state) }),
          ],
        }),
      ],
    })
  })