@myrialabs/clopen 0.1.10 → 0.2.0

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

@@ -1,9 +1,13 @@
 <script lang="ts">
-	import { settings, updateSettings } from '$frontend/lib/stores/features/settings.svelte';
+	import { systemSettings, updateSystemSettings } from '$frontend/lib/stores/features/settings.svelte';
+	import { authStore } from '$frontend/lib/stores/features/auth.svelte';
 	import Icon from '../../common/Icon.svelte';
 	import Dialog from '../../common/Dialog.svelte';
 	import { detectPlatform } from '$frontend/lib/utils/platform';
 
+	const isAdmin = $derived(authStore.isAdmin);
+	const settings = $derived(systemSettings);
+
 	let showAddPathDialog = $state(false);
 	let newPathValue = $state('');
 
@@ -29,7 +33,7 @@
 	function addPath() {
 		const path = newPathValue.trim();
 		if (path && !settings.allowedBasePaths.includes(path)) {
-			updateSettings({ allowedBasePaths: [...settings.allowedBasePaths, path] });
+			updateSystemSettings({ allowedBasePaths: [...settings.allowedBasePaths, path] });
 		}
 		newPathValue = '';
 		showAddPathDialog = false;
@@ -38,7 +42,7 @@
 	function removePath(index: number) {
 		const newPaths = [...settings.allowedBasePaths];
 		newPaths.splice(index, 1);
-		updateSettings({ allowedBasePaths: newPaths });
+		updateSystemSettings({ allowedBasePaths: newPaths });
 		if (editingIndex === index) {
 			editingIndex = null;
 			editingValue = '';
@@ -56,7 +60,7 @@
 		if (path) {
 			const newPaths = [...settings.allowedBasePaths];
 			newPaths[editingIndex] = path;
-			updateSettings({ allowedBasePaths: newPaths });
+			updateSystemSettings({ allowedBasePaths: newPaths });
 		}
 		editingIndex = null;
 		editingValue = '';
@@ -73,6 +77,7 @@
 	}
 </script>
 
+{#if isAdmin}
 <div class="py-1">
 	<h3 class="text-base font-bold text-slate-900 dark:text-slate-100 mb-1.5">Advanced</h3>
 	<p class="text-sm text-slate-600 dark:text-slate-500 mb-5">Security and access control settings</p>
@@ -170,6 +175,7 @@
 		</div>
 	</div>
 </div>
+{/if}
 
 <Dialog
 	bind:isOpen={showAddPathDialog}

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

@@ -0,0 +1,229 @@
+<script lang="ts">
+	import { systemSettings, updateSystemSettings } from '$frontend/lib/stores/features/settings.svelte';
+	import { authStore } from '$frontend/lib/stores/features/auth.svelte';
+	import { addNotification } from '$frontend/lib/stores/ui/notification.svelte';
+	import Icon from '../../common/Icon.svelte';
+	import Dialog from '../../common/Dialog.svelte';
+	import type { AuthMode } from '$shared/types/stores/settings';
+	import { debug } from '$shared/utils/logger';
+
+	const isAdmin = $derived(authStore.isAdmin);
+	const currentMode = $derived(systemSettings.authMode);
+
+	// Simple confirmation dialog (required → none)
+	let showSimpleConfirm = $state(false);
+	let pendingMode = $state<AuthMode>('required');
+
+	// PAT dialog (none → required)
+	let showPatDialog = $state(false);
+	let generatedPat = $state('');
+	let patCopied = $state(false);
+	let isPreparingSwitch = $state(false);
+
+	async function requestModeChange(mode: AuthMode) {
+		if (mode === currentMode) return;
+		pendingMode = mode;
+
+		if (currentMode === 'none' && mode === 'required') {
+			// Switching to with-auth: regenerate PAT first, then show dialog
+			isPreparingSwitch = true;
+			try {
+				const pat = await authStore.regeneratePAT();
+				generatedPat = pat;
+				showPatDialog = true;
+			} catch (error) {
+				debug.error('settings', 'Failed to regenerate PAT for auth mode switch:', error);
+				addNotification({ type: 'error', title: 'Error', message: 'Failed to prepare authentication switch' });
+			} finally {
+				isPreparingSwitch = false;
+			}
+		} else {
+			showSimpleConfirm = true;
+		}
+	}
+
+	function confirmSimpleChange() {
+		showSimpleConfirm = false;
+		updateSystemSettings({ authMode: pendingMode });
+	}
+
+	async function confirmWithAuthSwitch() {
+		showPatDialog = false;
+
+		// Save auth mode
+		await updateSystemSettings({ authMode: 'required' });
+
+		// Logout all sessions (including current) — forces everyone to re-login
+		await authStore.logoutAll();
+
+		generatedPat = '';
+		patCopied = false;
+	}
+
+	function cancelPatDialog() {
+		showPatDialog = false;
+		generatedPat = '';
+		patCopied = false;
+	}
+
+	async function copyPat() {
+		if (generatedPat) {
+			await navigator.clipboard.writeText(generatedPat);
+			patCopied = true;
+			setTimeout(() => { patCopied = false; }, 2000);
+		}
+	}
+</script>
+
+{#if isAdmin}
+<div class="py-1">
+	<h3 class="text-base font-bold text-slate-900 dark:text-slate-100 mb-1.5">Authentication</h3>
+	<p class="text-sm text-slate-600 dark:text-slate-500 mb-5">Configure how users access Clopen</p>
+
+	<div class="flex flex-col gap-3.5">
+		<!-- No Login -->
+		<button
+			type="button"
+			disabled={isPreparingSwitch}
+			class="w-full text-left p-4 bg-slate-100/80 dark:bg-slate-800/80 border rounded-xl transition-all
+				{currentMode === 'none'
+					? 'border-violet-500/50 ring-1 ring-violet-500/20'
+					: 'border-slate-200 dark:border-slate-800 hover:border-slate-300 dark:hover:border-slate-700'}
+				disabled:opacity-50 disabled:cursor-not-allowed"
+			onclick={() => requestModeChange('none')}
+		>
+			<div class="flex items-center gap-3.5">
+				<div class="flex items-center justify-center w-10 h-10 rounded-lg shrink-0
+					{currentMode === 'none'
+						? 'bg-violet-500/15 text-violet-600 dark:text-violet-400'
+						: 'bg-slate-200/80 dark:bg-slate-700 text-slate-400'}">
+					<Icon name="lucide:lock-open" class="w-5 h-5" />
+				</div>
+				<div class="flex-1 min-w-0">
+					<div class="text-sm font-semibold text-slate-900 dark:text-slate-100">No Login</div>
+					<div class="text-xs text-slate-600 dark:text-slate-500">
+						No authentication required. Anyone with access to this URL can use Clopen.
+					</div>
+				</div>
+				{#if currentMode === 'none'}
+					<div class="flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium bg-violet-100 dark:bg-violet-900/30 text-violet-700 dark:text-violet-300 shrink-0">
+						<span class="w-1.5 h-1.5 rounded-full bg-violet-500"></span>
+						Active
+					</div>
+				{/if}
+			</div>
+		</button>
+
+		<!-- With Login -->
+		<button
+			type="button"
+			disabled={isPreparingSwitch}
+			class="w-full text-left p-4 bg-slate-100/80 dark:bg-slate-800/80 border rounded-xl transition-all
+				{currentMode === 'required'
+					? 'border-violet-500/50 ring-1 ring-violet-500/20'
+					: 'border-slate-200 dark:border-slate-800 hover:border-slate-300 dark:hover:border-slate-700'}
+				disabled:opacity-50 disabled:cursor-not-allowed"
+			onclick={() => requestModeChange('required')}
+		>
+			<div class="flex items-center gap-3.5">
+				<div class="flex items-center justify-center w-10 h-10 rounded-lg shrink-0
+					{currentMode === 'required'
+						? 'bg-violet-500/15 text-violet-600 dark:text-violet-400'
+						: 'bg-slate-200/80 dark:bg-slate-700 text-slate-400'}">
+					<Icon name="lucide:lock" class="w-5 h-5" />
+				</div>
+				<div class="flex-1 min-w-0">
+					<div class="text-sm font-semibold text-slate-900 dark:text-slate-100">With Login</div>
+					<div class="text-xs text-slate-600 dark:text-slate-500">
+						Authenticate with a Personal Access Token. Supports multiple users and invite links.
+					</div>
+				</div>
+				{#if currentMode === 'required'}
+					<div class="flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium bg-violet-100 dark:bg-violet-900/30 text-violet-700 dark:text-violet-300 shrink-0">
+						<span class="w-1.5 h-1.5 rounded-full bg-violet-500"></span>
+						Active
+					</div>
+				{/if}
+			</div>
+		</button>
+	</div>
+
+	{#if isPreparingSwitch}
+		<div class="flex items-center gap-2 mt-4 text-sm text-slate-500">
+			<div class="w-4 h-4 border-2 border-violet-500/20 border-t-violet-600 rounded-full animate-spin"></div>
+			<span>Preparing authentication switch...</span>
+		</div>
+	{/if}
+</div>
+{/if}
+
+<!-- Simple confirm dialog (required → none) -->
+<Dialog
+	bind:isOpen={showSimpleConfirm}
+	onClose={() => { showSimpleConfirm = false; }}
+	type="info"
+	title="Change Authentication Mode"
+	message="Switching to No Login mode will disable login requirements. Existing users and sessions will be preserved but bypassed."
+	confirmText="Confirm"
+	cancelText="Cancel"
+	showCancel={true}
+	onConfirm={confirmSimpleChange}
+/>
+
+<!-- PAT dialog (none → required) -->
+<Dialog
+	bind:isOpen={showPatDialog}
+	onClose={cancelPatDialog}
+	type="warning"
+	title="Change Authentication Mode"
+	closable={false}
+	confirmText="Confirm"
+	cancelText="Cancel"
+	showCancel={true}
+	onConfirm={confirmWithAuthSwitch}
+>
+	{#snippet children()}
+		<div class="flex items-start space-x-4">
+			<div class="bg-amber-50 dark:bg-amber-900/20 border-amber-200 dark:border-amber-700/50 rounded-xl p-3 border">
+				<Icon name="lucide:triangle-alert" class="w-6 h-6 text-amber-600 dark:text-amber-400" />
+			</div>
+
+			<div class="flex-1 space-y-3">
+				<h3 class="text-lg font-semibold text-slate-900 dark:text-slate-100">
+					Change Authentication Mode
+				</h3>
+				<p class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
+					Switching to With Login mode will require authentication. All sessions will be logged out and you will need this token to log in again.
+				</p>
+
+				<!-- PAT Display -->
+				<div class="p-3.5 rounded-lg bg-amber-50 dark:bg-amber-950/30 border border-amber-200 dark:border-amber-800">
+					<div class="flex items-center gap-2 text-sm font-semibold text-amber-800 dark:text-amber-200 mb-2">
+						<Icon name="lucide:key-round" class="w-4 h-4" />
+						<span>Your Personal Access Token</span>
+					</div>
+					<div class="flex items-center gap-2">
+						<code class="flex-1 px-3 py-2 rounded-md bg-white dark:bg-slate-900 border border-amber-300 dark:border-amber-700 text-xs font-mono text-slate-900 dark:text-slate-100 select-all break-all">
+							{generatedPat}
+						</code>
+						<button
+							type="button"
+							onclick={copyPat}
+							class="shrink-0 flex items-center justify-center w-9 h-9 rounded-lg transition-all
+								{patCopied
+									? 'bg-green-100 dark:bg-green-900/30 text-green-600 dark:text-green-400'
+									: 'bg-amber-100 dark:bg-amber-900 hover:bg-amber-200 dark:hover:bg-amber-800 text-amber-800 dark:text-amber-200'}"
+							title="Copy token"
+						>
+							<Icon name={patCopied ? 'lucide:check' : 'lucide:copy'} class="w-4 h-4" />
+						</button>
+					</div>
+					<div class="flex items-center gap-1.5 mt-2 text-xs text-amber-600 dark:text-amber-400">
+						<Icon name="lucide:triangle-alert" class="w-3.5 h-3.5 shrink-0" />
+						<span>Copy this token now. It won't be shown again.</span>
+					</div>
+				</div>
+			</div>
+		</div>
+	{/snippet}
+</Dialog>

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

@@ -2,9 +2,14 @@
 	import DataManagementSettings from './DataManagementSettings.svelte';
 	import AdvancedSettings from './AdvancedSettings.svelte';
 	import UpdateSettings from './UpdateSettings.svelte';
+	import AuthModeSettings from './AuthModeSettings.svelte';
 </script>
 
-<UpdateSettings />
+<AuthModeSettings />
+
+<div class="mt-6">
+	<UpdateSettings />
+</div>
 
 <div class="mt-6">
 	<DataManagementSettings />

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}
+/>