zynactradocs

Trace

A compact log of steps an agent or job took, each expandable to show its output.

Read 6 files in packages/ui
Tasks:    6 successful, 6 total
Time:     14.2s
npm.pkg.github.com returned 401Searching GitHub Packages docsPublish @zynactra/ui

Usage

import {
  Trace,
  TraceCollapsible,
  TraceCollapsibleContent,
  TraceCollapsibleTrigger,
  TraceIcon,
  TraceLine,
  TraceTitle,
} from "@zynactra/ui/trace"
<Trace>
  <TraceLine status="running">
    <TraceIcon>
      <GlobeIcon />
    </TraceIcon>
    <TraceTitle>Searching the docs</TraceTitle>
  </TraceLine>
  <TraceCollapsible>
    <TraceCollapsibleTrigger>
      <TraceLine>
        <TraceTitle>Ran pnpm check</TraceTitle>
      </TraceLine>
    </TraceCollapsibleTrigger>
    <TraceCollapsibleContent>Output here.</TraceCollapsibleContent>
  </TraceCollapsible>
</Trace>

status on TraceLine is running (title shimmers), error or pending; leave it off for finished steps.

Guidelines

  • Titles in the past tense once done ("Ran", "Read"), present while running ("Running"), so the text carries the state.
  • Put raw output in a small Code Block inside the collapsible, closed by default.
  • Errors stay visible; don't collapse them away.
Edit on GitHub

On this page