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

package/dist/vue/index.js

@@ -12082,8 +12082,350 @@ var VoiceWidget = defineComponent18({
     };
   }
 });
+// src/vue/VoiceCallPlayer.ts
+import {
+  defineComponent as defineComponent19,
+  h as h19,
+  onMounted as onMounted10,
+  onUnmounted as onUnmounted23,
+  ref as ref18,
+  shallowRef as shallowRef22,
+  watch
+} from "vue";
+
+// 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/vue/VoiceCallPlayer.ts
+var VoiceCallPlayer = defineComponent19({
+  name: "VoiceCallPlayer",
+  props: {
+    audioUrl: String,
+    player: {
+      default: undefined,
+      type: Object
+    },
+    recordingStartedAtEpochMs: Number,
+    title: { default: "Call replay", type: String },
+    transcripts: {
+      default: () => [],
+      type: Array
+    }
+  },
+  setup(props) {
+    const player = props.player ?? createVoiceCallPlayer({
+      audioUrl: props.audioUrl,
+      recordingStartedAtEpochMs: props.recordingStartedAtEpochMs,
+      transcripts: props.transcripts
+    });
+    const state = shallowRef22(player.getState());
+    const audioRef = ref18(null);
+    const unsubscribe = player.subscribe(() => {
+      state.value = player.getState();
+    });
+    onUnmounted23(() => {
+      unsubscribe();
+    });
+    watch(() => props.audioUrl, (next) => {
+      player.setAudioUrl(next);
+    });
+    watch(() => props.transcripts, (next) => {
+      if (next)
+        player.setTranscripts(next);
+    }, { deep: false });
+    const syncAudio = () => {
+      const el = audioRef.value;
+      if (!el)
+        return;
+      if (state.value.isPlaying && el.paused) {
+        el.play().catch((err) => {
+          player.setError(err instanceof Error ? err.message : String(err));
+          player.setPlaying(false);
+        });
+      } else if (!state.value.isPlaying && !el.paused) {
+        el.pause();
+      }
+      if (Math.abs(el.currentTime * 1000 - state.value.currentTimeMs) > 250) {
+        el.currentTime = state.value.currentTimeMs / 1000;
+      }
+      el.playbackRate = state.value.playbackRate;
+    };
+    onMounted10(syncAudio);
+    watch(state, syncAudio, { deep: false });
+    return () => {
+      const s = state.value;
+      return h19("section", {
+        "aria-label": "voice-call-player",
+        class: "absolute-voice-call-player",
+        style: {
+          background: "#0f172a",
+          borderRadius: "16px",
+          color: "#f8fafc",
+          fontFamily: 'ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+          padding: "20px"
+        }
+      }, [
+        h19("header", {
+          style: {
+            alignItems: "center",
+            display: "flex",
+            gap: "12px",
+            marginBottom: "12px"
+          }
+        }, [
+          h19("strong", { style: { fontSize: "16px" } }, props.title),
+          h19("span", {
+            style: {
+              fontSize: "13px",
+              marginLeft: "auto",
+              opacity: "0.7"
+            }
+          }, `${formatVoiceCallPlayerTimestamp(s.currentTimeMs)} / ${formatVoiceCallPlayerTimestamp(s.durationMs)}`)
+        ]),
+        h19("audio", {
+          onEnded: () => player.setPlaying(false),
+          onError: () => player.setError("Audio playback error"),
+          onLoadedmetadata: () => {
+            const el = audioRef.value;
+            if (!el)
+              return;
+            player.setDuration(el.duration * 1000);
+            player.setReady(true);
+          },
+          onPause: () => player.setPlaying(false),
+          onPlay: () => player.setPlaying(true),
+          onTimeupdate: () => {
+            const el = audioRef.value;
+            if (!el)
+              return;
+            player.setTime(el.currentTime * 1000);
+          },
+          preload: "metadata",
+          ref: audioRef,
+          src: s.audioUrl,
+          style: { display: "none" }
+        }),
+        h19("div", {
+          style: {
+            alignItems: "center",
+            display: "flex",
+            gap: "12px",
+            marginBottom: "14px"
+          }
+        }, [
+          h19("button", {
+            "aria-label": s.isPlaying ? "Pause" : "Play",
+            onClick: () => {
+              if (s.isPlaying) {
+                player.pause();
+              } else {
+                player.play();
+              }
+            },
+            style: {
+              background: "#3b82f6",
+              border: "none",
+              borderRadius: "12px",
+              color: "#f8fafc",
+              cursor: "pointer",
+              fontSize: "14px",
+              fontWeight: "500",
+              padding: "8px 14px"
+            },
+            type: "button"
+          }, s.isPlaying ? "Pause" : "Play"),
+          h19("input", {
+            "aria-label": "seek",
+            max: 1,
+            min: 0,
+            onInput: (event) => {
+              const target = event.target;
+              player.seekMs(s.durationMs * Number(target.value));
+            },
+            step: 0.001,
+            style: { flex: "1" },
+            type: "range",
+            value: s.durationMs > 0 ? s.currentTimeMs / s.durationMs : 0
+          })
+        ]),
+        h19("ol", {
+          style: {
+            display: "flex",
+            flexDirection: "column",
+            gap: "6px",
+            listStyle: "none",
+            margin: "0",
+            maxHeight: "280px",
+            overflowY: "auto",
+            padding: "0"
+          }
+        }, player.transcripts().map((transcript) => h19("li", {
+          key: transcript.id,
+          onClick: () => player.seekToTranscript(transcript.id),
+          style: {
+            background: transcript.id === s.activeTranscriptId ? "rgba(59,130,246,0.18)" : "transparent",
+            borderRadius: "8px",
+            cursor: "pointer",
+            fontSize: "13px",
+            padding: "8px 12px"
+          }
+        }, [
+          h19("div", { style: { color: "#cbd5e1", fontSize: "12px" } }, formatVoiceCallPlayerTimestamp(transcript.startedAtMs ?? 0)),
+          h19("div", transcript.text)
+        ])))
+      ]);
+    };
+  }
+});
 // src/vue/VoiceCostDashboard.ts
