Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Agent Task Queue AI Block for Radix UI

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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Manage the work lined up for agents, with this agent task queue for React with Radix 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.

Does it work in a right-to-left language?

Yes. The table mirrors, task names and agents sit in isolated runs, and the estimate and counts keep their digits together.

How does it look on a phone?

The priority, status and estimate fold into a second line under the task's name, and the checkbox and the row menu stay at the row's ends.