plum-e2e 1.1.1 → 1.2.1

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>

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

@@ -17,21 +17,29 @@
 
 <script>
 	import { onMount, tick } from 'svelte';
-	import { fetchReports } from '$lib/api/reports';
+	import { fetchReports, deleteReport, deleteReports } from '$lib/api/reports';
+	import { reportsVersion } from '$lib/stores/runner';
 	import Badge from '$lib/components/ui/Badge.svelte';
 	import Pagination from '$lib/components/ui/Pagination.svelte';
+	import Modal from '$lib/components/ui/Modal.svelte';
 
 	let reports = [];
 	let currentPage = 1;
 	const PER_PAGE = 15;
 	let animateBar = false;
 
+	let selected = new Set();
+	let deleteModal = { open: false, targets: [] };
+	let deleting = false;
+
 	$: totalPages = Math.ceil(reports.length / PER_PAGE);
 	$: paginated = reports.slice((currentPage - 1) * PER_PAGE, currentPage * PER_PAGE);
 	$: passCount = reports.filter((r) => r.status === 'PASS').length;
 	$: failCount = reports.length - passCount;
 	$: passRate = reports.length ? Math.round((passCount / reports.length) * 100) : 0;
 	$: trend = reports.slice(0, 12).reverse();
+	$: allOnPageSelected = paginated.length > 0 && paginated.every((r) => selected.has(r.fileName));
+	$: someSelected = selected.size > 0;
 
 	function triggerLabel(type) {
 		if (type === 'manual-trigger') return 'Manual';
@@ -45,17 +53,95 @@
 		return 'schedule';
 	}
 
-	onMount(async () => {
+	async function loadReports() {
 		try {
 			reports = await fetchReports();
+			selected = new Set();
 			await tick();
 			animateBar = true;
 		} catch (e) {
 			console.error('Failed to fetch reports', e);
 		}
-	});
+	}
+
+	onMount(loadReports);
+	$: if ($reportsVersion) loadReports();
+
+	function toggleSelect(fileName, e) {
+		e.preventDefault();
+		e.stopPropagation();
+		const next = new Set(selected);
+		if (next.has(fileName)) next.delete(fileName);
+		else next.add(fileName);
+		selected = next;
+	}
+
+	function toggleAll(e) {
+		e.stopPropagation();
+		if (allOnPageSelected) {
+			const next = new Set(selected);
+			paginated.forEach((r) => next.delete(r.fileName));
+			selected = next;
+		} else {
+			const next = new Set(selected);
+			paginated.forEach((r) => next.add(r.fileName));
+			selected = next;
+		}
+	}
+
+	function openDeleteModal(targets) {
+		deleteModal = { open: true, targets };
+	}
+
+	function openSingleDelete(fileName, e) {
+		e.preventDefault();
+		e.stopPropagation();
+		openDeleteModal([fileName]);
+	}
+
+	async function confirmDelete() {
+		deleting = true;
+		try {
+			if (deleteModal.targets.length === 1) {
+				await deleteReport(deleteModal.targets[0]);
+			} else {
+				await deleteReports(deleteModal.targets);
+			}
+			deleteModal = { open: false, targets: [] };
+			await loadReports();
+		} catch (e) {
+			console.error('Delete failed', e);
+		} finally {
+			deleting = false;
+		}
+	}
 </script>
 
