plum-e2e 2.4.13 → 2.5.1

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

@@ -16,14 +16,27 @@
  -->
 
 <script>
+	import { onMount } from 'svelte';
+	import { goto } from '$app/navigation';
 	import { auth } from '$lib/stores/auth';
-	import { login } from '$lib/api/auth';
+	import { login, checkNeedsSetup } from '$lib/api/auth';
 	import { theme } from '$lib/stores/theme';
 
 	let email = '';
 	let password = '';
 	let error = '';
 	let loading = false;
+	let checking = true;
+
+	onMount(async () => {
+		try {
+			if (await checkNeedsSetup()) {
+				goto('/setup');
+				return;
+			}
+		} catch {}
+		checking = false;
+	});
 
 	async function handleSubmit() {
 		error = '';
@@ -47,48 +60,50 @@
 <svelte:head><title>Sign in — Plum</title></svelte:head>
 
 <div class="page" data-theme={$theme}>
-	<div class="card">
-		<div class="brand">
-			<span class="brand-serif">Pl</span><span class="brand-sans">um</span>
-		</div>
-		<h1 class="title">Sign in</h1>
-		<p class="subtitle">Access your test workspace</p>
-
-		<div class="fields">
-			<div class="field">
-				<label class="label" for="email">Email</label>
-				<input
-					id="email"
-					type="email"
-					class="input"
-					bind:value={email}
-					placeholder="jane@example.com"
-					autocomplete="email"
-					on:keydown={onKeydown}
-				/>
+	{#if !checking}
+		<div class="card">
+			<div class="brand">
+				<span class="brand-serif">Pl</span><span class="brand-sans">um</span>
 			</div>
-			<div class="field">
-				<label class="label" for="password">Password</label>
-				<input
-					id="password"
-					type="password"
-					class="input"
-					bind:value={password}
-					placeholder="••••••••"
-					autocomplete="current-password"
-					on:keydown={onKeydown}
-				/>
+			<h1 class="title">Sign in</h1>
+			<p class="subtitle">Access your test workspace</p>
+
+			<div class="fields">
+				<div class="field">
+					<label class="label" for="email">Email</label>
+					<input
+						id="email"
+						type="email"
+						class="input"
+						bind:value={email}
+						placeholder="jane@example.com"
+						autocomplete="email"
+						on:keydown={onKeydown}
+					/>
+				</div>
+				<div class="field">
+					<label class="label" for="password">Password</label>
+					<input
+						id="password"
+						type="password"
+						class="input"
+						bind:value={password}
+						placeholder="••••••••"
+						autocomplete="current-password"
+						on:keydown={onKeydown}
+					/>
+				</div>
 			</div>
-		</div>
 
-		{#if error}
-			<p class="error">{error}</p>
-		{/if}
+			{#if error}
+				<p class="error">{error}</p>
+			{/if}
 
-		<button class="submit-btn" on:click={handleSubmit} disabled={loading || !email || !password}>
-			{loading ? 'Signing in…' : 'Sign in'}
-		</button>
-	</div>
+			<button class="submit-btn" on:click={handleSubmit} disabled={loading || !email || !password}>
+				{loading ? 'Signing in…' : 'Sign in'}
+			</button>
+		</div>
+	{/if}
 </div>
 
 <style>
@@ -188,7 +203,7 @@
 	.submit-btn {
 		height: 40px;
 		background: var(--accent);
-		color: #fff;
+		color: var(--white);
 		border: none;
 		border-radius: var(--radius-sm);
 		font-family: var(--font-body);

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

@@ -27,6 +27,10 @@
 	import EmptyState from '$lib/components/ui/EmptyState.svelte';
 
 	let reports = [];
+	let total = 0;
+	let passCount = 0;
+	let failCount = 0;
+	let trend = [];
 	let currentPage = 1;
 	let animateBar = false;
 
@@ -34,21 +38,24 @@
 	let deleteModal = { open: false, targets: [] };
 	let deleting = false;
 
-	$: totalPages = Math.ceil(reports.length / REPORTS_PER_PAGE);
-	$: paginated = reports.slice(
-		(currentPage - 1) * REPORTS_PER_PAGE,
-		currentPage * REPORTS_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.id));
+	$: totalPages = Math.ceil(total / REPORTS_PER_PAGE);
+	$: passRate = total ? Math.round((passCount / total) * 100) : 0;
+	$: trendDots = [...trend].reverse();
+	$: allOnPageSelected = reports.length > 0 && reports.every((r) => selected.has(r.id));
 	$: someSelected = selected.size > 0;
 
 	async function loadReports() {
 		try {
-			reports = await fetchReports();
+			let data = await fetchReports({ page: currentPage, limit: REPORTS_PER_PAGE });
+			if (data.reports.length === 0 && currentPage > 1) {
+				currentPage = Math.max(1, Math.ceil(data.total / REPORTS_PER_PAGE));
+				data = await fetchReports({ page: currentPage, limit: REPORTS_PER_PAGE });
+			}
+			reports = data.reports;
+			total = data.total;
+			passCount = data.passCount;
+			failCount = data.failCount;
+			trend = data.trend;
 			selected = new Set();
 			await tick();
 			animateBar = true;
@@ -57,6 +64,11 @@
 		}
 	}
 
+	function goToPage(page) {
+		currentPage = page;
+		loadReports();
+	}
+
 	onMount(loadReports);
 	$: if ($reportsVersion) loadReports();
 
@@ -73,11 +85,11 @@
 		e.stopPropagation();
 		if (allOnPageSelected) {
 			const next = new Set(selected);
-			paginated.forEach((r) => next.delete(r.id));
+			reports.forEach((r) => next.delete(r.id));
 			selected = next;
 		} else {
 			const next = new Set(selected);
-			paginated.forEach((r) => next.add(r.id));
+			reports.forEach((r) => next.add(r.id));
 			selected = next;
 		}
 	}
@@ -133,11 +145,11 @@
 		<div>
 			<h1>Reports</h1>
 			<p class="subtitle">
-				{reports.length} run{reports.length !== 1 ? 's' : ''} recorded
+				{total} run{total !== 1 ? 's' : ''} recorded
 			</p>
 		</div>
 
-		{#if reports.length > 0}
+		{#if total > 0}
 			<div class="rate-display">
 				<span
 					class="rate-number"
@@ -152,7 +164,7 @@
 		{/if}
 	</div>
 
-	{#if reports.length > 0}
+	{#if total > 0}
 		<div class="stats-bar">
 			<div class="pass-bar-track">
 				<div class="pass-bar-fill" style="width: {animateBar ? passRate + '%' : '0'}"></div>
@@ -166,7 +178,7 @@
 		<div class="trend-row">
 			<span class="trend-label">Recent</span>
 			<div class="trend-dots">
-				{#each trend as r, i}
+				{#each trendDots as r, i}
 					<span
 						class="trend-dot"
 						class:pass={r.status === 'PASS'}
@@ -181,7 +193,7 @@
 	{/if}
 </div>
 
-{#if reports.length === 0}
+{#if total === 0}
 	<EmptyState message="No reports yet. Run a test to generate one." />
 {:else}
 	<div class="list-header">
@@ -202,7 +214,7 @@
 	</div>
 
 	<div class="report-list">
-		{#each paginated as report, i}
+		{#each reports as report, i}
 			<div class="report-row" class:is-selected={selected.has(report.id)} style={stagger(i)}>
 				<label class="row-check-wrap" title="Select">
 					<input
@@ -287,11 +299,7 @@
 
 	{#if totalPages > 1}
 		<div class="pagination-wrap">
-			<Pagination
-				current={currentPage}
-				total={totalPages}
-				on:change={(e) => (currentPage = e.detail)}
-			/>
+			<Pagination current={currentPage} total={totalPages} on:change={(e) => goToPage(e.detail)} />
 		</div>
 	{/if}
 {/if}
@@ -361,7 +369,7 @@
 	.pass-bar-track {
 		height: 3px;
 		background: var(--fail-soft);
-		border-radius: 100px;
+		border-radius: var(--radius-pill);
 		overflow: hidden;
 		margin-bottom: 0.5rem;
 	}
@@ -369,7 +377,7 @@
 	.pass-bar-fill {
 		height: 100%;
 		background: var(--pass);
-		border-radius: 100px;
+		border-radius: var(--radius-pill);
 		transition: width 0.9s var(--ease-out) 0.1s;
 	}
 
@@ -468,7 +476,7 @@
 
 	.btn-delete-selected:hover {
 		background: var(--fail);
-		color: #fff;
+		color: var(--white);
 	}
 
 	/* ── Report rows ── */