TraceAI

A quiet list of the steps an agent took, with running, error and pending states and collapsible detail.

npx prodular-ui add trace

Steps

One line per step. Running shimmers, pending is dimmed, errors are colored.

Read 214 vendor invoices2.1sMatched 198 to purchase orders0.8sCould not open Northbeam MSA 2026.pdfComparing rates with contractsWrite the exceptions report

import { CheckIcon, CircleAlertIcon, FileSearchIcon, LoaderIcon } from "lucide-react"
import { Trace, TraceDescription, TraceIcon, TraceLine, TraceTitle } from "@/components/ui/trace"
export default function TraceSteps() {  return (    <Trace className="max-w-md">      <TraceLine>        <TraceIcon>          <CheckIcon />        </TraceIcon>        <TraceTitle>Read 214 vendor invoices</TraceTitle>        <TraceDescription>2.1s</TraceDescription>      </TraceLine>      <TraceLine>        <TraceIcon>          <CheckIcon />        </TraceIcon>        <TraceTitle>Matched 198 to purchase orders</TraceTitle>        <TraceDescription>0.8s</TraceDescription>      </TraceLine>      <TraceLine status="error">        <TraceIcon>          <CircleAlertIcon />        </TraceIcon>        <TraceTitle>Could not open Northbeam MSA 2026.pdf</TraceTitle>      </TraceLine>      <TraceLine status="running">        <TraceIcon>          <LoaderIcon className="animate-spin motion-reduce:animate-none" />        </TraceIcon>        <TraceTitle>Comparing rates with contracts</TraceTitle>      </TraceLine>      <TraceLine status="pending">        <TraceIcon>          <FileSearchIcon />        </TraceIcon>        <TraceTitle>Write the exceptions report</TraceTitle>      </TraceLine>    </Trace>  )}

With detail

Steps can open to show what the agent read or computed, behind a left hairline.

IFRS 16 Leases, paragraphs 18 to 21
Lease term and reassessment, a practical guide
Short term lease exemption explained
Ledgerline lease register, Rotterdam warehouse

import { GlobeIcon } from "lucide-react"
import {  Trace,  TraceCollapsible,  TraceCollapsibleContent,  TraceCollapsibleTrigger,  TraceDescription,  TraceIcon,  TraceLine,  TraceTitle,} from "@/components/ui/trace"
export default function TraceCollapsibleDemo() {  return (    <Trace className="max-w-md">      <TraceCollapsible defaultOpen>        <TraceCollapsibleTrigger>          <TraceLine>            <TraceIcon>              <GlobeIcon />            </TraceIcon>            <TraceTitle>Searched 4 pages on IFRS 16 lease terms</TraceTitle>            <TraceDescription>3.4s</TraceDescription>          </TraceLine>        </TraceCollapsibleTrigger>        <TraceCollapsibleContent>          <ul className="flex flex-col gap-1.5">            <li>IFRS 16 Leases, paragraphs 18 to 21</li>            <li>Lease term and reassessment, a practical guide</li>            <li>Short term lease exemption explained</li>            <li>Ledgerline lease register, Rotterdam warehouse</li>          </ul>        </TraceCollapsibleContent>      </TraceCollapsible>      <TraceCollapsible>        <TraceCollapsibleTrigger>          <TraceLine>            <TraceTitle>Calculated the right of use asset</TraceTitle>            <TraceDescription>0.2s</TraceDescription>          </TraceLine>        </TraceCollapsibleTrigger>        <TraceCollapsibleContent>          Present value of 60 monthly payments of $14,500 at a 6.2% incremental borrowing rate:          $749,310.        </TraceCollapsibleContent>      </TraceCollapsible>    </Trace>  )}

Anatomy

<Trace>  <TraceLine status="running">    <TraceIcon><SearchIcon /></TraceIcon>    <TraceTitle>Searching invoices</TraceTitle>    <TraceDescription>1.2s</TraceDescription>  </TraceLine></Trace>

Guidance

Use it when

For agent runs with many small steps, where a ToolCall card for each would be too heavy.
As the base of Reasoning, which is a Trace with a timer.

Avoid

Long sentences. A step is a verb and an object, plus a number when it helps.
Hiding errors inside collapsed steps. Keep failed steps visible.

Rules for AI agents

Published in llms-full.txt and the registry, so coding agents follow them when they build with this component.

Write TraceTitle in the past tense for finished steps (Read 214 invoices) and the present for running ones (Comparing rates).
Set status="running" on the step in progress, "pending" on queued steps and "error" on failures. Leave it unset for finished steps.
Put durations and counts in TraceDescription. They are tabular.
Use ToolCall instead when people need to see inputs and outputs or approve the step.

API

TraceLine

Prop	Type	Default	Description
status	"running" \| "error" \| "pending"		Shimmer, error color or dimmed.

TraceCollapsible

Prop	Type	Default	Description
open / defaultOpen / onOpenChange	boolean		Expand a step to show detail.

TraceDescription

Prop	Type	Default	Description
children	ReactNode		Duration or count after the title.