capi

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    // Working or not, unless CAPI_SHOW=working: a card waits until it is answered,
    // and only answering pulls new cards, so a visible band never costs a model call.
    if (cfg.place === 'pane' || e.props.hasSurvey || closed || (cfg.show === 'working' && !e.props.isWorking)) return next(e)
    return draw($, e, e.props.maxRows ?? 99, {
      close: () => {
        closed = true
        $.ui.invalidate('ui.render')
        $.ui.toast('Capi is hidden in this session. /capi show brings it back.')
      },
      size: async () => {
        minimized = !minimized
        $.ui.invalidate('ui.render')
        await $.store.set('minimized', minimized)
      },
    })
  })

function draw($, e, maxRows, window) {
  const { Box, Text, Button } = $.ui.resolve(e)
  const cols = (e.props.bodyColumns ?? 80) - ICON_W
  const parts = view(Box, Text, Button, cols, {
    pick: (id, i) => pick($, id, i),
    grade: (id, ok) => grade($, id, ok),
    next: (id) => nextCard($, id),
    speak: () => speak($),
    flag: (id) => flag($, id),
    extra: (id, kind) => toggleExtra($, id, kind),
    verb: (id, index) => {
      verbTab = { id, index }
      $.ui.invalidate('ui.render')
    },
    ...window,
  })
  const body = parts.map((p) => (p.flush ? p : indent(Box, Text, p, e.surface)))
  return Box({ flexDirection: 'column', children: fit(body, maxRows, cols) })
}

function indent(Box, Text, p, surface) {
  // A Desktop button (one not dimmed) draws its own padding, about a cell; a
  // row that starts with buttons takes that cell from the icon column.
  const width = ICON_W - (p.buttons && surface !== 'terminal' ? 1 : 0)
  const column = Box({ width, flexShrink: 0, children: p.icon ? [Text({ children: [p.icon] })] : [] })
  // p.side sits at the right end of the block's first line, and never shrinks
  const body = (n) =>
    p.side
      ? Box({ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'flex-start', columnGap: GAP, flexGrow: 1, children: [Box({ flexShrink: 1, children: [n] }), Box({ flexShrink: 0, children: [p.side] })] })
      : n
  const shift = (n) => Box({ flexDirection: 'row', alignItems: 'flex-start', children: [column, Box({ flexDirection: 'row', flexGrow: 1, flexShrink: 1, children: [body(n)] })] })
  return p.node ? { ...p, node: shift(p.node) } : { ...p, make: (cut) => shift(p.make(cut)) }
}

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