@myrialabs/clopen 0.2.10 → 0.2.12

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

package/frontend/services/chat/chat.service.ts

@@ -39,6 +39,7 @@ class ChatService {
   private lastEventSeq = new Map<string, number>(); // Sequence-based deduplication
   private cancelledProcessIds = new Set<string>(); // Track ALL cancelled streams to ignore late events
   private reconnected: boolean = false; // Whether we've reconnected to an active stream
+  private cancelSafetyTimer: ReturnType<typeof setTimeout> | null = null;
 
   static loadingTexts: string[] = [
     'thinking', 'processing', 'analyzing', 'calculating', 'computing',
@@ -170,6 +171,7 @@ class ChatService {
 
       this.streamCompleted = true;
       this.reconnected = false;
+      this.clearCancelSafetyTimer();
       this.setProcessState({ isLoading: false, isWaitingInput: false, isCancelling: false });
 
       // Mark any tool_use blocks that never got a tool_result
@@ -196,6 +198,7 @@ class ChatService {
       this.streamCompleted = true;
       this.reconnected = false;
       this.activeProcessId = null;
+      this.clearCancelSafetyTimer();
       // Don't clear isCancelling here — it causes a race with presence.
       // The chat:cancelled WS event arrives before broadcastPresence() updates,
       // so clearing isCancelling lets the presence $effect re-enable isLoading
@@ -479,15 +482,34 @@ class ChatService {
     // and global flags — cancel sets isCancelling=true to prevent presence re-enabling
     this.setProcessState({ isLoading: false, isWaitingInput: false, isCancelling: true }, chatSessionId);
 
-    // Clean up stale stream_events from the cancelled stream.
-    // Without this, stale stream_events remain in the messages array and cause
-    // wrong insertion positions when a new stream starts (e.g., reasoning inserted
-    // before a stale non-reasoning stream_event instead of at the end).
-    this.cleanupStreamEvents();
+    // Convert stream_events to finalized assistant messages on cancel.
+    // This preserves partial reasoning/text that was visible to the user.
+    // Empty stream_events are removed. The backend saves partial text to DB
+    // independently, so on refresh the DB version takes over.
+    this.finalizeStreamEvents();
+
+    // Safety timeout: if backend events (chat:cancelled + presence update) don't
+    // arrive within 10 seconds, force-clear isCancelling to prevent infinite loader.
+    // This catches edge cases: WS disconnect during cancel, engine.cancel() timeout,
+    // or race conditions between presence update and chat:cancelled event ordering.
+    this.clearCancelSafetyTimer();
+    this.cancelSafetyTimer = setTimeout(() => {
+      this.cancelSafetyTimer = null;
+      if (appState.isCancelling) {
+        debug.warn('chat', 'Cancel safety timeout: force-clearing isCancelling after 10s');
+        this.setProcessState({ isCancelling: false, isLoading: false }, chatSessionId);
+      }
+    }, 10000);
+  }
 
-    // No safety timeout needed — cancel completion is confirmed via WS events:
-    // chat:cancelled clears isLoading, then presence update clears isCancelling.
-    // If WS disconnects, reconnection logic re-fetches presence and clears state.
+  /**
+   * Clear the cancel safety timer (called when cancel completes normally)
+   */
+  private clearCancelSafetyTimer(): void {
+    if (this.cancelSafetyTimer) {
+      clearTimeout(this.cancelSafetyTimer);
+      this.cancelSafetyTimer = null;
+    }
   }
 
   /**
@@ -559,15 +581,32 @@ class ChatService {
         }
         // If no reasoning stream_event found, fall through to push at end
       } else {
-        // Remove ALL regular (non-reasoning) stream_events, not just the last one
-        // This prevents stale stream_events from remaining when message order varies
+        // Replace text stream_event IN PLACE to preserve message position
+        // (same approach as reasoning — prevents visual displacement)
         for (let i = sessionState.messages.length - 1; i >= 0; i--) {
           const msg = sessionState.messages[i] as any;
           if (msg.type === 'stream_event' && !msg.metadata?.reasoning) {
-            sessionState.messages.splice(i, 1);
-            break; // Only remove the most recent one
+            const messageFormatter = {
+              ...sdkMessage,
+              metadata: buildMetadataFromTransport(data)
+            };
+            sessionState.messages[i] = messageFormatter;
+
+            // Detect interactive tool_use blocks in the replaced message
+            if (sdkMessage.type === 'assistant' && sdkMessage.message?.content) {
+              const content = Array.isArray(sdkMessage.message.content) ? sdkMessage.message.content : [];
+              const hasInteractiveTool = content.some(
+                (item: any) => item.type === 'tool_use' && INTERACTIVE_TOOLS.has(item.name)
+              );
+              if (hasInteractiveTool) {
+                this.setProcessState({ isWaitingInput: true });
+              }
+            }
+
+            return; // Replaced in-place, skip push below
           }
         }
+        // No stream_event found, fall through to push at end
       }
     }
 
@@ -701,7 +740,7 @@ class ChatService {
           const msg = sessionState.messages[i] as any;
           if (msg.type === 'stream_event' && msg.metadata?.reasoning) {
             msg.partialText = partialText || '';
-            break;
+            return;
           }
         }
       } else {
@@ -711,17 +750,42 @@ class ChatService {
           const msg = sessionState.messages[i] as any;
           if (msg.type === 'stream_event' && !msg.metadata?.reasoning) {
             msg.partialText = partialText || '';
-            break;
+            return;
           }
         }
       }
+
+      // Fallback: no matching stream_event found (start event was missed).
+      // Create one now so text doesn't get lost.
+      const fallbackMessage = {
+        type: 'stream_event' as const,
+        processId: data.processId,
+        partialText: partialText || '',
+        metadata: buildMetadataFromTransport({
+          timestamp: data.timestamp,
+          ...(isReasoning && { reasoning: true }),
+        })
+      };
+
+      if (isReasoning) {
+        const textStreamIdx = (sessionState.messages as any[]).findIndex(
+          (m: any) => m.type === 'stream_event' && !m.metadata?.reasoning
+        );
+        if (textStreamIdx >= 0) {
+          (sessionState.messages as any[]).splice(textStreamIdx, 0, fallbackMessage);
+        } else {
+          (sessionState.messages as any[]).push(fallbackMessage);
+        }
+      } else {
+        (sessionState.messages as any[]).push(fallbackMessage);
+      }
     }
     // Note: 'end' event is not needed - streaming message will be replaced by final message in handleMessageEvent
   }
 
   /**
    * Remove all stream_event messages from the messages array.
-   * Called on cancel and new message send to prevent stale streaming
+   * Called on new message send to prevent stale streaming
    * placeholders from causing wrong insertion positions.
    */
   private cleanupStreamEvents(): void {
@@ -732,6 +796,36 @@ class ChatService {
     }
   }
 
+  /**
+   * Convert stream_event messages with text to finalized assistant messages.
+   * Called on cancel to preserve partial reasoning/text that was visible.
+   * Empty stream_events (no text) are removed.
+   * The backend saves these to DB independently, so on refresh the DB version takes over.
+   */
+  private finalizeStreamEvents(): void {
+    for (let i = sessionState.messages.length - 1; i >= 0; i--) {
+      const msg = sessionState.messages[i] as any;
+      if (msg.type !== 'stream_event') continue;
+
+      if (msg.partialText) {
+        const isReasoning = msg.metadata?.reasoning === true;
+        sessionState.messages[i] = {
+          type: 'assistant',
+          message: {
+            role: 'assistant',
+            content: [{ type: 'text', text: msg.partialText }]
+          },
+          metadata: {
+            ...msg.metadata,
+            ...(isReasoning && { reasoning: true }),
+          }
+        } as any;
+      } else {
+        sessionState.messages.splice(i, 1);
+      }
+    }
+  }
+
   /**
    * Detect whether any interactive tool (e.g. AskUserQuestion) is pending in the current messages.
    * Used after browser refresh / catchup to restore the isWaitingInput state.
@@ -752,10 +846,11 @@ class ChatService {
       }
     }
 
-    // Check if any interactive tool is unanswered
+    // Check if any interactive tool is unanswered (skip interrupted/cancelled messages)
     for (const msg of sessionState.messages) {
       const msgAny = msg as any;
       if (msgAny.type !== 'assistant' || !msgAny.message?.content) continue;
+      if (msgAny.metadata?.interrupted) continue;
       const content = Array.isArray(msgAny.message.content) ? msgAny.message.content : [];
       const hasPendingInteractive = content.some(
         (item: any) => item.type === 'tool_use' && INTERACTIVE_TOOLS.has(item.name) && item.id && !answeredToolIds.has(item.id)

package/frontend/services/notification/global-stream-monitor.ts

@@ -35,13 +35,16 @@ class GlobalStreamMonitor {
 
     // Stream finished — notify on completion
     ws.on('chat:stream-finished', async (data) => {
-      const { projectId, status, chatSessionId } = data;
+      const { projectId, status, chatSessionId, reason } = data;
 
-      debug.log('notification', 'GlobalStreamMonitor: Stream finished', { projectId, status });
+      debug.log('notification', 'GlobalStreamMonitor: Stream finished', { projectId, status, reason });
 
       // Clean up notified IDs for this session (stream is done)
       this.clearSessionNotifications(chatSessionId);
 
+      // Skip notifications when stream was cancelled due to session deletion
+      if (reason === 'session-deleted') return;
+
       // Play sound notification
       try {
         await soundNotification.play();

package/frontend/services/notification/push.service.ts

@@ -54,8 +54,8 @@ async function sendNotification(
 	
 	try {
 		const notification = new Notification(title, {
-			icon: '/favicon.ico',
-			badge: '/favicon.ico',
+			icon: '/favicon.svg',
+			badge: '/favicon.svg',
 			...options
 		});