plum-e2e 1.2.4 → 1.3.0

package/frontend/src/app.css

@@ -14,257 +14,23 @@ 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/.
 */
-
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-/* ── Design tokens ─────────────────────────────────────────────────────── */
-
-: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;
-	--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;
-}
-
-[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;
-	--terminal-bg: #080807;
-	--terminal-text: #cbc5bd;
-}
-
-/* ── 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);
-	transition:
-		background-color var(--duration-base) var(--ease-out),
-		color var(--duration-base) var(--ease-out);
-	-webkit-font-smoothing: antialiased;
-}
-
-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);
-}
-
-/* ── Global form styles ─────────────────────────────────────────────────── */
-
-.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;
-	transition:
-		border-color var(--duration-fast),
-		box-shadow var(--duration-fast);
-	appearance: none;
-}
-
-.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);
-}
-
-/* ── Global 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);
-	}
-}
+/*
+ * 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 '$lib/styles/tokens.css';
+@import '$lib/styles/reset.css';
+@import '$lib/styles/global.css';

package/frontend/src/app.html

@@ -18,7 +18,7 @@ along with Plum. If not, see https://www.gnu.org/licenses/.
 <html lang="en" data-theme="light">
 	<head>
 		<meta charset="utf-8" />
-		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.ico" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		<link rel="preconnect" href="https://fonts.googleapis.com" />
 		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

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

@@ -15,64 +15,45 @@
  * along with Plum. If not, see https://www.gnu.org/licenses/.
  */
 
-const BASE = 'http://localhost:3001';
+import { API_BASE } from '$lib/constants';
 
 export async function fetchReports() {
-	const res = await fetch(`${BASE}/reports`);
+	const res = await fetch(`${API_BASE}/reports`);
 	const { reports } = await res.json();
 	return reports.map((r) => ({ ...r, date: new Date(r.createdAt).toLocaleString() }));
 }
 
