plum-e2e 2.3.0 → 2.4.0

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

@@ -29,7 +29,9 @@
 		fetchBackupConfig,
 		saveBackupConfig,
 		testBackupS3,
-		runBackupNow
+		runBackupNow,
+		fetchMcpConfig,
+		generateMcpKey as generateMcpKeyApi
 	} from '$lib/api/settings';
 	import {
 		fetchRunners,
@@ -54,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';
@@ -98,6 +100,13 @@
 	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 * * *',
@@ -157,6 +166,11 @@
 		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;
@@ -446,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 {
@@ -512,11 +555,35 @@
 		}
 	}
 
+	$: 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' }
@@ -994,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 }}>
@@ -1373,67 +1571,71 @@
 				</div>
 
 				<!-- Scheduled backup -->
-				<div class="card settings-card">
+				<div class="card settings-card" class:card-disabled={!s3Configured}>
 					<p class="card-title">Scheduled Backup</p>
 
-					<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
+					{#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>
-						</label>
-						<input
-							id="backup-cron"
-							type="text"
-							class="field-input field-input-mono"
-							bind:value={backupConfig.backupCron}
-							placeholder="0 2 * * *"
-						/>
-					</div>
+									<span class="toggle-thumb"></span>
+								</button>
+							</label>
+						</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="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>
 
-					<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 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}
@@ -1764,6 +1966,11 @@
 		gap: 0.5rem;
 	}
 
+	.card-disabled {
+		opacity: 0.5;
+		pointer-events: none;
+	}
+
 	/* ── Backup ── */
 	.backup-row {
 		display: flex;
@@ -2076,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;

package/package.json

@@ -1,11 +1,11 @@
 {
 	"name": "plum-e2e",
-	"version": "2.3.0",
+	"version": "2.4.0",
 	"repository": {
 		"type": "git",
 		"url": "https://github.com/silverlunah/plum.git"
 	},
-	"description": "A detached test automation environment that combines Playwright and Cucumber with a Svelte frontend and an Express backend. It allows users to trigger tests, monitor reports, and schedule test runs through an intuitive UI.",
+	"description": "A ready-to-use E2E test automation environment built on Playwright + Cucumber. Write tests in Gherkin, run them from the CLI or UI, view reports, schedule jobs, manage your entire test case repository, and get notified on Discord or Slack — all in one place.",
 	"main": "index.js",
 	"scripts": {
 		"init": "npm install && npm --prefix backend install && npm --prefix backend run init && npm --prefix frontend install && node bin/scaffold-tests.js",