@myrialabs/clopen 0.0.1

package/frontend/lib/services/preview/browser/mcp-integration.svelte.ts

@@ -0,0 +1,67 @@
+/**
+ * MCP Preview Integration Service
+ *
+ * Handles browser session creation from MCP tools and automatically
+ * opens the preview panel to display the session visually.
+ */
+
+import ws from '$frontend/lib/utils/ws';
+import { showPanel } from '$frontend/lib/stores/ui/workspace.svelte';
+import { debug } from '$shared/utils/logger';
+
+export interface MCPLaunchRequest {
+	url: string;
+	deviceSize: 'desktop' | 'laptop' | 'tablet' | 'mobile';
+	rotation: 'portrait' | 'landscape';
+}
+
+/**
+ * Global state for MCP launch requests
+ */
+export const mcpPreviewState = $state<{
+	pendingLaunch: MCPLaunchRequest | null;
+	isActive: boolean;
+}>({
+	pendingLaunch: null,
+	isActive: false
+});
+
+/**
+ * Initialize MCP preview integration
+ * Listens for browser launch requests from MCP tools
+ */
+export function initializeMCPPreview() {
+	debug.log('mcp', '🎬 Initializing MCP Preview Integration');
+
+	// Note: MCP launch event listener removed in the new architecture
+	// MCP interactions now use HTTP request-response pattern
+	// defined in backend/ws/preview/browser/mcp.ts
+
+	debug.log('mcp', '✓ MCP Preview Integration initialized');
+}
+
+/**
+ * Clear pending launch request
+ */
+export function clearMCPLaunchRequest() {
+	mcpPreviewState.pendingLaunch = null;
+	mcpPreviewState.isActive = false;
+}
+
+/**
+ * Get pending launch request
+ */
+export function getPendingLaunchRequest(): MCPLaunchRequest | null {
+	return mcpPreviewState.pendingLaunch;
+}
+
+/**
+ * Check if MCP preview is active
+ */
+export function isMCPPreviewActive(): boolean {
+	return mcpPreviewState.isActive;
+}
+
+// Legacy exports for compatibility
+export const clearMCPPreviewSession = clearMCPLaunchRequest;
+export const getCurrentMCPSession = getPendingLaunchRequest;

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

@@ -0,0 +1,23 @@
+/**
+ * Preview Services Module
+ *
+ * Centralized exports for all preview-related services
+ */
+
+// Browser-specific services
+// Note: Session service removed - operations now in browser-tab-operations.svelte.ts module
+export { browserConsoleService } from './browser/browser-console.service';
+export type { ConsoleMessage } from './browser/browser-console.service';
+export { BrowserWebCodecsService } from './browser/browser-webcodecs.service';
+
+// MCP Preview Integration
+export {
+	initializeMCPPreview,
+	clearMCPPreviewSession,
+	clearMCPLaunchRequest,
+	getCurrentMCPSession,
+	getPendingLaunchRequest,
+	isMCPPreviewActive,
+	mcpPreviewState
+} from './browser/mcp-integration.svelte';
+export type { MCPLaunchRequest } from './browser/mcp-integration.svelte';

package/frontend/lib/services/project/index.ts

@@ -0,0 +1,8 @@
+/**
+ * Project Services Module
+ *
+ * Centralized exports for all project-related services
+ */
+
+export { projectStatusService } from './status.service';
+export type { ProjectStatus } from './status.service';

package/frontend/lib/services/project/status.service.ts

