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:T278a,"use client"; import { ChevronRightIcon, RotateCcwIcon } from "lucide-react"; import { AnimatePresence, motion, useReducedMotion, useSpring, useTransform } from "motion/react"; import { useEffect, useId, useMemo, useState } from "react"; import { Button } from "@/components/ui/button"; import { cn } from "@/lib/utils"; export interface SpawnNode { id: string; name: string; model?: string; task?: string; start: number; duration: number; costPerSecond: number; outcome?: "done" | "failed"; children?: SpawnNode[]; } export interface SpawnTreeProps { root: SpawnNode; speed?: number; autoplay?: boolean; title?: string; className?: string; } type Status = "queued" | "running" | "done" | "failed"; interface Live { status: Status; elapsed: number; cost: number; branchCost: number; counts: Record; } function endOf(node: SpawnNode): number { return Math.max(node.start + node.duration, ...(node.children ?? []).map(endOf)); } function compute(node: SpawnNode, t: number, out: Map): Live { const elapsed = Math.min(Math.max(t - node.start, 0), node.duration); const status: Status = t < node.start ? "queued" : t < node.start + node.duration ? "running" : (node.outcome ?? "done"); const cost = elapsed * node.costPerSecond; const counts: Record = { queued: 0, running: 0, done: 0, failed: 0 }; let branchCost = cost; for (const child of node.children ?? []) { const c = compute(child, t, out); branchCost += c.branchCost; counts[c.status]++; for (const k of Object.keys(counts) as Status[]) counts[k] += c.counts[k]; } const live = { status, elapsed, cost, branchCost, counts }; out.set(node.id, live); return live; } function clock(s: number) { const whole = Math.floor(s); return `${Math.floor(whole / 60)}:${String(whole % 60).padStart(2, "0")}`; } export function SpawnTree({ root, speed = 1.2, autoplay = true, title = "Agent run", className }: SpawnTreeProps) { const reduce = useReducedMotion(); const total = useMemo(() => endOf(root), [root]); const [t, setT] = useState(autoplay ? 0 : total); const [folded, setFolded] = useState>(new Set()); const finished = t >= total; useEffect(() => { if (finished) return; const id = setInterval(() => setT((v) => Math.min(v + 0.2 * speed, total)), 200); return () => clearInterval(id); }, [finished, speed, total]); const live = useMemo(() => { const map = new Map(); compute(root, t, map); return map; }, [root, t]); const rootLive = live.get(root.id)!; const running = rootLive.counts.running + (rootLive.status === "running" ? 1 : 0); const toggle = (id: string) => setFolded((f) => { const next = new Set(f); if (next.has(id)) next.delete(id); else next.add(id); return next; }); return (

{title}

{finished ? "Finished" : `${running} working`} · {clock(t)} ·{" "} total

{finished && ( )}

); } function TreeNode({ node, live, folded, onToggle, isLast, root, }: { node: SpawnNode; live: Map; folded: Set; onToggle: (id: string) => void; isLast: boolean; root?: boolean; }) { const reduce = useReducedMotion(); const groupId = useId(); const l = live.get(node.id)!; const kids = node.children ?? []; const isFolded = folded.has(node.id); const spring = reduce ? { duration: 0 } : { type: "spring" as const, stiffness: 380, damping: 34 }; const descendants = l.counts.queued + l.counts.running + l.counts.done + l.counts.failed; return (

{!root && ( <> )}

{kids.length > 0 ? ( ) : null} {node.name} {node.model && ( {node.model} )} {clock(l.elapsed)}

{node.task && (

0 ? "pl-10" : "pl-4")}> {node.task}

)} {kids.length > 0 && (

{descendants} sub-agent{descendants === 1 ? "" : "s"} {l.counts.running > 0 && · {l.counts.running} running} {l.counts.failed > 0 && · {l.counts.failed} failed} branch

)} {kids.length > 0 && !isFolded && ( {kids.map((child, i) => ( ))} )}

); } function StatusDot({ status }: { status: Status }) { return ( {status} ); } function Money({ value, className }: { value: number; className?: string }) { const reduce = useReducedMotion(); const mv = useSpring(value, reduce ? { duration: 0 } : { stiffness: 140, damping: 22 }); const text = useTransform(mv, (v) => `$${Math.max(v, 0).toFixed(2)}`); useEffect(() => { mv.set(value); }, [mv, value]); return {text}; } 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"}]]}]}],["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","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":"motion"}]]}]}]]}],["$","$L4e",null,{"namespace":"@devl","registryDependencies":["utils","https://coss.com/ui/r/button.json"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/devl/spawn-tree.tsx","content":"$50","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]