Tool Activity

The tools an AI assistant used to get its answer, step by step: their status, how long they took, and their input and output.

$ pnpm dlx shadcn@latest add https://dashral.com/r/tool-activity.json

How did sales do in October?

Search orders: Running
Compare with September: Waiting
Compare with September
Find the biggest change: Waiting
Find the biggest change

Installation

$ pnpm dlx shadcn@latest add https://dashral.com/r/tool-activity.json

Adds the component, the components it builds on, its npm packages and the theme tokens it uses. Using Dashral often? Add the registry to components.json once:

components.json

1{
2  "registries": {
3    "@dashral": "https://dashral.com/r/{name}.json"
4  }
5}

Then add components by name:

$ pnpm dlx shadcn@latest add @dashral/tool-activity

Usage

example.tsx

1import { ToolActivity } from "@/components/dashral/tool-activity"
2
3<ToolActivity
4  steps={[
5    { name: "Search orders", status: "done", duration: 820, output: { found: 96 } },
6    { name: "Sum revenue", status: "running" },
7  ]}
8/>

Examples

Every state

Done (opened to its input and output), failed with the reason, running and waiting.

Input

{
  "invoice": "INV-1042"
}

Output

{
  "customer": "Northwind",
  "amount": 1240,
  "currency": "USD",
  "due": "2026-10-02",
  "paid": false
}

Send a payment reminder: Failed
Look up the new billing contact: Running
Look up the new billing contact
Send the reminder again: Waiting
Send the reminder again

API reference

ToolActivity

Also takes every prop of <ol>(opens in a new tab).

Prop	Type	Default
`steps`	`ToolStep[]` The tool calls in the order they ran. Required.	—
`aria-label`	`string` Names the list.	`"Tool activity"`
`classNames`	`{ step?, trigger?, details?, code? }` Classes for each part.	—
`className`	`string` Extra classes, merged with cn() so yours win.	—

ToolStep

Prop	Type	Default
`name`	`ReactNode` What the tool did, in words. Required.	—
`status`	`"pending" \| "running" \| "done" \| "error"` Required. Shown as an icon and heard as a word.	—
`description`	`ReactNode` A line under the name: what it found, or why it failed.	—
`input / output`	`unknown` Objects show as JSON, text as it is, an element rendered. Either one makes the step open.	—
`duration`	`number` Milliseconds, written in the locale's units (820 ms, 1.2 s).	—
`icon`	`ReactNode` Replaces the status icon.	—
`defaultOpen`	`boolean` Open to its input and output from the start.	`false`
`id`	`string` A stable key when names repeat.	—

Keyboard

Keys	Action
`Tab`	The steps with details
`Enter`or`Space`	Open or fold a step's input and output

Accessibility

An ordered list, named Tool activity; each step's status is a word as well as an icon and a color.
As a step changes, a polite live region says it ("Search orders: done"), not the whole list again.
A step with details is a button that says whether it's open (aria-expanded).

Motion

A running step's spinner turns, and stands still with reduced motion. Details open and fold over --duration-standard.