@@ -0,0 +1,159 @@
+/**
+ * Project Status Service
+ * Tracks active streams and user presence for projects via WebSocket
+ * Fully realtime - no cache, no polling
+ *
+ * Single event: `projects:presence-updated` contains full state
+ */
+
+import { getOrCreateAnonymousUser, type AnonymousUser } from '$shared/utils/anonymous-user';
+import ws from '$frontend/lib/utils/ws';
+import { debug } from '$shared/utils/logger';
+
+export interface ProjectStatus {
+  projectId: string;
+  hasActiveStreams: boolean;
+  activeStreamCount: number;
+  activeUsers: { userId: string; userName: string }[];
+  streams: {
+    streamId: string;
+    chatSessionId: string;
+    status: string;
+    startedAt: string;
+    messagesCount: number;
+  }[];
+  /** Per-chat-session user presence: { chatSessionId → users[] } */
+  chatSessionUsers?: Record<string, { userId: string; userName: string }[]>;
+}
+
+class ProjectStatusService {
+  private currentUser: AnonymousUser | null = null;
+  private currentProjectId: string | null = null;
+  private initialized = false;
+  private statusUpdateCallbacks: Set<(statuses: ProjectStatus[]) => void> = new Set();
+  private unsubscribe: (() => void) | null = null;
+
+  /**
+   * Initialize the service - sets up WS listener
+   * Called automatically on first use
+   */
+  async initialize(): Promise<void> {
+    if (typeof window === 'undefined' || this.initialized) return;
+
+    this.currentUser = await getOrCreateAnonymousUser();
+    debug.log('project', 'Initialized with user:', this.currentUser?.name);
+
+    this.unsubscribe = ws.on('projects:presence-updated', (data) => {
+      try {
+        if (data.type === 'presence-updated' && data.data) {
+          const statuses = Array.isArray(data.data) ? data.data : [data.data];
+          this.statusUpdateCallbacks.forEach(callback => {
+            try {
+              callback(statuses);
+            } catch (error) {
+              debug.error('project', 'Error in status callback:', error);
+            }
+          });
+        }
+      } catch (error) {
+        debug.error('project', 'Error handling presence update:', error);
+      }
+    });
+
+    this.initialized = true;
+  }
+
+  private async ensureInitialized(): Promise<void> {
+    if (!this.initialized) {
+      await this.initialize();
+    }
+  }
+
+  /**
+   * Subscribe to real-time presence updates
+   * Auto-initializes WS listener if not done yet
+   */
+  onStatusUpdate(callback: (statuses: ProjectStatus[]) => void): () => void {
+    this.statusUpdateCallbacks.add(callback);
+    this.ensureInitialized();
+
+    return () => {
+      this.statusUpdateCallbacks.delete(callback);
+    };
+  }
+
+  /**
+   * Join a project - start presence tracking
+   */
+  async startTracking(projectId: string): Promise<void> {
+    if (typeof window === 'undefined') return;
+
+    await this.ensureInitialized();
+
+    if (this.currentProjectId && this.currentProjectId !== projectId) {
+      await this.stopTracking();
+    }
+
+    this.currentProjectId = projectId;
+
+    if (this.currentUser) {
+      ws.emit('projects:join', {
+        userName: this.currentUser.name
+      });
+    }
+
+    document.addEventListener('visibilitychange', this.handleVisibilityChange);
+    window.addEventListener('beforeunload', this.handleBeforeUnload);
+  }
+
+  /**
+   * Leave a project - stop presence tracking
+   */
+  async stopTracking(): Promise<void> {
+    if (this.currentProjectId && this.currentUser) {
+      // Send projectId explicitly because ws.setProject() may have already changed context
+      ws.emit('projects:leave', {
+        projectId: this.currentProjectId
+      });
+    }
+
+    if (typeof window !== 'undefined') {
+      document.removeEventListener('visibilitychange', this.handleVisibilityChange);
+      window.removeEventListener('beforeunload', this.handleBeforeUnload);
+    }
+
+    this.currentProjectId = null;
+  }
+
+  cleanup(): void {
+    if (this.unsubscribe) {
+      this.unsubscribe();
+      this.unsubscribe = null;
+    }
+    this.statusUpdateCallbacks.clear();
+    this.initialized = false;
+  }
+
+  private handleVisibilityChange = () => {
+    if (!document.hidden && this.currentProjectId && this.currentUser) {
+      ws.http('projects:update-presence', {
+        userName: this.currentUser.name,
+        action: 'update'
+      }).catch(() => {});
+    }
+  };
+
+  private handleBeforeUnload = () => {
+    if (this.currentProjectId && this.currentUser) {
+      ws.emit('projects:leave', {
+        projectId: this.currentProjectId
+      });
+    }
+  };
+
+  getCurrentUser(): AnonymousUser | null {
+    return this.currentUser;
+  }
+}
+
+export const projectStatusService = new ProjectStatusService();

package/frontend/lib/services/snapshot/snapshot.service.ts

