Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Tool Results Panel AI Block for Svelte

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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Keep a record of every tool an assistant called, with this tool results panel for Svelte with Ark 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.

Does it work in a right-to-left language?

Yes. Tool names and times stay left to right in their own runs, columns and the chevron mirror, and figures keep their digits together.

How does it look on a phone?

The status and the time fold under the tool's name, the time taken stays in its own column and Retry stays at the end of the row.