plum-e2e 1.1.1 → 1.2.0

package/docker-compose.yml

@@ -16,14 +16,35 @@
 #
 
 services:
+  postgres:
+    image: postgres:16-alpine
+    environment:
+      POSTGRES_DB: plum
+      POSTGRES_USER: plum
+      POSTGRES_PASSWORD: plum
+    volumes:
+      - postgres_data:/var/lib/postgresql/data
+    networks:
+      - app-network
+    healthcheck:
+      test: ['CMD-SHELL', 'pg_isready -U plum']
+      interval: 5s
+      timeout: 5s
+      retries: 10
+
   backend:
     build: ./backend
     ports:
       - '3001:3001'
+    environment:
+      DATABASE_URL: 'postgresql://plum:plum@postgres:5432/plum'
     volumes:
       - ./backend/reports:/app/reports
       - ./backend/config:/app/config
       - ./backend/tests:/app/tests:rw
+    depends_on:
+      postgres:
+        condition: service_healthy
     networks:
       - app-network
 
@@ -39,3 +60,6 @@ services:
 networks:
   app-network:
     driver: bridge
+
+volumes:
+  postgres_data:

package/frontend/package-lock.json

@@ -1,12 +1,12 @@
 {
 	"name": "plum-frontend",
-	"version": "0.0.1",
+	"version": "1.2.0",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "plum-frontend",
-			"version": "0.0.1",
+			"version": "1.2.0",
 			"dependencies": {
 				"socket.io-client": "^4.8.1"
 			},

package/frontend/package.json

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

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

@@ -15,29 +15,12 @@
  * 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';
 
 export async function fetchReports() {
 	const res = await fetch(`${BASE}/reports`);
 	const { reports } = await res.json();
-	return reports.map(parseReport).filter(Boolean);
+	return reports.map((r) => ({ ...r, date: new Date(r.createdAt).toLocaleString() }));
 }
 
 export async function fetchLatestReport() {
@@ -50,19 +33,47 @@ export function reportUrl(fileName) {
 	return `/reports/${encodeURIComponent(fileName)}`;
 }
 
+// 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 async function fetchReportDetail(fileName) {
 	const res = await fetch(`${BASE}/reports/${encodeURIComponent(fileName)}/detail`);
 	if (!res.ok) throw new Error('Report not found');
 	return res.json();
 }
 
-export function parseReport(fileName) {
-	const match = fileName.match(
-		/(PASS|FAIL)_cucumber_report_(.+?)_\(([^)]+)\)(?:_runners_(\d+))?_(\d{4})_(\d{2})_(\d{2})T(\d{2})_(\d{2})_(\d{2})_\d{3}Z\.json/
-	);
-	if (!match) return null;
-	const [, status, triggerType, tags, runners = '1', year, month, day, hour, minute, second] =
-		match;
-	const date = new Date(`${year}-${month}-${day}T${hour}:${minute}:${second}Z`).toLocaleString();
-	return { fileName, status, triggerType, tags, runners: Number(runners), date };
+export async function deleteReport(fileName) {
+	const res = await fetch(`${BASE}/reports/${encodeURIComponent(fileName)}`, {
+		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`, {
+		method: 'DELETE',
+		headers: { 'Content-Type': 'application/json' },
+		body: JSON.stringify({ fileNames })
+	});
+	if (!res.ok) throw new Error('Failed to delete reports');
+	return res.json();
 }

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

@@ -15,45 +15,29 @@
  * 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';
 
-export async function fetchSchedules() {
-	const res = await fetch(`${BASE}/schedules`);
-	const { schedules } = await res.json();
-	return schedules ?? [];
-}
-
 export async function fetchCronJobs() {
 	const res = await fetch(`${BASE}/cron-jobs`);
 	const { cronJobs } = await res.json();
 	return cronJobs ?? [];
 }
 
-export async function saveCronJob({ taskName, cronExpression, tags, isEditing, editTaskName }) {
+export async function saveCronJob({
+	taskName,
+	cronExpression,
+	tags,
+	workers,
+	isEditing,
+	editTaskName
+}) {
 	const formattedTags = tags.replace(/\sOR\s/gi, (m) => m.toLowerCase());
 	const url = isEditing ? `${BASE}/cron-jobs/${editTaskName}` : `${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 })
+		body: JSON.stringify({ cronExpression, taskName, tags: formattedTags, workers })
 	});
 	return res.json();
 }

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

