quickbar

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    if (e.props.hasSurvey || (await read($, hidden))) return next(e)

    const { Box, Button, Text } = $.ui.resolve(e)
    const cfg = await read($, config)
    const errs = await read($, errors)
    const st = resolveStyle(cfg?.style)

    const pill = (key: string, label: string, bg: string, onPress: () => unknown, hotkey?: string) => (
      <Box key={`pill-${key}`} backgroundColor={bg} paddingX={st.paddingX} paddingY={st.paddingY}
        marginRight={st.gap} hover={{ backgroundColor: st.hoverColor }}>
        <Button key={key} plain label={label} hover={{ bold: true }} onPress={() => void onPress()}
          {...(hotkey ? { hotkey } : {})} />
      </Box>
    )

    if (!cfg) {
      return (
        <Box key="quickbar-error">
          {pill('error', `quickbar: ${errs.length} config error${errs.length === 1 ? '' : 's'}, press for details`, ERROR_COLOR,
            () => $.ui.toast(`${errs.slice(0, 3).join(' · ')}  (run /quickbar where)`, { timeoutMs: 10000 }))}
        </Box>
      )
    }

    const errLine = errs.length > 0 ? <Text dimColor>{`quickbar: ${errs[0]}`}</Text> : null
    const table = $.ui.resolve(e)

    // A Client (hover and whole-pill clicks) where the surface has one; the typings say terminal and desktop.
    if ((e.surface === 'terminal' || e.surface === 'desktop') && 'Client' in table) {
      const { Client } = table
      const props: BarProps = { buttons: cfg.buttons, style: st, columns: e.props.bodyColumns }
      return (
        <Box key="quickbar" flexDirection="column">
          <Client key="bar" module="./bar.tsx" props={props} />
          {errLine}
        </Box>
      )
    }

    // Fallback without a Client: the same layout drawn with Buttons, driven by clicks.
    const view = { open: await read($, open), path: await read($, path) }
    const l = layout(cfg.buttons, st, view, e.props.bodyColumns)
    const press = (p: Pill) => async () => {
      const act = activate(view, p)
      await update($, open, () => act.view.open)
      await update($, path, () => [...act.view.path])
      if (act.kind === 'deliver') {
        const b = cfg.buttons[act.button]
        if (b) await deliver($, b, chosen(b, act.path))
      }
    }
    return (
      <Box key="quickbar" flexDirection="column">
        {l.lines.map(line => (
          <Box key={`line-${line.y}`}>
            {line.pills.map(p => pill(p.id, p.label, p.color, press(p),
              p.kind === 'button' ? cfg.buttons[p.index]?.hotkey : undefined))}
          </Box>
        ))}
        {errLine}
      </Box>
    )
  })