-import { computed as computed11, defineComponent as defineComponent19, h as h19 } from "vue";
+import { computed as computed11, defineComponent as defineComponent20, h as h20 } from "vue";
 
 // src/client/costDashboard.ts
 var padTwo = (value) => String(value).padStart(2, "0");
@@ -12092,12 +12434,12 @@ var formatBucketKey = (epochMs, bucketBy) => {
   const y = date.getUTCFullYear();
   const m = padTwo(date.getUTCMonth() + 1);
   const d = padTwo(date.getUTCDate());
-  const h19 = padTwo(date.getUTCHours());
+  const h20 = padTwo(date.getUTCHours());
   if (bucketBy === "month")
     return `${y}-${m}`;
   if (bucketBy === "day")
     return `${y}-${m}-${d}`;
-  return `${y}-${m}-${d}T${h19}`;
+  return `${y}-${m}-${d}T${h20}`;
 };
 var isCostBreakdown = (value) => Boolean(value) && typeof value === "object" && typeof value.totalUsd === "number";
 var emptyBucket = (bucketKey) => ({
@@ -12173,22 +12515,22 @@ 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) => h19("tr", {
+var renderRow = (bucket, currency, isTotal) => h20("tr", {
   "data-bucket-key": bucket.bucketKey,
   style: {
     borderTop: isTotal ? "2px solid rgba(255,255,255,0.15)" : undefined,
     fontWeight: isTotal ? 600 : undefined
   }
 }, [
-  h19("td", { style: { padding: "8px 12px" } }, bucket.bucketKey),
-  h19("td", { style: { padding: "8px 12px", textAlign: "right" } }, formatInteger(bucket.callCount)),
-  h19("td", { style: { padding: "8px 12px", textAlign: "right" } }, formatUsd(bucket.llmUsd, currency)),
-  h19("td", { style: { padding: "8px 12px", textAlign: "right" } }, formatUsd(bucket.ttsUsd, currency)),
-  h19("td", { style: { padding: "8px 12px", textAlign: "right" } }, formatUsd(bucket.sttUsd, currency)),
-  h19("td", { style: { padding: "8px 12px", textAlign: "right" } }, formatUsd(bucket.telephonyUsd, currency)),
-  h19("td", { style: { padding: "8px 12px", textAlign: "right" } }, formatUsd(bucket.totalUsd, currency))
+  h20("td", { style: { padding: "8px 12px" } }, bucket.bucketKey),
+  h20("td", { style: { padding: "8px 12px", textAlign: "right" } }, formatInteger(bucket.callCount)),
+  h20("td", { style: { padding: "8px 12px", textAlign: "right" } }, formatUsd(bucket.llmUsd, currency)),
+  h20("td", { style: { padding: "8px 12px", textAlign: "right" } }, formatUsd(bucket.ttsUsd, currency)),
+  h20("td", { style: { padding: "8px 12px", textAlign: "right" } }, formatUsd(bucket.sttUsd, currency)),
+  h20("td", { style: { padding: "8px 12px", textAlign: "right" } }, formatUsd(bucket.telephonyUsd, currency)),
+  h20("td", { style: { padding: "8px 12px", textAlign: "right" } }, formatUsd(bucket.totalUsd, currency))
 ]);
-var VoiceCostDashboard = defineComponent19({
+var VoiceCostDashboard = defineComponent20({
   name: "VoiceCostDashboard",
   props: {
     bucketBy: {
@@ -12216,7 +12558,7 @@ var VoiceCostDashboard = defineComponent19({
       const r = report.value;
       const rows = r.buckets.map((bucket) => renderRow(bucket, props.currency, false));
       rows.push(renderRow(r.grandTotal, props.currency, true));
-      return h19("section", {
+      return h20("section", {
         "aria-label": "voice-cost-dashboard",
         class: "absolute-voice-cost-dashboard",
         style: {
@@ -12227,7 +12569,7 @@ var VoiceCostDashboard = defineComponent19({
           padding: "20px"
         }
       }, [
-        h19("header", {
+        h20("header", {
           style: {
             alignItems: "baseline",
             display: "flex",
@@ -12235,28 +12577,28 @@ var VoiceCostDashboard = defineComponent19({
             marginBottom: "12px"
           }
         }, [
-          h19("strong", { style: { fontSize: "16px" } }, props.title),
-          h19("span", { style: { fontSize: "13px", opacity: "0.7" } }, `${r.buckets.length} buckets \xB7 grand total ${formatUsd(r.grandTotal.totalUsd, props.currency)}`)
+          h20("strong", { style: { fontSize: "16px" } }, props.title),
+          h20("span", { style: { fontSize: "13px", opacity: "0.7" } }, `${r.buckets.length} buckets \xB7 grand total ${formatUsd(r.grandTotal.totalUsd, props.currency)}`)
         ]),
-        r.buckets.length === 0 ? h19("p", { style: { fontSize: "13px", opacity: "0.7" } }, props.emptyMessage) : h19("table", {
+        r.buckets.length === 0 ? h20("p", { style: { fontSize: "13px", opacity: "0.7" } }, props.emptyMessage) : h20("table", {
           style: {
             borderCollapse: "collapse",
             fontSize: "13px",
             width: "100%"
           }
         }, [
-          h19("thead", [
-            h19("tr", { style: { opacity: "0.7", textAlign: "left" } }, [
-              h19("th", { style: { padding: "8px 12px" } }, "Bucket"),
-              h19("th", { style: { padding: "8px 12px", textAlign: "right" } }, "Calls"),
-              h19("th", { style: { padding: "8px 12px", textAlign: "right" } }, "LLM"),
-              h19("th", { style: { padding: "8px 12px", textAlign: "right" } }, "TTS"),
-              h19("th", { style: { padding: "8px 12px", textAlign: "right" } }, "STT"),
-              h19("th", { style: { padding: "8px 12px", textAlign: "right" } }, "Tel."),
-              h19("th", { style: { padding: "8px 12px", textAlign: "right" } }, "Total")
+          h20("thead", [
+            h20("tr", { style: { opacity: "0.7", textAlign: "left" } }, [
+              h20("th", { style: { padding: "8px 12px" } }, "Bucket"),
+              h20("th", { style: { padding: "8px 12px", textAlign: "right" } }, "Calls"),
+              h20("th", { style: { padding: "8px 12px", textAlign: "right" } }, "LLM"),
+              h20("th", { style: { padding: "8px 12px", textAlign: "right" } }, "TTS"),
+              h20("th", { style: { padding: "8px 12px", textAlign: "right" } }, "STT"),
+              h20("th", { style: { padding: "8px 12px", textAlign: "right" } }, "Tel."),
+              h20("th", { style: { padding: "8px 12px", textAlign: "right" } }, "Total")
             ])
           ]),
-          h19("tbody", rows)
+          h20("tbody", rows)
         ])
       ]);
     };
@@ -12264,10 +12606,10 @@ var VoiceCostDashboard = defineComponent19({
 });
 // src/vue/VoiceLiveCallViewer.ts
 import {
-  defineComponent as defineComponent20,
-  h as h20,
-  onUnmounted as onUnmounted23,
-  shallowRef as shallowRef22
+  defineComponent as defineComponent21,
+  h as h21,
+  onUnmounted as onUnmounted24,
+  shallowRef as shallowRef23
 } from "vue";
 
 // src/client/liveCallViewer.ts
@@ -12392,7 +12734,7 @@ var formatRelative = (ms) => {
   const remaining = seconds % 60;
   return `${String(minutes).padStart(2, "0")}:${String(remaining).padStart(2, "0")}`;
 };
-var VoiceLiveCallViewer = defineComponent20({
+var VoiceLiveCallViewer = defineComponent21({
   name: "VoiceLiveCallViewer",
   props: {
     sessionId: { default: "live", type: String },
@@ -12405,17 +12747,17 @@ var VoiceLiveCallViewer = defineComponent20({
   setup(props) {
     const owned = !props.viewer;
     const viewer = props.viewer ?? createLiveCallViewer({ sessionId: props.sessionId });
-    const state = shallowRef22(viewer.getState());
+    const state = shallowRef23(viewer.getState());
     const unsubscribe = viewer.subscribe(() => {
       state.value = viewer.getState();
     });
-    onUnmounted23(() => {
+    onUnmounted24(() => {
       unsubscribe();
     });
     return () => {
       const s = state.value;
       const firstAt = s.events[0]?.at ?? Date.now();
-      return h20("section", {
+      return h21("section", {
         "aria-label": "voice-live-call-viewer",
         class: "absolute-voice-live-call-viewer",
         "data-agent-state": s.agentState,
@@ -12427,7 +12769,7 @@ var VoiceLiveCallViewer = defineComponent20({
           padding: "20px"
         }
       }, [
-        h20("header", {
+        h21("header", {
           style: {
             alignItems: "center",
             display: "flex",
@@ -12435,8 +12777,8 @@ var VoiceLiveCallViewer = defineComponent20({
             marginBottom: "12px"
           }
         }, [
-          h20("strong", { style: { fontSize: "16px" } }, props.title),
-          h20("span", {
+          h21("strong", { style: { fontSize: "16px" } }, props.title),
+          h21("span", {
             style: {
               background: "rgba(59,130,246,0.18)",
               borderRadius: "999px",
@@ -12445,7 +12787,7 @@ var VoiceLiveCallViewer = defineComponent20({
               textTransform: "uppercase"
             }
           }, s.agentState),
-          h20("span", {
+          h21("span", {
             style: {
               fontSize: "13px",
               marginLeft: "auto",
@@ -12453,7 +12795,7 @@ var VoiceLiveCallViewer = defineComponent20({
             }
           }, `${s.sessionId} \xB7 ${formatRelative(s.callDurationMs)}`)
         ]),
-        s.partialTranscript ? h20("p", {
+        s.partialTranscript ? h21("p", {
           style: {
             background: "rgba(16,185,129,0.12)",
             borderRadius: "12px",
@@ -12463,7 +12805,7 @@ var VoiceLiveCallViewer = defineComponent20({
             padding: "10px 12px"
           }
         }, `\u201C${s.partialTranscript}\u201D`) : null,
-        h20("ol", {
+        h21("ol", {
           style: {
             display: "flex",
             flexDirection: "column",
@@ -12474,7 +12816,7 @@ var VoiceLiveCallViewer = defineComponent20({
             overflowY: "auto",
             padding: "0"
           }
-        }, s.events.map((event, index) => h20("li", {
+        }, s.events.map((event, index) => h21("li", {
           key: `${event.at}-${index}`,
           style: {
             alignItems: "center",
@@ -12485,7 +12827,7 @@ var VoiceLiveCallViewer = defineComponent20({
             paddingLeft: "12px"
           }
         }, [
-          h20("span", {
+          h21("span", {
             style: {
               color: "#cbd5e1",
               fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
@@ -12493,15 +12835,15 @@ var VoiceLiveCallViewer = defineComponent20({
               width: "60px"
             }
           }, formatRelative(event.at - firstAt)),
-          h20("strong", { style: { fontSize: "13px" } }, event.title),
-          event.detail ? h20("span", { style: { opacity: "0.85" } }, event.detail) : null
+          h21("strong", { style: { fontSize: "13px" } }, event.title),
+          event.detail ? h21("span", { style: { opacity: "0.85" } }, event.detail) : null
         ])))
       ]);
     };
   }
 });
 // src/vue/VoiceReplayTimeline.ts
-import { computed as computed12, defineComponent as defineComponent21, h as h21 } from "vue";
+import { computed as computed12, defineComponent as defineComponent22, h as h22 } from "vue";
 
 // src/client/replayTimeline.ts
 var categorize = (entry) => {
@@ -12567,7 +12909,7 @@ var formatRelative2 = (ms) => {
   const remaining = seconds % 60;
   return `${String(minutes).padStart(2, "0")}:${String(remaining).padStart(2, "0")}`;
 };
-var VoiceReplayTimeline = defineComponent21({
+var VoiceReplayTimeline = defineComponent22({
   name: "VoiceReplayTimeline",
   props: {
     artifact: {
@@ -12580,7 +12922,7 @@ var VoiceReplayTimeline = defineComponent21({
     const report = computed12(() => buildReplayTimelineReport({ artifact: props.artifact }));
     return () => {
       const r = report.value;
-      return h21("section", {
+      return h22("section", {
         "aria-label": "voice-replay-timeline",
         class: "absolute-voice-replay-timeline",
         style: {
@@ -12591,7 +12933,7 @@ var VoiceReplayTimeline = defineComponent21({
           padding: "20px"
         }
       }, [
-        h21("header", {
+        h22("header", {
           style: {
             alignItems: "baseline",
             display: "flex",
@@ -12599,10 +12941,10 @@ var VoiceReplayTimeline = defineComponent21({
             marginBottom: "12px"
           }
         }, [
-          h21("strong", { style: { fontSize: "16px" } }, props.title ?? r.metadata.title ?? "Replay"),
-          h21("span", { style: { fontSize: "13px", opacity: "0.7" } }, `${r.events.length} events \xB7 ${r.summary.userTurns} user \xB7 ${r.summary.agentTurns} agent \xB7 ${r.summary.toolCalls} tool`)
+          h22("strong", { style: { fontSize: "16px" } }, props.title ?? r.metadata.title ?? "Replay"),
+          h22("span", { style: { fontSize: "13px", opacity: "0.7" } }, `${r.events.length} events \xB7 ${r.summary.userTurns} user \xB7 ${r.summary.agentTurns} agent \xB7 ${r.summary.toolCalls} tool`)
         ]),
-        r.events.length === 0 ? h21("p", { style: { fontSize: "13px", opacity: "0.7" } }, "No timeline events.") : h21("ol", {
+        r.events.length === 0 ? h22("p", { style: { fontSize: "13px", opacity: "0.7" } }, "No timeline events.") : h22("ol", {
           style: {
             display: "flex",
             flexDirection: "column",
@@ -12611,7 +12953,7 @@ var VoiceReplayTimeline = defineComponent21({
             margin: "0",
             padding: "0"
           }
-        }, r.events.map((event, index) => h21("li", {
+        }, r.events.map((event, index) => h22("li", {
           key: `${event.at}-${index}`,
           style: {
             alignItems: "center",
@@ -12622,7 +12964,7 @@ var VoiceReplayTimeline = defineComponent21({
             paddingLeft: "12px"
           }
         }, [
-          h21("span", {
+          h22("span", {
             style: {
               color: "#cbd5e1",
               fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
@@ -12630,21 +12972,21 @@ var VoiceReplayTimeline = defineComponent21({
               width: "60px"
             }
           }, formatRelative2(event.at - r.startedAt)),
-          h21("strong", { style: { fontSize: "13px" } }, event.label),
-          event.detail ? h21("span", { style: { opacity: "0.85" } }, event.detail) : null
+          h22("strong", { style: { fontSize: "13px" } }, event.label),
+          event.detail ? h22("span", { style: { opacity: "0.85" } }, event.detail) : null
         ])))
       ]);
     };
   }
 });
 // src/vue/useVoiceTraceTimeline.ts
-import { onUnmounted as onUnmounted24, ref as ref19, shallowRef as shallowRef23 } from "vue";
+import { onUnmounted as onUnmounted25, ref as ref20, shallowRef as shallowRef24 } from "vue";
 function useVoiceTraceTimeline(path = "/api/voice-traces", options = {}) {
   const store = createVoiceTraceTimelineStore(path, options);
-  const error = ref19(null);
-  const isLoading = ref19(false);
-  const report = shallowRef23(null);
-  const updatedAt = ref19(undefined);
+  const error = ref20(null);
+  const isLoading = ref20(false);
+  const report = shallowRef24(null);
+  const updatedAt = ref20(undefined);
   const sync = () => {
     const snapshot = store.getSnapshot();
     error.value = snapshot.error;
@@ -12655,7 +12997,7 @@ function useVoiceTraceTimeline(path = "/api/voice-traces", options = {}) {
   const unsubscribe = store.subscribe(sync);
   sync();
   store.refresh().catch(() => {});
-  onUnmounted24(() => {
+  onUnmounted25(() => {
     unsubscribe();
     store.close();
   });
@@ -12668,7 +13010,7 @@ function useVoiceTraceTimeline(path = "/api/voice-traces", options = {}) {
   };
 }
 // src/vue/useVoiceWorkflowStatus.ts
-import { onMounted as onMounted10, onUnmounted as onUnmounted25, ref as ref20, shallowRef as shallowRef24 } from "vue";
+import { onMounted as onMounted11, onUnmounted as onUnmounted26, ref as ref21, shallowRef as shallowRef25 } from "vue";
 
 // src/client/workflowStatus.ts
 var fetchVoiceWorkflowStatus = async (path = "/evals/scenarios/json", options = {}) => {
@@ -12752,10 +13094,10 @@ var createVoiceWorkflowStatusStore = (path = "/evals/scenarios/json", options =
 // src/vue/useVoiceWorkflowStatus.ts
 function useVoiceWorkflowStatus(path = "/evals/scenarios/json", options = {}) {
   const store = createVoiceWorkflowStatusStore(path, options);
-  const error = ref20(null);
-  const isLoading = ref20(false);
-  const report = shallowRef24(undefined);
-  const updatedAt = ref20(undefined);
+  const error = ref21(null);
+  const isLoading = ref21(false);
+  const report = shallowRef25(undefined);
+  const updatedAt = ref21(undefined);
   const sync = () => {
     const snapshot = store.getSnapshot();
     error.value = snapshot.error;
@@ -12765,10 +13107,10 @@ function useVoiceWorkflowStatus(path = "/evals/scenarios/json", options = {}) {
   };
   const unsubscribe = store.subscribe(sync);
   sync();
-  onMounted10(() => {
+  onMounted11(() => {
     store.refresh().catch(() => {});
   });
-  onUnmounted25(() => {
+  onUnmounted26(() => {
     unsubscribe();
     store.close();
   });
@@ -12826,5 +13168,6 @@ export {
   VoiceLiveCallViewer,
   VoiceDeliveryRuntime,
   VoiceCostDashboard,
+  VoiceCallPlayer,
   VoiceCallDebuggerLaunch
 };