From 4ca3859ced2471d0169f4a79477dc56377d06303 Mon Sep 17 00:00:00 2001
From: smoghe-bw <smoghe-bw>
Date: Sat, 4 Jul 2026 16:57:56 -0400
Subject: [PATCH 1/8] feat: make layout responsive and bump bandwidth-rtc to
 0.4.0

---
 package-lock.json                  |  6 +++--
 package.json                       |  2 +-
 src/App.tsx                        |  4 ++--
 src/components/CallController.tsx  |  1 +
 src/components/EndpointHandler.tsx | 11 +++++----
 src/components/MediaCapture.tsx    |  4 ++--
 src/components/MediaPlayer.tsx     |  4 ++--
 src/css/App.scss                   | 23 +++++++++++++++++++
 src/css/CallController.scss        | 37 ++++++++++++++++++++++++++++++
 src/css/DigitGrid.scss             |  1 +
 src/css/EndpointHandler.scss       | 13 +++++++++++
 src/css/Navbar.scss                | 26 ++++++++++++++++++++-
 src/css/index.scss                 | 28 ++++++++++++++++++++++
 13 files changed, 146 insertions(+), 14 deletions(-)
 create mode 100644 src/css/CallController.scss
 create mode 100644 src/css/EndpointHandler.scss

diff --git a/package-lock.json b/package-lock.json
index c48e1de..99c7d08 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,7 +16,7 @@
         "@types/node": "^16.18.126",
         "@types/react": "^19.2.2",
         "@types/react-dom": "^19.2.2",
-        "bandwidth-rtc": "^0.3.0",
+        "bandwidth-rtc": "^0.4.0",
         "bandwidth-sdk": "^7.3.0",
         "cors": "^2.8.5",
         "dotenv": "^16.4.7",
