chore(release): 2.10.0 [skip ci]

## [2.10.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v2.9.0...v2.10.0) (2025-10-09)

### Features

* implement rich Radix UI tooltips for player avatars ([d03c789](d03c789879))

CHANGELOG.md

@@ -1,3 +1,90 @@
+## [2.10.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v2.9.0...v2.10.0) (2025-10-09)
+
+
+### Features
+
+* implement rich Radix UI tooltips for player avatars ([d03c789](https://github.com/antialias/soroban-abacus-flashcards/commit/d03c7898799b378f912f47d7267a00bc7ce3d580))
+
+## [2.9.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v2.8.7...v2.9.0) (2025-10-09)
+
+
+### Features
+
+* implement auto-save for player settings modal ([a83dc09](https://github.com/antialias/soroban-abacus-flashcards/commit/a83dc097e43c265a297281da54754f58ac831754))
+
+## [2.8.7](https://github.com/antialias/soroban-abacus-flashcards/compare/v2.8.6...v2.8.7) (2025-10-09)
+
+
+### Bug Fixes
+
+* enable real-time player name updates across room members ([5171be3](https://github.com/antialias/soroban-abacus-flashcards/commit/5171be3d37980eb1c98aa0d1e1d6e06f589763d1))
+
+## [2.8.6](https://github.com/antialias/soroban-abacus-flashcards/compare/v2.8.5...v2.8.6) (2025-10-09)
+
+
+### Bug Fixes
+
+* prevent duplicate display of network avatars in nav ([d474ef0](https://github.com/antialias/soroban-abacus-flashcards/commit/d474ef07d69cf0b4f5dedd404616e3bbee7289fe))
+
+## [2.8.5](https://github.com/antialias/soroban-abacus-flashcards/compare/v2.8.4...v2.8.5) (2025-10-09)
+
+
+### Bug Fixes
+
+* remove redirect loop by not redirecting from room page ([10cf715](https://github.com/antialias/soroban-abacus-flashcards/commit/10cf71527f7cede7fd93e502dbfc59df99b5a524))
+
+## [2.8.4](https://github.com/antialias/soroban-abacus-flashcards/compare/v2.8.3...v2.8.4) (2025-10-09)
+
+
+### Bug Fixes
+
+* prevent redirect loops by checking if already at target URL ([c5268b7](https://github.com/antialias/soroban-abacus-flashcards/commit/c5268b79dee66aa02e14e2024fe1c6242a172ed3))
+
+## [2.8.3](https://github.com/antialias/soroban-abacus-flashcards/compare/v2.8.2...v2.8.3) (2025-10-08)
+
+
+### Bug Fixes
+
+* remove ArcadeGuardedPage from room page to prevent redirect loop ([4686f59](https://github.com/antialias/soroban-abacus-flashcards/commit/4686f59d245b2b502dc0764c223a5ce84bf1af44))
+
+## [2.8.2](https://github.com/antialias/soroban-abacus-flashcards/compare/v2.8.1...v2.8.2) (2025-10-08)
+
+
+### Bug Fixes
+
+* revert to showing only active players in room games ([87cc0b6](https://github.com/antialias/soroban-abacus-flashcards/commit/87cc0b64fb5f3debaf1d2f122aecfefc62922fed))
+
+## [2.8.1](https://github.com/antialias/soroban-abacus-flashcards/compare/v2.8.0...v2.8.1) (2025-10-08)
+
+
+### Bug Fixes
+
+* include all players from room members in room games ([28a2e7d](https://github.com/antialias/soroban-abacus-flashcards/commit/28a2e7d6511e70b83adf7d0465789a91026bc1f7))
+
+## [2.8.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v2.7.4...v2.8.0) (2025-10-08)
+
+
+### Features
+
+* implement room-wide multi-user game state synchronization ([8175c43](https://github.com/antialias/soroban-abacus-flashcards/commit/8175c43533c474fff48eb128c97747033bfb434a))
+
+
+### Tests
+
+* add comprehensive tests for arcade guard and room navigation ([b49630f](https://github.com/antialias/soroban-abacus-flashcards/commit/b49630f3cb02ebbac75b4680948bbface314dccb))
+
+## [2.7.4](https://github.com/antialias/soroban-abacus-flashcards/compare/v2.7.3...v2.7.4) (2025-10-08)
+
+
+### Bug Fixes
+
+* respect enabled flag in useArcadeGuard WebSocket redirects ([01ff114](https://github.com/antialias/soroban-abacus-flashcards/commit/01ff114258ff7ab43ef2bd79b41c7035fe02ac70))
+
+
+### Code Refactoring
+
+* move room management pages to /arcade-rooms ([4316687](https://github.com/antialias/soroban-abacus-flashcards/commit/431668729cfb145d6e0c13947de2a82f27fa400d))
+
 ## [2.7.3](https://github.com/antialias/soroban-abacus-flashcards/compare/v2.7.2...v2.7.3) (2025-10-08)
 
 

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

@@ -1,42 +1,6 @@
 {
   "permissions": {
-    "allow": [
-      "Bash(npm run build:*)",
-      "Bash(npx tsc:*)",
-      "Bash(curl:*)",
-      "Bash(git add:*)",
-      "Bash(git commit -m \"$(cat <<''EOF''\nfix: lazy-load database connection to prevent build-time access\n\nRefactor db/index.ts to use lazy initialization via Proxy pattern.\nThis prevents the database from being accessed at module import time,\nwhich was causing Next.js build failures in CI/CD environments where\nno database file exists.\n\nThe database connection is now created only when first accessed at\nruntime, allowing static site generation to complete successfully.\n\n🤖 Generated with [Claude Code](https://claude.com/claude-code)\n\nCo-Authored-By: Claude <noreply@anthropic.com>\nEOF\n)\")",
-      "Bash(git push:*)",
-      "Read(//Users/antialias/projects/soroban-abacus-flashcards/**)",
-      "Bash(npm install:*)",
-      "Bash(cat:*)",
-      "Bash(pnpm add:*)",
-      "Bash(npx biome check:*)",
-      "Bash(npx:*)",
-      "Bash(eslint:*)",
-      "Bash(npm run lint:fix:*)",
-      "Bash(npm run format:*)",
-      "Bash(npm run lint:*)",
-      "Bash(pnpm install:*)",
-      "Bash(pnpm run:*)",
-      "Bash(rm:*)",
-      "Bash(lsof:*)",
-      "Bash(xargs kill:*)",
-      "Bash(tee:*)",
-      "Bash(for file in src/app/arcade/complement-race/components/RaceTrack/CircularTrack.tsx src/app/arcade/complement-race/components/RaceTrack/LinearTrack.tsx src/app/games/complement-race/components/RaceTrack/CircularTrack.tsx src/app/games/complement-race/components/RaceTrack/LinearTrack.tsx)",
-      "Bash(do)",
-      "Bash(done)",
-      "Bash(for file in src/app/arcade/complement-race/components/RaceTrack/SteamTrainJourney.tsx src/app/games/complement-race/components/RaceTrack/SteamTrainJourney.tsx)",
-      "Bash(for file in src/app/arcade/complement-race/hooks/useTrackManagement.ts src/app/games/complement-race/hooks/useTrackManagement.ts)",
-      "Bash(echo \"EXIT CODE: $?\")",
-      "Bash(git commit -m \"$(cat <<''EOF''\nfeat: add Biome + ESLint linting setup\n\nAdd Biome for formatting and general linting, with minimal ESLint\nconfiguration for React Hooks rules only. This provides:\n\n- Fast formatting via Biome (10-100x faster than Prettier)\n- General JS/TS linting via Biome\n- React Hooks validation via ESLint (rules-of-hooks)\n- Import organization via Biome\n\nConfiguration files:\n- biome.jsonc: Biome config with custom rule overrides\n- eslint.config.js: Minimal flat config for React Hooks only\n- .gitignore: Added Biome cache exclusion\n- LINTING.md: Documentation for the setup\n\nScripts added to package.json:\n- npm run lint: Check all files\n- npm run lint:fix: Auto-fix issues\n- npm run format: Format all files\n- npm run check: Full Biome check\n\n🤖 Generated with [Claude Code](https://claude.com/claude-code)\n\nCo-Authored-By: Claude <noreply@anthropic.com>\nEOF\n)\")",
-      "Bash(git commit:*)",
-      "Bash(npm run pre-commit:*)",
-      "Bash(npm run:*)",
-      "Bash(git pull:*)",
-      "Bash(git stash:*)",
-      "Bash(members of the room\" requirement for room-based gameplay.\n\n🤖 Generated with [Claude Code](https://claude.com/claude-code)\n\nCo-Authored-By: Claude <noreply@anthropic.com>\nEOF\n)\")"
-    ],
+    "allow": ["Bash(npm test:*)", "Read(//Users/antialias/projects/**)"],
     "deny": [],
     "ask": []
   }

apps/web/docs/MULTIPLAYER_SYNC_ARCHITECTURE.md

@@ -0,0 +1,490 @@
+# Multiplayer Synchronization Architecture
+
+## Current State: Single-User Multi-Tab Sync
+
+### How it Works
+
+**Client-Side Flow:**
+
+1. User opens game in Tab A and Tab B
+2. Both tabs create WebSocket connections via `useArcadeSocket()`
+3. Both emit `join-arcade-session` with `userId`
+4. Server adds both sockets to `arcade:${userId}` room
+
+**When User Makes a Move (from Tab A):**
+
+```typescript
+// Client (Tab A)
+sendMove({ type: 'FLIP_CARD', playerId: 'player-1', data: { cardId: 'card-5' } })
+
+// Optimistic update applied locally
+state = applyMoveOptimistically(state, move)
+
+// Socket emits to server
+socket.emit('game-move', { userId, move })
+```
+
+**Server Processing:**
+
+```typescript
+// socket-server.ts line 71
+socket.on('game-move', async (data) => {
+  // Validate move
+  const result = await applyGameMove(data.userId, data.move)
+
+  if (result.success) {
+    // ✅ Broadcast to ALL tabs of this user
+    io.to(`arcade:${data.userId}`).emit('move-accepted', {
+      gameState: result.session.gameState,
+      version: result.session.version,
+      move: data.move
+    })
+  }
+})
+```
+
+**Both Tabs Receive Update:**
+
+```typescript
+// Client (Tab A and Tab B)
+socket.on('move-accepted', (data) => {
+  // Update server state
+  optimistic.handleMoveAccepted(data.gameState, data.version, data.move)
+
+  // Tab A: Remove from pending queue (was optimistic)
+  // Tab B: Just sync with server state (wasn't expecting it)
+})
+```
+
+### Key Components
+
+1. **`useOptimisticGameState`** - Manages optimistic updates
+   - Keeps `serverState` (last confirmed by server)
+   - Keeps `pendingMoves[]` (not yet confirmed)
+   - Current state = serverState + all pending moves applied
+
+2. **`useArcadeSession`** - Combines socket + optimistic state
+   - Connects socket
+   - Applies moves optimistically
+   - Sends moves to server
+   - Handles server responses
+
+3. **Socket Rooms** - Server-side broadcast channels
+   - `arcade:${userId}` - All tabs of one user
+   - Each socket can be in multiple rooms
+   - `io.to(room).emit()` broadcasts to all sockets in that room
+
+4. **Session Storage** - Database
+   - One session per user (userId is unique key)
+   - Contains `gameState`, `version`, `roomId`
+   - Optimistic locking via version number
+
+---
+
+## Required: Room-Based Multi-User Sync
+
+### The Goal
+
+Multiple users in the same room at `/arcade/room` should all see synchronized game state:
+
+- User A (2 tabs): Tab A1, Tab A2
+- User B (1 tab): Tab B1
+- User C (2 tabs): Tab C1, Tab C2
+
+When User A makes a move in Tab A1:
+- **All of User A's tabs** see the move (Tab A1, Tab A2)
+- **All of User B's tabs** see the move (Tab B1)
+- **All of User C's tabs** see the move (Tab C1, Tab C2)
+
+### The Challenge
+
+Current architecture only broadcasts within one user:
+```typescript
+// ❌ Only reaches User A's tabs
+io.to(`arcade:${userA}`).emit('move-accepted', ...)
+```
+
+We need to broadcast to the entire room:
+```typescript
+// ✅ Reaches all users in the room
+io.to(`game:${roomId}`).emit('move-accepted', ...)
+```
+
+### The Solution
+
+#### 1. Add Room-Based Game Socket Room
+
+When a user joins `/arcade/room`, they join TWO socket rooms:
+
+```typescript
+// socket-server.ts - extend join-arcade-session
+socket.on('join-arcade-session', async ({ userId, roomId }) => {
+  // Join user's personal room (for multi-tab sync)
+  socket.join(`arcade:${userId}`)
+
+  // If this session is part of a room, also join the game room
+  if (roomId) {
+    socket.join(`game:${roomId}`)
+    console.log(`🎮 User ${userId} joined game room ${roomId}`)
+  }
+
+  // Send current session state...
+})
+```
+
+#### 2. Broadcast to Both Rooms
+
+When processing moves for room-based sessions:
+
+```typescript
+// socket-server.ts - modify game-move handler
+socket.on('game-move', async (data) => {
+  const result = await applyGameMove(data.userId, data.move)
+
+  if (result.success && result.session) {
+    const moveAcceptedData = {
+      gameState: result.session.gameState,
+      version: result.session.version,
+      move: data.move,
+    }
+
+    // Broadcast to user's own tabs (for optimistic update reconciliation)
+    io.to(`arcade:${data.userId}`).emit('move-accepted', moveAcceptedData)
+
+    // If this is a room-based session, ALSO broadcast to all room members
+    if (result.session.roomId) {
+      io.to(`game:${result.session.roomId}`).emit('move-accepted', moveAcceptedData)
+      console.log(`📢 Broadcasted move to room ${result.session.roomId}`)
+    }
+  }
+})
+```
+
+**Why broadcast to both?**
+- `arcade:${userId}` - So the acting user's tabs can reconcile their optimistic updates
+- `game:${roomId}` - So all other users in the room receive the update
+
+#### 3. Client Handles Own vs. Other Moves
+
+The client already handles this correctly via optimistic updates:
+
+```typescript
+// User A (Tab A1) - Makes move
+sendMove({ type: 'FLIP_CARD', ... })
+// → Applies optimistically immediately
+// → Sends to server
+// → Receives move-accepted
+// → Reconciles: removes from pending queue
+
+// User B (Tab B1) - Sees move from User A
+// → Receives move-accepted (unexpected)
+// → Reconciles: clears pending queue, syncs with server state
+// → Result: sees User A's move immediately
+```
+
+The beauty is that `handleMoveAccepted()` already handles both cases:
+- **Own move**: Remove from pending queue
+- **Other's move**: Clear pending queue (since server state is now ahead)
+
+#### 4. Pass roomId in join-arcade-session
+
+Client needs to send roomId when joining:
+
+```typescript
+// hooks/useArcadeSocket.ts
+const joinSession = useCallback((userId: string, roomId?: string) => {
+  if (!socket) return
+  socket.emit('join-arcade-session', { userId, roomId })
+}, [socket])
+
+// hooks/useArcadeSession.ts
+useEffect(() => {
+  if (connected && autoJoin && userId) {
+    // Get roomId from session or room context
+    const roomId = getRoomId() // Need to provide this
+    joinSession(userId, roomId)
+  }
+}, [connected, autoJoin, userId, joinSession])
+```
+
+---
+
+## Implementation Plan
+
+### Phase 1: Server-Side Changes
+
+**File: `socket-server.ts`**
+
+1. ✅ Accept `roomId` in `join-arcade-session` event
+   ```typescript
+   socket.on('join-arcade-session', async ({ userId, roomId }) => {
+     socket.join(`arcade:${userId}`)
+
+     // Join game room if session is room-based
+     if (roomId) {
+       socket.join(`game:${roomId}`)
+     }
+
+     // Rest of logic...
+   })
+   ```
+
+2. ✅ Broadcast to room in `game-move` handler
+   ```typescript
+   if (result.success && result.session) {
+     const moveData = {
+       gameState: result.session.gameState,
+       version: result.session.version,
+       move: data.move,
+     }
+
+     // Broadcast to user's tabs
+     io.to(`arcade:${data.userId}`).emit('move-accepted', moveData)
+
+     // ALSO broadcast to room if room-based session
+     if (result.session.roomId) {
+       io.to(`game:${result.session.roomId}`).emit('move-accepted', moveData)
+     }
+   }
+   ```
+
+3. ✅ Handle room disconnects
+   ```typescript
+   socket.on('disconnect', () => {
+     // Leave all rooms (handled automatically by socket.io)
+     // But log for debugging
+     if (currentUserId && currentRoomId) {
+       console.log(`User ${currentUserId} left game room ${currentRoomId}`)
+     }
+   })
+   ```
+
+### Phase 2: Client-Side Changes
+
+**File: `hooks/useArcadeSocket.ts`**
+
+1. ✅ Add roomId parameter to joinSession
+   ```typescript
+   export interface UseArcadeSocketReturn {
+     // ... existing
+     joinSession: (userId: string, roomId?: string) => void
+   }
+
+   const joinSession = useCallback((userId: string, roomId?: string) => {
+     if (!socket) return
+     socket.emit('join-arcade-session', { userId, roomId })
+   }, [socket])
+   ```
+
+**File: `hooks/useArcadeSession.ts`**
+
+2. ✅ Accept roomId in options
+   ```typescript
+   export interface UseArcadeSessionOptions<TState> {
+     userId: string
+     roomId?: string // NEW
+     initialState: TState
+     applyMove: (state: TState, move: GameMove) => TState
+     // ... rest
+   }
+
+   export function useArcadeSession<TState>(options: UseArcadeSessionOptions<TState>) {
+     const { userId, roomId, ...optimisticOptions } = options
+
+     // Auto-join with roomId
+     useEffect(() => {
+       if (connected && autoJoin && userId) {
+         joinSession(userId, roomId)
+       }
+     }, [connected, autoJoin, userId, roomId, joinSession])
+
+     // ... rest
+   }
+   ```
+
+**File: `app/arcade/matching/context/ArcadeMemoryPairsContext.tsx`**
+
+3. ✅ Get roomId from room data and pass to session
+   ```typescript
+   import { useRoomData } from '@/hooks/useRoomData'
+
+   export function ArcadeMemoryPairsProvider({ children }: { children: ReactNode }) {
+     const { data: viewerId } = useViewerId()
+     const { roomData } = useRoomData()
+
+     // Arcade session integration
+     const { state, sendMove, ... } = useArcadeSession<MemoryPairsState>({
+       userId: viewerId || '',
+       roomId: roomData?.id, // NEW - pass room ID
+       initialState,
+       applyMove: applyMoveOptimistically,
+     })
+
+     // ... rest stays the same
+   }
+   ```
+
+### Phase 3: Testing
+
+1. **Multi-Tab Test (Single User)**
+   - Open `/arcade/room` in 2 tabs as User A
+   - Make move in Tab 1
+   - Verify Tab 2 updates immediately
+
+2. **Multi-User Test (Different Users)**
+   - User A opens `/arcade/room` in 1 tab
+   - User B opens `/arcade/room` in 1 tab (same room)
+   - User A makes move
+   - Verify User B sees move immediately
+
+3. **Multi-User Multi-Tab Test**
+   - User A: 2 tabs (Tab A1, Tab A2)
+   - User B: 2 tabs (Tab B1, Tab B2)
+   - User A makes move in Tab A1
+   - Verify all 4 tabs update
+
+4. **Rapid Move Test**
+   - User A and User B both make moves rapidly
+   - Verify no conflicts
+   - Verify all moves are processed in order
+
+---
+
+## Edge Cases to Handle
+
+### 1. User Leaves Room Mid-Game
+
+**Current behavior:** Session persists, user can rejoin
+
+**Required behavior:**
+- If user leaves room (HTTP POST to `/api/arcade/rooms/[roomId]/leave`):
+  - Delete their session
+  - Emit `session-ended` to their tabs
+  - Other users continue playing
+
+### 2. Version Conflicts
+
+**Already handled** by optimistic locking:
+- Each move increments version
+- Client tracks server version
+- If conflict detected, reconciliation happens automatically
+
+### 3. Session Without Room
+
+**Already handled** by session-manager.ts:
+- Sessions without `roomId` are considered orphaned
+- They're cleaned up on next access (lines 111-115)
+
+### 4. Multiple Users Same Move
+
+**Handled by server validation:**
+- Server processes moves sequentially
+- First valid move wins
+- Second move gets rejected if it's now invalid
+- Client rolls back rejected move
+
+---
+
+## Benefits of This Architecture
+
+1. **Reuses existing optimistic update system**
+   - No changes needed to client-side optimistic logic
+   - Already handles own vs. others' moves
+
+2. **Minimal changes required**
+   - Add `roomId` parameter (3 places)
+   - Add one `io.to()` broadcast (1 place)
+   - Wire up roomId from context (1 place)
+
+3. **Backward compatible**
+   - Non-room sessions still work (roomId is optional)
+   - Solo play unaffected
+
+4. **Scalable**
+   - Socket.io handles multiple rooms efficiently
+   - No N² broadcasting (room-based is O(N))
+
+5. **Already tested pattern**
+   - Multi-tab sync proves the broadcast pattern works
+   - Just extending to more sockets (different users)
+
+---
+
+## Security Considerations
+
+### 1. Validate Room Membership
+
+Before processing moves, verify user is in the room:
+
+```typescript
+// session-manager.ts - in applyGameMove()
+const session = await getArcadeSession(userId)
+
+if (session.roomId) {
+  // Verify user is a member of this room
+  const membership = await getRoomMember(session.roomId, userId)
+  if (!membership) {
+    return { success: false, error: 'User not in room' }
+  }
+}
+```
+
+### 2. Verify Player Ownership
+
+Ensure users can only make moves for their own players:
+
+```typescript
+// Already handled in validator
+// move.playerId must be in session.activePlayers
+// activePlayers are owned by the userId making the move
+```
+
+This is already enforced by how activePlayers are set up in the room.
+
+---
+
+## Performance Considerations
+
+### 1. Broadcasting Overhead
+
+- **Current**: 1 user × N tabs = N broadcasts per move
+- **New**: M users × N tabs each = (M×N) broadcasts per move
+- **Impact**: Linear with room size, not quadratic
+- **Acceptable**: Socket.io is optimized for this
+
+### 2. Database Queries
+
+- No change: Still 1 database write per move
+- Session is stored per-user, not per-room
+- Room data is separate (cached, not updated per move)
+
+### 3. Memory
+
+- Each socket joins 2 rooms instead of 1
+- Negligible: Socket.io uses efficient room data structures
+
+---
+
+## Testing Checklist
+
+### Unit Tests
+
+- [ ] `useArcadeSocket` accepts and passes roomId
+- [ ] `useArcadeSession` accepts and passes roomId
+- [ ] Server joins `game:${roomId}` room when roomId provided
+
+### Integration Tests
+
+- [ ] Single user, 2 tabs: both tabs sync
+- [ ] 2 users, 1 tab each: both users sync
+- [ ] 2 users, 2 tabs each: all 4 tabs sync
+- [ ] User leaves room: session deleted, others continue
+- [ ] Rapid concurrent moves: all processed correctly
+
+### Manual Tests
+
+- [ ] Open room in 2 browsers (different users)
+- [ ] Play full game to completion
+- [ ] Verify scores sync correctly
+- [ ] Verify turn changes sync correctly
+- [ ] Verify game completion syncs correctly

apps/web/pnpm-lock.yaml

@@ -0,0 +1,445 @@
+lockfileVersion: '9.0'
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
+importers:
+
+  .:
+    dependencies:
+      '@radix-ui/react-tooltip':
+        specifier: ^1.2.8
+        version: 1.2.8(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@soroban/abacus-react':
+        specifier: workspace:*
+        version: link:../../packages/abacus-react
+      '@soroban/client':
+        specifier: workspace:*
+        version: link:../../packages/core/client/typescript
+      '@soroban/core':
+        specifier: workspace:*
+        version: link:../../packages/core/client/node
+      '@soroban/templates':
+        specifier: workspace:*
+        version: link:../../packages/templates
+      react:
+        specifier: ^18.2.0
+        version: 18.3.1
+      react-dom:
+        specifier: ^18.2.0
+        version: 18.3.1(react@18.3.1)
+
+packages:
+
+  '@floating-ui/core@1.7.3':
+    resolution: {integrity: sha512-sGnvb5dmrJaKEZ+LDIpguvdX3bDlEllmv4/ClQ9awcmCZrlx5jQyyMWFM5kBI+EyNOCDDiKk8il0zeuX3Zlg/w==}
+
+  '@floating-ui/dom@1.7.4':
+    resolution: {integrity: sha512-OOchDgh4F2CchOX94cRVqhvy7b3AFb+/rQXyswmzmGakRfkMgoWVjfnLWkRirfLEfuD4ysVW16eXzwt3jHIzKA==}
+
+  '@floating-ui/react-dom@2.1.6':
+    resolution: {integrity: sha512-4JX6rEatQEvlmgU80wZyq9RT96HZJa88q8hp0pBd+LrczeDI4o6uA2M+uvxngVHo4Ihr8uibXxH6+70zhAFrVw==}
+    peerDependencies:
+      react: '>=16.8.0'
+      react-dom: '>=16.8.0'
+
+  '@floating-ui/utils@0.2.10':
+    resolution: {integrity: sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==}
+
+  '@radix-ui/primitive@1.1.3':
+    resolution: {integrity: sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==}
+
+  '@radix-ui/react-arrow@1.1.7':
+    resolution: {integrity: sha512-F+M1tLhO+mlQaOWspE8Wstg+z6PwxwRd8oQ8IXceWz92kfAmalTRf0EjrouQeo7QssEPfCn05B4Ihs1K9WQ/7w==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-compose-refs@1.1.2':
+    resolution: {integrity: sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-context@1.1.2':
+    resolution: {integrity: sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-dismissable-layer@1.1.11':
+    resolution: {integrity: sha512-Nqcp+t5cTB8BinFkZgXiMJniQH0PsUt2k51FUhbdfeKvc4ACcG2uQniY/8+h1Yv6Kza4Q7lD7PQV0z0oicE0Mg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-id@1.1.1':
+    resolution: {integrity: sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-popper@1.2.8':
+    resolution: {integrity: sha512-0NJQ4LFFUuWkE7Oxf0htBKS6zLkkjBH+hM1uk7Ng705ReR8m/uelduy1DBo0PyBXPKVnBA6YBlU94MBGXrSBCw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-portal@1.1.9':
+    resolution: {integrity: sha512-bpIxvq03if6UNwXZ+HTK71JLh4APvnXntDc6XOX8UVq4XQOVl7lwok0AvIl+b8zgCw3fSaVTZMpAPPagXbKmHQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-presence@1.1.5':
+    resolution: {integrity: sha512-/jfEwNDdQVBCNvjkGit4h6pMOzq8bHkopq458dPt2lMjx+eBQUohZNG9A7DtO/O5ukSbxuaNGXMjHicgwy6rQQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-primitive@2.1.3':
+    resolution: {integrity: sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-slot@1.2.3':
+    resolution: {integrity: sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-tooltip@1.2.8':
+    resolution: {integrity: sha512-tY7sVt1yL9ozIxvmbtN5qtmH2krXcBCfjEiCgKGLqunJHvgvZG2Pcl2oQ3kbcZARb1BGEHdkLzcYGO8ynVlieg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-use-callback-ref@1.1.1':
+    resolution: {integrity: sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-controllable-state@1.2.2':
+    resolution: {integrity: sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-effect-event@0.0.2':
+    resolution: {integrity: sha512-Qp8WbZOBe+blgpuUT+lw2xheLP8q0oatc9UpmiemEICxGvFLYmHm9QowVZGHtJlGbS6A6yJ3iViad/2cVjnOiA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-escape-keydown@1.1.1':
+    resolution: {integrity: sha512-Il0+boE7w/XebUHyBjroE+DbByORGR9KKmITzbR7MyQ4akpORYP/ZmbhAr0DG7RmmBqoOnZdy2QlvajJ2QA59g==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-layout-effect@1.1.1':
+    resolution: {integrity: sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-rect@1.1.1':
+    resolution: {integrity: sha512-QTYuDesS0VtuHNNvMh+CjlKJ4LJickCMUAqjlE3+j8w+RlRpwyX3apEQKGFzbZGdo7XNG1tXa+bQqIE7HIXT2w==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-size@1.1.1':
+    resolution: {integrity: sha512-ewrXRDTAqAXlkl6t/fkXWNAhFX9I+CkKlw6zjEwk86RSPKwZr3xpBRso655aqYafwtnbpHLj6toFzmd6xdVptQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-visually-hidden@1.2.3':
+    resolution: {integrity: sha512-pzJq12tEaaIhqjbzpCuv/OypJY/BPavOofm+dbab+MHLajy277+1lLm6JFcGgF5eskJ6mquGirhXY2GD/8u8Ug==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/rect@1.1.1':
+    resolution: {integrity: sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==}
+
+  js-tokens@4.0.0:
+    resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
+
+  loose-envify@1.4.0:
+    resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
+    hasBin: true
+
+  react-dom@18.3.1:
+    resolution: {integrity: sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==}
+    peerDependencies:
+      react: ^18.3.1
+
+  react@18.3.1:
+    resolution: {integrity: sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==}
+    engines: {node: '>=0.10.0'}
+
+  scheduler@0.23.2:
+    resolution: {integrity: sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==}
+
+snapshots:
+
+  '@floating-ui/core@1.7.3':
+    dependencies:
+      '@floating-ui/utils': 0.2.10
+
+  '@floating-ui/dom@1.7.4':
+    dependencies:
+      '@floating-ui/core': 1.7.3
+      '@floating-ui/utils': 0.2.10
+
+  '@floating-ui/react-dom@2.1.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@floating-ui/dom': 1.7.4
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+
+  '@floating-ui/utils@0.2.10': {}
+
+  '@radix-ui/primitive@1.1.3': {}
+
+  '@radix-ui/react-arrow@1.1.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+
+  '@radix-ui/react-compose-refs@1.1.2(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
+
+  '@radix-ui/react-context@1.1.2(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
+
+  '@radix-ui/react-dismissable-layer@1.1.11(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.1(react@18.3.1)
+      '@radix-ui/react-use-escape-keydown': 1.1.1(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+
+  '@radix-ui/react-id@1.1.1(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.1(react@18.3.1)
+      react: 18.3.1
+
+  '@radix-ui/react-popper@1.2.8(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@floating-ui/react-dom': 2.1.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-arrow': 1.1.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.1.2(react@18.3.1)
+      '@radix-ui/react-context': 1.1.2(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.1(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.1(react@18.3.1)
+      '@radix-ui/react-use-rect': 1.1.1(react@18.3.1)
+      '@radix-ui/react-use-size': 1.1.1(react@18.3.1)
+      '@radix-ui/rect': 1.1.1
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+
+  '@radix-ui/react-portal@1.1.9(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.1(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+
+  '@radix-ui/react-presence@1.1.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.1(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+
+  '@radix-ui/react-primitive@2.1.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-slot': 1.2.3(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+
+  '@radix-ui/react-slot@1.2.3(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(react@18.3.1)
+      react: 18.3.1
+
+  '@radix-ui/react-tooltip@1.2.8(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(react@18.3.1)
+      '@radix-ui/react-context': 1.1.2(react@18.3.1)
+      '@radix-ui/react-dismissable-layer': 1.1.11(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-id': 1.1.1(react@18.3.1)
+      '@radix-ui/react-popper': 1.2.8(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-portal': 1.1.9(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-slot': 1.2.3(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(react@18.3.1)
+      '@radix-ui/react-visually-hidden': 1.2.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+
+  '@radix-ui/react-use-callback-ref@1.1.1(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
+
+  '@radix-ui/react-use-controllable-state@1.2.2(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-use-effect-event': 0.0.2(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.1(react@18.3.1)
+      react: 18.3.1
+
+  '@radix-ui/react-use-effect-event@0.0.2(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.1(react@18.3.1)
+      react: 18.3.1
+
+  '@radix-ui/react-use-escape-keydown@1.1.1(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-use-callback-ref': 1.1.1(react@18.3.1)
+      react: 18.3.1
+
+  '@radix-ui/react-use-layout-effect@1.1.1(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
+
+  '@radix-ui/react-use-rect@1.1.1(react@18.3.1)':
+    dependencies:
+      '@radix-ui/rect': 1.1.1
+      react: 18.3.1
+
+  '@radix-ui/react-use-size@1.1.1(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.1(react@18.3.1)
+      react: 18.3.1
+
+  '@radix-ui/react-visually-hidden@1.2.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+
+  '@radix-ui/rect@1.1.1': {}
+
+  js-tokens@4.0.0: {}
+
+  loose-envify@1.4.0:
+    dependencies:
+      js-tokens: 4.0.0
+
+  react-dom@18.3.1(react@18.3.1):
+    dependencies:
+      loose-envify: 1.4.0
+      react: 18.3.1
+      scheduler: 0.23.2
+
+  react@18.3.1:
+    dependencies:
+      loose-envify: 1.4.0
+
+  scheduler@0.23.2:
+    dependencies:
+      loose-envify: 1.4.0

apps/web/socket-server.ts

@@ -42,30 +42,39 @@ export function initializeSocketServer(httpServer: HTTPServer) {
     let currentUserId: string | null = null
 
     // Join arcade session room
-    socket.on('join-arcade-session', async ({ userId }: { userId: string }) => {
-      currentUserId = userId
-      socket.join(`arcade:${userId}`)
-      console.log(`👤 User ${userId} joined arcade room`)
+    socket.on(
+      'join-arcade-session',
+      async ({ userId, roomId }: { userId: string; roomId?: string }) => {
+        currentUserId = userId
+        socket.join(`arcade:${userId}`)
+        console.log(`👤 User ${userId} joined arcade room`)
 
-      // Send current session state if exists
-      try {
-        const session = await getArcadeSession(userId)
-        if (session) {
-          socket.emit('session-state', {
-            gameState: session.gameState,
-            currentGame: session.currentGame,
-            gameUrl: session.gameUrl,
-            activePlayers: session.activePlayers,
-            version: session.version,
-          })
-        } else {
-          socket.emit('no-active-session')
+        // If this session is part of a room, also join the game room for multi-user sync
+        if (roomId) {
+          socket.join(`game:${roomId}`)
+          console.log(`🎮 User ${userId} joined game room ${roomId}`)
+        }
+
+        // Send current session state if exists
+        try {
+          const session = await getArcadeSession(userId)
+          if (session) {
+            socket.emit('session-state', {
+              gameState: session.gameState,
+              currentGame: session.currentGame,
+              gameUrl: session.gameUrl,
+              activePlayers: session.activePlayers,
+              version: session.version,
+            })
+          } else {
+            socket.emit('no-active-session')
+          }
+        } catch (error) {
+          console.error('Error fetching session:', error)
+          socket.emit('session-error', { error: 'Failed to fetch session' })
         }
-      } catch (error) {
-        console.error('Error fetching session:', error)
-        socket.emit('session-error', { error: 'Failed to fetch session' })
       }
-    })
+    )
 
     // Handle game moves
     socket.on('game-move', async (data: { userId: string; move: GameMove }) => {
@@ -168,12 +177,20 @@ export function initializeSocketServer(httpServer: HTTPServer) {
         const result = await applyGameMove(data.userId, data.move)
 
         if (result.success && result.session) {
-          // Broadcast the updated state to all devices for this user
-          io!.to(`arcade:${data.userId}`).emit('move-accepted', {
+          const moveAcceptedData = {
             gameState: result.session.gameState,
             version: result.session.version,
             move: data.move,
-          })
+          }
+
+          // Broadcast the updated state to all devices for this user
+          io!.to(`arcade:${data.userId}`).emit('move-accepted', moveAcceptedData)
+
+          // If this is a room-based session, ALSO broadcast to all users in the room
+          if (result.session.roomId) {
+            io!.to(`game:${result.session.roomId}`).emit('move-accepted', moveAcceptedData)
+            console.log(`📢 Broadcasted move to game room ${result.session.roomId}`)
+          }
 
           // Update activity timestamp
           await updateSessionActivity(data.userId)

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

@@ -12,14 +12,11 @@ import { getViewerId } from '@/lib/viewer'
 export async function GET() {
   try {
     const userId = await getViewerId()
-    console.log('[Current Room API] Fetching for user:', userId)
 
     // Get all rooms user is in (should be at most 1 due to modal room enforcement)
     const roomIds = await getUserRooms(userId)
-    console.log('[Current Room API] User rooms:', roomIds)
 
     if (roomIds.length === 0) {
-      console.log('[Current Room API] User is not in any room')
       return NextResponse.json({ room: null }, { status: 200 })
     }
 
@@ -28,7 +25,6 @@ export async function GET() {
     // Get room data
     const room = await getRoomById(roomId)
     if (!room) {
-      console.log('[Current Room API] Room not found:', roomId)
       return NextResponse.json({ error: 'Room not found' }, { status: 404 })
     }
 
@@ -44,12 +40,6 @@ export async function GET() {
       memberPlayersObj[uid] = players
     }
 
-    console.log('[Current Room API] Returning room:', {
-      roomId: room.id,
-      roomName: room.name,
-      memberCount: members.length,
-    })
-
     return NextResponse.json({
       room,
       members,

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

@@ -3,7 +3,7 @@
 import { useEffect, useState } from 'react'
 import { useParams, useRouter } from 'next/navigation'
 import { io, type Socket } from 'socket.io-client'
-import { css } from '../../../../../styled-system/css'
+import { css } from '../../../../styled-system/css'
 import { PageWithNav } from '@/components/PageWithNav'
 import { useViewerId } from '@/hooks/useViewerId'
 
@@ -154,8 +154,8 @@ export default function RoomDetailPage() {
 
   const startGame = () => {
     if (!room) return
-    // Navigate to the game with the room ID
-    router.push(`/arcade/rooms/${roomId}/${room.gameName}`)
+    // Navigate to the room game page
+    router.push('/arcade/room')
   }
 
   const joinRoom = async () => {
@@ -264,7 +264,7 @@ export default function RoomDetailPage() {
               {error || 'Room not found'}
             </p>
             <button
-              onClick={() => router.push('/arcade/rooms')}
+              onClick={() => router.push('/arcade-rooms')}
               className={css({
                 px: '6',
                 py: '3',
@@ -325,7 +325,7 @@ export default function RoomDetailPage() {
           >
             <div className={css({ mb: '4' })}>
               <button
-                onClick={() => router.push('/arcade/rooms')}
+                onClick={() => router.push('/arcade-rooms')}
                 className={css({
                   display: 'inline-flex',
                   alignItems: 'center',
@@ -621,7 +621,7 @@ export default function RoomDetailPage() {
             ) : (
               <>
                 <button
-                  onClick={() => router.push('/arcade/rooms')}
+                  onClick={() => router.push('/arcade-rooms')}
                   className={css({
                     flex: 1,
                     px: '6',

apps/web/src/app/arcade-rooms/__tests__/room-navigation.test.tsx

@@ -0,0 +1,316 @@
+import { render, screen, waitFor } from '@testing-library/react'
+import * as nextNavigation from 'next/navigation'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import * as arcadeGuard from '@/hooks/useArcadeGuard'
+import * as roomData from '@/hooks/useRoomData'
+import * as viewerId from '@/hooks/useViewerId'
+
+// Mock Next.js navigation
+vi.mock('next/navigation', () => ({
+  useRouter: vi.fn(),
+  usePathname: vi.fn(),
+  useParams: vi.fn(),
+}))
+
+// Mock hooks
+vi.mock('@/hooks/useArcadeGuard')
+vi.mock('@/hooks/useRoomData')
+vi.mock('@/hooks/useViewerId')
+vi.mock('@/hooks/useUserPlayers', () => ({
+  useUserPlayers: () => ({ data: [], isLoading: false }),
+  useCreatePlayer: () => ({ mutate: vi.fn() }),
+  useUpdatePlayer: () => ({ mutate: vi.fn() }),
+  useDeletePlayer: () => ({ mutate: vi.fn() }),
+}))
+vi.mock('@/hooks/useArcadeSocket', () => ({
+  useArcadeSocket: () => ({
+    connected: false,
+    joinSession: vi.fn(),
+    socket: null,
+    sendMove: vi.fn(),
+    exitSession: vi.fn(),
+    pingSession: vi.fn(),
+  }),
+}))
+
+// Mock styled-system
+vi.mock('../../../../styled-system/css', () => ({
+  css: () => '',
+}))
+
+// Mock components
+vi.mock('@/components/PageWithNav', () => ({
+  PageWithNav: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+}))
+
+// Import pages after mocks
+import RoomBrowserPage from '../page'
+
+describe('Room Navigation with Active Sessions', () => {
+  const mockRouter = {
+    push: vi.fn(),
+    replace: vi.fn(),
+    back: vi.fn(),
+  }
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    vi.spyOn(nextNavigation, 'useRouter').mockReturnValue(mockRouter as any)
+    vi.spyOn(nextNavigation, 'usePathname').mockReturnValue('/arcade-rooms')
+    vi.spyOn(viewerId, 'useViewerId').mockReturnValue({
+      data: 'test-user',
+      isLoading: false,
+      isPending: false,
+      error: null,
+    } as any)
+    global.fetch = vi.fn()
+  })
+
+  describe('RoomBrowserPage', () => {
+    it('should render room browser without redirecting when user has active game session', async () => {
+      // User has an active game session
+      vi.spyOn(arcadeGuard, 'useArcadeGuard').mockReturnValue({
+        hasActiveSession: true,
+        loading: false,
+        activeSession: {
+          gameUrl: '/arcade/room',
+          currentGame: 'matching',
+        },
+      })
+
+      // User is in a room
+      vi.spyOn(roomData, 'useRoomData').mockReturnValue({
+        roomData: {
+          id: 'room-1',
+          name: 'Test Room',
+          code: 'ABC123',
+          gameName: 'matching',
+          members: [],
+          memberPlayers: {},
+        },
+        isLoading: false,
+        isInRoom: true,
+        notifyRoomOfPlayerUpdate: vi.fn(),
+      })
+
+      // Mock rooms API
+      ;(global.fetch as any).mockResolvedValue({
+        ok: true,
+        json: async () => ({
+          rooms: [
+            {
+              id: 'room-1',
+              code: 'ABC123',
+              name: 'Test Room',
+              gameName: 'matching',
+              status: 'lobby',
+              createdAt: new Date(),
+              creatorName: 'Test User',
+              isLocked: false,
+            },
+          ],
+        }),
+      })
+
+      render(<RoomBrowserPage />)
+
+      // Should render the page
+      await waitFor(() => {
+        expect(screen.getByText('🎮 Multiplayer Rooms')).toBeInTheDocument()
+      })
+
+      // Should NOT redirect to /arcade/room
+      expect(mockRouter.push).not.toHaveBeenCalled()
+    })
+
+    it('should NOT redirect when PageWithNav uses arcade guard with enabled=false', async () => {
+      // Simulate PageWithNav calling useArcadeGuard with enabled=false
+      const arcadeGuardSpy = vi.spyOn(arcadeGuard, 'useArcadeGuard')
+
+      // User has an active game session
+      arcadeGuardSpy.mockReturnValue({
+        hasActiveSession: true,
+        loading: false,
+        activeSession: {
+          gameUrl: '/arcade/room',
+          currentGame: 'matching',
+        },
+      })
+
+      vi.spyOn(roomData, 'useRoomData').mockReturnValue({
+        roomData: null,
+        isLoading: false,
+        isInRoom: false,
+        notifyRoomOfPlayerUpdate: vi.fn(),
+      })
+
+      ;(global.fetch as any).mockResolvedValue({
+        ok: true,
+        json: async () => ({ rooms: [] }),
+      })
+
+      render(<RoomBrowserPage />)
+
+      await waitFor(() => {
+        expect(screen.getByText('🎮 Multiplayer Rooms')).toBeInTheDocument()
+      })
+
+      // PageWithNav should have called useArcadeGuard with enabled=false
+      // This is tested in PageWithNav's own tests, but we verify no redirect happened
+      expect(mockRouter.push).not.toHaveBeenCalled()
+    })
+
+    it('should allow navigation to room detail even with active session', async () => {
+      vi.spyOn(arcadeGuard, 'useArcadeGuard').mockReturnValue({
+        hasActiveSession: true,
+        loading: false,
+        activeSession: {
+          gameUrl: '/arcade/room',
+          currentGame: 'matching',
+        },
+      })
+
+      vi.spyOn(roomData, 'useRoomData').mockReturnValue({
+        roomData: null,
+        isLoading: false,
+        isInRoom: false,
+        notifyRoomOfPlayerUpdate: vi.fn(),
+      })
+
+      ;(global.fetch as any).mockResolvedValue({
+        ok: true,
+        json: async () => ({
+          rooms: [
+            {
+              id: 'room-1',
+              code: 'ABC123',
+              name: 'Test Room',
+              gameName: 'matching',
+              status: 'lobby',
+              createdAt: new Date(),
+              creatorName: 'Test User',
+              isLocked: false,
+              isMember: true,
+            },
+          ],
+        }),
+      })
+
+      render(<RoomBrowserPage />)
+
+      await waitFor(() => {
+        expect(screen.getByText('Test Room')).toBeInTheDocument()
+      })
+
+      // Click on the room card
+      const roomCard = screen.getByText('Test Room').parentElement
+      roomCard?.click()
+
+      // Should navigate to room detail, not to /arcade/room
+      await waitFor(() => {
+        expect(mockRouter.push).toHaveBeenCalledWith('/arcade-rooms/room-1')
+      })
+    })
+  })
+
+  describe('Room navigation edge cases', () => {
+    it('should handle rapid navigation between room pages without redirect loops', async () => {
+      vi.spyOn(arcadeGuard, 'useArcadeGuard').mockReturnValue({
+        hasActiveSession: true,
+        loading: false,
+        activeSession: {
+          gameUrl: '/arcade/room',
+          currentGame: 'matching',
+        },
+      })
+
+      vi.spyOn(roomData, 'useRoomData').mockReturnValue({
+        roomData: null,
+        isLoading: false,
+        isInRoom: false,
+        notifyRoomOfPlayerUpdate: vi.fn(),
+      })
+
+      ;(global.fetch as any).mockResolvedValue({
+        ok: true,
+        json: async () => ({ rooms: [] }),
+      })
+
+      const { rerender } = render(<RoomBrowserPage />)
+
+      await waitFor(() => {
+        expect(screen.getByText('🎮 Multiplayer Rooms')).toBeInTheDocument()
+      })
+
+      // Simulate pathname changes (navigating between room pages)
+      vi.spyOn(nextNavigation, 'usePathname').mockReturnValue('/arcade-rooms/room-1')
+      rerender(<RoomBrowserPage />)
+
+      vi.spyOn(nextNavigation, 'usePathname').mockReturnValue('/arcade-rooms')
+      rerender(<RoomBrowserPage />)
+
+      // Should never redirect to game page
+      expect(mockRouter.push).not.toHaveBeenCalledWith('/arcade/room')
+    })
+
+    it('should allow user to leave room and browse other rooms during active game', async () => {
+      // User is in a room with an active game
+      vi.spyOn(arcadeGuard, 'useArcadeGuard').mockReturnValue({
+        hasActiveSession: true,
+        loading: false,
+        activeSession: {
+          gameUrl: '/arcade/room',
+          currentGame: 'matching',
+        },
+      })
+
+      vi.spyOn(roomData, 'useRoomData').mockReturnValue({
+        roomData: {
+          id: 'room-1',
+          name: 'Current Room',
+          code: 'ABC123',
+          gameName: 'matching',
+          members: [],
+          memberPlayers: {},
+        },
+        isLoading: false,
+        isInRoom: true,
+        notifyRoomOfPlayerUpdate: vi.fn(),
+      })
+
+      ;(global.fetch as any).mockResolvedValue({
+        ok: true,
+        json: async () => ({
+          rooms: [
+            {
+              id: 'room-1',
+              name: 'Current Room',
+              code: 'ABC123',
+              gameName: 'matching',
+              status: 'playing',
+              isMember: true,
+            },
+            {
+              id: 'room-2',
+              name: 'Other Room',
+              code: 'DEF456',
+              gameName: 'memory-quiz',
+              status: 'lobby',
+              isMember: false,
+            },
+          ],
+        }),
+      })
+
+      render(<RoomBrowserPage />)
+
+      await waitFor(() => {
+        expect(screen.getByText('Current Room')).toBeInTheDocument()
+        expect(screen.getByText('Other Room')).toBeInTheDocument()
+      })
+
+      // Should be able to view both rooms without redirect
+      expect(mockRouter.push).not.toHaveBeenCalled()
+    })
+  })
+})

apps/web/src/app/arcade-rooms/page.tsx

@@ -2,7 +2,7 @@
 
 import { useEffect, useState } from 'react'
 import { useRouter } from 'next/navigation'
-import { css } from '../../../../styled-system/css'
+import { css } from '../../../styled-system/css'
 import { PageWithNav } from '@/components/PageWithNav'
 
 interface Room {
@@ -66,7 +66,7 @@ export default function RoomBrowserPage() {
       }
 
       const data = await response.json()
-      router.push(`/arcade/rooms/${data.room.id}`)
+      router.push(`/arcade-rooms/${data.room.id}`)
     } catch (err) {
       console.error('Failed to create room:', err)
       alert('Failed to create room')
@@ -103,7 +103,7 @@ export default function RoomBrowserPage() {
         // Could show a toast notification here in the future
       }
 
-      router.push(`/arcade/rooms/${roomId}`)
+      router.push(`/arcade-rooms/${roomId}`)
     } catch (err) {
       console.error('Failed to join room:', err)
       alert('Failed to join room')
@@ -219,7 +219,7 @@ export default function RoomBrowserPage() {
                     })}
                   >
                     <div
-                      onClick={() => router.push(`/arcade/rooms/${room.id}`)}
+                      onClick={() => router.push(`/arcade-rooms/${room.id}`)}
                       className={css({ flex: 1, cursor: 'pointer' })}
                     >
                       <div

apps/web/src/app/arcade/matching/context/ArcadeMemoryPairsContext.tsx

@@ -2,6 +2,7 @@
 
 import { createContext, type ReactNode, useCallback, useContext, useEffect, useMemo } from 'react'
 import { useArcadeSession } from '@/hooks/useArcadeSession'
+import { useRoomData } from '@/hooks/useRoomData'
 import { useViewerId } from '@/hooks/useViewerId'
 import type { GameMove } from '@/lib/arcade/validation'
 import { useGameMode } from '../../../../contexts/GameModeContext'
@@ -104,6 +105,7 @@ const ArcadeMemoryPairsContext = createContext<MemoryPairsContextValue | null>(n
 // Provider component
 export function ArcadeMemoryPairsProvider({ children }: { children: ReactNode }) {
   const { data: viewerId } = useViewerId()
+  const { roomData } = useRoomData()
   const { activePlayerCount, activePlayers: activePlayerIds } = useGameMode()
 
   // Get active player IDs directly as strings (UUIDs)
@@ -112,7 +114,7 @@ export function ArcadeMemoryPairsProvider({ children }: { children: ReactNode })
   // Derive game mode from active player count
   const gameMode = activePlayerCount > 1 ? 'multiplayer' : 'single'
 
-  // Arcade session integration
+  // Arcade session integration with room-wide sync
   const {
     state,
     sendMove,
@@ -120,6 +122,7 @@ export function ArcadeMemoryPairsProvider({ children }: { children: ReactNode })
     exitSession,
   } = useArcadeSession<MemoryPairsState>({
     userId: viewerId || '',
+    roomId: roomData?.id, // Enable multi-user sync for room-based games
     initialState,
     applyMove: applyMoveOptimistically,
   })
@@ -195,7 +198,7 @@ export function ArcadeMemoryPairsProvider({ children }: { children: ReactNode })
         activePlayers,
       },
     })
-  }, [state.gameType, state.difficulty, activePlayers, sendMove])
+  }, [state.gameType, state.difficulty, activePlayers, sendMove, roomData])
 
   const flipCard = useCallback(
     (cardId: string) => {

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

@@ -1,8 +1,5 @@
 'use client'
 
-import { useRouter } from 'next/navigation'
-import { useEffect } from 'react'
-import { ArcadeGuardedPage } from '@/components/ArcadeGuardedPage'
 import { useRoomData } from '@/hooks/useRoomData'
 import { MemoryPairsGame } from '../matching/components/MemoryPairsGame'
 import { ArcadeMemoryPairsProvider } from '../matching/context/ArcadeMemoryPairsContext'
@@ -10,24 +7,14 @@ import { ArcadeMemoryPairsProvider } from '../matching/context/ArcadeMemoryPairs
 /**
  * /arcade/room - Renders the game for the user's current room
  * Since users can only be in one room at a time, this is a simple singular route
+ *
+ * Note: We don't redirect to /arcade if no room exists because:
+ * - It would conflict with arcade session redirects and create loops
+ * - useArcadeRedirect on /arcade page handles redirecting to active sessions
  */
 export default function RoomPage() {
-  const router = useRouter()
   const { roomData, isLoading } = useRoomData()
 
-  // Debug logging
-  useEffect(() => {
-    console.log('[RoomPage] State:', { isLoading, hasRoomData: !!roomData, roomData })
-  }, [isLoading, roomData])
-
-  // Redirect to arcade if no room
-  useEffect(() => {
-    if (!isLoading && !roomData) {
-      console.log('[RoomPage] No active room, redirecting to /arcade')
-      router.push('/arcade')
-    }
-  }, [isLoading, roomData, router])
-
   // Show loading state
   if (isLoading) {
     return (
@@ -46,20 +33,44 @@ export default function RoomPage() {
     )
   }
 
-  // Show nothing while redirecting
+  // Show error if no room (instead of redirecting)
   if (!roomData) {
-    return null
+    return (
+      <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={{
+            color: '#3b82f6',
+            textDecoration: 'underline',
+          }}
+        >
+          Go to Champion Arena
+        </a>
+      </div>
+    )
   }
 
   // Render the appropriate game based on room's gameName
+  // Note: We don't use ArcadeGuardedPage here because room-based games
+  // have their own navigation logic via useRoomData
   switch (roomData.gameName) {
     case 'matching':
       return (
-        <ArcadeGuardedPage>
-          <ArcadeMemoryPairsProvider>
-            <MemoryPairsGame />
-          </ArcadeMemoryPairsProvider>
-        </ArcadeGuardedPage>
+        <ArcadeMemoryPairsProvider>
+          <MemoryPairsGame />
+        </ArcadeMemoryPairsProvider>
       )
 
     // TODO: Add other games (complement-race, memory-quiz, etc.)

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

@@ -1,24 +0,0 @@
-'use client'
-
-import { useParams } from 'next/navigation'
-import { PageWithNav } from '@/components/PageWithNav'
-import { ComplementRaceGame } from '@/app/arcade/complement-race/components/ComplementRaceGame'
-import { ComplementRaceProvider } from '@/app/arcade/complement-race/context/ComplementRaceContext'
-
-export default function RoomComplementRacePage() {
-  const params = useParams()
-  const roomId = params.roomId as string
-
-  // TODO Phase 4: Integrate room context with game state
-  // - Connect to room socket events
-  // - Sync game state across players
-  // - Handle multiplayer race dynamics
-
-  return (
-    <PageWithNav navTitle="Speed Complement Race" navEmoji="🏁">
-      <ComplementRaceProvider>
-        <ComplementRaceGame />
-      </ComplementRaceProvider>
-    </PageWithNav>
-  )
-}

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

@@ -1,24 +0,0 @@
-'use client'
-
-import { useParams } from 'next/navigation'
-import { ArcadeGuardedPage } from '@/components/ArcadeGuardedPage'
-import { MemoryPairsGame } from '@/app/arcade/matching/components/MemoryPairsGame'
-import { ArcadeMemoryPairsProvider } from '@/app/arcade/matching/context/ArcadeMemoryPairsContext'
-
-export default function RoomMatchingPage() {
-  const params = useParams()
-  const roomId = params.roomId as string
-
-  // TODO Phase 4: Integrate room context with game state
-  // - Connect to room socket events
-  // - Sync game state across players
-  // - Handle multiplayer moves
-
-  return (
-    <ArcadeGuardedPage>
-      <ArcadeMemoryPairsProvider>
-        <MemoryPairsGame />
-      </ArcadeMemoryPairsProvider>
-    </ArcadeGuardedPage>
-  )
-}

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

@@ -1,16 +0,0 @@
-'use client'
-
-import { useParams } from 'next/navigation'
-
-// Temporarily redirect to solo arcade version
-// TODO Phase 4: Implement room-aware memory quiz with multiplayer sync
-export default function RoomMemoryQuizPage() {
-  const params = useParams()
-  const roomId = params.roomId as string
-
-  // Import and use the arcade version for now
-  // This prevents 404s while we work on full multiplayer integration
-  const MemoryQuizGame = require('@/app/arcade/memory-quiz/page').default
-
-  return <MemoryQuizGame />
-}

apps/web/src/components/PageWithNav.tsx

@@ -58,14 +58,14 @@ export function PageWithNav({
   }
 
   // Get active and inactive players as arrays
+  // Only show LOCAL players in the active/inactive lists (remote players shown separately in networkPlayers)
   const activePlayerList = Array.from(activePlayers)
     .map((id) => players.get(id))
-    .filter((p) => p !== undefined)
-    .map((p) => ({ id: p.id, name: p.name, emoji: p.emoji }))
+    .filter((p): p is NonNullable<typeof p> => p !== undefined && p.isLocal !== false) // Filter out remote players
 
-  const inactivePlayerList = Array.from(players.values())
-    .filter((p) => !activePlayers.has(p.id))
-    .map((p) => ({ id: p.id, name: p.name, emoji: p.emoji }))
+  const inactivePlayerList = Array.from(players.values()).filter(
+    (p) => !activePlayers.has(p.id) && p.isLocal !== false
+  ) // Filter out remote players
 
   // Compute game mode from active player count
   const gameMode =
@@ -98,7 +98,13 @@ export function PageWithNav({
         : undefined
 
   // Compute network players (other players in the room, excluding current user)
-  const networkPlayers: Array<{ id: string; emoji?: string; name?: string }> =
+  const networkPlayers: Array<{
+    id: string
+    emoji?: string
+    name?: string
+    color?: string
+    memberName?: string
+  }> =
     isInRoom && roomData
       ? roomData.members
           .filter((member) => member.userId !== viewerId)
@@ -107,7 +113,9 @@ export function PageWithNav({
             return memberPlayerList.map((player) => ({
               id: player.id,
               emoji: player.emoji,
-              name: `${player.name} (${member.displayName})`,
+              name: player.name,
+              color: player.color,
+              memberName: member.displayName,
             }))
           })
       : []

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

@@ -1,9 +1,13 @@
 import React from 'react'
+import { PlayerTooltip } from './PlayerTooltip'
 
 interface Player {
   id: string
   name: string
   emoji: string
+  color?: string
+  createdAt?: Date | number
+  isLocal?: boolean
 }
 
 interface ActivePlayersListProps {
@@ -24,105 +28,111 @@ export function ActivePlayersList({
   return (
     <>
       {activePlayers.map((player) => (
-        <div
+        <PlayerTooltip
           key={player.id}
-          style={{
-            position: 'relative',
-            fontSize: shouldEmphasize ? '48px' : '20px',
-            lineHeight: 1,
-            transition: 'font-size 0.4s cubic-bezier(0.4, 0, 0.2, 1), filter 0.4s ease',
-            filter: shouldEmphasize ? 'drop-shadow(0 4px 8px rgba(0,0,0,0.25))' : 'none',
-            cursor: shouldEmphasize ? 'pointer' : 'default',
-          }}
-          title={player.name}
-          onClick={() => shouldEmphasize && onConfigurePlayer(player.id)}
-          onMouseEnter={() => shouldEmphasize && setHoveredPlayerId(player.id)}
-          onMouseLeave={() => shouldEmphasize && setHoveredPlayerId(null)}
+          playerName={player.name}
+          playerColor={player.color}
+          isLocal={player.isLocal !== false}
+          createdAt={player.createdAt}
         >
-          {player.emoji}
-          {shouldEmphasize && hoveredPlayerId === player.id && (
-            <>
-              {/* Configure button - bottom left */}
-              <button
-                onClick={(e) => {
-                  e.stopPropagation()
-                  onConfigurePlayer(player.id)
-                }}
-                style={{
-                  position: 'absolute',
-                  bottom: '-4px',
-                  left: '-4px',
-                  width: '18px',
-                  height: '18px',
-                  borderRadius: '50%',
-                  border: '2px solid white',
-                  background: '#6b7280',
-                  color: 'white',
-                  fontSize: '10px',
-                  display: 'flex',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                  cursor: 'pointer',
-                  boxShadow: '0 2px 8px rgba(0,0,0,0.3)',
-                  transition: 'all 0.2s ease',
-                  padding: 0,
-                  lineHeight: 1,
-                }}
-                onMouseEnter={(e) => {
-                  e.currentTarget.style.background = '#3b82f6'
-                  e.currentTarget.style.transform = 'scale(1.15)'
-                }}
-                onMouseLeave={(e) => {
-                  e.currentTarget.style.background = '#6b7280'
-                  e.currentTarget.style.transform = 'scale(1)'
-                }}
-                aria-label={`Configure ${player.name}`}
-              >
-                ⚙
-              </button>
+          <div
+            style={{
+              position: 'relative',
+              fontSize: shouldEmphasize ? '48px' : '20px',
+              lineHeight: 1,
+              transition: 'font-size 0.4s cubic-bezier(0.4, 0, 0.2, 1), filter 0.4s ease',
+              filter: shouldEmphasize ? 'drop-shadow(0 4px 8px rgba(0,0,0,0.25))' : 'none',
+              cursor: shouldEmphasize ? 'pointer' : 'default',
+            }}
+            onClick={() => shouldEmphasize && onConfigurePlayer(player.id)}
+            onMouseEnter={() => shouldEmphasize && setHoveredPlayerId(player.id)}
+            onMouseLeave={() => shouldEmphasize && setHoveredPlayerId(null)}
+          >
+            {player.emoji}
+            {shouldEmphasize && hoveredPlayerId === player.id && (
+              <>
+                {/* Configure button - bottom left */}
+                <button
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    onConfigurePlayer(player.id)
+                  }}
+                  style={{
+                    position: 'absolute',
+                    bottom: '-4px',
+                    left: '-4px',
+                    width: '18px',
+                    height: '18px',
+                    borderRadius: '50%',
+                    border: '2px solid white',
+                    background: '#6b7280',
+                    color: 'white',
+                    fontSize: '10px',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    cursor: 'pointer',
+                    boxShadow: '0 2px 8px rgba(0,0,0,0.3)',
+                    transition: 'all 0.2s ease',
+                    padding: 0,
+                    lineHeight: 1,
+                  }}
+                  onMouseEnter={(e) => {
+                    e.currentTarget.style.background = '#3b82f6'
+                    e.currentTarget.style.transform = 'scale(1.15)'
+                  }}
+                  onMouseLeave={(e) => {
+                    e.currentTarget.style.background = '#6b7280'
+                    e.currentTarget.style.transform = 'scale(1)'
+                  }}
+                  aria-label={`Configure ${player.name}`}
+                >
+                  ⚙
+                </button>
 
-              {/* Remove button - top right */}
-              <button
-                onClick={(e) => {
-                  e.stopPropagation()
-                  onRemovePlayer(player.id)
-                }}
-                style={{
-                  position: 'absolute',
-                  top: '-4px',
-                  right: '-4px',
-                  width: '20px',
-                  height: '20px',
-                  borderRadius: '50%',
-                  border: '2px solid white',
-                  background: '#ef4444',
-                  color: 'white',
-                  fontSize: '12px',
-                  fontWeight: 'bold',
-                  display: 'flex',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                  cursor: 'pointer',
-                  boxShadow: '0 2px 8px rgba(0,0,0,0.3)',
-                  transition: 'all 0.2s ease',
-                  padding: 0,
-                  lineHeight: 1,
-                }}
-                onMouseEnter={(e) => {
-                  e.currentTarget.style.background = '#dc2626'
-                  e.currentTarget.style.transform = 'scale(1.1)'
-                }}
-                onMouseLeave={(e) => {
-                  e.currentTarget.style.background = '#ef4444'
-                  e.currentTarget.style.transform = 'scale(1)'
-                }}
-                aria-label={`Remove ${player.name}`}
-              >
-                ×
-              </button>
-            </>
-          )}
-        </div>
+                {/* Remove button - top right */}
+                <button
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    onRemovePlayer(player.id)
+                  }}
+                  style={{
+                    position: 'absolute',
+                    top: '-4px',
+                    right: '-4px',
+                    width: '20px',
+                    height: '20px',
+                    borderRadius: '50%',
+                    border: '2px solid white',
+                    background: '#ef4444',
+                    color: 'white',
+                    fontSize: '12px',
+                    fontWeight: 'bold',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    cursor: 'pointer',
+                    boxShadow: '0 2px 8px rgba(0,0,0,0.3)',
+                    transition: 'all 0.2s ease',
+                    padding: 0,
+                    lineHeight: 1,
+                  }}
+                  onMouseEnter={(e) => {
+                    e.currentTarget.style.background = '#dc2626'
+                    e.currentTarget.style.transform = 'scale(1.1)'
+                  }}
+                  onMouseLeave={(e) => {
+                    e.currentTarget.style.background = '#ef4444'
+                    e.currentTarget.style.transform = 'scale(1)'
+                  }}
+                  aria-label={`Remove ${player.name}`}
+                >
+                  ×
+                </button>
+              </>
+            )}
+          </div>
+        </PlayerTooltip>
       ))}
     </>
   )

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

@@ -1,9 +1,12 @@
 import React from 'react'
+import { PlayerTooltip } from './PlayerTooltip'
 
 interface NetworkPlayer {
   id: string
   emoji?: string
   name?: string
+  color?: string
+  memberName?: string
 }
 
 interface NetworkPlayerIndicatorProps {
@@ -17,92 +20,97 @@ interface NetworkPlayerIndicatorProps {
  */
 export function NetworkPlayerIndicator({ player, shouldEmphasize }: NetworkPlayerIndicatorProps) {
   const [isHovered, setIsHovered] = React.useState(false)
+  const playerName = player.name || `Network Player ${player.id.slice(0, 8)}`
+  const extraInfo = player.memberName ? `Controlled by ${player.memberName}` : undefined
 
   return (
-    <div
-      style={{
-        position: 'relative',
-        fontSize: shouldEmphasize ? '48px' : '20px',
-        lineHeight: 1,
-        transition: 'all 0.4s cubic-bezier(0.4, 0, 0.2, 1)',
-        cursor: 'default',
-      }}
-      title={player.name || `Network Player ${player.id.slice(0, 8)}`}
-      onMouseEnter={() => setIsHovered(true)}
-      onMouseLeave={() => setIsHovered(false)}
+    <PlayerTooltip
+      playerName={playerName}
+      playerColor={player.color}
+      isLocal={false}
+      extraInfo={extraInfo}
     >
-      {/* Network frame border */}
       <div
         style={{
-          position: 'absolute',
-          inset: '-6px',
-          borderRadius: '8px',
-          background: `
+          position: 'relative',
+          fontSize: shouldEmphasize ? '48px' : '20px',
+          lineHeight: 1,
+          transition: 'all 0.4s cubic-bezier(0.4, 0, 0.2, 1)',
+          cursor: 'default',
+        }}
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
+      >
+        {/* Network frame border */}
+        <div
+          style={{
+            position: 'absolute',
+            inset: '-6px',
+            borderRadius: '8px',
+            background: `
             linear-gradient(135deg,
               rgba(59, 130, 246, 0.4),
               rgba(147, 51, 234, 0.4),
               rgba(236, 72, 153, 0.4))
           `,
-          opacity: isHovered ? 1 : 0.7,
-          transition: 'opacity 0.2s ease',
-          zIndex: -1,
-        }}
-      />
+            opacity: isHovered ? 1 : 0.7,
+            transition: 'opacity 0.2s ease',
+            zIndex: -1,
+          }}
+        />
 
-      {/* Animated network signal indicator */}
-      <div
-        style={{
-          position: 'absolute',
-          top: '-8px',
-          right: '-8px',
-          width: '12px',
-          height: '12px',
-          borderRadius: '50%',
-          background: 'rgba(34, 197, 94, 0.9)',
-          boxShadow: '0 0 8px rgba(34, 197, 94, 0.6)',
-          animation: 'networkPulse 2s ease-in-out infinite',
-          zIndex: 1,
-        }}
-        title="Connected"
-      />
+        {/* Animated network signal indicator */}
+        <div
+          style={{
+            position: 'absolute',
+            top: '-8px',
+            right: '-8px',
+            width: '12px',
+            height: '12px',
+            borderRadius: '50%',
+            background: 'rgba(34, 197, 94, 0.9)',
+            boxShadow: '0 0 8px rgba(34, 197, 94, 0.6)',
+            animation: 'networkPulse 2s ease-in-out infinite',
+            zIndex: 1,
+          }}
+        />
 
-      {/* Player emoji or fallback */}
-      <div
-        style={{
-          position: 'relative',
-          filter: shouldEmphasize ? 'drop-shadow(0 4px 8px rgba(0,0,0,0.25))' : 'none',
-        }}
-      >
-        {player.emoji || '🌐'}
-      </div>
+        {/* Player emoji or fallback */}
+        <div
+          style={{
+            position: 'relative',
+            filter: shouldEmphasize ? 'drop-shadow(0 4px 8px rgba(0,0,0,0.25))' : 'none',
+          }}
+        >
+          {player.emoji || '🌐'}
+        </div>
 
-      {/* Network icon badge */}
-      <div
-        style={{
-          position: 'absolute',
-          bottom: '-4px',
-          left: '-4px',
-          width: '16px',
-          height: '16px',
-          borderRadius: '50%',
-          border: '2px solid white',
-          background: 'linear-gradient(135deg, #3b82f6, #8b5cf6)',
-          color: 'white',
-          fontSize: '8px',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          boxShadow: '0 2px 6px rgba(0,0,0,0.3)',
-          zIndex: 1,
-        }}
-        title="Network Player"
-      >
-        📡
-      </div>
+        {/* Network icon badge */}
+        <div
+          style={{
+            position: 'absolute',
+            bottom: '-4px',
+            left: '-4px',
+            width: '16px',
+            height: '16px',
+            borderRadius: '50%',
+            border: '2px solid white',
+            background: 'linear-gradient(135deg, #3b82f6, #8b5cf6)',
+            color: 'white',
+            fontSize: '8px',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            boxShadow: '0 2px 6px rgba(0,0,0,0.3)',
+            zIndex: 1,
+          }}
+        >
+          📡
+        </div>
 
-      <style
-        dangerouslySetInnerHTML={{
-          __html: `
+        <style
+          dangerouslySetInnerHTML={{
+            __html: `
             @keyframes networkPulse {
               0%, 100% {
                 opacity: 1;
@@ -114,8 +122,9 @@ export function NetworkPlayerIndicator({ player, shouldEmphasize }: NetworkPlaye
               }
             }
           `,
-        }}
-      />
-    </div>
+          }}
+        />
+      </div>
+    </PlayerTooltip>
   )
 }

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

@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { EmojiPicker } from '../../app/games/matching/components/EmojiPicker'
 import { useGameMode } from '../../contexts/GameModeContext'
 
@@ -11,17 +11,36 @@ export function PlayerConfigDialog({ playerId, onClose }: PlayerConfigDialogProp
   // All hooks must be called before early return
   const { getPlayer, updatePlayer, players } = useGameMode()
   const [showEmojiPicker, setShowEmojiPicker] = useState(false)
+  const [localName, setLocalName] = useState('')
+  const [isSaving, setIsSaving] = useState(false)
+  const debounceTimerRef = useRef<NodeJS.Timeout | null>(null)
 
   const player = getPlayer(playerId)
-  const [tempName, setTempName] = useState(player?.name || '')
+
+  // Initialize local name from player
+  useEffect(() => {
+    if (player) {
+      setLocalName(player.name)
+    }
+  }, [player])
 
   if (!player) {
     return null
   }
 
-  const handleSave = () => {
-    updatePlayer(playerId, { name: tempName })
-    onClose()
+  const handleNameChange = (newName: string) => {
+    setLocalName(newName)
+
+    // Debounce the update to avoid too many API calls
+    if (debounceTimerRef.current) {
+      clearTimeout(debounceTimerRef.current)
+    }
+
+    setIsSaving(true)
+    debounceTimerRef.current = setTimeout(() => {
+      updatePlayer(playerId, { name: newName })
+      setIsSaving(false)
+    }, 500) // Wait 500ms after user stops typing
   }
 
   const handleEmojiSelect = (emoji: string) => {
@@ -30,7 +49,21 @@ export function PlayerConfigDialog({ playerId, onClose }: PlayerConfigDialogProp
   }
 
   // Get player number for UI theming (first 4 players get special colors)
-  const allPlayers = Array.from(players.values()).sort((a, b) => a.createdAt - b.createdAt)
+  const allPlayers = Array.from(players.values()).sort((a, b) => {
+    const aTime =
+      typeof a.createdAt === 'number'
+        ? a.createdAt
+        : a.createdAt instanceof Date
+          ? a.createdAt.getTime()
+          : 0
+    const bTime =
+      typeof b.createdAt === 'number'
+        ? b.createdAt
+        : b.createdAt instanceof Date
+          ? b.createdAt.getTime()
+          : 0
+    return aTime - bTime
+  })
   const playerIndex = allPlayers.findIndex((p) => p.id === playerId)
   const displayNumber = playerIndex + 1
 
@@ -81,22 +114,35 @@ export function PlayerConfigDialog({ playerId, onClose }: PlayerConfigDialogProp
           style={{
             display: 'flex',
             justifyContent: 'space-between',
-            alignItems: 'center',
+            alignItems: 'flex-start',
             marginBottom: '24px',
           }}
         >
-          <h2
-            style={{
-              fontSize: '24px',
-              fontWeight: 'bold',
-              background: `linear-gradient(135deg, ${gradientColor}, ${gradientColor}dd)`,
-              backgroundClip: 'text',
-              color: 'transparent',
-              margin: 0,
-            }}
-          >
-            Configure Player
-          </h2>
+          <div>
+            <h2
+              style={{
+                fontSize: '24px',
+                fontWeight: 'bold',
+                background: `linear-gradient(135deg, ${gradientColor}, ${gradientColor}dd)`,
+                backgroundClip: 'text',
+                color: 'transparent',
+                margin: 0,
+                marginBottom: '4px',
+              }}
+            >
+              Player Settings
+            </h2>
+            <div
+              style={{
+                fontSize: '12px',
+                color: isSaving ? '#f59e0b' : '#10b981',
+                fontWeight: '500',
+                opacity: 0.8,
+              }}
+            >
+              {isSaving ? '💾 Saving...' : '✓ Changes saved automatically'}
+            </div>
+          </div>
           <button
             onClick={onClose}
             style={{
@@ -198,7 +244,7 @@ export function PlayerConfigDialog({ playerId, onClose }: PlayerConfigDialogProp
         </div>
 
         {/* Name Input */}
-        <div style={{ marginBottom: '24px' }}>
+        <div>
           <label
             style={{
               display: 'block',
@@ -212,8 +258,8 @@ export function PlayerConfigDialog({ playerId, onClose }: PlayerConfigDialogProp
           </label>
           <input
             type="text"
-            value={tempName}
-            onChange={(e) => setTempName(e.target.value)}
+            value={localName}
+            onChange={(e) => handleNameChange(e.target.value)}
             placeholder="Player Name"
             maxLength={20}
             style={{
@@ -243,69 +289,9 @@ export function PlayerConfigDialog({ playerId, onClose }: PlayerConfigDialogProp
               textAlign: 'right',
             }}
           >
-            {tempName.length}/20 characters
+            {localName.length}/20 characters
           </div>
         </div>
-
-        {/* Action Buttons */}
-        <div
-          style={{
-            display: 'flex',
-            gap: '12px',
-          }}
-        >
-          <button
-            onClick={onClose}
-            style={{
-              flex: 1,
-              padding: '12px',
-              background: 'white',
-              border: '2px solid #e5e7eb',
-              borderRadius: '12px',
-              fontSize: '14px',
-              fontWeight: '600',
-              color: '#6b7280',
-              cursor: 'pointer',
-              transition: 'all 0.2s ease',
-            }}
-            onMouseEnter={(e) => {
-              e.currentTarget.style.background = '#f9fafb'
-              e.currentTarget.style.borderColor = '#d1d5db'
-            }}
-            onMouseLeave={(e) => {
-              e.currentTarget.style.background = 'white'
-              e.currentTarget.style.borderColor = '#e5e7eb'
-            }}
-          >
-            Cancel
-          </button>
-          <button
-            onClick={handleSave}
-            style={{
-              flex: 1,
-              padding: '12px',
-              background: `linear-gradient(135deg, ${gradientColor}, ${gradientColor}dd)`,
-              border: 'none',
-              borderRadius: '12px',
-              fontSize: '14px',
-              fontWeight: '600',
-              color: 'white',
-              cursor: 'pointer',
-              transition: 'all 0.2s ease',
-              boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
-            }}
-            onMouseEnter={(e) => {
-              e.currentTarget.style.transform = 'translateY(-2px)'
-              e.currentTarget.style.boxShadow = '0 6px 16px rgba(0,0,0,0.2)'
-            }}
-            onMouseLeave={(e) => {
-              e.currentTarget.style.transform = 'translateY(0)'
-              e.currentTarget.style.boxShadow = '0 4px 12px rgba(0,0,0,0.15)'
-            }}
-          >
-            Save Changes
-          </button>
-        </div>
       </div>
     </div>
   )

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

@@ -0,0 +1,164 @@
+import * as Tooltip from '@radix-ui/react-tooltip'
+import type React from 'react'
+
+interface PlayerTooltipProps {
+  children: React.ReactNode
+  playerName: string
+  playerColor?: string
+  isLocal?: boolean
+  createdAt?: Date | number
+  extraInfo?: string
+}
+
+/**
+ * Radix-based tooltip for displaying rich player information
+ * Shows player name, type (local/network), color, and other details
+ */
+export function PlayerTooltip({
+  children,
+  playerName,
+  playerColor,
+  isLocal = true,
+  createdAt,
+  extraInfo,
+}: PlayerTooltipProps) {
+  // Format creation time
+  const getCreatedTimeAgo = () => {
+    if (!createdAt) return null
+
+    const now = Date.now()
+    const created =
+      typeof createdAt === 'number'
+        ? createdAt
+        : createdAt instanceof Date
+          ? createdAt.getTime()
+          : 0
+    const diff = now - created
+
+    const minutes = Math.floor(diff / 60000)
+    const hours = Math.floor(diff / 3600000)
+    const days = Math.floor(diff / 86400000)
+
+    if (days > 0) return `${days}d ago`
+    if (hours > 0) return `${hours}h ago`
+    if (minutes > 0) return `${minutes}m ago`
+    return 'just now'
+  }
+
+  return (
+    <Tooltip.Provider delayDuration={200}>
+      <Tooltip.Root>
+        <Tooltip.Trigger asChild>{children}</Tooltip.Trigger>
+        <Tooltip.Portal>
+          <Tooltip.Content
+            side="bottom"
+            sideOffset={8}
+            style={{
+              background: 'linear-gradient(135deg, rgba(17, 24, 39, 0.97), rgba(31, 41, 55, 0.97))',
+              backdropFilter: 'blur(8px)',
+              borderRadius: '12px',
+              padding: '12px 16px',
+              boxShadow: '0 8px 24px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1)',
+              maxWidth: '280px',
+              zIndex: 9999,
+              animation: 'tooltipFadeIn 0.2s ease-out',
+            }}
+          >
+            {/* Player name with color accent */}
+            <div
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: '8px',
+                marginBottom: '8px',
+              }}
+            >
+              {playerColor && (
+                <div
+                  style={{
+                    width: '12px',
+                    height: '12px',
+                    borderRadius: '50%',
+                    background: playerColor,
+                    boxShadow: `0 0 8px ${playerColor}50`,
+                    flexShrink: 0,
+                  }}
+                />
+              )}
+              <div
+                style={{
+                  fontSize: '15px',
+                  fontWeight: '600',
+                  color: 'white',
+                  lineHeight: 1.3,
+                }}
+              >
+                {playerName}
+              </div>
+            </div>
+
+            {/* Player type badge */}
+            <div
+              style={{
+                display: 'inline-flex',
+                alignItems: 'center',
+                gap: '4px',
+                padding: '4px 8px',
+                borderRadius: '6px',
+                background: isLocal
+                  ? 'rgba(16, 185, 129, 0.15)'
+                  : 'linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(147, 51, 234, 0.15))',
+                border: `1px solid ${isLocal ? 'rgba(16, 185, 129, 0.3)' : 'rgba(147, 51, 234, 0.3)'}`,
+                fontSize: '11px',
+                fontWeight: '600',
+                color: isLocal ? 'rgba(167, 243, 208, 1)' : 'rgba(196, 181, 253, 1)',
+                marginBottom: extraInfo || createdAt ? '8px' : 0,
+              }}
+            >
+              <span style={{ fontSize: '10px' }}>{isLocal ? '●' : '📡'}</span>
+              {isLocal ? 'Your Player' : 'Network Player'}
+            </div>
+
+            {/* Additional info */}
+            {(extraInfo || createdAt) && (
+              <div
+                style={{
+                  fontSize: '12px',
+                  color: 'rgba(209, 213, 219, 0.9)',
+                  lineHeight: 1.4,
+                  marginTop: '4px',
+                }}
+              >
+                {extraInfo && <div>{extraInfo}</div>}
+                {createdAt && <div style={{ opacity: 0.7 }}>Joined {getCreatedTimeAgo()}</div>}
+              </div>
+            )}
+
+            <Tooltip.Arrow
+              style={{
+                fill: 'rgba(17, 24, 39, 0.97)',
+              }}
+            />
+          </Tooltip.Content>
+        </Tooltip.Portal>
+      </Tooltip.Root>
+
+      <style
+        dangerouslySetInnerHTML={{
+          __html: `
+            @keyframes tooltipFadeIn {
+              from {
+                opacity: 0;
+                transform: translateY(-4px);
+              }
+              to {
+                opacity: 1;
+                transform: translateY(0);
+              }
+            }
+          `,
+        }}
+      />
+    </Tooltip.Provider>
+  )
+}

apps/web/src/contexts/GameModeContext.tsx

@@ -68,7 +68,7 @@ export function GameModeProvider({ children }: { children: ReactNode }) {
   const { mutate: createPlayer } = useCreatePlayer()
   const { mutate: updatePlayerMutation } = useUpdatePlayer()
   const { mutate: deletePlayer } = useDeletePlayer()
-  const { roomData } = useRoomData()
+  const { roomData, notifyRoomOfPlayerUpdate } = useRoomData()
   const { data: viewerId } = useViewerId()
 
   const [isInitialized, setIsInitialized] = useState(false)
@@ -167,14 +167,27 @@ export function GameModeProvider({ children }: { children: ReactNode }) {
       isActive: playerData?.isActive ?? false,
     }
 
-    createPlayer(newPlayer)
+    createPlayer(newPlayer, {
+      onSuccess: () => {
+        // Notify room members if in a room
+        notifyRoomOfPlayerUpdate()
+      },
+    })
   }
 
   const updatePlayer = (id: string, updates: Partial<Player>) => {
     const player = players.get(id)
     // Only allow updating local players
     if (player?.isLocal) {
-      updatePlayerMutation({ id, updates })
+      updatePlayerMutation(
+        { id, updates },
+        {
+          onSuccess: () => {
+            // Notify room members if in a room
+            notifyRoomOfPlayerUpdate()
+          },
+        }
+      )
     } else {
       console.warn('[GameModeContext] Cannot update remote player:', id)
     }
@@ -184,7 +197,12 @@ export function GameModeProvider({ children }: { children: ReactNode }) {
     const player = players.get(id)
     // Only allow removing local players
     if (player?.isLocal) {
-      deletePlayer(id)
+      deletePlayer(id, {
+        onSuccess: () => {
+          // Notify room members if in a room
+          notifyRoomOfPlayerUpdate()
+        },
+      })
     } else {
       console.warn('[GameModeContext] Cannot remove remote player:', id)
     }
@@ -194,7 +212,15 @@ export function GameModeProvider({ children }: { children: ReactNode }) {
     const player = players.get(id)
     // Only allow changing active status of local players
     if (player?.isLocal) {
-      updatePlayerMutation({ id, updates: { isActive: active } })
+      updatePlayerMutation(
+        { id, updates: { isActive: active } },
+        {
+          onSuccess: () => {
+            // Notify room members if in a room
+            notifyRoomOfPlayerUpdate()
+          },
+        }
+      )
     } else {
       console.warn('[GameModeContext] Cannot change active status of remote player:', id)
     }
@@ -227,6 +253,11 @@ export function GameModeProvider({ children }: { children: ReactNode }) {
         isActive: index === 0,
       })
     })
+
+    // Notify room members after reset (slight delay to ensure mutations complete)
+    setTimeout(() => {
+      notifyRoomOfPlayerUpdate()
+    }, 100)
   }
 
   const activePlayerCount = activePlayers.size

apps/web/src/hooks/__tests__/useArcadeGuard.test.ts

@@ -65,9 +65,11 @@ describe('useArcadeGuard', () => {
 
   it('should fetch active session on mount', async () => {
     const mockSession = {
-      gameUrl: '/arcade/matching',
-      currentGame: 'matching',
-      gameState: {},
+      session: {
+        gameUrl: '/arcade/matching',
+        currentGame: 'matching',
+        gameState: {},
+      },
     }
 
     ;(global.fetch as any).mockResolvedValue({
@@ -91,9 +93,11 @@ describe('useArcadeGuard', () => {
 
   it('should redirect to active session if on different page', async () => {
     const mockSession = {
-      gameUrl: '/arcade/memory-quiz',
-      currentGame: 'memory-quiz',
-      gameState: {},
+      session: {
+        gameUrl: '/arcade/memory-quiz',
+        currentGame: 'memory-quiz',
+        gameState: {},
+      },
     }
 
     ;(global.fetch as any).mockResolvedValue({
@@ -112,9 +116,11 @@ describe('useArcadeGuard', () => {
 
   it('should NOT redirect if already on active session page', async () => {
     const mockSession = {
-      gameUrl: '/arcade/matching',
-      currentGame: 'matching',
-      gameState: {},
+      session: {
+        gameUrl: '/arcade/matching',
+        currentGame: 'matching',
+        gameState: {},
+      },
     }
 
     ;(global.fetch as any).mockResolvedValue({
@@ -152,9 +158,11 @@ describe('useArcadeGuard', () => {
   it('should call onRedirect callback when redirecting', async () => {
     const onRedirect = vi.fn()
     const mockSession = {
-      gameUrl: '/arcade/memory-quiz',
-      currentGame: 'memory-quiz',
-      gameState: {},
+      session: {
+        gameUrl: '/arcade/memory-quiz',
+        currentGame: 'memory-quiz',
+        gameState: {},
+      },
     }
 
     ;(global.fetch as any).mockResolvedValue({
@@ -248,9 +256,11 @@ describe('useArcadeGuard', () => {
     })
 
     const mockSession = {
-      gameUrl: '/arcade/matching',
-      currentGame: 'matching',
-      gameState: {},
+      session: {
+        gameUrl: '/arcade/matching',
+        currentGame: 'matching',
+        gameState: {},
+      },
     }
 
     ;(global.fetch as any).mockResolvedValue({
@@ -285,4 +295,136 @@ describe('useArcadeGuard', () => {
     // Should not crash, just set loading to false
     expect(result.current.hasActiveSession).toBe(false)
   })
+
+  describe('enabled flag behavior', () => {
+    it('should NOT redirect from HTTP check when enabled=false', async () => {
+      const mockSession = {
+        session: {
+          gameUrl: '/arcade/memory-quiz',
+          currentGame: 'memory-quiz',
+          gameState: {},
+        },
+      }
+
+      ;(global.fetch as any).mockResolvedValue({
+        ok: true,
+        json: async () => mockSession,
+      })
+
+      vi.spyOn(nextNavigation, 'usePathname').mockReturnValue('/arcade-rooms')
+
+      renderHook(() => useArcadeGuard({ enabled: false }))
+
+      await waitFor(() => {
+        expect(global.fetch).not.toHaveBeenCalled()
+      })
+
+      // Should NOT redirect
+      expect(mockRouter.push).not.toHaveBeenCalled()
+    })
+
+    it('should NOT redirect from WebSocket when enabled=false', async () => {
+      let onSessionStateCallback: ((data: any) => void) | null = null
+
+      vi.spyOn(arcadeSocket, 'useArcadeSocket').mockImplementation((events) => {
+        onSessionStateCallback = events?.onSessionState || null
+        return mockUseArcadeSocket
+      })
+
+      ;(global.fetch as any).mockResolvedValue({
+        ok: false,
+        status: 404,
+      })
+
+      vi.spyOn(nextNavigation, 'usePathname').mockReturnValue('/arcade-rooms')
+
+      const { result } = renderHook(() => useArcadeGuard({ enabled: false }))
+
+      await waitFor(() => {
+        expect(result.current.loading).toBe(false)
+      })
+
+      // Simulate session-state event from WebSocket
+      onSessionStateCallback?.({
+        gameUrl: '/arcade/room',
+        currentGame: 'matching',
+        gameState: {},
+        activePlayers: [1],
+        version: 1,
+      })
+
+      await waitFor(() => {
+        // Should track the session
+        expect(result.current.hasActiveSession).toBe(true)
+        expect(result.current.activeSession).toEqual({
+          gameUrl: '/arcade/room',
+          currentGame: 'matching',
+        })
+      })
+
+      // But should NOT redirect since enabled=false
+      expect(mockRouter.push).not.toHaveBeenCalled()
+    })
+
+    it('should STILL redirect from WebSocket when enabled=true', async () => {
+      let onSessionStateCallback: ((data: any) => void) | null = null
+
+      vi.spyOn(arcadeSocket, 'useArcadeSocket').mockImplementation((events) => {
+        onSessionStateCallback = events?.onSessionState || null
+        return mockUseArcadeSocket
+      })
+
+      ;(global.fetch as any).mockResolvedValue({
+        ok: false,
+        status: 404,
+      })
+
+      vi.spyOn(nextNavigation, 'usePathname').mockReturnValue('/arcade-rooms')
+
+      renderHook(() => useArcadeGuard({ enabled: true }))
+
+      await waitFor(() => {
+        expect(mockUseArcadeSocket.joinSession).toHaveBeenCalled()
+      })
+
+      // Simulate session-state event from WebSocket
+      onSessionStateCallback?.({
+        gameUrl: '/arcade/room',
+        currentGame: 'matching',
+        gameState: {},
+        activePlayers: [1],
+        version: 1,
+      })
+
+      // Should redirect when enabled=true
+      await waitFor(() => {
+        expect(mockRouter.push).toHaveBeenCalledWith('/arcade/room')
+      })
+    })
+
+    it('should track session state even when enabled=false', async () => {
+      const mockSession = {
+        session: {
+          gameUrl: '/arcade/room',
+          currentGame: 'matching',
+          gameState: {},
+        },
+      }
+
+      ;(global.fetch as any).mockResolvedValue({
+        ok: true,
+        json: async () => mockSession,
+      })
+
+      const { result } = renderHook(() => useArcadeGuard({ enabled: false }))
+
+      await waitFor(() => {
+        expect(result.current.loading).toBe(false)
+      })
+
+      // Should still provide session info even without redirects
+      expect(result.current.hasActiveSession).toBe(false) // No fetch happened
+      expect(result.current.activeSession).toBe(null)
+    })
+  })
 })

apps/web/src/hooks/useArcadeGuard.ts

@@ -73,11 +73,14 @@ export function useArcadeGuard(options: UseArcadeGuardOptions = {}): UseArcadeGu
         currentGame: data.currentGame,
       })
 
-      // Redirect if we're not already on the active game page
-      if (pathname !== data.gameUrl) {
+      // Redirect if we're not already on the active game page (only if enabled)
+      const isAlreadyAtTarget = pathname === data.gameUrl
+      if (enabled && !isAlreadyAtTarget) {
         console.log('[ArcadeGuard] Redirecting to active session:', data.gameUrl)
         onRedirect?.(data.gameUrl)
         router.push(data.gameUrl)
+      } else if (isAlreadyAtTarget) {
+        console.log('[ArcadeGuard] Already at target URL, no redirect needed')
       }
     },
 
@@ -126,11 +129,14 @@ export function useArcadeGuard(options: UseArcadeGuardOptions = {}): UseArcadeGu
             currentGame: session.currentGame,
           })
 
-          // Redirect if we're not already on the active game page
-          if (pathname !== session.gameUrl) {
+          // Redirect if we're not already on the active game page (only if enabled)
+          const isAlreadyAtTarget = pathname === session.gameUrl
+          if (enabled && !isAlreadyAtTarget) {
             console.log('[ArcadeGuard] Redirecting to active session:', session.gameUrl)
             onRedirect?.(session.gameUrl)
             router.push(session.gameUrl)
+          } else if (isAlreadyAtTarget) {
+            console.log('[ArcadeGuard] Already at target URL, no redirect needed')
           }
         } else if (response.status === 404) {
           // No active session

apps/web/src/hooks/useArcadeRedirect.ts

@@ -71,10 +71,13 @@ export function useArcadeRedirect(options: UseArcadeRedirectOptions = {}): UseAr
       // Determine if we need to redirect
       const isArcadeLobby = currentGame === null || currentGame === undefined
       const isWrongGame = currentGame && currentGame !== data.currentGame
+      const isAlreadyAtTarget = _pathname === data.gameUrl
 
-      if (isArcadeLobby || isWrongGame) {
+      if ((isArcadeLobby || isWrongGame) && !isAlreadyAtTarget) {
         console.log('[ArcadeRedirect] Redirecting to active game:', data.gameUrl)
         router.push(data.gameUrl)
+      } else if (isAlreadyAtTarget) {
+        console.log('[ArcadeRedirect] Already at target URL, no redirect needed')
       }
     },
 

apps/web/src/hooks/useArcadeSession.ts

@@ -12,6 +12,12 @@ export interface UseArcadeSessionOptions<TState> extends UseOptimisticGameStateO
    */
   userId: string
 
+  /**
+   * Room ID for multi-user sync (optional)
+   * If provided, game state will sync across all users in the room
+   */
+  roomId?: string
+
   /**
    * Auto-join session on mount
    * @default true
@@ -76,7 +82,7 @@ export interface UseArcadeSessionReturn<TState> {
 export function useArcadeSession<TState>(
   options: UseArcadeSessionOptions<TState>
 ): UseArcadeSessionReturn<TState> {
-  const { userId, autoJoin = true, ...optimisticOptions } = options
+  const { userId, roomId, autoJoin = true, ...optimisticOptions } = options
 
   // Optimistic state management
   const optimistic = useOptimisticGameState<TState>(optimisticOptions)
@@ -122,9 +128,9 @@ export function useArcadeSession<TState>(
   // Auto-join session when connected
   useEffect(() => {
     if (connected && autoJoin && userId) {
-      joinSession(userId)
+      joinSession(userId, roomId)
     }
-  }, [connected, autoJoin, userId, joinSession])
+  }, [connected, autoJoin, userId, roomId, joinSession])
 
   // Send move with optimistic update
   const sendMove = useCallback(
@@ -156,9 +162,9 @@ export function useArcadeSession<TState>(
 
   const refresh = useCallback(() => {
     if (connected && userId) {
-      joinSession(userId)
+      joinSession(userId, roomId)
     }
-  }, [connected, userId, joinSession])
+  }, [connected, userId, roomId, joinSession])
 
   return {
     state: optimistic.state,

apps/web/src/hooks/useArcadeSocket.ts

@@ -20,7 +20,7 @@ export interface ArcadeSocketEvents {
 export interface UseArcadeSocketReturn {
   socket: Socket | null
   connected: boolean
-  joinSession: (userId: string) => void
+  joinSession: (userId: string, roomId?: string) => void
   sendMove: (userId: string, move: GameMove) => void
   exitSession: (userId: string) => void
   pingSession: (userId: string) => void
@@ -103,13 +103,17 @@ export function useArcadeSocket(events: ArcadeSocketEvents = {}): UseArcadeSocke
   }, [])
 
   const joinSession = useCallback(
-    (userId: string) => {
+    (userId: string, roomId?: string) => {
       if (!socket) {
         console.warn('[ArcadeSocket] Cannot join session - socket not connected')
         return
       }
-      console.log('[ArcadeSocket] Joining session for user:', userId)
-      socket.emit('join-arcade-session', { userId })
+      console.log(
+        '[ArcadeSocket] Joining session for user:',
+        userId,
+        roomId ? `in room ${roomId}` : '(solo)'
+      )
+      socket.emit('join-arcade-session', { userId, roomId })
     },
     [socket]
   )

apps/web/src/hooks/useRoomData.ts

@@ -40,25 +40,21 @@ export function useRoomData() {
   // Fetch the user's current room
   useEffect(() => {
     if (!userId) {
-      console.log('[useRoomData] No userId, clearing room data')
       setRoomData(null)
       setHasAttemptedFetch(false)
       return
     }
 
-    console.log('[useRoomData] Fetching current room for user:', userId)
     setIsLoading(true)
     setHasAttemptedFetch(false)
 
     // Fetch current room data
     fetch('/api/arcade/rooms/current')
       .then((res) => {
-        console.log('[useRoomData] API response status:', res.status)
         if (!res.ok) throw new Error('Failed to fetch current room')
         return res.json()
       })
       .then((data) => {
-        console.log('[useRoomData] API response data:', data)
         if (data.room) {
           const roomData = {
             id: data.room.id,
@@ -68,10 +64,8 @@ export function useRoomData() {
             members: data.members || [],
             memberPlayers: data.memberPlayers || {},
           }
-          console.log('[useRoomData] Setting room data:', roomData)
           setRoomData(roomData)
         } else {
-          console.log('[useRoomData] No room in response, clearing room data')
           setRoomData(null)
         }
         setIsLoading(false)
@@ -98,13 +92,12 @@ export function useRoomData() {
     const sock = io({ path: '/api/socket' })
 
     sock.on('connect', () => {
-      console.log('[useRoomData] Socket connected, joining room:', roomData.id)
       // Join the room to receive updates
       sock.emit('join-room', { roomId: roomData.id, userId })
     })
 
     sock.on('disconnect', () => {
-      console.log('[useRoomData] Socket disconnected')
+      // Socket disconnected
     })
 
     setSocket(sock)
@@ -127,7 +120,6 @@ export function useRoomData() {
       members: RoomMember[]
       memberPlayers: Record<string, RoomPlayer[]>
     }) => {
-      console.log('[useRoomData] Received room-joined event:', data)
       if (data.roomId === roomData.id) {
         setRoomData((prev) => {
           if (!prev) return null
@@ -146,7 +138,6 @@ export function useRoomData() {
       members: RoomMember[]
       memberPlayers: Record<string, RoomPlayer[]>
     }) => {
-      console.log('[useRoomData] Received member-joined event:', data)
       if (data.roomId === roomData.id) {
         setRoomData((prev) => {
           if (!prev) return null
@@ -165,7 +156,6 @@ export function useRoomData() {
       members: RoomMember[]
       memberPlayers: Record<string, RoomPlayer[]>
     }) => {
-      console.log('[useRoomData] Received member-left event:', data)
       if (data.roomId === roomData.id) {
         setRoomData((prev) => {
           if (!prev) return null
@@ -182,7 +172,6 @@ export function useRoomData() {
       roomId: string
       memberPlayers: Record<string, RoomPlayer[]>
     }) => {
-      console.log('[useRoomData] Received room-players-updated event:', data)
       if (data.roomId === roomData.id) {
         setRoomData((prev) => {
           if (!prev) return null
@@ -207,10 +196,19 @@ export function useRoomData() {
     }
   }, [socket, roomData?.id])
 
+  // Function to notify room members of player updates
+  const notifyRoomOfPlayerUpdate = () => {
+    if (socket && roomData?.id && userId) {
+      console.log('[useRoomData] Notifying room of player update')
+      socket.emit('players-updated', { roomId: roomData.id, userId })
+    }
+  }
+
   return {
     roomData,
     // Loading if: userId is pending, currently fetching, or have userId but haven't tried fetching yet
     isLoading: isUserIdPending || isLoading || (!!userId && !hasAttemptedFetch),
     isInRoom: !!roomData,
+    notifyRoomOfPlayerUpdate,
   }
 }

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

@@ -8,8 +8,29 @@ import { db, schema } from '@/db'
 import type { Player } from '@/db/schema/players'
 
 /**
- * Get a user's active players
- * These are the players that will participate when the user joins a game
+ * Get all players for a user (regardless of isActive status)
+ * @param viewerId - The guestId from the cookie (same as what getViewerId() returns)
+ */
+export async function getAllPlayers(viewerId: string): Promise<Player[]> {
+  // First get the user record by guestId
+  const user = await db.query.users.findFirst({
+    where: eq(schema.users.guestId, viewerId),
+  })
+
+  if (!user) {
+    return []
+  }
+
+  // Now query all players by the actual user.id (no isActive filter)
+  return await db.query.players.findMany({
+    where: eq(schema.players.userId, user.id),
+    orderBy: schema.players.createdAt,
+  })
+}
+
+/**
+ * Get a user's active players (solo mode)
+ * These are the players that will participate when the user joins a solo game
  * @param viewerId - The guestId from the cookie (same as what getViewerId() returns)
  */
 export async function getActivePlayers(viewerId: string): Promise<Player[]> {
@@ -30,7 +51,8 @@ export async function getActivePlayers(viewerId: string): Promise<Player[]> {
 }
 
 /**
- * Get all active players for all members in a room
+ * Get active players for all members in a room
+ * Returns only players marked isActive=true from each room member
  * Returns a map of userId -> Player[]
  */
 export async function getRoomActivePlayers(roomId: string): Promise<Map<string, Player[]>> {
@@ -39,7 +61,7 @@ export async function getRoomActivePlayers(roomId: string): Promise<Map<string,
     where: eq(schema.roomMembers.roomId, roomId),
   })
 
-  // Fetch active players for each member
+  // Fetch active players for each member (respects isActive flag)
   const playerMap = new Map<string, Player[]>()
   for (const member of members) {
     const players = await getActivePlayers(member.userId)

package.json

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