@memberjunction/ng-conversations 5.40.1 → 5.41.0

package/dist/lib/components/realtime/realtime-session-overlay.component.js

@@ -0,0 +1,1274 @@
+import { Component, ElementRef, EventEmitter, HostListener, Input, Output, ChangeDetectorRef, NgZone, ViewChild, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { UserInfoEngine } from '@memberjunction/core-entities';
+import { SharedGenericModule } from '@memberjunction/ng-shared-generic';
+import { RealtimeSessionService } from '../../services/realtime-session.service';
+import { BuildReviewThreadItems } from '../../services/realtime-session-review.service';
+import { RealtimeSessionState } from './realtime-session-state';
+import { RealtimeAgentBannerComponent } from './realtime-agent-banner.component';
+import { RealtimeSessionThreadComponent } from './realtime-session-thread.component';
+import { RealtimeChannelStripComponent } from './realtime-channel-strip.component';
+import { RealtimeComposerComponent } from './realtime-composer.component';
+import { RealtimeSurfaceTabsComponent } from './realtime-surface-tabs.component';
+import { ClampSurfacePanelWidth, DefaultSurfacePanelWidth, IsSurfacePanelDrag, ParseSurfacePanelPref, SerializeSurfacePanelPref, SurfacePanelDragWidth, SURFACE_PANEL_COLLAPSED_WIDTH, SURFACE_PANEL_DEFAULT_WIDTH, SURFACE_PANEL_PREF_KEY } from './realtime-surface-panel-prefs';
+import { RealtimeDisclosureModel, SerializeUxMilestones, REALTIME_UX_PREF_KEY } from './realtime-disclosure';
+import { RealtimeAudioVisualSmoother } from './realtime-audio-visuals';
+import { ShouldRemoveReviewWhiteboardTab } from './realtime-surface-tabs.model';
+import { RealtimeWhiteboardBoardComponent, WhiteboardState } from '@memberjunction/ng-whiteboard';
+import * as i0 from "@angular/core";
+import * as i1 from "@memberjunction/ng-shared-generic";
+import * as i2 from "@angular/common";
+const _c0 = ["reviewBoardTpl"];
+function RealtimeSessionOverlayComponent_Conditional_0_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 5);
+    i0.ɵɵelement(1, "i", 11);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.State.Narration, " ");
+} }
+function RealtimeSessionOverlayComponent_Conditional_0_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 7);
+    i0.ɵɵelement(1, "mj-loading", 12);
+    i0.ɵɵelementEnd();
+} }
+function RealtimeSessionOverlayComponent_Conditional_0_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 8)(1, "div", 13);
+    i0.ɵɵelement(2, "span", 14)(3, "span", 15)(4, "span", 16)(5, "div", 17);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "div", 18);
+    i0.ɵɵelement(7, "span")(8, "span")(9, "span")(10, "span")(11, "span")(12, "span")(13, "span")(14, "span")(15, "span");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(16, "div", 19);
+    i0.ɵɵtext(17);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(18, "div", 20);
+    i0.ɵɵtext(19);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(20, "button", 21);
+    i0.ɵɵlistener("click", function RealtimeSessionOverlayComponent_Conditional_0_Conditional_7_Template_button_click_20_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnTextReveal()); });
+    i0.ɵɵelement(21, "i", 22);
+    i0.ɵɵtext(22, " Show the conversation ");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const state_r4 = i0.ɵɵnextContext();
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵattribute("data-state", state_r4);
+    i0.ɵɵadvance(5);
+    i0.ɵɵattribute("data-state", ctx_r1.HeroOrbState(state_r4));
+    i0.ɵɵadvance(12);
+    i0.ɵɵtextInterpolate(ctx_r1.AgentName);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r1.HeroStateLabel(state_r4));
+} }
+function RealtimeSessionOverlayComponent_Conditional_0_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-realtime-session-thread", 23);
+    i0.ɵɵlistener("OpenRunRequested", function RealtimeSessionOverlayComponent_Conditional_0_Conditional_8_Template_mj_realtime_session_thread_OpenRunRequested_0_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnOpenRunRequested($event)); })("OpenArtifactRequested", function RealtimeSessionOverlayComponent_Conditional_0_Conditional_8_Template_mj_realtime_session_thread_OpenArtifactRequested_0_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnOpenArtifactRequested($event)); })("CancelRequested", function RealtimeSessionOverlayComponent_Conditional_0_Conditional_8_Template_mj_realtime_session_thread_CancelRequested_0_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnCancelDelegation($event)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("State", ctx_r1.State)("AgentName", ctx_r1.AgentName)("UserName", (ctx_r1.CurrentUser == null ? null : ctx_r1.CurrentUser.Name) || "You")("ShowCaptions", ctx_r1.IsReviewing ? true : ctx_r1.ShowCaptions)("DevMode", ctx_r1.DevMode);
+} }
+function RealtimeSessionOverlayComponent_Conditional_0_Conditional_9_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-realtime-channel-strip");
+} }
+function RealtimeSessionOverlayComponent_Conditional_0_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵconditionalCreate(0, RealtimeSessionOverlayComponent_Conditional_0_Conditional_9_Conditional_0_Template, 1, 0, "mj-realtime-channel-strip");
+    i0.ɵɵelementStart(1, "mj-realtime-composer", 24);
+    i0.ɵɵlistener("OpenChanged", function RealtimeSessionOverlayComponent_Conditional_0_Conditional_9_Template_mj_realtime_composer_OpenChanged_1_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnComposerOpenChanged($event)); })("CaptionsToggled", function RealtimeSessionOverlayComponent_Conditional_0_Conditional_9_Template_mj_realtime_composer_CaptionsToggled_1_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnCaptionsToggled($event)); })("DetailsToggled", function RealtimeSessionOverlayComponent_Conditional_0_Conditional_9_Template_mj_realtime_composer_DetailsToggled_1_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnDetailsToggled()); })("EndRequested", function RealtimeSessionOverlayComponent_Conditional_0_Conditional_9_Template_mj_realtime_composer_EndRequested_1_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnEndCall()); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵconditional(ctx_r1.Disclosure.ShowComposer ? 0 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("Open", ctx_r1.ComposerOpen)("CaptionsOn", ctx_r1.ShowCaptions)("ShowDetails", ctx_r1.ShowDetailsControl)("DetailsOn", ctx_r1.DetailsPeek);
+} }
+function RealtimeSessionOverlayComponent_Conditional_0_Conditional_10_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 28);
+    i0.ɵɵlistener("mousedown", function RealtimeSessionOverlayComponent_Conditional_0_Conditional_10_Conditional_0_Template_div_mousedown_0_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnPanelResizeStart($event)); })("dblclick", function RealtimeSessionOverlayComponent_Conditional_0_Conditional_10_Conditional_0_Template_div_dblclick_0_listener() { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnPanelResizeReset()); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵclassProp("call-resizer--active", ctx_r1.IsPanelResizing);
+} }
+function RealtimeSessionOverlayComponent_Conditional_0_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵconditionalCreate(0, RealtimeSessionOverlayComponent_Conditional_0_Conditional_10_Conditional_0_Template, 1, 2, "div", 25);
+    i0.ɵɵelementStart(1, "div", 26)(2, "mj-realtime-surface-tabs", 27);
+    i0.ɵɵlistener("OpenRunRequested", function RealtimeSessionOverlayComponent_Conditional_0_Conditional_10_Template_mj_realtime_surface_tabs_OpenRunRequested_2_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnOpenRunRequested($event)); })("CollapsedChange", function RealtimeSessionOverlayComponent_Conditional_0_Conditional_10_Template_mj_realtime_surface_tabs_CollapsedChange_2_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnPanelCollapsedChange($event)); })("WideChanged", function RealtimeSessionOverlayComponent_Conditional_0_Conditional_10_Template_mj_realtime_surface_tabs_WideChanged_2_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnPanelWideChanged($event)); });
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵconditional(!ctx_r1.PanelResizeDisabled ? 0 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵstyleProp("width", ctx_r1.ChannelFocusMode ? null : ctx_r1.PanelAreaSize, "px");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("State", ctx_r1.State)("DevMode", ctx_r1.DevMode)("CurrentUser", ctx_r1.CurrentUser)("EnvironmentID", ctx_r1.EnvironmentID)("Fill", ctx_r1.ChannelFocusMode);
+} }
+function RealtimeSessionOverlayComponent_Conditional_0_Conditional_11_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 32);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx);
+} }
+function RealtimeSessionOverlayComponent_Conditional_0_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+    const _r9 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 10);
+    i0.ɵɵelement(1, "span", 29);
+    i0.ɵɵelementStart(2, "span", 30)(3, "span", 31);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(5, RealtimeSessionOverlayComponent_Conditional_0_Conditional_11_Conditional_5_Template, 2, 1, "span", 32);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "button", 33);
+    i0.ɵɵlistener("click", function RealtimeSessionOverlayComponent_Conditional_0_Conditional_11_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnFocusPillMute()); });
+    i0.ɵɵelement(7, "i", 34);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(8, "button", 35);
+    i0.ɵɵlistener("click", function RealtimeSessionOverlayComponent_Conditional_0_Conditional_11_Template_button_click_8_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnFocusPillExit()); });
+    i0.ɵɵelement(9, "i", 36);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(10, "button", 37);
+    i0.ɵɵlistener("click", function RealtimeSessionOverlayComponent_Conditional_0_Conditional_11_Template_button_click_10_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnFocusPillEnd()); });
+    i0.ɵɵelement(11, "i", 38);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    let tmp_6_0;
+    const state_r4 = i0.ɵɵnextContext();
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵattribute("data-state", state_r4);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate1("Voice for ", ctx_r1.AgentName);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional((tmp_6_0 = ctx_r1.FocusStateLabel(state_r4)) ? 5 : -1, tmp_6_0);
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("board-focus-pill__btn--active", ctx_r1.FocusPillMuted);
+    i0.ɵɵproperty("title", ctx_r1.FocusPillMuted ? "Unmute" : "Mute");
+    i0.ɵɵattribute("aria-label", ctx_r1.FocusPillMuted ? "Unmute microphone" : "Mute microphone");
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("fa-microphone", !ctx_r1.FocusPillMuted)("fa-microphone-slash", ctx_r1.FocusPillMuted);
+} }
+function RealtimeSessionOverlayComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 2)(1, "div", 3)(2, "mj-realtime-agent-banner", 4);
+    i0.ɵɵpipe(3, "async");
+    i0.ɵɵlistener("OpenSessionRequested", function RealtimeSessionOverlayComponent_Conditional_0_Template_mj_realtime_agent_banner_OpenSessionRequested_2_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnOpenSessionRequested($event)); })("CaptionsToggled", function RealtimeSessionOverlayComponent_Conditional_0_Template_mj_realtime_agent_banner_CaptionsToggled_2_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnCaptionsToggled($event)); })("DevModeToggled", function RealtimeSessionOverlayComponent_Conditional_0_Template_mj_realtime_agent_banner_DevModeToggled_2_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnDevModeToggled($event)); })("DensityChanged", function RealtimeSessionOverlayComponent_Conditional_0_Template_mj_realtime_agent_banner_DensityChanged_2_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnDensityChanged($event)); })("MinimizeRequested", function RealtimeSessionOverlayComponent_Conditional_0_Template_mj_realtime_agent_banner_MinimizeRequested_2_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnMinimize()); })("PureAudioRequested", function RealtimeSessionOverlayComponent_Conditional_0_Template_mj_realtime_agent_banner_PureAudioRequested_2_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnPureAudio()); })("EndRequested", function RealtimeSessionOverlayComponent_Conditional_0_Template_mj_realtime_agent_banner_EndRequested_2_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnEndCall()); })("StartLiveRequested", function RealtimeSessionOverlayComponent_Conditional_0_Template_mj_realtime_agent_banner_StartLiveRequested_2_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnStartLive()); })("CloseRequested", function RealtimeSessionOverlayComponent_Conditional_0_Template_mj_realtime_agent_banner_CloseRequested_2_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnReviewClose()); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(4, RealtimeSessionOverlayComponent_Conditional_0_Conditional_4_Template, 3, 1, "div", 5);
+    i0.ɵɵelementStart(5, "div", 6);
+    i0.ɵɵconditionalCreate(6, RealtimeSessionOverlayComponent_Conditional_0_Conditional_6_Template, 2, 0, "div", 7)(7, RealtimeSessionOverlayComponent_Conditional_0_Conditional_7_Template, 23, 4, "div", 8)(8, RealtimeSessionOverlayComponent_Conditional_0_Conditional_8_Template, 1, 5, "mj-realtime-session-thread", 9);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(9, RealtimeSessionOverlayComponent_Conditional_0_Conditional_9_Template, 2, 5);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(10, RealtimeSessionOverlayComponent_Conditional_0_Conditional_10_Template, 3, 8);
+    i0.ɵɵconditionalCreate(11, RealtimeSessionOverlayComponent_Conditional_0_Conditional_11_Template, 12, 11, "div", 10);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const state_r4 = ctx;
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵclassProp("call-overlay--hidden", ctx_r1.Hidden)("call-overlay--review", ctx_r1.IsReviewing)("board-focus", ctx_r1.ChannelFocusMode);
+    i0.ɵɵattribute("aria-label", ctx_r1.IsReviewing ? "Past session review" : "Live voice session");
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("State", state_r4)("AgentName", ctx_r1.AgentName)("ModelName", ctx_r1.IsReviewing ? null : i0.ɵɵpipeBind1(3, 30, ctx_r1.ModelName$))("DevMode", ctx_r1.DevMode)("SessionID", ctx_r1.IsReviewing ? ctx_r1.ReviewSessionID : ctx_r1.SessionID)("ReviewMode", ctx_r1.IsReviewing)("ReviewStartedAt", ctx_r1.ReviewStartedAt)("ReviewClosedAt", ctx_r1.ReviewClosedAt)("ReviewCloseReason", ctx_r1.ReviewCloseReason)("CaptionsOn", ctx_r1.ShowCaptions)("ShowCaptionsControl", !ctx_r1.IsReviewing)("ShowGear", !ctx_r1.IsReviewing && ctx_r1.Disclosure.ShowGear)("ShowEnd", !ctx_r1.IsReviewing && ctx_r1.Disclosure.ShowComposer)("ShowMinimize", !ctx_r1.IsReviewing)("ShowPureAudio", !ctx_r1.IsReviewing && ctx_r1.Disclosure.SessionLevel > 0)("Density", ctx_r1.Disclosure.Milestones.Density);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(!ctx_r1.IsReviewing && ctx_r1.State.Narration && !ctx_r1.State.ActiveCallId && ctx_r1.Disclosure.ShowThread ? 4 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("call-body--hero", ctx_r1.ShowHero && state_r4 !== "connecting");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(!ctx_r1.IsReviewing && state_r4 === "connecting" ? 6 : ctx_r1.ShowHero ? 7 : 8);
+    i0.ɵɵadvance(3);
+    i0.ɵɵconditional(!ctx_r1.IsReviewing ? 9 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.ShowPanelArea ? 10 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(!ctx_r1.IsReviewing && ctx_r1.ChannelFocusMode ? 11 : -1);
+} }
+function RealtimeSessionOverlayComponent_ng_template_2_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 39);
+    i0.ɵɵelement(1, "mj-realtime-whiteboard", 40);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("State", ctx)("AgentName", ctx_r1.AgentName)("ReadOnly", true);
+} }
+function RealtimeSessionOverlayComponent_ng_template_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, RealtimeSessionOverlayComponent_ng_template_2_Conditional_0_Template, 2, 3, "div", 39);
+} if (rf & 2) {
+    let tmp_2_0;
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵconditional((tmp_2_0 = ctx_r1.ReviewWhiteboard) ? 0 : -1, tmp_2_0);
+} }
+/**
+ * The "call mode" overlay for a live real-time voice session. Hosted by the
+ * conversation chat area (`<mj-conversation-chat-area>`) behind `Active$`, it fills the
+ * conversation panel IN PLACE (`position:absolute; inset:0` over the panel — not a
+ * fixed app-wide dialog), replacing the conversation view including the composer.
+ *
+ * Two-column layout:
+ *  - MAIN column — {@link RealtimeAgentBannerComponent} (the unified APP-BAR: identity +
+ *    turn-state + the disclosure-gated action cluster), the unified
+ *    {@link RealtimeSessionThreadComponent} (or the level-0 pure-audio hero), the channel
+ *    strip, and {@link RealtimeComposerComponent} (the bottom dock: phone-call strip ⇄
+ *    fused minis+composer).
+ *  - RIGHT PANEL — {@link RealtimeSurfaceTabsComponent}: the TABBED surface panel.
+ *    Tab 1 "Activity" hosts the session activity rail; one tab opens per ARTIFACT a
+ *    delegated run produces (auto-focused + flashed on arrival, viewed read-only via the
+ *    standard artifact viewer); ONE TAB PER INTERACTIVE CHANNEL the session resolved from
+ *    the `MJ: AI Agent Channels` registry. Collapsible to a slim strip at the panel level.
+ *
+ * INTERACTIVE CHANNELS ARE PLUGINS — this shell is channel-agnostic. It subscribes
+ * {@link RealtimeSessionService.ActiveChannels$} and registers one surface tab per
+ * {@link BaseRealtimeChannelClient} (key/title/icon from the plugin); the tab pane creates
+ * the plugin's surface component dynamically and the PLUGIN wires its own inputs/outputs.
+ * The only channel-generic affordance the shell owns is the FOCUS layout: any channel may
+ * request it (via its context's `SetFocusMode` → {@link RealtimeSessionService.ChannelFocus$}),
+ * which collapses the main call column (`.board-focus`) and shows the floating call pill.
+ *
+ * Owns the shared {@link RealtimeSessionState} — the SINGLE merge of the service's
+ * caption/delegation/narration streams — and passes it to both thread and rail via
+ * inputs, so neither duplicates subscription logic.
+ *
+ * DEVELOPER MODE: the controls row's gear toggles {@link DevMode} (per-session, off by
+ * default, never persisted), revealing "Open run" links on delegation cards / rail items
+ * and an "Open session" link in the banner. Clicking one emits {@link NavigateRequest}
+ * and MINIMIZES the call (via {@link RealtimeSessionService.SetMinimized}) — the session
+ * stays live while the host navigates to the record.
+ *
+ * SESSION REVIEW MODE: when the host supplies {@link ReviewData} (a loaded
+ * `RealtimeSessionReview`) and NO live session is active, the overlay renders what went
+ * down in that PAST session instead of a live call: the banner shows a "Session review"
+ * badge + lifecycle range + close-reason chip; the SAME thread/rail components render the
+ * historical caption turns and delegated-run cards (via
+ * {@link RealtimeSessionState.LoadHistoricalItems}); a read-only Whiteboard tab is
+ * registered ONLY when the session saved a parseable Whiteboard channel state. Everything
+ * live is DEAD in review — no mic, no captions stream, no composer, no channel strip; the
+ * controls collapse to a single "Start live session" button ({@link StartLiveRequested},
+ * which resumes by chaining `lastSessionId`) and a Close button ({@link ReviewClosed}).
+ */
+export class RealtimeSessionOverlayComponent {
+    _agentName = 'Sage';
+    /**
+     * True while the call is MINIMIZED: the overlay hides itself (CSS, not destruction) so
+     * the host can show its floating "on call" pill WITHOUT losing this shell's merged
+     * session state (delegation cards ride non-replaying streams) or view state (dev mode,
+     * expanded chips, scroll position). The host binds this from `Minimized$`.
+     */
+    Hidden = false;
+    /** Display name of the agent the voice session fronts (e.g. "Sage"). */
+    set AgentName(value) {
+        this._agentName = value || 'Sage';
+        this.State.AgentName = this._agentName;
+    }
+    get AgentName() {
+        return this._agentName;
+    }
+    /** The signed-in user, threaded to the surface panel's artifact viewer. */
+    CurrentUser = null;
+    /** The active environment id, threaded to the surface panel's artifact viewer. */
+    EnvironmentID = '';
+    /**
+     * SESSION REVIEW data: when set (and no live session is active) the overlay renders
+     * the reviewed past session instead of a live call. Setting it populates the shared
+     * {@link State} with the historical thread and prepares the read-only whiteboard tab;
+     * clearing it returns the state to its live-merge baseline.
+     */
+    set ReviewData(value) {
+        if (value === this._reviewData) {
+            return;
+        }
+        this._reviewData = value;
+        if (value && !this.voice.IsActive) {
+            this.enterReview(value);
+        }
+        else if (!value) {
+            this.exitReview();
+        }
+    }
+    get ReviewData() {
+        return this._reviewData;
+    }
+    /** Emitted after the call ends so the host can react (visibility is driven by Active$). */
+    Ended = new EventEmitter();
+    /**
+     * Emitted when a gear-gated developer link asks to open an entity record. The host is
+     * expected to bubble this through its standard record-open path (the chat area re-emits
+     * it on `openEntityRecord`, which Explorer routes via `NavigationService`). The overlay
+     * minimizes itself first so the live call survives the navigation.
+     */
+    NavigateRequest = new EventEmitter();
+    /**
+     * Review mode's "Start live session": the host clears its review state and resumes the
+     * reviewed session as a new live call (chaining `LastSessionId` to restore channel states).
+     */
+    StartLiveRequested = new EventEmitter();
+    /** Review mode's Close: the host clears its review state, returning to the conversation. */
+    ReviewClosed = new EventEmitter();
+    voice = inject(RealtimeSessionService);
+    cdr = inject(ChangeDetectorRef);
+    _reviewData = null;
+    /**
+     * Set by {@link OnStartLive} just before emitting {@link StartLiveRequested}, so the
+     * ReviewData→null transition that follows is recognized as a REVIEW→LIVE CONTINUATION
+     * (keep the historical thread + append the "Resumed live session" divider) rather than
+     * a plain review close (clear everything).
+     */
+    pendingLiveContinuation = false;
+    /** The reviewed chain's history artifacts, registered as unfocused surface tabs. */
+    reviewArtifacts = [];
+    /**
+     * True while the surface panel carries the REVIEW-registered (template-based, read-only)
+     * Whiteboard tab. Drives the review→live continuation edge: when the resumed live
+     * session's channel set resolves WITHOUT a Whiteboard channel, the stale review tab is
+     * removed (see {@link cleanupStaleReviewBoardTab}); when it resolves WITH one, the live
+     * plugin re-registers the same key and the tab upgrades in place.
+     */
+    reviewWhiteboardTabRegistered = false;
+    /** True while the overlay renders a PAST session (review data set, no live call). */
+    get IsReviewing() {
+        return this._reviewData !== null && !this.voice.IsActive;
+    }
+    /**
+     * The reviewed session's rehydrated whiteboard, when it saved a parseable Whiteboard
+     * channel state — rendered read-only by the review whiteboard tab. Null = no tab.
+     */
+    ReviewWhiteboard = null;
+    /** Shared session state — single source for the thread AND the activity rail. */
+    State = new RealtimeSessionState();
+    /**
+     * PROGRESSIVE DISCLOSURE: the levels/milestones model behind the pure-audio-first UX
+     * (see {@link RealtimeDisclosureModel}). Loaded from UserInfoEngine at construction;
+     * content events ({@link onSessionStateChanged}, {@link onChannelActivity}) raise the
+     * volatile session level; milestones ratchet + persist when the call ends. REVIEW mode
+     * bypasses disclosure entirely — a past session always renders the full console.
+     */
+    Disclosure = new RealtimeDisclosureModel();
+    /**
+     * The strip's Details peek: shows the surface panel ON DEMAND while it isn't earned yet
+     * (disclosure level < 2) — Activity and channel surfaces exist before their content
+     * does. Cleared automatically once content earns the panel for real.
+     */
+    DetailsPeek = false;
+    /**
+     * Whether the typed-input dock is open — a TWO-WAY user door (the strip's Type
+     * control / the T hotkey open it; the dock's hide control closes it), volatile and
+     * reset per session. Typing never becomes permanent chrome.
+     */
+    ComposerOpen = false;
+    /** Live turn-state from the session service — drives the banner + connecting screen. */
+    ConnectionState$ = this.voice.ConnectionState$;
+    /** Server-reported realtime model name for the active session — shown subtly in the banner. */
+    ModelName$ = this.voice.ModelName$;
+    /**
+     * Whether the conversation renders as TEXT (the thread) or stays voice-first (the
+     * orb hero). A PERSISTED per-user preference (`mj.realtimeVoice.captions.v1`) —
+     * default OFF: voice-first, the orb owns the screen until the user opts into text.
+     */
+    ShowCaptions = false;
+    /** UserInfoEngine key for the persisted captions (text-vs-orb) preference. */
+    static CaptionsPrefKey = 'mj.realtimeVoice.captions.v1';
+    /**
+     * Whether developer affordances (open-record links) are revealed. Per-session view
+     * state on this shell — off by default, reset with the overlay, never persisted.
+     */
+    DevMode = false;
+    /** ID of the live server-side agent session record, for the banner's dev link. */
+    get SessionID() {
+        return this.voice.CurrentAgentSessionId;
+    }
+    /**
+     * The tabbed surface panel (right panel) — channel registrations are forwarded to it.
+     * A SETTER because the panel is disclosure-gated (`@if`): it can be created LATE (the
+     * first delegation / channel activity reveals it mid-call), at which point any queued
+     * channel registrations and a pending auto-reveal must flush to the fresh instance.
+     */
+    surfaceTabs;
+    set surfaceTabsRef(ref) {
+        this.surfaceTabs = ref;
+        if (ref) {
+            // A (re)created panel starts with a FRESH tab model: artifact tabs self-recover
+            // (the panel re-scans the session state) but CHANNEL tabs only registered when
+            // ActiveChannels$ emitted at session start — re-register the live set here so
+            // hiding the panel (pure-audio return, Details off) never loses the Whiteboard.
+            this.registerChannelTabs([...this.voice.ActiveChannels]);
+            this.flushPendingChannelTabs();
+            const reveal = this.pendingRevealKey;
+            this.pendingRevealKey = null;
+            // Deferred: focus/expand feed the parent's width bindings (wide tier) — never
+            // mutate those inside the change-detection pass that created the panel.
+            setTimeout(() => {
+                if (reveal) {
+                    // The agent's first channel activity caused this creation — land ON the board.
+                    ref.RevealChannel(reveal);
+                }
+                else {
+                    // Default for a fresh panel (live AND review): the marquee surface — channels
+                    // lead the strip — NOT the Activity rail; agent-run plumbing is opt-in only.
+                    // (Review channel tabs register a beat later and take focus themselves.)
+                    ref.FocusFirstTab();
+                }
+            });
+        }
+    }
+    /** The bottom dock — the T-to-type hotkey focuses its input. */
+    composer;
+    /** Channel keys already auto-revealed this session (first activity only). */
+    revealedChannelKeys = new Set();
+    /** Auto-reveal that arrived before the (disclosure-gated) panel rendered. */
+    pendingRevealKey = null;
+    /** Previous Active$ value — edges drive disclosure session begin/ratchet. */
+    prevActive = false;
+    /** Template hosting the read-only review whiteboard (root-level, so always resolvable). */
+    reviewBoardTpl;
+    /** Channel registrations received before the surface panel rendered (flushed in ngAfterViewInit). */
+    pendingChannelTabs = [];
+    /** True once the view (and the review-board template ref) exists. */
+    viewReady = false;
+    // ── Channel FOCUS layout (channel-generic — any plugin may request it) ─────
+    /**
+     * True while a channel surface is in FOCUS mode: the main call column collapses
+     * (`.board-focus` on the overlay) and a compact floating call pill (orb + state +
+     * mute / show-thread / end) rides over the surface.
+     */
+    ChannelFocusMode = false;
+    /** Mic-muted state reflected on the focus pill's mute button. */
+    FocusPillMuted = false;
+    /** The channel currently holding the focus layout (the pill's exit routes back to it). */
+    focusChannel = null;
+    subs = [];
+    constructor() {
+        this.loadPanelWidthPref();
+        this.loadDisclosurePref();
+        this.loadCaptionsPref();
+        this.State.Attach(this.voice);
+        this.subs.push(
+        // Re-render on merged-state changes; content arrival raises the disclosure level.
+        this.State.Changed$.subscribe(() => this.onSessionStateChanged()), this.Disclosure.Changed$.subscribe(() => this.cdr.markForCheck()), 
+        // One surface tab per registry-resolved channel plugin (replays the current set).
+        this.voice.ActiveChannels$.subscribe(channels => this.registerChannelTabs(channels)), 
+        // Any channel may request the focus layout through its host context.
+        this.voice.ChannelFocus$.subscribe(event => this.onChannelFocus(event.Channel, event.Focused)), 
+        // The agent ACTED on a channel — auto-reveal its surface tab on first activity.
+        this.voice.ChannelActivity$.subscribe(plugin => this.onChannelActivity(plugin)), 
+        // Live/idle flips: reset/ratchet disclosure + re-evaluate the review-vs-live branch.
+        this.voice.Active$.subscribe(active => this.onActiveChanged(active)));
+    }
+    ngAfterViewInit() {
+        this.viewReady = true;
+        this.flushPendingChannelTabs();
+        this.registerReviewBoardTab();
+        this.registerReviewArtifactTabs();
+    }
+    // ── Surface-panel sizing (flex layout + pointer-drag handle; width persisted per-user) ──
+    //
+    // The panel width is a PLAIN FIELD rendered via [style.width.px] — there is no split
+    // library with its own internal size state to fight. The resize handle uses the same
+    // mechanics as ui-components' slide-panel (`MjSlidePanelComponent`): mousedown →
+    // document mousemove/mouseup registered OUTSIDE Angular, live clamp while dragging,
+    // adopt + persist on release. A bare CLICK cannot move the panel by construction
+    // (width follows the pointer delta) and the click-vs-drag guard keeps it from being
+    // adopted or persisted.
+    /** Whether the surface panel is collapsed to its slim strip (reported by the panel). */
+    PanelCollapsed = false;
+    /** Wide tier active (a content tab is focused) — drives the DEFAULT width only. */
+    PanelWide = false;
+    /** The user's explicit dragged width (persisted); null = follow the default tiers. */
+    userPanelWidth = null;
+    /** Current expanded panel width in px (rendered as the panel's inline width). */
+    PanelWidthPx = SURFACE_PANEL_DEFAULT_WIDTH;
+    /** True while the resize handle is mid-drag (brand-tints the handle). */
+    IsPanelResizing = false;
+    panelResizeStartX = 0;
+    panelResizeStartWidth = 0;
+    boundPanelResizeMove = this.onPanelResizeMove.bind(this);
+    boundPanelResizeEnd = this.onPanelResizeEnd.bind(this);
+    hostRef = inject(ElementRef);
+    ngZone = inject(NgZone);
+    /** The panel's rendered width: slim strip when collapsed, otherwise the current width. */
+    get PanelAreaSize() {
+        return this.PanelCollapsed ? SURFACE_PANEL_COLLAPSED_WIDTH : this.PanelWidthPx;
+    }
+    /** Resizing is meaningless while collapsed or when the surface fills (focus mode). */
+    get PanelResizeDisabled() {
+        return this.PanelCollapsed || this.ChannelFocusMode;
+    }
+    OnPanelCollapsedChange(collapsed) {
+        this.PanelCollapsed = collapsed;
+        this.cdr.markForCheck();
+    }
+    /** Wide-tier flips only move the DEFAULT width — an explicit user width always wins. */
+    OnPanelWideChanged(wide) {
+        this.PanelWide = wide;
+        if (this.userPanelWidth === null) {
+            this.PanelWidthPx = DefaultSurfacePanelWidth(wide, this.hostWidth());
+        }
+        this.cdr.markForCheck();
+    }
+    /** Mousedown on the resize handle: capture the start state and track the pointer document-wide. */
+    OnPanelResizeStart(event) {
+        if (this.PanelResizeDisabled) {
+            return;
+        }
+        event.preventDefault();
+        this.IsPanelResizing = true;
+        this.panelResizeStartX = event.clientX;
+        this.panelResizeStartWidth = this.PanelWidthPx;
+        document.body.style.cursor = 'col-resize';
+        document.body.style.userSelect = 'none';
+        this.ngZone.runOutsideAngular(() => {
+            document.addEventListener('mousemove', this.boundPanelResizeMove);
+            document.addEventListener('mouseup', this.boundPanelResizeEnd);
+        });
+        this.cdr.markForCheck();
+    }
+    /** Live drag: panel width follows the pointer delta, clamped to [min, 70% of the overlay]. */
+    onPanelResizeMove(event) {
+        if (!this.IsPanelResizing) {
+            return;
+        }
+        this.PanelWidthPx = SurfacePanelDragWidth(this.panelResizeStartWidth, this.panelResizeStartX, event.clientX, this.hostWidth());
+        this.ngZone.run(() => this.cdr.markForCheck());
+    }
+    /**
+     * Release: a genuine DRAG adopts the width as the user's explicit preference and
+     * persists it (debounced); a bare CLICK (movement under the tolerance) restores the
+     * start width and persists nothing — the handle never snaps on a click.
+     */
+    onPanelResizeEnd(event) {
+        if (!this.IsPanelResizing) {
+            return;
+        }
+        this.teardownPanelResize();
+        if (IsSurfacePanelDrag(this.panelResizeStartX, event.clientX)) {
+            this.userPanelWidth = this.PanelWidthPx;
+            this.persistPanelWidth(this.PanelWidthPx);
+        }
+        else {
+            this.PanelWidthPx = this.panelResizeStartWidth;
+        }
+        this.ngZone.run(() => {
+            this.IsPanelResizing = false;
+            this.cdr.markForCheck();
+        });
+    }
+    /** Double-click the handle: back to the default tier width; persist the reset. */
+    OnPanelResizeReset() {
+        this.userPanelWidth = null;
+        this.PanelWidthPx = DefaultSurfacePanelWidth(this.PanelWide, this.hostWidth());
+        this.persistPanelWidth(null);
+        this.cdr.markForCheck();
+    }
+    /** Removes the document-wide drag listeners and restores the body cursor/selection. */
+    teardownPanelResize() {
+        document.removeEventListener('mousemove', this.boundPanelResizeMove);
+        document.removeEventListener('mouseup', this.boundPanelResizeEnd);
+        document.body.style.cursor = '';
+        document.body.style.userSelect = '';
+    }
+    /**
+     * The overlay's measurable width for clamping. The component host is
+     * `display: contents` (zero rect) — measure the rendered `.call-overlay` div instead.
+     */
+    hostWidth() {
+        const host = this.hostRef.nativeElement;
+        const el = host.firstElementChild ?? host;
+        return el.getBoundingClientRect ? el.getBoundingClientRect().width : 0;
+    }
+    /** Reads the persisted width once per overlay instance (no-op when the engine isn't configured). */
+    loadPanelWidthPref() {
+        try {
+            const pref = ParseSurfacePanelPref(UserInfoEngine.Instance.GetSetting(SURFACE_PANEL_PREF_KEY));
+            if (pref) {
+                this.userPanelWidth = pref.Width;
+                // hostWidth() is 0 before first layout — the clamp then enforces only the
+                // minimum, and the 70% cap re-applies on the next real drag.
+                this.PanelWidthPx = ClampSurfacePanelWidth(pref.Width, this.hostWidth());
+                this.cdr.markForCheck();
+            }
+        }
+        catch {
+            // UserInfoEngine not configured (plain-node tests / early bootstrap) — default tiers apply.
+        }
+    }
+    /** Persists the width preference server-side (debounced); reset serializes {"width":null}. */
+    persistPanelWidth(width) {
+        try {
+            UserInfoEngine.Instance.SetSettingDebounced(SURFACE_PANEL_PREF_KEY, SerializeSurfacePanelPref(width));
+        }
+        catch {
+            // engine unavailable — width still applies for this session
+        }
+    }
+    // ── Progressive disclosure (the console that grows with you) ────────────────
+    /**
+     * True while the PURE-AUDIO hero (the orb) owns the main column. The captions
+     * preference IS the text-vs-orb switch: captions off (the voice-first default) shows
+     * the breathing orb at ANY disclosure level; captions on shows the thread. Review
+     * always shows the thread.
+     */
+    get ShowHero() {
+        return !this.IsReviewing && !this.ShowCaptions;
+    }
+    /**
+     * Whether the surface-panel area renders. The tabs have their OWN control (the
+     * Details toggle, plus the board auto-reveal and artifact-view requests) — they are
+     * deliberately DECOUPLED from typing/disclosure levels: revealing the composer must
+     * never surprise the user with the whole tab panel.
+     */
+    get ShowPanelArea() {
+        return this.IsReviewing || this.DetailsPeek;
+    }
+    /** The Details (tabs) toggle is always offered while live — it's the panel's one door. */
+    get ShowDetailsControl() {
+        return !this.IsReviewing;
+    }
+    /** Reads the persisted disclosure milestones (tolerant; defaults to day one). */
+    loadDisclosurePref() {
+        try {
+            this.Disclosure.Load(UserInfoEngine.Instance.GetSetting(REALTIME_UX_PREF_KEY));
+        }
+        catch {
+            // UserInfoEngine not configured (plain-node tests / early bootstrap) — day-one defaults.
+            this.Disclosure.Load(null);
+        }
+    }
+    /** Reads the persisted text-vs-orb preference (tolerant; default = voice-first OFF). */
+    loadCaptionsPref() {
+        try {
+            this.ShowCaptions = UserInfoEngine.Instance.GetSetting(RealtimeSessionOverlayComponent.CaptionsPrefKey) === 'true';
+        }
+        catch {
+            // UserInfoEngine not configured — voice-first default applies.
+        }
+    }
+    /** Persists the text-vs-orb preference (debounced, best-effort). */
+    persistCaptionsPref() {
+        try {
+            UserInfoEngine.Instance.SetSettingDebounced(RealtimeSessionOverlayComponent.CaptionsPrefKey, String(this.ShowCaptions));
+        }
+        catch {
+            // engine unavailable — the preference still applies for this session
+        }
+    }
+    /** Persists the disclosure milestones server-side (debounced, best-effort). */
+    persistDisclosure(serialized) {
+        try {
+            UserInfoEngine.Instance.SetSettingDebounced(REALTIME_UX_PREF_KEY, serialized);
+        }
+        catch {
+            // engine unavailable — the ratchet still applies for this browser session
+        }
+    }
+    /**
+     * Merged-state change: re-render only. DELIBERATELY no disclosure raise — per product
+     * direction, content never flips the console open: a running delegation is narrated
+     * aloud, a finished artifact lands as a GLOWING (unfocused) tab, and the ONLY thing
+     * that auto-reveals is a channel's first agent activity (the whiteboard demands eyes).
+     * A pure-audio user stays in pure audio until THEY ask for more.
+     */
+    onSessionStateChanged() {
+        this.cdr.markForCheck();
+    }
+    /**
+     * The agent ACTED on a channel (a tool call routed to its local executor — e.g. the
+     * first whiteboard write). THE ONE AUTO-REVEAL: the surface panel opens (as a peek —
+     * the left column stays exactly as it was, pure audio included) with the channel's tab
+     * focused and flashed, exactly once per channel — so the user discovers the board the
+     * moment it comes alive. Disclosure levels are NOT raised: no text, no composer, no
+     * extra chrome — just the board.
+     */
+    onChannelActivity(plugin) {
+        if (this.IsReviewing || this.revealedChannelKeys.has(plugin.ChannelName)) {
+            return;
+        }
+        this.revealedChannelKeys.add(plugin.ChannelName);
+        this.DetailsPeek = true; // the panel shows via the same on-demand mechanism Details uses
+        if (this.surfaceTabs) {
+            // Stream handler (a tool call), not a change-detection pass — reveal synchronously
+            // so the board is the visible tab the instant the agent's first stroke lands.
+            this.surfaceTabs.RevealChannel(plugin.ChannelName);
+        }
+        else {
+            // Panel not rendered yet (the peek just created it) — reveal once it exists.
+            this.pendingRevealKey = plugin.ChannelName;
+        }
+        this.cdr.markForCheck();
+    }
+    /** Active$ edges: session start resets the volatile level; session end ratchets + persists. */
+    onActiveChanged(active) {
+        if (active && !this.prevActive) {
+            this.Disclosure.BeginSession();
+            this.DetailsPeek = false;
+            this.ComposerOpen = false; // typing is opt-in per session (voice-first)
+            this.revealedChannelKeys.clear();
+            this.pendingRevealKey = null;
+            this.startAudioVisualLoop();
+        }
+        else if (!active && this.prevActive) {
+            this.persistDisclosure(this.Disclosure.RatchetOnSessionEnd());
+            this.stopAudioVisualLoop();
+        }
+        this.prevActive = active;
+        this.cdr.markForCheck();
+    }
+    // ── Audio-reactive visuals (the orb that vibrates like a speaker cone) ──────
+    //
+    // A requestAnimationFrame loop OUTSIDE Angular samples the client's audio meters
+    // (RealtimeSessionService.GetAudioActivity → driver AnalyserNodes), runs the frame through
+    // the smoothing state machine, and writes CSS custom properties + data attributes
+    // straight onto the rendered overlay element — zero change detection per frame. CSS
+    // gates on [data-audio-live]: with real metering the orb/EQ follow the waveform; when
+    // the driver attached no meters the attribute stays 'false' and the turn-state-driven
+    // keyframe animations keep working unchanged.
+    /** Per-frame smoothing state (attack/decay envelopes + direction hysteresis). */
+    audioSmoother = new RealtimeAudioVisualSmoother();
+    audioRafHandle = null;
+    /** Last attribute values written (attributes are only touched on change). */
+    lastAudioLive = null;
+    lastVoiceDirection = null;
+    /** Starts the sampling loop (idempotent). Runs outside Angular — no CD per frame. */
+    startAudioVisualLoop() {
+        if (this.audioRafHandle !== null || typeof requestAnimationFrame !== 'function') {
+            return;
+        }
+        this.audioSmoother.Reset();
+        this.ngZone.runOutsideAngular(() => {
+            const tick = () => {
+                this.audioRafHandle = requestAnimationFrame(tick);
+                if (this.Hidden) {
+                    return; // minimized — skip the work, keep the loop armed
+                }
+                const frame = this.audioSmoother.Next(this.voice.GetAudioActivity(), performance.now());
+                this.applyAudioVisualFrame(frame);
+            };
+            this.audioRafHandle = requestAnimationFrame(tick);
+        });
+    }
+    /** Stops the loop and returns the overlay to turn-state-driven animation. */
+    stopAudioVisualLoop() {
+        if (this.audioRafHandle !== null) {
+            cancelAnimationFrame(this.audioRafHandle);
+            this.audioRafHandle = null;
+        }
+        this.audioSmoother.Reset();
+        this.lastAudioLive = null;
+        this.lastVoiceDirection = null;
+        this.overlayElement()?.setAttribute('data-audio-live', 'false');
+    }
+    /** The rendered `.call-overlay` element (the :host is display:contents). */
+    overlayElement() {
+        const host = this.hostRef.nativeElement;
+        return host.firstElementChild ?? null;
+    }
+    /** Writes one smoothed frame as CSS vars/attributes (attributes only on change). */
+    applyAudioVisualFrame(frame) {
+        const el = this.overlayElement();
+        if (!el) {
+            return;
+        }
+        const live = frame !== null;
+        if (live !== this.lastAudioLive) {
+            this.lastAudioLive = live;
+            el.setAttribute('data-audio-live', String(live));
+        }
+        if (!frame) {
+            return;
+        }
+        el.style.setProperty('--voice-out', frame.OutputLevel.toFixed(3));
+        el.style.setProperty('--voice-in', frame.InputLevel.toFixed(3));
+        for (let i = 0; i < frame.Bins.length; i++) {
+            el.style.setProperty(`--eq-${i + 1}`, frame.Bins[i].toFixed(3));
+        }
+        if (frame.Direction !== this.lastVoiceDirection) {
+            this.lastVoiceDirection = frame.Direction;
+            el.setAttribute('data-voice-dir', frame.Direction);
+        }
+    }
+    /** The strip's Details control: peek at (or hide) the surface panel on demand. */
+    OnDetailsToggled() {
+        this.DetailsPeek = !this.DetailsPeek;
+        if (this.DetailsPeek) {
+            // Land on the marquee surface (channels lead the strip; Activity is pinned last).
+            setTimeout(() => this.surfaceTabs?.FocusFirstTab());
+        }
+        this.cdr.markForCheck();
+    }
+    /** The gear popover picked an interface density — apply + persist immediately. */
+    OnDensityChanged(density) {
+        this.Disclosure.SetDensity(density);
+        this.persistDisclosure(SerializeUxMilestones(this.Disclosure.Milestones));
+    }
+    /** The hero's "Show the conversation" affordance — turns the text preference on. */
+    OnTextReveal() {
+        this.OnCaptionsToggled(true);
+    }
+    /**
+     * The app-bar's "Pure audio": returns to the orb-only surface AND makes it stick —
+     * it sets the persisted interface density to `simple` (the same setting the gear
+     * writes), so a refresh / next call still opens pure audio. In-session reveals
+     * ("Show the conversation", T-to-type, Details) remain available and stay ephemeral;
+     * the gear's density control switches back to Standard/Pro/Auto whenever wanted.
+     */
+    OnPureAudio() {
+        this.Disclosure.SetDensity('simple');
+        this.persistDisclosure(SerializeUxMilestones(this.Disclosure.Milestones));
+        this.DetailsPeek = false;
+        this.cdr.markForCheck();
+    }
+    /** App-bar Minimize: hide the call view (CSS) — the call stays fully live. */
+    OnMinimize() {
+        this.voice.SetMinimized(true);
+    }
+    /** App-bar / strip End: tear the session down, then notify the host. */
+    async OnEndCall() {
+        await this.voice.EndVoiceSession();
+        this.Ended.emit();
+    }
+    /** Maps the realtime state onto the hero orb's `data-state` (active turn-states only). */
+    HeroOrbState(state) {
+        switch (state) {
+            case 'speaking': return 'speaking';
+            case 'thinking': return 'thinking';
+            default: return 'listening';
+        }
+    }
+    /** Short first-person status line for the pure-audio hero. */
+    HeroStateLabel(state) {
+        switch (state) {
+            case 'speaking': return `${this.AgentName} is speaking…`;
+            case 'thinking': return `${this.AgentName} is working…`;
+            case 'listening': return 'Listening';
+            case 'connecting': return 'Connecting…';
+            case 'error': return 'Connection error';
+            default: return 'On call';
+        }
+    }
+    /**
+     * T-TO-TYPE: pressing T during a live call reveals the composer (raising disclosure to
+     * the engaged level when needed) and focuses its input — typing always exists, it just
+     * whispers until used. Ignored while review/minimized, with modifiers, or when an
+     * editable element already has focus.
+     */
+    OnDocumentKeydown(event) {
+        if (this.Hidden || this.IsReviewing || !this.voice.IsActive) {
+            return;
+        }
+        if ((event.key !== 't' && event.key !== 'T') || event.metaKey || event.ctrlKey || event.altKey) {
+            return;
+        }
+        if (this.isEditableTarget(event.target) || this.isKeyboardCapturingSurfaceFocused()) {
+            return;
+        }
+        event.preventDefault();
+        this.OnComposerOpenChanged(true);
+        // The dock may have just been created — focus after this CD pass.
+        setTimeout(() => this.composer?.FocusInput());
+    }
+    /**
+     * True when the event target is a native text-editing element (an input, textarea, or contentEditable),
+     * where a bare letter should type — not trigger the T-to-type shortcut.
+     *
+     * @param eventTarget The keydown event's target.
+     * @returns Whether the target is an editable element.
+     */
+    isEditableTarget(eventTarget) {
+        const target = eventTarget;
+        return !!target && (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable);
+    }
+    /**
+     * True when a surface that opts into capturing keyboard input currently holds focus — notably the Remote
+     * Browser live canvas, which marks itself with `data-mj-capture-keys` while the user is driving it. When it
+     * has focus, the overlay's global shortcuts (T-to-type) must stand down so the user's keystrokes land in the
+     * remote browser, not the local composer. Decoupled by an attribute contract so the overlay needs no direct
+     * reference to the surface component.
+     *
+     * @returns Whether a keyboard-capturing surface is focused.
+     */
+    isKeyboardCapturingSurfaceFocused() {
+        const active = (typeof document !== 'undefined' ? document.activeElement : null);
+        return !!active && active.hasAttribute('data-mj-capture-keys');
+    }
+    /**
+     * The composer dock opened (strip Type control / T hotkey) or closed (the dock's hide
+     * control). Opening raises the 'engaged' milestone for the cross-session ratchet —
+     * but the dock itself stays a per-session, user-owned toggle either way.
+     */
+    OnComposerOpenChanged(open) {
+        this.ComposerOpen = open;
+        if (open) {
+            this.Disclosure.Raise('engaged');
+            setTimeout(() => this.composer?.FocusInput());
+        }
+        this.cdr.markForCheck();
+    }
+    ngOnDestroy() {
+        this.stopAudioVisualLoop();
+        if (this.IsPanelResizing) {
+            this.teardownPanelResize();
+            this.IsPanelResizing = false;
+        }
+        for (const sub of this.subs) {
+            sub.unsubscribe();
+        }
+        this.subs = [];
+        this.State.Detach();
+    }
+    /**
+     * Registers (or updates) an INTERACTIVE-CHANNEL tab on the surface panel. The overlay
+     * calls it for every registry-resolved plugin; hosts may also call it for bespoke
+     * template-based panes. Until a registration supplies a plugin / template, the tab
+     * renders the "coming online…" placeholder (re-register the same `Key` to upgrade).
+     * Safe to call before the panel has rendered — registrations are queued and flushed.
+     */
+    RegisterChannelTab(registration) {
+        if (this.surfaceTabs) {
+            this.surfaceTabs.RegisterChannelTab(registration);
+        }
+        else {
+            this.pendingChannelTabs.push(registration);
+        }
+    }
+    /**
+     * A done delegation card / rail entry asked to view a produced artifact's tab — an
+     * EXPLICIT user request, so it may open the (otherwise Details-controlled) panel.
+     */
+    OnOpenArtifactRequested(artifact) {
+        if (this.surfaceTabs) {
+            this.surfaceTabs.FocusArtifact(artifact);
+            return;
+        }
+        // Panel hidden — open it (Details mechanism) and focus once it exists.
+        this.DetailsPeek = true;
+        this.cdr.markForCheck();
+        setTimeout(() => this.surfaceTabs?.FocusArtifact(artifact));
+    }
+    /**
+     * Registers one surface tab per active channel plugin THAT HAS A SURFACE (key/title/icon from the
+     * plugin). Server-only channels ({@link BaseRealtimeChannelClient.HasSurface} === `false`) render no
+     * tab — their tools + perception are already wired by the session service; there is simply nothing
+     * to show in the surface panel.
+     */
+    registerChannelTabs(channels) {
+        this.cleanupStaleReviewBoardTab(channels);
+        for (const plugin of channels) {
+            if (!plugin.HasSurface()) {
+                continue; // server-only channel — no surface to tab.
+            }
+            this.RegisterChannelTab({
+                Key: plugin.ChannelName,
+                Title: plugin.TabTitle,
+                Icon: plugin.TabIcon,
+                Plugin: plugin
+            });
+        }
+        this.cdr.markForCheck();
+    }
+    /**
+     * REVIEW→LIVE continuation edge: when the resumed live session resolves its channel set
+     * WITHOUT a Whiteboard channel, the review-registered read-only board tab is now a dead
+     * surface — remove it (Activity regains focus if it was active). When the set HAS a
+     * Whiteboard channel, the plugin registration above upgrades the same tab key in place,
+     * so the review flag is simply released. Review ARTIFACT tabs are deliberately kept —
+     * they are wanted carryover into the live session.
+     */
+    cleanupStaleReviewBoardTab(channels) {
+        if (!this.reviewWhiteboardTabRegistered) {
+            return;
+        }
+        if (ShouldRemoveReviewWhiteboardTab(this.voice.IsActive, this.reviewWhiteboardTabRegistered, channels)) {
+            this.surfaceTabs?.RemoveTab('Whiteboard');
+            // Also drop a still-queued review registration (panel not rendered yet — rare but possible).
+            this.pendingChannelTabs = this.pendingChannelTabs.filter(r => !(r.Key === 'Whiteboard' && r.Content));
+            this.reviewWhiteboardTabRegistered = false;
+        }
+        else if (channels.some(c => c.ChannelName === 'Whiteboard')) {
+            this.reviewWhiteboardTabRegistered = false; // live plugin owns the tab now (upgraded in place)
+        }
+    }
+    /** Forwards channel registrations that arrived before the panel existed. */
+    flushPendingChannelTabs() {
+        if (this.surfaceTabs && this.pendingChannelTabs.length > 0) {
+            for (const reg of this.pendingChannelTabs) {
+                this.surfaceTabs.RegisterChannelTab(reg);
+            }
+            this.pendingChannelTabs = [];
+        }
+    }
+    /**
+     * The captions toggle = the persisted text-vs-orb switch: on → the thread renders
+     * (raising the text disclosure milestone); off → the orb hero owns the screen again,
+     * at any level. Persisted per-user so the choice survives refresh and devices.
+     */
+    OnCaptionsToggled(on) {
+        this.ShowCaptions = on;
+        if (on) {
+            this.Disclosure.Raise('text');
+        }
+        this.persistCaptionsPref();
+        this.cdr.markForCheck();
+    }
+    /** Reflect the gear toggle from the controls into the dev affordances. */
+    OnDevModeToggled(on) {
+        this.DevMode = on;
+    }
+    /** A dev link asked to open a delegated agent run record. */
+    OnOpenRunRequested(runId) {
+        this.requestNavigate('MJ: AI Agent Runs', runId);
+    }
+    /** The banner's dev link asked to open the live agent session record. */
+    OnOpenSessionRequested(sessionId) {
+        this.requestNavigate('MJ: AI Agent Sessions', sessionId);
+    }
+    // ── Session review mode ────────────────────────────────────────────────────
+    /** Review banner convenience accessors (null-safe against the review data). */
+    get ReviewStartedAt() {
+        return this._reviewData?.StartedAt ?? null;
+    }
+    get ReviewClosedAt() {
+        return this._reviewData?.ClosedAt ?? null;
+    }
+    get ReviewCloseReason() {
+        return this._reviewData?.CloseReason ?? null;
+    }
+    /** The reviewed session record's id — feeds the banner's dev "Open session" link. */
+    get ReviewSessionID() {
+        return this._reviewData?.SessionID ?? null;
+    }
+    /**
+     * Review controls: resume the reviewed session as a NEW live call (host handles the
+     * start). Flags the upcoming ReviewData→null transition as a CONTINUATION so the
+     * historical thread is kept (divider appended) instead of cleared.
+     */
+    OnStartLive() {
+        const review = this._reviewData;
+        if (!review) {
+            return;
+        }
+        this.pendingLiveContinuation = true;
+        this.StartLiveRequested.emit({
+            TargetAgentId: review.TargetAgentID,
+            ConversationId: review.ConversationID,
+            LastSessionId: review.SessionID
+        });
+    }
+    /** Review controls: close the review (host clears its review state). */
+    OnReviewClose() {
+        this.ReviewClosed.emit();
+    }
+    /**
+     * Enters review: replaces the shared state's thread with the historical items (all
+     * chain legs, dividers between legs), names the cards after the reviewed agent,
+     * rehydrates the saved whiteboard (when any), and registers the chain's history
+     * ARTIFACTS as unfocused surface tabs.
+     */
+    enterReview(review) {
+        this.State.AgentName = review.AgentName;
+        this.State.LoadHistoricalItems(BuildReviewThreadItems(review));
+        this.ReviewWhiteboard = this.parseReviewWhiteboard(review);
+        this.reviewArtifacts = review.Artifacts ?? [];
+        if (this.viewReady) {
+            // Let this CD pass create/refresh the surface panel before registering the tabs.
+            // ngZone.run is REQUIRED: review often opens through the deep-link/query-param
+            // path (a plain RxJS stream outside Angular's zone) — without re-entering the
+            // zone, the registration's markForCheck never gets a change-detection pass and
+            // the Whiteboard tab stays invisible until the user's next click.
+            setTimeout(() => this.ngZone.run(() => {
+                this.registerReviewBoardTab();
+                this.registerReviewArtifactTabs();
+            }), 0);
+        }
+        this.cdr.markForCheck();
+    }
+    /**
+     * Leaves review. Two distinct exits:
+     *  - REVIEW→LIVE CONTINUATION ({@link OnStartLive} was clicked): KEEP the historical
+     *    thread and append the "Resumed live session" divider so the new live items read
+     *    as a new section of the same conversation. Artifact tabs are left in place — the
+     *    chain's artifacts carry into the live session.
+     *  - plain CLOSE: clear everything so the conversation view returns clean.
+     */
+    exitReview() {
+        this.ReviewWhiteboard = null;
+        if (this.pendingLiveContinuation) {
+            this.pendingLiveContinuation = false;
+            this.State.StartLiveContinuation();
+        }
+        else {
+            this.reviewArtifacts = [];
+            this.State.Clear();
+        }
+        this.cdr.markForCheck();
+    }
+    /** Registers the reviewed chain's history artifacts as UNFOCUSED artifact tabs (idempotent). */
+    registerReviewArtifactTabs() {
+        if (!this.surfaceTabs || this.reviewArtifacts.length === 0) {
+            return;
+        }
+        for (const artifact of this.reviewArtifacts) {
+            this.surfaceTabs.RegisterArtifactTab(artifact, false);
+        }
+        this.cdr.markForCheck();
+    }
+    /**
+     * Rehydrates the reviewed session's saved Whiteboard channel state. TOLERANT: a missing
+     * or malformed state returns null — review simply shows no whiteboard tab.
+     */
+    parseReviewWhiteboard(review) {
+        const channel = review.ChannelStates.find(c => c.ChannelName.toLowerCase() === 'whiteboard');
+        if (!channel?.StateJson) {
+            return null;
+        }
+        try {
+            return WhiteboardState.FromJSON(channel.StateJson);
+        }
+        catch {
+            console.warn('[RealtimeSessionReview] Saved whiteboard state was malformed — skipping the board tab.');
+            return null;
+        }
+    }
+    /**
+     * Registers the read-only review whiteboard tab (no-op without a board / template) —
+     * FOCUSED: the session's channel surface is what the reviewer came to see; the
+     * Activity rail stays available but is never the default focus.
+     */
+    registerReviewBoardTab() {
+        if (!this.ReviewWhiteboard || !this.reviewBoardTpl) {
+            return;
+        }
+        this.RegisterChannelTab({
+            Key: 'Whiteboard',
+            Title: 'Whiteboard',
+            Icon: 'fa-solid fa-chalkboard',
+            Content: this.reviewBoardTpl,
+            Focus: true
+        });
+        this.reviewWhiteboardTabRegistered = true;
+        this.cdr.markForCheck();
+    }
+    /**
+     * A working delegation card's ✕ asked to cancel that delegated run — EXPLICIT user
+     * intent (barge-in never cancels work, by deliberate policy). The service calls the
+     * server cancel channel and flips the card to a failed "Cancelled by user" result.
+     */
+    OnCancelDelegation(callId) {
+        void this.voice.CancelDelegation(callId);
+    }
+    /** Minimizes the live call (it stays running) and asks the host to open the record. */
+    requestNavigate(entityName, recordId) {
+        this.voice.SetMinimized(true);
+        this.NavigateRequest.emit({ EntityName: entityName, RecordID: recordId });
+    }
+    // ── Focus layout + pill ────────────────────────────────────────────────────
+    /** A channel requested (or released) the focus layout via its host context. */
+    onChannelFocus(channel, focused) {
+        this.ChannelFocusMode = focused;
+        this.focusChannel = focused ? channel : null;
+        this.cdr.markForCheck();
+    }
+    /** Focus pill: toggle the mic mute. */
+    OnFocusPillMute() {
+        this.FocusPillMuted = this.voice.ToggleMute();
+    }
+    /** Focus pill: leave focus mode (show the thread column again). */
+    OnFocusPillExit() {
+        // Route through the focus-holding channel so ITS surface toggle stays in sync — it
+        // re-emits SetFocusMode(false) → onChannelFocus. Defensively clear the layout flag
+        // too (idempotent), covering channels whose surface isn't instantiated.
+        this.focusChannel?.RequestFocusExit();
+        this.ChannelFocusMode = false;
+        this.focusChannel = null;
+    }
+    /** Focus pill: end the call (mirrors the controls row's End button). */
+    async OnFocusPillEnd() {
+        await this.voice.EndVoiceSession();
+        this.Ended.emit();
+    }
+    /** Short status line for the focus pill (first person — the co-agent owns the work). */
+    FocusStateLabel(state) {
+        switch (state) {
+            case 'speaking': return `${this.AgentName} is speaking…`;
+            case 'thinking': return `${this.AgentName} is working…`;
+            case 'listening': return 'Listening';
+            case 'connecting': return 'Connecting…';
+            default: return '';
+        }
+    }
+    static ɵfac = function RealtimeSessionOverlayComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || RealtimeSessionOverlayComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: RealtimeSessionOverlayComponent, selectors: [["mj-realtime-session-overlay"]], viewQuery: function RealtimeSessionOverlayComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuery(RealtimeSurfaceTabsComponent, 5)(RealtimeComposerComponent, 5)(_c0, 5);
+        } if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.surfaceTabsRef = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.composer = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.reviewBoardTpl = _t.first);
+        } }, hostBindings: function RealtimeSessionOverlayComponent_HostBindings(rf, ctx) { if (rf & 1) {
+            i0.ɵɵlistener("keydown", function RealtimeSessionOverlayComponent_keydown_HostBindingHandler($event) { return ctx.OnDocumentKeydown($event); }, i0.ɵɵresolveDocument);
+        } }, inputs: { Hidden: "Hidden", AgentName: "AgentName", CurrentUser: "CurrentUser", EnvironmentID: "EnvironmentID", ReviewData: "ReviewData" }, outputs: { Ended: "Ended", NavigateRequest: "NavigateRequest", StartLiveRequested: "StartLiveRequested", ReviewClosed: "ReviewClosed" }, decls: 4, vars: 3, consts: [["reviewBoardTpl", ""], ["role", "region", 1, "call-overlay", 3, "call-overlay--hidden", "call-overlay--review", "board-focus"], ["role", "region", 1, "call-overlay"], [1, "call-main"], [3, "OpenSessionRequested", "CaptionsToggled", "DevModeToggled", "DensityChanged", "MinimizeRequested", "PureAudioRequested", "EndRequested", "StartLiveRequested", "CloseRequested", "State", "AgentName", "ModelName", "DevMode", "SessionID", "ReviewMode", "ReviewStartedAt", "ReviewClosedAt", "ReviewCloseReason", "CaptionsOn", "ShowCaptionsControl", "ShowGear", "ShowEnd", "ShowMinimize", "ShowPureAudio", "Density"], ["role", "status", "aria-live", "polite", 1, "banner-live-note"], [1, "call-body"], [1, "call-connecting"], ["role", "status", "aria-live", "polite", 1, "hero"], [3, "State", "AgentName", "UserName", "ShowCaptions", "DevMode"], ["role", "status", "aria-label", "Live call (board focus)", 1, "board-focus-pill"], ["aria-hidden", "true", 1, "fa-solid", "fa-comment-dots"], ["text", "Connecting to the live session\u2026", "size", "medium"], [1, "hero__stage"], ["aria-hidden", "true", 1, "hero__ring"], ["aria-hidden", "true", 1, "hero__ring", "hero__ring--2"], ["aria-hidden", "true", 1, "hero__ring", "hero__ring--3"], ["aria-hidden", "true", 1, "hero__orb"], ["aria-hidden", "true", 1, "hero__eq"], [1, "hero__name"], [1, "hero__sub"], ["type", "button", "title", "Show the conversation as text", 1, "hero__reveal", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-closed-captioning"], [3, "OpenRunRequested", "OpenArtifactRequested", "CancelRequested", "State", "AgentName", "UserName", "ShowCaptions", "DevMode"], [3, "OpenChanged", "CaptionsToggled", "DetailsToggled", "EndRequested", "Open", "CaptionsOn", "ShowDetails", "DetailsOn"], ["role", "separator", "aria-orientation", "vertical", "aria-label", "Resize the surface panel (double-click to reset)", "title", "Drag to resize \u2022 double-click to reset", 1, "call-resizer", 3, "call-resizer--active"], [1, "call-panel"], [3, "OpenRunRequested", "CollapsedChange", "WideChanged", "State", "DevMode", "CurrentUser", "EnvironmentID", "Fill"], ["role", "separator", "aria-orientation", "vertical", "aria-label", "Resize the surface panel (double-click to reset)", "title", "Drag to resize \u2022 double-click to reset", 1, "call-resizer", 3, "mousedown", "dblclick"], ["aria-hidden", "true", 1, "board-focus-pill__orb"], [1, "board-focus-pill__text"], [1, "board-focus-pill__name"], [1, "board-focus-pill__state"], ["type", "button", 1, "board-focus-pill__btn", 3, "click", "title"], ["aria-hidden", "true", 1, "fa-solid"], ["type", "button", "title", "Show thread", "aria-label", "Show the conversation thread", 1, "board-focus-pill__btn", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-table-columns"], ["type", "button", "title", "End call", "aria-label", "End the call", 1, "board-focus-pill__btn", "board-focus-pill__btn--end", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-phone-slash"], [1, "review-board-host"], [3, "State", "AgentName", "ReadOnly"]], template: function RealtimeSessionOverlayComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵconditionalCreate(0, RealtimeSessionOverlayComponent_Conditional_0_Template, 12, 32, "div", 1);
+            i0.ɵɵpipe(1, "async");
+            i0.ɵɵtemplate(2, RealtimeSessionOverlayComponent_ng_template_2_Template, 1, 1, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor);
+        } if (rf & 2) {
+            let tmp_1_0;
+            i0.ɵɵconditional((tmp_1_0 = i0.ɵɵpipeBind1(1, 1, ctx.ConnectionState$)) ? 0 : -1, tmp_1_0);
+        } }, dependencies: [CommonModule,
+            SharedGenericModule, i1.LoadingComponent, RealtimeAgentBannerComponent,
+            RealtimeSessionThreadComponent,
+            RealtimeChannelStripComponent,
+            RealtimeComposerComponent,
+            RealtimeSurfaceTabsComponent,
+            RealtimeWhiteboardBoardComponent, i2.AsyncPipe], styles: ["[_nghost-%COMP%] {\n  display: contents;\n}\n\n\n\n\n\n\n.call-overlay[_ngcontent-%COMP%] {\n  position: absolute;\n  inset: 0;\n  z-index: 50;\n  display: flex;\n  background: color-mix(in srgb, var(--mj-bg-page) 94%, transparent);\n  backdrop-filter: blur(8px);\n  overflow: hidden;\n}\n\n\n\n\n.call-overlay--hidden[_ngcontent-%COMP%] {\n  display: none;\n}\n\n\n\n\n\n.call-main[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 420px;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n\n.call-body[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  padding: 16px 22px;\n  min-height: 0;\n  scrollbar-width: thin;\n  scrollbar-color: var(--mj-border-strong) transparent;\n}\n.call-body[_ngcontent-%COMP%]::-webkit-scrollbar {\n  width: 6px;\n}\n.call-body[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n  background: var(--mj-border-strong);\n  border-radius: 3px;\n}\n\n.call-connecting[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  min-height: 160px;\n}\n\n\n\n\n\n\n.call-body--hero[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n}\n.hero[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 4px;\n  animation: _ngcontent-%COMP%_hero-in 420ms cubic-bezier(0.2, 0.8, 0.3, 1);\n}\n@keyframes _ngcontent-%COMP%_hero-in {\n  from { opacity: 0; transform: scale(0.94); }\n  to { opacity: 1; transform: scale(1); }\n}\n.hero__stage[_ngcontent-%COMP%] {\n  position: relative;\n  width: 220px;\n  height: 220px;\n  display: grid;\n  place-items: center;\n  margin-bottom: 4px;\n}\n\n\n.hero__orb[_ngcontent-%COMP%] {\n  width: 120px;\n  height: 120px;\n  border-radius: 50%;\n  position: relative;\n  background: radial-gradient(circle at 35% 30%,\n    var(--mj-brand-accent, var(--mj-brand-primary)),\n    var(--mj-brand-primary) 60%,\n    var(--mj-brand-primary-active, var(--mj-brand-primary)));\n  box-shadow:\n    0 0 0 8px color-mix(in srgb, var(--mj-brand-primary) 12%, transparent),\n    0 0 48px color-mix(in srgb, var(--mj-brand-primary) 45%, transparent);\n}\n.hero__orb[data-state='speaking'][_ngcontent-%COMP%] {\n  animation: _ngcontent-%COMP%_hero-orb-bob 0.9s ease-in-out infinite;\n}\n.hero__orb[data-state='listening'][_ngcontent-%COMP%] {\n  box-shadow:\n    0 0 0 8px color-mix(in srgb, var(--mj-status-success) 16%, transparent),\n    0 0 48px color-mix(in srgb, var(--mj-status-success) 40%, transparent);\n  background: radial-gradient(circle at 35% 30%,\n    color-mix(in srgb, var(--mj-status-success) 60%, white), var(--mj-brand-primary) 65%);\n}\n.hero__orb[data-state='thinking'][_ngcontent-%COMP%] {\n  box-shadow:\n    0 0 0 8px color-mix(in srgb, var(--mj-status-warning) 14%, transparent),\n    0 0 40px color-mix(in srgb, var(--mj-status-warning) 35%, transparent);\n}\n@keyframes _ngcontent-%COMP%_hero-orb-bob {\n  0%, 100% { transform: translateY(0); }\n  50% { transform: translateY(-4px); }\n}\n\n\n.hero__ring[_ngcontent-%COMP%] {\n  position: absolute;\n  width: 120px;\n  height: 120px;\n  border-radius: 50%;\n  border: 2px solid color-mix(in srgb, var(--mj-brand-primary) 55%, transparent);\n  opacity: 0;\n  animation: _ngcontent-%COMP%_hero-wave 2.7s cubic-bezier(0.2, 0.6, 0.4, 1) infinite;\n}\n.hero__ring--2[_ngcontent-%COMP%] { animation-delay: 0.9s; }\n.hero__ring--3[_ngcontent-%COMP%] { animation-delay: 1.8s; }\n@keyframes _ngcontent-%COMP%_hero-wave {\n  0% { transform: scale(1); opacity: 0.5; }\n  70% { opacity: 0.1; }\n  100% { transform: scale(1.85); opacity: 0; }\n}\n\n\n.hero__eq[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  height: 30px;\n  margin-bottom: 6px;\n}\n.hero__eq[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n  width: 4px;\n  height: 8px;\n  border-radius: var(--mj-radius-full, 9999px);\n  background: var(--mj-brand-accent, var(--mj-brand-primary));\n  opacity: 0.55;\n}\n.hero[data-state='speaking'][_ngcontent-%COMP%]   .hero__eq[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n  animation: _ngcontent-%COMP%_hero-eq 1.05s ease-in-out infinite;\n}\n.hero__eq[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]:nth-child(1) { animation-delay: 0s; }\n.hero__eq[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]:nth-child(2) { animation-delay: 0.14s; }\n.hero__eq[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]:nth-child(3) { animation-delay: 0.28s; }\n.hero__eq[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]:nth-child(4) { animation-delay: 0.07s; }\n.hero__eq[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]:nth-child(5) { animation-delay: 0.21s; }\n.hero__eq[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]:nth-child(6) { animation-delay: 0.35s; }\n.hero__eq[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]:nth-child(7) { animation-delay: 0.1s; }\n.hero__eq[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]:nth-child(8) { animation-delay: 0.24s; }\n.hero__eq[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]:nth-child(9) { animation-delay: 0.03s; }\n@keyframes _ngcontent-%COMP%_hero-eq {\n  0%, 100% { height: 7px; opacity: 0.6; }\n  50% { height: 28px; opacity: 1; }\n}\n.hero__name[_ngcontent-%COMP%] {\n  font-size: 19px;\n  font-weight: 800;\n  letter-spacing: -0.01em;\n  color: var(--mj-text-primary);\n}\n.hero__sub[_ngcontent-%COMP%] {\n  font-size: 12.5px;\n  color: var(--mj-text-muted);\n}\n\n\n\n\n\n\n\n.call-overlay[data-audio-live='true'][_ngcontent-%COMP%]   .hero__orb[_ngcontent-%COMP%] {\n  animation: none;\n  transform: scale(calc(1 + var(--voice-out, 0) * 0.18));\n  transition: transform 70ms linear;\n}\n.call-overlay[data-audio-live='true'][_ngcontent-%COMP%]   .hero__ring[_ngcontent-%COMP%] {\n  opacity: calc(var(--voice-out, 0) * 0.55);\n  animation-duration: 2.1s;\n}\n.call-overlay[data-audio-live='true'][data-voice-dir='user'][_ngcontent-%COMP%]   .hero__orb[_ngcontent-%COMP%] {\n  box-shadow:\n    0 0 0 8px color-mix(in srgb, var(--mj-status-success) 16%, transparent),\n    0 0 48px color-mix(in srgb, var(--mj-status-success) 45%, transparent);\n  background: radial-gradient(circle at 35% 30%,\n    color-mix(in srgb, var(--mj-status-success) 60%, white), var(--mj-brand-primary) 65%);\n}\n.call-overlay[data-audio-live='true'][data-voice-dir='user'][_ngcontent-%COMP%]   .hero__ring[_ngcontent-%COMP%] {\n  border-color: color-mix(in srgb, var(--mj-status-success) 55%, transparent);\n}\n\n\n.call-overlay[data-audio-live='true'][_ngcontent-%COMP%]   .hero__eq[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n  animation: none;\n  transition: height 70ms linear, opacity 120ms linear;\n}\n.call-overlay[data-audio-live='true'][_ngcontent-%COMP%]   .hero__eq[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]:nth-child(1) { height: calc(6px + var(--eq-1, 0) * 24px); opacity: calc(0.45 + var(--eq-1, 0) * 0.55); }\n.call-overlay[data-audio-live='true'][_ngcontent-%COMP%]   .hero__eq[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]:nth-child(2) { height: calc(6px + var(--eq-2, 0) * 24px); opacity: calc(0.45 + var(--eq-2, 0) * 0.55); }\n.call-overlay[data-audio-live='true'][_ngcontent-%COMP%]   .hero__eq[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]:nth-child(3) { height: calc(6px + var(--eq-3, 0) * 24px); opacity: calc(0.45 + var(--eq-3, 0) * 0.55); }\n.call-overlay[data-audio-live='true'][_ngcontent-%COMP%]   .hero__eq[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]:nth-child(4) { height: calc(6px + var(--eq-4, 0) * 24px); opacity: calc(0.45 + var(--eq-4, 0) * 0.55); }\n.call-overlay[data-audio-live='true'][_ngcontent-%COMP%]   .hero__eq[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]:nth-child(5) { height: calc(6px + var(--eq-5, 0) * 24px); opacity: calc(0.45 + var(--eq-5, 0) * 0.55); }\n.call-overlay[data-audio-live='true'][_ngcontent-%COMP%]   .hero__eq[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]:nth-child(6) { height: calc(6px + var(--eq-6, 0) * 24px); opacity: calc(0.45 + var(--eq-6, 0) * 0.55); }\n.call-overlay[data-audio-live='true'][_ngcontent-%COMP%]   .hero__eq[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]:nth-child(7) { height: calc(6px + var(--eq-7, 0) * 24px); opacity: calc(0.45 + var(--eq-7, 0) * 0.55); }\n.call-overlay[data-audio-live='true'][_ngcontent-%COMP%]   .hero__eq[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]:nth-child(8) { height: calc(6px + var(--eq-8, 0) * 24px); opacity: calc(0.45 + var(--eq-8, 0) * 0.55); }\n.call-overlay[data-audio-live='true'][_ngcontent-%COMP%]   .hero__eq[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]:nth-child(9) { height: calc(6px + var(--eq-9, 0) * 24px); opacity: calc(0.45 + var(--eq-9, 0) * 0.55); }\n.call-overlay[data-audio-live='true'][data-voice-dir='user'][_ngcontent-%COMP%]   .hero__eq[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n  background: var(--mj-status-success);\n}\n\n\n\n.hero__reveal[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  margin-top: 18px;\n  padding: 6px 14px;\n  border-radius: var(--mj-radius-full, 9999px);\n  border: 1px dashed var(--mj-border-strong);\n  background: transparent;\n  color: var(--mj-text-muted);\n  font-family: inherit;\n  font-size: 11.5px;\n  font-weight: 600;\n  cursor: pointer;\n  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;\n}\n.hero__reveal[_ngcontent-%COMP%]:hover {\n  color: var(--mj-text-secondary);\n  border-color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n}\n.hero__reveal[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 11px;\n}\n\n\n\n.banner-live-note[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: flex-start;\n  gap: 7px;\n  padding: 8px 22px 0;\n  font-size: 12px;\n  font-style: italic;\n  color: var(--mj-text-muted);\n  animation: _ngcontent-%COMP%_overlay-note-in 220ms ease;\n}\n.banner-live-note[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 10px;\n  margin-top: 3px;\n  flex-shrink: 0;\n}\n@keyframes _ngcontent-%COMP%_overlay-note-in {\n  from { opacity: 0; transform: translateY(2px); }\n  to { opacity: 1; transform: translateY(0); }\n}\n\n\n\n\n\n.call-overlay.board-focus[_ngcontent-%COMP%]   .call-main[_ngcontent-%COMP%] {\n  display: none;\n}\n.call-overlay.board-focus[_ngcontent-%COMP%]   mj-realtime-surface-tabs[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n}\n\n\n\n.board-focus-pill[_ngcontent-%COMP%] {\n  position: absolute;\n  left: 64px;\n  top: 12px;\n  z-index: 60;\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 7px 9px 7px 12px;\n  border-radius: var(--mj-radius-full, 999px);\n  background: color-mix(in srgb, var(--mj-bg-surface-card) 92%, transparent);\n  backdrop-filter: blur(8px);\n  border: 1px solid var(--mj-border-strong);\n  box-shadow: var(--mj-shadow-xl, 0 12px 32px rgba(0, 0, 0, 0.18));\n  animation: _ngcontent-%COMP%_overlay-note-in 220ms ease;\n}\n.board-focus-pill__orb[_ngcontent-%COMP%] {\n  width: 12px;\n  height: 12px;\n  border-radius: 50%;\n  flex-shrink: 0;\n  background: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 18%, transparent);\n}\n.board-focus-pill__orb[data-state='speaking'][_ngcontent-%COMP%], \n.board-focus-pill__orb[data-state='listening'][_ngcontent-%COMP%] {\n  animation: _ngcontent-%COMP%_board-pill-pulse 1.6s ease-in-out infinite;\n}\n.board-focus-pill__orb[data-state='error'][_ngcontent-%COMP%] {\n  background: var(--mj-status-error);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-status-error) 18%, transparent);\n}\n@keyframes _ngcontent-%COMP%_board-pill-pulse {\n  0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 18%, transparent); }\n  50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--mj-brand-primary) 8%, transparent); }\n}\n.board-focus-pill__text[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n}\n.board-focus-pill__name[_ngcontent-%COMP%] {\n  font-size: 12px;\n  font-weight: 700;\n  line-height: 1.2;\n  white-space: nowrap;\n  color: var(--mj-text-primary);\n}\n.board-focus-pill__state[_ngcontent-%COMP%] {\n  font-size: 10.5px;\n  font-weight: 600;\n  white-space: nowrap;\n  color: var(--mj-brand-primary);\n}\n.board-focus-pill__btn[_ngcontent-%COMP%] {\n  width: 30px;\n  height: 30px;\n  border-radius: 50%;\n  border: 1px solid var(--mj-border-strong);\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  font-size: 11px;\n  display: grid;\n  place-items: center;\n  font-family: inherit;\n  flex-shrink: 0;\n}\n.board-focus-pill__btn[_ngcontent-%COMP%]:hover {\n  color: var(--mj-text-primary);\n}\n.board-focus-pill__btn--active[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-active);\n  color: var(--mj-text-primary);\n}\n.board-focus-pill__btn--end[_ngcontent-%COMP%] {\n  background: var(--mj-status-error);\n  border-color: var(--mj-status-error);\n  color: var(--mj-text-inverse, #fff);\n}\n\n\n\n\n\n.call-overlay--review[_ngcontent-%COMP%] {\n  background:\n    linear-gradient(180deg, color-mix(in srgb, var(--mj-text-muted) 4%, transparent), transparent 120px),\n    var(--mj-bg-surface);\n}\n\n\n\n\n.review-board-host[_ngcontent-%COMP%] {\n  position: relative;\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n}\n\n\n\n\n\n\n.call-resizer[_ngcontent-%COMP%] {\n  flex: 0 0 7px;\n  width: 7px;\n  cursor: col-resize;\n  background: transparent;\n  transition: background 140ms ease;\n}\n.call-resizer[_ngcontent-%COMP%]:hover, \n.call-resizer--active[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 26%, transparent);\n}\n\n\n\n\n\n.call-panel[_ngcontent-%COMP%] {\n  flex: 0 1 auto;\n  min-width: 0;\n  display: flex;\n  overflow: hidden;\n  \n\n\n  animation: _ngcontent-%COMP%_panel-in 420ms cubic-bezier(0.25, 0.8, 0.3, 1);\n}\n@keyframes _ngcontent-%COMP%_panel-in {\n  from { opacity: 0; transform: translateX(48px); }\n  to { opacity: 1; transform: translateX(0); }\n}\n.call-panel[_ngcontent-%COMP%]    > *[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n  min-height: 0;\n}\n\n\n.call-overlay.board-focus[_ngcontent-%COMP%]   .call-panel[_ngcontent-%COMP%] {\n  flex: 1;\n}"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(RealtimeSessionOverlayComponent, [{
+        type: Component,
+        args: [{ standalone: true, selector: 'mj-realtime-session-overlay', imports: [
+                    CommonModule,
+                    SharedGenericModule,
+                    RealtimeAgentBannerComponent,
+                    RealtimeSessionThreadComponent,
+                    RealtimeChannelStripComponent,
+                    RealtimeComposerComponent,
+                    RealtimeSurfaceTabsComponent,
+                    RealtimeWhiteboardBoardComponent
+                ], template: "@if (ConnectionState$ | async; as state) {\n  <div class=\"call-overlay\"\n       [class.call-overlay--hidden]=\"Hidden\"\n       [class.call-overlay--review]=\"IsReviewing\"\n       [class.board-focus]=\"ChannelFocusMode\"\n       role=\"region\" [attr.aria-label]=\"IsReviewing ? 'Past session review' : 'Live voice session'\">\n\n    <!-- PROGRESSIVE DISCLOSURE (the console that grows with you \u2014 Redesign A Progressive):\n         level 0 is PURE AUDIO (the hero orb owns the main column; no thread, no composer;\n         the strip's Details control peeks at the panels on demand); level 1 reveals the\n         caption thread + captions control + type-to-type hint; level 2+ docks the composer\n         and keeps the surface panel. CONTENT NEVER FLIPS THE CONSOLE OPEN: finished\n         artifacts land as glowing unfocused tabs; the ONE auto-reveal is a channel's\n         first agent activity (e.g. the first whiteboard write), which opens the panel as\n         a peek with that tab focused \u2014 the left column stays exactly as it was.\n         REVIEW always renders the full console. -->\n    <div class=\"call-main\">\n      <!-- The UNIFIED APP-BAR: identity + state + every session action (Redesign A). -->\n      <mj-realtime-agent-banner\n        [State]=\"state\"\n        [AgentName]=\"AgentName\"\n        [ModelName]=\"IsReviewing ? null : (ModelName$ | async)\"\n        [DevMode]=\"DevMode\"\n        [SessionID]=\"IsReviewing ? ReviewSessionID : SessionID\"\n        [ReviewMode]=\"IsReviewing\"\n        [ReviewStartedAt]=\"ReviewStartedAt\"\n        [ReviewClosedAt]=\"ReviewClosedAt\"\n        [ReviewCloseReason]=\"ReviewCloseReason\"\n        [CaptionsOn]=\"ShowCaptions\"\n        [ShowCaptionsControl]=\"!IsReviewing\"\n        [ShowGear]=\"!IsReviewing && Disclosure.ShowGear\"\n        [ShowEnd]=\"!IsReviewing && Disclosure.ShowComposer\"\n        [ShowMinimize]=\"!IsReviewing\"\n        [ShowPureAudio]=\"!IsReviewing && Disclosure.SessionLevel > 0\"\n        [Density]=\"Disclosure.Milestones.Density\"\n        (OpenSessionRequested)=\"OnOpenSessionRequested($event)\"\n        (CaptionsToggled)=\"OnCaptionsToggled($event)\"\n        (DevModeToggled)=\"OnDevModeToggled($event)\"\n        (DensityChanged)=\"OnDensityChanged($event)\"\n        (MinimizeRequested)=\"OnMinimize()\"\n        (PureAudioRequested)=\"OnPureAudio()\"\n        (EndRequested)=\"OnEndCall()\"\n        (StartLiveRequested)=\"OnStartLive()\"\n        (CloseRequested)=\"OnReviewClose()\">\n      </mj-realtime-agent-banner>\n\n      <!-- Ephemeral narration with no active working card to anchor to \u2192 under the banner -->\n      @if (!IsReviewing && State.Narration && !State.ActiveCallId && Disclosure.ShowThread) {\n        <div class=\"banner-live-note\" role=\"status\" aria-live=\"polite\">\n          <i class=\"fa-solid fa-comment-dots\" aria-hidden=\"true\"></i>\n          {{ State.Narration }}\n        </div>\n      }\n\n      <div class=\"call-body\" [class.call-body--hero]=\"ShowHero && state !== 'connecting'\">\n        @if (!IsReviewing && state === 'connecting') {\n          <div class=\"call-connecting\">\n            <mj-loading text=\"Connecting to the live session\u2026\" size=\"medium\"></mj-loading>\n          </div>\n        } @else if (ShowHero) {\n          <!-- PURE-AUDIO HERO (level 0): the orb IS the interface \u2014 it breathes with the\n               audio inside expanding sound-wave rings; nothing to read, nothing to configure. -->\n          <div class=\"hero\" [attr.data-state]=\"state\" role=\"status\" aria-live=\"polite\">\n            <div class=\"hero__stage\">\n              <span class=\"hero__ring\" aria-hidden=\"true\"></span>\n              <span class=\"hero__ring hero__ring--2\" aria-hidden=\"true\"></span>\n              <span class=\"hero__ring hero__ring--3\" aria-hidden=\"true\"></span>\n              <div class=\"hero__orb\" [attr.data-state]=\"HeroOrbState(state)\" aria-hidden=\"true\"></div>\n            </div>\n            <div class=\"hero__eq\" aria-hidden=\"true\">\n              <span></span><span></span><span></span><span></span><span></span>\n              <span></span><span></span><span></span><span></span>\n            </div>\n            <div class=\"hero__name\">{{ AgentName }}</div>\n            <div class=\"hero__sub\">{{ HeroStateLabel(state) }}</div>\n            <button type=\"button\" class=\"hero__reveal\" (click)=\"OnTextReveal()\"\n                    title=\"Show the conversation as text\">\n              <i class=\"fa-solid fa-closed-captioning\" aria-hidden=\"true\"></i>\n              Show the conversation\n            </button>\n          </div>\n        } @else {\n          <mj-realtime-session-thread\n            [State]=\"State\"\n            [AgentName]=\"AgentName\"\n            [UserName]=\"CurrentUser?.Name || 'You'\"\n            [ShowCaptions]=\"IsReviewing ? true : ShowCaptions\"\n            [DevMode]=\"DevMode\"\n            (OpenRunRequested)=\"OnOpenRunRequested($event)\"\n            (OpenArtifactRequested)=\"OnOpenArtifactRequested($event)\"\n            (CancelRequested)=\"OnCancelDelegation($event)\">\n          </mj-realtime-session-thread>\n        }\n      </div>\n\n      @if (!IsReviewing) {\n        <!-- Active channels (earned with the console at level 2+) -->\n        @if (Disclosure.ShowComposer) {\n          <mj-realtime-channel-strip></mj-realtime-channel-strip>\n        }\n\n        <!-- The BOTTOM DOCK: phone-call strip \u21C4 fused minis+composer \u2014 the user's own\n             two-way toggle (Type opens, hide closes), never level-forced. -->\n        <mj-realtime-composer\n          [Open]=\"ComposerOpen\"\n          (OpenChanged)=\"OnComposerOpenChanged($event)\"\n          [CaptionsOn]=\"ShowCaptions\"\n          [ShowDetails]=\"ShowDetailsControl\"\n          [DetailsOn]=\"DetailsPeek\"\n          (CaptionsToggled)=\"OnCaptionsToggled($event)\"\n          (DetailsToggled)=\"OnDetailsToggled()\"\n          (EndRequested)=\"OnEndCall()\">\n        </mj-realtime-composer>\n      }\n    </div>\n\n    <!-- RIGHT: TABBED SURFACE PANEL \u2014 disclosure-gated: it EXISTS once earned (level 2+,\n         which the first delegation forces), peeked on demand via the strip's Details\n         control, or always in review. Slides in from the right when it arrives \u2014 the\n         panel's arrival IS the progress cue. -->\n    @if (ShowPanelArea) {\n      <!-- Resize handle (hidden while the panel is collapsed or a channel holds focus). -->\n      @if (!PanelResizeDisabled) {\n        <div class=\"call-resizer\"\n             [class.call-resizer--active]=\"IsPanelResizing\"\n             role=\"separator\" aria-orientation=\"vertical\"\n             aria-label=\"Resize the surface panel (double-click to reset)\"\n             title=\"Drag to resize \u2022 double-click to reset\"\n             (mousedown)=\"OnPanelResizeStart($event)\"\n             (dblclick)=\"OnPanelResizeReset()\"></div>\n      }\n\n      <div class=\"call-panel\" [style.width.px]=\"ChannelFocusMode ? null : PanelAreaSize\">\n        <mj-realtime-surface-tabs\n          [State]=\"State\"\n          [DevMode]=\"DevMode\"\n          [CurrentUser]=\"CurrentUser\"\n          [EnvironmentID]=\"EnvironmentID\"\n          [Fill]=\"ChannelFocusMode\"\n          (OpenRunRequested)=\"OnOpenRunRequested($event)\"\n          (CollapsedChange)=\"OnPanelCollapsedChange($event)\"\n          (WideChanged)=\"OnPanelWideChanged($event)\">\n        </mj-realtime-surface-tabs>\n      </div>\n    }\n\n    <!-- FOCUS floating call pill: the main column is hidden, so the live call's\n         identity + state + mute / show-thread / end controls ride over the surface. -->\n    @if (!IsReviewing && ChannelFocusMode) {\n      <div class=\"board-focus-pill\" role=\"status\" aria-label=\"Live call (board focus)\">\n        <span class=\"board-focus-pill__orb\" [attr.data-state]=\"state\" aria-hidden=\"true\"></span>\n        <span class=\"board-focus-pill__text\">\n          <span class=\"board-focus-pill__name\">Voice for {{ AgentName }}</span>\n          @if (FocusStateLabel(state); as label) {\n            <span class=\"board-focus-pill__state\">{{ label }}</span>\n          }\n        </span>\n        <button type=\"button\" class=\"board-focus-pill__btn\"\n                [class.board-focus-pill__btn--active]=\"FocusPillMuted\"\n                (click)=\"OnFocusPillMute()\"\n                [title]=\"FocusPillMuted ? 'Unmute' : 'Mute'\"\n                [attr.aria-label]=\"FocusPillMuted ? 'Unmute microphone' : 'Mute microphone'\">\n          <i class=\"fa-solid\" [class.fa-microphone]=\"!FocusPillMuted\" [class.fa-microphone-slash]=\"FocusPillMuted\" aria-hidden=\"true\"></i>\n        </button>\n        <button type=\"button\" class=\"board-focus-pill__btn\"\n                (click)=\"OnFocusPillExit()\"\n                title=\"Show thread\" aria-label=\"Show the conversation thread\">\n          <i class=\"fa-solid fa-table-columns\" aria-hidden=\"true\"></i>\n        </button>\n        <button type=\"button\" class=\"board-focus-pill__btn board-focus-pill__btn--end\"\n                (click)=\"OnFocusPillEnd()\"\n                title=\"End call\" aria-label=\"End the call\">\n          <i class=\"fa-solid fa-phone-slash\" aria-hidden=\"true\"></i>\n        </button>\n      </div>\n    }\n\n  </div>\n}\n\n<!-- SESSION REVIEW whiteboard pane body: the reviewed session's saved board, rehydrated\n     locally (WhiteboardState.FromJSON) and rendered READ-ONLY (pan/zoom only). Registered\n     as a template-based channel tab ONLY when a parseable Whiteboard state exists. -->\n<ng-template #reviewBoardTpl>\n  @if (ReviewWhiteboard; as board) {\n    <!-- The board host positions itself absolutely \u2014 give it a filling, positioned frame. -->\n    <div class=\"review-board-host\">\n      <mj-realtime-whiteboard\n        [State]=\"board\"\n        [AgentName]=\"AgentName\"\n        [ReadOnly]=\"true\">\n      </mj-realtime-whiteboard>\n    </div>\n  }\n</ng-template>\n", styles: [":host {\n  display: contents;\n}\n\n/* Fills the conversation panel IN PLACE: the chat area host provides the positioned\n   context (position:relative on .chat-area) and this covers it edge to edge \u2014 header,\n   thread and composer included. Opaque-ish page surface with a slight blur so the\n   conversation underneath reads as \"paused\", not as an app-wide modal. */\n.call-overlay {\n  position: absolute;\n  inset: 0;\n  z-index: 50;\n  display: flex;\n  background: color-mix(in srgb, var(--mj-bg-page) 94%, transparent);\n  backdrop-filter: blur(8px);\n  overflow: hidden;\n}\n\n/* Minimized: hidden (NOT destroyed) so the shell's session/view state survives while\n   the host shows its floating \"on call\" pill. The audio session is untouched. */\n.call-overlay--hidden {\n  display: none;\n}\n\n/* MAIN column: banner (top) \u2192 scrolling thread \u2192 channel strip \u2192 composer \u2192 controls.\n   The 420px floor keeps the call column readable while the panel is dragged wide\n   (the drag clamp's 70% cap is the other guard). */\n.call-main {\n  flex: 1;\n  min-width: 420px;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n\n.call-body {\n  flex: 1;\n  overflow-y: auto;\n  padding: 16px 22px;\n  min-height: 0;\n  scrollbar-width: thin;\n  scrollbar-color: var(--mj-border-strong) transparent;\n}\n.call-body::-webkit-scrollbar {\n  width: 6px;\n}\n.call-body::-webkit-scrollbar-thumb {\n  background: var(--mj-border-strong);\n  border-radius: 3px;\n}\n\n.call-connecting {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  min-height: 160px;\n}\n\n/* ---------- PURE-AUDIO HERO (disclosure level 0) ----------\n   The orb IS the interface: it breathes with the audio inside expanding sound-wave\n   rings, with a small voice equalizer underneath. Nothing to read, nothing to\n   configure \u2014 text, panels and the composer are revealed later (or peeked on demand). */\n.call-body--hero {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n}\n.hero {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 4px;\n  animation: hero-in 420ms cubic-bezier(0.2, 0.8, 0.3, 1);\n}\n@keyframes hero-in {\n  from { opacity: 0; transform: scale(0.94); }\n  to { opacity: 1; transform: scale(1); }\n}\n.hero__stage {\n  position: relative;\n  width: 220px;\n  height: 220px;\n  display: grid;\n  place-items: center;\n  margin-bottom: 4px;\n}\n/* The hero orb mirrors the app-bar orb's visual language at stage scale. */\n.hero__orb {\n  width: 120px;\n  height: 120px;\n  border-radius: 50%;\n  position: relative;\n  background: radial-gradient(circle at 35% 30%,\n    var(--mj-brand-accent, var(--mj-brand-primary)),\n    var(--mj-brand-primary) 60%,\n    var(--mj-brand-primary-active, var(--mj-brand-primary)));\n  box-shadow:\n    0 0 0 8px color-mix(in srgb, var(--mj-brand-primary) 12%, transparent),\n    0 0 48px color-mix(in srgb, var(--mj-brand-primary) 45%, transparent);\n}\n.hero__orb[data-state='speaking'] {\n  animation: hero-orb-bob 0.9s ease-in-out infinite;\n}\n.hero__orb[data-state='listening'] {\n  box-shadow:\n    0 0 0 8px color-mix(in srgb, var(--mj-status-success) 16%, transparent),\n    0 0 48px color-mix(in srgb, var(--mj-status-success) 40%, transparent);\n  background: radial-gradient(circle at 35% 30%,\n    color-mix(in srgb, var(--mj-status-success) 60%, white), var(--mj-brand-primary) 65%);\n}\n.hero__orb[data-state='thinking'] {\n  box-shadow:\n    0 0 0 8px color-mix(in srgb, var(--mj-status-warning) 14%, transparent),\n    0 0 40px color-mix(in srgb, var(--mj-status-warning) 35%, transparent);\n}\n@keyframes hero-orb-bob {\n  0%, 100% { transform: translateY(0); }\n  50% { transform: translateY(-4px); }\n}\n/* Expanding sound-wave rings (staggered). */\n.hero__ring {\n  position: absolute;\n  width: 120px;\n  height: 120px;\n  border-radius: 50%;\n  border: 2px solid color-mix(in srgb, var(--mj-brand-primary) 55%, transparent);\n  opacity: 0;\n  animation: hero-wave 2.7s cubic-bezier(0.2, 0.6, 0.4, 1) infinite;\n}\n.hero__ring--2 { animation-delay: 0.9s; }\n.hero__ring--3 { animation-delay: 1.8s; }\n@keyframes hero-wave {\n  0% { transform: scale(1); opacity: 0.5; }\n  70% { opacity: 0.1; }\n  100% { transform: scale(1.85); opacity: 0; }\n}\n/* Voice equalizer: lively while the agent speaks, near-still otherwise. */\n.hero__eq {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  height: 30px;\n  margin-bottom: 6px;\n}\n.hero__eq span {\n  width: 4px;\n  height: 8px;\n  border-radius: var(--mj-radius-full, 9999px);\n  background: var(--mj-brand-accent, var(--mj-brand-primary));\n  opacity: 0.55;\n}\n.hero[data-state='speaking'] .hero__eq span {\n  animation: hero-eq 1.05s ease-in-out infinite;\n}\n.hero__eq span:nth-child(1) { animation-delay: 0s; }\n.hero__eq span:nth-child(2) { animation-delay: 0.14s; }\n.hero__eq span:nth-child(3) { animation-delay: 0.28s; }\n.hero__eq span:nth-child(4) { animation-delay: 0.07s; }\n.hero__eq span:nth-child(5) { animation-delay: 0.21s; }\n.hero__eq span:nth-child(6) { animation-delay: 0.35s; }\n.hero__eq span:nth-child(7) { animation-delay: 0.1s; }\n.hero__eq span:nth-child(8) { animation-delay: 0.24s; }\n.hero__eq span:nth-child(9) { animation-delay: 0.03s; }\n@keyframes hero-eq {\n  0%, 100% { height: 7px; opacity: 0.6; }\n  50% { height: 28px; opacity: 1; }\n}\n.hero__name {\n  font-size: 19px;\n  font-weight: 800;\n  letter-spacing: -0.01em;\n  color: var(--mj-text-primary);\n}\n.hero__sub {\n  font-size: 12.5px;\n  color: var(--mj-text-muted);\n}\n/* ---------- AUDIO-REACTIVE MODE (data-audio-live, set by the rAF meter loop) ----------\n   With real audio metering the orb stops acting and starts REACTING: scale + glow follow\n   the smoothed output envelope (--voice-out) like a speaker cone, the EQ renders the true\n   spectrum (--eq-1..9), and [data-voice-dir] colors the visuals by who is speaking\n   (agent = brand, user = green). Without metering (driver attached no meters) the\n   attribute stays 'false' and the turn-state keyframe animations above stay in charge. */\n.call-overlay[data-audio-live='true'] .hero__orb {\n  animation: none;\n  transform: scale(calc(1 + var(--voice-out, 0) * 0.18));\n  transition: transform 70ms linear;\n}\n.call-overlay[data-audio-live='true'] .hero__ring {\n  opacity: calc(var(--voice-out, 0) * 0.55);\n  animation-duration: 2.1s;\n}\n.call-overlay[data-audio-live='true'][data-voice-dir='user'] .hero__orb {\n  box-shadow:\n    0 0 0 8px color-mix(in srgb, var(--mj-status-success) 16%, transparent),\n    0 0 48px color-mix(in srgb, var(--mj-status-success) 45%, transparent);\n  background: radial-gradient(circle at 35% 30%,\n    color-mix(in srgb, var(--mj-status-success) 60%, white), var(--mj-brand-primary) 65%);\n}\n.call-overlay[data-audio-live='true'][data-voice-dir='user'] .hero__ring {\n  border-color: color-mix(in srgb, var(--mj-status-success) 55%, transparent);\n}\n/* True-spectrum EQ: per-bar heights from the meter's bins. */\n.call-overlay[data-audio-live='true'] .hero__eq span {\n  animation: none;\n  transition: height 70ms linear, opacity 120ms linear;\n}\n.call-overlay[data-audio-live='true'] .hero__eq span:nth-child(1) { height: calc(6px + var(--eq-1, 0) * 24px); opacity: calc(0.45 + var(--eq-1, 0) * 0.55); }\n.call-overlay[data-audio-live='true'] .hero__eq span:nth-child(2) { height: calc(6px + var(--eq-2, 0) * 24px); opacity: calc(0.45 + var(--eq-2, 0) * 0.55); }\n.call-overlay[data-audio-live='true'] .hero__eq span:nth-child(3) { height: calc(6px + var(--eq-3, 0) * 24px); opacity: calc(0.45 + var(--eq-3, 0) * 0.55); }\n.call-overlay[data-audio-live='true'] .hero__eq span:nth-child(4) { height: calc(6px + var(--eq-4, 0) * 24px); opacity: calc(0.45 + var(--eq-4, 0) * 0.55); }\n.call-overlay[data-audio-live='true'] .hero__eq span:nth-child(5) { height: calc(6px + var(--eq-5, 0) * 24px); opacity: calc(0.45 + var(--eq-5, 0) * 0.55); }\n.call-overlay[data-audio-live='true'] .hero__eq span:nth-child(6) { height: calc(6px + var(--eq-6, 0) * 24px); opacity: calc(0.45 + var(--eq-6, 0) * 0.55); }\n.call-overlay[data-audio-live='true'] .hero__eq span:nth-child(7) { height: calc(6px + var(--eq-7, 0) * 24px); opacity: calc(0.45 + var(--eq-7, 0) * 0.55); }\n.call-overlay[data-audio-live='true'] .hero__eq span:nth-child(8) { height: calc(6px + var(--eq-8, 0) * 24px); opacity: calc(0.45 + var(--eq-8, 0) * 0.55); }\n.call-overlay[data-audio-live='true'] .hero__eq span:nth-child(9) { height: calc(6px + var(--eq-9, 0) * 24px); opacity: calc(0.45 + var(--eq-9, 0) * 0.55); }\n.call-overlay[data-audio-live='true'][data-voice-dir='user'] .hero__eq span {\n  background: var(--mj-status-success);\n}\n\n/* The quiet first reveal: show the conversation as text (raises disclosure to level 1). */\n.hero__reveal {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  margin-top: 18px;\n  padding: 6px 14px;\n  border-radius: var(--mj-radius-full, 9999px);\n  border: 1px dashed var(--mj-border-strong);\n  background: transparent;\n  color: var(--mj-text-muted);\n  font-family: inherit;\n  font-size: 11.5px;\n  font-weight: 600;\n  cursor: pointer;\n  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;\n}\n.hero__reveal:hover {\n  color: var(--mj-text-secondary);\n  border-color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n}\n.hero__reveal i {\n  font-size: 11px;\n}\n\n/* Ephemeral narration shown under the banner when no working card anchors it */\n.banner-live-note {\n  display: flex;\n  align-items: flex-start;\n  gap: 7px;\n  padding: 8px 22px 0;\n  font-size: 12px;\n  font-style: italic;\n  color: var(--mj-text-muted);\n  animation: overlay-note-in 220ms ease;\n}\n.banner-live-note i {\n  font-size: 10px;\n  margin-top: 3px;\n  flex-shrink: 0;\n}\n@keyframes overlay-note-in {\n  from { opacity: 0; transform: translateY(2px); }\n  to { opacity: 1; transform: translateY(0); }\n}\n\n/* ---------- FOCUS-BOARD mode (whiteboard \"Focus board\" toggle) ----------\n   The main call column collapses away entirely and the surface panel (whiteboard tab)\n   fills the overlay; a compact floating call pill keeps the live call reachable. */\n.call-overlay.board-focus .call-main {\n  display: none;\n}\n.call-overlay.board-focus mj-realtime-surface-tabs {\n  flex: 1;\n  min-width: 0;\n}\n\n/* Floating call pill: orb + state + mute / show-thread / end (per the whiteboard mockup). */\n.board-focus-pill {\n  position: absolute;\n  left: 64px;\n  top: 12px;\n  z-index: 60;\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 7px 9px 7px 12px;\n  border-radius: var(--mj-radius-full, 999px);\n  background: color-mix(in srgb, var(--mj-bg-surface-card) 92%, transparent);\n  backdrop-filter: blur(8px);\n  border: 1px solid var(--mj-border-strong);\n  box-shadow: var(--mj-shadow-xl, 0 12px 32px rgba(0, 0, 0, 0.18));\n  animation: overlay-note-in 220ms ease;\n}\n.board-focus-pill__orb {\n  width: 12px;\n  height: 12px;\n  border-radius: 50%;\n  flex-shrink: 0;\n  background: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 18%, transparent);\n}\n.board-focus-pill__orb[data-state='speaking'],\n.board-focus-pill__orb[data-state='listening'] {\n  animation: board-pill-pulse 1.6s ease-in-out infinite;\n}\n.board-focus-pill__orb[data-state='error'] {\n  background: var(--mj-status-error);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-status-error) 18%, transparent);\n}\n@keyframes board-pill-pulse {\n  0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 18%, transparent); }\n  50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--mj-brand-primary) 8%, transparent); }\n}\n.board-focus-pill__text {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n}\n.board-focus-pill__name {\n  font-size: 12px;\n  font-weight: 700;\n  line-height: 1.2;\n  white-space: nowrap;\n  color: var(--mj-text-primary);\n}\n.board-focus-pill__state {\n  font-size: 10.5px;\n  font-weight: 600;\n  white-space: nowrap;\n  color: var(--mj-brand-primary);\n}\n.board-focus-pill__btn {\n  width: 30px;\n  height: 30px;\n  border-radius: 50%;\n  border: 1px solid var(--mj-border-strong);\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  font-size: 11px;\n  display: grid;\n  place-items: center;\n  font-family: inherit;\n  flex-shrink: 0;\n}\n.board-focus-pill__btn:hover {\n  color: var(--mj-text-primary);\n}\n.board-focus-pill__btn--active {\n  background: var(--mj-bg-surface-active);\n  color: var(--mj-text-primary);\n}\n.board-focus-pill__btn--end {\n  background: var(--mj-status-error);\n  border-color: var(--mj-status-error);\n  color: var(--mj-text-inverse, #fff);\n}\n\n/* ---------- Session review mode ---------- */\n/* Subtle archival tint so a glance says \"this is history, not a live call\". */\n.call-overlay--review {\n  background:\n    linear-gradient(180deg, color-mix(in srgb, var(--mj-text-muted) 4%, transparent), transparent 120px),\n    var(--mj-bg-surface);\n}\n\n/* The review whiteboard pane body: the board component positions itself absolutely\n   (inset: 0), so its template-based pane needs a filling, positioned frame. */\n.review-board-host {\n  position: relative;\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n}\n\n/* ---------- flex layout (main column | resize handle | surface panel) ---------- */\n/* Token-styled resize handle: invisible until hover, brand-tinted while interacting.\n   7px hit target, col-resize cursor; removed (not rendered) while collapsed / focus. */\n.call-resizer {\n  flex: 0 0 7px;\n  width: 7px;\n  cursor: col-resize;\n  background: transparent;\n  transition: background 140ms ease;\n}\n.call-resizer:hover,\n.call-resizer--active {\n  background: color-mix(in srgb, var(--mj-brand-primary) 26%, transparent);\n}\n/* The surface panel: a plain fixed-width flex item (inline width set by the overlay;\n   collapsed = the slim strip width). flex-shrink lets it yield to the call column's\n   min-width on tight overlays; overflow hidden keeps the flex height chain intact so\n   the panel's content scrolls internally. */\n.call-panel {\n  flex: 0 1 auto;\n  min-width: 0;\n  display: flex;\n  overflow: hidden;\n  /* Disclosure-gated: the panel is CREATED when earned/peeked \u2014 its arrival slides in\n     from the right so the reveal doubles as the progress cue. */\n  animation: panel-in 420ms cubic-bezier(0.25, 0.8, 0.3, 1);\n}\n@keyframes panel-in {\n  from { opacity: 0; transform: translateX(48px); }\n  to { opacity: 1; transform: translateX(0); }\n}\n.call-panel > * {\n  flex: 1;\n  min-width: 0;\n  min-height: 0;\n}\n/* Board-focus fill: the panel owns the whole overlay (the main column is hidden). */\n.call-overlay.board-focus .call-panel {\n  flex: 1;\n}\n"] }]
+    }], () => [], { Hidden: [{
+            type: Input
+        }], AgentName: [{
+            type: Input
+        }], CurrentUser: [{
+            type: Input
+        }], EnvironmentID: [{
+            type: Input
+        }], ReviewData: [{
+            type: Input
+        }], Ended: [{
+            type: Output
+        }], NavigateRequest: [{
+            type: Output
+        }], StartLiveRequested: [{
+            type: Output
+        }], ReviewClosed: [{
+            type: Output
+        }], surfaceTabsRef: [{
+            type: ViewChild,
+            args: [RealtimeSurfaceTabsComponent]
+        }], composer: [{
+            type: ViewChild,
+            args: [RealtimeComposerComponent]
+        }], reviewBoardTpl: [{
+            type: ViewChild,
+            args: ['reviewBoardTpl']
+        }], OnDocumentKeydown: [{
+            type: HostListener,
+            args: ['document:keydown', ['$event']]
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(RealtimeSessionOverlayComponent, { className: "RealtimeSessionOverlayComponent", filePath: "src/lib/components/realtime/realtime-session-overlay.component.ts", lineNumber: 118 }); })();
+//# sourceMappingURL=realtime-session-overlay.component.js.map