@memberjunction/ng-conversations 5.40.2 → 5.41.0

package/dist/lib/components/realtime/realtime-activity-rail.component.js

@@ -0,0 +1,260 @@
+import { Component, EventEmitter, Input, Output, ChangeDetectorRef, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FriendlyStepLabel, FormatElapsed } from './realtime-session-state';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+const _forTrack0 = ($index, $item) => $item.ArtifactVersionID;
+function RealtimeActivityRailComponent_Conditional_1_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 5);
+    i0.ɵɵelement(1, "i", 6);
+    i0.ɵɵtext(2, " Session activity ");
+    i0.ɵɵelementEnd();
+} }
+function RealtimeActivityRailComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 1)(1, "button", 3);
+    i0.ɵɵlistener("click", function RealtimeActivityRailComponent_Conditional_1_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.Toggle()); });
+    i0.ɵɵelement(2, "i", 4);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(3, RealtimeActivityRailComponent_Conditional_1_Conditional_3_Template, 3, 0, "span", 5);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("title", ctx_r1.Collapsed ? "Show session activity" : "Hide session activity");
+    i0.ɵɵattribute("aria-expanded", !ctx_r1.Collapsed);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.Collapsed ? "fa-chevron-left" : "fa-chevron-right");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(!ctx_r1.Collapsed ? 3 : -1);
+} }
+function RealtimeActivityRailComponent_Conditional_2_For_2_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 12);
+    i0.ɵɵelement(1, "i", 18);
+    i0.ɵɵtext(2, " Running ");
+    i0.ɵɵelementEnd();
+} }
+function RealtimeActivityRailComponent_Conditional_2_For_2_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 13);
+    i0.ɵɵelement(1, "i", 19);
+    i0.ɵɵtext(2, " Done ");
+    i0.ɵɵelementEnd();
+} }
+function RealtimeActivityRailComponent_Conditional_2_For_2_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 14);
+    i0.ɵɵelement(1, "i", 20);
+    i0.ɵɵtext(2, " Failed ");
+    i0.ɵɵelementEnd();
+} }
+function RealtimeActivityRailComponent_Conditional_2_For_2_Conditional_9_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 21);
+    i0.ɵɵelement(1, "i", 23);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", ctx, " ");
+} }
+function RealtimeActivityRailComponent_Conditional_2_For_2_Conditional_9_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 22);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const card_r3 = i0.ɵɵnextContext(2).$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r1.Preview(card_r3));
+} }
+function RealtimeActivityRailComponent_Conditional_2_For_2_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, RealtimeActivityRailComponent_Conditional_2_For_2_Conditional_9_Conditional_0_Template, 3, 1, "div", 21);
+    i0.ɵɵconditionalCreate(1, RealtimeActivityRailComponent_Conditional_2_For_2_Conditional_9_Conditional_1_Template, 2, 1, "div", 22);
+} if (rf & 2) {
+    let tmp_12_0;
+    const card_r3 = i0.ɵɵnextContext().$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵconditional((tmp_12_0 = ctx_r1.Elapsed(card_r3)) ? 0 : -1, tmp_12_0);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.Preview(card_r3) ? 1 : -1);
+} }
+function RealtimeActivityRailComponent_Conditional_2_For_2_For_11_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 24);
+    i0.ɵɵlistener("click", function RealtimeActivityRailComponent_Conditional_2_For_2_For_11_Template_button_click_0_listener() { const artifact_r5 = i0.ɵɵrestoreView(_r4).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OpenArtifact(artifact_r5)); });
+    i0.ɵɵelement(1, "i", 25);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3, "View");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(4, "i", 26);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const artifact_r5 = ctx.$implicit;
+    i0.ɵɵproperty("title", "View " + artifact_r5.Name);
+} }
+function RealtimeActivityRailComponent_Conditional_2_For_2_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 27);
+    i0.ɵɵlistener("click", function RealtimeActivityRailComponent_Conditional_2_For_2_Conditional_12_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r6); const card_r3 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OpenRun(card_r3)); });
+    i0.ɵɵelement(1, "i", 28);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3, "Open run");
+    i0.ɵɵelementEnd()();
+} }
+function RealtimeActivityRailComponent_Conditional_2_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 9)(1, "div", 10)(2, "span", 11);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(4, RealtimeActivityRailComponent_Conditional_2_For_2_Conditional_4_Template, 3, 0, "span", 12)(5, RealtimeActivityRailComponent_Conditional_2_For_2_Conditional_5_Template, 3, 0, "span", 13)(6, RealtimeActivityRailComponent_Conditional_2_For_2_Conditional_6_Template, 3, 0, "span", 14);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "div", 15);
+    i0.ɵɵtext(8);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(9, RealtimeActivityRailComponent_Conditional_2_For_2_Conditional_9_Template, 2, 2);
+    i0.ɵɵrepeaterCreate(10, RealtimeActivityRailComponent_Conditional_2_For_2_For_11_Template, 5, 1, "button", 16, _forTrack0);
+    i0.ɵɵconditionalCreate(12, RealtimeActivityRailComponent_Conditional_2_For_2_Conditional_12_Template, 4, 0, "button", 17);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const card_r3 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassProp("act-card--running", !card_r3.Done)("act-card--done", card_r3.Done && card_r3.Success)("act-card--failed", card_r3.Done && !card_r3.Success);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(card_r3.AgentName);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(!card_r3.Done ? 4 : card_r3.Success ? 5 : 6);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(ctx_r1.StepLabel(card_r3));
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(card_r3.Done ? 9 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r1.CardArtifacts(card_r3));
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r1.ShowOpenRun(card_r3) ? 12 : -1);
+} }
+function RealtimeActivityRailComponent_Conditional_2_ForEmpty_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 8);
+    i0.ɵɵtext(1, "Tool and agent calls will appear here as they run.");
+    i0.ɵɵelementEnd();
+} }
+function RealtimeActivityRailComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 2);
+    i0.ɵɵrepeaterCreate(1, RealtimeActivityRailComponent_Conditional_2_For_2_Template, 13, 11, "div", 7, i0.ɵɵcomponentInstance().TrackCard, true, RealtimeActivityRailComponent_Conditional_2_ForEmpty_3_Template, 2, 0, "div", 8);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r1.State.Cards);
+} }
+/**
+ * The "Session activity" RIGHT RAIL of the call overlay: a compact, newest-first list
+ * of EVERY tool/agent call of the session — so parallel/multiple delegations live here
+ * and the conversation thread stays clean.
+ *
+ * Each entry shows agent name, status (Running w/ spinner | Done | Failed), the latest
+ * friendly step label, elapsed time for finished work, and a one-line result preview
+ * for done items. Active items are emphasized; finished items are dimmed.
+ *
+ * Collapsible via the chevron in its header (collapses to a slim toggle strip).
+ * Presentational over the same {@link RealtimeSessionState} the thread renders —
+ * no subscriptions of its own beyond the state's change notifications.
+ */
+export class RealtimeActivityRailComponent {
+    /** Maximum characters of the result preview in a done card. */
+    static PreviewMaxChars = 90;
+    /** Shared live-session state, owned by the overlay shell. */
+    State;
+    /** Whether developer affordances ("Open run" links) are revealed (gear-gated). */
+    DevMode = false;
+    /**
+     * EMBEDDED mode: the rail renders as the content of the surface panel's Activity tab —
+     * its own header/collapse chrome is hidden (the panel's tab strip owns collapse) and it
+     * stretches to the pane's full width. Default `false` keeps the original standalone
+     * right-rail presentation for any other consumer.
+     */
+    Embedded = false;
+    /** Emitted with the delegated run's ID when an entry's dev "Open run" link is clicked. */
+    OpenRunRequested = new EventEmitter();
+    /** Emitted when an entry's "View" artifact chip is clicked (focuses the artifact's tab). */
+    OpenArtifactRequested = new EventEmitter();
+    /** Whether the rail is collapsed to its slim toggle strip. */
+    Collapsed = false;
+    changedSub;
+    cdr = inject(ChangeDetectorRef);
+    ngOnInit() {
+        this.changedSub = this.State.Changed$.subscribe(() => this.cdr.markForCheck());
+    }
+    ngOnDestroy() {
+        this.changedSub?.unsubscribe();
+    }
+    /** Toggle the rail between expanded and slim-collapsed. */
+    Toggle() {
+        this.Collapsed = !this.Collapsed;
+    }
+    /** track fn for the @for over cards. */
+    TrackCard(index, card) {
+        return card.CallID;
+    }
+    /** Friendly label of the card's latest step. */
+    StepLabel(card) {
+        return FriendlyStepLabel(card.LatestStep, card.LatestMessage);
+    }
+    /** Elapsed duration for finished work ("8s", "1m 04s"); null while running (kept cheap). */
+    Elapsed(card) {
+        if (card.FinishedAt == null) {
+            return null;
+        }
+        return FormatElapsed(card.FinishedAt - card.StartedAt);
+    }
+    /** True when the dev "Open run" link should render for this card (gear on + run id known). */
+    ShowOpenRun(card) {
+        return this.DevMode && !!card.RunID;
+    }
+    /** Emits the open-run request for the card's delegated run. */
+    OpenRun(card) {
+        if (card.RunID) {
+            this.OpenRunRequested.emit(card.RunID);
+        }
+    }
+    /** The artifacts a done card carries (empty array when none — keeps the template simple). */
+    CardArtifacts(card) {
+        return card.Done && card.Artifacts ? card.Artifacts : [];
+    }
+    /** Emits the open-artifact request for a card's produced artifact. */
+    OpenArtifact(artifact) {
+        this.OpenArtifactRequested.emit(artifact);
+    }
+    /** One-line result preview for done items. */
+    Preview(card) {
+        const text = (card.Result || card.LatestMessage || '').replace(/\s+/g, ' ').trim();
+        const max = RealtimeActivityRailComponent.PreviewMaxChars;
+        return text.length > max ? `${text.slice(0, max).trimEnd()}…` : text;
+    }
+    static ɵfac = function RealtimeActivityRailComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || RealtimeActivityRailComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: RealtimeActivityRailComponent, selectors: [["mj-realtime-activity-rail"]], inputs: { State: "State", DevMode: "DevMode", Embedded: "Embedded" }, outputs: { OpenRunRequested: "OpenRunRequested", OpenArtifactRequested: "OpenArtifactRequested" }, decls: 3, vars: 6, consts: [["aria-label", "Session activity", 1, "rail"], [1, "rail__head"], [1, "rail__list"], ["type", "button", 1, "rail__toggle", 3, "click", "title"], ["aria-hidden", "true", 1, "fa-solid", 3, "ngClass"], [1, "rail__title"], ["aria-hidden", "true", 1, "fa-solid", "fa-list-check"], [1, "act-card", 3, "act-card--running", "act-card--done", "act-card--failed"], [1, "rail__empty"], [1, "act-card"], [1, "act-card__top"], [1, "act-card__name"], [1, "act-status", "act-status--running"], [1, "act-status", "act-status--done"], [1, "act-status", "act-status--failed"], [1, "act-card__step"], ["type", "button", 1, "act-card__artifact-link", 3, "title"], ["type", "button", "title", "Open the delegated agent run record", 1, "act-card__dev-link"], ["aria-hidden", "true", 1, "fa-solid", "fa-spinner", "spin"], ["aria-hidden", "true", 1, "fa-solid", "fa-check"], ["aria-hidden", "true", 1, "fa-solid", "fa-xmark"], [1, "act-card__meta"], [1, "act-card__preview"], ["aria-hidden", "true", 1, "fa-regular", "fa-clock"], ["type", "button", 1, "act-card__artifact-link", 3, "click", "title"], ["aria-hidden", "true", 1, "fa-solid", "fa-file-lines"], ["aria-hidden", "true", 1, "fa-solid", "fa-arrow-right"], ["type", "button", "title", "Open the delegated agent run record", 1, "act-card__dev-link", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-arrow-up-right-from-square"]], template: function RealtimeActivityRailComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "aside", 0);
+            i0.ɵɵconditionalCreate(1, RealtimeActivityRailComponent_Conditional_1_Template, 4, 4, "div", 1);
+            i0.ɵɵconditionalCreate(2, RealtimeActivityRailComponent_Conditional_2_Template, 4, 1, "div", 2);
+            i0.ɵɵelementEnd();
+        } if (rf & 2) {
+            i0.ɵɵclassProp("rail--collapsed", ctx.Collapsed && !ctx.Embedded)("rail--embedded", ctx.Embedded);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(!ctx.Embedded ? 1 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(!ctx.Collapsed || ctx.Embedded ? 2 : -1);
+        } }, dependencies: [CommonModule, i1.NgClass], styles: ["[_nghost-%COMP%] {\n  display: block;\n  height: 100%;\n  --sage: var(--mj-color-violet-400, #a78bfa);\n  --sage-bg: color-mix(in srgb, var(--mj-color-violet-400, #a78bfa) 10%, transparent);\n  --sage-border: color-mix(in srgb, var(--mj-color-violet-400, #a78bfa) 38%, transparent);\n}\n\n.rail[_ngcontent-%COMP%] {\n  width: 308px;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  border-left: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-card);\n  transition: width 180ms ease;\n}\n.rail--collapsed[_ngcontent-%COMP%] {\n  width: 40px;\n}\n\n\n\n\n.rail--embedded[_ngcontent-%COMP%] {\n  width: 100%;\n  border-left: 0;\n}\n\n.rail__head[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px 12px;\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n}\n.rail--collapsed[_ngcontent-%COMP%]   .rail__head[_ngcontent-%COMP%] {\n  justify-content: center;\n  padding: 10px 6px;\n  border-bottom-color: transparent;\n}\n.rail__toggle[_ngcontent-%COMP%] {\n  width: 24px;\n  height: 24px;\n  display: grid;\n  place-items: center;\n  background: transparent;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  color: var(--mj-text-muted);\n  cursor: pointer;\n  flex-shrink: 0;\n  font-size: 10px;\n  transition: color 140ms ease, border-color 140ms ease;\n}\n.rail__toggle[_ngcontent-%COMP%]:hover {\n  color: var(--mj-text-primary);\n  border-color: var(--mj-border-strong);\n}\n.rail__title[_ngcontent-%COMP%] {\n  font-size: 12px;\n  font-weight: 700;\n  color: var(--mj-text-secondary);\n  display: inline-flex;\n  align-items: center;\n  gap: 7px;\n  white-space: nowrap;\n}\n.rail__title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n}\n\n.rail__list[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  padding: 10px;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  scrollbar-width: thin;\n  scrollbar-color: var(--mj-border-strong) transparent;\n}\n.rail__list[_ngcontent-%COMP%]::-webkit-scrollbar {\n  width: 6px;\n}\n.rail__list[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n  background: var(--mj-border-strong);\n  border-radius: 3px;\n}\n\n.rail__empty[_ngcontent-%COMP%] {\n  font-size: 11.5px;\n  color: var(--mj-text-disabled);\n  text-align: center;\n  padding: 18px 8px;\n}\n\n\n\n.act-card[_ngcontent-%COMP%] {\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-lg, 10px);\n  padding: 8px 10px;\n  background: var(--mj-bg-surface);\n}\n.act-card--running[_ngcontent-%COMP%] {\n  border-color: var(--sage-border);\n  background: var(--sage-bg);\n  box-shadow: 0 0 0 1px var(--sage-border);\n}\n.act-card--done[_ngcontent-%COMP%], \n.act-card--failed[_ngcontent-%COMP%] {\n  opacity: 0.72;\n}\n.act-card--done[_ngcontent-%COMP%]:hover, \n.act-card--failed[_ngcontent-%COMP%]:hover {\n  opacity: 1;\n}\n\n.act-card__top[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n}\n.act-card__name[_ngcontent-%COMP%] {\n  font-size: 12px;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n  min-width: 0;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.act-status[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  font-size: 10px;\n  font-weight: 700;\n  padding: 1px 7px;\n  border-radius: var(--mj-radius-full, 9999px);\n  flex-shrink: 0;\n  line-height: 1.6;\n}\n.act-status[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { font-size: 8.5px; }\n.act-status--running[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--sage) 18%, transparent);\n  color: var(--mj-color-violet-300, var(--mj-text-secondary));\n  border: 1px solid var(--sage-border);\n}\n.act-status--done[_ngcontent-%COMP%] {\n  background: var(--mj-status-success-bg, transparent);\n  color: var(--mj-status-success);\n  border: 1px solid color-mix(in srgb, var(--mj-status-success) 35%, transparent);\n}\n.act-status--failed[_ngcontent-%COMP%] {\n  background: var(--mj-status-error-bg, transparent);\n  color: var(--mj-status-error);\n  border: 1px solid color-mix(in srgb, var(--mj-status-error) 35%, transparent);\n}\n.spin[_ngcontent-%COMP%] {\n  animation: _ngcontent-%COMP%_rail-spin 1.1s linear infinite;\n}\n\n.act-card__step[_ngcontent-%COMP%] {\n  font-size: 11.5px;\n  color: var(--mj-text-secondary);\n  margin-top: 4px;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n.act-card--running[_ngcontent-%COMP%]   .act-card__step[_ngcontent-%COMP%] {\n  color: var(--mj-text-primary);\n  font-weight: 600;\n}\n.act-card__meta[_ngcontent-%COMP%] {\n  font-size: 10px;\n  color: var(--mj-text-muted);\n  margin-top: 4px;\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n}\n.act-card__preview[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n  margin-top: 3px;\n  line-height: 1.45;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n\n\n\n.act-card__artifact-link[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  margin-top: 6px;\n  margin-right: 6px;\n  padding: 2px 9px;\n  border-radius: var(--mj-radius-full, 9999px);\n  border: 1px solid var(--sage-border);\n  background: var(--sage-bg);\n  color: var(--mj-color-violet-300, var(--mj-text-secondary));\n  font-family: inherit;\n  font-size: 10px;\n  font-weight: 700;\n  cursor: pointer;\n  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;\n}\n.act-card__artifact-link[_ngcontent-%COMP%]:hover {\n  color: var(--mj-text-primary);\n  border-color: var(--sage);\n  background: color-mix(in srgb, var(--sage) 18%, transparent);\n}\n.act-card__artifact-link[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 9px;\n}\n\n\n\n.act-card__dev-link[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  margin-top: 6px;\n  padding: 2px 8px;\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: 10px;\n  font-weight: 700;\n  cursor: pointer;\n  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;\n}\n.act-card__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.act-card__dev-link[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 8px;\n}\n\n@keyframes _ngcontent-%COMP%_rail-spin {\n  to { transform: rotate(360deg); }\n}\n\n\n\n\n@media (max-width: 860px) {\n  .rail[_ngcontent-%COMP%]:not(.rail--embedded) {\n    display: none;\n  }\n}"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(RealtimeActivityRailComponent, [{
+        type: Component,
+        args: [{ standalone: true, selector: 'mj-realtime-activity-rail', imports: [CommonModule], template: "<aside class=\"rail\" [class.rail--collapsed]=\"Collapsed && !Embedded\" [class.rail--embedded]=\"Embedded\" aria-label=\"Session activity\">\n  @if (!Embedded) {\n    <div class=\"rail__head\">\n      <button type=\"button\"\n              class=\"rail__toggle\"\n              (click)=\"Toggle()\"\n              [title]=\"Collapsed ? 'Show session activity' : 'Hide session activity'\"\n              [attr.aria-expanded]=\"!Collapsed\">\n        <i class=\"fa-solid\" [ngClass]=\"Collapsed ? 'fa-chevron-left' : 'fa-chevron-right'\" aria-hidden=\"true\"></i>\n      </button>\n      @if (!Collapsed) {\n        <span class=\"rail__title\">\n          <i class=\"fa-solid fa-list-check\" aria-hidden=\"true\"></i>\n          Session activity\n        </span>\n      }\n    </div>\n  }\n\n  @if (!Collapsed || Embedded) {\n    <div class=\"rail__list\">\n      @for (card of State.Cards; track TrackCard($index, card)) {\n        <div class=\"act-card\"\n             [class.act-card--running]=\"!card.Done\"\n             [class.act-card--done]=\"card.Done && card.Success\"\n             [class.act-card--failed]=\"card.Done && !card.Success\">\n          <div class=\"act-card__top\">\n            <span class=\"act-card__name\">{{ card.AgentName }}</span>\n            @if (!card.Done) {\n              <span class=\"act-status act-status--running\">\n                <i class=\"fa-solid fa-spinner spin\" aria-hidden=\"true\"></i> Running\n              </span>\n            } @else if (card.Success) {\n              <span class=\"act-status act-status--done\">\n                <i class=\"fa-solid fa-check\" aria-hidden=\"true\"></i> Done\n              </span>\n            } @else {\n              <span class=\"act-status act-status--failed\">\n                <i class=\"fa-solid fa-xmark\" aria-hidden=\"true\"></i> Failed\n              </span>\n            }\n          </div>\n          <div class=\"act-card__step\">{{ StepLabel(card) }}</div>\n          @if (card.Done) {\n            @if (Elapsed(card); as elapsed) {\n              <div class=\"act-card__meta\">\n                <i class=\"fa-regular fa-clock\" aria-hidden=\"true\"></i> {{ elapsed }}\n              </div>\n            }\n            @if (Preview(card)) {\n              <div class=\"act-card__preview\">{{ Preview(card) }}</div>\n            }\n          }\n          @for (artifact of CardArtifacts(card); track artifact.ArtifactVersionID) {\n            <button type=\"button\" class=\"act-card__artifact-link\" (click)=\"OpenArtifact(artifact)\"\n                    [title]=\"'View ' + artifact.Name\">\n              <i class=\"fa-solid fa-file-lines\" aria-hidden=\"true\"></i>\n              <span>View</span>\n              <i class=\"fa-solid fa-arrow-right\" aria-hidden=\"true\"></i>\n            </button>\n          }\n          @if (ShowOpenRun(card)) {\n            <button type=\"button\" class=\"act-card__dev-link\" (click)=\"OpenRun(card)\"\n                    title=\"Open the delegated agent run record\">\n              <i class=\"fa-solid fa-arrow-up-right-from-square\" aria-hidden=\"true\"></i>\n              <span>Open run</span>\n            </button>\n          }\n        </div>\n      } @empty {\n        <div class=\"rail__empty\">Tool and agent calls will appear here as they run.</div>\n      }\n    </div>\n  }\n</aside>\n", styles: [":host {\n  display: block;\n  height: 100%;\n  --sage: var(--mj-color-violet-400, #a78bfa);\n  --sage-bg: color-mix(in srgb, var(--mj-color-violet-400, #a78bfa) 10%, transparent);\n  --sage-border: color-mix(in srgb, var(--mj-color-violet-400, #a78bfa) 38%, transparent);\n}\n\n.rail {\n  width: 308px;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  border-left: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-card);\n  transition: width 180ms ease;\n}\n.rail--collapsed {\n  width: 40px;\n}\n\n/* EMBEDDED in the surface panel's Activity tab: the panel owns chrome + collapse,\n   so the rail stretches to the pane and drops its own border. */\n.rail--embedded {\n  width: 100%;\n  border-left: 0;\n}\n\n.rail__head {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px 12px;\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n}\n.rail--collapsed .rail__head {\n  justify-content: center;\n  padding: 10px 6px;\n  border-bottom-color: transparent;\n}\n.rail__toggle {\n  width: 24px;\n  height: 24px;\n  display: grid;\n  place-items: center;\n  background: transparent;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  color: var(--mj-text-muted);\n  cursor: pointer;\n  flex-shrink: 0;\n  font-size: 10px;\n  transition: color 140ms ease, border-color 140ms ease;\n}\n.rail__toggle:hover {\n  color: var(--mj-text-primary);\n  border-color: var(--mj-border-strong);\n}\n.rail__title {\n  font-size: 12px;\n  font-weight: 700;\n  color: var(--mj-text-secondary);\n  display: inline-flex;\n  align-items: center;\n  gap: 7px;\n  white-space: nowrap;\n}\n.rail__title i {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n}\n\n.rail__list {\n  flex: 1;\n  overflow-y: auto;\n  padding: 10px;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  scrollbar-width: thin;\n  scrollbar-color: var(--mj-border-strong) transparent;\n}\n.rail__list::-webkit-scrollbar {\n  width: 6px;\n}\n.rail__list::-webkit-scrollbar-thumb {\n  background: var(--mj-border-strong);\n  border-radius: 3px;\n}\n\n.rail__empty {\n  font-size: 11.5px;\n  color: var(--mj-text-disabled);\n  text-align: center;\n  padding: 18px 8px;\n}\n\n/* ---------- Activity cards ---------- */\n.act-card {\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-lg, 10px);\n  padding: 8px 10px;\n  background: var(--mj-bg-surface);\n}\n.act-card--running {\n  border-color: var(--sage-border);\n  background: var(--sage-bg);\n  box-shadow: 0 0 0 1px var(--sage-border);\n}\n.act-card--done,\n.act-card--failed {\n  opacity: 0.72;\n}\n.act-card--done:hover,\n.act-card--failed:hover {\n  opacity: 1;\n}\n\n.act-card__top {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n}\n.act-card__name {\n  font-size: 12px;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n  min-width: 0;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.act-status {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  font-size: 10px;\n  font-weight: 700;\n  padding: 1px 7px;\n  border-radius: var(--mj-radius-full, 9999px);\n  flex-shrink: 0;\n  line-height: 1.6;\n}\n.act-status i { font-size: 8.5px; }\n.act-status--running {\n  background: color-mix(in srgb, var(--sage) 18%, transparent);\n  color: var(--mj-color-violet-300, var(--mj-text-secondary));\n  border: 1px solid var(--sage-border);\n}\n.act-status--done {\n  background: var(--mj-status-success-bg, transparent);\n  color: var(--mj-status-success);\n  border: 1px solid color-mix(in srgb, var(--mj-status-success) 35%, transparent);\n}\n.act-status--failed {\n  background: var(--mj-status-error-bg, transparent);\n  color: var(--mj-status-error);\n  border: 1px solid color-mix(in srgb, var(--mj-status-error) 35%, transparent);\n}\n.spin {\n  animation: rail-spin 1.1s linear infinite;\n}\n\n.act-card__step {\n  font-size: 11.5px;\n  color: var(--mj-text-secondary);\n  margin-top: 4px;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n.act-card--running .act-card__step {\n  color: var(--mj-text-primary);\n  font-weight: 600;\n}\n.act-card__meta {\n  font-size: 10px;\n  color: var(--mj-text-muted);\n  margin-top: 4px;\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n}\n.act-card__preview {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n  margin-top: 3px;\n  line-height: 1.45;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n\n/* \"View \u2192\" chip for an artifact a delegated run produced (focuses its surface tab) */\n.act-card__artifact-link {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  margin-top: 6px;\n  margin-right: 6px;\n  padding: 2px 9px;\n  border-radius: var(--mj-radius-full, 9999px);\n  border: 1px solid var(--sage-border);\n  background: var(--sage-bg);\n  color: var(--mj-color-violet-300, var(--mj-text-secondary));\n  font-family: inherit;\n  font-size: 10px;\n  font-weight: 700;\n  cursor: pointer;\n  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;\n}\n.act-card__artifact-link:hover {\n  color: var(--mj-text-primary);\n  border-color: var(--sage);\n  background: color-mix(in srgb, var(--sage) 18%, transparent);\n}\n.act-card__artifact-link i {\n  font-size: 9px;\n}\n\n/* Gear-gated developer link to the delegated run record */\n.act-card__dev-link {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  margin-top: 6px;\n  padding: 2px 8px;\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: 10px;\n  font-weight: 700;\n  cursor: pointer;\n  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;\n}\n.act-card__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.act-card__dev-link i {\n  font-size: 8px;\n}\n\n@keyframes rail-spin {\n  to { transform: rotate(360deg); }\n}\n\n/* On narrow widths the STANDALONE rail stacks out of the way (overlay falls back to a\n   single column). The embedded rail is governed by the surface panel's own breakpoint. */\n@media (max-width: 860px) {\n  .rail:not(.rail--embedded) {\n    display: none;\n  }\n}\n"] }]
+    }], null, { State: [{
+            type: Input,
+            args: [{ required: true }]
+        }], DevMode: [{
+            type: Input
+        }], Embedded: [{
+            type: Input
+        }], OpenRunRequested: [{
+            type: Output
+        }], OpenArtifactRequested: [{
+            type: Output
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(RealtimeActivityRailComponent, { className: "RealtimeActivityRailComponent", filePath: "src/lib/components/realtime/realtime-activity-rail.component.ts", lineNumber: 29 }); })();
+//# sourceMappingURL=realtime-activity-rail.component.js.map

package/dist/lib/components/realtime/realtime-activity-rail.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"realtime-activity-rail.component.js","sourceRoot":"","sources":["../../../../src/lib/components/realtime/realtime-activity-rail.component.ts","../../../../src/lib/components/realtime/realtime-activity-rail.component.html"],"names":[],"mappings":"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","sourcesContent":["import { Component, EventEmitter, Input, Output, OnInit, OnDestroy, ChangeDetectorRef, inject } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { Subscription } from 'rxjs';\nimport {\n  RealtimeSessionState, RealtimeDelegationCardVM, FriendlyStepLabel, FormatElapsed\n} from './realtime-session-state';\nimport { ParsedDelegationArtifact } from '../../services/delegation-result-parser';\n\n/**\n * The \"Session activity\" RIGHT RAIL of the call overlay: a compact, newest-first list\n * of EVERY tool/agent call of the session — so parallel/multiple delegations live here\n * and the conversation thread stays clean.\n *\n * Each entry shows agent name, status (Running w/ spinner | Done | Failed), the latest\n * friendly step label, elapsed time for finished work, and a one-line result preview\n * for done items. Active items are emphasized; finished items are dimmed.\n *\n * Collapsible via the chevron in its header (collapses to a slim toggle strip).\n * Presentational over the same {@link RealtimeSessionState} the thread renders —\n * no subscriptions of its own beyond the state's change notifications.\n */\n@Component({\n  standalone: true,\n  selector: 'mj-realtime-activity-rail',\n  imports: [CommonModule],\n  templateUrl: './realtime-activity-rail.component.html',\n  styleUrl: './realtime-activity-rail.component.css'\n})\nexport class RealtimeActivityRailComponent implements OnInit, OnDestroy {\n  /** Maximum characters of the result preview in a done card. */\n  private static readonly PreviewMaxChars = 90;\n\n  /** Shared live-session state, owned by the overlay shell. */\n  @Input({ required: true }) State!: RealtimeSessionState;\n\n  /** Whether developer affordances (\"Open run\" links) are revealed (gear-gated). */\n  @Input() DevMode = false;\n\n  /**\n   * EMBEDDED mode: the rail renders as the content of the surface panel's Activity tab —\n   * its own header/collapse chrome is hidden (the panel's tab strip owns collapse) and it\n   * stretches to the pane's full width. Default `false` keeps the original standalone\n   * right-rail presentation for any other consumer.\n   */\n  @Input() Embedded = false;\n\n  /** Emitted with the delegated run's ID when an entry's dev \"Open run\" link is clicked. */\n  @Output() OpenRunRequested = new EventEmitter<string>();\n\n  /** Emitted when an entry's \"View\" artifact chip is clicked (focuses the artifact's tab). */\n  @Output() OpenArtifactRequested = new EventEmitter<ParsedDelegationArtifact>();\n\n  /** Whether the rail is collapsed to its slim toggle strip. */\n  public Collapsed = false;\n\n  private changedSub?: Subscription;\n  private cdr = inject(ChangeDetectorRef);\n\n  ngOnInit(): void {\n    this.changedSub = this.State.Changed$.subscribe(() => this.cdr.markForCheck());\n  }\n\n  ngOnDestroy(): void {\n    this.changedSub?.unsubscribe();\n  }\n\n  /** Toggle the rail between expanded and slim-collapsed. */\n  public Toggle(): void {\n    this.Collapsed = !this.Collapsed;\n  }\n\n  /** track fn for the @for over cards. */\n  public TrackCard(index: number, card: RealtimeDelegationCardVM): string {\n    return card.CallID;\n  }\n\n  /** Friendly label of the card's latest step. */\n  public StepLabel(card: RealtimeDelegationCardVM): string {\n    return FriendlyStepLabel(card.LatestStep, card.LatestMessage);\n  }\n\n  /** Elapsed duration for finished work (\"8s\", \"1m 04s\"); null while running (kept cheap). */\n  public Elapsed(card: RealtimeDelegationCardVM): string | null {\n    if (card.FinishedAt == null) {\n      return null;\n    }\n    return FormatElapsed(card.FinishedAt - card.StartedAt);\n  }\n\n  /** True when the dev \"Open run\" link should render for this card (gear on + run id known). */\n  public ShowOpenRun(card: RealtimeDelegationCardVM): boolean {\n    return this.DevMode && !!card.RunID;\n  }\n\n  /** Emits the open-run request for the card's delegated run. */\n  public OpenRun(card: RealtimeDelegationCardVM): void {\n    if (card.RunID) {\n      this.OpenRunRequested.emit(card.RunID);\n    }\n  }\n\n  /** The artifacts a done card carries (empty array when none — keeps the template simple). */\n  public CardArtifacts(card: RealtimeDelegationCardVM): ParsedDelegationArtifact[] {\n    return card.Done && card.Artifacts ? card.Artifacts : [];\n  }\n\n  /** Emits the open-artifact request for a card's produced artifact. */\n  public OpenArtifact(artifact: ParsedDelegationArtifact): void {\n    this.OpenArtifactRequested.emit(artifact);\n  }\n\n  /** One-line result preview for done items. */\n  public Preview(card: RealtimeDelegationCardVM): string {\n    const text = (card.Result || card.LatestMessage || '').replace(/\\s+/g, ' ').trim();\n    const max = RealtimeActivityRailComponent.PreviewMaxChars;\n    return text.length > max ? `${text.slice(0, max).trimEnd()}…` : text;\n  }\n}\n","<aside class=\"rail\" [class.rail--collapsed]=\"Collapsed && !Embedded\" [class.rail--embedded]=\"Embedded\" aria-label=\"Session activity\">\n  @if (!Embedded) {\n    <div class=\"rail__head\">\n      <button type=\"button\"\n              class=\"rail__toggle\"\n              (click)=\"Toggle()\"\n              [title]=\"Collapsed ? 'Show session activity' : 'Hide session activity'\"\n              [attr.aria-expanded]=\"!Collapsed\">\n        <i class=\"fa-solid\" [ngClass]=\"Collapsed ? 'fa-chevron-left' : 'fa-chevron-right'\" aria-hidden=\"true\"></i>\n      </button>\n      @if (!Collapsed) {\n        <span class=\"rail__title\">\n          <i class=\"fa-solid fa-list-check\" aria-hidden=\"true\"></i>\n          Session activity\n        </span>\n      }\n    </div>\n  }\n\n  @if (!Collapsed || Embedded) {\n    <div class=\"rail__list\">\n      @for (card of State.Cards; track TrackCard($index, card)) {\n        <div class=\"act-card\"\n             [class.act-card--running]=\"!card.Done\"\n             [class.act-card--done]=\"card.Done && card.Success\"\n             [class.act-card--failed]=\"card.Done && !card.Success\">\n          <div class=\"act-card__top\">\n            <span class=\"act-card__name\">{{ card.AgentName }}</span>\n            @if (!card.Done) {\n              <span class=\"act-status act-status--running\">\n                <i class=\"fa-solid fa-spinner spin\" aria-hidden=\"true\"></i> Running\n              </span>\n            } @else if (card.Success) {\n              <span class=\"act-status act-status--done\">\n                <i class=\"fa-solid fa-check\" aria-hidden=\"true\"></i> Done\n              </span>\n            } @else {\n              <span class=\"act-status act-status--failed\">\n                <i class=\"fa-solid fa-xmark\" aria-hidden=\"true\"></i> Failed\n              </span>\n            }\n          </div>\n          <div class=\"act-card__step\">{{ StepLabel(card) }}</div>\n          @if (card.Done) {\n            @if (Elapsed(card); as elapsed) {\n              <div class=\"act-card__meta\">\n                <i class=\"fa-regular fa-clock\" aria-hidden=\"true\"></i> {{ elapsed }}\n              </div>\n            }\n            @if (Preview(card)) {\n              <div class=\"act-card__preview\">{{ Preview(card) }}</div>\n            }\n          }\n          @for (artifact of CardArtifacts(card); track artifact.ArtifactVersionID) {\n            <button type=\"button\" class=\"act-card__artifact-link\" (click)=\"OpenArtifact(artifact)\"\n                    [title]=\"'View ' + artifact.Name\">\n              <i class=\"fa-solid fa-file-lines\" aria-hidden=\"true\"></i>\n              <span>View</span>\n              <i class=\"fa-solid fa-arrow-right\" aria-hidden=\"true\"></i>\n            </button>\n          }\n          @if (ShowOpenRun(card)) {\n            <button type=\"button\" class=\"act-card__dev-link\" (click)=\"OpenRun(card)\"\n                    title=\"Open the delegated agent run record\">\n              <i class=\"fa-solid fa-arrow-up-right-from-square\" aria-hidden=\"true\"></i>\n              <span>Open run</span>\n            </button>\n          }\n        </div>\n      } @empty {\n        <div class=\"rail__empty\">Tool and agent calls will appear here as they run.</div>\n      }\n    </div>\n  }\n</aside>\n"]}

package/dist/lib/components/realtime/realtime-agent-banner.component.d.ts

@@ -0,0 +1,117 @@
+import { EventEmitter } from '@angular/core';
+import { VoiceConnectionState } from '../../services/realtime-session.service';
+import { RealtimeUxDensity } from './realtime-disclosure';
+import * as i0 from "@angular/core";
+/**
+ * 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 declare class RealtimeAgentBannerComponent {
+    /** Current connection / turn state — drives the orb animation + state label. */
+    State: VoiceConnectionState;
+    /** Display name of the agent the voice session fronts (e.g. "Sage"). */
+    AgentName: string;
+    /**
+     * 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: string | null;
+    /** Whether developer affordances (the "Open session" link) are revealed (gear-gated). */
+    DevMode: boolean;
+    /** ID of the server-side agent session record (`MJ: AI Agent Sessions`), when known. */
+    SessionID: string | 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: boolean;
+    /** When reviewing: when the past session started (`__mj_CreatedAt`). */
+    ReviewStartedAt: Date | null;
+    /** When reviewing: when the past session closed (null while it is still open). */
+    ReviewClosedAt: Date | null;
+    /** When reviewing: why the past session closed (`Explicit` | `Janitor` | `Shutdown` | `Error`), when known. */
+    ReviewCloseReason: string | null;
+    /** Whether captions are currently shown (active state on the captions control). */
+    CaptionsOn: boolean;
+    /** Whether the captions control renders (disclosure level 1+). */
+    ShowCaptionsControl: boolean;
+    /** Whether the gear (density escape hatch + dev toggle) renders (disclosure level 2+). */
+    ShowGear: boolean;
+    /** Whether the End-call pill renders here (level 2+; the strip's big End owns it below). */
+    ShowEnd: boolean;
+    /** Whether the Minimize control renders (live sessions only). */
+    ShowMinimize: boolean;
+    /** Whether the "Return to pure audio" control renders (live + disclosure level above 0). */
+    ShowPureAudio: boolean;
+    /** The user's current interface-density override (selected state in the gear popover). */
+    Density: RealtimeUxDensity;
+    /** Emitted with the session record's ID when the dev "Open session" link is clicked. */
+    OpenSessionRequested: EventEmitter<string>;
+    /** Emitted when the user toggles captions; the overlay flips its caption state. */
+    CaptionsToggled: EventEmitter<boolean>;
+    /** Emitted when the user toggles developer links from the gear popover. */
+    DevModeToggled: EventEmitter<boolean>;
+    /** Emitted when the user picks an interface density in the gear popover. */
+    DensityChanged: EventEmitter<RealtimeUxDensity>;
+    /** Emitted when the user minimizes the call view (the call stays live). */
+    MinimizeRequested: EventEmitter<void>;
+    /** Emitted when the user asks to return to the pure-audio surface (level 0, this session). */
+    PureAudioRequested: EventEmitter<void>;
+    /** Emitted when the user ends the call from the app-bar's End pill. */
+    EndRequested: EventEmitter<void>;
+    /** Review only: the user asked to RESUME the reviewed session as a new live call. */
+    StartLiveRequested: EventEmitter<void>;
+    /** Review only: the user asked to close the review and return to the conversation. */
+    CloseRequested: EventEmitter<void>;
+    /** Whether the gear popover is open (closed by any outside click). */
+    GearOpen: boolean;
+    /** The density choices the gear popover offers, in display order. */
+    readonly Densities: ReadonlyArray<{
+        Key: RealtimeUxDensity;
+        Label: string;
+    }>;
+    /** True when the dev "Open session" link should render (gear on + session id known). */
+    get ShowOpenSession(): boolean;
+    /** Emits the open-session request for the live agent session record. */
+    OpenSession(): void;
+    /** Toggles the captions control and notifies the overlay. */
+    ToggleCaptions(): void;
+    /** Opens/closes the gear popover (stops propagation so the outside-click close skips it). */
+    ToggleGear(event: MouseEvent): void;
+    /** Any outside click closes the gear popover. */
+    OnDocumentClick(): void;
+    /** Gear popover: pick an interface density (the overlay applies + persists it). */
+    SelectDensity(density: RealtimeUxDensity): void;
+    /** Gear popover: toggle developer links. */
+    ToggleDev(): void;
+    /** The review banner's "started → closed" time-range label (empty when the start is unknown). */
+    get ReviewRangeLabel(): string;
+    /** Human label for the close-reason chip (empty hides the chip). */
+    get ReviewCloseReasonLabel(): string;
+    /** Compact date+time stamp; same-day end stamps drop the redundant date part. */
+    private formatStamp;
+    /** Maps the realtime state to the orb's `data-state` (the orb only models active turn-states). */
+    OrbState(state: VoiceConnectionState): 'speaking' | 'listening' | 'thinking';
+    /** Human-readable state label, agent-aware where it reads better. */
+    StateLabel(state: VoiceConnectionState): string;
+    /** True while the state pill should show a spinner instead of the waveform. */
+    IsBusy(state: VoiceConnectionState): boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RealtimeAgentBannerComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<RealtimeAgentBannerComponent, "mj-realtime-agent-banner", never, { "State": { "alias": "State"; "required": true; }; "AgentName": { "alias": "AgentName"; "required": false; }; "ModelName": { "alias": "ModelName"; "required": false; }; "DevMode": { "alias": "DevMode"; "required": false; }; "SessionID": { "alias": "SessionID"; "required": false; }; "ReviewMode": { "alias": "ReviewMode"; "required": false; }; "ReviewStartedAt": { "alias": "ReviewStartedAt"; "required": false; }; "ReviewClosedAt": { "alias": "ReviewClosedAt"; "required": false; }; "ReviewCloseReason": { "alias": "ReviewCloseReason"; "required": false; }; "CaptionsOn": { "alias": "CaptionsOn"; "required": false; }; "ShowCaptionsControl": { "alias": "ShowCaptionsControl"; "required": false; }; "ShowGear": { "alias": "ShowGear"; "required": false; }; "ShowEnd": { "alias": "ShowEnd"; "required": false; }; "ShowMinimize": { "alias": "ShowMinimize"; "required": false; }; "ShowPureAudio": { "alias": "ShowPureAudio"; "required": false; }; "Density": { "alias": "Density"; "required": false; }; }, { "OpenSessionRequested": "OpenSessionRequested"; "CaptionsToggled": "CaptionsToggled"; "DevModeToggled": "DevModeToggled"; "DensityChanged": "DensityChanged"; "MinimizeRequested": "MinimizeRequested"; "PureAudioRequested": "PureAudioRequested"; "EndRequested": "EndRequested"; "StartLiveRequested": "StartLiveRequested"; "CloseRequested": "CloseRequested"; }, never, never, true, never>;
+}
+//# sourceMappingURL=realtime-agent-banner.component.d.ts.map

package/dist/lib/components/realtime/realtime-agent-banner.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"realtime-agent-banner.component.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/realtime/realtime-agent-banner.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,YAAY,EAA+B,MAAM,eAAe,CAAC;AAErF,OAAO,EAAE,oBAAoB,EAAE,MAAM,yCAAyC,CAAC;AAC/E,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;;AAE1D;;;;;;;;;;;;;;;;;GAiBG;AACH,qBAOa,4BAA4B;IACvC,gFAAgF;IACrD,KAAK,EAAG,oBAAoB,CAAC;IAExD,wEAAwE;IAC/D,SAAS,SAAe;IAEjC;;;OAGG;IACM,SAAS,EAAE,MAAM,GAAG,IAAI,CAAQ;IAEzC,yFAAyF;IAChF,OAAO,UAAS;IAEzB,wFAAwF;IAC/E,SAAS,EAAE,MAAM,GAAG,IAAI,CAAQ;IAEzC;;;;OAIG;IACM,UAAU,UAAS;IAE5B,wEAAwE;IAC/D,eAAe,EAAE,IAAI,GAAG,IAAI,CAAQ;IAE7C,kFAAkF;IACzE,cAAc,EAAE,IAAI,GAAG,IAAI,CAAQ;IAE5C,+GAA+G;IACtG,iBAAiB,EAAE,MAAM,GAAG,IAAI,CAAQ;IAIjD,mFAAmF;IAC1E,UAAU,UAAQ;IAE3B,kEAAkE;IACzD,mBAAmB,UAAS;IAErC,0FAA0F;IACjF,QAAQ,UAAS;IAE1B,4FAA4F;IACnF,OAAO,UAAS;IAEzB,iEAAiE;IACxD,YAAY,UAAS;IAE9B,4FAA4F;IACnF,aAAa,UAAS;IAE/B,0FAA0F;IACjF,OAAO,EAAE,iBAAiB,CAAU;IAE7C,wFAAwF;IAC9E,oBAAoB,uBAA8B;IAE5D,mFAAmF;IACzE,eAAe,wBAA+B;IAExD,2EAA2E;IACjE,cAAc,wBAA+B;IAEvD,4EAA4E;IAClE,cAAc,kCAAyC;IAEjE,2EAA2E;IACjE,iBAAiB,qBAA4B;IAEvD,8FAA8F;IACpF,kBAAkB,qBAA4B;IAExD,uEAAuE;IAC7D,YAAY,qBAA4B;IAElD,qFAAqF;IAC3E,kBAAkB,qBAA4B;IAExD,sFAAsF;IAC5E,cAAc,qBAA4B;IAEpD,sEAAsE;IAC/D,QAAQ,UAAS;IAExB,qEAAqE;IACrE,SAAgB,SAAS,EAAE,aAAa,CAAC;QAAE,GAAG,EAAE,iBAAiB,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAKjF;IAEF,wFAAwF;IACxF,IAAW,eAAe,IAAI,OAAO,CAEpC;IAED,wEAAwE;IACjE,WAAW,IAAI,IAAI;IAM1B,6DAA6D;IACtD,cAAc,IAAI,IAAI;IAK7B,6FAA6F;IACtF,UAAU,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;IAK1C,iDAAiD;IAE1C,eAAe,IAAI,IAAI;IAM9B,mFAAmF;IAC5E,aAAa,CAAC,OAAO,EAAE,iBAAiB,GAAG,IAAI;IAItD,4CAA4C;IACrC,SAAS,IAAI,IAAI;IAKxB,iGAAiG;IACjG,IAAW,gBAAgB,IAAI,MAAM,CASpC;IAED,oEAAoE;IACpE,IAAW,sBAAsB,IAAI,MAAM,CAQ1C;IAED,iFAAiF;IACjF,OAAO,CAAC,WAAW;IAQnB,kGAAkG;IAC3F,QAAQ,CAAC,KAAK,EAAE,oBAAoB,GAAG,UAAU,GAAG,WAAW,GAAG,UAAU;IAQnF,qEAAqE;IAC9D,UAAU,CAAC,KAAK,EAAE,oBAAoB,GAAG,MAAM;IAYtD,+EAA+E;IACxE,MAAM,CAAC,KAAK,EAAE,oBAAoB,GAAG,OAAO;yCAlMxC,4BAA4B;2CAA5B,4BAA4B;CAqMxC"}