diff --git a/.env b/.env
index 45252d2..5d1a799 100644
--- a/.env
+++ b/.env
@@ -1,3 +1,5 @@
 VITE_MATOMO_URL="https://leaphyeasybloqs.com/matomo/"
 VITE_MATOMO_SITE_ID="1"
 VITE_BACKEND_URL="https://leaphyeasybloqs.com"
+VITE_RECORDINGS_API="https://recordings.leaphyeasybloqs.com"
+VITE_RECORDINGS_ADDRESS=".leaphyeasybloqs.com"
diff --git a/.env.development b/.env.development
index 224a804..a2bf65e 100644
--- a/.env.development
+++ b/.env.development
@@ -1 +1,3 @@
 VITE_BACKEND_URL="https://testleaphyeasybloqs.com"
+VITE_RECORDINGS_API="http://localhost:5173"
+VITE_RECORDINGS_ADDRESS=".localhost"
diff --git a/package.json b/package.json
index 92bf69d..3a417cc 100644
--- a/package.json
+++ b/package.json
@@ -50,6 +50,8 @@
     "date-fns": "^4.1.0",
     "jszip": "^3.10.1",
     "monaco-editor": "^0.52.0",
+    "rrweb": "^2.0.0-alpha.4",
+    "socket.io-client": "^4.8.1",
     "svelte-fa": "^4.0.2",
     "svelte-i18n": "^4.0.0",
     "svelte-markdown": "^0.4.1",
diff --git a/src/assets/translations/en.json b/src/assets/translations/en.json
index 007bea4..7f5b881 100644
--- a/src/assets/translations/en.json
+++ b/src/assets/translations/en.json
@@ -145,5 +145,13 @@
 	"UNDEFINED_ROBOT": "Project name invalid",
 	"UNDEFINED_ROBOT_MESSAGE": "This does seem like a valid Leaphy Project, but the robot type was not included in the name, we've kept your previous robot selection for now.",
 	"ROBOT_RESERVED": "Unable to connect to robot",
-	"ROBOT_RESERVED_MESSAGE": "It appears that we're unable to connect to the robot, the port might be in use by another program or another tab"
+	"ROBOT_RESERVED_MESSAGE": "It appears that we're unable to connect to the robot, the port might be in use by another program or another tab",
+	"RECORDING": "Recording is on!",
+	"RECORDING_DESCRIPTION": "This version of Leaphy EasyBloqs will record your screen for use by an external party for the project {project}, by continuing you are automatically agreeing to this.\n\nTo disable recordings, you may visit our regular site.\n\nPlease enter your name to continue",
+	"SUBMISSIONS_CLOSED_DESCRIPTION": "The submissions for this project are closed, please use the regular site for Leaphy EasyBloqs to continue building",
+	"ERROR": "Something went wrong!",
+	"INVALID_PROJECT": "Invalid project",
+	"PROJECT_SUBMISSIONS_CLOSED": "Submissions closed",
+	"PROJECT_NO_OTHER_PARTICIPANTS": "Invalid name",
+	"NO_PARTICIPANTS": "No users found, please ask your administrator to create them"
 }
diff --git a/src/assets/translations/nl.json b/src/assets/translations/nl.json
index 2143071..04bad43 100644
--- a/src/assets/translations/nl.json
+++ b/src/assets/translations/nl.json
@@ -145,5 +145,13 @@
 	"UNDEFINED_ROBOT": "Ongeldige project naam",
 	"UNDEFINED_ROBOT_MESSAGE": "Dit project ziet er goed uit, maar het type robot staat niet in de naam, je vorige robot selectie is behouden",
 	"ROBOT_RESERVED": "Verbinding onmogelijk",
-	"ROBOT_RESERVED_MESSAGE": "Het lijkt erop dat we niet kunnen verbinden met de robot, de poort zou in gebruik kunnen zijn door een ander programma of een andere app"
+	"ROBOT_RESERVED_MESSAGE": "Het lijkt erop dat we niet kunnen verbinden met de robot, de poort zou in gebruik kunnen zijn door een ander programma of een andere app",
+	"RECORDING": "Schermopnames staan aan!",
+	"RECORDING_DESCRIPTION": "Deze versie van Leaphy EasyBloqs neemt automatisch schermopnames op, deze opnames worden gebruikt door externe partijen voor het project {project}, door door te gaan ga je hier automatisch mee akkoord.\n\nOm schermopnames uit te zetten, kan je altijd gebruik maken van de normale site.\n\nVul je naam in om door te gaan",
+	"SUBMISSIONS_CLOSED_DESCRIPTION": "De inzendingen voor dit project zijn gesloten, gebruik de normale site voor Leaphy EasyBloqs om verder te gaan",
+	"ERROR": "Er ging iets mis!",
+	"INVALID_PROJECT": "Ongeldig project",
+	"PROJECT_SUBMISSIONS_CLOSED": "Inzendingen gesloten",
+	"PROJECT_NO_OTHER_PARTICIPANTS": "Ongeldige naam",
+	"NO_PARTICIPANTS": "Geen deelnemers, vraag je docent om deze aan te maken"
 }
