curl -N "https://api.orbit.devotel.io/api/v1/voice/supervisor/calls/call_123/analytics/stream" \
  -H "X-API-Key: dv_live_sk_your_key_here"

id: 1
event: connected
data: {"callId":"call_123","status":"ringing"}

id: 2
event: status
data: {"status":"ringing","terminal":false}

id: 7
event: analytics
data: {"kind":"keyword","ts":1752580812000,"phrase":"cancel my contract","speaker":"customer","occurrences":2,"snippet":"…honestly I'd rather just cancel my contract at this point…"}

id: 8
event: analytics
data: {"kind":"metrics","ts":1752580812000,"metrics":{"talk_ms":{"agent":41200,"customer":26800,"other":0},"talk_listen_ratio":1.54,"agent_talk_pct":0.61,"final_turns":14,"silence_total_ms":9400,"silence_events":2,"longest_silence_ms":5200,"interruptions":{"agent":1,"customer":2,"total":3}}}

<flag-wall call-id="call_123"></flag-wall>

<script type="module">
  // Your quality categories, as configured in the workspace. The stream
  // reports the matched phrase; you map it back to a category client-side.
  const categories = [
    { name: "Churn risk", keywords: ["cancel my contract", "switch provider", "too expensive"] },
    { name: "Compliance", keywords: ["record this call", "speak to a lawyer"] },
  ];
  const categoryOf = (phrase) =>
    categories.find((c) => c.keywords.includes(phrase))?.name ?? "Other";

  class FlagWall extends HTMLElement {
    connectedCallback() {
      const callId = this.getAttribute("call-id");
      const url = `/api/v1/voice/supervisor/calls/${callId}/analytics/stream`;
      this.source = new EventSource(url, { withCredentials: true });
      this.filter = "All";
      this.render(`Waiting for the first settled utterance…`, "muted");

      this.source.addEventListener("status", (e) => {
        const { status, terminal } = JSON.parse(e.data);
        if (terminal) this.render(`Call already ${status} — use post-call quality evaluation.`, "muted");
      });

      this.source.addEventListener("analytics", (e) => {
        const event = JSON.parse(e.data);
        if (event.kind === "keyword") {
          const category = categoryOf(event.phrase);
          if (this.filter !== "All" && category !== this.filter) return;
          this.render(`${category} · "${event.phrase}" ×${event.occurrences} (${event.speaker}): ${event.snippet}`, "flag");
        }
        if (event.kind === "metrics") {
          const m = event.metrics;
          this.render(
            `talk/listen ${m.talk_listen_ratio ?? "–"} · dead air ${Math.round(m.silence_total_ms / 1000)}s over ${m.silence_events} gaps · interruptions ${m.interruptions.total}`,
            "metric",
          );
        }
        if (event.kind === "emotion" && event.stress_score >= 0.7) {
          this.render(`caller stress ${event.label} (${event.stress_score.toFixed(2)})`, "alert");
        }
        if (event.kind === "clone-risk" && event.risk_level === "high") {
          this.render(`synthetic-voice risk ${event.risk_score.toFixed(2)} — ${event.recommended_action}`, "alert");
        }
      });

      // Sessions close themselves after 30 minutes ("max-duration").
      this.source.addEventListener("end", () => this.source.close());
    }
    disconnectedCallback() {
      this.source?.close();
    }
    render(text, tone) {
      const chip = document.createElement("div");
      chip.className = `chip ${tone}`;
      chip.textContent = text;
      this.prepend(chip);
    }
  }
  customElements.define("flag-wall", FlagWall);
</script>