plum-e2e 2.5.1 → 2.5.3

package/.env

@@ -0,0 +1,19 @@
+#
+# 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/.
+#
+
+
+IS_HEADLESS=true

package/backend/lib/serverConfig.js

@@ -32,7 +32,12 @@ function defaults() {
 	return {
 		headless: false,
 		backendPort: '3001',
-		frontendPort: '5173'
+		frontendPort: '5173',
+		// Public URLs the browser actually uses. Left blank until the user sets
+		// them (e.g. behind a reverse proxy) — resolved to a localhost default
+		// at the call site otherwise.
+		apiUrl: '',
+		uiUrl: ''
 	};
 }
 
@@ -63,10 +68,10 @@ function loadServerConfig(dir) {
 }
 
 function saveServerConfig(dir, cfg) {
-	const { headless, backendPort, frontendPort } = cfg;
+	const { headless, backendPort, frontendPort, apiUrl, uiUrl } = cfg;
 	fs.writeFileSync(
 		configPath(dir),
-		JSON.stringify({ headless, backendPort, frontendPort }, null, 2) + '\n',
+		JSON.stringify({ headless, backendPort, frontendPort, apiUrl, uiUrl }, null, 2) + '\n',
 		'utf8'
 	);
 }
@@ -88,25 +93,26 @@ function writeEnvFile(dir, { headless }) {
 }
 
 /**
- * Builds docker-compose.override.yml. Containers keep their internal ports
- * (3001/5173); only the host side is remapped. The frontend is told where to
- * reach the backend via VITE_API_URL (read by Vite at dev runtime).
+ * Builds docker-compose.override.yml. Host port remapping is handled by
+ * BACKEND_PORT/FRONTEND_PORT env vars read by docker-compose.yml itself
+ * (${BACKEND_PORT:-3001} etc) — NOT here, because Compose merges `ports:`
+ * lists across files by concatenation rather than replacing them. Defining
+ * ports in both the base file and this override would publish both values
+ * simultaneously, and fail to start if the base file's default port happens
+ * to already be taken. This override only adds volumes and tells the
+ * frontend where to reach the backend via VITE_API_URL.
  */
-function buildOverrideYaml({ testsAbs, reportsAbs, backendPort, frontendPort }) {
+function buildOverrideYaml({ testsAbs, reportsAbs, backendPort, apiUrl }) {
 	return (
 		[
 			'services:',
 			'  backend:',
-			'    ports:',
-			`      - "${backendPort}:3001"`,
 			'    volumes:',
 			`      - "${reportsAbs}:/app/reports"`,
 			`      - "${testsAbs}:/app/tests"`,
 			'  frontend:',
-			'    ports:',
-			`      - "${frontendPort}:5173"`,
 			'    environment:',
-			`      VITE_API_URL: "http://localhost:${backendPort}"`
+			`      VITE_API_URL: "${apiUrl || `http://localhost:${backendPort}`}"`
 		].join('\n') + '\n'
 	);
 }

package/bin/plum.js

@@ -188,13 +188,23 @@ async function configureServer({ force }) {
 	const overrides = {
 		headless: getFlag(args, '--headless'),
 		backendPort: getFlag(args, '--backend-port'),
-		frontendPort: getFlag(args, '--frontend-port')
+		frontendPort: getFlag(args, '--frontend-port'),
+		apiUrl: getFlag(args, '--api-url'),
+		uiUrl: getFlag(args, '--ui-url')
 	};
 	if (overrides.headless !== undefined) cfg.headless = overrides.headless === 'true';
 	if (overrides.backendPort !== undefined) cfg.backendPort = overrides.backendPort;
 	if (overrides.frontendPort !== undefined) cfg.frontendPort = overrides.frontendPort;
+	if (overrides.apiUrl !== undefined) cfg.apiUrl = overrides.apiUrl;
+	if (overrides.uiUrl !== undefined) cfg.uiUrl = overrides.uiUrl;
 
-	const hasFlags = anyFlags(args, ['--headless', '--backend-port', '--frontend-port']);
+	const hasFlags = anyFlags(args, [
+		'--headless',
+		'--backend-port',
+		'--frontend-port',
+		'--api-url',
+		'--ui-url'
+	]);
 	const interactive = force || (interactiveAllowed() && !hasFlags);
 
 	if (interactive) {
@@ -220,6 +230,27 @@ async function configureServer({ force }) {
 		});
 		if (clack.isCancel(frontendPort)) cancelAndExit();
 		cfg.frontendPort = frontendPort || cfg.frontendPort;
+
+		const defaultApiUrl = `http://localhost:${cfg.backendPort}`;
+		const apiUrl = await clack.text({
+			message: 'Public URL for the API (only if reverse-proxying behind a domain)',
+			placeholder: cfg.apiUrl || defaultApiUrl,
+			defaultValue: cfg.apiUrl || defaultApiUrl
+		});
+		if (clack.isCancel(apiUrl)) cancelAndExit();
+		cfg.apiUrl = apiUrl || defaultApiUrl;
+
+		const defaultUiUrl = `http://localhost:${cfg.frontendPort}`;
+		const uiUrl = await clack.text({
+			message: 'Public URL for the UI (only if reverse-proxying behind a domain)',
+			placeholder: cfg.uiUrl || defaultUiUrl,
+			defaultValue: cfg.uiUrl || defaultUiUrl
+		});
+		if (clack.isCancel(uiUrl)) cancelAndExit();
+		cfg.uiUrl = uiUrl || defaultUiUrl;
+	} else {
+		if (!cfg.apiUrl) cfg.apiUrl = `http://localhost:${cfg.backendPort}`;
+		if (!cfg.uiUrl) cfg.uiUrl = `http://localhost:${cfg.frontendPort}`;
 	}
 
 	saveServerConfig(cwd, cfg);
@@ -240,7 +271,7 @@ function applyServerConfig(cfg) {
 			testsAbs,
 			reportsAbs,
 			backendPort: cfg.backendPort,
-			frontendPort: cfg.frontendPort
+			apiUrl: cfg.apiUrl
 		}),
 		'utf8'
 	);
