plum-e2e 2.8.6 → 2.9.1

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

@@ -0,0 +1,109 @@
+<!--
+ * This file is part of Plum.
+ * Licensed under the MIT License. See LICENSE file in the project root for details.
+ -->
+
+<script>
+	import { createEventDispatcher } from 'svelte';
+	import StepKeyword from '$lib/components/ui/StepKeyword.svelte';
+	import StepStatusIcon from '$lib/components/ui/StepStatusIcon.svelte';
+	import { STEPS_RAIL_HEADING } from '$lib/copy/reports';
+
+	export let steps = [];
+	export let stepTimestamps = [];
+	export let currentStepIndex = -1;
+
+	const dispatch = createEventDispatcher();
+</script>
+
+<aside class="steps-rail">
+	<div class="steps-rail-header">{STEPS_RAIL_HEADING}</div>
+	<ol class="steps-list">
+		{#each steps as step, i}
+			<li>
+				<button
+					class="rail-step"
+					class:rail-step-active={i === currentStepIndex}
+					disabled={stepTimestamps[i] === undefined}
+					on:click={() => dispatch('jump', i)}
+				>
+					<StepStatusIcon status={step.status} />
+					<span class="rail-step-text">
+						<StepKeyword keyword={step.keyword} />
+						<span>{step.name}</span>
+					</span>
+				</button>
+			</li>
+		{/each}
+	</ol>
+</aside>
+
+<style>
+	.steps-rail {
+		flex-shrink: 0;
+		width: 240px;
+		display: flex;
+		flex-direction: column;
+		background: var(--bg-elevated);
+		overflow-y: auto;
+	}
+
+	.steps-rail-header {
+		flex-shrink: 0;
+		padding: 0.7rem 0.9rem 0.5rem;
+		font-family: 'JetBrains Mono', monospace;
+		font-size: 0.68rem;
+		font-weight: 600;
+		text-transform: uppercase;
+		letter-spacing: 0.06em;
+		color: var(--text-muted);
+	}
+
+	.steps-list {
+		list-style: none;
+		margin: 0;
+		padding: 0 0.5rem 0.5rem;
+		display: flex;
+		flex-direction: column;
+		gap: 0.1rem;
+	}
+
+	.rail-step {
+		width: 100%;
+		display: flex;
+		align-items: flex-start;
+		gap: 0.5rem;
+		padding: 0.4rem 0.5rem;
+		background: none;
+		border: none;
+		border-radius: var(--radius-sm);
+		font: inherit;
+		font-size: 0.78rem;
+		line-height: 1.35;
+		text-align: left;
+		color: var(--text-muted);
+		cursor: pointer;
+		transition: background var(--duration-fast) var(--ease-out);
+	}
+	.rail-step:hover:not(:disabled) {
+		background: var(--bg-subtle);
+	}
+	.rail-step:disabled {
+		cursor: default;
+	}
+
+	.rail-step-text {
+		display: inline-flex;
+		flex-wrap: wrap;
+		align-items: baseline;
+		gap: 0.35rem;
+		min-width: 0;
+		word-break: break-word;
+	}
+
+	.rail-step-active {
+		background: var(--accent-soft);
+		color: var(--text);
+		font-weight: 500;
+	}
+</style>

package/frontend/src/lib/components/ui/CodeViewer.svelte

@@ -0,0 +1,61 @@
+<!--
+ * This file is part of Plum.
+ * Licensed under the MIT License. See LICENSE file in the project root for details.
+ -->
+
+<script>
+	export let code = '';
+
+	function escapeHtml(s) {
+		return s
+			.replace(/&/g, '&amp;')
+			.replace(/</g, '&lt;')
+			.replace(/>/g, '&gt;')
+			.replace(/"/g, '&quot;')
+			.replace(/'/g, '&#39;');
+	}
+
+	function highlight(raw) {
+		const escaped = escapeHtml(raw);
+		return escaped
+			.replace(/(&lt;!--[\s\S]*?--&gt;)/g, '<span class="tok-comment">$1</span>')
+			.replace(/(&lt;\/?)([a-zA-Z][a-zA-Z0-9-]*)/g, '$1<span class="tok-tag">$2</span>')
+			.replace(
+				/([a-zA-Z_:][a-zA-Z0-9_:.-]*)(=)(&quot;[^&]*&quot;)/g,
+				'<span class="tok-attr">$1</span>$2<span class="tok-value">$3</span>'
+			);
+	}
+
+	$: highlighted = highlight(code);
+</script>
+
+<pre class="code-viewer"><code>{@html highlighted}</code></pre>
+
+<style>
+	.code-viewer {
+		margin: 0;
+		padding: 0.75rem 1rem;
+		background: var(--terminal-bg);
+		color: var(--terminal-text);
+		font-family: 'JetBrains Mono', monospace;
+		font-size: 0.78rem;
+		line-height: 1.5;
+		border-radius: var(--radius-md);
+		overflow-x: auto;
+		white-space: pre-wrap;
+		word-break: break-word;
+	}
+	:global(.code-viewer .tok-tag) {
+		color: var(--code-tag);
+	}
+	:global(.code-viewer .tok-attr) {
+		color: var(--code-attr);
+	}
+	:global(.code-viewer .tok-value) {
+		color: var(--code-string);
+	}
+	:global(.code-viewer .tok-comment) {
+		color: var(--code-comment);
+		font-style: italic;
+	}
+</style>

package/frontend/src/lib/constants.js

@@ -27,7 +27,6 @@ export const SUITE_CASES_PER_PAGE = 20;
 export const COPY_TIMEOUT_MS = 1400;
 export const TOAST_TIMEOUT_MS = 4000;
 
-export const REPLAY_STEP_MS = 900;
 export const REDIRECT_DELAY_MS = 3000;
 
 export const WORKERS_MIN = 1;

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

@@ -18,6 +18,9 @@ export const TREND_HINT = '← older · newer →';
 export const NO_REPORTS_MESSAGE = 'No reports yet. Run a test to generate one.';
 export const SELECT_ALL_TITLE = 'Select all on this page';
 export const SELECT_ROW_TITLE = 'Select';
+export const LEGACY_SCREENSHOTS_NOTICE =
+	'Screenshots have been replaced by full session replay. Reports created before this change no longer have screenshots — steps and logs are still available.';
+export const DISMISS_NOTICE_TITLE = 'Dismiss';
 export const DELETE_REPORT_TITLE = 'Delete report';
 
 export const deleteReportsTitle = (count) =>
@@ -43,17 +46,23 @@ export const RUN_LOGS_LABEL = 'Run Logs';
 export const RETRY_TITLE = 'Failed and was automatically retried before the final result';
 export const WATCH_REPLAY_TITLE = 'Watch replay';
 export const REPLAY_LABEL = 'Replay';
-export const SCREENSHOT_TOGGLE_LABEL = 'Screenshot';
-export const STEP_SCREENSHOT_ALT = 'Step screenshot';
-export const NO_SCREENSHOT_MESSAGE = 'No screenshot captured for this step';
 
 export const runnersBadge = (count) => `${count} runners`;
 export const casesCountLabel = (count) => `${count} cases`;
 export const attemptsLabel = (count) => `${count} attempts`;
 export const caseLabel = (index) => `Case ${index}`;
-export const replayScreenshotAlt = (index) => `Step ${index} screenshot`;
-export const pauseOrPlayTitle = (playing) => (playing ? 'Pause' : 'Play');
-export const replayCounter = (index, total) => `${index} / ${total}`;
+
+// ── Recording replay ──
+export const PLAYER_LOAD_ERROR = 'Could not load this recording.';
+export const INSPECT_TOGGLE_LABEL = 'Inspect element';
+export const RESTART_LABEL = 'Restart replay';
+export const STEPS_RAIL_HEADING = 'Steps';
+export const INSPECTOR_HEADING = 'Inspector';
+export const NO_ELEMENT_SELECTED = 'Click an element in the replay to inspect it.';
+export const ELEMENT_ATTRIBUTES_LABEL = 'Attributes';
+export const ELEMENT_SIZE_LABEL = 'Size';
+export const recordingTabLabel = (tabIndex) =>
+	tabIndex === 0 ? 'Main tab' : `Tab/Window ${tabIndex + 1}`;
 
 // ── Live run ──
 export const LIVE_PAGE_TITLE = 'Live Run — Plum';
@@ -68,8 +77,6 @@ export const CANCEL_RUN_LABEL = 'Cancel run';
 export const ALL_TESTS_PASSED = 'All tests passed';
 export const SOME_TESTS_FAILED = 'Some tests failed';
 export const VIEW_REPORT_NOW_LABEL = 'View Report Now';
-export const LIVE_STEP_LABEL = 'Step';
-export const LIVE_BROWSER_VIEW_ALT = 'Live browser view';
 export const AWAITING_STREAM_LABEL = 'Awaiting stream...';
 export const NO_STREAM_LABEL = 'No stream...';
 export const RUNNER_LABEL = 'Runner';
@@ -77,6 +84,9 @@ export const RUNNING_LABEL = 'Running…';
 export const FINISHED_LABEL = 'Finished';
 export const WAITING_FOR_OUTPUT = '(waiting for output…)';
 
+export const UNKNOWN_RUNNER_LABEL = 'Unknown runner';
+export const workerLabel = (id) => `Worker ${id}`;
+
 export const runsInProgressHeading = (count) =>
 	count === 1 ? 'A run in progress' : `${count} runs in progress`;
 export const workersCountLabel = (count) => `${count} ${pluralize(count, 'worker')}`;

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

@@ -141,7 +141,7 @@ export const SLACK_WEBHOOK_HINT = 'Leave blank to disable Slack notifications';
 export const SLACK_WEBHOOK_PLACEHOLDER = 'https://hooks.slack.com/services/…';
 export const PUBLIC_URL_LABEL = 'Public URL';
 export const PUBLIC_URL_HINT =
-	'Base URL of this Plum instance, used to link reports in notifications';
+	'Base URL of this Plum instance — used to link reports in notifications, and by remote runner nodes to stream live test output back here';
 export const PUBLIC_URL_PLACEHOLDER = 'https://plum.yourcompany.com';
 export const INTEGRATIONS_SAVED_TOAST = 'Integration settings saved.';
 export const INTEGRATIONS_SAVE_FAILED = 'Failed to save integration settings.';
@@ -225,9 +225,14 @@ export const IMPORT_BLOCK_TITLE = 'Import';
 export const IMPORT_BLOCK_DESC =
 	'Restores all data from a previously exported backup. Existing records are overwritten. Cron jobs are re-scheduled after import.';
 export const CHOOSE_FILE_LABEL = 'Choose file…';
-export const BACKUP_DISCLAIMER_PREFIX =
-	'Reports are not included in backups. To back up report history, run';
-export const BACKUP_DISCLAIMER_SUFFIX = 'directly on the PostgreSQL volume.';
+export const INCLUDE_REPORTS_LABEL = 'Include reports & recordings';
+export const INCLUDE_REPORTS_HINT =
+	'Applies to both manual export and scheduled S3 backups. Can make backups significantly larger — recordings are session replays, not just screenshots.';
+export const includeReportsDisclaimer = (included) =>
+	included
+		? 'Reports and recordings are included in backups.'
+		: 'Reports are not included in backups — enable "Include reports & recordings" above, or run pg_dump directly on the PostgreSQL volume, to back up report history.';
+export const saveIncludeReportsLabel = (saving) => (saving ? SAVING_LABEL : SAVE_LABEL);
 
 export const S3_STORAGE_CARD_TITLE = 'S3 Storage';
 export const S3_STORAGE_DESC_PREFIX =
@@ -261,6 +266,19 @@ const SECRET_KEY_SET_PLACEHOLDER = '••••••••';
 const SECRET_KEY_UNSET_PLACEHOLDER = 'Enter secret key';
 const TESTING_LABEL = 'Testing…';
 
+export const RESTORE_FROM_S3_CARD_TITLE = 'Restore from S3';
+export const RESTORE_FROM_S3_DESC =
+	'Restores directly from a backup already uploaded to S3 — no need to download it yourself first. Existing records are overwritten. Cron jobs are re-scheduled after restore.';
+export const CONFIGURE_S3_FIRST_RESTORE_MESSAGE = 'Configure S3 storage above to restore from it.';
+export const NO_S3_BACKUPS_MESSAGE = 'No backups found at this bucket/prefix.';
+export const REFRESH_LABEL = 'Refresh';
+export const RESTORE_CONFIRM_TITLE = 'Restore this backup?';
+export const restoreConfirmBody = (key) =>
+	`This will overwrite current cron jobs, test cases, test runs, users, runners, and project settings with the contents of "${key}". This cannot be undone.`;
+export const RESTORE_SUCCESS_TOAST = 'Restored from S3 successfully.';
+export const RESTORE_FAILED_FALLBACK = 'Restore failed.';
+export const LIST_S3_BACKUPS_FAILED = 'Failed to list S3 backups.';
+
 export const SCHEDULED_BACKUP_CARD_TITLE = 'Scheduled Backup';
 export const CONFIGURE_S3_FIRST_MESSAGE = 'Configure S3 storage above to enable scheduled backups.';
 export const ENABLE_SCHEDULED_BACKUP_LABEL = 'Enable scheduled backup';
@@ -293,3 +311,6 @@ export const saveS3ConfigLabel = (saving) => (saving ? SAVING_LABEL : SAVE_S3_CO
 export const uploadedToLabel = (destination) => `uploaded to ${destination}`;
 export const uploadS3NowLabel = (running) => (running ? UPLOADING_LABEL : UPLOAD_TO_S3_NOW_LABEL);
 export const saveScheduleLabel = (saving) => (saving ? SAVING_LABEL : SAVE_SCHEDULE_LABEL);
+export const restoreLabel = (restoring) => (restoring ? 'Restoring…' : 'Restore');
+export const refreshingLabel = (loading) => (loading ? 'Loading…' : REFRESH_LABEL);
+export const backupSizeLabel = (bytes) => `${(bytes / 1024).toFixed(1)} KB`;

package/frontend/src/lib/socketEvents.js

@@ -13,23 +13,26 @@ export const SOCKET_EVENTS = Object.freeze({
 	CANCEL_TEST: 'cancel-test',
 	LOG: 'log',
 	DONE: 'done',
-	STEP_SCREENSHOT: 'step-screenshot',
 
 	// 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',
-	RUNNER_LANE_SCREENSHOT: 'runner-lane-screenshot',
 
 	// Background runs (cron / REST / MCP triggered, no single owning socket)
 	BG_RUN_START: 'bg-run-start',
 	BG_RUN_LOG: 'bg-run-log',
 	BG_RUN_DONE: 'bg-run-done',
-	BG_RUN_SCREENSHOT: 'bg-run-screenshot',
 	BG_RUN_LANES_INIT: 'bg-run-lanes-init',
 	BG_RUN_LANE_LOG: 'bg-run-lane-log',
 	BG_RUN_LANE_STATUS: 'bg-run-lane-status',
-	BG_RUN_LANE_SCREENSHOT: 'bg-run-lane-screenshot',
+
+	// 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)
 	REPORT_READY: 'report-ready'

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

@@ -17,11 +17,34 @@ export const runnerState = writable({
 	latestReportId: null, // number | null — set after test finishes
 	status: 'idle', // 'idle' | 'running' | 'pass' | 'fail'
 	lastRunId: '',
-	lanes: [], // [{ id, name, testCount, status, logs, latestScreenshot }] multi-runner only
+	lanes: [], // [{ id, name, testCount, status, logs }] multi-runner only
 	currentRun: null, // { tag, workers, browser, runners } — set while running
-	latestScreenshot: null // { stepName, data: base64 } for single built-in runner
+	// { [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: {}
 });
 
+// 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.
+export function mergeRRwebBatch(rrwebByLane, { id: laneId, workerId, events }) {
+	const lane = rrwebByLane[laneId] ?? {};
+	const worker = lane[workerId] ?? { events: [] };
+	return {
+		...rrwebByLane,
+		[laneId]: {
+			...lane,
+			[workerId]: { events: [...worker.events, ...events] }
+		}
+	};
+}
+
+export function appendRRwebBatch(batch) {
+	runnerState.update((s) => ({ ...s, rrwebByLane: mergeRRwebBatch(s.rrwebByLane, batch) }));
+}
+
 export const runnerConfig = writable({
 	workers: 1,
 	testID: '',
@@ -58,7 +81,7 @@ export function triggerRun(id, testRunId, notify = {}, runTitle = null) {
 		lastRunId: runId,
 		lanes: [],
 		currentRun: { tag: runId, workers, browser, runners: selectedRunners, runTitle },
-		latestScreenshot: null
+		rrwebByLane: {}
 	});
 	panelExpanded.set(true);
 

package/frontend/src/lib/styles/tokens.css

@@ -26,6 +26,13 @@
 	--external-soft: #ccfbf1;
 	--terminal-bg: #0d0c08;
 	--terminal-text: #d6d0c8;
+	/* Fixed syntax-highlight colors for the always-dark code viewer (inspector
+	   markup panel) — deliberately NOT the theme accent/node/pass tokens above,
+	   which are tuned for light surfaces and go muddy against a dark one. */
+	--code-tag: #7dd3fc;
+	--code-attr: #fbbf24;
+	--code-string: #86efac;
+	--code-comment: #9ca3af;
 
 	--font-display: 'Playfair Display', Georgia, serif;
 	--font-body: 'DM Sans', system-ui, -apple-system, sans-serif;

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

@@ -137,6 +137,112 @@ export function parseRunnerLogs(logs) {
 	return sections;
 }
 
-export function scenarioHasScreenshots(scenario) {
-	return scenario.steps?.some((step) => step.screenshot) ?? false;
+/**
+ * Buckets a report's features/scenarios by runner (lane) then worker
+ * (Cucumber --parallel process), preserving first-seen order. The innermost
+ * `features` array keeps the same shape as the flat list it replaces —
+ * callers should only show a group header when a level has more than one
+ * bucket.
+ */
+export function groupScenariosByRunnerAndWorker(features) {
+	const runnerOrder = [];
+	const runnerMap = new Map();
+
+	for (const feature of features ?? []) {
+		for (const scenario of feature.scenarios ?? []) {
+			const runnerKey = scenario.runnerName ?? '';
+			const workerKey = scenario.workerId ?? 1;
+
+			if (!runnerMap.has(runnerKey)) {
+				runnerMap.set(runnerKey, {
+					runnerName: scenario.runnerName ?? null,
+					workerOrder: [],
+					workerMap: new Map()
+				});
+				runnerOrder.push(runnerKey);
+			}
+			const runnerEntry = runnerMap.get(runnerKey);
+
+			if (!runnerEntry.workerMap.has(workerKey)) {
+				runnerEntry.workerMap.set(workerKey, {
+					workerId: workerKey,
+					featureOrder: [],
+					featureMap: new Map()
+				});
+				runnerEntry.workerOrder.push(workerKey);
+			}
+			const workerEntry = runnerEntry.workerMap.get(workerKey);
+
+			if (!workerEntry.featureMap.has(feature.name)) {
+				workerEntry.featureMap.set(feature.name, { ...feature, scenarios: [] });
+				workerEntry.featureOrder.push(feature.name);
+			}
+			workerEntry.featureMap.get(feature.name).scenarios.push(scenario);
+		}
+	}
+
+	return runnerOrder.map((rk) => {
+		const r = runnerMap.get(rk);
+		return {
+			runnerName: r.runnerName,
+			workers: r.workerOrder.map((wk) => {
+				const w = r.workerMap.get(wk);
+				return {
+					workerId: w.workerId,
+					features: w.featureOrder.map((fn) => {
+						const f = w.featureMap.get(fn);
+						return { ...f, scenarioGroups: groupedScenarios(f.scenarios) };
+					})
+				};
+			})
+		};
+	});
+}
+
+/**
+ * Turns a scenario's tab recordings into an ordered, non-overlapping timeline
+ * of {recordingId, from, to} segments (epoch ms), so a replay can auto-switch
+ * which tab it's showing instead of a manual tab strip. Recordings missing
+ * startedAt/endedAt (written before that field existed) are dropped — nothing
+ * to line up on a shared clock without them.
+ *
+ * Tabs are assumed to open/close like a stack (a popup nested inside the tab
+ * that opened it) — the only shape browser.ts's own tab tracking produces.
+ */
+export function computeRecordingSegments(recordings) {
+	const usable = recordings.filter((r) => r.startedAt != null && r.endedAt != null);
+	if (usable.length === 0) return [];
+
+	const boundaries = usable.flatMap((r) => [
+		{ ts: r.startedAt, kind: 'open', recording: r },
+		{ ts: r.endedAt, kind: 'close', recording: r }
+	]);
+	boundaries.sort((a, b) => a.ts - b.ts || (a.kind === 'open' ? -1 : 1));
+
+	const segments = [];
+	const stack = [];
+	let lastBoundary = boundaries[0].ts;
+
+	for (const b of boundaries) {
+		if (b.kind === 'open') {
+			const top = stack[stack.length - 1];
+			if (top && b.ts > lastBoundary) {
+				segments.push({ recordingId: top.id, from: lastBoundary, to: b.ts });
+			}
+			stack.push(b.recording);
+			lastBoundary = b.ts;
+		} else if (stack[stack.length - 1]?.id === b.recording.id) {
+			segments.push({ recordingId: b.recording.id, from: lastBoundary, to: b.ts });
+			stack.pop();
+			lastBoundary = b.ts;
+		}
+		// A close for a recording that isn't currently on top means it opened
+		// and closed while something nested inside it was still active — its
+		// own segment stays open until whatever's on top of it closes too.
+	}
+	const remaining = stack[stack.length - 1];
+	if (remaining && remaining.endedAt > lastBoundary) {
+		segments.push({ recordingId: remaining.id, from: lastBoundary, to: remaining.endedAt });
+	}
+	return segments;
 }

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

@@ -0,0 +1,34 @@
+/*
+ * This file is part of Plum.
+ * Licensed under the MIT License. See LICENSE file in the project root for details.
+ */
+
+function escapeAttr(v) {
+	return v.replace(/"/g, '"');
+}
+
+function shallowMarkup(el) {
+	const tag = el.tagName.toLowerCase();
+	const attrs = Array.from(el.attributes ?? [])
+		.map((a) => ` ${a.name}="${escapeAttr(a.value)}"`)
+		.join('');
+	const childCount = el.children.length;
+	const text = childCount === 0 ? (el.textContent ?? '').trim() : '';
+	const inner =
+		childCount > 0
+			? `\n  <!-- ${childCount} child element${childCount === 1 ? '' : 's'} -->\n`
+			: text
+				? `\n  ${text.slice(0, 200)}\n`
+				: '';
+	return `<${tag}${attrs}>${inner}</${tag}>`;
+}
+
+/** Summarizes a DOM element for the replay inspector panel: markup preview, attributes, size. */
+export function describeElement(el) {
+	const rect = el.getBoundingClientRect();
+	return {
+		markup: shallowMarkup(el),
+		attributes: Array.from(el.attributes ?? []).map((a) => ({ name: a.name, value: a.value })),
+		box: { width: Math.round(rect.width), height: Math.round(rect.height) }
+	};
+}

package/frontend/src/routes/reports/+page.svelte

@@ -5,6 +5,7 @@
 
 <script>
 	import { onMount, tick } from 'svelte';
+	import { slide } from 'svelte/transition';
 	import { fetchReports, deleteReport, deleteReports, reportUrl } from '$lib/api/reports';
 	import { reportsVersion } from '$lib/stores/runner';
 	import { REPORTS_PER_PAGE, BROWSERS } from '$lib/constants';
@@ -23,6 +24,8 @@
 		SELECT_ALL_TITLE,
 		SELECT_ROW_TITLE,
 		DELETE_REPORT_TITLE,
+		LEGACY_SCREENSHOTS_NOTICE,
+		DISMISS_NOTICE_TITLE,
 		deleteReportsTitle,
 		deleteReportsBody,
 		runsRecorded,
@@ -43,6 +46,7 @@
 	let selected = new Set();
 	let deleteModal = { open: false, targets: [] };
 	let deleting = false;
+	let showLegacyNotice = false;
 
 	$: totalPages = Math.ceil(total / REPORTS_PER_PAGE);
 	$: passRate = total ? Math.round((passCount / total) * 100) : 0;
@@ -75,9 +79,23 @@
 		loadReports();
 	}
 
-	onMount(loadReports);
+	onMount(() => {
+		loadReports();
+		try {
+			showLegacyNotice = localStorage.getItem('plum:legacyScreenshotsNoticeDismissed') !== 'true';
+		} catch {
+			showLegacyNotice = true;
+		}
+	});
 	$: if ($reportsVersion) loadReports();
 
+	function dismissLegacyNotice() {
+		showLegacyNotice = false;
+		try {
+			localStorage.setItem('plum:legacyScreenshotsNoticeDismissed', 'true');
+		} catch {}
+	}
+
 	function toggleSelect(id, e) {
 		e.preventDefault();
 		e.stopPropagation();
@@ -139,6 +157,32 @@
 	{deleteReportsBody(deleteModal.targets.length)}
 </ConfirmModal>
 
+{#if showLegacyNotice}
+	<div class="legacy-notice" transition:slide={{ duration: 200 }}>
+		<p>{LEGACY_SCREENSHOTS_NOTICE}</p>
+		<button
+			class="legacy-notice-dismiss"
+			title={DISMISS_NOTICE_TITLE}
+			aria-label={DISMISS_NOTICE_TITLE}
+			on:click={dismissLegacyNotice}
+		>
+			<svg
+				width="14"
+				height="14"
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			>
+				<line x1="18" y1="6" x2="6" y2="18" />
+				<line x1="6" y1="6" x2="18" y2="18" />
+			</svg>
+		</button>
+	</div>
+{/if}
+
 <div class="page-header">
 	<div class="header-top">
 		<div>
@@ -304,6 +348,40 @@
 {/if}
 
 <style>
+	.legacy-notice {
+		display: flex;
+		align-items: flex-start;
+		gap: 0.75rem;
+		background: var(--accent-soft);
+		border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
+		border-radius: var(--radius-sm);
+		padding: 0.75rem 0.875rem;
+		margin-bottom: 1.5rem;
+	}
+	.legacy-notice p {
+		flex: 1;
+		margin: 0;
+		font-size: 0.85rem;
+		line-height: 1.5;
+		color: var(--text);
+	}
+	.legacy-notice-dismiss {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		flex-shrink: 0;
+		background: none;
+		border: none;
+		color: var(--text-muted);
+		cursor: pointer;
+		padding: 0.125rem;
+		border-radius: var(--radius-sm);
+		transition: color var(--duration-fast);
+	}
+	.legacy-notice-dismiss:hover {
+		color: var(--text);
+	}
+
 	.page-header {
 		margin-bottom: 2rem;
 		padding-bottom: 1.5rem;