plum-e2e 2.9.17 → 2.12.0

package/frontend/src/lib/socketEvents.js

@@ -8,30 +8,18 @@
 // mirrors backend/constants/socketEvents.js by hand — keep both in sync when
 // adding or renaming an event.
 export const SOCKET_EVENTS = Object.freeze({
-	// Interactive single-run (built-in runner, one browser tab watching)
+	// Client → server: request a run / cancel a run by id
 	RUN_TEST: 'run-test',
 	CANCEL_TEST: 'cancel-test',
-	LOG: 'log',
-	DONE: 'done',
 
-	// Multi-lane distributed run (single interactive run, several runners)
-	RUNNER_LANES_INIT: 'runner-lanes-init',
-	RUNNER_LANE_LOG: 'runner-lane-log',
-	RUNNER_LANE_STATUS: 'runner-lane-status',
-
-	// Background runs (cron / REST / MCP triggered, no single owning socket)
+	// Server → every client: one run's lifecycle, keyed by runId
+	BG_RUN_QUEUED: 'bg-run-queued',
 	BG_RUN_START: 'bg-run-start',
 	BG_RUN_LOG: 'bg-run-log',
 	BG_RUN_DONE: 'bg-run-done',
 	BG_RUN_LANES_INIT: 'bg-run-lanes-init',
 	BG_RUN_LANE_LOG: 'bg-run-lane-log',
 	BG_RUN_LANE_STATUS: 'bg-run-lane-status',
-
-	// Live rrweb streaming — one shape for every run type, always
-	// carrying a lane id (BUILT_IN_RUNNER_ID for the plain single-run case) and
-	// a workerId, so a single built-in run with --parallel workers is finally
-	// attributable per worker instead of one flat interleaved stream.
-	RUNNER_LANE_RRWEB_BATCH: 'runner-lane-rrweb-batch',
 	BG_RUN_LANE_RRWEB_BATCH: 'bg-run-lane-rrweb-batch',
 
 	// Global notifications (any client, not tied to a specific run)

package/frontend/src/lib/stores/notifications.js

@@ -0,0 +1,23 @@
+/*
+ * This file is part of Plum.
+ * Licensed under the MIT License. See LICENSE file in the project root for details.
+ */
+
+import { writable } from 'svelte/store';
+import { TOAST_TIMEOUT_MS } from '$lib/constants';
+
+// { id, type: 'success' | 'error' | 'info', message, sticky }
+export const notifications = writable([]);
+
+let seq = 0;
+
+export function notify(type, message, { sticky = false, timeout = TOAST_TIMEOUT_MS } = {}) {
+	const id = ++seq;
+	notifications.update((list) => [...list, { id, type, message, sticky }]);
+	if (!sticky) setTimeout(() => dismissNotification(id), timeout);
+	return id;
+}
+
+export function dismissNotification(id) {
+	notifications.update((list) => list.filter((n) => n.id !== id));
+}

package/frontend/src/lib/stores/replayVideo.js

@@ -0,0 +1,51 @@
+/*
+ * This file is part of Plum.
+ * Licensed under the MIT License. See LICENSE file in the project root for details.
+ */
+
+import { writable, get } from 'svelte/store';
+import { renderReplayToWebM } from '$lib/utils/replayVideo';
+import { downloadBlob } from '$lib/utils/download';
+
+// null when idle; otherwise { status, progress, filename, error }.
+// status: 'rendering' | 'done' | 'error'
+export const replayVideoJob = writable(null);
+
+let cancelled = false;
+
+export function cancelReplayVideo() {
+	cancelled = true;
+}
+
+export function dismissReplayVideo() {
+	replayVideoJob.set(null);
+}
+
+/** `replayer` is the live rrweb replayer to record; it is not retained. */
+export async function startReplayVideo({ replayer, durationMs, filename }) {
+	if (get(replayVideoJob)?.status === 'rendering') return;
+	cancelled = false;
+	replayVideoJob.set({ status: 'rendering', progress: 0, filename });
+
+	try {
+		const blob = await renderReplayToWebM({
+			replayer,
+			durationMs,
+			onProgress: (p) => replayVideoJob.update((j) => (j ? { ...j, progress: p } : j)),
+			shouldCancel: () => cancelled
+		});
+		if (cancelled) {
+			replayVideoJob.set(null);
+			return;
+		}
+		downloadBlob(blob, filename);
+		replayVideoJob.set({ status: 'done', progress: 1, filename });
+		setTimeout(() => replayVideoJob.update((j) => (j?.status === 'done' ? null : j)), 6000);
+	} catch (e) {
+		if (cancelled || e.message === 'Cancelled.') {
+			replayVideoJob.set(null);
+			return;
+		}
+		replayVideoJob.set({ status: 'error', progress: 0, filename, error: e.message });
+	}
+}

package/frontend/src/lib/stores/runner.js

@@ -4,31 +4,45 @@
  */
 
 import { writable, get } from 'svelte/store';
-import { BROWSERS } from '$lib/constants';
+import { BROWSERS, TRIGGER_TYPES } from '$lib/constants';
 import { SOCKET_EVENTS } from '$lib/socketEvents';
+import { MANUAL_RUN_LABEL } from '$lib/copy/runners';
 import { auth } from './auth';
 
 export const socket = writable(null);
 
-export const runnerState = writable({
-	output: '',
-	running: false,
-	testCompleted: false,
-	latestReportId: null, // number | null — set after test finishes
-	status: 'idle', // 'idle' | 'running' | 'pass' | 'fail'
-	lastRunId: '',
-	lanes: [], // [{ id, name, testCount, status, logs }] multi-runner only
-	currentRun: null, // { tag, workers, browser, runners } — set while running
-	// { [laneId]: { [workerId]: { events: [] } } } — always keyed by laneId even
-	// for a plain single-runner run (BUILT_IN_RUNNER_ID), so the live view's
-	// Runner/Worker tabs don't need a separate code path for that case.
-	rrwebByLane: {}
-});
+// runId → run entry. One store for every run whatever its origin (manual, cron,
+// REST, MCP): each is a queued job streamed over the bg-run-* events. Seeded
+// optimistically by triggerRun, then kept current by the socket handlers in
+// RunnerPanel.
+export const backgroundRuns = writable({});
+
+export function makeRunEntry({ kind, label, meta, status }) {
+	return {
+		kind,
+		label,
+		status, // 'queued' | 'running' | 'done'
+		testCompleted: false,
+		latestReportId: null,
+		verdict: 'idle', // 'idle' | 'pass' | 'fail' | 'cancelled'
+		output: '',
+		lanes: [], // [{ id, name, testCount, status, logs }]
+		currentRun: {
+			tag: meta?.tag ?? '',
+			workers: meta?.workers,
+			browser: meta?.browser,
+			runTitle: label,
+			startedBy: meta?.startedBy ?? null
+		},
+		// { [laneId]: { [workerId]: { events: [] } } } — always keyed by laneId
+		// even for a single-runner run, so the live view's Runner/Worker tabs
+		// don't need a separate code path for that case.
+		rrwebByLane: {}
+	};
+}
 
-// Merges a batch of rrweb events into the right lane/worker bucket, creating
-// it on first sight — Svelte only re-renders on a *new* object/array
-// reference, so this rebuilds the path down to the mutated bucket rather than
-// pushing in place. Shared by runnerState (interactive) and backgroundRuns.
+// Rebuilds the path down to the mutated bucket (Svelte only re-renders on a new
+// reference) rather than pushing in place.
 export function mergeRRwebBatch(rrwebByLane, { id: laneId, workerId, events }) {
 	const lane = rrwebByLane[laneId] ?? {};
 	const worker = lane[workerId] ?? { events: [] };
@@ -41,10 +55,6 @@ export function mergeRRwebBatch(rrwebByLane, { id: laneId, workerId, events }) {
 	};
 }
 
-export function appendRRwebBatch(batch) {
-	runnerState.update((s) => ({ ...s, rrwebByLane: mergeRRwebBatch(s.rrwebByLane, batch) }));
-}
-
 export const runnerConfig = writable({
 	workers: 1,
 	testID: '',
@@ -59,34 +69,31 @@ export const builtInEnabled = writable(true);
 export const reportsVersion = writable(0);
 export const runsVersion = writable(0);
 
-// Map of runId → runnerState-shaped object (plus kind/label) for every
-// non-manual run currently executing (scheduled cron jobs, REST/MCP-triggered
-// runs) — these are spawned server-side with no single browser socket to
-// stream to, so they're tracked separately from `runnerState`.
-export const backgroundRuns = writable({});
-
+// Enqueues a run and returns its id so the caller can navigate to /live/<id>.
+// The run stays `queued` until every runner it targets is free.
 export function triggerRun(id, testRunId, notify = {}, runTitle = null) {
 	const s = get(socket);
-	if (!s) return;
+	if (!s) return null;
 
 	const { workers, testID, browser, selectedRunners } = get(runnerConfig);
-	const runId = (id !== undefined ? id : testID).trim().replace(/\sOR\s/gi, (m) => m.toLowerCase());
+	const tag = (id !== undefined ? id : testID).trim().replace(/\sOR\s/gi, (m) => m.toLowerCase());
+	const runId = crypto.randomUUID();
+	const startedBy = get(auth).user?.name ?? null;
 
-	runnerState.set({
-		output: `Running: ${runId || '(all tests)'}\n`,
-		running: true,
-		testCompleted: false,
-		latestReportId: null,
-		status: 'running',
-		lastRunId: runId,
-		lanes: [],
-		currentRun: { tag: runId, workers, browser, runners: selectedRunners, runTitle },
-		rrwebByLane: {}
-	});
+	backgroundRuns.update((r) => ({
+		...r,
+		[runId]: makeRunEntry({
+			kind: TRIGGER_TYPES.MANUAL,
+			label: runTitle || tag || MANUAL_RUN_LABEL,
+			meta: { tag, workers, browser, startedBy },
+			status: 'queued'
+		})
+	}));
 	panelExpanded.set(true);
 
 	s.emit(SOCKET_EVENTS.RUN_TEST, {
-		tag: runId,
+		runId,
+		tag,
 		workers,
 		browser,
 		runners: selectedRunners,
@@ -94,11 +101,20 @@ export function triggerRun(id, testRunId, notify = {}, runTitle = null) {
 		notifyDiscord: notify.notifyDiscord ?? false,
 		notifySlack: notify.notifySlack ?? false,
 		runTitle,
-		startedBy: get(auth).user?.name ?? null
+		startedBy
 	});
+
+	return runId;
 }
 
-export function cancelRun() {
+export function cancelRun(id) {
 	const s = get(socket);
-	if (s) s.emit(SOCKET_EVENTS.CANCEL_TEST);
+	if (s && id) s.emit(SOCKET_EVENTS.CANCEL_TEST, { runId: id });
+}
+
+// Cron runs get a generated run id, not the task name — match one by kind + label.
+export function findActiveCronRun(runs, taskName) {
+	return Object.values(runs).find(
+		(r) => r.kind === TRIGGER_TYPES.CRON && r.label === taskName && r.status !== 'done'
+	);
 }

package/frontend/src/lib/utils/download.js

@@ -0,0 +1,28 @@
+/*
+ * This file is part of Plum.
+ * Licensed under the MIT License. See LICENSE file in the project root for details.
+ */
+
+export function downloadBlob(blob, filename) {
+	const url = URL.createObjectURL(blob);
+	const a = document.createElement('a');
+	a.href = url;
+	a.download = filename;
+	document.body.appendChild(a);
+	a.click();
+	a.remove();
+	// Revoking synchronously can cancel the download in some browsers.
+	setTimeout(() => URL.revokeObjectURL(url), 1000);
+}
+
+function filenameFromDisposition(header, fallback) {
+	const match = /filename="?([^"]+)"?/.exec(header ?? '');
+	return match ? match[1] : fallback;
+}
+
+export async function downloadFromEndpoint(url, { headers = {}, fallbackName = 'export' } = {}) {
+	const res = await fetch(url, { headers });
+	if (!res.ok) throw new Error('Export failed');
+	const blob = await res.blob();
+	downloadBlob(blob, filenameFromDisposition(res.headers.get('Content-Disposition'), fallbackName));
+}

package/frontend/src/lib/utils/replayCapture.js

@@ -0,0 +1,91 @@
+/*
+ * This file is part of Plum.
+ * Licensed under the MIT License. See LICENSE file in the project root for details.
+ */
+
+import * as htmlToImage from 'html-to-image';
+
+function toBase64(buffer) {
+	const bytes = new Uint8Array(buffer);
+	let binary = '';
+	for (let i = 0; i < bytes.length; i += 0x8000) {
+		binary += String.fromCharCode.apply(null, bytes.subarray(i, i + 0x8000));
+	}
+	return btoa(binary);
+}
+
+const fontMime = (url) =>
+	url.includes('woff2') ? 'font/woff2' : url.includes('woff') ? 'font/woff' : 'font/ttf';
+
+const FONT_FACE_RE = /@font-face\s*{[^}]*}/g;
+
+async function faceTextsFromHref(href) {
+	if (!href) return [];
+	try {
+		const css = await fetch(href).then((r) => r.text());
+		return css.match(FONT_FACE_RE) ?? [];
+	} catch {
+		return [];
+	}
+}
+
+// html-to-image's own font embedding misses @font-face rules from a cross-origin
+// stylesheet (the tested page's Google Fonts <link>) — the capture then falls
+// back to a default face. Re-fetch the CORS-blocked sheets by URL ourselves.
+export async function collectFontEmbedCSS(doc) {
+	const rules = [];
+	for (const sheet of doc.styleSheets) {
+		let cssRules;
+		try {
+			cssRules = sheet.cssRules;
+		} catch {
+			rules.push(...(await faceTextsFromHref(sheet.href)));
+			continue;
+		}
+		for (const rule of cssRules) {
+			if (rule.type === 5 || rule.constructor?.name === 'CSSFontFaceRule') {
+				rules.push(rule.cssText);
+			} else if (rule.type === 3 && rule.href) {
+				let reachable = true;
+				try {
+					void rule.styleSheet.cssRules;
+				} catch {
+					reachable = false;
+				}
+				if (!reachable) rules.push(...(await faceTextsFromHref(rule.href)));
+			}
+		}
+	}
+
+	const cache = new Map();
+	const out = [];
+	for (let text of rules) {
+		const urls = [...text.matchAll(/url\((['"]?)(https?:\/\/[^'")]+)\1\)/g)].map((m) => m[2]);
+		for (const url of urls) {
+			try {
+				if (!cache.has(url)) {
+					const buf = await fetch(url).then((r) => r.arrayBuffer());
+					cache.set(url, `data:${fontMime(url)};base64,${toBase64(buf)}`);
+				}
+				text = text.split(url).join(cache.get(url));
+			} catch {
+				// unreachable font — leave the original url, the face just won't embed
+			}
+		}
+		out.push(text);
+	}
+	return out.join('\n');
+}
+
+/** PNG blob of whatever the given rrweb replayer is currently showing. */
+export async function captureReplayFrame(replayer) {
+	const doc = replayer?.iframe?.contentDocument;
+	if (!doc?.documentElement) throw new Error('Nothing to capture yet — let the replay load first.');
+	const fontEmbedCSS = await collectFontEmbedCSS(doc).catch(() => '');
+	const blob = await htmlToImage.toBlob(doc.documentElement, {
+		backgroundColor: '#ffffff',
+		fontEmbedCSS
+	});
+	if (!blob) throw new Error('Could not capture this frame.');
+	return blob;
+}

package/frontend/src/lib/utils/replayVideo.js

@@ -0,0 +1,111 @@
+/*
+ * This file is part of Plum.
+ * Licensed under the MIT License. See LICENSE file in the project root for details.
+ */
+
+import * as htmlToImage from 'html-to-image';
+import fixWebmDuration from 'fix-webm-duration';
+import { collectFontEmbedCSS } from './replayCapture';
+
+const FPS = 12;
+const TAIL_MS = 400;
+
+const supportedMime = () =>
+	['video/webm;codecs=vp9', 'video/webm;codecs=vp8', 'video/webm'].find((m) =>
+		MediaRecorder.isTypeSupported(m)
+	);
+
+/**
+ * Records the already-loaded replayer to a WebM blob in the browser — nothing is
+ * uploaded. Plays it through in real time (so a mid-recording navigation applies
+ * the same as normal playback) while html-to-image snapshots each frame onto a
+ * canvas the MediaRecorder samples at FPS; a slow snapshot just repeats the
+ * previous frame, so the clip stays the right length.
+ *
+ * A second rrweb player can't be spun up off-screen for this (two instances
+ * fight over shared module state and the hidden one renders blank), so it drives
+ * the visible replayer and the caller restores its position afterwards.
+ */
+export async function renderReplayToWebM({ replayer, durationMs, onProgress, shouldCancel }) {
+	const iframe = replayer?.iframe;
+	if (!iframe?.contentDocument?.documentElement) throw new Error('The replay is not ready yet.');
+	if (!durationMs || durationMs < 200) throw new Error('This recording is too short to record.');
+	if (typeof MediaRecorder === 'undefined') throw new Error("This browser can't record video.");
+	const mime = supportedMime();
+	if (!mime) throw new Error("This browser can't record WebM video.");
+
+	const w = Math.max(320, iframe.offsetWidth || 1280);
+	const h = Math.max(240, iframe.offsetHeight || 720);
+	const canvas = document.createElement('canvas');
+	canvas.width = w;
+	canvas.height = h;
+	const ctx = canvas.getContext('2d');
+	const paintWhite = () => {
+		ctx.fillStyle = '#ffffff';
+		ctx.fillRect(0, 0, w, h);
+	};
+	paintWhite();
+
+	const fontEmbedCSS = await collectFontEmbedCSS(iframe.contentDocument).catch(() => '');
+
+	const recorder = new MediaRecorder(canvas.captureStream(FPS), {
+		mimeType: mime,
+		videoBitsPerSecond: 3_500_000
+	});
+	const chunks = [];
+	recorder.ondataavailable = (e) => e.data.size && chunks.push(e.data);
+	const stopped = new Promise((res) => (recorder.onstop = res));
+	recorder.start(250);
+
+	replayer.play(0);
+	const start = performance.now();
+	let capturing = false;
+	let renderedMs = 0;
+
+	try {
+		await new Promise((resolve, reject) => {
+			function tick() {
+				if (shouldCancel?.()) return reject(new Error('Cancelled.'));
+				renderedMs = performance.now() - start;
+				onProgress?.(Math.min(1, renderedMs / durationMs));
+
+				if (!capturing) {
+					capturing = true;
+					htmlToImage
+						.toCanvas(iframe.contentDocument.documentElement, {
+							width: w,
+							height: h,
+							backgroundColor: '#ffffff',
+							fontEmbedCSS
+						})
+						.then((frame) => {
+							paintWhite();
+							ctx.drawImage(frame, 0, 0, w, h);
+						})
+						.catch(() => {})
+						.finally(() => {
+							capturing = false;
+						});
+				}
+
+				if (renderedMs >= durationMs + TAIL_MS) resolve();
+				else requestAnimationFrame(tick);
+			}
+			requestAnimationFrame(tick);
+		});
+	} finally {
+		recorder.stop();
+		await stopped;
+		try {
+			replayer.pause(0);
+		} catch {
+			// caller rebuilds the player anyway
+		}
+	}
+
+	onProgress?.(1);
+	const raw = new Blob(chunks, { type: mime });
+	// MediaRecorder WebM carries no duration in its header — players show it as
+	// unseekable / 0:00 until playback ends. Patch the EBML so the file behaves.
+	return fixWebmDuration(raw, Math.round(renderedMs), { logger: false }).catch(() => raw);
+}

package/frontend/src/routes/+layout.svelte

@@ -11,6 +11,7 @@
 	import Nav from '$lib/components/layout/Nav.svelte';
 	import PageShell from '$lib/components/layout/PageShell.svelte';
 	import RunnerPanel from '$lib/components/layout/RunnerPanel.svelte';
+	import NotificationStack from '$lib/components/ui/NotificationStack.svelte';
 	import { auth } from '$lib/stores/auth';
 	import { checkNeedsSetup } from '$lib/api/auth';
 
@@ -51,6 +52,7 @@
 			<slot />
 		</PageShell>
 		<RunnerPanel />
+		<NotificationStack />
 	{/if}
 {:else}
 	<div class="boot-loading">Loading…</div>