In the browser

{ "v": 1, "type": "hello" }

{
  "v": 1,
  "type": "history",
  "callId": "0195f1e2-3333-7000-8000-000000000000",
  "control": "agent",
  "messages": [
    { "role": "user", "text": "Hi, I need to move my appointment.", "at": 1770000000000 },
    { "role": "assistant", "text": "Of course. What day suits you?", "at": 1770000002500 }
  ]
}

{
  "v": 1,
  "type": "control",
  "callId": "0195f1e2-3333-7000-8000-000000000000",
  "control": "human",
  "at": 1770000045000
}

import { connectMonitor } from "@oncore/live-call-sdk";

const connection = await connectMonitor({
  url: session.url,
  token: session.token,
  agentIdentity: session.agentIdentity,
});

import type { TranscriptMessage, TranscriptSegment } from "@oncore/live-call-sdk";

export type Line = { key: string; role: string; text: string; at: number; final: boolean };

export function fromHistory(messages: TranscriptMessage[]): Line[] {
  return messages.map((message, index) => ({
    key: `history-${index}-${message.at}`,
    role: message.role,
    text: message.text,
    at: message.at,
    final: true,
  }));
}

export function mergeHistory(lines: Line[], messages: TranscriptMessage[]): Line[] {
  // The replay can land after the first streamed segment, so it must not
  // replace what is already on screen. Keep the streamed lines, drop any
  // replayed line that duplicates one, and put the rest in front.
  const streamed = lines.filter((line) => !line.key.startsWith("history-"));
  const replayed = fromHistory(messages).filter(
    (line) =>
      !streamed.some(
        (segment) => segment.final && segment.role === line.role && segment.text === line.text,
      ),
  );
  return [...replayed, ...streamed];
}

export function applySegment(lines: Line[], segment: TranscriptSegment): Line[] {
  const next: Line = {
    key: segment.id,
    role: segment.role,
    text: segment.text,
    at: segment.receivedAt,
    final: segment.isFinal,
  };

  // A final segment can repeat the tail of the replay. Drop the replayed
  // copy and keep the streamed one, which carries a stable id.
  const deduped = segment.isFinal
    ? lines.filter(
        (line) =>
          !(line.key.startsWith("history-") && line.role === next.role && line.text === next.text),
      )
    : lines;

  const existing = deduped.findIndex((line) => line.key === next.key);
  if (existing === -1) return [...deduped, next];

  // An interim segment is replaced in place as the words firm up.
  const merged = [...deduped];
  merged[existing] = next;
  return merged;
}

export const dynamic = "force-dynamic";

import { oncore } from "@/lib/oncore";
import { getSession } from "@/lib/auth";

export async function POST(
  _request: Request,
  { params }: { params: Promise<{ id: string }> },
) {
  const { id } = await params;
  const user = await getSession();

  // OnCore cannot make this decision for you. If this check is missing,
  // every signed-in user can listen to every live call in the tenant.
  if (!user || !user.permissions.includes("calls:monitor")) {
    return Response.json({ error: "forbidden" }, { status: 403 });
  }

  const upstream = await oncore(user.tenantId, `/calls/${id}/monitor-session`, {
    method: "POST",
    body: JSON.stringify({ actorLabel: user.email }),
  });

  const body = await upstream.json();
  if (!upstream.ok) return Response.json(body, { status: upstream.status });

  // Pass the join material through untouched. The browser needs url, token,
  // agentIdentity for the SDK, and monitorIdentity for the control calls.
  return Response.json(body, { headers: { "Cache-Control": "no-store" } });
}

const BASE_URL = "https://core-api.heysadie.ai";

export function oncore(tenantId: string, path: string, init: RequestInit = {}) {
  const apiKey = process.env.ONCORE_API_KEY;
  if (!apiKey) throw new Error("ONCORE_API_KEY is not configured");

  const headers = new Headers(init.headers);
  headers.set("Authorization", `ApiKey ${apiKey}`);
  headers.set("Content-Type", "application/json");
  // Organization keys select the customer this way. A tenant key already
  // carries its tenant, so pass an empty string and send no header.
  if (tenantId) headers.set("X-Tenant-Id", tenantId);

  return fetch(`${BASE_URL}${path}`, { ...init, headers, cache: "no-store" });
}

"use client";

import { useEffect, useRef, useState } from "react";
import { connectMonitor, MonitorError } from "@oncore/live-call-sdk";
import type { ConversationControlState, MonitorConnection } from "@oncore/live-call-sdk";
import { applySegment, fromHistory, mergeHistory, type Line } from "@/lib/transcript";

const CONFLICTS: Record<string, string> = {
  not_live: "This call has already ended.",
  agent_absent: "The assistant is reconnecting. Try again in a moment.",
  not_monitorable: "This call cannot be monitored.",
  monitor_cap_reached: "Too many people are already listening to this call.",
  session_closed: "This session was closed. Open the call again to get a new one.",
  held_by_other_monitor: "A colleague is already speaking on this call.",
};

// Close the monitor session when the panel goes away. keepalive lets the
// request outlive the page; navigator.sendBeacon cannot send a DELETE.
function closeSession(id: string, monitorIdentity: string | null) {
  if (!monitorIdentity) return;
  const query = new URLSearchParams({ monitorIdentity });
  void fetch(`/api/live-calls/${id}/session?${query}`, {
    method: "DELETE",
    keepalive: true,
  }).catch(() => {});
}

