plum-e2e 2.4.13 → 2.5.1

package/bin/plum.js

@@ -247,20 +247,20 @@ function applyServerConfig(cfg) {
 	clack.log.success('docker-compose.override.yml written');
 }
 
-async function serverStart() {
-	clack.intro(pc.bgMagenta(pc.white('  🟣 Plum — Server  ')));
-	const cfg = await configureServer({ force: false });
-	applyServerConfig(cfg);
-	clack.log.info(`UI: ${pc.cyan(`http://localhost:${cfg.frontendPort}`)}`);
-
-	execSync('docker compose up --build -d', { cwd: plumRoot, stdio: 'inherit' });
-
-	const apiBase = `http://localhost:${cfg.backendPort}`;
+// Node's fetch resolves "localhost" to ::1 first on many Linux distros (Debian
+// included). If Docker only published the port on IPv4, that first attempt hangs
+// until it times out on every poll, eating the whole budget even though the port
+// is reachable — and reachable fine from a browser, which races both families.
+// 127.0.0.1 sidesteps the DNS/happy-eyeballs mismatch entirely.
+const READY_POLL_INTERVAL_MS = 2000;
+const READY_POLL_MAX_ATTEMPTS = 90; // ~3 minutes
+
+async function waitForServerReady(apiBase) {
 	const s = clack.spinner();
 	s.start('Waiting for server to be ready…');
 	let ready = false;
-	for (let i = 0; i < 40; i++) {
-		await new Promise((r) => setTimeout(r, 1500));
+	for (let i = 0; i < READY_POLL_MAX_ATTEMPTS; i++) {
+		await new Promise((r) => setTimeout(r, READY_POLL_INTERVAL_MS));
 		try {
 			const res = await fetch(`${apiBase}/auth/needs-setup`);
 			if (res.ok) {
@@ -268,54 +268,90 @@ async function serverStart() {
 				break;
 			}
 		} catch {}
+		if (i > 0 && i % 15 === 0) {
+			s.message(
+				`Still waiting for server to be ready… (${Math.round((i * READY_POLL_INTERVAL_MS) / 1000)}s — check "docker compose logs -f backend" if this feels stuck)`
+			);
+		}
 	}
-	s.stop(ready ? pc.green('✓ Server is ready') : pc.yellow('Server may still be starting'));
+	s.stop(
+		ready
+			? pc.green('✓ Server is ready')
+			: pc.yellow('Server did not respond in time — it may still be starting')
+	);
+	return ready;
+}
 
-	if (ready) {
-		let needsSetup = false;
-		try {
-			const res = await fetch(`${apiBase}/auth/needs-setup`);
-			const data = await res.json();
-			needsSetup = data.needsSetup;
-		} catch {}
+async function runFirstUserSetup(apiBase, frontendPort) {
+	let needsSetup = false;
+	try {
+		const res = await fetch(`${apiBase}/auth/needs-setup`);
+		const data = await res.json();
+		needsSetup = data.needsSetup;
+	} catch {}
 
-		if (needsSetup) {
-			clack.log.info('No users found — create your first account to get started.');
+	if (!needsSetup) return;
 
-			const name = await clack.text({ message: 'Your name', placeholder: 'Jane Smith' });
-			if (clack.isCancel(name)) {
-				clack.log.warn('Skipped. Create a user at /setup in the UI.');
-			} else {
-				const email = await clack.text({
-					message: 'Email address',
-					placeholder: 'jane@example.com'
-				});
-				if (clack.isCancel(email)) {
-					clack.log.warn('Skipped. Create a user at /setup in the UI.');
-				} else {
-					const password = await clack.password({ message: 'Password (min 8 characters)' });
-					if (clack.isCancel(password)) {
-						clack.log.warn('Skipped. Create a user at /setup in the UI.');
-					} else {
-						try {
-							const res = await fetch(`${apiBase}/auth/setup`, {
-								method: 'POST',
-								headers: { 'Content-Type': 'application/json' },
-								body: JSON.stringify({ name, email, password })
-							});
-							if (res.ok) {
-								clack.log.success(`Account created for ${email}. You can now log in.`);
-							} else {
-								const err = await res.json();
-								clack.log.error(`Failed to create account: ${err.error ?? 'unknown error'}`);
-							}
-						} catch (e) {
-							clack.log.error(`Failed to create account: ${e.message}`);
-						}
-					}
-				}
-			}
+	if (!interactiveAllowed()) {
+		clack.log.info(
+			`No users found. Open ${pc.cyan(`http://localhost:${frontendPort}/setup`)} to create your first account.`
+		);
+		return;
+	}
+
+	clack.log.info('No users found — create your first account to get started.');
+
+	const name = await clack.text({ message: 'Your name', placeholder: 'Jane Smith' });
+	if (clack.isCancel(name)) {
+		clack.log.warn('Skipped. Create a user at /setup in the UI.');
+		return;
+	}
+	const email = await clack.text({ message: 'Email address', placeholder: 'jane@example.com' });
+	if (clack.isCancel(email)) {
+		clack.log.warn('Skipped. Create a user at /setup in the UI.');
+		return;
+	}
+	const password = await clack.password({ message: 'Password (min 8 characters)' });
+	if (clack.isCancel(password)) {
+		clack.log.warn('Skipped. Create a user at /setup in the UI.');
+		return;
+	}
+
+	try {
+		const res = await fetch(`${apiBase}/auth/setup`, {
+			method: 'POST',
+			headers: { 'Content-Type': 'application/json' },
+			body: JSON.stringify({ name, email, password })
+		});
+		if (res.ok) {
+			clack.log.success(`Account created for ${email}. You can now log in.`);
+		} else {
+			const err = await res.json();
+			clack.log.error(`Failed to create account: ${err.error ?? 'unknown error'}`);
 		}
+	} catch (e) {
+		clack.log.error(`Failed to create account: ${e.message}`);
+	}
+}
+
+async function serverStart() {
+	clack.intro(pc.bgMagenta(pc.white('  🟣 Plum — Server  ')));
+	const cfg = await configureServer({ force: false });
+	applyServerConfig(cfg);
+	clack.log.info(`UI: ${pc.cyan(`http://localhost:${cfg.frontendPort}`)}`);
+
+	execSync('docker compose up --build -d', { cwd: plumRoot, stdio: 'inherit' });
+
+	const apiBase = `http://127.0.0.1:${cfg.backendPort}`;
+	const ready = await waitForServerReady(apiBase);
+
+	if (ready) {
+		await runFirstUserSetup(apiBase, cfg.frontendPort);
+	} else {
+		clack.log.warn(
+			`Could not confirm the backend is ready. Check ${pc.cyan('docker compose logs -f backend')}.\n` +
+				`Once it responds, open ${pc.cyan(`http://localhost:${cfg.frontendPort}/setup`)} to create your first account (if this is a fresh install).`
+		);
 	}
 
 	clack.log.info(`UI:  ${pc.cyan(`http://localhost:${cfg.frontendPort}`)}`);
@@ -332,21 +368,13 @@ async function serverRestart() {
 
 	execSync('docker compose up --build -d', { cwd: plumRoot, stdio: 'inherit' });
 
-	const apiBase = `http://localhost:${cfg.backendPort}`;
-	const s = clack.spinner();
-	s.start('Waiting for server to be ready…');
-	let ready = false;
-	for (let i = 0; i < 40; i++) {
-		await new Promise((r) => setTimeout(r, 1500));
-		try {
-			const res = await fetch(`${apiBase}/auth/needs-setup`);
-			if (res.ok) {
-				ready = true;
-				break;
-			}
-		} catch {}
+	const apiBase = `http://127.0.0.1:${cfg.backendPort}`;
+	const ready = await waitForServerReady(apiBase);
+	if (!ready) {
+		clack.log.warn(
+			`Could not confirm the backend is ready. Check ${pc.cyan('docker compose logs -f backend')}.`
+		);
 	}
-	s.stop(ready ? pc.green('✓ Server is ready') : pc.yellow('Server may still be starting'));
 	clack.log.info(`UI:  ${pc.cyan(`http://localhost:${cfg.frontendPort}`)}`);
 	clack.log.info(`API: ${pc.cyan(`http://localhost:${cfg.backendPort}`)}`);
 	clack.outro(pc.green('Server restarted.'));

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/api/reports.js

@@ -15,12 +15,23 @@
  * along with Plum. If not, see https://www.gnu.org/licenses/.
  */
 
-import { API_BASE } from '$lib/constants';
+import { API_BASE, REPORTS_PER_PAGE } from '$lib/constants';
 
-export async function fetchReports() {
-	const res = await fetch(`${API_BASE}/reports`);
-	const { reports } = await res.json();
-	return reports.map((r) => ({ ...r, date: new Date(r.createdAt).toLocaleString() }));
+function withDate(r) {
+	return { ...r, date: new Date(r.createdAt).toLocaleString() };
+}
+
+export async function fetchReports({ page = 1, limit = REPORTS_PER_PAGE } = {}) {
+	const params = new URLSearchParams({ page, limit });
+	const res = await fetch(`${API_BASE}/reports?${params}`);
+	const { reports, total, passCount, failCount, trend } = await res.json();
+	return {
+		reports: reports.map(withDate),
+		total,
+		passCount,
+		failCount,
+		trend: trend.map(withDate)
+	};
 }
 
 export async function fetchLatestReportId() {

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>

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

@@ -31,7 +31,7 @@
 		letter-spacing: 0.05em;
 		text-transform: uppercase;
 		padding: 0.2rem 0.6rem;
-		border-radius: 100px;
+		border-radius: var(--radius-pill);
 		white-space: nowrap;
 	}
 

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

@@ -74,7 +74,7 @@
 	/* Variants */
 	.primary {
 		background: var(--accent);
-		color: #fff;
+		color: var(--white);
 		border-color: var(--accent);
 	}