improvement(presence): show presence for the same user in another tab, fix z-index of multiplayer cursor to fall behind panel,terminal,sidebar but above blocks, improved connection detection

Author: waleedlatif1

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

@@ -2,7 +2,6 @@
 
 import { memo, useMemo } from 'react'
 import { useViewport } from 'reactflow'
-import { useSession } from '@/lib/auth/auth-client'
 import { getUserColor } from '@/lib/workspaces/colors'
 import { usePreventZoom } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks'
 import { useSocket } from '@/app/workspace/providers/socket-provider'
@@ -20,30 +19,31 @@ interface CursorRenderData {
 }
 
 const CursorsComponent = () => {
-  const { presenceUsers } = useSocket()
+  const { presenceUsers, currentSocketId } = useSocket()
   const viewport = useViewport()
-  const session = useSession()
-  const currentUserId = session.data?.user?.id
   const preventZoomRef = usePreventZoom()
 
   const cursors = useMemo<CursorRenderData[]>(() => {
     return presenceUsers
       .filter((user): user is typeof user & { cursor: CursorPoint } => Boolean(user.cursor))
-      .filter((user) => user.userId !== currentUserId)
+      .filter((user) => user.socketId !== currentSocketId)
       .map((user) => ({
         id: user.socketId,
         name: user.userName?.trim() || 'Collaborator',
         cursor: user.cursor,
         color: getUserColor(user.userId),
       }))
-  }, [currentUserId, presenceUsers])
+  }, [currentSocketId, presenceUsers])
 
   if (!cursors.length) {
     return null
   }
 
   return (
-    <div ref={preventZoomRef} className='pointer-events-none absolute inset-0 z-30 select-none'>
+    <div
+      ref={preventZoomRef}
+      className='pointer-events-none absolute inset-0 z-[5] select-none overflow-hidden'
+    >
       {cursors.map(({ id, name, cursor, color }) => {
         const x = cursor.x * viewport.zoom + viewport.x
         const y = cursor.y * viewport.zoom + viewport.y

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/workflow-item/avatars/avatars.tsx

@@ -2,7 +2,6 @@
 
 import { type CSSProperties, useMemo } from 'react'
 import { Avatar, AvatarFallback, AvatarImage, Tooltip } from '@/components/emcn'
-import { useSession } from '@/lib/auth/auth-client'
 import { getUserColor } from '@/lib/workspaces/colors'
 import { useSocket } from '@/app/workspace/providers/socket-provider'
 import { SIDEBAR_WIDTH } from '@/stores/constants'
@@ -81,9 +80,7 @@ function UserAvatar({ user, index }: UserAvatarProps) {
  * @returns Avatar stack for workflow presence
  */
 export function Avatars({ workflowId }: AvatarsProps) {
-  const { presenceUsers, currentWorkflowId } = useSocket()
-  const { data: session } = useSession()
-  const currentUserId = session?.user?.id
+  const { presenceUsers, currentWorkflowId, currentSocketId } = useSocket()
   const sidebarWidth = useSidebarStore((state) => state.sidebarWidth)
 
   /**
@@ -99,14 +96,14 @@ export function Avatars({ workflowId }: AvatarsProps) {
 
   /**
    * Only show presence for the currently active workflow.
-   * Filter out the current user from the list.
+   * Filter out the current socket connection (allows same user's other tabs to appear).
    */
   const workflowUsers = useMemo(() => {
     if (currentWorkflowId !== workflowId) {
       return []
     }
-    return presenceUsers.filter((user) => user.userId !== currentUserId)
-  }, [presenceUsers, currentWorkflowId, workflowId, currentUserId])
+    return presenceUsers.filter((user) => user.socketId !== currentSocketId)
+  }, [presenceUsers, currentWorkflowId, workflowId, currentSocketId])
 
   /**
    * Calculate visible users and overflow count