plum-e2e 2.8.6 → 2.9.1

package/frontend/package-lock.json

@@ -1,13 +1,15 @@
 {
 	"name": "plum-frontend",
-	"version": "1.3.3",
+	"version": "1.4.0",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "plum-frontend",
-			"version": "1.3.3",
+			"version": "1.4.0",
+			"license": "MIT",
 			"dependencies": {
+				"rrweb-player": "^2.1.1",
 				"socket.io-client": "^4.8.1"
 			},
 			"devDependencies": {
@@ -986,6 +988,38 @@
 				"win32"
 			]
 		},
+		"node_modules/@rrweb/packer": {
+			"version": "2.1.1",
+			"resolved": "https://registry.npmjs.org/@rrweb/packer/-/packer-2.1.1.tgz",
+			"integrity": "sha512-xPGT7/Cfn1yHD2MOwQhX/8yTvNculurUxPT6ZKXVW8Wh/LI7Jn19L+e8PYKFhj/M89uwNeoTr6hiUQxgb8SMzQ==",
+			"license": "MIT",
+			"dependencies": {
+				"@rrweb/types": "^2.1.1",
+				"fflate": "^0.4.4"
+			}
+		},
+		"node_modules/@rrweb/replay": {
+			"version": "2.1.1",
+			"resolved": "https://registry.npmjs.org/@rrweb/replay/-/replay-2.1.1.tgz",
+			"integrity": "sha512-jq64eyJvrh/ioBS1MpDrs/Lj+7QY2TW4xGxp4g4LJKdltSkqMjMbUmhTDcpzaEDZt66S0gasGcgqCulsksSXnw==",
+			"license": "MIT",
+			"dependencies": {
+				"@rrweb/types": "^2.1.1",
+				"rrweb": "^2.1.1"
+			}
+		},
+		"node_modules/@rrweb/types": {
+			"version": "2.1.1",
+			"resolved": "https://registry.npmjs.org/@rrweb/types/-/types-2.1.1.tgz",
+			"integrity": "sha512-g0I3nCNL1S7slDXwhunxOuOoswkY8WVZJQrPFiwixOc6xoD514d1JLTuyAzCKIox8g/PaLKtV5g31Uk42inQSQ==",
+			"license": "MIT"
+		},
+		"node_modules/@rrweb/utils": {
+			"version": "2.1.1",
+			"resolved": "https://registry.npmjs.org/@rrweb/utils/-/utils-2.1.1.tgz",
+			"integrity": "sha512-x2SgJAD3YJ9eVcLZ5l6OqWMtczdA3VfS5XqPeqpZdQgV9oh6Id5GK2cDN4bimnkqryOcIJdz8cTvV0yNvqQ+nA==",
+			"license": "MIT"
+		},
 		"node_modules/@socket.io/component-emitter": {
 			"version": "3.1.2",
 			"resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.1.2.tgz",
@@ -1087,12 +1121,24 @@
 				"vite": "^6.0.0"
 			}
 		},
+		"node_modules/@tsconfig/svelte": {
+			"version": "1.0.13",
+			"resolved": "https://registry.npmjs.org/@tsconfig/svelte/-/svelte-1.0.13.tgz",
+			"integrity": "sha512-5lYJP45Xllo4yE/RUBccBT32eBlRDbqN8r1/MIvQbKxW3aFqaYPCNgm8D5V20X4ShHcwvYWNlKg3liDh1MlBoA==",
+			"license": "MIT"
+		},
 		"node_modules/@types/cookie": {
 			"version": "0.6.0",
 			"resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz",
 			"integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==",
 			"dev": true
 		},
