fix: changes to update pipecat version to 0.0.100 (#122)

* feat: add stt evals

* add smart turn as provider

* chore: remove deprecations

* chore: format files

* fix: remove deprecated UserIdleProcessor

* fix: remove deprecated TranscriptProcessor

* chore: update pipecat submodule

* feat: add evals visualisation

* fix: trigger llm generation on client connected and pipeline started

* chore: update pipecat

* chore: update pipecat submodule

* Add tests

* fix: slow loading of workflow page

* chore: update pipecat submodule

* Show version after release

* Fixes #99

* fix: provider check for websocket connection

* Fixes #107

* Fix #96

* chore: fix documentation

* fix: cloudonix campaign call error

---------

Co-authored-by: Sabiha Khan <sabihak89@gmail.com>

evals/visualizer/src/app/api/audio/[filename]/route.ts

@@ -0,0 +1,42 @@
+import { NextRequest, NextResponse } from "next/server";
+import fs from "fs";
+import path from "path";
+
+const AUDIO_DIR = path.join(process.cwd(), "..", "stt", "audio");
+
+const MIME_TYPES: Record<string, string> = {
+  ".mp3": "audio/mpeg",
+  ".wav": "audio/wav",
+  ".m4a": "audio/mp4",
+  ".ogg": "audio/ogg",
+  ".webm": "audio/webm",
+};
+
+export async function GET(
+  request: NextRequest,
+  { params }: { params: Promise<{ filename: string }> }
+) {
+  try {
+    const { filename } = await params;
+    const filePath = path.join(AUDIO_DIR, filename);
+
+    if (!fs.existsSync(filePath)) {
+      return NextResponse.json({ error: "Audio file not found" }, { status: 404 });
+    }
+
+    const ext = path.extname(filename).toLowerCase();
+    const contentType = MIME_TYPES[ext] || "application/octet-stream";
+
+    const fileBuffer = fs.readFileSync(filePath);
+
+    return new NextResponse(fileBuffer, {
+      headers: {
+        "Content-Type": contentType,
+        "Content-Length": fileBuffer.length.toString(),
+      },
+    });
+  } catch (error) {
+    console.error("Error serving audio:", error);
+    return NextResponse.json({ error: "Failed to serve audio" }, { status: 500 });
+  }
+}

evals/visualizer/src/app/api/results/[id]/route.ts

@@ -0,0 +1,27 @@
+import { NextRequest, NextResponse } from "next/server";
+import fs from "fs";
+import path from "path";
+
+const RESULTS_DIR = path.join(process.cwd(), "..", "stt", "results");
+
+export async function GET(
+  request: NextRequest,
+  { params }: { params: Promise<{ id: string }> }
+) {
+  try {
+    const { id } = await params;
+    const filePath = path.join(RESULTS_DIR, `${id}.json`);
+
+    if (!fs.existsSync(filePath)) {
+      return NextResponse.json({ error: "Result not found" }, { status: 404 });
+    }
+
+    const content = fs.readFileSync(filePath, "utf-8");
+    const data = JSON.parse(content);
+
+    return NextResponse.json(data);
+  } catch (error) {
+    console.error("Error reading result:", error);
+    return NextResponse.json({ error: "Failed to read result" }, { status: 500 });
+  }
+}

evals/visualizer/src/app/api/results/route.ts

@@ -0,0 +1,47 @@
+import { NextResponse } from "next/server";
+import fs from "fs";
+import path from "path";
+import { ResultSummary, EventCaptureResult } from "@/types";
+
+const RESULTS_DIR = path.join(process.cwd(), "..", "stt", "results");
+
+export async function GET() {
+  try {
+    if (!fs.existsSync(RESULTS_DIR)) {
+      return NextResponse.json([]);
+    }
+
+    const files = fs.readdirSync(RESULTS_DIR).filter((f) => f.endsWith(".json"));
+    const results: ResultSummary[] = [];
+
+    for (const file of files) {
+      try {
+        const filePath = path.join(RESULTS_DIR, file);
+        const content = fs.readFileSync(filePath, "utf-8");
+        const data: EventCaptureResult = JSON.parse(content);
+
+        results.push({
+          id: file.replace(".json", ""),
+          audio_file: data.audio_file,
+          provider: data.provider,
+          duration: data.duration,
+          created_at: data.created_at,
+          event_count: data.events.length,
+        });
+      } catch {
+        console.error(`Failed to parse ${file}`);
+      }
+    }
+
+    // Sort by created_at descending
+    results.sort(
+      (a, b) =>
+        new Date(b.created_at).getTime() - new Date(a.created_at).getTime()
+    );
+
+    return NextResponse.json(results);
+  } catch (error) {
+    console.error("Error reading results:", error);
+    return NextResponse.json({ error: "Failed to read results" }, { status: 500 });
+  }
+}

evals/visualizer/src/app/globals.css

@@ -0,0 +1,26 @@
+@import "tailwindcss";
+
+:root {
+  --background: #ffffff;
+  --foreground: #171717;
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #0a0a0a;
+    --foreground: #ededed;
+  }
+}
+
+body {
+  background: var(--background);
+  color: var(--foreground);
+  font-family: Arial, Helvetica, sans-serif;
+}

