Observability appPro

Installation

The template installs as a folder under components/chatcn/pro/observability-app/: the app, the rail, the trace list and trace view, usage, errors, alerts and the data model.

Usage

import { ObservabilityApp } from "@/components/chatcn/pro/observability-app/observability-app"

<ObservabilityApp
  project="Payments"
  traces={traces}
  usage={usage}
  errorGroups={errorGroups}
  logs={logs}
  alerts={alerts}
  incidents={incidents}
/>

Give it a height: it fills its parent. Traces carry their spans in the TraceSpan contract the Pro TraceWaterfall reads, so OpenTelemetry or your tracing backend maps onto them directly. Usage, error groups, log lines and alert rules are plain data in the shapes of obs-data.ts and the components that draw them. Mark a trace live and its waterfall grows on the clock until the spans end.

Examples

Trace with a failed span

The first search_logs call timed out and the agent retried with a narrower range. The span opens in the side panel with its error, input, output, events and scores.

Usage near the budget

83 % of the month's budget with three days left. Headline numbers, then the Pro BudgetGuard, CostExplorer, LatencyHistogram, TokenBreakdownChart, ModelRoutingFlow and UptimeStrip, separated by space and a hairline.

On a phone

Below 768 px the rail moves into a drawer, each trace stacks its numbers under the input and the span detail becomes a full screen sheet with a way back to the trace. Pass layout="mobile" to force it inside a device frame.

Empty and loading

A new project before its first trace says how to send one. While data loads, every view holds its layout with quiet placeholders.

What is inside

• The shell is the free ChatLayout: the rail collapses to icons with Cmd+B, the span detail is its resizable side panel.
• Traces: every run with a status glyph and word, name, id, input, duration, tokens, cost and age. Filter to failed or running runs, search ids, inputs, users and releases, and move through rows with the arrow keys.
• A trace: the input, status, user and release, then the Pro TraceWaterfall with depth control. Selecting a span opens the Pro SpanDetail beside it, with copy as cURL.
• Usage: requests, latency, failure rate and tokens, the budget with pause at cap, spend by model, user or feature, latency with a drill down that opens traces, tokens by kind, routing outcomes and 90 days of uptime.
• Errors: the Pro ErrorGroups with trends, samples that open their trace and Resolve, above the Pro LogTail following the worker log.
• Alerts: rules with their state, reading and channel, firing first. Each one mutes from its switch, a firing rule opens its traces, and the last week's incidents show how long each lasted. While a rule fires, a banner under the header says so on every other view.
• Spend this month at the foot of the rail, amber from 80 % and red at the cap, and every shortcut in KeyboardShortcuts.

Props

Keyboard

Accessibility

• Landmarks from the layout, a skip link, a named navigation with aria-current, and one heading level 1 per view.
• Status never rests on color: every trace, rule and incident pairs its hue with a glyph and a word.
• Each trace row is one button whose name reads the trace, its status, duration and age.
• The firing banner is a status region. Resolving a group, muting a rule and changing the budget switch are announced politely.
• Loading regions are busy status regions with a name, so a screen reader hears what is on its way.

Motion

• The span panel slides 16 px on the panel curve, a sheet on phones. A live waterfall grows on its clock.
• Moving between views, traces and the list is instant: it is used all day and from the keyboard.
• Reduced motion is handled by each composed part.