feat: enhance participant management and presence handling across components

Author: ralyodio

apps/desktop/src/renderer/components/capture/CapturePreview.tsx

@@ -201,9 +201,11 @@ export function CapturePreview({
       allowControl: Boolean(session?.settings?.allowControl),
       onViewerJoined: (viewerId: string) => {
         console.log('[CapturePreview] Viewer joined:', viewerId);
+        void refreshSession();
       },
       onViewerLeft: (viewerId: string) => {
         console.log('[CapturePreview] Viewer left:', viewerId);
+        void refreshSession();
       },
       onInputReceived: (_viewerId: string, input: InputMessage) => {
         void injectEvent(input.event);
@@ -212,8 +214,14 @@ export function CapturePreview({
         // TODO: Update remote cursor position
       },
     }),
-    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-    [session?.id, currentUserId, stream, session?.settings?.allowControl, injectEvent]
+    [
+      session?.id,
+      currentUserId,
+      stream,
+      session?.settings.allowControl,
+      injectEvent,
+      refreshSession,
+    ]
   );
 
   // Always call both hooks (Rules of Hooks) — use results from the active one
@@ -1085,6 +1093,7 @@ export function CapturePreview({
         <ChatPanel
           sessionId={session.id}
           currentUserId={currentUserId}
+          participants={participants.filter((p) => !p.left_at)}
           isHost={canModerateSession}
           mutedParticipants={mutedParticipants}
           onGrantControl={

apps/desktop/src/renderer/components/chat/ChatPanel.tsx

@@ -22,6 +22,7 @@ interface ChatPanelProps {
   sessionId: string;
   currentUserId?: string | null;
   participantId?: string;
+  participants?: SessionParticipant[];
   isCollapsed?: boolean;
   onToggleCollapse?: () => void;
   isHost?: boolean;
@@ -38,6 +39,7 @@ export function ChatPanel({
   sessionId,
   currentUserId,
   participantId,
+  participants: participantsProp,
   isCollapsed: controlledCollapsed,
   onToggleCollapse,
   isHost = false,
@@ -56,9 +58,11 @@ export function ChatPanel({
       participantId,
     });
 
-  const { participants, isLoading: participantsLoading } = useParticipants({
+  const { participants: liveParticipants, isLoading: participantsLoading } = useParticipants({
     sessionId,
   });
+  const participants = participantsProp ?? liveParticipants;
+  const participantsLoadingState = participantsProp ? false : participantsLoading;
 
   // Message input state
   const [inputValue, setInputValue] = useState('');
@@ -186,7 +190,7 @@ export function ChatPanel({
         participants={participants}
         currentUserId={currentUserId}
         currentParticipantId={participantId}
-        isLoading={participantsLoading}
+        isLoading={participantsLoadingState}
         isHost={isHost}
         mutedParticipants={mutedParticipants}
         onGrantControl={onGrantControl}

apps/desktop/src/renderer/components/chat/useParticipants.test.ts

@@ -0,0 +1,79 @@
+import { renderHook, act } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import type { SessionParticipant } from '@pairux/shared-types';
+import { useParticipants } from './useParticipants';
+
+const mockInvoke = vi.fn();
+
+vi.mock('@/lib/ipc', () => ({
+  getElectronAPI: () => ({
+    invoke: mockInvoke,
+  }),
+}));
+
+function makeParticipant(
+  overrides: Partial<SessionParticipant> & Pick<SessionParticipant, 'id' | 'joined_at'>
+): SessionParticipant {
+  return {
+    id: overrides.id,
+    session_id: overrides.session_id ?? 'session-1',
+    user_id: overrides.user_id ?? null,
+    display_name: overrides.display_name ?? overrides.id,
+    role: overrides.role ?? 'viewer',
+    control_state: overrides.control_state ?? 'view-only',
+    is_backup_host: overrides.is_backup_host ?? false,
+    joined_at: overrides.joined_at,
+    left_at: overrides.left_at ?? null,
+    last_seen_at: overrides.last_seen_at ?? null,
+    connection_status: overrides.connection_status ?? 'connected',
+  } as SessionParticipant;
+}
+
+describe('chat/useParticipants (desktop)', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it('filters role=left participants and refreshes on polling', async () => {
+    mockInvoke
+      .mockResolvedValueOnce({
+        success: true,
+        participants: [
+          makeParticipant({ id: 'host', role: 'host', joined_at: '2024-01-01T10:00:00Z' }),
+          makeParticipant({ id: 'viewer', joined_at: '2024-01-01T10:01:00Z' }),
+        ],
+      })
+      .mockResolvedValueOnce({
+        success: true,
+        participants: [
+          makeParticipant({ id: 'host', role: 'host', joined_at: '2024-01-01T10:00:00Z' }),
+          makeParticipant({
+            id: 'viewer',
+            joined_at: '2024-01-01T10:01:00Z',
+            left_at: '2024-01-01T10:05:00Z',
+          }),
+        ],
+      });
+
+    const { result, unmount } = renderHook(() => useParticipants({ sessionId: 'session-1' }));
+
+    await act(async () => {
+      await Promise.resolve();
+    });
+    expect(result.current.participants.map((p) => p.id)).toEqual(['host', 'viewer']);
+
+    await act(async () => {
+      vi.advanceTimersByTime(5000);
+      await Promise.resolve();
+    });
+
+    expect(result.current.participants.map((p) => p.id)).toEqual(['host']);
+
+    unmount();
+  });
+});

apps/desktop/src/renderer/components/chat/useParticipants.ts

@@ -13,6 +13,19 @@ interface UseParticipantsReturn {
   refetch: () => Promise<void>;
 }
 
+function isActiveParticipant(participant: SessionParticipant): boolean {
+  return !participant.left_at;
+}
+
+function sortParticipants(participants: SessionParticipant[]): SessionParticipant[] {
+  participants.sort((a, b) => {
+    if (a.role === 'host' && b.role !== 'host') return -1;
+    if (b.role === 'host' && a.role !== 'host') return 1;
+    return new Date(a.joined_at).getTime() - new Date(b.joined_at).getTime();
+  });
+  return participants;
+}
+
 // Poll interval for participant updates (in ms)
 const POLL_INTERVAL = 5000;
 
@@ -33,15 +46,7 @@ export function useParticipants({ sessionId }: UseParticipantsOptions): UseParti
         throw new Error(result.error);
       }
 
-      // Filter to only active participants (no left_at)
-      const active = result.participants.filter((p: SessionParticipant) => !p.left_at);
-      // Sort: host first, then by joined_at
-      active.sort((a: SessionParticipant, b: SessionParticipant) => {
-        if (a.role === 'host' && b.role !== 'host') return -1;
-        if (b.role === 'host' && a.role !== 'host') return 1;
-        return new Date(a.joined_at).getTime() - new Date(b.joined_at).getTime();
-      });
-      setParticipants(active);
+      setParticipants(sortParticipants(result.participants.filter(isActiveParticipant)));
     } catch (err) {
       setError(err instanceof Error ? err.message : 'Failed to fetch participants');
     } finally {

apps/desktop/src/renderer/hooks/useWebRTCViewerAPI.ts

@@ -49,6 +49,7 @@ interface UseWebRTCViewerAPIOptions {
   onControlStateChange?: (state: ControlStateUI) => void;
   onCursorUpdate?: (cursor: CursorPositionMessage) => void;
   onKicked?: (reason?: string) => void;
+  onPresenceChange?: () => void;
 }
 
 interface UseWebRTCViewerAPIReturn {
@@ -78,6 +79,7 @@ export function useWebRTCViewerAPI({
   onControlStateChange,
   onCursorUpdate,
   onKicked,
+  onPresenceChange,
 }: UseWebRTCViewerAPIOptions): UseWebRTCViewerAPIReturn {
   const [connectionState, setConnectionState] = useState<ConnectionState>('idle');
   const [remoteStream, setRemoteStream] = useState<MediaStream | null>(null);
@@ -120,11 +122,13 @@ export function useWebRTCViewerAPI({
   const onControlStateChangeRef = useRef(onControlStateChange);
   const onCursorUpdateRef = useRef(onCursorUpdate);
   const onKickedRef = useRef(onKicked);
+  const onPresenceChangeRef = useRef(onPresenceChange);
   const disconnectRef = useRef<(() => void) | undefined>(undefined);
 
   onControlStateChangeRef.current = onControlStateChange;
   onCursorUpdateRef.current = onCursorUpdate;
   onKickedRef.current = onKicked;
+  onPresenceChangeRef.current = onPresenceChange;
 
   const getSignalSenderId = useCallback(() => signalSenderIdRef.current, []);
 
@@ -880,6 +884,7 @@ export function useWebRTCViewerAPI({
         const { presences } = JSON.parse(event.data as string) as {
           presences: { user_id: string; role: string }[];
         };
+        onPresenceChangeRef.current?.();
         for (const presence of presences) {
           if (presence.role === 'host') {
             console.log('[WebRTCViewer] Host is present:', presence.user_id);
@@ -895,6 +900,7 @@ export function useWebRTCViewerAPI({
         const { presences } = JSON.parse(event.data as string) as {
           presences: { user_id: string; role: string }[];
         };
+        onPresenceChangeRef.current?.();
         for (const presence of presences) {
           if (presence.role === 'host') {
             console.log('[WebRTCViewer] Host left');

apps/desktop/src/renderer/hooks/useWebRTCViewerSFUAPI.ts

@@ -40,6 +40,7 @@ interface UseWebRTCViewerSFUAPIOptions {
   onControlStateChange?: (state: ControlStateUI) => void;
   onCursorUpdate?: (cursor: CursorPositionMessage) => void;
   onKicked?: (reason?: string) => void;
+  onPresenceChange?: () => void;
 }
 
 interface UseWebRTCViewerSFUAPIReturn {
@@ -84,6 +85,7 @@ export function useWebRTCViewerSFUAPI({
   onControlStateChange,
   onCursorUpdate,
   onKicked,
+  onPresenceChange,
 }: UseWebRTCViewerSFUAPIOptions): UseWebRTCViewerSFUAPIReturn {
   const [connectionState, setConnectionState] = useState<ConnectionState>('idle');
   const [remoteStream, setRemoteStream] = useState<MediaStream | null>(null);
@@ -106,13 +108,15 @@ export function useWebRTCViewerSFUAPI({
   const onControlStateChangeRef = useRef(onControlStateChange);
   const onCursorUpdateRef = useRef(onCursorUpdate);
   const onKickedRef = useRef(onKicked);
+  const onPresenceChangeRef = useRef(onPresenceChange);
   const onStreamReadyRef = useRef(onStreamReady);
   const onStreamEndedRef = useRef(onStreamEnded);
   const disconnectRef = useRef<(() => void) | undefined>(undefined);
 
   onControlStateChangeRef.current = onControlStateChange;
   onCursorUpdateRef.current = onCursorUpdate;
   onKickedRef.current = onKicked;
+  onPresenceChangeRef.current = onPresenceChange;
   onStreamReadyRef.current = onStreamReady;
   onStreamEndedRef.current = onStreamEnded;
 
@@ -445,6 +449,7 @@ export function useWebRTCViewerSFUAPI({
 
       // Detect host disconnect/reconnect
       room.on(RoomEvent.ParticipantDisconnected, (participant: RemoteParticipant) => {
+        onPresenceChangeRef.current?.();
         try {
           const meta = JSON.parse(participant.metadata ?? '{}') as { role?: string };
           if (meta.role === 'host') {
@@ -456,6 +461,7 @@ export function useWebRTCViewerSFUAPI({
       });
 
       room.on(RoomEvent.ParticipantConnected, (participant: RemoteParticipant) => {
+        onPresenceChangeRef.current?.();
         try {
           const meta = JSON.parse(participant.metadata ?? '{}') as { role?: string };
           if (meta.role === 'host') {

apps/desktop/src/renderer/routes/viewer.test.tsx

@@ -1,5 +1,5 @@
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
-import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { render, screen, fireEvent, waitFor, act } from '@testing-library/react';
 import { MemoryRouter, Route, Routes } from 'react-router-dom';
 import { ViewerPage } from './viewer';
 import type { Session, SessionParticipant } from '@pairux/shared-types';
@@ -72,16 +72,18 @@ const mockSFUHookResult = {
 };
 
 vi.mock('@/hooks/useWebRTCViewerAPI', () => ({
-  useWebRTCViewerAPI: (opts: { onKicked?: () => void }) => {
+  useWebRTCViewerAPI: (opts: { onKicked?: () => void; onPresenceChange?: () => void }) => {
     // Store callback for testing
     (mockP2PHookResult as Record<string, unknown>)._onKicked = opts.onKicked;
+    (mockP2PHookResult as Record<string, unknown>)._onPresenceChange = opts.onPresenceChange;
     return mockP2PHookResult;
   },
 }));
 
 vi.mock('@/hooks/useWebRTCViewerSFUAPI', () => ({
-  useWebRTCViewerSFUAPI: (opts: { onKicked?: () => void }) => {
+  useWebRTCViewerSFUAPI: (opts: { onKicked?: () => void; onPresenceChange?: () => void }) => {
     (mockSFUHookResult as Record<string, unknown>)._onKicked = opts.onKicked;
+    (mockSFUHookResult as Record<string, unknown>)._onPresenceChange = opts.onPresenceChange;
     return mockSFUHookResult;
   },
 }));
@@ -404,4 +406,47 @@ describe('ViewerPage', () => {
 
     setIntervalSpy.mockRestore();
   });
+
+  it('refreshes participant list immediately on presence change', async () => {
+    mockInvoke
+      .mockResolvedValueOnce({
+        success: true,
+        session: makeSession(),
+        participants: makeParticipants(),
+      })
+      .mockResolvedValueOnce({
+        success: true,
+        session: makeSession(),
+        participants: [
+          ...makeParticipants(),
+          {
+            id: 'part-viewer-2',
+            session_id: 'session-1',
+            user_id: 'user-2',
+            role: 'viewer',
+            display_name: 'Viewer Two',
+            control_state: 'view-only',
+            is_backup_host: false,
+            connection_status: 'connected',
+            last_seen_at: null,
+            joined_at: new Date().toISOString(),
+            left_at: null,
+          } satisfies SessionParticipant,
+        ],
+      });
+
+    renderWithRouter();
+
+    await waitFor(() => {
+      expect(screen.getByText('2 participants')).toBeInTheDocument();
+    });
+
+    await act(async () => {
+      (mockP2PHookResult as unknown as { _onPresenceChange?: () => void })._onPresenceChange?.();
+    });
+
+    await waitFor(() => {
+      expect(screen.getByText('3 participants')).toBeInTheDocument();
+    });
+  });
 });