plum-e2e 1.0.10 → 1.1.0

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

@@ -0,0 +1,63 @@
+<!--
+ * 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/.
+ -->
+
+<script>
+	/** @type {'pass' | 'fail' | 'tag' | 'schedule' | 'neutral'} */
+	export let variant = 'neutral';
+</script>
+
+<span class="badge {variant}"><slot /></span>
+
+<style>
+	.badge {
+		display: inline-flex;
+		align-items: center;
+		font-size: 0.68rem;
+		font-weight: 500;
+		letter-spacing: 0.05em;
+		text-transform: uppercase;
+		padding: 0.2rem 0.6rem;
+		border-radius: 100px;
+		white-space: nowrap;
+	}
+
+	.pass {
+		background: var(--pass-soft);
+		color: var(--pass);
+	}
+
+	.fail {
+		background: var(--fail-soft);
+		color: var(--fail);
+	}
+
+	.tag {
+		background: var(--accent-soft);
+		color: var(--accent);
+	}
+
+	.schedule {
+		background: var(--warn-soft);
+		color: var(--warn);
+	}
+
+	.neutral {
+		background: var(--bg-subtle);
+		color: var(--text-muted);
+		border: 1px solid var(--border);
+	}
+</style>

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

@@ -0,0 +1,117 @@
+<!--
+ * 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/.
+ -->
+
+<script>
+	/** @type {'primary' | 'ghost' | 'danger' | 'outline'} */
+	export let variant = 'primary';
+	/** @type {'sm' | 'md'} */
+	export let size = 'md';
+	export let type = 'button';
+	export let disabled = false;
+</script>
+
+<button {type} {disabled} class="btn {variant} {size}" on:click>
+	<slot />
+</button>
+
+<style>
+	.btn {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		gap: 0.375rem;
+		font-family: var(--font-body);
+		font-weight: 400;
+		border-radius: var(--radius-md);
+		border: 1px solid transparent;
+		cursor: pointer;
+		white-space: nowrap;
+		text-decoration: none;
+		transition:
+			background var(--duration-fast) var(--ease-out),
+			color var(--duration-fast) var(--ease-out),
+			border-color var(--duration-fast) var(--ease-out),
+			box-shadow var(--duration-fast) var(--ease-out),
+			transform var(--duration-fast) var(--ease-out),
+			opacity var(--duration-fast);
+	}
+
+	.btn:active:not(:disabled) {
+		transform: scale(0.97);
+	}
+
+	.btn:disabled {
+		opacity: 0.38;
+		cursor: not-allowed;
+	}
+
+	/* Sizes */
+	.sm {
+		font-size: 0.75rem;
+		padding: 0.3rem 0.75rem;
+		border-radius: var(--radius-sm);
+	}
+
+	.md {
+		font-size: 0.875rem;
+		padding: 0.55rem 1.25rem;
+	}
+
+	/* Variants */
+	.primary {
+		background: var(--accent);
+		color: #fff;
+		border-color: var(--accent);
+	}
+
+	.primary:hover:not(:disabled) {
+		filter: brightness(1.12);
+		box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 30%, transparent);
+	}
+
+	.ghost {
+		background: transparent;
+		color: var(--text-muted);
+		border-color: var(--border);
+	}
+
+	.ghost:hover:not(:disabled) {
+		background: var(--bg-subtle);
+		color: var(--text);
+		border-color: var(--text-muted);
+	}
+
+	.danger {
+		background: transparent;
+		color: var(--fail);
+		border-color: var(--fail);
+	}
+
+	.danger:hover:not(:disabled) {
+		background: var(--fail-soft);
+	}
+
+	.outline {
+		background: transparent;
+		color: var(--accent);
+		border-color: var(--accent);
+	}
+
+	.outline:hover:not(:disabled) {
+		background: var(--accent-soft);
+	}
+</style>

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

