Trace

Proposed

What the agent did, as an expandable record under one line. Steps, reasoning, web search and tool calls share the header and the rail; the trace runs once, settles, and stays expandable.

@varick/ui/components/traceAdded 2 Sept 2026

Usage

import { Trace } from "@varick/ui/components/trace";

export function Example() {
  return <Trace variant="steps" onSettled={showAnswer} />;
}

Variants

Tool calls

<Trace variant="tools" />

Reasoning

<Trace variant="reasoning" />

Web search

Acme Logistics fleet size DOT

<Trace variant="search" />

API reference

Every component also accepts className and the native props of its root element.

Prop	Type	Default	Description
variant	'steps' \| 'reasoning' \| 'search' \| 'tools'	'steps'	Steps show a spinner then checks; reasoning is prose; search is a query and sources; tools are read, edit and run rows.
onSettled	() => void	undefined	Fires once when the trace stops working, so the answer below can sequence after it.

Accessibility

The header is a real button with aria-expanded; the status text inside it is role="status".
Search rows are links, tool rows are toggle buttons with aria-pressed, step rows are static.

Styles

Proposed CSS in Varick tokens. Nothing in the app renders this yet.

.trace-header { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 4px; }
.trace-header:hover { background: var(--fill); }
.trace-body { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 400ms var(--ease-out), opacity 400ms var(--ease-out); }
.trace-body[data-open] { grid-template-rows: 1fr; opacity: 1; }
.trace-rail { position: absolute; left: 3px; width: 1px; background: var(--hairline-soft); }
.trace-row { display: flex; align-items: center; gap: 8px; min-height: 28px; padding: 2px 6px; border-radius: 4px; font-size: 12.5px; }