@myrialabs/clopen 0.2.10 → 0.2.12

package/frontend/components/chat/message/MessageBubble.svelte

@@ -64,6 +64,19 @@
 			}
 		});
 	});
+
+	// Force reactive tracking for assistant text streaming.
+	// Without an explicit $effect that reads partialText, Svelte 5's derived chain
+	// may not re-render the component when partialText changes on a proxied object.
+	// Reasoning gets this implicitly via the auto-scroll effect above.
+	$effect(() => {
+		if (roleCategory !== 'assistant') return;
+		if (message.type !== 'stream_event') return;
+		if (!('partialText' in message)) return;
+		// Reading partialText subscribes this effect to changes,
+		// which forces the component to re-evaluate its derived values
+		const _track = message.partialText;
+	});
 </script>
 
 <div class="relative overflow-hidden">

package/frontend/components/common/feedback/NotificationToast.svelte

@@ -48,15 +48,30 @@
 	function getColorClasses(type: string) {
 		switch (type) {
 			case 'success':
-				return 'bg-green-50 border-green-200 text-green-800 dark:bg-green-900 dark:border-green-800 dark:text-green-200';
+				return 'bg-green-50 border-green-300 text-green-900 dark:bg-green-950 dark:border-green-700 dark:text-green-100';
 			case 'error':
-				return 'bg-red-50 border-red-200 text-red-800 dark:bg-red-900 dark:border-red-800 dark:text-red-200';
+				return 'bg-red-50 border-red-300 text-red-900 dark:bg-red-950 dark:border-red-700 dark:text-red-100';
 			case 'warning':
-				return 'bg-amber-50 border-amber-200 text-amber-800 dark:bg-amber-900 dark:border-amber-800 dark:text-amber-200';
+				return 'bg-amber-50 border-amber-300 text-amber-900 dark:bg-amber-950 dark:border-amber-700 dark:text-amber-100';
 			case 'info':
-				return 'bg-slate-50 border-slate-200 text-slate-800 dark:bg-slate-900 dark:border-slate-800 dark:text-slate-200';
+				return 'bg-blue-50 border-blue-300 text-blue-900 dark:bg-slate-800 dark:border-slate-600 dark:text-slate-100';
 			default:
-				return 'bg-slate-50 border-slate-200 text-slate-800 dark:bg-slate-900 dark:border-slate-800 dark:text-slate-200';
+				return 'bg-slate-50 border-slate-300 text-slate-900 dark:bg-slate-800 dark:border-slate-600 dark:text-slate-100';
+		}
+	}
+
+	function getIconColorClass(type: string) {
+		switch (type) {
+			case 'success':
+				return 'text-green-600 dark:text-green-400';
+			case 'error':
+				return 'text-red-600 dark:text-red-400';
+			case 'warning':
+				return 'text-amber-600 dark:text-amber-400';
+			case 'info':
+				return 'text-blue-600 dark:text-blue-400';
+			default:
+				return 'text-slate-600 dark:text-slate-400';
 		}
 	}
 </script>
@@ -68,27 +83,27 @@
 	role="alert"
 	aria-live="polite"
 >
-	<div class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 rounded-lg p-4 {getColorClasses(notification.type)}">
+	<div class="border rounded-lg p-4 shadow-lg {getColorClasses(notification.type)}">
 		<div class="flex items-start space-x-3">
-			<div class="flex-shrink-0">
+			<div class="flex-shrink-0 {getIconColorClass(notification.type)}">
 				<Icon name={getIcon(notification.type)} class="w-5 h-5" />
 			</div>
 
 			<div class="flex-1 min-w-0">
 				<div class="flex items-center justify-between">
-					<h4 class="font-medium text-sm">
+					<h4 class="font-semibold text-sm">
 						{notification.title}
 					</h4>
 					<button
 						onclick={handleDismiss}
