shadcn.io is not affiliated with official shadcn/ui
Plan Builder AI Block for React Aria
An agent's six-step plan you edit before it runs: rename, rewrite, change minutes, choose what each step waits for, reorder with refusals, and read the longest chain as you edit.
Installation
Overview
Review what an agent is about to do before it does it, with this plan builder for React with React Aria. A hairline frame with a plus mark on each corner starts with a band that works out, from the steps, the total minutes and the longest chain of steps that wait on each other ("Longest chain: 1, 3, 4, 6: 35 min"). At the start is the list of six steps, each with its place, title, minutes and, in words, whether it is on the critical path; the chosen step opens at the end. Its title is an Editable you click, its description a Textarea, its minutes a Number Input, and a list of Checkboxes names the earlier steps it waits for. Move up and Move down swap it with its neighbour and refuse when that would break a dependency, saying which ("Step 4 needs step 3 first"). The Shine Button, the only colored control, is "Approve plan": it locks the editor and "Unlock plan" takes its place. For plan reviews, approval steps and any product where a person checks an agent's plan.
FAQ
What stays in the page, and how do I make it real?
The plan is typed, and the total and the longest chain are worked out in the page from the minutes and the dependencies. Approving only locks this editor; nothing runs. To wire it for real, send the ordered steps, minutes and dependencies to your agent when the plan is approved.
How is the longest chain worked out?
Each step finishes after its own minutes plus the latest finish among the steps it waits for. The chain is the path to the step that finishes last, shown by place number, and its length is that finish. Changing any minutes or dependency changes it at once.
Why was my move refused?
A step can't go above a step it waits for, and a step that others wait for can't go below them. The problem line and the status name the pair ("Step 4 needs step 3 first"), and nothing moves.
What can I type in the minutes field?
A whole number from 1 to 90. Anything else is ignored and the last valid number stays. On React Aria the field commits when you press Enter, leave the field or use an arrow.