plum-e2e 2.2.0 → 2.4.0

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

@@ -25,7 +25,13 @@
 		exportBackup,
 		importBackup,
 		fetchIntegrations,
-		saveIntegrations
+		saveIntegrations,
+		fetchBackupConfig,
+		saveBackupConfig,
+		testBackupS3,
+		runBackupNow,
+		fetchMcpConfig,
+		generateMcpKey as generateMcpKeyApi
 	} from '$lib/api/settings';
 	import {
 		fetchRunners,
@@ -50,7 +56,7 @@
 	import Toast from '$lib/components/ui/Toast.svelte';
 	import ConfirmModal from '$lib/components/ui/ConfirmModal.svelte';
 
-	/** @type {'project' | 'runners' | 'repository' | 'integrations' | 'account' | 'users' | 'backup'} */
+	/** @type {'project' | 'runners' | 'repository' | 'integrations' | 'mcp' | 'account' | 'users' | 'backup'} */
 	let section =
 		(typeof sessionStorage !== 'undefined' && sessionStorage.getItem('plum:settings:section')) ||
 		'project';
@@ -94,6 +100,32 @@
 	let integrations = { discordWebhookUrl: '', slackWebhookUrl: '', notifyPublicUrl: '' };
 	let integrationsSaving = false;
 
+	let mcpKey = '';
+	let mcpKeySet = false;
+	let mcpShowKey = false;
+	let mcpGenerating = false;
+	let mcpKeyCopied = false;
+	let mcpSnippetCopied = false;
+
+	let backupConfig = {
+		backupEnabled: false,
+		backupCron: '0 2 * * *',
+		backupS3Endpoint: '',
+		backupS3Region: '',
+		backupS3Bucket: '',
+		backupS3AccessKey: '',
+		backupS3SecretKey: '',
+		backupS3Prefix: ''
+	};
+	let backupConfigSaving = false;
+	let backupS3SecretKeySet = false;
+	let backupTestingS3 = false;
+	let backupRunningNow = false;
+	let backupS3TestResult = null;
+	let backupS3TestMessage = '';
+	let backupLastRunAt = null;
+	let backupLastStatus = '';
+
 	let runners = [];
 	let runnerForm = { name: '', url: '', token: '', browser: 'chromium' };
 	let runnerFormError = '';
@@ -134,6 +166,27 @@
 		try {
 			integrations = await fetchIntegrations();
 		} catch {}
+		try {
+			const mcp = await fetchMcpConfig();
+			mcpKeySet = mcp.mcpKeySet;
+			mcpKey = mcp.mcpKey;
+		} catch {}
+		try {
+			const bc = await fetchBackupConfig();
+			backupS3SecretKeySet = bc.backupS3SecretKeySet;
+			backupLastRunAt = bc.backupLastRunAt;
+			backupLastStatus = bc.backupLastStatus;
+			backupConfig = {
+				backupEnabled: bc.backupEnabled,
+				backupCron: bc.backupCron,
+				backupS3Endpoint: bc.backupS3Endpoint,
+				backupS3Region: bc.backupS3Region,
+				backupS3Bucket: bc.backupS3Bucket,
+				backupS3AccessKey: bc.backupS3AccessKey,
+				backupS3SecretKey: '',
+				backupS3Prefix: bc.backupS3Prefix
+			};
+		} catch {}
 		if ($auth.user) {
 			profileForm = { name: $auth.user.name, email: $auth.user.email };
 		}
@@ -407,6 +460,35 @@
 		goto('/login');
 	}
 