+		"node_modules/@types/css-font-loading-module": {
+			"version": "0.0.7",
+			"resolved": "https://registry.npmjs.org/@types/css-font-loading-module/-/css-font-loading-module-0.0.7.tgz",
+			"integrity": "sha512-nl09VhutdjINdWyXxHWN/w9zlNCfr60JUqJbd24YXUuCwgeL0TpFSdElCwb6cxfB6ybE19Gjj4g0jsgkXxKv1Q==",
+			"license": "MIT"
+		},
 		"node_modules/@types/estree": {
 			"version": "1.0.9",
 			"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.9.tgz",
@@ -1107,6 +1153,12 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/@xstate/fsm": {
+			"version": "1.6.5",
+			"resolved": "https://registry.npmjs.org/@xstate/fsm/-/fsm-1.6.5.tgz",
+			"integrity": "sha512-b5o1I6aLNeYlU/3CPlj/Z91ybk1gUsKT+5NAJI+2W4UjvS5KLG28K9v5UvNoFVjHV8PajVZ00RH3vnjyQO7ZAw==",
+			"license": "MIT"
+		},
 		"node_modules/acorn": {
 			"version": "8.14.0",
 			"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.0.tgz",
@@ -1146,6 +1198,15 @@
 				"node": ">= 0.4"
 			}
 		},
+		"node_modules/base64-arraybuffer": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
+			"integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.6.0"
+			}
+		},
 		"node_modules/clsx": {
 			"version": "2.1.1",
 			"resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
@@ -1301,6 +1362,12 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/fflate": {
+			"version": "0.4.9",
+			"resolved": "https://registry.npmjs.org/fflate/-/fflate-0.4.9.tgz",
+			"integrity": "sha512-zdxgIEddhfsyCaWpJ2SdXEP8ZMrKJ6+5jl4OupODcywU0IhRk6gdXuVGcPICyfx2H97hVK7xmJtRLPjkxAX8Vw==",
+			"license": "MIT"
+		},
 		"node_modules/fsevents": {
 			"version": "2.3.3",
 			"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@@ -1377,17 +1444,6 @@
 				"@types/estree": "^1.0.6"
 			}
 		},
-		"node_modules/jiti": {
-			"version": "1.21.7",
-			"resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz",
-			"integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
-			"dev": true,
-			"optional": true,
-			"peer": true,
-			"bin": {
-				"jiti": "bin/jiti.js"
-			}
-		},
 		"node_modules/kleur": {
 			"version": "4.1.5",
 			"resolved": "https://registry.npmjs.org/kleur/-/kleur-4.1.5.tgz",
@@ -1412,6 +1468,12 @@
 				"@jridgewell/sourcemap-codec": "^1.5.0"
 			}
 		},
