@myrialabs/clopen 0.1.10 → 0.2.0

package/frontend/lib/components/common/FolderBrowser.svelte

@@ -6,7 +6,7 @@
 	import Dialog from './Dialog.svelte';
 	import { debug } from '$shared/utils/logger';
 	import ws from '$frontend/lib/utils/ws';
-	import { settings } from '$frontend/lib/stores/features/settings.svelte';
+	import { systemSettings } from '$frontend/lib/stores/features/settings.svelte';
 	
 	interface FileItem {
 		name: string;
@@ -43,7 +43,7 @@
 	let deleteFolderConfirmName = $state('');
 
 	// Derived: whether directory access is restricted
-	const hasRestrictions = $derived(settings.allowedBasePaths && settings.allowedBasePaths.length > 0);
+	const hasRestrictions = $derived(systemSettings.allowedBasePaths && systemSettings.allowedBasePaths.length > 0);
 
 	// Detect backend OS from current path (drive letter = Windows)
 	const isWindows = $derived(/^[A-Za-z]:/.test(currentPath));
@@ -89,13 +89,13 @@
 
 	// Check if a path is accessible (within allowed base paths)
 	function isPathAllowed(path: string): boolean {
-		if (!settings.allowedBasePaths || settings.allowedBasePaths.length === 0) return true;
-		return settings.allowedBasePaths.some(base => isWithinBase(path, base));
+		if (!systemSettings.allowedBasePaths || systemSettings.allowedBasePaths.length === 0) return true;
+		return systemSettings.allowedBasePaths.some(base => isWithinBase(path, base));
 	}
 
 	// Check if current path is at the restriction boundary (cannot go up)
 	const atRestrictionBoundary = $derived(
-		hasRestrictions && settings.allowedBasePaths.some(base => pathsEqual(currentPath, base))
+		hasRestrictions && systemSettings.allowedBasePaths.some(base => pathsEqual(currentPath, base))
 	);
 
 	// Get available drives/mount points for all platforms
@@ -128,8 +128,8 @@
 	// Get user's home directory or current working directory
 	async function getInitialPath(): Promise<string> {
 		// If restrictions are set, start at the first allowed base path
-		if (settings.allowedBasePaths && settings.allowedBasePaths.length > 0) {
-			return settings.allowedBasePaths[0];
+		if (systemSettings.allowedBasePaths && systemSettings.allowedBasePaths.length > 0) {
+			return systemSettings.allowedBasePaths[0];
 		}
 
 		try {
@@ -225,7 +225,7 @@
 
 			// Enforce access restrictions
 			if (!isPathAllowed(currentPath)) {
-				error = `Access restricted. Allowed paths: ${settings.allowedBasePaths.join(', ')}`;
+				error = `Access restricted. Allowed paths: ${systemSettings.allowedBasePaths.join(', ')}`;
 				items = [];
 				return;
 			}
@@ -546,7 +546,7 @@
 					<div class="flex items-center gap-2 flex-wrap">
 						{#if hasRestrictions}
 							<!-- Restricted mode: show allowed base paths as quick access -->
-							{#each settings.allowedBasePaths as basePath (basePath)}
+							{#each systemSettings.allowedBasePaths as basePath (basePath)}
 								<button
 									onclick={() => navigateToLocation(basePath)}
 									class="px-3 py-1.5 text-xs rounded-lg bg-slate-200 dark:bg-slate-700 hover:bg-slate-300 dark:hover:bg-slate-600 text-slate-700 dark:text-slate-300 transition-colors"

package/frontend/lib/components/common/UpdateBanner.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { updateState, runUpdate, dismissUpdate, checkForUpdate } from '$frontend/lib/stores/ui/update.svelte';
-	import { settings, updateSettings } from '$frontend/lib/stores/features/settings.svelte';
+	import { systemSettings, updateSystemSettings } from '$frontend/lib/stores/features/settings.svelte';
 	import Icon from '$frontend/lib/components/common/Icon.svelte';
 	import { slide } from 'svelte/transition';
 
@@ -22,7 +22,7 @@
 	}
 
 	function toggleAutoUpdate() {
-		updateSettings({ autoUpdate: !settings.autoUpdate });
+		updateSystemSettings({ autoUpdate: !systemSettings.autoUpdate });
 	}
 
 	function handleRetry() {

package/frontend/lib/components/preview/browser/BrowserPreview.svelte

@@ -112,7 +112,7 @@
 			}
 		},
 		onMcpCursorHide: () => {
-			// Cursor stays visible between automated steps until user interacts manually
+			mcpVirtualCursor = { ...mcpVirtualCursor, visible: false };
 		},
 		transformBrowserToDisplayCoordinates: (browserX, browserY) => {
 			return transformBrowserToDisplayCoordinates(browserX, browserY);

package/frontend/lib/components/preview/browser/core/mcp-handlers.svelte.ts

@@ -68,6 +68,15 @@ export function createMcpHandler(config: McpHandlerConfig) {
 			handleTestCompleted(data);
 		});
 
+		// Hide cursor when the entire Claude request finishes or is stopped
+		ws.on('chat:complete', () => {
+			if (onCursorHide) onCursorHide();
+		});
+
+		ws.on('chat:cancelled', () => {
+			if (onCursorHide) onCursorHide();
+		});
+
 		// MCP Tab Management - Request/Response handlers
 		setupTabManagementListeners();
 
@@ -154,10 +163,9 @@ export function createMcpHandler(config: McpHandlerConfig) {
 		}
 	}
 
-	function handleTestCompleted(data: { sessionId: string; timestamp: number; source: 'mcp' }) {
-		if (mcpControlState.browserSessionId === data.sessionId && onCursorHide) {
-			onCursorHide();
-		}
+	function handleTestCompleted(_data: { sessionId: string; timestamp: number; source: 'mcp' }) {
+		// Cursor is hidden via chat:complete / chat:cancelled listeners instead,
+		// because test-completed fires per-tool-call, not at end of full request.
 	}
 
 	function handleTabsListRequest(data: { requestId: string }) {

package/frontend/lib/components/settings/SettingsModal.svelte

@@ -9,14 +9,19 @@
 		settingsSections,
 		type SettingsSection
 	} from '$frontend/lib/stores/ui/settings-modal.svelte';
+	import { authStore } from '$frontend/lib/stores/features/auth.svelte';
+	import { systemSettings } from '$frontend/lib/stores/features/settings.svelte';
 
 	// Import settings components
 	import ModelSettings from './model/ModelSettings.svelte';
 	import AIEnginesSettings from './engines/AIEnginesSettings.svelte';
 	import AppearanceSettings from './appearance/AppearanceSettings.svelte';
-	import UserSettings from './user/UserSettings.svelte';
+	import AccountSettings from './account/AccountSettings.svelte';
 	import NotificationSettings from './notifications/NotificationSettings.svelte';
-	import GeneralSettings from './general/GeneralSettings.svelte';
+	import TeamSettings from './admin/UserManagement.svelte';
+	import InviteManagement from './admin/InviteManagement.svelte';
+	import SecuritySettings from './security/SecuritySettings.svelte';
+	import SystemSettings from './system/SystemSettings.svelte';
 
 	// Responsive state
 	let isMobileMenuOpen = $state(false);
@@ -25,6 +30,17 @@
 	const isMobile = $derived(windowWidth < 768);
 	const isOpen = $derived(settingsModalState.isOpen);
 	const activeSection = $derived(settingsModalState.activeSection);
+	const isAdmin = $derived(authStore.isAdmin);
+	const isNoAuth = $derived(systemSettings.authMode === 'none');
+
+	// Filter sections: hide admin-only tabs for non-admins, hide team in no-auth mode
+	const visibleSections = $derived(
+		settingsSections.filter(s => {
+			if (s.adminOnly && !isAdmin) return false;
+			if (s.id === 'team' && isNoAuth) return false;
+			return true;
+		})
+	);
 
 	// Handle section change
 	function handleSectionChange(section: SettingsSection) {
@@ -48,6 +64,14 @@
 		}
 	}
 
+	// Auto-redirect when current section becomes hidden
+	$effect(() => {
+		const isVisible = visibleSections.some(s => s.id === activeSection);
+		if (!isVisible && visibleSections.length > 0) {
+			setActiveSection(visibleSections[0].id);
+		}
+	});
+
 	// Get current section info
 	const currentSectionInfo = $derived(
 		settingsSections.find((s) => s.id === activeSection) || settingsSections[0]
@@ -122,9 +146,9 @@
 			<div class="flex flex-1 min-h-0 relative">
 				<!-- Sidebar -->
 				<aside
-					class="flex flex-col w-68 shrink-0 bg-white dark:bg-slate-900/98 border-r border-slate-200 dark:border-slate-800
+					class="flex flex-col w-65 shrink-0 bg-white dark:bg-slate-900/98 border-r border-slate-200 dark:border-slate-800
 						{isMobile
-						? 'absolute left-0 top-0 bottom-0 z-10 w-70 shadow-[4px_0_20px_rgba(0,0,0,0.15)] dark:shadow-[4px_0_20px_rgba(0,0,0,0.3)] transition-transform duration-[250ms] ease-out'
+						? 'absolute left-0 top-0 bottom-0 z-10 w-70 shadow-[4px_0_20px_rgba(0,0,0,0.15)] dark:shadow-[4px_0_20px_rgba(0,0,0,0.3)] transition-transform duration-250 ease-out'
 						: ''}
 						{isMobile && !isMobileMenuOpen ? '-translate-x-full' : 'translate-x-0'}"
 				>
@@ -149,7 +173,7 @@
 					{/if}
 
 					<nav class="flex-1 overflow-y-auto p-3">
-						{#each settingsSections as section (section.id)}
+						{#each visibleSections as section (section.id)}
 							<button
 								type="button"
 								class="flex items-start gap-3 w-full py-3 px-3.5 bg-transparent border-none rounded-lg text-slate-500 text-sm text-left cursor-pointer transition-all duration-150 mb-1
@@ -199,25 +223,36 @@
 							<div in:fly={{ x: 20, duration: 200 }}>
 								<ModelSettings />
 							</div>
-						{:else if activeSection === 'engines'}
-							<div in:fly={{ x: 20, duration: 200 }}>
-								<AIEnginesSettings />
-							</div>
 						{:else if activeSection === 'appearance'}
 							<div in:fly={{ x: 20, duration: 200 }}>
 								<AppearanceSettings />
 							</div>
-						{:else if activeSection === 'user'}
-							<div in:fly={{ x: 20, duration: 200 }}>
-								<UserSettings />
-							</div>
 						{:else if activeSection === 'notifications'}
 							<div in:fly={{ x: 20, duration: 200 }}>
 								<NotificationSettings />
 							</div>
-						{:else if activeSection === 'general'}
+						{:else if activeSection === 'account'}
+							<div in:fly={{ x: 20, duration: 200 }}>
+								<AccountSettings />
+							</div>
+						{:else if activeSection === 'engines' && isAdmin}
+							<div in:fly={{ x: 20, duration: 200 }}>
+								<AIEnginesSettings />
+							</div>
+						{:else if activeSection === 'team' && isAdmin && !isNoAuth}
+							<div in:fly={{ x: 20, duration: 200 }}>
+								<TeamSettings />
+								<div class="mt-6">
+									<InviteManagement />
+								</div>
+							</div>
+						{:else if activeSection === 'security' && isAdmin}
+							<div in:fly={{ x: 20, duration: 200 }}>
+								<SecuritySettings />
+							</div>
+						{:else if activeSection === 'system' && isAdmin}
 							<div in:fly={{ x: 20, duration: 200 }}>
-								<GeneralSettings />
+								<SystemSettings />
 							</div>
 						{/if}
 					</div>

package/frontend/lib/components/settings/SettingsView.svelte

@@ -1,12 +1,19 @@
 <script lang="ts">
+	import { authStore } from '$frontend/lib/stores/features/auth.svelte';
 	import PageTemplate from '../common/PageTemplate.svelte';
 
 	// Import modular components
 	import ModelSettings from './model/ModelSettings.svelte';
 	import AppearanceSettings from './appearance/AppearanceSettings.svelte';
-	import UserSettings from './user/UserSettings.svelte';
+	import AccountSettings from './account/AccountSettings.svelte';
 	import NotificationSettings from './notifications/NotificationSettings.svelte';
-	import GeneralSettings from './general/GeneralSettings.svelte';
+	import SecuritySettings from './security/SecuritySettings.svelte';
+	import SystemSettings from './system/SystemSettings.svelte';
+	import UserManagement from './admin/UserManagement.svelte';
+	import InviteManagement from './admin/InviteManagement.svelte';
+
+	const isAdmin = $derived(authStore.isAdmin);
+	const isNoAuth = $derived(authStore.isNoAuth);
 </script>
 
 <PageTemplate
@@ -22,14 +29,21 @@
 			<!-- Appearance Configuration -->
 			<AppearanceSettings />
 
-			<!-- User Settings -->
-			<UserSettings />
-
 			<!-- Notification Settings -->
 			<NotificationSettings />
 
-			<!-- General Settings -->
-			<GeneralSettings />
+			<!-- Account (hidden in no-auth mode) -->
+			{#if !isNoAuth}
+				<AccountSettings />
+			{/if}
+
+			<!-- Admin-only sections -->
+			{#if isAdmin}
+				<UserManagement />
+				<InviteManagement />
+				<SecuritySettings />
+				<SystemSettings />
+			{/if}
 
 		</div>
 	</div>

package/frontend/lib/components/settings/account/AccountSettings.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+	import UserSettings from '../user/UserSettings.svelte';
+</script>
+
+<UserSettings />

package/frontend/lib/components/settings/admin/InviteManagement.svelte

@@ -0,0 +1,239 @@
+<script lang="ts">
+	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 ws from '$frontend/lib/utils/ws';
+	import { debug } from '$shared/utils/logger';
+
+	interface Invite {
+		id: string;
+		role: string;
+		label: string | null;
+		max_uses: number;
+		use_count: number;
+		expires_at: string | null;
+		created_at: string;
+	}
+
+	let invites = $state<Invite[]>([]);
+	let loading = $state(true);
+	let isCreating = $state(false);
+
+	// Store generated URLs by invite ID — persisted in sessionStorage so
+	// they survive page refresh (raw token only available at creation time)
+	const STORAGE_KEY = 'clopen-invite-urls';
+	let inviteURLs = $state<Record<string, string>>({});
+
+	function loadStoredURLs() {
+		try {
+			const stored = sessionStorage.getItem(STORAGE_KEY);
+			if (stored) inviteURLs = JSON.parse(stored);
+		} catch { /* ignore */ }
+	}
+
+	function saveURLsToStorage() {
+		sessionStorage.setItem(STORAGE_KEY, JSON.stringify(inviteURLs));
+	}
+
+	// Per-invite copy feedback
+	let copiedId = $state<string | null>(null);
+	let copiedTimer: ReturnType<typeof setTimeout> | null = null;
+
+	// Revoke state
+	let showRevokeConfirm = $state(false);
+	let inviteToRevoke = $state<Invite | null>(null);
+
+	// Countdown ticker
+	let tick = $state(0);
+	let tickInterval: ReturnType<typeof setInterval> | null = null;
+
+	// Filter: only show unused and not-expired invites
+	const activeInvites = $derived.by(() => {
+		void tick;
+		const now = Date.now();
+		return invites.filter(inv => {
+			const usedUp = inv.max_uses > 0 && inv.use_count >= inv.max_uses;
+			const expired = inv.expires_at !== null && new Date(inv.expires_at).getTime() < now;
+			return !usedUp && !expired;
+		});
+	});
+
+	function formatCountdown(expiresAt: string): string {
+		void tick;
+		const remaining = new Date(expiresAt).getTime() - Date.now();
+		if (remaining <= 0) return 'Expired';
+
+		const totalSec = Math.ceil(remaining / 1000);
+		const min = Math.floor(totalSec / 60);
+		const sec = totalSec % 60;
+		return `${min}:${String(sec).padStart(2, '0')}`;
+	}
+
+	function startTicker() {
+		if (tickInterval) return;
+		tickInterval = setInterval(() => { tick++; }, 1000);
+	}
+
+	function stopTicker() {
+		if (tickInterval) {
+			clearInterval(tickInterval);
+			tickInterval = null;
+		}
+	}
+
+	async function loadInvites() {
+		loading = true;
+		try {
+			invites = await ws.http('auth:list-invites', {});
+		} catch (error) {
+			debug.error('auth', 'Failed to load invites:', error);
+		} finally {
+			loading = false;
+		}
+	}
+
+	async function generateInvite() {
+		isCreating = true;
+		try {
+			const result = await ws.http('auth:create-invite', {
+				maxUses: 1,
+				expiresInMinutes: 15
+			});
+
+			const baseURL = window.location.origin;
+			const url = `${baseURL}/#invite/${result.inviteToken}`;
+			inviteURLs = { ...inviteURLs, [result.invite.id]: url };
+			saveURLsToStorage();
+
+			addNotification({ type: 'success', title: 'Created', message: 'Invite link created' });
+			await loadInvites();
+		} catch (error) {
+			debug.error('auth', 'Failed to create invite:', error);
+			addNotification({ type: 'error', title: 'Error', message: 'Failed to create invite' });
+		} finally {
+			isCreating = false;
+		}
+	}
+
+	function copyInviteURL(inviteId: string) {
+		const url = inviteURLs[inviteId];
+		if (!url) return;
+		navigator.clipboard.writeText(url);
+		copiedId = inviteId;
+		if (copiedTimer) clearTimeout(copiedTimer);
+		copiedTimer = setTimeout(() => { copiedId = null; }, 2000);
+	}
+
+	function confirmRevoke(invite: Invite) {
+		inviteToRevoke = invite;
+		showRevokeConfirm = true;
+	}
+
+	async function revokeInvite() {
+		if (!inviteToRevoke) return;
+		const revokedId = inviteToRevoke.id;
+		try {
+			await ws.http('auth:revoke-invite', { id: revokedId });
+			const { [revokedId]: _, ...rest } = inviteURLs;
+			inviteURLs = rest;
+			saveURLsToStorage();
+			invites = invites.filter(inv => inv.id !== revokedId);
+			addNotification({ type: 'success', title: 'Revoked', message: 'Invite link has been revoked' });
+		} catch (error) {
+			debug.error('auth', 'Failed to revoke invite:', error);
+			addNotification({ type: 'error', title: 'Error', message: 'Failed to revoke invite' });
+		} finally {
+			showRevokeConfirm = false;
+			inviteToRevoke = null;
+		}
+	}
+
+	// Load on mount + start ticker + restore URLs from storage
+	$effect(() => {
+		if (authStore.isAdmin) {
+			loadStoredURLs();
+			loadInvites();
+			startTicker();
+			return () => stopTicker();
+		}
+	});
+</script>
+
+{#if authStore.isAdmin}
+<div class="py-1">
+	<h3 class="text-base font-bold text-slate-900 dark:text-slate-100 mb-1.5">Invite</h3>
+	<p class="text-sm text-slate-600 dark:text-slate-500 mb-5">Generate invite links for new team members</p>
+
+	{#if loading}
+		<div class="flex items-center justify-center gap-3 py-8 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>
+			<span>Loading...</span>
+		</div>
+	{:else}
+		<div class="flex flex-col gap-2">
+			{#each activeInvites as invite (invite.id)}
+				{@const url = inviteURLs[invite.id]}
+				<div class="flex items-center gap-2 px-3 py-2.5 bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 rounded-lg">
+					<div class="flex-1 min-w-0 font-mono text-xs text-slate-600 dark:text-slate-400 truncate select-all">
+						{url ?? '—'}
+					</div>
+					{#if url}
+						<button
+							type="button"
+							onclick={() => copyInviteURL(invite.id)}
+							class="flex items-center justify-center w-7 h-7 rounded-md transition-all shrink-0
+								{copiedId === invite.id
+								? 'bg-green-100 dark:bg-green-900/30 text-green-600 dark:text-green-400'
+								: 'hover:bg-violet-100 dark:hover:bg-violet-900/30 text-slate-400 hover:text-violet-600 dark:hover:text-violet-400'}"
+							title="Copy link"
+						>
+							<Icon name={copiedId === invite.id ? 'lucide:check' : 'lucide:copy'} class="w-3.5 h-3.5" />
+						</button>
+					{/if}
+					{#if invite.expires_at}
+						<span class="text-xs font-mono text-slate-500 tabular-nums shrink-0">
+							{formatCountdown(invite.expires_at)}
+						</span>
+					{/if}
+					<button
+						type="button"
+						onclick={() => confirmRevoke(invite)}
+						class="flex items-center justify-center w-7 h-7 rounded-md hover:bg-red-100 dark:hover:bg-red-900/30 text-slate-400 hover:text-red-500 dark:hover:text-red-400 transition-all shrink-0"
+						title="Revoke invite"
+					>
+						<Icon name="lucide:x" class="w-3.5 h-3.5" />
+					</button>
+				</div>
+			{/each}
+
+			<button
+				type="button"
+				onclick={generateInvite}
+				disabled={isCreating}
+				class="inline-flex items-center gap-1.5 py-2 px-3.5 mt-1 bg-violet-500/10 dark:bg-violet-500/10 border border-violet-500/20 dark:border-violet-500/25 rounded-lg text-violet-600 dark:text-violet-400 text-xs font-semibold cursor-pointer transition-all duration-150 hover:bg-violet-500/20 hover:border-violet-600/40 self-start disabled:opacity-50 disabled:cursor-not-allowed"
+			>
+				{#if isCreating}
+					<div class="w-3.5 h-3.5 border-2 border-violet-600/30 border-t-violet-600 rounded-full animate-spin"></div>
+					Generating...
+				{:else}
+					<Icon name="lucide:plus" class="w-3.5 h-3.5" />
+					Generate Invite Link
+				{/if}
+			</button>
+		</div>
+	{/if}
+</div>
+
+<Dialog
+	bind:isOpen={showRevokeConfirm}
+	onClose={() => { showRevokeConfirm = false; inviteToRevoke = null; }}
+	title="Revoke Invite"
+	type="warning"
+	message="Revoke this invite? Anyone with this link will no longer be able to join."
+	confirmText="Revoke"
+	cancelText="Cancel"
+	showCancel={true}
+	onConfirm={revokeInvite}
+/>
+{/if}

package/frontend/lib/components/settings/admin/UserManagement.svelte

@@ -0,0 +1,127 @@
+<script lang="ts">
+	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 ws from '$frontend/lib/utils/ws';
+	import { debug } from '$shared/utils/logger';
+
+	interface User {
+		id: string;
+		name: string;
+		color: string;
+		avatar: string;
+		role: 'admin' | 'member';
+		createdAt: string;
+	}
+
+	let users = $state<User[]>([]);
+	let loading = $state(true);
+
+	let showRemoveConfirm = $state(false);
+	let userToRemove = $state<User | null>(null);
+
+	async function loadUsers() {
+		loading = true;
+		try {
+			users = await ws.http('auth:list-users', {});
+		} catch (error) {
+			debug.error('settings', 'Failed to load users:', error);
+			addNotification({ type: 'error', title: 'Error', message: 'Failed to load users' });
+		} finally {
+			loading = false;
+		}
+	}
+
+	function confirmRemove(user: User) {
+		userToRemove = user;
+		showRemoveConfirm = true;
+	}
+
+	async function removeUser() {
+		if (!userToRemove) return;
+		try {
+			await ws.http('auth:remove-user', { userId: userToRemove.id });
+			addNotification({ type: 'success', title: 'Removed', message: `${userToRemove.name} has been removed` });
+			showRemoveConfirm = false;
+			userToRemove = null;
+			await loadUsers();
+		} catch (error) {
+			debug.error('settings', 'Failed to remove user:', error);
+			addNotification({ type: 'error', title: 'Error', message: error instanceof Error ? error.message : 'Failed to remove user' });
+		}
+	}
+
+	// Load on mount
+	$effect(() => {
+		if (authStore.isAdmin) {
+			loadUsers();
+		}
+	});
+</script>
+
+{#if authStore.isAdmin}
+<div class="py-1">
+	<h3 class="text-base font-bold text-slate-900 dark:text-slate-100 mb-1.5">User Management</h3>
+	<p class="text-sm text-slate-600 dark:text-slate-500 mb-5">Manage team members</p>
+
+	{#if loading}
+		<div class="flex items-center justify-center gap-3 py-8 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>
+			<span>Loading users...</span>
+		</div>
+	{:else}
+		<div class="flex flex-col gap-2">
+			{#each users as user (user.id)}
+				<div class="flex items-center gap-3 p-3.5 bg-slate-100/80 dark:bg-slate-800/80 border border-slate-200 dark:border-slate-800 rounded-xl">
+					<div
+						class="flex items-center justify-center w-9 h-9 rounded-lg text-sm font-bold text-white shrink-0"
+						style="background-color: {user.color || '#7c3aed'}"
+					>
+						{user.avatar || 'U'}
+					</div>
+					<div class="flex-1 min-w-0">
+						<div class="text-sm font-semibold text-slate-900 dark:text-slate-100">
+							{user.name}
+							{#if user.id === authStore.currentUser?.id}
+								<span class="text-xs text-slate-500 font-normal ml-1">(you)</span>
+							{/if}
+						</div>
+						<div class="text-xs text-slate-500">
+							{user.role === 'admin' ? 'Administrator' : 'Member'} &middot; Joined {new Date(user.createdAt).toLocaleDateString()}
+						</div>
+					</div>
+					<span class="inline-flex items-center gap-1 py-1 px-2.5 rounded-full text-2xs font-semibold
+						{user.role === 'admin' ? 'bg-violet-500/15 text-violet-600 dark:text-violet-400' : 'bg-slate-200 dark:bg-slate-700 text-slate-600 dark:text-slate-400'}">
+						<Icon name="lucide:{user.role === 'admin' ? 'shield' : 'user'}" class="w-3 h-3" />
+						{user.role === 'admin' ? 'Admin' : 'Member'}
+					</span>
+					{#if user.role !== 'admin' && user.id !== authStore.currentUser?.id}
+						<button
+							type="button"
+							onclick={() => confirmRemove(user)}
+							class="flex items-center justify-center w-8 h-8 rounded-lg hover:bg-red-100 dark:hover:bg-red-900/30 text-slate-400 hover:text-red-500 dark:hover:text-red-400 transition-all"
+							title="Remove user"
+						>
+							<Icon name="lucide:user-minus" class="w-4 h-4" />
+						</button>
+					{/if}
+				</div>
+			{/each}
+		</div>
+	{/if}
+</div>
+
+<!-- Remove User Confirmation -->
+<Dialog
+	bind:isOpen={showRemoveConfirm}
+	onClose={() => { showRemoveConfirm = false; userToRemove = null; }}
+	title="Remove User"
+	type="warning"
+	message={`Remove "${userToRemove?.name || ''}" from the team? Their sessions will be terminated immediately.`}
+	confirmText="Remove"
+	cancelText="Cancel"
+	showCancel={true}
+	onConfirm={removeUser}
+/>
+{/if}