@@ -0,0 +1,140 @@
+<!--
+ * 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/.
+ -->
+
+<script>
+	import { fade, scale } from 'svelte/transition';
+	import { cubicOut } from 'svelte/easing';
+
+	export let open = false;
+	export let title = '';
+
+	function close() {
+		open = false;
+	}
+
+	function onBackdrop(e) {
+		if (e.target === e.currentTarget) close();
+	}
+
+	function onKeydown(e) {
+		if (e.key === 'Escape') close();
+	}
+</script>
+
+<svelte:window on:keydown={onKeydown} />
+
+{#if open}
+	<div
+		class="backdrop"
+		role="presentation"
+		on:click={onBackdrop}
+		on:keydown={(e) => e.key === 'Escape' && close()}
+		transition:fade={{ duration: 200 }}
+	>
+		<div
+			class="panel"
+			role="dialog"
+			aria-modal="true"
+			aria-label={title}
+			transition:scale={{ start: 0.96, duration: 260, easing: cubicOut }}
+		>
+			<div class="header">
+				<h3 class="title">{title}</h3>
+				<button class="close-btn" on:click={close} aria-label="Close">
+					<svg width="14" height="14" 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>
+			<div class="body">
+				<slot />
+			</div>
+		</div>
+	</div>
+{/if}
+
+<style>
+	.backdrop {
+		position: fixed;
+		inset: 0;
+		background: rgba(0, 0, 0, 0.45);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		z-index: 50;
+		padding: 1rem;
+		backdrop-filter: blur(2px);
+	}
+
+	.panel {
+		background: var(--bg-elevated);
+		border: 1px solid var(--border);
+		border-radius: var(--radius-lg);
+		padding: 1.75rem;
+		width: 100%;
+		max-width: 480px;
+		box-shadow:
+			0 4px 6px rgba(0, 0, 0, 0.04),
+			0 24px 64px rgba(0, 0, 0, 0.14);
+	}
+
+	.header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		margin-bottom: 1.5rem;
+	}
+
+	.title {
+		font-family: var(--font-display);
+		font-size: 1.2rem;
+		font-weight: 400;
+		color: var(--text);
+	}
+
+	.close-btn {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 28px;
+		height: 28px;
+		border-radius: var(--radius-sm);
+		border: none;
+		background: transparent;
+		color: var(--text-muted);
+		cursor: pointer;
+		transition:
+			background var(--duration-fast),
+			color var(--duration-fast);
+	}
+
+	.close-btn:hover {
+		background: var(--bg-subtle);
+		color: var(--text);
+	}
+
+	.body {
+		display: flex;
+		flex-direction: column;
+		gap: 1rem;
+	}
+</style>

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

