Skip to content

Trace

The steps an agent took. A running step shows the Spinner, a failed one the danger tone, and each says its status to screen readers. A step with details opens in place.

Sourcecomponents/trace.tsx
Searched the design docs1.2s
Running the tests, Running
Review the changes, Not started

Usage

Trace usage
import { Search, Wrench } from "lucide-react";import { Trace, TraceCollapsible, TraceCollapsibleContent, TraceCollapsibleTrigger, TraceDescription, TraceIcon, TraceLine, TraceTitle } from "@/components/trace";
export function TraceUsage() {  return (    <Trace>      <TraceLine>        <TraceIcon>          <Search />        </TraceIcon>        <TraceTitle>Searched the docs</TraceTitle>        <TraceDescription>1.2s</TraceDescription>      </TraceLine>      <TraceLine status="running">        <TraceIcon>          <Wrench />        </TraceIcon>        <TraceTitle>Running tests</TraceTitle>      </TraceLine>      <TraceCollapsible>        <TraceCollapsibleTrigger>          <TraceLine>            <TraceTitle>Edited 3 files</TraceTitle>          </TraceLine>        </TraceCollapsibleTrigger>        <TraceCollapsibleContent>app/page.tsx, app/layout.tsx, app/globals.css</TraceCollapsibleContent>      </TraceCollapsible>    </Trace>  );}

When to use

Use when

The steps an agent took, with each step's status (running, failed, not started) and optional details that open in place

Don’t use when

Progress toward a known total (use Progress); a one-off result message (use Toast or Alert)