@alliance-droid/status-feedback-system 1.3.0 → 1.3.2

package/dist/components/DevFeedback.svelte

@@ -1,15 +1,24 @@
 <script lang="ts">
 	import { onMount, onDestroy } from 'svelte';
-	import { createStatusClient } from '../api.js';
+	import { createStatusClient, type StatusClient } from '../api.js';
 	import {
 		Card,
 		Button,
 		Input,
 		Textarea,
-		Select,
 		Badge,
 		Spinner,
 	} from '@alliance-droid/svelte-component-library';
+	import DevContextMenu from './dev/DevContextMenu.svelte';
+	import DevOnboardingToast from './dev/DevOnboardingToast.svelte';
+	import { captureScreenshot } from './dev/screenshot.js';
+	import {
+		detectEnvironment,
+		getEnvironmentName,
+		getEnvVar,
+		getElementSelector,
+		getElementHtml,
+	} from './dev/environment.js';
 
 	interface Props {
 		apiUrl: string;
@@ -36,44 +45,22 @@
 		userEmail,
 	}: Props = $props();
 
-	let client = $derived(createStatusClient({ apiUrl, apiKey }));
+	// --- Client (lazy, stable) ---
+	let client: StatusClient | null = $state(null);
+	let lastApiUrl = '';
+	let lastApiKey = '';
 
-	// --- Environment gate ---
-	let isEnabled = $state(false);
-
-	function getEnvVar(key: string): string | undefined {
-		try {
-			// Works in Vite/SvelteKit apps
-			const env = (globalThis as Record<string, unknown>).__sveltekit_env as Record<string, string> | undefined;
-			if (env?.[key]) return env[key];
-		} catch { /* ignore */ }
-		try {
-			// Window-injected env (common pattern)
-			const win = window as unknown as Record<string, unknown>;
-			const env = win.__ENV as Record<string, string> | undefined;
-			if (env?.[key]) return env[key];
-		} catch { /* ignore */ }
-		return undefined;
+	function getClient(): StatusClient {
+		if (!client || lastApiUrl !== apiUrl || lastApiKey !== apiKey) {
+			client = createStatusClient({ apiUrl, apiKey });
+			lastApiUrl = apiUrl;
+			lastApiKey = apiKey;
+		}
+		return client;
 	}
 
-	function detectEnvironment(): boolean {
-		if (enabled !== undefined) return enabled;
-		if (typeof window === 'undefined') return false;
-
-		// Check explicit env var
-		const feedbackEnabled = getEnvVar('PUBLIC_FEEDBACK_ENABLED');
-		if (feedbackEnabled === 'true') return true;
-		if (feedbackEnabled === 'false') return false;
-
-		// Vercel environment
-		const vercelEnv = getEnvVar('VERCEL_ENV');
-		if (vercelEnv === 'production') return false;
-		if (vercelEnv) return true;
-
-		// Localhost fallback
-		const host = window.location.hostname;
-		return host === 'localhost' || host === '127.0.0.1' || host.endsWith('.local');
-	}
+	// --- Environment gate ---
+	let isEnabled = $state(false);
 
 	// --- State ---
 	let menuOpen = $state(false);
@@ -90,7 +77,8 @@
 	let submitResult = $state<'success' | 'error' | null>(null);
 
 	let screenshotData = $state<string | null>(null);
-	let capturingScreenshot = $state(false);
+	let capturingScreenshot_ = $state(false);
+	let screenshotFailed = $state(false);
 
 	// Drag state
 	let isDragging = $state(false);
@@ -130,7 +118,7 @@
 	const ONBOARDING_KEY = 'sf-devfeedback-onboarded';
 
 	onMount(() => {
-		isEnabled = detectEnvironment();
+		isEnabled = detectEnvironment(enabled);
 		if (!isEnabled) return;
 
 		// Hook console.error
@@ -143,11 +131,8 @@
 
 		// Ctrl+Right-click handler
 		document.addEventListener('contextmenu', handleContextMenu);
-		// Close menu on any other click
 		document.addEventListener('click', closeMenu);
-		// Escape closes everything
 		document.addEventListener('keydown', handleKeydown);
-		// Drag listeners (on document so drag continues outside modal)
 		document.addEventListener('mousemove', handleDragMove);
 		document.addEventListener('mouseup', handleDragEnd);
 
@@ -170,7 +155,6 @@
 	});
 
 	function handleContextMenu(e: MouseEvent) {
-		// Only trigger on Ctrl+Right-click
 		if (!e.ctrlKey) return;
 		e.preventDefault();
 		e.stopPropagation();
@@ -194,54 +178,12 @@
 		}
 	}
 
