@myrialabs/clopen 0.1.9 → 0.2.0

package/frontend/lib/components/settings/general/UpdateSettings.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
-	import { settings, updateSettings } from '$frontend/lib/stores/features/settings.svelte';
+	import { systemSettings, updateSystemSettings } from '$frontend/lib/stores/features/settings.svelte';
 	import { updateState, checkForUpdate, runUpdate } from '$frontend/lib/stores/ui/update.svelte';
 	import Icon from '../../common/Icon.svelte';
 
 	function toggleAutoUpdate() {
-		updateSettings({ autoUpdate: !settings.autoUpdate });
+		updateSystemSettings({ autoUpdate: !systemSettings.autoUpdate });
 	}
 
 	function handleCheckNow() {
@@ -108,14 +108,14 @@
 			<button
 				type="button"
 				role="switch"
-				aria-checked={settings.autoUpdate}
+				aria-checked={systemSettings.autoUpdate}
 				onclick={toggleAutoUpdate}
 				class="relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-violet-500/30
-					{settings.autoUpdate ? 'bg-violet-600' : 'bg-slate-300 dark:bg-slate-600'}"
+					{systemSettings.autoUpdate ? 'bg-violet-600' : 'bg-slate-300 dark:bg-slate-600'}"
 			>
 				<span
 					class="pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow-lg ring-0 transition duration-200 ease-in-out
-						{settings.autoUpdate ? 'translate-x-5' : 'translate-x-0'}"
+						{systemSettings.autoUpdate ? 'translate-x-5' : 'translate-x-0'}"
 				></span>
 			</button>
 		</div>

package/frontend/lib/components/settings/security/SecuritySettings.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import AuthModeSettings from '../general/AuthModeSettings.svelte';
+	import AdvancedSettings from '../general/AdvancedSettings.svelte';
+</script>
+
+<AuthModeSettings />
+
+<div class="mt-6">
+	<AdvancedSettings />
+</div>

package/frontend/lib/components/settings/system/SystemSettings.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import UpdateSettings from '../general/UpdateSettings.svelte';
+	import DataManagementSettings from '../general/DataManagementSettings.svelte';
+</script>
+
+<UpdateSettings />
+
+<div class="mt-6">
+	<DataManagementSettings />
+</div>

package/frontend/lib/components/settings/user/UserSettings.svelte

@@ -1,121 +1,127 @@
 <script lang="ts">
-	import { userStore } from '$frontend/lib/stores/features/user.svelte';
+	import { authStore } from '$frontend/lib/stores/features/auth.svelte';
+	import { systemSettings } from '$frontend/lib/stores/features/settings.svelte';
 	import { addNotification } from '$frontend/lib/stores/ui/notification.svelte';
 	import Icon from '../../common/Icon.svelte';
+	import Dialog from '../../common/Dialog.svelte';
 	import { debug } from '$shared/utils/logger';
 
+	const isNoAuth = $derived(systemSettings.authMode === 'none');
+
 	// State
 	let userNameInput = $state('');
 	let isEditing = $state(false);
 	let isSaving = $state(false);
 
+	// PAT state
+	let showPAT = $state(false);
+	let currentPAT = $state('');
+	let isRegeneratingPAT = $state(false);
+	let showRegenerateConfirm = $state(false);
+
+	const user = $derived(authStore.currentUser);
+
 	// Update input when user changes
 	$effect(() => {
-		if (userStore.currentUser?.name) {
-			userNameInput = userStore.currentUser.name;
+		if (user?.name) {
+			userNameInput = user.name;
 		}
 	});
 
-	// Handle save user name
 	async function saveUserName() {
 		if (!userNameInput.trim()) {
-			addNotification({
-				type: 'error',
-				title: 'Validation Error',
-				message: 'Name cannot be empty'
-			});
+			addNotification({ type: 'error', title: 'Validation Error', message: 'Name cannot be empty' });
 			return;
 		}
 
 		isSaving = true;
-
 		try {
-			const success = await userStore.updateName(userNameInput.trim());
-
-			if (success) {
-				isEditing = false;
-				addNotification({
-					type: 'success',
-					title: 'Updated',
-					message: 'Display name updated successfully'
-				});
-			} else {
-				addNotification({
-					type: 'error',
-					title: 'Error',
-					message: 'Failed to update user name'
-				});
-			}
+			await authStore.updateName(userNameInput.trim());
+			isEditing = false;
+			addNotification({ type: 'success', title: 'Updated', message: 'Display name updated' });
 		} catch (error) {
 			debug.error('settings', 'Error updating user name:', error);
-			addNotification({
-				type: 'error',
-				title: 'Error',
-				message: 'An error occurred while updating user name'
-			});
+			addNotification({ type: 'error', title: 'Error', message: 'Failed to update display name' });
 		} finally {
 			isSaving = false;
 		}
 	}
 
-	// Handle cancel edit
 	function cancelEdit() {
-		userNameInput = userStore.currentUser?.name || '';
+		userNameInput = user?.name || '';
 		isEditing = false;
 	}
 
-	// Handle start edit
 	function startEdit() {
 		isEditing = true;
 	}
+
+	async function regeneratePAT() {
+		isRegeneratingPAT = true;
+		try {
+			const pat = await authStore.regeneratePAT();
+			currentPAT = pat;
+			showPAT = true;
+			showRegenerateConfirm = false;
+			addNotification({ type: 'success', title: 'Regenerated', message: 'Personal Access Token has been regenerated' });
+		} catch (error) {
+			debug.error('settings', 'Error regenerating PAT:', error);
+			addNotification({ type: 'error', title: 'Error', message: 'Failed to regenerate token' });
+		} finally {
+			isRegeneratingPAT = false;
+		}
+	}
+
+	function copyPAT() {
+		navigator.clipboard.writeText(currentPAT);
+		addNotification({ type: 'success', title: 'Copied', message: 'Token copied to clipboard' });
+	}
+
+	async function handleLogout() {
+		await authStore.logout();
+	}
 </script>
 
 <div class="py-1">
 	<h3 class="text-base font-bold text-slate-900 dark:text-slate-100 mb-1.5">User Profile</h3>
 	<p class="text-sm text-slate-600 dark:text-slate-500 mb-5">
-		Manage your identity and display preferences
+		Manage your identity and access
 	</p>
 
-	{#if !userStore.currentUser}
+	{#if !user}
 		<div class="flex items-center justify-center gap-3 py-10 text-slate-600 dark:text-slate-500 text-sm">
-			<div
-				class="w-5 h-5 border-2 border-violet-500/20 border-t-violet-600 rounded-full animate-spin"
-			></div>
+			<div class="w-5 h-5 border-2 border-violet-500/20 border-t-violet-600 rounded-full animate-spin"></div>
 			<span>Loading user settings...</span>
 		</div>
 	{:else}
 		<div class="flex flex-col gap-4">
 			<!-- Current User Card -->
-			<div
-				class="flex items-center gap-3.5 p-4.5 bg-gradient-to-br from-violet-500/10 to-purple-500/5 dark:from-violet-500/10 dark:to-purple-500/8 border border-violet-500/20 rounded-xl"
-			>
+			<div class="flex items-center gap-3.5 p-4.5 bg-gradient-to-br from-violet-500/10 to-purple-500/5 dark:from-violet-500/10 dark:to-purple-500/8 border border-violet-500/20 rounded-xl">
 				<div
 					class="flex items-center justify-center w-12 h-12 rounded-xl text-lg font-bold text-white shrink-0"
-					style="background-color: {userStore.currentUser?.color || '#7c3aed'}"
+					style="background-color: {user.color || '#7c3aed'}"
 				>
-					{userStore.currentUser?.avatar || 'U'}
+					{user.avatar || 'U'}
 				</div>
 				<div class="flex-1 min-w-0">
 					<div class="text-base font-semibold text-slate-900 dark:text-slate-100 mb-0.5">
-						{userStore.currentUser?.name || 'Anonymous User'}
+						{user.name}
+					</div>
+					<div class="text-xs text-slate-600 dark:text-slate-500">
+						{user.role === 'admin' ? 'Administrator' : 'Member'}
 					</div>
-					<div class="text-xs text-slate-600 dark:text-slate-500">Anonymous user identity</div>
 				</div>
-				<div
-					class="flex items-center gap-1.5 py-1.5 px-3 bg-emerald-500/15 rounded-full text-xs font-medium text-emerald-500"
-				>
-					<span class="w-1.5 h-1.5 bg-emerald-500 rounded-full animate-pulse"></span>
-					<span>Active</span>
+				<div class="flex items-center gap-2">
+					<span class="inline-flex items-center gap-1.5 py-1.5 px-3 bg-{user.role === 'admin' ? 'violet' : 'emerald'}-500/15 rounded-full text-xs font-medium text-{user.role === 'admin' ? 'violet' : 'emerald'}-500">
+						<Icon name="lucide:{user.role === 'admin' ? 'shield' : 'user'}" class="w-3 h-3" />
+						{user.role === 'admin' ? 'Admin' : 'Member'}
+					</span>
 				</div>
 			</div>
 
 			<!-- Edit Display Name -->
-			<div
-				class="p-4 bg-slate-100/80 dark:bg-slate-800/80 border border-slate-200 dark:border-slate-800 rounded-xl"
-			>
-				<div
-					class="flex items-center gap-2 text-sm font-semibold text-slate-500 mb-3"
-				>
+			<div class="p-4 bg-slate-100/80 dark:bg-slate-800/80 border border-slate-200 dark:border-slate-800 rounded-xl">
+				<div class="flex items-center gap-2 text-sm font-semibold text-slate-500 mb-3">
 					<Icon name="lucide:pencil" class="w-4 h-4 opacity-70" />
 					<span>Display Name</span>
 				</div>
@@ -136,9 +142,7 @@
 								disabled={!userNameInput.trim() || isSaving}
 							>
 								{#if isSaving}
-									<div
-										class="w-3.5 h-3.5 border-2 border-white/30 border-t-white rounded-full animate-spin"
-									></div>
+									<div class="w-3.5 h-3.5 border-2 border-white/30 border-t-white rounded-full animate-spin"></div>
 									Saving...
 								{:else}
 									<Icon name="lucide:check" class="w-4 h-4" />
@@ -158,7 +162,7 @@
 				{:else}
 					<div class="flex items-center justify-between gap-3">
 						<div class="text-sm text-slate-900 dark:text-slate-100">
-							{userStore.currentUser?.name || 'Not set'}
+							{user.name}
 						</div>
 						<button
 							type="button"
@@ -172,26 +176,95 @@
 				{/if}
 			</div>
 
+			{#if !isNoAuth}
+				<!-- Personal Access Token -->
+				<div class="p-4 bg-slate-100/80 dark:bg-slate-800/80 border border-slate-200 dark:border-slate-800 rounded-xl">
+					<div class="flex items-center gap-2 text-sm font-semibold text-slate-500 mb-3">
+						<Icon name="lucide:key-round" class="w-4 h-4 opacity-70" />
+						<span>Personal Access Token</span>
+					</div>
+					<p class="text-xs text-slate-600 dark:text-slate-500 mb-3">
+						Use this token to log in from other devices. Keep it secret.
+					</p>
+
+					{#if showPAT && currentPAT}
+						<div class="flex flex-col gap-2 mb-3">
+							<div class="flex items-center gap-2">
+								<code class="flex-1 py-2.5 px-3.5 bg-slate-50 dark:bg-slate-900/80 border border-emerald-500/30 rounded-lg font-mono text-xs text-slate-700 dark:text-slate-300 break-all">
+									{currentPAT}
+								</code>
+								<button
+									type="button"
+									onclick={copyPAT}
+									class="flex items-center justify-center w-9 h-9 rounded-lg bg-emerald-500/10 hover:bg-emerald-500/20 text-emerald-600 dark:text-emerald-400 transition-all"
+									title="Copy token"
+								>
+									<Icon name="lucide:copy" class="w-4 h-4" />
+								</button>
+							</div>
+							<div class="flex items-center gap-1.5 text-xs text-amber-600 dark:text-amber-400">
+								<Icon name="lucide:triangle-alert" class="w-3.5 h-3.5" />
+								<span>This token is shown only once. Copy and store it securely.</span>
+							</div>
+						</div>
+					{/if}
+
+					<button
+						type="button"
+						onclick={() => { showRegenerateConfirm = true; }}
+						disabled={isRegeneratingPAT}
+						class="inline-flex items-center gap-1.5 py-2 px-3.5 bg-amber-500/10 border border-amber-500/20 rounded-lg text-amber-600 dark:text-amber-400 text-xs font-semibold cursor-pointer transition-all duration-150 hover:bg-amber-500/20 disabled:opacity-50 disabled:cursor-not-allowed"
+					>
+						{#if isRegeneratingPAT}
+							<div class="w-3.5 h-3.5 border-2 border-amber-600/30 border-t-amber-600 rounded-full animate-spin"></div>
+							Regenerating...
+						{:else}
+							<Icon name="lucide:refresh-cw" class="w-3.5 h-3.5" />
+							Regenerate Token
+						{/if}
+					</button>
+				</div>
+			{/if}
+
 			<!-- User ID -->
-			<div
-				class="p-4 bg-slate-100/80 dark:bg-slate-800/80 border border-slate-200 dark:border-slate-800 rounded-xl"
-			>
-				<div
-					class="flex items-center gap-2 text-sm font-semibold text-slate-500 mb-3"
-				>
+			<div class="p-4 bg-slate-100/80 dark:bg-slate-800/80 border border-slate-200 dark:border-slate-800 rounded-xl">
+				<div class="flex items-center gap-2 text-sm font-semibold text-slate-500 mb-3">
 					<Icon name="lucide:fingerprint" class="w-4 h-4 opacity-70" />
 					<span>User ID</span>
 				</div>
 				<div class="flex flex-col gap-1.5">
-					<code
-						class="py-2.5 px-3.5 bg-slate-50 dark:bg-slate-900/80 border border-slate-200 dark:border-slate-800 rounded-lg font-mono text-xs text-slate-500 break-all"
-						>{userStore.currentUser?.id || 'Not available'}</code
-					>
-					<span class="text-xs text-slate-600 dark:text-slate-500"
-						>Unique identifier for this session</span
-					>
+					<code class="py-2.5 px-3.5 bg-slate-50 dark:bg-slate-900/80 border border-slate-200 dark:border-slate-800 rounded-lg font-mono text-xs text-slate-500 break-all">
+						{user.id}
+					</code>
 				</div>
 			</div>
+
+			{#if !isNoAuth}
+				<!-- Logout -->
+				<div class="pt-2">
+					<button
+						type="button"
+						onclick={handleLogout}
+						class="inline-flex items-center gap-1.5 py-2.5 px-4 bg-red-500/10 border border-red-500/20 rounded-lg text-red-600 dark:text-red-400 text-sm font-semibold cursor-pointer transition-all duration-150 hover:bg-red-500/20 hover:border-red-600/40"
+					>
+						<Icon name="lucide:log-out" class="w-4 h-4" />
+						Sign Out
+					</button>
+				</div>
+			{/if}
 		</div>
 	{/if}
 </div>
+
+<!-- Regenerate PAT Confirmation Dialog -->
+<Dialog
+	bind:isOpen={showRegenerateConfirm}
+	onClose={() => { showRegenerateConfirm = false; }}
+	title="Regenerate Access Token"
+	type="warning"
+	message="This will invalidate your current Personal Access Token. Any devices using the old token will need to log in again with the new one. Continue?"
+	confirmText="Regenerate"
+	cancelText="Cancel"
+	showCancel={true}
+	onConfirm={regeneratePAT}
+/>

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

@@ -277,7 +277,7 @@
 				>
 					<Icon name="lucide:history" class={isMobile ? 'w-4.5 h-4.5' : 'w-4 h-4'} />
 				</button>
-				{#if sessionState.messages.length > 0}
+					{#if sessionState.messages.length > 0 || sessionState.hasMessageHistory}
 					<button
 						type="button"
 						class="flex items-center justify-center {isMobile ? 'w-9 h-9' : 'w-6 h-6'} bg-transparent border-none rounded-md text-slate-500 cursor-pointer transition-all duration-150 hover:bg-violet-500/10 hover:text-slate-900 dark:hover:text-slate-100"

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/components/workspace/panels/ChatPanel.svelte

@@ -24,10 +24,11 @@
 
 	const { showMobileHeader = false }: Props = $props();
 
-	// Welcome state - don't show during restoration
+	// Welcome state - don't show during restoration or when session has history (restored to initial)
 	const isWelcomeState = $derived(
 		sessionState.messages.length === 0 &&
-		!appState.isRestoring
+		!appState.isRestoring &&
+		!sessionState.hasMessageHistory
 	);
 
 	// Check if we should show input (not during restoration)

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/core/sessions.svelte.ts

@@ -22,6 +22,8 @@ interface SessionState {
 	messages: SDKMessageFormatter[];
 	isLoading: boolean;
 	error: string | null;
+	/** True if the current session has message history (even if HEAD is null after restore to initial) */
+	hasMessageHistory: boolean;
 }
 
 // Session state using Svelte 5 runes
@@ -30,7 +32,8 @@ export const sessionState = $state<SessionState>({
 	currentSession: null,
 	messages: [],
 	isLoading: false,
-	error: null
+	error: null,
+	hasMessageHistory: false
 });
 
 // ========================================
@@ -206,6 +209,7 @@ export function updateMessages(messages: SDKMessageFormatter[]) {
 
 export function clearMessages() {
 	sessionState.messages = [];
+	sessionState.hasMessageHistory = false;
 }
 
 export async function loadMessagesForSession(sessionId: string) {
@@ -215,12 +219,22 @@ export async function loadMessagesForSession(sessionId: string) {
 		if (response && Array.isArray(response)) {
 			// Messages from server already have correct SDKMessageFormatter shape with metadata
 			sessionState.messages = response as SDKMessageFormatter[];
+
+			if (response.length > 0) {
+				sessionState.hasMessageHistory = true;
+			} else {
+				// HEAD might be null (restored to initial) — check if session has any messages at all
+				const allResponse = await ws.http('messages:list', { session_id: sessionId, include_all: true });
+				sessionState.hasMessageHistory = Array.isArray(allResponse) && allResponse.length > 0;
+			}
 		} else {
 			sessionState.messages = [];
+			sessionState.hasMessageHistory = false;
 		}
 	} catch (error) {
 		debug.error('session', 'Error loading messages:', error);
 		sessionState.messages = [];
+		sessionState.hasMessageHistory = false;
 	}
 }