Features

  • Real-time animated charts

    Buttery-smooth Catmull-Rom splines render live token rates and progress with zero jitter. The animation loop runs independently of React state — 60fps regardless of how frequently you push data.

  • Automatic health scoring

    Built-in composite health score (0–100) computed from token efficiency, signal stability, hallucination risk, and latency trend. The latency component renormalizes out when you don't provide latencyMs, so a healthy agent with no latency data reaches 100 — not an artificial ~90 cap. Fires via onHealthChange whenever the score shifts meaningfully.

  • Live pulsing dot

    A sharp live dot leads each curve, with a subtle center. It moves smoothly via frame-interpolated lerping — no sudden jumps even when data arrives in bursts.

  • Imperative updateAgent() API

    Push metrics via the ref API: ref.current?.updateAgent(id, tokensRate, progress, status). Works with any data source — hooks, WebSocket events, SSE streams, polling. Anomalous statuses you push (stuck, hallucinating) are pinned and won't be overwritten by the simulation.

  • Multi-agent support

    Render up to several agents simultaneously, each with an independent line, color, health score, and visibility toggle. Agent lines are individually togglable without unmounting the component.

  • Zero-boilerplate helpers

    demoAgents is a ready-made 3-agent roster you can drop in as the agents prop. createAgent(id, name, color?) fills in the structural defaults (data, current, visible) so you only name what matters.

  • Hover tooltips & click callbacks

    Hover any data point to see its status, token rate, and progress. Click to fire onSpikeClick with the full point snapshot. Coordinates are DPR-corrected so hit-testing is pixel-accurate at any zoom.

  • Retina-ready canvas

    Automatically reads devicePixelRatio and sets up the canvas transform accordingly. Crisp on every display. Mouse coordinates are corrected for DPR so hover detection is pixel-accurate.

  • Light & dark theme

    Pass any background hex via the styles prop. The component detects luminance and auto-adjusts overlay colors (agent toggles, telemetry panel, tooltip) for light and dark backgrounds.

  • Robust by default

    Renders safely when agents is missing, empty, or arrives late from a data source. No crashes during SSR streaming or conditional loading.

  • Accessible and keyboard-friendly

    Canvas is labelled as an image, has a visible :focus-visible outline for keyboard users, and supports space-to-pause.

  • Zero runtime dependencies

    Pure React and Canvas 2D. No charting library, no D3, no WebGL. The entire component is one file that ships in your bundle — about 11 KB minified.