@memberjunction/ng-conversations 6.2.0-edge.0 → 6.2.0-edge.2

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

@@ -1,43 +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. */
+    /** 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;
+    /** 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

@@ -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,EACL,4BAA4B,EAC5B,2BAA2B,EAI5B,MAAM,uCAAuC,CAAC;;AAE/C;;;;;;;;;;;;;;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;IAQrD,qGAAqG;IACrG,IAAW,KAAK,IAAI,MAAM,CAEzB;IAED,4FAA4F;IAC5F,IAAW,YAAY,IAAI,OAAO,CAEjC;IAED,gEAAgE;IAChE,IAAW,UAAU,IAAI,MAAM,GAAG,IAAI,CAErC;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;yCA7C1B,oCAAoC;2CAApC,oCAAoC;CAqDhD"}
+{"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"}

package/dist/lib/components/realtime/realtime-session-timeline-card.component.js

@@ -1,105 +1,138 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { DatePipe } from '@angular/common';
-import { SessionCardIsSameDayRange, SessionCardStatusChip, SessionCardTitle } from '../../utils/realtime-session-timeline';
+import { SessionCardDurationLabel, SessionCardMessageCountLabel, SessionCardSpeakerLabel, SessionCardStartedAt, SessionCardStatusChip, SessionCardTitle } from '@memberjunction/conversations-runtime';
+import { MJButtonDirective } from '@memberjunction/ng-ui-components';
 import * as i0 from "@angular/core";
 function RealtimeSessionTimelineCardComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵdomElementStart(0, "span", 12);
-    i0.ɵɵtext(1);
-    i0.ɵɵdomElementEnd();
-} if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵclassProp("session-card__chip--error", ctx_r0.IsErrorChip)("session-card__chip--live", ctx_r0.IsLiveChip);
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(ctx_r0.StatusChip);
-} }
-function RealtimeSessionTimelineCardComponent_Conditional_9_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵdomElement(0, "i", 15);
+    i0.ɵɵelementStart(0, "span", 6);
     i0.ɵɵtext(1);
     i0.ɵɵpipe(2, "date");
+    i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(2);
+    const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind2(2, 1, ctx_r0.Group.EndedAt, ctx_r0.SameDayRange ? "h:mm a" : "MMM d, h:mm a"), " ");
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(2, 1, ctx_r0.StartedAt, "short"));
 } }
 function RealtimeSessionTimelineCardComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵdomElementStart(0, "span", 13);
-    i0.ɵɵtext(1);
-    i0.ɵɵpipe(2, "date");
-    i0.ɵɵconditionalCreate(3, RealtimeSessionTimelineCardComponent_Conditional_9_Conditional_3_Template, 3, 4);
-    i0.ɵɵdomElementEnd();
-    i0.ɵɵdomElementStart(4, "span", 14);
-    i0.ɵɵtext(5, "\u00B7");
-    i0.ɵɵdomElementEnd();
+    i0.ɵɵelementStart(0, "p", 8)(1, "span", 16);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span", 17);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind2(2, 2, ctx_r0.Group.StartedAt, "MMM d, h:mm a"), " ");
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r0.Group.EndedAt && ctx_r0.Group.EndedAt !== ctx_r0.Group.StartedAt ? 3 : -1);
+    i0.ɵɵtextInterpolate(ctx_r0.SpeakerLabel);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r0.Group.LastTurnPreview);
 } }
 function RealtimeSessionTimelineCardComponent_Conditional_12_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵdomElementStart(0, "div", 9)(1, "span", 16);
+    i0.ɵɵelementStart(0, "span", 11);
+    i0.ɵɵelement(1, "span", 18);
     i0.ɵɵtext(2);
-    i0.ɵɵdomElementEnd();
-    i0.ɵɵtext(3);
-    i0.ɵɵdomElementEnd();
+    i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵattribute("data-tone", ctx_r0.StatusTone);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1("", ctx_r0.Group.LastTurnRole === "User" ? ctx_r0.UserName : "Agent", ":");
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r0.Group.LastTurnPreview, " ");
+    i0.ɵɵtextInterpolate1("", ctx_r0.StatusChip, " ");
+} }
+function RealtimeSessionTimelineCardComponent_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 12);
+    i0.ɵɵelement(1, "i", 19);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1("", ctx_r0.DurationLabel, " ");
 } }
 /**
- * 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`).
+ *
+ * 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.
  *
- * 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).
+ * **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.
+ * Rendered DYNAMICALLY by `MessageListComponent` (same `createComponent` path the message items
+ * use) — standalone by design, no module declaration needed.
  */
 export class RealtimeSessionTimelineCardComponent {
     /** The collapsed session block computed from the conversation's stamped detail rows. */
     Group;
-    /** 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 = 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 = 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 = 'You';
     /** Emitted with the `MJ: AI Agent Sessions.ID` when the user asks to open the session review. */
     OpenRequested = new EventEmitter();
     /*
-     * Title / chip / range derivations live in `@memberjunction/conversations-runtime` alongside the
-     * grouping pass, because the React Native thread renders the same card and must not re-decide
-     * what "Timed out" means. These getters are the Angular binding surface over them, nothing more.
+     * Every label below comes from `@memberjunction/conversations-runtime`, because the React Native
+     * thread renders the same card and must not re-decide what "Timed out" or "12 min" means. These
+     * getters are the Angular binding surface over those helpers, nothing more.
      */
-    /** 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() {
         return SessionCardTitle(this.Meta);
     }
-    /** Whether the start and end fall on the same calendar day (drives the end-time format). */
-    get SameDayRange() {
-        return SessionCardIsSameDayRange(this.Group);
+    /** When the call started, shown in the header the way a message shows its time. */
+    get StartedAt() {
+        return SessionCardStartedAt(this.Group, this.Meta);
     }
-    /** The status chip label, or null to hide the chip entirely. */
+    /** The status label ("Live", "Ended", "Timed out", …), or null to hide the status entirely. */
     get StatusChip() {
-        return SessionCardStatusChip(this.Meta)?.Label ?? null;
+        return this.status?.Label ?? 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() {
+        return this.status?.Tone ?? null;
+    }
+    /** Whether the call ended in an error (drives the error styling). */
     get IsErrorChip() {
-        return SessionCardStatusChip(this.Meta)?.Tone === 'error';
+        return this.StatusTone === 'error';
     }
-    /** Whether the chip represents a live session (drives the live chip styling). */
+    /** Whether the call is still live (drives the live styling). */
     get IsLiveChip() {
-        return SessionCardStatusChip(this.Meta)?.Tone === 'live';
+        return this.StatusTone === 'live';
+    }
+    /** How long the call ran ("Under a minute", "12 min"), or null while live or unmeasurable. */
+    get DurationLabel() {
+        return SessionCardDurationLabel(this.Group, this.Meta);
+    }
+    /** "No messages", "1 message", "12 messages". */
+    get MessageCountLabel() {
+        return SessionCardMessageCountLabel(this.Group);
+    }
+    /** Who said the quoted line: the agent by name, "You", or another caller by name. */
+    get SpeakerLabel() {
+        return SessionCardSpeakerLabel(this.Group?.LastTurnRole ?? null, this.Meta, this.CurrentUserID, this.UserName);
     }
-    /** Emits {@link OpenRequested} for the whole-card / Open-button click. */
+    /** The button's label. A live call is still going, so it is viewed rather than reviewed. */
+    get ActionLabel() {
+        return this.IsLiveChip ? 'View call' : 'Review call';
+    }
+    /** One sentence a screen reader announces for the whole row. */
+    get AccessibleSummary() {
+        return [this.Title, this.StatusChip, this.DurationLabel, this.MessageCountLabel].filter(Boolean).join(', ');
+    }
+    /** Emits {@link OpenRequested} for a click on the bubble or its button. */
     Open(event) {
         event?.stopPropagation();
         const sessionId = this.Group?.SessionID;
@@ -107,57 +140,68 @@ export class RealtimeSessionTimelineCardComponent {
             this.OpenRequested.emit(sessionId);
         }
     }
+    get status() {
+        return SessionCardStatusChip(this.Meta);
+    }
     static ɵfac = function RealtimeSessionTimelineCardComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || RealtimeSessionTimelineCardComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: RealtimeSessionTimelineCardComponent, selectors: [["mj-realtime-session-timeline-card"]], inputs: { Group: "Group", Meta: "Meta", UserName: "UserName" }, outputs: { OpenRequested: "OpenRequested" }, decls: 17, vars: 7, consts: [["role", "group", 1, "session-card", 3, "click"], ["aria-hidden", "true", 1, "session-card__icon"], [1, "fa-solid", "fa-tower-broadcast"], [1, "session-card__body"], [1, "session-card__head"], [1, "session-card__title"], [1, "session-card__chip", 3, "session-card__chip--error", "session-card__chip--live"], [1, "session-card__meta"], [1, "session-card__turns"], [1, "session-card__preview"], ["type", "button", "title", "Open this realtime session in review mode", 1, "session-card__open", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-up-right-from-square"], [1, "session-card__chip"], [1, "session-card__range"], ["aria-hidden", "true", 1, "session-card__dot"], ["aria-hidden", "true", 1, "fa-solid", "fa-arrow-right-long", "session-card__range-arrow"], [1, "session-card__preview-role"]], template: function RealtimeSessionTimelineCardComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵdomElementStart(0, "div", 0);
-            i0.ɵɵdomListener("click", function RealtimeSessionTimelineCardComponent_Template_div_click_0_listener($event) { return ctx.Open($event); });
-            i0.ɵɵdomElementStart(1, "div", 1);
-            i0.ɵɵdomElement(2, "i", 2);
-            i0.ɵɵdomElementEnd();
-            i0.ɵɵdomElementStart(3, "div", 3)(4, "div", 4)(5, "span", 5);
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: RealtimeSessionTimelineCardComponent, selectors: [["mj-realtime-session-timeline-card"]], inputs: { Group: "Group", Meta: "Meta", CurrentUserID: "CurrentUserID", UserName: "UserName" }, outputs: { OpenRequested: "OpenRequested" }, decls: 19, vars: 16, consts: [["role", "group", 1, "call"], ["aria-hidden", "true", 1, "call__icon"], [1, "fa-solid"], [1, "call__content"], [1, "call__header"], [1, "call__title"], [1, "call__time"], [1, "call__bubble", 3, "click"], [1, "call__quote"], [1, "call__footer"], [1, "call__facts"], [1, "call__status"], [1, "call__fact", "call__duration"], [1, "call__fact", "call__count"], ["aria-hidden", "true", 1, "fa-regular", "fa-comment"], ["type", "button", "mjButton", "", "variant", "secondary", "size", "sm", 1, "call__open", 3, "click"], [1, "call__speaker"], [1, "call__quote-text"], ["aria-hidden", "true", 1, "call__status-dot"], ["aria-hidden", "true", 1, "fa-regular", "fa-clock"]], template: function RealtimeSessionTimelineCardComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1);
+            i0.ɵɵelement(2, "i", 2);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(3, "div", 3)(4, "div", 4)(5, "span", 5);
             i0.ɵɵtext(6);
-            i0.ɵɵdomElementEnd();
-            i0.ɵɵconditionalCreate(7, RealtimeSessionTimelineCardComponent_Conditional_7_Template, 2, 5, "span", 6);
-            i0.ɵɵdomElementEnd();
-            i0.ɵɵdomElementStart(8, "div", 7);
-            i0.ɵɵconditionalCreate(9, RealtimeSessionTimelineCardComponent_Conditional_9_Template, 6, 5);
-            i0.ɵɵdomElementStart(10, "span", 8);
-            i0.ɵɵtext(11);
-            i0.ɵɵdomElementEnd()();
-            i0.ɵɵconditionalCreate(12, RealtimeSessionTimelineCardComponent_Conditional_12_Template, 4, 2, "div", 9);
-            i0.ɵɵdomElementEnd();
-            i0.ɵɵdomElementStart(13, "button", 10);
-            i0.ɵɵdomListener("click", function RealtimeSessionTimelineCardComponent_Template_button_click_13_listener($event) { return ctx.Open($event); });
-            i0.ɵɵdomElement(14, "i", 11);
-            i0.ɵɵdomElementStart(15, "span");
-            i0.ɵɵtext(16, "Open");
-            i0.ɵɵdomElementEnd()()();
+            i0.ɵɵelementEnd();
+            i0.ɵɵconditionalCreate(7, RealtimeSessionTimelineCardComponent_Conditional_7_Template, 3, 4, "span", 6);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(8, "div", 7);
+            i0.ɵɵlistener("click", function RealtimeSessionTimelineCardComponent_Template_div_click_8_listener($event) { return ctx.Open($event); });
+            i0.ɵɵconditionalCreate(9, RealtimeSessionTimelineCardComponent_Conditional_9_Template, 5, 2, "p", 8);
+            i0.ɵɵelementStart(10, "div", 9)(11, "div", 10);
+            i0.ɵɵconditionalCreate(12, RealtimeSessionTimelineCardComponent_Conditional_12_Template, 3, 2, "span", 11);
+            i0.ɵɵconditionalCreate(13, RealtimeSessionTimelineCardComponent_Conditional_13_Template, 3, 1, "span", 12);
+            i0.ɵɵelementStart(14, "span", 13);
+            i0.ɵɵelement(15, "i", 14);
+            i0.ɵɵtext(16);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(17, "button", 15);
+            i0.ɵɵlistener("click", function RealtimeSessionTimelineCardComponent_Template_button_click_17_listener($event) { return ctx.Open($event); });
+            i0.ɵɵtext(18);
+            i0.ɵɵelementEnd()()()()();
         } if (rf & 2) {
-            i0.ɵɵattribute("aria-label", ctx.Title);
-            i0.ɵɵadvance(6);
+            i0.ɵɵclassProp("call--live", ctx.IsLiveChip)("call--error", ctx.IsErrorChip);
+            i0.ɵɵattribute("aria-label", ctx.AccessibleSummary);
+            i0.ɵɵadvance(2);
+            i0.ɵɵclassProp("fa-phone", !ctx.IsErrorChip)("fa-phone-slash", ctx.IsErrorChip);
+            i0.ɵɵadvance(4);
             i0.ɵɵtextInterpolate(ctx.Title);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.StatusChip ? 7 : -1);
+            i0.ɵɵconditional(ctx.StartedAt ? 7 : -1);
             i0.ɵɵadvance(2);
-            i0.ɵɵconditional(ctx.Group.StartedAt ? 9 : -1);
-            i0.ɵɵadvance(2);
-            i0.ɵɵtextInterpolate2("", ctx.Group.TurnCount, " ", ctx.Group.TurnCount === 1 ? "turn" : "turns");
+            i0.ɵɵconditional(ctx.Group.LastTurnPreview ? 9 : -1);
+            i0.ɵɵadvance(3);
+            i0.ɵɵconditional(ctx.StatusChip ? 12 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.Group.LastTurnPreview ? 12 : -1);
-        } }, dependencies: [DatePipe], styles: ["[_nghost-%COMP%] {\n  display: block;\n  margin: 12px 0;\n}\n\n\n\n.session-card[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px 16px;\n  border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 30%, var(--mj-border-default));\n  border-left: 3px solid var(--mj-brand-primary);\n  border-radius: var(--mj-radius-lg, 12px);\n  background: color-mix(in srgb, var(--mj-brand-primary) 6%, var(--mj-bg-surface));\n  cursor: pointer;\n  transition: background-color 0.15s ease, border-color 0.15s ease;\n}\n.session-card[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 45%, var(--mj-border-default));\n}\n\n.session-card__icon[_ngcontent-%COMP%] {\n  width: 36px;\n  height: 36px;\n  border-radius: 50%;\n  display: grid;\n  place-items: center;\n  flex-shrink: 0;\n  font-size: 15px;\n  color: var(--mj-text-inverse);\n  background: var(--mj-brand-primary);\n}\n\n.session-card__body[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n}\n\n.session-card__head[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  min-width: 0;\n}\n.session-card__title[_ngcontent-%COMP%] {\n  font-weight: 700;\n  font-size: 13.5px;\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.session-card__chip[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n  font-size: 11px;\n  font-weight: 600;\n  line-height: 1;\n  padding: 3px 8px;\n  border-radius: var(--mj-radius-full, 999px);\n  color: var(--mj-text-secondary);\n  background: var(--mj-bg-surface-sunken);\n  border: 1px solid var(--mj-border-subtle);\n}\n.session-card__chip--error[_ngcontent-%COMP%] {\n  color: var(--mj-status-error-text);\n  background: var(--mj-status-error-bg);\n  border-color: var(--mj-status-error-border);\n}\n.session-card__chip--live[_ngcontent-%COMP%] {\n  color: var(--mj-status-success-text);\n  background: var(--mj-status-success-bg);\n  border-color: var(--mj-status-success-border);\n}\n\n.session-card__meta[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  margin-top: 3px;\n  font-size: 12px;\n  color: var(--mj-text-muted);\n}\n.session-card__range-arrow[_ngcontent-%COMP%] {\n  font-size: 10px;\n  margin: 0 3px;\n}\n\n.session-card__preview[_ngcontent-%COMP%] {\n  margin-top: 5px;\n  font-size: 12.5px;\n  color: var(--mj-text-secondary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.session-card__preview-role[_ngcontent-%COMP%] {\n  font-weight: 600;\n  color: var(--mj-text-muted);\n}\n\n.session-card__open[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  flex-shrink: 0;\n  padding: 6px 12px;\n  font-size: 12.5px;\n  font-weight: 600;\n  border-radius: var(--mj-radius-md, 8px);\n  border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 45%, transparent);\n  background: var(--mj-bg-surface);\n  color: var(--mj-brand-primary);\n  cursor: pointer;\n  transition: background-color 0.15s ease, color 0.15s ease;\n}\n.session-card__open[_ngcontent-%COMP%]:hover {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n}"] });
+            i0.ɵɵconditional(ctx.DurationLabel ? 13 : -1);
+            i0.ɵɵadvance(3);
+            i0.ɵɵtextInterpolate1("", ctx.MessageCountLabel, " ");
+            i0.ɵɵadvance(2);
+            i0.ɵɵtextInterpolate1(" ", ctx.ActionLabel, " ");
+        } }, dependencies: [MJButtonDirective, DatePipe], styles: ["\n\n\n\n\n\n\n[_nghost-%COMP%] {\n  display: block;\n}\n\n.call[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 12px;\n  padding: 12px 24px;\n}\n\n\n\n.call__icon[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n  display: grid;\n  place-items: center;\n  width: 36px;\n  height: 36px;\n  border-radius: 8px;\n  font-size: 15px;\n  color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mj-brand-primary) 22%, transparent);\n}\n\n.call--live[_ngcontent-%COMP%]   .call__icon[_ngcontent-%COMP%] {\n  color: var(--mj-text-inverse);\n  background: var(--mj-status-success);\n  box-shadow: none;\n  animation: _ngcontent-%COMP%_call-ring 2s ease-out infinite;\n}\n\n.call--error[_ngcontent-%COMP%]   .call__icon[_ngcontent-%COMP%] {\n  color: var(--mj-status-error-text);\n  background: var(--mj-status-error-bg);\n  box-shadow: inset 0 0 0 1px var(--mj-status-error-border);\n}\n\n.call__content[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n}\n\n\n.call__header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: baseline;\n  gap: 8px;\n  min-width: 0;\n  margin-bottom: 6px;\n  font-size: 13px;\n}\n\n.call__title[_ngcontent-%COMP%] {\n  min-width: 0;\n  overflow: hidden;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.call__time[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n  font-size: 12px;\n  color: var(--mj-text-muted);\n}\n\n\n\n.call__bubble[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  box-sizing: border-box;\n  width: fit-content;\n  min-width: min(340px, 100%);\n  max-width: min(560px, 100%);\n  padding: 12px 14px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px 12px 12px 12px;\n  background: var(--mj-bg-surface);\n  box-shadow: var(--mj-shadow-sm);\n  cursor: pointer;\n  transition: border-color var(--mj-transition-fast), box-shadow var(--mj-transition-fast);\n}\n\n.call__bubble[_ngcontent-%COMP%]:hover {\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 35%, var(--mj-border-default));\n  box-shadow: var(--mj-shadow-md);\n}\n\n\n.call__quote[_ngcontent-%COMP%] {\n  display: -webkit-box;\n  margin: 0;\n  padding-left: 10px;\n  overflow: hidden;\n  border-left: 2px solid color-mix(in srgb, var(--mj-brand-primary) 35%, var(--mj-border-default));\n  font-size: 13px;\n  line-height: 1.5;\n  color: var(--mj-text-secondary);\n  overflow-wrap: anywhere;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  line-clamp: 2;\n}\n\n.call__speaker[_ngcontent-%COMP%] {\n  margin-right: 6px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.call__footer[_ngcontent-%COMP%] {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px 16px;\n}\n\n.call__facts[_ngcontent-%COMP%] {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 6px 14px;\n  font-size: 12px;\n  color: var(--mj-text-muted);\n}\n\n.call__fact[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  white-space: nowrap;\n}\n\n.call__fact[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 11px;\n}\n\n\n.call__status[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 2px 9px 2px 8px;\n  border-radius: var(--mj-radius-full);\n  font-size: 11.5px;\n  font-weight: 600;\n  line-height: 1.5;\n  white-space: nowrap;\n  color: var(--mj-text-secondary);\n  \n  background: color-mix(in srgb, var(--mj-text-primary) 7%, transparent);\n}\n\n.call__status-dot[_ngcontent-%COMP%] {\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  background: currentColor;\n  opacity: 0.7;\n}\n\n.call__status[data-tone='live'][_ngcontent-%COMP%] {\n  color: var(--mj-status-success-text);\n  background: var(--mj-status-success-bg);\n}\n\n.call__status[data-tone='live'][_ngcontent-%COMP%]   .call__status-dot[_ngcontent-%COMP%] {\n  background: var(--mj-status-success);\n  opacity: 1;\n  animation: _ngcontent-%COMP%_call-pulse 1.6s ease-in-out infinite;\n}\n\n.call__status[data-tone='idle'][_ngcontent-%COMP%] {\n  color: var(--mj-status-info-text);\n  background: var(--mj-status-info-bg);\n}\n\n.call__status[data-tone='error'][_ngcontent-%COMP%] {\n  color: var(--mj-status-error-text);\n  background: var(--mj-status-error-bg);\n}\n\n@keyframes _ngcontent-%COMP%_call-pulse {\n  0%,\n  100% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.35;\n  }\n}\n\n@keyframes _ngcontent-%COMP%_call-ring {\n  0% {\n    box-shadow: 0 0 0 0 color-mix(in srgb, var(--mj-status-success) 55%, transparent);\n  }\n  100% {\n    box-shadow: 0 0 0 8px color-mix(in srgb, var(--mj-status-success) 0%, transparent);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .call--live[_ngcontent-%COMP%]   .call__icon[_ngcontent-%COMP%], \n   .call__status[data-tone='live'][_ngcontent-%COMP%]   .call__status-dot[_ngcontent-%COMP%] {\n    animation: none;\n  }\n}\n\n\n@media (max-width: 768px) {\n  .call[_ngcontent-%COMP%] {\n    gap: 8px;\n    padding: 10px 12px;\n  }\n\n  .call__icon[_ngcontent-%COMP%] {\n    width: 32px;\n    height: 32px;\n    font-size: 14px;\n  }\n\n  .call__title[_ngcontent-%COMP%] {\n    font-size: 12px;\n  }\n\n  .call__time[_ngcontent-%COMP%] {\n    font-size: 11px;\n  }\n}\n\n@media (max-width: 480px) {\n  .call[_ngcontent-%COMP%] {\n    gap: 6px;\n    padding: 8px;\n  }\n\n  .call__icon[_ngcontent-%COMP%] {\n    width: 28px;\n    height: 28px;\n    border-radius: 6px;\n    font-size: 12px;\n  }\n\n  .call__title[_ngcontent-%COMP%] {\n    font-size: 11px;\n  }\n\n  .call__time[_ngcontent-%COMP%] {\n    font-size: 10px;\n  }\n\n  .call__bubble[_ngcontent-%COMP%] {\n    min-width: 0;\n    width: 100%;\n  }\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(RealtimeSessionTimelineCardComponent, [{
         type: Component,
-        args: [{ standalone: true, selector: 'mj-realtime-session-timeline-card', imports: [DatePipe], template: "<div class=\"session-card\" role=\"group\" [attr.aria-label]=\"Title\" (click)=\"Open($event)\">\n  <div class=\"session-card__icon\" aria-hidden=\"true\">\n    <i class=\"fa-solid fa-tower-broadcast\"></i>\n  </div>\n\n  <div class=\"session-card__body\">\n    <div class=\"session-card__head\">\n      <span class=\"session-card__title\">{{ Title }}</span>\n      @if (StatusChip) {\n        <span class=\"session-card__chip\"\n              [class.session-card__chip--error]=\"IsErrorChip\"\n              [class.session-card__chip--live]=\"IsLiveChip\">{{ StatusChip }}</span>\n      }\n    </div>\n\n    <div class=\"session-card__meta\">\n      @if (Group.StartedAt) {\n        <span class=\"session-card__range\">\n          {{ Group.StartedAt | date:'MMM d, h:mm a' }}\n          @if (Group.EndedAt && Group.EndedAt !== Group.StartedAt) {\n            <i class=\"fa-solid fa-arrow-right-long session-card__range-arrow\" aria-hidden=\"true\"></i>\n            {{ Group.EndedAt | date:(SameDayRange ? 'h:mm a' : 'MMM d, h:mm a') }}\n          }\n        </span>\n        <span class=\"session-card__dot\" aria-hidden=\"true\">\u00B7</span>\n      }\n      <span class=\"session-card__turns\">{{ Group.TurnCount }} {{ Group.TurnCount === 1 ? 'turn' : 'turns' }}</span>\n    </div>\n\n    @if (Group.LastTurnPreview) {\n      <div class=\"session-card__preview\">\n        <span class=\"session-card__preview-role\">{{ Group.LastTurnRole === 'User' ? UserName : 'Agent' }}:</span>\n        {{ Group.LastTurnPreview }}\n      </div>\n    }\n  </div>\n\n  <button type=\"button\" class=\"session-card__open\" (click)=\"Open($event)\"\n          title=\"Open this realtime session in review mode\">\n    <i class=\"fa-solid fa-up-right-from-square\" aria-hidden=\"true\"></i>\n    <span>Open</span>\n  </button>\n</div>\n", styles: [":host {\n  display: block;\n  margin: 12px 0;\n}\n\n/* A visually distinct block \u2014 clearly NOT a chat bubble: full-row card with a\n   brand-tinted broadcast badge, hover affordance, and an explicit Open button. */\n.session-card {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px 16px;\n  border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 30%, var(--mj-border-default));\n  border-left: 3px solid var(--mj-brand-primary);\n  border-radius: var(--mj-radius-lg, 12px);\n  background: color-mix(in srgb, var(--mj-brand-primary) 6%, var(--mj-bg-surface));\n  cursor: pointer;\n  transition: background-color 0.15s ease, border-color 0.15s ease;\n}\n.session-card:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 45%, var(--mj-border-default));\n}\n\n.session-card__icon {\n  width: 36px;\n  height: 36px;\n  border-radius: 50%;\n  display: grid;\n  place-items: center;\n  flex-shrink: 0;\n  font-size: 15px;\n  color: var(--mj-text-inverse);\n  background: var(--mj-brand-primary);\n}\n\n.session-card__body {\n  flex: 1;\n  min-width: 0;\n}\n\n.session-card__head {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  min-width: 0;\n}\n.session-card__title {\n  font-weight: 700;\n  font-size: 13.5px;\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.session-card__chip {\n  flex-shrink: 0;\n  font-size: 11px;\n  font-weight: 600;\n  line-height: 1;\n  padding: 3px 8px;\n  border-radius: var(--mj-radius-full, 999px);\n  color: var(--mj-text-secondary);\n  background: var(--mj-bg-surface-sunken);\n  border: 1px solid var(--mj-border-subtle);\n}\n.session-card__chip--error {\n  color: var(--mj-status-error-text);\n  background: var(--mj-status-error-bg);\n  border-color: var(--mj-status-error-border);\n}\n.session-card__chip--live {\n  color: var(--mj-status-success-text);\n  background: var(--mj-status-success-bg);\n  border-color: var(--mj-status-success-border);\n}\n\n.session-card__meta {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  margin-top: 3px;\n  font-size: 12px;\n  color: var(--mj-text-muted);\n}\n.session-card__range-arrow {\n  font-size: 10px;\n  margin: 0 3px;\n}\n\n.session-card__preview {\n  margin-top: 5px;\n  font-size: 12.5px;\n  color: var(--mj-text-secondary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.session-card__preview-role {\n  font-weight: 600;\n  color: var(--mj-text-muted);\n}\n\n.session-card__open {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  flex-shrink: 0;\n  padding: 6px 12px;\n  font-size: 12.5px;\n  font-weight: 600;\n  border-radius: var(--mj-radius-md, 8px);\n  border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 45%, transparent);\n  background: var(--mj-bg-surface);\n  color: var(--mj-brand-primary);\n  cursor: pointer;\n  transition: background-color 0.15s ease, color 0.15s ease;\n}\n.session-card__open:hover {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n}\n"] }]
+        args: [{ standalone: true, selector: 'mj-realtime-session-timeline-card', imports: [DatePipe, MJButtonDirective], template: "<!--\n  One realtime (voice) session, collapsed to a single row of the conversation. It is laid out like a\n  chat message: the call icon in the avatar column, a header line, then a bubble. That keeps the\n  thread's margins and rhythm instead of stretching edge to edge across it.\n-->\n<div class=\"call\" role=\"group\" [attr.aria-label]=\"AccessibleSummary\"\n     [class.call--live]=\"IsLiveChip\" [class.call--error]=\"IsErrorChip\">\n  <div class=\"call__icon\" aria-hidden=\"true\">\n    <i class=\"fa-solid\" [class.fa-phone]=\"!IsErrorChip\" [class.fa-phone-slash]=\"IsErrorChip\"></i>\n  </div>\n\n  <div class=\"call__content\">\n    <div class=\"call__header\">\n      <span class=\"call__title\">{{ Title }}</span>\n      @if (StartedAt) {\n        <span class=\"call__time\">{{ StartedAt | date: 'short' }}</span>\n      }\n    </div>\n\n    <!-- The bubble opens the review on click as a convenience for the mouse; the button below is\n         the keyboard and screen-reader path, so the bubble is deliberately not a second control. -->\n    <div class=\"call__bubble\" (click)=\"Open($event)\">\n      @if (Group.LastTurnPreview) {\n        <p class=\"call__quote\">\n          <span class=\"call__speaker\">{{ SpeakerLabel }}</span>\n          <span class=\"call__quote-text\">{{ Group.LastTurnPreview }}</span>\n        </p>\n      }\n\n      <div class=\"call__footer\">\n        <div class=\"call__facts\">\n          @if (StatusChip) {\n            <span class=\"call__status\" [attr.data-tone]=\"StatusTone\">\n              <span class=\"call__status-dot\" aria-hidden=\"true\"></span>{{ StatusChip }}\n            </span>\n          }\n          @if (DurationLabel) {\n            <span class=\"call__fact call__duration\">\n              <i class=\"fa-regular fa-clock\" aria-hidden=\"true\"></i>{{ DurationLabel }}\n            </span>\n          }\n          <span class=\"call__fact call__count\">\n            <i class=\"fa-regular fa-comment\" aria-hidden=\"true\"></i>{{ MessageCountLabel }}\n          </span>\n        </div>\n\n        <button type=\"button\" mjButton variant=\"secondary\" size=\"sm\" class=\"call__open\" (click)=\"Open($event)\">\n          {{ ActionLabel }}\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["/*\n * A realtime (voice) session, collapsed to one row of the conversation.\n *\n * The row mirrors `.message-item` in message-item.component.css: a flex row with a 36px tile in the\n * avatar column, the same gaps and side padding, and the same small-screen steps. That is what\n * lines the call up with the messages around it. Keep the two in step if that layout changes.\n */\n:host {\n  display: block;\n}\n\n.call {\n  display: flex;\n  gap: 12px;\n  padding: 12px 24px;\n}\n\n/* The avatar-column tile. It is tinted rather than solid, so it reads as something that happened\n   in the thread and not as a message from the agent, whose avatar is the solid brand tile. */\n.call__icon {\n  flex-shrink: 0;\n  display: grid;\n  place-items: center;\n  width: 36px;\n  height: 36px;\n  border-radius: 8px;\n  font-size: 15px;\n  color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mj-brand-primary) 22%, transparent);\n}\n\n.call--live .call__icon {\n  color: var(--mj-text-inverse);\n  background: var(--mj-status-success);\n  box-shadow: none;\n  animation: call-ring 2s ease-out infinite;\n}\n\n.call--error .call__icon {\n  color: var(--mj-status-error-text);\n  background: var(--mj-status-error-bg);\n  box-shadow: inset 0 0 0 1px var(--mj-status-error-border);\n}\n\n.call__content {\n  flex: 1;\n  min-width: 0;\n}\n\n/* Same type as a message header: a 13px semibold name, then a 12px muted time. */\n.call__header {\n  display: flex;\n  align-items: baseline;\n  gap: 8px;\n  min-width: 0;\n  margin-bottom: 6px;\n  font-size: 13px;\n}\n\n.call__title {\n  min-width: 0;\n  overflow: hidden;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.call__time {\n  flex-shrink: 0;\n  font-size: 12px;\n  color: var(--mj-text-muted);\n}\n\n/* The bubble sizes to its content between a comfortable minimum and a readable maximum. Its top-left\n   corner is square, like an agent message's, because it hangs off the header. */\n.call__bubble {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  box-sizing: border-box;\n  width: fit-content;\n  min-width: min(340px, 100%);\n  max-width: min(560px, 100%);\n  padding: 12px 14px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px 12px 12px 12px;\n  background: var(--mj-bg-surface);\n  box-shadow: var(--mj-shadow-sm);\n  cursor: pointer;\n  transition: border-color var(--mj-transition-fast), box-shadow var(--mj-transition-fast);\n}\n\n.call__bubble:hover {\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 35%, var(--mj-border-default));\n  box-shadow: var(--mj-shadow-md);\n}\n\n/* The last thing said, clamped to two lines so a long answer cannot grow the row. */\n.call__quote {\n  display: -webkit-box;\n  margin: 0;\n  padding-left: 10px;\n  overflow: hidden;\n  border-left: 2px solid color-mix(in srgb, var(--mj-brand-primary) 35%, var(--mj-border-default));\n  font-size: 13px;\n  line-height: 1.5;\n  color: var(--mj-text-secondary);\n  overflow-wrap: anywhere;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  line-clamp: 2;\n}\n\n.call__speaker {\n  margin-right: 6px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.call__footer {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px 16px;\n}\n\n.call__facts {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 6px 14px;\n  font-size: 12px;\n  color: var(--mj-text-muted);\n}\n\n.call__fact {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  white-space: nowrap;\n}\n\n.call__fact i {\n  font-size: 11px;\n}\n\n/* The status pill. Its tone comes from the shared runtime as `data-tone`, never from the label. */\n.call__status {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 2px 9px 2px 8px;\n  border-radius: var(--mj-radius-full);\n  font-size: 11.5px;\n  font-weight: 600;\n  line-height: 1.5;\n  white-space: nowrap;\n  color: var(--mj-text-secondary);\n  /* A wash of the text colour rather than the sunken surface, which is near-black in dark mode. */\n  background: color-mix(in srgb, var(--mj-text-primary) 7%, transparent);\n}\n\n.call__status-dot {\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  background: currentColor;\n  opacity: 0.7;\n}\n\n.call__status[data-tone='live'] {\n  color: var(--mj-status-success-text);\n  background: var(--mj-status-success-bg);\n}\n\n.call__status[data-tone='live'] .call__status-dot {\n  background: var(--mj-status-success);\n  opacity: 1;\n  animation: call-pulse 1.6s ease-in-out infinite;\n}\n\n.call__status[data-tone='idle'] {\n  color: var(--mj-status-info-text);\n  background: var(--mj-status-info-bg);\n}\n\n.call__status[data-tone='error'] {\n  color: var(--mj-status-error-text);\n  background: var(--mj-status-error-bg);\n}\n\n@keyframes call-pulse {\n  0%,\n  100% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.35;\n  }\n}\n\n@keyframes call-ring {\n  0% {\n    box-shadow: 0 0 0 0 color-mix(in srgb, var(--mj-status-success) 55%, transparent);\n  }\n  100% {\n    box-shadow: 0 0 0 8px color-mix(in srgb, var(--mj-status-success) 0%, transparent);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .call--live .call__icon,\n  .call__status[data-tone='live'] .call__status-dot {\n    animation: none;\n  }\n}\n\n/* The same steps `.message-item` takes, so the tile stays in the avatar column on small screens. */\n@media (max-width: 768px) {\n  .call {\n    gap: 8px;\n    padding: 10px 12px;\n  }\n\n  .call__icon {\n    width: 32px;\n    height: 32px;\n    font-size: 14px;\n  }\n\n  .call__title {\n    font-size: 12px;\n  }\n\n  .call__time {\n    font-size: 11px;\n  }\n}\n\n@media (max-width: 480px) {\n  .call {\n    gap: 6px;\n    padding: 8px;\n  }\n\n  .call__icon {\n    width: 28px;\n    height: 28px;\n    border-radius: 6px;\n    font-size: 12px;\n  }\n\n  .call__title {\n    font-size: 11px;\n  }\n\n  .call__time {\n    font-size: 10px;\n  }\n\n  .call__bubble {\n    min-width: 0;\n    width: 100%;\n  }\n}\n"] }]
     }], null, { Group: [{
             type: Input,
             args: [{ required: true }]
         }], Meta: [{
             type: Input
+        }], CurrentUserID: [{
+            type: Input
         }], UserName: [{
             type: Input
         }], OpenRequested: [{
             type: Output
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(RealtimeSessionTimelineCardComponent, { className: "RealtimeSessionTimelineCardComponent", filePath: "src/lib/components/realtime/realtime-session-timeline-card.component.ts", lineNumber: 33 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(RealtimeSessionTimelineCardComponent, { className: "RealtimeSessionTimelineCardComponent", filePath: "src/lib/components/realtime/realtime-session-timeline-card.component.ts", lineNumber: 40 }); })();
 //# sourceMappingURL=realtime-session-timeline-card.component.js.map

package/dist/lib/components/realtime/realtime-session-timeline-card.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"realtime-session-timeline-card.component.js","sourceRoot":"","sources":["../../../../src/lib/components/realtime/realtime-session-timeline-card.component.ts","../../../../src/lib/components/realtime/realtime-session-timeline-card.component.html"],"names":[],"mappings":"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","sourcesContent":["import { Component, EventEmitter, Input, Output } from '@angular/core';\nimport { DatePipe } from '@angular/common';\nimport {\n  RealtimeSessionTimelineGroup,\n  RealtimeSessionTimelineMeta,\n  SessionCardIsSameDayRange,\n  SessionCardStatusChip,\n  SessionCardTitle\n} from '../../utils/realtime-session-timeline';\n\n/**\n * The ONE timeline element a realtime session collapses to in the standard conversation\n * message list (see `BuildConversationTimeline`): a visually distinct card at the\n * session's chronological position carrying the session identity (broadcast icon +\n * \"Realtime session · <agent>\"), its time range, a status / close-reason chip when\n * known, the visible-turn count, and a one-line preview of the last turn.\n *\n * The card's **Open** button emits {@link OpenRequested} with the session id; the\n * message list bubbles it up so the chat area can host the existing SESSION REVIEW\n * overlay via `ConversationChatAreaComponent.OpenRealtimeSessionReview` (Resume /\n * Close live inside that overlay, unchanged).\n *\n * Rendered DYNAMICALLY by `MessageListComponent` (same `createComponent` path the\n * message items use) — standalone by design, no module declaration needed.\n */\n@Component({\n  standalone: true,\n  selector: 'mj-realtime-session-timeline-card',\n  imports: [DatePipe],\n  templateUrl: './realtime-session-timeline-card.component.html',\n  styleUrl: './realtime-session-timeline-card.component.css'\n})\nexport class RealtimeSessionTimelineCardComponent {\n  /** The collapsed session block computed from the conversation's stamped detail rows. */\n  @Input({ required: true }) Group!: RealtimeSessionTimelineGroup;\n\n  /** Optional session-row enrichment (agent name / status / close reason); null degrades gracefully. */\n  @Input() Meta: RealtimeSessionTimelineMeta | null = null;\n\n  /** Display name of the signed-in user for the last-turn preview (matches the chat's sender names). */\n  @Input() UserName = 'You';\n\n  /** Emitted with the `MJ: AI Agent Sessions.ID` when the user asks to open the session review. */\n  @Output() OpenRequested = new EventEmitter<string>();\n\n  /*\n   * Title / chip / range derivations live in `@memberjunction/conversations-runtime` alongside the\n   * grouping pass, because the React Native thread renders the same card and must not re-decide\n   * what \"Timed out\" means. These getters are the Angular binding surface over them, nothing more.\n   */\n\n  /** Card title: \"Realtime session · <agent>\" when the agent name is known, else the generic label. */\n  public get Title(): string {\n    return SessionCardTitle(this.Meta);\n  }\n\n  /** Whether the start and end fall on the same calendar day (drives the end-time format). */\n  public get SameDayRange(): boolean {\n    return SessionCardIsSameDayRange(this.Group);\n  }\n\n  /** The status chip label, or null to hide the chip entirely. */\n  public get StatusChip(): string | null {\n    return SessionCardStatusChip(this.Meta)?.Label ?? null;\n  }\n\n  /** Whether the chip represents an error close (drives the error chip styling). */\n  public get IsErrorChip(): boolean {\n    return SessionCardStatusChip(this.Meta)?.Tone === 'error';\n  }\n\n  /** Whether the chip represents a live session (drives the live chip styling). */\n  public get IsLiveChip(): boolean {\n    return SessionCardStatusChip(this.Meta)?.Tone === 'live';\n  }\n\n  /** Emits {@link OpenRequested} for the whole-card / Open-button click. */\n  public Open(event?: MouseEvent): void {\n    event?.stopPropagation();\n    const sessionId = this.Group?.SessionID;\n    if (sessionId) {\n      this.OpenRequested.emit(sessionId);\n    }\n  }\n\n}\n","<div class=\"session-card\" role=\"group\" [attr.aria-label]=\"Title\" (click)=\"Open($event)\">\n  <div class=\"session-card__icon\" aria-hidden=\"true\">\n    <i class=\"fa-solid fa-tower-broadcast\"></i>\n  </div>\n\n  <div class=\"session-card__body\">\n    <div class=\"session-card__head\">\n      <span class=\"session-card__title\">{{ Title }}</span>\n      @if (StatusChip) {\n        <span class=\"session-card__chip\"\n              [class.session-card__chip--error]=\"IsErrorChip\"\n              [class.session-card__chip--live]=\"IsLiveChip\">{{ StatusChip }}</span>\n      }\n    </div>\n\n    <div class=\"session-card__meta\">\n      @if (Group.StartedAt) {\n        <span class=\"session-card__range\">\n          {{ Group.StartedAt | date:'MMM d, h:mm a' }}\n          @if (Group.EndedAt && Group.EndedAt !== Group.StartedAt) {\n            <i class=\"fa-solid fa-arrow-right-long session-card__range-arrow\" aria-hidden=\"true\"></i>\n            {{ Group.EndedAt | date:(SameDayRange ? 'h:mm a' : 'MMM d, h:mm a') }}\n          }\n        </span>\n        <span class=\"session-card__dot\" aria-hidden=\"true\">·</span>\n      }\n      <span class=\"session-card__turns\">{{ Group.TurnCount }} {{ Group.TurnCount === 1 ? 'turn' : 'turns' }}</span>\n    </div>\n\n    @if (Group.LastTurnPreview) {\n      <div class=\"session-card__preview\">\n        <span class=\"session-card__preview-role\">{{ Group.LastTurnRole === 'User' ? UserName : 'Agent' }}:</span>\n        {{ Group.LastTurnPreview }}\n      </div>\n    }\n  </div>\n\n  <button type=\"button\" class=\"session-card__open\" (click)=\"Open($event)\"\n          title=\"Open this realtime session in review mode\">\n    <i class=\"fa-solid fa-up-right-from-square\" aria-hidden=\"true\"></i>\n    <span>Open</span>\n  </button>\n</div>\n"]}
+{"version":3,"file":"realtime-session-timeline-card.component.js","sourceRoot":"","sources":["../../../../src/lib/components/realtime/realtime-session-timeline-card.component.ts","../../../../src/lib/components/realtime/realtime-session-timeline-card.component.html"],"names":[],"mappings":"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","sourcesContent":["import { Component, EventEmitter, Input, Output } from '@angular/core';\nimport { DatePipe } from '@angular/common';\nimport {\n  SessionCardDurationLabel,\n  SessionCardMessageCountLabel,\n  SessionCardSpeakerLabel,\n  SessionCardStartedAt,\n  SessionCardStatusChip,\n  SessionCardTitle,\n  type RealtimeSessionStatusChip,\n  type RealtimeSessionTimelineGroup,\n  type RealtimeSessionTimelineMeta\n} from '@memberjunction/conversations-runtime';\nimport { MJButtonDirective } from '@memberjunction/ng-ui-components';\n\n/**\n * The ONE timeline element a realtime (voice) session collapses to in the standard conversation\n * message list (see `BuildConversationTimeline`).\n *\n * It is laid out like a chat message rather than a banner. The call icon sits in the avatar column,\n * \"Voice call with Sage\" and the start time fill the header line, and a bubble carries the status,\n * how long the call ran, how much was said and the last thing said. That keeps the conversation's\n * margins and rhythm, where the old full-width card cut across them.\n *\n * **Review call** (or clicking the bubble) emits {@link OpenRequested} with the session id. The\n * message list bubbles it up so the chat area can host the existing SESSION REVIEW overlay via\n * `ConversationChatAreaComponent.OpenRealtimeSessionReview` (Resume / Close live inside that\n * overlay, unchanged).\n *\n * Rendered DYNAMICALLY by `MessageListComponent` (same `createComponent` path the message items\n * use) — standalone by design, no module declaration needed.\n */\n@Component({\n  standalone: true,\n  selector: 'mj-realtime-session-timeline-card',\n  imports: [DatePipe, MJButtonDirective],\n  templateUrl: './realtime-session-timeline-card.component.html',\n  styleUrl: './realtime-session-timeline-card.component.css'\n})\nexport class RealtimeSessionTimelineCardComponent {\n  /** The collapsed session block computed from the conversation's stamped detail rows. */\n  @Input({ required: true }) Group!: RealtimeSessionTimelineGroup;\n\n  /** Optional session-row enrichment (agent, user, status, start and close); null degrades gracefully. */\n  @Input() Meta: RealtimeSessionTimelineMeta | null = null;\n\n  /**\n   * The signed-in user's id. With it, the quoted line says \"You\" on the viewer's own call and names\n   * the caller on anyone else's, which matters in a conversation several people share.\n   */\n  @Input() CurrentUserID: string | null = null;\n\n  /**\n   * Label for a user's line when the host passes no `CurrentUserID`, and so the card can't tell\n   * whose call it was. With `CurrentUserID` set it isn't used: the line says \"You\", the caller's\n   * name, or \"Caller\" when the session row doesn't say whose call it was.\n   */\n  @Input() UserName = 'You';\n\n  /** Emitted with the `MJ: AI Agent Sessions.ID` when the user asks to open the session review. */\n  @Output() OpenRequested = new EventEmitter<string>();\n\n  /*\n   * Every label below comes from `@memberjunction/conversations-runtime`, because the React Native\n   * thread renders the same card and must not re-decide what \"Timed out\" or \"12 min\" means. These\n   * getters are the Angular binding surface over those helpers, nothing more.\n   */\n\n  /** \"Voice call with <agent>\" when the agent name is known, else \"Voice call\". */\n  public get Title(): string {\n    return SessionCardTitle(this.Meta);\n  }\n\n  /** When the call started, shown in the header the way a message shows its time. */\n  public get StartedAt(): Date | null {\n    return SessionCardStartedAt(this.Group, this.Meta);\n  }\n\n  /** The status label (\"Live\", \"Ended\", \"Timed out\", …), or null to hide the status entirely. */\n  public get StatusChip(): string | null {\n    return this.status?.Label ?? null;\n  }\n\n  /** What the status means, for styling; null when there is no status to show. */\n  public get StatusTone(): RealtimeSessionStatusChip['Tone'] | null {\n    return this.status?.Tone ?? null;\n  }\n\n  /** Whether the call ended in an error (drives the error styling). */\n  public get IsErrorChip(): boolean {\n    return this.StatusTone === 'error';\n  }\n\n  /** Whether the call is still live (drives the live styling). */\n  public get IsLiveChip(): boolean {\n    return this.StatusTone === 'live';\n  }\n\n  /** How long the call ran (\"Under a minute\", \"12 min\"), or null while live or unmeasurable. */\n  public get DurationLabel(): string | null {\n    return SessionCardDurationLabel(this.Group, this.Meta);\n  }\n\n  /** \"No messages\", \"1 message\", \"12 messages\". */\n  public get MessageCountLabel(): string {\n    return SessionCardMessageCountLabel(this.Group);\n  }\n\n  /** Who said the quoted line: the agent by name, \"You\", or another caller by name. */\n  public get SpeakerLabel(): string {\n    return SessionCardSpeakerLabel(this.Group?.LastTurnRole ?? null, this.Meta, this.CurrentUserID, this.UserName);\n  }\n\n  /** The button's label. A live call is still going, so it is viewed rather than reviewed. */\n  public get ActionLabel(): string {\n    return this.IsLiveChip ? 'View call' : 'Review call';\n  }\n\n  /** One sentence a screen reader announces for the whole row. */\n  public get AccessibleSummary(): string {\n    return [this.Title, this.StatusChip, this.DurationLabel, this.MessageCountLabel].filter(Boolean).join(', ');\n  }\n\n  /** Emits {@link OpenRequested} for a click on the bubble or its button. */\n  public Open(event?: Event): void {\n    event?.stopPropagation();\n    const sessionId = this.Group?.SessionID;\n    if (sessionId) {\n      this.OpenRequested.emit(sessionId);\n    }\n  }\n\n  private get status(): RealtimeSessionStatusChip | null {\n    return SessionCardStatusChip(this.Meta);\n  }\n}\n","<!--\n  One realtime (voice) session, collapsed to a single row of the conversation. It is laid out like a\n  chat message: the call icon in the avatar column, a header line, then a bubble. That keeps the\n  thread's margins and rhythm instead of stretching edge to edge across it.\n-->\n<div class=\"call\" role=\"group\" [attr.aria-label]=\"AccessibleSummary\"\n     [class.call--live]=\"IsLiveChip\" [class.call--error]=\"IsErrorChip\">\n  <div class=\"call__icon\" aria-hidden=\"true\">\n    <i class=\"fa-solid\" [class.fa-phone]=\"!IsErrorChip\" [class.fa-phone-slash]=\"IsErrorChip\"></i>\n  </div>\n\n  <div class=\"call__content\">\n    <div class=\"call__header\">\n      <span class=\"call__title\">{{ Title }}</span>\n      @if (StartedAt) {\n        <span class=\"call__time\">{{ StartedAt | date: 'short' }}</span>\n      }\n    </div>\n\n    <!-- The bubble opens the review on click as a convenience for the mouse; the button below is\n         the keyboard and screen-reader path, so the bubble is deliberately not a second control. -->\n    <div class=\"call__bubble\" (click)=\"Open($event)\">\n      @if (Group.LastTurnPreview) {\n        <p class=\"call__quote\">\n          <span class=\"call__speaker\">{{ SpeakerLabel }}</span>\n          <span class=\"call__quote-text\">{{ Group.LastTurnPreview }}</span>\n        </p>\n      }\n\n      <div class=\"call__footer\">\n        <div class=\"call__facts\">\n          @if (StatusChip) {\n            <span class=\"call__status\" [attr.data-tone]=\"StatusTone\">\n              <span class=\"call__status-dot\" aria-hidden=\"true\"></span>{{ StatusChip }}\n            </span>\n          }\n          @if (DurationLabel) {\n            <span class=\"call__fact call__duration\">\n              <i class=\"fa-regular fa-clock\" aria-hidden=\"true\"></i>{{ DurationLabel }}\n            </span>\n          }\n          <span class=\"call__fact call__count\">\n            <i class=\"fa-regular fa-comment\" aria-hidden=\"true\"></i>{{ MessageCountLabel }}\n          </span>\n        </div>\n\n        <button type=\"button\" mjButton variant=\"secondary\" size=\"sm\" class=\"call__open\" (click)=\"Open($event)\">\n          {{ ActionLabel }}\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n"]}

package/dist/lib/components/realtime/realtime-surface-tabs.component.d.ts

@@ -32,7 +32,7 @@ import * as i0 from "@angular/core";
  */
 export declare class RealtimeSurfaceTabsComponent implements OnInit, OnDestroy {
     /** How long a just-revealed channel tab keeps its flash highlight. */
-    private static readonly FlashDurationMs;
+    private static readonly flashDurationMs;
     /** Shared live-session state, owned by the overlay shell (feeds the Activity rail). */
     State: RealtimeSessionState;
     /** Whether developer affordances ("Open run" links) are revealed (gear-gated). */
@@ -153,7 +153,7 @@ export declare class RealtimeSurfaceTabsComponent implements OnInit, OnDestroy {
      */
     DismissOnboarding(): void;
     /** Reads the per-user seen-map and reports whether this channel's intro has been dismissed. */
-    private HasSeenOnboarding;
+    private hasSeenOnboarding;
     /** Persists `channelName` into the per-user seen-map (merge + debounced save). */
     private markOnboardingSeen;
     /** Reads + parses the per-user seen-map setting (tolerant: malformed / unset → empty map). */

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

@@ -185,7 +185,7 @@ const CHANNEL_ONBOARDING_SEEN_SETTING_KEY = 'mj.realtimeChannels.onboardingSeen.
  */
 export class RealtimeSurfaceTabsComponent {
     /** How long a just-revealed channel tab keeps its flash highlight. */
-    static FlashDurationMs = 1400;
+    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). */
@@ -392,7 +392,7 @@ export class RealtimeSurfaceTabsComponent {
         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)) {
+        if (!plugin || !details || this.hasSeenOnboarding(plugin.ChannelName)) {
             this.onboardingChannelName = null;
             this.OnboardingContent = null;
             return;
@@ -414,7 +414,7 @@ export class RealtimeSurfaceTabsComponent {
         this.cdr.markForCheck();
     }
     /** Reads the per-user seen-map and reports whether this channel's intro has been dismissed. */
-    HasSeenOnboarding(channelName) {
+    hasSeenOnboarding(channelName) {
         return this.readOnboardingSeen()[channelName] === true;
     }
     /** Persists `channelName` into the per-user seen-map (merge + debounced save). */
@@ -464,7 +464,7 @@ export class RealtimeSurfaceTabsComponent {
         this.flashTimer = setTimeout(() => {
             this.flashTimer = null;
             this.Model.ClearFlash();
-        }, RealtimeSurfaceTabsComponent.FlashDurationMs);
+        }, RealtimeSurfaceTabsComponent.flashDurationMs);
     }
     static ɵfac = function RealtimeSurfaceTabsComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || RealtimeSurfaceTabsComponent)(); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: RealtimeSurfaceTabsComponent, selectors: [["mj-realtime-surface-tabs"]], viewQuery: function RealtimeSurfaceTabsComponent_Query(rf, ctx) { if (rf & 1) {