shadcn.io is not affiliated with official shadcn/ui
Tool Execution Waterfall AI Block for React
One finished agent run drawn as a waterfall of six tool attempts on a shared time axis, with a zoom select and a JSON input and output for the attempt you press.
Installation
Overview
See where the time went in one agent run, with this tool execution waterfall for React with Base UI. A hairline frame with a plus mark on each corner opens with "Run 7f3a, 5 tool calls, 4.2 s" and a derived line that says how many attempts ran at once at most and which was longest. Under it every attempt is a row with the tool's name, a Badge for its kind, a bar placed on one shared axis and the duration; calls that ran together overlap, and the call that failed and was retried appears twice. A Native Select called Zoom rescales the axis from the whole run to its first second, and attempts that start later lose their bar and say so. Pressing a row shows that attempt's input and output as JSON Tree Views in a band of fixed height, one at a time. For run inspectors, trace views and any product that shows what an agent called.
FAQ
What stays in the page, and how do I make it real?
The run is typed in the file and every figure is worked out from it: the total, the most attempts at once, the longest call and every bar's place. Nothing is live. To wire it for real, map your trace spans to the attempt shape (start, duration, input, output, outcome) and the rest follows.
How are the bars placed?
Each bar starts at its start time as a share of the axis and is as wide as its duration, on the same scale for every row. Zoom to the first second and the scale changes with the tick labels; a bar that runs past the window is cut at its edge and the row says so for a screen reader.
Why does one tool show twice?
The network call timed out and was retried, so there are two attempts of the same tool: attempt 1 of 2, which failed, and attempt 2 of 2, which succeeded. Each has its own input and output.
How do I read a row without the bar?
Every row's duration cell carries a hidden sentence with the outcome, the start time and the attempt number, and the open row is marked as current, so the waterfall is also a list a screen reader can follow.