Tool Result · paneui

$ pnpm vitest run --reporter=dot

Streaming output…

Installation

pnpm dlx shadcn@latest add @paneui/tool-result

Usage

import { ToolResult, ToolResultOutput } from "@/components/ui/tool-result"

<ToolResult kind="terminal" tool="bash" title="List files" status="success" duration={0.42}>
  <ToolResultOutput>{"$ ls\nREADME.md  package.json  src"}</ToolResultOutput>
</ToolResult>

Composition

ToolResult
├── ToolResultOutput
└── ToolResultRequest

Examples

Statuses

Error with Retry

Requests

Custom Icon

Output Languages

Controlled

Behaviour

The result opens when a run starts and, with collapseOnComplete (default), folds to its header only after a success. While running the duration ticks on its own and the log follows its tail.

Highlighting

CodeHighlight loads the highlighter core, the two themes and each grammar on first use. Only the seven CodeLanguage grammars reach your bundle, each as its own chunk.

Motion

Under reduced motion the panel opens without a height transition, the spinner stops and the log tail jumps instead of smooth-scrolling.

API Reference

Built on the Collapsible primitive. Only the props this library adds or changes are listed; everything else passes through.

ToolResult

Execution disclosure for one agent tool call. Also accepts every prop of Collapsible.Root.

tool*: ReactNode; Tool identifier shown in mono, e.g. bash or http.get. Hidden below sm.
title*: ReactNode; What the call does.
status= "running": "running" | "success" | "error" | "cancelled"; Run state.
kind= "custom": "terminal" | "request" | "custom"; Picks the default header icon.
duration: number; Final duration in seconds. While running and unset, elapsed time ticks on its own (and stays frozen after); a call that never ran in this mount shows no duration.
meta: ReactNode; Extra header text such as an exit code.
icon: ReactNode; Replaces the kind icon in the chip.
open: boolean; Controlled open state.
defaultOpen= true: boolean; Initial open state when uncontrolled.
onOpenChange: (open: boolean) => void; Called when the disclosure opens or closes.
collapseOnComplete= true: boolean; Fold to the header when a run finishes with success.
maxHeight= 240: number; Max height of the output well before it scrolls, in px.
copyText: string | (() => void | Promise<void>); Text (or handler) for the Copy output action; omit to hide it.
onRetry: () => void; Show a Run again action (disabled while running).
contentClassName: string; Classes for the padded box around children.

Prop	Type	Default	Description
tool*	ReactNode	—	Tool identifier shown in mono, e.g. `bash` or `http.get`. Hidden below `sm`.
title*	ReactNode	—	What the call does.
status	"running" \| "success" \| "error" \| "cancelled"	"running"	Run state.
kind	"terminal" \| "request" \| "custom"	"custom"	Picks the default header icon.
duration	number	—	Final duration in seconds. While running and unset, elapsed time ticks on its own (and stays frozen after); a call that never ran in this mount shows no duration.
meta	ReactNode	—	Extra header text such as an exit code.
icon	ReactNode	—	Replaces the `kind` icon in the chip.
open	boolean	—	Controlled open state.
defaultOpen	boolean	true	Initial open state when uncontrolled.
onOpenChange	(open: boolean) => void	—	Called when the disclosure opens or closes.
collapseOnComplete	boolean	true	Fold to the header when a run finishes with `success`.
maxHeight	number	240	Max height of the output well before it scrolls, in px.
copyText	string \| (() => void \| Promise<void>)	—	Text (or handler) for the Copy output action; omit to hide it.
onRetry	() => void	—	Show a Run again action (disabled while running).
contentClassName	string	—	Classes for the padded box around `children`.

data-status: The current status.

Data attribute	Description
data-status	The current `status`.

ToolResultOutput

Highlighted, wrapping output body.

children*: string; The output text.
language= "bash": "bash" | "json" | "diff" | "tsx" | "typescript" | "yaml" | "python" | "text"; Highlight grammar.
className: string; Merged onto the pre.

Prop	Type	Default	Description
children*	string	—	The output text.
language	"bash" \| "json" \| "diff" \| "tsx" \| "typescript" \| "yaml" \| "python" \| "text"	"bash"	Highlight grammar.
className	string	—	Merged onto the `pre`.

ToolResultRequest

Request line plus response body for kind="request".

url*: string; Request URL.
method= "GET": string; HTTP method; GET, POST, PUT, PATCH and DELETE get their own tint.
statusCode: number; Response code; green below 400, red otherwise.
statusText: string; Text after the code, e.g. OK.
body: string; Response body.
language= "json": CodeLanguage; Highlight grammar for body.
className: string; Merged onto the wrapper.

Prop	Type	Default	Description
url*	string	—	Request URL.
method	string	"GET"	HTTP method; GET, POST, PUT, PATCH and DELETE get their own tint.
statusCode	number	—	Response code; green below 400, red otherwise.
statusText	string	—	Text after the code, e.g. `OK`.
body	string	—	Response body.
language	CodeLanguage	"json"	Highlight grammar for `body`.
className	string	—	Merged onto the wrapper.

CodeHighlight

Dual-theme syntax highlight shared by the agent components. Also accepts every prop of pre.

code*: string; Source text.
language= "bash": CodeLanguage; Highlight grammar.
wrap= false: boolean; Wrap long lines instead of scrolling horizontally.

Prop	Type	Default	Description
code*	string	—	Source text.
language	CodeLanguage	"bash"	Highlight grammar.
wrap	boolean	false	Wrap long lines instead of scrolling horizontally.

ToolStatusIcon

The spinner / check / cross / stop glyph for a status.

status*: ToolResultStatus; Which glyph to show.
className: string; Merged onto the icon.

Prop	Type	Default	Description
status*	ToolResultStatus	—	Which glyph to show.
className	string	—	Merged onto the icon.

AgentIconButton

Small round ghost icon button used across the agent components. Also accepts every prop of button.

label*: string; aria-label and title.
pressed: boolean; Sets aria-pressed and a pressed chip style.

Prop	Type	Default	Description
label*	string	—	`aria-label` and `title`.
pressed	boolean	—	Sets `aria-pressed` and a pressed chip style.

AgentCopyButton

AgentIconButton that copies and flips to a check.

value*: string | (() => void | Promise<void>); Text to copy, or a handler to run instead.
label= "Copy": string; Accessible label.
className: string; Merged onto the button.

Prop	Type	Default	Description
value*	string \| (() => void \| Promise<void>)	—	Text to copy, or a handler to run instead.
label	string	"Copy"	Accessible label.
className	string	—	Merged onto the button.

Hooks and helpers

useCodeTokens(code, language), useCopyToClipboard(timeout = 1600), useElapsed(active), useControllableOpen(open, defaultOpen, onOpenChange), formatDuration(seconds) (420ms, 2.4s, 1m 05s) and the AGENT_EASE curve are exported for the other agent components.