{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "grok-project-picker",
  "title": "Grok Project Picker",
  "description": "Run Grok Build in a project directory? — left-border chooser with recent dirs and a free-text option.",
  "files": [
    {
      "path": "registry/brainless/grok/grok-project-picker.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * GrokProjectPicker — \"Run Grok Build in a project directory?\" chooser.\n *\n * Captured from a fresh launch outside a trusted project: left-border card\n * with `(○)` radios for recent dirs plus a free-text `z` option.\n */\nconst BORDER = \"#808080\";\nconst FG = \"#e1e1e1\";\nconst MUTED = \"#8b8b90\";\nconst DIM = \"#6c6c6c\";\n\nexport type GrokProject = {\n  id: string;\n  name: string;\n  path: string;\n  meta?: string;\n};\n\nconst DEFAULT_PROJECTS: GrokProject[] = [\n  {\n    id: \"current\",\n    name: \"brainless\",\n    path: \"~/dev/brainless\",\n    meta: \"current\",\n  },\n  {\n    id: \"cloudstate\",\n    name: \"freestyle-cloudstate\",\n    path: \"~/Documents/GitHub/freestyle-cloudstate\",\n    meta: \"5h ago\",\n  },\n  {\n    id: \"conduit\",\n    name: \"Conduit\",\n    path: \"~/Documents/Conduit\",\n    meta: \"5h ago\",\n  },\n];\n\nexport function GrokProjectPicker({\n  title = \"Run Grok Build in a project directory?\",\n  description = \"This gives Grok Build full context of your codebase for better results.\",\n  projects = DEFAULT_PROJECTS,\n  defaultSelected = 0,\n  onChoose,\n  className,\n}: {\n  title?: string;\n  description?: string;\n  projects?: GrokProject[];\n  defaultSelected?: number;\n  onChoose?: (index: number | \"custom\") => void;\n  className?: string;\n}) {\n  const [sel, setSel] = React.useState(defaultSelected);\n  const customIndex = projects.length;\n\n  const options = [\n    ...projects.map((p, i) => ({\n      key: p.id,\n      index: i,\n      label: (\n        <>\n          <span style={{ color: FG }}>{p.name}</span>\n          {p.meta === \"current\" ? (\n            <span style={{ color: DIM }}> (current)</span>\n          ) : null}\n          <span style={{ color: DIM }}>  {p.path}</span>\n          {p.meta && p.meta !== \"current\" ? (\n            <span style={{ color: DIM }}>  ({p.meta})</span>\n          ) : null}\n        </>\n      ),\n    })),\n    {\n      key: \"custom\",\n      index: customIndex,\n      label: <span style={{ color: MUTED }}>Type your answer here</span>,\n    },\n  ];\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 === customIndex ? \"custom\" : i);\n    }\n  }\n\n  return (\n    <div\n      className={cn(\n        \"border-l-2 pl-3 font-mono text-[13px] leading-[1.55]\",\n        className,\n      )}\n      style={{ borderColor: BORDER }}\n    >\n      <div className=\"mb-1 font-semibold\" style={{ color: FG }}>\n        {title}\n      </div>\n      <p className=\"mb-2 max-w-prose\" style={{ color: MUTED }}>\n        {description}\n      </p>\n\n      <div role=\"radiogroup\" aria-label={title} className=\"space-y-0.5\">\n        {options.map((opt) => {\n          const active = sel === opt.index;\n          const prefix = opt.index === customIndex ? \"z\" : String(opt.index + 1);\n          return (\n            <div\n              key={opt.key}\n              role=\"radio\"\n              aria-checked={active}\n              tabIndex={active ? 0 : -1}\n              onKeyDown={(e) => onKey(e, opt.index)}\n              onClick={() => {\n                setSel(opt.index);\n                onChoose?.(\n                  opt.index === customIndex ? \"custom\" : opt.index,\n                );\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                {prefix}{\" \"}\n                <span style={{ color: active ? FG : DIM }}>\n                    {active ? \"(●)\" : \"(○)\"}\n                  </span>\n              </span>\n              <span className=\"min-w-0 truncate\">{opt.label}</span>\n            </div>\n          );\n        })}\n      </div>\n\n      <div className=\"mt-2 text-[12px]\" style={{ color: DIM }}>\n        ↑/↓ navigate · Enter:submit\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/brainless/grok/grok-project-picker.tsx"
    }
  ],
  "type": "registry:ui"
}