Skip to main content

​
Dashboard

Patter includes a built-in web dashboard for monitoring calls in real time. It runs alongside your agent server and provides a visual interface for call analytics, live call tracking, and data export.

​
Enabling the Dashboard

The dashboard is enabled automatically when you start a server in local mode: 
await phone.serve(agent, {
  port: 8000,
  dashboard: true,              // Enable dashboard (default: true)
  dashboardToken: "secret",     // Optional: protect with a token
});
Once running, open your browser at http://localhost:8000/dashboard.

​
Authentication

Protect the dashboard with a token: 
await phone.serve(agent, {
  port: 8000,
  dashboardToken: "my-secret-token",
});
Access via:
  • Browser: http://localhost:8000/dashboard?token=my-secret-token
  • API: Authorization: Bearer my-secret-token header
When no token is set, the dashboard is accessible without authentication.

​
Dashboard Features

​
Live Call Monitoring

View active calls in real time:
  • Caller and callee numbers
  • Call duration
  • Current conversation transcript
  • Provider information

​
Call History

Browse completed calls with:
  • Full conversation transcripts
  • Cost breakdown per call
  • Latency metrics (average and P95)
  • Provider and voice mode details

​
Analytics Overview

Aggregate statistics across all calls:
  • Total calls and minutes
  • Average call duration
  • Cost trends over time
  • Cost breakdown by component (STT, TTS, LLM, telephony)

​
Data Export

Export call data in CSV or JSON format:
  • CSV: Flat table with one row per call, suitable for spreadsheet analysis.
  • JSON: Full nested data including per-turn metrics.

​
API Endpoints

The dashboard exposes a REST API for programmatic access:
EndpointDescription
GET /api/v1/callsPaginated call history.
GET /api/v1/calls/activeCurrently active calls.
GET /api/v1/calls/{callId}Single call detail with full transcript.
GET /api/v1/analytics/overviewAggregate statistics.
GET /api/v1/analytics/costsCost breakdown over time.
GET /api/v1/export/csvExport calls as CSV.
GET /api/v1/export/jsonExport calls as JSON.

​
Example: Fetch Call History

const response = await fetch("http://localhost:8000/api/v1/calls?limit=10", {
  headers: { Authorization: "Bearer my-secret-token" },
});
const calls = await response.json();

​
Real-Time Updates (SSE)

The dashboard uses Server-Sent Events for live updates. You can subscribe programmatically: 
const eventSource = new EventSource("http://localhost:8000/api/v1/events");

eventSource.onmessage = (event) => {
  const data = JSON.parse(event.data);
  console.log("Dashboard event:", data);
};
The dashboard stores metrics in memory. Data is lost when the server restarts. For persistent analytics, use the onCallEnd callback to save metrics to your own database.