-						class="flex-shrink-0 ml-2 p-1 hover:bg-slate-100 dark:hover:bg-slate-700 rounded transition-colors"
+						class="flex flex-shrink-0 ml-2 p-1 rounded opacity-60 hover:opacity-100 transition-opacity"
 						aria-label="Dismiss notification"
 					>
 						<Icon name="lucide:x" class="w-4 h-4" />
 					</button>
 				</div>
 
-				<p class="text-sm opacity-90 mt-1">
+				<p class="text-sm opacity-80 mt-1">
 					{notification.message}
 				</p>
 
@@ -100,7 +115,7 @@
 									action.action();
 									handleDismiss();
 								}}
-								class="text-xs font-medium px-3 py-1 bg-slate-100 dark:bg-slate-700 hover:bg-slate-200 dark:hover:bg-slate-600 rounded-md transition-colors"
+								class="text-xs font-medium px-3 py-1 bg-black/10 hover:bg-black/20 dark:bg-white/10 dark:hover:bg-white/20 rounded-md transition-colors"
 							>
 								{action.label}
 							</button>

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

@@ -41,6 +41,11 @@
 	let showDeleteFolder = $state(false);
 	let folderToDelete: FileItem | null = $state(null);
 	let deleteFolderConfirmName = $state('');
+	let showHidden = $state(false);
+
+	const filteredItems = $derived(
+		showHidden ? items : items.filter(item => !item.name.startsWith('.'))
+	);
 
 	// Derived: whether directory access is restricted
 	const hasRestrictions = $derived(systemSettings.allowedBasePaths && systemSettings.allowedBasePaths.length > 0);
@@ -611,6 +616,14 @@
 					</div>
 					
 					<div class="flex items-center space-x-2">
+						<button
+							onclick={() => showHidden = !showHidden}
+							class="px-3 py-1.5 text-xs rounded-lg transition-colors {showHidden ? 'bg-violet-100 dark:bg-violet-900/30 text-violet-700 dark:text-violet-300' : 'bg-slate-200 dark:bg-slate-700 hover:bg-slate-300 dark:hover:bg-slate-600 text-slate-700 dark:text-slate-300'}"
+							title={showHidden ? 'Hide hidden folders' : 'Show hidden folders'}
+						>
+							<Icon name={showHidden ? 'lucide:eye' : 'lucide:eye-off'} class="inline sm:mr-1" />
+							<span class="hidden sm:inline">Hidden</span>
+						</button>
 						<button
 							onclick={() => showCreateFolder = true}
 							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"
@@ -651,24 +664,24 @@
 					</Button>
 				</div>
 			</div>
-		{:else if showLoadingSpinner && items.length === 0}
+		{:else if showLoadingSpinner && filteredItems.length === 0}
 			<div class="flex items-center justify-center py-12">
 				<div class="text-center">
 					<div class="animate-spin rounded-full h-8 w-8 border-2 border-violet-500 border-t-transparent mx-auto mb-4"></div>
 					<p class="text-slate-600 dark:text-slate-400">Loading directory...</p>
 				</div>
 			</div>
-		{:else if items.length === 0}
+		{:else if filteredItems.length === 0}
 			<div class="flex items-center justify-center py-12">
 				<div class="text-center">
 					<Icon name="lucide:folder-x" class="text-4xl text-slate-400 mx-auto mb-4" />
 					<p class="text-slate-600 dark:text-slate-400">No folders found</p>
-					<p class="text-sm text-slate-500 dark:text-slate-500 mt-2">This directory doesn't contain any subdirectories</p>
+					<p class="text-sm text-slate-500 dark:text-slate-500 mt-2">{items.length > 0 ? 'Toggle "Hidden" to show hidden folders' : 'This directory doesn\'t contain any subdirectories'}</p>
 				</div>
 			</div>
 		{:else}
 			<div class="space-y-2 transition-opacity duration-300 {loading ? 'opacity-75' : 'opacity-100'}">
