suiss/ui · AI
Queue
The agent's todo list, split into what is left and what is done.
Queue is the agent's todo list. Todos sit in two sections, To do and Completed, and the icon on each todo shows its status. The agent updates the list as it works, so a todo moves from one section to the other when it is done.
Each section is a TraceCollapsible with a nested Trace of todos. For steps the agent decides on up front, use Plan; for steps it takes as it goes, use Task.
Installation
Queue is built with the Trace component.
Works in any project with a components.json. See Installation for the one-line registry setup. Or use the suiss/ui CLI:
Usage
Map each todo status to a section, an icon and a TraceLine status:
| Todo status | Section | Icon | TraceLine status |
|---|---|---|---|
pending | To do | Circle | — |
in_progress | To do | Circle with a dot | running while the agent works |
completed | Completed | Circle with a check | — |
With React Aria, use defaultExpanded on TraceCollapsible in place of defaultOpen.
Examples
Descriptions
A todo with a description is a TraceCollapsible that opens to show it. A todo without one stays a TraceLine.
AI SDK
The agent writes its todos with a tool, writeTodos in this example. Each call sends the whole list, so render the last call and skip one whose input is still streaming.
Set running on the todo in progress only while the chat streams, so its title stops shimmering when the agent stops.
API Reference
See Trace for every part and prop.