Trace

The steps an agent took, one line each: an icon, what it did, and a quiet figure at the end.

Install

terminal

# once per project: where @zeroui items come frompnpm dlx shadcn@latest registry add @zeroui=https://zeroui.catforest.dev/r/{name}.jsonpnpm dlx shadcn@latest add @zeroui/trace

Examples

An agent's four steps

Took the sealed crate0.4 sPlanning the routeMessage the north gate

trace-steps.tsx

import { CheckIcon, SearchIcon, SpinnerIcon } from "@/components/zero/icons";import {  Trace,  TraceCollapsible,  TraceCollapsibleContent,  TraceCollapsibleTrigger,  TraceDescription,  TraceIcon,  TraceLine,  TraceTitle,} from "@/components/zero/trace";export default function TraceSteps() {  return (    <Trace className="max-w-md">      <TraceCollapsible>        <TraceCollapsibleTrigger>          <TraceLine>            <TraceIcon>              <SearchIcon />            </TraceIcon>            <TraceTitle>Searched the job board</TraceTitle>            <TraceDescription>12 jobs</TraceDescription>          </TraceLine>        </TraceCollapsibleTrigger>        <TraceCollapsibleContent>          Rush jobs in the east district, sorted by reward. Three are within a          kilometre of the rail yards.        </TraceCollapsibleContent>      </TraceCollapsible>      <TraceLine>        <TraceIcon>          <CheckIcon />        </TraceIcon>        <TraceTitle>Took the sealed crate</TraceTitle>        <TraceDescription>0.4 s</TraceDescription>      </TraceLine>      <TraceLine status="running">        <TraceIcon>          <SpinnerIcon className="animate-spin [animation-duration:calc(var(--zero-dur-loop)/2)]" />        </TraceIcon>        <TraceTitle>Planning the route</TraceTitle>      </TraceLine>      <TraceLine status="pending">        <TraceIcon>          <CheckIcon />        </TraceIcon>        <TraceTitle>Message the north gate</TraceTitle>      </TraceLine>    </Trace>  );}

Behaviour

A step still running is in the accent, one that failed in red, one not yet started dimmed. A step can open (TraceCollapsible) to show what it read or wrote, behind a quiet line, unfolding like Collapsible.

Props

TraceLine

Prop	Type	Default	Description
status	"running" \| "error" \| "pending"	—	Its state; finished when left out.