@myrialabs/clopen 0.0.1

package/frontend/lib/components/workspace/panels/PreviewPanel.svelte

@@ -0,0 +1,150 @@
+<script lang="ts">
+	import BrowserPreview from '$frontend/lib/components/preview/browser/BrowserPreview.svelte';
+	import { mcpPreviewState, clearMCPLaunchRequest } from '$frontend/lib/services/preview';
+	import { projectState } from '$frontend/lib/stores/core/projects.svelte';
+	import { debug } from '$shared/utils/logger';
+	import Icon from '$frontend/lib/components/common/Icon.svelte';
+	import type { DeviceSize, Rotation } from '$frontend/lib/constants/preview';
+
+	// Project-aware state
+	const hasActiveProject = $derived(projectState.currentProject !== null);
+	const projectId = $derived(projectState.currentProject?.id || '');
+
+	// Store per-project preview state
+	const projectPreviewState = new Map<string, {
+		isOpen: boolean;
+		url: string;
+		mode: 'split' | 'tab';
+		deviceSize: DeviceSize;
+		rotation: Rotation;
+	}>();
+
+	let lastProjectId = $state<string>('');
+
+	// Preview state (will be restored per project)
+	let isOpen = $state(true);
+	let url = $state('');
+	let mode = $state<'split' | 'tab'>('split');
+
+	// Device and viewport state (exposed to parent for header controls)
+	let deviceSize = $state<DeviceSize>('laptop');
+	let rotation = $state<Rotation>('portrait');
+	let previewDimensions = $state<any>({ scale: 1 });
+
+	// BrowserPreview reference
+	let browserPreviewRef: any = $state();
+
+	// Watch for MCP launch requests and trigger browser launch (only for current project)
+	$effect(() => {
+		if (hasActiveProject && mcpPreviewState.pendingLaunch) {
+			const request = mcpPreviewState.pendingLaunch;
+
+			debug.log('mcp', `🚀 Launching browser from MCP request`);
+			debug.log('mcp', `   URL: ${request.url}`);
+			debug.log('mcp', `   Device: ${request.deviceSize} (${request.rotation})`);
+
+			// Update URL - this will trigger BrowserPreview's URL watcher to launch browser
+			url = request.url;
+			isOpen = true;
+
+			// Clear the pending launch (but keep it for a moment to allow BrowserPreview to react)
+			setTimeout(() => {
+				clearMCPLaunchRequest();
+			}, 100);
+
+			debug.log('mcp', `✅ Browser launch triggered from MCP`);
+		}
+	});
+
+	// Save and restore preview state when project changes
+	$effect(() => {
+		if (hasActiveProject && projectId) {
+			// Save current project state before switching
+			if (lastProjectId && lastProjectId !== projectId) {
+				projectPreviewState.set(lastProjectId, {
+					isOpen,
+					url,
+					mode,
+					deviceSize,
+					rotation
+				});
+				debug.log('preview', `Saved preview state for project: ${lastProjectId}`);
+			}
+
+			// Restore previous state for this project
+			const savedState = projectPreviewState.get(projectId);
+			if (savedState) {
+				isOpen = savedState.isOpen;
+				url = savedState.url;
+				mode = savedState.mode;
+				deviceSize = savedState.deviceSize;
+				rotation = savedState.rotation;
+				debug.log('preview', `Restored preview state for project: ${projectId}`);
+			} else {
+				// Reset state for new project
+				isOpen = true;
+				url = '';
+				mode = 'split';
+				deviceSize = 'laptop';
+				rotation = 'portrait';
+				debug.log('preview', `Reset preview state for new project: ${projectId}`);
+			}
+
+			lastProjectId = projectId;
+		} else {
+			// No active project - reset everything
+			isOpen = true;
+			url = '';
+			mode = 'split';
+			deviceSize = 'laptop';
+			rotation = 'portrait';
+			lastProjectId = '';
+		}
+	});
+
+	// Export actions for DesktopPanel header
+	export const panelActions = {
+		getDeviceSize: () => deviceSize,
+		getRotation: () => rotation,
+		getScale: () => previewDimensions?.scale || 1,
+		getUrl: () => url,
+		getSessionInfo: () => browserPreviewRef?.browserActions?.getSessionInfo() || null,
+		getIsStreamReady: () => browserPreviewRef?.browserActions?.getIsStreamReady() || false,
+		getErrorMessage: () => browserPreviewRef?.browserActions?.getErrorMessage() || null,
+		setDeviceSize: (size: DeviceSize) => {
+			if (browserPreviewRef?.browserActions) {
+				browserPreviewRef.browserActions.changeDeviceSize(size);
+			}
+		},
+		toggleRotation: () => {
+			if (browserPreviewRef?.browserActions) {
+				browserPreviewRef.browserActions.toggleRotation();
+			}
+		}
+	};
+</script>
+
+<div class="h-full flex flex-col bg-transparent">
+	{#if !hasActiveProject}
+		<!-- No project selected state -->
+		<div
+			class="flex-1 flex flex-col items-center justify-center gap-3 text-slate-600 dark:text-slate-500 text-sm"
+		>
+			<Icon name="lucide:globe" class="w-10 h-10 opacity-30" />
+			<span>No project selected</span>
+		</div>
+	{:else}
+		<!-- Full WebPreview -->
+		<div class="h-full overflow-hidden">
+			<BrowserPreview
+				bind:this={browserPreviewRef}
+				bind:url
+				bind:isOpen
+				bind:mode
+				bind:deviceSize
+				bind:rotation
+				bind:previewDimensions
+			/>
+		</div>
+	{/if}
+</div>

package/frontend/lib/components/workspace/panels/TerminalPanel.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+	import Terminal from '$frontend/lib/components/terminal/Terminal.svelte';
+	import TerminalTabs from '$frontend/lib/components/terminal/TerminalTabs.svelte';
+	import Icon from '$frontend/lib/components/common/Icon.svelte';
+	import LoadingSpinner from '$frontend/lib/components/common/LoadingSpinner.svelte';
+	import { terminalStore } from '$frontend/lib/stores/features/terminal.svelte';
+	import { projectState } from '$frontend/lib/stores/core/projects.svelte';
+
+	// Props
+	interface Props {
+		showMobileHeader?: boolean;
+	}
+
+	const { showMobileHeader = false }: Props = $props();
+
+	const hasActiveProject = $derived(projectState.currentProject !== null);
+	const projectPath = $derived(projectState.currentProject?.path || '');
+	const projectId = $derived(projectState.currentProject?.id || '');
+
+	// Terminal reference
+	let terminalRef: any = $state();
+
+	// Derived state from terminal
+	const activeSession = $derived(terminalRef?.terminalActions?.getActiveSession());
+	const isExecuting = $derived(terminalRef?.terminalActions?.isExecuting() ?? false);
+	const isCancelling = $derived(terminalRef?.terminalActions?.isCancelling() ?? false);
+
+	async function createNewSession() {
+		if (terminalRef?.terminalActions) {
+			await terminalRef.terminalActions.handleNewSession();
+		}
+	}
+
+	function handleClear() {
+		if (terminalRef?.terminalActions) {
+			terminalRef.terminalActions.handleClear();
+		}
+	}
+
+	async function handleCancel() {
+		if (terminalRef?.terminalActions) {
+			await terminalRef.terminalActions.handleCancel();
+		}
+	}
+
+	// Export actions for DesktopPanel header
+	export const panelActions = {
+		createNewSession,
+		handleClear,
+		handleCancel,
+		getTerminalRef: () => terminalRef,
+		getSessions: () => terminalStore.sessions,
+		getActiveSession: () => activeSession,
+		isExecuting: () => isExecuting,
+		isCancelling: () => isCancelling
+	};
+</script>
+
+<div class="h-full flex flex-col bg-transparent">
+	{#if !hasActiveProject}
+		<div
+			class="flex-1 flex flex-col items-center justify-center gap-3 text-slate-600 dark:text-slate-500 text-sm"
+		>
+			<Icon name="lucide:terminal" class="w-10 h-10 opacity-30" />
+			<span>No project selected</span>
+		</div>
+	{:else}
+		<!-- Terminal Content -->
+		<div class="flex-1 overflow-hidden">
+			<Terminal bind:this={terminalRef} />
+		</div>
+	{/if}
+</div>

package/frontend/lib/constants/preview.ts

@@ -0,0 +1,45 @@
+// Preview Configuration
+// Centralized configuration for preview components
+
+/**
+ * Device viewport dimensions
+ * These are the physical pixel dimensions for each device type.
+ * Desktop and laptop are naturally landscape (width > height).
+ * Tablet and mobile are naturally portrait (height > width).
+ */
+export const DEVICE_VIEWPORTS = {
+	desktop: { width: 1920, height: 1080 },  // Naturally landscape
+	laptop: { width: 1280, height: 800 },    // Naturally landscape
+	tablet: { width: 820, height: 1050 },    // Naturally portrait
+	mobile: { width: 393, height: 740 }      // Naturally portrait
+} as const;
+
+// Type exports
+export type DeviceSize = keyof typeof DEVICE_VIEWPORTS;
+export type Rotation = 'portrait' | 'landscape';
+
+/**
+ * Get viewport dimensions based on device size and rotation
+ *
+ * SIMPLE RULE:
+ * - Portrait: height > width (vertical orientation)
+ * - Landscape: width > height (horizontal orientation)
+ */
+export function getViewportDimensions(
+	deviceSize: DeviceSize,
+	rotation: Rotation
+): { width: number; height: number } {
+	const viewport = DEVICE_VIEWPORTS[deviceSize];
+
+	// Get the larger and smaller dimension
+	const larger = Math.max(viewport.width, viewport.height);
+	const smaller = Math.min(viewport.width, viewport.height);
+
+	if (rotation === 'portrait') {
+		// Portrait: height > width (vertical)
+		return { width: smaller, height: larger };
+	} else {
+		// Landscape: width > height (horizontal)
+		return { width: larger, height: smaller };
+	}
+}