changes.diff

commit 9d8acdcc8f7bb42f95332daf1f5ca4509efdab5f
Author: Anthony Minessale <anthm@signalwire.com>
Date:   Wed Jul 9 17:02:45 2025 +0000

    mark

diff --git a/react/public/manifest.json b/react/public/manifest.json
index 34e81e31c..22f54d971 100644
--- a/react/public/manifest.json
+++ b/react/public/manifest.json
@@ -3,18 +3,27 @@
   "name": "SignalWire Work",
   "icons": [
     {
-      "src": "https://signalwire.com/favicon.svg",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/svg+xml"
+      "src": "/assets/icon/icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any"
     },
     {
-      "src": "https://signalwire.com/favicon.svg",
-      "type": "image/svg+xml",
-      "sizes": "72x72 96x96 128x128 192x192 256x256 512x512"
+      "src": "/assets/icon/icon-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "/assets/icon/icon-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
     }
   ],
   "start_url": ".",
-  "display": "standalone",
+  "display": "fullscreen",
+  "orientation": "any",
   "theme_color": "#000000",
-  "background_color": "#ffffff"
+  "background_color": "#000000"
 }
diff --git a/react/src/common/hooks/index.ts b/react/src/common/hooks/index.ts
index 0dfeedad0..26d46c778 100644
--- a/react/src/common/hooks/index.ts
+++ b/react/src/common/hooks/index.ts
@@ -12,6 +12,7 @@ export * from './useProductLine'
 export * from './useWatchPip'
 export * from './useFade'
 export * from './useMountedRef'
+export * from './useAutoVideoFullscreen'
 export * from './useLabelIconState'
 export * from './useFloater'
 export * from './useDevices'
diff --git a/react/src/components/CallSettings/PictureInPictureButton.tsx b/react/src/components/CallSettings/PictureInPictureButton.tsx
index f29660dab..e256822b7 100644
--- a/react/src/components/CallSettings/PictureInPictureButton.tsx
+++ b/react/src/components/CallSettings/PictureInPictureButton.tsx
@@ -1,6 +1,7 @@
 // @ts-nocheck
-import React, { FC, useEffect, useState } from 'react'
+import React, { FC, useEffect, useState, useRef } from 'react'
 import { useDispatch } from 'react-redux'
