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 { useState } from "react";
import PlanChecklist, {
type PlanChecklistItem,
} from "@/components/ui/plan-checklist";
const initialItems: PlanChecklistItem[] = [
{ id: "1", label: "Collect requirements", status: "done" },
{ id: "2", label: "Sketch the API surface", status: "in-progress" },
{ id: "3", label: "Wire up the demo", status: "pending" },
{ id: "4", label: "Ship it", status: "pending" },
];
export default function PlanChecklistEditableDemo() {
const [items, setItems] = useState<PlanChecklistItem[]>(initialItems);
function handleRelabel(id: string, label: string) {
setItems((prev) =>
prev.map((item) => (item.id === id ? { ...item, label } : item)),
);
}
function handleReorder(orderedIds: string[]) {
setItems((prev) =>
orderedIds.map((id) => prev.find((item) => item.id === id)!),
);
}
return (
<div className="flex min-h-[320px] w-full items-center justify-center p-6">
<PlanChecklist
items={items}
title="Plan"
onRelabel={handleRelabel}
onReorder={handleReorder}
/>
</div>
);
}
