Todo

A framed checklist that mirrors the agent's task plan as it progresses.

Anatomy

A framed list of steps where each row carries one of three states: queued, running, and done. Reach for it when the model breaks a request into several actions and you want the reader to watch the plan unfold.

Hold the array of steps in state, swap each item's status as updates arrive, and switch the label to a present-tense sentence while a row is running so it reads as a live action.

API

Reference for each part of the component, including its available props and behavior.

Todo

Root. Wraps Base UI's Collapsible.Root and adds the frame. Accepts open for the controlled flow, defaultOpen for the uncontrolled flow, and onOpenChange to mirror state. Sets data-open when expanded so descendants can style off the parent.

TodoHeader

The top row. Lays out as a flex row so the title takes the leading space and any action sits at the end. Stays fixed in place when the body expands or collapses.

TodoTitle

The label for the update. Renders as a div so the caller can choose the heading level. Use it for a static label like Update Todos, or for a live count like 3 of 5 completed by deriving the text from the same array that feeds the list.

TodoTrigger

Headless toggle. Forwards to Base UI's Collapsible.Trigger, which wires the open state, aria-expanded, and aria-controls to a rendered element of the caller's choice. Pass render to provide the styled button and children for the icon. The trigger has no default styling and no default icon, so it composes with whatever button family the call site already uses.

TodoContent

The body. Forwards to Base UI's Collapsible.Panel and animates between zero and the measured panel height when the open state changes. Does not unmount its children, so live updates to the list keep their identity across collapses.

TodoList

The list wrapper. Renders as a ul and stacks each item in document order. Keeps bottom padding so the last row breathes inside the frame.

TodoItem

A single entry in the plan. The status prop drives both the default icon and the label styling, and is also exposed as data-status for custom rules. The three values are pending for queued, progress for the one being worked on, and completed once it lands. Map any in_progress from the source to progress here.

TodoItemIcon

The leading status mark. Renders as a ringed circle whose contents change with the parent's data-status: empty for pending, a spinning arc for progress, and a check on a primary-filled disk for completed. The icon reads its status from the parent TodoItem, so swap the indicator by passing children rather than threading status through props.

TodoItemLabel

The text of the row. Reads the status from the parent TodoItem to apply muted color and a strikethrough once the item completes. Pass the imperative form for queued and finished items, and switch to a present-tense sentence while the item is running so the row reads as a live action.