plum-e2e 2.4.12 → 2.5.0

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);
 	}
 

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

@@ -0,0 +1,59 @@
+<!--
+ * 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 id = '';
+	export let small = false;
+</script>
+
+<span class="id-chip" class:small>{id}</span>
+
+<style>
+	.id-chip {
+		font-family: 'JetBrains Mono', monospace;
+		font-weight: 600;
+		color: var(--accent);
+		background: var(--accent-soft);
+		border-radius: 4px;
+		letter-spacing: 0.02em;
+		font-size: 0.7rem;
+		padding: 0.1rem 0.4rem;
+		flex-shrink: 0;
+		white-space: nowrap;
+	}
+
+	.id-chip.small {
+		font-size: 0.63rem;
+	}
+</style>

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

@@ -67,7 +67,7 @@
 		border: 1px solid var(--fail);
 		border-radius: var(--radius-sm);
 		cursor: pointer;
-		color: #fff;
+		color: var(--white);
 		transition: opacity var(--duration-fast);
 	}
 

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

@@ -89,7 +89,7 @@
 
 	button.active {
 		background: var(--accent);
-		color: #fff;
+		color: var(--white);
 		border-color: var(--accent);
 	}
 

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

@@ -0,0 +1,83 @@
+<!--
+ * 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 priority = 'Medium';
+	export let small = false;
+
+	$: p = priority?.toLowerCase() ?? 'medium';
+</script>
+
+<span
+	class="priority-badge"
+	class:critical={p === 'critical'}
+	class:high={p === 'high'}
+	class:medium={p === 'medium'}
+	class:low={p === 'low'}
+	class:small
+>
+	{priority}
+</span>
+
+<style>
+	.priority-badge {
+		font-size: 0.65rem;
+		font-weight: 500;
+		border-radius: var(--radius-pill);
+		padding: 0.12rem 0.45rem;
+		flex-shrink: 0;
+		white-space: nowrap;
+	}
+
+	.priority-badge.small {
+		font-size: 0.6rem;
+	}
+
+	.critical {
+		background: var(--fail-soft);
+		color: var(--fail);
+	}
+	.high {
+		background: var(--warn-soft);
+		color: var(--warn);
+	}
+	.medium {
+		background: var(--node-soft);
+		color: var(--node);
+	}
+	.low {
+		background: var(--bg-subtle);
+		color: var(--text-muted);
+	}
+</style>

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

@@ -0,0 +1,92 @@
+<!--
+ * 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 status = 'pending';
+
+	$: v =
+		status === 'pass'
+			? 'pass'
+			: status === 'fail'
+				? 'fail'
+				: status === 'blocked'
+					? 'warn'
+					: status === 'skip'
+						? 'muted'
+						: 'pending';
+</script>
+
+<span
+	class="result-chip"
+	class:pass={v === 'pass'}
+	class:fail={v === 'fail'}
+	class:warn={v === 'warn'}
+	class:muted={v === 'muted'}
+	class:pending={v === 'pending'}
+>
+	{status}
+</span>
+
+<style>
+	.result-chip {
+		font-size: 0.7rem;
+		font-weight: 600;
+		text-transform: uppercase;
+		letter-spacing: 0.05em;
+		padding: 0.2rem 0.6rem;
+		border-radius: var(--radius-pill);
+		white-space: nowrap;
+	}
+
+	.pass {
+		background: var(--pass-soft);
+		color: var(--pass);
+	}
+	.fail {
+		background: var(--fail-soft);
+		color: var(--fail);
+	}
+	.warn {
+		background: var(--warn-soft);
+		color: var(--warn);
+	}
+	.muted {
+		background: var(--bg-subtle);
+		color: var(--text-muted);
+	}
+	.pending {
+		background: var(--bg-subtle);
+		color: var(--text-muted);
+	}
+</style>

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

@@ -0,0 +1,64 @@
+<!--
+ * 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 status = 'passed';
+</script>
+
+<span
+	class="status-dot"
+	class:pass={status === 'passed'}
+	class:fail={status === 'failed'}
+	class:skip={status !== 'passed' && status !== 'failed'}
+></span>
+
+<style>
+	.status-dot {
+		display: inline-block;
+		width: 8px;
+		height: 8px;
+		border-radius: 50%;
+		flex-shrink: 0;
+	}
+
+	.pass {
+		background: var(--pass);
+	}
+	.fail {
+		background: var(--fail);
+	}
+	.skip {
+		background: var(--text-muted);
+	}
+</style>

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

