plum-e2e 1.3.7 → 2.2.0

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,17 +28,27 @@
 		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 { fetchIntegrations } from '$lib/api/settings';
 	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;
+	let integrations = { discordWebhookUrl: '', slackWebhookUrl: '', notifyPublicUrl: '' };
+	let notifyDiscord = false;
+	let notifySlack = false;
 
 	function clickOutside(node) {
 		function handle(e) {
@@ -82,6 +91,10 @@
 			})
 			.catch(() => {});
 
+		fetchIntegrations()
+			.then((i) => (integrations = i))
+			.catch(() => {});
+
 		_unsubConfig = runnerConfig.subscribe((v) => {
 			try {
 				localStorage.setItem('plum:runnerConfig', JSON.stringify(v));
@@ -105,7 +118,7 @@
 			});
 		});
 
-		const s = io(API_BASE);
+		const s = io(API_BASE, { transports: ['websocket'] });
 		_socket = s;
 		socket.set(s);
 
@@ -189,6 +202,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,16 +237,42 @@
 				? (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() === '') {
+		const notify = { notifyDiscord, notifySlack };
+		if (selectedRun) {
+			if (selectedRunLoading || !selectedRun.tags) return;
+			if (selectedRun.tags.length === 0) return;
+			triggerRun(selectedRun.tags.join(' or '), selectedRun.id, notify);
+		} else if ($runnerConfig.testID.trim() === '') {
 			runAllModalOpen = true;
 		} else {
-			triggerRun();
+			triggerRun(undefined, undefined, notify);
 		}
 	}
 
 	function handleKeydown(e) {
-		if (e.key === 'Enter' && !state.running) handleRunClick();
+		if (e.key === 'Enter' && !state.running && !selectedRun) handleRunClick();
 	}
 
 	function adjustWorkers(delta) {
@@ -259,7 +303,7 @@
 	confirmLabel="Run all tests"
 	on:confirm={() => {
 		runAllModalOpen = false;
-		triggerRun();
+		triggerRun(undefined, undefined, { notifyDiscord, notifySlack });
 	}}
 >
 	No tag or filter is set. This will run <strong>every test</strong> in the suite, which may take a while.
@@ -312,30 +356,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>
@@ -466,6 +595,35 @@
 				</div>
 			{/if}
 
+			{#if integrations.discordWebhookUrl || integrations.slackWebhookUrl}
+				<div class="ctrl-divider"></div>
+				<div class="ctrl-group">
+					<span class="ctrl-label">Notify</span>
+					<div class="notify-toggles">
+						{#if integrations.discordWebhookUrl}
+							<button
+								type="button"
+								class="notify-btn"
+								class:active={notifyDiscord}
+								on:click={() => (notifyDiscord = !notifyDiscord)}
+								title={notifyDiscord ? 'Discord notification on' : 'Discord notification off'}
+								disabled={state.running}>Discord</button
+							>
+						{/if}
+						{#if integrations.slackWebhookUrl}
+							<button
+								type="button"
+								class="notify-btn"
+								class:active={notifySlack}
+								on:click={() => (notifySlack = !notifySlack)}
+								title={notifySlack ? 'Slack notification on' : 'Slack notification off'}
+								disabled={state.running}>Slack</button
+							>
+						{/if}
+					</div>
+				</div>
+			{/if}
+
 			<div class="ctrl-divider"></div>
 
 			<!-- Run button -->
@@ -473,7 +631,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>
@@ -1029,6 +1192,44 @@
 		}
 	}
 
+	/* Notification toggles */
+	.notify-toggles {
+		display: flex;
+		gap: 0.25rem;
+	}
+
+	.notify-btn {
+		height: 26px;
+		padding: 0 0.5rem;
+		border-radius: var(--radius-sm);
+		border: 1px solid var(--border);
+		background: transparent;
+		color: var(--text-muted);
+		font-size: 0.75rem;
+		font-family: inherit;
+		cursor: pointer;
+		transition:
+			background var(--duration-fast),
+			color var(--duration-fast),
+			border-color var(--duration-fast);
+	}
+
+	.notify-btn:hover:not(:disabled) {
+		color: var(--text);
+		border-color: var(--text-muted);
+	}
+
+	.notify-btn.active {
+		background: var(--accent);
+		border-color: var(--accent);
+		color: #fff;
+	}
+
+	.notify-btn:disabled {
+		opacity: 0.4;
+		cursor: default;
+	}
+
 	/* Expand button */
 	.expand-btn {
 		display: flex;
@@ -1187,4 +1388,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, notify = {}) {
 	const s = get(socket);
 	if (!s) return;
 
@@ -66,7 +67,15 @@ 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,
+		notifyDiscord: notify.notifyDiscord ?? false,
+		notifySlack: notify.notifySlack ?? false
+	});
 }
 
 export function cancelRun() {

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

@@ -17,13 +17,41 @@
 
 <script>
 	import '../app.css';
+	import { onMount } from 'svelte';
+	import { goto } from '$app/navigation';
+	import { page } from '$app/stores';
 	import Nav from '$lib/components/layout/Nav.svelte';
 	import PageShell from '$lib/components/layout/PageShell.svelte';
 	import RunnerPanel from '$lib/components/layout/RunnerPanel.svelte';
+	import { auth } from '$lib/stores/auth';
+	import { checkNeedsSetup } from '$lib/api/auth';
+
+	const PUBLIC_ROUTES = ['/login', '/setup'];
+
+	let ready = true;
+
+	onMount(async () => {
+		const pathname = $page.url.pathname;
+		if (PUBLIC_ROUTES.includes(pathname)) return;
+
+		const token = $auth.token;
+		if (!token) {
+			try {
+				const needsSetup = await checkNeedsSetup();
+				goto(needsSetup ? '/setup' : '/login');
+			} catch {
+				goto('/login');
+			}
+		}
+	});
 </script>
 
-<Nav />
-<PageShell>
+{#if $page.url.pathname === '/login' || $page.url.pathname === '/setup'}
 	<slot />
-</PageShell>
-<RunnerPanel />
+{:else}
+	<Nav />
+	<PageShell>
+		<slot />
+	</PageShell>
+	<RunnerPanel />
+{/if}

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

@@ -106,7 +106,7 @@
 	$: visibleTests = filtered.reduce((n, s) => n + s.tests.length, 0);
 </script>
 
-<svelte:head><title>Run Tests — Plum</title></svelte:head>
+<svelte:head><title>Automated Tests — Plum</title></svelte:head>
 
 <div class="page-header">
 	<div class="header-top">