{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "grok-prompt",
  "title": "Grok Prompt",
  "description": "Grok's rounded CSS-border composer with a real text input and model · mode legend (normal / plan / auto / always-approve / plan approval).",
  "files": [
    {
      "path": "registry/brainless/grok/grok-prompt.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * GrokPrompt — Grok CLI's rounded composer box.\n *\n * CSS border (no box-drawing glyphs) around a real text input. The model · mode\n * legend sits on the bottom edge like a fieldset legend. Plan mode tints the ❯\n * yellow; legend mode text stays muted gray.\n */\nexport type GrokMode =\n  | \"normal\"\n  | \"plan\"\n  | \"auto\"\n  | \"always-approve\"\n  | \"plan-approval\";\n\nconst BORDER = \"#505058\";\nconst FG = \"#e1e1e1\";\nconst MUTED = \"#6c6c6c\";\nconst SEP = \"#585858\";\nconst PLAN = \"#ffff00\"; // 38;5;11 — plan caret only\nconst SURFACE = \"#1a1a1a\"; // matches --term-bg so the legend punches the border\n\nconst MODE_LABEL: Record<GrokMode, string | null> = {\n  normal: null,\n  plan: \"plan\",\n  auto: \"auto\",\n  \"always-approve\": \"always-approve\",\n  \"plan-approval\": \"plan approval\",\n};\n\nexport function GrokPrompt({\n  value,\n  defaultValue = \"\",\n  onChange,\n  onKeyDown,\n  placeholder = \"\",\n  mode = \"always-approve\",\n  model = \"Grok 4.5 (xhigh)\",\n  showShortcuts = true,\n  busy = false,\n  className,\n  inputClassName,\n}: {\n  value?: string;\n  defaultValue?: string;\n  onChange?: React.ChangeEventHandler<HTMLInputElement>;\n  onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;\n  placeholder?: string;\n  mode?: GrokMode;\n  model?: string;\n  showShortcuts?: boolean;\n  /** Mid-turn: insert Ctrl+c:cancel into the shortcut hint row. */\n  busy?: boolean;\n  className?: string;\n  inputClassName?: string;\n}) {\n  const controlled = value !== undefined;\n  const modeLabel = MODE_LABEL[mode];\n  const caretColor = mode === \"plan\" || mode === \"plan-approval\" ? PLAN : FG;\n  const legend = modeLabel ? `${model} · ${modeLabel}` : model;\n\n  return (\n    <div className={cn(\"min-w-0 font-mono text-[13px] leading-[1.5]\", className)}>\n      <div\n        className=\"relative min-w-0 rounded-sm border px-2 py-1.5\"\n        style={{ borderColor: BORDER, background: SURFACE }}\n      >\n        <div className=\"flex min-w-0 items-center gap-0\">\n          <span\n            aria-hidden\n            className=\"shrink-0\"\n            style={{ color: caretColor }}\n          >\n            ❯\n          </span>\n          <input\n            type=\"text\"\n            aria-label=\"Prompt\"\n            placeholder={placeholder}\n            onKeyDown={onKeyDown}\n            {...(controlled\n              ? { value, onChange }\n              : { defaultValue, onChange })}\n            className={cn(\n              \"term-input min-w-0 flex-1 bg-transparent py-0.5 pl-[1ch] outline-none placeholder:text-[#6c6c6c]\",\n              inputClassName,\n            )}\n            style={\n              {\n                color: FG,\n                caretColor,\n                caretShape: \"block\",\n              } as React.CSSProperties\n            }\n          />\n        </div>\n\n        {/* legend punched into the bottom border */}\n        <span\n          className=\"absolute -bottom-2.5 right-2 max-w-[calc(100%-1rem)] truncate px-1 text-[12px] sm:right-3\"\n          style={{ background: SURFACE, color: MUTED }}\n          title={legend}\n        >\n          <span>{model}</span>\n          {modeLabel ? (\n            <>\n              <span style={{ color: SEP }}> · </span>\n              <span>{modeLabel}</span>\n            </>\n          ) : null}\n        </span>\n      </div>\n\n      {showShortcuts ? (\n        <div className=\"mt-3 flex flex-wrap items-center gap-2 text-[12px]\" style={{ color: MUTED }}>\n          <span>\n            <span className=\"font-semibold\" style={{ color: FG }}>\n              Shift+Tab\n            </span>\n            :mode\n          </span>\n          {busy ? (\n            <>\n              <span\n                aria-hidden\n                className=\"inline-block h-3 w-px\"\n                style={{ background: SEP }}\n              />\n              <span>\n                <span className=\"font-semibold\" style={{ color: FG }}>\n                  Ctrl+c\n                </span>\n                :cancel\n              </span>\n            </>\n          ) : null}\n          <span\n            aria-hidden\n            className=\"inline-block h-3 w-px\"\n            style={{ background: SEP }}\n          />\n          <span>\n            <span className=\"font-semibold\" style={{ color: FG }}>\n              Ctrl+x\n            </span>\n            :shortcuts\n          </span>\n        </div>\n      ) : null}\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/brainless/grok/grok-prompt.tsx"
    }
  ],
  "type": "registry:ui"
}