-export async function fetchLatestReport() {
-	const res = await fetch(`${BASE}/reports/latest`);
-	const { latestReport } = await res.json();
-	return latestReport;
+export async function fetchLatestReportId() {
+	const res = await fetch(`${API_BASE}/reports/latest`);
+	const { latestReportId } = await res.json();
+	return latestReportId;
 }
 
-export function reportUrl(fileName) {
-	return `/reports/${encodeURIComponent(fileName)}`;
+export function reportUrl(id) {
+	return `/reports/${id}`;
 }
 
-// Parses metadata out of a report filename.
-// Format: {STATUS}_cucumber_report_{trigger}_{tags}_runners_{n}_{timestamp}.json
-export function parseReport(fileName) {
-	const m = fileName.match(
-		/^(PASS|FAIL)_cucumber_report_(.+?)_(\([^)]+\))_runners_(\d+)_(\d{4}_\d{2}_\d{2}T[\d_]+Z)\.json$/
-	);
-	if (!m) return null;
-	const [, status, triggerType, tags, runners, tsRaw] = m;
-	const isoStr = tsRaw.replace(
-		/^(\d{4})_(\d{2})_(\d{2})T(\d{2})_(\d{2})_(\d{2})_(\d+)Z$/,
-		'$1-$2-$3T$4:$5:$6.$7Z'
-	);
-	return {
-		status,
-		triggerType,
-		tags,
-		runners: parseInt(runners, 10),
-		date: new Date(isoStr).toLocaleString()
-	};
+export function screenshotUrl(filename) {
+	return `${API_BASE}/screenshots/${filename}`;
 }
 
-export async function fetchReportDetail(fileName) {
-	const res = await fetch(`${BASE}/reports/${encodeURIComponent(fileName)}/detail`);
+export async function fetchReportDetail(id) {
+	const res = await fetch(`${API_BASE}/reports/${id}`);
 	if (!res.ok) throw new Error('Report not found');
 	return res.json();
 }
 
-export async function deleteReport(fileName) {
-	const res = await fetch(`${BASE}/reports/${encodeURIComponent(fileName)}`, {
-		method: 'DELETE'
-	});
+export async function deleteReport(id) {
+	const res = await fetch(`${API_BASE}/reports/${id}`, { method: 'DELETE' });
 	if (!res.ok) throw new Error('Failed to delete report');
 	return res.json();
 }
 
-export async function deleteReports(fileNames) {
-	const res = await fetch(`${BASE}/reports/bulk`, {
+export async function deleteReports(ids) {
+	const res = await fetch(`${API_BASE}/reports/bulk`, {
 		method: 'DELETE',
 		headers: { 'Content-Type': 'application/json' },
-		body: JSON.stringify({ fileNames })
+		body: JSON.stringify({ ids })
 	});
 	if (!res.ok) throw new Error('Failed to delete reports');
 	return res.json();

package/frontend/src/lib/api/runners.js

@@ -0,0 +1,61 @@
+/*
+ * 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 { API_BASE } from '$lib/constants';
+
+export async function fetchRunners() {
+	const res = await fetch(`${API_BASE}/runners`);
+	const { runners } = await res.json();
+	return runners;
+}
+
+export async function createRunner(data) {
+	const res = await fetch(`${API_BASE}/runners`, {
+		method: 'POST',
+		headers: { 'Content-Type': 'application/json' },
+		body: JSON.stringify(data)
+	});
+	return res.json();
+}
+
+export async function deleteRunner(id) {
+	const res = await fetch(`${API_BASE}/runners/${id}`, { method: 'DELETE' });
+	return res.json();
+}
+
+export async function updateRunner(id, data) {
+	const res = await fetch(`${API_BASE}/runners/${id}`, {
+		method: 'PUT',
+		headers: { 'Content-Type': 'application/json' },
+		body: JSON.stringify(data)
+	});
+	return res.json();
+}
+
+export async function pingRunner(id) {
+	const res = await fetch(`${API_BASE}/runners/${id}/ping`, { method: 'POST' });
+	return res.json();
+}
+
+export async function probeRunner(url, token) {
+	const res = await fetch(`${API_BASE}/runners/probe`, {
+		method: 'POST',
+		headers: { 'Content-Type': 'application/json' },
+		body: JSON.stringify({ url, token })
+	});
+	return res.json();
+}

package/frontend/src/lib/api/schedules.js

@@ -15,10 +15,10 @@
  * along with Plum. If not, see https://www.gnu.org/licenses/.
  */
 
-const BASE = 'http://localhost:3001';
+import { API_BASE } from '$lib/constants';
 
 export async function fetchCronJobs() {
-	const res = await fetch(`${BASE}/cron-jobs`);
+	const res = await fetch(`${API_BASE}/cron-jobs`);
 	const { cronJobs } = await res.json();
 	return cronJobs ?? [];
 }
@@ -28,21 +28,50 @@ export async function saveCronJob({
 	cronExpression,
 	tags,
 	workers,
+	browser,
+	runnerIds,
 	isEditing,
 	editTaskName
 }) {
 	const formattedTags = tags.replace(/\sOR\s/gi, (m) => m.toLowerCase());
-	const url = isEditing ? `${BASE}/cron-jobs/${editTaskName}` : `${BASE}/cron-jobs`;
+	const url = isEditing
+		? `${API_BASE}/cron-jobs/${encodeURIComponent(editTaskName)}`
+		: `${API_BASE}/cron-jobs`;
 	const method = isEditing ? 'PUT' : 'POST';
 	const res = await fetch(url, {
 		method,
 		headers: { 'Content-Type': 'application/json' },
-		body: JSON.stringify({ cronExpression, taskName, tags: formattedTags, workers })
+		body: JSON.stringify({
+			cronExpression,
+			taskName,
+			tags: formattedTags,
+			workers,
+			browser,
+			runnerIds
+		})
+	});
+	return res.json();
+}
+
+export async function toggleCronJob(taskName, enabled) {
+	const res = await fetch(`${API_BASE}/cron-jobs/${encodeURIComponent(taskName)}/toggle`, {
+		method: 'PATCH',
+		headers: { 'Content-Type': 'application/json' },
+		body: JSON.stringify({ enabled })
+	});
+	return res.json();
+}
+
+export async function runCronJobNow(taskName) {
+	const res = await fetch(`${API_BASE}/cron-jobs/${encodeURIComponent(taskName)}/run`, {
+		method: 'POST'
 	});
 	return res.json();
 }
 
 export async function deleteCronJob(taskName) {
-	const res = await fetch(`${BASE}/cron-jobs/${taskName}`, { method: 'DELETE' });
+	const res = await fetch(`${API_BASE}/cron-jobs/${encodeURIComponent(taskName)}`, {
+		method: 'DELETE'
+	});
 	return res.json();
 }

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

@@ -15,16 +15,16 @@
  * along with Plum. If not, see https://www.gnu.org/licenses/.
  */
 
-const BASE = 'http://localhost:3001';
+import { API_BASE } from '$lib/constants';
 
 export async function fetchProject() {
-	const res = await fetch(`${BASE}/settings/project`);
+	const res = await fetch(`${API_BASE}/settings/project`);
 	if (!res.ok) return { name: '', logoUrl: '' };
 	return res.json();
 }
 
 export async function saveProject({ name, logoUrl }) {
-	const res = await fetch(`${BASE}/settings/project`, {
+	const res = await fetch(`${API_BASE}/settings/project`, {
 		method: 'POST',
 		headers: { 'Content-Type': 'application/json' },
 		body: JSON.stringify({ name, logoUrl })
@@ -33,13 +33,13 @@ export async function saveProject({ name, logoUrl }) {
 }
 
 export async function exportBackup() {
-	const res = await fetch(`${BASE}/backup/export`);
+	const res = await fetch(`${API_BASE}/backup/export`);
 	if (!res.ok) throw new Error('Export failed');
 	return res.json();
 }
 
 export async function importBackup(data) {
-	const res = await fetch(`${BASE}/backup/import`, {
+	const res = await fetch(`${API_BASE}/backup/import`, {
 		method: 'POST',
 		headers: { 'Content-Type': 'application/json' },
 		body: JSON.stringify(data)

package/frontend/src/lib/api/tests.js

@@ -15,27 +15,10 @@
  * 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/.
-*/
-
-const BASE = 'http://localhost:3001';
+import { API_BASE } from '$lib/constants';
 
 export async function fetchSuites() {
-	const res = await fetch(`${BASE}/tests`);
+	const res = await fetch(`${API_BASE}/tests`);
 	const { suites } = await res.json();
 	return suites.suites ?? [];
 }

package/frontend/src/lib/components/icons/BrowserIcon.svelte

@@ -0,0 +1,75 @@
+<!--
+ * 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 browser = 'chromium';
+	export let size = 11;
+</script>
+
+{#if browser === 'firefox'}
+	<svg
+		width={size}
+		height={size}
+		viewBox="0 0 24 24"
+		fill="none"
+		stroke="currentColor"
+		stroke-width="2"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	>
+		<path d="M12 2c0 4.5-5 7-5 12a5 5 0 0 0 10 0c0-5-5-7.5-5-12z" />
+		<path d="M12 9c0 2.5-2.5 4-2.5 7a2.5 2.5 0 0 0 5 0c0-3-2.5-4.5-2.5-7z" />
+	</svg>
+{:else if browser === 'webkit'}
+	<svg
+		width={size}
+		height={size}
+		viewBox="0 0 24 24"
+		fill="none"
+		stroke="currentColor"
+		stroke-width="2"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	>
+		<circle cx="12" cy="12" r="10" />
+		<polygon points="12,5.5 14.5,12 12,10.5 9.5,12" fill="currentColor" stroke="none" />
+		<polygon
+			points="12,18.5 9.5,12 12,13.5 14.5,12"
+			fill="currentColor"
+			stroke="none"
+			opacity="0.35"
+		/>
+	</svg>
+{:else}
+	<!-- chromium -->
+	<svg
+		width={size}
+		height={size}
+		viewBox="0 0 24 24"
+		fill="none"
+		stroke="currentColor"
+		stroke-width="2"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	>
+		<circle cx="12" cy="12" r="10" />
+		<circle cx="12" cy="12" r="4" />
+		<line x1="21.17" y1="8" x2="12" y2="8" />
+		<line x1="3.95" y1="6.06" x2="8.54" y2="14" />
+		<line x1="10.88" y1="21.94" x2="15.46" y2="14" />
+	</svg>
+{/if}