@@ -0,0 +1,48 @@
+/*
+ * 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';
+
+export async function fetchProject() {
+	const res = await fetch(`${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`, {
+		method: 'POST',
+		headers: { 'Content-Type': 'application/json' },
+		body: JSON.stringify({ name, logoUrl })
+	});
+	return res.json();
+}
+
+export async function exportBackup() {
+	const res = await fetch(`${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`, {
+		method: 'POST',
+		headers: { 'Content-Type': 'application/json' },
+		body: JSON.stringify(data)
+	});
+	return res.json();
+}

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

@@ -25,7 +25,8 @@
 	const links = [
 		{ href: '/', label: 'Run Tests' },
 		{ href: '/reports', label: 'Reports' },
-		{ href: '/scheduled-tests', label: 'Scheduled' }
+		{ href: '/scheduled-tests', label: 'Scheduled' },
+		{ href: '/settings', label: 'Settings' }
 	];
 
 	function toggleTheme() {

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

@@ -19,7 +19,16 @@
 	import { onMount } from 'svelte';
 	import { slide, fly } from 'svelte/transition';
 	import { io } from 'socket.io-client';
-	import { socket, runnerState, runnerConfig, panelExpanded, triggerRun } from '$lib/stores/runner';
+	import {
+		socket,
+		runnerState,
+		runnerConfig,
+		panelExpanded,
+		triggerRun,
+		testsVersion,
+		reportsVersion,
+		activeCronJobs
+	} from '$lib/stores/runner';
 	import { fetchLatestReport, reportUrl } from '$lib/api/reports';
 	import Terminal from '$lib/components/ui/Terminal.svelte';
 	import Button from '$lib/components/ui/Button.svelte';
@@ -47,30 +56,56 @@
 			}));
 		});
 
+		s.on('tests-changed', () => {
+			testsVersion.update((v) => v + 1);
+		});
+
+		s.on('report-ready', () => {
+			reportsVersion.update((v) => v + 1);
+		});
+
+		s.on('cron-start', ({ taskName }) => {
+			activeCronJobs.update((j) => ({ ...j, [taskName]: true }));
+		});
+
+		s.on('cron-done', ({ taskName }) => {
+			activeCronJobs.update((j) => {
+				const next = { ...j };
+				delete next[taskName];
+				return next;
+			});
+			reportsVersion.update((v) => v + 1);
+		});
+
 		return () => s.disconnect();
 	});
 
 	$: state = $runnerState;
 	$: cfg = $runnerConfig;
-	$: workerCount = Math.min(cfg.workers, 4);
-	$: dots = Array.from({ length: workerCount });
+	$: dots = Array.from({ length: cfg.workers });
+	$: cronJobs = Object.keys($activeCronJobs);
+	$: anyCronRunning = cronJobs.length > 0;
+	$: anyRunning = state.running || anyCronRunning;
 
 	$: statusColor =
 		state.status === 'pass'
 			? 'var(--pass)'
 			: state.status === 'fail'
 				? 'var(--fail)'
-				: state.status === 'running'
+				: state.running
 					? 'var(--accent)'
-					: 'var(--border)';
-
-	$: statusLabel =
-		state.status === 'running'
-			? 'running'
-			: state.status === 'pass'
-				? 'passed'
-				: state.status === 'fail'
-					? 'failed'
+					: anyCronRunning
+						? 'var(--pass)'
+						: 'var(--border)';
+
+	$: statusLabel = state.running
+		? 'running'
+		: state.status === 'pass'
+			? 'passed'
+			: state.status === 'fail'
+				? 'failed'
+				: anyCronRunning
+					? 'scheduled'
 					: 'ready';
 
 	function handleKeydown(e) {
@@ -142,7 +177,7 @@
 							class:active={cfg.workers === n}
 							on:click={() => runnerConfig.update((c) => ({ ...c, workers: n }))}
 						>
-							{n === 1 ? 'Off' : n}
+							{n}
 						</button>
 					{/each}
 				</div>
@@ -152,15 +187,38 @@
 				</Button>
 			</div>
 
-			<Terminal output={state.output} />
+			<div class="main-row">
+				<!-- Terminal column -->
+				<div class="terminal-col">
+					<Terminal output={state.output} />
+					{#if state.testCompleted && state.latestReport}
+						<div class="report-row" transition:fly={{ y: 6, duration: 200 }}>
+							<a href={reportUrl(state.latestReport)} target="_blank" rel="noopener noreferrer">
+								<Button variant="outline" size="sm">View Report →</Button>
+							</a>
+						</div>
+					{/if}
+				</div>
 
-			{#if state.testCompleted && state.latestReport}
-				<div class="report-row" transition:fly={{ y: 6, duration: 200 }}>
-					<a href={reportUrl(state.latestReport)} target="_blank" rel="noopener noreferrer">
-						<Button variant="outline" size="sm">View Report →</Button>
-					</a>
+				<!-- Sidebar: scheduled jobs -->
+				<div class="sidebar">
+					<div class="sidebar-section">
+						<span class="sidebar-label">Scheduled</span>
+						{#if cronJobs.length === 0}
+							<span class="sidebar-empty">none running</span>
+						{:else}
+							<ul class="cron-list">
+								{#each cronJobs as name}
+									<li class="cron-item" transition:fly={{ x: -6, duration: 180 }}>
+										<span class="cron-dot"></span>
+										<span class="cron-name">{name}</span>
+									</li>
+								{/each}
+							</ul>
+						{/if}
+					</div>
 				</div>
-			{/if}
+			</div>
 		</div>
 	{/if}
 </div>
@@ -372,7 +430,88 @@
 		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
 	}
 
+	/* ── Main row: terminal + sidebar ── */
+	.main-row {
+		display: flex;
+		gap: 1rem;
+		align-items: flex-start;
+	}
+
+	.terminal-col {
+		flex: 1;
+		min-width: 0;
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+		/* Constrain terminal height via the Terminal component's wrapper */
+		--terminal-max-height: 140px;
+	}
+
 	.report-row {
 		display: flex;
 	}
