shadcn.io is not affiliated with official shadcn/ui
Agent Task Queue AI Block for React
Eight tasks waiting for an agent in a sortable table with priority, agent, status and estimate, a row menu to move, pause or cancel, ticked rows acted on together, and an Add task popover.
Installation
Overview
Manage the work lined up for agents, with this agent task queue for React with Base UI. A hairline frame with a plus mark on each corner holds a counted line ("2 running, 4 queued, 1 blocked, 1 done"), a band for ticked rows and a table of eight tasks. Each row has a priority in a glyph and a word, the task, the agent that holds it with an initials tile, a status in a glyph and a word, and an estimate; the Priority, Status and Estimate heads sort, and the Task head puts the queue back in its own order. A Dropdown Menu on each row moves a task to the top, pauses or resumes it, or cancels it, and a cancel leaves an Undo in the footer. Ticking Checkboxes lights a band of fixed height, "3 selected", with Pause and Raise priority. The Shine Button in the header, the only colored control, opens a Popover that adds a task to the end of the queue. For agent schedulers, job queues and any product that lines work up.
FAQ
What stays in the page, and how do I make it real?
The queue is typed and every action, sort and count happens in the page; no agent is started. To wire it for real, post each action to your scheduler from act, pauseTicked, raiseTicked and addTask, and replace the local list with the response.
What do the buttons in the selection band do?
Pause pauses the ticked tasks that are queued or running, and Raise priority lifts the ticked tasks that are not already High or Done by one step. Both say how many tasks they changed, or why none did. They stay in view and answer at zero selected.
Can I undo a cancel?
Yes. Cancel removes the task and puts "Undo cancel" in the footer, which puts it back in the place it held. The slot is reserved, so the footer never changes height.
How does sorting work with moving a task to the top?
Moving to the top changes the queue's own order and returns the table to it. Sorting by priority, status or estimate only changes the view, and ties keep their queue order.