Mischief

14 / Agent UI

Agent Checklist

A task list whose items change state as work proceeds, announcing what changed instead of re-reading the whole list.

Live previewSource

Fixing the migration

0/4
  1. Read the migration, in progress
  2. Check the column constraints, waiting
  3. Reorder the statements, waiting
  4. Run the test suite, waiting

Installation

Copy the source into your project, or keep it behind a package.

Copy the component into your project and make it yours.

Usage

const items = [
  { id: "read", label: "Read the changelog", status: "done" },
  { id: "diff", label: "Compare versions", status: "active" },
  { id: "write", label: "Draft the summary", status: "pending" },
]

export function Plan() {
  return <AgentChecklist items={items} title="Plan" />
}

API

itemsAgentChecklistItem[]Id, label, status, and optional detail per step. Fully controlled.
titleReactNodeAn optional heading above the list.
announcebooleanAnnounces status transitions politely. Defaults to true.
showProgressbooleanShows the settled count in the header. Defaults to true.

Accessibility

The list is an ordered list and every item states its status in text for screen readers, not through colour or icon alone. When a status changes, only the difference is announced along with a running count, so a long list does not get re-read on every update. Spinners stop under reduced motion.

Dependencies

lucide-react