@myrialabs/clopen 0.1.9 → 0.2.0

package/frontend/lib/components/chat/input/ChatInput.svelte

@@ -407,7 +407,7 @@
 			class="
 			relative z-10 flex items-end gap-3 lg:gap-4 overflow-hidden bg-white dark:bg-slate-900
 			border border-slate-200 dark:border-slate-700 rounded-xl transition-all duration-200
-			focus-within:ring-2 focus-within:ring-violet-500 {fileHandling.isDragging && 'ring-2 ring-violet-500'}"
+			focus-within:ring-1 focus-within:ring-violet-500 {fileHandling.isDragging && 'ring-1 ring-violet-500'}"
 			role="region"
 			aria-label="Message input with file drop zone"
 			ondragover={fileHandling.handleDragOver}
@@ -428,7 +428,6 @@
 						placeholder={chatPlaceholder}
 						class="flex-1 w-full px-4 pt-2 pb-4 border-0 bg-transparent resize-none focus:outline-none text-slate-900 dark:text-slate-100 placeholder-slate-500 dark:placeholder-slate-400 text-base leading-relaxed disabled:opacity-50 disabled:cursor-not-allowed"
 						rows="1"
-						style="max-height: 22.5rem; overflow-y: hidden;"
 						disabled={isInputDisabled}
 						oninput={handleTextareaInput}
 						onkeydown={handleKeyDown}

package/frontend/lib/components/chat/input/components/EngineModelPicker.svelte

@@ -122,9 +122,9 @@
 	// Model Picker (existing logic)
 	// ════════════════════════════════════════════
 
-	// Track whether a chat has started (any user message in current session)
+	// Track whether a chat has started (any user message in current session, or session has history e.g. restored to initial)
 	const hasStartedChat = $derived(
-		sessionState.messages.some(m => m.type === 'user')
+		sessionState.messages.some(m => m.type === 'user') || sessionState.hasMessageHistory
 	);
 
 	// Engine lock: once chat starts, the engine is locked for this session.

package/frontend/lib/components/chat/input/composables/use-chat-actions.svelte.ts

