agent-quick-menu

  on('ui.render', { component: 'Pane', requestId: PANE_ID }, ($, e) => renderMenu($, e))

async function renderMenu($: EngineInterface, e: RenderInput<'Pane'>) {
  const ui = $.ui.resolve(e)
  const { Box, Text, Button } = ui
  const p = await read($, problems)
  const d = await loadMenu($)
  const hasFields = e.surface !== 'mobile'
  const columns = e.props.bodyColumns
  const sectionBlocks = d.blocks.filter(b => b.id !== FAV_ID)
  const commandTotal = sectionBlocks.reduce((n, b) => n + b.commands.length, 0)
  const settingTotal = sectionBlocks.reduce((n, b) => n + b.rows.length, 0)
  const ids = d.blocks.map(b => b.id)
  const Input = inputOf(ui)
  return (
    <Box flexDirection="column" gap={1}>
      <Box flexDirection="row" columnGap={2}>
        <Text bold color="cyan">Quick menu</Text>
        <Button key="expand-all" label="Expand all" hotkey="e" onPress={() => void foldAll($, ids, false)} />
        <Button key="collapse-all" label="Collapse all" hotkey="c" onPress={() => void foldAll($, ids, true)} />
        <Text dimColor>{`${pluralOf(sectionBlocks.length, 'section')} · ${pluralOf(commandTotal, 'command')} · ${pluralOf(settingTotal, 'setting')}`}</Text>
      </Box>
      {d.favs.length === 0 && <Text dimColor>Press ☆ on a row to pin it to the band.</Text>}
      {Input && hasFields && (
        <Input
          key="filter"
          placeholder="filter…"
          value={d.filterText}
          onInput={(value: string) => void setFilter($, value)}
          onSubmit={(value: string) => void setFilter($, value)}
        />
      )}
      {sectionBlocks.length === 0 && (
        <Text dimColor>{d.filter === '' ? 'Quick menu: nothing here yet.' : `No match for "${d.filter}".`}</Text>
      )}
      {d.blocks.map(b => renderBlock($, ui, b, d, { hasFields, columns }))}
      {p.length > 0 && (
        <Box key="problems" flexDirection="column">
          <Text bold>Problems</Text>
          {p.map((x, i) => (
            <Text key={String(i)} color="red">{`  ${x.plugin}: ${x.message}`}</Text>
          ))}
        </Box>
      )}
    </Box>
  )
}

function renderBlock($: EngineInterface, ui: Ui, b: Block, d: MenuData, { hasFields, columns, showBody = true }: BlockOptions) {
  const { Box, Text, Button } = ui
  const isOpen = isBlockOpen(d, b.id)
  const widest = Math.max(0, ...settingsOf(b, d).map(r => width(r.label)))
  const cmdLabels = b.favs
    ? b.favs.flatMap(f => (f.kind === 'command' ? [findFavCommand(f, d.all)?.label ?? ''] : []))
    : b.commands.slice(0, MAX_SHOWN_COMMANDS).map(c => c.label)
  const cmdPad = Math.max(0, ...cmdLabels.map(l => width(l)))
  const ctx: RowCtx = { list: d.favs, prefix: prefixOf(b), hasFields, pad: widest, cmdPad, open: d.openEditor, draft: d.draft, columns }
  let body: RenderNode[] = []
  if (showBody && isOpen && b.favs) {
    body = b.favs.map(f => renderFavourite($, ui, f, d.all, d.rows, d.state, ctx))
  } else if (showBody && isOpen) {
    body = [
      ...(b.note ? [<Text key={`note:${b.id}`} dimColor>{b.note}</Text>] : []),
      ...(b.commands.length > 0
        ? [
            <Box key="commands" flexDirection="column">
              {b.commands.slice(0, MAX_SHOWN_COMMANDS).map(c => renderCommand($, ui, b.plugin, c, d.state, ctx))}
              {b.commands.length > MAX_SHOWN_COMMANDS && (
                <Text key="more" dimColor>{`+${b.commands.length - MAX_SHOWN_COMMANDS} more`}</Text>
              )}
            </Box>,
          ]
        : []),
      ...b.rows.map(r => renderSetting($, ui, r, b.plugin, d.state.notes, ctx)),
    ]
  }
  return (
    <Box key={`section:${b.id}`} flexDirection="column">
      <Box flexDirection="row" columnGap={2}>
        <Button
          key={`fold:${b.id}`}
          label={`${isOpen ? '▾' : '▸'} ${b.title}`}
          variant="primary"
          onPress={() => void toggleFold($, b.id)}
        />
        {b.isBuiltIn && <Text dimColor>built-in</Text>}
        <Text dimColor>{summaryOf(b)}</Text>
      </Box>
      {body.length > 0 && (
        <Box key={`body:${b.id}`} flexDirection="column" paddingLeft={2}>
          {body}
        </Box>
      )}
    </Box>
  )
}

  on('ui.render', { component: 'AbovePrompt' }, ($, e, next) => renderBand($, e, () => next(e)))

async function renderBand($: EngineInterface, e: RenderInput<'AbovePrompt'>, next: () => unknown): Promise<RenderElement> {
  if (e.props.hasSurvey) return next() as Promise<RenderElement>
  if (e.surface !== 'terminal' && e.surface !== 'desktop') return next() as Promise<RenderElement>
  const ui = $.ui.resolve(e)
  const { Box, Button, Text } = ui
  const d = await loadMenu($)
  const menuLabel = menuLabelFor(await isPaneOpen($))
  let used = width(menuLabel) + MENU_BUTTON_CHROME + BAND_RESERVE
  const items: BandItem[] = []
  for (const [position, f] of d.favs.entries()) {
    const item = bandItem(f, d.all, d.rows, d.state)
    if (!item) continue
    // The digit is the favourite's own place in the pinned list, so a gap never renumbers the others.
    const digit = bandHotkeys && item.isOwn && position < 9 ? position + 1 : undefined
    used += width(item.label) + (digit === undefined ? 0 : DIGIT_CELLS) + BUTTON_GAP
    if (used > e.props.bodyColumns) break
    items.push(digit === undefined ? item : { ...item, digit })
  }
  const menu = (await isUnplaced($)) ? renderBandMenu($, ui, d, e.props.maxRows - 2, e.props.bodyColumns) : null
  const below = (await next()) as RenderNode | null | undefined
  return (
    <Box flexDirection="column">
      <Box columnGap={1}>
        <Button key="band:menu" label={menuLabel} hotkey="m" onPress={() => void togglePane($)} />
        {items.length > 0 && <Text dimColor>│</Text>}
        {items.map((item, i) => (
          <Button
            key={`band:${i + 1}`}
            label={item.label}
            plain
            {...(item.digit !== undefined && { hotkey: String(item.digit) })}
            onPress={() => void pressBandItem($, item.action)}
          />
        ))}
      </Box>
      {menu && (
        <Box key="band:close-row">
          <Button key="band:close" label="Close" hotkey="x" onPress={() => void closePane($)} />
        </Box>
      )}
      {menu}
      {below}
    </Box>
  )
}