@myrialabs/clopen 0.0.1

package/frontend/lib/components/preview/browser/components/SelectDropdown.svelte

@@ -0,0 +1,224 @@
+<script lang="ts">
+	import type { BrowserSelectInfo, BrowserSelectOption } from '$frontend/lib/types/native-ui';
+	import { onMount } from 'svelte';
+
+	let {
+		selectInfo = $bindable<BrowserSelectInfo | null>(null),
+		onSelect = $bindable<(selectedIndex: number) => void>(() => {}),
+		onClose = $bindable<() => void>(() => {})
+	} = $props();
+
+	let dropdownElement = $state<HTMLDivElement | undefined>(undefined);
+	let selectedIndex = $state(-1);
+	let highlightedIndex = $state(-1);
+
+	// Position the dropdown overlay
+	function getDropdownPosition() {
+		if (!selectInfo) return { top: '0px', left: '0px', width: '200px' };
+
+		const { boundingBox } = selectInfo;
+		return {
+			top: `${boundingBox.y + boundingBox.height}px`,
+			left: `${boundingBox.x}px`,
+			width: `${Math.max(boundingBox.width, 200)}px`
+		};
+	}
+
+	// Handle option click
+	function handleOptionClick(option: BrowserSelectOption) {
+		if (option.disabled) return;
+		onSelect(option.index);
+		onClose();
+	}
+
+	// Handle keyboard navigation
+	function handleKeydown(event: KeyboardEvent) {
+		if (!selectInfo) return;
+
+		const options = selectInfo.options;
+
+		switch (event.key) {
+			case 'ArrowDown':
+				event.preventDefault();
+				// Move to next enabled option
+				let nextIndex = highlightedIndex + 1;
+				while (nextIndex < options.length && options[nextIndex].disabled) {
+					nextIndex++;
+				}
+				if (nextIndex < options.length) {
+					highlightedIndex = nextIndex;
+				}
+				break;
+
+			case 'ArrowUp':
+				event.preventDefault();
+				// Move to previous enabled option
+				let prevIndex = highlightedIndex - 1;
+				while (prevIndex >= 0 && options[prevIndex].disabled) {
+					prevIndex--;
+				}
+				if (prevIndex >= 0) {
+					highlightedIndex = prevIndex;
+				}
+				break;
+
+			case 'Enter':
+				event.preventDefault();
+				if (highlightedIndex >= 0 && !options[highlightedIndex].disabled) {
+					handleOptionClick(options[highlightedIndex]);
+				}
+				break;
+
+			case 'Escape':
+				event.preventDefault();
+				onClose();
+				break;
+		}
+	}
+
+	// Handle click outside to close
+	function handleClickOutside(event: MouseEvent) {
+		if (dropdownElement && !dropdownElement.contains(event.target as Node)) {
+			onClose();
+		}
+	}
+
+	// Initialize
+	$effect(() => {
+		if (selectInfo) {
+			selectedIndex = selectInfo.selectedIndex;
+			highlightedIndex = selectInfo.selectedIndex;
+
+			// Focus dropdown for keyboard navigation
+			if (dropdownElement) {
+				dropdownElement.focus();
+			}
+
+			// Add click outside listener
+			setTimeout(() => {
+				document.addEventListener('mousedown', handleClickOutside);
+			}, 0);
+		}
+
+		return () => {
+			document.removeEventListener('mousedown', handleClickOutside);
+		};
+	});
+
+	const position = $derived(getDropdownPosition());
+</script>
+
+{#if selectInfo}
+	<div
+		bind:this={dropdownElement}
+		class="browser-select-dropdown"
+		style="top: {position.top}; left: {position.left}; width: {position.width};"
+		tabindex="-1"
+		onkeydown={handleKeydown}
+		role="listbox"
+		aria-label="Select options"
+	>
+		<div class="select-dropdown-list">
+			{#each selectInfo.options as option (option.index)}
+				<div
+					class="select-option"
+					class:selected={option.index === selectedIndex}
+					class:highlighted={option.index === highlightedIndex}
+					class:disabled={option.disabled}
+					role="option"
+					tabindex={option.disabled ? -1 : 0}
+					aria-selected={option.index === selectedIndex}
+					aria-disabled={option.disabled}
+					onclick={() => handleOptionClick(option)}
+					onkeydown={(e) => {
+						if (e.key === 'Enter' || e.key === ' ') {
+							e.preventDefault();
+							handleOptionClick(option);
+						}
+					}}
+					onmouseenter={() => {
+						if (!option.disabled) highlightedIndex = option.index;
+					}}
+				>
+					{option.text}
+				</div>
+			{/each}
+		</div>
+	</div>
+{/if}
+
+<style>
+	.browser-select-dropdown {
+		position: fixed;
+		z-index: 999999;
+		background: white;
+		border: 1px solid #ccc;
+		border-radius: 4px;
+		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+		max-height: 300px;
+		overflow-y: auto;
+		outline: none;
+	}
+
+	.select-dropdown-list {
+		padding: 4px 0;
+	}
+
+	.select-option {
+		padding: 6px 12px;
+		cursor: pointer;
+		user-select: none;
+		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+		font-size: 14px;
+		line-height: 1.5;
+		color: #333;
+	}
+
+	.select-option:hover:not(.disabled) {
+		background: #f0f0f0;
+	}
+
+	.select-option.highlighted:not(.disabled) {
+		background: #e6f7ff;
+	}
+
+	.select-option.selected {
+		background: #1890ff;
+		color: white;
+	}
+
+	.select-option.disabled {
+		color: #999;
+		cursor: not-allowed;
+		opacity: 0.6;
+	}
+
+	/* Dark mode support */
+	@media (prefers-color-scheme: dark) {
+		.browser-select-dropdown {
+			background: #2d2d2d;
+			border-color: #444;
+		}
+
+		.select-option {
+			color: #e0e0e0;
+		}
+
+		.select-option:hover:not(.disabled) {
+			background: #3a3a3a;
+		}
+
+		.select-option.highlighted:not(.disabled) {
+			background: #003d66;
+		}
+
+		.select-option.selected {
+			background: #1890ff;
+			color: white;
+		}
+
+		.select-option.disabled {
+			color: #666;
+		}
+	}
+</style>

package/frontend/lib/components/preview/browser/components/Toolbar.svelte

@@ -0,0 +1,339 @@
+<script lang="ts">
+	import Icon from '$frontend/lib/components/common/Icon.svelte';
+	import { addNotification } from '$frontend/lib/stores/ui/notification.svelte';
+	import { onDestroy } from 'svelte';
+
+	let {
+		// URL state
+		url = $bindable(''),
+		urlInput = $bindable(''),
+		isLoading = $bindable(false),
+		isLaunchingBrowser = $bindable(false),
+		isNavigating = $bindable(false),
+		isReconnecting = $bindable(false), // True during fast reconnect after navigation
+
+		// Session state
+		sessionId = $bindable<string | null>(null),
+		sessionInfo = $bindable<any>(null),
+		isConnected = $bindable(false),
+		isStreamReady = $bindable(false),
+		errorMessage = $bindable<string | null>(null),
+
+		// Console state
+		isConsoleOpen = $bindable(false),
+
+		// Tab state
+		tabs = $bindable<any[]>([]),
+		activeTabId = $bindable<string | null>(null),
+		mcpControlledTabId = $bindable<string | null>(null),
+
+		// Callbacks
+		onGoClick = $bindable<() => void>(() => {}),
+		onRefresh = $bindable<() => void>(() => {}),
+		onOpenInExternalBrowser = $bindable<() => void>(() => {}),
+		onClosePreview = $bindable<() => void>(() => {}),
+		onToggleConsole = $bindable<() => void>(() => {}),
+		onUrlInput = $bindable<() => void>(() => {}),
+		onUrlKeydown = $bindable<(event: KeyboardEvent) => void>(() => {}),
+		onSwitchTab = $bindable<(tabId: string) => void | Promise<void>>(() => {}),
+		onCloseTab = $bindable<(tabId: string) => void>(() => {}),
+		onNewTab = $bindable<() => void>(() => {})
+	} = $props();
+
+	// User typing detection
+	let isUserTyping = $state(false);
+	let typingTimeout: NodeJS.Timeout;
+
+	// Progress bar state
+	let progressPercent = $state(0);
+	let showProgress = $state(false);
+	let progressAnimationId: number | null = null;
+	let progressCompleteTimeout: ReturnType<typeof setTimeout> | null = null;
+
+	function handleUrlInput() {
+		isUserTyping = true;
+		onUrlInput();
+		
+		// Reset typing flag after user stops typing for 1 second
+		clearTimeout(typingTimeout);
+		typingTimeout = setTimeout(() => {
+			isUserTyping = false;
+		}, 1000);
+	}
+
+	function handleUrlKeydown(event: KeyboardEvent) {
+		if (event.key === 'Enter') {
+			isUserTyping = false;
+			onGoClick();
+		}
+		onUrlKeydown(event);
+	}
+
+	function handleGoClick() {
+		if (!urlInput.trim()) return;
+		isUserTyping = false;
+		clearTimeout(typingTimeout);
+		onGoClick();
+	}
+
+	function handleRefresh() {
+		onRefresh();
+	}
+
+	function handleOpenInExternalBrowser() {
+		if (url) {
+			window.open(url, '_blank');
+			// User already knows from new browser tab opening
+		}
+		onOpenInExternalBrowser();
+	}
+
+	function handleClosePreview() {
+		onClosePreview();
+		// User already knows from UI panel disappearing
+	}
+
+	function handleToggleConsole() {
+		onToggleConsole();
+	}
+
+	// Progress bar animation functions
+	function startProgressAnimation() {
+		if (progressAnimationId) {
+			cancelAnimationFrame(progressAnimationId);
+		}
+		
+		showProgress = true;
+		progressPercent = 0;
+		
+		const startTime = Date.now();
+		
+		// Simulate realistic browser loading progress
+		const animate = () => {
+			const elapsed = Date.now() - startTime;
+			
+			// Fast initial loading (0-30% in first 300ms)
+			if (elapsed < 300) {
+				progressPercent = (elapsed / 300) * 30;
+			}
+			// Medium loading (30-70% in next 700ms)
+			else if (elapsed < 1000) {
+				progressPercent = 30 + ((elapsed - 300) / 700) * 40;
+			}
+			// Slow loading (70-90% in next 1000ms)
+			else if (elapsed < 2000) {
+				progressPercent = 70 + ((elapsed - 1000) / 1000) * 20;
+			}
+			// Very slow final loading (90-95% in remaining time)
+			else {
+				progressPercent = Math.min(90 + ((elapsed - 2000) / 2000) * 5, 95);
+			}
+			
+			if (progressPercent < 95) {
+				progressAnimationId = requestAnimationFrame(animate);
+			}
+		};
+		
+		progressAnimationId = requestAnimationFrame(animate);
+	}
+
+	function completeProgress() {
+		if (progressAnimationId) {
+			cancelAnimationFrame(progressAnimationId);
+			progressAnimationId = null;
+		}
+		
+		// Complete the progress bar
+		progressPercent = 100;
+		
+		// Hide after a short delay
+		setTimeout(() => {
+			showProgress = false;
+			progressPercent = 0;
+		}, 300);
+	}
+
+	function stopProgress() {
+		if (progressAnimationId) {
+			cancelAnimationFrame(progressAnimationId);
+			progressAnimationId = null;
+		}
+		
+		showProgress = false;
+		progressPercent = 0;
+	}
+
+	// Watch loading states to control progress bar
+	// Progress bar should be active during:
+	// 1. isLaunchingBrowser: API call to launch browser
+	// 2. sessionInfo exists but isStreamReady false: waiting for first frame (initial load)
+	// 3. isNavigating: navigating within same session (link click)
+	// 4. isReconnecting: fast reconnect after navigation (keeps progress bar visible)
+	// 5. isLoading: generic loading state
+	$effect(() => {
+		const waitingForInitialFrame = sessionInfo && !isStreamReady && !isNavigating && !isReconnecting;
+		const shouldShowProgress = isLoading || isLaunchingBrowser || isNavigating || isReconnecting || waitingForInitialFrame;
+
+		// Cancel any pending completion when a loading state becomes active
+		if (shouldShowProgress && progressCompleteTimeout) {
+			clearTimeout(progressCompleteTimeout);
+			progressCompleteTimeout = null;
+		}
+
+		// Only start if not already showing progress (prevent restart)
+		if (shouldShowProgress && !showProgress) {
+			startProgressAnimation();
+		}
+		// Only complete if currently showing progress - with debounce to handle state transitions
+		// This prevents the progress bar from briefly completing during isNavigating → isReconnecting transition
+		else if (!shouldShowProgress && showProgress && !progressCompleteTimeout) {
+			progressCompleteTimeout = setTimeout(() => {
+				progressCompleteTimeout = null;
+				// Re-check if we should still complete (state might have changed)
+				const stillShouldComplete = !isLoading && !isLaunchingBrowser && !isNavigating && !isReconnecting;
+				const stillWaitingForFrame = sessionInfo && !isStreamReady && !isNavigating && !isReconnecting;
+				if (stillShouldComplete && !stillWaitingForFrame) {
+					completeProgress();
+				}
+			}, 100); // 100ms debounce to handle state transitions
+		}
+	});
+
+	// Cleanup animation frame on component destroy
+	onDestroy(() => {
+		if (progressAnimationId) {
+			cancelAnimationFrame(progressAnimationId);
+		}
+		if (typingTimeout) {
+			clearTimeout(typingTimeout);
+		}
+		if (progressCompleteTimeout) {
+			clearTimeout(progressCompleteTimeout);
+		}
+	});
+</script>
+
+<!-- Preview Toolbar -->
+<div class="relative px-3 py-2.5 bg-slate-100 dark:bg-slate-900 border-b border-slate-200 dark:border-slate-700">
+	<!-- Tabs bar -->
+	{#if tabs.length > 0}
+		<div class="flex items-center gap-1.5 overflow-x-auto mb-1.5">
+			<!-- Tabs -->
+			{#each tabs as tab}
+				<div
+					class="group relative flex items-center gap-2 pl-3 pr-2 py-1.5 border border-slate-200 dark:border-slate-700 rounded-lg transition-all duration-200 min-w-0 max-w-xs cursor-pointer
+						{tab.id === activeTabId 
+							? 'bg-slate-100 dark:bg-slate-700'
+							: 'bg-white dark:bg-slate-800 hover:bg-slate-100 dark:hover:bg-slate-700'}"
+					onclick={() => onSwitchTab(tab.id)}
+					role="tab"
+					tabindex="0"
+					onkeydown={(e) => {
+						if (e.key === 'Enter' || e.key === ' ') {
+							e.preventDefault();
+							onSwitchTab(tab.id);
+						}
+					}}
+				>
+					{#if tab.id === mcpControlledTabId}
+						<Icon name="lucide:bot" class="w-3 h-3 flex-shrink-0 text-amber-500" />
+					{:else if tab.isLoading}
+						<Icon name="lucide:loader-circle" class="w-3 h-3 animate-spin flex-shrink-0" />
+					{:else}
+						<Icon name="lucide:globe" class="w-3 h-3 flex-shrink-0" />
+					{/if}
+					<span class="text-xs font-medium truncate max-w-37.5" title={tab.url}>
+						{tab.title || 'New Tab'}
+					</span>
+					{#if tab.id === mcpControlledTabId}
+						<span title="MCP Controlled" class="flex">
+							<Icon name="lucide:lock" class="w-3 h-3 flex-shrink-0 text-amber-500" />
+						</span>
+					{/if}
+					<button
+						onclick={(e) => {
+							e.stopPropagation();
+							onCloseTab(tab.id);
+						}}
+						class="flex hover:bg-slate-300 dark:hover:bg-slate-600 rounded p-0.5 transition-all duration-200 {tab.id === mcpControlledTabId ? 'hidden' : ''}"
+						title="Close tab"
+						disabled={tab.id === mcpControlledTabId}
+					>
+						<Icon name="lucide:x" class="w-3 h-3" />
+					</button>
+				</div>
+			{/each}
+		
+			<!-- New tab button -->
+			<button
+				onclick={() => onNewTab()}
+				class="flex items-center justify-center w-5 h-5 rounded-md hover:bg-slate-200 dark:hover:bg-slate-700 transition-all duration-200"
+				title="Open new tab"
+			>
+				<Icon name="lucide:plus" class="w-3 h-3" />
+			</button>
+		</div>
+	{/if}
+	
+	<!-- Main toolbar header -->
+	<div class="px-1 py-0.5 bg-white dark:bg-slate-800 rounded-lg border border-slate-200 dark:border-slate-700">
+		<div class="flex items-center justify-between gap-4">
+			<!-- Left section: URL navigation -->
+			<div class="flex items-center gap-3 flex-1 min-w-0">
+				<!-- URL input with integrated controls -->
+				<input
+					type="text"
+					bind:value={urlInput}
+					onkeydown={handleUrlKeydown}
+					oninput={handleUrlInput}
+					onfocus={() => isUserTyping = true}
+					onblur={() => isUserTyping = false}
+					placeholder="Enter URL to preview..."
+					class="flex-1 pl-3 py-2.5 text-sm bg-transparent border-0 focus:outline-none min-w-0 text-ellipsis"
+				/>
+				<div class="flex items-center gap-1 px-2">
+					{#if url}
+						<button
+							onclick={handleOpenInExternalBrowser}
+							class="flex p-1.5 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-700 transition-all duration-200"
+							title="Open in external browser"
+						>
+							<Icon name="lucide:external-link" class="w-4 h-4" />
+						</button>
+						<button
+							onclick={handleRefresh}
+							disabled={isLoading}
+							class="flex p-1.5 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-700 transition-all duration-200 disabled:opacity-50"
+							title="Refresh current page"
+						>
+							<Icon name={isLoading ? 'lucide:loader-circle' : 'lucide:refresh-cw'} class="w-4 h-4 transition-transform duration-200 {isLoading ? 'animate-spin' : 'hover:rotate-180'}" />
+						</button>
+					{/if}
+					<button
+						onclick={handleGoClick}
+						disabled={!urlInput.trim() || isLoading}
+						class="ml-1 px-4 py-1.5 text-sm font-medium rounded-lg bg-violet-500 hover:bg-violet-600 disabled:bg-slate-300 disabled:dark:bg-slate-600 text-white transition-all duration-200 disabled:opacity-50"
+						title="Navigate to URL"
+					>
+						Go
+					</button>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<!-- Progress Bar - positioned at bottom of toolbar, overlapping the border -->
+	{#if showProgress}
+		<div class="absolute -bottom-px left-0 right-0 h-0.5 z-10 overflow-hidden rounded-b-xl">
+			<div
+				class="h-full bg-gradient-to-r from-violet-500 via-blue-600 to-purple-600 transition-all duration-100 ease-out relative"
+				style="width: {progressPercent}%"
+			>
+				<!-- Glow effect -->
+				<div class="absolute inset-0 bg-gradient-to-r from-violet-400 to-purple-500 blur-sm opacity-60"></div>
+				<!-- Shimmer effect -->
+				<div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent animate-pulse"></div>
+			</div>
+		</div>
+	{/if}
+</div>

package/frontend/lib/components/preview/browser/components/VirtualCursor.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	let {
+		cursor = $bindable<{x: number, y: number, visible: boolean, clicking?: boolean}>({x: 0, y: 0, visible: false, clicking: false})
+	} = $props();
+</script>
+
+<!-- Virtual Cursor for Autonomous Testing -->
+{#if cursor.visible}
+	<div 
+		class="fixed pointer-events-none z-50 transition-all duration-100"
+		style="left: {cursor.x - 4}px; top: {cursor.y - 2}px;"
+	>
+		<!-- Cursor body with fixed size -->
+		<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" 
+			class="drop-shadow-lg transition-transform duration-150 {cursor.clicking ? 'scale-90' : ''}">
+			<!-- Cursor arrow -->
+			<path d="M5 3L19 12L12 13L8 21L5 3Z" 
+				fill={cursor.clicking ? "#FFA500" : "#FFD700"} 
+				stroke="#333" 
+				stroke-width="1.5" 
+				stroke-linejoin="round"/>
+			<!-- Inner highlight -->
+			<path d="M7 6L15 11.5L11 12.5L8.5 17L7 6Z" 
+				fill={cursor.clicking ? "#FFE5B4" : "#FFF59D"} 
+				opacity="0.7"/>
+		</svg>
+		
+		<!-- Click ripple effect - only show when clicking -->
+		{#if cursor.clicking}
+			<div class="absolute -z-20">
+				<div class="absolute w-6 h-6 border-2 border-orange-500 rounded-full animate-ping opacity-75" 
+					style="left: -8px; top: -28px; animation-duration: 0.5s;"></div>
+			</div>
+		{/if}
+	</div>
+{/if}