@recombine-ai/platform 0.2.6-test.8 → 0.3.0

package/build/bosun-app/frontend/server/chunks/entries/pages/traces/conversations/_conversationId_/latency/_page.svelte.js-tdUdTo4m.js

@@ -0,0 +1,1821 @@
+import { a8 as escape_html, R as derived, ao as ensure_array_like, af as attr_style, a9 as attr_class, ac as clsx } from '../../../../../../chunks/index.js-DczFGj-7.js';
+import { o as onDestroy } from '../../../../../../chunks/index-server.js-CALBgpac.js';
+import { p as page } from '../../../../../../chunks/index2.js-DYVLcO2-.js';
+import { B as Button } from '../../../../../../chunks/Button.js-IbO6ojjD.js';
+import { g as getPersistedTelescopeSourceId, T as TelescopeClient } from '../../../../../../chunks/source-selection.js-Cc6RX6-m.js';
+import { i as isMainStepName } from '../../../../../../chunks/steps.js-DzZCg39h.js';
+import { b as buildResponseLatencySpans, f as findResponseLatencyUserTurn, R as RESPONSE_LATENCY_THRESHOLD_MS } from '../../../../../../chunks/latency.js--f3JYIRg.js';
+import { g as getConversationViewMemory, c as conversationViewMemoryKey } from '../../../../../../chunks/conversation-view-memory.js-DjOFeigb.js';
+import '../../../../../../chunks/uneval.js-5Y6J9rDU.js';
+import '../../../../../../chunks/state.svelte.js-DDOPLPl-.js';
+import '../../../../../../chunks/exports.js-8HOoaa4e.js';
+import '../../../../../../chunks/event.js-BfLhxAp5.js';
+import '../../../../../../chunks/root.js-CJvqqGUj.js';
+import '../../../../../../chunks/utils.js-BQzn9ikS.js';
+import '../../../../../../chunks/schemas.js-W-DP3mDr.js';
+
+function _page($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    const SPEECH_BUBBLE_HEIGHT_PX = 30;
+    const TIMELINE_RULER_HEIGHT_PX = 32;
+    const TIMELINE_ROW_HEIGHT_PX = SPEECH_BUBBLE_HEIGHT_PX;
+    const TIMELINE_ROW_GAP_PX = 5;
+    const WAVEFORM_ROW_HEIGHT_PX = 160;
+    const SPEECH_BUBBLE_VERTICAL_GAP_PX = TIMELINE_ROW_GAP_PX;
+    const SPEECH_BUBBLE_LEVEL_HEIGHT_PX = SPEECH_BUBBLE_HEIGHT_PX + SPEECH_BUBBLE_VERTICAL_GAP_PX;
+    const SPEECH_BUBBLE_PLAYBACK_SPAN_MATCH_BEFORE_MS = 500;
+    const SPEECH_BUBBLE_PLAYBACK_SPAN_MATCH_AFTER_MS = 2500;
+    const SPEECH_BUBBLE_AGENT_PLAYBACK_MATCH_WINDOW_MS = 3e4;
+    const RESPONSE_LATENCY_TRACE_MATCH_TOLERANCE_MS = 250;
+    const GUIDE_ROW_LABELS = /* @__PURE__ */ new Set(["VAD", "Playback"]);
+    const client = new TelescopeClient(fetch);
+    const BOSUN_COLORS = {
+      blue: "#569cd6",
+      green: "#93FF6D",
+      greenDark: "#00B58A",
+      orange: "#ce9178",
+      purple: "#81147D",
+      red: "#FF6666",
+      gray: "#767676"
+    };
+    const ROW_DEFS = [
+      {
+        label: "VAD",
+        eventTypes: ["vad.activated", "vad.deactivated"]
+      },
+      {
+        label: "STT",
+        eventTypes: [
+          "stt.started",
+          "stt.interim",
+          "stt.final",
+          "stt.final_transcript"
+        ]
+      },
+      { label: "Trigger", eventTypes: ["speech.created"] },
+      {
+        label: "Reply Pending",
+        eventTypes: ["reply.pending.started", "reply.pending.completed"]
+      },
+      {
+        label: "LLM Transport",
+        eventTypes: [
+          "llm.connect_tcp.started",
+          "llm.connect_tcp.completed",
+          "llm.connect_tcp.failed",
+          "llm.start_tls.started",
+          "llm.start_tls.completed",
+          "llm.start_tls.failed"
+        ]
+      },
+      {
+        label: "LLM Wait",
+        eventTypes: ["llm.wait.started", "llm.requested", "llm.wait.completed"]
+      },
+      {
+        label: "LLM Stream",
+        eventTypes: [
+          "llm.stream.started",
+          "llm.first_token",
+          "llm.completed",
+          "llm.stream.completed"
+        ]
+      },
+      {
+        label: "TTS Text",
+        eventTypes: ["tts.text.first_sent", "tts.text.completed"]
+      },
+      {
+        label: "Provider",
+        eventTypes: [
+          "tts.provider.started",
+          "tts.audio.first_received",
+          "tts.audio.last_received",
+          "tts.provider.completed"
+        ]
+      },
+      {
+        label: "Decode",
+        eventTypes: ["tts.decode.started", "tts.decode.completed"]
+      },
+      {
+        label: "Output Queue",
+        eventTypes: ["audio.output.wait.started", "audio.output.wait.completed"]
+      },
+      {
+        label: "Playback",
+        eventTypes: [
+          "audio.playback.started",
+          "audio.playback.stopped",
+          "audio.playback.ended"
+        ]
+      },
+      { label: "Response Latency" },
+      {
+        label: "Interruptions",
+        eventTypes: ["interruption.detected", "audio.playback.interrupted"]
+      },
+      { label: "Other" }
+    ];
+    const TIMELINE_ROW_LABELS = new Set(ROW_DEFS.map((row) => row.label));
+    const COLOR_BY_KEY = {
+      call: tintHex(BOSUN_COLORS.gray, 0.2),
+      vad: tintHex(BOSUN_COLORS.purple, 0.35),
+      stt: tintHex(BOSUN_COLORS.purple, 0.2),
+      trigger: BOSUN_COLORS.greenDark,
+      "response.latency.ok": BOSUN_COLORS.green,
+      "response.latency.high": BOSUN_COLORS.red,
+      "reply.pending": tintHex(BOSUN_COLORS.greenDark, 0.18),
+      "llm.transport": tintHex(BOSUN_COLORS.blue, 0.18),
+      "llm.wait": tintHex(BOSUN_COLORS.blue, -0.25),
+      "llm.stream": BOSUN_COLORS.blue,
+      "tts.text": BOSUN_COLORS.orange,
+      "tts.provider.lifecycle": tintHex(BOSUN_COLORS.purple, -0.18),
+      "tts.provider": tintHex(BOSUN_COLORS.purple, 0.12),
+      "tts.decode": tintHex(BOSUN_COLORS.orange, -0.12),
+      "audio.output.wait": BOSUN_COLORS.orange,
+      playback: tintHex(BOSUN_COLORS.greenDark, -0.08),
+      interruption: BOSUN_COLORS.orange,
+      other: BOSUN_COLORS.gray
+    };
+    const SPAN_RULES = [
+      {
+        startEventType: "reply.pending.started",
+        endEventType: "reply.pending.completed",
+        row: "Reply Pending",
+        colorKey: "reply.pending",
+        label: "Reply pending",
+        description: "Derived from adjacent reply-pending lifecycle events"
+      },
+      {
+        startEventType: "llm.connect_tcp.started",
+        endEventType: "llm.connect_tcp.completed",
+        row: "LLM Transport",
+        colorKey: "llm.transport",
+        label: "Connect TCP",
+        description: "Derived from adjacent TCP connect lifecycle events"
+      },
+      {
+        startEventType: "llm.start_tls.started",
+        endEventType: "llm.start_tls.completed",
+        row: "LLM Transport",
+        colorKey: "llm.transport",
+        label: "Start TLS",
+        description: "Derived from adjacent TLS lifecycle events"
+      },
+      {
+        startEventType: "llm.wait.started",
+        endEventType: "llm.wait.completed",
+        row: "LLM Wait",
+        colorKey: "llm.wait",
+        label: "LLM wait",
+        description: "Derived from adjacent LLM wait lifecycle events"
+      },
+      {
+        startEventType: "llm.stream.started",
+        endEventType: "llm.stream.completed",
+        row: "LLM Stream",
+        colorKey: "llm.stream",
+        label: "LLM stream",
+        description: "Derived from adjacent LLM stream lifecycle events"
+      },
+      {
+        startEventType: "tts.text.first_sent",
+        endEventType: "tts.text.completed",
+        row: "TTS Text",
+        colorKey: "tts.text",
+        label: "TTS text send",
+        description: "Derived from adjacent TTS text send and completion events"
+      },
+      {
+        startEventType: "tts.provider.started",
+        endEventType: "tts.audio.first_received",
+        row: "Provider",
+        colorKey: "tts.provider.lifecycle",
+        label: "Provider wait",
+        description: "Derived from adjacent provider start and first-audio events"
+      },
+      {
+        startEventType: "tts.audio.first_received",
+        endEventType: "tts.provider.completed",
+        row: "Provider",
+        colorKey: "tts.provider",
+        label: "Provider audio",
+        description: "Derived from adjacent provider first-audio and completion events"
+      },
+      {
+        startEventType: "tts.decode.started",
+        endEventType: "tts.decode.completed",
+        row: "Decode",
+        colorKey: "tts.decode",
+        label: "Decode",
+        description: "Derived from adjacent local decode lifecycle events"
+      },
+      {
+        startEventType: "audio.output.wait.started",
+        endEventType: "audio.output.wait.completed",
+        row: "Output Queue",
+        colorKey: "audio.output.wait",
+        label: "Output queue",
+        description: "Derived from adjacent audio-output wait lifecycle events"
+      },
+      {
+        startEventType: "audio.playback.started",
+        endEventType: "audio.playback.stopped",
+        row: "Playback",
+        colorKey: "playback",
+        label: "Playback",
+        description: "Derived from adjacent playback start and playback stop events"
+      }
+    ];
+    const SPAN_RULE_BY_START = new Map(SPAN_RULES.map((rule) => [rule.startEventType, rule]));
+    function emptyRecordingResponse() {
+      return {
+        exists: false,
+        audioUrl: null,
+        fileName: null,
+        mimeType: null,
+        size: null,
+        uploadedAt: null,
+        alignmentOffsetMs: 0
+      };
+    }
+    const viewMemory = getConversationViewMemory();
+    const initialSourceId = getPersistedTelescopeSourceId() ?? "";
+    const initialConversationId = page.params.conversationId ?? "";
+    const initialMemoryKey = conversationViewMemoryKey(initialConversationId, initialSourceId);
+    const initialMemory = viewMemory.latency.get(initialMemoryKey);
+    client.setSourceId(initialSourceId || void 0);
+    let sourceId = initialSourceId;
+    let conversation = initialMemory?.conversation ?? null;
+    let traces = initialMemory?.traces ?? [];
+    let conversationTraces = initialMemory?.conversationTraces ?? [];
+    let dataLoaded = initialMemory?.dataLoaded ?? false;
+    let error = initialMemory?.error ?? null;
+    let recording = initialMemory?.recording ?? emptyRecordingResponse();
+    let recordingLoaded = initialMemory?.recordingLoaded ?? false;
+    let recordingError = initialMemory?.recordingError ?? null;
+    let uploadInFlight = false;
+    let waveform = initialMemory?.waveform ?? null;
+    let waveformError = initialMemory?.waveformError ?? null;
+    let playbackPositionMs = initialMemory?.playbackPositionMs ?? 0;
+    let playbackPlaying = false;
+    let playbackError = null;
+    let alignmentSaving = false;
+    let alignmentError = null;
+    let viewDirty = initialMemory?.viewDirty ?? false;
+    let viewportStartMs = null;
+    let viewportEndMs = null;
+    let scrollViewportEl = null;
+    let fileInputEl = null;
+    let humanSpeechBubbleReservedLevels = initialMemory?.humanSpeechBubbleReservedLevels ?? 1;
+    let copyLatencyState = "idle";
+    let loadKey = "";
+    let playbackFrame = 0;
+    let playbackAudioBuffer = initialMemory?.playbackAudioBuffer ?? null;
+    let playbackAudioContext = null;
+    let playbackSourceNode = null;
+    let playbackStartedAtMs = null;
+    let playbackStartedAtContextTime = null;
+    const conversationId = derived(() => page.params.conversationId);
+    function buildRecordingApiUrlFor(cid, nextSourceId) {
+      const params = new URLSearchParams();
+      if (nextSourceId) params.set("source", nextSourceId);
+      const search = params.toString();
+      return `/traces/api/latency/${encodeURIComponent(cid)}${search ? `?${search}` : ""}`;
+    }
+    const recordingApiUrl = derived(() => {
+      if (!conversationId()) return "";
+      return buildRecordingApiUrlFor(conversationId(), sourceId);
+    });
+    const timelineOriginMs = derived(() => {
+      let min = Number.POSITIVE_INFINITY;
+      for (const trace of traces) {
+        if (typeof trace.atMs !== "number" || !Number.isFinite(trace.atMs)) continue;
+        min = Math.min(min, trace.atMs);
+      }
+      if (Number.isFinite(min)) return min;
+      if (typeof conversation?.createdAt === "number" && Number.isFinite(conversation.createdAt)) {
+        return conversation.createdAt;
+      }
+      return Number.isFinite(min) ? min : 0;
+    });
+    const callSegments = derived(() => buildCallLatencySegments(traces));
+    const latencyTraceCount = derived(() => traces.length);
+    const aiResponses = derived(() => buildAiResponses());
+    const playbackSpeechMatches = derived(() => buildPlaybackSpeechMatches(callSegments(), aiResponses()));
+    const timelineSegments = derived(() => {
+      const playbackSegments = callSegments().map((segment) => {
+        const speech = playbackSpeechMatches().bySegmentId.get(segment.id);
+        if (!speech || segment.row !== "Playback" || segment.durationMs <= 0) return segment;
+        return {
+          ...segment,
+          speechText: speech.text,
+          speechFullText: speech.fullText,
+          speechTraceLabel: speech.traceLabel
+        };
+      });
+      return [
+        ...playbackSegments,
+        ...buildStandaloneWaitSegments(aiResponses(), playbackSpeechMatches().responseIds)
+      ];
+    });
+    const timelineRows = derived(() => {
+      const grouped = /* @__PURE__ */ new Map();
+      for (const segment of timelineSegments()) {
+        const items = grouped.get(segment.row);
+        if (items) items.push(segment);
+        else grouped.set(segment.row, [segment]);
+      }
+      return [...ROW_DEFS].reverse().map((row) => ({ label: row.label, segments: grouped.get(row.label) ?? [] })).filter((row) => row.segments.length > 0);
+    });
+    const speechBubbleBaseLayouts = derived(() => buildSpeechBubbleBaseLayouts());
+    const humanSpeechBubbleLevelCount = derived(() => Math.max(humanSpeechBubbleReservedLevels, speechBubbleRoleLevelCount(speechBubbleBaseLayouts(), "human")));
+    const speechBubbles = derived(() => compactSpeechBubbleLayouts(speechBubbleBaseLayouts()));
+    const humanSpeechBubbleLaneHeightPx = derived(() => speechBubbleLaneHeightPx(humanSpeechBubbleLevelCount()));
+    const speechBubbleAreaHeightPx = derived(() => humanSpeechBubbleLaneHeightPx());
+    const timelineRowsHeightPx = derived(() => timelineRows().length * TIMELINE_ROW_HEIGHT_PX + Math.max(0, timelineRows().length - 1) * TIMELINE_ROW_GAP_PX);
+    const traceRowsToBubbleGapPx = derived(() => timelineRows().length > 0 ? TIMELINE_ROW_GAP_PX : 0);
+    const speechBubbleAreaTopPx = derived(() => TIMELINE_RULER_HEIGHT_PX + timelineRowsHeightPx() + traceRowsToBubbleGapPx());
+    const waveformRowVisible = derived(() => recording.exists);
+    const waveformRowHeightPx = derived(() => waveformRowVisible() ? TIMELINE_ROW_GAP_PX + WAVEFORM_ROW_HEIGHT_PX : 0);
+    const guideLines = derived(() => buildGuideLines(timelineRows()));
+    const recordingStartMs = derived(() => {
+      if (!waveform) return null;
+      return timelineOriginMs() + recording.alignmentOffsetMs;
+    });
+    const timelinePlotHeightPx = derived(() => TIMELINE_RULER_HEIGHT_PX + timelineRowsHeightPx() + traceRowsToBubbleGapPx() + speechBubbleAreaHeightPx() + waveformRowHeightPx());
+    const playbackAbsoluteMs = derived(() => {
+      if (recordingStartMs() == null) return null;
+      return recordingStartMs() + playbackPositionMs;
+    });
+    const playbackCursor = derived(() => {
+      const absoluteMs = playbackAbsoluteMs();
+      if (absoluteMs == null || viewportStartMs == null || viewportEndMs == null) return null;
+      const durationMs = viewportEndMs - viewportStartMs;
+      if (!Number.isFinite(durationMs) || durationMs <= 0) return null;
+      if (absoluteMs < viewportStartMs || absoluteMs > viewportEndMs) return null;
+      return {
+        leftPercent: clamp((absoluteMs - viewportStartMs) / durationMs * 100, 0, 100),
+        topPx: TIMELINE_RULER_HEIGHT_PX,
+        heightPx: Math.max(1, timelinePlotHeightPx() - TIMELINE_RULER_HEIGHT_PX)
+      };
+    });
+    const timelineOriginLine = derived(() => {
+      if (viewportStartMs == null || viewportEndMs == null) return null;
+      const durationMs = viewportEndMs - viewportStartMs;
+      if (!Number.isFinite(durationMs) || durationMs <= 0) return null;
+      if (timelineOriginMs() < viewportStartMs || timelineOriginMs() > viewportEndMs) return null;
+      return {
+        leftPercent: (timelineOriginMs() - viewportStartMs) / durationMs * 100,
+        topPx: TIMELINE_RULER_HEIGHT_PX,
+        heightPx: Math.max(1, timelinePlotHeightPx() - TIMELINE_RULER_HEIGHT_PX)
+      };
+    });
+    const contentExtent = derived(() => {
+      let min = Number.POSITIVE_INFINITY;
+      let max = Number.NEGATIVE_INFINITY;
+      for (const segment of callSegments()) {
+        min = Math.min(min, segment.start);
+        max = Math.max(max, segment.end);
+      }
+      if (waveform && recordingStartMs() != null) {
+        min = Math.min(min, recordingStartMs());
+        max = Math.max(max, recordingStartMs() + waveform.durationMs);
+      }
+      if (!Number.isFinite(min) || !Number.isFinite(max)) return null;
+      if (max <= min) max = min + 1;
+      return { min, max };
+    });
+    const conversationTraceExtent = derived(() => {
+      let min = Number.POSITIVE_INFINITY;
+      let max = Number.NEGATIVE_INFINITY;
+      for (const segment of callSegments()) {
+        if (!TIMELINE_ROW_LABELS.has(segment.row)) continue;
+        min = Math.min(min, segment.start);
+        max = Math.max(max, segment.end);
+      }
+      if (!Number.isFinite(min) || !Number.isFinite(max)) return null;
+      if (max <= min) max = min + 1;
+      return { min, max };
+    });
+    const viewportDurationMs = derived(() => {
+      if (viewportStartMs == null || viewportEndMs == null) return null;
+      const duration = viewportEndMs - viewportStartMs;
+      return duration > 0 ? duration : null;
+    });
+    const visibleTicks = derived(() => {
+      if (viewportStartMs == null || viewportEndMs == null) return [];
+      return buildTicks(viewportStartMs, viewportEndMs, timelineOriginMs());
+    });
+    function saveViewMemory(key = loadKey) {
+      if (!key) return;
+      const previous = viewMemory.latency.get(key);
+      const memory = {
+        conversation,
+        traces,
+        conversationTraces,
+        dataLoaded,
+        error,
+        recording,
+        recordingLoaded,
+        recordingError,
+        waveform,
+        waveformError,
+        playbackAudioBuffer,
+        playbackPositionMs,
+        viewportStartMs,
+        viewportEndMs,
+        viewportOriginMs: timelineOriginMs(),
+        viewDirty,
+        humanSpeechBubbleReservedLevels,
+        scrollTop: previous?.scrollTop ?? scrollViewportEl?.scrollTop ?? 0,
+        scrollLeft: previous?.scrollLeft ?? scrollViewportEl?.scrollLeft ?? 0
+      };
+      viewMemory.latency.set(key, memory);
+      const cid = conversationId();
+      const currentSourceId = getPersistedTelescopeSourceId() ?? "";
+      if (cid && currentSourceId && key === conversationViewMemoryKey(cid, "")) {
+        viewMemory.latency.set(conversationViewMemoryKey(cid, currentSourceId), memory);
+      }
+    }
+    onDestroy(() => {
+      saveViewMemory();
+      stopPlayback(false);
+      void closePlaybackAudioContext();
+    });
+    function normalizeNonEmptyString(value) {
+      if (typeof value !== "string") return null;
+      const trimmed = value.trim();
+      return trimmed ? trimmed : null;
+    }
+    function ms(value) {
+      return typeof value === "number" && Number.isFinite(value) ? value : null;
+    }
+    function clampByte(value) {
+      return Math.max(0, Math.min(255, Math.round(value)));
+    }
+    function clamp(value, min, max) {
+      return Math.min(max, Math.max(min, value));
+    }
+    function tintHex(hex, amount) {
+      const raw = (hex ?? "").trim().replace(/^#/, "");
+      const expanded = raw.length === 3 ? raw.split("").map((part) => `${part}${part}`).join("") : raw;
+      if (expanded.length !== 6 || !/^[0-9a-fA-F]+$/.test(expanded)) return hex;
+      const r = parseInt(expanded.slice(0, 2), 16);
+      const g = parseInt(expanded.slice(2, 4), 16);
+      const b = parseInt(expanded.slice(4, 6), 16);
+      const t = Math.abs(Math.max(-1, Math.min(1, amount)));
+      const target = amount >= 0 ? 255 : 0;
+      return `#${clampByte(r + (target - r) * t).toString(16).padStart(2, "0")}${clampByte(g + (target - g) * t).toString(16).padStart(2, "0")}${clampByte(b + (target - b) * t).toString(16).padStart(2, "0")}`;
+    }
+    function fmtSignedMs(value) {
+      if (value == null || !Number.isFinite(value)) return "0 ms";
+      const rounded = Math.round(value);
+      if (rounded === 0) return "0 ms";
+      return `${rounded > 0 ? "+" : ""}${rounded} ms`;
+    }
+    function formatRelativeTime(offsetMs) {
+      if (!Number.isFinite(offsetMs)) return "—";
+      const sign = offsetMs < 0 ? "-" : "";
+      const abs = Math.abs(offsetMs);
+      if (abs < 1e4) return `${sign}${(abs / 1e3).toFixed(1)}s`;
+      if (abs < 6e4) return `${sign}${(abs / 1e3).toFixed(2)}s`;
+      const totalSeconds = abs / 1e3;
+      const minutes = Math.floor(totalSeconds / 60);
+      const seconds = totalSeconds - minutes * 60;
+      return `${sign}${minutes}:${seconds.toFixed(1).padStart(4, "0")}`;
+    }
+    function safeJson(value) {
+      try {
+        return JSON.stringify(value ?? null, null, 2);
+      } catch {
+        return String(value);
+      }
+    }
+    async function copyLatencyStream() {
+      try {
+        await navigator.clipboard.writeText(safeJson(traces));
+        copyLatencyState = "ok";
+        window.setTimeout(
+          () => {
+            copyLatencyState = "idle";
+          },
+          2e3
+        );
+      } catch (reason) {
+        console.error("Failed to copy latency stream", reason);
+        copyLatencyState = "error";
+        window.setTimeout(
+          () => {
+            copyLatencyState = "idle";
+          },
+          3e3
+        );
+      }
+    }
+    function describeTrace(trace) {
+      const time = typeof trace.createdAt === "number" && Number.isFinite(trace.createdAt) ? new Date(trace.createdAt).toLocaleTimeString() : "unknown time";
+      if (trace.traceType === "LATENCY") {
+        return `Latency • #${trace.seq ?? "?"} • ${trace.eventType ?? "unknown"} • ${time}`;
+      }
+      if (trace.traceType === "CONVERSATIONAL") {
+        return `Conversational • ${trace.eventName} • ${time}`;
+      }
+      if (trace.traceType === "STEP") {
+        return `Step • ${trace.name ?? "unknown"} • ${time}`;
+      }
+      return `API • ${trace.operationName} • ${time}`;
+    }
+    function latencyPayload(trace) {
+      const payload = trace.payload;
+      return payload && typeof payload === "object" && !Array.isArray(payload) ? payload : {};
+    }
+    function latencyRow(eventType) {
+      if (eventType === "call.started" || eventType === "call.ended") return "Call";
+      if (eventType.startsWith("vad.")) return "VAD";
+      if (eventType.startsWith("stt.")) return "STT";
+      if (eventType === "speech.created") return "Trigger";
+      if (eventType.startsWith("reply.pending.")) return "Reply Pending";
+      if (eventType.startsWith("llm.connect_tcp.") || eventType.startsWith("llm.start_tls.")) {
+        return "LLM Transport";
+      }
+      if (eventType === "llm.requested" || eventType.startsWith("llm.wait.")) return "LLM Wait";
+      if (eventType === "llm.first_token" || eventType === "llm.completed" || eventType.startsWith("llm.stream.")) {
+        return "LLM Stream";
+      }
+      if (eventType.startsWith("tts.text.")) return "TTS Text";
+      if (eventType.startsWith("tts.provider.")) return "Provider";
+      if (eventType === "tts.audio.first_received" || eventType === "tts.audio.last_received") {
+        return "Provider";
+      }
+      if (eventType.startsWith("tts.decode.")) return "Decode";
+      if (eventType.startsWith("audio.output.wait.")) return "Output Queue";
+      if (eventType === "interruption.detected" || eventType === "audio.playback.interrupted") {
+        return "Interruptions";
+      }
+      if (eventType.startsWith("audio.playback.")) return "Playback";
+      return "Other";
+    }
+    function latencyColorKey(eventType) {
+      if (eventType === "call.started" || eventType === "call.ended") return "call";
+      if (eventType.startsWith("vad.")) return "vad";
+      if (eventType.startsWith("stt.")) return "stt";
+      if (eventType === "speech.created") return "trigger";
+      if (eventType.startsWith("reply.pending.")) return "reply.pending";
+      if (eventType.startsWith("llm.connect_tcp.") || eventType.startsWith("llm.start_tls.")) {
+        return "llm.transport";
+      }
+      if (eventType === "llm.requested" || eventType.startsWith("llm.wait.")) return "llm.wait";
+      if (eventType === "llm.first_token" || eventType === "llm.completed" || eventType.startsWith("llm.stream.")) {
+        return "llm.stream";
+      }
+      if (eventType.startsWith("tts.text.")) return "tts.text";
+      if (eventType.startsWith("tts.provider.")) return "tts.provider.lifecycle";
+      if (eventType === "tts.audio.first_received" || eventType === "tts.audio.last_received") {
+        return "tts.provider";
+      }
+      if (eventType.startsWith("tts.decode.")) return "tts.decode";
+      if (eventType.startsWith("audio.output.wait.")) return "audio.output.wait";
+      if (eventType === "interruption.detected" || eventType === "audio.playback.interrupted") {
+        return "interruption";
+      }
+      if (eventType.startsWith("audio.playback.")) return "playback";
+      return "other";
+    }
+    function latencyEventMarker(eventType) {
+      switch (eventType) {
+        case "vad.activated":
+        case "stt.started":
+          return "start";
+        case "vad.deactivated":
+        case "stt.final":
+        case "stt.final_transcript":
+          return "end";
+        default:
+          return null;
+      }
+    }
+    function latencyLabel(trace) {
+      switch (trace.eventType) {
+        case "call.started":
+          return "Call started";
+        case "call.ended":
+          return "Call ended";
+        case "vad.activated":
+          return "VAD activated";
+        case "vad.deactivated":
+          return "VAD deactivated";
+        case "stt.started":
+          return "STT start";
+        case "stt.interim":
+          return "STT interim";
+        case "stt.final":
+        case "stt.final_transcript":
+          return "STT final";
+        case "speech.created":
+          return "Speech created";
+        case "reply.pending.started":
+          return "Reply pending start";
+        case "reply.pending.completed":
+          return "Reply pending end";
+        case "llm.connect_tcp.started":
+          return "Connect TCP start";
+        case "llm.connect_tcp.completed":
+          return "Connect TCP end";
+        case "llm.connect_tcp.failed":
+          return "Connect TCP failed";
+        case "llm.start_tls.started":
+          return "TLS start";
+        case "llm.start_tls.completed":
+          return "TLS end";
+        case "llm.start_tls.failed":
+          return "TLS failed";
+        case "llm.wait.started":
+          return "LLM wait start";
+        case "llm.wait.completed":
+          return "LLM wait end";
+        case "llm.stream.started":
+          return "LLM stream start";
+        case "llm.stream.completed":
+          return "LLM stream end";
+        case "llm.requested":
+          return "LLM request";
+        case "llm.first_token":
+          return "LLM first token";
+        case "llm.completed":
+          return "LLM end";
+        case "tts.text.first_sent":
+          return "TTS first text";
+        case "tts.text.completed":
+          return "TTS text end";
+        case "tts.provider.started":
+          return "Provider start";
+        case "tts.provider.completed":
+          return "Provider end";
+        case "tts.audio.first_received":
+          return "Provider audio received";
+        case "tts.audio.last_received":
+          return "Provider audio end";
+        case "tts.decode.started":
+          return "Decode start";
+        case "tts.decode.completed":
+          return "Decode end";
+        case "audio.output.wait.started":
+          return "Output queue start";
+        case "audio.output.wait.completed":
+          return "Output queue end";
+        case "interruption.detected":
+          return "Interruption detected";
+        case "audio.playback.started":
+          return "Playback start";
+        case "audio.playback.stopped":
+          return "Playback stop";
+        case "audio.playback.ended":
+          return "Playback end";
+        case "audio.playback.interrupted":
+          return "Playback interrupted";
+        default:
+          return trace.eventType;
+      }
+    }
+    function latencyDescription(trace) {
+      const payload = latencyPayload(trace);
+      switch (trace.eventType) {
+        case "call.started":
+          return "Call-scoped latency stream started";
+        case "call.ended":
+          return "Call-scoped latency stream ended";
+        case "vad.activated":
+          return "Raw VAD activation event";
+        case "vad.deactivated":
+          return "Raw VAD deactivation event";
+        case "stt.started":
+          return "Speech-to-text detected speech start";
+        case "stt.interim":
+          return normalizeNonEmptyString(payload.originalType) === "preflight_transcript" ? "Speech-to-text preflight transcript" : "Speech-to-text interim transcript";
+        case "stt.final":
+        case "stt.final_transcript":
+          return "Speech-to-text final transcript";
+        case "speech.created":
+          return "LiveKit created a speech handle";
+        case "reply.pending.started":
+          return "Reply generation was committed, but downstream generation has not started yet";
+        case "reply.pending.completed":
+          return "Reply generation moved from pending into the LLM request phase";
+        case "llm.connect_tcp.started":
+          return "httpcore started opening a new TCP connection for the LLM request";
+        case "llm.connect_tcp.completed":
+          return "httpcore finished opening a new TCP connection for the LLM request";
+        case "llm.connect_tcp.failed":
+          return "httpcore failed while opening a new TCP connection for the LLM request";
+        case "llm.start_tls.started":
+          return "httpcore started TLS negotiation for the LLM request";
+        case "llm.start_tls.completed":
+          return "httpcore finished TLS negotiation for the LLM request";
+        case "llm.start_tls.failed":
+          return "httpcore failed during TLS negotiation for the LLM request";
+        case "llm.wait.started":
+          return "LLM request is in flight and waiting for the first token";
+        case "llm.wait.completed":
+          return "The LLM wait phase ended when the first token arrived";
+        case "llm.stream.started":
+          return "LLM streaming phase started";
+        case "llm.stream.completed":
+          return "LLM streaming phase ended";
+        case "llm.requested":
+          return "AnyVan received an LLM request";
+        case "llm.first_token":
+          return "First LLM token received";
+        case "llm.completed":
+          return "LLM streaming completed";
+        case "tts.text.first_sent":
+          return "First text chunk sent to the TTS provider";
+        case "tts.text.completed":
+          return "Last non-empty text chunk observed for this TTS stream";
+        case "tts.provider.started":
+          return "Provider lifecycle started when the first non-empty TTS text chunk was sent";
+        case "tts.provider.completed":
+          return "Provider lifecycle ended when the provider stream reported completion";
+        case "tts.audio.first_received":
+          return "First audio chunk received from the TTS provider";
+        case "tts.audio.last_received":
+          return "Last audio chunk received from the TTS provider";
+        case "tts.decode.started":
+          return "First provider audio bytes were handed into the local decode path";
+        case "tts.decode.completed":
+          return "The first decoded audio frame left the local decode path";
+        case "audio.output.wait.started":
+          return "The first local audio frame was handed to the LiveKit audio output";
+        case "audio.output.wait.completed":
+          return "The audio-output wait phase ended when low-level playback actually started";
+        case "interruption.detected":
+          return "User speech overlapped active playback; this does not guarantee playback stopped";
+        case "audio.playback.started":
+          return "First played audio frame";
+        case "audio.playback.stopped":
+          return "Playback lifecycle ended on the Playback row";
+        case "audio.playback.ended":
+          return "Audio playback finished normally";
+        case "audio.playback.interrupted":
+          return "Audio playback ended because the output buffer was interrupted";
+        default:
+          return null;
+      }
+    }
+    function latencyText(trace) {
+      const payload = latencyPayload(trace);
+      return normalizeNonEmptyString(payload.text);
+    }
+    function isFinalSttLatencyTrace(trace) {
+      return trace.eventType === "stt.final" || trace.eventType === "stt.final_transcript";
+    }
+    function bubbleText(value) {
+      const text = normalizeNonEmptyString(value);
+      if (!text) return null;
+      return text.replace(/\s+/g, " ").trim() || null;
+    }
+    function latencyTranscriptText(trace) {
+      const payload = latencyPayload(trace);
+      const text = bubbleText(payload.text) ?? bubbleText(payload.transcript) ?? bubbleText(payload.finalTranscript) ?? bubbleText(payload.final_transcript) ?? bubbleText(payload.message);
+      if (text) return text;
+      const alternatives = payload.alternatives;
+      if (Array.isArray(alternatives)) {
+        for (const alternative of alternatives) {
+          if (!alternative || typeof alternative !== "object") continue;
+          const alternativeText = bubbleText(alternative.text);
+          if (alternativeText) return alternativeText;
+        }
+      }
+      return null;
+    }
+    function isConversationalTrace(trace) {
+      return trace.traceType === "CONVERSATIONAL";
+    }
+    function isUserConversationalTrace(trace) {
+      return isConversationalTrace(trace) && trace.role.toLowerCase() === "user" && (trace.eventName === "received-message" || trace.eventName === "llm-handler-stream-requested");
+    }
+    function isAgentConversationalTrace(trace) {
+      return isConversationalTrace(trace) && (trace.eventName === "finished-main-streaming-step" || trace.eventName === "sent-message");
+    }
+    function conversationalTraceKey(trace) {
+      return normalizeNonEmptyString(trace.traceId) ?? `${trace.createdAt}:${trace.eventName}:${trace.content}`;
+    }
+    function findPreviousConversationalTrace(items, beforeIndex) {
+      for (let index = beforeIndex - 1; index >= 0; index -= 1) {
+        const candidate = items[index];
+        if (candidate.traceType === "CONVERSATIONAL") return candidate;
+      }
+      return null;
+    }
+    function findResponseLatencyAgentTrace(items, span) {
+      const startCreatedAt = ms(span.startTrace.createdAt);
+      const endCreatedAt = ms(span.endTrace.createdAt);
+      if (startCreatedAt == null) return null;
+      for (let index = 0; index < items.length; index += 1) {
+        const candidate = items[index];
+        if (!isAgentConversationalTrace(candidate)) continue;
+        if (candidate.createdAt < startCreatedAt - RESPONSE_LATENCY_TRACE_MATCH_TOLERANCE_MS) {
+          continue;
+        }
+        if (endCreatedAt != null && candidate.createdAt < endCreatedAt - RESPONSE_LATENCY_TRACE_MATCH_TOLERANCE_MS) {
+          continue;
+        }
+        const previous = findPreviousConversationalTrace(items, index);
+        if (!previous || !isUserConversationalTrace(previous)) continue;
+        return candidate;
+      }
+      return null;
+    }
+    function segmentDistanceFromTime(segment, timeMs) {
+      if (timeMs >= segment.start && timeMs <= segment.end) return 0;
+      return Math.min(Math.abs(timeMs - segment.start), Math.abs(timeMs - segment.end));
+    }
+    function findPlaybackSegmentForSpan(span, playbackSegments, usedSegmentIds) {
+      const candidates = playbackSegments.filter((segment) => {
+        if (usedSegmentIds.has(segment.id)) return false;
+        return segment.start >= span.end - SPEECH_BUBBLE_PLAYBACK_SPAN_MATCH_BEFORE_MS && segment.start <= span.end + SPEECH_BUBBLE_PLAYBACK_SPAN_MATCH_AFTER_MS;
+      }).sort((a, b) => Math.abs(a.start - span.end) - Math.abs(b.start - span.end));
+      if (candidates[0]) return candidates[0];
+      return playbackSegments.find((segment) => !usedSegmentIds.has(segment.id) && segment.start <= span.end + SPEECH_BUBBLE_PLAYBACK_SPAN_MATCH_AFTER_MS && segment.end >= span.end - SPEECH_BUBBLE_PLAYBACK_SPAN_MATCH_BEFORE_MS) ?? null;
+    }
+    function findPlaybackSegmentForResponse(responseTime, playbackSegments, usedSegmentIds) {
+      const candidates = playbackSegments.filter((segment) => {
+        if (usedSegmentIds.has(segment.id)) return false;
+        return segment.end >= responseTime - SPEECH_BUBBLE_AGENT_PLAYBACK_MATCH_WINDOW_MS && segment.start <= responseTime + SPEECH_BUBBLE_AGENT_PLAYBACK_MATCH_WINDOW_MS;
+      }).sort((a, b) => segmentDistanceFromTime(a, responseTime) - segmentDistanceFromTime(b, responseTime));
+      return candidates[0] ?? null;
+    }
+    function callStartTime() {
+      for (const trace of traces.slice().sort(compareLatencyTraces)) {
+        if (trace.eventType === "call.started" && Number.isFinite(trace.atMs)) return trace.atMs;
+      }
+      return timelineOriginMs();
+    }
+    function findHumanBubbleStartTime(anchorTime, playbackSegments) {
+      const lastPlayback = playbackSegments.filter((segment) => segment.start <= anchorTime).sort((a, b) => b.start - a.start || b.end - a.end)[0];
+      if (!lastPlayback) return Math.min(callStartTime(), anchorTime);
+      if (lastPlayback.end <= anchorTime) return Math.min(lastPlayback.end, anchorTime);
+      return Math.min(lastPlayback.start, anchorTime);
+    }
+    function isTagOnlyResponse(value) {
+      return value.replace(/<[^>]+>/g, "").trim() === "";
+    }
+    function isWaitResponse(value) {
+      return /<WAIT\b[^>]*\/?\s*>/i.test(value);
+    }
+    function isMainStepResponse(trace) {
+      return trace.traceType === "STEP" && isMainStepName(trace.name) && normalizeNonEmptyString(trace.response) != null;
+    }
+    function responseTextWithoutTags(value) {
+      return value.replace(/<[^>]+>/g, " ").replace(/\s+/g, " ").trim();
+    }
+    function isEquivalentAiResponseText(a, b) {
+      if (a === b) return true;
+      const spokenA = responseTextWithoutTags(a);
+      const spokenB = responseTextWithoutTags(b);
+      return spokenA !== "" && spokenA === spokenB;
+    }
+    function responseTurnBounds(createdAt) {
+      let start = createdAt - SPEECH_BUBBLE_AGENT_PLAYBACK_MATCH_WINDOW_MS;
+      let end = createdAt + SPEECH_BUBBLE_AGENT_PLAYBACK_MATCH_WINDOW_MS;
+      for (const trace of conversationTraces) {
+        if (!isUserConversationalTrace(trace)) continue;
+        if (trace.createdAt <= createdAt) start = trace.createdAt;
+        else {
+          end = trace.createdAt;
+          break;
+        }
+      }
+      return { start, end };
+    }
+    function findStepResponseForAgentTrace(agentTrace, stepResponses, usedStepTraceIds) {
+      const bounds = responseTurnBounds(agentTrace.createdAt);
+      return stepResponses.filter((trace) => !usedStepTraceIds.has(traceKey(trace)) && trace.createdAt >= bounds.start && trace.createdAt < bounds.end).sort((a, b) => Math.abs(a.createdAt - agentTrace.createdAt) - Math.abs(b.createdAt - agentTrace.createdAt))[0] ?? null;
+    }
+    function buildAiResponses() {
+      const built = [];
+      const usedStepTraceIds = /* @__PURE__ */ new Set();
+      const stepResponses = conversationTraces.filter(isMainStepResponse).sort(compareConversationTraces);
+      const agentTraces = conversationTraces.filter(isAgentConversationalTrace).sort(compareConversationTraces);
+      for (const agentTrace of agentTraces) {
+        const stepTrace = findStepResponseForAgentTrace(agentTrace, stepResponses, usedStepTraceIds);
+        const stepFullText = stepTrace ? normalizeNonEmptyString(stepTrace.response) : null;
+        const fullText = stepFullText ?? normalizeNonEmptyString(agentTrace.content);
+        const text = bubbleText(fullText);
+        if (!text || !fullText) continue;
+        const duplicate = built.find((response) => response.agentTraceIds.size > 0 && Math.abs(response.createdAt - agentTrace.createdAt) <= 1e3 && isEquivalentAiResponseText(response.fullText, fullText));
+        if (duplicate) {
+          duplicate.agentTraceIds.add(conversationalTraceKey(agentTrace));
+          if (stepTrace) usedStepTraceIds.add(traceKey(stepTrace));
+          continue;
+        }
+        if (stepTrace) usedStepTraceIds.add(traceKey(stepTrace));
+        built.push({
+          id: stepTrace ? `response:step:${traceKey(stepTrace)}` : `response:agent:${conversationalTraceKey(agentTrace)}`,
+          text,
+          fullText,
+          createdAt: agentTrace.createdAt,
+          agentTraceIds: /* @__PURE__ */ new Set([conversationalTraceKey(agentTrace)]),
+          traceLabel: describeTrace(stepTrace ?? agentTrace)
+        });
+      }
+      for (const stepTrace of stepResponses) {
+        const stepTraceId = traceKey(stepTrace);
+        if (usedStepTraceIds.has(stepTraceId)) continue;
+        const fullText = normalizeNonEmptyString(stepTrace.response);
+        const text = bubbleText(fullText);
+        if (!text || !fullText) continue;
+        built.push({
+          id: `response:step:${stepTraceId}`,
+          text,
+          fullText,
+          createdAt: stepTrace.createdAt,
+          agentTraceIds: /* @__PURE__ */ new Set(),
+          traceLabel: describeTrace(stepTrace)
+        });
+      }
+      return built.sort((a, b) => a.createdAt - b.createdAt || a.id.localeCompare(b.id));
+    }
+    function traceKey(trace) {
+      return normalizeNonEmptyString(trace.traceId) ?? `${trace.seq ?? "?"}:${trace.createdAt ?? "?"}`;
+    }
+    function buildTtsTextEvents() {
+      return traces.slice().sort(compareLatencyTraces).flatMap((trace) => {
+        if (trace.eventType !== "tts.text.first_sent" && trace.eventType !== "tts.text.completed") {
+          return [];
+        }
+        const text = bubbleText(latencyText(trace));
+        return text ? [{ trace, text }] : [];
+      });
+    }
+    function findTtsTextForPlayback(playbackSegment, ttsTextEvents, usedTextTraceIds, previousPlaybackEnd) {
+      const lowerBound = previousPlaybackEnd - 250;
+      const upperBound = playbackSegment.start + 2e3;
+      const candidates = ttsTextEvents.filter(({ trace }) => {
+        if (usedTextTraceIds.has(traceKey(trace))) return false;
+        return trace.atMs >= lowerBound && trace.atMs <= upperBound;
+      }).sort((a, b) => Math.abs(a.trace.atMs - playbackSegment.start) - Math.abs(b.trace.atMs - playbackSegment.start));
+      return candidates[0] ?? null;
+    }
+    function buildPlaybackSpeechMatches(inputSegments, responses) {
+      const bySegmentId = /* @__PURE__ */ new Map();
+      const playbackSegments = inputSegments.filter((segment) => segment.row === "Playback" && segment.durationMs > 0).sort((a, b) => a.start - b.start || a.end - b.end);
+      const usedAgentPlaybackSegmentIds = /* @__PURE__ */ new Set();
+      const usedResponseIds = /* @__PURE__ */ new Set();
+      const usedTtsTextTraceIds = /* @__PURE__ */ new Set();
+      const ttsTextEvents = buildTtsTextEvents();
+      let previousPlaybackEnd = callStartTime();
+      for (const playbackSegment of playbackSegments) {
+        const ttsText = findTtsTextForPlayback(playbackSegment, ttsTextEvents, usedTtsTextTraceIds, previousPlaybackEnd);
+        previousPlaybackEnd = Math.max(previousPlaybackEnd, playbackSegment.end);
+        if (!ttsText) continue;
+        usedTtsTextTraceIds.add(traceKey(ttsText.trace));
+        bySegmentId.set(playbackSegment.id, {
+          text: ttsText.text,
+          fullText: ttsText.text,
+          traceLabel: describeTrace(ttsText.trace)
+        });
+      }
+      for (const span of buildResponseLatencySpans(traces)) {
+        if (findResponseLatencyUserTurn(conversationTraces, span) == null) continue;
+        const agentTrace = findResponseLatencyAgentTrace(conversationTraces, span);
+        if (!agentTrace) continue;
+        const response = responses.find((candidate) => candidate.agentTraceIds.has(conversationalTraceKey(agentTrace)));
+        if (!response) continue;
+        if (usedResponseIds.has(response.id)) continue;
+        if (isTagOnlyResponse(response.fullText)) continue;
+        const playbackSegment = findPlaybackSegmentForSpan(span, playbackSegments, usedAgentPlaybackSegmentIds);
+        if (!playbackSegment) continue;
+        usedAgentPlaybackSegmentIds.add(playbackSegment.id);
+        usedResponseIds.add(response.id);
+        bySegmentId.set(playbackSegment.id, {
+          text: response.text,
+          fullText: response.fullText,
+          traceLabel: response.traceLabel
+        });
+      }
+      for (const response of responses) {
+        if (usedResponseIds.has(response.id)) continue;
+        if (isTagOnlyResponse(response.fullText)) continue;
+        const playbackSegment = findPlaybackSegmentForResponse(response.createdAt, playbackSegments, usedAgentPlaybackSegmentIds);
+        if (!playbackSegment) continue;
+        usedAgentPlaybackSegmentIds.add(playbackSegment.id);
+        usedResponseIds.add(response.id);
+        bySegmentId.set(playbackSegment.id, {
+          text: response.text,
+          fullText: response.fullText,
+          traceLabel: response.traceLabel
+        });
+      }
+      return { bySegmentId, responseIds: usedResponseIds };
+    }
+    function buildStandaloneWaitSegments(responses, usedResponseIds) {
+      return responses.flatMap((response) => {
+        if (usedResponseIds.has(response.id) || !isWaitResponse(response.fullText)) return [];
+        const end = findWaitResponseEnd(response.createdAt);
+        return [
+          {
+            ...makeSegment({
+              id: `playback:wait:${response.id}`,
+              row: "Playback",
+              start: response.createdAt,
+              end,
+              colorKey: "playback",
+              label: "WAIT response",
+              traceLabel: response.traceLabel
+            }),
+            speechText: response.text,
+            speechFullText: response.fullText,
+            speechTraceLabel: response.traceLabel
+          }
+        ];
+      });
+    }
+    function findWaitResponseEnd(start) {
+      const nextActivity = traces.filter((trace) => trace.atMs > start && (trace.eventType === "audio.playback.started" || trace.eventType === "stt.started" || trace.eventType === "vad.activated" || trace.eventType === "call.ended")).sort((a, b) => a.atMs - b.atMs || a.seq - b.seq)[0];
+      return nextActivity ? nextActivity.atMs : start + 1;
+    }
+    function buildSpeechBubbleCandidates() {
+      const built = [];
+      const playbackSegments = callSegments().filter((segment) => segment.row === "Playback" && segment.durationMs > 0).sort((a, b) => a.start - b.start || a.end - b.end);
+      traces.slice().sort(compareLatencyTraces).forEach((trace) => {
+        if (!isFinalSttLatencyTrace(trace)) return;
+        const text = latencyTranscriptText(trace);
+        if (!text) return;
+        built.push({
+          id: `bubble:human:${trace.traceId ?? trace.seq}`,
+          role: "human",
+          text,
+          fullText: text,
+          anchorTime: trace.atMs,
+          minStartTime: findHumanBubbleStartTime(trace.atMs, playbackSegments),
+          anchorRow: "STT",
+          traceLabel: describeTrace(trace)
+        });
+      });
+      return built.sort((a, b) => a.anchorTime - b.anchorTime || a.role.localeCompare(b.role) || a.id.localeCompare(b.id));
+    }
+    function timelineRowAnchorPx(rowLabel) {
+      const rowIndex = timelineRows().findIndex((row) => row.label === rowLabel);
+      if (rowIndex === -1) return TIMELINE_RULER_HEIGHT_PX;
+      return TIMELINE_RULER_HEIGHT_PX + rowIndex * (TIMELINE_ROW_HEIGHT_PX + TIMELINE_ROW_GAP_PX) + Math.round(TIMELINE_ROW_HEIGHT_PX / 2);
+    }
+    function speechBubbleRoleLevelCount(bubbles, role) {
+      let maxLevel = -1;
+      for (const bubble of bubbles) {
+        if (bubble.role !== role) continue;
+        maxLevel = Math.max(maxLevel, bubble.level);
+      }
+      return maxLevel + 1;
+    }
+    function speechBubbleLaneHeightPx(levelCount) {
+      return Math.max(0, levelCount) * SPEECH_BUBBLE_LEVEL_HEIGHT_PX;
+    }
+    function compactSpeechBubbleLayouts(bubbles) {
+      const bubbleAreaTopPx = speechBubbleAreaTopPx();
+      return bubbles.map((bubble) => {
+        const topPx = bubble.level * SPEECH_BUBBLE_LEVEL_HEIGHT_PX;
+        const globalTopPx = bubbleAreaTopPx + topPx;
+        const rowAnchorPx = timelineRowAnchorPx(bubble.anchorRow);
+        return {
+          ...bubble,
+          topPx,
+          lineTopPx: rowAnchorPx,
+          lineHeightPx: Math.max(1, globalTopPx - rowAnchorPx)
+        };
+      });
+    }
+    function buildSpeechBubbleLayoutForRole(role, candidates) {
+      return [];
+    }
+    function buildSpeechBubbleBaseLayouts() {
+      buildSpeechBubbleCandidates();
+      return buildSpeechBubbleLayoutForRole();
+    }
+    function speechBubbleStyle(bubble) {
+      return `left:${Math.round(bubble.leftPx)}px;top:${Math.round(bubble.topPx)}px;width:${Math.round(bubble.widthPx)}px;height:${SPEECH_BUBBLE_HEIGHT_PX}px;`;
+    }
+    function speechBubbleLineStyle(bubble) {
+      return `left:${bubble.anchorPercent}%;top:${Math.round(bubble.lineTopPx)}px;height:${Math.round(bubble.lineHeightPx)}px;`;
+    }
+    function speechBubbleClass(bubble) {
+      const base = "absolute z-20 overflow-hidden truncate rounded-lg border-thin border-rc-gray-110 px-3 text-sm leading-[30px] text-rc-gray-100 backdrop-blur-md";
+      if (bubble.role === "agent") {
+        return `${base} bg-rc-green-700`;
+      }
+      return `${base} bg-rc-gray-700`;
+    }
+    function makeSegment(input) {
+      return {
+        id: input.id,
+        row: input.row,
+        start: input.start,
+        end: input.end,
+        durationMs: Math.max(0, input.end - input.start),
+        colorKey: input.colorKey,
+        label: input.label,
+        description: input.description ?? null,
+        explain: input.explain ?? null,
+        text: input.text ?? null,
+        speechText: null,
+        speechFullText: null,
+        speechTraceLabel: null,
+        traceLabel: input.traceLabel,
+        eventMarker: input.eventMarker ?? null
+      };
+    }
+    function compareLatencyTraces(a, b) {
+      return a.seq - b.seq || a.atMs - b.atMs || (a.createdAt ?? 0) - (b.createdAt ?? 0) || String(a.traceId ?? "").localeCompare(String(b.traceId ?? ""));
+    }
+    function findNextLatencyEvent(events, startIndex, match, stop) {
+      for (let index = startIndex + 1; index < events.length; index += 1) {
+        const next = events[index];
+        if (stop(next)) return null;
+        if (match(next)) return next;
+      }
+      return null;
+    }
+    function buildResponseLatencySegments(events) {
+      return buildResponseLatencySpans(events).filter((span) => findResponseLatencyUserTurn(conversationTraces, span) != null).map((span) => makeSegment({
+        id: `derived:${span.id}`,
+        row: "Response Latency",
+        start: span.start,
+        end: span.end,
+        colorKey: span.isHigh ? "response.latency.high" : "response.latency.ok",
+        label: "Final STT -> speech start",
+        description: span.speechCreatedTrace ? "Final STT transcript -> first audio for the next uncancelled LiveKit speech" : "Final STT transcript -> next audio playback start",
+        explain: span.isHigh ? `High latency (>${RESPONSE_LATENCY_THRESHOLD_MS}ms)` : "OK",
+        text: span.text,
+        traceLabel: span.speechCreatedTrace ? `${describeTrace(span.startTrace)} -> ${describeTrace(span.speechCreatedTrace)} -> ${describeTrace(span.endTrace)}` : `${describeTrace(span.startTrace)} -> ${describeTrace(span.endTrace)}`
+      }));
+    }
+    function buildDerivedSegments(events) {
+      const built = buildResponseLatencySegments(events);
+      events.forEach((trace, index) => {
+        const rule = SPAN_RULE_BY_START.get(trace.eventType);
+        if (!rule) return;
+        const next = findNextLatencyEvent(events, index, (candidate) => candidate.eventType === rule.endEventType, (candidate) => candidate.eventType === rule.startEventType);
+        if (!next || next.atMs < trace.atMs) return;
+        built.push(makeSegment({
+          id: `derived:${rule.row.toLowerCase().replaceAll(" ", "_")}:${trace.seq}:${next.seq}`,
+          row: rule.row,
+          start: trace.atMs,
+          end: next.atMs,
+          colorKey: rule.colorKey,
+          label: rule.label,
+          description: rule.description,
+          traceLabel: describeTrace(trace)
+        }));
+      });
+      return built;
+    }
+    function buildCallLatencySegments(input) {
+      const events = input.slice().filter((trace) => typeof trace.atMs === "number" && Number.isFinite(trace.atMs) && typeof trace.seq === "number" && Number.isFinite(trace.seq)).sort(compareLatencyTraces);
+      const pointSegments = events.map((trace, index) => makeSegment({
+        id: `point:${trace.traceId ?? trace.seq}:${index}`,
+        row: latencyRow(trace.eventType),
+        start: trace.atMs,
+        end: trace.atMs,
+        colorKey: latencyColorKey(trace.eventType),
+        label: latencyLabel(trace),
+        description: latencyDescription(trace),
+        text: latencyText(trace),
+        traceLabel: describeTrace(trace),
+        eventMarker: latencyEventMarker(trace.eventType)
+      }));
+      const derivedSegments = buildDerivedSegments(events);
+      return [...derivedSegments, ...pointSegments].sort((a, b) => a.start - b.start || (a.durationMs === 0 ? 1 : 0) - (b.durationMs === 0 ? 1 : 0) || a.end - b.end || a.row.localeCompare(b.row));
+    }
+    function buildRecordingResponse(raw) {
+      const next = raw && typeof raw === "object" ? raw : {};
+      const audioUrl = typeof next.audioUrl === "string" && next.audioUrl.trim() ? next.audioUrl : null;
+      return {
+        exists: next.exists === true && audioUrl != null,
+        audioUrl,
+        fileName: typeof next.fileName === "string" ? next.fileName : null,
+        mimeType: typeof next.mimeType === "string" ? next.mimeType : null,
+        size: typeof next.size === "number" && Number.isFinite(next.size) ? next.size : null,
+        uploadedAt: typeof next.uploadedAt === "string" ? next.uploadedAt : null,
+        alignmentOffsetMs: typeof next.alignmentOffsetMs === "number" && Number.isFinite(next.alignmentOffsetMs) ? next.alignmentOffsetMs : 0
+      };
+    }
+    function getResponseError(payload, fallback) {
+      const next = payload && typeof payload === "object" ? payload : {};
+      if (typeof next.error === "string" && next.error.trim()) return next.error;
+      if (typeof next.message === "string" && next.message.trim()) return next.message;
+      return fallback;
+    }
+    async function readResponsePayload(response) {
+      const contentType = response.headers.get("content-type") ?? "";
+      if (contentType.includes("application/json")) {
+        return response.json().catch(() => ({}));
+      }
+      const text = (await response.text().catch(() => "")).trim();
+      if (!text) return {};
+      if (contentType.includes("text/html")) {
+        const titleMatch = text.match(/<title>([^<]+)<\/title>/i);
+        const headingMatch = text.match(/<h1[^>]*>([^<]+)<\/h1>/i);
+        return {
+          message: titleMatch?.[1]?.trim() || headingMatch?.[1]?.trim() || `${response.status} ${response.statusText}`.trim()
+        };
+      }
+      return { message: text };
+    }
+    function isPlaybackTraceBubble(segment) {
+      return segment.row === "Playback" && !segment.eventMarker && segment.durationMs > 0;
+    }
+    function segmentDisplayText(segment) {
+      if (isPlaybackTraceBubble(segment)) return segment.speechText;
+      return null;
+    }
+    function segmentStyle(segment) {
+      if (viewportStartMs == null || viewportEndMs == null) return null;
+      const duration = viewportEndMs - viewportStartMs;
+      if (!Number.isFinite(duration) || duration <= 0) return null;
+      const fill = COLOR_BY_KEY[segment.colorKey] ?? BOSUN_COLORS.gray;
+      const border = tintHex(fill, -0.25);
+      if (segment.end === segment.start) {
+        if (segment.start < viewportStartMs || segment.start > viewportEndMs) return null;
+        const pointPercent = clamp((segment.start - viewportStartMs) / duration * 100, 0, 100);
+        if (segment.eventMarker === "start") {
+          return `left:${pointPercent}%;width:7px;background:${fill};border-color:${border};clip-path:polygon(0 0,100% 50%,0 100%);`;
+        }
+        if (segment.eventMarker === "end") {
+          return `left:calc(${pointPercent}% - 7px);width:7px;background:${fill};border-color:${border};clip-path:polygon(100% 0,0 50%,100% 100%);`;
+        }
+        return `left:calc(${pointPercent}% - 2px);width:4px;background:${fill};border-color:${border};`;
+      }
+      const visibleStart = Math.max(segment.start, viewportStartMs);
+      const visibleEnd = Math.min(segment.end, viewportEndMs);
+      if (visibleEnd < visibleStart) return null;
+      const leftPercent = (visibleStart - viewportStartMs) / duration * 100;
+      const widthPercent = (visibleEnd - visibleStart) / duration * 100;
+      if (isPlaybackTraceBubble(segment)) {
+        return `left:${leftPercent}%;width:max(${widthPercent}%,2px);`;
+      }
+      return `left:${leftPercent}%;width:max(${widthPercent}%,2px);background:${fill};border-color:${border};`;
+    }
+    function segmentClass(segment) {
+      if (segment.eventMarker) {
+        return "absolute inset-y-0 shadow-[0_0_0_1px_rgba(0,0,0,0.28)]";
+      }
+      if (isPlaybackTraceBubble(segment)) {
+        return "absolute inset-y-0 overflow-hidden truncate rounded-lg border-thin border-rc-gray-110 bg-rc-green-700 px-3 text-sm leading-[30px] text-rc-gray-100 shadow-[0_0_0_1px_rgba(0,0,0,0.12)] backdrop-blur-md";
+      }
+      return "absolute inset-y-0 rounded border shadow-[0_0_0_1px_rgba(0,0,0,0.12)]";
+    }
+    function guideLineStyle(guide) {
+      return `left:${guide.leftPercent}%;top:${guide.topPx}px;height:${guide.heightPx}px;border-color:${guide.color};opacity:${guide.opacity};`;
+    }
+    function timelineOriginLineStyle(originLine) {
+      return `left:${originLine.leftPercent}%;top:${originLine.topPx}px;height:${originLine.heightPx}px;`;
+    }
+    function tickLabelClass(tick) {
+      const base = "absolute top-1 whitespace-nowrap text-[11px] text-rc-gray-400";
+      if (tick.leftPercent <= 0.1) return base;
+      if (tick.leftPercent >= 99.9) return `${base} -translate-x-full`;
+      return `${base} -translate-x-1/2`;
+    }
+    function buildGuideLines(rows) {
+      if (!recording.exists || viewportStartMs == null || viewportEndMs == null) return [];
+      const rangeStartMs = viewportStartMs;
+      const rangeEndMs = viewportEndMs;
+      const durationMs = rangeEndMs - rangeStartMs;
+      if (!Number.isFinite(durationMs) || durationMs <= 0) return [];
+      const waveformBottomPx = timelinePlotHeightPx();
+      const seen = /* @__PURE__ */ new Set();
+      const built = [];
+      rows.forEach((row, rowIndex) => {
+        if (!GUIDE_ROW_LABELS.has(row.label)) return;
+        const rowTopPx = TIMELINE_RULER_HEIGHT_PX + rowIndex * (TIMELINE_ROW_HEIGHT_PX + TIMELINE_ROW_GAP_PX);
+        const rowAnchorPx = rowTopPx + Math.round(TIMELINE_ROW_HEIGHT_PX / 2);
+        row.segments.forEach((segment) => {
+          if (segment.id.startsWith("playback:wait:")) return;
+          const color = tintHex(COLOR_BY_KEY[segment.colorKey] ?? BOSUN_COLORS.gray, 0.15);
+          const times = segment.end === segment.start ? segment.start >= rangeStartMs && segment.start <= rangeEndMs ? [segment.start] : [] : (() => {
+            const visibleStart = Math.max(segment.start, rangeStartMs);
+            const visibleEnd = Math.min(segment.end, rangeEndMs);
+            return visibleEnd < visibleStart ? [] : [visibleStart, visibleEnd];
+          })();
+          for (const timeMs of times) {
+            const roundedTime = Math.round(timeMs);
+            const key = `${row.label}:${roundedTime}`;
+            if (seen.has(key)) continue;
+            seen.add(key);
+            const leftPercent = clamp((timeMs - rangeStartMs) / durationMs * 100, 0, 100);
+            built.push({
+              id: `${segment.id}:${roundedTime}`,
+              leftPercent,
+              topPx: rowAnchorPx,
+              heightPx: Math.max(1, waveformBottomPx - rowAnchorPx),
+              color,
+              opacity: row.label === "VAD" ? 0.62 : 0.48
+            });
+          }
+        });
+      });
+      return built;
+    }
+    function chooseTickStep(durationMs) {
+      const approx = durationMs / 7;
+      const magnitude = 10 ** Math.floor(Math.log10(Math.max(1, approx)));
+      const normalized = approx / magnitude;
+      if (normalized <= 1) return 1 * magnitude;
+      if (normalized <= 2) return 2 * magnitude;
+      if (normalized <= 5) return 5 * magnitude;
+      return 10 * magnitude;
+    }
+    function buildTicks(startMs, endMs, originMs) {
+      const durationMs = endMs - startMs;
+      if (!Number.isFinite(durationMs) || durationMs <= 0) return [];
+      const stepMs = chooseTickStep(durationMs);
+      const firstTick = Math.ceil((startMs - originMs) / stepMs) * stepMs + originMs;
+      const ticks = [];
+      for (let tick = firstTick; tick <= endMs; tick += stepMs) {
+        const leftPercent = (tick - startMs) / durationMs * 100;
+        ticks.push({
+          time: tick,
+          leftPercent,
+          label: formatRelativeTime(tick - originMs)
+        });
+      }
+      return ticks;
+    }
+    function createAudioContext() {
+      const next = window.AudioContext ?? window.webkitAudioContext;
+      if (!next) {
+        throw new Error("Web Audio is not available in this browser");
+      }
+      return new next();
+    }
+    function stopPlaybackTicker() {
+      if (!playbackFrame) return;
+      window.cancelAnimationFrame(playbackFrame);
+      playbackFrame = 0;
+    }
+    async function closePlaybackAudioContext() {
+      const context = playbackAudioContext;
+      playbackAudioContext = null;
+      if (!context) return;
+      await context.close().catch(() => {
+      });
+    }
+    async function ensurePlaybackAudioContext() {
+      if (!playbackAudioContext || playbackAudioContext.state === "closed") {
+        playbackAudioContext = createAudioContext();
+      }
+      if (playbackAudioContext.state === "suspended") {
+        await playbackAudioContext.resume();
+      }
+      return playbackAudioContext;
+    }
+    function getPlaybackPositionMs() {
+      const durationMs = getRecordingDurationMs();
+      if (playbackPlaying && playbackAudioContext && playbackStartedAtMs != null && playbackStartedAtContextTime != null) {
+        const elapsedMs = (playbackAudioContext.currentTime - playbackStartedAtContextTime) * 1e3;
+        const currentMs = playbackStartedAtMs + Math.max(0, elapsedMs);
+        return durationMs > 0 ? clamp(currentMs, 0, durationMs) : Math.max(0, currentMs);
+      }
+      return durationMs > 0 ? clamp(playbackPositionMs, 0, durationMs) : Math.max(0, playbackPositionMs);
+    }
+    function stopPlayback(preservePosition = true) {
+      if (preservePosition) {
+        playbackPositionMs = getPlaybackPositionMs();
+      }
+      const source = playbackSourceNode;
+      playbackSourceNode = null;
+      playbackStartedAtMs = null;
+      playbackStartedAtContextTime = null;
+      playbackPlaying = false;
+      stopPlaybackTicker();
+      if (!source) return;
+      source.onended = null;
+      try {
+        source.stop();
+      } catch {
+      }
+      source.disconnect();
+    }
+    function startPlaybackTicker() {
+      stopPlaybackTicker();
+      const tick = () => {
+        if (!playbackPlaying) {
+          playbackFrame = 0;
+          return;
+        }
+        playbackPositionMs = getPlaybackPositionMs();
+        playbackFrame = window.requestAnimationFrame(tick);
+      };
+      playbackFrame = window.requestAnimationFrame(tick);
+    }
+    function getRecordingDurationMs() {
+      if (waveform && Number.isFinite(waveform.durationMs)) {
+        return Math.max(0, waveform.durationMs);
+      }
+      if (playbackAudioBuffer && Number.isFinite(playbackAudioBuffer.duration)) {
+        return Math.max(0, playbackAudioBuffer.duration * 1e3);
+      }
+      return 0;
+    }
+    async function togglePlayback() {
+      if (!recording.exists || !recording.audioUrl) return;
+      playbackError = null;
+      if (playbackPlaying) {
+        stopPlayback(true);
+        return;
+      }
+      await startPlaybackAtMs(playbackPositionMs);
+    }
+    async function startPlaybackAtMs(nextMs) {
+      const buffer = playbackAudioBuffer;
+      if (!buffer) {
+        playbackError = "Failed to decode recording for playback";
+        return;
+      }
+      const durationMs = Math.max(0, buffer.duration * 1e3);
+      const startMs = durationMs > 0 ? nextMs >= durationMs ? 0 : clamp(nextMs, 0, durationMs) : Math.max(0, nextMs);
+      stopPlayback(false);
+      playbackPositionMs = startMs;
+      try {
+        const context = await ensurePlaybackAudioContext();
+        const source = context.createBufferSource();
+        source.buffer = buffer;
+        source.connect(context.destination);
+        source.onended = () => {
+          if (playbackSourceNode !== source) return;
+          playbackSourceNode = null;
+          playbackStartedAtMs = null;
+          playbackStartedAtContextTime = null;
+          playbackPlaying = false;
+          playbackPositionMs = durationMs;
+          stopPlaybackTicker();
+        };
+        playbackSourceNode = source;
+        playbackStartedAtMs = startMs;
+        playbackStartedAtContextTime = context.currentTime;
+        playbackPlaying = true;
+        playbackError = null;
+        startPlaybackTicker();
+        source.start(0, startMs / 1e3);
+      } catch (reason) {
+        stopPlayback(false);
+        playbackPlaying = false;
+        playbackError = reason instanceof Error ? reason.message : "Failed to play recording";
+      }
+    }
+    function compareConversationTraces(a, b) {
+      return a.createdAt - b.createdAt || String(a.traceId ?? "").localeCompare(String(b.traceId ?? ""));
+    }
+    function fitViewport(markDirty = true) {
+      const extent = conversationTraceExtent() ?? contentExtent();
+      if (!extent) return;
+      const originMs = timelineOriginMs();
+      viewportStartMs = originMs;
+      viewportEndMs = Math.max(originMs + 1e3, extent.max);
+      viewDirty = markDirty;
+    }
+    function clampViewport(startMs, endMs) {
+      const extent = contentExtent();
+      if (!extent) return { startMs, endMs };
+      const durationMs = endMs - startMs;
+      if (durationMs <= 0) return { startMs, endMs };
+      const marginMs = Math.max(1e3, durationMs * 0.25);
+      const minAllowed = extent.min - marginMs;
+      const maxAllowed = extent.max + marginMs;
+      if (durationMs >= maxAllowed - minAllowed) {
+        return { startMs: minAllowed, endMs: maxAllowed };
+      }
+      if (startMs < minAllowed) {
+        endMs += minAllowed - startMs;
+        startMs = minAllowed;
+      }
+      if (endMs > maxAllowed) {
+        startMs -= endMs - maxAllowed;
+        endMs = maxAllowed;
+      }
+      return { startMs, endMs };
+    }
+    function setViewport(startMs, endMs) {
+      if (!Number.isFinite(startMs) || !Number.isFinite(endMs) || endMs <= startMs) return;
+      const next = clampViewport(startMs, endMs);
+      viewportStartMs = next.startMs;
+      viewportEndMs = next.endMs;
+    }
+    function zoomViewport(factor, focusRatio = 0.5) {
+      if (viewportStartMs == null || viewportEndMs == null) return;
+      const currentDuration = viewportEndMs - viewportStartMs;
+      if (!Number.isFinite(currentDuration) || currentDuration <= 0) return;
+      const extent = contentExtent();
+      const contentDuration = extent ? extent.max - extent.min : currentDuration;
+      const minDuration = Math.min(100, currentDuration);
+      const maxDuration = Math.max(contentDuration + Math.max(2e3, contentDuration * 0.1), 5e3);
+      const nextDuration = clamp(currentDuration * factor, minDuration, maxDuration);
+      const nextFocusRatio = clamp(focusRatio, 0, 1);
+      const focusMs = viewportStartMs + currentDuration * nextFocusRatio;
+      const nextStartMs = focusMs - nextDuration * nextFocusRatio;
+      viewDirty = true;
+      setViewport(nextStartMs, nextStartMs + nextDuration);
+    }
+    function setLocalAlignmentOffset(nextOffsetMs) {
+      recording = { ...recording, alignmentOffsetMs: Math.round(nextOffsetMs) };
+    }
+    async function persistAlignmentOffset() {
+      if (!recording.exists || !recordingApiUrl()) return;
+      alignmentSaving = true;
+      alignmentError = null;
+      try {
+        const response = await fetch(recordingApiUrl(), {
+          method: "PATCH",
+          headers: {
+            accept: "application/json",
+            "content-type": "application/json"
+          },
+          body: JSON.stringify({ alignmentOffsetMs: recording.alignmentOffsetMs })
+        });
+        const payload = await readResponsePayload(response);
+        if (!response.ok) {
+          throw new Error(getResponseError(payload, "Failed to save alignment offset"));
+        }
+        recording = buildRecordingResponse(payload);
+      } catch (reason) {
+        alignmentError = reason instanceof Error ? reason.message : String(reason);
+      } finally {
+        alignmentSaving = false;
+      }
+    }
+    async function resetAlignment() {
+      if (!recording.exists) return;
+      viewDirty = true;
+      setLocalAlignmentOffset(0);
+      await persistAlignmentOffset();
+    }
+    $$renderer2.push(`<div class="flex h-full min-h-0 flex-col bg-rc-gray-700"><div class="flex-none border-b border-rc-gray-300/40 p-4"><div class="flex flex-wrap items-start justify-between gap-3"><div><h2 class="text-lg font-semibold text-rc-gray-100">Latency `);
+    if (conversationId()) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<span class="text-rc-gray-100">for conversation Id:</span> <span class="text-rc-green-200">${escape_html(conversationId())}</span>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]--></h2> <div class="mt-2 flex flex-wrap gap-x-5 gap-y-1 text-xs text-rc-gray-300"><div><span class="text-rc-gray-400">Latency events:</span> <span class="font-mono text-rc-gray-100">${escape_html(latencyTraceCount())}</span></div> <div><span class="text-rc-gray-400">Timeline items:</span> <span class="font-mono text-rc-gray-100">${escape_html(callSegments().length)}</span></div> <div><span class="text-rc-gray-400">Recording offset:</span> <span class="font-mono text-rc-gray-100">${escape_html(fmtSignedMs(recording.alignmentOffsetMs))}</span></div> `);
+    if (recording.exists && playbackAbsoluteMs() != null) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<div><span class="text-rc-gray-400">Playhead:</span> <span class="font-mono text-rc-gray-100">${escape_html(formatRelativeTime(playbackAbsoluteMs() - timelineOriginMs()))}</span></div>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]--> `);
+    if (viewportStartMs != null && viewportEndMs != null) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<div><span class="text-rc-gray-400">Viewport:</span> <span class="font-mono text-rc-gray-100">${escape_html(formatRelativeTime(viewportStartMs - timelineOriginMs()))} → ${escape_html(formatRelativeTime(viewportEndMs - timelineOriginMs()))}</span></div>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]--></div></div> <div class="flex flex-wrap items-center gap-2"><input type="file" accept=".wav,audio/wav,audio/x-wav" class="hidden"/> `);
+    Button($$renderer2, {
+      variant: "secondary",
+      size: "small",
+      disabled: uploadInFlight,
+      onclick: () => fileInputEl?.click(),
+      children: ($$renderer3) => {
+        $$renderer3.push(`<!---->${escape_html(recording.exists ? "Replace WAV" : "Upload WAV")}`);
+      },
+      $$slots: { default: true }
+    });
+    $$renderer2.push(`<!----> `);
+    Button($$renderer2, {
+      variant: "secondary",
+      size: "small",
+      disabled: !recording.exists,
+      onclick: () => void togglePlayback(),
+      children: ($$renderer3) => {
+        $$renderer3.push(`<!---->${escape_html(playbackPlaying ? "Pause" : "Play")}`);
+      },
+      $$slots: { default: true }
+    });
+    $$renderer2.push(`<!----> `);
+    Button($$renderer2, {
+      variant: "secondary",
+      size: "small",
+      disabled: viewportDurationMs() == null,
+      onclick: () => zoomViewport(0.8),
+      children: ($$renderer3) => {
+        $$renderer3.push(`<!---->Zoom in`);
+      },
+      $$slots: { default: true }
+    });
+    $$renderer2.push(`<!----> `);
+    Button($$renderer2, {
+      variant: "secondary",
+      size: "small",
+      disabled: viewportDurationMs() == null,
+      onclick: () => zoomViewport(1.25),
+      children: ($$renderer3) => {
+        $$renderer3.push(`<!---->Zoom out`);
+      },
+      $$slots: { default: true }
+    });
+    $$renderer2.push(`<!----> `);
+    Button($$renderer2, {
+      variant: "secondary",
+      size: "small",
+      disabled: !(conversationTraceExtent() ?? contentExtent()),
+      onclick: () => fitViewport(true),
+      children: ($$renderer3) => {
+        $$renderer3.push(`<!---->Fit call`);
+      },
+      $$slots: { default: true }
+    });
+    $$renderer2.push(`<!----> `);
+    Button($$renderer2, {
+      variant: "secondary",
+      size: "small",
+      disabled: !recording.exists || alignmentSaving,
+      onclick: resetAlignment,
+      children: ($$renderer3) => {
+        $$renderer3.push(`<!---->Reset alignment`);
+      },
+      $$slots: { default: true }
+    });
+    $$renderer2.push(`<!----> `);
+    Button($$renderer2, {
+      variant: "secondary",
+      size: "small",
+      disabled: !traces.length,
+      onclick: copyLatencyStream,
+      children: ($$renderer3) => {
+        $$renderer3.push(`<!---->${escape_html(copyLatencyState === "ok" ? "Copied" : copyLatencyState === "error" ? "Copy failed" : "Copy latency stream")}`);
+      },
+      $$slots: { default: true }
+    });
+    $$renderer2.push(`<!----></div></div> `);
+    {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]--> `);
+    if (error) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<div class="mt-2 text-sm text-red-300">Failed to load latency traces: ${escape_html(error)}</div>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]--> `);
+    if (recordingError) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<div class="mt-2 text-sm text-red-300">Recording error: ${escape_html(recordingError)}</div>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]--> `);
+    if (alignmentError) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<div class="mt-2 text-sm text-red-300">Alignment error: ${escape_html(alignmentError)}</div>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]--> `);
+    if (playbackError) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<div class="mt-2 text-sm text-red-300">Playback error: ${escape_html(playbackError)}</div>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]--></div> <div class="rc-scroll min-h-0 flex-1 overflow-auto p-4"><div class="flex flex-col gap-4"><div class="rounded-md border border-rc-gray-650 p-3">`);
+    if (!callSegments().length) {
+      $$renderer2.push("<!--[1-->");
+      $$renderer2.push(`<div class="text-sm text-rc-gray-300">No latency events were found on this call.</div>`);
+    } else if (viewportStartMs == null || viewportEndMs == null) {
+      $$renderer2.push("<!--[2-->");
+      $$renderer2.push(`<div class="text-sm text-rc-gray-300">Preparing timeline…</div>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+      $$renderer2.push(`<div class="grid grid-cols-[140px_minmax(0,1fr)] gap-x-3"><div class="flex flex-col"><div class="h-8"></div> <!--[-->`);
+      const each_array = ensure_array_like(timelineRows());
+      for (let rowIndex = 0, $$length = each_array.length; rowIndex < $$length; rowIndex++) {
+        let row = each_array[rowIndex];
+        $$renderer2.push(`<div class="flex items-center text-xs text-rc-gray-300"${attr_style(`height:${TIMELINE_ROW_HEIGHT_PX}px;margin-top:${rowIndex === 0 ? 0 : TIMELINE_ROW_GAP_PX}px;`)}>${escape_html(row.label)}</div>`);
+      }
+      $$renderer2.push(`<!--]--> <div class="flex items-center text-xs text-rc-gray-300"${attr_style(`height:${humanSpeechBubbleLaneHeightPx()}px;margin-top:${traceRowsToBubbleGapPx()}px;`)}>Human</div> `);
+      if (waveformRowVisible()) {
+        $$renderer2.push("<!--[0-->");
+        $$renderer2.push(`<div class="flex items-center text-xs text-rc-gray-300"${attr_style(`height:${WAVEFORM_ROW_HEIGHT_PX}px;margin-top:${TIMELINE_ROW_GAP_PX}px;`)}>Waveform</div>`);
+      } else {
+        $$renderer2.push("<!--[-1-->");
+      }
+      $$renderer2.push(`<!--]--></div> <div class="relative"><div class="pointer-events-none absolute inset-0 z-10 overflow-hidden"><!--[-->`);
+      const each_array_1 = ensure_array_like(speechBubbles());
+      for (let $$index_1 = 0, $$length = each_array_1.length; $$index_1 < $$length; $$index_1++) {
+        let bubble = each_array_1[$$index_1];
+        $$renderer2.push(`<div class="absolute -translate-x-1/2 border-l border-rc-gray-300/40"${attr_style(speechBubbleLineStyle(bubble))}></div>`);
+      }
+      $$renderer2.push(`<!--]--> <!--[-->`);
+      const each_array_2 = ensure_array_like(guideLines());
+      for (let $$index_2 = 0, $$length = each_array_2.length; $$index_2 < $$length; $$index_2++) {
+        let guide = each_array_2[$$index_2];
+        $$renderer2.push(`<div class="absolute -translate-x-1/2 border-l border-dashed"${attr_style(guideLineStyle(guide))}></div>`);
+      }
+      $$renderer2.push(`<!--]--> `);
+      if (timelineOriginLine()) {
+        $$renderer2.push("<!--[0-->");
+        $$renderer2.push(`<div class="absolute border-l border-rc-gray-200/80"${attr_style(timelineOriginLineStyle(timelineOriginLine()))}></div>`);
+      } else {
+        $$renderer2.push("<!--[-1-->");
+      }
+      $$renderer2.push(`<!--]--> `);
+      if (playbackCursor()) {
+        $$renderer2.push("<!--[0-->");
+        $$renderer2.push(`<div class="absolute -translate-x-1/2 border-l-2 border-rc-green-200/90"${attr_style(`left:${playbackCursor().leftPercent}%;top:${playbackCursor().topPx}px;height:${playbackCursor().heightPx}px;`)}></div> <div class="absolute h-2 w-2 -translate-x-1/2 rounded-full bg-rc-green-200"${attr_style(`left:${playbackCursor().leftPercent}%;top:${playbackCursor().topPx - 4}px;`)}></div>`);
+      } else {
+        $$renderer2.push("<!--[-1-->");
+      }
+      $$renderer2.push(`<!--]--></div> <div class="relative z-0 h-8 overflow-hidden rounded-t border border-b-0 border-rc-gray-700/60"><!--[-->`);
+      const each_array_3 = ensure_array_like(visibleTicks());
+      for (let $$index_3 = 0, $$length = each_array_3.length; $$index_3 < $$length; $$index_3++) {
+        let tick = each_array_3[$$index_3];
+        $$renderer2.push(`<div class="absolute inset-y-0 w-px bg-rc-gray-700/70"${attr_style(`left:${tick.leftPercent}%;`)}></div> <div${attr_class(clsx(tickLabelClass(tick)))}${attr_style(`left:${tick.leftPercent}%;`)}>${escape_html(tick.label)}</div>`);
+      }
+      $$renderer2.push(`<!--]--></div> <!--[-->`);
+      const each_array_4 = ensure_array_like(timelineRows());
+      for (let rowIndex = 0, $$length = each_array_4.length; rowIndex < $$length; rowIndex++) {
+        let row = each_array_4[rowIndex];
+        $$renderer2.push(`<div class="relative z-0 overflow-hidden border-x border-t border-rc-gray-700/60"${attr_style(`height:${TIMELINE_ROW_HEIGHT_PX}px;margin-top:${rowIndex === 0 ? 0 : TIMELINE_ROW_GAP_PX}px;`)}><!--[-->`);
+        const each_array_5 = ensure_array_like(visibleTicks());
+        for (let $$index_4 = 0, $$length2 = each_array_5.length; $$index_4 < $$length2; $$index_4++) {
+          let tick = each_array_5[$$index_4];
+          $$renderer2.push(`<div class="absolute inset-y-0 w-px bg-rc-gray-700/60"${attr_style(`left:${tick.leftPercent}%;`)}></div>`);
+        }
+        $$renderer2.push(`<!--]--> <!--[-->`);
+        const each_array_6 = ensure_array_like(row.segments);
+        for (let $$index_5 = 0, $$length2 = each_array_6.length; $$index_5 < $$length2; $$index_5++) {
+          let segment = each_array_6[$$index_5];
+          const style = segmentStyle(segment);
+          const text = segmentDisplayText(segment);
+          if (style) {
+            $$renderer2.push("<!--[0-->");
+            $$renderer2.push(`<div${attr_class(clsx(segmentClass(segment)))}${attr_style(style)}>`);
+            if (text) {
+              $$renderer2.push("<!--[0-->");
+              $$renderer2.push(`<span class="block truncate">${escape_html(text)}</span>`);
+            } else {
+              $$renderer2.push("<!--[-1-->");
+            }
+            $$renderer2.push(`<!--]--></div>`);
+          } else {
+            $$renderer2.push("<!--[-1-->");
+          }
+          $$renderer2.push(`<!--]-->`);
+        }
+        $$renderer2.push(`<!--]--></div>`);
+      }
+      $$renderer2.push(`<!--]--> <div${attr_class("relative z-0 overflow-hidden border-x border-t border-rc-gray-700/60", void 0, {
+        "rounded-b": !waveformRowVisible(),
+        "border-b": !waveformRowVisible()
+      })}${attr_style(`height:${speechBubbleAreaHeightPx()}px;margin-top:${traceRowsToBubbleGapPx()}px;`)}><div class="absolute inset-x-0 top-0 border-b border-rc-gray-700/50"${attr_style(`height:${humanSpeechBubbleLaneHeightPx()}px;`)}></div> <!--[-->`);
+      const each_array_7 = ensure_array_like(visibleTicks());
+      for (let $$index_7 = 0, $$length = each_array_7.length; $$index_7 < $$length; $$index_7++) {
+        let tick = each_array_7[$$index_7];
+        $$renderer2.push(`<div class="absolute inset-y-0 w-px bg-rc-gray-700/45"${attr_style(`left:${tick.leftPercent}%;`)}></div>`);
+      }
+      $$renderer2.push(`<!--]--> <!--[-->`);
+      const each_array_8 = ensure_array_like(speechBubbles());
+      for (let $$index_8 = 0, $$length = each_array_8.length; $$index_8 < $$length; $$index_8++) {
+        let bubble = each_array_8[$$index_8];
+        $$renderer2.push(`<div${attr_class(clsx(speechBubbleClass(bubble)))}${attr_style(speechBubbleStyle(bubble))}>${escape_html(bubble.text)}</div>`);
+      }
+      $$renderer2.push(`<!--]--></div> `);
+      if (waveformRowVisible()) {
+        $$renderer2.push("<!--[0-->");
+        $$renderer2.push(`<div class="relative z-0 overflow-hidden rounded-b border-x border-b border-t border-rc-gray-700/60"${attr_style(`height:${WAVEFORM_ROW_HEIGHT_PX}px;margin-top:${TIMELINE_ROW_GAP_PX}px;`)}>`);
+        if (waveformError) {
+          $$renderer2.push("<!--[1-->");
+          $$renderer2.push(`<div class="absolute inset-0 flex items-center justify-center px-4 text-sm text-red-300">Failed to decode waveform: ${escape_html(waveformError)}</div>`);
+        } else {
+          $$renderer2.push("<!--[-1-->");
+          $$renderer2.push(`<canvas class="absolute inset-0 h-full w-full"></canvas>`);
+        }
+        $$renderer2.push(`<!--]--> <!--[-->`);
+        const each_array_9 = ensure_array_like(visibleTicks());
+        for (let $$index_9 = 0, $$length = each_array_9.length; $$index_9 < $$length; $$index_9++) {
+          let tick = each_array_9[$$index_9];
+          $$renderer2.push(`<div class="absolute inset-y-0 w-px bg-rc-gray-700/60"${attr_style(`left:${tick.leftPercent}%;`)}></div>`);
+        }
+        $$renderer2.push(`<!--]--></div>`);
+      } else {
+        $$renderer2.push("<!--[-1-->");
+      }
+      $$renderer2.push(`<!--]--></div></div>`);
+    }
+    $$renderer2.push(`<!--]--></div></div></div></div> `);
+    {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]--> `);
+    {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]-->`);
+  });
+}
+
+export { _page as default };
+//# sourceMappingURL=_page.svelte.js-tdUdTo4m.js.map