shadcn.io is not affiliated with official shadcn/ui
Agent Tasks Kanban Block for React
A support desk lane board where five AI agents are the lanes, seventeen tickets move between agents and four statuses, and tier, capacity and order rules refuse a move in words.
Installation
Overview
Hand support tickets to AI agents from one screen with this agent task board for React with Base UI. A hairline frame with a plus mark on each corner holds a lane for each of five agents (Triage, Billing, Returns, Account and Escalation) and four statuses (Queue, Active, Waiting and Resolved) over seventeen tickets. Each ticket shows its title, the customer, a mono reference and its priority as three bars and a word. A lane head shows the agent's initials in an Avatar, its tier, a status word in an outline Badge that is worked out from its tickets ("Working", "At capacity", "Waiting", "Ready" or "Idle") and its open count, and the sentence under the heading follows every move. Dropping a ticket on another agent's lane hands it over, and dropping it on another status changes its state. Three rules refuse with the reason in words: an agent works two active tickets at most, only a tier 2 agent takes a High ticket, and a ticket is worked before it is resolved. A card moves three ways: drag its grip, focus the grip and use Space, the arrow keys and Escape, or open its Dropdown Menu and choose "Move to" a status or "Hand to" an agent. A polite status line in the foot reports each move, and Reset puts the desk back. The frame is ruled by Guides. No model is called: the agents are lanes, not services. For helpdesks, triage queues and any app where work is assigned to automated workers.
FAQ
How do I use my own agents and tickets?
Edit LANES, STATUSES and START. A lane has an id, a name and a tier; a status has an id and a name; a ticket has an id, a ref, a title, a customer, a priority from 1 to 3 and the column it starts in, written as the lane and the status joined by a dot (billing.active). The agent's status word, its open count and the header sentence are all worked out from the tickets, so nothing else needs editing.
How do I move a ticket without a mouse?
Tab to the grip at the start of a card, named "Move" with the ticket's title. Press Space or Enter to pick it up, then ArrowUp and ArrowDown to change its place in the cell (at the top or bottom of a cell the card crosses into the neighbouring agent's cell in the same status), ArrowLeft and ArrowRight to go to the neighbouring status in the same agent (the arrows swap in right-to-left languages), Home and End for the first and last place, Space or Enter to drop it and Escape to put it back. Every step is announced in the status line, for example "RK-4119, Billing agent, Active, position 1 of 1."
Why is there a menu as well as the grip?
Dragging needs a held pointer and a path, which not everyone has, so each card also has a "More actions" menu with two groups of choices: "Move to" each status and "Hand to" each agent, the current one ticked in both. Choosing one moves the card, puts focus on the card in its new place and says so in the status line.
How do the three rules work, and how do I change them?
The rules are in refusalOf, which gets the tickets, the ticket, the cell it comes from and the cell it is going to, and returns a reason or an empty string. The grip's drop, the keyboard steps and the menu all ask it, so no route gets around it. A refused move leaves the ticket where it was, puts focus back on it and the status line gives the reason, for example that Triage agent is tier 1 and can't take a High ticket. Change the number ACTIVE_CAP, the tier on a lane or the body of a helper to match your own policy.
What stays in the demo, and how do I assign for real?
Everything: the moves live in the component's state, nothing is sent anywhere and no model is called, and a reload or Reset brings back the starting desk. To assign for real, call your API from put, the one function every finished move goes through (the menu, a drop and the keyboard), and update the tickets from the response. The customers, tickets and agents are made up.
How does it work on a phone?
The board is one scroll region that moves sideways and up and down inside its fixed height, so the page never jumps, and the agent names are sticky so you always know whose row you are in. Touch drags from the grip only, so the rest of a card still scrolls the board, and the menu is the other way to move a card. The status line is still read out to screen readers.