command-hub

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const els = $.ui.resolve(e)
    const { Box, Text, Button } = els
    const Input = 'Input' in els ? els.Input : undefined
    const Select = 'Select' in els ? els.Select : undefined
    const list = await read($, commands)
    const view = await read($, tab)
    const q = (await read($, query)).toLowerCase()
    const d = await read($, draft)
    const names = new Set(list.map(c => c.name))
    const use = (name: string) => () => void $.prompt.fill({ text: `/${name} ` })
    const kit = { Box, Text }
    const top = header(kit, GLYPH.on, TONE.accent, 'command-hub', list.length === 0 ? 'reading commands…' : `${list.length} commands installed`)

    const tabs = (
      <Box gap={1}>
        {(['essentials', 'all', 'create'] as const).map((v, i) => (
          <Button key={`tab-${v}`} hotkey={String(i + 1)} variant={view === v ? 'primary' : 'secondary'} label={v === 'create' ? '+ create' : v} onPress={() => void update($, tab, () => v)} />
        ))}
      </Box>
    )

    if (view === 'essentials') {
      const shown = ESSENTIALS.filter(x => names.has(x.name))

      return (
        <Box flexDirection="column" gap={1}>
          {top}
          {tabs}
          {section(
            kit,
            'Built-ins worth knowing · click one to put it in the prompt box',
            <Box flexDirection="column">
              {shown.length === 0 && empty(kit, 'Reading the commands this Claude Code has… they appear here in a moment.')}
              {shown.map(x => (
                <Box flexDirection="column">
                  <Button key={`use-${x.name}`} plain label={`/${x.name}`} onPress={use(x.name)} />
                  <Box paddingLeft={3}>
                    <Text dimColor>{x.when}</Text>
                  </Box>
                </Box>
              ))}
            </Box>,
          )}
        </Box>
      )
    }

    if (view === 'all') {
      const filtered = list.filter(c => q === '' || c.name.toLowerCase().includes(q) || c.description.toLowerCase().includes(q))
      const bySource = new Map<string, CommandRow[]>()
      for (const c of filtered) bySource.set(c.source, [...(bySource.get(c.source) ?? []), c])

      return (
        <Box flexDirection="column" gap={1}>
          {top}
          {tabs}
          {Input !== undefined && <Input key="search" placeholder="search commands…" value={q} onInput={(v: string) => void update($, query, () => v)} onSubmit={(v: string) => void update($, query, () => v)} />}
          <Text dimColor>
            {filtered.length} of {list.length} commands
          </Text>
          {filtered.length === 0 && empty(kit, q === '' ? 'Reading the installed commands… they appear here in a moment.' : `No command matches "${q}". Try a shorter word, or clear the search.`)}
          {[...bySource.entries()].map(([source, rows]) =>
            section(
              kit,
              source,
              rows.map(c => (
                <Box gap={1}>
                  <Button key={`all-${c.name}`} plain label={`/${c.name}`} onPress={use(c.name)} />
                  <Text dimColor wrap="truncate-end">
                    {c.description}
                  </Text>
                </Box>
              )),
            ),
          )}
        </Box>
      )
    }

    return (
      <Box flexDirection="column" gap={1}>
        {top}
        {tabs}
        <Text dimColor>A slash command is a saved prompt. Use $ARGUMENTS where text typed after the command should go.</Text>
        {Input === undefined ? (
          <Text>This surface has no text input; use /new-command in the terminal or desktop app.</Text>
        ) : (
          <Box flexDirection="column" gap={1}>
            <Input key="name" label="Name  /" placeholder="e.g. ship" value={d.name} onInput={(v: string) => void update($, draft, x => ({ ...x, name: v }))} onSubmit={(v: string) => void update($, draft, x => ({ ...x, name: v }))} />
            <Input key="desc" label="Shown in menu" placeholder="e.g. Run tests, then commit and push" value={d.description} onInput={(v: string) => void update($, draft, x => ({ ...x, description: v }))} onSubmit={(v: string) => void update($, draft, x => ({ ...x, description: v }))} />
            <Input
              key="body"
              label="Prompt"
              placeholder="e.g. Run the test suite. If green, commit with a good message and push. Focus: $ARGUMENTS"
              value={d.body}
              onInput={(v: string) => void update($, draft, x => ({ ...x, body: v }))}
              onSubmit={(v: string) => void update($, draft, x => ({ ...x, body: v }))}
            />
            {Select !== undefined && (
              <Select
                key="scope"
                label="Save for"
                value={d.scope}
                options={[
                  { value: 'project', label: 'This project (.claude/commands, shareable via git)' },
                  { value: 'user', label: 'Me, everywhere (~/.claude/commands)' },
                ]}
                onSelect={(v: string) => void update($, draft, (x): CommandDraft => ({ ...x, scope: v === 'user' ? 'user' : 'project' }))}
              />
            )}
            <Box gap={1}>
              <Button key="save" variant="primary" label="Save command" onPress={() => void saveDraft($)} />
              <Button
                key="help"
                label="Draft it with Claude"
                onPress={() => void $.prompt.fill({ text: `Help me write a Claude Code slash command (a markdown file in .claude/commands) that ${d.description || d.body || '…'}. Ask me anything you need, then create it.` })}
              />
            </Box>
          </Box>
        )}
      </Box>
    )
  })

function header({ Box, Text }: Kit, glyph: string, tone: string, name: string, status: string) {
  return (
    <Box gap={1}>
      <Text color={tone}>{glyph}</Text>
      <Text bold>{name}</Text>
      <Text dimColor wrap="truncate-end">{status}</Text>
    </Box>
  )
}

function section({ Box, Text }: Kit, label: string, rows: RenderChildren, aside?: RenderChildren) {
  return (
    <Box flexDirection="column">
      <Box gap={1}>
        <Text dimColor>{label}</Text>
        {aside}
      </Box>
      {rows}
    </Box>
  )
}

function empty({ Text }: Kit, text: string) {
  return <Text dimColor>{text}</Text>
}