Plan Checklist

Component

About

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.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Plan Checklist to your project and fits it to your theme.

Code

How Plan Checklist is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"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: "Update dependent modules",
    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 PlanChecklistDemo() {
  const [items, setItems] = useState<PlanChecklistItem[]>(initialItems);

  useEffect(() => {
    const timer = window.setInterval(() => {
      setItems((prev) => {
        const inProgressIndex = prev.findIndex(
          (item) => item.status === "in-progress",
        );
        if (inProgressIndex === -1) return prev;
        const next = prev.map((item, index) =>
          index === inProgressIndex
            ? { ...item, status: "done" as const }
            : item,
        );
        const upcomingIndex = next.findIndex(
          (item) => item.status === "pending",
        );
        if (upcomingIndex !== -1)
          next[upcomingIndex] = {
            ...next[upcomingIndex],
            status: "in-progress",
          };
        return next;
      });
    }, 2200);
    return () => window.clearInterval(timer);
  }, []);

  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">
      <PlanChecklist items={items} title="Plan" />
    </div>
  );
}