plum-e2e 2.10.0 → 2.12.0

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

@@ -0,0 +1,177 @@
+<!--
+ * This file is part of Plum.
+ * Licensed under the MIT License. See LICENSE file in the project root for details.
+ -->
+
+<script>
+	import { fly } from 'svelte/transition';
+	import { flip } from 'svelte/animate';
+	import { notifications, dismissNotification } from '$lib/stores/notifications';
+	import { replayVideoJob, cancelReplayVideo, dismissReplayVideo } from '$lib/stores/replayVideo';
+	import { CANCEL_LABEL } from '$lib/copy/common';
+	import {
+		DISMISS_LABEL,
+		VIDEO_TASK_RENDERING,
+		VIDEO_TASK_DONE,
+		VIDEO_TASK_FAILED,
+		VIDEO_TASK_EXPERIMENTAL
+	} from '$lib/copy/reports';
+
+	$: job = $replayVideoJob;
+	$: pct = Math.round((job?.progress ?? 0) * 100);
+</script>
+
+<div class="stack">
+	{#if job}
+		<div class="card" transition:fly={{ y: 12, duration: 200 }}>
+			{#if job.status === 'rendering'}
+				<div class="row">
+					<span class="spinner" aria-hidden="true"></span>
+					<span class="msg">{VIDEO_TASK_RENDERING} {pct}%</span>
+					<button class="link text" on:click={cancelReplayVideo}>{CANCEL_LABEL}</button>
+				</div>
+				<div class="bar"><span class="fill" style="width:{pct}%"></span></div>
+				<p class="sub">{VIDEO_TASK_EXPERIMENTAL}</p>
+			{:else if job.status === 'done'}
+				<div class="row">
+					<span class="dot success"></span>
+					<span class="msg">{VIDEO_TASK_DONE}</span>
+				</div>
+			{:else}
+				<div class="row">
+					<span class="dot error"></span>
+					<span class="msg">{VIDEO_TASK_FAILED}</span>
+					<button class="link text" on:click={dismissReplayVideo}>{DISMISS_LABEL}</button>
+				</div>
+				{#if job.error}<p class="sub">{job.error}</p>{/if}
+			{/if}
+		</div>
+	{/if}
+
+	{#each $notifications as n (n.id)}
+		<div class="card" animate:flip={{ duration: 180 }} transition:fly={{ y: 12, duration: 200 }}>
+			<div class="row">
+				<span class="dot {n.type}"></span>
+				<span class="msg">{n.message}</span>
+				<button class="link" on:click={() => dismissNotification(n.id)} aria-label={DISMISS_LABEL}>
+					<svg width="12" height="12" viewBox="0 0 14 14" fill="none">
+						<path
+							d="M1 1l12 12M13 1L1 13"
+							stroke="currentColor"
+							stroke-width="1.6"
+							stroke-linecap="round"
+						/>
+					</svg>
+				</button>
+			</div>
+		</div>
+	{/each}
+</div>
+
+<style>
+	.stack {
+		position: fixed;
+		right: 1rem;
+		bottom: 3.25rem;
+		/* Above the replay modal (500) so feedback stays visible over it. */
+		z-index: 600;
+		display: flex;
+		flex-direction: column-reverse;
+		gap: 0.5rem;
+		max-width: min(20rem, calc(100vw - 2rem));
+		pointer-events: none;
+	}
+
+	.card {
+		pointer-events: auto;
+		padding: 0.7rem 0.85rem;
+		background: var(--bg-elevated);
+		border: 1px solid var(--border);
+		border-radius: var(--radius-md);
+		box-shadow: 0 8px 28px rgba(0, 0, 0, 0.16);
+		font-size: 0.82rem;
+	}
+
+	.row {
+		display: flex;
+		align-items: center;
+		gap: 0.55rem;
+	}
+	.msg {
+		flex: 1;
+		color: var(--text);
+		line-height: 1.35;
+	}
+	.sub {
+		margin-top: 0.4rem;
+		color: var(--text-muted);
+		font-size: 0.72rem;
+	}
+
+	.dot {
+		width: 7px;
+		height: 7px;
+		border-radius: 50%;
+		flex-shrink: 0;
+		background: var(--text-muted);
+	}
+	.dot.success {
+		background: var(--pass);
+	}
+	.dot.error {
+		background: var(--fail);
+	}
+	.dot.info {
+		background: var(--accent);
+	}
+
+	.link {
+		display: inline-flex;
+		align-items: center;
+		background: none;
+		border: none;
+		color: var(--text-muted);
+		cursor: pointer;
+		padding: 0;
+		flex-shrink: 0;
+	}
+	.link.text {
+		font-size: 0.75rem;
+	}
+	.link:hover {
+		color: var(--accent);
+	}
+
+	.bar {
+		margin-top: 0.55rem;
+		height: 4px;
+		border-radius: var(--radius-pill);
+		background: var(--bg-subtle);
+		overflow: hidden;
+	}
+	.fill {
+		display: block;
+		height: 100%;
+		background: var(--accent);
+		transition: width 0.2s var(--ease-out);
+	}
+	.spinner {
+		width: 12px;
+		height: 12px;
+		flex-shrink: 0;
+		border: 2px solid var(--border);
+		border-top-color: var(--accent);
+		border-radius: 50%;
+		animation: spin 0.7s linear infinite;
+	}
+	@keyframes spin {
+		to {
+			transform: rotate(360deg);
+		}
+	}
+	@media (prefers-reduced-motion: reduce) {
+		.spinner {
+			animation-duration: 2s;
+		}
+	}
+</style>

package/frontend/src/lib/constants.js

@@ -25,7 +25,7 @@ export const REPO_PAGE_SIZE = 20;
 export const SUITE_CASES_PER_PAGE = 20;
 
 export const COPY_TIMEOUT_MS = 1400;
-export const TOAST_TIMEOUT_MS = 4000;
+export const TOAST_TIMEOUT_MS = 8000;
 
 export const REDIRECT_DELAY_MS = 3000;
 

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

@@ -26,6 +26,15 @@ export const SLACK_LABEL = 'Slack';
 export const EMAIL_LABEL = 'Email';
 export const PASSWORD_LABEL = 'Password';
 
+export const EXPORT_LABEL = 'Export';
+export const EXPORTING_LABEL = 'Exporting…';
+export const EXPORT_MENU_ITEMS = [
+	{ id: 'csv', label: 'CSV', hint: 'Download report' },
+	{ id: 'json', label: 'JSON', hint: 'Download JSON. Re-importable' }
+];
+export const exportFailedToast = (what) => `Could not export ${what}.`;
+export const exportedToast = (what) => `${what} exported.`;
+
 export const CLEAR_SEARCH_LABEL = 'Clear search';
 export const SORT_BY_LABEL = 'Sort by';
 export const LOADING_LABEL = 'Loading…';

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

@@ -55,6 +55,26 @@ export const caseLabel = (index) => `Case ${index}`;
 // ── Recording replay ──
 export const PLAYER_LOAD_ERROR = 'Could not load this recording.';
 export const INSPECT_TOGGLE_LABEL = 'Inspect element';
+
+export const REPORT_EXPORT_MENU_ITEMS = [
+	{ id: 'csv', label: 'CSV', hint: 'Download report' },
+	{ id: 'json', label: 'JSON', hint: 'Structured summary' }
+];
+
+// ── Replay download (screenshot / video) ──
+export const REPLAY_DOWNLOAD_LABEL = 'Download';
+export const SCREENSHOT_LABEL = 'Screenshot';
+export const SCREENSHOT_HINT = 'PNG of the current frame';
+export const RECORD_VIDEO_LABEL = 'Record video';
+export const RECORD_VIDEO_HINT = 'WebM — experimental, stays in your browser';
+export const VIDEO_MULTITAB_UNSUPPORTED = 'Video export is only available for single-tab replays.';
+export const SCREENSHOT_SAVED_TOAST = 'Screenshot saved.';
+export const SCREENSHOT_FAILED_TOAST = 'Could not capture this frame.';
+export const VIDEO_TASK_RENDERING = 'Rendering replay video…';
+export const VIDEO_TASK_DONE = 'Replay video downloaded';
+export const VIDEO_TASK_FAILED = 'Replay video render failed';
+export const VIDEO_TASK_EXPERIMENTAL = 'Experimental — quality varies. Nothing is uploaded.';
+export const DISMISS_LABEL = 'Dismiss';
 export const RESTART_LABEL = 'Restart replay';
 export const STEPS_RAIL_HEADING = 'Steps';
 export const INSPECTOR_HEADING = 'Inspector';

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

@@ -19,6 +19,10 @@ export const HEADING = 'Test Repository';
 export const HEADER_DESC = 'Manage test suites, cases, and track manual test runs.';
 export const NEW_SUITE_LABEL = '+ New Suite';
 export const NEW_RUN_LABEL = '+ New Run';
+export const IMPORT_TEST_CASES_LINK = 'Import from file';
+export const IMPORT_TEST_CASES_HREF = '/settings?section=testcases';
+export const EXPORT_TEST_CASES_WHAT = 'Test cases';
+export const EXPORT_SUITE_WHAT = 'Suite';
 export const SUITES_TAB_LABEL = 'Suites';
 export const RUNS_TAB_LABEL = 'Test Runs';
 export const SEARCH_PLACEHOLDER = 'Search by ID or name…';

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

@@ -19,6 +19,21 @@ export const PROJECT_LABEL = 'Project';
 export const RUNNERS_LABEL = 'Runners';
 export const REPOSITORY_NAV_LABEL = 'Repository';
 export const REPOSITORY_HEADING = 'Test Repository';
+export const TEST_CASES_NAV_LABEL = 'Test Cases';
+export const TEST_CASES_HEADING = 'Test Cases';
+export const TEST_CASES_DESC = 'Bring test cases in from a Plum export file.';
+export const TC_IMPORT_CARD_TITLE = 'Import';
+export const TC_IMPORT_DESC =
+	'Upload a JSON file exported from Test Repository. Suites and cases are added as new records.';
+export const TC_IMPORT_HINT =
+	'A case is skipped when its ID already exists here. Cases with a different prefix or no ID are imported with a fresh ID.';
+export const TC_IMPORT_FAILED_FALLBACK = 'Could not read that file.';
+export const tcImportLabel = (importing) => (importing ? 'Importing…' : 'Import');
+export const tcImportSummary = ({ importedCases, importedSuites, skippedCases, skippedSuites }) => {
+	const imported = `Imported ${importedCases} ${importedCases === 1 ? 'case' : 'cases'} in ${importedSuites} ${importedSuites === 1 ? 'suite' : 'suites'}`;
+	const skipped = skippedCases + skippedSuites;
+	return skipped > 0 ? `${imported} · skipped ${skippedCases} already here` : imported + '.';
+};
 export const INTEGRATIONS_LABEL = 'Integrations';
 export const MCP_NAV_LABEL = 'MCP';
 export const MCP_HEADING = 'MCP Integration';

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/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>

package/frontend/src/routes/reports/[id]/+page.svelte

@@ -7,7 +7,7 @@
 	import { page } from '$app/stores';
 	import { onMount } from 'svelte';
 	import { slide } from 'svelte/transition';
-	import { fetchReportDetail, fetchRecordings } from '$lib/api/reports';
+	import { fetchReportDetail, fetchRecordings, downloadReportExport } from '$lib/api/reports';
 	import {
 		isScheduled,
 		triggerLabel,
@@ -39,10 +39,14 @@
 		attemptsLabel,
 		caseLabel,
 		UNKNOWN_RUNNER_LABEL,
-		workerLabel
+		workerLabel,
+		REPORT_EXPORT_MENU_ITEMS
 	} from '$lib/copy/reports';
+	import { exportFailedToast, exportedToast } from '$lib/copy/common';
+	import { notify } from '$lib/stores/notifications';
 	import Badge from '$lib/components/ui/Badge.svelte';
 	import BackLink from '$lib/components/ui/BackLink.svelte';
+	import ExportMenu from '$lib/components/ui/ExportMenu.svelte';
 	import StatusDot from '$lib/components/ui/StatusDot.svelte';
 	import TagChip from '$lib/components/ui/TagChip.svelte';
 	import StepKeyword from '$lib/components/ui/StepKeyword.svelte';
@@ -63,6 +67,19 @@
 	let scenarioRecordings = [];
 	let replayInspecting = false;
 
+	let exporting = false;
+	async function handleExport(format) {
+		exporting = true;
+		try {
+			await downloadReportExport(reportId, format);
+			notify('success', exportedToast('Report'));
+		} catch {
+			notify('error', exportFailedToast('this report'));
+		} finally {
+			exporting = false;
+		}
+	}
+
 	function scenarioHasRecording(scenario) {
 		return allRecordings.some((r) => r.scenarioId === scenario.id);
 	}
@@ -128,7 +145,16 @@
 
 <svelte:head><title>{DETAIL_PAGE_TITLE}</title></svelte:head>
 
-<BackLink href="/reports" label={REPORTS_BACK_LABEL} />
+<div class="detail-top">
+	<BackLink href="/reports" label={REPORTS_BACK_LABEL} />
+	{#if detail}
+		<ExportMenu
+			items={REPORT_EXPORT_MENU_ITEMS}
+			busy={exporting}
+			on:select={(e) => handleExport(e.detail)}
+		/>
+	{/if}
+</div>
 
 {#if error}
 	<div class="error-state">{error}</div>
@@ -612,6 +638,7 @@
 						{reportId}
 						recordings={scenarioRecordings}
 						steps={replayScenario.steps}
+						scenarioName={replayScenario.name}
 						bind:inspecting={replayInspecting}
 					/>
 				{/if}
@@ -621,6 +648,14 @@
 {/if}
 
 <style>
+	.detail-top {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 1rem;
+		margin-bottom: 1rem;
+	}
+
 	.report-header {
 		border-radius: var(--radius-lg);
 		border: 1px solid var(--border);