Claude Prompt

1"use client";
2 
3import * as React from "react";
4import { cn } from "@/lib/utils";
5 
6/**
7 * ClaudePrompt — Claude Code's input composer.
8 *
9 * Dual CSS rules around a real text input (❯ prefix), effort chip above, and a
10 * mode line below. Mode colors/glyphs match shift+tab captures:
11 *   auto          ⏵⏵ gold
12 *   manual        ⏸  gray
13 *   accept-edits  ⏵⏵ lavender
14 *   plan          ⏸  teal
15 *
16 * Effort chips match `/effort` captures (glyph fills as effort rises):
17 *   low ○ · medium ◐ · high ● · xhigh ◉ · max ◈ · ultracode ✦
18 * Ultracode also paints the prompt rules as a rainbow cycle.
19 */
20export type ClaudeMode = "auto" | "manual" | "accept-edits" | "plan";
21 
22export type ClaudeEffort =
23  | "low"
24  | "medium"
25  | "high"
26  | "xhigh"
27  | "max"
28  | "ultracode";
29 
30const FG = "#c0caf5";
31const GRAY = "#949494";
32const RULE = "#808080"; // 38;5;244
33 
34/** Ultracode prompt-rule cycle from live captures (38;5;146→182→210→216→222→151). */
35const ULTRACODE_RAINBOW =
36  "linear-gradient(90deg,#afafd7,#d7afd7,#ff87af,#ffaf87,#ffd787,#afd787,#afafd7)";
37 
38const MODES: Record<
39  ClaudeMode,
40  { glyph: string; label: string; color: string; hint: string }
41> = {
42  auto: {
43    glyph: "⏵⏵",
44    label: "auto mode on",
45    color: "#ffd700", // 38;5;220
46    hint: "(shift+tab to cycle) · ← for agents",
47  },
48  manual: {
49    glyph: "⏸",
50    label: "manual mode on",
51    color: GRAY,
52    hint: "· ? for shortcuts · ← for agents",
53  },
54  "accept-edits": {
55    glyph: "⏵⏵",
56    label: "accept edits on",
57    color: "#afafd7", // 38;5;147
58    hint: "(shift+tab to cycle) · ← for agents",
59  },
60  plan: {
61    glyph: "⏸",
62    label: "plan mode on",
63    color: "#5fafaf", // 38;5;73
64    hint: "(shift+tab to cycle) · ← for agents",
65  },
66};
67 
68const EFFORTS: Record<
69  ClaudeEffort,
70  { glyph: string; label: string; rainbow?: boolean }
71> = {
72  low: { glyph: "○", label: "low · /effort" },
73  medium: { glyph: "◐", label: "medium · /effort" },
74  high: { glyph: "●", label: "high · /effort" },
75  xhigh: { glyph: "◉", label: "xhigh · /effort" },
76  max: { glyph: "◈", label: "max · /effort" },
77  ultracode: {
78    glyph: "✦",
79    label: "ultracode · xhigh effort + dynamic workflows for maximum thoroughness",
80    rainbow: true,
81  },
82};
83 
84export function ClaudePrompt({
85  value,
86  defaultValue = "",
87  onChange,
88  onKeyDown,
89  placeholder = "",
90  mode = "auto",
91  effort = "xhigh",
92  className,
93  inputClassName,
94}: {
95  value?: string;
96// … truncated