quick-bar

  on('ui.render', { component: 'Pane', requestId: POPUP }, async ($, e) => {
    const t = $.ui.resolve(e)
    const { Box, Text, Button } = t
    const Input = 'Input' in t ? t.Input : null
    const all = await $.command.list()
    const byName = new Map(all.map(c => [c.name, c]))
    const favs = await read($, favourites)
    const view = await read($, mode)
    const quick = await read($, immediates)
    // What a click on a favourite does: the person's choice, else the default for its kind.
    const actionOf = (f: Favourite): ClickAction => {
      const info = byName.get(f.command)
      return f.action ?? (info ? defaultAction(info, quick.includes(f.command)) : 'run')
    }

    // ---- The icons: hover for the name, click to run ----
    if (view === 'grid') {
      const here = favs.filter(f => byName.has(f.command))
      return (
        <Box flexDirection="column" gap={1} paddingX={1}>
          <Box flexDirection="row" gap={2} alignItems="center">
            <Text bold color="claude">
              ⚡ Favourites
            </Text>
            <Button key="go-add" plain dimColor label="＋ Add" onPress={() => goTo($, 'add')} />
            {favs.length > 0 ? <Button key="go-edit" plain dimColor label="✎ Edit" onPress={() => goTo($, 'edit')} /> : null}
          </Box>
          {here.length === 0 ? <Text dimColor>No favourites here yet. Press ＋ Add.</Text> : null}
          <Box flexDirection="row" flexWrap="wrap" gap={2}>
            {here.map(f => (
              <Box key={`fav-${f.command}`} flexDirection="column">
                <Button key={`run-${f.command}`} plain label={f.icon} onPress={() => useFavourite($, f.command, actionOf(f))} />
                <Box
                  position="absolute"
                  top={1}
                  left={0}
                  display="none"
                  hover={{ display: 'flex' }}
                  borderStyle="bold"
                  borderColor="claude"
                  paddingX={1}
                >
                  <Text bold inverse color="claude" wrap="truncate-end">
                    {` /${f.command} `}
                  </Text>
                </Box>
              </Box>
            ))}
          </Box>
          {/* Empty room under the icons, so the hover label has space to appear and covers nothing. */}
          <Box height={3} />
        </Box>
      )
    }

    // ---- Add: search every command and skill, click one to pick its icon ----
    if (view === 'add') {
      const q = await read($, query)
      const builtins = await read($, showBuiltins)
      const pool = all.filter(c => c.name !== 'fav' && (builtins || c.source !== 'builtin'))
      const found = search(pool, q)
      return (
        <Box flexDirection="column" gap={1} paddingX={1}>
          <Box flexDirection="row" gap={2} alignItems="center">
            <Text bold color="claude">
              ＋ Add a favourite
            </Text>
            <Button key="back" plain dimColor label="← Back" onPress={() => goTo($, 'grid')} />
          </Box>
          {Input ? (
            <Input
              key="fav-search"
              placeholder="Search commands and skills"
              autoFocus
              onInput={(value: string) => update($, query, () => value)}
              onSubmit={async () => {
                const first = found[0]
                if (!first) return
                await update($, pending, () => first.name)
                await goTo($, 'icon')
              }}
            />
          ) : null}
          <Box flexDirection="row">
            <Button
              key="toggle-builtins"
              plain
              dimColor
              label={builtins ? '☑ Include Claude Code commands' : '☐ Include Claude Code commands'}
              onPress={() => update($, showBuiltins, v => !v)}
            />
          </Box>
          {found.length === 0 ? <Text dimColor>Nothing matches "{q}".</Text> : null}
          <Box flexDirection="column">
            {found.slice(0, SEARCH_SHOWN).map(c => {
              const already = favs.find(f => f.command === c.name)
              return (
                <Box key={`found-${c.name}`} flexDirection="column">
                  <Button
                    key={`pick-${c.name}`}
                    plain
                    label={`${already ? `${already.icon} ` : ''}/${c.name}`}
                    onPress={async () => {
                      await update($, pending, () => c.name)
                      await goTo($, 'icon')
                    }}
                  />
                  <Text dimColor wrap="truncate-end">
                    {'   '}
                    {c.description}
                  </Text>
                </Box>
              )
            })}
          </Box>
          {found.length > SEARCH_SHOWN ? <Text dimColor>{found.length - SEARCH_SHOWN} more. Keep typing to narrow it down.</Text> : null}
        </Box>
      )
    }

    // ---- Icon: pick the emoji for the chosen command ----
    if (view === 'icon') {
      const command = await read($, pending)
      const current = favs.find(f => f.command === command)?.icon
      return (
        <Box flexDirection="column" gap={1} paddingX={1}>
          <Box flexDirection="row" gap={2} alignItems="center">
            <Text bold color="claude">
              Pick an icon for /{command}
            </Text>
            <Button key="back" plain dimColor label="← Back" onPress={() => goTo($, current ? 'edit' : 'add')} />
          </Box>
          {ICON_GROUPS.map(group => (
            <Box key={`group-${group.area}`} flexDirection="column">
              <Text dimColor>{group.area}</Text>
              <Box flexDirection="row" flexWrap="wrap" gap={2}>
                {group.icons.map(icon => (
                  <Button
                    key={`icon-${icon}`}
                    plain
                    label={icon === current ? `[${icon}]` : icon}
                    onPress={async () => {
                      if (!command) return
                      const isNew = !favs.some(f => f.command === command)
                      await setFavourites($, list => setIcon(list, command, icon))
                      await goTo($, isNew ? 'action' : 'grid')
                    }}
                  />
                ))}
              </Box>
            </Box>
          ))}
        </Box>
      )
    }

    // ---- Action: what a click on the new favourite does ----
    if (view === 'action') {
      const command = await read($, pending)
      const fav = favs.find(f => f.command === command)