add back watch stream button

src/chat/components/VideoGrid.svelte

@@ -13,18 +13,23 @@
     const channelId = chat.activeChannelId;
     if (!channelId) return [];
 
+    // Ensure we are including all users in the channel
     const results = chat.userStates.filter(s => s.channelId === channelId);
     console.log(`[VideoGrid] Rendering ${results.length} participants for channel ${channelId}`);
     return results;
   });
 
-  const sharer = $derived(participants.find(s => s.isSharingScreen));
+  const sharer = $derived(participants.find(s => s.isSharingScreen && !s.identity.isEqual(chat.identity!)));
   const localSharing = $derived(webrtc.isSharingScreen);
 
-  // Explicit check for local user existence in participants
-  const isMeInChannel = $derived(participants.some(p => p.identity.isEqual(chat.identity!)));
+  // We only promote a remote sharer to "hero" if we are actually watching them
+  const isWatchingRemoteSharer = $derived(sharer && chat.currentVoiceState?.watching?.isEqual(sharer.identity));
 
-  const effectiveSharer = $derived(localSharing ? { identity: chat.identity } : sharer);
+  const effectiveSharer = $derived(localSharing ? { identity: chat.identity } : (isWatchingRemoteSharer ? sharer : null));
+
+  $effect(() => {
+    console.log(`[VideoGrid] Participants: ${participants.length}, RemoteSharer: ${sharer?.identity.toHexString().substring(0,8)}, LocalSharing: ${localSharing}, isWatchingRemote: ${isWatchingRemoteSharer}, EffectiveSharer: ${effectiveSharer?.identity?.toHexString().substring(0,8)}`);
+  });
 
   function toggleWatch(identity: Identity) {
     if (chat.currentVoiceState?.watching?.isEqual(identity)) {
@@ -49,7 +54,7 @@
             identity={effectiveSharer.identity!}
             isLocal={effectiveSharer.identity!.isEqual(chat.identity!)}
             stream={effectiveSharer.identity!.isEqual(chat.identity!)
-              ? webrtc.localMedia.screenStream
+              ? webrtc.localMedia.localScreenStream
               : webrtc.getRemoteStream(effectiveSharer.identity!.toHexString(), 'screen')}
             isSharing={true}
             isWatching={true}
@@ -67,11 +72,10 @@
                 identity={s.identity}
                 isLocal={s.identity.isEqual(chat.identity!)}
                 stream={s.identity.isEqual(chat.identity!)
-                  ? webrtc.localMedia.stream
+                  ? webrtc.localMedia.localStream
                   : webrtc.getRemoteStream(s.identity.toHexString(), 'voice')}
                 isSharing={s.identity.isEqual(chat.identity!) ? localSharing : s.isSharingScreen}
-                isWatching={s.identity.isEqual(chat.identity!) ? false : (s.isSharingScreen ? (chat.currentVoiceState?.watching?.isEqual(s.identity) || false) : true)}
-
+                isWatching={s.identity.isEqual(chat.identity!) ? localSharing : (s.isSharingScreen ? (chat.currentVoiceState?.watching?.isEqual(s.identity) || false) : true)}
                 onToggleWatch={() => toggleWatch(s.identity)}
                 isHero={false}
                 users={chat.users}
@@ -79,22 +83,6 @@
               />
             </div>
           {/each}
-
-          {#if !localSharing && !effectiveSharer.identity!.isEqual(chat.identity!)}
-              <div class="row-tile-wrapper">
-                 <VideoTile
-                  identity={chat.identity!}
-                  isLocal={true}
-                  stream={webrtc.localMedia.stream}
-                  isSharingScreen={false}
-                  isWatching={true}
-                  onToggleWatch={() => {}}
-                  isHero={false}
-                  users={chat.users}
-                  isTalking={webrtc.localMedia.isTalking}
-                />
-              </div>
-          {/if}
         </div>
       {:else}
         <div class="standard-grid">
@@ -104,11 +92,10 @@
                 identity={s.identity}
                 isLocal={s.identity.isEqual(chat.identity!)}
                 stream={s.identity.isEqual(chat.identity!)
-                  ? webrtc.localMedia.stream
+                  ? webrtc.localMedia.localStream
                   : webrtc.getRemoteStream(s.identity.toHexString(), 'voice')}
                 isSharing={s.identity.isEqual(chat.identity!) ? localSharing : s.isSharingScreen}
-                isWatching={s.identity.isEqual(chat.identity!) ? false : (s.isSharingScreen ? (chat.currentVoiceState?.watching?.isEqual(s.identity) || false) : true)}
-
+                isWatching={s.identity.isEqual(chat.identity!) ? localSharing : (s.isSharingScreen ? (chat.currentVoiceState?.watching?.isEqual(s.identity) || false) : true)}
                 onToggleWatch={() => toggleWatch(s.identity)}
                 isHero={false}
                 users={chat.users}
@@ -116,22 +103,6 @@
               />
             </div>
           {/each}
-
-          {#if !isMeInChannel}
-            <div class="grid-tile-wrapper">
-                <VideoTile
-                  identity={chat.identity!}
-                  isLocal={true}
-                  stream={webrtc.localMedia.stream}
-                  isSharingScreen={localSharing}
-                  isWatching={true}
-                  onToggleWatch={() => {}}
-                  isHero={false}
-                  users={chat.users}
-                  isTalking={webrtc.localMedia.isTalking}
-                />
-            </div>
-          {/if}
         </div>
       {/if}
     </div>

src/chat/components/VideoTile.svelte

@@ -93,8 +93,13 @@
     }
   }
 
-  const showStream = $derived(isLocal ? !!stream : (isWatching && isSharing && !!stream));
+  const hasVideo = $derived(stream && stream.getVideoTracks().length > 0);
+  const showStream = $derived(isWatching && hasVideo);
   const showWatchButton = $derived(!isLocal && isSharing && !isWatching);
+
+  $effect(() => {
+    console.log(`[VideoTile] ${name}: isLocal=${isLocal}, isSharing=${isSharing}, isWatching=${isWatching}, hasStream=${!!stream}, hasVideo=${!!hasVideo}, showStream=${showStream}, showWatchButton=${showWatchButton}`);
+  });
 </script>
 
 <div