@@ -45,10 +45,10 @@ export function useChatActions(params: ChatActionsParams) {
 		// If in edit mode, restore to parent of edited message first
 		if (editModeState.isEditing) {
 			try {
-				// Restore to parent of edited message (if exists)
-				const restoreTargetId = editModeState.parentMessageId || editModeState.messageId;
-
-				if (restoreTargetId && sessionState.currentSession?.id) {
+				if (sessionState.currentSession?.id) {
+					// Restore to parent of edited message (state before the edited message)
+					// When parentMessageId is null (editing first message), restore to initial state
+					const restoreTargetId = editModeState.parentMessageId || '__initial__';
 					await snapshotService.restore(restoreTargetId, sessionState.currentSession.id);
 				}
 

package/frontend/lib/components/chat/input/composables/use-textarea-resize.svelte.ts

@@ -7,33 +7,25 @@ export function useTextareaResize() {
 		messageText: string
 	) {
 		if (textareaElement) {
-			// Reset height to auto first to get accurate scrollHeight
+			// Hide overflow during measurement to prevent scrollbar from affecting width
+			textareaElement.style.overflowY = 'hidden';
+			// Reset height to auto to get accurate scrollHeight
 			textareaElement.style.height = 'auto';
 
 			// If content is empty or only whitespace, keep at minimum height
 			if (!messageText || !messageText.trim()) {
-				// Force single line height
-				textareaElement.style.height = 'auto';
-				textareaElement.style.overflowY = 'hidden';
 				return;
 			}
 
-			// Calculate required height based on content
-			const scrollHeight = textareaElement.scrollHeight + 7;
-			const lineHeight = parseInt(getComputedStyle(textareaElement).lineHeight) || 24;
-			const paddingTop = parseInt(getComputedStyle(textareaElement).paddingTop) || 0;
-			const paddingBottom = parseInt(getComputedStyle(textareaElement).paddingBottom) || 0;
-			const minHeight = lineHeight + paddingTop + paddingBottom;
+			// Measure content height and cap at max
+			const scrollHeight = textareaElement.scrollHeight;
+			const newHeight = Math.min(scrollHeight, MAX_HEIGHT_PX);
+			textareaElement.style.height = newHeight + 'px';
 
-			const newHeight = Math.max(minHeight, scrollHeight);
-
-			if (newHeight >= MAX_HEIGHT_PX) {
-				textareaElement.style.height = '22.5rem';
-				textareaElement.style.overflowY = 'auto';
-			} else {
-				textareaElement.style.height = newHeight / 16 + 'rem';
-				textareaElement.style.overflowY = 'hidden';
-			}
+			// Check actual overflow AFTER setting height to handle edge cases
+			// where collapsed measurement differs from rendered content height
+			textareaElement.style.overflowY =
+				textareaElement.scrollHeight > textareaElement.clientHeight ? 'auto' : 'hidden';
 		}
 	}
 

package/frontend/lib/components/checkpoint/TimelineModal.svelte

@@ -13,6 +13,7 @@
 	import { snapshotService } from '$frontend/lib/services/snapshot/snapshot.service';
 	import type { RestoreConflict, ConflictResolution } from '$frontend/lib/services/snapshot/snapshot.service';
 	import type { TimelineResponse, GraphNode, GraphEdge, VersionGroup, AnimationState } from './timeline/types';
+	import ws from '$frontend/lib/utils/ws';
 
 	let {
 		isOpen = $bindable(false),
@@ -107,6 +108,19 @@
 		}
 	});
 
+	// Reload timeline when a snapshot is captured (stats become available after stream ends)
+	$effect(() => {
+		if (!isOpen) return;
+
+		const unsub = ws.on('snapshot:captured', (data: { chatSessionId: string }) => {
+			if (data.chatSessionId === sessionId && !processingAction && !animationState.isAnimating) {
+				loadTimeline();
+			}
+		});
+
+		return unsub;
+	});
+
 	// Scroll to bottom on initial load
 	$effect(() => {
 		if (timelineData && graphNodes.length > 0 && scrollContainer && !hasScrolledToBottom) {
@@ -445,9 +459,7 @@
 	type="warning"
 	title="Restore Checkpoint"
 	message={pendingNode
-		? `Are you sure you want to restore to this checkpoint?
-"${getTruncatedMessage(pendingNode.checkpoint.messageText)}"
-This will restore your files to this point within this session.`
+		? `Are you sure you want to restore to this checkpoint?\n"${getTruncatedMessage(pendingNode.checkpoint.messageText)}"\nThis will restore your files to this point within this session.`
 		: ''}
 	confirmText="Restore"
 	cancelText="Cancel"

package/frontend/lib/components/checkpoint/timeline/TimelineNode.svelte

@@ -21,6 +21,7 @@
 
 	const pos = $derived(getInterpolatedPosition(node, animationState));
 	const nodeClass = $derived(getInterpolatedNodeClass(node));
+	const isInitial = $derived(!!node.checkpoint.isInitial);
 </script>
 
 <!-- Node group -->
@@ -33,6 +34,7 @@
 	aria-label={`${node.type === 'main' ? 'Checkpoint' : 'Version'} - ${node.checkpoint.messageText}`}
 >
 	<title>{node.checkpoint.messageText}</title>
+
 	<!-- Node circle -->
 	<circle
 		cx={pos.x}
@@ -84,25 +86,34 @@
 		height={SIZE.labelHeight - 8}
 	>
 		<div class="flex flex-col h-full justify-center pointer-events-none">
-			<!-- Timestamp and file stats in one line -->
-			<div class="flex items-center gap-2 text-xs text-slate-500 dark:text-slate-400 leading-tight">
-				<span>{formatTime(node.checkpoint.timestamp)}</span>
-				<span class="w-px h-3 bg-slate-300 dark:bg-slate-600"></span>
-				<span class="flex items-center gap-0.5">
-					<Icon name="lucide:file-text" class="w-2.5 h-2.5" />
-					{node.checkpoint.filesChanged ?? 0}
-				</span>
-				<span class="text-green-600 dark:text-green-400">
-					+{node.checkpoint.insertions ?? 0}
-				</span>
-				<span class="text-red-600 dark:text-red-400">
-					-{node.checkpoint.deletions ?? 0}
-				</span>
-			</div>
-			<!-- Message text below timestamp with auto truncation -->
-			<div class="text-sm text-slate-900 dark:text-slate-100 leading-tight truncate mt-0.5">
-				{node.checkpoint.messageText}
-			</div>
+			{#if isInitial}
+				<div class="flex items-center gap-2 text-xs text-slate-500 dark:text-slate-400 leading-tight">
+					<span>{formatTime(node.checkpoint.timestamp)}</span>
+				</div>
+				<div class="text-sm text-slate-900 dark:text-slate-100 leading-tight truncate mt-0.5">
+					Session Start
+				</div>
+			{:else}
+				<!-- Timestamp and file stats in one line -->
+				<div class="flex items-center gap-2 text-xs text-slate-500 dark:text-slate-400 leading-tight">
+					<span>{formatTime(node.checkpoint.timestamp)}</span>
+					<span class="w-px h-3 bg-slate-300 dark:bg-slate-600"></span>
+					<span class="flex items-center gap-0.5">
+						<Icon name="lucide:file-text" class="w-2.5 h-2.5" />
+						{node.checkpoint.filesChanged ?? 0}
+					</span>
+					<span class="text-green-600 dark:text-green-400">
+						+{node.checkpoint.insertions ?? 0}
+					</span>
+					<span class="text-red-600 dark:text-red-400">
+						-{node.checkpoint.deletions ?? 0}
+					</span>
+				</div>
+				<!-- Message text below timestamp with auto truncation -->
+				<div class="text-sm text-slate-900 dark:text-slate-100 leading-tight truncate mt-0.5">
+					{node.checkpoint.messageText}
+				</div>
+			{/if}
 		</div>
 	</foreignObject>
 </g>

package/frontend/lib/components/checkpoint/timeline/types.ts

@@ -2,6 +2,9 @@
  * Timeline data structures and type definitions
  */
 
+/** Sentinel ID for the "initial state" node (before any chat messages) */
+export const INITIAL_NODE_ID = '__initial__';
+
 export interface CheckpointNode {
 	id: string;
 	messageId: string;
@@ -13,6 +16,7 @@ export interface CheckpointNode {
 	isOrphaned: boolean;
 	isCurrent: boolean;
 	hasSnapshot: boolean;
+	isInitial?: boolean; // true for the "initial state" node
 	senderName?: string | null;
 	// File change statistics (git-like)
 	filesChanged?: number;

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/git/CommitForm.svelte

@@ -30,11 +30,13 @@
 		if (!textareaEl) return;
 		// Reset to single line to measure content
 		textareaEl.style.height = 'auto';
-		// Line height is ~20px for text-xs, so 5 lines max = 100px
+		// Line height is ~20px for text-sm, so 5 lines max = 100px
 		const lineHeight = 20;
 		const maxHeight = lineHeight * 5;
 		const scrollHeight = textareaEl.scrollHeight;
-		textareaEl.style.height = Math.min(scrollHeight, maxHeight) + 'px';
+		const newHeight = Math.min(scrollHeight, maxHeight);
+		textareaEl.style.height = newHeight + 'px';
+		textareaEl.style.overflowY = scrollHeight > maxHeight ? 'auto' : 'hidden';
 	}
 
 	function handleInput() {
@@ -48,9 +50,9 @@
 			bind:this={textareaEl}
 			bind:value={commitMessage}
 			placeholder="Commit message..."
-			class="w-full px-2.5 py-2 text-sm bg-white dark:bg-slate-800/80 border border-slate-200 dark:border-slate-700 rounded-md text-slate-900 dark:text-slate-100 placeholder:text-slate-400 dark:placeholder:text-slate-600 resize-none outline-none focus:border-violet-500/40 focus:ring-1 focus:ring-violet-500/20 transition-colors overflow-hidden"
+			class="w-full px-2.5 py-2 text-sm bg-white dark:bg-slate-800/80 border border-slate-200 dark:border-slate-700 rounded-md text-slate-900 dark:text-slate-100 placeholder:text-slate-400 dark:placeholder:text-slate-600 resize-none outline-none focus:ring-1 focus:ring-violet-500 transition-colors"
 			rows="1"
-			style="height: 27px"
+			style="overflow-y: hidden;"
 			onkeydown={handleKeydown}
 			oninput={handleInput}
 			disabled={isCommitting}

package/frontend/lib/components/history/HistoryModal.svelte

@@ -71,7 +71,7 @@
 		}
 
 		try {
-			const messages = await ws.http('messages:list', { session_id: sessionId });
+			const messages = await ws.http('messages:list', { session_id: sessionId, include_all: true });
 
 			const firstUserMessage = messages.find((m: SDKMessage) => m.type === 'user');
 			let title = 'New Conversation';

package/frontend/lib/components/history/HistoryView.svelte

@@ -79,7 +79,7 @@
 
 		try {
 			// Get messages from current HEAD checkpoint (active branch only)
-			const messages = await ws.http('messages:list', { session_id: sessionId });
+			const messages = await ws.http('messages:list', { session_id: sessionId, include_all: true });
 
 			// Get title from first user message in current HEAD
 			const firstUserMessage = messages.find((m: SDKMessage) => m.type === 'user');

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