plum-e2e 2.4.13 → 2.5.0

package/backend/services/runnerService.js

@@ -138,7 +138,13 @@ async function fetchReportContent(runner, jobId, onLog) {
  * @param {(log: string) => void} onLog   Called with each new log chunk
  * @param {(exitCode: number, reportContent: string|null) => void} onDone
  */
-async function dispatchAndPoll(runnerId, { tags, browser, workers }, onLog, onDone) {
+async function dispatchAndPoll(
+	runnerId,
+	{ tags, browser, workers },
+	onLog,
+	onDone,
+	onScreenshot = null
+) {
 	// The async poll callback can overlap if a tick takes longer than the interval;
 	// guard so the run resolves exactly once and can't be finalised while a lane
 	// is still in flight.
@@ -195,6 +201,10 @@ async function dispatchAndPoll(runnerId, { tags, browser, workers }, onLog, onDo
 				logOffset += body.logs.length;
 			}
 
+			if (onScreenshot && Array.isArray(body.screenshots)) {
+				for (const ss of body.screenshots) onScreenshot(ss);
+			}
+
 			if (body.status === 'done' || body.status === 'error') {
 				clearInterval(poll);
 				const content = await fetchReportContent(runner, jobId, onLog);

package/backend/websockets/socketHandler.js

@@ -16,12 +16,16 @@
  */
 
 const { spawn } = require('child_process');
+const fs = require('fs');
+const os = require('os');
+const path = require('path');
 const runnerService = require('../services/runnerService');
 const reportService = require('../services/reportService');
 const notificationService = require('../services/notificationService');
 const { TRIGGER_TYPE, BUILT_IN_RUNNER_ID, TRIGGER_REMOTE } = require('../constants/triggers');
 const { getTestIdsForTag, chunkTests, buildTagExpression } = require('../lib/testChunker');
 const { readCucumberReportFile } = require('../lib/reportFilename');
+const { getTestSuites } = require('../services/testService');
 const prisma = require('../services/prisma');
 
 const socketHandler = (io) => {
@@ -110,10 +114,80 @@ const socketHandler = (io) => {
 	});
 };
 
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function makeSyntheticFailReport(laneName, testIds, reason) {
+	// Build id → scenario title from local feature files so names match the real report.
+	const nameMap = {};
+	try {
+		const { suites } = getTestSuites();
+		for (const suite of suites) {
+			for (const test of suite.tests) {
+				for (const id of Array.isArray(test.id) ? test.id : [test.id]) {
+					nameMap[id] = test.testCase;
+				}
+			}
+		}
+	} catch {}
+
+	return JSON.stringify([
+		{
+			id: 'runner-error',
+			uri: 'runner-error',
+			name: `Runner: ${laneName}`,
+			keyword: 'Feature',
+			elements: testIds.map((id) => ({
+				id: id.replace(/^@/, '').toLowerCase(),
+				// Use real scenario title; fall back to bare ID without @
+				name: nameMap[id] || id.replace(/^@/, ''),
+				keyword: 'Scenario',
+				type: 'scenario',
+				// ids from getTestIdsForTag already carry the @ — don't add a second one
+				tags: [{ name: id.startsWith('@') ? id : `@${id}` }],
+				steps: [
+					{
+						keyword: 'Given ',
+						name: 'the scenario was assigned to this runner',
+						result: {
+							status: 'failed',
+							error_message: `Runner "${laneName}" did not complete: ${reason}`,
+							duration: 0
+						}
+					}
+				]
+			}))
+		}
+	]);
+}
+
 // ---------------------------------------------------------------------------
 // Single built-in runner
 // ---------------------------------------------------------------------------
 
+function startSsPoller(ssDir, onScreenshot) {
+	const seenFiles = new Set();
+	return setInterval(() => {
+		try {
+			const files = fs
+				.readdirSync(ssDir)
+				.filter((f) => f.endsWith('.ss.json'))
+				.sort();
+			for (const f of files) {
+				if (seenFiles.has(f)) continue;
+				seenFiles.add(f);
+				const filePath = path.join(ssDir, f);
+				const data = JSON.parse(fs.readFileSync(filePath, 'utf8'));
+				onScreenshot(data);
+				try {
+					fs.unlinkSync(filePath);
+				} catch {}
+			}
+		} catch {}
+	}, 400);
+}
+
 function runBuiltIn(
 	io,
 	socket,
@@ -125,12 +199,16 @@ function runBuiltIn(
 	notifyDiscord,
 	notifySlack
 ) {
+	const ssDir = path.join(os.tmpdir(), `plum-ss-${Date.now()}`);
+	fs.mkdirSync(ssDir, { recursive: true });
+
 	const env = {
 		...process.env,
 		TAG: tag,
 		TRIGGER: TRIGGER_TYPE.MANUAL,
 		REPORT_RUNNERS: String(workers),
-		BROWSER: browser
+		BROWSER: browser,
+		PLUM_SS_DIR: ssDir
 	};
 	if (workers > 1) env.PARALLEL = String(workers);
 	if (testRunId) env.TEST_RUN_ID = testRunId;
@@ -138,15 +216,47 @@ function runBuiltIn(
 	const proc = spawn('npm', ['run', 'test'], { env, shell: true });
 	activeProcs.add(proc);
 
-	proc.stdout.on('data', (d) => socket.emit('log', d.toString()));
-	proc.stderr.on('data', (d) => socket.emit('log', `[ERROR] ${d.toString()}`));
+	const ssPoller = startSsPoller(ssDir, ({ stepName, data }) => {
+		socket.emit('step-screenshot', { stepName, data });
+	});
 
-	proc.on('close', (code) => {
+	let logBuffer = '';
+	proc.stdout.on('data', (d) => {
+		const text = d.toString();
+		logBuffer += text;
+		socket.emit('log', text);
+	});
+	proc.stderr.on('data', (d) => {
+		const text = `[ERROR] ${d.toString()}`;
+		logBuffer += text;
+		socket.emit('log', text);
+	});
+
+	proc.on('close', async (code) => {
+		clearInterval(ssPoller);
+		fs.rm(ssDir, { recursive: true, force: true }, () => {});
 		activeProcs.delete(proc);
 		socket.emit('log', `\nTest finished with code ${code}`);
 		socket.emit('done', code);
 		io.emit('report-ready');
 
+		// Attach accumulated logs to the report generate-report.js just saved
+		try {
+			const latest = await prisma.report.findFirst({
+				where: { triggerType: TRIGGER_TYPE.MANUAL },
+				orderBy: { createdAt: 'desc' },
+				select: { id: true }
+			});
+			if (latest) {
+				await prisma.report.update({
+					where: { id: latest.id },
+					data: { logs: logBuffer || null }
+				});
+			}
+		} catch (e) {
+			console.error('[socket] Failed to save run logs:', e.message);
+		}
+
 		if (notifyDiscord || notifySlack) {
 			prisma.report
 				.findFirst({
@@ -224,6 +334,8 @@ async function runDistributed(
 
 	const total = activeRunnerIds.length;
 	const collectedReports = new Array(total).fill(null);
+	const laneLogs = {};
+	for (const l of laneInfos) laneLogs[l.id] = '';
 	let doneCount = 0;
 	let overallCode = 0;
 
@@ -244,7 +356,8 @@ async function runDistributed(
 					tag,
 					triggerType: TRIGGER_TYPE.MANUAL,
 					browser,
-					testRunId: testRunId ?? null
+					testRunId: testRunId ?? null,
+					laneLogs
 				})
 				.then((saved) => {
 					// Result is authoritative from the merged report, not the exit code —
@@ -278,40 +391,73 @@ async function runDistributed(
 	for (let i = 0; i < activeRunnerIds.length; i++) {
 		const lane = laneInfos[i];
 		const chunkTag = buildTagExpression(chunks[i]);
+		const chunkIds = chunks[i];
 
 		if (lane.id === BUILT_IN_RUNNER_ID) {
+			const laneId = lane.id;
+			const ssDir = path.join(os.tmpdir(), `plum-ss-${Date.now()}-${i}`);
+			fs.mkdirSync(ssDir, { recursive: true });
+
 			const env = {
 				...process.env,
 				TAG: chunkTag,
 				TRIGGER: TRIGGER_REMOTE,
 				BROWSER: browser,
 				REPORT_RUNNERS: String(workers),
-				PLUM_MODE: 'node'
+				PLUM_MODE: 'node',
+				PLUM_SS_DIR: ssDir
 			};
 			if (workers > 1) env.PARALLEL = String(workers);
 
 			const proc = spawn('npm', ['run', 'test'], { env, shell: true });
 			activeProcs.add(proc);
 
-			proc.stdout.on('data', (d) =>
-				socket.emit('runner-lane-log', { id: lane.id, log: d.toString() })
-			);
-			proc.stderr.on('data', (d) =>
-				socket.emit('runner-lane-log', { id: lane.id, log: `[ERROR] ${d.toString()}` })
-			);
+			const ssPoller = startSsPoller(ssDir, ({ stepName, data }) => {
+				socket.emit('runner-lane-screenshot', { id: laneId, stepName, data });
+			});
+
+			proc.stdout.on('data', (d) => {
+				const text = d.toString();
+				laneLogs[laneId] += text;
+				socket.emit('runner-lane-log', { id: laneId, log: text });
+			});
+			proc.stderr.on('data', (d) => {
+				const text = `[ERROR] ${d.toString()}`;
+				laneLogs[laneId] += text;
+				socket.emit('runner-lane-log', { id: laneId, log: text });
+			});
 
 			const idx = i;
 			proc.on('close', (code) => {
+				clearInterval(ssPoller);
+				fs.rm(ssDir, { recursive: true, force: true }, () => {});
 				activeProcs.delete(proc);
-				onLaneDone(idx, lane.id, code, readCucumberReportFile());
+				const content =
+					readCucumberReportFile() ??
+					makeSyntheticFailReport(lane.name, chunkIds, 'process exited with error');
+				onLaneDone(idx, laneId, code, content);
 			});
 		} else {
 			const idx = i;
+			const laneId = lane.id;
 			runnerService.dispatchAndPoll(
-				lane.id,
+				laneId,
 				{ tags: chunkTag, browser, workers },
-				(log) => socket.emit('runner-lane-log', { id: lane.id, log }),
-				(code, content) => onLaneDone(idx, lane.id, code, content)
+				(log) => {
+					laneLogs[laneId] += log;
+					socket.emit('runner-lane-log', { id: laneId, log });
+				},
+				(code, content) =>
+					onLaneDone(
+						idx,
+						laneId,
+						code,
+						content ??
+							makeSyntheticFailReport(lane.name, chunkIds, 'could not fetch report from runner')
+					),
+				({ stepName, data }) => {
+					socket.emit('runner-lane-screenshot', { id: laneId, stepName, data });
+				}
 			);
 		}
 	}

package/frontend/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "plum-frontend",
 	"private": true,
-	"version": "1.3.3",
+	"version": "1.4.0",
 	"type": "module",
 	"scripts": {
 		"dev": "vite dev",

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

@@ -35,8 +35,19 @@
 	import { fetchRunners } from '$lib/api/runners';
 	import { fetchRuns, fetchRun } from '$lib/api/repository';
 	import { fetchIntegrations } from '$lib/api/settings';
-	import { API_BASE, BROWSERS } from '$lib/constants';
+	import {
+		API_BASE,
+		BROWSERS,
+		BUILTIN_RUNNER_ID,
+		BUILTIN_RUNNER_LABEL,
+		WORKERS_MIN,
+		WORKERS_MAX,
+		RUN_PICKER_LIMIT,
+		RUN_TAG_DISPLAY_LIMIT,
+		ALL_TESTS_LABEL
+	} from '$lib/constants';
 	import ConfirmModal from '$lib/components/ui/ConfirmModal.svelte';
+	import Badge from '$lib/components/ui/Badge.svelte';
 
 	let availableRunners = [];
 	let testRuns = [];
@@ -83,10 +94,10 @@
 				availableRunners = r;
 				// Drop any saved selection pointing at runners that no longer exist,
 				// so a deleted runner can't linger in the selection and break runs.
-				const validIds = new Set(['built-in', ...r.map((x) => x.id)]);
+				const validIds = new Set([BUILTIN_RUNNER_ID, ...r.map((x) => x.id)]);
 				runnerConfig.update((c) => {
 					const pruned = c.selectedRunners.filter((id) => validIds.has(id));
-					return { ...c, selectedRunners: pruned.length > 0 ? pruned : ['built-in'] };
+					return { ...c, selectedRunners: pruned.length > 0 ? pruned : [BUILTIN_RUNNER_ID] };
 				});
 			})
 			.catch(() => {});
@@ -110,8 +121,8 @@
 				localStorage.setItem('plum:builtInEnabled', String(v));
 			} catch {}
 			runnerConfig.update((c) => {
-				if (!v && c.selectedRunners.includes('built-in')) {
-					const others = c.selectedRunners.filter((r) => r !== 'built-in');
+				if (!v && c.selectedRunners.includes(BUILTIN_RUNNER_ID)) {
+					const others = c.selectedRunners.filter((r) => r !== BUILTIN_RUNNER_ID);
 					return { ...c, selectedRunners: others.length > 0 ? others : c.selectedRunners };
 				}
 				return c;
@@ -155,7 +166,7 @@
 		s.on('runner-lanes-init', (lanes) => {
 			runnerState.update((r) => ({
 				...r,
-				lanes: lanes.map((l) => ({ ...l, status: 'running', logs: '' }))
+				lanes: lanes.map((l) => ({ ...l, status: 'running', logs: '', latestScreenshot: null }))
 			}));
 		});
 
@@ -173,6 +184,19 @@
 			}));
 		});
 
+		s.on('step-screenshot', ({ stepName, data }) => {
+			runnerState.update((r) => ({ ...r, latestScreenshot: { stepName, data } }));
+		});
+
+		s.on('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('tests-changed', () => testsVersion.update((v) => v + 1));
 		s.on('report-ready', () => reportsVersion.update((v) => v + 1));
 
@@ -200,17 +224,20 @@
 	$: cfg = $runnerConfig;
 
 	$: truncatedRunTag = (() => {
-		if (!state.currentRun?.tag) return 'all tests';
+		if (!state.currentRun?.tag) return ALL_TESTS_LABEL;
 		const parts = state.currentRun.tag.split(/ or /i);
-		if (parts.length <= 5) return state.currentRun.tag;
-		return parts.slice(0, 5).join(' or ') + ` +${parts.length - 5} more`;
+		if (parts.length <= RUN_TAG_DISPLAY_LIMIT) return state.currentRun.tag;
+		return (
+			parts.slice(0, RUN_TAG_DISPLAY_LIMIT).join(' or ') +
+			` +${parts.length - RUN_TAG_DISPLAY_LIMIT} more`
+		);
 	})();
 	$: cronJobs = Object.keys($activeCronJobs);
 	$: anyCronRunning = cronJobs.length > 0;
 	$: anyRunning = state.running || anyCronRunning;
 
 	$: if ($runsVersion >= 0)
-		fetchRuns({ limit: 200 })
+		fetchRuns({ limit: RUN_PICKER_LIMIT })
 			.then((r) => (testRuns = r.runs))
 			.catch(() => {});
 
@@ -238,8 +265,8 @@
 	$: currentBrowser = BROWSERS.find((b) => b.id === cfg.browser) ?? BROWSERS[0];
 
 	$: runnerSummary =
-		cfg.selectedRunners.length === 1 && cfg.selectedRunners[0] === 'built-in'
-			? 'Built-in'
+		cfg.selectedRunners.length === 1 && cfg.selectedRunners[0] === BUILTIN_RUNNER_ID
+			? BUILTIN_RUNNER_LABEL
 			: cfg.selectedRunners.length === 1
 				? (availableRunners.find((r) => r.id === cfg.selectedRunners[0])?.name ?? '1 node')
 				: `${cfg.selectedRunners.length} nodes`;
@@ -285,7 +312,7 @@
 	function adjustWorkers(delta) {
 		runnerConfig.update((c) => ({
 			...c,
-			workers: Math.max(1, Math.min(10, c.workers + delta))
+			workers: Math.max(WORKERS_MIN, Math.min(WORKERS_MAX, c.workers + delta))
 		}));
 	}
 
@@ -483,13 +510,13 @@
 					<button
 						class="step-btn"
 						on:click={() => adjustWorkers(-1)}
-						disabled={cfg.workers <= 1 || state.running}>−</button
+						disabled={cfg.workers <= WORKERS_MIN || state.running}>−</button
 					>
 					<span class="step-val">{cfg.workers}</span>
 					<button
 						class="step-btn"
 						on:click={() => adjustWorkers(1)}
-						disabled={cfg.workers >= 10 || state.running}>+</button
+						disabled={cfg.workers >= WORKERS_MAX || state.running}>+</button
 					>
 				</div>
 			</div>
@@ -551,7 +578,7 @@
 						<button
 							class="dropdown-trigger"
 							class:open={runnersOpen}
-							class:has-remote={cfg.selectedRunners.some((r) => r !== 'built-in')}
+							class:has-remote={cfg.selectedRunners.some((r) => r !== BUILTIN_RUNNER_ID)}
 							on:click={() => {
 								if (!state.running) runnersOpen = !runnersOpen;
 							}}
@@ -578,11 +605,11 @@
 									<label class="runner-option">
 										<input
 											type="checkbox"
-											checked={isRunnerSelected('built-in')}
-											on:change={() => toggleRunner('built-in')}
+											checked={isRunnerSelected(BUILTIN_RUNNER_ID)}
+											on:change={() => toggleRunner(BUILTIN_RUNNER_ID)}
 										/>
 										<span class="runner-dot built-in"></span>
-										<span>Built-in</span>
+										<span>{BUILTIN_RUNNER_LABEL}</span>
 									</label>
 								{/if}
 								{#each availableRunners as r}
@@ -704,7 +731,7 @@
 							</span>
 						{/if}
 					</div>
-					<span class="run-card-badge">Live</span>
+					<Badge variant="tag">Live</Badge>
 					<svg
 						width="13"
 						height="13"
@@ -727,7 +754,7 @@
 						<span class="run-card-label">{name}</span>
 						<span class="run-card-meta">Scheduled run</span>
 					</div>
-					<span class="run-card-badge cron-badge">Scheduled</span>
+					<Badge variant="schedule">Scheduled</Badge>
 					<svg
 						width="13"
 						height="13"
@@ -860,18 +887,6 @@
 		animation: dotPulse 1.6s ease-in-out infinite;
 	}
 
-	@keyframes dotPulse {
-		0%,
-		100% {
-			opacity: 1;
-			transform: scale(1);
-		}
-		50% {
-			opacity: 0.4;
-			transform: scale(0.65);
-		}
-	}
-
 	.status-word {
 		font-size: 0.72rem;
 		font-weight: 600;
@@ -887,7 +902,7 @@
 		color: var(--text-muted);
 		background: var(--bg-subtle);
 		border: 1px solid var(--border);
-		border-radius: 100px;
+		border-radius: var(--radius-pill);
 		padding: 0.1rem 0.45rem;
 		white-space: nowrap;
 		overflow: hidden;
@@ -915,7 +930,7 @@
 
 	.view-report-btn:hover {
 		background: var(--accent);
-		color: #fff;
+		color: var(--white);
 	}
 
 	/* ── Center: controls ── */
@@ -1175,7 +1190,7 @@
 		height: 30px;
 		padding: 0 0.875rem;
 		background: var(--accent);
-		color: white;
+		color: var(--white);
 		border: none;
 		border-radius: var(--radius-sm);
 		font-family: var(--font-body);
@@ -1199,7 +1214,7 @@
 		width: 10px;
 		height: 10px;
 		border: 1.5px solid rgba(255, 255, 255, 0.35);
-		border-top-color: white;
+		border-top-color: var(--white);
 		border-radius: 50%;
 		animation: spin 0.65s linear infinite;
 		flex-shrink: 0;
@@ -1241,7 +1256,7 @@
 	.notify-btn.active {
 		background: var(--accent);
 		border-color: var(--accent);
-		color: #fff;
+		color: var(--white);
 	}
 
 	.notify-btn:disabled {
@@ -1363,23 +1378,6 @@
 		margin: 0 0.15rem;
 	}
 
-	.run-card-badge {
-		font-size: 0.62rem;
-		font-weight: 600;
-		letter-spacing: 0.07em;
-		text-transform: uppercase;
-		color: var(--accent);
-		background: var(--accent-soft);
-		padding: 0.1rem 0.4rem;
-		border-radius: 100px;
-		flex-shrink: 0;
-	}
-
-	.run-card-badge.cron-badge {
-		color: var(--warn);
-		background: var(--warn-soft);
-	}
-
 	.run-card-arrow {
 		color: var(--text-muted);
 		flex-shrink: 0;

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

@@ -0,0 +1,56 @@
+<!--
+ * This file is part of Plum.
+ *
+ * Plum is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * Plum is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with Plum. If not, see https://www.gnu.org/licenses/.
+ -->
+
+<!--
+ * This file is part of Plum.
+ *
+ * Plum is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * Plum is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with Plum. If not, see https://www.gnu.org/licenses/.
+-->
+
+<script>
+	import { AUTOMATED_LABEL } from '$lib/constants';
+</script>
+
+<span class="auto-badge">{AUTOMATED_LABEL}</span>
+
+<style>
+	.auto-badge {
+		display: inline-flex;
+		align-items: center;
+		font-size: 0.62rem;
+		font-weight: 600;
+		text-transform: uppercase;
+		letter-spacing: 0.05em;
+		color: var(--accent);
+		background: var(--accent-soft);
+		border-radius: var(--radius-pill);
+		padding: 0.1rem 0.45rem;
+		flex-shrink: 0;
+		white-space: nowrap;
+	}
+</style>

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

@@ -0,0 +1,77 @@
+<!--
+ * This file is part of Plum.
+ *
+ * Plum is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * Plum is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with Plum. If not, see https://www.gnu.org/licenses/.
+ -->
+
+<!--
+ * This file is part of Plum.
+ *
+ * Plum is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * Plum is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with Plum. If not, see https://www.gnu.org/licenses/.
+-->
+
+<script>
+	export let href = '/reports';
+	export let label = 'Reports';
+</script>
+
+<div class="back-row">
+	<a {href} class="back-link">
+		<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="19" y1="12" x2="5" y2="12" />
+			<polyline points="12 19 5 12 12 5" />
+		</svg>
+		{label}
+	</a>
+</div>
+
+<style>
+	.back-row {
+		margin-bottom: 1.5rem;
+	}
+
+	.back-link {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.35rem;
+		font-size: 0.8125rem;
+		color: var(--text-muted);
+		text-decoration: none;
+		transition: color var(--duration-fast);
+	}
+
+	.back-link:hover {
+		color: var(--text);
+	}
+</style>