+<svelte:head><title>Reports — Plum</title></svelte:head>
+
+<Modal
+	bind:open={deleteModal.open}
+	title={deleteModal.targets.length === 1
+		? 'Delete report?'
+		: `Delete ${deleteModal.targets.length} reports?`}
+>
+	<p class="modal-body">
+		{#if deleteModal.targets.length === 1}
+			This will permanently remove the report and its data file.
+		{:else}
+			This will permanently remove {deleteModal.targets.length} reports and their data files.
+		{/if}
+	</p>
+	<div class="modal-actions">
+		<button class="btn-cancel" on:click={() => (deleteModal.open = false)} disabled={deleting}>
+			Cancel
+		</button>
+		<button class="btn-danger" on:click={confirmDelete} disabled={deleting}>
+			{deleting ? 'Deleting…' : 'Delete'}
+		</button>
+	</div>
+</Modal>
+
 <div class="page-header">
 	<div class="header-top">
 		<div>
@@ -65,19 +151,27 @@
 			</p>
 		</div>
 
-		{#if reports.length > 0}
-			<div class="rate-display">
-				<span
-					class="rate-number"
-					class:pass={passRate >= 80}
-					class:warn={passRate < 80 && passRate >= 50}
-					class:fail={passRate < 50}
-				>
-					{passRate}%
-				</span>
-				<span class="rate-label">passing</span>
-			</div>
-		{/if}
+		<div class="header-actions">
+			{#if someSelected}
+				<button class="btn-delete-selected" on:click={() => openDeleteModal([...selected])}>
+					Delete ({selected.size})
+				</button>
+			{/if}
+
+			{#if reports.length > 0}
+				<div class="rate-display">
+					<span
+						class="rate-number"
+						class:pass={passRate >= 80}
+						class:warn={passRate < 80 && passRate >= 50}
+						class:fail={passRate < 50}
+					>
+						{passRate}%
+					</span>
+					<span class="rate-label">passing</span>
+				</div>
+			{/if}
+		</div>
 	</div>
 
 	{#if reports.length > 0}
@@ -112,39 +206,84 @@
 {#if reports.length === 0}
 	<p class="empty">No reports yet. Run a test to generate one.</p>
 {:else}
+	<div class="list-header">
+		<label class="select-all-wrap" title="Select all on this page">
+			<input
+				type="checkbox"
+				class="checkbox"
+				checked={allOnPageSelected}
+				indeterminate={someSelected && !allOnPageSelected}
+				on:change={toggleAll}
+			/>
+		</label>
+	</div>
+
 	<div class="report-list">
 		{#each paginated as report, i}
-			<a
-				class="report-item"
-				class:is-pass={report.status === 'PASS'}
-				class:is-fail={report.status !== 'PASS'}
-				href="/reports/{encodeURIComponent(report.fileName)}"
+			<div
+				class="report-row"
+				class:is-selected={selected.has(report.fileName)}
 				style="animation-delay: {i * 45}ms"
 			>
-				<div class="item-left">
-					<span
-						class="status-mark"
-						class:pass={report.status === 'PASS'}
-						class:fail={report.status !== 'PASS'}
-					>
-						{report.status === 'PASS' ? '✓' : '✗'}
-					</span>
-					<div class="item-meta">
-						<span class="item-tags">{report.tags}</span>
-						<div class="item-badges">
-							<Badge variant={triggerVariant(report.triggerType)}>
-								{triggerLabel(report.triggerType)}
-							</Badge>
-							<Badge variant="neutral">
-								{report.runners} runner{report.runners !== 1 ? 's' : ''}
-							</Badge>
+				<label class="row-check-wrap" title="Select">
+					<input
+						type="checkbox"
+						class="checkbox"
+						checked={selected.has(report.fileName)}
+						on:change={(e) => toggleSelect(report.fileName, e)}
+					/>
+				</label>
+
+				<a
+					class="report-item"
+					class:is-pass={report.status === 'PASS'}
+					class:is-fail={report.status !== 'PASS'}
+					href="/reports/{encodeURIComponent(report.fileName)}"
+				>
+					<div class="item-left">
+						<span
+							class="status-mark"
+							class:pass={report.status === 'PASS'}
+							class:fail={report.status !== 'PASS'}
+						>
+							{report.status === 'PASS' ? '✓' : '✗'}
+						</span>
+						<div class="item-meta">
+							<span class="item-tags">{report.tags}</span>
+							<div class="item-badges">
+								<Badge variant={triggerVariant(report.triggerType)}>
+									{triggerLabel(report.triggerType)}
+								</Badge>
+								<Badge variant="neutral">
+									{report.runners} runner{report.runners !== 1 ? 's' : ''}
+								</Badge>
+							</div>
 						</div>
 					</div>
-				</div>
-				<div class="item-right">
-					<span class="item-date">{report.date}</span>
+					<div class="item-right">
+						<span class="item-date">{report.date}</span>
+						<svg
+							class="item-arrow"
+							width="14"
+							height="14"
+							viewBox="0 0 24 24"
+							fill="none"
+							stroke="currentColor"
+							stroke-width="2"
+							stroke-linecap="round"
+						>
+							<line x1="5" y1="12" x2="19" y2="12" />
+							<polyline points="12 5 19 12 12 19" />
+						</svg>
+					</div>
+				</a>
+
+				<button
+					class="row-delete-btn"
+					title="Delete report"
+					on:click={(e) => openSingleDelete(report.fileName, e)}
+				>
 					<svg
-						class="item-arrow"
 						width="14"
 						height="14"
 						viewBox="0 0 24 24"
@@ -152,12 +291,15 @@
 						stroke="currentColor"
 						stroke-width="2"
 						stroke-linecap="round"
+						stroke-linejoin="round"
 					>
-						<line x1="5" y1="12" x2="19" y2="12" />
-						<polyline points="12 5 19 12 12 19" />
+						<polyline points="3 6 5 6 21 6" />
+						<path d="M19 6l-1 14H6L5 6" />
+						<path d="M10 11v6M14 11v6" />
+						<path d="M9 6V4h6v2" />
 					</svg>
-				</div>
-			</a>
+				</button>
+			</div>
 		{/each}
 	</div>
 
@@ -197,6 +339,33 @@
 		font-size: 0.875rem;
 	}
 
+	.header-actions {
+		display: flex;
+		align-items: center;
+		gap: 1rem;
+	}
+
+	.btn-delete-selected {
+		height: 32px;
+		padding: 0 0.875rem;
+		font-size: 0.8125rem;
+		font-family: inherit;
+		font-weight: 500;
+		color: var(--fail);
+		background: var(--fail-soft, rgba(239, 68, 68, 0.08));
+		border: 1px solid var(--fail);
+		border-radius: var(--radius-sm);
+		cursor: pointer;
+		transition:
+			background var(--duration-fast),
+			opacity var(--duration-fast);
+	}
+
+	.btn-delete-selected:hover {
+		background: var(--fail);
+		color: #fff;
+	}
+
 	/* ── Pass rate ── */
 	.rate-display {
 		display: flex;
@@ -253,13 +422,11 @@
 		display: flex;
 		gap: 1rem;
 	}
-
 	.legend-pass {
 		font-size: 0.75rem;
 		color: var(--pass);
 		font-weight: 500;
 	}
-
 	.legend-fail {
 		font-size: 0.75rem;
 		color: var(--fail);
@@ -299,7 +466,6 @@
 	.trend-dot:hover {
 		transform: scale(1.4);
 	}
-
 	.trend-dot.pass {
 		background: var(--pass);
 	}
@@ -313,14 +479,51 @@
 		opacity: 0.6;
 	}
 
-	/* ── Report list ── */
+	/* ── Select all row ── */
+	.list-header {
+		display: flex;
+		align-items: center;
+		padding: 0 0.5rem 0.375rem;
+	}
+
+	.select-all-wrap {
+		display: flex;
+		align-items: center;
+		cursor: pointer;
+		padding: 0.25rem;
+	}
+
+	/* ── Report rows ── */
 	.report-list {
 		display: flex;
 		flex-direction: column;
 		gap: 0.5rem;
 	}
 
+	.report-row {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		animation: fadeUp 0.32s var(--ease-out) both;
+	}
+
+	.row-check-wrap {
+		flex-shrink: 0;
+		display: flex;
+		align-items: center;
+		cursor: pointer;
+		padding: 0.25rem;
+	}
+
+	.checkbox {
+		width: 15px;
+		height: 15px;
+		accent-color: var(--accent, #7c3aed);
+		cursor: pointer;
+	}
+
 	.report-item {
+		flex: 1;
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
@@ -336,7 +539,7 @@
 			background var(--duration-fast),
 			transform var(--duration-fast) var(--ease-out),
 			box-shadow var(--duration-fast);
-		animation: fadeUp 0.32s var(--ease-out) both;
+		min-width: 0;
 	}
 
 	.report-item:hover {
@@ -352,6 +555,11 @@
 		border-left-color: var(--fail);
 	}
 
+	.report-row.is-selected .report-item {
+		background: var(--bg-subtle);
+		border-color: var(--accent, #7c3aed);
+	}
+
 	.item-left {
 		display: flex;
 		align-items: center;
@@ -417,6 +625,89 @@
 		color: var(--text);
 	}
 
+	/* ── Per-row delete button ── */
+	.row-delete-btn {
+		flex-shrink: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 30px;
+		height: 30px;
+		border: none;
+		border-radius: var(--radius-sm);
+		background: transparent;
+		color: var(--text-muted);
+		cursor: pointer;
+		opacity: 0;
+		transition:
+			opacity var(--duration-fast),
+			color var(--duration-fast),
+			background var(--duration-fast);
+	}
+
+	.report-row:hover .row-delete-btn {
+		opacity: 1;
+	}
+
+	.row-delete-btn:hover {
+		color: var(--fail);
+		background: var(--fail-soft, rgba(239, 68, 68, 0.08));
+	}
+
+	/* ── Modal ── */
+	.modal-actions {
+		display: flex;
+		justify-content: flex-end;
+		gap: 0.5rem;
+	}
+
+	.modal-body {
+		font-size: 0.9rem;
+		color: var(--text-muted);
+		line-height: 1.6;
+		margin: 0;
+	}
+
+	.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);
+	}
+
+	.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;
+	}
+
+	/* ── Misc ── */
 	.pagination-wrap {
 		margin-top: 1.25rem;
 	}

package/frontend/src/routes/reports/[slug]/+page.svelte

@@ -123,6 +123,8 @@
 		})) ?? [];
 </script>
 
+<svelte:head><title>Report — Plum</title></svelte:head>
+
 <div class="back-row">
 	<a href="/reports" class="back-link">
 		<svg