51:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 52:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 53:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 54:T1138,"use client"; import * as React from "react"; import { cn } from "@/lib/utils"; /** * GrokProjectPicker — "Run Grok Build in a project directory?" chooser. * * Captured from a fresh launch outside a trusted project: left-border card * with `(○)` radios for recent dirs plus a free-text `z` option. */ const BORDER = "#808080"; const FG = "#e1e1e1"; const MUTED = "#8b8b90"; const DIM = "#6c6c6c"; export type GrokProject = { id: string; name: string; path: string; meta?: string; }; const DEFAULT_PROJECTS: GrokProject[] = [ { id: "current", name: "brainless", path: "~/dev/brainless", meta: "current", }, { id: "cloudstate", name: "freestyle-cloudstate", path: "~/Documents/GitHub/freestyle-cloudstate", meta: "5h ago", }, { id: "conduit", name: "Conduit", path: "~/Documents/Conduit", meta: "5h ago", }, ]; export function GrokProjectPicker({ title = "Run Grok Build in a project directory?", description = "This gives Grok Build full context of your codebase for better results.", projects = DEFAULT_PROJECTS, defaultSelected = 0, onChoose, className, }: { title?: string; description?: string; projects?: GrokProject[]; defaultSelected?: number; onChoose?: (index: number | "custom") => void; className?: string; }) { const [sel, setSel] = React.useState(defaultSelected); const customIndex = projects.length; const options = [ ...projects.map((p, i) => ({ key: p.id, index: i, label: ( <> {p.name} {p.meta === "current" ? ( (current) ) : null} {p.path} {p.meta && p.meta !== "current" ? ( ({p.meta}) ) : null} ), })), { key: "custom", index: customIndex, label: Type your answer here, }, ]; function onKey(e: React.KeyboardEvent, i: number) { if (e.key === "ArrowDown" || e.key === "ArrowUp") { e.preventDefault(); const next = e.key === "ArrowDown" ? (i + 1) % options.length : (i - 1 + options.length) % options.length; setSel(next); (e.currentTarget.parentElement?.children[next] as HTMLElement)?.focus(); } else if (e.key === "Enter" || e.key === " ") { e.preventDefault(); setSel(i); onChoose?.(i === customIndex ? "custom" : i); } } return (

{title}

{description}

{options.map((opt) => { const active = sel === opt.index; const prefix = opt.index === customIndex ? "z" : String(opt.index + 1); return (

onKey(e, opt.index)} onClick={() => { setSel(opt.index); onChoose?.( opt.index === customIndex ? "custom" : opt.index, ); }} className={cn( "flex cursor-pointer items-baseline gap-2 outline-none focus-visible:ring-1 focus-visible:ring-white/30", active && "font-semibold", )} style={{ color: active ? FG : MUTED }} > {prefix}{" "} {active ? "(●)" : "(○)"} {opt.label}

); })}

↑/↓ navigate · Enter:submit

); } 4d:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[]}],["$","$L51",null,{"registryDependencies":[]}]]}],["$","$L52",null,{"sourceUrl":"https://brainless.swerdlow.dev/r/grok-project-picker.json","proxyUrl":"https://shadcnregistry.com/r/brainless/grok-project-picker","itemId":"@brainless/grok-project-picker"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L53",null,{"files":[{"path":"registry/brainless/grok/grok-project-picker.tsx","content":"$54","type":"registry:ui","target":"components/brainless/grok/grok-project-picker.tsx"}]}]]}],"$L55"]}]

Grok Project Picker

Installation

Files

components

Styles