Architecture

Token Stats Dashboard

Real-time token usage analytics. Every query through the edge router logs token counts, latency, and routing decisions to Firestore. The stats dashboard aggregates and visualizes this data live.

1

chat-ui sends query to api.pazlabs.io

The chat interface POSTs the user's query with a session ID. The edge-router processes it and returns a structured response.

2

Response includes token counts from each provider

Every API response includes a tokens object with input, output, and total counts — sourced from whichever provider handled the query (Ollama, Claude, Gemini, Grok, or OpenAI).

3

chat-ui writes a token_stats doc to Firestore

After each successful response, the chat UI logs a document to the token_stats Firestore collection with the session ID, query preview, provider, token counts, latency, and confidence score.

session_id, query_preview, routed_to,
source, skill, input_tokens, output_tokens,
total_tokens, latency_ms, confidence_score
4

stats-ui reads Firestore with onSnapshot

The stats dashboard subscribes to the token_stats collection with a real-time listener. New documents appear instantly — no polling needed.

5

Dashboard aggregates by session / day / week / month

Client-side aggregation computes per-provider query counts, input/output tokens, and average latency. A line chart shows daily query volume by provider. Time filters: Session, Today, Week, Month, All Time.

Data Flow

chat-ui→POST /query to api.pazlabs.io
edge-router→Returns response + token counts
chat-ui→addDoc to Firestore token_stats
stats-ui←onSnapshot (real-time updates)

Tech Stack

React 18Next.js 14Firebase FirestoreRechartsTypeScriptTailwind CSSFirebase Hosting
github.com/jeffpaz/pazlabs.io