export function MonitorPanel({ id }: { id: string }) {
  const connectionRef = useRef<MonitorConnection | null>(null);
  const audioRef = useRef<HTMLAudioElement>(null);
  const identityRef = useRef<string | null>(null);
  const [control, setControl] = useState<ConversationControlState>("unknown");
  const [lines, setLines] = useState<Line[]>([]);
  const [micOn, setMicOn] = useState(false);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    let cancelled = false;
    const cleanups: Array<() => void> = [];

    // Unmount is not the only way a panel goes away. pagehide covers the tab
    // closing, which React never gets to hear about.
    const onPageHide = () => closeSession(id, identityRef.current);
    window.addEventListener("pagehide", onPageHide);

    async function open() {
      const response = await fetch(`/api/live-calls/${id}/session`, { method: "POST" });
      const body = await response.json();
      if (!response.ok) throw new Error(CONFLICTS[body.reason] ?? "Could not open this call.");
      if (cancelled) return;

      const connection = await connectMonitor({
        url: body.url,
        token: body.token,
        agentIdentity: body.agentIdentity,
      });
      if (cancelled) {
        await connection.disconnect();
        return;
      }

      connectionRef.current = connection;
      identityRef.current = body.monitorIdentity;
      setControl(connection.control);
      setLines(fromHistory(connection.history));

      cleanups.push(
        connection.on("history", (messages) =>
          setLines((current) => mergeHistory(current, messages)),
        ),
      );
      cleanups.push(
        connection.on("transcript", (segment) =>
          setLines((current) => applySegment(current, segment)),
        ),
      );
      cleanups.push(connection.on("control", setControl));
      cleanups.push(
        connection.on("disconnected", (reason) => {
          setMicOn(false);
          setError(reason ?? "The call ended.");
        }),
      );
      if (audioRef.current) cleanups.push(connection.attachAudio(audioRef.current));
    }

    open().catch((cause: unknown) => {
      setError(cause instanceof Error ? cause.message : "Could not open this call.");
    });

    return () => {
      cancelled = true;
      window.removeEventListener("pagehide", onPageHide);
      for (const cleanup of cleanups) cleanup();
      void connectionRef.current?.disconnect();
      connectionRef.current = null;
      closeSession(id, identityRef.current);
    };
  }, [id]);

  async function send(
    action: "takeover" | "end",
    extra: Record<string, string> = {},
    attempt = 0,
  ): Promise<boolean> {
    const monitorIdentity = identityRef.current;
    if (!monitorIdentity) return false;

    const response = await fetch(`/api/live-calls/${id}/${action}`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ monitorIdentity, ...extra }),
    });

    if (response.ok) return true;
    const body = await response.json().catch(() => ({}));

    // agent_absent is transient: the assistant is reconnecting and the call is
    // still live. not_live is final and must never be retried.
    if (body.reason === "agent_absent" && attempt < 2) {
      await new Promise((resolve) => setTimeout(resolve, 750));
      return send(action, extra, attempt + 1);
    }

    setError(CONFLICTS[body.reason] ?? `Could not ${action} this call.`);
    return false;
  }

  async function takeOver() {
    // Order matters. The token denies publishing until takeover has returned.
    if (!(await send("takeover"))) return;
    try {
      // Once only. The SDK already retries the permission race internally.
      await connectionRef.current?.setMicrophoneEnabled(true);
      setMicOn(true);
    } catch (cause) {
      if (cause instanceof MonitorError && cause.code === "mic_denied") {
        setError("Your browser blocked the microphone. Allow it, then take over again.");
      } else {
        // mic_requires_takeover reaching here means the takeover never landed.
        // That is a bug in this component, not something the person can fix.
        console.error("Opened the microphone before takeover completed", cause);
        setError("Could not open your microphone.");
      }
    }
  }

  // There is no "hand back" call to make. Releasing the microphone and
  // disconnecting is what returns the call: the assistant resumes on its own a
  // few seconds after the supervisor leaves the room. Watch the `control`
  // event for it rather than assuming the moment you disconnect.
  async function stopSpeaking() {
    await connectionRef.current?.setMicrophoneEnabled(false);
    setMicOn(false);
  }

  const holding = control === "human" || control === "bridging";

  return (
    <div>
      <p aria-live="polite">
        {control === "bridging"
          ? "Handing the call to you"
          : holding
            ? "You are speaking to the caller"
            : `Assistant is handling the call (${control})`}
      </p>

      <ol>
        {lines.map((line) => (
          <li key={line.key} data-role={line.role} data-interim={!line.final}>
            <b>{line.role}</b> {line.text}
          </li>
        ))}
      </ol>

      {!holding && <button onClick={takeOver}>Take over</button>}
      {holding && <button onClick={() => void stopSpeaking()}>Stop speaking</button>}
      {holding && <button onClick={() => void send("end", { reason: "resolved" })}>End call</button>}
      {micOn && <span>Microphone open</span>}

      <p aria-live="polite">{error}</p>
      <audio ref={audioRef} autoPlay />
    </div>
  );
}