62: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 63: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 64:T67df,"use client"; import * as React from "react"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; import { clsx, type ClassValue } from "clsx"; import { twMerge } from "tailwind-merge"; function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } export interface AgentStep { id: string; title: string; /** Tool label shown as a chip, e.g. Search, Browser, Code. */ tool: string; /** Simulated run time in ms. */ duration: number; /** Log lines revealed while the step runs. */ logs: string[]; /** One-line result shown once done. */ output?: string; /** Fail the first attempt at this many ms with this error, then retry automatically. */ fail?: { at: number; error: string }; /** Pause and ask the user before running. */ approval?: string; } export interface AgentArtifact { name: string; /** File contents for the download. */ content: string; type?: string; } export interface AgentTaskProgressProps { goal?: string; agentName?: string; steps?: AgentStep[]; artifacts?: AgentArtifact[]; /** Start running on mount. */ autoStart?: boolean; /** Playback speed multiplier for the simulation. */ speed?: number; onApprove?: (stepId: string) => void; onStop?: () => void; theme?: "dark" | "light"; className?: string; } const PALETTES = { dark: { bg: "#0A0A0A", text: "#F5F4F1", muted: "rgba(245,244,241,0.62)", faint: "rgba(245,244,241,0.38)", card: "#121212", border: "rgba(255,255,255,0.09)", chip: "rgba(255,255,255,0.06)", code: "#0C0C0C", on: "#F5F4F1", onText: "#0A0A0A", accent: "#FB923C", ok: "#4ADE80", err: "#F87171", warn: "#FBBF24", ring: "rgba(245,244,241,0.6)", track: "rgba(255,255,255,0.08)" }, light: { bg: "#FAFAF8", text: "#0A0A0A", muted: "rgba(10,10,10,0.62)", faint: "rgba(10,10,10,0.42)", card: "#FFFFFF", border: "rgba(10,10,10,0.09)", chip: "rgba(10,10,10,0.05)", code: "#F6F6F3", on: "#0A0A0A", onText: "#FAFAF8", accent: "#EA580C", ok: "#15803D", err: "#DC2626", warn: "#B45309", ring: "rgba(10,10,10,0.5)", track: "rgba(10,10,10,0.08)" }, }; const GRADIENT = "linear-gradient(90deg,#FB923C,#EC4899,#8B5CF6,#3B82F6)"; const DEFAULT_STEPS: AgentStep[] = [ { id: "plan", title: "Plan the work", tool: "Think", duration: 1600, logs: ["Goal: compare pricing of 5 tools in our category", "Plan: search → read pages → extract → compare → draft → share"], output: "6 steps planned" }, { id: "search", title: "Find pricing pages", tool: "Search", duration: 2400, logs: ['search("project management software pricing 2026")', "12 results · kept 5 vendors with public pricing", "halcyon.app · lumen.so · tessellate.io · kestrel.dev · fieldnote.co"], output: "5 pricing pages found" }, { id: "browse", title: "Read 5 pricing pages", tool: "Browser", duration: 3400, logs: ["open halcyon.app/pricing ✓", "open lumen.so/pricing ✓", "open tessellate.io/pricing ✓", "open kestrel.dev/pricing ✓", "open fieldnote.co/pricing ✓"], output: "5 pages read · 23 plans", fail: { at: 1500, error: "Timed out loading tessellate.io/pricing after 10s" } }, { id: "extract", title: "Extract plans into a table", tool: "Code", duration: 2400, logs: ["parse 23 plans from 5 pages", "normalise to USD per seat per month", "write comparison.csv (23 rows)"], output: "comparison.csv" }, { id: "draft", title: "Draft the summary", tool: "Write", duration: 2800, logs: ["median Team plan: $12 per seat", "we are 18% above median · 2 of 5 have a free tier", "write pricing-summary.md (412 words)"], output: "pricing-summary.md" }, { id: "share", title: "Share in #pricing", tool: "Message", duration: 1000, logs: ["post pricing-summary.md to #pricing"], output: "Posted to #pricing", approval: "Post the summary to #pricing? 14 people will see it." }, ]; const DEFAULT_ARTIFACTS: AgentArtifact[] = [ { name: "pricing-summary.md", type: "text/markdown", content: "# Competitor pricing\n\n- Median Team plan: $12 per seat per month\n- We are 18% above the median\n- 2 of 5 competitors offer a free tier\n\nRecommendation: add a free tier for up to 3 seats.\n" }, { name: "comparison.csv", type: "text/csv", content: "vendor,plan,usd_per_seat\nhalcyon,Team,12\nlumen,Pro,10\ntessellate,Business,16\nkestrel,Team,11\nfieldnote,Plus,9\n" }, ]; type Status = "idle" | "running" | "paused" | "waiting" | "done" | "stopped"; type StepState = "todo" | "running" | "retrying" | "done" | "failed" | "skipped" | "cancelled"; interface Run { status: Status; i: number; t: number; wait: number; attempt: number; elapsed: number; states: StepState[]; errors: string[]; } type Act = { type: "tick"; dt: number; steps: AgentStep[] } | { type: "start"; steps: AgentStep[] } | { type: "pause" } | { type: "resume" } | { type: "stop" } | { type: "approve" } | { type: "skip"; steps: AgentStep[] }; const fresh = (steps: AgentStep[]): Run => ({ status: "idle", i: 0, t: 0, wait: 0, attempt: 1, elapsed: 0, states: steps.map(() => "todo"), errors: steps.map(() => "") }); function advance(r: Run, steps: AgentStep[], from: number): Run { const next = from + 1; if (next >= steps.length) return { ...r, i: steps.length, t: 0, status: "done" }; const states = [...r.states]; if (steps[next].approval) return { ...r, i: next, t: 0, attempt: 1, status: "waiting", states }; states[next] = "running"; return { ...r, i: next, t: 0, attempt: 1, states }; } function reducer(r: Run, a: Act): Run { switch (a.type) { case "start": { const base = fresh(a.steps); if (a.steps[0]?.approval) return { ...base, status: "waiting" }; base.states[0] = "running"; return { ...base, status: "running" }; } case "pause": return r.status === "running" ? { ...r, status: "paused" } : r; case "resume": return r.status === "paused" ? { ...r, status: "running" } : r; case "stop": { const states = r.states.map((s) => (s === "running" || s === "retrying" ? "cancelled" : s)); if (r.status === "waiting") states[r.i] = "cancelled"; return { ...r, status: "stopped", states }; } case "approve": { if (r.status !== "waiting") return r; const states = [...r.states]; states[r.i] = "running"; return { ...r, status: "running", states, t: 0 }; } case "skip": { if (r.status !== "waiting") return r; const states = [...r.states]; states[r.i] = "skipped"; return advance({ ...r, status: "running", states }, a.steps, r.i); } case "tick": { if (r.status !== "running") return r; const steps = a.steps; const s = steps[r.i]; if (!s) return { ...r, status: "done" }; const elapsed = r.elapsed + a.dt; if (r.wait > 0) { const wait = r.wait - a.dt; if (wait > 0) return { ...r, elapsed, wait }; const states = [...r.states]; states[r.i] = "running"; return { ...r, elapsed, wait: 0, t: 0, attempt: r.attempt + 1, states }; } const t = r.t + a.dt; if (s.fail && r.attempt === 1 && t >= s.fail.at) { const states = [...r.states]; const errors = [...r.errors]; states[r.i] = "retrying"; errors[r.i] = s.fail.error; return { ...r, elapsed, t, wait: 1400, states, errors }; } if (t >= s.duration) { const states = [...r.states]; states[r.i] = "done"; return advance({ ...r, elapsed, states }, steps, r.i); } return { ...r, elapsed, t }; } } } const mmss = (ms: number) => `${String(Math.floor(ms / 60000)).padStart(2, "0")}:${String(Math.floor(ms / 1000) % 60).padStart(2, "0")}`; export function AgentTaskProgress({ goal = "Compare competitor pricing and draft a summary for the team", agentName = "Research agent", steps = DEFAULT_STEPS, artifacts = DEFAULT_ARTIFACTS, autoStart = true, speed = 1, onApprove, onStop, theme = "dark", className }: AgentTaskProgressProps) { const p = PALETTES[theme]; const reduce = !!useReducedMotion(); const uid = React.useId(); const [run, dispatch] = React.useReducer(reducer, steps, fresh); const [open, setOpen] = React.useState([]); const started = React.useRef(false); // Move focus to Approve when the agent stops to ask, so keyboard users can answer right away. const focusApprove = React.useCallback((el: HTMLButtonElement | null) => el?.focus({ preventScroll: true }), []); React.useEffect(() => { if (run.status !== "running") return; const t = setInterval(() => dispatch({ type: "tick", dt: 100 * speed, steps }), 100); return () => clearInterval(t); }, [run.status, speed, steps]); const kickoff = (el: HTMLElement | null) => { if (!el || started.current || !autoStart) return; started.current = true; setTimeout(() => dispatch({ type: "start", steps }), 500); }; const doneCount = run.states.filter((s) => s === "done" || s === "skipped").length; const pct = run.status === "done" ? 100 : ((doneCount + (steps[run.i] && run.states[run.i] === "running" ? Math.min(1, run.t / steps[run.i].duration) : 0)) / steps.length) * 100; const tokens = Math.round(run.elapsed * 1.37 + doneCount * 820); const label: Record = { idle: { text: "Ready", color: p.faint }, running: { text: "Running", color: p.accent }, paused: { text: "Paused", color: p.warn }, waiting: { text: "Needs approval", color: p.warn }, done: { text: "Completed", color: p.ok }, stopped: { text: "Stopped", color: p.err }, }; const download = (a: AgentArtifact) => { const url = URL.createObjectURL(new Blob([a.content], { type: a.type ?? "text/plain" })); const link = document.createElement("a"); link.href = url; link.download = a.name; link.click(); setTimeout(() => URL.revokeObjectURL(url), 1000); }; const ring = { ["--tw-ring-color" as string]: p.ring, ["--tw-ring-offset-color" as string]: p.card } as React.CSSProperties; const focus = "outline-none focus-visible:ring-2 focus-visible:ring-offset-2"; const btn = cn("flex h-8 cursor-pointer items-center gap-1.5 rounded-lg border px-3 text-[13px] disabled:cursor-not-allowed disabled:opacity-40", focus); const stepIcon = (st: StepState, waiting: boolean) => { if (st === "done") return ( ); if (st === "running" || st === "retrying") return ; if (st === "skipped" || st === "cancelled") return ( ); if (waiting) return ( ); return null; }; const stateText: Record = { todo: "Queued", running: "Running", retrying: "Retrying", done: "Done", failed: "Failed", skipped: "Skipped", cancelled: "Cancelled" }; return (

{/* Header */}

{agentName} {run.status === "running" && !reduce && } {label[run.status].text}

{run.status === "running" || run.status === "paused" ? ( ) : null} {run.status === "running" || run.status === "paused" || run.status === "waiting" ? ( ) : ( )}

{goal}

{k}: {v}

{/* Steps */}

{!last && } {stepIcon(st, waiting)}

{canToggle && ( )}
{expanded && (shownLogs > 0 || waiting || run.errors[i]) && ( {waiting ? (

{s.approval}

) : (
{run.errors[i] && (
{run.errors[i]}
)} {s.logs.slice(0, shownLogs).map((l, k) => ( {l} ))} {st === "running" && (
)} )}

{/* Artifacts */} {run.status === "done" && artifacts.length > 0 && (

Files created

)}

); } export default AgentTaskProgress; 61:["$","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","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"}]]}]}],["$","li","clsx",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","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":"clsx"}]]}]}],["$","li","tailwind-merge",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/tailwind-merge","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":"tailwind-merge"}]]}]}]]}],["$","$L62",null,{"namespace":"@reactframe","registryDependencies":[]}]]}],null]}],["$","$L63",null,{"files":[{"path":"registry/new-york/agent-task-progress/agent-task-progress.tsx","content":"$64","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]