tmp broken

src/frontend/src/features/rooms/components/Conference.tsx

@@ -285,22 +285,20 @@ export const Conference = ({
     }
   }, [room, encryptionEnabled, encryptionSetupComplete, isAdmin])
 
-  // Track participants with decryption errors (key exchange in progress)
+  // Track participants pending key exchange.
+  // When a new participant joins an encrypted room, mark them as pending.
+  // Clear when their encryption status becomes true.
   useEffect(() => {
     if (!encryptionEnabled) return
 
-    const handleEncryptionError = (_err: Error, participant?: { identity: string }) => {
+    const handleParticipantConnected = (participant: { identity: string }) => {
-      console.debug('[Encryption] encryptionError for participant:', participant?.identity)
+      setPendingParticipants((prev) => {
-      if (participant?.identity) {
+        const next = new Set(prev)
-        setPendingParticipants((prev) => {
+        next.add(participant.identity)
-          const next = new Set(prev)
+        return next
-          next.add(participant.identity)
+      })
-          return next
-        })
-      }
     }
 
-    // Clear a specific participant from pending when their encryption status changes
     const handleEncryptionStatusChanged = (_encrypted: boolean, participant?: { identity: string }) => {
       if (participant?.identity) {
         setPendingParticipants((prev) => {
@@ -311,11 +309,18 @@ export const Conference = ({
       }
     }
 
-    room.on('encryptionError', handleEncryptionError)
+    const handleTrackSubscribed = () => {
+      // If any track is successfully subscribed, clear all pending
+      setPendingParticipants(new Set())
+    }
+
+    room.on('participantConnected', handleParticipantConnected)
     room.on('participantEncryptionStatusChanged', handleEncryptionStatusChanged)
+    room.on('trackSubscribed', handleTrackSubscribed)
     return () => {
-      room.off('encryptionError', handleEncryptionError)
+      room.off('participantConnected', handleParticipantConnected)
       room.off('participantEncryptionStatusChanged', handleEncryptionStatusChanged)
+      room.off('trackSubscribed', handleTrackSubscribed)
     }
   }, [room, encryptionEnabled])
 

src/frontend/src/features/rooms/livekit/components/ParticipantTile.tsx

@@ -22,7 +22,7 @@ import {
 import { Track } from 'livekit-client'
 import { RiHand } from '@remixicon/react'
 import { useRaisedHand, useRaisedHandPosition } from '../hooks/useRaisedHand'
-import { EncryptionBadge, getTrustLevelFromAttributes, useEncryptionContext } from '@/features/encryption'
+import { EncryptionBadge, getTrustLevelFromAttributes } from '@/features/encryption'
 import { useRoomData } from '../hooks/useRoomData'
 import { RiLockFill } from '@remixicon/react'
 import { HStack } from '@/styled-system/jsx'
@@ -83,8 +83,9 @@ export const ParticipantTile: (
   const isEncrypted = useIsEncrypted(trackReference.participant)
   const roomData = useRoomData()
   const isEncryptedRoom = roomData?.encryption_enabled ?? false
-  const { pendingParticipants } = useEncryptionContext()
+  // In an encrypted room, if a remote participant's encryption status is false,
-  const isKeyExchangePending = pendingParticipants.has(trackReference.participant.identity)
+  // it means we can't decrypt their frames yet (key exchange in progress).
+  const isKeyExchangePending = isEncryptedRoom && !isEncrypted && !trackReference.participant.isLocal
   const layoutContext = useMaybeLayoutContext()
 
   const autoManageSubscription = useFeatureContext()?.autoSubscription
@@ -147,27 +148,32 @@ export const ParticipantTile: (
             <div
               style={{
                 position: 'absolute',
-                inset: 0,
+                top: 0,
+                left: 0,
+                right: 0,
+                bottom: 0,
                 zIndex: 5,
+                backgroundColor: 'rgba(0, 0, 0, 0.85)',
                 display: 'flex',
                 flexDirection: 'column',
                 alignItems: 'center',
                 justifyContent: 'center',
-                backgroundColor: 'rgba(0, 0, 0, 0.8)',
                 gap: '0.5rem',
               }}
             >
-              <ParticipantPlaceholder participant={trackReference.participant} />
+              <div style={{ width: '30%', maxWidth: '80px' }}>
+                <ParticipantPlaceholder participant={trackReference.participant} />
+              </div>
               <div
                 style={{
                   display: 'flex',
                   alignItems: 'center',
                   gap: '0.3rem',
                   color: '#9ca3af',
-                  fontSize: '0.75rem',
+                  fontSize: '0.7rem',
                 }}
               >
-                <RiLockFill size={12} />
+                <RiLockFill size={11} />
                 <span>Key exchange in progress</span>
               </div>
             </div>