evals/visualizer/src/app/layout.tsx

@@ -0,0 +1,34 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import "./globals.css";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "STT Event Visualizer",
+  description: "Visualize WebSocket events from STT providers",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+      >
+        {children}
+      </body>
+    </html>
+  );
+}

evals/visualizer/src/app/page.tsx

@@ -0,0 +1,129 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import Link from "next/link";
+import { ResultSummary } from "@/types";
+
+function formatDuration(seconds: number): string {
+  const mins = Math.floor(seconds / 60);
+  const secs = Math.floor(seconds % 60);
+  return `${mins}:${secs.toString().padStart(2, "0")}`;
+}
+
+function formatDate(isoString: string): string {
+  const date = new Date(isoString);
+  return date.toLocaleDateString("en-US", {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+  });
+}
+
+const PROVIDER_COLORS: Record<string, string> = {
+  deepgram: "bg-blue-500/20 text-blue-300",
+  "deepgram-flux": "bg-green-500/20 text-green-300",
+  speechmatics: "bg-purple-500/20 text-purple-300",
+};
+
+export default function Home() {
+  const [results, setResults] = useState<ResultSummary[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    async function fetchResults() {
+      try {
+        const response = await fetch("/api/results");
+        if (!response.ok) {
+          throw new Error("Failed to fetch results");
+        }
+        const data = await response.json();
+        setResults(data);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : "Unknown error");
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    fetchResults();
+  }, []);
+
+  return (
+    <div className="min-h-screen bg-zinc-950 text-white">
+      <div className="max-w-4xl mx-auto px-6 py-12">
+        <header className="mb-12">
+          <h1 className="text-3xl font-bold">STT Event Visualizer</h1>
+          <p className="text-zinc-400 mt-2">
+            Visualize captured WebSocket events from STT providers
+          </p>
+        </header>
+
+        {loading && (
+          <div className="flex items-center justify-center py-12">
+            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-white"></div>
+          </div>
+        )}
+
+        {error && (
+          <div className="bg-red-500/20 text-red-300 p-4 rounded-lg">
+            {error}
+          </div>
+        )}
+
+        {!loading && !error && results.length === 0 && (
+          <div className="text-center py-12 text-zinc-500">
+            <p className="text-lg mb-4">No results found</p>
+            <p className="text-sm">
+              Run the event capture script to generate results:
+            </p>
+            <code className="block mt-2 bg-zinc-800 p-3 rounded text-zinc-300 text-sm">
+              python -m evals.stt.event_capture audio/multi_speaker.m4a --provider deepgram
+            </code>
+          </div>
+        )}
+
+        {!loading && !error && results.length > 0 && (
+          <div className="space-y-3">
+            {results.map((result) => (
+              <Link
+                key={result.id}
+                href={`/view/${result.id}`}
+                className="block bg-zinc-900 hover:bg-zinc-800 rounded-lg p-4 transition-colors"
+              >
+                <div className="flex items-center justify-between">
+                  <div className="space-y-1">
+                    <div className="flex items-center gap-3">
+                      <span className="font-medium">{result.audio_file}</span>
+                      <span
+                        className={`text-xs px-2 py-0.5 rounded ${
+                          PROVIDER_COLORS[result.provider] ||
+                          "bg-zinc-700 text-zinc-300"
+                        }`}
+                      >
+                        {result.provider}
+                      </span>
+                    </div>
+                    <div className="text-sm text-zinc-500">
+                      {formatDate(result.created_at)}
+                    </div>
+                  </div>
+                  <div className="text-right space-y-1">
+                    <div className="text-sm text-zinc-400">
+                      {formatDuration(result.duration)}
+                    </div>
+                    <div className="text-xs text-zinc-500">
+                      {result.event_count} events
+                    </div>
+                  </div>
+                </div>
+              </Link>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

evals/visualizer/src/app/view/[id]/page.tsx

@@ -0,0 +1,158 @@
+"use client";
+
+import { useEffect, useState, useCallback } from "react";
+import { useParams } from "next/navigation";
+import Link from "next/link";
+import { EventCaptureResult } from "@/types";
+import AudioPlayer from "@/components/AudioPlayer";
+import EventTimeline from "@/components/EventTimeline";
+import EventList from "@/components/EventList";
+
+const PROVIDER_COLORS: Record<string, string> = {
+  deepgram: "bg-blue-500/20 text-blue-300",
+  "deepgram-flux": "bg-green-500/20 text-green-300",
+  speechmatics: "bg-purple-500/20 text-purple-300",
+};
+
+export default function ViewPage() {
+  const params = useParams();
+  const id = params.id as string;
+
+  const [result, setResult] = useState<EventCaptureResult | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [currentTime, setCurrentTime] = useState(0);
+  const [isPlaying, setIsPlaying] = useState(false);
+
+  useEffect(() => {
+    async function fetchResult() {
+      try {
+        const response = await fetch(`/api/results/${id}`);
+        if (!response.ok) {
+          if (response.status === 404) {
+            throw new Error("Result not found");
+          }
+          throw new Error("Failed to fetch result");
+        }
+        const data = await response.json();
+        setResult(data);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : "Unknown error");
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    if (id) {
+      fetchResult();
+    }
+  }, [id]);
+
+  const handleTimeUpdate = useCallback((time: number) => {
+    setCurrentTime(time);
+  }, []);
+
+  const handlePlayingChange = useCallback((playing: boolean) => {
+    setIsPlaying(playing);
+  }, []);
+
+  const handleSeek = useCallback((time: number) => {
+    setCurrentTime(time);
+  }, []);
+
+  if (loading) {
+    return (
+      <div className="min-h-screen bg-zinc-950 text-white flex items-center justify-center">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-white"></div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="min-h-screen bg-zinc-950 text-white p-6">
+        <div className="max-w-4xl mx-auto">
+          <Link href="/" className="text-zinc-400 hover:text-white mb-4 inline-block">
+            &larr; Back to results
+          </Link>
+          <div className="bg-red-500/20 text-red-300 p-4 rounded-lg">{error}</div>
+        </div>
+      </div>
+    );
+  }
+
+  if (!result) {
+    return null;
+  }
+
+  const audioUrl = `/api/audio/${result.audio_file}`;
+
+  return (
+    <div className="min-h-screen bg-zinc-950 text-white">
+      <div className="max-w-7xl mx-auto px-6 py-6">
+        {/* Header */}
+        <header className="mb-6">
+          <Link href="/" className="text-zinc-400 hover:text-white mb-2 inline-block text-sm">
+            &larr; Back to results
+          </Link>
+          <div className="flex items-center gap-3">
+            <h1 className="text-2xl font-bold">{result.audio_file}</h1>
+            <span
+              className={`text-sm px-2 py-0.5 rounded ${
+                PROVIDER_COLORS[result.provider] || "bg-zinc-700 text-zinc-300"
+              }`}
+            >
+              {result.provider}
+            </span>
+          </div>
+          {result.transcript && (
+            <p className="text-zinc-400 mt-2 text-sm line-clamp-2">
+              {result.transcript}
+            </p>
+          )}
+        </header>
+
+        {/* Main content */}
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+          {/* Left column: Audio player and timeline */}
+          <div className="lg:col-span-2 space-y-4">
+            <AudioPlayer
+              audioUrl={audioUrl}
+              duration={result.duration}
+              currentTime={currentTime}
+              onTimeUpdate={handleTimeUpdate}
+              onPlayingChange={handlePlayingChange}
+            />
+
+            <EventTimeline
+              events={result.events}
+              duration={result.duration}
+              currentTime={currentTime}
+              onSeek={handleSeek}
+            />
+
+            {/* Transcript section */}
+            {result.transcript && (
+              <div className="bg-zinc-800 rounded-lg p-4">
+                <div className="text-sm text-zinc-400 font-medium mb-2">
+                  Final Transcript
+                </div>
+                <p className="text-zinc-300">{result.transcript}</p>
+              </div>
+            )}
+          </div>
+
+          {/* Right column: Event list */}
+          <div className="lg:col-span-1 h-[calc(100vh-12rem)]">
+            <EventList
+              events={result.events}
+              currentTime={currentTime}
+              onSeek={handleSeek}
+              provider={result.provider}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

evals/visualizer/src/components/AudioPlayer.tsx

@@ -0,0 +1,145 @@
+"use client";
+
+import { useRef, useEffect, useState, useCallback } from "react";
+
+interface AudioPlayerProps {
+  audioUrl: string;
+  duration: number;
+  currentTime: number;
+  onTimeUpdate: (time: number) => void;
+  onPlayingChange: (playing: boolean) => void;
+}
+
+function formatTime(seconds: number): string {
+  const mins = Math.floor(seconds / 60);
+  const secs = Math.floor(seconds % 60);
+  return `${mins}:${secs.toString().padStart(2, "0")}`;
+}
+
+export default function AudioPlayer({
+  audioUrl,
+  duration,
+  currentTime,
+  onTimeUpdate,
+  onPlayingChange,
+}: AudioPlayerProps) {
+  const audioRef = useRef<HTMLAudioElement>(null);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [internalTime, setInternalTime] = useState(0);
+
+  useEffect(() => {
+    const audio = audioRef.current;
+    if (!audio) return;
+
+    const handleTimeUpdate = () => {
+      setInternalTime(audio.currentTime);
+      onTimeUpdate(audio.currentTime);
+    };
+
+    const handlePlay = () => {
+      setIsPlaying(true);
+      onPlayingChange(true);
+    };
+
+    const handlePause = () => {
+      setIsPlaying(false);
+      onPlayingChange(false);
+    };
+
+    const handleEnded = () => {
+      setIsPlaying(false);
+      onPlayingChange(false);
+    };
+
+    audio.addEventListener("timeupdate", handleTimeUpdate);
+    audio.addEventListener("play", handlePlay);
+    audio.addEventListener("pause", handlePause);
+    audio.addEventListener("ended", handleEnded);
+
+    return () => {
+      audio.removeEventListener("timeupdate", handleTimeUpdate);
+      audio.removeEventListener("play", handlePlay);
+      audio.removeEventListener("pause", handlePause);
+      audio.removeEventListener("ended", handleEnded);
+    };
+  }, [onTimeUpdate, onPlayingChange]);
+
+  // Seek to currentTime when it changes externally
+  useEffect(() => {
+    const audio = audioRef.current;
+    if (!audio) return;
+
+    // Only seek if the difference is significant (user clicked timeline)
+    if (Math.abs(audio.currentTime - currentTime) > 0.5) {
+      audio.currentTime = currentTime;
+    }
+  }, [currentTime]);
+
+  const togglePlay = useCallback(() => {
+    const audio = audioRef.current;
+    if (!audio) return;
+
+    if (isPlaying) {
+      audio.pause();
+    } else {
+      audio.play();
+    }
+  }, [isPlaying]);
+
+  const handleSeek = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    const audio = audioRef.current;
+    if (!audio) return;
+
+    const newTime = parseFloat(e.target.value);
+    audio.currentTime = newTime;
+    setInternalTime(newTime);
+    onTimeUpdate(newTime);
+  }, [onTimeUpdate]);
+
+  return (
+    <div className="bg-zinc-900 rounded-lg p-4 space-y-3">
+      <audio ref={audioRef} src={audioUrl} preload="metadata" />
+
+      <div className="flex items-center gap-4">
+        <button
+          onClick={togglePlay}
+          className="w-12 h-12 rounded-full bg-white text-black flex items-center justify-center hover:bg-zinc-200 transition-colors"
+        >
+          {isPlaying ? (
+            <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+              <path
+                fillRule="evenodd"
+                d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zM7 8a1 1 0 012 0v4a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v4a1 1 0 102 0V8a1 1 0 00-1-1z"
+                clipRule="evenodd"
+              />
+            </svg>
+          ) : (
+            <svg className="w-5 h-5 ml-1" fill="currentColor" viewBox="0 0 20 20">
+              <path
+                fillRule="evenodd"
+                d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z"
+                clipRule="evenodd"
+              />
+            </svg>
+          )}
+        </button>
+
+        <div className="flex-1 space-y-1">
+          <input
+            type="range"
+            min={0}
+            max={duration}
+            step={0.1}
+            value={internalTime}
+            onChange={handleSeek}
+            className="w-full h-2 bg-zinc-700 rounded-lg appearance-none cursor-pointer accent-white"
+          />
+          <div className="flex justify-between text-xs text-zinc-400">
+            <span>{formatTime(internalTime)}</span>
+            <span>{formatTime(duration)}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

evals/visualizer/src/components/EventList.tsx

@@ -0,0 +1,141 @@
+"use client";
+
+import { useEffect, useRef, useMemo, useState } from "react";
+import { CapturedEvent } from "@/types";
+import { DeepgramEventItem, FluxEventItem, SpeechmaticsEventItem } from "./events";
+
+interface EventListProps {
+  events: CapturedEvent[];
+  currentTime: number;
+  onSeek: (time: number) => void;
+  provider: string;
+}
+
+function formatTime(seconds: number): string {
+  const mins = Math.floor(seconds / 60);
+  const secs = Math.floor(seconds % 60);
+  const ms = Math.floor((seconds % 1) * 100);
+  return `${mins}:${secs.toString().padStart(2, "0")}.${ms.toString().padStart(2, "0")}`;
+}
+
+function getEventItemComponent(provider: string) {
+  if (provider === "deepgram-flux") {
+    return FluxEventItem;
+  }
+  if (provider === "speechmatics") {
+    return SpeechmaticsEventItem;
+  }
+  // Default to Deepgram Nova
+  return DeepgramEventItem;
+}
+
+export default function EventList({
+  events,
+  currentTime,
+  onSeek,
+  provider,
+}: EventListProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [expandedEvents, setExpandedEvents] = useState<Set<number>>(new Set());
+  const [autoScroll, setAutoScroll] = useState(true);
+
+  const EventItemComponent = getEventItemComponent(provider);
+
+  // Find the current event index based on time
+  const currentEventIndex = useMemo(() => {
+    for (let i = events.length - 1; i >= 0; i--) {
+      if (events[i].timestamp <= currentTime) {
+        return i;
+      }
+    }
+    return -1;
+  }, [events, currentTime]);
+
+  // Auto-scroll to current event
+  useEffect(() => {
+    if (!autoScroll || currentEventIndex < 0) return;
+
+    const container = containerRef.current;
+    if (!container) return;
+
+    const eventElement = container.querySelector(`[data-index="${currentEventIndex}"]`);
+    if (eventElement) {
+      eventElement.scrollIntoView({ behavior: "smooth", block: "center" });
+    }
+  }, [currentEventIndex, autoScroll]);
+
+  const toggleExpand = (index: number) => {
+    setExpandedEvents((prev) => {
+      const next = new Set(prev);
+      if (next.has(index)) {
+        next.delete(index);
+      } else {
+        next.add(index);
+      }
+      return next;
+    });
+  };
+
+  return (
+    <div className="bg-zinc-800 rounded-lg flex flex-col h-full">
+      <div className="flex justify-between items-center px-4 py-2 border-b border-zinc-700">
+        <div className="text-sm text-zinc-400 font-medium">
+          Events ({events.length})
+        </div>
+        <label className="flex items-center gap-2 text-xs text-zinc-500 cursor-pointer">
+          <input
+            type="checkbox"
+            checked={autoScroll}
+            onChange={(e) => setAutoScroll(e.target.checked)}
+            className="rounded"
+          />
+          Auto-scroll
+        </label>
+      </div>
+
+      <div
+        ref={containerRef}
+        className="flex-1 overflow-y-auto divide-y divide-zinc-700/50"
+      >
+        {events.map((event, index) => {
+          const isCurrent = index === currentEventIndex;
+          const isExpanded = expandedEvents.has(index);
+
+          return (
+            <div
+              key={index}
+              data-index={index}
+              className={`p-3 cursor-pointer transition-colors ${
+                isCurrent ? "bg-zinc-700/50" : "hover:bg-zinc-700/30"
+              }`}
+              onClick={() => onSeek(event.timestamp)}
+            >
+              <div className="flex items-start gap-2">
+                {/* Current indicator */}
+                <div className="pt-1">
+                  {isCurrent ? (
+                    <div className="w-2 h-2 rounded-full bg-white" />
+                  ) : (
+                    <div className="w-2 h-2 rounded-full bg-zinc-600" />
+                  )}
+                </div>
+
+                {/* Timestamp */}
+                <span className="text-xs text-zinc-500 font-mono pt-0.5">
+                  {formatTime(event.timestamp)}
+                </span>
+
+                {/* Provider-specific event item */}
+                <EventItemComponent
+                  event={event}
+                  isExpanded={isExpanded}
+                  onToggleExpand={() => toggleExpand(index)}
+                />
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

evals/visualizer/src/components/EventTimeline.tsx

@@ -0,0 +1,119 @@
+"use client";
+
+import { useMemo } from "react";
+import { CapturedEvent } from "@/types";
+
+interface EventTimelineProps {
+  events: CapturedEvent[];
+  duration: number;
+  currentTime: number;
+  onSeek: (time: number) => void;
+}
+
+const EVENT_COLORS: Record<string, string> = {
+  Results: "bg-blue-500",
+  TurnInfo: "bg-green-500",
+  AddTranscript: "bg-purple-500",
+  Connected: "bg-yellow-500",
+  RecognitionStarted: "bg-yellow-500",
+  EndOfTranscript: "bg-red-500",
+  Metadata: "bg-gray-500",
+  Error: "bg-red-600",
+  default: "bg-zinc-400",
+};
+
+function formatTime(seconds: number): string {
+  const mins = Math.floor(seconds / 60);
+  const secs = Math.floor(seconds % 60);
+  return `${mins}:${secs.toString().padStart(2, "0")}`;
+}
+
+export default function EventTimeline({
+  events,
+  duration,
+  currentTime,
+  onSeek,
+}: EventTimelineProps) {
+  const timeMarkers = useMemo(() => {
+    const markers: number[] = [];
+    const interval = Math.ceil(duration / 6);
+    for (let i = 0; i <= duration; i += interval) {
+      markers.push(i);
+    }
+    if (markers[markers.length - 1] !== Math.floor(duration)) {
+      markers.push(Math.floor(duration));
+    }
+    return markers;
+  }, [duration]);
+
+  const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
+    const rect = e.currentTarget.getBoundingClientRect();
+    const x = e.clientX - rect.left;
+    const percent = x / rect.width;
+    const time = percent * duration;
+    onSeek(Math.max(0, Math.min(time, duration)));
+  };
+
+  const progressPercent = (currentTime / duration) * 100;
+
+  return (
+    <div className="bg-zinc-800 rounded-lg p-4 space-y-2">
+      <div className="text-sm text-zinc-400 font-medium">Event Timeline</div>
+
+      <div
+        className="relative h-16 bg-zinc-900 rounded cursor-pointer overflow-hidden"
+        onClick={handleClick}
+      >
+        {/* Progress indicator */}
+        <div
+          className="absolute top-0 bottom-0 bg-zinc-700/50 pointer-events-none"
+          style={{ width: `${Math.min(progressPercent, 100)}%` }}
+        />
+
+        {/* Current time indicator */}
+        <div
+          className="absolute top-0 bottom-0 w-0.5 bg-white z-10 pointer-events-none"
+          style={{ left: `${Math.min(progressPercent, 100)}%` }}
+        />
+
+        {/* Event markers */}
+        <div className="absolute inset-0 flex items-center">
+          {events.map((event, index) => {
+            const leftPercent = Math.min((event.timestamp / duration) * 100, 100);
+            const colorClass =
+              EVENT_COLORS[event.event_type] || EVENT_COLORS.default;
+
+            return (
+              <div
+                key={index}
+                className={`absolute w-2 h-8 rounded-sm ${colorClass} opacity-80 hover:opacity-100 transition-opacity`}
+                style={{ left: `${leftPercent}%`, transform: "translateX(-50%)" }}
+                title={`${formatTime(event.timestamp)} - ${event.event_type}`}
+              />
+            );
+          })}
+        </div>
+      </div>
+
+      {/* Time markers */}
+      <div className="flex justify-between text-xs text-zinc-500">
+        {timeMarkers.map((time, index) => (
+          <span key={index}>{formatTime(time)}</span>
+        ))}
+      </div>
+
+      {/* Legend */}
+      <div className="flex flex-wrap gap-3 pt-2">
+        {Object.entries(EVENT_COLORS)
+          .filter(([key]) => key !== "default")
+          .slice(0, 6)
+          .map(([eventType, colorClass]) => (
+            <div key={eventType} className="flex items-center gap-1 text-xs text-zinc-400">
+              <div className={`w-2 h-2 rounded-sm ${colorClass}`} />
+              <span>{eventType}</span>
+            </div>
+          ))}
+      </div>
+    </div>
+  );
+}

evals/visualizer/src/components/events/DeepgramEventItem.tsx

@@ -0,0 +1,98 @@
+"use client";
+
+import { CapturedEvent } from "@/types";
+
+interface DeepgramEventItemProps {
+  event: CapturedEvent;
+  isExpanded: boolean;
+  onToggleExpand: () => void;
+}
+
+const EVENT_COLORS: Record<string, string> = {
+  Results: "text-blue-400 bg-blue-500/10",
+  SpeechStarted: "text-yellow-400 bg-yellow-500/10",
+  Metadata: "text-gray-400 bg-gray-500/10",
+  UtteranceEnd: "text-red-500 bg-red-600/10",
+  default: "text-zinc-400 bg-zinc-500/10",
+};
+
+function getTranscript(event: CapturedEvent): string {
+  const data = event.data;
+  const channel = data.channel as Record<string, unknown> | undefined;
+  if (channel) {
+    const alternatives = channel.alternatives as Array<{ transcript?: string }> | undefined;
+    if (alternatives?.[0]?.transcript) {
+      return alternatives[0].transcript;
+    }
+  }
+  return "";
+}
+
+export default function DeepgramEventItem({
+  event,
+  isExpanded,
+  onToggleExpand,
+}: DeepgramEventItemProps) {
+  const colorClass = EVENT_COLORS[event.event_type] || EVENT_COLORS.default;
+  const data = event.data;
+
+  const transcript = getTranscript(event);
+  const isFinal = data.is_final as boolean | undefined;
+  const speechFinal = data.speech_final as boolean | undefined;
+
+  // For non-Results events
+  const isConnection = event.event_type === "Connected";
+  const isMetadata = event.event_type === "Metadata";
+
+  return (
+    <div className="flex-1 min-w-0 space-y-1">
+      <div className="flex items-center gap-2 flex-wrap">
+        <span className={`text-xs px-2 py-0.5 rounded ${colorClass}`}>
+          {event.event_type}
+        </span>
+
+        {/* Final/Partial indicator for Results */}
+        {isFinal !== undefined && (
+          <span
+            className={`text-xs px-2 py-0.5 rounded ${isFinal
+              ? "text-emerald-400 bg-emerald-500/10"
+              : "text-amber-400 bg-amber-500/10"
+              }`}
+          >
+            {isFinal ? "Final" : "Partial"}
+          </span>
+        )}
+
+        {/* Speech Final indicator */}
+        {speechFinal && (
+          <span className="text-xs px-2 py-0.5 rounded text-cyan-400 bg-cyan-500/10">
+            Speech Final
+          </span>
+        )}
+      </div>
+
+      {/* Transcript or status message */}
+      <div className="text-sm text-zinc-300 truncate">
+        {transcript}
+      </div>
+
+      {/* Expand/collapse button */}
+      <button
+        onClick={(e) => {
+          e.stopPropagation();
+          onToggleExpand();
+        }}
+        className="text-xs text-zinc-500 hover:text-zinc-300"
+      >
+        {isExpanded ? "Hide details" : "Show details"}
+      </button>
+
+      {/* Expanded JSON view */}
+      {isExpanded && (
+        <pre className="mt-2 p-2 bg-zinc-900 rounded text-xs text-zinc-400 overflow-x-auto max-h-64">
+          {JSON.stringify(event.data, null, 2)}
+        </pre>
+      )}
+    </div>
+  );
+}

evals/visualizer/src/components/events/FluxEventItem.tsx

@@ -0,0 +1,115 @@
+"use client";
+
+import { CapturedEvent } from "@/types";
+
+interface FluxEventItemProps {
+  event: CapturedEvent;
+  isExpanded: boolean;
+  onToggleExpand: () => void;
+}
+
+const EVENT_COLORS: Record<string, string> = {
+  TurnInfo: "text-green-400 bg-green-500/10",
+  Connected: "text-yellow-400 bg-yellow-500/10",
+  Error: "text-red-500 bg-red-600/10",
+  default: "text-zinc-400 bg-zinc-500/10",
+};
+
+const FLUX_EVENT_COLORS: Record<string, string> = {
+  Update: "text-amber-300 bg-amber-500/20",
+  EndOfTurn: "text-emerald-300 bg-emerald-500/20",
+  EagerEndOfTurn: "text-cyan-300 bg-cyan-500/20",
+  StartOfTurn: "text-blue-300 bg-blue-500/20",
+  TurnResumed: "text-purple-300 bg-purple-500/20",
+  default: "text-zinc-300 bg-zinc-500/20",
+};
+
+export default function FluxEventItem({
+  event,
+  isExpanded,
+  onToggleExpand,
+}: FluxEventItemProps) {
+  const colorClass = EVENT_COLORS[event.event_type] || EVENT_COLORS.default;
+  const data = event.data;
+
+  // Flux TurnInfo fields
+  const fluxEvent = data.event as string | undefined;
+  const transcript = data.transcript as string | undefined;
+  const endOfTurnConfidence = data.end_of_turn_confidence as number | undefined;
+  const turnIndex = data.turn_index as number | undefined;
+
+  const isFinal = fluxEvent === "EndOfTurn";
+  const fluxEventColor = fluxEvent
+    ? FLUX_EVENT_COLORS[fluxEvent] || FLUX_EVENT_COLORS.default
+    : "";
+
+  // For non-TurnInfo events
+  const isConnection = event.event_type === "Connected";
+
+  return (
+    <div className="flex-1 min-w-0 space-y-1">
+      <div className="flex items-center gap-2 flex-wrap">
+        <span className={`text-xs px-2 py-0.5 rounded ${colorClass}`}>
+          {event.event_type}
+        </span>
+
+        {/* Flux sub-event type */}
+        {fluxEvent && (
+          <span className={`text-xs px-2 py-0.5 rounded ${fluxEventColor}`}>
+            {fluxEvent}
+          </span>
+        )}
+
+        {/* Final/Partial indicator */}
+        {fluxEvent && (
+          <span
+            className={`text-xs px-2 py-0.5 rounded ${
+              isFinal
+                ? "text-emerald-400 bg-emerald-500/10"
+                : "text-amber-400 bg-amber-500/10"
+            }`}
+          >
+            {isFinal ? "Final" : "Partial"}
+          </span>
+        )}
+
+        {/* Turn index */}
+        {turnIndex !== undefined && (
+          <span className="text-xs text-zinc-500">
+            Turn {turnIndex}
+          </span>
+        )}
+
+        {/* EOT confidence */}
+        {endOfTurnConfidence !== undefined && (
+          <span className="text-xs text-zinc-500 font-mono">
+            EOT: {(endOfTurnConfidence * 100).toFixed(1)}%
+          </span>
+        )}
+      </div>
+
+      {/* Transcript or status message */}
+      <div className="text-sm text-zinc-300 truncate">
+        {transcript || (isConnection ? "[Connected]" : `[${fluxEvent || event.event_type}]`)}
+      </div>
+
+      {/* Expand/collapse button */}
+      <button
+        onClick={(e) => {
+          e.stopPropagation();
+          onToggleExpand();
+        }}
+        className="text-xs text-zinc-500 hover:text-zinc-300"
+      >
+        {isExpanded ? "Hide details" : "Show details"}
+      </button>
+
+      {/* Expanded JSON view */}
+      {isExpanded && (
+        <pre className="mt-2 p-2 bg-zinc-900 rounded text-xs text-zinc-400 overflow-x-auto max-h-64">
+          {JSON.stringify(event.data, null, 2)}
+        </pre>
+      )}
+    </div>
+  );
+}

evals/visualizer/src/components/events/SpeechmaticsEventItem.tsx

@@ -0,0 +1,101 @@
+"use client";
+
+import { CapturedEvent } from "@/types";
+
+interface SpeechmaticsEventItemProps {
+  event: CapturedEvent;
+  isExpanded: boolean;
+  onToggleExpand: () => void;
+}
+
+const EVENT_COLORS: Record<string, string> = {
+  AddTranscript: "text-purple-400 bg-purple-500/10",
+  RecognitionStarted: "text-yellow-400 bg-yellow-500/10",
+  EndOfTranscript: "text-red-400 bg-red-500/10",
+  Warning: "text-orange-400 bg-orange-500/10",
+  Error: "text-red-500 bg-red-600/10",
+  default: "text-zinc-400 bg-zinc-500/10",
+};
+
+function getTranscript(event: CapturedEvent): string {
+  const data = event.data;
+  const results = data.results as Array<{
+    type?: string;
+    alternatives?: Array<{ content?: string }>;
+  }> | undefined;
+
+  if (results) {
+    const words = results
+      .filter((r) => r.type === "word" && r.alternatives?.[0]?.content)
+      .map((r) => r.alternatives![0].content)
+      .join(" ");
+    return words;
+  }
+  return "";
+}
+
+export default function SpeechmaticsEventItem({
+  event,
+  isExpanded,
+  onToggleExpand,
+}: SpeechmaticsEventItemProps) {
+  const colorClass = EVENT_COLORS[event.event_type] || EVENT_COLORS.default;
+  const data = event.data;
+
+  const transcript = getTranscript(event);
+
+  // Status events
+  const isRecognitionStarted = event.event_type === "RecognitionStarted";
+  const isEndOfTranscript = event.event_type === "EndOfTranscript";
+  const isWarning = event.event_type === "Warning";
+
+  // Warning reason
+  const warningReason = isWarning ? (data.reason as string | undefined) : undefined;
+
+  return (
+    <div className="flex-1 min-w-0 space-y-1">
+      <div className="flex items-center gap-2 flex-wrap">
+        <span className={`text-xs px-2 py-0.5 rounded ${colorClass}`}>
+          {event.event_type}
+        </span>
+
+        {/* AddTranscript is always final in Speechmatics */}
+        {event.event_type === "AddTranscript" && (
+          <span className="text-xs px-2 py-0.5 rounded text-emerald-400 bg-emerald-500/10">
+            Final
+          </span>
+        )}
+      </div>
+
+      {/* Transcript or status message */}
+      <div className="text-sm text-zinc-300 truncate">
+        {transcript ||
+          (isRecognitionStarted
+            ? "[Recognition Started]"
+            : isEndOfTranscript
+              ? "[End of Transcript]"
+              : isWarning
+                ? `[Warning: ${warningReason || "unknown"}]`
+                : `[${event.event_type}]`)}
+      </div>
+
+      {/* Expand/collapse button */}
+      <button
+        onClick={(e) => {
+          e.stopPropagation();
+          onToggleExpand();
+        }}
+        className="text-xs text-zinc-500 hover:text-zinc-300"
+      >
+        {isExpanded ? "Hide details" : "Show details"}
+      </button>
+
+      {/* Expanded JSON view */}
+      {isExpanded && (
+        <pre className="mt-2 p-2 bg-zinc-900 rounded text-xs text-zinc-400 overflow-x-auto max-h-64">
+          {JSON.stringify(event.data, null, 2)}
+        </pre>
+      )}
+    </div>
+  );
+}

evals/visualizer/src/components/events/index.ts

@@ -0,0 +1,3 @@
+export { default as DeepgramEventItem } from "./DeepgramEventItem";
+export { default as FluxEventItem } from "./FluxEventItem";
+export { default as SpeechmaticsEventItem } from "./SpeechmaticsEventItem";

evals/visualizer/src/types/index.ts

@@ -0,0 +1,24 @@
+export interface CapturedEvent {
+  timestamp: number;
+  event_type: string;
+  data: Record<string, unknown>;
+}
+
+export interface EventCaptureResult {
+  audio_file: string;
+  audio_path: string;
+  provider: string;
+  duration: number;
+  created_at: string;
+  events: CapturedEvent[];
+  transcript: string;
+}
+
+export interface ResultSummary {
+  id: string;
+  audio_file: string;
+  provider: string;
+  duration: number;
+  created_at: string;
+  event_count: number;
+}