@myrialabs/clopen 0.1.2 → 0.1.3

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

@@ -7,9 +7,18 @@
 	import { projectState } from '$frontend/lib/stores/core/projects.svelte';
 	import { presenceState } from '$frontend/lib/stores/core/presence.svelte';
 	import { userStore } from '$frontend/lib/stores/features/user.svelte';
-	import { workspaceState, type PanelId } from '$frontend/lib/stores/ui/workspace.svelte';
+	import {
+		workspaceState,
+		type PanelId,
+		swapPanel,
+		splitPanel,
+		closePanel,
+		canClosePanel,
+		PANEL_OPTIONS
+	} from '$frontend/lib/stores/ui/workspace.svelte';
 	import type { IconName } from '$shared/types/ui/icons';
 	import type { DeviceSize } from '$frontend/lib/constants/preview';
+
 	import { DEVICE_VIEWPORTS } from '$frontend/lib/constants/preview';
 
 	interface Props {
@@ -72,6 +81,33 @@
 		}
 	});
 
+	// Panel actions menu state
+	let showActionsMenu = $state(false);
+
+	function toggleActionsMenu(e: MouseEvent) {
+		e.stopPropagation();
+		showActionsMenu = !showActionsMenu;
+	}
+
+	function closeActionsMenu() {
+		showActionsMenu = false;
+	}
+
+	function handleSwap(newPanelId: PanelId) {
+		swapPanel(panelId, newPanelId);
+		closeActionsMenu();
+	}
+
+	function handleSplit(direction: 'vertical' | 'horizontal') {
+		splitPanel(panelId, direction);
+		closeActionsMenu();
+	}
+
+	function handleClose() {
+		closePanel(panelId);
+		closeActionsMenu();
+	}
+
 	// Preview panel device dropdown state
 	let showDeviceDropdown = $state(false);
 
@@ -116,9 +152,83 @@
 		? 'h-11 pb-2 px-4 bg-white/90 dark:bg-slate-900/98 border-b border-slate-200 dark:border-slate-800'
 		: 'py-2.5 px-3.5 bg-slate-100 dark:bg-slate-800/80 border-b border-slate-200 dark:border-slate-800'}"
 >
-	<div class="flex items-center gap-2.5 text-sm font-medium text-slate-900 dark:text-slate-100">
+	<div class="flex items-center text-sm font-medium text-slate-900 dark:text-slate-100">
+		<!-- Panel layout actions (⋮ menu) -->
+		{#if !isMobile}
+			<div class="relative -ml-0.5 mr-2 border-slate-200 dark:border-slate-700">
+				<button
+					type="button"
+					class="flex items-center justify-center w-6 h-6 bg-transparent border-none rounded-md text-slate-400 cursor-pointer transition-all duration-150 hover:bg-violet-500/10 hover:text-slate-700 dark:hover:text-slate-200"
+					onclick={toggleActionsMenu}
+					title="Panel actions"
+				>
+					<Icon name="lucide:ellipsis-vertical" class="w-3.5 h-3.5" />
+				</button>
+
+				{#if showActionsMenu}
+					<div class="fixed inset-0 z-40" onclick={closeActionsMenu}></div>
+					<div class="absolute top-full left-0 mt-1 z-50 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg shadow-lg overflow-hidden min-w-44 py-1">
+						<!-- Switch to section -->
+						<div class="px-3 py-1.5 text-3xs font-semibold text-slate-400 dark:text-slate-500 uppercase tracking-wider">
+							Switch to
+						</div>
+						{#each PANEL_OPTIONS as option}
+							<button
+								type="button"
+								class="flex items-center gap-2.5 w-full px-3 py-1.5 text-left text-xs bg-transparent border-none cursor-pointer transition-all duration-150 hover:bg-violet-500/10
+									{option.id === panelId ? 'text-violet-600 dark:text-violet-400 font-medium' : 'text-slate-700 dark:text-slate-300'}"
+								onclick={() => handleSwap(option.id)}
+								disabled={option.id === panelId}
+							>
+								<Icon name={option.icon} class="w-3.5 h-3.5" />
+								<span class="flex-1">{option.title}</span>
+								{#if option.id === panelId}
+									<Icon name="lucide:check" class="w-3 h-3 text-violet-600 dark:text-violet-400" />
+								{/if}
+							</button>
+						{/each}
+
+						<!-- Divider -->
+						<div class="my-1 border-t border-slate-200 dark:border-slate-700"></div>
+
+						<!-- Split actions -->
+						<button
+							type="button"
+							class="flex items-center gap-2.5 w-full px-3 py-1.5 text-left text-xs bg-transparent border-none cursor-pointer transition-all duration-150 hover:bg-violet-500/10 text-slate-700 dark:text-slate-300"
+							onclick={() => handleSplit('vertical')}
+						>
+							<Icon name="lucide:columns-2" class="w-3.5 h-3.5" />
+							<span>Split Right</span>
+						</button>
+						<button
+							type="button"
+							class="flex items-center gap-2.5 w-full px-3 py-1.5 text-left text-xs bg-transparent border-none cursor-pointer transition-all duration-150 hover:bg-violet-500/10 text-slate-700 dark:text-slate-300"
+							onclick={() => handleSplit('horizontal')}
+						>
+							<Icon name="lucide:rows-2" class="w-3.5 h-3.5" />
+							<span>Split Down</span>
+						</button>
+
+						<!-- Divider -->
+						<div class="my-1 border-t border-slate-200 dark:border-slate-700"></div>
+
+						<!-- Close -->
+						<button
+							type="button"
+							class="flex items-center gap-2.5 w-full px-3 py-1.5 text-left text-xs bg-transparent border-none cursor-pointer transition-all duration-150 hover:bg-red-500/10 text-red-600 dark:text-red-400 disabled:opacity-40 disabled:cursor-not-allowed"
+							onclick={handleClose}
+							disabled={!canClosePanel()}
+							title={!canClosePanel() ? 'Cannot close last panel' : 'Close this panel'}
+						>
+							<Icon name="lucide:x" class="w-3.5 h-3.5" />
+							<span>Close Panel</span>
+						</button>
+					</div>
+				{/if}
+			</div>
+		{/if}
 		<Icon name={iconName} class="w-4 h-4 text-violet-600" />
-		<span>{panel?.title ?? 'Panel'}</span>
+		<span class="ml-2.5">{panel?.title ?? 'Panel'}</span>
 	</div>
 
 	<div class="flex items-center">
@@ -443,7 +553,7 @@
 										<Icon name="lucide:globe" class="w-3.5 h-3.5 shrink-0" />
 										<div class="flex-1 min-w-0">
 											<div>{remote.name}</div>
-											<div class="text-[10px] text-slate-400 truncate font-mono">{remote.fetchUrl}</div>
+											<div class="text-3xs text-slate-400 truncate font-mono">{remote.fetchUrl}</div>
 										</div>
 										{#if remote.name === remoteName}
 											<Icon name="lucide:check" class="w-3.5 h-3.5 text-violet-600 shrink-0" />
@@ -501,5 +611,6 @@
 				</button>
 			{/if}
 		</div>
+
 	</div>
 </header>

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/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();