@edvak99/voice-receptionist-widget 1.1.13 → 1.1.15

package/fesm2022/edvak99-voice-receptionist-widget-live-monitor-page.component-CqOu-iLw.mjs

@@ -0,0 +1,1135 @@
+import * as i0 from '@angular/core';
+import { inject, signal, Injectable, input, output, computed, effect, ViewChild, ChangeDetectionStrategy, Component, DestroyRef, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { ActivatedRoute, RouterLink } from '@angular/router';
+import * as i1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import { firstValueFrom } from 'rxjs';
+import { j as resolveToolKey, k as resolveToolDisplayName, D as DashboardSocketService, V as VOICE_RECEPTIONIST_CONFIG, i as isUnknownCaller, I as IconComponent, A as AiReceptionistApiService, T as ToastService, l as toolEventTrackKey, c as callerMetaLine, b as ageFromDob, E as EdAvatarComponent, f as EdButtonComponent, g as EdSkeletonComponent } from './edvak99-voice-receptionist-widget-edvak99-voice-receptionist-widget-Dtc9wTzh.mjs';
+import { E as EdsElapsedPipe, a as sentimentLabel, s as sentimentIconSrc } from './edvak99-voice-receptionist-widget-eds-elapsed.pipe-Dra7e7xN.mjs';
+import { C as CallRecordingPlayerComponent } from './edvak99-voice-receptionist-widget-call-recording-player.component-CyZiBucx.mjs';
+import { Track, Room, RoomEvent, ConnectionState } from 'livekit-client';
+
+function mapChunkToLine(chunk) {
+    const at = Date.parse(chunk.timestamp);
+    return {
+        who: chunk.role === 'staff'
+            ? 'staff'
+            : chunk.role === 'system'
+                ? 'system'
+                : chunk.role === 'assistant'
+                    ? 'ai'
+                    : 'patient',
+        text: chunk.text,
+        at: Number.isFinite(at) ? at : Date.now(),
+    };
+}
+function formatEventTime(iso) {
+    return new Date(iso).toLocaleTimeString('en-US', {
+        hour: 'numeric',
+        minute: '2-digit',
+        second: '2-digit',
+        hour12: false,
+    });
+}
+function mapCallEventToTool(event) {
+    const p = event.payload;
+    const state = p['state'];
+    const rawName = String(p['name'] ?? event.eventType.replace(/^tool_/, ''));
+    const tech = String(p['tech'] ?? event.eventType);
+    const key = resolveToolKey(p['key'] != null ? String(p['key']) : undefined, rawName, tech);
+    return {
+        t: formatEventTime(event.occurredAt),
+        key,
+        name: resolveToolDisplayName(key, rawName),
+        tech,
+        result: String(p['result'] ?? ''),
+        state: state === 'ok' || state === 'warn' || state === 'error' || state === 'active'
+            ? state
+            : 'ok',
+    };
+}
+function mapLifecycleEventToTool(event) {
+    const p = event.payload;
+    return {
+        t: formatEventTime(event.occurredAt),
+        name: event.eventType.replace(/_/g, ' '),
+        tech: event.eventType,
+        result: String(p['detail'] ?? p['message'] ?? p['result'] ?? ''),
+        state: 'ok',
+    };
+}
+function isDuplicateTranscriptLine(lines, line) {
+    return lines.some((l) => l.who === line.who && l.text.trim() === line.text.trim());
+}
+
+/**
+ * Live call stream over shared Socket.io (`/dashboard` namespace).
+ * REST seeds transcript/tools once; socket delivers `new_chunk` + `call_event`.
+ */
+class LiveTranscriptService {
+    constructor() {
+        this.socket = inject(DashboardSocketService);
+        this.config = inject(VOICE_RECEPTIONIST_CONFIG);
+        this.lines = signal([]);
+        this.patientInterim = signal(null);
+        this.aiInterim = signal(null);
+        this.staffInterim = signal(null);
+        this.tools = signal([]);
+        this.connected = this.socket.connected;
+        this.error = signal(null);
+        this.callEnded = signal(false);
+        this.summaryRequested = signal(false);
+        this.activeCallId = null;
+        this.watching = false;
+        this.mockTimer = null;
+        this.mockIndex = 0;
+        this.chunkHandler = (chunk) => this.handleChunk(chunk);
+        this.eventHandler = (event) => this.handleCallEvent(event);
+        this.onSocketConnect = () => {
+            if (this.activeCallId) {
+                this.socket.emit('watch_call', { callId: this.activeCallId });
+            }
+        };
+    }
+    seed(transcript, toolEvents) {
+        this.lines.set(transcript.map((line) => ({ ...line })));
+        this.tools.set(toolEvents.map((tool) => ({ ...tool })));
+    }
+    watch(callId, live = true) {
+        const id = callId.trim();
+        if (!id || !live)
+            return;
+        const switchingCall = this.activeCallId !== id;
+        if (switchingCall) {
+            this.unsubscribeSocketEvents();
+            this.clearInterim();
+            this.callEnded.set(false);
+            this.summaryRequested.set(false);
+            this.activeCallId = id;
+        }
+        else if (this.watching) {
+            return;
+        }
+        if (this.config.useMockApi) {
+            this.watching = true;
+            this.startMockStream(id);
+            return;
+        }
+        if (!this.watching) {
+            this.socket.acquire();
+            this.socket.on('new_chunk', this.chunkHandler);
+            this.socket.on('call_event', this.eventHandler);
+            this.socket.onConnect(this.onSocketConnect);
+            this.watching = true;
+        }
+        if (this.socket.connected()) {
+            this.socket.emit('watch_call', { callId: id });
+        }
+    }
+    stop() {
+        this.activeCallId = null;
+        this.unsubscribeSocketEvents();
+        this.resetStreamState();
+    }
+    markCompleted() {
+        this.callEnded.set(true);
+        this.unsubscribeSocketEvents();
+        this.clearInterim();
+    }
+    unsubscribeSocketEvents() {
+        this.stopMockStream();
+        if (!this.watching)
+            return;
+        this.socket.off('new_chunk', this.chunkHandler);
+        this.socket.off('call_event', this.eventHandler);
+        this.socket.offConnect(this.onSocketConnect);
+        this.socket.release();
+        this.watching = false;
+    }
+    handleChunk(chunk) {
+        if (!chunk?.text?.trim())
+            return;
+        if (chunk.role === 'user') {
+            if (chunk.isFinal) {
+                this.patientInterim.set(null);
+                this.appendLineIfNew(mapChunkToLine(chunk));
+            }
+            else {
+                this.patientInterim.set(chunk.text);
+            }
+            return;
+        }
+        if (chunk.role === 'system') {
+            this.appendLineIfNew(mapChunkToLine(chunk));
+            return;
+        }
+        if (chunk.role === 'staff') {
+            if (chunk.isFinal) {
+                this.staffInterim.set(null);
+                this.appendLineIfNew(mapChunkToLine(chunk));
+            }
+            else {
+                this.staffInterim.set(chunk.text);
+            }
+            return;
+        }
+        if (chunk.isFinal) {
+            this.aiInterim.set(null);
+            this.appendLineIfNew(mapChunkToLine(chunk));
+        }
+        else {
+            this.aiInterim.set(chunk.text);
+        }
+    }
+    handleCallEvent(event) {
+        if (!event?.eventType)
+            return;
+        if (event.eventType.startsWith('tool_')) {
+            this.tools.update((prev) => [...prev, mapCallEventToTool(event)]);
+            return;
+        }
+        if (event.eventType === 'call_completed') {
+            this.markCompleted();
+            return;
+        }
+        if (event.eventType === 'summary_generated') {
+            this.summaryRequested.set(true);
+            return;
+        }
+        this.tools.update((prev) => [...prev, mapLifecycleEventToTool(event)]);
+    }
+    appendLineIfNew(line) {
+        this.lines.update((prev) => {
+            if (isDuplicateTranscriptLine(prev, line))
+                return prev;
+            return [...prev, line];
+        });
+    }
+    startMockStream(callId) {
+        this.stopMockStream();
+        this.mockIndex = 0;
+        const mockChunks = [
+            {
+                role: 'user',
+                text: 'Hi, I need to schedule an appointment.',
+                isFinal: false,
+                timestamp: new Date().toISOString(),
+            },
+            {
+                role: 'user',
+                text: 'Hi, I need to schedule an appointment.',
+                isFinal: true,
+                timestamp: new Date().toISOString(),
+            },
+            {
+                role: 'assistant',
+                text: 'Of course — I can help with that. Which provider would you prefer?',
+                isFinal: true,
+                timestamp: new Date().toISOString(),
+            },
+        ];
+        const mockEvents = [
+            {
+                eventType: 'tool_check_doctor_availability',
+                occurredAt: new Date().toISOString(),
+                payload: {
+                    key: 'check_doctor_availability',
+                    name: 'Checked Doctor Availability',
+                    tech: 'tool_check_doctor_availability',
+                    result: 'Found 3 available time slots',
+                    state: 'ok',
+                },
+            },
+        ];
+        this.mockTimer = setInterval(() => {
+            if (this.activeCallId !== callId) {
+                this.stopMockStream();
+                return;
+            }
+            if (this.mockIndex < mockChunks.length) {
+                this.handleChunk(mockChunks[this.mockIndex]);
+                this.mockIndex++;
+                return;
+            }
+            if (this.mockIndex === mockChunks.length) {
+                this.handleCallEvent(mockEvents[0]);
+                this.mockIndex++;
+            }
+        }, 1500);
+    }
+    stopMockStream() {
+        if (this.mockTimer) {
+            clearInterval(this.mockTimer);
+            this.mockTimer = null;
+        }
+    }
+    clearInterim() {
+        this.patientInterim.set(null);
+        this.aiInterim.set(null);
+        this.staffInterim.set(null);
+    }
+    resetStreamState() {
+        this.lines.set([]);
+        this.tools.set([]);
+        this.clearInterim();
+        this.error.set(null);
+        this.callEnded.set(false);
+        this.summaryRequested.set(false);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: LiveTranscriptService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: LiveTranscriptService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: LiveTranscriptService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class LiveTranscriptPanelComponent {
+    constructor() {
+        this.live = input(true);
+        this.paused = input(false);
+        this.humanTakeover = input(false);
+        this.showStaffInput = input(false);
+        /** Co-Pilot chips + purple send control (Figma live monitor). */
+        this.showCopilot = input(false);
+        /** Call start ms for the Recording timer pill. */
+        this.callStarted = input(null);
+        this.staffMessage = input('');
+        /** Resolved patient display name from the live call. */
+        this.callerName = input(null);
+        /** Whether the caller was matched to a patient chart. */
+        this.callerMatched = input(false);
+        this.staffMessageChange = output();
+        this.sendMessage = output();
+        this.stream = inject(LiveTranscriptService);
+        this.lines = this.stream.lines;
+        this.patientInterim = this.stream.patientInterim;
+        this.aiInterim = this.stream.aiInterim;
+        this.staffInterim = this.stream.staffInterim;
+        this.connected = this.stream.connected;
+        this.error = this.stream.error;
+        this.callerLabel = computed(() => {
+            const name = this.callerName()?.trim() ?? '';
+            if (isUnknownCaller(name, this.callerMatched()))
+                return 'Unknown Caller';
+            return name || 'Unknown Caller';
+        });
+        this.copilotChips = [
+            'Ask for MRN',
+            'Create Task: Follow Up',
+            'Ask for full Name & DOB',
+            'Verify Phone Number',
+        ];
+        this.shouldScroll = false;
+        effect(() => {
+            this.lines();
+            this.patientInterim();
+            this.aiInterim();
+            this.staffInterim();
+            this.requestScroll();
+        });
+    }
+    ngAfterViewChecked() {
+        if (this.shouldScroll && this.scrollHost) {
+            const el = this.scrollHost.nativeElement;
+            el.scrollTop = el.scrollHeight;
+            this.shouldScroll = false;
+        }
+    }
+    roleLabel(who) {
+        switch (who) {
+            case 'ai':
+                return 'AI Receptionist';
+            case 'patient':
+                return this.callerLabel();
+            case 'staff':
+                return 'Staff';
+            default:
+                return 'System';
+        }
+    }
+    speakerIcon(who) {
+        switch (who) {
+            case 'ai':
+                return 'graph_new';
+            case 'staff':
+                return 'Robot';
+            case 'patient':
+                return 'person';
+            default:
+                return 'info';
+        }
+    }
+    systemIcon(flag) {
+        if (flag === 'verify')
+            return 'verified_user';
+        if (flag === 'fail' || flag === 'escalate')
+            return 'bolt';
+        return 'info';
+    }
+    onStaffInput(value) {
+        this.staffMessageChange.emit(value);
+    }
+    onChipClick(chip) {
+        this.staffMessageChange.emit(chip);
+    }
+    onSend() {
+        this.sendMessage.emit();
+    }
+    requestScroll() {
+        this.shouldScroll = true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: LiveTranscriptPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: LiveTranscriptPanelComponent, isStandalone: true, selector: "eds-live-transcript-panel", inputs: { live: { classPropertyName: "live", publicName: "live", isSignal: true, isRequired: false, transformFunction: null }, paused: { classPropertyName: "paused", publicName: "paused", isSignal: true, isRequired: false, transformFunction: null }, humanTakeover: { classPropertyName: "humanTakeover", publicName: "humanTakeover", isSignal: true, isRequired: false, transformFunction: null }, showStaffInput: { classPropertyName: "showStaffInput", publicName: "showStaffInput", isSignal: true, isRequired: false, transformFunction: null }, showCopilot: { classPropertyName: "showCopilot", publicName: "showCopilot", isSignal: true, isRequired: false, transformFunction: null }, callStarted: { classPropertyName: "callStarted", publicName: "callStarted", isSignal: true, isRequired: false, transformFunction: null }, staffMessage: { classPropertyName: "staffMessage", publicName: "staffMessage", isSignal: true, isRequired: false, transformFunction: null }, callerName: { classPropertyName: "callerName", publicName: "callerName", isSignal: true, isRequired: false, transformFunction: null }, callerMatched: { classPropertyName: "callerMatched", publicName: "callerMatched", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { staffMessageChange: "staffMessageChange", sendMessage: "sendMessage" }, host: { classAttribute: "flex h-full min-h-0 flex-1 flex-col max-[900px]:h-auto max-[900px]:max-h-none max-[900px]:min-h-[360px]" }, viewQueries: [{ propertyName: "scrollHost", first: true, predicate: ["scrollHost"], descendants: true }], ngImport: i0, template: "<section\n  class=\"flex h-full min-h-0 flex-1 flex-col overflow-hidden rounded-xl bg-white p-4 max-[900px]:h-auto max-[900px]:max-h-none max-[900px]:min-h-[360px]\"\n  aria-labelledby=\"live-transcript-title\"\n>\n  <header class=\"mb-4 flex shrink-0 items-center justify-between gap-3\">\n    <div class=\"flex min-w-0 items-center gap-2\">\n      <h4 id=\"live-transcript-title\" class=\"m-0\">Live Transcript</h4>\n      @if (live() && !paused()) {\n        <span class=\"live-transcript-panel__recording inline-flex h-5 items-center gap-1 rounded px-1 text-red-600\">\n          <span class=\"h-1.5 w-1.5 rounded-full bg-red-600\" aria-hidden=\"true\"></span>\n          Recording\n        </span>\n      }\n    </div>\n    @if (callStarted()) {\n      <span class=\"live-transcript-panel__timer inline-flex items-center gap-0.5 rounded-full bg-green-500/10 px-1 py-0.5 text-green-700\">\n        <span class=\"h-1.5 w-1.5 rounded-full bg-green-600\" aria-hidden=\"true\"></span>\n        <span class=\"font-mono uppercase tracking-wide\">{{ callStarted() | edsElapsed }}</span>\n      </span>\n    }\n  </header>\n\n  <div #scrollHost class=\"chat-thread live-transcript-panel__thread\" role=\"log\" aria-live=\"polite\">\n    @for (line of lines(); track $index) {\n      @if (line.who === 'system') {\n        <div class=\"chat-row chat-row--system\">\n          <div\n            class=\"chat-bubble chat-bubble--system inline-flex items-center gap-2\"\n            [class.border-emerald-200]=\"line.flag === 'verify'\"\n            [class.bg-emerald-50]=\"line.flag === 'verify'\"\n            [class.text-emerald-700]=\"line.flag === 'verify'\"\n            [class.border-amber-200]=\"line.flag === 'fail' || line.flag === 'escalate'\"\n            [class.bg-amber-50]=\"line.flag === 'fail' || line.flag === 'escalate'\"\n            [class.text-amber-700]=\"line.flag === 'fail' || line.flag === 'escalate'\"\n          >\n            <ed-icon [name]=\"systemIcon(line.flag)\" [size]=\"14\" />\n            <span>{{ line.text }}</span>\n          </div>\n        </div>\n      } @else {\n        <article\n          class=\"chat-row\"\n          [class.chat-row--caller]=\"line.who === 'patient'\"\n          [class.chat-row--ai]=\"line.who === 'ai'\"\n          [class.chat-row--staff]=\"line.who === 'staff'\"\n        >\n          <div class=\"chat-meta\">\n            <span [class.live-transcript-panel__meta--ai]=\"line.who === 'ai'\">{{ roleLabel(line.who) }}</span>\n          </div>\n          <div class=\"chat-bubble-row\">\n            <div\n              class=\"chat-avatar\"\n              [class.chat-avatar--ai]=\"line.who === 'ai'\"\n              [class.live-transcript-panel__avatar--ai]=\"line.who === 'ai'\"\n              [class.chat-avatar--staff]=\"line.who === 'staff'\"\n              [class.chat-avatar--caller]=\"line.who === 'patient'\"\n            >\n              <ed-icon [name]=\"speakerIcon(line.who)\" [size]=\"16\" />\n            </div>\n            <div\n              class=\"chat-bubble\"\n              [class.chat-bubble--caller]=\"line.who === 'patient'\"\n              [class.chat-bubble--ai]=\"line.who === 'ai'\"\n              [class.chat-bubble--staff]=\"line.who === 'staff'\"\n            >\n              <p class=\"chat-content\">{{ line.text }}</p>\n            </div>\n          </div>\n        </article>\n      }\n    }\n\n    @if (patientInterim(); as interim) {\n      <article class=\"chat-row chat-row--caller\">\n        <div class=\"chat-meta\">\n          <span>{{ callerLabel() }}</span>\n        </div>\n        <div class=\"chat-bubble-row\">\n          <div class=\"chat-avatar chat-avatar--caller\">\n            <ed-icon name=\"person\" [size]=\"16\" />\n          </div>\n          <div class=\"chat-bubble chat-bubble--caller chat-bubble--interim live-transcript-panel__typing\">\n            <span class=\"live-transcript-panel__dot\" aria-hidden=\"true\"></span>\n            <span class=\"live-transcript-panel__dot\" aria-hidden=\"true\"></span>\n            <span class=\"live-transcript-panel__dot\" aria-hidden=\"true\"></span>\n            <span class=\"sr-only\">{{ interim }}</span>\n          </div>\n        </div>\n      </article>\n    }\n\n    @if (staffInterim(); as interim) {\n      <article class=\"chat-row chat-row--staff\">\n        <div class=\"chat-meta\"><span>Staff</span></div>\n        <div class=\"chat-bubble-row\">\n          <div class=\"chat-avatar chat-avatar--staff\">\n            <ed-icon name=\"Robot\" [size]=\"16\" />\n          </div>\n          <div class=\"chat-bubble chat-bubble--staff chat-bubble--interim\">\n            <p class=\"chat-content\">{{ interim }}</p>\n          </div>\n        </div>\n      </article>\n    }\n\n    @if (aiInterim(); as interim) {\n      <article class=\"chat-row chat-row--ai\">\n        <div class=\"chat-meta\">\n          <span class=\"live-transcript-panel__meta--ai\">AI Receptionist</span>\n        </div>\n        <div class=\"chat-bubble-row\">\n          <div class=\"chat-avatar chat-avatar--ai live-transcript-panel__avatar--ai\">\n            <ed-icon name=\"graph_new\" [size]=\"16\" />\n          </div>\n          <div class=\"chat-bubble chat-bubble--ai chat-bubble--interim\">\n            <p class=\"chat-content\">\n              {{ interim }}<span class=\"live-transcript-panel__caret\" aria-hidden=\"true\"></span>\n            </p>\n          </div>\n        </div>\n      </article>\n    }\n\n    @if (lines().length === 0 && !patientInterim() && !aiInterim() && !staffInterim()) {\n      <p class=\"m-0 px-3 py-8 text-center text-zinc-500\">Waiting for conversation\u2026</p>\n    }\n  </div>\n\n  @if (showCopilot() || showStaffInput()) {\n    <footer class=\"mt-4 flex shrink-0 flex-col gap-4\">\n      @if (showCopilot()) {\n        <div class=\"flex flex-wrap items-center gap-2\">\n          <span class=\"inline-flex items-center justify-center rounded-md bg-purple-500/10 p-1 text-purple-700\">\n            <ed-icon name=\"sparkle\" [size]=\"12\" />\n          </span>\n          @for (chip of copilotChips; track chip) {\n            <button\n              type=\"button\"\n              class=\"live-transcript-panel__chip inline-flex h-5 items-center rounded border border-zinc-200 bg-white px-1 text-zinc-700\"\n              (click)=\"onChipClick(chip)\"\n            >\n              {{ chip }}\n            </button>\n          }\n        </div>\n      }\n\n      <div class=\"flex items-center gap-2 rounded-lg border border-zinc-200 p-2\">\n        <input\n          type=\"text\"\n          class=\"h-8 min-w-0 flex-1 border-0 bg-transparent px-1 text-zinc-900 outline-none placeholder:text-zinc-400\"\n          [placeholder]=\"showCopilot() ? 'Tell the AI what it should know or do next\u2026' : 'Type to speak as staff\u2026'\"\n          [ngModel]=\"staffMessage()\"\n          (ngModelChange)=\"onStaffInput($event)\"\n          (keyup.enter)=\"onSend()\"\n          autocomplete=\"off\"\n        />\n        @if (showCopilot()) {\n          <button\n            type=\"button\"\n            class=\"live-transcript-panel__copilot-btn inline-flex h-8 shrink-0 items-center gap-0.5 rounded-md bg-purple-600 px-2 text-white\"\n            (click)=\"onSend()\"\n          >\n            Co-Pilot\n            <ed-icon name=\"sparkle\" [size]=\"14\" />\n          </button>\n        }\n      </div>\n    </footer>\n  }\n</section>\n", styles: ["@charset \"UTF-8\";.chat-thread{display:flex;flex-direction:column;gap:0;flex:1 1 auto;min-height:0;overflow:auto;padding:1rem 1.5rem;background:#fff;scroll-behavior:smooth}.chat-row{display:flex;flex-direction:column;width:100%;margin-bottom:1rem}.chat-row--caller,.chat-row--user,.chat-row--patient{align-items:flex-start}.chat-row--agent,.chat-row--ai,.chat-row--staff{align-items:flex-end}.chat-row--tool,.chat-row--system{align-items:center}.chat-meta{display:flex;align-items:center;gap:.5rem;margin-bottom:.25rem;font-size:.875rem;color:var(--color-text-light, #6b7280)}.chat-row--agent .chat-meta,.chat-row--ai .chat-meta,.chat-row--staff .chat-meta{justify-content:flex-end;padding-right:2.75rem}.chat-bubble-row{display:flex;align-items:flex-start;gap:.5rem;max-width:min(72%,40rem)}.chat-row--agent .chat-bubble-row,.chat-row--ai .chat-bubble-row,.chat-row--staff .chat-bubble-row{flex-direction:row-reverse}.chat-avatar{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border-radius:9999px}.chat-avatar--ai{background:#ad46ff1f;color:#8200db}.chat-avatar--staff{border:1px solid #ddd6fe;background:#f5f3ff;color:#6d28d9}.chat-avatar--caller{background:#e5e7eb;color:#4b5563}.chat-bubble{max-width:100%;padding:.75rem 1rem;font-size:.875rem;line-height:1.5;word-break:break-word;white-space:pre-wrap}.chat-bubble--caller,.chat-bubble--user,.chat-bubble--patient{border:1px solid var(--color-border-light, #e5e7eb);border-radius:0 .5rem .5rem;background:#fff;color:var(--color-text-dark, #111827)}.chat-bubble--agent,.chat-bubble--ai{border:none;border-radius:.5rem;background:#ad46ff1a;color:var(--color-text-dark, #53575c)}.chat-bubble--staff{border:1px solid #ddd6fe;border-radius:.5rem 0 .5rem .5rem;background:#f5f3ff;color:#4c1d95}.chat-bubble--tool,.chat-bubble--system{max-width:min(90%,40rem);padding:.5rem .75rem;border:1px solid var(--color-border-light, #e5e7eb);border-radius:9999px;background:#f9fafb;color:#6b7280;font-size:.75rem;text-align:center}.chat-bubble--interim{opacity:.9;font-style:italic}.chat-content{margin:0}.chat-time{font-size:.75rem;color:#9ca3af}.live-transcript-panel__thread.chat-thread{background:#f7f9fa;border-radius:.75rem;padding:1rem}.live-transcript-panel__avatar--ai{background:#ad46ff1f;color:#8200db}.live-transcript-panel__meta--ai{color:#8200db}.live-transcript-panel__caret{display:inline-block;width:7px;height:14px;margin-left:2px;vertical-align:text-bottom;background:#8200db;animation:eds-caret 1s step-end infinite}.live-transcript-panel__typing{display:inline-flex;align-items:center;gap:4px;min-width:2.5rem;min-height:1.25rem}.live-transcript-panel__dot{width:6px;height:6px;border-radius:9999px;background:#a2a4a6;animation:eds-typing 1.2s ease-in-out infinite}.live-transcript-panel__dot:nth-child(2){animation-delay:.15s}.live-transcript-panel__dot:nth-child(3){animation-delay:.3s}.live-transcript-panel__chip{cursor:pointer}.live-transcript-panel__chip:hover{background:#f7f9fa}.live-transcript-panel__copilot-btn{cursor:pointer;border:0}@keyframes eds-caret{50%{opacity:0}}@keyframes eds-typing{0%,80%,to{opacity:.35;transform:translateY(0)}40%{opacity:1;transform:translateY(-2px)}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IconComponent, selector: "ed-icon", inputs: ["name", "size", "color", "cssClass", "decorative", "ariaHidden", "ariaLabel", "title", "desc", "focusable", "tabIndex"] }, { kind: "pipe", type: EdsElapsedPipe, name: "edsElapsed" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: LiveTranscriptPanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'eds-live-transcript-panel', imports: [FormsModule, IconComponent, EdsElapsedPipe], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'flex h-full min-h-0 flex-1 flex-col max-[900px]:h-auto max-[900px]:max-h-none max-[900px]:min-h-[360px]',
+                    }, template: "<section\n  class=\"flex h-full min-h-0 flex-1 flex-col overflow-hidden rounded-xl bg-white p-4 max-[900px]:h-auto max-[900px]:max-h-none max-[900px]:min-h-[360px]\"\n  aria-labelledby=\"live-transcript-title\"\n>\n  <header class=\"mb-4 flex shrink-0 items-center justify-between gap-3\">\n    <div class=\"flex min-w-0 items-center gap-2\">\n      <h4 id=\"live-transcript-title\" class=\"m-0\">Live Transcript</h4>\n      @if (live() && !paused()) {\n        <span class=\"live-transcript-panel__recording inline-flex h-5 items-center gap-1 rounded px-1 text-red-600\">\n          <span class=\"h-1.5 w-1.5 rounded-full bg-red-600\" aria-hidden=\"true\"></span>\n          Recording\n        </span>\n      }\n    </div>\n    @if (callStarted()) {\n      <span class=\"live-transcript-panel__timer inline-flex items-center gap-0.5 rounded-full bg-green-500/10 px-1 py-0.5 text-green-700\">\n        <span class=\"h-1.5 w-1.5 rounded-full bg-green-600\" aria-hidden=\"true\"></span>\n        <span class=\"font-mono uppercase tracking-wide\">{{ callStarted() | edsElapsed }}</span>\n      </span>\n    }\n  </header>\n\n  <div #scrollHost class=\"chat-thread live-transcript-panel__thread\" role=\"log\" aria-live=\"polite\">\n    @for (line of lines(); track $index) {\n      @if (line.who === 'system') {\n        <div class=\"chat-row chat-row--system\">\n          <div\n            class=\"chat-bubble chat-bubble--system inline-flex items-center gap-2\"\n            [class.border-emerald-200]=\"line.flag === 'verify'\"\n            [class.bg-emerald-50]=\"line.flag === 'verify'\"\n            [class.text-emerald-700]=\"line.flag === 'verify'\"\n            [class.border-amber-200]=\"line.flag === 'fail' || line.flag === 'escalate'\"\n            [class.bg-amber-50]=\"line.flag === 'fail' || line.flag === 'escalate'\"\n            [class.text-amber-700]=\"line.flag === 'fail' || line.flag === 'escalate'\"\n          >\n            <ed-icon [name]=\"systemIcon(line.flag)\" [size]=\"14\" />\n            <span>{{ line.text }}</span>\n          </div>\n        </div>\n      } @else {\n        <article\n          class=\"chat-row\"\n          [class.chat-row--caller]=\"line.who === 'patient'\"\n          [class.chat-row--ai]=\"line.who === 'ai'\"\n          [class.chat-row--staff]=\"line.who === 'staff'\"\n        >\n          <div class=\"chat-meta\">\n            <span [class.live-transcript-panel__meta--ai]=\"line.who === 'ai'\">{{ roleLabel(line.who) }}</span>\n          </div>\n          <div class=\"chat-bubble-row\">\n            <div\n              class=\"chat-avatar\"\n              [class.chat-avatar--ai]=\"line.who === 'ai'\"\n              [class.live-transcript-panel__avatar--ai]=\"line.who === 'ai'\"\n              [class.chat-avatar--staff]=\"line.who === 'staff'\"\n              [class.chat-avatar--caller]=\"line.who === 'patient'\"\n            >\n              <ed-icon [name]=\"speakerIcon(line.who)\" [size]=\"16\" />\n            </div>\n            <div\n              class=\"chat-bubble\"\n              [class.chat-bubble--caller]=\"line.who === 'patient'\"\n              [class.chat-bubble--ai]=\"line.who === 'ai'\"\n              [class.chat-bubble--staff]=\"line.who === 'staff'\"\n            >\n              <p class=\"chat-content\">{{ line.text }}</p>\n            </div>\n          </div>\n        </article>\n      }\n    }\n\n    @if (patientInterim(); as interim) {\n      <article class=\"chat-row chat-row--caller\">\n        <div class=\"chat-meta\">\n          <span>{{ callerLabel() }}</span>\n        </div>\n        <div class=\"chat-bubble-row\">\n          <div class=\"chat-avatar chat-avatar--caller\">\n            <ed-icon name=\"person\" [size]=\"16\" />\n          </div>\n          <div class=\"chat-bubble chat-bubble--caller chat-bubble--interim live-transcript-panel__typing\">\n            <span class=\"live-transcript-panel__dot\" aria-hidden=\"true\"></span>\n            <span class=\"live-transcript-panel__dot\" aria-hidden=\"true\"></span>\n            <span class=\"live-transcript-panel__dot\" aria-hidden=\"true\"></span>\n            <span class=\"sr-only\">{{ interim }}</span>\n          </div>\n        </div>\n      </article>\n    }\n\n    @if (staffInterim(); as interim) {\n      <article class=\"chat-row chat-row--staff\">\n        <div class=\"chat-meta\"><span>Staff</span></div>\n        <div class=\"chat-bubble-row\">\n          <div class=\"chat-avatar chat-avatar--staff\">\n            <ed-icon name=\"Robot\" [size]=\"16\" />\n          </div>\n          <div class=\"chat-bubble chat-bubble--staff chat-bubble--interim\">\n            <p class=\"chat-content\">{{ interim }}</p>\n          </div>\n        </div>\n      </article>\n    }\n\n    @if (aiInterim(); as interim) {\n      <article class=\"chat-row chat-row--ai\">\n        <div class=\"chat-meta\">\n          <span class=\"live-transcript-panel__meta--ai\">AI Receptionist</span>\n        </div>\n        <div class=\"chat-bubble-row\">\n          <div class=\"chat-avatar chat-avatar--ai live-transcript-panel__avatar--ai\">\n            <ed-icon name=\"graph_new\" [size]=\"16\" />\n          </div>\n          <div class=\"chat-bubble chat-bubble--ai chat-bubble--interim\">\n            <p class=\"chat-content\">\n              {{ interim }}<span class=\"live-transcript-panel__caret\" aria-hidden=\"true\"></span>\n            </p>\n          </div>\n        </div>\n      </article>\n    }\n\n    @if (lines().length === 0 && !patientInterim() && !aiInterim() && !staffInterim()) {\n      <p class=\"m-0 px-3 py-8 text-center text-zinc-500\">Waiting for conversation\u2026</p>\n    }\n  </div>\n\n  @if (showCopilot() || showStaffInput()) {\n    <footer class=\"mt-4 flex shrink-0 flex-col gap-4\">\n      @if (showCopilot()) {\n        <div class=\"flex flex-wrap items-center gap-2\">\n          <span class=\"inline-flex items-center justify-center rounded-md bg-purple-500/10 p-1 text-purple-700\">\n            <ed-icon name=\"sparkle\" [size]=\"12\" />\n          </span>\n          @for (chip of copilotChips; track chip) {\n            <button\n              type=\"button\"\n              class=\"live-transcript-panel__chip inline-flex h-5 items-center rounded border border-zinc-200 bg-white px-1 text-zinc-700\"\n              (click)=\"onChipClick(chip)\"\n            >\n              {{ chip }}\n            </button>\n          }\n        </div>\n      }\n\n      <div class=\"flex items-center gap-2 rounded-lg border border-zinc-200 p-2\">\n        <input\n          type=\"text\"\n          class=\"h-8 min-w-0 flex-1 border-0 bg-transparent px-1 text-zinc-900 outline-none placeholder:text-zinc-400\"\n          [placeholder]=\"showCopilot() ? 'Tell the AI what it should know or do next\u2026' : 'Type to speak as staff\u2026'\"\n          [ngModel]=\"staffMessage()\"\n          (ngModelChange)=\"onStaffInput($event)\"\n          (keyup.enter)=\"onSend()\"\n          autocomplete=\"off\"\n        />\n        @if (showCopilot()) {\n          <button\n            type=\"button\"\n            class=\"live-transcript-panel__copilot-btn inline-flex h-8 shrink-0 items-center gap-0.5 rounded-md bg-purple-600 px-2 text-white\"\n            (click)=\"onSend()\"\n          >\n            Co-Pilot\n            <ed-icon name=\"sparkle\" [size]=\"14\" />\n          </button>\n        }\n      </div>\n    </footer>\n  }\n</section>\n", styles: ["@charset \"UTF-8\";.chat-thread{display:flex;flex-direction:column;gap:0;flex:1 1 auto;min-height:0;overflow:auto;padding:1rem 1.5rem;background:#fff;scroll-behavior:smooth}.chat-row{display:flex;flex-direction:column;width:100%;margin-bottom:1rem}.chat-row--caller,.chat-row--user,.chat-row--patient{align-items:flex-start}.chat-row--agent,.chat-row--ai,.chat-row--staff{align-items:flex-end}.chat-row--tool,.chat-row--system{align-items:center}.chat-meta{display:flex;align-items:center;gap:.5rem;margin-bottom:.25rem;font-size:.875rem;color:var(--color-text-light, #6b7280)}.chat-row--agent .chat-meta,.chat-row--ai .chat-meta,.chat-row--staff .chat-meta{justify-content:flex-end;padding-right:2.75rem}.chat-bubble-row{display:flex;align-items:flex-start;gap:.5rem;max-width:min(72%,40rem)}.chat-row--agent .chat-bubble-row,.chat-row--ai .chat-bubble-row,.chat-row--staff .chat-bubble-row{flex-direction:row-reverse}.chat-avatar{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border-radius:9999px}.chat-avatar--ai{background:#ad46ff1f;color:#8200db}.chat-avatar--staff{border:1px solid #ddd6fe;background:#f5f3ff;color:#6d28d9}.chat-avatar--caller{background:#e5e7eb;color:#4b5563}.chat-bubble{max-width:100%;padding:.75rem 1rem;font-size:.875rem;line-height:1.5;word-break:break-word;white-space:pre-wrap}.chat-bubble--caller,.chat-bubble--user,.chat-bubble--patient{border:1px solid var(--color-border-light, #e5e7eb);border-radius:0 .5rem .5rem;background:#fff;color:var(--color-text-dark, #111827)}.chat-bubble--agent,.chat-bubble--ai{border:none;border-radius:.5rem;background:#ad46ff1a;color:var(--color-text-dark, #53575c)}.chat-bubble--staff{border:1px solid #ddd6fe;border-radius:.5rem 0 .5rem .5rem;background:#f5f3ff;color:#4c1d95}.chat-bubble--tool,.chat-bubble--system{max-width:min(90%,40rem);padding:.5rem .75rem;border:1px solid var(--color-border-light, #e5e7eb);border-radius:9999px;background:#f9fafb;color:#6b7280;font-size:.75rem;text-align:center}.chat-bubble--interim{opacity:.9;font-style:italic}.chat-content{margin:0}.chat-time{font-size:.75rem;color:#9ca3af}.live-transcript-panel__thread.chat-thread{background:#f7f9fa;border-radius:.75rem;padding:1rem}.live-transcript-panel__avatar--ai{background:#ad46ff1f;color:#8200db}.live-transcript-panel__meta--ai{color:#8200db}.live-transcript-panel__caret{display:inline-block;width:7px;height:14px;margin-left:2px;vertical-align:text-bottom;background:#8200db;animation:eds-caret 1s step-end infinite}.live-transcript-panel__typing{display:inline-flex;align-items:center;gap:4px;min-width:2.5rem;min-height:1.25rem}.live-transcript-panel__dot{width:6px;height:6px;border-radius:9999px;background:#a2a4a6;animation:eds-typing 1.2s ease-in-out infinite}.live-transcript-panel__dot:nth-child(2){animation-delay:.15s}.live-transcript-panel__dot:nth-child(3){animation-delay:.3s}.live-transcript-panel__chip{cursor:pointer}.live-transcript-panel__chip:hover{background:#f7f9fa}.live-transcript-panel__copilot-btn{cursor:pointer;border:0}@keyframes eds-caret{50%{opacity:0}}@keyframes eds-typing{0%,80%,to{opacity:.35;transform:translateY(0)}40%{opacity:1;transform:translateY(-2px)}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { scrollHost: [{
+                type: ViewChild,
+                args: ['scrollHost']
+            }] } });
+
+const STAFF_IDENTITY_PREFIX = 'staff-';
+/**
+ * Browser softphone for staff Listen / Take Over via LiveKit.
+ * Secrets stay on the server — FE only uses short-lived clientToken + livekitUrl.
+ *
+ * Root-provided on purpose: the session must survive navigating away from the
+ * Live Monitor page, otherwise switching dashboard tabs would drop the call.
+ */
+class StaffMediaService {
+    constructor() {
+        this.connectionState = signal('idle');
+        this.mode = signal(null);
+        this.micEnabled = signal(false);
+        this.error = signal(null);
+        this.activeCallId = signal(null);
+        /** False when the browser blocks autoplay — UI should offer an "enable sound" action. */
+        this.audioPlaybackAllowed = signal(true);
+        /** True once remote caller audio is actually attached and playing. */
+        this.remoteAudioAttached = signal(false);
+        this.room = null;
+        this.audioContainer = null;
+        this.attached = new Map();
+        this.onTrackSubscribed = (track, publication, participant) => {
+            if (track.kind !== Track.Kind.Audio)
+                return;
+            // Never play another staff softphone back — that is a direct feedback loop
+            // where the person taking over hears their own voice.
+            if (this.isStaff(participant.identity)) {
+                try {
+                    publication.setSubscribed(false);
+                }
+                catch {
+                    /* server may already have unsubscribed */
+                }
+                return;
+            }
+            const container = this.ensureAudioContainer();
+            const element = track.attach();
+            element.autoplay = true;
+            element.setAttribute('playsinline', 'true');
+            element.volume = 1;
+            container.appendChild(element);
+            const key = publication.trackSid || track.sid || participant.identity;
+            this.attached.set(key, [...(this.attached.get(key) ?? []), element]);
+            this.remoteAudioAttached.set(true);
+            void element.play().catch(() => {
+                // Autoplay blocked — surfaced via the "Enable sound" action.
+                this.audioPlaybackAllowed.set(false);
+            });
+        };
+        this.onTrackUnsubscribed = (track, publication, participant) => {
+            if (track.kind !== Track.Kind.Audio)
+                return;
+            const key = publication.trackSid || track.sid || participant.identity;
+            this.detachKey(key, track);
+        };
+        this.onParticipantDisconnected = (participant) => {
+            for (const publication of participant.trackPublications.values()) {
+                const key = publication.trackSid;
+                if (key)
+                    this.detachKey(key);
+            }
+        };
+        /** Staff tracks are dropped server-side as soon as they appear. */
+        this.onTrackPublished = (publication, participant) => {
+            if (!this.isStaff(participant.identity))
+                return;
+            try {
+                publication.setSubscribed(false);
+            }
+            catch {
+                /* nothing to unsubscribe */
+            }
+        };
+    }
+    get isConnected() {
+        return this.connectionState() === 'connected';
+    }
+    /** True when a softphone session is live for this call, regardless of page. */
+    isConnectedTo(callId) {
+        return this.isConnected && this.activeCallId() === callId;
+    }
+    /**
+     * getUserMedia only exists in a secure context (https or localhost) and, inside an
+     * iframe, requires allow="microphone". Returns null when capture is possible.
+     */
+    microphoneBlockedReason() {
+        if (typeof navigator === 'undefined')
+            return 'Microphone is not available in this environment.';
+        if (!navigator.mediaDevices?.getUserMedia) {
+            const secure = typeof window !== 'undefined' && window.isSecureContext;
+            return secure
+                ? 'Microphone access is blocked by the browser. If the dashboard is embedded, the host page must allow microphone access.'
+                : 'Microphone access needs a secure connection. Open the dashboard over https (or localhost) to talk to callers.';
+        }
+        return null;
+    }
+    async join(join) {
+        if (join.provider && join.provider !== 'livekit') {
+            throw new Error(`Unsupported media provider: ${join.provider}`);
+        }
+        if (!join.livekitUrl || !join.clientToken) {
+            throw new Error('Missing LiveKit URL or client token from media/join');
+        }
+        if (join.mode === 'takeover') {
+            const blocked = this.microphoneBlockedReason();
+            if (blocked)
+                throw new Error(blocked);
+        }
+        await this.disconnect();
+        this.connectionState.set('connecting');
+        this.error.set(null);
+        this.mode.set(join.mode);
+        this.activeCallId.set(join.callId || null);
+        this.micEnabled.set(false);
+        const room = new Room({
+            adaptiveStream: true,
+            dynacast: true,
+            audioCaptureDefaults: {
+                echoCancellation: true,
+                noiseSuppression: true,
+                autoGainControl: true,
+            },
+        });
+        room.on(RoomEvent.Disconnected, () => {
+            if (this.room !== room)
+                return;
+            void this.cleanupLocal(false);
+            this.connectionState.set('idle');
+            this.mode.set(null);
+            this.activeCallId.set(null);
+            this.micEnabled.set(false);
+        });
+        room.on(RoomEvent.ConnectionStateChanged, (state) => {
+            if (this.room !== room)
+                return;
+            if (state === ConnectionState.Connected) {
+                this.connectionState.set('connected');
+            }
+            else if (state === ConnectionState.Connecting || state === ConnectionState.Reconnecting) {
+                this.connectionState.set('connecting');
+            }
+        });
+        room.on(RoomEvent.AudioPlaybackStatusChanged, () => {
+            if (this.room === room) {
+                this.audioPlaybackAllowed.set(room.canPlaybackAudio);
+            }
+        });
+        room.on(RoomEvent.TrackSubscribed, this.onTrackSubscribed);
+        room.on(RoomEvent.TrackUnsubscribed, this.onTrackUnsubscribed);
+        room.on(RoomEvent.ParticipantDisconnected, this.onParticipantDisconnected);
+        room.on(RoomEvent.TrackPublished, this.onTrackPublished);
+        try {
+            this.room = room;
+            this.ensureAudioContainer();
+            await room.connect(join.livekitUrl, join.clientToken);
+            // Publish mic only for takeover (listen stays receive-only).
+            if (join.mode === 'takeover') {
+                await this.enableMicrophone(true);
+            }
+            this.attachExistingRemoteTracks(room);
+            await this.startAudioPlayback();
+            this.connectionState.set('connected');
+        }
+        catch (err) {
+            const message = this.friendlyError(err);
+            this.error.set(message);
+            this.connectionState.set('error');
+            await this.cleanupLocal(true);
+            this.mode.set(null);
+            this.activeCallId.set(null);
+            throw new Error(message);
+        }
+    }
+    async setMicrophoneEnabled(enabled) {
+        if (!this.room || this.connectionState() !== 'connected')
+            return;
+        if (this.mode() !== 'takeover' && enabled) {
+            // Listen mode stays muted unless upgraded to takeover.
+            return;
+        }
+        await this.enableMicrophone(enabled);
+    }
+    async toggleMicrophone() {
+        await this.setMicrophoneEnabled(!this.micEnabled());
+    }
+    /** Retry blocked autoplay — must be called from a user gesture. */
+    async startAudioPlayback() {
+        const room = this.room;
+        if (!room)
+            return;
+        try {
+            await room.startAudio();
+            this.audioPlaybackAllowed.set(true);
+        }
+        catch {
+            this.audioPlaybackAllowed.set(room.canPlaybackAudio);
+        }
+        for (const elements of this.attached.values()) {
+            for (const el of elements) {
+                void el.play().catch(() => undefined);
+            }
+        }
+    }
+    async disconnect() {
+        if (!this.room && this.connectionState() === 'idle')
+            return;
+        this.connectionState.set('disconnecting');
+        await this.cleanupLocal(true);
+        this.connectionState.set('idle');
+        this.mode.set(null);
+        this.activeCallId.set(null);
+        this.micEnabled.set(false);
+        this.error.set(null);
+        this.audioPlaybackAllowed.set(true);
+    }
+    attachExistingRemoteTracks(room) {
+        for (const participant of room.remoteParticipants.values()) {
+            for (const publication of participant.trackPublications.values()) {
+                if (publication.track && publication.isSubscribed) {
+                    this.onTrackSubscribed(publication.track, publication, participant);
+                }
+            }
+        }
+    }
+    isStaff(identity) {
+        return !!identity && identity.startsWith(STAFF_IDENTITY_PREFIX);
+    }
+    detachKey(key, track) {
+        const elements = this.attached.get(key);
+        if (!elements)
+            return;
+        this.attached.delete(key);
+        for (const el of elements) {
+            try {
+                track?.detach(el);
+            }
+            catch {
+                /* already detached */
+            }
+            el.remove();
+        }
+        if (this.attached.size === 0)
+            this.remoteAudioAttached.set(false);
+    }
+    ensureAudioContainer() {
+        if (this.audioContainer?.isConnected)
+            return this.audioContainer;
+        const el = document.createElement('div');
+        el.dataset['edsStaffAudio'] = 'true';
+        el.style.position = 'fixed';
+        el.style.width = '0';
+        el.style.height = '0';
+        el.style.overflow = 'hidden';
+        document.body.appendChild(el);
+        this.audioContainer = el;
+        return el;
+    }
+    async enableMicrophone(enabled) {
+        const room = this.room;
+        if (!room)
+            return;
+        await room.localParticipant.setMicrophoneEnabled(enabled);
+        this.micEnabled.set(enabled);
+    }
+    friendlyError(err) {
+        const name = err?.name ?? '';
+        if (name === 'NotAllowedError' || name === 'SecurityError') {
+            return 'Microphone permission was denied. Allow microphone access and try again.';
+        }
+        if (name === 'NotFoundError' || name === 'OverconstrainedError') {
+            return 'No microphone was found on this device.';
+        }
+        if (name === 'NotReadableError' || name === 'TrackStartError') {
+            return 'Your microphone is in use by another app.';
+        }
+        const message = err instanceof Error ? err.message : '';
+        if (message.includes('getUserMedia')) {
+            return this.microphoneBlockedReason() ?? message;
+        }
+        return message || 'Failed to join the call audio.';
+    }
+    async cleanupLocal(disconnectRoom) {
+        const room = this.room;
+        this.room = null;
+        for (const key of [...this.attached.keys()]) {
+            this.detachKey(key);
+        }
+        this.remoteAudioAttached.set(false);
+        this.audioContainer?.remove();
+        this.audioContainer = null;
+        if (!room)
+            return;
+        try {
+            await room.localParticipant.setMicrophoneEnabled(false);
+        }
+        catch {
+            /* mic may never have been published */
+        }
+        try {
+            if (disconnectRoom) {
+                await room.disconnect(true);
+            }
+            room.removeAllListeners();
+        }
+        catch {
+            /* already gone */
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: StaffMediaService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: StaffMediaService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: StaffMediaService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class LiveMonitorPageComponent {
+    constructor() {
+        this.api = inject(AiReceptionistApiService);
+        this.route = inject(ActivatedRoute);
+        this.stream = inject(LiveTranscriptService);
+        this.staffMedia = inject(StaffMediaService);
+        this.socket = inject(DashboardSocketService);
+        this.toast = inject(ToastService);
+        this.destroyRef = inject(DestroyRef);
+        this.call = signal(null);
+        this.staffMessage = signal('');
+        this.loading = signal(true);
+        this.callId = signal('');
+        this.summary = signal(null);
+        this.summaryLoading = signal(false);
+        this.mediaBusy = signal(false);
+        this.listSkeletonRows = [0, 1, 2];
+        this.transcriptSkeletonRows = [0, 1, 2, 3, 4];
+        this.liveTools = this.stream.tools;
+        this.callEnded = this.stream.callEnded;
+        this.mediaState = this.staffMedia.connectionState;
+        this.mediaMode = this.staffMedia.mode;
+        this.micEnabled = this.staffMedia.micEnabled;
+        this.audioPlaybackAllowed = this.staffMedia.audioPlaybackAllowed;
+        this.summaryLoaded = false;
+        this.staffJoined = false;
+        this.onControlChanged = (evt) => {
+            if (!evt?.callId || evt.callId !== this.callId())
+                return;
+            this.call.update((c) => {
+                if (!c)
+                    return c;
+                const handedOff = evt.aiHandedOff === true || c.aiHandedOff === true;
+                const controlMode = evt.controlMode ?? c.controlMode;
+                const next = {
+                    ...c,
+                    controlMode,
+                    aiPaused: typeof evt.aiPaused === 'boolean' ? evt.aiPaused : c.aiPaused,
+                    aiHandedOff: handedOff,
+                    assigned: evt.assigned !== undefined ? evt.assigned : c.assigned,
+                };
+                if (controlMode === 'takeover' || handedOff) {
+                    next.status = 'takeover';
+                }
+                else if (controlMode === 'ai' || controlMode === 'listen') {
+                    if (c.status === 'takeover')
+                        next.status = 'ai';
+                }
+                return next;
+            });
+        };
+        this.toolTrackKey = toolEventTrackKey;
+        this.goalPlaceholderSteps = [
+            {
+                title: 'Understand the request',
+                label: 'Needs Clarification',
+                detail: 'Caller mentioned something from before but did not give enough detail to determine the reason for the call.',
+                tone: 'warning',
+            },
+            {
+                title: 'Verify patient identity',
+                label: 'In Progress',
+                detail: 'Confirm who the caller is so the AI can safely access relevant patient context.',
+                tone: 'primary',
+            },
+            {
+                title: 'Use patient context to clarify goal',
+                label: 'Next',
+                detail: 'Check recent appointments, referrals, orders, messages, or open items to understand the caller reference.',
+                tone: 'light',
+            },
+        ];
+        effect(() => {
+            if (this.stream.callEnded()) {
+                void this.staffMedia.disconnect();
+                this.staffJoined = false;
+                this.loadCallMetadataOnce();
+            }
+        });
+        effect(() => {
+            if (this.stream.summaryRequested() && !this.summaryLoaded) {
+                this.loadPostCallSummary();
+            }
+        });
+    }
+    ngOnInit() {
+        this.socket.acquire();
+        this.socket.on('call_control_changed', this.onControlChanged);
+        this.route.paramMap.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((params) => {
+            const id = params.get('id') ?? '';
+            this.callId.set(id);
+            // The softphone lives in a root service, so a session started earlier is still
+            // running when this page is re-created.
+            this.staffJoined = this.staffMedia.isConnectedTo(id);
+            this.loading.set(true);
+            this.summary.set(null);
+            this.summaryLoaded = false;
+            this.stream.stop();
+            this.loadCallMetadata();
+        });
+    }
+    /**
+     * Leaving the page must never drop the caller. The LiveKit session is owned by the
+     * root StaffMediaService and keeps running until End Call or an explicit leave.
+     */
+    ngOnDestroy() {
+        this.socket.off('call_control_changed', this.onControlChanged);
+        this.socket.release();
+        this.stream.stop();
+    }
+    /** True when this page's call is the one the softphone is connected to. */
+    isMediaForThisCall() {
+        return this.staffMedia.activeCallId() === this.callId();
+    }
+    isTakeover() {
+        if (this.mediaMode() === 'takeover' && this.isMediaForThisCall())
+            return true;
+        const c = this.call();
+        if (!c)
+            return false;
+        if (c.aiHandedOff)
+            return true;
+        if (c.controlMode === 'listen')
+            return false;
+        return c.controlMode === 'takeover' || c.status === 'takeover' || !!c.assigned;
+    }
+    /** After takeover the AI is gone for good — no resume path is offered. */
+    isHandedOff() {
+        return this.call()?.aiHandedOff === true || this.isTakeover();
+    }
+    isPaused() {
+        const c = this.call();
+        return c?.controlMode === 'paused' || !!c?.aiPaused;
+    }
+    isLive() {
+        return !!this.call() && !this.callEnded();
+    }
+    confidenceLevel(confidence) {
+        if (confidence >= 70)
+            return 'high';
+        if (confidence < 50)
+            return 'low';
+        return 'mid';
+    }
+    sentimentPercent(sentiment) {
+        const map = {
+            calm: 85,
+            neutral: 60,
+            frustrated: 35,
+            urgent: 15,
+        };
+        return map[sentiment];
+    }
+    toolStateClass(state) {
+        return `live-monitor-page__tool--${state}`;
+    }
+    isUnknownCaller(call) {
+        return isUnknownCaller(call.name, call.matched);
+    }
+    displayName(call) {
+        return this.isUnknownCaller(call) ? 'Unknown Caller' : call.name.trim();
+    }
+    profileInitials(call) {
+        return this.isUnknownCaller(call) ? '?' : call.initials || '?';
+    }
+    profileMeta(call) {
+        return callerMetaLine({
+            name: call.name,
+            matched: call.matched,
+            phone: call.phone,
+            dob: call.dob,
+            age: call.age ?? ageFromDob(call.dob),
+            gender: call.gender,
+        });
+    }
+    goalBadge(call) {
+        const raw = (call.goal || call.reason || '').trim();
+        if (!raw)
+            return null;
+        return raw.replace(/[_-]+/g, ' ').toUpperCase();
+    }
+    confidenceHint(confidence) {
+        const level = this.confidenceLevel(confidence);
+        if (level === 'low')
+            return 'Confidence dropped after the last response';
+        if (level === 'high')
+            return 'Agent is handling the request confidently';
+        return 'Agent is still clarifying the caller needs';
+    }
+    sentimentLabel(sentiment) {
+        return sentimentLabel(sentiment);
+    }
+    sentimentIcon(sentiment) {
+        return sentimentIconSrc(sentiment);
+    }
+    toolBadgeTone(state) {
+        switch (state) {
+            case 'ok':
+                return 'success';
+            case 'warn':
+                return 'warning';
+            case 'error':
+                return 'danger';
+            case 'active':
+                return 'primary';
+            default:
+                return 'light';
+        }
+    }
+    toolBadgeLabel(state) {
+        switch (state) {
+            case 'ok':
+                return 'Done';
+            case 'warn':
+                return 'Needs Clarification';
+            case 'error':
+                return 'Failed';
+            case 'active':
+                return 'In Progress';
+            default:
+                return 'Next';
+        }
+    }
+    takeover() {
+        void this.joinMedia('takeover');
+    }
+    toggleMic() {
+        void this.staffMedia.toggleMicrophone();
+    }
+    transfer() {
+        this.api.postTransfer(this.callId()).subscribe(() => this.refreshMetadata());
+    }
+    endCall() {
+        const id = this.callId();
+        void this.staffMedia.disconnect().then(() => {
+            this.staffJoined = false;
+            this.api.postEnd(id).subscribe(() => {
+                this.stream.markCompleted();
+                this.loadCallMetadataOnce();
+                this.loadPostCallSummary();
+            });
+        });
+    }
+    sendMessage() {
+        const text = this.staffMessage().trim();
+        if (!text)
+            return;
+        this.api.postMessage(this.callId(), text).subscribe(() => {
+            this.staffMessage.set('');
+            this.refreshMetadata();
+        });
+    }
+    enableSound() {
+        void this.staffMedia.startAudioPlayback();
+    }
+    async joinMedia(mode) {
+        if (this.mediaBusy() || this.callEnded())
+            return;
+        const id = this.callId();
+        if (!id)
+            return;
+        // Check the mic before joining so a blocked browser never leaves the AI paused.
+        if (mode === 'takeover' && !this.api.usesMockStreaming()) {
+            const blocked = this.staffMedia.microphoneBlockedReason();
+            if (blocked) {
+                this.toast.show(blocked, 'error', 6000);
+                return;
+            }
+        }
+        this.mediaBusy.set(true);
+        try {
+            const { data } = await firstValueFrom(this.api.postMediaJoin(id, mode));
+            this.applyJoinMetadata(data);
+            if (!this.api.usesMockStreaming()) {
+                await this.staffMedia.join(data);
+            }
+            this.staffJoined = true;
+            this.toast.show(mode === 'takeover' ? 'You are on the call' : 'Listening to the call', 'success');
+        }
+        catch (err) {
+            const message = err instanceof Error ? err.message : `Failed to ${mode === 'takeover' ? 'take over' : 'listen'}`;
+            this.toast.show(message, 'error');
+            try {
+                await this.staffMedia.disconnect();
+                await firstValueFrom(this.api.postMediaLeave(id));
+            }
+            catch {
+                /* ignore cleanup errors */
+            }
+            this.staffJoined = false;
+        }
+        finally {
+            this.mediaBusy.set(false);
+        }
+    }
+    /**
+     * Disconnect LiveKit first, then tell the server to drop staff and restore AI.
+     * Only valid in listen mode — a taken-over call stays with the human.
+     * Does not hang up the patient.
+     */
+    async leaveMedia(notifyServer) {
+        const id = this.callId();
+        const wasJoined = this.staffJoined || this.staffMedia.isConnectedTo(id);
+        try {
+            await this.staffMedia.disconnect();
+        }
+        catch {
+            /* ignore */
+        }
+        this.staffJoined = false;
+        if (!notifyServer || !wasJoined || !id || this.callEnded())
+            return;
+        this.mediaBusy.set(true);
+        try {
+            await firstValueFrom(this.api.postResumeAi(id));
+            this.call.update((c) => c
+                ? {
+                    ...c,
+                    status: c.status === 'takeover' ? 'ai' : c.status,
+                    controlMode: 'ai',
+                    assigned: null,
+                    aiPaused: false,
+                }
+                : c);
+        }
+        catch (err) {
+            const message = err instanceof Error ? err.message : 'Failed to resume AI';
+            this.toast.show(message, 'error');
+        }
+        finally {
+            this.mediaBusy.set(false);
+        }
+    }
+    applyJoinMetadata(data) {
+        this.call.update((c) => {
+            if (!c)
+                return c;
+            const controlMode = data.controlMode || data.mode;
+            return {
+                ...c,
+                controlMode,
+                aiPaused: typeof data.aiPaused === 'boolean' ? data.aiPaused : data.mode === 'takeover',
+                aiHandedOff: data.aiHandedOff === true || data.mode === 'takeover' || c.aiHandedOff === true,
+                assigned: data.assigned !== undefined && data.assigned !== null
+                    ? data.assigned
+                    : data.mode === 'takeover'
+                        ? c.assigned || 'You'
+                        : c.assigned,
+                status: data.mode === 'takeover' ? 'takeover' : c.status,
+            };
+        });
+    }
+    /** Initial load — seeds transcript/tools from REST, then starts socket. */
+    loadCallMetadata() {
+        const id = this.callId();
+        if (!id)
+            return;
+        this.api.getLiveCall(id).subscribe(({ data }) => {
+            this.call.set(data);
+            this.loading.set(false);
+            if (data) {
+                this.stream.seed(data.transcript, data.tools);
+                if (!this.callEnded()) {
+                    this.stream.watch(id, true);
+                }
+            }
+        });
+    }
+    /** Metadata-only refresh after staff actions — does not overwrite live transcript/tools. */
+    refreshMetadata() {
+        const id = this.callId();
+        if (!id)
+            return;
+        this.api.getLiveCall(id).subscribe(({ data }) => {
+            if (data)
+                this.call.set(data);
+        });
+    }
+    /** One-time metadata refresh after call ends (no socket). */
+    loadCallMetadataOnce() {
+        const id = this.callId();
+        if (!id)
+            return;
+        this.api.getLiveCall(id).subscribe(({ data }) => {
+            if (data) {
+                this.call.set(data);
+            }
+        });
+    }
+    loadPostCallSummary() {
+        const id = this.callId();
+        if (!id || this.summaryLoaded)
+            return;
+        this.summaryLoading.set(true);
+        this.api.getCallSummary(id).subscribe(({ data }) => {
+            this.summaryLoading.set(false);
+            this.summaryLoaded = true;
+            if (!data)
+                return;
+            this.summary.set(data.summary);
+            this.stream.seed(data.transcript, data.tools);
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: LiveMonitorPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: LiveMonitorPageComponent, isStandalone: true, selector: "eds-live-monitor-page", host: { classAttribute: "block h-full min-h-0" }, ngImport: i0, template: "<div class=\"live-monitor-page box-border flex h-full min-h-0 flex-col overflow-hidden bg-lighter p-base text-zinc-900\">\n  @if (loading()) {\n    <div class=\"flex min-h-0 flex-1 flex-col gap-4\" aria-busy=\"true\">\n      <header class=\"flex shrink-0 items-center justify-between gap-3 rounded-lg bg-white p-3\">\n        <div class=\"flex min-w-0 flex-1 items-center gap-4\">\n          <ed-skeleton class=\"h-5 w-5 !rounded-sm\"></ed-skeleton>\n          <div class=\"flex min-w-0 items-center gap-2\">\n            <ed-skeleton class=\"h-9 w-9 !rounded-md\"></ed-skeleton>\n            <div class=\"grid min-w-0 gap-2xs\">\n              <ed-skeleton class=\"h-4 w-40\"></ed-skeleton>\n              <ed-skeleton class=\"h-3 w-32\"></ed-skeleton>\n            </div>\n          </div>\n        </div>\n        <div class=\"flex shrink-0 items-center gap-3\">\n          <ed-skeleton class=\"h-8 w-24 !rounded-md\"></ed-skeleton>\n          <ed-skeleton class=\"h-8 w-28 !rounded-md\"></ed-skeleton>\n        </div>\n      </header>\n      <div class=\"grid min-h-0 flex-1 grid-cols-[minmax(0,1fr)_minmax(280px,447px)] items-stretch gap-4 max-[1100px]:grid-cols-1\">\n        <div class=\"flex min-h-0 flex-col rounded-xl bg-white p-4\">\n          <ed-skeleton class=\"mb-4 h-5 w-36\"></ed-skeleton>\n          @for (_ of transcriptSkeletonRows; track _) {\n            <div class=\"mb-4 flex flex-col gap-2\">\n              <ed-skeleton class=\"h-3 w-24\"></ed-skeleton>\n              <ed-skeleton class=\"h-16 w-full max-w-xl !rounded-lg\"></ed-skeleton>\n            </div>\n          }\n        </div>\n        <aside class=\"flex min-h-0 flex-col gap-4\">\n          <ed-skeleton class=\"h-40 w-full !rounded-lg\"></ed-skeleton>\n          <ed-skeleton class=\"min-h-48 w-full flex-1 !rounded-lg\"></ed-skeleton>\n          <ed-skeleton class=\"h-48 w-full !rounded-lg\"></ed-skeleton>\n        </aside>\n      </div>\n    </div>\n  } @else {\n    @if (call(); as c) {\n      <header class=\"live-monitor-page__header mb-4 flex shrink-0 flex-wrap items-center justify-between gap-3 rounded-lg bg-white p-3\">\n        <div class=\"flex min-w-0 flex-1 items-center gap-4\">\n          <a\n            routerLink=\"..\"\n            class=\"live-monitor-page__back inline-flex h-5 w-5 shrink-0 items-center justify-center text-zinc-600 no-underline\"\n            aria-label=\"Back to live calls\"\n          >\n            <ed-icon name=\"arrow_back\" [size]=\"14\" />\n          </a>\n\n          <div class=\"live-monitor-page__profile flex min-w-0 items-center gap-2\">\n            <ed-avatar\n              class=\"shrink-0\"\n              shape=\"box\"\n              size=\"md\"\n              [initials]=\"profileInitials(c)\"\n              [tone]=\"isUnknownCaller(c) ? 'gray' : 'warm'\"\n            />\n\n            <div class=\"min-w-0\">\n              <div class=\"flex flex-wrap items-center gap-3\">\n                <h4 class=\"m-0\">{{ displayName(c) }}</h4>\n                @if (isUnknownCaller(c)) {\n                  <ed-badge-2 variant=\"primary\" pill uppercase>Unknown</ed-badge-2>\n                } @else {\n                  @if (goalBadge(c); as badge) {\n                    <ed-badge-2 variant=\"primary\" pill uppercase>{{ badge }}</ed-badge-2>\n                  }\n                }\n              </div>\n              <p class=\"m-0 mt-0.5 text-zinc-500\">{{ c.phone || profileMeta(c) }}</p>\n            </div>\n          </div>\n        </div>\n\n        <div class=\"live-monitor-page__header-actions flex flex-wrap items-center gap-3\">\n          @if (!callEnded()) {\n            @if (mediaState() === 'connected' && isMediaForThisCall() && !audioPlaybackAllowed()) {\n              <ed-button variant=\"secondary\" outline size=\"sm\" (click$)=\"enableSound()\">\n                <ed-icon slot=\"prefix\" name=\"mic\" [size]=\"16\" />\n                Enable sound\n              </ed-button>\n            }\n            @if (isMediaForThisCall() && (mediaState() === 'connected' || mediaState() === 'connecting')) {\n              <span\n                class=\"live-monitor-page__media-pill inline-flex h-7 items-center rounded-full border border-zinc-200 bg-zinc-50 px-3 text-zinc-600\"\n                [attr.data-mode]=\"mediaMode() || 'idle'\"\n                [attr.data-state]=\"mediaState()\"\n              >\n                @if (mediaState() === 'connecting') {\n                  Connecting\u2026\n                } @else if (mediaMode() === 'takeover') {\n                  {{ micEnabled() ? 'On call \u00B7 mic on' : 'On call \u00B7 mic off' }}\n                } @else {\n                  Joined\n                }\n              </span>\n            }\n            <ed-button\n              variant=\"danger\"\n              outline\n              size=\"sm\"\n              [disabled]=\"mediaBusy()\"\n              (click$)=\"endCall()\"\n            >\n              <ed-icon slot=\"prefix\" name=\"call_end\" [size]=\"16\" />\n              End Call\n            </ed-button>\n            @if (isTakeover()) {\n              @if (mediaState() === 'connected' && isMediaForThisCall()) {\n                <ed-button variant=\"secondary\" outline size=\"sm\" (click$)=\"toggleMic()\">\n                  <ed-icon slot=\"prefix\" [name]=\"micEnabled() ? 'mic' : 'mic_off'\" [size]=\"16\" />\n                  {{ micEnabled() ? 'Mute' : 'Unmute' }}\n                </ed-button>\n              }\n            } @else {\n              <ed-button\n                variant=\"primary\"\n                fill\n                size=\"sm\"\n                [disabled]=\"mediaBusy()\"\n                (click$)=\"takeover()\"\n              >\n                <ed-icon slot=\"prefix\" name=\"phone_call\" [size]=\"16\" />\n                Take Over\n              </ed-button>\n            }\n          } @else {\n            <span class=\"inline-flex items-center gap-2 font-mono text-zinc-900\">\n              <span class=\"h-2 w-2 rounded-full bg-green-500 ring-4 ring-green-500/15\" aria-hidden=\"true\"></span>\n              {{ c.started | edsElapsed }}\n            </span>\n          }\n        </div>\n      </header>\n\n      @if (callEnded()) {\n        <div class=\"mb-4 flex items-center gap-2 rounded-lg bg-green-50 px-4 py-3 text-green-700\" role=\"status\">\n          <ed-icon name=\"check_circle\" [size]=\"18\" />\n          Call ended\n        </div>\n      }\n\n      <div\n        class=\"live-monitor-page__grid grid min-h-0 flex-1 grid-cols-[minmax(0,1fr)_minmax(280px,447px)] items-stretch gap-4 max-[1100px]:grid-cols-1 max-[1100px]:overflow-auto\"\n      >\n        <div class=\"live-monitor-page__main flex h-full min-h-0 flex-col gap-4 max-[1100px]:min-h-[420px]\">\n          <eds-live-transcript-panel\n            [live]=\"isLive()\"\n            [paused]=\"isPaused()\"\n            [humanTakeover]=\"isTakeover()\"\n            [showStaffInput]=\"false\"\n            [showCopilot]=\"isLive() && !isTakeover()\"\n            [callStarted]=\"c.started\"\n            [staffMessage]=\"staffMessage()\"\n            [callerName]=\"c.name\"\n            [callerMatched]=\"c.matched\"\n            (staffMessageChange)=\"staffMessage.set($event)\"\n            (sendMessage)=\"sendMessage()\"\n          />\n\n          @if (callEnded()) {\n            <section class=\"live-monitor-page__post-call flex flex-col gap-4\">\n              <div class=\"rounded-lg border border-zinc-200 bg-white p-4 text-zinc-600\">\n                <h4 class=\"mb-3 m-0\">Call summary</h4>\n                @if (summaryLoading()) {\n                  <div class=\"grid gap-2xs\" aria-busy=\"true\">\n                    <ed-skeleton class=\"h-3 w-full\"></ed-skeleton>\n                    <ed-skeleton class=\"h-3 w-5/6\"></ed-skeleton>\n                    <ed-skeleton class=\"h-3 w-3/4\"></ed-skeleton>\n                  </div>\n                } @else if (summary()) {\n                  <p class=\"m-0\">{{ summary() }}</p>\n                } @else {\n                  <p class=\"m-0 text-zinc-500\">Summary will appear when processing completes.</p>\n                }\n              </div>\n              <eds-call-recording-player [callId]=\"callId()\" />\n            </section>\n          }\n        </div>\n\n        <aside class=\"live-monitor-page__sidebar flex h-full min-h-0 flex-col gap-4 overflow-auto\">\n          @if (!callEnded()) {\n            <section class=\"flex flex-col gap-4 rounded-lg bg-white p-4\" aria-labelledby=\"live-call-state-title\">\n              <header class=\"flex items-center gap-3\">\n                <span class=\"inline-flex items-center justify-center rounded-md bg-fuchsia-500/10 p-1 text-fuchsia-600\">\n                  <ed-icon name=\"phone_call\" [size]=\"16\" />\n                </span>\n                <h4 id=\"live-call-state-title\" class=\"m-0\">Call State</h4>\n              </header>\n\n              <div class=\"flex flex-col gap-2\">\n                <div class=\"flex items-center justify-between gap-2 text-zinc-600\">\n                  <span class=\"live-monitor-page__eyebrow\">Agent confidence</span>\n                  <span class=\"live-monitor-page__eyebrow\">{{ c.confidence }}%</span>\n                </div>\n                <div class=\"live-monitor-page__confidence-track\">\n                  <span\n                    class=\"live-monitor-page__confidence-fill\"\n                    [style.width.%]=\"c.confidence\"\n                    [attr.data-level]=\"confidenceLevel(c.confidence)\"\n                  ></span>\n                </div>\n                <div class=\"flex items-center gap-2 text-zinc-600\">\n                  <ed-icon\n                    [name]=\"confidenceLevel(c.confidence) === 'low' ? 'trend_down' : 'info'\"\n                    [size]=\"16\"\n                  />\n                  <span>{{ confidenceHint(c.confidence) }}</span>\n                </div>\n              </div>\n\n              <div class=\"flex items-center justify-between gap-3\">\n                <span class=\"live-monitor-page__eyebrow\">Patient sentiment</span>\n                <span class=\"vr-sentiment\" [attr.data-sentiment]=\"c.sentiment\">\n                  <span class=\"vr-sentiment__icon\" aria-hidden=\"true\">\n                    <img [src]=\"sentimentIcon(c.sentiment)\" alt=\"\" width=\"16\" height=\"16\" />\n                  </span>\n                  <span>{{ sentimentLabel(c.sentiment) }}</span>\n                </span>\n              </div>\n            </section>\n          }\n\n          <section\n            class=\"live-monitor-page__sidebar-block flex min-h-0 flex-1 flex-col gap-4 rounded-lg bg-white p-4\"\n            aria-labelledby=\"live-goal-timeline-title\"\n          >\n            <header class=\"flex items-center gap-3\">\n              <span class=\"inline-flex items-center justify-center rounded-md bg-blue-500/10 p-1 text-blue-600\">\n                <ed-icon name=\"flag\" [size]=\"16\" />\n              </span>\n              <h4 id=\"live-goal-timeline-title\" class=\"m-0\">Goal Timeline</h4>\n            </header>\n\n            <div class=\"live-monitor-page__goal-panel flex min-h-0 flex-1 flex-col rounded-lg bg-zinc-50 p-2\">\n              @if (c.goal) {\n                <p class=\"live-monitor-page__eyebrow mb-3 m-0 text-zinc-900\">{{ c.goal }}</p>\n              } @else {\n                <p class=\"live-monitor-page__eyebrow mb-3 m-0 text-zinc-900\">No Goal identified yet</p>\n              }\n\n              <ul class=\"live-monitor-page__tools m-0 flex min-h-0 flex-1 list-none flex-col gap-4 overflow-auto p-0\">\n                @for (tool of liveTools(); track toolTrackKey(tool, $index)) {\n                  <li class=\"flex flex-col gap-1\" [class]=\"toolStateClass(tool.state)\">\n                    <div class=\"flex flex-wrap items-center gap-2\">\n                      <span class=\"text-zinc-900\">{{ tool.name }}</span>\n                      <ed-badge-2 [attr.variant]=\"toolBadgeTone(tool.state)\" pill uppercase>\n                        {{ toolBadgeLabel(tool.state) }}\n                      </ed-badge-2>\n                    </div>\n                    @if (tool.result) {\n                      <p class=\"m-0 text-zinc-500\">{{ tool.result }}</p>\n                    }\n                  </li>\n                } @empty {\n                  @for (step of goalPlaceholderSteps; track step.title) {\n                    <li class=\"flex flex-col gap-1\">\n                      <div class=\"flex flex-wrap items-center gap-2\">\n                        <span class=\"text-zinc-900\">{{ step.title }}</span>\n                        <ed-badge-2 [attr.variant]=\"step.tone\" pill uppercase>{{ step.label }}</ed-badge-2>\n                      </div>\n                      <p class=\"m-0 text-zinc-500\">{{ step.detail }}</p>\n                    </li>\n                  }\n                }\n              </ul>\n            </div>\n          </section>\n\n          <section class=\"flex flex-col gap-2.5 rounded-lg bg-white p-4\" aria-labelledby=\"live-patient-context-title\">\n            <header class=\"flex items-center justify-between gap-3\">\n              <div class=\"flex items-center gap-3\">\n                <span class=\"inline-flex items-center justify-center rounded-md bg-green-500/10 p-1 text-green-700\">\n                  <ed-icon name=\"person\" [size]=\"16\" />\n                </span>\n                <h4 id=\"live-patient-context-title\" class=\"m-0\">Patient Context</h4>\n              </div>\n              @if (isUnknownCaller(c) || !c.matched) {\n                <ed-badge-2 variant=\"primary\" pill uppercase>Asking details\u2026</ed-badge-2>\n              }\n            </header>\n\n            @if (isUnknownCaller(c) || !c.matched) {\n              <div\n                class=\"flex flex-1 flex-col justify-center gap-6 rounded-lg border border-dashed border-zinc-200 bg-zinc-50 p-4\"\n                aria-busy=\"true\"\n              >\n                <div class=\"flex flex-col gap-2\">\n                  <ed-skeleton class=\"h-3 w-full !rounded-full\"></ed-skeleton>\n                  <ed-skeleton class=\"h-3 w-3/4 !rounded-full\"></ed-skeleton>\n                </div>\n                <div class=\"flex flex-col gap-2\">\n                  <ed-skeleton class=\"h-3 w-full !rounded-full\"></ed-skeleton>\n                  <ed-skeleton class=\"h-3 w-3/4 !rounded-full\"></ed-skeleton>\n                </div>\n              </div>\n            } @else {\n              <div class=\"rounded-lg border border-zinc-200 bg-zinc-50 p-4\">\n                <p class=\"m-0 text-zinc-900\">{{ displayName(c) }}</p>\n                <p class=\"m-0 mt-1 text-zinc-500\">{{ profileMeta(c) }}</p>\n                @if (c.phone) {\n                  <p class=\"m-0 mt-1 text-zinc-500\">{{ c.phone }}</p>\n                }\n              </div>\n            }\n          </section>\n        </aside>\n      </div>\n    } @else {\n      <div class=\"flex flex-col items-start gap-3\">\n        <a\n          routerLink=\"..\"\n          class=\"live-monitor-page__back inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-md border border-zinc-200 bg-white text-zinc-600 no-underline\"\n          aria-label=\"Back to live calls\"\n        >\n          <ed-icon name=\"arrow_back\" [size]=\"19\" />\n        </a>\n        <p class=\"m-0 text-zinc-500\">Call ended or not found.</p>\n      </div>\n    }\n  }\n</div>\n", styles: [".vr-sentiment{display:inline-flex;align-items:center;justify-content:center;gap:4px;height:20px;padding:2px 4px;border-radius:6px;font-size:11px;font-weight:500;line-height:16px;white-space:nowrap}.vr-sentiment__icon{display:block;width:16px;height:16px;flex-shrink:0;overflow:hidden}.vr-sentiment__icon img{display:block;width:100%;height:100%;max-width:none}.vr-sentiment[data-sentiment=calm]{background:#3681f41a;color:#2162f0}.vr-sentiment[data-sentiment=neutral]{background:#f0f2f5;color:#41464c}.vr-sentiment[data-sentiment=urgent]{background:#f26b0d1a;color:#e94e0c}.vr-sentiment[data-sentiment=frustrated]{background:#f037401a;color:#db0c15}.live-monitor-page__eyebrow{font-size:10px;font-weight:600;letter-spacing:1px;line-height:1;text-transform:uppercase}.live-monitor-page__confidence-track{height:8px;overflow:hidden;border-radius:9999px;background:linear-gradient(90deg,#7d34fb1a,#e76b171a)}.live-monitor-page__confidence-fill{display:block;height:100%;border-radius:9999px;background:linear-gradient(90deg,#7d34fb,#e76b17)}.live-monitor-page__tools li{position:relative;padding-left:1.25rem}.live-monitor-page__tools li:before{content:\"\";position:absolute;top:.35rem;left:0;width:.5rem;height:.5rem;border-radius:9999px;background:#a2a4a6}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: EdAvatarComponent, selector: "ed-avatar", inputs: ["initials", "tone", "shape", "size", "gradient"] }, { kind: "component", type: IconComponent, selector: "ed-icon", inputs: ["name", "size", "color", "cssClass", "decorative", "ariaHidden", "ariaLabel", "title", "desc", "focusable", "tabIndex"] }, { kind: "component", type: EdButtonComponent, selector: "ed-button", inputs: ["variant", "size", "disabled", "ghost", "outline", "subtle", "fill", "loading", "block", "elevated", "shape", "type", "href", "routerLink", "rel", "target", "download", "ariaLabel"], outputs: ["click$"] }, { kind: "pipe", type: EdsElapsedPipe, name: "edsElapsed" }, { kind: "component", type: LiveTranscriptPanelComponent, selector: "eds-live-transcript-panel", inputs: ["live", "paused", "humanTakeover", "showStaffInput", "showCopilot", "callStarted", "staffMessage", "callerName", "callerMatched"], outputs: ["staffMessageChange", "sendMessage"] }, { kind: "component", type: CallRecordingPlayerComponent, selector: "eds-call-recording-player", inputs: ["callId"], outputs: ["currentTimeChange", "durationChange"] }, { kind: "component", type: EdSkeletonComponent, selector: "ed-skeleton", inputs: ["class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: LiveMonitorPageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'eds-live-monitor-page', imports: [
+                        RouterLink,
+                        FormsModule,
+                        EdAvatarComponent,
+                        IconComponent,
+                        EdButtonComponent,
+                        EdsElapsedPipe,
+                        LiveTranscriptPanelComponent,
+                        CallRecordingPlayerComponent,
+                        EdSkeletonComponent,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, schemas: [CUSTOM_ELEMENTS_SCHEMA], host: { class: 'block h-full min-h-0' }, template: "<div class=\"live-monitor-page box-border flex h-full min-h-0 flex-col overflow-hidden bg-lighter p-base text-zinc-900\">\n  @if (loading()) {\n    <div class=\"flex min-h-0 flex-1 flex-col gap-4\" aria-busy=\"true\">\n      <header class=\"flex shrink-0 items-center justify-between gap-3 rounded-lg bg-white p-3\">\n        <div class=\"flex min-w-0 flex-1 items-center gap-4\">\n          <ed-skeleton class=\"h-5 w-5 !rounded-sm\"></ed-skeleton>\n          <div class=\"flex min-w-0 items-center gap-2\">\n            <ed-skeleton class=\"h-9 w-9 !rounded-md\"></ed-skeleton>\n            <div class=\"grid min-w-0 gap-2xs\">\n              <ed-skeleton class=\"h-4 w-40\"></ed-skeleton>\n              <ed-skeleton class=\"h-3 w-32\"></ed-skeleton>\n            </div>\n          </div>\n        </div>\n        <div class=\"flex shrink-0 items-center gap-3\">\n          <ed-skeleton class=\"h-8 w-24 !rounded-md\"></ed-skeleton>\n          <ed-skeleton class=\"h-8 w-28 !rounded-md\"></ed-skeleton>\n        </div>\n      </header>\n      <div class=\"grid min-h-0 flex-1 grid-cols-[minmax(0,1fr)_minmax(280px,447px)] items-stretch gap-4 max-[1100px]:grid-cols-1\">\n        <div class=\"flex min-h-0 flex-col rounded-xl bg-white p-4\">\n          <ed-skeleton class=\"mb-4 h-5 w-36\"></ed-skeleton>\n          @for (_ of transcriptSkeletonRows; track _) {\n            <div class=\"mb-4 flex flex-col gap-2\">\n              <ed-skeleton class=\"h-3 w-24\"></ed-skeleton>\n              <ed-skeleton class=\"h-16 w-full max-w-xl !rounded-lg\"></ed-skeleton>\n            </div>\n          }\n        </div>\n        <aside class=\"flex min-h-0 flex-col gap-4\">\n          <ed-skeleton class=\"h-40 w-full !rounded-lg\"></ed-skeleton>\n          <ed-skeleton class=\"min-h-48 w-full flex-1 !rounded-lg\"></ed-skeleton>\n          <ed-skeleton class=\"h-48 w-full !rounded-lg\"></ed-skeleton>\n        </aside>\n      </div>\n    </div>\n  } @else {\n    @if (call(); as c) {\n      <header class=\"live-monitor-page__header mb-4 flex shrink-0 flex-wrap items-center justify-between gap-3 rounded-lg bg-white p-3\">\n        <div class=\"flex min-w-0 flex-1 items-center gap-4\">\n          <a\n            routerLink=\"..\"\n            class=\"live-monitor-page__back inline-flex h-5 w-5 shrink-0 items-center justify-center text-zinc-600 no-underline\"\n            aria-label=\"Back to live calls\"\n          >\n            <ed-icon name=\"arrow_back\" [size]=\"14\" />\n          </a>\n\n          <div class=\"live-monitor-page__profile flex min-w-0 items-center gap-2\">\n            <ed-avatar\n              class=\"shrink-0\"\n              shape=\"box\"\n              size=\"md\"\n              [initials]=\"profileInitials(c)\"\n              [tone]=\"isUnknownCaller(c) ? 'gray' : 'warm'\"\n            />\n\n            <div class=\"min-w-0\">\n              <div class=\"flex flex-wrap items-center gap-3\">\n                <h4 class=\"m-0\">{{ displayName(c) }}</h4>\n                @if (isUnknownCaller(c)) {\n                  <ed-badge-2 variant=\"primary\" pill uppercase>Unknown</ed-badge-2>\n                } @else {\n                  @if (goalBadge(c); as badge) {\n                    <ed-badge-2 variant=\"primary\" pill uppercase>{{ badge }}</ed-badge-2>\n                  }\n                }\n              </div>\n              <p class=\"m-0 mt-0.5 text-zinc-500\">{{ c.phone || profileMeta(c) }}</p>\n            </div>\n          </div>\n        </div>\n\n        <div class=\"live-monitor-page__header-actions flex flex-wrap items-center gap-3\">\n          @if (!callEnded()) {\n            @if (mediaState() === 'connected' && isMediaForThisCall() && !audioPlaybackAllowed()) {\n              <ed-button variant=\"secondary\" outline size=\"sm\" (click$)=\"enableSound()\">\n                <ed-icon slot=\"prefix\" name=\"mic\" [size]=\"16\" />\n                Enable sound\n              </ed-button>\n            }\n            @if (isMediaForThisCall() && (mediaState() === 'connected' || mediaState() === 'connecting')) {\n              <span\n                class=\"live-monitor-page__media-pill inline-flex h-7 items-center rounded-full border border-zinc-200 bg-zinc-50 px-3 text-zinc-600\"\n                [attr.data-mode]=\"mediaMode() || 'idle'\"\n                [attr.data-state]=\"mediaState()\"\n              >\n                @if (mediaState() === 'connecting') {\n                  Connecting\u2026\n                } @else if (mediaMode() === 'takeover') {\n                  {{ micEnabled() ? 'On call \u00B7 mic on' : 'On call \u00B7 mic off' }}\n                } @else {\n                  Joined\n                }\n              </span>\n            }\n            <ed-button\n              variant=\"danger\"\n              outline\n              size=\"sm\"\n              [disabled]=\"mediaBusy()\"\n              (click$)=\"endCall()\"\n            >\n              <ed-icon slot=\"prefix\" name=\"call_end\" [size]=\"16\" />\n              End Call\n            </ed-button>\n            @if (isTakeover()) {\n              @if (mediaState() === 'connected' && isMediaForThisCall()) {\n                <ed-button variant=\"secondary\" outline size=\"sm\" (click$)=\"toggleMic()\">\n                  <ed-icon slot=\"prefix\" [name]=\"micEnabled() ? 'mic' : 'mic_off'\" [size]=\"16\" />\n                  {{ micEnabled() ? 'Mute' : 'Unmute' }}\n                </ed-button>\n              }\n            } @else {\n              <ed-button\n                variant=\"primary\"\n                fill\n                size=\"sm\"\n                [disabled]=\"mediaBusy()\"\n                (click$)=\"takeover()\"\n              >\n                <ed-icon slot=\"prefix\" name=\"phone_call\" [size]=\"16\" />\n                Take Over\n              </ed-button>\n            }\n          } @else {\n            <span class=\"inline-flex items-center gap-2 font-mono text-zinc-900\">\n              <span class=\"h-2 w-2 rounded-full bg-green-500 ring-4 ring-green-500/15\" aria-hidden=\"true\"></span>\n              {{ c.started | edsElapsed }}\n            </span>\n          }\n        </div>\n      </header>\n\n      @if (callEnded()) {\n        <div class=\"mb-4 flex items-center gap-2 rounded-lg bg-green-50 px-4 py-3 text-green-700\" role=\"status\">\n          <ed-icon name=\"check_circle\" [size]=\"18\" />\n          Call ended\n        </div>\n      }\n\n      <div\n        class=\"live-monitor-page__grid grid min-h-0 flex-1 grid-cols-[minmax(0,1fr)_minmax(280px,447px)] items-stretch gap-4 max-[1100px]:grid-cols-1 max-[1100px]:overflow-auto\"\n      >\n        <div class=\"live-monitor-page__main flex h-full min-h-0 flex-col gap-4 max-[1100px]:min-h-[420px]\">\n          <eds-live-transcript-panel\n            [live]=\"isLive()\"\n            [paused]=\"isPaused()\"\n            [humanTakeover]=\"isTakeover()\"\n            [showStaffInput]=\"false\"\n            [showCopilot]=\"isLive() && !isTakeover()\"\n            [callStarted]=\"c.started\"\n            [staffMessage]=\"staffMessage()\"\n            [callerName]=\"c.name\"\n            [callerMatched]=\"c.matched\"\n            (staffMessageChange)=\"staffMessage.set($event)\"\n            (sendMessage)=\"sendMessage()\"\n          />\n\n          @if (callEnded()) {\n            <section class=\"live-monitor-page__post-call flex flex-col gap-4\">\n              <div class=\"rounded-lg border border-zinc-200 bg-white p-4 text-zinc-600\">\n                <h4 class=\"mb-3 m-0\">Call summary</h4>\n                @if (summaryLoading()) {\n                  <div class=\"grid gap-2xs\" aria-busy=\"true\">\n                    <ed-skeleton class=\"h-3 w-full\"></ed-skeleton>\n                    <ed-skeleton class=\"h-3 w-5/6\"></ed-skeleton>\n                    <ed-skeleton class=\"h-3 w-3/4\"></ed-skeleton>\n                  </div>\n                } @else if (summary()) {\n                  <p class=\"m-0\">{{ summary() }}</p>\n                } @else {\n                  <p class=\"m-0 text-zinc-500\">Summary will appear when processing completes.</p>\n                }\n              </div>\n              <eds-call-recording-player [callId]=\"callId()\" />\n            </section>\n          }\n        </div>\n\n        <aside class=\"live-monitor-page__sidebar flex h-full min-h-0 flex-col gap-4 overflow-auto\">\n          @if (!callEnded()) {\n            <section class=\"flex flex-col gap-4 rounded-lg bg-white p-4\" aria-labelledby=\"live-call-state-title\">\n              <header class=\"flex items-center gap-3\">\n                <span class=\"inline-flex items-center justify-center rounded-md bg-fuchsia-500/10 p-1 text-fuchsia-600\">\n                  <ed-icon name=\"phone_call\" [size]=\"16\" />\n                </span>\n                <h4 id=\"live-call-state-title\" class=\"m-0\">Call State</h4>\n              </header>\n\n              <div class=\"flex flex-col gap-2\">\n                <div class=\"flex items-center justify-between gap-2 text-zinc-600\">\n                  <span class=\"live-monitor-page__eyebrow\">Agent confidence</span>\n                  <span class=\"live-monitor-page__eyebrow\">{{ c.confidence }}%</span>\n                </div>\n                <div class=\"live-monitor-page__confidence-track\">\n                  <span\n                    class=\"live-monitor-page__confidence-fill\"\n                    [style.width.%]=\"c.confidence\"\n                    [attr.data-level]=\"confidenceLevel(c.confidence)\"\n                  ></span>\n                </div>\n                <div class=\"flex items-center gap-2 text-zinc-600\">\n                  <ed-icon\n                    [name]=\"confidenceLevel(c.confidence) === 'low' ? 'trend_down' : 'info'\"\n                    [size]=\"16\"\n                  />\n                  <span>{{ confidenceHint(c.confidence) }}</span>\n                </div>\n              </div>\n\n              <div class=\"flex items-center justify-between gap-3\">\n                <span class=\"live-monitor-page__eyebrow\">Patient sentiment</span>\n                <span class=\"vr-sentiment\" [attr.data-sentiment]=\"c.sentiment\">\n                  <span class=\"vr-sentiment__icon\" aria-hidden=\"true\">\n                    <img [src]=\"sentimentIcon(c.sentiment)\" alt=\"\" width=\"16\" height=\"16\" />\n                  </span>\n                  <span>{{ sentimentLabel(c.sentiment) }}</span>\n                </span>\n              </div>\n            </section>\n          }\n\n          <section\n            class=\"live-monitor-page__sidebar-block flex min-h-0 flex-1 flex-col gap-4 rounded-lg bg-white p-4\"\n            aria-labelledby=\"live-goal-timeline-title\"\n          >\n            <header class=\"flex items-center gap-3\">\n              <span class=\"inline-flex items-center justify-center rounded-md bg-blue-500/10 p-1 text-blue-600\">\n                <ed-icon name=\"flag\" [size]=\"16\" />\n              </span>\n              <h4 id=\"live-goal-timeline-title\" class=\"m-0\">Goal Timeline</h4>\n            </header>\n\n            <div class=\"live-monitor-page__goal-panel flex min-h-0 flex-1 flex-col rounded-lg bg-zinc-50 p-2\">\n              @if (c.goal) {\n                <p class=\"live-monitor-page__eyebrow mb-3 m-0 text-zinc-900\">{{ c.goal }}</p>\n              } @else {\n                <p class=\"live-monitor-page__eyebrow mb-3 m-0 text-zinc-900\">No Goal identified yet</p>\n              }\n\n              <ul class=\"live-monitor-page__tools m-0 flex min-h-0 flex-1 list-none flex-col gap-4 overflow-auto p-0\">\n                @for (tool of liveTools(); track toolTrackKey(tool, $index)) {\n                  <li class=\"flex flex-col gap-1\" [class]=\"toolStateClass(tool.state)\">\n                    <div class=\"flex flex-wrap items-center gap-2\">\n                      <span class=\"text-zinc-900\">{{ tool.name }}</span>\n                      <ed-badge-2 [attr.variant]=\"toolBadgeTone(tool.state)\" pill uppercase>\n                        {{ toolBadgeLabel(tool.state) }}\n                      </ed-badge-2>\n                    </div>\n                    @if (tool.result) {\n                      <p class=\"m-0 text-zinc-500\">{{ tool.result }}</p>\n                    }\n                  </li>\n                } @empty {\n                  @for (step of goalPlaceholderSteps; track step.title) {\n                    <li class=\"flex flex-col gap-1\">\n                      <div class=\"flex flex-wrap items-center gap-2\">\n                        <span class=\"text-zinc-900\">{{ step.title }}</span>\n                        <ed-badge-2 [attr.variant]=\"step.tone\" pill uppercase>{{ step.label }}</ed-badge-2>\n                      </div>\n                      <p class=\"m-0 text-zinc-500\">{{ step.detail }}</p>\n                    </li>\n                  }\n                }\n              </ul>\n            </div>\n          </section>\n\n          <section class=\"flex flex-col gap-2.5 rounded-lg bg-white p-4\" aria-labelledby=\"live-patient-context-title\">\n            <header class=\"flex items-center justify-between gap-3\">\n              <div class=\"flex items-center gap-3\">\n                <span class=\"inline-flex items-center justify-center rounded-md bg-green-500/10 p-1 text-green-700\">\n                  <ed-icon name=\"person\" [size]=\"16\" />\n                </span>\n                <h4 id=\"live-patient-context-title\" class=\"m-0\">Patient Context</h4>\n              </div>\n              @if (isUnknownCaller(c) || !c.matched) {\n                <ed-badge-2 variant=\"primary\" pill uppercase>Asking details\u2026</ed-badge-2>\n              }\n            </header>\n\n            @if (isUnknownCaller(c) || !c.matched) {\n              <div\n                class=\"flex flex-1 flex-col justify-center gap-6 rounded-lg border border-dashed border-zinc-200 bg-zinc-50 p-4\"\n                aria-busy=\"true\"\n              >\n                <div class=\"flex flex-col gap-2\">\n                  <ed-skeleton class=\"h-3 w-full !rounded-full\"></ed-skeleton>\n                  <ed-skeleton class=\"h-3 w-3/4 !rounded-full\"></ed-skeleton>\n                </div>\n                <div class=\"flex flex-col gap-2\">\n                  <ed-skeleton class=\"h-3 w-full !rounded-full\"></ed-skeleton>\n                  <ed-skeleton class=\"h-3 w-3/4 !rounded-full\"></ed-skeleton>\n                </div>\n              </div>\n            } @else {\n              <div class=\"rounded-lg border border-zinc-200 bg-zinc-50 p-4\">\n                <p class=\"m-0 text-zinc-900\">{{ displayName(c) }}</p>\n                <p class=\"m-0 mt-1 text-zinc-500\">{{ profileMeta(c) }}</p>\n                @if (c.phone) {\n                  <p class=\"m-0 mt-1 text-zinc-500\">{{ c.phone }}</p>\n                }\n              </div>\n            }\n          </section>\n        </aside>\n      </div>\n    } @else {\n      <div class=\"flex flex-col items-start gap-3\">\n        <a\n          routerLink=\"..\"\n          class=\"live-monitor-page__back inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-md border border-zinc-200 bg-white text-zinc-600 no-underline\"\n          aria-label=\"Back to live calls\"\n        >\n          <ed-icon name=\"arrow_back\" [size]=\"19\" />\n        </a>\n        <p class=\"m-0 text-zinc-500\">Call ended or not found.</p>\n      </div>\n    }\n  }\n</div>\n", styles: [".vr-sentiment{display:inline-flex;align-items:center;justify-content:center;gap:4px;height:20px;padding:2px 4px;border-radius:6px;font-size:11px;font-weight:500;line-height:16px;white-space:nowrap}.vr-sentiment__icon{display:block;width:16px;height:16px;flex-shrink:0;overflow:hidden}.vr-sentiment__icon img{display:block;width:100%;height:100%;max-width:none}.vr-sentiment[data-sentiment=calm]{background:#3681f41a;color:#2162f0}.vr-sentiment[data-sentiment=neutral]{background:#f0f2f5;color:#41464c}.vr-sentiment[data-sentiment=urgent]{background:#f26b0d1a;color:#e94e0c}.vr-sentiment[data-sentiment=frustrated]{background:#f037401a;color:#db0c15}.live-monitor-page__eyebrow{font-size:10px;font-weight:600;letter-spacing:1px;line-height:1;text-transform:uppercase}.live-monitor-page__confidence-track{height:8px;overflow:hidden;border-radius:9999px;background:linear-gradient(90deg,#7d34fb1a,#e76b171a)}.live-monitor-page__confidence-fill{display:block;height:100%;border-radius:9999px;background:linear-gradient(90deg,#7d34fb,#e76b17)}.live-monitor-page__tools li{position:relative;padding-left:1.25rem}.live-monitor-page__tools li:before{content:\"\";position:absolute;top:.35rem;left:0;width:.5rem;height:.5rem;border-radius:9999px;background:#a2a4a6}\n"] }]
+        }], ctorParameters: () => [] });
+
+export { LiveMonitorPageComponent };
+//# sourceMappingURL=edvak99-voice-receptionist-widget-live-monitor-page.component-CqOu-iLw.mjs.map