@myrialabs/clopen 0.0.1

package/frontend/lib/components/preview/browser/core/tab-manager.svelte.ts

@@ -0,0 +1,210 @@
+/**
+ * Browser Tab Manager
+ * Manages tab state and operations for BrowserPreview
+ */
+
+import { debug } from '$shared/utils/logger';
+import type { DeviceSize, Rotation } from '$frontend/lib/constants/preview';
+
+// Console message type (temporary placeholder)
+type ConsoleMessage = any;
+
+// Tab interface
+export interface PreviewTab {
+	id: string;
+	url: string;
+	title: string;
+	sessionId: string | null;
+	sessionInfo: any;
+	isConnected: boolean;
+	isStreamReady: boolean;
+	isLoading: boolean;
+	isLaunchingBrowser: boolean;
+	isNavigating: boolean; // True when navigating within same session (e.g., clicking a link)
+	deviceSize: DeviceSize;
+	rotation: Rotation;
+	consoleLogs: ConsoleMessage[];
+	canvasAPI: any;
+	previewDimensions: any;
+	lastFrameData: any;
+	errorMessage: string | null;
+}
+
+/**
+ * Helper function to get tab title from URL
+ */
+export function getTabTitle(url: string): string {
+	if (!url) return 'New Tab';
+	try {
+		return new URL(url).hostname;
+	} catch {
+		return url.length > 30 ? url.slice(0, 30) + '...' : url;
+	}
+}
+
+/**
+ * Create browser tab manager state
+ */
+export function createTabManager() {
+	let tabs = $state<PreviewTab[]>([]);
+	let activeTabId = $state<string | null>(null);
+	let nextTabId = $state(1);
+
+	// Get active tab (derived)
+	const activeTab = $derived.by(() => tabs.find(tab => tab.id === activeTabId));
+
+	/**
+	 * Create a new tab
+	 */
+	function createTab(tabUrl: string = ''): string {
+		const tabId = `tab-${nextTabId++}`;
+		debug.log('preview', `📁 Creating new tab: ${tabId} with URL: ${tabUrl || '(empty)'}`);
+
+		// Default device size is laptop
+		const deviceSize: DeviceSize = 'laptop';
+		// Default rotation: landscape for laptop (matches new default)
+		const rotation: Rotation = 'landscape';
+
+		const newTab: PreviewTab = {
+			id: tabId,
+			url: tabUrl,
+			title: getTabTitle(tabUrl),
+			sessionId: null,
+			sessionInfo: null,
+			isConnected: false,
+			isStreamReady: false,
+			isLoading: false,
+			isLaunchingBrowser: false,
+			isNavigating: false,
+			deviceSize,
+			rotation,
+			consoleLogs: [],
+			canvasAPI: null,
+			previewDimensions: { scale: 1 },
+			lastFrameData: null,
+			errorMessage: null
+		};
+
+		tabs = [...tabs, newTab];
+		activeTabId = tabId;
+
+		return tabId;
+	}
+
+	/**
+	 * Switch to a specific tab
+	 */
+	function switchTab(tabId: string): PreviewTab | null {
+		const tab = tabs.find(t => t.id === tabId);
+		if (!tab || activeTabId === tabId) return null;
+
+		debug.log('preview', `🔄 Switching tab from ${activeTabId} to ${tabId}`);
+		activeTabId = tabId;
+
+		return tab;
+	}
+
+	/**
+	 * Close a tab
+	 */
+	function closeTab(tabId: string): { removedTab: PreviewTab | null; newActiveTab: PreviewTab | null } {
+		const tabIndex = tabs.findIndex(tab => tab.id === tabId);
+		if (tabIndex === -1) return { removedTab: null, newActiveTab: null };
+
+		const removedTab = tabs[tabIndex];
+		tabs = tabs.filter(t => t.id !== tabId);
+
+		let newActiveTab: PreviewTab | null = null;
+
+		// Switch to adjacent tab if closing active tab
+		if (activeTabId === tabId && tabs.length > 0) {
+			const newIndex = tabIndex < tabs.length ? tabIndex : tabs.length - 1;
+			newActiveTab = tabs[newIndex];
+			if (newActiveTab) {
+				activeTabId = newActiveTab.id;
+			}
+		} else if (tabs.length === 0) {
+			activeTabId = null;
+		}
+
+		return { removedTab, newActiveTab };
+	}
+
+	/**
+	 * Update tab state
+	 */
+	function updateTab(tabId: string, updates: Partial<PreviewTab>): void {
+		tabs = tabs.map(tab => {
+			if (tab.id === tabId) {
+				return { ...tab, ...updates };
+			}
+			return tab;
+		});
+	}
+
+	/**
+	 * Update active tab
+	 */
+	function updateActiveTab(updates: Partial<PreviewTab>): void {
+		if (!activeTabId) return;
+		updateTab(activeTabId, updates);
+	}
+
+	/**
+	 * Get tab by ID
+	 */
+	function getTab(tabId: string): PreviewTab | undefined {
+		return tabs.find(t => t.id === tabId);
+	}
+
+	/**
+	 * Get all tabs
+	 */
+	function getAllTabs(): PreviewTab[] {
+		return tabs;
+	}
+
+	/**
+	 * Get active tab ID
+	 */
+	function getActiveTabId(): string | null {
+		return activeTabId;
+	}
+
+	/**
+	 * Set tabs (for external state sync)
+	 */
+	function setTabs(newTabs: PreviewTab[]): void {
+		tabs = newTabs;
+	}
+
+	/**
+	 * Clear all tabs (used when switching projects)
+	 */
+	function clearAllTabs(): void {
+		debug.log('preview', '🧹 Clearing all tabs');
+		tabs = [];
+		activeTabId = null;
+	}
+
+	return {
+		// Getters
+		get tabs() { return tabs; },
+		get activeTabId() { return activeTabId; },
+		get activeTab() { return activeTab; },
+
+		// Methods
+		createTab,
+		switchTab,
+		closeTab,
+		updateTab,
+		updateActiveTab,
+		getTab,
+		getAllTabs,
+		getActiveTabId,
+		setTabs,
+		clearAllTabs
+	};
+}
+
+export type TabManager = ReturnType<typeof createTabManager>;

