{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "grok-permission",
  "title": "Grok Permission",
  "description": "Grok's left-border approval card with (●)/(○) radios and a 1/3:select hint bar.",
  "files": [
    {
      "path": "registry/brainless/grok/grok-permission.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * GrokPermission — Grok CLI's left-border approval card.\n *\n * Captured grammar (v0.2.93): a `┃` gutter, title + command, then numbered\n * `(●)` / `(○)` radios. Footer hint: `1/3:select │ Ctrl+o:yolo │ Ctrl+c:cancel`.\n */\nconst BORDER = \"#808080\"; // 38;5;8\nconst FG = \"#e1e1e1\";\nconst MUTED = \"#8b8b90\";\nconst DIM = \"#6c6c6c\";\n\nconst DEFAULT_OPTIONS = [\n  \"Yes, and don't ask again for anything (always-approve mode)\",\n  \"Yes, proceed\",\n  \"No, reject (type to add feedback)\",\n];\n\nexport function GrokPermission({\n  title = \"Write permission probe output file\",\n  command = \"echo permission-probe-ok > probe-out.txt\",\n  options = DEFAULT_OPTIONS,\n  defaultSelected = 0,\n  onChoose,\n  className,\n}: {\n  title?: string;\n  command?: string;\n  options?: string[];\n  defaultSelected?: number;\n  onChoose?: (index: number) => void;\n  className?: string;\n}) {\n  const [sel, setSel] = React.useState(defaultSelected);\n\n  function onKey(e: React.KeyboardEvent, i: number) {\n    if (e.key === \"ArrowDown\" || e.key === \"ArrowUp\") {\n      e.preventDefault();\n      const next =\n        e.key === \"ArrowDown\"\n          ? (i + 1) % options.length\n          : (i - 1 + options.length) % options.length;\n      setSel(next);\n      (e.currentTarget.parentElement?.children[next] as HTMLElement)?.focus();\n    } else if (e.key === \"Enter\" || e.key === \" \") {\n      e.preventDefault();\n      setSel(i);\n      onChoose?.(i);\n    }\n  }\n\n  return (\n    <div className={cn(\"font-mono text-[13px] leading-[1.55]\", className)}>\n      <div\n        className=\"border-l-2 pl-3\"\n        style={{ borderColor: BORDER }}\n        role=\"group\"\n        aria-label={title}\n      >\n        <div className=\"mb-1\" style={{ color: FG }}>\n          {title}\n        </div>\n        <div className=\"mb-2\" style={{ color: MUTED }}>\n          {command}\n        </div>\n\n        <div role=\"radiogroup\" aria-label={title} className=\"space-y-0.5\">\n          {options.map((opt, i) => {\n            const active = sel === i;\n            return (\n              <div\n                key={i}\n                role=\"radio\"\n                aria-checked={active}\n                tabIndex={active ? 0 : -1}\n                onKeyDown={(e) => onKey(e, i)}\n                onClick={() => {\n                  setSel(i);\n                  onChoose?.(i);\n                }}\n                className={cn(\n                  \"flex cursor-pointer items-baseline gap-2 outline-none focus-visible:ring-1 focus-visible:ring-white/30\",\n                  active && \"font-semibold\",\n                )}\n                style={{ color: active ? FG : MUTED }}\n              >\n                <span aria-hidden className=\"shrink-0 tabular-nums\">\n                  {i + 1}{\" \"}\n                  <span style={{ color: active ? FG : DIM }}>\n                    {active ? \"(●)\" : \"(○)\"}\n                  </span>\n                </span>\n                <span>{opt}</span>\n              </div>\n            );\n          })}\n        </div>\n      </div>\n\n      <div\n        className=\"mt-3 flex flex-wrap items-center gap-x-2 text-[12px]\"\n        style={{ color: DIM }}\n      >\n        <span>\n          <span className=\"font-semibold\" style={{ color: FG }}>\n            {sel + 1}/{options.length}\n          </span>\n          :select\n        </span>\n        <span aria-hidden>│</span>\n        <span>\n          <span className=\"font-semibold\" style={{ color: FG }}>\n            Ctrl+o\n          </span>\n          :yolo\n        </span>\n        <span aria-hidden>│</span>\n        <span>\n          <span className=\"font-semibold\" style={{ color: FG }}>\n            Ctrl+c\n          </span>\n          :cancel\n        </span>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/brainless/grok/grok-permission.tsx"
    }
  ],
  "type": "registry:ui"
}