@memberjunction/ng-conversations 6.2.0-edge.3 → 6.2.0-edge.4

package/dist/lib/components/realtime/realtime-surface-tabs.component.js

@@ -1,30 +1,33 @@
-import { Component, EventEmitter, Input, Output, ChangeDetectorRef, ViewChild, inject } from '@angular/core';
+import { Component, EventEmitter, Input, Output, ChangeDetectorRef, ViewChild, ViewChildren, inject } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { MediaMoveMenuComponent } from '@memberjunction/ng-realtime-media';
+import { MEDIA_PLACEMENTS } from '@memberjunction/ai-realtime-client/media';
+import { MJButtonDirective } from '@memberjunction/ng-ui-components';
 import { UserInfoEngine } from '@memberjunction/core-entities';
 import { ArtifactsModule } from '@memberjunction/ng-artifacts';
 import { RealtimeActivityRailComponent } from './realtime-activity-rail.component';
-import { RealtimeChannelPaneComponent } from './channels/realtime-channel-pane.component';
 import { ChannelOnboardingPanelComponent } from './channels/channel-onboarding-panel.component';
 import { RealtimeSurfaceTabsModel } from './realtime-surface-tabs.model';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/common";
+const _c0 = ["channelSlot"];
 function RealtimeSurfaceTabsComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 1)(1, "button", 2);
+    i0.ɵɵelementStart(0, "div", 2)(1, "button", 3);
     i0.ɵɵlistener("click", function RealtimeSurfaceTabsComponent_Conditional_1_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.ToggleCollapsed()); });
-    i0.ɵɵelement(2, "i", 3);
+    i0.ɵɵelement(2, "i", 4);
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(3, "i", 4);
+    i0.ɵɵelement(3, "i", 5);
     i0.ɵɵelementEnd();
 } }
 function RealtimeSurfaceTabsComponent_Conditional_2_For_2_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "span", 11);
+    i0.ɵɵelement(0, "span", 12);
 } }
 function RealtimeSurfaceTabsComponent_Conditional_2_For_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "span", 13);
+    i0.ɵɵelement(0, "span", 14);
 } }
 function RealtimeSurfaceTabsComponent_Conditional_2_For_2_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 16);
+    i0.ɵɵelementStart(0, "span", 17);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -32,18 +35,29 @@ function RealtimeSurfaceTabsComponent_Conditional_2_For_2_Conditional_6_Template
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(ctx_r1.State.Cards.length);
 } }
+function RealtimeSurfaceTabsComponent_Conditional_2_For_2_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-media-move-menu", 19);
+    i0.ɵɵlistener("MoveRequested", function RealtimeSurfaceTabsComponent_Conditional_2_For_2_Conditional_7_Template_mj_media_move_menu_MoveRequested_0_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.MoveRequested.emit($event)); })("ResetLayoutRequested", function RealtimeSurfaceTabsComponent_Conditional_2_For_2_Conditional_7_Template_mj_media_move_menu_ResetLayoutRequested_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.ResetLayoutRequested.emit()); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const tab_r5 = i0.ɵɵnextContext().$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("Key", tab_r5.Key)("Title", tab_r5.Title)("Placement", ctx_r1.PlacementOf(tab_r5.Key))("Allowed", ctx_r1.AllowedOf(tab_r5.Key));
+} }
 function RealtimeSurfaceTabsComponent_Conditional_2_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵconditionalCreate(0, RealtimeSurfaceTabsComponent_Conditional_2_For_2_Conditional_0_Template, 1, 0, "span", 11);
-    i0.ɵɵelementStart(1, "button", 12);
+    i0.ɵɵconditionalCreate(0, RealtimeSurfaceTabsComponent_Conditional_2_For_2_Conditional_0_Template, 1, 0, "span", 12);
+    i0.ɵɵelementStart(1, "button", 13);
     i0.ɵɵlistener("click", function RealtimeSurfaceTabsComponent_Conditional_2_For_2_Template_button_click_1_listener() { const tab_r5 = i0.ɵɵrestoreView(_r4).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.Model.Focus(tab_r5.Key)); });
-    i0.ɵɵconditionalCreate(2, RealtimeSurfaceTabsComponent_Conditional_2_For_2_Conditional_2_Template, 1, 0, "span", 13);
-    i0.ɵɵelement(3, "i", 14);
-    i0.ɵɵelementStart(4, "span", 15);
+    i0.ɵɵconditionalCreate(2, RealtimeSurfaceTabsComponent_Conditional_2_For_2_Conditional_2_Template, 1, 0, "span", 14);
+    i0.ɵɵelement(3, "i", 15);
+    i0.ɵɵelementStart(4, "span", 16);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(6, RealtimeSurfaceTabsComponent_Conditional_2_For_2_Conditional_6_Template, 2, 1, "span", 16);
+    i0.ɵɵconditionalCreate(6, RealtimeSurfaceTabsComponent_Conditional_2_For_2_Conditional_6_Template, 2, 1, "span", 17);
     i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(7, RealtimeSurfaceTabsComponent_Conditional_2_For_2_Conditional_7_Template, 1, 4, "mj-media-move-menu", 18);
 } if (rf & 2) {
     const tab_r5 = ctx.$implicit;
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -61,87 +75,115 @@ function RealtimeSurfaceTabsComponent_Conditional_2_For_2_Template(rf, ctx) { if
     i0.ɵɵtextInterpolate(tab_r5.Title);
     i0.ɵɵadvance();
     i0.ɵɵconditional(tab_r5.Kind === "activity" && ctx_r1.State.Cards.length > 0 ? 6 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(tab_r5.Kind === "channel" && (tab_r5.Data == null ? null : tab_r5.Data.Plugin) && tab_r5.Key === ctx_r1.Model.ActiveKey ? 7 : -1);
 } }
 function RealtimeSurfaceTabsComponent_Conditional_2_For_7_Case_1_Template(rf, ctx) { if (rf & 1) {
-    const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-realtime-activity-rail", 19);
-    i0.ɵɵlistener("OpenRunRequested", function RealtimeSurfaceTabsComponent_Conditional_2_For_7_Case_1_Template_mj_realtime_activity_rail_OpenRunRequested_0_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OpenRunRequested.emit($event)); });
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-realtime-activity-rail", 22);
+    i0.ɵɵlistener("OpenRunRequested", function RealtimeSurfaceTabsComponent_Conditional_2_For_7_Case_1_Template_mj_realtime_activity_rail_OpenRunRequested_0_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OpenRunRequested.emit($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵproperty("State", ctx_r1.State)("DevMode", ctx_r1.DevMode)("Embedded", true)("CurrentUser", ctx_r1.CurrentUser)("EnvironmentID", ctx_r1.EnvironmentID)("ExtraArtifacts", ctx_r1.ExtraArtifacts);
 } }
-function RealtimeSurfaceTabsComponent_Conditional_2_For_7_Case_2_Conditional_0_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-channel-onboarding-panel", 24);
-    i0.ɵɵlistener("Dismissed", function RealtimeSurfaceTabsComponent_Conditional_2_For_7_Case_2_Conditional_0_Conditional_1_Template_mj_channel_onboarding_panel_Dismissed_0_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.DismissOnboarding()); });
+function RealtimeSurfaceTabsComponent_Conditional_2_For_7_Case_2_Conditional_0_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 27);
+    i0.ɵɵlistener("click", function RealtimeSurfaceTabsComponent_Conditional_2_For_7_Case_2_Conditional_0_Conditional_4_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r8); const tab_r9 = i0.ɵɵnextContext(3).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.MoveRequested.emit({ Key: tab_r9.Key, Placement: "tab" })); });
+    i0.ɵɵtext(1, " Bring it here ");
     i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(5);
-    i0.ɵɵproperty("Content", ctx_r1.OnboardingContent);
 } }
 function RealtimeSurfaceTabsComponent_Conditional_2_For_7_Case_2_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-realtime-channel-pane", 22);
-    i0.ɵɵconditionalCreate(1, RealtimeSurfaceTabsComponent_Conditional_2_For_7_Case_2_Conditional_0_Conditional_1_Template, 1, 1, "mj-channel-onboarding-panel", 23);
+    i0.ɵɵelementStart(0, "div", 23);
+    i0.ɵɵelement(1, "i", 15);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(4, RealtimeSurfaceTabsComponent_Conditional_2_For_7_Case_2_Conditional_0_Conditional_4_Template, 2, 0, "button", 26);
+    i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const tab_r8 = i0.ɵɵnextContext(2).$implicit;
+    const tab_r9 = i0.ɵɵnextContext(2).$implicit;
     const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("Plugin", ctx);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(tab_r8.Key === ctx_r1.Model.ActiveKey && ctx_r1.OnboardingContent ? 1 : -1);
+    i0.ɵɵclassMap(ctx_r1.AwayIcon(tab_r9.Key));
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate2("", tab_r9.Title, " is ", ctx_r1.AwayText(tab_r9.Key), ".");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.AllowedOf(tab_r9.Key).includes("tab") ? 4 : -1);
+} }
+function RealtimeSurfaceTabsComponent_Conditional_2_For_7_Case_2_Conditional_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    const _r10 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-channel-onboarding-panel", 30);
+    i0.ɵɵlistener("Dismissed", function RealtimeSurfaceTabsComponent_Conditional_2_For_7_Case_2_Conditional_1_Conditional_2_Template_mj_channel_onboarding_panel_Dismissed_0_listener() { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.DismissOnboarding()); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(5);
+    i0.ɵɵproperty("Content", ctx_r1.OnboardingContent);
 } }
 function RealtimeSurfaceTabsComponent_Conditional_2_For_7_Case_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementContainer(0, 20);
