plum-e2e 1.2.4 → 1.3.0

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

@@ -16,7 +16,7 @@
  -->
 
 <script>
-	/** @type {'pass' | 'fail' | 'tag' | 'schedule' | 'neutral'} */
+	/** @type {'pass' | 'fail' | 'tag' | 'schedule' | 'neutral' | 'node'} */
 	export let variant = 'neutral';
 </script>
 
@@ -60,4 +60,9 @@
 		color: var(--text-muted);
 		border: 1px solid var(--border);
 	}
+
+	.node {
+		background: var(--node-soft);
+		color: var(--node);
+	}
 </style>

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

@@ -0,0 +1,98 @@
+<!--
+ * 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 { createEventDispatcher } from 'svelte';
+	import Modal from './Modal.svelte';
+
+	export let open = false;
+	export let title = 'Confirm';
+	export let confirmLabel = 'Delete';
+	export let loading = false;
+
+	const dispatch = createEventDispatcher();
+</script>
+
+<Modal bind:open {title}>
+	<div class="body">
+		<slot />
+	</div>
+	<div class="actions">
+		<button class="btn-danger" on:click={() => dispatch('confirm')} disabled={loading}>
+			{loading ? 'Working…' : confirmLabel}
+		</button>
+		<button class="btn-cancel" on:click={() => (open = false)} disabled={loading}>Cancel</button>
+	</div>
+</Modal>
+
+<style>
+	.body {
+		font-size: 0.9375rem;
+		color: var(--text-muted);
+		line-height: 1.6;
+	}
+
+	.body :global(strong) {
+		color: var(--text);
+		font-weight: 500;
+	}
+
+	.actions {
+		display: flex;
+		gap: 0.625rem;
+		padding-top: 0.25rem;
+	}
+
+	.btn-danger {
+		height: 34px;
+		padding: 0 1rem;
+		font-size: 0.8125rem;
+		font-family: inherit;
+		font-weight: 500;
+		background: var(--fail);
+		border: 1px solid var(--fail);
+		border-radius: var(--radius-sm);
+		cursor: pointer;
+		color: #fff;
+		transition: opacity var(--duration-fast);
+	}
+
+	.btn-danger:hover:not(:disabled) {
+		opacity: 0.85;
+	}
+	.btn-danger:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+
+	.btn-cancel {
+		height: 34px;
+		padding: 0 1rem;
+		font-size: 0.8125rem;
+		font-family: inherit;
+		background: var(--bg-elevated);
+		border: 1px solid var(--border);
+		border-radius: var(--radius-sm);
+		cursor: pointer;
+		color: var(--text);
+		transition: background var(--duration-fast);
+	}
+
+	.btn-cancel:hover {
+		background: var(--bg-subtle);
+	}
+</style>

package/frontend/{tailwind.config.js → src/lib/components/ui/EmptyState.svelte}

@@ -1,4 +1,4 @@
-/*
+<!--
  * This file is part of Plum.
  *
  * Plum is free software: you can redistribute it and/or modify
@@ -13,11 +13,30 @@
  *
  * You should have received a copy of the GNU General Public License
  * along with Plum. If not, see https://www.gnu.org/licenses/.
- */
+ -->
 
-/** @type {import('tailwindcss').Config} */
-export default {
-	content: ['./src/**/*.{html,js,svelte,ts}'],
-	theme: { extend: {} },
-	plugins: []
-};
+<script>
+	export let message = 'Nothing here yet.';
+	/** Optional extra padding class: 'sm' | 'md' (default) | 'lg' */
+	export let size = 'md';
+</script>
+
+<p class="empty {size}"><slot>{message}</slot></p>
+
+<style>
+	.empty {
+		color: var(--text-muted);
+		font-size: 0.9375rem;
+		text-align: center;
+	}
+
+	.sm {
+		padding: 1.5rem 0;
+	}
+	.md {
+		padding: 3rem 0;
+	}
+	.lg {
+		padding: 5rem 0;
+	}
+</style>

package/frontend/{postcss.config.js → src/lib/components/ui/Toast.svelte}

