plum-e2e 1.0.10 → 1.1.0

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

@@ -0,0 +1,304 @@
+<!--
+ * 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 { page } from '$app/stores';
+	import { theme } from '$lib/stores/theme';
+	import { slide } from 'svelte/transition';
+
+	let menuOpen = false;
+
+	const links = [
+		{ href: '/', label: 'Run Tests' },
+		{ href: '/reports', label: 'Reports' },
+		{ href: '/scheduled-tests', label: 'Scheduled' }
+	];
+
+	function toggleTheme() {
+		theme.update((t) => (t === 'light' ? 'dark' : 'light'));
+	}
+
+	function closeMenu() {
+		menuOpen = false;
+	}
+</script>
+
+<nav class="nav">
+	<div class="inner">
+		<a href="/" class="brand" on:click={closeMenu}>
+			<span class="brand-serif">Pl</span><span class="brand-sans">um</span>
+		</a>
+
+		<div class="links">
+			{#each links as link}
+				<a href={link.href} class="link" class:active={$page.url.pathname === link.href}>
+					{link.label}
+				</a>
+			{/each}
+		</div>
+
+		<div class="actions">
+			<button class="theme-btn" on:click={toggleTheme} aria-label="Toggle theme">
+				{#if $theme === 'light'}
+					<svg
+						width="15"
+						height="15"
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="2"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+					>
+						<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+					</svg>
+				{:else}
+					<svg
+						width="15"
+						height="15"
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="2"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+					>
+						<circle cx="12" cy="12" r="5" />
+						<line x1="12" y1="1" x2="12" y2="3" />
+						<line x1="12" y1="21" x2="12" y2="23" />
+						<line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
+						<line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
+						<line x1="1" y1="12" x2="3" y2="12" />
+						<line x1="21" y1="12" x2="23" y2="12" />
+						<line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
+						<line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
+					</svg>
+				{/if}
+			</button>
+
+			<button
+				class="hamburger"
+				on:click={() => (menuOpen = !menuOpen)}
+				aria-label={menuOpen ? 'Close menu' : 'Open menu'}
+				aria-expanded={menuOpen}
+			>
+				<span class:rotated={menuOpen}></span>
+				<span class:hidden={menuOpen}></span>
+				<span class:rotated-reverse={menuOpen}></span>
+			</button>
+		</div>
+	</div>
+
+	{#if menuOpen}
+		<div class="mobile-menu" transition:slide={{ duration: 200 }}>
+			{#each links as link}
+				<a
+					href={link.href}
+					class="mobile-link"
+					class:active={$page.url.pathname === link.href}
+					on:click={closeMenu}
+				>
+					{link.label}
+				</a>
+			{/each}
+		</div>
+	{/if}
+</nav>
+
+<style>
+	.nav {
+		position: sticky;
+		top: 0;
+		z-index: 40;
+		background: var(--bg);
+		border-bottom: 1px solid var(--border);
+		transition:
+			background var(--duration-base) var(--ease-out),
+			border-color var(--duration-base) var(--ease-out);
+	}
+
+	.inner {
+		max-width: 1200px;
+		margin: 0 auto;
+		padding: 0 1.5rem;
+		height: 56px;
+		display: flex;
+		align-items: center;
+		gap: 2rem;
+	}
+
+	/* Brand */
+	.brand {
+		font-size: 1.2rem;
+		letter-spacing: -0.02em;
+		flex-shrink: 0;
+		text-decoration: none;
+	}
+
+	.brand-serif {
+		font-family: var(--font-display);
+		font-weight: 400;
+		color: var(--accent);
+	}
+
+	.brand-sans {
+		font-family: var(--font-body);
+		font-weight: 400;
+		color: var(--text);
+	}
+
+	/* Desktop links */
+	.links {
+		display: flex;
+		gap: 0.125rem;
+		flex: 1;
+	}
+
+	.link {
+		font-size: 0.875rem;
+		font-weight: 400;
+		color: var(--text-muted);
+		text-decoration: none;
+		padding: 0.35rem 0.75rem;
+		border-radius: var(--radius-sm);
+		transition:
+			color var(--duration-fast),
+			background var(--duration-fast);
+	}
+
+	.link:hover {
+		color: var(--text);
+		background: var(--bg-subtle);
+	}
+
+	.link.active {
+		color: var(--accent);
+		background: var(--accent-soft);
+	}
+
+	/* Actions */
+	.actions {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		margin-left: auto;
+	}
+
+	.theme-btn {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 34px;
+		height: 34px;
+		border-radius: var(--radius-sm);
+		border: 1px solid var(--border);
+		background: transparent;
+		color: var(--text-muted);
+		cursor: pointer;
+		transition:
+			background var(--duration-fast),
+			color var(--duration-fast),
+			border-color var(--duration-fast);
+	}
+
+	.theme-btn:hover {
+		background: var(--bg-subtle);
+		color: var(--text);
+		border-color: var(--text-muted);
+	}
+
+	/* Hamburger */
+	.hamburger {
+		display: none;
+		flex-direction: column;
+		justify-content: center;
+		gap: 4px;
+		width: 34px;
+		height: 34px;
+		background: none;
+		border: 1px solid var(--border);
+		border-radius: var(--radius-sm);
+		cursor: pointer;
+		padding: 0 8px;
+	}
+
+	.hamburger span {
+		display: block;
+		width: 100%;
+		height: 1.5px;
+		background: var(--text-muted);
+		border-radius: 2px;
+		transform-origin: center;
+		transition:
+			transform var(--duration-base) var(--ease-out),
+			opacity var(--duration-fast);
+	}
+
+	.hamburger span.rotated {
+		transform: translateY(5.5px) rotate(45deg);
+	}
+
+	.hamburger span.hidden {
+		opacity: 0;
+	}
+
+	.hamburger span.rotated-reverse {
+		transform: translateY(-5.5px) rotate(-45deg);
+	}
+
+	/* Mobile menu */
+	.mobile-menu {
+		border-top: 1px solid var(--border);
+		padding: 0.75rem 1.5rem 1rem;
+		display: flex;
+		flex-direction: column;
+		gap: 0.125rem;
+	}
+
+	.mobile-link {
+		color: var(--text-muted);
+		text-decoration: none;
+		font-size: 0.9375rem;
+		font-weight: 400;
+		padding: 0.5rem 0.75rem;
+		border-radius: var(--radius-sm);
+		transition:
+			background var(--duration-fast),
+			color var(--duration-fast);
+	}
+
+	.mobile-link:hover,
+	.mobile-link.active {
+		background: var(--bg-subtle);
+		color: var(--text);
+	}
+
+	.mobile-link.active {
+		color: var(--accent);
+		background: var(--accent-soft);
+	}
+
+	@media (max-width: 640px) {
+		.links {
+			display: none;
+		}
+
+		.hamburger {
+			display: flex;
+		}
+	}
+</style>

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

@@ -0,0 +1,28 @@
+<!--
+ * 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/.
+ -->
+
+<main class="shell">
+	<slot />
+</main>
+
+<style>
+	.shell {
+		max-width: 1200px;
+		margin: 0 auto;
+		padding: 2.5rem 1.5rem 5rem; /* bottom clearance for RunnerPanel */
+	}
+</style>

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

@@ -0,0 +1,378 @@
+<!--
+ * 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 { onMount } from 'svelte';
+	import { slide, fly } from 'svelte/transition';
+	import { io } from 'socket.io-client';
+	import { socket, runnerState, runnerConfig, panelExpanded, triggerRun } from '$lib/stores/runner';
+	import { fetchLatestReport, reportUrl } from '$lib/api/reports';
+	import Terminal from '$lib/components/ui/Terminal.svelte';
+	import Button from '$lib/components/ui/Button.svelte';
+
+	const WORKER_OPTIONS = [1, 2, 4, 8];
+
+	onMount(() => {
+		const s = io('http://localhost:3001');
+		socket.set(s);
+
+		s.on('log', (data) => {
+			runnerState.update((r) => ({ ...r, output: r.output + data + '\n' }));
+		});
+
+		s.on('done', async (code) => {
+			const report = await fetchLatestReport().catch(() => null);
+			const passed = code === 0;
+			runnerState.update((r) => ({
+				...r,
+				output: r.output + (passed ? '✓ All tests passed\n' : '✗ Some tests failed\n'),
+				running: false,
+				testCompleted: true,
+				latestReport: report,
+				status: passed ? 'pass' : 'fail'
+			}));
+		});
+
+		return () => s.disconnect();
+	});
+
+	$: state = $runnerState;
+	$: cfg = $runnerConfig;
+	$: workerCount = Math.min(cfg.workers, 4);
+	$: dots = Array.from({ length: workerCount });
+
+	$: statusColor =
+		state.status === 'pass'
+			? 'var(--pass)'
+			: state.status === 'fail'
+				? 'var(--fail)'
+				: state.status === 'running'
+					? 'var(--accent)'
+					: 'var(--border)';
+
+	$: statusLabel =
+		state.status === 'running'
+			? 'running'
+			: state.status === 'pass'
+				? 'passed'
+				: state.status === 'fail'
+					? 'failed'
+					: 'ready';
+
+	function handleKeydown(e) {
+		if (e.key === 'Enter' && !state.running) triggerRun();
+	}
+</script>
+
+<div class="panel" class:expanded={$panelExpanded}>
+	<!-- Header bar — always visible -->
+	<div class="bar">
+		<div class="bar-left">
+			<span class="status-dot" class:pulse={state.running} style="background: {statusColor}"></span>
+			<span class="status-label">{statusLabel}</span>
+			{#if state.lastRunId}
+				<span class="run-id">{state.lastRunId || '(all)'}</span>
+			{/if}
+		</div>
+
+		<div class="bar-dots" title="{cfg.workers} worker{cfg.workers !== 1 ? 's' : ''}">
+			{#each dots as _, i}
+				<span
+					class="dot"
+					class:running={state.running}
+					class:pass={state.status === 'pass'}
+					class:fail={state.status === 'fail'}
+					style="animation-delay: {i * 180}ms"
+				></span>
+			{/each}
+		</div>
+
+		<button
+			class="expand-btn"
+			on:click={() => panelExpanded.update((v) => !v)}
+			aria-label={$panelExpanded ? 'Collapse panel' : 'Expand panel'}
+		>
+			<svg
+				width="14"
+				height="14"
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				class:rotated={$panelExpanded}
+			>
+				<polyline points="18 15 12 9 6 15" />
+			</svg>
+		</button>
+	</div>
+
+	<!-- Body — visible when expanded -->
+	{#if $panelExpanded}
+		<div class="body" transition:slide={{ duration: 220 }}>
+			<div class="controls">
+				<input
+					type="text"
+					class="field-input run-input"
+					bind:value={$runnerConfig.testID}
+					placeholder="@test-1 or @suite-login or blank for all"
+					on:keydown={handleKeydown}
+					disabled={state.running}
+				/>
+
+				<div class="workers-control">
+					{#each WORKER_OPTIONS as n}
+						<button
+							class="worker-btn"
+							class:active={cfg.workers === n}
+							on:click={() => runnerConfig.update((c) => ({ ...c, workers: n }))}
+						>
+							{n === 1 ? 'Off' : n}
+						</button>
+					{/each}
+				</div>
+
+				<Button on:click={() => triggerRun()} disabled={state.running}>
+					{state.running ? 'Running…' : 'Run'}
+				</Button>
+			</div>
+
+			<Terminal output={state.output} />
+
+			{#if state.testCompleted && state.latestReport}
+				<div class="report-row" transition:fly={{ y: 6, duration: 200 }}>
+					<a href={reportUrl(state.latestReport)} target="_blank" rel="noopener noreferrer">
+						<Button variant="outline" size="sm">View Report →</Button>
+					</a>
+				</div>
+			{/if}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.panel {
+		position: fixed;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		z-index: 200;
+		background: var(--bg-elevated);
+		border-top: 1px solid var(--border);
+		box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.06);
+		transition: box-shadow var(--duration-base) var(--ease-out);
+	}
+
+	.panel.expanded {
+		box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.1);
+	}
+
+	/* ── Header bar ── */
+	.bar {
+		display: flex;
+		align-items: center;
+		gap: 0.75rem;
+		padding: 0 1.5rem;
+		height: 48px;
+		cursor: default;
+	}
+
+	.bar-left {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		flex: 1;
+		min-width: 0;
+	}
+
+	.status-dot {
+		flex-shrink: 0;
+		width: 8px;
+		height: 8px;
+		border-radius: 50%;
+		transition: background var(--duration-base);
+	}
+
+	.status-dot.pulse {
+		animation: statusPulse 1.6s ease-in-out infinite;
+	}
+
+	@keyframes statusPulse {
+		0%,
+		100% {
+			opacity: 1;
+			transform: scale(1);
+		}
+		50% {
+			opacity: 0.5;
+			transform: scale(0.7);
+		}
+	}
+
+	.status-label {
+		font-size: 0.7rem;
+		font-weight: 500;
+		letter-spacing: 0.07em;
+		text-transform: uppercase;
+		color: var(--text-muted);
+		flex-shrink: 0;
+	}
+
+	.run-id {
+		font-size: 0.75rem;
+		color: var(--text-muted);
+		font-family: 'JetBrains Mono', monospace;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	/* ── Worker dots ── */
+	.bar-dots {
+		display: flex;
+		align-items: center;
+		gap: 4px;
+		flex-shrink: 0;
+	}
+
+	.dot {
+		width: 7px;
+		height: 7px;
+		border-radius: 50%;
+		background: var(--border);
+		transition:
+			background var(--duration-base),
+			transform var(--duration-fast);
+	}
+
+	.dot.running {
+		background: var(--pass);
+		animation: dotBeat 1.4s ease-in-out infinite;
+	}
+
+	.dot.pass {
+		background: var(--pass);
+	}
+
+	.dot.fail {
+		background: var(--fail);
+	}
+
+	@keyframes dotBeat {
+		0%,
+		100% {
+			opacity: 1;
+			transform: scale(1);
+		}
+		50% {
+			opacity: 0.35;
+			transform: scale(0.65);
+		}
+	}
+
+	.expand-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;
+		flex-shrink: 0;
+		transition:
+			background var(--duration-fast),
+			color var(--duration-fast);
+	}
+
+	.expand-btn:hover {
+		background: var(--bg-subtle);
+		color: var(--text);
+	}
+
+	.expand-btn svg {
+		transition: transform var(--duration-base) var(--ease-out);
+	}
+
+	.expand-btn svg.rotated {
+		transform: rotate(180deg);
+	}
+
+	/* ── Body ── */
+	.body {
+		padding: 0.875rem 1.5rem 1.125rem;
+		border-top: 1px solid var(--border);
+		display: flex;
+		flex-direction: column;
+		gap: 0.75rem;
+	}
+
+	.controls {
+		display: flex;
+		align-items: center;
+		gap: 0.625rem;
+	}
+
+	.run-input {
+		flex: 1;
+	}
+
+	.workers-control {
+		display: flex;
+		gap: 2px;
+		background: var(--bg-subtle);
+		border: 1px solid var(--border);
+		border-radius: var(--radius-sm);
+		padding: 2px;
+		flex-shrink: 0;
+	}
+
+	.worker-btn {
+		font-family: var(--font-body);
+		font-size: 0.75rem;
+		font-weight: 400;
+		min-width: 2rem;
+		padding: 0.2rem 0.5rem;
+		border: none;
+		border-radius: 4px;
+		background: transparent;
+		color: var(--text-muted);
+		cursor: pointer;
+		transition:
+			background var(--duration-fast),
+			color var(--duration-fast);
+	}
+
+	.worker-btn:hover:not(.active) {
+		background: var(--bg-elevated);
+		color: var(--text);
+	}
+
+	.worker-btn.active {
+		background: var(--bg-elevated);
+		color: var(--accent);
+		font-weight: 500;
+		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+	}
+
+	.report-row {
+		display: flex;
+	}
+</style>