feat: real-time SPEAK permission enforcement in voice channels

Permission changes now take effect immediately without requiring
disconnect/reconnect. Modeled as "permission mute" parallel to
server mute — server recomputes SPEAK for all voice participants
on role/override changes and broadcasts state via WebSocket.
Includes amber UI indicators and mic toggle blocking.

packages/web/src/components/layout/ChannelSidebar.tsx

@@ -37,27 +37,30 @@ export function ChannelSidebar() {
   const myOriginId = useSpaceStore((s) => currentVoiceChannelId ? getMyUserIdForOrigin(getChannelOrigin(currentVoiceChannelId)) : s.members.find(m => m.userId === user?.id)?.userId ?? user?.id);
   const serverMutedUserIds = useVoiceStore((s) => s.serverMutedUserIds);
   const serverDeafenedUserIds = useVoiceStore((s) => s.serverDeafenedUserIds);
+  const permissionMutedUserIds = useVoiceStore((s) => s.permissionMutedUserIds);
   const isServerMuted = !!(myOriginId && spaceId && serverMutedUserIds.has(`${spaceId}:${myOriginId}`));
   const isServerDeafened = !!(myOriginId && spaceId && serverDeafenedUserIds.has(`${spaceId}:${myOriginId}`));
+  const isPermissionMuted = !!(myOriginId && spaceId && permissionMutedUserIds.has(`${spaceId}:${myOriginId}`));
   const navigate = useNavigate();
   const location = useLocation();
 
   const floatingPanelRef = useRef<HTMLDivElement>(null);
-  const [panelHeight, setPanelHeight] = useState(140);
+  const floatingPanelHeight = useUIStore((s) => s.floatingPanelHeight);
+  const setFloatingPanelHeight = useUIStore((s) => s.setFloatingPanelHeight);
 
   useEffect(() => {
     const el = floatingPanelRef.current;
     if (!el) return;
     const ro = new ResizeObserver((entries) => {
       const entry = entries[0];
-      if (entry) setPanelHeight(entry.contentRect.height);
+      if (entry) setFloatingPanelHeight(entry.contentRect.height);
     });
     ro.observe(el);
     return () => ro.disconnect();
-  }, []);
+  }, [setFloatingPanelHeight]);
 
   const handleMicToggle = async () => {
-    if (isServerMuted || isServerDeafened) return;
+    if (isServerMuted || isServerDeafened || isPermissionMuted) return;
     const wasDeafened = useVoiceStore.getState().isDeafened;
     toggleMic();
     broadcastVoiceStatus();
@@ -128,6 +131,7 @@ export function ChannelSidebar() {
           isDeafened={isDeafened}
           isServerMuted={isServerMuted}
           isServerDeafened={isServerDeafened}
+          isPermissionMuted={isPermissionMuted}
           onMicToggle={handleMicToggle}
           onDeafenToggle={handleDeafenToggle}
           onSettingsClick={(tab) => openModal('userSettings', tab ? { tab } : {})}
@@ -145,7 +149,7 @@ export function ChannelSidebar() {
             Find or start a conversation
           </button>
         </div>
-        <div className="flex-1 overflow-y-auto pt-4 px-2 no-scrollbar" style={{ paddingBottom: panelHeight + 24 }}>
+        <div className="flex-1 overflow-y-auto pt-4 px-2 no-scrollbar" style={{ paddingBottom: floatingPanelHeight + 24 }}>
           <div
             onClick={handleHomeClick}
             className={`flex items-center gap-3 px-2 h-[42px] rounded-[4px] cursor-pointer mb-[2px] transition-colors group ${
@@ -325,7 +329,7 @@ export function ChannelSidebar() {
       </div>
 
       {/* Channels */}
-      <div className="flex-1 overflow-y-auto pt-3 px-2 space-y-[21px] no-scrollbar" style={{ paddingBottom: panelHeight + 24 }}>
+      <div className="flex-1 overflow-y-auto pt-3 px-2 space-y-[21px] no-scrollbar" style={{ paddingBottom: floatingPanelHeight + 24 }}>
         {/* Text Channels */}
         <div>
           <div className="flex items-center justify-between px-1 mb-1 group cursor-pointer">
@@ -457,6 +461,7 @@ function UserAreaPanel({
   isDeafened,
   isServerMuted,
   isServerDeafened,
+  isPermissionMuted,
   onMicToggle,
   onDeafenToggle,
   onSettingsClick,
@@ -466,6 +471,7 @@ function UserAreaPanel({
   isDeafened: boolean;
   isServerMuted: boolean;
   isServerDeafened: boolean;
+  isPermissionMuted: boolean;
   onMicToggle: () => void;
   onDeafenToggle: () => void;
   onSettingsClick: (tab?: string) => void;
@@ -780,15 +786,15 @@ function UserAreaPanel({
           <button
             onClick={onMicToggle}
             className={`w-8 h-8 flex items-center justify-center hover:bg-interactive-hover rounded-l-[4px] transition-colors ${
-              (isServerMuted || isServerDeafened) ? 'text-accent-amber cursor-not-allowed'
+              (isServerMuted || isServerDeafened || isPermissionMuted) ? 'text-accent-amber cursor-not-allowed'
                 : isMuted || isDeafened ? 'text-txt-danger' : 'text-txt-tertiary hover:text-txt-primary'
             }`}
-            title={(isServerMuted || isServerDeafened) ? 'Server Muted' : isMuted ? 'Unmute' : 'Mute'}
+            title={(isPermissionMuted) ? 'Muted (No Speak Permission)' : (isServerMuted || isServerDeafened) ? 'Server Muted' : isMuted ? 'Unmute' : 'Mute'}
           >
             <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
               <path d="M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3z" />
               <path d="M17 11c0 2.76-2.24 5-5 5s-5-2.24-5-5H5c0 3.53 2.61 6.43 6 6.92V21h2v-3.08c3.39-.49 6-3.39 6-6.92h-2z" />
-              {(isMuted || isDeafened || isServerMuted || isServerDeafened) && <line x1="3" y1="3" x2="21" y2="21" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" />}
+              {(isMuted || isDeafened || isServerMuted || isServerDeafened || isPermissionMuted) && <line x1="3" y1="3" x2="21" y2="21" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" />}
             </svg>
           </button>
           {/* Input chevron */}

packages/web/src/components/layout/SpaceSidebar.tsx

@@ -170,6 +170,7 @@ export function SpaceSidebar() {
   const setShowDms = useUIStore((s) => s.setShowDms);
   const openModal = useUIStore((s) => s.openModal);
   const addToast = useUIStore((s) => s.addToast);
+  const floatingPanelHeight = useUIStore((s) => s.floatingPanelHeight);
   const setCurrentChannel = useChatStore((s) => s.setCurrentChannel);
   const unreadChannels = useChatStore((s) => s.unreadChannels);
   const instances = useInstanceStore((s) => s.instances);
@@ -246,7 +247,7 @@ export function SpaceSidebar() {
   };
 
   return (
-    <nav data-pip-obstacle="left" className="w-[72px] bg-surface-base flex flex-col items-center py-3 overflow-y-auto flex-shrink-0 no-scrollbar select-none md:fixed md:inset-y-0 md:left-0 md:z-[100] md:glass-strip">
+    <nav data-pip-obstacle="left" className="w-[72px] bg-surface-base flex flex-col items-center py-3 overflow-y-auto flex-shrink-0 no-scrollbar select-none md:fixed md:inset-y-0 md:left-0 md:z-[100] md:glass-strip" style={{ paddingBottom: floatingPanelHeight + 24 }}>
       <SidebarItem
         id="@me"
         name="Direct Messages"