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

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

@@ -1 +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 { AngularSplitModule, SplitGutterInteractionEvent } from 'angular-split';\nimport { UserInfo } from '@memberjunction/core';\nimport { UserInfoEngine } from '@memberjunction/core-entities';\nimport { ArtifactsModule } from '@memberjunction/ng-artifacts';\nimport {\n  RealtimeSessionState, RealtimeDelegationCardVM, FriendlyStepLabel, FormatElapsed\n} from './realtime-session-state';\nimport { ParsedDelegationArtifact } from '../../services/delegation-result-parser';\nimport {\n  ACTIVITY_SPLIT_DEFAULT_PERCENT, ACTIVITY_SPLIT_PREF_KEY,\n  ClampActivitySplitPercent, ParseActivitySplitPercent, SerializeActivitySplitPercent\n} from './realtime-surface-tab-style';\n\n/**\n * The \"Session activity\" surface (the Activity tab's content): a compact, newest-first list\n * of EVERY tool/agent call of the session — so parallel/multiple delegations live here and\n * the conversation thread stays clean.\n *\n * Each entry shows agent name, status, the latest friendly step label, elapsed time, and a\n * one-line result preview. When a run produced ARTIFACTS, each artifact renders as an inline\n * PREVIEW card (reusing `mj-artifact-message-card`, the same component the conversation\n * messages use). Clicking a preview SPLITS this pane horizontally — activity list on the\n * LEFT, the full artifact viewer on the RIGHT (`as-split`); clicking another swaps the right\n * pane; a close control collapses back to full-width activity. The split width is persisted\n * per-user via {@link UserInfoEngine} (NOT localStorage). This replaces the old \"one surface\n * tab per artifact\" model.\n *\n * Collapsible via the chevron in its header (standalone presentation only). Presentational\n * over the same {@link RealtimeSessionState} the thread renders.\n */\n@Component({\n  standalone: true,\n  selector: 'mj-realtime-activity-rail',\n  imports: [CommonModule, AngularSplitModule, ArtifactsModule],\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  /** The signed-in user, threaded to the split-pane artifact viewer. */\n  @Input() CurrentUser: UserInfo | null = null;\n\n  /** The active environment id, threaded to the split-pane artifact viewer. */\n  @Input() EnvironmentID = '';\n\n  /**\n   * Extra artifacts NOT tied to a specific activity card — the SESSION-REVIEW chain's\n   * carryover artifacts. Rendered as a \"Session artifacts\" group above the activity list so\n   * a reviewed session's outputs are reachable inside the Activity tab (the live path gets\n   * artifacts from each card's `Artifacts`). Empty for a live session.\n   */\n  @Input() ExtraArtifacts: ParsedDelegationArtifact[] = [];\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 artifact is opened in the split viewer (lets a host react if it wants). */\n  @Output() OpenArtifactRequested = new EventEmitter<ParsedDelegationArtifact>();\n\n  /** Whether the rail is collapsed to its slim toggle strip (standalone mode only). */\n  public Collapsed = false;\n\n  /** The artifact currently shown in the split-pane viewer, or null when the split is closed. */\n  public SelectedArtifact: ParsedDelegationArtifact | null = null;\n\n  /** The artifact (right) pane's width percentage — persisted per-user, clamped on load. */\n  public SplitArtifactPercent = ACTIVITY_SPLIT_DEFAULT_PERCENT;\n\n  private changedSub?: Subscription;\n  private cdr = inject(ChangeDetectorRef);\n\n  /** True while reduced-motion is preferred — disables the split's drag transition. */\n  public readonly PrefersReducedMotion =\n    typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches;\n\n  ngOnInit(): void {\n    this.loadSplitPref();\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 (standalone presentation). */\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). Suppressed for direct actions and narration. */\n  public ShowOpenRun(card: RealtimeDelegationCardVM): boolean {\n    return this.DevMode && card.Kind === 'agent' && !!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  /** track fn for the @for over a card's artifacts. */\n  public TrackArtifact(index: number, artifact: ParsedDelegationArtifact): string {\n    return artifact.ArtifactVersionID;\n  }\n\n  /** Whether the artifact `a` is the one currently open in the split viewer. */\n  public IsArtifactOpen(artifact: ParsedDelegationArtifact): boolean {\n    return this.SelectedArtifact?.ArtifactVersionID === artifact.ArtifactVersionID;\n  }\n\n  /**\n   * Opens (or swaps to) `artifact` in the split-pane viewer: the activity list keeps the\n   * left pane, the full artifact viewer fills the right. Re-opening the same artifact is a\n   * no-op; opening a different one swaps the right pane. Also reachable from the surface-tabs\n   * \"View →\" affordance.\n   */\n  public OpenArtifact(artifact: ParsedDelegationArtifact): void {\n    if (this.SelectedArtifact?.ArtifactVersionID === artifact.ArtifactVersionID) {\n      return;\n    }\n    this.SelectedArtifact = artifact;\n    this.OpenArtifactRequested.emit(artifact);\n    this.cdr.markForCheck();\n  }\n\n  /** Closes the split, returning to a full-width activity list. */\n  public CloseArtifact(): void {\n    if (this.SelectedArtifact) {\n      this.SelectedArtifact = null;\n      this.cdr.markForCheck();\n    }\n  }\n\n  /**\n   * `as-split` drag finished: adopt + persist the artifact (right) pane's width percentage\n   * per-user (debounced, via {@link UserInfoEngine} — never localStorage). The split reports\n   * the two area sizes (percent here); index 1 is the artifact pane. A wildcard `'*'` size\n   * (non-numeric) is ignored — nothing to persist.\n   */\n  public OnSplitDragEnd(event: SplitGutterInteractionEvent): void {\n    const right = event.sizes[1];\n    if (typeof right !== 'number') {\n      return;\n    }\n    this.SplitArtifactPercent = ClampActivitySplitPercent(right);\n    this.persistSplitPref(this.SplitArtifactPercent);\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  /** Reads the persisted split width once (tolerant; default tier applies when unset). */\n  private loadSplitPref(): void {\n    try {\n      const percent = ParseActivitySplitPercent(UserInfoEngine.Instance.GetSetting(ACTIVITY_SPLIT_PREF_KEY));\n      if (percent !== null) {\n        this.SplitArtifactPercent = percent;\n      }\n    } catch {\n      // UserInfoEngine not configured (plain-node tests / early bootstrap) — default applies.\n    }\n  }\n\n  /** Persists the split width preference server-side (debounced, best-effort). */\n  private persistSplitPref(percent: number): void {\n    try {\n      UserInfoEngine.Instance.SetSettingDebounced(ACTIVITY_SPLIT_PREF_KEY, SerializeActivitySplitPercent(percent));\n    } catch {\n      // engine unavailable — the width still applies for this session\n    }\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-wave-square\" aria-hidden=\"true\"></i>\n          Session activity\n        </span>\n      }\n    </div>\n  }\n\n  @if (!Collapsed || Embedded) {\n    <as-split class=\"rail__split\"\n              direction=\"horizontal\"\n              unit=\"percent\"\n              [gutterSize]=\"SelectedArtifact ? 8 : 0\"\n              [disabled]=\"!SelectedArtifact\"\n              [useTransition]=\"!PrefersReducedMotion\"\n              (dragEnd)=\"OnSplitDragEnd($event)\">\n\n      <!-- LEFT: the activity list (full width until an artifact splits the pane) -->\n      <as-split-area [size]=\"SelectedArtifact ? (100 - SplitArtifactPercent) : 100\">\n        <div class=\"rail__list\">\n          @if (ExtraArtifacts.length > 0) {\n            <div class=\"rail__group\">\n              <div class=\"rail__group-title\">\n                <i class=\"fa-solid fa-folder-open\" aria-hidden=\"true\"></i> Session artifacts\n              </div>\n              @for (artifact of ExtraArtifacts; track TrackArtifact($index, artifact)) {\n                <div class=\"act-card__artifact\"\n                     [class.act-card__artifact--open]=\"IsArtifactOpen(artifact)\">\n                  @if (CurrentUser) {\n                    <mj-artifact-message-card\n                      [artifactId]=\"artifact.ArtifactID\"\n                      [currentUser]=\"CurrentUser\"\n                      (actionPerformed)=\"OpenArtifact(artifact)\">\n                    </mj-artifact-message-card>\n                  } @else {\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>{{ artifact.Name }}</span>\n                      <i class=\"fa-solid fa-up-right-and-down-left-from-center\" aria-hidden=\"true\"></i>\n                    </button>\n                  }\n                </div>\n              }\n            </div>\n          }\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 TrackArtifact($index, artifact)) {\n                <div class=\"act-card__artifact\"\n                     [class.act-card__artifact--open]=\"IsArtifactOpen(artifact)\">\n                  @if (CurrentUser) {\n                    <!-- Inline preview (same component the conversation message cards use);\n                         clicking expands it into the split-pane viewer on the right. -->\n                    <mj-artifact-message-card\n                      [artifactId]=\"artifact.ArtifactID\"\n                      [currentUser]=\"CurrentUser\"\n                      (actionPerformed)=\"OpenArtifact(artifact)\">\n                    </mj-artifact-message-card>\n                  } @else {\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>{{ artifact.Name }}</span>\n                      <i class=\"fa-solid fa-up-right-and-down-left-from-center\" aria-hidden=\"true\"></i>\n                    </button>\n                  }\n                </div>\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      </as-split-area>\n\n      <!-- RIGHT: the full artifact viewer (only present while an artifact is open) -->\n      @if (SelectedArtifact; as artifact) {\n        <as-split-area [size]=\"SplitArtifactPercent\" [minSize]=\"25\">\n          <div class=\"rail__viewer\">\n            <div class=\"rail__viewer-head\">\n              <span class=\"rail__viewer-title\" [title]=\"artifact.Name\">\n                <i class=\"fa-solid fa-file-lines\" aria-hidden=\"true\"></i>\n                {{ artifact.Name }}\n              </span>\n              <button type=\"button\" class=\"rail__viewer-close\" (click)=\"CloseArtifact()\"\n                      title=\"Close artifact\" aria-label=\"Close artifact\">\n                <i class=\"fa-solid fa-xmark\" aria-hidden=\"true\"></i>\n              </button>\n            </div>\n            <div class=\"rail__viewer-body\">\n              <mj-artifact-viewer-panel\n                [artifactId]=\"artifact.ArtifactID\"\n                [currentUser]=\"CurrentUser!\"\n                [environmentId]=\"EnvironmentID\"\n                [showHeader]=\"false\"\n                [showTabs]=\"false\"\n                [showSaveToCollection]=\"false\"\n                [showCloseButton]=\"false\"\n                [showMaximizeButton]=\"false\">\n              </mj-artifact-viewer-panel>\n            </div>\n          </div>\n        </as-split-area>\n      }\n    </as-split>\n  }\n</aside>\n"]}
+{"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 { AngularSplitModule, SplitGutterInteractionEvent } from 'angular-split';\nimport { UserInfo } from '@memberjunction/core';\nimport { UserInfoEngine } from '@memberjunction/core-entities';\nimport { ArtifactsModule } from '@memberjunction/ng-artifacts';\nimport {\n  RealtimeSessionState, RealtimeDelegationCardVM, FriendlyStepLabel, FormatElapsed\n} from './realtime-session-state';\nimport { ParsedDelegationArtifact } from '@memberjunction/realtime-runtime';\nimport {\n  ACTIVITY_SPLIT_DEFAULT_PERCENT, ACTIVITY_SPLIT_PREF_KEY,\n  ClampActivitySplitPercent, ParseActivitySplitPercent, SerializeActivitySplitPercent\n} from './realtime-surface-tab-style';\n\n/**\n * The \"Session activity\" surface (the Activity tab's content): a compact, newest-first list\n * of EVERY tool/agent call of the session — so parallel/multiple delegations live here and\n * the conversation thread stays clean.\n *\n * Each entry shows agent name, status, the latest friendly step label, elapsed time, and a\n * one-line result preview. When a run produced ARTIFACTS, each artifact renders as an inline\n * PREVIEW card (reusing `mj-artifact-message-card`, the same component the conversation\n * messages use). Clicking a preview SPLITS this pane horizontally — activity list on the\n * LEFT, the full artifact viewer on the RIGHT (`as-split`); clicking another swaps the right\n * pane; a close control collapses back to full-width activity. The split width is persisted\n * per-user via {@link UserInfoEngine} (NOT localStorage). This replaces the old \"one surface\n * tab per artifact\" model.\n *\n * Collapsible via the chevron in its header (standalone presentation only). Presentational\n * over the same {@link RealtimeSessionState} the thread renders.\n */\n@Component({\n  standalone: true,\n  selector: 'mj-realtime-activity-rail',\n  imports: [CommonModule, AngularSplitModule, ArtifactsModule],\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  /** The signed-in user, threaded to the split-pane artifact viewer. */\n  @Input() CurrentUser: UserInfo | null = null;\n\n  /** The active environment id, threaded to the split-pane artifact viewer. */\n  @Input() EnvironmentID = '';\n\n  /**\n   * Extra artifacts NOT tied to a specific activity card — the SESSION-REVIEW chain's\n   * carryover artifacts. Rendered as a \"Session artifacts\" group above the activity list so\n   * a reviewed session's outputs are reachable inside the Activity tab (the live path gets\n   * artifacts from each card's `Artifacts`). Empty for a live session.\n   */\n  @Input() ExtraArtifacts: ParsedDelegationArtifact[] = [];\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 artifact is opened in the split viewer (lets a host react if it wants). */\n  @Output() OpenArtifactRequested = new EventEmitter<ParsedDelegationArtifact>();\n\n  /** Whether the rail is collapsed to its slim toggle strip (standalone mode only). */\n  public Collapsed = false;\n\n  /** The artifact currently shown in the split-pane viewer, or null when the split is closed. */\n  public SelectedArtifact: ParsedDelegationArtifact | null = null;\n\n  /** The artifact (right) pane's width percentage — persisted per-user, clamped on load. */\n  public SplitArtifactPercent = ACTIVITY_SPLIT_DEFAULT_PERCENT;\n\n  private changedSub?: Subscription;\n  private cdr = inject(ChangeDetectorRef);\n\n  /** True while reduced-motion is preferred — disables the split's drag transition. */\n  public readonly PrefersReducedMotion =\n    typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches;\n\n  ngOnInit(): void {\n    this.loadSplitPref();\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 (standalone presentation). */\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). Suppressed for direct actions and narration. */\n  public ShowOpenRun(card: RealtimeDelegationCardVM): boolean {\n    return this.DevMode && card.Kind === 'agent' && !!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  /** track fn for the @for over a card's artifacts. */\n  public TrackArtifact(index: number, artifact: ParsedDelegationArtifact): string {\n    return artifact.ArtifactVersionID;\n  }\n\n  /** Whether the artifact `a` is the one currently open in the split viewer. */\n  public IsArtifactOpen(artifact: ParsedDelegationArtifact): boolean {\n    return this.SelectedArtifact?.ArtifactVersionID === artifact.ArtifactVersionID;\n  }\n\n  /**\n   * Opens (or swaps to) `artifact` in the split-pane viewer: the activity list keeps the\n   * left pane, the full artifact viewer fills the right. Re-opening the same artifact is a\n   * no-op; opening a different one swaps the right pane. Also reachable from the surface-tabs\n   * \"View →\" affordance.\n   */\n  public OpenArtifact(artifact: ParsedDelegationArtifact): void {\n    if (this.SelectedArtifact?.ArtifactVersionID === artifact.ArtifactVersionID) {\n      return;\n    }\n    this.SelectedArtifact = artifact;\n    this.OpenArtifactRequested.emit(artifact);\n    this.cdr.markForCheck();\n  }\n\n  /** Closes the split, returning to a full-width activity list. */\n  public CloseArtifact(): void {\n    if (this.SelectedArtifact) {\n      this.SelectedArtifact = null;\n      this.cdr.markForCheck();\n    }\n  }\n\n  /**\n   * `as-split` drag finished: adopt + persist the artifact (right) pane's width percentage\n   * per-user (debounced, via {@link UserInfoEngine} — never localStorage). The split reports\n   * the two area sizes (percent here); index 1 is the artifact pane. A wildcard `'*'` size\n   * (non-numeric) is ignored — nothing to persist.\n   */\n  public OnSplitDragEnd(event: SplitGutterInteractionEvent): void {\n    const right = event.sizes[1];\n    if (typeof right !== 'number') {\n      return;\n    }\n    this.SplitArtifactPercent = ClampActivitySplitPercent(right);\n    this.persistSplitPref(this.SplitArtifactPercent);\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  /** Reads the persisted split width once (tolerant; default tier applies when unset). */\n  private loadSplitPref(): void {\n    try {\n      const percent = ParseActivitySplitPercent(UserInfoEngine.Instance.GetSetting(ACTIVITY_SPLIT_PREF_KEY));\n      if (percent !== null) {\n        this.SplitArtifactPercent = percent;\n      }\n    } catch {\n      // UserInfoEngine not configured (plain-node tests / early bootstrap) — default applies.\n    }\n  }\n\n  /** Persists the split width preference server-side (debounced, best-effort). */\n  private persistSplitPref(percent: number): void {\n    try {\n      UserInfoEngine.Instance.SetSettingDebounced(ACTIVITY_SPLIT_PREF_KEY, SerializeActivitySplitPercent(percent));\n    } catch {\n      // engine unavailable — the width still applies for this session\n    }\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-wave-square\" aria-hidden=\"true\"></i>\n          Session activity\n        </span>\n      }\n    </div>\n  }\n\n  @if (!Collapsed || Embedded) {\n    <as-split class=\"rail__split\"\n              direction=\"horizontal\"\n              unit=\"percent\"\n              [gutterSize]=\"SelectedArtifact ? 8 : 0\"\n              [disabled]=\"!SelectedArtifact\"\n              [useTransition]=\"!PrefersReducedMotion\"\n              (dragEnd)=\"OnSplitDragEnd($event)\">\n\n      <!-- LEFT: the activity list (full width until an artifact splits the pane) -->\n      <as-split-area [size]=\"SelectedArtifact ? (100 - SplitArtifactPercent) : 100\">\n        <div class=\"rail__list\">\n          @if (ExtraArtifacts.length > 0) {\n            <div class=\"rail__group\">\n              <div class=\"rail__group-title\">\n                <i class=\"fa-solid fa-folder-open\" aria-hidden=\"true\"></i> Session artifacts\n              </div>\n              @for (artifact of ExtraArtifacts; track TrackArtifact($index, artifact)) {\n                <div class=\"act-card__artifact\"\n                     [class.act-card__artifact--open]=\"IsArtifactOpen(artifact)\">\n                  @if (CurrentUser) {\n                    <mj-artifact-message-card\n                      [artifactId]=\"artifact.ArtifactID\"\n                      [currentUser]=\"CurrentUser\"\n                      (actionPerformed)=\"OpenArtifact(artifact)\">\n                    </mj-artifact-message-card>\n                  } @else {\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>{{ artifact.Name }}</span>\n                      <i class=\"fa-solid fa-up-right-and-down-left-from-center\" aria-hidden=\"true\"></i>\n                    </button>\n                  }\n                </div>\n              }\n            </div>\n          }\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 TrackArtifact($index, artifact)) {\n                <div class=\"act-card__artifact\"\n                     [class.act-card__artifact--open]=\"IsArtifactOpen(artifact)\">\n                  @if (CurrentUser) {\n                    <!-- Inline preview (same component the conversation message cards use);\n                         clicking expands it into the split-pane viewer on the right. -->\n                    <mj-artifact-message-card\n                      [artifactId]=\"artifact.ArtifactID\"\n                      [currentUser]=\"CurrentUser\"\n                      (actionPerformed)=\"OpenArtifact(artifact)\">\n                    </mj-artifact-message-card>\n                  } @else {\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>{{ artifact.Name }}</span>\n                      <i class=\"fa-solid fa-up-right-and-down-left-from-center\" aria-hidden=\"true\"></i>\n                    </button>\n                  }\n                </div>\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      </as-split-area>\n\n      <!-- RIGHT: the full artifact viewer (only present while an artifact is open) -->\n      @if (SelectedArtifact; as artifact) {\n        <as-split-area [size]=\"SplitArtifactPercent\" [minSize]=\"25\">\n          <div class=\"rail__viewer\">\n            <div class=\"rail__viewer-head\">\n              <span class=\"rail__viewer-title\" [title]=\"artifact.Name\">\n                <i class=\"fa-solid fa-file-lines\" aria-hidden=\"true\"></i>\n                {{ artifact.Name }}\n              </span>\n              <button type=\"button\" class=\"rail__viewer-close\" (click)=\"CloseArtifact()\"\n                      title=\"Close artifact\" aria-label=\"Close artifact\">\n                <i class=\"fa-solid fa-xmark\" aria-hidden=\"true\"></i>\n              </button>\n            </div>\n            <div class=\"rail__viewer-body\">\n              <mj-artifact-viewer-panel\n                [artifactId]=\"artifact.ArtifactID\"\n                [currentUser]=\"CurrentUser!\"\n                [environmentId]=\"EnvironmentID\"\n                [showHeader]=\"false\"\n                [showTabs]=\"false\"\n                [showSaveToCollection]=\"false\"\n                [showCloseButton]=\"false\"\n                [showMaximizeButton]=\"false\">\n              </mj-artifact-viewer-panel>\n            </div>\n          </div>\n        </as-split-area>\n      }\n    </as-split>\n  }\n</aside>\n"]}

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

@@ -1,5 +1,5 @@
 import { EventEmitter } from '@angular/core';
-import { RealtimeConnectionState } from '../../services/realtime-session.service';
+import { RealtimeConnectionState } from '@memberjunction/realtime-runtime';
 import { RealtimeUxDensity } from './realtime-disclosure';
 import * as i0 from "@angular/core";
 /**

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

@@ -1 +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,uBAAuB,EAAE,MAAM,yCAAyC,CAAC;AAClF,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;;AAE1D;;;;;;;;;;;;;;;;;;GAkBG;AACH,qBAOa,4BAA4B;IACvC,gFAAgF;IACrD,KAAK,EAAG,uBAAuB,CAAC;IAE3D;;;;;;;OAOG;IACM,OAAO,UAAS;IAEzB,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;IAMjD,0FAA0F;IACjF,QAAQ,UAAS;IAE1B;;;;;OAKG;IACM,iBAAiB,UAAQ;IAElC,iEAAiE;IACxD,YAAY,UAAS;IAE9B,0FAA0F;IACjF,OAAO,EAAE,iBAAiB,CAAU;IAE7C,wFAAwF;IAC9E,oBAAoB,uBAA8B;IAE5D,2EAA2E;IACjE,cAAc,wBAA+B;IAEvD,4EAA4E;IAClE,cAAc,kCAAyC;IAEjE,2EAA2E;IACjE,iBAAiB,qBAA4B;IAEvD,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,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,uBAAuB,GAAG,UAAU,GAAG,WAAW,GAAG,UAAU;IAQtF,qEAAqE;IAC9D,UAAU,CAAC,KAAK,EAAE,uBAAuB,GAAG,MAAM;IAYzD,+EAA+E;IACxE,MAAM,CAAC,KAAK,EAAE,uBAAuB,GAAG,OAAO;yCA3L3C,4BAA4B;2CAA5B,4BAA4B;CA8LxC"}
+{"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,uBAAuB,EAAE,MAAM,kCAAkC,CAAC;AAC3E,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;;AAE1D;;;;;;;;;;;;;;;;;;GAkBG;AACH,qBAOa,4BAA4B;IACvC,gFAAgF;IACrD,KAAK,EAAG,uBAAuB,CAAC;IAE3D;;;;;;;OAOG;IACM,OAAO,UAAS;IAEzB,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;IAMjD,0FAA0F;IACjF,QAAQ,UAAS;IAE1B;;;;;OAKG;IACM,iBAAiB,UAAQ;IAElC,iEAAiE;IACxD,YAAY,UAAS;IAE9B,0FAA0F;IACjF,OAAO,EAAE,iBAAiB,CAAU;IAE7C,wFAAwF;IAC9E,oBAAoB,uBAA8B;IAE5D,2EAA2E;IACjE,cAAc,wBAA+B;IAEvD,4EAA4E;IAClE,cAAc,kCAAyC;IAEjE,2EAA2E;IACjE,iBAAiB,qBAA4B;IAEvD,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,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,uBAAuB,GAAG,UAAU,GAAG,WAAW,GAAG,UAAU;IAQtF,qEAAqE;IAC9D,UAAU,CAAC,KAAK,EAAE,uBAAuB,GAAG,MAAM;IAYzD,+EAA+E;IACxE,MAAM,CAAC,KAAK,EAAE,uBAAuB,GAAG,OAAO;yCA3L3C,4BAA4B;2CAA5B,4BAA4B;CA8LxC"}

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

@@ -1 +1 @@
-{"version":3,"file":"realtime-agent-banner.component.js","sourceRoot":"","sources":["../../../../src/lib/components/realtime/realtime-agent-banner.component.ts","../../../../src/lib/components/realtime/realtime-agent-banner.component.html"],"names":[],"mappings":"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","sourcesContent":["import { Component, EventEmitter, HostListener, Input, Output } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { RealtimeConnectionState } from '../../services/realtime-session.service';\nimport { RealtimeUxDensity } from './realtime-disclosure';\n\n/**\n * The call overlay's UNIFIED APP-BAR (per Redesign A — `plans/realtime/mockups/redesign-a.html`):\n * ONE header that owns identity, state, and every session action.\n *\n *  - LEFT: the glowing agent orb (motion = turn-state), agent name + \"Co-Agent\" badge,\n *    \"speaking as\" subline (+ subtle realtime-model suffix), and the state pill that swaps\n *    between a waveform (speaking/listening) and a spinner (connecting/thinking).\n *  - RIGHT (live): STATE + WINDOW-CHROME only — the gear (level 2+, opens a popover hosting the\n *    Simple/Standard/Pro/Auto INTERFACE DENSITY control — the progressive-disclosure escape hatch,\n *    where Simple IS the pure-audio surface — plus the developer-links toggle) and Minimize (hide\n *    the call view, call stays live). Call actions (Mute / Captions / Details / Type / End) live in\n *    the bottom dock, the single home for each; Captions & End used to duplicate here and were\n *    removed, and the standalone pure-audio headphones was folded into the gear's Density = Simple.\n *  - RIGHT (review): \"Start live session\" (resume, affirmative leads) + Close — the\n *    review session's exit lives up here in the header bar, not floating in the body.\n *\n * Which controls render is decided by the OVERLAY (it owns the disclosure model) and\n * passed down as booleans — this component stays purely presentational.\n */\n@Component({\n  standalone: true,\n  selector: 'mj-realtime-agent-banner',\n  imports: [CommonModule],\n  templateUrl: './realtime-agent-banner.component.html',\n  styleUrl: './realtime-agent-banner.component.css'\n})\nexport class RealtimeAgentBannerComponent {\n  /** Current connection / turn state — drives the orb animation + state label. */\n  @Input({ required: true }) State!: RealtimeConnectionState;\n\n  /**\n   * COMPACT (orb/overlay) presentation: collapse the app-bar to a minimal identity + state\n   * row. The duplicate orb, the redundant state pill, and the headphones / gear / expand\n   * controls are dropped — the body already shows the big orb + name + state, and the lean\n   * bottom dock (Mute / End / •••) owns the session actions. Minimize stays reachable so the\n   * user can hide the call without ending it. Fed from the overlay's resolved `Ui.compact`.\n   * Default `false` (the full console banner is unchanged).\n   */\n  @Input() Compact = false;\n\n  /** Display name of the agent the voice session fronts (e.g. \"Sage\"). */\n  @Input() AgentName = 'the agent';\n\n  /**\n   * Display name of the realtime model the live session runs on (e.g. \"GPT Realtime 2\").\n   * Rendered as a subtle suffix in the identity line; hidden when null/empty.\n   */\n  @Input() ModelName: string | null = null;\n\n  /** Whether developer affordances (the \"Open session\" link) are revealed (gear-gated). */\n  @Input() DevMode = false;\n\n  /** ID of the server-side agent session record (`MJ: AI Agent Sessions`), when known. */\n  @Input() SessionID: string | null = null;\n\n  /**\n   * SESSION REVIEW presentation: the banner shows the past session's identity\n   * (review badge, started→closed range, close-reason chip) instead of live turn-state,\n   * and the action cluster swaps to Start-live + Close.\n   */\n  @Input() ReviewMode = false;\n\n  /** When reviewing: when the past session started (`__mj_CreatedAt`). */\n  @Input() ReviewStartedAt: Date | null = null;\n\n  /** When reviewing: when the past session closed (null while it is still open). */\n  @Input() ReviewClosedAt: Date | null = null;\n\n  /** When reviewing: why the past session closed (`Explicit` | `Janitor` | `Shutdown` | `Error`), when known. */\n  @Input() ReviewCloseReason: string | null = null;\n\n  // ── App-bar action cluster (disclosure-gated by the overlay) ────────────────\n  // STATE + WINDOW-CHROME only. Captions & End were removed (they duplicated the bottom dock's\n  // controls — one home per control), and \"pure audio\" was folded into the gear's Density = Simple.\n\n  /** Whether the gear (density escape hatch + dev toggle) renders (disclosure level 2+). */\n  @Input() ShowGear = false;\n\n  /**\n   * Whether the interface-density segmented control renders inside the gear popover.\n   * Default `true` (historical behaviour); a host may hide it via the overlay's\n   * `[ShowDensityPicker]` input. The gear itself (and its developer-links toggle) still\n   * renders when {@link ShowGear} is true even if the density picker is hidden.\n   */\n  @Input() ShowDensityPicker = true;\n\n  /** Whether the Minimize control renders (live sessions only). */\n  @Input() ShowMinimize = false;\n\n  /** The user's current interface-density override (selected state in the gear popover). */\n  @Input() Density: RealtimeUxDensity = 'auto';\n\n  /** Emitted with the session record's ID when the dev \"Open session\" link is clicked. */\n  @Output() OpenSessionRequested = new EventEmitter<string>();\n\n  /** Emitted when the user toggles developer links from the gear popover. */\n  @Output() DevModeToggled = new EventEmitter<boolean>();\n\n  /** Emitted when the user picks an interface density in the gear popover. */\n  @Output() DensityChanged = new EventEmitter<RealtimeUxDensity>();\n\n  /** Emitted when the user minimizes the call view (the call stays live). */\n  @Output() MinimizeRequested = new EventEmitter<void>();\n\n  /** Review only: the user asked to RESUME the reviewed session as a new live call. */\n  @Output() StartLiveRequested = new EventEmitter<void>();\n\n  /** Review only: the user asked to close the review and return to the conversation. */\n  @Output() CloseRequested = new EventEmitter<void>();\n\n  /** Whether the gear popover is open (closed by any outside click). */\n  public GearOpen = false;\n\n  /** The density choices the gear popover offers, in display order. */\n  public readonly Densities: ReadonlyArray<{ Key: RealtimeUxDensity; Label: string }> = [\n    { Key: 'simple', Label: 'Simple' },\n    { Key: 'standard', Label: 'Standard' },\n    { Key: 'pro', Label: 'Pro' },\n    { Key: 'auto', Label: 'Auto' }\n  ];\n\n  /** True when the dev \"Open session\" link should render (gear on + session id known). */\n  public get ShowOpenSession(): boolean {\n    return this.DevMode && !!this.SessionID;\n  }\n\n  /** Emits the open-session request for the live agent session record. */\n  public OpenSession(): void {\n    if (this.SessionID) {\n      this.OpenSessionRequested.emit(this.SessionID);\n    }\n  }\n\n  /** Opens/closes the gear popover (stops propagation so the outside-click close skips it). */\n  public ToggleGear(event: MouseEvent): void {\n    event.stopPropagation();\n    this.GearOpen = !this.GearOpen;\n  }\n\n  /** Any outside click closes the gear popover. */\n  @HostListener('document:click')\n  public OnDocumentClick(): void {\n    if (this.GearOpen) {\n      this.GearOpen = false;\n    }\n  }\n\n  /** Gear popover: pick an interface density (the overlay applies + persists it). */\n  public SelectDensity(density: RealtimeUxDensity): void {\n    this.DensityChanged.emit(density);\n  }\n\n  /** Gear popover: toggle developer links. */\n  public ToggleDev(): void {\n    this.DevMode = !this.DevMode;\n    this.DevModeToggled.emit(this.DevMode);\n  }\n\n  /** The review banner's \"started → closed\" time-range label (empty when the start is unknown). */\n  public get ReviewRangeLabel(): string {\n    if (!this.ReviewStartedAt) {\n      return '';\n    }\n    const start = this.formatStamp(this.ReviewStartedAt);\n    if (!this.ReviewClosedAt) {\n      return start;\n    }\n    return `${start} → ${this.formatStamp(this.ReviewClosedAt, this.ReviewStartedAt)}`;\n  }\n\n  /** Human label for the close-reason chip (empty hides the chip). */\n  public get ReviewCloseReasonLabel(): string {\n    switch (this.ReviewCloseReason) {\n      case 'Explicit': return 'Ended by user';\n      case 'Janitor': return 'Closed by janitor';\n      case 'Shutdown': return 'Closed at shutdown';\n      case 'Error': return 'Ended with error';\n      default: return '';\n    }\n  }\n\n  /** Compact date+time stamp; same-day end stamps drop the redundant date part. */\n  private formatStamp(date: Date, sameDayAs?: Date | null): string {\n    const time = date.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' }).toLowerCase();\n    if (sameDayAs && date.toDateString() === sameDayAs.toDateString()) {\n      return time;\n    }\n    return `${date.toLocaleDateString([], { month: 'short', day: 'numeric' })}, ${time}`;\n  }\n\n  /** Maps the realtime state to the orb's `data-state` (the orb only models active turn-states). */\n  public OrbState(state: RealtimeConnectionState): 'speaking' | 'listening' | 'thinking' {\n    switch (state) {\n      case 'speaking': return 'speaking';\n      case 'thinking': return 'thinking';\n      default: return 'listening';\n    }\n  }\n\n  /** Human-readable state label, agent-aware where it reads better. */\n  public StateLabel(state: RealtimeConnectionState): string {\n    switch (state) {\n      case 'connecting': return 'Connecting…';\n      case 'listening': return 'Listening';\n      case 'speaking': return `${this.AgentName} is speaking…`;\n      case 'thinking': return 'Working on it…';\n      case 'error': return 'Connection error';\n      case 'closed': return 'Call ended';\n      default: return '';\n    }\n  }\n\n  /** True while the state pill should show a spinner instead of the waveform. */\n  public IsBusy(state: RealtimeConnectionState): boolean {\n    return state === 'connecting' || state === 'thinking';\n  }\n}\n","<div class=\"banner\" [class.banner--review]=\"ReviewMode\" [class.banner--compact]=\"Compact && !ReviewMode\">\n  @if (ReviewMode) {\n    <!-- SESSION REVIEW: static orb · name · review badge · started→closed · 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 if (Compact) {\n    <!-- COMPACT (Calm Orb · overlay): a tiny identity + state row only. No duplicate orb,\n         no state pill, no headphones / gear / expand — the body shows the big orb + name +\n         state, and the lean dock owns the actions. Minimize stays reachable here. -->\n    <div class=\"banner__id banner__id--compact\">\n      <span class=\"banner__avatar\" aria-hidden=\"true\">{{ AgentName.charAt(0) }}</span>\n      <span class=\"banner__name banner__name--compact\">{{ AgentName }}</span>\n      <span class=\"banner__state-chip\">\n        @if (IsBusy(State)) {\n          <i class=\"fa-solid fa-spinner fa-spin\" aria-hidden=\"true\"></i>\n        } @else {\n          <span class=\"banner__state-dot\" [attr.data-state]=\"OrbState(State)\" aria-hidden=\"true\"></span>\n        }\n        <span class=\"banner__state-chip-label\">{{ StateLabel(State) }}</span>\n      </span>\n    </div>\n\n    @if (ShowMinimize) {\n      <button type=\"button\" class=\"iconb banner__minimize--compact\" (click)=\"MinimizeRequested.emit()\"\n              title=\"Hide the call view — the call stays live\"\n              aria-label=\"Minimize the call view\">\n        <i class=\"fa-solid fa-minus\" aria-hidden=\"true\"></i>\n      </button>\n    }\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\">· {{ 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: STATE + WINDOW-CHROME only. Call actions\n         (Mute / Captions / Details / Type / End) live in the bottom dock — the single home for\n         each control. Captions & End were removed from here (they were exact duplicates of the\n         dock's), and the standalone \"pure audio\" headphones was folded into the gear's Density =\n         Simple. What remains up here is non-duplicated chrome: the gear (density + dev links) and\n         Minimize. -->\n    <div class=\"bar-actions\">\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 — 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    </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        @if (ShowDensityPicker) {\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        }\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"]}
+{"version":3,"file":"realtime-agent-banner.component.js","sourceRoot":"","sources":["../../../../src/lib/components/realtime/realtime-agent-banner.component.ts","../../../../src/lib/components/realtime/realtime-agent-banner.component.html"],"names":[],"mappings":"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","sourcesContent":["import { Component, EventEmitter, HostListener, Input, Output } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { RealtimeConnectionState } from '@memberjunction/realtime-runtime';\nimport { RealtimeUxDensity } from './realtime-disclosure';\n\n/**\n * The call overlay's UNIFIED APP-BAR (per Redesign A — `plans/realtime/mockups/redesign-a.html`):\n * ONE header that owns identity, state, and every session action.\n *\n *  - LEFT: the glowing agent orb (motion = turn-state), agent name + \"Co-Agent\" badge,\n *    \"speaking as\" subline (+ subtle realtime-model suffix), and the state pill that swaps\n *    between a waveform (speaking/listening) and a spinner (connecting/thinking).\n *  - RIGHT (live): STATE + WINDOW-CHROME only — the gear (level 2+, opens a popover hosting the\n *    Simple/Standard/Pro/Auto INTERFACE DENSITY control — the progressive-disclosure escape hatch,\n *    where Simple IS the pure-audio surface — plus the developer-links toggle) and Minimize (hide\n *    the call view, call stays live). Call actions (Mute / Captions / Details / Type / End) live in\n *    the bottom dock, the single home for each; Captions & End used to duplicate here and were\n *    removed, and the standalone pure-audio headphones was folded into the gear's Density = Simple.\n *  - RIGHT (review): \"Start live session\" (resume, affirmative leads) + Close — the\n *    review session's exit lives up here in the header bar, not floating in the body.\n *\n * Which controls render is decided by the OVERLAY (it owns the disclosure model) and\n * passed down as booleans — this component stays purely presentational.\n */\n@Component({\n  standalone: true,\n  selector: 'mj-realtime-agent-banner',\n  imports: [CommonModule],\n  templateUrl: './realtime-agent-banner.component.html',\n  styleUrl: './realtime-agent-banner.component.css'\n})\nexport class RealtimeAgentBannerComponent {\n  /** Current connection / turn state — drives the orb animation + state label. */\n  @Input({ required: true }) State!: RealtimeConnectionState;\n\n  /**\n   * COMPACT (orb/overlay) presentation: collapse the app-bar to a minimal identity + state\n   * row. The duplicate orb, the redundant state pill, and the headphones / gear / expand\n   * controls are dropped — the body already shows the big orb + name + state, and the lean\n   * bottom dock (Mute / End / •••) owns the session actions. Minimize stays reachable so the\n   * user can hide the call without ending it. Fed from the overlay's resolved `Ui.compact`.\n   * Default `false` (the full console banner is unchanged).\n   */\n  @Input() Compact = false;\n\n  /** Display name of the agent the voice session fronts (e.g. \"Sage\"). */\n  @Input() AgentName = 'the agent';\n\n  /**\n   * Display name of the realtime model the live session runs on (e.g. \"GPT Realtime 2\").\n   * Rendered as a subtle suffix in the identity line; hidden when null/empty.\n   */\n  @Input() ModelName: string | null = null;\n\n  /** Whether developer affordances (the \"Open session\" link) are revealed (gear-gated). */\n  @Input() DevMode = false;\n\n  /** ID of the server-side agent session record (`MJ: AI Agent Sessions`), when known. */\n  @Input() SessionID: string | null = null;\n\n  /**\n   * SESSION REVIEW presentation: the banner shows the past session's identity\n   * (review badge, started→closed range, close-reason chip) instead of live turn-state,\n   * and the action cluster swaps to Start-live + Close.\n   */\n  @Input() ReviewMode = false;\n\n  /** When reviewing: when the past session started (`__mj_CreatedAt`). */\n  @Input() ReviewStartedAt: Date | null = null;\n\n  /** When reviewing: when the past session closed (null while it is still open). */\n  @Input() ReviewClosedAt: Date | null = null;\n\n  /** When reviewing: why the past session closed (`Explicit` | `Janitor` | `Shutdown` | `Error`), when known. */\n  @Input() ReviewCloseReason: string | null = null;\n\n  // ── App-bar action cluster (disclosure-gated by the overlay) ────────────────\n  // STATE + WINDOW-CHROME only. Captions & End were removed (they duplicated the bottom dock's\n  // controls — one home per control), and \"pure audio\" was folded into the gear's Density = Simple.\n\n  /** Whether the gear (density escape hatch + dev toggle) renders (disclosure level 2+). */\n  @Input() ShowGear = false;\n\n  /**\n   * Whether the interface-density segmented control renders inside the gear popover.\n   * Default `true` (historical behaviour); a host may hide it via the overlay's\n   * `[ShowDensityPicker]` input. The gear itself (and its developer-links toggle) still\n   * renders when {@link ShowGear} is true even if the density picker is hidden.\n   */\n  @Input() ShowDensityPicker = true;\n\n  /** Whether the Minimize control renders (live sessions only). */\n  @Input() ShowMinimize = false;\n\n  /** The user's current interface-density override (selected state in the gear popover). */\n  @Input() Density: RealtimeUxDensity = 'auto';\n\n  /** Emitted with the session record's ID when the dev \"Open session\" link is clicked. */\n  @Output() OpenSessionRequested = new EventEmitter<string>();\n\n  /** Emitted when the user toggles developer links from the gear popover. */\n  @Output() DevModeToggled = new EventEmitter<boolean>();\n\n  /** Emitted when the user picks an interface density in the gear popover. */\n  @Output() DensityChanged = new EventEmitter<RealtimeUxDensity>();\n\n  /** Emitted when the user minimizes the call view (the call stays live). */\n  @Output() MinimizeRequested = new EventEmitter<void>();\n\n  /** Review only: the user asked to RESUME the reviewed session as a new live call. */\n  @Output() StartLiveRequested = new EventEmitter<void>();\n\n  /** Review only: the user asked to close the review and return to the conversation. */\n  @Output() CloseRequested = new EventEmitter<void>();\n\n  /** Whether the gear popover is open (closed by any outside click). */\n  public GearOpen = false;\n\n  /** The density choices the gear popover offers, in display order. */\n  public readonly Densities: ReadonlyArray<{ Key: RealtimeUxDensity; Label: string }> = [\n    { Key: 'simple', Label: 'Simple' },\n    { Key: 'standard', Label: 'Standard' },\n    { Key: 'pro', Label: 'Pro' },\n    { Key: 'auto', Label: 'Auto' }\n  ];\n\n  /** True when the dev \"Open session\" link should render (gear on + session id known). */\n  public get ShowOpenSession(): boolean {\n    return this.DevMode && !!this.SessionID;\n  }\n\n  /** Emits the open-session request for the live agent session record. */\n  public OpenSession(): void {\n    if (this.SessionID) {\n      this.OpenSessionRequested.emit(this.SessionID);\n    }\n  }\n\n  /** Opens/closes the gear popover (stops propagation so the outside-click close skips it). */\n  public ToggleGear(event: MouseEvent): void {\n    event.stopPropagation();\n    this.GearOpen = !this.GearOpen;\n  }\n\n  /** Any outside click closes the gear popover. */\n  @HostListener('document:click')\n  public OnDocumentClick(): void {\n    if (this.GearOpen) {\n      this.GearOpen = false;\n    }\n  }\n\n  /** Gear popover: pick an interface density (the overlay applies + persists it). */\n  public SelectDensity(density: RealtimeUxDensity): void {\n    this.DensityChanged.emit(density);\n  }\n\n  /** Gear popover: toggle developer links. */\n  public ToggleDev(): void {\n    this.DevMode = !this.DevMode;\n    this.DevModeToggled.emit(this.DevMode);\n  }\n\n  /** The review banner's \"started → closed\" time-range label (empty when the start is unknown). */\n  public get ReviewRangeLabel(): string {\n    if (!this.ReviewStartedAt) {\n      return '';\n    }\n    const start = this.formatStamp(this.ReviewStartedAt);\n    if (!this.ReviewClosedAt) {\n      return start;\n    }\n    return `${start} → ${this.formatStamp(this.ReviewClosedAt, this.ReviewStartedAt)}`;\n  }\n\n  /** Human label for the close-reason chip (empty hides the chip). */\n  public get ReviewCloseReasonLabel(): string {\n    switch (this.ReviewCloseReason) {\n      case 'Explicit': return 'Ended by user';\n      case 'Janitor': return 'Closed by janitor';\n      case 'Shutdown': return 'Closed at shutdown';\n      case 'Error': return 'Ended with error';\n      default: return '';\n    }\n  }\n\n  /** Compact date+time stamp; same-day end stamps drop the redundant date part. */\n  private formatStamp(date: Date, sameDayAs?: Date | null): string {\n    const time = date.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' }).toLowerCase();\n    if (sameDayAs && date.toDateString() === sameDayAs.toDateString()) {\n      return time;\n    }\n    return `${date.toLocaleDateString([], { month: 'short', day: 'numeric' })}, ${time}`;\n  }\n\n  /** Maps the realtime state to the orb's `data-state` (the orb only models active turn-states). */\n  public OrbState(state: RealtimeConnectionState): 'speaking' | 'listening' | 'thinking' {\n    switch (state) {\n      case 'speaking': return 'speaking';\n      case 'thinking': return 'thinking';\n      default: return 'listening';\n    }\n  }\n\n  /** Human-readable state label, agent-aware where it reads better. */\n  public StateLabel(state: RealtimeConnectionState): string {\n    switch (state) {\n      case 'connecting': return 'Connecting…';\n      case 'listening': return 'Listening';\n      case 'speaking': return `${this.AgentName} is speaking…`;\n      case 'thinking': return 'Working on it…';\n      case 'error': return 'Connection error';\n      case 'closed': return 'Call ended';\n      default: return '';\n    }\n  }\n\n  /** True while the state pill should show a spinner instead of the waveform. */\n  public IsBusy(state: RealtimeConnectionState): boolean {\n    return state === 'connecting' || state === 'thinking';\n  }\n}\n","<div class=\"banner\" [class.banner--review]=\"ReviewMode\" [class.banner--compact]=\"Compact && !ReviewMode\">\n  @if (ReviewMode) {\n    <!-- SESSION REVIEW: static orb · name · review badge · started→closed · 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 if (Compact) {\n    <!-- COMPACT (Calm Orb · overlay): a tiny identity + state row only. No duplicate orb,\n         no state pill, no headphones / gear / expand — the body shows the big orb + name +\n         state, and the lean dock owns the actions. Minimize stays reachable here. -->\n    <div class=\"banner__id banner__id--compact\">\n      <span class=\"banner__avatar\" aria-hidden=\"true\">{{ AgentName.charAt(0) }}</span>\n      <span class=\"banner__name banner__name--compact\">{{ AgentName }}</span>\n      <span class=\"banner__state-chip\">\n        @if (IsBusy(State)) {\n          <i class=\"fa-solid fa-spinner fa-spin\" aria-hidden=\"true\"></i>\n        } @else {\n          <span class=\"banner__state-dot\" [attr.data-state]=\"OrbState(State)\" aria-hidden=\"true\"></span>\n        }\n        <span class=\"banner__state-chip-label\">{{ StateLabel(State) }}</span>\n      </span>\n    </div>\n\n    @if (ShowMinimize) {\n      <button type=\"button\" class=\"iconb banner__minimize--compact\" (click)=\"MinimizeRequested.emit()\"\n              title=\"Hide the call view — the call stays live\"\n              aria-label=\"Minimize the call view\">\n        <i class=\"fa-solid fa-minus\" aria-hidden=\"true\"></i>\n      </button>\n    }\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\">· {{ 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: STATE + WINDOW-CHROME only. Call actions\n         (Mute / Captions / Details / Type / End) live in the bottom dock — the single home for\n         each control. Captions & End were removed from here (they were exact duplicates of the\n         dock's), and the standalone \"pure audio\" headphones was folded into the gear's Density =\n         Simple. What remains up here is non-duplicated chrome: the gear (density + dev links) and\n         Minimize. -->\n    <div class=\"bar-actions\">\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 — 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    </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        @if (ShowDensityPicker) {\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        }\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"]}

package/dist/lib/components/realtime/realtime-composer.component.d.ts

@@ -89,9 +89,11 @@ export declare class RealtimeComposerComponent {
      * @param text the character(s) to seed (typically the single key that opened the composer).
      */
     AppendAndFocus(text: string): void;
+    /** Auto-resizes the textarea up to 140px height as text grows or contracts. */
+    AutoResize(): void;
     /** Send the typed text into the live session, then clear the input. */
     Send(): void;
-    /** Enter sends (Shift+Enter is free for future multiline if the input becomes a textarea). */
+    /** Enter sends (Shift+Enter inserts a newline in textarea). */
     OnKeydown(event: KeyboardEvent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<RealtimeComposerComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<RealtimeComposerComponent, "mj-realtime-composer", never, { "Open": { "alias": "Open"; "required": false; }; "Compact": { "alias": "Compact"; "required": false; }; "CaptionsOn": { "alias": "CaptionsOn"; "required": false; }; "ShowDetails": { "alias": "ShowDetails"; "required": false; }; "DetailsOn": { "alias": "DetailsOn"; "required": false; }; "IsMuted": { "alias": "IsMuted"; "required": false; }; }, { "OpenChanged": "OpenChanged"; "CaptionsToggled": "CaptionsToggled"; "DetailsToggled": "DetailsToggled"; "EndRequested": "EndRequested"; "MuteChanged": "MuteChanged"; }, never, never, true, never>;

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

@@ -1 +1 @@
-{"version":3,"file":"realtime-composer.component.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/realtime/realtime-composer.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAyB,YAAY,EAAkD,MAAM,eAAe,CAAC;;AAKpH;;;;;;;;;;;;;;;;;;GAkBG;AACH,qBAOa,yBAAyB;IACpC;;;;OAIG;IACM,IAAI,UAAS;IAEtB;;;;;;OAMG;IACM,OAAO,UAAS;IAEzB,6FAA6F;IACnF,WAAW,wBAA+B;IAEpD,yFAAyF;IAChF,UAAU,UAAQ;IAE3B,yFAAyF;IAChF,WAAW,UAAS;IAE7B,gFAAgF;IACvE,SAAS,UAAS;IAE3B,mFAAmF;IACzE,eAAe,wBAA+B;IAExD,oFAAoF;IAC1E,cAAc,qBAA4B;IAEpD,wEAAwE;IAC9D,YAAY,qBAA4B;IAElD,wFAAwF;IAC9E,WAAW,wBAA+B;IAEpD,uDAAuD;IAChD,KAAK,SAAM;IAElB;;;;OAIG;IACM,OAAO,UAAS;IAED,OAAO,CAAC,SAAS,CAAC,CAA+B;IAEzE,OAAO,CAAC,QAAQ,CAAkC;IAElD,qDAAqD;IACrD,IAAW,OAAO,IAAI,OAAO,CAE5B;IAED,kFAAkF;IAClF,IAAW,SAAS,IAAI,OAAO,CAE9B;IAED;;;OAGG;IACI,QAAQ,UAAS;IAExB,qGAAqG;IAC9F,UAAU,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;IAK1C,2DAA2D;IAEpD,eAAe,IAAI,IAAI;IAM9B,iFAAiF;IAC1E,UAAU,IAAI,IAAI;IAKzB,yDAAyD;IAClD,cAAc,IAAI,IAAI;IAK7B,6EAA6E;IACtE,UAAU,IAAI,IAAI;IAIzB;;;;;;;;OAQG;IACI,cAAc,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAUzC,uEAAuE;IAChE,IAAI,IAAI,IAAI;IAQnB,8FAA8F;IACvF,SAAS,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;yCAnIjC,yBAAyB;2CAAzB,yBAAyB;CAyIrC"}
+{"version":3,"file":"realtime-composer.component.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/realtime/realtime-composer.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAyB,YAAY,EAAkD,MAAM,eAAe,CAAC;;AAKpH;;;;;;;;;;;;;;;;;;GAkBG;AACH,qBAOa,yBAAyB;IACpC;;;;OAIG;IACM,IAAI,UAAS;IAEtB;;;;;;OAMG;IACM,OAAO,UAAS;IAEzB,6FAA6F;IACnF,WAAW,wBAA+B;IAEpD,yFAAyF;IAChF,UAAU,UAAQ;IAE3B,yFAAyF;IAChF,WAAW,UAAS;IAE7B,gFAAgF;IACvE,SAAS,UAAS;IAE3B,mFAAmF;IACzE,eAAe,wBAA+B;IAExD,oFAAoF;IAC1E,cAAc,qBAA4B;IAEpD,wEAAwE;IAC9D,YAAY,qBAA4B;IAElD,wFAAwF;IAC9E,WAAW,wBAA+B;IAEpD,uDAAuD;IAChD,KAAK,SAAM;IAElB;;;;OAIG;IACM,OAAO,UAAS;IAED,OAAO,CAAC,SAAS,CAAC,CAAqD;IAE/F,OAAO,CAAC,QAAQ,CAAkC;IAElD,qDAAqD;IACrD,IAAW,OAAO,IAAI,OAAO,CAE5B;IAED,kFAAkF;IAClF,IAAW,SAAS,IAAI,OAAO,CAE9B;IAED;;;OAGG;IACI,QAAQ,UAAS;IAExB,qGAAqG;IAC9F,UAAU,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;IAK1C,2DAA2D;IAEpD,eAAe,IAAI,IAAI;IAM9B,iFAAiF;IAC1E,UAAU,IAAI,IAAI;IAKzB,yDAAyD;IAClD,cAAc,IAAI,IAAI;IAK7B,6EAA6E;IACtE,UAAU,IAAI,IAAI;IAIzB;;;;;;;;OAQG;IACI,cAAc,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAWzC,+EAA+E;IACxE,UAAU,IAAI,IAAI;IASzB,uEAAuE;IAChE,IAAI,IAAI,IAAI;IAYnB,+DAA+D;IACxD,SAAS,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;yCAlJjC,yBAAyB;2CAAzB,yBAAyB;CAwJrC"}

package/dist/lib/components/realtime/realtime-composer.component.js

@@ -155,9 +155,9 @@ function RealtimeComposerComponent_Conditional_2_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵelementEnd();
     i0.ɵɵconditionalCreate(6, RealtimeComposerComponent_Conditional_2_Conditional_6_Template, 2, 4, "button", 27);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "div", 28)(8, "input", 29, 0);
-    i0.ɵɵtwoWayListener("ngModelChange", function RealtimeComposerComponent_Conditional_2_Template_input_ngModelChange_8_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r2.Draft, $event) || (ctx_r2.Draft = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵlistener("keydown", function RealtimeComposerComponent_Conditional_2_Template_input_keydown_8_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.OnKeydown($event)); });
+    i0.ɵɵelementStart(7, "div", 28)(8, "textarea", 29, 0);
+    i0.ɵɵtwoWayListener("ngModelChange", function RealtimeComposerComponent_Conditional_2_Template_textarea_ngModelChange_8_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r2.Draft, $event) || (ctx_r2.Draft = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("keydown", function RealtimeComposerComponent_Conditional_2_Template_textarea_keydown_8_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.OnKeydown($event)); })("input", function RealtimeComposerComponent_Conditional_2_Template_textarea_input_8_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.AutoResize()); });
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(10, "span", 30);
     i0.ɵɵtext(11, "\u21B5 send");
@@ -169,6 +169,10 @@ function RealtimeComposerComponent_Conditional_2_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵelementStart(14, "button", 33);
     i0.ɵɵlistener("click", function RealtimeComposerComponent_Conditional_2_Template_button_click_14_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.OpenChanged.emit(false)); });
     i0.ɵɵelement(15, "i", 34);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(16, "button", 35);
+    i0.ɵɵlistener("click", function RealtimeComposerComponent_Conditional_2_Template_button_click_16_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.EndRequested.emit()); });
+    i0.ɵɵelement(17, "i", 16);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
@@ -303,6 +307,16 @@ export class RealtimeComposerComponent {
             el.value = this.Draft;
             el.focus();
             el.setSelectionRange(this.Draft.length, this.Draft.length);
+            this.AutoResize();
+        }
+    }
+    /** Auto-resizes the textarea up to 140px height as text grows or contracts. */
+    AutoResize() {
+        const el = this.dockInput?.nativeElement;
+        if (el && el instanceof HTMLTextAreaElement) {
+            el.style.height = 'auto';
+            const newHeight = Math.max(24, Math.min(el.scrollHeight, 140));
+            el.style.height = `${newHeight}px`;
         }
     }
     /** Send the typed text into the live session, then clear the input. */
