@myrialabs/clopen 0.0.1

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

@@ -0,0 +1,7 @@
+/**
+ * Chat Services Module
+ *
+ * Centralized exports for all chat-related services
+ */
+
+export { ChatService } from './chat.service';

package/frontend/lib/services/notification/global-stream-monitor.ts

@@ -0,0 +1,86 @@
+/**
+ * Global Stream Monitor Service
+ *
+ * Single source of truth for chat stream notifications (sound + push).
+ *
+ * Listens for chat:stream-finished events from the backend and triggers
+ * notifications for ALL projects — both active and non-active.
+ *
+ * The backend uses ws.emit.projectMembers() to send this event to all
+ * users who have been associated with the project, even if they switched
+ * to a different project.
+ */
+
+import { soundNotification, pushNotification } from '$frontend/lib/services/notification';
+import { projectState } from '$frontend/lib/stores/core/projects.svelte';
+import { sessionState } from '$frontend/lib/stores/core/sessions.svelte';
+import { debug } from '$shared/utils/logger';
+import ws from '$frontend/lib/utils/ws';
+
+class GlobalStreamMonitor {
+  private initialized = false;
+
+  /**
+   * Initialize the monitor - subscribes to the WS event.
+   * Safe to call multiple times (idempotent).
+   *
+   * Only triggers sound/push when the finished stream belongs to the
+   * user's current project AND current chat session.
+   */
+  initialize(): void {
+    if (this.initialized) return;
+    this.initialized = true;
+
+    debug.log('notification', 'GlobalStreamMonitor: Initializing WS listener');
+
+    ws.on('chat:stream-finished', async (data) => {
+      const { projectId, chatSessionId, status, timestamp } = data;
+      const isActiveProject = projectState.currentProject?.id === projectId;
+      const isActiveSession = sessionState.currentSession?.id === chatSessionId;
+
+      debug.log('notification', 'GlobalStreamMonitor: Stream finished', {
+        projectId,
+        chatSessionId,
+        status,
+        timestamp,
+        isActiveProject,
+        isActiveSession
+      });
+
+      // Only notify if the stream is for the user's current project AND session
+      if (!isActiveProject || !isActiveSession) return;
+
+      // Play sound notification
+      try {
+        await soundNotification.play();
+      } catch (error) {
+        debug.error('notification', 'Error playing sound notification:', error);
+      }
+
+      // Send push notification with project context
+      try {
+        const projectName = projectState.projects.find(p => p.id === projectId)?.name || 'Unknown';
+
+        if (status === 'completed') {
+          await pushNotification.sendChatComplete(`Chat response ready in "${projectName}"`);
+        } else if (status === 'error') {
+          await pushNotification.sendChatError(`Chat error in "${projectName}"`);
+        } else if (status === 'cancelled') {
+          await pushNotification.sendChatComplete(`Chat interrupted in "${projectName}"`);
+        }
+      } catch (error) {
+        debug.error('notification', 'Error sending push notification:', error);
+      }
+    });
+  }
+
+  /**
+   * Clear state (for cleanup/testing)
+   */
+  clear(): void {
+    debug.log('notification', 'GlobalStreamMonitor: Clearing state');
+  }
+}
+
+// Export singleton instance
+export const globalStreamMonitor = new GlobalStreamMonitor();

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

@@ -0,0 +1,8 @@
+/**
+ * Notification Services Module
+ *
+ * Centralized exports for all notification-related services
+ */
+
+export { pushNotification } from './push.service';
+export { soundNotification } from './sound.service';

package/frontend/lib/services/notification/push.service.ts

