plum-e2e 1.3.7 → 2.1.0

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

@@ -0,0 +1,52 @@
+/*
+ * 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';
+import { auth } from '$lib/stores/auth';
+
+function authHeaders() {
+	return { 'Content-Type': 'application/json', Authorization: `Bearer ${auth.getToken()}` };
+}
+
+export async function fetchUsers() {
+	const res = await fetch(`${API_BASE}/users`, { headers: authHeaders() });
+	if (!res.ok) throw new Error('Failed to fetch users');
+	const data = await res.json();
+	return data.users;
+}
+
+export async function createUser({ name, email, password, role = 'user' }) {
+	const res = await fetch(`${API_BASE}/users`, {
+		method: 'POST',
+		headers: authHeaders(),
+		body: JSON.stringify({ name, email, password, role })
+	});
+	const data = await res.json();
+	if (!res.ok) throw new Error(data.error ?? 'Failed to create user');
+	return data.user;
+}
+
+export async function deleteUser(id) {
+	const res = await fetch(`${API_BASE}/users/${id}`, {
+		method: 'DELETE',
+		headers: authHeaders()
+	});
+	if (!res.ok) {
+		const data = await res.json();
+		throw new Error(data.error ?? 'Failed to delete user');
+	}
+}

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

@@ -18,13 +18,25 @@
 <script>
 	import { page } from '$app/stores';
 	import { slide } from 'svelte/transition';
+	import { onMount } from 'svelte';
+	import { auth } from '$lib/stores/auth';
+	import { goto } from '$app/navigation';
+	import { fetchProject } from '$lib/api/settings';
 
 	let menuOpen = false;
+	let project = { name: '', logoUrl: '' };
+
+	onMount(async () => {
+		try {
+			project = await fetchProject();
+		} catch {}
+	});
 
 	const links = [
-		{ href: '/', label: 'Run Tests' },
+		{ href: '/', label: 'Automated Tests' },
 		{ href: '/reports', label: 'Reports' },
-		{ href: '/scheduled-tests', label: 'Scheduled' }
+		{ href: '/scheduled-tests', label: 'Scheduled' },
+		{ href: '/test-repository', label: 'Test Repository', sep: true }
 	];
 
 	function closeMenu() {
@@ -40,13 +52,34 @@
 
 		<div class="links">
 			{#each links as link}
-				<a href={link.href} class="link" class:active={$page.url.pathname === link.href}>
+				{#if link.sep}
+					<span class="nav-sep" aria-hidden="true"></span>
+				{/if}
+				<a
+					href={link.href}
+					class="link"
+					class:repo={link.sep}
+					class:active={link.href === '/'
+						? $page.url.pathname === '/'
+						: $page.url.pathname.startsWith(link.href)}
+				>
 					{link.label}
 				</a>
 			{/each}
 		</div>
 
 		<div class="actions">
+			{#if project.name}
+				<div class="project-card">
+					{#if project.logoUrl}
+						<img src={project.logoUrl} alt="" class="project-logo" />
+					{/if}
+					<span class="project-name">{project.name}</span>
+				</div>
+			{/if}
+			{#if $auth.user}
+				<span class="nav-user">{$auth.user.name}</span>
+			{/if}
 			<a
 				href="/settings"
 				class="settings-btn"
@@ -87,10 +120,15 @@
 	{#if menuOpen}
 		<div class="mobile-menu" transition:slide={{ duration: 200 }}>
 			{#each links as link}
+				{#if link.sep}
+					<hr class="mobile-sep" />
+				{/if}
 				<a
 					href={link.href}
 					class="mobile-link"
-					class:active={$page.url.pathname === link.href}
+					class:active={link.href === '/'
+						? $page.url.pathname === '/'
+						: $page.url.pathname.startsWith(link.href)}
 					on:click={closeMenu}
 				>
 					{link.label}
@@ -150,6 +188,36 @@
 		color: var(--text);
 	}
 
+	/* Project card */
+	.project-card {
+		display: flex;
+		align-items: center;
+		gap: 0.4rem;
+		padding: 0.25rem 0.6rem 0.25rem 0.5rem;
+		border: 1px solid var(--border);
+		border-radius: var(--radius-sm);
+		background: var(--bg-elevated);
+		flex-shrink: 0;
+	}
+
+	.project-logo {
+		width: 16px;
+		height: 16px;
+		object-fit: contain;
+		border-radius: 2px;
+		flex-shrink: 0;
+	}
+
+	.project-name {
+		font-size: 0.78rem;
+		font-weight: 500;
+		color: var(--text);
+		max-width: 140px;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
 	/* Desktop links */
 	.links {
 		display: flex;
@@ -179,6 +247,29 @@
 		background: var(--accent-soft);
 	}
 
+	.nav-sep {
+		display: block;
+		width: 1px;
+		height: 18px;
+		background: var(--border);
+		margin: 0 0.375rem;
+		flex-shrink: 0;
+		align-self: center;
+	}
+
+	.link.repo {
+		border: 1px solid var(--border);
+		padding: 0.3rem 0.75rem;
+	}
+
+	.link.repo:hover {
+		border-color: var(--text-muted);
+	}
+
+	.link.repo.active {
+		border-color: var(--accent);
+	}
+
 	/* Actions */
 	.actions {
 		display: flex;
@@ -187,6 +278,21 @@
 		margin-left: auto;
 	}
 
+	.nav-user {
+		font-size: 0.8125rem;
+		color: var(--text-muted);
+		max-width: 120px;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	@media (max-width: 640px) {
+		.nav-user {
+			display: none;
+		}
+	}
+
 	/* Settings gear icon */
 	.settings-btn {
 		display: flex;
@@ -288,6 +394,12 @@
 		background: var(--accent-soft);
 	}
 
+	.mobile-sep {
+		border: none;
+		border-top: 1px solid var(--border);
+		margin: 0.375rem 0.75rem;
+	}
+
 	@media (max-width: 640px) {
 		.links {
 			display: none;

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

@@ -18,7 +18,6 @@
 <script>
 	import { onMount, onDestroy } from 'svelte';
 	import { fly, slide } from 'svelte/transition';
-	import { goto } from '$app/navigation';
 	import { io } from 'socket.io-client';
 	import {
 		socket,
@@ -29,16 +28,22 @@
 		triggerRun,
 		testsVersion,
 		reportsVersion,
+		runsVersion,
 		activeCronJobs
 	} from '$lib/stores/runner';
 	import { fetchLatestReportId, reportUrl } from '$lib/api/reports';
 	import { fetchRunners } from '$lib/api/runners';
+	import { fetchRuns, fetchRun } from '$lib/api/repository';
 	import { API_BASE, BROWSERS } from '$lib/constants';
 	import ConfirmModal from '$lib/components/ui/ConfirmModal.svelte';
 
 	let availableRunners = [];
+	let testRuns = [];
+	let selectedRun = null; // { id, title, tags: string[] | null }
+	let selectedRunLoading = false;
 	let browserOpen = false;
 	let runnersOpen = false;
+	let runPickOpen = false;
 	let runAllModalOpen = false;
 
 	function clickOutside(node) {
@@ -105,7 +110,7 @@
 			});
 		});
 
-		const s = io(API_BASE);
+		const s = io(API_BASE, { transports: ['websocket'] });
 		_socket = s;
 		socket.set(s);
 
@@ -189,6 +194,11 @@
 	$: anyCronRunning = cronJobs.length > 0;
 	$: anyRunning = state.running || anyCronRunning;
 
+	$: if ($runsVersion >= 0)
+		fetchRuns({ limit: 200 })
+			.then((r) => (testRuns = r.runs))
+			.catch(() => {});
+
 	$: statusColor =
 		state.status === 'pass'
 			? 'var(--pass)'
@@ -219,8 +229,33 @@
 				? (availableRunners.find((r) => r.id === cfg.selectedRunners[0])?.name ?? '1 node')
 				: `${cfg.selectedRunners.length} nodes`;
 
+	async function selectRun(run) {
+		runPickOpen = false;
+		selectedRun = { id: run.id, title: run.title, tags: null };
+		selectedRunLoading = true;
+		try {
+			const full = await fetchRun(run.id);
+			const tags = full.entries
+				.filter((e) => e.case?.isAutomated)
+				.map((e) => `@${e.case.displayId}`);
+			selectedRun = { id: run.id, title: run.title, tags };
+		} catch {
+			selectedRun = null;
+		} finally {
+			selectedRunLoading = false;
+		}
+	}
+
+	function clearSelectedRun() {
+		selectedRun = null;
+	}
+
 	function handleRunClick() {
-		if ($runnerConfig.testID.trim() === '') {
+		if (selectedRun) {
+			if (selectedRunLoading || !selectedRun.tags) return;
+			if (selectedRun.tags.length === 0) return;
+			triggerRun(selectedRun.tags.join(' or '), selectedRun.id);
+		} else if ($runnerConfig.testID.trim() === '') {
 			runAllModalOpen = true;
 		} else {
 			triggerRun();
@@ -228,7 +263,7 @@
 	}
 
 	function handleKeydown(e) {
-		if (e.key === 'Enter' && !state.running) handleRunClick();
+		if (e.key === 'Enter' && !state.running && !selectedRun) handleRunClick();
 	}
 
 	function adjustWorkers(delta) {
@@ -312,30 +347,115 @@
 
 		<!-- Middle: tag filter + browser + workers + runner dropdowns -->
 		<div class="bar-center">
-			<!-- Tag input -->
-			<div class="input-wrap">
-				<svg
-					class="input-icon"
-					width="12"
-					height="12"
-					viewBox="0 0 24 24"
-					fill="none"
-					stroke="currentColor"
-					stroke-width="2"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-				>
-					<circle cx="11" cy="11" r="8" /><line x1="21" y1="21" x2="16.65" y2="16.65" />
-				</svg>
-				<input
-					type="text"
-					class="tag-input"
-					value={$runnerConfig.testID}
-					placeholder="@tag or leave blank for all tests"
-					on:input={(e) => runnerConfig.update((c) => ({ ...c, testID: e.currentTarget.value }))}
-					on:keydown={handleKeydown}
-					disabled={state.running}
-				/>
+			<!-- Test Run picker OR tag input -->
+			{#if selectedRun}
+				<div class="run-chip" class:loading={selectedRunLoading}>
+					<svg
+						width="9"
+						height="10"
+						viewBox="0 0 10 12"
+						fill="currentColor"
+						stroke="none"
+						style="opacity:0.6;flex-shrink:0"><polygon points="0,0 10,6 0,12" /></svg
+					>
+					<span class="run-chip-title">{selectedRun.title}</span>
+					{#if selectedRunLoading}
+						<span class="run-chip-spinner"></span>
+					{:else if selectedRun.tags !== null}
+						<span class="run-chip-count" class:none={selectedRun.tags.length === 0}>
+							{selectedRun.tags.length} automated
+						</span>
+					{/if}
+					<button class="run-chip-clear" on:click={clearSelectedRun} aria-label="Clear test run">
+						<svg width="9" height="9" viewBox="0 0 14 14" fill="none"
+							><path
+								d="M1 1l12 12M13 1L1 13"
+								stroke="currentColor"
+								stroke-width="1.5"
+								stroke-linecap="round"
+							/></svg
+						>
+					</button>
+				</div>
+			{:else}
+				<div class="input-wrap">
+					<svg
+						class="input-icon"
+						width="12"
+						height="12"
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="2"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+					>
+						<circle cx="11" cy="11" r="8" /><line x1="21" y1="21" x2="16.65" y2="16.65" />
+					</svg>
+					<input
+						type="text"
+						class="tag-input"
+						value={$runnerConfig.testID}
+						placeholder="@tag or leave blank for all tests"
+						on:input={(e) => runnerConfig.update((c) => ({ ...c, testID: e.currentTarget.value }))}
+						on:keydown={handleKeydown}
+						disabled={state.running}
+					/>
+				</div>
+			{/if}
+
+			<!-- Test run dropdown -->
+			<div class="ctrl-group">
+				<span class="ctrl-label">Test Run</span>
+				<div class="dropdown-wrap" use:clickOutside on:clickoutside={() => (runPickOpen = false)}>
+					<button
+						class="dropdown-trigger"
+						class:open={runPickOpen}
+						class:has-remote={!!selectedRun}
+						on:click={() => {
+							if (!state.running) runPickOpen = !runPickOpen;
+						}}
+						disabled={state.running}
+					>
+						<span>{selectedRun ? selectedRun.title : 'None'}</span>
+						<svg
+							width="10"
+							height="10"
+							viewBox="0 0 24 24"
+							fill="none"
+							stroke="currentColor"
+							stroke-width="2.5"
+							stroke-linecap="round"
+							class="trigger-chevron"
+							class:open={runPickOpen}
+						>
+							<polyline points="6 9 12 15 18 9" />
+						</svg>
+					</button>
+					{#if runPickOpen}
+						<div class="dropdown-menu run-pick-menu" transition:fly={{ y: 6, duration: 130 }}>
+							{#if selectedRun}
+								<button class="dropdown-item" on:click={clearSelectedRun}>
+									<span style="color:var(--text-muted)">✕</span> Clear
+								</button>
+								<div class="dropdown-divider"></div>
+							{/if}
+							{#if testRuns.filter((r) => r.status !== 'complete').length === 0}
+								<div class="dropdown-empty">No active test runs</div>
+							{:else}
+								{#each testRuns.filter((r) => r.status !== 'complete') as run}
+									<button
+										class="dropdown-item"
+										class:active={selectedRun?.id === run.id}
+										on:click={() => selectRun(run)}
+									>
+										{run.title}
+									</button>
+								{/each}
+							{/if}
+						</div>
+					{/if}
+				</div>
 			</div>
 
 			<div class="ctrl-divider"></div>
@@ -473,7 +593,12 @@
 				class="run-btn"
 				class:is-running={state.running}
 				on:click={handleRunClick}
-				disabled={state.running}
+				disabled={state.running ||
+					selectedRunLoading ||
+					(selectedRun && selectedRun.tags?.length === 0)}
+				title={selectedRun && selectedRun.tags?.length === 0
+					? 'No automated cases in this run'
+					: undefined}
 			>
 				{#if state.running}
 					<span class="run-spinner"></span>
@@ -1187,4 +1312,93 @@
 	.empty-icon {
 		opacity: 0.4;
 	}
+
+	/* ── Run chip (selected test run display) ── */
+	.run-chip {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.4rem;
+		height: 28px;
+		padding: 0 0.5rem 0 0.625rem;
+		background: var(--accent-soft);
+		border: 1px solid var(--accent);
+		border-radius: var(--radius-sm);
+		color: var(--accent);
+		font-size: 0.78rem;
+		white-space: nowrap;
+		max-width: 200px;
+	}
+
+	.run-chip-title {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		flex: 1;
+		min-width: 0;
+	}
+
+	.run-chip-count {
+		font-size: 0.65rem;
+		font-weight: 600;
+		letter-spacing: 0.04em;
+		opacity: 0.75;
+		white-space: nowrap;
+		flex-shrink: 0;
+	}
+
+	.run-chip-count.none {
+		color: var(--fail);
+		opacity: 1;
+	}
+
+	.run-chip-spinner {
+		width: 9px;
+		height: 9px;
+		border: 1.5px solid color-mix(in srgb, var(--accent) 35%, transparent);
+		border-top-color: var(--accent);
+		border-radius: 50%;
+		animation: spin 0.65s linear infinite;
+		flex-shrink: 0;
+	}
+
+	.run-chip-clear {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 16px;
+		height: 16px;
+		border: none;
+		background: transparent;
+		color: var(--accent);
+		cursor: pointer;
+		border-radius: 2px;
+		opacity: 0.7;
+		padding: 0;
+		flex-shrink: 0;
+		transition: opacity var(--duration-fast);
+	}
+
+	.run-chip-clear:hover {
+		opacity: 1;
+	}
+
+	.run-pick-menu {
+		min-width: 180px;
+		max-height: 240px;
+		overflow-y: auto;
+	}
+
+	.dropdown-divider {
+		height: 1px;
+		background: var(--border);
+		margin: 0.25rem 0;
+	}
+
+	.dropdown-empty {
+		font-size: 0.8125rem;
+		color: var(--text-muted);
+		padding: 0.35rem 0.5rem;
+		text-align: center;
+		opacity: 0.7;
+	}
 </style>

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

@@ -22,12 +22,18 @@
 	export let open = false;
 	export let title = '';
 
+	let mousedownOnBackdrop = false;
+
 	function close() {
 		open = false;
 	}
 
+	function onBackdropMousedown(e) {
+		mousedownOnBackdrop = e.target === e.currentTarget;
+	}
+
 	function onBackdrop(e) {
-		if (e.target === e.currentTarget) close();
+		if (e.target === e.currentTarget && mousedownOnBackdrop) close();
 	}
 
 	function onKeydown(e) {
@@ -41,6 +47,7 @@
 	<div
 		class="backdrop"
 		role="presentation"
+		on:mousedown={onBackdropMousedown}
 		on:click={onBackdrop}
 		on:keydown={(e) => e.key === 'Escape' && close()}
 		transition:fade={{ duration: 200 }}

package/frontend/src/lib/constants.js

@@ -28,6 +28,8 @@ export const TRIGGER_TYPES = Object.freeze({
 });
 
 export const REPORTS_PER_PAGE = 15;
+export const REPO_PAGE_SIZE = 20;
+export const SUITE_CASES_PER_PAGE = 20;
 
 export const COPY_TIMEOUT_MS = 1400;
 export const TOAST_TIMEOUT_MS = 4000;

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

@@ -0,0 +1,60 @@
+/*
+ * 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 { writable } from 'svelte/store';
+
+const TOKEN_KEY = 'plum:token';
+const USER_KEY = 'plum:user';
+
+function createAuthStore() {
+	let initialToken = null;
+	let initialUser = null;
+	try {
+		initialToken = typeof localStorage !== 'undefined' ? localStorage.getItem(TOKEN_KEY) : null;
+		const raw = typeof localStorage !== 'undefined' ? localStorage.getItem(USER_KEY) : null;
+		initialUser = raw ? JSON.parse(raw) : null;
+	} catch {}
+
+	const { subscribe, set, update } = writable({ token: initialToken, user: initialUser });
+
+	return {
+		subscribe,
+		login(token, user) {
+			try {
+				localStorage.setItem(TOKEN_KEY, token);
+				localStorage.setItem(USER_KEY, JSON.stringify(user));
+			} catch {}
+			set({ token, user });
+		},
+		logout() {
+			try {
+				localStorage.removeItem(TOKEN_KEY);
+				localStorage.removeItem(USER_KEY);
+			} catch {}
+			set({ token: null, user: null });
+		},
+		getToken() {
+			try {
+				return localStorage.getItem(TOKEN_KEY);
+			} catch {
+				return null;
+			}
+		}
+	};
+}
+
+export const auth = createAuthStore();

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

@@ -43,11 +43,12 @@ export const builtInEnabled = writable(true);
 
 export const testsVersion = writable(0);
 export const reportsVersion = writable(0);
+export const runsVersion = writable(0);
 
 // Map of taskName → true for every cron job currently executing
 export const activeCronJobs = writable({});
 
-export function triggerRun(id) {
+export function triggerRun(id, testRunId) {
 	const s = get(socket);
 	if (!s) return;
 
@@ -66,7 +67,13 @@ export function triggerRun(id) {
 	});
 	panelExpanded.set(true);
 
-	s.emit('run-test', { tag: runId, workers, browser, runners: selectedRunners });
+	s.emit('run-test', {
+		tag: runId,
+		workers,
+		browser,
+		runners: selectedRunners,
+		testRunId: testRunId ?? null
+	});
 }
 
 export function cancelRun() {