Overwatch
Live agent observability dashboard
- Stack
- Astro
- Vanilla TS
- WebSockets / SSE
- TimescaleDB
- Metric
- streaming UI · live latency histograms
- Links
- repo — soondemo — soon
Problem
Once voice agents are live, “is it working?” is not a yes/no — it’s a hundred concurrent conversations, each with its own latency, errors and sentiment. You can’t operate what you can’t see. Overwatch is the operator’s window into the running fleet.
Approach — architecture
A streaming dashboard fed by SSE/WebSockets. Metrics land in TimescaleDB; latency is rendered as live histograms rather than misleading averages. The frontend is deliberately lightweight — Astro + vanilla TS — so a wall-mounted NOC screen stays smooth under a firehose of updates.
Writes fan into Timescale; reads stream to the browser over SSE.
What I built
Live transcripts, per-tenant metric tiles, a rolling error feed and latency histograms — all updating in place without thrashing the DOM.
// Coalesce a burst of updates into one paint via rAF (keeps the NOC screen smooth).
let queued = false;
source.onmessage = (e) => {
buffer.push(JSON.parse(e.data));
if (!queued) { queued = true; requestAnimationFrame(flush); }
};
Hard parts
- Streaming UI at volume — batched DOM updates, no per-message reflow.
- Latency histograms — percentiles that tell the truth under skew.
- Alerting — thresholds that page a human before customers notice.
Outcome
A single screen that answers “is the fleet healthy?” at a glance, and drills into any one call when it isn’t.
Links
Repo and demo are placeholders until this is public.