-				{#each items as item (item.path)}
+				{#each filteredItems as item (item.path)}
 					<div 
 						class="flex items-center space-x-3 py-3 px-4 rounded-xl border transition-all duration-200 cursor-pointer {selectedPath === item.path 
 							? 'bg-violet-50 dark:bg-violet-900/20 border-violet-200 dark:border-violet-700' 

package/frontend/components/common/overlay/Dialog.svelte

@@ -226,24 +226,26 @@
 					</div>
 				</div>
 			{/if}
-			
-			<div class="flex justify-end gap-3 pt-2">
-				{#if showCancel}
+
+			{#if !children}
+				<div class="flex justify-end gap-3 pt-2">
+					{#if showCancel}
+						<button
+							onclick={handleCancel}
+							class="px-6 py-2.5 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 text-slate-700 dark:text-slate-300 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-700 transition-all duration-200 font-semibold"
+						>
+							{cancelText}
+						</button>
+					{/if}
 					<button
-						onclick={handleCancel}
-						class="px-6 py-2.5 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 text-slate-700 dark:text-slate-300 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-700 transition-all duration-200 font-semibold"
+						onclick={handleConfirm}
+						disabled={confirmDisabled}
+						class="px-6 py-2.5 {colors.button} rounded-lg transition-all duration-200 font-semibold focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-current"
 					>
-						{cancelText}
+						{confirmText}
 					</button>
-				{/if}
-				<button
-					onclick={handleConfirm}
-					disabled={confirmDisabled}
-					class="px-6 py-2.5 {colors.button} rounded-lg transition-all duration-200 font-semibold focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-current"
-				>
-					{confirmText}
-				</button>
-			</div>
+				</div>
+			{/if}
 		</div>
 	</div>
 {/if}

package/frontend/components/files/FileNode.svelte

@@ -62,50 +62,29 @@
 
 	let nodeElement: HTMLDivElement;
 	let menuButtonElement: HTMLButtonElement;
-	let showAbove = $state(false);
-
-	// Context menu positioning
-	let menuOpenedViaContextMenu = $state(false);
-	let contextMenuX = $state(0);
-	let contextMenuY = $state(0);
-
-	function checkMenuPosition() {
-		if (!menuButtonElement) return;
-
-		const rect = menuButtonElement.getBoundingClientRect();
-		const dockContainer = nodeElement?.closest('.overflow-auto');
-
-		if (!dockContainer) {
-			// Fallback ke viewport jika tidak ada container
-			const viewportHeight = window.innerHeight;
-			const menuHeight = 100;
-			showAbove = rect.bottom + menuHeight > viewportHeight && rect.top > menuHeight;
-			return;
-		}
-
-		const dockRect = dockContainer.getBoundingClientRect();
-		const menuHeight = 100; // Estimasi tinggi menu dropdown
-
-		// Hitung ruang yang tersedia di bawah dan di atas dalam dock container
-		const spaceBelow = dockRect.bottom - rect.bottom;
-		const spaceAbove = rect.top - dockRect.top;
-
-		// Jika tidak cukup ruang di bawah untuk menu dan ada cukup ruang di atas, tampilkan di atas
-		showAbove = spaceBelow < menuHeight && spaceAbove > menuHeight;
+	let menuStyle = $state('');
+
+	function computeMenuStyle(x: number, y: number, alignRight: boolean): string {
+		const menuHeight = 200;
+		const isAbove = y + menuHeight > window.innerHeight && y > menuHeight;
+		const verticalStyle = isAbove
+			? `bottom: ${window.innerHeight - y}px;`
+			: `top: ${y}px;`;
+		const horizontalStyle = alignRight ? `right: ${x}px;` : `left: ${x}px;`;
+		return `${horizontalStyle} ${verticalStyle}`;
 	}
 
 	function toggleMenu(event: Event) {
 		event.stopPropagation();
 		if (!isMenuOpen) {
-			checkMenuPosition();
-			menuOpenedViaContextMenu = false; // Opened via button click
+			const rect = menuButtonElement.getBoundingClientRect();
+			menuStyle = computeMenuStyle(window.innerWidth - rect.right, rect.bottom, true);
 		}
 		onMenuToggle?.(file.path);
 	}
 
 	function closeMenu() {
-		onMenuToggle?.(file.path); // Toggle to close
-		menuOpenedViaContextMenu = false;
+		onMenuToggle?.(file.path);
 	}
 
 	function getDisplayIcon(fileName: string, isDirectory: boolean): IconName {
@@ -127,45 +106,16 @@
 	function handleContextMenu(event: MouseEvent) {
 		event.preventDefault();
 		if (!isMenuOpen) {
-			// Save mouse position for context menu positioning
-			contextMenuX = event.clientX;
-			contextMenuY = event.clientY;
-			menuOpenedViaContextMenu = true;
-			// Check position based on mouse Y relative to dock container
-			checkContextMenuPosition(event.clientY);
+			menuStyle = computeMenuStyle(event.clientX, event.clientY, false);
 		}
 		onMenuToggle?.(file.path);
 	}
 
-	function checkContextMenuPosition(mouseY: number) {
-		const dockContainer = nodeElement?.closest('.overflow-auto');
-		const menuHeight = 100;
-
-		if (!dockContainer) {
-			const viewportHeight = window.innerHeight;
-			showAbove = mouseY + menuHeight > viewportHeight && mouseY > menuHeight;
-			return;
-		}
-
-		const dockRect = dockContainer.getBoundingClientRect();
-		const spaceBelow = dockRect.bottom - mouseY;
-		const spaceAbove = mouseY - dockRect.top;
-		showAbove = spaceBelow < menuHeight && spaceAbove > menuHeight;
-	}
-
 	function handleAction(action: string, event: Event) {
 		event.stopPropagation();
 		onAction?.(action, file);
 	}
 
-	function formatFileSize(bytes: number): string {
-		if (bytes === 0) return '0 B';
-		const k = 1024;
-		const sizes = ['B', 'KB', 'MB', 'GB'];
-		const i = Math.floor(Math.log(bytes) / Math.log(k));
-		return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
-	}
-
 	// Close menu when clicking outside
 	onMount(() => {
 		function handleClickOutside(event: MouseEvent) {
@@ -226,13 +176,6 @@
 		{/if}
 	</span>
 
-	<!-- File metadata -->
-	{#if file.type === 'file'}
-		<span class="flex-shrink-0 text-xs text-slate-400 dark:text-slate-500 lg:group-hover:hidden">
-			{formatFileSize(file.size || 0)}
-		</span>
-	{/if}
-
 	<!-- Actions menu (always visible, triggered by click) -->
 	<div class="flex-shrink-0">
 		<div class="relative">
@@ -250,8 +193,8 @@
 			<div
 				role="menu"
 				tabindex="-1"
-				class="{menuOpenedViaContextMenu ? 'fixed' : 'absolute right-0'} {showAbove && !menuOpenedViaContextMenu ? 'bottom-full -mb-5' : !menuOpenedViaContextMenu ? 'top-full -mt-5' : ''} bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg py-1 w-44 max-h-80 overflow-y-auto z-50 shadow-lg"
-				style={menuOpenedViaContextMenu ? `left: ${contextMenuX}px; ${showAbove ? `bottom: ${window.innerHeight - contextMenuY}px;` : `top: ${contextMenuY}px;`}` : ''}
+				class="fixed bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg py-1 w-44 max-h-80 overflow-y-auto z-50 shadow-lg"
+				style={menuStyle}
 				onclick={(e) => e.stopPropagation()}
 			>
 				<!-- New File & New Folder (hanya untuk directory) -->

package/frontend/components/git/CommitForm.svelte

@@ -77,7 +77,7 @@
 
 <div class="px-2 py-2">
 	<div class="flex flex-col gap-1.5">
-		<div class="relative">
+		<div class="flex relative">
 			<textarea
 				bind:this={textareaEl}
 				bind:value={commitMessage}

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({