@kofoworola/trace-viewer

React components for visualizing OpenTelemetry (OTLP) traces as an interactive waterfall — a tree view, per-span details, and badges for span type, status, and token usage. Includes a servflow-aware OTLP adapter that normalizes raw spans into a render-ready tree.

Ships bundled JS, type declarations, and a compiled stylesheet — so you don't need Tailwind or any build-time config in the consuming app.

Install

npm install @kofoworola/trace-viewer
# peer deps: react >=19, react-dom >=19

Usage

import {
  TraceViewerTreeViewContainer,
  DetailsView,
  convertOpenTelemetryToTraceSpans,
  type TraceSpan,
} from "@kofoworola/trace-viewer";
import "@kofoworola/trace-viewer/styles.css"; // import once, anywhere

function Trace({ otlp }: { otlp: unknown }) {
  // `otlp` is an OTLP document: { resourceSpans: [...] }
  const spans = convertOpenTelemetryToTraceSpans(otlp as never);
  const [selected, setSelected] = useState<TraceSpan | undefined>(spans[0]);
  // ...render TraceViewerTreeViewContainer + DetailsView (see repo demo)
}

The adapter reads standard OpenTelemetry GenAI (gen_ai.usage.*) and servflow (sf.*) conventions to derive span category, title, subtitle, status, and token counts.

License

MIT © Kofo Okesola. Source: https://github.com/kofoworola/traceviewer