chore(release): 3.3.0 [skip ci]

## [3.3.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v3.2.1...v3.3.0) (2025-10-14)

### Features

* implement approval request flow for share links ([4a6b3ca](4a6b3cabe5))

CHANGELOG.md

@@ -1,3 +1,10 @@
+## [3.3.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v3.2.1...v3.3.0) (2025-10-14)
+
+
+### Features
+
+* implement approval request flow for share links ([4a6b3ca](https://github.com/antialias/soroban-abacus-flashcards/commit/4a6b3cabe5c6aa42f4fa00ed09f9b3713f097539))
+
 ## [3.2.1](https://github.com/antialias/soroban-abacus-flashcards/compare/v3.2.0...v3.2.1) (2025-10-14)
 
 

apps/web/.claude/settings.local.json

@@ -46,7 +46,18 @@
       "Bash(npx @biomejs/biome check:*)",
       "Bash(printf '\\n')",
       "Bash(npm install bcryptjs)",
-      "Bash(npm install:*)"
+      "Bash(npm install:*)",
+      "Bash(pnpm add:*)",
+      "Bash(sqlite3:*)",
+      "Bash(shasum:*)",
+      "Bash(awk:*)",
+      "Bash(if npx tsc --noEmit)",
+      "Bash(then echo \"TypeScript errors found in our files\")",
+      "Bash(else echo \"✓ No TypeScript errors in our modified files\")",
+      "Bash(fi)",
+      "Bash(then echo \"TypeScript errors found\")",
+      "Bash(else echo \"✓ No TypeScript errors in join page\")",
+      "Bash(npx @biomejs/biome format:*)"
     ],
     "deny": [],
     "ask": []

apps/web/src/app/api/arcade/rooms/route.ts

@@ -62,18 +62,17 @@ export async function GET(req: NextRequest) {
  *   - gameName: string
  *   - gameConfig?: object
  *   - ttlMinutes?: number
+ *   - accessMode?: 'open' | 'password' | 'approval-only' | 'restricted' | 'locked' | 'retired'
+ *   - password?: string
  */
 export async function POST(req: NextRequest) {
   try {
     const viewerId = await getViewerId()
     const body = await req.json()
 
-    // Validate required fields
-    if (!body.name || !body.gameName) {
-      return NextResponse.json(
-        { error: 'Missing required fields: name, gameName' },
-        { status: 400 }
-      )
+    // Validate required fields (name is optional, gameName is required)
+    if (!body.gameName) {
+      return NextResponse.json({ error: 'Missing required field: gameName' }, { status: 400 })
     }
 
     // Validate game name
@@ -82,22 +81,50 @@ export async function POST(req: NextRequest) {
       return NextResponse.json({ error: 'Invalid game name' }, { status: 400 })
     }
 
-    // Validate name length
-    if (body.name.length > 50) {
+    // Validate name length (if provided)
+    if (body.name && body.name.length > 50) {
       return NextResponse.json({ error: 'Room name too long (max 50 characters)' }, { status: 400 })
     }
 
+    // Normalize empty name to null
+    const roomName = body.name?.trim() || null
+
+    // Validate access mode
+    if (body.accessMode) {
+      const validAccessModes = [
+        'open',
+        'password',
+        'approval-only',
+        'restricted',
+        'locked',
+        'retired',
+      ]
+      if (!validAccessModes.includes(body.accessMode)) {
+        return NextResponse.json({ error: 'Invalid access mode' }, { status: 400 })
+      }
+    }
+
+    // Validate password if provided
+    if (body.accessMode === 'password' && !body.password) {
+      return NextResponse.json(
+        { error: 'Password is required for password-protected rooms' },
+        { status: 400 }
+      )
+    }
+
     // Get display name from body or generate from viewerId
     const displayName = body.creatorName || `Guest ${viewerId.slice(-4)}`
 
     // Create room
     const room = await createRoom({
-      name: body.name,
+      name: roomName,
       createdBy: viewerId,
       creatorName: displayName,
       gameName: body.gameName,
       gameConfig: body.gameConfig || {},
       ttlMinutes: body.ttlMinutes,
+      accessMode: body.accessMode,
+      password: body.password,
     })
 
     // Add creator as first member

apps/web/src/app/arcade-rooms/[roomId]/page.tsx

@@ -6,11 +6,12 @@ import { io, type Socket } from 'socket.io-client'
 import { css } from '../../../../styled-system/css'
 import { PageWithNav } from '@/components/PageWithNav'
 import { useViewerId } from '@/hooks/useViewerId'
+import { getRoomDisplayWithEmoji } from '@/utils/room-display'
 
 interface Room {
   id: string
   code: string
-  name: string
+  name: string | null
   gameName: string
   status: 'lobby' | 'playing' | 'finished'
   createdBy: string
@@ -357,7 +358,11 @@ export default function RoomDetailPage() {
                     mb: '2',
                   })}
                 >
-                  {room.name}
+                  {getRoomDisplayWithEmoji({
+                    name: room.name,
+                    code: room.code,
+                    gameName: room.gameName,
+                  })}
                 </h1>
                 <div
                   className={css({

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

@@ -1,7 +1,7 @@
 'use client'
 
-import { useCallback, useEffect, useState } from 'react'
 import { useRouter } from 'next/navigation'
+import { useCallback, useEffect, useState } from 'react'
 import { useGetRoomByCode, useJoinRoom, useRoomData } from '@/hooks/useRoomData'
 import { getRoomDisplayWithEmoji } from '@/utils/room-display'
 
@@ -211,6 +211,8 @@ export default function JoinRoomPage({ params }: { params: { code: string } }) {
   } | null>(null)
   const [showConfirmation, setShowConfirmation] = useState(false)
   const [showPasswordPrompt, setShowPasswordPrompt] = useState(false)
+  const [showApprovalPrompt, setShowApprovalPrompt] = useState(false)
+  const [approvalRequested, setApprovalRequested] = useState(false)
   const [password, setPassword] = useState('')
   const [error, setError] = useState<string | null>(null)
   const [isJoining, setIsJoining] = useState(false)
@@ -280,7 +282,7 @@ export default function JoinRoomPage({ params }: { params: { code: string } }) {
         }
 
         if (room.accessMode === 'approval-only') {
-          setError('This room requires host approval. Please join via the room browser.')
+          setShowApprovalPrompt(true)
           return
         }
 
@@ -323,8 +325,34 @@ export default function JoinRoomPage({ params }: { params: { code: string } }) {
     }
   }
 
-  // Only show error page for non-password errors (password errors are shown in the password prompt UI)
-  if (error && !showPasswordPrompt) {
+  const handleRequestApproval = async () => {
+    if (!targetRoomData) return
+
+    setIsJoining(true)
+    setError(null)
+
+    try {
+      const res = await fetch(`/api/arcade/rooms/${targetRoomData.id}/join-requests`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+      })
+
+      if (!res.ok) {
+        const errorData = await res.json()
+        throw new Error(errorData.error || 'Failed to request approval')
+      }
+
+      // Request sent successfully - show waiting state
+      setApprovalRequested(true)
+      setIsJoining(false)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to request approval')
+      setIsJoining(false)
+    }
+  }
+
+  // Only show error page for non-password and non-approval errors
+  if (error && !showPasswordPrompt && !showApprovalPrompt) {
     return (
       <div
         style={{
@@ -546,5 +574,260 @@ export default function JoinRoomPage({ params }: { params: { code: string } }) {
     )
   }
 
+  if (showApprovalPrompt && targetRoomData) {
+    return (
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          height: '100vh',
+          background: 'linear-gradient(135deg, #0f0f23 0%, #1a1a3a 50%, #2d1b69 100%)',
+        }}
+      >
+        <div
+          style={{
+            background: 'linear-gradient(135deg, rgba(17, 24, 39, 0.98), rgba(31, 41, 55, 0.98))',
+            borderRadius: '16px',
+            padding: '32px',
+            maxWidth: '450px',
+            width: '90%',
+            border: '2px solid rgba(59, 130, 246, 0.3)',
+            boxShadow: '0 20px 60px rgba(0, 0, 0, 0.5)',
+          }}
+        >
+          {approvalRequested ? (
+            // Waiting for approval state
+            <>
+              <div style={{ textAlign: 'center', marginBottom: '20px' }}>
+                <div style={{ fontSize: '48px', marginBottom: '16px' }}>⏳</div>
+                <h2
+                  style={{
+                    fontSize: '24px',
+                    fontWeight: 'bold',
+                    marginBottom: '8px',
+                    color: 'rgba(96, 165, 250, 1)',
+                  }}
+                >
+                  Waiting for Approval
+                </h2>
+                <p
+                  style={{
+                    fontSize: '14px',
+                    color: 'rgba(209, 213, 219, 0.8)',
+                  }}
+                >
+                  Your request has been sent to the room moderator.
+                </p>
+              </div>
+
+              <div
+                style={{
+                  background: 'rgba(59, 130, 246, 0.1)',
+                  border: '1px solid rgba(59, 130, 246, 0.3)',
+                  borderRadius: '12px',
+                  padding: '16px',
+                  marginBottom: '20px',
+                }}
+              >
+                <div
+                  style={{ fontSize: '14px', fontWeight: '600', color: 'rgba(96, 165, 250, 1)' }}
+                >
+                  {getRoomDisplayWithEmoji({
+                    name: targetRoomData.name,
+                    code: targetRoomData.code,
+                    gameName: targetRoomData.gameName,
+                  })}
+                </div>
+                <div
+                  style={{
+                    fontSize: '13px',
+                    color: 'rgba(209, 213, 219, 0.7)',
+                    fontFamily: 'monospace',
+                    marginTop: '4px',
+                  }}
+                >
+                  Code: {targetRoomData.code}
+                </div>
+              </div>
+
+              <p
+                style={{
+                  fontSize: '13px',
+                  color: 'rgba(156, 163, 175, 1)',
+                  textAlign: 'center',
+                  marginBottom: '20px',
+                }}
+              >
+                You'll be able to join once the host approves your request. You can close this page
+                and check back later.
+              </p>
+
+              <button
+                type="button"
+                onClick={() => router.push('/arcade')}
+                style={{
+                  width: '100%',
+                  padding: '12px',
+                  background: 'rgba(75, 85, 99, 0.3)',
+                  color: 'rgba(209, 213, 219, 1)',
+                  border: '2px solid rgba(75, 85, 99, 0.5)',
+                  borderRadius: '10px',
+                  fontSize: '15px',
+                  fontWeight: '600',
+                  cursor: 'pointer',
+                  transition: 'all 0.2s ease',
+                }}
+                onMouseEnter={(e) => {
+                  e.currentTarget.style.background = 'rgba(75, 85, 99, 0.4)'
+                }}
+                onMouseLeave={(e) => {
+                  e.currentTarget.style.background = 'rgba(75, 85, 99, 0.3)'
+                }}
+              >
+                Go to Champion Arena
+              </button>
+            </>
+          ) : (
+            // Request approval prompt
+            <>
+              <h2
+                style={{
+                  fontSize: '24px',
+                  fontWeight: 'bold',
+                  marginBottom: '8px',
+                  color: 'rgba(96, 165, 250, 1)',
+                }}
+              >
+                ✋ Approval Required
+              </h2>
+              <p
+                style={{
+                  fontSize: '14px',
+                  color: 'rgba(209, 213, 219, 0.8)',
+                  marginBottom: '20px',
+                }}
+              >
+                This room requires host approval to join. Send a request?
+              </p>
+
+              <div
+                style={{
+                  background: 'rgba(59, 130, 246, 0.1)',
+                  border: '1px solid rgba(59, 130, 246, 0.3)',
+                  borderRadius: '12px',
+                  padding: '16px',
+                  marginBottom: '20px',
+                }}
+              >
+                <div
+                  style={{ fontSize: '14px', fontWeight: '600', color: 'rgba(96, 165, 250, 1)' }}
+                >
+                  {getRoomDisplayWithEmoji({
+                    name: targetRoomData.name,
+                    code: targetRoomData.code,
+                    gameName: targetRoomData.gameName,
+                  })}
+                </div>
+                <div
+                  style={{
+                    fontSize: '13px',
+                    color: 'rgba(209, 213, 219, 0.7)',
+                    fontFamily: 'monospace',
+                    marginTop: '4px',
+                  }}
+                >
+                  Code: {targetRoomData.code}
+                </div>
+              </div>
+
+              {error && (
+                <p
+                  style={{
+                    fontSize: '13px',
+                    color: 'rgba(248, 113, 113, 1)',
+                    marginBottom: '16px',
+                    textAlign: 'center',
+                  }}
+                >
+                  {error}
+                </p>
+              )}
+
+              <div style={{ display: 'flex', gap: '12px' }}>
+                <button
+                  type="button"
+                  onClick={() => router.push('/arcade')}
+                  disabled={isJoining}
+                  style={{
+                    flex: 1,
+                    padding: '12px',
+                    background: 'rgba(75, 85, 99, 0.3)',
+                    color: 'rgba(209, 213, 219, 1)',
+                    border: '2px solid rgba(75, 85, 99, 0.5)',
+                    borderRadius: '10px',
+                    fontSize: '15px',
+                    fontWeight: '600',
+                    cursor: isJoining ? 'not-allowed' : 'pointer',
+                    opacity: isJoining ? 0.5 : 1,
+                    transition: 'all 0.2s ease',
+                  }}
+                  onMouseEnter={(e) => {
+                    if (!isJoining) {
+                      e.currentTarget.style.background = 'rgba(75, 85, 99, 0.4)'
+                    }
+                  }}
+                  onMouseLeave={(e) => {
+                    if (!isJoining) {
+                      e.currentTarget.style.background = 'rgba(75, 85, 99, 0.3)'
+                    }
+                  }}
+                >
+                  Cancel
+                </button>
+                <button
+                  type="button"
+                  onClick={handleRequestApproval}
+                  disabled={isJoining}
+                  style={{
+                    flex: 1,
+                    padding: '12px',
+                    background: isJoining
+                      ? 'rgba(75, 85, 99, 0.3)'
+                      : 'linear-gradient(135deg, rgba(59, 130, 246, 0.8), rgba(37, 99, 235, 0.8))',
+                    color: isJoining ? 'rgba(156, 163, 175, 1)' : 'rgba(255, 255, 255, 1)',
+                    border: isJoining
+                      ? '2px solid rgba(75, 85, 99, 0.5)'
+                      : '2px solid rgba(59, 130, 246, 0.6)',
+                    borderRadius: '10px',
+                    fontSize: '15px',
+                    fontWeight: '600',
+                    cursor: isJoining ? 'not-allowed' : 'pointer',
+                    opacity: isJoining ? 0.5 : 1,
+                    transition: 'all 0.2s ease',
+                  }}
+                  onMouseEnter={(e) => {
+                    if (!isJoining) {
+                      e.currentTarget.style.background =
+                        'linear-gradient(135deg, rgba(59, 130, 246, 0.9), rgba(37, 99, 235, 0.9))'
+                    }
+                  }}
+                  onMouseLeave={(e) => {
+                    if (!isJoining) {
+                      e.currentTarget.style.background =
+                        'linear-gradient(135deg, rgba(59, 130, 246, 0.8), rgba(37, 99, 235, 0.8))'
+                    }
+                  }}
+                >
+                  {isJoining ? 'Sending...' : 'Request to Join'}
+                </button>
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+    )
+  }
+
   return null
 }

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

@@ -1,6 +1,7 @@
 import { useState } from 'react'
 import { Modal } from '@/components/common/Modal'
 import { useRoomData } from '@/hooks/useRoomData'
+import type { schema } from '@/db'
 
 export interface JoinRoomModalProps {
   /**
@@ -25,13 +26,21 @@ export interface JoinRoomModalProps {
 export function JoinRoomModal({ isOpen, onClose, onSuccess }: JoinRoomModalProps) {
   const { getRoomByCode, joinRoom } = useRoomData()
   const [code, setCode] = useState('')
+  const [password, setPassword] = useState('')
   const [error, setError] = useState('')
   const [isLoading, setIsLoading] = useState(false)
+  const [roomInfo, setRoomInfo] = useState<schema.ArcadeRoom | null>(null)
+  const [needsPassword, setNeedsPassword] = useState(false)
+  const [needsApproval, setNeedsApproval] = useState(false)
 
   const handleClose = () => {
     setCode('')
+    setPassword('')
     setError('')
     setIsLoading(false)
+    setRoomInfo(null)
+    setNeedsPassword(false)
+    setNeedsApproval(false)
     onClose()
   }
 
@@ -50,9 +59,50 @@ export function JoinRoomModal({ isOpen, onClose, onSuccess }: JoinRoomModalProps
     try {
       // Look up room by code
       const room = await getRoomByCode(normalizedCode)
+      setRoomInfo(room)
 
-      // Join the room
-      await joinRoom(room.id)
+      // Check access mode
+      if (room.accessMode === 'retired') {
+        setError('This room has been retired and is no longer accepting members')
+        setIsLoading(false)
+        return
+      }
+
+      if (room.accessMode === 'locked') {
+        setError('This room is locked and not accepting new members')
+        setIsLoading(false)
+        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
+      }
+
+      if (room.accessMode === 'password') {
+        // Check if password is provided
+        if (!needsPassword) {
+          setNeedsPassword(true)
+          setIsLoading(false)
+          return
+        }
+
+        if (!password) {
+          setError('Password is required')
+          setIsLoading(false)
+          return
+        }
+      }
+
+      // Join the room (with password if needed)
+      await joinRoom(room.id, password || undefined)
 
       // Success! Close modal
       handleClose()
@@ -64,6 +114,31 @@ export function JoinRoomModal({ isOpen, onClose, onSuccess }: JoinRoomModalProps
     }
   }
 
+  const handleRequestAccess = async () => {
+    if (!roomInfo) return
+
+    setIsLoading(true)
+    try {
+      const res = await fetch(`/api/arcade/rooms/${roomInfo.id}/join-requests`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+      })
+
+      if (!res.ok) {
+        const errorData = await res.json()
+        throw new Error(errorData.error || 'Failed to request access')
+      }
+
+      // Success!
+      alert('Access request sent! The host will review your request.')
+      handleClose()
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to request access')
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
   return (
     <Modal isOpen={isOpen} onClose={handleClose}>
       <div
@@ -80,7 +155,7 @@ export function JoinRoomModal({ isOpen, onClose, onSuccess }: JoinRoomModalProps
             color: 'rgba(196, 181, 253, 1)',
           }}
         >
-          Join Room by Code
+          {needsApproval ? 'Request to Join Room' : 'Join Room by Code'}
         </h2>
         <p
           style={{
@@ -89,125 +164,271 @@ export function JoinRoomModal({ isOpen, onClose, onSuccess }: JoinRoomModalProps
             marginBottom: '24px',
           }}
         >
-          Enter the 6-character room code
+          {needsApproval
+            ? 'This room requires host approval. Send a request to join?'
+            : needsPassword
+              ? 'This room is password protected'
+              : 'Enter the 6-character room code'}
         </p>
 
-        <form onSubmit={handleSubmit}>
-          <input
-            type="text"
-            value={code}
-            onChange={(e) => {
-              setCode(e.target.value.toUpperCase())
-              setError('')
-            }}
-            placeholder="ABC123"
-            maxLength={6}
-            disabled={isLoading}
-            style={{
-              width: '100%',
-              padding: '14px',
-              border: error
-                ? '2px solid rgba(239, 68, 68, 0.6)'
-                : '2px solid rgba(139, 92, 246, 0.4)',
-              borderRadius: '10px',
-              fontSize: '18px',
-              fontWeight: 'bold',
-              fontFamily: 'monospace',
-              textAlign: 'center',
-              letterSpacing: '4px',
-              background: 'rgba(255, 255, 255, 0.05)',
-              color: 'rgba(196, 181, 253, 1)',
-              outline: 'none',
-              marginBottom: '8px',
-            }}
-          />
+        {needsApproval ? (
+          // Approval request UI
+          <div>
+            <div
+              style={{
+                padding: '16px',
+                background: 'rgba(59, 130, 246, 0.1)',
+                border: '1px solid rgba(59, 130, 246, 0.3)',
+                borderRadius: '8px',
+                marginBottom: '20px',
+              }}
+            >
+              <p
+                style={{
+                  fontSize: '14px',
+                  color: 'rgba(209, 213, 219, 1)',
+                  marginBottom: '8px',
+                }}
+              >
+                <strong>{roomInfo?.name}</strong>
+              </p>
+              <p style={{ fontSize: '13px', color: 'rgba(156, 163, 175, 1)' }}>
+                Code: {roomInfo?.code}
+              </p>
+            </div>
 
-          {error && (
-            <p
-              style={{
-                fontSize: '13px',
-                color: 'rgba(248, 113, 113, 1)',
-                marginBottom: '16px',
-                textAlign: 'center',
-              }}
-            >
-              {error}
-            </p>
-          )}
+            {error && (
+              <p
+                style={{
+                  fontSize: '13px',
+                  color: 'rgba(248, 113, 113, 1)',
+                  marginBottom: '16px',
+                  textAlign: 'center',
+                }}
+              >
+                {error}
+              </p>
+            )}
 
-          <div style={{ display: 'flex', gap: '12px', marginTop: '24px' }}>
-            <button
-              type="button"
-              onClick={handleClose}
-              disabled={isLoading}
-              style={{
-                flex: 1,
-                padding: '12px',
-                background: 'rgba(75, 85, 99, 0.3)',
-                color: 'rgba(209, 213, 219, 1)',
-                border: '2px solid rgba(75, 85, 99, 0.5)',
-                borderRadius: '10px',
-                fontSize: '15px',
-                fontWeight: '600',
-                cursor: isLoading ? 'not-allowed' : 'pointer',
-                opacity: isLoading ? 0.5 : 1,
-                transition: 'all 0.2s ease',
-              }}
-              onMouseEnter={(e) => {
-                if (!isLoading) {
-                  e.currentTarget.style.background = 'rgba(75, 85, 99, 0.4)'
-                }
-              }}
-              onMouseLeave={(e) => {
-                if (!isLoading) {
-                  e.currentTarget.style.background = 'rgba(75, 85, 99, 0.3)'
-                }
-              }}
-            >
-              Cancel
-            </button>
-            <button
-              type="submit"
-              disabled={code.trim().length !== 6 || isLoading}
-              style={{
-                flex: 1,
-                padding: '12px',
-                background:
-                  code.trim().length === 6 && !isLoading
-                    ? 'linear-gradient(135deg, rgba(59, 130, 246, 0.8), rgba(37, 99, 235, 0.8))'
-                    : 'rgba(75, 85, 99, 0.3)',
-                color:
-                  code.trim().length === 6 && !isLoading
-                    ? 'rgba(255, 255, 255, 1)'
-                    : 'rgba(156, 163, 175, 1)',
-                border:
-                  code.trim().length === 6 && !isLoading
-                    ? '2px solid rgba(59, 130, 246, 0.6)'
-                    : '2px solid rgba(75, 85, 99, 0.5)',
-                borderRadius: '10px',
-                fontSize: '15px',
-                fontWeight: '600',
-                cursor: code.trim().length === 6 && !isLoading ? 'pointer' : 'not-allowed',
-                opacity: code.trim().length === 6 && !isLoading ? 1 : 0.5,
-                transition: 'all 0.2s ease',
-              }}
-              onMouseEnter={(e) => {
-                if (code.trim().length === 6 && !isLoading) {
-                  e.currentTarget.style.background =
-                    'linear-gradient(135deg, rgba(59, 130, 246, 0.9), rgba(37, 99, 235, 0.9))'
-                }
-              }}
-              onMouseLeave={(e) => {
-                if (code.trim().length === 6 && !isLoading) {
-                  e.currentTarget.style.background =
-                    'linear-gradient(135deg, rgba(59, 130, 246, 0.8), rgba(37, 99, 235, 0.8))'
-                }
-              }}
-            >
-              {isLoading ? 'Joining...' : 'Join Room'}
-            </button>
+            <div style={{ display: 'flex', gap: '12px' }}>
+              <button
+                type="button"
+                onClick={handleClose}
+                disabled={isLoading}
+                style={{
+                  flex: 1,
+                  padding: '12px',
+                  background: 'rgba(75, 85, 99, 0.3)',
+                  color: 'rgba(209, 213, 219, 1)',
+                  border: '2px solid rgba(75, 85, 99, 0.5)',
+                  borderRadius: '10px',
+                  fontSize: '15px',
+                  fontWeight: '600',
+                  cursor: isLoading ? 'not-allowed' : 'pointer',
+                  opacity: isLoading ? 0.5 : 1,
+                  transition: 'all 0.2s ease',
+                }}
+                onMouseEnter={(e) => {
+                  if (!isLoading) {
+                    e.currentTarget.style.background = 'rgba(75, 85, 99, 0.4)'
+                  }
+                }}
+                onMouseLeave={(e) => {
+                  if (!isLoading) {
+                    e.currentTarget.style.background = 'rgba(75, 85, 99, 0.3)'
+                  }
+                }}
+              >
+                Cancel
+              </button>
+              <button
+                type="button"
+                onClick={handleRequestAccess}
+                disabled={isLoading}
+                style={{
+                  flex: 1,
+                  padding: '12px',
+                  background: isLoading
+                    ? 'rgba(75, 85, 99, 0.3)'
+                    : 'linear-gradient(135deg, rgba(59, 130, 246, 0.8), rgba(37, 99, 235, 0.8))',
+                  color: isLoading ? 'rgba(156, 163, 175, 1)' : 'rgba(255, 255, 255, 1)',
+                  border: isLoading
+                    ? '2px solid rgba(75, 85, 99, 0.5)'
+                    : '2px solid rgba(59, 130, 246, 0.6)',
+                  borderRadius: '10px',
+                  fontSize: '15px',
+                  fontWeight: '600',
+                  cursor: isLoading ? 'not-allowed' : 'pointer',
+                  opacity: isLoading ? 0.5 : 1,
+                  transition: 'all 0.2s ease',
+                }}
+                onMouseEnter={(e) => {
+                  if (!isLoading) {
+                    e.currentTarget.style.background =
+                      'linear-gradient(135deg, rgba(59, 130, 246, 0.9), rgba(37, 99, 235, 0.9))'
+                  }
+                }}
+                onMouseLeave={(e) => {
+                  if (!isLoading) {
+                    e.currentTarget.style.background =
+                      'linear-gradient(135deg, rgba(59, 130, 246, 0.8), rgba(37, 99, 235, 0.8))'
+                  }
+                }}
+              >
+                {isLoading ? 'Sending...' : 'Send Request'}
+              </button>
+            </div>
           </div>
-        </form>
+        ) : (
+          // Standard join form
+          <form onSubmit={handleSubmit}>
+            <input
+              type="text"
+              value={code}
+              onChange={(e) => {
+                setCode(e.target.value.toUpperCase())
+                setError('')
+                setNeedsPassword(false)
+                setNeedsApproval(false)
+              }}
+              placeholder="ABC123"
+              maxLength={6}
+              disabled={isLoading || needsPassword}
+              style={{
+                width: '100%',
+                padding: '14px',
+                border: error
+                  ? '2px solid rgba(239, 68, 68, 0.6)'
+                  : '2px solid rgba(139, 92, 246, 0.4)',
+                borderRadius: '10px',
+                fontSize: '18px',
+                fontWeight: 'bold',
+                fontFamily: 'monospace',
+                textAlign: 'center',
+                letterSpacing: '4px',
+                background: 'rgba(255, 255, 255, 0.05)',
+                color: 'rgba(196, 181, 253, 1)',
+                outline: 'none',
+                marginBottom: '8px',
+              }}
+            />
+
+            {needsPassword && (
+              <input
+                type="password"
+                value={password}
+                onChange={(e) => {
+                  setPassword(e.target.value)
+                  setError('')
+                }}
+                placeholder="Enter password"
+                disabled={isLoading}
+                autoFocus
+                style={{
+                  width: '100%',
+                  padding: '14px',
+                  border: error
+                    ? '2px solid rgba(239, 68, 68, 0.6)'
+                    : '2px solid rgba(251, 191, 36, 0.4)',
+                  borderRadius: '10px',
+                  fontSize: '16px',
+                  textAlign: 'center',
+                  background: 'rgba(255, 255, 255, 0.05)',
+                  color: 'rgba(251, 191, 36, 1)',
+                  outline: 'none',
+                  marginBottom: '8px',
+                  marginTop: '12px',
+                }}
+              />
+            )}
+
+            {error && (
+              <p
+                style={{
+                  fontSize: '13px',
+                  color: 'rgba(248, 113, 113, 1)',
+                  marginBottom: '16px',
+                  textAlign: 'center',
+                }}
+              >
+                {error}
+              </p>
+            )}
+
+            <div style={{ display: 'flex', gap: '12px', marginTop: '24px' }}>
+              <button
+                type="button"
+                onClick={handleClose}
+                disabled={isLoading}
+                style={{
+                  flex: 1,
+                  padding: '12px',
+                  background: 'rgba(75, 85, 99, 0.3)',
+                  color: 'rgba(209, 213, 219, 1)',
+                  border: '2px solid rgba(75, 85, 99, 0.5)',
+                  borderRadius: '10px',
+                  fontSize: '15px',
+                  fontWeight: '600',
+                  cursor: isLoading ? 'not-allowed' : 'pointer',
+                  opacity: isLoading ? 0.5 : 1,
+                  transition: 'all 0.2s ease',
+                }}
+                onMouseEnter={(e) => {
+                  if (!isLoading) {
+                    e.currentTarget.style.background = 'rgba(75, 85, 99, 0.4)'
+                  }
+                }}
+                onMouseLeave={(e) => {
+                  if (!isLoading) {
+                    e.currentTarget.style.background = 'rgba(75, 85, 99, 0.3)'
+                  }
+                }}
+              >
+                Cancel
+              </button>
+              <button
+                type="submit"
+                disabled={code.trim().length !== 6 || isLoading}
+                style={{
+                  flex: 1,
+                  padding: '12px',
+                  background:
+                    code.trim().length === 6 && !isLoading
+                      ? 'linear-gradient(135deg, rgba(59, 130, 246, 0.8), rgba(37, 99, 235, 0.8))'
+                      : 'rgba(75, 85, 99, 0.3)',
+                  color:
+                    code.trim().length === 6 && !isLoading
+                      ? 'rgba(255, 255, 255, 1)'
+                      : 'rgba(156, 163, 175, 1)',
+                  border:
+                    code.trim().length === 6 && !isLoading
+                      ? '2px solid rgba(59, 130, 246, 0.6)'
+                      : '2px solid rgba(75, 85, 99, 0.5)',
+                  borderRadius: '10px',
+                  fontSize: '15px',
+                  fontWeight: '600',
+                  cursor: code.trim().length === 6 && !isLoading ? 'pointer' : 'not-allowed',
+                  opacity: code.trim().length === 6 && !isLoading ? 1 : 0.5,
+                  transition: 'all 0.2s ease',
+                }}
+                onMouseEnter={(e) => {
+                  if (code.trim().length === 6 && !isLoading) {
+                    e.currentTarget.style.background =
+                      'linear-gradient(135deg, rgba(59, 130, 246, 0.9), rgba(37, 99, 235, 0.9))'
+                  }
+                }}
+                onMouseLeave={(e) => {
+                  if (code.trim().length === 6 && !isLoading) {
+                    e.currentTarget.style.background =
+                      'linear-gradient(135deg, rgba(59, 130, 246, 0.8), rgba(37, 99, 235, 0.8))'
+                  }
+                }}
+              >
+                {isLoading ? 'Joining...' : needsPassword ? 'Join with Password' : 'Join Room'}
+              </button>
+            </div>
+          </form>
+        )}
       </div>
     </Modal>
   )

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

@@ -47,7 +47,7 @@ export interface ModerationPanelProps {
   focusedUserId?: string
 }
 
-type Tab = 'members' | 'bans' | 'history'
+type Tab = 'members' | 'bans' | 'history' | 'settings'
 
 export interface HistoricalMemberWithStatus {
   userId: string
@@ -86,6 +86,13 @@ export function ModerationPanel({
   const [error, setError] = useState('')
   const [actionLoading, setActionLoading] = useState<string | null>(null)
 
+  // Settings state
+  const [accessMode, setAccessMode] = useState<string>('open')
+  const [roomPassword, setRoomPassword] = useState('')
+  const [showPasswordInput, setShowPasswordInput] = useState(false)
+  const [selectedNewOwner, setSelectedNewOwner] = useState<string>('')
+  const [joinRequests, setJoinRequests] = useState<any[]>([])
+
   // Ban modal state
   const [showBanModal, setShowBanModal] = useState(false)
   const [banTargetUserId, setBanTargetUserId] = useState<string | null>(null)
@@ -323,6 +330,146 @@ export function ModerationPanel({
     }
   }
 
+  // Load room settings and join requests when Settings tab is opened
+  useEffect(() => {
+    if (!isOpen || activeTab !== 'settings') return
+
+    const loadSettings = async () => {
+      try {
+        // Fetch current room data to get access mode
+        const roomRes = await fetch(`/api/arcade/rooms/${roomId}`)
+        if (roomRes.ok) {
+          const data = await roomRes.json()
+          setAccessMode(data.room?.accessMode || 'open')
+        }
+
+        // Fetch join requests if any
+        const requestsRes = await fetch(`/api/arcade/rooms/${roomId}/join-requests`)
+        if (requestsRes.ok) {
+          const data = await requestsRes.json()
+          setJoinRequests(data.requests || [])
+        }
+      } catch (err) {
+        console.error('Failed to load settings:', err)
+      }
+    }
+
+    loadSettings()
+  }, [isOpen, activeTab, roomId])
+
+  // Handlers for Settings tab
+  const handleUpdateAccessMode = async () => {
+    setActionLoading('update-settings')
+    try {
+      const body: any = { accessMode }
+      if (accessMode === 'password' && roomPassword) {
+        body.password = roomPassword
+      }
+
+      const res = await fetch(`/api/arcade/rooms/${roomId}/settings`, {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(body),
+      })
+
+      if (!res.ok) {
+        const errorData = await res.json()
+        throw new Error(errorData.error || 'Failed to update settings')
+      }
+
+      alert('Room settings updated successfully!')
+      setShowPasswordInput(false)
+      setRoomPassword('')
+    } catch (err) {
+      alert(err instanceof Error ? err.message : 'Failed to update settings')
+    } finally {
+      setActionLoading(null)
+    }
+  }
+
+  const handleTransferOwnership = async () => {
+    if (!selectedNewOwner) return
+
+    const newOwner = members.find((m) => m.userId === selectedNewOwner)
+    if (!newOwner) return
+
+    if (!confirm(`Transfer ownership to ${newOwner.displayName}? You will no longer be the host.`))
+      return
+
+    setActionLoading('transfer-ownership')
+    try {
+      const res = await fetch(`/api/arcade/rooms/${roomId}/transfer-ownership`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ newOwnerId: selectedNewOwner }),
+      })
+
+      if (!res.ok) {
+        const errorData = await res.json()
+        throw new Error(errorData.error || 'Failed to transfer ownership')
+      }
+
+      alert(`Ownership transferred to ${newOwner.displayName}!`)
+      onClose() // Close panel since user is no longer host
+    } catch (err) {
+      alert(err instanceof Error ? err.message : 'Failed to transfer ownership')
+    } finally {
+      setActionLoading(null)
+    }
+  }
+
+  const handleApproveJoinRequest = async (requestId: string) => {
+    setActionLoading(`approve-request-${requestId}`)
+    try {
+      const res = await fetch(`/api/arcade/rooms/${roomId}/join-requests/${requestId}/approve`, {
+        method: 'POST',
+      })
+
+      if (!res.ok) {
+        const errorData = await res.json()
+        throw new Error(errorData.error || 'Failed to approve request')
+      }
+
+      // Reload requests
+      const requestsRes = await fetch(`/api/arcade/rooms/${roomId}/join-requests`)
+      if (requestsRes.ok) {
+        const data = await requestsRes.json()
+        setJoinRequests(data.requests || [])
+      }
+
+      alert('Join request approved!')
+    } catch (err) {
+      alert(err instanceof Error ? err.message : 'Failed to approve request')
+    } finally {
+      setActionLoading(null)
+    }
+  }
+
+  const handleDenyJoinRequest = async (requestId: string) => {
+    setActionLoading(`deny-request-${requestId}`)
+    try {
+      const res = await fetch(`/api/arcade/rooms/${roomId}/join-requests/${requestId}/deny`, {
+        method: 'POST',
+      })
+
+      if (!res.ok) {
+        const errorData = await res.json()
+        throw new Error(errorData.error || 'Failed to deny request')
+      }
+
+      // Reload requests
+      const requestsRes = await fetch(`/api/arcade/rooms/${roomId}/join-requests`)
+      if (requestsRes.ok) {
+        const data = await requestsRes.json()
+        setJoinRequests(data.requests || [])
+      }
+    } catch (err) {
+      alert(err instanceof Error ? err.message : 'Failed to deny request')
+    } finally {
+      setActionLoading(null)
+    }
+  }
+
   const pendingReports = reports.filter((r) => r.status === 'pending')
   const otherMembers = members.filter((m) => m.userId !== currentUserId)
 
@@ -375,7 +522,7 @@ export function ModerationPanel({
             borderBottom: '1px solid rgba(75, 85, 99, 0.3)',
           }}
         >
-          {(['members', 'bans', 'history'] as Tab[]).map((tab) => (
+          {(['members', 'bans', 'history', 'settings'] as Tab[]).map((tab) => (
             <button
               key={tab}
               type="button"
@@ -415,6 +562,26 @@ export function ModerationPanel({
               )}
               {tab === 'bans' && `Banned (${bans.length})`}
               {tab === 'history' && `History (${historicalMembers.length})`}
+              {tab === 'settings' && (
+                <span>
+                  ⚙️ Settings
+                  {joinRequests.filter((r: any) => r.status === 'pending').length > 0 && (
+                    <span
+                      style={{
+                        marginLeft: '6px',
+                        padding: '2px 6px',
+                        borderRadius: '10px',
+                        background: 'rgba(59, 130, 246, 0.8)',
+                        color: 'white',
+                        fontSize: '11px',
+                        fontWeight: '700',
+                      }}
+                    >
+                      {joinRequests.filter((r: any) => r.status === 'pending').length} pending
+                    </span>
+                  )}
+                </span>
+              )}
             </button>
           ))}
         </div>
@@ -1139,6 +1306,307 @@ export function ModerationPanel({
                 )}
               </div>
             )}
+
+            {/* Settings Tab */}
+            {activeTab === 'settings' && (
+              <div style={{ display: 'flex', flexDirection: 'column', gap: '24px' }}>
+                {/* Access Mode Section */}
+                <div>
+                  <div
+                    style={{
+                      fontSize: '14px',
+                      fontWeight: '700',
+                      color: 'rgba(253, 186, 116, 1)',
+                      marginBottom: '12px',
+                      textTransform: 'uppercase',
+                      letterSpacing: '0.5px',
+                    }}
+                  >
+                    🔒 Room Access Mode
+                  </div>
+
+                  <div
+                    style={{
+                      padding: '16px',
+                      background: 'rgba(255, 255, 255, 0.05)',
+                      border: '1px solid rgba(75, 85, 99, 0.3)',
+                      borderRadius: '8px',
+                    }}
+                  >
+                    <select
+                      value={accessMode}
+                      onChange={(e) => {
+                        setAccessMode(e.target.value)
+                        setShowPasswordInput(e.target.value === 'password')
+                      }}
+                      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',
+                        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>
+
+                    {/* Password input (conditional) */}
+                    {(accessMode === 'password' || showPasswordInput) && (
+                      <input
+                        type="text"
+                        value={roomPassword}
+                        onChange={(e) => setRoomPassword(e.target.value)}
+                        placeholder="Enter room password"
+                        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',
+                          marginBottom: '12px',
+                        }}
+                      />
+                    )}
+
+                    <button
+                      type="button"
+                      onClick={handleUpdateAccessMode}
+                      disabled={actionLoading === 'update-settings'}
+                      style={{
+                        width: '100%',
+                        padding: '10px',
+                        background:
+                          actionLoading === 'update-settings'
+                            ? 'rgba(75, 85, 99, 0.3)'
+                            : 'linear-gradient(135deg, rgba(59, 130, 246, 0.8), rgba(37, 99, 235, 0.8))',
+                        color: 'white',
+                        border:
+                          actionLoading === 'update-settings'
+                            ? '1px solid rgba(75, 85, 99, 0.5)'
+                            : '1px solid rgba(59, 130, 246, 0.6)',
+                        borderRadius: '6px',
+                        fontSize: '14px',
+                        fontWeight: '600',
+                        cursor: actionLoading === 'update-settings' ? 'not-allowed' : 'pointer',
+                        opacity: actionLoading === 'update-settings' ? 0.5 : 1,
+                      }}
+                    >
+                      {actionLoading === 'update-settings' ? 'Updating...' : 'Update Access Mode'}
+                    </button>
+                  </div>
+                </div>
+
+                {/* Join Requests Section (for approval-only mode) */}
+                {joinRequests.filter((r: any) => r.status === 'pending').length > 0 && (
+                  <div>
+                    <div
+                      style={{
+                        fontSize: '14px',
+                        fontWeight: '700',
+                        color: 'rgba(59, 130, 246, 1)',
+                        marginBottom: '12px',
+                        textTransform: 'uppercase',
+                        letterSpacing: '0.5px',
+                      }}
+                    >
+                      🙋 Pending Join Requests
+                    </div>
+
+                    <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+                      {joinRequests
+                        .filter((r: any) => r.status === 'pending')
+                        .map((request: any) => (
+                          <div
+                            key={request.id}
+                            style={{
+                              padding: '12px',
+                              background: 'rgba(59, 130, 246, 0.08)',
+                              border: '1px solid rgba(59, 130, 246, 0.3)',
+                              borderRadius: '8px',
+                              display: 'flex',
+                              alignItems: 'center',
+                              justifyContent: 'space-between',
+                            }}
+                          >
+                            <div>
+                              <div
+                                style={{
+                                  fontSize: '14px',
+                                  fontWeight: '600',
+                                  color: 'rgba(209, 213, 219, 1)',
+                                }}
+                              >
+                                {request.userName || 'Anonymous User'}
+                              </div>
+                              <div
+                                style={{
+                                  fontSize: '12px',
+                                  color: 'rgba(156, 163, 175, 1)',
+                                  marginTop: '2px',
+                                }}
+                              >
+                                Requested {new Date(request.createdAt).toLocaleString()}
+                              </div>
+                            </div>
+
+                            <div style={{ display: 'flex', gap: '8px' }}>
+                              <button
+                                type="button"
+                                onClick={() => handleDenyJoinRequest(request.id)}
+                                disabled={actionLoading === `deny-request-${request.id}`}
+                                style={{
+                                  padding: '6px 12px',
+                                  background: 'rgba(239, 68, 68, 0.2)',
+                                  color: 'rgba(239, 68, 68, 1)',
+                                  border: '1px solid rgba(239, 68, 68, 0.4)',
+                                  borderRadius: '6px',
+                                  fontSize: '13px',
+                                  fontWeight: '600',
+                                  cursor:
+                                    actionLoading === `deny-request-${request.id}`
+                                      ? 'not-allowed'
+                                      : 'pointer',
+                                  opacity: actionLoading === `deny-request-${request.id}` ? 0.5 : 1,
+                                }}
+                              >
+                                {actionLoading === `deny-request-${request.id}`
+                                  ? 'Denying...'
+                                  : 'Deny'}
+                              </button>
+                              <button
+                                type="button"
+                                onClick={() => handleApproveJoinRequest(request.id)}
+                                disabled={actionLoading === `approve-request-${request.id}`}
+                                style={{
+                                  padding: '6px 12px',
+                                  background: 'rgba(34, 197, 94, 0.2)',
+                                  color: 'rgba(34, 197, 94, 1)',
+                                  border: '1px solid rgba(34, 197, 94, 0.4)',
+                                  borderRadius: '6px',
+                                  fontSize: '13px',
+                                  fontWeight: '600',
+                                  cursor:
+                                    actionLoading === `approve-request-${request.id}`
+                                      ? 'not-allowed'
+                                      : 'pointer',
+                                  opacity:
+                                    actionLoading === `approve-request-${request.id}` ? 0.5 : 1,
+                                }}
+                              >
+                                {actionLoading === `approve-request-${request.id}`
+                                  ? 'Approving...'
+                                  : 'Approve'}
+                              </button>
+                            </div>
+                          </div>
+                        ))}
+                    </div>
+                  </div>
+                )}
+
+                {/* Transfer Ownership Section */}
+                <div>
+                  <div
+                    style={{
+                      fontSize: '14px',
+                      fontWeight: '700',
+                      color: 'rgba(251, 146, 60, 1)',
+                      marginBottom: '12px',
+                      textTransform: 'uppercase',
+                      letterSpacing: '0.5px',
+                    }}
+                  >
+                    👑 Transfer Ownership
+                  </div>
+
+                  <div
+                    style={{
+                      padding: '16px',
+                      background: 'rgba(251, 146, 60, 0.08)',
+                      border: '1px solid rgba(251, 146, 60, 0.3)',
+                      borderRadius: '8px',
+                    }}
+                  >
+                    <p
+                      style={{
+                        fontSize: '13px',
+                        color: 'rgba(209, 213, 219, 0.8)',
+                        marginBottom: '12px',
+                      }}
+                    >
+                      Transfer host privileges to another member. You will no longer be the host.
+                    </p>
+
+                    <select
+                      value={selectedNewOwner}
+                      onChange={(e) => setSelectedNewOwner(e.target.value)}
+                      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',
+                        marginBottom: '12px',
+                        cursor: 'pointer',
+                      }}
+                    >
+                      <option value="">Select new owner...</option>
+                      {otherMembers.map((member) => (
+                        <option key={member.userId} value={member.userId}>
+                          {member.displayName}
+                          {member.isOnline ? ' (Online)' : ' (Offline)'}
+                        </option>
+                      ))}
+                    </select>
+
+                    <button
+                      type="button"
+                      onClick={handleTransferOwnership}
+                      disabled={!selectedNewOwner || actionLoading === 'transfer-ownership'}
+                      style={{
+                        width: '100%',
+                        padding: '10px',
+                        background:
+                          !selectedNewOwner || actionLoading === 'transfer-ownership'
+                            ? 'rgba(75, 85, 99, 0.3)'
+                            : 'linear-gradient(135deg, rgba(251, 146, 60, 0.8), rgba(249, 115, 22, 0.8))',
+                        color: 'white',
+                        border:
+                          !selectedNewOwner || actionLoading === 'transfer-ownership'
+                            ? '1px solid rgba(75, 85, 99, 0.5)'
+                            : '1px solid rgba(251, 146, 60, 0.6)',
+                        borderRadius: '6px',
+                        fontSize: '14px',
+                        fontWeight: '600',
+                        cursor:
+                          !selectedNewOwner || actionLoading === 'transfer-ownership'
+                            ? 'not-allowed'
+                            : 'pointer',
+                        opacity:
+                          !selectedNewOwner || actionLoading === 'transfer-ownership' ? 0.5 : 1,
+                      }}
+                    >
+                      {actionLoading === 'transfer-ownership'
+                        ? 'Transferring...'
+                        : 'Transfer Ownership'}
+                    </button>
+                  </div>
+                </div>
+              </div>
+            )}
           </div>
         )}
 

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

@@ -1,8 +1,9 @@
 import React from 'react'
+import { getRoomDisplayWithEmoji } from '@/utils/room-display'
 
 interface RecentRoom {
   code: string
-  name: string
+  name: string | null
   gameName: string
   joinedAt: number
 }
@@ -100,7 +101,13 @@ export function RecentRoomsList({ onSelectRoom }: RecentRoomsListProps) {
               }}
             >
               <span>🏟️</span>
-              <span>{room.name}</span>
+              <span>
+                {getRoomDisplayWithEmoji({
+                  name: room.name,
+                  code: room.code,
+                  gameName: room.gameName,
+                })}
+              </span>
             </div>
             <div
               style={{
@@ -123,7 +130,11 @@ export function RecentRoomsList({ onSelectRoom }: RecentRoomsListProps) {
 }
 
 // Helper function to add a room to recent rooms
-export function addToRecentRooms(room: { code: string; name: string; gameName: string }): void {
+export function addToRecentRooms(room: {
+  code: string
+  name: string | null
+  gameName: string
+}): void {
   try {
     const stored = localStorage.getItem(STORAGE_KEY)
     const rooms: RecentRoom[] = stored ? JSON.parse(stored) : []

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

@@ -3,6 +3,7 @@ import { useRouter } from 'next/navigation'
 import { useEffect, useState } from 'react'
 import { useLeaveRoom, useRoomData } from '@/hooks/useRoomData'
 import { useViewerId } from '@/hooks/useViewerId'
+import { getRoomDisplayWithEmoji } from '@/utils/room-display'
 import { CreateRoomModal } from './CreateRoomModal'
 import { JoinRoomModal } from './JoinRoomModal'
 import { ModerationPanel } from './ModerationPanel'
@@ -11,7 +12,7 @@ import { RoomShareButtons } from './RoomShareButtons'
 type GameMode = 'none' | 'single' | 'battle' | 'tournament'
 
 interface RoomInfoProps {
-  roomName?: string
+  roomName?: string | null
   gameName: string
   playerCount: number
   joinCode?: string
@@ -57,11 +58,15 @@ export function RoomInfo({
   const [showModerationPanel, setShowModerationPanel] = useState(false)
   const [focusedUserId, setFocusedUserId] = useState<string | undefined>(undefined)
   const [pendingReportsCount, setPendingReportsCount] = useState(0)
+  const [pendingJoinRequestsCount, setPendingJoinRequestsCount] = useState(0)
   const { getRoomShareUrl, roomData } = useRoomData()
   const { data: currentUserId } = useViewerId()
   const { mutateAsync: leaveRoom } = useLeaveRoom()
 
-  const displayName = roomName || gameName
+  // Use room display utility for consistent naming
+  const displayName = joinCode
+    ? getRoomDisplayWithEmoji({ name: roomName || null, code: joinCode, gameName })
+    : roomName || gameName
   const shareUrl = joinCode ? getRoomShareUrl(joinCode) : ''
 
   // Determine ownership status
@@ -93,6 +98,29 @@ export function RoomInfo({
     return () => clearInterval(interval)
   }, [isCurrentUserCreator, roomId])
 
+  // Fetch pending join requests count if user is host
+  useEffect(() => {
+    if (!isCurrentUserCreator || !roomId) return
+
+    const fetchPendingJoinRequests = async () => {
+      try {
+        const res = await fetch(`/api/arcade/rooms/${roomId}/join-requests`)
+        if (res.ok) {
+          const data = await res.json()
+          const pending = data.requests?.filter((r: any) => r.status === 'pending') || []
+          setPendingJoinRequestsCount(pending.length)
+        }
+      } catch (error) {
+        console.error('[RoomInfo] Failed to fetch join requests:', error)
+      }
+    }
+
+    fetchPendingJoinRequests()
+    // Poll every 30 seconds
+    const interval = setInterval(fetchPendingJoinRequests, 30000)
+    return () => clearInterval(interval)
+  }, [isCurrentUserCreator, roomId])
+
   // Listen for moderation events to update report count in real-time
   const { moderationEvent } = useRoomData()
   useEffect(() => {
@@ -235,8 +263,8 @@ export function RoomInfo({
                 >
                   <span style={{ fontSize: '10px', lineHeight: 1 }}>👑</span>
                   <span style={{ lineHeight: 1 }}>You are host</span>
-                  {/* Pending reports badge */}
-                  {pendingReportsCount > 0 && (
+                  {/* Pending items badge (reports + join requests) */}
+                  {(pendingReportsCount > 0 || pendingJoinRequestsCount > 0) && (
                     <span
                       style={{
                         display: 'inline-flex',
@@ -245,15 +273,24 @@ export function RoomInfo({
                         width: '16px',
                         height: '16px',
                         borderRadius: '50%',
-                        background: 'rgba(239, 68, 68, 1)',
+                        background:
+                          pendingJoinRequestsCount > 0
+                            ? 'rgba(59, 130, 246, 1)'
+                            : 'rgba(239, 68, 68, 1)',
                         color: 'white',
                         fontSize: '8px',
                         fontWeight: '700',
                         marginLeft: '2px',
                       }}
-                      title={`${pendingReportsCount} pending report${pendingReportsCount > 1 ? 's' : ''}`}
+                      title={
+                        pendingJoinRequestsCount > 0 && pendingReportsCount > 0
+                          ? `${pendingJoinRequestsCount} join request${pendingJoinRequestsCount > 1 ? 's' : ''}, ${pendingReportsCount} report${pendingReportsCount > 1 ? 's' : ''}`
+                          : pendingJoinRequestsCount > 0
+                            ? `${pendingJoinRequestsCount} join request${pendingJoinRequestsCount > 1 ? 's' : ''}`
+                            : `${pendingReportsCount} report${pendingReportsCount > 1 ? 's' : ''}`
+                      }
                     >
-                      {pendingReportsCount}
+                      {pendingReportsCount + pendingJoinRequestsCount}
                     </span>
                   )}
                 </div>

apps/web/src/db/schema/arcade-rooms.ts

@@ -8,7 +8,7 @@ export const arcadeRooms = sqliteTable('arcade_rooms', {
 
   // Room identity
   code: text('code', { length: 6 }).notNull().unique(), // e.g., "ABC123"
-  name: text('name', { length: 50 }).notNull(),
+  name: text('name', { length: 50 }), // Optional: auto-generates from code and game if null
 
   // Creator info
   createdBy: text('created_by').notNull(), // User/guest ID

apps/web/src/lib/arcade/room-manager.ts

@@ -9,12 +9,14 @@ import { generateRoomCode } from './room-code'
 import type { GameName } from './validation'
 
 export interface CreateRoomOptions {
-  name: string
+  name: string | null
   createdBy: string // User/guest ID
   creatorName: string
   gameName: GameName
   gameConfig: unknown
   ttlMinutes?: number // Default: 60
+  accessMode?: 'open' | 'password' | 'approval-only' | 'restricted' | 'locked' | 'retired'
+  password?: string
 }
 
 export interface UpdateRoomOptions {
@@ -55,7 +57,8 @@ export async function createRoom(options: CreateRoomOptions): Promise<schema.Arc
     createdAt: now,
     lastActivity: now,
     ttlMinutes: options.ttlMinutes || 60,
-    accessMode: 'open', // Default to open access
+    accessMode: options.accessMode || 'open', // Default to open access
+    password: options.password || null,
     gameName: options.gameName,
     gameConfig: options.gameConfig as any,
     status: 'lobby',

apps/web/src/utils/room-display.ts

@@ -0,0 +1,126 @@
+/**
+ * Utility for displaying room names consistently across the codebase
+ */
+
+export interface RoomDisplayData {
+  /**
+   * The room's custom name if provided
+   */
+  name: string | null
+  /**
+   * The room's unique code (e.g., "ABC123")
+   */
+  code: string
+  /**
+   * The game type (optional, for emoji selection)
+   */
+  gameName?: string
+}
+
+export interface RoomDisplay {
+  /**
+   * Plain text representation - ALWAYS available
+   * Use this for: document titles, logs, notifications, plaintext contexts
+   */
+  plaintext: string
+
+  /**
+   * Primary display text (without emoji)
+   */
+  primary: string
+
+  /**
+   * Secondary/subtitle text (optional)
+   */
+  secondary?: string
+
+  /**
+   * Emoji/icon for the room (optional)
+   */
+  emoji?: string
+
+  /**
+   * Whether the name was auto-generated (vs. custom)
+   */
+  isGenerated: boolean
+}
+
+const GAME_EMOJIS: Record<string, string> = {
+  matching: '🃏',
+  'memory-quiz': '🧠',
+  'complement-race': '⚡',
+}
+
+const DEFAULT_EMOJI = '🎮'
+
+/**
+ * Get structured room display information
+ *
+ * @example
+ * // Custom named room
+ * const display = getRoomDisplay({ name: "Alice's Room", code: "ABC123" })
+ * // => { plaintext: "Alice's Room", primary: "Alice's Room", secondary: "ABC123", emoji: undefined, isGenerated: false }
+ *
+ * @example
+ * // Auto-generated (no name)
+ * const display = getRoomDisplay({ name: null, code: "ABC123", gameName: "matching" })
+ * // => { plaintext: "Room ABC123", primary: "ABC123", secondary: undefined, emoji: "🃏", isGenerated: true }
+ */
+export function getRoomDisplay(room: RoomDisplayData): RoomDisplay {
+  if (room.name) {
+    // Custom name provided
+    return {
+      plaintext: room.name,
+      primary: room.name,
+      secondary: room.code,
+      emoji: undefined,
+      isGenerated: false,
+    }
+  }
+
+  // Auto-generate display
+  const emoji = GAME_EMOJIS[room.gameName || ''] || DEFAULT_EMOJI
+
+  return {
+    plaintext: `Room ${room.code}`, // Always plaintext fallback
+    primary: room.code,
+    secondary: undefined,
+    emoji,
+    isGenerated: true,
+  }
+}
+
+/**
+ * Get plaintext room name (shorthand)
+ * Use this when you just need a string representation
+ *
+ * @example
+ * getRoomDisplayName({ name: "Alice's Room", code: "ABC123" })
+ * // => "Alice's Room"
+ *
+ * @example
+ * getRoomDisplayName({ name: null, code: "ABC123" })
+ * // => "Room ABC123"
+ */
+export function getRoomDisplayName(room: RoomDisplayData): string {
+  return getRoomDisplay(room).plaintext
+}
+
+/**
+ * Get room display with emoji (for rich contexts)
+ *
+ * @example
+ * getRoomDisplayWithEmoji({ name: "Alice's Room", code: "ABC123" })
+ * // => "Alice's Room"
+ *
+ * @example
+ * getRoomDisplayWithEmoji({ name: null, code: "ABC123", gameName: "matching" })
+ * // => "🃏 ABC123"
+ */
+export function getRoomDisplayWithEmoji(room: RoomDisplayData): string {
+  const display = getRoomDisplay(room)
+  if (display.emoji) {
+    return `${display.emoji} ${display.primary}`
+  }
+  return display.primary
+}

package.json

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