50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T1a95,"use client"; import * as React from "react"; import { CircleDashedIcon, CheckIcon, MinusIcon, MoreHorizontalIcon } from "lucide-react"; import { enterChildren, enterOnce, marksIn, motionScale } from "@/lib/motion"; import { Button } from "@/registry/cuelark/ui/button"; import { cn } from "@/lib/utils"; type PlanStep = { label: string; done?: boolean }; type PlanProps = Omit, "title"> & { title?: React.ReactNode; steps: PlanStep[]; onApprove?: () => void; onReject?: () => void; /** Run automatically after this many seconds unless cancelled (a ring counts down on the Run button). */ autoRun?: number; /** Steps shown before "N more". */ visible?: number; /** Bind ⌘/Ctrl+Enter to run and Esc to reject while the plan is pending. */ shortcuts?: boolean; /** Start already decided, e.g. when rendering a past turn from history. */ defaultState?: "pending" | "approved" | "rejected"; }; /** * A plan an agent wants to execute, held for your go-ahead. Crop marks lock onto it as it arrives; long plans fold * after a few steps; Run can count down to auto-approve (cancel by pressing it's ring). Resolved plans settle quietly. */ function Plan({ title = "Plan", steps, onApprove, onReject, autoRun, visible = 4, shortcuts = true, defaultState = "pending", className, ...props }: PlanProps) { const [state, setState] = React.useState(defaultState); const [expanded, setExpanded] = React.useState(false); const [left, setLeft] = React.useState(autoRun ?? 0); const [counting, setCounting] = React.useState(!!autoRun && defaultState === "pending"); const ref = React.useRef(null); const approve = React.useCallback(() => { setState("approved"); setCounting(false); onApprove?.(); }, [onApprove]); const reject = React.useCallback(() => { setState("rejected"); setCounting(false); onReject?.(); }, [onReject]); React.useLayoutEffect(() => { const el = ref.current; enterOnce(el, (s) => ({ opacity: 0, y: 10 * s }), { duration: 0.4 }); if (el && motionScale(el)) { marksIn(el, 0.1); const steps = el.querySelector("ol"); if (steps) enterChildren(steps.children, { opacity: 0, x: -6 }, { stagger: 0.06, delay: 0.15, duration: 0.3 }); } }, []); React.useEffect(() => { if (!counting || state !== "pending") return; if (left <= 0) return approve(); const id = setTimeout(() => setLeft((l) => Math.max(0, l - 0.1)), 100); return () => clearTimeout(id); }, [counting, left, state, approve]); React.useEffect(() => { if (!shortcuts || state !== "pending") return; const onKey = (e: KeyboardEvent) => { if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) approve(); if (e.key === "Escape") reject(); }; window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, [shortcuts, state, approve, reject]); const hidden = Math.max(0, steps.length - visible); const shown = expanded ? steps : steps.slice(0, visible); const pending = state === "pending"; return (

{title} {steps.filter((s) => s.done).length}/{steps.length}

{s.done ? ( ) : ( )} {s.label}

{pending ? (

) : (

{state === "approved" ? "Approved, running" : "Rejected"}

)}

); } function CountdownRing({ left, total, onCancel }: { left: number; total: number; onCancel: () => void }) { const r = 6; const c = 2 * Math.PI * r; return ( { e.stopPropagation(); onCancel(); }} onKeyDown={(e) => (e.key === "Enter" || e.key === " ") && (e.stopPropagation(), e.preventDefault(), onCancel())} className="relative after:absolute after:-inset-2 -ms-1 grid size-4 place-items-center rounded-full" > ); } export { Plan }; export type { PlanProps, PlanStep }; 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L50",null,{"namespace":"@cuelark","registryDependencies":["utils","https://ui.cuelark.com/r/theme.json","https://ui.cuelark.com/r/button.json","https://ui.cuelark.com/r/motion.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"src/registry/cuelark/ui/plan.tsx","content":"$52","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]