Fix presence indicator showing wrong user on network disconnect

Root cause: When a user's network goes offline, the disconnect event would
try to call setAwarenessField, but this message can't be delivered since
the connection is already lost. Additionally, when users disappeared from
the awareness states array, they were completely removed from the UI rather
than being marked as disconnected.

Changes:
- Remove setAwarenessField call from disconnect event handler (already offline)
- Preserve users who disappear from awareness states as disconnected
- Merge previous presence state with current awareness data
- Users now show correct disconnected status when they go offline

This ensures network disconnect and browser close produce identical behavior:
both result in the correct user showing as disconnected (grey indicator).

Author: jhodapp

__tests__/components/ui/coaching-sessions/editor-cache-context.test.tsx

@@ -410,7 +410,7 @@ describe('EditorCacheProvider', () => {
       })
     })
 
-    it('should set disconnected status on disconnect event', async () => {
+    it('should NOT call setAwarenessField on disconnect event (already offline)', async () => {
       const { TiptapCollabProvider } = await import('@hocuspocus/provider')
       let disconnectCallback: (() => void) | undefined
 
@@ -449,13 +449,99 @@ describe('EditorCacheProvider', () => {
         disconnectCallback!()
       })
 
-      // Should update awareness with disconnected status
-      expect(mockProvider?.setAwarenessField).toHaveBeenCalledWith(
-        'presence',
-        expect.objectContaining({
-          status: 'disconnected'
-        })
+      // Should NOT call setAwarenessField because we're already disconnected
+      // The awareness protocol will handle removing stale clients via timeout
+      expect(mockProvider?.setAwarenessField).not.toHaveBeenCalled()
+    })
+
+    it('should mark users as disconnected when they disappear from awareness states', async () => {
+      const { TiptapCollabProvider } = await import('@hocuspocus/provider')
+      let awarenessCallback: ((data: any) => void) | undefined
+
+      vi.mocked(TiptapCollabProvider).mockImplementationOnce(function() {
+        const provider = {
+          on: vi.fn((event, callback) => {
+            if (event === 'awarenessChange') {
+              awarenessCallback = callback
+            }
+            return provider
+          }),
+          off: vi.fn(),
+          setAwarenessField: vi.fn(),
+          destroy: vi.fn(),
+          disconnect: vi.fn(),
+          connect: vi.fn()
+        }
+        return provider as any
+      })
+
+      let cacheRef: any = null
+
+      render(
+        <EditorCacheProvider sessionId="test-session">
+          <TestConsumer onCacheReady={(cache) => { cacheRef = cache }} />
+        </EditorCacheProvider>
       )
+
+      await waitFor(() => {
+        expect(awarenessCallback).toBeDefined()
+      })
+
+      // First, simulate both users being connected
+      act(() => {
+        awarenessCallback!({
+          states: [
+            {
+              clientId: 1,
+              presence: {
+                userId: 'user-1',
+                name: 'Test User',
+                relationshipRole: 'Coach',
+                color: '#ff0000',
+                isConnected: true
+              }
+            },
+            {
+              clientId: 2,
+              presence: {
+                userId: 'user-2',
+                name: 'Other User',
+                relationshipRole: 'Coachee',
+                color: '#00ff00',
+                isConnected: true
+              }
+            }
+          ]
+        })
+      })
+
+      // Verify both users are connected
+      expect(cacheRef?.presenceState.users.size).toBe(2)
+      expect(cacheRef?.presenceState.users.get('user-2')?.status).toBe('connected')
+
+      // Now simulate user-2 disappearing (network disconnect)
+      act(() => {
+        awarenessCallback!({
+          states: [
+            {
+              clientId: 1,
+              presence: {
+                userId: 'user-1',
+                name: 'Test User',
+                relationshipRole: 'Coach',
+                color: '#ff0000',
+                isConnected: true
+              }
+            }
+            // user-2 is no longer in the states array
+          ]
+        })
+      })
+
+      // User-2 should still be in the map but marked as disconnected
+      expect(cacheRef?.presenceState.users.size).toBe(2)
+      expect(cacheRef?.presenceState.users.get('user-2')?.status).toBe('disconnected')
+      expect(cacheRef?.presenceState.users.get('user-1')?.status).toBe('connected')
     })
   })
 })

src/components/ui/coaching-sessions/editor-cache-context.tsx

@@ -190,15 +190,41 @@ export const EditorCacheProvider: React.FC<EditorCacheProviderProps> = ({
             }
           });
 
-          setCache((prev) => ({
-            ...prev,
-            presenceState: {
-              ...prev.presenceState,
-              users: updatedUsers,
-              currentUser:
-                currentUserPresence || prev.presenceState.currentUser,
-            },
-          }));
+          // IMPORTANT: Preserve previous users who are no longer in states array
+          // as disconnected instead of removing them entirely.
+          // This ensures smooth UX when users go offline (they appear as disconnected
+          // rather than disappearing completely).
+          setCache((prev) => {
+            const mergedUsers = new Map(prev.presenceState.users);
+
+            // Mark users who disappeared from awareness as disconnected
+            for (const [userId, oldPresence] of prev.presenceState.users) {
+              if (!updatedUsers.has(userId) && oldPresence.status === 'connected') {
+                // User was connected but no longer in awareness states - mark as disconnected
+                mergedUsers.set(userId, {
+                  ...oldPresence,
+                  status: 'disconnected',
+                  isConnected: false,
+                  lastSeen: new Date()
+                });
+              }
+            }
+
+            // Overlay current awareness data (takes precedence)
+            for (const [userId, presence] of updatedUsers) {
+              mergedUsers.set(userId, presence);
+            }
+
+            return {
+              ...prev,
+              presenceState: {
+                ...prev.presenceState,
+                users: mergedUsers,
+                currentUser:
+                  currentUserPresence || prev.presenceState.currentUser,
+              },
+            };
+          });
         }
       );
 
@@ -216,8 +242,10 @@ export const EditorCacheProvider: React.FC<EditorCacheProviderProps> = ({
       });
 
       provider.on("disconnect", () => {
-        const disconnectedPresence = createDisconnectedPresence(userPresence);
-        provider.setAwarenessField("presence", disconnectedPresence);
+        // NOTE: Don't call setAwarenessField here - we're already disconnected
+        // so the message won't be delivered to other clients anyway.
+        // The awareness protocol will automatically remove our state via timeout.
+        // This event is just for local cleanup/logging if needed.
       });
 
       // Graceful disconnect on page unload