@myrialabs/clopen 0.0.1

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

@@ -0,0 +1,187 @@
+<script lang="ts">
+	import { settings, updateSettings } from '$frontend/lib/stores/features/settings.svelte';
+	import Icon from '../../common/Icon.svelte';
+	import Dialog from '../../common/Dialog.svelte';
+	import { detectPlatform } from '$frontend/lib/utils/platform';
+
+	let showAddPathDialog = $state(false);
+	let newPathValue = $state('');
+
+	// Detect backend OS: prioritize existing path entries, fallback to browser platform.
+	// Checking existing paths is most reliable (works correctly in WSL too).
+	const isWindowsBackend = $derived(
+		settings.allowedBasePaths.some(p => /^[A-Za-z]:/.test(p)) ||
+		(!settings.allowedBasePaths.some(p => p.startsWith('/')) && detectPlatform() === 'windows')
+	);
+	const pathInputPlaceholder = $derived(
+		isWindowsBackend ? 'e.g. C:\\Users\\projects' : 'e.g. /home/user/projects'
+	);
+
+	// Track which path index is being edited, and its current edit value
+	let editingIndex = $state<number | null>(null);
+	let editingValue = $state('');
+
+	function openAddPathDialog() {
+		newPathValue = '';
+		showAddPathDialog = true;
+	}
+
+	function addPath() {
+		const path = newPathValue.trim();
+		if (path && !settings.allowedBasePaths.includes(path)) {
+			updateSettings({ allowedBasePaths: [...settings.allowedBasePaths, path] });
+		}
+		newPathValue = '';
+		showAddPathDialog = false;
+	}
+
+	function removePath(index: number) {
+		const newPaths = [...settings.allowedBasePaths];
+		newPaths.splice(index, 1);
+		updateSettings({ allowedBasePaths: newPaths });
+		if (editingIndex === index) {
+			editingIndex = null;
+			editingValue = '';
+		}
+	}
+
+	function startEdit(index: number) {
+		editingIndex = index;
+		editingValue = settings.allowedBasePaths[index];
+	}
+
+	function saveEdit() {
+		if (editingIndex === null) return;
+		const path = editingValue.trim();
+		if (path) {
+			const newPaths = [...settings.allowedBasePaths];
+			newPaths[editingIndex] = path;
+			updateSettings({ allowedBasePaths: newPaths });
+		}
+		editingIndex = null;
+		editingValue = '';
+	}
+
+	function cancelEdit() {
+		editingIndex = null;
+		editingValue = '';
+	}
+
+	function handleEditKeydown(e: KeyboardEvent) {
+		if (e.key === 'Enter') saveEdit();
+		else if (e.key === 'Escape') cancelEdit();
+	}
+</script>
+
+<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>
+
+	<div class="flex flex-col gap-3.5">
+		<!-- Folder Access Restriction -->
+		<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-start gap-3.5 mb-4">
+				<div class="flex items-center justify-center w-10 h-10 rounded-lg shrink-0 bg-amber-400/15 text-amber-500">
+					<Icon name="lucide:folder-lock" class="w-5 h-5" />
+				</div>
+				<div class="flex flex-col gap-0.5 min-w-0 flex-1">
+					<div class="text-sm font-semibold text-slate-900 dark:text-slate-100">
+						Folder Access Restriction
+					</div>
+					<div class="text-xs text-slate-600 dark:text-slate-500">
+						Restrict the <span class="font-medium text-slate-700 dark:text-slate-400">Select Project Folder</span> browser to only show specific base directories.
+						This does not restrict file access in other parts of the app. Leave empty to allow browsing all directories.
+					</div>
+				</div>
+			</div>
+
+			<!-- Allowed paths list -->
+			<div class="flex flex-col gap-2">
+				{#if settings.allowedBasePaths.length === 0}
+					<div class="flex items-center gap-2 px-3 py-2.5 bg-green-500/10 border border-green-500/20 rounded-lg">
+						<Icon name="lucide:circle-check" class="w-4 h-4 text-green-600 dark:text-green-400 shrink-0" />
+						<span class="text-xs text-green-700 dark:text-green-400">
+							No restrictions — all directories can be selected as project folder
+						</span>
+					</div>
+				{:else}
+					{#each settings.allowedBasePaths as basePath, index (basePath + index)}
+						<div class="flex items-center gap-2 px-3 py-2 bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 rounded-lg group">
+							<Icon name="lucide:folder-check" class="w-4 h-4 text-violet-500 shrink-0" />
+
+							{#if editingIndex === index}
+								<!-- Edit mode -->
+								<input
+									type="text"
+									bind:value={editingValue}
+									onkeydown={handleEditKeydown}
+									class="flex-1 font-mono text-xs bg-slate-50 dark:bg-slate-800 border border-violet-400 dark:border-violet-500 rounded px-2 py-1 text-slate-700 dark:text-slate-300 focus:outline-none focus:ring-1 focus:ring-violet-500/30"
+								/>
+								<button
+									type="button"
+									onclick={saveEdit}
+									disabled={!editingValue.trim()}
+									class="flex items-center justify-center w-6 h-6 rounded-md bg-violet-500/10 hover:bg-violet-500/20 text-violet-600 dark:text-violet-400 transition-all disabled:opacity-40 disabled:cursor-not-allowed"
+									title="Save"
+								>
+									<Icon name="lucide:check" class="w-3.5 h-3.5" />
+								</button>
+								<button
+									type="button"
+									onclick={cancelEdit}
+									class="flex items-center justify-center w-6 h-6 rounded-md hover:bg-slate-100 dark:hover:bg-slate-700 text-slate-400 transition-all"
+									title="Cancel"
+								>
+									<Icon name="lucide:x" class="w-3.5 h-3.5" />
+								</button>
+							{:else}
+								<!-- Display mode -->
+								<span class="flex-1 font-mono text-xs text-slate-700 dark:text-slate-300 truncate">{basePath}</span>
+								<button
+									type="button"
+									onclick={() => startEdit(index)}
+									class="flex items-center justify-center w-6 h-6 rounded-md opacity-0 group-hover:opacity-100 hover:bg-violet-100 dark:hover:bg-violet-900/30 text-slate-400 hover:text-violet-600 dark:hover:text-violet-400 transition-all"
+									title="Edit path"
+								>
+									<Icon name="lucide:pencil" class="w-3.5 h-3.5" />
+								</button>
+								<button
+									type="button"
+									onclick={() => removePath(index)}
+									class="flex items-center justify-center w-6 h-6 rounded-md opacity-0 group-hover:opacity-100 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 path"
+								>
+									<Icon name="lucide:trash-2" class="w-3.5 h-3.5" />
+								</button>
+							{/if}
+						</div>
+					{/each}
+				{/if}
+
+				<button
+					type="button"
+					onclick={openAddPathDialog}
+					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"
+				>
+					<Icon name="lucide:folder-plus" class="w-3.5 h-3.5" />
+					Add Allowed Path
+				</button>
+			</div>
+		</div>
+	</div>
+</div>
+
+<Dialog
+	bind:isOpen={showAddPathDialog}
+	onClose={() => { showAddPathDialog = false; newPathValue = ''; }}
+	title="Add Allowed Path"
+	type="info"
+	message="Enter the full path to allow as a project folder. All subdirectories will also be selectable."
+	bind:inputValue={newPathValue}
+	inputPlaceholder={pathInputPlaceholder}
+	confirmText="Add"
+	cancelText="Cancel"
+	showCancel={true}
+	confirmDisabled={!newPathValue.trim()}
+	onConfirm={addPath}
+/>

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

@@ -0,0 +1,203 @@
+<script lang="ts">
+	import { initializeProjects, projectState } from '$frontend/lib/stores/core/projects.svelte';
+	import { initializeStore } from '$frontend/lib/stores/core/app.svelte';
+	import { sessionState } from '$frontend/lib/stores/core/sessions.svelte';
+	import { addNotification } from '$frontend/lib/stores/ui/notification.svelte';
+	import { settings, resetToDefaults } from '$frontend/lib/stores/features/settings.svelte';
+	import { showConfirm } from '$frontend/lib/stores/ui/dialog.svelte';
+	import { terminalStore } from '$frontend/lib/stores/features/terminal.svelte';
+	import Icon from '../../common/Icon.svelte';
+	import { debug } from '$shared/utils/logger';
+	import ws from '$frontend/lib/utils/ws';
+
+	let isExporting = $state(false);
+	let isClearing = $state(false);
+
+	async function clearData() {
+		const confirmed = await showConfirm({
+			title: 'Clear All Data',
+			message:
+				'Are you sure you want to clear all data? This will delete all projects, sessions, and settings. This action cannot be undone.',
+			type: 'error',
+			confirmText: 'Clear All Data',
+			cancelText: 'Cancel'
+		});
+
+		if (confirmed) {
+			isClearing = true;
+			try {
+				localStorage.clear();
+				sessionStorage.clear();
+
+				const response = await ws.http('system:clear-data', {});
+
+				if (response.cleared) {
+					terminalStore.clearAllSessions();
+					projectState.currentProject = null;
+					await initializeProjects();
+					await initializeStore();
+					resetToDefaults();
+
+					addNotification({
+						type: 'success',
+						title: 'Data Cleared',
+						message: 'All data has been cleared successfully'
+					});
+				}
+			} catch (error) {
+				debug.error('settings', 'Error clearing data:', error);
+				addNotification({
+					type: 'error',
+					title: 'Clear Data Error',
+					message: 'Failed to clear all data',
+					duration: 4000
+				});
+			} finally {
+				isClearing = false;
+			}
+		}
+	}
+
+	async function exportData() {
+		isExporting = true;
+		try {
+			const [projects, sessions, messages] = await Promise.all([
+				ws.http('projects:list', {}),
+				ws.http('sessions:list', {}),
+				ws.http('messages:list', { session_id: '', include_all: true })
+			]);
+
+			const data = {
+				projects: projects || projectState.projects,
+				sessions: sessions || sessionState.sessions,
+				messages: messages || sessionState.messages,
+				settings: settings,
+				exportedAt: new Date().toISOString(),
+				version: '1.0'
+			};
+
+			const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
+			const url = URL.createObjectURL(blob);
+			const a = document.createElement('a');
+			a.href = url;
+			a.download = `clopen-data-${new Date().toISOString().split('T')[0]}.json`;
+			a.click();
+			URL.revokeObjectURL(url);
+
+			addNotification({
+				type: 'success',
+				title: 'Export Complete',
+				message: 'Your data has been exported successfully'
+			});
+		} catch (error) {
+			debug.error('settings', 'Export error:', error);
+			addNotification({
+				type: 'error',
+				title: 'Export Error',
+				message: 'Failed to export data',
+				duration: 4000
+			});
+		} finally {
+			isExporting = false;
+		}
+	}
+
+	async function resetSettings() {
+		const confirmed = await showConfirm({
+			title: 'Reset Settings',
+			message:
+				'Are you sure you want to reset all settings to defaults? This will not delete your projects or conversations.',
+			type: 'warning',
+			confirmText: 'Reset Settings',
+			cancelText: 'Cancel'
+		});
+
+		if (confirmed) {
+			resetToDefaults();
+			addNotification({
+				type: 'success',
+				title: 'Settings Reset',
+				message: 'All settings have been restored to defaults'
+			});
+		}
+	}
+</script>
+
+<div class="py-1">
+	<h3 class="text-base font-bold text-slate-900 dark:text-slate-100 mb-1.5">Data Management</h3>
+	<p class="text-sm text-slate-600 dark:text-slate-500 mb-5">
+		Export, import, or clear your application data
+	</p>
+
+	<div class="flex flex-col gap-4">
+		<!-- Storage Info -->
+		<div
+			class="flex items-center gap-3.5 p-4 bg-slate-100/50 dark:bg-slate-800/50 border border-slate-200 dark:border-slate-700/50 rounded-lg"
+		>
+			<Icon name="lucide:hard-drive" class="w-5 h-5 text-slate-500 dark:text-slate-400" />
+			<div class="flex-1">
+				<div class="text-sm font-medium text-slate-900 dark:text-slate-100">Local Storage</div>
+				<div class="text-xs text-slate-600 dark:text-slate-400">Data is stored locally in your browser</div>
+			</div>
+		</div>
+
+		<!-- Action Cards -->
+		<div class="flex flex-col gap-3">
+			<!-- Reset Settings -->
+			<div
+				class="flex items-center justify-between gap-4 py-3 px-4 bg-slate-100/50 dark:bg-slate-800/50 border border-slate-200 dark:border-slate-700/50 rounded-lg"
+			>
+				<div class="flex items-center gap-3">
+					<Icon name="lucide:refresh-cw" class="w-4.5 h-4.5 text-slate-600 dark:text-slate-400" />
+					<div class="text-left">
+						<div class="text-sm font-medium text-slate-900 dark:text-slate-100">Reset Settings</div>
+						<div class="text-xs text-slate-600 dark:text-slate-400">Restore default settings</div>
+					</div>
+				</div>
+				<button
+					type="button"
+					class="px-4 py-2 bg-slate-200 dark:bg-slate-700 border border-slate-300 dark:border-slate-600 text-slate-700 dark:text-slate-300 rounded-lg text-sm font-medium cursor-pointer transition-all duration-150 hover:bg-slate-300 dark:hover:bg-slate-600 hover:border-slate-400 dark:hover:border-slate-500 disabled:opacity-60 disabled:cursor-not-allowed whitespace-nowrap"
+					onclick={resetSettings}
+				>
+					Reset
+				</button>
+			</div>
+		</div>
+
+		<!-- Danger Zone -->
+		<div class="mt-2">
+			<div class="flex items-center gap-2 mb-3 text-xs font-medium text-red-600 dark:text-red-400">
+				<Icon name="lucide:triangle-alert" class="w-3.5 h-3.5" />
+				<span>Danger Zone</span>
+			</div>
+			<div
+				class="flex items-center justify-between gap-4 p-4 bg-red-500/5 dark:bg-red-500/5 border border-red-500/20 dark:border-red-500/20 rounded-lg max-sm:flex-col max-sm:items-stretch"
+			>
+				<div class="flex-1">
+					<div class="text-sm font-medium text-slate-900 dark:text-slate-100 mb-1">
+						Clear All Data
+					</div>
+					<div class="text-xs text-slate-600 dark:text-slate-400 leading-relaxed">
+						Permanently delete all projects, conversations, and settings. This cannot be undone.
+					</div>
+				</div>
+				<button
+					type="button"
+					class="flex items-center justify-center gap-2 py-2 px-4 bg-red-500/10 border border-red-500/25 rounded-lg text-red-600 dark:text-red-400 text-sm font-medium cursor-pointer transition-all duration-150 whitespace-nowrap hover:bg-red-500/15 hover:border-red-500/35 disabled:opacity-60 disabled:cursor-not-allowed"
+					onclick={clearData}
+					disabled={isClearing}
+				>
+					{#if isClearing}
+						<div
+							class="w-3.5 h-3.5 border-2 border-red-600/30 dark:border-red-400/30 border-t-red-600 dark:border-t-red-400 rounded-full animate-spin"
+						></div>
+						<span>Clearing...</span>
+					{:else}
+						<Icon name="lucide:trash-2" class="w-4 h-4" />
+						<span>Clear All Data</span>
+					{/if}
+				</button>
+			</div>
+		</div>
+	</div>
+</div>

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

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