@@ -0,0 +1,79 @@
+<!--
+ * 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 { keywordClass } from '$lib/utils/format';
+
+	export let keyword = '';
+
+	$: klass = keywordClass(keyword);
+</script>
+
+<span
+	class="kw"
+	class:kw-given={klass === 'kw-given'}
+	class:kw-when={klass === 'kw-when'}
+	class:kw-then={klass === 'kw-then'}
+	class:kw-and={klass === 'kw-and'}>{keyword}</span
+>
+
+<style>
+	.kw {
+		font-size: 0.72rem;
+		font-weight: 500;
+		letter-spacing: 0.04em;
+		flex-shrink: 0;
+		padding: 0.05rem 0.4rem;
+		border-radius: 3px;
+		font-family: 'JetBrains Mono', monospace;
+	}
+
+	.kw-given {
+		background: var(--accent-soft);
+		color: var(--accent);
+	}
+	.kw-when {
+		background: var(--warn-soft);
+		color: var(--warn);
+	}
+	.kw-then {
+		background: var(--pass-soft);
+		color: var(--pass);
+	}
+	.kw-and {
+		background: var(--bg-elevated);
+		color: var(--text-muted);
+		border: 1px solid var(--border);
+	}
+</style>

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

@@ -0,0 +1,66 @@
+<!--
+ * 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 status = 'passed';
+</script>
+
+<span
+	class="step-status-icon"
+	class:icon-pass={status === 'passed'}
+	class:icon-fail={status === 'failed'}
+	class:icon-skip={status !== 'passed' && status !== 'failed'}
+>
+	{#if status === 'passed'}✓{:else if status === 'failed'}✗{:else}−{/if}
+</span>
+
+<style>
+	.step-status-icon {
+		font-size: 0.75rem;
+		font-weight: 600;
+		width: 14px;
+		flex-shrink: 0;
+		text-align: center;
+	}
+
+	.icon-pass {
+		color: var(--pass);
+	}
+	.icon-fail {
+		color: var(--fail);
+	}
+	.icon-skip {
+		color: var(--text-muted);
+	}
+</style>

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

@@ -0,0 +1,51 @@
+<!--
+ * 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 tag = '';
+</script>
+
+<span class="tag-chip">{tag}</span>
+
+<style>
+	.tag-chip {
+		font-size: 0.65rem;
+		font-family: 'JetBrains Mono', monospace;
+		background: var(--accent-soft);
+		color: var(--accent);
+		padding: 0.1rem 0.4rem;
+		border-radius: var(--radius-pill);
+		white-space: nowrap;
+	}
+</style>

package/frontend/src/lib/constants.js

@@ -34,3 +34,17 @@ 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 RUN_REFRESH_MS = 15000;
+
+export const WORKERS_MIN = 1;
+export const WORKERS_MAX = 10;
+export const RUN_PICKER_LIMIT = 200;
+export const RUN_TAG_DISPLAY_LIMIT = 5;
+
+export const BUILTIN_RUNNER_ID = 'built-in';
+export const BUILTIN_RUNNER_LABEL = 'Built-in';
+export const ALL_TESTS_LABEL = 'all tests';
+export const AUTOMATED_LABEL = 'Automated';

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

@@ -26,8 +26,9 @@ 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 }] multi-runner only
-	currentRun: null // { tag, workers, browser, runners } — set while running
+	lanes: [], // [{ id, name, testCount, status, logs, latestScreenshot }] multi-runner only
+	currentRun: null, // { tag, workers, browser, runners } — set while running
+	latestScreenshot: null // { stepName, data: base64 } for single built-in runner
 });
 
 export const runnerConfig = writable({
@@ -63,7 +64,8 @@ export function triggerRun(id, testRunId, notify = {}, runTitle = null) {
 		status: 'running',
 		lastRunId: runId,
 		lanes: [],
-		currentRun: { tag: runId, workers, browser, runners: selectedRunners, runTitle }
+		currentRun: { tag: runId, workers, browser, runners: selectedRunners, runTitle },
+		latestScreenshot: null
 	});
 	panelExpanded.set(true);
 

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

@@ -48,6 +48,32 @@
 	--radius-sm: 6px;
 	--radius-md: 10px;
 	--radius-lg: 16px;
+	--radius-pill: 100px;
+
+	--white: #ffffff;
+}
+
+@keyframes fadeUp {
+	from {
+		opacity: 0;
+		transform: translateY(6px);
+	}
+	to {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}
+
+@keyframes dotPulse {
+	0%,
+	100% {
+		opacity: 1;
+		transform: scale(1);
+	}
+	50% {
+		opacity: 0.4;
+		transform: scale(0.65);
+	}
 }
 
 /* ── Design tokens (dark) ──────────────────────────────────────────────── */