package/frontend/lib/components/preview/browser/core/tab-operations.svelte.ts

@@ -0,0 +1,239 @@
+/**
+ * Browser Tab Operations
+ *
+ * Handles browser session lifecycle (launch, navigate, destroy) via WebSocket.
+ * All operations work with active tab on backend (tab-centric architecture).
+ *
+ * Session Persistence:
+ * - Sessions survive page refresh
+ * - On page load, existing sessions can be recovered via getExistingTabs()
+ * - Frontend reconnects to backend tabs and restarts streaming
+ */
+
+import ws from '$frontend/lib/utils/ws';
+import { debug } from '$shared/utils/logger';
+import { addNotification } from '$frontend/lib/stores/ui/notification.svelte';
+import type { DeviceSize, Rotation } from '$frontend/lib/constants/preview';
+
+export interface BrowserSessionInfo {
+	quality: string;
+	url: string;
+	deviceSize?: DeviceSize;
+	rotation?: Rotation;
+}
+
+export interface LaunchResult {
+	success: boolean;
+	sessionId?: string;
+	sessionInfo?: BrowserSessionInfo;
+	error?: string;
+}
+
+export interface NavigateResult {
+	success: boolean;
+	finalUrl?: string;
+	error?: string;
+}
+
+export interface ExistingTabInfo {
+	tabId: string;
+	url: string;
+	title: string;
+	quality: string;
+	isStreaming: boolean;
+	deviceSize: string;
+	rotation: string;
+	isActive: boolean;
+}
+
+export interface ExistingTabsResult {
+	tabs: ExistingTabInfo[];
+	activeTabId: string | null;
+	count: number;
+}
+
+/**
+ * Launch browser for active tab
+ */
+export async function launchBrowser(
+	url: string,
+	deviceSize: DeviceSize,
+	rotation: Rotation,
+	projectId: string,
+	mcpSessionId?: string
+): Promise<LaunchResult> {
+	debug.log('preview', `🌐 launchBrowser - URL: ${url}, device: ${deviceSize}, rotation: ${rotation}, projectId: ${projectId}${mcpSessionId ? `, mcpSessionId: ${mcpSessionId}` : ''}`);
+
+	if (!url) {
+		debug.error('preview', '❌ launchBrowser: No URL provided');
+		addNotification({
+			type: 'error',
+			title: 'URL Required',
+			message: 'Please enter a URL to launch browser preview'
+		});
+		return { success: false, error: 'URL is required' };
+	}
+
+	if (!projectId) {
+		debug.error('preview', '❌ launchBrowser: No projectId provided');
+		addNotification({
+			type: 'error',
+			title: 'Project Required',
+			message: 'Please select a project first'
+		});
+		return { success: false, error: 'Project ID is required' };
+	}
+
+	try {
+		debug.log('preview', `📡 Sending browser:launch via WebSocket...`);
+
+		// Backend will create tab automatically with projectId
+		const data = await ws.http(
+			'preview:browser-tab-open',
+			{ url, deviceSize, rotation },
+			60000
+		);
+
+		debug.log('preview', `✅ Browser launched successfully - sessionId: ${data.tabId}`);
+
+		return {
+			success: true,
+			sessionId: data.tabId,
+			sessionInfo: {
+				quality: data.quality,
+				url: data.url,
+				deviceSize,
+				rotation
+			}
+		};
+	} catch (error) {
+		debug.error('preview', '💥 Error launching browser:', error);
+		addNotification({
+			type: 'error',
+			title: 'Launch Failed',
+			message: error instanceof Error ? error.message : 'Failed to launch browser preview'
+		});
+		return {
+			success: false,
+			error: error instanceof Error ? error.message : 'Unknown error'
+		};
+	}
+}
+
+/**
+ * Navigate active tab to new URL
+ */
+export async function navigateBrowser(newUrl: string, projectId: string): Promise<NavigateResult> {
+	if (!newUrl) {
+		return { success: false, error: 'No URL provided' };
+	}
+
+	if (!projectId) {
+		return { success: false, error: 'Project ID is required' };
+	}
+
+	try {
+		// Backend uses active tab automatically
+		const data = await ws.http('preview:browser-tab-navigate', { url: newUrl }, 30000);
+
+		return { success: true, finalUrl: data.finalUrl };
+	} catch (error) {
+		addNotification({
+			type: 'error',
+			title: 'Navigation Failed',
+			message: error instanceof Error ? error.message : 'Failed to navigate'
+		});
+		return {
+			success: false,
+			error: error instanceof Error ? error.message : 'Unknown error'
+		};
+	}
+}
+
+/**
+ * Destroy browser session for active tab
+ */
+export async function destroyBrowser(projectId: string): Promise<void> {
+	if (!projectId) {
+		debug.error('preview', `❌ destroyBrowser: No projectId provided`);
+		return;
+	}
+
+	try {
+		// Backend uses active tab automatically
+		await ws.http('preview:browser-tab-close', {});
+		debug.log('preview', `✅ Browser session destroyed`);
+	} catch (error) {
+		debug.error('preview', `❌ Error destroying browser:`, error);
+	}
+}
+
+/**
+ * Destroy browser session for a specific tab
+ */
+export async function destroyBrowserTab(tabId: string, projectId: string): Promise<void> {
+	if (!projectId) {
+		debug.error('preview', `❌ destroyBrowserTab: No projectId provided`);
+		return;
+	}
+
+	try {
+		await ws.http('preview:browser-tab-close', { tabId });
+		debug.log('preview', `✅ Browser tab ${tabId} destroyed`);
+	} catch (error) {
+		debug.error('preview', `❌ Error destroying browser tab ${tabId}:`, error);
+	}
+}
+
+/**
+ * Get all existing tabs from backend (for session recovery after refresh)
+ */
+export async function getExistingTabs(projectId: string): Promise<ExistingTabsResult | null> {
+	if (!projectId) {
+		debug.error('preview', `❌ getExistingTabs: No projectId provided`);
+		return null;
+	}
+
+	try {
+		debug.log('preview', `🔍 Checking for existing browser tabs (project: ${projectId})...`);
+
+		const data = await ws.http('preview:browser-tabs-list', {}, 5000);
+
+		if (data.count > 0) {
+			debug.log('preview', `✅ Found ${data.count} existing browser tabs`);
+		} else {
+			debug.log('preview', `📭 No existing browser tabs found`);
+		}
+
+		return {
+			tabs: data.tabs,
+			activeTabId: data.activeTabId,
+			count: data.count
+		};
+	} catch (error) {
+		debug.warn('preview', `⚠️ Could not get existing tabs:`, error);
+		return null;
+	}
+}
+
+/**
+ * Switch to a specific tab on backend
+ */
+export async function switchToBackendTab(tabId: string, projectId: string): Promise<boolean> {
+	if (!projectId) {
+		debug.error('preview', `❌ switchToBackendTab: No projectId provided`);
+		return false;
+	}
+
+	try {
+		debug.log('preview', `🔄 Switching to backend tab: ${tabId} (project: ${projectId})`);
+
+		await ws.http('preview:browser-tab-switch', { tabId }, 5000);
+
+		debug.log('preview', `✅ Switched to backend tab: ${tabId}`);
+		return true;
+	} catch (error) {
+		debug.error('preview', `❌ Error switching to backend tab:`, error);
+		return false;
+	}
+}