+		"node_modules/mitt": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz",
+			"integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==",
+			"license": "MIT"
+		},
 		"node_modules/mri": {
 			"version": "1.2.0",
 			"resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz",
@@ -1439,7 +1501,6 @@
 			"version": "3.3.8",
 			"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.8.tgz",
 			"integrity": "sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==",
-			"dev": true,
 			"funding": [
 				{
 					"type": "github",
@@ -1462,14 +1523,12 @@
 		"node_modules/picocolors": {
 			"version": "1.1.1",
 			"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
-			"integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
-			"dev": true
+			"integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="
 		},
 		"node_modules/postcss": {
 			"version": "8.5.3",
 			"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.3.tgz",
 			"integrity": "sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A==",
-			"dev": true,
 			"funding": [
 				{
 					"type": "opencollective",
@@ -1558,6 +1617,51 @@
 				"fsevents": "~2.3.2"
 			}
 		},
+		"node_modules/rrdom": {
+			"version": "2.1.1",
+			"resolved": "https://registry.npmjs.org/rrdom/-/rrdom-2.1.1.tgz",
+			"integrity": "sha512-VBkTF3bGNqcZjqnbo/gKi9GVQPIxiG0dofw7CQdAZQFQ2juJdt2YKIf3oS9QudL8HTpGh9bz5TUN+3amBn1Geg==",
+			"license": "MIT",
+			"dependencies": {
+				"rrweb-snapshot": "^2.1.1"
+			}
+		},
+		"node_modules/rrweb": {
+			"version": "2.1.1",
+			"resolved": "https://registry.npmjs.org/rrweb/-/rrweb-2.1.1.tgz",
+			"integrity": "sha512-ToxhJg3SsrAhw+/DPhI/2iiwZQIrGK5BGkZ0kHn4qUExcvQYRaolkciD1FWX2+r6vf1IxFyhsoRY18h3D+XoCg==",
+			"license": "MIT",
+			"dependencies": {
+				"@rrweb/types": "^2.1.1",
+				"@rrweb/utils": "^2.1.1",
+				"@types/css-font-loading-module": "0.0.7",
+				"@xstate/fsm": "^1.4.0",
+				"base64-arraybuffer": "^1.0.1",
+				"mitt": "^3.0.0",
+				"rrdom": "^2.1.1",
+				"rrweb-snapshot": "^2.1.1"
+			}
+		},
+		"node_modules/rrweb-player": {
+			"version": "2.1.1",
+			"resolved": "https://registry.npmjs.org/rrweb-player/-/rrweb-player-2.1.1.tgz",
+			"integrity": "sha512-oiAWx/m9Pz0DD5jlJdrF8QlotOZZBK0jINNSYAixxhGa2dI1TrzVVmF4eWFSd6AR8f2zjazKXI/PXCqj3PttXQ==",
+			"license": "MIT",
+			"dependencies": {
+				"@rrweb/packer": "^2.1.1",
+				"@rrweb/replay": "^2.1.1",
+				"@tsconfig/svelte": "^1.0.0"
+			}
+		},
+		"node_modules/rrweb-snapshot": {
+			"version": "2.1.1",
+			"resolved": "https://registry.npmjs.org/rrweb-snapshot/-/rrweb-snapshot-2.1.1.tgz",
+			"integrity": "sha512-al4Kx7Am7YlIn/5Yb2EMr7cdmjGiK+cLhdilJEXqkFXgpnys8t/yMJumXy2Ormgirpg3MBnFha0GTgny+iIL2w==",
+			"license": "MIT",
+			"dependencies": {
+				"postcss": "^8.4.38"
+			}
+		},
 		"node_modules/sade": {
 			"version": "1.8.1",
 			"resolved": "https://registry.npmjs.org/sade/-/sade-1.8.1.tgz",
@@ -1652,7 +1756,6 @@
 			"version": "1.2.1",
 			"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
 			"integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
-			"dev": true,
 			"engines": {
 				"node": ">=0.10.0"
 			}
@@ -1820,20 +1923,6 @@
 				"node": ">=0.4.0"
 			}
 		},
-		"node_modules/yaml": {
-			"version": "2.7.0",
-			"resolved": "https://registry.npmjs.org/yaml/-/yaml-2.7.0.tgz",
-			"integrity": "sha512-+hSoy/QHluxmC9kCIJyL/uyFmLmc+e5CFR5Wa+bpIhIj85LVb9ZH2nVnqrHoSvKogwODv0ClqZkmiSSaIH5LTA==",
-			"dev": true,
-			"optional": true,
-			"peer": true,
-			"bin": {
-				"yaml": "bin.mjs"
-			},
-			"engines": {
-				"node": ">= 14"
-			}
-		},
 		"node_modules/zimmerframe": {
 			"version": "1.1.2",
 			"resolved": "https://registry.npmjs.org/zimmerframe/-/zimmerframe-1.1.2.tgz",

package/frontend/package.json

@@ -19,6 +19,7 @@
 		"vite": "^6.0.0"
 	},
 	"dependencies": {
+		"rrweb-player": "^2.1.1",
 		"socket.io-client": "^4.8.1"
 	}
 }

package/frontend/src/lib/api/reports.js

@@ -32,16 +32,25 @@ export function reportUrl(id) {
 	return `/reports/${id}`;
 }
 
-export function screenshotUrl(filename) {
-	return `${API_BASE}/screenshots/${filename}`;
-}
-
 export async function fetchReportDetail(id) {
 	const res = await fetch(`${API_BASE}/reports/${id}`);
 	if (!res.ok) throw new Error('Report not found');
 	return res.json();
 }
 
+export async function fetchRecordings(reportId) {
+	const res = await fetch(`${API_BASE}/reports/${reportId}/recordings`);
+	if (!res.ok) throw new Error('Failed to fetch recordings');
+	return res.json();
+}
+
+export async function fetchRecordingEvents(reportId, recordingId) {
+	const res = await fetch(`${API_BASE}/reports/${reportId}/recordings/${recordingId}/events`);
+	if (!res.ok) throw new Error('Failed to fetch recording events');
+	const { events } = await res.json();
+	return events;
+}
+
 export async function deleteReport(id) {
 	const res = await fetch(`${API_BASE}/reports/${id}`, { method: 'DELETE' });
 	if (!res.ok) throw new Error('Failed to delete report');

package/frontend/src/lib/api/settings.js

@@ -53,7 +53,8 @@ export async function fetchBackupConfig() {
 			backupS3SecretKeySet: false,
 			backupS3Prefix: '',
 			backupLastRunAt: null,
-			backupLastStatus: ''
+			backupLastStatus: '',
+			backupIncludeReports: false
 		};
 	return res.json();
 }
@@ -81,6 +82,20 @@ export async function runBackupNow() {
 	return res.json();
 }
 
+export async function fetchS3Backups() {
+	const res = await fetch(`${API_BASE}/backup/s3-backups`, { headers: authHeaders() });
+	return res.json();
+}
+
+export async function restoreFromS3(key) {
+	const res = await fetch(`${API_BASE}/backup/s3-restore`, {
+		method: 'POST',
+		headers: { 'Content-Type': 'application/json', ...authHeaders() },
+		body: JSON.stringify({ key })
+	});
+	return res.json();
+}
+
 export async function fetchIntegrations() {
 	const res = await fetch(`${API_BASE}/settings/integrations`, { headers: authHeaders() });
 	if (!res.ok) return { discordWebhookUrl: '', slackWebhookUrl: '', notifyPublicUrl: '' };

package/frontend/src/lib/components/layout/RunnerPanel.svelte

@@ -17,7 +17,9 @@
 		triggerRun,
 		reportsVersion,
 		runsVersion,
-		backgroundRuns
+		backgroundRuns,
+		appendRRwebBatch,
+		mergeRRwebBatch
 	} from '$lib/stores/runner';
 	import { fetchLatestReportId, reportUrl } from '$lib/api/reports';
 	import { fetchRunners } from '$lib/api/runners';
@@ -121,7 +123,7 @@
 				runTitle: label,
 				startedBy: meta?.startedBy
 			},
-			latestScreenshot: null
+			rrwebByLane: {}
 		};
 	}
 