diff --git a/src/lib/components/core/popups/Popup.svelte b/src/lib/components/core/popups/Popup.svelte
index fd8be1e..e3574a8 100644
--- a/src/lib/components/core/popups/Popup.svelte
+++ b/src/lib/components/core/popups/Popup.svelte
@@ -28,7 +28,6 @@ setContext("state", state);
         position: absolute;
         background: var(--background);
         border-radius: 6px;
-        overflow: hidden;
         box-shadow: var(--shadow-el2);
     }
 
diff --git a/src/lib/components/core/popups/popups/Recording.svelte b/src/lib/components/core/popups/popups/Recording.svelte
new file mode 100644
index 0000000..77ac4ca
--- /dev/null
+++ b/src/lib/components/core/popups/popups/Recording.svelte
@@ -0,0 +1,118 @@
+<script lang="ts">
+import Button from "$components/ui/Button.svelte";
+import Select from "$components/ui/Select.svelte";
+import TextInput from "$components/ui/TextInput.svelte";
+import type { PopupState } from "$state/popup.svelte";
+import { faCircle } from "@fortawesome/free-solid-svg-icons";
+import { getContext } from "svelte";
+import Fa from "svelte-fa";
+import { _ } from "svelte-i18n";
+
+interface Props {
+	id: string;
+	name: string;
+	acceptsSubmissions: boolean;
+	suggestNames: boolean;
+	acceptsNewParticipants: boolean;
+	showSubmit: boolean;
+	names: { id: string; name: string }[];
+}
+const config: Props = $props();
+
+const popupState = getContext<PopupState>("state");
+let name = $state(
+	config.acceptsNewParticipants
+		? localStorage.getItem("name") || ""
+		: config.names[0]?.name,
+);
+
+async function done() {
+	localStorage.setItem("name", name);
+	popupState.close(name);
+}
+
+function onsubmit(event: SubmitEvent) {
+	event.preventDefault();
+	done();
+}
+</script>
+
+{#if config.acceptsSubmissions}
+	<form class="content" {onsubmit}>
+		<h2>
+			<span class="icon">
+				<Fa icon={faCircle} />
+			</span>
+			{$_("RECORDING")}
+		</h2>
+
+		<p class="description">{$_("RECORDING_DESCRIPTION", { values: {
+				project: config.name
+			}})}</p>
+
+		<div class="input">
+			{#if config.acceptsNewParticipants}
+				<TextInput
+					placeholder={$_("NAME")}
+					bind:value={name}
+					suggestions={config.names?.map(name => name.name)}
+					mode="secondary"
+					required
+					focus
+					rounded={true}>
+				</TextInput>
+			{:else}
+				{#if config.names.length > 0}
+					<Select
+						options={config.names.map(name => ([name.name, name.name]))}
+						bind:value={name}
+						mode="secondary" full
+					/>
+				{:else}
+					<p>{$_("NO_PARTICIPANTS")}</p>
+				{/if}
+
+			{/if}
+		</div>
+
+		<div class="actions">
+			<Button type="submit" mode={"primary"} name={$_("CONTINUE")}/>
+		</div>
+	</form>
+{:else}
+	<form action={import.meta.env.VITE_BACKEND_URL} class="content">
+		<h2>{$_("PROJECT_SUBMISSIONS_CLOSED")}</h2>
+		<p class="description">{$_("SUBMISSIONS_CLOSED_DESCRIPTION")}</p>
+		<div class="actions">
+			<Button type="submit" mode="primary" name={$_("CONTINUE")} />
+		</div>
+	</form>
+{/if}
+
+<style>
+	.input {
+		padding-bottom: 10px;
+	}
+
+	.content {
+		padding: 20px;
+		display: flex;
+		flex-direction: column;
+		min-width: 400px;
+		text-align: center;
+	}
+
+	.actions {
+		display: flex;
+		justify-content: center;
+		margin-top: 20px;
+	}
+
+	.icon {
+		color: red;
+	}
+
+	.description {
+		white-space: pre-line;
+	}
+</style>
diff --git a/src/lib/components/ui/Select.svelte b/src/lib/components/ui/Select.svelte
index 906b788..8659639 100644
--- a/src/lib/components/ui/Select.svelte
+++ b/src/lib/components/ui/Select.svelte
@@ -1,20 +1,22 @@
 <script lang="ts">
-import { computePosition } from "@floating-ui/dom";
+import SelectContext from "$components/ui/SelectContext.svelte";
 import { faCaretDown } from "@fortawesome/free-solid-svg-icons";
-import { tick } from "svelte";
 import Fa from "svelte-fa";
 
 interface Props {
 	options: [string, any][];
+	full?: boolean;
+	mode?: "primary" | "secondary";
 	value: any;
 }
-let { options, value = $bindable() }: Props = $props();
-
-let preview: HTMLButtonElement = $state();
-let content: HTMLDivElement = $state();
+let {
+	options,
+	value = $bindable(),
+	full = false,
+	mode = "primary",
+}: Props = $props();
 
 let open = $state(false);
-let position = $state<{ x: number; y: number }>({ x: 0, y: 0 });
 
 function getName(value: any) {
 	return options.find(([_, data]) => data === value)[0];
@@ -22,10 +24,6 @@ function getName(value: any) {
 
 async function onclick() {
 	open = !open;
-	if (!open) return;
-	await tick();
-
-	position = await computePosition(preview, content);
 }
 
 function select(newValue: string) {
@@ -34,30 +32,26 @@ function select(newValue: string) {
 }
 </script>
 
-<div class="select">
-    <button {onclick} class:open bind:this={preview} class="preview">
+<div class="select" class:full class:secondary={mode === 'secondary'}>
+    <button type="button" {onclick} class:open class="preview">
         <div class="name">{getName(value)}</div>
         <div class="icon"><Fa icon={faCaretDown} /></div>
     </button>
-    {#if open}
-        <div bind:this={content} class="popup">
-            <div class="container">
-                {#each options as option (option[1])}
-                    <button onclick={() => select(option[1])} class="option"
-                        >{option[0]}</button
-                    >
-                {/each}
-            </div>
-        </div>
-    {/if}
+    <SelectContext {mode} {open} {options} onselect={select} />
 </div>
 
 <style>
+	.select {
+		position: relative;
+		width: 150px;
+	}
+	.full {
+		width: 100%;
+	}
     .preview {
-        width: 150px;
+        width: 100%;
     }
-    .preview,
-    .option {
+    .preview {
         position: relative;
         background: var(--primary-dark-tint);
         color: var(--on-primary);
@@ -65,6 +59,10 @@ function select(newValue: string) {
         padding: 10px 15px;
         border-radius: 20px;
     }
+	.secondary .preview {
+		background: var(--secondary);
+		color: var(--on-secondary);
+	}
     .icon {
         position: absolute;
         right: 15px;
@@ -75,29 +73,4 @@ function select(newValue: string) {
         border-bottom-left-radius: 0;
         border-bottom-right-radius: 0;
     }
-
-    .popup {
-        width: 150px;
-        position: fixed;
-        z-index: 99;
-        border-radius: 20px;
-        border-top-left-radius: 0;
-        border-top-right-radius: 0;
-        overflow: hidden;
-        box-shadow: var(--shadow-el1);
-    }
-
-    .container {
-        overflow-y: auto;
-        max-height: 200px;
-
-        display: flex;
-        flex-direction: column;
-    }
-
-    .option {
-        background: var(--primary);
-        border-radius: 0;
-        text-overflow: ellipsis;
-    }
 </style>
diff --git a/src/lib/components/ui/SelectContext.svelte b/src/lib/components/ui/SelectContext.svelte
new file mode 100644
index 0000000..0979360
--- /dev/null
+++ b/src/lib/components/ui/SelectContext.svelte
@@ -0,0 +1,68 @@
+<script lang="ts">
+interface Props {
+	open: boolean;
+	options: [string, any][];
+	mode: "primary" | "secondary";
+	onselect?: (value: string) => void;
+}
+const { open, options, mode, onselect }: Props = $props();
+</script>
+
+{#if open}
+	<div class="popup" class:secondary={mode === 'secondary'}>
+		<div class="container">
+			{#each options as option (option[1])}
+				<button type="button" onclick={() => onselect(option[1])} class="option"
+				>{option[0]}</button>
+			{/each}
+		</div>
+	</div>
+{/if}
+
+<style>
+	.option {
+		position: relative;
+		background: var(--primary-dark-tint);
+		color: var(--on-primary);
+		border: none;
+		padding: 10px 15px;
+		border-radius: 20px;
+	}
+
+	.secondary .option {
+		background: var(--secondary);
+		color: var(--on-secondary);
+	}
+
+	.popup {
+		width: 100%;
+		position: absolute;
+		max-height: 400px;
+		overflow-y: auto;
+		z-index: 99;
+		border-radius: 20px;
+		border-top-left-radius: 0;
+		border-top-right-radius: 0;
+		overflow: hidden;
+		box-shadow: var(--shadow-el1);
+	}
+
+	.container {
+		overflow-y: auto;
+		max-height: 200px;
+
+		display: flex;
+		flex-direction: column;
+	}
+
+	.option {
+		background: var(--primary);
+		border-radius: 0;
+		text-overflow: ellipsis;
+		width: 100%;
+	}
+
+	.secondary .option {
+		background: var(--robot);
+	}
+</style>
diff --git a/src/lib/components/ui/TextInput.svelte b/src/lib/components/ui/TextInput.svelte
index 0948ac4..d8f543a 100644
--- a/src/lib/components/ui/TextInput.svelte
+++ b/src/lib/components/ui/TextInput.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-import { onMount } from "svelte";
+import SelectContext from "$components/ui/SelectContext.svelte";
+import { onMount, tick } from "svelte";
 
 interface Props {
 	placeholder?: string;
@@ -10,6 +11,7 @@ interface Props {
 	required?: boolean;
 	type?: string;
 	input?: HTMLInputElement;
+	suggestions?: string[];
 }
 
 let {
@@ -21,26 +23,62 @@ let {
 	required,
 	type = "text",
 	input = $bindable(),
+	suggestions = [],
 }: Props = $props();
 
+let selected = $state(false);
+let container = $state<HTMLDivElement>();
 onMount(() => {
 	if (focus) input.focus();
 });
+
+function getSuggestions(value: string) {
+	return suggestions.filter((suggestion) =>
+		suggestion.toUpperCase().includes(value.toUpperCase()),
+	);
+}
+
+const relevantSuggestions = $derived(getSuggestions(value));
+
+function onclick(event: MouseEvent) {
+	if (container.contains(event.target as Node)) return;
+	selected = false;
+}
 </script>
 
-<input
-	bind:this={input}
-	class="input"
-	{type}
-	{placeholder}
-	bind:value
-	class:primary={mode === "primary"}
-	class:secondary={mode === "secondary"}
-	class:rounded
-	{required}
-/>
+<svelte:body {onclick} />
+<div bind:this={container} class="container">
+	<input
+		bind:this={input}
+		class="input"
+		{type}
+		{placeholder}
+		bind:value
+		class:primary={mode === "primary"}
+		class:secondary={mode === "secondary"}
+		class:disableBottomRoundings={selected && relevantSuggestions.length > 0}
+		class:rounded
+
+		onfocus={() => selected = true}
+		{required}
+	/>
+	{#if relevantSuggestions.length > 0}
+		<SelectContext
+			{mode}
+			open={selected}
+			options={relevantSuggestions.map(suggestion => [suggestion, suggestion])}
+			onselect={newValue => {
+				value = newValue;
+				selected = false
+			}}
+		/>
+	{/if}
+</div>
 
 <style>
+	.container {
+		position: relative;
+	}
 	.input {
 		border: none;
 		padding: 5px 10px;
@@ -71,4 +109,9 @@ onMount(() => {
 	.secondary::placeholder {
 		color: var(--on-secondary-muted);
 	}
+
+	.disableBottomRoundings {
+		border-bottom-left-radius: 0;
+		border-bottom-right-radius: 0;
+	}
 </style>
diff --git a/src/lib/recording.ts b/src/lib/recording.ts
new file mode 100644
index 0000000..cf44d64
--- /dev/null
+++ b/src/lib/recording.ts
@@ -0,0 +1,54 @@
+import ErrorPopup from "$components/core/popups/popups/Error.svelte";
+import Recording from "$components/core/popups/popups/Recording.svelte";
+import PopupState from "$state/popup.svelte";
+import { record } from "rrweb";
+import { io } from "socket.io-client";
+
+export async function requestRecording(project: { id: string }) {
+	const name = (await PopupState.open({
+		component: Recording,
+		data: project,
+		allowInteraction: false,
+	})) as string;
+	setupRecording(project, name);
+}
+
+export default function setupRecording(project: { id: string }, name: string) {
+	const socket = io(import.meta.env.VITE_RECORDINGS_API, {
+		extraHeaders: {
+			project: project.id,
+			name,
+		},
+	});
+	socket.on("error", async (msg) => {
+		socket.disconnect();
+		await PopupState.open({
+			component: ErrorPopup,
+			data: {
+				title: "ERROR",
+				message: msg,
+			},
+			allowInteraction: false,
+		});
+		await requestRecording(project);
+	});
+
+	let events = [];
+	record({
+		emit(event) {
+			events.push(event);
+		},
+	});
+
+	function send() {
+		console.log("send");
+		socket.emit("write", {
+			data: events.map((e) => JSON.stringify(e)).join("\n"),
+		});
+		events = [];
+	}
+
+	socket.on("connect", () => {
+		setInterval(send, 10 * 1000);
+	});
+}
diff --git a/src/lib/state/popup.svelte.ts b/src/lib/state/popup.svelte.ts
index f85f4b6..47d0abc 100644
--- a/src/lib/state/popup.svelte.ts
+++ b/src/lib/state/popup.svelte.ts
@@ -1,7 +1,9 @@
 import BrowserNotSupported from "$components/core/popups/popups/BrowserNotSupported.svelte";
 import Credits from "$components/core/popups/popups/Credits.svelte";
 import LanguageSelector from "$components/core/popups/popups/LanguageSelector.svelte";
+import Recording from "$components/core/popups/popups/Recording.svelte";
 import type { Component } from "svelte";
+import { requestRecording } from "../recording";
 
 export enum Anchor {
 	TopLeft = "0 0",
@@ -99,6 +101,27 @@ class PopupsState {
 				allowInteraction: false,
 			});
 		}
+
+		const [project] = location.hostname.split(
+			import.meta.env.VITE_RECORDINGS_ADDRESS,
+		);
+		if (
+			project &&
+			location.hostname.endsWith(import.meta.env.VITE_RECORDINGS_ADDRESS)
+		) {
+			let config: any;
+			try {
+				const res = await fetch(
+					`${import.meta.env.VITE_RECORDINGS_API}/api/projects/${project}`,
+				);
+				config = await res.json();
+			} catch (e) {
+				window.location.replace(import.meta.env.VITE_BACKEND_URL);
+				return;
+			}
+
+			await requestRecording(config);
+		}
 	}
 
 	clear() {
diff --git a/src/main.ts b/src/main.ts
index 88302d5..e37aafd 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -7,6 +7,7 @@ import App from "./App.svelte";
 import enTranslations from "./assets/translations/en.json";
 import nlTranslations from "./assets/translations/nl.json";
 import initMatomo from "./lib/matomo";
+import setupRecording from "./lib/recording";
 import initSentry from "./lib/sentry";
 
 initSentry();
diff --git a/yarn.lock b/yarn.lock
index 0953188..4e30423 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -723,6 +723,11 @@
   resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.28.1.tgz#4dff5c4259ebe6c5b4a8f2c5bc3829b7a8447ff0"
   integrity sha512-ZvK2jBafvttJjoIdKm/Q/Bh7IJ1Ose9IBOwpOXcOvW3ikGTQGmKDgxTC6oCAzW6PynbkKP8+um1du81XJHZ0JA==
 
+"@rrweb/types@^2.0.0-alpha.4":
+  version "2.0.0-alpha.18"
+  resolved "https://registry.yarnpkg.com/@rrweb/types/-/types-2.0.0-alpha.18.tgz#e1d9af844cebbf30a2be8808f6cf64f5df3e7f50"
+  integrity sha512-iMH3amHthJZ9x3gGmBPmdfim7wLGygC2GciIkw2A6SO8giSn8PHYtRT8OKNH4V+k3SZ6RSnYHcTQxBA7pSWZ3Q==
+
 "@sentry-internal/browser-utils@8.42.0":
   version "8.42.0"
   resolved "https://registry.yarnpkg.com/@sentry-internal/browser-utils/-/browser-utils-8.42.0.tgz#18155ea3d01ddb0234a6e9f59a2c6c329ff09dde"
@@ -955,6 +960,11 @@
     "@serialport/bindings-interface" "1.2.2"
     debug "4.3.4"
 
+"@socket.io/component-emitter@~3.1.0":
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/@socket.io/component-emitter/-/component-emitter-3.1.2.tgz#821f8442f4175d8f0467b9daf26e3a18e2d02af2"
+  integrity sha512-9BCxFwvbGg/RsZK9tjXd8s4UcwR0MWeFQ1XEKIQVVvAGJyINdrqKMcTRyLoK8Rse1GjzLV9cwjWV1olXRWEXVA==
+
 "@sveltejs/vite-plugin-svelte-inspector@^4.0.0":
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/@sveltejs/vite-plugin-svelte-inspector/-/vite-plugin-svelte-inspector-4.0.1.tgz#2f99a4a593bb910d1492f6c00a042b521c07147e"
@@ -1072,6 +1082,11 @@
   dependencies:
     moment "^2.10.2"
 
+"@types/css-font-loading-module@0.0.7":
+  version "0.0.7"
+  resolved "https://registry.yarnpkg.com/@types/css-font-loading-module/-/css-font-loading-module-0.0.7.tgz#2f98ede46acc0975de85c0b7b0ebe06041d24601"
+  integrity sha512-nl09VhutdjINdWyXxHWN/w9zlNCfr60JUqJbd24YXUuCwgeL0TpFSdElCwb6cxfB6ybE19Gjj4g0jsgkXxKv1Q==
+
 "@types/estree@1.0.6", "@types/estree@^1.0.1", "@types/estree@^1.0.5", "@types/estree@^1.0.6":
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.6.tgz#628effeeae2064a1b4e79f78e81d87b7e5fc7b50"
@@ -1104,6 +1119,11 @@
   resolved "https://registry.yarnpkg.com/@types/wicg-file-system-access/-/wicg-file-system-access-2023.10.5.tgz#14b3c25eb4d914b5734795bdea71da229f918b9d"
   integrity sha512-e9kZO9kCdLqT2h9Tw38oGv9UNzBBWaR1MzuAavxPcsV/7FJ3tWbU6RI3uB+yKIDPGLkGVbplS52ub0AcRLvrhA==
 
+"@xstate/fsm@^1.4.0":
+  version "1.6.5"
+  resolved "https://registry.yarnpkg.com/@xstate/fsm/-/fsm-1.6.5.tgz#f599e301997ad7e3c572a0b1ff0696898081bea5"
+  integrity sha512-b5o1I6aLNeYlU/3CPlj/Z91ybk1gUsKT+5NAJI+2W4UjvS5KLG28K9v5UvNoFVjHV8PajVZ00RH3vnjyQO7ZAw==
+
 "@xterm/addon-fit@^0.10.0":
   version "0.10.0"
   resolved "https://registry.yarnpkg.com/@xterm/addon-fit/-/addon-fit-0.10.0.tgz#bebf87fadd74e3af30fdcdeef47030e2592c6f55"
@@ -1169,6 +1189,11 @@ balanced-match@^1.0.0:
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
   integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
 
+base64-arraybuffer@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz#1c37589a7c4b0746e34bd1feb951da2df01c1bdc"
+  integrity sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==
+
 base64-js@^1.5.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.5.1.tgz#1b1b440160a5bf7ad40b650f095963481903930a"
@@ -1320,7 +1345,7 @@ debug@4.3.4:
   dependencies:
     ms "2.1.2"
 
-debug@^4.3.3:
+debug@^4.3.3, debug@~4.3.1, debug@~4.3.2:
   version "4.3.7"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.7.tgz#87945b4151a011d76d95a198d7111c865c360a52"
   integrity sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==
@@ -1359,6 +1384,22 @@ electron-to-chromium@^1.5.41:
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.5.71.tgz#d8b5dba1e55b320f2f4e9b1ca80738f53fcfec2b"
   integrity sha512-dB68l59BI75W1BUGVTAEJy45CEVuEGy9qPVVQ8pnHyHMn36PLPPoE1mjLH+lo9rKulO3HC2OhbACI/8tCqJBcA==
 
+engine.io-client@~6.6.1:
+  version "6.6.2"
+  resolved "https://registry.yarnpkg.com/engine.io-client/-/engine.io-client-6.6.2.tgz#e0a09e1c90effe5d6264da1c56d7281998f1e50b"
+  integrity sha512-TAr+NKeoVTjEVW8P3iHguO1LO6RlUz9O5Y8o7EY0fU+gY1NYqas7NN3slpFtbXEsLMHk0h90fJMfKjRkQ0qUIw==
+  dependencies:
+    "@socket.io/component-emitter" "~3.1.0"
+    debug "~4.3.1"
+    engine.io-parser "~5.2.1"
+    ws "~8.17.1"
+    xmlhttprequest-ssl "~2.1.1"
+
+engine.io-parser@~5.2.1:
+  version "5.2.3"
+  resolved "https://registry.yarnpkg.com/engine.io-parser/-/engine.io-parser-5.2.3.tgz#00dc5b97b1f233a23c9398d0209504cf5f94d92f"
+  integrity sha512-HqD3yTBfnBxIrbnM1DoD6Pcq8NECnh8d4As1Qgh0z5Gg3jRRIqijury0CL3ghu/edArpUYiYqQiDUQBIs4np3Q==
+
 entities@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/entities/-/entities-4.5.0.tgz#5d268ea5e7113ec74c4d033b79ea5a35a488fb48"
@@ -1531,6 +1572,11 @@ fdir@^6.2.0:
   resolved "https://registry.yarnpkg.com/fdir/-/fdir-6.4.2.tgz#ddaa7ce1831b161bc3657bb99cb36e1622702689"
   integrity sha512-KnhMXsKSPZlAhp7+IjUkRZKPb4fUyccpDrdFXbi4QL1qkmFh9kVY09Yox+n4MaOb3lHZ1Tv829C3oaaXoMYPDQ==
 
+fflate@^0.4.4:
+  version "0.4.8"
+  resolved "https://registry.yarnpkg.com/fflate/-/fflate-0.4.8.tgz#f90b82aefbd8ac174213abb338bd7ef848f0f5ae"
+  integrity sha512-FJqqoDBR00Mdj9ppamLa/Y7vxm+PRmNWA67N846RvsoYVMKB4q3y/de5PA7gUmRMYK/8CMz2GDZQmCRN1wBcWA==
+
 fill-range@^7.1.1:
   version "7.1.1"
   resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.1.1.tgz#44265d3cac07e3ea7dc247516380643754a05292"
@@ -1911,6 +1957,11 @@ minipass@^4.2.4:
   resolved "https://registry.yarnpkg.com/minipass/-/minipass-7.1.2.tgz#93a9626ce5e5e66bd4db86849e7515e92340a707"
   integrity sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==
 
+mitt@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/mitt/-/mitt-3.0.1.tgz#ea36cf0cc30403601ae074c8f77b7092cdab36d1"
+  integrity sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==
+
 moment@^2.10.2:
   version "2.30.1"
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.30.1.tgz#f8c91c07b7a786e30c59926df530b4eac96974ae"
@@ -2148,11 +2199,37 @@ rollup@^4.23.0:
     "@rollup/rollup-win32-x64-msvc" "4.28.1"
     fsevents "~2.3.2"
 
+rrdom@^0.1.7:
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/rrdom/-/rrdom-0.1.7.tgz#f2f49bfd01b59291bb7b0d981371a5e02a18e2aa"
+  integrity sha512-ZLd8f14z9pUy2Hk9y636cNv5Y2BMnNEY99wxzW9tD2BLDfe1xFxtLjB4q/xCBYo6HRe0wofzKzjm4JojmpBfFw==
+  dependencies:
+    rrweb-snapshot "^2.0.0-alpha.4"
+
 rrweb-cssom@^0.6.0:
   version "0.6.0"
   resolved "https://registry.yarnpkg.com/rrweb-cssom/-/rrweb-cssom-0.6.0.tgz#ed298055b97cbddcdeb278f904857629dec5e0e1"
   integrity sha512-APM0Gt1KoXBz0iIkkdB/kfvGOwC4UuJFeG/c+yV7wSc7q96cG/kJ0HiYCnzivD9SB53cLV1MlHFNfOuPaadYSw==
 
+rrweb-snapshot@^2.0.0-alpha.4:
+  version "2.0.0-alpha.4"
+  resolved "https://registry.yarnpkg.com/rrweb-snapshot/-/rrweb-snapshot-2.0.0-alpha.4.tgz#2801bf5946177b9d685a01661a62d9d2e958f174"
+  integrity sha512-KQ2OtPpXO5jLYqg1OnXS/Hf+EzqnZyP5A+XPqBCjYpj3XIje/Od4gdUwjbFo3cVuWq5Cw5Y1d3/xwgIS7/XpQQ==
+
+rrweb@^2.0.0-alpha.4:
+  version "2.0.0-alpha.4"
+  resolved "https://registry.yarnpkg.com/rrweb/-/rrweb-2.0.0-alpha.4.tgz#3c7cf2f1bcf44f7a88dd3fad00ee8d6dd711f258"
+  integrity sha512-wEHUILbxDPcNwkM3m4qgPgXAiBJyqCbbOHyVoNEVBJzHszWEFYyTbrZqUdeb1EfmTRC2PsumCIkVcomJ/xcOzA==
+  dependencies:
+    "@rrweb/types" "^2.0.0-alpha.4"
+    "@types/css-font-loading-module" "0.0.7"
+    "@xstate/fsm" "^1.4.0"
+    base64-arraybuffer "^1.0.1"
+    fflate "^0.4.4"
+    mitt "^3.0.0"
+    rrdom "^0.1.7"
+    rrweb-snapshot "^2.0.0-alpha.4"
+
 run-parallel@^1.1.9:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/run-parallel/-/run-parallel-1.2.0.tgz#66d1368da7bdf921eb9d95bd1a9229e7f21a43ee"
@@ -2214,6 +2291,24 @@ setimmediate@^1.0.5:
   resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285"
   integrity sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==
 
+socket.io-client@^4.8.1:
+  version "4.8.1"
+  resolved "https://registry.yarnpkg.com/socket.io-client/-/socket.io-client-4.8.1.tgz#1941eca135a5490b94281d0323fe2a35f6f291cb"
+  integrity sha512-hJVXfu3E28NmzGk8o1sHhN3om52tRvwYeidbj7xKy2eIIse5IoKX3USlS6Tqt3BHAtflLIkCQBkzVrEEfWUyYQ==
+  dependencies:
+    "@socket.io/component-emitter" "~3.1.0"
+    debug "~4.3.2"
+    engine.io-client "~6.6.1"
+    socket.io-parser "~4.2.4"
+
+socket.io-parser@~4.2.4:
+  version "4.2.4"
+  resolved "https://registry.yarnpkg.com/socket.io-parser/-/socket.io-parser-4.2.4.tgz#c806966cf7270601e47469ddeec30fbdfda44c83"
+  integrity sha512-/GbIKmo8ioc+NIWIhwdecY0ge+qVBSMdgxGygevmdHj24bsfgtCmcUUcQ5ZzcylGFHsN3k4HB4Cgkl96KVnuew==
+  dependencies:
+    "@socket.io/component-emitter" "~3.1.0"
+    debug "~4.3.1"
+
 source-map-js@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.1.tgz#1ce5650fddd87abc099eda37dcff024c2667ae46"
@@ -2510,6 +2605,11 @@ ws@^8.13.0:
   resolved "https://registry.yarnpkg.com/ws/-/ws-8.18.0.tgz#0d7505a6eafe2b0e712d232b42279f53bc289bbc"
   integrity sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==
 
+ws@~8.17.1:
+  version "8.17.1"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-8.17.1.tgz#9293da530bb548febc95371d90f9c878727d919b"
+  integrity sha512-6XQFvXTkbfUOZOKKILFG1PDK2NDQs4azKQl26T0YS5CxqWLgXajbPZ+h4gZekJyRqFU8pvnbAbbs/3TgRPy+GQ==
+
 xml-name-validator@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/xml-name-validator/-/xml-name-validator-4.0.0.tgz#79a006e2e63149a8600f15430f0a4725d1524835"
@@ -2520,6 +2620,11 @@ xmlchars@^2.2.0:
   resolved "https://registry.yarnpkg.com/xmlchars/-/xmlchars-2.2.0.tgz#060fe1bcb7f9c76fe2a17db86a9bc3ab894210cb"
   integrity sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==
 
+xmlhttprequest-ssl@~2.1.1:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.1.2.tgz#e9e8023b3f29ef34b97a859f584c5e6c61418e23"
+  integrity sha512-TEU+nJVUUnA4CYJFLvK5X9AOeH4KvDvhIfm0vV1GaQRtchnG0hgK5p8hw/xjv8cunWYCsiPCSDzObPyhEwq3KQ==
+
 yallist@^3.0.2:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.1.1.tgz#dbb7daf9bfd8bac9ab45ebf602b8cbad0d5d08fd"