codex-pane

  on('ui.render', { component: 'Pane' }, async ($, e, next) => {
    if (e.requestId !== PANE) return next(e)
    return draw($, e)
  })

function draw($, e) {
  const { Box, Text, Button } = $.ui.resolve(e)
  const s = state.L.s
  const line = (text, props = {}) => Text({ ...props, children: [text || ' '], wrap: 'truncate-end' })
  const header = []
  const d = state.data

  header.push(line(s.title, { bold: true, color: 'magenta' }))
  if (state.error) header.push(line('  ' + state.error, { color: 'red' }))
  if (!d) {
    header.push(line('  ' + s.reading, { dimColor: true }))
    return Box({ flexDirection: 'column', children: header })
  }

  header.push(line('  ' + s.session(sessionName(d, state.L), !!state.pinned) + (d.live === false ? s.closed : ''), { dimColor: true }))
  header.push(line('  ' + (d.busy ? s.busy : s.idle), { color: d.busy ? 'yellow' : 'green' }))
  if (d.activity) {
    header.push(line('  ' + hm(d.activity) + ' ' + (s.kind[d.activity.kind] || d.activity.kind) + ' : ' + d.activity.text, { dimColor: true }))
  }
  if (d.exchange) {
    const x = d.exchange
    header.push(line('  ' + s.exchange(hm(x.user), x.codex.length, x.done, state.sentKey === x.last_ts), { dimColor: true }))
  }
  header.push(line(' '))

  const width = Math.max(20, (e.props && e.props.bodyColumns) || 60)
  const all = messageLines(d.messages, width, state.L)
  const footerRows = 3 // empty line + two rows of buttons
  const bodyRows = e.props && e.props.scroll && e.props.scroll.bodyRows
  // Docked pane: known height, filled exactly. Above the prompt the pane grows
  // with its content, so it is capped at 20 lines.
  const avail = e.props && e.props.placement === 'dock' && bodyRows
    ? Math.max(3, bodyRows - header.length - 1 - footerRows)
    : Math.min(all.length, 20)
  const win = windowOf(all, avail, state.back)
  state.back = win.back
  state.maxBack = win.maxBack

  header.push(line(s.latest + (win.back > 0 ? s.scrolled(win.back) : ''), { bold: true }))
  const rows = [...header]
  for (const r of win.rows) rows.push(line(r.text, { color: r.color }))
  for (let i = win.rows.length; i < avail; i++) rows.push(line(' '))
  rows.push(line(' '))

  rows.push(
    Box({
      flexDirection: 'row',
      columnGap: 2,
      children: [
        // The button always says what it did, even when there is nothing to send.
        Button({ key: 'send', label: state.sending ? s.toClaudeBusy : s.toClaude, hotkey: s.keys.toClaude, plain: true, onPress: () => pressSend($) }),
        Button({ key: 'to-codex', label: state.sendingToCodex ? s.toCodexBusy : s.toCodex, hotkey: s.keys.toCodex, plain: true, onPress: () => sendToCodex($) }),
      ],
    }),
  )
  rows.push(
    Box({
      flexDirection: 'row',
      columnGap: 2,
      children: [
        Button({ key: 'session', label: s.switchSession, hotkey: s.keys.session, plain: true, onPress: () => chooseSession($) }),
        Button({ key: 'refresh', label: s.refresh, hotkey: s.keys.refresh, plain: true, onPress: () => poll($) }),
        Text({ dimColor: true, children: [s.escClose] }),
      ],
    }),
  )
  return Box({ flexDirection: 'column', children: rows })
}