# Trace Viewer
Source: https://ui.spencerwueste.com/docs/blocks/trace-viewer/
Markdown: https://ui.spencerwueste.com/llm/blocks/trace-viewer.md

> Span waterfall for one request with tokens, latency, and input and output payloads.

> Live preview: https://ui.spencerwueste.com/preview/trace-viewer

## What's inside

- **Trace list** with status, model, and latency.
- **Waterfall** positions each span by start and duration, coloured by kind and nested by depth.
- **Span detail** shows tokens plus input and output as highlighted JSON via Code Block.

## Installation

```bash
npx shadcn@latest add https://ui.spencerwueste.com/r/trace-viewer.json
```

Manual install dependencies: `@heroicons-animated/react motion`

Registry JSON: https://ui.spencerwueste.com/r/trace-viewer.json

The registry item pulls in every component it depends on.

## Usage

```tsx
import TraceViewer from "@/components/blocks/trace-viewer/trace-viewer";

export default function Page() {
  return (
    <div className="h-dvh p-4">
      <TraceViewer />
    </div>
  );
}
```

Give the parent a bounded height. The block fills it and scrolls internally.

## Going live

Map your tracing backend's spans onto the `Span` shape: start offset, duration, depth, kind, and payloads. OpenTelemetry-style parent ids convert to depth with a single pass.