{title}
+ {children} +
+
+
+
+
+
+
+
+
+
+
+
+ // In production this maps to POST /api/approvals/{id}/resolve.
+ setLog((l) => [
+ ...l.slice(-4),
+ `resolve ${APPROVAL_REQUEST.id}: ${JSON.stringify(answers)}`,
+ ])
+ }
+ />
+
+
+
+
+
+ );
+}
diff --git a/src/frontend/src/spike/beautifui/atoms/Button.tsx b/src/frontend/src/spike/beautifui/atoms/Button.tsx
new file mode 100644
index 0000000..64a5665
--- /dev/null
+++ b/src/frontend/src/spike/beautifui/atoms/Button.tsx
@@ -0,0 +1,48 @@
+/* Vendored from BeautifulUI registry: https://www.beautifului.dev/r/button.json
+ * Spike #293 — DO NOT ship in templates/frontend. Imports rewritten to @/spike/beautifui/*.
+ * License: MIT (upstream https://github.com/slev12397/beautiful-ui). */
+import type { ButtonHTMLAttributes } from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+
+const filledShadow = "shadow-[inset_0_1px_0_rgba(255,255,255,0.14)]";
+
+/* Pill-shaped by default — the app's core button style. Explicit symmetric
+ * padding (not a fixed height) so the top/bottom spacing is always equal. */
+export const buttonVariants = cva(
+ `inline-flex items-center justify-center font-medium select-none
+ transition-[transform,background-color,opacity] duration-150 ease-out
+ active:scale-[0.96] disabled:opacity-50 disabled:pointer-events-none`,
+ {
+ variants: {
+ variant: {
+ primary: `bg-ink text-canvas hover:opacity-90 dark:bg-ink dark:text-canvas ${filledShadow}`,
+ secondary: "bg-surface text-ink shadow-btn hover:bg-inset aria-expanded:bg-hover",
+ ghost: "bg-hover-2 text-ink hover:bg-line-strong",
+ accent: `bg-accent text-white hover:bg-accent-ink ${filledShadow}`,
+ success: `bg-green text-white hover:brightness-95 ${filledShadow}`,
+ /* transparent until hovered — for dense toolbars/action rows */
+ quiet: "text-ink hover:bg-hover",
+ },
+ size: {
+ /* compact toolbar pill — fixed height, lighter weight */
+ xs: "h-7 rounded-full px-2.5 text-[12px] font-normal leading-none gap-1",
+ /* canonical action pill — 27px tall, roomy sides */
+ sm: "h-[27px] px-3 text-[13px] leading-none rounded-full gap-1.5",
+ md: "px-4 py-[9px] text-sm leading-none rounded-full gap-2",
+ },
+ },
+ defaultVariants: { variant: "secondary", size: "md" },
+ },
+);
+
+export type ButtonVariant = NonNullable
+
+
+ BeautifulUI spike
+Issue #293 · mock PraisonAIUI event streams
+
+ {log.join("\n") || "…"}
+
+
+
+
+
+
+ {t.sentMessage}
+
+ {resettable && (
+
+ )}
+
+ );
+ }
+
+ return (
+
+
+ );
+}
diff --git a/src/frontend/src/spike/beautifui/primitives/GlideMenu.tsx b/src/frontend/src/spike/beautifui/primitives/GlideMenu.tsx
new file mode 100644
index 0000000..4c6bc3f
--- /dev/null
+++ b/src/frontend/src/spike/beautifui/primitives/GlideMenu.tsx
@@ -0,0 +1,60 @@
+/* Vendored from BeautifulUI registry: https://www.beautifului.dev/r/glide-menu.json
+ * Spike #293 — DO NOT ship in templates/frontend. Imports rewritten to @/spike/beautifui/*.
+ * License: MIT (upstream https://github.com/slev12397/beautiful-ui). */
+import { useRef, useState, type ReactNode } from "react";
+
+type GlideMenuProps = {
+ children: ReactNode;
+ className?: string;
+ highlightClassName?: string;
+ rowSelector?: string;
+};
+
+/** A single hover layer that glides between interactive menu rows. */
+export default function GlideMenu({
+ children,
+ className = "",
+ highlightClassName = "inset-x-0 rounded-[8px] bg-hover",
+ rowSelector = "[data-menu-row]",
+}: GlideMenuProps) {
+ const ref = useRef
+
+
+
+ {/* the question itself is the heading */}
+
+
+ {/* footer — step nav (rolling counter) + pill actions */}
+
+
+
+ {questions.map((question, qIdx) => {
+ const active = qIdx === qi;
+ // Before the first measure, mount only the active question so the
+ // card opens at its real height instead of flashing to full height.
+ if (!ready && !active) return null;
+ const picked = answers[qIdx] ?? [];
+ const questionStyle: CSSProperties = {
+ opacity: active ? 1 : 0,
+ transition: animate ? `opacity ${SLIDE}` : undefined,
+ pointerEvents: active ? undefined : "none",
+ };
+ return (
+
+ { questionRefs.current[qIdx] = el; }}
+ aria-hidden={active ? undefined : true}
+ style={questionStyle}
+ >
+
+ {question.options.map((option, i) => {
+ const on = picked.includes(i);
+ return (
+
+ );
+ })}
+
+
+
+ );
+ })}
+ {question.q}
+
+
+
+
+
+
+
+
+
+
+
+ moveTo(event.target)}
+ onMouseLeave={() => setVisible(false)}
+ onFocusCapture={(event) => moveTo(event.target)}
+ onBlurCapture={(event) => {
+ if (!ref.current?.contains(event.relatedTarget as Node | null)) setVisible(false);
+ }}
+ className={`group/glide-menu relative ${className}`}
+ >
+
+ {children}
+
+ );
+}
diff --git a/src/frontend/src/spike/beautifui/primitives/StreamingText.tsx b/src/frontend/src/spike/beautifui/primitives/StreamingText.tsx
new file mode 100644
index 0000000..4f0c4e3
--- /dev/null
+++ b/src/frontend/src/spike/beautifui/primitives/StreamingText.tsx
@@ -0,0 +1,253 @@
+/* Vendored from BeautifulUI registry: https://www.beautifului.dev/r/streaming-text.json
+ * Spike #293 — DO NOT ship in templates/frontend. Imports rewritten to @/spike/beautifui/*.
+ * License: MIT (upstream https://github.com/slev12397/beautiful-ui). */
+import { useEffect, useState } from "react";
+
+/* ─────────────────────────────────────────────────────────
+ * STREAMING TEXT
+ * Words resolve out of blur, inline citations appear in
+ * context, then actions and follow-up prompts become usable.
+ * ───────────────────────────────────────────────────────── */
+
+const WORD_MS = 55;
+const HOLD_MS = 3400;
+
+/* one streamed word, or a `cite` placeholder that renders an inline source chip */
+export type StreamingToken = { text: string; cite?: boolean };
+
+const TOKENS: StreamingToken[] = [
+ ..."Pistachio is your fastest-growing flavor — sales are up 23% this month and margins beat vanilla by 8 points."
+ .split(" ")
+ .map((text) => ({ text })),
+ { text: "", cite: true },
+ ..."Stone-fruit flavors are trending in the same range."
+ .split(" ")
+ .map((text) => ({ text })),
+];
+
+const FOLLOW_UPS = [
+ "Which flavors sell best in winter",
+ "Compare gelato and soft serve margins",
+];
+
+const SOURCE_IMAGES = {
+ scoop:
+ "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='16' fill='%231f7a5f'/%3E%3Cpath d='M20 36c0 7 5.4 12 12 12s12-5 12-12H20Z' fill='%23fff'/%3E%3Ccircle cx='32' cy='25' r='11' fill='%23bff3dd'/%3E%3Cpath d='M24 24c4-7 13-7 17 0' fill='none' stroke='%231f7a5f' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E",
+ trends:
+ "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='16' fill='%232f6fec'/%3E%3Cpath d='M15 43 27 31l8 7 14-18' fill='none' stroke='%23fff' stroke-width='7' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='49' cy='20' r='5' fill='%23bfe0ff'/%3E%3C/svg%3E",
+ market:
+ "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='16' fill='%23e56d24'/%3E%3Cpath d='M17 45V25h8v20h-8Zm11 0V16h8v29h-8Zm11 0V30h8v15h-8Z' fill='%23fff'/%3E%3Cpath d='M16 49h32' stroke='%23ffd6b8' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E",
+};
+
+/* one cited source rendered as an inline chip and in the sources list */
+export type StreamingSource = { name: string; domain: string; href: string; image: string };
+
+const SOURCES: StreamingSource[] = [
+ { name: "Scoop Data", domain: "scoopdata.io", href: "https://scoopdata.io/", image: SOURCE_IMAGES.scoop },
+ { name: "Trends Index", domain: "trends.google.com", href: "https://trends.google.com/trends/", image: SOURCE_IMAGES.trends },
+ { name: "Market Basket", domain: "marketbasket.io", href: "https://marketbasket.io/", image: SOURCE_IMAGES.market },
+];
+
+function sourceImage(source: StreamingSource) {
+ return source.image;
+}
+
+function SourceChip({ source }: { source?: StreamingSource }) {
+ if (!source) return null;
+ return (
+
+
+
+ );
+}
diff --git a/src/frontend/src/spike/beautifui/primitives/ThinkingState.tsx b/src/frontend/src/spike/beautifui/primitives/ThinkingState.tsx
new file mode 100644
index 0000000..da324c8
--- /dev/null
+++ b/src/frontend/src/spike/beautifui/primitives/ThinkingState.tsx
@@ -0,0 +1,302 @@
+/* Vendored from BeautifulUI registry: https://www.beautifului.dev/r/thinking-state.json
+ * Spike #293 — DO NOT ship in templates/frontend. Imports rewritten to @/spike/beautifui/*.
+ * License: MIT (upstream https://github.com/slev12397/beautiful-ui). */
+import { useEffect, useLayoutEffect, useRef, useState, type ReactNode } from "react";
+
+/* ─────────────────────────────────────────────────────────
+ * THINKING — expandable agent trace, four variants
+ *
+ * Steps step list with spinner → muted checks
+ * Reasoning prose reasoning that expands, then settles
+ * Search web-search trace: query + sources read
+ * Coding tool trace: files read, edits, commands
+ *
+ * The trace runs once, settles, and remains expandable.
+ * ───────────────────────────────────────────────────────── */
+
+const STAGES = [800, 600, 1800, 2600, 1600];
+
+function useSequence(steps: number[]) {
+ const [stage, setStage] = useState(0);
+ useEffect(() => {
+ if (stage >= steps.length - 1) return;
+ const t = setTimeout(() => setStage((s) => s + 1), steps[stage]);
+ return () => clearTimeout(t);
+ }, [stage, steps]);
+ return stage;
+}
+
+type Row = {
+ primary: string;
+ secondary?: string;
+ mono?: boolean;
+ add?: number;
+ del?: number;
+ href?: string;
+};
+
+const VARIANTS: Record<
+ string,
+ { active: string; done: string; rows: Row[]; query?: string }
+> = {
+ Steps: {
+ active: "Thinking",
+ done: "Thought for 4 seconds",
+ rows: [
+ { primary: "Reading flavor briefs" },
+ { primary: "Scanning supplier lists" },
+ { primary: "Comparing tasting notes", secondary: "6 flavors" },
+ { primary: "Writing the scoop report" },
+ ],
+ },
+ Reasoning: {
+ active: "Thinking",
+ done: "Thought for 4 seconds",
+ rows: [
+ { primary: "Summer demand spikes for stone-fruit flavors — peach and apricot lead." },
+ { primary: "I should check cone inventory before promoting a waffle-bowl special." },
+ ],
+ },
+ Search: {
+ active: "Searching the web",
+ done: "Searched the web",
+ query: "best waffle cone supplier",
+ rows: [
+ { primary: "Joy Cone", secondary: "joycone.com", href: "https://joycone.com/fs_products/waffle-cones/" },
+ { primary: "WebstaurantStore", secondary: "webstaurantstore.com", href: "https://www.webstaurantstore.com/ice-cream-shop-supplies.html" },
+ { primary: "The Konery", secondary: "thekonery.com", href: "https://www.thekonery.com/" },
+ ],
+ },
+ Coding: {
+ active: "Running tools",
+ done: "Ran 3 tools",
+ rows: [
+ { primary: "Read", secondary: "flavors.ts", mono: true },
+ { primary: "Edit", secondary: "ChurnSchedule.tsx", mono: true, add: 74, del: 41 },
+ { primary: "Run", secondary: "npm run freeze", mono: true },
+ ],
+ },
+};
+
+function Dot({ tone }: { tone: string }) {
+ return (
+
+
+
+ );
+}
+
+const TONES = ["bg-accent", "bg-orange", "bg-green"];
+
+export default function ThinkingState({
+ variant = "Steps",
+ onSettled,
+ rows,
+ active,
+ done,
+ icon,
+}: {
+ variant?: string;
+ onSettled?: () => void;
+ /** override the built-in trace content (keeps the primitive reusable) */
+ rows?: Row[];
+ active?: string;
+ done?: string;
+ /** override the header glyph (defaults to the sparkle) */
+ icon?: ReactNode;
+}) {
+ const stage = useSequence(STAGES);
+ const [manualExpanded, setManualExpanded] = useState
+ {content.slice(0, count).map((token, i) =>
+ token.cite ? (
+
+ {ACTION_ICONS.map((icon, i) => (
+
+ ))}
+
+
+
+
+
+
+ {/* follow-ups */}
+
+
+
+ {sources.map((source) => (
+
+ })
+ {source.name}
+ {source.domain}
+
+ ))}
+
+
+
+ {l.followUps}
+
+ {followUps.map((text, i) => (
+
+ ))}
+
+
+ {/* header — shared across variants */}
+
+
+ {/* expandable trace */}
+
+ );
+}
diff --git a/src/frontend/src/spike/main.tsx b/src/frontend/src/spike/main.tsx
new file mode 100644
index 0000000..f5bb13f
--- /dev/null
+++ b/src/frontend/src/spike/main.tsx
@@ -0,0 +1,11 @@
+/* Spike #293 — dev-only entry. Not part of the production bundle. */
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import "@/spike/beautifui/foundation.css";
+import SpikePage from "@/spike/SpikePage";
+
+createRoot(document.getElementById("root")!).render(
+
+
+
+
+
+
+
+
+ {v.query && (
+
+
+
+ {v.query}
+
+ )}
+ {v.rows.slice(0, visible).map((row, i) => {
+ const content = (
+ <>
+ {variant === "Search" &&
+ {content}
+
+ );
+ })}
+ {variant === "Search" && stage >= 3 && (
+
+ +7 more
+
+ )}
+