-	function getElementSelector(el: HTMLElement | null): string {
-		if (!el) return '';
-		const parts: string[] = [];
-		let current: HTMLElement | null = el;
-		while (current && current !== document.body) {
-			if (!current.tagName) { current = current.parentElement; continue; }
-			let selector = current.tagName.toLowerCase();
-			if (current.id) {
-				selector += `#${current.id}`;
-				parts.unshift(selector);
-				break;
-			}
-			if (current.className && typeof current.className === 'string') {
-				const classes = current.className.trim().split(/\s+/).slice(0, 2).join('.');
-				if (classes) selector += `.${classes}`;
-			}
-			parts.unshift(selector);
-			current = current.parentElement;
-		}
-		return parts.join(' > ');
-	}
-
-	function getElementHtml(el: HTMLElement | null): string {
-		if (!el) return '';
-		const html = el.outerHTML;
-		return html.length > 500 ? html.slice(0, 500) + '...' : html;
-	}
-
-	async function captureScreenshot() {
-		capturingScreenshot = true;
-		try {
-			const html2canvas = (await import('html2canvas')).default;
-			const canvas = await html2canvas(document.body, {
-				logging: false,
-				useCORS: true,
-				scale: 1,
-				width: window.innerWidth,
-				height: window.innerHeight,
-				windowWidth: window.innerWidth,
-				windowHeight: window.innerHeight,
-			});
-			screenshotData = canvas.toDataURL('image/png');
-		} catch {
-			// Screenshot capture can fail in cross-origin iframes or restricted contexts
-			screenshotData = null;
-		} finally {
-			capturingScreenshot = false;
-		}
+	async function doScreenshot() {
+		capturingScreenshot_ = true;
+		screenshotFailed = false;
+		screenshotData = await captureScreenshot();
+		if (!screenshotData) screenshotFailed = true;
+		capturingScreenshot_ = false;
 	}
 
 	function openForm(type: 'bug' | 'feature') {
@@ -252,14 +194,12 @@
 		submitResult = null;
 		menuOpen = false;
 		formOpen = true;
-		// Reset drag position (center on screen)
 		modalPositioned = false;
 		modalX = 0;
 		modalY = 0;
 
-		// Auto-capture screenshot for bugs
 		if (type === 'bug') {
-			captureScreenshot();
+			doScreenshot();
 		} else {
 			screenshotData = null;
 		}
@@ -292,7 +232,6 @@
 				metadata.screenshot = screenshotData;
 			}
 
-			// Deployment info
 			const gitCommit = getEnvVar('VERCEL_GIT_COMMIT_SHA');
 			const gitBranch = getEnvVar('VERCEL_GIT_COMMIT_REF');
 			const deployUrl = getEnvVar('VERCEL_URL');
@@ -300,10 +239,10 @@
 			if (gitBranch) metadata.gitBranch = gitBranch;
 			if (deployUrl) metadata.deploymentUrl = deployUrl;
 
-			await client.submitFeedback({
+			await getClient().submitFeedback({
 				title: formTitle.trim() || undefined,
 				message: formMessage.trim(),
-				category: formType === 'bug' ? 'Bug' : 'Feature Request',
+				category: formType === 'bug' ? 'bug' : 'feature',
 				email: formEmail.trim() || undefined,
 				pageUrl: window.location.href,
 				metadata,
@@ -322,57 +261,28 @@
 		}
 	}
 
-	function getEnvironmentName(): string {
-		const vercelEnv = getEnvVar('VERCEL_ENV');
-		if (vercelEnv) return vercelEnv;
-		if (window.location.hostname === 'localhost') return 'development';
-		return 'unknown';
-	}
-
 	function openBoard() {
 		if (!boardUrl) return;
 		menuOpen = false;
 		window.open(boardUrl, '_blank');
 	}
-
-	// Ensure menu stays in viewport
-	let adjustedX = $derived(Math.min(menuX, window.innerWidth - 200));
-	let adjustedY = $derived(Math.min(menuY, window.innerHeight - 160));
 </script>
 
 {#if isEnabled}
 	<!-- Context menu -->
 	{#if menuOpen}
-		<!-- svelte-ignore a11y_no_static_element_interactions — context menu needs mousedown to prevent close-on-click -->
-		<div
-			class="fixed z-[99999]"
-			style="left: {adjustedX}px; top: {adjustedY}px;"
-			onmousedown={(e) => e.stopPropagation()}
-		>
-			<div class="sf-ctx-menu">
-				<button class="sf-ctx-item" onclick={() => openForm('bug')}>
-					<i class="fa-solid fa-bug text-red-400"></i>
-					Report Bug
-				</button>
-				<button class="sf-ctx-item" onclick={() => openForm('feature')}>
-					<i class="fa-solid fa-lightbulb text-amber-400"></i>
-					Request Feature
-				</button>
-				{#if boardUrl}
-					<div class="sf-ctx-divider">
-						<button class="sf-ctx-item sf-ctx-item-secondary" onclick={openBoard}>
-							<i class="fa-solid fa-clipboard-list"></i>
-							View Open Issues
-						</button>
-					</div>
-				{/if}
-			</div>
-		</div>
+		<DevContextMenu
+			x={menuX}
+			y={menuY}
+			{boardUrl}
+			onReportBug={() => openForm('bug')}
+			onRequestFeature={() => openForm('feature')}
+			onViewBoard={boardUrl ? openBoard : undefined}
+		/>
 	{/if}
 
 	<!-- Form modal -->
 	{#if formOpen}
-		<!-- No backdrop — modal floats freely over the page -->
 		<div
 			class="sf-modal fixed z-[99998] w-full max-w-lg flex flex-col"
 			style={modalPositioned
@@ -381,7 +291,7 @@
 			}
 		>
 			<Card variant="elevated" padding="none" class="flex flex-col max-h-[calc(100vh-2rem)] overflow-hidden">
-				<!-- Header (fixed) -->
+				<!-- Header (draggable) -->
 				<!-- svelte-ignore a11y_no_static_element_interactions — drag handle needs mousedown -->
 				<div
 					class="flex items-center justify-between px-5 py-4 border-b border-border shrink-0 select-none"
@@ -409,208 +319,138 @@
 
 				<!-- Body (scrollable) -->
 				<div class="p-5 space-y-4 overflow-y-auto">
-						{#if submitResult === 'success'}
-							<div class="text-center py-6">
-								<i class="fa-solid fa-check-circle text-3xl text-green-400"></i>
-								<p class="mt-2 font-semibold">Submitted!</p>
-								<p class="text-sm text-foreground-secondary">
-									{formType === 'bug' ? "We'll look into this." : "Thanks for the suggestion!"}
-								</p>
-							</div>
-						{:else}
-							<Input
-								bind:value={formTitle}
-								placeholder={formType === 'bug' ? 'Brief summary of the bug' : 'Feature title'}
-								label="Title"
-							/>
-
-							<Textarea
-								value={formMessage} oninput={(e) => (formMessage = (e.currentTarget as HTMLTextAreaElement).value)}
-								placeholder={formType === 'bug'
-									? 'What happened? What did you expect?'
-									: 'Describe the feature you\'d like...'}
-								label={formType === 'bug' ? 'Description' : 'Details'}
-								rows={4}
-							/>
-
-							<Input
-								type="email"
-								bind:value={formEmail}
-								placeholder="your@email.com (optional)"
-								label="Email"
-							/>
-
-							<!-- Auto-captured context (bugs only) -->
-							{#if formType === 'bug'}
-								<div class="space-y-2">
-									<p class="text-xs font-semibold text-foreground-tertiary uppercase tracking-wide">Auto-captured</p>
-									<div class="flex flex-wrap gap-1.5">
-										<Badge variant="info" size="sm">
-											<i class="fa-solid fa-route mr-1"></i>
-											{window.location.pathname}
+					{#if submitResult === 'success'}
+						<div class="text-center py-6">
+							<i class="fa-solid fa-check-circle text-3xl text-green-400"></i>
+							<p class="mt-2 font-semibold">Submitted!</p>
+							<p class="text-sm text-foreground-secondary">
+								{formType === 'bug' ? "We'll look into this." : "Thanks for the suggestion!"}
+							</p>
+						</div>
+					{:else}
+						<Input
+							bind:value={formTitle}
+							placeholder={formType === 'bug' ? 'Brief summary of the bug' : 'Feature title'}
+							label="Title"
+						/>
+
+						<Textarea
+							value={formMessage} oninput={(e) => (formMessage = (e.currentTarget as HTMLTextAreaElement).value)}
+							placeholder={formType === 'bug'
+								? 'What happened? What did you expect?'
+								: 'Describe the feature you\'d like...'}
+							label={formType === 'bug' ? 'Description' : 'Details'}
+							rows={4}
+						/>
+
+						<Input
+							type="email"
+							bind:value={formEmail}
+							placeholder="your@email.com (optional)"
+							label="Email"
+						/>
+
+						<!-- Auto-captured context (bugs only) -->
+						{#if formType === 'bug'}
+							<div class="space-y-2">
+								<p class="text-xs font-semibold text-foreground-tertiary uppercase tracking-wide">Auto-captured</p>
+								<div class="flex flex-wrap gap-1.5">
+									<Badge variant="info" size="sm">
+										<i class="fa-solid fa-route mr-1"></i>
+										{window.location.pathname}
+									</Badge>
+									<Badge variant="info" size="sm">
+										<i class="fa-solid fa-display mr-1"></i>
+										{window.innerWidth}×{window.innerHeight}
+									</Badge>
+									{#if consoleErrors.length > 0}
+										<Badge variant="danger" size="sm">
+											<i class="fa-solid fa-triangle-exclamation mr-1"></i>
+											{consoleErrors.length} console error{consoleErrors.length !== 1 ? 's' : ''}
 										</Badge>
-										<Badge variant="info" size="sm">
-											<i class="fa-solid fa-display mr-1"></i>
-											{window.innerWidth}×{window.innerHeight}
+									{/if}
+									{#if clickedElement}
+										<Badge variant="neutral" size="sm">
+											<i class="fa-solid fa-crosshairs mr-1"></i>
+											{getElementSelector(clickedElement).slice(-40)}
 										</Badge>
-										{#if consoleErrors.length > 0}
-											<Badge variant="danger" size="sm">
-												<i class="fa-solid fa-triangle-exclamation mr-1"></i>
-												{consoleErrors.length} console error{consoleErrors.length !== 1 ? 's' : ''}
-											</Badge>
-										{/if}
-										{#if clickedElement}
-											<Badge variant="neutral" size="sm">
-												<i class="fa-solid fa-crosshairs mr-1"></i>
-												{getElementSelector(clickedElement).slice(-40)}
-											</Badge>
-										{/if}
-									</div>
-
-									<!-- Screenshot preview -->
-									{#if capturingScreenshot}
-										<div class="flex items-center gap-2 text-sm text-foreground-tertiary">
-											<Spinner /> Capturing screenshot...
-										</div>
-									{:else if screenshotData}
-										<div class="relative">
-											<img
-												src={screenshotData}
-												alt="Screenshot"
-												class="w-full rounded-md border border-border max-h-40 object-cover object-top"
-											/>
-											<button
-												class="absolute top-1 right-1 bg-black/60 text-white rounded-full w-6 h-6 flex items-center justify-center text-xs border-none cursor-pointer hover:bg-black/80"
-												onclick={() => (screenshotData = null)}
-												aria-label="Remove screenshot"
-											>
-												<i class="fa-solid fa-xmark"></i>
-											</button>
-										</div>
 									{/if}
 								</div>
-							{/if}
-
-							{#if submitResult === 'error'}
-								<p class="text-sm text-red-400">
-									<i class="fa-solid fa-exclamation-circle mr-1"></i>
-									Failed to submit. Please try again.
-								</p>
-							{/if}
 
-							{/if}
-					</div>
+								<!-- Screenshot preview -->
+								{#if capturingScreenshot_}
+									<div class="flex items-center gap-2 text-sm text-foreground-tertiary">
+										<Spinner /> Capturing screenshot...
+									</div>
+								{:else if screenshotFailed}
+							<div class="rounded-md border border-border bg-surface p-3">
+								<div class="flex items-center gap-2 text-sm text-foreground-secondary mb-1">
+									<i class="fa-solid fa-image-slash" aria-hidden="true"></i>
+									<span>Screenshot capture failed</span>
+								</div>
+								<p class="text-xs text-foreground-tertiary mb-2">Check console for error. May need: <code class="bg-background px-1 rounded">npm install html2canvas</code></p>
+								<button
+									class="text-xs text-primary hover:underline bg-transparent border-none cursor-pointer p-0"
+									onclick={doScreenshot}
+								>
+									Retry
+								</button>
+							</div>
+						{:else if screenshotData}
+									<div class="relative">
+										<img
+											src={screenshotData}
+											alt="Screenshot"
+											class="w-full rounded-md border border-border max-h-40 object-cover object-top"
+										/>
+										<button
+											class="absolute top-1 right-1 bg-black/60 text-white rounded-full w-6 h-6 flex items-center justify-center text-xs border-none cursor-pointer hover:bg-black/80"
+											onclick={() => (screenshotData = null)}
+											aria-label="Remove screenshot"
+										>
+											<i class="fa-solid fa-xmark"></i>
+										</button>
+									</div>
+								{/if}
+							</div>
+						{/if}
 
-					<!-- Footer (fixed) -->
-					{#if submitResult !== 'success'}
-						<div class="flex justify-end gap-2 px-5 py-4 border-t border-border shrink-0">
-							<Button variant="neutral" style="outline" onclick={() => (formOpen = false)}>
-								Cancel
-							</Button>
-							<Button
-								variant={formType === 'bug' ? 'danger' : 'primary'}
-								disabled={submitting || !formMessage.trim()}
-								loading={submitting}
-								onclick={handleSubmit}
-							>
-								{formType === 'bug' ? 'Report Bug' : 'Submit Request'}
-							</Button>
-						</div>
+						{#if submitResult === 'error'}
+							<p class="text-sm text-red-400">
+								<i class="fa-solid fa-exclamation-circle mr-1"></i>
+								Failed to submit. Please try again.
+							</p>
+						{/if}
 					{/if}
-				</Card>
-			</div>
+				</div>
+
+				<!-- Footer -->
+				{#if submitResult !== 'success'}
+					<div class="flex justify-end gap-2 px-5 py-4 border-t border-border shrink-0">
+						<Button variant="neutral" style="outline" onclick={() => (formOpen = false)}>
+							Cancel
+						</Button>
+						<Button
+							variant={formType === 'bug' ? 'danger' : 'primary'}
+							disabled={submitting || !formMessage.trim()}
+							loading={submitting}
+							onclick={handleSubmit}
+						>
+							{formType === 'bug' ? 'Report Bug' : 'Submit Request'}
+						</Button>
+					</div>
+				{/if}
+			</Card>
+		</div>
 	{/if}
 
 	<!-- Onboarding toast -->
 	{#if showToast}
-		<div class="fixed bottom-4 right-4 z-[99997] animate-fade-in">
-			<div class="sf-toast">
-				<i class="fa-solid fa-computer-mouse" style="color: var(--color-primary, #3b82f6); font-size: 1.125rem;"></i>
-				<div>
-					<p style="font-size: 0.875rem; font-weight: 600; margin: 0;">Ctrl + Right-click anywhere</p>
-					<p style="font-size: 0.75rem; color: #94a3b8; margin: 0;">to report bugs or request features</p>
-				</div>
-				<button class="sf-toast-close" onclick={() => (showToast = false)} aria-label="Dismiss">
-					<i class="fa-solid fa-xmark"></i>
-				</button>
-			</div>
-		</div>
+		<DevOnboardingToast onDismiss={() => (showToast = false)} />
 	{/if}
 {/if}
 
 <style>
-	@keyframes fade-in {
-		from { opacity: 0; transform: translateY(8px); }
-		to { opacity: 1; transform: translateY(0); }
-	}
-	.animate-fade-in {
-		animation: fade-in 0.3s ease-out;
-	}
-
-	/* Context menu — hardcoded colors for guaranteed visibility */
-	.sf-ctx-menu {
-		background: #1e293b;
-		border: 1px solid #334155;
-		border-radius: 0.5rem;
-		box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
-		overflow: hidden;
-		min-width: 180px;
-	}
-
-	.sf-ctx-item {
-		display: flex;
-		align-items: center;
-		gap: 0.625rem;
-		width: 100%;
-		padding: 0.625rem 0.75rem;
-		font-size: 0.875rem;
-		color: #e2e8f0;
-		background: transparent;
-		border: none;
-		cursor: pointer;
-		text-align: left;
-		transition: background 0.15s;
-	}
-
-	.sf-ctx-item:hover {
-		background: #334155;
-	}
-
-	.sf-ctx-item-secondary {
-		color: #94a3b8;
-	}
-
-	.sf-ctx-divider {
-		border-top: 1px solid #334155;
-	}
-
-	/* Toast */
-	.sf-toast {
-		background: #1e293b;
-		border: 1px solid #334155;
-		border-radius: 0.5rem;
-		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
-		padding: 0.75rem 1rem;
-		display: flex;
-		align-items: center;
-		gap: 0.75rem;
-		max-width: 20rem;
-		color: #e2e8f0;
-	}
-
-	.sf-toast-close {
-		color: #64748b;
-		background: transparent;
-		border: none;
-		cursor: pointer;
-		margin-left: 0.5rem;
-		transition: color 0.15s;
-	}
-
-	.sf-toast-close:hover {
-		color: #e2e8f0;
-	}
-
 	/* Floating modal shadow — no backdrop so needs strong depth cue */
 	.sf-modal :global(.card) {
 		box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);