@memberjunction/ng-conversations 5.40.2 → 5.41.0

package/dist/lib/components/realtime/realtime-agent-banner.component.js

@@ -0,0 +1,504 @@
+import { Component, EventEmitter, HostListener, Input, Output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+const _forTrack0 = ($index, $item) => $item.Key;
+function RealtimeAgentBannerComponent_Conditional_1_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 6);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r1.ReviewRangeLabel);
+} }
+function RealtimeAgentBannerComponent_Conditional_1_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 7);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("title", "Close reason: " + ctx_r1.ReviewCloseReason);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r1.ReviewCloseReasonLabel);
+} }
+function RealtimeAgentBannerComponent_Conditional_1_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 17);
+    i0.ɵɵlistener("click", function RealtimeAgentBannerComponent_Conditional_1_Conditional_9_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OpenSession()); });
+    i0.ɵɵelement(1, "i", 18);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3, "Open session");
+    i0.ɵɵelementEnd()();
+} }
+function RealtimeAgentBannerComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelement(0, "div", 1);
+    i0.ɵɵelementStart(1, "div", 2)(2, "span", 3);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "span", 4);
+    i0.ɵɵelement(5, "i", 5);
+    i0.ɵɵtext(6, " Session review");
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(7, RealtimeAgentBannerComponent_Conditional_1_Conditional_7_Template, 2, 1, "span", 6);
+    i0.ɵɵconditionalCreate(8, RealtimeAgentBannerComponent_Conditional_1_Conditional_8_Template, 2, 2, "span", 7);
+    i0.ɵɵconditionalCreate(9, RealtimeAgentBannerComponent_Conditional_1_Conditional_9_Template, 4, 0, "button", 8);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(10, "div", 9);
+    i0.ɵɵelement(11, "i", 10);
+    i0.ɵɵelementStart(12, "span", 11);
+    i0.ɵɵtext(13, "Reviewing past session");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(14, "div", 12)(15, "button", 13);
+    i0.ɵɵlistener("click", function RealtimeAgentBannerComponent_Conditional_1_Template_button_click_15_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.StartLiveRequested.emit()); });
+    i0.ɵɵelement(16, "i", 14);
+    i0.ɵɵelementStart(17, "span");
+    i0.ɵɵtext(18, "Start live session");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(19, "button", 15);
+    i0.ɵɵlistener("click", function RealtimeAgentBannerComponent_Conditional_1_Template_button_click_19_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.CloseRequested.emit()); });
+    i0.ɵɵelement(20, "i", 16);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate1("Voice for ", ctx_r1.AgentName);
+    i0.ɵɵadvance(4);
+    i0.ɵɵconditional(ctx_r1.ReviewRangeLabel ? 7 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.ReviewCloseReasonLabel ? 8 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.ShowOpenSession ? 9 : -1);
+} }
+function RealtimeAgentBannerComponent_Conditional_2_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 23);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("title", "Realtime voice model: " + ctx_r1.ModelName);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1("\u00B7 ", ctx_r1.ModelName);
+} }
+function RealtimeAgentBannerComponent_Conditional_2_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 17);
+    i0.ɵɵlistener("click", function RealtimeAgentBannerComponent_Conditional_2_Conditional_12_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OpenSession()); });
+    i0.ɵɵelement(1, "i", 18);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3, "Open session");
+    i0.ɵɵelementEnd()();
+} }
+function RealtimeAgentBannerComponent_Conditional_2_Conditional_14_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 25);
+} }
+function RealtimeAgentBannerComponent_Conditional_2_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 33);
+    i0.ɵɵelement(1, "span")(2, "span")(3, "span")(4, "span")(5, "span")(6, "span")(7, "span")(8, "span");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassProp("waveform--idle", ctx_r1.State !== "speaking");
+} }
+function RealtimeAgentBannerComponent_Conditional_2_Conditional_19_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 34);
+    i0.ɵɵlistener("click", function RealtimeAgentBannerComponent_Conditional_2_Conditional_19_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.PureAudioRequested.emit()); });
+    i0.ɵɵelement(1, "i", 35);
+    i0.ɵɵelementEnd();
+} }
+function RealtimeAgentBannerComponent_Conditional_2_Conditional_20_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 36);
+    i0.ɵɵlistener("click", function RealtimeAgentBannerComponent_Conditional_2_Conditional_20_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.ToggleCaptions()); });
+    i0.ɵɵelement(1, "i", 37);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassProp("iconb--on", ctx_r1.CaptionsOn);
+    i0.ɵɵproperty("title", ctx_r1.CaptionsOn ? "Hide captions" : "Show captions");
+    i0.ɵɵattribute("aria-pressed", ctx_r1.CaptionsOn);
+} }
+function RealtimeAgentBannerComponent_Conditional_2_Conditional_21_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 38);
+    i0.ɵɵlistener("click", function RealtimeAgentBannerComponent_Conditional_2_Conditional_21_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.ToggleGear($event)); });
+    i0.ɵɵelement(1, "i", 39);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassProp("iconb--on", ctx_r1.GearOpen || ctx_r1.DevMode);
+    i0.ɵɵattribute("aria-expanded", ctx_r1.GearOpen);
+} }
+function RealtimeAgentBannerComponent_Conditional_2_Conditional_22_Template(rf, ctx) { if (rf & 1) {
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 40);
+    i0.ɵɵlistener("click", function RealtimeAgentBannerComponent_Conditional_2_Conditional_22_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.MinimizeRequested.emit()); });
+    i0.ɵɵelement(1, "i", 41);
+    i0.ɵɵelementEnd();
+} }
+function RealtimeAgentBannerComponent_Conditional_2_Conditional_23_Template(rf, ctx) { if (rf & 1) {
+    const _r9 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelement(0, "span", 42);
+    i0.ɵɵelementStart(1, "button", 43);
+    i0.ɵɵlistener("click", function RealtimeAgentBannerComponent_Conditional_2_Conditional_23_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.EndRequested.emit()); });
+    i0.ɵɵelement(2, "i", 44);
+    i0.ɵɵelementStart(3, "span");
+    i0.ɵɵtext(4, "End call");
+    i0.ɵɵelementEnd()();
+} }
+function RealtimeAgentBannerComponent_Conditional_2_Conditional_24_For_8_Template(rf, ctx) { if (rf & 1) {
+    const _r11 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 55);
+    i0.ɵɵlistener("click", function RealtimeAgentBannerComponent_Conditional_2_Conditional_24_For_8_Template_button_click_0_listener() { const d_r12 = i0.ɵɵrestoreView(_r11).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.SelectDensity(d_r12.Key)); });
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const d_r12 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵclassProp("on", ctx_r1.Density === d_r12.Key);
+    i0.ɵɵattribute("aria-checked", ctx_r1.Density === d_r12.Key);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(d_r12.Label);
+} }
+function RealtimeAgentBannerComponent_Conditional_2_Conditional_24_Template(rf, ctx) { if (rf & 1) {
+    const _r10 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 45);
+    i0.ɵɵlistener("click", function RealtimeAgentBannerComponent_Conditional_2_Conditional_24_Template_div_click_0_listener($event) { i0.ɵɵrestoreView(_r10); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementStart(1, "div", 46);
+    i0.ɵɵtext(2, "Interface");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 47)(4, "span", 48);
+    i0.ɵɵtext(5, "Density");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "div", 49);
+    i0.ɵɵrepeaterCreate(7, RealtimeAgentBannerComponent_Conditional_2_Conditional_24_For_8_Template, 2, 4, "button", 50, _forTrack0);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(9, "div", 51);
+    i0.ɵɵtext(10, "Simple returns to the pure-audio surface. Auto grows the console as you use it.");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(11, "div", 52);
+    i0.ɵɵelementStart(12, "button", 53);
+    i0.ɵɵlistener("click", function RealtimeAgentBannerComponent_Conditional_2_Conditional_24_Template_button_click_12_listener() { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.ToggleDev()); });
+    i0.ɵɵelement(13, "i", 54);
+    i0.ɵɵtext(14);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(7);
+    i0.ɵɵrepeater(ctx_r1.Densities);
+    i0.ɵɵadvance(5);
+    i0.ɵɵattribute("aria-pressed", ctx_r1.DevMode);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.DevMode ? "fa-toggle-on" : "fa-toggle-off");
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" Developer links ", ctx_r1.DevMode ? "on" : "off", " ");
+} }
+function RealtimeAgentBannerComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "div", 19);
+    i0.ɵɵelementStart(1, "div", 2)(2, "span", 3);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "span", 20);
+    i0.ɵɵelement(5, "i", 21);
+    i0.ɵɵtext(6, " Co-Agent");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "span", 22);
+    i0.ɵɵtext(8, "speaking as ");
+    i0.ɵɵelementStart(9, "b");
+    i0.ɵɵtext(10);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵconditionalCreate(11, RealtimeAgentBannerComponent_Conditional_2_Conditional_11_Template, 2, 2, "span", 23);
+    i0.ɵɵconditionalCreate(12, RealtimeAgentBannerComponent_Conditional_2_Conditional_12_Template, 4, 0, "button", 8);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(13, "div", 24);
+    i0.ɵɵconditionalCreate(14, RealtimeAgentBannerComponent_Conditional_2_Conditional_14_Template, 1, 0, "i", 25)(15, RealtimeAgentBannerComponent_Conditional_2_Conditional_15_Template, 9, 2, "div", 26);
+    i0.ɵɵelementStart(16, "span", 27);
+    i0.ɵɵtext(17);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(18, "div", 12);
+    i0.ɵɵconditionalCreate(19, RealtimeAgentBannerComponent_Conditional_2_Conditional_19_Template, 2, 0, "button", 28);
+    i0.ɵɵconditionalCreate(20, RealtimeAgentBannerComponent_Conditional_2_Conditional_20_Template, 2, 4, "button", 29);
+    i0.ɵɵconditionalCreate(21, RealtimeAgentBannerComponent_Conditional_2_Conditional_21_Template, 2, 3, "button", 30);
+    i0.ɵɵconditionalCreate(22, RealtimeAgentBannerComponent_Conditional_2_Conditional_22_Template, 2, 0, "button", 31);
+    i0.ɵɵconditionalCreate(23, RealtimeAgentBannerComponent_Conditional_2_Conditional_23_Template, 5, 0);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(24, RealtimeAgentBannerComponent_Conditional_2_Conditional_24_Template, 15, 3, "div", 32);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵattribute("data-state", ctx_r1.OrbState(ctx_r1.State));
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate1("Voice for ", ctx_r1.AgentName);
+    i0.ɵɵadvance(7);
+    i0.ɵɵtextInterpolate(ctx_r1.AgentName);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.ModelName ? 11 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.ShowOpenSession ? 12 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("banner__state--busy", ctx_r1.IsBusy(ctx_r1.State));
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.IsBusy(ctx_r1.State) ? 14 : 15);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(ctx_r1.StateLabel(ctx_r1.State));
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r1.ShowPureAudio ? 19 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.ShowCaptionsControl ? 20 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.ShowGear ? 21 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.ShowMinimize ? 22 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.ShowEnd ? 23 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.GearOpen ? 24 : -1);
+} }
+/**
+ * The call overlay's UNIFIED APP-BAR (per Redesign A — `plans/realtime/mockups/redesign-a.html`):
+ * ONE header that owns identity, state, and every session action.
+ *
+ *  - LEFT: the glowing agent orb (motion = turn-state), agent name + "Co-Agent" badge,
+ *    "speaking as" subline (+ subtle realtime-model suffix), and the state pill that swaps
+ *    between a waveform (speaking/listening) and a spinner (connecting/thinking).
+ *  - RIGHT (live): the disclosure-gated action cluster — Captions toggle (level 1+), the
+ *    gear (level 2+, opens a popover hosting the Simple/Standard/Pro/Auto INTERFACE DENSITY
+ *    control — the progressive-disclosure escape hatch — plus the developer-links toggle),
+ *    Minimize (hide the call view, call stays live), and the End-call pill (level 2+; below
+ *    that the phone-call strip's big End control owns ending).
+ *  - RIGHT (review): "Start live session" (resume, affirmative leads) + Close — the
+ *    review session's exit lives up here in the header bar, not floating in the body.
+ *
+ * Which controls render is decided by the OVERLAY (it owns the disclosure model) and
+ * passed down as booleans — this component stays purely presentational.
+ */
+export class RealtimeAgentBannerComponent {
+    /** Current connection / turn state — drives the orb animation + state label. */
+    State;
+    /** Display name of the agent the voice session fronts (e.g. "Sage"). */
+    AgentName = 'the agent';
+    /**
+     * Display name of the realtime model the live session runs on (e.g. "GPT Realtime 2").
+     * Rendered as a subtle suffix in the identity line; hidden when null/empty.
+     */
+    ModelName = null;
+    /** Whether developer affordances (the "Open session" link) are revealed (gear-gated). */
+    DevMode = false;
+    /** ID of the server-side agent session record (`MJ: AI Agent Sessions`), when known. */
+    SessionID = null;
+    /**
+     * SESSION REVIEW presentation: the banner shows the past session's identity
+     * (review badge, started→closed range, close-reason chip) instead of live turn-state,
+     * and the action cluster swaps to Start-live + Close.
+     */
+    ReviewMode = false;
+    /** When reviewing: when the past session started (`__mj_CreatedAt`). */
+    ReviewStartedAt = null;
+    /** When reviewing: when the past session closed (null while it is still open). */
+    ReviewClosedAt = null;
+    /** When reviewing: why the past session closed (`Explicit` | `Janitor` | `Shutdown` | `Error`), when known. */
+    ReviewCloseReason = null;
+    // ── App-bar action cluster (disclosure-gated by the overlay) ────────────────
+    /** Whether captions are currently shown (active state on the captions control). */
+    CaptionsOn = true;
+    /** Whether the captions control renders (disclosure level 1+). */
+    ShowCaptionsControl = false;
+    /** Whether the gear (density escape hatch + dev toggle) renders (disclosure level 2+). */
+    ShowGear = false;
+    /** Whether the End-call pill renders here (level 2+; the strip's big End owns it below). */
+    ShowEnd = false;
+    /** Whether the Minimize control renders (live sessions only). */
+    ShowMinimize = false;
+    /** Whether the "Return to pure audio" control renders (live + disclosure level above 0). */
+    ShowPureAudio = false;
+    /** The user's current interface-density override (selected state in the gear popover). */
+    Density = 'auto';
+    /** Emitted with the session record's ID when the dev "Open session" link is clicked. */
+    OpenSessionRequested = new EventEmitter();
+    /** Emitted when the user toggles captions; the overlay flips its caption state. */
+    CaptionsToggled = new EventEmitter();
+    /** Emitted when the user toggles developer links from the gear popover. */
+    DevModeToggled = new EventEmitter();
+    /** Emitted when the user picks an interface density in the gear popover. */
+    DensityChanged = new EventEmitter();
+    /** Emitted when the user minimizes the call view (the call stays live). */
+    MinimizeRequested = new EventEmitter();
+    /** Emitted when the user asks to return to the pure-audio surface (level 0, this session). */
+    PureAudioRequested = new EventEmitter();
+    /** Emitted when the user ends the call from the app-bar's End pill. */
+    EndRequested = new EventEmitter();
+    /** Review only: the user asked to RESUME the reviewed session as a new live call. */
+    StartLiveRequested = new EventEmitter();
+    /** Review only: the user asked to close the review and return to the conversation. */
+    CloseRequested = new EventEmitter();
+    /** Whether the gear popover is open (closed by any outside click). */
+    GearOpen = false;
+    /** The density choices the gear popover offers, in display order. */
+    Densities = [
+        { Key: 'simple', Label: 'Simple' },
+        { Key: 'standard', Label: 'Standard' },
+        { Key: 'pro', Label: 'Pro' },
+        { Key: 'auto', Label: 'Auto' }
+    ];
+    /** True when the dev "Open session" link should render (gear on + session id known). */
+    get ShowOpenSession() {
+        return this.DevMode && !!this.SessionID;
+    }
+    /** Emits the open-session request for the live agent session record. */
+    OpenSession() {
+        if (this.SessionID) {
+            this.OpenSessionRequested.emit(this.SessionID);
+        }
+    }
+    /** Toggles the captions control and notifies the overlay. */
+    ToggleCaptions() {
+        this.CaptionsOn = !this.CaptionsOn;
+        this.CaptionsToggled.emit(this.CaptionsOn);
+    }
+    /** Opens/closes the gear popover (stops propagation so the outside-click close skips it). */
+    ToggleGear(event) {
+        event.stopPropagation();
+        this.GearOpen = !this.GearOpen;
+    }
+    /** Any outside click closes the gear popover. */
+    OnDocumentClick() {
+        if (this.GearOpen) {
+            this.GearOpen = false;
+        }
+    }
+    /** Gear popover: pick an interface density (the overlay applies + persists it). */
+    SelectDensity(density) {
+        this.DensityChanged.emit(density);
+    }
+    /** Gear popover: toggle developer links. */
+    ToggleDev() {
+        this.DevMode = !this.DevMode;
+        this.DevModeToggled.emit(this.DevMode);
+    }
+    /** The review banner's "started → closed" time-range label (empty when the start is unknown). */
+    get ReviewRangeLabel() {
+        if (!this.ReviewStartedAt) {
+            return '';
+        }
+        const start = this.formatStamp(this.ReviewStartedAt);
+        if (!this.ReviewClosedAt) {
+            return start;
+        }
+        return `${start} → ${this.formatStamp(this.ReviewClosedAt, this.ReviewStartedAt)}`;
+    }
+    /** Human label for the close-reason chip (empty hides the chip). */
+    get ReviewCloseReasonLabel() {
+        switch (this.ReviewCloseReason) {
+            case 'Explicit': return 'Ended by user';
+            case 'Janitor': return 'Closed by janitor';
+            case 'Shutdown': return 'Closed at shutdown';
+            case 'Error': return 'Ended with error';
+            default: return '';
+        }
+    }
+    /** Compact date+time stamp; same-day end stamps drop the redundant date part. */
+    formatStamp(date, sameDayAs) {
+        const time = date.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' }).toLowerCase();
+        if (sameDayAs && date.toDateString() === sameDayAs.toDateString()) {
+            return time;
+        }
+        return `${date.toLocaleDateString([], { month: 'short', day: 'numeric' })}, ${time}`;
+    }
+    /** Maps the realtime state to the orb's `data-state` (the orb only models active turn-states). */
+    OrbState(state) {
+        switch (state) {
+            case 'speaking': return 'speaking';
+            case 'thinking': return 'thinking';
+            default: return 'listening';
+        }
+    }
+    /** Human-readable state label, agent-aware where it reads better. */
+    StateLabel(state) {
+        switch (state) {
+            case 'connecting': return 'Connecting…';
+            case 'listening': return 'Listening';
+            case 'speaking': return `${this.AgentName} is speaking…`;
+            case 'thinking': return 'Working on it…';
+            case 'error': return 'Connection error';
+            case 'closed': return 'Call ended';
+            default: return '';
+        }
+    }
+    /** True while the state pill should show a spinner instead of the waveform. */
+    IsBusy(state) {
+        return state === 'connecting' || state === 'thinking';
+    }
+    static ɵfac = function RealtimeAgentBannerComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || RealtimeAgentBannerComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: RealtimeAgentBannerComponent, selectors: [["mj-realtime-agent-banner"]], hostBindings: function RealtimeAgentBannerComponent_HostBindings(rf, ctx) { if (rf & 1) {
+            i0.ɵɵlistener("click", function RealtimeAgentBannerComponent_click_HostBindingHandler() { return ctx.OnDocumentClick(); }, i0.ɵɵresolveDocument);
+        } }, inputs: { State: "State", AgentName: "AgentName", ModelName: "ModelName", DevMode: "DevMode", SessionID: "SessionID", ReviewMode: "ReviewMode", ReviewStartedAt: "ReviewStartedAt", ReviewClosedAt: "ReviewClosedAt", ReviewCloseReason: "ReviewCloseReason", CaptionsOn: "CaptionsOn", ShowCaptionsControl: "ShowCaptionsControl", ShowGear: "ShowGear", ShowEnd: "ShowEnd", ShowMinimize: "ShowMinimize", ShowPureAudio: "ShowPureAudio", Density: "Density" }, outputs: { OpenSessionRequested: "OpenSessionRequested", CaptionsToggled: "CaptionsToggled", DevModeToggled: "DevModeToggled", DensityChanged: "DensityChanged", MinimizeRequested: "MinimizeRequested", PureAudioRequested: "PureAudioRequested", EndRequested: "EndRequested", StartLiveRequested: "StartLiveRequested", CloseRequested: "CloseRequested" }, decls: 3, vars: 3, consts: [[1, "banner"], ["aria-hidden", "true", 1, "agent-orb", "agent-orb--review"], [1, "banner__id"], [1, "banner__name"], [1, "pill", "pill--review"], ["aria-hidden", "true", 1, "fa-solid", "fa-clock-rotate-left"], [1, "banner__for", "banner__range"], [1, "pill", "pill--close-reason", 3, "title"], ["type", "button", "title", "Open the agent session record", 1, "dev-link"], [1, "banner__state", "banner__state--review"], ["aria-hidden", "true", 1, "fa-solid", "fa-box-archive"], [1, "banner__state-label", "banner__state-label--review"], [1, "bar-actions"], ["type", "button", "title", "Resume this session as a new live call", 1, "start-live-pill", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-phone"], ["type", "button", "title", "Close review", "aria-label", "Close session review", 1, "iconb", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-xmark"], ["type", "button", "title", "Open the agent session record", 1, "dev-link", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-arrow-up-right-from-square"], ["aria-hidden", "true", 1, "agent-orb"], [1, "pill", "pill--sage"], ["aria-hidden", "true", 1, "fa-solid", "fa-feather"], [1, "banner__for"], [1, "banner__model", 3, "title"], [1, "banner__state"], ["aria-hidden", "true", 1, "fa-solid", "fa-spinner", "fa-spin"], ["aria-hidden", "true", 1, "waveform", 3, "waveform--idle"], [1, "banner__state-label"], ["type", "button", "title", "Pure audio \u2014 simplest view, just the orb and the voice (sticks until you change it in the gear)", "aria-label", "Switch to the simple pure-audio view", 1, "iconb"], ["type", "button", 1, "iconb", 3, "iconb--on", "title"], ["type", "button", "title", "Interface density & developer links", 1, "iconb", 3, "iconb--on"], ["type", "button", "title", "Hide the call view \u2014 the call stays live", "aria-label", "Minimize the call view", 1, "iconb"], ["role", "menu", "aria-label", "Interface settings", 1, "gear-pop"], ["aria-hidden", "true", 1, "waveform"], ["type", "button", "title", "Pure audio \u2014 simplest view, just the orb and the voice (sticks until you change it in the gear)", "aria-label", "Switch to the simple pure-audio view", 1, "iconb", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-headphones"], ["type", "button", 1, "iconb", 3, "click", "title"], ["aria-hidden", "true", 1, "fa-solid", "fa-closed-captioning"], ["type", "button", "title", "Interface density & developer links", 1, "iconb", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-gear"], ["type", "button", "title", "Hide the call view \u2014 the call stays live", "aria-label", "Minimize the call view", 1, "iconb", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-down-left-and-up-right-to-center"], ["aria-hidden", "true", 1, "bar-sep"], ["type", "button", "title", "End call", "aria-label", "End the call", 1, "end-pill", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-phone-slash"], ["role", "menu", "aria-label", "Interface settings", 1, "gear-pop", 3, "click"], [1, "gp-h"], [1, "gp-row"], [1, "gp-l"], ["role", "radiogroup", "aria-label", "Interface density", 1, "gp-seg"], ["type", "button", "role", "radio", 3, "on"], [1, "gp-note"], [1, "gp-div"], ["type", "button", 1, "gp-link", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", 3, "ngClass"], ["type", "button", "role", "radio", 3, "click"]], template: function RealtimeAgentBannerComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0);
+            i0.ɵɵconditionalCreate(1, RealtimeAgentBannerComponent_Conditional_1_Template, 21, 4)(2, RealtimeAgentBannerComponent_Conditional_2_Template, 25, 15);
+            i0.ɵɵelementEnd();
+        } if (rf & 2) {
+            i0.ɵɵclassProp("banner--review", ctx.ReviewMode);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.ReviewMode ? 1 : 2);
+        } }, dependencies: [CommonModule, i1.NgClass], styles: ["[_nghost-%COMP%] {\n  display: block;\n  --sage: var(--mj-color-violet-400, #a78bfa);\n  --sage-bg: color-mix(in srgb, var(--mj-color-violet-400, #a78bfa) 14%, transparent);\n  --sage-border: color-mix(in srgb, var(--mj-color-violet-400, #a78bfa) 45%, transparent);\n}\n\n\n\n\n.banner[_ngcontent-%COMP%] {\n  position: relative; \n\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 10px 16px 10px 22px;\n  border-bottom: 1px solid var(--mj-border-default);\n  background: linear-gradient(180deg, color-mix(in srgb, var(--mj-brand-primary) 10%, transparent), transparent);\n  flex-shrink: 0;\n}\n\n.banner__id[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  white-space: nowrap;\n  overflow: hidden;\n}\n.banner__name[_ngcontent-%COMP%] {\n  font-size: 14.5px;\n  font-weight: 700;\n  letter-spacing: -0.01em;\n  color: var(--mj-text-primary);\n  flex-shrink: 0;\n}\n.banner__for[_ngcontent-%COMP%] {\n  font-size: 11.5px;\n  color: var(--mj-text-muted);\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  flex-shrink: 5; \n\n}\n.banner__for[_ngcontent-%COMP%]   b[_ngcontent-%COMP%] {\n  color: var(--mj-text-secondary);\n}\n\n\n.banner__model[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  flex-shrink: 10; \n\n  min-width: 0;\n}\n\n.banner__state[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 4px 12px;\n  border-radius: var(--mj-radius-full, 9999px);\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n}\n.banner__state--busy[_ngcontent-%COMP%] {\n  background: var(--mj-status-warning-bg);\n  border-color: var(--mj-status-warning);\n}\n.banner__state--busy[_ngcontent-%COMP%]   .fa-spinner[_ngcontent-%COMP%] {\n  color: var(--mj-status-warning);\n}\n.banner__state-label[_ngcontent-%COMP%] {\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--mj-brand-accent, var(--mj-brand-primary));\n}\n.banner__state--busy[_ngcontent-%COMP%]   .banner__state-label[_ngcontent-%COMP%] {\n  color: var(--mj-status-warning-text, var(--mj-status-warning));\n}\n\n\n\n.agent-orb[_ngcontent-%COMP%] {\n  --orb-size: 34px;\n  width: var(--orb-size);\n  height: var(--orb-size);\n  border-radius: 50%;\n  position: relative;\n  flex-shrink: 0;\n  background: radial-gradient(circle at 35% 30%,\n    var(--mj-brand-accent, var(--mj-brand-primary)),\n    var(--mj-brand-primary) 60%,\n    var(--mj-brand-primary-active, var(--mj-brand-primary)));\n  box-shadow:\n    0 0 0 6px color-mix(in srgb, var(--mj-brand-primary) 12%, transparent),\n    0 0 30px color-mix(in srgb, var(--mj-brand-primary) 45%, transparent);\n}\n.agent-orb[_ngcontent-%COMP%]::after {\n  content: \"\";\n  position: absolute;\n  inset: -4px;\n  border-radius: 50%;\n  border: 2px solid color-mix(in srgb, var(--mj-brand-accent, var(--mj-brand-primary)) 40%, transparent);\n  animation: _ngcontent-%COMP%_orb-ring 2.4s ease-out infinite;\n}\n.agent-orb[data-state=\"speaking\"][_ngcontent-%COMP%] {\n  animation: _ngcontent-%COMP%_orb-bob 0.9s ease-in-out infinite;\n}\n.agent-orb[data-state=\"listening\"][_ngcontent-%COMP%] {\n  box-shadow:\n    0 0 0 6px color-mix(in srgb, var(--mj-status-success) 16%, transparent),\n    0 0 30px color-mix(in srgb, var(--mj-status-success) 40%, transparent);\n  background: radial-gradient(circle at 35% 30%,\n    color-mix(in srgb, var(--mj-status-success) 60%, white), var(--mj-brand-primary) 65%);\n}\n.agent-orb[data-state=\"thinking\"][_ngcontent-%COMP%] {\n  box-shadow:\n    0 0 0 6px color-mix(in srgb, var(--mj-status-warning) 14%, transparent),\n    0 0 26px color-mix(in srgb, var(--mj-status-warning) 35%, transparent);\n}\n\n@keyframes _ngcontent-%COMP%_orb-ring { 0% { transform: scale(1); opacity: .6 } 100% { transform: scale(1.5); opacity: 0 } }\n@keyframes _ngcontent-%COMP%_orb-bob { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-3px) } }\n\n\n\n\n\n\n\n.call-overlay[data-audio-live='true'][_nghost-%COMP%]   .agent-orb[_ngcontent-%COMP%]:not(.agent-orb--review), .call-overlay[data-audio-live='true']   [_nghost-%COMP%]   .agent-orb[_ngcontent-%COMP%]:not(.agent-orb--review) {\n  animation: none;\n  transform: scale(calc(1 + var(--voice-out, 0) * 0.14));\n  transition: transform 70ms linear;\n}\n.call-overlay[data-audio-live='true'][_nghost-%COMP%]   .agent-orb[_ngcontent-%COMP%]:not(.agent-orb--review)::after, .call-overlay[data-audio-live='true']   [_nghost-%COMP%]   .agent-orb[_ngcontent-%COMP%]:not(.agent-orb--review)::after {\n  animation: none;\n  opacity: calc(0.15 + var(--voice-out, 0) * 0.85);\n}\n.call-overlay[data-audio-live='true'][data-voice-dir='user'][_nghost-%COMP%]   .agent-orb[_ngcontent-%COMP%]:not(.agent-orb--review), .call-overlay[data-audio-live='true'][data-voice-dir='user']   [_nghost-%COMP%]   .agent-orb[_ngcontent-%COMP%]:not(.agent-orb--review) {\n  box-shadow:\n    0 0 0 6px color-mix(in srgb, var(--mj-status-success) 16%, transparent),\n    0 0 30px color-mix(in srgb, var(--mj-status-success) 40%, transparent);\n  background: radial-gradient(circle at 35% 30%,\n    color-mix(in srgb, var(--mj-status-success) 60%, white), var(--mj-brand-primary) 65%);\n}\n\n\n\n.waveform[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 3px;\n  height: 18px;\n}\n.waveform[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n  width: 3px;\n  border-radius: 3px;\n  background: var(--mj-brand-primary);\n  animation: _ngcontent-%COMP%_wave 1.1s ease-in-out infinite;\n}\n.waveform[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]:nth-child(1) { height: 30%; animation-delay: 0s }\n.waveform[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]:nth-child(2) { height: 65%; animation-delay: .1s }\n.waveform[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]:nth-child(3) { height: 100%; animation-delay: .2s }\n.waveform[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]:nth-child(4) { height: 55%; animation-delay: .3s }\n.waveform[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]:nth-child(5) { height: 85%; animation-delay: .15s }\n.waveform[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]:nth-child(6) { height: 40%; animation-delay: .25s }\n.waveform[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]:nth-child(7) { height: 70%; animation-delay: .05s }\n.waveform[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]:nth-child(8) { height: 35%; animation-delay: .35s }\n.waveform--idle[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n  animation: none;\n  height: 18% !important;\n  background: var(--mj-text-disabled);\n}\n@keyframes _ngcontent-%COMP%_wave { 0%, 100% { transform: scaleY(.4) } 50% { transform: scaleY(1) } }\n\n.pill[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 3px 10px;\n  border-radius: var(--mj-radius-full, 9999px);\n  font-size: 11.5px;\n  font-weight: 600;\n  border: 1px solid transparent;\n  line-height: 1.4;\n}\n.pill[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { font-size: 10px; }\n.pill--sage[_ngcontent-%COMP%] {\n  background: var(--sage-bg);\n  color: var(--mj-color-violet-300, var(--mj-text-secondary));\n  border-color: var(--sage-border);\n}\n\n\n\n.banner--review[_ngcontent-%COMP%] {\n  background: linear-gradient(180deg, color-mix(in srgb, var(--mj-text-muted) 10%, transparent), transparent);\n}\n\n\n.agent-orb--review[_ngcontent-%COMP%] {\n  box-shadow: 0 0 0 6px color-mix(in srgb, var(--mj-text-muted) 12%, transparent);\n  background: radial-gradient(circle at 35% 30%,\n    color-mix(in srgb, var(--mj-text-muted) 55%, var(--mj-bg-surface)),\n    var(--mj-text-muted) 65%);\n}\n.agent-orb--review[_ngcontent-%COMP%]::after {\n  animation: none;\n  border-color: color-mix(in srgb, var(--mj-text-muted) 30%, transparent);\n}\n.pill--review[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n  color: var(--mj-text-link, var(--mj-brand-primary));\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 35%, transparent);\n}\n.pill--close-reason[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-secondary);\n  border-color: var(--mj-border-default);\n}\n.banner__range[_ngcontent-%COMP%] {\n  flex-shrink: 3;\n}\n.banner__state--review[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-card);\n}\n.banner__state--review[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n}\n.banner__state-label--review[_ngcontent-%COMP%] {\n  color: var(--mj-text-secondary);\n}\n\n\n\n.dev-link[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  padding: 3px 9px;\n  border-radius: var(--mj-radius-full, 9999px);\n  border: 1px dashed var(--mj-border-strong);\n  background: transparent;\n  color: var(--mj-text-muted);\n  font-family: inherit;\n  font-size: 10.5px;\n  font-weight: 700;\n  white-space: nowrap;\n  cursor: pointer;\n  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;\n}\n.dev-link[_ngcontent-%COMP%]:hover {\n  color: var(--mj-text-link, var(--mj-brand-primary));\n  border-color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n}\n.dev-link[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 9px;\n}\n\n\n\n.bar-actions[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  flex-shrink: 0;\n}\n.iconb[_ngcontent-%COMP%] {\n  width: 34px;\n  height: 34px;\n  border-radius: var(--mj-radius-md, 8px);\n  display: grid;\n  place-items: center;\n  border: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  font-size: 13px;\n  transition: all 140ms ease;\n}\n.iconb[_ngcontent-%COMP%]:hover {\n  color: var(--mj-text-primary);\n  border-color: var(--mj-border-strong);\n  background: var(--mj-bg-surface-hover);\n}\n.iconb--on[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 16%, transparent);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-accent, var(--mj-brand-primary));\n}\n.bar-sep[_ngcontent-%COMP%] {\n  width: 1px;\n  height: 26px;\n  background: var(--mj-border-default);\n}\n.end-pill[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 9px;\n  padding: 8px 18px;\n  font-family: inherit;\n  font-size: 13px;\n  font-weight: 700;\n  white-space: nowrap;\n  border-radius: var(--mj-radius-full, 9999px);\n  border: 1px solid var(--mj-status-error);\n  background: var(--mj-status-error);\n  color: var(--mj-text-inverse, #fff);\n  cursor: pointer;\n  box-shadow: 0 4px 16px color-mix(in srgb, var(--mj-status-error) 35%, transparent);\n  transition: filter 140ms ease;\n}\n.end-pill[_ngcontent-%COMP%]:hover {\n  filter: brightness(0.92);\n}\n.start-live-pill[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 9px;\n  padding: 8px 18px;\n  font-family: inherit;\n  font-size: 13px;\n  font-weight: 700;\n  white-space: nowrap;\n  border-radius: var(--mj-radius-full, 9999px);\n  border: 1px solid var(--mj-brand-primary);\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse, #fff);\n  cursor: pointer;\n  box-shadow: 0 4px 16px color-mix(in srgb, var(--mj-brand-primary) 35%, transparent);\n  transition: filter 140ms ease;\n}\n.start-live-pill[_ngcontent-%COMP%]:hover {\n  filter: brightness(1.05);\n}\n\n\n\n.gear-pop[_ngcontent-%COMP%] {\n  position: absolute;\n  top: calc(100% + 8px);\n  right: 14px;\n  z-index: 70;\n  width: 268px;\n  border: 1px solid var(--mj-border-strong);\n  border-radius: var(--mj-radius-lg, 12px);\n  background: var(--mj-bg-surface-elevated);\n  box-shadow: var(--mj-shadow-xl, 0 12px 32px rgba(0, 0, 0, 0.18));\n  padding: 12px 14px 10px;\n  animation: _ngcontent-%COMP%_gear-pop-in 160ms ease;\n}\n@keyframes _ngcontent-%COMP%_gear-pop-in {\n  from { opacity: 0; transform: translateY(-4px); }\n  to { opacity: 1; transform: translateY(0); }\n}\n.gp-h[_ngcontent-%COMP%] {\n  font-size: 10.5px;\n  font-weight: 800;\n  text-transform: uppercase;\n  letter-spacing: 0.06em;\n  color: var(--mj-text-muted);\n  margin-bottom: 9px;\n}\n.gp-row[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n.gp-l[_ngcontent-%COMP%] {\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n}\n.gp-seg[_ngcontent-%COMP%] {\n  display: inline-flex;\n  flex: 1;\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md, 8px);\n  background: var(--mj-bg-surface);\n  padding: 2px;\n  gap: 2px;\n}\n.gp-seg[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {\n  flex: 1;\n  border: 0;\n  background: transparent;\n  color: var(--mj-text-muted);\n  font-family: inherit;\n  font-size: 11px;\n  font-weight: 700;\n  padding: 4px 0;\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 120ms ease;\n}\n.gp-seg[_ngcontent-%COMP%]   button.on[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse, #fff);\n}\n.gp-note[_ngcontent-%COMP%] {\n  font-size: 10.5px;\n  color: var(--mj-text-muted);\n  line-height: 1.45;\n  margin-top: 8px;\n}\n.gp-div[_ngcontent-%COMP%] {\n  height: 1px;\n  background: var(--mj-border-default);\n  margin: 10px -14px;\n}\n.gp-link[_ngcontent-%COMP%] {\n  display: flex;\n  width: 100%;\n  align-items: center;\n  gap: 9px;\n  padding: 6px 2px;\n  border: 0;\n  background: transparent;\n  color: var(--mj-text-secondary);\n  font-family: inherit;\n  font-size: 12px;\n  font-weight: 600;\n  cursor: pointer;\n  text-align: left;\n}\n.gp-link[_ngcontent-%COMP%]:hover {\n  color: var(--mj-text-primary);\n}\n.gp-link[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  width: 16px;\n  text-align: center;\n  font-size: 13px;\n  color: var(--mj-text-muted);\n}\n.gp-link[_ngcontent-%COMP%]:hover   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-accent, var(--mj-brand-primary));\n}"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(RealtimeAgentBannerComponent, [{
+        type: Component,
+        args: [{ standalone: true, selector: 'mj-realtime-agent-banner', imports: [CommonModule], template: "<div class=\"banner\" [class.banner--review]=\"ReviewMode\">\n  @if (ReviewMode) {\n    <!-- SESSION REVIEW: static orb \u00B7 name \u00B7 review badge \u00B7 started\u2192closed \u00B7 close-reason chip,\n         with the review's exit actions up here in the header bar (Start live leads, Close trails). -->\n    <div class=\"agent-orb agent-orb--review\" aria-hidden=\"true\"></div>\n\n    <div class=\"banner__id\">\n      <span class=\"banner__name\">Voice for {{ AgentName }}</span>\n      <span class=\"pill pill--review\"><i class=\"fa-solid fa-clock-rotate-left\" aria-hidden=\"true\"></i> Session review</span>\n      @if (ReviewRangeLabel) {\n        <span class=\"banner__for banner__range\">{{ ReviewRangeLabel }}</span>\n      }\n      @if (ReviewCloseReasonLabel) {\n        <span class=\"pill pill--close-reason\" [title]=\"'Close reason: ' + ReviewCloseReason\">{{ ReviewCloseReasonLabel }}</span>\n      }\n      @if (ShowOpenSession) {\n        <button type=\"button\" class=\"dev-link\" (click)=\"OpenSession()\"\n                title=\"Open the agent session record\">\n          <i class=\"fa-solid fa-arrow-up-right-from-square\" aria-hidden=\"true\"></i>\n          <span>Open session</span>\n        </button>\n      }\n    </div>\n\n    <div class=\"banner__state banner__state--review\">\n      <i class=\"fa-solid fa-box-archive\" aria-hidden=\"true\"></i>\n      <span class=\"banner__state-label banner__state-label--review\">Reviewing past session</span>\n    </div>\n\n    <div class=\"bar-actions\">\n      <button type=\"button\" class=\"start-live-pill\" (click)=\"StartLiveRequested.emit()\"\n              title=\"Resume this session as a new live call\">\n        <i class=\"fa-solid fa-phone\" aria-hidden=\"true\"></i>\n        <span>Start live session</span>\n      </button>\n      <button type=\"button\" class=\"iconb\" (click)=\"CloseRequested.emit()\"\n              title=\"Close review\" aria-label=\"Close session review\">\n        <i class=\"fa-solid fa-xmark\" aria-hidden=\"true\"></i>\n      </button>\n    </div>\n  } @else {\n    <div class=\"agent-orb\" [attr.data-state]=\"OrbState(State)\" aria-hidden=\"true\"></div>\n\n    <div class=\"banner__id\">\n      <span class=\"banner__name\">Voice for {{ AgentName }}</span>\n      <span class=\"pill pill--sage\"><i class=\"fa-solid fa-feather\" aria-hidden=\"true\"></i> Co-Agent</span>\n      <span class=\"banner__for\">speaking as <b>{{ AgentName }}</b></span>\n      @if (ModelName) {\n        <span class=\"banner__model\" [title]=\"'Realtime voice model: ' + ModelName\">\u00B7 {{ ModelName }}</span>\n      }\n      @if (ShowOpenSession) {\n        <button type=\"button\" class=\"dev-link\" (click)=\"OpenSession()\"\n                title=\"Open the agent session record\">\n          <i class=\"fa-solid fa-arrow-up-right-from-square\" aria-hidden=\"true\"></i>\n          <span>Open session</span>\n        </button>\n      }\n    </div>\n\n    <div class=\"banner__state\" [class.banner__state--busy]=\"IsBusy(State)\">\n      @if (IsBusy(State)) {\n        <i class=\"fa-solid fa-spinner fa-spin\" aria-hidden=\"true\"></i>\n      } @else {\n        <div class=\"waveform\" [class.waveform--idle]=\"State !== 'speaking'\" aria-hidden=\"true\">\n          <span></span><span></span><span></span><span></span>\n          <span></span><span></span><span></span><span></span>\n        </div>\n      }\n      <span class=\"banner__state-label\">{{ StateLabel(State) }}</span>\n    </div>\n\n    <!-- Disclosure-gated app-bar action cluster (the overlay decides what renders). -->\n    <div class=\"bar-actions\">\n      @if (ShowPureAudio) {\n        <button type=\"button\" class=\"iconb\" (click)=\"PureAudioRequested.emit()\"\n                title=\"Pure audio \u2014 simplest view, just the orb and the voice (sticks until you change it in the gear)\"\n                aria-label=\"Switch to the simple pure-audio view\">\n          <i class=\"fa-solid fa-headphones\" aria-hidden=\"true\"></i>\n        </button>\n      }\n      @if (ShowCaptionsControl) {\n        <button type=\"button\" class=\"iconb\" [class.iconb--on]=\"CaptionsOn\"\n                (click)=\"ToggleCaptions()\"\n                [title]=\"CaptionsOn ? 'Hide captions' : 'Show captions'\"\n                [attr.aria-pressed]=\"CaptionsOn\">\n          <i class=\"fa-solid fa-closed-captioning\" aria-hidden=\"true\"></i>\n        </button>\n      }\n      @if (ShowGear) {\n        <button type=\"button\" class=\"iconb\" [class.iconb--on]=\"GearOpen || DevMode\"\n                (click)=\"ToggleGear($event)\"\n                title=\"Interface density &amp; developer links\"\n                [attr.aria-expanded]=\"GearOpen\">\n          <i class=\"fa-solid fa-gear\" aria-hidden=\"true\"></i>\n        </button>\n      }\n      @if (ShowMinimize) {\n        <button type=\"button\" class=\"iconb\" (click)=\"MinimizeRequested.emit()\"\n                title=\"Hide the call view \u2014 the call stays live\"\n                aria-label=\"Minimize the call view\">\n          <i class=\"fa-solid fa-down-left-and-up-right-to-center\" aria-hidden=\"true\"></i>\n        </button>\n      }\n      @if (ShowEnd) {\n        <span class=\"bar-sep\" aria-hidden=\"true\"></span>\n        <button type=\"button\" class=\"end-pill\" (click)=\"EndRequested.emit()\"\n                title=\"End call\" aria-label=\"End the call\">\n          <i class=\"fa-solid fa-phone-slash\" aria-hidden=\"true\"></i>\n          <span>End call</span>\n        </button>\n      }\n    </div>\n\n    <!-- Gear popover: interface density (the disclosure escape hatch) + developer links. -->\n    @if (GearOpen) {\n      <div class=\"gear-pop\" (click)=\"$event.stopPropagation()\" role=\"menu\" aria-label=\"Interface settings\">\n        <div class=\"gp-h\">Interface</div>\n        <div class=\"gp-row\">\n          <span class=\"gp-l\">Density</span>\n          <div class=\"gp-seg\" role=\"radiogroup\" aria-label=\"Interface density\">\n            @for (d of Densities; track d.Key) {\n              <button type=\"button\" [class.on]=\"Density === d.Key\"\n                      (click)=\"SelectDensity(d.Key)\"\n                      [attr.aria-checked]=\"Density === d.Key\" role=\"radio\">{{ d.Label }}</button>\n            }\n          </div>\n        </div>\n        <div class=\"gp-note\">Simple returns to the pure-audio surface. Auto grows the console as you use it.</div>\n        <div class=\"gp-div\"></div>\n        <button type=\"button\" class=\"gp-link\" (click)=\"ToggleDev()\" [attr.aria-pressed]=\"DevMode\">\n          <i class=\"fa-solid\" [ngClass]=\"DevMode ? 'fa-toggle-on' : 'fa-toggle-off'\" aria-hidden=\"true\"></i>\n          Developer links {{ DevMode ? 'on' : 'off' }}\n        </button>\n      </div>\n    }\n  }\n</div>\n", styles: [":host {\n  display: block;\n  --sage: var(--mj-color-violet-400, #a78bfa);\n  --sage-bg: color-mix(in srgb, var(--mj-color-violet-400, #a78bfa) 14%, transparent);\n  --sage-border: color-mix(in srgb, var(--mj-color-violet-400, #a78bfa) 45%, transparent);\n}\n\n/* The UNIFIED APP-BAR (Redesign A): orb \u00B7 name \u00B7 Co-Agent pill \u00B7 \"speaking as\" \u00B7\n   state pill \u00B7 disclosure-gated action cluster (captions / gear / minimize / End). */\n.banner {\n  position: relative; /* anchors the gear popover */\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 10px 16px 10px 22px;\n  border-bottom: 1px solid var(--mj-border-default);\n  background: linear-gradient(180deg, color-mix(in srgb, var(--mj-brand-primary) 10%, transparent), transparent);\n  flex-shrink: 0;\n}\n\n.banner__id {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  white-space: nowrap;\n  overflow: hidden;\n}\n.banner__name {\n  font-size: 14.5px;\n  font-weight: 700;\n  letter-spacing: -0.01em;\n  color: var(--mj-text-primary);\n  flex-shrink: 0;\n}\n.banner__for {\n  font-size: 11.5px;\n  color: var(--mj-text-muted);\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  flex-shrink: 5; /* gives way before the name/pill, after the model suffix */\n}\n.banner__for b {\n  color: var(--mj-text-secondary);\n}\n/* Subtle realtime-model suffix (e.g. \"\u00B7 GPT Realtime 2\") in the identity line. */\n.banner__model {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  flex-shrink: 10; /* first to give way when the banner narrows */\n  min-width: 0;\n}\n\n.banner__state {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 4px 12px;\n  border-radius: var(--mj-radius-full, 9999px);\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n}\n.banner__state--busy {\n  background: var(--mj-status-warning-bg);\n  border-color: var(--mj-status-warning);\n}\n.banner__state--busy .fa-spinner {\n  color: var(--mj-status-warning);\n}\n.banner__state-label {\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--mj-brand-accent, var(--mj-brand-primary));\n}\n.banner__state--busy .banner__state-label {\n  color: var(--mj-status-warning-text, var(--mj-status-warning));\n}\n\n/* ---------- Glowing agent orb ---------- */\n.agent-orb {\n  --orb-size: 34px;\n  width: var(--orb-size);\n  height: var(--orb-size);\n  border-radius: 50%;\n  position: relative;\n  flex-shrink: 0;\n  background: radial-gradient(circle at 35% 30%,\n    var(--mj-brand-accent, var(--mj-brand-primary)),\n    var(--mj-brand-primary) 60%,\n    var(--mj-brand-primary-active, var(--mj-brand-primary)));\n  box-shadow:\n    0 0 0 6px color-mix(in srgb, var(--mj-brand-primary) 12%, transparent),\n    0 0 30px color-mix(in srgb, var(--mj-brand-primary) 45%, transparent);\n}\n.agent-orb::after {\n  content: \"\";\n  position: absolute;\n  inset: -4px;\n  border-radius: 50%;\n  border: 2px solid color-mix(in srgb, var(--mj-brand-accent, var(--mj-brand-primary)) 40%, transparent);\n  animation: orb-ring 2.4s ease-out infinite;\n}\n.agent-orb[data-state=\"speaking\"] {\n  animation: orb-bob 0.9s ease-in-out infinite;\n}\n.agent-orb[data-state=\"listening\"] {\n  box-shadow:\n    0 0 0 6px color-mix(in srgb, var(--mj-status-success) 16%, transparent),\n    0 0 30px color-mix(in srgb, var(--mj-status-success) 40%, transparent);\n  background: radial-gradient(circle at 35% 30%,\n    color-mix(in srgb, var(--mj-status-success) 60%, white), var(--mj-brand-primary) 65%);\n}\n.agent-orb[data-state=\"thinking\"] {\n  box-shadow:\n    0 0 0 6px color-mix(in srgb, var(--mj-status-warning) 14%, transparent),\n    0 0 26px color-mix(in srgb, var(--mj-status-warning) 35%, transparent);\n}\n\n@keyframes orb-ring { 0% { transform: scale(1); opacity: .6 } 100% { transform: scale(1.5); opacity: 0 } }\n@keyframes orb-bob { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-3px) } }\n\n/* ---------- Audio-reactive mode ----------\n   The overlay's rAF meter loop writes --voice-out / --voice-in + data attributes on\n   .call-overlay; custom properties INHERIT into this component and :host-context()\n   reaches the ancestor's attributes \u2014 so the app-bar orb rides the SAME live signal as\n   the hero (scaled subtler at app-bar size). Un-metered sessions keep the keyframes. */\n:host-context(.call-overlay[data-audio-live='true']) .agent-orb:not(.agent-orb--review) {\n  animation: none;\n  transform: scale(calc(1 + var(--voice-out, 0) * 0.14));\n  transition: transform 70ms linear;\n}\n:host-context(.call-overlay[data-audio-live='true']) .agent-orb:not(.agent-orb--review)::after {\n  animation: none;\n  opacity: calc(0.15 + var(--voice-out, 0) * 0.85);\n}\n:host-context(.call-overlay[data-audio-live='true'][data-voice-dir='user']) .agent-orb:not(.agent-orb--review) {\n  box-shadow:\n    0 0 0 6px color-mix(in srgb, var(--mj-status-success) 16%, transparent),\n    0 0 30px color-mix(in srgb, var(--mj-status-success) 40%, transparent);\n  background: radial-gradient(circle at 35% 30%,\n    color-mix(in srgb, var(--mj-status-success) 60%, white), var(--mj-brand-primary) 65%);\n}\n\n/* ---------- Voice activity waveform ---------- */\n.waveform {\n  display: flex;\n  align-items: center;\n  gap: 3px;\n  height: 18px;\n}\n.waveform span {\n  width: 3px;\n  border-radius: 3px;\n  background: var(--mj-brand-primary);\n  animation: wave 1.1s ease-in-out infinite;\n}\n.waveform span:nth-child(1) { height: 30%; animation-delay: 0s }\n.waveform span:nth-child(2) { height: 65%; animation-delay: .1s }\n.waveform span:nth-child(3) { height: 100%; animation-delay: .2s }\n.waveform span:nth-child(4) { height: 55%; animation-delay: .3s }\n.waveform span:nth-child(5) { height: 85%; animation-delay: .15s }\n.waveform span:nth-child(6) { height: 40%; animation-delay: .25s }\n.waveform span:nth-child(7) { height: 70%; animation-delay: .05s }\n.waveform span:nth-child(8) { height: 35%; animation-delay: .35s }\n.waveform--idle span {\n  animation: none;\n  height: 18% !important;\n  background: var(--mj-text-disabled);\n}\n@keyframes wave { 0%, 100% { transform: scaleY(.4) } 50% { transform: scaleY(1) } }\n\n.pill {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 3px 10px;\n  border-radius: var(--mj-radius-full, 9999px);\n  font-size: 11.5px;\n  font-weight: 600;\n  border: 1px solid transparent;\n  line-height: 1.4;\n}\n.pill i { font-size: 10px; }\n.pill--sage {\n  background: var(--sage-bg);\n  color: var(--mj-color-violet-300, var(--mj-text-secondary));\n  border-color: var(--sage-border);\n}\n\n/* ---------- Session review variant ---------- */\n.banner--review {\n  background: linear-gradient(180deg, color-mix(in srgb, var(--mj-text-muted) 10%, transparent), transparent);\n}\n/* Static orb: no pulse ring, dimmed glow \u2014 the session is history, nothing is live. */\n.agent-orb--review {\n  box-shadow: 0 0 0 6px color-mix(in srgb, var(--mj-text-muted) 12%, transparent);\n  background: radial-gradient(circle at 35% 30%,\n    color-mix(in srgb, var(--mj-text-muted) 55%, var(--mj-bg-surface)),\n    var(--mj-text-muted) 65%);\n}\n.agent-orb--review::after {\n  animation: none;\n  border-color: color-mix(in srgb, var(--mj-text-muted) 30%, transparent);\n}\n.pill--review {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n  color: var(--mj-text-link, var(--mj-brand-primary));\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 35%, transparent);\n}\n.pill--close-reason {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-secondary);\n  border-color: var(--mj-border-default);\n}\n.banner__range {\n  flex-shrink: 3;\n}\n.banner__state--review {\n  background: var(--mj-bg-surface-card);\n}\n.banner__state--review i {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n}\n.banner__state-label--review {\n  color: var(--mj-text-secondary);\n}\n\n/* Gear-gated developer link to the live agent session record */\n.dev-link {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  padding: 3px 9px;\n  border-radius: var(--mj-radius-full, 9999px);\n  border: 1px dashed var(--mj-border-strong);\n  background: transparent;\n  color: var(--mj-text-muted);\n  font-family: inherit;\n  font-size: 10.5px;\n  font-weight: 700;\n  white-space: nowrap;\n  cursor: pointer;\n  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;\n}\n.dev-link:hover {\n  color: var(--mj-text-link, var(--mj-brand-primary));\n  border-color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n}\n.dev-link i {\n  font-size: 9px;\n}\n\n/* ---------- App-bar action cluster (disclosure-gated; Redesign A) ---------- */\n.bar-actions {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  flex-shrink: 0;\n}\n.iconb {\n  width: 34px;\n  height: 34px;\n  border-radius: var(--mj-radius-md, 8px);\n  display: grid;\n  place-items: center;\n  border: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  font-size: 13px;\n  transition: all 140ms ease;\n}\n.iconb:hover {\n  color: var(--mj-text-primary);\n  border-color: var(--mj-border-strong);\n  background: var(--mj-bg-surface-hover);\n}\n.iconb--on {\n  background: color-mix(in srgb, var(--mj-brand-primary) 16%, transparent);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-accent, var(--mj-brand-primary));\n}\n.bar-sep {\n  width: 1px;\n  height: 26px;\n  background: var(--mj-border-default);\n}\n.end-pill {\n  display: inline-flex;\n  align-items: center;\n  gap: 9px;\n  padding: 8px 18px;\n  font-family: inherit;\n  font-size: 13px;\n  font-weight: 700;\n  white-space: nowrap;\n  border-radius: var(--mj-radius-full, 9999px);\n  border: 1px solid var(--mj-status-error);\n  background: var(--mj-status-error);\n  color: var(--mj-text-inverse, #fff);\n  cursor: pointer;\n  box-shadow: 0 4px 16px color-mix(in srgb, var(--mj-status-error) 35%, transparent);\n  transition: filter 140ms ease;\n}\n.end-pill:hover {\n  filter: brightness(0.92);\n}\n.start-live-pill {\n  display: inline-flex;\n  align-items: center;\n  gap: 9px;\n  padding: 8px 18px;\n  font-family: inherit;\n  font-size: 13px;\n  font-weight: 700;\n  white-space: nowrap;\n  border-radius: var(--mj-radius-full, 9999px);\n  border: 1px solid var(--mj-brand-primary);\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse, #fff);\n  cursor: pointer;\n  box-shadow: 0 4px 16px color-mix(in srgb, var(--mj-brand-primary) 35%, transparent);\n  transition: filter 140ms ease;\n}\n.start-live-pill:hover {\n  filter: brightness(1.05);\n}\n\n/* ---------- Gear popover: density escape hatch + developer links ---------- */\n.gear-pop {\n  position: absolute;\n  top: calc(100% + 8px);\n  right: 14px;\n  z-index: 70;\n  width: 268px;\n  border: 1px solid var(--mj-border-strong);\n  border-radius: var(--mj-radius-lg, 12px);\n  background: var(--mj-bg-surface-elevated);\n  box-shadow: var(--mj-shadow-xl, 0 12px 32px rgba(0, 0, 0, 0.18));\n  padding: 12px 14px 10px;\n  animation: gear-pop-in 160ms ease;\n}\n@keyframes gear-pop-in {\n  from { opacity: 0; transform: translateY(-4px); }\n  to { opacity: 1; transform: translateY(0); }\n}\n.gp-h {\n  font-size: 10.5px;\n  font-weight: 800;\n  text-transform: uppercase;\n  letter-spacing: 0.06em;\n  color: var(--mj-text-muted);\n  margin-bottom: 9px;\n}\n.gp-row {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n.gp-l {\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n}\n.gp-seg {\n  display: inline-flex;\n  flex: 1;\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md, 8px);\n  background: var(--mj-bg-surface);\n  padding: 2px;\n  gap: 2px;\n}\n.gp-seg button {\n  flex: 1;\n  border: 0;\n  background: transparent;\n  color: var(--mj-text-muted);\n  font-family: inherit;\n  font-size: 11px;\n  font-weight: 700;\n  padding: 4px 0;\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 120ms ease;\n}\n.gp-seg button.on {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse, #fff);\n}\n.gp-note {\n  font-size: 10.5px;\n  color: var(--mj-text-muted);\n  line-height: 1.45;\n  margin-top: 8px;\n}\n.gp-div {\n  height: 1px;\n  background: var(--mj-border-default);\n  margin: 10px -14px;\n}\n.gp-link {\n  display: flex;\n  width: 100%;\n  align-items: center;\n  gap: 9px;\n  padding: 6px 2px;\n  border: 0;\n  background: transparent;\n  color: var(--mj-text-secondary);\n  font-family: inherit;\n  font-size: 12px;\n  font-weight: 600;\n  cursor: pointer;\n  text-align: left;\n}\n.gp-link:hover {\n  color: var(--mj-text-primary);\n}\n.gp-link i {\n  width: 16px;\n  text-align: center;\n  font-size: 13px;\n  color: var(--mj-text-muted);\n}\n.gp-link:hover i {\n  color: var(--mj-brand-accent, var(--mj-brand-primary));\n}\n"] }]
+    }], null, { State: [{
+            type: Input,
+            args: [{ required: true }]
+        }], AgentName: [{
+            type: Input
+        }], ModelName: [{
+            type: Input
+        }], DevMode: [{
+            type: Input
+        }], SessionID: [{
+            type: Input
+        }], ReviewMode: [{
+            type: Input
+        }], ReviewStartedAt: [{
+            type: Input
+        }], ReviewClosedAt: [{
+            type: Input
+        }], ReviewCloseReason: [{
+            type: Input
+        }], CaptionsOn: [{
+            type: Input
+        }], ShowCaptionsControl: [{
+            type: Input
+        }], ShowGear: [{
+            type: Input
+        }], ShowEnd: [{
+            type: Input
+        }], ShowMinimize: [{
+            type: Input
+        }], ShowPureAudio: [{
+            type: Input
+        }], Density: [{
+            type: Input
+        }], OpenSessionRequested: [{
+            type: Output
+        }], CaptionsToggled: [{
+            type: Output
+        }], DevModeToggled: [{
+            type: Output
+        }], DensityChanged: [{
+            type: Output
+        }], MinimizeRequested: [{
+            type: Output
+        }], PureAudioRequested: [{
+            type: Output
+        }], EndRequested: [{
+            type: Output
+        }], StartLiveRequested: [{
+            type: Output
+        }], CloseRequested: [{
+            type: Output
+        }], OnDocumentClick: [{
+            type: HostListener,
+            args: ['document:click']
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(RealtimeAgentBannerComponent, { className: "RealtimeAgentBannerComponent", filePath: "src/lib/components/realtime/realtime-agent-banner.component.ts", lineNumber: 31 }); })();
+//# sourceMappingURL=realtime-agent-banner.component.js.map