@@ -0,0 +1,144 @@
+/**
+ * Native Push Notification Service
+ * 
+ * Handles native browser push notifications for chat responses
+ */
+
+import { settings } from '$frontend/lib/stores/features/settings.svelte';
+
+import { debug } from '$shared/utils/logger';
+// Check if browser supports notifications
+function isSupported(): boolean {
+	return typeof window !== 'undefined' && 'Notification' in window;
+}
+
+// Get current permission status
+function getPermissionStatus(): NotificationPermission | null {
+	if (!isSupported()) return null;
+	return Notification.permission;
+}
+
+// Request notification permission
+async function requestPermission(): Promise<NotificationPermission> {
+	if (!isSupported()) {
+		throw new Error('Notifications not supported');
+	}
+	
+	const permission = await Notification.requestPermission();
+	return permission;
+}
+
+// Send native push notification
+async function sendNotification(
+	title: string,
+	options: NotificationOptions = {},
+	isTesting: boolean = false
+): Promise<void> {
+	// Check if push notifications are enabled in settings
+	if (!isTesting && !settings.pushNotifications) {
+		return;
+	}
+	
+	// Check browser support
+	if (!isSupported()) {
+		debug.warn('notification', 'Native notifications not supported');
+		return;
+	}
+	
+	// Check permission
+	const permission = getPermissionStatus();
+	if (permission !== 'granted') {
+		debug.warn('notification', 'Notification permission not granted:', permission);
+		return;
+	}
+	
+	try {
+		const notification = new Notification(title, {
+			icon: '/favicon.ico',
+			badge: '/favicon.ico',
+			...options
+		});
+		
+		// Auto-close notification after 5 seconds
+		setTimeout(() => {
+			notification.close();
+		}, 5000);
+		
+	} catch (error) {
+		debug.warn('notification', 'Failed to send notification:', error);
+	}
+}
+
+// Public API
+export const pushNotification = {
+	/**
+	 * Check if notifications are supported
+	 */
+	isSupported,
+	
+	/**
+	 * Get current permission status
+	 */
+	getPermissionStatus,
+	
+	/**
+	 * Request notification permission from user
+	 */
+	requestPermission,
+	
+	/**
+	 * Send notification for chat response completion
+	 */
+	async sendChatComplete(message?: string): Promise<void> {
+		await sendNotification('Claude Response Complete', {
+			body: message || 'Your chat response is ready',
+			tag: 'chat-complete'
+		});
+	},
+	
+	/**
+	 * Send notification for chat error
+	 */
+	async sendChatError(error?: string): Promise<void> {
+		await sendNotification('Claude Response Error', {
+			body: error || 'There was an error with your chat response',
+			tag: 'chat-error'
+		});
+	},
+	
+	/**
+	 * Test notification (for settings)
+	 */
+	async testNotification(): Promise<boolean> {
+		try {
+			await sendNotification('Test Notification', {
+				body: 'Push notifications are working correctly',
+				tag: 'test'
+			}, true);
+			return true;
+		} catch (error) {
+			debug.error('notification', 'Test notification failed:', error);
+			return false;
+		}
+	},
+	
+	/**
+	 * Initialize and request permissions if needed
+	 */
+	async initialize(): Promise<boolean> {
+		if (!isSupported()) {
+			return false;
+		}
+		
+		const currentPermission = getPermissionStatus();
+		
+		if (currentPermission === 'default') {
+			const permission = await requestPermission();
+			return permission === 'granted';
+		}
+		
+		return currentPermission === 'granted';
+	}
+};
+
+export default pushNotification;

package/frontend/lib/services/notification/sound.service.ts

