@memberjunction/ng-conversations 5.42.0 → 5.44.0

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

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, Output, ChangeDetectorRef, inject } from '@angular/core';
+import { Component, EventEmitter, Input, Output, ChangeDetectorRef, ViewChild, inject } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { UserInfoEngine } from '@memberjunction/core-entities';
 import { ArtifactsModule } from '@memberjunction/ng-artifacts';
@@ -8,7 +8,6 @@ import { ChannelOnboardingPanelComponent } from './channels/channel-onboarding-p
 import { RealtimeSurfaceTabsModel } from './realtime-surface-tabs.model';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/common";
-import * as i2 from "@memberjunction/ng-artifacts";
 function RealtimeSurfaceTabsComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 1)(1, "button", 2);
@@ -18,126 +17,139 @@ function RealtimeSurfaceTabsComponent_Conditional_1_Template(rf, ctx) { if (rf &
     i0.ɵɵelement(3, "i", 4);
     i0.ɵɵelementEnd();
 } }
-function RealtimeSurfaceTabsComponent_Conditional_2_For_2_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "span", 14);
+function RealtimeSurfaceTabsComponent_Conditional_2_For_2_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "span", 11);
+} }
+function RealtimeSurfaceTabsComponent_Conditional_2_For_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "span", 13);
+} }
+function RealtimeSurfaceTabsComponent_Conditional_2_For_2_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 16);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r1.State.Cards.length);
 } }
 function RealtimeSurfaceTabsComponent_Conditional_2_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 11);
-    i0.ɵɵlistener("click", function RealtimeSurfaceTabsComponent_Conditional_2_For_2_Template_button_click_0_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.ɵɵelement(1, "i", 12);
-    i0.ɵɵelementStart(2, "span", 13);
-    i0.ɵɵtext(3);
+    i0.ɵɵconditionalCreate(0, RealtimeSurfaceTabsComponent_Conditional_2_For_2_Conditional_0_Template, 1, 0, "span", 11);
+    i0.ɵɵelementStart(1, "button", 12);
+    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.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(4, RealtimeSurfaceTabsComponent_Conditional_2_For_2_Conditional_4_Template, 1, 0, "span", 14);
+    i0.ɵɵconditionalCreate(6, RealtimeSurfaceTabsComponent_Conditional_2_For_2_Conditional_6_Template, 2, 1, "span", 16);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const tab_r5 = ctx.$implicit;
     const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵclassProp("s-tab--active", tab_r5.Key === ctx_r1.Model.ActiveKey)("s-tab--flash", tab_r5.Key === ctx_r1.Model.FlashKey)("s-tab--unseen", ctx_r1.Model.IsUnseen(tab_r5.Key));
-    i0.ɵɵproperty("title", ctx_r1.Model.IsUnseen(tab_r5.Key) ? tab_r5.Title + " (new)" : tab_r5.Title);
+    i0.ɵɵconditional(tab_r5.Kind === "activity" ? 0 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵstyleProp("--tab-accent", tab_r5.Color || null);
+    i0.ɵɵclassProp("s-tab--activity", tab_r5.Kind === "activity")("s-tab--channel", tab_r5.Kind === "channel")("s-tab--active", tab_r5.Key === ctx_r1.Model.ActiveKey)("s-tab--flash", tab_r5.Key === ctx_r1.Model.FlashKey);
+    i0.ɵɵproperty("title", tab_r5.Title);
     i0.ɵɵattribute("aria-selected", tab_r5.Key === ctx_r1.Model.ActiveKey);
     i0.ɵɵadvance();
+    i0.ɵɵconditional(tab_r5.Kind === "channel" ? 2 : -1);
+    i0.ɵɵadvance();
     i0.ɵɵclassMap(tab_r5.Icon);
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(tab_r5.Title);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.Model.IsUnseen(tab_r5.Key) ? 4 : -1);
+    i0.ɵɵconditional(tab_r5.Kind === "activity" && ctx_r1.State.Cards.length > 0 ? 6 : -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", 17);
-    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)); })("OpenArtifactRequested", function RealtimeSurfaceTabsComponent_Conditional_2_For_7_Case_1_Template_mj_realtime_activity_rail_OpenArtifactRequested_0_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.FocusArtifact($event)); });
+    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)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("State", ctx_r1.State)("DevMode", ctx_r1.DevMode)("Embedded", true);
+    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_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 18);
-    i0.ɵɵelement(1, "mj-artifact-viewer-panel", 19);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(4);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("artifactId", ctx.ArtifactID)("currentUser", ctx_r1.CurrentUser)("environmentId", ctx_r1.EnvironmentID)("showHeader", false)("showTabs", false)("showSaveToCollection", false)("showCloseButton", false)("showMaximizeButton", false);
-} }
-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, 8, "div", 18);
-} if (rf & 2) {
-    let tmp_12_0;
-    const tab_r7 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵconditional((tmp_12_0 = tab_r7.Data == null ? null : tab_r7.Data.Artifact) ? 0 : -1, tmp_12_0);
-} }
-function RealtimeSurfaceTabsComponent_Conditional_2_For_7_Case_3_Conditional_0_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    const _r8 = i0.ɵɵgetCurrentView();
+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_3_Conditional_0_Conditional_1_Template_mj_channel_onboarding_panel_Dismissed_0_listener() { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.DismissOnboarding()); });
+    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()); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(5);
     i0.ɵɵproperty("Content", ctx_r1.OnboardingContent);
 } }