+    i0.ɵɵelement(0, "div", 28, 0);
+    i0.ɵɵconditionalCreate(2, RealtimeSurfaceTabsComponent_Conditional_2_For_7_Case_2_Conditional_1_Conditional_2_Template, 1, 1, "mj-channel-onboarding-panel", 29);
 } if (rf & 2) {
-    i0.ɵɵproperty("ngTemplateOutlet", ctx);
+    const tab_r9 = i0.ɵɵnextContext(2).$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵattribute("data-channel-key", tab_r9.Key);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(tab_r9.Key === ctx_r1.Model.ActiveKey && ctx_r1.OnboardingContent ? 2 : -1);
 } }
 function RealtimeSurfaceTabsComponent_Conditional_2_For_7_Case_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 21);
-    i0.ɵɵelement(1, "i", 25);
+    i0.ɵɵelementContainer(0, 24);
+} if (rf & 2) {
+    i0.ɵɵproperty("ngTemplateOutlet", ctx);
+} }
+function RealtimeSurfaceTabsComponent_Conditional_2_For_7_Case_2_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 25);
+    i0.ɵɵelement(1, "i", 31);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const tab_r8 = i0.ɵɵnextContext(2).$implicit;
+    const tab_r9 = i0.ɵɵnextContext(2).$implicit;
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate1("", tab_r8.Title, " coming online\u2026");
+    i0.ɵɵtextInterpolate1("", tab_r9.Title, " coming online\u2026");
 } }
 function RealtimeSurfaceTabsComponent_Conditional_2_For_7_Case_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, RealtimeSurfaceTabsComponent_Conditional_2_For_7_Case_2_Conditional_0_Template, 2, 2)(1, RealtimeSurfaceTabsComponent_Conditional_2_For_7_Case_2_Conditional_1_Template, 1, 1, "ng-container", 20)(2, RealtimeSurfaceTabsComponent_Conditional_2_For_7_Case_2_Conditional_2_Template, 4, 1, "div", 21);
+    i0.ɵɵconditionalCreate(0, RealtimeSurfaceTabsComponent_Conditional_2_For_7_Case_2_Conditional_0_Template, 5, 5, "div", 23)(1, RealtimeSurfaceTabsComponent_Conditional_2_For_7_Case_2_Conditional_1_Template, 3, 2)(2, RealtimeSurfaceTabsComponent_Conditional_2_For_7_Case_2_Conditional_2_Template, 1, 1, "ng-container", 24)(3, RealtimeSurfaceTabsComponent_Conditional_2_For_7_Case_2_Conditional_3_Template, 4, 1, "div", 25);
 } if (rf & 2) {
     let tmp_12_0;
-    const tab_r8 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵconditional((tmp_12_0 = tab_r8.Data == null ? null : tab_r8.Data.Plugin) ? 0 : (tmp_12_0 = tab_r8.Data == null ? null : tab_r8.Data.Content) ? 1 : 2, tmp_12_0);
+    const tab_r9 = i0.ɵɵnextContext().$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵconditional((tab_r9.Data == null ? null : tab_r9.Data.Plugin) && ctx_r1.PlacementOf(tab_r9.Key) !== "tab" ? 0 : (tab_r9.Data == null ? null : tab_r9.Data.Plugin) ? 1 : (tmp_12_0 = tab_r9.Data == null ? null : tab_r9.Data.Content) ? 2 : 3, tmp_12_0);
 } }
 function RealtimeSurfaceTabsComponent_Conditional_2_For_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 17);
-    i0.ɵɵconditionalCreate(1, RealtimeSurfaceTabsComponent_Conditional_2_For_7_Case_1_Template, 1, 6, "mj-realtime-activity-rail", 18)(2, RealtimeSurfaceTabsComponent_Conditional_2_For_7_Case_2_Template, 3, 1);
+    i0.ɵɵelementStart(0, "div", 20);
+    i0.ɵɵconditionalCreate(1, RealtimeSurfaceTabsComponent_Conditional_2_For_7_Case_1_Template, 1, 6, "mj-realtime-activity-rail", 21)(2, RealtimeSurfaceTabsComponent_Conditional_2_For_7_Case_2_Template, 4, 1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     let tmp_12_0;
-    const tab_r8 = ctx.$implicit;
+    const tab_r9 = ctx.$implicit;
     const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵclassProp("s-pane--active", tab_r8.Key === ctx_r1.Model.ActiveKey);
+    i0.ɵɵclassProp("s-pane--active", tab_r9.Key === ctx_r1.Model.ActiveKey);
     i0.ɵɵadvance();
-    i0.ɵɵconditional((tmp_12_0 = tab_r8.Kind) === "activity" ? 1 : tmp_12_0 === "channel" ? 2 : -1);
+    i0.ɵɵconditional((tmp_12_0 = tab_r9.Kind) === "activity" ? 1 : tmp_12_0 === "channel" ? 2 : -1);
 } }
 function RealtimeSurfaceTabsComponent_Conditional_2_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 10);
-    i0.ɵɵelement(1, "i", 26);
+    i0.ɵɵelementStart(0, "div", 11);
+    i0.ɵɵelement(1, "i", 32);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3, "Surfaces appear here as the call gets going.");
     i0.ɵɵelementEnd()();
 } }
 function RealtimeSurfaceTabsComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 5);
-    i0.ɵɵrepeaterCreate(1, RealtimeSurfaceTabsComponent_Conditional_2_For_2_Template, 7, 18, null, null, i0.ɵɵcomponentInstance().TrackTab, true);
-    i0.ɵɵelementStart(3, "div", 6)(4, "button", 7);
+    i0.ɵɵelementStart(0, "div", 6);
+    i0.ɵɵrepeaterCreate(1, RealtimeSurfaceTabsComponent_Conditional_2_For_2_Template, 8, 19, null, null, i0.ɵɵcomponentInstance().TrackTab, true);
+    i0.ɵɵelementStart(3, "div", 7)(4, "button", 8);
     i0.ɵɵlistener("click", function RealtimeSurfaceTabsComponent_Conditional_2_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.ToggleCollapsed()); });
