{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "claude-prompt",
  "title": "Claude Prompt",
  "description": "The input composer — dual CSS rules around a real text input, effort chips (low ○ / medium ◐ / high ● / xhigh ◉ / max ◈ / ultracode ✦), and shift+tab modes (auto / manual / accept-edits / plan).",
  "files": [
    {
      "path": "registry/brainless/claude/claude-prompt.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * ClaudePrompt — Claude Code's input composer.\n *\n * Dual CSS rules around a real text input (❯ prefix), effort chip above, and a\n * mode line below. Mode colors/glyphs match shift+tab captures:\n *   auto          ⏵⏵ gold\n *   manual        ⏸  gray\n *   accept-edits  ⏵⏵ lavender\n *   plan          ⏸  teal\n *\n * Effort chips match `/effort` captures (glyph fills as effort rises):\n *   low ○ · medium ◐ · high ● · xhigh ◉ · max ◈ · ultracode ✦\n * Ultracode also paints the prompt rules as a rainbow cycle.\n */\nexport type ClaudeMode = \"auto\" | \"manual\" | \"accept-edits\" | \"plan\";\n\nexport type ClaudeEffort =\n  | \"low\"\n  | \"medium\"\n  | \"high\"\n  | \"xhigh\"\n  | \"max\"\n  | \"ultracode\";\n\nconst FG = \"#c0caf5\";\nconst GRAY = \"#949494\";\nconst RULE = \"#808080\"; // 38;5;244\n\n/** Ultracode prompt-rule cycle from live captures (38;5;146→182→210→216→222→151). */\nconst ULTRACODE_RAINBOW =\n  \"linear-gradient(90deg,#afafd7,#d7afd7,#ff87af,#ffaf87,#ffd787,#afd787,#afafd7)\";\n\nconst MODES: Record<\n  ClaudeMode,\n  { glyph: string; label: string; color: string; hint: string }\n> = {\n  auto: {\n    glyph: \"⏵⏵\",\n    label: \"auto mode on\",\n    color: \"#ffd700\", // 38;5;220\n    hint: \"(shift+tab to cycle) · ← for agents\",\n  },\n  manual: {\n    glyph: \"⏸\",\n    label: \"manual mode on\",\n    color: GRAY,\n    hint: \"· ? for shortcuts · ← for agents\",\n  },\n  \"accept-edits\": {\n    glyph: \"⏵⏵\",\n    label: \"accept edits on\",\n    color: \"#afafd7\", // 38;5;147\n    hint: \"(shift+tab to cycle) · ← for agents\",\n  },\n  plan: {\n    glyph: \"⏸\",\n    label: \"plan mode on\",\n    color: \"#5fafaf\", // 38;5;73\n    hint: \"(shift+tab to cycle) · ← for agents\",\n  },\n};\n\nconst EFFORTS: Record<\n  ClaudeEffort,\n  { glyph: string; label: string; rainbow?: boolean }\n> = {\n  low: { glyph: \"○\", label: \"low · /effort\" },\n  medium: { glyph: \"◐\", label: \"medium · /effort\" },\n  high: { glyph: \"●\", label: \"high · /effort\" },\n  xhigh: { glyph: \"◉\", label: \"xhigh · /effort\" },\n  max: { glyph: \"◈\", label: \"max · /effort\" },\n  ultracode: {\n    glyph: \"✦\",\n    label: \"ultracode · xhigh effort + dynamic workflows for maximum thoroughness\",\n    rainbow: true,\n  },\n};\n\nexport function ClaudePrompt({\n  value,\n  defaultValue = \"\",\n  onChange,\n  onKeyDown,\n  placeholder = \"\",\n  mode = \"auto\",\n  effort = \"xhigh\",\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?: ClaudeMode;\n  /** Effort chip above the prompt. Pass `false` to hide. */\n  effort?: ClaudeEffort | false;\n  className?: string;\n  inputClassName?: string;\n}) {\n  const m = MODES[mode];\n  const e = effort === false ? null : EFFORTS[effort];\n  const controlled = value !== undefined;\n  const rainbow = Boolean(e?.rainbow);\n\n  return (\n    <div className={cn(\"min-w-0 font-mono text-[13px] leading-[1.6]\", className)}>\n      {e ? (\n        <div\n          className=\"flex justify-end px-1 pb-1 text-[12px]\"\n          style={{ color: GRAY }}\n        >\n          <span className=\"min-w-0 break-words text-right\">\n            <span aria-hidden>{e.glyph}</span> {e.label}\n          </span>\n        </div>\n      ) : null}\n\n      <div\n        className=\"flex min-w-0 items-center gap-0 border-y py-0.5\"\n        style={\n          rainbow\n            ? {\n                borderImageSource: ULTRACODE_RAINBOW,\n                borderImageSlice: 1,\n                borderTopWidth: 1,\n                borderBottomWidth: 1,\n                borderTopStyle: \"solid\",\n                borderBottomStyle: \"solid\",\n              }\n            : { borderColor: RULE }\n        }\n      >\n        <span aria-hidden className=\"shrink-0 pl-0 pr-0\" style={{ color: FG }}>\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-[#565f89]\",\n            inputClassName,\n          )}\n          style={{ color: FG, caretColor: FG, caretShape: \"block\" } as React.CSSProperties}\n        />\n      </div>\n\n      <div className=\"mt-1.5 min-w-0 break-words px-1 text-[12px]\">\n        <span style={{ color: m.color }}>\n          <span aria-hidden>{m.glyph} </span>\n          {m.label}\n        </span>\n        {m.hint ? <span style={{ color: GRAY }}> {m.hint}</span> : null}\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/brainless/claude/claude-prompt.tsx"
    }
  ],
  "type": "registry:ui"
}