chore(release): 3.9.2 [skip ci]

## [3.9.2](https://github.com/antialias/soroban-abacus-flashcards/compare/v3.9.1...v3.9.2) (2025-10-14)

### Bug Fixes

* remove duplicate ModerationNotifications causing double toasts ([c6886a0](c6886a0e59))

CHANGELOG.md

@@ -1,3 +1,92 @@
+## [3.9.2](https://github.com/antialias/soroban-abacus-flashcards/compare/v3.9.1...v3.9.2) (2025-10-14)
+
+
+### Bug Fixes
+
+* remove duplicate ModerationNotifications causing double toasts ([c6886a0](https://github.com/antialias/soroban-abacus-flashcards/commit/c6886a0e59b3cbf051a828e0157495101cd8c823))
+
+## [3.9.1](https://github.com/antialias/soroban-abacus-flashcards/compare/v3.9.0...v3.9.1) (2025-10-14)
+
+
+### Bug Fixes
+
+* reset join request toast state when moderation event cleared ([6beb58a](https://github.com/antialias/soroban-abacus-flashcards/commit/6beb58a7b8f8e1841c71729a3517ab459e924aa9))
+
+## [3.9.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v3.8.1...v3.9.0) (2025-10-14)
+
+
+### Features
+
+* prevent invitations to retired rooms ([a7c3c1f](https://github.com/antialias/soroban-abacus-flashcards/commit/a7c3c1f4cd802985c8f040bc1cdf3ea4482a2fce))
+
+## [3.8.1](https://github.com/antialias/soroban-abacus-flashcards/compare/v3.8.0...v3.8.1) (2025-10-14)
+
+
+### Bug Fixes
+
+* improve kicked modal message for retired room ejections ([f865ce1](https://github.com/antialias/soroban-abacus-flashcards/commit/f865ce16ecf7648e41549795c8137f4fc33e34ac))
+
+## [3.8.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v3.7.1...v3.8.0) (2025-10-14)
+
+
+### Features
+
+* implement proper retired room behavior with member expulsion ([a2d5368](https://github.com/antialias/soroban-abacus-flashcards/commit/a2d53680f27db04b2cd09973e62a76c5a7d4ce06))
+
+## [3.7.1](https://github.com/antialias/soroban-abacus-flashcards/compare/v3.7.0...v3.7.1) (2025-10-14)
+
+
+### Bug Fixes
+
+* improve join request approval error handling with actionable messages ([57bf846](https://github.com/antialias/soroban-abacus-flashcards/commit/57bf8460c8ecff374355bfb93f4b06dfbb148273))
+
+## [3.7.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v3.6.3...v3.7.0) (2025-10-14)
+
+
+### Features
+
+* add prominent join request approval notifications for room moderators ([036da6d](https://github.com/antialias/soroban-abacus-flashcards/commit/036da6de66ca7d3f459c55df657b04a9e88d9cd3))
+
+## [3.6.3](https://github.com/antialias/soroban-abacus-flashcards/compare/v3.6.2...v3.6.3) (2025-10-14)
+
+
+### Bug Fixes
+
+* update locked room terminology and allow existing members ([1ddf985](https://github.com/antialias/soroban-abacus-flashcards/commit/1ddf985938d9542fe26e44da58234f3d4e3c9543))
+
+## [3.6.2](https://github.com/antialias/soroban-abacus-flashcards/compare/v3.6.1...v3.6.2) (2025-10-14)
+
+
+### Bug Fixes
+
+* allow join with pending invitation for restricted rooms ([85b2cf9](https://github.com/antialias/soroban-abacus-flashcards/commit/85b2cf98167ccf632ab634a94eb436e1eb584614))
+
+## [3.6.1](https://github.com/antialias/soroban-abacus-flashcards/compare/v3.6.0...v3.6.1) (2025-10-14)
+
+
+### Bug Fixes
+
+* join user socket channel to receive approval notifications ([7d08fdd](https://github.com/antialias/soroban-abacus-flashcards/commit/7d08fdd90643920857eda09998ac01afbae74154))
+
+
+### Code Refactoring
+
+* remove redundant polling from approval notifications ([0d4f400](https://github.com/antialias/soroban-abacus-flashcards/commit/0d4f400dca02ad9497522c24fded8b6d07d85fd2))
+
+## [3.6.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v3.5.0...v3.6.0) (2025-10-14)
+
+
+### Features
+
+* add socket listener and polling for approval notifications ([35b4a72](https://github.com/antialias/soroban-abacus-flashcards/commit/35b4a72c8b2f80a74b5d2fe02b048d4ec4d1d6f2))
+
+## [3.5.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v3.4.0...v3.5.0) (2025-10-14)
+
+
+### Features
+
+* replace access mode dropdown with visual button grid ([e5d0672](https://github.com/antialias/soroban-abacus-flashcards/commit/e5d067205989d7c3105998dcd7d67fd0408f332c))
+
 ## [3.4.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v3.3.1...v3.4.0) (2025-10-14)
 
 

apps/web/src/app/api/arcade/rooms/[roomId]/invite/route.ts

@@ -1,13 +1,14 @@
 import { type NextRequest, NextResponse } from 'next/server'
-import { getRoomMembers } from '@/lib/arcade/room-membership'
 import {
   createInvitation,
   declineInvitation,
   getInvitation,
   getRoomInvitations,
 } from '@/lib/arcade/room-invitations'
-import { getViewerId } from '@/lib/viewer'
+import { getRoomById } from '@/lib/arcade/room-manager'
+import { getRoomMembers } from '@/lib/arcade/room-membership'
 import { getSocketIO } from '@/lib/socket-io'
+import { getViewerId } from '@/lib/viewer'
 
 type RouteContext = {
   params: Promise<{ roomId: string }>
@@ -35,6 +36,20 @@ export async function POST(req: NextRequest, context: RouteContext) {
       )
     }
 
+    // Get room to check access mode
+    const room = await getRoomById(roomId)
+    if (!room) {
+      return NextResponse.json({ error: 'Room not found' }, { status: 404 })
+    }
+
+    // Cannot invite to retired rooms
+    if (room.accessMode === 'retired') {
+      return NextResponse.json(
+        { error: 'Cannot send invitations to retired rooms' },
+        { status: 403 }
+      )
+    }
+
     // Check if user is the host
     const members = await getRoomMembers(roomId)
     const currentMember = members.find((m) => m.userId === viewerId)

apps/web/src/app/api/arcade/rooms/[roomId]/join-requests/route.ts

@@ -2,6 +2,7 @@ import { type NextRequest, NextResponse } from 'next/server'
 import { createJoinRequest, getPendingJoinRequests } from '@/lib/arcade/room-join-requests'
 import { getRoomById } from '@/lib/arcade/room-manager'
 import { getRoomMembers } from '@/lib/arcade/room-membership'
+import { getSocketIO } from '@/lib/socket-io'
 import { getViewerId } from '@/lib/viewer'
 
 type RouteContext = {
@@ -87,6 +88,29 @@ export async function POST(req: NextRequest, context: RouteContext) {
       `[Join Requests] Created request for user ${viewerId} (${displayName}) to join room ${roomId}`
     )
 
+    // Broadcast to all members in the room (particularly the host) via socket
+    const io = await getSocketIO()
+    if (io) {
+      try {
+        io.to(`room:${roomId}`).emit('join-request-submitted', {
+          roomId,
+          request: {
+            id: request.id,
+            userId: request.userId,
+            userName: request.userName,
+            createdAt: request.requestedAt,
+          },
+        })
+
+        console.log(
+          `[Join Requests] Broadcasted join-request-submitted for user ${viewerId} to room ${roomId}`
+        )
+      } catch (socketError) {
+        // Log but don't fail the request if socket broadcast fails
+        console.error('[Join Requests] Failed to broadcast join-request-submitted:', socketError)
+      }
+    }
+
     return NextResponse.json({ request }, { status: 201 })
   } catch (error: any) {
     console.error('Failed to create join request:', error)

apps/web/src/app/api/arcade/rooms/[roomId]/join/route.ts

@@ -1,13 +1,13 @@
+import bcrypt from 'bcryptjs'
 import { type NextRequest, NextResponse } from 'next/server'
-import { getRoomById, touchRoom } from '@/lib/arcade/room-manager'
-import { addRoomMember, getRoomMembers } from '@/lib/arcade/room-membership'
 import { getActivePlayers, getRoomActivePlayers } from '@/lib/arcade/player-manager'
-import { isUserBanned } from '@/lib/arcade/room-moderation'
 import { getInvitation } from '@/lib/arcade/room-invitations'
 import { getJoinRequest } from '@/lib/arcade/room-join-requests'
-import { getViewerId } from '@/lib/viewer'
+import { getRoomById, touchRoom } from '@/lib/arcade/room-manager'
+import { addRoomMember, getRoomMembers } from '@/lib/arcade/room-membership'
+import { isUserBanned } from '@/lib/arcade/room-moderation'
 import { getSocketIO } from '@/lib/socket-io'
-import bcrypt from 'bcryptjs'
+import { getViewerId } from '@/lib/viewer'
 
 type RouteContext = {
   params: Promise<{ roomId: string }>
@@ -38,13 +38,32 @@ export async function POST(req: NextRequest, context: RouteContext) {
       return NextResponse.json({ error: 'You are banned from this room' }, { status: 403 })
     }
 
+    // Check if user is already a member (for locked/retired room access)
+    const members = await getRoomMembers(roomId)
+    const isExistingMember = members.some((m) => m.userId === viewerId)
+    const isRoomCreator = room.createdBy === viewerId
+
     // Validate access mode
     switch (room.accessMode) {
       case 'locked':
-        return NextResponse.json({ error: 'This room is locked' }, { status: 403 })
+        // Allow existing members to continue using the room, but block new members
+        if (!isExistingMember) {
+          return NextResponse.json(
+            { error: 'This room is locked and not accepting new members' },
+            { status: 403 }
+          )
+        }
+        break
 
       case 'retired':
-        return NextResponse.json({ error: 'This room has been retired' }, { status: 410 })
+        // Only the room creator can access retired rooms
+        if (!isRoomCreator) {
+          return NextResponse.json(
+            { error: 'This room has been retired and is only accessible to the owner' },
+            { status: 410 }
+          )
+        }
+        break
 
       case 'password': {
         if (!body.password) {
@@ -86,8 +105,6 @@ export async function POST(req: NextRequest, context: RouteContext) {
         }
         break
       }
-
-      case 'open':
       default:
         // No additional checks needed
         break

apps/web/src/app/api/arcade/rooms/[roomId]/settings/route.ts

@@ -1,9 +1,12 @@
-import { eq } from 'drizzle-orm'
+import bcrypt from 'bcryptjs'
+import { and, eq } from 'drizzle-orm'
 import { type NextRequest, NextResponse } from 'next/server'
 import { db, schema } from '@/db'
+import { getRoomActivePlayers } from '@/lib/arcade/player-manager'
+import { recordRoomMemberHistory } from '@/lib/arcade/room-member-history'
 import { getRoomMembers } from '@/lib/arcade/room-membership'
+import { getSocketIO } from '@/lib/socket-io'
 import { getViewerId } from '@/lib/viewer'
-import bcrypt from 'bcryptjs'
 
 type RouteContext = {
   params: Promise<{ roomId: string }>
@@ -79,6 +82,72 @@ export async function PATCH(req: NextRequest, context: RouteContext) {
       .where(eq(schema.arcadeRooms.id, roomId))
       .returning()
 
+    // If setting to retired, expel all non-owner members
+    if (body.accessMode === 'retired') {
+      const nonOwnerMembers = members.filter((m) => !m.isCreator)
+
+      if (nonOwnerMembers.length > 0) {
+        // Remove all non-owner members from the room
+        await db.delete(schema.roomMembers).where(
+          and(
+            eq(schema.roomMembers.roomId, roomId),
+            // Delete all members except the creator
+            eq(schema.roomMembers.isCreator, false)
+          )
+        )
+
+        // Record in history for each expelled member
+        for (const member of nonOwnerMembers) {
+          await recordRoomMemberHistory({
+            roomId,
+            userId: member.userId,
+            displayName: member.displayName,
+            action: 'left',
+          })
+        }
+
+        // Broadcast updates via socket
+        const io = await getSocketIO()
+        if (io) {
+          try {
+            // Get updated member list (should only be the owner now)
+            const updatedMembers = await getRoomMembers(roomId)
+            const memberPlayers = await getRoomActivePlayers(roomId)
+
+            // Convert memberPlayers Map to object for JSON serialization
+            const memberPlayersObj: Record<string, any[]> = {}
+            for (const [uid, players] of memberPlayers.entries()) {
+              memberPlayersObj[uid] = players
+            }
+
+            // Notify each expelled member
+            for (const member of nonOwnerMembers) {
+              io.to(`user:${member.userId}`).emit('kicked-from-room', {
+                roomId,
+                kickedBy: currentMember.displayName,
+                reason: 'Room has been retired',
+              })
+            }
+
+            // Notify the owner that members were expelled
+            io.to(`room:${roomId}`).emit('member-left', {
+              roomId,
+              userId: nonOwnerMembers.map((m) => m.userId),
+              members: updatedMembers,
+              memberPlayers: memberPlayersObj,
+              reason: 'room-retired',
+            })
+
+            console.log(
+              `[Settings API] Expelled ${nonOwnerMembers.length} members from retired room ${roomId}`
+            )
+          } catch (socketError) {
+            console.error('[Settings API] Failed to broadcast member expulsion:', socketError)
+          }
+        }
+      }
+    }
+
     return NextResponse.json({ room: updatedRoom }, { status: 200 })
   } catch (error: any) {
     console.error('Failed to update room settings:', error)

apps/web/src/app/arcade/room/page.tsx

@@ -1,7 +1,6 @@
 'use client'
 
 import { useRoomData } from '@/hooks/useRoomData'
-import { ModerationNotifications } from '@/components/nav/ModerationNotifications'
 import { MemoryPairsGame } from '../matching/components/MemoryPairsGame'
 import { RoomMemoryPairsProvider } from '../matching/context/RoomMemoryPairsProvider'
 
@@ -11,60 +10,57 @@ import { RoomMemoryPairsProvider } from '../matching/context/RoomMemoryPairsProv
  *
  * Note: We don't redirect to /arcade if no room exists to avoid navigation loops.
  * Instead, we show a friendly message with a link back to the Champion Arena.
+ *
+ * Note: ModerationNotifications is handled by PageWithNav inside each game component,
+ * so we don't need to render it here.
  */
 export default function RoomPage() {
-  const { roomData, isLoading, moderationEvent, clearModerationEvent } = useRoomData()
+  const { roomData, isLoading } = useRoomData()
 
   // Show loading state
   if (isLoading) {
     return (
-      <>
-        <div
-          style={{
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            height: '100vh',
-            fontSize: '18px',
-            color: '#666',
-          }}
-        >
-          Loading room...
-        </div>
-        <ModerationNotifications moderationEvent={moderationEvent} onClose={clearModerationEvent} />
-      </>
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          height: '100vh',
+          fontSize: '18px',
+          color: '#666',
+        }}
+      >
+        Loading room...
+      </div>
     )
   }
 
   // Show error if no room (instead of redirecting)
   if (!roomData) {
     return (
-      <>
-        <div
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          height: '100vh',
+          fontSize: '18px',
+          color: '#666',
+          gap: '1rem',
+        }}
+      >
+        <div>No active room found</div>
+        <a
+          href="/arcade"
           style={{
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-            justifyContent: 'center',
-            height: '100vh',
-            fontSize: '18px',
-            color: '#666',
-            gap: '1rem',
+            color: '#3b82f6',
+            textDecoration: 'underline',
           }}
         >
-          <div>No active room found</div>
-          <a
-            href="/arcade"
-            style={{
-              color: '#3b82f6',
-              textDecoration: 'underline',
-            }}
-          >
-            Go to Champion Arena
-          </a>
-        </div>
-        <ModerationNotifications moderationEvent={moderationEvent} onClose={clearModerationEvent} />
-      </>
+          Go to Champion Arena
+        </a>
+      </div>
     )
   }
 
@@ -72,38 +68,26 @@ export default function RoomPage() {
   switch (roomData.gameName) {
     case 'matching':
       return (
-        <>
-          <RoomMemoryPairsProvider>
-            <MemoryPairsGame />
-          </RoomMemoryPairsProvider>
-          <ModerationNotifications
-            moderationEvent={moderationEvent}
-            onClose={clearModerationEvent}
-          />
-        </>
+        <RoomMemoryPairsProvider>
+          <MemoryPairsGame />
+        </RoomMemoryPairsProvider>
       )
 
     // TODO: Add other games (complement-race, memory-quiz, etc.)
     default:
       return (
-        <>
-          <div
-            style={{
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-              height: '100vh',
-              fontSize: '18px',
-              color: '#666',
-            }}
-          >
-            Game "{roomData.gameName}" not yet supported
-          </div>
-          <ModerationNotifications
-            moderationEvent={moderationEvent}
-            onClose={clearModerationEvent}
-          />
-        </>
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            height: '100vh',
+            fontSize: '18px',
+            color: '#666',
+          }}
+        >
+          Game "{roomData.gameName}" not yet supported
+        </div>
       )
   }
 }

apps/web/src/app/join/[code]/page.tsx

@@ -2,6 +2,7 @@
 
 import { useRouter } from 'next/navigation'
 import { useCallback, useEffect, useState } from 'react'
+import { io } from 'socket.io-client'
 import { useGetRoomByCode, useJoinRoom, useRoomData } from '@/hooks/useRoomData'
 import { getRoomDisplayWithEmoji } from '@/utils/room-display'
 
@@ -276,21 +277,17 @@ export default function JoinRoomPage({ params }: { params: { code: string } }) {
           return
         }
 
-        if (room.accessMode === 'restricted') {
-          setError('This room is invitation-only')
-          return
-        }
-
         if (room.accessMode === 'approval-only') {
           setShowApprovalPrompt(true)
           return
         }
 
+        // For restricted rooms, try to join - the API will check for invitation
         // If user is in a different room, show confirmation
         if (roomData) {
           setShowConfirmation(true)
         } else {
-          // Otherwise, auto-join (for open rooms)
+          // Otherwise, auto-join (for open rooms and restricted rooms with invitation)
           handleJoin(room.id)
         }
       })
@@ -351,6 +348,60 @@ export default function JoinRoomPage({ params }: { params: { code: string } }) {
     }
   }
 
+  // Socket listener for approval notifications
+  useEffect(() => {
+    if (!approvalRequested || !targetRoomData) return
+
+    console.log('[Join Page] Setting up approval listener for room:', targetRoomData.id)
+
+    let socket: ReturnType<typeof io> | null = null
+
+    // Fetch viewer ID and set up socket
+    const setupSocket = async () => {
+      try {
+        // Get current user's viewer ID
+        const res = await fetch('/api/viewer')
+        if (!res.ok) {
+          console.error('[Join Page] Failed to get viewer ID')
+          return
+        }
+
+        const { viewerId } = await res.json()
+        console.log('[Join Page] Got viewer ID:', viewerId)
+
+        // Connect socket
+        socket = io({ path: '/api/socket' })
+
+        socket.on('connect', () => {
+          console.log('[Join Page] Socket connected, joining user channel')
+          // Join user-specific channel to receive moderation events
+          socket?.emit('join-user-channel', { userId: viewerId })
+        })
+
+        socket.on('join-request-approved', (data: { roomId: string; requestId: string }) => {
+          console.log('[Join Page] Request approved via socket!', data)
+          if (data.roomId === targetRoomData.id) {
+            console.log('[Join Page] Joining room automatically...')
+            handleJoin(targetRoomData.id)
+          }
+        })
+
+        socket.on('connect_error', (error) => {
+          console.error('[Join Page] Socket connection error:', error)
+        })
+      } catch (error) {
+        console.error('[Join Page] Error setting up socket:', error)
+      }
+    }
+
+    setupSocket()
+
+    return () => {
+      console.log('[Join Page] Cleaning up approval listener')
+      socket?.disconnect()
+    }
+  }, [approvalRequested, targetRoomData, handleJoin])
+
   // Only show error page for non-password and non-approval errors
   if (error && !showPasswordPrompt && !showApprovalPrompt) {
     return (

apps/web/src/components/nav/JoinRoomModal.tsx

@@ -1,4 +1,5 @@
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
+import { io } from 'socket.io-client'
 import { Modal } from '@/components/common/Modal'
 import type { schema } from '@/db'
 import { useRoomData } from '@/hooks/useRoomData'
@@ -76,18 +77,14 @@ export function JoinRoomModal({ isOpen, onClose, onSuccess }: JoinRoomModalProps
         return
       }
 
-      if (room.accessMode === 'restricted') {
-        setError('This room is invitation-only. Please ask the host for an invitation.')
-        setIsLoading(false)
-        return
-      }
-
       if (room.accessMode === 'approval-only') {
         setNeedsApproval(true)
         setIsLoading(false)
         return
       }
 
+      // For restricted rooms, try to join - the API will check for invitation
+
       if (room.accessMode === 'password') {
         // Check if password is provided
         if (!needsPassword) {
@@ -142,6 +139,67 @@ export function JoinRoomModal({ isOpen, onClose, onSuccess }: JoinRoomModalProps
     }
   }
 
+  // Socket listener for approval notifications
+  useEffect(() => {
+    if (!approvalRequested || !roomInfo) return
+
+    console.log('[JoinRoomModal] Setting up approval listener for room:', roomInfo.id)
+
+    let socket: ReturnType<typeof io> | null = null
+
+    // Fetch viewer ID and set up socket
+    const setupSocket = async () => {
+      try {
+        // Get current user's viewer ID
+        const res = await fetch('/api/viewer')
+        if (!res.ok) {
+          console.error('[JoinRoomModal] Failed to get viewer ID')
+          return
+        }
+
+        const { viewerId } = await res.json()
+        console.log('[JoinRoomModal] Got viewer ID:', viewerId)
+
+        // Connect socket
+        socket = io({ path: '/api/socket' })
+
+        socket.on('connect', () => {
+          console.log('[JoinRoomModal] Socket connected, joining user channel')
+          // Join user-specific channel to receive moderation events
+          socket?.emit('join-user-channel', { userId: viewerId })
+        })
+
+        socket.on('join-request-approved', async (data: { roomId: string; requestId: string }) => {
+          console.log('[JoinRoomModal] Request approved via socket!', data)
+          if (data.roomId === roomInfo.id) {
+            console.log('[JoinRoomModal] Joining room automatically...')
+            try {
+              await joinRoom(roomInfo.id)
+              handleClose()
+              onSuccess?.()
+            } catch (err) {
+              setError(err instanceof Error ? err.message : 'Failed to join room')
+              setIsLoading(false)
+            }
+          }
+        })
+
+        socket.on('connect_error', (error) => {
+          console.error('[JoinRoomModal] Socket connection error:', error)
+        })
+      } catch (error) {
+        console.error('[JoinRoomModal] Error setting up socket:', error)
+      }
+    }
+
+    setupSocket()
+
+    return () => {
+      console.log('[JoinRoomModal] Cleaning up approval listener')
+      socket?.disconnect()
+    }
+  }, [approvalRequested, roomInfo, joinRoom, handleClose, onSuccess])
+
   return (
     <Modal isOpen={isOpen} onClose={handleClose}>
       <div

apps/web/src/components/nav/ModerationNotifications.tsx

@@ -1,6 +1,7 @@
-import { useEffect, useState } from 'react'
-import { useRouter } from 'next/navigation'
 import * as Toast from '@radix-ui/react-toast'
+import { useQueryClient } from '@tanstack/react-query'
+import { useRouter } from 'next/navigation'
+import { useEffect, useState } from 'react'
 import { Modal } from '@/components/common/Modal'
 import type { ModerationEvent } from '@/hooks/useRoomData'
 import { useJoinRoom } from '@/hooks/useRoomData'
@@ -25,8 +26,12 @@ export function ModerationNotifications({
   onClose,
 }: ModerationNotificationsProps) {
   const router = useRouter()
+  const queryClient = useQueryClient()
   const [showToast, setShowToast] = useState(false)
+  const [showJoinRequestToast, setShowJoinRequestToast] = useState(false)
   const [isAcceptingInvitation, setIsAcceptingInvitation] = useState(false)
+  const [isProcessingRequest, setIsProcessingRequest] = useState(false)
+  const [requestError, setRequestError] = useState<string | null>(null)
   const { mutateAsync: joinRoom } = useJoinRoom()
 
   // Handle report toast (for hosts)
@@ -42,8 +47,94 @@ export function ModerationNotifications({
     }
   }, [moderationEvent, onClose])
 
+  // Handle join request toast (for hosts)
+  useEffect(() => {
+    if (moderationEvent?.type === 'join-request') {
+      setShowJoinRequestToast(true)
+      setRequestError(null) // Clear any previous errors
+    } else {
+      // Reset toast state when event is cleared or changes type
+      setShowJoinRequestToast(false)
+      setRequestError(null)
+    }
+  }, [moderationEvent])
+
+  // Handle approve join request
+  const handleApprove = async () => {
+    if (!moderationEvent?.data.requestId || !moderationEvent?.data.roomId) return
+
+    setIsProcessingRequest(true)
+    setRequestError(null) // Clear any previous errors
+
+    try {
+      const response = await fetch(
+        `/api/arcade/rooms/${moderationEvent.data.roomId}/join-requests/${moderationEvent.data.requestId}/approve`,
+        {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+        }
+      )
+
+      if (!response.ok) {
+        const errorData = await response.json().catch(() => ({}))
+        throw new Error(errorData.error || 'Failed to approve join request')
+      }
+
+      // Close toast and event on success
+      setShowJoinRequestToast(false)
+      onClose()
+
+      // Invalidate join requests query to refresh the list
+      queryClient.invalidateQueries({ queryKey: ['join-requests'] })
+    } catch (error) {
+      console.error('Failed to approve join request:', error)
+      // Keep toast visible and show error message
+      setRequestError(error instanceof Error ? error.message : 'Failed to approve request')
+    } finally {
+      setIsProcessingRequest(false)
+    }
+  }
+
+  // Handle deny join request
+  const handleDeny = async () => {
+    if (!moderationEvent?.data.requestId || !moderationEvent?.data.roomId) return
+
+    setIsProcessingRequest(true)
+    setRequestError(null) // Clear any previous errors
+
+    try {
+      const response = await fetch(
+        `/api/arcade/rooms/${moderationEvent.data.roomId}/join-requests/${moderationEvent.data.requestId}/deny`,
+        {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+        }
+      )
+
+      if (!response.ok) {
+        const errorData = await response.json().catch(() => ({}))
+        throw new Error(errorData.error || 'Failed to deny join request')
+      }
+
+      // Close toast and event on success
+      setShowJoinRequestToast(false)
+      onClose()
+
+      // Invalidate join requests query to refresh the list
+      queryClient.invalidateQueries({ queryKey: ['join-requests'] })
+    } catch (error) {
+      console.error('Failed to deny join request:', error)
+      // Keep toast visible and show error message
+      setRequestError(error instanceof Error ? error.message : 'Failed to deny request')
+    } finally {
+      setIsProcessingRequest(false)
+    }
+  }
+
   // Kicked modal
   if (moderationEvent?.type === 'kicked') {
+    const isRetired = moderationEvent.data.reason?.includes('retired')
+
     return (
       <Modal isOpen={true} onClose={() => {}}>
         <div
@@ -54,7 +145,7 @@ export function ModerationNotifications({
             minWidth: '400px',
           }}
         >
-          <div style={{ fontSize: '48px', marginBottom: '16px' }}>⚠️</div>
+          <div style={{ fontSize: '48px', marginBottom: '16px' }}>{isRetired ? '🏁' : '⚠️'}</div>
           <h2
             style={{
               fontSize: '24px',
@@ -63,7 +154,7 @@ export function ModerationNotifications({
               color: 'rgba(253, 186, 116, 1)',
             }}
           >
-            Kicked from Room
+            {isRetired ? 'Room Retired' : 'Kicked from Room'}
           </h2>
           <p
             style={{
@@ -72,10 +163,16 @@ export function ModerationNotifications({
               marginBottom: '8px',
             }}
           >
-            You were kicked from the room by{' '}
-            <strong style={{ color: 'rgba(253, 186, 116, 1)' }}>
-              {moderationEvent.data.kickedBy}
-            </strong>
+            {isRetired ? (
+              <>The room owner has retired this room and access has been closed</>
+            ) : (
+              <>
+                You were kicked from the room by{' '}
+                <strong style={{ color: 'rgba(253, 186, 116, 1)' }}>
+                  {moderationEvent.data.kickedBy}
+                </strong>
+              </>
+            )}
           </p>
           <p
             style={{
@@ -84,7 +181,9 @@ export function ModerationNotifications({
               marginBottom: '24px',
             }}
           >
-            You can rejoin if the host sends you a new invite
+            {isRetired
+              ? 'Only the room owner can access retired rooms'
+              : 'You can rejoin if the host sends you a new invite'}
           </p>
 
           <button
@@ -391,6 +490,255 @@ export function ModerationNotifications({
     )
   }
 
+  // Join request toast (for hosts)
+  if (moderationEvent?.type === 'join-request') {
+    return (
+      <Toast.Provider swipeDirection="right" duration={Infinity}>
+        <Toast.Root
+          open={showJoinRequestToast}
+          onOpenChange={(open) => {
+            if (!open) {
+              setShowJoinRequestToast(false)
+              onClose()
+            }
+          }}
+          style={{
+            background:
+              'linear-gradient(135deg, rgba(59, 130, 246, 0.97), rgba(37, 99, 235, 0.97))',
+            border: '2px solid rgba(59, 130, 246, 0.6)',
+            borderRadius: '12px',
+            padding: '16px',
+            boxShadow: '0 8px 24px rgba(0, 0, 0, 0.4)',
+            display: 'flex',
+            gap: '12px',
+            alignItems: 'flex-start',
+            minWidth: '350px',
+            maxWidth: '450px',
+            transition: 'all 0.2s ease',
+          }}
+        >
+          <div style={{ fontSize: '24px', flexShrink: 0 }}>✋</div>
+          <div style={{ flex: 1 }}>
+            <Toast.Title
+              style={{
+                fontSize: '15px',
+                fontWeight: 'bold',
+                color: 'white',
+                marginBottom: '4px',
+              }}
+            >
+              Join Request
+            </Toast.Title>
+            <Toast.Description
+              style={{
+                fontSize: '13px',
+                color: 'rgba(255, 255, 255, 0.9)',
+                marginBottom: '12px',
+              }}
+            >
+              <strong>{moderationEvent.data.requesterName}</strong> wants to join your room
+            </Toast.Description>
+
+            {/* Error message */}
+            {requestError && (
+              <div
+                style={{
+                  padding: '8px 10px',
+                  background: 'rgba(239, 68, 68, 0.2)',
+                  border: '1px solid rgba(239, 68, 68, 0.4)',
+                  borderRadius: '6px',
+                  marginBottom: '12px',
+                }}
+              >
+                <div
+                  style={{
+                    fontSize: '12px',
+                    color: 'rgba(254, 202, 202, 1)',
+                    fontWeight: '600',
+                    marginBottom: '2px',
+                  }}
+                >
+                  ⚠️ Error
+                </div>
+                <div
+                  style={{
+                    fontSize: '11px',
+                    color: 'rgba(255, 255, 255, 0.9)',
+                  }}
+                >
+                  {requestError}
+                </div>
+              </div>
+            )}
+
+            {/* Action buttons */}
+            <div style={{ display: 'flex', gap: '8px' }}>
+              <button
+                type="button"
+                disabled={isProcessingRequest}
+                onClick={(e) => {
+                  e.stopPropagation()
+                  handleDeny()
+                }}
+                style={{
+                  flex: 1,
+                  padding: '8px 12px',
+                  background: isProcessingRequest
+                    ? 'rgba(75, 85, 99, 0.3)'
+                    : 'rgba(255, 255, 255, 0.2)',
+                  color: 'white',
+                  border: '1px solid rgba(255, 255, 255, 0.3)',
+                  borderRadius: '8px',
+                  fontSize: '13px',
+                  fontWeight: '600',
+                  cursor: isProcessingRequest ? 'not-allowed' : 'pointer',
+                  transition: 'all 0.2s ease',
+                  opacity: isProcessingRequest ? 0.5 : 1,
+                }}
+                onMouseEnter={(e) => {
+                  if (!isProcessingRequest) {
+                    e.currentTarget.style.background = 'rgba(255, 255, 255, 0.25)'
+                  }
+                }}
+                onMouseLeave={(e) => {
+                  if (!isProcessingRequest) {
+                    e.currentTarget.style.background = 'rgba(255, 255, 255, 0.2)'
+                  }
+                }}
+              >
+                Deny
+              </button>
+              <button
+                type="button"
+                disabled={isProcessingRequest}
+                onClick={(e) => {
+                  e.stopPropagation()
+                  handleApprove()
+                }}
+                style={{
+                  flex: 1,
+                  padding: '8px 12px',
+                  background: isProcessingRequest
+                    ? 'rgba(75, 85, 99, 0.3)'
+                    : 'rgba(34, 197, 94, 0.9)',
+                  color: 'white',
+                  border: '1px solid rgba(34, 197, 94, 0.8)',
+                  borderRadius: '8px',
+                  fontSize: '13px',
+                  fontWeight: '600',
+                  cursor: isProcessingRequest ? 'not-allowed' : 'pointer',
+                  transition: 'all 0.2s ease',
+                  opacity: isProcessingRequest ? 0.5 : 1,
+                }}
+                onMouseEnter={(e) => {
+                  if (!isProcessingRequest) {
+                    e.currentTarget.style.background = 'rgba(34, 197, 94, 1)'
+                  }
+                }}
+                onMouseLeave={(e) => {
+                  if (!isProcessingRequest) {
+                    e.currentTarget.style.background = 'rgba(34, 197, 94, 0.9)'
+                  }
+                }}
+              >
+                {isProcessingRequest ? 'Processing...' : 'Approve'}
+              </button>
+            </div>
+          </div>
+          <Toast.Close
+            style={{
+              background: 'rgba(255, 255, 255, 0.2)',
+              border: 'none',
+              borderRadius: '50%',
+              width: '24px',
+              height: '24px',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              cursor: 'pointer',
+              color: 'white',
+              fontSize: '16px',
+              lineHeight: 1,
+              flexShrink: 0,
+            }}
+          >
+            ×
+          </Toast.Close>
+        </Toast.Root>
+
+        <Toast.Viewport
+          style={{
+            position: 'fixed',
+            top: '80px',
+            right: '20px',
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '10px',
+            zIndex: 10001,
+            maxWidth: '100vw',
+            margin: 0,
+            listStyle: 'none',
+            outline: 'none',
+          }}
+        />
+
+        <style
+          dangerouslySetInnerHTML={{
+            __html: `
+              @keyframes slideIn {
+                from {
+                  transform: translateX(calc(100% + 25px));
+                }
+                to {
+                  transform: translateX(0);
+                }
+              }
+
+              @keyframes slideOut {
+                from {
+                  transform: translateX(0);
+                }
+                to {
+                  transform: translateX(calc(100% + 25px));
+                }
+              }
+
+              @keyframes hide {
+                from {
+                  opacity: 1;
+                }
+                to {
+                  opacity: 0;
+                }
+              }
+
+              [data-state='open'] {
+                animation: slideIn 150ms cubic-bezier(0.16, 1, 0.3, 1);
+              }
+
+              [data-state='closed'] {
+                animation: hide 100ms ease-in, slideOut 200ms cubic-bezier(0.32, 0, 0.67, 0);
+              }
+
+              [data-swipe='move'] {
+                transform: translateX(var(--radix-toast-swipe-move-x));
+              }
+
+              [data-swipe='cancel'] {
+                transform: translateX(0);
+                transition: transform 200ms ease-out;
+              }
+
+              [data-swipe='end'] {
+                animation: slideOut 100ms ease-out;
+              }
+            `,
+          }}
+        />
+      </Toast.Provider>
+    )
+  }
+
   // Invitation modal
   if (moderationEvent?.type === 'invitation') {
     const invitationType = moderationEvent.data.invitationType

apps/web/src/components/nav/ModerationPanel.tsx

@@ -1333,31 +1333,81 @@ export function ModerationPanel({
                       borderRadius: '8px',
                     }}
                   >
-                    <select
-                      value={accessMode}
-                      onChange={(e) => {
-                        setAccessMode(e.target.value)
-                        setShowPasswordInput(e.target.value === 'password')
-                      }}
+                    {/* Access mode button grid */}
+                    <div
                       style={{
-                        width: '100%',
-                        padding: '10px',
-                        background: 'rgba(255, 255, 255, 0.05)',
-                        border: '1px solid rgba(75, 85, 99, 0.5)',
-                        borderRadius: '6px',
-                        color: 'rgba(209, 213, 219, 1)',
-                        fontSize: '14px',
+                        display: 'grid',
+                        gridTemplateColumns: '1fr 1fr',
+                        gap: '8px',
                         marginBottom: '12px',
-                        cursor: 'pointer',
                       }}
                     >
-                      <option value="open">🌐 Open - Anyone can join</option>
-                      <option value="password">🔑 Password Protected</option>
-                      <option value="approval-only">✋ Approval Required</option>
-                      <option value="restricted">🚫 Restricted - Invitation only</option>
-                      <option value="locked">🔒 Locked - No new members</option>
-                      <option value="retired">🏁 Retired - Room closed</option>
-                    </select>
+                      {[
+                        { value: 'open', emoji: '🌐', label: 'Open', desc: 'Anyone' },
+                        { value: 'password', emoji: '🔑', label: 'Password', desc: 'With key' },
+                        { value: 'approval-only', emoji: '✋', label: 'Approval', desc: 'Request' },
+                        {
+                          value: 'restricted',
+                          emoji: '🚫',
+                          label: 'Restricted',
+                          desc: 'Invite only',
+                        },
+                        { value: 'locked', emoji: '🔒', label: 'Locked', desc: 'No new members' },
+                        { value: 'retired', emoji: '🏁', label: 'Retired', desc: 'Closed' },
+                      ].map((mode) => (
+                        <button
+                          key={mode.value}
+                          type="button"
+                          disabled={actionLoading === 'update-settings'}
+                          onClick={() => {
+                            setAccessMode(mode.value)
+                            setShowPasswordInput(mode.value === 'password')
+                          }}
+                          style={{
+                            padding: '10px 12px',
+                            background:
+                              accessMode === mode.value
+                                ? 'rgba(253, 186, 116, 0.15)'
+                                : 'rgba(255, 255, 255, 0.05)',
+                            border:
+                              accessMode === mode.value
+                                ? '2px solid rgba(253, 186, 116, 0.6)'
+                                : '2px solid rgba(75, 85, 99, 0.5)',
+                            borderRadius: '8px',
+                            color:
+                              accessMode === mode.value
+                                ? 'rgba(253, 186, 116, 1)'
+                                : 'rgba(209, 213, 219, 0.8)',
+                            fontSize: '13px',
+                            fontWeight: '500',
+                            cursor: actionLoading === 'update-settings' ? 'not-allowed' : 'pointer',
+                            opacity: actionLoading === 'update-settings' ? 0.5 : 1,
+                            transition: 'all 0.2s ease',
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: '8px',
+                          }}
+                          onMouseEnter={(e) => {
+                            if (actionLoading !== 'update-settings' && accessMode !== mode.value) {
+                              e.currentTarget.style.background = 'rgba(255, 255, 255, 0.08)'
+                              e.currentTarget.style.borderColor = 'rgba(253, 186, 116, 0.4)'
+                            }
+                          }}
+                          onMouseLeave={(e) => {
+                            if (accessMode !== mode.value) {
+                              e.currentTarget.style.background = 'rgba(255, 255, 255, 0.05)'
+                              e.currentTarget.style.borderColor = 'rgba(75, 85, 99, 0.5)'
+                            }
+                          }}
+                        >
+                          <span style={{ fontSize: '18px' }}>{mode.emoji}</span>
+                          <div style={{ textAlign: 'left', flex: 1, lineHeight: '1.2' }}>
+                            <div style={{ fontSize: '13px', fontWeight: '600' }}>{mode.label}</div>
+                            <div style={{ fontSize: '11px', opacity: 0.7 }}>{mode.desc}</div>
+                          </div>
+                        </button>
+                      ))}
+                    </div>
 
                     {/* Password input (conditional) */}
                     {(accessMode === 'password' || showPasswordInput) && (

apps/web/src/hooks/useRoomData.ts

@@ -1,5 +1,5 @@
-import { useCallback, useEffect, useState } from 'react'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { useCallback, useEffect, useState } from 'react'
 import { io, type Socket } from 'socket.io-client'
 import { useViewerId } from './useViewerId'
 
@@ -190,7 +190,7 @@ async function getRoomByCodeApi(code: string): Promise<RoomData> {
 }
 
 export interface ModerationEvent {
-  type: 'kicked' | 'banned' | 'report' | 'invitation'
+  type: 'kicked' | 'banned' | 'report' | 'invitation' | 'join-request'
   data: {
     roomId?: string
     kickedBy?: string
@@ -206,6 +206,10 @@ export interface ModerationEvent {
     invitedByName?: string
     invitationType?: 'manual' | 'auto-unban' | 'auto-create'
     message?: string
+    // Join request fields
+    requestId?: string
+    requesterId?: string
+    requesterName?: string
   }
 }
 
@@ -343,13 +347,14 @@ export function useRoomData() {
     }
 
     // Moderation event handlers
-    const handleKickedFromRoom = (data: { roomId: string; kickedBy: string }) => {
+    const handleKickedFromRoom = (data: { roomId: string; kickedBy: string; reason?: string }) => {
       console.log('[useRoomData] User was kicked from room:', data)
       setModerationEvent({
         type: 'kicked',
         data: {
           roomId: data.roomId,
           kickedBy: data.kickedBy,
+          reason: data.reason,
         },
       })
       // Clear room data since user was kicked
@@ -420,6 +425,27 @@ export function useRoomData() {
       })
     }
 
+    const handleJoinRequestSubmitted = (data: {
+      roomId: string
+      request: {
+        id: string
+        userId: string
+        userName: string
+        createdAt: Date
+      }
+    }) => {
+      console.log('[useRoomData] New join request submitted:', data)
+      setModerationEvent({
+        type: 'join-request',
+        data: {
+          roomId: data.roomId,
+          requestId: data.request.id,
+          requesterId: data.request.userId,
+          requesterName: data.request.userName,
+        },
+      })
+    }
+
     socket.on('room-joined', handleRoomJoined)
     socket.on('member-joined', handleMemberJoined)
     socket.on('member-left', handleMemberLeft)
@@ -428,6 +454,7 @@ export function useRoomData() {
     socket.on('banned-from-room', handleBannedFromRoom)
     socket.on('report-submitted', handleReportSubmitted)
     socket.on('room-invitation-received', handleInvitationReceived)
+    socket.on('join-request-submitted', handleJoinRequestSubmitted)
 
     return () => {
       socket.off('room-joined', handleRoomJoined)
@@ -438,6 +465,7 @@ export function useRoomData() {
       socket.off('banned-from-room', handleBannedFromRoom)
       socket.off('report-submitted', handleReportSubmitted)
       socket.off('room-invitation-received', handleInvitationReceived)
+      socket.off('join-request-submitted', handleJoinRequestSubmitted)
     }
   }, [socket, roomData?.id, queryClient])
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "soroban-monorepo",
-  "version": "3.4.0",
+  "version": "3.9.2",
   "private": true,
   "description": "Beautiful Soroban Flashcard Generator - Monorepo",
   "workspaces": [