feat(web): wire live WebRTC voice overlay (#20)

Author: MukundaKatta

apps/web/components/VoiceOverlay.tsx

@@ -1,10 +1,11 @@
 "use client";
 
 import { useEffect, useRef, useState, useCallback } from "react";
-import { X, Mic, MicOff, Waves } from "lucide-react";
+import { X, Mic, MicOff, Waves, Phone, PhoneOff } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { getVoiceClient, type VoiceMode, type VoiceState } from "@/lib/voice";
 import { getWSClient } from "@/lib/ws";
+import { getWebRTCVoiceSession, type WebRTCSessionState } from "@/lib/webrtc";
 
 interface VoiceOverlayProps {
   open: boolean;
@@ -15,11 +16,15 @@ interface VoiceOverlayProps {
 
 export function VoiceOverlay({ open, onClose, onTranscript }: VoiceOverlayProps) {
   const [voiceState, setVoiceState] = useState<VoiceState>("idle");
+  const [rtcState, setRtcState] = useState<WebRTCSessionState>("idle");
   const [audioLevel, setAudioLevel] = useState(0);
   const [transcript, setTranscript] = useState("");
   const [voiceMode, setVoiceMode] = useState<VoiceMode>("push-to-talk");
   const [statusText, setStatusText] = useState("Tap the microphone to start");
   const voiceClientRef = useRef(getVoiceClient());
+  const rtcSessionRef = useRef(getWebRTCVoiceSession());
+  const remoteAudioRef = useRef<HTMLAudioElement | null>(null);
+  const rtcTargetChannelId = process.env.NEXT_PUBLIC_VOICE_PEER_CHANNEL_ID;
 
   // Subscribe to voice client events
   useEffect(() => {
@@ -64,6 +69,37 @@ export function VoiceOverlay({ open, onClose, onTranscript }: VoiceOverlayProps)
     };
   }, [open, onTranscript, voiceMode]);
 
+  useEffect(() => {
+    if (!open || !rtcTargetChannelId) return;
+
+    const rtc = rtcSessionRef.current;
+    rtc.listen();
+
+    const unsubState = rtc.onStateChange((state) => {
+      setRtcState(state);
+
+      if (state === "requesting-media" || state === "negotiating") {
+        setStatusText("Connecting live call...");
+      } else if (state === "connected") {
+        setStatusText("Live call active");
+      } else if (state === "ended") {
+        setStatusText("Tap the microphone to start");
+      }
+    });
+
+    const unsubRemote = rtc.onRemoteStream((stream) => {
+      const audio = remoteAudioRef.current;
+      if (!audio) return;
+      audio.srcObject = stream;
+      void audio.play().catch(() => {});
+    });
+
+    return () => {
+      unsubState();
+      unsubRemote();
+    };
+  }, [open, rtcTargetChannelId]);
+
   // Listen for voice.transcript and voice.audio.response messages from WS
   useEffect(() => {
     if (!open) return;
@@ -104,9 +140,11 @@ export function VoiceOverlay({ open, onClose, onTranscript }: VoiceOverlayProps)
       if (vc.isRecording) {
         vc.stopRecording();
       }
+      rtcSessionRef.current.endCall(false);
       setTranscript("");
       setAudioLevel(0);
       setVoiceState("idle");
+      setRtcState("idle");
     }
   }, [open]);
 
@@ -125,9 +163,26 @@ export function VoiceOverlay({ open, onClose, onTranscript }: VoiceOverlayProps)
     if (vc.isRecording) {
       vc.stopRecording();
     }
+    rtcSessionRef.current.endCall(false);
     onClose();
   }, [onClose]);
 
