"use client"; import * as React from "react"; import { AnimatePresence, motion } from "motion/react"; import { cn } from "@kineticui/core"; import { CheckIcon, ChevronRightIcon, XIcon } from "@kineticui/icons"; export type PlanStep = { id: string; title: string; status: "pending" | "running" | "done" | "error" | "skipped"; detail?: React.ReactNode; substeps?: { title: string; done?: boolean }[]; }; export type AgentPlanProps = { title?: string; steps: PlanStep[]; className?: string; }; function Status({ s }: { s: PlanStep["status"] }) { if (s === "done") return ( ); if (s === "running") return ; if (s === "error") return ( ); return ; } /** Live checklist of an agent's plan with progress, running step and expandable details. */ export function AgentPlan({ title = "Plan", steps, className }: AgentPlanProps) { const done = steps.filter((s) => s.status === "done").length; const [open, setOpen] = React.useState(null); const running = steps.find((s) => s.status === "running"); React.useEffect(() => { if (running) setOpen(running.id); }, [running?.id]); return (

{title} {done}/{steps.length}

{i < steps.length - 1 ? : null} {isOpen ? (
{s.detail} {s.substeps?.map((sub) => ( {sub.title} ))}
) : null}

); }

Agent Plan

Installation

Exports