diff --git a/app/components/AudioStream.tsx b/app/components/AudioStream.tsx
index 9598319..deddeb9 100644
--- a/app/components/AudioStream.tsx
+++ b/app/components/AudioStream.tsx
@@ -1,20 +1,104 @@
 import type { FC } from 'react'
-import { useEffect, useRef } from 'react'
+import { useEffect, useMemo, useRef } from 'react'
+import { of } from 'rxjs'
+import { useSubscribedState } from '~/hooks/rxjsHooks'
+import { useRoomContext } from '~/hooks/useRoomContext'
 
 interface AudioStreamProps {
-	mediaStreamTrack: MediaStreamTrack
+	tracksToPull: string[]
+	onTrackAdded: (id: string, track: MediaStreamTrack) => void
+	onTrackRemoved: (id: string, track: MediaStreamTrack) => void
 }
 
-export const AudioStream: FC<AudioStreamProps> = ({ mediaStreamTrack }) => {
+export const AudioStream: FC<AudioStreamProps> = ({
+	tracksToPull,
+	onTrackAdded,
+	onTrackRemoved,
+}) => {
+	const mediaStreamRef = useRef(new MediaStream())
 	const ref = useRef<HTMLAudioElement>(null)
 
 	useEffect(() => {
 		const audio = ref.current
 		if (!audio) return
-		const mediaStream = new MediaStream()
-		mediaStream.addTrack(mediaStreamTrack)
+		const mediaStream = mediaStreamRef.current
 		audio.srcObject = mediaStream
-	}, [mediaStreamTrack])
+	}, [])
 
-	return <audio ref={ref} autoPlay />
+	const resetSrcObject = () => {
+		const audio = ref.current
+		const mediaStream = mediaStreamRef.current
+		if (!audio || !mediaStream) return
+		// need to set srcObject again in Chrome and call play() again for Safari
+		// https://www.youtube.com/live/Tkx3OGrwVk8?si=K--P_AzNnAGrjraV&t=2533
+		// calling play() this way to make Chrome happy otherwise it throws an error
+		audio.addEventListener('canplay', () => audio.play(), { once: true })
+		audio.srcObject = mediaStream
+	}
+
+	return (
+		<>
+			<audio ref={ref} autoPlay />
+			{tracksToPull.map((track) => (
+				<AudioTrack
+					key={track}
+					track={track}
+					mediaStream={mediaStreamRef.current}
+					onTrackAdded={(metadata, track) => {
+						onTrackAdded(metadata, track)
+						resetSrcObject()
+					}}
+					onTrackRemoved={(metadata, track) => {
+						onTrackRemoved(metadata, track)
+						resetSrcObject()
+					}}
+				/>
+			))}
+		</>
+	)
+}
+
+function AudioTrack({
+	mediaStream,
+	track,
+	onTrackAdded,
+	onTrackRemoved,
+}: {
+	mediaStream: MediaStream
+	track: string
+	onTrackAdded: (id: string, track: MediaStreamTrack) => void
+	onTrackRemoved: (id: string, track: MediaStreamTrack) => void
+}) {
+	const onTrackAddedRef = useRef(onTrackAdded)
+	onTrackAddedRef.current = onTrackAdded
+	const onTrackRemovedRef = useRef(onTrackRemoved)
+	onTrackRemovedRef.current = onTrackRemoved
+
+	const { peer } = useRoomContext()
+	const trackObject = useMemo(() => {
+		const [sessionId, trackName] = track.split('/')
+		return {
+			sessionId,
+			trackName,
+			location: 'remote',
+		} as const
+	}, [track])
+
+	const pulledTrack$ = useMemo(() => {
+		return peer.pullTrack(of(trackObject))
+	}, [peer, trackObject])
+
+	const audioTrack = useSubscribedState(pulledTrack$)
+
+	useEffect(() => {
+		if (!audioTrack) return
+		mediaStream.addTrack(audioTrack)
+		onTrackAddedRef.current(track, audioTrack)
+		return () => {
+			mediaStream.removeTrack(audioTrack)
+			onTrackRemovedRef.current(track, audioTrack)
+		}
+	}, [audioTrack])
+
+	return null
 }
diff --git a/app/components/HighPacketLossWarningsToast.tsx b/app/components/HighPacketLossWarningsToast.tsx
index df16624..ba7dfd1 100644
--- a/app/components/HighPacketLossWarningsToast.tsx
+++ b/app/components/HighPacketLossWarningsToast.tsx
@@ -1,38 +1,34 @@
-import { useEffect, useState } from 'react'
+import { useMemo } from 'react'
 import Toast, { Root } from '~/components/Toast'
+import { useSubscribedState } from '~/hooks/rxjsHooks'
 import { useConditionForAtLeast } from '~/hooks/useConditionForAtLeast'
-import type Peer from '~/utils/Peer.client'
+import { getPacketLossStats$ } from '~/utils/rxjs/getPacketLossStats$'
 import { useRoomContext } from '../hooks/useRoomContext'
 import { Icon } from './Icon/Icon'
 