package/frontend/lib/components/preview/index.ts

@@ -0,0 +1,2 @@
+// Browser-specific components
+export { default as BrowserPreview } from './browser/BrowserPreview.svelte';

package/frontend/lib/components/settings/SettingsModal.svelte

@@ -0,0 +1,235 @@
+<script lang="ts">
+	import { fade, scale, fly } from 'svelte/transition';
+	import { cubicOut } from 'svelte/easing';
+	import Icon from '$frontend/lib/components/common/Icon.svelte';
+	import {
+		settingsModalState,
+		closeSettingsModal,
+		setActiveSection,
+		settingsSections,
+		type SettingsSection
+	} from '$frontend/lib/stores/ui/settings-modal.svelte';
+
+	// Import settings components
+	import ModelSettings from './model/ModelSettings.svelte';
+	import AIEnginesSettings from './engines/AIEnginesSettings.svelte';
+	import AppearanceSettings from './appearance/AppearanceSettings.svelte';
+	import UserSettings from './user/UserSettings.svelte';
+	import NotificationSettings from './notifications/NotificationSettings.svelte';
+	import GeneralSettings from './general/GeneralSettings.svelte';
+	import pkg from '../../../../package.json';
+
+	// Responsive state
+	let isMobileMenuOpen = $state(false);
+	let windowWidth = $state(typeof window !== 'undefined' ? window.innerWidth : 1024);
+
+	const isMobile = $derived(windowWidth < 768);
+	const isOpen = $derived(settingsModalState.isOpen);
+	const activeSection = $derived(settingsModalState.activeSection);
+
+	// Handle section change
+	function handleSectionChange(section: SettingsSection) {
+		setActiveSection(section);
+		if (isMobile) {
+			isMobileMenuOpen = false;
+		}
+	}
+
+	// Handle backdrop click
+	function handleBackdropClick(event: MouseEvent) {
+		if (event.target === event.currentTarget) {
+			closeSettingsModal();
+		}
+	}
+
+	// Handle keyboard events
+	function handleKeydown(event: KeyboardEvent) {
+		if (event.key === 'Escape') {
+			closeSettingsModal();
+		}
+	}
+
+	// Get current section info
+	const currentSectionInfo = $derived(
+		settingsSections.find((s) => s.id === activeSection) || settingsSections[0]
+	);
+
+	// Update window width on resize
+	function handleResize() {
+		windowWidth = window.innerWidth;
+		if (!isMobile) {
+			isMobileMenuOpen = false;
+		}
+	}
+</script>
+
+<svelte:window on:keydown={handleKeydown} on:resize={handleResize} />
+
+{#if isOpen}
+	<!-- Backdrop -->
+	<div
+		class="fixed inset-0 z-[100] flex items-center justify-center md:p-4 bg-black/60 backdrop-blur-sm"
+		role="dialog"
+		aria-modal="true"
+		aria-labelledby="settings-title"
+		tabindex="-1"
+		onclick={handleBackdropClick}
+		onkeydown={handleKeydown}
+		in:fade={{ duration: 200, easing: cubicOut }}
+		out:fade={{ duration: 150, easing: cubicOut }}
+	>
+		<!-- Modal Container -->
+		<div
+			role="dialog"
+			aria-labelledby="settings-title"
+			tabindex="-1"
+			class="flex flex-col w-full max-w-225 h-[85vh] max-h-175 bg-slate-50 dark:bg-slate-950 border border-violet-500/20 rounded-2xl overflow-hidden shadow-[0_25px_50px_-12px_rgba(0,0,0,0.25)] dark:shadow-[0_25px_50px_-12px_rgba(0,0,0,0.5)] max-md:max-w-full max-md:h-screen max-md:max-h-screen max-md:rounded-none"
+			onclick={(e) => e.stopPropagation()}
+			onkeydown={(e) => e.stopPropagation()}
+			in:scale={{ duration: 250, easing: cubicOut, start: 0.95 }}
+			out:scale={{ duration: 150, easing: cubicOut, start: 0.95 }}
+		>
+			<!-- Mobile Header -->
+			{#if isMobile}
+				<header
+					class="flex items-center justify-between py-3 px-4 bg-slate-100 dark:bg-slate-900/95 border-b border-slate-200 dark:border-slate-800"
+				>
+					<button
+						type="button"
+						class="flex items-center justify-center w-9 h-9 bg-transparent border-none rounded-lg text-slate-500 cursor-pointer transition-all duration-150 hover:bg-violet-500/10 hover:text-slate-900 dark:hover:text-slate-100"
+						onclick={() => (isMobileMenuOpen = !isMobileMenuOpen)}
+						aria-label="Toggle menu"
+					>
+						<Icon name={isMobileMenuOpen ? 'lucide:x' : 'lucide:menu'} class="w-5 h-5" />
+					</button>
+					<h2
+						id="settings-title"
+						class="flex items-center gap-2 text-base font-semibold text-slate-900 dark:text-slate-100 m-0"
+					>
+						<Icon name={currentSectionInfo.icon} class="w-5 h-5" />
+						{currentSectionInfo.label}
+					</h2>
+					<button
+						type="button"
+						class="flex items-center justify-center w-9 h-9 bg-transparent border-none rounded-lg text-slate-500 cursor-pointer transition-all duration-150 hover:bg-violet-500/10 hover:text-slate-900 dark:hover:text-slate-100"
+						onclick={closeSettingsModal}
+						aria-label="Close settings"
+					>
+						<Icon name="lucide:x" class="w-5 h-5" />
+					</button>
+				</header>
+			{/if}
+
+			<div class="flex flex-1 min-h-0 relative">
+				<!-- Sidebar -->
+				<aside
+					class="flex flex-col w-68 shrink-0 bg-white dark:bg-slate-900/98 border-r border-slate-200 dark:border-slate-800
+						{isMobile
+						? 'absolute left-0 top-0 bottom-0 z-10 w-70 shadow-[4px_0_20px_rgba(0,0,0,0.15)] dark:shadow-[4px_0_20px_rgba(0,0,0,0.3)] transition-transform duration-[250ms] ease-out'
+						: ''}
+						{isMobile && !isMobileMenuOpen ? '-translate-x-full' : 'translate-x-0'}"
+				>
+					{#if !isMobile}
+						<header
+							class="flex items-center justify-between py-5 px-4 pl-6.5 border-b border-slate-200 dark:border-slate-800"
+						>
+							<div
+								class="flex items-center gap-2.5 text-lg font-bold text-slate-900 dark:text-slate-100"
+							>
+								<span>Settings</span>
+							</div>
+							<button
+								type="button"
+								class="flex items-center justify-center w-9 h-9 bg-transparent border-none rounded-lg text-slate-500 cursor-pointer transition-all duration-150 hover:bg-violet-500/10 hover:text-slate-900 dark:hover:text-slate-100"
+								onclick={closeSettingsModal}
+								aria-label="Close settings"
+							>
+								<Icon name="lucide:x" class="w-5 h-5" />
+							</button>
+						</header>
+					{/if}
+
+					<nav class="flex-1 overflow-y-auto p-3">
+						{#each settingsSections as section (section.id)}
+							<button
+								type="button"
+								class="flex items-start gap-3 w-full py-3 px-3.5 bg-transparent border-none rounded-lg text-slate-500 text-sm text-left cursor-pointer transition-all duration-150 mb-1
+									hover:bg-violet-500/10 hover:text-slate-600 dark:hover:text-slate-400
+									{activeSection === section.id
+									? 'bg-violet-500/10 dark:bg-violet-500/20 text-slate-900 dark:text-slate-100'
+									: ''}"
+								onclick={() => handleSectionChange(section.id)}
+							>
+								<Icon
+									name={section.icon}
+									class="w-5 h-5 shrink-0 mt-0.5 {activeSection === section.id
+										? 'text-violet-600'
+										: ''}"
+								/>
+								<div class="flex flex-col gap-0.5">
+									<span class="font-semibold">{section.label}</span>
+									<span
+										class="text-xs text-slate-600 dark:text-slate-500 leading-tight {activeSection ===
+										section.id
+											? 'text-violet-600 dark:text-violet-400'
+											: ''}">{section.description}</span
+									>
+								</div>
+							</button>
+						{/each}
+					</nav>
+
+					<footer class="p-4 border-t border-slate-200 dark:border-slate-800">
+						<div class="flex items-center gap-2 text-xs text-slate-600 dark:text-slate-500">
+							<Icon name="lucide:info" class="w-4 h-4" />
+							<span>Clopen v{pkg.version}</span>
+						</div>
+					</footer>
+				</aside>
+
+				<!-- Mobile Menu Overlay -->
+				{#if isMobile && isMobileMenuOpen}
+					<button
+						type="button"
+						class="absolute inset-0 z-[5] bg-black/40 border-none p-0 cursor-default"
+						onclick={() => (isMobileMenuOpen = false)}
+						aria-label="Close menu"
+						in:fade={{ duration: 150 }}
+						out:fade={{ duration: 100 }}
+					></button>
+				{/if}
+
+				<!-- Content Area -->
+				<main class="flex-1 flex flex-col min-w-0 overflow-hidden">
+					<div class="flex-1 overflow-y-auto p-4 md:p-5">
+						{#if activeSection === 'model'}
+							<div in:fly={{ x: 20, duration: 200 }}>
+								<ModelSettings />
+							</div>
+						{:else if activeSection === 'engines'}
+							<div in:fly={{ x: 20, duration: 200 }}>
+								<AIEnginesSettings />
+							</div>
+						{:else if activeSection === 'appearance'}
+							<div in:fly={{ x: 20, duration: 200 }}>
+								<AppearanceSettings />
+							</div>
+						{:else if activeSection === 'user'}
+							<div in:fly={{ x: 20, duration: 200 }}>
+								<UserSettings />
+							</div>
+						{:else if activeSection === 'notifications'}
+							<div in:fly={{ x: 20, duration: 200 }}>
+								<NotificationSettings />
+							</div>
+						{:else if activeSection === 'general'}
+							<div in:fly={{ x: 20, duration: 200 }}>
+								<GeneralSettings />
+							</div>
+						{/if}
+					</div>
+				</main>
+			</div>
+		</div>
+	</div>
+{/if}