-function RealtimeSurfaceTabsComponent_Conditional_2_For_7_Case_3_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+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_3_Conditional_0_Conditional_1_Template, 1, 1, "mj-channel-onboarding-panel", 23);
+    i0.ɵɵconditionalCreate(1, RealtimeSurfaceTabsComponent_Conditional_2_For_7_Case_2_Conditional_0_Conditional_1_Template, 1, 1, "mj-channel-onboarding-panel", 23);
 } if (rf & 2) {
-    const tab_r7 = i0.ɵɵnextContext(2).$implicit;
+    const tab_r8 = i0.ɵɵnextContext(2).$implicit;
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("Plugin", ctx);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(tab_r7.Key === ctx_r1.Model.ActiveKey && ctx_r1.OnboardingContent ? 1 : -1);
+    i0.ɵɵconditional(tab_r8.Key === ctx_r1.Model.ActiveKey && ctx_r1.OnboardingContent ? 1 : -1);
 } }
-function RealtimeSurfaceTabsComponent_Conditional_2_For_7_Case_3_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+function RealtimeSurfaceTabsComponent_Conditional_2_For_7_Case_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0, 20);
 } if (rf & 2) {
     i0.ɵɵproperty("ngTemplateOutlet", ctx);
 } }
-function RealtimeSurfaceTabsComponent_Conditional_2_For_7_Case_3_Conditional_2_Template(rf, ctx) { if (rf & 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.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const tab_r7 = i0.ɵɵnextContext(2).$implicit;
+    const tab_r8 = i0.ɵɵnextContext(2).$implicit;
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate1("", tab_r7.Title, " coming online\u2026");
+    i0.ɵɵtextInterpolate1("", tab_r8.Title, " coming online\u2026");
 } }
-function RealtimeSurfaceTabsComponent_Conditional_2_For_7_Case_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, RealtimeSurfaceTabsComponent_Conditional_2_For_7_Case_3_Conditional_0_Template, 2, 2)(1, RealtimeSurfaceTabsComponent_Conditional_2_For_7_Case_3_Conditional_1_Template, 1, 1, "ng-container", 20)(2, RealtimeSurfaceTabsComponent_Conditional_2_For_7_Case_3_Conditional_2_Template, 4, 1, "div", 21);
+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);
 } if (rf & 2) {
     let tmp_12_0;
-    const tab_r7 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵconditional((tmp_12_0 = tab_r7.Data == null ? null : tab_r7.Data.Plugin) ? 0 : (tmp_12_0 = tab_r7.Data == null ? null : tab_r7.Data.Content) ? 1 : 2, 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);
 } }
 function RealtimeSurfaceTabsComponent_Conditional_2_For_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 15);
