From 5c38f076d349cf0dea7af3306e7b42eecaf59c81 Mon Sep 17 00:00:00 2001
From: Jannis Braun <151788261+TheZwiss@users.noreply.github.com>
Date: Fri, 20 Feb 2026 07:03:41 +0100
Subject: [PATCH] fix: eliminate voice ducking caused by rogue LiveKit audio
 elements

Add MutationObserver to neutralize LiveKit's re-attached <audio> elements,
mark our keep-alive elements with data-opencord, detach tracks on unsubscribe,
remove dangerous blanket .play(), and soften compressor to transparent limiter.
---
 packages/web/src/audio/AudioManager.js        |  36 +++-
 packages/web/src/audio/AudioManager.ts        |  41 ++++-
 .../web/src/components/chat/FriendsPage.js    |   5 +-
 .../web/src/components/chat/FriendsPage.tsx   |  17 ++
 .../web/src/components/layout/AppLayout.js    |  28 ++-
 .../web/src/components/layout/AppLayout.tsx   |  46 +++--
 .../web/src/components/layout/MainContent.js  |   2 +-
 .../web/src/components/layout/MainContent.tsx |  11 ++
 .../components/voice/GlobalAudioRenderer.js   |  19 +-
 .../components/voice/GlobalAudioRenderer.tsx  |  21 ++-
 .../web/src/components/voice/StreamTile.js    |   2 +-
 .../web/src/components/voice/StreamTile.tsx   |   2 +-
 .../web/src/components/voice/VoiceGrid.js     |  16 +-
 .../web/src/components/voice/VoiceGrid.tsx    |  39 ++++-
 packages/web/src/hooks/useAudioTrackPlayer.js | 151 ++++++++--------
 packages/web/src/hooks/useAudioTrackPlayer.ts | 165 ++++++++----------
 packages/web/src/hooks/useLiveKit.js          |  48 ++++-
 packages/web/src/hooks/useLiveKit.ts          |  73 ++++++--
 packages/web/src/stores/uiStore.js            |  13 +-
 packages/web/src/stores/uiStore.ts            |  12 +-
 packages/web/src/stores/voiceStore.js         |   9 +-
 packages/web/src/stores/voiceStore.ts         |   9 +-
 22 files changed, 511 insertions(+), 254 deletions(-)