@@ -0,0 +1,100 @@
+<!--
+ * 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/.
+ -->
+
+<script>
+	import { createEventDispatcher } from 'svelte';
+
+	export let current = 1;
+	export let total = 1;
+
+	const dispatch = createEventDispatcher();
+
+	function go(page) {
+		if (page < 1 || page > total) return;
+		dispatch('change', page);
+	}
+</script>
+
+{#if total > 1}
+	<div class="pagination">
+		<button
+			class="arrow"
+			on:click={() => go(current - 1)}
+			disabled={current === 1}
+			aria-label="Previous"
+		>
+			←
+		</button>
+
+		{#each Array(total) as _, i}
+			<button class="page" class:active={current === i + 1} on:click={() => go(i + 1)}>
+				{i + 1}
+			</button>
+		{/each}
+
+		<button
+			class="arrow"
+			on:click={() => go(current + 1)}
+			disabled={current === total}
+			aria-label="Next"
+		>
+			→
+		</button>
+	</div>
+{/if}
+
+<style>
+	.pagination {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: 0.25rem;
+	}
+
+	button {
+		min-width: 2rem;
+		height: 2rem;
+		padding: 0 0.25rem;
+		border-radius: var(--radius-sm);
+		border: 1px solid var(--border);
+		background: transparent;
+		color: var(--text-muted);
+		font-family: var(--font-body);
+		font-size: 0.8125rem;
+		cursor: pointer;
+		transition:
+			background var(--duration-fast),
+			color var(--duration-fast),
+			border-color var(--duration-fast);
+	}
+
+	button:disabled {
+		opacity: 0.3;
+		cursor: not-allowed;
+	}
+
+	button.active {
+		background: var(--accent);
+		color: #fff;
+		border-color: var(--accent);
+	}
+
+	button:hover:not(:disabled):not(.active) {
+		background: var(--bg-subtle);
+		color: var(--text);
+	}
+</style>

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

@@ -0,0 +1,100 @@
+<!--
+ * 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/.
+ -->
+
+<script>
+	import { afterUpdate } from 'svelte';
+
+	export let output = '';
+
+	let el;
+
+	afterUpdate(() => {
+		if (el) el.scrollTop = el.scrollHeight;
+	});
+</script>
+
+<div class="terminal-wrap">
+	<div class="terminal-bar">
+		<span class="dot red"></span>
+		<span class="dot yellow"></span>
+		<span class="dot green"></span>
+	</div>
+	<pre bind:this={el} class="terminal">{output}</pre>
+</div>
+
+<style>
+	.terminal-wrap {
+		border-radius: var(--radius-md);
+		overflow: hidden;
+		border: 1px solid rgba(255, 255, 255, 0.06);
+	}
+
+	.terminal-bar {
+		display: flex;
+		align-items: center;
+		gap: 6px;
+		padding: 0.6rem 0.875rem;
+		background: rgba(0, 0, 0, 0.3);
+	}
+
+	.dot {
+		display: block;
+		width: 10px;
+		height: 10px;
+		border-radius: 50%;
+	}
+
+	.red {
+		background: #ff5f57;
+	}
+
+	.yellow {
+		background: #febc2e;
+	}
+
+	.green {
+		background: #28c840;
+	}
+
+	.terminal {
+		font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Courier New', monospace;
+		font-size: 0.78rem;
+		line-height: 1.75;
+		background: var(--terminal-bg);
+		color: var(--terminal-text);
+		padding: 1rem;
+		min-height: 220px;
+		max-height: 280px;
+		overflow-y: auto;
+		white-space: pre-wrap;
+		word-break: break-word;
+		margin: 0;
+	}
+
+	.terminal::-webkit-scrollbar {
+		width: 4px;
+	}
+
+	.terminal::-webkit-scrollbar-track {
+		background: transparent;
+	}
+
+	.terminal::-webkit-scrollbar-thumb {
+		background: rgba(255, 255, 255, 0.1);
+		border-radius: 2px;
+	}
+</style>

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

@@ -0,0 +1,55 @@
+/*
+ * 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, get } from 'svelte/store';
+
+export const socket = writable(null);
+
+export const runnerState = writable({
+	output: 'Ready — select a test from the list.\n',
+	running: false,
+	testCompleted: false,
+	latestReport: null,
+	status: 'idle', // 'idle' | 'running' | 'pass' | 'fail'
+	lastRunId: ''
+});
+
+export const runnerConfig = writable({
+	workers: 1,
+	testID: ''
+});
+
+export const panelExpanded = writable(true);
+
+export function triggerRun(id) {
+	const s = get(socket);
+	if (!s) return;
+
+	const { workers, testID } = get(runnerConfig);
+	const runId = (id !== undefined ? id : testID).trim().replace(/\sOR\s/gi, (m) => m.toLowerCase());
+
+	runnerState.set({
+		output: `Running: ${runId || '(all tests)'}\n`,
+		running: true,
+		testCompleted: false,
+		latestReport: null,
+		status: 'running',
+		lastRunId: runId
+	});
+	panelExpanded.set(true);
+	s.emit('run-test', runId, workers);
+}

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

@@ -0,0 +1,47 @@
+/*
+ * 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/.
+ */
+
+/*
+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';
+import { browser } from '$app/environment';
+
+const KEY = 'plum-theme';
+const initial = browser ? (localStorage.getItem(KEY) ?? 'light') : 'light';
+
+export const theme = writable(initial);
+
+theme.subscribe((val) => {
+	if (!browser) return;
+	localStorage.setItem(KEY, val);
+	document.documentElement.setAttribute('data-theme', val);
+});

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

@@ -17,18 +17,13 @@
 
 <script>
 	import '../app.css';
-	import Navigation from './components/Navigation.svelte';
+	import Nav from '$lib/components/layout/Nav.svelte';
+	import PageShell from '$lib/components/layout/PageShell.svelte';
+	import RunnerPanel from '$lib/components/layout/RunnerPanel.svelte';
 </script>
 
-<div class="layout">
-	<Navigation></Navigation>
+<Nav />
+<PageShell>
 	<slot />
-</div>
-
-<style>
-	.layout {
-		display: flex;
-		flex-direction: column;
-		min-height: 100vh; /* Full viewport height */
-	}
-</style>
+</PageShell>
+<RunnerPanel />