@@ -312,8 +326,12 @@ export class RealtimeComposerComponent {
         }
         this.realtime.SendText(this.Draft);
         this.Draft = '';
+        const el = this.dockInput?.nativeElement;
+        if (el && el instanceof HTMLTextAreaElement) {
+            el.style.height = 'auto';
+        }
     }
-    /** Enter sends (Shift+Enter is free for future multiline if the input becomes a textarea). */
+    /** Enter sends (Shift+Enter inserts a newline in textarea). */
     OnKeydown(event) {
         if (event.key === 'Enter' && !event.shiftKey) {
             event.preventDefault();
@@ -328,15 +346,15 @@ export class RealtimeComposerComponent {
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.dockInput = _t.first);
         } }, hostBindings: function RealtimeComposerComponent_HostBindings(rf, ctx) { if (rf & 1) {
             i0.ɵɵlistener("click", function RealtimeComposerComponent_click_HostBindingHandler() { return ctx.OnDocumentClick(); }, i0.ɵɵresolveDocument);
-        } }, inputs: { Open: "Open", Compact: "Compact", CaptionsOn: "CaptionsOn", ShowDetails: "ShowDetails", DetailsOn: "DetailsOn", IsMuted: "IsMuted" }, outputs: { OpenChanged: "OpenChanged", CaptionsToggled: "CaptionsToggled", DetailsToggled: "DetailsToggled", EndRequested: "EndRequested", MuteChanged: "MuteChanged" }, decls: 3, vars: 1, consts: [["dockInput", ""], ["role", "group", "aria-label", "Call controls", 1, "dock-lean"], ["role", "group", "aria-label", "Call controls", 1, "strip"], [1, "dock"], [1, "lean-more"], ["role", "menu", "aria-label", "More call controls", 1, "lean-sheet", 3, "click"], ["type", "button", 1, "lean-sheet__btn", 3, "lean-sheet__btn--on", "title"], ["type", "button", "title", "Type into the live session", "aria-label", "Open the typed-input composer", 1, "lean-sheet__btn", 3, "click"], ["aria-hidden", "true", 1, "fa-regular", "fa-keyboard"], ["type", "button", "title", "More controls", "aria-label", "More call controls", 1, "lean-ctrl", "lean-ctrl--more", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-ellipsis"], ["type", "button", 1, "lean-ctrl", "lean-ctrl--more", 3, "click", "title"], ["aria-hidden", "true", 1, "fa-solid", "fa-closed-captioning"], ["type", "button", 1, "lean-ctrl", "lean-ctrl--lg", 3, "click", "title"], ["aria-hidden", "true", 1, "fa-solid", 3, "ngClass"], ["type", "button", "title", "End call", "aria-label", "End call", 1, "lean-ctrl", "lean-ctrl--lg", "lean-ctrl--end", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-phone-slash"], ["type", "button", 1, "lean-sheet__btn", 3, "click", "title"], ["aria-hidden", "true", 1, "fa-solid", "fa-table-columns"], [1, "ctrl-group"], ["type", "button", 1, "ctrl", 3, "click", "title"], [1, "ctrl-label"], ["type", "button", "title", "Type into the live session", "aria-label", "Open the typed-input composer", 1, "ctrl", 3, "click"], ["type", "button", "title", "End call", "aria-label", "End call", 1, "ctrl", "ctrl--end", 3, "click"], [1, "ctrl-label", "ctrl-label--end"], [1, "dock__minis"], ["type", "button", 1, "mini", 3, "click", "title"], ["type", "button", 1, "mini", 3, "mini--on", "title"], [1, "dock__box"], ["type", "text", "placeholder", "Type into the live session \u2014 joins this same voice call\u2026", "aria-label", "Type a message into the live voice session", 1, "dock__input", 3, "ngModelChange", "keydown", "ngModel"], ["aria-hidden", "true", 1, "dock__hint"], ["type", "button", "title", "Send into live session", "aria-label", "Send", 1, "dock__send", 3, "click", "disabled"], ["aria-hidden", "true", 1, "fa-solid", "fa-paper-plane"], ["type", "button", "title", "Hide typing \u2014 back to the voice controls", "aria-label", "Close the typed-input composer", 1, "mini", "dock__hide", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-chevron-down"]], template: function RealtimeComposerComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵconditionalCreate(0, RealtimeComposerComponent_Conditional_0_Template, 16, 15, "div", 1)(1, RealtimeComposerComponent_Conditional_1_Template, 22, 11, "div", 2)(2, RealtimeComposerComponent_Conditional_2_Template, 16, 12, "div", 3);
+        } }, inputs: { Open: "Open", Compact: "Compact", CaptionsOn: "CaptionsOn", ShowDetails: "ShowDetails", DetailsOn: "DetailsOn", IsMuted: "IsMuted" }, outputs: { OpenChanged: "OpenChanged", CaptionsToggled: "CaptionsToggled", DetailsToggled: "DetailsToggled", EndRequested: "EndRequested", MuteChanged: "MuteChanged" }, decls: 3, vars: 1, consts: [["dockInput", ""], ["role", "group", "aria-label", "Call controls", 1, "dock-lean"], ["role", "group", "aria-label", "Call controls", 1, "strip"], [1, "dock"], [1, "lean-more"], ["role", "menu", "aria-label", "More call controls", 1, "lean-sheet", 3, "click"], ["type", "button", 1, "lean-sheet__btn", 3, "lean-sheet__btn--on", "title"], ["type", "button", "title", "Type into the live session", "aria-label", "Open the typed-input composer", 1, "lean-sheet__btn", 3, "click"], ["aria-hidden", "true", 1, "fa-regular", "fa-keyboard"], ["type", "button", "title", "More controls", "aria-label", "More call controls", 1, "lean-ctrl", "lean-ctrl--more", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-ellipsis"], ["type", "button", 1, "lean-ctrl", "lean-ctrl--more", 3, "click", "title"], ["aria-hidden", "true", 1, "fa-solid", "fa-closed-captioning"], ["type", "button", 1, "lean-ctrl", "lean-ctrl--lg", 3, "click", "title"], ["aria-hidden", "true", 1, "fa-solid", 3, "ngClass"], ["type", "button", "title", "End call", "aria-label", "End call", 1, "lean-ctrl", "lean-ctrl--lg", "lean-ctrl--end", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-phone-slash"], ["type", "button", 1, "lean-sheet__btn", 3, "click", "title"], ["aria-hidden", "true", 1, "fa-solid", "fa-table-columns"], [1, "ctrl-group"], ["type", "button", 1, "ctrl", 3, "click", "title"], [1, "ctrl-label"], ["type", "button", "title", "Type into the live session", "aria-label", "Open the typed-input composer", 1, "ctrl", 3, "click"], ["type", "button", "title", "End call", "aria-label", "End call", 1, "ctrl", "ctrl--end", 3, "click"], [1, "ctrl-label", "ctrl-label--end"], [1, "dock__minis"], ["type", "button", 1, "mini", 3, "click", "title"], ["type", "button", 1, "mini", 3, "mini--on", "title"], [1, "dock__box"], ["rows", "1", "placeholder", "Type into the live session \u2014 joins this same voice call\u2026", "aria-label", "Type a message into the live voice session", 1, "dock__input", 3, "ngModelChange", "keydown", "input", "ngModel"], ["aria-hidden", "true", 1, "dock__hint"], ["type", "button", "title", "Send into live session", "aria-label", "Send", 1, "dock__send", 3, "click", "disabled"], ["aria-hidden", "true", 1, "fa-solid", "fa-paper-plane"], ["type", "button", "title", "Hide typing \u2014 back to the voice controls", "aria-label", "Close the typed-input composer", 1, "mini", "dock__hide", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-chevron-down"], ["type", "button", "title", "End call", "aria-label", "End call", 1, "mini", "mini--end", 3, "click"]], template: function RealtimeComposerComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵconditionalCreate(0, RealtimeComposerComponent_Conditional_0_Template, 16, 15, "div", 1)(1, RealtimeComposerComponent_Conditional_1_Template, 22, 11, "div", 2)(2, RealtimeComposerComponent_Conditional_2_Template, 18, 12, "div", 3);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.StripMode && ctx.Compact ? 0 : ctx.StripMode ? 1 : 2);
-        } }, dependencies: [CommonModule, i1.NgClass, FormsModule, i2.DefaultValueAccessor, i2.NgControlStatus, i2.NgModel], styles: ["[_nghost-%COMP%] {\n  display: block;\n}\n\n\n.strip[_ngcontent-%COMP%] {\n  position: relative;\n  display: flex;\n  align-items: flex-start;\n  justify-content: center;\n  gap: 22px;\n  padding: 20px 22px;\n  border-top: 1px solid var(--mj-border-subtle);\n}\n\n.ctrl-group[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n\n.ctrl[_ngcontent-%COMP%] {\n  width: 52px;\n  height: 52px;\n  border-radius: 50%;\n  display: grid;\n  place-items: center;\n  border: 1px solid var(--mj-border-strong);\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-primary);\n  cursor: pointer;\n  font-size: 18px;\n  transition: all 150ms ease;\n}\n.ctrl[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n}\n.ctrl--on[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-text-inverse, #fff);\n}\n.ctrl--muted[_ngcontent-%COMP%] {\n  background: var(--mj-status-warning-bg);\n  border-color: var(--mj-status-warning);\n  color: var(--mj-status-warning);\n}\n.ctrl--end[_ngcontent-%COMP%] {\n  width: 60px;\n  height: 60px;\n  background: var(--mj-status-error);\n  border-color: var(--mj-status-error);\n  color: var(--mj-text-inverse, #fff);\n  font-size: 20px;\n  box-shadow: 0 6px 20px color-mix(in srgb, var(--mj-status-error) 40%, transparent);\n}\n.ctrl--end[_ngcontent-%COMP%]:hover {\n  background: var(--mj-status-error);\n  filter: brightness(0.92);\n}\n\n.ctrl-label[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n  text-align: center;\n  margin-top: 6px;\n  font-weight: 500;\n}\n.ctrl-label--end[_ngcontent-%COMP%] {\n  color: var(--mj-status-error);\n}\n\n\n.dock[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 10px 18px;\n  border-top: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  animation: _ngcontent-%COMP%_dock-in 320ms cubic-bezier(0.2, 0.8, 0.3, 1);\n}\n@keyframes _ngcontent-%COMP%_dock-in {\n  from { opacity: 0; transform: translateY(10px); }\n  to { opacity: 1; transform: translateY(0); }\n}\n\n.dock__minis[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 7px;\n  flex-shrink: 0;\n}\n.mini[_ngcontent-%COMP%] {\n  width: 38px;\n  height: 38px;\n  border-radius: 50%;\n  display: grid;\n  place-items: center;\n  cursor: pointer;\n  font-size: 13.5px;\n  border: 1px solid var(--mj-border-strong);\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-primary);\n  transition: all 140ms ease;\n}\n.mini[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n}\n.mini--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.mini--muted[_ngcontent-%COMP%] {\n  background: var(--mj-status-warning-bg);\n  border-color: var(--mj-status-warning);\n  color: var(--mj-status-warning);\n}\n\n.dock__box[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  gap: 9px;\n  padding: 5px 6px 5px 14px;\n  border: 1px solid var(--mj-border-strong);\n  border-radius: var(--mj-radius-full, 9999px);\n  background: var(--mj-bg-surface-card);\n  transition: border-color 140ms ease, box-shadow 140ms ease;\n}\n.dock__box[_ngcontent-%COMP%]:focus-within {\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n}\n\n.dock__input[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n  background: transparent;\n  border: 0;\n  outline: none;\n  color: var(--mj-text-primary);\n  font-family: inherit;\n  font-size: 13.5px;\n}\n.dock__input[_ngcontent-%COMP%]::placeholder {\n  color: var(--mj-text-muted);\n}\n\n.dock__hint[_ngcontent-%COMP%] {\n  font-size: 10.5px;\n  font-weight: 600;\n  color: var(--mj-text-disabled);\n  white-space: nowrap;\n}\n\n.dock__send[_ngcontent-%COMP%] {\n  width: 32px;\n  height: 32px;\n  border-radius: 50%;\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse, #fff);\n  border: 0;\n  display: grid;\n  place-items: center;\n  cursor: pointer;\n  font-size: 12px;\n  flex-shrink: 0;\n  transition: background 150ms ease;\n}\n.dock__send[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: var(--mj-brand-primary-hover, var(--mj-brand-primary));\n}\n.dock__send[_ngcontent-%COMP%]:disabled {\n  opacity: 0.45;\n  cursor: not-allowed;\n}\n\n\n.dock__hide[_ngcontent-%COMP%] {\n  border-style: dashed;\n  color: var(--mj-text-muted);\n  flex-shrink: 0;\n}\n.dock__hide[_ngcontent-%COMP%]:hover {\n  color: var(--mj-text-primary);\n}\n\n\n\n\n.dock-lean[_ngcontent-%COMP%] {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 14px;\n  padding: 16px 18px 20px;\n  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--mj-bg-page) 35%, transparent));\n}\n\n.lean-ctrl[_ngcontent-%COMP%] {\n  display: grid;\n  place-items: center;\n  border-radius: 50%;\n  border: 1px solid var(--mj-border-strong);\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-primary);\n  cursor: pointer;\n  transition: all 150ms ease;\n}\n.lean-ctrl[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n  transform: translateY(-1px);\n}\n.lean-ctrl--lg[_ngcontent-%COMP%] {\n  width: 58px;\n  height: 58px;\n  font-size: 19px;\n}\n.lean-ctrl--more[_ngcontent-%COMP%] {\n  width: 46px;\n  height: 46px;\n  font-size: 16px;\n}\n.lean-ctrl--on[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-text-inverse, #fff);\n}\n.lean-ctrl--muted[_ngcontent-%COMP%] {\n  background: var(--mj-status-warning-bg);\n  border-color: var(--mj-status-warning);\n  color: var(--mj-status-warning);\n}\n.lean-ctrl--end[_ngcontent-%COMP%] {\n  background: var(--mj-status-error);\n  border-color: var(--mj-status-error);\n  color: var(--mj-text-inverse, #fff);\n  font-size: 20px;\n  box-shadow: 0 8px 24px color-mix(in srgb, var(--mj-status-error) 40%, transparent);\n}\n.lean-ctrl--end[_ngcontent-%COMP%]:hover {\n  background: var(--mj-status-error);\n  filter: brightness(0.94);\n}\n\n\n.lean-more[_ngcontent-%COMP%] {\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n.lean-sheet[_ngcontent-%COMP%] {\n  position: absolute;\n  bottom: calc(100% + 12px);\n  left: 50%;\n  transform: translateX(-50%) translateY(8px);\n  display: flex;\n  gap: 10px;\n  padding: 10px;\n  border-radius: var(--mj-radius-lg, 16px);\n  background: var(--mj-bg-surface-elevated);\n  border: 1px solid var(--mj-border-default);\n  box-shadow: 0 18px 50px -22px rgba(0, 0, 0, 0.6);\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 200ms ease, transform 200ms ease;\n  z-index: 5;\n}\n.lean-more--open[_ngcontent-%COMP%]   .lean-sheet[_ngcontent-%COMP%] {\n  opacity: 1;\n  pointer-events: auto;\n  transform: translateX(-50%) translateY(0);\n}\n.lean-sheet__btn[_ngcontent-%COMP%] {\n  display: grid;\n  place-items: center;\n  gap: 3px;\n  width: 56px;\n  padding: 8px 4px;\n  border-radius: var(--mj-radius-md, 10px);\n  border: 1px solid transparent;\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  font-size: 16px;\n  transition: all 140ms ease;\n}\n.lean-sheet__btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n}\n.lean-sheet__btn--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.lean-sheet__btn[_ngcontent-%COMP%]   small[_ngcontent-%COMP%] {\n  font-size: 9px;\n  font-weight: 600;\n  color: var(--mj-text-muted);\n}\n.lean-sheet__btn--on[_ngcontent-%COMP%]   small[_ngcontent-%COMP%] {\n  color: var(--mj-brand-accent, var(--mj-brand-primary));\n}"] });
+        } }, dependencies: [CommonModule, i1.NgClass, FormsModule, i2.DefaultValueAccessor, i2.NgControlStatus, i2.NgModel], styles: ["[_nghost-%COMP%] {\n  display: block;\n}\n\n\n.strip[_ngcontent-%COMP%] {\n  position: relative;\n  display: flex;\n  align-items: flex-start;\n  justify-content: center;\n  gap: 22px;\n  padding: 20px 22px;\n  border-top: 1px solid var(--mj-border-subtle);\n}\n\n.ctrl-group[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n\n.ctrl[_ngcontent-%COMP%] {\n  width: 52px;\n  height: 52px;\n  border-radius: 50%;\n  display: grid;\n  place-items: center;\n  border: 1px solid var(--mj-border-strong);\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-primary);\n  cursor: pointer;\n  font-size: 18px;\n  transition: all 150ms ease;\n}\n.ctrl[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n}\n.ctrl--on[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-text-inverse, #fff);\n}\n.ctrl--muted[_ngcontent-%COMP%] {\n  background: var(--mj-status-warning-bg);\n  border-color: var(--mj-status-warning);\n  color: var(--mj-status-warning);\n}\n.ctrl--end[_ngcontent-%COMP%] {\n  width: 60px;\n  height: 60px;\n  background: var(--mj-status-error);\n  border-color: var(--mj-status-error);\n  color: var(--mj-text-inverse, #fff);\n  font-size: 20px;\n  box-shadow: 0 6px 20px color-mix(in srgb, var(--mj-status-error) 40%, transparent);\n}\n.ctrl--end[_ngcontent-%COMP%]:hover {\n  background: var(--mj-status-error);\n  filter: brightness(0.92);\n}\n\n.ctrl-label[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n  text-align: center;\n  margin-top: 6px;\n  font-weight: 500;\n}\n.ctrl-label--end[_ngcontent-%COMP%] {\n  color: var(--mj-status-error);\n}\n\n\n.dock[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 10px 18px;\n  border-top: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  animation: _ngcontent-%COMP%_dock-in 320ms cubic-bezier(0.2, 0.8, 0.3, 1);\n}\n@keyframes _ngcontent-%COMP%_dock-in {\n  from { opacity: 0; transform: translateY(10px); }\n  to { opacity: 1; transform: translateY(0); }\n}\n\n.dock__minis[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 7px;\n  flex-shrink: 0;\n}\n.mini[_ngcontent-%COMP%] {\n  width: 38px;\n  height: 38px;\n  border-radius: 50%;\n  display: grid;\n  place-items: center;\n  cursor: pointer;\n  font-size: 13.5px;\n  border: 1px solid var(--mj-border-strong);\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-primary);\n  transition: all 140ms ease;\n}\n.mini[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n}\n.mini--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.mini--muted[_ngcontent-%COMP%] {\n  background: var(--mj-status-warning-bg);\n  border-color: var(--mj-status-warning);\n  color: var(--mj-status-warning);\n}\n\n.dock__box[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  align-items: flex-end;\n  gap: 9px;\n  padding: 5px 6px 5px 14px;\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 20px;\n  background: var(--mj-bg-surface-card);\n  transition: border-color 140ms ease, box-shadow 140ms ease, border-radius 140ms ease;\n}\n.dock__box[_ngcontent-%COMP%]:focus-within {\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n}\n\n.dock__input[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n  background: transparent;\n  border: 0;\n  outline: none;\n  color: var(--mj-text-primary);\n  font-family: inherit;\n  font-size: 13.5px;\n  line-height: 1.45;\n  resize: none;\n  height: 24px;\n  max-height: 140px;\n  overflow-y: auto;\n  padding: 3px 0 4px 0;\n  scrollbar-width: thin;\n  scrollbar-color: var(--mj-border-strong) transparent;\n}\n.dock__input[_ngcontent-%COMP%]::placeholder {\n  color: var(--mj-text-muted);\n}\n\n.dock__hint[_ngcontent-%COMP%] {\n  font-size: 10.5px;\n  font-weight: 600;\n  color: var(--mj-text-disabled);\n  white-space: nowrap;\n}\n\n.dock__send[_ngcontent-%COMP%] {\n  width: 32px;\n  height: 32px;\n  border-radius: 50%;\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse, #fff);\n  border: 0;\n  display: grid;\n  place-items: center;\n  cursor: pointer;\n  font-size: 12px;\n  flex-shrink: 0;\n  transition: background 150ms ease;\n}\n.dock__send[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: var(--mj-brand-primary-hover, var(--mj-brand-primary));\n}\n.dock__send[_ngcontent-%COMP%]:disabled {\n  opacity: 0.45;\n  cursor: not-allowed;\n}\n\n\n.dock__hide[_ngcontent-%COMP%] {\n  border-style: dashed;\n  color: var(--mj-text-muted);\n  flex-shrink: 0;\n}\n.dock__hide[_ngcontent-%COMP%]:hover {\n  color: var(--mj-text-primary);\n}\n\n.mini--end[_ngcontent-%COMP%] {\n  background: var(--mj-status-error);\n  border-color: var(--mj-status-error);\n  color: var(--mj-text-inverse, #fff);\n  flex-shrink: 0;\n}\n.mini--end[_ngcontent-%COMP%]:hover {\n  background: var(--mj-status-error);\n  filter: brightness(0.92);\n}\n\n\n\n\n.dock-lean[_ngcontent-%COMP%] {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 14px;\n  padding: 16px 18px 20px;\n  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--mj-bg-page) 35%, transparent));\n}\n\n.lean-ctrl[_ngcontent-%COMP%] {\n  display: grid;\n  place-items: center;\n  border-radius: 50%;\n  border: 1px solid var(--mj-border-strong);\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-primary);\n  cursor: pointer;\n  transition: all 150ms ease;\n}\n.lean-ctrl[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n  transform: translateY(-1px);\n}\n.lean-ctrl--lg[_ngcontent-%COMP%] {\n  width: 58px;\n  height: 58px;\n  font-size: 19px;\n}\n.lean-ctrl--more[_ngcontent-%COMP%] {\n  width: 46px;\n  height: 46px;\n  font-size: 16px;\n}\n.lean-ctrl--on[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-text-inverse, #fff);\n}\n.lean-ctrl--muted[_ngcontent-%COMP%] {\n  background: var(--mj-status-warning-bg);\n  border-color: var(--mj-status-warning);\n  color: var(--mj-status-warning);\n}\n.lean-ctrl--end[_ngcontent-%COMP%] {\n  background: var(--mj-status-error);\n  border-color: var(--mj-status-error);\n  color: var(--mj-text-inverse, #fff);\n  font-size: 20px;\n  box-shadow: 0 8px 24px color-mix(in srgb, var(--mj-status-error) 40%, transparent);\n}\n.lean-ctrl--end[_ngcontent-%COMP%]:hover {\n  background: var(--mj-status-error);\n  filter: brightness(0.94);\n}\n\n\n.lean-more[_ngcontent-%COMP%] {\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n.lean-sheet[_ngcontent-%COMP%] {\n  position: absolute;\n  bottom: calc(100% + 12px);\n  left: 50%;\n  transform: translateX(-50%) translateY(8px);\n  display: flex;\n  gap: 10px;\n  padding: 10px;\n  border-radius: var(--mj-radius-lg, 16px);\n  background: var(--mj-bg-surface-elevated);\n  border: 1px solid var(--mj-border-default);\n  box-shadow: 0 18px 50px -22px rgba(0, 0, 0, 0.6);\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 200ms ease, transform 200ms ease;\n  z-index: 5;\n}\n.lean-more--open[_ngcontent-%COMP%]   .lean-sheet[_ngcontent-%COMP%] {\n  opacity: 1;\n  pointer-events: auto;\n  transform: translateX(-50%) translateY(0);\n}\n.lean-sheet__btn[_ngcontent-%COMP%] {\n  display: grid;\n  place-items: center;\n  gap: 3px;\n  width: 56px;\n  padding: 8px 4px;\n  border-radius: var(--mj-radius-md, 10px);\n  border: 1px solid transparent;\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  font-size: 16px;\n  transition: all 140ms ease;\n}\n.lean-sheet__btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n}\n.lean-sheet__btn--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.lean-sheet__btn[_ngcontent-%COMP%]   small[_ngcontent-%COMP%] {\n  font-size: 9px;\n  font-weight: 600;\n  color: var(--mj-text-muted);\n}\n.lean-sheet__btn--on[_ngcontent-%COMP%]   small[_ngcontent-%COMP%] {\n  color: var(--mj-brand-accent, var(--mj-brand-primary));\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(RealtimeComposerComponent, [{
         type: Component,
-        args: [{ standalone: true, selector: 'mj-realtime-composer', imports: [CommonModule, FormsModule], template: "@if (StripMode && Compact) {\n  <!-- COMPACT (Calm Orb \u00B7 overlay): the lean dock \u2014 Mute + End + a first-class Captions toggle\n       (kept out of the \"\u2022\u2022\u2022\" so text stays ONE TAP in the overlay, where the banner no longer\n       carries a duplicate CC) + a \"\u2022\u2022\u2022\" that blooms a small sheet with the remaining secondary\n       actions (Details / Type). Round controls, red End \u2014 matches the mockup. -->\n  <div class=\"dock-lean\" role=\"group\" aria-label=\"Call controls\">\n    <div class=\"lean-more\" [class.lean-more--open]=\"MoreOpen\">\n      <div class=\"lean-sheet\" (click)=\"$event.stopPropagation()\" role=\"menu\" aria-label=\"More call controls\">\n        @if (ShowDetails) {\n          <button type=\"button\" class=\"lean-sheet__btn\" [class.lean-sheet__btn--on]=\"DetailsOn\"\n                  (click)=\"DetailsToggled.emit(); MoreOpen = false\"\n                  [title]=\"DetailsOn ? 'Hide the session panels' : 'Peek at the session panels'\"\n                  [attr.aria-pressed]=\"DetailsOn\">\n            <i class=\"fa-solid fa-table-columns\" aria-hidden=\"true\"></i>\n            <small>Details</small>\n          </button>\n        }\n        <button type=\"button\" class=\"lean-sheet__btn\"\n                (click)=\"OpenChanged.emit(true); MoreOpen = false\"\n                title=\"Type into the live session\" aria-label=\"Open the typed-input composer\">\n          <i class=\"fa-regular fa-keyboard\" aria-hidden=\"true\"></i>\n          <small>Type</small>\n        </button>\n      </div>\n      <button type=\"button\" class=\"lean-ctrl lean-ctrl--more\" [class.lean-ctrl--on]=\"MoreOpen\"\n              (click)=\"ToggleMore($event)\"\n              title=\"More controls\" aria-label=\"More call controls\"\n              [attr.aria-expanded]=\"MoreOpen\">\n        <i class=\"fa-solid fa-ellipsis\" aria-hidden=\"true\"></i>\n      </button>\n    </div>\n\n    <!-- Captions: first-class in the lean dock (the overlay's only text toggle now). -->\n    <button type=\"button\" class=\"lean-ctrl lean-ctrl--more\" [class.lean-ctrl--on]=\"CaptionsOn\"\n            (click)=\"ToggleCaptions()\"\n            [title]=\"CaptionsOn ? 'Voice-first \u2014 back to the orb' : 'Show the conversation as text'\"\n            [attr.aria-pressed]=\"CaptionsOn\">\n      <i class=\"fa-solid fa-closed-captioning\" aria-hidden=\"true\"></i>\n    </button>\n\n    <button type=\"button\" class=\"lean-ctrl lean-ctrl--lg\" [class.lean-ctrl--muted]=\"IsMuted\"\n            (click)=\"ToggleMute()\"\n            [title]=\"IsMuted ? 'Unmute microphone' : 'Mute microphone'\"\n            [attr.aria-pressed]=\"IsMuted\">\n      <i class=\"fa-solid\" [ngClass]=\"IsMuted ? 'fa-microphone-slash' : 'fa-microphone'\" aria-hidden=\"true\"></i>\n    </button>\n\n    <button type=\"button\" class=\"lean-ctrl lean-ctrl--lg lean-ctrl--end\" (click)=\"EndRequested.emit()\"\n            title=\"End call\" aria-label=\"End call\">\n      <i class=\"fa-solid fa-phone-slash\" aria-hidden=\"true\"></i>\n    </button>\n  </div>\n} @else if (StripMode) {\n  <!-- Levels 0\u20131: phone-call strip \u2014 big round controls, nothing to configure.\n       Captions arrives at level 1 WITH the text it controls; Details peeks at the\n       surface panels on demand; End stays the deliberate rightmost action. -->\n  <div class=\"strip\" role=\"group\" aria-label=\"Call controls\">\n    <div class=\"ctrl-group\">\n      <button type=\"button\" class=\"ctrl\" [class.ctrl--muted]=\"IsMuted\"\n              (click)=\"ToggleMute()\"\n              [title]=\"IsMuted ? 'Unmute microphone' : 'Mute microphone'\"\n              [attr.aria-pressed]=\"IsMuted\">\n        <i class=\"fa-solid\" [ngClass]=\"IsMuted ? 'fa-microphone-slash' : 'fa-microphone'\" aria-hidden=\"true\"></i>\n      </button>\n      <span class=\"ctrl-label\">{{ IsMuted ? 'Unmute' : 'Mute' }}</span>\n    </div>\n\n    <div class=\"ctrl-group\">\n      <button type=\"button\" class=\"ctrl\" [class.ctrl--on]=\"CaptionsOn\"\n              (click)=\"ToggleCaptions()\"\n              [title]=\"CaptionsOn ? 'Voice-first \u2014 back to the orb' : 'Show the conversation as text'\"\n              [attr.aria-pressed]=\"CaptionsOn\">\n        <i class=\"fa-solid fa-closed-captioning\" aria-hidden=\"true\"></i>\n      </button>\n      <span class=\"ctrl-label\">Captions</span>\n    </div>\n\n    @if (ShowDetails) {\n      <div class=\"ctrl-group\">\n        <button type=\"button\" class=\"ctrl\" [class.ctrl--on]=\"DetailsOn\"\n                (click)=\"DetailsToggled.emit()\"\n                [title]=\"DetailsOn ? 'Hide the session panels' : 'Peek at the session panels'\"\n                [attr.aria-pressed]=\"DetailsOn\">\n          <i class=\"fa-solid fa-table-columns\" aria-hidden=\"true\"></i>\n        </button>\n        <span class=\"ctrl-label\">Details</span>\n      </div>\n    }\n\n    <div class=\"ctrl-group\">\n      <button type=\"button\" class=\"ctrl\" (click)=\"OpenChanged.emit(true)\"\n              title=\"Type into the live session\" aria-label=\"Open the typed-input composer\">\n        <i class=\"fa-regular fa-keyboard\" aria-hidden=\"true\"></i>\n      </button>\n      <span class=\"ctrl-label\">Type</span>\n    </div>\n\n    <div class=\"ctrl-group\">\n      <button type=\"button\" class=\"ctrl ctrl--end\" (click)=\"EndRequested.emit()\"\n              title=\"End call\" aria-label=\"End call\">\n        <i class=\"fa-solid fa-phone-slash\" aria-hidden=\"true\"></i>\n      </button>\n      <span class=\"ctrl-label ctrl-label--end\">End call</span>\n    </div>\n  </div>\n} @else {\n  <!-- Level 2+: the fused dock \u2014 compact minis + the in-call composer in ONE bottom bar. -->\n  <div class=\"dock\">\n    <div class=\"dock__minis\">\n      <button type=\"button\" class=\"mini\" [class.mini--muted]=\"IsMuted\"\n              (click)=\"ToggleMute()\"\n              [title]=\"IsMuted ? 'Unmute microphone' : 'Mute microphone'\"\n              [attr.aria-pressed]=\"IsMuted\">\n        <i class=\"fa-solid\" [ngClass]=\"IsMuted ? 'fa-microphone-slash' : 'fa-microphone'\" aria-hidden=\"true\"></i>\n      </button>\n      <button type=\"button\" class=\"mini\" [class.mini--on]=\"CaptionsOn\"\n              (click)=\"ToggleCaptions()\"\n              [title]=\"CaptionsOn ? 'Voice-first \u2014 back to the orb' : 'Show the conversation as text'\"\n              [attr.aria-pressed]=\"CaptionsOn\">\n        <i class=\"fa-solid fa-closed-captioning\" aria-hidden=\"true\"></i>\n      </button>\n      @if (ShowDetails) {\n        <button type=\"button\" class=\"mini\" [class.mini--on]=\"DetailsOn\"\n                (click)=\"DetailsToggled.emit()\"\n                [title]=\"DetailsOn ? 'Hide the session panels' : 'Show the session panels'\"\n                [attr.aria-pressed]=\"DetailsOn\">\n          <i class=\"fa-solid fa-table-columns\" aria-hidden=\"true\"></i>\n        </button>\n      }\n    </div>\n    <div class=\"dock__box\">\n      <input\n        #dockInput\n        type=\"text\"\n        class=\"dock__input\"\n        placeholder=\"Type into the live session \u2014 joins this same voice call\u2026\"\n        [(ngModel)]=\"Draft\"\n        (keydown)=\"OnKeydown($event)\"\n        aria-label=\"Type a message into the live voice session\" />\n      <span class=\"dock__hint\" aria-hidden=\"true\">\u21B5 send</span>\n      <button\n        class=\"dock__send\"\n        type=\"button\"\n        [disabled]=\"!CanSend\"\n        (click)=\"Send()\"\n        title=\"Send into live session\"\n        aria-label=\"Send\">\n        <i class=\"fa-solid fa-paper-plane\" aria-hidden=\"true\"></i>\n      </button>\n    </div>\n    <button type=\"button\" class=\"mini dock__hide\" (click)=\"OpenChanged.emit(false)\"\n            title=\"Hide typing \u2014 back to the voice controls\"\n            aria-label=\"Close the typed-input composer\">\n      <i class=\"fa-solid fa-chevron-down\" aria-hidden=\"true\"></i>\n    </button>\n  </div>\n}\n", styles: [":host {\n  display: block;\n}\n\n/* ---------- Levels 0\u20131: phone-call strip (big round controls, centered) ---------- */\n.strip {\n  position: relative;\n  display: flex;\n  align-items: flex-start;\n  justify-content: center;\n  gap: 22px;\n  padding: 20px 22px;\n  border-top: 1px solid var(--mj-border-subtle);\n}\n\n.ctrl-group {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n\n.ctrl {\n  width: 52px;\n  height: 52px;\n  border-radius: 50%;\n  display: grid;\n  place-items: center;\n  border: 1px solid var(--mj-border-strong);\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-primary);\n  cursor: pointer;\n  font-size: 18px;\n  transition: all 150ms ease;\n}\n.ctrl:hover {\n  background: var(--mj-bg-surface-hover);\n}\n.ctrl--on {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-text-inverse, #fff);\n}\n.ctrl--muted {\n  background: var(--mj-status-warning-bg);\n  border-color: var(--mj-status-warning);\n  color: var(--mj-status-warning);\n}\n.ctrl--end {\n  width: 60px;\n  height: 60px;\n  background: var(--mj-status-error);\n  border-color: var(--mj-status-error);\n  color: var(--mj-text-inverse, #fff);\n  font-size: 20px;\n  box-shadow: 0 6px 20px color-mix(in srgb, var(--mj-status-error) 40%, transparent);\n}\n.ctrl--end:hover {\n  background: var(--mj-status-error);\n  filter: brightness(0.92);\n}\n\n.ctrl-label {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n  text-align: center;\n  margin-top: 6px;\n  font-weight: 500;\n}\n.ctrl-label--end {\n  color: var(--mj-status-error);\n}\n\n/* ---------- Level 2+: the fused dock (minis + composer in one bar) ---------- */\n.dock {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 10px 18px;\n  border-top: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  animation: dock-in 320ms cubic-bezier(0.2, 0.8, 0.3, 1);\n}\n@keyframes dock-in {\n  from { opacity: 0; transform: translateY(10px); }\n  to { opacity: 1; transform: translateY(0); }\n}\n\n.dock__minis {\n  display: flex;\n  gap: 7px;\n  flex-shrink: 0;\n}\n.mini {\n  width: 38px;\n  height: 38px;\n  border-radius: 50%;\n  display: grid;\n  place-items: center;\n  cursor: pointer;\n  font-size: 13.5px;\n  border: 1px solid var(--mj-border-strong);\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-primary);\n  transition: all 140ms ease;\n}\n.mini:hover {\n  background: var(--mj-bg-surface-hover);\n}\n.mini--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.mini--muted {\n  background: var(--mj-status-warning-bg);\n  border-color: var(--mj-status-warning);\n  color: var(--mj-status-warning);\n}\n\n.dock__box {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  gap: 9px;\n  padding: 5px 6px 5px 14px;\n  border: 1px solid var(--mj-border-strong);\n  border-radius: var(--mj-radius-full, 9999px);\n  background: var(--mj-bg-surface-card);\n  transition: border-color 140ms ease, box-shadow 140ms ease;\n}\n.dock__box:focus-within {\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n}\n\n.dock__input {\n  flex: 1;\n  min-width: 0;\n  background: transparent;\n  border: 0;\n  outline: none;\n  color: var(--mj-text-primary);\n  font-family: inherit;\n  font-size: 13.5px;\n}\n.dock__input::placeholder {\n  color: var(--mj-text-muted);\n}\n\n.dock__hint {\n  font-size: 10.5px;\n  font-weight: 600;\n  color: var(--mj-text-disabled);\n  white-space: nowrap;\n}\n\n.dock__send {\n  width: 32px;\n  height: 32px;\n  border-radius: 50%;\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse, #fff);\n  border: 0;\n  display: grid;\n  place-items: center;\n  cursor: pointer;\n  font-size: 12px;\n  flex-shrink: 0;\n  transition: background 150ms ease;\n}\n.dock__send:hover:not(:disabled) {\n  background: var(--mj-brand-primary-hover, var(--mj-brand-primary));\n}\n.dock__send:disabled {\n  opacity: 0.45;\n  cursor: not-allowed;\n}\n\n/* The dock's hide control \u2014 typing is a two-way door, never permanent chrome. */\n.dock__hide {\n  border-style: dashed;\n  color: var(--mj-text-muted);\n  flex-shrink: 0;\n}\n.dock__hide:hover {\n  color: var(--mj-text-primary);\n}\n\n/* ============================================================= COMPACT (Calm Orb \u00B7 overlay)\n   The lean dock \u2014 Mute + End + a \"\u2022\u2022\u2022\" that blooms a small sheet (Captions / Details / Type).\n   Round controls, red End \u2014 matches the mockup. No 5-button bar, no overlapping hint. */\n.dock-lean {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 14px;\n  padding: 16px 18px 20px;\n  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--mj-bg-page) 35%, transparent));\n}\n\n.lean-ctrl {\n  display: grid;\n  place-items: center;\n  border-radius: 50%;\n  border: 1px solid var(--mj-border-strong);\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-primary);\n  cursor: pointer;\n  transition: all 150ms ease;\n}\n.lean-ctrl:hover {\n  background: var(--mj-bg-surface-hover);\n  transform: translateY(-1px);\n}\n.lean-ctrl--lg {\n  width: 58px;\n  height: 58px;\n  font-size: 19px;\n}\n.lean-ctrl--more {\n  width: 46px;\n  height: 46px;\n  font-size: 16px;\n}\n.lean-ctrl--on {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-text-inverse, #fff);\n}\n.lean-ctrl--muted {\n  background: var(--mj-status-warning-bg);\n  border-color: var(--mj-status-warning);\n  color: var(--mj-status-warning);\n}\n.lean-ctrl--end {\n  background: var(--mj-status-error);\n  border-color: var(--mj-status-error);\n  color: var(--mj-text-inverse, #fff);\n  font-size: 20px;\n  box-shadow: 0 8px 24px color-mix(in srgb, var(--mj-status-error) 40%, transparent);\n}\n.lean-ctrl--end:hover {\n  background: var(--mj-status-error);\n  filter: brightness(0.94);\n}\n\n/* The \"\u2022\u2022\u2022\" overflow + its blooming sheet. */\n.lean-more {\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n.lean-sheet {\n  position: absolute;\n  bottom: calc(100% + 12px);\n  left: 50%;\n  transform: translateX(-50%) translateY(8px);\n  display: flex;\n  gap: 10px;\n  padding: 10px;\n  border-radius: var(--mj-radius-lg, 16px);\n  background: var(--mj-bg-surface-elevated);\n  border: 1px solid var(--mj-border-default);\n  box-shadow: 0 18px 50px -22px rgba(0, 0, 0, 0.6);\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 200ms ease, transform 200ms ease;\n  z-index: 5;\n}\n.lean-more--open .lean-sheet {\n  opacity: 1;\n  pointer-events: auto;\n  transform: translateX(-50%) translateY(0);\n}\n.lean-sheet__btn {\n  display: grid;\n  place-items: center;\n  gap: 3px;\n  width: 56px;\n  padding: 8px 4px;\n  border-radius: var(--mj-radius-md, 10px);\n  border: 1px solid transparent;\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  font-size: 16px;\n  transition: all 140ms ease;\n}\n.lean-sheet__btn:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n}\n.lean-sheet__btn--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.lean-sheet__btn small {\n  font-size: 9px;\n  font-weight: 600;\n  color: var(--mj-text-muted);\n}\n.lean-sheet__btn--on small {\n  color: var(--mj-brand-accent, var(--mj-brand-primary));\n}\n"] }]
+        args: [{ standalone: true, selector: 'mj-realtime-composer', imports: [CommonModule, FormsModule], template: "@if (StripMode && Compact) {\n  <!-- COMPACT (Calm Orb \u00B7 overlay): the lean dock \u2014 Mute + End + a first-class Captions toggle\n       (kept out of the \"\u2022\u2022\u2022\" so text stays ONE TAP in the overlay, where the banner no longer\n       carries a duplicate CC) + a \"\u2022\u2022\u2022\" that blooms a small sheet with the remaining secondary\n       actions (Details / Type). Round controls, red End \u2014 matches the mockup. -->\n  <div class=\"dock-lean\" role=\"group\" aria-label=\"Call controls\">\n    <div class=\"lean-more\" [class.lean-more--open]=\"MoreOpen\">\n      <div class=\"lean-sheet\" (click)=\"$event.stopPropagation()\" role=\"menu\" aria-label=\"More call controls\">\n        @if (ShowDetails) {\n          <button type=\"button\" class=\"lean-sheet__btn\" [class.lean-sheet__btn--on]=\"DetailsOn\"\n                  (click)=\"DetailsToggled.emit(); MoreOpen = false\"\n                  [title]=\"DetailsOn ? 'Hide the session panels' : 'Peek at the session panels'\"\n                  [attr.aria-pressed]=\"DetailsOn\">\n            <i class=\"fa-solid fa-table-columns\" aria-hidden=\"true\"></i>\n            <small>Details</small>\n          </button>\n        }\n        <button type=\"button\" class=\"lean-sheet__btn\"\n                (click)=\"OpenChanged.emit(true); MoreOpen = false\"\n                title=\"Type into the live session\" aria-label=\"Open the typed-input composer\">\n          <i class=\"fa-regular fa-keyboard\" aria-hidden=\"true\"></i>\n          <small>Type</small>\n        </button>\n      </div>\n      <button type=\"button\" class=\"lean-ctrl lean-ctrl--more\" [class.lean-ctrl--on]=\"MoreOpen\"\n              (click)=\"ToggleMore($event)\"\n              title=\"More controls\" aria-label=\"More call controls\"\n              [attr.aria-expanded]=\"MoreOpen\">\n        <i class=\"fa-solid fa-ellipsis\" aria-hidden=\"true\"></i>\n      </button>\n    </div>\n\n    <!-- Captions: first-class in the lean dock (the overlay's only text toggle now). -->\n    <button type=\"button\" class=\"lean-ctrl lean-ctrl--more\" [class.lean-ctrl--on]=\"CaptionsOn\"\n            (click)=\"ToggleCaptions()\"\n            [title]=\"CaptionsOn ? 'Voice-first \u2014 back to the orb' : 'Show the conversation as text'\"\n            [attr.aria-pressed]=\"CaptionsOn\">\n      <i class=\"fa-solid fa-closed-captioning\" aria-hidden=\"true\"></i>\n    </button>\n\n    <button type=\"button\" class=\"lean-ctrl lean-ctrl--lg\" [class.lean-ctrl--muted]=\"IsMuted\"\n            (click)=\"ToggleMute()\"\n            [title]=\"IsMuted ? 'Unmute microphone' : 'Mute microphone'\"\n            [attr.aria-pressed]=\"IsMuted\">\n      <i class=\"fa-solid\" [ngClass]=\"IsMuted ? 'fa-microphone-slash' : 'fa-microphone'\" aria-hidden=\"true\"></i>\n    </button>\n\n    <button type=\"button\" class=\"lean-ctrl lean-ctrl--lg lean-ctrl--end\" (click)=\"EndRequested.emit()\"\n            title=\"End call\" aria-label=\"End call\">\n      <i class=\"fa-solid fa-phone-slash\" aria-hidden=\"true\"></i>\n    </button>\n  </div>\n} @else if (StripMode) {\n  <!-- Levels 0\u20131: phone-call strip \u2014 big round controls, nothing to configure.\n       Captions arrives at level 1 WITH the text it controls; Details peeks at the\n       surface panels on demand; End stays the deliberate rightmost action. -->\n  <div class=\"strip\" role=\"group\" aria-label=\"Call controls\">\n    <div class=\"ctrl-group\">\n      <button type=\"button\" class=\"ctrl\" [class.ctrl--muted]=\"IsMuted\"\n              (click)=\"ToggleMute()\"\n              [title]=\"IsMuted ? 'Unmute microphone' : 'Mute microphone'\"\n              [attr.aria-pressed]=\"IsMuted\">\n        <i class=\"fa-solid\" [ngClass]=\"IsMuted ? 'fa-microphone-slash' : 'fa-microphone'\" aria-hidden=\"true\"></i>\n      </button>\n      <span class=\"ctrl-label\">{{ IsMuted ? 'Unmute' : 'Mute' }}</span>\n    </div>\n\n    <div class=\"ctrl-group\">\n      <button type=\"button\" class=\"ctrl\" [class.ctrl--on]=\"CaptionsOn\"\n              (click)=\"ToggleCaptions()\"\n              [title]=\"CaptionsOn ? 'Voice-first \u2014 back to the orb' : 'Show the conversation as text'\"\n              [attr.aria-pressed]=\"CaptionsOn\">\n        <i class=\"fa-solid fa-closed-captioning\" aria-hidden=\"true\"></i>\n      </button>\n      <span class=\"ctrl-label\">Captions</span>\n    </div>\n\n    @if (ShowDetails) {\n      <div class=\"ctrl-group\">\n        <button type=\"button\" class=\"ctrl\" [class.ctrl--on]=\"DetailsOn\"\n                (click)=\"DetailsToggled.emit()\"\n                [title]=\"DetailsOn ? 'Hide the session panels' : 'Peek at the session panels'\"\n                [attr.aria-pressed]=\"DetailsOn\">\n          <i class=\"fa-solid fa-table-columns\" aria-hidden=\"true\"></i>\n        </button>\n        <span class=\"ctrl-label\">Details</span>\n      </div>\n    }\n\n    <div class=\"ctrl-group\">\n      <button type=\"button\" class=\"ctrl\" (click)=\"OpenChanged.emit(true)\"\n              title=\"Type into the live session\" aria-label=\"Open the typed-input composer\">\n        <i class=\"fa-regular fa-keyboard\" aria-hidden=\"true\"></i>\n      </button>\n      <span class=\"ctrl-label\">Type</span>\n    </div>\n\n    <div class=\"ctrl-group\">\n      <button type=\"button\" class=\"ctrl ctrl--end\" (click)=\"EndRequested.emit()\"\n              title=\"End call\" aria-label=\"End call\">\n        <i class=\"fa-solid fa-phone-slash\" aria-hidden=\"true\"></i>\n      </button>\n      <span class=\"ctrl-label ctrl-label--end\">End call</span>\n    </div>\n  </div>\n} @else {\n  <!-- Level 2+: the fused dock \u2014 compact minis + the in-call composer in ONE bottom bar. -->\n  <div class=\"dock\">\n    <div class=\"dock__minis\">\n      <button type=\"button\" class=\"mini\" [class.mini--muted]=\"IsMuted\"\n              (click)=\"ToggleMute()\"\n              [title]=\"IsMuted ? 'Unmute microphone' : 'Mute microphone'\"\n              [attr.aria-pressed]=\"IsMuted\">\n        <i class=\"fa-solid\" [ngClass]=\"IsMuted ? 'fa-microphone-slash' : 'fa-microphone'\" aria-hidden=\"true\"></i>\n      </button>\n      <button type=\"button\" class=\"mini\" [class.mini--on]=\"CaptionsOn\"\n              (click)=\"ToggleCaptions()\"\n              [title]=\"CaptionsOn ? 'Voice-first \u2014 back to the orb' : 'Show the conversation as text'\"\n              [attr.aria-pressed]=\"CaptionsOn\">\n        <i class=\"fa-solid fa-closed-captioning\" aria-hidden=\"true\"></i>\n      </button>\n      @if (ShowDetails) {\n        <button type=\"button\" class=\"mini\" [class.mini--on]=\"DetailsOn\"\n                (click)=\"DetailsToggled.emit()\"\n                [title]=\"DetailsOn ? 'Hide the session panels' : 'Show the session panels'\"\n                [attr.aria-pressed]=\"DetailsOn\">\n          <i class=\"fa-solid fa-table-columns\" aria-hidden=\"true\"></i>\n        </button>\n      }\n    </div>\n    <div class=\"dock__box\">\n      <textarea\n        #dockInput\n        class=\"dock__input\"\n        rows=\"1\"\n        placeholder=\"Type into the live session \u2014 joins this same voice call\u2026\"\n        [(ngModel)]=\"Draft\"\n        (keydown)=\"OnKeydown($event)\"\n        (input)=\"AutoResize()\"\n        aria-label=\"Type a message into the live voice session\"></textarea>\n      <span class=\"dock__hint\" aria-hidden=\"true\">\u21B5 send</span>\n      <button\n        class=\"dock__send\"\n        type=\"button\"\n        [disabled]=\"!CanSend\"\n        (click)=\"Send()\"\n        title=\"Send into live session\"\n        aria-label=\"Send\">\n        <i class=\"fa-solid fa-paper-plane\" aria-hidden=\"true\"></i>\n      </button>\n    </div>\n    <button type=\"button\" class=\"mini dock__hide\" (click)=\"OpenChanged.emit(false)\"\n            title=\"Hide typing \u2014 back to the voice controls\"\n            aria-label=\"Close the typed-input composer\">\n      <i class=\"fa-solid fa-chevron-down\" aria-hidden=\"true\"></i>\n    </button>\n    <button type=\"button\" class=\"mini mini--end\" (click)=\"EndRequested.emit()\"\n            title=\"End call\" aria-label=\"End call\">\n      <i class=\"fa-solid fa-phone-slash\" aria-hidden=\"true\"></i>\n    </button>\n  </div>\n}\n", styles: [":host {\n  display: block;\n}\n\n/* ---------- Levels 0\u20131: phone-call strip (big round controls, centered) ---------- */\n.strip {\n  position: relative;\n  display: flex;\n  align-items: flex-start;\n  justify-content: center;\n  gap: 22px;\n  padding: 20px 22px;\n  border-top: 1px solid var(--mj-border-subtle);\n}\n\n.ctrl-group {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n\n.ctrl {\n  width: 52px;\n  height: 52px;\n  border-radius: 50%;\n  display: grid;\n  place-items: center;\n  border: 1px solid var(--mj-border-strong);\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-primary);\n  cursor: pointer;\n  font-size: 18px;\n  transition: all 150ms ease;\n}\n.ctrl:hover {\n  background: var(--mj-bg-surface-hover);\n}\n.ctrl--on {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-text-inverse, #fff);\n}\n.ctrl--muted {\n  background: var(--mj-status-warning-bg);\n  border-color: var(--mj-status-warning);\n  color: var(--mj-status-warning);\n}\n.ctrl--end {\n  width: 60px;\n  height: 60px;\n  background: var(--mj-status-error);\n  border-color: var(--mj-status-error);\n  color: var(--mj-text-inverse, #fff);\n  font-size: 20px;\n  box-shadow: 0 6px 20px color-mix(in srgb, var(--mj-status-error) 40%, transparent);\n}\n.ctrl--end:hover {\n  background: var(--mj-status-error);\n  filter: brightness(0.92);\n}\n\n.ctrl-label {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n  text-align: center;\n  margin-top: 6px;\n  font-weight: 500;\n}\n.ctrl-label--end {\n  color: var(--mj-status-error);\n}\n\n/* ---------- Level 2+: the fused dock (minis + composer in one bar) ---------- */\n.dock {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 10px 18px;\n  border-top: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  animation: dock-in 320ms cubic-bezier(0.2, 0.8, 0.3, 1);\n}\n@keyframes dock-in {\n  from { opacity: 0; transform: translateY(10px); }\n  to { opacity: 1; transform: translateY(0); }\n}\n\n.dock__minis {\n  display: flex;\n  gap: 7px;\n  flex-shrink: 0;\n}\n.mini {\n  width: 38px;\n  height: 38px;\n  border-radius: 50%;\n  display: grid;\n  place-items: center;\n  cursor: pointer;\n  font-size: 13.5px;\n  border: 1px solid var(--mj-border-strong);\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-primary);\n  transition: all 140ms ease;\n}\n.mini:hover {\n  background: var(--mj-bg-surface-hover);\n}\n.mini--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.mini--muted {\n  background: var(--mj-status-warning-bg);\n  border-color: var(--mj-status-warning);\n  color: var(--mj-status-warning);\n}\n\n.dock__box {\n  flex: 1;\n  display: flex;\n  align-items: flex-end;\n  gap: 9px;\n  padding: 5px 6px 5px 14px;\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 20px;\n  background: var(--mj-bg-surface-card);\n  transition: border-color 140ms ease, box-shadow 140ms ease, border-radius 140ms ease;\n}\n.dock__box:focus-within {\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n}\n\n.dock__input {\n  flex: 1;\n  min-width: 0;\n  background: transparent;\n  border: 0;\n  outline: none;\n  color: var(--mj-text-primary);\n  font-family: inherit;\n  font-size: 13.5px;\n  line-height: 1.45;\n  resize: none;\n  height: 24px;\n  max-height: 140px;\n  overflow-y: auto;\n  padding: 3px 0 4px 0;\n  scrollbar-width: thin;\n  scrollbar-color: var(--mj-border-strong) transparent;\n}\n.dock__input::placeholder {\n  color: var(--mj-text-muted);\n}\n\n.dock__hint {\n  font-size: 10.5px;\n  font-weight: 600;\n  color: var(--mj-text-disabled);\n  white-space: nowrap;\n}\n\n.dock__send {\n  width: 32px;\n  height: 32px;\n  border-radius: 50%;\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse, #fff);\n  border: 0;\n  display: grid;\n  place-items: center;\n  cursor: pointer;\n  font-size: 12px;\n  flex-shrink: 0;\n  transition: background 150ms ease;\n}\n.dock__send:hover:not(:disabled) {\n  background: var(--mj-brand-primary-hover, var(--mj-brand-primary));\n}\n.dock__send:disabled {\n  opacity: 0.45;\n  cursor: not-allowed;\n}\n\n/* The dock's hide control \u2014 typing is a two-way door, never permanent chrome. */\n.dock__hide {\n  border-style: dashed;\n  color: var(--mj-text-muted);\n  flex-shrink: 0;\n}\n.dock__hide:hover {\n  color: var(--mj-text-primary);\n}\n\n.mini--end {\n  background: var(--mj-status-error);\n  border-color: var(--mj-status-error);\n  color: var(--mj-text-inverse, #fff);\n  flex-shrink: 0;\n}\n.mini--end:hover {\n  background: var(--mj-status-error);\n  filter: brightness(0.92);\n}\n\n/* ============================================================= COMPACT (Calm Orb \u00B7 overlay)\n   The lean dock \u2014 Mute + End + a \"\u2022\u2022\u2022\" that blooms a small sheet (Captions / Details / Type).\n   Round controls, red End \u2014 matches the mockup. No 5-button bar, no overlapping hint. */\n.dock-lean {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 14px;\n  padding: 16px 18px 20px;\n  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--mj-bg-page) 35%, transparent));\n}\n\n.lean-ctrl {\n  display: grid;\n  place-items: center;\n  border-radius: 50%;\n  border: 1px solid var(--mj-border-strong);\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-primary);\n  cursor: pointer;\n  transition: all 150ms ease;\n}\n.lean-ctrl:hover {\n  background: var(--mj-bg-surface-hover);\n  transform: translateY(-1px);\n}\n.lean-ctrl--lg {\n  width: 58px;\n  height: 58px;\n  font-size: 19px;\n}\n.lean-ctrl--more {\n  width: 46px;\n  height: 46px;\n  font-size: 16px;\n}\n.lean-ctrl--on {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-text-inverse, #fff);\n}\n.lean-ctrl--muted {\n  background: var(--mj-status-warning-bg);\n  border-color: var(--mj-status-warning);\n  color: var(--mj-status-warning);\n}\n.lean-ctrl--end {\n  background: var(--mj-status-error);\n  border-color: var(--mj-status-error);\n  color: var(--mj-text-inverse, #fff);\n  font-size: 20px;\n  box-shadow: 0 8px 24px color-mix(in srgb, var(--mj-status-error) 40%, transparent);\n}\n.lean-ctrl--end:hover {\n  background: var(--mj-status-error);\n  filter: brightness(0.94);\n}\n\n/* The \"\u2022\u2022\u2022\" overflow + its blooming sheet. */\n.lean-more {\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n.lean-sheet {\n  position: absolute;\n  bottom: calc(100% + 12px);\n  left: 50%;\n  transform: translateX(-50%) translateY(8px);\n  display: flex;\n  gap: 10px;\n  padding: 10px;\n  border-radius: var(--mj-radius-lg, 16px);\n  background: var(--mj-bg-surface-elevated);\n  border: 1px solid var(--mj-border-default);\n  box-shadow: 0 18px 50px -22px rgba(0, 0, 0, 0.6);\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 200ms ease, transform 200ms ease;\n  z-index: 5;\n}\n.lean-more--open .lean-sheet {\n  opacity: 1;\n  pointer-events: auto;\n  transform: translateX(-50%) translateY(0);\n}\n.lean-sheet__btn {\n  display: grid;\n  place-items: center;\n  gap: 3px;\n  width: 56px;\n  padding: 8px 4px;\n  border-radius: var(--mj-radius-md, 10px);\n  border: 1px solid transparent;\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  font-size: 16px;\n  transition: all 140ms ease;\n}\n.lean-sheet__btn:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n}\n.lean-sheet__btn--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.lean-sheet__btn small {\n  font-size: 9px;\n  font-weight: 600;\n  color: var(--mj-text-muted);\n}\n.lean-sheet__btn--on small {\n  color: var(--mj-brand-accent, var(--mj-brand-primary));\n}\n"] }]
     }], null, { Open: [{
             type: Input
         }], Compact: [{