A live checklist that shows an AI agent's stated plan — pending, in-progress, and done steps — with inline renaming and reordering of steps that haven't started yet.
"use client";
import { useEffect, useState } from "react";
import {
PlanChecklist,
type PlanChecklistItem,
} from "@/components/ui/plan-checklist";
const initialItems: PlanChecklistItem[] = [
{ id: "1", label: "Read repository structure", status: "done" },
{ id: "2", label: "Draft migration plan", status: "done" },
{
id: "3",
label: "Apply schema changes",
status: "in-progress",
detail: "3 files",
},
{ id: "4", label: "Run test suite", status: "pending" },
{ id: "5", label: "Open pull request", status: "pending" },
];
export default function Demo() {
const [items, setItems] = useState<PlanChecklistItem[]>(initialItems);
useEffect(() => {
const timer = setTimeout(() => {
setItems((current) =>
current.map((item) =>
item.id === "3"
? { ...item, status: "done" }
: item.id === "4"
? { ...item, status: "in-progress" }
: item,
),
);
}, 2200);
return () => clearTimeout(timer);
}, []);
return (
<div className="flex min-h-screen w-full items-center justify-center p-6">
<PlanChecklist
items={items}
onReorder={(orderedIds) => {
setItems((current) =>
orderedIds.map((id) => current.find((item) => item.id === id)!),
);
}}
/>
</div>
);
}