@@ -236,7 +238,7 @@
 		s.on(SOCKET_EVENTS.RUNNER_LANES_INIT, (lanes) => {
 			runnerState.update((r) => ({
 				...r,
-				lanes: lanes.map((l) => ({ ...l, status: 'running', logs: '', latestScreenshot: null }))
+				lanes: lanes.map((l) => ({ ...l, status: 'running', logs: '' }))
 			}));
 		});
 
@@ -254,18 +256,7 @@
 			}));
 		});
 
-		s.on(SOCKET_EVENTS.STEP_SCREENSHOT, ({ stepName, data }) => {
-			runnerState.update((r) => ({ ...r, latestScreenshot: { stepName, data } }));
-		});
-
-		s.on(SOCKET_EVENTS.RUNNER_LANE_SCREENSHOT, ({ id, stepName, data }) => {
-			runnerState.update((r) => ({
-				...r,
-				lanes: r.lanes.map((l) =>
-					l.id === id ? { ...l, latestScreenshot: { stepName, data } } : l
-				)
-			}));
-		});
+		s.on(SOCKET_EVENTS.RUNNER_LANE_RRWEB_BATCH, (batch) => appendRRwebBatch(batch));
 
 		s.on(SOCKET_EVENTS.REPORT_READY, () => reportsVersion.update((v) => v + 1));
 
@@ -288,7 +279,7 @@
 		s.on(SOCKET_EVENTS.BG_RUN_LANES_INIT, ({ runId, lanes }) => {
 			updateBgRun(runId, (run) => ({
 				...run,
-				lanes: lanes.map((l) => ({ ...l, status: 'running', logs: '', latestScreenshot: null }))
+				lanes: lanes.map((l) => ({ ...l, status: 'running', logs: '' }))
 			}));
 		});
 
@@ -306,16 +297,10 @@
 			}));
 		});
 
