fix(sockets): useCollabWorkflow cleanup, variables store logic simplification (#1154)

* fix(sockets): useCollabWorkflow cleanup, variables store logic simplification

* remove unecessary check

Author: icecrasher321

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/variables/variables.tsx

@@ -38,15 +38,8 @@ import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
 const logger = createLogger('Variables')
 
 export function Variables() {
-  const { activeWorkflowId, workflows } = useWorkflowRegistry()
-  const {
-    variables: storeVariables,
-    addVariable,
-    updateVariable,
-    deleteVariable,
-    duplicateVariable,
-    getVariablesByWorkflowId,
-  } = useVariablesStore()
+  const { activeWorkflowId } = useWorkflowRegistry()
+  const { getVariablesByWorkflowId } = useVariablesStore()
   const {
     collaborativeUpdateVariable,
     collaborativeAddVariable,

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx

@@ -36,7 +36,6 @@ import { useStreamCleanup } from '@/hooks/use-stream-cleanup'
 import { useWorkspacePermissions } from '@/hooks/use-workspace-permissions'
 import { useCopilotStore } from '@/stores/copilot/store'
 import { useExecutionStore } from '@/stores/execution/store'
-import { useVariablesStore } from '@/stores/panel/variables/store'
 import { useGeneralStore } from '@/stores/settings/general/store'
 import { useWorkflowDiffStore } from '@/stores/workflow-diff/store'
 import { hasWorkflowsInitiallyLoaded, useWorkflowRegistry } from '@/stores/workflows/registry/store'
@@ -178,8 +177,6 @@ const WorkflowContent = React.memo(() => {
     collaborativeSetSubblockValue,
   } = useCollaborativeWorkflow()
 
-  const { resetLoaded: resetVariablesLoaded } = useVariablesStore()
-
   // Execution and debug mode state
   const { activeBlockIds, pendingBlocks } = useExecutionStore()
   const { isDebugModeEnabled } = useGeneralStore()
@@ -960,9 +957,6 @@ const WorkflowContent = React.memo(() => {
       const { activeWorkflowId } = useWorkflowRegistry.getState()
 
       if (activeWorkflowId !== currentId) {
-        // Only reset variables when actually switching workflows
-        resetVariablesLoaded()
-
         // Clear workflow diff store when switching workflows
         const { clearDiff } = useWorkflowDiffStore.getState()
         clearDiff()
@@ -975,15 +969,7 @@ const WorkflowContent = React.memo(() => {
     }
 
     validateAndNavigate()
-  }, [
-    params.workflowId,
-    workflows,
-    isLoading,
-    setActiveWorkflow,
-    createWorkflow,
-    router,
-    resetVariablesLoaded,
-  ])
+  }, [params.workflowId, workflows, isLoading, setActiveWorkflow, createWorkflow, router])
 
   // Transform blocks and loops into ReactFlow nodes
   const nodes = useMemo(() => {

apps/sim/components/ui/tag-dropdown.tsx

@@ -298,16 +298,9 @@ export const TagDropdown: React.FC<TagDropdownProps> = ({
   const workflowId = useWorkflowRegistry((state) => state.activeWorkflowId)
 
   const getVariablesByWorkflowId = useVariablesStore((state) => state.getVariablesByWorkflowId)
-  const loadVariables = useVariablesStore((state) => state.loadVariables)
   const variables = useVariablesStore((state) => state.variables)
   const workflowVariables = workflowId ? getVariablesByWorkflowId(workflowId) : []
 
-  useEffect(() => {
-    if (workflowId) {
-      loadVariables(workflowId)
-    }
-  }, [workflowId, loadVariables])
-
   const searchTerm = useMemo(() => {
     const textBeforeCursor = inputValue.slice(0, cursorPosition)
     const match = textBeforeCursor.match(/<([^>]*)$/)

apps/sim/hooks/use-collaborative-workflow.ts

@@ -60,6 +60,10 @@ export function useCollaborativeWorkflow() {
     cancelOperationsForVariable,
   } = useOperationQueue()
 
+  const isInActiveRoom = useCallback(() => {
+    return !!currentWorkflowId && activeWorkflowId === currentWorkflowId
+  }, [currentWorkflowId, activeWorkflowId])
+
   // Clear position timestamps when switching workflows
   // Note: Workflow joining is now handled automatically by socket connect event based on URL
   useEffect(() => {
@@ -470,6 +474,16 @@ export function useCollaborativeWorkflow() {
         return
       }
 
+      if (!isInActiveRoom()) {
+        logger.debug('Skipping operation - not in active workflow', {
+          currentWorkflowId,
+          activeWorkflowId,
+          operation,
+          target,
+        })
+        return
+      }
+
       const operationId = crypto.randomUUID()
 
       addToQueue({
@@ -485,7 +499,14 @@ export function useCollaborativeWorkflow() {
 
       localAction()
     },
-    [addToQueue, session?.user?.id, isShowingDiff]
+    [
+      addToQueue,
+      session?.user?.id,
+      isShowingDiff,
+      activeWorkflowId,
+      isInActiveRoom,
+      currentWorkflowId,
+    ]
   )
 
   const executeQueuedDebouncedOperation = useCallback(
@@ -497,11 +518,21 @@ export function useCollaborativeWorkflow() {
         return
       }
 
+      if (!isInActiveRoom()) {
+        logger.debug('Skipping debounced operation - not in active workflow', {
+          currentWorkflowId,
+          activeWorkflowId,
+          operation,
+          target,
+        })
+        return
+      }
+
       localAction()
 
       emitWorkflowOperation(operation, target, payload)
     },
-    [emitWorkflowOperation, isShowingDiff]
+    [emitWorkflowOperation, isShowingDiff, isInActiveRoom, currentWorkflowId, activeWorkflowId]
   )
 
   const collaborativeAddBlock = useCallback(
@@ -521,6 +552,14 @@ export function useCollaborativeWorkflow() {
         return
       }
 
+      if (!isInActiveRoom()) {
+        logger.debug('Skipping collaborative add block - not in active workflow', {
+          currentWorkflowId,
+          activeWorkflowId,
+        })
+        return
+      }
+
       const blockConfig = getBlock(type)
 
       // Handle loop/parallel blocks that don't use BlockConfig
@@ -647,7 +686,15 @@ export function useCollaborativeWorkflow() {
         workflowStore.addEdge(autoConnectEdge)
       }
     },
-    [workflowStore, emitWorkflowOperation, addToQueue, session?.user?.id, isShowingDiff]
+    [
+      workflowStore,
+      activeWorkflowId,
+      addToQueue,
+      session?.user?.id,
+      isShowingDiff,
+      isInActiveRoom,
+      currentWorkflowId,
+    ]
   )
 
   const collaborativeRemoveBlock = useCallback(
@@ -674,14 +721,7 @@ export function useCollaborativeWorkflow() {
         workflowStore.updateBlockName(id, name)
       })
     },
-    [
-      executeQueuedOperation,
-      workflowStore,
-      addToQueue,
-      subBlockStore,
-      activeWorkflowId,
-      session?.user?.id,
-    ]
+    [executeQueuedOperation, workflowStore]
   )
 
   const collaborativeToggleBlockEnabled = useCallback(
@@ -795,7 +835,7 @@ export function useCollaborativeWorkflow() {
         return
       }
 
-      if (!currentWorkflowId || activeWorkflowId !== currentWorkflowId) {
+      if (!isInActiveRoom()) {
         logger.debug('Skipping subblock update - not in active workflow', {
           currentWorkflowId,
           activeWorkflowId,
@@ -847,12 +887,12 @@ export function useCollaborativeWorkflow() {
     },
     [
       subBlockStore,
-      emitSubblockUpdate,
       currentWorkflowId,
       activeWorkflowId,
       addToQueue,
       session?.user?.id,
       isShowingDiff,
+      isInActiveRoom,
     ]
   )
 
@@ -861,7 +901,7 @@ export function useCollaborativeWorkflow() {
     (blockId: string, subblockId: string, value: any) => {
       if (isApplyingRemoteChange.current) return
 
-      if (!currentWorkflowId || activeWorkflowId !== currentWorkflowId) {
+      if (!isInActiveRoom()) {
         logger.debug('Skipping tag selection - not in active workflow', {
           currentWorkflowId,
           activeWorkflowId,
@@ -884,16 +924,32 @@ export function useCollaborativeWorkflow() {
           target: 'subblock',
           payload: { blockId, subblockId, value },
         },
-        workflowId: activeWorkflowId,
+        workflowId: activeWorkflowId || '',
         userId: session?.user?.id || 'unknown',
         immediate: true,
       })
     },
-    [subBlockStore, addToQueue, currentWorkflowId, activeWorkflowId, session?.user?.id]
+    [
+      subBlockStore,
+      addToQueue,
+      currentWorkflowId,
+      activeWorkflowId,
+      session?.user?.id,
+      isInActiveRoom,
+    ]
   )
 
   const collaborativeDuplicateBlock = useCallback(
     (sourceId: string) => {
+      if (!isInActiveRoom()) {
+        logger.debug('Skipping duplicate block - not in active workflow', {
+          currentWorkflowId,
+          activeWorkflowId,
+          sourceId,
+        })
+        return
+      }
+
       const sourceBlock = workflowStore.blocks[sourceId]
       if (!sourceBlock) return
 
@@ -995,7 +1051,14 @@ export function useCollaborativeWorkflow() {
         }
       })
     },
-    [executeQueuedOperation, workflowStore, subBlockStore, activeWorkflowId]
+    [
+      executeQueuedOperation,
+      workflowStore,
+      subBlockStore,
+      activeWorkflowId,
+      isInActiveRoom,
+      currentWorkflowId,
+    ]
   )
 
   const collaborativeUpdateLoopType = useCallback(

apps/sim/stores/index.ts

@@ -231,7 +231,7 @@ export const resetAllStores = () => {
   useConsoleStore.setState({ entries: [], isOpen: false })
   useCopilotStore.setState({ messages: [], isSendingMessage: false, error: null })
   useCustomToolsStore.setState({ tools: {} })
-  useVariablesStore.getState().resetLoaded() // Reset variables store tracking
+  // Variables store has no tracking to reset; registry hydrates
   useSubscriptionStore.getState().reset() // Reset subscription store
 }