AgentStat

Real-time LLM agent telemetry, token rates, progress, status, and health scoring, rendered live to canvas.

01 -Overview
AgentStat is a lightweight, canvas-powered React component that visualizes live LLM and agent metrics with buttery-smooth curves, token rates, progress, status, and automatic health scoring per agent.

It bridges the gap between opaque agentic workflows and observable telemetry. Drop it into your dashboard, push metrics via a single imperative call, and watch your agents breathe.

02 -Features

The curve is the product. Standard charting libraries render data as straight lines between points. AgentStat uses Catmull-Rom spline interpolation — the same technique used in motion graphics — so agent metrics flow rather than jitter. You can tell the difference in the first second.

Health scoring that means something. Every agent gets an automated health score derived from token efficiency, response stability, and deviation from baseline. Not a number you configure — one that emerges from the data itself. If something is wrong, you see it without reading a log.

Bypass React, stay at 60fps. Most telemetry components slow down under load because they route every update through React's reconciliation cycle. AgentStat uses an imperative API: you push data via a ref handle, the canvas renders directly, and React never needs to know. Under heavy data load, the visualization stays fluid.

A dot that tells you where you are. The live pulsing dot at the leading edge of the stream isn't decorative. It tells you the component is receiving data right now — not data from a second ago, not a cached frame. It's the visual equivalent of a heartbeat monitor staying on.

Live Demo
localhost:3000/agentstat
AgentStat · Live Telemetry
94
HEALTH
87%
TOKEN EFF.
98
STABILITY
updateAgent() →tokens: 1842 · latency: 38ms · streaming
03 -Architecture

Three decisions made AgentStat possible. Each one was a choice to do less in React, and more directly.

L01

Canvas 2D Rendering

A dedicated animation loop runs on RequestAnimationFrame, completely separate from the React component tree. The result is that heavy data loads — dozens of agents updating simultaneously — don't affect UI responsiveness at all.

L02

Ref-Driven Updates

Data enters the component through an imperative handle rather than props. When you call updateAgent(), the data goes directly into the render buffer. React never re-renders. There's no state, no diffing, no reconciliation — just bytes moving to pixels.

updateAgent() protocol
L03

Automatic Health Scoring

A composite score collapses four signals, token efficiency, signal stability, hallucination risk, latency trend, into a single 0-to-100 number. The formula self-renormalizes when latency data isn't available, so a healthy agent with no latency signal still reaches 100. Nothing to configure derived entirely from the data flowing through.

04 -Note

I built AgentStat because watching agents run in the dark felt wrong. Telemetry shouldn't require heavy dashboards or complex state machines.

This is a quiet tool. It doesn't shout. It just draws a line, scores the health, and gets out of the way. If you're building agentic workflows, you already know the chaos. This is the calm.

— Built with Catmull-Rom and too much coffee.

The visualization of autonomous intelligence requires more than data, it requires a clarity of intent. AgentStat remains the silent observer within the machine.

$npm install @dan-build/agentstat
AgentStat2026 · MIT