@myrialabs/clopen 0.1.10 → 0.2.0

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

@@ -26,8 +26,7 @@
 	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 { applyServerSettings, loadSystemSettings } from '$frontend/lib/stores/features/settings.svelte';
 	import { initPresence } from '$frontend/lib/stores/core/presence.svelte';
 	import ws from '$frontend/lib/utils/ws';
 	import { debug } from '$shared/utils/logger';
@@ -78,14 +77,9 @@
 			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.
+			// Step 2: WebSocket is already connected (auth completed before this mounts)
 			setProgress(20, 'Connecting...');
-			await Promise.all([
-				userStore.initialize(),
-				ws.waitUntilConnected(10000)
-			]);
+			await ws.waitUntilConnected(10000);
 
 			// Step 3: Restore user state from server
 			setProgress(30, 'Restoring state...');
@@ -97,13 +91,14 @@
 				debug.warn('workspace', 'Failed to restore server state, using defaults:', err);
 			}
 
-			// Step 4: Apply restored state + setup presence (sync operations)
+			// Step 4: Apply restored state + load system settings + setup presence
 			setProgress(40);
 			if (serverState?.settings) {
 				applyServerSettings(serverState.settings);
 			}
 			restoreLastView(serverState?.lastView);
 			restoreUnreadSessions(serverState?.unreadSessions);
+			await loadSystemSettings();
 			initPresence();
 
 			// Step 5: Load projects (with server-restored currentProjectId)

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

@@ -175,6 +175,17 @@ export class BrowserWebCodecsService {
 			return false;
 		}
 
