@myrialabs/clopen 0.1.2 → 0.1.4

package/frontend/lib/components/workspace/ViewMenu.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { fade, scale } from 'svelte/transition';
+	import { scale } from 'svelte/transition';
 	import { cubicOut } from 'svelte/easing';
 	import Icon from '$frontend/lib/components/common/Icon.svelte';
 	import LayoutPreview from '$frontend/lib/components/settings/appearance/LayoutPreview.svelte';
@@ -9,7 +9,6 @@
 		applyLayoutPreset,
 		type LayoutPreset
 	} from '$frontend/lib/stores/ui/workspace.svelte';
-	import { settings } from '$frontend/lib/stores/features/settings.svelte';
 	import { clickOutside } from '$frontend/lib/utils/click-outside';
 	import type { IconName } from '$shared/types/ui/icons';
 
@@ -27,36 +26,29 @@
 	const presetCategories = [
 		{
 			name: 'Single Panel',
-			presets: builtInPresets.slice(0, 5)
+			presets: builtInPresets.slice(0, 1)
 		},
 		{
 			name: 'Two Panels',
-			presets: builtInPresets.slice(5, 13)
+			presets: builtInPresets.slice(1, 4)
 		},
 		{
 			name: 'Three Panels',
-			presets: builtInPresets.slice(13, 22)
+			presets: builtInPresets.slice(4, 8)
 		},
 		{
 			name: 'Four Panels',
-			presets: builtInPresets.slice(22, 26)
+			presets: builtInPresets.slice(8, 11)
 		},
 		{
 			name: 'Five Panels',
-			presets: builtInPresets.slice(26, 28)
+			presets: builtInPresets.slice(11, 12)
 		}
 	];
 
 	// Filter visible presets and categories
 	const visibleCategories = $derived(
-		presetCategories
-			.map((category) => ({
-				...category,
-				presets: category.presets.filter(
-					(preset) => settings.layoutPresetVisibility[preset.id] !== false
-				)
-			}))
-			.filter((category) => category.presets.length > 0)
+		presetCategories.filter((category) => category.presets.length > 0)
 	);
 
 	function toggleMenu() {
@@ -129,19 +121,11 @@
 						{#each category.presets as preset}
 							<button
 								type="button"
-								class="flex items-center p-2.5 bg-transparent border border-slate-200 dark:border-slate-800 rounded-lg text-slate-700 dark:text-slate-300 text-sm text-left cursor-pointer transition-all duration-150 hover:bg-violet-500/10 hover:border-violet-500/20 {workspaceState.activePresetId ===
-								preset.id
-									? 'bg-violet-500/5 border-violet-500/30'
-									: ''}"
+								class="flex items-center p-2.5 bg-transparent border border-slate-200 dark:border-slate-800 rounded-lg text-slate-700 dark:text-slate-300 text-sm text-left cursor-pointer transition-all duration-150 hover:bg-violet-500/10 hover:border-violet-500/20"
 								onclick={() => handleApplyPreset(preset)}
 							>
 								<div class="flex flex-col gap-1 flex-1 min-w-0">
-									<div class="flex justify-between">
-										<span class="font-medium text-xs">{preset.name}</span>
-										{#if workspaceState.activePresetId === preset.id}
-											<Icon name="lucide:check" class="w-3.5 h-3.5 text-violet-600 dark:text-violet-400 shrink-0" />
-										{/if}
-									</div>
+									<span class="font-medium text-xs">{preset.name}</span>
 									<!-- Visual Preview -->
 									<div class="w-full">
 										<LayoutPreview layout={preset.layout} size="small" />

package/frontend/lib/components/workspace/layout/split-pane/Layout.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-	import type { SplitNode } from '$frontend/lib/stores/ui/workspace.svelte';
+	import { type SplitNode, setPanelAtPath, closePanelAtPath, PANEL_OPTIONS } from '$frontend/lib/stores/ui/workspace.svelte';
+	import Icon from '$frontend/lib/components/common/Icon.svelte';
 	import PanelContainer from '../../PanelContainer.svelte';
 	import Container from './Container.svelte';
 
@@ -18,11 +19,35 @@
 			<PanelContainer panelId={node.panelId} />
 		</div>
 	{:else}
-		<!-- Empty slot -->
+		<!-- Empty slot: Panel picker -->
 		<div
-			class="split-pane-empty flex items-center justify-center h-full w-full bg-slate-100 dark:bg-slate-900/50 border-2 border-dashed border-slate-300 dark:border-slate-600 rounded-lg"
+			class="split-pane-empty flex flex-col items-center justify-center gap-4 h-full w-full bg-white/90 dark:bg-slate-900/60 border border-slate-200 dark:border-slate-800 rounded-xl overflow-hidden"
 		>
-			<span class="text-sm text-slate-400 dark:text-slate-500">Empty Panel</span>
+			<span class="text-xs font-semibold text-slate-400 dark:text-slate-500 uppercase tracking-wider">Choose Panel</span>
+			<div class="grid grid-cols-3 gap-2">
+				{#each PANEL_OPTIONS as option}
+					<button
+						type="button"
+						class="flex flex-col items-center justify-center gap-2 w-26 h-18 bg-slate-100 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl text-xs font-medium text-slate-600 dark:text-slate-300 cursor-pointer transition-all duration-150 hover:bg-violet-500/10 hover:border-violet-400 hover:text-violet-600 dark:hover:text-violet-400"
+						onclick={() => setPanelAtPath(path, option.id)}
+					>
+						<Icon name={option.icon} class="w-5 h-5" />
+						<span>{option.title}</span>
+					</button>
+				{/each}
+				<!-- Close / Cancel button -->
+				{#if path.length > 0}
+					<button
+						type="button"
+						class="flex flex-col items-center justify-center gap-2 w-26 h-18 bg-transparent border border-dashed border-slate-300 dark:border-slate-700 rounded-xl text-xs font-medium text-slate-400 dark:text-slate-500 cursor-pointer transition-all duration-150 hover:border-red-400 hover:text-red-500 dark:hover:text-red-400"
+						onclick={() => closePanelAtPath(path)}
+						title="Remove this panel slot"
+					>
+						<Icon name="lucide:x" class="w-5 h-5" />
+						<span>Cancel</span>
+					</button>
+				{/if}
+			</div>
 		</div>
 	{/if}
 {:else if node.type === 'split'}

package/frontend/lib/components/workspace/panels/ChatPanel.svelte

@@ -146,9 +146,10 @@
 			return;
 		}
 
-		// Cancel active stream if running
+		// Reset frontend state without killing the backend stream
+		// The old session's stream continues running in the background
 		if (appState.isLoading) {
-			chatService.cancelRequest();
+			chatService.resetForSessionSwitch();
 		}
 
 		// Clear server input state and prevent stale restore on ChatInput remount

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

@@ -1,86 +1,77 @@
-/**
- * Global Stream Monitor Service
- *
- * Single source of truth for chat stream notifications (sound + push).
- *
- * Listens for chat:stream-finished events from the backend and triggers
- * notifications for ALL projects — both active and non-active.
- *
- * The backend uses ws.emit.projectMembers() to send this event to all
- * users who have been associated with the project, even if they switched
- * to a different project.
- */
-
-import { soundNotification, pushNotification } from '$frontend/lib/services/notification';
-import { projectState } from '$frontend/lib/stores/core/projects.svelte';
-import { sessionState } from '$frontend/lib/stores/core/sessions.svelte';
-import { debug } from '$shared/utils/logger';
-import ws from '$frontend/lib/utils/ws';
-
-class GlobalStreamMonitor {
-  private initialized = false;
-
-  /**
-   * Initialize the monitor - subscribes to the WS event.
-   * Safe to call multiple times (idempotent).
-   *
-   * Only triggers sound/push when the finished stream belongs to the
-   * user's current project AND current chat session.
-   */
-  initialize(): void {
-    if (this.initialized) return;
-    this.initialized = true;
-
-    debug.log('notification', 'GlobalStreamMonitor: Initializing WS listener');
-
-    ws.on('chat:stream-finished', async (data) => {
-      const { projectId, chatSessionId, status, timestamp } = data;
-      const isActiveProject = projectState.currentProject?.id === projectId;
-      const isActiveSession = sessionState.currentSession?.id === chatSessionId;
-
-      debug.log('notification', 'GlobalStreamMonitor: Stream finished', {
-        projectId,
-        chatSessionId,
-        status,
-        timestamp,
-        isActiveProject,
-        isActiveSession
-      });
-
-      // Only notify if the stream is for the user's current project AND session
-      if (!isActiveProject || !isActiveSession) return;
-
-      // Play sound notification
-      try {
-        await soundNotification.play();
-      } catch (error) {
-        debug.error('notification', 'Error playing sound notification:', error);
-      }
-
-      // Send push notification with project context
-      try {
-        const projectName = projectState.projects.find(p => p.id === projectId)?.name || 'Unknown';
-
-        if (status === 'completed') {
-          await pushNotification.sendChatComplete(`Chat response ready in "${projectName}"`);
-        } else if (status === 'error') {
-          await pushNotification.sendChatError(`Chat error in "${projectName}"`);
-        } else if (status === 'cancelled') {
-          await pushNotification.sendChatComplete(`Chat interrupted in "${projectName}"`);
-        }
-      } catch (error) {
-        debug.error('notification', 'Error sending push notification:', error);
-      }
-    });
-  }
-
-  /**
-   * Clear state (for cleanup/testing)
-   */
-  clear(): void {
-    debug.log('notification', 'GlobalStreamMonitor: Clearing state');
-  }
-}
-
-// Export singleton instance
-export const globalStreamMonitor = new GlobalStreamMonitor();
+/**
+ * Global Stream Monitor Service
+ *
+ * Single source of truth for chat stream notifications (sound + push).
+ *
+ * Listens for chat:stream-finished events from the backend and triggers
+ * notifications for ALL projects — both active and non-active.
+ *
+ * The backend uses ws.emit.projectMembers() to send this event to all
+ * users who have been associated with the project, even if they switched
+ * to a different project.
+ */
+
+import { soundNotification, pushNotification } from '$frontend/lib/services/notification';
+import { projectState } from '$frontend/lib/stores/core/projects.svelte';
+import { debug } from '$shared/utils/logger';
+import ws from '$frontend/lib/utils/ws';
+
+class GlobalStreamMonitor {
+  private initialized = false;
+
+  /**
+   * Initialize the monitor - subscribes to the WS event.
+   * Safe to call multiple times (idempotent).
+   *
+   * Triggers sound/push for ALL projects the user is a member of,
+   * not just the active one — background streams deserve notifications too.
+   */
+  initialize(): void {
+    if (this.initialized) return;
+    this.initialized = true;
+
+    debug.log('notification', 'GlobalStreamMonitor: Initializing WS listener');
+
+    ws.on('chat:stream-finished', async (data) => {
+      const { projectId, status, timestamp } = data;
+
+      debug.log('notification', 'GlobalStreamMonitor: Stream finished', {
+        projectId,
+        status,
+        timestamp
+      });
+
+      // Play sound notification
+      try {
+        await soundNotification.play();
+      } catch (error) {
+        debug.error('notification', 'Error playing sound notification:', error);
+      }
+
+      // Send push notification with project context
+      try {
+        const projectName = projectState.projects.find(p => p.id === projectId)?.name || 'Unknown';
+
+        if (status === 'completed') {
+          await pushNotification.sendChatComplete(`Chat response ready in "${projectName}"`);
+        } else if (status === 'error') {
+          await pushNotification.sendChatError(`Chat error in "${projectName}"`);
+        } else if (status === 'cancelled') {
+          await pushNotification.sendChatComplete(`Chat interrupted in "${projectName}"`);
+        }
+      } catch (error) {
+        debug.error('notification', 'Error sending push notification:', error);
+      }
+    });
+  }
+
+  /**
+   * Clear state (for cleanup/testing)
+   */
+  clear(): void {
+    debug.log('notification', 'GlobalStreamMonitor: Clearing state');
+  }
+}
+
+// Export singleton instance
+export const globalStreamMonitor = new GlobalStreamMonitor();

package/frontend/lib/services/project/status.service.ts

@@ -1,159 +1,160 @@
-/**
- * Project Status Service
- * Tracks active streams and user presence for projects via WebSocket
- * Fully realtime - no cache, no polling
- *
- * Single event: `projects:presence-updated` contains full state
- */
-
-import { getOrCreateAnonymousUser, type AnonymousUser } from '$shared/utils/anonymous-user';
-import ws from '$frontend/lib/utils/ws';
-import { debug } from '$shared/utils/logger';
-
-export interface ProjectStatus {
-  projectId: string;
-  hasActiveStreams: boolean;
-  activeStreamCount: number;
-  activeUsers: { userId: string; userName: string }[];
-  streams: {
-    streamId: string;
-    chatSessionId: string;
-    status: string;
-    startedAt: string;
-    messagesCount: number;
-  }[];
-  /** Per-chat-session user presence: { chatSessionId → users[] } */
-  chatSessionUsers?: Record<string, { userId: string; userName: string }[]>;
-}
-
-class ProjectStatusService {
-  private currentUser: AnonymousUser | null = null;
-  private currentProjectId: string | null = null;
-  private initialized = false;
-  private statusUpdateCallbacks: Set<(statuses: ProjectStatus[]) => void> = new Set();
-  private unsubscribe: (() => void) | null = null;
-
-  /**
-   * Initialize the service - sets up WS listener
-   * Called automatically on first use
-   */
-  async initialize(): Promise<void> {
-    if (typeof window === 'undefined' || this.initialized) return;
-
-    this.currentUser = await getOrCreateAnonymousUser();
-    debug.log('project', 'Initialized with user:', this.currentUser?.name);
-
-    this.unsubscribe = ws.on('projects:presence-updated', (data) => {
-      try {
-        if (data.type === 'presence-updated' && data.data) {
-          const statuses = Array.isArray(data.data) ? data.data : [data.data];
-          this.statusUpdateCallbacks.forEach(callback => {
-            try {
-              callback(statuses);
-            } catch (error) {
-              debug.error('project', 'Error in status callback:', error);
-            }
-          });
-        }
-      } catch (error) {
-        debug.error('project', 'Error handling presence update:', error);
-      }
-    });
-
-    this.initialized = true;
-  }
-
-  private async ensureInitialized(): Promise<void> {
-    if (!this.initialized) {
-      await this.initialize();
-    }
-  }
-
-  /**
-   * Subscribe to real-time presence updates
-   * Auto-initializes WS listener if not done yet
-   */
-  onStatusUpdate(callback: (statuses: ProjectStatus[]) => void): () => void {
-    this.statusUpdateCallbacks.add(callback);
-    this.ensureInitialized();
-
-    return () => {
-      this.statusUpdateCallbacks.delete(callback);
-    };
-  }
-
-  /**
-   * Join a project - start presence tracking
-   */
-  async startTracking(projectId: string): Promise<void> {
-    if (typeof window === 'undefined') return;
-
-    await this.ensureInitialized();
-
-    if (this.currentProjectId && this.currentProjectId !== projectId) {
-      await this.stopTracking();
-    }
-
-    this.currentProjectId = projectId;
-
-    if (this.currentUser) {
-      ws.emit('projects:join', {
-        userName: this.currentUser.name
-      });
-    }
-
-    document.addEventListener('visibilitychange', this.handleVisibilityChange);
-    window.addEventListener('beforeunload', this.handleBeforeUnload);
-  }
-
-  /**
-   * Leave a project - stop presence tracking
-   */
-  async stopTracking(): Promise<void> {
-    if (this.currentProjectId && this.currentUser) {
-      // Send projectId explicitly because ws.setProject() may have already changed context
-      ws.emit('projects:leave', {
-        projectId: this.currentProjectId
-      });
-    }
-
-    if (typeof window !== 'undefined') {
-      document.removeEventListener('visibilitychange', this.handleVisibilityChange);
-      window.removeEventListener('beforeunload', this.handleBeforeUnload);
-    }
-
-    this.currentProjectId = null;
-  }
-
-  cleanup(): void {
-    if (this.unsubscribe) {
-      this.unsubscribe();
-      this.unsubscribe = null;
-    }
-    this.statusUpdateCallbacks.clear();
-    this.initialized = false;
-  }
-
-  private handleVisibilityChange = () => {
-    if (!document.hidden && this.currentProjectId && this.currentUser) {
-      ws.http('projects:update-presence', {
-        userName: this.currentUser.name,
-        action: 'update'
-      }).catch(() => {});
-    }
-  };
-
-  private handleBeforeUnload = () => {
-    if (this.currentProjectId && this.currentUser) {
-      ws.emit('projects:leave', {
-        projectId: this.currentProjectId
-      });
-    }
-  };
-
-  getCurrentUser(): AnonymousUser | null {
-    return this.currentUser;
-  }
-}
-
-export const projectStatusService = new ProjectStatusService();
+/**
+ * Project Status Service
+ * Tracks active streams and user presence for projects via WebSocket
+ * Fully realtime - no cache, no polling
+ *
+ * Single event: `projects:presence-updated` contains full state
+ */
+
+import { getOrCreateAnonymousUser, type AnonymousUser } from '$shared/utils/anonymous-user';
+import ws from '$frontend/lib/utils/ws';
+import { debug } from '$shared/utils/logger';
+
+export interface ProjectStatus {
+  projectId: string;
+  hasActiveStreams: boolean;
+  activeStreamCount: number;
+  activeUsers: { userId: string; userName: string }[];
+  streams: {
+    streamId: string;
+    chatSessionId: string;
+    status: string;
+    startedAt: string;
+    messagesCount: number;
+    isWaitingInput?: boolean;
+  }[];
+  /** Per-chat-session user presence: { chatSessionId → users[] } */
+  chatSessionUsers?: Record<string, { userId: string; userName: string }[]>;
+}
+
+class ProjectStatusService {
+  private currentUser: AnonymousUser | null = null;
+  private currentProjectId: string | null = null;
+  private initialized = false;
+  private statusUpdateCallbacks: Set<(statuses: ProjectStatus[]) => void> = new Set();
+  private unsubscribe: (() => void) | null = null;
+
+  /**
+   * Initialize the service - sets up WS listener
+   * Called automatically on first use
+   */
+  async initialize(): Promise<void> {
+    if (typeof window === 'undefined' || this.initialized) return;
+
+    this.currentUser = await getOrCreateAnonymousUser();
+    debug.log('project', 'Initialized with user:', this.currentUser?.name);
+
+    this.unsubscribe = ws.on('projects:presence-updated', (data) => {
+      try {
+        if (data.type === 'presence-updated' && data.data) {
+          const statuses = Array.isArray(data.data) ? data.data : [data.data];
+          this.statusUpdateCallbacks.forEach(callback => {
+            try {
+              callback(statuses);
+            } catch (error) {
+              debug.error('project', 'Error in status callback:', error);
+            }
+          });
+        }
+      } catch (error) {
+        debug.error('project', 'Error handling presence update:', error);
+      }
+    });
+
+    this.initialized = true;
+  }
+
+  private async ensureInitialized(): Promise<void> {
+    if (!this.initialized) {
+      await this.initialize();
+    }
+  }
+
+  /**
+   * Subscribe to real-time presence updates
+   * Auto-initializes WS listener if not done yet
+   */
+  onStatusUpdate(callback: (statuses: ProjectStatus[]) => void): () => void {
+    this.statusUpdateCallbacks.add(callback);
+    this.ensureInitialized();
+
+    return () => {
+      this.statusUpdateCallbacks.delete(callback);
+    };
+  }
+
+  /**
+   * Join a project - start presence tracking
+   */
+  async startTracking(projectId: string): Promise<void> {
+    if (typeof window === 'undefined') return;
+
+    await this.ensureInitialized();
+
+    if (this.currentProjectId && this.currentProjectId !== projectId) {
+      await this.stopTracking();
+    }
+
+    this.currentProjectId = projectId;
+
+    if (this.currentUser) {
+      ws.emit('projects:join', {
+        userName: this.currentUser.name
+      });
+    }
+
+    document.addEventListener('visibilitychange', this.handleVisibilityChange);
+    window.addEventListener('beforeunload', this.handleBeforeUnload);
+  }
+
+  /**
+   * Leave a project - stop presence tracking
+   */
+  async stopTracking(): Promise<void> {
+    if (this.currentProjectId && this.currentUser) {
+      // Send projectId explicitly because ws.setProject() may have already changed context
+      ws.emit('projects:leave', {
+        projectId: this.currentProjectId
+      });
+    }
+
+    if (typeof window !== 'undefined') {
+      document.removeEventListener('visibilitychange', this.handleVisibilityChange);
+      window.removeEventListener('beforeunload', this.handleBeforeUnload);
+    }
+
+    this.currentProjectId = null;
+  }
+
+  cleanup(): void {
+    if (this.unsubscribe) {
+      this.unsubscribe();
+      this.unsubscribe = null;
+    }
+    this.statusUpdateCallbacks.clear();
+    this.initialized = false;
+  }
+
+  private handleVisibilityChange = () => {
+    if (!document.hidden && this.currentProjectId && this.currentUser) {
+      ws.http('projects:update-presence', {
+        userName: this.currentUser.name,
+        action: 'update'
+      }).catch(() => {});
+    }
+  };
+
+  private handleBeforeUnload = () => {
+    if (this.currentProjectId && this.currentUser) {
+      ws.emit('projects:leave', {
+        projectId: this.currentProjectId
+      });
+    }
+  };
+
+  getCurrentUser(): AnonymousUser | null {
+    return this.currentUser;
+  }
+}
+
+export const projectStatusService = new ProjectStatusService();