+
+
+ {event.event_type}
+
+
+ {/* Flux sub-event type */}
+ {fluxEvent && (
+
+ {fluxEvent}
+
+ )}
+
+ {/* Final/Partial indicator */}
+ {fluxEvent && (
+
+ {isFinal ? "Final" : "Partial"}
+
+ )}
+
+ {/* Turn index */}
+ {turnIndex !== undefined && (
+
+ Turn {turnIndex}
+
+ )}
+
+ {/* EOT confidence */}
+ {endOfTurnConfidence !== undefined && (
+
+ EOT: {(endOfTurnConfidence * 100).toFixed(1)}%
+
+ )}
+
+
+ {/* Transcript or status message */}
+
+ {transcript || (isConnection ? "[Connected]" : `[${fluxEvent || event.event_type}]`)}
+
+
+ {/* Expand/collapse button */}
+
+
+ {/* Expanded JSON view */}
+ {isExpanded && (
+
+ {JSON.stringify(event.data, null, 2)}
+
+ )}
+
+ );
+}
diff --git a/evals/visualizer/src/components/events/SpeechmaticsEventItem.tsx b/evals/visualizer/src/components/events/SpeechmaticsEventItem.tsx
new file mode 100644
index 0000000..e6411d3
--- /dev/null
+++ b/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