shadcn.io is not affiliated with official shadcn/ui
Tool Results Panel AI Block for React
A log of twelve typed tool calls you filter by tool and status, sort by time, duration or tokens, open to read as JSON, and retry when they failed.
Installation
Overview
Keep a record of every tool an assistant called, with this tool results panel for React with Base UI. A hairline frame with a plus mark on each corner holds a Native Select for the tool, a row of radio pills for the status, and four figures worked out from the runs in view: how many, how many did not succeed, the median time and the tokens. Below, a table lists twelve runs with their time, tool, status (a glyph and a word), duration and tokens; the Time, Took and Tokens heads sort. Pressing a tool's name opens its input and output as JSON Tree Views under it, one at a time. A failed or timed-out run has a Retry Button that turns it, in this demo, into "Succeeded on retry" and moves the figures. For tool logs, run histories and any product that keeps what an agent did.
FAQ
What stays in the page, and how do I make it real?
The twelve runs are typed, and the filters, sort, median and token sum are worked out in the page. Retry only changes this page. To wire it for real, load runs from your trace store, call your tool again from retry and replace the run with the new result.
How is the median worked out?
From the durations of the runs in view: the middle one, or the average of the two in the middle for an even count. It follows the filters, so it describes what you see.
How do the sort buttons work?
Each head is a button and the column carries aria-sort. Time starts newest first; Took and Tokens start low to high, and pressing the same head again reverses it. The tool filter and the status pills keep working with any sort.
Does the table jump when I filter?
No. The table sits in a scroll region of fixed height, and a filter that matches nothing shows an empty state inside it, so the page keeps its size.