+
+	/* ── Sidebar ── */
+	.sidebar {
+		width: 260px;
+		flex-shrink: 0;
+		display: flex;
+		flex-direction: column;
+		gap: 1rem;
+		padding-left: 1.25rem;
+		border-left: 1px solid var(--border);
+	}
+
+	.sidebar-section {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+	}
+
+	.sidebar-label {
+		font-size: 0.65rem;
+		font-weight: 600;
+		letter-spacing: 0.09em;
+		text-transform: uppercase;
+		color: var(--text-muted);
+	}
+
+	.sidebar-empty {
+		font-size: 0.75rem;
+		color: var(--text-muted);
+		font-style: italic;
+	}
+
+	.cron-list {
+		list-style: none;
+		padding: 0;
+		margin: 0;
+		display: flex;
+		flex-direction: column;
+		gap: 0.375rem;
+	}
+
+	.cron-item {
+		display: flex;
+		align-items: center;
+		gap: 0.375rem;
+	}
+
+	.cron-dot {
+		width: 7px;
+		height: 7px;
+		border-radius: 50%;
+		background: var(--pass);
+		flex-shrink: 0;
+		animation: statusPulse 1.6s ease-in-out infinite;
+	}
+
+	.cron-name {
+		font-size: 0.75rem;
+		font-family: 'JetBrains Mono', monospace;
+		color: var(--text);
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
 </style>

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

@@ -77,8 +77,8 @@
 		background: var(--terminal-bg);
 		color: var(--terminal-text);
 		padding: 1rem;
-		min-height: 220px;
-		max-height: 280px;
+		min-height: 120px;
+		max-height: 160px;
 		overflow-y: auto;
 		white-space: pre-wrap;
 		word-break: break-word;

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

@@ -35,6 +35,15 @@ export const runnerConfig = writable({
 
 export const panelExpanded = writable(true);
 
+// Increments whenever the backend detects a change in tests/features/
+export const testsVersion = writable(0);
+
+// Increments whenever a new report file is detected
+export const reportsVersion = writable(0);
+
+// Map of taskName → true for every cron job currently executing
+export const activeCronJobs = writable({});
+
 export function triggerRun(id) {
 	const s = get(socket);
 	if (!s) return;

package/frontend/src/routes/+page.svelte

@@ -19,7 +19,7 @@
 	import { onDestroy, onMount } from 'svelte';
 	import { slide } from 'svelte/transition';
 	import { fetchSuites } from '$lib/api/tests';
-	import { runnerConfig, triggerRun } from '$lib/stores/runner';
+	import { runnerConfig, triggerRun, testsVersion } from '$lib/stores/runner';
 
 	let suites = [];
 	let search = '';
@@ -27,13 +27,18 @@
 	let copiedIds = new Set();
 	const copyTimers = new Map();
 
-	onMount(async () => {
+	async function loadSuites() {
 		try {
 			suites = await fetchSuites();
 		} catch (e) {
 			console.error('Failed to fetch suites', e);
 		}
-	});
+	}
+
+	onMount(loadSuites);
+
+	// Re-fetch when the backend notifies us that test files changed
+	$: if ($testsVersion) loadSuites();
 
 	function suiteIds(suite) {
 		return Array.isArray(suite.suiteId) ? suite.suiteId : [suite.suiteId];
@@ -105,6 +110,8 @@
 	$: visibleTests = filtered.reduce((n, s) => n + s.tests.length, 0);
 </script>
 
+<svelte:head><title>Run Tests — Plum</title></svelte:head>
+
 <div class="page-header">
 	<div class="header-top">
 		<div>