npm - @memberjunction/ng-conversations - Versions diffs - 6.1.4 → 6.2.0-edge.1 - Mend

@memberjunction/ng-conversations 6.1.4 → 6.2.0-edge.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (424) hide show

package/dist/lib/components/realtime/realtime-session-thread.component.js CHANGED Viewed

@@ -1,8 +1,10 @@
 import { Component, EventEmitter, Input, Output, ViewChild, ChangeDetectorRef, inject } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { MarkdownModule } from '@memberjunction/ng-markdown';
 import { RealtimeDelegationCardComponent } from './realtime-delegation-card.component';
 import * as i0 from "@angular/core";
-import * as i1 from "@angular/common";
+import * as i1 from "@memberjunction/ng-markdown";
+import * as i2 from "@angular/common";
 const _c0 = ["scrollAnchor"];
 function RealtimeSessionThreadComponent_For_2_Case_0_Conditional_0_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 10);
@@ -15,13 +17,32 @@ function RealtimeSessionThreadComponent_For_2_Case_0_Conditional_0_Conditional_5
 } }
 function RealtimeSessionThreadComponent_For_2_Case_0_Conditional_0_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0);
-    i0.ɵɵelementStart(1, "span", 12);
+    i0.ɵɵelementStart(1, "span", 15);
     i0.ɵɵtext(2, "\u00B7 voice");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(4);
     i0.ɵɵtextInterpolate1(" ", ctx_r0.AgentName, " ");
 } }
+function RealtimeSessionThreadComponent_For_2_Case_0_Conditional_0_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    const _r2 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 14)(1, "button", 16);
+    i0.ɵɵlistener("click", function RealtimeSessionThreadComponent_For_2_Case_0_Conditional_0_Conditional_10_Template_button_click_1_listener($event) { i0.ɵɵrestoreView(_r2); const $index_r3 = i0.ɵɵnextContext(3).$index; const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.ToggleExpanded($index_r3, $event)); });
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(4, "i", 17);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const $index_r3 = i0.ɵɵnextContext(3).$index;
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵattribute("aria-expanded", ctx_r0.IsExpanded($index_r3));
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r0.IsExpanded($index_r3) ? "Show less" : "Show more");
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("fa-chevron-up", ctx_r0.IsExpanded($index_r3))("fa-chevron-down", !ctx_r0.IsExpanded($index_r3));
+} }
 function RealtimeSessionThreadComponent_For_2_Case_0_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 6)(1, "div", 7);
     i0.ɵɵtext(2);
@@ -29,70 +50,80 @@ function RealtimeSessionThreadComponent_For_2_Case_0_Conditional_0_Template(rf,
     i0.ɵɵelementStart(3, "div", 8)(4, "div", 9);
     i0.ɵɵconditionalCreate(5, RealtimeSessionThreadComponent_For_2_Case_0_Conditional_0_Conditional_5_Template, 2, 1, "span", 10)(6, RealtimeSessionThreadComponent_For_2_Case_0_Conditional_0_Conditional_6_Template, 3, 1);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "div", 11);
-    i0.ɵɵtext(8);
+    i0.ɵɵelementStart(7, "div", 11)(8, "div", 12);
+    i0.ɵɵelement(9, "mj-markdown", 13);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(10, RealtimeSessionThreadComponent_For_2_Case_0_Conditional_0_Conditional_10_Template, 5, 6, "div", 14);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const item_r2 = i0.ɵɵnextContext(2).$implicit;
+    const ctx_r3 = i0.ɵɵnextContext(2);
+    const item_r5 = ctx_r3.$implicit;
+    const $index_r3 = ctx_r3.$index;
     const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵclassProp("turn--user", item_r2.Role === "User")("turn--agent", item_r2.Role === "Assistant");
+    i0.ɵɵclassProp("turn--user", item_r5.Role === "User")("turn--agent", item_r5.Role === "Assistant");
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate((item_r2.Role === "User" ? ctx_r0.UserName : ctx_r0.AgentName).charAt(0).toUpperCase());
-    i0.ɵɵadvance(3);
-    i0.ɵɵconditional(item_r2.Role === "User" ? 5 : 6);
+    i0.ɵɵtextInterpolate((item_r5.Role === "User" ? ctx_r0.UserName : ctx_r0.AgentName).charAt(0).toUpperCase());
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(item_r2.Text);
+    i0.ɵɵconditional(item_r5.Role === "User" ? 5 : 6);
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassProp("bubble--clamped", ctx_r0.IsLongText(item_r5.Text) && !ctx_r0.IsExpanded($index_r3))("bubble--expanded", ctx_r0.IsLongText(item_r5.Text) && ctx_r0.IsExpanded($index_r3));
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("bubble-content--clamped", ctx_r0.IsLongText(item_r5.Text) && !ctx_r0.IsExpanded($index_r3))("bubble-content--expanded", ctx_r0.IsLongText(item_r5.Text) && ctx_r0.IsExpanded($index_r3));
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("data", ctx_r0.FormatMarkdownText(item_r5.Text))("enableCollapsibleHeadings", true);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.IsLongText(item_r5.Text) ? 10 : -1);
 } }
 function RealtimeSessionThreadComponent_For_2_Case_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, RealtimeSessionThreadComponent_For_2_Case_0_Conditional_0_Template, 9, 7, "div", 5);
+    i0.ɵɵconditionalCreate(0, RealtimeSessionThreadComponent_For_2_Case_0_Conditional_0_Template, 11, 17, "div", 5);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵconditional(ctx_r0.ShowCaptions ? 0 : -1);
 } }
 function RealtimeSessionThreadComponent_For_2_Case_1_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 16);
+    i0.ɵɵelementStart(0, "span", 21);
     i0.ɵɵtext(1);
     i0.ɵɵpipe(2, "date");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const item_r2 = i0.ɵɵnextContext(2).$implicit;
+    const item_r5 = i0.ɵɵnextContext(2).$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1("\u00B7 ", i0.ɵɵpipeBind2(2, 1, item_r2.At, "MMM d, h:mm a"));
+    i0.ɵɵtextInterpolate1("\u00B7 ", i0.ɵɵpipeBind2(2, 1, item_r5.At, "MMM d, h:mm a"));
 } }
 function RealtimeSessionThreadComponent_For_2_Case_1_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 17);
+    i0.ɵɵelementStart(0, "span", 22);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const item_r2 = i0.ɵɵnextContext(2).$implicit;
+    const item_r5 = i0.ɵɵnextContext(2).$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(item_r2.CloseReason);
+    i0.ɵɵtextInterpolate(item_r5.CloseReason);
 } }
 function RealtimeSessionThreadComponent_For_2_Case_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 3);
-    i0.ɵɵelement(1, "span", 13);
-    i0.ɵɵelementStart(2, "span", 14);
-    i0.ɵɵelement(3, "i", 15);
+    i0.ɵɵelement(1, "span", 18);
+    i0.ɵɵelementStart(2, "span", 19);
+    i0.ɵɵelement(3, "i", 20);
     i0.ɵɵtext(4);
-    i0.ɵɵconditionalCreate(5, RealtimeSessionThreadComponent_For_2_Case_1_Conditional_5_Template, 3, 4, "span", 16);
+    i0.ɵɵconditionalCreate(5, RealtimeSessionThreadComponent_For_2_Case_1_Conditional_5_Template, 3, 4, "span", 21);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(6, RealtimeSessionThreadComponent_For_2_Case_1_Conditional_6_Template, 2, 1, "span", 17);
-    i0.ɵɵelement(7, "span", 13);
+    i0.ɵɵconditionalCreate(6, RealtimeSessionThreadComponent_For_2_Case_1_Conditional_6_Template, 2, 1, "span", 22);
+    i0.ɵɵelement(7, "span", 18);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const item_r2 = i0.ɵɵnextContext().$implicit;
+    const item_r5 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance(3);
-    i0.ɵɵclassMap(item_r2.Icon);
+    i0.ɵɵclassMap(item_r5.Icon);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", item_r2.Label, " ");
+    i0.ɵɵtextInterpolate1(" ", item_r5.Label, " ");
     i0.ɵɵadvance();
-    i0.ɵɵconditional(item_r2.At ? 5 : -1);
+    i0.ɵɵconditional(item_r5.At ? 5 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(item_r2.CloseReason ? 6 : -1);
+    i0.ɵɵconditional(item_r5.CloseReason ? 6 : -1);
 } }
 function RealtimeSessionThreadComponent_For_2_Case_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 19);
-    i0.ɵɵelement(1, "i", 20);
+    i0.ɵɵelementStart(0, "div", 24);
+    i0.ɵɵelement(1, "i", 25);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -101,26 +132,26 @@ function RealtimeSessionThreadComponent_For_2_Case_2_Conditional_2_Template(rf,
     i0.ɵɵtextInterpolate1(" ", ctx_r0.State.Narration, " ");
 } }
 function RealtimeSessionThreadComponent_For_2_Case_2_Template(rf, ctx) { if (rf & 1) {
-    const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 4)(1, "mj-realtime-delegation-card", 18);
-    i0.ɵɵlistener("OpenRunRequested", function RealtimeSessionThreadComponent_For_2_Case_2_Template_mj_realtime_delegation_card_OpenRunRequested_1_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.OpenRunRequested.emit($event)); })("OpenArtifactRequested", function RealtimeSessionThreadComponent_For_2_Case_2_Template_mj_realtime_delegation_card_OpenArtifactRequested_1_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.OpenArtifactRequested.emit($event)); })("CancelRequested", function RealtimeSessionThreadComponent_For_2_Case_2_Template_mj_realtime_delegation_card_CancelRequested_1_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.CancelRequested.emit($event)); });
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 4)(1, "mj-realtime-delegation-card", 23);
+    i0.ɵɵlistener("OpenRunRequested", function RealtimeSessionThreadComponent_For_2_Case_2_Template_mj_realtime_delegation_card_OpenRunRequested_1_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.OpenRunRequested.emit($event)); })("OpenArtifactRequested", function RealtimeSessionThreadComponent_For_2_Case_2_Template_mj_realtime_delegation_card_OpenArtifactRequested_1_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.OpenArtifactRequested.emit($event)); })("CancelRequested", function RealtimeSessionThreadComponent_For_2_Case_2_Template_mj_realtime_delegation_card_CancelRequested_1_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.CancelRequested.emit($event)); });
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(2, RealtimeSessionThreadComponent_For_2_Case_2_Conditional_2_Template, 3, 1, "div", 19);
+    i0.ɵɵconditionalCreate(2, RealtimeSessionThreadComponent_For_2_Case_2_Conditional_2_Template, 3, 1, "div", 24);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const item_r2 = i0.ɵɵnextContext().$implicit;
+    const item_r5 = i0.ɵɵnextContext().$implicit;
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵproperty("Card", item_r2.Card)("DevMode", ctx_r0.DevMode);
+    i0.ɵɵproperty("Card", item_r5.Card)("DevMode", ctx_r0.DevMode);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r0.ShowsLiveNote(item_r2) ? 2 : -1);
+    i0.ɵɵconditional(ctx_r0.ShowsLiveNote(item_r5) ? 2 : -1);
 } }
 function RealtimeSessionThreadComponent_For_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵconditionalCreate(0, RealtimeSessionThreadComponent_For_2_Case_0_Template, 1, 1)(1, RealtimeSessionThreadComponent_For_2_Case_1_Template, 8, 5, "div", 3)(2, RealtimeSessionThreadComponent_For_2_Case_2_Template, 3, 3, "div", 4);
 } if (rf & 2) {
     let tmp_11_0;
-    const item_r2 = ctx.$implicit;
-    i0.ɵɵconditional((tmp_11_0 = item_r2.Kind) === "caption" ? 0 : tmp_11_0 === "divider" ? 1 : tmp_11_0 === "delegation" ? 2 : -1);
+    const item_r5 = ctx.$implicit;
+    i0.ɵɵconditional((tmp_11_0 = item_r5.Kind) === "caption" ? 0 : tmp_11_0 === "divider" ? 1 : tmp_11_0 === "delegation" ? 2 : -1);
 } }
 function RealtimeSessionThreadComponent_ForEmpty_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 2);
