\n \n {ACTION_ICONS.map((icon, i) => (\n \n \n \n ))}\n setSourcesOpen((current) => !current)}\n className=\"ml-1.5 flex items-center gap-1.5 rounded-[6px] px-1 py-0.5 text-left transition-colors duration-150 hover:bg-hover\"\n >\n \n {sources.map((source) => (\n
\n\n \n {content.slice(0, count).map((token, i) =>\n token.cite ? (\n
\n
\n \n\n {/* follow-ups */}\n \n {sources.map((source) => (\n \n })
\n {source.name}\n {source.domain}\n \n ))}\n
\n {l.followUps}
\n\n {followUps.map((text, i) => (\n onFollowUp?.(text, i)}\n className=\"-mx-1.5 flex items-center gap-2 rounded-[7px] border-b border-line\n px-1.5 py-1.5 text-left text-[12.5px] text-ink transition-colors\n duration-100 hover:bg-hover-2\"\n style={\n done\n ? { animation: `fade-up 350ms cubic-bezier(0.23,1,0.32,1) ${i * 90}ms both` }\n : { opacity: 0 }\n }\n >\n \n {text}\n \n ))}\n
\n \n \n );\n}\n",
+ "type": "registry:component",
+ "target": "components/primitives/StreamingText.tsx"
+ }
+ ]
+}
\ No newline at end of file
diff --git a/docs/ui-ref/beautifului/task-rows.json b/docs/ui-ref/beautifului/task-rows.json
new file mode 100644
index 0000000..f68b25d
--- /dev/null
+++ b/docs/ui-ref/beautifului/task-rows.json
@@ -0,0 +1,18 @@
+{
+ "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+ "name": "task-rows",
+ "type": "registry:component",
+ "title": "Task Rows",
+ "description": "Live agent task status — running, failed, completed.",
+ "registryDependencies": [
+ "https://www.beautifului.dev/r/foundation.json"
+ ],
+ "files": [
+ {
+ "path": "components/primitives/TaskRows.tsx",
+ "content": "\"use client\";\n\nimport { useEffect, useState } from \"react\";\n\n/* ─────────────────────────────────────────────────────────\n * TASK ROWS\n *\n * 0ms rows enter staggered (80ms apart)\n * 600ms row 1 ring sweeps 0 → 66%\n * 1500ms row 1 expands — detail steps drop down\n * 3900ms row 1 collapses; row 2 flips to Failed + retry\n * 5300ms row 2 resolves to Completed\n * The status run completes once; task details stay clickable.\n * ───────────────────────────────────────────────────────── */\n\nconst TICKS = [600, 900, 2400, 1400, 2400, 600];\n\nfunction useTick(intervals: number[]) {\n const [tick, setTick] = useState(0);\n useEffect(() => {\n if (tick >= intervals.length - 1) return;\n const t = setTimeout(() => setTick((x) => x + 1), intervals[tick]);\n return () => clearTimeout(t);\n }, [tick, intervals]);\n return tick;\n}\n\nfunction SpinnerRing({ active, children }: { active?: boolean; children?: React.ReactNode }) {\n const size = 24, stroke = 2;\n const r = (size - stroke) / 2;\n const c = 2 * Math.PI * r;\n return (\n \n \n
\n \n \n \n );\n })}\n \n );\n}\n",
+ "type": "registry:component",
+ "target": "components/primitives/TaskRows.tsx"
+ }
+ ]
+}
\ No newline at end of file
diff --git a/docs/ui-ref/beautifului/thinking-state.json b/docs/ui-ref/beautifului/thinking-state.json
new file mode 100644
index 0000000..c478101
--- /dev/null
+++ b/docs/ui-ref/beautifului/thinking-state.json
@@ -0,0 +1,18 @@
+{
+ "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+ "name": "thinking-state",
+ "type": "registry:component",
+ "title": "Thinking",
+ "description": "Expandable traces — steps, reasoning, search, coding.",
+ "registryDependencies": [
+ "https://www.beautifului.dev/r/foundation.json"
+ ],
+ "files": [
+ {
+ "path": "components/primitives/ThinkingState.tsx",
+ "content": "\"use client\";\n\nimport { useEffect, useLayoutEffect, useRef, useState, type ReactNode } from \"react\";\n\n/* ─────────────────────────────────────────────────────────\n * THINKING — expandable agent trace, four variants\n *\n * Steps step list with spinner → muted checks\n * Reasoning prose reasoning that expands, then settles\n * Search web-search trace: query + sources read\n * Coding tool trace: files read, edits, commands\n *\n * The trace runs once, settles, and remains expandable.\n * ───────────────────────────────────────────────────────── */\n\nconst STAGES = [800, 600, 1800, 2600, 1600];\n\nfunction useSequence(steps: number[]) {\n const [stage, setStage] = useState(0);\n useEffect(() => {\n if (stage >= steps.length - 1) return;\n const t = setTimeout(() => setStage((s) => s + 1), steps[stage]);\n return () => clearTimeout(t);\n }, [stage, steps]);\n return stage;\n}\n\ntype Row = {\n primary: string;\n secondary?: string;\n mono?: boolean;\n add?: number;\n del?: number;\n href?: string;\n};\n\nconst VARIANTS: Record<\n string,\n { active: string; done: string; rows: Row[]; query?: string }\n> = {\n Steps: {\n active: \"Thinking\",\n done: \"Thought for 4 seconds\",\n rows: [\n { primary: \"Reading flavor briefs\" },\n { primary: \"Scanning supplier lists\" },\n { primary: \"Comparing tasting notes\", secondary: \"6 flavors\" },\n { primary: \"Writing the scoop report\" },\n ],\n },\n Reasoning: {\n active: \"Thinking\",\n done: \"Thought for 4 seconds\",\n rows: [\n { primary: \"Summer demand spikes for stone-fruit flavors — peach and apricot lead.\" },\n { primary: \"I should check cone inventory before promoting a waffle-bowl special.\" },\n ],\n },\n Search: {\n active: \"Searching the web\",\n done: \"Searched the web\",\n query: \"best waffle cone supplier\",\n rows: [\n { primary: \"Joy Cone\", secondary: \"joycone.com\", href: \"https://joycone.com/fs_products/waffle-cones/\" },\n { primary: \"WebstaurantStore\", secondary: \"webstaurantstore.com\", href: \"https://www.webstaurantstore.com/ice-cream-shop-supplies.html\" },\n { primary: \"The Konery\", secondary: \"thekonery.com\", href: \"https://www.thekonery.com/\" },\n ],\n },\n Coding: {\n active: \"Running tools\",\n done: \"Ran 3 tools\",\n rows: [\n { primary: \"Read\", secondary: \"flavors.ts\", mono: true },\n { primary: \"Edit\", secondary: \"ChurnSchedule.tsx\", mono: true, add: 74, del: 41 },\n { primary: \"Run\", secondary: \"npm run freeze\", mono: true },\n ],\n },\n};\n\nfunction Dot({ tone }: { tone: string }) {\n return (\n \n \n \n );\n}\n\nconst TONES = [\"bg-accent\", \"bg-orange\", \"bg-green\"];\n\nexport default function ThinkingState({\n variant = \"Steps\",\n onSettled,\n rows,\n active,\n done,\n icon,\n}: {\n variant?: string;\n onSettled?: () => void;\n /** override the built-in trace content (keeps the primitive reusable) */\n rows?: Row[];\n active?: string;\n done?: string;\n /** override the header glyph (defaults to the sparkle) */\n icon?: ReactNode;\n}) {\n const stage = useSequence(STAGES);\n const [manualExpanded, setManualExpanded] = useState\n \n
\n \n {row.details.map((d, j) => (\n \n {d.label}\n \n {d.meta}\n \n
\n ))}\n \n
\n \n \n );\n}\n",
+ "type": "registry:component",
+ "target": "components/primitives/ThinkingState.tsx"
+ }
+ ]
+}
\ No newline at end of file
diff --git a/docs/ui-ref/beautifului/tool-chips.json b/docs/ui-ref/beautifului/tool-chips.json
new file mode 100644
index 0000000..b962169
--- /dev/null
+++ b/docs/ui-ref/beautifului/tool-chips.json
@@ -0,0 +1,18 @@
+{
+ "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+ "name": "tool-chips",
+ "type": "registry:component",
+ "title": "Tool Chips",
+ "description": "Code edits and tool calls as compact chips.",
+ "registryDependencies": [
+ "https://www.beautifului.dev/r/foundation.json"
+ ],
+ "files": [
+ {
+ "path": "components/primitives/ToolChips.tsx",
+ "content": "\"use client\";\n\nimport { useEffect, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\n\n/* ─────────────────────────────────────────────────────────\n * TOOL CHIPS\n * An agent run as compact rows: tool calls with inline\n * chips, then file-diff chips summarizing the edits.\n * Hover a row to reveal its chevron; every row expands\n * to show what the tool actually did.\n * ───────────────────────────────────────────────────────── */\n\nconst STEP_MS = 700;\n\nconst Icons: Record\n
\n \n {v.query && (\n \n {content}\n \n );\n }\n\n if (variant === \"Coding\") {\n const selected = selectedTool === row.primary;\n return (\n setSelectedTool(selected ? null : row.primary)}\n className={`${rowClass} transition-colors duration-150 ${selected ? \"bg-inset\" : \"hover:bg-hover\"}`}\n style={animation}\n >\n {content}\n \n );\n }\n\n return (\n
\n \n \n {v.query}\n
\n )}\n {v.rows.slice(0, visible).map((row, i) => {\n const content = (\n <>\n {variant === \"Search\" && \n {content}\n
\n );\n })}\n {variant === \"Search\" && stage >= 3 && (\n \n +7 more\n \n )}\n \n {/* collapsed run header */}\n \n setOpen((current) => {\n onOpenChange?.(!current);\n return !current;\n })\n }\n className=\"-mx-1.5 flex w-fit items-center gap-1.5 rounded-control px-1.5 py-1 text-[12.5px] text-ink-2 transition-colors duration-100 hover:bg-hover-2\"\n >\n \n {copy.header}\n \n\n {/* tool call rows */}\n
\n {preview && typeof document !== \"undefined\" && createPortal(\n \n {/* -mx-1 + px-1.5 keeps content at the same x while giving the\n row hover pills room inside this overflow-hidden clip box */}\n
\n \n
\n\n {/* file-diff chips */}\n {step >= total && (\n \n {steps.slice(0, step).map((row) => {\n const rowOpen = openRows.has(row.label);\n return (\n
\n );\n })}\n \n toggleRow(row.label)}\n className=\"group/row -mx-[3px] flex h-7 w-[calc(100%+6px)] min-w-0 items-center gap-2 rounded-control px-[3px] text-left transition-colors duration-100 hover:bg-hover-2\"\n >\n \n \n {Icons[row.icon]}\n \n \n \n {row.label}\n \n {row.chip}\n \n \n\n {/* expanded detail */}\n \n
\n \n
\n \n {row.detail.map((line) => (\n \n {line.text}\n \n ))}\n
\n \n {diffs.map((d, i) => (\n \n \n {d.file}\n +{d.add}\n {d.del > 0 && −{d.del}}\n \n\n \n ))}\n \n {copy.more}\n \n
\n )}\n \n {preview.file}\n \n +{diffs.find((diff) => diff.file === preview.file)?.add}\n {(diffs.find((diff) => diff.file === preview.file)?.del ?? 0) > 0 && (\n −{diffs.find((diff) => diff.file === preview.file)?.del}\n )}\n \n
\n \n {(diffLines[preview.file] ?? []).map((line, index) => (\n \n {line.tone === \"add\" ? \"+\" : line.tone === \"del\" ? \"−\" : \" \"}\n {line.text}\n
\n ))}\n \n ,\n document.body,\n )}\n \n );\n}\n",
+ "type": "registry:component",
+ "target": "components/primitives/ToolChips.tsx"
+ }
+ ]
+}
\ No newline at end of file
diff --git a/docs/ui-ref/beautifului/value-pill.json b/docs/ui-ref/beautifului/value-pill.json
new file mode 100644
index 0000000..227e403
--- /dev/null
+++ b/docs/ui-ref/beautifului/value-pill.json
@@ -0,0 +1,18 @@
+{
+ "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+ "name": "value-pill",
+ "type": "registry:ui",
+ "title": "ValuePill",
+ "description": "Shared building block used by other Beautiful UI components.",
+ "registryDependencies": [
+ "https://www.beautifului.dev/r/foundation.json"
+ ],
+ "files": [
+ {
+ "path": "components/atoms/ValuePill.tsx",
+ "content": "type Tone = \"neutral\" | \"green\" | \"orange\" | \"red\" | \"accent\";\n\nconst TONES: Record