-export function usePacketLossInformation(): Partial<
-	ReturnType<typeof Peer.prototype.getDebugInfo>
-> {
+function useStats() {
 	const { peer } = useRoomContext()
-	const [debugInfo, setDebugInfo] = useState(peer?.getDebugInfo())
-
-	useEffect(() => {
-		const interval = setInterval(() => {
-			setDebugInfo(peer?.getDebugInfo())
-		}, 1000)
-
-		return () => {
-			clearInterval(interval)
-		}
-	}, [peer])
+	const stats$ = useMemo(
+		() => getPacketLossStats$(peer.peerConnection$),
+		[peer.peerConnection$]
+	)
+	const stats = useSubscribedState(stats$, {
+		inboundPacketLossPercentage: 0,
+		outboundPacketLossPercentage: 0,
+	})
 
-	return debugInfo ?? {}
+	return stats
 }
 
 export function HighPacketLossWarningsToast() {
 	const { inboundPacketLossPercentage, outboundPacketLossPercentage } =
-		usePacketLossInformation()
+		useStats()
 
 	const hasIssues = useConditionForAtLeast(
 		inboundPacketLossPercentage !== undefined &&
 			outboundPacketLossPercentage !== undefined &&
-			inboundPacketLossPercentage > 0.01 &&
-			outboundPacketLossPercentage > 0.01,
+			(inboundPacketLossPercentage > 0.01 ||
+				outboundPacketLossPercentage > 0.01),
 		3000
 	)
 
diff --git a/app/components/Participant.tsx b/app/components/Participant.tsx
index d606cad..074726c 100644
--- a/app/components/Participant.tsx
+++ b/app/components/Participant.tsx
@@ -49,7 +49,7 @@ export const Participant = forwardRef<
 		useDeadPulledTrackMonitor(
 			user.tracks.video,
 			user.transceiverSessionId,
-			user.tracks.videoEnabled,
+			!!user.tracks.video,
 			videoTrack,
 			user.name
 		)
@@ -57,7 +57,7 @@ export const Participant = forwardRef<
 		useDeadPulledTrackMonitor(
 			user.tracks.audio,
 			user.transceiverSessionId,
-			user.tracks.audioEnabled,
+			!!user.tracks.audio,
 			audioTrack,
 			user.name
 		)
diff --git a/app/components/PullAudioTracks.tsx b/app/components/PullAudioTracks.tsx
index 647a989..9db4fbc 100644
--- a/app/components/PullAudioTracks.tsx
+++ b/app/components/PullAudioTracks.tsx
@@ -1,6 +1,5 @@
 import type { FC, ReactNode } from 'react'
-import { createContext, useContext } from 'react'
-import usePulledTracks from '~/hooks/usePulledTracks'
+import { createContext, useContext, useState } from 'react'
 import { AudioStream } from './AudioStream'
 
 interface PullAudioTracksProps {
@@ -14,13 +13,23 @@ export const PullAudioTracks: FC<PullAudioTracksProps> = ({
 	audioTracks,
 	children,
 }) => {
-	const audioTrackMap = usePulledTracks(audioTracks)
+	const [audioTrackMap, setAudioTrackMap] = useState<
+		Record<string, MediaStreamTrack>
+	>({})
 
 	return (
 		<AudioTrackContext.Provider value={audioTrackMap}>
-			{Object.entries(audioTrackMap).map(([trackKey, mediaStreamTrack]) => (
-				<AudioStream key={trackKey} mediaStreamTrack={mediaStreamTrack} />
-			))}
+			<AudioStream
+				tracksToPull={audioTracks}
+				onTrackAdded={(id, track) =>
+					setAudioTrackMap({ ...audioTrackMap, [id]: track })
+				}
+				onTrackRemoved={(id) => {
+					const update = { ...audioTrackMap }
+					delete update[id]
+					setAudioTrackMap(update)
+				}}
+			/>
 			{children}
 		</AudioTrackContext.Provider>
 	)
diff --git a/app/components/PullVideoTrack.tsx b/app/components/PullVideoTrack.tsx
index 573e726..061a3b4 100644
--- a/app/components/PullVideoTrack.tsx
+++ b/app/components/PullVideoTrack.tsx
@@ -1,48 +1,47 @@
 import type { ReactElement } from 'react'
-import { useEffect, useState } from 'react'
+import { useMemo } from 'react'
+import { of, switchMap } from 'rxjs'
+import { useStateObservable, useSubscribedState } from '~/hooks/rxjsHooks'
 import { useRoomContext } from '~/hooks/useRoomContext'
-import keepTrying from '~/utils/keepTrying'
+import type { TrackObject } from '~/utils/callsTypes'
 import { usePulledAudioTrack } from './PullAudioTracks'
 
 interface PullTracksProps {
-	audio?: string
 	video?: string
+	audio?: string
 	children: (props: {
-		audioTrack?: MediaStreamTrack
 		videoTrack?: MediaStreamTrack
+		audioTrack?: MediaStreamTrack
 	}) => ReactElement
 }
 
 export const PullVideoTrack = ({ video, audio, children }: PullTracksProps) => {
 	const { peer } = useRoomContext()
-
-	const [videoTrack, setVideoTrack] = useState<MediaStreamTrack>()
 	const audioTrack = usePulledAudioTrack(audio)
 
-	useEffect(() => {
-		if (!video || !peer) return
-		let mounted = true
-		const cancel = keepTrying(() => {
-			const [sessionId, trackName] = video.split('/')
-			// backward compatibility: ResourceID -> TrackObject
-			return peer
-				.pullTrack({ location: 'remote', sessionId, trackName })
-				.then((track) => {
-					if (mounted) setVideoTrack(track)
-				})
-		})
-		return () => {
-			cancel()
-			mounted = false
-		}
-	}, [peer, video])
-
-	useEffect(() => {
-		if (videoTrack && peer)
-			return () => {
-				peer.closeTrack(videoTrack)
-			}
-	}, [videoTrack, peer])
+	const [sessionId, trackName] = video?.split('/') ?? []
+	const trackObject = useMemo(
+		() =>
+			sessionId && trackName
+				? ({
+						trackName,
+						sessionId,
+						location: 'remote',
+					} satisfies TrackObject)
+				: undefined,
+		[sessionId, trackName]
+	)
 
+	const trackObject$ = useStateObservable(trackObject)
+	const pulledTrack$ = useMemo(
+		() =>
+			trackObject$.pipe(
+				switchMap((track) =>
+					track ? peer.pullTrack(of(track)) : of(undefined)
+				)
+			),
+		[peer, trackObject$]
+	)
+	const videoTrack = useSubscribedState(pulledTrack$)
 	return children({ videoTrack, audioTrack })
 }
diff --git a/app/components/ReportBugDialog.tsx b/app/components/ReportBugDialog.tsx
index f3ea89a..109826d 100644
--- a/app/components/ReportBugDialog.tsx
+++ b/app/components/ReportBugDialog.tsx
@@ -32,18 +32,16 @@ export const ReportBugDialog: FC<ReportBugDialogProps> = ({ onOpenChange }) => {
 	)
 }
 
-const ReportBugForm: FC = () => {
+const ReportBugForm: FC<{}> = () => {
 	const { Form, data, state } = useFetcher()
-	const { room, peerDebugInfo } = useRoomContext()
+	const { room, roomHistory } = useRoomContext()
 	const { roomName } = useParams()
-
-	const { roomState, identity } = room
+	const { identity } = room
 
 	const info: BugReportInfo = {
-		roomState,
 		roomName,
 		identity,
-		peerDebugInfo,
+		roomHistory,
 		url: typeof location !== 'undefined' ? location.href : undefined,
 	}
 
diff --git a/app/components/VideoInputSelector.tsx b/app/components/VideoInputSelector.tsx
index 539d206..6c8ed35 100644
--- a/app/components/VideoInputSelector.tsx
+++ b/app/components/VideoInputSelector.tsx
@@ -1,14 +1,26 @@
-import type { FC } from 'react'
+import { useMemo, type FC } from 'react'
+import { useSubscribedState } from '~/hooks/rxjsHooks'
 import useMediaDevices from '~/hooks/useMediaDevices'
 import { useRoomContext } from '~/hooks/useRoomContext'
 import { errorMessageMap } from '~/hooks/useUserMedia'
+import { getSortedDeviceListObservable } from '~/utils/rxjs/getDeviceListObservable'
 import { Option, Select } from './Select'
 
 export const VideoInputSelector: FC<{ id?: string }> = ({ id }) => {
 	const videoInputDevices = useMediaDevices((d) => d.kind === 'videoinput')
+	const sortedDeviceListObservable$ = useMemo(
+		() => getSortedDeviceListObservable(),
+		[]
+	)
+	const sortedDeviceList = useSubscribedState(sortedDeviceListObservable$, [])
 
 	const {
-		userMedia: { videoUnavailableReason, videoDeviceId, setVideoDeviceId },
+		userMedia: {
+			videoUnavailableReason,
+			videoDeviceId,
+			setVideoDeviceId,
+			videoEnabled,
+		},
 	} = useRoomContext()
 
 	if (videoUnavailableReason) {
@@ -25,9 +37,17 @@ export const VideoInputSelector: FC<{ id?: string }> = ({ id }) => {
 		)
 	}
 
+	// we can only rely on videoDeviceId when the webcam is enabled because
+	// when it's not, the device id is being pulled from our black canvas track
+	// so we will instead fall back to show the user's preferred webcam that
+	// we would _try_ to acquire the next time they enable their webcam.
+	const shownDeviceId = videoEnabled
+		? videoDeviceId
+		: sortedDeviceList.find((d) => d.kind === 'videoinput')?.deviceId
+
 	return (
 		<div className="max-w-[40ch]">
-			<Select value={videoDeviceId} onValueChange={setVideoDeviceId} id={id}>
+			<Select value={shownDeviceId} onValueChange={setVideoDeviceId} id={id}>
 				{videoInputDevices.map((d) => (
 					<Option key={d.deviceId} value={d.deviceId}>
 						{d.label}
diff --git a/app/hooks/useBroadcastStatus.ts b/app/hooks/useBroadcastStatus.ts
index 06b6c74..6c118b0 100644
--- a/app/hooks/useBroadcastStatus.ts
+++ b/app/hooks/useBroadcastStatus.ts
@@ -1,15 +1,16 @@
 import { useEffect } from 'react'
 import { useUnmount } from 'react-use'
 import type { ClientMessage, User } from '~/types/Messages'
-import type Peer from '~/utils/Peer.client'
 
 import type PartySocket from 'partysocket'
+import type { RxjsPeer } from '~/utils/rxjs/RxjsPeer.client'
+import { useSubscribedState } from './rxjsHooks'
 import type { RoomContextType } from './useRoomContext'
 import type { UserMedia } from './useUserMedia'
 
 interface Config {
 	userMedia: UserMedia
-	peer: Peer | null
+	peer: RxjsPeer
 	identity?: User
 	websocket: PartySocket
 	pushedTracks: RoomContextType['pushedTracks']
@@ -28,18 +29,19 @@ export default function useBroadcastStatus({
 }: Config) {
 	const { audioEnabled, videoEnabled, screenShareEnabled } = userMedia
 	const { audio, video, screenshare } = pushedTracks
+	const { sessionId } = useSubscribedState(peer.session$) ?? {}
 
 	const id = identity?.id
 	const name = identity?.name
 	useEffect(() => {
 		if (id && name) {
-			const user = {
+			const user: User = {
 				id,
 				name,
 				joined: true,
 				raisedHand,
 				speaking,
-				transceiverSessionId: peer?.sessionId,
+				transceiverSessionId: sessionId,
 				tracks: {
 					audioEnabled,
 					videoEnabled,
@@ -71,7 +73,7 @@ export default function useBroadcastStatus({
 		id,
 		name,
 		websocket,
-		peer?.sessionId,
+		sessionId,
 		audio,
 		video,
 		screenshare,
@@ -93,7 +95,7 @@ export default function useBroadcastStatus({
 						joined: false,
 						raisedHand,
 						speaking,
-						transceiverSessionId: peer?.sessionId,
+						transceiverSessionId: sessionId,
 						tracks: {},
 					},
 				} satisfies ClientMessage)
diff --git a/app/hooks/useDeadPulledTrackMonitor.tsx b/app/hooks/useDeadPulledTrackMonitor.tsx
index d85d878..b733470 100644
--- a/app/hooks/useDeadPulledTrackMonitor.tsx
+++ b/app/hooks/useDeadPulledTrackMonitor.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useRef, useState } from 'react'
 import type { DeadTrackInfo } from '~/routes/api.deadTrack'
 import populateTraceLink from '~/utils/populateTraceLink'
+import { useSubscribedState } from './rxjsHooks'
 import { useRoomContext } from './useRoomContext'
 
 export function useDeadPulledTrackMonitor(
@@ -12,12 +13,14 @@ export function useDeadPulledTrackMonitor(
 ) {
 	const [deadTrack, setDeadTrack] = useState(false)
 	const { peer, traceLink, room, feedbackEnabled } = useRoomContext()
+	const peerConnection = useSubscribedState(peer.peerConnection$)
 	const timeoutRef = useRef(-1)
 
 	useEffect(() => {
-		if (!peer || !track || !enabled || deadTrack || !feedbackEnabled) return
+		if (!peerConnection || !track || !enabled || deadTrack || !feedbackEnabled)
+			return
 		timeoutRef.current = window.setTimeout(() => {
-			peer.pc.getStats(track).then((report) => {
+			peerConnection.getStats(track).then((report) => {
 				// this means component has unmounted
 				if (timeoutRef.current === -1) return
 				const stat = [...report.values()].find(
@@ -37,8 +40,8 @@ export function useDeadPulledTrackMonitor(
 	}, [deadTrack, enabled, feedbackEnabled, peer, track])
 
 	useEffect(() => {
-		if (!peer?.sessionId || !deadTrack || !feedbackEnabled) return
-		const pullSessionTrace = populateTraceLink(peer.sessionId, traceLink)
+		if (!sessionId || !deadTrack || !feedbackEnabled) return
+		const pullSessionTrace = populateTraceLink(sessionId, traceLink)
 		const [pushedSessionId, trackId] = trackInfo?.split('/') ?? []
 		const pushedSessionTrace = populateTraceLink(pushedSessionId, traceLink)
 
@@ -57,9 +60,10 @@ export function useDeadPulledTrackMonitor(
 		}
 	}, [
 		deadTrack,
+		peerConnection,
 		feedbackEnabled,
 		name,
-		peer?.sessionId,
+		sessionId,
 		room.identity?.name,
 		sessionId,
 		traceLink,
diff --git a/app/hooks/usePeerConnection.tsx b/app/hooks/usePeerConnection.tsx
index 68c29f0..78c628d 100644
--- a/app/hooks/usePeerConnection.tsx
+++ b/app/hooks/usePeerConnection.tsx
@@ -1,42 +1,36 @@
-import { useEffect, useState } from 'react'
-import type { PeerDebugInfo } from '~/utils/Peer.client'
-import Peer from '~/utils/Peer.client'
+import { useEffect, useMemo, useState } from 'react'
+import { RxjsPeer, type PeerConfig } from '~/utils/rxjs/RxjsPeer.client'
+import { useSubscribedState } from './rxjsHooks'
 import { useStablePojo } from './useStablePojo'
 
-export const usePeerConnection = (config: {
-	apiExtraParams?: string
-	iceServers?: RTCIceServer[]
-}) => {
-	const [peer, setPeer] = useState<Peer | null>(null)
-	const [debugInfo, setDebugInfo] = useState<PeerDebugInfo>()
+export const usePeerConnection = (config: PeerConfig) => {
+	const stableConfig = useStablePojo(config)
+	const peer = useMemo(() => new RxjsPeer(stableConfig), [stableConfig])
+	const peerConnection = useSubscribedState(peer.peerConnection$)
+
 	const [iceConnectionState, setIceConnectionState] =
 		useState<RTCIceConnectionState>('new')
 
-	const stableConfig = useStablePojo(config)
-
 	useEffect(() => {
-		const p = new Peer(stableConfig)
-		setPeer(p)
-		const debugHandler = () => {
-			setDebugInfo(p.getDebugInfo())
-		}
+		if (!peerConnection) return
+		setIceConnectionState(peerConnection.iceConnectionState)
 		const iceConnectionStateChangeHandler = () => {
-			setIceConnectionState(p.pc.iceConnectionState)
+			setIceConnectionState(peerConnection.iceConnectionState)
 		}
-		p.pc.addEventListener(
+		peerConnection.addEventListener(
 			'iceconnectionstatechange',
 			iceConnectionStateChangeHandler
 		)
-		p.history.addEventListener('logentry', debugHandler)
 		return () => {
-			p.history.removeEventListener('logentry', debugHandler)
-			p.pc.removeEventListener(
+			peerConnection.removeEventListener(
 				'connectionstatechange',
 				iceConnectionStateChangeHandler
 			)
-			p.destroy()
 		}
-	}, [stableConfig])
+	}, [peerConnection])
 
-	return { peer, debugInfo, iceConnectionState }
+	return {
+		peer,
+		iceConnectionState,
+	}
 }
diff --git a/app/hooks/usePulledTracks.ts b/app/hooks/usePulledTracks.ts
deleted file mode 100644
index c81f6aa..0000000
--- a/app/hooks/usePulledTracks.ts
+++ /dev/null
@@ -1,85 +0,0 @@
-import { useEffect, useRef, useState } from 'react'
-import { useUnmount } from 'react-use'
-import type Peer from '~/utils/Peer.client'
-import { useRoomContext } from './useRoomContext'
-
-function pullTrack(peer: Peer, track: string) {
-	const [sessionId, trackName] = track.split('/')
-	return peer.pullTrack({
-		location: 'remote',
-		sessionId,
-		trackName,
-	})
-}
-
-export default function usePulledTracks(
-	tracksToPull: string[]
-): Record<string, MediaStreamTrack> {
-	const { peer } = useRoomContext()
-	// using useState here because we want React to re-render here
-	// when there is a change
-	const [pulledTrackRecord, setPulledTrackRecord] = useState<
-		Record<string, MediaStreamTrack>
-	>({})
-	// using useRef here because we don't want React
-	// to re-render when these change
-	const pendingTracksRef = useRef<Record<string, Promise<MediaStreamTrack>>>({})
-	const tracksToPullRef = useRef(tracksToPull)
-	tracksToPullRef.current = tracksToPull
-	const mountedRef = useRef(true)
-
-	useUnmount(() => {
-		mountedRef.current = false
-	})
-
-	useEffect(() => {
-		if (!peer) return
-		tracksToPull.forEach((track) => {
-			const alreadyPulled =
-				pulledTrackRecord[track] ||
-				pendingTracksRef.current[track] !== undefined
-			if (alreadyPulled) return
-			const pending = pullTrack(peer, track).then((mediaStreamTrack) => {
-				if (!mountedRef.current) return mediaStreamTrack
-				if (tracksToPullRef.current.includes(track)) {
-					setPulledTrackRecord((current) => ({
-						...current,
-						[track]: mediaStreamTrack,
-					}))
-					delete pendingTracksRef.current[track]
-				} else {
-					peer.closeTrack(mediaStreamTrack)
-				}
-				return mediaStreamTrack
-			})
-			pendingTracksRef.current[track] = pending
-		})
-
-		const trackSet = new Set(tracksToPull)
-		Object.entries(pulledTrackRecord).forEach(([key, value]) => {
-			if (trackSet.has(key)) {
-				return
-			}
-			peer.closeTrack(value)
-			setPulledTrackRecord((current) => {
-				const clone = { ...current }
-				delete clone[key]
-				return clone
-			})
-		})
-	}, [peer, pulledTrackRecord, tracksToPull])
-
-	useEffect(() => {
-		if (!peer) return
-		const pendingTracks = pendingTracksRef.current
-		return () => {
-			if (mountedRef.current) return
-			Object.values(pendingTracks).forEach((promise) => {
-				promise.then((t) => peer.closeTrack(t))
-			})
-			Object.values(pulledTrackRecord).forEach((t) => peer.closeTrack(t))
-		}
-	}, [peer, pulledTrackRecord])
-
-	return pulledTrackRecord
-}
diff --git a/app/hooks/usePushedTrack.ts b/app/hooks/usePushedTrack.ts
deleted file mode 100644
index 40b695f..0000000
--- a/app/hooks/usePushedTrack.ts
+++ /dev/null
@@ -1,66 +0,0 @@
-import { useEffect, useState } from 'react'
-import keepTrying from '~/utils/keepTrying'
-import type Peer from '~/utils/Peer.client'
-
-export default function usePushedTrack(
-	peer: Peer | null,
-	mediaStreamTrack?: MediaStreamTrack,
-	{
-		priority,
-		maxBitrate,
-		maxFramerate,
-		scaleResolutionDownBy,
-	}: RTCRtpEncodingParameters = {}
-) {
-	const [transceiverId, setTransceiverId] = useState<string>()
-	const [pending, setPending] = useState(false)
-
-	useEffect(() => {
-		if (pending || !peer || !mediaStreamTrack) return
-		// important that we don't call pushTrack more
-		// than once here so we'll set state. If the media
-		// stream changes while this is pending we'll replace
-		// it once it is done
-		if (transceiverId === undefined) {
-			setPending(true)
-			keepTrying(() =>
-				peer
-					.pushTrack(mediaStreamTrack.id, mediaStreamTrack)
-					.then((trackObject) => {
-						// backwards compatibility: trackObject -> ResourceID
-						let resourceID = `${trackObject.sessionId}/${trackObject.trackName}`
-						setTransceiverId(resourceID)
-						setPending(false)
-					})
-			)
-		} else {
-			peer.replaceTrack(transceiverId, mediaStreamTrack)
-		}
-	}, [mediaStreamTrack, peer, pending, transceiverId])
-
-	useEffect(() => {
-		if (!mediaStreamTrack || !transceiverId || !peer) {
-			return
-		}
-
-		const encodings = [
-			{ maxBitrate, maxFramerate, priority, scaleResolutionDownBy },
-		]
-
-		peer.configureSender(transceiverId, mediaStreamTrack, {
-			encodings,
-		})
-	}, [
-		maxBitrate,
-		maxFramerate,
-		mediaStreamTrack,
-		peer,
-		priority,
-		scaleResolutionDownBy,
-		transceiverId,
-	])
-
-	// TODO: need to sort out how to close this when unmounting
-
-	return transceiverId
-}
diff --git a/app/hooks/useRoomContext.ts b/app/hooks/useRoomContext.ts
index 7252b03..9841de0 100644
--- a/app/hooks/useRoomContext.ts
+++ b/app/hooks/useRoomContext.ts
@@ -1,9 +1,9 @@
 import { useOutletContext } from '@remix-run/react'
 import type { Dispatch, SetStateAction } from 'react'
 import type { UserMedia } from '~/hooks/useUserMedia'
-import type Peer from '~/utils/Peer.client'
-import type { PeerDebugInfo } from '~/utils/Peer.client'
+import type { RxjsPeer } from '~/utils/rxjs/RxjsPeer.client'
 import type useRoom from './useRoom'
+import type { useRoomHistory } from './useRoomHistory'
 
 export type RoomContextType = {
 	traceLink?: string
@@ -12,10 +12,10 @@ export type RoomContextType = {
 	joined: boolean
 	setJoined: Dispatch<SetStateAction<boolean>>
 	userMedia: UserMedia
-	peer: Peer | null
-	peerDebugInfo?: PeerDebugInfo
+	peer: RxjsPeer
 	iceConnectionState: RTCIceConnectionState
 	room: ReturnType<typeof useRoom>
+	roomHistory: ReturnType<typeof useRoomHistory>
 	pushedTracks: {
 		video?: string
 		audio?: string
diff --git a/app/hooks/useRoomHistory.ts b/app/hooks/useRoomHistory.ts
new file mode 100644
index 0000000..874a3cb
--- /dev/null
+++ b/app/hooks/useRoomHistory.ts
@@ -0,0 +1,61 @@
+import { useEffect, useMemo, useRef, useState } from 'react'
+import type { ApiHistoryEntry, RxjsPeer } from '~/utils/rxjs/RxjsPeer.client'
+import type useRoom from './useRoom'
+
+interface UserSession {
+	username: string
+	sessionId: string
+}
+
+export interface RoomHistory {
+	apiHistory: ApiHistoryEntry[]
+	userSessions: UserSession[]
+}
+
+export function useRoomHistory(
+	peer: RxjsPeer,
+	room: ReturnType<typeof useRoom>
+): RoomHistory {
+	const [apiHistory, setApiHistory] = useState<ApiHistoryEntry[]>([])
+	const [userSessionsWithoutTraceLinks, setUserSessions] = useState<
+		UserSession[]
+	>([])
+	const sessionIdsRef = useRef(new Set<string>())
+
+	useEffect(() => {
+		const handleHistory = () => {
+			setApiHistory(peer.history.entries)
+		}
+		peer.history.addEventListener('logentry', handleHistory)
+
+		return () => {
+			peer.history.removeEventListener('logentry', handleHistory)
+		}
+	}, [peer])
+
+	useEffect(() => {
+		room.otherUsers.forEach((user) => {
+			if (user.transceiverSessionId === undefined) return
+			if (sessionIdsRef.current.has(user.transceiverSessionId)) return
+			sessionIdsRef.current.add(user.transceiverSessionId)
+			const userSession = {
+				sessionId: user.transceiverSessionId,
+				username: user.name,
+			} satisfies UserSession
+			setUserSessions((s) => [...s, userSession])
+		})
+	}, [room.otherUsers])
+
+	const userSessions = useMemo(
+		() =>
+			userSessionsWithoutTraceLinks.map((s) => ({
+				...s,
+			})),
+		[userSessionsWithoutTraceLinks]
+	)
+
+	return {
+		apiHistory,
+		userSessions,
+	}
+}
diff --git a/app/hooks/useUserMedia.ts b/app/hooks/useUserMedia.ts
index 366e00f..3834865 100644
--- a/app/hooks/useUserMedia.ts
+++ b/app/hooks/useUserMedia.ts
@@ -1,21 +1,13 @@
 import { useMemo, useState } from 'react'
-import { useLocalStorage, useUnmount } from 'react-use'
-import {
-	catchError,
-	combineLatest,
-	of,
-	shareReplay,
-	switchMap,
-	tap,
-} from 'rxjs'
+import { useLocalStorage } from 'react-use'
+import { combineLatest, map, of, shareReplay, switchMap, tap } from 'rxjs'
 import invariant from 'tiny-invariant'
 import { blackCanvasStreamTrack } from '~/utils/blackCanvasStreamTrack'
 import blurVideoTrack from '~/utils/blurVideoTrack'
-import { createEmptyAudioTrack } from '~/utils/createEmptyAudioTrack'
-import keyInObject from '~/utils/keyInObject'
 import type { Mode } from '~/utils/mode'
 import noiseSuppression from '~/utils/noiseSuppression'
 import { prependDeviceToPrioritizeList } from '~/utils/rxjs/devicePrioritization'
+import { getScreenshare$ } from '~/utils/rxjs/getScreenshare$'
 import { getUserMediaTrack$ } from '~/utils/rxjs/getUserMediaTrack$'
 import { useStateObservable, useSubscribedState } from './rxjsHooks'
 
@@ -41,14 +33,18 @@ export default function useUserMedia(mode: Mode) {
 	)
 	const [audioEnabled, setAudioEnabled] = useState(mode === 'production')
 	const [videoEnabled, setVideoEnabled] = useState(true)
-	const [screenShareStream, setScreenShareStream] = useState<MediaStream>()
 	const [screenShareEnabled, setScreenShareEnabled] = useState(false)
 	const [videoUnavailableReason, setVideoUnavailableReason] =
 		useState<UserMediaError>()
 	const [audioUnavailableReason, setAudioUnavailableReason] =
 		useState<UserMediaError>()
-	const [screenshareUnavailableReason, setScreenshareUnavailableReason] =
-		useState<UserMediaError>()
+
+	const turnMicOff = () => setAudioEnabled(false)
+	const turnMicOn = () => setAudioEnabled(true)
+	const turnCameraOn = () => setVideoEnabled(true)
+	const turnCameraOff = () => setVideoEnabled(false)
+	const startScreenShare = () => setScreenShareEnabled(true)
+	const endScreenShare = () => setScreenShareEnabled(false)
 
 	const blurVideo$ = useStateObservable(blurVideo)
 	const videoEnabled$ = useStateObservable(videoEnabled)
@@ -68,8 +64,7 @@ export default function useUserMedia(mode: Mode) {
 													: 'UnknownError'
 											)
 										},
-									}),
-									catchError(() => of(undefined))
+									})
 								)
 							: of(blackCanvasStreamTrack())
 					)
@@ -87,14 +82,7 @@ export default function useUserMedia(mode: Mode) {
 		[videoEnabled$, blurVideo$]
 	)
 	const videoTrack = useSubscribedState(videoTrack$)
-
-	const turnMicOff = () => {
-		setAudioEnabled(false)
-	}
-
-	const turnMicOn = async () => {
-		setAudioEnabled(true)
-	}
+	const videoDeviceId = videoTrack?.getSettings().deviceId
 
 	const suppressNoiseEnabled$ = useStateObservable(suppressNoise)
 	const audioTrack$ = useMemo(() => {
@@ -109,8 +97,7 @@ export default function useUserMedia(mode: Mode) {
 								: 'UnknownError'
 						)
 					},
-				}),
-				catchError(() => of(undefined))
+				})
 			),
 			suppressNoiseEnabled$,
 		]).pipe(
@@ -123,52 +110,70 @@ export default function useUserMedia(mode: Mode) {
 			})
 		)
 	}, [suppressNoiseEnabled$])
-
-	useUnmount(() => {
-		screenShareStream?.getTracks().forEach((t) => t.stop())
-	})
-
-	const turnCameraOn = () => {
-		setVideoEnabled(true)
-	}
-
-	const turnCameraOff = () => {
-		setVideoEnabled(false)
-	}
-
-	const startScreenShare = () => {
-		navigator.mediaDevices
-			.getDisplayMedia()
-			.then((ms) => {
-				ms.getVideoTracks().forEach((track) => {
-					if ('contentHint' in track) {
-						// optimize for legibility in shared screen
-						track.contentHint = 'text'
-					}
-				})
-				setScreenShareStream(ms)
-				setScreenshareUnavailableReason(undefined)
-				ms.getVideoTracks()[0].addEventListener('ended', () => {
-					setScreenShareStream(undefined)
-					setScreenShareEnabled(false)
+	const mutedAudioTrack$ = useMemo(() => {
+		return combineLatest([
+			getUserMediaTrack$('audioinput').pipe(
+				tap({
+					next: (track) => {
+						track.enabled = false
+					},
+					error: (e) => {
+						invariant(e instanceof Error)
+						setAudioUnavailableReason(
+							e.name in errorMessageMap
+								? (e.name as UserMediaError)
+								: 'UnknownError'
+						)
+					},
 				})
-				setScreenShareEnabled(true)
-			})
-			.catch((e: Error) => {
-				setScreenShareEnabled(false)
-				invariant(keyInObject(errorMessageMap, e.name))
-				setScreenshareUnavailableReason(e.name)
+			),
+			suppressNoiseEnabled$,
+		]).pipe(
+			switchMap(([track, suppressNoise]) =>
+				of(suppressNoise && track ? noiseSuppression(track) : track)
+			),
+			shareReplay({
+				refCount: true,
+				bufferSize: 1,
 			})
-	}
-
-	const endScreenShare = () => {
-		if (screenShareStream)
-			screenShareStream.getTracks().forEach((t) => t.stop())
-		setScreenShareEnabled(false)
-		setScreenShareStream(undefined)
-	}
+		)
+	}, [suppressNoiseEnabled$])
+	const alwaysOnAudioStreamTrack = useSubscribedState(audioTrack$)
+	const audioDeviceId = alwaysOnAudioStreamTrack?.getSettings().deviceId
+	const audioEnabled$ = useStateObservable(audioEnabled)
+	const publicAudioTrack$ = useMemo(
+		() =>
+			combineLatest([audioEnabled$, audioTrack$, mutedAudioTrack$]).pipe(
+				map(([enabled, alwaysOnTrack, mutedTrack]) =>
+					enabled ? alwaysOnTrack : mutedTrack
+				),
+				shareReplay({
+					refCount: true,
+					bufferSize: 1,
+				})
+			),
+		[audioEnabled$, audioTrack$, mutedAudioTrack$]
+	)
+	const audioStreamTrack = useSubscribedState(publicAudioTrack$)
 
-	const screenShareVideoTrack = screenShareStream?.getVideoTracks()[0]
+	const screenShareVideoTrack$ = useMemo(
+		() =>
+			screenShareEnabled
+				? getScreenshare$({ contentHint: 'text' }).pipe(
+						tap({
+							next: (ms) => {
+								if (ms === undefined) {
+									setScreenShareEnabled(false)
+								}
+							},
+							finalize: () => setScreenShareEnabled(false),
+						}),
+						map((ms) => ms?.getVideoTracks()[0])
+					)
+				: of(undefined),
+		[screenShareEnabled]
+	)
+	const screenShareVideoTrack = useSubscribedState(screenShareVideoTrack$)
 
 	const setVideoDeviceId = (deviceId: string) =>
 		navigator.mediaDevices.enumerateDevices().then((devices) => {
@@ -182,39 +187,36 @@ export default function useUserMedia(mode: Mode) {
 			if (device) prependDeviceToPrioritizeList(device)
 		})
 
-	const alwaysOnAudioStreamTrack = useSubscribedState(audioTrack$)
-	const mutedAudioStreamTrack = useMemo(() => createEmptyAudioTrack(), [])
-	const videoDeviceId = videoTrack?.getSettings().deviceId
-	const audioDeviceId = alwaysOnAudioStreamTrack?.getSettings().deviceId
-
 	return {
 		turnMicOn,
 		turnMicOff,
-		audioStreamTrack: audioEnabled
-			? alwaysOnAudioStreamTrack
-			: mutedAudioStreamTrack,
+		audioStreamTrack,
 		audioMonitorStreamTrack: alwaysOnAudioStreamTrack,
 		audioEnabled,
 		audioUnavailableReason,
-		turnCameraOn,
-		turnCameraOff,
-		videoStreamTrack: videoTrack,
-		videoEnabled,
-		videoUnavailableReason,
-		startScreenShare,
-		endScreenShare,
-		screenShareVideoTrack,
-		screenShareEnabled,
-		screenshareUnavailableReason,
+		publicAudioTrack$,
+		privateAudioTrack$: audioTrack$,
 		audioDeviceId,
 		setAudioDeviceId,
+
 		setVideoDeviceId,
 		videoDeviceId,
+		turnCameraOn,
+		turnCameraOff,
+		videoEnabled,
+		videoUnavailableReason,
 		blurVideo,
 		setBlurVideo,
 		suppressNoise,
 		setSuppressNoise,
 		videoTrack$,
+		videoStreamTrack: videoTrack,
+
+		startScreenShare,
+		endScreenShare,
+		screenShareVideoTrack,
+		screenShareEnabled,
+		screenShareVideoTrack$,
 	}
 }
 
diff --git a/app/routes/_room.$roomName.room.tsx b/app/routes/_room.$roomName.room.tsx
index 49c0641..f089ac2 100644
--- a/app/routes/_room.$roomName.room.tsx
+++ b/app/routes/_room.$roomName.room.tsx
@@ -36,7 +36,9 @@ export const loader = async ({ request, context }: LoaderFunctionArgs) => {
 	return json({
 		username,
 		bugReportsEnabled: Boolean(
-			context.env.FEEDBACK_QUEUE && context.env.FEEDBACK_URL
+			context.env.FEEDBACK_URL &&
+				context.env.FEEDBACK_QUEUE &&
+				context.env.FEEDBACK_STORAGE
 		),
 		mode: context.mode,
 	})
diff --git a/app/routes/_room.tsx b/app/routes/_room.tsx
index 12d24f7..872c7c9 100644
--- a/app/routes/_room.tsx
+++ b/app/routes/_room.tsx
@@ -2,16 +2,20 @@ import type { LoaderFunctionArgs } from '@remix-run/cloudflare'
 import { json } from '@remix-run/cloudflare'
 import { Outlet, useLoaderData, useParams } from '@remix-run/react'
 import { useMemo, useState } from 'react'
+import { from, of, switchMap } from 'rxjs'
 import invariant from 'tiny-invariant'
 import { EnsureOnline } from '~/components/EnsureOnline'
 import { EnsurePermissions } from '~/components/EnsurePermissions'
 import { Icon } from '~/components/Icon/Icon'
+import { useStateObservable, useSubscribedState } from '~/hooks/rxjsHooks'
 
 import { usePeerConnection } from '~/hooks/usePeerConnection'
-import usePushedTrack from '~/hooks/usePushedTrack'
 import useRoom from '~/hooks/useRoom'
 import type { RoomContextType } from '~/hooks/useRoomContext'
+import { useRoomHistory } from '~/hooks/useRoomHistory'
+import { useStablePojo } from '~/hooks/useStablePojo'
 import useUserMedia from '~/hooks/useUserMedia'
+import type { TrackObject } from '~/utils/callsTypes'
 import { getIceServers } from '~/utils/getIceServers.server'
 
 function numberOrUndefined(value: unknown): number | undefined {
@@ -19,6 +23,11 @@ function numberOrUndefined(value: unknown): number | undefined {
 	return isNaN(num) ? undefined : num
 }
 
+function trackObjectToString(trackObject?: TrackObject) {
+	if (!trackObject) return undefined
+	return trackObject.sessionId + '/' + trackObject.trackName
+}
+
 export const loader = async ({ context }: LoaderFunctionArgs) => {
 	const {
 		mode,
@@ -28,6 +37,7 @@ export const loader = async ({ context }: LoaderFunctionArgs) => {
 			MAX_WEBCAM_FRAMERATE,
 			MAX_WEBCAM_BITRATE,
 			MAX_WEBCAM_QUALITY_LEVEL,
+			MAX_API_HISTORY,
 		},
 	} = context
 
@@ -37,12 +47,15 @@ export const loader = async ({ context }: LoaderFunctionArgs) => {
 		traceLink: TRACE_LINK,
 		apiExtraParams: API_EXTRA_PARAMS,
 		iceServers: await getIceServers(context.env),
-		feedbackEnabled:
-			context.env.FEEDBACK_QUEUE !== undefined &&
-			context.env.FEEDBACK_URL !== undefined,
+		feedbackEnabled: Boolean(
+			context.env.FEEDBACK_URL &&
+				context.env.FEEDBACK_QUEUE &&
+				context.env.FEEDBACK_STORAGE
+		),
 		maxWebcamFramerate: numberOrUndefined(MAX_WEBCAM_FRAMERATE),
 		maxWebcamBitrate: numberOrUndefined(MAX_WEBCAM_BITRATE),
 		maxWebcamQualityLevel: numberOrUndefined(MAX_WEBCAM_QUALITY_LEVEL),
+		maxApiHistory: numberOrUndefined(MAX_API_HISTORY),
 	})
 }
 
@@ -100,14 +113,18 @@ function Room() {
 		maxWebcamBitrate = 1_200_000,
 		maxWebcamFramerate = 24,
 		maxWebcamQualityLevel = 1080,
+		maxApiHistory = 100,
 	} = useLoaderData<typeof loader>()
 
 	const userMedia = useUserMedia(mode)
 	const room = useRoom({ roomName, userMedia })
-	const { peer, debugInfo, iceConnectionState } = usePeerConnection({
+	const { peer, iceConnectionState } = usePeerConnection({
+		maxApiHistory,
 		apiExtraParams,
 		iceServers,
+		apiBase: '/api/calls',
 	})
+	const roomHistory = useRoomHistory(peer, room)
 
 	const scaleResolutionDownBy = useMemo(() => {
 		const videoStreamTrack = userMedia.videoStreamTrack
@@ -117,19 +134,45 @@ function Room() {
 		return Math.max(smallestDimension / maxWebcamQualityLevel, 1)
 	}, [maxWebcamQualityLevel, userMedia.videoStreamTrack])
 
-	const pushedVideoTrack = usePushedTrack(peer, userMedia.videoStreamTrack, {
-		maxFramerate: maxWebcamFramerate,
-		maxBitrate: maxWebcamBitrate,
-		scaleResolutionDownBy,
-	})
-	const pushedAudioTrack = usePushedTrack(peer, userMedia.audioStreamTrack, {
-		priority: 'high',
-	})
-	const pushedScreenSharingTrack = usePushedTrack(
-		peer,
-		userMedia.screenShareVideoTrack
+	const videoEncodingParams = useStablePojo<RTCRtpEncodingParameters[]>([
+		{
+			maxFramerate: maxWebcamFramerate,
+			maxBitrate: maxWebcamBitrate,
+			scaleResolutionDownBy,
+		},
+	])
+	const videoTrackEncodingParams$ =
+		useStateObservable<RTCRtpEncodingParameters[]>(videoEncodingParams)
+	const pushedVideoTrack$ = useMemo(
+		() => peer.pushTrack(userMedia.videoTrack$, videoTrackEncodingParams$),
+		[videoTrackEncodingParams$]
 	)
 
+	const pushedVideoTrack = useSubscribedState(pushedVideoTrack$)
+
+	const pushedAudioTrack$ = useMemo(
+		() =>
+			peer.pushTrack(
+				userMedia.publicAudioTrack$,
+				of<RTCRtpEncodingParameters[]>([
+					{
+						networkPriority: 'high',
+					},
+				])
+			),
+		[]
+	)
+	const pushedAudioTrack = useSubscribedState(pushedAudioTrack$)
+
+	const pushedScreenSharingTrack$ = useMemo(() => {
+		return userMedia.screenShareVideoTrack$.pipe(
+			switchMap((track) =>
+				track ? from(peer.pushTrack(of(track))) : of(undefined)
+			)
+		)
+	}, [peer, userMedia.screenShareVideoTrack$])
+	const pushedScreenSharingTrack = useSubscribedState(pushedScreenSharingTrack$)
+
 	const context: RoomContextType = {
 		joined,
 		setJoined,
@@ -138,13 +181,13 @@ function Room() {
 		userDirectoryUrl,
 		feedbackEnabled,
 		peer,
-		peerDebugInfo: debugInfo,
+		roomHistory,
 		iceConnectionState,
 		room,
 		pushedTracks: {
-			video: pushedVideoTrack,
-			audio: pushedAudioTrack,
-			screenshare: pushedScreenSharingTrack,
+			video: trackObjectToString(pushedVideoTrack),
+			audio: trackObjectToString(pushedAudioTrack),
+			screenshare: trackObjectToString(pushedScreenSharingTrack),
 		},
 	}
 
diff --git a/app/routes/api.bugReport.tsx b/app/routes/api.bugReport.tsx
index c8e648d..d678cd3 100644
--- a/app/routes/api.bugReport.tsx
+++ b/app/routes/api.bugReport.tsx
@@ -1,27 +1,30 @@
 import type { ActionFunctionArgs } from '@remix-run/cloudflare'
 import { json } from '@remix-run/cloudflare'
 import invariant from 'tiny-invariant'
+import type { RoomHistory } from '~/hooks/useRoomHistory'
 import type { ChatCard } from '~/types/GoogleChatApi'
-import type { RoomState, User } from '~/types/Messages'
-import type { PeerDebugInfo } from '~/utils/Peer.client'
+import type { User } from '~/types/Messages'
 import { RELEASE } from '~/utils/constants'
-import populateTraceLink from '~/utils/populateTraceLink'
 
 export type BugReportInfo = {
-	roomState: RoomState
 	roomName?: string
 	identity?: User
-	peerDebugInfo?: PeerDebugInfo
+	roomHistory?: RoomHistory
 	url?: string
 }
 
 export const action = async ({ request, context }: ActionFunctionArgs) => {
-	if (!context.env.FEEDBACK_URL || !context.env.FEEDBACK_QUEUE) {
+	if (
+		!context.env.FEEDBACK_URL ||
+		!context.env.FEEDBACK_STORAGE ||
+		!context.env.FEEDBACK_QUEUE
+	) {
 		throw new Response('not found', { status: 404 })
 	}
+	const requestUrl = new URL(request.url)
 	const formData = await request.formData()
 	const info: BugReportInfo = JSON.parse(String(formData.get('info')))
-	const { roomState, identity, roomName, peerDebugInfo, url } = info
+	const { identity, roomName, roomHistory, url } = info
 	const description = formData.get('description')
 	invariant(typeof description === 'string')
 	const userAgent = request.headers.get('User-Agent')
@@ -29,6 +32,14 @@ export const action = async ({ request, context }: ActionFunctionArgs) => {
 	invariant(roomName)
 	invariant(url)
 
+	const debugInfoId = crypto.randomUUID()
+	if (context.env.FEEDBACK_STORAGE) {
+		await context.env.FEEDBACK_STORAGE.put(
+			debugInfoId,
+			JSON.stringify(roomHistory, null, 2)
+		)
+	}
+
 	const { hostname } = new URL(url)
 
 	const chatCard: ChatCard = {
@@ -88,50 +99,26 @@ export const action = async ({ request, context }: ActionFunctionArgs) => {
 							collapsible: false,
 						},
 						{
-							header: 'Users',
-							collapsible: true,
+							header: 'Debug Info',
 							widgets: [
 								{
 									buttonList: {
-										buttons: roomState.users.map((u) => ({
-											text: u.name,
-											onClick: {
-												openLink: {
-													url:
-														populateTraceLink(
-															u.transceiverSessionId ?? '',
-															context.env.TRACE_LINK
-														) ?? '',
+										buttons: [
+											{
+												text: 'View JSON',
+												onClick: {
+													openLink: {
+														url:
+															requestUrl.origin +
+															`/api/debugInfo?id=${debugInfoId}`,
+													},
 												},
 											},
-										})),
-									},
-								},
-							],
-						},
-						{
-							header: 'Room state',
-							collapsible: true,
-							uncollapsibleWidgetsCount: 0,
-							widgets: [
-								{
-									decoratedText: {
-										text: JSON.stringify(roomState),
-									},
-								},
-							],
-						},
-						{
-							header: 'Peer Debug Info',
-							collapsible: true,
-							uncollapsibleWidgetsCount: 0,
-							widgets: [
-								{
-									decoratedText: {
-										text: JSON.stringify(peerDebugInfo),
+										],
 									},
 								},
 							],
+							collapsible: false,
 						},
 					],
 				},
diff --git a/app/routes/api.debugInfo.tsx b/app/routes/api.debugInfo.tsx
new file mode 100644
index 0000000..167bbaf
--- /dev/null
+++ b/app/routes/api.debugInfo.tsx
@@ -0,0 +1,26 @@
+import type { LoaderFunction } from '@remix-run/cloudflare'
+
+export const loader = (async ({ request, context }) => {
+	if (!context.env.FEEDBACK_STORAGE) {
+		throw new Response('404: Missing KV Binding', { status: 404 })
+	}
+
+	const url = new URL(request.url)
+	const id = url.searchParams.get('id')
+	if (id === null) {
+		throw new Response('missing id param', {
+			status: 400,
+		})
+	}
+
+	const debugInfo = await context.env.FEEDBACK_STORAGE.get(id)
+	if (debugInfo === null) {
+		throw new Response('404: Report not found', { status: 404 })
+	}
+
+	return new Response(debugInfo, {
+		headers: {
+			'Content-Type': 'application/json',
+		},
+	})
+}) satisfies LoaderFunction
diff --git a/app/routes/demo.rxjs.tsx b/app/routes/demo.rxjs.tsx
index 67e5e72..9a1eaba 100644
--- a/app/routes/demo.rxjs.tsx
+++ b/app/routes/demo.rxjs.tsx
@@ -18,9 +18,7 @@ function Rxjs() {
 	const client = useMemo(
 		() =>
 			new RxjsPeer({
-				apiBase: `https://rtc.live.cloudflare.com/v1/apps`,
-				appId: 'APP_ID',
-				token: 'APP_TOKEN',
+				apiBase: `/api/calls`,
 			}),
 		[]
 	)
diff --git a/app/types/Env.ts b/app/types/Env.ts
index a9e8581..9e8227c 100644
--- a/app/types/Env.ts
+++ b/app/types/Env.ts
@@ -2,6 +2,7 @@ export type Env = {
 	USER_DIRECTORY_URL?: string
 	FEEDBACK_URL?: string
 	FEEDBACK_QUEUE?: Queue
+	FEEDBACK_STORAGE?: KVNamespace
 	CALLS_APP_ID: string
 	CALLS_APP_SECRET: string
 	TURN_SERVICE_ID?: string
@@ -13,4 +14,5 @@ export type Env = {
 	MAX_WEBCAM_FRAMERATE?: string
 	MAX_WEBCAM_BITRATE?: string
 	MAX_WEBCAM_QUALITY_LEVEL?: string
+	MAX_API_HISTORY?: string
 }
diff --git a/app/utils/History.ts b/app/utils/History.ts
index 8436d70..6af23d3 100644
--- a/app/utils/History.ts
+++ b/app/utils/History.ts
@@ -1,5 +1,11 @@
 export class History<T> extends EventTarget {
 	entries: T[] = []
+	private limit: number
+
+	constructor(limit: number = Infinity) {
+		super()
+		this.limit = Math.max(1, limit) // Ensure the limit is at least 1
+	}
 
 	addEventListener(
 		type: 'logentry',
@@ -24,6 +30,9 @@ export class History<T> extends EventTarget {
 	}
 
 	log(entry: T) {
+		if (this.entries.length >= this.limit) {
+			this.entries.shift() // Remove the oldest entry
+		}
 		this.entries.push(entry)
 		this.dispatchEvent(new CustomEvent('logentry'))
 	}
diff --git a/app/utils/createEmptyAudioTrack.ts b/app/utils/createEmptyAudioTrack.ts
deleted file mode 100644
index 79555ed..0000000
--- a/app/utils/createEmptyAudioTrack.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-export function createEmptyAudioTrack() {
-	const audioContext = new AudioContext()
-	const oscillator = audioContext.createOscillator()
-	const gainNode = audioContext.createGain()
-	gainNode.gain.setValueAtTime(0, audioContext.currentTime)
-	oscillator.connect(gainNode)
-	const destination = audioContext.createMediaStreamDestination()
-	gainNode.connect(destination)
-	oscillator.start()
-	return destination.stream.getAudioTracks()[0]
-}
diff --git a/app/utils/rxjs/RxjsPeer.client.ts b/app/utils/rxjs/RxjsPeer.client.ts
index 2bf95c4..693c83c 100644
--- a/app/utils/rxjs/RxjsPeer.client.ts
+++ b/app/utils/rxjs/RxjsPeer.client.ts
@@ -2,10 +2,11 @@ import {
 	Observable,
 	combineLatest,
 	distinctUntilChanged,
-	filter,
 	from,
 	fromEvent,
 	map,
+	of,
+	retry,
 	share,
 	shareReplay,
 	switchMap,
@@ -14,20 +15,36 @@ import {
 	withLatestFrom,
 } from 'rxjs'
 import invariant from 'tiny-invariant'
-import { BulkRequestDispatcher, FIFOScheduler } from '../Peer.utils'
 import type {
 	RenegotiationResponse,
 	TrackObject,
 	TracksResponse,
 } from '../callsTypes'
+import { History } from '../History'
+import { BulkRequestDispatcher, FIFOScheduler } from '../Peer.utils'
 
-interface PeerConfig {
-	appId: string
-	token: string
+export interface PeerConfig {
+	apiExtraParams?: string
+	iceServers?: RTCIceServer[]
 	apiBase: string
+	maxApiHistory?: number
 }
 
+export type ApiHistoryEntry =
+	| {
+			type: 'request'
+			method: string
+			endpoint: string
+			body: unknown
+	  }
+	| {
+			type: 'response'
+			endpoint: string
+			body: unknown
+	  }
+
 export class RxjsPeer {
+	history: History<ApiHistoryEntry>
 	peerConnection$: Observable<RTCPeerConnection>
 	session$: Observable<{
 		peerConnection: RTCPeerConnection
@@ -36,32 +53,54 @@ export class RxjsPeer {
 	peerConnectionState$: Observable<RTCPeerConnectionState>
 	config: PeerConfig
 
-	authHeaders() {
-		return {
-			Authorization: `Bearer ${this.config.token}`,
-		}
-	}
-
 	constructor(config: PeerConfig) {
 		this.config = config
+		this.history = new History<ApiHistoryEntry>(config.maxApiHistory)
 		this.peerConnection$ = new Observable<RTCPeerConnection>((subscribe) => {
 			let peerConnection: RTCPeerConnection
 			const setup = () => {
 				peerConnection?.close()
-				peerConnection = createPeerConnection()
+				peerConnection = createPeerConnection({
+					iceServers: config.iceServers,
+				})
 				peerConnection.addEventListener('connectionstatechange', () => {
 					if (
 						peerConnection.connectionState === 'failed' ||
 						peerConnection.connectionState === 'closed'
 					) {
+						console.debug(
+							`💥 Peer connectionState is ${peerConnection.connectionState}`
+						)
 						subscribe.next(setup())
 					}
 				})
 
+				let iceTimeout = -1
+				peerConnection.addEventListener('iceconnectionstatechange', () => {
+					clearTimeout(iceTimeout)
+					if (
+						peerConnection.iceConnectionState === 'failed' ||
+						peerConnection.iceConnectionState === 'closed'
+					) {
+						console.debug(
+							`💥 Peer iceConnectionState is ${peerConnection.iceConnectionState}`
+						)
+						subscribe.next(setup())
+					} else if (peerConnection.iceConnectionState === 'disconnected') {
+						const timeoutSeconds = 3
+						iceTimeout = window.setTimeout(() => {
+							console.debug(
+								`💥 Peer iceConnectionState was ${peerConnection.iceConnectionState} for more than ${timeoutSeconds} seconds`
+							)
+							subscribe.next(setup())
+						}, timeoutSeconds * 1000)
+					}
+				})
+
 				// TODO: Remove this
 				Object.assign(window, {
 					explode: () => {
-						console.debug('💥 Closing connection')
+						console.debug('💥 Manually exploding connection')
 						peerConnection.close()
 						peerConnection.dispatchEvent(new Event('connectionstatechange'))
 					},
@@ -75,7 +114,12 @@ export class RxjsPeer {
 			return () => {
 				peerConnection.close()
 			}
-		})
+		}).pipe(
+			shareReplay({
+				bufferSize: 1,
+				refCount: true,
+			})
+		)
 
 		this.session$ = this.peerConnection$.pipe(
 			// TODO: Convert the promise based session creation here
@@ -121,36 +165,31 @@ export class RxjsPeer {
 
 	async createSession(peerConnection: RTCPeerConnection) {
 		console.debug('🆕 creating new session')
-		const { appId, apiBase, token } = this.config
+		const { apiBase } = this.config
 		// create an offer and set it as the local description
 		await peerConnection.setLocalDescription(await peerConnection.createOffer())
-		const { sessionId, sessionDescription } = await fetch(
-			`${apiBase}/${appId}/sessions/new`,
-			{
+		const { sessionId, sessionDescription } =
+			await this.fetchWithRecordedHistory(`${apiBase}/sessions/new?SESSION`, {
 				method: 'POST',
-				headers: {
-					Authorization: `Bearer ${token}`,
-				},
 				body: JSON.stringify({
 					sessionDescription: peerConnection.localDescription,
 				}),
-			}
-		).then((res) => res.json() as any)
+			}).then((res) => res.json() as any)
 		const connected = new Promise((res, rej) => {
 			// timeout after 5s
 			setTimeout(rej, 5000)
-			const iceConnectionStateChangeHandler = () => {
-				if (peerConnection.iceConnectionState === 'connected') {
+			const connectionStateChangeHandler = () => {
+				if (peerConnection.connectionState === 'connected') {
 					peerConnection.removeEventListener(
-						'iceconnectionstatechange',
-						iceConnectionStateChangeHandler
+						'connectionstatechange',
+						connectionStateChangeHandler
 					)
 					res(undefined)
 				}
 			}
 			peerConnection.addEventListener(
-				'iceconnectionstatechange',
-				iceConnectionStateChangeHandler
+				'connectionstatechange',
+				connectionStateChangeHandler
 			)
 		})
 
@@ -161,6 +200,26 @@ export class RxjsPeer {
 		return { peerConnection, sessionId }
 	}
 
+	async fetchWithRecordedHistory(path: string, requestInit?: RequestInit) {
+		this.history.log({
+			endpoint: path,
+			method: requestInit?.method ?? 'get',
+			type: 'request',
+			body:
+				typeof requestInit?.body === 'string'
+					? JSON.parse(requestInit.body)
+					: undefined,
+		})
+		const response = await fetch(path, requestInit)
+		const responseBody = await response.clone().json()
+		this.history.log({
+			endpoint: path,
+			type: 'response',
+			body: responseBody,
+		})
+		return response
+	}
+
 	#pushTrackInBulk(
 		peerConnection: RTCPeerConnection,
 		transceiver: RTCRtpTransceiver,
@@ -181,22 +240,22 @@ export class RxjsPeer {
 								await peerConnection.createOffer()
 							)
 
-							const response = await fetch(
-								`${this.config.apiBase}/${this.config.appId}/sessions/${sessionId}/tracks/new`,
+							const requestBody = {
+								sessionDescription: {
+									sdp: peerConnection.localDescription?.sdp,
+									type: 'offer',
+								},
+								tracks: tracks.map(({ trackName, transceiver }) => ({
+									trackName,
+									mid: transceiver.mid,
+									location: 'local',
+								})),
+							}
+							const response = await this.fetchWithRecordedHistory(
+								`${this.config.apiBase}/sessions/${sessionId}/tracks/new?PUSHING`,
 								{
 									method: 'POST',
-									headers: this.authHeaders(),
-									body: JSON.stringify({
-										sessionDescription: {
-											sdp: peerConnection.localDescription?.sdp,
-											type: 'offer',
-										},
-										tracks: tracks.map(({ trackName, transceiver }) => ({
-											trackName,
-											mid: transceiver.mid,
-											location: 'local',
-										})),
-									}),
+									body: JSON.stringify(requestBody),
 								}
 							).then((res) => res.json() as Promise<TracksResponse>)
 							invariant(response.tracks !== undefined)
@@ -238,7 +297,10 @@ export class RxjsPeer {
 		})
 	}
 
-	pushTrack(track$: Observable<MediaStreamTrack>): Observable<TrackObject> {
+	pushTrack(
+		track$: Observable<MediaStreamTrack>,
+		encodings$: Observable<RTCRtpEncodingParameters[]> = of([])
+	): Observable<TrackObject> {
 		// we want a single id for this connection, but we need to wait for
 		// the first track to show up before we can proceed, so we
 		const stableId$ = track$.pipe(
@@ -253,6 +315,7 @@ export class RxjsPeer {
 					direction: 'sendonly',
 				})
 				console.debug('🌱 creating transceiver!')
+
 				return {
 					transceiver,
 					stableId,
@@ -277,8 +340,19 @@ export class RxjsPeer {
 			)
 		)
 
-		return combineLatest([pushedTrackData$, transceiver$, track$]).pipe(
-			tap(([_trackData, { transceiver }, track]) => {
+		return combineLatest([
+			pushedTrackData$,
+			transceiver$,
+			track$,
+			encodings$,
+		]).pipe(
+			tap(([_trackData, { transceiver }, track, encodings]) => {
+				const parameters = transceiver.sender.getParameters()
+				encodings.forEach((encoding, i) => {
+					const existing = parameters.encodings[i]
+					parameters.encodings[i] = { ...existing, ...encoding }
+				})
+				transceiver.sender.setParameters(parameters)
 				if (transceiver.sender.transport !== null) {
 					console.debug('♻︎ replacing track')
 					transceiver.sender.replaceTrack(track)
@@ -298,7 +372,7 @@ export class RxjsPeer {
 		trackData: TrackObject
 	): Observable<MediaStreamTrack> {
 		let mid = ''
-		return new Observable((subscribe) => {
+		return new Observable<MediaStreamTrack>((subscribe) => {
 			let pulledTrackPromise: Promise<unknown>
 			// we're doing this in a timeout so that we can bail if the observable
 			// is unsubscribed from immediately after subscribing. This will prevent
@@ -308,16 +382,16 @@ export class RxjsPeer {
 				pulledTrackPromise = this.pullTrackDispatcher
 					.doBulkRequest(trackData, (tracks) =>
 						this.taskScheduler.schedule(async () => {
-							const newTrackResponse: TracksResponse = await fetch(
-								`${this.config.apiBase}/${this.config.appId}/sessions/${sessionId}/tracks/new`,
-								{
-									method: 'POST',
-									headers: this.authHeaders(),
-									body: JSON.stringify({
-										tracks,
-									}),
-								}
-							).then((res) => res.json() as Promise<TracksResponse>)
+							const newTrackResponse: TracksResponse =
+								await this.fetchWithRecordedHistory(
+									`${this.config.apiBase}/sessions/${sessionId}/tracks/new?PULLING`,
+									{
+										method: 'POST',
+										body: JSON.stringify({
+											tracks,
+										}),
+									}
+								).then((res) => res.json() as Promise<TracksResponse>)
 							if (newTrackResponse.errorCode) {
 								throw new Error(newTrackResponse.errorDescription)
 							}
@@ -349,19 +423,19 @@ export class RxjsPeer {
 								const answer = await peerConnection.createAnswer()
 								await peerConnection.setLocalDescription(answer)
 
-								const renegotiationResponse = await fetch(
-									`${this.config.apiBase}/${this.config.appId}/sessions/${sessionId}/renegotiate`,
-									{
-										method: 'PUT',
-										body: JSON.stringify({
-											sessionDescription: {
-												type: 'answer',
-												sdp: peerConnection.currentLocalDescription?.sdp,
-											},
-										}),
-										headers: this.authHeaders(),
-									}
-								).then((res) => res.json() as Promise<RenegotiationResponse>)
+								const renegotiationResponse =
+									await this.fetchWithRecordedHistory(
+										`${this.config.apiBase}/sessions/${sessionId}/renegotiate`,
+										{
+											method: 'PUT',
+											body: JSON.stringify({
+												sessionDescription: {
+													type: 'answer',
+													sdp: peerConnection.currentLocalDescription?.sdp,
+												},
+											}),
+										}
+									).then((res) => res.json() as Promise<RenegotiationResponse>)
 								if (renegotiationResponse.errorCode)
 									throw new Error(renegotiationResponse.errorDescription)
 							}
@@ -397,7 +471,7 @@ export class RxjsPeer {
 					}
 				})
 			}
-		})
+		}).pipe(retry(2))
 	}
 
 	pullTrack(trackData$: Observable<TrackObject>): Observable<MediaStreamTrack> {
@@ -409,14 +483,13 @@ export class RxjsPeer {
 				distinctUntilChanged((x, y) => JSON.stringify(x) === JSON.stringify(y))
 			),
 		]).pipe(
-			// avoid re-pulling if track data changed before connection state is connected
-			// should only really be necessary if pulling a track that was pushed locally
-			filter(
-				([{ peerConnection }]) => peerConnection.connectionState === 'connected'
-			),
-			switchMap(([{ peerConnection, sessionId }, trackData]) =>
-				this.#pullTrackInBulk(peerConnection, sessionId, trackData)
-			)
+			switchMap(([{ peerConnection, sessionId }, trackData]) => {
+				return this.#pullTrackInBulk(peerConnection, sessionId, trackData)
+			}),
+			shareReplay({
+				refCount: true,
+				bufferSize: 1,
+			})
 		)
 	}
 
@@ -426,7 +499,7 @@ export class RxjsPeer {
 		sessionId: string
 	) {
 		// TODO: Close tracks in bulk
-		const { appId, token, apiBase } = this.config
+		const { apiBase } = this.config
 		const transceiver = peerConnection
 			.getTransceivers()
 			.find((t) => t.mid === mid)
@@ -446,14 +519,11 @@ export class RxjsPeer {
 			},
 			force: false,
 		}
-		const response = await fetch(
-			`${apiBase}/${appId}/sessions/${sessionId}/tracks/close`,
+		const response = await this.fetchWithRecordedHistory(
+			`${apiBase}/sessions/${sessionId}/tracks/close`,
 			{
 				method: 'PUT',
 				body: JSON.stringify(requestBody),
-				headers: {
-					Authorization: `Bearer ${token}`,
-				},
 			}
 		).then((res) => res.json() as Promise<TracksResponse>)
 		await peerConnection.setRemoteDescription(
diff --git a/app/utils/rxjs/getAvailableOutgoingBitrate$.ts b/app/utils/rxjs/getAvailableOutgoingBitrate$.ts
new file mode 100644
index 0000000..2074b1d
--- /dev/null
+++ b/app/utils/rxjs/getAvailableOutgoingBitrate$.ts
@@ -0,0 +1,24 @@
+import { combineLatest, interval, map, switchMap, type Observable } from 'rxjs'
+import Ewma from '../ewma'
+
+export function getAvailableOutboundEstimate$(
+	peerConnection$: Observable<RTCPeerConnection>
+) {
+	const availableOutboundBitrateEwma = new Ewma(2000, 0)
+	return combineLatest([peerConnection$, interval(5000)]).pipe(
+		switchMap(([peerConnection]) => peerConnection.getStats()),
+		map((newStatsReport) => {
+			newStatsReport.forEach((report) => {
+				if (
+					report.type === 'candidate-pair' &&
+					'availableOutgoingBitrate' in report
+				) {
+					availableOutboundBitrateEwma.insert(
+						Number(report.availableOutgoingBitrate)
+					)
+				}
+			})
+			return availableOutboundBitrateEwma.value()
+		})
+	)
+}
diff --git a/app/utils/rxjs/getPacketLossStats$.ts b/app/utils/rxjs/getPacketLossStats$.ts
new file mode 100644
index 0000000..d01b724
--- /dev/null
+++ b/app/utils/rxjs/getPacketLossStats$.ts
@@ -0,0 +1,84 @@
+import {
+	combineLatest,
+	interval,
+	map,
+	Observable,
+	pairwise,
+	switchMap,
+} from 'rxjs'
+import Ewma from '~/utils/ewma'
+
+export interface PacketLossStats {
+	inboundPacketLossPercentage: number
+	outboundPacketLossPercentage: number
+}
+
+export function getPacketLossStats$(
+	peerConnection$: Observable<RTCPeerConnection>
+) {
+	const inboundPacketLossPercentageEwma = new Ewma(2000, 0)
+	const outboundPacketLossPercentageEwma = new Ewma(2000, 0)
+	return combineLatest([peerConnection$, interval(1000)]).pipe(
+		switchMap(([peerConnection]) => peerConnection.getStats()),
+		pairwise(),
+		map(([previousStatsReport, newStatsReport]) => {
+			let inboundPacketsReceived = 0
+			let inboundPacketsLost = 0
+			let outboundPacketsSent = 0
+			let outboundPacketsLost = 0
+
+			newStatsReport.forEach((report) => {
+				const previous = previousStatsReport.get(report.id)
+				if (!previous) return
+
+				if (report.type === 'inbound-rtp') {
+					inboundPacketsLost += report.packetsLost - previous.packetsLost
+					inboundPacketsReceived +=
+						report.packetsReceived - previous.packetsReceived
+				} else if (report.type === 'outbound-rtp') {
+					const packetsSent = report.packetsSent - previous.packetsSent
+					// Find the corresponding remote-inbound-rtp report
+					const remoteInboundReport = Array.from(newStatsReport.values()).find(
+						(r) => r.type === 'remote-inbound-rtp' && r.ssrc === report.ssrc
+					)
+					const previousRemoteInboundReport = Array.from(
+						previousStatsReport.values()
+					).find(
+						(r) => r.type === 'remote-inbound-rtp' && r.ssrc === previous.ssrc
+					)
+					if (
+						remoteInboundReport &&
+						previousRemoteInboundReport &&
+						packetsSent > 0
+					) {
+						outboundPacketsSent += report.packetsSent - previous.packetsSent
+						outboundPacketsLost +=
+							remoteInboundReport.packetsLost -
+							previousRemoteInboundReport.packetsLost
+					}
+				}
+			})
+
+			if (inboundPacketsReceived > 0) {
+				const packetLossPercentage =
+					inboundPacketsLost / (inboundPacketsReceived + inboundPacketsLost)
+				inboundPacketLossPercentageEwma.insert(
+					Math.max(0, packetLossPercentage)
+				)
+			}
+
+			if (outboundPacketsSent > 0) {
+				const packetLossPercentage =
+					outboundPacketsLost / (outboundPacketsSent + outboundPacketsLost)
+				outboundPacketLossPercentageEwma.insert(
+					Math.max(0, packetLossPercentage)
+				)
+			}
+
+			return {
+				outboundPacketLossPercentage: outboundPacketLossPercentageEwma.value(),
+				inboundPacketLossPercentage: inboundPacketLossPercentageEwma.value(),
+			} satisfies PacketLossStats
+		})
+	)
+}
diff --git a/app/utils/rxjs/getScreenshare$.ts b/app/utils/rxjs/getScreenshare$.ts
new file mode 100644
index 0000000..4c87eb3
--- /dev/null
+++ b/app/utils/rxjs/getScreenshare$.ts
@@ -0,0 +1,48 @@
+import { Observable, shareReplay } from 'rxjs'
+import invariant from 'tiny-invariant'
+
+export function getScreenshare$({ contentHint }: { contentHint: string }) {
+	return new Observable<MediaStream | undefined>((subscribe) => {
+		let cleanup: Function = () => {}
+		// do this in a setTimeout that we can cancel
+		// so it will play nicely with React strict mode
+		let timeout = setTimeout(() => {
+			navigator.mediaDevices
+				.getDisplayMedia()
+				.then((ms) => {
+					cleanup = () => {
+						ms.getTracks().forEach((t) => t.stop())
+					}
+					ms.getVideoTracks().forEach((track) => {
+						if (contentHint && 'contentHint' in track) {
+							track.contentHint = contentHint
+						}
+					})
+
+					subscribe.next(ms)
+					ms.getVideoTracks()[0].addEventListener('ended', () => {
+						subscribe.complete()
+					})
+				})
+				.catch((err) => {
+					invariant(err instanceof Error)
+					// user cancelled the screenshare request
+					if (err.name === 'NotAllowedError') {
+						subscribe.next(undefined)
+						return
+					}
+					throw err
+				})
+		})
+
+		return () => {
+			clearTimeout(timeout)
+			cleanup()
+		}
+	}).pipe(
+		shareReplay({
+			refCount: true,
+			bufferSize: 1,
+		})
+	)
+}
diff --git a/app/utils/rxjs/getUserMediaTrack$.ts b/app/utils/rxjs/getUserMediaTrack$.ts
index 10408fa..d17b5fe 100644
--- a/app/utils/rxjs/getUserMediaTrack$.ts
+++ b/app/utils/rxjs/getUserMediaTrack$.ts
@@ -46,7 +46,6 @@ export function getUserMediaTrack$(
 							const cleanupRef = { current: () => {} }
 							acquireTrack(subscriber, device, constraints, cleanupRef)
 							return () => {
-								console.log('🛑 Errored or no subscribers, stopping...')
 								cleanupRef.current()
 							}
 						})
@@ -80,7 +79,7 @@ function acquireTrack(
 					: mediaStream.getAudioTracks()[0]
 			if (await trackIsHealthy(track)) {
 				const cleanup = () => {
-					console.log('Cleaning up...')
+					console.log('🛑 Stopping track')
 					track.stop()
 					document.removeEventListener('visibilitychange', onVisibleHandler)
 				}
diff --git a/app/utils/rxjs/trackIsHealthy.ts b/app/utils/rxjs/trackIsHealthy.ts
index a61fbd5..6732da7 100644
--- a/app/utils/rxjs/trackIsHealthy.ts
+++ b/app/utils/rxjs/trackIsHealthy.ts
@@ -2,14 +2,17 @@ export async function trackIsHealthy(
 	track: MediaStreamTrack
 ): Promise<boolean> {
 	console.info(`👩🏻‍⚕️ Checking track health...`)
-	// TODO:
-	// if (track.kind === "audio") {
-	//   test audio stream with web audio api
-	// }
-	// if (track.kind === "video") {
-	//   draw to canvas and check if all black pixels
-	// }
-	//
+
+	if (track.enabled) {
+		// TODO:
+		// if (track.kind === "audio") {
+		//   test audio stream with web audio api
+		// }
+		//
+		// if (track.kind === "video") {
+		//   draw to canvas and check if all black pixels
+		// }
+	}
 
 	const randomFailuresEnabled =
 		localStorage.getItem('flags.randomTrackFailuresEnabled') === 'true'
@@ -20,11 +23,7 @@ export async function trackIsHealthy(
 		console.log('🎲 Random track failure!')
 	}
 
-	const healthy =
-		!track.muted &&
-		track.readyState === 'live' &&
-		track.enabled &&
-		!randomFailure
+	const healthy = !track.muted && track.readyState === 'live' && !randomFailure
 
 	console.info(`👩🏻‍⚕️ track is ${healthy ? 'healthy' : 'unhealthy'}!`)
 	return healthy