@@ -5683,7 +5683,9 @@
       "license": "MIT"
     },
     "node_modules/bandwidth-rtc": {
-      "version": "0.3.0",
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/bandwidth-rtc/-/bandwidth-rtc-0.4.0.tgz",
+      "integrity": "sha512-BZDWvjSci6C1m1a3aLzndMwOnfSzfqF4vJiyp0ukD69ljXU1tU1fgQHoYPgFK9Xdn48HI/z9cXVp8DZhm2rZIw==",
       "license": "MIT",
       "dependencies": {
         "@types/uuid": "^10.0.0",
diff --git a/package.json b/package.json
index 21ffbfd..dc41316 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,7 @@
     "@types/node": "^16.18.126",
     "@types/react": "^19.2.2",
     "@types/react-dom": "^19.2.2",
-    "bandwidth-rtc": "^0.3.0",
+    "bandwidth-rtc": "^0.4.0",
     "bandwidth-sdk": "^7.3.0",
     "cors": "^2.8.5",
     "dotenv": "^16.4.7",
diff --git a/src/App.tsx b/src/App.tsx
index 5461f54..34eccac 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -56,11 +56,11 @@ function App() {
                 {readyMetadata && (
                     <>
                     <h2>Bandwidth RTC Agent Sample</h2>
-                    <div style={{ display: 'flex', gap: '1rem', justifyContent: 'center' }}>
+                    <div className="app-row">
                         <MediaCapture bandwidthRtcClient={brtcClient} />
                         <MediaPlayer bandwidthRtcClient={brtcClient} inCall={inCall} setInCall={setInCall} />
                     </div>
-                    <div style={{ display: 'flex', gap: '1rem', justifyContent: 'center' }}>
+                    <div className="app-row">
                         <CallController bandwidthRtcClient={brtcClient} readyMetadata={readyMetadata} inCall={inCall} setInCall={setInCall} />
                     </div>
                     </>
diff --git a/src/components/CallController.tsx b/src/components/CallController.tsx
index 0d62757..17cb1c4 100644
--- a/src/components/CallController.tsx
+++ b/src/components/CallController.tsx
@@ -3,6 +3,7 @@ import React, {ChangeEventHandler, useState} from "react";
 import '../css/DigitGrid.scss';
 import '../css/CallControlButton.scss';
 import '../css/NumberInput.scss';
+import '../css/CallController.scss';
 import CallIcon from '@mui/icons-material/Call';
 import CallEndIcon from '@mui/icons-material/CallEnd';
 import ShortcutOutlinedIcon from '@mui/icons-material/ShortcutOutlined';
diff --git a/src/components/EndpointHandler.tsx b/src/components/EndpointHandler.tsx
index bdfd09c..3ca6c44 100644
--- a/src/components/EndpointHandler.tsx
+++ b/src/components/EndpointHandler.tsx
@@ -1,6 +1,7 @@
 import React, {useEffect, useState} from "react";
 import BandwidthRtc from "bandwidth-rtc";
 import {Endpoint} from "../../server/types"
+import '../css/EndpointHandler.scss';
 
 function EndpointHandler({bandwidthRtcClient, resetClient, gatewayUrl}: {bandwidthRtcClient: BandwidthRtc, resetClient: () => void, gatewayUrl?: string }) {
     const [endpoint, setEndpoint] = useState<Endpoint | null>(null);
@@ -82,11 +83,13 @@ function EndpointHandler({bandwidthRtcClient, resetClient, gatewayUrl}: {bandwid
                     <button onClick={() => setBanner(null)} style={{ background: 'none', border: 'none', cursor: 'pointer', fontWeight: 'bold', color: '#721c24' }}>✕</button>
                 </div>
             )}
-            <button onClick={createEndpoint}>Create Endpoint</button>
-            <button onClick={deleteEndpoint} disabled={!endpoint}>Disconnect & Delete Endpoint</button>
-            <button onClick={deleteAllEndpoints}>Delete All Endpoints</button>
+            <div className="endpoint-actions">
+                <button onClick={createEndpoint}>Create Endpoint</button>
+                <button onClick={deleteEndpoint} disabled={!endpoint}>Disconnect & Delete Endpoint</button>
+                <button onClick={deleteAllEndpoints}>Delete All Endpoints</button>
+            </div>
             {endpoint !== null && (
-                <p>{endpoint.endpointId}</p>
+                <p className="endpoint-id">{endpoint.endpointId}</p>
             )}
         </div>
     );
diff --git a/src/components/MediaCapture.tsx b/src/components/MediaCapture.tsx
index cba49ce..2d8d764 100644
--- a/src/components/MediaCapture.tsx
+++ b/src/components/MediaCapture.tsx
@@ -244,10 +244,10 @@ function MediaCapture({bandwidthRtcClient}: {bandwidthRtcClient: BandwidthRtc} )
     };
 
     return (
-        <div>
+        <div style={{ flex: '1 1 320px', minWidth: 0, maxWidth: 400 }}>
             <div>
                 <audio ref={audioRef} />
-                <canvas ref={canvasRef} width={400} height={200} style={{ border: "1px solid black" }} />
+                <canvas ref={canvasRef} width={400} height={200} className="audio-canvas" style={{ border: "1px solid black" }} />
                 <div>
                     <select
                         value={selectedAudioInputDeviceId}
diff --git a/src/components/MediaPlayer.tsx b/src/components/MediaPlayer.tsx
index 9e2afae..d91e39a 100644
--- a/src/components/MediaPlayer.tsx
+++ b/src/components/MediaPlayer.tsx
@@ -167,10 +167,10 @@ function MediaPlayer({bandwidthRtcClient, inCall, setInCall}: {bandwidthRtcClien
     };
 
     return (
-        <div>
+        <div style={{ flex: '1 1 320px', minWidth: 0, maxWidth: 400 }}>
             <div>
                 <audio ref={audioRef} />
-                <canvas ref={canvasRef} width={400} height={200} style={{ border: "1px solid black" }} />
+                <canvas ref={canvasRef} width={400} height={200} className="audio-canvas" style={{ border: "1px solid black" }} />
                 <div>
                     <button onClick={handlePlay}>{isPlaying ? "Mute" : "Unmute"}</button>
                 </div>
diff --git a/src/css/App.scss b/src/css/App.scss
index a9fd079..e4daa9a 100644
--- a/src/css/App.scss
+++ b/src/css/App.scss
@@ -1,7 +1,30 @@
 // App.scss
 
+@import './utils/_variables.scss';
+
 .App {
   text-align: center;
+  width: 100%;
+  padding: 0 16px;
+}
+
+.app-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  justify-content: center;
+}
+
+.audio-canvas {
+  max-width: 100%;
+  height: auto;
+  display: block;
+}
+
+@media (max-width: $slim-mobile-view-width) {
+  .App {
+    padding: 0 8px;
+  }
 }
 
 .App-logo {
diff --git a/src/css/CallController.scss b/src/css/CallController.scss
new file mode 100644
index 0000000..7750aeb
--- /dev/null
+++ b/src/css/CallController.scss
@@ -0,0 +1,37 @@
+// CallController.scss
+
+.outbound-caller {
+    width: 100%;
+    max-width: 340px;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 0 8px;
+}
+
+.dialed-number {
+    font-size: 1.5rem;
+    word-break: break-all;
+}
+
+.call-controls {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+}
+
+.dtmf-duration-control,
+.dtmf-sequence-control {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 8px;
+    justify-content: center;
+    width: 100%;
+    margin-bottom: 10px;
+}
+
+.dtmf-sequence-control input {
+    flex: 1 1 120px;
+}
diff --git a/src/css/DigitGrid.scss b/src/css/DigitGrid.scss
index 627f8a9..5c87210 100644
--- a/src/css/DigitGrid.scss
+++ b/src/css/DigitGrid.scss
@@ -5,6 +5,7 @@
 .digit-grid {
   margin-top: 20px;
   width: 290px;
+  max-width: 100%;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-gap: 1.2rem;
diff --git a/src/css/EndpointHandler.scss b/src/css/EndpointHandler.scss
new file mode 100644
index 0000000..8fa66b9
--- /dev/null
+++ b/src/css/EndpointHandler.scss
@@ -0,0 +1,13 @@
+// EndpointHandler.scss
+
+.endpoint-actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    justify-content: center;
+}
+
+.endpoint-id {
+    word-break: break-all;
+    padding: 0 8px;
+}
diff --git a/src/css/Navbar.scss b/src/css/Navbar.scss
index 39c5efa..d384910 100644
--- a/src/css/Navbar.scss
+++ b/src/css/Navbar.scss
@@ -3,9 +3,10 @@
 @import './utils/_variables.scss';
 
 .navbar {
-    width: 100vw;
+    width: 100%;
     height: auto;
     display: flex;
+    align-items: center;
     justify-content: flex-start;
     background-color: $blue75;
     padding: 16px 0;
@@ -23,3 +24,26 @@
     font-weight: 300;
     margin-left: 10px;
 }
+
+@media (max-width: $slim-mobile-view-width) {
+    .navbar-img {
+        height: 40px;
+        margin-left: 16px;
+    }
+
+    .text {
+        font-size: 26px;
+    }
+}
+
+@media (max-width: $ultra-slim-mobile-view-width) {
+    .navbar-img {
+        height: 32px;
+        margin-left: 12px;
+    }
+
+    .text {
+        font-size: 20px;
+        margin-left: 8px;
+    }
+}
diff --git a/src/css/index.scss b/src/css/index.scss
index 89f6793..1988ad3 100644
--- a/src/css/index.scss
+++ b/src/css/index.scss
@@ -1,5 +1,33 @@
 // index.scss
 
+@import './utils/_variables.scss';
+
+:root {
+  --button-size: #{$button-size};
+  --grey15: #{rgba($black, 0.15)};
+  --grey20: #{rgba($black, 0.2)};
+  --grey55: #{rgba($black, 0.55)};
+  --grey65: #{rgba($black, 0.65)};
+  --green65: #{$green65};
+  --green90: #{darken($green65, 10%)};
+  --red55: rgb(217, 58, 58);
+  --red90: rgb(163, 38, 38);
+  --blue5: #{$blue5};
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html, body {
+  max-width: 100%;
+  overflow-x: hidden;
+}
+
+select, input, textarea {
+  max-width: 100%;
+}
+
 body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',

From b0d34d0aea9dc5b87db041f2397684c6d6fe803e Mon Sep 17 00:00:00 2001
From: smoghe-bw <smoghe-bw>
Date: Sun, 5 Jul 2026 13:12:01 -0400
Subject: [PATCH 2/8] fix: register stream handlers before connect to fix race
 condition

Move onStreamAvailable/onStreamUnavailable registration to App.tsx
so they fire before readyMetadata exists, and pass MediaStream
directly to MediaPlayer instead of managing subscription internally.
---
 src/App.tsx                    | 18 ++++++-
 src/components/MediaPlayer.tsx | 92 ++++++++++++----------------------
 2 files changed, 49 insertions(+), 61 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 34eccac..87e4469 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -13,6 +13,7 @@ function App() {
     const [brtcClientReady, setBrtcClientReady] = useState<boolean>(false);
     const [readyMetadata, setReadyMetadata] = useState<ReadyMetadata | null>(null);
     const [inCall, setInCall] = useState(false);
+    const [inboundStream, setInboundStream] = useState<MediaStream | null>(null);
 
     const prepBrtcClient= async (reset: boolean) => {
         console.log("Prepping Bandwidth RTC Client")
@@ -21,10 +22,25 @@ function App() {
             setBrtcClientReady(false)
             setReadyMetadata(null)
             setBrtcClient(null)
+            setInCall(false)
+            setInboundStream(null)
         }
         if (!brtcClient || reset) {
             console.log("Creating Bandwidth RTC Client")
             let brtcClient = new BandwidthRtc('debug')
+            // Registered before connect() runs: the subscribing peer connection's
+            // ontrack fires once during initial connection setup, before
+            // readyMetadata (and therefore MediaPlayer) exists.
+            brtcClient.onStreamAvailable((s) => {
+                console.log("Stream available:", s);
+                setInCall(true);
+                setInboundStream(s.mediaStream);
+            })
+            brtcClient.onStreamUnavailable((s) => {
+                console.log("Stream unavailable:", s);
+                setInCall(false);
+                setInboundStream(null);
+            })
             brtcClient.onReady((readyMetadata: ReadyMetadata) => {
                 console.log("Ready Metadata:", readyMetadata);
                 setBrtcClientReady(true)
@@ -58,7 +74,7 @@ function App() {
                     <h2>Bandwidth RTC Agent Sample</h2>
                     <div className="app-row">
                         <MediaCapture bandwidthRtcClient={brtcClient} />
-                        <MediaPlayer bandwidthRtcClient={brtcClient} inCall={inCall} setInCall={setInCall} />
+                        <MediaPlayer inboundStream={inboundStream} />
                     </div>
                     <div className="app-row">
                         <CallController bandwidthRtcClient={brtcClient} readyMetadata={readyMetadata} inCall={inCall} setInCall={setInCall} />
diff --git a/src/components/MediaPlayer.tsx b/src/components/MediaPlayer.tsx
index d91e39a..b2edbe5 100644
--- a/src/components/MediaPlayer.tsx
+++ b/src/components/MediaPlayer.tsx
@@ -1,45 +1,22 @@
 import React, {useEffect, useRef, useState} from "react";
-import BandwidthRtc, {RtcStream} from "bandwidth-rtc";
-
-function MediaPlayer({bandwidthRtcClient, inCall, setInCall}: {bandwidthRtcClient: BandwidthRtc, inCall: boolean, setInCall: (inCall: boolean) => void} ) {
-    if (!bandwidthRtcClient) {
-        throw new Error("webrtcClient is required");
-    }
-    if (!setInCall) {
-        throw new Error("setInCall is required");
-    }
-
-    // Register inbound media handler
-    bandwidthRtcClient.onStreamAvailable(async (s) => {
-        console.log("Stream available:", s)
-        setInCall(true);
-        await handleMediaSubscribe(s)
-    });
-    bandwidthRtcClient.onStreamUnavailable(async (s) => {
-        console.log("Stream unavailable:", s)
-        setInCall(false);
-        await handleMediaUnsubscribe(s)
-    })
 
+function MediaPlayer({inboundStream}: {inboundStream: MediaStream | null}) {
     const audioRef = useRef<HTMLAudioElement | null>(null);
     const canvasRef = useRef<HTMLCanvasElement | null>(null);
-    const [audioSource, setAudioSource] = useState<HTMLAudioElement | null>(null);
     const [audioSourceNode, setAudioSourceNode] = useState<AudioNode | null>(null);
     const [audioContext, setAudioContext] = useState<AudioContext | null>(null);
     const [analyser, setAnalyser] = useState<AnalyserNode | null>(null);
     const [isPlaying, setIsPlaying] = useState<boolean>(false);
     const [isSubscribed, setIsSubscribed] = useState<boolean>(false);
-    const [dataArray, setDataArray] = useState<Uint8Array>(new Uint8Array(512));
-    const [fftSize, setFftSize] = useState<number>(512);
+    const [dataArray] = useState<Uint8Array>(new Uint8Array(512));
     const [directMediaStream, setDirectMediaStream] = useState<MediaStream | null>(null);
     const [localOutputAudioNode, setLocalOutputAudioNode] = useState<AudioNode | undefined>(undefined);
-    const [outputStreamSourceNode, setOutputStreamSourceNode] = useState<AudioNode | undefined>(undefined);
 
     useEffect(() => {
         // Initialize Web Audio API
         const context = new window.AudioContext();
         const analyserNode = context.createAnalyser();
-        analyserNode.fftSize = fftSize;
+        analyserNode.fftSize = dataArray.length;
         setAudioContext(context);
         setAnalyser(analyserNode);
     }, []);
@@ -92,37 +69,28 @@ function MediaPlayer({bandwidthRtcClient, inCall, setInCall}: {bandwidthRtcClien
         requestAnimationFrame(drawFFT);
     };
 
-    const handleMediaSubscribe = async (rtcStream: RtcStream): Promise<MediaStream> => {
+    const handleMediaSubscribe = async (mediaStream: MediaStream) => {
         if (!audioContext || !analyser) {
             throw new Error("Audio context or analyser is not initialized");
         }
         if (!audioRef.current) {
             throw new Error("Audio element is not initialized");
         }
-        if (!rtcStream.mediaStream) {
-            throw new Error("RTC stream has no media stream");
-        }
-        if (!isSubscribed) {
-            let sourceNode = audioContext.createMediaStreamSource(rtcStream.mediaStream);
-            let destination = audioContext.createMediaStreamDestination();
-
-            sourceNode.connect(analyser);
-            analyser.connect(destination);
-            let stream = destination.stream;
-            drawFFT();
-            audioRef.current.srcObject = rtcStream.mediaStream;
-            setAudioSourceNode(sourceNode);
-            setIsSubscribed(true);
-            await audioContext.resume()
-            setDirectMediaStream(stream)
-            return stream;
-        } else {
-            throw new Error("Already subscribed to media");
-        }
+        let sourceNode = audioContext.createMediaStreamSource(mediaStream);
+        let destination = audioContext.createMediaStreamDestination();
+
+        sourceNode.connect(analyser);
+        analyser.connect(destination);
+        drawFFT();
+        audioRef.current.srcObject = mediaStream;
+        setAudioSourceNode(sourceNode);
+        setIsSubscribed(true);
+        await audioContext.resume()
+        setDirectMediaStream(destination.stream)
     }
 
-    const handleMediaUnsubscribe = async (s: RtcStream) => {
-        console.log("Unsubscribing from stream:", s.mediaStream?.id);
+    const handleMediaUnsubscribe = async () => {
+        console.log("Unsubscribing from stream:", inboundStream?.id);
         // Stop playing if we are
         if (isPlaying) {
             await handlePlay()
@@ -132,8 +100,20 @@ function MediaPlayer({bandwidthRtcClient, inCall, setInCall}: {bandwidthRtcClien
             setAudioSourceNode(null);
             setDirectMediaStream(null);
         }
+        if (audioRef.current) {
+            audioRef.current.srcObject = null;
+        }
     }
 
+    useEffect(() => {
+        if (inboundStream) {
+            handleMediaSubscribe(inboundStream);
+        } else if (isSubscribed) {
+            handleMediaUnsubscribe();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [inboundStream, audioContext, analyser]);
+
     const handlePlay = async () => {
         console.log("handlePlay")
         let sourceNode = audioSourceNode;
@@ -143,26 +123,18 @@ function MediaPlayer({bandwidthRtcClient, inCall, setInCall}: {bandwidthRtcClien
         }
         if (!audioContext) {
             throw new Error("Audio context is not initialized");
-            return
         }
         if (!directMediaStream) {
             console.log("directMediaStream is null")
             return
         }
-        if (!sourceNode) {
-            sourceNode = audioContext.createMediaStreamSource(directMediaStream)
-            // audioRef.current.srcObject = mediaStream;
-            setOutputStreamSourceNode(sourceNode)
-        }
         if (!localOutputAudioNode) {
             setLocalOutputAudioNode(sourceNode.connect(audioContext.destination))
             setIsPlaying(true)
         } else {
-            if (localOutputAudioNode) {
-                sourceNode.disconnect(audioContext.destination);
-                setLocalOutputAudioNode(undefined)
-                setIsPlaying(false)
-            }
+            sourceNode.disconnect(audioContext.destination);
+            setLocalOutputAudioNode(undefined)
+            setIsPlaying(false)
         }
     };
 

From 6e92a1eee237a02de85c675578413f26f6b65e5d Mon Sep 17 00:00:00 2001
From: smoghe-bw <smoghe-bw>
Date: Sun, 5 Jul 2026 13:28:08 -0400
Subject: [PATCH 3/8] refactor: derive call state from actions and simplify
 media subscription

---
 src/App.tsx                       |  2 --
 src/components/CallController.tsx |  2 ++
 src/components/MediaPlayer.tsx    | 54 +++++++++++--------------------
 3 files changed, 21 insertions(+), 37 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 87e4469..1a91140 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -33,12 +33,10 @@ function App() {
             // readyMetadata (and therefore MediaPlayer) exists.
             brtcClient.onStreamAvailable((s) => {
                 console.log("Stream available:", s);
-                setInCall(true);
                 setInboundStream(s.mediaStream);
             })
             brtcClient.onStreamUnavailable((s) => {
                 console.log("Stream unavailable:", s);
-                setInCall(false);
                 setInboundStream(null);
             })
             brtcClient.onReady((readyMetadata: ReadyMetadata) => {
diff --git a/src/components/CallController.tsx b/src/components/CallController.tsx
index 17cb1c4..c4a03f4 100644
--- a/src/components/CallController.tsx
+++ b/src/components/CallController.tsx
@@ -107,6 +107,7 @@ function CallController({bandwidthRtcClient, readyMetadata, inCall, setInCall}:
         let result = await bandwidthRtcClient.requestOutboundConnection(e164Number, EndpointType.PHONE_NUMBER)
         if (result.accepted) {
             setCallStatus('Ringing');
+            setInCall(true);
         } else {
             setCallStatus('Declined');
         }
@@ -117,6 +118,7 @@ function CallController({bandwidthRtcClient, readyMetadata, inCall, setInCall}:
         const e164Number = '+' + destNumber.replace(/[^\d]/g, '');
         let result = await bandwidthRtcClient.hangupConnection(e164Number, EndpointType.PHONE_NUMBER)
         setCallStatus(result.result)
+        setInCall(false);
     }
 
     const handleDigitClick = (value: string) => {
diff --git a/src/components/MediaPlayer.tsx b/src/components/MediaPlayer.tsx
index b2edbe5..d8023a7 100644
--- a/src/components/MediaPlayer.tsx
+++ b/src/components/MediaPlayer.tsx
@@ -7,7 +7,6 @@ function MediaPlayer({inboundStream}: {inboundStream: MediaStream | null}) {
     const [audioContext, setAudioContext] = useState<AudioContext | null>(null);
     const [analyser, setAnalyser] = useState<AnalyserNode | null>(null);
     const [isPlaying, setIsPlaying] = useState<boolean>(false);
-    const [isSubscribed, setIsSubscribed] = useState<boolean>(false);
     const [dataArray] = useState<Uint8Array>(new Uint8Array(512));
     const [directMediaStream, setDirectMediaStream] = useState<MediaStream | null>(null);
     const [localOutputAudioNode, setLocalOutputAudioNode] = useState<AudioNode | undefined>(undefined);
@@ -69,48 +68,33 @@ function MediaPlayer({inboundStream}: {inboundStream: MediaStream | null}) {
         requestAnimationFrame(drawFFT);
     };
 
-    const handleMediaSubscribe = async (mediaStream: MediaStream) => {
-        if (!audioContext || !analyser) {
-            throw new Error("Audio context or analyser is not initialized");
-        }
-        if (!audioRef.current) {
-            throw new Error("Audio element is not initialized");
+    useEffect(() => {
+        if (!audioContext || !analyser || !inboundStream || !audioRef.current) {
+            return;
         }
-        let sourceNode = audioContext.createMediaStreamSource(mediaStream);
-        let destination = audioContext.createMediaStreamDestination();
 
+        const sourceNode = audioContext.createMediaStreamSource(inboundStream);
+        const destination = audioContext.createMediaStreamDestination();
         sourceNode.connect(analyser);
         analyser.connect(destination);
-        drawFFT();
-        audioRef.current.srcObject = mediaStream;
+        audioRef.current.srcObject = inboundStream;
         setAudioSourceNode(sourceNode);
-        setIsSubscribed(true);
-        await audioContext.resume()
-        setDirectMediaStream(destination.stream)
-    }
+        audioContext.resume();
+        setDirectMediaStream(destination.stream);
+        drawFFT();
 
-    const handleMediaUnsubscribe = async () => {
-        console.log("Unsubscribing from stream:", inboundStream?.id);
-        // Stop playing if we are
-        if (isPlaying) {
-            await handlePlay()
-        }
-        if (isSubscribed) {
-            setIsSubscribed(false);
+        return () => {
+            console.log("Unsubscribing from stream:", inboundStream.id);
+            sourceNode.disconnect();
+            analyser.disconnect(destination);
+            if (audioRef.current) {
+                audioRef.current.srcObject = null;
+            }
             setAudioSourceNode(null);
             setDirectMediaStream(null);
-        }
-        if (audioRef.current) {
-            audioRef.current.srcObject = null;
-        }
-    }
-
-    useEffect(() => {
-        if (inboundStream) {
-            handleMediaSubscribe(inboundStream);
-        } else if (isSubscribed) {
-            handleMediaUnsubscribe();
-        }
+            setIsPlaying(false);
+            setLocalOutputAudioNode(undefined);
+        };
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [inboundStream, audioContext, analyser]);
 

From 58a21d5c764c25242c1785907b02b6800660de87 Mon Sep 17 00:00:00 2001
From: smoghe-bw <smoghe-bw>
Date: Sun, 5 Jul 2026 14:04:45 -0400
Subject: [PATCH 4/8] refactor: extract media stream subscribe/unsubscribe
 handlers

---
 src/components/MediaPlayer.tsx | 51 ++++++++++++++++++++--------------
 1 file changed, 30 insertions(+), 21 deletions(-)

diff --git a/src/components/MediaPlayer.tsx b/src/components/MediaPlayer.tsx
index d8023a7..a9ecdc9 100644
--- a/src/components/MediaPlayer.tsx
+++ b/src/components/MediaPlayer.tsx
@@ -68,33 +68,42 @@ function MediaPlayer({inboundStream}: {inboundStream: MediaStream | null}) {
         requestAnimationFrame(drawFFT);
     };
 
+    const handleMediaSubscribe = (mediaStream: MediaStream, context: AudioContext, analyserNode: AnalyserNode) => {
+        const sourceNode = context.createMediaStreamSource(mediaStream);
+        const destination = context.createMediaStreamDestination();
+        sourceNode.connect(analyserNode);
+        analyserNode.connect(destination);
+        if (audioRef.current) {
+            audioRef.current.srcObject = mediaStream;
+        }
+        setAudioSourceNode(sourceNode);
+        context.resume();
+        setDirectMediaStream(destination.stream);
+        drawFFT();
+        return {sourceNode, destination};
+    }
+
+    const handleMediaUnsubscribe = (mediaStream: MediaStream, sourceNode: MediaStreamAudioSourceNode, destination: MediaStreamAudioDestinationNode, analyserNode: AnalyserNode) => {
+        console.log("Unsubscribing from stream:", mediaStream.id);
+        sourceNode.disconnect();
+        analyserNode.disconnect(destination);
+        if (audioRef.current) {
+            audioRef.current.srcObject = null;
+        }
+        setAudioSourceNode(null);
+        setDirectMediaStream(null);
+        setIsPlaying(false);
+        setLocalOutputAudioNode(undefined);
+    }
+
     useEffect(() => {
         if (!audioContext || !analyser || !inboundStream || !audioRef.current) {
             return;
         }
 
-        const sourceNode = audioContext.createMediaStreamSource(inboundStream);
-        const destination = audioContext.createMediaStreamDestination();
-        sourceNode.connect(analyser);
-        analyser.connect(destination);
-        audioRef.current.srcObject = inboundStream;
-        setAudioSourceNode(sourceNode);
-        audioContext.resume();
-        setDirectMediaStream(destination.stream);
-        drawFFT();
+        const {sourceNode, destination} = handleMediaSubscribe(inboundStream, audioContext, analyser);
 
-        return () => {
-            console.log("Unsubscribing from stream:", inboundStream.id);
-            sourceNode.disconnect();
-            analyser.disconnect(destination);
-            if (audioRef.current) {
-                audioRef.current.srcObject = null;
-            }
-            setAudioSourceNode(null);
-            setDirectMediaStream(null);
-            setIsPlaying(false);
-            setLocalOutputAudioNode(undefined);
-        };
+        return () => handleMediaUnsubscribe(inboundStream, sourceNode, destination, analyser);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [inboundStream, audioContext, analyser]);
 

From 926f39fb4591b8ba491655be5a5786403b887c96 Mon Sep 17 00:00:00 2001
From: smoghe-bw <smoghe-bw>
Date: Mon, 6 Jul 2026 17:22:35 -0400
Subject: [PATCH 5/8] feat: add call recording and distinguish ringing from
 connected state

---
 server/index.ts                   |  2 ++
 src/App.tsx                       |  8 +++++++-
 src/components/CallController.tsx | 13 +++++++------
 3 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/server/index.ts b/server/index.ts
index 6606feb..461d56a 100644
--- a/server/index.ts
+++ b/server/index.ts
@@ -183,6 +183,7 @@ function processInboundCall(callId: string): string {
         }
         return `<?xml version="1.0" encoding="UTF-8"?>
 <Response>
+    <StartRecording multiChannel="true" recordingAvailableUrl="${CALLBACK_BASE_URL}/recordingAvailable/b_answer"/>
     <SpeakSentence voice="julie">Connecting</SpeakSentence>
     <Connect eventCallbackUrl="${CALLBACK_BASE_URL}/connectstatus">
         <Endpoint>${endpointId}</Endpoint>
@@ -191,6 +192,7 @@ function processInboundCall(callId: string): string {
     }
     return `<?xml version="1.0" encoding="UTF-8"?>
 <Response>
+    <StartRecording multiChannel="true" recordingAvailableUrl="${CALLBACK_BASE_URL}/recordingAvailable/b_answer"/>
     <SpeakSentence voice="julie">Connecting</SpeakSentence>
     <Connect eventCallbackUrl="${CALLBACK_BASE_URL}/connectstatus">
         <Endpoint>${requestingEndpointId}</Endpoint>
diff --git a/src/App.tsx b/src/App.tsx
index 1a91140..95f76ba 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -34,10 +34,16 @@ function App() {
             brtcClient.onStreamAvailable((s) => {
                 console.log("Stream available:", s);
                 setInboundStream(s.mediaStream);
+                // The stream arriving means the call actually connected (answered),
+                // so we're truly in-call now — not just ringing.
+                setInCall(true);
             })
             brtcClient.onStreamUnavailable((s) => {
                 console.log("Stream unavailable:", s);
                 setInboundStream(null);
+                // The far side (or gateway) ended the call; reset the UI out of
+                // the in-call/ringing state.
+                setInCall(false);
             })
             brtcClient.onReady((readyMetadata: ReadyMetadata) => {
                 console.log("Ready Metadata:", readyMetadata);
@@ -75,7 +81,7 @@ function App() {
                         <MediaPlayer inboundStream={inboundStream} />
                     </div>
                     <div className="app-row">
-                        <CallController bandwidthRtcClient={brtcClient} readyMetadata={readyMetadata} inCall={inCall} setInCall={setInCall} />
+                        <CallController bandwidthRtcClient={brtcClient} readyMetadata={readyMetadata} inCall={inCall} setInCall={setInCall} connected={inboundStream !== null} />
                     </div>
                     </>
                 )}
diff --git a/src/components/CallController.tsx b/src/components/CallController.tsx
index c4a03f4..d977d12 100644
--- a/src/components/CallController.tsx
+++ b/src/components/CallController.tsx
@@ -71,7 +71,7 @@ function isDestinationValid(destination: string): boolean {
     return true
 }
 
-function CallController({bandwidthRtcClient, readyMetadata, inCall, setInCall}: {bandwidthRtcClient: BandwidthRtc, readyMetadata: ReadyMetadata, inCall: boolean, setInCall: (inCall: boolean) => void} ) {
+function CallController({bandwidthRtcClient, readyMetadata, inCall, setInCall, connected}: {bandwidthRtcClient: BandwidthRtc, readyMetadata: ReadyMetadata, inCall: boolean, setInCall: (inCall: boolean) => void, connected: boolean} ) {
     if (!bandwidthRtcClient) {
         throw new Error("webrtcClient is required");
     }
@@ -122,14 +122,15 @@ function CallController({bandwidthRtcClient, readyMetadata, inCall, setInCall}:
     }
 
     const handleDigitClick = (value: string) => {
-        if (inCall) {
+        if (connected) {
+            // DTMF only once the call is answered; during ringing, digits do nothing.
             console.log(`Sending DTMF: ${value}, duration: ${dtmfDuration}ms`);
             try {
                 bandwidthRtcClient.sendDtmf(value, undefined, dtmfDuration);
             } catch (err) {
                 console.error('sendDtmf failed:', err);
             }
-        } else {
+        } else if (!inCall) {
             setDestNumber((destNumber) => destNumber.concat(value));
         }
     }
@@ -191,7 +192,7 @@ function CallController({bandwidthRtcClient, readyMetadata, inCall, setInCall}:
                 ))}
             </select>
 
-            <h2>{!inCall && callStatus}{inCall && "In Call"}</h2>
+            <h2>{!inCall && callStatus}{inCall && !connected && "Ringing"}{inCall && connected && "In Call"}</h2>
 
             {endpointType == EndpointType.ENDPOINT && (
                 <>
@@ -209,7 +210,7 @@ function CallController({bandwidthRtcClient, readyMetadata, inCall, setInCall}:
                     <div className='call-controls'>
                         <CallControlButton {...backspaceButtonProps} />
                     </div>
-                    {inCall && (
+                    {connected && (
                         <div className='dtmf-duration-control'>
                             <label htmlFor='dtmf-duration'>Tone Duration (ms)</label>
                             <input
@@ -222,7 +223,7 @@ function CallController({bandwidthRtcClient, readyMetadata, inCall, setInCall}:
                             />
                         </div>
                     )}
-                    {inCall && (
+                    {connected && (
                         <div className='dtmf-sequence-control'>
                             <input
                                 type='text'

From df69b4e9cf2f0064179cce5a3cc583aede736ad4 Mon Sep 17 00:00:00 2001
From: smoghe-bw <smoghe-bw>
Date: Mon, 6 Jul 2026 19:11:59 -0400
Subject: [PATCH 6/8] fix: correct recordingAvailableUrl path in inbound call
 response

---
 server/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/server/index.ts b/server/index.ts
index 461d56a..8feffa6 100644
--- a/server/index.ts
+++ b/server/index.ts
@@ -183,7 +183,7 @@ function processInboundCall(callId: string): string {
         }
         return `<?xml version="1.0" encoding="UTF-8"?>
 <Response>
-    <StartRecording multiChannel="true" recordingAvailableUrl="${CALLBACK_BASE_URL}/recordingAvailable/b_answer"/>
+    <StartRecording multiChannel="true" recordingAvailableUrl="${CALLBACK_BASE_URL}/recordingAvailable"/>
     <SpeakSentence voice="julie">Connecting</SpeakSentence>
     <Connect eventCallbackUrl="${CALLBACK_BASE_URL}/connectstatus">
         <Endpoint>${endpointId}</Endpoint>

From ac84393a472596c55fc6d9b5330dd0a2b780de9f Mon Sep 17 00:00:00 2001
From: smoghe-bw <smoghe-bw>
Date: Mon, 6 Jul 2026 19:14:47 -0400
Subject: [PATCH 7/8] fix: hang up correct endpoint type and validate call
 destination

---
 src/components/CallController.tsx | 42 +++++++++++++++++++++++--------
 1 file changed, 32 insertions(+), 10 deletions(-)

diff --git a/src/components/CallController.tsx b/src/components/CallController.tsx
index d977d12..66c756f 100644
--- a/src/components/CallController.tsx
+++ b/src/components/CallController.tsx
@@ -67,10 +67,6 @@ function NumberInput ({ onChange, value }: {onChange: ChangeEventHandler, value:
 }
 
 
-function isDestinationValid(destination: string): boolean {
-    return true
-}
-
 function CallController({bandwidthRtcClient, readyMetadata, inCall, setInCall, connected}: {bandwidthRtcClient: BandwidthRtc, readyMetadata: ReadyMetadata, inCall: boolean, setInCall: (inCall: boolean) => void, connected: boolean} ) {
     if (!bandwidthRtcClient) {
         throw new Error("webrtcClient is required");
@@ -114,9 +110,17 @@ function CallController({bandwidthRtcClient, readyMetadata, inCall, setInCall, c
     }
     const handleHangUp = async () => {
         setCallStatus('Hanging Up...');
-        // Ensure E.164 format: clean digits and add '+'
-        const e164Number = '+' + destNumber.replace(/[^\d]/g, '');
-        let result = await bandwidthRtcClient.hangupConnection(e164Number, EndpointType.PHONE_NUMBER)
+        // Hang up whichever destination the active call is using. endpointType is
+        // frozen during a call (the selector is disabled), so it still reflects
+        // how this call was dialed.
+        let result;
+        if (endpointType === EndpointType.ENDPOINT) {
+            result = await bandwidthRtcClient.hangupConnection(endpointTarget, EndpointType.ENDPOINT)
+        } else {
+            // Ensure E.164 format: clean digits and add '+'
+            const e164Number = '+' + destNumber.replace(/[^\d]/g, '');
+            result = await bandwidthRtcClient.hangupConnection(e164Number, EndpointType.PHONE_NUMBER)
+        }
         setCallStatus(result.result)
         setInCall(false);
     }
@@ -139,7 +143,14 @@ function CallController({bandwidthRtcClient, readyMetadata, inCall, setInCall, c
     }
 
     const handleDialEndpoint = async () => {
-        await bandwidthRtcClient.requestOutboundConnection(endpointTarget, EndpointType.ENDPOINT)
+        setCallStatus('Calling...');
+        let result = await bandwidthRtcClient.requestOutboundConnection(endpointTarget, EndpointType.ENDPOINT)
+        if (result.accepted) {
+            setCallStatus('Ringing');
+            setInCall(true);
+        } else {
+            setCallStatus('Declined');
+        }
     }
 
     const handleDial = async () => {
@@ -151,6 +162,15 @@ function CallController({bandwidthRtcClient, readyMetadata, inCall, setInCall, c
     }
 
 
+    // A dial is allowed only when the destination for the selected type is filled
+    // in. CALL_ID is not implemented yet, so it can never be dialed.
+    const hasDestination =
+        endpointType === EndpointType.PHONE_NUMBER
+            ? destNumber.replace(/[^\d]/g, '').length > 0
+            : endpointType === EndpointType.ENDPOINT
+                ? endpointTarget.trim().length > 0
+                : false;
+
     const endCallButtonProps = {
         type: 'end-call',
         onClick: handleHangUp,
@@ -161,7 +181,7 @@ function CallController({bandwidthRtcClient, readyMetadata, inCall, setInCall, c
     const startCallButtonProps = {
         type: 'start-call',
         onClick: handleDial,
-        disabled: !isDestinationValid(destNumber) || inCall,
+        disabled: !hasDestination || inCall,
         Icon: CallIcon
     };
 
@@ -196,7 +216,9 @@ function CallController({bandwidthRtcClient, readyMetadata, inCall, setInCall, c
 
             {endpointType == EndpointType.ENDPOINT && (
                 <>
-                <input type="text" disabled={inCall} onChange={(value) => setEndpointTarget(value.target.value)} />
+                {!inCall
+                    ? <input type="text" placeholder="Endpoint ID" value={endpointTarget} onChange={(value) => setEndpointTarget(value.target.value)} />
+                    : <div className='dialed-number'>{endpointTarget}</div>}
                 </>
             )}
             {endpointType == EndpointType.CALL_ID && (

From 6fb3f13c230dff39b1a760b1b81536d33abf68c7 Mon Sep 17 00:00:00 2001
From: smoghe-bw <smoghe-bw>
Date: Mon, 6 Jul 2026 19:54:08 -0400
Subject: [PATCH 8/8] feat: bridge endpoint-to-endpoint calls via Connect and
 add status endpoint

---
 server/index.ts | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/server/index.ts b/server/index.ts
index 8feffa6..dfd44ac 100644
--- a/server/index.ts
+++ b/server/index.ts
@@ -337,6 +337,20 @@ app.post('/callbacks/bandwidth', async (req: Request, res: Response) => {
                 } catch (error: any) {
                     console.error('Error placing outbound call:', error.message);
                 }
+                return res.type('application/xml').send(`<?xml version="1.0" encoding="UTF-8"?><Response/>`);
+            }
+            if (toType === 'ENDPOINT') {
+                // Endpoint-to-endpoint has no PSTN leg to place. We answer the
+                // request with BXML containing a <Connect> verb targeting the
+                // destination endpoint; the callback proxy executes it against the
+                // requesting endpoint's leg, bridging the two WebRTC endpoints.
+                console.log(`Bridging endpoints via <Connect>: ${event.from} -> ${to}`);
+                return res.type('application/xml').send(`<?xml version="1.0" encoding="UTF-8"?>
+<Response>
+    <Connect eventCallbackUrl="${CALLBACK_BASE_URL}/connectstatus">
+        <Endpoint>${to}</Endpoint>
+    </Connect>
+</Response>`);
             }
             return res.type('application/xml').send(`<?xml version="1.0" encoding="UTF-8"?><Response/>`);
     }
@@ -402,6 +416,13 @@ app.post('/calls/status', async (req: Request, res: Response) => {
     }
 });
 
+// POST /connectstatus - Connect bridge lifecycle events (PSTN <Connect> and
+// endpoint-to-endpoint connect). Logged for observability; no BXML response needed.
+app.post('/connectstatus', (req: Request, res: Response) => {
+    console.log('Connect status event:', JSON.stringify(req.body, null, 2));
+    res.sendStatus(200);
+});
+
 // GET /api/endpoint/:endpointId/call-status - Get current PSTN call status for an endpoint
 app.get('/api/endpoint/:endpointId/call-status', (req: Request, res: Response) => {
     const endpointId = req.params.endpointId;