@memberjunction/ng-conversations 5.40.2 → 5.41.0

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

@@ -0,0 +1,496 @@
+import { Component, EventEmitter, Input, Output, ChangeDetectorRef, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+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";
+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);
+    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.ɵɵelementEnd();
+    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_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.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(4, RealtimeSurfaceTabsComponent_Conditional_2_For_2_Conditional_4_Template, 1, 0, "span", 14);
+    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.ɵɵattribute("aria-selected", tab_r5.Key === ctx_r1.Model.ActiveKey);
+    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);
+} }
+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.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("State", ctx_r1.State)("DevMode", ctx_r1.DevMode)("Embedded", true);
+} }
+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();
+    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.ɵɵ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) {
+    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);
+} if (rf & 2) {
+    const tab_r7 = 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);
+} }
+function RealtimeSurfaceTabsComponent_Conditional_2_For_7_Case_3_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) {
+    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;
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate1("", tab_r7.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);
+} 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);
+} }
+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.ɵɵelementEnd();
+} if (rf & 2) {
+    let tmp_12_0;
+    const tab_r7 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassProp("s-pane--active", tab_r7.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);
+} }
+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.ɵɵ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.ɵɵelementEnd()()();
+    i0.ɵɵrepeaterCreate(6, RealtimeSurfaceTabsComponent_Conditional_2_For_7_Template, 4, 3, "div", 10, i0.ɵɵcomponentInstance().TrackTab, true);
+} 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);
+} }
+/**
+ * User-settings key (NOT localStorage — see `UserInfoEngine`) under which the per-user "which
+ * channel intros have been seen" map is persisted: a JSON object of `{ [channelName]: true }`,
+ * so the first-run onboarding for each interactive channel shows exactly once per user and
+ * follows them across devices.
+ */
+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:
+ *
+ *  - **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.
+ *
+ * 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.
+ *
+ * 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).
+ */
+export class RealtimeSurfaceTabsComponent {
+    /** How long a just-arrived tab keeps its violet flash highlight. */
+    static FlashDurationMs = 1400;
+    /** Shared live-session state, owned by the overlay shell (feeds the Activity rail). */
+    State;
+    /** 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 = false;
+    /** The signed-in user, threaded to the artifact viewer panel. */
+    CurrentUser = null;
+    /** The active environment id, threaded to the artifact viewer panel. */
+    EnvironmentID = '';
+    /** Re-emitted from the Activity rail's dev "Open run" links. */
+    OpenRunRequested = new EventEmitter();
+    /**
+     * Emitted when the panel toggles between expanded and the slim collapsed strip —
+     * the overlay shell resizes this panel's split area to the strip width.
+     */
+    CollapsedChange = new EventEmitter();
+    /**
+     * Emitted when {@link IsWide} flips (a content 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).
+     */
+    WideChanged = 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;
+    /** Artifact version ids already turned into tabs (guards the State rescan). */
+    tabbedVersionIds = new Set();
+    flashTimer = null;
+    subs = [];
+    lastWide = false;
+    cdr = inject(ChangeDetectorRef);
+    /**
+     * The channel whose first-run intro is currently being shown (its `ChannelName`), or `null`
+     * when no intro is up. Set when the user opens a channel tab they've never seen the intro
+     * for; cleared on dismiss. Only one intro shows at a time (the active channel's).
+     */
+    onboardingChannelName = null;
+    /** The intro content for {@link onboardingChannelName}, mirrored for the template binding. */
+    OnboardingContent = null;
+    /** The currently focused tab. */
+    get ActiveTab() {
+        return this.Model.ActiveTab;
+    }
+    /** Wide presentation when a content tab (artifact / channel) is focused. */
+    get IsWide() {
+        return !this.Collapsed && this.ActiveTab.Kind !== 'activity';
+    }
+    ngOnInit() {
+        this.subs.push(this.State.Changed$.subscribe(() => this.onStateChanged()), this.Model.Changed$.subscribe(() => this.onModelChanged()));
+        this.syncArtifactTabs();
+    }
+    ngOnDestroy() {
+        for (const s of this.subs) {
+            s.unsubscribe();
+        }
+        this.subs = [];
+        if (this.flashTimer) {
+            clearTimeout(this.flashTimer);
+            this.flashTimer = null;
+        }
+    }
+    /** 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;
+            this.CollapsedChange.emit(value);
+            this.syncWide();
+        }
+    }
+    /** Emits {@link WideChanged} when the wide tier flips (content tab focus / collapse). */
+    syncWide() {
+        const wide = this.IsWide;
+        if (wide !== this.lastWide) {
+            this.lastWide = wide;
+            this.WideChanged.emit(wide);
+        }
+    }
+    /** track fn for the @for over tabs. */
+    TrackTab(index, tab) {
+        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.
+     */
+    FocusArtifact(artifact) {
+        this.tabbedVersionIds.add(artifact.ArtifactVersionID);
+        this.Model.OpenArtifactTab(artifact, true);
+        this.setCollapsed(false);
+        this.cdr.markForCheck();
+    }
+    /**
+     * Registers (or updates) an interactive-channel tab — one per registry-resolved 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
+        // 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(() => {
+            this.Model.RegisterChannelTab(registration);
+            this.cdr.markForCheck();
+        });
+    }
+    /**
+     * 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.
+     */
+    RevealChannel(key) {
+        // Microtask defer (same NG0100 reason as RegisterChannelTab): the agent-activity reveal mutates
+        // ActiveKey/FlashKey, which feed the tab-strip class bindings; doing it mid-CD trips the
+        // ExpressionChanged check. Deferring lands it in a fresh CD turn and stays ordered after any
+        // RegisterChannelTab queued just before it.
+        Promise.resolve().then(() => {
+            this.setCollapsed(false);
+            this.Model.Focus(key);
+            this.Model.FlashTab(key);
+            this.cdr.markForCheck();
+        });
+    }
+    /**
+     * 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).
+     *
+     * @returns `true` when a tab was removed.
+     */
+    RemoveTab(key) {
+        const removed = this.Model.RemoveTab(key);
+        if (removed) {
+            this.cdr.markForCheck();
+        }
+        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).
+     */
+    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.cdr.markForCheck();
+    }
+    /** On model changes: schedule the flash clear, report a wide-tier flip, re-render. */
+    onModelChanged() {
+        this.scheduleFlashClear();
+        this.syncWide();
+        this.evaluateOnboarding();
+        this.cdr.markForCheck();
+    }
+    /**
+     * 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
+     * which this user hasn't dismissed before. Re-runs on every model change so switching away
+     * from a channel tab tears the intro down (only the active channel's intro is ever up).
+     */
+    evaluateOnboarding() {
+        const tab = this.ActiveTab;
+        const plugin = tab.Kind === 'channel' ? tab.Data?.Plugin ?? null : null;
+        const details = plugin?.GetOnboardingDetails() ?? null;
+        if (!plugin || !details || this.HasSeenOnboarding(plugin.ChannelName)) {
+            this.onboardingChannelName = null;
+            this.OnboardingContent = null;
+            return;
+        }
+        this.onboardingChannelName = plugin.ChannelName;
+        this.OnboardingContent = details;
+    }
+    /**
+     * Dismisses the current channel intro: marks that channel seen for this user (persisted via
+     * `UserInfoEngine`, debounced — NOT localStorage) and hides the panel so it never re-appears.
+     */
+    DismissOnboarding() {
+        const channelName = this.onboardingChannelName;
+        this.onboardingChannelName = null;
+        this.OnboardingContent = null;
+        if (channelName) {
+            this.markOnboardingSeen(channelName);
+        }
+        this.cdr.markForCheck();
+    }
+    /** Reads the per-user seen-map and reports whether this channel's intro has been dismissed. */
+    HasSeenOnboarding(channelName) {
+        return this.readOnboardingSeen()[channelName] === true;
+    }
+    /** Persists `channelName` into the per-user seen-map (merge + debounced save). */
+    markOnboardingSeen(channelName) {
+        const map = this.readOnboardingSeen();
+        if (map[channelName] === true) {
+            return;
+        }
+        map[channelName] = true;
+        UserInfoEngine.Instance.SetSettingDebounced(CHANNEL_ONBOARDING_SEEN_SETTING_KEY, JSON.stringify(map));
+    }
+    /** Reads + parses the per-user seen-map setting (tolerant: malformed / unset → empty map). */
+    readOnboardingSeen() {
+        const raw = UserInfoEngine.Instance.GetSetting(CHANNEL_ONBOARDING_SEEN_SETTING_KEY);
+        if (!raw) {
+            return {};
+        }
+        try {
+            const parsed = JSON.parse(raw);
+            return parsed !== null && typeof parsed === 'object' && !Array.isArray(parsed)
+                ? parsed
+                : {};
+        }
+        catch {
+            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.
+     */
+    FocusFirstTab() {
+        const first = this.Model.Tabs[0];
+        if (first) {
+            this.Model.Focus(first.Key);
+            this.cdr.markForCheck();
+        }
+    }
+    /** Clears the model's flash highlight after a beat (one timer; latest flash wins). */
+    scheduleFlashClear() {
+        if (this.Model.FlashKey === null) {
+            return;
+        }
+        if (this.flashTimer) {
+            clearTimeout(this.flashTimer);
+        }
+        this.flashTimer = setTimeout(() => {
+            this.flashTimer = null;
+            this.Model.ClearFlash();
+        }, 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) {
+            i0.ɵɵelementStart(0, "aside", 0);
+            i0.ɵɵconditionalCreate(1, RealtimeSurfaceTabsComponent_Conditional_1_Template, 4, 0, "div", 1)(2, RealtimeSurfaceTabsComponent_Conditional_2_Template, 8, 0);
+            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}"] });
+}
+(() => { (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"] }]
+    }], null, { State: [{
+            type: Input,
+            args: [{ required: true }]
+        }], DevMode: [{
+            type: Input
+        }], Fill: [{
+            type: Input
+        }], CurrentUser: [{
+            type: Input
+        }], EnvironmentID: [{
+            type: Input
+        }], OpenRunRequested: [{
+            type: Output
+        }], CollapsedChange: [{
+            type: Output
+        }], WideChanged: [{
+            type: Output
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(RealtimeSurfaceTabsComponent, { className: "RealtimeSurfaceTabsComponent", filePath: "src/lib/components/realtime/realtime-surface-tabs.component.ts", lineNumber: 66 }); })();
+//# sourceMappingURL=realtime-surface-tabs.component.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"realtime-surface-tabs.component.js","sourceRoot":"","sources":["../../../../src/lib/components/realtime/realtime-surface-tabs.component.ts","../../../../src/lib/components/realtime/realtime-surface-tabs.component.html"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component, EventEmitter, Input, Output, OnInit, OnDestroy, ChangeDetectorRef, inject\n} from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { Subscription } from 'rxjs';\nimport { UserInfo } from '@memberjunction/core';\nimport { UserInfoEngine } from '@memberjunction/core-entities';\nimport { ArtifactsModule } from '@memberjunction/ng-artifacts';\nimport { RealtimeSessionState } from './realtime-session-state';\nimport { RealtimeActivityRailComponent } from './realtime-activity-rail.component';\nimport { RealtimeChannelPaneComponent } from './channels/realtime-channel-pane.component';\nimport { ChannelOnboardingPanelComponent } from './channels/channel-onboarding-panel.component';\nimport { ChannelOnboardingDetails } from './channels/base-realtime-channel-client';\nimport {\n  RealtimeSurfaceTabsModel, RealtimeSurfaceTab, RealtimeChannelTabRegistration\n} from './realtime-surface-tabs.model';\nimport { ParsedDelegationArtifact } from '../../services/delegation-result-parser';\n\n/**\n * User-settings key (NOT localStorage — see `UserInfoEngine`) under which the per-user \"which\n * channel intros have been seen\" map is persisted: a JSON object of `{ [channelName]: true }`,\n * so the first-run onboarding for each interactive channel shows exactly once per user and\n * follows them across devices.\n */\nconst CHANNEL_ONBOARDING_SEEN_SETTING_KEY = 'mj.realtimeChannels.onboardingSeen.v1';\n\n/**\n * The call overlay's TABBED SURFACE PANEL (the right panel) — per the approved\n * `plans/realtime/mockups/whiteboard.html` mockup:\n *\n *  - **Activity** — always the first tab; hosts the existing\n *    {@link RealtimeActivityRailComponent} unchanged (in `Embedded` mode, since this panel\n *    owns the chrome + collapse).\n *  - **One tab per artifact** produced by delegated runs: when a delegation result carries\n *    artifacts, a tab is auto-opened, FOCUSED, and briefly flashed violet. The pane reuses\n *    the standard `mj-artifact-viewer-panel` (read-only embed: no header/tabs/actions),\n *    loading by ArtifactID — the latest version, i.e. the one the run just produced.\n *  - **Channel tabs** — rendered ONLY once a channel registers via\n *    {@link RegisterChannelTab}. The overlay shell registers one per registry-resolved\n *    {@link BaseRealtimeChannelClient} plugin; the pane creates the plugin's surface\n *    component dynamically (via `mj-realtime-channel-pane`). Until a registration supplies\n *    a plugin (or legacy template), the pane shows the \"coming online…\" placeholder;\n *    re-registering the same key swaps the real surface in.\n *\n * Panes are kept ALIVE while hidden (CSS `display:none`, mirroring the mockup's\n * `.s-pane.active`) so switching tabs never reloads an artifact or resets the rail.\n * The whole panel collapses to a slim strip via the chevron at the tab strip's end —\n * the collapse-to-strip behavior that used to live on the rail, lifted to the panel.\n *\n * SIZING IS EXTERNAL: the overlay shell hosts this panel in a fixed-width flex item\n * and owns the width (user drag via the resize handle + persisted preference +\n * default tiers). This panel just fills it and REPORTS the layout signals the shell sizes from:\n * {@link CollapsedChange} (slim-strip toggle) and {@link WideChanged} (a content tab\n * is focused → the default width tier widens).\n */\n@Component({\n  standalone: true,\n  selector: 'mj-realtime-surface-tabs',\n  imports: [\n    CommonModule, ArtifactsModule, RealtimeActivityRailComponent, RealtimeChannelPaneComponent,\n    ChannelOnboardingPanelComponent\n  ],\n  templateUrl: './realtime-surface-tabs.component.html',\n  styleUrl: './realtime-surface-tabs.component.css'\n})\nexport class RealtimeSurfaceTabsComponent implements OnInit, OnDestroy {\n  /** How long a just-arrived tab keeps its violet flash highlight. */\n  private static readonly FlashDurationMs = 1400;\n\n  /** Shared live-session state, owned by the overlay shell (feeds the Activity rail). */\n  @Input({ required: true }) State!: RealtimeSessionState;\n\n  /** Whether developer affordances (\"Open run\" links) are revealed (gear-gated). */\n  @Input() DevMode = false;\n\n  /**\n   * FILL presentation: the panel stretches to the overlay's full width (the board-focus\n   * layout, where the main call column is hidden and a channel surface owns the screen).\n   * Bound by the overlay shell; overrides the normal / wide width tiers.\n   */\n  @Input() Fill = false;\n\n  /** The signed-in user, threaded to the artifact viewer panel. */\n  @Input() CurrentUser: UserInfo | null = null;\n\n  /** The active environment id, threaded to the artifact viewer panel. */\n  @Input() EnvironmentID = '';\n\n  /** Re-emitted from the Activity rail's dev \"Open run\" links. */\n  @Output() OpenRunRequested = new EventEmitter<string>();\n\n  /**\n   * Emitted when the panel toggles between expanded and the slim collapsed strip —\n   * the overlay shell resizes this panel's split area to the strip width.\n   */\n  @Output() CollapsedChange = new EventEmitter<boolean>();\n\n  /**\n   * Emitted when {@link IsWide} flips (a content tab gained / lost focus) — the\n   * overlay shell widens the panel's DEFAULT split-area size while wide (only when\n   * the user has never dragged an explicit width).\n   */\n  @Output() WideChanged = new EventEmitter<boolean>();\n\n  /** The panel's tab state (add / focus / dedupe / flash) — see the model for the rules. */\n  public readonly Model = new RealtimeSurfaceTabsModel();\n\n  /** Whether the panel is collapsed to its slim strip. */\n  public Collapsed = false;\n\n  /** Artifact version ids already turned into tabs (guards the State rescan). */\n  private tabbedVersionIds = new Set<string>();\n  private flashTimer: ReturnType<typeof setTimeout> | null = null;\n  private subs: Subscription[] = [];\n  private lastWide = false;\n  private cdr = inject(ChangeDetectorRef);\n\n  /**\n   * The channel whose first-run intro is currently being shown (its `ChannelName`), or `null`\n   * when no intro is up. Set when the user opens a channel tab they've never seen the intro\n   * for; cleared on dismiss. Only one intro shows at a time (the active channel's).\n   */\n  private onboardingChannelName: string | null = null;\n  /** The intro content for {@link onboardingChannelName}, mirrored for the template binding. */\n  public OnboardingContent: ChannelOnboardingDetails | null = null;\n\n  /** The currently focused tab. */\n  public get ActiveTab(): RealtimeSurfaceTab {\n    return this.Model.ActiveTab;\n  }\n\n  /** Wide presentation when a content tab (artifact / channel) is focused. */\n  public get IsWide(): boolean {\n    return !this.Collapsed && this.ActiveTab.Kind !== 'activity';\n  }\n\n  ngOnInit(): void {\n    this.subs.push(\n      this.State.Changed$.subscribe(() => this.onStateChanged()),\n      this.Model.Changed$.subscribe(() => this.onModelChanged())\n    );\n    this.syncArtifactTabs();\n  }\n\n  ngOnDestroy(): void {\n    for (const s of this.subs) {\n      s.unsubscribe();\n    }\n    this.subs = [];\n    if (this.flashTimer) {\n      clearTimeout(this.flashTimer);\n      this.flashTimer = null;\n    }\n  }\n\n  /** Toggle the panel between expanded and slim-collapsed. */\n  public ToggleCollapsed(): void {\n    this.setCollapsed(!this.Collapsed);\n  }\n\n  /** Collapse-state transitions funnel through here so the shell always hears about them. */\n  private setCollapsed(value: boolean): void {\n    if (this.Collapsed !== value) {\n      this.Collapsed = value;\n      this.CollapsedChange.emit(value);\n      this.syncWide();\n    }\n  }\n\n  /** Emits {@link WideChanged} when the wide tier flips (content tab focus / collapse). */\n  private syncWide(): void {\n    const wide = this.IsWide;\n    if (wide !== this.lastWide) {\n      this.lastWide = wide;\n      this.WideChanged.emit(wide);\n    }\n  }\n\n  /** track fn for the @for over tabs. */\n  public TrackTab(index: number, tab: RealtimeSurfaceTab): string {\n    return tab.Key;\n  }\n\n  /**\n   * Focuses (opening if needed) the tab for an artifact — the \"View →\" affordance target\n   * on done delegation cards and rail entries. Expands the panel if it was collapsed.\n   */\n  public FocusArtifact(artifact: ParsedDelegationArtifact): void {\n    this.tabbedVersionIds.add(artifact.ArtifactVersionID);\n    this.Model.OpenArtifactTab(artifact, true);\n    this.setCollapsed(false);\n    this.cdr.markForCheck();\n  }\n\n  /**\n   * Registers (or updates) an interactive-channel tab — one per registry-resolved channel\n   * plugin, forwarded from `RealtimeSessionOverlayComponent.RegisterChannelTab`.\n   */\n  public RegisterChannelTab(registration: RealtimeChannelTabRegistration): void {\n    // Microtask defer: the overlay forwards this while handling agent/channel activity, which can\n    // land mid change-detection. Adding a tab to Model.Tabs synchronously then trips NG0100 on the\n    // tab-strip bindings (s-tab--active). A microtask lands the mutation in a fresh CD turn —\n    // imperceptible for an async reveal, and ordered with any follow-on RevealChannel.\n    Promise.resolve().then(() => {\n      this.Model.RegisterChannelTab(registration);\n      this.cdr.markForCheck();\n    });\n  }\n\n  /**\n   * AUTO-REVEALS a channel surface the moment the agent first acts on it: expands the\n   * panel if collapsed, focuses the channel's tab and flashes it violet — so the user\n   * discovers the whiteboard (or any channel) exists the instant it comes alive,\n   * instead of having to find the tab themselves. No-op for unknown keys.\n   */\n  public RevealChannel(key: string): void {\n    // Microtask defer (same NG0100 reason as RegisterChannelTab): the agent-activity reveal mutates\n    // ActiveKey/FlashKey, which feed the tab-strip class bindings; doing it mid-CD trips the\n    // ExpressionChanged check. Deferring lands it in a fresh CD turn and stays ordered after any\n    // RegisterChannelTab queued just before it.\n    Promise.resolve().then(() => {\n      this.setCollapsed(false);\n      this.Model.Focus(key);\n      this.Model.FlashTab(key);\n      this.cdr.markForCheck();\n    });\n  }\n\n  /**\n   * Removes a tab from the panel (Activity is irremovable; focus falls back to Activity —\n   * see {@link RealtimeSurfaceTabsModel.RemoveTab}). Used by the overlay shell on a\n   * review→live continuation whose live channel set resolved WITHOUT the channel a stale\n   * review tab represents (e.g. no Whiteboard channel → drop the read-only review board tab).\n   *\n   * @returns `true` when a tab was removed.\n   */\n  public RemoveTab(key: string): boolean {\n    const removed = this.Model.RemoveTab(key);\n    if (removed) {\n      this.cdr.markForCheck();\n    }\n    return removed;\n  }\n\n  /**\n   * Registers an artifact tab WITHOUT stealing focus (default) — the SESSION REVIEW /\n   * resume-carryover path, where a reviewed session's (and its prior legs') history\n   * artifacts are surfaced as tabs the user can visit, as opposed to the live\n   * auto-open-on-arrival behavior. Idempotent per artifact version; the registered tab\n   * survives the review→live transition (tabs are never cleared on resume).\n   */\n  public RegisterArtifactTab(artifact: ParsedDelegationArtifact, focus: boolean = false): void {\n    this.tabbedVersionIds.add(artifact.ArtifactVersionID);\n    // History carryover is context, not news — never marked unseen (no glow).\n    this.Model.OpenArtifactTab(artifact, focus, false);\n    this.cdr.markForCheck();\n  }\n\n  /** On session-state changes: open tabs for newly-arrived artifacts, then re-render. */\n  private onStateChanged(): void {\n    this.syncArtifactTabs();\n    this.cdr.markForCheck();\n  }\n\n  /** On model changes: schedule the flash clear, report a wide-tier flip, re-render. */\n  private onModelChanged(): void {\n    this.scheduleFlashClear();\n    this.syncWide();\n    this.evaluateOnboarding();\n    this.cdr.markForCheck();\n  }\n\n  /**\n   * Decides whether the first-run channel intro should be visible for the ACTIVE tab: shows it\n   * the first time the user opens (focuses) a channel tab whose plugin supplies onboarding and\n   * which this user hasn't dismissed before. Re-runs on every model change so switching away\n   * from a channel tab tears the intro down (only the active channel's intro is ever up).\n   */\n  private evaluateOnboarding(): void {\n    const tab = this.ActiveTab;\n    const plugin = tab.Kind === 'channel' ? tab.Data?.Plugin ?? null : null;\n    const details = plugin?.GetOnboardingDetails() ?? null;\n    if (!plugin || !details || this.HasSeenOnboarding(plugin.ChannelName)) {\n      this.onboardingChannelName = null;\n      this.OnboardingContent = null;\n      return;\n    }\n    this.onboardingChannelName = plugin.ChannelName;\n    this.OnboardingContent = details;\n  }\n\n  /**\n   * Dismisses the current channel intro: marks that channel seen for this user (persisted via\n   * `UserInfoEngine`, debounced — NOT localStorage) and hides the panel so it never re-appears.\n   */\n  public DismissOnboarding(): void {\n    const channelName = this.onboardingChannelName;\n    this.onboardingChannelName = null;\n    this.OnboardingContent = null;\n    if (channelName) {\n      this.markOnboardingSeen(channelName);\n    }\n    this.cdr.markForCheck();\n  }\n\n  /** Reads the per-user seen-map and reports whether this channel's intro has been dismissed. */\n  private HasSeenOnboarding(channelName: string): boolean {\n    return this.readOnboardingSeen()[channelName] === true;\n  }\n\n  /** Persists `channelName` into the per-user seen-map (merge + debounced save). */\n  private markOnboardingSeen(channelName: string): void {\n    const map = this.readOnboardingSeen();\n    if (map[channelName] === true) {\n      return;\n    }\n    map[channelName] = true;\n    UserInfoEngine.Instance.SetSettingDebounced(CHANNEL_ONBOARDING_SEEN_SETTING_KEY, JSON.stringify(map));\n  }\n\n  /** Reads + parses the per-user seen-map setting (tolerant: malformed / unset → empty map). */\n  private readOnboardingSeen(): Record<string, boolean> {\n    const raw = UserInfoEngine.Instance.GetSetting(CHANNEL_ONBOARDING_SEEN_SETTING_KEY);\n    if (!raw) {\n      return {};\n    }\n    try {\n      const parsed: unknown = JSON.parse(raw);\n      return parsed !== null && typeof parsed === 'object' && !Array.isArray(parsed)\n        ? (parsed as Record<string, boolean>)\n        : {};\n    } catch {\n      return {};\n    }\n  }\n\n  /**\n   * Scans the session's delegation cards for artifacts that don't have a tab yet and\n   * adds one per artifact — UNFOCUSED, with the brief violet flash plus the persistent\n   * unseen glow. Per product direction a finished artifact never steals the screen\n   * (only the agent's first channel activity auto-reveals); the glowing tab is the\n   * invitation, the user opens it when they want it.\n   */\n  private syncArtifactTabs(): void {\n    for (const card of this.State.Cards) {\n      if (!card.Done || !card.Artifacts) {\n        continue;\n      }\n      for (const artifact of card.Artifacts) {\n        if (this.tabbedVersionIds.has(artifact.ArtifactVersionID)) {\n          continue;\n        }\n        this.tabbedVersionIds.add(artifact.ArtifactVersionID);\n        this.Model.OpenArtifactTab(artifact, false);\n      }\n    }\n  }\n\n  /**\n   * Focuses the FIRST tab in the strip — channels lead, so a Details peek lands on the\n   * marquee surface (e.g. the Whiteboard) when one exists, else on Activity.\n   */\n  public FocusFirstTab(): void {\n    const first = this.Model.Tabs[0];\n    if (first) {\n      this.Model.Focus(first.Key);\n      this.cdr.markForCheck();\n    }\n  }\n\n  /** Clears the model's flash highlight after a beat (one timer; latest flash wins). */\n  private scheduleFlashClear(): void {\n    if (this.Model.FlashKey === null) {\n      return;\n    }\n    if (this.flashTimer) {\n      clearTimeout(this.flashTimer);\n    }\n    this.flashTimer = setTimeout(() => {\n      this.flashTimer = null;\n      this.Model.ClearFlash();\n    }, RealtimeSurfaceTabsComponent.FlashDurationMs);\n  }\n}\n","<!-- SIZING IS EXTERNAL: the overlay hosts this panel inside a fixed-width flex item and\n     owns its width (drag, persistence, default tiers) — 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… | channel tabs… -->\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…</span>\n              </div>\n            }\n          }\n        }\n      </div>\n    }\n  }\n</aside>\n"]}