@memberjunction/ng-conversations 5.43.0 → 5.44.0

package/dist/lib/components/realtime/evidence-playback/realtime-evidence-playback.component.js

@@ -0,0 +1,397 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, Output, ViewChild, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+const _c0 = ["audio"];
+function RealtimeEvidencePlaybackComponent_Conditional_2_For_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElement(0, "span", 20);
+} if (rf & 2) {
+    const bar_r4 = ctx.$implicit;
+    const $index_r5 = ctx.$index;
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵstyleProp("height", bar_r4 * 100, "%");
+    i0.ɵɵclassProp("evp-bar--played", $index_r5 / ctx_r1.WaveformBars.length <= ctx_r1.Progress);
+} }
+function RealtimeEvidencePlaybackComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵdomElementStart(0, "audio", 7, 0);
+    i0.ɵɵdomListener("loadedmetadata", function RealtimeEvidencePlaybackComponent_Conditional_2_Template_audio_loadedmetadata_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnLoadedMetadata()); })("timeupdate", function RealtimeEvidencePlaybackComponent_Conditional_2_Template_audio_timeupdate_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnTimeUpdate()); })("play", function RealtimeEvidencePlaybackComponent_Conditional_2_Template_audio_play_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnPlay()); })("pause", function RealtimeEvidencePlaybackComponent_Conditional_2_Template_audio_pause_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnPause()); })("ended", function RealtimeEvidencePlaybackComponent_Conditional_2_Template_audio_ended_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnEnded()); });
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(2, "button", 8);
+    i0.ɵɵdomListener("click", function RealtimeEvidencePlaybackComponent_Conditional_2_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.TogglePlay()); });
+    i0.ɵɵdomElement(3, "i", 9);
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(4, "div", 10)(5, "div", 11, 1);
+    i0.ɵɵpipe(7, "number");
+    i0.ɵɵdomListener("click", function RealtimeEvidencePlaybackComponent_Conditional_2_Template_div_click_5_listener($event) { i0.ɵɵrestoreView(_r1); const track_r3 = i0.ɵɵreference(6); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnScrubberClick($event, track_r3)); })("keydown", function RealtimeEvidencePlaybackComponent_Conditional_2_Template_div_keydown_5_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnScrubberKeydown($event)); });
+    i0.ɵɵdomElementStart(8, "div", 12);
+    i0.ɵɵrepeaterCreate(9, RealtimeEvidencePlaybackComponent_Conditional_2_For_10_Template, 1, 4, "span", 13, i0.ɵɵrepeaterTrackByIndex);
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElement(11, "div", 14)(12, "div", 15);
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(13, "div", 16)(14, "span", 17);
+    i0.ɵɵtext(15);
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(16, "span", 18);
+    i0.ɵɵtext(17, "/");
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(18, "span", 19);
+    i0.ɵɵtext(19);
+    i0.ɵɵdomElementEnd()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵdomProperty("src", ctx_r1.AudioUrl);
+    i0.ɵɵadvance(2);
+    i0.ɵɵdomProperty("title", ctx_r1.IsPlaying ? "Pause" : "Play");
+    i0.ɵɵattribute("aria-label", ctx_r1.IsPlaying ? "Pause recording" : "Play recording");
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("fa-pause", ctx_r1.IsPlaying)("fa-play", !ctx_r1.IsPlaying);
+    i0.ɵɵadvance(2);
+    i0.ɵɵattribute("aria-valuemin", 0)("aria-valuemax", 100)("aria-valuenow", i0.ɵɵpipeBind2(7, 17, ctx_r1.Progress * 100, "1.0-0"))("aria-valuetext", ctx_r1.CurrentLabel + " of " + ctx_r1.DurationLabel);
+    i0.ɵɵadvance(4);
+    i0.ɵɵrepeater(ctx_r1.WaveformBars);
+    i0.ɵɵadvance(2);
+    i0.ɵɵstyleProp("width", ctx_r1.Progress * 100, "%");
+    i0.ɵɵadvance();
+    i0.ɵɵstyleProp("left", ctx_r1.Progress * 100, "%");
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(ctx_r1.CurrentLabel);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(ctx_r1.DurationLabel);
+} }
+function RealtimeEvidencePlaybackComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "div", 4);
+    i0.ɵɵdomElement(1, "i", 21);
+    i0.ɵɵdomElementStart(2, "span");
+    i0.ɵɵtext(3, "No audio recording is available for this session.");
+    i0.ɵɵdomElementEnd()();
+} }
+function RealtimeEvidencePlaybackComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "div", 6);
+    i0.ɵɵdomElement(1, "i", 22);
+    i0.ɵɵdomElementStart(2, "p");
+    i0.ɵɵtext(3, "No transcript turns to show.");
+    i0.ɵɵdomElementEnd()();
+} }
+function RealtimeEvidencePlaybackComponent_Conditional_6_For_1_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵdomElementStart(0, "button", 24);
+    i0.ɵɵdomListener("click", function RealtimeEvidencePlaybackComponent_Conditional_6_For_1_Template_button_click_0_listener() { const turn_r7 = i0.ɵɵrestoreView(_r6).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.SeekToTurn(turn_r7)); });
+    i0.ɵɵdomElementStart(1, "div", 25)(2, "span", 26);
+    i0.ɵɵtext(3);
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(4, "span", 27);
+    i0.ɵɵtext(5);
+    i0.ɵɵdomElementEnd()();
+    i0.ɵɵdomElementStart(6, "p", 28);
+    i0.ɵɵtext(7);
+    i0.ɵɵdomElementEnd()();
+} if (rf & 2) {
+    const turn_r7 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassProp("evp-turn--user", ctx_r1.IsUserTurn(turn_r7))("evp-turn--agent", !ctx_r1.IsUserTurn(turn_r7))("evp-turn--active", ctx_r1.IsTurnActive(turn_r7));
+    i0.ɵɵattribute("aria-label", ctx_r1.SpeakerLabel(turn_r7) + " at " + ctx_r1.TurnTimestamp(turn_r7) + ": " + turn_r7.Message)("aria-current", ctx_r1.IsTurnActive(turn_r7) ? "true" : null);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(ctx_r1.SpeakerLabel(turn_r7));
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r1.TurnTimestamp(turn_r7));
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(turn_r7.Message);
+} }
+function RealtimeEvidencePlaybackComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵrepeaterCreate(0, RealtimeEvidencePlaybackComponent_Conditional_6_For_1_Template, 8, 11, "button", 23, i0.ɵɵcomponentInstance().TrackByTurn, true);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵrepeater(ctx_r1.Turns);
+} }
+/** Number of bars rendered in the synthetic waveform behind the scrubber. */
+const WAVEFORM_BARS = 64;
+/**
+ * TIME-ALIGNED EVIDENCE PLAYBACK (`mj-realtime-evidence-playback`) — replays a realtime session's
+ * recorded audio next to its transcript, with the two kept in sync. The audio gets a custom transport
+ * (play/pause, a synthetic waveform scrubber, time/duration readout); the transcript is a scrollable
+ * list of clickable turns. Clicking a turn seeks the audio to that turn's start and plays; as the audio
+ * plays, the turn whose `[UtteranceStartMs, UtteranceEndMs]` window contains the playhead is highlighted.
+ *
+ * Timestamps come from {@link EvidencePlaybackTurn.UtteranceStartMs}; when a turn has none, the
+ * component falls back to (`__mj_CreatedAt` − {@link RecordingStartedAt}). Generic + Router-free: all
+ * state arrives via inputs, the only output is {@link TurnSeek}.
+ */
+export class RealtimeEvidencePlaybackComponent {
+    /** The session's transcript turns, in chronological order. */
+    set Turns(value) {
+        this._turns = value ?? [];
+        this.cdr.markForCheck();
+    }
+    get Turns() {
+        return this._turns;
+    }
+    _turns = [];
+    /** The recorded session audio URL, or `null` when no recording is available. */
+    set AudioUrl(value) {
+        if (value === this._audioUrl) {
+            return;
+        }
+        this._audioUrl = value;
+        this.CurrentMs = 0;
+        this.DurationMs = 0;
+        this.IsPlaying = false;
+        this.cdr.markForCheck();
+    }
+    get AudioUrl() {
+        return this._audioUrl;
+    }
+    _audioUrl = null;
+    /** When the recording started, used to derive a turn's offset when it has no `UtteranceStartMs`. */
+    RecordingStartedAt = null;
+    /** Display name of the agent — labels and colors AI turns. */
+    AgentName = 'Agent';
+    /** Emitted when the user clicks a transcript turn (to seek the audio to it). */
+    TurnSeek = new EventEmitter();
+    /** Current playhead position in ms (driven by the audio element's `timeupdate`). */
+    CurrentMs = 0;
+    /** Total audio duration in ms (set on `loadedmetadata`). */
+    DurationMs = 0;
+    /** Whether the audio is currently playing. */
+    IsPlaying = false;
+    /** The synthetic waveform bar heights (stable per AudioUrl). */
+    WaveformBars = this.buildWaveform();
+    audioRef;
+    cdr = inject(ChangeDetectorRef);
+    ngOnDestroy() {
+        this.audioRef?.nativeElement.pause();
+    }
+    /** The `<audio>` element, or `null` before the view initializes / when there's no audio. */
+    get audioEl() {
+        return this.audioRef?.nativeElement ?? null;
+    }
+    /** Playhead progress as a fraction (0..1), for the scrubber fill + waveform reveal. */
+    get Progress() {
+        return this.DurationMs > 0 ? Math.min(1, this.CurrentMs / this.DurationMs) : 0;
+    }
+    /** Toggles audio play / pause. */
+    TogglePlay() {
+        const el = this.audioEl;
+        if (!el) {
+            return;
+        }
+        if (el.paused) {
+            void el.play().catch(() => undefined);
+        }
+        else {
+            el.pause();
+        }
+    }
+    /** Seeks to a fraction of the duration (scrubber click / keyboard). */
+    SeekToFraction(fraction) {
+        const el = this.audioEl;
+        if (!el || this.DurationMs <= 0) {
+            return;
+        }
+        el.currentTime = (Math.max(0, Math.min(1, fraction)) * this.DurationMs) / 1000;
+        this.CurrentMs = el.currentTime * 1000;
+        this.cdr.markForCheck();
+    }
+    /** Scrubber pointer handler — maps the click X within the track to a seek fraction. */
+    OnScrubberClick(event, track) {
+        const rect = track.getBoundingClientRect();
+        if (rect.width <= 0) {
+            return;
+        }
+        this.SeekToFraction((event.clientX - rect.left) / rect.width);
+    }
+    /** Scrubber keyboard handler — arrows nudge ±5s, Home/End jump to ends, Space toggles play. */
+    OnScrubberKeydown(event) {
+        const stepMs = 5000;
+        switch (event.key) {
+            case 'ArrowRight':
+                event.preventDefault();
+                this.seekByMs(stepMs);
+                break;
+            case 'ArrowLeft':
+                event.preventDefault();
+                this.seekByMs(-stepMs);
+                break;
+            case 'Home':
+                event.preventDefault();
+                this.SeekToFraction(0);
+                break;
+            case 'End':
+                event.preventDefault();
+                this.SeekToFraction(1);
+                break;
+            case ' ':
+            case 'Enter':
+                event.preventDefault();
+                this.TogglePlay();
+                break;
+            default:
+                break;
+        }
+    }
+    /** Clicking a transcript turn → seek the audio to it, play, and emit {@link TurnSeek}. */
+    SeekToTurn(turn) {
+        const startMs = this.turnStartMs(turn);
+        const el = this.audioEl;
+        if (el && this.DurationMs > 0) {
+            el.currentTime = Math.max(0, startMs / 1000);
+            this.CurrentMs = startMs;
+            void el.play().catch(() => undefined);
+        }
+        this.TurnSeek.emit(turn);
+        this.cdr.markForCheck();
+    }
+    /** True when the playhead falls within this turn's utterance window (drives the active highlight). */
+    IsTurnActive(turn) {
+        if (!this.IsPlaying && this.CurrentMs === 0) {
+            return false;
+        }
+        const start = this.turnStartMs(turn);
+        const end = this.turnEndMs(turn);
+        return this.CurrentMs >= start && this.CurrentMs < end;
+    }
+    /** Whether a turn is from the human user (vs. the agent) — drives the speaker color + label. */
+    IsUserTurn(turn) {
+        return turn.Role === 'User';
+    }
+    /** The speaker label for a turn. */
+    SpeakerLabel(turn) {
+        return this.IsUserTurn(turn) ? 'You' : this.AgentName;
+    }
+    /** The mm:ss timestamp shown on a turn (its start offset within the recording). */
+    TurnTimestamp(turn) {
+        return this.formatMs(this.turnStartMs(turn));
+    }
+    /** mm:ss of the current playhead. */
+    get CurrentLabel() {
+        return this.formatMs(this.CurrentMs);
+    }
+    /** mm:ss of the total duration. */
+    get DurationLabel() {
+        return this.formatMs(this.DurationMs);
+    }
+    /** Stable `@for` track for the transcript. */
+    TrackByTurn(_index, turn) {
+        return turn.ID;
+    }
+    // ----- audio element event handlers (bound in the template) -------------------------------
+    /** `loadedmetadata` → capture the duration. */
+    OnLoadedMetadata() {
+        const el = this.audioEl;
+        this.DurationMs = el && Number.isFinite(el.duration) ? el.duration * 1000 : 0;
+        this.cdr.markForCheck();
+    }
+    /** `timeupdate` → advance the playhead + re-evaluate the active turn. */
+    OnTimeUpdate() {
+        const el = this.audioEl;
+        if (el) {
+            this.CurrentMs = el.currentTime * 1000;
+            this.cdr.markForCheck();
+        }
+    }
+    /** `play` / `pause` / `ended` → reflect the transport state. */
+    OnPlay() {
+        this.IsPlaying = true;
+        this.cdr.markForCheck();
+    }
+    OnPause() {
+        this.IsPlaying = false;
+        this.cdr.markForCheck();
+    }
+    OnEnded() {
+        this.IsPlaying = false;
+        this.cdr.markForCheck();
+    }
+    // ----- helpers ----------------------------------------------------------------------------
+    /** Nudges the playhead by `deltaMs`, clamped to the duration. */
+    seekByMs(deltaMs) {
+        if (this.DurationMs <= 0) {
+            return;
+        }
+        this.SeekToFraction((this.CurrentMs + deltaMs) / this.DurationMs);
+    }
+    /**
+     * A turn's start offset (ms) within the recording: prefer {@link EvidencePlaybackTurn.UtteranceStartMs};
+     * fall back to (`__mj_CreatedAt` − {@link RecordingStartedAt}); 0 when neither is available.
+     */
+    turnStartMs(turn) {
+        if (turn.UtteranceStartMs != null) {
+            return Math.max(0, turn.UtteranceStartMs);
+        }
+        if (this.RecordingStartedAt && turn.__mj_CreatedAt) {
+            return Math.max(0, turn.__mj_CreatedAt.getTime() - this.RecordingStartedAt.getTime());
+        }
+        return 0;
+    }
+    /**
+     * A turn's end offset (ms): prefer {@link EvidencePlaybackTurn.UtteranceEndMs}; otherwise the
+     * next turn's start; otherwise the recording duration (or start + a small window when duration is unknown).
+     */
+    turnEndMs(turn) {
+        if (turn.UtteranceEndMs != null) {
+            return Math.max(this.turnStartMs(turn), turn.UtteranceEndMs);
+        }
+        const idx = this._turns.indexOf(turn);
+        const next = idx >= 0 ? this._turns[idx + 1] : undefined;
+        if (next) {
+            return this.turnStartMs(next);
+        }
+        return this.DurationMs > 0 ? this.DurationMs : this.turnStartMs(turn) + 4000;
+    }
+    /** Formats a ms offset as mm:ss (clamped at 0). */
+    formatMs(ms) {
+        const total = Math.max(0, Math.floor(ms / 1000));
+        const minutes = Math.floor(total / 60);
+        const seconds = total % 60;
+        return `${minutes}:${seconds.toString().padStart(2, '0')}`;
+    }
+    /** Builds a stable pseudo-random waveform (deterministic, no per-render churn). */
+    buildWaveform() {
+        const bars = [];
+        for (let i = 0; i < WAVEFORM_BARS; i++) {
+            // A smooth, repeatable envelope — looks like audio without needing to decode any.
+            const base = Math.sin(i * 0.5) * 0.5 + 0.5;
+            const detail = Math.sin(i * 1.7) * 0.25 + 0.25;
+            bars.push(Math.max(0.12, Math.min(1, base * 0.7 + detail * 0.5)));
+        }
+        return bars;
+    }
+    static ɵfac = function RealtimeEvidencePlaybackComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || RealtimeEvidencePlaybackComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: RealtimeEvidencePlaybackComponent, selectors: [["mj-realtime-evidence-playback"]], viewQuery: function RealtimeEvidencePlaybackComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuery(_c0, 5);
+        } if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.audioRef = _t.first);
+        } }, inputs: { Turns: "Turns", AudioUrl: "AudioUrl", RecordingStartedAt: "RecordingStartedAt", AgentName: "AgentName" }, outputs: { TurnSeek: "TurnSeek" }, decls: 7, vars: 2, consts: [["audio", ""], ["track", ""], [1, "evp"], [1, "evp-player"], [1, "evp-noaudio"], ["role", "list", "aria-label", "Session transcript", 1, "evp-transcript"], [1, "evp-transcript-empty"], ["preload", "metadata", 3, "loadedmetadata", "timeupdate", "play", "pause", "ended", "src"], ["type", "button", 1, "evp-play", 3, "click", "title"], ["aria-hidden", "true", 1, "fa-solid"], [1, "evp-transport"], ["role", "slider", "tabindex", "0", "aria-label", "Seek through the recording", 1, "evp-scrubber", 3, "click", "keydown"], ["aria-hidden", "true", 1, "evp-waveform"], [1, "evp-bar", 3, "evp-bar--played", "height"], ["aria-hidden", "true", 1, "evp-progress"], ["aria-hidden", "true", 1, "evp-thumb"], [1, "evp-time"], [1, "evp-time__current"], [1, "evp-time__sep"], [1, "evp-time__total"], [1, "evp-bar"], ["aria-hidden", "true", 1, "fa-solid", "fa-microphone-slash"], ["aria-hidden", "true", 1, "fa-solid", "fa-comment-dots"], ["type", "button", "role", "listitem", "tabindex", "0", 1, "evp-turn", 3, "evp-turn--user", "evp-turn--agent", "evp-turn--active"], ["type", "button", "role", "listitem", "tabindex", "0", 1, "evp-turn", 3, "click"], [1, "evp-turn__meta"], [1, "evp-turn__speaker"], [1, "evp-turn__time"], [1, "evp-turn__text"]], template: function RealtimeEvidencePlaybackComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵdomElementStart(0, "div", 2)(1, "div", 3);
+            i0.ɵɵconditionalCreate(2, RealtimeEvidencePlaybackComponent_Conditional_2_Template, 20, 20)(3, RealtimeEvidencePlaybackComponent_Conditional_3_Template, 4, 0, "div", 4);
+            i0.ɵɵdomElementEnd();
+            i0.ɵɵdomElementStart(4, "div", 5);
+            i0.ɵɵconditionalCreate(5, RealtimeEvidencePlaybackComponent_Conditional_5_Template, 4, 0, "div", 6)(6, RealtimeEvidencePlaybackComponent_Conditional_6_Template, 2, 0);
+            i0.ɵɵdomElementEnd()();
+        } if (rf & 2) {
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.AudioUrl ? 2 : 3);
+            i0.ɵɵadvance(3);
+            i0.ɵɵconditional(ctx.Turns.length === 0 ? 5 : 6);
+        } }, dependencies: [CommonModule, i1.DecimalPipe], styles: ["[_nghost-%COMP%] {\n  display: block;\n  height: 100%;\n}\n\n.evp[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-height: 0;\n  background: var(--mj-bg-surface-sunken);\n}\n\n\n\n.evp-player[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex: 0 0 auto;\n  padding: 12px 14px;\n  border-bottom: 1px solid var(--mj-border-subtle);\n  background: var(--mj-bg-surface);\n}\n\n.evp-play[_ngcontent-%COMP%] {\n  flex: 0 0 auto;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 40px;\n  height: 40px;\n  border: none;\n  border-radius: var(--mj-radius-full, 50%);\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  cursor: pointer;\n  font-size: 0.9375rem;\n  transition: background 0.12s ease, transform 0.12s ease;\n\n  &:hover {\n    background: var(--mj-brand-primary-hover, var(--mj-brand-primary));\n  }\n\n  &:active {\n    transform: scale(0.94);\n  }\n\n  &:focus-visible {\n    outline: none;\n    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 35%, transparent);\n  }\n}\n\n.evp-transport[_ngcontent-%COMP%] {\n  flex: 1 1 auto;\n  min-width: 0;\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.evp-scrubber[_ngcontent-%COMP%] {\n  position: relative;\n  flex: 1 1 auto;\n  min-width: 0;\n  height: 36px;\n  cursor: pointer;\n  border-radius: var(--mj-radius-sm, 4px);\n\n  &:focus-visible {\n    outline: none;\n    box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-brand-primary) 35%, transparent);\n  }\n}\n\n.evp-waveform[_ngcontent-%COMP%] {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  gap: 2px;\n  height: 100%;\n  pointer-events: none;\n}\n\n.evp-bar[_ngcontent-%COMP%] {\n  flex: 1 1 auto;\n  min-width: 1px;\n  border-radius: 1px;\n  background: var(--mj-border-strong);\n  transition: background 0.1s ease;\n\n  &--played {\n    background: var(--mj-brand-primary);\n  }\n}\n\n.evp-progress[_ngcontent-%COMP%] {\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n  pointer-events: none;\n  border-radius: var(--mj-radius-sm, 4px) 0 0 var(--mj-radius-sm, 4px);\n}\n\n.evp-thumb[_ngcontent-%COMP%] {\n  position: absolute;\n  top: 50%;\n  width: 10px;\n  height: 10px;\n  border-radius: var(--mj-radius-full, 50%);\n  background: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n  transform: translate(-50%, -50%);\n  pointer-events: none;\n}\n\n.evp-time[_ngcontent-%COMP%] {\n  flex: 0 0 auto;\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  font-size: 0.75rem;\n  font-variant-numeric: tabular-nums;\n  color: var(--mj-text-secondary);\n\n  &__current {\n    color: var(--mj-text-primary);\n    font-weight: 600;\n  }\n\n  &__sep {\n    color: var(--mj-text-disabled);\n  }\n}\n\n.evp-noaudio[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 0.8125rem;\n  color: var(--mj-text-muted);\n\n  i {\n    color: var(--mj-text-disabled);\n  }\n}\n\n\n\n.evp-transcript[_ngcontent-%COMP%] {\n  flex: 1 1 auto;\n  min-height: 0;\n  overflow-y: auto;\n  padding: 8px;\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  scrollbar-width: thin;\n}\n\n.evp-transcript-empty[_ngcontent-%COMP%] {\n  flex: 1 1 auto;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  color: var(--mj-text-muted);\n  font-size: 0.8125rem;\n\n  i {\n    font-size: 1.75rem;\n    color: var(--mj-text-disabled);\n  }\n\n  p {\n    margin: 0;\n  }\n}\n\n.evp-turn[_ngcontent-%COMP%] {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  gap: 3px;\n  width: 100%;\n  margin: 0;\n  padding: 8px 10px 8px 14px;\n  border: none;\n  border-left: 3px solid transparent;\n  border-radius: var(--mj-radius-md, 6px);\n  background: transparent;\n  text-align: left;\n  font: inherit;\n  color: inherit;\n  cursor: pointer;\n  transition: background 0.12s ease, border-color 0.12s ease;\n\n  &:hover {\n    background: var(--mj-bg-surface-hover);\n  }\n\n  &:focus-visible {\n    outline: none;\n    box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n  }\n\n  &--active {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    border-left-color: var(--mj-brand-primary);\n  }\n\n  &__meta {\n    display: flex;\n    align-items: baseline;\n    gap: 8px;\n  }\n\n  &__speaker {\n    font-size: 0.75rem;\n    font-weight: 700;\n    letter-spacing: 0.01em;\n  }\n\n  &--user &__speaker {\n    color: var(--mj-status-info, var(--mj-brand-primary));\n  }\n\n  &--agent &__speaker {\n    color: var(--mj-brand-primary);\n  }\n\n  &__time {\n    font-size: 0.6875rem;\n    font-variant-numeric: tabular-nums;\n    color: var(--mj-text-muted);\n  }\n\n  &__text {\n    margin: 0;\n    font-size: 0.8125rem;\n    line-height: 1.45;\n    color: var(--mj-text-primary);\n    white-space: pre-wrap;\n    word-break: break-word;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .evp-play[_ngcontent-%COMP%], \n   .evp-bar[_ngcontent-%COMP%], \n   .evp-turn[_ngcontent-%COMP%] {\n    transition: none;\n  }\n}"], changeDetection: 0 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(RealtimeEvidencePlaybackComponent, [{
+        type: Component,
+        args: [{ standalone: true, selector: 'mj-realtime-evidence-playback', imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"evp\">\n  <!-- ---------- Audio transport ---------- -->\n  <div class=\"evp-player\">\n    @if (AudioUrl) {\n      <audio\n        #audio\n        [src]=\"AudioUrl\"\n        preload=\"metadata\"\n        (loadedmetadata)=\"OnLoadedMetadata()\"\n        (timeupdate)=\"OnTimeUpdate()\"\n        (play)=\"OnPlay()\"\n        (pause)=\"OnPause()\"\n        (ended)=\"OnEnded()\"\n      ></audio>\n\n      <button\n        type=\"button\"\n        class=\"evp-play\"\n        [attr.aria-label]=\"IsPlaying ? 'Pause recording' : 'Play recording'\"\n        [title]=\"IsPlaying ? 'Pause' : 'Play'\"\n        (click)=\"TogglePlay()\"\n      >\n        <i class=\"fa-solid\" [class.fa-pause]=\"IsPlaying\" [class.fa-play]=\"!IsPlaying\" aria-hidden=\"true\"></i>\n      </button>\n\n      <div class=\"evp-transport\">\n        <div\n          #track\n          class=\"evp-scrubber\"\n          role=\"slider\"\n          tabindex=\"0\"\n          aria-label=\"Seek through the recording\"\n          [attr.aria-valuemin]=\"0\"\n          [attr.aria-valuemax]=\"100\"\n          [attr.aria-valuenow]=\"(Progress * 100) | number: '1.0-0'\"\n          [attr.aria-valuetext]=\"CurrentLabel + ' of ' + DurationLabel\"\n          (click)=\"OnScrubberClick($event, track)\"\n          (keydown)=\"OnScrubberKeydown($event)\"\n        >\n          <div class=\"evp-waveform\" aria-hidden=\"true\">\n            @for (bar of WaveformBars; track $index) {\n              <span\n                class=\"evp-bar\"\n                [class.evp-bar--played]=\"($index / WaveformBars.length) <= Progress\"\n                [style.height.%]=\"bar * 100\"\n              ></span>\n            }\n          </div>\n          <div class=\"evp-progress\" [style.width.%]=\"Progress * 100\" aria-hidden=\"true\"></div>\n          <div class=\"evp-thumb\" [style.left.%]=\"Progress * 100\" aria-hidden=\"true\"></div>\n        </div>\n        <div class=\"evp-time\">\n          <span class=\"evp-time__current\">{{ CurrentLabel }}</span>\n          <span class=\"evp-time__sep\">/</span>\n          <span class=\"evp-time__total\">{{ DurationLabel }}</span>\n        </div>\n      </div>\n    } @else {\n      <div class=\"evp-noaudio\">\n        <i class=\"fa-solid fa-microphone-slash\" aria-hidden=\"true\"></i>\n        <span>No audio recording is available for this session.</span>\n      </div>\n    }\n  </div>\n\n  <!-- ---------- Transcript ---------- -->\n  <div class=\"evp-transcript\" role=\"list\" aria-label=\"Session transcript\">\n    @if (Turns.length === 0) {\n      <div class=\"evp-transcript-empty\">\n        <i class=\"fa-solid fa-comment-dots\" aria-hidden=\"true\"></i>\n        <p>No transcript turns to show.</p>\n      </div>\n    } @else {\n      @for (turn of Turns; track TrackByTurn($index, turn)) {\n        <button\n          type=\"button\"\n          class=\"evp-turn\"\n          role=\"listitem\"\n          tabindex=\"0\"\n          [class.evp-turn--user]=\"IsUserTurn(turn)\"\n          [class.evp-turn--agent]=\"!IsUserTurn(turn)\"\n          [class.evp-turn--active]=\"IsTurnActive(turn)\"\n          [attr.aria-label]=\"SpeakerLabel(turn) + ' at ' + TurnTimestamp(turn) + ': ' + turn.Message\"\n          [attr.aria-current]=\"IsTurnActive(turn) ? 'true' : null\"\n          (click)=\"SeekToTurn(turn)\"\n        >\n          <div class=\"evp-turn__meta\">\n            <span class=\"evp-turn__speaker\">{{ SpeakerLabel(turn) }}</span>\n            <span class=\"evp-turn__time\">{{ TurnTimestamp(turn) }}</span>\n          </div>\n          <p class=\"evp-turn__text\">{{ turn.Message }}</p>\n        </button>\n      }\n    }\n  </div>\n</div>\n", styles: [":host {\n  display: block;\n  height: 100%;\n}\n\n.evp {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-height: 0;\n  background: var(--mj-bg-surface-sunken);\n}\n\n/* ---------- Audio transport ---------- */\n.evp-player {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex: 0 0 auto;\n  padding: 12px 14px;\n  border-bottom: 1px solid var(--mj-border-subtle);\n  background: var(--mj-bg-surface);\n}\n\n.evp-play {\n  flex: 0 0 auto;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 40px;\n  height: 40px;\n  border: none;\n  border-radius: var(--mj-radius-full, 50%);\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  cursor: pointer;\n  font-size: 0.9375rem;\n  transition: background 0.12s ease, transform 0.12s ease;\n\n  &:hover {\n    background: var(--mj-brand-primary-hover, var(--mj-brand-primary));\n  }\n\n  &:active {\n    transform: scale(0.94);\n  }\n\n  &:focus-visible {\n    outline: none;\n    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 35%, transparent);\n  }\n}\n\n.evp-transport {\n  flex: 1 1 auto;\n  min-width: 0;\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.evp-scrubber {\n  position: relative;\n  flex: 1 1 auto;\n  min-width: 0;\n  height: 36px;\n  cursor: pointer;\n  border-radius: var(--mj-radius-sm, 4px);\n\n  &:focus-visible {\n    outline: none;\n    box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-brand-primary) 35%, transparent);\n  }\n}\n\n.evp-waveform {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  gap: 2px;\n  height: 100%;\n  pointer-events: none;\n}\n\n.evp-bar {\n  flex: 1 1 auto;\n  min-width: 1px;\n  border-radius: 1px;\n  background: var(--mj-border-strong);\n  transition: background 0.1s ease;\n\n  &--played {\n    background: var(--mj-brand-primary);\n  }\n}\n\n.evp-progress {\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n  pointer-events: none;\n  border-radius: var(--mj-radius-sm, 4px) 0 0 var(--mj-radius-sm, 4px);\n}\n\n.evp-thumb {\n  position: absolute;\n  top: 50%;\n  width: 10px;\n  height: 10px;\n  border-radius: var(--mj-radius-full, 50%);\n  background: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n  transform: translate(-50%, -50%);\n  pointer-events: none;\n}\n\n.evp-time {\n  flex: 0 0 auto;\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  font-size: 0.75rem;\n  font-variant-numeric: tabular-nums;\n  color: var(--mj-text-secondary);\n\n  &__current {\n    color: var(--mj-text-primary);\n    font-weight: 600;\n  }\n\n  &__sep {\n    color: var(--mj-text-disabled);\n  }\n}\n\n.evp-noaudio {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 0.8125rem;\n  color: var(--mj-text-muted);\n\n  i {\n    color: var(--mj-text-disabled);\n  }\n}\n\n/* ---------- Transcript ---------- */\n.evp-transcript {\n  flex: 1 1 auto;\n  min-height: 0;\n  overflow-y: auto;\n  padding: 8px;\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  scrollbar-width: thin;\n}\n\n.evp-transcript-empty {\n  flex: 1 1 auto;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  color: var(--mj-text-muted);\n  font-size: 0.8125rem;\n\n  i {\n    font-size: 1.75rem;\n    color: var(--mj-text-disabled);\n  }\n\n  p {\n    margin: 0;\n  }\n}\n\n.evp-turn {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  gap: 3px;\n  width: 100%;\n  margin: 0;\n  padding: 8px 10px 8px 14px;\n  border: none;\n  border-left: 3px solid transparent;\n  border-radius: var(--mj-radius-md, 6px);\n  background: transparent;\n  text-align: left;\n  font: inherit;\n  color: inherit;\n  cursor: pointer;\n  transition: background 0.12s ease, border-color 0.12s ease;\n\n  &:hover {\n    background: var(--mj-bg-surface-hover);\n  }\n\n  &:focus-visible {\n    outline: none;\n    box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n  }\n\n  &--active {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    border-left-color: var(--mj-brand-primary);\n  }\n\n  &__meta {\n    display: flex;\n    align-items: baseline;\n    gap: 8px;\n  }\n\n  &__speaker {\n    font-size: 0.75rem;\n    font-weight: 700;\n    letter-spacing: 0.01em;\n  }\n\n  &--user &__speaker {\n    color: var(--mj-status-info, var(--mj-brand-primary));\n  }\n\n  &--agent &__speaker {\n    color: var(--mj-brand-primary);\n  }\n\n  &__time {\n    font-size: 0.6875rem;\n    font-variant-numeric: tabular-nums;\n    color: var(--mj-text-muted);\n  }\n\n  &__text {\n    margin: 0;\n    font-size: 0.8125rem;\n    line-height: 1.45;\n    color: var(--mj-text-primary);\n    white-space: pre-wrap;\n    word-break: break-word;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .evp-play,\n  .evp-bar,\n  .evp-turn {\n    transition: none;\n  }\n}\n"] }]
+    }], null, { Turns: [{
+            type: Input
+        }], AudioUrl: [{
+            type: Input
+        }], RecordingStartedAt: [{
+            type: Input
+        }], AgentName: [{
+            type: Input
+        }], TurnSeek: [{
+            type: Output
+        }], audioRef: [{
+            type: ViewChild,
+            args: ['audio']
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(RealtimeEvidencePlaybackComponent, { className: "RealtimeEvidencePlaybackComponent", filePath: "src/lib/components/realtime/evidence-playback/realtime-evidence-playback.component.ts", lineNumber: 58 }); })();
+//# sourceMappingURL=realtime-evidence-playback.component.js.map

package/dist/lib/components/realtime/evidence-playback/realtime-evidence-playback.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"realtime-evidence-playback.component.js","sourceRoot":"","sources":["../../../../../src/lib/components/realtime/evidence-playback/realtime-evidence-playback.component.ts","../../../../../src/lib/components/realtime/evidence-playback/realtime-evidence-playback.component.html"],"names":[],"mappings":"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","sourcesContent":["import {\n  ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, OnDestroy,\n  Output, ViewChild, inject\n} from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\n/** Number of bars rendered in the synthetic waveform behind the scrubber. */\nconst WAVEFORM_BARS = 64;\n\n/**\n * The MINIMAL structural shape of a transcript turn this player needs — exactly the fields it reads\n * for the click-to-seek transcript and the playhead-sync highlight. Deliberately NOT the full\n * `MJConversationDetailEntity`: that keeps the player reusable by ANY caller that can supply these\n * fields (the in-conversation session-review overlay passes its lighter `RealtimeSessionReviewTurn`;\n * the Realtime Recordings dashboard passes full `MJConversationDetailEntity` rows — both satisfy this\n * widened shape structurally).\n *\n * Field unions/nullability are intentionally WIDER than the generated entity so an\n * `MJConversationDetailEntity[]` remains assignable here.\n */\nexport interface EvidencePlaybackTurn {\n  /** Stable identity for the `@for` track. */\n  ID: string;\n  /** Speaker. The player only distinguishes `'User'` (human) from everything else (the agent). */\n  Role: 'User' | 'AI' | 'Assistant' | 'Error' | string;\n  /** The transcript text shown on the turn. */\n  Message: string | null;\n  /** Persisted turn time — fallback offset origin when the turn has no `UtteranceStartMs`. */\n  __mj_CreatedAt: Date | null;\n  /**\n   * Precise media-relative start (ms from recording t0). `null`/absent when the driver supplied no\n   * timing — the player falls back to (`__mj_CreatedAt` − `RecordingStartedAt`).\n   */\n  UtteranceStartMs?: number | null;\n  /** Precise media-relative end (ms from recording t0). `null`/absent → derived from the next turn / duration. */\n  UtteranceEndMs?: number | null;\n}\n\n/**\n * TIME-ALIGNED EVIDENCE PLAYBACK (`mj-realtime-evidence-playback`) — replays a realtime session's\n * recorded audio next to its transcript, with the two kept in sync. The audio gets a custom transport\n * (play/pause, a synthetic waveform scrubber, time/duration readout); the transcript is a scrollable\n * list of clickable turns. Clicking a turn seeks the audio to that turn's start and plays; as the audio\n * plays, the turn whose `[UtteranceStartMs, UtteranceEndMs]` window contains the playhead is highlighted.\n *\n * Timestamps come from {@link EvidencePlaybackTurn.UtteranceStartMs}; when a turn has none, the\n * component falls back to (`__mj_CreatedAt` − {@link RecordingStartedAt}). Generic + Router-free: all\n * state arrives via inputs, the only output is {@link TurnSeek}.\n */\n@Component({\n  standalone: true,\n  selector: 'mj-realtime-evidence-playback',\n  imports: [CommonModule],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  templateUrl: './realtime-evidence-playback.component.html',\n  styleUrls: ['./realtime-evidence-playback.component.scss'],\n})\nexport class RealtimeEvidencePlaybackComponent implements OnDestroy {\n  /** The session's transcript turns, in chronological order. */\n  @Input()\n  set Turns(value: EvidencePlaybackTurn[] | null) {\n    this._turns = value ?? [];\n    this.cdr.markForCheck();\n  }\n  get Turns(): EvidencePlaybackTurn[] {\n    return this._turns;\n  }\n  private _turns: EvidencePlaybackTurn[] = [];\n\n  /** The recorded session audio URL, or `null` when no recording is available. */\n  @Input()\n  set AudioUrl(value: string | null) {\n    if (value === this._audioUrl) {\n      return;\n    }\n    this._audioUrl = value;\n    this.CurrentMs = 0;\n    this.DurationMs = 0;\n    this.IsPlaying = false;\n    this.cdr.markForCheck();\n  }\n  get AudioUrl(): string | null {\n    return this._audioUrl;\n  }\n  private _audioUrl: string | null = null;\n\n  /** When the recording started, used to derive a turn's offset when it has no `UtteranceStartMs`. */\n  @Input() RecordingStartedAt: Date | null = null;\n\n  /** Display name of the agent — labels and colors AI turns. */\n  @Input() AgentName = 'Agent';\n\n  /** Emitted when the user clicks a transcript turn (to seek the audio to it). */\n  @Output() TurnSeek = new EventEmitter<EvidencePlaybackTurn>();\n\n  /** Current playhead position in ms (driven by the audio element's `timeupdate`). */\n  public CurrentMs = 0;\n  /** Total audio duration in ms (set on `loadedmetadata`). */\n  public DurationMs = 0;\n  /** Whether the audio is currently playing. */\n  public IsPlaying = false;\n\n  /** The synthetic waveform bar heights (stable per AudioUrl). */\n  public readonly WaveformBars: number[] = this.buildWaveform();\n\n  @ViewChild('audio') private audioRef?: ElementRef<HTMLAudioElement>;\n\n  private readonly cdr = inject(ChangeDetectorRef);\n\n  ngOnDestroy(): void {\n    this.audioRef?.nativeElement.pause();\n  }\n\n  /** The `<audio>` element, or `null` before the view initializes / when there's no audio. */\n  private get audioEl(): HTMLAudioElement | null {\n    return this.audioRef?.nativeElement ?? null;\n  }\n\n  /** Playhead progress as a fraction (0..1), for the scrubber fill + waveform reveal. */\n  public get Progress(): number {\n    return this.DurationMs > 0 ? Math.min(1, this.CurrentMs / this.DurationMs) : 0;\n  }\n\n  /** Toggles audio play / pause. */\n  public TogglePlay(): void {\n    const el = this.audioEl;\n    if (!el) {\n      return;\n    }\n    if (el.paused) {\n      void el.play().catch(() => undefined);\n    } else {\n      el.pause();\n    }\n  }\n\n  /** Seeks to a fraction of the duration (scrubber click / keyboard). */\n  public SeekToFraction(fraction: number): void {\n    const el = this.audioEl;\n    if (!el || this.DurationMs <= 0) {\n      return;\n    }\n    el.currentTime = (Math.max(0, Math.min(1, fraction)) * this.DurationMs) / 1000;\n    this.CurrentMs = el.currentTime * 1000;\n    this.cdr.markForCheck();\n  }\n\n  /** Scrubber pointer handler — maps the click X within the track to a seek fraction. */\n  public OnScrubberClick(event: MouseEvent, track: HTMLElement): void {\n    const rect = track.getBoundingClientRect();\n    if (rect.width <= 0) {\n      return;\n    }\n    this.SeekToFraction((event.clientX - rect.left) / rect.width);\n  }\n\n  /** Scrubber keyboard handler — arrows nudge ±5s, Home/End jump to ends, Space toggles play. */\n  public OnScrubberKeydown(event: KeyboardEvent): void {\n    const stepMs = 5000;\n    switch (event.key) {\n      case 'ArrowRight':\n        event.preventDefault();\n        this.seekByMs(stepMs);\n        break;\n      case 'ArrowLeft':\n        event.preventDefault();\n        this.seekByMs(-stepMs);\n        break;\n      case 'Home':\n        event.preventDefault();\n        this.SeekToFraction(0);\n        break;\n      case 'End':\n        event.preventDefault();\n        this.SeekToFraction(1);\n        break;\n      case ' ':\n      case 'Enter':\n        event.preventDefault();\n        this.TogglePlay();\n        break;\n      default:\n        break;\n    }\n  }\n\n  /** Clicking a transcript turn → seek the audio to it, play, and emit {@link TurnSeek}. */\n  public SeekToTurn(turn: EvidencePlaybackTurn): void {\n    const startMs = this.turnStartMs(turn);\n    const el = this.audioEl;\n    if (el && this.DurationMs > 0) {\n      el.currentTime = Math.max(0, startMs / 1000);\n      this.CurrentMs = startMs;\n      void el.play().catch(() => undefined);\n    }\n    this.TurnSeek.emit(turn);\n    this.cdr.markForCheck();\n  }\n\n  /** True when the playhead falls within this turn's utterance window (drives the active highlight). */\n  public IsTurnActive(turn: EvidencePlaybackTurn): boolean {\n    if (!this.IsPlaying && this.CurrentMs === 0) {\n      return false;\n    }\n    const start = this.turnStartMs(turn);\n    const end = this.turnEndMs(turn);\n    return this.CurrentMs >= start && this.CurrentMs < end;\n  }\n\n  /** Whether a turn is from the human user (vs. the agent) — drives the speaker color + label. */\n  public IsUserTurn(turn: EvidencePlaybackTurn): boolean {\n    return turn.Role === 'User';\n  }\n\n  /** The speaker label for a turn. */\n  public SpeakerLabel(turn: EvidencePlaybackTurn): string {\n    return this.IsUserTurn(turn) ? 'You' : this.AgentName;\n  }\n\n  /** The mm:ss timestamp shown on a turn (its start offset within the recording). */\n  public TurnTimestamp(turn: EvidencePlaybackTurn): string {\n    return this.formatMs(this.turnStartMs(turn));\n  }\n\n  /** mm:ss of the current playhead. */\n  public get CurrentLabel(): string {\n    return this.formatMs(this.CurrentMs);\n  }\n\n  /** mm:ss of the total duration. */\n  public get DurationLabel(): string {\n    return this.formatMs(this.DurationMs);\n  }\n\n  /** Stable `@for` track for the transcript. */\n  public TrackByTurn(_index: number, turn: EvidencePlaybackTurn): string {\n    return turn.ID;\n  }\n\n  // ----- audio element event handlers (bound in the template) -------------------------------\n\n  /** `loadedmetadata` → capture the duration. */\n  public OnLoadedMetadata(): void {\n    const el = this.audioEl;\n    this.DurationMs = el && Number.isFinite(el.duration) ? el.duration * 1000 : 0;\n    this.cdr.markForCheck();\n  }\n\n  /** `timeupdate` → advance the playhead + re-evaluate the active turn. */\n  public OnTimeUpdate(): void {\n    const el = this.audioEl;\n    if (el) {\n      this.CurrentMs = el.currentTime * 1000;\n      this.cdr.markForCheck();\n    }\n  }\n\n  /** `play` / `pause` / `ended` → reflect the transport state. */\n  public OnPlay(): void {\n    this.IsPlaying = true;\n    this.cdr.markForCheck();\n  }\n  public OnPause(): void {\n    this.IsPlaying = false;\n    this.cdr.markForCheck();\n  }\n  public OnEnded(): void {\n    this.IsPlaying = false;\n    this.cdr.markForCheck();\n  }\n\n  // ----- helpers ----------------------------------------------------------------------------\n\n  /** Nudges the playhead by `deltaMs`, clamped to the duration. */\n  private seekByMs(deltaMs: number): void {\n    if (this.DurationMs <= 0) {\n      return;\n    }\n    this.SeekToFraction((this.CurrentMs + deltaMs) / this.DurationMs);\n  }\n\n  /**\n   * A turn's start offset (ms) within the recording: prefer {@link EvidencePlaybackTurn.UtteranceStartMs};\n   * fall back to (`__mj_CreatedAt` − {@link RecordingStartedAt}); 0 when neither is available.\n   */\n  private turnStartMs(turn: EvidencePlaybackTurn): number {\n    if (turn.UtteranceStartMs != null) {\n      return Math.max(0, turn.UtteranceStartMs);\n    }\n    if (this.RecordingStartedAt && turn.__mj_CreatedAt) {\n      return Math.max(0, turn.__mj_CreatedAt.getTime() - this.RecordingStartedAt.getTime());\n    }\n    return 0;\n  }\n\n  /**\n   * A turn's end offset (ms): prefer {@link EvidencePlaybackTurn.UtteranceEndMs}; otherwise the\n   * next turn's start; otherwise the recording duration (or start + a small window when duration is unknown).\n   */\n  private turnEndMs(turn: EvidencePlaybackTurn): number {\n    if (turn.UtteranceEndMs != null) {\n      return Math.max(this.turnStartMs(turn), turn.UtteranceEndMs);\n    }\n    const idx = this._turns.indexOf(turn);\n    const next = idx >= 0 ? this._turns[idx + 1] : undefined;\n    if (next) {\n      return this.turnStartMs(next);\n    }\n    return this.DurationMs > 0 ? this.DurationMs : this.turnStartMs(turn) + 4000;\n  }\n\n  /** Formats a ms offset as mm:ss (clamped at 0). */\n  private formatMs(ms: number): string {\n    const total = Math.max(0, Math.floor(ms / 1000));\n    const minutes = Math.floor(total / 60);\n    const seconds = total % 60;\n    return `${minutes}:${seconds.toString().padStart(2, '0')}`;\n  }\n\n  /** Builds a stable pseudo-random waveform (deterministic, no per-render churn). */\n  private buildWaveform(): number[] {\n    const bars: number[] = [];\n    for (let i = 0; i < WAVEFORM_BARS; i++) {\n      // A smooth, repeatable envelope — looks like audio without needing to decode any.\n      const base = Math.sin(i * 0.5) * 0.5 + 0.5;\n      const detail = Math.sin(i * 1.7) * 0.25 + 0.25;\n      bars.push(Math.max(0.12, Math.min(1, base * 0.7 + detail * 0.5)));\n    }\n    return bars;\n  }\n}\n","<div class=\"evp\">\n  <!-- ---------- Audio transport ---------- -->\n  <div class=\"evp-player\">\n    @if (AudioUrl) {\n      <audio\n        #audio\n        [src]=\"AudioUrl\"\n        preload=\"metadata\"\n        (loadedmetadata)=\"OnLoadedMetadata()\"\n        (timeupdate)=\"OnTimeUpdate()\"\n        (play)=\"OnPlay()\"\n        (pause)=\"OnPause()\"\n        (ended)=\"OnEnded()\"\n      ></audio>\n\n      <button\n        type=\"button\"\n        class=\"evp-play\"\n        [attr.aria-label]=\"IsPlaying ? 'Pause recording' : 'Play recording'\"\n        [title]=\"IsPlaying ? 'Pause' : 'Play'\"\n        (click)=\"TogglePlay()\"\n      >\n        <i class=\"fa-solid\" [class.fa-pause]=\"IsPlaying\" [class.fa-play]=\"!IsPlaying\" aria-hidden=\"true\"></i>\n      </button>\n\n      <div class=\"evp-transport\">\n        <div\n          #track\n          class=\"evp-scrubber\"\n          role=\"slider\"\n          tabindex=\"0\"\n          aria-label=\"Seek through the recording\"\n          [attr.aria-valuemin]=\"0\"\n          [attr.aria-valuemax]=\"100\"\n          [attr.aria-valuenow]=\"(Progress * 100) | number: '1.0-0'\"\n          [attr.aria-valuetext]=\"CurrentLabel + ' of ' + DurationLabel\"\n          (click)=\"OnScrubberClick($event, track)\"\n          (keydown)=\"OnScrubberKeydown($event)\"\n        >\n          <div class=\"evp-waveform\" aria-hidden=\"true\">\n            @for (bar of WaveformBars; track $index) {\n              <span\n                class=\"evp-bar\"\n                [class.evp-bar--played]=\"($index / WaveformBars.length) <= Progress\"\n                [style.height.%]=\"bar * 100\"\n              ></span>\n            }\n          </div>\n          <div class=\"evp-progress\" [style.width.%]=\"Progress * 100\" aria-hidden=\"true\"></div>\n          <div class=\"evp-thumb\" [style.left.%]=\"Progress * 100\" aria-hidden=\"true\"></div>\n        </div>\n        <div class=\"evp-time\">\n          <span class=\"evp-time__current\">{{ CurrentLabel }}</span>\n          <span class=\"evp-time__sep\">/</span>\n          <span class=\"evp-time__total\">{{ DurationLabel }}</span>\n        </div>\n      </div>\n    } @else {\n      <div class=\"evp-noaudio\">\n        <i class=\"fa-solid fa-microphone-slash\" aria-hidden=\"true\"></i>\n        <span>No audio recording is available for this session.</span>\n      </div>\n    }\n  </div>\n\n  <!-- ---------- Transcript ---------- -->\n  <div class=\"evp-transcript\" role=\"list\" aria-label=\"Session transcript\">\n    @if (Turns.length === 0) {\n      <div class=\"evp-transcript-empty\">\n        <i class=\"fa-solid fa-comment-dots\" aria-hidden=\"true\"></i>\n        <p>No transcript turns to show.</p>\n      </div>\n    } @else {\n      @for (turn of Turns; track TrackByTurn($index, turn)) {\n        <button\n          type=\"button\"\n          class=\"evp-turn\"\n          role=\"listitem\"\n          tabindex=\"0\"\n          [class.evp-turn--user]=\"IsUserTurn(turn)\"\n          [class.evp-turn--agent]=\"!IsUserTurn(turn)\"\n          [class.evp-turn--active]=\"IsTurnActive(turn)\"\n          [attr.aria-label]=\"SpeakerLabel(turn) + ' at ' + TurnTimestamp(turn) + ': ' + turn.Message\"\n          [attr.aria-current]=\"IsTurnActive(turn) ? 'true' : null\"\n          (click)=\"SeekToTurn(turn)\"\n        >\n          <div class=\"evp-turn__meta\">\n            <span class=\"evp-turn__speaker\">{{ SpeakerLabel(turn) }}</span>\n            <span class=\"evp-turn__time\">{{ TurnTimestamp(turn) }}</span>\n          </div>\n          <p class=\"evp-turn__text\">{{ turn.Message }}</p>\n        </button>\n      }\n    }\n  </div>\n</div>\n"]}

package/dist/lib/components/realtime/media/media-channel-state.d.ts

@@ -0,0 +1,103 @@
+import { BehaviorSubject } from 'rxjs';
+/** The media kinds the Media surface can render — one render path per value. */
+export type MediaItemType = 'image' | 'video' | 'audio' | 'pdf' | 'web';
+/**
+ * A fractional highlight rectangle drawn over a media item, in the item's OWN coordinate space
+ * (0..1 on both axes). `X`,`Y` is the top-left corner; `W`,`H` are the width/height. Fractional
+ * coordinates keep the highlight correct regardless of how the media is scaled to fit the pane.
+ */
+export interface MediaHighlight {
+    /** Left edge as a fraction of width (0..1). */
+    X: number;
+    /** Top edge as a fraction of height (0..1). */
+    Y: number;
+    /** Width as a fraction of width (0..1). */
+    W: number;
+    /** Height as a fraction of height (0..1). */
+    H: number;
+    /** Optional short label rendered on the highlight. */
+    Label?: string;
+}
+/** One piece of media on the surface — a tab + a render pane keyed by {@link MediaItemType}. */
+export interface MediaItem {
+    /** Stable id (returned to the agent by `Media_ShowMedia`, used by close/play/highlight). */
+    Id: string;
+    /** Which render path the pane uses. */
+    Type: MediaItemType;
+    /**
+     * Absolute URL of the media — for an EXTERNAL/public asset. Optional/empty when {@link FileID}
+     * is set (the surface resolves a secure streaming URL from the file id instead). At least one of
+     * `Url` / `FileID` is always present.
+     */
+    Url?: string;
+    /**
+     * Id of an "MJ: Files" record this item is backed by. When set, the item is streamed securely
+     * (permission-gated) from MJStorage rather than from a public {@link Url}; the surface resolves a
+     * short-lived streaming URL (via `CreateMediaAccessToken`) or hands the id straight to
+     * `mj-storage-media-player` for audio/video.
+     */
+    FileID?: string;
+    /** Short tab label. */
+    DisplayName: string;
+    /** Optional one-line caption beneath the media. */
+    Caption?: string;
+    /** Optional fractional highlight overlay. */
+    Highlight?: MediaHighlight;
+    /** Set transiently to request playback of a video/audio item (consumed by the surface). */
+    PlayRequestedAt?: number;
+}
+/**
+ * The Media channel's STATE ENGINE — a pure, framework-free model of what's on the shared Media
+ * surface: an ordered list of {@link MediaItem}s plus which one is active. Mutations push the new
+ * state through {@link Changed$} so the channel persists it and the surface re-renders. Mirrors
+ * `WhiteboardState` (no Angular, tolerant (de)serialization, single `Changed$` notifier).
+ */
+export declare class MediaChannelState {
+    /** The media currently on the surface, in tab order (oldest first). */
+    Items: MediaItem[];
+    /** The id of the active (visible) item, or `null` when the surface is empty. */
+    ActiveItemId: string | null;
+    /**
+     * Fires on every mutation. Replays the current state on subscribe (BehaviorSubject), so a late
+     * surface binding immediately renders what's already on the board.
+     */
+    readonly Changed$: BehaviorSubject<MediaChannelState>;
+    /** Adds a media item, makes it active, and returns it. */
+    AddItem(item: Omit<MediaItem, 'Id'> & {
+        Id?: string;
+    }): MediaItem;
+    /** Removes the item with `id` (no-op if absent). When it was active, the last remaining item becomes active. */
+    RemoveItem(id: string): boolean;
+    /** Makes `id` the active item (no-op if absent). */
+    SetActive(id: string): boolean;
+    /**
+     * Activates `id` and stamps a play request on it (the surface consumes the stamp to start
+     * video/audio playback). No-op if the item is absent.
+     */
+    RequestPlay(id: string): boolean;
+    /** Sets (or, with `null`, clears) the fractional highlight on `id`. No-op if the item is absent. */
+    Highlight(id: string, highlight: MediaHighlight | null): boolean;
+    /** Removes all media and resets the active item. */
+    Clear(): void;
+    /** The active item, or `null` when the surface is empty / the active id is stale. */
+    get ActiveItem(): MediaItem | null;
+    /** Serializes the state of record to a JSON string (persisted via the channel's RequestSave). */
+    ToJSON(): string;
+    /**
+     * Rehydrates a prior session's saved state IN PLACE (preserving this instance + its `Changed$`
+     * subscribers). Tolerant by contract: malformed / incompatible JSON is ignored and the method
+     * returns `false` without throwing, leaving the current state untouched.
+     */
+    LoadFromJSON(json: string): boolean;
+    /**
+     * Validates one parsed item enough to render it safely (defensive against hand-edited / old
+     * payloads). An item must carry a SOURCE — a non-empty `Url` OR a non-empty `FileID` — since one
+     * of the two backs every render path.
+     */
+    private isValidItem;
+    /** Mints a unique-within-session item id. */
+    private newId;
+    /** Pushes the current state to subscribers. */
+    private notify;
+}
+//# sourceMappingURL=media-channel-state.d.ts.map

package/dist/lib/components/realtime/media/media-channel-state.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-channel-state.d.ts","sourceRoot":"","sources":["../../../../../src/lib/components/realtime/media/media-channel-state.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,MAAM,CAAC;AAEvC,gFAAgF;AAChF,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,KAAK,GAAG,KAAK,CAAC;AAExE;;;;GAIG;AACH,MAAM,WAAW,cAAc;IAC7B,+CAA+C;IAC/C,CAAC,EAAE,MAAM,CAAC;IACV,+CAA+C;IAC/C,CAAC,EAAE,MAAM,CAAC;IACV,2CAA2C;IAC3C,CAAC,EAAE,MAAM,CAAC;IACV,6CAA6C;IAC7C,CAAC,EAAE,MAAM,CAAC;IACV,sDAAsD;IACtD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,gGAAgG;AAChG,MAAM,WAAW,SAAS;IACxB,4FAA4F;IAC5F,EAAE,EAAE,MAAM,CAAC;IACX,uCAAuC;IACvC,IAAI,EAAE,aAAa,CAAC;IACpB;;;;OAIG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,uBAAuB;IACvB,WAAW,EAAE,MAAM,CAAC;IACpB,mDAAmD;IACnD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,6CAA6C;IAC7C,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B,2FAA2F;IAC3F,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAYD;;;;;GAKG;AACH,qBAAa,iBAAiB;IAC5B,uEAAuE;IAChE,KAAK,EAAE,SAAS,EAAE,CAAM;IAE/B,gFAAgF;IACzE,YAAY,EAAE,MAAM,GAAG,IAAI,CAAQ;IAE1C;;;OAGG;IACH,SAAgB,QAAQ,qCAAgD;IAExE,0DAA0D;IACnD,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,GAAG;QAAE,EAAE,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,SAAS;IAQxE,gHAAgH;IACzG,UAAU,CAAC,EAAE,EAAE,MAAM,GAAG,OAAO;IAatC,oDAAoD;IAC7C,SAAS,CAAC,EAAE,EAAE,MAAM,GAAG,OAAO;IASrC;;;OAGG;IACI,WAAW,CAAC,EAAE,EAAE,MAAM,GAAG,OAAO;IAWvC,oGAAoG;IAC7F,SAAS,CAAC,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,cAAc,GAAG,IAAI,GAAG,OAAO;IAUvE,oDAAoD;IAC7C,KAAK,IAAI,IAAI;IASpB,qFAAqF;IACrF,IAAW,UAAU,IAAI,SAAS,GAAG,IAAI,CAExC;IAED,iGAAiG;IAC1F,MAAM,IAAI,MAAM;IAKvB;;;;OAIG;IACI,YAAY,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO;IAiB1C;;;;OAIG;IACH,OAAO,CAAC,WAAW;IAiBnB,6CAA6C;IAC7C,OAAO,CAAC,KAAK;IAKb,+CAA+C;IAC/C,OAAO,CAAC,MAAM;CAGf"}