-    i0.ɵɵconditionalCreate(1, RealtimeSurfaceTabsComponent_Conditional_2_For_7_Case_1_Template, 1, 3, "mj-realtime-activity-rail", 16)(2, RealtimeSurfaceTabsComponent_Conditional_2_For_7_Case_2_Template, 1, 1)(3, RealtimeSurfaceTabsComponent_Conditional_2_For_7_Case_3_Template, 3, 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.ɵɵelementEnd();
 } if (rf & 2) {
     let tmp_12_0;
-    const tab_r7 = ctx.$implicit;
+    const tab_r8 = ctx.$implicit;
     const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵclassProp("s-pane--active", tab_r7.Key === ctx_r1.Model.ActiveKey);
+    i0.ɵɵclassProp("s-pane--active", tab_r8.Key === ctx_r1.Model.ActiveKey);
     i0.ɵɵadvance();
-    i0.ɵɵconditional((tmp_12_0 = tab_r7.Kind) === "activity" ? 1 : tmp_12_0 === "artifact" ? 2 : tmp_12_0 === "channel" ? 3 : -1);
+    i0.ɵɵconditional((tmp_12_0 = tab_r8.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(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, 5, 12, "button", 6, i0.ɵɵcomponentInstance().TrackTab, true);
-    i0.ɵɵelementStart(3, "div", 7)(4, "button", 8);
+    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.ɵɵ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", 9);
+    i0.ɵɵelement(5, "i", 8);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵrepeaterCreate(6, RealtimeSurfaceTabsComponent_Conditional_2_For_7_Template, 4, 3, "div", 10, i0.ɵɵcomponentInstance().TrackTab, true);
+    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);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
     i0.ɵɵrepeater(ctx_r1.Model.Tabs);
     i0.ɵɵadvance(5);
     i0.ɵɵrepeater(ctx_r1.Model.Tabs);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r1.Model.Tabs.length === 0 ? 8 : -1);
 } }
 /**
  * User-settings key (NOT localStorage — see `UserInfoEngine`) under which the per-user "which
@@ -147,36 +159,32 @@ function RealtimeSurfaceTabsComponent_Conditional_2_Template(rf, ctx) { if (rf &
  */
 const CHANNEL_ONBOARDING_SEEN_SETTING_KEY = 'mj.realtimeChannels.onboardingSeen.v1';
 /**
- * The call overlay's TABBED SURFACE PANEL (the right panel) — per the approved
- * `plans/realtime/mockups/whiteboard.html` mockup:
+ * 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.
+ *  - **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
+ *    channel tabs (activity-pulse icon + its own accent) and separated from the channel cluster
+ *    by a flex spacer.
  *
- *  - **Activity** — always the first tab; hosts the existing
- *    {@link RealtimeActivityRailComponent} unchanged (in `Embedded` mode, since this panel
- *    owns the chrome + collapse).
- *  - **One tab per artifact** produced by delegated runs: when a delegation result carries
- *    artifacts, a tab is auto-opened, FOCUSED, and briefly flashed violet. The pane reuses
- *    the standard `mj-artifact-viewer-panel` (read-only embed: no header/tabs/actions),
- *    loading by ArtifactID — the latest version, i.e. the one the run just produced.
- *  - **Channel tabs** — rendered ONLY once a channel registers via
- *    {@link RegisterChannelTab}. The overlay shell registers one per registry-resolved
- *    {@link BaseRealtimeChannelClient} plugin; the pane creates the plugin's surface
- *    component dynamically (via `mj-realtime-channel-pane`). Until a registration supplies
- *    a plugin (or legacy template), the pane shows the "coming online…" placeholder;
- *    re-registering the same key swaps the real surface in.
+ * 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`, mirroring the mockup's
- * `.s-pane.active`) so switching tabs never reloads an artifact or resets the rail.
- * The whole panel collapses to a slim strip via the chevron at the tab strip's end —
- * the collapse-to-strip behavior that used to live on the rail, lifted to the panel.
+ * 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.
  *
- * SIZING IS EXTERNAL: the overlay shell hosts this panel in a fixed-width flex item
- * and owns the width (user drag via the resize handle + persisted preference +
- * default tiers). This panel just fills it and REPORTS the layout signals the shell sizes from:
- * {@link CollapsedChange} (slim-strip toggle) and {@link WideChanged} (a content tab
- * is focused → the default width tier widens).
+ * 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:
+ * {@link CollapsedChange} (slim-strip toggle) and {@link WideChanged} (a channel tab is focused
+ * → the default width tier widens).
  */
 export class RealtimeSurfaceTabsComponent {
-    /** How long a just-arrived tab keeps its violet flash highlight. */
+    /** How long a just-revealed channel tab keeps its flash highlight. */
     static FlashDurationMs = 1400;
     /** Shared live-session state, owned by the overlay shell (feeds the Activity rail). */
     State;
@@ -192,6 +200,27 @@ export class RealtimeSurfaceTabsComponent {
     CurrentUser = null;
     /** The active environment id, threaded to the artifact viewer panel. */
     EnvironmentID = '';
+    /**
+     * Extra (review-carryover) artifacts to surface in the Activity tab, NOT tied to a live
+     * activity card. Forwarded to the rail's "Session artifacts" group. Empty for a live session.
+     */
+    ExtraArtifacts = [];
+    /**
+     * Whether the gated Activity tab should be shown — driven by the overlay shell once ≥1
+     * agent run has occurred (or in review mode). A getter/setter so a late "first run" flips
+     * the tab into the strip reactively.
+     */
+    _showActivityTab = false;
+    set ShowActivityTab(value) {
+        if (value !== this._showActivityTab) {
+            this._showActivityTab = value;
+            this.Model.SetShowActivityTab(value);
+            this.cdr.markForCheck();
+        }
+    }
+    get ShowActivityTab() {
+        return this._showActivityTab;
+    }
     /** Re-emitted from the Activity rail's dev "Open run" links. */
     OpenRunRequested = new EventEmitter();
     /**
@@ -200,7 +229,7 @@ export class RealtimeSurfaceTabsComponent {
      */
     CollapsedChange = new EventEmitter();
     /**
-     * Emitted when {@link IsWide} flips (a content tab gained / lost focus) — the
+     * Emitted when {@link IsWide} flips (a channel tab gained / lost focus) — the
      * overlay shell widens the panel's DEFAULT split-area size while wide (only when
      * the user has never dragged an explicit width).
      */
@@ -209,8 +238,8 @@ export class RealtimeSurfaceTabsComponent {
     Model = new RealtimeSurfaceTabsModel();
     /** Whether the panel is collapsed to its slim strip. */
     Collapsed = false;
-    /** Artifact version ids already turned into tabs (guards the State rescan). */
-    tabbedVersionIds = new Set();
+    /** The embedded Activity rail (owns the inline artifact previews + the split-pane viewer). */
+    activityRail;
     flashTimer = null;
     subs = [];
     lastWide = false;
@@ -227,13 +256,12 @@ export class RealtimeSurfaceTabsComponent {
     get ActiveTab() {
         return this.Model.ActiveTab;
     }
-    /** Wide presentation when a content tab (artifact / channel) is focused. */
+    /** Wide presentation when a channel tab is focused (the Activity tab keeps the normal tier). */
     get IsWide() {
-        return !this.Collapsed && this.ActiveTab.Kind !== 'activity';
+        return !this.Collapsed && this.ActiveTab.Kind === 'channel';
     }
     ngOnInit() {
-        this.subs.push(this.State.Changed$.subscribe(() => this.onStateChanged()), this.Model.Changed$.subscribe(() => this.onModelChanged()));
-        this.syncArtifactTabs();
+        this.subs.push(this.Model.Changed$.subscribe(() => this.onModelChanged()));
     }
     ngOnDestroy() {
         for (const s of this.subs) {
@@ -257,7 +285,7 @@ export class RealtimeSurfaceTabsComponent {
             this.syncWide();
         }
     }
-    /** Emits {@link WideChanged} when the wide tier flips (content tab focus / collapse). */
+    /** Emits {@link WideChanged} when the wide tier flips (channel tab focus / collapse). */
     syncWide() {
         const wide = this.IsWide;
         if (wide !== this.lastWide) {
@@ -270,22 +298,31 @@ export class RealtimeSurfaceTabsComponent {
         return tab.Key;
     }
     /**
-     * Focuses (opening if needed) the tab for an artifact — the "View →" affordance target
-     * on done delegation cards and rail entries. Expands the panel if it was collapsed.
+     * Focuses the Activity tab and opens the given artifact in the rail's split-pane viewer —
+     * the "View →" affordance target on done delegation cards / thread entries. Expands the
+     * panel if it was collapsed. Replaces the old "open a tab per artifact" behavior.
      */
     FocusArtifact(artifact) {
-        this.tabbedVersionIds.add(artifact.ArtifactVersionID);
-        this.Model.OpenArtifactTab(artifact, true);
         this.setCollapsed(false);
+        // An artifact implies a run happened — ensure the Activity tab is present before focusing it.
+        this.Model.SetShowActivityTab(true);
+        this.Model.Focus(RealtimeSurfaceTabsModel.ActivityTabKey);
+        // The rail may not be created yet (panel just expanded) — defer so it exists.
+        if (this.activityRail) {
+            this.activityRail.OpenArtifact(artifact);
+        }
+        else {
+            setTimeout(() => this.activityRail?.OpenArtifact(artifact));
+        }
         this.cdr.markForCheck();
     }
     /**
-     * Registers (or updates) an interactive-channel tab — one per registry-resolved channel
-     * plugin, forwarded from `RealtimeSessionOverlayComponent.RegisterChannelTab`.
+     * Registers (or updates) an interactive-channel tab — one per used channel plugin,
+     * forwarded from `RealtimeSessionOverlayComponent.RegisterChannelTab`.
      */
     RegisterChannelTab(registration) {
         // Microtask defer: the overlay forwards this while handling agent/channel activity, which can
-        // land mid change-detection. Adding a tab to Model.Tabs synchronously then trips NG0100 on the
+        // land mid change-detection. Adding a tab to Model synchronously then trips NG0100 on the
         // tab-strip bindings (s-tab--active). A microtask lands the mutation in a fresh CD turn —
         // imperceptible for an async reveal, and ordered with any follow-on RevealChannel.
         Promise.resolve().then(() => {
@@ -295,9 +332,8 @@ export class RealtimeSurfaceTabsComponent {
     }
     /**
      * AUTO-REVEALS a channel surface the moment the agent first acts on it: expands the
-     * panel if collapsed, focuses the channel's tab and flashes it violet — so the user
-     * discovers the whiteboard (or any channel) exists the instant it comes alive,
-     * instead of having to find the tab themselves. No-op for unknown keys.
+     * panel if collapsed, focuses the channel's tab and flashes it — so the user discovers
+     * the whiteboard (or any channel) exists the instant it comes alive. No-op for unknown keys.
      */
     RevealChannel(key) {
         // Microtask defer (same NG0100 reason as RegisterChannelTab): the agent-activity reveal mutates
@@ -312,10 +348,10 @@ export class RealtimeSurfaceTabsComponent {
         });
     }
     /**
-     * Removes a tab from the panel (Activity is irremovable; focus falls back to Activity —
-     * see {@link RealtimeSurfaceTabsModel.RemoveTab}). Used by the overlay shell on a
-     * review→live continuation whose live channel set resolved WITHOUT the channel a stale
-     * review tab represents (e.g. no Whiteboard channel → drop the read-only review board tab).
+     * Removes a tab from the panel (Activity is irremovable; focus falls back per the model's
+     * rules). Used by the overlay shell on a review→live continuation whose live channel set
+     * resolved WITHOUT the channel a stale review tab represents (e.g. no Whiteboard channel →
+     * drop the read-only review board tab).
      *
      * @returns `true` when a tab was removed.
      */
@@ -327,21 +363,16 @@ export class RealtimeSurfaceTabsComponent {
         return removed;
     }
     /**
-     * Registers an artifact tab WITHOUT stealing focus (default) — the SESSION REVIEW /
-     * resume-carryover path, where a reviewed session's (and its prior legs') history
-     * artifacts are surfaced as tabs the user can visit, as opposed to the live
-     * auto-open-on-arrival behavior. Idempotent per artifact version; the registered tab
-     * survives the review→live transition (tabs are never cleared on resume).
+     * Registers the reviewed chain's history artifacts so they surface inside the Activity tab.
+     * In the redesign there are no per-artifact tabs — the rail picks artifacts up from the
+     * session state's cards, so this only needs to ensure the Activity tab is shown (review
+     * mode always shows it) and, when `focus` is set, open the artifact in the split viewer.
      */
     RegisterArtifactTab(artifact, focus = false) {
-        this.tabbedVersionIds.add(artifact.ArtifactVersionID);
-        // History carryover is context, not news — never marked unseen (no glow).
-        this.Model.OpenArtifactTab(artifact, focus, false);
-        this.cdr.markForCheck();
-    }
-    /** On session-state changes: open tabs for newly-arrived artifacts, then re-render. */
-    onStateChanged() {
-        this.syncArtifactTabs();
+        this.Model.SetShowActivityTab(true);
+        if (focus) {
+            this.FocusArtifact(artifact);
+        }
         this.cdr.markForCheck();
     }
     /** On model changes: schedule the flash clear, report a wide-tier flip, re-render. */
@@ -411,27 +442,6 @@ export class RealtimeSurfaceTabsComponent {
             return {};
         }
     }
-    /**
-     * Scans the session's delegation cards for artifacts that don't have a tab yet and
-     * adds one per artifact — UNFOCUSED, with the brief violet flash plus the persistent
-     * unseen glow. Per product direction a finished artifact never steals the screen
-     * (only the agent's first channel activity auto-reveals); the glowing tab is the
-     * invitation, the user opens it when they want it.
-     */
-    syncArtifactTabs() {
-        for (const card of this.State.Cards) {
-            if (!card.Done || !card.Artifacts) {
-                continue;
-            }
-            for (const artifact of card.Artifacts) {
-                if (this.tabbedVersionIds.has(artifact.ArtifactVersionID)) {
-                    continue;
-                }
-                this.tabbedVersionIds.add(artifact.ArtifactVersionID);
-                this.Model.OpenArtifactTab(artifact, false);
-            }
-        }
-    }
     /**
      * Focuses the FIRST tab in the strip — channels lead, so a Details peek lands on the
      * marquee surface (e.g. the Whiteboard) when one exists, else on Activity.
@@ -457,23 +467,28 @@ export class RealtimeSurfaceTabsComponent {
         }, RealtimeSurfaceTabsComponent.FlashDurationMs);
     }
     static ɵfac = function RealtimeSurfaceTabsComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || RealtimeSurfaceTabsComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: RealtimeSurfaceTabsComponent, selectors: [["mj-realtime-surface-tabs"]], inputs: { State: "State", DevMode: "DevMode", Fill: "Fill", CurrentUser: "CurrentUser", EnvironmentID: "EnvironmentID" }, 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-list-check", "surface__strip-icon"], ["role", "tablist", 1, "surface-tabs"], ["type", "button", "role", "tab", 1, "s-tab", 3, "s-tab--active", "s-tab--flash", "s-tab--unseen", "title"], [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"], ["type", "button", "role", "tab", 1, "s-tab", 3, "click", "title"], ["aria-hidden", "true"], [1, "s-tab__title"], ["aria-hidden", "true", 1, "s-tab__unseen-dot"], ["role", "tabpanel", 1, "s-pane"], [3, "State", "DevMode", "Embedded"], [3, "OpenRunRequested", "OpenArtifactRequested", "State", "DevMode", "Embedded"], [1, "artifact-pane"], [3, "artifactId", "currentUser", "environmentId", "showHeader", "showTabs", "showSaveToCollection", "showCloseButton", "showMaximizeButton"], [3, "ngTemplateOutlet"], ["role", "status", 1, "channel-placeholder"], [3, "Plugin"], [3, "Content"], [3, "Dismissed", "Content"], ["aria-hidden", "true", 1, "fa-solid", "fa-chalkboard"]], template: function RealtimeSurfaceTabsComponent_Template(rf, ctx) { if (rf & 1) {
+    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);
+        } 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, 8, 0);
+            i0.ɵɵconditionalCreate(1, RealtimeSurfaceTabsComponent_Conditional_1_Template, 4, 0, "div", 1)(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, i2.ArtifactViewerPanelComponent, RealtimeActivityRailComponent, RealtimeChannelPaneComponent,
-            ChannelOnboardingPanelComponent], styles: ["[_nghost-%COMP%] {\n  display: block;\n  height: 100%;\n  \n\n  --sage: var(--mj-color-violet-400, #a78bfa);\n  --sage-bg: color-mix(in srgb, var(--mj-color-violet-400, #a78bfa) 10%, transparent);\n  --sage-border: color-mix(in srgb, var(--mj-color-violet-400, #a78bfa) 38%, transparent);\n}\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\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\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\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\n\n\n\n.s-tab[_ngcontent-%COMP%] {\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}\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: 24ch;\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}\n.s-tab--active[_ngcontent-%COMP%] {\n  color: var(--mj-text-primary);\n  border-bottom-color: var(--mj-brand-primary);\n  background: var(--mj-bg-surface);\n  \n\n  flex-shrink: 0;\n}\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(--sage) 28%, transparent);\n    border-bottom-color: var(--sage);\n    color: var(--mj-text-primary);\n  }\n  60% {\n    background: color-mix(in srgb, var(--sage) 16%, transparent);\n    border-bottom-color: var(--sage);\n  }\n  100% {\n    background: var(--mj-bg-surface);\n  }\n}\n\n\n\n\n.s-tab--unseen[_ngcontent-%COMP%] {\n  color: var(--mj-color-violet-300, var(--mj-text-secondary));\n  animation: _ngcontent-%COMP%_tab-unseen 2.2s ease-in-out infinite;\n}\n@keyframes _ngcontent-%COMP%_tab-unseen {\n  0%, 100% { background: color-mix(in srgb, var(--sage) 6%, transparent); }\n  50% { background: color-mix(in srgb, var(--sage) 18%, transparent); }\n}\n.s-tab__unseen-dot[_ngcontent-%COMP%] {\n  width: 7px;\n  height: 7px;\n  border-radius: 50%;\n  flex-shrink: 0;\n  background: var(--sage);\n  box-shadow: 0 0 6px var(--sage);\n}\n\n.tabs-end[_ngcontent-%COMP%] {\n  margin-left: auto;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 0 8px;\n  flex-shrink: 0;\n}\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\n  position: relative;\n}\n.s-pane--active[_ngcontent-%COMP%] {\n  display: flex;\n}\n\n\n\n.artifact-pane[_ngcontent-%COMP%] {\n  flex: 1;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n.artifact-pane[_ngcontent-%COMP%]    > *[_ngcontent-%COMP%] {\n  flex: 1;\n  min-height: 0;\n}\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(--sage);\n  opacity: 0.7;\n}\n\n\n\n@media (max-width: 860px) {\n  .surface[_ngcontent-%COMP%] {\n    display: none;\n  }\n}"] });
+        } }, dependencies: [CommonModule, i1.NgTemplateOutlet, ArtifactsModule, RealtimeActivityRailComponent, RealtimeChannelPaneComponent,
+            ChannelOnboardingPanelComponent], styles: ["[_nghost-%COMP%] {\n  display: block;\n  height: 100%;\n  \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\n  --tab-accent: var(--mj-brand-primary);\n}\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\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\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\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\n.tabs-spacer[_ngcontent-%COMP%] {\n  flex: 1 1 auto;\n  min-width: 12px;\n}\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}\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\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\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\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\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\n.s-pane[_ngcontent-%COMP%] {\n  display: none;\n  flex: 1;\n  min-height: 0;\n  flex-direction: column;\n  overflow: hidden;\n  \n\n  position: relative;\n}\n.s-pane--active[_ngcontent-%COMP%] {\n  display: flex;\n}\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\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\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 (lifted from the old rail behavior) -->\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-list-check surface__strip-icon\" aria-hidden=\"true\" title=\"Session activity\"></i>\n    </div>\n  } @else {\n    <!-- Tab strip: Activity | artifact tabs\u2026 | channel tabs\u2026 -->\n    <div class=\"surface-tabs\" role=\"tablist\">\n      @for (tab of Model.Tabs; track TrackTab($index, tab)) {\n        <button type=\"button\"\n                class=\"s-tab\"\n                role=\"tab\"\n                [class.s-tab--active]=\"tab.Key === Model.ActiveKey\"\n                [class.s-tab--flash]=\"tab.Key === Model.FlashKey\"\n                [class.s-tab--unseen]=\"Model.IsUnseen(tab.Key)\"\n                [attr.aria-selected]=\"tab.Key === Model.ActiveKey\"\n                [title]=\"Model.IsUnseen(tab.Key) ? tab.Title + ' (new)' : tab.Title\"\n                (click)=\"Model.Focus(tab.Key)\">\n          <i [class]=\"tab.Icon\" aria-hidden=\"true\"></i>\n          <span class=\"s-tab__title\">{{ tab.Title }}</span>\n          @if (Model.IsUnseen(tab.Key)) {\n            <span class=\"s-tab__unseen-dot\" aria-hidden=\"true\"></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 (mirrors the mockup) -->\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              (OpenRunRequested)=\"OpenRunRequested.emit($event)\"\n              (OpenArtifactRequested)=\"FocusArtifact($event)\">\n            </mj-realtime-activity-rail>\n          }\n          @case ('artifact') {\n            @if (tab.Data?.Artifact; as artifact) {\n              <div class=\"artifact-pane\">\n                <mj-artifact-viewer-panel\n                  [artifactId]=\"artifact.ArtifactID\"\n                  [currentUser]=\"CurrentUser!\"\n                  [environmentId]=\"EnvironmentID\"\n                  [showHeader]=\"false\"\n                  [showTabs]=\"false\"\n                  [showSaveToCollection]=\"false\"\n                  [showCloseButton]=\"false\"\n                  [showMaximizeButton]=\"false\">\n                </mj-artifact-viewer-panel>\n              </div>\n            }\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</aside>\n", styles: [":host {\n  display: block;\n  height: 100%;\n  /* sage / delegated-agent accent \u2014 same palette the rail + delegation cards use */\n  --sage: var(--mj-color-violet-400, #a78bfa);\n  --sage-bg: color-mix(in srgb, var(--mj-color-violet-400, #a78bfa) 10%, transparent);\n  --sage-border: color-mix(in srgb, var(--mj-color-violet-400, #a78bfa) 38%, transparent);\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 (mirrors the whiteboard mockup's .surface-tabs) ---------- */\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/* Tabs keep their natural width while there's room; when space gets genuinely tight\n   they shrink (ellipsizing their titles) down to a readable floor (icon + ~8ch).\n   The ACTIVE tab never shrinks \u2014 inactive tabs give way first. Only when everything\n   is at its floor does the strip actually overflow (horizontal scroll). */\n.s-tab {\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: 24ch;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  min-width: 0;\n}\n.s-tab:hover {\n  color: var(--mj-text-secondary);\n}\n.s-tab--active {\n  color: var(--mj-text-primary);\n  border-bottom-color: var(--mj-brand-primary);\n  background: var(--mj-bg-surface);\n  /* the active tab stays fully readable \u2014 others shrink first */\n  flex-shrink: 0;\n}\n\n/* Brief violet flash for a just-arrived artifact tab (per the mockup's accent) */\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(--sage) 28%, transparent);\n    border-bottom-color: var(--sage);\n    color: var(--mj-text-primary);\n  }\n  60% {\n    background: color-mix(in srgb, var(--sage) 16%, transparent);\n    border-bottom-color: var(--sage);\n  }\n  100% {\n    background: var(--mj-bg-surface);\n  }\n}\n\n/* PERSISTENT unseen glow: content arrived without stealing focus (e.g. a finished\n   artifact) \u2014 the tab breathes violet until the user visits it. */\n.s-tab--unseen {\n  color: var(--mj-color-violet-300, var(--mj-text-secondary));\n  animation: tab-unseen 2.2s ease-in-out infinite;\n}\n@keyframes tab-unseen {\n  0%, 100% { background: color-mix(in srgb, var(--sage) 6%, transparent); }\n  50% { background: color-mix(in srgb, var(--sage) 18%, transparent); }\n}\n.s-tab__unseen-dot {\n  width: 7px;\n  height: 7px;\n  border-radius: 50%;\n  flex-shrink: 0;\n  background: var(--sage);\n  box-shadow: 0 0 6px var(--sage);\n}\n\n.tabs-end {\n  margin-left: auto;\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/* Read-only embedded artifact viewer fills the pane */\n.artifact-pane {\n  flex: 1;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n.artifact-pane > * {\n  flex: 1;\n  min-height: 0;\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(--sage);\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"] }]
+                ], 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"] }]
     }], null, { State: [{
             type: Input,
             args: [{ required: true }]
@@ -485,12 +500,19 @@ export class RealtimeSurfaceTabsComponent {
             type: Input
         }], EnvironmentID: [{
             type: Input
+        }], ExtraArtifacts: [{
+            type: Input
+        }], ShowActivityTab: [{
+            type: Input
         }], OpenRunRequested: [{
             type: Output
         }], CollapsedChange: [{
             type: Output
         }], WideChanged: [{
             type: Output
+        }], activityRail: [{
+            type: ViewChild,
+            args: [RealtimeActivityRailComponent]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(RealtimeSurfaceTabsComponent, { className: "RealtimeSurfaceTabsComponent", filePath: "src/lib/components/realtime/realtime-surface-tabs.component.ts", lineNumber: 66 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(RealtimeSurfaceTabsComponent, { className: "RealtimeSurfaceTabsComponent", filePath: "src/lib/components/realtime/realtime-surface-tabs.component.ts", lineNumber: 62 }); })();
 //# sourceMappingURL=realtime-surface-tabs.component.js.map