shadcn.io is not affiliated with official shadcn/ui
Agent Workflow AI Block for Ark UI
A four-stage pipeline of nine step cards with one failed step: open any card for its input, output and log, then retry from the failure and watch the steps after it run one by one.
Installation
Overview
Recover a failed agent run from the step that broke, with this agent workflow for React with Ark UI. A hairline frame with a plus mark on each corner shows "Run 218, answer a billing question" with a counted summary ("1 failed, 4 done, 4 waiting"), then four stage columns (Plan, Retrieve, Draft and Review) in one hairline grid, joined by arrows that mirror in right-to-left. Each step card has its name, a Badge for the kind of tool, a status in a glyph and a word, and its duration. Search web failed after a 5 s timeout, and the only error icon in the block marks it. Pressing a card shows that step's input, output and log in a band under the grid. The Shine Button, the only colored control, is "Retry from Search web": it runs the failed step again and then the steps downstream, one every 700 ms, while a polite line names each; at the end "Start over" takes its place. For workflow runners, pipeline views and any product that lets people resume a run.
FAQ
What stays in the page, and how do I make it real?
The run, every step's input, output and log, and the timings are typed, and the retry is a timer that moves the marker down the steps. No tool is called. To wire it for real, call your runner's resume endpoint from retry and update the cards from its events.
Which steps does the retry run?
The failed step and the steps that come after it in the pipeline: Search web, Write the answer, Add citations, Check the tone and Send for approval. The steps that already succeeded keep their results and are not run again.
How do I tell a status without color?
Every card says its status in a glyph and a word. The failed card also carries the block's only error-colored icon, but the word "Failed" is what carries the meaning.
Does the last step send anything?
No. Send for approval only fills the output with "Queued for a person to approve. Nothing was sent." to show where an approval step would sit.