@myrialabs/clopen 0.0.1

package/frontend/lib/components/workspace/WorkspaceLayout.svelte

@@ -0,0 +1,169 @@
+<script lang="ts">
+	import { onMount, onDestroy } from 'svelte';
+	import { fade } from 'svelte/transition';
+	import { browser } from '$frontend/lib/app-environment';
+
+	// Stores
+	import {
+		workspaceState,
+		initializeWorkspace,
+	} from '$frontend/lib/stores/ui/workspace.svelte';
+	import { appState, setAppLoading, setAppInitialized, restoreLastView } from '$frontend/lib/stores/core/app.svelte';
+	import { projectState } from '$frontend/lib/stores/core/projects.svelte';
+	import { sessionState } from '$frontend/lib/stores/core/sessions.svelte';
+
+	// Components
+	import DesktopLayout from './layout/DesktopLayout.svelte';
+	import MobileLayout from './layout/MobileLayout.svelte';
+	import LoadingScreen from '$frontend/lib/components/common/LoadingScreen.svelte';
+	import ModalProvider from '$frontend/lib/components/common/ModalProvider.svelte';
+	import SettingsModal from '$frontend/lib/components/settings/SettingsModal.svelte';
+	import HistoryModal from '$frontend/lib/components/history/HistoryModal.svelte';
+
+	// Services
+	import { initializeTheme } from '$frontend/lib/utils/theme';
+	import { initializeStore } from '$frontend/lib/stores/core/app.svelte';
+	import { initializeProjects } from '$frontend/lib/stores/core/projects.svelte';
+	import { initializeSessions } from '$frontend/lib/stores/core/sessions.svelte';
+	import { initializeNotifications } from '$frontend/lib/stores/ui/notification.svelte';
+	import { applyServerSettings } from '$frontend/lib/stores/features/settings.svelte';
+	import { userStore } from '$frontend/lib/stores/features/user.svelte';
+	import { initPresence } from '$frontend/lib/stores/core/presence.svelte';
+	import ws from '$frontend/lib/utils/ws';
+	import { debug } from '$shared/utils/logger';
+
+	const { children } = $props();
+
+	// Responsive state
+	let isMobile = $state(false);
+	let windowWidth = $state(0);
+
+	// Chat History modal state
+	let showHistoryModal = $state(false);
+
+	function closeHistoryModal() {
+		showHistoryModal = false;
+	}
+
+	// Loading state
+	let loadingProgress = $state(0);
+	let loadingText = $state('Initializing Workspace...');
+
+	// Set progress directly — CSS transition in LoadingScreen handles smooth animation
+	function setProgress(value: number, text?: string) {
+		loadingProgress = value;
+		if (text) loadingText = text;
+	}
+
+	// Responsive handler
+	function handleResize() {
+		if (browser) {
+			windowWidth = window.innerWidth;
+			isMobile = windowWidth < 1024;
+		}
+	}
+
+	// Initialize
+	onMount(async () => {
+		handleResize();
+		window.addEventListener('resize', handleResize);
+
+		setAppLoading(true);
+
+		try {
+			// Step 1: Core initialization (theme, workspace, notifications — all sync/localStorage)
+			setProgress(10, 'Initializing core systems...');
+			initializeTheme();
+			initializeStore();
+			initializeNotifications();
+			initializeWorkspace();
+
+			// Step 2: Initialize user + wait for WebSocket in parallel
+			// userStore.initialize() reads localStorage (fast) and sets WS context locally.
+			// waitUntilConnected() waits for WS to connect and sync any pending context.
+			setProgress(20, 'Connecting...');
+			await Promise.all([
+				userStore.initialize(),
+				ws.waitUntilConnected(10000)
+			]);
+
+			// Step 3: Restore user state from server
+			setProgress(30, 'Restoring state...');
+			let serverState: { currentProjectId: string | null; lastView: string | null; settings: any } | null = null;
+			try {
+				serverState = await ws.http('user:restore-state', {});
+				debug.log('workspace', 'Server state restored:', serverState);
+			} catch (err) {
+				debug.warn('workspace', 'Failed to restore server state, using defaults:', err);
+			}
+
+			// Step 4: Apply restored state + setup presence (sync operations)
+			setProgress(40);
+			if (serverState?.settings) {
+				applyServerSettings(serverState.settings);
+			}
+			restoreLastView(serverState?.lastView);
+			initPresence();
+
+			// Step 5: Load projects (with server-restored currentProjectId)
+			setProgress(50, 'Loading projects...');
+			await initializeProjects(serverState?.currentProjectId);
+
+			// Step 6: Load sessions
+			setProgress(70, 'Restoring sessions...');
+			await initializeSessions();
+
+			// Step 7: Ready
+			setProgress(100, 'Ready!');
+		} catch (error) {
+			debug.error('workspace', 'Initialization error:', error);
+			setProgress(100, 'Error during initialization');
+		} finally {
+			// Small delay for CSS transition to finish, then dismiss loading screen
+			setTimeout(() => {
+				setAppInitialized();
+			}, 100);
+		}
+	});
+
+	onDestroy(() => {
+		if (browser) {
+			window.removeEventListener('resize', handleResize);
+		}
+	});
+</script>
+
+<!-- Loading Screen -->
+<LoadingScreen bind:isVisible={appState.isAppLoading} progress={loadingProgress} {loadingText} />
+
+<!-- Main Workspace Layout -->
+<div
+	class="h-screen w-screen overflow-hidden {isMobile ? 'bg-white/90 dark:bg-slate-900/98' : 'bg-slate-50 dark:bg-slate-900/70'} text-slate-900 dark:text-slate-100 font-sans"
+>
+	<!-- Skip link for accessibility -->
+	<a
+		href="#main-content"
+		class="sr-only focus:not-sr-only focus:absolute focus:z-50 focus:p-4 focus:bg-violet-600 focus:text-white"
+	>
+		Skip to main content
+	</a>
+
+	{#if isMobile}
+		<!-- Mobile Layout -->
+		<div class="flex flex-col h-full w-full" in:fade={{ duration: 200 }}>
+			<MobileLayout />
+		</div>
+	{:else}
+		<!-- Desktop Layout -->
+		<DesktopLayout />
+	{/if}
+</div>
+
+<!-- Modal Provider -->
+<ModalProvider />
+
+<!-- Settings Modal -->
+<SettingsModal />
+
+<!-- History Modal -->
+<HistoryModal bind:isOpen={showHistoryModal} onClose={closeHistoryModal} />

package/frontend/lib/components/workspace/layout/DesktopLayout.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { workspaceState } from '$frontend/lib/stores/ui/workspace.svelte';
+	import DesktopNavigator from '../DesktopNavigator.svelte';
+	import Layout from './split-pane/Layout.svelte';
+</script>
+
+<div class="flex h-full w-full">
+	<!-- Desktop Navigator -->
+	<DesktopNavigator />
+
+	<!-- Main Workspace with Split Pane Layout -->
+	<main id="workspace-main" class="flex-1 h-full min-w-0 relative overflow-hidden p-3 box-border">
+		<Layout node={workspaceState.layout} />
+	</main>
+</div>

package/frontend/lib/components/workspace/layout/MobileLayout.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { workspaceState } from '$frontend/lib/stores/ui/workspace.svelte';
+	import PanelContainer from '../PanelContainer.svelte';
+	import MobileNavigator from '../MobileNavigator.svelte';
+
+	const activePanelId = $derived(workspaceState.activeMobilePanel);
+</script>
+
+<div class="flex flex-col h-full w-full">
+	<MobileNavigator />
+
+	<main id="main-content" class="flex-1 overflow-hidden">
+		{#if activePanelId}
+			<PanelContainer panelId={activePanelId} />
+		{/if}
+	</main>
+</div>

package/frontend/lib/components/workspace/layout/split-pane/Container.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+	import type { SplitDirection, SplitNode } from '$frontend/lib/stores/ui/workspace.svelte';
+	import Layout from './Layout.svelte';
+	import Handle from './Handle.svelte';
+
+	interface Props {
+		direction: SplitDirection;
+		ratio: number;
+		path: number[];
+		child1: SplitNode;
+		child2: SplitNode;
+	}
+
+	const { direction, ratio, path, child1, child2 }: Props = $props();
+
+	// Calculate sizes for flex basis
+	const child1Size = $derived(`${ratio}%`);
+	const child2Size = $derived(`${100 - ratio}%`);
+
+	// Calculate sizes for container
+	const size = 'calc(100% - (var(--spacing) * 3))';
+	const width = $derived(direction === 'horizontal' ? '100%' : size);
+	const height = $derived(direction === 'horizontal' ? size : '100%');
+
+	// Flex direction based on split direction
+	const flexDirection = $derived(direction === 'horizontal' ? 'flex-col' : 'flex-row');
+</script>
+
+<div class="split-pane-container flex {flexDirection} gap-0" style="width: {width}; height: {height};">
+	<!-- Child 1 -->
+	<div class="split-pane-child overflow-hidden min-w-0" style="flex: 0 0 {child1Size};">
+		<Layout node={child1} path={[...path, 0]} />
+	</div>
+
+	<!-- Resize Handle -->
+	<Handle {direction} {path} currentRatio={ratio} />
+
+	<!-- Child 2 -->
+	<div class="split-pane-child overflow-hidden min-w-0" style="flex: 0 0 {child2Size};">
+		<Layout node={child2} path={[...path, 1]} />
+	</div>
+</div>

package/frontend/lib/components/workspace/layout/split-pane/Handle.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+	import type { SplitDirection } from '$frontend/lib/stores/ui/workspace.svelte';
+	import { setSplitRatio, workspaceState } from '$frontend/lib/stores/ui/workspace.svelte';
+
+	interface Props {
+		direction: SplitDirection;
+		path: number[];
+		currentRatio: number; // Get from parent
+		onResize?: (newRatio: number) => void;
+	}
+
+	const { direction, path, currentRatio, onResize }: Props = $props();
+
+	// Drag state
+	let isDragging = $state(false);
+	let dragStartPos = $state(0);
+	let dragStartRatio = $state(0);
+	let containerRect = $state<DOMRect | null>(null);
+
+	function handleResizeStart(event: MouseEvent) {
+		event.preventDefault();
+
+		isDragging = true;
+		dragStartPos = direction === 'horizontal' ? event.clientY : event.clientX;
+		dragStartRatio = currentRatio; // Save current ratio at drag start
+
+		// Get container dimensions
+		const container = (event.target as HTMLElement).closest('.split-pane-container');
+		if (container) {
+			containerRect = container.getBoundingClientRect();
+		}
+
+		document.addEventListener('mousemove', handleDragMove);
+		document.addEventListener('mouseup', handleDragEnd);
+		document.body.style.cursor = direction === 'horizontal' ? 'row-resize' : 'col-resize';
+		document.body.style.userSelect = 'none';
+	}
+
+	function handleDragMove(event: MouseEvent) {
+		if (!isDragging || !containerRect) return;
+
+		const currentPos = direction === 'horizontal' ? event.clientY : event.clientX;
+		const delta = currentPos - dragStartPos;
+
+		// Calculate delta as percentage of container size
+		const containerSize =
+			direction === 'horizontal' ? containerRect.height : containerRect.width;
+		const deltaPercent = (delta / containerSize) * 100;
+
+		// Calculate new ratio (clamped between 10% and 90%)
+		const newRatio = Math.max(10, Math.min(90, dragStartRatio + deltaPercent));
+
+		// Update ratio via store
+		setSplitRatio(path, newRatio);
+
+		// Call optional callback
+		if (onResize) {
+			onResize(newRatio);
+		}
+	}
+
+	function handleDragEnd() {
+		isDragging = false;
+		containerRect = null;
+		document.removeEventListener('mousemove', handleDragMove);
+		document.removeEventListener('mouseup', handleDragEnd);
+		document.body.style.cursor = '';
+		document.body.style.userSelect = '';
+	}
+</script>
+
+<button
+	type="button"
+	class="shrink-0 relative z-10 transition-colors duration-150
+		{direction === 'horizontal' ? 'h-3 w-full cursor-row-resize' : 'w-3 h-full cursor-col-resize'}
+		{isDragging ? 'bg-violet-500/10' : 'hover:bg-violet-500/5'}"
+	aria-label="Resize panels"
+	onmousedown={handleResizeStart}
+>
+	<div
+		class="transition-all duration-150 bg-violet-500/20 rounded
+			{direction === 'horizontal' ? 'h-0.5 w-12 mx-auto' : 'w-0.5 h-12 my-auto mx-auto'}
+			{isDragging ? 'bg-violet-600 scale-110' : ''}"
+	></div>
+</button>

package/frontend/lib/components/workspace/layout/split-pane/Layout.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import type { SplitNode } from '$frontend/lib/stores/ui/workspace.svelte';
+	import PanelContainer from '../../PanelContainer.svelte';
+	import Container from './Container.svelte';
+
+	interface Props {
+		node: SplitNode;
+		path?: number[]; // Path in tree for resize updates
+	}
+
+	const { node, path = [] }: Props = $props();
+</script>
+
+{#if node.type === 'panel'}
+	<!-- Panel Leaf: Render panel wrapper -->
+	{#if node.panelId}
+		<div class="split-pane-panel h-full w-full overflow-hidden">
+			<PanelContainer panelId={node.panelId} />
+		</div>
+	{:else}
+		<!-- Empty slot -->
+		<div
+			class="split-pane-empty flex items-center justify-center h-full w-full bg-slate-100 dark:bg-slate-900/50 border-2 border-dashed border-slate-300 dark:border-slate-600 rounded-lg"
+		>
+			<span class="text-sm text-slate-400 dark:text-slate-500">Empty Panel</span>
+		</div>
+	{/if}
+{:else if node.type === 'split'}
+	<!-- Split Container: Render split with two children -->
+	<Container
+		direction={node.direction}
+		ratio={node.ratio}
+		path={path}
+		child1={node.children[0]}
+		child2={node.children[1]}
+	/>
+{/if}

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

@@ -0,0 +1,274 @@
+<script lang="ts">
+	import { sessionState, setCurrentSession, createNewChatSession, clearMessages, loadMessagesForSession } from '$frontend/lib/stores/core/sessions.svelte';
+	import { projectState } from '$frontend/lib/stores/core/projects.svelte';
+	import { appState } from '$frontend/lib/stores/core/app.svelte';
+	import { addNotification } from '$frontend/lib/stores/ui/notification.svelte';
+	import { onMount } from 'svelte';
+	import { fade } from 'svelte/transition';
+	import ChatMessages from '$frontend/lib/components/chat/message/ChatMessages.svelte';
+	import ChatInput from '$frontend/lib/components/chat/input/ChatInput.svelte';
+	import FloatingTodoList from '$frontend/lib/components/chat/widgets/FloatingTodoList.svelte';
+	import TimelineModal from '$frontend/lib/components/checkpoint/TimelineModal.svelte';
+	import Icon from '$frontend/lib/components/common/Icon.svelte';
+	import Button from '$frontend/lib/components/common/Button.svelte';
+	import { debug } from '$shared/utils/logger';
+	import ws from '$frontend/lib/utils/ws';
+	import { chatService } from '$frontend/lib/services/chat/chat.service';
+	import { setSkipNextRestore } from '$frontend/lib/stores/ui/chat-input.svelte';
+	import { userStore } from '$frontend/lib/stores/features/user.svelte';
+
+	// Props
+	interface Props {
+		showMobileHeader?: boolean;
+	}
+
+	const { showMobileHeader = false }: Props = $props();
+
+	// Welcome state - don't show during restoration
+	const isWelcomeState = $derived(
+		sessionState.messages.length === 0 &&
+		!appState.isRestoring
+	);
+
+	// Check if we should show input (not during restoration)
+	const showInput = $derived(!appState.isRestoring);
+
+	// Project-aware state
+	const hasActiveProject = $derived(projectState.currentProject !== null);
+
+	// Scroll container
+	const scrollContainer: HTMLElement | undefined = $state();
+
+	// Checkpoints modal state
+	let showCheckpoints = $state(false);
+
+	function openCheckpoints() {
+		showCheckpoints = true;
+	}
+
+	function closeCheckpoints() {
+		showCheckpoints = false;
+	}
+
+	// Extract text from message content
+	function extractMessageText(message: any): string {
+		if (!('message' in message) || !message.message?.content) {
+			return '';
+		}
+		const content = message.message.content;
+
+		if (typeof content === 'string') {
+			return content;
+		} else if (Array.isArray(content)) {
+			// Find text content in array
+			for (const item of content) {
+				if (typeof item === 'string') {
+					return item;
+				} else if (typeof item === 'object' && item !== null) {
+					if ('text' in item && typeof (item as any).text === 'string') {
+						return (item as any).text;
+					}
+				}
+			}
+		}
+		return '';
+	}
+
+	// Process timeline messages with all necessary data
+	const timelineMessages = $derived(
+		sessionState.messages
+			.filter(m => {
+				if (m.type !== 'user') return false;
+				const text = extractMessageText(m);
+				return text.length > 0;
+			})
+			.map(msg => ({
+				id: msg.metadata?.message_id,
+				timestamp: msg.metadata?.created_at || '',
+				date: msg.metadata?.created_at ? new Date(msg.metadata.created_at).toLocaleDateString() : 'Unknown',
+				time: msg.metadata?.created_at ? new Date(msg.metadata.created_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) : 'Unknown',
+				text: extractMessageText(msg)
+			}))
+	);
+
+	// Handle restore from timeline
+	async function handleTimelineRestore(messageId: string | undefined, messageTimestamp: string) {
+		if (!messageId) {
+			addNotification({
+				type: 'error',
+				title: 'Restore Failed',
+				message: 'Message ID not found',
+				duration: 3000
+			});
+			return;
+		}
+
+		try {
+			// Send restore request via WebSocket HTTP
+			await ws.http('snapshot:restore', {
+				messageId: messageId,
+				sessionId: sessionState.currentSession?.id || ''
+			});
+
+			// Close modal
+			showCheckpoints = false;
+
+			// Reload messages from database to update UI
+			if (sessionState.currentSession?.id) {
+				await loadMessagesForSession(sessionState.currentSession.id);
+			}
+
+			addNotification({
+				type: 'success',
+				title: 'Project Restored',
+				message: `Successfully restored to checkpoint at ${new Date(messageTimestamp).toLocaleTimeString()}`,
+				duration: 5000
+			});
+		} catch (error) {
+			debug.error('chat', 'Restore error:', error);
+			addNotification({
+				type: 'error',
+				title: 'Restore Failed',
+				message: error instanceof Error ? error.message : 'Unknown error',
+				duration: 5000
+			});
+		}
+	}
+
+	async function startNewChat() {
+		if (!hasActiveProject || !projectState.currentProject) {
+			addNotification({
+				type: 'warning',
+				title: 'No Project Selected',
+				message: 'Please select a project first',
+				duration: 3000
+			});
+			return;
+		}
+
+		// Cancel active stream if running
+		if (appState.isLoading) {
+			chatService.cancelRequest();
+		}
+
+		// Clear server input state and prevent stale restore on ChatInput remount
+		setSkipNextRestore(true);
+		const currentUserId = userStore.currentUser?.id;
+		const currentChatSessionId = sessionState.currentSession?.id;
+		if (currentUserId && currentChatSessionId) {
+			ws.emit('chat:input-sync', {
+				text: '',
+				senderId: currentUserId,
+				chatSessionId: currentChatSessionId,
+				attachments: []
+			});
+		}
+
+		// Clear messages for local view
+		clearMessages();
+
+		// Create a new session (existing sessions stay active for other users)
+		const newSession = await createNewChatSession(projectState.currentProject.id);
+
+		if (newSession) {
+			await setCurrentSession(newSession);
+		} else {
+			addNotification({
+				type: 'error',
+				title: 'Failed to Create Session',
+				message: 'Could not create a new chat session',
+				duration: 3000
+			});
+		}
+	}
+
+	// Check for active stream on mount only if needed
+	onMount(async () => {
+		debug.log('chat', 'Component mounted');
+		// WebSocket reconnection is handled automatically by ws client
+	});
+
+	// Export actions for DesktopPanel header
+	export const panelActions = {
+		checkpoints: openCheckpoints,
+		newChat: startNewChat,
+		hasMessages: () => sessionState.messages.length > 0
+	};
+</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:bot" class="w-10 h-10 opacity-30" />
+			<span>No project selected</span>
+		</div>
+	{:else}
+		<div class="flex-1 flex flex-col overflow-hidden {showMobileHeader ? '' : '-m-3'}">
+			{#if isWelcomeState && !appState.isRestoring}
+				<!-- Welcome state with modern design -->
+				<div class="flex-1 overflow-y-auto overflow-x-hidden">
+					<div class="min-h-full flex items-center justify-center p-4">
+						<div class="w-full max-w-4xl space-y-6 md:space-y-8 lg:space-y-10">
+							<!-- Modern hero section -->
+							<div class="text-center space-y-3 md:space-y-4 px-6">
+								<div class="space-y-3 md:space-y-4">
+									<h1 class="text-3xl md:text-4xl font-semibold text-slate-900 dark:text-slate-100">
+										Build apps & websites with AI
+									</h1>
+									<p class="md:text-lg text-slate-600 dark:text-slate-400 max-w-2xl mx-auto">
+										Describe your idea. Get production-ready code.
+									</p>
+								</div>
+							</div>
+
+							<!-- Input area integrated in welcome state -->
+							{#if showInput}
+								<div class="w-full px-4 space-y-4" in:fade={{ duration: 200, delay: 100 }}>
+									<ChatInput />
+								</div>
+							{/if}
+						</div>
+					</div>
+				</div>
+			{:else}
+				<!-- Enhanced chat interface -->
+				<div class="flex-1 flex flex-col overflow-hidden">
+					<div class="flex-1 flex justify-center overflow-hidden">
+						<div class="w-full flex flex-col overflow-hidden">
+							<div class="flex-1 overflow-y-auto overflow-x-hidden">
+								<ChatMessages {scrollContainer} />
+							</div>
+						</div>
+					</div>
+				</div>
+
+				<!-- Input area with SDK integration -->
+				{#if showInput}
+					<div
+						class="sticky bottom-0 flex-shrink-0 bg-gradient-to-t from-slate-50 via-slate-50 dark:from-slate-900 dark:via-slate-900 to-transparent"
+						in:fade={{ duration: 200, delay: 100 }}
+					>
+						<div class="flex justify-center">
+							<div class="w-full max-w-5xl px-4 pb-4 pt-2">
+								<ChatInput />
+							</div>
+						</div>
+					</div>
+				{/if}
+			{/if}
+		</div>
+
+		<!-- Floating TodoList (only shown when there's an active session with todos) -->
+		{#if sessionState.currentSession}
+			<FloatingTodoList />
+		{/if}
+
+		<!-- Checkpoint Modal -->
+		<TimelineModal
+			bind:isOpen={showCheckpoints}
+			onClose={closeCheckpoints}
+		/>
+	{/if}
+</div>