@@ -1,4 +1,4 @@
-/*
+<!--
  * This file is part of Plum.
  *
  * Plum is free software: you can redistribute it and/or modify
@@ -13,11 +13,24 @@
  *
  * You should have received a copy of the GNU General Public License
  * along with Plum. If not, see https://www.gnu.org/licenses/.
- */
+ -->
 
-export default {
-	plugins: {
-		tailwindcss: {},
-		autoprefixer: {}
+<script>
+	import { fly } from 'svelte/transition';
+
+	/** @type {{ type: 'success' | 'error', message: string } | null} */
+	export let toast = null;
+</script>
+
+{#if toast}
+	<div class="toast alert alert-{toast.type}" transition:fly={{ y: -8, duration: 240 }}>
+		{toast.message}
+	</div>
+{/if}
+
+<style>
+	.toast {
+		margin-bottom: 1.25rem;
+		border-radius: var(--radius-md);
 	}
-};
+</style>

package/frontend/src/lib/constants.js

@@ -0,0 +1,36 @@
+/*
+ * 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/.
+ */
+
+export const API_BASE = import.meta.env.VITE_API_URL ?? 'http://localhost:3001';
+
+export const BROWSERS = [
+	{ id: 'chromium', label: 'Chrome' },
+	{ id: 'firefox', label: 'Firefox' },
+	{ id: 'webkit', label: 'WebKit' }
+];
+
+export const TRIGGER_TYPES = Object.freeze({
+	MANUAL: 'manual-trigger',
+	CLI: 'command-line-trigger'
+});
+
+export const WORKER_OPTIONS = [1, 2, 4, 8];
+
+export const REPORTS_PER_PAGE = 15;
+
+export const COPY_TIMEOUT_MS = 1400;
+export const TOAST_TIMEOUT_MS = 4000;

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

@@ -20,25 +20,28 @@ import { writable, get } from 'svelte/store';
 export const socket = writable(null);
 
 export const runnerState = writable({
-	output: 'Ready — select a test from the list.\n',
+	output: '',
 	running: false,
 	testCompleted: false,
-	latestReport: null,
+	latestReportId: null, // number | null — set after test finishes
 	status: 'idle', // 'idle' | 'running' | 'pass' | 'fail'
-	lastRunId: ''
+	lastRunId: '',
+	lanes: [], // [{ id, name, testCount, status, logs }] multi-runner only
+	currentRun: null // { tag, workers, browser, runners } — set while running
 });
 
 export const runnerConfig = writable({
 	workers: 1,
-	testID: ''
+	testID: '',
+	browser: 'chromium',
+	selectedRunners: ['built-in']
 });
 
-export const panelExpanded = writable(true);
+export const panelExpanded = writable(false);
 
-// Increments whenever the backend detects a change in tests/features/
-export const testsVersion = writable(0);
+export const builtInEnabled = writable(true);
 
-// Increments whenever a new report file is detected
+export const testsVersion = writable(0);
 export const reportsVersion = writable(0);
 
 // Map of taskName → true for every cron job currently executing
@@ -48,17 +51,25 @@ export function triggerRun(id) {
 	const s = get(socket);
 	if (!s) return;
 
-	const { workers, testID } = get(runnerConfig);
+	const { workers, testID, browser, selectedRunners } = get(runnerConfig);
 	const runId = (id !== undefined ? id : testID).trim().replace(/\sOR\s/gi, (m) => m.toLowerCase());
 
 	runnerState.set({
 		output: `Running: ${runId || '(all tests)'}\n`,
 		running: true,
 		testCompleted: false,
-		latestReport: null,
+		latestReportId: null,
 		status: 'running',
-		lastRunId: runId
+		lastRunId: runId,
+		lanes: [],
+		currentRun: { tag: runId, workers, browser, runners: selectedRunners }
 	});
 	panelExpanded.set(true);
-	s.emit('run-test', runId, workers);
+
+	s.emit('run-test', { tag: runId, workers, browser, runners: selectedRunners });
+}
+
+export function cancelRun() {
+	const s = get(socket);
+	if (s) s.emit('cancel-test');
 }

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

@@ -0,0 +1,176 @@
+/*
+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/.
+ */
+
+/* ── Form fields ────────────────────────────────────────────────────────── */
+
+.field {
+	display: flex;
+	flex-direction: column;
+	gap: 0.375rem;
+}
+
+.field-label {
+	display: flex;
+	justify-content: space-between;
+	font-size: 0.8125rem;
+	font-weight: 400;
+	color: var(--text-muted);
+}
+
+.field-hint {
+	font-size: 0.75rem;
+	color: var(--text-muted);
+}
+
+.field-input {
+	width: 100%;
+	padding: 0.6rem 0.875rem;
+	border: 1px solid var(--border);
+	border-radius: var(--radius-md);
+	background: var(--bg-subtle);
+	color: var(--text);
+	font-family: var(--font-body);
+	font-size: 0.875rem;
+	font-weight: 300;
+	outline: none;
+	appearance: none;
+	transition:
+		border-color var(--duration-fast),
+		box-shadow var(--duration-fast);
+}
+
+.field-input:focus {
+	border-color: var(--accent);
+	box-shadow: 0 0 0 3px var(--accent-soft);
+}
+
+.field-input:disabled {
+	opacity: 0.5;
+	cursor: not-allowed;
+}
+
+.field-input::placeholder {
+	color: var(--text-muted);
+}
+
+/* ── Data table ─────────────────────────────────────────────────────────── */
+
+.data-table {
+	width: 100%;
+	border-collapse: collapse;
+	font-size: 0.875rem;
+}
+
+.data-table th {
+	text-align: left;
+	padding: 0.5rem 1rem;
+	font-family: var(--font-body);
+	font-weight: 500;
+	font-size: 0.7rem;
+	letter-spacing: 0.07em;
+	text-transform: uppercase;
+	color: var(--text-muted);
+	border-bottom: 1px solid var(--border);
+}
+
+.data-table td {
+	padding: 0.875rem 1rem;
+	border-bottom: 1px solid var(--border);
+	color: var(--text);
+	vertical-align: middle;
+}
+
+.data-table tbody tr:last-child td {
+	border-bottom: none;
+}
+
+/* ── Card ───────────────────────────────────────────────────────────────── */
+
+.card {
+	background: var(--bg-elevated);
+	border: 1px solid var(--border);
+	border-radius: var(--radius-lg);
+	padding: 1.5rem;
+	transition:
+		background var(--duration-base) var(--ease-out),
+		border-color var(--duration-base) var(--ease-out);
+}
+
+.card-title {
+	font-family: var(--font-display);
+	font-size: 1.25rem;
+	font-weight: 400;
+	color: var(--text);
+	margin-bottom: 0.25rem;
+}
+
+.card-subtitle {
+	font-size: 0.8125rem;
+	color: var(--text-muted);
+	margin-bottom: 1.25rem;
+}
+
+/* ── Alert ──────────────────────────────────────────────────────────────── */
+
+.alert {
+	display: flex;
+	align-items: center;
+	gap: 0.625rem;
+	padding: 0.75rem 1rem;
+	border-radius: var(--radius-md);
+	font-size: 0.875rem;
+	font-weight: 400;
+}
+
+.alert-success {
+	background: var(--pass-soft);
+	color: var(--pass);
+}
+
+.alert-error {
+	background: var(--fail-soft);
+	color: var(--fail);
+}
+
+/* ── Animations ─────────────────────────────────────────────────────────── */
+
+@keyframes fadeUp {
+	from {
+		opacity: 0;
+		transform: translateY(10px);
+	}
+	to {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}

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

@@ -0,0 +1,86 @@
+/*
+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/.
+ */
+
+/* ── Minimal modern reset ──────────────────────────────────────────────── */
+
+*,
+*::before,
+*::after {
+	box-sizing: border-box;
+	margin: 0;
+	padding: 0;
+}
+
+html {
+	scroll-behavior: smooth;
+}
+
+body {
+	font-family: var(--font-body);
+	font-weight: 300;
+	font-size: 1rem;
+	line-height: 1.65;
+	background-color: var(--bg);
+	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.07'/%3E%3C/svg%3E");
+	background-size: 200px 200px;
+	color: var(--text);
+	-webkit-font-smoothing: antialiased;
+	transition:
+		background-color var(--duration-base) var(--ease-out),
+		color var(--duration-base) var(--ease-out);
+}
+
+h1 {
+	font-family: var(--font-display);
+	font-weight: 400;
+	line-height: 1.1;
+	letter-spacing: -0.015em;
+	color: var(--text);
+}
+
+h2,
+h3 {
+	font-family: var(--font-display);
+	font-weight: 400;
+	line-height: 1.2;
+	color: var(--text);
+}
+
+a {
+	color: inherit;
+	text-decoration: none;
+}
+
+button {
+	font-family: var(--font-body);
+}

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

@@ -0,0 +1,90 @@
+/*
+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/.
+ */
+
+/* ── Design tokens (light) ─────────────────────────────────────────────── */
+
+:root {
+	--bg: #fdfcfb;
+	--bg-subtle: #f7f6f4;
+	--bg-elevated: #ffffff;
+	--border: #e9e5df;
+	--text: #18160f;
+	--text-muted: #9c9185;
+	--accent: #5c1b87;
+	--accent-soft: #f3eaff;
+	--pass: #16a34a;
+	--pass-soft: #dcfce7;
+	--fail: #dc2626;
+	--fail-soft: #fee2e2;
+	--warn: #d97706;
+	--warn-soft: #fef3c7;
+	--node: #0284c7;
+	--node-soft: #e0f2fe;
+	--terminal-bg: #0d0c08;
+	--terminal-text: #d6d0c8;
+
+	--font-display: 'Playfair Display', Georgia, serif;
+	--font-body: 'DM Sans', system-ui, -apple-system, sans-serif;
+
+	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+	--duration-fast: 140ms;
+	--duration-base: 240ms;
+	--duration-slow: 400ms;
+
+	--radius-sm: 6px;
+	--radius-md: 10px;
+	--radius-lg: 16px;
+}
+
+/* ── Design tokens (dark) ──────────────────────────────────────────────── */
+
+[data-theme='dark'] {
+	--bg: #101009;
+	--bg-subtle: #1a1910;
+	--bg-elevated: #201f14;
+	--border: #2e2c1e;
+	--text: #f0ede6;
+	--text-muted: #706a5e;
+	--accent: #d0a5f5;
+	--accent-soft: #1b0d30;
+	--pass: #22c55e;
+	--pass-soft: #0d2118;
+	--fail: #f87171;
+	--fail-soft: #2d1010;
+	--warn: #fbbf24;
+	--warn-soft: #2a1f06;
+	--node: #38bdf8;
+	--node-soft: #082032;
+	--terminal-bg: #080807;
+	--terminal-text: #cbc5bd;
+}

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

@@ -0,0 +1,46 @@
+/*
+ * 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/.
+ */
+
+import { TRIGGER_TYPES } from '$lib/constants';
+
+const NON_SCHEDULED = new Set([TRIGGER_TYPES.MANUAL, TRIGGER_TYPES.CLI, 'undefined']);
+
+export function isScheduled(type) {
+	return !!type && !NON_SCHEDULED.has(type);
+}
+
+export function triggerLabel(type) {
+	if (type === TRIGGER_TYPES.MANUAL) return 'Manual';
+	if (type === TRIGGER_TYPES.CLI || type === 'undefined') return 'CLI';
+	return 'Scheduled';
+}
+
+export function triggerVariant(type) {
+	if (type === TRIGGER_TYPES.MANUAL) return 'tag';
+	if (type === TRIGGER_TYPES.CLI || type === 'undefined') return 'neutral';
+	return 'schedule';
+}
+
+/** Returns an inline style string for staggered fadeUp animations. */
+export function stagger(i, stepMs = 45) {
+	return `animation-delay: ${i * stepMs}ms`;
+}
+
+export function fmtDuration(ms) {
+	if (ms >= 1000) return (ms / 1000).toFixed(2) + 's';
+	return ms + 'ms';
+}