@@ -165,7 +196,7 @@ export class RealtimeSessionThreadComponent {
     /** Drives auto-scroll: set whenever the list grows. */
     pendingScroll = false;
     changedSub;
-    cdr = inject(ChangeDetectorRef);
+    cdr = inject(ChangeDetectorRef, { optional: true });
     ngOnInit() {
         this.changedSub = this.State.Changed$.subscribe(() => this.onStateChanged());
         this.lastItemCount = this.State.Items.length;
@@ -194,13 +225,59 @@ export class RealtimeSessionThreadComponent {
             && this.State.Narration !== null
             && item.Card.CallID === this.State.ActiveCallId;
     }
+    /** Set of item indices whose long text has been expanded by the user. */
+    ExpandedItems = new Set();
+    /**
+     * Returns true when the caption text is considered a "long blob" (>280 chars or >4 lines)
+     * that warrants height clamping and an expand/collapse toggle.
+     */
+    IsLongText(text) {
+        if (!text) {
+            return false;
+        }
+        return text.length > 280 || text.split('\n').length > 4;
+    }
+    /** Returns whether the caption item at the specified index is expanded. */
+    IsExpanded(index) {
+        return this.ExpandedItems.has(index);
+    }
+    /** Toggles expanded/collapsed state for the caption item at the given index. */
+    ToggleExpanded(index, event) {
+        if (event) {
+            event.stopPropagation();
+        }
+        if (this.ExpandedItems.has(index)) {
+            this.ExpandedItems.delete(index);
+        }
+        else {
+            this.ExpandedItems.add(index);
+        }
+        this.cdr?.markForCheck();
+    }
+    /**
+     * Prepares text for markdown rendering, restoring structure (headings, horizontal rules,
+     * bullet items) if newlines were stripped by single-line input paste or speech-to-text.
+     */
+    FormatMarkdownText(text) {
+        if (!text) {
+            return '';
+        }
+        let cleaned = text;
+        // Restore newlines before markdown headings on same line: "Title ### Heading" -> "Title\n\n### Heading"
+        cleaned = cleaned.replace(/[ \t]+(?:—\s*)?(#{1,6}[ \t]+)/g, '\n\n$1');
+        // Restore newlines around horizontal rules on same line: "Text --- ##" -> "Text\n\n---\n\n##"
+        cleaned = cleaned.replace(/[ \t]+(?:—\s*)?(---|___|\*\*\*)[ \t]*/g, '\n\n$1\n\n');
+        // Restore newlines before bullet items on same line: "around: - Item 1 - Item 2" -> "around:\n- Item 1\n- Item 2"
+        cleaned = cleaned.replace(/[ \t]+-[ \t]+(?=[A-Za-z0-9\*])/g, '\n- ');
+        return cleaned;
+    }
     /** Marks for check on every state change; auto-scrolls when the thread grew. */
     onStateChanged() {
         if (this.State.Items.length > this.lastItemCount) {
             this.pendingScroll = true;
         }
         this.lastItemCount = this.State.Items.length;
-        this.cdr.markForCheck();
+        this.cdr?.markForCheck();
     }
     static ɵfac = function RealtimeSessionThreadComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || RealtimeSessionThreadComponent)(); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: RealtimeSessionThreadComponent, selectors: [["mj-realtime-session-thread"]], viewQuery: function RealtimeSessionThreadComponent_Query(rf, ctx) { if (rf & 1) {
@@ -208,7 +285,7 @@ export class RealtimeSessionThreadComponent {
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.scrollAnchor = _t.first);
-        } }, inputs: { AgentName: "AgentName", UserName: "UserName", State: "State", ShowCaptions: "ShowCaptions", DevMode: "DevMode" }, outputs: { OpenRunRequested: "OpenRunRequested", OpenArtifactRequested: "OpenArtifactRequested", CancelRequested: "CancelRequested" }, decls: 6, vars: 1, consts: [["scrollAnchor", ""], [1, "thread"], [1, "thread-empty"], ["role", "separator", 1, "thread-divider"], [1, "delegation-block"], [1, "turn", 3, "turn--user", "turn--agent"], [1, "turn"], [1, "turn-avatar"], [1, "turn-body"], [1, "turn-meta"], [1, "typed-tag"], [1, "bubble"], [1, "muted"], ["aria-hidden", "true", 1, "thread-divider__line"], [1, "thread-divider__label"], ["aria-hidden", "true"], [1, "thread-divider__time"], ["title", "Why the previous session leg ended", 1, "thread-divider__chip"], [3, "OpenRunRequested", "OpenArtifactRequested", "CancelRequested", "Card", "DevMode"], ["role", "status", "aria-live", "polite", 1, "live-note"], ["aria-hidden", "true", 1, "fa-solid", "fa-comment-dots"]], template: function RealtimeSessionThreadComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { AgentName: "AgentName", UserName: "UserName", State: "State", ShowCaptions: "ShowCaptions", DevMode: "DevMode" }, outputs: { OpenRunRequested: "OpenRunRequested", OpenArtifactRequested: "OpenArtifactRequested", CancelRequested: "CancelRequested" }, decls: 6, vars: 1, consts: [["scrollAnchor", ""], [1, "thread"], [1, "thread-empty"], ["role", "separator", 1, "thread-divider"], [1, "delegation-block"], [1, "turn", 3, "turn--user", "turn--agent"], [1, "turn"], [1, "turn-avatar"], [1, "turn-body"], [1, "turn-meta"], [1, "typed-tag"], [1, "bubble"], [1, "bubble-content"], [3, "data", "enableCollapsibleHeadings"], [1, "bubble-actions"], [1, "muted"], ["type", "button", 1, "bubble-expand-btn", 3, "click"], ["aria-hidden", "true", 1, "fa-solid"], ["aria-hidden", "true", 1, "thread-divider__line"], [1, "thread-divider__label"], ["aria-hidden", "true"], [1, "thread-divider__time"], ["title", "Why the previous session leg ended", 1, "thread-divider__chip"], [3, "OpenRunRequested", "OpenArtifactRequested", "CancelRequested", "Card", "DevMode"], ["role", "status", "aria-live", "polite", 1, "live-note"], ["aria-hidden", "true", 1, "fa-solid", "fa-comment-dots"]], template: function RealtimeSessionThreadComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 1);
             i0.ɵɵrepeaterCreate(1, RealtimeSessionThreadComponent_For_2_Template, 3, 1, null, null, ctx.TrackItem, true, RealtimeSessionThreadComponent_ForEmpty_3_Template, 2, 0, "div", 2);
             i0.ɵɵelement(4, "div", null, 0);
@@ -216,11 +293,11 @@ export class RealtimeSessionThreadComponent {
         } if (rf & 2) {
             i0.ɵɵadvance();
             i0.ɵɵrepeater(ctx.State.Items);
-        } }, dependencies: [CommonModule, RealtimeDelegationCardComponent, i1.DatePipe], styles: ["[_nghost-%COMP%] {\n  display: block;\n}\n\n.thread[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n\n.thread-empty[_ngcontent-%COMP%] {\n  text-align: center;\n  font-size: 12.5px;\n  color: var(--mj-text-disabled);\n  padding: 24px 0;\n}\n\n\n.turn[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 10px;\n  max-width: 100%;\n}\n.turn--user[_ngcontent-%COMP%] {\n  flex-direction: row-reverse;\n}\n.turn-body[_ngcontent-%COMP%] {\n  min-width: 0;\n}\n.turn-avatar[_ngcontent-%COMP%] {\n  width: 26px;\n  height: 26px;\n  border-radius: 50%;\n  display: grid;\n  place-items: center;\n  flex-shrink: 0;\n  font-size: 11px;\n  font-weight: 700;\n  margin-top: 2px;\n}\n.turn--agent[_ngcontent-%COMP%]   .turn-avatar[_ngcontent-%COMP%] {\n  background: linear-gradient(135deg, var(--mj-brand-primary), var(--mj-brand-accent, var(--mj-brand-primary)));\n  color: var(--mj-text-inverse, #fff);\n}\n.turn--user[_ngcontent-%COMP%]   .turn-avatar[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-elevated);\n  color: var(--mj-text-secondary);\n  border: 1px solid var(--mj-border-strong);\n}\n.bubble[_ngcontent-%COMP%] {\n  padding: 8px 12px;\n  border-radius: 12px;\n  max-width: 560px;\n  font-size: 13.5px;\n  line-height: 1.5;\n  position: relative;\n}\n.turn--agent[_ngcontent-%COMP%]   .bubble[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-top-left-radius: 4px;\n  color: var(--mj-text-primary);\n}\n.turn--user[_ngcontent-%COMP%]   .bubble[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse, #fff);\n  border-top-right-radius: 4px;\n}\n.turn-meta[_ngcontent-%COMP%] {\n  font-size: 10.5px;\n  color: var(--mj-text-muted);\n  margin-bottom: 3px;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-weight: 600;\n}\n.turn--user[_ngcontent-%COMP%]   .turn-meta[_ngcontent-%COMP%] {\n  justify-content: flex-end;\n}\n.muted[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n}\n.typed-tag[_ngcontent-%COMP%] {\n  font-size: 9.5px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  color: var(--mj-text-muted);\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 4px;\n  padding: 1px 5px;\n}\n\n\n.delegation-block[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n.live-note[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: flex-start;\n  gap: 7px;\n  margin-left: 22px;\n  max-width: 520px;\n  font-size: 12px;\n  font-style: italic;\n  color: var(--mj-text-muted);\n  animation: _ngcontent-%COMP%_live-note-in 220ms ease;\n}\n.live-note[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 10px;\n  margin-top: 3px;\n  flex-shrink: 0;\n}\n@keyframes _ngcontent-%COMP%_live-note-in {\n  from { opacity: 0; transform: translateY(2px); }\n  to { opacity: 1; transform: translateY(0); }\n}\n\n\n.thread-divider[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  margin: 10px 0 6px;\n  user-select: none;\n}\n.thread-divider__line[_ngcontent-%COMP%] {\n  flex: 1;\n  height: 1px;\n  background: var(--mj-border-subtle);\n}\n.thread-divider__label[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 11px;\n  font-weight: 600;\n  letter-spacing: 0.02em;\n  color: var(--mj-text-muted);\n  white-space: nowrap;\n}\n.thread-divider__label[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 10px;\n}\n.thread-divider__time[_ngcontent-%COMP%] {\n  font-weight: 400;\n}\n.thread-divider__chip[_ngcontent-%COMP%] {\n  font-size: 9.5px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  color: var(--mj-text-muted);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 999px;\n  padding: 1px 7px;\n  background: var(--mj-bg-surface-card);\n  white-space: nowrap;\n}"] });
+        } }, dependencies: [CommonModule, RealtimeDelegationCardComponent, MarkdownModule, i1.MarkdownComponent, i2.DatePipe], styles: ["[_nghost-%COMP%] {\n  display: block;\n}\n\n.thread[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n\n.thread-empty[_ngcontent-%COMP%] {\n  text-align: center;\n  font-size: 12.5px;\n  color: var(--mj-text-disabled);\n  padding: 24px 0;\n}\n\n\n.turn[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 10px;\n  max-width: 100%;\n}\n.turn--user[_ngcontent-%COMP%] {\n  flex-direction: row-reverse;\n}\n.turn-body[_ngcontent-%COMP%] {\n  min-width: 0;\n}\n.turn-avatar[_ngcontent-%COMP%] {\n  width: 26px;\n  height: 26px;\n  border-radius: 50%;\n  display: grid;\n  place-items: center;\n  flex-shrink: 0;\n  font-size: 11px;\n  font-weight: 700;\n  margin-top: 2px;\n}\n.turn--agent[_ngcontent-%COMP%]   .turn-avatar[_ngcontent-%COMP%] {\n  background: linear-gradient(135deg, var(--mj-brand-primary), var(--mj-brand-accent, var(--mj-brand-primary)));\n  color: var(--mj-text-inverse, #fff);\n}\n.turn--user[_ngcontent-%COMP%]   .turn-avatar[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-elevated);\n  color: var(--mj-text-secondary);\n  border: 1px solid var(--mj-border-strong);\n}\n.bubble[_ngcontent-%COMP%] {\n  padding: 8px 12px;\n  border-radius: 12px;\n  max-width: 560px;\n  font-size: 13.5px;\n  line-height: 1.5;\n  position: relative;\n}\n.turn--agent[_ngcontent-%COMP%]   .bubble[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-top-left-radius: 4px;\n  color: var(--mj-text-primary);\n}\n.turn--user[_ngcontent-%COMP%]   .bubble[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse, #fff);\n  border-top-right-radius: 4px;\n}\n\n\n.bubble-content[_ngcontent-%COMP%] {\n  position: relative;\n  word-break: break-word;\n}\n\n.bubble-content--clamped[_ngcontent-%COMP%] {\n  max-height: 120px;\n  overflow: hidden;\n  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 0) 100%);\n  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 0) 100%);\n}\n\n.bubble-content--expanded[_ngcontent-%COMP%] {\n  max-height: 440px;\n  overflow-y: auto;\n  scrollbar-width: thin;\n  scrollbar-color: rgba(255, 255, 255, 0.4) transparent;\n}\n.turn--agent[_ngcontent-%COMP%]   .bubble-content--expanded[_ngcontent-%COMP%] {\n  scrollbar-color: var(--mj-border-strong) transparent;\n}\n.bubble-content--expanded[_ngcontent-%COMP%]::-webkit-scrollbar {\n  width: 5px;\n}\n.bubble-content--expanded[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n  background: rgba(255, 255, 255, 0.35);\n  border-radius: 3px;\n}\n.turn--agent[_ngcontent-%COMP%]   .bubble-content--expanded[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n  background: var(--mj-border-strong);\n}\n\n.bubble-actions[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  margin-top: 6px;\n  padding-top: 2px;\n}\n.turn--user[_ngcontent-%COMP%]   .bubble-actions[_ngcontent-%COMP%] {\n  justify-content: flex-end;\n}\n\n.bubble-expand-btn[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  padding: 3px 8px;\n  font-size: 11.5px;\n  font-weight: 600;\n  border-radius: 6px;\n  cursor: pointer;\n  background: transparent;\n  border: none;\n  transition: background-color 140ms ease, color 140ms ease;\n  user-select: none;\n}\n\n.bubble-expand-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 10px;\n}\n\n.turn--agent[_ngcontent-%COMP%]   .bubble-expand-btn[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n}\n.turn--agent[_ngcontent-%COMP%]   .bubble-expand-btn[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 16%, transparent);\n}\n\n.turn--user[_ngcontent-%COMP%]   .bubble-expand-btn[_ngcontent-%COMP%] {\n  color: var(--mj-text-inverse, #fff);\n  background: rgba(255, 255, 255, 0.18);\n  border: 1px solid rgba(255, 255, 255, 0.28);\n}\n.turn--user[_ngcontent-%COMP%]   .bubble-expand-btn[_ngcontent-%COMP%]:hover {\n  background: rgba(255, 255, 255, 0.28);\n}\n\n\n.bubble[_ngcontent-%COMP%]     .mj-markdown-container {\n  font-size: 13.5px;\n  line-height: 1.55;\n}\n\n.bubble[_ngcontent-%COMP%]     .mj-markdown-container h1 { font-size: 1.35em; font-weight: 700; margin-top: 0.6em; margin-bottom: 0.3em; }\n.bubble[_ngcontent-%COMP%]     .mj-markdown-container h2 { font-size: 1.2em; font-weight: 650; margin-top: 0.5em; margin-bottom: 0.25em; }\n.bubble[_ngcontent-%COMP%]     .mj-markdown-container h3 { font-size: 1.1em; font-weight: 600; margin-top: 0.4em; margin-bottom: 0.2em; }\n.bubble[_ngcontent-%COMP%]     .mj-markdown-container h4, \n.bubble[_ngcontent-%COMP%]     .mj-markdown-container h5, \n.bubble[_ngcontent-%COMP%]     .mj-markdown-container h6 { font-size: 1em; font-weight: 600; margin-top: 0.4em; margin-bottom: 0.2em; }\n.bubble[_ngcontent-%COMP%]     .mj-markdown-container p { margin: 0 0 0.6em 0; }\n.bubble[_ngcontent-%COMP%]     .mj-markdown-container p:last-child { margin-bottom: 0; }\n.bubble[_ngcontent-%COMP%]     .mj-markdown-container ul, \n.bubble[_ngcontent-%COMP%]     .mj-markdown-container ol { margin: 0.25em 0 0.6em 1.25em; padding: 0; }\n.bubble[_ngcontent-%COMP%]     .mj-markdown-container li { margin-bottom: 0.25em; line-height: 1.45; }\n\n\n.turn--user[_ngcontent-%COMP%]   .bubble[_ngcontent-%COMP%]     .mj-markdown-container, \n.turn--user[_ngcontent-%COMP%]   .bubble[_ngcontent-%COMP%]     .mj-markdown-container p, \n.turn--user[_ngcontent-%COMP%]   .bubble[_ngcontent-%COMP%]     .mj-markdown-container h1, \n.turn--user[_ngcontent-%COMP%]   .bubble[_ngcontent-%COMP%]     .mj-markdown-container h2, \n.turn--user[_ngcontent-%COMP%]   .bubble[_ngcontent-%COMP%]     .mj-markdown-container h3, \n.turn--user[_ngcontent-%COMP%]   .bubble[_ngcontent-%COMP%]     .mj-markdown-container h4, \n.turn--user[_ngcontent-%COMP%]   .bubble[_ngcontent-%COMP%]     .mj-markdown-container h5, \n.turn--user[_ngcontent-%COMP%]   .bubble[_ngcontent-%COMP%]     .mj-markdown-container h6, \n.turn--user[_ngcontent-%COMP%]   .bubble[_ngcontent-%COMP%]     .mj-markdown-container strong, \n.turn--user[_ngcontent-%COMP%]   .bubble[_ngcontent-%COMP%]     .mj-markdown-container b, \n.turn--user[_ngcontent-%COMP%]   .bubble[_ngcontent-%COMP%]     .mj-markdown-container li {\n  color: var(--mj-text-inverse, #fff);\n}\n\n.turn--user[_ngcontent-%COMP%]   .bubble[_ngcontent-%COMP%]     .mj-markdown-container li::marker {\n  color: var(--mj-text-inverse, #fff);\n}\n\n.turn--user[_ngcontent-%COMP%]   .bubble[_ngcontent-%COMP%]     .mj-markdown-container a {\n  color: #fff;\n  text-decoration: underline;\n}\n\n.turn--user[_ngcontent-%COMP%]   .bubble[_ngcontent-%COMP%]     .mj-markdown-container code {\n  color: #fff;\n  background: rgba(255, 255, 255, 0.2);\n}\n\n.turn--user[_ngcontent-%COMP%]   .bubble[_ngcontent-%COMP%]     .mj-markdown-container pre {\n  background: rgba(0, 0, 0, 0.25);\n  color: #fff;\n}\n\n.turn--user[_ngcontent-%COMP%]   .bubble[_ngcontent-%COMP%]     .mj-markdown-container blockquote {\n  border-left-color: rgba(255, 255, 255, 0.5);\n  color: rgba(255, 255, 255, 0.9);\n}\n\n.turn--user[_ngcontent-%COMP%]   .bubble[_ngcontent-%COMP%]     .mj-markdown-container hr {\n  border-color: rgba(255, 255, 255, 0.25);\n  margin: 0.6em 0;\n}\n.turn-meta[_ngcontent-%COMP%] {\n  font-size: 10.5px;\n  color: var(--mj-text-muted);\n  margin-bottom: 3px;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-weight: 600;\n}\n.turn--user[_ngcontent-%COMP%]   .turn-meta[_ngcontent-%COMP%] {\n  justify-content: flex-end;\n}\n.muted[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n}\n.typed-tag[_ngcontent-%COMP%] {\n  font-size: 9.5px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  color: var(--mj-text-muted);\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 4px;\n  padding: 1px 5px;\n}\n\n\n.delegation-block[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n.live-note[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: flex-start;\n  gap: 7px;\n  margin-left: 22px;\n  max-width: 520px;\n  font-size: 12px;\n  font-style: italic;\n  color: var(--mj-text-muted);\n  animation: _ngcontent-%COMP%_live-note-in 220ms ease;\n}\n.live-note[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 10px;\n  margin-top: 3px;\n  flex-shrink: 0;\n}\n@keyframes _ngcontent-%COMP%_live-note-in {\n  from { opacity: 0; transform: translateY(2px); }\n  to { opacity: 1; transform: translateY(0); }\n}\n\n\n.thread-divider[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  margin: 10px 0 6px;\n  user-select: none;\n}\n.thread-divider__line[_ngcontent-%COMP%] {\n  flex: 1;\n  height: 1px;\n  background: var(--mj-border-subtle);\n}\n.thread-divider__label[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 11px;\n  font-weight: 600;\n  letter-spacing: 0.02em;\n  color: var(--mj-text-muted);\n  white-space: nowrap;\n}\n.thread-divider__label[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 10px;\n}\n.thread-divider__time[_ngcontent-%COMP%] {\n  font-weight: 400;\n}\n.thread-divider__chip[_ngcontent-%COMP%] {\n  font-size: 9.5px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  color: var(--mj-text-muted);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 999px;\n  padding: 1px 7px;\n  background: var(--mj-bg-surface-card);\n  white-space: nowrap;\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(RealtimeSessionThreadComponent, [{
         type: Component,
-        args: [{ standalone: true, selector: 'mj-realtime-session-thread', imports: [CommonModule, RealtimeDelegationCardComponent], template: "<div class=\"thread\">\n  @for (item of State.Items; track TrackItem($index, item)) {\n    @switch (item.Kind) {\n      @case ('caption') {\n        @if (ShowCaptions) {\n          <div class=\"turn\" [class.turn--user]=\"item.Role === 'User'\" [class.turn--agent]=\"item.Role === 'Assistant'\">\n            <div class=\"turn-avatar\">{{ (item.Role === 'User' ? UserName : AgentName).charAt(0).toUpperCase() }}</div>\n            <div class=\"turn-body\">\n              <div class=\"turn-meta\">\n                @if (item.Role === 'User') {\n                  <span class=\"typed-tag\">{{ UserName }}</span>\n                } @else {\n                  {{ AgentName }} <span class=\"muted\">\u00B7 voice</span>\n                }\n              </div>\n              <div class=\"bubble\">{{ item.Text }}</div>\n            </div>\n          </div>\n        }\n      }\n      @case ('divider') {\n        <!-- Session-leg boundary: subtle rule marking a resume / chained leg -->\n        <div class=\"thread-divider\" role=\"separator\">\n          <span class=\"thread-divider__line\" aria-hidden=\"true\"></span>\n          <span class=\"thread-divider__label\">\n            <i [class]=\"item.Icon\" aria-hidden=\"true\"></i>\n            {{ item.Label }}\n            @if (item.At) {\n              <span class=\"thread-divider__time\">\u00B7 {{ item.At | date:'MMM d, h:mm a' }}</span>\n            }\n          </span>\n          @if (item.CloseReason) {\n            <span class=\"thread-divider__chip\" title=\"Why the previous session leg ended\">{{ item.CloseReason }}</span>\n          }\n          <span class=\"thread-divider__line\" aria-hidden=\"true\"></span>\n        </div>\n      }\n      @case ('delegation') {\n        <div class=\"delegation-block\">\n          <mj-realtime-delegation-card\n            [Card]=\"item.Card\"\n            [DevMode]=\"DevMode\"\n            (OpenRunRequested)=\"OpenRunRequested.emit($event)\"\n            (OpenArtifactRequested)=\"OpenArtifactRequested.emit($event)\"\n            (CancelRequested)=\"CancelRequested.emit($event)\">\n          </mj-realtime-delegation-card>\n          @if (ShowsLiveNote(item)) {\n            <!-- Ephemeral narration: latest only, never persisted, fades with completion -->\n            <div class=\"live-note\" role=\"status\" aria-live=\"polite\">\n              <i class=\"fa-solid fa-comment-dots\" aria-hidden=\"true\"></i>\n              {{ State.Narration }}\n            </div>\n          }\n        </div>\n      }\n    }\n  } @empty {\n    <div class=\"thread-empty\">The live transcript and any delegated work will appear here.</div>\n  }\n  <div #scrollAnchor></div>\n</div>\n", styles: [":host {\n  display: block;\n}\n\n.thread {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n\n.thread-empty {\n  text-align: center;\n  font-size: 12.5px;\n  color: var(--mj-text-disabled);\n  padding: 24px 0;\n}\n\n/* ---------- Transcript bubbles ---------- */\n.turn {\n  display: flex;\n  gap: 10px;\n  max-width: 100%;\n}\n.turn--user {\n  flex-direction: row-reverse;\n}\n.turn-body {\n  min-width: 0;\n}\n.turn-avatar {\n  width: 26px;\n  height: 26px;\n  border-radius: 50%;\n  display: grid;\n  place-items: center;\n  flex-shrink: 0;\n  font-size: 11px;\n  font-weight: 700;\n  margin-top: 2px;\n}\n.turn--agent .turn-avatar {\n  background: linear-gradient(135deg, var(--mj-brand-primary), var(--mj-brand-accent, var(--mj-brand-primary)));\n  color: var(--mj-text-inverse, #fff);\n}\n.turn--user .turn-avatar {\n  background: var(--mj-bg-surface-elevated);\n  color: var(--mj-text-secondary);\n  border: 1px solid var(--mj-border-strong);\n}\n.bubble {\n  padding: 8px 12px;\n  border-radius: 12px;\n  max-width: 560px;\n  font-size: 13.5px;\n  line-height: 1.5;\n  position: relative;\n}\n.turn--agent .bubble {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-top-left-radius: 4px;\n  color: var(--mj-text-primary);\n}\n.turn--user .bubble {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse, #fff);\n  border-top-right-radius: 4px;\n}\n.turn-meta {\n  font-size: 10.5px;\n  color: var(--mj-text-muted);\n  margin-bottom: 3px;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-weight: 600;\n}\n.turn--user .turn-meta {\n  justify-content: flex-end;\n}\n.muted {\n  color: var(--mj-text-muted);\n}\n.typed-tag {\n  font-size: 9.5px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  color: var(--mj-text-muted);\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 4px;\n  padding: 1px 5px;\n}\n\n/* ---------- Delegation block + ephemeral live note ---------- */\n.delegation-block {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n.live-note {\n  display: flex;\n  align-items: flex-start;\n  gap: 7px;\n  margin-left: 22px;\n  max-width: 520px;\n  font-size: 12px;\n  font-style: italic;\n  color: var(--mj-text-muted);\n  animation: live-note-in 220ms ease;\n}\n.live-note i {\n  font-size: 10px;\n  margin-top: 3px;\n  flex-shrink: 0;\n}\n@keyframes live-note-in {\n  from { opacity: 0; transform: translateY(2px); }\n  to { opacity: 1; transform: translateY(0); }\n}\n\n/* ---------- Session-leg divider (resume / chained-leg boundary) ---------- */\n.thread-divider {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  margin: 10px 0 6px;\n  user-select: none;\n}\n.thread-divider__line {\n  flex: 1;\n  height: 1px;\n  background: var(--mj-border-subtle);\n}\n.thread-divider__label {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 11px;\n  font-weight: 600;\n  letter-spacing: 0.02em;\n  color: var(--mj-text-muted);\n  white-space: nowrap;\n}\n.thread-divider__label i {\n  font-size: 10px;\n}\n.thread-divider__time {\n  font-weight: 400;\n}\n.thread-divider__chip {\n  font-size: 9.5px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  color: var(--mj-text-muted);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 999px;\n  padding: 1px 7px;\n  background: var(--mj-bg-surface-card);\n  white-space: nowrap;\n}\n"] }]
+        args: [{ standalone: true, selector: 'mj-realtime-session-thread', imports: [CommonModule, RealtimeDelegationCardComponent, MarkdownModule], template: "<div class=\"thread\">\n  @for (item of State.Items; track TrackItem($index, item)) {\n    @switch (item.Kind) {\n      @case ('caption') {\n        @if (ShowCaptions) {\n          <div class=\"turn\" [class.turn--user]=\"item.Role === 'User'\" [class.turn--agent]=\"item.Role === 'Assistant'\">\n            <div class=\"turn-avatar\">{{ (item.Role === 'User' ? UserName : AgentName).charAt(0).toUpperCase() }}</div>\n            <div class=\"turn-body\">\n              <div class=\"turn-meta\">\n                @if (item.Role === 'User') {\n                  <span class=\"typed-tag\">{{ UserName }}</span>\n                } @else {\n                  {{ AgentName }} <span class=\"muted\">\u00B7 voice</span>\n                }\n              </div>\n              <div class=\"bubble\" [class.bubble--clamped]=\"IsLongText(item.Text) && !IsExpanded($index)\" [class.bubble--expanded]=\"IsLongText(item.Text) && IsExpanded($index)\">\n                <div class=\"bubble-content\" [class.bubble-content--clamped]=\"IsLongText(item.Text) && !IsExpanded($index)\" [class.bubble-content--expanded]=\"IsLongText(item.Text) && IsExpanded($index)\">\n                  <mj-markdown [data]=\"FormatMarkdownText(item.Text)\" [enableCollapsibleHeadings]=\"true\"></mj-markdown>\n                </div>\n                @if (IsLongText(item.Text)) {\n                  <div class=\"bubble-actions\">\n                    <button\n                      type=\"button\"\n                      class=\"bubble-expand-btn\"\n                      (click)=\"ToggleExpanded($index, $event)\"\n                      [attr.aria-expanded]=\"IsExpanded($index)\">\n                      <span>{{ IsExpanded($index) ? 'Show less' : 'Show more' }}</span>\n                      <i class=\"fa-solid\" [class.fa-chevron-up]=\"IsExpanded($index)\" [class.fa-chevron-down]=\"!IsExpanded($index)\" aria-hidden=\"true\"></i>\n                    </button>\n                  </div>\n                }\n              </div>\n            </div>\n          </div>\n        }\n      }\n      @case ('divider') {\n        <!-- Session-leg boundary: subtle rule marking a resume / chained leg -->\n        <div class=\"thread-divider\" role=\"separator\">\n          <span class=\"thread-divider__line\" aria-hidden=\"true\"></span>\n          <span class=\"thread-divider__label\">\n            <i [class]=\"item.Icon\" aria-hidden=\"true\"></i>\n            {{ item.Label }}\n            @if (item.At) {\n              <span class=\"thread-divider__time\">\u00B7 {{ item.At | date:'MMM d, h:mm a' }}</span>\n            }\n          </span>\n          @if (item.CloseReason) {\n            <span class=\"thread-divider__chip\" title=\"Why the previous session leg ended\">{{ item.CloseReason }}</span>\n          }\n          <span class=\"thread-divider__line\" aria-hidden=\"true\"></span>\n        </div>\n      }\n      @case ('delegation') {\n        <div class=\"delegation-block\">\n          <mj-realtime-delegation-card\n            [Card]=\"item.Card\"\n            [DevMode]=\"DevMode\"\n            (OpenRunRequested)=\"OpenRunRequested.emit($event)\"\n            (OpenArtifactRequested)=\"OpenArtifactRequested.emit($event)\"\n            (CancelRequested)=\"CancelRequested.emit($event)\">\n          </mj-realtime-delegation-card>\n          @if (ShowsLiveNote(item)) {\n            <!-- Ephemeral narration: latest only, never persisted, fades with completion -->\n            <div class=\"live-note\" role=\"status\" aria-live=\"polite\">\n              <i class=\"fa-solid fa-comment-dots\" aria-hidden=\"true\"></i>\n              {{ State.Narration }}\n            </div>\n          }\n        </div>\n      }\n    }\n  } @empty {\n    <div class=\"thread-empty\">The live transcript and any delegated work will appear here.</div>\n  }\n  <div #scrollAnchor></div>\n</div>\n", styles: [":host {\n  display: block;\n}\n\n.thread {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n\n.thread-empty {\n  text-align: center;\n  font-size: 12.5px;\n  color: var(--mj-text-disabled);\n  padding: 24px 0;\n}\n\n/* ---------- Transcript bubbles ---------- */\n.turn {\n  display: flex;\n  gap: 10px;\n  max-width: 100%;\n}\n.turn--user {\n  flex-direction: row-reverse;\n}\n.turn-body {\n  min-width: 0;\n}\n.turn-avatar {\n  width: 26px;\n  height: 26px;\n  border-radius: 50%;\n  display: grid;\n  place-items: center;\n  flex-shrink: 0;\n  font-size: 11px;\n  font-weight: 700;\n  margin-top: 2px;\n}\n.turn--agent .turn-avatar {\n  background: linear-gradient(135deg, var(--mj-brand-primary), var(--mj-brand-accent, var(--mj-brand-primary)));\n  color: var(--mj-text-inverse, #fff);\n}\n.turn--user .turn-avatar {\n  background: var(--mj-bg-surface-elevated);\n  color: var(--mj-text-secondary);\n  border: 1px solid var(--mj-border-strong);\n}\n.bubble {\n  padding: 8px 12px;\n  border-radius: 12px;\n  max-width: 560px;\n  font-size: 13.5px;\n  line-height: 1.5;\n  position: relative;\n}\n.turn--agent .bubble {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-top-left-radius: 4px;\n  color: var(--mj-text-primary);\n}\n.turn--user .bubble {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse, #fff);\n  border-top-right-radius: 4px;\n}\n\n/* ---------- Bubble content clamping and expansion ---------- */\n.bubble-content {\n  position: relative;\n  word-break: break-word;\n}\n\n.bubble-content--clamped {\n  max-height: 120px;\n  overflow: hidden;\n  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 0) 100%);\n  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 0) 100%);\n}\n\n.bubble-content--expanded {\n  max-height: 440px;\n  overflow-y: auto;\n  scrollbar-width: thin;\n  scrollbar-color: rgba(255, 255, 255, 0.4) transparent;\n}\n.turn--agent .bubble-content--expanded {\n  scrollbar-color: var(--mj-border-strong) transparent;\n}\n.bubble-content--expanded::-webkit-scrollbar {\n  width: 5px;\n}\n.bubble-content--expanded::-webkit-scrollbar-thumb {\n  background: rgba(255, 255, 255, 0.35);\n  border-radius: 3px;\n}\n.turn--agent .bubble-content--expanded::-webkit-scrollbar-thumb {\n  background: var(--mj-border-strong);\n}\n\n.bubble-actions {\n  display: flex;\n  align-items: center;\n  margin-top: 6px;\n  padding-top: 2px;\n}\n.turn--user .bubble-actions {\n  justify-content: flex-end;\n}\n\n.bubble-expand-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  padding: 3px 8px;\n  font-size: 11.5px;\n  font-weight: 600;\n  border-radius: 6px;\n  cursor: pointer;\n  background: transparent;\n  border: none;\n  transition: background-color 140ms ease, color 140ms ease;\n  user-select: none;\n}\n\n.bubble-expand-btn i {\n  font-size: 10px;\n}\n\n.turn--agent .bubble-expand-btn {\n  color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n}\n.turn--agent .bubble-expand-btn:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 16%, transparent);\n}\n\n.turn--user .bubble-expand-btn {\n  color: var(--mj-text-inverse, #fff);\n  background: rgba(255, 255, 255, 0.18);\n  border: 1px solid rgba(255, 255, 255, 0.28);\n}\n.turn--user .bubble-expand-btn:hover {\n  background: rgba(255, 255, 255, 0.28);\n}\n\n/* ---------- Markdown styling within realtime bubbles ---------- */\n.bubble ::ng-deep .mj-markdown-container {\n  font-size: 13.5px;\n  line-height: 1.55;\n}\n\n.bubble ::ng-deep .mj-markdown-container h1 { font-size: 1.35em; font-weight: 700; margin-top: 0.6em; margin-bottom: 0.3em; }\n.bubble ::ng-deep .mj-markdown-container h2 { font-size: 1.2em; font-weight: 650; margin-top: 0.5em; margin-bottom: 0.25em; }\n.bubble ::ng-deep .mj-markdown-container h3 { font-size: 1.1em; font-weight: 600; margin-top: 0.4em; margin-bottom: 0.2em; }\n.bubble ::ng-deep .mj-markdown-container h4,\n.bubble ::ng-deep .mj-markdown-container h5,\n.bubble ::ng-deep .mj-markdown-container h6 { font-size: 1em; font-weight: 600; margin-top: 0.4em; margin-bottom: 0.2em; }\n.bubble ::ng-deep .mj-markdown-container p { margin: 0 0 0.6em 0; }\n.bubble ::ng-deep .mj-markdown-container p:last-child { margin-bottom: 0; }\n.bubble ::ng-deep .mj-markdown-container ul,\n.bubble ::ng-deep .mj-markdown-container ol { margin: 0.25em 0 0.6em 1.25em; padding: 0; }\n.bubble ::ng-deep .mj-markdown-container li { margin-bottom: 0.25em; line-height: 1.45; }\n\n/* User turn contrast: markdown on brand-primary background */\n.turn--user .bubble ::ng-deep .mj-markdown-container,\n.turn--user .bubble ::ng-deep .mj-markdown-container p,\n.turn--user .bubble ::ng-deep .mj-markdown-container h1,\n.turn--user .bubble ::ng-deep .mj-markdown-container h2,\n.turn--user .bubble ::ng-deep .mj-markdown-container h3,\n.turn--user .bubble ::ng-deep .mj-markdown-container h4,\n.turn--user .bubble ::ng-deep .mj-markdown-container h5,\n.turn--user .bubble ::ng-deep .mj-markdown-container h6,\n.turn--user .bubble ::ng-deep .mj-markdown-container strong,\n.turn--user .bubble ::ng-deep .mj-markdown-container b,\n.turn--user .bubble ::ng-deep .mj-markdown-container li {\n  color: var(--mj-text-inverse, #fff);\n}\n\n.turn--user .bubble ::ng-deep .mj-markdown-container li::marker {\n  color: var(--mj-text-inverse, #fff);\n}\n\n.turn--user .bubble ::ng-deep .mj-markdown-container a {\n  color: #fff;\n  text-decoration: underline;\n}\n\n.turn--user .bubble ::ng-deep .mj-markdown-container code {\n  color: #fff;\n  background: rgba(255, 255, 255, 0.2);\n}\n\n.turn--user .bubble ::ng-deep .mj-markdown-container pre {\n  background: rgba(0, 0, 0, 0.25);\n  color: #fff;\n}\n\n.turn--user .bubble ::ng-deep .mj-markdown-container blockquote {\n  border-left-color: rgba(255, 255, 255, 0.5);\n  color: rgba(255, 255, 255, 0.9);\n}\n\n.turn--user .bubble ::ng-deep .mj-markdown-container hr {\n  border-color: rgba(255, 255, 255, 0.25);\n  margin: 0.6em 0;\n}\n.turn-meta {\n  font-size: 10.5px;\n  color: var(--mj-text-muted);\n  margin-bottom: 3px;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-weight: 600;\n}\n.turn--user .turn-meta {\n  justify-content: flex-end;\n}\n.muted {\n  color: var(--mj-text-muted);\n}\n.typed-tag {\n  font-size: 9.5px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  color: var(--mj-text-muted);\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 4px;\n  padding: 1px 5px;\n}\n\n/* ---------- Delegation block + ephemeral live note ---------- */\n.delegation-block {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n.live-note {\n  display: flex;\n  align-items: flex-start;\n  gap: 7px;\n  margin-left: 22px;\n  max-width: 520px;\n  font-size: 12px;\n  font-style: italic;\n  color: var(--mj-text-muted);\n  animation: live-note-in 220ms ease;\n}\n.live-note i {\n  font-size: 10px;\n  margin-top: 3px;\n  flex-shrink: 0;\n}\n@keyframes live-note-in {\n  from { opacity: 0; transform: translateY(2px); }\n  to { opacity: 1; transform: translateY(0); }\n}\n\n/* ---------- Session-leg divider (resume / chained-leg boundary) ---------- */\n.thread-divider {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  margin: 10px 0 6px;\n  user-select: none;\n}\n.thread-divider__line {\n  flex: 1;\n  height: 1px;\n  background: var(--mj-border-subtle);\n}\n.thread-divider__label {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 11px;\n  font-weight: 600;\n  letter-spacing: 0.02em;\n  color: var(--mj-text-muted);\n  white-space: nowrap;\n}\n.thread-divider__label i {\n  font-size: 10px;\n}\n.thread-divider__time {\n  font-weight: 400;\n}\n.thread-divider__chip {\n  font-size: 9.5px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  color: var(--mj-text-muted);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 999px;\n  padding: 1px 7px;\n  background: var(--mj-bg-surface-card);\n  white-space: nowrap;\n}\n"] }]
     }], null, { scrollAnchor: [{
             type: ViewChild,
             args: ['scrollAnchor']
@@ -242,5 +319,5 @@ export class RealtimeSessionThreadComponent {
         }], CancelRequested: [{
             type: Output
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(RealtimeSessionThreadComponent, { className: "RealtimeSessionThreadComponent", filePath: "src/lib/components/realtime/realtime-session-thread.component.ts", lineNumber: 29 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(RealtimeSessionThreadComponent, { className: "RealtimeSessionThreadComponent", filePath: "src/lib/components/realtime/realtime-session-thread.component.ts", lineNumber: 30 }); })();
 //# sourceMappingURL=realtime-session-thread.component.js.map

package/dist/lib/components/realtime/realtime-session-thread.component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"realtime-session-thread.component.js","sourceRoot":"","sources":["../../../../src/lib/components/realtime/realtime-session-thread.component.ts","../../../../src/lib/components/realtime/realtime-session-thread.component.html"],"names":[],"mappings":"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","sourcesContent":["import {\n Component, EventEmitter, Input, Output, ElementRef, ViewChild, AfterViewChecked, OnInit, OnDestroy,\n ChangeDetectorRef, inject\n} from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { Subscription } from 'rxjs';\nimport { RealtimeSessionState, RealtimeThreadItem } from './realtime-session-state';\nimport { RealtimeDelegationCardComponent } from './realtime-delegation-card.component';\nimport { ParsedDelegationArtifact } from '../../services/delegation-result-parser';\n\n/*\n The unified, chronological live thread for the call overlay: caption bubbles\n * interleaved with delegation cards exactly where they happened.\n \n PURELY PRESENTATIONAL over {@link RealtimeSessionState} — the overlay shell owns the\n * state object (which merges the service streams once) and passes it here AND to the\n * activity rail, so there is exactly one copy of the per-CallID merge logic.\n \n Also renders the EPHEMERAL narration \"live note\": indented, muted, italic text under\n * the ACTIVE working card (latest narration only — replaced, never accumulated).\n /\n@Component({\n standalone: true,\n selector: 'mj-realtime-session-thread',\n imports: [CommonModule, RealtimeDelegationCardComponent],\n templateUrl: './realtime-session-thread.component.html',\n styleUrl: './realtime-session-thread.component.css'\n})\nexport class RealtimeSessionThreadComponent implements OnInit, AfterViewChecked, OnDestroy {\n @ViewChild('scrollAnchor') private scrollAnchor?: ElementRef<HTMLElement>;\n\n /* Display name of the agent (caption avatar / meta line). /\n @Input() AgentName = 'Sage';\n\n /\n Display name of the signed-in user for their turns — consistent with the main\n * chat's sender names, and ready for multi-user sessions where \"You\" stops meaning\n * anything. Hosts bind the current user's name; the default keeps old hosts working.\n /\n @Input() UserName = 'You';\n\n /* Shared live-session state, owned by the overlay shell. /\n @Input({ required: true }) State!: RealtimeSessionState;\n\n /* Whether to render caption bubbles (toggled by the controls' captions button). /\n @Input() ShowCaptions = true;\n\n /* Whether developer affordances on delegation cards are revealed (gear-gated). /\n @Input() DevMode = false;\n\n /* Re-emitted from a delegation card's dev \"Open run\" link (the delegated run's ID). /\n @Output() OpenRunRequested = new EventEmitter<string>();\n\n /* Re-emitted from a delegation card's \"View\" artifact chip (focuses the artifact's surface tab). /\n @Output() OpenArtifactRequested = new EventEmitter<ParsedDelegationArtifact>();\n\n /* Re-emitted from a WORKING delegation card's ✕ cancel affordance (the call's ID). /\n @Output() CancelRequested = new EventEmitter<string>();\n\n /* Item count at the last change notification, to auto-scroll only when the list grows. /\n private lastItemCount = 0;\n /* Drives auto-scroll: set whenever the list grows. /\n private pendingScroll = false;\n\n private changedSub?: Subscription;\n private cdr = inject(ChangeDetectorRef);\n\n ngOnInit(): void {\n this.changedSub = this.State.Changed$.subscribe(() => this.onStateChanged());\n this.lastItemCount = this.State.Items.length;\n }\n\n ngAfterViewChecked(): void {\n if (this.pendingScroll) {\n this.pendingScroll = false;\n this.scrollAnchor?.nativeElement.scrollIntoView({ behavior: 'smooth', block: 'end' });\n }\n }\n\n ngOnDestroy(): void {\n this.changedSub?.unsubscribe();\n }\n\n /* track fn for the @for over thread items. /\n public TrackItem(index: number, item: RealtimeThreadItem): string {\n switch (item.Kind) {\n case 'delegation': return `d:${item.Card.CallID}`;\n case 'divider': return `s:${index}`;\n default: return `c:${index}`;\n }\n }\n\n /* True when the live narration note should render under THIS delegation item. /\n public ShowsLiveNote(item: RealtimeThreadItem): boolean {\n return item.Kind === 'delegation'\n && !item.Card.Done\n && this.State.Narration !== null\n && item.Card.CallID === this.State.ActiveCallId;\n }\n\n /* Marks for check on every state change; auto-scrolls when the thread grew. */\n private onStateChanged(): void {\n if (this.State.Items.length > this.lastItemCount) {\n this.pendingScroll = true;\n }\n this.lastItemCount = this.State.Items.length;\n this.cdr.markForCheck();\n }\n}\n","<div class=\"thread\">\n @for (item of State.Items; track TrackItem($index, item)) {\n @switch (item.Kind) {\n @case ('caption') {\n @if (ShowCaptions) {\n <div class=\"turn\" [class.turn--user]=\"item.Role === 'User'\" [class.turn--agent]=\"item.Role === 'Assistant'\">\n <div class=\"turn-avatar\">{{ (item.Role === 'User' ? UserName : AgentName).charAt(0).toUpperCase() }}</div>\n <div class=\"turn-body\">\n <div class=\"turn-meta\">\n @if (item.Role === 'User') {\n <span class=\"typed-tag\">{{ UserName }}</span>\n } @else {\n {{ AgentName }} <span class=\"muted\">· voice</span>\n }\n </div>\n <div class=\"bubble\">{{ item.Text }}</div>\n </div>\n </div>\n }\n }\n @case ('divider') {\n <!-- Session-leg boundary: subtle rule marking a resume / chained leg -->\n <div class=\"thread-divider\" role=\"separator\">\n <span class=\"thread-divider__line\" aria-hidden=\"true\"></span>\n <span class=\"thread-divider__label\">\n <i [class]=\"item.Icon\" aria-hidden=\"true\"></i>\n {{ item.Label }}\n @if (item.At) {\n <span class=\"thread-divider__time\">· {{ item.At \| date:'MMM d, h:mm a' }}</span>\n }\n </span>\n @if (item.CloseReason) {\n <span class=\"thread-divider__chip\" title=\"Why the previous session leg ended\">{{ item.CloseReason }}</span>\n }\n <span class=\"thread-divider__line\" aria-hidden=\"true\"></span>\n </div>\n }\n @case ('delegation') {\n <div class=\"delegation-block\">\n <mj-realtime-delegation-card\n [Card]=\"item.Card\"\n [DevMode]=\"DevMode\"\n (OpenRunRequested)=\"OpenRunRequested.emit($event)\"\n (OpenArtifactRequested)=\"OpenArtifactRequested.emit($event)\"\n (CancelRequested)=\"CancelRequested.emit($event)\">\n </mj-realtime-delegation-card>\n @if (ShowsLiveNote(item)) {\n <!-- Ephemeral narration: latest only, never persisted, fades with completion -->\n <div class=\"live-note\" role=\"status\" aria-live=\"polite\">\n <i class=\"fa-solid fa-comment-dots\" aria-hidden=\"true\"></i>\n {{ State.Narration }}\n </div>\n }\n </div>\n }\n }\n } @empty {\n <div class=\"thread-empty\">The live transcript and any delegated work will appear here.</div>\n }\n <div #scrollAnchor></div>\n</div>\n"]}
1	+ {"version":3,"file":"realtime-session-thread.component.js","sourceRoot":"","sources":["../../../../src/lib/components/realtime/realtime-session-thread.component.ts","../../../../src/lib/components/realtime/realtime-session-thread.component.html"],"names":[],"mappings":"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","sourcesContent":["import {\n Component, EventEmitter, Input, Output, ElementRef, ViewChild, AfterViewChecked, OnInit, OnDestroy,\n ChangeDetectorRef, inject\n} from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { MarkdownModule } from '@memberjunction/ng-markdown';\nimport { Subscription } from 'rxjs';\nimport { RealtimeSessionState, RealtimeThreadItem } from './realtime-session-state';\nimport { RealtimeDelegationCardComponent } from './realtime-delegation-card.component';\nimport { ParsedDelegationArtifact } from '@memberjunction/realtime-runtime';\n\n/*\n The unified, chronological live thread for the call overlay: caption bubbles\n * interleaved with delegation cards exactly where they happened.\n \n PURELY PRESENTATIONAL over {@link RealtimeSessionState} — the overlay shell owns the\n * state object (which merges the service streams once) and passes it here AND to the\n * activity rail, so there is exactly one copy of the per-CallID merge logic.\n \n Also renders the EPHEMERAL narration \"live note\": indented, muted, italic text under\n * the ACTIVE working card (latest narration only — replaced, never accumulated).\n /\n@Component({\n standalone: true,\n selector: 'mj-realtime-session-thread',\n imports: [CommonModule, RealtimeDelegationCardComponent, MarkdownModule],\n templateUrl: './realtime-session-thread.component.html',\n styleUrl: './realtime-session-thread.component.css'\n})\nexport class RealtimeSessionThreadComponent implements OnInit, AfterViewChecked, OnDestroy {\n @ViewChild('scrollAnchor') private scrollAnchor?: ElementRef<HTMLElement>;\n\n /* Display name of the agent (caption avatar / meta line). /\n @Input() AgentName = 'Sage';\n\n /\n Display name of the signed-in user for their turns — consistent with the main\n * chat's sender names, and ready for multi-user sessions where \"You\" stops meaning\n * anything. Hosts bind the current user's name; the default keeps old hosts working.\n /\n @Input() UserName = 'You';\n\n /* Shared live-session state, owned by the overlay shell. /\n @Input({ required: true }) State!: RealtimeSessionState;\n\n /* Whether to render caption bubbles (toggled by the controls' captions button). /\n @Input() ShowCaptions = true;\n\n /* Whether developer affordances on delegation cards are revealed (gear-gated). /\n @Input() DevMode = false;\n\n /* Re-emitted from a delegation card's dev \"Open run\" link (the delegated run's ID). /\n @Output() OpenRunRequested = new EventEmitter<string>();\n\n /* Re-emitted from a delegation card's \"View\" artifact chip (focuses the artifact's surface tab). /\n @Output() OpenArtifactRequested = new EventEmitter<ParsedDelegationArtifact>();\n\n /* Re-emitted from a WORKING delegation card's ✕ cancel affordance (the call's ID). /\n @Output() CancelRequested = new EventEmitter<string>();\n\n /* Item count at the last change notification, to auto-scroll only when the list grows. /\n private lastItemCount = 0;\n /* Drives auto-scroll: set whenever the list grows. /\n private pendingScroll = false;\n\n private changedSub?: Subscription;\n private cdr = inject(ChangeDetectorRef, { optional: true });\n\n ngOnInit(): void {\n this.changedSub = this.State.Changed$.subscribe(() => this.onStateChanged());\n this.lastItemCount = this.State.Items.length;\n }\n\n ngAfterViewChecked(): void {\n if (this.pendingScroll) {\n this.pendingScroll = false;\n this.scrollAnchor?.nativeElement.scrollIntoView({ behavior: 'smooth', block: 'end' });\n }\n }\n\n ngOnDestroy(): void {\n this.changedSub?.unsubscribe();\n }\n\n /* track fn for the @for over thread items. /\n public TrackItem(index: number, item: RealtimeThreadItem): string {\n switch (item.Kind) {\n case 'delegation': return `d:${item.Card.CallID}`;\n case 'divider': return `s:${index}`;\n default: return `c:${index}`;\n }\n }\n\n /* True when the live narration note should render under THIS delegation item. /\n public ShowsLiveNote(item: RealtimeThreadItem): boolean {\n return item.Kind === 'delegation'\n && !item.Card.Done\n && this.State.Narration !== null\n && item.Card.CallID === this.State.ActiveCallId;\n }\n\n /* Set of item indices whose long text has been expanded by the user. /\n public ExpandedItems = new Set<number>();\n\n /\n Returns true when the caption text is considered a \"long blob\" (>280 chars or >4 lines)\n * that warrants height clamping and an expand/collapse toggle.\n /\n public IsLongText(text: string \| null \| undefined): boolean {\n if (!text) {\n return false;\n }\n return text.length > 280 \|\| text.split('\\n').length > 4;\n }\n\n /* Returns whether the caption item at the specified index is expanded. /\n public IsExpanded(index: number): boolean {\n return this.ExpandedItems.has(index);\n }\n\n /* Toggles expanded/collapsed state for the caption item at the given index. /\n public ToggleExpanded(index: number, event?: Event): void {\n if (event) {\n event.stopPropagation();\n }\n if (this.ExpandedItems.has(index)) {\n this.ExpandedItems.delete(index);\n } else {\n this.ExpandedItems.add(index);\n }\n this.cdr?.markForCheck();\n }\n\n /\n Prepares text for markdown rendering, restoring structure (headings, horizontal rules,\n * bullet items) if newlines were stripped by single-line input paste or speech-to-text.\n /\n public FormatMarkdownText(text: string \| null \| undefined): string {\n if (!text) {\n return '';\n }\n let cleaned = text;\n // Restore newlines before markdown headings on same line: \"Title ### Heading\" -> \"Title\\n\\n### Heading\"\n cleaned = cleaned.replace(/[ \\t]+(?:—\\s)?(#{1,6}[ \\t]+)/g, '\\n\\n$1');\n // Restore newlines around horizontal rules on same line: \"Text --- ##\" -> \"Text\\n\\n---\\n\\n##\"\n cleaned = cleaned.replace(/[ \\t]+(?:—\\s)?(---\|___\|\\\\\\)[ \\t]/g, '\\n\\n$1\\n\\n');\n // Restore newlines before bullet items on same line: \"around: - Item 1 - Item 2\" -> \"around:\\n- Item 1\\n- Item 2\"\n cleaned = cleaned.replace(/[ \\t]+-[ \\t]+(?=[A-Za-z0-9\\])/g, '\\n- ');\n return cleaned;\n }\n\n /** Marks for check on every state change; auto-scrolls when the thread grew. */\n private onStateChanged(): void {\n if (this.State.Items.length > this.lastItemCount) {\n this.pendingScroll = true;\n }\n this.lastItemCount = this.State.Items.length;\n this.cdr?.markForCheck();\n }\n}\n","<div class=\"thread\">\n @for (item of State.Items; track TrackItem($index, item)) {\n @switch (item.Kind) {\n @case ('caption') {\n @if (ShowCaptions) {\n <div class=\"turn\" [class.turn--user]=\"item.Role === 'User'\" [class.turn--agent]=\"item.Role === 'Assistant'\">\n <div class=\"turn-avatar\">{{ (item.Role === 'User' ? UserName : AgentName).charAt(0).toUpperCase() }}</div>\n <div class=\"turn-body\">\n <div class=\"turn-meta\">\n @if (item.Role === 'User') {\n <span class=\"typed-tag\">{{ UserName }}</span>\n } @else {\n {{ AgentName }} <span class=\"muted\">· voice</span>\n }\n </div>\n <div class=\"bubble\" [class.bubble--clamped]=\"IsLongText(item.Text) && !IsExpanded($index)\" [class.bubble--expanded]=\"IsLongText(item.Text) && IsExpanded($index)\">\n <div class=\"bubble-content\" [class.bubble-content--clamped]=\"IsLongText(item.Text) && !IsExpanded($index)\" [class.bubble-content--expanded]=\"IsLongText(item.Text) && IsExpanded($index)\">\n <mj-markdown [data]=\"FormatMarkdownText(item.Text)\" [enableCollapsibleHeadings]=\"true\"></mj-markdown>\n </div>\n @if (IsLongText(item.Text)) {\n <div class=\"bubble-actions\">\n <button\n type=\"button\"\n class=\"bubble-expand-btn\"\n (click)=\"ToggleExpanded($index, $event)\"\n [attr.aria-expanded]=\"IsExpanded($index)\">\n <span>{{ IsExpanded($index) ? 'Show less' : 'Show more' }}</span>\n <i class=\"fa-solid\" [class.fa-chevron-up]=\"IsExpanded($index)\" [class.fa-chevron-down]=\"!IsExpanded($index)\" aria-hidden=\"true\"></i>\n </button>\n </div>\n }\n </div>\n </div>\n </div>\n }\n }\n @case ('divider') {\n <!-- Session-leg boundary: subtle rule marking a resume / chained leg -->\n <div class=\"thread-divider\" role=\"separator\">\n <span class=\"thread-divider__line\" aria-hidden=\"true\"></span>\n <span class=\"thread-divider__label\">\n <i [class]=\"item.Icon\" aria-hidden=\"true\"></i>\n {{ item.Label }}\n @if (item.At) {\n <span class=\"thread-divider__time\">· {{ item.At \| date:'MMM d, h:mm a' }}</span>\n }\n </span>\n @if (item.CloseReason) {\n <span class=\"thread-divider__chip\" title=\"Why the previous session leg ended\">{{ item.CloseReason }}</span>\n }\n <span class=\"thread-divider__line\" aria-hidden=\"true\"></span>\n </div>\n }\n @case ('delegation') {\n <div class=\"delegation-block\">\n <mj-realtime-delegation-card\n [Card]=\"item.Card\"\n [DevMode]=\"DevMode\"\n (OpenRunRequested)=\"OpenRunRequested.emit($event)\"\n (OpenArtifactRequested)=\"OpenArtifactRequested.emit($event)\"\n (CancelRequested)=\"CancelRequested.emit($event)\">\n </mj-realtime-delegation-card>\n @if (ShowsLiveNote(item)) {\n <!-- Ephemeral narration: latest only, never persisted, fades with completion -->\n <div class=\"live-note\" role=\"status\" aria-live=\"polite\">\n <i class=\"fa-solid fa-comment-dots\" aria-hidden=\"true\"></i>\n {{ State.Narration }}\n </div>\n }\n </div>\n }\n }\n } @empty {\n <div class=\"thread-empty\">The live transcript and any delegated work will appear here.</div>\n }\n <div #scrollAnchor></div>\n</div>\n"]}

package/dist/lib/components/realtime/realtime-session-timeline-card.component.d.ts CHANGED Viewed

@@ -1,51 +1,67 @@
 import { EventEmitter } from '@angular/core';
-import { RealtimeSessionTimelineGroup, RealtimeSessionTimelineMeta } from '../../utils/realtime-session-timeline';
+import { type RealtimeSessionStatusChip, type RealtimeSessionTimelineGroup, type RealtimeSessionTimelineMeta } from '@memberjunction/conversations-runtime';
 import * as i0 from "@angular/core";
 /**
- * The ONE timeline element a realtime session collapses to in the standard conversation
- * message list (see `BuildConversationTimeline`): a visually distinct card at the
- * session's chronological position carrying the session identity (broadcast icon +
- * "Realtime session · <agent>"), its time range, a status / close-reason chip when
- * known, the visible-turn count, and a one-line preview of the last turn.
+ * The ONE timeline element a realtime (voice) session collapses to in the standard conversation
+ * message list (see `BuildConversationTimeline`).
  *
- * The card's **Open** button emits {@link OpenRequested} with the session id; the
- * message list bubbles it up so the chat area can host the existing SESSION REVIEW
- * overlay via `ConversationChatAreaComponent.OpenRealtimeSessionReview` (Resume /
- * Close live inside that overlay, unchanged).
+ * It is laid out like a chat message rather than a banner. The call icon sits in the avatar column,
+ * "Voice call with Sage" and the start time fill the header line, and a bubble carries the status,
+ * how long the call ran, how much was said and the last thing said. That keeps the conversation's
+ * margins and rhythm, where the old full-width card cut across them.
  *
- * Rendered DYNAMICALLY by `MessageListComponent` (same `createComponent` path the
- * message items use) — standalone by design, no module declaration needed.
+ * **Review call** (or clicking the bubble) emits {@link OpenRequested} with the session id. The
+ * message list bubbles it up so the chat area can host the existing SESSION REVIEW overlay via
+ * `ConversationChatAreaComponent.OpenRealtimeSessionReview` (Resume / Close live inside that
+ * overlay, unchanged).
+ *
+ * Rendered DYNAMICALLY by `MessageListComponent` (same `createComponent` path the message items
+ * use) — standalone by design, no module declaration needed.
  */
 export declare class RealtimeSessionTimelineCardComponent {
     /** The collapsed session block computed from the conversation's stamped detail rows. */
     Group: RealtimeSessionTimelineGroup;
-    /** Optional session-row enrichment (agent name / status / close reason); null degrades gracefully. */
+    /** Optional session-row enrichment (agent, user, status, start and close); null degrades gracefully. */
     Meta: RealtimeSessionTimelineMeta | null;
-    /** Display name of the signed-in user for the last-turn preview (matches the chat's sender names). */
+    /**
+     * The signed-in user's id. With it, the quoted line says "You" on the viewer's own call and names
+     * the caller on anyone else's, which matters in a conversation several people share.
+     */
+    CurrentUserID: string | null;
+    /**
+     * Label for a user's line when the host passes no `CurrentUserID`, and so the card can't tell
+     * whose call it was. With `CurrentUserID` set it isn't used: the line says "You", the caller's
+     * name, or "Caller" when the session row doesn't say whose call it was.
+     */
     UserName: string;
     /** Emitted with the `MJ: AI Agent Sessions.ID` when the user asks to open the session review. */
     OpenRequested: EventEmitter<string>;
-    /** Card title: "Realtime session · <agent>" when the agent name is known, else the generic label. */
+    /** "Voice call with <agent>" when the agent name is known, else "Voice call". */
     get Title(): string;
-    /** Whether the start and end fall on the same calendar day (drives the end-time format). */
-    get SameDayRange(): boolean;
-    /**
-     * The status chip label, or null to hide the chip entirely:
-     *  - Closed sessions show the close reason (`Error` / `Explicit` / `Janitor` / `Shutdown`)
-     *    humanized, falling back to "Closed" for legacy rows without one;
-     *  - Active sessions show "Live"; Idle shows "Idle";
-     *  - no meta (lookup unavailable) → no chip.
-     */
+    /** When the call started, shown in the header the way a message shows its time. */
+    get StartedAt(): Date | null;
+    /** The status label ("Live", "Ended", "Timed out", …), or null to hide the status entirely. */
     get StatusChip(): string | null;
-    /** Whether the chip represents an error close (drives the error chip styling). */
+    /** What the status means, for styling; null when there is no status to show. */
+    get StatusTone(): RealtimeSessionStatusChip['Tone'] | null;
+    /** Whether the call ended in an error (drives the error styling). */
     get IsErrorChip(): boolean;
-    /** Whether the chip represents a live session (drives the live chip styling). */
+    /** Whether the call is still live (drives the live styling). */
     get IsLiveChip(): boolean;
-    /** Emits {@link OpenRequested} for the whole-card / Open-button click. */
-    Open(event?: MouseEvent): void;
-    /** Human label for the session's close reason ("Closed" when the column is null/unknown). */
-    private closeReasonLabel;
+    /** How long the call ran ("Under a minute", "12 min"), or null while live or unmeasurable. */
+    get DurationLabel(): string | null;
+    /** "No messages", "1 message", "12 messages". */
+    get MessageCountLabel(): string;
+    /** Who said the quoted line: the agent by name, "You", or another caller by name. */
+    get SpeakerLabel(): string;
+    /** The button's label. A live call is still going, so it is viewed rather than reviewed. */
+    get ActionLabel(): string;
+    /** One sentence a screen reader announces for the whole row. */
+    get AccessibleSummary(): string;
+    /** Emits {@link OpenRequested} for a click on the bubble or its button. */
+    Open(event?: Event): void;
+    private get status();
     static ɵfac: i0.ɵɵFactoryDeclaration<RealtimeSessionTimelineCardComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<RealtimeSessionTimelineCardComponent, "mj-realtime-session-timeline-card", never, { "Group": { "alias": "Group"; "required": true; }; "Meta": { "alias": "Meta"; "required": false; }; "UserName": { "alias": "UserName"; "required": false; }; }, { "OpenRequested": "OpenRequested"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<RealtimeSessionTimelineCardComponent, "mj-realtime-session-timeline-card", never, { "Group": { "alias": "Group"; "required": true; }; "Meta": { "alias": "Meta"; "required": false; }; "CurrentUserID": { "alias": "CurrentUserID"; "required": false; }; "UserName": { "alias": "UserName"; "required": false; }; }, { "OpenRequested": "OpenRequested"; }, never, never, true, never>;
 }
 //# sourceMappingURL=realtime-session-timeline-card.component.d.ts.map

package/dist/lib/components/realtime/realtime-session-timeline-card.component.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"realtime-session-timeline-card.component.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/realtime/realtime-session-timeline-card.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,YAAY,EAAiB,MAAM,eAAe,CAAC;AAEvE,OAAO,~~EAAE~~,4BAA4B,~~EAAE~~,2BAA2B,~~EAAE~~,MAAM,uCAAuC,CAAC;;~~AAElH;;;;;;;;;;;;;;GAcG~~;AACH,qBAOa,oCAAoC;IAC/C,wFAAwF;IAC7D,KAAK,EAAG,4BAA4B,CAAC;IAEhE,~~sGAAsG~~;~~IAC7F~~,IAAI,EAAE,2BAA2B,GAAG,IAAI,CAAQ;IAEzD,~~sGAAsG~~;~~IAC7F~~,QAAQ,SAAS;IAE1B,iGAAiG;IACvF,aAAa,uBAA8B;~~IAErD~~,~~qGAAqG~~;~~IACrG~~,IAAW,KAAK,IAAI,MAAM,~~CAGzB~~;IAED,~~4FAA4F~~;~~IAC5F~~,IAAW,~~YAAY~~,IAAI,~~OAAO~~,~~CAOjC~~;IAED~~;;;;;;OAMG~~;~~IACH~~,IAAW,UAAU,IAAI,MAAM,GAAG,IAAI,~~CAWrC~~;IAED,~~kFAAkF~~;~~IAClF~~,IAAW,WAAW,IAAI,OAAO,CAEhC;IAED,~~iFAAiF~~;~~IACjF~~,IAAW,UAAU,IAAI,OAAO,CAE/B;IAED,~~0EAA0E~~;~~IACnE~~,IAAI,CAAC,KAAK,CAAC,EAAE,~~UAAU~~,GAAG,IAAI;~~IAQrC~~,~~6FAA6F;IAC7F,~~OAAO,~~CAAC~~,~~gBAAgB~~;~~yCArEb~~,oCAAoC;2CAApC,oCAAoC;~~CAmFhD~~"}
1	+ {"version":3,"file":"realtime-session-timeline-card.component.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/realtime/realtime-session-timeline-card.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,YAAY,EAAiB,MAAM,eAAe,CAAC;AAEvE,OAAO,EAOL,KAAK,yBAAyB,EAC9B,KAAK,4BAA4B,EACjC,KAAK,2BAA2B,EACjC,MAAM,uCAAuC,CAAC;;AAG/C;;;;;;;;;;;;;;;;GAgBG;AACH,qBAOa,oCAAoC;IAC/C,wFAAwF;IAC7D,KAAK,EAAG,4BAA4B,CAAC;IAEhE,wGAAwG;IAC/F,IAAI,EAAE,2BAA2B,GAAG,IAAI,CAAQ;IAEzD;;;OAGG;IACM,aAAa,EAAE,MAAM,GAAG,IAAI,CAAQ;IAE7C;;;;OAIG;IACM,QAAQ,SAAS;IAE1B,iGAAiG;IACvF,aAAa,uBAA8B;IAQrD,iFAAiF;IACjF,IAAW,KAAK,IAAI,MAAM,CAEzB;IAED,mFAAmF;IACnF,IAAW,SAAS,IAAI,IAAI,GAAG,IAAI,CAElC;IAED,+FAA+F;IAC/F,IAAW,UAAU,IAAI,MAAM,GAAG,IAAI,CAErC;IAED,gFAAgF;IAChF,IAAW,UAAU,IAAI,yBAAyB,CAAC,MAAM,CAAC,GAAG,IAAI,CAEhE;IAED,qEAAqE;IACrE,IAAW,WAAW,IAAI,OAAO,CAEhC;IAED,gEAAgE;IAChE,IAAW,UAAU,IAAI,OAAO,CAE/B;IAED,8FAA8F;IAC9F,IAAW,aAAa,IAAI,MAAM,GAAG,IAAI,CAExC;IAED,iDAAiD;IACjD,IAAW,iBAAiB,IAAI,MAAM,CAErC;IAED,qFAAqF;IACrF,IAAW,YAAY,IAAI,MAAM,CAEhC;IAED,4FAA4F;IAC5F,IAAW,WAAW,IAAI,MAAM,CAE/B;IAED,gEAAgE;IAChE,IAAW,iBAAiB,IAAI,MAAM,CAErC;IAED,2EAA2E;IACpE,IAAI,CAAC,KAAK,CAAC,EAAE,KAAK,GAAG,IAAI;IAQhC,OAAO,KAAK,MAAM,GAEjB;yCA/FU,oCAAoC;2CAApC,oCAAoC;CAgGhD"}