Trace
Agent 执行过的步骤，每步一行：图标、执行的操作，以及行末一个淡色数值。
安装
# once per project: where @zzzui items come frompnpm dlx shadcn@latest registry add @zzzui=https://zzzui.catforest.dev/r/{name}.jsonpnpm dlx shadcn@latest add @zzzui/trace示例
Agent 的四个步骤
Took the sealed crate0.4 sPlanning the routeMessage the north gate
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> );}行为
运行中的步骤显示为强调色，失败的为红色，未开始的变暗。步骤可以展开（TraceCollapsible），显示其读取或写入的内容；内容左侧带一条淡色竖线，展开方式与 Collapsible 相同。
属性
TraceLine
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| status | "running" | "error" | "pending" | — | 步骤状态；不传时视为已完成。 |