@memberjunction/ng-conversations 5.43.0 → 5.45.0

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

@@ -1,7 +1,9 @@
 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 { BaseAngularComponent } from '@memberjunction/ng-base-types';
 import { SharedGenericModule } from '@memberjunction/ng-shared-generic';
+import { MJStorageMediaPlayerComponent } from '@memberjunction/ng-media-player';
 import { RealtimeSessionService } from '../../services/realtime-session.service';
 import { BuildReviewThreadItems } from '../../services/realtime-session-review.service';
 import { RealtimeSessionState } from './realtime-session-state';
@@ -12,16 +14,19 @@ 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 { resolveRealtimeUi, DEFAULT_REALTIME_UI_INPUTS, DEFAULT_REALTIME_UI_SIGNALS } from './realtime-ui-config';
 import { RealtimeAudioVisualSmoother } from './realtime-audio-visuals';
 import { ShouldRemoveReviewWhiteboardTab } from './realtime-surface-tabs.model';
+import { ShouldRegisterChannelTabUpFront } from './realtime-surface-tab-style';
 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"];
+const _c1 = ["recordingTpl"];
 function RealtimeSessionOverlayComponent_Conditional_0_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 5);
-    i0.ɵɵelement(1, "i", 11);
+    i0.ɵɵelementStart(0, "div", 6);
+    i0.ɵɵelement(1, "i", 12);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -30,27 +35,27 @@ function RealtimeSessionOverlayComponent_Conditional_0_Conditional_4_Template(rf
     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.ɵɵelementStart(0, "div", 8);
+    i0.ɵɵelement(1, "mj-loading", 13);
     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.ɵɵelementStart(0, "div", 9)(1, "div", 14);
+    i0.ɵɵelement(2, "span", 15)(3, "span", 16)(4, "span", 17)(5, "div", 18);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "div", 18);
+    i0.ɵɵelementStart(6, "div", 19);
     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.ɵɵelementStart(16, "div", 20);
     i0.ɵɵtext(17);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(18, "div", 20);
+    i0.ɵɵelementStart(18, "div", 21);
     i0.ɵɵtext(19);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(20, "button", 21);
+    i0.ɵɵelementStart(20, "button", 22);
     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.ɵɵelement(21, "i", 23);
     i0.ɵɵtext(22, " Show the conversation ");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -66,7 +71,7 @@ function RealtimeSessionOverlayComponent_Conditional_0_Conditional_7_Template(rf
 } }
 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.ɵɵelementStart(0, "mj-realtime-session-thread", 24);
     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) {
@@ -79,18 +84,18 @@ function RealtimeSessionOverlayComponent_Conditional_0_Conditional_9_Conditional
 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.ɵɵelementStart(1, "mj-realtime-composer", 25);
+    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()); })("MuteChanged", function RealtimeSessionOverlayComponent_Conditional_0_Conditional_9_Template_mj_realtime_composer_MuteChanged_1_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnComposerMuteChanged($event)); })("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.ɵɵconditional(ctx_r1.ChannelStripVisible ? 0 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("Open", ctx_r1.ComposerOpen)("CaptionsOn", ctx_r1.ShowCaptions)("ShowDetails", ctx_r1.ShowDetailsControl)("DetailsOn", ctx_r1.DetailsPeek);
+    i0.ɵɵproperty("Open", ctx_r1.ComposerOpen)("Compact", ctx_r1.Ui.compact && ctx_r1.Ui.chrome === "orb")("CaptionsOn", ctx_r1.ShowCaptions)("IsMuted", ctx_r1.Muted)("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.ɵɵelementStart(0, "div", 29);
     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) {
@@ -99,8 +104,8 @@ function RealtimeSessionOverlayComponent_Conditional_0_Conditional_10_Conditiona
 } }
 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.ɵɵconditionalCreate(0, RealtimeSessionOverlayComponent_Conditional_0_Conditional_10_Conditional_0_Template, 1, 2, "div", 26);
+    i0.ɵɵelementStart(1, "div", 27)(2, "mj-realtime-surface-tabs", 28);
     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) {
@@ -109,10 +114,10 @@ function RealtimeSessionOverlayComponent_Conditional_0_Conditional_10_Template(r
     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);
+    i0.ɵɵproperty("State", ctx_r1.State)("DevMode", ctx_r1.DevMode)("CurrentUser", ctx_r1.CurrentUser)("EnvironmentID", ctx_r1.EnvironmentID)("ShowActivityTab", ctx_r1.ShowActivityTab)("ExtraArtifacts", ctx_r1.ReviewArtifacts)("Fill", ctx_r1.ChannelFocusMode);
 } }
 function RealtimeSessionOverlayComponent_Conditional_0_Conditional_11_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 32);
+    i0.ɵɵelementStart(0, "span", 33);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -121,27 +126,27 @@ function RealtimeSessionOverlayComponent_Conditional_0_Conditional_11_Conditiona
 } }
 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.ɵɵelementStart(0, "div", 11);
+    i0.ɵɵelement(1, "span", 30);
+    i0.ɵɵelementStart(2, "span", 31)(3, "span", 32);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(5, RealtimeSessionOverlayComponent_Conditional_0_Conditional_11_Conditional_5_Template, 2, 1, "span", 32);
+    i0.ɵɵconditionalCreate(5, RealtimeSessionOverlayComponent_Conditional_0_Conditional_11_Conditional_5_Template, 2, 1, "span", 33);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "button", 33);
+    i0.ɵɵelementStart(6, "button", 34);
     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.ɵɵelement(7, "i", 35);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "button", 35);
+    i0.ɵɵelementStart(8, "button", 36);
     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.ɵɵelement(9, "i", 37);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "button", 37);
+    i0.ɵɵelementStart(10, "button", 38);
     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.ɵɵelement(11, "i", 39);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    let tmp_6_0;
