4e: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"] 4f: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"] 50:T2b7e,// Hairline UI · plan · MIT License // Copyright (c) 2026 Hairline UI · https://hairlineui.com/license#components "use client"; import * as React from "react"; import { ChevronDown, ListChecks, X } from "lucide-react"; import { NumberRoll } from "./number-roll"; /* ───────────────────────────────────────────────────────── * PLAN: an agent's checklist, ticking itself off * * pending not started * running being worked on now; the ring turns into a spinner * done finished; the spinner blurs into a check that draws * itself, and a strike-through draws across the label * skipped no longer needed * failed couldn't be done; the reason folds open underneath * * A hairline under the header fills as tasks finish and the count * rolls ("3 of 5"). When every task is settled "done" slides in * beside it and the plan folds into that one line. * ───────────────────────────────────────────────────────── */ export type PlanTaskStatus = "pending" | "running" | "done" | "skipped" | "failed"; export interface PlanTask { id?: string; label: string; /** A note under the task, e.g. why it failed or what it produced. */ detail?: string; status: PlanTaskStatus; } export interface PlanProps extends Omit, "title"> { tasks: PlanTask[]; title?: string; open?: boolean; defaultOpen?: boolean; onOpenChange?: (open: boolean) => void; /** Fold into the summary once every task is settled. */ collapseWhenDone?: boolean; } const FOCUS = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40"; const STATUS_TEXT: Record = { pending: "Not started", running: "In progress", done: "Done", skipped: "Skipped", failed: "Failed", }; const MORPH = "cubic-bezier(0.16,1,0.3,1)"; const reducedQuery = "(prefers-reduced-motion: reduce)"; const subscribeReduced = (onChange: () => void) => { const query = window.matchMedia(reducedQuery); query.addEventListener("change", onChange); return () => query.removeEventListener("change", onChange); }; const useReducedMotion = () => React.useSyncExternalStore(subscribeReduced, () => window.matchMedia(reducedQuery).matches, () => false); /** Icons trade places through a blur: the old one shrinks away as the new one grows in. */ const swap = (on: boolean, reduced: boolean): React.CSSProperties => ({ opacity: on ? 1 : 0, transform: on ? "none" : "scale(0.6)", filter: on ? "none" : "blur(3px)", transition: reduced ? "none" : `opacity 260ms ${MORPH}, transform 380ms ${MORPH}, filter 260ms ${MORPH}`, }); /** Every mark is there at once; the one for the task's status shows, and they trade places through a blur. */ function Mark({ status, reduced }: { status: PlanTaskStatus; reduced: boolean }) { const layer = "absolute inset-0 flex items-center justify-center"; return ( {/* Spins only while it's showing. */} ); } /** A note that folds open under its task and folds shut again, keeping its words while it closes. */ function Detail({ text, failed, reduced }: { text?: string; failed: boolean; reduced: boolean }) { const [last, setLast] = React.useState(text); if (text && text !== last) setLast(text); return ( {text ?? last} ); } export function Plan({ tasks, title = "Plan", open, defaultOpen = true, onOpenChange, collapseWhenDone = true, className = "", ...props }: PlanProps) { const reduced = useReducedMotion(); const [ownOpen, setOwnOpen] = React.useState(defaultOpen); const [touched, setTouched] = React.useState(false); const panelId = React.useId(); const done = tasks.filter((t) => t.status === "done").length; const settled = tasks.length > 0 && tasks.every((t) => t.status === "done" || t.status === "skipped" || t.status === "failed"); const failed = tasks.some((t) => t.status === "failed"); const expanded = open ?? ownOpen; // Fold away once everything is settled, unless the user has taken control or something failed. React.useEffect(() => { if (!collapseWhenDone || open !== undefined || touched || !settled || failed) return; const timer = window.setTimeout(() => setOwnOpen(false), 1200); return () => window.clearTimeout(timer); }, [collapseWhenDone, open, touched, settled, failed]); const toggle = () => { const next = !expanded; setTouched(true); if (open === undefined) setOwnOpen(next); onOpenChange?.(next); }; return (

{/* Outside the button, so its name stays the title. */} {settled ? `${done} of ${tasks.length} done` : `${done} of ${tasks.length}`}

{/* The strike draws itself across each line of the label, left to right. */} {task.label} , {STATUS_TEXT[task.status]}

); } 4d:["$","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"}]]}]}]]}],["$","$L4e",null,{"namespace":"@hairline","registryDependencies":["https://hairlineui.com/r/number-roll.json?as=dependency"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/plan.tsx","content":"$50","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]