{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "grok-slash-menu",
  "title": "Grok Slash Menu",
  "description": "Slash-command overlay above the real GrokPrompt composer — ❯ active row, type after / to filter.",
  "registryDependencies": [
    "https://brainless.swerdlow.dev/r/grok-prompt.json"
  ],
  "files": [
    {
      "path": "registry/brainless/grok/grok-slash-menu.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { GrokPrompt } from \"@/registry/brainless/grok/grok-prompt\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * GrokSlashMenu — Grok CLI's slash-command palette.\n *\n * Overlay above the rounded composer: active row marked with `❯`, inactive\n * rows indented. Type after `/` to filter; arrow keys move selection.\n */\nexport type GrokSlashCommand = { name: string; description: string };\n\nconst DEFAULT: GrokSlashCommand[] = [\n  { name: \"/quit\", description: \"Quit the application\" },\n  { name: \"/help\", description: \"Browse commands and keyboard shortcuts\" },\n  { name: \"/docs\", description: \"Open How-to Guides or online Build docs\" },\n  { name: \"/home\", description: \"Return to the welcome screen\" },\n  { name: \"/new\", description: \"Start a new session\" },\n  { name: \"/fork\", description: \"Branch the current session into a peer agent\" },\n];\n\nconst ACTIVE = \"#e1e1e1\";\nconst INACTIVE = \"#8b8b90\";\nconst RULE = \"#505058\";\nconst NAME_COLS = 16;\n\nexport function GrokSlashMenu({\n  commands = DEFAULT,\n  className,\n}: {\n  commands?: GrokSlashCommand[];\n  className?: string;\n}) {\n  const [value, setValue] = React.useState(\"/\");\n  const [active, setActive] = React.useState(0);\n\n  const query = value.startsWith(\"/\") ? value.slice(1) : value;\n  const list = commands.filter((c) =>\n    c.name.slice(1).toLowerCase().startsWith(query.toLowerCase()),\n  );\n  const clampedActive = list.length ? Math.min(active, list.length - 1) : 0;\n\n  function onKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {\n    if (!list.length) return;\n    if (e.key === \"ArrowDown\") {\n      e.preventDefault();\n      setActive((a) => (a + 1) % list.length);\n    } else if (e.key === \"ArrowUp\") {\n      e.preventDefault();\n      setActive((a) => (a - 1 + list.length) % list.length);\n    }\n  }\n\n  return (\n    <div className={cn(\"font-mono text-[13px] leading-[1.55]\", className)}>\n      <div\n        className=\"mb-2 border-y py-1.5\"\n        style={{ borderColor: RULE }}\n        role=\"listbox\"\n        aria-label=\"Slash commands\"\n        aria-activedescendant={\n          list.length ? `grok-slash-${clampedActive}` : undefined\n        }\n      >\n        <ul className=\"space-y-0.5\">\n          {list.map((c, i) => {\n            const activeRow = i === clampedActive;\n            return (\n              <li\n                key={c.name}\n                id={`grok-slash-${i}`}\n                role=\"option\"\n                aria-selected={activeRow}\n                onMouseEnter={() => setActive(i)}\n                className=\"flex cursor-pointer items-baseline gap-2 truncate px-1\"\n                style={{ color: activeRow ? ACTIVE : INACTIVE }}\n              >\n                <span\n                  aria-hidden\n                  className=\"inline-block w-[2ch] shrink-0\"\n                  style={{ color: activeRow ? ACTIVE : \"transparent\" }}\n                >\n                  ❯\n                </span>\n                <span\n                  className=\"inline-block shrink-0\"\n                  style={{ width: `${NAME_COLS}ch` }}\n                >\n                  {c.name}\n                </span>\n                <span className=\"min-w-0 truncate\">{c.description}</span>\n              </li>\n            );\n          })}\n        </ul>\n      </div>\n\n      <GrokPrompt\n        value={value}\n        onChange={(e) => {\n          setValue(e.target.value);\n          setActive(0);\n        }}\n        onKeyDown={onKeyDown}\n        mode=\"always-approve\"\n        showShortcuts={false}\n      />\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/brainless/grok/grok-slash-menu.tsx"
    }
  ],
  "type": "registry:ui"
}