+    let tmp_7_0;
     const state_r4 = i0.ɵɵnextContext();
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
@@ -149,7 +154,7 @@ function RealtimeSessionOverlayComponent_Conditional_0_Conditional_11_Template(r
     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.ɵɵconditional((tmp_7_0 = ctx_r1.FocusStateLabel(state_r4)) ? 5 : -1, tmp_7_0);
     i0.ɵɵadvance();
     i0.ɵɵclassProp("board-focus-pill__btn--active", ctx_r1.FocusPillMuted);
     i0.ɵɵproperty("title", ctx_r1.FocusPillMuted ? "Unmute" : "Mute");
@@ -159,18 +164,18 @@ function RealtimeSessionOverlayComponent_Conditional_0_Conditional_11_Template(r
 } }
 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.ɵɵelementStart(0, "div", 3)(1, "div", 4)(2, "mj-realtime-agent-banner", 5);
     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.ɵɵ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)); })("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()); })("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.ɵɵconditionalCreate(4, RealtimeSessionOverlayComponent_Conditional_0_Conditional_4_Template, 3, 1, "div", 6);
+    i0.ɵɵelementStart(5, "div", 7);
+    i0.ɵɵconditionalCreate(6, RealtimeSessionOverlayComponent_Conditional_0_Conditional_6_Template, 2, 0, "div", 8)(7, RealtimeSessionOverlayComponent_Conditional_0_Conditional_7_Template, 23, 4, "div", 9)(8, RealtimeSessionOverlayComponent_Conditional_0_Conditional_8_Template, 1, 5, "mj-realtime-session-thread", 10);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(9, RealtimeSessionOverlayComponent_Conditional_0_Conditional_9_Template, 2, 5);
+    i0.ɵɵconditionalCreate(9, RealtimeSessionOverlayComponent_Conditional_0_Conditional_9_Template, 2, 7);
     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.ɵɵconditionalCreate(10, RealtimeSessionOverlayComponent_Conditional_0_Conditional_10_Template, 3, 10);
+    i0.ɵɵconditionalCreate(11, RealtimeSessionOverlayComponent_Conditional_0_Conditional_11_Template, 12, 11, "div", 11);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const state_r4 = ctx;
@@ -178,7 +183,7 @@ function RealtimeSessionOverlayComponent_Conditional_0_Template(rf, ctx) { if (r
     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.ɵɵproperty("State", state_r4)("Compact", !ctx_r1.IsReviewing && ctx_r1.Ui.compact && ctx_r1.Ui.chrome === "orb")("AgentName", ctx_r1.AgentName)("ModelName", ctx_r1.IsReviewing ? null : i0.ɵɵpipeBind1(3, 28, 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)("ShowGear", !ctx_r1.IsReviewing && ctx_r1.Ui.showGear)("ShowDensityPicker", ctx_r1.Ui.showDensityPicker)("ShowMinimize", !ctx_r1.IsReviewing && ctx_r1.Ui.showMinimize)("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();
@@ -193,8 +198,8 @@ function RealtimeSessionOverlayComponent_Conditional_0_Template(rf, ctx) { if (r
     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.ɵɵelementStart(0, "div", 40);
+    i0.ɵɵelement(1, "mj-realtime-whiteboard", 41);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -202,11 +207,20 @@ function RealtimeSessionOverlayComponent_ng_template_2_Conditional_0_Template(rf
     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);
+    i0.ɵɵconditionalCreate(0, RealtimeSessionOverlayComponent_ng_template_2_Conditional_0_Template, 2, 3, "div", 40);
 } if (rf & 2) {
-    let tmp_2_0;
+    let tmp_3_0;
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵconditional((tmp_2_0 = ctx_r1.ReviewWhiteboard) ? 0 : -1, tmp_2_0);
+    i0.ɵɵconditional((tmp_3_0 = ctx_r1.ReviewWhiteboard) ? 0 : -1, tmp_3_0);
+} }
+function RealtimeSessionOverlayComponent_ng_template_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 42);
+    i0.ɵɵelement(1, "mj-storage-media-player", 43);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("FileID", ctx_r1.ReviewRecordingFileID)("Transcript", ctx_r1.ReviewCues)("Provider", ctx_r1.Provider);
 } }
 /**
  * The "call mode" overlay for a live real-time voice session. Hosted by the
@@ -255,7 +269,7 @@ function RealtimeSessionOverlayComponent_ng_template_2_Template(rf, ctx) { if (r
  * 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 {
+export class RealtimeSessionOverlayComponent extends BaseAngularComponent {
     _agentName = 'Sage';
     /**
      * True while the call is MINIMIZED: the overlay hides itself (CSS, not destruction) so
@@ -276,6 +290,101 @@ export class RealtimeSessionOverlayComponent {
     CurrentUser = null;
     /** The active environment id, threaded to the surface panel's artifact viewer. */
     EnvironmentID = '';
+    // ── Declarative UI configuration (host controls every aspect of the surface) ──
+    //
+    // Each input is a thin, PascalCase setter over a private slot in {@link _uiInputs}.
+    // When a host binds it, that field wins over the {@link UiConfig} bag (individual
+    // input precedence). Setting any of these recomputes the resolved view-model so the
+    // change takes effect on the next CD pass. Every field is optional and defaults to
+    // the historical behaviour via {@link DEFAULT_REALTIME_UI_INPUTS}, so existing call
+    // sites that bind none of them behave exactly as before.
+    //
+    // See {@link RealtimeUiInputs} / the package README for the full contract + recipes.
+    /**
+     * The chrome the widget renders: the ambient `'orb'`, the structured `'console'`, or
+     * `'auto'` (default) which starts as an orb and graduates to a console once the
+     * container is wide enough AND the user has revealed text. Mirrors
+     * {@link RealtimeUiInputs.chrome}.
+     *
+     * @example Force the rich console for a full-screen route:
+     * ```html
+     * <mj-realtime-session-overlay [Chrome]="'console'"></mj-realtime-session-overlay>
+     * ```
+     */
+    set Chrome(value) { this.setUiInput('chrome', value); }
+    get Chrome() { return this._uiInputs.chrome; }
+    /**
+     * In `'auto'` chrome, the container width (px) at/above which the widget may graduate
+     * to a console (still gated on text being revealed). Default `560`. Mirrors
+     * {@link RealtimeUiInputs.consoleBreakpointPx}.
+     */
+    set ConsoleBreakpointPx(value) { this.setUiInput('consoleBreakpointPx', value); }
+    get ConsoleBreakpointPx() { return this._uiInputs.consoleBreakpointPx; }
+    /**
+     * Force dense spacing/typography regardless of width (useful for tight mobile sheets).
+     * Default `false` — compactness is otherwise inferred from the container width.
+     */
+    set Compact(value) { this.setUiInput('compact', value); }
+    get Compact() { return this._uiInputs.compact; }
+    /** Fade non-essential controls when the session is idle (orb chrome only). Default `true`. */
+    set AutoHideControls(value) { this.setUiInput('autoHideControls', value); }
+    get AutoHideControls() { return this._uiInputs.autoHideControls; }
+    /**
+     * May the user reveal the transcript at all? `false` makes the widget a pure voice orb
+     * with no path to text (and never graduates to a console in `'auto'`). Default `true`.
+     */
+    set AllowTextReveal(value) { this.setUiInput('allowTextReveal', value); }
+    get AllowTextReveal() { return this._uiInputs.allowTextReveal; }
+    /** Show the captions toggle. Default `true`. */
+    set ShowCaptionsControl(value) { this.setUiInput('showCaptionsControl', value); }
+    get ShowCaptionsControl() { return this._uiInputs.showCaptionsControl; }
+    /** Show the density picker inside the gear menu. Default `true`. */
+    set ShowDensityPicker(value) { this.setUiInput('showDensityPicker', value); }
+    get ShowDensityPicker() { return this._uiInputs.showDensityPicker; }
+    /** Show the minimize control (collapse the call without ending it). Default `true`. */
+    set ShowMinimize(value) { this.setUiInput('showMinimize', value); }
+    get ShowMinimize() { return this._uiInputs.showMinimize; }
+    /** Show the end-call control. Default `true` (hosts that own their own end button may hide it). */
+    set ShowEnd(value) { this.setUiInput('showEnd', value); }
+    get ShowEnd() { return this._uiInputs.showEnd; }
+    /**
+     * Show the right-hand surface panel (whiteboard / browser / interactive channels).
+     * Default `true`; only renders in console chrome and once a panel is actually earned.
+     */
+    set ShowSurfacePanel(value) { this.setUiInput('showSurfacePanel', value); }
+    get ShowSurfacePanel() { return this._uiInputs.showSurfacePanel; }
+    /** Show the channel strip (active interactive channels). Default `true`. */
+    set ShowChannels(value) { this.setUiInput('showChannels', value); }
+    get ShowChannels() { return this._uiInputs.showChannels; }
+    /** Show the Activity rail/tab (delegations, artifacts timeline). Default `true`. */
+    set ShowActivityRail(value) { this.setUiInput('showActivityRail', value); }
+    get ShowActivityRail() { return this._uiInputs.showActivityRail; }
+    /**
+     * Show developer affordances ("open session / open run" links). Default `true`, but
+     * still additionally gated by the per-session dev-mode toggle — a hard ceiling, not a
+     * force-on.
+     */
+    set ShowDevLinks(value) { this.setUiInput('showDevLinks', value); }
+    get ShowDevLinks() { return this._uiInputs.showDevLinks; }
+    /** Allow drag-to-resize of the surface panel. Default `true`. */
+    set AllowResize(value) { this.setUiInput('allowResize', value); }
+    get AllowResize() { return this._uiInputs.allowResize; }
+    /**
+     * A programmatic override bag, merged UNDER the individual inputs — any field also set
+     * via a dedicated `@Input()` wins over its entry here. Lets a host configure the whole
+     * surface in one binding (e.g. a saved per-context preset) without enumerating a dozen
+     * attributes.
+     *
+     * @example
+     * ```html
+     * <mj-realtime-session-overlay [UiConfig]="leanOverlayPreset"></mj-realtime-session-overlay>
+     * ```
+     */
+    set UiConfig(value) {
+        this._uiConfigBag = value ?? null;
+        this.recomputeUi();
+    }
+    get UiConfig() { return this._uiConfigBag; }
     /**
      * 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
@@ -287,7 +396,7 @@ export class RealtimeSessionOverlayComponent {
             return;
         }
         this._reviewData = value;
-        if (value && !this.voice.IsActive) {
+        if (value && !this.realtime.IsActive) {
             this.enterReview(value);
         }
         else if (!value) {
@@ -313,8 +422,71 @@ export class RealtimeSessionOverlayComponent {
     StartLiveRequested = new EventEmitter();
     /** Review mode's Close: the host clears its review state, returning to the conversation. */
     ReviewClosed = new EventEmitter();
-    voice = inject(RealtimeSessionService);
+    // ── Declarative UI outputs (observe everything the surface does) ─────────────
+    /** Emitted when the user minimizes the call view (the call stays live). */
+    Minimized = new EventEmitter();
+    /** Emitted when the user reveals the transcript (opens text from the orb). */
+    TextRevealed = new EventEmitter();
+    /** Emitted whenever the EFFECTIVE chrome flips between `'orb'` and `'console'`. */
+    ChromeChanged = new EventEmitter();
+    /** Emitted when the connection lifecycle state changes (e.g. connecting → listening). */
+    ConnectionStateChanged = new EventEmitter();
+    /** Emitted when the mic mute is toggled; payload is the new muted state. */
+    MuteChanged = new EventEmitter();
+    /** Emitted when the interface density changes. */
+    DensityChanged = new EventEmitter();
+    /** Emitted (px) when the user finishes resizing the surface panel. */
+    SurfacePanelResized = new EventEmitter();
+    /**
+     * A generic hook fired when ANY control is invoked — even one the host hid via inputs
+     * and re-rendered itself. Lets a host observe/react to the full control surface from a
+     * single binding.
+     */
+    ControlInvoked = new EventEmitter();
+    realtime = inject(RealtimeSessionService);
     cdr = inject(ChangeDetectorRef);
+    /**
+     * The consumer's individually-bound UI inputs (each dedicated `@Input()` writes its own
+     * slot here). Starts empty; only fields a host actually binds appear, so the resolver's
+     * defaults fill the rest. Merged OVER {@link _uiConfigBag} (individual inputs win).
+     */
+    _uiInputs = {};
+    /** The programmatic {@link UiConfig} override bag, merged UNDER the individual inputs. */
+    _uiConfigBag = null;
+    /**
+     * The latest measured width (px) of the rendered overlay element, fed to the resolver as
+     * {@link RealtimeUiSignals.containerWidthPx}. Maintained by a {@link ResizeObserver}; 0
+     * until the first measurement (the resolver treats 0 as "narrow", i.e. an orb in auto).
+     */
+    containerWidthPx = 0;
+    /** Observes the rendered overlay element so chrome re-resolves as the host resizes. */
+    resizeObserver = null;
+    /** The last connection state seen on {@link RealtimeSessionService.ConnectionState$}. */
+    currentConnectionState = 'closed';
+    /**
+     * The resolved, render-ready view-model — the SINGLE source of truth the template binds
+     * to (no `&&` chains in HTML). Rebuilt by {@link recomputeUi} whenever an input, the
+     * disclosure model, the connection state, the container width, or the channel/activity
+     * set changes. Read-only to consumers via the {@link Ui} getter.
+     */
+    // Seed from a dependency-free baseline — this runs as a field initializer, BEFORE the
+    // disclosure model / session state / ResizeObserver exist. recomputeUi() produces the real
+    // value once dependencies are ready (post-init + on every wired change source).
+    _ui = resolveRealtimeUi(DEFAULT_REALTIME_UI_INPUTS, DEFAULT_REALTIME_UI_SIGNALS);
+    /**
+     * The current resolved UI view-model. Every visibility/affordance decision the template
+     * makes reads from this — bind to its boolean fields rather than composing logic inline.
+     *
+     * @example
+     * ```ts
+     * if (this.voice.Ui.chrome === 'console') { ... }
+     * ```
+     */
+    get Ui() {
+        return this._ui;
+    }
+    /** Local mic-muted state, the single source the resolver-independent controls reflect. */
+    Muted = false;
     _reviewData = null;
     /**
      * Set by {@link OnStartLive} just before emitting {@link StartLiveRequested}, so the
@@ -323,8 +495,16 @@ export class RealtimeSessionOverlayComponent {
      * a plain review close (clear everything).
      */
     pendingLiveContinuation = false;
-    /** The reviewed chain's history artifacts, registered as unfocused surface tabs. */
+    /**
+     * The reviewed chain's history artifacts, surfaced inside the Activity tab's "Session
+     * artifacts" group (no longer their own tabs). Bound into the surface panel via
+     * {@link ReviewArtifacts}. Empty for a live session.
+     */
     reviewArtifacts = [];
+    /** The reviewed chain's history artifacts for the surface panel's Activity tab. */
+    get ReviewArtifacts() {
+        return this.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
@@ -335,13 +515,27 @@ export class RealtimeSessionOverlayComponent {
     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;
+        return this._reviewData !== null && !this.realtime.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;
+    /**
+     * The `MJ: Files` id of the reviewed session's recording, or null when nothing was recorded.
+     * Bound into the storage media player, which resolves the authenticated audio itself.
+     */
+    get ReviewRecordingFileID() {
+        return this._reviewData?.RecordingFileID ?? null;
+    }
+    /**
+     * The reviewed session's transcript cues (built from its turns) for the recording player's
+     * transcript panel. Empty outside review.
+     */
+    ReviewCues = [];
+    /** True while the Recording tab is registered (a recording exists for the reviewed session). */
+    reviewRecordingTabRegistered = false;
     /** Shared session state — single source for the thread AND the activity rail. */
     State = new RealtimeSessionState();
     /**
@@ -365,9 +559,9 @@ export class RealtimeSessionOverlayComponent {
      */
     ComposerOpen = false;
     /** Live turn-state from the session service — drives the banner + connecting screen. */
-    ConnectionState$ = this.voice.ConnectionState$;
+    ConnectionState$ = this.realtime.ConnectionState$;
     /** Server-reported realtime model name for the active session — shown subtly in the banner. */
-    ModelName$ = this.voice.ModelName$;
+    ModelName$ = this.realtime.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`) —
@@ -383,7 +577,7 @@ export class RealtimeSessionOverlayComponent {
     DevMode = false;
     /** ID of the live server-side agent session record, for the banner's dev link. */
     get SessionID() {
-        return this.voice.CurrentAgentSessionId;
+        return this.realtime.CurrentAgentSessionId;
     }
     /**
      * The tabbed surface panel (right panel) — channel registrations are forwarded to it.
@@ -395,11 +589,12 @@ export class RealtimeSessionOverlayComponent {
     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]);
+            // A (re)created panel starts with a FRESH tab model. Re-register the live channel set
+            // here (gated to whiteboard + already-used channels) so hiding the panel (pure-audio
+            // return, Details off) never loses the Whiteboard or an already-used channel's tab.
+            // Artifacts live in the Activity rail now (driven by session state), so there's
+            // nothing artifact-specific to recover on the panel.
+            this.registerChannelTabs([...this.realtime.ActiveChannels]);
             this.flushPendingChannelTabs();
             const reveal = this.pendingRevealKey;
             this.pendingRevealKey = null;
@@ -419,7 +614,7 @@ export class RealtimeSessionOverlayComponent {
             });
         }
     }
-    /** The bottom dock — the T-to-type hotkey focuses its input. */
+    /** The bottom dock — type-to-compose seeds + focuses its input. */
     composer;
     /** Channel keys already auto-revealed this session (first activity only). */
     revealedChannelKeys = new Set();
@@ -429,6 +624,8 @@ export class RealtimeSessionOverlayComponent {
     prevActive = false;
     /** Template hosting the read-only review whiteboard (root-level, so always resolvable). */
     reviewBoardTpl;
+    /** Template hosting the review-mode recording player (root-level, so always resolvable). */
+    recordingTpl;
     /** Channel registrations received before the surface panel rendered (flushed in ngAfterViewInit). */
     pendingChannelTabs = [];
     /** True once the view (and the review-board template ref) exists. */
@@ -446,27 +643,174 @@ export class RealtimeSessionOverlayComponent {
     focusChannel = null;
     subs = [];
     constructor() {
+        super();
         this.loadPanelWidthPref();
         this.loadDisclosurePref();
         this.loadCaptionsPref();
-        this.State.Attach(this.voice);
+        this.State.Attach(this.realtime);
         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()), 
+        this.State.Changed$.subscribe(() => this.onSessionStateChanged()), 
+        // Disclosure ratchet moved — re-resolve the view-model (thread/composer/gear gates).
+        this.Disclosure.Changed$.subscribe(() => this.recomputeUi()), 
         // One surface tab per registry-resolved channel plugin (replays the current set).
-        this.voice.ActiveChannels$.subscribe(channels => this.registerChannelTabs(channels)), 
+        this.realtime.ActiveChannels$.subscribe(channels => { this.registerChannelTabs(channels); this.recomputeUi(); }), 
         // Any channel may request the focus layout through its host context.
-        this.voice.ChannelFocus$.subscribe(event => this.onChannelFocus(event.Channel, event.Focused)), 
+        this.realtime.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)), 
+        this.realtime.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)));
+        this.realtime.Active$.subscribe(active => this.onActiveChanged(active)), 
+        // Connection lifecycle drives chrome (the `connecting` loader) + the public output.
+        this.realtime.ConnectionState$.subscribe(state => this.onConnectionStateChanged(state)));
     }
     ngAfterViewInit() {
         this.viewReady = true;
+        this.startResizeObserver();
         this.flushPendingChannelTabs();
         this.registerReviewBoardTab();
         this.registerReviewArtifactTabs();
+        // Cues were already built by enterReview() when ReviewData was set; here we only need to
+        // (re)register the recording tab now that the #recordingTpl ref exists. The storage media
+        // player resolves the authenticated audio itself from the RecordingFileID.
+        this.registerReviewRecordingTab();
+    }
+    // ── Declarative UI config: inputs → signals → resolved view-model ────────────
+    /**
+     * Writes one individually-bound UI input into {@link _uiInputs} and re-resolves the
+     * view-model. `undefined` clears the slot (so the {@link UiConfig} bag / default applies).
+     * Called by every dedicated `@Input()` setter.
+     *
+     * @param key   the {@link RealtimeUiInputs} field to set
+     * @param value the bound value, or `undefined` to clear the override
+     */
+    setUiInput(key, value) {
+        if (value === undefined) {
+            delete this._uiInputs[key];
+        }
+        else {
+            this._uiInputs[key] = value;
+        }
+        this.recomputeUi();
+    }
+    /**
+     * The effective consumer inputs: the {@link UiConfig} bag with the individually-bound
+     * inputs layered ON TOP, so a dedicated `@Input()` always wins over its bag entry.
+     */
+    get mergedUiInputs() {
+        return { ...(this._uiConfigBag ?? {}), ...this._uiInputs };
+    }
+    /**
+     * Maps the runtime {@link RealtimeConnectionState} onto the resolver's
+     * {@link RealtimeUiConnectionState}. `'closed'` (no live call) maps to `'idle'`; the
+     * other states pass through 1:1.
+     */
+    mapConnectionState(state) {
+        return state === 'closed' ? 'idle' : state;
+    }
+    /**
+     * Builds the live {@link RealtimeUiSignals} the resolver consumes, reading current facts
+     * from the disclosure model, the session/channel state, review mode, focus mode, and the
+     * {@link ResizeObserver}-measured width. Pure read — no side effects.
+     */
+    buildSignals() {
+        // Defensive: this can be reached before every dependency is wired (field-init / early
+        // change-detection). Fall back to the dependency-free baseline rather than throw — the
+        // next recompute, once everything exists, produces the real value.
+        const disclosure = this.Disclosure;
+        if (!disclosure) {
+            return DEFAULT_REALTIME_UI_SIGNALS;
+        }
+        const reviewing = this.IsReviewing;
+        return {
+            containerWidthPx: this.containerWidthPx ?? 0,
+            // Text intent = the user EXPLICITLY asked to see text this session — i.e. captions are on
+            // (the captions toggle, the hero's "Show the conversation", RevealText(), and SetCaptions()
+            // all route through ShowCaptions). NOT the disclosure ratchet: a power user still opens to
+            // the calm orb until they ask for text, matching the historical ShowHero = !ShowCaptions.
+            textRevealed: this.ShowCaptions,
+            disclosureShowThread: disclosure.ShowThread,
+            disclosureShowComposer: disclosure.ShowComposer,
+            disclosureShowPanel: disclosure.ShowPanel,
+            disclosureShowGear: disclosure.ShowGear,
+            // A surface to populate: the on-demand Details peek, or review (always has a surface).
+            surfacePanelEarned: this.DetailsPeek || reviewing,
+            hasChannels: (this.realtime?.ActiveChannels ?? []).some(c => c.HasSurface()),
+            hasActivity: (this.State?.Cards?.length ?? 0) > 0,
+            devMode: this.DevMode,
+            isReviewing: reviewing,
+            channelFocus: this.ChannelFocusMode,
+            connectionState: this.mapConnectionState(this.currentConnectionState)
+        };
+    }
+    /**
+     * Re-resolves {@link Ui} from the merged inputs + current signals and emits the chrome /
+     * connection-state outputs when they actually change. Safe to call on any of the wired
+     * change sources (input write, disclosure ratchet, connection flip, resize, channel set);
+     * the resolver is pure so redundant calls are cheap. Always marks for check.
+     */
+    recomputeUi() {
+        const next = resolveRealtimeUi(this.mergedUiInputs, this.buildSignals());
+        const prevChrome = this._ui.chrome;
+        this._ui = next;
+        if (next.chrome !== prevChrome) {
+            this.ChromeChanged.emit(next.chrome);
+        }
+        this.cdr.markForCheck();
+    }
+    /** Connection lifecycle changed: store it, re-resolve chrome, and surface the public output. */
+    onConnectionStateChanged(state) {
+        if (state === this.currentConnectionState) {
+            return;
+        }
+        this.currentConnectionState = state;
+        this.ConnectionStateChanged.emit(this.mapConnectionState(state));
+        this.recomputeUi();
+    }
+    // ── Container-width observation (drives the auto orb ↔ console graduation) ────
+    /**
+     * Starts observing the rendered overlay element's width so the resolver can graduate
+     * `'auto'` chrome to a console when the host gives it room. Guards SSR / environments
+     * without `ResizeObserver` (plain-node tests) — there the width simply stays 0 (an orb in
+     * auto), which is the safe ambient default. Idempotent.
+     */
+    startResizeObserver() {
+        if (this.resizeObserver || typeof ResizeObserver !== 'function') {
+            return;
+        }
+        const el = this.overlayElement() ?? this.hostRef.nativeElement;
+        if (!el) {
+            return;
+        }
+        // Seed an immediate measurement so the first resolve sees a real width. Deferred to a
+        // microtask (same reasoning as OnPanelWideChanged above): ngAfterViewInit runs inside the
+        // SAME change-detection pass that already checked bindings derived from Ui (e.g. the
+        // template's `@if (ShowPanelArea)` and `[Compact]`) using the field-initializer's width-0
+        // baseline. Recomputing synchronously here can flip chrome orb→console mid-pass and trip
+        // ExpressionChangedAfterItHasBeenCheckedError (NG0100). Landing the seed measurement in a
+        // fresh microtask lets it recompute in its own CD cycle instead.
+        Promise.resolve().then(() => {
+            this.applyContainerWidth(el.getBoundingClientRect ? el.getBoundingClientRect().width : 0);
+        });
+        this.resizeObserver = new ResizeObserver(entries => {
+            const width = entries[0]?.contentRect?.width ?? 0;
+            this.ngZone.run(() => Promise.resolve().then(() => this.applyContainerWidth(width)));
+        });
+        this.resizeObserver.observe(el);
+    }
+    /** Adopts a new measured width and re-resolves only when it actually changed. */
+    applyContainerWidth(width) {
+        const rounded = Math.round(width);
+        if (rounded === this.containerWidthPx) {
+            return;
+        }
+        this.containerWidthPx = rounded;
+        this.recomputeUi();
+    }
+    /** Disconnects the container-width observer. */
+    stopResizeObserver() {
+        this.resizeObserver?.disconnect();
+        this.resizeObserver = null;
     }
     // ── Surface-panel sizing (flex layout + pointer-drag handle; width persisted per-user) ──
     //
@@ -497,9 +841,16 @@ export class RealtimeSessionOverlayComponent {
     get PanelAreaSize() {
         return this.PanelCollapsed ? SURFACE_PANEL_COLLAPSED_WIDTH : this.PanelWidthPx;
     }
-    /** Resizing is meaningless while collapsed or when the surface fills (focus mode). */
+    /**
+     * Resizing is meaningless while collapsed or when the surface fills (focus mode), and a
+     * host may hard-disable it via `[AllowResize]="false"` — in review the resolver's
+     * `allowResize` is false (no live surface to resize), so this also reads the host flag
+     * directly (defaulting to the historical `true`) rather than the resolved value, keeping
+     * drag available in review exactly as before.
+     */
     get PanelResizeDisabled() {
-        return this.PanelCollapsed || this.ChannelFocusMode;
+        const hostAllows = this.mergedUiInputs.allowResize ?? DEFAULT_REALTIME_UI_INPUTS.allowResize;
+        return this.PanelCollapsed || this.ChannelFocusMode || !hostAllows;
     }
     OnPanelCollapsedChange(collapsed) {
         this.PanelCollapsed = collapsed;
@@ -509,7 +860,18 @@ export class RealtimeSessionOverlayComponent {
     OnPanelWideChanged(wide) {
         this.PanelWide = wide;
         if (this.userPanelWidth === null) {
-            this.PanelWidthPx = DefaultSurfacePanelWidth(wide, this.hostWidth());
+            // This can fire synchronously from the surface-tabs child during the FIRST change-detection
+            // pass, while hostWidth() transitions 0 → real across that same pass — setting the bound width
+            // inline then trips ExpressionChangedAfterItHasBeenCheckedError (380 → 308). Defer to a
+            // microtask so the recompute lands in a fresh CD cycle. (Drag/reset handlers stay synchronous —
+            // those run on real user events, not during CD.)
+            Promise.resolve().then(() => {
+                if (this.userPanelWidth === null) {
+                    this.PanelWidthPx = DefaultSurfacePanelWidth(this.PanelWide, this.hostWidth());
+                    this.cdr.markForCheck();
+                }
+            });
+            return;
         }
         this.cdr.markForCheck();
     }
@@ -548,15 +910,21 @@ export class RealtimeSessionOverlayComponent {
             return;
         }
         this.teardownPanelResize();
+        let resizedTo = null;
         if (IsSurfacePanelDrag(this.panelResizeStartX, event.clientX)) {
             this.userPanelWidth = this.PanelWidthPx;
             this.persistPanelWidth(this.PanelWidthPx);
+            resizedTo = this.PanelWidthPx;
         }
         else {
             this.PanelWidthPx = this.panelResizeStartWidth;
         }
         this.ngZone.run(() => {
             this.IsPanelResizing = false;
+            // Surface the new width to the host only on a genuine drag (not a bare click).
+            if (resizedTo !== null) {
+                this.SurfacePanelResized.emit(resizedTo);
+            }
             this.cdr.markForCheck();
         });
     }
@@ -610,27 +978,50 @@ export class RealtimeSessionOverlayComponent {
     }
     // ── 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.
+     * True while the PURE-AUDIO hero (the orb) owns the main column. Now reads from the
+     * resolved view-model ({@link Ui}): the resolver decides hero-vs-thread from the
+     * effective chrome + text intent + review, so host inputs (`[Chrome]`,
+     * `[AllowTextReveal]`, the breakpoint) gate it. Review still always shows the thread.
      */
     get ShowHero() {
-        return !this.IsReviewing && !this.ShowCaptions;
+        return this._ui.showHero;
     }
     /**
-     * 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.
+     * Whether the surface-panel area renders. Driven by the resolved {@link Ui.showSurfacePanel}
+     * (console + earned + host's `[ShowSurfacePanel]`) OR review mode, which always carries the
+     * panel. The Details toggle still earns the panel on demand (it flips `surfacePanelEarned`).
      */
     get ShowPanelArea() {
-        return this.IsReviewing || this.DetailsPeek;
+        return this._ui.showSurfacePanel || this.IsReviewing;
     }
-    /** The Details (tabs) toggle is always offered while live — it's the panel's one door. */
+    /** The Details (tabs) toggle is offered while live — it's the panel's one door. */
     get ShowDetailsControl() {
         return !this.IsReviewing;
     }
+    /**
+     * Whether the active-channels strip renders. Preserves the historical disclosure gate
+     * (level 2+, {@link RealtimeDisclosureModel.ShowComposer}) AND honours the host's
+     * `[ShowChannels]` input + the resolver's focus rule: a host that sets `[ShowChannels]`
+     * false hard-disables the strip, and channel-focus mode hides it. The strip component
+     * itself self-hides when no channels are active, so this stays decluttered.
+     */
+    get ChannelStripVisible() {
+        // Reads the RESOLVED Ui.showChannelStrip flag — which already ANDs the host's
+        // [ShowChannels] input, an active channel, console chrome, and the no-focus rule.
+        // In orb/compact chrome it is false, so the overlay never shows the "CHANNELS · Voice"
+        // strip (the lean Calm-Orb surface). The strip component itself still self-hides when
+        // no channels are active, keeping the console decluttered too.
+        return this._ui.showChannelStrip;
+    }
+    /**
+     * Whether the surface panel's Activity tab should be shown. Reads the resolved
+     * {@link Ui.showActivityTab} (host's `[ShowActivityRail]` AND activity/review AND console)
+     * OR review mode — a past session's activity is always relevant even before the resolver's
+     * console gate would otherwise allow it.
+     */
+    get ShowActivityTab() {
+        return this._ui.showActivityTab || this.IsReviewing;
+    }
     /** Reads the persisted disclosure milestones (tolerant; defaults to day one). */
     loadDisclosurePref() {
         try {
@@ -676,7 +1067,8 @@ export class RealtimeSessionOverlayComponent {
      * A pure-audio user stays in pure audio until THEY ask for more.
      */
     onSessionStateChanged() {
-        this.cdr.markForCheck();
+        // State.Cards drives the resolver's hasActivity signal — re-resolve (also marks for check).
+        this.recomputeUi();
     }
     /**
      * The agent ACTED on a channel (a tool call routed to its local executor — e.g. the
@@ -692,16 +1084,25 @@ export class RealtimeSessionOverlayComponent {
         }
         this.revealedChannelKeys.add(plugin.ChannelName);
         this.DetailsPeek = true; // the panel shows via the same on-demand mechanism Details uses
+        // FIRST USE: a non-whiteboard channel was tab-less until now — register its tab
+        // SYNCHRONOUSLY (before the reveal/focus below) so the channel exists to be revealed.
+        // The whiteboard already has its tab from session start; re-registering is idempotent.
+        if (plugin.HasSurface()) {
+            this.registerPluginChannelTab(plugin);
+        }
         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.
+            // so the board is the visible tab the instant the agent's first stroke lands. The
+            // microtask-deferred RegisterChannelTab above is ordered before this RevealChannel,
+            // so the tab is in place when the focus 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();
+        // DetailsPeek flipped — surfacePanelEarned changed; re-resolve (marks for check).
+        this.recomputeUi();
     }
     /** Active$ edges: session start resets the volatile level; session end ratchets + persists. */
     onActiveChanged(active) {
@@ -734,7 +1135,7 @@ export class RealtimeSessionOverlayComponent {
     audioRafHandle = null;
     /** Last attribute values written (attributes are only touched on change). */
     lastAudioLive = null;
-    lastVoiceDirection = null;
+    lastDirection = null;
     /** Starts the sampling loop (idempotent). Runs outside Angular — no CD per frame. */
     startAudioVisualLoop() {
         if (this.audioRafHandle !== null || typeof requestAnimationFrame !== 'function') {
@@ -747,7 +1148,7 @@ export class RealtimeSessionOverlayComponent {
                 if (this.Hidden) {
                     return; // minimized — skip the work, keep the loop armed
                 }
-                const frame = this.audioSmoother.Next(this.voice.GetAudioActivity(), performance.now());
+                const frame = this.audioSmoother.Next(this.realtime.GetAudioActivity(), performance.now());
                 this.applyAudioVisualFrame(frame);
             };
             this.audioRafHandle = requestAnimationFrame(tick);
@@ -761,7 +1162,7 @@ export class RealtimeSessionOverlayComponent {
         }
         this.audioSmoother.Reset();
         this.lastAudioLive = null;
-        this.lastVoiceDirection = null;
+        this.lastDirection = null;
         this.overlayElement()?.setAttribute('data-audio-live', 'false');
     }
     /** The rendered `.call-overlay` element (the :host is display:contents). */
@@ -788,8 +1189,8 @@ export class RealtimeSessionOverlayComponent {
         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;
+        if (frame.Direction !== this.lastDirection) {
+            this.lastDirection = frame.Direction;
             el.setAttribute('data-voice-dir', frame.Direction);
         }
     }
@@ -800,37 +1201,45 @@ export class RealtimeSessionOverlayComponent {
             // Land on the marquee surface (channels lead the strip; Activity is pinned last).
             setTimeout(() => this.surfaceTabs?.FocusFirstTab());
         }
-        this.cdr.markForCheck();
+        this.ControlInvoked.emit('surface');
+        // DetailsPeek drives surfacePanelEarned — re-resolve (marks for check).
+        this.recomputeUi();
     }
-    /** The gear popover picked an interface density — apply + persist immediately. */
+    /**
+     * The gear popover picked an interface density — apply + persist + emit. `Simple` IS the
+     * "pure audio" surface (the standalone headphones control was folded into the gear here): it
+     * returns to the orb-only view AND makes it stick across refresh/next call, so picking it also
+     * closes any open Details peek so the surface is genuinely orb-only — matching the old app-bar
+     * "Pure audio" button exactly. In-session reveals ("Show the conversation", T-to-type, Details)
+     * stay available and ephemeral; switching density back to Standard/Pro/Auto restores the console.
+     */
     OnDensityChanged(density) {
         this.Disclosure.SetDensity(density);
         this.persistDisclosure(SerializeUxMilestones(this.Disclosure.Milestones));
+        if (density === 'simple') {
+            this.DetailsPeek = false; // Simple = pure audio: collapse the surface peek back to the bare orb.
+        }
+        this.DensityChanged.emit(density);
+        this.ControlInvoked.emit('density');
+        // Density (and possibly DetailsPeek) changed — re-resolve (marks for check).
+        this.recomputeUi();
     }
     /** 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();
+        this.TextRevealed.emit();
+        this.ControlInvoked.emit('reveal-text');
     }
     /** App-bar Minimize: hide the call view (CSS) — the call stays fully live. */
     OnMinimize() {
-        this.voice.SetMinimized(true);
+        this.realtime.SetMinimized(true);
+        this.Minimized.emit();
+        this.ControlInvoked.emit('minimize');
     }
     /** App-bar / strip End: tear the session down, then notify the host. */
     async OnEndCall() {
-        await this.voice.EndVoiceSession();
+        this.ControlInvoked.emit('end');
+        await this.realtime.EndRealtimeSession();
         this.Ended.emit();
     }
     /** Maps the realtime state onto the hero orb's `data-state` (active turn-states only). */
@@ -853,29 +1262,38 @@ export class RealtimeSessionOverlayComponent {
         }
     }
     /**
-     * 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.
+     * TYPE-TO-COMPOSE: during a live call, pressing any single printable character (with nothing
+     * focused) reveals the composer, raises disclosure to the engaged level, AND seeds that very
+     * character into the draft — the user just starts typing and their first key is captured (the
+     * old dedicated "T" key is gone; "t"/"T" now types like any other letter, and the visible
+     * "press T to type" hint was removed in favour of this natural behaviour). Ignored while
+     * review/minimized/inactive, with Ctrl/Cmd/Alt modifiers (don't hijack shortcuts), for
+     * non-printable named keys (Enter/Tab/Arrow/Escape/F-keys → `key.length > 1`), for a bare
+     * Space (ambiguous — no message starts with a space), or when an editable element / a
+     * keyboard-capturing surface (the remote-browser canvas) already holds focus.
      */
     OnDocumentKeydown(event) {
-        if (this.Hidden || this.IsReviewing || !this.voice.IsActive) {
+        if (this.Hidden || this.IsReviewing || !this.realtime.IsActive) {
+            return;
+        }
+        if (event.metaKey || event.ctrlKey || event.altKey) {
             return;
         }
-        if ((event.key !== 't' && event.key !== 'T') || event.metaKey || event.ctrlKey || event.altKey) {
+        if (event.key.length !== 1 || event.key === ' ') {
             return;
         }
         if (this.isEditableTarget(event.target) || this.isKeyboardCapturingSurfaceFocused()) {
             return;
         }
         event.preventDefault();
+        const typedChar = event.key;
         this.OnComposerOpenChanged(true);
-        // The dock may have just been created — focus after this CD pass.
-        setTimeout(() => this.composer?.FocusInput());
+        // The dock may have just been created — seed the typed character + focus after this CD pass.
+        setTimeout(() => this.composer?.AppendAndFocus(typedChar));
     }
     /**
      * 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.
+     * where a bare letter should type into that element — not trigger type-to-compose.
      *
      * @param eventTarget The keydown event's target.
      * @returns Whether the target is an editable element.
@@ -898,20 +1316,22 @@ export class RealtimeSessionOverlayComponent {
         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 —
+     * The composer dock opened (strip Type control / type-to-compose keystroke) 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');
+            this.Disclosure.Raise('engaged'); // emits Changed$ → recomputeUi()
+            this.ControlInvoked.emit('type');
             setTimeout(() => this.composer?.FocusInput());
         }
         this.cdr.markForCheck();
     }
     ngOnDestroy() {
         this.stopAudioVisualLoop();
+        this.stopResizeObserver();
         if (this.IsPanelResizing) {
             this.teardownPanelResize();
             this.IsPanelResizing = false;
@@ -952,10 +1372,14 @@ export class RealtimeSessionOverlayComponent {
         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.
+     * Registers a surface tab per active channel plugin THAT HAS A SURFACE — but ONLY for
+     * channels already in play: the WHITEBOARD tabs immediately (a user may be the first to
+     * draw), every OTHER channel stays tab-less until the agent first USES it (its first
+     * {@link onChannelActivity}). This keeps the strip decluttered to surfaces actually in
+     * play instead of pre-listing every registry-resolved channel.
+     *
+     * Server-only channels ({@link BaseRealtimeChannelClient.HasSurface} === `false`) render no
+     * tab — their tools + perception are wired by the session service regardless.
      */
     registerChannelTabs(channels) {
         this.cleanupStaleReviewBoardTab(channels);
@@ -963,15 +1387,23 @@ export class RealtimeSessionOverlayComponent {
             if (!plugin.HasSurface()) {
                 continue; // server-only channel — no surface to tab.
             }
-            this.RegisterChannelTab({
-                Key: plugin.ChannelName,
-                Title: plugin.TabTitle,
-                Icon: plugin.TabIcon,
-                Plugin: plugin
-            });
+            if (!ShouldRegisterChannelTabUpFront(plugin.ChannelName, this.realtime.HasChannelBeenUsed(plugin.ChannelName))) {
+                continue; // not the whiteboard and not used yet — it earns its tab on first activity.
+            }
+            this.registerPluginChannelTab(plugin);
         }
         this.cdr.markForCheck();
     }
+    /** Registers (or upgrades) one channel plugin's surface tab on the panel. */
+    registerPluginChannelTab(plugin) {
+        this.RegisterChannelTab({
+            Key: plugin.ChannelName,
+            Title: plugin.TabTitle,
+            Icon: plugin.TabIcon,
+            Color: plugin.TabColor,
+            Plugin: plugin
+        });
+    }
     /**
      * 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
@@ -984,7 +1416,7 @@ export class RealtimeSessionOverlayComponent {
         if (!this.reviewWhiteboardTabRegistered) {
             return;
         }
-        if (ShouldRemoveReviewWhiteboardTab(this.voice.IsActive, this.reviewWhiteboardTabRegistered, channels)) {
+        if (ShouldRemoveReviewWhiteboardTab(this.realtime.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));
@@ -1011,14 +1443,24 @@ export class RealtimeSessionOverlayComponent {
     OnCaptionsToggled(on) {
         this.ShowCaptions = on;
         if (on) {
-            this.Disclosure.Raise('text');
+            this.Disclosure.Raise('text'); // emits Changed$ → recomputeUi()
         }
         this.persistCaptionsPref();
-        this.cdr.markForCheck();
+        this.ControlInvoked.emit('captions');
+        // ShowCaptions feeds the resolver's `textRevealed` signal (buildSignals), so BOTH directions must
+        // re-resolve the view-model. Turning ON already recomputes via Disclosure.Raise → Changed$, but
+        // turning OFF raises nothing — a bare markForCheck() would re-render against a STALE _ui (still
+        // showThread=true / showHero=false), so the hero orb wouldn't return until the next unrelated
+        // interaction recomputed. recomputeUi() rebuilds _ui from the current ShowCaptions and marks for
+        // check itself; it's pure/idempotent, so the redundant call in the ON case is harmless.
+        this.recomputeUi();
     }
     /** Reflect the gear toggle from the controls into the dev affordances. */
     OnDevModeToggled(on) {
         this.DevMode = on;
+        this.ControlInvoked.emit('gear');
+        // devMode drives the resolver's showDevLinks signal — re-resolve (marks for check).
+        this.recomputeUi();
     }
     /** A dev link asked to open a delegated agent run record. */
     OnOpenRunRequested(runId) {
@@ -1075,6 +1517,7 @@ export class RealtimeSessionOverlayComponent {
         this.State.LoadHistoricalItems(BuildReviewThreadItems(review));
         this.ReviewWhiteboard = this.parseReviewWhiteboard(review);
         this.reviewArtifacts = review.Artifacts ?? [];
+        this.ReviewCues = this.buildReviewCues(review);
         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
@@ -1084,9 +1527,45 @@ export class RealtimeSessionOverlayComponent {
             setTimeout(() => this.ngZone.run(() => {
                 this.registerReviewBoardTab();
                 this.registerReviewArtifactTabs();
+                this.registerReviewRecordingTab();
             }), 0);
         }
-        this.cdr.markForCheck();
+        // isReviewing flipped on — review always wants the console (marks for check).
+        this.recomputeUi();
+    }
+    /**
+     * Builds time-aligned {@link MediaTranscriptCue}s from the reviewed session's turns, for the
+     * storage media player's transcript panel. Skips turns with no text; derives each cue's start from
+     * `UtteranceStartMs`, falling back to (turn-created − recording-start) ms, else 0. Sorts by start.
+     */
+    buildReviewCues(review) {
+        const startedAt = review.RecordingStartedAt;
+        const cues = [];
+        (review.Turns ?? []).forEach((turn, index) => {
+            const text = (turn.Text ?? turn.Message ?? '').trim();
+            if (text.length === 0) {
+                return;
+            }
+            cues.push({
+                Id: turn.ID || `turn-${index}`,
+                StartMs: this.reviewCueStartMs(turn, startedAt),
+                EndMs: turn.UtteranceEndMs ?? undefined,
+                SpeakerLabel: turn.Role === 'User' ? 'You' : review.AgentName,
+                Text: text
+            });
+        });
+        cues.sort((a, b) => a.StartMs - b.StartMs);
+        return cues;
+    }
+    /** A review turn's media-relative start (ms): precise offset, else derived from t0, else 0. */
+    reviewCueStartMs(turn, startedAt) {
+        if (turn.UtteranceStartMs != null) {
+            return turn.UtteranceStartMs;
+        }
+        if (startedAt && turn.__mj_CreatedAt) {
+            return Math.max(0, turn.__mj_CreatedAt.getTime() - startedAt.getTime());
+        }
+        return 0;
     }
     /**
      * Leaves review. Two distinct exits:
@@ -1098,6 +1577,12 @@ export class RealtimeSessionOverlayComponent {
      */
     exitReview() {
         this.ReviewWhiteboard = null;
+        this.ReviewCues = [];
+        if (this.reviewRecordingTabRegistered) {
+            this.surfaceTabs?.RemoveTab('Recording');
+            this.pendingChannelTabs = this.pendingChannelTabs.filter(r => r.Key !== 'Recording');
+            this.reviewRecordingTabRegistered = false;
+        }
         if (this.pendingLiveContinuation) {
             this.pendingLiveContinuation = false;
             this.State.StartLiveContinuation();
@@ -1106,16 +1591,22 @@ export class RealtimeSessionOverlayComponent {
             this.reviewArtifacts = [];
             this.State.Clear();
         }
-        this.cdr.markForCheck();
+        // isReviewing flipped off — re-resolve the chrome/gates (marks for check).
+        this.recomputeUi();
     }
-    /** Registers the reviewed chain's history artifacts as UNFOCUSED artifact tabs (idempotent). */
+    /**
+     * Surfaces the reviewed chain's history artifacts inside the Activity tab. In the redesign
+     * there are no per-artifact tabs — the artifacts ride the {@link ReviewArtifacts} input into
+     * the rail's "Session artifacts" group, so this only needs to ensure the Activity tab is
+     * shown (it carries the carryover artifacts). Idempotent; no-op without any review artifacts.
+     */
     registerReviewArtifactTabs() {
         if (!this.surfaceTabs || this.reviewArtifacts.length === 0) {
             return;
         }
-        for (const artifact of this.reviewArtifacts) {
-            this.surfaceTabs.RegisterArtifactTab(artifact, false);
-        }
+        // Show the Activity tab (where the carryover artifacts now live); RegisterArtifactTab
+        // flips the gate on without opening any tab of its own.
+        this.surfaceTabs.RegisterArtifactTab(this.reviewArtifacts[0], false);
         this.cdr.markForCheck();
     }
     /**
@@ -1154,17 +1645,37 @@ export class RealtimeSessionOverlayComponent {
         this.reviewWhiteboardTabRegistered = true;
         this.cdr.markForCheck();
     }
+    /**
+     * Registers the read-only review RECORDING tab (the time-aligned storage media player) — ONLY when
+     * the reviewed session carried a `RecordingFileID`. Idempotent (re-registering the same key updates
+     * it in place). The player resolves the authenticated audio itself from the `RecordingFileID` and
+     * shows its own no-access / loading states; the click-to-seek transcript is usable immediately.
+     * NOT focused — the channel surface / Activity rail keeps the default focus.
+     */
+    registerReviewRecordingTab() {
+        if (!this._reviewData?.RecordingFileID || !this.recordingTpl) {
+            return;
+        }
+        this.RegisterChannelTab({
+            Key: 'Recording',
+            Title: 'Recording',
+            Icon: 'fa-solid fa-circle-play',
+            Content: this.recordingTpl
+        });
+        this.reviewRecordingTabRegistered = 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);
+        void this.realtime.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.realtime.SetMinimized(true);
         this.NavigateRequest.emit({ EntityName: entityName, RecordID: recordId });
     }
     // ── Focus layout + pill ────────────────────────────────────────────────────
@@ -1172,11 +1683,12 @@ export class RealtimeSessionOverlayComponent {
     onChannelFocus(channel, focused) {
         this.ChannelFocusMode = focused;
         this.focusChannel = focused ? channel : null;
-        this.cdr.markForCheck();
+        // channelFocus drives the resolver (hides panel + strip) — re-resolve (marks for check).
+        this.recomputeUi();
     }
-    /** Focus pill: toggle the mic mute. */
+    /** Focus pill: toggle the mic mute (routes through the overlay's single mute path). */
     OnFocusPillMute() {
-        this.FocusPillMuted = this.voice.ToggleMute();
+        this.ToggleMute();
     }
     /** Focus pill: leave focus mode (show the thread column again). */
     OnFocusPillExit() {
@@ -1189,7 +1701,7 @@ export class RealtimeSessionOverlayComponent {
     }
     /** Focus pill: end the call (mirrors the controls row's End button). */
     async OnFocusPillEnd() {
-        await this.voice.EndVoiceSession();
+        await this.realtime.EndRealtimeSession();
         this.Ended.emit();
     }
     /** Short status line for the focus pill (first person — the co-agent owns the work). */
@@ -1202,30 +1714,154 @@ export class RealtimeSessionOverlayComponent {
             default: return '';
         }
     }
+    /**
+     * The composer dock toggled the mic. Syncs the overlay's single {@link Muted} source (and
+     * the focus pill) and surfaces the {@link MuteChanged} / {@link ControlInvoked} outputs.
+     */
+    OnComposerMuteChanged(muted) {
+        if (muted !== this.Muted) {
+            this.Muted = muted;
+            this.FocusPillMuted = muted;
+            this.cdr.markForCheck();
+        }
+        this.MuteChanged.emit(muted);
+        this.ControlInvoked.emit('mute');
+    }
+    // ── Imperative API — drive the surface from a host via @ViewChild ────────────
+    //
+    // Each method maps to an existing internal handler/service so behaviour matches the
+    // user clicking the corresponding control. See the package README's "Methods" table.
+    /**
+     * Override the chrome at runtime (equivalent to binding `[Chrome]`). Pass `'auto'` to
+     * return to the size/intent-driven default.
+     *
+     * @param mode the chrome to force.
+     * @example `voice.SetChrome('console');`
+     */
+    SetChrome(mode) {
+        this.setUiInput('chrome', mode);
+    }
+    /**
+     * Reveal the transcript programmatically — the imperative twin of the orb's "Show the
+     * conversation" affordance. Raises the text disclosure level, turns captions on, and
+     * emits {@link TextRevealed}.
+     */
+    RevealText() {
+        this.OnTextReveal();
+    }
+    /**
+     * Set the mic mute to an explicit state (no-op when already there). Drives the session
+     * service, syncs every mute affordance, and emits {@link MuteChanged}.
+     *
+     * @param muted the desired muted state.
+     */
+    SetMuted(muted) {
+        if (muted === this.Muted) {
+            return;
+        }
+        this.ToggleMute();
+    }
+    /**
+     * Toggle the mic mute. Drives the session service, syncs the overlay's {@link Muted}
+     * source + the composer/focus-pill affordances, and emits {@link MuteChanged} +
+     * {@link ControlInvoked}.
+     */
+    ToggleMute() {
+        this.Muted = this.realtime.ToggleMute();
+        this.FocusPillMuted = this.Muted;
+        this.MuteChanged.emit(this.Muted);
+        this.ControlInvoked.emit('mute');
+        this.cdr.markForCheck();
+    }
+    /**
+     * Set captions (the text-vs-orb preference) to an explicit state. Persisted per-user;
+     * turning them on also raises the text disclosure level.
+     *
+     * @param on whether captions/text should be shown.
+     */
+    SetCaptions(on) {
+        if (on === this.ShowCaptions) {
+            return;
+        }
+        this.OnCaptionsToggled(on);
+    }
+    /** Toggle captions (the text-vs-orb preference). */
+    ToggleCaptions() {
+        this.OnCaptionsToggled(!this.ShowCaptions);
+    }
+    /**
+     * Set the UX interface density (the gear's escape hatch). Applied + persisted immediately;
+     * emits {@link DensityChanged}.
+     *
+     * @param density the density to apply.
+     */
+    SetDensity(density) {
+        this.OnDensityChanged(density);
+    }
+    /**
+     * Open the surface panel (the on-demand Details peek), optionally focusing a specific
+     * channel's tab. Equivalent to the strip's Details control plus a channel reveal.
+     *
+     * @param channelId when supplied, the channel tab to reveal once the panel is shown.
+     */
+    OpenSurfacePanel(channelId) {
+        if (!this.DetailsPeek) {
+            this.DetailsPeek = true;
+            this.ControlInvoked.emit('surface');
+            this.recomputeUi();
+        }
+        setTimeout(() => {
+            if (channelId) {
+                this.surfaceTabs?.RevealChannel(channelId);
+            }
+            else {
+                this.surfaceTabs?.FocusFirstTab();
+            }
+        });
+    }
+    /** Collapse the surface panel (hide the Details peek). No-op in review (always shown). */
+    CollapseSurfacePanel() {
+        if (this.IsReviewing || !this.DetailsPeek) {
+            return;
+        }
+        this.DetailsPeek = false;
+        this.ControlInvoked.emit('surface');
+        this.recomputeUi();
+    }
+    /** Minimize the call (it stays live) — the imperative twin of the app-bar Minimize. */
+    Minimize() {
+        this.OnMinimize();
+    }
+    /** End the session (tear down the call) — the imperative twin of the End control. */
+    EndSession() {
+        void this.OnEndCall();
+    }
     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);
+            i0.ɵɵviewQuery(RealtimeSurfaceTabsComponent, 5)(RealtimeComposerComponent, 5)(_c0, 5)(_c1, 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);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.recordingTpl = _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);
+        } }, inputs: { Hidden: "Hidden", AgentName: "AgentName", CurrentUser: "CurrentUser", EnvironmentID: "EnvironmentID", Chrome: "Chrome", ConsoleBreakpointPx: "ConsoleBreakpointPx", Compact: "Compact", AutoHideControls: "AutoHideControls", AllowTextReveal: "AllowTextReveal", ShowCaptionsControl: "ShowCaptionsControl", ShowDensityPicker: "ShowDensityPicker", ShowMinimize: "ShowMinimize", ShowEnd: "ShowEnd", ShowSurfacePanel: "ShowSurfacePanel", ShowChannels: "ShowChannels", ShowActivityRail: "ShowActivityRail", ShowDevLinks: "ShowDevLinks", AllowResize: "AllowResize", UiConfig: "UiConfig", ReviewData: "ReviewData" }, outputs: { Ended: "Ended", NavigateRequest: "NavigateRequest", StartLiveRequested: "StartLiveRequested", ReviewClosed: "ReviewClosed", Minimized: "Minimized", TextRevealed: "TextRevealed", ChromeChanged: "ChromeChanged", ConnectionStateChanged: "ConnectionStateChanged", MuteChanged: "MuteChanged", DensityChanged: "DensityChanged", SurfacePanelResized: "SurfacePanelResized", ControlInvoked: "ControlInvoked" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 6, vars: 3, consts: [["reviewBoardTpl", ""], ["recordingTpl", ""], ["role", "region", 1, "call-overlay", 3, "call-overlay--hidden", "call-overlay--review", "board-focus"], ["role", "region", 1, "call-overlay"], [1, "call-main"], [3, "OpenSessionRequested", "DevModeToggled", "DensityChanged", "MinimizeRequested", "StartLiveRequested", "CloseRequested", "State", "Compact", "AgentName", "ModelName", "DevMode", "SessionID", "ReviewMode", "ReviewStartedAt", "ReviewClosedAt", "ReviewCloseReason", "ShowGear", "ShowDensityPicker", "ShowMinimize", "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", "MuteChanged", "EndRequested", "Open", "Compact", "CaptionsOn", "IsMuted", "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", "ShowActivityTab", "ExtraArtifacts", "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"], [1, "review-recording-host"], [3, "FileID", "Transcript", "Provider"]], template: function RealtimeSessionOverlayComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵconditionalCreate(0, RealtimeSessionOverlayComponent_Conditional_0_Template, 12, 30, "div", 2);
             i0.ɵɵpipe(1, "async");
-            i0.ɵɵtemplate(2, RealtimeSessionOverlayComponent_ng_template_2_Template, 1, 1, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor);
+            i0.ɵɵtemplate(2, RealtimeSessionOverlayComponent_ng_template_2_Template, 1, 1, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor)(4, RealtimeSessionOverlayComponent_ng_template_4_Template, 2, 3, "ng-template", null, 1, 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);
+            let tmp_2_0;
+            i0.ɵɵconditional((tmp_2_0 = i0.ɵɵpipeBind1(1, 1, ctx.ConnectionState$)) ? 0 : -1, tmp_2_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}"] });
+            RealtimeWhiteboardBoardComponent,
+            MJStorageMediaPlayerComponent, 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.review-recording-host[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n}\n\n.review-recording-host[_ngcontent-%COMP%]   mj-realtime-evidence-playback[_ngcontent-%COMP%] {\n  flex: 1;\n  min-height: 0;\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,
@@ -1237,8 +1873,9 @@ export class RealtimeSessionOverlayComponent {
                     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"] }]
+                    RealtimeWhiteboardBoardComponent,
+                    MJStorageMediaPlayerComponent
+                ], 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        [Compact]=\"!IsReviewing && Ui.compact && Ui.chrome === 'orb'\"\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        [ShowGear]=\"!IsReviewing && Ui.showGear\"\n        [ShowDensityPicker]=\"Ui.showDensityPicker\"\n        [ShowMinimize]=\"!IsReviewing && Ui.showMinimize\"\n        [Density]=\"Disclosure.Milestones.Density\"\n        (OpenSessionRequested)=\"OnOpenSessionRequested($event)\"\n        (DevModeToggled)=\"OnDevModeToggled($event)\"\n        (DensityChanged)=\"OnDensityChanged($event)\"\n        (MinimizeRequested)=\"OnMinimize()\"\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+, host-gated via [ShowChannels]).\n             The strip component self-hides when there are no active channels. -->\n        @if (ChannelStripVisible) {\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          [Compact]=\"Ui.compact && Ui.chrome === 'orb'\"\n          (OpenChanged)=\"OnComposerOpenChanged($event)\"\n          [CaptionsOn]=\"ShowCaptions\"\n          [IsMuted]=\"Muted\"\n          [ShowDetails]=\"ShowDetailsControl\"\n          [DetailsOn]=\"DetailsPeek\"\n          (CaptionsToggled)=\"OnCaptionsToggled($event)\"\n          (DetailsToggled)=\"OnDetailsToggled()\"\n          (MuteChanged)=\"OnComposerMuteChanged($event)\"\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          [ShowActivityTab]=\"ShowActivityTab\"\n          [ExtraArtifacts]=\"ReviewArtifacts\"\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\n<!-- SESSION REVIEW recording pane body: the reviewed session's recorded audio synced to its\n     transcript, replayed via the shared storage media player (click-to-seek transcript + playhead\n     highlight). Registered as a template-based channel tab ONLY when the reviewed session carries a\n     RecordingFileID; the player resolves the authenticated audio itself from that file id. -->\n<ng-template #recordingTpl>\n  <div class=\"review-recording-host\">\n    <mj-storage-media-player\n      [FileID]=\"ReviewRecordingFileID\"\n      [Transcript]=\"ReviewCues\"\n      [Provider]=\"Provider\">\n    </mj-storage-media-player>\n  </div>\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/* The review recording pane body: the evidence player fills its host (:host height:100%),\n   so its template-based pane needs a filling, constrained frame. */\n.review-recording-host {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n}\n\n.review-recording-host mj-realtime-evidence-playback {\n  flex: 1;\n  min-height: 0;\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: [{
@@ -1247,6 +1884,36 @@ export class RealtimeSessionOverlayComponent {
             type: Input
         }], EnvironmentID: [{
             type: Input
+        }], Chrome: [{
+            type: Input
+        }], ConsoleBreakpointPx: [{
+            type: Input
+        }], Compact: [{
+            type: Input
+        }], AutoHideControls: [{
+            type: Input
+        }], AllowTextReveal: [{
+            type: Input
+        }], ShowCaptionsControl: [{
+            type: Input
+        }], ShowDensityPicker: [{
+            type: Input
+        }], ShowMinimize: [{
+            type: Input
+        }], ShowEnd: [{
+            type: Input
+        }], ShowSurfacePanel: [{
+            type: Input
+        }], ShowChannels: [{
+            type: Input
+        }], ShowActivityRail: [{
+            type: Input
+        }], ShowDevLinks: [{
+            type: Input
+        }], AllowResize: [{
+            type: Input
+        }], UiConfig: [{
+            type: Input
         }], ReviewData: [{
             type: Input
         }], Ended: [{
@@ -1257,6 +1924,22 @@ export class RealtimeSessionOverlayComponent {
             type: Output
         }], ReviewClosed: [{
             type: Output
+        }], Minimized: [{
+            type: Output
+        }], TextRevealed: [{
+            type: Output
+        }], ChromeChanged: [{
+            type: Output
+        }], ConnectionStateChanged: [{
+            type: Output
+        }], MuteChanged: [{
+            type: Output
+        }], DensityChanged: [{
+            type: Output
+        }], SurfacePanelResized: [{
+            type: Output
+        }], ControlInvoked: [{
+            type: Output
         }], surfaceTabsRef: [{
             type: ViewChild,
             args: [RealtimeSurfaceTabsComponent]
@@ -1266,9 +1949,12 @@ export class RealtimeSessionOverlayComponent {
         }], reviewBoardTpl: [{
             type: ViewChild,
             args: ['reviewBoardTpl']
+        }], recordingTpl: [{
+            type: ViewChild,
+            args: ['recordingTpl']
         }], 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 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(RealtimeSessionOverlayComponent, { className: "RealtimeSessionOverlayComponent", filePath: "src/lib/components/realtime/realtime-session-overlay.component.ts", lineNumber: 128 }); })();
 //# sourceMappingURL=realtime-session-overlay.component.js.map