@myrialabs/clopen 0.1.2 → 0.1.3

package/backend/lib/project/status-manager.ts

@@ -1,182 +1,222 @@
-/**
- * Project Status Data Service
- * Shared logic for getting project status data
- */
-
-import { streamManager } from '../chat/stream-manager.js';
-import { ws } from '../utils/ws.js';
-
-// Store active users per project (shared with main endpoint)
-const projectUsers = new Map<string, Set<{ userId: string; userName: string; lastSeen: number }>>();
-
-// Cleanup inactive users after 5 minutes
-const USER_TIMEOUT = 5 * 60 * 1000;
-
-function cleanupInactiveUsers() {
-  const now = Date.now();
-  projectUsers.forEach((users, projectId) => {
-    const activeUsers = new Set([...users].filter(user => now - user.lastSeen < USER_TIMEOUT));
-    if (activeUsers.size === 0) {
-      projectUsers.delete(projectId);
-    } else {
-      projectUsers.set(projectId, activeUsers);
-    }
-  });
-}
-
-// Get project status data
-export async function getProjectStatusData(projectId?: string) {
-  cleanupInactiveUsers();
-  
-  if (projectId) {
-    // Get status for specific project
-    const allProjectStreams = streamManager.getProjectStreams(projectId);
-    const users = projectUsers.get(projectId);
-
-    // Filter to only count active streams
-    const activeStreams = allProjectStreams.filter(s => s.status === 'active');
-
-    // Get per-chat-session user presence from WS rooms
-    const chatSessionUsers = ws.getProjectChatSessions(projectId);
-
-    return {
-      projectId,
-      hasActiveStreams: activeStreams.length > 0,
-      activeStreamCount: activeStreams.length,
-      activeUsers: users ? [...users].map(u => ({
-        userId: u.userId,
-        userName: u.userName
-      })) : [],
-      streams: allProjectStreams.map(s => ({
-        streamId: s.streamId,
-        chatSessionId: s.chatSessionId,
-        status: s.status,
-        startedAt: s.startedAt,
-        messagesCount: s.messages.length
-      })),
-      chatSessionUsers: Object.fromEntries(
-        Array.from(chatSessionUsers.entries()).map(([csId, csUsers]) => [
-          csId,
-          csUsers.map(u => {
-            // Resolve userName from projectUsers
-            const projectUser = users ? [...users].find(pu => pu.userId === u.userId) : undefined;
-            return { userId: u.userId, userName: projectUser?.userName || u.userId };
-          })
-        ])
-      )
-    };
-  } else {
-    // Get status for all projects
-    const allProjects = new Map<string, any>();
-    
-    // Get all active streams grouped by project
-    const allStreams = streamManager.getAllStreams();
-    allStreams.forEach(stream => {
-      if (stream.projectId) {
-        if (!allProjects.has(stream.projectId)) {
-          allProjects.set(stream.projectId, {
-            projectId: stream.projectId,
-            hasActiveStreams: false,
-            activeStreamCount: 0,
-            activeUsers: [],
-            streams: []
-          });
-        }
-        
-        const projectData = allProjects.get(stream.projectId);
-        if (stream.status === 'active') {
-          projectData.hasActiveStreams = true;
-          projectData.activeStreamCount++;
-        }
-        projectData.streams.push({
-          streamId: stream.streamId,
-          chatSessionId: stream.chatSessionId,
-          status: stream.status,
-          startedAt: stream.startedAt,
-          messagesCount: stream.messages.length
-        });
-      }
-    });
-    
-    // Add active users to each project
-    projectUsers.forEach((users, projectId) => {
-      if (!allProjects.has(projectId)) {
-        allProjects.set(projectId, {
-          projectId,
-          hasActiveStreams: false,
-          activeStreamCount: 0,
-          activeUsers: [],
-          streams: [],
-          chatSessionUsers: {}
-        });
-      }
-
-      const projectData = allProjects.get(projectId);
-      projectData.activeUsers = [...users].map(u => ({
-        userId: u.userId,
-        userName: u.userName
-      }));
-    });
-
-    // Add per-chat-session user presence to each project
-    for (const [projectId, projectData] of allProjects) {
-      const chatSessionUsers = ws.getProjectChatSessions(projectId);
-      const users = projectUsers.get(projectId);
-      projectData.chatSessionUsers = Object.fromEntries(
-        Array.from(chatSessionUsers.entries()).map(([csId, csUsers]) => [
-          csId,
-          csUsers.map(u => {
-            const projectUser = users ? [...users].find(pu => pu.userId === u.userId) : undefined;
-            return { userId: u.userId, userName: projectUser?.userName || u.userId };
-          })
-        ])
-      );
-    }
-
-    return [...allProjects.values()];
-  }
-}
-
-// Update user presence
-export function updateUserPresence(projectId: string, userId: string, userName: string, action: string) {
-  cleanupInactiveUsers();
-  
-  if (action === 'leave') {
-    // Remove user from project
-    const users = projectUsers.get(projectId);
-    if (users) {
-      const updatedUsers = new Set([...users].filter(u => u.userId !== userId));
-      if (updatedUsers.size === 0) {
-        projectUsers.delete(projectId);
-      } else {
-        projectUsers.set(projectId, updatedUsers);
-      }
-    }
-  } else {
-    // Add or update user presence
-    if (!projectUsers.has(projectId)) {
-      projectUsers.set(projectId, new Set());
-    }
-    
-    const users = projectUsers.get(projectId)!;
-    // Remove old entry if exists
-    const updatedUsers = new Set([...users].filter(u => u.userId !== userId));
-    // Add new entry with updated timestamp
-    updatedUsers.add({
-      userId,
-      userName,
-      lastSeen: Date.now()
-    });
-    projectUsers.set(projectId, updatedUsers);
-  }
-  
-  // Return current users for the project
-  const currentUsers = projectUsers.get(projectId);
-  return {
-    projectId,
-    activeUsers: currentUsers ? [...currentUsers].map(u => ({ 
-      userId: u.userId, 
-      userName: u.userName 
-    })) : []
-  };
+/**
+ * Project Status Data Service
+ * Shared logic for getting project status data
+ */
+
+import { streamManager, type StreamState } from '../chat/stream-manager.js';
+import { ws } from '../utils/ws.js';
+
+// Interactive tools that block the stream waiting for user input
+const INTERACTIVE_TOOLS = new Set(['AskUserQuestion']);
+
+/**
+ * Check if an active stream is waiting for user input.
+ * Scans stream messages for unanswered interactive tool_use blocks.
+ * This is the backend single source of truth — works even when the
+ * user is on a different project and not receiving chat events.
+ */
+function detectStreamWaitingInput(stream: StreamState): boolean {
+  if (stream.status !== 'active') return false;
+
+  const answeredToolIds = new Set<string>();
+  for (const event of stream.messages) {
+    const msg = event.message;
+    if (!msg || (msg as any).type !== 'user' || !(msg as any).content) continue;
+    const content = Array.isArray((msg as any).content) ? (msg as any).content : [];
+    for (const item of content) {
+      if (item.type === 'tool_result' && item.tool_use_id) {
+        answeredToolIds.add(item.tool_use_id);
+      }
+    }
+  }
+
+  for (const event of stream.messages) {
+    const msg = event.message;
+    if (!msg || (msg as any).type !== 'assistant' || !(msg as any).content) continue;
+    const content = Array.isArray((msg as any).content) ? (msg as any).content : [];
+    if (content.some((item: any) =>
+      item.type === 'tool_use' && INTERACTIVE_TOOLS.has(item.name) && item.id && !answeredToolIds.has(item.id)
+    )) {
+      return true;
+    }
+  }
+
+  return false;
+}
+
+// Store active users per project (shared with main endpoint)
+const projectUsers = new Map<string, Set<{ userId: string; userName: string; lastSeen: number }>>();
+
+// Cleanup inactive users after 5 minutes
+const USER_TIMEOUT = 5 * 60 * 1000;
+
+function cleanupInactiveUsers() {
+  const now = Date.now();
+  projectUsers.forEach((users, projectId) => {
+    const activeUsers = new Set([...users].filter(user => now - user.lastSeen < USER_TIMEOUT));
+    if (activeUsers.size === 0) {
+      projectUsers.delete(projectId);
+    } else {
+      projectUsers.set(projectId, activeUsers);
+    }
+  });
+}
+
+// Get project status data
+export async function getProjectStatusData(projectId?: string) {
+  cleanupInactiveUsers();
+  
+  if (projectId) {
+    // Get status for specific project
+    const allProjectStreams = streamManager.getProjectStreams(projectId);
+    const users = projectUsers.get(projectId);
+
+    // Filter to only count active streams
+    const activeStreams = allProjectStreams.filter(s => s.status === 'active');
+
+    // Get per-chat-session user presence from WS rooms
+    const chatSessionUsers = ws.getProjectChatSessions(projectId);
+
+    return {
+      projectId,
+      hasActiveStreams: activeStreams.length > 0,
+      activeStreamCount: activeStreams.length,
+      activeUsers: users ? [...users].map(u => ({
+        userId: u.userId,
+        userName: u.userName
+      })) : [],
+      streams: allProjectStreams.map(s => ({
+        streamId: s.streamId,
+        chatSessionId: s.chatSessionId,
+        status: s.status,
+        startedAt: s.startedAt,
+        messagesCount: s.messages.length,
+        isWaitingInput: detectStreamWaitingInput(s)
+      })),
+      chatSessionUsers: Object.fromEntries(
+        Array.from(chatSessionUsers.entries()).map(([csId, csUsers]) => [
+          csId,
+          csUsers.map(u => {
+            // Resolve userName from projectUsers
+            const projectUser = users ? [...users].find(pu => pu.userId === u.userId) : undefined;
+            return { userId: u.userId, userName: projectUser?.userName || u.userId };
+          })
+        ])
+      )
+    };
+  } else {
+    // Get status for all projects
+    const allProjects = new Map<string, any>();
+    
+    // Get all active streams grouped by project
+    const allStreams = streamManager.getAllStreams();
+    allStreams.forEach(stream => {
+      if (stream.projectId) {
+        if (!allProjects.has(stream.projectId)) {
+          allProjects.set(stream.projectId, {
+            projectId: stream.projectId,
+            hasActiveStreams: false,
+            activeStreamCount: 0,
+            activeUsers: [],
+            streams: []
+          });
+        }
+        
+        const projectData = allProjects.get(stream.projectId);
+        if (stream.status === 'active') {
+          projectData.hasActiveStreams = true;
+          projectData.activeStreamCount++;
+        }
+        projectData.streams.push({
+          streamId: stream.streamId,
+          chatSessionId: stream.chatSessionId,
+          status: stream.status,
+          startedAt: stream.startedAt,
+          messagesCount: stream.messages.length,
+          isWaitingInput: detectStreamWaitingInput(stream)
+        });
+      }
+    });
+    
+    // Add active users to each project
+    projectUsers.forEach((users, projectId) => {
+      if (!allProjects.has(projectId)) {
+        allProjects.set(projectId, {
+          projectId,
+          hasActiveStreams: false,
+          activeStreamCount: 0,
+          activeUsers: [],
+          streams: [],
+          chatSessionUsers: {}
+        });
+      }
+
+      const projectData = allProjects.get(projectId);
+      projectData.activeUsers = [...users].map(u => ({
+        userId: u.userId,
+        userName: u.userName
+      }));
+    });
+
+    // Add per-chat-session user presence to each project
+    for (const [projectId, projectData] of allProjects) {
+      const chatSessionUsers = ws.getProjectChatSessions(projectId);
+      const users = projectUsers.get(projectId);
+      projectData.chatSessionUsers = Object.fromEntries(
+        Array.from(chatSessionUsers.entries()).map(([csId, csUsers]) => [
+          csId,
+          csUsers.map(u => {
+            const projectUser = users ? [...users].find(pu => pu.userId === u.userId) : undefined;
+            return { userId: u.userId, userName: projectUser?.userName || u.userId };
+          })
+        ])
+      );
+    }
+
+    return [...allProjects.values()];
+  }
+}
+
+// Update user presence
+export function updateUserPresence(projectId: string, userId: string, userName: string, action: string) {
+  cleanupInactiveUsers();
+  
+  if (action === 'leave') {
+    // Remove user from project
+    const users = projectUsers.get(projectId);
+    if (users) {
+      const updatedUsers = new Set([...users].filter(u => u.userId !== userId));
+      if (updatedUsers.size === 0) {
+        projectUsers.delete(projectId);
+      } else {
+        projectUsers.set(projectId, updatedUsers);
+      }
+    }
+  } else {
+    // Add or update user presence
+    if (!projectUsers.has(projectId)) {
+      projectUsers.set(projectId, new Set());
+    }
+    
+    const users = projectUsers.get(projectId)!;
+    // Remove old entry if exists
+    const updatedUsers = new Set([...users].filter(u => u.userId !== userId));
+    // Add new entry with updated timestamp
+    updatedUsers.add({
+      userId,
+      userName,
+      lastSeen: Date.now()
+    });
+    projectUsers.set(projectId, updatedUsers);
+  }
+  
+  // Return current users for the project
+  const currentUsers = projectUsers.get(projectId);
+  return {
+    projectId,
+    activeUsers: currentUsers ? [...currentUsers].map(u => ({ 
+      userId: u.userId, 
+      userName: u.userName 
+    })) : []
+  };
 }

package/frontend/lib/components/chat/message/ChatMessages.svelte

@@ -28,6 +28,7 @@
 	let hasInitiallyScrolled = $state(false);
 	let isContentReady = $state(false);
 	let lastToolResultsHash = $state('');
+	let lastSubAgentHash = $state('');
 	// Prevent scroll events from overriding isUserAtBottom during programmatic scroll
 	let scrollLockUntil = 0;
 
@@ -254,8 +255,10 @@
 		// Check for tool result updates ($result additions) across all messages
 		let toolResultChanged = false;
 		let currentToolResultsHash = '';
+		let subAgentChanged = false;
+		let currentSubAgentHash = '';
 
-		// Build a hash of all tool results to detect changes
+		// Build a hash of all tool results and sub-agent activities to detect changes
 		for (const message of filteredMessages) {
 			if ('message' in message) {
 				const messageContent = (message as any).message?.content;
@@ -264,6 +267,9 @@
 						if (item?.type === 'tool_use' && item.$result) {
 							currentToolResultsHash += `${item.id}:${JSON.stringify(item.$result).length}|`;
 						}
+						if (item?.type === 'tool_use' && item.$subMessages) {
+							currentSubAgentHash += `${item.id}:${item.$subMessages.length}|`;
+						}
 					}
 				}
 			}
