Add shared chat status popover

src/App.svelte

@@ -148,6 +148,7 @@
   let collaboratorSearchError = '';
   let collaboratorSearchTimer: number | undefined;
   let sharedChatSession: { session_id: string; host_broadcaster_id: string; participants: Array<{ broadcaster_id: string }> } | null = null;
+  let showSharedChatDetails = false;
   let collaborationSettings: { is_moderator_send_live_enabled: boolean; slot_count: number; is_browser_source_audio_enabled: boolean; group_layout: string; browser_source_token: string } | null = null;
   let collaborationCapabilities: { guest_star_available: boolean; guest_star_reason?: string | null; shared_chat_available: boolean; shared_chat_reason?: string | null } | null = null;
   let oauthLink = '';
@@ -509,6 +510,7 @@
     } catch {
       collaborationSession = null;
       sharedChatSession = null;
+    showSharedChatDetails = false;
       collaborationSettings = null;
       collaborationCapabilities = null;
     }
@@ -1652,4 +1654,12 @@
       </section>
     {/if}
   </main>
+  {#if authenticated && sharedChatSession}
+    <section class="shared-chat-status-control" aria-label="Shared Chat details">
+      <button class="secondary shared-chat-status-button" onclick={() => (showSharedChatDetails = !showSharedChatDetails)} aria-expanded={showSharedChatDetails}>◈ SHARED CHAT · {sharedChatSession.participants.length}</button>
+      {#if showSharedChatDetails}
+        <div class="shared-chat-popover panel"><div class="panel-header"><span>SHARED CHAT</span><button class="secondary" onclick={() => (showSharedChatDetails = false)}>CLOSE</button></div><div class="settings-body"><div class="micro">HOST</div><div>{sharedChatSession.host_broadcaster_id}</div><div class="micro">PARTICIPATING CHANNELS</div>{#each sharedChatSession.participants as participant}<div class="collaboration-status">{participant.broadcaster_id}</div>{/each}<p class="settings-note">Chat remains in the main chat panel. This popover only shows Twitch-authoritative collaboration details.</p></div></div>
+      {/if}
+    </section>
+  {/if}
 </div>

src/styles.css

@@ -421,6 +421,21 @@ label {
   color: var(--ed-good);
   font: 10px/1.4 var(--font-data);
 }
+.shared-chat-status-control {
+  position: fixed;
+  right: 16px;
+  bottom: 16px;
+  z-index: 20;
+}
+.shared-chat-status-button {
+  border-color: var(--ed-cyan);
+}
+.shared-chat-popover {
+  position: absolute;
+  right: 0;
+  bottom: 42px;
+  width: min(340px, calc(100vw - 32px));
+}
 .auth-gate {
   min-height: 300px;
 }