+import screenfull from 'screenfull'
 import { tr, Label } from 'src/common/i18n'
 import { TestId } from 'src/constants'
 import {
@@ -93,15 +94,40 @@ export const PictureInPictureButton: FC<PictureInPictureButtonProps> = ({
     return null
   }
 
-  const action = () => {
+  const action = async () => {
     try {
+      // Check if we're in fullscreen and need to exit first
+      const wasFullscreen = screenfull.isEnabled && screenfull.isFullscreen
+      
+      if (wasFullscreen) {
+        await screenfull.exit()
+        // Small delay to let fullscreen exit complete
+        await new Promise(resolve => setTimeout(resolve, 100))
+      }
+
       if (isNormalBrowser) {
         if (document.pictureInPictureElement) {
-          document.exitPictureInPicture()
+          await document.exitPictureInPicture()
           dispatch(callViewActions.setPictureInPicture(false))
         } else {
-          video.requestPictureInPicture()
+          await video.requestPictureInPicture()
           dispatch(callViewActions.setPictureInPicture(true))
+          
+          // If we exited fullscreen for PiP, restore it when PiP closes
+          if (wasFullscreen) {
+            const handleLeavePiP = async () => {
+              video.removeEventListener('leavepictureinpicture', handleLeavePiP)
+              const container = document.querySelector('.call-mcu-area')
+              if (container && screenfull.isEnabled) {
+                try {
+                  await screenfull.request(container)
+                } catch (error) {
+                  console.error('Failed to restore fullscreen after PiP:', error)
+                }
+              }
+            }
+            video.addEventListener('leavepictureinpicture', handleLeavePiP)
+          }
         }
       } else if (isWebKit) {
         const hasPip = video.webkitPresentationMode === 'picture-in-picture'
@@ -109,6 +135,20 @@ export const PictureInPictureButton: FC<PictureInPictureButtonProps> = ({
           hasPip ? 'inline' : 'picture-in-picture'
         )
         dispatch(callViewActions.setPictureInPicture(!hasPip))
+        
+        // Handle WebKit fullscreen restore
+        if (!hasPip && wasFullscreen) {
+          const handleWebkitChange = () => {
+            if (video.webkitPresentationMode === 'inline') {
+              video.removeEventListener('webkitpresentationmodechanged', handleWebkitChange)
+              const container = document.querySelector('.call-mcu-area')
+              if (container && screenfull.isEnabled) {
+                screenfull.request(container).catch(console.error)
+              }
+            }
+          }
+          video.addEventListener('webkitpresentationmodechanged', handleWebkitChange)
+        }
       }
     } catch (error) {
       console.error('PictureInPicture', error)
diff --git a/react/src/index.tsx b/react/src/index.tsx
index 41fa19b01..07a4fc625 100644
--- a/react/src/index.tsx
+++ b/react/src/index.tsx
@@ -89,7 +89,7 @@ ReactDOM.render(
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.
 // Learn more about service workers: https://bit.ly/CRA-PWA
-serviceWorker.unregister()
+serviceWorker.register()
 
 // expose store when run in Cypress
 // @ts-ignore
diff --git a/react/src/pages/Call/Call.tsx b/react/src/pages/Call/Call.tsx
index 104de4711..45ebeace5 100644
--- a/react/src/pages/Call/Call.tsx
+++ b/react/src/pages/Call/Call.tsx
@@ -8,6 +8,7 @@ import { Loader, RoutePath } from 'src/common/constants'
 import { withActiveCall, withLoading } from 'src/common/hoc'
 import { CantinaState } from 'src/common/redux/interfaces'
 import { useFade, useMyZone, useWatchPip } from 'src/common/hooks'
+import { useAutoVideoFullscreen } from 'src/common/hooks/useAutoVideoFullscreen'
 
 import {
   isReceivingVideo,
@@ -71,6 +72,9 @@ const VideoWrapper: FC<VideoWrapperProps> = ({ callId }) => {
   // Watch for MCU PiP window close
   useWatchPip(MCU_ELEMENT_CLASS)
 
+  // Auto-fullscreen container on mobile landscape (with 1 second delay)
+  useAutoVideoFullscreen('.call-mcu-area', true)
+
   let heightClassName = ''
 
   switch (true) {

commit b9bf7a760ef673c977273535b077e466342d7ad2
Author: Anthony Minessale <anthm@signalwire.com>
Date:   Tue Jul 8 22:09:39 2025 +0000

    mark

diff --git a/react/src/common/redux/features/calls/callSaga.ts b/react/src/common/redux/features/calls/callSaga.ts
index 1d09a5cb3..7ec2cbf91 100644
--- a/react/src/common/redux/features/calls/callSaga.ts
+++ b/react/src/common/redux/features/calls/callSaga.ts
@@ -9,7 +9,9 @@ import {
   MediaDevice,
   MixPanelEvent,
 } from '../../../constants'
-import { getDevices } from '../device/deviceSelectors'
+import { getDevices, getCameraPreference, getMicrophonePreference } from '../device/deviceSelectors'
+import { checkCamera, checkMicrophone } from '../../../services/checkDevices'
+import { deviceActions } from '../device/deviceSlice'
 import {
   getName,
   getEmail,
@@ -103,6 +105,33 @@ export function* worker({ type, payload }: PayloadAction<any>): SagaIterator {
       return Relay.stopLocalVideoTrack(payload)
     }
     case restoreLocalVideoTrack.type: {
+      // Revalidate camera device before unmuting video
+      const devices = yield select(getDevices)
+      const cameraPreference = yield select(getCameraPreference)
+      
+      const validatedDevice = yield call(
+        checkCamera, 
+        devices.cameraId, 
+        devices.cameraLabel,
+        cameraPreference
+      )
+      
+      // If device changed, update it first
+      if (validatedDevice && validatedDevice.deviceId !== devices.cameraId) {
+        yield put(deviceActions.cameraChanged({
+          deviceId: validatedDevice.deviceId,
+          label: validatedDevice.label
+        }))
+        
+        // Update the actual device
+        const constraints = {
+          video: {
+            deviceId: { exact: validatedDevice.deviceId }
+          }
+        }
+        yield call(Relay.updateDevices, payload, constraints)
+      }
+      
       const action = {
         callId: payload,
         isSendingVideo: true,
@@ -121,6 +150,33 @@ export function* worker({ type, payload }: PayloadAction<any>): SagaIterator {
       return Relay.stopLocalAudioTrack(payload)
     }
     case restoreLocalAudioTrack.type: {
+      // Revalidate microphone device before unmuting
+      const devices = yield select(getDevices)
+      const microphonePreference = yield select(getMicrophonePreference)
+      
+      const validatedDevice = yield call(
+        checkMicrophone, 
+        devices.microphoneId, 
+        devices.microphoneLabel,
+        microphonePreference
+      )
+      
+      // If device changed, update it first
+      if (validatedDevice && validatedDevice.deviceId !== devices.microphoneId) {
+        yield put(deviceActions.microphoneChanged({
+          deviceId: validatedDevice.deviceId,
+          label: validatedDevice.label
+        }))
+        
+        // Update the actual device
+        const constraints = {
+          audio: {
+            deviceId: { exact: validatedDevice.deviceId }
+          }
+        }
+        yield call(Relay.updateDevices, payload, constraints)
+      }
+      
       const action = {
         callId: payload,
         isSendingAudio: true,
diff --git a/react/src/common/redux/features/device/deviceSelectors.ts b/react/src/common/redux/features/device/deviceSelectors.ts
index 211d3bff8..f8d628026 100644
--- a/react/src/common/redux/features/device/deviceSelectors.ts
+++ b/react/src/common/redux/features/device/deviceSelectors.ts
@@ -84,3 +84,27 @@ export const hasVideoEnabled = ({ device }: CantinaState) => {
 export const hasAudioEnabled = ({ device }: CantinaState) => {
   return device.microphoneId !== MediaDevice.None
 }
+
+export const getCameraPreference = ({ device }: CantinaState) => {
+  return device.cameraPreference
+}
+
+export const getMicrophonePreference = ({ device }: CantinaState) => {
+  return device.microphonePreference
+}
+
+export const getSpeakerPreference = ({ device }: CantinaState) => {
+  return device.speakerPreference
+}
+
+export const getDefaultCameraActualId = ({ device }: CantinaState) => {
+  return device.defaultCameraActualId
+}
+
+export const getDefaultMicrophoneActualId = ({ device }: CantinaState) => {
+  return device.defaultMicrophoneActualId
+}
+
+export const getDefaultSpeakerActualId = ({ device }: CantinaState) => {
+  return device.defaultSpeakerActualId
+}
diff --git a/react/src/common/redux/features/device/deviceSlice.ts b/react/src/common/redux/features/device/deviceSlice.ts
index f4825972d..958fc1163 100644
--- a/react/src/common/redux/features/device/deviceSlice.ts
+++ b/react/src/common/redux/features/device/deviceSlice.ts
@@ -1,12 +1,21 @@
 import { createSlice, createAction, PayloadAction } from '@reduxjs/toolkit'
 import { MediaDevice } from '../../../constants'
-import { DeviceState } from '../../interfaces'
+import { DeviceState, DevicePreference } from '../../interfaces'
 
 type TDevice = {
   deviceId: string
   label?: string
 }
 
+type DeviceWithPreference = TDevice & {
+  preference?: DevicePreference
+}
+
+type ActualDefaultDevice = {
+  deviceType: 'camera' | 'microphone' | 'speaker'
+  actualId: string
+}
+
 // Tracking a separate preview state for devices
 // allows us to only update devices in redux on confirm.
 
@@ -29,17 +38,50 @@ const deviceSlice = createSlice({
   name: 'devices',
   initialState: initialDeviceState,
   reducers: {
-    cameraChanged: (state, { payload }: PayloadAction<TDevice>) => {
+    cameraChanged: (state, { payload }: PayloadAction<DeviceWithPreference>) => {
       state.cameraId = payload.deviceId
       state.cameraLabel = payload.label ?? ''
+      // Update preference if provided
+      if (payload.preference !== undefined) {
+        state.cameraPreference = payload.preference
+      } else {
+        // Auto-create preference based on selection
+        state.cameraPreference = {
+          isDefault: payload.deviceId === MediaDevice.Default,
+          preferredLabel: payload.deviceId !== MediaDevice.Default ? payload.label : undefined,
+          lastSeenId: payload.deviceId !== MediaDevice.Default ? payload.deviceId : undefined
+        }
+      }
     },
-    microphoneChanged: (state, { payload }: PayloadAction<TDevice>) => {
+    microphoneChanged: (state, { payload }: PayloadAction<DeviceWithPreference>) => {
       state.microphoneId = payload.deviceId
       state.microphoneLabel = payload.label ?? ''
+      // Update preference if provided
+      if (payload.preference !== undefined) {
+        state.microphonePreference = payload.preference
+      } else {
+        // Auto-create preference based on selection
+        state.microphonePreference = {
+          isDefault: payload.deviceId === MediaDevice.Default,
+          preferredLabel: payload.deviceId !== MediaDevice.Default ? payload.label : undefined,
+          lastSeenId: payload.deviceId !== MediaDevice.Default ? payload.deviceId : undefined
+        }
+      }
     },
-    speakerChanged: (state, { payload }: PayloadAction<TDevice>) => {
+    speakerChanged: (state, { payload }: PayloadAction<DeviceWithPreference>) => {
       state.speakerId = payload.deviceId
       state.speakerLabel = payload.label ?? ''
+      // Update preference if provided
+      if (payload.preference !== undefined) {
+        state.speakerPreference = payload.preference
+      } else {
+        // Auto-create preference based on selection
+        state.speakerPreference = {
+          isDefault: payload.deviceId === MediaDevice.Default,
+          preferredLabel: payload.deviceId !== MediaDevice.Default ? payload.label : undefined,
+          lastSeenId: payload.deviceId !== MediaDevice.Default ? payload.deviceId : undefined
+        }
+      }
     },
     previewCameraChanged: (state, { payload }: PayloadAction<TDevice>) => {
       state.previewCameraId = payload.deviceId
@@ -100,6 +142,28 @@ const deviceSlice = createSlice({
       state.speakerId = MediaDevice.Default
       state.speakerLabel = 'OS Default'
     },
+    updateActualDefaultDevice: (state, { payload }: PayloadAction<ActualDefaultDevice>) => {
+      const { deviceType, actualId } = payload
+      switch (deviceType) {
+        case 'camera':
+          state.defaultCameraActualId = actualId
+          break
+        case 'microphone':
+          state.defaultMicrophoneActualId = actualId
+          break
+        case 'speaker':
+          state.defaultSpeakerActualId = actualId
+          break
+      }
+    },
+    clearDevicePreferences: (state) => {
+      state.cameraPreference = undefined
+      state.microphonePreference = undefined
+      state.speakerPreference = undefined
+      state.defaultCameraActualId = undefined
+      state.defaultMicrophoneActualId = undefined
+      state.defaultSpeakerActualId = undefined
+    },
   },
 })
 
diff --git a/react/src/common/redux/interfaces.ts b/react/src/common/redux/interfaces.ts
index 02545b334..aa26f513f 100644
--- a/react/src/common/redux/interfaces.ts
+++ b/react/src/common/redux/interfaces.ts
@@ -17,6 +17,12 @@ import {
 import { StringOrNull, Settings, RoomTemplate } from '../rest'
 import type { BannerDisplayOption } from '../services/interfaces'
 
+export interface DevicePreference {
+  isDefault: boolean // true if user selected "OS Default", false for specific device
+  preferredLabel?: string // The label of the specific device they selected
+  lastSeenId?: string // Last known device ID for this label
+}
+
 export interface DeviceState {
   cameraId: string
   cameraLabel?: string
@@ -30,6 +36,14 @@ export interface DeviceState {
   previewSpeakerLabel: string
   speakerId: string
   speakerLabel?: string
+  // Device preferences for recovery
+  cameraPreference?: DevicePreference
+  microphonePreference?: DevicePreference
+  speakerPreference?: DevicePreference
+  // Track actual device when using OS default
+  defaultCameraActualId?: string
+  defaultMicrophoneActualId?: string
+  defaultSpeakerActualId?: string
 }
 
 export interface UiState {
diff --git a/react/src/common/redux/rootSaga.ts b/react/src/common/redux/rootSaga.ts
index f1eab63f2..883f175cd 100644
--- a/react/src/common/redux/rootSaga.ts
+++ b/react/src/common/redux/rootSaga.ts
@@ -14,6 +14,7 @@ import { watchMixPanel } from './features/mixpanel/mixpanelSaga'
 import { watchUpdateRoomTemplateRequests } from './features/roomTemplates/roomTemplatesSaga'
 import { watchRoomList } from './features/roomList/roomListSaga'
 import { watchLayouts } from './features/layouts/layoutsSaga'
+import { watchDeviceChanges } from './features/device/deviceMonitorSaga'
 
 const ROOT_SAGAS = [
   watchBootstrapRequest,
@@ -26,6 +27,7 @@ const ROOT_SAGAS = [
   watchClipeeze,
   watchRoomList,
   watchLayouts,
+  watchDeviceChanges,
 ]
 if (process.env.REACT_APP_HYBRID_MODE === '1') {
   ROOT_SAGAS.push(watchUpdateRoomTemplateRequests, watchUpdateSettingsRequests)
diff --git a/react/src/common/services/checkDevices.ts b/react/src/common/services/checkDevices.ts
index c78794564..7ddb629f9 100644
--- a/react/src/common/services/checkDevices.ts
+++ b/react/src/common/services/checkDevices.ts
@@ -9,6 +9,8 @@ import {
   validateSpeaker,
   getSpeakers,
 } from './relay'
+import { DevicePreference } from '../redux/interfaces'
+import { recoverDevice } from './devicePreferenceManager'
 
 const getDefaultMediaDevice = (deviceLength: number) => {
   return deviceLength > 0
@@ -16,12 +18,35 @@ const getDefaultMediaDevice = (deviceLength: number) => {
     : { deviceId: MediaDevice.None, label: undefined }
 }
 
-export const checkCamera = async (cameraId: string, cameraLabel: string) => {
+export const checkCamera = async (
+  cameraId: string, 
+  cameraLabel: string,
+  preference?: DevicePreference
+) => {
   try {
     const hasPerms = await checkVideoPermissions()
     if (!hasPerms) {
       return { deviceId: MediaDevice.None, label: undefined }
     }
+    
+    // Use the preference manager to recover device
+    const result = await recoverDevice('camera', cameraId, preference)
+    
+    if (result.recovered || result.fallbackUsed) {
+      // Get the label for the recovered device
+      if (result.deviceId === MediaDevice.Default) {
+        return { deviceId: MediaDevice.Default, label: 'OS Default' }
+      }
+      
+      const cameras = await getCameras()
+      const device = cameras.find(d => d.deviceId === result.deviceId)
+      return { 
+        deviceId: result.deviceId, 
+        label: device?.label || result.deviceLabel || cameraLabel 
+      }
+    }
+    
+    // Fallback to original logic if recovery didn't work
     const newDeviceId = await validateCamera(cameraId, cameraLabel)
     if (!newDeviceId) {
       const cameras = await getCameras()
@@ -32,18 +57,39 @@ export const checkCamera = async (cameraId: string, cameraLabel: string) => {
     return { deviceId: cameraId, label: cameraLabel }
   } catch (error) {
     console.error('checkCamera error', error)
+    return { deviceId: MediaDevice.Default, label: 'OS Default' }
   }
 }
 
 export const checkMicrophone = async (
   microphoneId: string,
-  microphoneLabel: string
+  microphoneLabel: string,
+  preference?: DevicePreference
 ) => {
   try {
     const hasPerms = await checkAudioPermissions()
     if (!hasPerms) {
       return { deviceId: MediaDevice.None, label: undefined }
     }
+    
+    // Use the preference manager to recover device
+    const result = await recoverDevice('microphone', microphoneId, preference)
+    
+    if (result.recovered || result.fallbackUsed) {
+      // Get the label for the recovered device
+      if (result.deviceId === MediaDevice.Default) {
+        return { deviceId: MediaDevice.Default, label: 'OS Default' }
+      }
+      
+      const microphones = await getMicrophones()
+      const device = microphones.find(d => d.deviceId === result.deviceId)
+      return { 
+        deviceId: result.deviceId, 
+        label: device?.label || result.deviceLabel || microphoneLabel 
+      }
+    }
+    
+    // Fallback to original logic if recovery didn't work
     const newDeviceId = await validateMicrophone(microphoneId, microphoneLabel)
     if (!newDeviceId) {
       const microphones = await getMicrophones()
@@ -54,15 +100,39 @@ export const checkMicrophone = async (
     return { deviceId: microphoneId, label: microphoneLabel }
   } catch (error) {
     console.error('checkMicrophone error', error)
+    return { deviceId: MediaDevice.Default, label: 'OS Default' }
   }
 }
 
-export const checkSpeaker = async (speakerId: string, speakerLabel: string) => {
+export const checkSpeaker = async (
+  speakerId: string, 
+  speakerLabel: string,
+  preference?: DevicePreference
+) => {
   try {
     const hasPerms = await checkAudioPermissions()
     if (!hasPerms) {
       return { deviceId: MediaDevice.None, label: undefined }
     }
+    
+    // Use the preference manager to recover device
+    const result = await recoverDevice('speaker', speakerId, preference)
+    
+    if (result.recovered || result.fallbackUsed) {
+      // Get the label for the recovered device
+      if (result.deviceId === MediaDevice.Default) {
+        return { deviceId: MediaDevice.Default, label: 'OS Default' }
+      }
+      
+      const speakers = await getSpeakers()
+      const device = speakers.find(d => d.deviceId === result.deviceId)
+      return { 
+        deviceId: result.deviceId, 
+        label: device?.label || result.deviceLabel || speakerLabel 
+      }
+    }
+    
+    // Fallback to original logic if recovery didn't work
     const newDeviceId = await validateSpeaker(speakerId, speakerLabel)
     if (!newDeviceId) {
       const speakers = await getSpeakers()
@@ -73,5 +143,6 @@ export const checkSpeaker = async (speakerId: string, speakerLabel: string) => {
     return { deviceId: speakerId, label: speakerLabel }
   } catch (error) {
     console.error('checkSpeaker error', error)
+    return { deviceId: MediaDevice.Default, label: 'OS Default' }
   }
 }
diff --git a/react/src/theme/call.css b/react/src/theme/call.css
index b849471eb..c49347054 100644
--- a/react/src/theme/call.css
+++ b/react/src/theme/call.css
@@ -201,11 +201,12 @@
 
 video.mcu-video {
   @apply w-full max-w-full h-full max-h-full;
+  object-fit: contain;
 }
 
 video.local-video {
   @apply w-full max-w-full h-full max-h-full;
-  object-fit: fill;
+  object-fit: contain;
 }
 
 .local-video-wrapper video.local-video {

commit cb51651fc40226f6c875f188a520aee3579f4905
Author: Anthony Minessale <anthm@signalwire.com>
Date:   Tue Jul 8 20:06:23 2025 +0000

    mark

diff --git a/.dockerignore b/.dockerignore
index 56063b391..d266d4263 100644
--- a/.dockerignore
+++ b/.dockerignore
@@ -12,3 +12,33 @@ tmp/*
 **/.env.development.local
 **/.env.test.local
 **/.env.production.local
+
+# Build outputs
+react/build
+backend/dist
+*.log
+
+# IDE and OS files
+.vscode
+.idea
+*.swp
+*.swo
+*~
+.DS_Store
+
+# Test files
+**/*.test.ts
+**/*.test.tsx
+**/*.spec.ts
+**/*.spec.tsx
+e2e-tests/
+
+# Documentation
+docs/
+*.md
+!README.md
+
+# Temporary files
+*.tmp
+*.temp
+.cache
diff --git a/docker-dev b/docker-dev
index f37cf6c36..50f2bc58b 100755
--- a/docker-dev
+++ b/docker-dev
@@ -1 +1,7 @@
-docker-compose -f provisioning/docker-compose.yml -f provisioning/docker-compose.dev.yml --project-name signalwire "$@"
+#!/bin/bash
+# Load environment variables from parent .env file
+set -a
+source ../../.env 2>/dev/null || true
+set +a
+
+DOCKER_BUILDKIT=1 COMPOSE_DOCKER_CLI_BUILD=1 docker-compose -f provisioning/docker-compose.yml -f provisioning/docker-compose.dev.yml --project-name signalwire "$@"
\ No newline at end of file
diff --git a/provisioning/docker-compose.dev.yml b/provisioning/docker-compose.dev.yml
index cb64d5188..2308b25ac 100644
--- a/provisioning/docker-compose.dev.yml
+++ b/provisioning/docker-compose.dev.yml
@@ -8,6 +8,8 @@ services:
       context: ../
       dockerfile: provisioning/dockerfiles/react/Dockerfile
       target: build
+      args:
+        FONTAWESOME_NPM_AUTH_TOKEN: ${FONTAWESOME_NPM_AUTH_TOKEN}
     ports:
       - "3000:3000"
       - "5000:5000"
diff --git a/provisioning/dockerfiles/react/Dockerfile b/provisioning/dockerfiles/react/Dockerfile
index 56d395038..6401e608f 100644
--- a/provisioning/dockerfiles/react/Dockerfile
+++ b/provisioning/dockerfiles/react/Dockerfile
@@ -1,3 +1,4 @@
+# syntax=docker/dockerfile:1
 FROM node:14-slim as build
 
 # Prepare APP_HOME
@@ -10,16 +11,27 @@ ENV FONTAWESOME_NPM_AUTH_TOKEN=$FONTAWESOME_NPM_AUTH_TOKEN
 
 RUN npm config set "@fortawesome:registry" https://npm.fontawesome.com/ && npm config set "//npm.fontawesome.com/:_authToken" $FONTAWESOME_NPM_AUTH_TOKEN
 
-# Install deps
+# Install deps - with BuildKit cache mount for faster rebuilds
 COPY package*.json $APP_HOME/
 COPY scripts/* $APP_HOME/scripts/
 COPY react/package*.json $APP_HOME/react/
 COPY backend/package*.json $APP_HOME/backend/
-RUN npm install && npm run setup:all
 
+# Split install and setup for better caching
+RUN --mount=type=cache,target=/root/.npm \
+    npm install
+
+RUN npm run setup:all
+
+# Copy all source files
 COPY . $APP_HOME
+
 # Build components, react and backend
-RUN FONTAWESOME_NPM_AUTH_TOKEN=$FONTAWESOME_NPM_AUTH_TOKEN npm run build:all
+# Need to ensure FontAwesome token is available for the build
+RUN --mount=type=cache,target=/root/.npm \
+    npm config set "@fortawesome:registry" https://npm.fontawesome.com/ && \
+    npm config set "//npm.fontawesome.com/:_authToken" $FONTAWESOME_NPM_AUTH_TOKEN && \
+    npm run build:all
 
 # Start backend and react
 CMD npm run start:web
@@ -37,7 +49,8 @@ WORKDIR $APP_HOME
 # Install only backend deps - express to serve static files!
 COPY backend/package*.json $APP_HOME/backend/
 WORKDIR $APP_HOME/backend
-RUN npm ci --only=production
+RUN --mount=type=cache,target=/root/.npm \
+    npm ci --only=production
 
 # Copy React app and Express backend from the 'build' stage
 COPY --from=build $APP_HOME/react/build $APP_HOME/react/build
@@ -45,4 +58,4 @@ COPY --from=build $APP_HOME/backend/dist $APP_HOME/backend/dist
 
 # Serve the backend
 EXPOSE 5000
-CMD npm start
+CMD npm start
\ No newline at end of file
diff --git a/react/src/common/redux/features/calls/callSlice.ts b/react/src/common/redux/features/calls/callSlice.ts
index 250e49946..18676561c 100644
--- a/react/src/common/redux/features/calls/callSlice.ts
+++ b/react/src/common/redux/features/calls/callSlice.ts
@@ -10,6 +10,7 @@ import {
   CallRequestPayload,
   CallState,
   CanvasInfo,
+  NetworkQuality,
 } from '../../interfaces'
 import { roomLeftAction } from '../rooms/roomsSlice'
 
@@ -36,6 +37,11 @@ type SecondSourcePayload = {
   secondSourceCallId: string
 }
 
+type UpdateNetworkQualityPayload = {
+  callId: string
+  networkQuality: NetworkQuality
+}
+
 export const callHangup: ActionCreatorWithPayload<string> =
   createAction('calls/hangup')
 export const callRequest = createAction<CallRequestPayload>('calls/request')
@@ -192,6 +198,18 @@ const callSlice = createSlice({
     cleanupErrors: (state) => {
       state.errors = {}
     },
+    updateNetworkQuality: (
+      state,
+      { payload }: PayloadAction<UpdateNetworkQualityPayload>
+    ) => {
+      const { callId, networkQuality } = payload
+      if (callId in state.byId) {
+        state.byId[callId] = {
+          ...state.byId[callId],
+          networkQuality,
+        }
+      }
+    },
   },
   extraReducers: (builder) => {
     builder
diff --git a/react/src/common/redux/interfaces.ts b/react/src/common/redux/interfaces.ts
index b9bd6470f..02545b334 100644
--- a/react/src/common/redux/interfaces.ts
+++ b/react/src/common/redux/interfaces.ts
@@ -65,6 +65,30 @@ export interface AuthState {
   temporary?: boolean
 }
 
+export interface NetworkQualityIssue {
+  type: string
+  severity: 'warning' | 'critical'
+  timestamp: number
+  value?: number
+}
+
+export interface NetworkQualityMetrics {
+  timestamp: number
+  packetsReceived: number
+  bytesReceived: number
+  packetsLost: number
+  roundTripTime: number
+  jitter: number
+  availableOutgoingBitrate?: number
+}
+
+export interface NetworkQuality {
+  isHealthy: boolean
+  lastUpdateTime: number
+  activeIssues: NetworkQualityIssue[]
+  metrics?: NetworkQualityMetrics
+}
+
 export interface Call {
   id: string
   roomId?: string
@@ -88,6 +112,7 @@ export interface Call {
   isDirect?: boolean
   remoteCallerName?: string
   secondSourceCallIds?: string[]
+  networkQuality?: NetworkQuality
 }
 
 export interface CallState {
diff --git a/react/src/common/services/relay.ts b/react/src/common/services/relay.ts
index c41294499..4ae145559 100644
--- a/react/src/common/services/relay.ts
+++ b/react/src/common/services/relay.ts
@@ -38,6 +38,7 @@ import { callViewActions, promptViewActions } from '../redux/views'
 import { tr, Label } from '../i18n'
 import * as cantinaManager from './cantinaManager'
 import { cantinaTimer } from './cantinaTimer'
+import { WebRTCStatsMonitor, NetworkIssueType } from './webrtcStatsMonitor'
 
 const VERTO_AUTH_ERROR = -32001
 const RELAY_AUTH_ERROR = -32002
@@ -46,6 +47,9 @@ let relayClient: any = null
 let sagaEmitter: SagaEmit
 const SCOPE_ID = HYBRID_SCOPE_ID
 
+// WebRTC Stats Monitors for active calls
+const statsMonitors = new Map<string, WebRTCStatsMonitor>()
+
 let AppMethods: Partial<IAppMethods> = {}
 export const setAppMethods = (methods: IAppMethods) => {
   AppMethods = methods
@@ -162,6 +166,94 @@ const getExtension = (relayCall: any) => {
   }
 }
 
+const startStatsMonitoring = (relayCall: any) => {
+  try {
+    // Only monitor main calls, not screenshare or second source
+    if (relayCall?.options?.screenShare || relayCall?.options?.secondSource) {
+      return
+    }
+
+    // Check if we have access to the peer connection
+    if (!relayCall.peer || !relayCall.peer.instance) {
+      console.debug('Peer connection not ready for stats monitoring')
+      return
+    }
+
+    // Stop existing monitor if any
+    if (statsMonitors.has(relayCall.id)) {
+      statsMonitors.get(relayCall.id)?.stop()
+    }
+
+    // Create new monitor with issue callback
+    const monitor = new WebRTCStatsMonitor((issues) => {
+      handleNetworkIssues(relayCall.id, issues)
+    })
+
+    // Start monitoring the peer connection
+    monitor.start(relayCall.peer.instance)
+    statsMonitors.set(relayCall.id, monitor)
+
+    console.debug(`Started WebRTC stats monitoring for call ${relayCall.id}`)
+  } catch (error) {
+    console.error('Failed to start stats monitoring:', error)
+  }
+}
+
+const stopStatsMonitoring = (callId: string) => {
+  const monitor = statsMonitors.get(callId)
+  if (monitor) {
+    monitor.stop()
+    statsMonitors.delete(callId)
+    console.debug(`Stopped WebRTC stats monitoring for call ${callId}`)
+  }
+}
+
+const handleNetworkIssues = (callId: string, issues: any[]) => {
+  // Count critical issues
+  const criticalIssues = issues.filter(issue => issue.severity === 'critical')
+  const warningIssues = issues.filter(issue => issue.severity === 'warning')
+
+  // Check if this is an audio-only call
+  const monitor = statsMonitors.get(callId)
+  const isAudioOnly = monitor && monitor.hasAudioTrack() && !monitor.hasVideoTrack()
+
+  // Update Redux with network quality state
+  const networkQuality = {
+    isHealthy: criticalIssues.length === 0,
+    lastUpdateTime: Date.now(),
+    activeIssues: issues,
+    metrics: monitor?.getMetricsHistory().slice(-1)[0],
+  }
+
+  dispatchAction(callActions.updateNetworkQuality({ callId, networkQuality }))
+
+  // Implement the three-tier response system
+  if (criticalIssues.length >= 3 || 
+      (criticalIssues.length >= 1 && warningIssues.length >= 2)) {
+    // ICE Restart tier - multiple critical issues or mix of critical and warnings
+    console.warn(`Network quality critical for call ${callId}, triggering ICE restart`, issues)
+    
+    // Check if no packets received for extended time
+    const noPacketsIssue = issues.find(i => i.type === NetworkIssueType.NO_INBOUND_PACKETS)
+    if (noPacketsIssue && noPacketsIssue.value > 3000) {
+      // More than 3 seconds without packets, do reinvite
+      doReinviteWithRelayOnly(callId)
+      toastWarn('Network connection issue detected. Reconnecting...')
+    }
+  } else if (criticalIssues.length >= 1 || warningIssues.length >= 2) {
+    // Recovery tier - attempt lighter recovery
+    console.warn(`Network quality degraded for call ${callId}, attempting recovery`, issues)
+    
+    // Only request keyframe if we have video
+    if (!isAudioOnly) {
+      askVideoKeyFrame(callId)
+    }
+  } else if (warningIssues.length >= 1) {
+    // Warning tier - just log and monitor
+    console.debug(`Network quality warning for call ${callId}`, issues)
+  }
+}
+
 const callUpdateHandler = (relayCall: any, allowRecovering = false) => {
   // console.log('Relay callUpdate', relayCall.id, relayCall.state)
   /**
@@ -237,6 +329,8 @@ const callUpdateHandler = (relayCall: any, allowRecovering = false) => {
       return dispatchAction(callActions.update(call))
     case CallState.Active:
       stopAudio(SoundFile.Ringer)
+      // Start WebRTC stats monitoring when call becomes active
+      startStatsMonitoring(relayCall)
       return dispatchAction(callActions.update(call))
     case CallState.Hangup:
       stopAudio(SoundFile.Ringer)
@@ -246,6 +340,8 @@ const callUpdateHandler = (relayCall: any, allowRecovering = false) => {
       break
     case CallState.Destroy:
       stopAudio(SoundFile.Ringer)
+      // Stop WebRTC stats monitoring when call is destroyed
+      stopStatsMonitoring(relayCall.id)
       dispatchAction(callActions.destroy(call))
       return
     default: