@recombine-ai/bosun 0.10.1 → 0.11.2

package/build/server/chunks/{_page.svelte-GaxktsuT.js → _page.svelte-C_S_qUgZ.js}

@@ -1,9 +1,10 @@
 import { j as escape_html, l as derived, n as ensure_array_like, q as attr_style, o as attr_class, az as clsx } from './index-CSpGrMM2.js';
 import { o as onDestroy } from './index-server-DsYEXu5n.js';
 import { p as page } from './index2-DO4B3D-P.js';
-import { B as Button } from './Button-Dsy3QY7B.js';
-import { g as getPersistedTelescopeSourceId } from './source-selection-eA--VEKo.js';
+import { B as Button } from './Button-BLigKkGG.js';
+import { g as getPersistedTelescopeSourceId, T as TelescopeClient } from './source-selection-CcN1cgXc.js';
 import { b as buildResponseLatencySpans, f as findResponseLatencyUserTurn, R as RESPONSE_LATENCY_THRESHOLD_MS } from './latency--f3JYIRg.js';
+import { g as getConversationViewMemory, c as conversationViewMemoryKey } from './conversation-view-memory-BZguFlTt.js';
 import './state.svelte-DT7cgvTK.js';
 import './root-CDJwhpIB.js';
 import './events-BQ65tUJo.js';
@@ -23,6 +24,8 @@ function _page($$renderer, $$props) {
     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",
@@ -223,26 +226,65 @@ function _page($$renderer, $$props) {
       }
     ];
     const SPAN_RULE_BY_START = new Map(SPAN_RULES.map((rule) => [rule.startEventType, rule]));
-    getPersistedTelescopeSourceId() ?? "";
-    let traces = [];
-    let conversationTraces = [];
-    let recording = {
-      exists: false,
-      alignmentOffsetMs: 0
-    };
+    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 playbackPositionMs = 0;
+    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 = 1;
+    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) {
@@ -250,20 +292,31 @@ function _page($$renderer, $$props) {
         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 playbackSpeechBySegmentId = derived(() => buildPlaybackSpeechBySegmentId(callSegments()));
-    const timelineSegments = derived(() => callSegments().map((segment) => {
-      const speech = playbackSpeechBySegmentId().get(segment.id);
-      if (!speech || segment.row !== "Playback" || segment.durationMs <= 0) return segment;
-      return {
-        ...segment,
-        speechText: speech.text,
-        speechTraceLabel: speech.traceLabel
-      };
-    }));
+    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()) {
@@ -285,7 +338,8 @@ function _page($$renderer, $$props) {
     const waveformRowHeightPx = derived(() => waveformRowVisible() ? TIMELINE_ROW_GAP_PX + WAVEFORM_ROW_HEIGHT_PX : 0);
     const guideLines = derived(() => buildGuideLines(timelineRows()));
     const recordingStartMs = derived(() => {
-      return null;
+      if (!waveform) return null;
+      return timelineOriginMs() + recording.alignmentOffsetMs;
     });
     const timelinePlotHeightPx = derived(() => TIMELINE_RULER_HEIGHT_PX + timelineRowsHeightPx() + traceRowsToBubbleGapPx() + speechBubbleAreaHeightPx() + waveformRowHeightPx());
     const playbackAbsoluteMs = derived(() => {
@@ -322,6 +376,10 @@ function _page($$renderer, $$props) {
         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 };
@@ -347,7 +405,39 @@ function _page($$renderer, $$props) {
       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();
     });
@@ -377,7 +467,7 @@ function _page($$renderer, $$props) {
       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 (!Number.isFinite(value)) return "0 ms";
+      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`;
@@ -677,21 +767,20 @@ function _page($$renderer, $$props) {
     function isFinalSttLatencyTrace(trace) {
       return trace.eventType === "stt.final" || trace.eventType === "stt.final_transcript";
     }
-    function cleanBubbleText(value) {
+    function bubbleText(value) {
       const text = normalizeNonEmptyString(value);
       if (!text) return null;
-      const cleaned = text.replace(/<break\b[^>]*\/?>/gi, " ").replace(/<[^>]+>/g, " ").replace(/\s+/g, " ").trim();
-      return cleaned || null;
+      return text.replace(/\s+/g, " ").trim() || null;
     }
     function latencyTranscriptText(trace) {
       const payload = latencyPayload(trace);
-      const text = cleanBubbleText(payload.text) ?? cleanBubbleText(payload.transcript) ?? cleanBubbleText(payload.finalTranscript) ?? cleanBubbleText(payload.final_transcript) ?? cleanBubbleText(payload.message);
+      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 = cleanBubbleText(alternative.text);
+          const alternativeText = bubbleText(alternative.text);
           if (alternativeText) return alternativeText;
         }
       }
@@ -747,13 +836,11 @@ function _page($$renderer, $$props) {
       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 findPlaybackSegmentForAgentTrace(trace, playbackSegments, usedSegmentIds) {
-      const traceTime = ms(trace.createdAt);
-      if (traceTime == null) return null;
+    function findPlaybackSegmentForResponse(responseTime, playbackSegments, usedSegmentIds) {
       const candidates = playbackSegments.filter((segment) => {
         if (usedSegmentIds.has(segment.id)) return false;
-        return segment.end >= traceTime - SPEECH_BUBBLE_AGENT_PLAYBACK_MATCH_WINDOW_MS && segment.start <= traceTime + SPEECH_BUBBLE_AGENT_PLAYBACK_MATCH_WINDOW_MS;
-      }).sort((a, b) => segmentDistanceFromTime(a, traceTime) - segmentDistanceFromTime(b, traceTime));
+        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() {
@@ -768,6 +855,85 @@ function _page($$renderer, $$props) {
       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" && trace.name === "main" && 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 ?? "?"}`;
     }
@@ -776,7 +942,7 @@ function _page($$renderer, $$props) {
         if (trace.eventType !== "tts.text.first_sent" && trace.eventType !== "tts.text.completed") {
           return [];
         }
-        const text = cleanBubbleText(latencyText(trace));
+        const text = bubbleText(latencyText(trace));
         return text ? [{ trace, text }] : [];
       });
     }
@@ -789,11 +955,11 @@ function _page($$renderer, $$props) {
       }).sort((a, b) => Math.abs(a.trace.atMs - playbackSegment.start) - Math.abs(b.trace.atMs - playbackSegment.start));
       return candidates[0] ?? null;
     }