-		s.on(SOCKET_EVENTS.BG_RUN_SCREENSHOT, ({ runId, stepName, data }) => {
-			updateBgRun(runId, (run) => ({ ...run, latestScreenshot: { stepName, data } }));
-		});
-
-		s.on(SOCKET_EVENTS.BG_RUN_LANE_SCREENSHOT, ({ runId, laneId, stepName, data }) => {
+		s.on(SOCKET_EVENTS.BG_RUN_LANE_RRWEB_BATCH, ({ runId, ...batch }) => {
 			updateBgRun(runId, (run) => ({
 				...run,
-				lanes: run.lanes.map((l) =>
-					l.id === laneId ? { ...l, latestScreenshot: { stepName, data } } : l
-				)
+				rrwebByLane: mergeRRwebBatch(run.rrwebByLane, batch)
 			}));
 		});
 

package/frontend/src/lib/components/reports/ElementInspector.svelte

@@ -0,0 +1,141 @@
+<!--
+ * This file is part of Plum.
+ * Licensed under the MIT License. See LICENSE file in the project root for details.
+ -->
+
+<script>
+	import CodeViewer from '$lib/components/ui/CodeViewer.svelte';
+	import {
+		INSPECTOR_HEADING,
+		NO_ELEMENT_SELECTED,
+		ELEMENT_ATTRIBUTES_LABEL,
+		ELEMENT_SIZE_LABEL
+	} from '$lib/copy/reports';
+
+	export let selectedElement = null;
+</script>
+
+<aside class="inspector-panel">
+	<div class="inspector-header">
+		<svg
+			width="12"
+			height="12"
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+		>
+			<path d="M3 3l7.07 16.97 2.51-7.39 7.39-2.51L3 3z" />
+		</svg>
+		{INSPECTOR_HEADING}
+	</div>
+	{#if selectedElement}
+		<CodeViewer code={selectedElement.markup} />
+		<div class="inspector-section">
+			<span class="inspector-section-label">{ELEMENT_SIZE_LABEL}</span>
+			<span class="inspector-size">{selectedElement.box.width} × {selectedElement.box.height}</span>
+		</div>
+		{#if selectedElement.attributes.length > 0}
+			<div class="inspector-section">
+				<span class="inspector-section-label">{ELEMENT_ATTRIBUTES_LABEL}</span>
+			</div>
+			<dl class="inspector-attrs">
+				{#each selectedElement.attributes as attr}
+					<div class="inspector-attr-row">
+						<dt>{attr.name}</dt>
+						<dd>{attr.value}</dd>
+					</div>
+				{/each}
+			</dl>
+		{/if}
+	{:else}
+		<div class="inspector-empty">{NO_ELEMENT_SELECTED}</div>
+	{/if}
+</aside>
+
+<style>
+	.inspector-panel {
+		flex-shrink: 0;
+		width: 280px;
+		display: flex;
+		flex-direction: column;
+		gap: 0.65rem;
+		padding: 0.75rem 0.9rem 0.9rem;
+		background: var(--bg-elevated);
+		overflow-y: auto;
+	}
+	/* A long attribute list scrolls the panel, doesn't squeeze the code viewer. */
+	.inspector-panel > * {
+		flex-shrink: 0;
+	}
+	.inspector-panel :global(.code-viewer) {
+		flex-shrink: 0;
+	}
+
+	.inspector-header {
+		display: flex;
+		align-items: center;
+		gap: 0.4rem;
+		padding-bottom: 0.5rem;
+		margin-bottom: 0.1rem;
+		border-bottom: 1px solid var(--border);
+		font-family: 'JetBrains Mono', monospace;
+		font-size: 0.68rem;
+		font-weight: 600;
+		text-transform: uppercase;
+		letter-spacing: 0.06em;
+		color: var(--text-muted);
+	}
+
+	.inspector-empty {
+		color: var(--text-muted);
+		font-size: 0.8rem;
+		padding: 1rem 0.1rem;
+		line-height: 1.5;
+	}
+
+	.inspector-section {
+		display: flex;
+		align-items: baseline;
+		gap: 0.5rem;
+	}
+	.inspector-section-label {
+		font-size: 0.68rem;
+		font-weight: 600;
+		text-transform: uppercase;
+		letter-spacing: 0.05em;
+		color: var(--text-muted);
+	}
+	.inspector-size {
+		font-family: 'JetBrains Mono', monospace;
+		font-size: 0.75rem;
+		color: var(--text);
+	}
+
+	.inspector-attrs {
+		margin: 0;
+		display: flex;
+		flex-direction: column;
+	}
+	.inspector-attr-row {
+		display: flex;
+		flex-direction: column;
+		gap: 0.1rem;
+		padding: 0.35rem 0;
+		border-top: 1px solid var(--border);
+	}
+	.inspector-attr-row dt {
+		font-family: 'JetBrains Mono', monospace;
+		font-size: 0.7rem;
+		color: var(--accent);
+	}
+	.inspector-attr-row dd {
+		margin: 0;
+		font-family: 'JetBrains Mono', monospace;
+		font-size: 0.72rem;
+		color: var(--text-muted);
+		word-break: break-all;
+	}
+</style>

package/frontend/src/lib/components/reports/LiveReplayer.svelte

@@ -0,0 +1,110 @@
+<!--
+ * This file is part of Plum.
+ * Licensed under the MIT License. See LICENSE file in the project root for details.
+ -->
+
+<script>
+	import { onMount, onDestroy } from 'svelte';
+	import Player from 'rrweb-player';
+	import 'rrweb-player/dist/style.css';
+
+	// A growing array — new events are appended by the caller as they stream
+	// in over the socket. liveMode lets rrweb-player start from zero events
+	// (it otherwise requires a complete Meta+FullSnapshot pair up front).
+	export let events = [];
+
+	const META_EVENT_TYPE = 4;
+
+	let stage;
+	let container;
+	let player = null;
+	let fedCount = 0;
+	let nativeWidth = 0;
+	let nativeHeight = 0;
+	let resizeObserver;
+
+	// rrweb-player renders at the recording's native resolution — scale-and-crop
+	// it to fill the stage (object-fit: cover) instead of letterboxing. Re-run on
+	// every stage resize, since the panel's own layout (tab strips appearing,
+	// window resize) can still shift its size after the player is built.
+	function updateScale() {
+		if (!nativeWidth || !nativeHeight) return;
+		const rect = stage.getBoundingClientRect();
+		const scale = Math.max(rect.width / nativeWidth, rect.height / nativeHeight);
+		container.style.transform = `scale(${scale})`;
+	}
+
+	// getMetaData() (called internally by rrweb-player's own controls on
+	// construction) reads events[0].timestamp unconditionally, so the initial
+	// batch must be passed in props rather than fed empty and via addEvent.
+	function buildPlayer() {
+		const rect = stage.getBoundingClientRect();
+		const meta = events[0]?.type === META_EVENT_TYPE ? events[0].data : null;
+		nativeWidth = meta?.width > 0 ? meta.width : rect.width;
+		nativeHeight = meta?.height > 0 ? meta.height : rect.height;
+
+		player = new Player({
+			target: container,
+			props: {
+				events,
+				liveMode: true,
+				autoPlay: false,
+				showController: false,
+				width: nativeWidth,
+				height: nativeHeight
+			}
+		});
+		fedCount = events.length;
+		player.getReplayer()?.startLive();
+		updateScale();
+	}
+
+	// Feed only what's newly arrived since the last run of this block —
+	// addEvent() is the incremental API, not a full-array replace.
+	$: if (player && events.length > fedCount) {
+		for (let i = fedCount; i < events.length; i++) player.addEvent(events[i]);
+		fedCount = events.length;
+	}
+
+	onMount(() => {
+		buildPlayer();
+		resizeObserver = new ResizeObserver(updateScale);
+		resizeObserver.observe(stage);
+	});
+	onDestroy(() => {
+		resizeObserver?.disconnect();
+		try {
+			player?.getReplayer()?.destroy();
+		} catch {
+			// already torn down
+		}
+	});
+</script>
+
+<div class="live-stage" bind:this={stage}>
+	<div class="live-mount" bind:this={container}></div>
+</div>
+
+<style>
+	.live-stage {
+		position: relative;
+		flex: 1;
+		min-width: 0;
+		min-height: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		background: var(--bg-subtle);
+		overflow: hidden;
+	}
+
+	.live-mount {
+		display: flex;
+	}
+
+	/* Sandboxed iframe (no allow-scripts/forms/top-navigation) — safe to always
+	   allow pointer interaction so a taller live page can still be scrolled. */
+	.live-mount :global(iframe) {
+		pointer-events: auto !important;
+	}
+</style>