+	async function handleGenerateMcpKey() {
+		mcpGenerating = true;
+		try {
+			const result = await generateMcpKeyApi();
+			mcpKey = result.mcpKey;
+			mcpKeySet = true;
+			mcpShowKey = true;
+			showToast('success', 'MCP key generated.');
+		} catch {
+			showToast('error', 'Failed to generate MCP key.');
+		} finally {
+			mcpGenerating = false;
+		}
+	}
+
+	function handleCopyMcpKey() {
+		navigator.clipboard.writeText(mcpKey).then(() => {
+			mcpKeyCopied = true;
+			setTimeout(() => (mcpKeyCopied = false), 1500);
+		});
+	}
+
+	function handleCopyMcpSnippet() {
+		navigator.clipboard.writeText(mcpConfigSnippet).then(() => {
+			mcpSnippetCopied = true;
+			setTimeout(() => (mcpSnippetCopied = false), 1500);
+		});
+	}
+
 	async function handleSaveIntegrations() {
 		integrationsSaving = true;
 		try {
@@ -419,11 +501,89 @@
 		}
 	}
 
+	async function handleSaveBackupConfig() {
+		backupConfigSaving = true;
+		try {
+			const payload = { ...backupConfig };
+			if (!payload.backupS3SecretKey) delete payload.backupS3SecretKey;
+			const result = await saveBackupConfig(payload);
+			if (result.error) throw new Error(result.error);
+			if (backupConfig.backupS3SecretKey) backupS3SecretKeySet = true;
+			backupConfig = { ...backupConfig, backupS3SecretKey: '' };
+			showToast('success', 'Backup configuration saved.');
+		} catch (e) {
+			showToast('error', e.message || 'Failed to save backup configuration.');
+		} finally {
+			backupConfigSaving = false;
+		}
+	}
+
+	async function handleTestS3() {
+		backupTestingS3 = true;
+		backupS3TestResult = null;
+		backupS3TestMessage = '';
+		try {
+			const result = await testBackupS3(backupConfig);
+			if (result.error) throw new Error(result.error);
+			backupS3TestResult = 'success';
+			backupS3TestMessage = 'Connection successful.';
+		} catch (e) {
+			backupS3TestResult = 'error';
+			backupS3TestMessage = e.message || 'Connection failed.';
+		} finally {
+			backupTestingS3 = false;
+		}
+	}
+
+	async function handleRunBackupNow() {
+		backupRunningNow = true;
+		try {
+			const result = await runBackupNow();
+			if (result.error) throw new Error(result.error);
+			backupLastRunAt = result.lastRunAt;
+			backupLastStatus = result.lastStatus ?? '';
+			showToast('success', 'Backup uploaded to S3 successfully.');
+		} catch (e) {
+			showToast('error', e.message || 'Backup failed. Check your S3 configuration.');
+			const bc = await fetchBackupConfig().catch(() => null);
+			if (bc) {
+				backupLastRunAt = bc.backupLastRunAt;
+				backupLastStatus = bc.backupLastStatus;
+			}
+		} finally {
+			backupRunningNow = false;
+		}
+	}
+
+	$: s3Configured = !!(
+		backupConfig.backupS3Bucket &&
+		backupConfig.backupS3AccessKey &&
+		backupS3SecretKeySet
+	);
+
+	$: mcpConfigSnippet = JSON.stringify(
+		{
+			mcpServers: {
+				plum: {
+					command: 'plum',
+					args: ['mcp'],
+					env: {
+						PLUM_API_URL: 'http://localhost:3001',
+						PLUM_API_KEY: mcpKey
+					}
+				}
+			}
+		},
+		null,
+		2
+	);
+
 	$: navItems = [
 		{ id: 'project', label: 'Project' },
 		{ id: 'runners', label: 'Runners' },
 		{ id: 'repository', label: 'Repository' },
 		{ id: 'integrations', label: 'Integrations' },
+		{ id: 'mcp', label: 'MCP' },
 		{ id: 'account', label: 'Account' },
 		...($auth.user?.role === 'admin' ? [{ id: 'users', label: 'Users' }] : []),
 		{ id: 'backup', label: 'Backup' }
@@ -901,6 +1061,137 @@
 				</div>
 			</div>
 
+			<!-- MCP -->
+		{:else if section === 'mcp'}
+			<div class="content-section" transition:fly={{ y: 6, duration: 180 }}>
+				<div class="content-header">
+					<h2>MCP Integration</h2>
+					<p class="content-desc">
+						Generate an API key for any MCP-compatible AI client — Claude, Cursor, Windsurf, and
+						others.
+					</p>
+				</div>
+
+				<div class="card settings-card">
+					<p class="card-title">API Key</p>
+
+					{#if !mcpKeySet}
+						<p class="content-desc">No key generated yet.</p>
+						<div class="card-footer">
+							<Button on:click={handleGenerateMcpKey} disabled={mcpGenerating}>
+								{mcpGenerating ? 'Generating…' : 'Generate Key'}
+							</Button>
+						</div>
+					{:else}
+						<div class="mcp-key-row">
+							<input
+								type={mcpShowKey ? 'text' : 'password'}
+								class="field-input mcp-key-input"
+								value={mcpKey}
+								readonly
+								spellcheck="false"
+								autocomplete="off"
+							/>
+							<button
+								class="icon-btn"
+								title={mcpShowKey ? 'Hide key' : 'Show key'}
+								on:click={() => (mcpShowKey = !mcpShowKey)}
+							>
+								{#if mcpShowKey}
+									<svg
+										width="14"
+										height="14"
+										viewBox="0 0 24 24"
+										fill="none"
+										stroke="currentColor"
+										stroke-width="2"
+										stroke-linecap="round"
+										stroke-linejoin="round"
+									>
+										<path
+											d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94"
+										/><path
+											d="M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19"
+										/><line x1="1" y1="1" x2="23" y2="23" />
+									</svg>
+								{:else}
+									<svg
+										width="14"
+										height="14"
+										viewBox="0 0 24 24"
+										fill="none"
+										stroke="currentColor"
+										stroke-width="2"
+										stroke-linecap="round"
+										stroke-linejoin="round"
+									>
+										<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" /><circle
+											cx="12"
+											cy="12"
+											r="3"
+										/>
+									</svg>
+								{/if}
+							</button>
+							<button class="icon-btn" title="Copy key" on:click={handleCopyMcpKey}>
+								{#if mcpKeyCopied}
+									<svg
+										width="14"
+										height="14"
+										viewBox="0 0 24 24"
+										fill="none"
+										stroke="currentColor"
+										stroke-width="2"
+										stroke-linecap="round"
+										stroke-linejoin="round"
+									>
+										<polyline points="20 6 9 17 4 12" />
+									</svg>
+								{:else}
+									<svg
+										width="14"
+										height="14"
+										viewBox="0 0 24 24"
+										fill="none"
+										stroke="currentColor"
+										stroke-width="2"
+										stroke-linecap="round"
+										stroke-linejoin="round"
+									>
+										<rect x="9" y="9" width="13" height="13" rx="2" /><path
+											d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"
+										/>
+									</svg>
+								{/if}
+							</button>
+						</div>
+						<p class="mcp-regen-note">Regenerating invalidates the existing key immediately.</p>
+						<div class="card-footer">
+							<Button variant="ghost" on:click={handleGenerateMcpKey} disabled={mcpGenerating}>
+								{mcpGenerating ? 'Generating…' : 'Regenerate Key'}
+							</Button>
+						</div>
+					{/if}
+				</div>
+
+				{#if mcpKeySet}
+					<div class="card settings-card">
+						<p class="card-title">Config Snippet</p>
+						<p class="content-desc">
+							Add this to your MCP client's config file (e.g.
+							<code class="code-sample">claude_desktop_config.json</code>, Cursor MCP settings,
+							etc.).
+						</p>
+						<pre class="mcp-snippet">{mcpConfigSnippet}</pre>
+						<div class="card-footer">
+							<Button variant="ghost" on:click={handleCopyMcpSnippet}>
+								{mcpSnippetCopied ? 'Copied!' : 'Copy Config'}
+							</Button>
+						</div>
+					</div>
+				{/if}
+			</div>
+
 			<!-- ACCOUNT -->
 		{:else if section === 'account'}
 			<div class="content-section" transition:fly={{ y: 6, duration: 180 }}>
@@ -1108,21 +1399,23 @@
 				<div class="content-header">
 					<h2>Backup</h2>
 					<p class="content-desc">
-						Export all scheduled tests, report history, and project settings to a JSON file. Import
-						to restore after a data loss or migration.
+						Export your test cases, schedules, users, and project settings. Automate uploads to any
+						S3-compatible storage — Cloudflare R2, Backblaze B2, AWS S3, or MinIO.
 					</p>
 				</div>
 
+				<!-- Manual export / import -->
 				<div class="card settings-card">
+					<p class="card-title">Manual Backup</p>
 					<div class="backup-row">
 						<div class="backup-block">
 							<p class="backup-block-title">Export</p>
 							<p class="backup-block-desc">
-								Downloads a <code>.json</code> file containing all cron jobs, report metadata, and project
-								settings. Report detail files are stored on disk and not included.
+								Downloads a <code>.json</code> file with all cron jobs, test cases, test runs, users,
+								runners, and project settings.
 							</p>
 							<Button on:click={handleExport} disabled={exporting}>
-								{exporting ? 'Exporting…' : 'Export Backup'}
+								{exporting ? 'Exporting…' : 'Export JSON'}
 							</Button>
 						</div>
 
@@ -1131,8 +1424,8 @@
 						<div class="backup-block">
 							<p class="backup-block-title">Import</p>
 							<p class="backup-block-desc">
-								Restores cron jobs, report metadata, and project settings from a previously exported
-								backup. Existing records with the same identifier are overwritten.
+								Restores all data from a previously exported backup. Existing records are
+								overwritten. Cron jobs are re-scheduled after import.
 							</p>
 							<div class="import-row">
 								<label class="file-label">
@@ -1151,6 +1444,198 @@
 							</div>
 						</div>
 					</div>
+					<p class="backup-disclaimer">
+						Reports are not included in backups. To back up report history, run
+						<code>pg_dump</code> directly on the PostgreSQL volume.
+					</p>
+				</div>
+
+				<!-- S3 cloud backup -->
+				<div class="card settings-card">
+					<p class="card-title">S3 Storage</p>
+					<p class="backup-block-desc" style="margin-bottom: 1.25rem;">
+						Works with any S3-compatible provider — Cloudflare R2, Backblaze B2, AWS S3, or MinIO.
+						Leave <strong>Endpoint URL</strong> empty for AWS S3.
+					</p>
+
+					<div class="field-row">
+						<div class="field">
+							<label class="field-label" for="s3-endpoint">
+								<span>Endpoint URL</span>
+								<span class="field-hint">Leave blank for AWS S3</span>
+							</label>
+							<input
+								id="s3-endpoint"
+								type="url"
+								class="field-input"
+								bind:value={backupConfig.backupS3Endpoint}
+								placeholder="https://account.r2.cloudflarestorage.com"
+							/>
+						</div>
+						<div class="field">
+							<label class="field-label" for="s3-region">
+								<span>Region</span>
+								<span class="field-hint">Use <code>auto</code> for Cloudflare R2</span>
+							</label>
+							<input
+								id="s3-region"
+								type="text"
+								class="field-input"
+								bind:value={backupConfig.backupS3Region}
+								placeholder="us-east-1"
+							/>
+						</div>
+					</div>
+
+					<div class="field-row">
+						<div class="field">
+							<label class="field-label" for="s3-bucket">
+								<span>Bucket</span>
+							</label>
+							<input
+								id="s3-bucket"
+								type="text"
+								class="field-input"
+								bind:value={backupConfig.backupS3Bucket}
+								placeholder="my-plum-backups"
+							/>
+						</div>
+						<div class="field">
+							<label class="field-label" for="s3-prefix">
+								<span>Path Prefix</span>
+								<span class="field-hint">Optional folder inside the bucket</span>
+							</label>
+							<input
+								id="s3-prefix"
+								type="text"
+								class="field-input"
+								bind:value={backupConfig.backupS3Prefix}
+								placeholder="plum/"
+							/>
+						</div>
+					</div>
+
+					<div class="field-row">
+						<div class="field">
+							<label class="field-label" for="s3-access-key">
+								<span>Access Key ID</span>
+							</label>
+							<input
+								id="s3-access-key"
+								type="text"
+								class="field-input"
+								bind:value={backupConfig.backupS3AccessKey}
+								placeholder="AKIAIOSFODNN7EXAMPLE"
+								autocomplete="off"
+							/>
+						</div>
+						<div class="field">
+							<label class="field-label" for="s3-secret-key">
+								<span>Secret Access Key</span>
+								<span class="field-hint"
+									>{backupS3SecretKeySet
+										? 'A key is already saved — leave blank to keep it'
+										: 'Required'}</span
+								>
+							</label>
+							<input
+								id="s3-secret-key"
+								type="password"
+								class="field-input"
+								bind:value={backupConfig.backupS3SecretKey}
+								placeholder={backupS3SecretKeySet ? '••••••••' : 'Enter secret key'}
+								autocomplete="new-password"
+							/>
+						</div>
+					</div>
+
+					<div class="backup-actions">
+						<Button variant="ghost" on:click={handleTestS3} disabled={backupTestingS3}>
+							{backupTestingS3 ? 'Testing…' : 'Test Connection'}
+						</Button>
+						<Button on:click={handleSaveBackupConfig} disabled={backupConfigSaving}>
+							{backupConfigSaving ? 'Saving…' : 'Save S3 Config'}
+						</Button>
+					</div>
+
+					{#if backupS3TestResult}
+						<p
+							class="s3-test-result"
+							class:s3-test-success={backupS3TestResult === 'success'}
+							class:s3-test-error={backupS3TestResult === 'error'}
+						>
+							{backupS3TestResult === 'success' ? '✓' : '✗'}
+							{backupS3TestMessage}
+						</p>
+					{/if}
+				</div>
+
+				<!-- Scheduled backup -->
+				<div class="card settings-card" class:card-disabled={!s3Configured}>
+					<p class="card-title">Scheduled Backup</p>
+
+					{#if !s3Configured}
+						<p class="backup-block-desc">Configure S3 storage above to enable scheduled backups.</p>
+					{:else}
+						<div class="field">
+							<label class="field-label backup-toggle-label" for="backup-enabled">
+								<span>Enable scheduled backup</span>
+								<button
+									id="backup-enabled"
+									class="toggle-btn"
+									class:active={backupConfig.backupEnabled}
+									on:click={() => (backupConfig.backupEnabled = !backupConfig.backupEnabled)}
+									role="switch"
+									aria-checked={backupConfig.backupEnabled}
+								>
+									<span class="toggle-thumb"></span>
+								</button>
+							</label>
+						</div>
+
+						<div class="field">
+							<label class="field-label" for="backup-cron">
+								<span>Cron Expression</span>
+								<span class="field-hint">
+									5-field cron — e.g. <code>0 2 * * *</code> = daily at 2 AM.
+									<a href="https://crontab.guru" target="_blank" rel="noopener noreferrer"
+										>Test at crontab.guru ↗</a
+									>
+								</span>
+							</label>
+							<input
+								id="backup-cron"
+								type="text"
+								class="field-input field-input-mono"
+								bind:value={backupConfig.backupCron}
+								placeholder="0 2 * * *"
+							/>
+						</div>
+
+						{#if backupLastRunAt}
+							<p class="backup-last-run">
+								Last backup: {new Date(backupLastRunAt).toLocaleString()} —
+								{#if backupLastStatus?.startsWith('success:')}
+									<span class="status-success"
+										>uploaded to {backupLastStatus.replace('success:', '')}</span
+									>
+								{:else if backupLastStatus?.startsWith('error:')}
+									<span class="status-error">{backupLastStatus.replace('error:', '')}</span>
+								{:else}
+									<span>{backupLastStatus}</span>
+								{/if}
+							</p>
+						{/if}
+
+						<div class="backup-actions">
+							<Button variant="ghost" on:click={handleRunBackupNow} disabled={backupRunningNow}>
+								{backupRunningNow ? 'Uploading…' : 'Upload to S3 Now'}
+							</Button>
+							<Button on:click={handleSaveBackupConfig} disabled={backupConfigSaving}>
+								{backupConfigSaving ? 'Saving…' : 'Save Schedule'}
+							</Button>
+						</div>
+					{/if}
 				</div>
 			</div>
 		{/if}
@@ -1481,6 +1966,11 @@
 		gap: 0.5rem;
 	}
 
+	.card-disabled {
+		opacity: 0.5;
+		pointer-events: none;
+	}
+
 	/* ── Backup ── */
 	.backup-row {
 		display: flex;
@@ -1520,6 +2010,96 @@
 		border-radius: 3px;
 	}
 
+	.backup-disclaimer {
+		margin-top: 1rem;
+		padding: 0.625rem 0.875rem;
+		background: var(--bg-subtle);
+		border: 1px solid var(--border);
+		border-radius: var(--radius-sm);
+		font-size: 0.8125rem;
+		color: var(--text-muted);
+		line-height: 1.5;
+	}
+
+	.backup-actions {
+		display: flex;
+		gap: 0.625rem;
+		margin-top: 0.25rem;
+		flex-wrap: wrap;
+	}
+
+	.s3-test-result {
+		margin-top: 0.625rem;
+		font-size: 0.8125rem;
+		font-weight: 500;
+	}
+
+	.s3-test-success {
+		color: var(--pass);
+	}
+
+	.s3-test-error {
+		color: var(--fail);
+	}
+
+	.backup-last-run {
+		font-size: 0.8125rem;
+		color: var(--text-muted);
+		margin-top: 0.25rem;
+	}
+
+	.status-success {
+		color: var(--pass);
+	}
+
+	.status-error {
+		color: var(--fail);
+	}
+
+	.backup-toggle-label {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		cursor: default;
+	}
+
+	.toggle-btn {
+		flex-shrink: 0;
+		width: 40px;
+		height: 22px;
+		border-radius: 100px;
+		border: none;
+		background: var(--border);
+		cursor: pointer;
+		position: relative;
+		transition: background 0.2s var(--ease-out);
+	}
+
+	.toggle-btn.active {
+		background: var(--accent);
+	}
+
+	.toggle-btn .toggle-thumb {
+		position: absolute;
+		top: 3px;
+		left: 3px;
+		width: 16px;
+		height: 16px;
+		border-radius: 50%;
+		background: white;
+		transition: transform 0.2s var(--ease-out);
+		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+	}
+
+	.toggle-btn.active .toggle-thumb {
+		transform: translateX(18px);
+	}
+
+	.field-input-mono {
+		font-family: 'JetBrains Mono', monospace;
+		font-size: 0.8125rem;
+	}
+
 	.import-row {
 		display: flex;
 		align-items: center;
@@ -1703,6 +2283,39 @@
 		flex-shrink: 0;
 	}
 
+	/* ── MCP ── */
+	.mcp-key-row {
+		display: flex;
+		align-items: center;
+		gap: 0.375rem;
+	}
+
+	.mcp-key-input {
+		flex: 1;
+		font-family: 'JetBrains Mono', monospace;
+		font-size: 0.8125rem;
+		min-width: 0;
+	}
+
+	.mcp-regen-note {
+		font-size: 0.78rem;
+		color: var(--text-muted);
+	}
+
+	.mcp-snippet {
+		font-family: 'JetBrains Mono', monospace;
+		font-size: 0.78rem;
+		background: var(--bg-subtle);
+		border: 1px solid var(--border);
+		border-radius: var(--radius-sm);
+		padding: 0.875rem 1rem;
+		white-space: pre;
+		overflow-x: auto;
+		color: var(--text);
+		line-height: 1.6;
+		margin: 0;
+	}
+
 	/* reuse icon-btn from other pages */
 	.icon-btn {
 		display: flex;