@absolutejs/voice 0.0.22-beta.504 → 0.0.22-beta.506

package/dist/react/index.js

@@ -12738,6 +12738,383 @@ var VoiceWidget = ({
     ]
   }, undefined, true, undefined, this);
 };
+// src/react/VoiceCallPlayer.tsx
+import { useEffect as useEffect26, useMemo as useMemo2, useRef as useRef27, useState } from "react";
+
+// src/client/callPlayer.ts
+var cloneState = (state) => ({
+  ...state
+});
+var normalizeTranscriptTimes = (transcripts, baseEpoch) => {
+  if (typeof baseEpoch !== "number") {
+    return transcripts;
+  }
+  return transcripts.map((transcript) => {
+    const adjusted = { ...transcript };
+    if (typeof adjusted.startedAtMs === "number" && adjusted.startedAtMs >= baseEpoch) {
+      adjusted.startedAtMs = adjusted.startedAtMs - baseEpoch;
+    }
+    if (typeof adjusted.endedAtMs === "number" && adjusted.endedAtMs >= baseEpoch) {
+      adjusted.endedAtMs = adjusted.endedAtMs - baseEpoch;
+    }
+    return adjusted;
+  });
+};
+var findActiveTranscript = (transcripts, positionMs) => {
+  let candidate;
+  for (let index = 0;index < transcripts.length; index += 1) {
+    const transcript = transcripts[index];
+    if (typeof transcript.startedAtMs !== "number")
+      continue;
+    if (transcript.startedAtMs > positionMs)
+      break;
+    if (typeof transcript.endedAtMs === "number" && transcript.endedAtMs < positionMs) {
+      continue;
+    }
+    candidate = { id: transcript.id, index };
+  }
+  return candidate ?? {};
+};
+var createVoiceCallPlayer = (options = {}) => {
+  let transcripts = normalizeTranscriptTimes(options.transcripts ?? [], options.recordingStartedAtEpochMs);
+  let state = {
+    audioUrl: options.audioUrl,
+    buffered: 0,
+    currentTimeMs: 0,
+    durationMs: 0,
+    isPlaying: false,
+    isReady: false,
+    playbackRate: options.initialPlaybackRate ?? 1
+  };
+  const listeners = new Set;
+  const notify = () => {
+    for (const listener of listeners)
+      listener();
+  };
+  const update = (next) => {
+    state = { ...state, ...next };
+    notify();
+  };
+  const refreshActive = () => {
+    const { id, index } = findActiveTranscript(transcripts, state.currentTimeMs);
+    if (id !== state.activeTranscriptId || index !== state.activeTranscriptIndex) {
+      state = {
+        ...state,
+        activeTranscriptId: id,
+        activeTranscriptIndex: index
+      };
+      notify();
+    }
+  };
+  return {
+    getState: () => cloneState(state),
+    pause: () => {
+      if (!state.isPlaying)
+        return;
+      update({ isPlaying: false });
+    },
+    play: async () => {
+      update({ isPlaying: true });
+    },
+    reset: () => {
+      state = {
+        audioUrl: state.audioUrl,
+        buffered: 0,
+        currentTimeMs: 0,
+        durationMs: 0,
+        isPlaying: false,
+        isReady: false,
+        playbackRate: 1
+      };
+      notify();
+    },
+    seekMs: (positionMs) => {
+      const clamped = Math.max(0, Math.min(state.durationMs || Number.POSITIVE_INFINITY, positionMs));
+      update({ currentTimeMs: clamped });
+      refreshActive();
+    },
+    seekToTranscript: (transcriptId) => {
+      const found = transcripts.find((t) => t.id === transcriptId);
+      if (!found || typeof found.startedAtMs !== "number") {
+        return;
+      }
+      update({ currentTimeMs: Math.max(0, found.startedAtMs) });
+      refreshActive();
+    },
+    setAudioUrl: (url) => {
+      update({ audioUrl: url, isReady: false });
+    },
+    setBuffered: (seconds) => {
+      update({ buffered: Math.max(0, seconds) });
+    },
+    setDuration: (durationMs) => {
+      update({ durationMs: Math.max(0, durationMs) });
+    },
+    setError: (error) => {
+      update({ error });
+    },
+    setPlaybackRate: (rate) => {
+      update({ playbackRate: Math.max(0.25, Math.min(4, rate)) });
+    },
+    setPlaying: (playing) => {
+      if (playing === state.isPlaying)
+        return;
+      update({ isPlaying: playing });
+    },
+    setReady: (ready) => {
+      update({ isReady: ready });
+    },
+    setTime: (positionMs) => {
+      const next = Math.max(0, positionMs);
+      if (next === state.currentTimeMs)
+        return;
+      update({ currentTimeMs: next });
+      refreshActive();
+    },
+    setTranscripts: (next) => {
+      transcripts = normalizeTranscriptTimes(next, options.recordingStartedAtEpochMs);
+      refreshActive();
+    },
+    subscribe: (listener) => {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    },
+    transcripts: () => transcripts
+  };
+};
+var formatVoiceCallPlayerTimestamp = (ms) => {
+  const seconds = Math.max(0, Math.floor(ms / 1000));
+  const minutes = Math.floor(seconds / 60);
+  const remaining = seconds % 60;
+  return `${String(minutes).padStart(2, "0")}:${String(remaining).padStart(2, "0")}`;
+};
+
+// src/react/VoiceCallPlayer.tsx
+import { jsxDEV as jsxDEV23 } from "react/jsx-dev-runtime";
+var VoiceCallPlayer = ({
+  audioUrl,
+  className,
+  onError,
+  player: playerProp,
+  recordingStartedAtEpochMs,
+  title = "Call replay",
+  transcripts
+}) => {
+  const player = useMemo2(() => playerProp ?? createVoiceCallPlayer({
+    audioUrl,
+    recordingStartedAtEpochMs,
+    transcripts
+  }), [playerProp, audioUrl, recordingStartedAtEpochMs, transcripts]);
+  const [state, setState] = useState(() => player.getState());
+  const audioRef = useRef27(null);
+  const errorRef = useRef27(undefined);
+  useEffect26(() => {
+    const unsubscribe = player.subscribe(() => {
+      setState(player.getState());
+    });
+    return () => {
+      unsubscribe();
+    };
+  }, [player]);
+  useEffect26(() => {
+    player.setAudioUrl(audioUrl);
+  }, [audioUrl, player]);
+  useEffect26(() => {
+    if (transcripts) {
+      player.setTranscripts(transcripts);
+    }
+  }, [transcripts, player]);
+  useEffect26(() => {
+    if (state.error && state.error !== errorRef.current) {
+      errorRef.current = state.error;
+      onError?.(state.error);
+    }
+  }, [state.error, onError]);
+  useEffect26(() => {
+    const el = audioRef.current;
+    if (!el)
+      return;
+    if (state.isPlaying && el.paused) {
+      el.play().catch((err) => {
+        player.setError(err instanceof Error ? err.message : String(err));
+        player.setPlaying(false);
+      });
+    } else if (!state.isPlaying && !el.paused) {
+      el.pause();
+    }
+    if (Math.abs(el.currentTime * 1000 - state.currentTimeMs) > 250) {
+      el.currentTime = state.currentTimeMs / 1000;
+    }
+    el.playbackRate = state.playbackRate;
+  }, [state.isPlaying, state.currentTimeMs, state.playbackRate, player]);
+  const onTimeUpdate = () => {
+    const el = audioRef.current;
+    if (!el)
+      return;
+    player.setTime(el.currentTime * 1000);
+  };
+  const onLoadedMetadata = () => {
+    const el = audioRef.current;
+    if (!el)
+      return;
+    player.setDuration(el.duration * 1000);
+    player.setReady(true);
+  };
+  const handleSeek = (ratio) => {
+    player.seekMs(state.durationMs * ratio);
+  };
+  return /* @__PURE__ */ jsxDEV23("section", {
+    "aria-label": "voice-call-player",
+    className: className ?? "absolute-voice-call-player",
+    style: {
+      background: "#0f172a",
+      borderRadius: 16,
+      color: "#f8fafc",
+      fontFamily: 'ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+      padding: 20
+    },
+    children: [
+      /* @__PURE__ */ jsxDEV23("header", {
+        style: {
+          alignItems: "center",
+          display: "flex",
+          gap: 12,
+          marginBottom: 12
+        },
+        children: [
+          /* @__PURE__ */ jsxDEV23("strong", {
+            style: { fontSize: 16 },
+            children: title
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV23("span", {
+            style: { fontSize: 13, marginLeft: "auto", opacity: 0.7 },
+            children: [
+              formatVoiceCallPlayerTimestamp(state.currentTimeMs),
+              " /",
+              " ",
+              formatVoiceCallPlayerTimestamp(state.durationMs)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV23("audio", {
+        onEnded: () => player.setPlaying(false),
+        onError: () => player.setError("Audio playback error"),
+        onLoadedMetadata,
+        onPause: () => player.setPlaying(false),
+        onPlay: () => player.setPlaying(true),
+        onTimeUpdate,
+        preload: "metadata",
+        ref: audioRef,
+        src: state.audioUrl,
+        style: { display: "none" }
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV23("div", {
+        style: {
+          alignItems: "center",
+          display: "flex",
+          gap: 12,
+          marginBottom: 14
+        },
+        children: [
+          /* @__PURE__ */ jsxDEV23("button", {
+            "aria-label": state.isPlaying ? "Pause" : "Play",
+            onClick: () => {
+              if (state.isPlaying) {
+                player.pause();
+              } else {
+                player.play();
+              }
+            },
+            style: {
+              background: "#3b82f6",
+              border: "none",
+              borderRadius: 12,
+              color: "#f8fafc",
+              cursor: "pointer",
+              fontSize: 14,
+              fontWeight: 500,
+              padding: "8px 14px"
+            },
+            type: "button",
+            children: state.isPlaying ? "Pause" : "Play"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV23("input", {
+            "aria-label": "seek",
+            max: 1,
+            min: 0,
+            onChange: (event) => handleSeek(Number(event.target.value)),
+            step: 0.001,
+            style: { flex: 1 },
+            type: "range",
+            value: state.durationMs > 0 ? state.currentTimeMs / state.durationMs : 0
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV23("select", {
+            "aria-label": "playback rate",
+            onChange: (event) => player.setPlaybackRate(Number(event.target.value)),
+            style: {
+              background: "rgba(255,255,255,0.08)",
+              border: "1px solid rgba(255,255,255,0.18)",
+              borderRadius: 8,
+              color: "#f8fafc",
+              fontSize: 13,
+              padding: "4px 8px"
+            },
+            value: state.playbackRate,
+            children: [0.5, 0.75, 1, 1.25, 1.5, 2].map((rate) => /* @__PURE__ */ jsxDEV23("option", {
+              value: rate,
+              children: [
+                rate,
+                "\xD7"
+              ]
+            }, rate, true, undefined, this))
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV23("ol", {
+        style: {
+          display: "flex",
+          flexDirection: "column",
+          gap: 6,
+          listStyle: "none",
+          margin: 0,
+          maxHeight: 280,
+          overflowY: "auto",
+          padding: 0
+        },
+        children: player.transcripts().map((transcript) => {
+          const active = transcript.id === state.activeTranscriptId;
+          const startedAt = transcript.startedAtMs ?? 0;
+          return /* @__PURE__ */ jsxDEV23("li", {
+            style: {
+              background: active ? "rgba(59,130,246,0.18)" : "transparent",
+              borderRadius: 8,
+              cursor: "pointer",
+              fontSize: 13,
+              padding: "8px 12px"
+            },
+            onClick: () => player.seekToTranscript(transcript.id),
+            children: [
+              /* @__PURE__ */ jsxDEV23("div", {
+                style: { color: "#cbd5e1", fontSize: 12 },
+                children: formatVoiceCallPlayerTimestamp(startedAt)
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV23("div", {
+                children: transcript.text
+              }, undefined, false, undefined, this)
+            ]
+          }, transcript.id, true, undefined, this);
+        })
+      }, undefined, false, undefined, this),
+      state.error ? /* @__PURE__ */ jsxDEV23("p", {
+        style: { color: "#ef4444", fontSize: 12, marginTop: 12 },
+        children: state.error
+      }, undefined, false, undefined, this) : null
+    ]
+  }, undefined, true, undefined, this);
+};
 // src/client/costDashboard.ts
 var padTwo = (value) => String(value).padStart(2, "0");
 var formatBucketKey = (epochMs, bucketBy) => {
@@ -12819,7 +13196,7 @@ var buildVoiceCostDashboardReport = (options) => {
 };
 
 // src/react/VoiceCostDashboard.tsx
-import { jsxDEV as jsxDEV23 } from "react/jsx-dev-runtime";
+import { jsxDEV as jsxDEV24 } from "react/jsx-dev-runtime";
 var formatUsd = (value, currency = "USD") => new Intl.NumberFormat("en-US", {
   currency,
   maximumFractionDigits: 4,
@@ -12827,38 +13204,38 @@ var formatUsd = (value, currency = "USD") => new Intl.NumberFormat("en-US", {
   style: "currency"
 }).format(value);
 var formatInteger = (value) => new Intl.NumberFormat("en-US").format(value);
-var renderRow = (bucket, currency, isTotal) => /* @__PURE__ */ jsxDEV23("tr", {
+var renderRow = (bucket, currency, isTotal) => /* @__PURE__ */ jsxDEV24("tr", {
   "data-bucket-key": bucket.bucketKey,
   style: {
     borderTop: isTotal ? "2px solid rgba(255,255,255,0.15)" : undefined,
     fontWeight: isTotal ? 600 : undefined
   },
   children: [
-    /* @__PURE__ */ jsxDEV23("td", {
+    /* @__PURE__ */ jsxDEV24("td", {
       style: { padding: "8px 12px" },
       children: bucket.bucketKey
     }, undefined, false, undefined, this),
-    /* @__PURE__ */ jsxDEV23("td", {
+    /* @__PURE__ */ jsxDEV24("td", {
       style: { padding: "8px 12px", textAlign: "right" },
       children: formatInteger(bucket.callCount)
     }, undefined, false, undefined, this),
-    /* @__PURE__ */ jsxDEV23("td", {
+    /* @__PURE__ */ jsxDEV24("td", {
       style: { padding: "8px 12px", textAlign: "right" },
       children: formatUsd(bucket.llmUsd, currency)
     }, undefined, false, undefined, this),
-    /* @__PURE__ */ jsxDEV23("td", {
+    /* @__PURE__ */ jsxDEV24("td", {
       style: { padding: "8px 12px", textAlign: "right" },
       children: formatUsd(bucket.ttsUsd, currency)
     }, undefined, false, undefined, this),
-    /* @__PURE__ */ jsxDEV23("td", {
+    /* @__PURE__ */ jsxDEV24("td", {
       style: { padding: "8px 12px", textAlign: "right" },
       children: formatUsd(bucket.sttUsd, currency)
     }, undefined, false, undefined, this),
-    /* @__PURE__ */ jsxDEV23("td", {
+    /* @__PURE__ */ jsxDEV24("td", {
       style: { padding: "8px 12px", textAlign: "right" },
       children: formatUsd(bucket.telephonyUsd, currency)
     }, undefined, false, undefined, this),
-    /* @__PURE__ */ jsxDEV23("td", {
+    /* @__PURE__ */ jsxDEV24("td", {
       style: { padding: "8px 12px", textAlign: "right" },
       children: formatUsd(bucket.totalUsd, currency)
     }, undefined, false, undefined, this)
@@ -12872,7 +13249,7 @@ var VoiceCostDashboard = ({
   ...options
 }) => {
   const report = buildVoiceCostDashboardReport(options);
-  return /* @__PURE__ */ jsxDEV23("section", {
+  return /* @__PURE__ */ jsxDEV24("section", {
     "aria-label": "voice-cost-dashboard",
     className: className ?? "absolute-voice-cost-dashboard",
     style: {
@@ -12883,7 +13260,7 @@ var VoiceCostDashboard = ({
       padding: 20
     },
     children: [
-      /* @__PURE__ */ jsxDEV23("header", {
+      /* @__PURE__ */ jsxDEV24("header", {
         style: {
           alignItems: "baseline",
           display: "flex",
@@ -12891,11 +13268,11 @@ var VoiceCostDashboard = ({
           marginBottom: 12
         },
         children: [
-          /* @__PURE__ */ jsxDEV23("strong", {
+          /* @__PURE__ */ jsxDEV24("strong", {
             style: { fontSize: 16 },
             children: title
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV23("span", {
+          /* @__PURE__ */ jsxDEV24("span", {
             style: { fontSize: 13, opacity: 0.7 },
             children: [
               report.buckets.length,
@@ -12906,52 +13283,52 @@ var VoiceCostDashboard = ({
           }, undefined, true, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      report.buckets.length === 0 ? /* @__PURE__ */ jsxDEV23("p", {
+      report.buckets.length === 0 ? /* @__PURE__ */ jsxDEV24("p", {
         style: { fontSize: 13, opacity: 0.7 },
         children: emptyMessage
-      }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV23("table", {
+      }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV24("table", {
         style: {
           borderCollapse: "collapse",
           fontSize: 13,
           width: "100%"
         },
         children: [
-          /* @__PURE__ */ jsxDEV23("thead", {
-            children: /* @__PURE__ */ jsxDEV23("tr", {
+          /* @__PURE__ */ jsxDEV24("thead", {
+            children: /* @__PURE__ */ jsxDEV24("tr", {
               style: { opacity: 0.7, textAlign: "left" },
               children: [
-                /* @__PURE__ */ jsxDEV23("th", {
+                /* @__PURE__ */ jsxDEV24("th", {
                   style: { padding: "8px 12px" },
                   children: "Bucket"
                 }, undefined, false, undefined, this),
-                /* @__PURE__ */ jsxDEV23("th", {
+                /* @__PURE__ */ jsxDEV24("th", {
                   style: { padding: "8px 12px", textAlign: "right" },
                   children: "Calls"
                 }, undefined, false, undefined, this),
-                /* @__PURE__ */ jsxDEV23("th", {
+                /* @__PURE__ */ jsxDEV24("th", {
                   style: { padding: "8px 12px", textAlign: "right" },
                   children: "LLM"
                 }, undefined, false, undefined, this),
-                /* @__PURE__ */ jsxDEV23("th", {
+                /* @__PURE__ */ jsxDEV24("th", {
                   style: { padding: "8px 12px", textAlign: "right" },
                   children: "TTS"
                 }, undefined, false, undefined, this),
-                /* @__PURE__ */ jsxDEV23("th", {
+                /* @__PURE__ */ jsxDEV24("th", {
                   style: { padding: "8px 12px", textAlign: "right" },
                   children: "STT"
                 }, undefined, false, undefined, this),
-                /* @__PURE__ */ jsxDEV23("th", {
+                /* @__PURE__ */ jsxDEV24("th", {
                   style: { padding: "8px 12px", textAlign: "right" },
                   children: "Tel."
                 }, undefined, false, undefined, this),
-                /* @__PURE__ */ jsxDEV23("th", {
+                /* @__PURE__ */ jsxDEV24("th", {
                   style: { padding: "8px 12px", textAlign: "right" },
                   children: "Total"
                 }, undefined, false, undefined, this)
               ]
             }, undefined, true, undefined, this)
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV23("tbody", {
+          /* @__PURE__ */ jsxDEV24("tbody", {
             children: [
               report.buckets.map((bucket) => renderRow(bucket, currency, false)),
               renderRow(report.grandTotal, currency, true)
@@ -12963,7 +13340,7 @@ var VoiceCostDashboard = ({
   }, undefined, true, undefined, this);
 };
 // src/react/VoiceLiveCallViewer.tsx
-import { useEffect as useEffect26, useMemo as useMemo2, useState } from "react";
+import { useEffect as useEffect27, useMemo as useMemo3, useState as useState2 } from "react";
 
 // src/client/liveCallViewer.ts
 var EVENT_BUFFER_LIMIT = 200;
@@ -13074,7 +13451,7 @@ var createLiveCallViewer = (options) => {
 };
 
 // src/react/VoiceLiveCallViewer.tsx
-import { jsxDEV as jsxDEV24 } from "react/jsx-dev-runtime";
+import { jsxDEV as jsxDEV25 } from "react/jsx-dev-runtime";
 var CATEGORY_COLOR = {
   agent_audio: "#3b82f6",
   agent_text: "#3b82f6",
@@ -13094,9 +13471,9 @@ var VoiceLiveCallViewer = ({
   title,
   viewer: viewerProp
 }) => {
-  const viewer = useMemo2(() => viewerProp ?? createLiveCallViewer({ sessionId: sessionId ?? "live" }), [viewerProp, sessionId]);
-  const [state, setState] = useState(() => viewer.getState());
-  useEffect26(() => {
+  const viewer = useMemo3(() => viewerProp ?? createLiveCallViewer({ sessionId: sessionId ?? "live" }), [viewerProp, sessionId]);
+  const [state, setState] = useState2(() => viewer.getState());
+  useEffect27(() => {
     const unsubscribe = viewer.subscribe(() => {
       setState(viewer.getState());
     });
@@ -13104,7 +13481,7 @@ var VoiceLiveCallViewer = ({
       unsubscribe();
     };
   }, [viewer]);
-  return /* @__PURE__ */ jsxDEV24("section", {
+  return /* @__PURE__ */ jsxDEV25("section", {
     "aria-label": "voice-live-call-viewer",
     className: className ?? "absolute-voice-live-call-viewer",
     "data-agent-state": state.agentState,
@@ -13116,7 +13493,7 @@ var VoiceLiveCallViewer = ({
       padding: 20
     },
     children: [
-      /* @__PURE__ */ jsxDEV24("header", {
+      /* @__PURE__ */ jsxDEV25("header", {
         style: {
           alignItems: "center",
           display: "flex",
@@ -13124,11 +13501,11 @@ var VoiceLiveCallViewer = ({
           marginBottom: 12
         },
         children: [
-          /* @__PURE__ */ jsxDEV24("strong", {
+          /* @__PURE__ */ jsxDEV25("strong", {
             style: { fontSize: 16 },
             children: title ?? "Live call"
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV24("span", {
+          /* @__PURE__ */ jsxDEV25("span", {
             style: {
               background: "rgba(59,130,246,0.18)",
               borderRadius: 999,
@@ -13138,7 +13515,7 @@ var VoiceLiveCallViewer = ({
             },
             children: state.agentState
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV24("span", {
+          /* @__PURE__ */ jsxDEV25("span", {
             style: { fontSize: 13, marginLeft: "auto", opacity: 0.7 },
             children: [
               state.sessionId,
@@ -13148,7 +13525,7 @@ var VoiceLiveCallViewer = ({
           }, undefined, true, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      state.partialTranscript ? /* @__PURE__ */ jsxDEV24("p", {
+      state.partialTranscript ? /* @__PURE__ */ jsxDEV25("p", {
         style: {
           background: "rgba(16,185,129,0.12)",
           borderRadius: 12,
@@ -13163,7 +13540,7 @@ var VoiceLiveCallViewer = ({
           "\u201D"
         ]
       }, undefined, true, undefined, this) : null,
-      /* @__PURE__ */ jsxDEV24("ol", {
+      /* @__PURE__ */ jsxDEV25("ol", {
         style: {
           display: "flex",
           flexDirection: "column",
@@ -13174,7 +13551,7 @@ var VoiceLiveCallViewer = ({
           overflowY: "auto",
           padding: 0
         },
-        children: state.events.map((event, index) => /* @__PURE__ */ jsxDEV24("li", {
+        children: state.events.map((event, index) => /* @__PURE__ */ jsxDEV25("li", {
           style: {
             alignItems: "center",
             borderLeft: `3px solid ${CATEGORY_COLOR[event.kind] ?? "#94a3b8"}`,
@@ -13184,7 +13561,7 @@ var VoiceLiveCallViewer = ({
             paddingLeft: 12
           },
           children: [
-            /* @__PURE__ */ jsxDEV24("span", {
+            /* @__PURE__ */ jsxDEV25("span", {
               style: {
                 color: "#cbd5e1",
                 fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
@@ -13193,11 +13570,11 @@ var VoiceLiveCallViewer = ({
               },
               children: formatRelative(event.at - (state.events[0]?.at ?? event.at))
             }, undefined, false, undefined, this),
-            /* @__PURE__ */ jsxDEV24("strong", {
+            /* @__PURE__ */ jsxDEV25("strong", {
               style: { fontSize: 13 },
               children: event.title
             }, undefined, false, undefined, this),
-            event.detail ? /* @__PURE__ */ jsxDEV24("span", {
+            event.detail ? /* @__PURE__ */ jsxDEV25("span", {
               style: { opacity: 0.85 },
               children: event.detail
             }, undefined, false, undefined, this) : null
@@ -13259,7 +13636,7 @@ var buildReplayTimelineReport = (input) => {
 };
 
 // src/react/VoiceReplayTimeline.tsx
-import { jsxDEV as jsxDEV25 } from "react/jsx-dev-runtime";
+import { jsxDEV as jsxDEV26 } from "react/jsx-dev-runtime";
 var CATEGORY_COLOR2 = {
   agent: "#3b82f6",
   lifecycle: "#94a3b8",
@@ -13278,7 +13655,7 @@ var VoiceReplayTimeline = ({
   title
 }) => {
   const report = buildReplayTimelineReport({ artifact });
-  return /* @__PURE__ */ jsxDEV25("section", {
+  return /* @__PURE__ */ jsxDEV26("section", {
     "aria-label": "voice-replay-timeline",
     className: className ?? "absolute-voice-replay-timeline",
     style: {
@@ -13289,7 +13666,7 @@ var VoiceReplayTimeline = ({
       padding: 20
     },
     children: [
-      /* @__PURE__ */ jsxDEV25("header", {
+      /* @__PURE__ */ jsxDEV26("header", {
         style: {
           alignItems: "baseline",
           display: "flex",
@@ -13297,11 +13674,11 @@ var VoiceReplayTimeline = ({
           marginBottom: 12
         },
         children: [
-          /* @__PURE__ */ jsxDEV25("strong", {
+          /* @__PURE__ */ jsxDEV26("strong", {
             style: { fontSize: 16 },
             children: title ?? report.metadata.title ?? "Replay"
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV25("span", {
+          /* @__PURE__ */ jsxDEV26("span", {
             style: { fontSize: 13, opacity: 0.7 },
             children: [
               report.events.length,
@@ -13317,10 +13694,10 @@ var VoiceReplayTimeline = ({
           }, undefined, true, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      report.events.length === 0 ? /* @__PURE__ */ jsxDEV25("p", {
+      report.events.length === 0 ? /* @__PURE__ */ jsxDEV26("p", {
         style: { fontSize: 13, opacity: 0.7 },
         children: "No timeline events."
-      }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV25("ol", {
+      }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV26("ol", {
         style: {
           display: "flex",
           flexDirection: "column",
@@ -13329,7 +13706,7 @@ var VoiceReplayTimeline = ({
           margin: 0,
           padding: 0
         },
-        children: report.events.map((event, index) => /* @__PURE__ */ jsxDEV25("li", {
+        children: report.events.map((event, index) => /* @__PURE__ */ jsxDEV26("li", {
           style: {
             alignItems: "center",
             borderLeft: `3px solid ${CATEGORY_COLOR2[event.category]}`,
@@ -13339,7 +13716,7 @@ var VoiceReplayTimeline = ({
             paddingLeft: 12
           },
           children: [
-            /* @__PURE__ */ jsxDEV25("span", {
+            /* @__PURE__ */ jsxDEV26("span", {
               style: {
                 color: "#cbd5e1",
                 fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
@@ -13348,11 +13725,11 @@ var VoiceReplayTimeline = ({
               },
               children: formatRelative2(event.at - report.startedAt)
             }, undefined, false, undefined, this),
-            /* @__PURE__ */ jsxDEV25("strong", {
+            /* @__PURE__ */ jsxDEV26("strong", {
               style: { fontSize: 13 },
               children: event.label
             }, undefined, false, undefined, this),
-            event.detail ? /* @__PURE__ */ jsxDEV25("span", {
+            event.detail ? /* @__PURE__ */ jsxDEV26("span", {
               style: { opacity: 0.85 },
               children: event.detail
             }, undefined, false, undefined, this) : null
@@ -13363,7 +13740,7 @@ var VoiceReplayTimeline = ({
   }, undefined, true, undefined, this);
 };
 // src/react/useVoiceWorkflowStatus.tsx
-import { useEffect as useEffect27, useRef as useRef27, useSyncExternalStore as useSyncExternalStore26 } from "react";
+import { useEffect as useEffect28, useRef as useRef28, useSyncExternalStore as useSyncExternalStore26 } from "react";
 
 // src/client/workflowStatus.ts
 var fetchVoiceWorkflowStatus = async (path = "/evals/scenarios/json", options = {}) => {
@@ -13446,12 +13823,12 @@ var createVoiceWorkflowStatusStore = (path = "/evals/scenarios/json", options =
 
 // src/react/useVoiceWorkflowStatus.tsx
 var useVoiceWorkflowStatus = (path = "/evals/scenarios/json", options = {}) => {
-  const storeRef = useRef27(null);
+  const storeRef = useRef28(null);
   if (!storeRef.current) {
     storeRef.current = createVoiceWorkflowStatusStore(path, options);
   }
   const store = storeRef.current;
-  useEffect27(() => {
+  useEffect28(() => {
     store.refresh().catch(() => {});
     return () => store.close();
   }, [store]);
@@ -13510,6 +13887,7 @@ export {
   VoiceLiveCallViewer,
   VoiceDeliveryRuntime,
   VoiceCostDashboard,
+  VoiceCallPlayer,
   VoiceCallDebuggerLaunch,
   VoiceAgentSquadStatus
 };