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:T1c7a,"use client"; import { Card } from "@/components/ui/card"; import { Badge } from "@/components/ui/badge"; import * as React from "react"; /** * The checklist an agent writes for itself, and then edits while you watch. * * A static list of steps is a five-minute component. What makes this one * worth its own file is that **the plan changes mid-run**, and every naive * rendering of that change is worse than not showing the plan at all: * * **Completed steps must never move.** The model re-emits its plan and the * new list is not the old list — a step was inserted at position two, another * was dropped. Rendering the new array wholesale slides everything the reader * has already read to a new position, and they lose their place in a list * they were using precisely to keep it. So finished steps hold their order, * and new work arrives underneath. * * **A dropped step is not a deleted step.** Something the agent said it would * do and then decided not to is the most interesting line in the plan. It * becomes `skipped`, with the reason, rather than vanishing — a plan that * silently loses items is a plan you cannot audit afterwards. * * **A newly added step should announce itself.** `added` marks work that was * not in the original plan, because "the agent decided to do three more * things" is a fact the reader wants before it finishes doing them. * * **A revision counter, not a diff.** Full before/after diffing of a plan is * a lot of machinery for a reader who mostly wants to know *that* it changed. * `revision` says how many times, and the per-step marks say where. */ export type PlanStepState = "pending" | "active" | "done" | "skipped" | "failed"; export type PlanStep = { id: string; text: string; state: PlanStepState; /** Why it was skipped, or what it produced. One line. */ note?: string; /** True for a step the agent added after the first plan. */ added?: boolean; }; export type AgentPlanProps = { steps: PlanStep[]; /** 0 = the original plan. Anything higher is shown next to the title. */ revision?: number; /** The plan itself is still being written. */ planning?: boolean; title?: string; className?: string; }; /* ------------------------------------------------------------------ */ /* Step marks */ /* ------------------------------------------------------------------ */ function Mark({ state }: { state: PlanStepState }) { const base = "mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full border"; switch (state) { case "done": return ( ); case "active": return ( ); case "failed": return ( ); case "skipped": return ( ); default: return ; } } /* ------------------------------------------------------------------ */ /* AgentPlan */ /* ------------------------------------------------------------------ */ export function AgentPlan({ steps, revision = 0, planning = false, title = "Plan", className = "", }: AgentPlanProps) { const done = steps.filter((s) => s.state === "done").length; const settled = steps.filter((s) => s.state !== "pending" && s.state !== "active").length; return (

{title} {done}/{steps.length} done {revision > 0 && ( /* The reader's mental model of "the plan" is now out of date, and saying so costs one word. */ revised {revision}× )} {planning && ( still planning )}

{/* Rail, drawn between marks rather than behind them, so a skipped step reads as part of the sequence it was cut from. */} {i < steps.length - 1 && ( )}

{step.text} {step.added && ( added )}
{step.note && (
{step.note}
)}

{settled > 0 && settled === steps.length && (

Plan complete — {done} done, {steps.length - done} skipped or failed.

)} ); } 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":[null,["$","$L50",null,{"namespace":"@scrimui","registryDependencies":["badge","card"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"src/showcase/agent-plan/agent-plan.tsx","content":"$52","type":"registry:ui","target":"components/ui/agent-plan.tsx"}],"className":"h-[70svh] min-h-80"}]]}]