@@ -282,7 +313,7 @@ async function waitForServerReady(apiBase) {
 	return ready;
 }
 
-async function runFirstUserSetup(apiBase, frontendPort) {
+async function runFirstUserSetup(apiBase, uiUrl) {
 	let needsSetup = false;
 	try {
 		const res = await fetch(`${apiBase}/auth/needs-setup`);
@@ -294,7 +325,7 @@ async function runFirstUserSetup(apiBase, frontendPort) {
 
 	if (!interactiveAllowed()) {
 		clack.log.info(
-			`No users found. Open ${pc.cyan(`http://localhost:${frontendPort}/setup`)} to create your first account.`
+			`No users found. Open ${pc.cyan(`${uiUrl}/setup`)} to create your first account.`
 		);
 		return;
 	}
@@ -334,28 +365,57 @@ async function runFirstUserSetup(apiBase, frontendPort) {
 	}
 }
 
+// docker compose failures (port conflicts, daemon not running, etc.) must not
+// crash the process with a raw stack trace — that would abort serverStart()
+// before it ever reaches the first-user prompt, with no indication why.
+function runDockerComposeUp(cfg) {
+	try {
+		execSync('docker compose up --build -d', {
+			cwd: plumRoot,
+			stdio: 'inherit',
+			env: {
+				...process.env,
+				BACKEND_PORT: String(cfg.backendPort),
+				FRONTEND_PORT: String(cfg.frontendPort)
+			}
+		});
+		return true;
+	} catch {
+		clack.log.error(
+			`Docker failed to start the stack — see the output above for the cause.\n` +
+				`A common cause is another process already using port ${cfg.backendPort} or ${cfg.frontendPort}; ` +
+				`try ${pc.cyan('plum server reconfig')} to pick different ports.`
+		);
+		return false;
+	}
+}
+
 async function serverStart() {
 	clack.intro(pc.bgMagenta(pc.white('  🟣 Plum — Server  ')));
 	const cfg = await configureServer({ force: false });
 	applyServerConfig(cfg);
-	clack.log.info(`UI: ${pc.cyan(`http://localhost:${cfg.frontendPort}`)}`);
+	clack.log.info(`UI: ${pc.cyan(cfg.uiUrl)}`);
 
-	execSync('docker compose up --build -d', { cwd: plumRoot, stdio: 'inherit' });
+	if (!runDockerComposeUp(cfg)) {
+		clack.outro(pc.red('Plum did not start.'));
+		process.exitCode = 1;
+		return;
+	}
 
 	const apiBase = `http://127.0.0.1:${cfg.backendPort}`;
 	const ready = await waitForServerReady(apiBase);
 
 	if (ready) {
-		await runFirstUserSetup(apiBase, cfg.frontendPort);
+		await runFirstUserSetup(apiBase, cfg.uiUrl);
 	} else {
 		clack.log.warn(
 			`Could not confirm the backend is ready. Check ${pc.cyan('docker compose logs -f backend')}.\n` +
-				`Once it responds, open ${pc.cyan(`http://localhost:${cfg.frontendPort}/setup`)} to create your first account (if this is a fresh install).`
+				`Once it responds, open ${pc.cyan(`${cfg.uiUrl}/setup`)} to create your first account (if this is a fresh install).`
 		);
 	}
 
-	clack.log.info(`UI:  ${pc.cyan(`http://localhost:${cfg.frontendPort}`)}`);
-	clack.log.info(`API: ${pc.cyan(`http://localhost:${cfg.backendPort}`)}`);
+	clack.log.info(`UI:  ${pc.cyan(cfg.uiUrl)}`);
+	clack.log.info(`API: ${pc.cyan(cfg.apiUrl)}`);
 	clack.outro(pc.green('Plum is running. Use "plum server stop" to shut down.'));
 }
 
@@ -364,9 +424,13 @@ async function serverRestart() {
 	const { loadServerConfig } = serverConfigLib();
 	const cfg = loadServerConfig(process.cwd());
 	applyServerConfig(cfg);
-	clack.log.info(`UI: ${pc.cyan(`http://localhost:${cfg.frontendPort}`)}`);
+	clack.log.info(`UI: ${pc.cyan(cfg.uiUrl)}`);
 
-	execSync('docker compose up --build -d', { cwd: plumRoot, stdio: 'inherit' });
+	if (!runDockerComposeUp(cfg)) {
+		clack.outro(pc.red('Server did not restart.'));
+		process.exitCode = 1;
+		return;
+	}
 
 	const apiBase = `http://127.0.0.1:${cfg.backendPort}`;
 	const ready = await waitForServerReady(apiBase);
@@ -375,8 +439,8 @@ async function serverRestart() {
 			`Could not confirm the backend is ready. Check ${pc.cyan('docker compose logs -f backend')}.`
 		);
 	}
-	clack.log.info(`UI:  ${pc.cyan(`http://localhost:${cfg.frontendPort}`)}`);
-	clack.log.info(`API: ${pc.cyan(`http://localhost:${cfg.backendPort}`)}`);
+	clack.log.info(`UI:  ${pc.cyan(cfg.uiUrl)}`);
+	clack.log.info(`API: ${pc.cyan(cfg.apiUrl)}`);
 	clack.outro(pc.green('Server restarted.'));
 }
 
@@ -419,7 +483,7 @@ async function serverReconfig() {
 	const cfg = await configureServer({ force: true });
 	applyServerConfig(cfg);
 	clack.log.success("Saved. Run 'plum server start' to apply.");
-	clack.outro(`UI: ${pc.cyan(`http://localhost:${cfg.frontendPort}`)}`);
+	clack.outro(`UI: ${pc.cyan(cfg.uiUrl)}`);
 }
 
 /* -----------------------------------------------------
@@ -1110,6 +1174,12 @@ switch (command) {
 		console.log('    --headless <bool>  Run browsers headless (true/false)');
 		console.log('    --backend-port <n> Host port for the backend/API (default: 3001)');
 		console.log('    --frontend-port <n> Host port for the UI (default: 5173)');
+		console.log(
+			'    --api-url <url>    Public URL for the API (only if reverse-proxying; default: http://localhost:<backend-port>)'
+		);
+		console.log(
+			'    --ui-url <url>     Public URL for the UI (only if reverse-proxying; default: http://localhost:<frontend-port>)'
+		);
 		console.log('  server restart       Rebuild Docker images and restart the server (no prompts)');
 		console.log('  server stop          Stop the server (data preserved)');
 		console.log('  server reconfig      Re-enter server settings without starting');

package/docker-compose.yml

@@ -35,7 +35,7 @@ services:
   backend:
     build: ./backend
     ports:
-      - '3001:3001'
+      - '${BACKEND_PORT:-3001}:3001'
     environment:
       DATABASE_URL: 'postgresql://plum:plum@postgres:5432/plum'
     extra_hosts:
@@ -52,7 +52,7 @@ services:
   frontend:
     build: ./frontend
     ports:
-      - '5173:5173'
+      - '${FRONTEND_PORT:-5173}:5173'
     depends_on:
       - backend
     networks:

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

@@ -17,15 +17,31 @@
 
 import { API_BASE } from '$lib/constants';
 
+// A misconfigured or not-yet-routed API URL can accept a connection and never
+// respond, rather than refusing outright — a plain fetch() would then hang
+// forever with no error to catch. AUTH_TIMEOUT_MS bounds that so the UI always
+// resolves one way or another instead of leaving the page blank indefinitely.
+const AUTH_TIMEOUT_MS = 8000;
+
+async function fetchWithTimeout(url, options = {}) {
+	const controller = new AbortController();
+	const timer = setTimeout(() => controller.abort(), AUTH_TIMEOUT_MS);
+	try {
+		return await fetch(url, { ...options, signal: controller.signal });
+	} finally {
+		clearTimeout(timer);
+	}
+}
+
 export async function checkNeedsSetup() {
-	const res = await fetch(`${API_BASE}/auth/needs-setup`);
+	const res = await fetchWithTimeout(`${API_BASE}/auth/needs-setup`);
 	if (!res.ok) return false;
 	const data = await res.json();
 	return data.needsSetup;
 }
 
 export async function setup({ name, email, password }) {
-	const res = await fetch(`${API_BASE}/auth/setup`, {
+	const res = await fetchWithTimeout(`${API_BASE}/auth/setup`, {
 		method: 'POST',
 		headers: { 'Content-Type': 'application/json' },
 		body: JSON.stringify({ name, email, password })
@@ -36,7 +52,7 @@ export async function setup({ name, email, password }) {
 }
 
 export async function login({ email, password }) {
-	const res = await fetch(`${API_BASE}/auth/login`, {
+	const res = await fetchWithTimeout(`${API_BASE}/auth/login`, {
 		method: 'POST',
 		headers: { 'Content-Type': 'application/json' },
 		body: JSON.stringify({ email, password })
@@ -47,7 +63,7 @@ export async function login({ email, password }) {
 }
 
 export async function updateProfile({ token, name, email }) {
-	const res = await fetch(`${API_BASE}/auth/update-profile`, {
+	const res = await fetchWithTimeout(`${API_BASE}/auth/update-profile`, {
 		method: 'PUT',
 		headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` },
 		body: JSON.stringify({ name, email })
@@ -58,7 +74,7 @@ export async function updateProfile({ token, name, email }) {
 }
 
 export async function changePassword({ token, currentPassword, newPassword }) {
-	const res = await fetch(`${API_BASE}/auth/change-password`, {
+	const res = await fetchWithTimeout(`${API_BASE}/auth/change-password`, {
 		method: 'POST',
 		headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` },
 		body: JSON.stringify({ currentPassword, newPassword })

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

@@ -62,4 +62,18 @@
 		</PageShell>
 		<RunnerPanel />
 	{/if}
+{:else}
+	<div class="boot-loading">Loading…</div>
 {/if}
+
+<style>
+	.boot-loading {
+		min-height: 100vh;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		background: var(--bg);
+		color: var(--text-muted);
+		font-size: 0.875rem;
+	}
+</style>

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

@@ -60,7 +60,9 @@
 <svelte:head><title>Sign in — Plum</title></svelte:head>
 
 <div class="page" data-theme={$theme}>
-	{#if !checking}
+	{#if checking}
+		<p class="checking">Checking server…</p>
+	{:else}
 		<div class="card">
 			<div class="brand">
 				<span class="brand-serif">Pl</span><span class="brand-sans">um</span>
@@ -116,6 +118,11 @@
 		padding: 1rem;
 	}
 
+	.checking {
+		color: var(--text-muted);
+		font-size: 0.875rem;
+	}
+
 	.card {
 		width: 100%;
 		max-width: 380px;

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

@@ -65,7 +65,9 @@
 <svelte:head><title>Setup — Plum</title></svelte:head>
 
 <div class="page" data-theme={$theme}>
-	{#if !checking}
+	{#if checking}
+		<p class="checking">Checking server…</p>
+	{:else}
 		<div class="card">
 			<div class="brand">
 				<span class="brand-serif">Pl</span><span class="brand-sans">um</span>
@@ -136,6 +138,11 @@
 		padding: 1rem;
 	}
 
+	.checking {
+		color: var(--text-muted);
+		font-size: 0.875rem;
+	}
+
 	.card {
 		width: 100%;
 		max-width: 400px;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "plum-e2e",
-	"version": "2.5.1",
+	"version": "2.5.3",
 	"repository": {
 		"type": "git",
 		"url": "https://github.com/silverlunah/plum.git"