diff --git a/packages/web/src/audio/AudioManager.js b/packages/web/src/audio/AudioManager.js
index e2c2458d..e3d9913e 100644
--- a/packages/web/src/audio/AudioManager.js
+++ b/packages/web/src/audio/AudioManager.js
@@ -6,6 +6,7 @@ export class AudioManager {
     inputDestination = null;
     silentGain = null;
     analyser = null;
+    masterCompressor = null;
     currentInputDeviceId = 'default';
     currentStream = null;
     isInitialized = false;
@@ -29,6 +30,15 @@ export class AudioManager {
         this.analyser.fftSize = 256;
         this.silentGain = this.ctx.createGain();
         this.silentGain.gain.value = 0;
+        // Master compressor/limiter — prevents clipping when multiple
+        // audio sources (voice + stream) sum at the output.
+        this.masterCompressor = this.ctx.createDynamicsCompressor();
+        this.masterCompressor.threshold.value = -1; // only engage near digital clipping
+        this.masterCompressor.knee.value = 0.5; // hard knee — transparent below threshold
+        this.masterCompressor.ratio.value = 4; // gentle limiting, no ducking
+        this.masterCompressor.attack.value = 0.0005; // 0.5ms — catch transient peaks
+        this.masterCompressor.release.value = 0.01; // 10ms — recover quickly
+        this.masterCompressor.connect(this.ctx.destination);
         this.inputGain.connect(this.inputDestination);
         this.inputGain.connect(this.analyser);
         this.inputGain.connect(this.silentGain);
@@ -93,7 +103,7 @@ export class AudioManager {
         const gainNode = this.ctx.createGain();
         gainNode.gain.value = options.volume ?? 0.5;
         source.connect(gainNode);
-        gainNode.connect(this.ctx.destination);
+        gainNode.connect(this.masterCompressor);
         source.start(0);
         return source;
     }
@@ -158,6 +168,30 @@ export class AudioManager {
             this.initContext();
         return this.analyser;
     }
+    /**
+     * Ensures the AudioContext exists and returns it.
+     * Unlike getContext(), this will never return null — it lazily
+     * creates the context if it hasn't been initialised yet.
+     * The context may be in 'suspended' state but Web Audio nodes
+     * can be created and connected regardless; audio will flow
+     * once the context resumes.
+     */
+    ensureContext() {
+        if (!this.ctx)
+            this.initContext();
+        return this.ctx;
+    }
+    /**
+     * Returns the master output bus (DynamicsCompressorNode).
+     * All remote audio (voice, stream) should connect their GainNodes
+     * to this node instead of directly to ctx.destination. The compressor
+     * prevents clipping when multiple sources sum together.
+     */
+    getMasterOutput() {
+        if (!this.ctx)
+            this.initContext();
+        return this.masterCompressor;
+    }
     getContext() {
         return this.ctx;
     }
diff --git a/packages/web/src/audio/AudioManager.ts b/packages/web/src/audio/AudioManager.ts
index f1e0b054..cd1aac69 100644
--- a/packages/web/src/audio/AudioManager.ts
+++ b/packages/web/src/audio/AudioManager.ts
@@ -6,6 +6,7 @@ export class AudioManager {
   private inputDestination: MediaStreamAudioDestinationNode | null = null;
   private silentGain: GainNode | null = null;
   private analyser: AnalyserNode | null = null;
+  private masterCompressor: DynamicsCompressorNode | null = null;
   
   private currentInputDeviceId: string = 'default';
   private currentStream: MediaStream | null = null;
@@ -35,7 +36,17 @@ export class AudioManager {
     
     this.silentGain = this.ctx.createGain();
     this.silentGain.gain.value = 0;
-    
+
+    // Master compressor/limiter — prevents clipping when multiple
+    // audio sources (voice + stream) sum at the output.
+    this.masterCompressor = this.ctx.createDynamicsCompressor();
+    this.masterCompressor.threshold.value = -1;    // only engage near digital clipping
+    this.masterCompressor.knee.value = 0.5;        // hard knee — transparent below threshold
+    this.masterCompressor.ratio.value = 4;         // gentle limiting, no ducking
+    this.masterCompressor.attack.value = 0.0005;   // 0.5ms — catch transient peaks
+    this.masterCompressor.release.value = 0.01;    // 10ms — recover quickly
+    this.masterCompressor.connect(this.ctx.destination);
+
     this.inputGain.connect(this.inputDestination);
     this.inputGain.connect(this.analyser);
     this.inputGain.connect(this.silentGain);
@@ -107,8 +118,8 @@ export class AudioManager {
     gainNode.gain.value = options.volume ?? 0.5;
 
     source.connect(gainNode);
-    gainNode.connect(this.ctx.destination);
-    
+    gainNode.connect(this.masterCompressor!);
+
     source.start(0);
     return source;
   }
@@ -178,6 +189,30 @@ export class AudioManager {
     return this.analyser!;
   }
 
+  /**
+   * Ensures the AudioContext exists and returns it.
+   * Unlike getContext(), this will never return null — it lazily
+   * creates the context if it hasn't been initialised yet.
+   * The context may be in 'suspended' state but Web Audio nodes
+   * can be created and connected regardless; audio will flow
+   * once the context resumes.
+   */
+  ensureContext(): AudioContext {
+    if (!this.ctx) this.initContext();
+    return this.ctx!;
+  }
+
+  /**
+   * Returns the master output bus (DynamicsCompressorNode).
+   * All remote audio (voice, stream) should connect their GainNodes
+   * to this node instead of directly to ctx.destination. The compressor
+   * prevents clipping when multiple sources sum together.
+   */
+  getMasterOutput(): AudioNode {
+    if (!this.ctx) this.initContext();
+    return this.masterCompressor!;
+  }
+
   getContext(): AudioContext | null {
     return this.ctx;
   }
diff --git a/packages/web/src/components/chat/FriendsPage.js b/packages/web/src/components/chat/FriendsPage.js
index dc127679..8bce877f 100644
--- a/packages/web/src/components/chat/FriendsPage.js
+++ b/packages/web/src/components/chat/FriendsPage.js
@@ -3,6 +3,7 @@ import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useSocialStore } from '../../stores/socialStore';
 import { useServerStore } from '../../stores/serverStore';
+import { useUIStore } from '../../stores/uiStore';
 import { Avatar } from '../ui/Avatar';
 import { LoadingSpinner } from '../ui/LoadingSpinner';
 import { api } from '../../api/client';
@@ -12,6 +13,8 @@ export function FriendsPage() {
     const [addStatus, setAddStatus] = useState(null);
     const navigate = useNavigate();
     const addDmChannel = useServerStore((s) => s.addDmChannel);
+    const toggleMemberList = useUIStore((s) => s.toggleMemberList);
+    const memberListOpen = useUIStore((s) => s.memberListOpen);
     const { friends, requests, isLoading, loadFriends, loadRequests, sendFriendRequest, updateFriendRequest, cancelFriendRequest, removeFriend } = useSocialStore();
     useEffect(() => {
         loadFriends();
@@ -58,7 +61,7 @@ export function FriendsPage() {
                 return (_jsxs("div", { className: "flex-1 p-8", children: [_jsx("h2", { className: "text-base font-bold text-discord-text-primary uppercase mb-2", children: "Add Friend" }), _jsx("p", { className: "text-sm text-discord-text-muted mb-4", children: "You can add friends with their Opencord username." }), _jsxs("form", { onSubmit: handleAddFriend, className: "relative mb-8", children: [_jsx("input", { type: "text", placeholder: "You can add a friend with their username", value: addUsername, onChange: (e) => setAddUsername(e.target.value), className: "w-full bg-discord-bg-tertiary text-discord-text-primary px-4 py-3 rounded-lg border border-transparent focus:border-discord-text-link outline-none transition-all placeholder:text-discord-text-muted/50" }), _jsx("button", { type: "submit", disabled: !addUsername.trim() || isLoading, className: "absolute right-2 top-1.5 px-4 py-1.5 bg-discord-blurple hover:bg-discord-blurple-hover disabled:opacity-50 disabled:bg-discord-blurple text-white text-sm font-medium rounded transition-colors", children: "Send Friend Request" })] }), addStatus && (_jsx("div", { className: `text-sm p-3 rounded-lg border ${addStatus.type === 'success' ? 'text-discord-text-positive border-discord-green/20 bg-discord-green/5' : 'text-discord-text-danger border-discord-red/20 bg-discord-red/5'}`, children: addStatus.message }))] }));
         }
     };
-    return (_jsxs("div", { className: "flex-1 flex flex-col bg-discord-bg-primary h-full", children: [_jsxs("div", { className: "h-12 px-4 flex items-center shadow-header flex-shrink-0 z-10 bg-discord-bg-primary", children: [_jsxs("div", { className: "flex items-center gap-2 mr-4", children: [_jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor", className: "text-discord-text-muted", children: _jsx("path", { d: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" }) }), _jsx("span", { className: "font-bold text-discord-text-primary", children: "Friends" })] }), _jsx("div", { className: "w-[1px] h-6 bg-discord-bg-accent mx-2" }), _jsxs("div", { className: "flex items-center gap-4 ml-2", children: [_jsx(TabButton, { active: activeTab === 'online', onClick: () => setActiveTab('online'), children: "Online" }), _jsx(TabButton, { active: activeTab === 'all', onClick: () => setActiveTab('all'), children: "All" }), _jsxs(TabButton, { active: activeTab === 'pending', onClick: () => setActiveTab('pending'), children: ["Pending", (pendingIncoming.length > 0) && (_jsx("span", { className: "ml-2 px-1.5 py-0.5 bg-discord-red text-white text-[10px] rounded-full leading-none", children: pendingIncoming.length }))] }), _jsx("button", { onClick: () => setActiveTab('add'), className: `px-2 py-0.5 rounded text-[14px] font-medium transition-all ${activeTab === 'add' ? 'text-discord-green bg-transparent' : 'bg-discord-green text-white hover:bg-discord-green/90'}`, children: "Add Friend" })] })] }), renderTabContent()] }));
+    return (_jsxs("div", { className: "flex-1 flex flex-col bg-discord-bg-primary h-full", children: [_jsxs("div", { className: "h-12 px-4 flex items-center shadow-header flex-shrink-0 z-10 bg-discord-bg-primary", children: [_jsxs("div", { className: "flex items-center gap-2 mr-4", children: [_jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor", className: "text-discord-text-muted", children: _jsx("path", { d: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" }) }), _jsx("span", { className: "font-bold text-discord-text-primary", children: "Friends" })] }), _jsx("div", { className: "w-[1px] h-6 bg-discord-bg-accent mx-2" }), _jsxs("div", { className: "flex items-center gap-4 ml-2", children: [_jsx(TabButton, { active: activeTab === 'online', onClick: () => setActiveTab('online'), children: "Online" }), _jsx(TabButton, { active: activeTab === 'all', onClick: () => setActiveTab('all'), children: "All" }), _jsxs(TabButton, { active: activeTab === 'pending', onClick: () => setActiveTab('pending'), children: ["Pending", (pendingIncoming.length > 0) && (_jsx("span", { className: "ml-2 px-1.5 py-0.5 bg-discord-red text-white text-[10px] rounded-full leading-none", children: pendingIncoming.length }))] }), _jsx("button", { onClick: () => setActiveTab('add'), className: `px-2 py-0.5 rounded text-[14px] font-medium transition-all ${activeTab === 'add' ? 'text-discord-green bg-transparent' : 'bg-discord-green text-white hover:bg-discord-green/90'}`, children: "Add Friend" })] }), _jsx("div", { className: "ml-auto flex items-center gap-1", children: _jsx("button", { onClick: toggleMemberList, className: `w-8 h-8 flex items-center justify-center transition-colors rounded-[4px] hover:bg-discord-modifier-hover ${memberListOpen ? 'text-discord-text-primary' : 'text-discord-text-muted hover:text-discord-text-secondary'}`, title: "Toggle Activity Panel", children: _jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor", children: _jsx("path", { d: "M14 8.00598C14 10.211 12.206 12.006 10 12.006C7.795 12.006 6 10.211 6 8.00598C6 5.80098 7.794 4.00598 10 4.00598C12.206 4.00598 14 5.80098 14 8.00598ZM2 19.006C2 15.473 5.29 13.006 10 13.006C14.711 13.006 18 15.473 18 19.006V20.006H2V19.006ZM20 20.006H22V19.006C22 16.451 20.178 14.471 17.532 13.471C19.461 14.601 20 16.561 20 19.006V20.006Z" }) }) }) })] }), renderTabContent()] }));
 }
 function TabButton({ children, active, onClick }) {
     return (_jsx("button", { onClick: onClick, className: `px-2 py-0.5 rounded-[4px] text-[16px] font-medium transition-colors ${active ? 'bg-discord-modifier-selected text-white' : 'text-discord-text-muted hover:bg-discord-modifier-hover hover:text-discord-text-secondary'}`, children: children }));
diff --git a/packages/web/src/components/chat/FriendsPage.tsx b/packages/web/src/components/chat/FriendsPage.tsx
index 4a673f22..1098b095 100644
--- a/packages/web/src/components/chat/FriendsPage.tsx
+++ b/packages/web/src/components/chat/FriendsPage.tsx
@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useSocialStore } from '../../stores/socialStore';
 import { useServerStore } from '../../stores/serverStore';
+import { useUIStore } from '../../stores/uiStore';
 import { Avatar } from '../ui/Avatar';
 import { LoadingSpinner } from '../ui/LoadingSpinner';
 import { api } from '../../api/client';
@@ -15,6 +16,8 @@ export function FriendsPage() {
   const [addStatus, setAddStatus] = useState<{ type: 'success' | 'error', message: string } | null>(null);
   const navigate = useNavigate();
   const addDmChannel = useServerStore((s) => s.addDmChannel);
+  const toggleMemberList = useUIStore((s) => s.toggleMemberList);
+  const memberListOpen = useUIStore((s) => s.memberListOpen);
 
   const {
     friends,
@@ -202,6 +205,20 @@ export function FriendsPage() {
             Add Friend
           </button>
         </div>
+
+        <div className="ml-auto flex items-center gap-1">
+          <button
+            onClick={toggleMemberList}
+            className={`w-8 h-8 flex items-center justify-center transition-colors rounded-[4px] hover:bg-discord-modifier-hover ${
+              memberListOpen ? 'text-discord-text-primary' : 'text-discord-text-muted hover:text-discord-text-secondary'
+            }`}
+            title="Toggle Activity Panel"
+          >
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
+              <path d="M14 8.00598C14 10.211 12.206 12.006 10 12.006C7.795 12.006 6 10.211 6 8.00598C6 5.80098 7.794 4.00598 10 4.00598C12.206 4.00598 14 5.80098 14 8.00598ZM2 19.006C2 15.473 5.29 13.006 10 13.006C14.711 13.006 18 15.473 18 19.006V20.006H2V19.006ZM20 20.006H22V19.006C22 16.451 20.178 14.471 17.532 13.471C19.461 14.601 20 16.561 20 19.006V20.006Z" />
+            </svg>
+          </button>
+        </div>
       </div>
 
       {renderTabContent()}
diff --git a/packages/web/src/components/layout/AppLayout.js b/packages/web/src/components/layout/AppLayout.js
index 4425b006..d9d7b614 100644
--- a/packages/web/src/components/layout/AppLayout.js
+++ b/packages/web/src/components/layout/AppLayout.js
@@ -32,12 +32,6 @@ export function AppLayout() {
     useEffect(() => {
         const resume = () => {
             AudioManager.getInstance().resumeContext().then(() => {
-                // Wake up all audio/video elements that might be blocked by Autoplay
-                document.querySelectorAll('audio, video').forEach(el => {
-                    el.play().catch(() => {
-                        // Silently fail if still blocked or no source
-                    });
-                });
                 window.removeEventListener('click', resume);
                 window.removeEventListener('keydown', resume);
                 window.removeEventListener('touchstart', resume);
@@ -52,6 +46,25 @@ export function AppLayout() {
             window.removeEventListener('touchstart', resume);
         };
     }, []);
+    // MutationObserver: neutralize rogue LiveKit <audio> elements that bypass our Web Audio pipeline.
+    // LiveKit can re-attach hidden <audio> elements after .detach(), causing full-volume playback
+    // that ignores our volume/mute controls. Any <audio> without data-opencord is immediately killed.
+    useEffect(() => {
+        const observer = new MutationObserver((mutations) => {
+            for (const mutation of mutations) {
+                mutation.addedNodes.forEach((node) => {
+                    if (node instanceof HTMLAudioElement && !node.dataset.opencord) {
+                        node.muted = true;
+                        node.volume = 0;
+                        node.pause();
+                        node.srcObject = null;
+                    }
+                });
+            }
+        });
+        observer.observe(document.body, { childList: true, subtree: true });
+        return () => observer.disconnect();
+    }, []);
     const { user, isLoading } = useAuth();
     const setCurrentServer = useServerStore((s) => s.setCurrentServer);
     const loadServerDetail = useServerStore((s) => s.loadServerDetail);
@@ -60,6 +73,7 @@ export function AppLayout() {
     const setIsMobile = useUIStore((s) => s.setIsMobile);
     const setShowDms = useUIStore((s) => s.setShowDms);
     const openModal = useUIStore((s) => s.openModal);
+    const memberListOpen = useUIStore((s) => s.memberListOpen);
     const sidebarOpen = useUIStore((s) => s.sidebarOpen);
     const isMobile = useUIStore((s) => s.isMobile);
     const userProfilePopout = useUIStore((s) => s.userProfilePopout);
@@ -167,5 +181,5 @@ export function AppLayout() {
     if (isLoading || !user) {
         return (_jsx("div", { className: "h-screen flex items-center justify-center bg-discord-bg-primary", children: _jsxs("div", { className: "text-center", children: [_jsxs("svg", { className: "animate-spin w-10 h-10 text-discord-blurple mx-auto mb-4", viewBox: "0 0 24 24", fill: "none", children: [_jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), _jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" })] }), _jsx("p", { className: "text-discord-text-muted", children: "Loading Opencord..." })] }) }));
     }
-    return (_jsxs("div", { className: "h-screen flex bg-discord-bg-tertiary overflow-hidden", children: [_jsxs("div", { className: `${isMobile ? `fixed z-40 h-full transition-transform ${sidebarOpen ? 'translate-x-0' : '-translate-x-full'}` : 'flex h-full'}`, children: [_jsx(ServerSidebar, {}), _jsx(ChannelSidebar, {})] }), _jsxs("div", { className: "flex-1 flex min-w-0 bg-discord-bg-primary relative", children: [_jsx(MainContent, {}), serverId === '@me' ? (_jsx("div", { className: "w-[358px] bg-discord-bg-secondary flex-shrink-0 hidden xl:flex flex-col", children: _jsxs("div", { className: "p-4", children: [_jsx("h3", { className: "text-[20px] font-bold text-discord-text-header mb-4", children: "Active Now" }), _jsxs("div", { className: "text-center py-8", children: [_jsx("div", { className: "text-[16px] font-bold text-discord-text-header mb-1 text-center", children: "It's quiet for now..." }), _jsx("div", { className: "text-[14px] text-discord-text-muted text-center max-w-[200px] mx-auto", children: "When a friend starts an activity\u2014like playing a game or hanging out on voice\u2014we\u2019ll show it here!" })] })] }) })) : (_jsx(MemberSidebar, {}))] }), _jsx(CreateServerModal, {}), _jsx(JoinServerModal, {}), _jsx(CreateChannelModal, {}), _jsx(InviteModal, {}), _jsx(UserSettingsModal, {}), _jsx(ServerSettingsModal, {}), _jsx(NewDmModal, {}), _jsx(IncomingCallModal, {}), _jsx(ImagePreview, {}), _jsx(PictureInPicture, {}), _jsx(SoundController, {}), _jsx(GlobalAudioRenderer, {}), userProfilePopout.user && userProfilePopout.position && (_jsxs(_Fragment, { children: [_jsx("div", { className: "fixed inset-0 z-[45]", onClick: closeUserProfile }), _jsx(UserProfilePopout, { user: userProfilePopout.user, onClose: closeUserProfile, position: userProfilePopout.position })] }))] }));
+    return (_jsxs("div", { className: "h-screen flex bg-discord-bg-tertiary overflow-hidden", children: [_jsxs("div", { className: `${isMobile ? `fixed z-40 h-full transition-transform ${sidebarOpen ? 'translate-x-0' : '-translate-x-full'}` : 'flex h-full'}`, children: [_jsx(ServerSidebar, {}), _jsx(ChannelSidebar, {})] }), _jsxs("div", { className: "flex-1 flex min-w-0 bg-discord-bg-primary relative", children: [_jsx(MainContent, {}), serverId === '@me' ? (memberListOpen ? (_jsx("div", { className: "w-[358px] bg-discord-bg-secondary flex-shrink-0 hidden xl:flex flex-col", children: _jsxs("div", { className: "p-4", children: [_jsx("h3", { className: "text-[20px] font-bold text-discord-text-header mb-4", children: "Active Now" }), _jsxs("div", { className: "text-center py-8", children: [_jsx("div", { className: "text-[16px] font-bold text-discord-text-header mb-1 text-center", children: "It's quiet for now..." }), _jsx("div", { className: "text-[14px] text-discord-text-muted text-center max-w-[200px] mx-auto", children: "When a friend starts an activity\u2014like playing a game or hanging out on voice\u2014we'll show it here!" })] })] }) })) : null) : (_jsx(MemberSidebar, {}))] }), _jsx(CreateServerModal, {}), _jsx(JoinServerModal, {}), _jsx(CreateChannelModal, {}), _jsx(InviteModal, {}), _jsx(UserSettingsModal, {}), _jsx(ServerSettingsModal, {}), _jsx(NewDmModal, {}), _jsx(IncomingCallModal, {}), _jsx(ImagePreview, {}), _jsx(PictureInPicture, {}), _jsx(SoundController, {}), _jsx(GlobalAudioRenderer, {}), userProfilePopout.user && userProfilePopout.position && (_jsxs(_Fragment, { children: [_jsx("div", { className: "fixed inset-0 z-[45]", onClick: closeUserProfile }), _jsx(UserProfilePopout, { user: userProfilePopout.user, onClose: closeUserProfile, position: userProfilePopout.position })] }))] }));
 }
diff --git a/packages/web/src/components/layout/AppLayout.tsx b/packages/web/src/components/layout/AppLayout.tsx
index c1fd6f21..8e71c986 100644
--- a/packages/web/src/components/layout/AppLayout.tsx
+++ b/packages/web/src/components/layout/AppLayout.tsx
@@ -34,13 +34,6 @@ export function AppLayout() {
   useEffect(() => {
     const resume = () => {
       AudioManager.getInstance().resumeContext().then(() => {
-        // Wake up all audio/video elements that might be blocked by Autoplay
-        document.querySelectorAll('audio, video').forEach(el => {
-          (el as HTMLMediaElement).play().catch(() => {
-            // Silently fail if still blocked or no source
-          });
-        });
-
         window.removeEventListener('click', resume);
         window.removeEventListener('keydown', resume);
         window.removeEventListener('touchstart', resume);
@@ -56,6 +49,26 @@ export function AppLayout() {
     };
   }, []);
 
+  // MutationObserver: neutralize rogue LiveKit <audio> elements that bypass our Web Audio pipeline.
+  // LiveKit can re-attach hidden <audio> elements after .detach(), causing full-volume playback
+  // that ignores our volume/mute controls. Any <audio> without data-opencord is immediately killed.
+  useEffect(() => {
+    const observer = new MutationObserver((mutations) => {
+      for (const mutation of mutations) {
+        mutation.addedNodes.forEach((node) => {
+          if (node instanceof HTMLAudioElement && !node.dataset.opencord) {
+            node.muted = true;
+            node.volume = 0;
+            node.pause();
+            node.srcObject = null;
+          }
+        });
+      }
+    });
+    observer.observe(document.body, { childList: true, subtree: true });
+    return () => observer.disconnect();
+  }, []);
+
   const { user, isLoading } = useAuth();
   const setCurrentServer = useServerStore((s) => s.setCurrentServer);
   const loadServerDetail = useServerStore((s) => s.loadServerDetail);
@@ -64,6 +77,7 @@ export function AppLayout() {
   const setIsMobile = useUIStore((s) => s.setIsMobile);
   const setShowDms = useUIStore((s) => s.setShowDms);
   const openModal = useUIStore((s) => s.openModal);
+  const memberListOpen = useUIStore((s) => s.memberListOpen);
   const sidebarOpen = useUIStore((s) => s.sidebarOpen);
   const isMobile = useUIStore((s) => s.isMobile);
   const userProfilePopout = useUIStore((s) => s.userProfilePopout);
@@ -213,17 +227,19 @@ export function AppLayout() {
       <div className="flex-1 flex min-w-0 bg-discord-bg-primary relative">
         <MainContent />
         {serverId === '@me' ? (
-          <div className="w-[358px] bg-discord-bg-secondary flex-shrink-0 hidden xl:flex flex-col">
-            <div className="p-4">
-              <h3 className="text-[20px] font-bold text-discord-text-header mb-4">Active Now</h3>
-              <div className="text-center py-8">
-                <div className="text-[16px] font-bold text-discord-text-header mb-1 text-center">It's quiet for now...</div>
-                <div className="text-[14px] text-discord-text-muted text-center max-w-[200px] mx-auto">
-                  When a friend starts an activity—like playing a game or hanging out on voice—we’ll show it here!
+          memberListOpen ? (
+            <div className="w-[358px] bg-discord-bg-secondary flex-shrink-0 hidden xl:flex flex-col">
+              <div className="p-4">
+                <h3 className="text-[20px] font-bold text-discord-text-header mb-4">Active Now</h3>
+                <div className="text-center py-8">
+                  <div className="text-[16px] font-bold text-discord-text-header mb-1 text-center">It's quiet for now...</div>
+                  <div className="text-[14px] text-discord-text-muted text-center max-w-[200px] mx-auto">
+                    When a friend starts an activity&#8212;like playing a game or hanging out on voice&#8212;we'll show it here!
+                  </div>
                 </div>
               </div>
             </div>
-          </div>
+          ) : null
         ) : (
           <MemberSidebar />
         )}
diff --git a/packages/web/src/components/layout/MainContent.js b/packages/web/src/components/layout/MainContent.js
index 72681c3e..9a3b643a 100644
--- a/packages/web/src/components/layout/MainContent.js
+++ b/packages/web/src/components/layout/MainContent.js
@@ -77,7 +77,7 @@ export function MainContent() {
         if (isInDmCall) {
             return (_jsx("div", { className: "flex-1 flex flex-col min-w-0 relative", children: _jsx(DmCallView, {}) }));
         }
-        return (_jsxs("div", { className: "flex-1 flex flex-col bg-discord-bg-primary min-w-0 relative", children: [isCallingThisDm && (_jsxs("div", { className: "bg-discord-green/10 border-b border-discord-green/20 px-4 py-3 flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor", className: "text-discord-green animate-pulse", children: _jsx("path", { d: "M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z" }) }), _jsxs("span", { className: "text-discord-green text-sm font-medium", children: ["Calling ", dmName, "..."] })] }), _jsx("button", { onClick: handleCancelCall, className: "px-3 py-1 bg-discord-red hover:bg-discord-red/80 text-white text-xs font-medium rounded transition-colors", children: "Cancel" })] })), _jsxs("div", { className: "h-12 px-4 flex items-center justify-between shadow-header flex-shrink-0 z-10 bg-discord-bg-primary", children: [_jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [_jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor", className: "text-discord-text-muted flex-shrink-0", children: _jsx("path", { d: "M12.5 2A6.5 6.5 0 0 0 6 8.5c0 1.82.75 3.47 1.95 4.65A10.02 10.02 0 0 0 2 22h2c0-4.42 3.58-8 8-8 .35 0 .69.03 1.03.07A6.49 6.49 0 0 0 19 8.5 6.5 6.5 0 0 0 12.5 2Zm0 11A4.5 4.5 0 1 1 17 8.5a4.5 4.5 0 0 1-4.5 4.5Z" }) }), _jsx("span", { className: "font-bold text-discord-text-primary truncate", children: dmName })] }), _jsxs("div", { className: "flex items-center gap-1 flex-shrink-0", children: [_jsx("button", { onClick: handleStartVoiceCall, disabled: !!outgoingCall || !!activeDmCall, className: "w-8 h-8 flex items-center justify-center text-discord-text-muted hover:text-discord-text-primary transition-colors rounded-[4px] hover:bg-discord-modifier-hover disabled:opacity-50 disabled:cursor-not-allowed", title: "Start Voice Call", children: _jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor", children: _jsx("path", { d: "M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z" }) }) }), _jsx("button", { onClick: handleStartVoiceCall, disabled: !!outgoingCall || !!activeDmCall, className: "w-8 h-8 flex items-center justify-center text-discord-text-muted hover:text-discord-text-primary transition-colors rounded-[4px] hover:bg-discord-modifier-hover disabled:opacity-50 disabled:cursor-not-allowed", title: "Start Video Call", children: _jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor", children: _jsx("path", { d: "M21 6.5l-4 4V7c0-.55-.45-1-1-1H9.82L21 17.18V6.5zM3.27 2L2 3.27 4.73 6H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.21 0 .39-.08.54-.18L19.73 21 21 19.73 3.27 2z" }) }) }), _jsx("button", { className: "w-8 h-8 flex items-center justify-center text-discord-text-muted hover:text-discord-text-primary transition-colors rounded-[4px] hover:bg-discord-modifier-hover", title: "Pinned Messages", children: _jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor", children: [_jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z", transform: "rotate(45 12 12)" }), _jsx("path", { d: "M16 9V4h1c.55 0 1-.45 1-1s-.45-1-1-1H7c-.55 0-1 .45-1 1s.45 1 1 1h1v5c0 1.66-1.34 3-3 3v2h5.97v7l1 1 1-1v-7H19v-2c-1.66 0-3-1.34-3-3z" })] }) }), _jsx("button", { className: "w-8 h-8 flex items-center justify-center text-discord-text-muted hover:text-discord-text-primary transition-colors rounded-[4px] hover:bg-discord-modifier-hover", title: "Add Friends to DM", children: _jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor", children: _jsx("path", { d: "M14 8.00598C14 10.211 12.206 12.006 10 12.006C7.795 12.006 6 10.211 6 8.00598C6 5.80098 7.794 4.00598 10 4.00598C12.206 4.00598 14 5.80098 14 8.00598ZM2 19.006C2 15.473 5.29 13.006 10 13.006C14.711 13.006 18 15.473 18 19.006V20.006H2V19.006ZM20 20.006H22V19.006C22 16.451 20.178 14.471 17.532 13.471C19.461 14.601 20 16.561 20 19.006V20.006Z" }) }) }), _jsx("div", { className: "w-[1px] h-6 bg-discord-modifier-accent mx-1" }), _jsx("button", { className: "w-8 h-8 flex items-center justify-center text-discord-text-muted hover:text-discord-text-primary transition-colors rounded-[4px] hover:bg-discord-modifier-hover", title: "Search", children: _jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor", children: _jsx("path", { d: "M21.707 20.293l-5.395-5.395A7.457 7.457 0 0018 10.5 7.5 7.5 0 1010.5 18c1.575 0 3.027-.486 4.228-1.31l5.476 5.476a.997.997 0 001.414 0l.089-.089a1 1 0 000-1.414l.001-.37zM10.5 16a5.5 5.5 0 110-11 5.5 5.5 0 010 11z" }) }) }), _jsx("button", { className: "w-8 h-8 flex items-center justify-center text-discord-text-muted hover:text-discord-text-primary transition-colors rounded-[4px] hover:bg-discord-modifier-hover", title: "Inbox", children: _jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor", children: _jsx("path", { d: "M19 3H4.99c-1.11 0-1.98.9-1.98 2L3 19c0 1.1.88 2 1.99 2H19c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 12h-4c0 1.66-1.35 3-3 3s-3-1.34-3-3H4.99V5H19v10z" }) }) }), _jsx("button", { className: "w-8 h-8 flex items-center justify-center text-discord-text-muted hover:text-discord-text-primary transition-colors rounded-[4px] hover:bg-discord-modifier-hover", title: "Help", children: _jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor", children: _jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z" }) }) })] })] }), _jsx(MessageList, { channelId: currentChannelId }), _jsx(TypingIndicator, { channelId: currentChannelId }), _jsx(MessageInput, { channelId: currentChannelId, channelName: `@${dmName}` })] }));
+        return (_jsxs("div", { className: "flex-1 flex flex-col bg-discord-bg-primary min-w-0 relative", children: [isCallingThisDm && (_jsxs("div", { className: "bg-discord-green/10 border-b border-discord-green/20 px-4 py-3 flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor", className: "text-discord-green animate-pulse", children: _jsx("path", { d: "M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z" }) }), _jsxs("span", { className: "text-discord-green text-sm font-medium", children: ["Calling ", dmName, "..."] })] }), _jsx("button", { onClick: handleCancelCall, className: "px-3 py-1 bg-discord-red hover:bg-discord-red/80 text-white text-xs font-medium rounded transition-colors", children: "Cancel" })] })), _jsxs("div", { className: "h-12 px-4 flex items-center justify-between shadow-header flex-shrink-0 z-10 bg-discord-bg-primary", children: [_jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [_jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor", className: "text-discord-text-muted flex-shrink-0", children: _jsx("path", { d: "M12.5 2A6.5 6.5 0 0 0 6 8.5c0 1.82.75 3.47 1.95 4.65A10.02 10.02 0 0 0 2 22h2c0-4.42 3.58-8 8-8 .35 0 .69.03 1.03.07A6.49 6.49 0 0 0 19 8.5 6.5 6.5 0 0 0 12.5 2Zm0 11A4.5 4.5 0 1 1 17 8.5a4.5 4.5 0 0 1-4.5 4.5Z" }) }), _jsx("span", { className: "font-bold text-discord-text-primary truncate", children: dmName })] }), _jsxs("div", { className: "flex items-center gap-1 flex-shrink-0", children: [_jsx("button", { onClick: handleStartVoiceCall, disabled: !!outgoingCall || !!activeDmCall, className: "w-8 h-8 flex items-center justify-center text-discord-text-muted hover:text-discord-text-primary transition-colors rounded-[4px] hover:bg-discord-modifier-hover disabled:opacity-50 disabled:cursor-not-allowed", title: "Start Voice Call", children: _jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor", children: _jsx("path", { d: "M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z" }) }) }), _jsx("button", { onClick: handleStartVoiceCall, disabled: !!outgoingCall || !!activeDmCall, className: "w-8 h-8 flex items-center justify-center text-discord-text-muted hover:text-discord-text-primary transition-colors rounded-[4px] hover:bg-discord-modifier-hover disabled:opacity-50 disabled:cursor-not-allowed", title: "Start Video Call", children: _jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor", children: _jsx("path", { d: "M21 6.5l-4 4V7c0-.55-.45-1-1-1H9.82L21 17.18V6.5zM3.27 2L2 3.27 4.73 6H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.21 0 .39-.08.54-.18L19.73 21 21 19.73 3.27 2z" }) }) }), _jsx("button", { className: "w-8 h-8 flex items-center justify-center text-discord-text-muted hover:text-discord-text-primary transition-colors rounded-[4px] hover:bg-discord-modifier-hover", title: "Pinned Messages", children: _jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor", children: [_jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z", transform: "rotate(45 12 12)" }), _jsx("path", { d: "M16 9V4h1c.55 0 1-.45 1-1s-.45-1-1-1H7c-.55 0-1 .45-1 1s.45 1 1 1h1v5c0 1.66-1.34 3-3 3v2h5.97v7l1 1 1-1v-7H19v-2c-1.66 0-3-1.34-3-3z" })] }) }), _jsx("button", { className: "w-8 h-8 flex items-center justify-center text-discord-text-muted hover:text-discord-text-primary transition-colors rounded-[4px] hover:bg-discord-modifier-hover", title: "Add Friends to DM", children: _jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor", children: _jsx("path", { d: "M14 8.00598C14 10.211 12.206 12.006 10 12.006C7.795 12.006 6 10.211 6 8.00598C6 5.80098 7.794 4.00598 10 4.00598C12.206 4.00598 14 5.80098 14 8.00598ZM2 19.006C2 15.473 5.29 13.006 10 13.006C14.711 13.006 18 15.473 18 19.006V20.006H2V19.006ZM20 20.006H22V19.006C22 16.451 20.178 14.471 17.532 13.471C19.461 14.601 20 16.561 20 19.006V20.006Z" }) }) }), _jsx("button", { onClick: toggleMemberList, className: `w-8 h-8 flex items-center justify-center transition-colors rounded-[4px] hover:bg-discord-modifier-hover ${memberListOpen ? 'text-discord-text-primary' : 'text-discord-text-muted hover:text-discord-text-secondary'}`, title: "Toggle Activity Panel", children: _jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor", children: _jsx("path", { d: "M14 8.00598C14 10.211 12.206 12.006 10 12.006C7.795 12.006 6 10.211 6 8.00598C6 5.80098 7.794 4.00598 10 4.00598C12.206 4.00598 14 5.80098 14 8.00598ZM2 19.006C2 15.473 5.29 13.006 10 13.006C14.711 13.006 18 15.473 18 19.006V20.006H2V19.006ZM20 20.006H22V19.006C22 16.451 20.178 14.471 17.532 13.471C19.461 14.601 20 16.561 20 19.006V20.006Z" }) }) }), _jsx("div", { className: "w-[1px] h-6 bg-discord-modifier-accent mx-1" }), _jsx("button", { className: "w-8 h-8 flex items-center justify-center text-discord-text-muted hover:text-discord-text-primary transition-colors rounded-[4px] hover:bg-discord-modifier-hover", title: "Search", children: _jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor", children: _jsx("path", { d: "M21.707 20.293l-5.395-5.395A7.457 7.457 0 0018 10.5 7.5 7.5 0 1010.5 18c1.575 0 3.027-.486 4.228-1.31l5.476 5.476a.997.997 0 001.414 0l.089-.089a1 1 0 000-1.414l.001-.37zM10.5 16a5.5 5.5 0 110-11 5.5 5.5 0 010 11z" }) }) }), _jsx("button", { className: "w-8 h-8 flex items-center justify-center text-discord-text-muted hover:text-discord-text-primary transition-colors rounded-[4px] hover:bg-discord-modifier-hover", title: "Inbox", children: _jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor", children: _jsx("path", { d: "M19 3H4.99c-1.11 0-1.98.9-1.98 2L3 19c0 1.1.88 2 1.99 2H19c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 12h-4c0 1.66-1.35 3-3 3s-3-1.34-3-3H4.99V5H19v10z" }) }) }), _jsx("button", { className: "w-8 h-8 flex items-center justify-center text-discord-text-muted hover:text-discord-text-primary transition-colors rounded-[4px] hover:bg-discord-modifier-hover", title: "Help", children: _jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor", children: _jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z" }) }) })] })] }), _jsx(MessageList, { channelId: currentChannelId }), _jsx(TypingIndicator, { channelId: currentChannelId }), _jsx(MessageInput, { channelId: currentChannelId, channelName: `@${dmName}` })] }));
     }
     if (!currentChannelId || !channel) {
         return (_jsxs("div", { className: "flex-1 flex flex-col bg-discord-bg-primary", children: [_jsx("div", { className: "h-12 px-4 flex items-center shadow-header", children: _jsx("span", { className: "text-discord-text-muted", children: "Select a channel" }) }), _jsx("div", { className: "flex-1 flex items-center justify-center text-discord-text-muted", children: _jsx("p", { children: "Select a text or voice channel to get started" }) })] }));
diff --git a/packages/web/src/components/layout/MainContent.tsx b/packages/web/src/components/layout/MainContent.tsx
index b14a9eb9..1c004d06 100644
--- a/packages/web/src/components/layout/MainContent.tsx
+++ b/packages/web/src/components/layout/MainContent.tsx
@@ -147,6 +147,17 @@ export function MainContent() {
                 <path d="M14 8.00598C14 10.211 12.206 12.006 10 12.006C7.795 12.006 6 10.211 6 8.00598C6 5.80098 7.794 4.00598 10 4.00598C12.206 4.00598 14 5.80098 14 8.00598ZM2 19.006C2 15.473 5.29 13.006 10 13.006C14.711 13.006 18 15.473 18 19.006V20.006H2V19.006ZM20 20.006H22V19.006C22 16.451 20.178 14.471 17.532 13.471C19.461 14.601 20 16.561 20 19.006V20.006Z" />
               </svg>
             </button>
+            <button
+              onClick={toggleMemberList}
+              className={`w-8 h-8 flex items-center justify-center transition-colors rounded-[4px] hover:bg-discord-modifier-hover ${
+                memberListOpen ? 'text-discord-text-primary' : 'text-discord-text-muted hover:text-discord-text-secondary'
+              }`}
+              title="Toggle Activity Panel"
+            >
+              <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
+                <path d="M14 8.00598C14 10.211 12.206 12.006 10 12.006C7.795 12.006 6 10.211 6 8.00598C6 5.80098 7.794 4.00598 10 4.00598C12.206 4.00598 14 5.80098 14 8.00598ZM2 19.006C2 15.473 5.29 13.006 10 13.006C14.711 13.006 18 15.473 18 19.006V20.006H2V19.006ZM20 20.006H22V19.006C22 16.451 20.178 14.471 17.532 13.471C19.461 14.601 20 16.561 20 19.006V20.006Z" />
+              </svg>
+            </button>
             <div className="w-[1px] h-6 bg-discord-modifier-accent mx-1" />
             <button className="w-8 h-8 flex items-center justify-center text-discord-text-muted hover:text-discord-text-primary transition-colors rounded-[4px] hover:bg-discord-modifier-hover" title="Search">
               <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
diff --git a/packages/web/src/components/voice/GlobalAudioRenderer.js b/packages/web/src/components/voice/GlobalAudioRenderer.js
index 0e1209d0..5d4e26b5 100644
--- a/packages/web/src/components/voice/GlobalAudioRenderer.js
+++ b/packages/web/src/components/voice/GlobalAudioRenderer.js
@@ -3,8 +3,9 @@ import React from 'react';
 import { useVoiceStore } from '../../stores/voiceStore';
 import { useAudioTrackPlayer } from '../../hooks/useAudioTrackPlayer';
 /**
- * Renders an invisible <audio> element for a single audio track.
- * Uses the shared useAudioTrackPlayer hook for the hybrid native/Web Audio pipeline.
+ * Manages a Web Audio pipeline for a single audio track.
+ * Renders a muted <audio> element as a Chrome keep-alive for the WebRTC track.
+ * All actual audio output goes through Web Audio (GainNode -> ctx.destination).
  */
 function AudioTrackElement({ track, globalVolume, perSourceVolume, isDeafened, isMuted, attenuate, someoneIsSpeaking, attenuationEnabled, attenuationStrength, }) {
     const globalScale = globalVolume / 100;
@@ -20,15 +21,22 @@ function AudioTrackElement({ track, globalVolume, perSourceVolume, isDeafened, i
         volume: finalVolume,
         muted: shouldMute,
     });
-    return _jsx("audio", { ref: audioRef, autoPlay: true, playsInline: true });
+    // The <audio> element is always muted — it serves only as a Chrome
+    // keep-alive so Chrome continues processing the WebRTC track.
+    // Real audio output goes through the Web Audio pipeline.
+    return _jsx("audio", { ref: audioRef, autoPlay: true, playsInline: true, "data-opencord": "keepalive" });
 }
 /**
- * Always-mounted component that renders invisible <audio> elements
+ * Always-mounted component that manages Web Audio pipelines
  * for every remote participant's mic and screen audio tracks.
  *
  * Rendered in AppLayout alongside PictureInPicture and SoundController.
  * Never unmounts during navigation, so audio persists even when
  * VoiceGrid / VoiceUser / StreamTile are not rendered.
+ *
+ * All audio is routed through the Web Audio API (GainNodes connected
+ * to a shared AudioContext.destination). Muted <audio> elements serve
+ * as Chrome keep-alives for WebRTC tracks but produce no sound.
  */
 export function GlobalAudioRenderer() {
     const participants = useVoiceStore((s) => s.participants);
@@ -37,6 +45,7 @@ export function GlobalAudioRenderer() {
     const participantVolumes = useVoiceStore((s) => s.participantVolumes);
     const streamVolumes = useVoiceStore((s) => s.streamVolumes);
     const streamMutes = useVoiceStore((s) => s.streamMutes);
+    const watchingStreams = useVoiceStore((s) => s.watchingStreams);
     const streamAttenuationEnabled = useVoiceStore((s) => s.streamAttenuationEnabled);
     const streamAttenuationStrength = useVoiceStore((s) => s.streamAttenuationStrength);
     // Determine if someone is currently speaking (for stream attenuation)
@@ -47,6 +56,6 @@ export function GlobalAudioRenderer() {
             const micVolume = participantVolumes.get(p.userId) ?? 100;
             const streamVol = streamVolumes.get(p.userId) ?? 100;
             const isStreamMuted = streamMutes.get(p.userId) ?? false;
-            return (_jsxs(React.Fragment, { children: [p.audioTrack && (_jsx(AudioTrackElement, { track: p.audioTrack, globalVolume: outputVolume, perSourceVolume: micVolume, isDeafened: isDeafened, isMuted: false, attenuate: false, someoneIsSpeaking: false, attenuationEnabled: false, attenuationStrength: 0 })), p.screenAudioTrack && (_jsx(AudioTrackElement, { track: p.screenAudioTrack, globalVolume: outputVolume, perSourceVolume: streamVol, isDeafened: isDeafened, isMuted: isStreamMuted, attenuate: true, someoneIsSpeaking: someoneIsSpeaking, attenuationEnabled: streamAttenuationEnabled, attenuationStrength: streamAttenuationStrength }))] }, p.identity));
+            return (_jsxs(React.Fragment, { children: [p.audioTrack && (_jsx(AudioTrackElement, { track: p.audioTrack, globalVolume: outputVolume, perSourceVolume: micVolume, isDeafened: isDeafened, isMuted: false, attenuate: false, someoneIsSpeaking: false, attenuationEnabled: false, attenuationStrength: 0 })), p.screenAudioTrack && watchingStreams.has(p.userId) && (_jsx(AudioTrackElement, { track: p.screenAudioTrack, globalVolume: outputVolume, perSourceVolume: streamVol, isDeafened: isDeafened, isMuted: isStreamMuted, attenuate: true, someoneIsSpeaking: someoneIsSpeaking, attenuationEnabled: streamAttenuationEnabled, attenuationStrength: streamAttenuationStrength }))] }, p.identity));
         }) }));
 }
diff --git a/packages/web/src/components/voice/GlobalAudioRenderer.tsx b/packages/web/src/components/voice/GlobalAudioRenderer.tsx
index 6fe37cde..aab92b15 100644
--- a/packages/web/src/components/voice/GlobalAudioRenderer.tsx
+++ b/packages/web/src/components/voice/GlobalAudioRenderer.tsx
@@ -4,8 +4,9 @@ import { useAudioTrackPlayer } from '../../hooks/useAudioTrackPlayer';
 import type { ParticipantInfo } from '../../hooks/useLiveKit';
 
 /**
- * Renders an invisible <audio> element for a single audio track.
- * Uses the shared useAudioTrackPlayer hook for the hybrid native/Web Audio pipeline.
+ * Manages a Web Audio pipeline for a single audio track.
+ * Renders a muted <audio> element as a Chrome keep-alive for the WebRTC track.
+ * All actual audio output goes through Web Audio (GainNode -> ctx.destination).
  */
 function AudioTrackElement({
   track,
@@ -45,16 +46,23 @@ function AudioTrackElement({
     muted: shouldMute,
   });
 
-  return <audio ref={audioRef} autoPlay playsInline />;
+  // The <audio> element is always muted — it serves only as a Chrome
+  // keep-alive so Chrome continues processing the WebRTC track.
+  // Real audio output goes through the Web Audio pipeline.
+  return <audio ref={audioRef} autoPlay playsInline data-opencord="keepalive" />;
 }
 
 /**
- * Always-mounted component that renders invisible <audio> elements
+ * Always-mounted component that manages Web Audio pipelines
  * for every remote participant's mic and screen audio tracks.
  *
  * Rendered in AppLayout alongside PictureInPicture and SoundController.
  * Never unmounts during navigation, so audio persists even when
  * VoiceGrid / VoiceUser / StreamTile are not rendered.
+ *
+ * All audio is routed through the Web Audio API (GainNodes connected
+ * to a shared AudioContext.destination). Muted <audio> elements serve
+ * as Chrome keep-alives for WebRTC tracks but produce no sound.
  */
 export function GlobalAudioRenderer() {
   const participants = useVoiceStore((s) => s.participants);
@@ -63,6 +71,7 @@ export function GlobalAudioRenderer() {
   const participantVolumes = useVoiceStore((s) => s.participantVolumes);
   const streamVolumes = useVoiceStore((s) => s.streamVolumes);
   const streamMutes = useVoiceStore((s) => s.streamMutes);
+  const watchingStreams = useVoiceStore((s) => s.watchingStreams);
   const streamAttenuationEnabled = useVoiceStore((s) => s.streamAttenuationEnabled);
   const streamAttenuationStrength = useVoiceStore((s) => s.streamAttenuationStrength);
 
@@ -96,8 +105,8 @@ export function GlobalAudioRenderer() {
               />
             )}
 
-            {/* Screen share audio */}
-            {p.screenAudioTrack && (
+            {/* Screen share audio — only when user opted in to watch */}
+            {p.screenAudioTrack && watchingStreams.has(p.userId) && (
               <AudioTrackElement
                 track={p.screenAudioTrack}
                 globalVolume={outputVolume}
diff --git a/packages/web/src/components/voice/StreamTile.js b/packages/web/src/components/voice/StreamTile.js
index 69f73561..f7e6dbca 100644
--- a/packages/web/src/components/voice/StreamTile.js
+++ b/packages/web/src/components/voice/StreamTile.js
@@ -109,7 +109,7 @@ export function StreamTile({ tile, large }) {
     const setAttenuationEnabled = useVoiceStore((s) => s.setStreamAttenuationEnabled);
     const setAttenuationStrength = useVoiceStore((s) => s.setStreamAttenuationStrength);
     const hasVideo = liveScreenTrack !== null;
-    return (_jsxs("div", { className: `relative bg-[#111214] rounded-xl overflow-hidden flex items-center justify-center group transition-all duration-200 ring-1 ring-white/[0.06] hover:ring-white/10 ${large ? 'h-full w-full' : 'h-full aspect-video'}`, onContextMenu: handleContextMenu, children: [hasVideo && isWatching ? (_jsx("video", { ref: videoRef, autoPlay: true, playsInline: true, muted: isLocal, className: "w-full h-full object-contain bg-black" })) : (_jsxs("div", { className: "w-full h-full flex flex-col items-center justify-center gap-3 bg-[#1e1f22]", children: [_jsx("div", { className: "relative", children: _jsx(Avatar, { src: null, name: participant.username, size: large ? 80 : 48 }) }), _jsxs("div", { className: "text-center px-4", children: [_jsxs("p", { className: "text-discord-text-primary text-sm font-semibold", children: [participant.username, " is streaming"] }), !isLocal && (_jsx("button", { onClick: handleWatch, className: "mt-2 px-4 py-1.5 bg-discord-blurple hover:bg-discord-blurple/80 rounded text-white text-xs font-semibold transition-colors", children: "Watch Stream" }))] })] })), _jsx("div", { className: "absolute top-2 left-2 px-1.5 py-0.5 bg-discord-red rounded text-[11px] font-bold text-white uppercase tracking-wide", children: "LIVE" }), qualityBadge && hasVideo && (_jsx("div", { className: "absolute top-2 right-2 px-1.5 py-0.5 bg-black/60 rounded text-[10px] font-bold text-white/70 uppercase tracking-wide", children: qualityBadge })), _jsx("div", { className: "absolute bottom-0 left-0 right-0 px-3 py-2 bg-gradient-to-t from-black/70 via-black/30 to-transparent", children: _jsxs("div", { className: "flex items-center gap-1.5 min-w-0", children: [_jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "currentColor", className: "text-white/70 flex-shrink-0", children: _jsx("path", { d: "M21 3H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h7v2H8v2h8v-2h-2v-2h7c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 14H3V5h18v12z" }) }), _jsx("span", { className: `font-semibold text-white truncate ${large ? 'text-base' : 'text-[13px]'}`, children: participant.username }), isLocal && (_jsx("span", { className: "text-[10px] text-white/40 font-medium", children: "(you)" }))] }) }), contextMenu && (_jsx("div", { className: "fixed z-[60] bg-[#111214] rounded-lg shadow-2xl p-2 min-w-[220px] border border-white/[0.06]", style: { left: contextMenu.x, top: contextMenu.y }, onClick: (e) => e.stopPropagation(), children: isLocal ? (
+    return (_jsxs("div", { className: `relative bg-[#111214] rounded-xl overflow-hidden flex items-center justify-center group transition-all duration-200 ring-1 ring-white/[0.06] hover:ring-white/10 ${large ? 'h-full w-full' : 'h-full aspect-video'}`, onContextMenu: handleContextMenu, children: [hasVideo && isWatching ? (_jsx("video", { ref: videoRef, autoPlay: true, playsInline: true, muted: true, className: "w-full h-full object-contain bg-black" })) : (_jsxs("div", { className: "w-full h-full flex flex-col items-center justify-center gap-3 bg-[#1e1f22]", children: [_jsx("div", { className: "relative", children: _jsx(Avatar, { src: null, name: participant.username, size: large ? 80 : 48 }) }), _jsxs("div", { className: "text-center px-4", children: [_jsxs("p", { className: "text-discord-text-primary text-sm font-semibold", children: [participant.username, " is streaming"] }), !isLocal && (_jsx("button", { onClick: handleWatch, className: "mt-2 px-4 py-1.5 bg-discord-blurple hover:bg-discord-blurple/80 rounded text-white text-xs font-semibold transition-colors", children: "Watch Stream" }))] })] })), _jsx("div", { className: "absolute top-2 left-2 px-1.5 py-0.5 bg-discord-red rounded text-[11px] font-bold text-white uppercase tracking-wide", children: "LIVE" }), qualityBadge && hasVideo && (_jsx("div", { className: "absolute top-2 right-2 px-1.5 py-0.5 bg-black/60 rounded text-[10px] font-bold text-white/70 uppercase tracking-wide", children: qualityBadge })), _jsx("div", { className: "absolute bottom-0 left-0 right-0 px-3 py-2 bg-gradient-to-t from-black/70 via-black/30 to-transparent", children: _jsxs("div", { className: "flex items-center gap-1.5 min-w-0", children: [_jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "currentColor", className: "text-white/70 flex-shrink-0", children: _jsx("path", { d: "M21 3H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h7v2H8v2h8v-2h-2v-2h7c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 14H3V5h18v12z" }) }), _jsx("span", { className: `font-semibold text-white truncate ${large ? 'text-base' : 'text-[13px]'}`, children: participant.username }), isLocal && (_jsx("span", { className: "text-[10px] text-white/40 font-medium", children: "(you)" }))] }) }), contextMenu && (_jsx("div", { className: "fixed z-[60] bg-[#111214] rounded-lg shadow-2xl p-2 min-w-[220px] border border-white/[0.06]", style: { left: contextMenu.x, top: contextMenu.y }, onClick: (e) => e.stopPropagation(), children: isLocal ? (
                 /* Streamer context menu (own stream) */
                 _jsxs(_Fragment, { children: [_jsxs("button", { onClick: () => {
                                 handleStopStreaming();
diff --git a/packages/web/src/components/voice/StreamTile.tsx b/packages/web/src/components/voice/StreamTile.tsx
index 61c7ce62..d8e80de0 100644
--- a/packages/web/src/components/voice/StreamTile.tsx
+++ b/packages/web/src/components/voice/StreamTile.tsx
@@ -143,7 +143,7 @@ export function StreamTile({ tile, large }: StreamTileProps) {
           ref={videoRef}
           autoPlay
           playsInline
-          muted={isLocal}
+          muted
           className="w-full h-full object-contain bg-black"
         />
       ) : (
diff --git a/packages/web/src/components/voice/VoiceGrid.js b/packages/web/src/components/voice/VoiceGrid.js
index ab98ee1c..1aa4a710 100644
--- a/packages/web/src/components/voice/VoiceGrid.js
+++ b/packages/web/src/components/voice/VoiceGrid.js
@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useMemo } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { VoiceUser } from './VoiceUser';
 import { StreamTile } from './StreamTile';
 import { useVoiceStore } from '../../stores/voiceStore';
@@ -7,7 +7,12 @@ import { deriveGridTiles } from '../../hooks/useLiveKit';
 export function VoiceGrid({ participants }) {
     const focusedParticipantId = useVoiceStore((s) => s.focusedParticipantId);
     const setFocusedParticipant = useVoiceStore((s) => s.setFocusedParticipant);
+    const [stripHidden, setStripHidden] = useState(false);
     const tiles = useMemo(() => deriveGridTiles(participants), [participants]);
+    // Reset strip visibility when focus target changes
+    useEffect(() => {
+        setStripHidden(false);
+    }, [focusedParticipantId]);
     // Unfocus if the focused stream tile no longer exists
     useEffect(() => {
         const currentStreamKeys = new Set(tiles
@@ -30,10 +35,15 @@ export function VoiceGrid({ participants }) {
     // Focus mode: one large tile + bottom strip
     if (focusedTile) {
         const otherTiles = tiles.filter((t) => t.key !== focusedParticipantId);
-        return (_jsxs("div", { className: "flex-1 flex flex-col overflow-hidden relative", children: [_jsxs("div", { className: "flex-1 p-2 min-h-0 cursor-pointer", onClick: () => setFocusedParticipant(null), title: "Click to return to grid view", children: [renderTile(focusedTile, true), _jsxs("button", { onClick: (e) => {
+        return (_jsxs("div", { className: "flex-1 flex flex-col overflow-hidden relative", children: [_jsxs("div", { className: "flex-1 p-2 min-h-0 cursor-pointer relative", onClick: () => setFocusedParticipant(null), title: "Click to return to grid view", children: [renderTile(focusedTile, true), _jsxs("button", { onClick: (e) => {
                                 e.stopPropagation();
                                 setFocusedParticipant(null);
-                            }, className: "absolute top-4 right-4 z-10 px-3 py-1.5 bg-black/60 hover:bg-black/80 rounded-lg flex items-center gap-2 text-white/70 hover:text-white transition-colors", title: "Back to grid view", children: [_jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", children: _jsx("path", { d: "M3 3h8v8H3V3zm0 10h8v8H3v-8zm10-10h8v8h-8V3zm0 10h8v8h-8v-8z" }) }), _jsx("span", { className: "text-xs font-medium", children: "Grid" })] })] }), otherTiles.length > 0 && (_jsx("div", { className: "h-[120px] flex-shrink-0 flex items-center justify-center gap-2 p-2 bg-[#111214]/50 overflow-x-auto no-scrollbar", children: otherTiles.map((t) => (_jsx("div", { onClick: () => setFocusedParticipant(t.key), className: "h-full aspect-video flex-shrink-0 cursor-pointer hover:opacity-80 transition-opacity", children: renderTile(t) }, t.key))) }))] }));
+                            }, className: "absolute top-4 right-4 z-10 px-3 py-1.5 bg-black/60 hover:bg-black/80 rounded-lg flex items-center gap-2 text-white/70 hover:text-white transition-colors", title: "Back to grid view", children: [_jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", children: _jsx("path", { d: "M3 3h8v8H3V3zm0 10h8v8H3v-8zm10-10h8v8h-8V3zm0 10h8v8h-8v-8z" }) }), _jsx("span", { className: "text-xs font-medium", children: "Grid" })] })] }), otherTiles.length > 0 && (_jsx("div", { className: "flex justify-center flex-shrink-0 py-1", children: _jsxs("button", { onClick: (e) => {
+                            e.stopPropagation();
+                            setStripHidden(!stripHidden);
+                        }, className: "px-4 py-1 bg-black/50 hover:bg-black/70 rounded-full flex items-center gap-2 text-white/60 hover:text-white transition-colors text-xs", title: stripHidden ? 'Show Members' : 'Hide Members', children: [_jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "currentColor", children: stripHidden
+                                    ? _jsx("path", { d: "M7 14l5-5 5 5z" })
+                                    : _jsx("path", { d: "M7 10l5 5 5-5z" }) }), _jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "currentColor", children: _jsx("path", { d: "M14 8.00598C14 10.211 12.206 12.006 10 12.006C7.795 12.006 6 10.211 6 8.00598C6 5.80098 7.794 4.00598 10 4.00598C12.206 4.00598 14 5.80098 14 8.00598ZM2 19.006C2 15.473 5.29 13.006 10 13.006C14.711 13.006 18 15.473 18 19.006V20.006H2V19.006ZM20 20.006H22V19.006C22 16.451 20.178 14.471 17.532 13.471C19.461 14.601 20 16.561 20 19.006V20.006Z" }) }), _jsx("span", { children: stripHidden ? 'Show Members' : 'Hide Members' })] }) })), !stripHidden && otherTiles.length > 0 && (_jsx("div", { className: "h-[120px] flex-shrink-0 flex items-center justify-center gap-2 p-2 bg-[#111214]/50 overflow-x-auto no-scrollbar", children: otherTiles.map((t) => (_jsx("div", { onClick: () => setFocusedParticipant(t.key), className: "h-full aspect-video flex-shrink-0 cursor-pointer hover:opacity-80 transition-opacity", children: renderTile(t) }, t.key))) }))] }));
     }
     // Default grid mode
     const gridClass = (() => {
diff --git a/packages/web/src/components/voice/VoiceGrid.tsx b/packages/web/src/components/voice/VoiceGrid.tsx
index c1a8c799..c1a919a2 100644
--- a/packages/web/src/components/voice/VoiceGrid.tsx
+++ b/packages/web/src/components/voice/VoiceGrid.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { VoiceUser } from './VoiceUser';
 import { StreamTile } from './StreamTile';
 import { useVoiceStore } from '../../stores/voiceStore';
@@ -12,9 +12,15 @@ interface VoiceGridProps {
 export function VoiceGrid({ participants }: VoiceGridProps) {
   const focusedParticipantId = useVoiceStore((s) => s.focusedParticipantId);
   const setFocusedParticipant = useVoiceStore((s) => s.setFocusedParticipant);
+  const [stripHidden, setStripHidden] = useState(false);
 
   const tiles = useMemo(() => deriveGridTiles(participants), [participants]);
 
+  // Reset strip visibility when focus target changes
+  useEffect(() => {
+    setStripHidden(false);
+  }, [focusedParticipantId]);
+
   // Unfocus if the focused stream tile no longer exists
   useEffect(() => {
     const currentStreamKeys = new Set(
@@ -75,12 +81,12 @@ export function VoiceGrid({ participants }: VoiceGridProps) {
       <div className="flex-1 flex flex-col overflow-hidden relative">
         {/* Main focused view */}
         <div
-          className="flex-1 p-2 min-h-0 cursor-pointer"
+          className="flex-1 p-2 min-h-0 cursor-pointer relative"
           onClick={() => setFocusedParticipant(null)}
           title="Click to return to grid view"
         >
           {renderTile(focusedTile, true)}
-          {/* Back to grid button */}
+          {/* Grid button — top-right */}
           <button
             onClick={(e) => {
               e.stopPropagation();
@@ -101,8 +107,33 @@ export function VoiceGrid({ participants }: VoiceGridProps) {
           </button>
         </div>
 
-        {/* Bottom strip of other tiles */}
+        {/* Centered Hide/Show Members button — divider between focused tile and strip */}
         {otherTiles.length > 0 && (
+          <div className="flex justify-center flex-shrink-0 py-1">
+            <button
+              onClick={(e) => {
+                e.stopPropagation();
+                setStripHidden(!stripHidden);
+              }}
+              className="px-4 py-1 bg-black/50 hover:bg-black/70 rounded-full flex items-center gap-2 text-white/60 hover:text-white transition-colors text-xs"
+              title={stripHidden ? 'Show Members' : 'Hide Members'}
+            >
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
+                {stripHidden
+                  ? <path d="M7 14l5-5 5 5z" />
+                  : <path d="M7 10l5 5 5-5z" />
+                }
+              </svg>
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
+                <path d="M14 8.00598C14 10.211 12.206 12.006 10 12.006C7.795 12.006 6 10.211 6 8.00598C6 5.80098 7.794 4.00598 10 4.00598C12.206 4.00598 14 5.80098 14 8.00598ZM2 19.006C2 15.473 5.29 13.006 10 13.006C14.711 13.006 18 15.473 18 19.006V20.006H2V19.006ZM20 20.006H22V19.006C22 16.451 20.178 14.471 17.532 13.471C19.461 14.601 20 16.561 20 19.006V20.006Z" />
+              </svg>
+              <span>{stripHidden ? 'Show Members' : 'Hide Members'}</span>
+            </button>
+          </div>
+        )}
+
+        {/* Bottom strip of other tiles */}
+        {!stripHidden && otherTiles.length > 0 && (
           <div className="h-[120px] flex-shrink-0 flex items-center justify-center gap-2 p-2 bg-[#111214]/50 overflow-x-auto no-scrollbar">
             {otherTiles.map((t) => (
               <div
diff --git a/packages/web/src/hooks/useAudioTrackPlayer.js b/packages/web/src/hooks/useAudioTrackPlayer.js
index 528d6fe8..2d1c1217 100644
--- a/packages/web/src/hooks/useAudioTrackPlayer.js
+++ b/packages/web/src/hooks/useAudioTrackPlayer.js
@@ -1,101 +1,88 @@
 import { useRef, useEffect } from 'react';
 import { AudioManager } from '../audio/AudioManager';
 /**
- * Shared hybrid audio pipeline hook.
+ * Hybrid audio pipeline for a single remote audio track.
  *
- * Manages an <audio> element ref with two modes:
- *   - Standard mode (volume <= 1.0): uses native HTMLAudioElement volume
- *   - Boost mode (volume > 1.0): routes through Web Audio GainNode for amplification
+ * Architecture:
+ *   1. A MUTED <audio> element keeps Chrome's WebRTC audio pipeline alive
+ *      for the track. Chrome requires an HTML media element consuming a
+ *      WebRTC MediaStreamTrack or it stops processing it. The element is
+ *      always muted (volume=0, muted=true) — it never produces audible output.
  *
- * The caller must render: <audio ref={audioRef} autoPlay playsInline />
+ *   2. A Web Audio pipeline handles ALL actual audio output:
+ *      MediaStreamTrack -> MediaStream -> MediaStreamAudioSourceNode -> GainNode -> ctx.destination
+ *
+ * This gives us:
+ *   - Chrome compatibility (muted <audio> keep-alive)
+ *   - No ducking (all elements are muted, only Web Audio produces sound)
+ *   - Clean mixing (single ctx.destination for all tracks)
+ *   - Full volume range (0.0 – 4.0+) via GainNode
+ *   - Smooth transitions via setTargetAtTime (no clicks/pops)
  */
 export function useAudioTrackPlayer(opts) {
-    const audioRef = useRef(null);
-    const boostGainRef = useRef(null);
-    const boostSourceRef = useRef(null);
     const { track, volume, muted } = opts;
-    // Effect 1: Track attachment
+    const audioRef = useRef(null);
+    const sourceRef = useRef(null);
+    const gainRef = useRef(null);
+    // Keep current volume/muted in refs so Effect 1 can read them
+    // for the initial ramp without depending on them
+    const volumeRef = useRef(volume);
+    const mutedRef = useRef(muted);
+    volumeRef.current = volume;
+    mutedRef.current = muted;
+    // Effect 1: Track attachment (keep-alive) + Web Audio pipeline build
     useEffect(() => {
         const audioEl = audioRef.current;
-        if (!audioEl || !track) {
+        // Tear down previous Web Audio graph
+        if (sourceRef.current) {
+            sourceRef.current.disconnect();
+            sourceRef.current = null;
+        }
+        if (gainRef.current) {
+            gainRef.current.disconnect();
+            gainRef.current = null;
+        }
+        if (!track) {
             if (audioEl)
                 audioEl.srcObject = null;
             return;
         }
+        // --- Keep-alive: attach track to <audio> element (always muted) ---
+        // Chrome needs an HTML element consuming the WebRTC track or it
+        // stops the audio pipeline for that track entirely.
+        if (audioEl) {
+            audioEl.srcObject = new MediaStream([track]);
+            audioEl.muted = true;
+            audioEl.volume = 0;
+            audioEl.play().catch(() => { });
+        }
+        // --- Web Audio pipeline for actual output ---
+        const ctx = AudioManager.getInstance().ensureContext();
         const stream = new MediaStream([track]);
-        // Only update if the stream actually changed to prevent interruptions
-        if (audioEl.srcObject?.id !== stream.id) {
-            audioEl.srcObject = stream;
-            const tryPlay = async () => {
-                try {
-                    await audioEl.play();
-                }
-                catch (err) {
-                    console.warn('[Audio] Autoplay blocked, retrying...', err);
-                }
-            };
-            tryPlay();
-        }
-    }, [track]);
-    // Effect 2: Volume management (hybrid native/Web Audio)
-    useEffect(() => {
-        const audioEl = audioRef.current;
-        if (!audioEl || !track)
-            return;
-        if (muted) {
-            audioEl.muted = true;
-            return;
-        }
-        const audioManager = AudioManager.getInstance();
-        const ctx = audioManager.getContext();
-        const isBoosting = volume > 1.0;
-        const isContextReady = ctx && ctx.state === 'running';
-        if (isBoosting && isContextReady) {
-            // --- BOOST MODE (>100%) ---
-            // Setup pipeline if missing
-            if (!boostGainRef.current && ctx) {
-                const gain = ctx.createGain();
-                const source = ctx.createMediaStreamSource(new MediaStream([track]));
-                source.connect(gain);
-                gain.connect(ctx.destination);
-                boostGainRef.current = gain;
-                boostSourceRef.current = source;
-            }
-            // Apply boosted gain
-            if (boostGainRef.current && ctx) {
-                boostGainRef.current.gain.setTargetAtTime(volume, ctx.currentTime, 0.01);
-            }
-            // MUTE the element so we don't double audio
-            audioEl.muted = true;
-        }
-        else {
-            // --- STANDARD MODE (0% - 100%) ---
-            // Clean up boost pipeline if it exists
-            if (boostGainRef.current) {
-                boostGainRef.current.disconnect();
-                boostGainRef.current = null;
-            }
-            if (boostSourceRef.current) {
-                boostSourceRef.current.disconnect();
-                boostSourceRef.current = null;
-            }
-            audioEl.muted = false;
-            audioEl.volume = Math.min(volume, 1.0);
-            // Ensure it's playing (in case it was paused/blocked earlier)
-            if (audioEl.paused) {
-                audioEl.play().catch(() => { });
-            }
-        }
+        const source = ctx.createMediaStreamSource(stream);
+        const gain = ctx.createGain();
+        // Start gain at 0 to prevent pop, then ramp to target
+        gain.gain.setValueAtTime(0, ctx.currentTime);
+        const targetGain = mutedRef.current ? 0 : volumeRef.current;
+        gain.gain.setTargetAtTime(targetGain, ctx.currentTime, 0.015);
+        source.connect(gain);
+        gain.connect(AudioManager.getInstance().getMasterOutput());
+        sourceRef.current = source;
+        gainRef.current = gain;
         return () => {
-            if (boostGainRef.current) {
-                boostGainRef.current.disconnect();
-                boostGainRef.current = null;
-            }
-            if (boostSourceRef.current) {
-                boostSourceRef.current.disconnect();
-                boostSourceRef.current = null;
-            }
+            source.disconnect();
+            gain.disconnect();
+            sourceRef.current = null;
+            gainRef.current = null;
         };
-    }, [volume, muted, track]);
+    }, [track]);
+    // Effect 2: Update gain when volume or muted changes (no graph rebuild)
+    useEffect(() => {
+        if (!gainRef.current)
+            return;
+        const ctx = AudioManager.getInstance().ensureContext();
+        const targetGain = muted ? 0 : volume;
+        gainRef.current.gain.setTargetAtTime(targetGain, ctx.currentTime, 0.015);
+    }, [volume, muted]);
     return audioRef;
 }
diff --git a/packages/web/src/hooks/useAudioTrackPlayer.ts b/packages/web/src/hooks/useAudioTrackPlayer.ts
index f807a55f..9c153d89 100644
--- a/packages/web/src/hooks/useAudioTrackPlayer.ts
+++ b/packages/web/src/hooks/useAudioTrackPlayer.ts
@@ -3,119 +3,108 @@ import { AudioManager } from '../audio/AudioManager';
 
 interface UseAudioTrackPlayerOptions {
   track: MediaStreamTrack | null;
-  volume: number;  // final computed value, 0.0 – 2.0+
+  volume: number;  // final computed value, 0.0 – 4.0+
   muted: boolean;  // deafen, stream mute, etc.
 }
 
 /**
- * Shared hybrid audio pipeline hook.
+ * Hybrid audio pipeline for a single remote audio track.
  *
- * Manages an <audio> element ref with two modes:
- *   - Standard mode (volume <= 1.0): uses native HTMLAudioElement volume
- *   - Boost mode (volume > 1.0): routes through Web Audio GainNode for amplification
+ * Architecture:
+ *   1. A MUTED <audio> element keeps Chrome's WebRTC audio pipeline alive
+ *      for the track. Chrome requires an HTML media element consuming a
+ *      WebRTC MediaStreamTrack or it stops processing it. The element is
+ *      always muted (volume=0, muted=true) — it never produces audible output.
  *
- * The caller must render: <audio ref={audioRef} autoPlay playsInline />
+ *   2. A Web Audio pipeline handles ALL actual audio output:
+ *      MediaStreamTrack -> MediaStream -> MediaStreamAudioSourceNode -> GainNode -> ctx.destination
+ *
+ * This gives us:
+ *   - Chrome compatibility (muted <audio> keep-alive)
+ *   - No ducking (all elements are muted, only Web Audio produces sound)
+ *   - Clean mixing (single ctx.destination for all tracks)
+ *   - Full volume range (0.0 – 4.0+) via GainNode
+ *   - Smooth transitions via setTargetAtTime (no clicks/pops)
  */
 export function useAudioTrackPlayer(
   opts: UseAudioTrackPlayerOptions,
 ): React.RefObject<HTMLAudioElement> {
-  const audioRef = useRef<HTMLAudioElement | null>(null);
-  const boostGainRef = useRef<GainNode | null>(null);
-  const boostSourceRef = useRef<MediaStreamAudioSourceNode | null>(null);
-
   const { track, volume, muted } = opts;
 
-  // Effect 1: Track attachment
+  const audioRef = useRef<HTMLAudioElement | null>(null);
+  const sourceRef = useRef<MediaStreamAudioSourceNode | null>(null);
+  const gainRef = useRef<GainNode | null>(null);
+
+  // Keep current volume/muted in refs so Effect 1 can read them
+  // for the initial ramp without depending on them
+  const volumeRef = useRef(volume);
+  const mutedRef = useRef(muted);
+  volumeRef.current = volume;
+  mutedRef.current = muted;
+
+  // Effect 1: Track attachment (keep-alive) + Web Audio pipeline build
   useEffect(() => {
     const audioEl = audioRef.current;
-    if (!audioEl || !track) {
+
+    // Tear down previous Web Audio graph
+    if (sourceRef.current) {
+      sourceRef.current.disconnect();
+      sourceRef.current = null;
+    }
+    if (gainRef.current) {
+      gainRef.current.disconnect();
+      gainRef.current = null;
+    }
+
+    if (!track) {
       if (audioEl) audioEl.srcObject = null;
       return;
     }
 
+    // --- Keep-alive: attach track to <audio> element (always muted) ---
+    // Chrome needs an HTML element consuming the WebRTC track or it
+    // stops the audio pipeline for that track entirely.
+    if (audioEl) {
+      audioEl.srcObject = new MediaStream([track]);
+      audioEl.muted = true;
+      audioEl.volume = 0;
+      audioEl.play().catch(() => {});
+    }
+
+    // --- Web Audio pipeline for actual output ---
+    const ctx = AudioManager.getInstance().ensureContext();
+
     const stream = new MediaStream([track]);
+    const source = ctx.createMediaStreamSource(stream);
+    const gain = ctx.createGain();
 
-    // Only update if the stream actually changed to prevent interruptions
-    if ((audioEl.srcObject as MediaStream)?.id !== stream.id) {
-      audioEl.srcObject = stream;
+    // Start gain at 0 to prevent pop, then ramp to target
+    gain.gain.setValueAtTime(0, ctx.currentTime);
+    const targetGain = mutedRef.current ? 0 : volumeRef.current;
+    gain.gain.setTargetAtTime(targetGain, ctx.currentTime, 0.015);
 
-      const tryPlay = async () => {
-        try {
-          await audioEl.play();
-        } catch (err) {
-          console.warn('[Audio] Autoplay blocked, retrying...', err);
-        }
-      };
-      tryPlay();
-    }
-  }, [track]);
+    source.connect(gain);
+    gain.connect(AudioManager.getInstance().getMasterOutput());
 
-  // Effect 2: Volume management (hybrid native/Web Audio)
-  useEffect(() => {
-    const audioEl = audioRef.current;
-    if (!audioEl || !track) return;
-
-    if (muted) {
-      audioEl.muted = true;
-      return;
-    }
-
-    const audioManager = AudioManager.getInstance();
-    const ctx = audioManager.getContext();
-    const isBoosting = volume > 1.0;
-    const isContextReady = ctx && ctx.state === 'running';
-
-    if (isBoosting && isContextReady) {
-      // --- BOOST MODE (>100%) ---
-      // Setup pipeline if missing
-      if (!boostGainRef.current && ctx) {
-        const gain = ctx.createGain();
-        const source = ctx.createMediaStreamSource(new MediaStream([track]));
-        source.connect(gain);
-        gain.connect(ctx.destination);
-        boostGainRef.current = gain;
-        boostSourceRef.current = source;
-      }
-
-      // Apply boosted gain
-      if (boostGainRef.current && ctx) {
-        boostGainRef.current.gain.setTargetAtTime(volume, ctx.currentTime, 0.01);
-      }
-
-      // MUTE the element so we don't double audio
-      audioEl.muted = true;
-    } else {
-      // --- STANDARD MODE (0% - 100%) ---
-      // Clean up boost pipeline if it exists
-      if (boostGainRef.current) {
-        boostGainRef.current.disconnect();
-        boostGainRef.current = null;
-      }
-      if (boostSourceRef.current) {
-        boostSourceRef.current.disconnect();
-        boostSourceRef.current = null;
-      }
-
-      audioEl.muted = false;
-      audioEl.volume = Math.min(volume, 1.0);
-
-      // Ensure it's playing (in case it was paused/blocked earlier)
-      if (audioEl.paused) {
-        audioEl.play().catch(() => {});
-      }
-    }
+    sourceRef.current = source;
+    gainRef.current = gain;
 
     return () => {
-      if (boostGainRef.current) {
-        boostGainRef.current.disconnect();
-        boostGainRef.current = null;
-      }
-      if (boostSourceRef.current) {
-        boostSourceRef.current.disconnect();
-        boostSourceRef.current = null;
-      }
+      source.disconnect();
+      gain.disconnect();
+      sourceRef.current = null;
+      gainRef.current = null;
     };
-  }, [volume, muted, track]);
+  }, [track]);
+
+  // Effect 2: Update gain when volume or muted changes (no graph rebuild)
+  useEffect(() => {
+    if (!gainRef.current) return;
+
+    const ctx = AudioManager.getInstance().ensureContext();
+    const targetGain = muted ? 0 : volume;
+    gainRef.current.gain.setTargetAtTime(targetGain, ctx.currentTime, 0.015);
+  }, [volume, muted]);
 
   return audioRef;
 }
diff --git a/packages/web/src/hooks/useLiveKit.js b/packages/web/src/hooks/useLiveKit.js
index d0166388..0b1fa4f9 100644
--- a/packages/web/src/hooks/useLiveKit.js
+++ b/packages/web/src/hooks/useLiveKit.js
@@ -240,6 +240,8 @@ export function useLiveKit() {
         if (connectedChannelRef.current === channelId && roomRef.current?.state === ConnectionState.Connected)
             return;
         const gen = ++_connectGeneration;
+        // Ensure AudioContext is created and resumed before tracks arrive
+        await AudioManager.getInstance().resumeContext();
         // 1. Reset state immediately to reflect "Loading/Switching" in UI
         setRoom(null);
         setParticipants([]);
@@ -289,7 +291,12 @@ export function useLiveKit() {
                 }
                 guardedUpdate();
             });
-            newRoom.on(RoomEvent.TrackUnsubscribed, guardedUpdate);
+            newRoom.on(RoomEvent.TrackUnsubscribed, (track) => {
+                if (track.kind === Track.Kind.Audio) {
+                    track.detach();
+                }
+                guardedUpdate();
+            });
             newRoom.on(RoomEvent.LocalTrackPublished, (publication) => {
                 if (publication.source === Track.Source.ScreenShare) {
                     const { userId } = parseIdentity(newRoom.localParticipant.identity);
@@ -309,9 +316,9 @@ export function useLiveKit() {
             newRoom.on(RoomEvent.ActiveSpeakersChanged, guardedUpdate);
             newRoom.on(RoomEvent.ParticipantMetadataChanged, guardedUpdate);
             newRoom.on(RoomEvent.TrackPublished, (publication, participant) => {
-                if (publication.source === Track.Source.ScreenShare) {
-                    const { userId } = parseIdentity(participant.identity);
-                    useVoiceStore.getState().watchStream(userId);
+                if (publication.source === Track.Source.ScreenShare ||
+                    publication.source === Track.Source.ScreenShareAudio) {
+                    publication.setSubscribed(false);
                 }
                 guardedUpdate();
             });
@@ -363,6 +370,15 @@ export function useLiveKit() {
             setIsConnected(true);
             useVoiceStore.getState().setIsLiveKitConnected(true);
             updateParticipants();
+            // Unsubscribe from any remote screen share tracks that auto-subscribed during connect
+            newRoom.remoteParticipants.forEach((rp) => {
+                rp.trackPublications.forEach((pub) => {
+                    if ((pub.source === Track.Source.ScreenShare || pub.source === Track.Source.ScreenShareAudio) &&
+                        pub.isSubscribed) {
+                        pub.setSubscribed(false);
+                    }
+                });
+            });
             // Initial mute state check
             const { isMuted: wasMuted, isDeafened: wasDeafened } = useVoiceStore.getState();
             useVoiceStore.setState({ isCameraOn: false, isScreenSharing: false });
@@ -382,6 +398,8 @@ export function useLiveKit() {
     }, [updateParticipants, handleDataReceived]);
     const connectDm = useCallback(async (dmChannelId) => {
         const gen = ++_connectGeneration;
+        // Ensure AudioContext is created and resumed before tracks arrive
+        await AudioManager.getInstance().resumeContext();
         // 1. Reset state immediately
         setRoom(null);
         setParticipants([]);
@@ -419,7 +437,12 @@ export function useLiveKit() {
                 }
                 guardedUpdate();
             });
-            newRoom.on(RoomEvent.TrackUnsubscribed, guardedUpdate);
+            newRoom.on(RoomEvent.TrackUnsubscribed, (track) => {
+                if (track.kind === Track.Kind.Audio) {
+                    track.detach();
+                }
+                guardedUpdate();
+            });
             newRoom.on(RoomEvent.LocalTrackPublished, (publication) => {
                 if (publication.source === Track.Source.ScreenShare) {
                     const { userId } = parseIdentity(newRoom.localParticipant.identity);
@@ -438,9 +461,9 @@ export function useLiveKit() {
             newRoom.on(RoomEvent.TrackUnmuted, guardedUpdate);
             newRoom.on(RoomEvent.ActiveSpeakersChanged, guardedUpdate);
             newRoom.on(RoomEvent.TrackPublished, (publication, participant) => {
-                if (publication.source === Track.Source.ScreenShare) {
-                    const { userId } = parseIdentity(participant.identity);
-                    useVoiceStore.getState().watchStream(userId);
+                if (publication.source === Track.Source.ScreenShare ||
+                    publication.source === Track.Source.ScreenShareAudio) {
+                    publication.setSubscribed(false);
                 }
                 guardedUpdate();
             });
@@ -480,6 +503,15 @@ export function useLiveKit() {
             setIsConnected(true);
             useVoiceStore.getState().setIsLiveKitConnected(true);
             updateParticipants();
+            // Unsubscribe from any remote screen share tracks that auto-subscribed during connect
+            newRoom.remoteParticipants.forEach((rp) => {
+                rp.trackPublications.forEach((pub) => {
+                    if ((pub.source === Track.Source.ScreenShare || pub.source === Track.Source.ScreenShareAudio) &&
+                        pub.isSubscribed) {
+                        pub.setSubscribed(false);
+                    }
+                });
+            });
             const { isMuted: wasMuted, isDeafened: wasDeafened } = useVoiceStore.getState();
             useVoiceStore.setState({ isCameraOn: false, isScreenSharing: false });
             if (wasDeafened) {
diff --git a/packages/web/src/hooks/useLiveKit.ts b/packages/web/src/hooks/useLiveKit.ts
index 7834f4b7..1311ec55 100644
--- a/packages/web/src/hooks/useLiveKit.ts
+++ b/packages/web/src/hooks/useLiveKit.ts
@@ -299,7 +299,10 @@ export function useLiveKit() {
   const connect = useCallback(async (channelId: string) => {
     if (connectedChannelRef.current === channelId && roomRef.current?.state === ConnectionState.Connected) return;
     const gen = ++_connectGeneration;
-    
+
+    // Ensure AudioContext is created and resumed before tracks arrive
+    await AudioManager.getInstance().resumeContext();
+
     // 1. Reset state immediately to reflect "Loading/Switching" in UI
     setRoom(null);
     setParticipants([]);
@@ -354,7 +357,12 @@ export function useLiveKit() {
         }
         guardedUpdate();
       });
-      newRoom.on(RoomEvent.TrackUnsubscribed, guardedUpdate);
+      newRoom.on(RoomEvent.TrackUnsubscribed, (track) => {
+        if (track.kind === Track.Kind.Audio) {
+          (track as RemoteAudioTrack).detach();
+        }
+        guardedUpdate();
+      });
       newRoom.on(RoomEvent.LocalTrackPublished, (publication: LocalTrackPublication) => {
         if (publication.source === Track.Source.ScreenShare) {
           const { userId } = parseIdentity(newRoom.localParticipant.identity);
@@ -374,9 +382,11 @@ export function useLiveKit() {
       newRoom.on(RoomEvent.ActiveSpeakersChanged, guardedUpdate);
       newRoom.on(RoomEvent.ParticipantMetadataChanged, guardedUpdate);
       newRoom.on(RoomEvent.TrackPublished, (publication: RemoteTrackPublication, participant: RemoteParticipant) => {
-        if (publication.source === Track.Source.ScreenShare) {
-          const { userId } = parseIdentity(participant.identity);
-          useVoiceStore.getState().watchStream(userId);
+        if (
+          publication.source === Track.Source.ScreenShare ||
+          publication.source === Track.Source.ScreenShareAudio
+        ) {
+          (publication as RemoteTrackPublication).setSubscribed(false);
         }
         guardedUpdate();
       });
@@ -425,7 +435,19 @@ export function useLiveKit() {
       useVoiceStore.getState().setIsLiveKitConnected(true);
       
       updateParticipants();
-      
+
+      // Unsubscribe from any remote screen share tracks that auto-subscribed during connect
+      newRoom.remoteParticipants.forEach((rp) => {
+        rp.trackPublications.forEach((pub) => {
+          if (
+            (pub.source === Track.Source.ScreenShare || pub.source === Track.Source.ScreenShareAudio) &&
+            pub.isSubscribed
+          ) {
+            (pub as RemoteTrackPublication).setSubscribed(false);
+          }
+        });
+      });
+
       // Initial mute state check
       const { isMuted: wasMuted, isDeafened: wasDeafened } = useVoiceStore.getState();
       useVoiceStore.setState({ isCameraOn: false, isScreenSharing: false });
@@ -441,7 +463,10 @@ export function useLiveKit() {
 
   const connectDm = useCallback(async (dmChannelId: string) => {
     const gen = ++_connectGeneration;
-    
+
+    // Ensure AudioContext is created and resumed before tracks arrive
+    await AudioManager.getInstance().resumeContext();
+
     // 1. Reset state immediately
     setRoom(null);
     setParticipants([]);
@@ -479,7 +504,12 @@ export function useLiveKit() {
         }
         guardedUpdate();
       });
-      newRoom.on(RoomEvent.TrackUnsubscribed, guardedUpdate);
+      newRoom.on(RoomEvent.TrackUnsubscribed, (track) => {
+        if (track.kind === Track.Kind.Audio) {
+          (track as RemoteAudioTrack).detach();
+        }
+        guardedUpdate();
+      });
       newRoom.on(RoomEvent.LocalTrackPublished, (publication: LocalTrackPublication) => {
         if (publication.source === Track.Source.ScreenShare) {
           const { userId } = parseIdentity(newRoom.localParticipant.identity);
@@ -498,9 +528,11 @@ export function useLiveKit() {
       newRoom.on(RoomEvent.TrackUnmuted, guardedUpdate);
       newRoom.on(RoomEvent.ActiveSpeakersChanged, guardedUpdate);
       newRoom.on(RoomEvent.TrackPublished, (publication: RemoteTrackPublication, participant: RemoteParticipant) => {
-        if (publication.source === Track.Source.ScreenShare) {
-          const { userId } = parseIdentity(participant.identity);
-          useVoiceStore.getState().watchStream(userId);
+        if (
+          publication.source === Track.Source.ScreenShare ||
+          publication.source === Track.Source.ScreenShareAudio
+        ) {
+          (publication as RemoteTrackPublication).setSubscribed(false);
         }
         guardedUpdate();
       });
@@ -533,13 +565,26 @@ export function useLiveKit() {
       await newRoom.connect(url, token);
       if (gen !== _connectGeneration) { newRoom.disconnect(); return; }
       const fullId = `dm-${dmChannelId}`;
-      _activeRoom = newRoom; 
-      connectedChannelRef.current = fullId; 
+      _activeRoom = newRoom;
+      connectedChannelRef.current = fullId;
       setConnectedChannelId(fullId);
-      setRoom(newRoom); 
+      setRoom(newRoom);
       setIsConnected(true);
       useVoiceStore.getState().setIsLiveKitConnected(true);
       updateParticipants();
+
+      // Unsubscribe from any remote screen share tracks that auto-subscribed during connect
+      newRoom.remoteParticipants.forEach((rp) => {
+        rp.trackPublications.forEach((pub) => {
+          if (
+            (pub.source === Track.Source.ScreenShare || pub.source === Track.Source.ScreenShareAudio) &&
+            pub.isSubscribed
+          ) {
+            (pub as RemoteTrackPublication).setSubscribed(false);
+          }
+        });
+      });
+
       const { isMuted: wasMuted, isDeafened: wasDeafened } = useVoiceStore.getState();
       useVoiceStore.setState({ isCameraOn: false, isScreenSharing: false });
       
diff --git a/packages/web/src/stores/uiStore.js b/packages/web/src/stores/uiStore.js
index fdde9b86..fe00cfed 100644
--- a/packages/web/src/stores/uiStore.js
+++ b/packages/web/src/stores/uiStore.js
@@ -1,5 +1,5 @@
 import { create } from 'zustand';
-export const useUIStore = create((set) => ({
+export const useUIStore = create((set, get) => ({
     sidebarOpen: true,
     memberListOpen: true,
     activeModal: null,
@@ -15,11 +15,12 @@ export const useUIStore = create((set) => ({
     toggleMemberList: () => set((state) => ({ memberListOpen: !state.memberListOpen })),
     openModal: (modal, data = {}) => set({ activeModal: modal, modalData: data }),
     closeModal: () => set({ activeModal: null, modalData: {} }),
-    setIsMobile: (isMobile) => set({
-        isMobile,
-        sidebarOpen: !isMobile,
-        memberListOpen: !isMobile,
-    }),
+    setIsMobile: (isMobile) => {
+        const prev = get().isMobile;
+        if (prev === isMobile)
+            return;
+        set({ isMobile, sidebarOpen: !isMobile, memberListOpen: !isMobile });
+    },
     setShowDms: (show) => set({ showDms: show }),
     openImagePreview: (url) => set({ activeModal: 'imagePreview', imagePreviewUrl: url }),
     closeImagePreview: () => set({ activeModal: null, imagePreviewUrl: null }),
diff --git a/packages/web/src/stores/uiStore.ts b/packages/web/src/stores/uiStore.ts
index 9cfa137a..5d720d40 100644
--- a/packages/web/src/stores/uiStore.ts
+++ b/packages/web/src/stores/uiStore.ts
@@ -43,7 +43,7 @@ interface UIState {
   setPipCollapsed: (collapsed: boolean) => void;
 }
 
-export const useUIStore = create<UIState>((set) => ({
+export const useUIStore = create<UIState>((set, get) => ({
   sidebarOpen: true,
   memberListOpen: true,
   activeModal: null,
@@ -62,11 +62,11 @@ export const useUIStore = create<UIState>((set) => ({
   openModal: (modal, data = {}) => set({ activeModal: modal, modalData: data }),
   closeModal: () => set({ activeModal: null, modalData: {} }),
 
-  setIsMobile: (isMobile) => set({
-    isMobile,
-    sidebarOpen: !isMobile,
-    memberListOpen: !isMobile,
-  }),
+  setIsMobile: (isMobile) => {
+    const prev = get().isMobile;
+    if (prev === isMobile) return;
+    set({ isMobile, sidebarOpen: !isMobile, memberListOpen: !isMobile });
+  },
 
   setShowDms: (show) => set({ showDms: show }),
 
diff --git a/packages/web/src/stores/voiceStore.js b/packages/web/src/stores/voiceStore.js
index 4dc69d29..6b68adf8 100644
--- a/packages/web/src/stores/voiceStore.js
+++ b/packages/web/src/stores/voiceStore.js
@@ -30,7 +30,7 @@ export const useVoiceStore = create()(persist((set, get) => ({
     streamVolumes: new Map(),
     streamMutes: new Map(),
     watchingStreams: new Set(),
-    streamAttenuationEnabled: true,
+    streamAttenuationEnabled: false,
     streamAttenuationStrength: 50,
     setStreamVolume: (userId, volume) => {
         set((state) => {
@@ -203,6 +203,13 @@ export const useVoiceStore = create()(persist((set, get) => ({
     }),
 }), {
     name: 'opencord-voice-settings',
+    version: 1,
+    migrate: (persistedState, version) => {
+        if (version === 0) {
+            persistedState.streamAttenuationEnabled = false;
+        }
+        return persistedState;
+    },
     storage: createJSONStorage(() => localStorage),
     // Only persist these keys. Maps and Sets are complex to serialize.
     partialize: (state) => ({
diff --git a/packages/web/src/stores/voiceStore.ts b/packages/web/src/stores/voiceStore.ts
index 4f6de8ed..75c56e95 100644
--- a/packages/web/src/stores/voiceStore.ts
+++ b/packages/web/src/stores/voiceStore.ts
@@ -107,7 +107,7 @@ export const useVoiceStore = create<VoiceState>()(
       streamVolumes: new Map(),
       streamMutes: new Map(),
       watchingStreams: new Set(),
-      streamAttenuationEnabled: true,
+      streamAttenuationEnabled: false,
       streamAttenuationStrength: 50,
 
       setStreamVolume: (userId, volume) => {
@@ -296,6 +296,13 @@ export const useVoiceStore = create<VoiceState>()(
     }),
     {
       name: 'opencord-voice-settings',
+      version: 1,
+      migrate: (persistedState: any, version: number) => {
+        if (version === 0) {
+          persistedState.streamAttenuationEnabled = false;
+        }
+        return persistedState;
+      },
       storage: createJSONStorage(() => localStorage),
       // Only persist these keys. Maps and Sets are complex to serialize.
       partialize: (state) => ({