Primitive

Trace panel

Disclosure panel for agent trace summaries and step traces.

TracePanel owns disclosure DOM, status mark, summary layout, step list, and step disclosure styling. Components own the step data, labels, and whether trace is shown.
feedback
DOM renderImage render
Trace panelDefault
Thinking3 stepsInspecting context and selecting the next action.
  1. Context loaded
  2. Plan selected

    Focused primitives and component boundaries.

  3. Running action

    Applying the current migration slice.

Playground

Controls update query params directly, so every primitive state can be linked, rendered, and screenshotted deterministically.

Loading playground

Rendered matrix

Every state maps to the same primitive render route through the state query param.

Default

Trace disclosure with compact step list.
Thinking3 stepsInspecting context and selecting the next action.
  1. Context loaded
  2. Plan selected

    Focused primitives and component boundaries.

  3. Running action

    Applying the current migration slice.

Render state

Closed

Closed trace summary.
Reasoned2 stepsFinished the verification pass.
  1. Read context
  2. Verified gates
Render state

Error

Trace panel with failed step state.
Needs attention3 stepsStopped after a catalog route returned an error.
  1. Loaded registry
  2. Rendered route
  3. Repair fixture
Render state

Public contract

The public prop table is generated from item metadata and schema-backed controls.
NameTypeDefaultDescription
title *ReactNode-Primary trace label.
summary *ReactNode-Compact trace summary.
stepCount *number-Displayed step count.
status'complete' | 'error' | 'pending' | 'streaming'streamingTrace status.
openbooleanfalseInitial disclosure state.