@@ -275,6 +281,12 @@
 			lastToolResultsHash = currentToolResultsHash;
 		}
 
+		// Check if sub-agent activities have changed
+		if (currentSubAgentHash !== lastSubAgentHash) {
+			subAgentChanged = true;
+			lastSubAgentHash = currentSubAgentHash;
+		}
+
 		// When message count decreases (e.g. after undo/reload), scroll to bottom
 		if (isMessageCountDecreased && hasInitiallyScrolled) {
 			requestAnimationFrame(() => {
@@ -284,14 +296,14 @@
 			return;
 		}
 
-		// Scroll on new message, partial text changes, or tool result changes
-		if ((isNewMessage || partialTextChanged || toolResultChanged) && isUserAtBottom) {
+		// Scroll on new message, partial text changes, tool result changes, or sub-agent updates
+		if ((isNewMessage || partialTextChanged || toolResultChanged || subAgentChanged) && isUserAtBottom) {
 			requestAnimationFrame(() => {
 				if (editModeState.isEditing) return;
 
 				// During streaming, scroll immediately (instant via scrollMessagesToBottom)
 				// For non-streaming changes, add a small delay for smooth UX
-				if (partialTextChanged || hasStreamingMessage) {
+				if (partialTextChanged || hasStreamingMessage || subAgentChanged) {
 					scrollMessagesToBottom(false);
 				} else {
 					const delay = toolResultChanged ? 50 : 100;

package/frontend/lib/components/chat/tools/AgentTool.svelte

@@ -6,17 +6,18 @@
 
 	const { toolInput }: { toolInput: AgentToolInput } = $props();
 
-	const description = toolInput.input.description || '';
-	const subagentType = toolInput.input.subagent_type || 'general-purpose';
-	const subMessages = (toolInput as any).$subMessages as SubAgentActivity[] | undefined;
-	const toolUseCount = subMessages?.filter(a => a.type === 'tool_use').length ?? 0;
+	const description = $derived(toolInput.input.description || '');
+	const subagentType = $derived(toolInput.input.subagent_type || 'general-purpose');
+	const subMessages = $derived(toolInput.$subMessages);
+	const toolUseCount = $derived(subMessages?.filter(a => a.type === 'tool_use').length ?? 0);
+	const result = $derived(toolInput.$result);
 
 	let scrollContainer: HTMLDivElement | undefined = $state();
 
 	// Auto-scroll to bottom when new activities arrive
 	$effect(() => {
-		const _len = subMessages?.length ?? 0;
-		if (_len > 0 && scrollContainer) {
+		const len = subMessages?.length ?? 0;
+		if (len > 0 && scrollContainer) {
 			tick().then(() => {
 				if (scrollContainer) {
 					scrollContainer.scrollTop = scrollContainer.scrollHeight;
@@ -42,7 +43,7 @@
 </script>
 
 <!-- Header card -->
-<div class="bg-white dark:bg-slate-800 rounded-md border border-slate-200/60 dark:border-slate-700/60 p-3">
+<div class="bg-white dark:bg-slate-800 rounded-md border border-slate-200/60 dark:border-slate-700/60 p-3 mb-2">
 	<div class="space-y-1">
 		<InfoLine icon="lucide:search" text={description} />
 		<InfoLine icon="lucide:bot" text="Using {subagentType} agent" />
@@ -55,7 +56,7 @@
 	<div class="text-xs text-slate-500 dark:text-slate-400 mb-2">
 		{toolUseCount} tool {toolUseCount === 1 ? 'call' : 'calls'}:
 	</div>
-	<div bind:this={scrollContainer} class="max-h-64 overflow-y-auto">
+	<div bind:this={scrollContainer} class="max-h-64 overflow-y-auto wrap-break-word">
 		<ul class="list-disc pl-5 space-y-0.5">
 			{#each subMessages as activity}
 				{#if activity.type === 'tool_use'}
@@ -77,8 +78,8 @@
 {/if}
 
 <!-- Tool Result -->
-{#if toolInput.$result}
-	{@const resultContent = toolInput.$result.content as any}
+<!-- {#if result}
+	{@const resultContent = result.content as any}
 	<div class="mt-4">
 		{#if typeof resultContent === 'string'}
 			<TextMessage content={resultContent} />
@@ -92,4 +93,4 @@
 			<TextMessage content={JSON.stringify(resultContent)} />
 		{/if}
 	</div>
-{/if}
+{/if} -->

package/frontend/lib/components/chat/tools/BashOutputTool.svelte

@@ -5,9 +5,9 @@
 
 	const { toolInput }: { toolInput: BashOutputToolInput } = $props();
 
-	const taskId = toolInput.input.task_id;
-	const block = toolInput.input.block;
-	const timeout = toolInput.input.timeout;
+	const taskId = $derived(toolInput.input.task_id);
+	const block = $derived(toolInput.input.block);
+	const timeout = $derived(toolInput.input.timeout);
 </script>
 
 <div class="bg-white dark:bg-slate-800 rounded-md border border-slate-200/60 dark:border-slate-700/60 p-3">

package/frontend/lib/components/chat/tools/BashTool.svelte

@@ -11,10 +11,10 @@
 
 	const { toolInput }: { toolInput: BashToolInput } = $props();
 
-	const command = toolInput.input.command || '';
-	const description = toolInput.input.description;
-	const timeout = toolInput.input.timeout;
-	const isBackground = toolInput.input.run_in_background;
+	const command = $derived(toolInput.input.command || '');
+	const description = $derived(toolInput.input.description);
+	const timeout = $derived(toolInput.input.timeout);
+	const isBackground = $derived(toolInput.input.run_in_background);
 
 	function parseBashOutputToolOutput(content: string): ParsedBashOutput {
 		const statusMatch = content.match(/<status>(.*?)<\/status>/);

package/frontend/lib/components/chat/tools/CustomMcpTool.svelte

@@ -25,7 +25,9 @@
 		};
 	}
 
-	const { server, tool } = parseMcpToolName(toolInput.name);
+	const parsedToolName = $derived(parseMcpToolName(toolInput.name));
+	const server = $derived(parsedToolName.server);
+	const tool = $derived(parsedToolName.tool);
 
 	// Format server name for display (e.g., "weather-service" -> "Weather Service")
 	const serverDisplayName = $derived.by(() => {

package/frontend/lib/components/chat/tools/EditTool.svelte

@@ -5,13 +5,13 @@
 
 	const { toolInput }: { toolInput: EditToolInput } = $props();
 
-	const filePath = toolInput.input.file_path || '';
-	const fileName = filePath.split(/[/\\]/).pop() || filePath || 'unknown';
-	const oldString = toolInput.input.old_string || '';
-	const newString = toolInput.input.new_string || '';
-	const replaceAll = toolInput.input.replace_all || false;
+	const filePath = $derived(toolInput.input.file_path || '');
+	const fileName = $derived(filePath.split(/[/\\]/).pop() || filePath || 'unknown');
+	const oldString = $derived(toolInput.input.old_string || '');
+	const newString = $derived(toolInput.input.new_string || '');
+	const replaceAll = $derived(toolInput.input.replace_all || false);
 
-	const badges = replaceAll ? [{ text: 'Replace All', color: 'bg-amber-100 dark:bg-amber-900 text-amber-700 dark:text-amber-300' }] : [];
+	const badges = $derived(replaceAll ? [{ text: 'Replace All', color: 'bg-amber-100 dark:bg-amber-900 text-amber-700 dark:text-amber-300' }] : []);
 </script>
 
 <FileHeader

package/frontend/lib/components/chat/tools/ExitPlanModeTool.svelte

@@ -5,7 +5,7 @@
 
 	const { toolInput }: { toolInput: ExitPlanModeToolInput } = $props();
 
-	const plan = (toolInput.input as any).plan as string || '';
+	const plan = $derived((toolInput.input as any).plan as string || '');
 </script>
 
 <div class="bg-white dark:bg-slate-800 rounded-md border border-slate-200/60 dark:border-slate-700/60 p-3 mb-4">

package/frontend/lib/components/chat/tools/GlobTool.svelte

@@ -6,26 +6,26 @@
 
 	const { toolInput }: { toolInput: GlobToolInput } = $props();
 
-	const pattern = toolInput.input.pattern || '';
-	const searchPath = toolInput.input.path || 'current directory';
+	const pattern = $derived(toolInput.input.pattern || '');
+	const searchPath = $derived(toolInput.input.path || 'current directory');
 
 	// Parse the pattern to get a readable description
-	function getPatternDescription(pattern: string): string {
-		if (pattern.includes('**/*.')) {
-			const ext = pattern.split('**/*.')[1];
+	function getPatternDescription(p: string): string {
+		if (p.includes('**/*.')) {
+			const ext = p.split('**/*.')[1];
 			return `all .${ext} files`;
-		} else if (pattern.includes('**/')) {
-			const rest = pattern.split('**/')[1];
+		} else if (p.includes('**/')) {
+			const rest = p.split('**/')[1];
 			return `all ${rest} in subdirectories`;
-		} else if (pattern.includes('*.')) {
-			const ext = pattern.split('*.')[1];
+		} else if (p.includes('*.')) {
+			const ext = p.split('*.')[1];
 			return `.${ext} files`;
 		}
-		return pattern;
+		return p;
 	}
 
-	const patternDescription = getPatternDescription(pattern);
-	const formattedPath = formatPath(searchPath);
+	const patternDescription = $derived(getPatternDescription(pattern));
+	const formattedPath = $derived(formatPath(searchPath));
 </script>
 
 <div class="bg-white dark:bg-slate-800 rounded-md border border-slate-200/60 dark:border-slate-700/60 p-3">