-    function buildPlaybackSpeechBySegmentId(inputSegments) {
-      const built = /* @__PURE__ */ new Map();
+    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 usedPlaybackSegmentIds = /* @__PURE__ */ new Set();
-      const usedAgentTraceIds = /* @__PURE__ */ new Set();
+      const usedAgentPlaybackSegmentIds = /* @__PURE__ */ new Set();
+      const usedResponseIds = /* @__PURE__ */ new Set();
       const usedTtsTextTraceIds = /* @__PURE__ */ new Set();
       const ttsTextEvents = buildTtsTextEvents();
       let previousPlaybackEnd = callStartTime();
@@ -801,35 +967,71 @@ function _page($$renderer, $$props) {
         const ttsText = findTtsTextForPlayback(playbackSegment, ttsTextEvents, usedTtsTextTraceIds, previousPlaybackEnd);
         previousPlaybackEnd = Math.max(previousPlaybackEnd, playbackSegment.end);
         if (!ttsText) continue;
-        usedPlaybackSegmentIds.add(playbackSegment.id);
         usedTtsTextTraceIds.add(traceKey(ttsText.trace));
-        built.set(playbackSegment.id, { text: ttsText.text, traceLabel: describeTrace(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 text = cleanBubbleText(agentTrace.content);
-        if (!text) continue;
-        const playbackSegment = findPlaybackSegmentForSpan(span, playbackSegments, usedPlaybackSegmentIds);
+        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;
-        usedPlaybackSegmentIds.add(playbackSegment.id);
-        usedAgentTraceIds.add(conversationalTraceKey(agentTrace));
-        built.set(playbackSegment.id, { text, traceLabel: describeTrace(agentTrace) });
+        usedAgentPlaybackSegmentIds.add(playbackSegment.id);
+        usedResponseIds.add(response.id);
+        bySegmentId.set(playbackSegment.id, {
+          text: response.text,
+          fullText: response.fullText,
+          traceLabel: response.traceLabel
+        });
       }
-      const agentTraces = conversationTraces.filter(isAgentConversationalTrace).sort(compareConversationTraces);
-      for (const agentTrace of agentTraces) {
-        const traceKey2 = conversationalTraceKey(agentTrace);
-        if (usedAgentTraceIds.has(traceKey2)) continue;
-        const text = cleanBubbleText(agentTrace.content);
-        if (!text) continue;
-        const playbackSegment = findPlaybackSegmentForAgentTrace(agentTrace, playbackSegments, usedPlaybackSegmentIds);
+      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;
-        usedPlaybackSegmentIds.add(playbackSegment.id);
-        usedAgentTraceIds.add(traceKey2);
-        built.set(playbackSegment.id, { text, traceLabel: describeTrace(agentTrace) });
+        usedAgentPlaybackSegmentIds.add(playbackSegment.id);
+        usedResponseIds.add(response.id);
+        bySegmentId.set(playbackSegment.id, {
+          text: response.text,
+          fullText: response.fullText,
+          traceLabel: response.traceLabel
+        });
       }
-      return built;
+      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 = [];
@@ -862,10 +1064,10 @@ function _page($$renderer, $$props) {
         if (bubble.role !== role) continue;
         maxLevel = Math.max(maxLevel, bubble.level);
       }
-      return Math.max(1, maxLevel + 1);
+      return maxLevel + 1;
     }
     function speechBubbleLaneHeightPx(levelCount) {
-      return Math.max(1, levelCount) * SPEECH_BUBBLE_LEVEL_HEIGHT_PX;
+      return Math.max(0, levelCount) * SPEECH_BUBBLE_LEVEL_HEIGHT_PX;
     }
     function compactSpeechBubbleLayouts(bubbles) {
       const bubbleAreaTopPx = speechBubbleAreaTopPx();
@@ -914,6 +1116,7 @@ function _page($$renderer, $$props) {
         explain: input.explain ?? null,
         text: input.text ?? null,
         speechText: null,
+        speechFullText: null,
         speechTraceLabel: null,
         traceLabel: input.traceLabel,
         eventMarker: input.eventMarker ?? null
@@ -981,6 +1184,41 @@ function _page($$renderer, $$props) {
       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;
     }
@@ -1037,7 +1275,44 @@ function _page($$renderer, $$props) {
       return `${base} -translate-x-1/2`;
     }
     function buildGuideLines(rows) {
-      return [];
+      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;
@@ -1064,6 +1339,18 @@ function _page($$renderer, $$props) {
       }
       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;
@@ -1071,6 +1358,15 @@ function _page($$renderer, $$props) {
       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) {
@@ -1089,6 +1385,7 @@ function _page($$renderer, $$props) {
       playbackStartedAtMs = null;
       playbackStartedAtContextTime = null;
       playbackPlaying = false;
+      stopPlaybackTicker();
       if (!source) return;
       source.onended = null;
       try {
@@ -1097,11 +1394,72 @@ function _page($$renderer, $$props) {
       }
       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() {
-      return;
+      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 ?? ""));
@@ -1112,6 +1470,7 @@ function _page($$renderer, $$props) {
       const originMs = timelineOriginMs();
       viewportStartMs = originMs;
       viewportEndMs = Math.max(originMs + 1e3, extent.max);
+      viewDirty = markDirty;
     }
     function clampViewport(startMs, endMs) {
       const extent = contentExtent();
@@ -1152,10 +1511,41 @@ function _page($$renderer, $$props) {
       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() {
-      return;
+      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()) {
@@ -1165,7 +1555,10 @@ function _page($$renderer, $$props) {
       $$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(`<!--]--> `);
@@ -1182,7 +1575,7 @@ function _page($$renderer, $$props) {
       disabled: uploadInFlight,
       onclick: () => fileInputEl?.click(),
       children: ($$renderer3) => {
-        $$renderer3.push(`<!---->${escape_html("Upload WAV")}`);
+        $$renderer3.push(`<!---->${escape_html(recording.exists ? "Replace WAV" : "Upload WAV")}`);
       },
       $$slots: { default: true }
     });
@@ -1190,7 +1583,7 @@ function _page($$renderer, $$props) {
     Button($$renderer2, {
       variant: "secondary",
       size: "small",
-      disabled: true,
+      disabled: !recording.exists,
       onclick: () => void togglePlayback(),
       children: ($$renderer3) => {
         $$renderer3.push(`<!---->${escape_html(playbackPlaying ? "Pause" : "Play")}`);
@@ -1234,7 +1627,7 @@ function _page($$renderer, $$props) {
     Button($$renderer2, {
       variant: "secondary",
       size: "small",
-      disabled: true,
+      disabled: !recording.exists || alignmentSaving,
       onclick: resetAlignment,
       children: ($$renderer3) => {
         $$renderer3.push(`<!---->Reset alignment`);
@@ -1257,19 +1650,31 @@ function _page($$renderer, $$props) {
       $$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">`);
@@ -1378,7 +1783,10 @@ function _page($$renderer, $$props) {
       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>`);
         }
@@ -1407,4 +1815,4 @@ function _page($$renderer, $$props) {
 }
 
 export { _page as default };
-//# sourceMappingURL=_page.svelte-GaxktsuT.js.map
+//# sourceMappingURL=_page.svelte-C_S_qUgZ.js.map