Trace Since v4.1.0
Compact rows for agent activity such as tool calls, commands and sources, with optional collapsible detail. Each row pairs an icon with a title and a short description.
Usage
import {
BuiTrace,
BuiTraceCollapsible,
BuiTraceCollapsibleContent,
BuiTraceCollapsiblePanel,
BuiTraceCollapsibleTrigger,
BuiTraceDescription,
BuiTraceIcon,
BuiTraceLine,
BuiTraceTitle,
} from '@/bui/ui/trace';<div buiTrace>
<span buiTraceLine>
<mat-icon buiTraceIcon svgIcon="search" />
<span buiTraceTitle>Searched invoices</span>
<span buiTraceDescription>14 results</span>
</span>
</div>Example
buiTrace stacks the rows and buiTraceLine lays out one. The icon may lead or follow the title, and the description holds counts and durations in tabular figures. A line inside a link or a button gets a pointer and a hover color.
The client has two overdue invoices, INV-1042 and INV-1057, for $21,400 in total. Neither has a payment recorded.
<div buiTrace>
<span buiTraceLine>
<mat-icon buiTraceIcon svgIcon="search" />
<span buiTraceTitle>Searched invoices for overdue</span>
<span buiTraceDescription>2 results</span>
</span>
<span buiTraceLine>
<span buiTraceTitle>Opened the client account</span>
<mat-icon buiTraceIcon svgIcon="check" />
</span>
</div>Status
status on the line sets its state: running shimmers the title, error turns the line red and pending dims it. No status means done or idle. The icon is your choice per state. For a stronger running cue, use an indeterminate progress spinner as the icon; the icon slot sizes its stroke and color.
<span buiTraceLine status="running">
<mat-progress-spinner buiTraceIcon mode="indeterminate" diameter="16" />
<span buiTraceTitle>Exporting the August statement</span>
</span>
<span buiTraceLine status="error">
<mat-icon buiTraceIcon svgIcon="circle-x" />
<span buiTraceTitle>Failed to read INV-1061.pdf</span>
</span>
<span buiTraceLine status="pending">
<mat-icon buiTraceIcon svgIcon="mail" />
<span buiTraceTitle>Send the reminder to the billing contact</span>
</span>Streaming
Render the steps as they arrive and mark the newest one running until the next one starts.
<div buiTrace>
@for (step of steps(); track step.id; let last = $last) {
<span buiTraceLine [status]="last && streaming() ? 'running' : undefined">
@if (last && streaming()) {
<mat-progress-spinner buiTraceIcon mode="indeterminate" diameter="16" />
} @else {
<mat-icon buiTraceIcon [svgIcon]="step.icon" />
}
<span buiTraceTitle>{{ step.title }}</span>
<span buiTraceDescription>{{ step.description }}</span>
</span>
}
</div>Collapsible detail
Wrap a line in buiTraceCollapsibleTrigger inside buiTraceCollapsible to make it expandable. The trigger appends a chevron that turns when open, and the content draws a rail beside the detail. Content always goes inside an ng-template buiTraceCollapsiblePanel, which creates it on open and destroys it on close. Content may hold another trace, to any depth.
<div buiTrace>
<div buiTraceCollapsible [(expanded)]="expanded">
<button buiTraceCollapsibleTrigger>
<span buiTraceLine>
<mat-icon buiTraceIcon svgIcon="list-checks" />
<span buiTraceTitle>Reviewed open invoices</span>
<span buiTraceDescription>3 clients</span>
</span>
</button>
<ng-template buiTraceCollapsiblePanel>
<div buiTraceCollapsibleContent>
<div buiTrace>
<span buiTraceLine>
<mat-icon buiTraceIcon svgIcon="folder" />
<span buiTraceTitle>Largest client</span>
<span buiTraceDescription>2 overdue</span>
</span>
</div>
</div>
</ng-template>
</div>
</div>Patterns
Agent steps, citations, tool calls, test runs and other activity are compositions of these rows. See Trace Patterns for each one in a thread.
API Reference
buiTrace
Stacks the rows. A direct child that wraps a line, such as a link, is laid out like a line.
buiTraceLine
One row. Takes the status.
| Input | Type | Default | Description |
|---|---|---|---|
status | 'running' | 'error' | 'pending' | — | The state of the row. |
buiTraceIcon
Icon slot, before or after the title.
buiTraceTitle
The row text. Truncates and shimmers while running.
buiTraceDescription
Secondary text such as a count, a duration or a domain.
buiTraceCollapsible
Makes a row expandable. Holds the expanded state.
| Input | Type | Default | Description |
|---|---|---|---|
expanded | boolean | false | Two-way binding for the expanded state, with (expandedChange). |
buiTraceCollapsibleTrigger
The button wrapping the line. Appends the chevron.
buiTraceCollapsiblePanel
Goes on an ng-template. Creates the content on open and destroys it on close.
buiTraceCollapsibleContent
The detail, with a rail beside it.