-    i0.ɵɵelement(5, "i", 8);
+    i0.ɵɵelement(5, "i", 9);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵrepeaterCreate(6, RealtimeSurfaceTabsComponent_Conditional_2_For_7_Template, 3, 3, "div", 9, i0.ɵɵcomponentInstance().TrackTab, true);
-    i0.ɵɵconditionalCreate(8, RealtimeSurfaceTabsComponent_Conditional_2_Conditional_8_Template, 4, 0, "div", 10);
+    i0.ɵɵrepeaterCreate(6, RealtimeSurfaceTabsComponent_Conditional_2_For_7_Template, 3, 3, "div", 10, i0.ɵɵcomponentInstance().TrackTab, true);
+    i0.ɵɵconditionalCreate(8, RealtimeSurfaceTabsComponent_Conditional_2_Conditional_8_Template, 4, 0, "div", 11);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
@@ -158,14 +200,28 @@ function RealtimeSurfaceTabsComponent_Conditional_2_Template(rf, ctx) { if (rf &
  * follows them across devices.
  */
 const CHANNEL_ONBOARDING_SEEN_SETTING_KEY = 'mj.realtimeChannels.onboardingSeen.v1';
+/** How a channel's tab says where its surface went. */
+const AWAY_TEXT = {
+    stage: 'on the stage',
+    pip: 'in picture-in-picture',
+    tab: 'here',
+    hidden: 'hidden',
+};
+const AWAY_ICON = {
+    stage: 'fa-solid fa-expand',
+    pip: 'fa-regular fa-window-restore',
+    tab: 'fa-solid fa-table-columns',
+    hidden: 'fa-solid fa-eye-slash',
+};
 /**
  * The call overlay's TABBED SURFACE PANEL (the right panel) — decluttered redesign:
  *
  *  - **Channel tabs** (LEFT cluster) — one per channel that has come into play. The whiteboard
  *    tabs immediately at session start; every other channel tabs only once the agent first
- *    USES it. Each carries a distinct accent color + its plugin icon. The pane creates the
- *    plugin's surface component dynamically (via `mj-realtime-channel-pane`); a placeholder
- *    shows the "coming online…" state until a plugin/template is supplied.
+ *    USES it. Each carries a distinct accent color + its plugin icon. A plugin's surface lives
+ *    on the overlay's stage, which lays it over the pane's slot while the tab is active
+ *    ({@link ChannelSlotChange}); a placeholder shows the "coming online…" state until a
+ *    plugin/template is supplied.
  *  - **Activity** (RIGHT-aligned, pinned LAST) — gated: appears only once ≥1 agent run has
  *    occurred (or in review mode). Hosts {@link RealtimeActivityRailComponent}, which now also
  *    renders inline artifact previews and a split-pane artifact viewer. Styled distinctly from
@@ -175,8 +231,9 @@ const CHANNEL_ONBOARDING_SEEN_SETTING_KEY = 'mj.realtimeChannels.onboardingSeen.
  * Artifacts NO LONGER get their own tab — they live inside the Activity tab (cleaner than a
  * row of per-artifact tabs).
  *
- * Panes are kept ALIVE while hidden (CSS `display:none`) so switching tabs never reloads a
- * channel surface or resets the rail. The whole panel collapses to a slim strip via the chevron.
+ * Panes are kept ALIVE while hidden (CSS `display:none`) so switching tabs never resets the rail;
+ * channel surfaces are on the overlay's stage, so switching tabs or collapsing the panel never
+ * reloads them either. The whole panel collapses to a slim strip via the chevron.
  *
  * SIZING IS EXTERNAL: the overlay shell hosts this panel in a fixed-width flex item and owns
  * the width. This panel just fills it and REPORTS the layout signals the shell sizes from:
@@ -191,9 +248,9 @@ export class RealtimeSurfaceTabsComponent {
     /** Whether developer affordances ("Open run" links) are revealed (gear-gated). */
     DevMode = false;
     /**
-     * FILL presentation: the panel stretches to the overlay's full width (the board-focus
-     * layout, where the main call column is hidden and a channel surface owns the screen).
-     * Bound by the overlay shell; overrides the normal / wide width tiers.
+     * FILL presentation: the panel stretches to its host's full width with no left border,
+     * overriding the normal / wide width tiers. The overlay no longer binds it: in focus mode
+     * the focused channel's surface fills the overlay's stage instead.
      */
     Fill = false;
     /** The signed-in user, threaded to the artifact viewer panel. */
@@ -234,12 +291,50 @@ export class RealtimeSurfaceTabsComponent {
      * the user has never dragged an explicit width).
      */
     WideChanged = new EventEmitter();
+    /**
+     * The channel whose tab the user is looking at changed (`null` when a non-channel tab, such as Activity, is active).
+     * Lets the session show the model the surface the user is on when it can only watch one.
+     */
+    ActiveChannelChange = new EventEmitter();
+    /**
+     * The active channel tab's slot changed: the element its pane keeps for the channel's surface, or `null` while no
+     * channel tab is showing (another tab is active, or the panel is collapsed). The overlay's stage lays the surface
+     * over this element.
+     */
+    ChannelSlotChange = new EventEmitter();
+    /**
+     * Where each channel's surface is placed, by channel key (a channel not listed is on its tab). A channel whose
+     * surface is elsewhere shows where in its pane, with "Bring it here" when its channel allows the tab.
+     */
+    SurfacePlacements = new Map();
+    /** Where each channel lets the user move its surface, by channel key (a channel not listed allows anywhere). */
+    AllowedPlacements = new Map();
+    /** The user asked to move a channel's surface (from "Move to…" or "Bring it here"). */
+    MoveRequested = new EventEmitter();
+    /** The user asked to put every surface back where its channel places it. */
+    ResetLayoutRequested = new EventEmitter();
     /** The panel's tab state (add / focus / dedupe / flash) — see the model for the rules. */
     Model = new RealtimeSurfaceTabsModel();
-    /** Whether the panel is collapsed to its slim strip. */
-    Collapsed = false;
+    /**
+     * Whether the panel is collapsed to its slim strip. The chevron toggles it, a reveal expands it, and the panel reports
+     * each such change through {@link CollapsedChange}. A host may bind it, so that a panel it creates again starts as the
+     * user left the one before (the call overlay does when only the call's width hid the panel, #5433). A value the host
+     * sets is not reported back.
+     */
+    set Collapsed(value) {
+        this.collapsed = value;
+        this.syncWide();
+    }
+    get Collapsed() {
+        return this.collapsed;
+    }
+    collapsed = false;
     /** The embedded Activity rail (owns the inline artifact previews + the split-pane viewer). */
     activityRail;
+    /** The slots of the plugin channel panes, one per tab. */
+    channelSlots;
+    /** The slot last reported through {@link ChannelSlotChange}. */
+    reportedSlot = null;
     flashTimer = null;
     subs = [];
     lastWide = false;
@@ -263,6 +358,9 @@ export class RealtimeSurfaceTabsComponent {
     ngOnInit() {
         this.subs.push(this.Model.Changed$.subscribe(() => this.onModelChanged()));
     }
+    ngAfterViewChecked() {
+        this.reportChannelSlot();
+    }
     ngOnDestroy() {
         for (const s of this.subs) {
             s.unsubscribe();
@@ -273,14 +371,46 @@ export class RealtimeSurfaceTabsComponent {
             this.flashTimer = null;
         }
     }
+    /** Reports the active channel tab's slot when it differs from the one last reported. */
+    reportChannelSlot() {
+        const slot = this.activeChannelSlot();
+        if (slot?.Key === this.reportedSlot?.Key && slot?.Element === this.reportedSlot?.Element) {
+            return;
+        }
+        this.reportedSlot = slot;
+        // The view was just checked and the overlay binds the slot, so it hears about it in a fresh turn.
+        queueMicrotask(() => this.ChannelSlotChange.emit(slot));
+    }
+    /** The active tab's slot: present while that tab is a plugin channel and the panel is expanded. */
+    activeChannelSlot() {
+        const key = this.Model.ActiveKey;
+        const slot = this.channelSlots?.find(s => s.nativeElement.dataset['channelKey'] === key);
+        return slot ? { Key: key, Element: slot.nativeElement } : null;
+    }
+    /** Where a channel's surface is placed. */
+    PlacementOf(key) {
+        return this.SurfacePlacements.get(key) ?? 'tab';
+    }
+    /** Where a channel lets the user move its surface. */
+    AllowedOf(key) {
+        return this.AllowedPlacements.get(key) ?? MEDIA_PLACEMENTS;
+    }
+    /** Where a moved channel's surface is, as its tab says it: "on the stage", "in picture-in-picture", "hidden". */
+    AwayText(key) {
+        return AWAY_TEXT[this.PlacementOf(key)];
+    }
+    /** The icon for where a moved channel's surface is. */
+    AwayIcon(key) {
+        return AWAY_ICON[this.PlacementOf(key)];
+    }
     /** Toggle the panel between expanded and slim-collapsed. */
     ToggleCollapsed() {
         this.setCollapsed(!this.Collapsed);
     }
     /** Collapse-state transitions funnel through here so the shell always hears about them. */
     setCollapsed(value) {
-        if (this.Collapsed !== value) {
-            this.Collapsed = value;
+        if (this.collapsed !== value) {
+            this.collapsed = value;
             this.CollapsedChange.emit(value);
             this.syncWide();
         }
@@ -377,11 +507,22 @@ export class RealtimeSurfaceTabsComponent {
     }
     /** On model changes: schedule the flash clear, report a wide-tier flip, re-render. */
     onModelChanged() {
+        this.emitActiveChannelIfChanged();
         this.scheduleFlashClear();
         this.syncWide();
         this.evaluateOnboarding();
         this.cdr.markForCheck();
     }
+    /** The channel key last reported through {@link ActiveChannelChange}. */
+    lastReportedChannel = null;
+    /** Reports the focused channel when it differs from the last one reported. */
+    emitActiveChannelIfChanged() {
+        const key = this.Model.ActiveChannelKey;
+        if (key !== this.lastReportedChannel) {
+            this.lastReportedChannel = key;
+            this.ActiveChannelChange.emit(key);
+        }
+    }
     /**
      * Decides whether the first-run channel intro should be visible for the ACTIVE tab: shows it
      * the first time the user opens (focuses) a channel tab whose plugin supplies onboarding and
@@ -468,27 +609,28 @@ export class RealtimeSurfaceTabsComponent {
     }
     static ɵfac = function RealtimeSurfaceTabsComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || RealtimeSurfaceTabsComponent)(); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: RealtimeSurfaceTabsComponent, selectors: [["mj-realtime-surface-tabs"]], viewQuery: function RealtimeSurfaceTabsComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(RealtimeActivityRailComponent, 5);
+            i0.ɵɵviewQuery(RealtimeActivityRailComponent, 5)(_c0, 5);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.activityRail = _t.first);
-        } }, inputs: { State: "State", DevMode: "DevMode", Fill: "Fill", CurrentUser: "CurrentUser", EnvironmentID: "EnvironmentID", ExtraArtifacts: "ExtraArtifacts", ShowActivityTab: "ShowActivityTab" }, outputs: { OpenRunRequested: "OpenRunRequested", CollapsedChange: "CollapsedChange", WideChanged: "WideChanged" }, decls: 3, vars: 5, consts: [["aria-label", "Session surfaces", 1, "surface"], [1, "surface__strip"], ["type", "button", "title", "Show session panel", "aria-expanded", "false", 1, "surface__toggle", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-chevron-left"], ["aria-hidden", "true", "title", "Session activity", 1, "fa-solid", "fa-wave-square", "surface__strip-icon"], ["role", "tablist", 1, "surface-tabs"], [1, "tabs-end"], ["type", "button", "title", "Hide session panel", "aria-expanded", "true", 1, "surface__toggle", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-chevron-right"], ["role", "tabpanel", 1, "s-pane", 3, "s-pane--active"], ["role", "status", 1, "surface__empty"], ["aria-hidden", "true", 1, "tabs-spacer"], ["type", "button", "role", "tab", 1, "s-tab", 3, "click", "title"], ["aria-hidden", "true", 1, "s-tab__dot"], ["aria-hidden", "true"], [1, "s-tab__title"], ["aria-hidden", "true", 1, "s-tab__badge"], ["role", "tabpanel", 1, "s-pane"], [3, "State", "DevMode", "Embedded", "CurrentUser", "EnvironmentID", "ExtraArtifacts"], [3, "OpenRunRequested", "State", "DevMode", "Embedded", "CurrentUser", "EnvironmentID", "ExtraArtifacts"], [3, "ngTemplateOutlet"], ["role", "status", 1, "channel-placeholder"], [3, "Plugin"], [3, "Content"], [3, "Dismissed", "Content"], ["aria-hidden", "true", 1, "fa-solid", "fa-chalkboard"], ["aria-hidden", "true", 1, "fa-solid", "fa-wave-square"]], template: function RealtimeSurfaceTabsComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "aside", 0);
-            i0.ɵɵconditionalCreate(1, RealtimeSurfaceTabsComponent_Conditional_1_Template, 4, 0, "div", 1)(2, RealtimeSurfaceTabsComponent_Conditional_2_Template, 9, 1);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.channelSlots = _t);
+        } }, inputs: { State: "State", DevMode: "DevMode", Fill: "Fill", CurrentUser: "CurrentUser", EnvironmentID: "EnvironmentID", ExtraArtifacts: "ExtraArtifacts", ShowActivityTab: "ShowActivityTab", SurfacePlacements: "SurfacePlacements", AllowedPlacements: "AllowedPlacements", Collapsed: "Collapsed" }, outputs: { OpenRunRequested: "OpenRunRequested", CollapsedChange: "CollapsedChange", WideChanged: "WideChanged", ActiveChannelChange: "ActiveChannelChange", ChannelSlotChange: "ChannelSlotChange", MoveRequested: "MoveRequested", ResetLayoutRequested: "ResetLayoutRequested" }, decls: 3, vars: 5, consts: [["channelSlot", ""], ["aria-label", "Session surfaces", 1, "surface"], [1, "surface__strip"], ["type", "button", "title", "Show session panel", "aria-expanded", "false", 1, "surface__toggle", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-chevron-left"], ["aria-hidden", "true", "title", "Session activity", 1, "fa-solid", "fa-wave-square", "surface__strip-icon"], ["role", "tablist", 1, "surface-tabs"], [1, "tabs-end"], ["type", "button", "title", "Hide session panel", "aria-expanded", "true", 1, "surface__toggle", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-chevron-right"], ["role", "tabpanel", 1, "s-pane", 3, "s-pane--active"], ["role", "status", 1, "surface__empty"], ["aria-hidden", "true", 1, "tabs-spacer"], ["type", "button", "role", "tab", 1, "s-tab", 3, "click", "title"], ["aria-hidden", "true", 1, "s-tab__dot"], ["aria-hidden", "true"], [1, "s-tab__title"], ["aria-hidden", "true", 1, "s-tab__badge"], [1, "s-tab-move", 3, "Key", "Title", "Placement", "Allowed"], [1, "s-tab-move", 3, "MoveRequested", "ResetLayoutRequested", "Key", "Title", "Placement", "Allowed"], ["role", "tabpanel", 1, "s-pane"], [3, "State", "DevMode", "Embedded", "CurrentUser", "EnvironmentID", "ExtraArtifacts"], [3, "OpenRunRequested", "State", "DevMode", "Embedded", "CurrentUser", "EnvironmentID", "ExtraArtifacts"], ["role", "status", 1, "s-pane__away"], [3, "ngTemplateOutlet"], ["role", "status", 1, "channel-placeholder"], ["type", "button", "mjButton", "", "Variant", "secondary", "Size", "sm"], ["type", "button", "mjButton", "", "Variant", "secondary", "Size", "sm", 3, "click"], [1, "s-pane__slot"], [3, "Content"], [3, "Dismissed", "Content"], ["aria-hidden", "true", 1, "fa-solid", "fa-chalkboard"], ["aria-hidden", "true", 1, "fa-solid", "fa-wave-square"]], template: function RealtimeSurfaceTabsComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "aside", 1);
+            i0.ɵɵconditionalCreate(1, RealtimeSurfaceTabsComponent_Conditional_1_Template, 4, 0, "div", 2)(2, RealtimeSurfaceTabsComponent_Conditional_2_Template, 9, 1);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
             i0.ɵɵclassProp("surface--collapsed", ctx.Collapsed)("surface--fill", ctx.Fill && !ctx.Collapsed);
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.Collapsed ? 1 : 2);
-        } }, dependencies: [CommonModule, i1.NgTemplateOutlet, ArtifactsModule, RealtimeActivityRailComponent, RealtimeChannelPaneComponent,
-            ChannelOnboardingPanelComponent], styles: ["[_nghost-%COMP%] {\n  display: block;\n  height: 100%;\n  \n  --activity-accent: var(--mj-color-violet-400, #a78bfa);\n  --activity-accent-bg: color-mix(in srgb, var(--mj-color-violet-400, #a78bfa) 12%, transparent);\n  --activity-accent-border: color-mix(in srgb, var(--mj-color-violet-400, #a78bfa) 38%, transparent);\n  \n  --tab-accent: var(--mj-brand-primary);\n}\n\n\n\n.surface[_ngcontent-%COMP%] {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  border-left: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n}\n\n.surface--fill[_ngcontent-%COMP%] {\n  width: 100%;\n  border-left: none;\n}\n.surface--collapsed[_ngcontent-%COMP%] {\n  width: 40px;\n  background: var(--mj-bg-surface-card);\n}\n\n\n.surface__strip[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 12px;\n  padding: 10px 0;\n}\n.surface__strip-icon[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n}\n\n.surface__toggle[_ngcontent-%COMP%] {\n  width: 24px;\n  height: 24px;\n  display: grid;\n  place-items: center;\n  background: transparent;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  color: var(--mj-text-muted);\n  cursor: pointer;\n  flex-shrink: 0;\n  font-size: 10px;\n  transition: color 140ms ease, border-color 140ms ease;\n}\n.surface__toggle[_ngcontent-%COMP%]:hover {\n  color: var(--mj-text-primary);\n  border-color: var(--mj-border-strong);\n}\n\n\n.surface-tabs[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: stretch;\n  background: var(--mj-bg-surface-sunken);\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n  overflow-x: auto;\n  scrollbar-width: none;\n}\n.surface-tabs[_ngcontent-%COMP%]::-webkit-scrollbar {\n  display: none;\n}\n\n\n.tabs-spacer[_ngcontent-%COMP%] {\n  flex: 1 1 auto;\n  min-width: 12px;\n}\n\n\n\n.s-tab[_ngcontent-%COMP%] {\n  position: relative;\n  padding: 10px 14px;\n  border: 0;\n  background: transparent;\n  cursor: pointer;\n  font-family: inherit;\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--mj-text-muted);\n  display: inline-flex;\n  align-items: center;\n  gap: 7px;\n  border-bottom: 3px solid transparent;\n  transition: color 150ms ease, border-color 150ms ease, background 150ms ease;\n  white-space: nowrap;\n  flex: 0 1 auto;\n  min-width: calc(11px + 7px + 8ch + 28px); \n}\n.s-tab[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 11px;\n  flex-shrink: 0;\n}\n.s-tab__title[_ngcontent-%COMP%] {\n  max-width: 22ch;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  min-width: 0;\n}\n.s-tab[_ngcontent-%COMP%]:hover {\n  color: var(--mj-text-secondary);\n  background: var(--mj-bg-surface-hover);\n}\n\n\n.s-tab__dot[_ngcontent-%COMP%] {\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  flex-shrink: 0;\n  background: var(--tab-accent);\n}\n\n\n.s-tab--active[_ngcontent-%COMP%] {\n  color: var(--mj-text-primary);\n  background: var(--mj-bg-surface);\n  flex-shrink: 0;\n}\n.s-tab--channel.s-tab--active[_ngcontent-%COMP%] {\n  border-bottom-color: var(--tab-accent);\n}\n.s-tab--channel.s-tab--active[_ngcontent-%COMP%]   .s-tab__dot[_ngcontent-%COMP%] {\n  box-shadow: 0 0 6px var(--tab-accent);\n}\n.s-tab--channel.s-tab--active[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--tab-accent);\n}\n\n\n.s-tab--activity[_ngcontent-%COMP%] {\n  color: var(--mj-text-secondary);\n}\n.s-tab--activity[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--activity-accent);\n}\n.s-tab--activity.s-tab--active[_ngcontent-%COMP%] {\n  border-bottom-color: var(--activity-accent);\n  background: var(--activity-accent-bg);\n  color: var(--mj-text-primary);\n}\n.s-tab__badge[_ngcontent-%COMP%] {\n  display: inline-grid;\n  place-items: center;\n  min-width: 16px;\n  height: 16px;\n  padding: 0 4px;\n  border-radius: var(--mj-radius-full, 9999px);\n  background: var(--activity-accent);\n  color: var(--mj-text-inverse);\n  font-size: 9.5px;\n  font-weight: 800;\n  line-height: 1;\n  flex-shrink: 0;\n}\n\n\n.s-tab--flash[_ngcontent-%COMP%] {\n  animation: _ngcontent-%COMP%_tab-flash 1.4s ease;\n}\n@keyframes _ngcontent-%COMP%_tab-flash {\n  0% {\n    background: color-mix(in srgb, var(--tab-accent) 30%, transparent);\n    border-bottom-color: var(--tab-accent);\n    color: var(--mj-text-primary);\n  }\n  60% {\n    background: color-mix(in srgb, var(--tab-accent) 16%, transparent);\n    border-bottom-color: var(--tab-accent);\n  }\n  100% {\n    background: var(--mj-bg-surface);\n  }\n}\n@media (prefers-reduced-motion: reduce) {\n  .s-tab--flash[_ngcontent-%COMP%] {\n    animation: none;\n    background: color-mix(in srgb, var(--tab-accent) 18%, transparent);\n  }\n}\n\n.tabs-end[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 0 8px;\n  flex-shrink: 0;\n}\n\n\n.s-pane[_ngcontent-%COMP%] {\n  display: none;\n  flex: 1;\n  min-height: 0;\n  flex-direction: column;\n  overflow: hidden;\n  \n  position: relative;\n}\n.s-pane--active[_ngcontent-%COMP%] {\n  display: flex;\n}\n\n\n.surface__empty[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 10px;\n  color: var(--mj-text-muted);\n  font-size: 12px;\n  font-weight: 500;\n  padding: 24px;\n  text-align: center;\n}\n.surface__empty[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 20px;\n  color: var(--activity-accent);\n  opacity: 0.6;\n}\n\n\n.channel-placeholder[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 10px;\n  color: var(--mj-text-muted);\n  font-size: 12.5px;\n  font-weight: 600;\n  padding: 24px;\n  text-align: center;\n}\n.channel-placeholder[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 22px;\n  color: var(--tab-accent);\n  opacity: 0.7;\n}\n\n\n@media (max-width: 860px) {\n  .surface[_ngcontent-%COMP%] {\n    display: none;\n  }\n}"] });
+        } }, dependencies: [CommonModule, i1.NgTemplateOutlet, ArtifactsModule, RealtimeActivityRailComponent, ChannelOnboardingPanelComponent,
+            MediaMoveMenuComponent, MJButtonDirective], styles: ["[_nghost-%COMP%] {\n  display: block;\n  height: 100%;\n  \n  --activity-accent: var(--mj-color-violet-400, #a78bfa);\n  --activity-accent-bg: color-mix(in srgb, var(--mj-color-violet-400, #a78bfa) 12%, transparent);\n  --activity-accent-border: color-mix(in srgb, var(--mj-color-violet-400, #a78bfa) 38%, transparent);\n  \n  --tab-accent: var(--mj-brand-primary);\n}\n\n\n\n.surface[_ngcontent-%COMP%] {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  border-left: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n}\n\n.surface--fill[_ngcontent-%COMP%] {\n  width: 100%;\n  border-left: none;\n}\n.surface--collapsed[_ngcontent-%COMP%] {\n  width: 40px;\n  background: var(--mj-bg-surface-card);\n}\n\n\n.surface__strip[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 12px;\n  padding: 10px 0;\n}\n.surface__strip-icon[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n}\n\n.surface__toggle[_ngcontent-%COMP%] {\n  width: 24px;\n  height: 24px;\n  display: grid;\n  place-items: center;\n  background: transparent;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  color: var(--mj-text-muted);\n  cursor: pointer;\n  flex-shrink: 0;\n  font-size: 10px;\n  transition: color 140ms ease, border-color 140ms ease;\n}\n.surface__toggle[_ngcontent-%COMP%]:hover {\n  color: var(--mj-text-primary);\n  border-color: var(--mj-border-strong);\n}\n\n\n.surface-tabs[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: stretch;\n  background: var(--mj-bg-surface-sunken);\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n  overflow-x: auto;\n  scrollbar-width: none;\n}\n.surface-tabs[_ngcontent-%COMP%]::-webkit-scrollbar {\n  display: none;\n}\n\n\n.tabs-spacer[_ngcontent-%COMP%] {\n  flex: 1 1 auto;\n  min-width: 12px;\n}\n\n\n\n.s-tab[_ngcontent-%COMP%] {\n  position: relative;\n  padding: 10px 14px;\n  border: 0;\n  background: transparent;\n  cursor: pointer;\n  font-family: inherit;\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--mj-text-muted);\n  display: inline-flex;\n  align-items: center;\n  gap: 7px;\n  border-bottom: 3px solid transparent;\n  transition: color 150ms ease, border-color 150ms ease, background 150ms ease;\n  white-space: nowrap;\n  flex: 0 1 auto;\n  min-width: calc(11px + 7px + 8ch + 28px); \n}\n.s-tab[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 11px;\n  flex-shrink: 0;\n}\n.s-tab__title[_ngcontent-%COMP%] {\n  max-width: 22ch;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  min-width: 0;\n}\n.s-tab[_ngcontent-%COMP%]:hover {\n  color: var(--mj-text-secondary);\n  background: var(--mj-bg-surface-hover);\n}\n\n\n.s-tab__dot[_ngcontent-%COMP%] {\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  flex-shrink: 0;\n  background: var(--tab-accent);\n}\n\n\n.s-tab--active[_ngcontent-%COMP%] {\n  color: var(--mj-text-primary);\n  background: var(--mj-bg-surface);\n  flex-shrink: 0;\n}\n.s-tab--channel.s-tab--active[_ngcontent-%COMP%] {\n  border-bottom-color: var(--tab-accent);\n}\n.s-tab--channel.s-tab--active[_ngcontent-%COMP%]   .s-tab__dot[_ngcontent-%COMP%] {\n  box-shadow: 0 0 6px var(--tab-accent);\n}\n.s-tab--channel.s-tab--active[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--tab-accent);\n}\n\n\n.s-tab--activity[_ngcontent-%COMP%] {\n  color: var(--mj-text-secondary);\n}\n.s-tab--activity[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--activity-accent);\n}\n.s-tab--activity.s-tab--active[_ngcontent-%COMP%] {\n  border-bottom-color: var(--activity-accent);\n  background: var(--activity-accent-bg);\n  color: var(--mj-text-primary);\n}\n.s-tab__badge[_ngcontent-%COMP%] {\n  display: inline-grid;\n  place-items: center;\n  min-width: 16px;\n  height: 16px;\n  padding: 0 4px;\n  border-radius: var(--mj-radius-full, 9999px);\n  background: var(--activity-accent);\n  color: var(--mj-text-inverse);\n  font-size: 9.5px;\n  font-weight: 800;\n  line-height: 1;\n  flex-shrink: 0;\n}\n\n\n.s-tab--flash[_ngcontent-%COMP%] {\n  animation: _ngcontent-%COMP%_tab-flash 1.4s ease;\n}\n@keyframes _ngcontent-%COMP%_tab-flash {\n  0% {\n    background: color-mix(in srgb, var(--tab-accent) 30%, transparent);\n    border-bottom-color: var(--tab-accent);\n    color: var(--mj-text-primary);\n  }\n  60% {\n    background: color-mix(in srgb, var(--tab-accent) 16%, transparent);\n    border-bottom-color: var(--tab-accent);\n  }\n  100% {\n    background: var(--mj-bg-surface);\n  }\n}\n@media (prefers-reduced-motion: reduce) {\n  .s-tab--flash[_ngcontent-%COMP%] {\n    animation: none;\n    background: color-mix(in srgb, var(--tab-accent) 18%, transparent);\n  }\n}\n\n.tabs-end[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 0 8px;\n  flex-shrink: 0;\n}\n\n\n.s-pane[_ngcontent-%COMP%] {\n  display: none;\n  flex: 1;\n  min-height: 0;\n  flex-direction: column;\n  overflow: hidden;\n  \n  position: relative;\n}\n.s-pane--active[_ngcontent-%COMP%] {\n  display: flex;\n}\n\n.s-pane__slot[_ngcontent-%COMP%] {\n  flex: 1;\n  min-height: 0;\n}\n\n\n.s-pane__away[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 10px;\n  padding: 24px;\n  color: var(--mj-text-muted);\n  font-size: var(--mj-text-sm);\n  text-align: center;\n}\n.s-pane__away[_ngcontent-%COMP%]    > i[_ngcontent-%COMP%] {\n  font-size: 22px;\n  color: var(--tab-accent);\n  opacity: 0.7;\n}\n\n\n.s-tab-move[_ngcontent-%COMP%] {\n  align-self: center;\n  margin: 0 4px 0 -4px;\n}\n\n\n.surface__empty[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 10px;\n  color: var(--mj-text-muted);\n  font-size: 12px;\n  font-weight: 500;\n  padding: 24px;\n  text-align: center;\n}\n.surface__empty[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 20px;\n  color: var(--activity-accent);\n  opacity: 0.6;\n}\n\n\n.channel-placeholder[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 10px;\n  color: var(--mj-text-muted);\n  font-size: 12.5px;\n  font-weight: 600;\n  padding: 24px;\n  text-align: center;\n}\n.channel-placeholder[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 22px;\n  color: var(--tab-accent);\n  opacity: 0.7;\n}\n\n\n@media (max-width: 860px) {\n  .surface[_ngcontent-%COMP%] {\n    display: none;\n  }\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(RealtimeSurfaceTabsComponent, [{
         type: Component,
         args: [{ standalone: true, selector: 'mj-realtime-surface-tabs', imports: [
-                    CommonModule, ArtifactsModule, RealtimeActivityRailComponent, RealtimeChannelPaneComponent,
-                    ChannelOnboardingPanelComponent
-                ], template: "<!-- SIZING IS EXTERNAL: the overlay hosts this panel inside a fixed-width flex item and\n     owns its width (drag, persistence, default tiers) \u2014 the panel just fills it. -->\n<aside class=\"surface\"\n       [class.surface--collapsed]=\"Collapsed\"\n       [class.surface--fill]=\"Fill && !Collapsed\"\n       aria-label=\"Session surfaces\">\n\n  @if (Collapsed) {\n    <!-- Slim strip: the panel's collapse target -->\n    <div class=\"surface__strip\">\n      <button type=\"button\"\n              class=\"surface__toggle\"\n              (click)=\"ToggleCollapsed()\"\n              title=\"Show session panel\"\n              aria-expanded=\"false\">\n        <i class=\"fa-solid fa-chevron-left\" aria-hidden=\"true\"></i>\n      </button>\n      <i class=\"fa-solid fa-wave-square surface__strip-icon\" aria-hidden=\"true\" title=\"Session activity\"></i>\n    </div>\n  } @else {\n    <!-- Tab strip: channel tabs (left cluster) \u2026 | spacer | Activity (right-aligned) -->\n    <div class=\"surface-tabs\" role=\"tablist\">\n      @for (tab of Model.Tabs; track TrackTab($index, tab)) {\n        @if (tab.Kind === 'activity') {\n          <!-- Flex spacer pushes the Activity tab to the far right -->\n          <span class=\"tabs-spacer\" aria-hidden=\"true\"></span>\n        }\n        <button type=\"button\"\n                class=\"s-tab\"\n                role=\"tab\"\n                [class.s-tab--activity]=\"tab.Kind === 'activity'\"\n                [class.s-tab--channel]=\"tab.Kind === 'channel'\"\n                [class.s-tab--active]=\"tab.Key === Model.ActiveKey\"\n                [class.s-tab--flash]=\"tab.Key === Model.FlashKey\"\n                [style.--tab-accent]=\"tab.Color || null\"\n                [attr.aria-selected]=\"tab.Key === Model.ActiveKey\"\n                [title]=\"tab.Title\"\n                (click)=\"Model.Focus(tab.Key)\">\n          @if (tab.Kind === 'channel') {\n            <span class=\"s-tab__dot\" aria-hidden=\"true\"></span>\n          }\n          <i [class]=\"tab.Icon\" aria-hidden=\"true\"></i>\n          <span class=\"s-tab__title\">{{ tab.Title }}</span>\n          @if (tab.Kind === 'activity' && State.Cards.length > 0) {\n            <span class=\"s-tab__badge\" aria-hidden=\"true\">{{ State.Cards.length }}</span>\n          }\n        </button>\n      }\n      <div class=\"tabs-end\">\n        <button type=\"button\"\n                class=\"surface__toggle\"\n                (click)=\"ToggleCollapsed()\"\n                title=\"Hide session panel\"\n                aria-expanded=\"true\">\n          <i class=\"fa-solid fa-chevron-right\" aria-hidden=\"true\"></i>\n        </button>\n      </div>\n    </div>\n\n    <!-- Panes: ALL kept alive; only the active one is displayed -->\n    @for (tab of Model.Tabs; track TrackTab($index, tab)) {\n      <div class=\"s-pane\" [class.s-pane--active]=\"tab.Key === Model.ActiveKey\" role=\"tabpanel\">\n        @switch (tab.Kind) {\n          @case ('activity') {\n            <mj-realtime-activity-rail\n              [State]=\"State\"\n              [DevMode]=\"DevMode\"\n              [Embedded]=\"true\"\n              [CurrentUser]=\"CurrentUser\"\n              [EnvironmentID]=\"EnvironmentID\"\n              [ExtraArtifacts]=\"ExtraArtifacts\"\n              (OpenRunRequested)=\"OpenRunRequested.emit($event)\">\n            </mj-realtime-activity-rail>\n          }\n          @case ('channel') {\n            @if (tab.Data?.Plugin; as plugin) {\n              <!-- Registry-resolved channel: the pane host creates the plugin's surface\n                   component dynamically and hands the instance back for binding -->\n              <mj-realtime-channel-pane [Plugin]=\"plugin\"></mj-realtime-channel-pane>\n              <!-- First-run intro: overlaid over the active channel pane the first time this user\n                   opens it; the pane host renders display:none + a sibling surface, so the overlay\n                   sits here (inside the positioned .s-pane) rather than inside the pane host. -->\n              @if (tab.Key === Model.ActiveKey && OnboardingContent) {\n                <mj-channel-onboarding-panel\n                  [Content]=\"OnboardingContent\"\n                  (Dismissed)=\"DismissOnboarding()\">\n                </mj-channel-onboarding-panel>\n              }\n            } @else if (tab.Data?.Content; as content) {\n              <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n            } @else {\n              <!-- Placeholder until the channel registration supplies a plugin / template -->\n              <div class=\"channel-placeholder\" role=\"status\">\n                <i class=\"fa-solid fa-chalkboard\" aria-hidden=\"true\"></i>\n                <span>{{ tab.Title }} coming online\u2026</span>\n              </div>\n            }\n          }\n        }\n      </div>\n    }\n\n    @if (Model.Tabs.length === 0) {\n      <!-- Nothing in play yet (idle voice-first session): a gentle hint, not an empty grid -->\n      <div class=\"surface__empty\" role=\"status\">\n        <i class=\"fa-solid fa-wave-square\" aria-hidden=\"true\"></i>\n        <span>Surfaces appear here as the call gets going.</span>\n      </div>\n    }\n  }\n</aside>\n", styles: [":host {\n  display: block;\n  height: 100%;\n  /* activity accent \u2014 same violet palette the rail + delegation cards use */\n  --activity-accent: var(--mj-color-violet-400, #a78bfa);\n  --activity-accent-bg: color-mix(in srgb, var(--mj-color-violet-400, #a78bfa) 12%, transparent);\n  --activity-accent-border: color-mix(in srgb, var(--mj-color-violet-400, #a78bfa) 38%, transparent);\n  /* per-tab accent, set inline per channel ([style.--tab-accent]); falls back to the brand. */\n  --tab-accent: var(--mj-brand-primary);\n}\n\n/* The surface panel fills the overlay's `.call-panel` flex item \u2014 the overlay owns\n   the width (user drag via the resize handle, persisted per-user, default tiers). */\n.surface {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  border-left: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n}\n/* Board-focus fill: the panel owns the whole overlay (the main call column is hidden). */\n.surface--fill {\n  width: 100%;\n  border-left: none;\n}\n.surface--collapsed {\n  width: 40px;\n  background: var(--mj-bg-surface-card);\n}\n\n/* ---------- collapsed slim strip ---------- */\n.surface__strip {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 12px;\n  padding: 10px 0;\n}\n.surface__strip-icon {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n}\n\n.surface__toggle {\n  width: 24px;\n  height: 24px;\n  display: grid;\n  place-items: center;\n  background: transparent;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  color: var(--mj-text-muted);\n  cursor: pointer;\n  flex-shrink: 0;\n  font-size: 10px;\n  transition: color 140ms ease, border-color 140ms ease;\n}\n.surface__toggle:hover {\n  color: var(--mj-text-primary);\n  border-color: var(--mj-border-strong);\n}\n\n/* ---------- tab strip: channel cluster (left) | spacer | Activity (right) ---------- */\n.surface-tabs {\n  display: flex;\n  align-items: stretch;\n  background: var(--mj-bg-surface-sunken);\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n  overflow-x: auto;\n  scrollbar-width: none;\n}\n.surface-tabs::-webkit-scrollbar {\n  display: none;\n}\n\n/* The flex spacer separates the channel cluster (left) from the Activity tab (right). */\n.tabs-spacer {\n  flex: 1 1 auto;\n  min-width: 12px;\n}\n\n/* Tabs keep their natural width while there's room; when space gets tight they shrink\n   (ellipsizing their titles) down to a readable floor. The ACTIVE tab never shrinks. */\n.s-tab {\n  position: relative;\n  padding: 10px 14px;\n  border: 0;\n  background: transparent;\n  cursor: pointer;\n  font-family: inherit;\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--mj-text-muted);\n  display: inline-flex;\n  align-items: center;\n  gap: 7px;\n  border-bottom: 3px solid transparent;\n  transition: color 150ms ease, border-color 150ms ease, background 150ms ease;\n  white-space: nowrap;\n  flex: 0 1 auto;\n  min-width: calc(11px + 7px + 8ch + 28px); /* icon + gap + ~8ch + padding */\n}\n.s-tab i {\n  font-size: 11px;\n  flex-shrink: 0;\n}\n.s-tab__title {\n  max-width: 22ch;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  min-width: 0;\n}\n.s-tab:hover {\n  color: var(--mj-text-secondary);\n  background: var(--mj-bg-surface-hover);\n}\n\n/* Per-channel color dot \u2014 the distinct accent each channel tab carries. */\n.s-tab__dot {\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  flex-shrink: 0;\n  background: var(--tab-accent);\n}\n\n/* Active tab: filled background + a colored underline in the tab's own accent. */\n.s-tab--active {\n  color: var(--mj-text-primary);\n  background: var(--mj-bg-surface);\n  flex-shrink: 0;\n}\n.s-tab--channel.s-tab--active {\n  border-bottom-color: var(--tab-accent);\n}\n.s-tab--channel.s-tab--active .s-tab__dot {\n  box-shadow: 0 0 6px var(--tab-accent);\n}\n.s-tab--channel.s-tab--active i {\n  color: var(--tab-accent);\n}\n\n/* ---------- the Activity tab (right-aligned, distinct accent + pulse icon) ---------- */\n.s-tab--activity {\n  color: var(--mj-text-secondary);\n}\n.s-tab--activity i {\n  color: var(--activity-accent);\n}\n.s-tab--activity.s-tab--active {\n  border-bottom-color: var(--activity-accent);\n  background: var(--activity-accent-bg);\n  color: var(--mj-text-primary);\n}\n.s-tab__badge {\n  display: inline-grid;\n  place-items: center;\n  min-width: 16px;\n  height: 16px;\n  padding: 0 4px;\n  border-radius: var(--mj-radius-full, 9999px);\n  background: var(--activity-accent);\n  color: var(--mj-text-inverse);\n  font-size: 9.5px;\n  font-weight: 800;\n  line-height: 1;\n  flex-shrink: 0;\n}\n\n/* Brief flash for a just-revealed channel tab (the agent first acted on it). */\n.s-tab--flash {\n  animation: tab-flash 1.4s ease;\n}\n@keyframes tab-flash {\n  0% {\n    background: color-mix(in srgb, var(--tab-accent) 30%, transparent);\n    border-bottom-color: var(--tab-accent);\n    color: var(--mj-text-primary);\n  }\n  60% {\n    background: color-mix(in srgb, var(--tab-accent) 16%, transparent);\n    border-bottom-color: var(--tab-accent);\n  }\n  100% {\n    background: var(--mj-bg-surface);\n  }\n}\n@media (prefers-reduced-motion: reduce) {\n  .s-tab--flash {\n    animation: none;\n    background: color-mix(in srgb, var(--tab-accent) 18%, transparent);\n  }\n}\n\n.tabs-end {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 0 8px;\n  flex-shrink: 0;\n}\n\n/* ---------- panes: all alive, only the active one displayed ---------- */\n.s-pane {\n  display: none;\n  flex: 1;\n  min-height: 0;\n  flex-direction: column;\n  overflow: hidden;\n  /* Positioning context for the first-run channel-onboarding overlay (absolute, inset:0). */\n  position: relative;\n}\n.s-pane--active {\n  display: flex;\n}\n\n/* Empty strip (idle voice-first session): a gentle hint rather than a bare grid. */\n.surface__empty {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 10px;\n  color: var(--mj-text-muted);\n  font-size: 12px;\n  font-weight: 500;\n  padding: 24px;\n  text-align: center;\n}\n.surface__empty i {\n  font-size: 20px;\n  color: var(--activity-accent);\n  opacity: 0.6;\n}\n\n/* Channel slot placeholder (\"Whiteboard coming online\u2026\") */\n.channel-placeholder {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 10px;\n  color: var(--mj-text-muted);\n  font-size: 12.5px;\n  font-weight: 600;\n  padding: 24px;\n  text-align: center;\n}\n.channel-placeholder i {\n  font-size: 22px;\n  color: var(--tab-accent);\n  opacity: 0.7;\n}\n\n/* On narrow widths the panel stacks out of the way (overlay falls back to single column) */\n@media (max-width: 860px) {\n  .surface {\n    display: none;\n  }\n}\n"] }]
+                    CommonModule, ArtifactsModule, RealtimeActivityRailComponent, ChannelOnboardingPanelComponent,
+                    MediaMoveMenuComponent, MJButtonDirective
+                ], template: "<!-- SIZING IS EXTERNAL: the overlay hosts this panel inside a fixed-width flex item and\n     owns its width (drag, persistence, default tiers) \u2014 the panel just fills it. -->\n<aside class=\"surface\"\n       [class.surface--collapsed]=\"Collapsed\"\n       [class.surface--fill]=\"Fill && !Collapsed\"\n       aria-label=\"Session surfaces\">\n\n  @if (Collapsed) {\n    <!-- Slim strip: the panel's collapse target -->\n    <div class=\"surface__strip\">\n      <button type=\"button\"\n              class=\"surface__toggle\"\n              (click)=\"ToggleCollapsed()\"\n              title=\"Show session panel\"\n              aria-expanded=\"false\">\n        <i class=\"fa-solid fa-chevron-left\" aria-hidden=\"true\"></i>\n      </button>\n      <i class=\"fa-solid fa-wave-square surface__strip-icon\" aria-hidden=\"true\" title=\"Session activity\"></i>\n    </div>\n  } @else {\n    <!-- Tab strip: channel tabs (left cluster) \u2026 | spacer | Activity (right-aligned) -->\n    <div class=\"surface-tabs\" role=\"tablist\">\n      @for (tab of Model.Tabs; track TrackTab($index, tab)) {\n        @if (tab.Kind === 'activity') {\n          <!-- Flex spacer pushes the Activity tab to the far right -->\n          <span class=\"tabs-spacer\" aria-hidden=\"true\"></span>\n        }\n        <button type=\"button\"\n                class=\"s-tab\"\n                role=\"tab\"\n                [class.s-tab--activity]=\"tab.Kind === 'activity'\"\n                [class.s-tab--channel]=\"tab.Kind === 'channel'\"\n                [class.s-tab--active]=\"tab.Key === Model.ActiveKey\"\n                [class.s-tab--flash]=\"tab.Key === Model.FlashKey\"\n                [style.--tab-accent]=\"tab.Color || null\"\n                [attr.aria-selected]=\"tab.Key === Model.ActiveKey\"\n                [title]=\"tab.Title\"\n                (click)=\"Model.Focus(tab.Key)\">\n          @if (tab.Kind === 'channel') {\n            <span class=\"s-tab__dot\" aria-hidden=\"true\"></span>\n          }\n          <i [class]=\"tab.Icon\" aria-hidden=\"true\"></i>\n          <span class=\"s-tab__title\">{{ tab.Title }}</span>\n          @if (tab.Kind === 'activity' && State.Cards.length > 0) {\n            <span class=\"s-tab__badge\" aria-hidden=\"true\">{{ State.Cards.length }}</span>\n          }\n        </button>\n        @if (tab.Kind === 'channel' && tab.Data?.Plugin && tab.Key === Model.ActiveKey) {\n          <!-- \"Move to\u2026\" for the active channel's surface: beside its tab, since a tab is itself a button. -->\n          <mj-media-move-menu\n            class=\"s-tab-move\"\n            [Key]=\"tab.Key\"\n            [Title]=\"tab.Title\"\n            [Placement]=\"PlacementOf(tab.Key)\"\n            [Allowed]=\"AllowedOf(tab.Key)\"\n            (MoveRequested)=\"MoveRequested.emit($event)\"\n            (ResetLayoutRequested)=\"ResetLayoutRequested.emit()\">\n          </mj-media-move-menu>\n        }\n      }\n      <div class=\"tabs-end\">\n        <button type=\"button\"\n                class=\"surface__toggle\"\n                (click)=\"ToggleCollapsed()\"\n                title=\"Hide session panel\"\n                aria-expanded=\"true\">\n          <i class=\"fa-solid fa-chevron-right\" aria-hidden=\"true\"></i>\n        </button>\n      </div>\n    </div>\n\n    <!-- Panes: ALL kept alive; only the active one is displayed -->\n    @for (tab of Model.Tabs; track TrackTab($index, tab)) {\n      <div class=\"s-pane\" [class.s-pane--active]=\"tab.Key === Model.ActiveKey\" role=\"tabpanel\">\n        @switch (tab.Kind) {\n          @case ('activity') {\n            <mj-realtime-activity-rail\n              [State]=\"State\"\n              [DevMode]=\"DevMode\"\n              [Embedded]=\"true\"\n              [CurrentUser]=\"CurrentUser\"\n              [EnvironmentID]=\"EnvironmentID\"\n              [ExtraArtifacts]=\"ExtraArtifacts\"\n              (OpenRunRequested)=\"OpenRunRequested.emit($event)\">\n            </mj-realtime-activity-rail>\n          }\n          @case ('channel') {\n            @if (tab.Data?.Plugin && PlacementOf(tab.Key) !== 'tab') {\n              <!-- The user moved this channel's surface elsewhere: the tab says where, and brings it back. -->\n              <div class=\"s-pane__away\" role=\"status\">\n                <i [class]=\"AwayIcon(tab.Key)\" aria-hidden=\"true\"></i>\n                <span>{{ tab.Title }} is {{ AwayText(tab.Key) }}.</span>\n                @if (AllowedOf(tab.Key).includes('tab')) {\n                  <button type=\"button\" mjButton Variant=\"secondary\" Size=\"sm\"\n                          (click)=\"MoveRequested.emit({ Key: tab.Key, Placement: 'tab' })\">\n                    Bring it here\n                  </button>\n                }\n              </div>\n            } @else if (tab.Data?.Plugin) {\n              <!-- Registry-resolved channel: its surface lives on the overlay's stage, which lays it\n                   over this slot while the tab is active (ChannelSlotChange reports the slot). -->\n              <div #channelSlot class=\"s-pane__slot\" [attr.data-channel-key]=\"tab.Key\"></div>\n              <!-- First-run intro: overlaid over the active channel's surface the first time this user\n                   opens it. It sits here, inside the positioned .s-pane, above the stage's surface. -->\n              @if (tab.Key === Model.ActiveKey && OnboardingContent) {\n                <mj-channel-onboarding-panel\n                  [Content]=\"OnboardingContent\"\n                  (Dismissed)=\"DismissOnboarding()\">\n                </mj-channel-onboarding-panel>\n              }\n            } @else if (tab.Data?.Content; as content) {\n              <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n            } @else {\n              <!-- Placeholder until the channel registration supplies a plugin / template -->\n              <div class=\"channel-placeholder\" role=\"status\">\n                <i class=\"fa-solid fa-chalkboard\" aria-hidden=\"true\"></i>\n                <span>{{ tab.Title }} coming online\u2026</span>\n              </div>\n            }\n          }\n        }\n      </div>\n    }\n\n    @if (Model.Tabs.length === 0) {\n      <!-- Nothing in play yet (idle voice-first session): a gentle hint, not an empty grid -->\n      <div class=\"surface__empty\" role=\"status\">\n        <i class=\"fa-solid fa-wave-square\" aria-hidden=\"true\"></i>\n        <span>Surfaces appear here as the call gets going.</span>\n      </div>\n    }\n  }\n</aside>\n", styles: [":host {\n  display: block;\n  height: 100%;\n  /* activity accent \u2014 same violet palette the rail + delegation cards use */\n  --activity-accent: var(--mj-color-violet-400, #a78bfa);\n  --activity-accent-bg: color-mix(in srgb, var(--mj-color-violet-400, #a78bfa) 12%, transparent);\n  --activity-accent-border: color-mix(in srgb, var(--mj-color-violet-400, #a78bfa) 38%, transparent);\n  /* per-tab accent, set inline per channel ([style.--tab-accent]); falls back to the brand. */\n  --tab-accent: var(--mj-brand-primary);\n}\n\n/* The surface panel fills the overlay's `.call-panel` flex item \u2014 the overlay owns\n   the width (user drag via the resize handle, persisted per-user, default tiers). */\n.surface {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  border-left: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n}\n/* Board-focus fill: the panel owns the whole overlay (the main call column is hidden). */\n.surface--fill {\n  width: 100%;\n  border-left: none;\n}\n.surface--collapsed {\n  width: 40px;\n  background: var(--mj-bg-surface-card);\n}\n\n/* ---------- collapsed slim strip ---------- */\n.surface__strip {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 12px;\n  padding: 10px 0;\n}\n.surface__strip-icon {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n}\n\n.surface__toggle {\n  width: 24px;\n  height: 24px;\n  display: grid;\n  place-items: center;\n  background: transparent;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  color: var(--mj-text-muted);\n  cursor: pointer;\n  flex-shrink: 0;\n  font-size: 10px;\n  transition: color 140ms ease, border-color 140ms ease;\n}\n.surface__toggle:hover {\n  color: var(--mj-text-primary);\n  border-color: var(--mj-border-strong);\n}\n\n/* ---------- tab strip: channel cluster (left) | spacer | Activity (right) ---------- */\n.surface-tabs {\n  display: flex;\n  align-items: stretch;\n  background: var(--mj-bg-surface-sunken);\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n  overflow-x: auto;\n  scrollbar-width: none;\n}\n.surface-tabs::-webkit-scrollbar {\n  display: none;\n}\n\n/* The flex spacer separates the channel cluster (left) from the Activity tab (right). */\n.tabs-spacer {\n  flex: 1 1 auto;\n  min-width: 12px;\n}\n\n/* Tabs keep their natural width while there's room; when space gets tight they shrink\n   (ellipsizing their titles) down to a readable floor. The ACTIVE tab never shrinks. */\n.s-tab {\n  position: relative;\n  padding: 10px 14px;\n  border: 0;\n  background: transparent;\n  cursor: pointer;\n  font-family: inherit;\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--mj-text-muted);\n  display: inline-flex;\n  align-items: center;\n  gap: 7px;\n  border-bottom: 3px solid transparent;\n  transition: color 150ms ease, border-color 150ms ease, background 150ms ease;\n  white-space: nowrap;\n  flex: 0 1 auto;\n  min-width: calc(11px + 7px + 8ch + 28px); /* icon + gap + ~8ch + padding */\n}\n.s-tab i {\n  font-size: 11px;\n  flex-shrink: 0;\n}\n.s-tab__title {\n  max-width: 22ch;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  min-width: 0;\n}\n.s-tab:hover {\n  color: var(--mj-text-secondary);\n  background: var(--mj-bg-surface-hover);\n}\n\n/* Per-channel color dot \u2014 the distinct accent each channel tab carries. */\n.s-tab__dot {\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  flex-shrink: 0;\n  background: var(--tab-accent);\n}\n\n/* Active tab: filled background + a colored underline in the tab's own accent. */\n.s-tab--active {\n  color: var(--mj-text-primary);\n  background: var(--mj-bg-surface);\n  flex-shrink: 0;\n}\n.s-tab--channel.s-tab--active {\n  border-bottom-color: var(--tab-accent);\n}\n.s-tab--channel.s-tab--active .s-tab__dot {\n  box-shadow: 0 0 6px var(--tab-accent);\n}\n.s-tab--channel.s-tab--active i {\n  color: var(--tab-accent);\n}\n\n/* ---------- the Activity tab (right-aligned, distinct accent + pulse icon) ---------- */\n.s-tab--activity {\n  color: var(--mj-text-secondary);\n}\n.s-tab--activity i {\n  color: var(--activity-accent);\n}\n.s-tab--activity.s-tab--active {\n  border-bottom-color: var(--activity-accent);\n  background: var(--activity-accent-bg);\n  color: var(--mj-text-primary);\n}\n.s-tab__badge {\n  display: inline-grid;\n  place-items: center;\n  min-width: 16px;\n  height: 16px;\n  padding: 0 4px;\n  border-radius: var(--mj-radius-full, 9999px);\n  background: var(--activity-accent);\n  color: var(--mj-text-inverse);\n  font-size: 9.5px;\n  font-weight: 800;\n  line-height: 1;\n  flex-shrink: 0;\n}\n\n/* Brief flash for a just-revealed channel tab (the agent first acted on it). */\n.s-tab--flash {\n  animation: tab-flash 1.4s ease;\n}\n@keyframes tab-flash {\n  0% {\n    background: color-mix(in srgb, var(--tab-accent) 30%, transparent);\n    border-bottom-color: var(--tab-accent);\n    color: var(--mj-text-primary);\n  }\n  60% {\n    background: color-mix(in srgb, var(--tab-accent) 16%, transparent);\n    border-bottom-color: var(--tab-accent);\n  }\n  100% {\n    background: var(--mj-bg-surface);\n  }\n}\n@media (prefers-reduced-motion: reduce) {\n  .s-tab--flash {\n    animation: none;\n    background: color-mix(in srgb, var(--tab-accent) 18%, transparent);\n  }\n}\n\n.tabs-end {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 0 8px;\n  flex-shrink: 0;\n}\n\n/* ---------- panes: all alive, only the active one displayed ---------- */\n.s-pane {\n  display: none;\n  flex: 1;\n  min-height: 0;\n  flex-direction: column;\n  overflow: hidden;\n  /* Positioning context for the first-run channel-onboarding overlay (absolute, inset:0). */\n  position: relative;\n}\n.s-pane--active {\n  display: flex;\n}\n/* Where a channel's surface shows: the overlay's stage lays the surface over this box. */\n.s-pane__slot {\n  flex: 1;\n  min-height: 0;\n}\n\n/* A channel whose surface the user moved elsewhere: where it is, and a way back. */\n.s-pane__away {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 10px;\n  padding: 24px;\n  color: var(--mj-text-muted);\n  font-size: var(--mj-text-sm);\n  text-align: center;\n}\n.s-pane__away > i {\n  font-size: 22px;\n  color: var(--tab-accent);\n  opacity: 0.7;\n}\n\n/* \"Move to\u2026\" beside the active channel tab. */\n.s-tab-move {\n  align-self: center;\n  margin: 0 4px 0 -4px;\n}\n\n/* Empty strip (idle voice-first session): a gentle hint rather than a bare grid. */\n.surface__empty {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 10px;\n  color: var(--mj-text-muted);\n  font-size: 12px;\n  font-weight: 500;\n  padding: 24px;\n  text-align: center;\n}\n.surface__empty i {\n  font-size: 20px;\n  color: var(--activity-accent);\n  opacity: 0.6;\n}\n\n/* Channel slot placeholder (\"Whiteboard coming online\u2026\") */\n.channel-placeholder {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 10px;\n  color: var(--mj-text-muted);\n  font-size: 12.5px;\n  font-weight: 600;\n  padding: 24px;\n  text-align: center;\n}\n.channel-placeholder i {\n  font-size: 22px;\n  color: var(--tab-accent);\n  opacity: 0.7;\n}\n\n/* On narrow widths the panel stacks out of the way (overlay falls back to single column) */\n@media (max-width: 860px) {\n  .surface {\n    display: none;\n  }\n}\n"] }]
     }], null, { State: [{
             type: Input,
             args: [{ required: true }]
@@ -510,9 +652,26 @@ export class RealtimeSurfaceTabsComponent {
             type: Output
         }], WideChanged: [{
             type: Output
+        }], ActiveChannelChange: [{
+            type: Output
+        }], ChannelSlotChange: [{
+            type: Output
+        }], SurfacePlacements: [{
+            type: Input
+        }], AllowedPlacements: [{
+            type: Input
+        }], MoveRequested: [{
+            type: Output
+        }], ResetLayoutRequested: [{
+            type: Output
+        }], Collapsed: [{
+            type: Input
         }], activityRail: [{
             type: ViewChild,
             args: [RealtimeActivityRailComponent]
+        }], channelSlots: [{
+            type: ViewChildren,
+            args: ['channelSlot']
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(RealtimeSurfaceTabsComponent, { className: "RealtimeSurfaceTabsComponent", filePath: "src/lib/components/realtime/realtime-surface-tabs.component.ts", lineNumber: 62 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(RealtimeSurfaceTabsComponent, { className: "RealtimeSurfaceTabsComponent", filePath: "src/lib/components/realtime/realtime-surface-tabs.component.ts", lineNumber: 87 }); })();
 //# sourceMappingURL=realtime-surface-tabs.component.js.map