+		// Pre-initialize AudioContext NOW, during user gesture context.
+		// Browsers require a user gesture to start AudioContext — creating it
+		// later (e.g. when first audio chunk arrives) results in a permanently
+		// suspended context that never plays audio.
+		if (!this.audioContext || this.audioContext.state === 'closed') {
+			this.audioContext = new AudioContext({ sampleRate: 48000 });
+		}
+		if (this.audioContext.state === 'suspended') {
+			await this.audioContext.resume().catch(() => {});
+		}
+
 		// Clean up any existing connection
 		if (this.peerConnection || this.isConnected || this.sessionId) {
 			debug.log('webcodecs', 'Cleaning up previous connection');
@@ -546,7 +557,7 @@ export class BrowserWebCodecsService {
 	private async initAudioDecoder(): Promise<void> {
 		this.audioCodecConfig = {
 			codec: 'opus',
-			sampleRate: 44100,
+			sampleRate: 48000,
 			numberOfChannels: 2
 		};
 
@@ -580,8 +591,17 @@ export class BrowserWebCodecsService {
 	 */
 	private async initAudioContext(): Promise<void> {
 		try {
-			this.audioContext = new AudioContext({ sampleRate: 44100 });
-			debug.log('webcodecs', 'AudioContext initialized');
+			// Reuse AudioContext created in startStreaming (user gesture context)
+			if (!this.audioContext || this.audioContext.state === 'closed') {
+				this.audioContext = new AudioContext({ sampleRate: 48000 });
+			}
+
+			// Resume if suspended (may happen without user gesture)
+			if (this.audioContext.state === 'suspended') {
+				await this.audioContext.resume();
+			}
+
+			debug.log('webcodecs', `AudioContext initialized (state: ${this.audioContext.state})`);
 		} catch (error) {
 			debug.error('webcodecs', 'AudioContext init error:', error);
 		}
@@ -737,6 +757,11 @@ export class BrowserWebCodecsService {
 	private playAudioFrame(audioData: AudioData): void {
 		if (!this.audioContext) return;
 
+		// Safety net: resume AudioContext if it somehow got suspended
+		if (this.audioContext.state === 'suspended') {
+			this.audioContext.resume().catch(() => {});
+		}
+
 		try {
 			// Create AudioBuffer
 			const buffer = this.audioContext.createBuffer(
@@ -1151,11 +1176,9 @@ export class BrowserWebCodecsService {
 			this.audioDecoder = null;
 		}
 
-		// Close audio context
-		if (this.audioContext && this.audioContext.state !== 'closed') {
-			await this.audioContext.close().catch(() => {});
-			this.audioContext = null;
-		}
+		// Keep AudioContext alive across reconnections — it was created during
+		// user gesture in startStreaming() and closing it means we can't resume
+		// without another user gesture. Just reset playback state below.
 
 		// Close data channel
 		if (this.dataChannel) {

package/frontend/lib/stores/features/auth.svelte.ts

@@ -0,0 +1,296 @@
+/**
+ * Auth Store — Svelte 5 Runes
+ *
+ * Manages authentication state: setup, login, invite, and session persistence.
+ * Session token is stored in localStorage for cross-refresh persistence.
+ * The token is validated against the server on each app load.
+ * Supports no-auth mode (single user, no login required).
+ */
+
+import ws from '$frontend/lib/utils/ws';
+import { debug } from '$shared/utils/logger';
+import type { AuthMode } from '$shared/types/stores/settings';
+
+const SESSION_TOKEN_KEY = 'clopen-session-token';
+
+export type AuthState = 'loading' | 'setup' | 'login' | 'invite' | 'ready';
+
+export interface AuthUser {
+	id: string;
+	name: string;
+	role: 'admin' | 'member';
+	color: string;
+	avatar: string;
+	createdAt: string;
+}
+
+// Reactive state
+let authState = $state<AuthState>('loading');
+let currentUser = $state<AuthUser | null>(null);
+let sessionToken = $state<string | null>(null);
+let personalAccessToken = $state<string | null>(null);
+let authMode = $state<AuthMode>('required');
+
+export const authStore = {
+	get authState() { return authState; },
+	get currentUser() { return currentUser; },
+	get sessionToken() { return sessionToken; },
+	/** PAT is only available right after setup/invite accept — shown once */
+	get personalAccessToken() { return personalAccessToken; },
+	/** Current auth mode from server */
+	get authMode() { return authMode; },
+
+	get isAdmin() { return currentUser?.role === 'admin'; },
+	get isAuthenticated() { return authState === 'ready' && currentUser !== null; },
+	get isNoAuth() { return authMode === 'none'; },
+
+	/**
+	 * Initialize auth — called on app mount.
+	 * Determines which page to show: setup, login, invite, or main app.
+	 */
+	async initialize() {
+		authState = 'loading';
+
+		try {
+			// Wait for WebSocket connection
+			await ws.waitUntilConnected(10000);
+
+			// Read stored session token
+			const storedToken = localStorage.getItem(SESSION_TOKEN_KEY);
+
+			// If we have a stored token, try to authenticate
+			if (storedToken) {
+				try {
+					const result = await ws.http('auth:login', { token: storedToken });
+					currentUser = result.user;
+					sessionToken = result.sessionToken;
+					// Update stored token (may have been refreshed)
+					localStorage.setItem(SESSION_TOKEN_KEY, result.sessionToken);
+					// Set token on WS client for reconnection auth
+					ws.setSessionToken(result.sessionToken);
+
+					// Fetch auth mode and onboarding status from server
+					const status = await ws.http('auth:status', {});
+					authMode = status.authMode;
+
+					// If onboarding not yet completed, show wizard instead of going to ready
+					if (!status.onboardingComplete) {
+						authState = 'setup';
+						debug.log('auth', `Authenticated but onboarding pending: ${result.user.name}`);
+						return;
+					}
+
+					authState = 'ready';
+					debug.log('auth', `Authenticated: ${result.user.name} (${result.user.role}), authMode: ${authMode}`);
+					return;
+				} catch {
+					// Token invalid or expired — clear and continue
+					localStorage.removeItem(SESSION_TOKEN_KEY);
+					sessionToken = null;
+					debug.log('auth', 'Stored session token invalid, clearing');
+				}
+			}
+
+			// Check if invite token is in URL hash
+			const hash = window.location.hash;
+			if (hash.startsWith('#invite/')) {
+				authState = 'invite';
+				return;
+			}
+
+			// Check server status
+			const status = await ws.http('auth:status', {});
+			authMode = status.authMode;
+
+			if (!status.onboardingComplete) {
+				if (status.needsSetup) {
+					// Fresh install — show wizard
+					authState = 'setup';
+				} else if (authMode === 'none') {
+					// No-auth mode, existing data — auto-login then show wizard
+					await this.autoLoginNoAuth();
+					authState = 'setup';
+				} else {
+					// With-auth mode, existing users, no session — need to login first
+					// After login, the login() method will redirect to setup wizard
+					authState = 'login';
+				}
+			} else if (authMode === 'none') {
+				// Onboarding done, no-auth mode: auto-login
+				await this.autoLoginNoAuth();
+			} else {
+				authState = 'login';
+			}
+		} catch (error) {
+			debug.error('auth', 'Auth initialization failed:', error);
+			try {
+				const status = await ws.http('auth:status', {});
+				authMode = status.authMode;
+				authState = status.needsSetup ? 'setup' : 'login';
+			} catch {
+				authState = 'login';
+			}
+		}
+	},
+
+	/**
+	 * Auto-login for no-auth mode (returning visitors).
+	 */
+	async autoLoginNoAuth() {
+		const result = await ws.http('auth:auto-login-no-auth', {});
+		currentUser = result.user;
+		sessionToken = result.sessionToken;
+		localStorage.setItem(SESSION_TOKEN_KEY, result.sessionToken);
+		ws.setSessionToken(result.sessionToken);
+		authState = 'ready';
+		debug.log('auth', `No-auth auto-login: ${result.user.name}`);
+	},
+
+	/**
+	 * Setup — create first admin account (with-auth mode).
+	 */
+	async setup(name: string) {
+		const result = await ws.http('auth:setup', { name });
+		currentUser = result.user;
+		sessionToken = result.sessionToken;
+		personalAccessToken = result.personalAccessToken;
+		localStorage.setItem(SESSION_TOKEN_KEY, result.sessionToken);
+		ws.setSessionToken(result.sessionToken);
+		authMode = 'required';
+		// Don't set authState to 'ready' yet — setup page shows PAT first
+		debug.log('auth', `Admin setup complete: ${result.user.name}`);
+	},
+
+	/**
+	 * Setup no-auth mode — create default admin, no PAT needed.
+	 */
+	async setupNoAuth() {
+		const result = await ws.http('auth:setup-no-auth', {});
+		currentUser = result.user;
+		sessionToken = result.sessionToken;
+		localStorage.setItem(SESSION_TOKEN_KEY, result.sessionToken);
+		ws.setSessionToken(result.sessionToken);
+		authMode = 'none';
+		// Don't set authState to 'ready' yet — wizard continues to next step
+		debug.log('auth', `No-auth setup complete: ${result.user.name}`);
+	},
+
+	/**
+	 * Complete setup — transition to ready state after wizard is done.
+	 * Saves onboardingComplete flag so wizard won't show again.
+	 */
+	async completeSetup() {
+		personalAccessToken = null;
+
+		// Save onboardingComplete to system settings
+		try {
+			const { loadSystemSettings, updateSystemSettings } = await import('$frontend/lib/stores/features/settings.svelte');
+			await loadSystemSettings();
+			await updateSystemSettings({ onboardingComplete: true });
+		} catch {
+			// Best-effort — if this fails, wizard may show again
+			debug.warn('auth', 'Failed to save onboardingComplete flag');
+		}
+
+		authState = 'ready';
+	},
+
+	/**
+	 * Login with a Personal Access Token (PAT).
+	 */
+	async login(token: string) {
+		const result = await ws.http('auth:login', { token });
+		currentUser = result.user;
+		sessionToken = result.sessionToken;
+		localStorage.setItem(SESSION_TOKEN_KEY, result.sessionToken);
+		ws.setSessionToken(result.sessionToken);
+
+		// Check if onboarding is pending
+		const status = await ws.http('auth:status', {});
+		authMode = status.authMode;
+		if (!status.onboardingComplete) {
+			authState = 'setup';
+			debug.log('auth', `Logged in, onboarding pending: ${result.user.name}`);
+			return;
+		}
+
+		authState = 'ready';
+		debug.log('auth', `Logged in: ${result.user.name} (${result.user.role})`);
+	},
+
+	/**
+	 * Accept invite — create account from invite token.
+	 */
+	async acceptInvite(inviteToken: string, name: string) {
+		const result = await ws.http('auth:accept-invite', { inviteToken, name });
+		currentUser = result.user;
+		sessionToken = result.sessionToken;
+		personalAccessToken = result.personalAccessToken;
+		localStorage.setItem(SESSION_TOKEN_KEY, result.sessionToken);
+		ws.setSessionToken(result.sessionToken);
+		// Clear invite hash from URL
+		window.location.hash = '';
+		debug.log('auth', `Invite accepted: ${result.user.name}`);
+	},
+
+	/**
+	 * Complete invite — transition to ready after user has copied PAT.
+	 */
+	completeInvite() {
+		personalAccessToken = null;
+		authState = 'ready';
+	},
+
+	/**
+	 * Logout — clear session.
+	 */
+	async logout() {
+		try {
+			await ws.http('auth:logout', {});
+		} catch {
+			// Ignore errors during logout
+		}
+		currentUser = null;
+		sessionToken = null;
+		personalAccessToken = null;
+		localStorage.removeItem(SESSION_TOKEN_KEY);
+		ws.setSessionToken(null);
+		authState = 'login';
+		debug.log('auth', 'Logged out');
+	},
+
+	/**
+	 * Logout all sessions (admin action — used when switching auth mode).
+	 */
+	async logoutAll() {
+		try {
+			await ws.http('auth:logout-all', {});
+		} catch {
+			// Ignore errors
+		}
+		currentUser = null;
+		sessionToken = null;
+		personalAccessToken = null;
+		localStorage.removeItem(SESSION_TOKEN_KEY);
+		ws.setSessionToken(null);
+		authState = 'login';
+		debug.log('auth', 'All sessions logged out');
+	},
+
+	/**
+	 * Update display name.
+	 */
+	async updateName(newName: string) {
+		const updated = await ws.http('auth:update-name', { newName });
+		currentUser = updated;
+		debug.log('auth', `Name updated: ${updated.name}`);
+	},
+
+	/**
+	 * Regenerate Personal Access Token.
+	 */
+	async regeneratePAT(): Promise<string> {
+		const result = await ws.http('auth:regenerate-pat', {});
+		return result.personalAccessToken;
+	}
+};

package/frontend/lib/stores/features/settings.svelte.ts

@@ -1,13 +1,13 @@
 /**
  * Settings Store with Svelte 5 Runes
  *
- * Centralized store for user settings with server-side persistence
- * Settings are stored on the server via user:save-state / user:restore-state
- * No localStorage usage - server is single source of truth
+ * Centralized store for user settings with server-side persistence.
+ * Per-user settings: stored via user:save-state / user:restore-state
+ * System settings: stored via settings:get / settings:update-system (admin-only write)
  */
 
 import { DEFAULT_MODEL, DEFAULT_ENGINE } from '$shared/constants/engines';
-import type { AppSettings } from '$shared/types/stores/settings';
+import type { AppSettings, SystemSettings } from '$shared/types/stores/settings';
 import { builtInPresets } from '$frontend/lib/stores/ui/workspace.svelte';
 import ws from '$frontend/lib/utils/ws';
 
@@ -22,7 +22,7 @@ const createDefaultPresetVisibility = (): Record<string, boolean> => {
 	return visibility;
 };
 
-// Default settings
+// Default per-user settings
 const defaultSettings: AppSettings = {
 	selectedEngine: DEFAULT_ENGINE,
 	selectedModel: DEFAULT_MODEL,
@@ -32,14 +32,24 @@ const defaultSettings: AppSettings = {
 	soundNotifications: true,
 	pushNotifications: false,
 	layoutPresetVisibility: createDefaultPresetVisibility(),
+	fontSize: 13
+};
+
+// Default system settings
+const defaultSystemSettings: SystemSettings = {
+	authMode: 'required',
+	onboardingComplete: false,
 	allowedBasePaths: [],
-	fontSize: 13,
-	autoUpdate: false
+	autoUpdate: false,
+	sessionLifetimeDays: 30
 };
 
 // Create and export reactive settings state directly (starts with defaults)
 export const settings = $state<AppSettings>({ ...defaultSettings });
 
+// System-wide settings (admin-configurable, read by all users)
+export const systemSettings = $state<SystemSettings>({ ...defaultSystemSettings });
+
 export function applyFontSize(size: number): void {
 	if (typeof window !== 'undefined') {
 		document.documentElement.style.fontSize = `${size}px`;
@@ -47,7 +57,7 @@ export function applyFontSize(size: number): void {
 }
 
 /**
- * Apply server-provided settings during initialization.
+ * Apply server-provided per-user settings during initialization.
  * Called from WorkspaceLayout with state from user:restore-state.
  */
 export function applyServerSettings(serverSettings: Partial<AppSettings> | null): void {
@@ -59,7 +69,41 @@ export function applyServerSettings(serverSettings: Partial<AppSettings> | null)
 	}
 }
 
-// Save settings to server (fire-and-forget)
+/**
+ * Load system settings from server.
+ * Called during initialization after auth is ready.
+ */
+export async function loadSystemSettings(): Promise<void> {
+	try {
+		const result = await ws.http('settings:get', { key: 'system:settings' });
+		if (result?.value) {
+			const parsed = typeof result.value === 'string' ? JSON.parse(result.value) : result.value;
+			Object.assign(systemSettings, { ...defaultSystemSettings, ...parsed });
+			debug.log('settings', 'Loaded system settings');
+		}
+	} catch {
+		// System settings may not exist yet — use defaults
+		debug.log('settings', 'No system settings found, using defaults');
+	}
+}
+
+/**
+ * Save system settings (admin only).
+ */
+export async function updateSystemSettings(newSettings: Partial<SystemSettings>): Promise<void> {
+	Object.assign(systemSettings, newSettings);
+	try {
+		await ws.http('settings:update', {
+			key: 'system:settings',
+			value: JSON.stringify({ ...systemSettings })
+		});
+		debug.log('settings', 'System settings saved');
+	} catch (err) {
+		debug.error('settings', 'Failed to save system settings:', err);
+	}
+}
+
+// Save per-user settings to server (fire-and-forget)
 function saveSettings(): void {
 	ws.http('user:save-state', { key: 'settings', value: { ...settings } }).catch(err => {
 		debug.error('settings', 'Failed to save settings to server:', err);

package/frontend/lib/stores/features/user.svelte.ts

@@ -1,96 +1,54 @@
 /**
  * User Store - Svelte 5 Runes
- * Manages anonymous user state and provides reactive updates
+ *
+ * Delegates to auth store for user identity.
+ * Kept for backward compatibility with components that import userStore.
  */
 
-import { getOrCreateAnonymousUser, updateAnonymousUserName, getCurrentAnonymousUser, type AnonymousUser } from '$shared/utils/anonymous-user';
+import { authStore } from './auth.svelte';
 import { debug } from '$shared/utils/logger';
 import ws from '$frontend/lib/utils/ws';
 
-// User state - initialize with null, will be properly set after async load
-let currentUser = $state<AnonymousUser | null>(null);
-let isInitializing = $state<boolean>(false);
+// Re-export user type from auth store
+export type { AuthUser as AnonymousUser } from './auth.svelte';
 
-// User store
+// User store (delegates to auth store)
 export const userStore = {
 	get currentUser() {
-		return currentUser;
+		const user = authStore.currentUser;
+		if (!user) return null;
+		// Return in the shape expected by existing components
+		return {
+			id: user.id,
+			name: user.name,
+			color: user.color,
+			avatar: user.avatar,
+			createdAt: user.createdAt
+		};
 	},
 
 	get isInitializing() {
-		return isInitializing;
+		return authStore.authState === 'loading';
 	},
 
-	// Initialize user (called on app start)
+	// No-op: auth store handles initialization before WorkspaceLayout mounts
 	async initialize() {
-		if (typeof window === 'undefined') {
-			debug.warn('user', 'Cannot initialize user on server side');
-			return;
-		}
-
-		if (isInitializing) {
-			debug.warn('user', 'User initialization already in progress');
-			return;
-		}
-
-		isInitializing = true;
-
-		try {
-			// First check if user already exists in localStorage (fast path)
-			const existingUser = getCurrentAnonymousUser();
-			if (existingUser) {
-				currentUser = existingUser;
-				// Sync user context with WebSocket (for user-targeted broadcasting)
-				// IMPORTANT: Must await to ensure server has context before other operations
-				await ws.setUser(existingUser.id);
-				debug.log('user', '✅ Loaded existing user from localStorage:', existingUser.name);
-			} else {
-				// Generate new user from server
-				debug.log('user', 'No existing user, generating from server...');
-				const newUser = await getOrCreateAnonymousUser();
-				currentUser = newUser;
-				// Sync user context with WebSocket
-				// IMPORTANT: Must await to ensure server has context before other operations
-				if (newUser) {
-					await ws.setUser(newUser.id);
-				}
-			}
-		} catch (error) {
-			debug.error('user', 'Failed to initialize user:', error);
-		} finally {
-			isInitializing = false;
-		}
+		debug.log('user', 'initialize() called — auth store handles this');
 	},
 
-	// Update user name
+	// Update user name via auth store
 	async updateName(newName: string): Promise<boolean> {
-		if (typeof window === 'undefined') {
-			return false;
-		}
-
 		try {
-			const updatedUser = await updateAnonymousUserName(newName);
-
-			if (updatedUser) {
-				currentUser = updatedUser;
-				return true;
-			}
-
-			return false;
+			await authStore.updateName(newName);
+			return true;
 		} catch (error) {
 			debug.error('user', 'Failed to update user name:', error);
 			return false;
 		}
 	},
 
-	// Refresh user from localStorage
+	// No-op: user data comes from auth store
 	refresh() {
-		if (typeof window !== 'undefined') {
-			const user = getCurrentAnonymousUser();
-			if (user) {
-				currentUser = user;
-				debug.log('user', '✅ Refreshed user from localStorage:', user.name);
-			}
-		}
+		debug.log('user', 'refresh() called — user data comes from auth store');
 	}
-};
+};