quickbar

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    // Other plugins may draw in this band too: draw ours under whatever the chain beneath returns.
    const below = await next(e)
    const mine = await (async (): Promise<RenderElement | null> => {
      if (e.props.hasSurvey || (await read($, hidden))) return null

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

      // A pill is one single-row Button on a colored Box. Claude Code highlights a Button under the pointer by
      // inverting it, and only a single-row Button inverts as a whole (a taller one inverts only its first row,
      // stacked Buttons row by row), so pills are one row tall and carry no hover colors of their own.
      // A select in peek mode puts its pill in a hover scope that only reveals its options row.
      const pill = (key: string, label: string, bg: string, onPress: () => unknown, hotkey?: string, scope?: string) => {
        const pad = ' '.repeat(st.paddingX)
        // A plain Button with a hotkey is drawn as "e: label": the "e:" takes two of the left padding columns,
        // so the pill keeps its width and the label stays centered.
        const left = hotkey ? ' '.repeat(Math.max(1, st.paddingX - 2)) : pad
        return (
          <Box key={`pill-${key}`} backgroundColor={bg} marginRight={st.gap} {...(scope ? { hover: { scope } } : {})}>
            <Button key={key} plain label={`${left}${label}${pad}`} onPress={() => void onPress()} {...(hotkey ? { hotkey } : {})} />
          </Box>
        )
      }

    // Not loaded yet (drawn before session.start finished): draw nothing and make sure a load is on its way.
      if (!cfg && errs.length === 0) {
        if (!loading) loading = load($).finally(() => { loading = undefined })
        return null
      }

      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)

      // Hover navigation is opt-in: its Client tracks the pointer, which takes over text selection in the terminal.
      if (cfg.navigation === 'hover' && (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>
        )
      }

      // Click navigation (the default, and VS Code): the same layout drawn with Buttons.
      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))
        }
      }
      const isPeek = cfg.navigation === 'peek'
      const scopeOf = (i: number) => `quickbar-select-${i}`
      const drawLine = (line: (typeof l.lines)[number], onPress: (p: Pill) => () => Promise<void>, prefix = '') => (
        <Box key={`${prefix}line-${line.y}`}>
          {line.pills.map(p => pill(`${prefix}${p.id}`, p.label, p.color, onPress(p),
            p.kind === 'button' ? cfg.buttons[p.index]?.hotkey : undefined,
            isPeek && p.kind === 'button' && p.hasChildren && view.open !== p.index ? scopeOf(p.index) : undefined))}
        </Box>
      )
      const barStart = l.lines.findIndex(line => line.pills.some(p => p.kind === 'button'))

      // Peek: each closed select's first level, hidden right above the bar and revealed by hovering the select
      // (a hover style, no pointer tracking). The revealed row shares the select's hover scope, so moving onto
      // it keeps it open; a click there works like click navigation.
      const peeks = isPeek
        ? cfg.buttons.flatMap((b, i) => {
          if (!b.options || view.open === i) return []
          const pv = { open: i, path: [] as number[] }
          const pl = layout(cfg.buttons, st, pv, e.props.bodyColumns)
          const rows = pl.lines.filter(line => line.pills.every(p => p.kind !== 'button'))
          // Right above its own select: shifted to the select's column, as far as the row still fits.
          const selectX = l.lines.flatMap(line => line.pills).find(p => p.id === `b${i}`)?.x ?? 0
          const rowWidth = Math.max(0, ...rows.map(line => {
            const last = line.pills[line.pills.length - 1]
            return last ? last.x + last.width : 0
          }))
          const shift = Math.max(0, Math.min(selectX, e.props.bodyColumns - rowWidth))
          const pressPeek = (p: Pill) => async () => {
            const act = activate(pv, p)
            await update($, open, () => act.view.open)
            await update($, path, () => [...act.view.path])
            if (act.kind === 'deliver') await deliver($, b, chosen(b, act.path))
          }
          return [(
            <Box key={`peek-${i}`} flexDirection="column" marginLeft={shift} display="none" hover={{ display: 'flex', scope: scopeOf(i) }}>
              {rows.map(line => drawLine(line, pressPeek, `p${i}-`))}
            </Box>
          )]
        })
        : []

      return (
        <Box key="quickbar" flexDirection="column">
          {l.lines.slice(0, barStart).map(line => drawLine(line, press))}
          {peeks}
          {l.lines.slice(barStart).map(line => drawLine(line, press))}
          {errLine}
        </Box>
      )
    })()
    if (!mine) return below
    const { Box } = $.ui.resolve(e)
    return (
      <Box key="quickbar-stack" flexDirection="column">
        {below}
        {mine}
      </Box>
    )
  })