Skip to content

Call Insights Frontend

Tech Stack: React 19 + TypeScript 6, Vite 8, Tailwind CSS 4, WaveSurfer.js, Keycloak
Source: ~/VSCodeProjects/Nexivo/call-insights-frontend

Purpose

Internal debugging and observability dashboard for the Atlas voice pipeline. Provides per-call inspection, issue diagnosis, STT provider comparison, and transcription error reporting.

Pages

Path Page Purpose
/ Session List Browse and filter call sessions
/sessions/:id Session Detail Full session inspection with tabbed view
/reports STT Reports Browse and submit transcription issue reports
/analysis Analysis Full-call STT analysis list and batch runner

Session Detail — Tabs

Timeline

  • Event timeline: codec info, near-miss speech, errors
  • Audio segment playlist: pre-RNNoise, post-RNNoise, STT input
  • WaveSurfer-based audio player per segment

Transcript

  • User/agent conversation turns
  • Per-turn metrics displayed inline:
Metric Description
Transcription delay Time from end-of-speech to transcript
STT confidence Provider confidence score
LLM TTFT Time to first token from LLM
TTS TTFB Time to first audio byte from TTS
E2E latency Full round-trip latency per turn
  • Playback of user utterance audio per turn
  • Near-miss speech alerts with inline audio player
  • Report button per turn to submit an STT issue

Diagnostics

  • Issues listed by severity: critical / warning / info
  • Evidence (timestamps, affected turns) per issue
  • Linked to specific audio segments where applicable

Analysis

  • Trigger full-call STT analysis (native provider + optional extras)
  • Results grid: turns × renditions × providers
  • Columns: pre_rnnoise, post_rnnoise, stt_input
  • Rows: each user turn
  • Cells: transcript, confidence, latency (ms), clipping flag
  • View past analyses with status (pending / running / done)

Batch Analysis

  • Enqueue up to 50 unanalysed sessions at once
  • Progress bar with done / failed counts
  • Polls every 2 seconds for job status
  • Cancel option for in-progress jobs

STT Reports

  • Submit transcription issue: select turn, enter expected output, describe issue type
  • Audio clip archived to DigitalOcean Spaces on submission
  • Per-report provider comparison: replay the reported utterance through multiple STT engines
  • Filter reports by call_id or issue_type

Authentication

Keycloak OAuth2/OIDC — required role: access. Token attached as Authorization: Bearer to all API calls.

VITE_KEYCLOAK_BASE_URL=...
VITE_KEYCLOAK_REALM=...
VITE_KEYCLOAK_CLIENT_ID=...
VITE_API_BASE_URL=http://localhost:8090

Local Development

cd call-insights-frontend
npm install
npm run dev    # Starts at localhost:3000; proxies /api → localhost:8090