Skip to content

feat: add Pipeline Analytics dashboard with latency metrics#10

Open
mudassar531 wants to merge 2 commits intoTrilletAI:mainfrom
mudassar531:metrices_dev
Open

feat: add Pipeline Analytics dashboard with latency metrics#10
mudassar531 wants to merge 2 commits intoTrilletAI:mainfrom
mudassar531:metrices_dev

Conversation

@mudassar531
Copy link
Copy Markdown

Pipeline Analytics Dashboard

Adds a new Pipeline Analytics page that provides detailed voice agent performance monitoring with per-turn latency breakdowns (STT, LLM TTFT,
TTS TTFB, EOU delay).

Features

  • KPI Cards — Total calls, average & P95 end-to-end latency, success rate
  • Pipeline Breakdown — Per-stage metrics (STT duration, LLM time-to-first-token, TTS time-to-first-byte, end-of-utterance delay) with trend
    indicators
  • Charts — Daily call volume (bar chart) and hourly latency trends (area chart)
  • Call Log Table — Paginated list with expandable per-turn metrics
  • Call Detail Panel — Slide-over showing full turn-by-turn breakdown
  • Sidebar Navigation — "Pipeline Analytics" link added under Logs group

Files

File Description
database/add_pipeline_analytics_view.sql Materialized view, unique index, refresh function, P95 helper
src/app/api/analytics/pipeline/route.ts API route with validation, batched queries, pagination, phone masking
src/hooks/usePipelineAnalytics.ts React Query hook with full TypeScript interfaces
src/components/analytics/PipelineAnalytics.tsx Main dashboard component
src/components/analytics/index.ts Barrel export
src/app/[projectid]/analytics/page.tsx Next.js page with Suspense + skeleton
src/components/shared/SidebarWrapper.tsx Added Pipeline Analytics nav link

Production Hardening

  • UUID regex validation for agent_id
  • Date format validation (YYYY-MM-DD)
  • Supabase .in() batched to 200 per call (URL length safety)
  • Server-side phone number masking
  • isFinite() guards on all numeric metrics
  • Metric precision rounded to 4 decimal places
  • Pagination: default 50, max 100 per page
  • UNIQUE index on materialized view for CONCURRENTLY refresh
  • Escape key handler + ARIA attributes for accessibility

How to test

  1. Run the SQL migration in database/add_pipeline_analytics_view.sql
  2. Navigate to /<projectId>/analytics?agent_id=<uuid>
  3. Dashboard loads with KPIs, pipeline cards, charts, and call log table

Built to match existing Soundflare patterns (phosphor-react icons, shadcn/ui Card, recharts, React Query hooks, Supabase admin client).

Mudassar and others added 2 commits April 10, 2026 10:26
Add a new Pipeline Analytics page that provides detailed voice agent
performance monitoring with per-turn latency breakdowns:

New files:
- API route: /api/analytics/pipeline - aggregates STT, LLM TTFT, TTS,
  and EOU delay metrics from soundflare_metrics_logs
- React hook: usePipelineAnalytics - React Query wrapper with caching
- Page: /[projectid]/analytics - new route with agent_id query param
- Component: PipelineAnalytics - full dashboard with:
  - KPI cards (total calls, avg/P95 latency, success rate)
  - Pipeline breakdown cards (STT, LLM TTFT, TTS, EOU delay)
  - Daily call volume bar chart
  - Hourly latency trend area chart
  - Call log table with expandable per-turn metrics
  - Call detail slide-over panel
- Database migration: materialized view for efficient aggregation
- Sidebar navigation: added Pipeline Analytics link under Logs group

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
API route:
- Add UUID validation for agent_id
- Add date format validation (YYYY-MM-DD regex)
- Batch Supabase .in() queries (200 per batch) to avoid URL length limits
- Add server-side pagination (page/limit params, default 50, max 100)
- Mask phone numbers server-side (not just frontend)
- Add isFinite() check on metrics to prevent NaN propagation
- Round all metric values to 4 decimal places for consistent precision
- Return success_count, failed_count, turn_count in summary

Component:
- Remove unused imports (LineChart, Line, PipelineSummary)
- Add pagination controls (prev/next with showing X-Y of Z)
- Reset page on period change to avoid stale state
- Add Escape key handler for slide-over panel
- Add aria-label and aria-hidden for accessibility

Hook:
- Add Pagination type interface
- Pass page/limit params through to API

Database migration:
- Add UNIQUE index on (session_id, call_date, call_hour)
  required for CONCURRENTLY refresh

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@vercel
Copy link
Copy Markdown

vercel bot commented Apr 10, 2026

@mudassar531 is attempting to deploy a commit to the Trillet AI Team on Vercel.

A member of the Team first needs to authorize it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant