fix(socket): clear stuck "Reconnecting" indicator after invite accept

Accepting an invite switches the active org and immediately redirects into the
workspace, so the socket bootstraps under a just-rotated session. A transient
token-mint failure during that window got latched into a permanent state that
only a page reload could clear.

- Transient (non-401) token failures now fail the handshake fast and retry with
  a fresh token instead of hanging the full connect timeout; tracked via a
  failure-mode ref so connect_error keeps reconnecting rather than latching
  authFailed.
- The connect handler now clears isReconnecting, so a healthy socket can never
  sit showing "Reconnecting...".
- authFailed now auto-recovers with exponential backoff (nothing ever called
  retryConnection), so a transient 401 mid-rotation no longer needs a reload.

Author: waleedlatif1

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

@@ -11,7 +11,9 @@ import {
   useState,
 } from 'react'
 import { createLogger } from '@sim/logger'
+import { getErrorMessage } from '@sim/utils/errors'
 import { generateId } from '@sim/utils/id'
+import { backoffWithJitter } from '@sim/utils/retry'
 import { useParams } from 'next/navigation'
 import type { Socket } from 'socket.io-client'
 import { getSocketUrl } from '@/lib/core/utils/urls'
@@ -162,6 +164,16 @@ export function SocketProvider({ children, user }: SocketProviderProps) {
   const explicitWorkflowIdRef = useRef<string | null>(explicitWorkflowId)
   const joinControllerRef = useRef(new SocketJoinController())
   const joinRetryTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+  /**
+   * Why the most recent socket-token mint failed. A `transient` failure (rate
+   * limit, 5xx, network) passes a null token like a true auth failure does, but
+   * must keep Socket.IO reconnecting rather than latch `authFailed` — the server
+   * rejects both with the same "Authentication required" message, so the client
+   * can only tell them apart by remembering why the token was null.
+   */
+  const tokenFailureModeRef = useRef<'none' | 'auth' | 'transient'>('none')
+  const authRetryTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const authRetryAttemptRef = useRef(0)
 
   const params = useParams()
   const urlWorkflowId = params?.workflowId as string | undefined
@@ -361,21 +373,29 @@ export function SocketProvider({ children, user }: SocketProviderProps) {
           auth: async (cb) => {
             try {
               const freshToken = await generateSocketToken()
+              tokenFailureModeRef.current = 'none'
               cb({ token: freshToken })
             } catch (error) {
-              logger.error('Failed to generate fresh token for connection:', error)
               if (error instanceof Error && error.message === 'Authentication required') {
-                // True auth failure - pass null token, server will reject with "Authentication required"
-                cb({ token: null })
+                tokenFailureModeRef.current = 'auth'
+                logger.error('Failed to generate fresh token for connection:', error)
+              } else {
+                tokenFailureModeRef.current = 'transient'
+                logger.warn('Transient socket token failure, will retry connection', {
+                  error: getErrorMessage(error),
+                })
               }
-              // For server errors, don't call cb - connection will timeout and Socket.IO will retry
+              cb({ token: null })
             }
           },
         })
 
         socketInstance.on('connect', () => {
           setIsConnected(true)
           setIsConnecting(false)
+          setIsReconnecting(false)
+          tokenFailureModeRef.current = 'none'
+          authRetryAttemptRef.current = 0
           setCurrentSocketId(socketInstance.id ?? null)
           logger.info('Socket connected successfully', {
             socketId: socketInstance.id,
@@ -406,11 +426,11 @@ export function SocketProvider({ children, user }: SocketProviderProps) {
           setIsConnecting(false)
           logger.error('Socket connection error:', { message: error.message })
 
-          // Check if this is an authentication failure
           const isAuthError =
-            error.message?.includes('Token validation failed') ||
-            error.message?.includes('Authentication failed') ||
-            error.message?.includes('Authentication required')
+            tokenFailureModeRef.current !== 'transient' &&
+            (error.message?.includes('Token validation failed') ||
+              error.message?.includes('Authentication failed') ||
+              error.message?.includes('Authentication required'))
 
           if (isAuthError) {
             logger.warn(
@@ -737,6 +757,35 @@ export function SocketProvider({ children, user }: SocketProviderProps) {
     }
   }, [user?.id, authFailed])
 
+  /**
+   * Auto-recover from an auth failure. The token mint can 401 transiently while a
+   * session is mid-rotation (e.g. right after switching active organization on
+   * invite accept); without this the socket stays dead until a manual page reload,
+   * since no other caller invokes {@link retryConnection}. Retries with backoff so a
+   * genuine logged-out session re-mints lazily rather than hammering the endpoint.
+   */
+  useEffect(() => {
+    if (!authFailed) {
+      return
+    }
+
+    const attempt = authRetryAttemptRef.current
+    const delay = backoffWithJitter(attempt + 1, null, { baseMs: 1000, maxMs: 30000 })
+    authRetryTimeoutRef.current = setTimeout(() => {
+      authRetryTimeoutRef.current = null
+      authRetryAttemptRef.current = attempt + 1
+      logger.info('Auto-retrying socket connection after auth failure', { attempt })
+      setAuthFailed(false)
+    }, delay)
+
+    return () => {
+      if (authRetryTimeoutRef.current !== null) {
+        clearTimeout(authRetryTimeoutRef.current)
+        authRetryTimeoutRef.current = null
+      }
+    }
+  }, [authFailed])
+
   const hydrationPhase = useWorkflowRegistryStore((s) => s.hydration.phase)
 
   useEffect(() => {