+  const handleLiveCallClick = useCallback(() => {
+    if (!rtcTargetChannelId) return;
+
+    const rtc = rtcSessionRef.current;
+    if (rtcState === "connected" || rtcState === "requesting-media" || rtcState === "negotiating") {
+      rtc.endCall();
+      return;
+    }
+
+    setTranscript("");
+    void rtc.startCall(rtcTargetChannelId).catch(() => {
+      setStatusText("Live call failed. Try again.");
+      setRtcState("error");
+    });
+  }, [rtcState, rtcTargetChannelId]);
+
   // Handle Escape key
   useEffect(() => {
     if (!open) return;
@@ -145,6 +200,8 @@ export function VoiceOverlay({ open, onClose, onTranscript }: VoiceOverlayProps)
   const isRecording = voiceState === "recording";
   const isProcessing = voiceState === "processing";
   const isPlaying = voiceState === "playing";
+  const isRtcConnecting = rtcState === "requesting-media" || rtcState === "negotiating";
+  const isRtcConnected = rtcState === "connected";
   const isActive = isRecording || isProcessing || isPlaying;
 
   // Generate visualization bars based on audio level
@@ -162,6 +219,7 @@ export function VoiceOverlay({ open, onClose, onTranscript }: VoiceOverlayProps)
 
   return (
     <div className="fixed inset-0 z-50 flex flex-col items-center justify-center bg-dark-900/95 backdrop-blur-sm">
+      <audio ref={remoteAudioRef} autoPlay playsInline className="hidden" />
       {/* Close button */}
       <button
         onClick={handleClose}
@@ -191,6 +249,24 @@ export function VoiceOverlay({ open, onClose, onTranscript }: VoiceOverlayProps)
         {voiceMode === "continuous" ? "Continuous" : "Push to Talk"}
       </button>
 
+      {rtcTargetChannelId && (
+        <button
+          onClick={handleLiveCallClick}
+          disabled={isRecording || isProcessing}
+          className={cn(
+            "absolute top-4 left-44 flex items-center gap-2 px-3 py-2 rounded-lg text-sm transition-colors",
+            isRtcConnected
+              ? "bg-green-600 text-white hover:bg-green-500"
+              : "bg-dark-800 text-dark-300 hover:text-white",
+            (isRecording || isProcessing) && "opacity-50 cursor-not-allowed",
+          )}
+          title="Start live voice call"
+        >
+          {isRtcConnected || isRtcConnecting ? <PhoneOff size={16} /> : <Phone size={16} />}
+          {isRtcConnected ? "End Live Call" : isRtcConnecting ? "Connecting..." : "Live Call Beta"}
+        </button>
+      )}
+
       {/* Status text */}
       <p className="text-dark-300 text-sm font-medium mb-8 tracking-wide uppercase">
         {statusText}

apps/web/lib/webrtc.ts

@@ -68,7 +68,10 @@ export class WebRTCVoiceSession {
     this.ws = options?.wsClient ?? getWSClient();
     this.createPeerConnection =
       options?.peerConnectionFactory ??
-      (() => new RTCPeerConnection({ iceServers: [{ urls: "stun:stun.l.google.com:19302" }] }));
+      (() =>
+        new RTCPeerConnection({
+          iceServers: [{ urls: "stun:stun.l.google.com:19302" }],
+        }) as unknown as RTCPeerConnectionLike);
     this.getUserMedia =
       options?.getUserMedia ??
       ((constraints) => navigator.mediaDevices.getUserMedia(constraints));

tests/web/webrtc.test.ts

@@ -215,4 +215,77 @@ describe("WebRTCVoiceSession", () => {
       },
     });
   });
+
+  it("subscribes to WebSocket rtc messages through listen()", async () => {
+    let messageHandler: ((message: unknown) => void) | null = null;
+    const sent: unknown[] = [];
+    const wsClient = {
+      currentSessionId: "session-5",
+      send: vi.fn((message: unknown) => {
+        sent.push(message);
+      }),
+      onMessage: vi.fn((handler: (message: unknown) => void) => {
+        messageHandler = handler;
+        return () => {
+          messageHandler = null;
+        };
+      }),
+    };
+    const session = new WebRTCVoiceSession({
+      wsClient: wsClient as never,
+      peerConnectionFactory: () => createPeerConnectionStub().peer as never,
+      getUserMedia: vi.fn().mockResolvedValue(createStream(["track-5"])),
+    });
+
+    session.listen();
+    messageHandler?.({
+      type: "rtc.offer",
+      payload: {
+        sourceChannelId: "voice-peer",
+        description: {
+          type: "offer",
+          sdp: "offer-from-signal",
+        },
+      },
+    });
+    await new Promise((resolve) => setTimeout(resolve, 0));
+
+    expect(wsClient.onMessage).toHaveBeenCalledTimes(1);
+    expect(sent[0]).toMatchObject({
+      type: "rtc.answer",
+      payload: {
+        targetChannelId: "voice-peer",
+      },
+    });
+  });
+
+  it("sends rtc.hangup and stops local tracks when ending a call", async () => {
+    const sent: unknown[] = [];
+    const stream = createStream(["track-6"]);
+    const { peer } = createPeerConnectionStub();
+    const session = new WebRTCVoiceSession({
+      wsClient: {
+        currentSessionId: "session-6",
+        send: vi.fn((message: unknown) => {
+          sent.push(message);
+        }),
+        onMessage: vi.fn(() => () => {}),
+      } as never,
+      peerConnectionFactory: () => peer as never,
+      getUserMedia: vi.fn().mockResolvedValue(stream),
+    });
+
+    await session.startCall("mobile-peer");
+    session.endCall();
+
+    expect(sent.at(-1)).toMatchObject({
+      type: "rtc.hangup",
+      payload: {
+        targetChannelId: "mobile-peer",
+      },
+    });
+    expect(peer.close).toHaveBeenCalledTimes(1);
+    expect((stream as unknown as { tracks: Array<{ stop: ReturnType<typeof vi.fn> }> }).tracks[0]?.stop).toHaveBeenCalledTimes(1);
+    expect(session.currentState).toBe("ended");
+  });
 });