@myrialabs/clopen 0.2.11 → 0.2.13

package/frontend/components/history/HistoryModal.svelte

@@ -275,7 +275,7 @@
 		}
 	}
 
-	// Delete session state
+	// Delete single session state
 	let showDeleteDialog = $state(false);
 	let sessionToDelete = $state<ChatSession | null>(null);
 
@@ -299,7 +299,7 @@
 			addNotification({
 				type: 'success',
 				title: 'Session Deleted',
-				message: 'Chat session has been deleted',
+				message: 'Chat session and related data have been deleted',
 				duration: 3000
 			});
 
@@ -321,6 +321,54 @@
 		sessionToDelete = null;
 	}
 
+	// Delete all sessions state
+	let showDeleteAllDialog = $state(false);
+	let deletingAll = $state(false);
+
+	async function confirmDeleteAllSessions() {
+		deletingAll = true;
+		try {
+			const result = await ws.http('sessions:delete-all', {});
+
+			// Remove all project sessions from local state
+			const projectId = projectState.currentProject?.id;
+			if (projectId) {
+				const toRemove = sessionState.sessions
+					.filter(s => s.project_id === projectId)
+					.map(s => s.id);
+				for (const id of toRemove) {
+					removeSession(id);
+				}
+			}
+
+			// Clear cache
+			sessionDataCache = {};
+
+			addNotification({
+				type: 'success',
+				title: 'All Sessions Deleted',
+				message: `${result.deletedCount} sessions and related data have been deleted`,
+				duration: 3000
+			});
+
+			showDeleteAllDialog = false;
+		} catch (error) {
+			debug.error('session', 'Failed to delete all sessions:', error);
+			addNotification({
+				type: 'error',
+				title: 'Error',
+				message: 'Failed to delete all sessions',
+				duration: 5000
+			});
+		} finally {
+			deletingAll = false;
+		}
+	}
+
+	function closeDeleteAllDialog() {
+		showDeleteAllDialog = false;
+	}
+
 	function closeModal() {
 		searchQuery = '';
 		onClose();
@@ -331,21 +379,34 @@
 	{#snippet header()}
 		<div class="flex items-center justify-between px-4 py-3 md:px-6 md:py-4">
 			<h2 class="text-base md:text-lg font-bold text-slate-900 dark:text-slate-100">Sessions</h2>
-			<button
-				type="button"
-				class="p-1.5 md:p-2 rounded-lg text-slate-500 hover:text-slate-900 dark:hover:text-slate-100 hover:bg-violet-500/10 transition-colors"
-				onclick={closeModal}
-				aria-label="Close modal"
-			>
-				<svg class="w-4 h-4 md:w-5 md:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-					<path
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="M6 18L18 6M6 6l12 12"
-					/>
-				</svg>
-			</button>
+			<div class="flex items-center gap-2">
+				{#if filteredSessions.length > 0}
+					<button
+						type="button"
+						class="flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg text-xs font-medium text-red-600 dark:text-red-400 hover:bg-red-500/10 transition-colors"
+						onclick={() => (showDeleteAllDialog = true)}
+						aria-label="Delete all sessions"
+					>
+						<Icon name="lucide:trash-2" class="w-3.5 h-3.5" />
+						<span class="hidden sm:inline">Delete All</span>
+					</button>
+				{/if}
+				<button
+					type="button"
+					class="p-1.5 md:p-2 rounded-lg text-slate-500 hover:text-slate-900 dark:hover:text-slate-100 hover:bg-violet-500/10 transition-colors"
+					onclick={closeModal}
+					aria-label="Close modal"
+				>
+					<svg class="w-4 h-4 md:w-5 md:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M6 18L18 6M6 6l12 12"
+						/>
+					</svg>
+				</button>
+			</div>
 		</div>
 	{/snippet}
 
@@ -514,14 +575,28 @@
 	{/snippet}
 </Modal>
 
-<!-- Delete Confirmation Dialog -->
+<!-- Delete Single Session Confirmation Dialog -->
 <Dialog
 	bind:isOpen={showDeleteDialog}
 	onClose={closeDeleteDialog}
 	type="error"
 	title="Delete Session"
-	message="Are you sure you want to delete this session? All messages will be permanently removed."
+	message={sessionToDelete && isSessionStreaming(sessionToDelete.id)
+		? 'This session is currently running. Deleting it will stop the active chat and permanently remove all messages, snapshots, and related data.'
+		: 'Are you sure you want to delete this session? All messages, snapshots, and related data will be permanently removed.'}
 	confirmText="Delete"
 	cancelText="Cancel"
 	onConfirm={confirmDeleteSession}
 />
+
+<!-- Delete All Sessions Confirmation Dialog -->
+<Dialog
+	bind:isOpen={showDeleteAllDialog}
+	onClose={closeDeleteAllDialog}
+	type="error"
+	title="Delete All Sessions"
+	message={`Are you sure you want to delete all ${filteredSessions.length} sessions in this project? All messages, snapshots, and related data will be permanently removed. This only affects the current project.`}
+	confirmText={deletingAll ? 'Deleting...' : 'Delete All'}
+	cancelText="Cancel"
+	onConfirm={confirmDeleteAllSessions}
+/>

package/frontend/components/history/HistoryView.svelte

@@ -14,8 +14,17 @@
 	import { showConfirm } from '$frontend/stores/ui/dialog.svelte';
 	import Modal from '$frontend/components/common/overlay/Modal.svelte';
 	import TimelineModal from '../checkpoint/TimelineModal.svelte';
+	import { presenceState } from '$frontend/stores/core/presence.svelte';
 	import { debug } from '$shared/utils/logger';
 
+	// Check if a session has an active stream
+	function isSessionStreaming(chatSessionId: string): boolean {
+		for (const status of presenceState.statuses.values()) {
+			if (status.streams?.some(s => s.status === 'active' && s.chatSessionId === chatSessionId)) return true;
+		}
+		return false;
+	}
+
 	// Use real session data from session store
 	const sessions = $derived(sessionState.sessions);
 	
@@ -303,27 +312,25 @@
 	async function deleteSession(session: ChatSession) {
 		const sessionData = await getSessionData(session.id);
 		const title = sessionData.title;
-		
+		const streaming = isSessionStreaming(session.id);
+
 		const confirmed = await showConfirm({
 			title: 'Delete Session',
-			message: `Are you sure you want to delete session "${title}"? This action cannot be undone.`,
+			message: streaming
+				? `This session "${title}" is currently running. Deleting it will stop the active chat and permanently remove all messages, snapshots, and related data.`
+				: `Are you sure you want to delete session "${title}"? All messages, snapshots, and related data will be permanently removed.`,
 			type: 'error',
 			confirmText: 'Delete',
 			cancelText: 'Cancel'
 		});
-		
+
 		if (confirmed) {
 			try {
-				// Delete from database via WebSocket
 				await ws.http('sessions:delete', { id: session.id });
-				// Remove from local state
 				removeSession(session.id);
-				// Clear cache
 				delete sessionDataCache[session.id];
-				// User already knows session was deleted from UI update
 			} catch (error) {
 				addNotification({
-					
 					type: 'error',
 					title: 'Error',
 					message: 'Failed to delete session',
@@ -332,11 +339,11 @@
 			}
 		}
 	}
-	
+
 	async function clearHistory() {
 		const confirmed = await showConfirm({
 			title: 'Clear All Session History',
-			message: 'Are you sure you want to clear all session history? This will delete all sessions. This action cannot be undone.',
+			message: 'Are you sure you want to clear all session history? All messages, snapshots, and related data will be permanently removed. This only affects the current project.',
 			type: 'error',
 			confirmText: 'Clear All',
 			cancelText: 'Cancel'
@@ -349,34 +356,20 @@
 		}
 
 		try {
-			// Delete all sessions from database
-			const deletePromises = sessions.map(async (session) => {
-				try {
-					await ws.http('sessions:delete', { id: session.id });
-					// Remove from local state
-					removeSession(session.id);
-					// Clear cache
-					delete sessionDataCache[session.id];
-					return { success: true };
-				} catch (error) {
-					debug.error('session', `Error deleting session ${session.id}:`, error);
-					return { success: false, error: 'Failed to delete session' };
-				}
-			});
-
-			// Wait for all deletions to complete
-			const results = await Promise.all(deletePromises);
+			const result = await ws.http('sessions:delete-all', {});
 
-			// Check if any deletions failed
-			const failed = results.filter(r => !r.success);
-			if (failed.length > 0) {
-				addNotification({
-					type: 'warning',
-					title: 'Partial Deletion',
-					message: `Failed to delete ${failed.length} session(s)`,
-					duration: 5000
-				});
+			// Remove all sessions from local state
+			const toRemove = [...sessions].map(s => s.id);
+			for (const id of toRemove) {
+				removeSession(id);
 			}
+
+			addNotification({
+				type: 'success',
+				title: 'All Sessions Deleted',
+				message: `${result.deletedCount} sessions and related data have been deleted`,
+				duration: 3000
+			});
 		} catch (error) {
 			debug.error('session', 'Error clearing history:', error);
 			addNotification({

package/frontend/components/settings/engines/AIEnginesSettings.svelte

@@ -73,7 +73,7 @@
 	let openCodeCommandCopiedTimer: ReturnType<typeof setTimeout> | null = null;
 
 	// Debug PTY (xterm.js)
-	const showDebug = $state(false);
+	const showDebug = $state(true);
 	let debugTermContainer = $state<HTMLDivElement>();
 	let debugTerminal: Terminal | null = null;
 	let debugFitAddon: FitAddon | null = null;

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

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { addNotification } from '$frontend/stores/ui/notification.svelte';
-	import { resetToDefaults } from '$frontend/stores/features/settings.svelte';
 	import { showConfirm } from '$frontend/stores/ui/dialog.svelte';
 	import Icon from '../../common/display/Icon.svelte';
 	import { debug } from '$shared/utils/logger';
@@ -41,68 +40,16 @@
 		}
 	}
 
-	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
+		Manage 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">

package/frontend/components/terminal/Terminal.svelte

@@ -5,6 +5,7 @@
 <script lang="ts">
 	import { terminalStore } from '$frontend/stores/features/terminal.svelte';
 	import { projectState } from '$frontend/stores/core/projects.svelte';
+	import { terminalService } from '$frontend/services/terminal';
 	import TerminalTabs from './TerminalTabs.svelte';
 	import Icon from '$frontend/components/common/display/Icon.svelte';
 	import XTerm from '$frontend/components/common/xterm/XTerm.svelte';
@@ -160,11 +161,14 @@
 		if (activeSession) {
 			// Clear the terminal store session
 			terminalStore.clearSession(activeSession.id);
-			
+
 			// Also immediately clear the XTerm display
 			if (xterminalRef) {
 				xterminalRef.clear();
 			}
+
+			// Sync clear with backend headless terminal
+			terminalService.clearHeadlessTerminal(activeSession.id);
 		}
 	}
 

package/frontend/components/workspace/DesktopNavigator.svelte

@@ -93,12 +93,15 @@
 	}
 
 	// Delete project
-	async function confirmDeleteProject() {
-		if (!projectToDelete) return;
+	let deletingProject = $state(false);
+
+	async function confirmDeleteProject(mode: 'remove' | 'full') {
+		if (!projectToDelete || deletingProject) return;
 		const deleteId = projectToDelete.id!;
+		deletingProject = true;
 
 		try {
-			await ws.http('projects:delete', { id: deleteId });
+			await ws.http('projects:delete', { id: deleteId, mode });
 			removeProject(deleteId);
 			existingProjects = existingProjects.filter(p => p.id !== deleteId);
 			showDeleteDialog = false;
@@ -111,6 +114,8 @@
 				message: 'Failed to delete project',
 				duration: 5000
 			});
+		} finally {
+			deletingProject = false;
 		}
 	}
 
@@ -386,13 +391,55 @@
 <Dialog
 	bind:isOpen={showDeleteDialog}
 	onClose={closeDeleteDialog}
-	type="error"
-	title="Delete Project"
-	message='This will remove "{projectToDelete?.name}" from your project list. The actual project files on disk will not be deleted.'
-	confirmText="Delete"
-	cancelText="Cancel"
-	onConfirm={confirmDeleteProject}
-/>
+	type="warning"
+	title="Remove Project"
+	showCancel={false}
+>
+	{#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">
+				<h3 class="text-lg font-semibold text-slate-900 dark:text-slate-100">Remove Project</h3>
+				<p class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
+					How would you like to remove <strong>"{projectToDelete?.name}"</strong>?
+				</p>
+			</div>
+		</div>
+		<div class="flex flex-col gap-2 pt-2">
+			<button
+				onclick={() => confirmDeleteProject('remove')}
+				disabled={deletingProject}
+				class="w-full flex items-center gap-3 p-3 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-700 transition-all duration-200 text-left disabled:opacity-50"
+			>
+				<Icon name="lucide:eye-off" class="w-5 h-5 text-slate-500 shrink-0" />
+				<div class="flex-1 min-w-0">
+					<p class="text-sm font-semibold text-slate-900 dark:text-slate-100">Remove from list</p>
+					<p class="text-xs text-slate-500 dark:text-slate-400">Sessions will be restored when you re-add this project.</p>
+				</div>
+			</button>
+			<button
+				onclick={() => confirmDeleteProject('full')}
+				disabled={deletingProject}
+				class="w-full flex items-center gap-3 p-3 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-700 transition-all duration-200 text-left disabled:opacity-50"
+			>
+				<Icon name="lucide:trash-2" class="w-5 h-5 text-slate-500 shrink-0" />
+				<div class="flex-1 min-w-0">
+					<p class="text-sm font-semibold text-slate-900 dark:text-slate-100">Delete with all data</p>
+					<p class="text-xs text-slate-500 dark:text-slate-400">Delete all sessions, snapshots, and related data.</p>
+				</div>
+			</button>
+			<button
+				onclick={closeDeleteDialog}
+				class="w-full py-2 text-sm font-semibold text-slate-600 dark:text-slate-400 bg-slate-100 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors"
+			>
+				Cancel
+			</button>
+			<p class="text-xs text-slate-400 dark:text-slate-500 text-center">Your project folder on disk will not be affected.</p>
+		</div>
+	{/snippet}
+</Dialog>
 
 <!-- Tunnel Modal -->
 <TunnelModal bind:isOpen={showTunnelModal} onClose={() => (showTunnelModal = false)} />

package/frontend/components/workspace/MobileNavigator.svelte

@@ -87,12 +87,15 @@
 		showDeleteDialog = true;
 	}
 
-	async function confirmDeleteProject() {
-		if (!projectToDelete) return;
+	let deletingProject = $state(false);
+
+	async function confirmDeleteProject(mode: 'remove' | 'full') {
+		if (!projectToDelete || deletingProject) return;
 		const deleteId = projectToDelete.id!;
+		deletingProject = true;
 
 		try {
-			await ws.http('projects:delete', { id: deleteId });
+			await ws.http('projects:delete', { id: deleteId, mode });
 			removeProject(deleteId);
 			showDeleteDialog = false;
 			projectToDelete = null;
@@ -104,6 +107,8 @@
 				message: 'Failed to delete project',
 				duration: 5000
 			});
+		} finally {
+			deletingProject = false;
 		}
 	}
 
@@ -368,13 +373,55 @@
 <Dialog
 	bind:isOpen={showDeleteDialog}
 	onClose={closeDeleteDialog}
-	type="error"
-	title="Delete Project"
-	message='This will remove "{projectToDelete?.name}" from your project list. The actual project files on disk will not be deleted.'
-	confirmText="Delete"
-	cancelText="Cancel"
-	onConfirm={confirmDeleteProject}
-/>
+	type="warning"
+	title="Remove Project"
+	showCancel={false}
+>
+	{#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">
+				<h3 class="text-lg font-semibold text-slate-900 dark:text-slate-100">Remove Project</h3>
+				<p class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
+					How would you like to remove <strong>"{projectToDelete?.name}"</strong>?
+				</p>
+			</div>
+		</div>
+		<div class="flex flex-col gap-2 pt-2">
+			<button
+				onclick={() => confirmDeleteProject('remove')}
+				disabled={deletingProject}
+				class="w-full flex items-center gap-3 p-3 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-700 transition-all duration-200 text-left disabled:opacity-50"
+			>
+				<Icon name="lucide:eye-off" class="w-5 h-5 text-slate-500 shrink-0" />
+				<div class="flex-1 min-w-0">
+					<p class="text-sm font-semibold text-slate-900 dark:text-slate-100">Remove from list</p>
+					<p class="text-xs text-slate-500 dark:text-slate-400">Sessions will be restored when you re-add this project.</p>
+				</div>
+			</button>
+			<button
+				onclick={() => confirmDeleteProject('full')}
+				disabled={deletingProject}
+				class="w-full flex items-center gap-3 p-3 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-700 transition-all duration-200 text-left disabled:opacity-50"
+			>
+				<Icon name="lucide:trash-2" class="w-5 h-5 text-slate-500 shrink-0" />
+				<div class="flex-1 min-w-0">
+					<p class="text-sm font-semibold text-slate-900 dark:text-slate-100">Delete with all data</p>
+					<p class="text-xs text-slate-500 dark:text-slate-400">Delete all sessions, snapshots, and related data.</p>
+				</div>
+			</button>
+			<button
+				onclick={closeDeleteDialog}
+				class="w-full py-2 text-sm font-semibold text-slate-600 dark:text-slate-400 bg-slate-100 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors"
+			>
+				Cancel
+			</button>
+			<p class="text-xs text-slate-400 dark:text-slate-500 text-center">Your project folder on disk will not be affected.</p>
+		</div>
+	{/snippet}
+</Dialog>
 
 <!-- Tunnel Modal -->
 <TunnelModal bind:isOpen={showTunnelModal} onClose={() => (showTunnelModal = false)} />

package/frontend/components/workspace/WorkspaceLayout.svelte

@@ -139,14 +139,6 @@
 <div
 	class="h-full w-full overflow-hidden {isMobile ? 'bg-white/90 dark:bg-slate-900/98' : 'bg-slate-50 dark:bg-slate-900/70'} text-slate-900 dark:text-slate-100 font-sans"
 >
-	<!-- Skip link for accessibility -->
-	<a
-		href="#main-content"
-		class="sr-only focus:not-sr-only focus:absolute focus:z-50 focus:p-4 focus:bg-violet-600 focus:text-white"
-	>
-		Skip to main content
-	</a>
-
 	{#if isMobile}
 		<!-- Mobile Layout -->
 		<div class="flex flex-col h-full w-full" in:fade={{ duration: 200 }}>