gemini-core

  on('ui.render', { component: 'Pane' }, async ($, e, next) => {
    const pick = session.pick
    if (e.requestId !== PANE_ID || pick === undefined) return next(e)
    if (e.surface === 'mobile') return listTree($.ui.resolve(e), pick)
    return pickerTree($.ui.resolve(e), pick, model => void pickModel($, session, model).catch((err: unknown) => $.ui.toast(errorText(err))))
  })

export function listTree(els: Elements['mobile'], pick: Pick) {
  const { Box, Text } = els
  return (
    <Box flexDirection="column">
      <Text dimColor>{`/gemini-core model ${pick.consumer} <id> sets one of:`}</Text>
      {pick.models.map(m => <Text key={m.id}>{label(m)}</Text>)}
    </Box>
  )
}

export function pickerTree(els: Elements['terminal' | 'desktop' | 'vscode'], pick: Pick, onPick: (model: string) => void) {
  const { Box, Select, Text } = els
  const options = pick.models.map(m => ({ value: m.id, label: label(m) }))
  const value = pick.models.some(m => m.id === pick.current) ? pick.current : undefined
  return (
    <Box flexDirection="column">
      <Text dimColor>{`Enter sets the model of ${pick.consumer}; Esc closes without a change.`}</Text>
      <Select key="model" label="model" options={options} {...(value === undefined ? {} : { value })} autoFocus onSelect={onPick} />
    </Box>
  )
}