@@ -0,0 +1,127 @@
+/**
+ * Sound Notification Service
+ * 
+ * Handles single audio notification for chat responses using local notification.ogg file
+ */
+
+import { settings } from '$frontend/lib/stores/features/settings.svelte';
+
+import { debug } from '$shared/utils/logger';
+// Cache for audio element
+let audioElement: HTMLAudioElement | null = null;
+
+// Local notification sound file path
+const NOTIFICATION_SOUND_URL = '/audio/notification.ogg';
+
+// Initialize audio element
+function initAudioElement(): HTMLAudioElement {
+	if (!audioElement) {
+		audioElement = new Audio();
+		audioElement.preload = 'auto';
+		audioElement.volume = 1;
+
+		// Set the notification sound URL
+		audioElement.src = NOTIFICATION_SOUND_URL;
+
+		// Load the audio to check if it works
+		audioElement.load();
+
+		// Handle loading errors
+		audioElement.onerror = (error) => {
+			debug.warn('notification', 'Failed to load notification sound from:', NOTIFICATION_SOUND_URL, error);
+		};
+
+		// Log when audio is ready
+		audioElement.oncanplaythrough = () => {
+			debug.log('notification', 'Notification sound loaded successfully');
+		};
+	}
+	return audioElement;
+}
+
+// Play notification sound
+function playNotificationSound(isTesting: boolean = false): Promise<void> {
+	return new Promise((resolve) => {
+		try {
+			// Check if sound notifications are enabled
+			if (!isTesting && !settings.soundNotifications) {
+				resolve();
+				return;
+			}
+
+			// Check if browser supports HTML5 Audio
+			if (typeof window === 'undefined' || !window.Audio) {
+				resolve(); // Silently fail on unsupported browsers
+				return;
+			}
+
+			const audio = initAudioElement();
+			
+			// Reset audio to beginning
+			audio.currentTime = 0;
+			
+			// Play audio
+			const playPromise = audio.play();
+			
+			if (playPromise !== undefined) {
+				playPromise
+					.then(() => {
+						// Audio played successfully
+						audio.onended = () => resolve();
+					})
+					.catch((error) => {
+						debug.warn('notification', 'Failed to play notification sound:', error);
+						resolve(); // Don't reject, just silently fail
+					});
+			} else {
+				// Older browser support
+				audio.onended = () => resolve();
+				setTimeout(() => resolve(), 1000); // Fallback timeout
+			}
+		} catch (error) {
+			debug.warn('notification', 'Failed to play notification sound:', error);
+			resolve(); // Don't reject, just silently fail
+		}
+	});
+}
+
+// Public API
+export const soundNotification = {
+	/**
+	 * Play notification sound (single sound for all notifications)
+	 */
+	play(): Promise<void> {
+		return playNotificationSound();
+	},
+
+	/**
+	 * Test sound notification (for settings)
+	 */
+	async testSound(): Promise<boolean> {
+		try {
+			await playNotificationSound(true);
+			return true;
+		} catch (error) {
+			debug.error('notification', 'Sound test failed:', error);
+			return false;
+		}
+	},
+
+	/**
+	 * Check if sound notifications are supported
+	 */
+	isSupported(): boolean {
+		return typeof window !== 'undefined' && !!window.Audio;
+	},
+
+	/**
+	 * Initialize audio element (call on user interaction)
+	 */
+	initialize(): void {
+		if (this.isSupported()) {
+			initAudioElement();
+		}
+	}
+};
+
+export default soundNotification;

package/frontend/lib/services/preview/browser/browser-console.service.ts

@@ -0,0 +1,61 @@
+import { debug } from '$shared/utils/logger';
+import ws from '$frontend/lib/utils/ws';
+
+export interface ConsoleMessage {
+	id: string;
+	type: 'log' | 'info' | 'warn' | 'error' | 'debug' | 'trace' | 'clear';
+	text: string;
+	args?: unknown[];
+	location?: {
+		url: string;
+		lineNumber: number;
+		columnNumber: number;
+	};
+	stackTrace?: string;
+	timestamp: number;
+}
+
+export class BrowserConsoleService {
+	async getConsoleLogs(sessionId: string): Promise<ConsoleMessage[]> {
+		try {
+			const result = await ws.http('preview:browser-console-get', {}, 5000);
+			return result.logs || [];
+		} catch (error) {
+			debug.error('preview', 'Error getting console logs:', error);
+			throw error;
+		}
+	}
+
+	async clearConsoleLogs(sessionId: string): Promise<void> {
+		try {
+			await ws.http('preview:browser-console-clear', {}, 5000);
+		} catch (error) {
+			debug.error('preview', 'Error clearing console logs:', error);
+			throw error;
+		}
+	}
+
+	async executeConsoleCommand(sessionId: string, command: string): Promise<any> {
+		try {
+			// Backend uses active tab automatically
+			const result = await ws.http('preview:browser-console-execute', { command }, 10000);
+			return result.result;
+		} catch (error) {
+			debug.error('preview', 'Error executing console command:', error);
+			throw error;
+		}
+	}
+
+	async toggleConsoleLogging(sessionId: string, enabled: boolean): Promise<void> {
+		try {
+			// Backend uses active tab automatically
+			await ws.http('preview:browser-console-toggle', { enabled }, 5000);
+		} catch (error) {
+			debug.error('preview', 'Error toggling console logging:', error);
+			throw error;
+		}
+	}
+}
+
+// Singleton instance
+export const browserConsoleService = new BrowserConsoleService();