fix(socket): sync deploy button state across collaborators

Broadcast workflow-deployed events via socket so all connected users
invalidate their deployment query cache when any user deploys, undeploys,
activates a version, or triggers a deploy through chat/form endpoints.

Author: waleedlatif1

apps/sim/app/api/chat/manage/[id]/route.ts

@@ -9,7 +9,7 @@ import { getSession } from '@/lib/auth'
 import { isDev } from '@/lib/core/config/feature-flags'
 import { encryptSecret } from '@/lib/core/security/encryption'
 import { getEmailDomain } from '@/lib/core/utils/urls'
-import { performChatUndeploy } from '@/lib/workflows/orchestration'
+import { notifySocketDeploymentChanged, performChatUndeploy } from '@/lib/workflows/orchestration'
 import { deployWorkflow } from '@/lib/workflows/persistence/utils'
 import { checkChatAccess } from '@/app/api/chat/utils'
 import { createErrorResponse, createSuccessResponse } from '@/app/api/workflows/utils'
@@ -155,6 +155,7 @@ export async function PATCH(request: NextRequest, { params }: { params: Promise<
         logger.info(
           `Redeployed workflow ${existingChat[0].workflowId} for chat update (v${deployResult.version})`
         )
+        await notifySocketDeploymentChanged(existingChat[0].workflowId)
       }
 
       let encryptedPassword

apps/sim/app/api/form/route.ts

@@ -10,6 +10,7 @@ import { isDev } from '@/lib/core/config/feature-flags'
 import { encryptSecret } from '@/lib/core/security/encryption'
 import { getEmailDomain } from '@/lib/core/utils/urls'
 import { generateId } from '@/lib/core/utils/uuid'
+import { notifySocketDeploymentChanged } from '@/lib/workflows/orchestration'
 import { deployWorkflow } from '@/lib/workflows/persistence/utils'
 import {
   checkWorkflowAccessForFormCreation,
@@ -152,6 +153,8 @@ export async function POST(request: NextRequest) {
         `${workflowRecord.isDeployed ? 'Redeployed' : 'Auto-deployed'} workflow ${workflowId} for form (v${result.version})`
       )
 
+      await notifySocketDeploymentChanged(workflowId)
+
       let encryptedPassword = null
       if (authType === 'password' && password) {
         const { encrypted } = await encryptSecret(password)

apps/sim/app/workspace/providers/socket-provider.tsx

@@ -102,6 +102,7 @@ interface SocketContextType {
   onWorkflowDeleted: (handler: (data: any) => void) => void
   onWorkflowReverted: (handler: (data: any) => void) => void
   onWorkflowUpdated: (handler: (data: any) => void) => void
+  onWorkflowDeployed: (handler: (data: any) => void) => void
   onOperationConfirmed: (handler: (data: any) => void) => void
   onOperationFailed: (handler: (data: any) => void) => void
 }
@@ -132,6 +133,7 @@ const SocketContext = createContext<SocketContextType>({
   onWorkflowDeleted: () => {},
   onWorkflowReverted: () => {},
   onWorkflowUpdated: () => {},
+  onWorkflowDeployed: () => {},
   onOperationConfirmed: () => {},
   onOperationFailed: () => {},
 })
@@ -176,6 +178,7 @@ export function SocketProvider({ children, user }: SocketProviderProps) {
     workflowDeleted?: (data: any) => void
     workflowReverted?: (data: any) => void
     workflowUpdated?: (data: any) => void
+    workflowDeployed?: (data: any) => void
     operationConfirmed?: (data: any) => void
     operationFailed?: (data: any) => void
   }>({})
@@ -550,6 +553,11 @@ export function SocketProvider({ children, user }: SocketProviderProps) {
           eventHandlers.current.workflowUpdated?.(data)
         })
 
+        socketInstance.on('workflow-deployed', (data) => {
+          logger.info(`Workflow ${data.workflowId} deployment state changed`)
+          eventHandlers.current.workflowDeployed?.(data)
+        })
+
         const rehydrateWorkflowStores = async (workflowId: string, workflowState: any) => {
           const [
             { useOperationQueueStore },
@@ -994,6 +1002,10 @@ export function SocketProvider({ children, user }: SocketProviderProps) {
     eventHandlers.current.workflowUpdated = handler
   }, [])
 
+  const onWorkflowDeployed = useCallback((handler: (data: any) => void) => {
+    eventHandlers.current.workflowDeployed = handler
+  }, [])
+
   const onOperationConfirmed = useCallback((handler: (data: any) => void) => {
     eventHandlers.current.operationConfirmed = handler
   }, [])
@@ -1029,6 +1041,7 @@ export function SocketProvider({ children, user }: SocketProviderProps) {
       onWorkflowDeleted,
       onWorkflowReverted,
       onWorkflowUpdated,
+      onWorkflowDeployed,
       onOperationConfirmed,
       onOperationFailed,
     }),
@@ -1058,6 +1071,7 @@ export function SocketProvider({ children, user }: SocketProviderProps) {
       onWorkflowDeleted,
       onWorkflowReverted,
       onWorkflowUpdated,
+      onWorkflowDeployed,
       onOperationConfirmed,
       onOperationFailed,
     ]

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

@@ -1,12 +1,14 @@
 import { useCallback, useEffect, useRef } from 'react'
 import { createLogger } from '@sim/logger'
+import { useQueryClient } from '@tanstack/react-query'
 import type { Edge } from 'reactflow'
 import { useShallow } from 'zustand/react/shallow'
 import { useSession } from '@/lib/auth/auth-client'
 import { generateId } from '@/lib/core/utils/uuid'
 import { useSocket } from '@/app/workspace/providers/socket-provider'
 import { getBlock } from '@/blocks'
 import { normalizeName, RESERVED_BLOCK_NAMES } from '@/executor/constants'
+import { invalidateDeploymentQueries } from '@/hooks/queries/deployments'
 import { useUndoRedo } from '@/hooks/use-undo-redo'
 import {
   BLOCK_OPERATIONS,
@@ -34,6 +36,7 @@ import { findAllDescendantNodes, isBlockProtected } from '@/stores/workflows/wor
 const logger = createLogger('CollaborativeWorkflow')
 
 export function useCollaborativeWorkflow() {
+  const queryClient = useQueryClient()
   const undoRedo = useUndoRedo()
   const isUndoRedoInProgress = useRef(false)
   const lastDiffOperationId = useRef<string | null>(null)
@@ -125,6 +128,7 @@ export function useCollaborativeWorkflow() {
     onWorkflowDeleted,
     onWorkflowReverted,
     onWorkflowUpdated,
+    onWorkflowDeployed,
     onOperationConfirmed,
     onOperationFailed,
   } = useSocket()
@@ -645,6 +649,15 @@ export function useCollaborativeWorkflow() {
       }
     }
 
+    const handleWorkflowDeployed = (data: any) => {
+      const { workflowId } = data
+      logger.info(`Workflow ${workflowId} deployment state changed`)
+
+      if (workflowId !== activeWorkflowId) return
+
+      invalidateDeploymentQueries(queryClient, workflowId)
+    }
+
     const handleOperationConfirmed = (data: any) => {
       const { operationId } = data
       logger.debug('Operation confirmed', { operationId })
@@ -664,6 +677,7 @@ export function useCollaborativeWorkflow() {
     onWorkflowDeleted(handleWorkflowDeleted)
     onWorkflowReverted(handleWorkflowReverted)
     onWorkflowUpdated(handleWorkflowUpdated)
+    onWorkflowDeployed(handleWorkflowDeployed)
     onOperationConfirmed(handleOperationConfirmed)
     onOperationFailed(handleOperationFailed)
   }, [
@@ -673,9 +687,11 @@ export function useCollaborativeWorkflow() {
     onWorkflowDeleted,
     onWorkflowReverted,
     onWorkflowUpdated,
+    onWorkflowDeployed,
     onOperationConfirmed,
     onOperationFailed,
     activeWorkflowId,
+    queryClient,
     confirmOperation,
     failOperation,
     emitWorkflowOperation,

apps/sim/lib/workflows/orchestration/deploy.ts

@@ -31,6 +31,26 @@ import type { WorkflowState } from '@/stores/workflows/workflow/types'
 
 const logger = createLogger('DeployOrchestration')
 
+/**
+ * Notifies the socket server that a workflow's deployment state has changed,
+ * so all connected clients can refresh their deployment queries.
+ */
+export async function notifySocketDeploymentChanged(workflowId: string): Promise<void> {
+  try {
+    const socketServerUrl = env.SOCKET_SERVER_URL || 'http://localhost:3002'
+    await fetch(`${socketServerUrl}/api/workflow-deployed`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'x-api-key': env.INTERNAL_API_SECRET,
+      },
+      body: JSON.stringify({ workflowId }),
+    })
+  } catch (error) {
+    logger.error('Error sending workflow deployed event to socket server', error)
+  }
+}
+
 export interface PerformFullDeployParams {
   workflowId: string
   userId: string
@@ -222,6 +242,8 @@ export async function performFullDeploy(
     request,
   })
 
+  await notifySocketDeploymentChanged(workflowId)
+
   return {
     success: true,
     deployedAt,
@@ -296,6 +318,8 @@ export async function performFullUndeploy(
     description: `Undeployed workflow "${(workflowData.name as string) || workflowId}"`,
   })
 
+  await notifySocketDeploymentChanged(workflowId)
+
   return { success: true }
 }
 
@@ -509,6 +533,8 @@ export async function performActivateVersion(
     },
   })
 
+  await notifySocketDeploymentChanged(workflowId)
+
   return {
     success: true,
     deployedAt: result.deployedAt,

apps/sim/lib/workflows/orchestration/index.ts

@@ -15,6 +15,7 @@ export {
   type PerformFullUndeployResult,
   type PerformRevertToVersionParams,
   type PerformRevertToVersionResult,
+  notifySocketDeploymentChanged,
   performActivateVersion,
   performFullDeploy,
   performFullUndeploy,

apps/sim/socket/rooms/memory-manager.ts

@@ -238,4 +238,21 @@ export class MemoryRoomManager implements IRoomManager {
 
     logger.info(`Notified ${room.users.size} users about workflow update: ${workflowId}`)
   }
+
+  async handleWorkflowDeployed(workflowId: string): Promise<void> {
+    logger.info(`Handling workflow deployed notification for ${workflowId}`)
+
+    const room = this.workflowRooms.get(workflowId)
+    if (!room) {
+      logger.debug(`No active room found for deployed workflow ${workflowId}`)
+      return
+    }
+
+    this._io.to(workflowId).emit('workflow-deployed', {
+      workflowId,
+      timestamp: Date.now(),
+    })
+
+    logger.info(`Notified ${room.users.size} users about workflow deployment change: ${workflowId}`)
+  }
 }

apps/sim/socket/rooms/redis-manager.ts

@@ -439,4 +439,24 @@ export class RedisRoomManager implements IRoomManager {
     const userCount = await this.getUniqueUserCount(workflowId)
     logger.info(`Notified ${userCount} users about workflow update: ${workflowId}`)
   }
+
+  async handleWorkflowDeployed(workflowId: string): Promise<void> {
+    logger.info(`Handling workflow deployed notification for ${workflowId}`)
+
+    const hasRoom = await this.hasWorkflowRoom(workflowId)
+    if (!hasRoom) {
+      logger.debug(`No active room found for deployed workflow ${workflowId}`)
+      return
+    }
+
+    this._io.to(workflowId).emit('workflow-deployed', {
+      workflowId,
+      timestamp: Date.now(),
+    })
+
+    const userCount = await this.getUniqueUserCount(workflowId)
+    logger.info(
+      `Notified ${userCount} users about workflow deployment change: ${workflowId}`
+    )
+  }
 }

apps/sim/socket/rooms/types.ts

@@ -138,4 +138,9 @@ export interface IRoomManager {
    * Handle workflow update - notify users
    */
   handleWorkflowUpdate(workflowId: string): Promise<void>
+
+  /**
+   * Handle workflow deployment change - notify users to refresh deployment state
+   */
+  handleWorkflowDeployed(workflowId: string): Promise<void>
 }

apps/sim/socket/routes/http.ts

@@ -122,6 +122,20 @@ export function createHttpHandler(roomManager: IRoomManager, logger: Logger) {
       return
     }
 
+    // Handle workflow deployment change notifications from the main API
+    if (req.method === 'POST' && req.url === '/api/workflow-deployed') {
+      try {
+        const body = await readRequestBody(req)
+        const { workflowId } = JSON.parse(body)
+        await roomManager.handleWorkflowDeployed(workflowId)
+        sendSuccess(res)
+      } catch (error) {
+        logger.error('Error handling workflow deployed notification:', error)
+        sendError(res, 'Failed to process deployment notification')
+      }
+      return
+    }
+
     // Handle workflow revert notifications from the main API
     if (req.method === 'POST' && req.url === '/api/workflow-reverted') {
       try {