@@ -0,0 +1,47 @@
+/**
+ * Snapshot Service - WebSocket Implementation
+ *
+ * Provides snapshot/restore functionality using WebSocket
+ */
+
+import ws from '$frontend/lib/utils/ws';
+import type { TimelineResponse } from '$frontend/lib/components/checkpoint/timeline/types';
+
+class SnapshotService {
+  /**
+   * Get timeline data for a session
+   */
+  async getTimeline(sessionId: string): Promise<TimelineResponse> {
+    return ws.http('snapshot:get-timeline', { sessionId });
+  }
+
+  /**
+   * Restore to a checkpoint (unified - replaces undo/redo)
+   */
+  async restore(messageId: string, sessionId: string): Promise<any> {
+    return ws.http('snapshot:restore', { messageId, sessionId });
+  }
+
+  /**
+   * @deprecated Use restore() instead. Kept for backward compatibility.
+   */
+  async undo(messageId: string, sessionId: string): Promise<any> {
+    return this.restore(messageId, sessionId);
+  }
+
+  /**
+   * @deprecated Use restore() instead. Kept for backward compatibility.
+   */
+  async redo(branchName: string, sessionId: string, messageId?: string): Promise<any> {
+    if (messageId) {
+      return this.restore(messageId, sessionId);
+    }
+    throw new Error('messageId is required for restore operation');
+  }
+}
+
+// Export singleton instance
+export const snapshotService = new SnapshotService();
+
+// Export class
+export { SnapshotService };

package/frontend/lib/services/terminal/background/index.ts

@@ -0,0 +1,130 @@
+/**
+ * Background Terminal Service
+ * Manages terminal sessions that persist across browser refreshes
+ */
+
+import { terminalSessionManager } from '../session.service';
+import { terminalPersistenceManager } from '../persistence.service';
+import { terminalStore } from '$frontend/lib/stores/features/terminal.svelte';
+
+// Import modular services
+import { streamManager } from './stream-manager';
+import { sessionRestoreService } from './session-restore';
+
+import type { StreamingResponse } from '../terminal.service';
+
+class BackgroundTerminalService {
+	private isInitialized = false;
+
+	/**
+	 * Initialize the background service
+	 */
+	async initialize(): Promise<void> {
+		if (this.isInitialized || typeof window === 'undefined') return;
+
+		this.isInitialized = true;
+
+		// Load persisted terminal sessions FIRST before any other initialization
+		await sessionRestoreService.restoreTerminalSessions();
+
+		// Save terminal state periodically
+		this.startPeriodicSave();
+
+		// Save state before unload
+		window.addEventListener('beforeunload', () => {
+			this.saveCurrentState();
+		});
+	}
+
+	/**
+	 * Check if there are restored sessions
+	 */
+	hasRestoredSessions(): boolean {
+		return sessionRestoreService.hasRestoredSessions();
+	}
+
+	/**
+	 * Check if restoration is done
+	 */
+	isRestorationDone(): boolean {
+		return sessionRestoreService.isRestorationDone();
+	}
+
+
+	/**
+	 * Check if a session has an active stream (PTY process running)
+	 */
+	hasActiveStream(sessionId: string): boolean {
+		return streamManager.hasActiveStream(sessionId);
+	}
+
+	/**
+	 * Check if any session has active streams
+	 */
+	hasAnyActiveStreams(): boolean {
+		return streamManager.hasAnyActiveStreams();
+	}
+
+	/**
+	 * Start a new terminal stream
+	 */
+	startStream(sessionId: string, streamId: string, command: string, projectId?: string): void {
+		streamManager.startStream(sessionId, streamId, command, projectId);
+		this.saveCurrentState();
+	}
+
+	/**
+	 * End a terminal stream
+	 */
+	endStream(sessionId: string, forceClear: boolean = false): void {
+		streamManager.endStream(sessionId, forceClear);
+		this.saveCurrentState();
+	}
+
+	/**
+	 * Save current terminal state
+	 */
+	private saveCurrentState(): void {
+		sessionRestoreService.saveCurrentState();
+	}
+
+	/**
+	 * Start periodic save
+	 */
+	private startPeriodicSave(): void {
+		// Save state every 30 seconds
+		setInterval(() => {
+			this.saveCurrentState();
+		}, 30000);
+	}
+
+	/**
+	 * Check if service is ready
+	 */
+	isReady(): boolean {
+		return this.isInitialized;
+	}
+
+	/**
+	 * Get active streams count
+	 */
+	getActiveStreamsCount(): number {
+		return streamManager.getActiveStreamsCount();
+	}
+
+	/**
+	 * Clean up service
+	 */
+	cleanup(): void {
+		// Clean up stream manager
+		streamManager.cleanup();
+
+		// Save final state
+		this.saveCurrentState();
+
+		this.isInitialized = false;
+	}
+}
+
+// Export singleton instance
+export const backgroundTerminalService = new BackgroundTerminalService();